/* ══════════════════════════════════════════════════════════════════════════
   Ortak bileşenler — Nereus mockup'larının ortak sınıfları.
   Kanonik tanım shell.html'deki; orada yoksa mockup'lar arasında en çok
   kullanılan varyant.  Seçimler ve farklar: docs/ui/css-varyantlari.md.
   Renk yalnız tokens.css'ten (var(--…)); harf dönüşümü yok.
   ══════════════════════════════════════════════════════════════════════════ */

a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
code{font-family:"IBM Plex Mono",Consolas,monospace;font-size:.92em;background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:1px 4px}
.subtle{color:var(--ink-3)}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:var(--sp-5)}
.region{margin-top:var(--sp-5)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--sp-5);align-items:start}

/* ── chip / pill / durum şekli ── */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;
  font-size:12px;font-weight:500;border:1px solid var(--border-strong);color:var(--ink-2);
  background:var(--surface);white-space:nowrap;
}
.chip.ok{color:var(--ok);border-color:var(--ok-border);background:var(--ok-bg)}
.chip.warn{color:var(--warn);border-color:var(--warn-border);background:var(--warn-bg)}
.chip.crit{color:var(--crit);border-color:var(--crit-border);background:var(--crit-bg)}
.chip.acc{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.chip svg{flex:0 0 auto}

.pill{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;font-size:10px;
  font-family:"IBM Plex Mono",Consolas,monospace;letter-spacing:.04em;border:1px solid var(--border);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pill.ok{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok)}
.pill.warn{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn)}
.pill.crit{border-color:var(--crit-border);background:var(--crit-bg);color:var(--crit)}
.pill.acc{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* durum önce şekildir: daire sağlıklı, üçgen uyarı, kare kritik; renk yalnız pekiştirir */
.st{flex:0 0 auto;display:inline-block;vertical-align:-1px}
.st.ok{color:var(--ok)} .st.warn{color:var(--warn)} .st.crit{color:var(--crit)} .st.none{color:var(--ink-3)}

/* ── düğmeler ── */
.btn{
  height:var(--control-h-sm);padding:0 13px;border-radius:var(--radius);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur) ease, border-color var(--dur) ease;
}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.danger{color:var(--crit);border-color:var(--crit-border)}
.btn.danger:hover{background:var(--crit-bg)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn.lg{height:var(--control-h);padding:0 18px;font-size:14px}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.acts .spacer{flex:1}
.acts .in{width:auto}

/* ── sekmeler / segment ── */
.tabs{display:flex;gap:2px;margin:var(--sp-5) 0 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{
  height:36px;padding:0 12px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:13.5px;
  cursor:pointer;position:relative;border-radius:var(--radius-sm) var(--radius-sm) 0 0;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:color var(--dur) ease, background-color var(--dur) ease;
}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab[aria-selected="true"]{color:var(--ink);font-weight:500}
.tab[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.seg button,.seg a{height:var(--control-h-sm);padding:0 11px;border:0;border-right:1px solid var(--border);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;
  display:inline-flex;align-items:center;text-decoration:none}
.seg button:last-child,.seg a:last-child{border-right:0}
.seg [aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);font-weight:500}
.seg button:hover:not([aria-pressed="true"]),.seg a:hover:not([aria-pressed="true"]){background:var(--surface-2)}

/* ── panel ── */
.panel{
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:var(--shadow-sm);overflow:clip;min-width:0;
}
.panel-head{
  min-height:44px;display:flex;align-items:center;gap:10px;padding:var(--sp-2) var(--sp-4);
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.panel-head h2,.panel-head h3{margin:0;font-size:13.5px;font-weight:600}
.panel-head .hint{font-size:12px;color:var(--ink-3)}
.panel-head .spacer{flex:1}
.panel-head .sel,.panel-head .in{width:auto}
.panel-body{padding:var(--sp-4)}
.panel-body > :first-child{margin-top:0}
.panel-body > :last-child{margin-bottom:0}
.panel-foot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:var(--surface-2);
  font-size:12px;color:var(--ink-3);line-height:1.6}
.panel-foot b{color:var(--ink-2);font-weight:500}

/* ── form dili: etiket üstte, kontrol, kaybolmayan yardım metni, alanın altında hata ── */
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
.form > form{display:flex;flex-direction:column;gap:var(--sp-4)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.frow.thirds{grid-template-columns:1fr 1fr 1fr}
.frow.auto{display:flex;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > .lab{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink)}
.field .req{color:var(--crit);font-size:12px}
.field .help{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.acts-note{font-size:11.5px;color:var(--ink-3)}
.field .err{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--crit);line-height:1.55}
.field[data-bad="true"] .in,.field[data-bad="true"] .sel{border-color:var(--crit)}
.in,.sel{height:var(--control-h);width:100%;padding:0 11px;border-radius:var(--radius);
  border:1px solid var(--border-strong);background:var(--input);color:var(--ink);font:inherit;font-size:14px}
.in:hover,.sel:hover{background:var(--input-hover)}
.in:focus,.sel:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.in[disabled],.sel[disabled]{opacity:.55;cursor:not-allowed}
.in.sm,.sel.sm{height:var(--control-h-sm);font-size:13px;padding:0 9px}
.in.num{font-variant-numeric:tabular-nums}
textarea.in{height:auto;padding:9px 11px;line-height:1.55;resize:vertical}
textarea.in.mono{font-family:"IBM Plex Mono",Consolas,monospace;font-size:12.5px}
/* metin kutusu + düğme yan yana (klasör yolu + İçe aktar): kutu kalan yeri alır */
.inrow{display:flex;align-items:center;gap:var(--sp-2)}
.inrow .in{flex:1;min-width:0}
.inrow .btn{flex:0 0 auto;height:var(--control-h)}
/* dosya seçici: kesikli bırakma alanı, görünmez input tamamını kaplar */
.filepick{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--control-h);
  padding:8px 10px 8px 12px;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--input);
  transition:background-color var(--dur) ease,border-color var(--dur) ease}
.filepick:hover,.filepick[data-drag]{background:var(--input-hover);border-color:var(--accent)}
.filepick:focus-within{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.filepick[data-has]{border-style:solid}
.filepick .fp-ic{color:var(--ink-3);display:flex;flex:0 0 auto}
.filepick[data-has] .fp-ic{color:var(--accent)}
.filepick .fp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.4}
.filepick .fp-txt b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick .fp-sub{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick .fp-btn{flex:0 0 auto;pointer-events:none}
.filepick:hover .fp-btn{background:var(--surface-2)}
.filepick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.unitrow{display:flex;align-items:center;gap:9px}
.unitrow .in{max-width:112px}
.unitrow .u{font-size:12.5px;color:var(--ink-2)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55}
.check input{width:16px;height:16px;margin-top:2px;accent-color:var(--accent);flex:0 0 auto}
.check .x{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.6}
fieldset.group{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);margin:0;
  display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
fieldset.group legend{padding:0 6px;font-size:12.5px;font-weight:600}

/* ── bilgi / uyarı şeridi ── */
.strip{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border-strong);
  background:var(--surface);border-radius:var(--radius);font-size:12.5px;line-height:1.62;color:var(--ink-2)}
.strip .ic{flex:0 0 auto;margin-top:2px}
.strip .txt{flex:1;min-width:0;max-width:84ch}
.strip .txt>b:first-child{display:block;margin-bottom:3px;font-size:12.5px;color:var(--ink)}
.strip.ok{border-color:var(--ok-border);background:var(--ok-bg)} .strip.ok .ic{color:var(--ok)}
.strip.warn{border-color:var(--warn-border);background:var(--warn-bg)} .strip.warn .ic{color:var(--warn)}
.strip.crit{border-color:var(--crit-border);background:var(--crit-bg)} .strip.crit .ic{color:var(--crit)}
.strip.acc{border-color:var(--accent);background:var(--accent-soft)} .strip.acc .ic{color:var(--accent)}
.note{font-size:12.5px;color:var(--ink-2);line-height:1.62}
.note b{color:var(--ink);font-weight:600}

/* ── anahtar-değer ── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-4);font-size:12.5px;margin:0}
.kv dt{color:var(--ink-3);white-space:nowrap}
.kv dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.kv.dense{font-size:11.5px;gap:5px var(--sp-3)}
.metarow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;padding:var(--sp-3) 0 0}

/* ── tablo ──
   Tablolar sayfaya sığar: yatay kaydırma yalnız çok dar ekranda son çare. Metin hücreleri kırılır,
   uzun metin (.clip) tek satırda kesilir, ikincil kolonlar (.opt / .opt2) dar alanda gizlenir.
   Başlık satırı sayfa kaydırılırken üstte kalır (panel overflow:clip, tablewrap kaydırma kabı değil). */
.tablewrap{container-type:inline-size;overflow-x:auto}
@media (min-width:900px){.tablewrap{overflow-x:visible}}
.panel > .tablewrap{margin:0}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.tbl th{text-align:left;font-weight:500;color:var(--ink-3);font-size:11px;letter-spacing:.04em;
  padding:9px 10px 7px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2);
  position:sticky;top:0;z-index:2}
