/* Panel iskeleti. Renk/tipografi token'ları tokens.css'ten geliyor
   (Claude Design canvas'ından çıkarıldı). Burası yalnız yerleşim. */

/* Geometrik sans (Axiforma / Plus Jakarta Sans) IBM Plex'ten daha yuvarlak ve
   geniş. 9,5–10px BÜYÜK HARFLİ mikro etiketlerde bu okunurluğu düşürüyor:
   yuvarlak formlar küçük boyutta birbirine yakınsıyor. Telafi olarak bu
   etiketlerde letter-spacing biraz artırıldı ve en küçükleri 10px'e çekildi.
   Tablo hücrelerindeki sayılar mono olduğu için etkilenmiyor. */
.shell { display:flex; min-height:100vh; background:var(--bg) }

/* ── Sol navigasyon ── */
.nav { width:var(--nav); flex:0 0 auto; border-right:1px solid var(--line);
       background:var(--panel); display:flex; flex-direction:column;
       position:sticky; top:0; height:100vh }
.brand { display:flex; align-items:center; gap:9px; padding:13px 14px;
         border-bottom:1px solid var(--line) }
.brand-dot { width:16px; height:16px; border-radius:4px; background:var(--acc) }
.brand-name { font:600 13.5px var(--sans); letter-spacing:.02em }
.brand-ver { font:500 10px var(--mono); color:var(--fg3); margin-left:auto }
.nav-body { padding:11px 9px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1 }
.nav-foot { padding:9px; border-top:1px solid var(--line) }
.nav-group { font:600 10px var(--mono); letter-spacing:.11em; color:var(--fg3); padding:4px 6px 6px }
.nav-item { display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:5px;
            color:var(--fg2); text-decoration:none }
.nav-item:hover { background:var(--panel2); color:var(--fg); text-decoration:none }
.nav-item.is-active { background:var(--accS); color:var(--fg) }
.nav-dot { width:5px; height:5px; border-radius:1px; background:var(--line2) }
.nav-item.is-active .nav-dot { background:var(--acc) }
.nav-label { flex:1 }
.nav-num { font:500 10px var(--mono); color:var(--fg3) }

/* ── Ana alan ── */
.main { flex:1; min-width:0; display:flex; flex-direction:column }
.topbar { display:flex; align-items:center; gap:12px; padding:13px 18px;
          border-bottom:1px solid var(--line); background:var(--panel) }
.topbar h1 { margin:0; font:600 14px var(--sans) }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px;
                font:500 11px var(--mono); color:var(--fg3) }
.content { padding:16px 18px; display:flex; flex-direction:column; gap:14px }

/* ── Kartlar ── */
.card { border:1px solid var(--line); border-radius:6px; background:var(--panel) }
.card-head { display:flex; align-items:center; gap:10px; padding:10px 12px;
             border-bottom:1px solid var(--line) }
.card-title { font:600 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--fg2) }
.card-sub { font:500 10px var(--mono); color:var(--fg3); margin-left:auto }
.card-body { padding:12px }
.grid { display:grid; gap:12px }
.g2 { grid-template-columns:1fr 1fr } .g3 { grid-template-columns:repeat(3,1fr) }
.split { display:grid; grid-template-columns:332px 1fr; gap:12px; align-items:start }
.split3 { display:grid; grid-template-columns:1fr 1fr 320px; gap:12px; align-items:start }

/* ── KPI şeridi ── */
.kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.kpi { border:1px solid var(--line); border-radius:6px; background:var(--panel); padding:10px 12px }
.kpi-label { font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg3) }
.kpi-value { font:600 22px var(--sans); margin-top:5px; letter-spacing:-.02em }
.kpi-unit { font:500 12px var(--mono); color:var(--fg2) }
.kpi-note { font:500 10px var(--mono); color:var(--fg3); margin-top:3px }

/* ── Tablolar ── */
.tbl-wrap { overflow-x:auto }
table { border-collapse:collapse; width:100% }
th { text-align:left; font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase;
     color:var(--fg3); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap }
