/* Kurmaca Bürosu — v2 stil
   Gece bürosu: koyu masa, sarı lamba, dosya kâğıdı, mantar pano, kırmızı ip.
   Tek (koyu) tema bilinçli tercih. Renkler yalnızca aşağıdaki tokenlardan kullanılır. */

:root{
  /* masa ve yazı */
  --desk:#141922;      /* arka plan, gece mavisi */
  --desk-2:#1b222e;    /* paneller */
  --line:#2d3646;      /* çizgiler */
  --fg:#ddd7c9;        /* ana yazı */
  --muted:#939aa7;     /* ikincil yazı */
  /* kâğıt */
  --paper:#ece6d7;
  --paper-2:#ddd4bf;
  --ink:#221f1a;
  --ink-soft:#5d564a;
  /* vurgular */
  --brass:#c9a45c;     /* pirinç, "ustaca" */
  --string:#c63b2f;    /* kırmızı ip, "güçlü" */
  --ok:#8ab583;
  --warn:#d9a54b;
  --cork:#2c2620;
  --cork-2:#3a3129;
  /* ip renkleri (tür) */
  --ip-leitmotif:var(--brass);
  --ip-metafor:var(--string);
  --ip-mekan:#7fa08a;
  --ip-diyalog:var(--paper-2);
  --ip-anlatici:color-mix(in srgb,var(--string) 45%,var(--muted));
  --ip-zaman:#d4823a;
  --ip-kanit:#8f9bb0;
  /* yazı tipleri (çevrimdışı yedekli) */
  --f-display:"Special Elite","Courier New",monospace;
  --f-text:"Spectral",Georgia,"Times New Roman",serif;
  --f-ui:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:dark;
}

/* ---------- temel ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--desk);color:var(--fg)}
body{font-family:var(--f-ui);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:18px 96px}

/* ---------- üst bant ---------- */
.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
.brand{font-family:var(--f-display);font-size:13px;letter-spacing:.22em;color:var(--brass);text-transform:uppercase}
.case-title{font-family:var(--f-display);font-size:clamp(26px,4.4vw,40px);line-height:1.1;margin:4px 0 0;text-wrap:balance;font-weight:400}
.case-title small{display:block;font-family:var(--f-ui);font-size:13px;color:var(--muted);letter-spacing:.06em;margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-variant-numeric:tabular-nums;font-size:13px;border:1px solid var(--line);padding:5px 10px;border-radius:3px;background:var(--desk-2);white-space:nowrap}
.chip b{color:var(--brass);font-weight:600}

/* ---------- sekmeler ---------- */
.tabs{display:flex;gap:4px;overflow-x:auto;margin:14px 0 22px;scrollbar-width:thin}
.tab{flex:0 0 auto;background:none;border:1px solid transparent;border-bottom:2px solid transparent;padding:8px 12px;cursor:pointer;color:var(--muted);font-size:14px;letter-spacing:.02em}
.tab span{font-family:var(--f-display);color:var(--brass);margin-right:6px;opacity:.8}
.tab:hover{color:var(--fg)}
.tab[aria-current="page"]{color:var(--fg);border-bottom-color:var(--string)}
.tab .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-left:6px;vertical-align:middle}