.tbl th.n{text-align:right}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink-2);
  overflow-wrap:break-word}
.tbl .brk{overflow-wrap:anywhere}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl tbody tr[aria-current="true"] td{background:var(--accent-soft)}
.tbl td.n{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;overflow-wrap:normal}
.tbl td.nowrap{white-space:nowrap;overflow-wrap:normal}
.tbl td .in.sm.num{width:112px}
.tbl td .sub{font-size:11px;color:var(--ink-3);margin-top:2px}
.tbl td.act{text-align:right;white-space:nowrap;width:1%}
.tbl td.act .btn + .btn{margin-left:4px}
.morebar{display:flex;justify-content:center;padding:var(--sp-3);border-top:1px solid var(--border)}
/* Sorgu takibi: gizlenen durumlara bağlantı çubuğu, tablo durum hücresi, detay paneli */
.hiddenbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:0 var(--sp-1)}
.hiddenbar a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2)}
.hiddenbar a:hover .chip{border-color:var(--accent)}
.tbl td.state-col .sub a{color:inherit}
.tbl td .sub .track{text-decoration:none;margin-right:var(--sp-2)}
.tbl td .sub .track .chip{font-size:inherit}
.track-text{margin:0 0 var(--sp-3)}
.snooze{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);font-size:12.5px}
.snooze .in{width:auto;flex:1 1 220px;max-width:360px}
.tbl td.mono,.tbl td .mono{font-family:"IBM Plex Mono",Consolas,monospace;font-size:11.5px}
.tbl td.clip{max-width:0;width:40%}
.tbl td.clip > *:not(.pill){max-width:100%}
.tbl td.clip .qtxt{max-width:100%}
.tbl .lines2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbl td.src .db{color:var(--ink);font-weight:500}
.tbl td.sql .pill{margin-top:4px}
.tbl .tags{display:flex;flex-wrap:wrap;gap:4px}
.tbl tr[data-off="true"] td:not(.act){opacity:.6}
.tbl tr[data-reg="true"] td{background:var(--crit-bg)}
.tbl th button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;gap:5px}
.tbl th[aria-sort] button{color:var(--ink)}
@container (max-width:1180px){.tbl .opt{display:none}}
@container (max-width:900px){.tbl .opt2{display:none}}
@container (max-width:600px){.tbl th{white-space:normal}}
.qtxt{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  font-family:"IBM Plex Mono",Consolas,monospace;font-size:11.5px;color:var(--accent);
  text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.qtxt:hover{text-decoration-color:var(--accent)}

/* ── kod (kırpılmaz) ── */
.code{position:relative;overflow:clip;border:1px solid var(--border);border-radius:var(--radius);background:var(--input);min-width:0}
.code pre{margin:0;padding:12px 14px;
  font-family:"IBM Plex Mono",Consolas,monospace;font-size:12px;line-height:1.65;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
/* uzun kod: iç kaydırma yok, 24 satırda kesilir ve alttan solar; "Tümünü göster" açar */
.code[data-collapsed] pre{max-height:calc(24 * 1.65em + 12px);overflow:hidden;position:relative}
.code[data-collapsed] pre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;
  background:linear-gradient(transparent,var(--input))}
.code .codefoot{display:flex;justify-content:center;padding:4px;border-top:1px solid var(--border)}
.code .codebar{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-bottom:1px solid var(--border);
  font-size:11.5px;color:var(--ink-3)}
.code .codebar .spacer{flex:1}
pre.plain{margin:0;font-family:"IBM Plex Mono",Consolas,monospace;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ── iskelet / boş / hata ── */
.sk{background:var(--surface-2);border-radius:5px;position:relative;overflow:hidden;height:12px}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-row{display:flex;gap:var(--sp-4);align-items:center;padding:11px 0}
.sk-row + .sk-row{border-top:1px solid var(--border)}
.state{display:grid;place-items:center;text-align:center;padding:var(--sp-10) var(--sp-6)}
.state .ico{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--sp-4);
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--border);
}
.state.err .ico{background:var(--crit-bg);border-color:var(--crit-border);color:var(--crit)}
.state h3{margin:0 0 6px;font-size:15px;font-weight:600}
.state p{margin:0 0 var(--sp-4);font-size:13.5px;color:var(--ink-2);max-width:56ch}
.state .mono{font-size:11.5px;color:var(--ink-3);margin-top:var(--sp-3);overflow-wrap:anywhere}