td { padding:0 10px; height:var(--row); border-bottom:1px solid var(--line);
     font-size:12.5px; white-space:nowrap; vertical-align:middle }
tbody tr:hover { background:var(--panel2) }
.num { font-family:var(--mono); text-align:right; font-size:12px }
.mono { font-family:var(--mono); font-size:11.5px; text-transform:none }
/* Türkçe locale'de text-transform:uppercase İngilizce "i"yi "İ" yapıyor
   (live → LİVE). Çevrilemeyen teknik dizeler (model id, dosya adı) bu sınıfla
   basılır: uppercase almaz. Ek güvenlik: .tag içindeki tek tek İngilizce
   kalıntılar için lang="en" işaretlenir. */
.tag[lang="en"] { text-transform:uppercase }
.dim { color:var(--fg3) }
a { color:var(--acc); text-decoration:none } a:hover { text-decoration:underline }

/* ── Etiketler ── */
.tag { display:inline-block; font:600 10px var(--mono); letter-spacing:.08em;
       text-transform:uppercase; padding:2px 6px; border-radius:3px; border:1px solid var(--line2) }
.t-ok   { color:var(--ok);   background:var(--okS);   border-color:var(--okD) }
.t-warn { color:var(--warn); background:var(--warnS); border-color:var(--warnD) }
.t-err  { color:var(--err);  background:var(--errS);  border-color:var(--errD) }
.t-acc  { color:var(--acc);  background:var(--accS);  border-color:var(--accD) }
.t-mute { color:var(--fg3) }

/* ── Skor çubukları / eşik ── */
.bar { height:5px; border-radius:3px; background:var(--panel2); overflow:hidden }
.bar > i { display:block; height:100%; background:var(--acc) }
.bar.ok > i { background:var(--ok) } .bar.warn > i { background:var(--warn) }
/* overflow:hidden yapısal güvenlik ağı: bir yükseklik hesabı yine bozulsa bile
   çubuk konteynerden ÇIKAMAZ. Yükseklikler ayrıca Python'da %100'e kırpılıyor. */
.hist { display:flex; align-items:flex-end; gap:2px; height:74px;
        position:relative; overflow:hidden; padding:0; box-sizing:border-box }
.hist > b { flex:1; background:var(--accD); border-radius:2px 2px 0 0; min-height:2px;
            max-height:100%; align-self:flex-end }
.hist > b.below { background:var(--warnD) }
/* Gerçek hedef çizgisi — sadece altta bir etiket değil, eksende doğru yerde. */
.hist-target { position:absolute; left:0; right:0; border-top:1px dashed var(--warnD);
               pointer-events:none }
.hist-target > span { position:absolute; right:0; top:-13px; font:500 9.5px var(--mono);
                      color:var(--warn); background:var(--panel); padding:0 3px }
.hist-axis { display:flex; justify-content:space-between; margin-top:5px;
             font:500 9.5px var(--mono); color:var(--fg3) }
.floor-line { border-top:1px dashed var(--warnD); margin-top:6px; padding-top:5px;
              font:500 10px var(--mono); color:var(--warn) }

/* ── Guardrail zinciri ── */
.chain { display:flex; flex-direction:column; gap:1px }
.chain-step { display:flex; align-items:center; gap:9px; padding:7px 10px;
              border-bottom:1px solid var(--line); font-size:12px }
.chain-step:last-child { border-bottom:0 }
.chain-mark { width:14px; text-align:center; font-family:var(--mono); font-weight:600 }
.chain-name { flex:1 } .chain-ms { font:500 10.5px var(--mono); color:var(--fg3) }
.chain-detail { flex:2; color:var(--fg3); font-size:11.5px; white-space:normal }

/* ── Chunk listesi ── */
.chunk { border:1px solid var(--line); border-radius:5px; padding:9px 10px; margin-bottom:7px;
         background:var(--panel) }