/* ---------- kâğıt ve yazı ---------- */
.paper{background:var(--paper);color:var(--ink);border-radius:2px;box-shadow:0 1px 0 #0003,0 14px 30px -12px #000a;position:relative}
.paper .pad{padding:clamp(18px,3.4vw,36px)}
.label{font-family:var(--f-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.label.on-desk{color:var(--muted)}
h2.h{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.6vw,26px);margin:6px 0 12px;text-wrap:balance}
.prose{font-family:var(--f-text);font-size:17.5px;line-height:1.72;max-width:66ch}
.prose p{margin:0 0 1em}
.muted{color:var(--muted)}
.ink-soft{color:var(--ink-soft)}
.stamp{position:absolute;right:18px;top:18px;font-family:var(--f-display);color:var(--string);border:2px solid var(--string);padding:3px 10px;transform:rotate(-6deg);font-size:13px;letter-spacing:.12em;opacity:.85}

/* ---------- düğmeler ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--brass);background:transparent;color:var(--brass);padding:9px 16px;border-radius:3px;font-weight:500;letter-spacing:.02em;min-height:40px}
.btn:hover{background:color-mix(in srgb,var(--brass) 10%,transparent)}
.btn.solid{background:var(--brass);color:var(--desk)}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.paper .btn{border-color:var(--ink);color:var(--ink)}
.paper .btn.solid{background:var(--ink);color:var(--paper)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- bildirim ---------- */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:3px;box-shadow:0 10px 30px #000b;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:min(520px,calc(100vw - 32px));border-left:4px solid var(--string)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{margin-top:40px;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}

/* ---------- ikonlar (assets/icons.svg → js/icons.js) ---------- */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.15em;fill:currentColor;flex:none;
  --ic-bg:var(--desk);--ic-a:var(--brass);--ic-s:var(--string)}
.paper .ic,.on-paper .ic{--ic-bg:var(--paper)}
.ic.lg{width:2em;height:2em}
.ic.xl{width:3.5em;height:3.5em}

/* ---------- saat bileşeni (js/clock.js) ---------- */
.clock{display:block;overflow:visible}
.clock .ck-rim{fill:var(--ink)}
.clock .ck-silver{fill:var(--muted)}
.clock .ck-ring{fill:none;stroke:var(--muted);stroke-width:3}
.clock .ck-face{fill:var(--paper)}
.clock .ck-strap{fill:var(--ink-soft)}
.clock .ck-strap-line{stroke:var(--paper);stroke-width:1.5;opacity:.5}
.clock .ck-tick{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.clock .ck-tick-big{stroke-width:2.5}
.clock .ck-hand{stroke:var(--ink);stroke-linecap:round}
.clock .ck-hour{stroke-width:4}
.clock .ck-minute{stroke-width:3}
.clock .ck-second{stroke:var(--string);stroke-width:1.2;display:none}
.clock.ticking .ck-second{display:block}
.clock .ck-pin{fill:var(--brass)}
.clock-cep .ck-tick{stroke:var(--ink-soft)}
.clock-kol .ck-rim{fill:var(--ink)}

/* ---------- olay yeri: sahneler (js/scenes.js) ---------- */
/* Sahne renkleri paletten color-mix ile türetilir; doğrudan renk kodu yok. */
.scene{--sc-dark:var(--ink);--sc-mid:var(--ink-soft);--sc-light:var(--paper);--sc-accent:var(--brass);
  --sc-velvet:color-mix(in srgb,var(--string) 70%,var(--ink));--sc-strap:var(--ink-soft)}
.scene-day{--sc-bg:color-mix(in srgb,var(--paper) 70%,var(--brass));
  --sc-floor:color-mix(in srgb,var(--cork-2) 55%,var(--paper-2));
  --sc-glass:color-mix(in srgb,var(--paper-2) 70%,var(--muted))}
.scene-winter{--sc-sky:color-mix(in srgb,var(--muted) 28%,var(--paper));
  --sc-ground:color-mix(in srgb,var(--muted) 55%,var(--paper-2));
  --sc-far:color-mix(in srgb,var(--muted) 70%,var(--ink-soft));
  --sc-tarp:color-mix(in srgb,var(--paper-2) 80%,var(--ok));
  --sc-scent:var(--ink-soft)}
.scene-lamp{--sc-room:color-mix(in srgb,var(--cork) 70%,var(--desk));
  --sc-room-floor:color-mix(in srgb,var(--cork) 85%,var(--desk));
  --sc-lamp:color-mix(in srgb,var(--brass) 26%,transparent);
  --sc-silhouette:var(--desk);
  --sc-dark:color-mix(in srgb,var(--ink) 60%,var(--desk));
  --sc-mid:color-mix(in srgb,var(--ink-soft) 50%,var(--cork-2));
  --sc-counter:color-mix(in srgb,var(--cork-2) 70%,var(--brass));
  --sc-coat:color-mix(in srgb,var(--ink-soft) 60%,var(--cork-2));
  --sc-tea:var(--brass);
  --sc-glass-dim:color-mix(in srgb,var(--cork-2) 70%,var(--paper))}
.scene-night{--sc-night:color-mix(in srgb,var(--desk) 75%,var(--muted));
  --sc-snow:color-mix(in srgb,var(--paper-2) 60%,var(--muted));
  --sc-dark:color-mix(in srgb,var(--ink) 70%,var(--desk));
  --sc-silhouette:var(--desk)}
.sc-night{fill:var(--sc-night)}.sc-snow{fill:var(--sc-snow)}
.sc-bg{fill:var(--sc-bg)}.sc-floor{fill:var(--sc-floor)}.sc-dark{fill:var(--sc-dark)}.sc-mid{fill:var(--sc-mid)}
.sc-light{fill:var(--sc-light)}.sc-accent{fill:var(--sc-accent)}.sc-glass{fill:var(--sc-glass)}.sc-velvet{fill:var(--sc-velvet)}
.sc-daylight{fill:var(--paper);opacity:.08}.sc-sky{fill:var(--sc-sky)}.sc-ground{fill:var(--sc-ground)}.sc-far{fill:var(--sc-far)}
.sc-tarp{fill:var(--sc-tarp);stroke:var(--sc-dark);stroke-width:3}.sc-scent{stroke:var(--sc-scent);opacity:.75}
.sc-room{fill:var(--sc-room)}.sc-room-floor{fill:var(--sc-room-floor)}.sc-lamp{fill:var(--sc-lamp)}
.sc-silhouette{fill:var(--sc-silhouette)}.sc-silhouette-stroke{stroke:var(--sc-silhouette);fill:none}
.sc-counter{fill:var(--sc-counter)}.sc-coat{fill:var(--sc-coat)}.sc-tea{fill:var(--sc-tea)}.sc-glass-dim{fill:var(--sc-glass-dim)}.sc-strap{fill:var(--sc-strap)}
.sc-dark-stroke{stroke:var(--sc-dark);fill:none}.sc-light-stroke{stroke:var(--sc-light);fill:none}
.sc-use-silhouette{color:var(--sc-silhouette);--ic-bg:var(--sc-counter)}

.olay{display:grid;gap:10px}
.scene-nav{display:flex;align-items:center;gap:10px}
.nav-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--desk-2);color:var(--fg);border-radius:3px;cursor:pointer;font-size:24px;line-height:1}
.nav-btn:disabled{opacity:.3;cursor:default}
.scene-dots{display:flex;gap:8px}
.dot-btn{width:12px;height:12px;border-radius:50%;border:1px solid var(--brass);background:transparent;padding:0;cursor:pointer}
.dot-btn.on{background:var(--brass)}
.scene-title{font-family:var(--f-display);color:var(--brass);letter-spacing:.08em;font-size:13px;flex:1;text-align:center}
.scene{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:5/3;background:var(--desk-2);
  box-shadow:0 14px 30px -12px #000a,inset 0 0 0 6px color-mix(in srgb,var(--ink) 80%,transparent)}
.scene>svg{position:absolute;inset:0;width:100%;height:100%}
.hots{position:absolute;inset:0}
.hot{position:absolute;background:transparent;border:0;border-radius:12px;cursor:pointer;padding:0;transition:box-shadow .2s,background .2s}
.hot:hover,.hot:focus-visible{outline:none;box-shadow:0 0 0 2px var(--brass),0 0 26px color-mix(in srgb,var(--brass) 50%,transparent);background:color-mix(in srgb,var(--brass) 14%,transparent)}
.hot.found{cursor:default}
.hot.found:hover{box-shadow:none;background:none}
.hot .hot-badge{position:absolute;right:4px;top:4px;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);box-shadow:0 2px 6px #0008}
.hot.flash{animation:hotflash 2.2s ease}
@keyframes hotflash{0%,100%{box-shadow:none;background:none}25%,70%{box-shadow:0 0 0 3px var(--brass),0 0 40px var(--brass);background:color-mix(in srgb,var(--brass) 30%,transparent)}}
.caption{min-height:46px;background:var(--paper);color:var(--ink);padding:9px 14px;border-radius:3px;font-family:var(--f-text);font-size:17px;line-height:1.45;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.caption .who{font-family:var(--f-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.caption q{quotes:"“" "”";font-style:italic}
.caption .muted{font-family:var(--f-ui);font-size:14px;color:var(--ink-soft)}
.tray-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.tray{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:50px;padding:6px 10px;border:1px dashed var(--line);border-radius:3px;flex:1;min-width:220px}
.ev{width:36px;height:36px;border-radius:3px;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);display:grid;place-items:center;box-shadow:0 2px 4px #0006}
.ev .ic{width:26px;height:26px}
.ev.pop{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.tray-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.fly{position:fixed;left:0;top:0;z-index:50;width:36px;height:36px;border-radius:3px;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);display:grid;place-items:center;pointer-events:none;box-shadow:0 6px 14px #000a}
.fly .ic{width:26px;height:26px}

/* ---------- sorgu: portreler, soru kartları, balonlar ---------- */
.sorgu{display:grid;gap:14px}
.portraits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.portrait{background:var(--desk-2);border:1px solid var(--line);border-radius:4px;padding:10px 6px 8px;display:grid;justify-items:center;gap:4px;cursor:pointer;color:var(--fg);text-align:center;transition:border-color .15s}
.portrait:hover{border-color:var(--muted)}
.portrait .face{width:64px;height:64px;border-radius:50%;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);display:grid;place-items:center;box-shadow:0 0 0 2px var(--line)}
.portrait .face .ic{width:54px;height:54px}
.portrait[aria-pressed="true"]{border-color:var(--brass)}
.portrait[aria-pressed="true"] .face{box-shadow:0 0 0 3px var(--brass)}
.portrait .nm{font-family:var(--f-display);font-size:14px;line-height:1.15;margin-top:2px}
.portrait .rl{font-size:12px;color:var(--muted);line-height:1.2}
.portrait .asked{display:flex;gap:4px;margin-top:2px}
.portrait .asked i{width:7px;height:7px;border-radius:50%;border:1px solid var(--brass)}
.portrait .asked i.on{background:var(--brass)}
@media (max-width:560px){.portrait .rl{display:none}.portrait .face{width:52px;height:52px}.portrait .face .ic{width:42px;height:42px}.portrait .nm{font-size:12px}}
.narrator-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:12px;letter-spacing:.1em;color:var(--brass);text-transform:uppercase}
.qcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.qcard{display:flex;align-items:center;gap:10px;text-align:left;background:var(--paper);color:var(--ink);border:0;border-radius:3px;padding:10px 12px;cursor:pointer;font-family:var(--f-text);font-size:15.5px;line-height:1.3;box-shadow:0 3px 8px -3px #000a;transition:transform .15s,box-shadow .15s}
.qcard .ic{width:28px;height:28px;color:var(--ink-soft);--ic-bg:var(--paper)}
.qcard:disabled{opacity:.45;cursor:default}
.qcard:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 12px -4px #000c}
.transcript2{display:grid;gap:10px}
.bubble{position:relative;max-width:min(640px,92%);padding:12px 16px;border-radius:14px;font-family:var(--f-text);font-size:17px;line-height:1.55}
.bubble.q{justify-self:end;background:var(--desk-2);border:1px solid var(--line);color:var(--fg);font-family:var(--f-ui);font-size:14px;border-bottom-right-radius:3px;display:flex;gap:8px;align-items:center;padding:8px 12px}
.bubble.q .ic{width:20px;height:20px;color:var(--brass)}
.bubble.a{justify-self:start;background:var(--paper);color:var(--ink);border-bottom-left-radius:3px;box-shadow:0 4px 10px -4px #000a}
.bubble.a::before{content:"";position:absolute;left:-9px;bottom:12px;border:9px solid transparent;border-right-color:var(--paper);border-left:0}
.bubble .stage{color:var(--ink-soft)}
.bubble .clue-chip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--f-display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--string)}
.bubble .clue-chip .ic{width:22px;height:22px;color:var(--ink);--ic-bg:var(--paper)}

/* ---------- konum: manzaralar ve delil çipleri ---------- */
.gate{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--desk-2);border:1px solid var(--line);border-radius:4px;padding:16px;max-width:560px}
.gate p{margin:4px 0 0;font-family:var(--f-text);font-size:17px}
.gate .ic{color:var(--brass)}
.konum{display:grid;gap:14px}
.konum-q{background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:3px;font-family:var(--f-text);font-size:17px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.konum-q .who{font-family:var(--f-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.lands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.lands{grid-template-columns:repeat(2,minmax(0,1fr))}}
.land{position:relative;padding:0;border:2px solid var(--line);border-radius:4px;background:var(--desk-2);color:var(--fg);cursor:pointer;display:grid;gap:0;overflow:hidden;text-align:center;transition:border-color .15s,transform .15s;
  --l-sky:color-mix(in srgb,var(--paper) 72%,var(--muted));--l-ground:color-mix(in srgb,var(--paper-2) 70%,var(--ink-soft));--l-mid:color-mix(in srgb,var(--muted) 70%,var(--ink-soft));
  --l-dark:var(--ink);--l-light:var(--paper);--l-snow:var(--paper);--l-sea:color-mix(in srgb,var(--desk-2) 55%,var(--ok))}
.land svg{display:block;width:100%;height:auto}
.land:hover{border-color:var(--muted)}
.land.over{border-color:var(--brass);transform:scale(1.03)}
.land.sel,.land[aria-pressed="true"]{border-color:var(--brass)}
.land.right{border-color:var(--ok)}
.land.wrong{border-color:var(--string)}
.land:disabled{cursor:default}
.land-t{font-family:var(--f-display);font-size:12px;letter-spacing:.04em;padding:6px 4px 8px;line-height:1.2;min-height:44px;display:flex;align-items:center;justify-content:center}
.l-sky{fill:var(--l-sky)}.l-ground{fill:var(--l-ground)}.l-mid{fill:var(--l-mid)}.l-dark{fill:var(--l-dark)}.l-light{fill:var(--l-light)}.l-snow{fill:var(--l-snow)}
.l-dark-stroke{stroke:var(--l-dark);fill:none}.l-mid-stroke{stroke:var(--l-mid);fill:none}.l-light-stroke{stroke:var(--l-light);fill:none}
.l-sea{fill:var(--l-sea)}
.l-sea-g{opacity:0;transition:opacity 1.2s ease}
.l-sea-g.on{opacity:1}
.l-wave{animation:wave 3s linear infinite}
@keyframes wave{to{transform:translateX(-24px)}}
.pocket{position:absolute;left:4px;right:4px;bottom:48px;display:flex;gap:3px;flex-wrap:wrap;justify-content:center;pointer-events:none}
.pk{width:24px;height:24px;border-radius:3px;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);display:grid;place-items:center;box-shadow:0 2px 4px #0008;border:2px solid transparent}
.pk .ic{width:18px;height:18px}
.pk.ok{border-color:var(--ok)}.pk.no{border-color:var(--string);opacity:.7}
.ev-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ev-tray{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:220px;padding:6px 10px;border:1px dashed var(--line);border-radius:3px;min-height:50px;align-items:center}
.evc{width:38px;height:38px;border-radius:3px;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);display:grid;place-items:center;border:2px solid transparent;cursor:grab;padding:0;touch-action:none;box-shadow:0 2px 4px #0006;transition:transform .12s}
.evc .ic{width:26px;height:26px}
.evc:hover{transform:translateY(-2px)}
.evc.on{border-color:var(--brass);opacity:.55}
.evc:disabled{cursor:default}
.lesson{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--paper);color:var(--ink);padding:12px 14px;border-radius:3px;font-family:var(--f-text);font-size:16.5px;border-left:4px solid var(--ok)}
.lesson.no{border-left-color:var(--string)}
.lesson .ic{color:var(--ink-soft);flex:none}
.lesson>div{flex:1;min-width:200px}
.lesson .btn{flex:none}
.lesson-long{margin:8px 0 0;font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.link{background:none;border:0;padding:0;color:var(--string);cursor:pointer;font:inherit;font-size:14px;text-decoration:underline;margin-left:4px}

/* ---------- suçlama odası ---------- */
.sucla{display:grid;gap:20px;max-width:960px}
.sec{display:grid;gap:10px}
.sec-h{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--f-display);font-weight:400;font-size:14px;letter-spacing:.06em;color:var(--fg);text-wrap:balance}
.sec-h .n{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brass);color:var(--desk);font-size:12px}
.warn-line{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--warn)}
.warn-line .ic{width:18px;height:18px}
.who{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:560px){.who{grid-template-columns:repeat(3,minmax(0,1fr))}}
.folder-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr);gap:14px;align-items:start}
@media (max-width:640px){.folder-row{grid-template-columns:minmax(0,1fr)}}
.folder{position:relative;margin-top:14px;background:color-mix(in srgb,var(--brass) 50%,var(--paper-2));color:var(--ink);border-radius:0 6px 4px 4px;min-height:110px;padding:22px 12px 12px;box-shadow:0 6px 14px -6px #000c;transition:outline-color .15s}
.folder .tab{position:absolute;left:0;top:-16px;background:color-mix(in srgb,var(--brass) 50%,var(--paper-2));padding:3px 14px;border-radius:4px 4px 0 0;font-family:var(--f-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.folder .count{position:absolute;right:10px;top:6px;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.folder.over{outline:3px solid var(--string);outline-offset:2px}
.folder-in{display:flex;gap:8px;flex-wrap:wrap;min-height:44px;align-items:center}
.pk.big{width:44px;height:44px;border:0;cursor:pointer;padding:0}
.pk.big .ic{width:30px;height:30px}
.pk.big:hover{transform:scale(1.06)}
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:640px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pcard{display:grid;justify-items:center;align-content:start;gap:8px;padding:14px 10px 12px;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);border:2px solid transparent;border-radius:3px;cursor:pointer;text-align:center;font-family:var(--f-text);font-size:14.5px;line-height:1.35;transition:transform .12s,border-color .12s}
.pcard .ic{width:56px;height:56px;color:var(--ink)}
.pcard:hover{transform:translateY(-1px)}
.pcard[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 2px color-mix(in srgb,var(--brass) 40%,transparent)}
.sucla textarea{min-height:100px;background:var(--paper);border:0}

/* ---------- final ve sonuç ---------- */
.sonuc{display:grid;gap:16px;max-width:960px}
.final-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;padding:22px 18px;border-radius:4px;min-height:230px;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--brass) 32%,transparent),transparent 60%),color-mix(in srgb,var(--cork) 70%,var(--desk));
  box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--ink) 80%,transparent),0 14px 30px -12px #000a}