/* ── kaydetme çubuğu: yalnız değişiklik varsa ── */
.savebar{position:sticky;bottom:0;z-index:30;margin-top:var(--sp-5);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}
.savebar .top{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);flex-wrap:wrap}
.savebar .n{font-size:13px;font-weight:500}
.savebar .why{font-size:11.5px;color:var(--ink-3)}
.savebar .spacer{flex:1}

/* ── ayarlar kabuğu (ekran 06) ── */
.setwrap{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100%}
.setnav{border-right:1px solid var(--border);background:var(--surface);padding:var(--sp-4) var(--sp-3) var(--sp-8)}
.setnav .cap{padding:var(--sp-4) 10px var(--sp-2);display:block}
.setnav .cap:first-child{padding-top:0}
.snit{width:100%;display:flex;align-items:center;gap:9px;min-height:33px;padding:0 8px 0 10px;border:0;
  border-radius:var(--radius-sm);background:none;color:var(--ink-2);font:inherit;font-size:13px;text-align:left;cursor:pointer;
  text-decoration:none}
.snit:hover{background:var(--surface-2);color:var(--ink)}
.snit[aria-current="true"],.snit[aria-current="page"]{background:var(--accent-soft);color:var(--ink);font-weight:500}
.snit .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setmain{min-width:0;padding-left:var(--sp-5)}
@media (max-width:900px){
  .setwrap{grid-template-columns:1fr}
  .setnav{border-right:0;border-bottom:1px solid var(--border);padding-bottom:var(--sp-3)}
  .setmain{padding-left:0}
  .frow,.frow.thirds{grid-template-columns:1fr}
}

