/* =========================================================================
 * ui2.css — NPC/robot diyalog kartı + dokunmatik kontroller + bina içi
 * kanatları + AI durum şeridi. style.css'i tamamlar.
 * ========================================================================= */

/* ---------------- NPC / robot diyalog ---------------- */
.npc-dialog{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px);
  width:min(440px,92vw); z-index:60; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
  --nd-accent:#22d3ee;
}
.npc-dialog.open{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.nd-card{
  position:relative; background:linear-gradient(180deg,rgba(12,18,34,.97),rgba(8,12,24,.98));
  border:1px solid color-mix(in srgb,var(--nd-accent) 45%,transparent);
  border-radius:18px; padding:16px 18px 14px; box-shadow:0 20px 60px rgba(0,0,0,.6),
  0 0 0 1px rgba(255,255,255,.03) inset, 0 0 34px color-mix(in srgb,var(--nd-accent) 20%,transparent);
  backdrop-filter:blur(10px);
}
.nd-close{position:absolute; top:9px; right:11px; width:26px; height:26px; border-radius:8px;
  background:rgba(148,163,184,.14); border:none; color:#cbd5e1; cursor:pointer; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .14s}
.nd-close:hover{background:rgba(239,68,68,.28); color:#fff}
.nd-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.nd-avatar{width:46px; height:46px; border-radius:13px; flex:0 0 auto;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--nd-accent) 30%,transparent),rgba(6,10,22,.9));
  border:1px solid color-mix(in srgb,var(--nd-accent) 55%,transparent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 18px color-mix(in srgb,var(--nd-accent) 30%,transparent)}
.nd-em{font-size:24px; line-height:1}
.nd-em-bot{animation:botFloat 2.4s ease-in-out infinite}
@keyframes botFloat{50%{transform:translateY(-3px) rotate(-4deg)}}
.nd-who{display:flex; flex-direction:column; gap:1px; min-width:0}
.nd-name{font-weight:800; font-size:15px; color:#f1f5f9; letter-spacing:.2px}
.nd-sub{font-size:11px; color:color-mix(in srgb,var(--nd-accent) 80%,#cbd5e1); text-transform:uppercase; letter-spacing:.5px; font-weight:600}
.nd-text{font-size:14px; line-height:1.55; color:#dbe4f3; margin:0 0 13px; min-height:44px}
.nd-opts{display:flex; flex-wrap:wrap; gap:8px}
.nd-opt{flex:1 1 auto; min-width:44%; text-align:left; padding:10px 13px; border-radius:12px;
  background:rgba(148,163,184,.08); border:1px solid var(--line); color:#e6edf8;
  font-size:13px; font-weight:600; cursor:pointer; transition:transform .12s,background .14s,border-color .14s}
.nd-opt:hover{background:color-mix(in srgb,var(--nd-accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--nd-accent) 55%,transparent); transform:translateY(-1px)}
.nd-opt-close{flex-basis:100%; text-align:center; color:#9fb0c8}

/* ---------------- dokunmatik kontroller ---------------- */
#touch-ui{position:fixed; inset:0; z-index:45; pointer-events:none}
.tc-stick{position:absolute; left:22px; bottom:26px; width:120px; height:120px; pointer-events:auto; touch-action:none}
.tc-base{position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(34,211,238,.10),rgba(10,16,30,.5));
  border:1.5px solid rgba(94,234,212,.28); box-shadow:inset 0 0 22px rgba(0,0,0,.5)}
.tc-knob{position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(94,234,212,.9),rgba(20,120,120,.7));
  border:1px solid rgba(255,255,255,.5); box-shadow:0 4px 16px rgba(34,211,238,.4); transition:transform .05s linear}
.tc-actions{position:absolute; right:20px; bottom:30px; display:flex; gap:14px; align-items:flex-end; pointer-events:auto}
.tc-btn{width:64px; height:64px; border-radius:50%; border:1.5px solid rgba(148,163,184,.35);
  background:radial-gradient(circle at 40% 35%,rgba(30,42,66,.95),rgba(10,16,30,.9)); color:#e2e8f0;
  font-size:22px; font-weight:800; cursor:pointer; touch-action:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.45); transition:transform .08s}
.tc-btn.down{transform:scale(.9)}
.tc-fly{border-color:rgba(56,189,248,.5); color:#7dd3fc}
.tc-act{width:74px; height:74px; border-color:rgba(52,211,153,.55); color:#6ee7b7; font-size:24px}
body.is-touch #help-tip{display:none}

/* ---------------- AI durum şeridi (ziyaretçi modu) ---------------- */
#ai-status{position:fixed; top:70px; left:50%; transform:translate(-50%,-14px); z-index:40;
  display:flex; align-items:center; gap:9px; padding:8px 15px 8px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(12,18,34,.95),rgba(8,12,24,.96));
  border:1px solid rgba(94,234,212,.3); box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:13px; color:#dbe4f3; max-width:min(560px,94vw); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s}
#ai-status.show{opacity:1; transform:translate(-50%,0)}
#ai-status .ai-ic{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; background:rgba(34,211,238,.14); border:1px solid rgba(34,211,238,.35); flex:0 0 auto}
#ai-status .ai-live{width:7px; height:7px; border-radius:50%; background:#34d399; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:aiPulse 1.8s infinite}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
#ai-status .ai-txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------------- bina içi: sekmeli, ekrana sığan geniş panel ---------------- */
/* v10: panel biraz daraldı ki ARKADAKİ ODA çerçeve olarak görünsün; hafif camsı
   + binanın rengiyle dış parıltı → "odanın ortasında yüzen konsol" hissi. */
.overlay.wide .panel{width:min(1180px,92vw); max-width:min(1180px,92vw); max-height:88vh;
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter:blur(18px) saturate(1.08);
  border-color:color-mix(in srgb, var(--ic) 26%, var(--line))}
.overlay.wide .panel::after{content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ic) 45%, transparent), inset 0 0 60px color-mix(in srgb, var(--ic) 8%, transparent)}
/* .panel artık flex kolon + sabit yükseklik (style.css). bld-grid kalan
   alanı doldurur; her sütun kendi içinde (gerekirse) kayar — panelin tamamı
   değil. Dar ekranda tek sütun; kanatlar kendi sekmelerine (.tab-wing) düşer. */
.bld-grid{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr; gap:16px; padding:12px 16px 16px}
.bld-grid .bwing{display:none}                 /* dar ekran: yan sütun yok */
@media(min-width:960px){
  .bld-grid{grid-template-columns:262px minmax(0,1fr) 300px; padding:16px 22px 20px}
  .bld-grid .bwing{display:flex}               /* geniş ekran: yan sütunlar geri gelir */
}

.bwing{flex-direction:column; gap:12px; min-width:0; min-height:0; overflow-y:auto; padding-right:2px}
.bld-main{display:flex; flex-direction:column; min-width:0; min-height:0}

/* sekme çubuğu */
.btabs{display:flex; gap:6px; flex:0 0 auto; overflow-x:auto; padding:1px 1px 11px; scrollbar-width:none}
.btabs::-webkit-scrollbar{display:none}
.btab{flex:0 0 auto; padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap; color:var(--muted); background:rgba(148,163,184,.08); border:1px solid var(--line);
  transition:transform .12s,color .14s,border-color .14s,background .14s}
.btab:hover{color:var(--ink); border-color:color-mix(in srgb,var(--cyan) 55%,transparent); transform:translateY(-1px)}
.btab.active{color:#e8f6ff; background:rgba(34,211,238,.14); border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(34,211,238,.25),0 6px 16px rgba(34,211,238,.14)}

/* sekme gövdesi — yalnızca aktif sekme, gerekirse kendi içinde kayar */
.btab-panes{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:5px}
.btab-panes::-webkit-scrollbar{width:8px}
.btab-panes::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3); border-radius:8px}
.btab-pane{display:none}
.btab-pane.active{display:block; animation:paneIn .26s cubic-bezier(.16,1,.3,1) both}
@keyframes paneIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.btab-pane .sec{padding:2px 2px 14px}
.btab-pane .sec:first-child{padding-top:0}
/* kanat sekmeleri yalnızca dar ekranda; geniş ekranda yan sütunda gösterilir */
@media(min-width:960px){ .btab.tab-wing{display:none} .btab-pane.wing-pane{display:none} }
.btab-pane.wing-pane .bwing-card{margin-bottom:12px}
.bwing-card{background:rgba(10,16,30,.6); border:1px solid var(--line); border-radius:14px; padding:13px 14px}
.bwing-card h4{margin:0 0 9px; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:700}

/* bina içi sahne (CSS oda) */
.room{position:relative; height:150px; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#0a1024,#0d1530 60%,#070b18);
  border:1px solid var(--line)}
.room .rm-floor{position:absolute; left:0; right:0; bottom:0; height:34px;
  background:linear-gradient(180deg,rgba(34,211,238,.05),rgba(0,0,0,.4)); border-top:1px solid rgba(34,211,238,.25)}
.room .rm-win{position:absolute; top:14px; width:20px; height:26px; border-radius:3px; opacity:.8;
  background:currentColor; box-shadow:0 0 10px currentColor; animation:rmBlink 3.5s ease-in-out infinite}
.room .rm-win:nth-child(2){animation-delay:.6s}
.room .rm-win:nth-child(3){animation-delay:1.2s}
@keyframes rmBlink{50%{opacity:.35}}
.room .rm-desk{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); width:110px; height:10px;
  background:#1b2438; border-radius:3px; box-shadow:0 6px 12px rgba(0,0,0,.5)}
.room .rm-mon{position:absolute; bottom:40px; left:50%; width:34px; height:24px; border-radius:3px;
  background:#060b18; border:1px solid currentColor; box-shadow:0 0 10px currentColor}
.room .rm-mon.l{transform:translateX(-46px)} .room .rm-mon.r{transform:translateX(12px)}
.room .rm-sign{position:absolute; top:10px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700;
  letter-spacing:1px; color:currentColor; text-shadow:0 0 12px currentColor; opacity:.9}
.room .rm-char{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-size:26px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  animation:rmBob 2.6s ease-in-out infinite}
@keyframes rmBob{50%{transform:translateX(-50%) translateY(-3px)}}

.bstat{display:flex; align-items:baseline; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(148,163,184,.1)}
.bstat:last-child{border-bottom:none}
.bstat .k{font-size:12px; color:var(--muted)} .bstat .v{font-size:15px; font-weight:800; color:var(--ink)}

/* sağ kanat kaynak kartları */
.reslink{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:11px; text-decoration:none;
  background:rgba(148,163,184,.06); border:1px solid var(--line); margin-bottom:8px; transition:transform .12s,border-color .14s,background .14s}
.reslink:hover{transform:translateX(3px); border-color:var(--cyan); background:rgba(34,211,238,.1)}
.reslink .rl-ic{width:26px; height:26px; border-radius:7px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(34,211,238,.12); font-size:14px; overflow:hidden}
.reslink .rl-ic img{width:18px; height:18px}
.reslink .rl-tx{display:flex; flex-direction:column; min-width:0}
.reslink .rl-tx b{font-size:13px; color:#e6edf8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.reslink .rl-tx span{font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.miniterm{background:#05070f; border:1px solid rgba(52,211,153,.2); border-radius:11px; padding:10px 12px; font-family:ui-monospace,Menlo,Consolas,monospace}
.miniterm .mt-line{font-size:12px; color:#7ee7b7; padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.miniterm .mt-line::before{content:"$ "; color:#22d3ee}

/* girişte kapıdan içeri animasyonu (panel).
   filter:blur ANİMASYONU pahalıydı (her karede yeniden hesap) → kaldırıldı;
   yalnızca compositor-dostu transform+opacity kaldı, açılış artık akıcı. */
.overlay.enter-anim .panel{animation:enterZoom .42s cubic-bezier(.16,1,.3,1) both}
@keyframes enterZoom{from{opacity:0; transform:scale(.9) translateY(10px)} to{opacity:1; transform:none}}

@media(max-width:640px){
  .npc-dialog{bottom:140px}
  #ai-status{top:auto; bottom:210px; font-size:12px}
}

/* =======================================================================
 * v8 — tasarım/oyun cilası: tema-duyarlı aksan, XP HUD, juice, minimap,
 * tipografi, erişilebilirlik. --accent motor tarafından şehir temasına
 * bağlanır (engine.applyThemeVars); --cyan/--violet de override edilir.
 * ===================================================================== */
:root{
  --accent:#22d3ee; --accent2:#f472b6;
  --f-display:"Segoe UI Variable Display","Gill Sans Nova","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --r-sm:9px; --r-md:12px; --r-lg:16px; --blur:10px;
}
h1,h2,#boot h1,.panel-head h2{font-family:var(--f-display); letter-spacing:-.01em}

/* ---- HUD: XP + rütbe ilerleme + günlük seri ---- */
.rankbox .rk-info{min-width:0}
.rankbox .t{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); display:flex; gap:6px; align-items:center}
.rankbox .v{font-size:14.5px; font-weight:800; line-height:1.15; font-family:var(--f-display)}
.rankbox .streak{color:#fb923c; font-weight:800; letter-spacing:0}
.xp-row{display:flex; align-items:center; gap:8px; margin-top:3px}
.xp-val{font-size:12px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap}
.xp-bar{flex:1; min-width:56px; height:5px; border-radius:5px; background:rgba(148,163,184,.22); overflow:hidden}
.xp-bar i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .5s cubic-bezier(.16,1,.3,1)}
.xp-next{font-size:9.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- uçan +XP + ekran sarsıntısı ---- */
.xp-float{position:fixed; left:50%; top:46%; transform:translateX(-50%); z-index:70; pointer-events:none;
  font-weight:900; font-size:20px; color:var(--accent); text-shadow:0 2px 10px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums; animation:xpFloat 1.15s cubic-bezier(.2,.8,.2,1) forwards}
.xp-float.big{font-size:34px}
@keyframes xpFloat{0%{opacity:0; transform:translate(-50%,10px) scale(.7)}
  18%{opacity:1; transform:translate(-50%,-6px) scale(1.08)}
  100%{opacity:0; transform:translate(-50%,-72px) scale(1)}}
#game.shake-fx{animation:screenShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes screenShake{10%{transform:translate(-3px,2px)}30%{transform:translate(4px,-3px)}
  50%{transform:translate(-4px,1px)}70%{transform:translate(3px,3px)}90%{transform:translate(-2px,-1px)}}

/* ---- pratik quiz + komut uyarısı ---- */
.practice-btn{margin-top:10px; width:100%; padding:9px 12px; border-radius:var(--r-md);
  background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.38); color:#a7f3d0;
  font-weight:700; font-size:13px; transition:background .14s,transform .12s}
.practice-btn:hover{background:rgba(52,211,153,.2); transform:translateY(-1px)}
.cmd-warn{font-size:11px; line-height:1.45; color:#fcd34d; background:rgba(251,191,36,.1);
  border:1px solid rgba(251,191,36,.28); border-radius:var(--r-sm); padding:6px 9px; margin-bottom:8px}
.cmd-warn b{color:#fde68a}

/* ---- MİNİMAP (radar şeridi) ---- */
#minimap{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:16;
  display:flex; align-items:center; gap:9px; width:min(48vw,540px); height:34px; padding:0 14px 0 11px;
  background:var(--glass); backdrop-filter:blur(var(--blur)); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow)}
#minimap .mm-cap{font-size:14px; opacity:.85; flex:0 0 auto}
.mm-track{position:relative; flex:1; height:3px; border-radius:3px;
  background:linear-gradient(90deg,rgba(148,163,184,.28),rgba(148,163,184,.14))}
.mm-dot{position:absolute; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; padding:0;
  border-radius:50%; background:var(--dc,#5eead4); border:1px solid rgba(3,7,18,.55); cursor:pointer;
  box-shadow:0 0 6px -1px var(--dc); transition:transform .12s}
.mm-dot:hover{transform:scale(1.55); z-index:2}
.mm-dot.done{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 8px var(--dc)}
.mm-player{position:absolute; top:50%; left:0; width:2px; height:15px; margin-top:-7.5px;
  background:#fff; border-radius:2px; box-shadow:0 0 8px rgba(255,255,255,.9);
  transform:translateX(-1px); transition:left .16s linear}
@media(max-width:720px){#minimap{display:none}}

/* ---- erişilebilirlik: görünür odak halkası + dialog ---- */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mm-dot:focus-visible{outline-offset:3px}
.overlay[role=dialog], .modal[role=dialog]{scroll-behavior:smooth}
.pcard .q[role=button]{cursor:pointer}

/* ---- animasyon budama: panel açıkken sakin; sheen seyrelt ---- */
.panel-head .icon{animation:none}
.btn-play::after{animation-duration:6s}

/* ---- HUD müfredat metresi (tıklanabilir) ---- */
.meter.meter-btn{background:none; border:none; padding:0; cursor:pointer; text-align:left; transition:transform .12s}
.meter.meter-btn:hover{transform:translateY(-1px)}
.bar.curr i{background:linear-gradient(90deg,#a855f7,#22d3ee)}

/* ---- MÜFREDAT PANELİ (checklist) ---- */
.cl-head{margin:2px 0 14px}
.cl-headline{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cl-big{font-size:16px; font-weight:700; font-family:var(--f-display)}
.cl-big b{font-size:22px; color:var(--accent)}
.cl-sub{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.cl-headbar{height:9px; border-radius:9px; background:rgba(148,163,184,.2); overflow:hidden; margin-top:8px}
.cl-headbar i{display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .45s cubic-bezier(.16,1,.3,1)}
.cl-actions{display:flex; gap:8px; margin-top:10px}
.cl-act{padding:6px 12px; border-radius:9px; font-size:12px; font-weight:700; border:1px solid var(--line);
  background:rgba(148,163,184,.08); color:var(--ink); transition:background .13s}
.cl-act:hover{background:rgba(148,163,184,.18)}
.cl-act[data-cl=all]{border-color:rgba(52,211,153,.4); color:#a7f3d0; background:rgba(52,211,153,.1)}

.cl-list{max-height:min(60vh,560px); overflow-y:auto; padding-right:6px; display:flex; flex-direction:column; gap:8px}
.cl-sec{flex:0 0 auto; border:1px solid var(--line); border-radius:11px; background:rgba(11,18,32,.5); overflow:hidden}
.cl-sec[open]{background:rgba(13,22,42,.7); border-color:color-mix(in srgb,var(--accent) 30%, var(--line))}
.cl-sec > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px; padding:13px 15px;
  font-size:14px; font-weight:600; user-select:none; min-height:46px}
.cl-sec > summary:hover{background:rgba(148,163,184,.06)}
.cl-sec > summary::-webkit-details-marker{display:none}
.cl-caret{color:var(--muted); font-size:11px; transition:transform .18s; flex:0 0 auto}
.cl-sec[open] .cl-caret{transform:rotate(90deg)}
.cl-st{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-sbar{flex:0 0 70px; height:5px; border-radius:5px; background:rgba(148,163,184,.22); overflow:hidden}
.cl-sbar i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .3s}
.cl-sp{flex:0 0 auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:42px; text-align:right}
.cl-rows{display:flex; flex-direction:column; gap:2px; padding:4px 8px 10px}
.cl-row{flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; text-align:left;
  background:none; border:1px solid transparent; transition:background .12s,border-color .12s}
.cl-row:hover{background:rgba(148,163,184,.09); border-color:var(--line)}
.cl-box{flex:0 0 auto; width:18px; height:18px; border-radius:6px; border:2px solid rgba(148,163,184,.45);
  display:flex; align-items:center; justify-content:center; transition:all .13s}
.cl-box::after{content:"✓"; font-size:12px; font-weight:900; color:#052e2b; opacity:0; transform:scale(.5); transition:all .13s}
.cl-row.done .cl-box{background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent}
.cl-row.done .cl-box::after{opacity:1; transform:none}
.cl-n{flex:0 0 auto; width:30px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; font-family:ui-monospace,monospace}
.cl-t{flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl-row.done .cl-t{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(148,163,184,.5)}
.cl-m{flex:0 0 auto; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums}
/* ziyaretçi: salt okunur satırlar (tıklanamaz ama net görünür) */
.cl-row.ro{cursor:default; opacity:1}
.cl-row.ro:hover{background:none; border-color:transparent}
.cl-row.ro .cl-box{border-color:rgba(148,163,184,.3)}

/* ---- ZİYARETÇİ KARAKTER SEÇİMİ ---- */
#guest-setup{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,7,18,.72); backdrop-filter:blur(8px); transition:opacity .3s}
.gs-card{max-width:420px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:28px 26px; text-align:center; box-shadow:var(--shadow),0 0 70px rgba(34,211,238,.18)}
.gs-emoji{font-size:44px; margin-bottom:6px}
.gs-card h2{font-family:var(--f-display); font-size:22px; margin-bottom:6px}
.gs-card p{color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:16px}
.gs-lbl{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:14px 0 7px; font-weight:700}
.gs-genders{display:flex; gap:10px}
.gs-g{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border-radius:14px;
  background:rgba(148,163,184,.08); border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:13.5px; transition:all .14s}
.gs-g span{font-size:26px}
.gs-g:hover{border-color:color-mix(in srgb,var(--accent) 40%, var(--line))}
.gs-g.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%, transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent)}
#gs-name{width:100%; padding:12px 14px; border-radius:12px; font-size:15px; color:var(--ink);
  background:rgba(5,8,15,.7); border:1px solid var(--line); outline:none; transition:border-color .14s}
#gs-name:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%, transparent)}
.gs-start{width:100%; margin-top:18px; padding:14px; border-radius:14px; font-weight:800; font-size:15px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#052e2b; box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 40%, transparent);
  transition:transform .14s}
.gs-start:hover{transform:translateY(-2px)}
.gs-note{margin-top:14px; font-size:11.5px; color:var(--muted)}

/* ---- ARAMA & İÇİNDEKİLER (komut paleti) ---- */
.hbtn-search{border-color:color-mix(in srgb,var(--accent) 45%, var(--line)) !important;
  background:color-mix(in srgb,var(--accent) 12%, transparent) !important}
.sr-input{width:100%; margin:4px 0 14px; padding:13px 16px; border-radius:12px; font-size:15px;
  color:var(--ink); background:rgba(5,8,15,.7); border:1px solid color-mix(in srgb,var(--accent) 40%, var(--line));
  outline:none; transition:border-color .14s, box-shadow .14s}
.sr-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent)}
.sr-results{max-height:min(54vh,520px); overflow-y:auto; padding-right:4px; display:flex; flex-direction:column; gap:8px}
.sr-row{flex:0 0 auto; display:flex; align-items:center; gap:13px; width:100%; padding:11px 13px; border-radius:12px;
  text-align:left; background:rgba(11,18,32,.5); border:1px solid var(--line); cursor:pointer; transition:all .12s}
.sr-row:hover,.sr-row.sel{border-color:var(--dc,var(--accent)); background:color-mix(in srgb,var(--dc,var(--accent)) 12%, rgba(11,18,32,.5)); transform:translateX(3px)}
.sr-ic{flex:0 0 auto; font-size:18px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:color-mix(in srgb,var(--dc,#5eead4) 16%, #05070f); box-shadow:0 0 12px -4px var(--dc,#5eead4)}
.sr-ic.big{font-size:22px; width:42px; height:42px}
.sr-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.sr-tx b{font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-tx span{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-go{flex:0 0 auto; font-size:12px; font-weight:800; color:var(--dc,var(--accent)); opacity:.85}
.sr-empty{padding:22px 8px; color:var(--muted); font-size:13.5px; line-height:1.6; text-align:center}
.sr-empty b{color:var(--accent)}
.sr-dist{margin-bottom:14px}
.sr-dist h3{font-size:12.5px; letter-spacing:.4px; color:var(--muted); font-weight:700; margin:0 0 8px; display:flex; gap:7px; align-items:center}
.sr-dist h3 span{font-size:10px; padding:1px 7px; border-radius:10px; background:rgba(148,163,184,.16)}
.sr-chips{display:flex; flex-wrap:wrap; gap:7px}
.sr-chip{display:flex; align-items:center; gap:7px; padding:6px 11px 6px 8px; border-radius:20px; cursor:pointer;
  background:rgba(11,18,32,.6); border:1px solid var(--line); transition:all .12s}
.sr-chip:hover{border-color:var(--dc); background:color-mix(in srgb,var(--dc) 14%, rgba(11,18,32,.6)); transform:translateY(-1px)}
.sr-chip .sr-ic{width:24px; height:24px; font-size:14px; box-shadow:none}
.sr-nm{font-size:12.5px; font-weight:600; white-space:nowrap}
.sr-badge{font-size:10px; color:var(--muted); font-weight:700}

/* =======================================================================
 * BİNA İÇİ ORTAM (v10) — E'ye basınca panelin ARKASINDA binaya özgü ODA.
 * Katmanlar: arka duvar + ufuk ışığı + zemin (perspektif) + sıcak yerel ışık
 * + arketip propları + ön plan vinyeti. --ic = binanın rengi.
 * ===================================================================== */
.overlay .interior{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    /* tavandan sızan yerel ışık */
    radial-gradient(60% 45% at 50% 2%, color-mix(in srgb, var(--ic) 20%, transparent), transparent 62%),
    /* zemin ışıması */
    radial-gradient(90% 42% at 50% 100%, color-mix(in srgb, var(--ic) 16%, transparent), transparent 68%),
    /* duvar / zemin ayrımı: üst duvar koyu, alt zemin biraz açık */
    linear-gradient(180deg, #090c15 0%, #070a12 46%, #0a0e18 62%, #06090f 63%, #04060c 100%);
  animation:ivIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes ivIn{from{opacity:0; transform:scale(1.06); filter:brightness(.6)} to{opacity:1; transform:none; filter:none}}
/* ufuk çizgisi (duvar↔zemin) — binanın rengiyle parlar */
.overlay .interior::before{content:""; position:absolute; left:0; right:0; top:62%; height:2px; z-index:1;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--ic) 75%, transparent) 30%, color-mix(in srgb,var(--ic) 75%, transparent) 70%, transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--ic) 55%, transparent)}
/* ön plan vinyeti + köşe karartma (derinlik) */
.overlay .interior::after{content:""; position:absolute; inset:0; z-index:3;
  background:
    radial-gradient(130% 96% at 50% 40%, transparent 40%, rgba(0,0,0,.66)),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 76%, rgba(0,0,0,.5))}
.overlay .panel{position:relative; z-index:1; box-shadow:var(--shadow),0 0 90px color-mix(in srgb,var(--ic) 22%, transparent)}
/* başlığı binaya göre renklendir */
.panel-head::before{background:radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--ic,#22d3ee) 24%, transparent), transparent 60%)}

/* ---- ortak oda öğeleri ---- */
.interior .iv-floor{position:absolute; left:0; right:0; bottom:0; height:38%; z-index:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ic) 6%, transparent), color-mix(in srgb,var(--ic) 13%, #04060d) 88%)}
.interior .iv-grid{position:absolute; left:-30%; right:-30%; bottom:0; height:40%; z-index:0; opacity:.4;
  background-image:
    linear-gradient(color-mix(in srgb,var(--ic) 34%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--ic) 34%, transparent) 1px, transparent 1px);
  background-size:52px 52px; transform:perspective(340px) rotateX(64deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(transparent, #000 52%); mask-image:linear-gradient(transparent, #000 52%)}
/* arka duvar (zemin üstünde dikey panel dokusu) */
.interior .iv-wall-bg{position:absolute; left:0; right:0; top:0; bottom:38%;
  background:
    repeating-linear-gradient(90deg, transparent 0 80px, color-mix(in srgb,var(--ic) 6%, transparent) 80px 82px),
    linear-gradient(180deg,#070d1a,#0a1224 74%);
  box-shadow:inset 0 -44px 64px -22px #000}
/* zemine düşen renkli ışık gölü (hero prop yansıması) */
.interior .iv-floorglow{position:absolute; left:50%; bottom:7%; width:54%; height:15%; transform:translateX(-50%);
  border-radius:50%; filter:blur(28px);
  background:radial-gradient(ellipse, color-mix(in srgb,var(--ic) 45%, transparent), transparent 70%)}
/* sıcak yerel ışık (köşe lambası) — soğuk neonla kontrast */
.interior .iv-lamp{position:absolute; width:min(38vw,360px); height:min(38vw,360px); border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,176,92,.18), transparent 68%)}
.interior .iv-lamp.a{right:4%; top:5%}
/* ön plan silüetleri (parallax derinlik) — panelin altından taşar */
.interior .iv-fg{position:absolute; bottom:0; width:min(15vw,150px); height:40%; filter:blur(1px); opacity:.9;
  background:linear-gradient(180deg, transparent, #02040a 60%)}
.interior .iv-fg.l{left:-14px; border-radius:0 50px 0 0}
.interior .iv-fg.r{right:-14px; border-radius:50px 0 0 0}
/* katman sıralaması: arka plan → hero → ön plan/ışık → vinyet(::after z:4) */
.interior .iv-wall-bg,.interior .iv-grid,.interior .iv-floor,.interior .iv-floorglow{z-index:0}
.interior .iv-racks,.interior .iv-screen,.interior .iv-desk,.interior .iv-core,.interior .iv-shelf,
.interior .iv-bench,.interior .iv-globe,.interior .iv-node,.interior .iv-ring,.interior .iv-tower,
.interior .iv-wave,.interior .iv-wall,.interior .iv-lock{z-index:2}
.interior .iv-fg,.interior .iv-lamp{z-index:3}
.overlay .interior::after{z-index:4}
@keyframes ivBlink{50%{opacity:.68}}
@keyframes ivPulse{50%{transform:translate(-50%,-50%) scale(1.09); filter:brightness(1.18)}}
@keyframes ivExpand{from{transform:translate(-50%,-50%) scale(.35); opacity:.7} to{transform:translate(-50%,-50%) scale(1.25); opacity:0}}

/* SERVER — sunucu odası (AD/SOC/backdoor/persistence) */
.iv-racks{position:absolute; left:0; right:0; bottom:30%; height:48%;
  display:flex; justify-content:center; align-items:flex-end; gap:min(3.2vw,32px); padding:0 6%}
.iv-rack{width:min(6.5vw,68px); height:100%; border-radius:6px 6px 2px 2px;
  border:1px solid color-mix(in srgb,var(--ic) 32%, #1e293b);
  background:linear-gradient(180deg,#0b1220,#060a14);
  background-image:repeating-linear-gradient(180deg, color-mix(in srgb,var(--ic) 60%, transparent) 0 2px, transparent 2px 13px);
  box-shadow:0 0 22px -8px color-mix(in srgb,var(--ic) 65%, transparent); animation:ivBlink 2.4s steps(2) infinite}
.iv-rack:nth-child(odd){animation-delay:.5s} .iv-rack:nth-child(3n){animation-delay:1.1s; height:86%}
.iv-rack:nth-child(4n){height:92%} .iv-rack:nth-child(5n){height:80%}

/* TERMINAL — kod/monitör (linux/exploit/web/sql/ctf/tools) */
.iv-screen{position:absolute; left:50%; top:15%; transform:translateX(-50%);
  width:min(46%,430px); height:40%; border-radius:11px; padding:16px; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ic) 13%, #04070e), #04060d);
  border:1px solid color-mix(in srgb,var(--ic) 46%, transparent);
  box-shadow:0 0 64px -12px color-mix(in srgb,var(--ic) 70%, transparent), inset 0 0 44px color-mix(in srgb,var(--ic) 12%, transparent)}
.iv-codeln{height:7px; border-radius:4px; background:color-mix(in srgb,var(--ic) 55%, transparent); opacity:.55}
.iv-codeln:nth-child(1){width:64%} .iv-codeln:nth-child(2){width:88%} .iv-codeln:nth-child(3){width:74%}
.iv-codeln:nth-child(4){width:92%} .iv-codeln:nth-child(5){width:58%}
.iv-codeln:nth-child(6){width:40%; animation:ivBlink 1s steps(2) infinite}
.iv-desk{position:absolute; left:50%; bottom:26%; transform:translateX(-50%); width:min(64%,580px); height:13px;
  border-radius:4px; background:linear-gradient(180deg, color-mix(in srgb,var(--ic) 24%, #0b1220), #05080f);
  box-shadow:0 8px 30px -6px color-mix(in srgb,var(--ic) 40%, transparent)}

/* LAB — parlayan çekirdek + tezgah (setup/crypto/aisec/dfir) */
.iv-core{position:absolute; left:50%; top:33%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--ic) 92%, #fff) 0%, var(--ic) 42%, transparent 72%);
  box-shadow:0 0 80px 12px color-mix(in srgb,var(--ic) 50%, transparent)}
.iv-core::after{content:""; position:absolute; inset:-45%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--ic) 50%, transparent), transparent 70%);
  animation:ivGlow 3.2s ease-in-out infinite}
@keyframes ivGlow{50%{opacity:.5}}
.iv-shelf{position:absolute; top:20%; width:20%; height:5px; border-radius:3px; background:color-mix(in srgb,var(--ic) 40%, #1e293b);
  box-shadow:0 0 14px -3px color-mix(in srgb,var(--ic) 60%, transparent)}
.iv-shelf.a{left:9%} .iv-shelf.b{right:9%; top:30%}
.iv-bench{position:absolute; left:50%; bottom:25%; transform:translateX(-50%); width:min(58%,520px); height:15px; border-radius:5px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ic) 25%, #0b1220), #05080f)}

/* NETWORK — küre + düğümler (networks/theory/shodan/cloud/mitm) */
.iv-globe{position:absolute; left:50%; top:33%; transform:translate(-50%,-50%); width:126px; height:126px; border-radius:50%;
  background:radial-gradient(circle at 40% 34%, color-mix(in srgb,var(--ic) 42%, transparent), transparent 62%), #060b16;
  border:1px solid color-mix(in srgb,var(--ic) 46%, transparent);
  box-shadow:0 0 64px -8px color-mix(in srgb,var(--ic) 60%, transparent);
  background-image:repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb,var(--ic) 26%, transparent) 15px 16px)}
.iv-ring{position:absolute; left:50%; top:33%; width:230px; height:230px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ic) 38%, transparent); animation:ivExpand 4s linear infinite}
.iv-ring.two{animation-delay:2s}
.iv-node{position:absolute; width:11px; height:11px; border-radius:50%; background:var(--ic); box-shadow:0 0 14px var(--ic)}
.iv-node:nth-child(3){left:24%; top:26%} .iv-node:nth-child(4){right:22%; top:30%}
.iv-node:nth-child(5){left:30%; top:52%} .iv-node:nth-child(6){right:28%; top:56%}
.iv-node:nth-child(7){left:16%; top:40%} .iv-node:nth-child(8){right:14%; top:44%}

/* WIFI — kule + yayılan dalgalar */
.iv-tower{position:absolute; left:50%; bottom:30%; transform:translateX(-50%); width:4px; height:26%; border-radius:2px;
  background:linear-gradient(180deg,var(--ic),color-mix(in srgb,var(--ic) 30%,#0b1220));
  box-shadow:0 0 18px color-mix(in srgb,var(--ic) 70%, transparent)}
.iv-wave{position:absolute; left:50%; top:30%; width:120px; height:120px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid color-mix(in srgb,var(--ic) 45%, transparent); border-bottom-color:transparent; border-left-color:transparent;
  animation:ivExpand 3s ease-out infinite}
.iv-wave.two{animation-delay:1s} .iv-wave.three{animation-delay:2s}

/* OSINT — ekran duvarı (osint/socialeng/beef) */
.iv-wall{position:absolute; left:50%; top:15%; transform:translateX(-50%); width:min(60%,560px); height:44%;
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:12px}
.iv-mon{border-radius:6px; border:1px solid color-mix(in srgb,var(--ic) 34%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--ic) 16%, #04070e), #04060d);
  box-shadow:inset 0 0 16px color-mix(in srgb,var(--ic) 14%, transparent); animation:ivBlink 3s steps(2) infinite}
.iv-mon:nth-child(2n){animation-delay:.7s} .iv-mon:nth-child(3n){animation-delay:1.3s} .iv-mon:nth-child(5n){animation-delay:.4s}

/* VAULT — soğan halkaları + kilit (darkweb) */
.iv-ring.v{position:absolute; left:50%; top:42%; border-color:color-mix(in srgb,var(--ic) 42%, transparent);
  width:160px; height:160px; animation:ivExpand 5s linear infinite}
.iv-ring.v.two{animation-delay:1.6s} .iv-ring.v.three{animation-delay:3.2s}
.iv-lock{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); font-size:64px;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--ic) 80%, transparent))}
@media(max-width:720px){ .overlay .interior{display:none} }

/* prefers-reduced-motion: hareketi kısan kullanıcıya sonsuz döngüleri kapat */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  #boot .maskot,#boot h1,.panel-head .icon,.nd-em-bot,.btn-play::after{animation:none!important}
  .xp-float{animation:xpFloat .4s linear forwards!important}
}