@media (max-width:640px){.final-stage{grid-template-columns:minmax(0,1fr);justify-items:center}}
.final-stage.single{grid-template-columns:minmax(0,1fr);justify-items:center}
.fs-icon{width:120px;height:120px;color:var(--paper);--ic-bg:var(--cork)}
.fs-wall{display:flex;gap:14px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.fs-wrist{display:flex;justify-content:center}
.cloth{position:relative;width:176px;height:176px;display:grid;place-items:center;perspective:700px}
.fs-watch{position:relative;z-index:1;opacity:0;transform:scale(.9);transition:opacity .8s ease .6s,transform .8s ease .6s}
.final-stage.open .fs-watch{opacity:1;transform:scale(1)}
.flap{position:absolute;top:0;width:50%;height:100%;z-index:2;background:linear-gradient(135deg,var(--paper),var(--paper-2));box-shadow:0 6px 14px -4px #000c;transition:transform 1.1s cubic-bezier(.5,0,.3,1);backface-visibility:hidden}
.flap::after{content:"";position:absolute;inset:8px;border:1px dashed color-mix(in srgb,var(--ink-soft) 40%,transparent)}
.flap.l{left:0;transform-origin:left center;border-radius:10px 0 0 10px}
.flap.r{right:0;transform-origin:right center;border-radius:0 10px 10px 0}
.final-stage.open .flap.l{transform:rotateY(-165deg)}
.final-stage.open .flap.r{transform:rotateY(165deg)}
.final-stage.ticking .fs-watch{animation:tickpulse 1s ease-in-out 3}
@keyframes tickpulse{50%{transform:scale(1.03)}}
.epilog-card .epilog-text{border-left:3px solid var(--string);padding-left:14px;margin:8px 0 12px;font-size:17px}
.epilog-card .epilog-text p:last-child{margin-bottom:0}
.result .rank-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:6px}
@media (max-width:560px){.result .rank-row{grid-template-columns:minmax(0,1fr);justify-items:center}}
.rosette{position:relative;isolation:isolate;margin-bottom:22px;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:14px;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--brass) 70%,var(--paper)),var(--brass) 55%,color-mix(in srgb,var(--brass) 70%,var(--ink)));
  box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--brass),0 8px 18px -6px #000a;font-family:var(--f-display);font-size:15px;line-height:1.15;color:var(--desk)}