/* ── giriş (ekran 00) ── */
.page{position:relative;z-index:1;height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px 32px;gap:28px;overflow-y:auto}
.page .brand{flex:0 0 auto}
.page .brand span{font-size:19px;font-weight:600;letter-spacing:-.012em}
.page .prefs{position:fixed;top:var(--sp-4);right:var(--sp-4);z-index:2;display:flex;gap:var(--sp-2);align-items:center}
.page .card{width:100%;max-width:424px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);padding:40px 40px 32px}
.page .card h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.page .card .lede{margin:7px 0 0;font-size:13.5px;color:var(--ink-2)}
.page .card .form{margin-top:28px}
.page .card .btn.lg{width:100%}
.page .card .lede + .form{margin-top:22px}
.page .card .cardfoot{margin:26px -40px -32px;padding:16px 40px;border-top:1px solid var(--border);border-radius:0 0 12px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--ink-3)}
.banner{display:flex;gap:11px;padding:13px 15px;border-radius:8px;background:var(--crit-bg);border:1px solid var(--crit-border)}
.banner svg{flex:0 0 auto;color:var(--crit);margin-top:1px}
.banner h2{margin:0 0 3px;font-size:13.5px;font-weight:600;color:var(--crit)}
.banner p{margin:0;font-size:12.5px;color:var(--ink-2)}
.banner.ok{background:var(--ok-bg);border-color:var(--ok-border)}
.banner.ok svg{color:var(--ok)}
.pagefoot{font-size:12.5px;color:var(--ink-3);text-align:center}
@media (max-width:520px){
  .page .card{padding:32px 24px 24px;border-radius:10px}
  .page .card .cardfoot{margin:24px -24px -24px;padding:14px 24px;flex-direction:column;align-items:flex-start;gap:8px}
}

