/* =============================================================
   style.css
   Renkleri değiştirmek istersen aşağıdaki :root bloğu yeterli.
   ============================================================= */

:root{
  --bg:#0d0f13;
  --panel:#14171d;
  --panel2:#1b1f27;
  --line:#262b35;
  --txt:#e7eaf0;
  --dim:#8b93a3;
  --accent:#4ea3ff;
  --in:#242932;
  --out:#2f6df6;
  --ok:#43d17f;
  --bad:#ff5f6b;
  --gold:#e8c33c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
code{font-family:"Cascadia Mono",Consolas,monospace}

#app{display:flex;height:100%}
#app.locked-out{filter:blur(14px);pointer-events:none}

/* mobil çekmece düğmesi ve arkasındaki karartma: masaüstünde yok */
#nav-toggle,#nav-backdrop{display:none}

/* ============ 18+ KAPISI ============ */

#agegate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:radial-gradient(ellipse at 50% 40%,#191d28,#08090c 75%);
}
.ag-box{
  max-width:440px;text-align:center;padding:34px 30px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.ag-mark{
  display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:16px;
  border-radius:50%;border:2px solid var(--bad);color:var(--bad);
  font-weight:700;font-size:15px;letter-spacing:.5px;
}
.ag-box h2{margin:0 0 12px;font-size:21px}
.ag-box p{margin:0 0 10px;color:var(--dim);font-size:13.5px;line-height:1.6}
.ag-q{color:var(--txt) !important;font-weight:600;margin-top:18px !important}
.ag-btns{display:flex;flex-direction:column;gap:9px;margin:20px 0 16px}
.ag-yes{padding:13px;border-radius:12px;background:var(--out);color:#fff;font-weight:600}
.ag-yes:hover{background:#4480ff}
.ag-no{padding:12px;border-radius:12px;border:1px solid var(--line);color:var(--dim)}
.ag-no:hover{color:var(--txt);border-color:#39414f}
.ag-fine{font-size:11px !important;color:#5b6270 !important;margin:0 !important}

/* ============ SOL PANEL ============ */

#sidebar{
  width:300px;flex:0 0 300px;height:100%;
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 14px;overflow-y:auto;
}
.sb-title h1{margin:0;font-size:17px}
.sb-sub{color:var(--dim);font-size:12px;margin-top:2px}

.sb-block{border-top:1px solid var(--line);padding:14px 0 4px;margin-top:10px}
.sb-block:first-of-type{border-top:0}
.sb-block.grow{flex:1;min-height:0;display:flex;flex-direction:column}
.sb-block h2{
  margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--dim);display:flex;align-items:center;gap:6px;
}
.hint{margin:0 0 8px;font-size:11px;color:var(--dim);line-height:1.5}
.hint code{color:var(--accent)}
.hint b{color:var(--txt)}

/* gün / saat / cüzdan satırı */
#status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}
.st-cell{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:8px 4px;text-align:center;overflow:hidden}
.st-cell b{display:block;font-size:15px;white-space:nowrap}
.st-cell span{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim)}
.st-cell.money b{color:var(--ok)}

.stat{margin-bottom:9px}
.stat.low .stat-top b{color:var(--bad)}
.stat.low .bar i{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.stat-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.stat-top span{color:var(--dim)}
.stat .bar{height:5px;background:var(--panel2);border-radius:4px;overflow:hidden}
.stat .bar i{display:block;height:100%;border-radius:4px;transition:width .35s ease}
.stat.flat{display:flex;justify-content:space-between;align-items:center;
  background:var(--panel2);border-radius:8px;padding:7px 10px;margin-bottom:11px}
.stat.flat span{color:var(--dim);font-size:12px}
.stat.flat b{font-size:16px}

.nav-row{display:flex;gap:6px;margin-bottom:10px}
.nav-btn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:9px 0;flex:1;text-align:center;transition:.15s}
.nav-btn:hover:not(:disabled){background:#252b36;border-color:#39414f}
.nav-btn:disabled{opacity:.3;cursor:default}
.sb-row{display:flex;gap:6px}
.mini-btn{flex:1;background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:6px 0;font-size:11px;color:var(--dim)}
.mini-btn:hover{color:var(--txt);border-color:#39414f}
.mini-btn.danger:hover{color:var(--bad);border-color:var(--bad)}

/* zaman kontrolleri (sol panel) */
.time-btn{flex:1;padding:10px 6px;border-radius:10px;font-size:11.5px;
  background:var(--panel2);border:1px solid var(--line);transition:.15s}
.time-btn:hover:not(:disabled){background:#252b36;border-color:#39414f}
.time-btn.sleep{background:var(--out);border-color:transparent;color:#fff;font-weight:600}
.time-btn.sleep:hover:not(:disabled){background:#4480ff}
.time-btn.sleep.off{background:var(--panel2);border-color:var(--line);
  color:#5b6270;font-weight:400;cursor:default}
#sleep-note{margin:8px 0 0;font-size:11px;color:var(--bad);line-height:1.5}

/* ============ PATREON / DISCORD ============
   index.html'de href boş bırakılırsa düğme sönük ve tıklanmaz olur. */

.sb-links{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.link-btn{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel2);
  color:var(--txt);font-size:12.5px;font-weight:600;text-decoration:none;
  transition:.15s}
.link-btn .lb-ic{font-size:14px;line-height:1;opacity:.9}
.link-btn:hover{transform:translateY(-1px)}
.link-btn.patreon:hover{border-color:#e0568a;color:#ff8ab3;background:rgba(224,86,138,.08)}
.link-btn.discord:hover{border-color:#5865f2;color:#93a0ff;background:rgba(88,101,242,.10)}
/* config.js'te link yazılmamışsa */
.link-btn.off{opacity:.3;pointer-events:none}

.ver{margin-left:6px;color:#5b6270;font-size:11px}

/* ============ TELEFON ============
   Boyut sabit: yükseklikten genişlik hesaplanır. İçerik ne olursa
   olsun telefon büyüyüp küçülmez (eski aspect-ratio bug'ının çözümü). */

#stage{flex:1;display:grid;place-items:center;min-width:0;
  background:radial-gradient(ellipse at 50% 30%,#1a1f2b 0%,var(--bg) 70%)}

#phone{
  --ph:min(880px,94vh);
  height:var(--ph);
  width:calc(var(--ph) * 0.46209);      /* 390 / 844 */
  flex:0 0 auto;
  background:#000;border-radius:46px;padding:11px;
  box-shadow:0 0 0 2px #2b303b,0 30px 70px rgba(0,0,0,.65);
}
#phone-screen{
  position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:var(--wallpaper,linear-gradient(160deg,#20293d,#3b2340 55%,#161a24));
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;
  /* hızlı hızlı tıklayınca mesajlar seçilmesin */
  user-select:none;-webkit-user-select:none;-ms-user-select:none;
}
/* ilerletilebilir durumdayken ekran tıklanabilir görünsün */
#phone-screen.can-advance{cursor:pointer}
#phone-screen.can-advance .no-advance,
#phone-screen.can-advance video,
#phone-screen.can-advance input{cursor:default}

#statusbar{
  position:relative;z-index:5;flex:0 0 42px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 22px 0;font-size:12px;font-weight:600;color:#fff;
}
.notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:104px;height:24px;background:#000;border-radius:16px}
.sb-right{display:flex;gap:6px;align-items:center}

/* içerik telefonu asla genişletmesin */
#screens{flex:1;min-height:0;min-width:0;overflow:hidden;display:flex}
/* position:relative -> içindeki popup (porn-modal) buna göre yerleşir */
.screen{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:rgba(14,16,21,.93);backdrop-filter:blur(14px)}

/* uygulama açılışı: ikondan büyüyor gibi.
   ana ekrana dönüşte tersi: dışarıdan içeri toparlanıyor gibi. */
@keyframes appIn  {from{opacity:0;transform:scale(.90)} to{opacity:1;transform:none}}
@keyframes homeIn {from{opacity:0;transform:scale(1.06)} to{opacity:1;transform:none}}
.screen.app-open      {animation:appIn .2s cubic-bezier(.2,.85,.3,1)}
.screen.home.app-open {animation:homeIn .22s cubic-bezier(.2,.85,.3,1)}
.screen.home.app-open .app-icon{animation:appIn .26s ease backwards}
.screen.home.app-open .app-dock{animation:appIn .3s ease backwards}
.screen.home{background:transparent}

.app-head{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;min-width:0;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(20,23,29,.92);font-size:15px;
}
.app-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-head em{color:var(--dim);font-style:normal;font-size:12px;white-space:nowrap}
.app-head .pay{color:var(--ok);font-weight:600}
.spacer{flex:1;min-width:0}
.hbtn{font-size:18px;padding:0 4px;color:var(--accent);flex:0 0 auto}

.scroll{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:14px}
.scroll::-webkit-scrollbar{width:5px}
.scroll::-webkit-scrollbar-thumb{background:#333a47;border-radius:4px}
.empty{color:var(--dim);text-align:center;padding:36px 20px;font-size:13px;line-height:1.6}

/* --- ana ekran --- */
.home-clock{text-align:center;color:#fff;padding:28px 0 24px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.home-clock b{display:block;font-size:54px;font-weight:300;letter-spacing:-1px}
.home-clock span{font-size:13px;opacity:.85}
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 4px;padding:8px 14px;min-width:0}
.app-icon{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
/* overflow:hidden KOYMA: rozet kutunun dışına taşıyor, kırpılıyor.
   Görselin köşesi border-radius:inherit ile yuvarlanıyor. */
.app-icon .ic{position:relative;width:100%;max-width:54px;aspect-ratio:1;border-radius:15px;
  display:grid;place-items:center;font-size:24px;box-shadow:0 6px 14px rgba(0,0,0,.45)}
/* kendi ikon görselin: emojinin üstünü kaplar, dosya yoksa emoji kalır */
.app-icon .ic img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit}
.app-icon .ic .badge{z-index:3}
.app-icon .nm{font-size:10.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* alt sabit çubuk: gerçek telefonlardaki gibi */
.app-dock{
  margin:auto 12px 14px;padding:11px 10px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.10);
  border-radius:26px;backdrop-filter:blur(16px);
}
.app-icon.docked .ic{max-width:50px}
.app-icon.locked{opacity:.45}
.app-icon:not(.locked):hover .ic{transform:scale(1.06);transition:.15s}
.badge{position:absolute;top:-5px;right:-5px;z-index:3;
  background:var(--bad);color:#fff;font-style:normal;
  font-size:10px;font-weight:700;line-height:1;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #12151c;box-sizing:content-box}

/* --- ana ekran saat paneli (uyku / bekleme) --- */
.time-panel{margin:auto 12px 12px;padding:12px;border-radius:16px;
  background:rgba(12,14,19,.82);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:10px}
.tp-energy{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.tp-energy i{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.tp-energy i b{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .3s}
.tp-energy em{font-style:normal;color:var(--txt);font-weight:600;min-width:22px;text-align:right}
.tp-btns{display:grid;grid-template-columns:1fr 1.3fr;gap:7px}
.tp-btn{padding:10px 6px;border-radius:11px;font-size:12px;
  background:rgba(46,54,68,.9);border:1px solid #39414f;transition:.15s}
.tp-btn:hover{background:#39414f}
.tp-btn.sleep{background:rgba(47,109,246,.85);border-color:transparent;font-weight:600}
.tp-btn.sleep:hover{background:#4480ff}
.tp-btn.sleep.urge{animation:pulse 1.6s ease-in-out infinite}
.tp-btn.sleep.off{background:rgba(46,54,68,.7);border-color:#39414f;color:var(--dim);cursor:default}
.tp-btn.sleep.off:hover{background:rgba(46,54,68,.7)}
.tp-note{margin:0;font-size:11px;color:var(--bad);text-align:center}

/* --- avatarlar --- */
.av{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:grid;place-items:center;font-weight:600;color:#fff;overflow:hidden;font-size:15px}
.av.sm{width:30px;height:30px;flex-basis:30px;font-size:12px}
.av.lg{width:78px;height:78px;flex-basis:78px;font-size:30px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- liste satırı --- */
.list .row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);text-align:left;min-width:0}
.row:hover{background:rgba(255,255,255,.04)}
.row-mid{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.row-mid b{font-size:14px}
.row-mid em{font-style:normal;color:var(--dim);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sağ uç: saat + okunmamış noktası */
.row-end{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
  gap:5px;margin-left:8px}
.row-end .when{font-style:normal;font-size:10.5px;color:#5b6270;white-space:nowrap}
.list .row.unread .row-end .when{color:var(--out)}

/* --- sohbet --- */
.thread{display:flex;flex-direction:column;gap:8px;padding:16px 12px 20px}
.msg{max-width:80%;padding:9px 12px;border-radius:18px;font-size:14px;
  animation:pop .22s ease;word-break:break-word}
.msg p{margin:0}
.msg.in{align-self:flex-start;background:var(--in);border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;background:var(--out);border-bottom-right-radius:5px;color:#fff}
.msg .media{margin:-3px -5px}
.msg .media+p{margin-top:8px}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* gün ayracı: Today / Yesterday / Day 7 */
.daysep{align-self:stretch;display:flex;align-items:center;gap:10px;
  margin:10px 4px 2px;color:var(--dim);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase}
.daysep::before,.daysep::after{content:"";flex:1;height:1px;background:var(--line,#2a2d33);opacity:.6}
.daysep span{white-space:nowrap}

.msg.typing{display:flex;gap:4px;padding:13px 14px}
.msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:blink 1.2s infinite}
.msg.typing span:nth-child(2){animation-delay:.2s}
.msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* --- medya + eksik dosya --- */
/* object-fit:cover KULLANMA: dikey ve yatay videolar karışık geldiği
   için kırpıyor. contain hiçbir videoyu kesmez, gerekirse siyah bant
   bırakır. Yükseklik doğal orandan gelir, sadece tavanı sınırlıdır. */
.media{display:block;width:100%;height:auto;max-height:340px;
  border-radius:12px;background:#000;object-fit:contain}
.vid-missing{
  display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  min-height:140px;padding:16px;border-radius:12px;text-align:center;
  background:repeating-linear-gradient(45deg,#20242d,#20242d 10px,#252a35 10px,#252a35 20px);
  border:1px dashed #4a5262;
}
.vid-missing b{font-size:11px;letter-spacing:1px;color:#8892a4}
.vid-missing code{font-size:11px;color:var(--accent);word-break:break-all}
.vid-missing em{font-size:10px;color:#5d6573;font-style:normal}
.vid-missing.call-video{position:absolute;inset:0;z-index:0;border-radius:0;border:0}
.vid-missing.lb-media{width:100%;min-height:220px}
.vid-missing.cam-preview{min-height:190px}

/* ================= THREADS (quest listesi) ================= */

.quests{display:flex;flex-direction:column;gap:8px;padding:12px}
.q-h{margin:8px 0 2px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.q-h:first-child{margin-top:0}
.q-card{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;
  padding:12px 13px;border-radius:13px;border:1px solid var(--line);background:var(--panel2)}
.q-card b{font-size:14px}
.q-card span{font-size:12px;color:var(--dim);line-height:1.45}
.q-card.open{border-color:#3c4557;background:rgba(46,54,68,.85);position:relative}
.q-card.open:hover{border-color:var(--out);background:rgba(47,109,246,.16)}
.q-card.open.shout{border-color:var(--out);box-shadow:0 0 0 1px rgba(47,109,246,.35)}
.q-go{position:absolute;right:12px;top:12px;font-style:normal;font-size:11px;color:var(--accent)}
.q-via{font-style:normal;font-size:10.5px;color:var(--gold);margin-top:3px}
.q-rpt{font-style:normal;font-size:10px;color:var(--dim);margin-top:2px}
.q-card.waiting{opacity:.6;border-style:dashed}
.q-card.waiting b{color:var(--dim);font-weight:500}
.q-card.locked{opacity:.55}
.q-card.locked b{color:var(--dim);font-weight:500}
.q-more{margin:10px 2px 0;font-size:11.5px;color:#5b6270;text-align:center;font-style:italic}
.q-card.done{opacity:.4;padding:8px 13px}
.q-card.done b{font-size:12.5px;font-weight:500;color:var(--ok)}

/* ================= NIGHTDESK MINIGAME ================= */

/* zaman çubuğu */
.w-timerwrap{flex:0 0 5px;background:rgba(255,255,255,.07)}
#w-timer{display:block;height:100%;background:var(--ok);transition:width .06s linear}
#w-timer.low{background:var(--bad)}

/* ilerleme noktaları */
.w-dots{flex:0 0 auto;display:flex;justify-content:center;gap:5px;padding:11px 0 4px}
.w-dots i{width:6px;height:6px;border-radius:50%;background:#333a47}
.w-dots i.past{background:var(--dim)}
.w-dots i.now{background:var(--accent);transform:scale(1.35)}

/* bilet kartı */
.work-game{justify-content:space-between}
.w-card{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:20px 22px;text-align:center}
.w-from{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim)}
.w-card p{margin:0;font-size:19px;line-height:1.45;animation:pop .2s ease}

.w-flash{padding:7px 16px;border-radius:20px;font-size:12.5px;font-weight:600;animation:pop .18s ease}
.w-flash.ok{background:rgba(67,209,127,.16);color:var(--ok)}
.w-flash.no{background:rgba(255,95,107,.16);color:var(--bad)}

/* departman düğmeleri */
.w-tags{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.w-tagbtn{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 4px;border-radius:14px;font-size:12px;
  background:var(--panel2);border:1px solid var(--line);transition:.12s}
.w-tagbtn .w-ic{font-size:22px}
.w-tagbtn:hover:not(:disabled){border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.w-tagbtn:active:not(:disabled){transform:scale(.96)}
.w-tagbtn:disabled{cursor:default}
.w-tagbtn.right{border-color:var(--ok);background:rgba(67,209,127,.18)}
.w-tagbtn.wrong{border-color:var(--bad);background:rgba(255,95,107,.18)}
.w-tagbtn.dim{opacity:.35}

.w-legend{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.w-legend span{font-size:11px;color:var(--dim);border:1px solid;border-radius:20px;padding:3px 9px;opacity:.8}

.work-idle{display:flex;flex-direction:column;gap:14px;padding:18px 16px}
.w-hero{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:14px 0 4px}
.w-logo{font-size:40px}
.w-hero b{font-size:15px}
.w-sub{font-size:12px;color:var(--dim)}
.w-task{background:rgba(47,109,246,.14);border:1px solid rgba(47,109,246,.4);
  border-radius:11px;padding:10px 12px;font-size:12.5px;line-height:1.5}
.w-warn{background:rgba(232,195,60,.1);border:1px solid rgba(232,195,60,.35);
  color:var(--gold);border-radius:11px;padding:9px 12px;font-size:12px;text-align:center}
.w-warn.good{background:rgba(67,209,127,.1);border-color:rgba(67,209,127,.35);color:var(--ok)}
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.w-stats div{background:var(--panel2);border-radius:11px;padding:11px 6px;text-align:center}
.w-stats b{display:block;font-size:17px}
.w-stats span{font-size:10.5px;color:var(--dim)}
.w-go{width:100%;padding:13px;border-radius:12px;background:var(--out);
  color:#fff;font-weight:600;transition:.15s;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.w-go:hover{background:#4480ff}
.w-cost{font-style:normal;font-size:10.5px;font-weight:400;opacity:.75}
.work-head .w-tag{font-style:normal;font-size:10px;color:var(--dim);
  background:var(--panel2);border-radius:5px;padding:2px 6px;flex:0 0 auto}
.work-head .w-tag.hot{color:#ff9ec4;background:rgba(224,86,138,.18)}
.w-bar{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.08);
  background:rgba(20,23,29,.94);padding:12px;max-height:48%;overflow-y:auto}
.w-replies{display:flex;flex-direction:column;gap:7px}
.w-result{display:flex;flex-direction:column;gap:10px;align-items:center}
.w-pay{color:var(--ok);font-size:18px}

/* ================= KAMERA ================= */

.cam{display:flex;flex-direction:column;gap:10px;padding:14px}
.cam-view{border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.cam-preview{max-height:260px;object-fit:contain}
.cam-empty{min-height:190px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;color:var(--dim)}
.cam-empty span{color:var(--bad);font-size:13px;animation:blink 1.8s infinite}
.cam-empty em{font-style:normal;font-size:12px;text-align:center;padding:0 24px;line-height:1.5}
.cam-h{margin:6px 2px 0;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--dim)}
.cam-note{margin:4px 2px 0;font-size:11px;color:#5b6270;font-style:italic;text-align:center}
.cam-opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:12px;border-radius:13px;background:var(--panel2);border:1px solid var(--line);transition:.15s}
.cam-opt:hover:not(:disabled){border-color:var(--bad);background:rgba(255,95,107,.08)}
.cam-opt:disabled{cursor:default}
.cam-opt.used{opacity:.5}
.cam-opt.shut{opacity:.4;background:transparent;border-style:dashed}
.cam-ic{font-size:24px;flex:0 0 auto}
.cam-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.cam-txt b{font-size:13.5px}
.cam-txt em{font-style:normal;font-size:11.5px;color:var(--dim)}
.cam-opt.shut .cam-txt b{color:var(--dim);letter-spacing:2px}
.cam-opt.shut .cam-txt em{color:var(--gold)}
.cam-rec{font-size:10px;letter-spacing:1px;color:var(--bad);flex:0 0 auto}
.cam-rec.done{color:var(--ok)}
.cam-lock{font-size:13px;flex:0 0 auto;opacity:.6}

/* ================= GLIMPSE ================= */

.gram{padding:0}
.gram-crown{font-size:20px;line-height:1;filter:drop-shadow(0 2px 6px rgba(232,195,60,.45))}
.gram-logo{font-size:17px;letter-spacing:-.3px;
  background:linear-gradient(45deg,#f7d35a,#e8c33c 45%,#c8971f);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gram{padding:12px}

/* abonelik kademeleri */
.tier-row{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tier{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
  padding:11px 13px;border-radius:13px;background:var(--panel2);
  border:1px solid var(--line);transition:.15s;position:relative}
.tier:hover:not(:disabled){border-color:var(--c)}
.tier b{font-size:14px;color:var(--c)}
.tier em{font-style:normal;font-size:11.5px;color:var(--dim)}
.tier i{font-style:normal;font-size:11px;color:var(--txt);margin-top:3px}
.tier.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.tier.on i{color:var(--ok)}
.tier.poor i{color:var(--bad)}

/* ================= RÜYA ================= */

/* justify-content:center YERİNE wrap'e margin:auto.
   İçerik ekrandan uzunsa kaydırılabiliyor, kısaysa ortada duruyor.
   (Ortalanmış flex'te taşan içeriğin üstü kesiliyor ve düğmeye
   ulaşılamıyordu.) */
.dream-screen{background:#05060a;align-items:center;padding:16px;overflow-y:auto}
.dream-wrap{width:100%;margin:auto 0;display:flex;flex-direction:column;
  align-items:center;gap:14px;animation:appIn .5s ease}
.dream-video{width:100%;max-height:min(52vh,380px);object-fit:contain;
  background:#000;border-radius:14px;filter:saturate(.75) contrast(1.05)}
.dream-text{margin:0;font-size:13px;line-height:1.6;color:#aab3c4;
  font-style:italic;text-align:center}

/* ================= GÜN ÖZETİ ================= */

/* Uzun özetlerde kaydırılabilir olmalı, yoksa alttaki "Day N"
   düğmesine ulaşılamıyor. Ortalama işi margin:auto ile yapılıyor. */
.ds-screen{background:radial-gradient(ellipse at 50% 30%,#1b2130,#0b0d12 75%);
  align-items:center;padding:18px;overflow-y:auto}
.ds-wrap{width:100%;margin:auto 0;display:flex;flex-direction:column;
  align-items:center;gap:14px;animation:appIn .3s ease}
.ds-kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.ds-day{margin:0;font-size:34px;font-weight:300;letter-spacing:-.5px}

.ds-lines{width:100%;display:flex;flex-direction:column;gap:6px}
.ds-lines p{margin:0;font-size:12.5px;line-height:1.5;color:#cfd6e2;
  padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.04);
  border-left:2px solid rgba(255,255,255,.14)}

.ds-money{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ds-money div{background:rgba(255,255,255,.05);border-radius:11px;
  padding:10px 4px;text-align:center}
.ds-money b{display:block;font-size:15px}
.ds-money b.in{color:var(--ok)}
.ds-money b.out{color:var(--bad)}
.ds-money span{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim)}

.ds-stats{display:flex;gap:16px}
.ds-stat{text-align:center}
.ds-stat b{display:block;font-size:15px}
.ds-stat span{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim)}

.ds-coming{margin:0;font-size:11.5px;color:var(--gold);text-align:center}

/* ================= İÇERİK SONU ================= */
.end-screen{background:radial-gradient(ellipse at 50% 25%,#2a1f33,#0b0d12 78%);
  align-items:center;padding:20px;overflow-y:auto}
.end-wrap{width:100%;margin:auto 0;display:flex;flex-direction:column;
  align-items:center;gap:12px;text-align:center;animation:appIn .35s ease}
.end-kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.end-h{margin:0;font-size:27px;font-weight:300;letter-spacing:-.4px}
.end-p{margin:0;font-size:12.5px;line-height:1.6;color:#cfd6e2}
.end-p.dim{color:var(--dim);font-size:11.5px}
.end-btns{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.end-btn{display:block;padding:11px;border-radius:11px;font-size:12.5px;
  font-weight:600;text-decoration:none;color:#fff;transition:.15s}
.end-btn.patreon{background:#e0568a}
.end-btn.patreon:hover{background:#ee6c9d}
.end-btn.discord{background:#5865f2}
.end-btn.discord:hover{background:#6d78ff}

/* ================= CRATE (alışveriş) ================= */
.sh-row{display:flex;align-items:flex-start;gap:11px;padding:11px;
  border-radius:12px;background:var(--panel2);border:1px solid var(--line);
  margin-bottom:8px}
.sh-row.has{opacity:.6;border-style:dashed}
.sh-ic{font-size:24px;flex:0 0 auto;line-height:1.2}
.sh-mid{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sh-mid b{font-size:13px}
.sh-mid em{font-style:normal;font-size:11.5px;color:var(--dim);line-height:1.4}
.sh-perk{font-style:normal;font-size:10.5px;color:var(--ok);margin-top:2px}
.sh-perk.unlock{color:var(--bad)}
.sh-eta{font-style:normal;font-size:10.5px;color:#5b6270}
.sh-buy{flex:0 0 auto;align-self:center;padding:7px 13px;border-radius:9px;
  font-size:12px;font-weight:600;background:var(--out);color:#fff;transition:.15s}
.sh-buy:hover:not(:disabled){background:#4480ff}
.sh-buy.poor{background:var(--panel2);border:1px solid var(--bad);
  color:var(--bad);cursor:default}
.sh-state{flex:0 0 auto;align-self:center;font-size:10.5px;letter-spacing:.6px;
  text-transform:uppercase}
.sh-state.owned{color:var(--ok)}
.sh-state.coming{color:var(--gold);text-align:right;max-width:80px;line-height:1.3}

/* Glimpse sekmeleri (Watch / Studio) */
.gram-tabs{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(20,23,29,.9)}
.gtab{padding:10px 0;font-size:12.5px;color:var(--dim);
  border-bottom:2px solid transparent;transition:.15s}
.gtab:hover{color:var(--txt)}
.gtab.on{color:var(--txt);border-bottom-color:var(--gold);font-weight:600}

/* Studio: yükleme satırları */
.up-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;
  padding:9px 10px;border-radius:11px;background:var(--panel2);border:1px solid var(--line)}
.up-name{flex:1;min-width:0;font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.up-btns{display:flex;gap:4px;flex:0 0 auto}
.up-btn{padding:4px 8px;border-radius:7px;font-size:10.5px;font-weight:600;
  color:var(--c);border:1px solid var(--c);background:transparent;transition:.15s}
.up-btn:hover{background:var(--c);color:#0b0d11}
.up-live{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:11.5px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.up-live i{font-style:normal;font-size:9px;font-weight:700;color:#0b0d11;
  padding:1px 6px;border-radius:4px;text-transform:uppercase}
.up-live span{flex:1;min-width:0;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.up-live em{font-style:normal;color:#5b6270;font-size:10.5px}
.w-go.flat{background:var(--panel2);border:1px solid var(--line);color:var(--dim)}

/* acil bilet: ekran kırmızıya çalıyor */
.work-game.urgent .w-from{color:var(--bad)}
.work-game.urgent #w-timer{background:var(--bad)}
.work-game.urgent .w-card p{color:#fff}

/* rastgele video: düğme alanı */
.porn-stage{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.porn-stage.empty-stage{align-items:center;text-align:center;
  padding:26px 14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px dashed var(--line)}
.porn-icon{font-size:40px;filter:drop-shadow(0 3px 10px rgba(232,195,60,.4))}
.w-go.big{padding:16px;font-size:15px}
.porn-note{margin:0;font-size:11.5px;color:var(--dim);line-height:1.5;max-width:230px}

/* video popup: uygulamanın üstüne açılır */
.porn-modal{position:absolute;inset:0;z-index:30;padding:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,8,.95);backdrop-filter:blur(8px);
  animation:pop .2s ease}
.pm-box{width:100%;display:flex;flex-direction:column;gap:10px}
.pm-video{width:100%;max-height:min(62vh,430px);
  object-fit:contain;background:#000;border-radius:14px}
.pm-btns{display:flex;flex-direction:column;gap:7px}
.pm-title{margin:0;text-align:center;font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--dim)}
.pm-title.done{color:var(--gold)}
.w-go.cum{background:var(--bad)}
.w-go.cum:hover{background:#ff7078}

/* ================= WALLET ================= */

.wal-big{background:rgba(67,209,127,.09);border:1px solid rgba(67,209,127,.3);
  border-radius:14px;padding:16px;text-align:center;margin-bottom:14px}
.wal-big span{display:block;font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--dim)}
.wal-big b{display:block;font-size:32px;color:var(--ok);margin-top:4px}

.bill{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:6px;
  border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.bill.now{border-color:var(--bad);background:rgba(255,95,107,.08)}
.bill b{flex:1;min-width:0;font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bill em{font-style:normal;font-size:11px;color:var(--dim)}

.led{display:flex;align-items:center;gap:8px;padding:8px 2px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.led-t{flex:1;min-width:0;font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.led-d{font-size:10px;color:#5b6270;white-space:nowrap}
.led b{font-size:12.5px;min-width:52px;text-align:right}
.led b.in{color:var(--ok)}
.led b.out{color:var(--bad)}

/* ================= SETTINGS ================= */

.set-row{display:flex;gap:6px;margin-bottom:4px}
.set-row input{flex:1;min-width:0;background:#0f1218;border:1px solid var(--line);
  color:var(--txt);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px}
.set-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.set-btns .up-btn{flex:1;padding:9px 8px;font-size:11.5px;text-transform:capitalize}
.up-btn.on{background:var(--c);color:#0b0d11}
.wall-row{display:flex;gap:8px;margin-bottom:4px}
.wall{flex:1;height:52px;border-radius:11px;border:2px solid transparent;transition:.15s}
.wall:hover{border-color:var(--dim)}
.wall.on{border-color:var(--gold)}

/* mesaj boyutu ve animasyon tercihi */
.msg{font-size:var(--msg-size,14px)}
body.no-motion *{animation:none !important;transition:none !important}

/* ================= GALERİ / NOTLAR / ARAMA ================= */

.gal{display:block}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.gal-h{margin:2px 0 9px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}
.gal-h.ev{color:var(--bad)}
.cell.ev{border-color:rgba(255,95,107,.45);background:rgba(255,95,107,.07)}
.cell.ev .cell-ic{color:var(--bad)}
.cell{position:relative;aspect-ratio:1;border-radius:12px;background:#0c0f14;
  border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;padding:10px}
.cell:hover{border-color:var(--accent)}
/* kapak görüntüsü: videonun ilk karesi, tıklamayı yutmaz */
.cell-art{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;opacity:.55}
.cell-ic{position:relative;z-index:1;margin-top:auto;font-size:26px;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8)}
.cell-nm{position:relative;z-index:1;font-size:10.5px;color:#dbe1ec;text-align:center;
  line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.cell.ev .cell-ic{color:#ff8a92}

.notes{display:flex;flex-direction:column;gap:10px}
.note{background:rgba(255,255,255,.04);border-left:3px solid var(--accent);
  border-radius:8px;padding:10px 12px}
.note b{font-size:13px}
.note p{margin:3px 0 0;font-size:13px;color:var(--dim)}

/* günün geçmesini engelleyen şey: en üstte, kırmızı çerçeveli */
.note.blocker{border:1px solid var(--bad);border-left-width:3px;
  background:rgba(255,95,107,.09);padding:11px 13px}
.note.blocker b{color:var(--bad)}
.note.blocker p{color:#e7eaf0}
.note.blocker em{display:block;margin-top:6px;font-style:normal;
  font-size:11px;color:var(--dim)}

.screen.call{position:relative;background:#000;align-items:center;justify-content:flex-end}
.call-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border-radius:0;max-height:none;z-index:0;background:#000}
.call-top{position:absolute;top:56px;left:0;right:0;z-index:2;display:flex;
  flex-direction:column;align-items:center;gap:8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.call-top b{font-size:22px}
.call-top em{font-style:normal;font-size:13px;opacity:.8}
.call-cap{position:relative;z-index:2;color:#fff;font-size:15px;margin:0 0 14px;
  background:rgba(0,0,0,.55);padding:8px 14px;border-radius:20px}
.call-btns{position:relative;z-index:2;padding-bottom:28px}
.cbtn{padding:12px 30px;border-radius:30px;font-weight:600;color:#fff}
.cbtn.red{background:#e2384a}

/* ================= ALT PANEL: anlatım + seçenekler ================= */

#dock{position:relative;z-index:15;flex:0 0 auto;display:flex;flex-direction:column;
  max-height:52%;overflow-y:auto;background:rgba(12,14,19,.96);
  /* anlatım kutusu çizilirken kaydırma çubuğu bir an parlıyordu */
  scrollbar-width:none;-ms-overflow-style:none}
#dock::-webkit-scrollbar{width:0;height:0;display:none}
#dock:not(:has(> :not(.hidden))){display:none}

#narration{margin:12px 12px 0;background:rgba(28,33,43,.92);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px 15px;animation:pop .25s ease}
#narration p{margin:0;font-size:14px;line-height:1.55;color:#dbe1ec;font-style:italic}

#choices{display:flex;flex-direction:column;gap:7px;margin:12px 12px 0}
#dock>*:last-child{margin-bottom:12px}
.choice{position:relative;text-align:left;padding:11px 14px;border-radius:12px;font-size:13.5px;
  background:rgba(46,54,68,.92);border:1px solid #39414f;transition:.15s;width:100%}
.choice:hover:not(:disabled){background:var(--out);border-color:var(--out);transform:translateX(3px)}
.choice:disabled{cursor:default}
.choice.poor{opacity:.45}
.cost{float:right;margin-left:10px;font-style:normal;font-size:11px;color:var(--ok);
  background:rgba(67,209,127,.13);border-radius:6px;padding:1px 7px}
.cost.no{color:var(--bad);background:rgba(255,95,107,.13)}
.cost.vid{color:var(--accent);background:rgba(78,163,255,.13)}
.cost.vid.no{color:var(--bad);background:rgba(255,95,107,.13)}
.cost.pay{color:var(--gold);background:rgba(232,195,60,.14)}
.cam-note.gold{color:var(--gold)}

/* ================= bildirim / lightbox / alt çubuk ================= */

#toast{position:absolute;top:50px;left:50%;transform:translateX(-50%);z-index:30;
  max-width:80%;text-align:center;background:rgba(20,24,32,.97);border:1px solid var(--line);
  padding:8px 16px;border-radius:20px;font-size:12px;animation:pop .2s ease}
.hidden{display:none !important}

.lightbox{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.94);
  display:grid;place-items:center;padding:16px}
.lb-media{max-height:80%;width:100%;object-fit:contain}

#homebar{position:relative;z-index:10;flex:0 0 26px;display:grid;place-items:center;
  background:rgba(14,16,21,.92);cursor:pointer}
#homebar .bar{width:114px;height:5px;border-radius:4px;background:#e7eaf0;opacity:.7}
#homebar:hover .bar{opacity:1}

/* ============================================================
   DAR EKRAN / MOBİL

   1100px altında sol panel daralıyor.
   820px altında sol panel tamamen çekmeceye dönüşüyor: ekranda
   sadece telefon kalıyor, telefon da ekranı dolduracak kadar
   büyüyor ama asla taşmıyor.
   ============================================================ */

@media (max-width:1100px){
  #sidebar{width:240px;flex-basis:240px}
  #phone{--ph:min(700px,90vh)}
}

@media (max-width:820px){

  /* --- yerleşim: artık yan yana değil, telefon tek başına --- */
  #app{display:block;height:100%}
  #stage{height:100%;width:100%;padding:0}

  /* --- sol panel -> soldan açılan çekmece --- */
  #sidebar{
    position:fixed;z-index:60;top:0;left:0;height:100%;
    width:min(330px,88vw);flex:none;
    padding-top:60px;                       /* düğmenin altında kalmasın */
    transform:translateX(-102%);
    transition:transform .22s cubic-bezier(.2,.85,.3,1);
    box-shadow:16px 0 44px rgba(0,0,0,.55);
    border-right:1px solid var(--line);
  }
  body.nav-open #sidebar{transform:none}

  /* --- çekmece açıkken arkayı karart --- */
  #nav-backdrop{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(0,0,0,.55);opacity:0;pointer-events:none;
    transition:opacity .22s ease;
  }
  body.nav-open #nav-backdrop{opacity:1;pointer-events:auto}

  /* --- hamburger: telefonun durum çubuğunun soluna oturuyor --- */
  #nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    position:fixed;z-index:70;top:10px;left:10px;
    width:40px;height:40px;padding:0 10px;border-radius:12px;
    background:rgba(20,23,29,.72);border:1px solid var(--line);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  #nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--txt);
    transition:transform .22s ease,opacity .18s ease}
  /* açıkken çarpıya dönüşüyor */
  body.nav-open #nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.nav-open #nav-toggle span:nth-child(2){opacity:0}
  body.nav-open #nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* --- telefon: iki boyuta birden sığdır, taşma yok ---
     yükseklik ekranı dolduruyor, ama genişlik de sığmak zorunda:
     min() ikisinden hangisi küçükse onu seçiyor. */
  #phone{
    --ph:min(calc(100vh - 16px), calc((100vw - 16px) / 0.46209));
    padding:6px;border-radius:32px;
    box-shadow:0 0 0 2px #2b303b,0 12px 30px rgba(0,0,0,.5);
  }
  #phone-screen{border-radius:26px}

  /* --- çekmecedeki dokunma hedefleri büyüsün --- */
  .mini-btn{padding:10px 12px;font-size:12.5px}
  .nav-btn{width:52px;height:42px;font-size:16px}
  .time-btn{padding:13px}
  .link-btn{padding:12px 14px}

  /* iOS 16px'ten küçük yazılı alana odaklanınca sayfayı zoomluyor
     ve telefon kayıyor. 16px yapınca yapmıyor. */
  .set-row input{font-size:16px}
}

/* Mobil tarayıcılarda adres çubuğu yüzünden 100vh gerçek yükseklikten
   büyük çıkıyor ve telefonun altı kesiliyor. dvh destekleyen yerde onu
   kullan. */
@supports (height:100dvh){
  @media (max-width:820px){
    #phone{--ph:min(calc(100dvh - 16px), calc((100vw - 16px) / 0.46209))}
  }
}

/* Yatay tutulan telefon: ekran çok basık, telefonu genişliğe göre
   değil yüksekliğe göre kıs ve kenar boşluğunu azalt. */
@media (max-width:820px) and (orientation:landscape){
  #phone{--ph:calc(100vh - 8px);padding:5px;border-radius:26px}
  #phone-screen{border-radius:21px}
}
@supports (height:100dvh){
  @media (max-width:820px) and (orientation:landscape){
    #phone{--ph:calc(100dvh - 8px)}
  }
}

/* Dokunmatikte gri tıklama parlaması olmasın */
@media (hover:none){
  *{-webkit-tap-highlight-color:transparent}
  .link-btn:hover,.choice:hover,.row:hover{transform:none}
}

/* --- okunmamış mesaj işareti --- */
.list .row.unread b{color:#fff}
.list .row .dot{width:8px;height:8px;border-radius:50%;background:var(--out);flex:0 0 8px}
.list .row.unread{background:rgba(47,109,246,.06)}

/* --- seçenek altındaki "neden yapamıyorsun" satırı --- */
.choice .why{display:block;margin-top:3px;font-style:normal;font-size:10.5px;color:var(--dim)}
.choice.poor .why{color:var(--bad)}
.choice.leave{background:transparent;border-style:dashed;border-color:#39414f}
.choice.leave:hover{background:rgba(255,255,255,.05);border-color:var(--dim);transform:none}
.choice.leave .why{color:#5b6270}