.rosette::before,.rosette::after{content:"";position:absolute;bottom:-26px;width:22px;height:40px;background:var(--string);z-index:-1;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.rosette::before{left:34px;transform:rotate(14deg)}.rosette::after{right:34px;transform:rotate(-14deg)}
.meters{display:grid;gap:8px;width:100%}
.meter{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.meter .ml{font-family:var(--f-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.meter .bar{height:12px;border-radius:6px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.meter .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--string),var(--brass));border-radius:6px;transition:width 1s ease}
.meter .mv{font-variant-numeric:tabular-nums;color:var(--ink-soft);display:inline-flex;gap:4px;align-items:center}
.meter .mv.wide{grid-column:2/4}
.meter .mv .ic{width:14px;height:14px}
.verdicts{display:grid;gap:10px;margin-top:18px}
.vrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border-top:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);padding-top:10px}
.vrow .ic{color:var(--ink);margin-top:2px}
.vrow .vt{font-family:var(--f-display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vrow .vx{font-family:var(--f-text);font-size:16px;line-height:1.5;margin-top:2px}
.mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:13px;font-weight:700;font-family:var(--f-ui)}
.mark.ok{background:var(--ok);color:var(--desk)}.mark.no{background:var(--string);color:var(--paper)}
.chip-n{font-family:var(--f-ui);font-size:11px;padding:2px 6px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent);letter-spacing:.04em}
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:640px){.compare{grid-template-columns:minmax(0,1fr)}}
.bubble.cmp{max-width:none;justify-self:stretch}
.bubble.cmp p{margin:6px 0 0;font-style:italic}
.bubble.cmp.you{background:var(--paper-2)}
.bubble.cmp.you::before{border-right-color:var(--paper-2)}
.bubble.cmp.you p{font-style:normal}