/* ── grafikler: seri renkleri sabit slotlardan (tokens --s1…), durum renkleri seri olarak kullanılmaz ── */
svg .axis{font-size:10px;fill:var(--ink-3);font-family:"IBM Plex Mono",Consolas,monospace}
svg.trend rect.exec{fill:var(--s9);opacity:.55}
svg.trend polyline.dur{stroke:var(--s1);stroke-width:2}
svg.trend .dur-label{fill:var(--s1)}
svg.hours rect{fill:var(--s1)}
svg.pc-chart circle.old{fill:var(--s1)} svg.pc-chart circle.new{fill:var(--s2)}
svg.pc-chart line.change{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:5 3}
svg.pc-chart line.event{stroke:var(--ink-3);stroke-dasharray:4 3}
svg.pc-chart rect.event-range{fill:var(--ink-3);opacity:.15}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:6px}
.legend .li{display:flex;align-items:center;gap:7px}
.legend .sw{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.legend .sw.s1{background:var(--s1)} .legend .sw.s2{background:var(--s2)} .legend .sw.s9{background:var(--s9)}

/* ── yan yana fark: renk + işaret (− silindi, + eklendi, ~ değişti) ── */
table.diff{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono",Consolas,monospace;font-size:12px;line-height:1.6}
table.diff th{text-align:left;font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:11px;color:var(--ink-3);
  padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-2)}
table.diff td{vertical-align:top;padding:0 10px 0 22px;white-space:pre-wrap;width:50%;position:relative;color:var(--ink);border-right:1px solid var(--border)}
table.diff td::before{position:absolute;left:8px;color:var(--ink-3)}
table.diff td.deleted{background:var(--crit-bg)} table.diff td.deleted::before{content:"−";color:var(--crit)}
table.diff td.inserted{background:var(--ok-bg)} table.diff td.inserted::before{content:"+";color:var(--ok)}
table.diff td.modified{background:var(--warn-bg)} table.diff td.modified::before{content:"~";color:var(--warn)}
table.diff td.imaginary{background:var(--surface-2)}
.panel.rec .panel-head h3{font-size:13.5px}
.section-title{margin:var(--sp-3) 0 0;font-size:15px;font-weight:600}

/* Analiz listesi: durum çipinin yanındaki satır içi iptal düğmeleri */
#analyses-list td .btn.sm{margin-left:6px}

/* ── dar kapta tablo = kart listesi ──
   Kap ≤560px (telefon) iken satır karta, hücre "etiket: değer" satırına döner; yatay kaydırma kalmaz. Etiketler
   thead'den js/ui.js (labelTables) ile data-label'a kopyalanır; etiketsiz hücre (işlem, boş durum) tam genişlik. */
@container (max-width:560px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl tr{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td,.tbl tr:last-child td{border-bottom:0;padding:3px 0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  .tbl td[data-label]:not([data-label=""]){display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:var(--sp-2);align-items:baseline}
  .tbl td[data-label]:not([data-label=""])::before{content:attr(data-label);color:var(--ink-3);font-size:11px;letter-spacing:.02em;
    font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif}
  .tbl td[data-label]:not([data-label=""]) > *{grid-column:2;justify-self:start;max-width:100%}
  .tbl td.n,.tbl td.act{text-align:left;width:auto}
  .tbl td.clip{max-width:none;width:auto}
  .tbl .qtxt{max-width:100%}
  .tbl tbody tr:hover td{background:none}
}
/* Telefonda satır içi formun büyüyen alanı kendi satırını alır (arama/hesap kutusu 60-140px'e sıkışıyordu) */
@media (max-width:600px){.frow.auto > .field.grow{flex-basis:100%}}

/* ── nesne bağımlılık grafiği (DependencyGraph): kapsam rengi = aynı DB s1, başka DB s2, linked server s9 ── */
svg.depgraph{width:100%;max-width:760px;height:auto;display:block;margin:0 auto var(--sp-3)}
svg.depgraph text{font-family:"IBM Plex Mono",Consolas,monospace;font-size:11px;fill:var(--ink)}
svg.depgraph text.axis{font-family:"IBM Plex Sans","Segoe UI",sans-serif;fill:var(--ink-3)}
svg.depgraph .node rect{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.2}
svg.depgraph .node.center rect{fill:var(--accent-soft);stroke:var(--accent)}
svg.depgraph .node.dep-same rect{stroke:var(--s1)} svg.depgraph .node.dep-db rect{stroke:var(--s2)}
svg.depgraph .node.dep-server rect{stroke:var(--s9);stroke-dasharray:4 3}
svg.depgraph .node.dep-more rect{stroke-dasharray:2 3} svg.depgraph .node.dep-more text{fill:var(--ink-3)}
svg.depgraph a.node:hover rect{fill:var(--surface-2)}
svg.depgraph .edge{fill:none;stroke-width:1.4;opacity:.7;stroke:var(--border-strong)}
svg.depgraph .edge.dep-same{stroke:var(--s1)} svg.depgraph .edge.dep-db{stroke:var(--s2)} svg.depgraph .edge.dep-server{stroke:var(--s9)}
.legend .sw.dep-same{background:var(--s1)} .legend .sw.dep-db{background:var(--s2)} .legend .sw.dep-server{background:var(--s9)}

/* ── Genel Bakış trendleri (StackedBars): seri slot renkleri ── */
svg.bars{width:100%;height:auto;display:block}
svg.bars .base{stroke:var(--border-strong);stroke-width:1}
svg.bars rect.s1{fill:var(--s1)} svg.bars rect.s2{fill:var(--s2)} svg.bars rect.s4{fill:var(--s4)}
svg.bars .day:hover rect{opacity:.8}
.legend .sw.s4{background:var(--s4)}

/* ── Pahalı sorgular (mockup 13): 14 günlük eğilim ve bekleme/çalışma şeridi ── */
svg.spark{display:block;overflow:visible}
svg.spark polyline{fill:none;stroke:var(--s1);stroke-width:1.5;stroke-linejoin:round}
svg.spark circle{fill:var(--s1)}
svg.spark.hot polyline{stroke:var(--s2)} svg.spark.hot circle{fill:var(--s2)}
.tbl td.trend{width:92px}
.ww{display:block;height:3px;margin:4px 0 0 auto;width:56px;border-radius:2px;background:var(--s9);opacity:.85;overflow:hidden}
.ww i{display:block;height:100%;background:var(--s1)}

/* ── Sorgu detayı (mockup 03): maliyet kutucukları ve zaman çizelgesi ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:var(--sp-3)}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.tile .lab{font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.tile .val{font-size:20px;font-weight:600;color:var(--ink)}
.tile .delta{font-size:11.5px}
.tile .delta.up{color:var(--crit)} .tile .delta.down{color:var(--ok)} .tile .delta.flat{color:var(--ink-3)}
ol.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.timeline li{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:var(--sp-3);padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px;align-items:baseline}
ol.timeline li:last-child{border-bottom:0}
ol.timeline .when{color:var(--ink-3)}
ol.timeline .what{overflow-wrap:anywhere}
@media (max-width:600px){ol.timeline li{grid-template-columns:1fr;gap:2px}}

/* ── Rapor (mockup 08): doğrulamadan geçemeyen öneriler katlı ── */
details.dropped{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);background:var(--surface)}
details.dropped > summary{cursor:pointer;font-weight:500;color:var(--ink-2)}
details.dropped[open] > summary{margin-bottom:var(--sp-3)}
details.dropped > * + *{margin-top:var(--sp-3)}
/* Analiz sohbeti (alt proje 4 D) */
.chat-turn{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--border)}
.chat-turn:last-of-type{border-bottom:0}
.chat-a{white-space:pre-wrap;overflow-wrap:anywhere}
/* Pencere (mockup 11-12-popups .scrim/.win); K8-5 çeviri onayı: kaynak salt okunur, İngilizce düzenlenir, yan yana */
.scrim.win-scrim{align-items:center;padding:var(--sp-5);z-index:70}
.win{width:min(1180px,100%);height:min(860px,92dvh);display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;animation:rise 160ms ease}
.win:focus{outline:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.win-head{flex:0 0 auto;display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--border)}
.win-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.win-head .idline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:7px}
.win-head .grow{flex:1;min-width:0}
.win-body{flex:1;min-height:0;display:flex;overflow:hidden}
.win-body.tr-body{flex-direction:column;gap:var(--sp-3);overflow-y:auto;padding:var(--sp-4)}
.win-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);background:var(--surface-2);font-size:11.5px;color:var(--ink-3);line-height:1.6}
.win-foot .spacer{flex:1;min-width:16px}
.win-foot > .strip{flex:1 1 100%}
.tr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:start}
.tr-sec{grid-column:1 / -1;font-weight:600;font-size:12.5px;margin-top:var(--sp-3);padding-bottom:4px;border-bottom:1px solid var(--border)}
.tr-src{margin:0;padding:6px 8px;background:var(--surface-2);border-radius:var(--radius-sm);font-size:12.5px;overflow-wrap:anywhere;white-space:pre-wrap}
.tr-src p{margin:4px 0 0}
.tr-en{margin:0;width:100%;font-size:12.5px;overflow-wrap:anywhere;white-space:pre-wrap}
textarea.tr-en{resize:vertical;field-sizing:content;min-height:4lh}   /* metne göre büyür: iç kaydırma kutusu çıkmaz, pencere gövdesi kayar */
.tr-en.empty{color:var(--ink-3)}
.tr-en-pair{display:flex;flex-direction:column;gap:6px;min-width:0}
@media (max-width:700px){
  .scrim.win-scrim{padding:0}
  .win{height:100dvh;border-radius:0}
  .tr-grid{grid-template-columns:minmax(0,1fr)}
  .tr-colhead{display:none}
  .tr-src{border-left:3px solid var(--border-strong)}
}