.chunk.below { opacity:.45 }
.chunk-head { display:flex; align-items:center; gap:8px; margin-bottom:5px }
.chunk-rank { font:600 10px var(--mono); color:var(--fg3) }
.chunk-score { font:600 13px var(--mono) }
.chunk-url { font:500 11px var(--mono); color:var(--acc); overflow:hidden; text-overflow:ellipsis }
.chunk-body { font-size:12px; color:var(--fg2); white-space:normal; line-height:1.45 }

/* ── Transkript ── */
.msg { border-bottom:1px solid var(--line); padding:11px 12px }
.msg-head { display:flex; align-items:center; gap:8px; font:600 10px var(--mono);
            letter-spacing:.09em; text-transform:uppercase; color:var(--fg3); margin-bottom:6px }
.msg-body { font-size:13px; line-height:1.55; white-space:normal }
.msg-diag { margin-top:9px; border-top:1px dashed var(--line); padding-top:8px }

/* ── Form ── */
label { display:block; font:600 10px var(--mono); letter-spacing:.09em;
        text-transform:uppercase; color:var(--fg3); margin-bottom:5px }
input, select, textarea { width:100%; background:var(--panel2); color:var(--fg);
        border:1px solid var(--line2); border-radius:5px; padding:7px 9px;
        font:400 12.5px var(--sans) }
textarea { font-family:var(--mono); font-size:12px; line-height:1.5; resize:vertical }
/* Açık yeşil accent üzerinde beyaz metin 1,8 kontrast veriyordu (okunmaz).
   Koyu metin 9,4 veriyor. Açık temada accent koyu yeşil olduğu için orada
   beyaz doğru — bu yüzden değer temaya bağlı. */
button, .btn { background:var(--acc); color:var(--btn-fg); border:0; border-radius:5px;
        padding:7px 13px; font:600 12px var(--sans); cursor:pointer; text-decoration:none;
        display:inline-block }
button.ghost, .btn.ghost { background:var(--panel2); color:var(--fg2); border:1px solid var(--line2) }
.row { display:flex; gap:10px; align-items:flex-end }
.notice { border:1px solid var(--warnD); background:var(--warnS); color:var(--warn);
          border-radius:5px; padding:9px 11px; font-size:12px; white-space:normal; line-height:1.5 }
.notice.info { border-color:var(--accD); background:var(--accS); color:var(--acc) }
.empty { padding:26px; text-align:center; color:var(--fg3); font-size:12.5px }

/* ── Giriş ── */
.login { min-height:100vh; display:grid; place-items:center; background:var(--bg) }
.login-card { width:320px; border:1px solid var(--line); border-radius:8px;
              background:var(--panel); padding:22px }

/* ── Site sekmeleri (Konuşmalar) ─────────────────────────────────────────── */
.tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px;
        border-bottom:1px solid var(--line) }
.tab { display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
       font:500 12.5px var(--sans); color:var(--fg3); text-decoration:none;
       border:1px solid transparent; border-bottom:none;
       border-radius:7px 7px 0 0; margin-bottom:-1px }
.tab:hover { color:var(--fg); background:var(--panel2) }
.tab.on { color:var(--fg); background:var(--panel); border-color:var(--line);
          border-bottom:1px solid var(--panel) }
.tab-n { font:600 10.5px var(--mono); color:var(--fg3); background:var(--panel2);
         border-radius:5px; padding:1px 5px }
.tab.on .tab-n { color:var(--acc) }

/* ── Belirsiz ilerleme (payda henüz bilinmiyor) ───────────────────────────── */
.bar.indet { position:relative; overflow:hidden }
.bar.indet i { position:absolute; left:0; width:34%!important;
               animation: indet 1.25s ease-in-out infinite }
@keyframes indet { 0% { left:-34% } 100% { left:100% } }
@media (prefers-reduced-motion: reduce) {
  .bar.indet i { animation:none; width:100%!important; opacity:.35 }
}