/* "Umut'un anlatısı": kitap sayfası */
.sheet{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--desk) 82%,transparent);display:grid;place-items:center;padding:16px}
.book{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:clamp(18px,3.4vw,40px);
  background:linear-gradient(90deg,var(--paper-2),var(--paper) 7%,var(--paper) 93%,var(--paper-2))}
.book-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;position:sticky;top:0;background:inherit}
.book-text p:first-child::first-letter{font-family:var(--f-display);font-size:2.6em;float:left;line-height:.85;margin:5px 6px 0 0}
body.sheet-open{overflow:hidden}

.empty{color:var(--muted);font-size:14px;border:1px dashed var(--line);padding:14px;border-radius:3px}

/* ---------- dosya (giriş) ---------- */
.desk-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.desk-top{grid-template-columns:minmax(0,1fr)}}
.file.closed{position:relative;display:block;width:min(420px,100%);margin:30px auto 0;padding:0;border:0;background:none;cursor:pointer;text-align:left;grid-column:1/-1;justify-self:center}
.file.closed .file-tab{position:absolute;left:0;top:-18px;padding:4px 16px;border-radius:6px 6px 0 0;background:color-mix(in srgb,var(--brass) 45%,var(--paper-2));color:var(--ink);font-family:var(--f-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.file.closed .file-body{display:grid;justify-items:center;gap:10px;padding:46px 24px 34px;border-radius:0 8px 6px 6px;background:linear-gradient(160deg,color-mix(in srgb,var(--brass) 48%,var(--paper-2)),color-mix(in srgb,var(--brass) 32%,var(--paper-2)));color:var(--ink);box-shadow:0 18px 30px -14px #000d,0 2px 0 #0003;transition:transform .2s,box-shadow .2s}
.file.closed:hover .file-body,.file.closed:focus-visible .file-body{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 26px 36px -14px #000d}
.file.closed .ic{width:34px;height:34px}
.file-title{font-family:var(--f-display);font-size:clamp(20px,3vw,26px)}
.file-hint{font-size:13px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.file.open .brief p{margin:0 0 .6em}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.step{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.04em;padding:5px 9px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:20px;color:var(--ink-soft)}
.step .ic{width:16px;height:16px;color:var(--ink)}
.flat-reader{display:grid;gap:10px;justify-items:end;margin-top:12px}
.bubble.flat{max-width:none;justify-self:stretch;font-style:italic;background:var(--paper-2)}
.bubble.flat::before{left:auto;right:28px;bottom:-14px;border:8px solid transparent;border-top:10px solid var(--paper-2);border-bottom:0}
.flat-fig{display:grid;justify-items:center;gap:4px;margin-right:16px;color:var(--muted)}

/* vaka rafı ve çizimsiz sahne/manzara yedekleri */
.desk-top.shelf{grid-template-columns:repeat(auto-fit,minmax(260px,420px));justify-content:center;gap:34px 24px;padding-top:10px}
.desk-top.shelf .file.closed{grid-column:auto;margin:20px 0 0;width:100%}
.file.closed.other .file-body{filter:saturate(.5) brightness(.85)}
.sc-fallback{color:var(--sc-dark);--ic-bg:var(--sc-light)}
.l-use{color:var(--l-dark);--ic-bg:var(--l-sky)}

/* yardım: "?" rehberi ve tür tanımları (yalnızca yardım açıkken) */
.chip-help b{color:var(--brass);font-family:var(--f-display);font-size:14px}
.guide-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.guide-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;font-family:var(--f-text);font-size:17px;line-height:1.45}
.guide-steps .ic{color:var(--ink)}
.guide-steps li:last-child{border-top:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);padding-top:10px}
.guide-steps li:last-child .ic{color:var(--brass)}
.tdefs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.tdefs li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:baseline;font-size:14px;line-height:1.4}
.tdefs .ic{width:18px;height:18px;color:var(--c);align-self:center}
.tdefs b{font-family:var(--f-ui);font-weight:600;white-space:nowrap}
.picker .tdefs{border-top:1px dashed var(--line);padding-top:8px;color:var(--fg)}
.picker .tdefs span{color:var(--muted)}
.guide .tdefs span{color:var(--ink-soft)}
.pick-head .link{margin-left:auto}
.sel-bar i{font-style:italic;font-size:13px}

/* ses düğmesi */
.chip-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip-btn .ic{width:14px;height:14px;color:var(--muted)}
.chip-btn[aria-pressed="true"]{border-color:var(--brass)}

/* ---------- yerleşim ---------- */
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.grid-2{grid-template-columns:minmax(0,1fr)}}

/* ====================================================================
   v1'den taşınan ekran stilleri (adım 2). Davranış için gerekli;
   v2 görselleri (sahneler, polaroid kartlar, ikonlar) adım 3-9'da bunların yerini alır.
   ==================================================================== */
/* öykü ipuçları */
.c{cursor:zoom-in;border-radius:2px;transition:background .15s}
.c:hover{background:#c63b2f14}
.c.found{cursor:default;background:linear-gradient(transparent 60%,#c63b2f40 60%)}
.c.flash{animation:flash 2.4s ease}
@keyframes flash{0%,100%{background:transparent}20%,70%{background:#c9a45c66}}
.story-title{font-family:var(--f-display);font-size:22px;margin:4px 0 18px;font-weight:400}

textarea{width:100%;min-height:120px;font-family:var(--f-text);font-size:16px;line-height:1.55;padding:12px;border:1px solid #00000033;border-radius:2px;background:#fffaf0;color:var(--ink);resize:vertical}


/* ---------- pano v2: mantar pano, polaroid kartlar, ipler (js/board.js) ---------- */
.board-wrap{display:grid;gap:12px}
.hint-line{font-size:13px}
.board{position:relative;height:700px;border-radius:3px;overflow:hidden;touch-action:none;
  background:
   radial-gradient(circle at 20% 30%,#ffffff07 0 1px,transparent 2px) 0 0/9px 9px,
   radial-gradient(circle at 70% 60%,#00000030 0 1px,transparent 2px) 0 0/7px 7px,
   radial-gradient(ellipse at 50% 40%,var(--cork-2),var(--cork) 75%);
  box-shadow:inset 0 0 0 10px color-mix(in srgb,var(--ink) 85%,var(--cork)),inset 0 0 60px #0009}
@media (max-width:600px){.board{height:760px}}
.board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card{position:absolute;transform:translate(-50%,-50%);width:96px;padding:10px 6px 6px;border-radius:2px;background:var(--paper);color:var(--ink);--ic-bg:var(--paper);
  display:grid;justify-items:center;gap:4px;box-shadow:0 6px 14px -4px #000c;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:box-shadow .15s}
.card .pin{position:absolute;top:-6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a7d,var(--string) 60%,#7e1f17);box-shadow:0 2px 3px #0008}
.card .art{width:64px;height:58px;border-radius:2px;background:color-mix(in srgb,var(--paper-2) 60%,var(--paper));display:grid;place-items:center}
.card .art .ic{width:46px;height:46px}
.card .cap{font-family:var(--f-display);font-size:10.5px;line-height:1.15;text-align:center;letter-spacing:.01em;min-height:24px;display:flex;align-items:center}
.card.sel{box-shadow:0 0 0 3px var(--brass),0 10px 20px -4px #000d}
.card.dragging{cursor:grabbing;z-index:5;box-shadow:0 16px 28px -6px #000e}
.card.center{width:112px;background:color-mix(in srgb,var(--ink) 80%,var(--cork));color:var(--brass);--ic-bg:color-mix(in srgb,var(--ink) 80%,var(--cork));border:2px solid var(--brass);cursor:pointer;padding:12px 6px 8px}
.card.center .pin{display:none}
.card.center .art{background:transparent}
.card.center .art .ic{width:52px;height:52px}
.card.center .cap{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:600px){.card{width:74px;padding:8px 4px 5px}.card .art{width:52px;height:46px}.card .art .ic{width:36px;height:36px}.card .cap{font-size:9px;min-height:20px}.card.center{width:88px}.card.center .art .ic{width:40px;height:40px}}

.picker{background:var(--desk-2);border:1px solid var(--line);border-radius:3px;padding:10px 12px;display:grid;gap:10px}
.picker .ic{width:30px;height:30px;color:var(--fg)}
.pick-head{display:flex;align-items:center;gap:8px;font-size:14px}
.pick-head .arrow{color:var(--string);font-size:18px}
.types{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.tbtn{display:grid;justify-items:center;gap:4px;min-width:72px;padding:8px 8px 6px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer;font-size:12px;line-height:1.1;transition:border-color .15s,background .15s}
.tbtn .ic{color:var(--c)}
.tbtn:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.sel-bar{grid-template-columns:auto 1fr auto;align-items:center;font-size:14px}
.picker.sel-bar{display:grid;gap:10px}

.conns-head{display:flex;gap:8px;align-items:baseline;margin-top:4px}
.conns{display:grid;gap:6px}
.conn{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--desk-2);border:1px solid var(--line);border-radius:3px;padding:8px 10px}
.grade{font-family:var(--f-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:2px;white-space:nowrap;font-weight:600;border:0;cursor:pointer}
.g-ustaca{background:var(--brass);color:var(--desk)}
.g-guclu{background:var(--string);color:var(--paper)}
.g-zayif{background:var(--line);color:var(--fg)}
.g-yetersiz{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.conn .pair{display:inline-flex;align-items:center;gap:4px}
.conn .pair .ic{width:24px;height:24px;color:var(--fg)}
.conn .arrow{font-style:normal;color:var(--muted);font-size:13px}
.conn .ttag{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-left:4px;border:1px solid var(--c)}
.conn .ttag .ic{width:12px;height:12px;color:var(--c)}
.conn .why{font-size:14px;color:var(--fg);min-width:0}
.conn .long{grid-column:1/-1;font-family:var(--f-text);font-size:15px;line-height:1.5;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.conn-btns{display:inline-flex;align-items:center;gap:4px}
.conn .note-btn{font-size:12px;color:var(--muted);text-decoration:none;border:1px dashed var(--line);border-radius:2px;padding:2px 6px;margin:0}
.conn.own .note-btn{color:var(--brass);border-color:var(--brass)}
.conn .note-btn:hover{color:var(--fg);border-style:solid}
.note-form{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;border-top:1px dashed var(--line);padding-top:8px}
.note-form input{flex:1;min-width:200px;padding:8px 10px;border:1px solid var(--line);border-radius:2px;background:var(--desk);color:var(--fg);font:inherit;font-size:14px}
.note-form .btn{padding:6px 12px;font-size:13px;min-height:0}
.conn .note{grid-column:1/-1;display:flex;gap:8px;align-items:center;border-top:1px dashed var(--line);padding-top:8px;font-family:var(--f-text);font-size:15px;color:var(--fg)}
.conn .note .ic{width:16px;height:16px;color:var(--brass);flex:none}
.conn .note .link{font-size:12px;color:var(--muted);margin-left:auto}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:2px 6px}
.x:hover{color:var(--fg)}
@media (max-width:600px){.conn{grid-template-columns:auto minmax(0,1fr) auto}.conn .why{grid-column:1/3}}
.toast .grade{margin-right:6px}

pre.summary{white-space:pre-wrap;font-size:13px;background:#00000010;padding:12px;border-radius:2px;max-height:240px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace}


/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}