/* ============================================================
   SiberVM Panel — kurumsal mavi tema
   Display: Space Grotesk · Gövde: Inter · Mono: JetBrains Mono
   Açık tema varsayılan; [data-theme="dark"] koyu tema.
   ============================================================ */

@font-face { font-family: "Inter"; src: url("/panel/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2018-201E,U+2020-2022,U+2039-203A,U+2212; }
@font-face { font-family: "Inter"; src: url("/panel/static/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2C60-2C7F; }
@font-face { font-family: "Space Grotesk"; src: url("/panel/static/fonts/spacegrotesk-latin.woff2") format("woff2");
  font-weight: 500 700; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2018-201E,U+2020-2022,U+2039-203A,U+2212; }
@font-face { font-family: "Space Grotesk"; src: url("/panel/static/fonts/spacegrotesk-latin-ext.woff2") format("woff2");
  font-weight: 500 700; font-display: swap; unicode-range: U+0100-024F,U+1E00-1EFF; }
@font-face { font-family: "JetBrains Mono"; src: url("/panel/static/fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight: 400 600; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2018-201E,U+2020-2022,U+2039-203A,U+2212; }
@font-face { font-family: "JetBrains Mono"; src: url("/panel/static/fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-display: swap; unicode-range: U+0100-024F,U+1E00-1EFF; }

:root {
  /* ---- Mavi omurga ---- */
  --blue-50:#eff5ff; --blue-100:#dbe8fe; --blue-200:#bfd7fe; --blue-300:#93bbfd;
  --blue-400:#609afa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --blue-800:#1e40af; --blue-900:#1e3a8a;

  /* ---- OLCEK (tek kaynak) ----------------------------------------------
     ⚠️ Bu olcekler ONCE YOKTU: dosyada 23 farkli font-size, 20 farkli
     border-radius, 71 farkli padding vardi (62'si TEK kullanimlik). Hicbir sey
     birbiriyle hizalanmadigi icin panel "sablon" gorunuyordu. Yeni deger
     eklemeden ONCE bu olceklerden birinin ise yarayip yaramadigina bak. */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px;
  --sp-5:16px; --sp-6:20px; --sp-7:28px; --sp-8:40px;
  --t-xs:11px; --t-sm:12px; --t-md:13px; --t-lg:14px;
  --t-xl:16px; --t-2xl:20px; --t-3xl:26px; --t-4xl:34px;
  --radius-xs:8px; --radius-sm:10px; --radius:16px; --radius-lg:20px; --radius-pill:999px;
  --sidebar-w:248px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk",var(--sans);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- ACIK TEMA: MAVI DOKULU KANVAS, YUKSELEN BEYAZ KARTLAR ------------
     ⚠️ ONCEKI DENEME "beyaz sayfa + gri kart" idi ve RUHSUZ okundu (kullanici
     bulgusu). Kok neden olculdu: kart ile sayfa arasindaki fark 1.07:1 ve kartin
     kromasi 7 — yani "tasarlanmis bir ton" degil KIRLI BEYAZ. Ustelik golge de
     kaldirilmisti, derinlik yaratacak hicbir sey kalmamisti.
     Yeni model: kanvasin KENDISI renkli (kroma 19), kart saf beyaz olarak
     YUKSELIR, golge geri geldi. Renk artik notr griden degil MAVIDEN geliyor. */
  --bg:#e8eefb; --surface:#ffffff; --surface-2:#f2f6fe; --surface-3:#e0e9f9;
  --border:#d7e1f2;
  /* ⚠️ Kontrol kenarligi WCAG 1.4.11 geregi >=3:1 olmali. Eski deger 1.5:1 idi —
     buton/girdi kenarlari fiilen GORUNMUYORDU (olculdu). */
  --border-strong:#728196;
  --fg:#0d1729; --fg-muted:#495771; --fg-faint:#5d6b84;
  --primary:#1d57e0; --primary-hover:#1546bd; --primary-soft:#dfe9ff; --on-primary:#ffffff;
  --ring:rgba(29,87,224,.34);
  /* ⚠️ Rozet tonlari KOYULASTIRILDI: eski cift (#0f9d58/#e6f6ec) yalnizca 3.13:1
     veriyordu — normal metin icin SINIFTA KALIYORDU. Yeniler >=4.8:1. */
  --ok:#07734a; --ok-soft:#e2f4e9; --warn:#95590a; --warn-soft:#fbefda;
  --danger:#c81e1e; --danger-soft:#fceaea; --info:#1d57e0; --info-soft:#dfe9ff;
  /* Golge yumusadi (ton ayirdigi icin) — yalnizca yukselen katmanlarda belirgin */
  --shadow-sm:0 1px 2px rgba(13,23,41,.05),0 1px 3px rgba(13,23,41,.04);
  --shadow-md:0 6px 20px rgba(13,23,41,.10),0 2px 6px rgba(13,23,41,.06);
  --shadow-lg:0 18px 44px rgba(15,26,46,.16);
  --shadow-primary:0 6px 18px rgba(29,87,224,.26);
  /* Kullanim grafigi serileri (sablon <style> bloklarindaki ham hex'ler yerine) */
  --uc-cpu:#1d57e0; --uc-ram:#7c3aed; --uc-disk:#07734a;
  color-scheme:light;
  /* Kanvas ambiyansinin iki isigi — adlandirilmis olmasi hem okunurluk hem de
     koyu temada dogru calismasi icin (ikisi de token'lardan turetilir). */
  /* ⚠️ KONSOL/TERMINAL YUZEYI TEMADAN BAGIMSIZ KOYU KALIR — uzak bir ekranin
     goruntusu oldugu icin bilinclidir. Bu dokuz token KASITLA koyu tema blogunda
     YENIDEN TANIMLANMAZ; "eksik kalmis" sanip override eklemeyin. */
  --term-bg:#0f1720; --term-fg:#e6edf3; --term-dim:#c9d4df; --term-muted:#8b98a5;
  --console-bg:#0b0e14; --console-bg-2:#141a26; --console-fg:#eef3fb;
  --console-dim:#c6d0e0; --console-muted:#9fb0c6;
}
:root[data-theme="dark"] {
  --bg:#060c1a; --surface:#101c31; --surface-2:#17253f; --surface-3:#1f3050;
  --border:#22304b; --border-strong:#52678c;
  --fg:#e8eefa; --fg-muted:#a6b6d2; --fg-faint:#74849f;
  /* ⚠️ `--on-primary` KOYU: beyaz metin acik mavi buton uzerinde yalnizca 3.15:1
     veriyordu (olculdu). Koyu metin 6.9:1 verir ve buton daha da net gorunur. */
  --primary:#5b9cff; --primary-hover:#84b5ff; --primary-soft:#16223a; --on-primary:#06101f;
  --ring:rgba(91,156,255,.45);
  --ok:#3ddb87; --ok-soft:#0d2b1e; --warn:#eeb04a; --warn-soft:#2c2210;
  --danger:#ff8080; --danger-soft:#2d1414; --info:#5b9cff; --info-soft:#16223a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 20px 48px rgba(0,0,0,.62);
  --shadow-primary:0 6px 18px rgba(91,156,255,.32);
  --uc-cpu:#5b9cff; --uc-ram:#a78bfa; --uc-disk:#3ddb87;
  color-scheme:dark;
}


* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--fg); font-family:var(--sans);
  /* ⚠️⚠️ PANELIN KENDI AMBIYANSI KALDIRILDI — TEK KAYNAK TEMANIN `.ax-ambient`i.
     Panel iki yumusak radial isigi `body` zemininde cizerdi; tema AYNI isi kendi
     katmaniyla yapiyor (`.ax-ambient` + :before/:after/i, uc bulanik isik).
     Ikisi birlikte calisinca isiklar UST USTE bindi ve kabuk yuzeylerinin
     `backdrop-filter` bulanikligi "camin arkasinda hicbir sey yok" gibi okundu
     (kullanici bulgusu). Kanvas artik DUZ token rengi; derinligi tema veriyor. */
  background:var(--bg);
  background-attachment:fixed;
  font-size:var(--t-lg); line-height:1.55; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05","ss01"; }
a { color:var(--primary); text-decoration:none; }
/* ⚠️⚠️ BUTON OLAN LINKLER MUAF: `a:hover` (0,1,1) tema butonunun renk kuralini
   (0,1,0) EZIYORDU — solid accent "Yönet" linkinde hover'da yazi `--primary-hover`
   (cobalt koyusu) olup COBALT ZEMINDE KAYBOLUYORDU (kullanici bulgusu). Metin
   linkleri icin davranis ayni kalir; buton gorunumlu linklerde renk TEMANIN
   hover kuralindan gelir. */
/* ⚠️ Ana sayfa (`dh-`) bağlantıları MUAF: koyu hero'daki çip/düğmelerin yazısı mavi zeminde
   kayboluyordu (kullanıcı bulgusu 2026-10-14) — her `dh-` bağlantısı kendi hover rengini taşır. */
a:hover:not(.ax-btn):not(.btn):not([class*="dh-"]):not([class*="sv-"]):not([class*="vl-"]):not([class*="vh-"]):not([class*="vd-"]) { color:var(--primary-hover); }
h1,h2,h3 { font-family:var(--display); font-weight:700; letter-spacing:-.025em; margin:0; }
h1 { font-size:var(--t-3xl); line-height:1.15; } h2 { font-size:var(--t-xl); font-weight:600; letter-spacing:-.01em; }
.muted { color:var(--fg-muted); } .faint { color:var(--fg-faint); font-size:var(--t-sm); }
.mono { font-family:var(--mono); font-size:var(--t-sm); font-feature-settings:"zero"; }
::selection { background:var(--blue-200); color:var(--blue-900); }

/* Focus — erişilebilirlik zemini */
/* ⚠️ INPUT/SELECT/TEXTAREA LISTEDEN CIKTI: metin kontrollerinde tarayici
   `:focus-visible`i FARE tiklamasinda da eslestirir -> 2px outline, asagidaki
   3px halka golgesinin USTUNE biniyor ve odak "cok kalin mavi" gorunuyordu
   (kullanici bulgusu). Metin kontrollerinin odak gostergesi TEK katman: hafif
   halka golgesi. Buton/link/summary icin outline KALIR (klavye erisilebilirligi
   — onlarda focus-visible yalniz klavyede tetiklenir, cakisma yok). */
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }

/* ---------------- Layout ---------------- */
.layout { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:20; }
.brand { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-6) var(--sp-6) var(--sp-5); font-family:var(--display);
  font-size:var(--t-2xl); font-weight:700; letter-spacing:-.02em; }
.brand .logo { width:30px; height:30px; border-radius:var(--radius-sm); flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
  box-shadow:0 3px 10px var(--ring); font-size:var(--t-xl); }
.sidebar nav { flex:1; padding:6px 12px; overflow-y:auto; }
.sidebar nav a { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); color:var(--fg-muted); font-weight:500; margin-bottom:1px;
  position:relative; transition:background .13s, color .13s; }
.sidebar nav a .ic { width:17px; height:17px; flex:none; opacity:.85; }
.sidebar nav a:hover { background:var(--surface-2); color:var(--fg); }
.sidebar nav a.active { background:var(--primary-soft); color:var(--primary); font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent); }
.sidebar nav a.active .ic { opacity:1; }
.sidebar nav a.active::before { content:""; position:absolute; left:-12px; top:6px; bottom:6px;
  width:3px; border-radius:0 3px 3px 0; background:linear-gradient(var(--blue-400),var(--blue-700)); }
.nav-sep { font-size:var(--t-xs); text-transform:uppercase; color:var(--fg-faint); font-weight:700;
  padding:16px 12px 8px; letter-spacing:.09em; }
.sidebar-foot { border-top:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:var(--sp-4); }
.user-chip { display:flex; align-items:center; gap:var(--sp-4); text-decoration:none; color:inherit;
  padding:8px 8px; margin:0 -8px 8px; border-radius:var(--radius-sm); border:1px solid transparent; }
.user-chip:hover { background:var(--surface-2); border-color:var(--border); }
.user-chip.active { background:var(--primary-soft); border-color:var(--primary); }
.avatar { width:34px; height:34px; border-radius:var(--radius-sm); flex:none; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; color:var(--primary); background:var(--primary-soft);
  border:1px solid var(--border); text-transform:uppercase; }
.user-chip .who { min-width:0; } .user-chip .email { font-size:var(--t-sm); color:var(--fg); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foot-actions { display:flex; gap:var(--sp-3); align-items:center; }
.foot-actions .logout { flex:1; font-size:var(--t-sm); color:var(--fg-muted); padding:6px 10px;
  border-radius:var(--radius-xs); text-align:center; border:1px solid var(--border); }
.foot-actions .logout:hover { background:var(--surface-2); color:var(--fg); }
.theme-toggle { width:34px; height:32px; border:1px solid var(--border); border-radius:var(--radius-xs); cursor:pointer;
  background:var(--surface-2); color:var(--fg-muted); font-size:var(--t-lg); display:grid; place-items:center; }
.theme-toggle:hover { color:var(--fg); border-color:var(--border-strong); }

.content { flex:1; padding:30px 36px; display:flex; flex-direction:column; align-items:center; }
/* Impersonation (kullanici olarak goruntuleme) uyari cubugu — amber, belirgin */
.imp-bar { width:100%; max-width:1320px; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; padding:10px 16px; margin-bottom:20px; border-radius:var(--radius-sm);
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  color:var(--fg); font-size:var(--t-md); line-height:1.5; }
.imp-bar strong { font-weight:600; }
.imp-bar svg.ic { width:15px; height:15px; vertical-align:-3px; }
.imp-bar .btn { background:var(--surface); flex:none; }
.content-inner { width:100%; max-width:1320px; }
@media (max-width:1100px){ .content{ padding:24px; } }

/* ---------------- Header ---------------- */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-5);
  margin-bottom:var(--sp-6); flex-wrap:wrap; }
.eyebrow { font-family:var(--display); font-size:var(--t-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; color:var(--primary); margin-bottom:5px; }

/* ---------------- Cards / grid ---------------- */
.grid { display:grid; gap:var(--sp-5); }
.cols-6 { grid-template-columns:repeat(6,1fr); } .cols-5 { grid-template-columns:repeat(5,1fr); } .cols-4 { grid-template-columns:repeat(4,1fr); } .cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1280px){ .cols-6, .cols-5 { grid-template-columns:repeat(3,1fr); } }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-6); box-shadow:var(--shadow-sm); }
.card > h2:first-child { margin-bottom:var(--sp-4); }
/* Tiklanabilir/link kartlar hafifce yukselir */
a.card, .card.hover { transition:transform .14s, box-shadow .14s, border-color .14s; }
a.card:hover, .card.hover:hover { transform:translateY(-2px); box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--primary) 34%,var(--border)); }

/* Stat kartlari — ikon çip + belirgin sayı (imza) */
.stat { position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--blue-400),var(--blue-600)); opacity:.85; }
.stat .head { display:inline-flex; align-items:center; gap:var(--sp-3); color:var(--fg-muted); font-size:var(--t-sm);
  font-weight:600; margin-bottom:14px; }
.stat .head .ic { width:34px; height:34px; padding:8px; flex:none; color:var(--primary);
  background:var(--primary-soft); border-radius:var(--radius-sm); box-sizing:border-box; }
.stat .num { font-family:var(--display); font-size:var(--t-4xl); font-weight:700; line-height:1;
  letter-spacing:-.035em; }
.stat .num small { font-size:var(--t-xl); color:var(--fg-faint); font-weight:500; letter-spacing:-.01em; }
.stat .sub { font-size:var(--t-sm); color:var(--fg-faint); margin-top:7px; }

/* Progress bar */
.bar { height:6px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden; margin-top:10px; }
.bar > span { display:block; height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--blue-400),var(--blue-600)); transition:width .4s ease; }
.bar.warn > span { background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 62%,transparent),var(--warn)); }
.bar.crit > span { background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 62%,transparent),var(--danger)); }

/* ---------------- Stat bloklari (zeminli panel + noktali kilavuz satirlari) ----
   ⭐ TEK KAYNAK: node detayindaki "Satış Kapasitesi" bloklarindan GLOBALE tasindi
   (kullanici onayli dil), havuz kartindaki ozet seridi de ayni sinifi kullanir.
   Kopyalamak yerine tasima: panelin bes kez uygulanan drift kurali. */
.stat-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); }
.stat-blk { min-width:0; display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--surface-2); padding:var(--sp-5);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:var(--radius-sm); }
.stat-blk--off { opacity:.85; }
.stat-k { font-size:var(--t-md); color:var(--fg-muted); font-weight:600; }
.stat-v { font-family:var(--display); font-size:var(--t-2xl); font-weight:700;
  letter-spacing:-.01em; line-height:1.2; overflow-wrap:anywhere; }
.stat-v small { font-size:var(--t-lg); color:var(--fg-muted); font-weight:600; }
.stat-rows { display:flex; flex-direction:column; margin-top:auto; }
/* Etiket ile deger arasi NOKTALI KILAVUZ (kullanici dersi: genis bosluk okunmuyor). */
.stat-row { display:flex; align-items:flex-end; gap:var(--sp-3);
  padding:var(--sp-2) 0; font-size:var(--t-lg); }
.stat-row::after { content:""; order:2; flex:1 1 auto; min-width:16px;
  margin-bottom:var(--sp-1);
  border-bottom:1px dotted color-mix(in srgb, var(--fg-faint) 55%, transparent); }
.stat-row > span { order:1; color:var(--fg-muted); flex:0 1 auto; min-width:0; }
.stat-row > b { order:3; font-weight:600; flex:none; }
@media (max-width:900px){ .stat-strip { grid-template-columns:1fr; } }

/* ---------------- Tables ---------------- */
/* ⭐ YUZEY TEMADAN (`.ax-card`): zemin/kenarlik/yaricap/golge artik temanin.
   Bu kural yalnizca HENUZ cevrilmemis tablolar icin FALLBACK olarak duruyor. */
.table-card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow-sm); }
.card-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:var(--sp-4);
  background:var(--surface-2); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:var(--t-xs); text-transform:uppercase; color:var(--fg-faint);
  padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--border);
  font-weight:700; letter-spacing:.06em; }
td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:var(--surface-2); }
tr.clickable { cursor:pointer; }

/* ---------------- Badges ---------------- */
.badge { display:inline-flex; align-items:center; gap:var(--sp-2); padding:2px var(--sp-3);
  border-radius:var(--radius-pill); font-size:var(--t-sm); font-weight:600;
  border:1px solid transparent; white-space:nowrap; line-height:1.6; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge.sm { padding:2px 8px; font-size:var(--t-xs); } .badge.sm::before { width:5px; height:5px; }
.badge.active,.badge.succeeded,.badge.assigned,.badge.poweredOn {
  color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 25%,transparent); }
.badge.provisioning,.badge.running,.badge.queued,.badge.reserved {
  color:var(--info); background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 25%,transparent); }
.badge.running::before,.badge.provisioning::before,.badge.queued::before { animation:blink 1.2s ease-in-out infinite; }
.badge.suspended,.badge.failed,.badge.poweredOff,.badge.terminated,.badge.terminating {
  color:var(--danger); background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
/* compensated = 'geri alindi' — nokta (.steps .dot.compensated) amber; rozet de amber
   olmali (aksi halde geri alinmis kurulumun TUM adimlari renksiz duz yazi cikiyordu)
   ⚠️ `rolled_back` BURAYA TASINDI: `failed` ile bayt-ayni kirmizi kurali paylasiyordu,
   oysa is-durum seridi (`_JOB_STATE_UI`) onu AMBER gosteriyor — ayni kavram ayni
   sayfada IKI RENK ve rozet duzeyinde "tamamlanamadi" ile "geri alindi" ayrimi
   siliniyordu. Hangisinin dogru oldugu bu dosyanin KENDI yazili kararinda: adim
   duzeyinde "geri alindi" amber. Sayfa disi etki KASITLI (jobs listesi, _job_card,
   vm_detail son islemler, .vc-last) — tek anlam = tek renk. */
.badge.quarantine,.badge.warn,.badge.compensated,.badge.rolled_back { color:var(--warn); background:var(--warn-soft);
  border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.badge.adopted,.badge.free,.badge.cancelled,.badge.pending,.badge.skipped {
  color:var(--fg-muted); background:var(--surface-3); border-color:var(--border); }
@keyframes blink { 50%{ opacity:.3; } }

/* ---------------- Buttons ----------------
   ⚠️⚠️ ESKI `.btn` AILESI SILINDI — butonlar TAMAMEN temanin alias katmanindan gelir
   (alias.css: taban/outline/primary/danger + hover/active + sm/lg, hepsi temanin
   derlenmis kurallarindan URETILIR). Eski kurallar "temaya devredildi" denip burada
   BIRAKILMISTI ve yariya kadar SIZIYORDU: alias tabani (0,1,0) ile ayni ozgullukteki
   eski `.btn` cakisan ozelliklerde alias'a yenilirken, `.btn.lg`/`.btn.sm` (0,2,0)
   padding/font-size'i temanin kontrol-yuksekligi mekanizmasinin USTUNE yaziyordu —
   butonlarin demodakinden farkli gorunmesinin koku buydu (kullanici bulgusu).
   Burada YALNIZ panele ozgu, temada karsiligi olmayan kurallar kalir. */
/* Ikon boyutu: temanin buton ikon token'i (`--_btn-icon`, sm/lg ile birlikte olceklenir).
   Sabit 16px yazilsaydi lg butonda ikon kucuk kalirdi. */
.btn svg { width:var(--_btn-icon, 16px); height:var(--_btn-icon, 16px); flex:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-row { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
/* Tablo satiri aksiyonlari: esit boy, saga hizali, dikey ortali */
.row-actions { display:flex; gap:var(--sp-4); justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.row-actions form { display:flex; }
.ds-flags { display:flex; align-items:center; gap:var(--sp-4); margin:0; }
.chk { display:inline-flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--t-md); color:var(--fg);
  font-weight:500; cursor:pointer; white-space:nowrap; }
.chk input { width:auto; margin:0; }

/* Toggle switch (VM Kurulumu / ISO Deposu) */
.switch { display:inline-flex; align-items:center; gap:var(--sp-4); cursor:pointer; user-select:none;
  font-size:var(--t-lg); font-weight:500; margin:0; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { width:44px; height:25px; border-radius:var(--radius-pill); background:var(--surface-3);
  border:1px solid var(--border-strong); position:relative; transition:.18s; flex:none; }
.switch .track::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:.18s; }
.switch input:checked + .track { background:var(--primary); border-color:var(--primary); }
.switch input:checked + .track::after { transform:translateX(19px); }
.switch input:focus-visible + .track { outline:2px solid var(--primary); outline-offset:2px; }

/* Disk yonetim karti */
.ds-card { margin-bottom:14px; }
.ds-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4); margin-bottom:10px; }
.ds-name { font-size:var(--t-lg); font-weight:600; }
.ds-manage { margin-top:18px; display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-6); flex-wrap:wrap; }
.ds-switches { display:flex; gap:var(--sp-7); flex-wrap:wrap; }
.ds-btns { display:flex; gap:var(--sp-4); align-items:center; }
/* ⚠️ `.btn.lg` KURALI YOK — boy temanin `--lg` govdesinden (alias.css) gelir; buraya
   padding yazmak temanin 44px kontrol yuksekligini ezerdi (yasandi, temizlendi). */
.btn.eq { min-width:118px; justify-content:center; }
.btn.eq svg.ic { width:16px; height:16px; }

/* ---------------- Forms ---------------- */
label { display:block; font-size:var(--t-sm); color:var(--fg-muted); font-weight:500; margin:14px 0 6px; }
/* GUCLU FORM ETIKETI — yukaridaki global `label` soluk ve kucuktur; tek girdili
   modallarda baslik kayboluyordu (kullanici bulgusu, iki ayri ekranda). TEK
   KAYNAK: rDNS bolge ayarlari + otomatik PTR + VM "Ag" sekmesi rDNS modali.
   ⚠️ KOPYALAMA YOK: yeni bir ekran ayni etiketi isterse SECICI LISTESINE eklenir. */
.rd-o-lbl { color:var(--fg); font-weight:600; font-size:var(--t-md); }
.rd-z-alan > label, .lbl-ic { display:flex; align-items:center;
  gap:var(--sp-2); }
/* ⚠️ Izgarada ÜST marj boşluk yer (sıfırlanır); tek başına duran etikette ise
   ÜST marj ŞART — global `label`ın 14px'ini kaybedince bir üstteki kutuya
   yapışıyordu (kullanıcı bulgusu). */
.rd-z-alan > label { margin:0 0 var(--sp-2); }
.lbl-ic { margin:var(--sp-5) 0 var(--sp-2); }
.rd-z-alan > label > svg.ic, .lbl-ic > svg.ic { width:15px; height:15px;
  color:var(--primary); flex:none; }
/* ⚠️⚠️ `background` KISAYOLU DEGIL `background-color` (2026-08-23, canli
   olculdu): kisayol `background-image`i de SIFIRLIYOR ve temanin `.ax-select`
   chevron GORSELINI siliyordu. Bu kural KATMANSIZ, tema kurali `@layer
   components` icinde -> katmanli kural katmansiza DAIMA kaybeder (panelin
   belgeli `.ax-switch` tuzaginin ikinci ayagi). Sonuc: panel genelindeki TUM
   `ax-select`lerde (jobs/alerts/ip-log/iso-browse/host-pools) `appearance:none`
   uygulaniyor ama yerine konacak ok da silindigi icin acilir menu DUZ BIR
   METIN KUTUSU gibi goruniyordu — ekran goruntusuyle dogrulandi. */
input,select,textarea { width:100%; padding:8px 12px; background-color:var(--surface); color:var(--fg);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:var(--t-md); font-family:inherit;
  transition:border-color .13s, box-shadow .13s, background .13s; }
input:hover,select:hover,textarea:hover { border-color:var(--fg-faint); }
/* ⚠️ Chevron'a yer acan dolgu koprusu: tema `.ax-select`e
   `padding-inline-end:var(--ax-space-8)` veriyor, ustteki KATMANSIZ `padding`
   kisayolu onu da eziyordu -> uzun secenek metni ok'un ALTINA giriyordu.
   Token TEMANIN KENDI olcegi (kopya sayi yazilmaz — ikisi ayrisamaz). */
select.ax-select { padding-inline-end:var(--ax-space-8); }
/* ⚠️ BURADA DA KISAYOL DEGIL: `background` odakta chevron gorselini yeniden
   silerdi (select'e tiklayinca ok kaybolur, odaktan cikinca geri gelirdi). */
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary);
  background-color:var(--surface); box-shadow:0 0 0 3px var(--ring); }
textarea.mono,input.mono { font-family:var(--mono); font-size:var(--t-md); }
.form-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
/* ⚠️ `display:*` tarayicinin `[hidden]{display:none}` kuralini EZER — bu panelde
   tekrar eden tuzak (`.snap-sched-detail`, `.kmodal-overlay`, `.iso-prog`,
   `.pick-card`, `.cdd-opt`, `.os-warn`, `.ym-plan-opt` ayni sekilde isirdi).
   `.form-row`da yasandi: kurulum ekraninda havuz satiri `hidden` yapiliyor ama
   HIC gizlenmiyordu. KURAL: `display` veren her sinif `[hidden]`i geri vermeli. */
.form-row[hidden] { display:none; }
/* Iki alanli satirlar tam genisligi ESIT boler (kullanici istegi).
   ⚠️ Satir ici `style="grid-template-columns:1fr 1fr"` YERINE sinif:
   panelde ayni ihtiyac uc yerde tekrarlaniyordu. */
.form-row--2 { grid-template-columns:repeat(2,1fr); }
/* ⚠️ `.form-row` panelde UC kolon: tek alanlik bir satir onun 1/3'unde
   biterdi. Aciklama alani tam genisligi kullanmali (kullanici istegi:
   "aciklama en sonda olsun"). */
.form-row--1 { grid-template-columns:1fr; }
details > summary { list-style:none; display:inline-flex; }
details > summary::-webkit-details-marker { display:none; }

/* ---------------- Notices ---------------- */
.err,.ok,.info-box { padding:12px 16px; border-radius:var(--radius-sm); font-size:var(--t-md); margin:12px 0;
  border:1px solid transparent; display:flex; gap:var(--sp-4); align-items:flex-start; }
.err { background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 30%,transparent); color:var(--danger); }
.ok { background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 30%,transparent); color:var(--ok); }
.info-box { background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 25%,transparent); color:var(--fg); }
.err .ic,.ok .ic,.info-box .ic { width:18px; height:18px; flex:none; margin-top:1px; }
.msg { font-size:var(--t-sm); color:var(--warn); margin-top:4px; }
/* ⚠️ `.msg-err` HIC TANIMLI DEGILDI: sablon sinifi basiyor, `_vm_row_response` tonu
   dogru turetiyor, ama CSS'te kural olmadigi icin HATA ile BILGI mesaji AYNI amber
   renkteydi — ton ayrimi fiilen yoktu. (`msg_kind` dali zaten bir kez OLU KOD olarak
   yakalanmisti; bu onun CSS ayagi.)
   ⚠️ `.msg`ten SONRA yazilir: ikisi de (0,1,0) ozgullukte, kazanan DOSYA SIRASI.
   ⚠️ `.msg-ok` BILINCLI OLARAK EKLENMEDI (yesil yapilmadi): o siniftaki metinler
      "Sunucu durduruluyor…" ve "Değişiklik yok" — yesil "tamamlandi" iddiasi olurdu.
      Bilgi mesaji notr amber kalir. */
.msg-err { color:var(--danger); }

/* ---------------- Detay: kv, steps ---------------- */
.kv { display:grid; grid-template-columns:150px 1fr; gap:var(--sp-3) var(--sp-6); font-size:var(--t-md); }
/* ⚠️ `min-width:0; overflow-wrap` BURAYA TASINDI: eskiden `jd-kv2` yorum blogunun
   ICINDE (satir 445) duruyordu ama GLOBAL bir kuraldi. `.kv`nin 7 dis tuketicisi var
   (node_detail x4, profil, settings, user_detail); "jd-kv2 blogunu sil" denince bu
   satir birlikte gider ve o sayfalar sarma korumasini SESSIZCE kaybederdi.
   CLAUDE.md'nin kurali: "iki capa arasini degistirmeden once ARADA NE OLDUGUNU LISTELE". */
.kv dt { color:var(--fg-muted); }
.kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }

/* --------- Etiket/deger KUTUCUKLARI (`info-*`) — vm_detail'den TASINDI ---------
   ⚠️ Artik IKI tuketici var: vm_detail "Sunucu bilgileri" + islem detayi "Detay".
   Panelin bes kez uygulanmis kurali KOPYA DEGIL TEK KAYNAK (`.cbtn`, `.hb-*`,
   `.pager`, `.filter-bar`, `.count-chip` hepsi ayni gerekceyle globale alindi).
   ⚠️ TASIMAK = TOKEN'A BAGLAMAK: olculdu, style.css'te ham `font-size:<px>` 0 adet
   (sablon-ici <style> bloklarinda 127 adet — kullanicinin bilincli erteledigi bolge).
   Kaymalarin HEPSI <=1px, tema turunun kabul ettigi esik:
     11px -> --t-xs (0) · 14px -> --t-lg (0) · gap 6px -> --sp-2 (0)
     13.5px -> --t-md (-0.5; 13.5 OLCEK DISI, bu sayfadan bir kez zaten temizlendi)
     12px 15px -> --sp-4 --sp-5 (+1 yatay) · gap 5px -> --sp-2 (+1)
     radius 11px -> --radius-sm (-1; 11 MIKRO DEGIL, <=6px istisnasina girmez)
   ⚠️ `.info-grid` TASINMADI: vm_detail'in `1fr 1fr` + `gap:10px`i orada KALIR (sabit
      17 hucre, elle yazilmis zengin markup). Islem detayi kendi `auto-fill` izgarasini
      yazar (3..25 alan, dongu). Boylece tek 2px'lik sapma (`gap:10px`) HIC olusmuyor.
   ⚠️⚠️ `.info-lbl > svg.ic` SART: eski kural `.info-lbl svg` (0,1,1) global `svg.ic`
      (0,1,1) ile BERABEREYDI ve yalnizca sayfa-ici <style> oldugu icin (dosyada SONRA)
      kazaniyordu. Buraya, `svg.ic`in ~550 satir ONCESINE tasininca KAYBEDER ve
      vm_detail'in 17 ikonu 13px -> 16px olur. Panelin uc kez isirdigi tuzak. */
.info-cell { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0;
  padding:var(--sp-4) var(--sp-5); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2);
  transition:border-color .14s; }
.info-cell:hover { border-color:var(--border-strong); }
.info-cell.wide { grid-column:1 / -1; }
.info-lbl { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); color:var(--fg-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; }
.info-lbl > svg.ic { width:13px; height:13px; color:var(--primary); flex:none; }
/* ⚠️ `overflow-wrap` EKLENDI: tek tuketici bunu `.kv dd`den aliyordu. Islem detayinda
   `.kv` kalkinca 36 karakterlik `instance_uuid` ve datastore adi `overflow:hidden`
   altinda GORUNMEDEN kirpilirdi (sessiz veri kaybi). `overflow:hidden` KALIYOR:
   kirilamayan uzun bir belirtecte gercek tasmayi o engelliyor. */
.info-val { font-size:var(--t-lg); overflow:hidden; text-overflow:ellipsis;
  overflow-wrap:anywhere; }
.info-val.mono { font-size:var(--t-md); }
.role { font-family:var(--display); font-size:var(--t-xs); text-transform:uppercase; padding:2px 8px;
  border-radius:5px; background:var(--surface-3); color:var(--fg-muted); font-weight:700;
  letter-spacing:.06em; width:fit-content; }
.role-admin { background:var(--primary-soft); color:var(--primary); }
/* Amber uyari seridi — vm_detail'de dogmustu, ISLEM detayi da ayni uyarilari
   (sifre/disk/SSH uygulanamadi) gosterdigi icin GLOBAL'e alindi (tek kaynak). */
.vd-warn { display:flex; gap:var(--sp-4); align-items:flex-start; margin-bottom:12px; padding:12px 16px;
  border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--warn) 9%, var(--surface)); font-size:var(--t-md); line-height:1.5; }
.vd-warn > svg.ic { width:18px; height:18px; color:var(--warn); flex:none; margin-top:1px; }

/* ---------------- Islem (job) detayi ---------------- */
.jd-sub { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:7px;
  font-size:var(--t-md); }
.jd-sub .mono { font-size:var(--t-sm); }
/* Baslik altindaki baglam parcalari 'cip' olarak — duz metin yigini okunmuyordu */
.jd-chip { display:inline-flex; align-items:center; gap:var(--sp-2); padding:4px 8px;
  border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border);
  color:var(--fg-muted); font-size:var(--t-sm); line-height:1.6; }
a.jd-chip { text-decoration:none; }
a.jd-chip:hover { border-color:var(--border-strong); color:var(--fg); }

/* ⚠️ TON SINIFLARI 'jd-' ONEKLI: cippak 'ok'/'err' GLOBAL uyari-kutusu sinifidir
   (.err,.ok,.info-box{padding:12px 16px;display:flex}) — 'jd-bar ok' yazilinca bar
   o padding'i miras alip height:6px ile icerik yuksekligini SIFIRA dusuruyordu
   (kullanici bulgusu: 'bar bos gorunuyor'). Tek kelimelik sinif adi KULLANMA.
   DURUM SERIDI — sayfanin odak noktasi: "ne oldu?" tek bakista.
   Sol kenarda durum rengi seridi + renkli ikon cipi + baslik/alt satir. */
/* ⭐ Ton ARTIK TEK DEGISKENDEN (`--tone`) — panelin `.vs`/`.vc` dili. Eskiden 8 ayri
   kural tonu YALNIZ 2 yuzeye (4px sol kenar + cip) dagitiyordu; simdi kosedan yayilan
   yikama + cip + ray ucu de ayni degiskenden beslenir, yani ayrisamazlar.
   ⚠️ RAY `border-left` DEGIL `inset` GOLGE: dar bir seride 4px kenarlik + 14px yaricap
   gonye uretiyor (`.vc`de bu yuzden terk edildi; golge kutunun KENDI radius'unu izler).
   ⚠️ GOLGELER VIRGULLE ZINCIRLENIR -> ezen her kuralda IKISI de yeniden yazilmali,
   yoksa ray kaybolur (`.vc:hover`da yasandi). */
.jd-state { --tone:var(--fg-faint); position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:var(--sp-5); padding:18px 20px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-sm), inset 4px 0 0 var(--tone);
  margin-bottom:16px; }
/* Kosedan yayilan yumusak ton yikamasi — `.vs` imzasi. */
.jd-state::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 150% at 100% 0%,
    color-mix(in srgb, var(--tone) 13%, transparent), transparent 62%); }
.jd-state-x { position:relative; }
.jd-state-ic { position:relative; width:44px; height:44px; flex:none;
  border-radius:var(--radius-sm); display:flex; align-items:center;
  justify-content:center; background:color-mix(in srgb, var(--tone) 15%, transparent);
  color:var(--tone); }
.jd-state-ic > svg.ic { width:22px; height:22px; }
.jd-state-t { font-family:var(--display); font-size:var(--t-2xl); font-weight:600;
  letter-spacing:-.01em; color:var(--tone); }
/* "9/9 adım · 1 dk 10 sn" sayfanin TASIDIGI VERI'ydi ama EN KUCUK, EN SOLUK metnindi. */
.jd-state-sub { color:var(--fg-muted); font-size:var(--t-lg); margin-top:3px;
  font-variant-numeric:tabular-nums; }
/* Serit alt kenarina oturan pay cubugu (`.vs-bar` imzasi) — YALNIZ canli iste. */
.jd-state-bar { position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--surface-3); }
.jd-state-bar > span { display:block; height:100%; background:var(--tone);
  transition:width .4s ease; }
/* ⭐ TONLAR TEMANIN CANLI 500'LERI (kullanici: "yeşil kırmızı temaya uygun değil"
   turunun devami): serit/ikon cipi/ilerleme DEKOR ogesidir — AA metin token'lari
   (--ok/--danger) acik zeminde donuk kalir, `.vs` canli palet karariyla ayni kaynak.
   Baslik metni t-2xl (BUYUK metin, esik 3:1) — 500'ler olculdu: 3.4-5.8:1. */
.jd-state.s-ok   { --tone:var(--ax-success-500); }
.jd-state.s-err  { --tone:var(--ax-danger-500); }
.jd-state.s-warn { --tone:var(--ax-warning-500); }
.jd-state.s-info { --tone:var(--ax-accent); }
/* ⚠️ `mut` (iptal) icin kural HIC YOKTU: sablon `jd-mut` basiyor, taban degerlere
   DUSEREK kazara dogru gorunuyordu — taban ray rengi degisse sessizce kayardi. */
.jd-state.s-mut  { --tone:var(--ax-text-muted); }
/* ⚠️ DONME TONA DEGIL DURUMA BAGLI: `queued` ve `running` AYNI `info` tonunu
   paylasiyor -> "Sırada bekliyor" derken SAAT ikonu donuyordu (hareket = "ilerliyor"
   sinyali; kuyrukta hicbir sey ilerlemiyor). Sunucu artik acik `spin` bayragi tasiyor. */
.jd-state.jd-spin .jd-state-ic > svg.ic { animation:spin 1.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .jd-state.jd-spin .jd-state-ic > svg.ic { animation:none; } }

/* ⭐ TUM KARTLAR TAM GENISLIK, DIKEY YIGIN (kullanici istegi). Asimetrik iki kolon
   (`.jd-grid`) kaldirildi: yan yana iki kart, ayni sayfadaki tam genislikteki
   "Sonuç"/"Değişenler" kartlariyla IKI FARKLI kart genisligi uretiyordu.
   ⚠️ Bosluk `gap`ten gelir — kartlarin coğu kosullu basildigi icin elle `margin`
   son kartta artik bosluk birakirdi.
   ⚠️ `.cols-2` GLOBALINE (5+ sayfa) hic dokunulmadi. */
.jd-stack { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }
/* "Sonuç" notu: kutucuk icinde ama TEK serbest cumle — etiketli alanlardan biraz
   daha buyuk ve satir araligi acik (paragraf gibi okunur).
   ⚠️ SECICI OZGULLUGU: yogunluk kurali `.jd-fgrid > .info-cell > .info-val` (0,3,0)
   ile yaziyi `--t-md`ye cekiyor; bu kural onu EZMEK zorunda -> `.info-val.jd-note`
   (0,4,0). Tek sinifla yazilsaydi kaynak SIRASINA bagli kalirdi (panelin `.steps.jd-tl`
   ve `.traf-chart` derslerinin ayni sinifi). */
.jd-note { margin:0; }
.jd-fgrid > .info-cell > .info-val.jd-note { font-size:var(--t-lg); line-height:1.55; }
.jd-sm { font-size:var(--t-sm); margin-top:5px; }
.jd-mt8 { margin-top:8px; }
.jd-mt10 { margin-top:10px; }
/* ⭐ "Detay" karti: ALAN BASINA KUTUCUK (`.info-cell`), `dl.kv` merdiveni yerine.
   ⚠️ SIKAYETIN OLCULEBILIR KOKU: `.kv { gap:var(--sp-3) var(--sp-6) }` — sutun araligi
   ETIKET->DEGER ile DEGER->SONRAKI-ETIKET arasinda BIREBIR AYNI (20px). Yakinlik
   gruplamasi yok, cift siniri gorunmuyor; ustelik 150px sabit etiket kolonu
   4 karakterlik "vCPU" icin ~120px olu bosluk birakiyordu.
   ⚠️ SABIT KOLON OLAMAZ: 23 is turunun 19'unda >=10 alan var (ort. 17, max 25) ama
   3 turde (noop, template_deploy, template_ova_refresh) `vm_id` NULL oldugu icin
   Sunucu bolumu HIC basilmaz ve kart 3-5 kutuya duser. `1fr 1fr` uc kutuda delik,
   25 kutuda 13 satirlik merdiven yapardi.
   ⚠️ `auto-fit` DEGIL `auto-fill`: auto-fit uc kutuyu tum genislige GERER.
   ⚠️ OLCU: 1320px `.content-inner` - 2x--sp-6 - 2x1px = 1278px;
      floor((1278+8)/(260+8)) = 4 kolon -> hucre 313px -> metin alani 279px.
      36 karakterlik mono `instance_uuid` (~259px) SIGAR; 240px verilseydi 5 kolon /
      215px olur ve uuid bolunurdu. KALABALIK gelirse DEGISTIRILECEK TEK SAYI budur
      (300px -> 3 kolon, daha ferah). */
.jd-fgrid { display:grid; gap:var(--sp-2);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
/* ⭐ YOGUNLUK BAGLAMA BAGLI, BILESENE DEGIL (kullanici: "kutucuklar cok fazla buyuk
   olmus, ekranda cok yer kapliyorlar").
   ⚠️ `.info-cell` GLOBAL ve vm_detail'in ONAYLANMIS "Sunucu bilgileri" karti da onu
   kullaniyor — bileseni kucultmek orayi da degistirirdi. Seciciyi izgaraya baglamak
   (0,2,0 > 0,1,0) tek kaynagi korur ama yogunlugu YALNIZ bu sayfada degistirir.
   OLCU: dolgu 12/16 -> 8/12, etiket-deger araligi 6 -> 4, deger 14px -> 13px
   => kutu yuksekligi ~63px -> ~50px (%21). Izgara araligi 8 -> 6, kolon 260 -> 220
   => 1278px'te 4 kolon yerine 5 kolon (hucre 249px, metin ~225px).
   20 alanli bir iste toplam yukseklik ~355px -> ~230px. */
.jd-fgrid > .info-cell { gap:var(--sp-1); padding:var(--sp-3) var(--sp-4); }
.jd-fgrid > .info-cell > .info-val { font-size:var(--t-md); }
/* ORTA UZUNLUKTAKI deger icin IKI kolon: tek kolona sigmayan her degeri TAM SATIRA
   cikarmak (`wide`) 40 karakterlik bir deger icin 1278px'lik bos kutu birakiyordu.
   ~225px metin alani ~34 karakter alir; iki kolon (~480px) ~73 karakter. */
.jd-fgrid > .info-cell.w2 { grid-column:span 2; }
/* ⚠️ Grid'de explicit kolon sayisindan fazla `span` istenirse tarayici IMPLICIT kolon
   uretir ve kutu tasar — dar ekranda geri alinmali. */
@media (max-width:520px){ .jd-fgrid > .info-cell.w2 { grid-column:auto; } }

.jd-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); }
/* ⚠️ h2 FLEX SATIR (tema turu bulgusu): temanin Tailwind preflight'i svg'yi
   `display:block` yapar ve ikon BASLIGIN USTUNE ayri satira dusuyordu —
   vm_detail'de ayni bulgu ("Son işlemler yazısı iconu kaymış") flex baslikla
   cozulmustu (`.vd-tbl-title` deseni), ayni cozum. */
.jd-head h2 { margin:0 0 10px; display:flex; align-items:center; gap:var(--sp-2); }
/* ⚠️ Secici `svg.ic` ICERIR: yoksa global `svg.ic` (0,1,1) ayni ozgullukte kazanir
   (panelin uc kez isiran tuzagi). Flex kapta `flex:none` SART (dar kartta EZILIR). */
.jd-head h2 > svg.ic { width:17px; height:17px; color:var(--fg-faint); flex:none; }
.jd-chip > svg.ic { width:13px; height:13px; }
/* Islem detayi AKSIYONLARI: gezinme SEGMENTLI grup (`.vc-btns` — VM kartinda
   onaylanmis desen, yeniden kullaniliyor), eylemler AYRI ve tonlu.
   ⚠️ Dar ekranda sarilir; segment grubu KENDI ICINDE bolunmez (`flex:none`). */
.jd-acts { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  justify-content:flex-end; }
.jd-acts > form { margin:0; }
/* ⚠️ BUTONLAR HER ZAMAN SAG USTTE (kullanici bulgusu: 4. buton gelince grup alt
   satira inip SOLA yasliniyordu — `.page-head` sariyor ve tek kalan oge
   `justify-content:space-between` ile sola gidiyor).
   ⚠️ Ilk cozumum flex ayarlariydi (`min-width:0` + `flex:none` + `margin-left:auto`);
      IZGARAYA gecince gereksizlestiler ve `flex:1 1 320px` izgarada ETKISIZ olurdu —
      yerlerini asagidaki acik `grid-column`/`grid-row` atamalari aldi. Butonlarin sag
      ustte kalma GARANTISI artik daha guclu: sarma ihtimali YOK, satiri izgara veriyor. */
/* ⭐ BAGLAM CIPLERI KENDI TAM GENISLIKLI SATIRINDA.
   ⚠️ ONCEKI TUR YANLISTI: cipleri butonlarla AYNI satirda tutup UUID'yi kirpmistim ->
      kullanici "yarim gorunuyor" dedi, HAKLI: UUID kopyalanan kesin bir kimliktir,
      yarim hali ISE YARAMAZ. OLCUM: cipler ~914px + butonlar ~564px = 1478px > 1320px
      kapsayici, yani ayni satirda MATEMATIKSEL olarak sigmiyorlardi.
   Cozum yerlesim: `.page-head`in flex'i IZGARAYA cevrilir; baslik + butonlar 1. satir,
   cipler `1 / -1` ile 2. satirin TAMAMI -> 1320px, ~400px pay kalir.
   ⚠️ `.page-head` GLOBALI (25 sablon) DEGISMEZ — ezme yalniz `.jd-ph` kapsaminda. */
.jd-ph { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  column-gap:var(--sp-5); row-gap:var(--sp-3); }
.jd-ph > .jd-title { grid-column:1; grid-row:1; min-width:0; }
.jd-ph > .jd-acts { grid-column:2; grid-row:1; justify-self:end; }
.jd-ph > .jd-sub { grid-column:1 / -1; grid-row:2; margin-top:0;
  flex-wrap:nowrap; min-width:0; }
/* Hicbir cip kuculmez — UUID dahil TAM gorunur... */
.jd-ph > .jd-sub > * { flex:none; }
/* ...KIRPILACAK TEK OGE sunucu adi cipi: `vm.label` MUSTERININ verdigi 64 karaktere
   kadar serbest metin, yani satiri tasirabilecek TEK degisken. Tam degeri `title`da ve
   bir tik oteki sunucu sayfasinda; UUID'nin boyle bir yedegi YOK. */
.jd-ph > .jd-sub > .jd-vm { flex:0 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* Dar ekranda tek satir zorlamasi yatay kaydirma uretir -> sarmaya geri doner.
   Esik: cipler ~914px + 2x32px sayfa dolgusu ~= 980px; 1100 guvenli pay birakir. */
@media (max-width:1100px){ .jd-ph > .jd-sub { flex-wrap:wrap; } }
@media (max-width:820px){
  .jd-ph { grid-template-columns:minmax(0,1fr); }
  .jd-ph > .jd-acts { grid-column:1; grid-row:auto; justify-self:start; }
  .jd-ph > .jd-sub { grid-row:auto; }
}
.jd-nav { flex:none; display:inline-flex; gap:var(--ax-space-2); }
/* ⚠️⚠️ ESKI `.vcb` EZMELERI KALDIRILDI: `.vcb` TABAN kurallari VM karti tema turunda
   silinmisti ve buradaki linkler ciplak kalip STILSIZ gorunuyordu (kullanici bulgusu:
   "sunucu / tüm işlemler / aynı tür butonları bozulmuş"). Gezinme artik temanin
   `ax-btn--secondary --sm` butonu — vm_detail'in geri butonuyla ayni dil.
   ⚠️ Secondary temada SEFFAF zeminli; kanvas mavi dokulu -> surface zemin
   (vm_detail'deki `.page-head > .ax-btn--secondary` ezmesiyle ayni gerekce). */
.jd-acts .ax-btn--secondary { background:var(--surface); }
/* ⚠️ IKON BOYUTU: secici `svg.ic` ICERMELI — global `svg.ic` (0,1,1) aksi halde ayni
   ozgullukte kazanir (panelin uc kez isirdigi tuzak). Buton inline-flex oldugu icin
   SVG bir FLEX OGESIDIR: `flex:none` olmadan dar butonda EZILIR.
   ⚠️ `currentColor`: ton butonun kendisinden gelir, ayri renk YOK. */
.jd-acts .btn > svg.ic, .jd-acts .ax-btn > svg.ic { width:14px; height:14px; flex:none; }
.jd-bar { height:6px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden;
  margin:0 0 16px; }
.jd-bar > span { display:block; height:100%; border-radius:var(--radius-pill); background:var(--primary);
  transition:width .4s ease; }
.jd-bar.jd-ok > span { background:var(--ax-success-500); }
.jd-bar.jd-err > span { background:var(--ax-danger-500); }
.jd-bar.jd-warn > span { background:var(--ax-warning-500); }
/* ⚠️ Iptal edilen isde cubuk MAVI kaliyordu ("devam ediyor" okunur) — `mut` tonu
   filtrenin disindaydi. */
.jd-bar.jd-mut > span { background:var(--ax-text-muted); }
.jd-bar.sm { height:4px; margin:6px 0 3px; max-width:260px; }

/* ZAMAN CIZELGESI — adimlar sirali oldugu icin dogal metafor; noktalari birlestiren
   cizgi + SURE CUBUGU (en uzun adima oranli). Bu sayfanin imza ogesi: "zamani hangi
   adim yedi" sorusu bir bakista cevaplanir (or. 56sn'lik kurulumun 40sn'i VERIFY_IP). */
/* ⚠️ SECICI OZGULLUGU: `.steps li` dosyada DAHA SONRA geldigi icin ayni ozgullukteki
   (0,1,1) `.jd-tl > li` kaybediyordu -> li flex kaliyor, duzen bozuluyordu. Bu yuzden
   TUM zaman-cizelgesi ezmeleri `.steps.jd-tl` (0,2,1) ile yazilir — kaynak sirasindan
   BAGIMSIZ kazanir. (Ayni sinif profil_2fa.html'de de kullaniliyor, ona dokunulmamali.) */
.steps.jd-tl { padding:2px 0 0; }
.steps.jd-tl > li { display:block; position:relative; padding:0 0 18px; border-bottom:none; }
.steps.jd-tl > li:last-child { padding-bottom:0; }
.steps.jd-tl > li::before { content:""; position:absolute; left:4px; top:20px; bottom:2px;
  width:2px; background:var(--border); }
.steps.jd-tl > li:last-child::before { display:none; }
/* Nokta ARTIK AKISTA (mutlak degil): satirin flex'i onu metinle otomatik hizalar —
   sabit bir `top` degeri rozet/metin yuksekligi degisince kayiyordu (kullanici bulgusu). */
.steps.jd-tl .dot { margin:0; }
.jd-tl-name { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.jd-tl-name > strong { font-size:var(--t-md); }
/* Nokta(10px) + gap(8px) — alt icerik METNIN altina hizalanir */
.jd-tl-body { padding-left:18px; }
.jd-dur { display:flex; align-items:center; gap:var(--sp-3); margin-top:7px; max-width:320px; }
.jd-dur-track { flex:1; height:5px; border-radius:var(--radius-pill); background:var(--surface-3); }
.jd-dur-fill { display:block; height:100%; border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--primary) 55%,transparent); }
.jd-dur-fill.slow { background:var(--warn); }
.jd-dur-t { font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-muted);
  min-width:56px; text-align:right; }

/* ⭐ Etiketin KENDISI ayirici: `<hr class="jd-sep">` kalkti (iki eleman -> bir).
   Bolum basligi sagina uzanan hairline, "6 kez ayni jest" monotonlugunu yeni chrome
   EKLEMEDEN kirar. */
.jd-eyebrow { display:flex; align-items:center; gap:var(--sp-3);
  font-family:var(--display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fg-faint);
  margin:18px 0 10px; }
/* ⚠️ `:first-of-type` KULLANILAMAZ: eleman TIPINE bakar ve `.jd-head` de bir `div`,
   yani `.jd-head`li kartin ilk eyebrow'u hicbir zaman "ilk div" olmaz -> kardes secici.
   ⚠️ `:first-child` (eleman tipine BAKMAZ) basliksiz kartlar icin SART: "Değişenler" ve
   "Sonuç" kartlarinda `.jd-head` yok, eyebrow DOGRUDAN ilk cocuk. Eski kural bunu
   `.jd-lead` ile cozuyordu; o sinif tam-genislik yiginda kalkinca kural OKSUZ kaldi ve
   iki kartin tepesinde 18px fazladan bosluk birakiyordu (test yakaladi). */
.jd-head + .jd-eyebrow, .card > .jd-eyebrow:first-child { margin-top:0; }
.jd-eyebrow::after { content:""; flex:1; height:1px; background:var(--border); }
.jd-eyebrow-note { text-transform:none; letter-spacing:0; font-weight:500;
  color:var(--warn); }
/* ⚠️ ONEKLI: tek kelimelik `ok` GLOBAL uyari-kutusu sinifidir (padding+display:flex)
   ve eskiden burada 6 deklarasyon SIRF onu geri almak icin duruyordu. */
.jd-eyebrow-note.jd-ok { color:var(--ok); }

/* Katlanan bolum (`Sunucu`, donmus DEGILSE) — `.jd-tech` kalibinin aynisi. */
.jd-fold { margin:18px 0 0; }
.jd-fold > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:var(--sp-3); }
.jd-fold > summary::-webkit-details-marker { display:none; }
.jd-fold > summary > .jd-eyebrow { margin:0; flex:none; }
.jd-fold > summary::after { content:""; width:6px; height:6px; flex:none;
  border-right:2px solid var(--fg-faint); border-bottom:2px solid var(--fg-faint);
  transform:rotate(-45deg); transition:transform .18s ease; margin-left:auto; }
.jd-fold[open] > summary::after { transform:rotate(45deg); }
.jd-fold > summary:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
.jd-fold > .jd-fgrid { margin-top:var(--sp-4); }
@media (prefers-reduced-motion:reduce){ .jd-fold > summary::after { transition:none; } }

/* "Bu islemde degisenler" — eski deger → yeni deger */
/* ⭐ "Bu islemde degisenler" ARTIK AYNI KUTUCUK DILINI konusuyor (`.jd-fgrid` +
   `.info-cell`): eski hali kesik cizgili duz satir listesiydi ve ayni sayfada iki
   farkli veri sunum dili vardi. Eski `.jd-chg`/`.jd-chg > li`/`.jd-chg-l` kalkti
   (etiketi artik `.info-lbl` tasiyor). */
.jd-chg-v { display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap;
  min-width:0; }
/* ⚠️ UZUN DEGERDE ALT ALTA: IP listesi degisiminde eski ve yeni birer 772 KARAKTER
   olabiliyor (olculdu) — yan yana basmak okunmaz bir duvar yapiyordu. Genis kutuda
   eski ustte (uzeri cizili), yeni altta ve ok SATIR BASINDA. */
.info-cell.wide > .jd-chg-v { flex-direction:column; align-items:stretch; gap:var(--sp-1); }
.jd-chg-b { color:var(--fg-faint); text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--fg-faint) 60%,transparent);
  min-width:0; overflow-wrap:anywhere; }
.jd-chg-ar { color:var(--fg-faint); flex:none; }
.jd-chg-a { color:var(--ok); font-weight:600; min-width:0; overflow-wrap:anywhere; }
/* Alt alta dizilimde ok, yeni degerin ONUNE gecer (tek satirda ise aradadir). */
.info-cell.wide > .jd-chg-v > .jd-chg-ar { display:none; }
.info-cell.wide > .jd-chg-v > .jd-chg-a::before { content:"→ "; color:var(--fg-faint);
  font-weight:400; }
.jd-raw { font-size:var(--t-xs); opacity:.5; }

/* Havuz yerlesim gunlugu: hangi sunucu neden elendi (ADMIN-ONLY — ESXi/disk adi).
   ⚠️ Ton sinifi `good`/`skip`: tek kelimelik `ok`/`err`/`warn` GLOBAL uyari-kutusu
   sinifidir (padding+display tasir), bilesen modifier'i olarak kullanilamaz.
   ⚠️ Sira NUMARALI (`<ol>`): denenme sirasi bilginin kendisi — CPU yuku en dusukten
   baslanir, yani "3. sirada secildi" = ondeki ikisi elendi demektir. */
.jd-place { list-style:none; counter-reset:jdp; margin:0 0 14px; padding:0; }
.jd-place > li { display:flex; align-items:baseline; gap:var(--sp-3);
  padding:7px 0 7px 26px; position:relative; font-size:var(--t-md);
  border-bottom:1px dashed var(--border); }
.jd-place > li:last-child { border-bottom:none; }
.jd-place > li::before { counter-increment:jdp; content:counter(jdp);
  position:absolute; left:0; top:7px; width:18px; height:18px; border-radius:50%;
  font-size:var(--t-xs); font-weight:700; display:flex; align-items:center;
  justify-content:center; background:var(--surface-3); color:var(--fg-faint); }
.jd-place > li.good::before { background:var(--ok-soft); color:var(--ok); }
.jd-place-n { font-weight:600; min-width:132px; color:var(--fg-muted); }
.jd-place > li.good .jd-place-n { color:var(--ok); }
.jd-place-w { color:var(--fg-faint); }
.jd-place > li.good .jd-place-w { color:var(--fg-muted); }
@media (max-width:640px) {
  .jd-place > li { flex-direction:column; gap:2px; }
  .jd-place-n { min-width:0; }
}

/* 'Teknik detay' GERCEK bir acilir buton (kullanici: "buton mu belli degil, duz yazi") */
.jd-tech { margin-top:16px; }
.jd-tech > summary { list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:var(--sp-3); padding:8px 12px; font-size:var(--t-sm);
  font-weight:600; color:var(--fg-muted); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:background .14s, color .14s, border-color .14s; }
.jd-tech > summary::-webkit-details-marker { display:none; }
.jd-tech > summary::before { content:""; width:6px; height:6px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .18s; margin-left:1px; }
.jd-tech[open] > summary::before { transform:rotate(45deg); }
.jd-tech > summary:hover { color:var(--fg); background:var(--surface-3);
  border-color:var(--border-strong); }
.jd-tech > summary:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
/* ⚠️ ZEMIN CAKISMASI ONLENDI: eski kural panele `--surface-2` veriyordu ve `.info-cell`
   de `--surface-2` tasidigi icin kutucuklar panelin icinde GORUNMEZ olurdu. Panel
   zemini/kenarligi/dolgusu KALKTI — hucreler yuzeyi kendileri tasiyor.
   NOT: eski `.jd-tech .kv` (0,2,0) `.jd-kv2`yi (0,1,0) EZIYORDU (media query ozgulluk
   EKLEMEZ), yani "Teknik detay" bugune dek hep tek ciftti; `jd-kv2` orada olu isaretti. */
.jd-tech > .jd-fgrid { margin:12px 0 0; }
@media (prefers-reduced-motion:reduce){ .jd-tech > summary::before { transition:none; } }

.steps { list-style:none; padding:0; margin:0; }
.steps li { display:flex; align-items:flex-start; gap:var(--sp-4); padding:12px 0; border-bottom:1px solid var(--border); }
.steps li:last-child { border-bottom:none; }
.steps .dot { width:10px; height:10px; border-radius:50%; background:var(--surface-3);
  border:2px solid var(--border-strong); flex:none; margin-top:4px; }
.steps .dot.succeeded { background:var(--ok); border-color:var(--ok); }
.steps .dot.running { background:var(--info); border-color:var(--info); animation:pulse 1.2s infinite; }
.steps .dot.failed { background:var(--danger); border-color:var(--danger); }
.steps .dot.compensated { background:var(--warn); border-color:var(--warn); }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 var(--ring); } 50%{ box-shadow:0 0 0 5px transparent; } }
/* ---------------- Giris/Kayit (auth) — PARCACIK AGI (2026-08-18) ----------------
   Kart HEP ORTADA; arkasinda tum ekranda fareye tepki veren CANLI parcacik
   agi (tek canvas): derinlik katmanli dugumler, imlece baglanan cizgiler,
   tiklama dalgasi, baglar uzerinde akan veri paketleri, mor/yesil aksanli
   hub dugumleri. 5 canli sahnelik secim turunda kullanicinin secimi.
   ⚠️ Sahne renkleri YALNIZ tema token'lari + color-mix (yeni ham hex 0);
   canvas paleti JS'te BU token'lardan okunur (tema degisince tazelenir) —
   JS'e hex gomulmez.
   ⚠️ TUM CSS animasyon atamalari prefers-reduced-motion:no-preference
   blogunda (poster-kare); canvas tarafinda ayni kapi JS'te (rAF hic
   kurulmaz, TEK statik kare cizilir — ag yine gorunur).
   ⚠️ backdrop-filter YALNIZ kart + tema dugmesi; will-change YALNIZ kart.
   ⚠️ PERFORMANS NOTU (olculdu): GPU'suz yazilim rasterde (headless test
     ortami) surekli her cizim tam-sayfa kompozit maliyetine takilir;
     gercek donanimda canvas 2D + compositor yolu rahat. Olcut mutlak fps
     degil KARE RITMI KARARLILIGIdir. */
.au-wrap { position:relative; min-height:100vh; min-height:100dvh;
  display:flex; justify-content:center;
  /* Sahne token'lari — ACIK tema: "murekkep cizim" (acik gok, koyu dugum) */
  --sc-canvas1:var(--blue-100);
  --sc-canvas2:color-mix(in srgb, var(--blue-50) 60%, white);
  --sc-star:var(--blue-400);
  --sc-vig:color-mix(in srgb, var(--blue-200) 36%, transparent);
  --sc-dot:var(--blue-700);
  --sc-line:var(--blue-600);
  --sc-hub:var(--blue-500);
  --sc-acc1:var(--uc-ram); --sc-acc2:var(--uc-disk); }
[data-theme="dark"] .au-wrap {
  /* KOYU tema: gece agi (derin lacivert gok, parlak dugumler) */
  --sc-canvas1:color-mix(in srgb, var(--blue-900) 46%, black);
  --sc-canvas2:color-mix(in srgb, var(--blue-800) 30%, black);
  --sc-star:var(--blue-200);
  --sc-vig:color-mix(in srgb, black 42%, transparent);
  --sc-dot:var(--blue-300);
  --sc-line:var(--blue-400);
  --sc-hub:var(--blue-200);
  --sc-acc1:var(--uc-ram); --sc-acc2:var(--uc-disk); }

/* --- icerik kolonu (kart HEP ORTADA — kullanici sozlesmesi) --- */
.au-main { position:relative; z-index:2; width:min(640px, 100%); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; padding:var(--sp-6); }
/* Uzun form (kayit + captcha) viewport'u asarsa govde dogal kaydirilir:
   ortalama justify-content ile DEGIL margin-auto ile (tasan icerik kirpilmaz) */
.au-main > .au-card { margin-top:auto; }
.au-main > .au-foot { margin-bottom:auto; padding-top:var(--sp-5); }
/* Kart arkasi isik halesi — aurorayi karta baglayan parlaklik.
   ⚠️ Genislik viewport'a bagli: sabit px dar ekranda tasip YATAY KAYDIRMA
   uretiyordu (olculdu) — kirpmayla maskelemek yerine boyut kuculur. */
.au-glowc { position:absolute; z-index:-1; left:50%; top:50%;
  width:min(600px, 92vw); height:min(560px, 92vw); pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--blue-500) 22%, transparent), transparent 72%);
  transform:translate(-50%, -50%)
    translate3d(calc(var(--mx,0)*-6px), calc(var(--my,0)*-4px), 0); }

/* --- CAM KART --- (tema token'li zemin -> logo sozlesmesi kendiliginden dogru) */
.au-card { width:100%; max-width:460px; position:relative;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid color-mix(in srgb, var(--blue-400) 30%, transparent);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg),
    0 30px 90px -20px color-mix(in srgb, var(--blue-500) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
  padding:var(--sp-8) var(--sp-8) var(--sp-7); }
/* ⚠️ KARTA TRANSFORM VERILMEZ (iki kullanici bulgusu): kesirli parallax
   metni bulaniklastirdi, tam-piksel adimlama "takiliyor" hissi verdi ->
   kart TAMAMEN sabit; derinlik yalniz metinsiz katmanlarda (hale/canvas). */
[data-theme="dark"] .au-card {
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  border-color:color-mix(in srgb, var(--blue-300) 22%, transparent);
  box-shadow:var(--shadow-lg),
    0 30px 90px -20px color-mix(in srgb, var(--blue-500) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 9%, transparent); }
@supports not (backdrop-filter:blur(1px)) {
  .au-card, [data-theme="dark"] .au-card { background:var(--surface); } }
.au-brand.brand { justify-content:center; padding:0 0 var(--sp-2); font-size:var(--t-3xl); }
/* Form etiketleri BELIRGIN (kullanici bulgusu: "E-posta/Parola cok soluk ve
   kucuk") — tam metin rengi + daha buyuk + kalin; kart ici bilgi kutulari da
   bir kademe buyudu ("dogrulandi" metinleri okunur olsun) */
.au-card label { font-size:var(--t-lg); font-weight:600; color:var(--fg);
  margin:var(--sp-4) 0 var(--sp-2); }
.au-card .info-box, .au-card .warn-box, .au-card .err, .au-card .ok {
  font-size:var(--t-lg); justify-content:center; text-align:center; }
/* Etiket satiri: solda etiket, sagda kurtarma baglantisi */
.au-lrow { display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); margin:var(--sp-4) 0 var(--sp-2); }
.au-lrow label { margin:0; }
.au-flink { font-size:var(--t-md); font-weight:600; white-space:nowrap; }
/* Parola goster/gizle (goz ikonu) */
.au-pw { position:relative; }
.au-pw input { padding-right:44px; }
.au-pwbtn { position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center; border:none;
  background:transparent; color:var(--fg-muted); cursor:pointer;
  border-radius:var(--radius-xs); padding:0; }
.au-pwbtn:hover { color:var(--fg); background:var(--surface-2); }
.au-pwbtn svg.ic { width:17px; height:17px; }
.au-pwbtn span { display:grid; place-items:center; }
.au-pwbtn span[hidden] { display:none; }
/* Dogrulama ekrani: e-posta adresi BELIRGIN (kullanici bulgusu: soluk/kucuktu).
   Renk kutudan miras — .ok/.warn-box tonlu kutularda okunur kalir. */
.dg-ep { font-weight:700; font-size:var(--t-xl); color:inherit;
  overflow-wrap:anywhere; }
/* Durum satirlari: Son gonderim / Yeni baglanti (yalniz sahiplik kanitli yol) */
.dg-rows { display:flex; flex-direction:column; margin:var(--sp-4) 0 0; }
.dg-row { display:flex; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-2) 0; font-size:var(--t-lg); }
.dg-row + .dg-row { border-top:1px solid var(--border); }
.dg-row > span { color:var(--fg-muted); }
.dg-row > b { color:var(--fg); text-align:right; }
.au-tag { text-align:center; color:var(--fg-muted); font-size:var(--t-md); margin:0 0 var(--sp-6); }
.au-h { font-family:var(--display); font-size:var(--t-2xl); font-weight:600;
  text-align:center; letter-spacing:-.01em; margin:0 0 var(--sp-5); }
.au-card .au-submit { width:100%; padding:var(--sp-4); margin-top:var(--sp-6);
  font-size:var(--t-lg); box-shadow:var(--shadow-primary); }
.au-note { text-align:center; font-size:var(--t-sm); line-height:1.55; margin:var(--sp-4) 0 0; }
.au-foot { text-align:center; color:var(--fg-muted); font-size:var(--t-sm); }
.au-theme { position:fixed; top:var(--sp-5); right:var(--sp-6); z-index:3;
  width:40px; height:40px; border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--border-strong) 60%, transparent);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--fg); font-size:var(--t-lg);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-sm); }
.au-theme:hover { background:var(--surface-2); }

/* --- PARCACIK AGI SAHNESI --- */
.au3-stage { position:fixed; inset:0; z-index:0; overflow:clip; pointer-events:none; }
.au3-sky { position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 32%, var(--sc-canvas2), var(--sc-canvas1) 72%); }
/* Cok soluk statik nokta dokusu — canvas'in arkasinda derinlik katar */
.au3-sky::after { content:""; position:absolute; inset:0; opacity:.18;
  background-image:radial-gradient(color-mix(in srgb, var(--sc-star) 55%, transparent) 1px, transparent 1.6px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(165deg, black 30%, transparent 82%);
  mask-image:linear-gradient(165deg, black 30%, transparent 82%); }
.au-ag { position:absolute; inset:0; width:100%; height:100%; }
.au3-vig { position:absolute; inset:0;
  background:radial-gradient(120% 92% at 50% 42%, transparent 58%, var(--sc-vig)); }

/* --- HAREKET (poster-kare deseni: tum animasyon atamalari BU blokta;
   azaltilmis harekette hicbiri tanimlanmaz, elemanlar son halinde dogar;
   canvas'in kendi rAF kapisi JS'te) --- */
@media (prefers-reduced-motion: no-preference) {
  .au3-sky, .au3-vig, .au-ag { animation:au3Fade .6s ease-out backwards; }
  .au-glowc { animation:au3Fade .6s ease-out backwards .35s, agNefes 8s ease-in-out infinite 1s; }
  .au-card { animation:au3Card .42s cubic-bezier(.22,1,.36,1) backwards .15s; }
  .au-foot { animation:au3Fade .6s ease-out backwards .45s; }
}
@keyframes au3Fade { from { opacity:0; } }
@keyframes au3Card { from { opacity:0; transform:translate3d(0, 18px, 0) scale(.985); } }
@keyframes agNefes { 0%, 100% { opacity:.75; } 50% { opacity:1; } }

@media (max-width:600px) {
  .au-card { padding:var(--sp-6); }
  .au-theme { right:var(--sp-4); }
}
.login-foot { text-align:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }

/* ---------------- Detay üst şerit ---------------- */
.detail-title { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.detail-title h1 { font-family:var(--mono); font-size:var(--t-2xl); font-weight:600; letter-spacing:-.01em; }

/* ---------------- Toast — ekran ortasi ustte; GOVDE temanin soft alert'i ----------------
   Zemin/kenarlik/ton temanin alert bileseninden gelir (markup `ax-alert --success/
   --danger/--info` tasir); burada yalniz KONUM, hiza ve sure cubugu kalir.
   Renkler alert'in kendi `--_a-500` degiskeninden okunur -> ton basina ayri kural
   YOK (yeni ton eklemek markup'ta sinif degistirmekten ibaret). */
/* Toast temanin toast katmaninda (1300) — modalin da USTUNDE kalir (eski 200,
   tema basligiyla ESITTI ve boyama sirasina kaliyordu). */
.toast-wrap { position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:var(--ax-z-toast, 1300);
  width:calc(100% - 40px); max-width:540px; animation:toastIn .25s ease; }
@keyframes toastIn { from{ opacity:0; transform:translate(-50%,-10px); } to{ opacity:1; } }
/* align-items: alert'in flex-start'i tek satirlik mesajda ikonla metni ayirir ->
   ortala (bu dosya tema CSS'inden SONRA yuklendigi icin kazanir). */
.toast { align-items:center; gap:var(--sp-4); font-size:var(--t-lg); font-weight:500;
  box-shadow:var(--shadow-lg); overflow:hidden; }
.toast.hide { opacity:0; transition:opacity .3s; }
/* Kalan sure cizgisi — soldan saga tukenir; toast'in uzerine gelince DURAKLAR */
.t-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left;
  animation:toastShrink 8s linear forwards; }
.toast .t-bar { background:color-mix(in srgb, var(--_a-500, var(--ok)) 60%, transparent); }
.toast:hover .t-bar { animation-play-state:paused; }
@keyframes toastShrink { from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
/* Az-hareket tercihi: cizgi gizli ama zamanlama korunur (toast yine suresinde kapanir) */
@media (prefers-reduced-motion:reduce){ .t-bar{ opacity:0; } }
.toast .t-ic { flex:none; display:grid; place-items:center; color:var(--_a-500, currentColor); }
.toast .t-ic svg { width:20px; height:20px; }
.toast .t-msg { flex:1; line-height:1.45; color:var(--fg); }
.toast .t-close { background:none; border:none; font-size:var(--t-2xl); cursor:pointer; color:var(--fg-faint);
  line-height:1; padding:0 2px; }
.toast .t-close:hover { color:var(--fg); }

/* ---------------- Modal (onay popup'i) ---------------- */
/* KAPALI modal display:none — aksi halde 100+ tam-ekran fixed+backdrop-filter katmani
   compositor'da kalir ve her scroll/hover'da yeniden cizilir (beyaz flas/donma). */
/* ⚠️ Z KATMANI TEMANIN OLCEGINDEN: tema basligi z=200, kenar cubugu z=300 —
   eski sabit 100 modali BASLIGIN ALTINDA birakiyordu (kullanici bulgusu:
   "IP duzenle penceresi header'in altinda kaliyor"). Temanin modal katmani 1200. */
.modal-overlay { position:fixed; inset:0; z-index:var(--ax-z-modal, 1200); display:none; align-items:center;
  justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .16s;
  background:color-mix(in srgb, var(--fg) 55%, transparent); backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; opacity:1; pointer-events:auto; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:440px; padding:28px;
  transform:translateY(10px) scale(.98); transition:transform .16s; }
.modal-overlay.open .modal { transform:none; }
.modal .m-icon { width:46px; height:46px; border-radius:var(--radius); display:grid; place-items:center;
  margin-bottom:16px; }
.modal .m-icon svg { width:22px; height:22px; }
.modal .m-icon.danger { background:var(--danger-soft); color:var(--danger); }
.modal .m-icon.info { background:var(--info-soft); color:var(--info); }
/* Onay modalinda ikon + baslik AYNI SATIRDA ve AYNI BOYDA (kullanici: 46px cip
   kucuk basligin yaninda "yamuk" duruyordu): cip kutusu kalkar, ikon baslik
   metniyle ayni yukseklikte renkli glif olur.
   ⚠️ SINIF ADI `m-chead` — `m-head` DEGIL: o ad ZATEN form modallarinin baslik
   satiri (space-between + kapatma butonu, asagida) ve kurali dosyada sonra
   geldigi icin basligi EN SAGA savuruyordu. Ad cakisti, davranis degil.
   ⚠️ Ikon ezmesi danger/info renk kurallarindan SONRA durmali — ayni ozgullukte
   (0,3,0), zemin sifirlamayi sira kazandirir (renk kurali yalniz rengi verir). */
.modal .m-chead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.modal .m-chead .m-icon { width:auto; height:auto; background:transparent;
  border-radius:0; margin-bottom:0; flex:none; }
.modal .m-chead .m-icon svg { width:22px; height:22px; }
.modal .m-chead h3 { margin-bottom:0; }
.modal h3 { font-size:var(--t-2xl); margin-bottom:8px; }
.modal p { color:var(--fg-muted); margin:0 0 24px; font-size:var(--t-lg); line-height:1.6; }
/* ⚠️ `white-space:pre-line` YALNIZ ONAY MODALININ MESAJINA (#sv-modal-msg):
   svConfirm mesaji `textContent` ile basilir (XSS'e karsi dogru tercih) ama HTML
   bosluklari daralttigi icin metindeki paragraf ayiricilari HIC gorunmez — uzun onay
   metinleri (snapshot geri donusu ~700 karakter) tek blok haline gelip OKUNAMAZ olur.
   ⚠️⚠️ `.modal p` GENELINE UYGULANAMAZ (regresyon denetimi bulgusu): o secici TUM
   form modallarindaki aciklama paragraflarini da kapsiyor ve sablonlarda cok satirli
   yazilan metinler KAYNAK GIRINTISINE gore kiriliyordu — canli olcum: 4 sayfada 138
   cok-satirli paragraf, kirilma noktalari CUMLE ORTASINA dusuyordu. */
#sv-modal-msg { white-space:pre-line; }
/* ⭐ İPTAL ONAYI AYRINTISI (`_iptal_onay.html`, 2026-10-19): "şu an" kutusu + iptal edilirse maddeleri + risk satırı.
   Pencere ayrıntı varken biraz genişler. */
#sv-modal .modal:has(#sv-modal-detay:not([hidden])) { max-width:500px; }
/* Onay düğmesi okunurluğu güç düğmeleriyle aynı (`.sv-gb`): dolgular iki temada SABİT, beyaz yazıyla >= 4.5:1
   (koyu temada tema dolgusu pastel tona dönüp beyaz yazıyı okunmaz kılıyordu). */
#sv-modal #sv-modal-ok.btn.danger { background:#c81e1e; border-color:#c81e1e; color:#fff; box-shadow:none; }
#sv-modal #sv-modal-ok.btn.primary { background:#1d57e0; border-color:#1d57e0; color:#fff; box-shadow:none; }
#sv-modal #sv-modal-ok.btn:hover { filter:brightness(.93); }
#sv-modal-detay { margin:0 0 var(--sp-5); }
.sv-onay { display:flex; flex-direction:column; gap:var(--sp-3); text-align:left; }
.sv-onay__k { font-size:var(--t-xs); font-weight:700; color:var(--fg-faint); }
/* "Şu an" ve "İptal edilirse" aynı kutu dilinde (kullanıcı 2026-10-19: "düz yazı ekranda iyi durmuyor") */
.sv-onay__kutu { display:flex; flex-direction:column; gap:6px; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.sv-iptal__durum { font-size:var(--t-md, 14px); font-weight:700; color:var(--fg); }
.sv-iptal__ust { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.sv-iptal__gecen { display:inline-flex; align-items:center; gap:4px; font-size:var(--t-xs); font-weight:600; color:var(--fg-muted);
  font-variant-numeric:tabular-nums; }
.sv-iptal__gecen svg.ic { width:12px; height:12px; }
/* Adım parçalı çubuk: her bölüm bir parça (biten dolu, süren nefes alır, bekleyen boş) */
.sv-iptal__parcalar { display:flex; gap:3px; margin-top:4px; }
.sv-iptal__p { flex:1 1 0; height:6px; border-radius:99px; background:var(--surface-3); }
.sv-iptal__p--bitti { background:var(--primary); }
.sv-iptal__p--simdi { background:color-mix(in srgb, var(--primary) 45%, var(--surface-3)); animation:sv-iptal-nefes 1.6s ease-in-out infinite; }
.sv-iptal__p--hata { background:var(--danger); } .sv-iptal__p--geri { background:var(--warn); }
@keyframes sv-iptal-nefes { 50% { background:var(--primary); } }
@media (prefers-reduced-motion:reduce) { .sv-iptal__p--simdi { animation:none; } }
.sv-iptal__ozet { font-size:var(--t-xs); color:var(--fg-muted); }
/* Başlık altı satırı (ortak pencere; ör. hangi sunucu) */
.modal .m-chead-m { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
/* Başlık altı ETİKETİ (etkilenen sunucu): simge + kalın ad + eş aralıklı IP, hafif kobalt zeminli hap (kullanıcı
   2026-10-19: "çok küçük, görünmüyor, daha estetik olsun"). Bütün onay pencerelerinde aynı. */
.modal .m-chead-alt { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 11px 4px 5px;
  border-radius:var(--radius-pill); font-size:var(--t-sm); line-height:1.3; color:var(--fg);
  background:color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 26%, var(--border)); }
.modal .m-chead-alt[hidden] { display:none; }
/* Alt başlık varken başlık simgesi başlık satırıyla hizalı (iki satırın ortasına kaymasın) */
.modal .m-chead:has(.m-chead-alt:not([hidden])) { align-items:flex-start; }
.modal .m-chead:has(.m-chead-alt:not([hidden])) .m-icon { margin-top:5px; }
.modal .m-chead-alt__ic { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  color:var(--primary); background:color-mix(in srgb, var(--primary) 15%, var(--surface)); }
.modal .m-chead-alt__ic svg.ic { width:12px; height:12px; }
.modal .m-chead-alt__t { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; overflow-wrap:anywhere; }
.modal .m-chead-alt__t b { font-weight:700; }
.modal .m-chead-alt__ek { font-family:var(--mono); font-size:.94em; color:var(--fg-muted); }
.sv-onay__liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.sv-onay__liste li { padding:var(--sp-2) 0; }
.sv-onay__liste li:last-child { padding-bottom:0; }
.sv-onay__liste li + li { border-top:1px solid var(--border); }
.sv-onay__kutu .sv-onay__ikon { background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
/* Madde simgesi anlam renginde: tamamlanır (kobalt), geri alınır (amber), başlamaz / durur (nötr) */
.sv-onay__m--info .sv-onay__ikon { color:var(--primary); } .sv-onay__m--ok .sv-onay__ikon { color:var(--ok); }
.sv-onay__m--uyari .sv-onay__ikon { color:var(--warn); } .sv-onay__m--sorun .sv-onay__ikon { color:var(--danger); }
/* Düz mesaj (ayrıntısız onay): cümleler kutu içinde satır satır; simge yerine nötr nokta (yapılı maddelerle aynı hiza) */
.sv-onay__liste--duz li::before { content:""; flex:none; width:24px; height:24px; border-radius:7px;
  background:radial-gradient(circle, var(--fg-faint) 2.5px, transparent 3px), var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.sv-onay__liste li, .sv-onay__risk { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--t-sm);
  line-height:1.5; color:var(--fg); }
.sv-onay__ikon { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; color:var(--fg-muted);
  background:var(--surface-2); }
.sv-onay__ikon svg.ic { width:14px; height:14px; }
.sv-onay__risk { --r:var(--danger); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--r) 7%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--r) 30%, var(--border)); }
.sv-onay__risk--ok { --r:var(--ok); } .sv-onay__risk--uyari { --r:var(--warn); }
.sv-onay__risk .sv-onay__ikon { color:var(--r); background:color-mix(in srgb, var(--r) 14%, transparent); }
.sv-onay__risk b { color:var(--r); }
/* Uzun onay metninde (revert) modal yuksekligi tasabilir → yalniz ONAY modali
   kaydirilabilir; `.modal` geneline vermek form modallarinin kendi max-width/
   max-height kuraliyla cakisirdi. */
#sv-modal .modal { max-height:88vh; overflow-y:auto; }
.modal .m-actions { display:flex; gap:var(--sp-4); justify-content:flex-end; }
.modal .m-actions .btn { padding:8px 18px; }
/* Form modal (vCenter ekle gibi) — daha genis, kaydirilabilir */
.modal-overlay.form-modal .modal { max-width:560px; max-height:88vh; overflow-y:auto; }
.modal .m-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.modal .m-close { background:none; border:none; color:var(--fg-faint); font-size:var(--t-2xl); cursor:pointer;
  line-height:1; padding:0 4px; }
.modal .m-close:hover { color:var(--fg); }

@media (max-width:900px){
  .sidebar { width:66px; } .brand span.txt, .user-chip .who, .nav-sep, .sidebar nav a span.txt { display:none; }
  .brand { justify-content:center; padding:18px 0; } .sidebar nav a { justify-content:center; }
  .cols-6,.cols-5,.cols-4,.cols-3,.cols-2 { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; }
  .content { padding:20px 16px; }
}

/* Fiziksel sunucu secim kartlari (IP havuzu formlari) */
.node-picks { display:flex; flex-wrap:wrap; gap:var(--sp-4); padding:8px 0; }
/* Dagitim modali: sunucu satiri + hedef disk secimi yan yana */
.dep-rows { display:flex; flex-direction:column; gap:var(--sp-4); padding:8px 0; }
.dep-row { display:flex; gap:var(--sp-4); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.dep-row .node-pick { flex:1 1 240px; }
.dep-row .node-pick .np-box { width:100%; box-sizing:border-box; }
.dep-row details.dd > summary.btn { display:inline-flex; align-items:center; gap:var(--sp-3);
  white-space:nowrap; cursor:pointer; }
.dep-row details.dd > summary.btn svg { width:14px; height:14px; }
.dep-row details.dd > summary.btn::after { content:''; width:7px; height:7px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.55; }
.dd-menu button.dd-item { background:none; border:0; width:100%; text-align:left;
  font:inherit; cursor:pointer; color:var(--fg-muted); }
.dd-sub { margin-left:auto; padding-left:16px; font-size:var(--t-xs); color:var(--fg-faint); }
/* Sablon tablosunda durum ozeti (rozet sayaclari + Detay) */
/* `.tstat-line` duzen kurali KALKTI (kapanis D10): duzen tek kaynak `.cell-act`
   — ayni ozgullukte cift kural yalniz DOSYA SIRASIYLA kazaniyordu. Ad capa. */
/* 'guncel degil' uyarisi: amber SOFT ROZET + cerceveli Guncelle. Eski turuncu
   chip SARMALAYICISI kalkti — ton artik rozetin isi; icindeki ghost buton duz
   metin gibi okunuyordu (kullanici: "bozulmus"), buton temanin `--secondary --sm`i. */
.upd-line { display:flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-2); flex-wrap:wrap; }
/* Rozet ICINDEKI uyari ikonu rozet olcegine iner (badge 20px yukseklik). */
.upd-line .ax-badge svg.ic { width:12px; height:12px; flex:none; }
/* ⚠️ `.upd-line .btn` padding EZMESI KALDIRILDI — bkz. satir 336 dersi. */
/* Sidebar bildirim rozeti — AMBER varyant. Temanin rozet tabani yalniz yapi
   verir; zemin/renk varyanttan gelir (--count/--new/--hot). Amber "guncelleme
   bekliyor" tonu temada yok -> --hot'un birebir recetesiyle (soft zemin + tam
   renk metin) warning token'lariyla eklendi. Eski .nav-badge/.notif kurallari
   yeni ax-sidebar'da OLU KODdu, silindi. */
.ax-nav__badge--warn {
  background: color-mix(in srgb, var(--ax-warning-500) 16%, transparent);
  color: var(--ax-warning-500);
}
/* Soru isareti + bilgi karti (form alanlari yaninda '?' — hover/odakta acilir) */
.hint { display:inline-grid; place-items:center; width:15px; height:15px; margin-left:5px;
  border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong);
  color:var(--fg-faint); font-size:var(--t-xs); font-weight:700; cursor:help; position:relative;
  vertical-align:middle; user-select:none; line-height:1; }
.hint:hover, .hint:focus { border-color:var(--primary); color:var(--primary); }
.hint .hint-card { display:none; position:absolute; left:-12px; bottom:calc(100% + 8px);
  z-index:90; width:250px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg); color:var(--fg-muted); font-size:var(--t-sm); font-weight:400;
  line-height:1.55; text-align:left; white-space:normal; cursor:default; }
.hint:hover .hint-card, .hint:focus .hint-card { display:block; }
.hint .hint-card.flip-x { left:auto; right:-12px; }
.hint .hint-card.below { bottom:auto; top:calc(100% + 8px); }
/* Aciklamali secim kutusu (or. sablonda 'Satışa kapalı') — node-pick dili */
.opt-box { display:block; position:relative; margin-top:12px; cursor:pointer; user-select:none; }
/* ⚠️ `[hidden]` EZME TUZAGI: yukaridaki `display:block` UA'nin
   `[hidden]{display:none}` kuralini ezer -> JS ile gizlenen bir `opt-box`
   SESSIZCE gorunur kalirdi (belgeli sinif; rDNS saglayici modalinda
   'Baglanti kullanimda' kutusu ekleme kipinde gizleniyor). */
.opt-box[hidden] { display:none; }
/* ⚠️⚠️ YALNIZ RADYO/KUTUCUK GIZLENIR (2026-09-21'de ISIRDI): secici `.opt-box input`
   idi ve kartin ICINE konan BASKA bir girdiyi de (IP arama kutusu) gizliyordu — ekranda
   yalniz ikon kaliyor, kutu KAYBOLUYORDU. Tip secicisiyle daraltildi: bir `opt-box`
   kartinin govdesine artik metin/arama girdisi konabilir. */
.opt-box input[type=radio], .opt-box input[type=checkbox] {
  position:absolute; opacity:0; width:1px; height:1px; }
.opt-box .opt-inner { display:flex; gap:var(--sp-4); align-items:flex-start; padding:12px 14px;
  border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface);
  transition:border-color .15s, background .15s; }
.opt-box .opt-check { width:18px; height:18px; border-radius:5px; flex:none; margin-top:1px;
  border:1.5px solid var(--border-strong); display:grid; place-items:center;
  color:transparent; transition:background .15s, border-color .15s, color .15s; }
.opt-box .opt-check svg { width:12px; height:12px; }
.opt-box .opt-body { display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--t-md); }
.opt-box .opt-inner:hover { border-color:var(--danger); }
.opt-box input:checked + .opt-inner { border-color:var(--danger); background:var(--danger-soft); }
.opt-box input:checked + .opt-inner .opt-check { background:var(--danger);
  border-color:var(--danger); color:#fff; }
.opt-box input:focus-visible + .opt-inner { outline:2px solid var(--danger); outline-offset:2px; }
/* opt-primary: benign/mavi varyant (danger yerine) — "ilk girişte parola" gibi ayarlar */
.opt-box.opt-primary .opt-inner { border-color:var(--border); }
.opt-box.opt-primary .opt-inner:hover { border-color:var(--primary); }
.opt-box.opt-primary input:checked + .opt-inner { border-color:var(--primary); background:var(--primary-soft); }
.opt-box.opt-primary input:checked + .opt-inner .opt-check { background:var(--primary);
  border-color:var(--primary); color:#fff; }
.opt-box.opt-primary input:focus-visible + .opt-inner { outline-color:var(--primary); }
/* sv-share-box: "Paylasimli disk" secenegi — buyuk ikon-cip varyanti. Bosken disk
   ikonu, isaretlenince mavi degrade + beyaz tik (pop animasyonu). YALNIZ bu kutu;
   diger opt-box'lar 18px klasik tik kutusuyla kalir. */
.sv-share-box .opt-check { width:36px; height:36px; border-radius:var(--radius-sm); margin-top:0;
  background:var(--surface-2); border:1.5px solid var(--border-strong);
  color:var(--fg-muted); position:relative;
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s; }
.sv-share-box .opt-check svg { width:17px; height:17px; }
.sv-share-box .opt-check svg + svg { display:none; }               /* tik gizli baslar */
.sv-share-box .opt-inner:hover .opt-check { border-color:var(--primary); color:var(--primary); }
.sv-share-box input:checked + .opt-inner .opt-check {
  background:linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-color:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-primary); }
.sv-share-box input:checked + .opt-inner .opt-check svg { display:none; }       /* disk gizle */
.sv-share-box input:checked + .opt-inner .opt-check svg + svg { display:block;  /* tik goster */
  animation:sv-share-pop .22s cubic-bezier(.34,1.56,.64,1); }
.sv-share-box input:disabled + .opt-inner { cursor:not-allowed; }
.sv-share-box .opt-body strong { font-size:var(--t-md); letter-spacing:-.01em; }
@keyframes sv-share-pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .sv-share-box input:checked + .opt-inner .opt-check svg + svg { animation:none; }
}
/* Form ici genis dropdown alani (or. OVA Guncelle'de repo secimi) */
.fld-dd { width:100%; }
.fld-dd > summary.btn { width:100%; display:flex; align-items:center; gap:var(--sp-3);
  justify-content:flex-start; padding:12px 14px; font-size:var(--t-lg);
  box-sizing:border-box; }
.fld-dd > summary.btn .dd-val { flex:1; text-align:left; }
.fld-dd > summary.btn svg { width:15px; height:15px; }
.fld-dd > summary.btn::after { content:''; width:7px; height:7px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.55; }
/* Dosya secici — temaya uygun (native gorunum kotu — kullanici geri bildirimi) */
input[type="file"] { width:100%; box-sizing:border-box; font-size:var(--t-md); color:var(--fg-muted);
  padding:8px; border:1.5px dashed var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface-2); cursor:pointer; }
input[type="file"]::file-selector-button { border:1px solid var(--border-strong);
  border-radius:var(--radius-xs); background:var(--surface); color:var(--fg); padding:8px 14px;
  margin-right:12px; cursor:pointer; font:inherit; font-size:var(--t-md); font-weight:600;
  transition:border-color .15s; }
input[type="file"]:hover::file-selector-button { border-color:var(--primary); }
/* Genis form modali (Sunuculara Yukle — disk menusu sigsin) */
.modal-overlay.form-modal.wide .modal { max-width:720px; }
/* Ekrana sigmayan disk menusu yukari acilir (JS 'up' sinifi ekler) */
.dd-panel.up { top:auto; bottom:calc(100% + 8px); }
/* Uyari kutusu (or. mevcut OVA'nin uzerine yazilir) */
.warn-box { display:flex; gap:var(--sp-3); align-items:flex-start; padding:10px 12px;
  border-radius:var(--radius-sm); background:var(--danger-soft); color:var(--danger);
  font-size:var(--t-md); line-height:1.5; margin:10px 0; }
.warn-box svg { width:16px; height:16px; flex:none; margin-top:2px; }
/* Gozat sayfasi: isletim sistemi grup baslik satiri */
.grp-row td { background:var(--surface-2); font-family:var(--display); font-weight:600;
  font-size:var(--t-md); letter-spacing:.02em; color:var(--fg); padding:8px 16px; }
/* Tam sayfa hata durumu ikonu (or. repo Gozat erisim hatasi) */
.page-err-icon { width:54px; height:54px; border-radius:var(--radius); margin:0 auto 18px;
  display:grid; place-items:center; background:var(--danger-soft); color:var(--danger); }
.page-err-icon svg { width:26px; height:26px; }
.node-pick { position:relative; margin:0; }
.node-pick input { position:absolute; opacity:0; width:1px; height:1px; }
.node-pick .np-box { display:inline-flex; align-items:center; gap:var(--sp-3); padding:10px 14px;
  border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface);
  cursor:pointer; user-select:none; font-size:var(--t-md);
  transition:border-color .15s, background .15s; }
.node-pick .np-check { width:17px; height:17px; border-radius:5px; flex:none;
  border:1.5px solid var(--border-strong); display:grid; place-items:center;
  color:transparent; transition:background .15s, border-color .15s, color .15s; }
.node-pick .np-check svg { width:11px; height:11px; }
.node-pick .np-box:hover { border-color:var(--primary); }
.node-pick input:checked + .np-box { border-color:var(--primary); background:var(--primary-soft); }
.node-pick input:checked + .np-box .np-check {
  background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.node-pick input:focus-visible + .np-box { outline:2px solid var(--primary); outline-offset:2px; }

/* Acilir panel (IP Ekle / Sunucu Ata / disk secimi) — kaymayan, tema uyumlu dropdown */
details.dd { position:relative; }
details.dd > summary { list-style:none; }
details.dd > summary::-webkit-details-marker { display:none; }
details.dd[open] > summary.btn { border-color:var(--primary); }
.dd-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:16px 18px; box-shadow:var(--shadow-lg); width:min(92vw, 420px); }

/* Dropdown menu (filtre secimi vb.) — dd-panel icinde tiklanabilir satirlar */
.dd-panel.dd-menu { padding:6px; display:flex; flex-direction:column; gap:var(--sp-1); width:auto; min-width:210px; }
.dd-panel.right { left:auto; right:0; }
.dd-item { display:flex; align-items:center; gap:var(--sp-3); padding:8px 12px; border-radius:var(--radius-xs);
  color:var(--fg); font-size:var(--t-md); text-decoration:none; white-space:nowrap; }
.dd-item:hover { background:var(--surface-2); color:var(--fg); }
.dd-item.active { background:var(--primary-soft); color:var(--primary); font-weight:600; }
.dd-item.active::after { content:'✓'; margin-left:auto; font-weight:700; }

/* ⭐⭐ GENEL KURAL — "ACIK PENCERE HICBIR SEYIN ALTINDA KALMAZ".
   ⚠️ KOK NEDEN (bir kez ogrenildi, tekrar dogmasin): temanin `.ax-card`i
   `backdrop-filter` tasir. `backdrop-filter` — transform/filter/opacity gibi —
   KENDI YIGIN BAGLAMINI yaratir. Dolayisiyla kartin ICINDEKI bir pencerenin
   `z-index`i (dd-panel 60, cdd-panel 30, hint-card 90) KARTIN DISINA CIKAMAZ;
   kartlar ust baglamda DOM SIRASIYLA boyandigi icin BIR SONRAKI KART her zaman
   pencerenin ustunde kalir. (Kullanici bulgusu: IP havuzunda bir havuzun
   "Filtre" menusu bir sonraki havuz kartinin altinda kaliyordu.)
   Cozum tek yerde: icinde ACIK bir pencere olan KABI yukselt. Boylece pencere
   kendi kartiyla birlikte yukari cikar ve sonraki kartlarin ustunde kalir.
   ⚠️ Deger `.sidebar`in 20'sinin ALTINDA (5) — kart kenar cubugunun ustune
   cikmamali; kardes kartlari gecmek icin 1 bile yeter. `.vc:has(.vc-ips[open])`
   ile ayni deger, tek dil.
   ⚠️ Kap `.ax-card` ile sinirli DEGIL: yigin baglami yaratan HER kap listelenir.
   Yeni bir pencere sinifi eklerken bu listeye de EKLE — aksi halde ayni hata
   baska bir sayfada yeniden dogar.
   ⚠️ `:has()` desteklemeyen eski tarayicida pencere yine ACILIR ve calisir,
   yalnizca ortulebilir (kabul edilebilir bozulma, islev kaybi yok). */
.ax-card:has(details.dd[open]),
.ax-card:has(.cdd.open),
.ax-card:has(.hint:hover), .ax-card:has(.hint:focus-within),
.ax-card:has(.cbtn.copied),
.ax-panel:has(details.dd[open]) { z-index:5; }
/* ⚠️ BURAYA GENEL BIR `overflow:visible` KURALI EKLEME — DENENDI VE GEREKSIZ
   CIKTI (olculdu: kural olmadan da 21/21 gecti). Pencere tasiyan kaplar zaten
   kendi `overflow:visible` kurallarina sahip (`.ipp-card` gibi). Genel kural
   yuvarlak kose kirpmasini da kaldirdigi icin bedava degil.
   Yeni bir sayfa pencereyi KIRPAN bir kabin icine koyarsa cozum O KABA
   `overflow:visible` yazmaktir — burada global kural degil. */

/* Otomatik uretim bloklari — belirgin, tema uyumlu satirlar */
.blk-list { margin-top:12px; display:flex; flex-direction:column; gap:var(--sp-3); }
.blk-row { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--primary); border-radius:var(--radius-sm); padding:12px 16px; }
.blk-row > svg { width:18px; height:18px; color:var(--primary); flex:none; }
.blk-cidr { font-weight:600; font-size:var(--t-lg); }

/* Paylasilan filtre/arama TOOLBAR (users + templates + audit) — temali, cohesive serit */
.filter-bar { display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--ax-space-8, 32px); /* liste ile arasi — kart/bar boslugyla ayni ritim */
  padding:12px 12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.filter-bar input, .filter-bar select, .filter-bar .btn { margin:0; height:40px; }
/* ⚠️ Global `input,select{width:100%}` kuralı flex kapta her ögeyi tüm satıra
   yayıyor ve filtre barı alt alta kırılıyordu — genişliği içeriğe geri ver.
   Kalın arama kutusu isteyen sayfalar (audit/users/vms) inline min-width ile
   korur (inline > global). */
.filter-bar input, .filter-bar select { flex:0 1 auto; width:auto; }
.filter-bar .btn { box-shadow:none; }
/* Sayfalama seridi — TEK KAYNAK. Dort sablonda (audit/ip_log/users/user_detail) BIREBIR
   kopyalanmisti; VM listesi de sayfali hale gelince besinci kopya olacakti. Paylasilan
   bilesen globale tasinir (.filter-bar / .sorth / .count-chip ile ayni kural). */
.pager { display:flex; align-items:center; gap:var(--sp-5); justify-content:center; margin-top:16px; }
/* ⭐ KUTULU SAYFALAMA BARI — Mail Kayıtları'nda doğdu, RDNS de aynısını
   kullanıyor: kural KOPYALANMAZ, seçici listesi genişletilir (panel kuralı).
   ⚠️ `--ax-*` fallback zinciri korunur: bar tema kabuğunun yüzey/kenar
   değişkenlerini kullanır, yoksa panelin kendi token'ına düşer. */
.mk-pager, .rd-pager { background:var(--ax-surface-1, var(--surface, #fff));
  border:1px solid var(--ax-border, var(--border, #e5e7eb));
  border-radius:var(--ax-radius, var(--radius, 10px));
  box-shadow:var(--ax-shadow-sm, var(--shadow-sm, none));
  padding:5px 14px; margin-top:14px; justify-content:center; gap:var(--sp-5);
  box-sizing:border-box; }
.mk-pager a.btn, .mk-pager-git,
.rd-pager a.btn, .rd-pager-git { line-height:1; }
/* ⚠️ `.mk-pager-git` / `.rd-pager-git` bir <label> oldugu icin GLOBAL label
   marji (mt14/mb6) uygulaniyordu -> hem bari 70px'e sisiriyor hem hizayi
   bozuyordu. `margin:0` SART (belgeli tuzak). */
.mk-pager-git, .rd-pager-git { display:inline-flex; align-items:center; gap:var(--sp-3);
  margin:0; font-size:var(--t-sm, 13px); color:var(--ax-fg, inherit); }
.mk-pager-git select, .rd-pager-git select { width:auto; min-width:70px; }
.mk-pager a.btn, .rd-pager a.btn { color:var(--ax-fg, inherit);
  display:inline-flex; align-items:center; }
.mk-pager a.btn:hover, .rd-pager a.btn:hover { color:var(--ax-accent, #2563eb); }
/* Arama kutusu: dolgulu + onde buyutec (magnifier) ikonu */
.filter-bar input { background:var(--surface-2); font-size:var(--t-md); }
.filter-bar input[name="q"] { padding-left:37px; background-repeat:no-repeat;
  background-position:13px center; background-size:15px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238593ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>"); }
.filter-bar input[name="q"]:focus { background-color:var(--surface); }
/* Temali acilir select: dolgulu pill; hover/focus'ta primary vurgu; refined chevron */
.filter-bar .sel { position:relative; display:inline-flex; }
.filter-bar .sel select { appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:0 34px 0 14px; cursor:pointer; min-width:150px; font-size:var(--t-md); font-weight:500;
  background:var(--surface-2); border-color:var(--border-strong); color:var(--fg); }
.filter-bar .sel select:hover { border-color:var(--primary); color:var(--primary);
  background:var(--primary-soft); }
.filter-bar .sel select:focus { border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px var(--ring); color:var(--fg); }
.filter-bar .sel::after { content:''; position:absolute; right:14px; top:calc(50% - 5px);
  width:7px; height:7px; border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg); pointer-events:none; transition:border-color .13s; }
.filter-bar .sel:hover::after,.filter-bar .sel:focus-within::after { border-color:var(--primary); }
/* Hizli filtre cipleri */
.qf-bar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:16px; }
/* ⚠️ inline-flex ZORUNLU: etiket `display:block` iken icindeki ikon `vertical-align`
   ile satira oturuyor ve metnin 9px ustunde kaliyordu (kullanici: "kalkan ikonu
   yamuk duruyor" — canli olculdu). Ikon kullanmayan sayfalarda etkisi yok. */
.qf-label { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.qf-label svg { width:14px; height:14px; flex:none; }
.qf-chip { display:inline-flex; align-items:center; gap:var(--sp-2); padding:6px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-muted);
  font-size:var(--t-sm); text-decoration:none; white-space:nowrap; }
.qf-chip svg { width:13px; height:13px; }
.qf-chip b { color:var(--fg); font-weight:700; }
.qf-chip:hover { border-color:var(--primary); color:var(--primary); }
.qf-chip:hover b { color:var(--primary); }
.qf-chip.on { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }
.qf-chip.on b { color:var(--primary); }
.qf-chip.alert { border-color:color-mix(in srgb, var(--warn) 55%, transparent); background:var(--warn-soft); color:var(--fg); }
.qf-chip.alert b { color:var(--warn); }

/* GUVENLI VARSAYILAN ikon boyutu: baglama ozel kural (.btn/.err/.sidebar/.stat vb.)
   YOKSA ikon 16px kalir. Boyutsuz/BOS (tanimsiz ad -> ici bos) bir <svg class="ic">'in
   tarayici varsayilaniyla DEVASA render edilip duzeni bozmasini KOKTEN engeller.
   ⚠️ DIKKAT: `.foo > svg` bicimindeki baglam kurali bununla AYNI ozgullukte (0,1,1)
   oldugundan ezmez — dosyada SONRA geldigi icin BU kural kazanir. Bir baglamda farkli
   boyut isteniyorsa secici `svg.ic`'i ICERMELI (or. `.vd-warn > svg.ic`). Bu tuzak
   canli bir regresyona yol acti: vm_detail'in kendi <style> blogundaki .vd-warn kurali
   (sayfa icinde, stylesheet'ten SONRA render oldugu icin kazaniyordu) style.css'e
   tasininca ikonlar 18px yerine 16px'e dustu. */
svg.ic { width:16px; height:16px; flex:none; }

/* Kolon siralama basligi (users + sablonlar tablolari — users.html'den tasindi, tek kaynak) */
/* Tiklanabilir sayac cipi ("N sunucu") — kutu icinde link oldugu belli olsun.
   users.html'den buraya tasindi: paketler sayfasi da kullaniyor (tek kaynak). */
.count-chip { display:inline-flex; align-items:center; gap:var(--sp-2); padding:4px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--fg);
  font-size:var(--t-sm); font-weight:500; text-decoration:none; white-space:nowrap; }
.count-chip:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.count-chip svg { width:13px; height:13px; }
.sorth { color:inherit; text-decoration:none; white-space:nowrap; cursor:pointer; }
.sorth:hover { color:var(--primary); }
.sorth.on { color:var(--primary); font-weight:600; }
/* Ok her zaman gorunur (tiklanabilirlik ipucu): pasifken soluk, aktifken renkli */
.sort-ind { font-size:var(--t-xs); margin-left:4px; opacity:.4; }
.sorth:hover .sort-ind { opacity:.7; }
.sorth.on .sort-ind { opacity:1; color:var(--primary); }

/* ============================================================
   VM LISTESI (/panel/vms) — SUNUCU KARTLARI
   Tablo yerine tam-genislikte kartlar: her sunucu kendi bloguna sahip, bilgi
   yogunlugu artarken satirlar birbirine karismiyor.
   ⚠️ TON SINIFLARI DAIMA ONEKLI: tek kelimelik `.ok/.err/.warn/.info-box` bu projede
      GLOBAL bir UYARI KUTUSU kuralidir (padding + display:flex) — `class="bar ok"`
      yazmak bari bozar (tam olarak `.jd-bar`da yasandi).
   ============================================================ */

/* Guest saglik noktasi — vm_detail'in KENDI <style> blogundan buraya TASINDI (liste de
   kullaniyor; kopyalamak drift uretir — .filter-bar/.pager/.count-chip ile ayni kural).
   Yereldeki HAM HEX (#b7791f) koyu temada bozuluyordu, burada degiskene baglandi. */
.hb-dot { width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.hb-sep { color:var(--fg-faint); }
.hb-ok { color:var(--ok); } .hb-dot.hb-ok { background:var(--ok); }
.hb-warn { color:var(--warn); } .hb-dot.hb-warn { background:var(--warn); }
.hb-err { color:var(--danger); font-weight:600; } .hb-dot.hb-err { background:var(--danger); }
.hb-faint { color:var(--fg-faint); } .hb-dot.hb-faint { background:var(--fg-faint); }

/* ---------------- Durum kartlari (sanal sunucu listesi basligi) ----------------
   Kullanicinin begendigi ICERIK korunur (durum + acikayici alt satir); begenmedigi
   KUTU yeniden cizilir. Ayri bir "hizli suz" cip bandi YOK: alt satirdaki sayilarin
   KENDISI baglantidir -> ayni sayilari iki kez basan iki bant sorunu geri gelmez.
   ⚠️ Ton degiskenleri kart sol rayiyla AYNI palet (tikladigin renk = sonra gordugun
      rayin rengi). Iki yerde ayri palet TUTMA. */
.s-on { --tone:var(--ok); } .s-off { --tone:var(--fg-faint); }
.s-susp { --tone:var(--warn); } .s-prov { --tone:var(--primary); }
.s-unknown { --tone:var(--border-strong); }
.s-tot { --tone:var(--primary); } .s-lock { --tone:var(--warn); }
/* ⚠️ Islem listesindeki "Sorunlu" karti icin: `s-off` SOLUK GRI (iptal edilen is icin
   dogru ton) ama basarisiz is bir UYARIDIR — ayri ton gerekli. Yeni bir palet DEGIL,
   mevcut `--danger` token'i. */
.s-bad { --tone:var(--danger); }
/* ⭐ BOLUM ARASI DIKEY RITIM (kullanici: "4 kart ile arama bari ic ice girmis, hic
   bosluk yok; kart/bar/liste arasi da fazla yakin"). Kart izgarasinin alt marji
   YOKTU — filtre bari dibine yapisiyordu. Demo bolumleri `--ax-space-8` (32px) ile
   ayiriyor (index.html bolum marjlari); ayni token kullanilir.
   ⚠️ Kapsam `#vml-cards`/`#jp-cards` (yalniz bu sayfalarin kartlari): ciplak
      `.ax-dash-grid`e marj yazmak IC ICE izgaralari da acardi (dash-grid baska
      sayfalarda blok icinde). Islemler sayfasinda AYNI sikayet birebir tekrarlandi
      ("birbirine girmişler") — ayni token, ayni cozum. */
#vml-cards, #jp-cards, #nd-cards, #usr-cards, #usr-dcards { margin-block-end:var(--ax-space-8); }
/* ⚠️ Kullanici DETAYINDA aynisi FAZLA geldi (kullanici: "4 kart ile hesap
   islemleri karti arasinda fazla bosluk var"). Sebep yapisal: oteki sayfalarda
   KPI seridinin altinda hafif bir SUZGEC BARI var, burada dogrudan tam bir KART
   geliyor — iki kart arasi bosluk KART ritmi kadar olmali, bant ritmi kadar
   degil. Sayfadaki TUM dikey kart araligi tek deger (`--sp-6`); karisik ritim
   (24/20/0) "fazla bosluk" algisinin kaynagiydi ve Bilgiler ile ilk tablo
   arasinda hic bosluk BIRAKMIYORDU (canli olculdu: 0px).
   (Ayri kural: seciciyi ustteki listeden dusurmek diger sayfalari da etkilerdi.) */
#usr-dcards { margin-block-end:var(--sp-6); }
/* ⭐⭐ VM KARTLARINDA CANLI PALET (kullanici: "iconlar hala renksiz, %50 yazilari
   renksiz"). Ilk deneme tonlari panelin `--ok/--warn/--danger` token'larina bagladi
   ve "renksiz" kaldi — cunku o token'lar ACIK ZEMINDE AA METIN icin koyulastirilmis
   renkler (#1c7a45 / #8a5c07 / #b83226). Demonun rozet/cip/cubuklari ise temanin
   CANLI 500 paletini kullaniyor (#2e9e5b / #c8870f / #d24535). Kart DEKOR ogeleri
   (cip zemini, rozet, cubuk) metin degildir — canli palet dogru kaynak.
   ⚠️⚠️ KAPSAM `.vs` ILE SINIRLI ve bu SART: panelin geri kalani (rozetler, uyari
      kutulari, metinler) AA token'larinda KALIR; `s-off`u Islemler nabiz seridi de
      kullaniyor (IPTAL) ve orada gri kalmali — iptal, hata degildir.
   · kapali = KIRMIZI (kullanici karari: "barlarda gri kullanma")
   · `s-unknown` GRI KALIR (Toplam yigininda kucuk dilim): durum BILINMIYOR,
     ona canli renk vermek yanlis sinyal olurdu. */
.vs.s-tot { --tone:var(--ax-accent); }
.vs.s-on, .vs .s-on { --tone:var(--ax-success-500); }
.vs.s-off, .vs .s-off { --tone:var(--ax-danger-500); }
.vs.s-lock, .vs.s-susp, .vs .s-susp { --tone:var(--ax-warning-500); }
.vs.s-bad { --tone:var(--ax-danger-500); }
.vs .s-prov { --tone:var(--ax-accent); }
.vs.s-prov { --tone:var(--ax-accent); }

/* ⭐ KART ICI ROZETLER = TEMANIN GERCEK `ax-badge` SINIFLARI (kullanici: "demodaki
   badges Tones & styles soft/solid tarzina yap"). Sablon gercek sinifi basar
   (`ax-badge ax-badge--soft/--solid`), burada YALNIZ palet esleme yapilir: temanin
   rozet mekanizmasi `--_badge-50/500` degiskenlerinden okur, biz onlari kartin
   tonuna cevirmis oluruz — govde (olcu/dolgu/yaricap) tamamen temanin.
   ⚠️ Bu esleme (0,2,0) temanin varyant siniflarini (0,1,0) EZER — bu KASITLI
      (rozet kartin tonunu alir) ama tondan SAPMASI gereken rozetler icin asagida
      daha ozgul (0,3,0) istisnalar var. */
.vs .ax-badge { --_badge-500:var(--tone);
  --_badge-50:color-mix(in srgb, var(--tone) 12%, transparent); }
/* uyari rozeti karttan bagimsiz HEP kirmizi ("yanit vermiyor" yesil kartta da uyaridir) */
.vs .ax-badge.warn { --_badge-500:var(--ax-danger-500); --_badge-50:var(--ax-danger-50); }
/* "kuruluyor" kavramsal olarak accent (kirmizi Kapali kartinin icinde de) */
.vs .ax-badge.acc { --_badge-500:var(--ax-accent); --_badge-50:var(--ax-accent-wash); }
/* "durumu bilinmiyor" NOTR kalir — bilinmeyene canli renk yanlis sinyal */
.vs .ax-badge.mut { --_badge-500:var(--ax-text-muted); --_badge-50:var(--ax-fill-hover); }
/* baglanti-rozetler: alt cizgisiz, hover'da yikama koyulasir, aktif suzgec ic cerceve */
.vs-s a.ax-badge { text-decoration:none; }
.vs-s a.ax-badge:hover { background:color-mix(in srgb, var(--_badge-500) 22%, transparent); }
.vs-s a.ax-badge.on { box-shadow:inset 0 0 0 1px var(--_badge-500); }

/* ⭐ TEMAYA DEVREDILDI: kartin YUZEYI, IZGARASI ve OLCULERI artik temanin
   `.ax-card.ax-kpi` + `.ax-dash-grid`/`.ax-col--3` bileseninden gelir (kullanici
   istegi: "temadaki gibi daha buyuk ve ekrana tam otursun"). Panelin eski
   `.vst` 4-kolon izgarasi ve `.vs` yuzey kurallari KALDIRILDI.
   ⚠️ BURADA KALANLAR KOZMETIK DEGIL: tiklama katmani, isaretci tersine cevirme,
      odak halkasi ve `--tone` tek-degisken sozlesmesi DAVRANIS tasiyor. */
/* Ton yalnizca RENK tasir; yuzey/dolgu/golge temanin.
   ⚠️ `overflow:hidden` KALIYOR ama GEREKCESI DEGISTI: pay cubugu artik kenara
      oturmuyor (temanin `.ax-progress` bileseni, kendi pill yaricapi var). Kirpma
      simdi yalnizca "kart yaricapindan tasan hicbir sey olmasin" guvencesi ve
      `.vs-hit` odak halkasinin NEGATIF offset kullanma sebebi (asagida).
      Kaldirilmadi cunku bir davranisa (odak halkasi) bagli ve `.vc`den farkli olarak
      burada acilir pencere YOK — yani kirpma guvenli (bu ayrim panelde bir kez
      yasandi ve yazili). */
.vs { --tone:var(--border-strong); position:relative; overflow:hidden; }
.vs.on { border-color:var(--tone); }
/* ⚠️⚠️ `display:flex` EZMESI KALDIRILDI — KARTLARIN BUYUK GORUNME SEBEBI OYDU.
   Temanin KOMPAKT KPI duzeni bir IZGARA ve yalnizca `:has()` ile devreye giriyor:
     :has(>.ax-kpi__top){display:grid;grid-template-columns:auto 1fr}
     ...>.ax-kpi__icon{grid-area:1/1/span 2}   (ikon iki satir boyu SOLDA)
     ...>.ax-kpi__label{grid-area:1/2;justify-self:end}  (etiket SAGA yasli)
     ...>.ax-kpi__value{grid-area:3/1/auto/-1}
   Govdeye `flex` yazmak bu izgarayi iptal ediyor, her sey ALT ALTA diziliyor ve
   kart temadakinden ~2 satir UZUYOR. Govde artik temanin izgarasinda kalir.
   ⚠️ ALT DOLGU EZMESI KALKTI: pay cubugu artik kenara oturan ozel bir serit degil,
      temanin `.ax-progress` bileseni — kartin kendi dolgu ritmi icinde durur. */
/* ⚠️⚠️ ACIKLAMA VE CUBUK ACIKCA YERLESTIRILMELI. Tema `:has(>.ax-kpi__top)`
   izgarasinda YALNIZCA ikon(1/1 span2) · etiket(1/2) · rozet(2/2) · deger(3/tam) ·
   spark(4/tam) icin kural tasir. Yerlestirilmeyen oge OTOMATIK yerlesir ve iki
   panele-ozgu satir (aciklama + cubuk) bos kalan 4/1 ve 4/2 hucrelerine dusup
   YAN YANA dizilirdi; ustelik `auto` olan 1. kolon aciklamanin genisligi kadar
   sisip etiket/rozeti sikistirirdi. Temanin kendi deseni izlenir (deger 3/tam,
   spark 4/tam) — biz 4 ve 5. satiri kullaniriz. */
.vs > .ax-card__body > .ax-kpi__caption { grid-area:4 / 1 / auto / -1;
  align-self:start; }
.vs > .ax-card__body > .vs-bar { grid-area:5 / 1 / auto / -1; }
/* ⚠️ CUBUKLAR DORT KARTTA AYNI HIZADA OLMALI (eski tasarimda `margin:auto` bunu
   sagliyordu, izgara duzeninde kayboldu): `.ax-dash-grid{align-items:stretch}`
   kartlari esit boya getiriyor ama govde icindeki fazla bosluk varsayilan
   `align-content:stretch` ile BES satira esit dagilir — aciklamasi iki satira
   saran kartta cubuk asagida, digerlerinde yukarida kalirdi. Fazla bosluk artik
   yalnizca ACIKLAMA satirina (4. satir, 1fr) verilir -> cubuk her kartta dipte.
   ⚠️ `align-self:start` (yukarida) SART: temanin `align-items:center`i buyuyen
      satirda aciklamayi ORTALAYIP degerden koparirdi.
   ⚠️ Satir sablonu yalniz EKLENIR; display/kolonlar temanin `:has()` kuralindan
      gelmeye devam eder (0,2,0 > temanin 0,1,0 — ayni ozellikleri yazmadikca
      cakisma yok). */
.vs > .ax-card__body { grid-template-rows:auto auto auto minmax(0,1fr) auto; }
/* Kart tamami tiklanabilir; alt satirdaki baglantilar ONUN USTUNDE durur.
   ⚠️ Ic ice <a> GECERSIZ HTML — bu yuzden kapsayici link ayri bir katman (`.vc-hit`
      deseninin aynisi), kart <a> DEGIL. */
.vs-hit { position:absolute; inset:0; z-index:0; }
/* ⚠️⚠️ KARTIN GOVDESI TIKLANMIYORDU: icerik katmani (z-index:1) tiklama katmaninin
   (z-index:0) USTUNDE boyanir ve isaretci testi boyama sirasini izler -> kartin
   ~%60'i OLU alandi. Cip bandi kaldirildigi icin bu suzgeclere ulasmanin TEK yolu
   kart tiklamasi; kullanici hover geri bildirimi alip tiklamasinin islemedigini
   goruyordu. Icerik isaretciye SEFFAF yapilir, GERCEK baglantilar geri acilir.
   ⚠️ Ayni desen `.vc` (sunucu karti) icin UYGULANMAZ: orada IP/hostname METNI
      SECILEBILIR kalmali (kullanici kopyaliyor) — ayri bir karar. */
.vs > *:not(.vs-hit) { position:relative; z-index:1; pointer-events:none; }
/* ⚠️ Isaretciye geri acilanlar: gercek baglantilar VE aciklama tasiyan ogeler —
   `title` ipucu `pointer-events:none` altinda HIC gorunmez, yani nitelik olu kalirdi
   ("durumu bilinmiyor" ve yigin dilimlerinin aciklamasi tam oradan geliyor). */
.vs-s a, .vs-s [title], .vs-bar [title] { pointer-events:auto; }
/* ⚠️ Odak halkasi `.vs{overflow:hidden}` tarafindan KIRPILIYORDU (klavye kullanicisi
   odagin hangi kartta oldugunu goremiyordu). `.vc-hit`in kanitlanmis desenindeki gibi
   NEGATIF offset halkayi kirpma alaninin ICINE cizer. */
.vs-hit:focus-visible { outline:2px solid var(--primary); outline-offset:-2px;
  border-radius:var(--radius); }
/* Ikon: sol ustte cip DEGIL, sag ustte SOLUK filigran — 4 kutunun "sablon panel"
   gorunumunu kiran ayrinti. ⚠️ Secici `svg.ic` ICERMELI, yoksa global `svg.ic`
   (0,1,1) ayni ozgullukte kazanip 16px'e dusururdu. */
/* ⚠️⚠️ IKON ARTIK TAM ICERIDE — KIRPILMIYOR (kullanici: "ikonlar yarım görünüyor
   yani bozuk"). Eskiden `top:-9px; right:-9px` ile kasten kosedan TASIRILIYOR ve
   `.vs{overflow:hidden}` tarafindan kirpiliyordu ("editoryal motif" gerekcesiyle).
   Niyet ne olursa olsun sonuc YARIM BIR IKONdur ve taninmayi zorlastirir — AYNI
   SINIF sunucu kartinin OS filigraninda da yasandi ve orada da tam gorunur hale
   getirilerek cozuldu (`mask-size:contain`).
   ⚠️ Konum kartin KENDI dolgu ritmine oturur (`padding:14px 16px`) — rastgele bir
      offset degil; ikon icerikle ayni gorunmez izgarada durur.
   ⚠️ `overflow:hidden` KALIYOR: alt taraftaki pay cubugunun (`.vs-bar`) kosesini
      yuvarlayan sey o. Kirpma sorunu konumla cozulur, kirpmayi kaldirmakla degil.
   ⚠️ Secici `svg.ic` ICERMELI, yoksa global `svg.ic` (0,1,1) ayni ozgullukte
      kazanip 16px'e dusururdu (panelin tekrar eden tuzagi).
   ⚠️ `pointer-events:none` SART: dekoratif filigran `.vs-hit` ile ayni z-index'te ve
      DOM'da SONRA geldigi icin sag ust kosedeki tiklamalari YUTUYORDU. */
/* ⭐ IKON: eski "sag ust soluk filigran" yerine temanin KPI IKON CIPI
   (`.ax-kpi__icon`, 44px, tonlu zemin). Cip temanin, RENGI panelin tonundan.
   ⚠️ Secici `svg.ic` ICERMELI, yoksa global `svg.ic` (0,1,1) ayni ozgullukte
      kazanip ikonu 16px'e dusururdu (panelin bes kez isirdigi tuzak). */
.vs .ax-kpi__icon { color:var(--tone);
  background:color-mix(in srgb, var(--tone) 14%, transparent); }
/* ⚠️ Boyut TEMANIN TOKEN'INDAN (`--ax-icon-md` = 20px), sabit sayidan DEGIL:
   sabit 22px yazmak cipin ic ritmini bozuyordu. Kalinlik da temanin ikon
   diline (1.75) esitlenir — panelin 1.8'i cipte kaba duruyordu. */
.vs .ax-kpi__icon > svg.ic { width:var(--ax-icon-md, 20px);
  height:var(--ax-icon-md, 20px); stroke-width:1.75; }
/* ⭐ PAY ROZETI — demodaki `--up/--down` trend rozetiyle AYNI OLCULER, farkli anlam.
   Trend modifier'lari KULLANILMADI: elimizde zaman serisi yok, yon oku (▲/▼) uydurmak
   olurdu. Zemin formulu temanin kendi formulunun AYNISI (`color-mix(<renk> 14%)`),
   yalnizca kaynagi `--tone` — boylece rozet ikon cipiyle ayni ailede kalir.
   ⚠️ Sinif `.ax-kpi__delta` OLMALI: izgaradaki 2/2 yerlesimi TEMADA o sinifa bagli;
      `.ax-badge` yazilsaydi otomatik yerlesime dusup DOM sirasina bagimli olurdu. */
.vs .ax-kpi__delta { color:var(--tone);
  background:color-mix(in srgb, var(--tone) 14%, transparent); }
/* ⭐ ETIKET ("Toplam/Çalışıyor/Kapalı/Kısıtlı") = SOLID ROZET (kullanici: "sag
   ustteki [etiketlere] Solid badges'i uygula"). Sablon gercek `ax-badge
   ax-badge--solid` siniflarini basar; zemin yukaridaki palet eslemesinden tonu alir
   (solid govde: beyaz metin + 500 zemin — temanin kendi kuralindan).
   Yerlesim (sag ust, 1/2 hucre) temanin `:has()>.ax-kpi__label` kuralindan gelmeye
   devam eder — sinif listesine rozet eklemek secicinin eslesmesini BOZMAZ. */
/* Sifir bir OLAY DEGIL: renkle vurgulanmaz (0 kisitli sunucuyu kirmiziya boyamak yanlis) */
.vs.zero .ax-kpi__value { color:var(--fg-faint); }
/* ⚠️ `min-height:34px` KALKTI: eski 4-kolon duzeninde kartlari esit yukseklikte
   tutmak icin vardi, ama tema izgarasi zaten `align-items:stretch` ile esitliyor —
   sabit taban yalnizca karti gereksiz UZATIYORDU (kullanici: "fazla buyuk"). */
/* ⚠️ YAZI BOYUTU VE RENGI TEMADAN (`.ax-kpi__caption`: `--ax-text-xs` +
   `--ax-text-subtle`). Buraya `font-size` YAZILMAMALI: `style.css` tema CSS'inden
   SONRA yuklendigi icin ayni ozgullukte (0,1,0) KAZANIR ve temanin olcusunu sessizce
   ezerdi. */
/* ⭐ ALT SATIRIN TAMAMI ROZET (kullanici: "yazilarin HEPSINI demodaki badges soft
   tarzina yap — tutarsizlik var, 'kurulu sunucu' duz metin 'kotasi doldu' rozetti").
   Duz aciklamalar dahil her oge artik temanin GERCEK `ax-badge ax-badge--soft`
   sinifini tasir; gorunum kurallari yukaridaki palet eslemesinden gelir (govde
   temanin). Ayirici "·" SABLONDAN KALKTI: rozetler flex `gap` ile kendini ayirir. */
.vs-s { display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--ax-space-1) var(--ax-space-2); line-height:1.45; }

/* ⭐ PAY CUBUGU ARTIK TEMANIN `.ax-progress` BILESENI (`--sm` = 6px, pill track).
   Toplam kartinda temanin KENDI `--stacked` varyanti (track `display:flex; gap:2px`)
   filonun durum dagilimini gosterir — ayri bir bant acmadan.
   ⚠️ Kovalarin birbirini dislamasi SART, yoksa yigin butunu asar (views notu).
   ⚠️ DOLGU DUZ RENK (kullanici karari: "bar demodaki Deal pipeline gibi olsun") —
      pipeline'in dolgulari DUZ canli renkler (`--ax-accent`/`--ax-viz-*`), gradyan
      yok. Onceki gradyanli deneme geri alindi; renk kaynagi kartin tonu. */
.vs .ax-progress__fill { background:var(--tone); }
/* ⚠️ `min-width` HONESTY KURALI: dilim `flex-basis:0` ile paya gore buyur, ama 400
   sunucunun tepe oldugu bir filoda TEK sunucu 0px eder ve GORUNMEZ olurdu — nabiz
   seridinde birebir ayni karar (`_PULSE_MIN_SEG`) verildi. */
.vs .ax-progress--stacked .ax-progress__fill { background:var(--tone);
  flex-basis:0; min-width:3px; border-radius:0; }
/* ⭐ TOPLAM'IN YIGINI DIGER UC BARLA AYNI TASARIM (kullanici istegi): temanin
   `--stacked` varyanti dilim aralarina 2px bosluk koyar — diger barlar ise surekli
   iki-renkli serit. Bosluk kaldirilir; dilimler bitisik akar, yuvarlak ucu yine
   track'in `overflow:hidden`i verir. Dilim renkleri korunur (kova basina renk). */
.vs .ax-progress--stacked .ax-progress__track { gap:0; }
/* ⭐ CUBUGUN KALANI DA RENK TASIR (kullanici: "saglik durumu iyi bar yesil-KIRMIZI,
   kapali kirmizi-YESIL, askida turuncu-YESIL olmali"): track artik gri degil,
   kartin eksenine gore TAMAMLAYICI rengi tasir — cubuk iki parcali okunur:
   "su kadari boyle, KALANI soyle". Yesil kartta kalan = calismayanlar (kirmizi);
   kirmizi/turuncu kartta kalan = calisanlar (yesil).
   ⚠️ Toplam kartina UYGULANMAZ: onun yigini zaten tum kovalari kendi renkleriyle
      basiyor, kalan diye bir sey yok. */
.vs.s-on .ax-progress__track { background:var(--ax-danger-500); }
.vs.s-off .ax-progress__track,
.vs.s-lock .ax-progress__track { background:var(--ax-success-500); }
/* Kuruluyor = SU AN is yapiliyor -> nabiz. Yalniz gercek kurulum varken gorunur. */
.vs .ax-progress--stacked .ax-progress__fill.s-prov {
  animation:vs-pulse 1.5s ease-in-out infinite; }
@keyframes vs-pulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .vs .ax-progress--stacked .ax-progress__fill.s-prov { animation:none; } }

/* ⚠️⚠️ `.vst` 4-KOLON EZMESI TAMAMEN KALDIRILDI — TEMANIN KIRILIMLARIYLA SAVASIYORDU.
   Tema `.ax-col--3`u kirilimlara gore yonetiyor: >992px span 3 (4'lu satir) ·
   <=992px span 6 (2'li) · <=576px span 12 (tek). Bizim ezmemiz ise 1100px'te
   izgarayi `repeat(2,1fr)`e cekiyordu; 992-1100px araliginda kartlar HALA "span 3"
   diyordu ve 2 kolonluk izgarada 3 track istemek tarayiciya IMPLICIT kolon
   urettiriyordu -> satir 3 kolona cikip kartlar esitsizlesiyordu. Ezme kalkinca
   sorumluluk tek kaynakta (temada) toplandi. */

/* ⚠️ HAREKET AZALTMA — TEK YERDEN, TUM ANIMASYONLAR.
   Olculdu: 8 animasyonun 6'si kapsam DISINDAYDI (spin, blink, toastIn, toastShrink,
   sv-share-pop, vs-pulse). Tek tek eklemek yerine genel bir kural: yeni bir animasyon
   eklendiginde kendiliginden kapsanir. Yuklenme gostergesi (`spin`) YAVASLATILIR ama
   TAMAMEN durdurulmaz — donmeyen bir spinner "takildi" izlenimi verir. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .spin, .spin svg, [class*="spinner"] {
    animation-duration:1.6s !important; animation-iteration-count:infinite !important; }
}

/* ---------------- VM listesi: eski kart kurallari tema turunda (2026-10-16) dosya sonundaki
   "SANAL SUNUCULAR" bolumune tasindi. Burada yalniz BASKA sayfalarin da kullandigi parcalar kaldi. */
/* Kopyala butonu (vm_detail: IP / sifre / uuid / hizli baglanti).
   ⚠️⚠️ BU YORUM BIR KEZ KENDINI VURDU — CSS YORUMLARINDA KACIS YOKTUR, ILK `*` + `/`
   DIZISI YORUMU KAPATIR. Onceki surumde aciklama metni `.hb-` + yildiz + `/.pager`
   yaziyordu; o yildiz-boluşum yorumu ORADA kapatti, kalan aciklama metni KURAL sanildi
   ve hemen ardindaki `.cbtn` ANA KURALI komple DUSTU (buton UA varsayilanina dondu:
   kare degil, kenarliksiz, `position:relative` yok -> "Kopyalandi" balonu viewport'a
   gore konumlanip EKRAN DISINA kacti). Kullanici "butonlar bozuldu" diye bildirdi.
   KURAL: CSS yorumuna yildiz-boluşum yazma; sinif listesi virgulle ayrilir.
   Ikon boyutu secicisi `svg.ic` ICERIR — aksi halde dosya sonundaki `svg.ic` kurali
   ayni ozgullukte (0,1,1) kazanip ciplerdeki ikonu bozar. */
.cbtn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  flex:none; border:1px solid var(--border-strong); border-radius:var(--radius-xs); background:var(--surface);
  color:var(--fg-muted); cursor:pointer; position:relative;
  transition:color .14s, border-color .14s, background .14s, opacity .13s; }
.cbtn:hover { color:var(--primary); border-color:var(--primary); }
.cbtn > svg.ic { width:15px; height:15px; }
.cbtn.xs { width:26px; height:26px; }
.cbtn.xs > svg.ic { width:13px; height:13px; }
.cbtn.copied { color:var(--ok); border-color:var(--ok); }
/* "Kopyalandı" balonu tema dilinde (kullanici istegi): koyu kutu yerine yesil
   SOLID rozet gorunumu — islem onayi oldugu icin success tonu. */
.cbtn.copied::after { content:"Kopyalandı"; position:absolute; bottom:calc(100% + 6px); right:0;
  background:var(--ax-success-500, var(--ok)); color:#fff; font-size:var(--t-xs); font-weight:600;
  padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; z-index:3;
  box-shadow:var(--shadow-sm); }
/* ⚠️ `.table-card` `overflow-x:auto` tasiyor; CSS'te bir eksen `visible` DEGILSE digeri
   de `auto`ya HESAPLANIR -> yukari acilan balon kabin ustunde KIRPILIYORDU (Ag
   sekmesindeki IP tablolari). O baglamda balon ASAGI acilir. */
.table-card .cbtn.copied::after { bottom:auto; top:calc(100% + 6px); }
/* Sahip hucresi (vm_import_history de kullanir) */
.vc-owner { display:inline; min-width:0; }
.vc-owner strong { font-size:var(--t-md); font-weight:600; color:var(--fg); }
.vc-mail { font-size:var(--t-xs); color:var(--fg-faint); }
/* Bos durum karti (host_pools de kullanir) */
.vc-empty { display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-3); padding:var(--sp-8) var(--sp-6); text-align:center; }
/* Tux — GERCEK logo geometrisi (Simple Icons, CC0; marka sahibine aittir).
   ⚠️ Elle cizilen siluet kullanici tarafindan REDDEDILDI ("linux'a benzemiyor"):
   penguen SILUETININ taninmasi orantilara bagli, yaklasik sekiller "blob" okunuyor.
   Yol ~5 KB ama STYLE.CSS'te TEK KEZ yasar (onbelleklenir + sikistirilir); karta
   yalnizca sinif adi eklendigi icin satir basina ek maliyet SIFIR. */
.os-logo--linux {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z'/%3E%3C/svg%3E");
}
/* Windows — klasik dort panelli bayrak (perspektifli). Ikon setlerinde marka
   politikasi geregi bulunmadigi icin geometri dogrudan yazildi.
   ⚠️⚠️ viewBox GENISLIGI 24 DEGIL 25.98: `mask-position:right` GORUNTU KUTUSUNUN sag
   kenarini hizalar, MUREKKEBIN degil. Olculdu — Tux'un murekkegi 24 birimlik
   viewBox'in sagindan 1.98 birim ICERIDE (x max 22.02), Windows bayragi ise kenara
   DAYALI (x max 24). Ayni kutuda ikisi 1.98 birim KAYIK duruyordu (kullanici
   bulgusu). viewBox'a AYNI bosluk eklenince murekkep sola kayar ve hizalanir;
   YUKSEKLIK 24 KALDIGI ICIN `contain` olcegi DEGISMEZ. */
.os-logo--win {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.98 24'%3E%3Cpath d='M0 3.449 9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699m10.949-8.099H24V24l-13.051-1.801'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.98 24'%3E%3Cpath d='M0 3.449 9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699m10.949-8.099H24V24l-13.051-1.801'/%3E%3C/svg%3E");
}
/* ⭐ OS LOGO CIPI (kurulum + yeniden-kur OS kartlari — kullanici: "genel ikon degil
   penguen/Windows olsun"): mask verisi yukaridaki iki kuralda,
   data URI dosyada TEK KEZ yasar. Buradaki kural yalniz kutuyu verir; renk
   `currentColor` -> cipin kendi token'indan gelir (iki temada da dogru). */
.os-logo { display:block; width:20px; height:20px; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }

/* ================= SUNUCU HAVUZLARI (/panel/host-pools) =================
   Havuz karti: baslik + uye sunucu tablosu. Kartlar sayfa basina birkac tane
   oldugu icin (havuz sayisi az) satir butcesi kaygisi YOK — VM listesindeki
   "satirda ikon yok" kurali burada gecerli degil.
   ⚠️ Tum renk/olcu TOKEN'dan; ham hex YOK (koyu tema kendiliginden dogru). */
.hp-list { display:flex; flex-direction:column; gap:var(--sp-4); }
/* Pasif havuz SOLUK ama OKUNUR kalir: "silinmedi, yalnizca satista degil" mesaji. */
.hp-off { opacity:.72; }
/* Kart basligi tema iskeletinde; boy node-detay dersiyle buyuk (14px okunmuyordu).
   Ikon flex satirda (Tailwind preflight svg=block tuzagi) + secici `svg.ic` ICERIR. */
/* ⚠️ SECICI LISTESI: ayni kural Paketler sayfasinda da gecerli — `vd-tbl-title`
   ile yazilinca baslik 20px yerine 14px cikiyordu (canli olculdu; node-detay
   turunun "başlıklar küçük" dersinin birebir tekrari). Yeni bir sayfa tema
   kartina gecerken bu listeye eklenir; kural TEK yerde kalir. */
.hp .ax-card__title, .plans-card .ax-card__title,
/* ⚠️ LISTEYE EKLENIR, KURAL KOPYALANMAZ: ikonu baslikla AYNI SATIRA getiren tek
   kural budur. `.ax-card__title` varsayilani `display:block`tir ve icindeki
   `svg` blok oldugu icin IKON ALT SATIRA DUSER (2026-09-28'de bayi kartlarinda
   olculdu). `.by-card` bayilik ekranlarinin kartidir; `tpl-card` KULLANILAMADI
   cunku o ayrica TABLO KOLON GENISLIKLERI dayatiyor (th:nth-child(1)=64px) ve
   onay kutusu kolonunu eziyordu (ayni dosyadaki yazili tuzak). */
.tpl-card .ax-card__title, .usr-tcard .ax-card__title,
.rd-card .ax-card__title, .izo-card .ax-card__title,
.by-card .ax-card__title, .kr-kart .ax-card__title,
.set-card .ax-card__title { display:flex; align-items:center;
  gap:var(--sp-3); flex-wrap:wrap; font-size:var(--t-2xl); }
.hp .ax-card__title > svg.ic,
.plans-card .ax-card__title > svg.ic,
.usr-tcard .ax-card__title > svg.ic,
.set-card .ax-card__title > svg.ic,
.rd-card .ax-card__title > svg.ic, .izo-card .ax-card__title > svg.ic,
.tpl-card .ax-card__title > svg.ic, .by-card .ax-card__title > svg.ic,
.kr-kart .ax-card__title > svg.ic {
  width:20px; height:20px; color:var(--primary); flex:none; }
.hp .ax-card__actions .ax-btn { white-space:nowrap; }
.hp-count { font-size:var(--t-lg); color:var(--fg-muted); font-weight:600;
  white-space:nowrap; margin-right:var(--sp-2); }
.hp-nodes { width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.hp-nodes th { text-align:left; padding:9px 18px; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.07em; color:var(--fg-faint);
  font-weight:700; background:var(--surface-2); }
.hp-nodes td { padding:10px 18px; border-top:1px solid var(--border); }
.hp-nodes td:first-child { font-weight:600; }
/* CPU doluluk cubugu temanin `ax-progress`i — halkalarla AYNI esikler
   (>=85 kritik, >=70 uyari) ki operator iki ekranda ayni rengi ayni anlamda okusun. */
.hp-cpu { display:inline-flex; align-items:center; gap:var(--sp-3); }
.hp-cpu .ax-progress { width:72px; flex:none; }
/* "Bu sunucu secilemez" sayisi — sifir bir olay DEGIL ama burada ENGEL, o yuzden
   soluk degil UYARI tonunda. */
.hp-no { color:var(--danger); font-weight:600; }
.hp-empty { padding:16px 18px; font-size:var(--t-sm); color:var(--fg-muted); }
/* Uye secim listesi: modal icinde kendi kaydirma alani (10+ sunucuda modal
   tasmasin). ⚠️ `overflow:hidden` DEGIL `auto` — icerik kirpilmamali. */
.hp-pick { max-height:clamp(160px, 34vh, 320px); overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:4px 12px 12px; background:var(--surface-2); }

/* --- Kurulum senaryosu karti (eski tek satirlik varsayim bandi kalkti:
   kullanici "şu paket kurulacakmış gibi alanını beğenmedim" dedi ve alan artik
   UC kontrol tasiyor -> panelin onayli form kalibinda KART). --- */
/* ⭐ IKI ACILIR KART TEK KURALDA (kullanici: "aynı boyutta yazsın"): "Kurulum
   Senaryosu" 20px, "Bir sunucu nasıl seçilir?" 16px idi. Ayri kurallarda
   tutmak drift uretiyordu -> ORTAK secici; panelin kart-basligi olcegi
   (`--t-2xl`) ikisinde de gecerli. */
.hp-scn { margin-bottom:var(--sp-5); }
.hp-scn > summary,
.hp-how > summary { display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6); cursor:pointer; list-style:none; flex-wrap:wrap; }
.hp-scn > summary::-webkit-details-marker,
.hp-how > summary::-webkit-details-marker { display:none; }
.hp-scn-t, .hp-how-t { display:inline-flex; align-items:center; gap:var(--sp-3);
  flex:none; font-family:var(--display); font-size:var(--t-2xl); font-weight:600; }
.hp-scn-t > svg.ic, .hp-how-t > svg.ic { width:20px; height:20px;
  color:var(--primary); flex:none; }
.hp-scn > summary:hover .hp-scn-t,
.hp-how > summary:hover .hp-how-t { color:var(--primary); }
.hp-scn-x, .hp-how-x { margin-left:auto; display:inline-flex; color:var(--fg-faint);
  transform:rotate(-90deg); transition:transform .15s; flex:none; }
.hp-scn-x > svg.ic, .hp-how-x > svg.ic { width:17px; height:17px; }
.hp-scn[open] > summary .hp-scn-x,
.hp-how[open] > summary .hp-how-x { transform:rotate(90deg); }
.hp-scn-b { padding-top:0; }
/* Aciklama TAM GENISLIK (kullanici istegi) — kart basliginda daraliyordu. */
.hp-scn-i { font-size:var(--t-xl); color:var(--fg-muted); margin:0 0 var(--sp-5);
  max-width:none; }
/* Senaryo sonucu seritleri (havuz kartindan buraya tasindi). */
.hp-scn-stats { margin-top:var(--sp-5); display:flex; flex-direction:column;
  gap:var(--sp-4); }
.hp-stats-lbl { display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--display); font-size:var(--t-lg); font-weight:700;
  color:var(--fg); }
.hp-stats-lbl > svg.ic { width:16px; height:16px; color:var(--primary); flex:none; }
.hp-scn label { font-size:var(--t-lg); margin-top:0; }
.hp-scn .faint { font-size:var(--t-md); }
/* ⚠️ `[hidden]` EZME TUZAGI: display veren her sinif `[hidden]`i geri vermeli
   (panelin belgeli dersi — `.err` global kurali `display:flex` tasiyor). */
/* Senaryo ozeti — "ne sectin" satiri (kontrollerin hemen altinda). */
/* Ozet SUMMARY icinde: kart kapaliyken de ne secildigi gorunur. */
.hp-scn-sum { display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:5px 12px; border-radius:var(--radius-pill); min-width:0;
  background:var(--primary-soft); font-size:var(--t-md); }
.hp-scn-sum > svg.ic { width:14px; height:14px; flex:none; color:var(--primary); }
.hp-scn-sum .faint { font-size:var(--t-md); }
.hp-scn-err[hidden] { display:none; }
.hp-scn-err { margin-top:var(--sp-4); }
.hp-scn-none { padding:8px 12px; border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm); color:var(--fg-muted); font-size:var(--t-md); }
/* Yalniz HTMX istegi sururken gorunur. */
.hp-busy { opacity:0; transition:opacity .15s; display:inline-flex;
  align-items:center; gap:var(--sp-2); }
.hp-busy > svg.ic { width:14px; height:14px; }
.htmx-request .hp-busy,.htmx-request.hp-busy { opacity:1; }
.hp-stale { display:inline-flex; align-items:center; gap:var(--sp-2);
  color:var(--warn); font-weight:600; font-size:var(--t-md); }
.hp-stale > svg.ic { width:14px; height:14px; }

/* Kurulum formundaki canli havuz ipucu (`phh-` oneki: `hp-*` havuz sayfasina ait,
   `.place-hint` de zaten var — ad cakismasi dersi). ⚠️ Ton sinifi ONEKLI: ciplak
   `ok`/`err` GLOBAL uyari-kutusu sinifidir, modifier olarak kullanilamaz. */
.phh { display:flex; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-3);
  padding:10px 14px; border-radius:var(--radius-sm); font-size:var(--t-md);
  background:var(--ok-soft); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent); }
.phh > svg.ic { width:16px; height:16px; flex:none; color:var(--ok); margin-top:1px; }
.phh-no { background:var(--warn-soft);
  border-color:color-mix(in srgb,var(--warn) 34%,transparent); }
.phh-no > svg.ic { color:var(--warn); }

/* --- "Bir sunucu nasil secilir" — motorun kapi listesi (acilir kart) --- */
/* Baslik/ok kurallari YUKARIDAKI ORTAK secicide (iki acilir kart ayni boyut). */
.hp-how { margin-bottom:var(--sp-5); }
.hp-how-b { padding-top:0; }
.hp-how-i { font-size:var(--t-lg); margin:0 0 var(--sp-5); }
.hp-gates { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; }
.hp-gate { display:flex; gap:var(--sp-4); padding:var(--sp-4) 0;
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.hp-gate:first-child { border-top:none; padding-top:0; }
.hp-gate-n { flex:none; width:26px; height:26px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--surface-2); color:var(--fg-muted); }
.hp-gate--stop .hp-gate-n { background:var(--danger-soft); color:var(--danger); }
.hp-gate--skip .hp-gate-n { background:var(--warn-soft); color:var(--warn); }
.hp-gate-b { display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.hp-gate-t { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:var(--t-lg); font-weight:600; }
.hp-gate-d { font-size:var(--t-lg); }

/* Havuz kartindaki ozet seridi — global `.stat-strip` dilini kullanir. */
.hp-sum { padding-top:0; }

/* Sira sutunu: denenme sirasi bilginin KENDISI (1. once denenir). */
.hp-th-n { width:26px; text-align:center; color:var(--fg-faint);
  font-variant-numeric:tabular-nums; }
.hp-nodes td.hp-th-n { font-weight:600; }
.hp-why { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.hp-nodes tr.hp-r-win { background:color-mix(in srgb,var(--ok) 6%,transparent); }
.hp-nodes tr.hp-r-win td:nth-child(2) { font-weight:700; }
.hp-nodes tr.hp-r-skip td:nth-child(2) a { color:var(--fg-muted); }

@media (max-width:640px) {
  .hp-nodes thead { display:none; }
  .hp-nodes td { display:block; border-top:0; padding:4px 18px; }
  .hp-nodes tr { display:block; border-top:1px solid var(--border); padding:8px 0; }
  .hp-nodes td.hp-th-n { display:none; }  /* dar ekranda sira sutunu gurultu */
}

/* --- Islem listesi (/panel/jobs) --- */
/* ⚠️ TABLO, KART DEGIL: binlerce donmus kayit dikey taranir; kart duzeni satir
   butcesini (<=40 dugum) 25 kat asardi. Zenginlestirme SATIR ICINDE kalir. */
.jl-t { font-weight:600; color:var(--fg); }
.jl-t:hover { color:var(--primary); }
/* Ikincil kimlik (baslatan / sahip) — kendi kolonunu hak etmiyor: genis, degisken
   ve tarama ekseninde degil. Alt satirda soluk durur. */
.jl-by { font-size:var(--t-xs); color:var(--fg-faint); margin-top:2px; }
/* ⚠️ Suzgec barinda auto-marj TEK ogede olmali (iki auto-marj serbest alani IKIYE
   BOLER — bu barda birebir yasandi). Tasiyici artik `.jl-right` sarmalayicisi. */
/* ⭐ SAYFA BASLIGI — panelin ONAYLANMIS `.vs` formulu bir seride uygulaniyor
   (kullanici duz kutuyu iki kez reddetti; YENI DIL ICAT EDILMEDI):
     1) ton IKONUN OLDUGU kosden yayilan yumusak radial isik,
     2) sag ustte SOLUK FILIGRAN ikon (`.vs > svg.ic` deseni),
     3) baslikta ton karesi (`.vs-h::before` deseni) — burada baslik ONUNDE dikey ray,
     4) alt kenara oturan ince ton seridi (`.vs-bar` imzasi).
   ⚠️ SERIT GENISTIR, KART DEGIL: `.vs`in `135% 105% at 100% 0%` yikamasi 1278px'lik
      bir seride sag ustte kucuk bir leke birakirdi — odak yaricapi genislige gore
      buyutulur (`60% 130%`) ve ikinci, cok soluk bir SOL isik dengeler.
   ⚠️ `overflow:hidden` SART (alt seridin kosesi + filigran tasmasi) — ama filigran
      KIRPILMAZ: konumu kutunun KENDI dolgu ritmine oturur (ikon yarim gorunmesi
      panelde IKI kez kullanici sikayeti oldu).
   ⚠️ `pointer-events:none`: filigran DOM'da sonra gelir; unutulursa sag ustteki
      tiklamalari yutar (panelde `.vs` ve `.vc`de birebir yasandi).
   ⚠️ Secici `svg.ic` ICERIR: global `svg.ic` (0,1,1) ayni ozgullukte kazanip 52px
      filigrani 16px'e dusururdu (panelin uc kez isirdigi tuzak).
   ⚠️ HOVER LIFT YOK: `.vs` tiklanabilir bir KART, bu baslik degil — hareket
      "tiklanabilir" sinyali verirdi. */
/* ⭐ SAYFA ACIKLAMASI — panelin YERLESIK `.info-box`i (kullanici: "İşlemler ayrı,
   açıklaması ayrı kutucuk içinde olsun"). Yeni gorsel dil ICAT EDILMEDI; yalnizca
   kalici bir aciklamaya uygun iki ayar:
     - `.info-box` varsayilan `margin:12px 0` -> baslikla arasindaki bosluk sayfa
       ritmine cekilir,
     - metin `--fg-muted`: kalici bir aciklama uyari kadar bagirmamali (`.info-box`in
       kendi `--fg`si gecici notlar icin dogru, surekli gorunen metin icin degil).
   ⚠️ ONCEKI IKI DENEME (kutulu baslik ve `.vs` formulu) KULLANICI TARAFINDAN
   REDDEDILDI; ucuncusu panelin 24 sablonda kullandigi duz `.page-head` + ayri
   bilgilendirme kutusu duzenine dondu. */
/* ⭐ TABLO KARTI ACIKLAMALARI (kullanici: "açıklamalar çok küçük kalmış"):
   temanin `sm` alt basligi panelin uzun aciklama cumleleri icin kucuk kaliyordu —
   tum tablo kartlarinda ayni boy (tek dil; vm_detail/node_detail/physical). */
/* ⚠️ Iki tur surdu: `--t-md`(13) ve `--t-lg`(14) temanin sm'inden AYIRT EDILEMEDI
   (kullanici: "yazılar hala aynı") -> `--t-xl` (16px) — gercekten gorunur boy. */
.table-card > .ax-card__header .ax-card__subtitle { font-size:var(--t-xl); }
/* Fiziksel Sunucular satir aksiyonlari: esit boy butonlar tek satirda hizali;
   secondary saydam zeminli oldugu icin satir zemininde cerceve gorunur (yeterli).
   ⚠️ Buton metni sarmasin (iki satira dusen buton hizayi yine bozar). */
/* ⭐ rDNS satir butonlari Fiziksel Sunucular ile AYNI dil — kural
   KOPYALANMAZ, secici listesi genisletilir (panel kurali). */
.fiz-acts, .rd-acts { flex-wrap:nowrap; }
.fiz-acts .ax-btn, .rd-acts .ax-btn { white-space:nowrap; flex:none; }
.fiz-acts .ax-btn svg.ic, .rd-acts .ax-btn svg.ic { width:15px; height:15px;
  flex:none; }

/* --- Paketler (plans) --- modal ici kaynak-limiti kutusu + alan ipuclari.
   Sablondaki satir-ici ham px degerleri (13px/11px/14px/10px) BURAYA tasindi:
   olcek token'lari disinda font-size sablonda YAZILMAZ. */
.lim-box { margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-4);
  border:1px dashed var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface-2); }
.lim-box-t { font-weight:600; font-size:var(--t-lg); margin-bottom:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2); }
.lim-box-t .faint { font-weight:400; }
/* ⚠️ `svg.ic` ICERIR: icermezse global `svg.ic` (0,1,1) AYNI ozgullukte kazanir. */
.lim-box-t > svg.ic { width:16px; height:16px; flex:none; }
.plan-hint { font-size:var(--t-md); margin-top:var(--sp-1); line-height:1.45; }
/* ⭐ TAM EKRAN MODAL (kullanici istegi: "ekranda cok yazi olacagi icin"):
   genis ekranda neredeyse tam sayfa, dar ekranda kenardan kenara. Ic kaydirma
   modalin KENDISINDE — aksiyon cubugu (`m-actions`) sayfayla birlikte kaymasin
   diye govde ayri kaydirilir. */
.modal-overlay.modal-full .modal {
  width:min(1240px, 96vw); max-width:none; max-height:94vh;
  display:flex; flex-direction:column; }
/* ⚠️ `.tcust-body` da kapsamda (kapanis D3): tcust modallarinda dogrudan-cocuk
   form YOK (textarea'lar dis tedit formuna ait) — kural eslesmeyince modalin
   tamami (Tamam dahil) kayiyordu. */
.modal-overlay.modal-full .modal > form,
.modal-overlay.modal-full .modal > .tcust-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:var(--sp-2); }
/* Tam ekranda alanlar yan yana daha rahat: kutu icindeki form satirlari genisler. */
.modal-full .lim-box .form-row { gap:var(--sp-4); }
@media (max-width:720px) {
  .modal-overlay.modal-full .modal { width:100vw; max-height:100vh;
    border-radius:0; }
}
/* Kilitli RAM limiti alani (RAM girilene kadar) — nedeni ipucunda yaziyor. */
.form-modal input:disabled { opacity:.55; cursor:not-allowed; }

/* ⭐ PAKET SUZGEC PANELI: ciplerin ve aramanin TEK beyaz zeminde olmasi icin
   `.filter-bar`in yatay flex'i bu sayfada DIKEY iki satira cevrilir. */
.filter-bar.plans-filter { flex-direction:column; align-items:stretch;
  gap:var(--sp-3); }
.filter-bar.plans-filter .qf-bar { margin-bottom:0; }
/* Arama kutusu + butonlar AYNI SATIRDA (kutu buyur, butonlar sabit). */
.plans-search { display:flex; align-items:center; gap:var(--sp-3); }
.plans-search input { flex:1 1 auto; min-width:0; }
.plans-search .btn { flex:none; }
/* Ad kutusu tam ekran modalda tasmasin — icerige uygun genislik. */
.plan-name { max-width:420px; }

/* Bos durum kutusu — sablonda satir ici duzen yasagi. */
.plans-empty { text-align:center; padding:var(--sp-8) var(--sp-5); }
/* Satirda yonetici notu (kirpilir, tamami title'da). */
.plan-note { font-size:var(--t-md); max-width:260px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* Sapan sunucu rozeti sayinin yaninda; link oldugu icin alt cizgi yok. */
.plan-drift { margin-left:var(--sp-2); text-decoration:none; }
/* ⚠️ `.row-actions form{display:flex}` global — margin'i da oradan almali ki
   sablonda `style="margin:0"` tekrarlanmasin. */
.fiz-acts form, .rd-acts form { margin:0; }
/* Limit hucresi "RAM 4 / GB" diye kirilmasin (canli ekran goruntusu) — deger
   BIRIMIYLE birlikte tek parca okunur, kolon gerekirse genisler. */
.plans-card td .lim-v { white-space:nowrap; }
/* Silinmis paket bandi (VM detayi): ad UZERI CIZILI + "paket silindi" rozeti. */
.ym-plan-gone { display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-4) var(--sp-4); margin-bottom:var(--sp-3);
  border:1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--danger) 6%, var(--surface));
  font-size:var(--t-lg); line-height:1.55; }
.ym-plan-gone > svg.ic { width:18px; height:18px; flex:none; color:var(--danger);
  margin-top:2px; }
/* Silinmis varligin DONMUS adi: uzeri KIRMIZI cizili. Kural KOPYALANMAZ — sahip
   e-postasi icin secici listesi genisletildi (sv-old, panel geneli notr ad). */
.ym-plan-old, .sv-old { text-decoration-color:var(--danger); text-decoration-thickness:2px;
  font-weight:600; margin-right:var(--sp-2); }
/* Sahip hucresinde e-posta mono basiliyor; cizgi mono'da da ayni kalinlikta olsun. */
.sv-old.mono { font-weight:600; }
/* Sahip satirindaki "Değiştir": satir ici style yerine sinif (sablonda ham deger yok). */
.vd-owner-btn { margin-inline-start:var(--sp-2); }

/* Kilitli (readonly) alan: satir ici style yerine sinif — sablonda ham deger yok. */
.form-modal input.ro { opacity:.6; cursor:not-allowed; }
/* Silinemeyen pakette kare danger buton — gizlemek yerine nedeni title'da. */
.fiz-acts .ax-btn[disabled], .rd-acts .ax-btn[disabled] { opacity:.45;
  cursor:not-allowed; }

/* Denetim karti "Ayrinti" hucresi — uzun JSON tabloyu tasirmasin
   (vm_detail'den globale tasindi; node_detail de kullaniyor). */
/* ⚠️⚠️ ESKIDEN `nowrap` + `ellipsis` IDI: ayrinti tek satira KESILIYOR ve
   icerige hicbir yoldan ulasilamiyordu — Denetim Kaydi sayfasinda kullanicinin
   bildirdigi "Ayrıntı kırpık" kusurunun bu sayfadaki esi. Icerik artik insan
   dilinde bir cumle; SARAR, kirpilmaz. Genislik tavani sutunun digerlerini
   ezmemesi icin duruyor. */
.vd-aud-det, .usr-aud-det { max-width:420px; overflow-wrap:anywhere; }
.vd-aud td, .usr-tcard td { vertical-align:top; }

/* ⭐ DETAY KART BASLIGI — vm_detail'den GLOBALE tasindi (Fiziksel Sunucular da
   kullaniyor; kopyalamak drift uretirdi — tek-kaynak kurali).
   ⚠️ Ikon secicisi `svg.ic` ICERIR: sayfa-ici <style>'dayken `> svg` beraberligi
   sira ile kazaniyordu; globalde (0,1,2) ile ACIKCA kazanmali (belgeli tuzak). */
.vd-card-head { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:14px;
  padding-bottom:11px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.vd-card-head h2 { margin:0; font-size:var(--t-lg); }
.vd-card-head > svg.ic { width:18px; height:18px; color:var(--primary); flex:none; }
/* Tablo kartlarinin basligi: ikon h2'nin ICINDE yasar -> flex ile hizalanir
   (Tailwind preflight svg'yi block yapar; `.jd-head h2` dersiyle ayni cozum). */
.vd-tbl-title { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--t-lg); }
.vd-tbl-title > svg.ic { width:17px; height:17px; color:var(--primary); flex:none; }

/* ⭐⭐ ISLEMLER BASLIGI: bes turluk ozel `.card jp` bandi (yigin-kolon seridiyle)
   ALTINCI turda kullanici tarafindan reddedildi ("yeşil kırmızı göstergeler temaya
   hiç uygun değil") ve TAMAMEN kaldirildi — baslik artik panelin standart
   `ax-page-head` kalibi (vms/provision ile ayni; ezme kurali GEREKMEZ, ui.css verir).
   Zaman x sonuc verisi kaybolmadi: KPI kartlarinin icine tasindi (`.jk-spark`). */
/* ⭐ KPI KARTI ICI MINI AKTIVITE GRAFIGI — temanin "KPI + gomulu 40px spark" deseni
   (demoda 4 KPI kartinin dordu de kendi ikon-cipi renginde mini grafik tasir).
   ⚠️ Dolgu kartin `--tone`undan okunur: kartin sinif dizisi (s-tot/s-bad/s-prov/
      s-on) hem ikon cipini hem grafigi boyar — renk sapmasi yapisal olarak imkansiz
      (`--uc-mem` sapma sinifi dogamaz). Tonlar `.vs` canli paletinden = temanin
      kendi 500'leri; eski seridin AA-metin-tonu yesil/kirmizisi degil.
   ⚠️ `rx` YOK (bilincli): `preserveAspectRatio:none` yatay olcegi kolon sayisina
      gore degistirir, birim yaricap az kolonda yamuk hap uretirdi; temanin kendi
      yigin-bar deseni de kose yuvarlamasiz duz segment + zemin boslugu kullanir. */
.jk-spark { display:block; width:100%; height:40px; margin-top:var(--sp-2); }
.jk-spark rect { fill:var(--tone); }
/* Temanin `:has(>.ax-kpi__top)` kurali kart govdesini 2 kolonlu IZGARAYA cevirir —
   spark tam genislik almali, yoksa otomatik yerlesim onu ikinci kolona sikistirir. */
.ax-card__body > .jk-spark { grid-column:1 / -1; }
.jl-noop { font-size:var(--t-sm); color:var(--fg-faint); }
.jl-noop a { color:var(--primary); }
/* Suren is: satir hafifce vurgulanir — operator "su an ne kosuyor"u tararken
   gozunu tek noktaya cekmeli. Ton `--primary` (kuruluyor rayiyla ayni palet). */
.jl-live > td { background:color-mix(in srgb,var(--primary) 5%,transparent); }
.jl-run { color:var(--primary); font-weight:600; }
@media (max-width:860px) {
  .jl thead { display:none; }
  .jl td { display:block; border-top:0; padding:3px 16px; }
  .jl tr { display:block; border-top:1px solid var(--border); padding:8px 0; }
}
/* Baslatanin ROLU — "Panelden · x@y" tek basina yoneticiyi musteriden ayirmiyordu.
   ⚠️ Sinif adi `jl-role`: tek kelimelik `adm`/`ok` GLOBAL cakisma riski tasir. */
.jl-role { display:inline-block; margin-left:5px; padding:1px 6px; border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:700; background:var(--surface-3); color:var(--fg-muted); }
.jl-role.adm { background:var(--primary-soft); color:var(--primary); }
.jl-by a { color:var(--fg-muted); }
.jl-by a:hover { color:var(--primary); text-decoration:underline; }
/* Ayni rozet islem DETAYININ baglam cipinde de kullaniliyor (tek kaynak). */
.jd-chip a { color:inherit; }
.jd-chip a:hover { color:var(--primary); text-decoration:underline; }
/* Elle tarih araligi — iki alan TEK bir kontrol gibi okunmali (arada tire). */
.jl-dates { display:inline-flex; align-items:center; gap:var(--sp-2); }
.jl-dates input { width:150px; font-size:var(--t-md); }
/* Arama kutusu esner (temasi `ax-input`tan gelir, genislik davranisi buradan). */
.jl-q { min-width:250px; flex:1 1 250px; max-width:420px; }
/* ⭐ SAG GRUP (kullanici istegi: "test işlemleri gizli yazısı ve Ara butonu en
   sağda"): auto-marj YALNIZ bu sarmalayicida — Ara butonunun eski `.jl-go`
   auto-marji KALDIRILDI (sinifla birlikte), yoksa ayni barda iki auto-marj
   serbest alani IKIYE BOLER (bu barda birebir yasanmis ders). VM listesindeki
   sag-grup deseninin esi. */
.jl-right { margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp-3); }
@media (max-width:820px){ .jl-right { margin-left:0; } }

/* ================= ŞABLONLAR (templates) — tema turu =================
   ⭐ Suzgec paneli paketler sayfasinin ONAYLI dilinde: cipler + arama + menuler
   TEK beyaz zeminde (`.filter-bar` yatay flex bu sayfada DIKEY uc satira doner). */
.filter-bar.tpl-filter { flex-direction:column; align-items:stretch; gap:var(--sp-3); }
.filter-bar.tpl-filter .qf-bar { margin-bottom:0; }
.tpl-search { display:flex; align-items:center; gap:var(--sp-3); }
.tpl-search input { flex:1 1 auto; min-width:0; }
.tpl-search .btn { flex:none; }
/* Menuler: dar ekranda sarar, genis ekranda tek satir. ⚠️ Tema `ax-select`i %100
   genislik ister (sunucu havuzlari dersi) — burada icerik boyunda kalmali. */
.tpl-selects { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.tpl-selects .ax-select { width:auto; min-width:150px; flex:0 1 auto; }
/* Sira kolonundaki "oto" isareti — sablonda ham px yasagi. */
.tpl-auto { font-size:var(--t-sm); }

/* Ozellestirme degisken referansi (SAYFADA TEK KOPYA — `_cust_vars.html`). */
.cv-modal { max-width:820px; width:94vw; max-height:90vh; }
.cv-lead { margin:0 0 var(--sp-4); line-height:1.6; }
.cv-grid { display:grid; grid-template-columns:max-content 1fr;
  gap:var(--sp-2) var(--sp-5); align-items:baseline; line-height:1.55;
  font-size:var(--t-md); }
.cv-grp { grid-column:1/-1; font-weight:700; color:var(--primary);
  margin-top:var(--sp-3); }
.cv-grp:first-child { margin-top:0; }
.cv-ex { opacity:.85; }
/* Modal icindeki iki eylem butonu (referans + varsayilanla doldur) ortali. */
.cv-open { display:flex; justify-content:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-4); }
/* OVA hucresi — sablondaki ham px/duzen degerleri sinifa tasindi. */
/* `.ova-dl` duzen kurallari KALKTI (kapanis D10): `.cell-act` + `.ova-stack form`
   zaten kapsiyor; ad capa olarak markup'ta durur. */
.ova-meta { font-size:var(--t-sm); }
/* ⚠️ Ellipsis FLEX OGESINDE calismaz (kapanis D5): `.ova-kv` inline-flex olunca
   eski kural olu kaldi, uzun adres harf ortasindan sert kirpiliyordu —
   kirpma DEGERIN kendisinde. */
.ova-src > b { max-width:180px; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ova-upd { margin-top:var(--sp-1); }
/* Template durumu detay tablosu (tstat modali). */
.ts-host { font-size:var(--t-sm); }
.ts-row { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ts-row form { margin:0; }
.ts-err { font-size:var(--t-sm); max-width:240px; margin-top:var(--sp-1); }
.ts-ds { font-size:var(--t-sm); }
/* Sablon tablosu kolon dengesi (5 KOLON): "Islemler" nowrap oldugu icin icerigi
   kadar daralir, kalan alan Ad kolonuna gider. ⚠️ 6->5 kolona inince nth-child
   indeksleri BASKA hucrelere kayardi (yargic tuzagi) — kurallar 5 kolona gore
   yeniden yazildi: 3=OVA, 4=Sunucular. Eski 6-kolonlu duzen 1500px viewport'a
   sigmiyordu (Duzenle/Sil yatay kaydirmada kaliyordu — ekran goruntusu). */
/* ⚠️ `:not(.iso-card)` ŞART: ISO kartlari da `tpl-card` tasir (20px baslik kurali
   icin) ama tablolari 3 kolonlu — sablon tablosunun genislikleri oraya SIZIYORDU
   (nth-child tuzaginin ikinci ayagi).
   ⚠️ `:not(.al-card-wrap)` = UCUNCU AYAK (2026-08-19, canli olculdu): Uyarilar
   sayfasinin o gunku tablosu tpl-card icindeydi ve ILK KOLONU 64px'e ezilip
   baslik kelime kelime kiriliyordu. O tablo ayni gun hap-satira cevrildi —
   muafiyet artik inert AMA KALIR: al-card-wrap hala tpl-card tasiyor ve ileride
   tabloya donen biri ayni tuzaga sessizce duserdi. tpl-card'a tablo tasiyan HER
   yeni sayfa bu listeye eklenmeli — ya da kendi genisliklerini tasimali. */
.tpl-card:not(.tpl-repos):not(.iso-card):not(.al-card-wrap) th:nth-child(1) { width:64px; }
.tpl-card:not(.tpl-repos):not(.iso-card):not(.al-card-wrap) th:nth-child(3) { width:225px; }
.tpl-card:not(.tpl-repos):not(.iso-card):not(.al-card-wrap) th:nth-child(4) { width:235px; }
.tpl-card .row-actions { white-space:nowrap; }
/* OVA hucresi ic istifi: rozet+meta / kaynak / uyari / eylem — tek dikey ritim. */
.ova-stack { display:flex; flex-direction:column; gap:var(--sp-2);
  align-items:flex-start; }
.ova-stack form { margin:0; }
/* ⚠️ Kaynak/boyut satirlari butonla ESIT okunur (kullanici: "cok kucuk kalmis"):
   boyut zaten 12px = buton 12px'ti — kucuk OKUNMASININ nedeni soluk renk +
   ince agirlik. Boy VE renk birlikte (13/14/16 dersi): t-md + fg-muted. */
.ova-stack .ova-meta { font-size:var(--t-md); color:var(--fg-muted); }
/* "cok duz yazi" turu: deger KALIN + koyu, etiket muted, kaynakta 13px ikon
   (vm_detail `.info-lbl` eyebrow dilinin hucre ayagi). */
.ova-stack .ova-meta > b { color:var(--fg); font-weight:600; }
.ova-kv { display:inline-flex; align-items:center; gap:var(--sp-2); }
/* ⚠️ `svg.ic` ICERIR: global `svg.ic` (0,1,1) ayni ozgullukte kazanmasin. */
.ova-kv > svg.ic { width:13px; height:13px; flex:none; color:var(--primary); }
.tpl-dn { font-size:var(--t-sm); }
/* ===== VARLIK-SATIRI (dsc) AILESI — vcenter_hosts YERELINDEN GLOBALE TASINDI =====
   Kesif sayfasinin kullanici-onayli kart dili (ikon cipi + ad satiri + meta + sagda
   eylem). ISO Dosyalari sayfasi da ayni dili kullaniyor — kopyalamak drift uretirdi
   (`.vd-card-head`/`.stat-*` tasima emsali). Ham gap/padding'ler tasinirken TOKEN'a
   cevrildi (tema_dogrula olcek disiplini; kaymalar <=2px). */
.dsc-list { display:flex; flex-direction:column; gap:10px; }
.dsc-card { display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); margin:0; }
.dsc-ic { width:40px; height:40px; flex:none; display:inline-flex; align-items:center;
  justify-content:center; border-radius:var(--radius-sm);
  color:var(--primary); background:var(--primary-soft); }
/* ⚠️ `svg.ic` ICERIR: global `svg.ic` (0,1,1) ayni ozgullukte kazanmasin. */
.dsc-ic > svg.ic { width:19px; height:19px; }
.dsc-body { display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; flex:1 1 auto; }
.dsc-top { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.dsc-name { font-size:var(--t-md); font-weight:600; }
.dsc-top .ax-badge svg.ic { width:11px; height:11px; }
.dsc-meta { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  font-size:var(--t-sm); }
.dsc-act { flex:none; }
.dsc-act .ax-btn, .dsc-act .btn { white-space:nowrap; }
@media (max-width:640px){
  .dsc-card { flex-wrap:wrap; }
  .dsc-act { width:100%; display:flex; justify-content:flex-end; }
}

/* ===== BOLUM BASLIGI (nd-sec) — node_detail YERELINDEN GLOBALE TASINDI =====
   Etiketin kendisi ayirici (uppercase + hairline). ISO sayfasinin "Ortak ISO'lar /
   Müşteri ISO'ları" ara basliklari da ayni dil (eski 12px `.iso-sub` kalkti). */
.nd-sec { font-family:var(--display); font-size:var(--t-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--fg);
  margin:22px 0 10px; display:flex; align-items:center; gap:10px; }
.nd-sec::after { content:""; flex:1 1 auto; height:1px;
  background:color-mix(in srgb, var(--border) 60%, transparent); }

/* ISO Dosyalari — SUNUCU BASINA KENDI KARTI (kullanici: "her sey cok ic ice
   duruyor" -> tek dev kart icindeki hairline bolumler KALKTI; node_detail'in
   onayli bolum-karti dili). Tablolar kart kenarina tasar (table-card gorunumu),
   ara basliklar `.nd-sec` iceriden. */
.iso-card { padding-bottom:var(--sp-5); }
/* Kartlar arasi ritim (kullanici bulgusu: iki kart BITISIKTI — 0px olculdu).
   Sablonlar sayfasindaki `.tpl-repos` cozumunun ISO ayagi: panel geneli kart
   araligi --ax-space-8 = 32px (/panel/plans ile ayni). */
.iso-card + .iso-card { margin-block-start:var(--ax-space-8, 32px); }
/* ⚠️ display:contents: tembel yukleme koku sarmalayici KUTU OLMAKTAN CIKAR —
   icindeki sunucu kartlari sayfa akisina dogrudan katilir. AMA `+` SECICISI DOM
   AGACINA bakar, kutu agacina DEGIL (canli olculdu: sarmalayici SINIRINDAKI
   ciftler 0px kaldi) -> sinir ciftleri icin iki ek kural sart. */
#iso-rows { display:contents; }
#iso-rows + .iso-card { margin-block-start:var(--ax-space-8, 32px); }
.iso-card + #iso-rows > .iso-card:first-child { margin-block-start:var(--ax-space-8, 32px); }
/* ISKELET NIHAI dosya satirini taklit eder (ad + boyut + anahtar + sil) — iki
   yukleme metaforu (iskelet + dipnot metni) TEK metafora indi; kart sayisi =
   gercek node sayisi (skel_nodes) -> dolumda layout shift 0 (yargic recetesi). */
.iso-skel { padding:0 var(--sp-5) var(--sp-2); }
.iso-skel-row { display:flex; align-items:center; gap:var(--sp-4);
  padding-block:var(--sp-3);
  border-top:1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.iso-skel-row:first-child { border-top:0; }
.iso-skel-num { width:64px; margin-left:auto; flex:none; }
.iso-skel-sw  { width:36px; height:20px; border-radius:999px; flex:none; }
.iso-skel-btn { width:32px; height:32px; border-radius:var(--radius-xs); flex:none; }
/* Tarama gostergesi — basligin eylem yuvasinda (dipnot gibi okunmaz) */
.iso-scan { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-sm); color:var(--fg-muted); white-space:nowrap; }
.iso-scan > svg.ic { width:14px; height:14px; animation:iso-spin 1.2s linear infinite; }
@keyframes iso-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .iso-scan > svg.ic { animation:none; } }
/* ISO depolari tablosu: repo adi 3 satira kirilmasin (adres kolonu mono/uzun). */
.iso-repos .ax-table td:first-child { white-space:nowrap; }
/* Ic ice kart yok: repo tablosu dis `ax-card`in icinde duz tablo. */
.iso-repo-tbl { overflow-x:auto; }
.iso-repo-act { text-align:right; }
/* Kart icindeki metin ogeleri iceriden hizali.
   ⚠️ :first-of-type KULLANILMAZ — div TIPINE bakar ve kartin ilk div'i header'dir
   (panelin yazili dersi); bitisiklik kurali asagida. */
.iso-sec { margin-inline:var(--sp-5); }
.iso-card .ax-card__header + .iso-sec { margin-top:var(--sp-2); }
/* Bolum basligindaki ikon + sayac: ikon primary; rozet uppercase mirasindan muaf */
.iso-sec > svg.ic { color:var(--primary); }
.iso-sec .ax-badge { text-transform:none; letter-spacing:normal; }
/* ORTAK ISO'LAR — dosya satirlari HAFIF ZEMINLI hap satirlar (kullanici:
   "satir bir hafif renk icinde olsun ki anlasilsin satir gibi"); ad + boyut
   YAN YANA sol kumede, kontroller sagda. */
.iso-file-list { margin:0 var(--sp-5); display:flex; flex-direction:column;
  gap:var(--sp-2); }
.iso-file-row { display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-2) var(--sp-4); background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius:var(--radius-sm);
  transition:background-color .15s ease, border-color .15s ease; }
/* Satir hover vurgusu (ui-ux denetimi: kontrollu satirda hover geri bildirimi
   yoktu — tarama sirasinda goz hangi satirda oldugunu kaybediyordu) */
.iso-file-row:hover { border-color:var(--border);
  background:color-mix(in srgb, var(--surface-2) 72%, var(--border)); }
.iso-file-row .iso-file-name { flex:1 1 auto; min-width:0; display:flex;
  align-items:center; gap:var(--sp-3); flex-wrap:wrap; overflow-wrap:anywhere; }
/* Boyut ROZETTE (kullanici: "bir tık daha belirgin olsun") — ton/dolgu temanin
   soft rozetinden; yalniz zeminli satirda ayrissin diye beyaz zemin verildi.
   ⚠️ Zemin ezilirken METIN RENGI DE sabitlenir: rozetin kendi metni soft zemine
   gore secilmis — koyu temada --surface ustunde 2.61:1'e dusuyordu (olculdu). */
.iso-file-size { flex:none; }
.iso-file-row .iso-file-size.ax-badge { background:var(--surface);
  color:var(--fg-muted); }
.iso-vm-card .iso-file-row .iso-file-size.ax-badge { background:var(--surface-2); }
/* Zeminli musteri kutusunun ICINDE satirlar BEYAZ (ters kontrast — kutu zaten
   surface-2; ayni tonda satir gorunmezdi) */
.iso-vm-card .iso-file-row { background:var(--surface); }
.iso-vm-card .iso-file-row:hover {
  background:color-mix(in srgb, var(--surface) 80%, var(--surface-2)); }
.iso-file-ctl { flex:none; min-width:150px; display:flex; justify-content:flex-end;
  align-items:center; gap:var(--sp-2); } /* rozet ile switch ayni kolonda hizali */
/* Durum etiketi anahtarin halini SOYLER ("müşteriye açık/kapalı") ve JS ile
   birlikte degisir; acikken yesil — kapaliyken soluk */
.iso-vis-lb { font-size:var(--t-sm); color:var(--fg-muted); white-space:nowrap; }
.iso-vis-lb.on { color:var(--ok); font-weight:600; }
/* Koyu temada --ok zeminli satirda 4.49:1 kaliyordu (12px metin esigi 4.5 —
   olculdu); hafif aydinlatma esigi gecirir, aciktaki gorunum DEGISMEZ */
:root[data-theme="dark"] .iso-vis-lb.on {
  color:color-mix(in srgb, var(--ok) 78%, #dfe9f5); }
/* Sil sayfanin en parlak ogesi olmaktan ciksin (38 -> 32px kare).
   ⚠️ `padding:0` SART: `.btn` tabani 0 16px padding tasir — 32px genislikte icerik
   kutusu 0'a dusup IKONU FLEX'TE EZIYORDU (canli olculdu: svg width 0). */
.iso-file-row .btn.danger.icon { width:32px; height:32px; min-height:0; padding:0;
  flex:none; display:inline-flex; align-items:center; justify-content:center; }
.iso-file-row .btn.danger.icon > svg.ic { flex:none; }
/* MUSTERI ISO'LARI — VM basina SINIRLI zeminli kutu (stat-blk dili; kart ortasini
   kesen tam-genislik bant KALKTI — yargic karari). */
.iso-vm-list { margin:0 var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.iso-vm-card { background:var(--surface-2); padding:var(--sp-3) var(--sp-4);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:var(--radius-sm); }
.iso-vm-head { display:flex; align-items:center; gap:var(--sp-4);
  padding-bottom:var(--sp-2); }
.iso-vm-head .dsc-name { text-decoration:none; }
.iso-vm-head a.dsc-name:hover { text-decoration:underline; }
.iso-vm-quota { flex:none; margin-left:auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:2px; }
.iso-q-line { display:inline-flex; align-items:baseline; gap:var(--sp-2); font-size:var(--t-sm); }
.iso-q-line > span { color:var(--fg-faint); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--t-xs); }
.iso-q-line > b { font-weight:600; }
.iso-q-bar { width:150px; }
/* Onekli ton modifier'lari (ciplak ok/err yasagi) — 75/90 esikleri nd-ds ile ayni;
   disk doluluk barina da hizmet eder */
.iso-warn .ax-progress__fill { background:var(--warn); }
.iso-crit .ax-progress__fill { background:var(--danger); }
.iso-ds-bar { margin-top:var(--sp-2); max-width:260px; }
.iso-empty { padding:var(--sp-5); text-align:center; font-size:var(--t-md);
  color:var(--fg-muted); }
/* Olcek: arama kutusu (kartlarin ustunde, swap bolgesinin disinda) */
.iso-search { display:flex; align-items:center; gap:var(--sp-3);
  margin-block-end:var(--ax-space-8, 32px); }
.iso-search input { flex:1 1 auto; min-width:0; }
.iso-search .ax-btn, .iso-search .btn { flex:none; }
/* "Araniyor…" gostergesi: HTMX istek surerken indicator'a .htmx-request ekler —
   tarama TTL'i dolmussa arama 8-12 sn surebilir, kullanici bekledigini GORMELI */
#iso-searching { display:none; }
#iso-searching.htmx-request { display:inline-flex; }
/* Musteri kutulari SAYFALAYICISI (panelin Ilk/Onceki/Sonraki/Son dili) */
.iso-pager { display:flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-4) var(--sp-5) 0; flex-wrap:wrap; }
.iso-pager span.ax-btn[aria-disabled] { opacity:.45; pointer-events:none; }
.iso-pg-info { font-size:var(--t-sm); color:var(--fg-muted);
  margin-inline:var(--sp-2); white-space:nowrap; }
.iso-pg-ind { display:none; }
.iso-pg-ind.htmx-request { display:inline-flex; }
/* SNAPSHOT'LAR sayfasi — ISO ailesinin kutu/satir dilini AYNEN kullanir
   (iso-vm-card/iso-file-row/iso-search/iso-pager GLOBAL); yalniz kucuk ekler */
.iso-search .ax-select { width:auto; flex:none; } /* tema select %100 ister */
.snap-hd-badges { display:flex; align-items:center; gap:var(--sp-2);
  flex-wrap:wrap; margin-inline-start:auto; }
.iso-vm-card .iso-vm-head .snap-mgr { flex:none; }
.snap-lb { min-width:0; overflow-wrap:anywhere; }
.snap-meta { display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.snap-when { font-size:var(--t-sm); color:var(--fg-muted); white-space:nowrap; }
/* API ANAHTARLARI — tema gocu. Kart ailesi ISO/havuz/ip-log ile ortak. */
/* Yeni uretilen anahtar: TEK SEFERLIK gosterim -> gorsel olarak one cikar
   (uyari tonlu zemin + mono kutu + kopyala). Eski hali ciplak <div class="ok">
   idi (global uyari-kutusu sinifi — panelin yazili yasagi). */
.apk-new { padding:var(--sp-5) var(--ax-space-6); margin-bottom:var(--sp-5);
  background:color-mix(in srgb, var(--ok) 7%, var(--surface));
  box-shadow:inset 4px 0 0 0 var(--ok); }
.apk-new-head { display:flex; gap:var(--sp-3); align-items:flex-start;
  font-size:var(--t-md); color:var(--fg); }
.apk-new-head svg.ic { width:18px; height:18px; flex:none; margin-top:2px;
  color:var(--ok); }
.apk-new-key { display:flex; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-4); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:var(--sp-3) var(--sp-4); }
.apk-key { flex:1; min-width:0; word-break:break-all; user-select:all;
  font-size:var(--t-md); color:var(--fg); }
.apk-filter { padding:var(--sp-5) var(--ax-space-6); margin-bottom:var(--sp-5); }
.apk-chips { margin-bottom:var(--sp-4); }
.apk-chip-lbl { font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.apk-form { margin:0; display:flex; gap:var(--sp-4); align-items:flex-end; }
/* ⚠️ margin:0 — panelin genel `label` alt marji flex-end hizasini bozuyor
   (ip_log turunda olculdu: buton 6px asagida kaliyordu) */
.apk-fl { display:flex; flex-direction:column; gap:var(--sp-1); margin:0;
  font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.apk-fq { flex:1; min-width:0; }
.apk-fq .apk-q { width:100%; }
.apk-fbtn { display:flex; gap:var(--sp-2); align-items:flex-end;
  align-self:flex-end; flex:none; }
.apk-card { overflow:visible; padding-bottom:0; }
.apk-card > .ax-card__header { border-start-start-radius:inherit;
  border-start-end-radius:inherit; }
.apk-card > .apk-table { overflow-x:auto; border-end-start-radius:inherit;
  border-end-end-radius:inherit; }
.apk-sm { font-size:var(--t-sm); }
.apk-th-right { text-align:right; }
.apk-th-right .row-actions { justify-content:flex-end; }
/* pasif anahtar satiri: kullanilamaz oldugu NET (IP havuzlarindaki desen) */
.apk-off td { background:color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.apk-off td:first-child { box-shadow:inset 3px 0 0 0 var(--danger); }
.apk-inline { margin:0; display:inline; }
/* ═══ IP kisiti ═════════════════════════════════════════════════════════════
   ⚠️⚠️ SATIR ICI ACILIR PANEL TERK EDILDI (kullanici iki kez bildirdi):
   (1) "IP yazamiyorum" — `.row-actions form { display:flex }` GLOBAL kurali
       (satir ici Pasiflestir/Sil formlari icin yazilmis) formu FLEX SATIRA
       cevirmis, girdi 26px'e cokmustu.
   (2) "tablo icinde gomulu kaliyor" — panel mutlak konumlu ve `<td>` icinde;
       `.table-card` `overflow-x:auto` tasidigi icin (bir eksen `visible`
       DEGILSE digeri de `auto`ya hesaplanir) panel KIRPILIYORDU. Bu, kaydirma
       kabini `visible` yapmadan cozulemez — o da dar ekranda tablo kaydirmasini
       oldururdu. Cozum: SAYFA BASINA TEK MODAL (ISO sayfasinin onayli deseni);
       modal `<body>` seviyesinde yasar, hicbir kap onu kirpamaz.
   ⚠️ `.apk-dd` ve `details.dd` kurallari BU SAYFADA ARTIK KULLANILMIYOR —
   olu kural birakmamak icin silindi (`details.dd` diger sayfalarda yasiyor). */
#ip-modal .apk-hint { margin:var(--sp-2) 0 0; }
/* ⚠️ `.modal .m-actions` UST MARJ TASIMAZ (diger modallar satir ici
   `style="margin-top:18px"` ile veriyor) — parola alani butonlara YAPISIYORDU
   (kullanici bildirdi). Marj kart ritminden gelir, satir icine yazilmaz. */
#ip-modal .m-actions { margin-top:var(--sp-6); }
.apk-hint { font-size:var(--t-sm); margin:var(--sp-2) 0 0; }
/* Yetenek listesi: hangi yetki NE YAPAR (kullanici istegi) */
.apk-cap-blok { margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid color-mix(in srgb, var(--fg-muted) 22%, transparent); }
.apk-cap-blok:first-of-type { margin-top:var(--sp-3); padding-top:0; border-top:0; }
.apk-cap-head { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.apk-cap-t { font-size:var(--t-xl); font-weight:600; color:var(--fg); }
.apk-cap-n { font-size:var(--t-sm); color:var(--fg-muted); }
/* text-wrap:pretty = son satirda TEK KELIME birakmaz ("budur." tek basina alt
   satira dusuyordu; destekmeyen tarayicida sessizce normal sarma) */
.apk-cap-d { margin:var(--sp-2) 0 var(--sp-3); font-size:var(--t-md);
  color:var(--fg-muted); line-height:1.55; max-width:80ch; text-wrap:pretty; }
/* ⚠️ SUTUNLAR LISTEDE TANIMLI, satirlar `subgrid` ile onlari DEVRALIR: her satiri
   kendi grid'i yapmak `max-content`i SATIR BASINA hesaplatir -> yol sutunu yine
   hizasiz kalir (canli olcum: 17 farkli sol kenar, "grid yaptim" yetmedi).
   Satirin kendi padding'i hizayi bozmaz cunku TUM satirlarda ayni. */
.apk-cap-list { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:58px minmax(0,1fr) max-content; gap:var(--sp-2); }
/* Yol sagda `margin-left:auto` ile duruyordu -> her satirin yolu FARKLI noktada
   basliyor, ortak "/api/v1/" oneki alt alta gelmiyordu ve goz 40 satiri
   tarayamiyordu. Sutunlar artik LISTEDEN devralinir (yukarida). */
.apk-cap-row { grid-column:1/-1; display:grid;
  grid-template-columns:subgrid; align-items:baseline; gap:var(--sp-3);
  background:var(--surface-2); border-radius:var(--radius-xs);
  padding:var(--sp-3) var(--sp-4); }
/* HTTP yontemi: sabit genislikte renk kodlu etiket (goz taramasi) */
.apk-cap-m { text-align:center; font-size:var(--t-xs);
  font-weight:700; letter-spacing:.03em; border-radius:var(--radius-pill);
  padding:2px 0; font-family:var(--mono); }
.apk-m-get { background:color-mix(in srgb, var(--info) 15%, var(--surface));
  color:var(--info); }
.apk-m-post { background:color-mix(in srgb, var(--ok) 15%, var(--surface));
  color:var(--ok); }
.apk-m-delete { background:color-mix(in srgb, var(--danger) 15%, var(--surface));
  color:var(--danger); }
.apk-cap-ne { min-width:0; font-size:var(--t-md); color:var(--fg);
  line-height:1.45; }
.apk-cap-yol { font-size:var(--t-sm); color:var(--fg-muted); white-space:nowrap; }
@media (max-width:820px) {
  .apk-cap-list { grid-template-columns:58px minmax(0,1fr); }
  .apk-cap-yol { grid-column:2; } }

.apk-head-act { display:flex; gap:var(--sp-3); align-items:center; flex:none; }
/* "Nasil kullanilir" acilir karti: mono ornek DUZ CUMLE ICINDE okunmuyordu
   (kullanici bulgusu) -> kendi zeminli kutusunda + kopyalanabilir */
.apk-how { margin-bottom:var(--sp-5); }
.apk-how-sum { display:flex; gap:var(--sp-3); align-items:center; cursor:pointer;
  padding:var(--sp-4) var(--ax-space-6); list-style:none; font-size:var(--t-md); }
.apk-how-sum::-webkit-details-marker { display:none; }
.apk-how-sum svg.ic { width:17px; height:17px; flex:none; color:var(--primary); }
.apk-how-sum::after { content:'▾'; margin-inline-start:auto; color:var(--fg-muted); }
.apk-how[open] .apk-how-sum::after { content:'▴'; }
.apk-how-body { padding:0 var(--ax-space-6) var(--sp-5); }
.apk-how-p { margin:var(--sp-3) 0 var(--sp-2); font-size:var(--t-md);
  color:var(--fg-muted); }
.apk-how-last { margin-bottom:0; }
.apk-code { display:flex; align-items:center; gap:var(--sp-3);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:var(--sp-3) var(--sp-4); }
.apk-code code { flex:1; min-width:0; overflow-x:auto; white-space:nowrap;
  font-size:var(--t-md); color:var(--fg); }
/* Yetki secimi: kutucuk listesi yerine ACIKLAMALI KART (kullanici: "yetkiler
   alani pek guzel durmuyor" + "tam yonetim ile whmcs arasinda ne fark var") */
.apk-scopes { display:flex; flex-direction:column; gap:var(--sp-3);
  margin-top:var(--sp-3); }
.apk-scope { display:flex; align-items:flex-start; gap:var(--sp-4); margin:0;
  padding:var(--sp-4) var(--sp-5); cursor:pointer; font-weight:400;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); transition:border-color .15s, background .15s; }
.apk-scope:hover { border-color:var(--primary); }
.apk-scope.on { border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.apk-scope input { width:auto; flex:none; margin:3px 0 0; }
.apk-scope-b { display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.apk-scope-t { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-weight:600; font-size:var(--t-lg); color:var(--fg); }
.apk-scope-d { font-size:var(--t-md); color:var(--fg-muted); line-height:1.5; }
/* Modal: aciklamalar TAM GENISLIK (dar modalda yarim kaliyordu) */
.apk-modal .apk-mrow { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-5); }
.apk-mfield { min-width:0; }
.apk-mfield input { width:100%; }
.apk-note { margin:var(--sp-2) 0 0; font-size:var(--t-md); color:var(--fg-muted);
  line-height:1.5; }
.apk-note-top { margin-top:var(--sp-1); }
@media (max-width:820px) { .apk-modal .apk-mrow { grid-template-columns:1fr; } }
.apk-mt { margin-top:var(--sp-5); }
.apk-pager { margin:var(--sp-3) var(--ax-space-6) var(--sp-4); }
@media (max-width:820px) { .apk-form { flex-wrap:wrap; } .apk-fbtn { width:100%; } }

/* IP KAYITLARI (yasal kayit listesi) — tema gocu.
   Kart ailesi ISO/havuz ile ortak (tpl-card iso-card); burada YALNIZ suzgec paneli
   ve tabloya ozgu mikro-duzen yasar. Cipler GLOBAL .qf-bar/.qf-chip. */
.ipl-note { margin-bottom:var(--sp-4); }
.ipl-filter { padding:var(--sp-5) var(--ax-space-6); margin-bottom:var(--sp-5); }
.ipl-chips { margin-bottom:var(--sp-4); }
.ipl-chip-lbl { font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.ipl-form { margin:0; }
/* Ust satir: arama kutusu TAM GENISLIK + Ara/Temizle sagda (IPv6 sigmiyordu ve
   sarma yuzunden buton kaymis gorunuyordu — kullanici bulgusu) */
.ipl-frow1 { display:flex; gap:var(--sp-4); align-items:flex-end;
  margin-bottom:var(--sp-4); }
.ipl-fq { flex:1; min-width:0; }
.ipl-fq .ipl-q { width:100%; }
/* Alt satir: suzgecler esit genislikte hizali (elle px yerine izgara) */
.ipl-frow2 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-4); }
/* ⚠️ `margin:0` ŞART: panelin genel `label` kurali ALT MARJ tasiyor; flex-end
   hizalamasi marj kutusuna gore yapildigi icin Ara butonu 6px asagi kaliyordu
   (canli olculdu: label alti 371, buton alti 377 — kullanici "kaymis" dedi). */
.ipl-fl { display:flex; flex-direction:column; gap:var(--sp-1); margin:0;
  font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
/* izgarada tema select'i %100 KALIR (bar'daki width:auto kurali burada gecersiz) */
.ipl-sel, .ipl-date { width:100%; }
/* ⚠️ align-self ŞART: kapsayicinin `align-items:flex-end`i bu kutuda 6px kayma
   birakiyordu (canli olculdu: kutu alti 371, buton alti 377) — kullanici
   "Ara butonu kaymis" dedi. Buton alt kenari arama kutusuyla BIREBIR hizalanir. */
.ipl-fbtn { display:flex; gap:var(--sp-2); align-items:flex-end;
  align-self:flex-end; flex:none; }
.ipl-fbtn .btn { margin:0; }
.ipl-hint { margin:var(--sp-3) 0 0; font-size:var(--t-sm); color:var(--fg-muted); }
/* kenardan-kenara kart: tablo disi bolum kendi yatay dolgusunu tema token'iyla
   tasir (IP havuzlarinda olculerek yazilan kural) */
.ipl-card > .ipl-table { overflow-x:auto; border-end-start-radius:inherit;
  border-end-end-radius:inherit; }
.ipl-card { overflow:visible; }  /* icinde acilir oge yok ama aile kurali korunur */
.ipl-nw { white-space:nowrap; }
.ipl-sm { font-size:var(--t-sm); }
.ipl-sub { font-size:var(--t-xs); margin-inline-start:var(--sp-2); }
.ipl-ip { text-decoration:underline dotted; text-underline-offset:3px;
  color:inherit; }
.ipl-ip:hover { color:var(--primary); }
.ipl-pager { margin:var(--sp-3) var(--ax-space-6) var(--sp-4); }
.ipl-vmpager { margin-top:var(--sp-4); justify-content:center; }
@media (max-width:900px) { .ipl-frow2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ipl-frow1 { flex-wrap:wrap; } .ipl-fbtn { width:100%; } }

/* ============================ DENETİM KAYDI (/panel/audit) ==================
   Yasal, append-only islem kaydi. Suzgec dili IP Kayitlari ile AYNI (cipler
   GLOBAL .qf-bar/.qf-chip, kart `tpl-card iso-card`, sayfalayici `iso-pager`).
   ⚠️⚠️ LISTE TABLODUR (kullanici karari, iki tur sonunda): once tablo -> kayit
   akisina cevrildi, kullanici akisi da begenmeyip "onceki tablo tasarimina don
   ama daha okunur olsun" dedi. Okunurluk YERLESIMDEN gelir: sabit sutun
   genisligi, artan genisligin TAMAMININ Ayrinti'ya gitmesi, iki satirli zaman,
   yapiskan baslik, zebra satir ve ust hizalama. */
.dnk-note { margin-bottom:var(--sp-4); }
.dnk-filter { padding:var(--sp-5) var(--ax-space-6); margin-bottom:var(--sp-5); }
.dnk-chips { margin-bottom:var(--sp-4); }
/* "Dikkat Çekenler" — kategori satırından AYRI (farklı eksen) */
.dnk-riskrow { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-4); }
.dnk-riskchip { gap:var(--sp-2); }
.dnk-riskchip svg.ic { width:13px; height:13px; }
/* ⚠️ BUNLAR SUS DEGIL ACIKLAMA METNIDIR (kullanici bulgusu: "çok küçük ve
   görünmüyorlar, okumak çok zor"). `--t-xs` (11px) panelin EN KUCUK olcusudur
   ve rozet/sayac gibi CHROME icindir; bu satirlar operatorun OKUMASI gereken
   cumleler — cevrelerindeki cipten (12px) ve etiketten de kucuk kaliyorlardi.
   Govde olcusune (13px) cikarildi; renk zaten `--fg-muted` (kontrast >=4.5). */
.dnk-riskhint { font-size:var(--t-md); color:var(--fg-muted); line-height:1.5; }
/* --- Kayıtlı süzgeçler ---------------------------------------------------- */
.dnk-svrow { display:flex; align-items:center; gap:var(--sp-2);
  flex-wrap:wrap; margin-bottom:var(--sp-4); }
/* ⚠️ Etiket satir ICI (kategori satirinin `display:block` etiketi degil) —
   akan satirda hizayi bozuyordu (kullanici bulgusu: "yamuk duruyor"). */
.dnk-svlbl { font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.dnk-sv { display:inline-flex; align-items:center; gap:var(--sp-1); }
/* Cip ve silme dugmesi AYNI YUKSEKLIKTE (30px): farkli olculer satiri yamultuyordu */
.dnk-svchip { height:30px; }
.dnk-svdel { margin:0; display:inline-flex; }
/* ⚠️ SILME AYRI BIR DUGME, cipin ICINDE DEGIL: cipe tiklamak suzgeci UYGULAR.
   Duz "×" yazisi dugme gibi durmuyordu (kullanici bulgusu) -> cerceveli
   kare ikon dugme, hover'da tehlike tonu. */
.dnk-svx { display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; cursor:pointer; flex:none;
  border:1px solid var(--border-strong); border-radius:var(--radius-xs);
  background:var(--surface); color:var(--fg-muted); }
.dnk-svx:hover { border-color:var(--danger); color:var(--danger);
  background:var(--danger-soft); }
.dnk-svx svg.ic { width:13px; height:13px; }
.dnk-svadd { margin:0; margin-inline-start:auto; display:flex;
  align-items:center; gap:var(--sp-2); }
.dnk-svad { width:220px; min-height:30px; height:30px; padding-block:0;
  font-size:var(--t-sm); }
/* Risk rozeti olay satırının ikinci satırında; kategori metniyle aynı hizada */
.dnk-rb { margin-inline-start:var(--sp-1); font-size:var(--t-xs); }
/* --- Zaman çizelgesi: süzgeçle eşleşen kayıtların günlük dağılımı --------- */
.dnk-cizelge { display:flex; align-items:flex-end; gap:var(--sp-1);
  padding:0 var(--ax-space-6) var(--sp-4); }
.dnk-cz { flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-1); text-decoration:none; }
/* ⚠️ Kutu YUKSEKLIGI sabit, ICINDEKI cubuk oranli: cubugu dogrudan buyutmek
   satiri zipzip oynatirdi (en yuksek gun kutunun tamamini kaplar). */
.dnk-cz__bar { display:block; width:100%; height:34px; align-self:stretch;
  border-radius:var(--radius-xs); background:var(--surface-3);
  position:relative; overflow:hidden; }
.dnk-cz__bar::after { content:""; position:absolute; inset-inline:0; bottom:0;
  height:var(--h, 0%); background:var(--primary); opacity:.55; }
.dnk-cz:hover .dnk-cz__bar::after { opacity:1; }
.dnk-cz__lbl { font-size:var(--t-xs); color:var(--fg-muted); white-space:nowrap; }
@media (max-width:900px) { .dnk-cz__lbl { display:none; } }
.dnk-chip-lbl { display:block; margin-bottom:var(--sp-2);
  font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
/* ⚠️ EŞİT SÜTUN (kullanıcı isteği): akan `.qf-bar` dizisinde son cipler satırın
   ortasında "yarım" kalıyordu. Sütun sayısı sunucudan `--n` ile gelir; sabit
   yazılsaydı kategori eklendiğinde ızgara sessizce bayatlardı. */
.dnk-katgrid { display:grid; grid-template-columns:repeat(var(--n, 8), minmax(0, 1fr));
  gap:var(--sp-2); }
/* ⚠️ `.qf-chip` inline-flex + nowrap: ızgara hücresinde metin taşarsa cip büyüyüp
   sütun eşitliğini bozardı -> hücreyi doldur, taşanı kırp (tam metin `title`da). */
.dnk-kat { display:flex; justify-content:center; text-align:center;
  min-width:0; overflow:hidden; }
.dnk-form { margin:0; }
.dnk-frow1 { display:flex; gap:var(--sp-4); align-items:flex-end;
  margin-bottom:var(--sp-4); }
.dnk-fq { flex:1; min-width:0; }
.dnk-fq .dnk-q { width:100%; }
.dnk-frow2 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-4); }
/* ⚠️ `margin:0` ŞART: panelin genel `label` kurali ALT MARJ tasiyor ve
   `flex-end` hizalamasi marj kutusuna gore yapilinca buton asagi kayiyor
   (IP Kayitlari'nda olculerek yazilan kural — burada da ayni yerlesim). */
.dnk-fl { display:flex; flex-direction:column; gap:var(--sp-1); margin:0;
  font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.dnk-sel, .dnk-date { width:100%; }
.dnk-fbtn { display:flex; gap:var(--sp-2); align-items:flex-end;
  align-self:flex-end; flex:none; }
.dnk-fbtn .btn { margin:0; }
.dnk-hint { margin:var(--sp-3) 0 0; font-size:var(--t-sm); color:var(--fg-muted); }
/* Yapiskan baslik icin `overflow:hidden` OLAMAZ (kaydirma kabini keser);
   kart kosesi tablo kabinin kendi yaricapiyla korunur. */
.dnk-card { overflow:visible; }
/* ⚠️ TAM ORTA (kullanici istegi): `.iso-pager` akan bir dizidir ve ogeler sola
   yaslanir. `justify-content:center` grubun TAMAMINI ortalar. */
.dnk-pager { margin:var(--sp-4) var(--ax-space-6); justify-content:center; }
.dnk-pgform { margin:0; display:inline-flex; align-items:center; }
.dnk-pg { display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-inline:var(--sp-2); font-size:var(--t-sm); color:var(--fg-muted);
  white-space:nowrap; }
/* Acilir sayfa listesi: dar ve satira oturur (tema `select`i %100 genisler) */
.dnk-pgsel, .dnk-pgnum { width:auto; min-width:72px; min-height:30px;
  height:30px; padding-block:0; font-size:var(--t-sm); }
.dnk-pgnum { width:82px; }
.dnk-pg__t { color:var(--fg-muted); }
.dnk-bos { padding:var(--sp-8) var(--ax-space-6); text-align:center; }

/* ---------------------------------------------------------- KAYIT TABLOSU --
   ⚠️ SUTUN GENISLIGI SABIT (`table-layout:fixed` + `<colgroup>`): otomatik
   yerlesimde sutunlar icerige gore savruluyor, sayfa degistikce genislikler
   zipliyor ve goz izi kayboluyordu. Sabit yerlesimde ARTAN GENISLIGIN TAMAMI
   Ayrinti sutununa gider — okunurlugun asil kaynagi budur.
   ⚠️ `min-width` ŞART: dar ekranda sabit sutunlar ezilir; tablo kendi kabinda
   kayar (sayfa govdesi yatay kaymaz — panel kurali). */
.dnk-card > .dnk-table { overflow-x:auto; border-end-start-radius:inherit;
  border-end-end-radius:inherit; }
.dnk-tbl { table-layout:fixed; min-width:1080px; }
/* ⚠️ GENISLIKLER OLCULEREK DAGITILDI: ilk denemede İlgili 186px'ti ve sunucu
   adi "testi…" diye kirpiliyordu (#id + İşlem dugmesi 124px yiyor, geriye
   ~60px kaliyordu). Pay Olay/Kaynak/IP'den alindi; Ayrinti yine en genis. */
.dnk-c-ts { width:104px; }
/* ⚠️ Olay sutunu OLCULEREK genisletildi: 174px'te 50 satirin 12'sinde eylem
   adi sariyor ve o hucrenin kategori satirini asagi itiyordu (sutunlar arasi
   hiza bozuluyordu). 210px'te saran satir sayisi belirgin duser; TAMAMEN
   engellemek 380px isterdi ve o genislik Ayrinti'dan giderdi. */
.dnk-c-ev { width:210px; }
.dnk-c-kay { width:188px; }
.dnk-c-ilg { width:214px; }
.dnk-c-ip { width:116px; }
/* Cok satirli hucrelerde UST hizalama: ortalama, kisa hucreyi uzun hucrenin
   ortasina asiyor ve satirlar birbirine karisiyordu. */
.dnk-tbl td { vertical-align:top; }
/* Uzun listede basligin kaybolmamasi icin — kart kendi kabinda kaydigi icin
   `sticky` yalniz dikey eksende anlamli. */
.dnk-tbl thead th { position:sticky; top:0; z-index:1;
  background:var(--surface-2); }
/* Zebra + hover: 50 satirlik bir kayitta goz izini tutan sey satir ayrimi */
.dnk-tbl tbody tr:nth-child(even) { background:var(--surface-2); }
.dnk-tbl tbody tr:hover { background:var(--surface-3); }

/* ⚠️⚠️ ORTAK SATIR RITMI (kullanici bulgusu: "İlgili'deki mail yamuk duruyor").
   Sutunlarin cogunda hucre IKI SATIR: ustte kimlik, altta ikincil bilgi. Bu
   satirlarin YUKSEKLIGI serbest birakilinca, ilk satirinda DUGME olan İlgili
   sutunu (İşlem) digerlerinden yuksek kaliyor ve ikinci satiri asagi kayiyordu.
   Iki olcu SABITLENIR; boylece dort sutunun da 1. ve 2. satirlari ayni yatayda.
   ⚠️ Deger DUGMEDEN turetilir (ölçüldü: `ax-btn--sm` bu dolguyla 26px) — metin
   satirina gore secilseydi dugme yine tasardi. */
.dnk-l1 { display:flex; align-items:center; gap:var(--sp-1);
  min-height:26px; min-width:0; }
.dnk-l2 { display:flex; align-items:center; min-height:20px; min-width:0; }
.dnk-ts { white-space:nowrap; font-family:var(--mono); }
.dnk-ts__g { font-size:var(--t-sm); color:var(--fg); }
.dnk-tslink { color:var(--fg); text-decoration:underline dotted;
  text-underline-offset:3px; }
.dnk-tslink:hover { color:var(--primary); }
/* Olay adi da detay sayfasina baglanir (asil tiklanan yer orasi) */
.dnk-evlink { color:var(--fg); text-decoration:none; }
.dnk-evlink:hover { color:var(--primary); text-decoration:underline; }
/* ⚠️ 11px METINDE `--fg-faint` OKUNMUYOR (olculdu: kontrast 3.96 < 4.5).
   `--fg-faint` bu sayfada yalniz METIN OLMAYAN isaretlerde (ok/kare) kalir;
   okunmasi beklenen her satir en az `--fg-muted` tasir. Hiyerarsi renkten
   degil BOYUT ve AGIRLIKTAN gelir. */
.dnk-ts__s { font-size:var(--t-sm); color:var(--fg-muted); }
.dnk-ev__ad { font-weight:600; color:var(--fg); font-size:var(--t-md); }
/* ⚠️ Kategori satiri e-posta satirlariyla AYNI OLCUDE (kullanici istegi):
   ikisi de kaydin ikincil kimlik bilgisi; farkli olculer satirlari kirilgan
   gosteriyordu. */
.dnk-ev__kat { display:block; font-size:var(--t-sm); color:var(--fg-muted); }
/* Kaynak: "Selim (Yönetici)" tek satır, e-posta altta (kullanıcı isteği) */
.dnk-kay { font-size:var(--t-sm); }
.dnk-kaynak { font-weight:600; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dnk-kaynak a { color:inherit; text-decoration:none; }
.dnk-kaynak a:hover { color:var(--primary); text-decoration:underline; }
.dnk-rol { font-size:var(--t-xs); font-weight:600; }
.dnk-rol--admin { color:var(--primary); }
.dnk-rol--mus { color:var(--fg-faint); }
/* ⚠️ E-POSTA RENGI (kullanici bulgusu: "pek görünmüyor"): `--fg-faint` bu
   boyutta okunmuyordu -> `--fg-muted` (govde metniyle ayni okunabilirlik
   sinifi; `--fg`den ayirt edilebilir kalmasi icin agirlik verilmiyor). */
/* ⚠️⚠️ YAZI AILESI DE BU SINIFIN ICINDE (kapanis denetimi bulgusu): `mono`
   yardimci sinifi sablonda DORT ayri yerde elle yaziliyordu ve İlgili
   sutunundaki e-postada UNUTULMUSTU — Kaynak mono, İlgili Inter cikiyordu.
   Kullanicinin yazili istegi "ikisi ayni olsun"du; ayrimin sablonda
   tekrarlanmasi, tam da o istegin sessizce bozulmasina yol acti.
   ⚠️ `.dnk-mail` = ADRES gorunumu; ikincil satirdaki ACIKLAMA metinleri
   (`panelin kendi görevi` · `oturum yok`) adres DEGILDIR -> `.dnk-alt`. */
.dnk-mail, .dnk-alt { font-size:var(--t-sm); color:var(--fg-muted);
  font-weight:400; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dnk-mail { font-family:var(--mono); }
.dnk-imp { display:inline-flex; align-items:center; gap:var(--sp-1);
  margin-top:var(--sp-1); font-size:var(--t-xs); color:var(--warn); }
.dnk-imp svg.ic { width:12px; height:12px; }
/* İlgili: sunucu · #id · [İşlem] üst satırda, ilgili kullanıcı altta */
.dnk-ilg { font-size:var(--t-sm); }
/* ⚠️ `margin-bottom` KALKTI: satir araligini artik ortak ritim belirliyor;
   ikisi birlikte ikinci satiri bir kez daha asagi itiyordu. */
.dnk-ilg__row { gap:var(--sp-2); }
.dnk-vm { font-weight:600; color:var(--fg); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dnk-vm:hover { color:var(--primary); text-decoration:underline; }
.dnk-id { font-size:var(--t-xs); color:var(--fg-muted); text-decoration:none;
  font-family:var(--mono); flex:none; }
.dnk-id:hover { color:var(--primary); }
/* ⚠️ "İşlem" panelin KENDI dugmesidir (`ax-btn--secondary ax-btn--sm`); burada
   yalnizca tablo satirina sigacak olcu ayarlanir. Kendi dugme dilimizi yazmak
   (once duz bag, sonra hap rozet) iki turda da tutmadi — tema degistiginde
   bayatlayacak ucuncu bir bilesen uretmek yerine mevcut bilesen kullanilir. */
/* ⚠️ Temanin `ax-btn--sm` bileseni 32px `min-height` tasir; ortak satir olcusu
   26px oldugu icin İlgili satiri 3px asagi kayiyordu (olculdu). Dugme SATIRA
   SIGDIRILIR — satir dugmeye gore buyutulseydi 50 satirin tamami uzardi. */
.dnk-isbtn { flex:none; gap:var(--sp-1); padding:0 var(--sp-3);
  min-height:26px; height:26px; line-height:1; font-size:var(--t-xs); }
.dnk-isbtn svg.ic { width:12px; height:12px; }
/* ⚠️ `.dnk-hedef` GORUNUM TANIMLAMAZ: gorunum `.dnk-mail`den gelir (tek
   kaynak, kullanici istegi "ikisi ayni olsun"); burada yalnizca bag davranisi. */
.dnk-hedef:hover { color:var(--primary); text-decoration:underline; }
.dnk-ipc { font-size:var(--t-sm); }
.dnk-ip { color:inherit; text-decoration:underline dotted;
  text-underline-offset:3px; }
.dnk-ip:hover { color:var(--primary); }
/* ⚠️ AYRINTI: en genis sutun ve KIRPMA YOK (kullanici bulgusu "Ayrıntı kırpık").
   Eski `.det` kurali `white-space:nowrap` + `ellipsis` ile satiri tek satira
   kesiyor ve icerige hicbir yoldan ulasilamiyordu. */
.dnk-det { font-size:var(--t-sm); }
.dnk-cumle { display:block; line-height:1.55; color:var(--fg);
  overflow-wrap:anywhere; }
.dnk-cumle + .dnk-more { margin-top:var(--sp-1); }
.dnk-kvs { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); }
.dnk-kv { display:inline-flex; align-items:baseline; gap:var(--sp-1);
  font-size:var(--t-xs); line-height:1.5;
  padding:var(--sp-1) var(--sp-2); border-radius:var(--radius-xs);
  background:var(--surface); border:1px solid var(--border);
  max-width:100%; overflow-wrap:anywhere; }
.dnk-kv b { color:var(--fg-muted); font-weight:600; }
/* ⚠️ "Tüm Alanlar" BIR DUGMEDIR (kullanici: "pek görünür değil"): soluk bir
   metin bagiyken cumlenin altinda kayboluyordu. `<summary>` panelin ikincil
   dugmesiyle AYNI recete (cerceve + zemin + yuvarlak kose) ile cizilir. */
.dnk-more > summary { cursor:pointer; display:inline-flex; align-items:center;
  gap:var(--sp-2); list-style:none;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-xs);
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--fg-muted); font-size:var(--t-xs); }
.dnk-more > summary:hover { border-color:var(--primary); color:var(--primary); }
.dnk-more > summary::-webkit-details-marker { display:none; }
.dnk-more > summary::after { content:"▾"; font-size:var(--t-xs); opacity:.7; }
.dnk-more[open] > summary::after { content:"▴"; }
.dnk-more-n { font-weight:600; white-space:nowrap; }
/* Alan sayisi ayri bir sayac rozeti — metne yapisik parantez okunmuyordu */
.dnk-more-c { display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; padding:0 var(--sp-1); border-radius:var(--radius-pill);
  background:var(--surface-3); color:var(--fg-muted);
  font-size:var(--t-xs); font-weight:700; font-variant-numeric:tabular-nums; }
.dnk-kvs--open { margin-top:var(--sp-2); }
/* ---------------------------------------------------- KAYIT DETAY SAYFASI -- */
.dnk-dcard { padding:0 0 var(--sp-5); margin-bottom:var(--sp-5); }
.dnk-riskbar { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-5); }
.dnk-riskaci { font-size:var(--t-sm); color:var(--fg-muted);
  margin-inline-end:var(--sp-5); }
/* Anahtar/deger izgarasi: anahtarlar sabit sutunda, degerler akar */
.dnk-dgrid { display:grid; grid-template-columns:180px minmax(0, 1fr);
  gap:var(--sp-3) var(--sp-5); padding:0 var(--ax-space-6); }
.dnk-dkey { font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
.dnk-dval { font-size:var(--t-sm); color:var(--fg); min-width:0;
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.dnk-dwrap { display:block; overflow-wrap:anywhere; }
.dnk-dcumle { font-size:var(--t-md); line-height:1.55; display:block; }
.dnk-dref a { display:inline-flex; align-items:center; gap:var(--sp-1);
  color:var(--fg); text-decoration:none; font-weight:600; }
.dnk-dref a:hover { color:var(--primary); text-decoration:underline; }
.dnk-dref svg.ic { width:13px; height:13px; opacity:.7; }
/* Ham JSON: kapali acilir kutu, kendi kabinda kayar */
.dnk-dham > summary { cursor:pointer; list-style:none; }
.dnk-dham > summary::marker { content:""; }
.dnk-dham > summary::-webkit-details-marker { display:none; }
.dnk-dham > summary::after { content:"▾"; margin-inline-start:auto;
  padding-inline-end:var(--ax-space-6); color:var(--fg-muted);
  align-self:center; }
.dnk-dham[open] > summary::after { content:"▴"; }
.dnk-dpre { margin:0 var(--ax-space-6); padding:var(--sp-4);
  border-radius:var(--radius-xs); background:var(--surface-2);
  border:1px solid var(--border); overflow-x:auto;
  font-size:var(--t-xs); line-height:1.5; color:var(--fg); }
/* Baglam tablosunda grup basligi */
.dnk-kgrup td { font-size:var(--t-xs); font-weight:700; color:var(--fg-muted);
  background:var(--surface-2); }
.dnk-ktbl { min-width:820px; }
@media (max-width:900px) { .dnk-dgrid { grid-template-columns:1fr; gap:var(--sp-1); } }
@media (max-width:1200px) { .dnk-katgrid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:900px) { .dnk-frow2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dnk-frow1 { flex-wrap:wrap; } .dnk-fbtn { width:100%; }
  .dnk-katgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* IP HAVUZLARI — tema gocu: 53 satir-ici stil token'li siniflara tasindi */
/* ⚠️⚠️ AYNI TUZAK ÜÇÜNCÜ KEZ (VM kartinda `.vc`, once panelin kendi kirpmasi):
   temanin `.ax-card`i `overflow:hidden` tasir -> IP Ekle/Sunucu Ata/Ayarlar
   ACILIR PANELLERI kisa kartlarda KARTIN ICINDE KIRPILIYORDU (bos havuzda 208px
   kart + 369px panel = 308px kesiliyor, olculdu; kullanici: "yarim cikiyor").
   Kural: icinde acilan oge olan kaba overflow:hidden VERME — kose yuvarlamasi
   kirpmaya muhtac degil, PARCALAR kendi kosesini yuvarlar (asagida).
   `padding-bottom:0`: bant ile kart alt kenari arasinda 18px beyaz serit
   kaliyordu (kullanici bulgusu) — alt bandin kendisi kartin sonu olmali. */
.ipp-card { overflow:visible; padding-bottom:0; }
.ipp-card > .ax-card__header { border-start-start-radius:inherit;
  border-start-end-radius:inherit; }
/* ic tablo karti: cerceve/golge kalkar (kart icinde kart agir duruyordu) ama
   overflow-x:auto KORUNUR (dar ekranda yatay kaydirma) + alt koseler kartin */
.ipp-card > .ipp-table { border:0; box-shadow:none; border-radius:0;
  border-end-start-radius:inherit; border-end-end-radius:inherit; }
.ipp-card .ax-card__header { flex-wrap:wrap; }
.ipp-counts { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ipp-cnt { text-decoration:none; }
.ipp-alert-link { text-decoration:none; }
/* kart kenardan-kenara (tpl-card tablo ailesi) — arac cubugu ICERIDEN akar:
   yatay dolgu basligin 24px'iyle (tema token'i) birebir, yoksa IP Ekle solda
   basliktan tasar + Ara sagda kart kenarina yapisir (canli olculdu) */
.ipp-actions { align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  padding-inline:var(--ax-space-6); }
.ipp-inline { margin:0; display:inline; }
.ipp-right { margin-inline-start:auto; display:flex; gap:var(--sp-2);
  align-items:center; flex-wrap:wrap; }
.ipp-search { margin:0; display:flex; gap:var(--sp-2); align-items:center; }
.ipp-q { width:190px; }
.ipp-dd-wide { width:min(92vw, 580px); }
.ipp-dd-mid { width:min(92vw, 460px); }
.ipp-dd-dar { width:min(92vw, 360px); }
.ipp-addrow3 { grid-template-columns:1fr 1fr 1fr; margin-top:var(--sp-3); }
.ipp-addrow2 { grid-template-columns:1fr 1fr; margin-top:var(--sp-3); }
.ipp-editrow { grid-template-columns:1fr 1fr; }
.ipp-poolrow { grid-template-columns:2fr 1fr; }
.ipp-hint { margin:var(--sp-2) 0 var(--sp-3); }
.ipp-hint0 { margin:0 0 var(--sp-3); }
.ipp-chk { margin-top:var(--sp-3); }
.ipp-mt10 { margin-top:var(--sp-3); }
.ipp-mt12 { margin-top:var(--sp-4); }
.ipp-mt16 { margin-top:var(--sp-5); }
.ipp-mt18 { margin-top:var(--sp-5); }
.ipp-pt4 { padding-top:var(--sp-1); }
.ipp-table { margin-top:var(--sp-4); }
.ipp-th-chk { width:28px; }
.ipp-th-chk input, .ipp-chkbox { width:auto; }
.ipp-th-right { text-align:right; }
.ipp-th-right .row-actions { justify-content:flex-end; }
/* kullanima kapali satir: soluklastirma DEGIL kirmizi bant (kullanici istegi —
   "kullanilamaz oldugu net olsun"); sol ray inset golge (dar seride radius dersi) */
.ipp-off td { background:color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.ipp-off td:first-child { box-shadow:inset 3px 0 0 0 var(--danger); }
.ipp-off:hover td { background:color-mix(in srgb, var(--danger) 10%, var(--surface)); }
/* IP notu: INCE SERIT — soluk 11px yazi satirin icinde kayboluyordu
   (kullanici bulgusu). Sistem notu amber, admin'in kendi notu notr. */
.ipp-note { display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-2); padding:2px var(--sp-3); border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface-2);
  font-size:var(--t-xs); font-family:var(--sans); color:var(--fg-muted);
  line-height:1.35; max-width:100%; }
.ipp-note > svg.ic { width:12px; height:12px; flex:none; }
/* Admin'in KENDI notu uzun olabilir — tek satirda kalir, tamami `title`da */
.ipp-note:not(.ipp-note--sys):not(.ipp-note--inf) > span { overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* ⚠️ BILGI TONU: durum bildiren sistem notu (AutoVM'den geldi). Amber DEGIL —
   havuzu bastan asagi uyariyla doldurmak operatoru GERCEK uyarilara kor
   birakirdi (kullanici bulgusu: "tüm iplerde ... görecek ve aklı karışır"). */
.ipp-note--inf { border-color:color-mix(in srgb, var(--info, var(--primary)) 35%, transparent);
  background:color-mix(in srgb, var(--info, var(--primary)) 8%, var(--surface));
  color:var(--fg-muted); }
.ipp-note--inf > svg.ic { color:var(--info, var(--primary)); }
.ipp-note--sys { border-color:color-mix(in srgb, var(--warn) 45%, transparent);
  background:var(--warn-soft); color:var(--warn); font-weight:600; }
.ipp-mini { font-size:var(--t-xs); }
/* IP hucresindeki 'Gecmis' eylemi: gercek buton (duz-yazi baglanti begenilmedi) */
.ipp-hist { vertical-align:middle; margin-inline-start:var(--sp-2); }
/* karantina donus satiri: etiket muted, tarih koyu/kalin */
.ipp-qwhen { font-size:var(--t-xs); color:var(--fg-muted); margin-top:2px;
  max-width:300px; }
.ipp-qwhen b { color:var(--fg); font-weight:600; }
/* hold aciklamasi: iki rozet yan yana duruyor -> not KENDI kutusunda, danger
   raylı (hangi rozete ait oldugu adiyla + gorsel olarak baglanir) */
.ipp-holdnote { display:flex; gap:var(--sp-2); align-items:flex-start;
  margin-top:var(--sp-2); max-width:320px; font-size:var(--t-xs);
  color:var(--fg-muted); line-height:1.45;
  background:color-mix(in srgb, var(--danger) 7%, var(--surface));
  border-radius:var(--radius-xs); padding:var(--sp-2) var(--sp-3);
  box-shadow:inset 3px 0 0 0 var(--danger); }
.ipp-holdnote b { color:var(--danger); font-weight:600; }
.ipp-holdnote svg.ic { width:14px; height:14px; flex:none; margin-top:1px;
  color:var(--danger); }
/* kuruluma kapali havuz: rozet TEK BASINA yetmiyordu (kullanici bulgusu) ->
   kartin kendisi isaretlenir: KIRMIZI sol ray + tonlu baslik zemini
   (amber denendi, kullanici kirmizi istedi — "kapali oldugu belli olsun") */
.ipp-pasif { box-shadow:inset 4px 0 0 0 var(--danger); }
.ipp-pasif .ax-card__header {
  background:color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.ipp-pasif .ax-card__title { color:var(--fg); }
.ipp-bulkbar { gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.ipp-bulklbl { font-size:var(--t-md); color:var(--fg-muted); font-weight:600; }
.ipp-scope-sep { margin-inline:var(--sp-2); }
/* IPv6 otomatik uretim blogu: hairline satir yerine zeminli/ikon cipli panel
   (kullanici: "pek gorunmuyor, daha anlasilir olsun") */
.ipp-blocks { display:flex; flex-direction:column; gap:var(--sp-3);
  margin:var(--sp-3) var(--ax-space-6) 0; }
.ipp-blkcard { display:flex; align-items:center; gap:var(--sp-4);
  background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:var(--radius-sm); padding:var(--sp-4) var(--sp-5); }
.ipp-blkic { width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:var(--radius-xs); color:var(--primary);
  background:color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.ipp-blkic svg.ic { width:18px; height:18px; } /* svg.ic SART (global 16px dersi) */
.ipp-blkmain { flex:1; min-width:0; }
.ipp-blkt { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-weight:600; font-size:var(--t-lg); }
.ipp-blkcidr { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:2px var(--sp-3); font-size:var(--t-md); }
.ipp-blkm { font-size:var(--t-md); color:var(--fg-muted); margin-top:2px; }
/* deger seridi: alt alta yigilmis etiketler yerine SAGDA dikey-hairline'li
   stat hucreleri (Satis Kapasitesi'nin onayli dili; 3. mikro-duzen denemesi) */
.ipp-blkstrip { display:flex; align-items:center; flex-wrap:wrap; flex:none; }
.ipp-blkstat { display:flex; flex-direction:column; gap:1px; min-width:0; }
/* ⚠️ ayirici zeminli panelde GORUNMELI: temanin --border VE --border-strong'u
   acik temada dusuk-alfa (olculdu: rgba(16,22,40,.08) / .14) — surface-2
   uzerinde kayboluyor. Cozum: OPAK metin renginden turet (--fg-muted her iki
   temada da gercek bir renk) -> tek kural iki temada da gorunur hairline. */
.ipp-blkstat + .ipp-blkstat {
  border-inline-start:1px solid color-mix(in srgb, var(--fg-muted) 26%, transparent);
  padding-inline-start:var(--sp-6); margin-inline-start:var(--sp-6); }
.ipp-blklbl { font-size:var(--t-xs); color:var(--fg-muted);
  text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.ipp-blkstat b { font-size:var(--t-md); color:var(--fg); font-weight:600; }
@media (max-width:900px) { .ipp-blkcard { flex-wrap:wrap; }
  .ipp-blkstrip { width:100%; }
  .ipp-blkstat + .ipp-blkstat { padding-inline-start:var(--sp-4);
    margin-inline-start:var(--sp-4); } }
.ipp-pager { margin:var(--sp-3) var(--sp-4) var(--sp-3); }
.ipp-blocks { margin-top:var(--sp-3); }
.ipp-blocks .iso-file-name > svg.ic { color:var(--primary); flex:none; }
.iso-note-pad { padding:var(--sp-2) var(--sp-5); }
/* Ortak ISO yukleme modali: progress + dosya secici */
.isoup-prog { margin-top:var(--sp-4); }
/* Ekran-okuyucu etiketi (bos th yerine) */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:640px){
  .iso-vm-head { flex-wrap:wrap; }
  .iso-vm-quota { margin-left:0; align-items:flex-start; width:100%; }
  .iso-file-row { flex-wrap:wrap; }
  .iso-file-ctl { min-width:0; }
}
/* ⚠️⚠️ KATMAN KOPRUSU — tema `.ax-switch` `@layer components` ICINDE yasar ve
   panelin KATMANSIZ genel `input{width:100%; padding; zemin; kenarlik}` kurali
   katmanli kurali KOSULSUZ ezer (KATMANLI kural KATMANSIZA daima kaybeder,
   ozgulluk BAKILMAZ — canli olcum: anahtar 373px'lik beyaz kutu cizildi).
   Temanin taban degerleri burada katmansiz geri kurulur; `:after` thumb'i
   katmanli kalabilir (panelde input:after kurali yok, cakisma dogmaz).
   KURAL: temanin form-kontrol bilesenini kullanan her yeni yuzeyde bu sinif
   panelin genel input kurallarina karsi olculmeli. */
input.ax-switch { width:36px; height:20px; padding:0; border:none;
  background:var(--ax-border-strong); border-radius:var(--ax-radius-pill);
  transition:background var(--ax-motion-fast, .15s); cursor:pointer; }
input.ax-switch:hover { border:none; }
input.ax-switch:focus { border:none; box-shadow:none; }
input.ax-switch:checked { background:var(--ax-accent, var(--primary)); }
input.ax-switch:focus-visible { box-shadow:var(--ax-focus-shadow); outline:none; }
input.ax-switch:disabled { cursor:not-allowed; }
/* ISO icindeki nd-sec ilk basligin ustune fazla bosluk acmasin */
.iso-node .nd-sec:first-of-type { margin-top:var(--sp-2); }
/* Musteri ISO kartindaki dosya satiri (nd-ds hairline dili, bar'siz).
   ⚠️⚠️ KAPSAM SART (kapanis denetimi 2026-08-24): bu blok eskiden CIPLAK
   `.iso-file-row` idi ve yukaridaki zeminli-hap kuralla (style.css ~2561) AYNI
   ozgullukteydi (0,1,0) — yalnizca DOSYA SIRASI sayesinde kazaniyordu ve
   `border-top`u zeminli hap satirlarina da SIZIYORDU. Ayarlar'daki logo
   onizleme satiri (`.iso-file-list` + `.iso-file-row`) da bu sizintiyi aliyordu.
   Kural kopyalanmadi; KAPSAMLANDI: yalnizca musteri ISO kartinin icinde
   gecerli. ⚠️ MINIMUM DEGISIKLIK: yalnizca secici daraltildi — deklarasyonlar
   (padding-block + border-top) AYNEN korundu. `background:none; border:0`
   eklemek DAHA SONRA geldigi icin ~2582'deki `.iso-vm-card .iso-file-row
   { background:var(--surface) }` kuralini ezer ve ISO sayfasindaki musteri
   satirlari beyaz zeminini KAYBEDERDI (kapanmis sayfada regresyon). */
.iso-vm-card .iso-file-row { padding-block:var(--sp-2);
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.iso-file-row .iso-file-name { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.iso-file-row .btn.icon { flex:none; }
/* Suren aktarim yuvasi: poll edilen kart + DISINDA duran Iptal formu yan yana
   (iptal formu poll bolgesinde olsaydi swap butonu koparirdi — kopmus-form dersi) */
.iso-dl-slot { margin:var(--sp-2) var(--sp-5) 0; display:flex; align-items:center;
  gap:var(--sp-3); }
.iso-dl-slot .iso-dl-card { flex:1 1 auto; min-width:0; }
.iso-dl-cancel { flex:none; }
/* Gozat "diskte var" isaret capasi — rozet tembel fragmandan DOM ile eklenir */
.iso-mark { display:inline-flex; margin-inline-start:var(--sp-2); }
.iso-mark:empty { display:none; }
/* Gozat kategori kartlari da `.iso-card` tasir -> ayni `.iso-card + .iso-card`
   ritmi iki sayfada TEK kuraldan gelir (ayri stack kurali gerekmez). */
/* OVA yukleme ilerlemesi (ham govde akisi). */
.ova-up-prog { margin-top:var(--sp-3); }
.ova-up-txt { margin-top:var(--sp-1); }
/* Sifre satiri: Göster/Gizle metni degisince buton genisligi OYNAMASIN. */
.pw-row { display:flex; gap:var(--sp-2); align-items:center; }
.pw-row input { flex:1 1 auto; min-width:0; }
.pw-row .btn { flex:none; min-width:96px; }

/* ⭐⭐ MODAL KATMANLARI TEMA OLCEGINDE — satir ici z-index YASAK.
   Canli olcum: `.modal-overlay` tabani `var(--ax-z-modal, 1200)`; sablonlarda
   yazili `z-index:210` (degisken referansi) ve `z-index:150` (ozellestirme)
   bu katmani DUSURUYORDU. `tcust` Duzenle modalinin ICINDE oldugu icin kendi
   yigin baglaminda kalip GORUNUYORDU; `custvars` ise SAYFA DUZEYINDE ve
   210 < 1200 oldugundan Duzenle modalinin perdesinin ARKASINDA kaliyordu
   (kullanici bulgusu: "acilan pencere gorunmuyor"). Olcuk artik temadan turer. */
.modal-overlay.tcust-layer { z-index:calc(var(--ax-z-modal, 1200) + 10); }
.modal-overlay.cv-layer    { z-index:calc(var(--ax-z-modal, 1200) + 20); }

/* (a) OVA Repolari karti ile suzgec paneli arasinda BOSLUK YOKTU (canli: 0 px) —
   tema gecisinde kartin `margin-bottom:28px`i dusmustu. Panelin kart ritmi
   `--ax-space-8` (olculdu: /panel/plans 32 px). */
.tpl-repos { margin-block-end:var(--ax-space-8, 32px); }

/* (b) HUCRE ICI EYLEMLER: ghost varyanti hucrelerden TAMAMEN kalkti — ghost
   dinlenme halinde zeminsiz/cizgisizdir ve duz metin gibi okunuyordu (kullanici:
   "butonlar bozulmus gorunmuyor"; temanin kendi tablo demolarinda da hucre ici
   gorunur eylem yoktur). Artik hucrede gorunur eylem = temanin CERCEVELI
   `--secondary --sm` varyanti; "N/M Hazır" cipi de `--secondary --sm`
   (tonal zemini cok soluktu — kullanici: "buton gibi durmuyor").
   Padding/renk EZMESI YOK — satir 336 dersi. */
.cell-act { display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.cell-act .ax-btn { flex:none; }
/* ⚠️ `svg.ic` ICERIR: global `svg.ic` (0,1,1) ayni ozgullukte kazanmasin. */
.cell-act .ax-btn > svg.ic { width:14px; height:14px; flex:none; }

/* ================= ŞABLONLAR — 6 ÖZELLİK =================
   ⭐ KAPSAMA SERIDI (Ö1): sunucu basina "kac sablon hazir / kac eksik".
   Tablo kartinin ICINDE, basligin hemen altinda. GORSEL DIL = onayli GLOBAL
   `.stat-blk` (zeminli panel + noktali-kilavuz satirlari + tabana sabit bar) —
   eski "ezik kutucuk" kurallari AYIKLANDI (ustune yazmak ozgulluk yarisi olurdu).
   `tpl-cov*` adlari test capasi olarak durur; kapsayici `.stat-strip` DEGIL
   (o 3 kolon dayatir, sunucu sayisi degisken -> auto-fill). */
/* ⚠️ auto-fill DEGIL: bos kolon yuvalari acip bloklari sola buzuyordu (3 blok
   274px + satirin kalani BOS — canli olculdu, kullanici "esit dagilsin tam
   ekran olsun" dedi). Kolon sayisi sablondan gelir: --cov-n = min(sunucu, 6);
   kac blok olursa olsun satir ESIT bolunur, 6+ alt satira sarar. */
.tpl-cov { display:grid; grid-template-columns:repeat(var(--cov-n, 3), 1fr);
  gap:var(--sp-4); padding:var(--sp-4) var(--sp-5) var(--sp-5); }
@media (max-width:1100px){ .tpl-cov { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .tpl-cov { grid-template-columns:1fr; } }
.tpl-cov-i.on { border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.tpl-cov-h { display:flex; align-items:center; gap:var(--sp-2); }
/* ⚠️ `svg.ic` ICERIR: global `svg.ic` (0,1,1) ayni ozgullukte kazanmasin. */
.tpl-cov-h > svg.ic { width:15px; height:15px; flex:none; color:var(--fg-muted); }
.tpl-cov-p { margin-left:auto; color:var(--fg); }
/* Sayilar noktali kilavuzun DEGER ucunda (`.stat-row > b` order:3 kuralini
   link sarmalayinca kaybederdik — `<a>` da ayni yuvaya oturur). */
.tpl-cov-n .stat-row > a { order:3; flex:none; text-decoration:none;
  font-weight:600; color:var(--primary); }
/* ⚠️ `color:inherit` SART: icteki <b> baska bir kuralla koyu metne dusuyordu —
   link rengi (mavi/amber) degerin KENDISINDE gorunmuyordu (canli olculdu). */
.tpl-cov-n .stat-row > a > b { color:inherit; }
.tpl-cov-n .stat-row > a:hover { text-decoration:underline; }
.tpl-cov-n .stat-row { font-size:var(--t-md); padding:var(--sp-1) 0; }
/* Bar blok TABANINA sabit (bloklar hizali — stat-blk'in yazili deseni). */
.tpl-cov-i > .ax-progress { margin-top:auto; }
/* Eksik sayisi UYARI tonunda: "bu sunucuya bu imajlardan kurulum YAPILAMAZ". */
.tpl-cov-n .stat-row > a.tpl-cov-miss { color:var(--warn); }

/* Ad hucresi meta satiri (kullanim + saglik rozetleri — Ö2/Ö5). */
.tpl-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.tpl-meta a.ax-badge { text-decoration:none; }
.tpl-meta a.ax-badge:hover { filter:brightness(.97); }
/* cloud-init ozellestirme: iki bolum YAN YANA (kullanici: "tek pencerede hepsi
   gorunsun") — alt alta 92vh'yi asip kaydiriyordu, 1240px'te yan yana sigar. */
.tcust-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);
  align-items:start; }
@media (max-width:900px){ .tcust-grid { grid-template-columns:1fr; } }
/* `.tpl-vmx` kalkti: vmx yolu artik ad `title`inda + Duzenle modalinda (tablo 5 kolon). */
/* Paylasimli-disk ipucu tonu — sablondaki tek ham renk fallback'i buraya tasindi (N7). */
.share-hint { color:var(--warn); }
/* Ic not (Ö8) — kirpilir, tamami title'da (paketlerdeki `.plan-note` dili). */
.tpl-notes { width:100%; box-sizing:border-box; resize:vertical; }

/* Repo saglik kolonu (Ö7). */
.tpl-repo-url { font-size:var(--t-sm); }
.tpl-repo-chk { font-size:var(--t-xs); margin-top:var(--sp-1); }
.tpl-repo-empty { text-align:center; padding:var(--sp-5); }
/* OVA onbellegini bosalt (Ö4) — HUCREDEN oupd modalinin danger bolgesine tasindi
   (nadir + yikici; hucrede tek kalici eylem). Renk temanin `--danger` ton
   modifier'indan gelir — ozel kural GEREKMEZ (eski ghost renk kurallari kalkti). */
.oupd-danger { border-top:1px solid var(--border); margin-top:var(--sp-5);
  padding-top:var(--sp-4); display:flex; flex-direction:column;
  gap:var(--sp-3); align-items:flex-start; }
.oupd-danger form { margin:0; }
/* ⚠️ `.qf-n` CSS'TE TANIMSIZDI: cip sayaci Paketler ve Sablonlar'da `<span class="qf-n">`,
   Kullanicilar'da `<b>` ile basiliyor -> AYNI bileşen iki yüzeyde iki görünüm
   (birinde kalın, digerinde stilsiz). Tek kaynak. */
.qf-chip .qf-n { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.qf-chip.on .qf-n { color:inherit; }
/* `.tpl-cov-hd` kalkti (kullanici: ust cumleyi sil) — kapsam ilani artik her
   blogun yuzde degerinin title'inda. */
/* Kart basligindaki OVA deposu MINI STAT paneli (duz cumle "cok sade"ydi):
   kapsama bloklariyla ayni noktali-kilavuz dili, minyatur zeminli panel. */
.tpl-store { display:flex; flex-direction:column; min-width:240px;
  background:var(--surface-2); padding:var(--sp-2) var(--sp-4);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius:var(--radius-sm);
  /* ⚠️ `align-items:stretch` SART (kapanis D2): tema `.ax-card__actions`
     kurali `align-items:center` MIRAS birakiyor — kolon-flex'te satirlar
     shrink-to-fit olup noktali kilavuz 16px'e cokuyordu. */
  align-items:stretch; }
.tpl-store .stat-row { font-size:var(--t-md); padding:var(--sp-1) 0; }
/* Dar ekran sigortasi (kapanis N3): store paneli basligi sikistirmasin. */
.tpl-card:not(.tpl-repos) > .ax-card__header { flex-wrap:wrap; row-gap:var(--sp-3); }

/* ===== SPEC SATIRLARI — node_detail YERELINDEN GLOBALE TASINDI =====
   ⚠️ TASIMA GEREKCESI (canli hata): `profil.html` bu siniflari kullaniyor ve
   yorumu "global (node_detail'den tasindi)" diyordu — AMA kural yalniz
   node_detail'in sayfa-ici <style>'indaydi. Sonuc: `/panel/profil` "Bilgiler"
   kartinin 7 satiri ve sagdaki iki kart arasi ritim CANLIDA TAMAMEN STILSIZDI
   (olculdu: `.nd-spec` display:block, grid yok, hairline yok; `.nd-stack`
   display:block, gap yok). Kopyalanmadi, TASINDI (panelin yazili kurali).

   Dil: etiket solda muted / deger sagda kalin / hairline ayirici — `dl.kv` ve
   kutucuk izgarasi kullanici tarafindan reddedildikten sonra ONAYLANAN duzen.
   ⚠️ Ayirici border-TOP: 2 kolonlu gridde `last-child` hilesi asimetrik kalir
   -> ilk IKI satir cizgisiz baslar. */
.nd-stack { display:flex; flex-direction:column; gap:var(--sp-5); }
.nd-spec { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--sp-8); }
.nd-row { display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--sp-5); padding:var(--sp-4) 0; font-size:var(--t-lg); min-width:0;
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.nd-spec .nd-row:nth-child(-n+2) { border-top:none; }
.nd-k { color:var(--fg-muted); flex:none; }
.nd-v { font-weight:600; text-align:right; min-width:0; }
.nd-row--wide { grid-column:1 / -1; }
/* ⚠️ Dar KAPTA (genis viewport'ta bile) tek kolon gerekebilir -> `--nd-1kol`
   modifier'i; medya sorgusu VIEWPORT'a bakar, kabin genisligine DEGIL. */
.nd-spec--1kol { grid-template-columns:1fr; }
.nd-spec--1kol .nd-row:nth-child(2) {
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
@media (max-width:900px){
  .nd-spec { grid-template-columns:1fr; }
  .nd-spec .nd-row:nth-child(2) {
    border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
}

/* ===== Hesap islemleri: SATIR TIPI EYLEM (ikon cipi + ad/aciklama + buton) =====
   Kullanicilar sayfasindaki Duzenle modali ve kullanici DETAY sayfasi ortak
   kullanir -> tek kaynak. ⚠️ Ikon CIP icinde sabit boyutlu: `.ax-btn` icine
   konan ciplak `svg.ic` global 16px kuralini alip flex kabinda eziliyor. */
.usr-acts { display:flex; flex-direction:column; gap:var(--sp-2); }
.usr-acts form { margin:0; flex:none; }
.usr-act { display:flex; align-items:center; gap:var(--sp-3);
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); }
.usr-act-ic { width:32px; height:32px; flex:none; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center; }
.usr-act-ic svg.ic { width:16px; height:16px; flex:none; }
.usr-act-ic.t-info { background:var(--info-soft); color:var(--info); }
.usr-act-ic.t-warn { background:var(--warn-soft); color:var(--warn); }
.usr-act-ic.t-danger { background:var(--danger-soft); color:var(--danger); }
.usr-act-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.usr-act-txt strong { font-size:var(--t-md); }
/* ⚠️ KONTRAST: `--fg-muted` 12px'te `surface-2` zeminde KOYU TEMADA 4.04'e
   dusuyordu (AA esigi 4.5) — kullanici DETAYINDA da (paylasilan sinif; benim
   ekledigim bir hata DEGIL, 2FA turunda olcerken ortaya cikti; acik temada da
   4.61 ile kilpayindaydi). Renk tam kontrasta dogru cekilir -> iki sayfa
   birlikte AA'ya gecer (tek kaynak ilkesi). */
.usr-act-txt .faint { font-size:var(--t-sm);
  color:color-mix(in srgb, var(--fg-muted) 62%, var(--fg)); }
/* Detay sayfasinda eylemler kart govdesinde yasar: kartin kendi dolgusu yok
   (tpl-card kenardan kenara) -> bolum kendi yatay dolgusunu tasir.
   ⚠️ DIKEY dolgu kisildi (kullanici: "bu alan ile altindaki 3 kart ve ustunde
   fazla bosluk var, bu kadar genis olmasina gerek yok"): eylem kartlarinin
   KENDI cercevesi zaten sinir ciziyor, kabin ustune bir de tam dolgu koymak
   ayni sinirdan iki kez odemek oluyordu. Yatay dolgu baslikla hizali KALIR. */
.usr-acts-row { padding:var(--sp-4) var(--ax-space-6) var(--ax-space-6); }

/* ===== GUVENLIK BANDI (Kullanicilar) — ONCELIKLENDIRME =====================
   Kullanici: "cok sadece bir yazi ve zemin, ayrica butonlarda kotu".
   Olculen sebep: `.qf-bar` HICBIR zemin/cerceve/dolgu tasimiyordu (transparent,
   border yok, padding 0) ve cipler 33px/12px-400/soluk kenarlikliydi (alfa .14)
   — hemen ustundeki 56px ikon cipli, 3xl rakamli KPI kartlarinin yaninda
   sayfanin EN EYLEME DONUK alani EN ZAYIF ogesiydi.
   Bant iki katmanli: n>0 -> `.usec-i` (tonlu hap + ikon cipi + buyuk sayi),
   n==0 -> `.usec-m` (kucuk, tonsuz, ikonsuz, saga itilmis "Temiz" kumesi).
   ⚠️ `.qf-bar`/`.qf-chip`e DOKUNULMADI: o aile apikeys/ip_log/plans/
      templates_page'de de yasiyor ve son ikisinde BEYAZ `.filter-bar` kartinin
      ICINDE — ona zemin/cerceve vermek orada "kart icinde kart" uretirdi
      (`.usr-acts-row` yorumundaki "ayni sinirdan iki kez odeme" hatasi).
   ⚠️ Ad `.usec`: `.usr-sec` PANELDE REDDEDILMIS bir yapinin adiydi
      (user_detail.html: "Eski .usr-sec ... KALKTI") — ad cakismasi dersi.
   ⚠️ Sol ray `border-left` DEGIL inset GOLGE: dar seritte yaricap gonye
      uretir (`ipp-pasif` turunun yazili dersi). */
.usec { --_rail:var(--ok);
  display:flex; align-items:center; flex-wrap:wrap;
  /* ⚠️ Kolon araligi OLCUMLE secildi: `--sp-5`(16) 1280px'te 12px, `--sp-4`(12)
     hala 2px tasiyordu (olculdu: gereken 922 / alan 920) — `--sp-3`(8) ile
     tek satirda kalir. Cok sayida konu yanarsa sarma DOGRU davranistir. */
  gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-3) var(--sp-5);
  margin-block-end:var(--sp-5);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:inset 3px 0 0 0 var(--_rail); }
.usec.r-danger { --_rail:var(--danger); }
.usec.r-warn   { --_rail:var(--warn); }
.usec.r-ok     { --_rail:var(--ok); }

/* --- HUKUM: sabit "Güvenlik:" etiketi DEGIL, BILGI tasiyan teshis --- */
.usec-v { display:inline-flex; align-items:center; gap:var(--sp-2); flex:none;
  font-size:var(--t-md); font-weight:600; color:var(--fg); }
/* ⚠️ Secici `svg.ic` ICERIR: `.usec-v svg` (0,1,1) global `svg.ic` (0,1,1) ile
   BERABERE kalir ve dosyada SONRA gelen kazanir (`.vd-warn` turunun dersi). */
.usec-v svg.ic { width:16px; height:16px; flex:none; color:var(--_rail); }
.usec-v b { font-weight:700; font-variant-numeric:tabular-nums;
  /* ⚠️ HAM `--_rail` DEGIL: tonlu token metin olarak 16px'te koyu temada 3.77
     ediyordu (AA 4.5). Ton METIN rengiyle karistirilir — sinyal korunur,
     okunurluk gelir (`.usec-ok` ve `.usr-count` ile ayni recete). */
  color:color-mix(in srgb, var(--_rail) 62%, var(--fg)); }

/* --- KATMAN 1: dikkat isteyenler (`.iso-file-row` zemin dili + `.usr-act-ic`
       cip dili, hap olcegine indirilmis) --- */
.usec-hot { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  flex:0 1 auto; min-width:0; }
.usec-i { --_t:var(--warn);
  display:inline-flex; align-items:center; gap:var(--sp-2);
  /* Asimetrik dolgu KASITLI: solda ikon cipi kendi bosluguyla gelir. */
  padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border-radius:var(--radius-pill); text-decoration:none; white-space:nowrap;
  background:color-mix(in srgb, var(--_t) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--_t) 38%, transparent);
  transition:background-color .15s ease, border-color .15s ease; }
.usec-i.t-danger { --_t:var(--danger); }
.usec-i.t-warn   { --_t:var(--warn); }
.usec-i.t-info   { --_t:var(--info); }
.usec-ic { width:22px; height:22px; flex:none; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--_t) 20%, var(--surface)); color:var(--_t); }
.usec-ic svg.ic { width:13px; height:13px; flex:none; }
.usec-t { display:inline-flex; align-items:baseline; gap:var(--sp-2); min-width:0; }
.usec-n { font-size:var(--t-xl); font-weight:700; line-height:1;
  /* ⚠️ Ayni kontrast dersi: ham ton light 4.48 / dark 3.25 ediyordu. */
  color:color-mix(in srgb, var(--_t) 62%, var(--fg)); }
/* ⚠️ ETIKET HICBIR DURUMDA SOLUKLASMAZ: durum TONLA anlatilir — kullanicinin
   defalarca reddettigi "ince/soluk metin" tuzagi. */
.usec-l { font-size:var(--t-md); font-weight:600; color:var(--fg); }
.usec-i:hover { background:color-mix(in srgb, var(--_t) 18%, var(--surface));
  border-color:color-mix(in srgb, var(--_t) 62%, transparent); }
/* Aktif suzgecte TON KORUNUR: `.qf-chip.on` gibi primary'ye boyamak, danger bir
   konuyu MAVI gosterirdi (hangi konuya baktigin kaybolur). */
.usec-i.on { border-color:var(--_t); box-shadow:inset 0 0 0 1px var(--_t); }

/* --- KATMAN 2: temizler (geri cekilmis) --- */
.usec-clean { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  /* ⚠️ Bu bantta auto-marj YALNIZ BURADA (Islemler turunun "tek auto-marj" dersi:
     ayni flex kapta iki auto-marj serbest alani IKIYE BOLER). */
  margin-inline-start:auto; flex:0 1 auto; min-width:0; }
.usec-ok { display:inline-flex; align-items:center; gap:var(--sp-1); flex:none;
  font-size:var(--t-sm); font-weight:600;
  color:color-mix(in srgb, var(--ok) 72%, var(--fg)); }
.usec-ok svg.ic { width:12px; height:12px; flex:none; }
.usec-m { display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill);
  font-size:var(--t-sm); line-height:1.35; white-space:nowrap; text-decoration:none;
  background:var(--surface-2); border:1px solid transparent;
  /* ⚠️ KONTRAST: ciplak `--fg-faint` 12px'te KOYU TEMADA 4.04 ediyordu (AA 4.5) —
     `.usr-act-txt .faint`teki AYNI hata. Geri cekilme KONTRASTLA degil
     BOY/AGIRLIK/ZEMIN/TONSUZLUK/KONUM ile yapilir. */
  color:color-mix(in srgb, var(--fg-faint) 62%, var(--fg)); }
.usec-m b { font-weight:700; color:inherit; }
.usec-m:hover { background:var(--surface-3); border-color:var(--border-strong); }
.usec-m.on { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }

/* Odak: `.usec` `overflow:hidden` TASIMIYOR -> pozitif offset kirpilmaz */
.usec-i:focus-visible, .usec-m:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .usec-i { transition:none; } }
/* Dar ekran: temiz kumesi kendi satirina iner (auto-marj kalkar) */
@media (max-width:1024px) { .usec-clean { margin-inline-start:0; flex-basis:100%; } }
@media (max-width:640px)  { .usec-v, .usec-hot { flex-basis:100%; }
                            .usec-i { flex:1 1 auto; } }

/* ===== KPI kartlarinda etiket + aciklama OKUNURLUGU =====
   Kullanicilar LISTESI ve kullanici DETAYI ayni dili kullanir (kullanici:
   "4 karttada bu 2 yaziyi sanal sunucularda oldugu gibi yap") -> tek kaynak.
   ⚠️ Etiket rozetinin zemini kartin `--tone`undan koyulastirilir; aciklama
   rozetinin METIN rengi de tondan gelir (yalniz zemini ezmek koyu temada
   kontrasti dusuruyordu — ISO turunun yazili dersi). */
#usr-cards .ax-kpi__label.ax-badge--solid,
#usr-dcards .ax-kpi__label.ax-badge--solid {
  /* ⚠️ %78 KOYU TEMADA YETMIYORDU: parlak tonlarda (yesil/amber) beyaz metin
     4.16 ve 3.50'ye dusuyordu (piksel olcumuyle; users LISTESINDE de vardi —
     kural ortak oldugu icin iki sayfa birlikte duzeldi). %58 her iki temada da
     AA'nin ustunde kalir ve ton ayrimi korunur. */
  background:color-mix(in srgb, var(--tone) 58%, #000); }
#usr-cards .ax-kpi__caption .ax-badge--soft,
#usr-dcards .ax-kpi__caption .ax-badge--soft {
  color:color-mix(in srgb, var(--tone) 62%, var(--fg));
  font-size:var(--t-md); font-weight:600; }

/* ============ AYARLAR (kart izgarasi) ==========================
   ⚠️ Kurallar sayfa-ici <style> blogundan GLOBALE tasindi: orada 67 ham px ve
   11 satir-ici stil vardi ve `tema_dogrula` sayfa-ici bloklari GORMUYOR (yani
   sayfa olcut-korumasizdi). Tasima sirasinda tum ham px degerleri token'a
   cevrildi (13.5/12.5/11.5px gibi olcek DISI degerler kalkti). */
/* Kart ici Kaydet satiri. ⚠️ `.m-actions` KULLANILAMAZ: o kural yalniz
   `.modal .m-actions` olarak tanimli — sayfada hic eslesmiyordu (eski
   settings.html'deki satir-ici `justify-content` fiilen NO-OP'tu). */
/* ⚠️ `gap` YOKTU (kullanici bulgusu 2026-09-16: "kaydet ve sina butonlari
   yapisik"): cubukta TEK oge varken gorunmuyordu, Uzak Depolama'da ikinci
   eylem eklenince iki buton BIRBIRINE DEGDI. SMTP'de gozden kacmisti cunku
   orada butondan once bir girdi var ve arasi dolu duruyor.
   ⚠️ Cozum kart basina degil BURADA: aksi halde eylem cubuguna ikinci bir
   dugme ekleyen her kart ayni kusuru yeniden uretirdi. */
.set-save { display:flex; justify-content:flex-start; margin-top:var(--sp-5);
  padding-top:var(--sp-4); border-top:1px solid var(--border);
  gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.set-card .ax-card__body > .nd-sec:first-child { margin-top:0; padding-top:0; border-top:0; }
.set-durum { margin-top:var(--sp-5); }
/* ===== SISTEM DURUMU (#s-durum) — SERVIS SERIDI + OLCUM KUTULARI ===========
   KATMAN 1 (Calisan servisler): hap-satirlar — iso-file-row RECETESI, KENDI
   sinifi (al-done-row emsali: ISO kurallari degisirse bu kart etkilenmesin).
   Cip `.alr-ic` ORTAK (ton `--_t` ile). KATMAN 2: sg-gorev/du-kutu ailesi,
   SUBGRID 2 YUVA (durum-rozeti yuvasi seride tasindi).
   ⚠️ `.sg-gorev.alr-hit` kurali ALARM ESIKLERI kartinindir — du-kutu artik
   KULLANMAZ ama kural SILINMEZ (alarm karti bozulur).
   ⚠️ `.sk-liste` KULLANILAMAZ: onun 5-satir subgrid sozlesmesi sayi-GIRISI
   kutulari icindir; buradaki sozlesme 2 yuvadir (baslik · satirlar). */
#s-durum { scroll-margin-top:var(--sp-6); }  /* khead rozeti + alarm karti capayla gelir */
/* Bolum basliginin sag saat metasi. nd-sec uppercase + display font tasir ->
   meta MUAF (iso-sec rozet muafiyeti emsali). order:1 -> hairline (::after,
   varsayilan order 0) baslikla saat ARASINDA esner. */
.du-sec { flex-wrap:wrap; }
.du-sec-saat { order:1; flex:none; margin-left:var(--sp-3);
  text-transform:none; letter-spacing:normal; font-family:var(--sans);
  font-weight:400; font-size:var(--t-sm); color:var(--fg-muted); }
.du-sec-saat b.mono { font-weight:600; color:var(--fg); }
/* Serit: 2 kolon izgara (8 satir = 4 sira — kart uzamasin). */
.du-serv { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-2) var(--sp-4); }
.du-srv { display:flex; align-items:center; gap:var(--sp-3); min-width:0;
  padding:var(--sp-2) var(--sp-4); background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius:var(--radius-sm); }
/* Ad ustte, TAM KUNYE altta (tur + teknoloji + port + gorev — kullanici:
   "admin api neymis hangi portta diye sormasin"). Kunyeler uzun -> yatay
   baseline dizilimi tasirdi; kolon duzeni iki metin satirina izin verir. */
.du-srv-ad { flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:2px; }
.du-srv-ad > b { font-weight:600; }
.du-srv-ad > small { color:var(--fg-muted); font-size:var(--t-sm);
  min-width:0; overflow-wrap:anywhere; line-height:1.45; }
.du-srv > .ax-badge { flex:none; }
/* ⚠️ SOFT-SUCCESS ROZETI surface-2 satirda 3.01 OLCULDU (belgeli sinif —
   kapanan-uyarilar hapindaki ayni deger). Cift BIRLIKTE sabitlenir:
   al-done-row'un KANITLI AA recetesi birebir (surface zemin + usec-ok metin
   karisimi). danger/warning soft ciftlerine DOKUNULMAZ — onlar panel
   genelinde AA-kanitli, ezmek yeni 3.41 sinifi acar (bu turda yasandi). */
.du-srv .ax-badge--success { background:var(--surface);
  color:color-mix(in srgb, var(--ok) 72%, var(--fg)); }
/* Ariza tonu — IKI-SINIFLI secici (dosya-sirasi tuzagi) + ray INSET golge
   (dar seritte border-left yaricapla gonye uretir — belgeli ders). */
.du-srv.du-srv-err { border-color:color-mix(in srgb, var(--danger) 40%, var(--border));
  box-shadow:inset 3px 0 0 var(--danger); }
.du-srv.du-srv-err .alr-ic { --_t:var(--danger); }
/* ⚠️ Eski `.du-dip` DUZ-YAZI kurali SILINDI (kullanici 2026-08-21: "proxy
   kartindaki mavi seritle ayni duzende olsun"): dipnot artik `.ssl-durum
   .ssl-durum-info` barinin ICINDE yasiyor ve TUM gorunumunu (yon, dolgu, marj,
   punto, cip) asagida yer alan TEK KAYNAK `.ssl-durum.not-bar` kuralindan alir —
   kural KOPYALANMADI, secici listesi genisletildi.
   ⚠️ Buraya `.ssl-durum.du-dip` icin ezme YAZMA: ortak kural dosyada DAHA
   SONRA geliyor ve AYNI ozgullukte (0,2,0) oldugu icin buradaki her deklarasyon
   OLU KOD olur (`.steps.jd-tl` dersinin tekrari — bir kez yasandi, olculdu).
   ⚠️ SOZLESME: govde TEK `<p>` (flex-gap cumlenin ICINE girer — belgeli ders),
   ikon ayri `.alr-ic` cipinde. Eski basliktaki "metin TEK span" ifadesi bu
   turda SILINDI: artik span IKON cipidir, metin `<p>`dedir ve ortak
   `... .du-dip > p` ezmesi YALNIZ dogrudan cocuk `p`yi hedefler.
   (eski `.du-dip > svg.ic` kurali da SILINDI — ikon boyutu `.not-bar`dan.) */
/* Acilir kartlar (komutlar + kutuphaneler) — pw-sync/act-sum ONAYLI kart-
   buton dili (32px tonlu cip + baslik/aciklama iki satir + donen chevron).
   Onceki iki deneme reddedildi: ciplak apk-how-sum (mail turu) VE mail-vsum
   fit-content cercevesi (kullanici: "butonlari sevmedim"). Iki kart yan yana
   2 kolonlu izgara; ACILAN `grid-column:1/-1` ile tam genislige yayilir
   (icerik yarim kolonda sikismasin; diger kartin kaymasi dogal accordion). */
.du-hows { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-4); margin-top:var(--sp-5); }
.du-how { min-width:0; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface); }
.du-how[open] { grid-column:1 / -1; }
.du-how-sum { display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); cursor:pointer; list-style:none;
  user-select:none; transition:background .14s; border-radius:inherit; }
.du-how-sum::-webkit-details-marker { display:none; }
/* ⚠️ Secici `svg.ic` ICERIR (global 16px ayni ozgullukte kazanirdi —
   belgeli cip tuzagi). */
.du-how-sum > svg.ic { width:32px; height:32px; padding:7px; flex:none;
  border-radius:var(--radius-xs); color:var(--primary);
  background:var(--primary-soft); }
.du-how-lbl { display:flex; flex-direction:column; gap:2px; flex:1 1 auto;
  min-width:0; }
.du-how-lbl strong { font-size:var(--t-md); font-weight:600; color:var(--fg); }
.du-how-lbl small { font-size:var(--t-sm); color:var(--fg-muted); }
.du-how-sum::after { content:''; width:8px; height:8px; flex:none;
  border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg); transition:transform .15s; }
.du-how[open] > .du-how-sum::after { transform:rotate(-135deg);
  border-color:var(--primary); }
.du-how-sum:hover { background:var(--surface-2); }
.du-how-sum:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.du-how-body { padding:var(--sp-2) var(--sp-4) var(--sp-4); }
.du-how-not { margin:0 0 var(--sp-3); font-size:var(--t-md);
  color:var(--fg-muted); line-height:1.55; }
.du-cmds { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4); }
.du-cmd > small { display:block; margin-bottom:var(--sp-1);
  color:var(--fg-muted); font-size:var(--t-sm); }
/* Servis-bazli komut kartciklari — basliklar SERITLE AYNI AD (operator
   seritte gordugu servisi burada ayni adla bulur; kullanici "genel liste
   akil karistirici" demisti). Kutu dili du-srv ile ayni aile. */
.du-scmds { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-3) var(--sp-4); }
.du-scmd { min-width:0; padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius:var(--radius-sm); align-content:start; }
.du-scmd-b { display:flex; align-items:baseline; gap:var(--sp-2);
  margin-bottom:var(--sp-2); flex-wrap:wrap; }
.du-scmd-b > b { font-weight:600; }
/* Baslik kunyesi SERITLE AYNI dil (PostgreSQL 16.14 gibi) — mono compose
   adi kalkti (kullanici istegi; compose adi zaten komutta gorunuyor). */
.du-scmd-b > small { font-size:var(--t-sm); color:var(--fg-muted); }
.du-scmd > small { display:block; margin:var(--sp-2) 0 var(--sp-1);
  color:var(--fg-muted); font-size:var(--t-sm); }
/* Kod kutusu surface-2 kartcikta erimesin: zemini surface'a alinir
   (metin rengi apk-code'un kendi mono/fg'si — degismez, cift bozulmaz). */
.du-scmd .apk-code { background:var(--surface); }
.du-cmd-uyari { color:var(--danger); font-weight:600; }
.du-vnot { margin:var(--sp-3) 0 0; font-size:var(--t-sm);
  color:var(--fg-muted); }
/* Yuklu kutuphaneler — 55+ oge cok kolonlu kompakt izgara; her ogede ad
   solda, surum sagda mono, arada stat-row'un onayli noktali kilavuzu
   (ayni dil, kendi sinifi — 55 satirlik tam-genislik liste yerine). */
.du-libs { display:grid; gap:2px var(--sp-5);
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.du-lib { display:flex; align-items:baseline; gap:var(--sp-2); min-width:0;
  font-size:var(--t-sm); padding:2px 0; }
.du-lib > span { color:var(--fg-muted); min-width:0; overflow-wrap:anywhere; }
.du-lib::after { content:""; flex:1 1 auto; order:1; margin-bottom:3px;
  border-bottom:1px dotted color-mix(in srgb, var(--fg-muted) 30%, transparent); }
.du-lib > b.mono { order:2; flex:none; font-weight:600;
  font-variant-numeric:tabular-nums; }
/* ⚠️ SATIRLAR `1fr` DEGIL `auto` (sk-liste dersi: iki bandin 1fr satirlari
   birbirini esitleyip bosluk birakiyordu) — 2 sira x 2 yuva. */
.du-liste { display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, auto auto); }
/* ⚠️ IKI-SINIFLI SECICI SART: `.sg-gorev`in kendi duzenini (0,1,0) ozgullukle
   ezer — dosya sirasina guvenilmez (.ot-track.sk-track dersi). */
.du-liste > .du-kutu { display:grid; grid-template-rows:subgrid; grid-row:span 2;
  align-content:start; row-gap:var(--sp-2); }
/* ⚠️ `.stat-rows` KULLANILMADI: global kurali `margin-top:auto` tasir ve grid
   kutuda satirlari DIBE iterdi — kendi sarmalayicimiz marjsiz. */
.du-rows { display:flex; flex-direction:column; }
.du-kutu .stat-row { padding:var(--sp-1) 0; font-size:var(--t-md); }
/* Uzun mono deger (IPv6 istemci adresi) dar kutuda tasmasin: stat-row'un
   `flex:none` degeri bu baglamda gevsetilir. */
.du-kutu .stat-row > b { flex:0 1 auto; min-width:0; text-align:right;
  overflow-wrap:anywhere; font-weight:600; }
/* Sayinin kendisi baglanti (VM listesinin onayli "kesik alt cizgi" jesti). */
.du-link { color:inherit; text-decoration:underline dotted;
  text-underline-offset:2px; }
.du-link:hover, .du-link:focus-visible { color:var(--primary); }
/* Dar ekran geri almasi ASAGIDAKI ORTAK 1020px BLOGUNDA (sk-liste ile ayni
   kirilim, ayni gerekce). ⚠️ BURAYA AYRI 1020px medya blogu ACILMAZ:
   chk_saklama'nin dar-ekran olcutu split[1] ile ILK blogu dilimliyor — buraya
   acilan ikinci blok o olcutu sessizce YANLIS yere baglamisti (belgeli "split
   ilkini yakalar" dersinin 1020px ayagi; medya sorgusu bu yorumda LITERAL
   yazilmaz — sayim olcutu yorumsuz metinde de olsa karisiklik cikmasin). */
/* Serbest alan (etiket + kontrol + aciklama) — tek kolon, tekrar eden dil */
.set-fl { display:block; font-size:var(--t-md); margin-bottom:var(--sp-5); }
.set-fl > span { display:block; font-weight:600; margin-bottom:var(--sp-2); }
.set-fl small { display:block; margin-top:var(--sp-2); color:var(--fg-muted);
  font-size:var(--t-sm); line-height:1.55; }
.set-fl textarea { width:100%; font-family:var(--mono); font-size:var(--t-sm);
  resize:vertical; }
.set-inp { width:100%; max-width:420px; }
.set-two { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-5); }
.set-two .set-fl { min-width:0; }

/* ═══ API arayuzu erisimi — solda kontrol, sagda aciklama ══════════════════
   ⚠️ `.set-two` (1fr 1fr) KULLANILMADI: bu bolumde TEK alan var ve IP listesi
   561px genisligi doldurmaz. Kontrol kolonu iceriginin gerektirdigi kadar
   (`minmax(0,380px)`), aciklama kalan alani alir.
   ⚠️ TUM KURALLAR `#s-api` KAPSAMINDA: Ayarlar sayfasinda 12 kart var ve bu
   sinif adlari genel degil — kapsamsiz yazmak `.set-inp`/`.modal p` sinifindan
   sizinti uretirdi (panelin belgeli tuzagi). */
/* YENIDEN TASARIM (2026-08-18): iki PARALEL kutu — API | Panel. Ayni yapi ayni
   dil; panel kutusu kendini-kilitleme uyarisini tasir. Eski .api-grid/.api-fl/
   .api-yardim/.api-liste/.api-ben ailesi SILINDI (baska kullanan yok, grep 0). */
#s-api .aip-body { display:flex; flex-direction:column; gap:var(--sp-5); }
/* ⚠️ SUBGRID: iki kutu AYNI 5 satiri (head/desc/textarea/alt/not) PAYLASIR.
   Panel'in daha uzun aciklamasi 'desc' satirini iki kutuda BIRDEN buyutur ->
   textarea'lar KESIN ayni Y'de baslar (min-height sihirli sayisi degil, yapisal
   hiza; aciklama metni degisse de bozulmaz). 3. satir (textarea) 1fr = slack'i
   emer, notlar tabana oturur. Subgrid desteklenmezse box duz grid'e duser ve
   cocuklar dogru sirayla yiginlanir (gracefully degrade). */
#s-api .aip-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:auto auto 1fr auto auto;
  gap:var(--sp-3) var(--sp-5); align-items:stretch; }
#s-api .aip-box { display:grid; grid-template-rows:subgrid; grid-row:1 / -1;
  padding:var(--sp-5); border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); }
/* Panel kutusu daha agir bir karar tasir — amber sol ray (inset; border-left
   dar seritte yaricap gonyesi uretir, panelin yazili dersi). */
#s-api .aip-box--panel { box-shadow:inset 3px 0 0 var(--warn); }
/* ⚠️ `flex-wrap` SART: icindeki `.aip-yol` kunyesi `nowrap` + `margin-left:auto`
   tasiyor; sarma olmadan basligin tasmasi metin uzunluguna BAGLI kalirdi
   (bugun 768px'e kadar sigiyor — olculdu — ama bu yapisal bir garanti degil).
   Kardes `.aip-alt` zaten sariyor: ayni cozum, gorsel tutarlilik. */
#s-api .aip-head { display:flex; align-items:center; gap:var(--sp-2);
  flex-wrap:wrap; font-size:var(--t-lg); }
#s-api .aip-head b { font-weight:700; }
#s-api .aip-head > svg.ic { width:18px; height:18px; color:var(--primary);
  flex:none; }
#s-api .aip-box--panel .aip-head > svg.ic { color:var(--warn); }
#s-api .aip-yol { margin-left:auto; font-size:var(--t-xs); font-weight:600;
  padding:2px 8px; border-radius:var(--radius-pill); background:var(--surface);
  border:1px solid var(--border); color:var(--fg-muted); white-space:nowrap; }
#s-api .aip-desc { margin:0; font-size:var(--t-md); line-height:1.55;
  color:color-mix(in srgb, var(--fg-muted) 55%, var(--fg)); }
/* ⚠️ IP listesi DIKEY okunur: yukseklik bilgi tasir, genislik tasimaz. */
#s-api .aip-box textarea { min-height:118px; line-height:1.7;
  background:var(--surface); }
#s-api .aip-alt { display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); font-size:var(--t-sm); }
/* Kutu icindeki cerceveli buton gri zeminde kaybolmasin (usr-act dersi). */
#s-api .aip-alt .ax-btn--secondary { background:var(--surface);
  border-color:var(--border-strong); font-weight:600; }
#s-api .aip-not { margin-top:auto; }
/* Baglanti-adresi bandi: soluk kucuk yazi degil, belirgin bir bilgi seridi
   (kullanici istegi "biraz daha gorunur"). Yesil baglanti noktasi + mavi tintli
   zemin + IP prominent cip.
   ⚠️ SECICI LISTESI ORTAK (#s-api + #s-proxy): kullanici ayni seridi proxy
   kartinda da istedi (2026-08-21 "aynisini proxy ekranina da alta ortali koy").
   Kural KOPYALANMAZ — kopya, panelin tekrar eden drift sinifini uretir; yeni
   bir kart bu seridi kullanacaksa buraya virgulle EKLENIR. */
#s-api .aip-foot, #s-proxy .aip-foot {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); font-size:var(--t-md); font-weight:500;
  color:var(--fg);
  background:color-mix(in srgb, var(--primary) 7%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); }
#s-api .aip-dot, #s-proxy .aip-dot {
  width:9px; height:9px; border-radius:50%; flex:none; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
#s-api .aip-foot-lb, #s-proxy .aip-foot-lb { color:var(--fg-muted); }
#s-api .api-ip, #s-proxy .api-ip {
  font-size:var(--t-md); font-weight:700; padding:3px 10px;
  border-radius:var(--radius-sm); letter-spacing:.02em; color:var(--primary);
  background:color-mix(in srgb, var(--primary) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); }
#s-api .api-uyari { margin:0; }
@media (max-width:900px) {
  /* Dar ekranda tek kolon: subgrid'i BOZ (yoksa iki kutu 'grid-row:1/-1' ile
     ayni hucrede ust uste biner). Kutular normal flex-kolon akisina doner,
     alt alta yiginlanir; hiza tek kolonda zaten anlamsiz, not tabana oturur. */
  #s-api .aip-grid { grid-template-columns:1fr; grid-template-rows:none; }
  #s-api .aip-box { display:flex; flex-direction:column; gap:var(--sp-3);
    grid-template-rows:none; grid-row:auto; }
}
.set-note-box { margin:var(--sp-4) 0 0; font-size:var(--t-sm); line-height:1.55; }
/* Logo/favicon onizlemesi (panelde raster onizleme sinifi yoktu) */
.set-thumb { max-height:26px; max-width:180px; width:auto; display:block; flex:none;
  border-radius:var(--radius-xs); }
.set-thumb--fav { max-height:22px; max-width:22px; }
.set-up { margin-top:var(--sp-4); }
/* ⚠️ GENISLIK TEK KAYNAK `--set-up-w` (`.set-logo` uzerinde tanimli): onizleme
   satiri ile dosya-sec cercevesi AYNI genislikte olmak zorunda — iki literal
   yazilsa biri degistiginde iki cerceve sessizce ayrisirdi. `.set-file` yalniz
   `.set-logo` icinde kullaniliyor (grep: tek gecis), fallback yine de verilir. */
.set-file { width:100%; max-width:var(--set-up-w, 420px); font-size:var(--t-sm); }
.set-up small { display:block; margin-top:var(--sp-2); color:var(--fg-muted);
  font-size:var(--t-sm); line-height:1.55; }
.set-up-msg { margin-top:var(--sp-2); font-size:var(--t-sm); font-weight:600;
  color:var(--fg-muted); }
/* ⚠️ `[hidden]` KOPRUSU: global `display` kurallari UA'nin [hidden]'ini EZER —
   bu tuzak panelde bes kez isirdi (.iso-prog, .snap-sched-detail, .ym-plan-opt,
   .kmodal-overlay, .set-dirty). */
.set-up-msg[hidden] { display:none; }
.set-up-err { color:var(--danger); }
/* SMTP test satiri */
.set-test-row { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.set-test-row .set-inp { flex:1 1 240px; max-width:340px; }
/* Captcha saglayici kartlari — API anahtarlarindaki "yetki karti" dilinin esi */
/* Guven esigi blogu — YALNIZ marj; `display` VERILMEZ ki UA'nin
   `[hidden]{display:none}` kurali ezilmesin (panelin belgeli tuzagi:
   `.snap-sched-detail`/`.ssl-cond`/`.iso-prog` ayni sekilde bozulmustu).
   Kutu dili gorev kartiyla ORTAK (`.sg-gorev` + `.lk-in` + `.sched-lim`) —
   kopya kural yazilmadi. */
.cap-skor { margin-block-start:var(--sp-5); }
.cap-skor-kutu { max-width:520px; }
.cap-picks { display:flex; flex-direction:column; gap:var(--sp-2);
  margin-bottom:var(--sp-5); }
.cap-pick { display:block; cursor:pointer; }
.cap-pick input { position:absolute; opacity:0; width:1px; height:1px; }
.cap-pick-in { display:flex; flex-direction:column; gap:var(--sp-1);
  padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); transition:border-color .15s ease, background-color .15s ease; }
.cap-pick-in:hover { border-color:var(--border-strong); }
.cap-pick input:checked + .cap-pick-in { border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.cap-pick input:focus-visible + .cap-pick-in { outline:2px solid var(--primary);
  outline-offset:2px; }
.cap-pick-t { display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-md); font-weight:600; flex-wrap:wrap; }
/* ⚠️ `--fg-faint` KOYU TEMADA 4.05 ediyordu (AA 4.5) — `.usr-act-txt .faint`
   turunda kapatilan sinifin ayni tekrari: aciklama metni SOLUK degil MUTED. */
.cap-pick .faint { font-size:var(--t-sm); line-height:1.5;
  color:color-mix(in srgb, var(--fg-muted) 62%, var(--fg)); }
/* ⚠️ `.thr-grid` ORTAK: bu duzen (etiket | dar sayi kutusu | altta aciklama)
   yalniz alarm esiklerine ait degil — hesap kilidi de kullanir. */
.alarm-thr, .thr-grid { display:flex; flex-direction:column; gap:var(--sp-4); }
/* ⚠️ `minmax(0,200px)`: sabit 200px, izgaraya min-content dayatip 1024px'te
   kolonlari 323/357px yapiyordu (olculdu). Artik kolon daralinca etiket de daralir. */
.alarm-thr label, .thr-grid label { display:grid;
  grid-template-columns:minmax(0,200px) auto; align-items:center;
  gap:var(--sp-3) var(--sp-5); font-size:var(--t-md); }
.alarm-thr label > span:first-child,
.thr-grid label > span:first-child { font-weight:600; }
.alarm-thr .thr-in, .thr-grid .thr-in { display:inline-flex; align-items:center;
  gap:var(--sp-2); font-size:var(--t-md); color:var(--fg-muted); }
.alarm-thr input, .thr-grid input { width:80px; padding:7px 9px;
  border-radius:var(--radius-xs); border:1px solid var(--border);
  background:var(--surface); color:var(--fg); font-size:var(--t-md); }
.alarm-thr small, .thr-grid small { grid-column:2; font-size:var(--t-sm);
  color:var(--fg-muted); margin-top:-4px; }
/* ⭐ ESIGIN CANLI KARSILIGI (cubuk + esik isareti + tek cumle).
   ⚠️ `grid-column:2` ACIKCA verilir: izgara iki kolonlu ve bu oge otomatik
   yerlestirmede 1. kolona (etiket sutununa) duserdi — `small` ile ayni tuzak.
   ⚠️ Cubuk kabi `.ot-track` yeniden kullanilir ama burada `<span>` icinde
   yasar -> `display:block` ACIKCA verilir (yoksa yukseklik uygulanmaz ve cubuk
   HIC cizilmez — panelin ax-progress__fill / sk-track dersi).
   ⚠️ Iki-sinifli secici (`.ot-track.thr-track`) SART: tek sinifla yazilsaydi
   `.ot-track` ile ayni ozgullukte kalir ve yalniz DOSYA SIRASI sayesinde
   kazanirdi (sk-track ile ayni kirilganlik sinifi). */
.thr-live { grid-column:2; margin-top:-2px; font-size:var(--t-sm);
  color:var(--fg-muted); line-height:1.5; }
.thr-live b { color:var(--fg); font-weight:600; }
.ot-track.thr-track { display:block; position:relative; height:8px;
  margin:0 0 5px; max-width:420px; }
/* ⚠️⚠️ DOLGU DA ACIKCA BLOK: `.ot-bar` oturum kartinda `<div>`, burada `<span>`
   (kap `<span class="thr-live">` icinde yasiyor) -> `display:inline` kalir,
   width/height UYGULANMAZ ve cubuk SESSIZCE 0x0 cizilir. Canli piksel olcumu
   yakaladi (barW=0, barH=0) — "sinif basildi" olcutu bunu GOREMEZDI.
   ⚠️ `position:relative; z-index:1`: TEHLIKE BOLGESI mutlak konumlu; akistaki
   dolgu konumlanmamis kalirsa bolge onu ORTER (boyama sirasi).
   ⚠️⚠️ RENK ACIKCA VERILIR: `.ot-bar` TABANI renk TASIMAZ — dolgu rengi
   `--idle`/`--max` MODIFIER'larindan gelir (oturum kartinin deseni). Modifier
   verilmeyince cubuk dogru genislikte ama SAYDAM ciziliyordu; piksel olcumu
   genisligi/yuksekligi dogruladigi icin bunu GOREMEDI, ekran goruntusu yakaladi
   ("cizili" olcutu artik rengi de ariyor). */
.ot-track.thr-track > .ot-bar { display:block; position:relative; z-index:1;
  background:color-mix(in srgb, var(--primary) 72%, var(--surface)); }
/* ⭐ TEHLIKE BOLGESI — uyari acilan aralik.
   ⚠️ NEDEN SART (ekran goruntusu oz-elestirisi): IP esiginde DUSUK deger
   kotudur, diger ikisinde YUKSEK. Yalniz cubuk + isaret cizilince uc cubuk
   ayni gorsel dilde okunuyor ("saga gitmek kotu") ve IP'nin %65 DOLU gorunmesi
   yanlislikla "kotuye yakin" saniliyordu — oysa %65 BOS = iyi. Bolge hangi
   tarafin tehlike oldugunu GOSTERIR; metin tek basina bunu tasiyamiyordu. */
.thr-zone { position:absolute; top:0; bottom:0;
  background:color-mix(in srgb, var(--danger) 15%, transparent); }
/* Esigi ASAN mevcut deger: cubuk danger tonuna doner (esik isareti zaten
   kirmizi; ikisi ayni renk oldugu icin "gectim" okumasi tek bakista olusur). */
.ot-bar.thr-bad { background:color-mix(in srgb, var(--danger) 78%, var(--surface)); }
/* Operatorun esigi: dikey cizgi. `sk-o*` (%5) + `thr-f*` (%1) ile konumlanir. */
.thr-mark { position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--danger); border-radius:1px; }
.thr-f0 { margin-left:0; }   .thr-f1 { margin-left:1%; }
.thr-f2 { margin-left:2%; }  .thr-f3 { margin-left:3%; }
.thr-f4 { margin-left:4%; }
.thr-hit { color:var(--danger); }

/* ---- UYARI ESIKLERI (#s-alarm) — dort olcer kutusu ----------------------
   ⚠️ IZGARA/KUTU/BIRIM/CIP DILI VERI SAKLAMA KARTIYLA ORTAK: `.sk-liste.sk-n4`
      (2x2 + subgrid + 1020px geri alma) ve `.sg-gorev` / `.lk-in` / `.lk-unit`
      / `.sched-lim` AYNEN kullanilir — kopya kural yazilmaz (panelin bes kez
      uygulanan tasi-kopyalama kurali). Burada YALNIZ bu karta ozgu uc sey var:
      baslik satirinin ikon cipi, "su an asiliyor" tonu ve dar birim rozeti.
      NOT (teknik borc): `sk-` oneki "saklama" demek; artik iki kart paylasiyor.
      Yeniden adlandirma AYRI bir turun isi — kopyalamak drift uretirdi.
   ⚠️⚠️ `.alarm-thr, .thr-grid` GOVDESINE DOKUNULMADI ama yeni markup o sinifi
      TASIMIYOR. `.thr-grid`in sablonlarda SIFIR kullanimi var (kilit karti
      `.lk-ctrls`e gecmis) — olu kural temizligi ayri bir turda, tum sablonlarda
      `grep "thr-grid\|alarm-thr\|set-thr2"` = 0 dogrulanarak yapilmali. */

/* Baslik satiri: ton tasiyan ikon cipi + kisa etiket.
   ⚠️ Metin TEK sarmalayicida (`.alr-t`) — flex `gap` cumlenin ICINE girerdi
      (belgeli flex-metin dersi).
   ⚠️ `min-width:0` auto-min tuzagi: uzun baslik kutuyu tasirmasin. */
.alr-h { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.alr-t { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
/* ⚠️ CIP VARSAYILAN NOTR (primary), YALNIZ ASILDIGINDA danger: dort kutuyu
   surekli renklendirmek "gosterge enflasyonu" olurdu (Uyarilar v4 yargic
   grafti — `al-dot` tam bu yuzden kaldirilmisti). Kirmizi ancak bir sey
   varken cikinca ANLAM tasir.
   ⚠️ Secici `svg.ic` ICERIR: icermezse `.alr-ic svg` (0,1,1) global
   `svg.ic{width:16px}` (0,1,1) ile BERABERE kalir ve yalniz DOSYA SIRASI
   belirler — panelin bes kez isirdigi tuzak. */
.alr-ic { --_t:var(--primary); width:28px; height:28px; flex:none;
  border-radius:var(--radius-xs); display:inline-flex;
  align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--_t) 13%, var(--surface)); color:var(--_t); }
.alr-ic > svg.ic { width:15px; height:15px; flex:none; }
/* ⚠️ IKI SINIFLI SECICI (0,2,0) SART: tek sinifla (`.alr-hit`) yazilsaydi
   `.sg-gorev` (0,1,0) ile ayni ozgullukte kalir ve bu blok dosyada ONCE
   geldigi icin KAYBEDERDI (sira-bagimliligi tuzagi).
   ⚠️ Ray `border-left` DEGIL inset golge: dar seritte yaricap gonye uretir
   (belgeli ders); golge kutunun KENDI radius'unu izler. */
.sg-gorev.alr-hit { border-color:color-mix(in srgb, var(--danger) 40%, var(--border));
  box-shadow:inset 3px 0 0 var(--danger); }
.sg-gorev.alr-hit .alr-ic { --_t:var(--danger); }
/* ⚠️ CANLI SATIR HER ZAMAN BASILIR (bos olsa bile): subgrid TAM 5 cocuk bekler;
   bir satir eksilirse "İzin verilen" cipi yukari kayar ve dort kutunun hizasi
   bozulur. `display:block` — `.sg-gorev small` onu flex kolona cevirdiginden
   ciplak metin dugumu anonim flex ogesi olurdu. */
.alr-canli { display:block; }
/* ⚠️ `.thr-live`in `grid-column:2` + negatif marj + 12px'i ESKI iki-kolonlu
   etiket izgarasina aitti; artik sarmalayicinin ICINDE yasiyor -> sifirlanir.
   ⚠️ Boy VE renk BIRLIKTE (13/14/16 dersi): 12px + duz `--fg-muted` tam da
   kullanicinin "soluk/kucuk" diye reddettigi cifttir. `--fg-faint` KULLANILMAZ
   (koyu temada 4.04 olculmustu). */
#s-alarm .thr-live { grid-column:auto; margin-top:0; font-size:var(--t-md);
  color:color-mix(in srgb, var(--fg-muted) 55%, var(--fg)); }
/* ⚠️ (1,2,0) SART: `.ot-track.thr-track` (0,2,0) kuralinin `max-width:420px`
   tavanini OZGULLUKLE ezer (dosya sirasina guvenilmez). Kutu ic genisligi
   ~527px; tavan kalirsa sagda ~107px bosluk kalirdi. */
#s-alarm .ot-track.thr-track { max-width:none; }
/* Trafik kutusunun canli satiri: cubuk DEGIL iki hucreli stat seridi (IP havuzu
   kartinin onayli `.ipp-blkstat` dili; dikey hairline OPAK metin renginden
   turetildigi icin zeminli kutuda da GORUNUR — belgeli --border dusuk-alfa
   dersi). Cubuk kullanilamaz: birim DAKIKA (5..1440), `%` ekseninin `ot-w*`
   kovalarina oturmaz. */
.alr-stat { display:flex; align-items:center; flex-wrap:wrap; }
/* ⚠️ Birim rozeti icin ayrilan 96px "gün"/"deneme" gibi UZUN birimlere gore
   olculmustu; "%"/"dk" ile sayi kutusunun sagi bombos kaliyordu.
   ⚠️ HAM PX YAZILMAZ — tema_dogrula butcesi olculdu: gap yuvasi DOLU (4/4),
   padding tek yuva. `calc(var()+var())` icinde px literali olmadigi icin
   HICBIR yuva harcamaz. 40+12 = 52px. */
/* ⚠️ SECICI LISTESI GENISLETILDI, KOPYA KURAL YAZILMADI: kimlik kartinda
   rozet "12/40" gibi kisa bir SAYAC; 96px'lik global tavan ("gün"/
   "deneme" gibi uzun birimlere gore olculmustu) sagi bombos birakirdi. */
#s-alarm .lk-in input,
#s-kimlik .lk-in input { padding-right:calc(var(--sp-8) + var(--sp-4)); }
/* ⚠️ Sabit sema onegine yer acan sol dolgu. Deger CANLI OLCULDU (onek sag
   kenari + 8px); pw olcutu `prefixRight + 8 <= paddingLeft` ile sabitler —
   font degisirse metin onege binmeden once olcut kirilir.
   ⚠️ `.lk-pre` sarmalayicisina `.lk-in` sinifi VERILMEZ: yukaridaki 52px'lik
   sag dolgu ona da uygulanir ve rozeti OLMAYAN kutuda sagda olu bosluk kalirdi. */
#s-kimlik .lk-pre input { padding-left:calc(var(--sp-8) * 2 + var(--sp-5)); }
/* ⚠️ Kirilim 560 -> 820px: 561-899px bandinda etiket kolonu (200px) deger
   kolonundan GENIS kaliyordu (768px'te 200 vs 184 — hiyerarsi tersine donuyordu). */
@media (max-width:820px){
  .alarm-thr label, .thr-grid label { grid-template-columns:1fr; }
  .alarm-thr small, .thr-grid small { grid-column:1; }
  .thr-live { grid-column:1; }
  .set-two { grid-template-columns:1fr; }
}
/* ---- Hesap kilidi karti (kademe merdiveni = imza ogesi) ---- */
.lk-body { display:flex; flex-direction:column; gap:var(--sp-5); }
/* Canli ozet cumlesi: kartin ne yaptigini tek satirda soyler. */
.lk-lead { display:flex; align-items:flex-start; gap:var(--sp-2);
  margin:0; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:var(--t-md); line-height:1.5; }
.lk-lead > svg.ic { width:18px; height:18px; color:var(--primary);
  flex:none; margin-top:1px; }
.lk-lead b { font-weight:700; }
.lk-lead .lk-l-perm { color:var(--danger); }
/* Uc kontrol tek satirda, TAM GENISLIGE ESIT bolunmus (kullanici istegi:
   "3 kutucuk tam ekranda hizali olsun") — izgara esit kolon garantisi verir,
   flex-wrap genislik tavaniyla sagda bosluk birakiyordu. */
.lk-ctrls { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-5) var(--sp-6); }
.lk-ctrl { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.lk-ctrl-t { font-weight:600; font-size:var(--t-md); }
/* Aciklamalar BELIRGIN (kullanici istegi: "soluk/kucuk") — boy VE renk birlikte
   (tek kademe buyutme gorunmez; 13/14/16 dersi). */
.lk-ctrl small { font-size:var(--t-lg); line-height:1.5;
  color:color-mix(in srgb, var(--fg-muted) 55%, var(--fg)); }
/* Birim rozeti kutunun ICINDE saga sabit (kullanici istegi: "kutu altindaki
   kelime kutuya tasinip belirgin olsun"). Input sag dolgusu rozete yer acar. */
/* ⚠️ SECICI LISTESI GENISLETILDI, KOPYA KURAL YAZILMADI: `.lk-pre` ayni
   atomun SOL afiks (sabit sema oneki) kardesidir. */
.lk-in, .lk-pre { position:relative; display:block; }
.lk-in input { padding-right:96px; }
/* ⚠️ Gorunum ORTAK — `.lk-unit`in deklarasyon kumesi BIREBIR korunur, yalniz
   yon ayrilir. Ortak bloga YENI deklarasyon (or. `user-select`) eklenirse
   panel genelindeki TUM rozetlere sizar; ona ozel olan `.lk-pref`te durur. */
.lk-unit, .lk-pref { position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:none; padding:2px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:var(--t-sm); font-weight:700; color:var(--fg-muted);
  letter-spacing:.02em; }
.lk-unit { right:8px; }
/* ⚠️ `user-select:none` YALNIZ burada: onek VERI DEGIL, kopyalanabilir
   gorunmesi "silinip degistirilebilir" izlenimi verirdi (kullanici sarti). */
/* ⚠️ `letter-spacing` SIFIRLANIR (ortak blok .02em tasir): `://` dizisi
   harf araligiyla "http(s) ://" gibi kopuk okunuyordu — ekran goruntusu
   yakaladi. Sema bir TOKEN'dir, metin degil. */
.lk-pref { left:8px; user-select:none; letter-spacing:normal; }

/* IMZA: yukselen kademe merdiveni. Basamaklar SAGA dogru yukselir (riser boyu
   kademe indeksiyle buyur) -> "kademeli kilit" gorsel olarak okunur; son basamak
   kirmizi "kalici" terminali. Dar ekranda yatay kaydirilir. */
.lk-stair-wrap { display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5) var(--sp-5); border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); }
.lk-stair-cap { font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-muted); }
.lk-stair { display:flex; align-items:flex-end; gap:var(--sp-2);
  overflow-x:auto; padding-top:var(--sp-3); }
/* Basamaklar kalan genisligi ESIT paylasir (kullanici istegi: merdiven ekrana
   tam yayilsin) — `flex:1 1 0` her tread'i ayni genislige getirir; min-width
   dar ekranda taban, kap `overflow-x:auto` ile kaydirilir. */
.lk-step { display:flex; flex-direction:column; align-items:stretch;
  flex:1 1 0; min-width:78px; }
/* Kademe indeksi (`--i`) KONUMDAN gelir (satir-ici stil sablonda yasak). Baglaclar
   <span>, basamaklar <div> oldugu icin nth-of-type yalniz basamaklari sayar; kalici
   terminal de bir div oldugundan siradaki indeksi otomatik alir (= kademe sayisi).
   Tavan 8 kademe (lock_max_steps ust siniri). */
.lk-stair .lk-step:nth-of-type(1) { --i:1; }
.lk-stair .lk-step:nth-of-type(2) { --i:2; }
.lk-stair .lk-step:nth-of-type(3) { --i:3; }
.lk-stair .lk-step:nth-of-type(4) { --i:4; }
.lk-stair .lk-step:nth-of-type(5) { --i:5; }
.lk-stair .lk-step:nth-of-type(6) { --i:6; }
.lk-stair .lk-step:nth-of-type(7) { --i:7; }
.lk-stair .lk-step:nth-of-type(8) { --i:8; }
.lk-tread { display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-1); padding:8px 12px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:var(--surface); border:1px solid var(--border-strong);
  border-bottom:none; }
.lk-no { display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:var(--t-lg); font-weight:700; color:var(--fg); }
.lk-no svg.ic { width:14px; height:14px; color:var(--danger); }
.lk-dur { font-size:var(--t-sm); font-weight:600; color:var(--fg-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Riser (basamagin yukseldigi ayak): boyu kademeyle buyur, RENGI amber -> kirmiziya
   isinir -> "gittikce agirlasan ceza" gorsel olarak okunur (yalniz yukseklik degil). */
.lk-riser { height:calc(6px + var(--i) * 13px);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:color-mix(in srgb, var(--danger) calc(8% + var(--i) * 12%),
    color-mix(in srgb, var(--warn) 42%, var(--surface)));
  border:1px solid var(--border-strong); border-top:none; }
/* Kalici terminal: kirmizi duvar + kilit. */
.lk-final .lk-tread { background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
.lk-final .lk-no { color:var(--danger); }
.lk-final .lk-dur { color:var(--danger); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }
.lk-final .lk-riser { background:color-mix(in srgb, var(--danger) 55%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
/* Basamaklar arasi "×2" (katlanmayi soyler) ve terminale gecis oku. */
/* Basamaklar arasi baglac: duz "×2" yazisi begenilmedi (kullanici, 2. tur) ->
   kucuk yuvarlak ROZET (panelin soft-chip dili). ⚠️ `--fg-faint` DEGIL: koyu
   temada 4.04 (AA alti) olculdu — bu METIN, dekorasyon degil. */
.lk-conn { align-self:center; margin-bottom:22px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--border-strong);
  font-size:var(--t-xs); font-weight:700; color:var(--fg-muted);
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow-sm, none); }
/* Terminale gecis: kirmizi tonlu rozet (ok yerine — ciddiyet dili). */
.lk-conn-end { color:var(--danger);
  background:color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
/* Kart alti aciklama (kalici kilit + yonetici acar). */
.lk-note { display:flex; align-items:flex-start; gap:var(--sp-2);
  line-height:1.5; color:var(--fg-muted); }
.lk-note > svg.ic { width:16px; height:16px; color:var(--warn);
  flex:none; margin-top:1px; }
@media (max-width:700px) {
  .lk-ctrls { grid-template-columns:1fr; }
}

/* ---- Oturum guvenligi karti ----------------------------------------------
   Kontrol atomlari kilit kartiyla ORTAK (.lk-ctrl/.lk-in/.lk-unit/.lk-lead) —
   kopya kural yazilmaz, ayni dil paylasilir. Burada YALNIZCA imza ogesi tanimli:
   iki surenin KIYAS CUBUKLARI ("hangi sinir once dolar?"). */
/* ⚠️ ORTAK SECICI (kural kopyalanmaz): kilit karti 4. kontrolu alinca
   3-kolonlu izgarada 3+1 diziliyordu (2. satirda tek kutu, sagi bos).
   Dort kontrol 2x2 okunur. */
.ot-ctrls, .lk-ctrls.lk-n4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ot-tl { gap:var(--sp-2); }
.ot-row { display:grid; grid-template-columns:132px minmax(0, 1fr) auto;
  align-items:center; gap:var(--sp-3); }
.ot-row-t { font-size:var(--t-md); font-weight:600; color:var(--fg); }
.ot-track { height:12px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--fg-muted) 14%, var(--surface));
  border:1px solid var(--border); overflow:hidden; }
.ot-bar { height:100%; border-radius:var(--radius-pill);
  transition:width .18s ease; }
.ot-bar--idle { background:color-mix(in srgb, var(--warn) 72%, var(--surface)); }
.ot-bar--max { background:color-mix(in srgb, var(--primary) 78%, var(--surface)); }
.ot-val { font-size:var(--t-md); font-weight:700; color:var(--fg);
  font-variant-numeric:tabular-nums; white-space:nowrap; min-width:64px;
  text-align:right; }
/* ⚠️ Bar genisligi %5'lik KOVA SINIFIYLA verilir, satir-ici `style` ile DEGIL:
   sablonda satir-ici stil YASAK (chk_ayar olcutu) ve JS de ayni siniflari
   takas eder -> tek kaynak. 20 kova gorsel olarak yeterli cozunurluk verir. */
.ot-w5 { width:5%; }    .ot-w10 { width:10%; }  .ot-w15 { width:15%; }
.ot-w20 { width:20%; }  .ot-w25 { width:25%; }  .ot-w30 { width:30%; }
.ot-w35 { width:35%; }  .ot-w40 { width:40%; }  .ot-w45 { width:45%; }
.ot-w50 { width:50%; }  .ot-w55 { width:55%; }  .ot-w60 { width:60%; }
.ot-w65 { width:65%; }  .ot-w70 { width:70%; }  .ot-w75 { width:75%; }
.ot-w80 { width:80%; }  .ot-w85 { width:85%; }  .ot-w90 { width:90%; }
.ot-w95 { width:95%; }  .ot-w100 { width:100%; }
/* Cubugun altindaki aciklama: kilit kartiyla ayni okunurluk karari
   (boy VE renk birlikte — "soluk/kucuk" dersi). */
.ot-sub { display:block; font-size:var(--t-md); line-height:1.5;
  color:color-mix(in srgb, var(--fg-muted) 55%, var(--fg));
  padding-left:calc(132px + var(--sp-3)); margin-bottom:var(--sp-2); }
/* Bilesik politika uyarisi: idle >= omur ise bosta-kalma AYARI FIILEN OLUDUR
   (mutlak omur her zaman once duser) — hicbir yerde soylenmiyordu. */
.ot-uyari { display:flex; align-items:flex-start; gap:var(--sp-2);
  font-size:var(--t-md); line-height:1.5; color:var(--fg-muted);
  padding:var(--sp-3); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--warn) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 38%, var(--border)); }
.ot-uyari > svg.ic { width:16px; height:16px; color:var(--warn);
  flex:none; margin-top:1px; }
.ot-uyari[hidden] { display:none; }   /* UA [hidden]'i ezmeyelim (yazili ders) */
@media (max-width:700px) {
  .ot-ctrls, .lk-ctrls.lk-n4 { grid-template-columns:1fr; }
  .ot-row { grid-template-columns:1fr auto; }
  .ot-track { grid-column:1 / -1; }
  .ot-sub { padding-left:0; }
}

/* ---- Bot korumasi (giris/kayit ekrani) ---- */
/* Kap ORTALI sutun: dis saglayici widget'i (Turnstile vb.) de yerlesik durum
   rozeti de kartin ortasinda durur (kullanici bulgusu: widget solda kaliyordu). */
.cap-wrap { margin:var(--sp-4) 0 0; display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-2); }
/* Yerlesik dogrulama durumu: soluk kucuk yazi DEGIL, gorunur ROZET (kullanici
   bulgusu: "Dogrulandi cok kucuk, gorunmuyor"). Bos halde yer tutar (min-height)
   ki rozet dolunca form ziplamasin. ::before / ::after pseudo'lari inline-flex
   kabin FLEX COCUGU sayilir — aradaki bosluk gap'ten gelir, margin gerekmez. */
.cap-durum { display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2); min-height:36px; max-width:100%;
  padding:var(--sp-2) var(--sp-6); border-radius:var(--radius-pill);
  font-size:var(--t-lg); font-weight:600; text-align:center;
  color:var(--fg-muted); background:var(--surface-2);
  border:1px solid var(--border); }
.cap-durum:empty { visibility:hidden; }
.cap-durum.cap-ok { color:var(--ok); background:var(--ok-soft);
  border-color:color-mix(in srgb, var(--ok) 35%, transparent); }
.cap-durum.cap-ok::before { content:"✓"; font-size:var(--t-xl); font-weight:800; }
.cap-durum.cap-err { color:var(--danger); background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
.cap-calisiyor::after { content:""; display:inline-block; width:12px; height:12px;
  border-radius:50%; border:2px solid var(--border-strong);
  border-top-color:var(--primary); }
/* Poster-kare deseni: animasyon ATAMALARI yalniz hareket-azaltma istemeyenlere;
   keyframe'ler yalniz transform/opacity (compositor-guvenli). */
@media (prefers-reduced-motion: no-preference) {
  .cap-calisiyor::after { animation:cap-spin .8s linear infinite; }
  .cap-durum.cap-ok { animation:cap-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
}
@keyframes cap-spin { to { transform:rotate(360deg); } }
@keyframes cap-pop { from { transform:scale(.7); opacity:0; }
  to { transform:scale(1); opacity:1; } }
/* ⚠️ `[hidden]`/display:none KULLANILMAZ: bazi botlar gizli alani tespit eder,
   ayrica panelin [hidden]-ezme tuzagi. Ekran disina tasinir. */
.cap-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Yuklenen marka logosu ---- */
/* ⚠️ Boyut CSS ile SINIRLANIR: operator 2000x800'e kadar yukleyebilir, tema
   olcegi ~28px'tir. `object-fit:contain` orani korur. */
.brand-logo { max-height:44px; max-width:100%; width:auto; height:auto;
  object-fit:contain; display:block; }
/* ⚠️ Kenar cubugunda logo ORTALI (kullanici istegi): temanin `__logo` baglantisi
   `display:flex` ama `justify-content:normal` — yani sola yasliydi (olculdu:
   solda 20px, sagda 147px bosluk). Genislik %100 verilmezse ortalama etkisizdir,
   cunku baglanti icerigi kadar genis kalir. */
.ax-sidebar__brand .ax-sidebar__logo { justify-content:center; width:100%; }
.ax-sidebar__brand .brand-logo { max-height:44px; }
/* ⚠️ IKI LOGO (gunduz/gece): tema SUNUCUDA BILINMEZ (secim localStorage'da,
   sistem tercihi tarayicida cozulur) -> ikisi de basilir, dogrusunu CSS secer.
   `data-theme` <head>'de SENKRON yazilir, yani yanlis logo bir kare bile gorunmez. */
.brand-logo--dark { display:none; }
[data-theme="dark"] .brand-logo--light { display:none; }
[data-theme="dark"] .brand-logo--dark { display:block; }
.brand-logo--lg { max-height:40px; max-width:220px; margin:0 auto; }
.reg-rule { font-size:var(--t-sm); line-height:1.5; margin:var(--sp-2) 0 0; }
.reg-note { margin-top:var(--sp-4); font-size:var(--t-sm); line-height:1.55; }
.reg-btn { width:100%; margin-top:var(--sp-5); text-align:center; }
.login-foot a { color:var(--primary); font-weight:600; }

/* ---- Ayarlar: TAM GENISLIK kart yigini (kullanici karari) ---- */
/* ⚠️ Kart tam genislikte oldugu icin ICERIK kolonlara akar; yoksa 1400px'lik
   kartta 320px'lik tek bir alan yalniz basina durur ("yarim duruyor" sinifi). */
.set-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 var(--sp-6); align-items:start; }
/* ---- Arka plan gorevleri karti (yeniden tasarim 2026-08-18) --------------
   Eski `.sched-grid/.sched-row/.sched-ad` ailesi SILINDI (jenerik uc kolon;
   pahali vCenter gorevi ile ucuz DB gorevi ayni agirliktaydi). Yeni yapi:
   yuke gore IKI GRUP + gorev basina kendi kutusu. Kutu/rozet dili kilit ve
   oturum kartlariyla ORTAK (.lk-in/.lk-unit) — kopya kural yazilmaz. */
.sg-grup { display:flex; flex-direction:column; gap:var(--sp-4); }
.sg-grup-h { display:flex; align-items:flex-start; gap:var(--sp-2);
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--border); }
.sg-grup-h > svg.ic { width:18px; height:18px; flex:none; margin-top:2px;
  color:var(--primary); }
.sg-grup-h span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sg-grup-h b { font-size:var(--t-lg); font-weight:700; }
.sg-grup-h small { font-size:var(--t-md); color:var(--fg-muted); line-height:1.5; }
/* ⚠️ SABIT 2 KOLON, `auto-fill` DEGIL (kullanici: "yamuk duruyorlar"): akiskan
   izgara genis ekranda 3 kolona cikiyor ve 4'lu grupta son satirda TEK BASINA
   bir kutu birakiyordu (iki bos yuva). Sabit kolon sayisi her grubu tam satirlara
   boler; kolonlar `1fr` oldugu icin tam genislige esit dagilir.
   ⚠️ `grid-auto-rows:1fr`: TUM satirlar esit yukseklik -> aciklama uzunlugu
   farkli olsa da kutular ayni boyda kalir (kullanici: "esit hizali dursun"). */
.sg-liste { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr; gap:var(--sp-4); }
.sg-gorev { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0;
  padding:var(--sp-4); border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); }
/* ⚠️ RENK ACIKCA VERILIR: global `label { color:var(--fg-muted) }` mirasi
   yuzunden kutu BASLIKLARI fiilen SOLUK yaziliyordu (gorev + saklama + alarm
   kartlarinin ucunde birden) — hicbir yerde bilincli verilmis bir karar degil,
   sizinti. 14px/600 bir baslik muted olamaz. */
.sg-ad { font-weight:600; font-size:var(--t-lg); color:var(--fg); }
.sg-gorev small { font-size:var(--t-md); line-height:1.5;
  color:color-mix(in srgb, var(--fg-muted) 55%, var(--fg)); }
/* ⚠️ CIP KUTUNUN TABANINA SABIT (kullanici istegi): `small` flex kolona cevrilir,
   aciklama esner, cip `margin-top:auto` ile dibe iner -> aciklamalar farkli
   uzunlukta olsa bile "İzin verilen" satirlari AYNI hizada durur.
   ⚠️ Kapsam SART: `.sched-lim` GLOBAL bir sinif (oturum karti da kullanir);
   kapsamsiz `margin-top:auto` baska yerlerde beklenmedik bosluk uretirdi. */
.sg-gorev small, #s-oturum .lk-ctrl small { display:flex; flex-direction:column;
  flex:1 1 auto; }
.sg-gorev small > .sched-lim,
#s-oturum .lk-ctrl small > .sched-lim { margin-top:auto; }
/* Aciklama ile cip arasi nefes payi (flex kolonda alt marj yeterli). */
.sg-ac { display:block; margin-bottom:var(--sp-2); }
/* Sabit gorevler: varsayilan KAPALI (10 satir karti bogmasin) ama tek tikla
   tam liste — "arkada ne calisiyor" seffafligi. */
.sg-sabit { border-radius:var(--radius-sm); background:var(--surface-2);
  border:1px solid var(--border); }
.sg-sabit-h { display:flex; align-items:flex-start; gap:var(--sp-2);
  padding:var(--sp-4); cursor:pointer; list-style:none; }
.sg-sabit-h::-webkit-details-marker { display:none; }
.sg-sabit-h > svg.ic { width:18px; height:18px; flex:none; margin-top:2px;
  color:var(--fg-muted); }
.sg-sabit-h span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sg-sabit-h b { font-size:var(--t-lg); font-weight:700; }
.sg-sabit-h small { font-size:var(--t-md); color:var(--fg-muted); line-height:1.5; }
.sg-sabit-h::after { content:"⌄"; margin-left:auto; padding-left:var(--sp-3);
  color:var(--fg-muted); font-size:var(--t-lg); line-height:1; }
.sg-sabit[open] .sg-sabit-h::after { content:"⌃"; }
.sg-sabit-liste { display:flex; flex-direction:column;
  padding:0 var(--sp-4) var(--sp-4); }
/* Satir: ad | sure | ne yapiyor + neden sabit. Sure kolonu tabular (hizali). */
.sg-sabit-row { display:grid; grid-template-columns:minmax(0,190px) minmax(0,210px) minmax(0,1fr);
  gap:var(--sp-2) var(--sp-4); align-items:start;
  padding:var(--sp-3) 0; border-top:1px solid var(--border); }
.sg-sabit-ad { font-weight:600; font-size:var(--t-md); }
.sg-sabit-sure { font-size:var(--t-md); font-weight:700; color:var(--primary);
  font-variant-numeric:tabular-nums; }
/* ⚠️ HIYERARSI SOLUKLASTIRARAK KURULMAZ: "Neden sabit" satiri once zemine dogru
   karistiriliyordu (olculdu: 3.08 acik / 4.44 koyu — AA alti) ve tam da
   operatorun okumasi istenen metin en az okunur olandi. Aciklama KOYULASTIRILDI,
   gerekce standart muted'da birakildi -> iki kademe de AA ustunde. */
.sg-sabit-ac { font-size:var(--t-md); line-height:1.5;
  color:color-mix(in srgb, var(--fg-muted) 55%, var(--fg)); }
.sg-sabit-ac em { display:block; margin-top:2px; font-style:normal;
  color:var(--fg-muted); }
@media (max-width:820px) {
  .sg-sabit-row { grid-template-columns:1fr; }
  /* Tek kolonda esit-yukseklik ANLAMSIZ (yalniz bosluk uretir) — kapatilir. */
  .sg-liste { grid-template-columns:1fr; grid-auto-rows:auto; }
}
/* ---- VERI SAKLAMA karti (#s-saklama) ----------------------------------
   Kutu/cip/birim dili gorev ve oturum kartlariyla ORTAK (.sg-gorev/.sg-ad/
   .lk-in/.lk-unit/.sched-lim) — kopya kural yazilmaz, yalniz izgara ve
   "diskteki karsilik" blogu bu karta ozeldir.
   ⚠️ SABIT 3 KOLON: alan sayisi TAM UC. `auto-fill`/2-kolon son satirda tek
   basina kutu birakirdi — kullanicinin kilit ve gorev kartlarinda acikca
   reddettigi ("yamuk duruyorlar") duzen. `grid-auto-rows:1fr` esit yukseklik. */
/* ⚠️ SATIRLAR SUBGRID ILE HIZALI (ekran goruntusu yakaladi): kutular esit
   yukseklikteydi ama IC satirlari degildi — aciklama uzunlugu farkli oldugu icin
   "Şu an diskte" cubugu bir kutuda 58px asagida basliyordu ve uc kutu birbirini
   tutmuyordu. `margin-top:auto` yalniz SON ogeyi (cip) dibe cekiyor, aradaki
   blogu hizalamiyor. Cozum API/Panel kartinda kanitlanan desen: kap satirlari
   tanimlar, kutular `subgrid` ile devralir.
   ⚠️ `small` DISPLAY:CONTENTS: aciklama/disk/cip `small` icinde sarili; kutu
   dogrudan cocugu olmadan subgrid satirlarina giremezlerdi. `contents` kutuyu
   ortadan kaldirir ama KALITIMI korur (renk/boy `small`dan gelmeye devam eder).
   Satirlar: ad · girdi · aciklama(1fr) · disk · cip. */
/* ⚠️⚠️ KOLON/SATIR SAYISI KUTU SAYISINA GORE (`sk-n{N}` sinifi, satir-ici stil
   YASAK): sabit `repeat(3)` + 5 kutu, izgarayi SESSIZCE yamultuyordu. Kutular
   `grid-row` ile 5 satirlik BLOK istedigi icin auto-placement kolonlar dolunca
   yeni satira gecemez, IMPLICIT (auto genislikte) kolon uretir -> farkli
   genislikte kutular = kullanicinin acikca reddettigi "yamuk" gorüntü.
   ⚠️ `grid-row: 1 / -1` DEGIL `span 5`: birincisi TUM satirlari kaplar (tek
   bantta ayni sey, cok bantta felaket); ikincisi kutuyu 5 satirlik blok yapar
   ve bir sonraki banda gecebilir. 3 kutuda cikti BIREBIR ayni.
   ⚠️ 3'TEN FAZLA KOLON KULLANILMAZ: kart ic genisligi ~1122px; 3 kolon ~363px
   (onayli), 4 kolon ~265px'te sayi kutusu + aciklama + cubuk + cip sigmaz. */
.sk-liste { display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:auto auto 1fr auto auto; }
.sk-liste > .sg-gorev { display:grid; grid-template-rows:subgrid; grid-row:span 5;
  align-content:start; }
/* ⚠️ COK BANTTA ESNEK SATIR `1fr` DEGIL `auto`: iki bandin `1fr` satirlari
   birbirini ESITLER (fr = esit pay), yani kisa aciklamali 2. bant, 1. bandin
   uzun aciklamasi kadar yer kaplayip ~90px BOSLUK birakiyordu (canli olculdu).
   `auto` her bandi KENDI icerigine gore olculer; kutu yukseklikleri subgrid
   sayesinde bant icinde zaten esit, yani cip hizasi bozulmaz. */
/* 4 kutu -> 2x2 (simetrik). 3 kolonda 3+1 yetim kutu kalirdi. */
.sk-liste.sk-n4 { grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:repeat(2, auto auto auto auto auto); }
/* ⚠️ 5 kutu ASAL: hicbir kolon sayisinda tam bolunmez.
   Ilk cozum "son kutu 2 kolona yayilsin"di ama DENGESIZ duruyordu (bir kutu
   otekilerin iki kati genislikte, icindeki sayi kutusu 740px). Bunun yerine
   6 KOLONLU izgara + her kutu 2 kolon: genislik 3-kolonlu bantla BIREBIR AYNI
   (matematik: 2*(W-5g)/6 + g == (W-2g)/3), son iki kutu 2. ve 4. kolondan
   basladigi icin bant ORTALANIR -> "sag alt kose bos" gorüntüsü olusmaz,
   bosluk iki yana SIMETRIK dagilir. */
.sk-liste.sk-n5 { grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-template-rows:repeat(2, auto auto auto auto auto); }
.sk-liste.sk-n5 > .sg-gorev { grid-column:span 2; }
.sk-liste.sk-n5 > .sg-gorev:nth-child(4) { grid-column:2 / span 2; }
.sk-liste.sk-n5 > .sg-gorev:nth-child(5) { grid-column:4 / span 2; }
/* 6 kutu -> 3x2 (simetrik). */
.sk-liste.sk-n6 { grid-template-rows:repeat(2, auto auto auto auto auto); }
/* ⚠️ 7 ASAL, 8 CIFT (2026-09-16: NetFlow iki saklama ayari eklendi).
   8 kutu -> 4x2 bandi; 7 kutu ASAL oldugu icin `sk-n5` receteSININ aynisi
   (6 kolon, her kutu 2 kolon, son satir ORTALANIR) — "sag alt kose bos"
   goruntusu olusmasin. */
.sk-liste.sk-n7 { grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-template-rows:repeat(3, auto auto auto auto auto); }
.sk-liste.sk-n7 > .sg-gorev { grid-column:span 2; }
.sk-liste.sk-n7 > .sg-gorev:nth-child(7) { grid-column:3 / span 2; }
/* 8 kutu -> 4x2 (simetrik); taban 3 kolonda 3+3+2 yetim satir kalirdi. */
.sk-liste.sk-n8 { grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-rows:repeat(2, auto auto auto auto auto); }
/* 9 kutu -> 3x3 (2026-09-16: NetFlow "bekleme siniri" ayari eklendi). Taban
   izgara zaten 3 kolon; yalniz SATIR BANDI sayisi artar (subgrid ucer satirlik
   uc bant ister) — kolon kurali YAZILMAZ ki taban ile celismesin. */
.sk-liste.sk-n9 { grid-template-rows:repeat(3, auto auto auto auto auto); }
/* 10 kutu (2026-10-02: otomatik eylem + IP spam olaylari) -> 4 kolon, 4+4+2; son iki kutu ORTALANIR. */
.sk-liste.sk-n10 { grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-rows:repeat(3, auto auto auto auto auto); }
.sk-liste.sk-n10 > .sg-gorev:nth-child(9) { grid-column:2; }
.sk-liste.sk-n10 > .sg-gorev:nth-child(10) { grid-column:3; }
/* 11 kutu -> `sk-n7` recetesi: 6 kolon, kutu 2 kolon (3'erli), 3+3+3+2; son iki kutu ORTALANIR. */
.sk-liste.sk-n11 { grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-template-rows:repeat(4, auto auto auto auto auto); }
.sk-liste.sk-n11 > .sg-gorev { grid-column:span 2; }
.sk-liste.sk-n11 > .sg-gorev:nth-child(10) { grid-column:2 / span 2; }
.sk-liste.sk-n11 > .sg-gorev:nth-child(11) { grid-column:4 / span 2; }
.sk-liste > .sg-gorev > small { display:contents; }
/* Subgrid'de cip zaten SON satirda — auto marj gereksiz (ve satir yuksekligini
   gereksiz gerer). */
.sk-liste > .sg-gorev > small > .sched-lim { margin-top:0; }
/* ⚠️ ESKI ARA KIRILIM (1021-1100 -> 2 kolon) SILINDI: kart 3 kutuluyken
   varsayilan 3 kolondu ve bu bantta 2 kolona dusuyordu. 2026-08-24'te 4.
   kutu (Destek adresi) eklenince izgara `sk-n4` oldu ve `sk-n4` ZATEN her
   genislikte 2 kolon veriyor -> kural OLU KODA dondu. Kutu sayisi 3'e
   donerse bu blok geri gerekir (gerekcesi: kimlik kutulari uzun bir URL ve
   baslik satirinda bir buton tasiyor, 1060px/3 kolonda metin kirpiliyordu). */
/* Iki bilgi satiri arasinda nefes payi (ikisi de .lk-lead). */
.sk-lead2 { margin-top:calc(-1 * var(--sp-2)); }
/* ---- Veri saklama: TAM DISK DOKUMU (2026-08-24) ------------------------
   ⚠️ YENI GORSEL DIL YOK: tablo `ax-table` (panelin kayit-listesi dili),
   rozetler `ax-badge`, sayilar `ax-num`. Buradaki kurallar YALNIZ kapsayici
   ve hizalama icin — bilesenlerin kendi gorunumune DOKUNULMAZ.
   ⚠️ `overflow-x:auto` SART: 4 kolonluk tablo dar ekranda sayfa GOVDESINI
   kaydirmamali (panelin genel kurali). */
.sk-dokum { overflow-x:auto; margin-top:var(--sp-3); }
.sk-dokum-tbl { width:100%; }
.sk-dk-sag { text-align:right; white-space:nowrap; }
/* Ham tablo adi ETIKETIN ALTINDA: operator paneldeki adi okur, teknik adi
   (log/psql'de arayacagi ad) hemen altinda durur. */
.sk-dk-ad { display:block; font-family:var(--mono); font-size:var(--t-xs); }
.sk-dokum-ozet { display:block; margin-top:var(--sp-2); }

/* --- Disk dokumu: politika seridi + grup basliklari (2026-08-25) ------------
   ⚠️ NEDEN: dokumde "Saklama" kolonu 35 rozet basiyordu ama YALNIZ 3 farkli
   deger tasiyordu (21 elle + 9 kalici + 5 sureli) — en renkli kolon en az
   bilgi tasiyan kolondu. Politika artik satir OZNITELIGI degil DUZENIN
   KENDISI: kolon kalkti, gruplar basliga cikti, rozet 35 -> 5.
   ⚠️ TON TEK KAYNAK (`--_pol`): serit dilimi, grup rayi ve grup kunyesi AYNI
   degiskenden beslenir -> "ayni olgu iki renk" ihlali yapisal olarak imkansiz.
   ⚠️ `--_t` KULLANILMADI: o ad bu panelde `.alr-ic`in ton degiskeni (ozel
   ozellikler MIRAS ALINIR; ayni ada ikinci anlam yuklemek sessiz renk
   sizintisi uretirdi). */
.sk-pol-sureli { --_pol:color-mix(in srgb, var(--info) 78%, var(--surface)); }
.sk-pol-kalici { --_pol:color-mix(in srgb, var(--warn) 78%, var(--surface)); }
.sk-pol-elle   { --_pol:color-mix(in srgb, var(--fg-muted) 42%, var(--surface)); }
.sk-pol { background:var(--_pol); }
/* ⚠️ IKI-SINIFLI SECICI SART: tek sinifla `.ot-track` ile ayni ozgullukte
   kalir ve yalniz DOSYA SIRASI sayesinde kazanirdi (belgeli kirilganlik).
   ⚠️ `.sk-track` (cizgili zemin) KULLANILMAZ: o zemin "diger turler" demek,
   burada uc dilim %100'u kapladigi icin anlam YALAN olurdu. */
.ot-track.sk-polbar { display:block; position:relative;
  margin:var(--sp-2) 0 var(--sp-3); }
/* Bolum basliginin sag metasi. ⚠️ `order:1` SART — `.nd-sec::after` hairline'i
   baslik ile meta ARASINDA esner (Sistem durumu `du-sec-saat` deseni);
   order verilmezse cizgi en saga kacar ve meta ortada kalir. */
.nd-sec .sk-dk-meta { order:1; text-transform:none; letter-spacing:normal;
  font-size:var(--t-md); font-weight:500; color:var(--fg-muted); }
/* Grup basligi satiri — ayrim YAPISAL (zemin + ray), yalniz kalin yazi degil. */
.sk-dokum-tbl tr.sk-grp td { background:var(--surface-2);
  padding-top:var(--sp-3); padding-bottom:var(--sp-3); }
/* ⚠️ TEMA HOVER'I IPTAL: `.ax-table tbody tr:hover td` (0,2,3) grup satirini
   da boyuyor ve satir TIKLANABILIR sanilirdi — grup basligi salt bilgidir.
   Ezmek icin (0,3,3) gerekir. */
.ax-table tbody tr.sk-grp:hover td { background:var(--surface-2); }
/* ⚠️ `td`ye `display:flex` VERILEMEZ (hucreyi tablo yerlesiminden cikarir) →
   ic sarmalayici. Ray `border-left` DEGIL INSET GOLGE: dar seritte yaricap
   gonye uretir (belgeli `.vc` dersi). */
.sk-grp-in { display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-3); padding-inline-start:var(--sp-3);
  box-shadow:inset 3px 0 0 var(--_pol); }
.sk-grp-ad { display:flex; flex-direction:column; gap:1px; min-width:0;
  margin-inline-end:auto; }
.sk-grp-ad > b { font-size:var(--t-lg); }
/* ⚠️ AA: `.faint` (`--fg-muted`) grup satirinin `--surface-2` zemininde KOYU
   temada 4.04 olculdu (esik 4.5); acik tema temizdi. Panelin kanitli
   koyulastirma/aciklastirma recetesi: tonu `--fg`e dogru karistir (ayni cozum
   `.usr-act-txt .faint`te de kullanildi). Olculen yeni deger asagida. */
.sk-grp-ad > .faint { font-size:var(--t-sm);
  color:color-mix(in srgb, var(--fg-muted) 62%, var(--fg)); }
/* ⚠️ SATIR YUKSEKLIGI KISILIR, BILGI KISILMAZ (kullanici "tam net boyutu
   detaylariyla gorsun" dedi — satir GIZLENMEZ): kayit hucresi IKI satirli
   (etiket + mono tablo adi) oldugu icin tema varsayilani 12px dikey dolguyla
   satir 62px'e cikiyordu; 35 satirda blok ~2530px. Dolgu 8px + mono satirin
   line-height'i sikilastirilinca satir ~50px, blok ~2100px — icerik AYNEN
   duruyor. ⚠️ Grup satirinin kendi dolgusu (0,3,1) bu kurali (0,1,2) ezer,
   yani grup baslıklari sikismaz. */
.sk-dokum-tbl tbody td { padding-block:var(--sp-2); }
.sk-dk-ad { line-height:1.25; }
/* ⚠️ ESKI `.sk-muaf, .alr-dipnot` DUZ-YAZI KURAL AILESI TAMAMEN SILINDI
   (kullanici 2026-08-22: "tasarimlar hep ayni mavi serit olsun"). Her iki
   dipnot da artik `.ssl-durum.ssl-durum-info.not-bar` barinda; gorunum TEK
   KAYNAKTAN gelir. `sk-muaf`/`alr-dipnot` adlari yalnizca CAPA sinifi olarak
   markup'ta durur (chk_saklama/pw_saklama/pw_alarm secicileri onlara bagli).
   Buraya o adlar icin gorunum kurali YAZMA — `.not-bar` ile ayrisir. */
/* (eski `.sk-muaf i` kurali SILINDI: `<i>` YALNIZCA renk icindi
   (`font-style:normal` italikligi kaldiriyordu) ve bar icinde govde de
   `--fg-muted` oldugu icin ayrim KAYBOLDU = olu kod. Parantez-ici
   aciklamalar artik duz metin; parantez zaten ayirici. */
/* ⭐ DISKTEKI KARSILIK — bu ayarin operator icin TEK somut anlami.
   `small` flex kolon oldugu icin blok akista aciklamanin ardindan gelir; cip
   `margin-top:auto` ile tabana iner (kutular arasi hiza korunur). */
.sk-disk { display:block; margin-bottom:var(--sp-2); }
.sk-disk-h { display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-2); }
.sk-disk-h b { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
/* ⚠️ `.ot-track` (oturum kartinin cubuk kabi) yeniden kullanilir ama orada
   `<div>`; burada `<small>` ICINDE oldugu icin `<span>` olmak ZORUNDA (small
   yalniz metin-ici icerik alir) -> display ACIKCA blok yapilir, yoksa yukseklik
   uygulanmaz ve cubuk hic cizilmez (panelin ax-progress__fill dersi).
   ⚠️⚠️ CUBUK = TOPLAMDAN PAY (kullanici istegi): cubugun TAMAMI uc turun
   toplamidir; ZEMIN "diger turler" demektir (cizgili), uzerine YALNIZ bu turun
   dilimi solid boyanir ve dilim kendi OFSETINDEN baslar. Uc kutu yan yana
   konunca dilimler uc uca eklenir = tek bir pasta. Onceki model "en buyuge gore
   oran"di: 4.4 MB toplamda 2.7 MB'lik kayit %100 DOLU gorunuyordu.
   ⚠️ Iki-sinifli secici (`.ot-track.sk-track`) SART: tek sinifla yazilsaydi
   `.ot-track` ile ayni ozgullukte kalir ve yalniz DOSYA SIRASI sayesinde
   kazanirdi (panelin belgeli kirilganlik sinifi). */
.ot-track.sk-track { display:block; position:relative; margin:5px 0 3px;
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--fg-muted) 22%, var(--surface)) 0 3px,
    color-mix(in srgb, var(--fg-muted) 7%, var(--surface)) 3px 7px); }
/* ⚠️ KONUM KURALI ORTAK, `background` DEGIL: `.sk-pay`in rengine DOKUNULMAZ —
   `pw_saklama` yukaridaki 5 kutunun dilim RENGINI/ALFASINI piksel okumasiyla
   olcuyor. Politika seridi kendi tonunu `--_pol`den alir. */
.sk-pay, .sk-pol { position:absolute; top:0; bottom:0; }
.sk-pay { background:color-mix(in srgb, var(--primary) 82%, var(--surface)); }
/* Dilim BASLANGICI (%5'lik kovalar) — genislik `ot-w*` ailesinden gelir. */
.sk-o0  { left:0; }    .sk-o5  { left:5%; }   .sk-o10 { left:10%; }
.sk-o15 { left:15%; }  .sk-o20 { left:20%; }  .sk-o25 { left:25%; }
.sk-o30 { left:30%; }  .sk-o35 { left:35%; }  .sk-o40 { left:40%; }
.sk-o45 { left:45%; }  .sk-o50 { left:50%; }  .sk-o55 { left:55%; }
.sk-o60 { left:60%; }  .sk-o65 { left:65%; }  .sk-o70 { left:70%; }
.sk-o75 { left:75%; }  .sk-o80 { left:80%; }  .sk-o85 { left:85%; }
.sk-o90 { left:90%; }  .sk-o95 { left:95%; }
.sk-disk-f { display:block; color:var(--fg-muted);
  font-variant-numeric:tabular-nums; }
@media (max-width:1020px) {
  /* ⚠️ Tek kolonda subgrid GERI ALINIR: kutular alt alta gelince ayni satir
     yuvalarini paylasamazlar (ust uste binerlerdi — API/Panel kartinda birebir
     yasanan hata). Akis duzenine donulur.
     ⚠️ `grid-column` DA sifirlanir: `sk-n5`in "son kutu 2 kolan yayilir" kurali
     tek kolonda anlamsizdir ve implicit ikinci kolon acardi. */
  /* ⚠️⚠️ YENI `sk-nN` SINIFI EKLEYEN HER TUR BU LISTEYE DE EKLEMELI:
     2026-09-16'da `sk-n7`/`sk-n8` eklendi ama buraya yazilmadi ve 420px'te
     8 kutu 4 KOLONA SIKISTI (baslıklar uc satira sarildi, sayi kutulari
     tasti — ekran goruntusunde yakalandi). */
  .sk-liste, .sk-liste.sk-n4, .sk-liste.sk-n5, .sk-liste.sk-n6,
  .sk-liste.sk-n7, .sk-liste.sk-n8, .sk-liste.sk-n9, .sk-liste.sk-n10, .sk-liste.sk-n11 {
    grid-template-columns:1fr; grid-template-rows:none; }
  .sk-liste > .sg-gorev { display:flex; grid-row:auto; grid-column:auto; }
  /* ⚠️ ESIT OZGULLUK SART: `sk-n5`in yerlesim kurallari (0,3,1) yukaridaki
     (0,2,0) sifirlamayi EZIYORDU ve `span 2` tek kolonlu izgarada IMPLICIT
     ikinci kolon aciyordu -> 900px'te kutular 2+2+1 diziliyordu (canli olculdu). */
  .sk-liste.sk-n5 > .sg-gorev,
  .sk-liste.sk-n5 > .sg-gorev:nth-child(4),
  .sk-liste.sk-n5 > .sg-gorev:nth-child(5),
  .sk-liste.sk-n7 > .sg-gorev,
  .sk-liste.sk-n7 > .sg-gorev:nth-child(7),
  .sk-liste.sk-n10 > .sg-gorev:nth-child(9), .sk-liste.sk-n10 > .sg-gorev:nth-child(10),
  .sk-liste.sk-n11 > .sg-gorev, .sk-liste.sk-n11 > .sg-gorev:nth-child(10),
  .sk-liste.sk-n11 > .sg-gorev:nth-child(11) { grid-column:auto; }
  .sk-liste > .sg-gorev > small { display:flex; flex-direction:column; flex:1 1 auto; }
  .sk-liste > .sg-gorev > small > .sched-lim { margin-top:auto; }
  /* Sistem durumu kutulari — ayni geri alma (alt alta kutular satir yuvasi
     paylasamaz). Kurallar bu ORTAK blokta yasar; ayri 1020px blogu acmak
     chk_saklama'nin dilimini kirmisti (yukaridaki not). */
  .du-liste { display:flex; flex-direction:column; }
  .du-liste > .du-kutu { display:flex; flex-direction:column; }
  /* Servis seridi tek kolona iner; saat metasi kendi satirina sarar. */
  .du-serv { display:flex; flex-direction:column; }
  .du-sec-saat { flex:1 1 100%; margin-left:0; }
  .du-cmds, .du-scmds, .du-hows { grid-template-columns:1fr; }
  /* Baglantilar sayi kartlari: 4 -> 2 kolon (ayni blok; yeni 1020px blogu ACILMAZ - chk_durum kurali). */
  .vc-sayilar { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* "İzin verilen 1–90 gün · varsayılan 2 gün" satiri — kullanici: "pek gorunmuyor".
   ⚠️ Yalniz bir kademe buyutmek GORUNMEZ (panelin 13/14/16 dersi) ve rengi
   koyulastirmak da tek basina onu ustundeki aciklama paragrafiyla YARISTIRIR.
   Cozum YAPISAL: ayri bir VERI CIPI (surface-2 zemin + kenarlik + hap kose) —
   akan metnin kuyrugu olmaktan cikip taranabilir bir "teknik ozellik" satiri
   olur; sayilar koyu+kalin, hizalanmasi icin tabular-nums. Olcek disi YENI
   deger yok (3px/10px dolgu ve --t-md zaten sette). */
/* ⚠️ `display:inline-block` DEGIL: cip aciklama paragrafinin KUYRUGUNA yapisiyor
   (metin kisa bitiyorsa ayni satirda, uzunsa alt satirda — iki kolon arasinda
   hizasiz gorunuyordu, canli olculdu). `block` + `fit-content` hem KENDI
   satirinda baslamasini hem icerigi kadar dar kalmasini birlikte verir. */
.sched-lim { display:block; width:fit-content; max-width:100%;
  margin-top:var(--sp-2); font-style:normal;
  padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--fg-muted); font-size:var(--t-md);
  font-variant-numeric:tabular-nums; }
.sched-lim b { font-weight:700; color:var(--fg); }
.set-logo { --set-up-w:420px; min-width:0; }
/* ⚠️⚠️ UC KUTU AYNI SATIR YUVALARINI PAYLASIR (kullanici 2026-08-22: "ucu de
   esit olcude hizali"). Canli olculdu: favicon basligi ("TARAYICI SEKMESI
   SIMGESI (FAVICON)" + Varsayilan rozeti) 361px kolonda IKI satira sariyor ve
   o kutunun onizleme + dosya-sec cerceveleri 22px ASAGI kaymis oluyordu
   (1200px'te 44px). Kap uc satir tanimlar, kutular `subgrid` ile devralir ->
   baslik kac satira sararsa sarsin cerceveler AYNI y'de baslar.
   ⚠️ UC COCUK SOZLESMESI: baslik + onizleme + yukleme. Onizleme satiri
   KOSULSUZ basilmali (gorselsizde bos-durum satiri) — atlanirsa o kutu ikinci
   yuvayi kacirir ve hiza yine bozulur.
   ⚠️ `align-self:stretch` SART: `.set-three{align-items:start}` item'i
   iceriginin boyuna kucultur ve subgrid satir eslemesi coker.
   ⚠️ 820px altinda izgara tek kolona duser; her kutu KENDI ortulu satirlarini
   alir (paylasim biter) — tek kolonda zaten hizalanacak kardes yok. */
.set-logos { grid-template-rows:auto auto auto; }
.set-logos > .set-logo {
  display:grid; grid-template-rows:subgrid; grid-row:span 3; align-self:stretch; }
/* Dar kolonda onizleme satirinin icerigi kutuyu tasiyordu (canli: 1200px'te
   24px, 900px'te 34px) -> sarmasina izin verilir. Kirpma/ellipsis TERCIH
   EDILMEDI: "PNG · 1996×590" ve boyut rozeti operatorun dogruladigi bilgi. */
.set-logo .iso-file-row { flex-wrap:wrap; }
/* Gorsel yokken bos-durum satiri: cerceve DURUR (hiza icin), ton geri cekilir. */
.set-logo-bos { background:transparent; border-style:dashed; }
/* ⚠️ ONIZLEME SATIRI DOSYA-SEC CERCEVESIYLE HIZALI (kullanici 2026-08-22:
   "logolar biraz daha sagda duruyor, dosya sec cercevesi ve ustundeki logolar
   ayni hizada olsun"). Olculdu: `.iso-file-list{margin:0 var(--sp-5)}` — ISO
   sayfasinda satirlar DOLGUSUZ bir kartin icinde durdugu icin oradaki yatay
   marj DOGRU; burada ise kart govdesinin kendi dolgusu zaten var, yani ayni
   marj onizlemeyi dosya girdisinden 16px ICERI itiyordu (canli: fark=16px,
   uc kutuda da). Marj sifirlanir; ISO sayfasi ETKILENMEZ (secici `.set-logo`
   kapsaminda). */
.set-logo .iso-file-list { margin-inline:0; max-width:var(--set-up-w); }
.set-logo .nd-sec:first-child { margin-top:0; padding-top:0; border-top:0; }
/* ⚠️ Favicon kutusu bir bilgi/uyari kutusunun HEMEN ardindan gelir; ayri
   "Favicon" ara basligi kaldirilinca (mukerrer satirdi) araya bosluk birakan
   sey de kalkmisti ve baslik ustteki kutuya YAPISIYORDU (kullanici bildirdi).
   Bosluk kartin kendi ritminden (`--sp-6`) gelir, sihirli sayidan degil. */
/* (eski `.set-note-box + .set-logo{margin-block-start}` kurali SILINDI —
   uc gorsel kutusu artik TEK `.set-three` izgarasinda yan yana duruyor
   (kullanici 2026-08-22), yani bir not kutusunun ARDINDAN gelen `.set-logo`
   kalmadi: kural hicbir seye eslesmiyordu.) */
/* Kutu basligindaki 'urunle gelen varsayilan' rozeti: baslik uppercase +
   letter-spacing tasiyor, rozet o mirasi ALMAMALI. */
.set-vars-badge { text-transform:none; letter-spacing:0; margin-inline-start:var(--sp-2);
  font-weight:600; vertical-align:middle; }
/* Bos birakildiginda SONUCU olan alanin uyari cipi (bugun: "Panel adresi").
   ⚠️ Ton AMBER (`--warn`) — bu bir HATA degil, sonucu olan bos bir alan; `.err`
   kirmizisi olsaydi kaydedilemeyen bir durum gibi okunurdu. Panelin genel
   `.warn-box`i danger-soft tasidigi icin (ad yanltici) kullanilmadi.
   ⚠️⚠️ SECICI LISTESI SART (kullanici bildirdi: "icon kaymis"): cip
   `.set-fl` etiketinin DOGRUDAN span cocugu ve `.set-fl > span` (0,1,1) tek
   sinifli `.set-bos-uyari`yi (0,1,0) YENIYORDU -> `display:flex` DUSUYOR, kap
   `block` kaliyor, `gap`/`align-items` NO-OP oluyordu. Flex olmayan kapta
   temanin preflight'i (`svg{display:block}`) ikonu KENDI SATIRINA dusuruyordu —
   olculdu: ikon merkezi ilk metin satirindan TAM 16.00px yukarida. Ayni ezme
   `font-weight`i 600 yapip <strong> vurgusunu da yok ediyordu.
   `.ym-panel-head > span.badge` dersinin birebir tekrari.
   ⚠️ DUZEN AKIS-ICI ORTALAMA (flex DEGIL): metin 2-3 satira sardigi icin
   `align-items:center` ikonu satirlarin ARASINA koyardi; ikon metnin ICINDE
   akinca her satir gercekten ortalanir. */
.set-bos-uyari,
.set-fl > span.set-bos-uyari {
  display:block; text-align:center;
  margin-top:var(--sp-2); margin-bottom:0; padding:8px 12px;
  border-radius:var(--radius-sm);
  background:var(--warn-soft);
  border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color:var(--fg); font-size:var(--t-sm); line-height:1.5; font-weight:400; }
/* ⚠️ `top:-2px` TAHMIN DEGIL OLCUM: `vertical-align:middle` tek basina ikonun
   murekkebini metnin cap merkezinden +2.22px ASAGIDA birakiyor (feather ucgeni
   kendi viewBox'inda +1.00px asagida + `middle` ustune +1.22px). `top:-2px` ile
   sapma +0.22px'e iner ve `position:relative` YERLESIMI DEGISTIRMEZ.
   ⚠️ Secici `svg.ic` ICERIR (0,2,1): yoksa hem global `svg.ic` (0,1,1) hem
   temanin `svg{display:block}` preflight'i kazanip ikonu yine block yapardi. */
.set-bos-uyari svg.ic { width:15px; height:15px; color:var(--warn);
  display:inline-block; vertical-align:middle; position:relative; top:-2px;
  margin:0 var(--sp-2) 0 0; }

/* ═══ MAIL SABLONLARI ══════════════════════════════════════════════════════
   Kullanici istegi: SMTP kartinda "Test Mail Gonder"in EN SAGINDA, AYNI HIZADA
   ucuncu bir eylem; tikla -> ayri sayfa.
   ⚠️ `margin-left:auto` cubuktaki TEK auto-marj olmali: ayni flex kapta iki
   auto-marj serbest alani IKIYE boler ve oge "en sag"a gitmez (panelin
   `.jl-noop` dersi). `.set-save` ve `.set-test-row` auto-marj TASIMIYOR. */
#s-smtp .set-save .set-sablon-btn { margin-left:auto; flex:none; }
/* ⚠️ 860px: eylem cubugunun ZATEN olculmus sarma esigi (bkz. #s-smtp kurallari).
   Sarinca auto-marj anlamsizlasir — oge tam genislige gecer ki yetim kalmasin. */
@media (max-width:860px){
  #s-smtp .set-save .set-sablon-btn { margin-left:0; }
}

/* ⚠️⚠️ `.set-inp{max-width:420px}` TUZAGI (panelin belgeli sinifi, SMTP kartinda
   bir kez isirmisti): 1122px'lik kartta TUM alanlar 420px'e kilitleniyordu —
   %37. HTML iskeleti duzenlemek icin bu genislik KULLANILAMAZ (satirlar kesilir).
   ⚠️ Kurallar `#mail-sablon` ile SINIRLI, BILEREK: `.set-inp` sayfadaki 12 ayar
   kartinda ORTAK; global acmak hepsini SESSIZCE degistirirdi (`.filter-bar`in
   audit.html'e, `.modal p`nin tum form modallerine sizmasi bu sinifin iki canli
   ornegi). */
#mail-sablon .set-inp { max-width:none; }
/* Iskelet kod alani: mono + yatay kaydirma (HTML satirlari uzundur, SARMAK
   okumayi zorlastirir). */
.mail-kod { font-family:var(--mono); font-size:var(--t-sm); line-height:1.55;
  white-space:pre; overflow:auto; tab-size:2; min-height:340px;
  background:var(--surface-2); }
/* ═══ POSTA TURU AC/KAPA + KAPALI DURUM ════════════════════════════════════
   Kullanici istegi 2026-08-14: (a) "Bu posta gonderilsin" kutusu begenilmedi ->
   kart BASLIGINDA anahtar (durum kontrolu basliga, metin duzenleme govdeye);
   (b) kapali oldugu DAHA BELIRGIN olsun -> turuncu rozet KIRMIZIYA + baslik da
   kirmizi rozet icine + kart duzeyinde isaret.
   ⚠️ Panelin `ipp-pasif` deseninin esi (kuruluma kapali IP havuzu): ray
   `border-left` DEGIL INSET GOLGE — dar seritte yaricap gonye uretir. */
/* Bolum basligi + o bolumdeki tur sayisi */
.mail-grup, .set-grup { display:flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-6); }
.mail-grup-n, .set-grup-n { font-size:var(--t-sm); font-weight:700; padding:1px 8px;
  border-radius:var(--radius-pill); background:var(--surface-2);
  color:var(--fg-muted); text-transform:none; letter-spacing:0; }
/* Katlanir tur karti. ⚠️ `<summary>` UA ucgenini gizle + tiklanabilir goster. */
.mail-tur > summary, .set-det > summary { cursor:pointer; list-style:none; }
.mail-tur > summary::-webkit-details-marker,
.set-det > summary::-webkit-details-marker { display:none; }
.mail-tur > summary:hover, .set-det > summary:hover {
  background:var(--surface-2); }
.mail-kapali > summary:hover {
  background:color-mix(in srgb, var(--danger) 11%, transparent); }
/* Acilir ok: baslik metninin ARDINDA (auto-marj YOK — anahtar zaten sagda) */
.mail-tur > summary .ax-card__title::after { content:'▾'; font-size:var(--t-xs);
  color:var(--fg-muted); margin-inline-start:var(--sp-2); }
.mail-tur[open] > summary .ax-card__title::after { content:'▴'; }
.mail-tur:not([open]) > summary,
.set-det:not([open]) > summary { border-bottom:none; }

/* ---- Ayarlar: TUM kartlar katlanir (kullanici istegi 2026-08-23) ----------
   Gorunum TEK KAYNAK: acilir kart kurallari Mail Sablonlari'nin `.mail-tur`
   seciciler listesine EKLENDI (yukarida), kopyalanmadi. Burada YALNIZCA
   ayarlara ozel iki fark yasar: okun yeri ve odak halkasi ofseti.
   ⚠️ Chevron AYARLARDA baslikta DEGIL SATIR SONUNDA: mail sayfasinda tur adi
   kisa ve ok basligin hemen yanina yapisir; ayarlarda her kartin uzun bir alt
   basligi var ve 14 kart alt alta dizildiginde oklarin AYNI dikey hatta olmasi
   "acilir liste" okumasini kuruyor (dagilmis oklar tesadufi duruyor).
   ⚠️ `margin-inline-start:auto` calisir cunku `.ax-card__header` bir flex
   satiri; ok, rozet VARSA onun SAGINA gecer (rozet bilgi, ok kontrol).
   ⚠️ Ok `<summary>`nin KENDI ::after'i (basligin degil) -> rozetle ayni
   eksende hizalanir. */
/* ⚠⚠ `display:flex` BURADA SART (canli olcum yakaladi: 14 okun sag
   kenari 14 farkli yerdeydi). Panelin KATMANSIZ `details > summary
   { display:inline-flex }` kurali (style.css basi) temanin `@layer
   components` icindeki `.ax-card__header { display:flex }` kuralini
   KOSULSUZ ezer (katmanli kural katmansiza DAIMA kaybeder) -> `<summary>`
   icerigi kadar daralir. Sonuclari: (a) oklar dagilir, (b) hover zemini
   satirin yalnizca bir kismini boyar. `.set-det > summary` (0,1,1)
   element seciciyi (0,0,2) ozgullukle yener; `justify-content`/`padding`
   yine temanin katmanli kuralindan gelir (yalniz `display` ezilir).
   ⚠️ Mail Sablonlari BILEREK boyle DEGIL: orada `<details>`in KENDISI
   karttir ve tasarim daralmayi kabul edip oku basligin yanina koymustur
   (kendi CSS yorumu: "auto-marj YOK"). Bu yuzden kural ORTAK seciciye
   degil yalniz `.set-det`e yazilir. */
.set-det > summary { display:flex; align-items:center; }
.set-det > summary::after { content:'\25be'; margin-inline-start:auto;
  font-size:var(--t-md); color:var(--fg-muted); line-height:1; flex:none;
  transition:transform .15s ease; }
.set-det[open] > summary::after { transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .set-det > summary::after { transition:none; }
}
/* ⚠️ Odak halkasi ICE cizilir: `<summary>` kartin UST kosesine oturur, disa
   ofsetli halka kart kenarinin disina tasar ve kirpilir. */
.set-det > summary:focus-visible { outline-offset:-2px; }
/* ⚠️ Rozet KAPALI kartta bilgi tasir -> baslik kumesinin DISINDA durur. */
/* ⚠️⚠️ ROZET SAGA YASLI (kullanici 2026-09-16: "barın en sağında yazsın,
   ortalı değil"). TEK BASINA `margin-inline-start:auto` YETMEDI: katlama
   okunun (`summary::after`) KENDI `auto` marji da var ve iki `auto` marj
   bos alani ARALARINDA ESIT BOLER — rozet tam ortada kaliyordu (olculdu:
   kart sag kenarina 157px). Cozum, rozet VARKEN okun marjini sifirlamak;
   rozetsiz kartlarda ok yine saga yasli kalir (davranis DEGISMEZ). */
.set-det-rz { flex:none; align-self:center; margin-inline-start:auto; }
.set-det > summary:has(.set-det-rz)::after { margin-inline-start:0; }
/* ⚠️ DAR EKRANDA ROZET KENDI SATIRINA INER: 420px'te baslik iki satira
   sariliyor ve rozet sarilmis basligin yanina SIKISIYORDU (ekran
   goruntusunde goruldu). Baslik bloku tam genislige alinca rozet + ok
   alt satira duser; ok yine saga yasli kalir. */
@media (max-width:600px) {
  .set-det > summary { flex-wrap:wrap; }
  .set-det > summary > .ax-card__titles { flex:1 1 100%; }
  .set-det-rz { margin-inline-start:0; }
  .set-det > summary:has(.set-det-rz)::after { margin-inline-start:auto; }
}

.mail-onoff { display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.mail-onoff-lb { font-size:var(--t-md); font-weight:600; color:var(--fg-muted); }
.mail-onoff-lb.on { color:var(--ok); }
.mail-kapali { box-shadow:inset 4px 0 0 0 var(--danger); }
.mail-kapali > .ax-card__header {
  background:color-mix(in srgb, var(--danger) 7%, transparent); }
/* ⚠️⚠️ BASLIK METNI IKI DURUMDA DA BIREBIR AYNI (kullanici karari, 2026-08-15:
   "gonderime acik veya kapali fark etmez yazi fontu ASLA degismesin, sadece
   kirmizi rozet gelsin"). Onceki tur basligi kirmizi pile aliyordu; font ve
   yukseklik ayniydi (olculdu: 20px / 38px, iki durumda da) ama SOLID kirmizi
   zemin ustundeki display-agirlikli 20px metin GOZE cok daha buyuk geliyordu.
   **DERS: bir metnin ZEMININI degistirmek, olcusunu degistirmeden onu "buyumus"
   gosterir — okunan sey font-size degil MUREKKEP KUTLESI.**
   Kapali durumun isareti artik YALNIZ: kirmizi inset sol ray + kirmizi tint
   baslik alani + solid kirmizi "Kapali" rozeti. `.mail-ad`e HIC dokunulmaz. */
.mail-kapali-rz { background:var(--danger); color:#fff; border-color:transparent; }
/* ⚠️ KOYU TEMADA `--danger` ACIK bir kirmizi (#ff8080) — beyaz metin 3.26'ya
   duser (olculdu). Zemini ezip metni SABIT birakmak panelin belgeli hatasi;
   ikisi BIRLIKTE sabitlenir ve IKI temada da olculur. */
:root[data-theme="dark"] .mail-kapali-rz { color:#1a0a08; }
.mail-kapali > .ax-card__header > .ax-card__titles > .ax-card__title > svg.ic {
  color:var(--danger); }
.mail-kapali .ax-card__subtitle { color:var(--fg-muted); }

/* ═══ DEGISKEN REFERANSI — acilir KONTROL + panel ═══════════════════════════
   ⚠️ `.apk-how-sum` KULLANILMADI (kullanici bu sayfada begenmedi): o sinif API
   Anahtarlari ve 2FA sayfalarinda ORTAK ve orada kart genisliginde bir SATIR
   olarak dogru duruyor (chevron `margin-inline-start:auto` ile en sagda). Burada
   ise form govdesinde TEK BASINA duran bir KONTROL var; tam genislikte olunca
   etiketle ok arasinda ~700px olu bosluk kaliyor ve "buton" gibi okunmuyordu.
   Ortak sinifi degistirmek DIGER IKI SAYFAYI bozardi -> sayfaya ait yeni sinif.
   ⚠️ `--radius-md` DIYE BIR TOKEN YOK (olcek: xs/sm/(yok)/lg/pill) — `--radius-sm`. */
.mail-vars { margin:var(--sp-2) 0 var(--sp-5); }
.mail-vsum { display:inline-flex; align-items:center; gap:var(--sp-2);
  cursor:pointer; list-style:none; padding:9px 14px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); font-size:var(--t-md); font-weight:600;
  color:var(--fg); transition:background .15s, border-color .15s, color .15s; }
.mail-vsum::-webkit-details-marker { display:none; }
/* ⚠️ `svg.ic` ICERIR: global `svg.ic` (0,1,1) AYNI ozgullukte ve dosyada sonra
   gelseydi bu boyutu ezerdi (panelin tekrar eden ikon tuzagi). */
.mail-vsum > svg.ic { width:16px; height:16px; flex:none; color:var(--primary); }
/* Ok metnin HEMEN ARDINDA (auto-marj YOK) — kontrol icerigi kadar genis kalir. */
.mail-vsum::after { content:'▾'; font-size:var(--t-xs); color:var(--fg-muted);
  margin-inline-start:2px; }
.mail-vsum:hover { background:var(--surface-2); border-color:var(--primary); }
.mail-vsum:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.mail-vars[open] > .mail-vsum { background:var(--primary-soft);
  border-color:var(--primary); color:var(--primary); }
.mail-vars[open] > .mail-vsum::after { content:'▴'; color:var(--primary); }
.mail-vn { font-size:var(--t-sm); font-weight:700; padding:1px 8px;
  border-radius:var(--radius-pill); background:var(--surface-2);
  color:var(--fg-muted); }
.mail-vars[open] .mail-vn { background:var(--surface); color:var(--primary); }

.mail-vbody { margin-top:var(--sp-3); padding:var(--sp-4) var(--sp-5);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); }
.mail-vb-hint { margin:0 0 var(--sp-3); font-size:var(--t-sm);
  color:var(--fg-muted); }
/* 22 degisken TEK SUTUNDA ~750px ediyordu; genis kartta iki sutuna akar. */
.mail-vgrid { display:grid; gap:0 var(--sp-6);
  grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); }
/* ⚠️ Ayirac HER satirda (`+ .mail-vrow` DEGIL): iki kolonlu izgarada kardeslik
   DOM sirasina bakar, gorsel kolona degil — sag kolonun ILK satiri da "onceki
   kardesin ardindan" gelip cizgi aliyor, sol kolonunki almiyordu (asimetri).
   Her satira vermek kolon sayisindan BAGIMSIZ ve simetrik; en usttekiler de
   ipucu metninin altina dogal bir ayirac cizer. */
.mail-vrow { display:flex; align-items:center; gap:var(--sp-3);
  padding:5px 0; min-width:0; border-top:1px solid var(--border); }
/* ⚠️ `.cbtn` sabit 26px tasir ama flex kabinda KUCULEBILIR -> flex:none. */
.mail-vrow > .cbtn { flex:none; }
/* ⚠️ "Kopyalandi" balonu TABANDA `right:0` ile SOLA acilir; burada buton satirin
   EN SOLUNDA oldugu icin panelin disina tasiyordu (ekran goruntusu yakaladi).
   `.table-card` baglaminda yapilanin esi: bu baglamda SAGA acilir. */
.mail-vrow .cbtn.copied::after { right:auto; left:0; }
.mail-vrow > code { flex:none; font-size:var(--t-sm); }
.mail-vd { color:var(--fg-muted); font-size:var(--t-sm); min-width:0;
  overflow-wrap:anywhere; }
@media (max-width:820px){ .mail-vgrid { grid-template-columns:1fr; } }

/* ⚠️⚠️ PANEL GENELI ERISILEBILIRLIK BULGUSU (bu turda OLCULDU, mail sayfasina
   OZGU DEGIL): `.ax-badge--soft.ax-badge--warning` ACIK temada
   fg #c8870f / bg #fbf1de = **2.70** kontrast — AA metin esigi 4.5'in cok
   altinda. Panelde 39 yerde kullaniliyor (VM listesi "CPU limiti", IP havuzlari,
   sablonlar...); yani amber rozetlerin metni bugune dek zar zor okunuyordu.
   ⚠️ KOYU TEMA SAGLAM (olculdu: 7.40) — bu yuzden duzeltme YALNIZ acik temaya;
   koyu tema temanin KENDI tokenini kullanmaya devam eder (ikinci bir yerde
   sabit deger tutmak drift uretirdi).
   ⚠️ ZEMIN AYNI KALIR: yalnizca metin panelin erisilebilir amberine cekilir —
   gorsel dil (amber = uyari) korunur, okunurluk duzelir.
   ⚠️ `data-theme` <head>'de HER ZAMAN yaziliyor (sistem modu dahil, base.html'de
   dogrulandi) → `:not([data-theme="dark"])` acik temayi kesin secer. */
:root:not([data-theme="dark"]) .ax-badge--soft.ax-badge--warning {
  color:var(--warn); }

/* ⚠️ AYNI BULGUNUN `info` AYAGI (2026-08-24, disk dokumu turunda OLCULDU):
   yukaridaki AA turunda success/warning/danger duzeltilmis ama `info`
   ATLANMIS — olculdu: ACIK temada **4.11** (esik 4.5), KOYU temada temiz.
   Bu rozet 8 sablonda 12+ yerde kullaniliyor (API anahtarlari, IP havuzlari,
   ISO, mail sablonlari, node detayi, profil...) → panel geneli bir kalem,
   disk dokumune ozgu DEGIL; dokum yalnizca gorunur kildi.
   ⚠️ Recete kardesiyle BIREBIR: zemin AYNI kalir (mavi = bilgi dili korunur),
   yalniz metin koyulastirilir; koyu tema temanin KENDI tokenini kullanmaya
   devam eder (olculdu: temiz) — ikinci bir sabit deger drift uretirdi.
   ⚠️⚠️ `color:var(--info)` YETMEZ (ilk denemem oydu ve SESSIZ NO-OP oldu:
   4.11 -> 4.11). Sebep: `--info` bu panelde style.css'teki #1d57e0 DEGIL,
   tema kopruSunun cozdugu #2d74c4 — rozet zaten o rengi aliyordu. Yani
   "token'a bagladim" demek duzelttim demek DEGIL; deger OLCULMELI.
   ⚠️ `color-mix` panelin kanitli koyulastirma receteSi (solid rozet ailesi
   ayni yolu kullaniyor); %85 olculerek secildi (5.36 — esik 4.5, rahat pay). */
:root:not([data-theme="dark"]) .ax-badge--soft.ax-badge--info {
  color:color-mix(in srgb, var(--info) 85%, #000); }

/* Eylem cubugu — SMTP kartinin KANITLI deseninin esi (kopya kural degil, ayni
   yapinin bu sayfaya uyarlanmasi): solid Kaydet solda, cerceveli ikili dikey
   hairline'in sagdan bitisiginde, dogrulama notu IKINCI SATIRDA.
   ⚠️ Not `flex:1 1 100%` ile alta duser — kullanici "notu 3 butonun ALTINA al"
   dedi; `.set-save` tabani `display:flex` oldugu icin bu tek yol (aksi halde
   not butonlarin SAGINDA kaliyordu). */
#mail-sablon .set-save { align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
#mail-sablon .set-save .set-test-row {
  border-inline-start:1px solid var(--border); padding-inline-start:var(--sp-5); }
/* (eski `#mail-sablon .set-save .set-test-note{...}` + `> svg.ic` kurallari
   SILINDI — kaydet notu artik `.ssl-durum.ssl-durum-info.not-bar` mavi
   barinda ve cubugun DISINDA, yani ikinci-satira-sarma recetesi ve yesil
   check ikonu gereksizlesti. Gorunum TEK KAYNAK `.not-bar`.) */
/* ⚠️ Esik SMTP kartiyla AYNI (860px): cubuk sarinca dikey ayirici artik yan yana
   OLMAYAN iki kumeyi "ayiriyormus" gibi durur. */
@media (max-width:860px){
  #mail-sablon .set-save .set-test-row { width:100%;
    border-inline-start:none; padding-inline-start:0; }
}

/* ═══ AYARLAR › E-POSTA (SMTP) KARTI ═══════════════════════════════════════
   Kullanici: "butonlar cok ayri guzel bir ekran yok".
   ESKI HAL: konu IKI karttaydi — ustte ayarlar + "Kaydet", ALTINDA ayri bir
   `set-card--sub` kartinda test + "Gonder"; iki buton 150px arayla ve FARKLI
   kart yuzeylerindeydi. Ayrica "Guvenlik" tek basina bir satirdaydi ve saginda
   ~700px olu bosluk birakiyordu.
   ⚠️ YENI SINIF YOK — kurallarin hepsi MEVCUT siniflarin kart kapsaminda ayari.
   Kurallar `#s-smtp` ile sinirli, BILEREK: `.set-two`/`.set-save` sayfadaki
   sekiz bolumde ORTAK; global acmak captcha/musteri/alarm kartlarini da
   SESSIZCE degistirirdi (`.filter-bar`in audit.html'e, `.modal p`nin tum form
   modallerine sizmasi bu sinifin iki canli ornegi). */

/* 1) SAG YARIDAKI OLU BOSLUGUN OLCULEN KOKU: `.set-inp{max-width:420px}`.
   `.set-three` bu tavani ZATEN sifirliyor (gorev-araliklari kartinin dolu
   gorunme nedeni), `.set-two` sifirlamiyordu -> 575px'lik kolonda kolon basina
   155px tirtikli bosluk. Kolonlar zaten `minmax(0,1fr)` ile sinirli. */
#s-smtp .set-two .set-inp { max-width:none; }

/* 2) Kaydet ile test AYNI cubukta. `.set-save` tabani `display:flex` + ust
   hairline tasiyor; burada yalnizca dikey hizalama, bosluk ve sarma eklenir. */
#s-smtp .set-save { align-items:center; gap:var(--sp-5); flex-wrap:wrap; }

/* 3) Test kumesi saga yaslanir + ince dikey ayirici.
   ⚠️ auto-marj YALNIZ TEK ogede: ayni flex kapta iki auto-marj serbest alani
   IKIYE BOLER ve "en saga" vaadi bozulur (jobs barinda yasandi).
   ⚠️ `--border` BURADA kullanilabilir: zemin kartin kendi `--surface`i ve hemen
   ustteki `.set-save{border-top:1px solid var(--border)}` ayni tokenle gorunur
   cizgi ciziyor. Zeminli (`surface-2`) bir panelde bu token GORUNMEZ olurdu. */
/* ⚠️ SAGA YASLANMAZ: `margin-left:auto` ile test kumesi kartin ta sagina
   gidiyordu ve iki buton 651px araya dusuyordu — kullanicinin "butonlar cok
   ayri" sikayeti YATAY olarak geri gelirdi. Bitisik dururlar; karistirilmamalari
   dikey hairline + ton farkiyla saglanir (solid Kaydet vs cerceveli test). */
#s-smtp .set-save .set-test-row {
  border-inline-start:1px solid var(--border); padding-inline-start:var(--sp-5); }
/* (eski `#s-smtp .set-save .set-test-note{flex:1 1 100%}` kurali SILINDI —
   test notu artik `.not-bar` mavi barinda ve `.set-save`in DISINDA.) */
/* ⚠️ ALICI KUTUSU ILE BUTON TEK SATIRDA: `.set-inp` tabani `width:100%` tasir ve
   flex icinde bu "kabin TAMAMINI iste" anlamina gelip butonu ALT SATIRA
   dusuruyordu (canli olculdu: kume 84px = iki satir, buton Kaydet'in 23px
   altinda). Genislik burada acikca verilir ve kume sarmaz. */
#s-smtp .set-save .set-test-row { flex-wrap:nowrap; }
#s-smtp .set-save .set-test-row .set-inp { width:auto; flex:0 1 400px; }

/* 4) Dar ekran: cubuk sarinca ayirici ANLAMSIZ kalir (artik yan yana degil) */
/* ⚠️ Esik OLCULDU (700 degil): eylem cubugu 860px ile 820px ARASINDA sariyor;
   700'de birakilinca 760px'te ayirici hala ciziliyor ve artik yan yana
   olmayan iki kumeyi 'ayiriyormus' gibi duruyordu. */
@media (max-width:860px){
  #s-smtp .set-save .set-test-row { width:100%;
    border-inline-start:none; padding-inline-start:0; flex-wrap:wrap; }
}

/* 5) ⚠️ `[hidden]` KOPRUSU — panelde BES kez isiran tuzak (.iso-prog,
   .snap-sched-detail, .ym-plan-opt, .kmodal-overlay, .set-up-msg): global bir
   `display` kurali UA'nin [hidden]'ini EZER. Govdesiz test formu ekranda yer
   kaplamamali; kaprunun maliyeti bir satir, sessiz regresyonun maliyeti bir tur. */
#smtp-test[hidden] { display:none; }
/* Gece logosu KOYU zemin uzerinde onizlenir — acik satirda gorunmezdi */
/* ⚠️ ONIZLEME ZEMINI TEMAYA BAGLANAMAZ: gunduz logosu ACIK zemin, gece logosu
   KOYU zemin icin tasarlanmistir; onizleme satiri panelin temasini izlerse
   yanlis logo kendi kutusunda KAYBOLUR. Once yalnizca geceye sabit zemin
   verilmisti — o zaman koyu temada GUNDUZ logosu (#17253f uzerinde) okunmuyor,
   operator dosyayi bozuk sanip tekrar tekrar yukluyordu. Iki tur de kendi
   karsit zeminini TASIR; renkler bilerek sabittir (tema token'i degil). */
.set-logo-light { background:#ffffff; border-color:#dfe6f4; }
.set-logo-light .mono, .set-logo-light .ax-badge { color:#101c31; }
.set-logo-dark { background:#1b2130; border-color:#2b3450; }
.set-logo-dark .mono, .set-logo-dark .ax-badge { color:#e6ebf5; }
@media (max-width:1100px){
}
@media (max-width:820px){
  .set-two { grid-template-columns:1fr; }
}
.set-three { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0 var(--sp-6); align-items:start; }
.set-three .set-fl, .set-three .set-inp, .set-three select { min-width:0; max-width:none; }
@media (max-width:1100px){ .set-three { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:820px){ .set-three { grid-template-columns:1fr; } }

/* ---- UYARILAR sayfasi (/panel/alerts) ---------------------------------
   Tema 2026-08-19: eski sablon-ici <style> blogu (ham px + odunc badge
   siniflari) buraya token'li tasindi. Kart iskeleti tpl-card (20px baslik
   ORTAK kuraldan gelir); siddet tonu `--tone` deseniyle (.vc kart dili):
   inset sol ray + ikon cipi + soft rozet. */
/* Hukum seridi: usec ailesi (users ile ORTAK — kurallari DEGISTIRILMEZ, alerts
   ihtiyaci `al-` onekli modifier'la). Eski worker seridi bu seride birlesti. */
.al-strip { margin-block-end:var(--sp-5); }
/* Bolum etiketi — nd-sec'in alerts ayagi; capa kaydirmasi tepede yapismasin. */
.al-sec { margin-block-start:var(--sp-4); scroll-margin-top:var(--sp-8); }
.al-list > .al-sec:first-child,
.al-list > .warn-box + .al-sec { margin-block-start:0; }
.al-sec > svg.ic { width:16px; height:16px; flex:none; color:var(--fg-muted); }
/* nd-sec uppercase + letter-spacing mirasi rozetlere sizmasin (isos dersi). */
.al-sec .ax-badge { text-transform:none; letter-spacing:normal; }
/* Zaman satiri: meta metni degil OPERASYON bilgisi — tam kontrast + tabular. */
.al-time { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2);
  font-size:var(--t-sm); color:var(--fg); font-variant-numeric:tabular-nums;
  flex-wrap:wrap; }
.al-time > svg.ic { width:13px; height:13px; flex:none; color:var(--fg-muted); }
/* Kartlar arasi ritim (ISO ailesiyle ayni). */
.al-card-wrap + .al-card-wrap { margin-block-start:var(--ax-space-8, 32px); }
.al-list { display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5) var(--ax-space-6, 24px) var(--ax-space-6, 24px); }
/* ⚠️ tpl-card ailesinde kart dolgusu 0 (tablo kenardan kenara aksin) -> tablo
   DISI her bolum kendi yatay dolgusunu tema token'iyla tasir (belgeli kural). */
/* Uyari karti: siddet TEK degiskenden (`--tone`) — zemin yikamasi + ray + cip. */
.al-card { --tone:var(--warn); display:flex; gap:var(--sp-4); align-items:flex-start;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--tone) 4%, var(--surface));
  border:1px solid color-mix(in srgb, var(--tone) 24%, var(--border));
  /* ⚠️ Ray border-left DEGIL INSET GOLGE: dar seritte kose yaricapi gonye
     uretir (belgeli ders); golge kutunun KENDI radius'unu izler. */
  box-shadow:inset 3px 0 0 var(--tone); }
.al-card.critical { --tone:var(--danger); }
.al-ic { flex:none; width:32px; height:32px; border-radius:var(--radius-xs);
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--tone) 14%, var(--surface)); color:var(--tone); }
.al-ic > svg.ic { width:16px; height:16px; }
.al-body { flex:1; min-width:0; }
.al-title { font-size:var(--t-lg); font-weight:600; display:flex;
  align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.al-detail { font-size:var(--t-md); color:var(--fg-muted); margin-top:var(--sp-1);
  line-height:1.5; overflow-wrap:anywhere; }
/* job_failure ham motor hatasi: mono + 2 satir kirp; tam metin title'da. Clamp
   YALNIZ bu modifier'da (-webkit-box normal akisi ezer — genele sizamaz). */
.al-ham { font-family:var(--mono); font-size:var(--t-sm);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
/* Eylem sutunu: kopru USTTE, Kapat altta, esit genislik.
   ⚠️ `display:contents` form'u dizilime katar — `+` komsulukla BIRLIKTE
   kullanilmaz (isos'taki display:contents dersi; burada komsu secici yok). */
.al-act { flex:none; display:flex; flex-direction:column; gap:var(--sp-2);
  align-items:stretch; }
.al-act form { display:contents; }
.al-act .btn.sm { justify-content:center; }
/* ⚠️ Tonlu zeminde `btn` gorunur kalsin: kart zemini yikamali -> butona acikca
   `--surface` (gri-zeminli kapta seffaf buton dersinin tonlu-kart ayagi).
   ⚠️⚠️ OZGULLUK (0,4,0) SART: temanin alias katmani `.btn:not(.primary):not(.danger)`
   = (0,3,0) ile `background:0 0` yazar ve alias.css style.css'ten SONRA yuklenir —
   (0,2,0)/(0,3,0) yazilsaydi kural SESSIZCE yenilirdi (canli olculdu: buton seffaf). */
.al-card .al-act .btn.sm { background:var(--surface); }
.al-empty { text-align:center; padding:var(--sp-8) var(--sp-5);
  color:var(--fg-muted); border:1px dashed var(--border);
  border-radius:var(--radius-sm); }
/* ⚠️ tema preflight svg'yi display:block yapar — kapsayicinin
   text-align:center'i onu ORTALAMAZ (belgeli tuzak) -> auto yatay marj. */
.al-empty > svg.ic { width:32px; height:32px; color:var(--ok);
  margin:0 auto var(--sp-3); }
.al-empty-t { font-size:var(--t-lg); font-weight:600; color:var(--fg);
  margin-bottom:var(--sp-1); }
/* Kapanan tablosu: detay satiri + zaman kolonu.
   ⚠️ KOLON GENISLIKLERI ACIKCA VERILIR (ekran goruntusu yakaladi): detaydaki
   `overflow-wrap:anywhere` ilk kolonun min-content genisligini sifira indiriyor,
   tarayici da genisligi rozet kolonlarina dagitip BASLIGI KELIME KELIME kiriyordu
   (90px'lik "Uyari" kolonu + devasa bos "Siddet" kolonu).
   ⚠️ Kurallar `.al-card-wrap` KAPSAMLI — ciplak nth-child baska tablolara sizar
   (belgeli tuzak). */
/* ⚠️ `table-layout:fixed` SART (canli olculdu): auto duzende th'ye verilen
   yuzde genislik UYGULANMADI (kolon 214px kaldi) — fixed duzen yuzdeleri
   kesin uygular, kolonlar iceriğe gore oynamaz. */
/* KAPANAN UYARILAR v5 — ISLEMLER TARZI TABLO (kullanici istegi) + v4'un
   ONAYLANAN renk DNA'si: tr'de --_dt ton degiskeni -> %4 yikamali zemin +
   ilk hucrede 2px inset ray + 24px tonlu ikon cipi. Varsayilan (Elle
   kapatildi) --info mavi, .al-done-ok (Kendiliginden duzeldi) --ok yesil.
   Ton YALNIZ zemin + ray + cipte yasar; METIN tona boyanmaz (AA kurali).
   Yikama %4 tek degiskende — "parlak/soluk" itirazi tek satirla ayarlanir. */
/* Arama bari: global .filter-bar'in duzeni KULLANILIR (buyutecli q kutusu +
   40px kontrol yuksekligi bedava) ama kart ICINDE zemin/cerceve/golge
   SIFIRLANIR — kart icinde kart olmasin (belgeli filter-bar dersi). Yatay
   dolgu kartin kenardan-kenara ritmi (ipp-actions dersi). */
.al-done-fb { margin:var(--sp-4) var(--ax-space-6, 24px);
  padding:0; background:transparent; border:0; box-shadow:none; }
/* Kutu MAX-WIDTH'SIZ esner (kullanici istegi: bar tam genislige yayilsin) —
   q kalan tum alani alir, bar kenardan kenara dolar. */
.al-done-fb input[name="q"] { flex:1 1 260px; }
/* Sozlesme metni kutusu (soluk subtitle'dan tasindi — okunurluk). */
.al-done-info { margin:var(--sp-4) var(--ax-space-6, 24px) 0; }
.al-done-info > svg.ic { flex:none; }
/* ⚠️ ax-select %100 genislik ister — barda icerik boyuna (belgeli tuzak). */
.al-done-fb select { width:auto; }
/* Suzgec bos dondu bandi (form durur, Temizle ile cikis acik). */
.al-done-bos { padding:var(--sp-6) var(--ax-space-6, 24px);
  color:color-mix(in srgb, var(--fg-muted) 62%, var(--fg));
  font-size:var(--t-md); }
/* ⚠️ v1 tablo dersi: auto duzen th yuzdesini UYGULAMAZ + overflow-wrap ilk
   kolonun min-content'ini sifirlayip basligi kelime kelime kirar ->
   table-layout:fixed + yuzde genislikler SART. */
.al-done-tbl { table-layout:fixed; }
.al-done-tbl th:nth-child(1) { width:52%; }
.al-done-tbl th:nth-child(2) { width:14%; }
.al-done-tbl th:nth-child(3) { width:18%; }
.al-done-tbl th:nth-child(4) { width:16%; }
/* Zemin/hover iki-sinifli secicide (0,2,0) — temanin olasi tbody tr
   kurallarini sira degil OZGULLUKLE ezer (belgeli sinif). */
.al-done-tbl .al-done-row { --_dt:var(--info);
  background:color-mix(in srgb, var(--_dt) 4%, var(--surface));
  transition:background-color .15s ease; }
.al-done-tbl .al-done-row.al-done-ok { --_dt:var(--ok); }
/* Tarama geri bildirimi (ISO ui-ux dersi: hover'siz satirda goz kayboluyordu) */
.al-done-tbl .al-done-row:hover {
  background:color-mix(in srgb, var(--_dt) 8%, var(--surface)); }
/* Ray border-left DEGIL inset golge (gonye tuzagi — belgeli ders); tr'ye
   golge collapse duzeninde guvenilmez -> ILK HUCREDE. Aktif kartin 3px'ine
   karsi 2px = arsiv dozu. */
.al-done-row > td:first-child { box-shadow:inset 2px 0 0 var(--_dt); }
/* Ilk hucre: cip + metin blogu yan yana; flex-start (baslik sarabilir). */
.al-done-c1i { display:flex; align-items:flex-start; gap:var(--sp-3); }
/* Metin blogu dikey: baslik + aciklama. min-width:0 SART (flex auto-min
   tuzagi — uzun aciklama hucreyi sisirirdi). */
.al-done-c1t { min-width:0; flex:1 1 auto; display:flex;
  flex-direction:column; gap:2px; }
/* Aciklama EKRANDA gorunur soluk satir (tooltip'ten tasindi — kullanici
   istegi); uzun ham metin 2 satir clamp, tamami kendi title'inda.
   job_failure ham motor metni mono (aktif al-ham ile ayni dil). */
.al-done-d { font-size:var(--t-sm);
  color:color-mix(in srgb, var(--fg-muted) 62%, var(--fg));
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.al-done-d.al-done-ham { font-family:var(--mono); }
/* Ikon cipi: usr-act-ic/usec-ic ailesinin dili, 24px (aktif al-ic 32px).
   Ikon rengi ham ton — grafik ogesi (3:1 sinifi), pikselle olculur. */
.al-done-ic { flex:none; width:24px; height:24px; border-radius:var(--radius-xs);
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--_dt) 12%, var(--surface));
  color:var(--_dt); }
/* ⚠️ secici `svg.ic` ICERMELI — icermezse global svg.ic ayni ozgullukte
   yarisir ve dosya sirasi belirler (belgeli ikon tuzagi). */
.al-done-ic > svg.ic { width:14px; height:14px; flex:none; }
/* Kritik siddet: cip KOMPLE danger tonlu (kullanici bulgusu: kirmizi
   halka icinde yesil ikon celisiyordu — "disi kirmizi ici yesil") ->
   zemin danger tinti + ikon kirmizi; satir zemini/ray kapanis renginde
   kalir. Metinsel kanal cip title'inda. */
.al-done-ic.al-done-crit {
  background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  color:var(--danger); }
/* Baslik SARAR (ellipsis yok — tam metin gorunur; fixed duzende guvenli);
   600 agirlik. Kopru basligin kendisinde: renk kalitilir, hover'da primary. */
.al-done-t { min-width:0; font-size:var(--t-md); font-weight:600;
  overflow-wrap:anywhere; }
.al-done-t a { color:inherit; text-decoration:none; }
.al-done-t a:hover { color:var(--primary); text-decoration:underline; }
.al-done-t a:focus-visible { outline:2px solid var(--primary);
  outline-offset:2px; border-radius:var(--radius-xs); }
/* Zemin ezilirken METIN RENGI birlikte sabitlenir (belgeli rozet dersi):
   soft-success metni tint zemin kompozitinde 3.01'e dusmustu (piksel olcum).
   Metin karisimi usec-ok'un kanitli AA recetesi. */
.al-done-row .ax-badge--neutral { background:var(--surface); color:var(--fg-muted); }
.al-done-row .ax-badge--success { background:var(--surface);
  color:color-mix(in srgb, var(--ok) 72%, var(--fg)); }
/* Sure/zaman hucreleri: tonlu zeminde 12px icin belgeli AA karisimi
   (usec-m ile ayni recete sinifi); sayilar tabular. */
.al-done-dur, .al-done-when { font-size:var(--t-sm);
  color:color-mix(in srgb, var(--fg-muted) 62%, var(--fg));
  font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Pager tablonun altinda kendi dolgulu kabinda (tpl-card padding 0 —
   kenardan-kenara kart dersinin pager ayagi). */
.al-done-foot { padding:var(--sp-4) var(--ax-space-6, 24px) var(--ax-space-6, 24px); }
.al-done-pager { margin:0; }
/* Sayfalama capasi tepeye yapismasin. */
#kapanan { scroll-margin-top:var(--sp-8); }
/* Dar ekran: aktif kart eylemleri yatay iner. Tablo fixed+yuzde oldugu icin
   kabina uyar (tasma yok); baslik sarar, sure/zaman hucreleri daralir. */
@media (max-width:860px) {
  .al-card { flex-wrap:wrap; }
  .al-act { flex-direction:row; width:100%; justify-content:flex-end; }
}

/* ============================================================================
   SSL + GERCEK ISTEMCI IP karti (#s-ssl — Ayarlar). Radio kartlari captcha'nin
   ONAYLI .cap-pick ailesini paylasir; burada yalniz karta ozgu parcalar var.
   ⚠️ Kosullu alanlar [hidden] ile gizlenir; .set-two/.set-fl display tanimladigi
   icin UA'nin [hidden] kurali EZILIR (belgeli tuzak: kmodal/snap-sched sinifi)
   -> gizleme ACIK kuralla garanti edilir. */
.ssl-cond[hidden] { display:none; }
/* Kart sarmalayici yiginin DISINDA yasar (s-durum gibi) -> ust kartla marji
   kendi tasimali; token .set-durum ile AYNI (kullanici bulgusu: bosluksuzdu). */
#s-ssl, #s-proxy { margin-top:var(--sp-5); }
/* ---- SSL DURUM BANDI (.ssl-durum) — #s-ssl kartinin tepe ogesi ------------
   du-srv satir anatomisi (cip + ad-ustte/kunye-altta + sagda rozet) +
   al-card ton DNA'si: TEK --_sd degiskeninden %4 zemin yikamasi + %24
   cerceve karisimi + INSET sol ray (border-left DEGIL — dar seritte
   yaricap gonye uretir, belgeli ders). MOD-BAGIMSIZ: svSslM dokunmaz —
   band KAYITLI gercegi soyler, radio kaydedilmemis taslaktir. */
.ssl-durum { --_sd:var(--ok); display:flex; flex-direction:column;
  gap:var(--sp-2); margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-4);
  background:color-mix(in srgb, var(--_sd) 4%, var(--surface));
  border:1px solid color-mix(in srgb, var(--_sd) 24%, var(--border));
  border-radius:var(--radius-sm);
  box-shadow:inset 3px 0 0 var(--_sd); }
.ssl-durum.ssl-durum-warn { --_sd:var(--warn); }
.ssl-durum.ssl-durum-err  { --_sd:var(--danger); }
/* ⚠️ (0,2,0) SART: .alr-ic kendi --_t'sini (0,1,0) LOKAL tanimlar —
   kalitim tek basina yetmez, ezilmeli. */
.ssl-durum .alr-ic { --_t:var(--_sd); }
.ssl-durum-bas { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.ssl-durum-ad { flex:1 1 auto; min-width:0; display:flex;
  flex-direction:column; gap:2px; }
.ssl-durum-ad > b { font-size:var(--t-lg); font-weight:600;
  overflow-wrap:anywhere; }
.ssl-durum-ad > small { color:var(--fg-muted);
  font-size:var(--t-sm); line-height:1.45; overflow-wrap:anywhere; }
.ssl-durum-bas > .ax-badge { flex:none; }
/* ⚠️ SOFT-SUCCESS 3.01 SINIFI: yikamali zeminde rozet cifti BIRLIKTE
   sabitlenir (du-srv'nin kanitli AA recetesi birebir); danger/warning
   soft ciftlerine DOKUNULMAZ (panel-geneli AA-kanitli). */
.ssl-durum .ax-badge--success { background:var(--surface);
  color:color-mix(in srgb, var(--ok) 72%, var(--fg)); }
/* Kunye seridi — ipp-blkstat recetesi (onayli hairline hucre dili).
   ⚠️ Hairline'lar --border'a BAGLANMAZ (dusuk-alfa, zeminli panelde
   kaybolur — belgeli ders) -> OPAK fg-muted karisimi. */
.ssl-durum-kunye { display:flex; flex-wrap:wrap; row-gap:var(--sp-2);
  padding-top:var(--sp-2);
  border-top:1px solid color-mix(in srgb, var(--fg-muted) 26%, transparent); }
.ssl-kunye-h { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ssl-kunye-h + .ssl-kunye-h {
  border-inline-start:1px solid color-mix(in srgb, var(--fg-muted) 26%, transparent);
  padding-inline-start:var(--sp-5); margin-inline-start:var(--sp-5); }
/* Veren/Gecerlilik hucreleri FERAH (kullanici: "biraz daha uzun olsun");
   Konum TAM yol + kendi tam-genislik satirinda EN SAGA yasli (kullanici
   istegi — 90+ karakterlik yol ilk satira sigmaz, sarkan ayirici cizgi
   birakiyordu -> hucre ayiricisi Konum'da KALDIRILIR). Kapsam #s-ssl
   kunyesi: nth-child sizinti riski yok (yapi sabit, baska kullanim yok). */
.ssl-durum-kunye > .ssl-kunye-h:nth-child(1) { min-width:130px; }
.ssl-durum-kunye > .ssl-kunye-h:nth-child(2) { min-width:260px; }
/* (0,3,0) — `+` komsuluk kurali da (0,2,0): dosya sirasina birakilmaz.
   SOL hizali (kullanici 2. tur: saga yasli hali "kaymis" gorundu — etiket
   ve deger Veren/Gecerlilik ile AYNI sol cizgide baslar). */
.ssl-durum-kunye > .ssl-kunye-h.ssl-kunye-konum { flex-basis:100%;
  margin-inline-start:0; border-inline-start:none; padding-inline-start:0;
  margin-top:var(--sp-1); }
.ssl-kunye-h > small { font-size:var(--t-xs); color:var(--fg-muted);
  text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.ssl-kunye-h > b { font-size:var(--t-md); font-weight:600; color:var(--fg);
  overflow-wrap:anywhere; }
.ssl-kunye-h > code { font-family:var(--mono); font-size:var(--t-sm);
  color:var(--fg); overflow-wrap:anywhere; }
/* LE omur cubugu. Iki-sinifli kap (.ot-track.ssl-omur — dosya-sirasi tuzagi)
   + dolgu ACIKCA blok + RENK ACIKCA verilir (.ot-bar tabani renk TASIMAZ,
   renksiz cizim SAYDAM — belgeli tuzak).
   ⚠️ Renk secicileri (0,3,0)'da: global .ot-bar.thr-bad (0,2,0) burada
   KAYBEDERDI -> kendi az/gecti modifier'lari ayni (0,3,0) duzeyinde. */
/* Kompakt: cubuk + notu AYNI SATIRDA (dikey bir satir kazanci); dar ekranda
   flex-wrap ile not alta sarar. Cubuk ESNEK buyur (kullanici: "kisa kalmis")
   — kalan genisligi doldurur, not sabit kuyruk. */
.ssl-omur-w { display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-1) var(--sp-3); }
.ssl-omur-w > small { color:var(--fg-muted); font-size:var(--t-sm); flex:none; }
.ot-track.ssl-omur { display:block; height:8px; flex:1 1 260px; min-width:200px; }
.ot-track.ssl-omur > .ot-bar { display:block;
  background:color-mix(in srgb, var(--ok) 72%, var(--surface)); }
.ot-track.ssl-omur > .ot-bar.ssl-omur-az {
  background:color-mix(in srgb, var(--warn) 78%, var(--surface)); }
.ot-track.ssl-omur > .ot-bar.ssl-omur-gecti {
  background:color-mix(in srgb, var(--danger) 78%, var(--surface)); }
/* Manuel moddaki davranis notu (bilgi bandin kendisinde — burada yalniz cumle). */
.ssl-man-not { display:block; margin-bottom:var(--sp-2); }
@media (max-width:900px) {
  .ssl-kunye-h + .ssl-kunye-h { padding-inline-start:var(--sp-4);
    margin-inline-start:var(--sp-4); } }
/* ---- SEGMENT KONTROL (.seg) — provision.html yerel style'indan GLOBALE
   TASINDI (2. kullanici #s-ssl; tasi-kopyalama kurali). Token donusumu:
   13.5px→--t-md(13) · 11px→--radius-sm(10) · 8px→--radius-xs(tam) ·
   4px→--sp-1(tam) · 16px→--sp-5(tam) · gap 7px→--sp-2(8) — kayma ≤1px.
   .place-seg modifier'lari provision'da yerel kalir ((0,2,x), tabani ezer). */
.seg { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-1); width:100%;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:var(--sp-1); margin-bottom:var(--sp-5); }
.seg-opt { position:relative; cursor:pointer; user-select:none; }
.seg-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.seg-opt span { display:flex; justify-content:center; align-items:center;
  gap:var(--sp-2); width:100%; padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-xs); box-sizing:border-box;
  font-size:var(--t-md); font-weight:600; color:var(--fg-muted);
  transition:background .14s, color .14s; }
.seg-opt span .ic { width:16px; height:16px; }
.seg-opt:hover span { color:var(--ax-accent);
  background:color-mix(in srgb, var(--ax-accent) 8%, transparent); }
.seg-opt input:checked + span { color:var(--ax-accent);
  background:color-mix(in srgb, var(--ax-accent) 15%, transparent); }
.seg-opt input:focus-visible + span { outline:2px solid var(--primary);
  outline-offset:2px; }
/* SSL MODU SEGMENTI — 3 kolon; secili durum .place-seg'in KANITLI recetesi
   (beyaz kartta accent yikamasi soluk kalir; onayli mavi dolgu + AA cifti).
   ⚠️ PROXY SEGMENTI (.px-seg) AYNI KURALI PAYLASIR (kullanici 2026-08-21:
   "3 butonu SSL'de oldugu gibi yan yana sirali yapalim") — kural KOPYALANMAZ,
   secici listesi genisler; boylece iki segment arasinda gorsel drift olamaz. */
.ssl-seg, .px-seg { grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-bottom:var(--sp-2); }
.ssl-seg .seg-opt:hover span, .px-seg .seg-opt:hover span {
  color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, transparent); }
/* ⚠️ SECILI DURUM RECETESI ORTAK (.ssl-seg + .px-seg): taban `.seg-opt`
   `--ax-accent %15` yikamasi iki temada da AA ALTINDA olculdu (2026-08-21:
   acik 4.25 / koyu 3.39). Proxy karti segmente gecerken bu ezmeyi
   ALMAYINCA olcut yakaladi — kanitli cift TEK KAYNAKTA tutulur. */
.ssl-seg .seg-opt input:checked + span,
.ssl-seg .seg-opt input:checked:hover + span,
.px-seg .seg-opt input:checked + span,
.px-seg .seg-opt input:checked:hover + span {
  background:var(--primary-soft); color:var(--primary); font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
/* Secili modun tek satir ipucu — kullanici: "cok kucuk gorunmuyor" -> boy VE
   renk BIRLIKTE buyudu (13/14/16 dersi: tek kademe gorunmez); .faint
   KULLANILMAZ (koyu tema AA sinifi). Metin svSslM ile data-h-* sozlugunden. */
.ssl-mod-hint { margin:0 0 var(--sp-4); font-size:var(--t-lg); line-height:1.55;
  color:color-mix(in srgb, var(--fg-muted) 35%, var(--fg)); }
/* Ipucu MAVI BAR (kullanici: "SSL yok bandiyla ayni tasarimda mavi bar") —
   ssl-durum DNA'si TEK KAYNAK (kopya kural yok), ton --info. Band dikey
   kolon; ipucu tek satir -> yatay diziyoruz. id IC p'de yasar (svSslM
   textContent yazar — sarmalayiciya yazsa cipi silerdi). */
.ssl-durum.ssl-durum-info { --_sd:var(--info); }
.ssl-durum.ssl-mod-hint-w { flex-direction:row; align-items:center;
  gap:var(--sp-3); margin:0 0 var(--sp-4); }
.ssl-mod-hint-w > .ssl-mod-hint { margin:0; }
/* Yogunluk — yalniz YERLESIM ayari (bilesen stiline dokunulmaz). */
#s-ssl .set-fl { margin-bottom:var(--sp-3); }
#s-ssl .set-save { margin-top:var(--sp-3); }
/* Alan kutulari kolonu DOLDURUR (kullanici: "yamuk duruyorlar" — 420px tavani
   iki kolonda asimetrik bitiyordu; SMTP kartinin ayni-sinif cozumu). */
#ssl-alanlar .set-inp { max-width:none; }
/* Uyari bari KOMPAKT (kullanici: "cok buyuk kalmis") — doz ayari, warn-box
   bileseninin kendisi degismez. */
.warn-box.ssl-uyari-sm { font-size:var(--t-sm); line-height:1.55;
  padding:var(--sp-3) var(--sp-4); }
/* ⚠️ Kaydet/Yenile butonu SAYFANIN GERI KALANIYLA AYNI BOYDA (kullanici
   2026-08-21: "SSL butonlari digerlerinden buyuk duruyor"). `lg` govdesi ve
   min-width ezmesi KALDIRILDI — 13 kardes kaydet butonu duz `btn primary`;
   etiket ("SSL al"/"Yenile"/"Kaydet ve uygula") genisligi zaten belirler. */
/* Dar ekran: 3 etiket sigmaz -> tek kolon. ⚠️ YENI 640px kirilimi — mevcut
   860/900/1020 medya-split olcutlerini KAYDIRMAZ (yeni literal, blok sonunda). */
@media (max-width:640px) { .ssl-seg, .px-seg { grid-template-columns:1fr; } }
/* ---- PROXY KARTI (#s-proxy) ----------------------------------------------
   Kullanici tarifi 3. tur (2026-08-21): "3 butonu SSL'de oldugu gibi YAN YANA
   sirali yapalim; altinda ise IP basligi ve proxy listesi alanlari."
   ⚠️ IKI-KOLON DONEMI KAPANDI (`.px-grid` + dikey `.px-seg` + esit-pil
   recetesi) — segment artik `.ssl-seg` ile AYNI kurali paylasir (3 kolon,
   yatay), proxy'ye OZEL hicbir segment ezmesi YOK. Boylece iki kart arasinda
   gorsel fark birakacak bir yuzey kalmiyor.
   ⚠️ O donemin kalici dersi CSS'te KALSIN (tekrar denenmesin):
   `.seg-opt` bir <label> ve panelin GLOBAL `label{margin:14px 0 6px}` kuralini
   miras alir; DIKEY akista 3 x 20 = 60px free space'i yer ve piller kutuyu
   dolduramaz. O zaman "grid stretch definite degil" sanilip UC yol denendi
   (span height:100% / grid-auto-rows:1fr / kapa height:100%), UCU DE ayni
   108.1px'i verdi; canli DOM deneyi (kaba ACIKCA height:402px) teshisi
   curuttu. DERS: "flex-grow calismiyor" gorunumunde ONCE item MARJLARINI olc.
   ⚠️ `.ssl-cfl` ailesi (katlanir CF listesi) SILINDI — kullanicisi kalmadi. */
/* Alanlar segmentin ALTINDA, tam genislik; baslik ustte (kisa), liste altta.
   ⚠️ Ust marj: segmentin kendi alt marji (--sp-2) tek basina dar kaliyordu
   (`.px-fl{margin:0}` global label marjini da sifirliyor). */
.px-alanlar { display:flex; flex-direction:column; gap:var(--sp-4);
  min-width:0; margin-top:var(--sp-3); }
.px-fl { margin:0; }
/* ⚠️ `.set-inp{max-width:420px}` TUZAGI (panelin belgeli sinifi): kutular
   kendi kolonunu DOLDURMALI — SMTP/SSL kartlarindaki ayni cozum. */
.px-alanlar .set-inp { max-width:none; }
/* ⚠️ IKI ALAN DA TAM GENISLIK (kullanici 2026-08-21: "Gercek IP basligi ve
   altindaki metin de proxy adresleri gibi tam ekran olsun"). Once baslik
   alani 520px'e daraltilmisti; kullanici simetriyi tercih etti — iki alan
   ayni genislikte, iki "Varsayilana don" linki de ayni sag kenarda hizali.
   ⚠️ Daraltma denenirse ETIKET SATIRINI DA KAPSAYAN LABEL'a uygulanmali:
   yalniz kutu daraltilinca `.px-fl-head` (space-between) tam genislikte kalir
   ve link etiketten ~950px uzaga duser (ekran goruntusu yakalamisti; "buton
   var" tipi olcut GOREMEZ). */
/* ⚠️ Punto IKI kutuya da BURADAN verilir (denetim bulgusu): tek kutuya sinif
   vermek `.set-fl textarea` (0,1,1) --t-sm'i yalnizca orada ezip ayni kartta
   iki farkli punto birakiyordu. `.set-inp` ikisinde de var -> (0,2,0) kazanir. */
.px-alanlar .set-inp { font-size:var(--t-md); }
/* ⚠️ SALT-OKUNUR ARTIK YALNIZ "PROXY YOK" MODUNDA (kullanici karari: CF
   varsayilanlari da DUZENLENEBILIR olmali). O modda okunacak baslik/adres
   yoktur — kutu bos ve kilitli kalir, operator "neden yazamiyorum" demesin. */
.px-alanlar .set-inp[readonly] { background:var(--surface-2);
  color:color-mix(in srgb, var(--fg-muted) 35%, var(--fg));
  cursor:default; }
/* ⚠️ ODAK GOSTERGESI SILINEMEZ (2026-08-25 denetimi): eski kural halkayi da
   kenarligi da sifirliyordu -> klavyeyle gezen operator bu iki durakta odagi
   TAMAMEN kaybediyordu (WCAG 2.4.7). "Duzenlenemez" gorunumu KORUNUR (zemin +
   soluk metin + imlec), yalnizca KLAVYE odaginda halka geri gelir; fare
   tiklamasi `:focus-visible` eslesmedigi icin sakin kalir. */
.px-alanlar .set-inp[readonly]:focus { outline:none;
  border-color:var(--border); box-shadow:none; }
.px-alanlar .set-inp[readonly]:focus-visible { border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring); }
/* "Varsayilana don" — CF listesini/basligini gomulu degere geri yazar.
   ⚠️ KURTARMA YOLU (cikmaz sokak onleme): operator 22 araligi bozarsa elle
   geri yazamaz; sunucu tarafi "varsayilana esitse DB'ye yazma" desenini
   uyguladigi icin reset, ayari "panel surumuyle guncellenen" haline dondurur. */
/* ⚠️ `.set-fl > span` (0,1,1) `display:block` dayatir; iki-sinifli seciciyle
   ezilir (`.set-bos-uyari` ile ayni belgeli desen — dosya sirasina guvenme). */
.px-fl > span.px-fl-head { display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--sp-3); }
.px-reset { border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:var(--t-sm); font-weight:600; color:var(--primary);
  text-decoration:underline; text-underline-offset:2px; }
.px-reset:hover { color:color-mix(in srgb, var(--primary) 78%, #000); }
.px-reset[hidden] { display:none; }
/* Kaydet notu — kucuk mavi bilgi bari (kullanici: "bu metin pek gorunmuyor,
   mavi bir bildirim barina koy ama cok buyuk olmasin"). Band DNA'si SSL
   ipucu bariyla ORTAK (`.ssl-durum.ssl-durum-info`); burada yalniz dozu
   kisilir — ikinci bir gorsel dil yazilmaz.
   ⚠️ `.ssl-durum` tabani KOLON akisli (durum bandi cok satirli); tek satirlik
   bir barda cip METNIN USTUNE duser — `.ssl-mod-hint-w` ile ayni sebepten
   YATAY'a cevrilir (ekran goruntusu yakaladi, computed "var" diyordu).
   ⚠️ SOL INSET RAY KALDIRILIR (kullanici: "en soldaki dis alandaki koyu mavi
   alana ihtiyac yok"). Zemin yikamasi (%4) + cerceve (%24) + cip tonu `--_sd`
   den gelmeye DEVAM eder -> mavi kimlik korunur, yalniz serit gider.
   ⚠️ SSL DURUM BANDI ve SSL IPUCU BARI rayi KORUR (kullanici onayli) -> taban
   `.ssl-durum` kuralina DOKUNULMAZ; ezme iki-sinifli (0,2,0) olmak ZORUNDA
   (ciplak `.not-bar` tabanla berabere kalir, yalniz dosya sirasiyla kazanir).
   ⚠️ Tabanda bugun TEK golge var (zincir yok) -> `none` yeterli; tabana
   ileride ikinci bir golge (hover/lift) eklenirse bu satir da yeniden yazilmali.
   ⚠️ MARJ YONU: not artik `.set-save`in ALTINDA (kullanici istegi). `.set-save`
   kendi ust hairline+marjini tasir ama `margin-bottom`u YOK -> ust bosluk
   BURADAN gelir; alt 0 (kart govdesinin kendi padding'i yeter). */
/* ⚠️⚠️ KUCUK BILGI BARI — TEK SINIF, TEK KURAL (kullanici 2026-08-22:
   "tasarimlar hep ayni mavi serit olsun"). Onceki tur secici LISTESI
   buyutuyordu (`.px-not-w, .du-dip`); dorduncu kullanimda liste 4 seciciye
   cikacakti ve her yeni bar 4 ayri kurala dokunmayi gerektirecekti.
   Artik gorunum YALNIZ `.not-bar` sinifindan gelir; `px-not-w`/`du-dip`/
   `sk-muaf` gibi adlar KONUM/CAPA sinifi olarak yaninda durur (olcut
   capalari onlara bagli — kaldirilirsa chk/pw paketleri kirilir).
   KULLANIM: <div class="ssl-durum ssl-durum-info not-bar">
               <span class="alr-ic">{{ icon('info') }}</span><p>...</p></div>
   ⚠️ Govde TEK <p> olmali (flex-gap cumlenin ICINE girer — belgeli ders) ve
   `> p` DOGRUDAN cocuk olmali; sarmalayici eklenirse punto/renk sessizce duser. */
.ssl-durum.not-bar {
  flex-direction:row; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); margin:var(--sp-4) 0 0;
  box-shadow:none; }
.ssl-durum.not-bar > p {
  margin:0; font-size:var(--t-md); color:var(--fg-muted); line-height:1.55; }
.ssl-durum.not-bar .alr-ic { width:24px; height:24px; flex:none; }
.ssl-durum.not-bar .alr-ic svg { width:14px; height:14px; }
/* ⚠️⚠️ FLEX/GRID KAPTA `gap` MARJA EKLENIR (kullanici bulgusu 2026-08-22:
   "saklama barinda Kaydet ile arasinda cok bosluk var, digerleri gibi degil").
   Olculdu: SSL/proxy govdesi `display:block` -> yalniz 12px marj; saklama
   govdesi `.lk-body` ise `flex column; gap:var(--sp-5)` -> 16px gap + 12px
   marj = 28px. Marj collapse OLMAZ (flex kapta collapse yoktur), yani iki
   deger TOPLANIR. Cozum: flex kapta marj sifirlanir, bosluk kabin KENDI
   ritmine (gap) birakilir — negatif marj gerekmez ve gap degisirse
   kendiliginde dogru kalir. */
.lk-body > .ssl-durum.not-bar { margin-top:0; }
/* ⚠️ `#s-proxy .aip-foot{margin-bottom}` SILINDI: not bari `.set-save`in
   ALTINA tasindi (kullanici istegi), yani serit artik dogrudan kaydet
   cubuguna komsu — duzen `#s-api` ile BIREBIR ayni, ek marj olu kural olurdu. */
/* ⚠️ Proxy kartinda artik KOLON YOK (segment ustte, alanlar altta) —
   820px kirilimi gereksizdi, SILINDI. Dar ekranda segment SSL ile AYNI
   640px kuralindan tek kolona duser. */
/* Ozel proxy listesi: monospace textarea (IP listesi dikey okunur). */
/* NOT: eski .ssl-ta kurali SILINDI — font-family/resize'i zaten
   `.set-fl textarea` veriyordu, font-size'i ise ozgullukte (0,1,0 < 0,1,1)
   ona KAYBEDIYORDU, yani fiilen olu koddu. Punto artik `.px-alanlar .set-inp`
   ile iki kutuya da AYNI verilir (asagida). */
/* Kaydet cubugu: not IKINCI satirda (SMTP kartinin kanitli recetesi — notsuz
   halde buton metne yapisik cikiyordu, ekran goruntusu yakaladi). */
/* ⚠️ INERT KALINTI (denetim M1-07/M2-2): bu cok-satir recetesi, kaydet notu
   `.set-save`in ICINDE dururken ikinci satira sarmasi icin yazilmisti. Not
   artik `.not-bar` barinda ve cubugun DISINDA, yani her iki cubuk da TEK
   cocuklu — kural bugun hicbir sey degistirmiyor. Ileride cubuga ikinci bir
   kontrol eklenirse (SMTP'deki gibi) ise yarar diye BIRAKILDI, davranis
   degisikligi yok. */
#s-ssl .set-save, #s-proxy .set-save { flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; }
/* (eski `#s-ssl/#s-proxy .set-save .set-test-note{flex:1 1 100%}` kurali
   SILINDI — iki kartta da kaydet notu artik `.not-bar` mavi barinda ve
   `.set-save`in DISINDA duruyor, yani ikinci satira sarma reçetesi
   gereksizlesti. `#s-smtp` ve `#mail-sablon` ayaklari AYRI kurallar,
   dokunulmadi: onlarda not hala `.set-save` icinde yasiyor.) */

/* Mail Kayıtları + Denetim Kaydı ortak: tablo ayrıntı sütunu tek satıra
   kısaltılır (audit.html'deki yerel kuraldan BURAYA taşındı — iki sayfa
   aynı kuralı kopyalamasın).
   ⚠️ `text-overflow:ellipsis` `white-space:nowrap` OLMADAN hiç tetiklenmez —
   eski yerel kuralda nowrap yoktu, yani kısaltma çalışmıyordu. */
.det, .mk-ozet { max-width:420px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.det .mono { font-size:var(--t-xs); }   /* 11.5px -> 11px (olcek) */

/* ============================ SUNUCU İÇE AKTARMA (/panel/vm-import) =========
   ESXi'de zaten çalışan sanal sunucuları panele devralma ekranı.
   Sayfa kendi bileşenini ÜRETMEZ: açılır kart `details.ax-card` (Sunucu
   Havuzları'ndaki "Kurulum Senaryosu" dili), tablo `.ax-table`, seçim kutuları
   `.opt-box.opt-primary`, uyarılar `.ax-alert`. Buradakiler yerleşimi tamamlar. */

/* --- YÜKLENİYOR GÖSTERGESİ (tek kaynak: liste + modal aynı bileşen) --------
   ⚠️ Düz "okunuyor…" yazısı yerine dönen halka + mavi şerit (kullanıcı isteği).
   Halka `border-top-color` ile çizilir — tek öge, ek DOM ve resim yok. */
.vmimp-spin { width:26px; height:26px; border-radius:50%; flex:none;
  border:3px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-top-color:var(--primary); animation:vmimpSpin .75s linear infinite; }
.vmimp-spin--xs { width:14px; height:14px; border-width:2px; }
@keyframes vmimpSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .vmimp-spin { animation-duration:2.4s; }
}
/* Mavi şerit: ekranda ORTALI, büyük punto (kullanıcı isteği) */
.vmimp-load { display:flex; align-items:center; justify-content:center;
  gap:var(--sp-5); padding:28px var(--sp-5); text-align:center;
  border-radius:var(--radius-sm); border:1px solid
    color-mix(in srgb, var(--info) 30%, transparent);
  background:var(--info-soft); }
.vmimp-load-t { font-family:var(--display); font-size:var(--t-xl);
  font-weight:600; color:var(--info); }
.vmimp-load--sm { padding:var(--sp-5); }
.vmimp-load--sm .vmimp-load-t { font-size:var(--t-lg); }

/* --- ESXi kartı: AÇILIR (varsayılan kapalı) ------------------------------- */
.vmimp-card + .vmimp-card { margin-top:var(--sp-5); }
/* ⚠️ ACILIR KART DILI TEK KAYNAK: "Sunucu İçe Aktar" ve "AutoVM'den Aktarma"
   ekranlari AYNI kalibi kullanir. Iki yerde ayri yazilsaydi biri guncellenirken
   digeri bayatlardi (panelin belgeli kurali) — nitekim `.avm-card` bu kurala
   baglanmadan once baslik ile alt metin BITISIK cikiyordu (gorsel denetim).*/
.vmimp-card > summary, .avm-card > summary { display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6); cursor:pointer; list-style:none; flex-wrap:wrap; }
.vmimp-card > summary::-webkit-details-marker,
.avm-card > summary::-webkit-details-marker { display:none; }
/* ⚠️ İKON HİZASI: global `svg.ic` blok çiziyor ve başlıkta yukarı kayıyordu
   (kullanıcı bulgusu). `inline-flex + align-items:center` metni ve ikonu ortak
   temel çizgide tutar — `.hp-scn-t` ile aynı reçete. */
.vmimp-t { display:inline-flex; align-items:center; gap:var(--sp-3); flex:none;
  font-family:var(--display); font-size:var(--t-2xl); font-weight:600; }
.vmimp-t > svg.ic { width:20px; height:20px; color:var(--primary); flex:none; }
.vmimp-card > summary:hover .vmimp-t,
.avm-card > summary:hover .vmimp-t { color:var(--primary); }
.vmimp-sub { font-size:var(--t-md); }
.vmimp-card[open] > summary .vmimp-sub,
.avm-card[open] > summary .vmimp-sub { display:none; }
.vmimp-busy { margin-left:auto; display:inline-flex; align-items:center; }
.vmimp-x { margin-left:auto; display:inline-flex; color:var(--fg-faint);
  transform:rotate(-90deg); transition:transform .15s; flex:none; }
.vmimp-busy + .vmimp-x { margin-left:0; }
.vmimp-x > svg.ic { width:17px; height:17px; }
.vmimp-card[open] > summary .vmimp-x,
.avm-card[open] > summary .vmimp-x { transform:rotate(90deg); }
.vmimp-body { padding-top:0; }

/* Havuz uyarısı: kart gövdesinin AKIŞINDA duran normal bir şerit.
   ⚠️ Eskiden `.warn-box` kartın iç dolgusuna oturmuyor, kenardan kesilmiş
   görünüyordu (kullanıcı bulgusu) — `.ax-alert` teması kartın kendi
   yüzey/yarıçap diliyle uyumlu. */
.vmimp-nopool, .vmimp-err, .vmimp-bos { margin:0 0 var(--sp-4); }
.vmimp-w { margin:var(--sp-4) 0; }

/* --- liste başlığı: sayı çipleri + Yenile ---------------------------------- */
.vmimp-head { display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.vmimp-stats { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.vmimp-stat { display:inline-flex; align-items:baseline; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface-2);
  font-size:var(--t-sm); color:var(--fg-muted); }
.vmimp-stat > b { font-family:var(--display); font-size:var(--t-lg);
  font-weight:700; color:var(--fg); }
.vmimp-stat--ok { border-color:color-mix(in srgb, var(--ok) 35%, transparent);
  background:var(--ok-soft); color:var(--ok); }
.vmimp-stat--ok > b { color:var(--ok); }
.vmimp-stat--mut { opacity:.85; }
/* Havuz yok: "Devralınabilir" çipinin yerini alan uyarı çipi (aynı satır dili) */
.vmimp-stat--bad { border-color:color-mix(in srgb, var(--warn) 38%, transparent);
  background:var(--warn-soft); color:var(--warn); font-weight:600; }
.vmimp-stat--bad > svg.ic { width:14px; height:14px; flex:none; }
/* Pasif "İçe Aktar"ın yanındaki sebep — kısa; tamamı `title`da */
.vmimp-why { font-size:var(--t-xs); color:var(--warn); font-weight:600;
  white-space:nowrap; cursor:help; }
/* Yenile butonunda dönen halka: HTMX istek yapan ögeye `htmx-request` ekler */
.vmimp-btn-spin { display:none; }
.htmx-request .vmimp-btn-spin { display:inline-block; }
.htmx-request .vmimp-btn-ic { display:none; }

/* --- tablo ---------------------------------------------------------------- */
/* ⚠️ Hücreler ÜSTTEN hizalı: çok satırlı kaynak/OS hücreleri yanındaki tek
   satırlık adı ortalayıp "kaymış" gösteriyordu (kullanıcı bulgusu).
   ⚠️⚠️ FLEX `td`ye DEĞİL İÇ SARMALAYICIYA verilir: `display:flex` bir hücreyi
   tablo yerleşiminden çıkarır — canlı ölçümde bütün sütunlar birbirinin altına
   kaydı. Bu yüzden her çok satırlı hücrede bir `div` var. */
/* ⚠️ Kullanıcı isteği: değerler satır içinde DİKEY ORTALI dursun. Hücre
   içindeki çok satırlı kutular da kendi içinde ortalanır (`justify-content`),
   yoksa tek satırlık komşusuyla aynı hizada durmazdı. */
.vmimp-table td { vertical-align:middle; }
.vmimp-name, .vmimp-res, .vmimp-os, .vmimp-ipcell { justify-content:center; }
.vmimp-name { display:flex; flex-direction:column; gap:var(--sp-1); }
.vmimp-name > strong { font-size:var(--t-md); line-height:1.35; }
.vmimp-name > .faint { font-size:var(--t-xs); }
/* (eski `.vmimp-pw` rozet kurali kaldirildi — artik kendi serit bileseni) */
.vmimp-res, .vmimp-os, .vmimp-ipcell { display:flex; flex-direction:column;
  gap:var(--sp-1); }
.vmimp-res { white-space:nowrap; font-size:var(--t-sm); }
.vmimp-dt { text-transform:uppercase; font-size:var(--t-xs); letter-spacing:.03em;
  color:var(--fg-muted); }
.vmimp-lim { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); color:var(--fg-muted); }
.vmimp-lim > svg.ic { width:12px; height:12px; flex:none; }
.vmimp-os { font-size:var(--t-sm); }
.vmimp-tools, .vmimp-noip-b { align-self:flex-start; }
.vmimp-tools > svg.ic, .vmimp-noip-b > svg.ic { width:12px; height:12px;
  margin-right:var(--sp-1); }
.vmimp-ipcell { align-items:flex-start; }
.vmimp-ipcell > .ax-badge { font-variant-numeric:tabular-nums; }
/* Kalan adresler: satır içinde açılır (mutlak konum YOK → kart yığın bağlamı
   tuzağına düşmez, bkz. `.ax-card:has(details.dd[open])` kuralı). */
.vmimp-ipx > summary { cursor:pointer; list-style:none; display:inline-flex;
  align-items:center; gap:var(--sp-2); padding:2px var(--sp-3);
  border:1px dashed var(--border-strong); border-radius:var(--radius-pill);
  font-size:var(--t-xs); color:var(--fg-muted); }
.vmimp-ipx > summary::-webkit-details-marker { display:none; }
.vmimp-ipx > summary:hover { color:var(--primary); border-color:var(--primary); }
.vmimp-ipx[open] > summary { border-style:solid; }
.vmimp-ipx-b { display:flex; flex-wrap:wrap; gap:var(--sp-1);
  margin-top:var(--sp-2); max-width:280px; }
.vmimp-r { text-align:right; }
/* Panelde zaten kayıtlı satır: solar ama OKUNUR kalır. */
.vmimp-off > td:not(:last-child) { opacity:.6; }
.vmimp-pager { margin-top:var(--sp-5); }
/* Baslik sagindaki eylemler (CSV + Yenile) — tek satirda, dar ekranda sarar. */
.vmimp-headacts { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; }
/* ⭐ Suzgec bari: Uyarilar sayfasinin `filter-bar` dili. Kart ICINDE zemin/
   cerceve/golge SIFIRLANIR — "kart icinde kart olmasin" (belgeli ders). */
.vmimp-fb { margin:0 0 var(--sp-4); padding:0; background:transparent;
  border:0; box-shadow:none; }
.vmimp-fb input[name="q"] { flex:1 1 260px; }
/* ⚠️ ax-select %100 genislik ister — barda icerik boyuna (belgeli tuzak). */
.vmimp-fb select { width:auto; }
/* Adres eslesme rozeti: adreslerin ALTINDA kendi satirinda (rozetlerin arasina
   girerse "kacinci adres" belirsizlesir). */
.vmimp-mt { margin-top:var(--sp-2); }
.vmimp-ipcell .vmimp-mt { flex-basis:100%; }
/* Havuzsuz uyarisinin icindeki baglama kisayolu: uyari metninin ALTINDA,
   uyarinin kendi ic ritmiyle. */
/* ⭐ HAVUZ BAGLAMA KISAYOLU EN SAGDA, UYARI METNI TEK SATIR (kullanici istegi
   2026-08-30: "turuncu şerit daha küçük görünsün"). Eskiden form KENDI SATIRINA
   dusuyordu (`flex-basis:100%`) ve serit iki kat yuksekti.
   ⚠️ Kurallar `#vmimp-nopool` yerine sinifla yazilir ama TEMA KATMANI
   `style.css`ten SONRA yukleniyor — `.ax-alert`in kendi hizalamasini ezmek icin
   iki sinifli secici (0,2,0) kullanilir. */
.vmimp-nopool.ax-alert { align-items:center; flex-wrap:nowrap; }
.vmimp-nopool > svg.ic { flex:none; }
/* Metin kalan alani alir; kisayol saga YASLANIR (`margin-left:auto`). */
.vmimp-nopool > span { flex:1 1 auto; min-width:0; }
.vmimp-poolfix { display:flex; align-items:center; gap:var(--sp-3);
  flex:none; margin-left:auto; }
.vmimp-poolfix select { width:auto; min-width:200px; }
.vmimp-nopool > .btn { flex:none; margin-left:auto; }
/* ⚠️ TEK SATIR YALNIZ GENIS EKRANDA: dar ekranda `nowrap` metni tasirir ve
   sayfa yatay kayardi (panelin belgeli kurali). Dar ekranda serit sarar. */
@media (min-width:1180px) {
  .vmimp-nopool > span { white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; }
}
@media (max-width:1179px) {
  .vmimp-nopool.ax-alert { flex-wrap:wrap; }
  .vmimp-poolfix { flex-basis:100%; margin-left:0; margin-top:var(--sp-3); }
}
/* --- Toplu ice aktarma ekrani (KART duzeni) ---
   ⚠️ TABLO YERINE KART (kullanici istegi 2026-08-29): her sunucunun kendi
   musterisi/etiketi/kotasi/sifresi var; tabloda bunlar satiri devasa yapiyordu.
   Kart ustte TEK SATIR ozet, altta alanlar seridi tasiyor. */
.vmimp-tp-head { display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin:var(--sp-4) 0 var(--sp-3); }
.vmimp-tp-selall { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-weight:600; cursor:pointer; white-space:nowrap; }
/* ⚠️ Uzun liste MODALI TASIRMAZ: kartlar kendi icinde kayar, alt eylemler
   (Kaydet) her zaman gorunur kalir. */
.vmimp-tp-wrap { max-height:52vh; overflow:auto; display:flex;
  flex-direction:column; gap:var(--sp-3); padding-right:var(--sp-2); }
.vmimp-tc { border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-2); padding:var(--sp-3) var(--sp-4); }
/* UST SERIT: secim · kimlik · kaynak · adresler · musteri — tek satir, ince */
.vmimp-tc-top { display:grid; align-items:center; gap:var(--sp-4);
  grid-template-columns:auto minmax(190px,1.1fr) minmax(180px,1fr)
                        minmax(200px,1.3fr) minmax(170px,1fr); }
.vmimp-tc-sel { display:inline-flex; align-items:center; }
.vmimp-tc-id { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; }
.vmimp-tc-id > strong { font-family:var(--display); font-size:var(--t-md); }
/* ⚠️ Guc rozeti ANA IP ile AYNI EKSENDE ve gerilmez (kullanici istegi). */
.vmimp-tc-id .vmimp-pw { flex:none; }
.vmimp-tc-res { display:flex; flex-direction:column; gap:2px;
  font-size:var(--t-sm); }
.vmimp-tc-res1 { color:var(--fg); }
.vmimp-tc-res2 { color:var(--fg-muted); font-size:var(--t-xs); }
.vmimp-tc-ips { display:flex; flex-direction:column; gap:var(--sp-2);
  align-items:flex-start; }
.vmimp-tc-iprow { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.vmimp-tc-own select { width:100%; }
/* ALT SERIT: kartin kendi alanlari — ekrana ESIT dagilmis (kullanici istegi) */
.vmimp-tc-fields { display:grid; grid-template-columns:repeat(5, 1fr);
  gap:var(--sp-3); margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px dashed var(--border); }
.vmimp-tc-fields > label { display:flex; flex-direction:column; gap:4px;
  min-width:0; }
.vmimp-tc-fields > label > span { font-size:var(--t-xs); color:var(--fg-muted); }
.vmimp-tc-fields input { width:100%; min-width:0; }
@media (max-width:1000px) {
  .vmimp-tc-top { grid-template-columns:auto 1fr; }
  .vmimp-tc-fields { grid-template-columns:repeat(2, 1fr); }
}
/* --- Ice aktarma gecmisi tablosu ---
   ⚠️ `vmimp-name` kolon flex'i oldugu icin rozetler sutunu bastan basa
   kapliyordu ("Silindi" bir serit gibi gorunuyordu — gorsel denetim bulgusu). */
.vmimph-table .vmimp-name { align-items:flex-start; }
.vmimph-ts { white-space:nowrap; font-variant-numeric:tabular-nums; }
.vmimph-ips { display:flex; flex-direction:column; gap:var(--sp-2);
  align-items:flex-start; }
/* En fazla 3 adres yan yana; fazlasi acilir blokta (kullanici istegi). */
.vmimph-iprow { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
/* Adres degistiyse GEREKCE yazili — rozet tek basina "neden" demiyordu. */
.vmimph-degisti { display:inline-flex; align-items:center; gap:4px;
  font-size:var(--t-xs); color:var(--warn); white-space:nowrap; }
.vmimph-degisti > svg.ic { flex:none; margin-top:1px; }
.vmimph-table .vc-mail { font-size:var(--t-xs); color:var(--fg-muted); }
/* ⚠️ Butonu EN SAGA iten kural KAPSAM DAR (`vmimp-hrow`): `ax-page-head__row`
   tum panelde kullaniliyor, global degistirmek her sayfanin basligini oynatirdi. */
.vmimp-hrow { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-5); flex-wrap:wrap; }
.vmimp-hrow > :last-child { flex:none; }
/* Kaynak sutunu DORT SATIRA kiriliyordu (gorsel denetim): tek satirda dursun. */
.vmimph-table .vmimp-tc-res1 { white-space:nowrap; }
.vmimph-table th:first-child, .vmimph-table td:first-child { white-space:nowrap; }
/* Adres sutunu tabloyu yutuyordu; kaynak ve kisi sutunlarina yer birakilir. */
.vmimph-ips { max-width:320px; }
/* Genis tablo KENDI kabinda kayar (panel kurali). */
.vmimph-scroll { overflow-x:auto; }
.vmimph-scroll > .ax-table { min-width:1240px; }

/* --- içe aktarma modalı ---------------------------------------------------- */
/* Geniş ekran (kullanıcı isteği): künye ızgarası + IP satırlarındaki üç ağ alanı
   dar modalda alt alta düşüyordu. */
/* ⚠️ SECICI OZGULLUGU: `.modal-overlay.form-modal .modal` (0,3,0) 560px
   dayatiyor — tek sinifli bir kural onu EZEMEZ (ilk yazimda genislik hic
   uygulanmadi, ekran olcumu yakaladi). Panelin kendi `.wide` ayagiyla ayni
   ozgullukte yazilir. */
.modal-overlay.form-modal .modal.vmimp-modal-box {
  max-width:1080px; width:min(1080px, calc(100vw - 48px)); }
.vmimp-form textarea { width:100%; font-family:var(--mono, monospace);
  font-size:var(--t-sm); }
.vmimp-lbl { display:block; margin-top:var(--sp-5); font-weight:600; }

.vmimp-id { padding:var(--sp-4); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2);
  margin-bottom:var(--sp-4); }
.vmimp-id-main { display:flex; gap:var(--sp-3); align-items:center;
  flex-wrap:wrap; margin-bottom:var(--sp-3); }
.vmimp-id-main strong { font-family:var(--display); font-size:var(--t-xl); }
.vmimp-id .nd-fgrid { display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }

.vmimp-inline { margin-top:0; flex:0 1 auto; }
.vmimp-inline .opt-inner { padding:var(--sp-2) var(--sp-3); }

/* İsteğe bağlı bölüm: AÇILIR olduğu açıkça belli (ikon + dönen ok + rozet) */
.vmimp-more { margin-top:var(--sp-5); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2); }
.vmimp-more > summary { display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); cursor:pointer; list-style:none; }
.vmimp-more > summary::-webkit-details-marker { display:none; }
.vmimp-more-t { display:inline-flex; align-items:center; gap:var(--sp-3);
  font-weight:600; font-size:var(--t-lg); }
.vmimp-more-t > svg.ic { width:17px; height:17px; color:var(--primary); flex:none; }
.vmimp-more > summary:hover .vmimp-more-t { color:var(--primary); }
.vmimp-more-x { margin-left:auto; display:inline-flex; color:var(--fg-faint);
  transform:rotate(-90deg); transition:transform .15s; flex:none; }
.vmimp-more-x > svg.ic { width:16px; height:16px; }
.vmimp-more[open] > summary .vmimp-more-x { transform:rotate(90deg); }
.vmimp-more-b { padding:0 var(--sp-5) var(--sp-5); }
.vmimp-2col { display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }

/* "En az bir adres seçin" uyarısı — Kaydet pasifken görünür */
/* ⚠️ Soluk yazi GORULMUYORDU (kullanici bulgusu) — INCE turuncu serit:
   dikkat ceker ama Kaydet satirinin onune gecmez. */
/* ⚠️ ID SECICI SART: tema katmani (`alias.css`, style.css'ten SONRA yuklenir)
   paragraf marjini sifirliyor ve tek sinifli kural EZILIYORDU — olculdu:
   `margin-top` hesaplanan deger 0px, bar ustteki bolume YAPISIK (kullanici
   bulgusu). `#vmimp-need` (0,1,0,0) tema kurallarini gecer. */
#vmimp-need.vmimp-need { margin:var(--sp-7, 28px) 0 0; }
.vmimp-need { display:flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-7, 28px) 0 0; padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm); border:1px solid
    color-mix(in srgb, var(--warn) 45%, transparent);
  background:var(--warn-soft); color:var(--warn);
  font-size:var(--t-sm); font-weight:600; }
.vmimp-need[hidden] { display:none; }
.vmimp-need > svg.ic { width:15px; height:15px; flex:none; }
.vmimp-actions { margin-top:var(--sp-4); }
.vmimp-save:disabled { opacity:.5; cursor:not-allowed; }

/* --- IP eşleme satırları (içe aktarma modalı) -----------------------------
   Her satır: [Ana IP] · sunucuda görünen adres → panelde atanacak adres · [−]
   ⚠️ Bu ekran havuza adres EKLEMEZ; select yalnızca panelde zaten kayıtlı ve bu
      ESXi'de kullanılabilir adresleri listeler. */
/* ⚠️ IZGARA (flex-wrap DEGIL): esnek sarma satirlari birbirine gore kaydiriyor
   ve "Ana IP · adres · liste · sil" sutunlari hizasiz gorunuyordu (kullanici
   bulgusu). Sabit sutunlar hepsini ayni eksende tutar; not/uyari satiri tam
   genislikte alta duser. */
/* ⚠️ HIZA IKI KATMANLI (kullanici bulgusu): (1) kucuk basliklar ("Sunucuda
   görünen" / "Panelde atanacak") AYNI SATIRDA baslamali, (2) adres · ok · liste
   AYNI EKSENDE durmali. Bunun icin sutunlar yukaridan gerilir (`stretch`) ve
   deger satiri her sutunda SABIT 38px yuksekliktedir — select'in boyu. */
.vmimp-iprow { display:grid; align-items:stretch; gap:var(--sp-2) var(--sp-3);
  grid-template-columns:auto minmax(0,170px) auto minmax(0,1fr) auto;
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2); }
.vmimp-iprow > .vmimp-auto, .vmimp-iprow > .vmimp-warn2 { grid-column:1 / -1; }
.vmimp-iprow + .vmimp-iprow { margin-top:var(--sp-2); }
/* Ana IP seçimi: satırın solunda küçük bir işaret — radyo düğmesi görünür kalır */
.vmimp-ana { position:relative; cursor:pointer; }

.vmimp-src > strong { font-variant-numeric:tabular-nums; }


.vmimp-dst > select { width:100%; }
.vmimp-auto, .vmimp-warn2 { display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-2); font-size:var(--t-xs); }
.vmimp-auto { color:var(--ok); font-weight:600; }
.vmimp-warn2 { color:var(--warn); }
.vmimp-auto > svg.ic, .vmimp-warn2 > svg.ic { width:12px; height:12px; flex:none; }
/* − kaldır: kare, satırın sonunda */
.vmimp-del { width:38px; height:38px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface);
  color:var(--fg-muted); cursor:pointer; }
.vmimp-del:hover:not(:disabled) { border-color:var(--danger); color:var(--danger); }
.vmimp-del:disabled { opacity:.35; cursor:not-allowed; }
.vmimp-src, .vmimp-dst { min-width:0; display:flex; flex-direction:column;
  justify-content:flex-start; }
.vmimp-cap { display:block; font-size:var(--t-xs); color:var(--fg-muted);
  margin-bottom:var(--sp-2); line-height:1.2; min-height:15px; }
/* Deger satiri = select boyu: adres, ok ve liste ayni eksende durur */
.vmimp-src > strong { display:flex; align-items:center; height:38px;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.vmimp-arrow { color:var(--fg-faint); display:flex; align-items:center;
  height:38px; align-self:flex-end; }
.vmimp-arrow > svg.ic { width:16px; height:16px; transform:rotate(180deg); }
.vmimp-ana, .vmimp-fam, .vmimp-del { align-self:flex-end; }
.vmimp-del > svg.ic { width:15px; height:15px; }
/* Ana IP: segment gorunumlu isaret (radyo gizli, kutu secili durumda dolar) */
.vmimp-ana input { position:absolute; opacity:0; width:1px; height:1px; }
/* Radyo gorunumu: sol tarafta gercek bir nokta + "Ana IP" etiketi. Secili
   durumda halka doldurulur — kullanici "buton" gorunumunu begenmemisti. */
.vmimp-ana-b { display:inline-flex; align-items:center; gap:var(--sp-2);
  height:38px; padding:0 var(--sp-4); border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface);
  font-size:var(--t-xs); font-weight:600; color:var(--fg-muted);
  white-space:nowrap; transition:border-color .14s, background .14s, color .14s; }
.vmimp-ana-dot { width:14px; height:14px; border-radius:50%; flex:none;
  border:2px solid var(--border-strong); background:var(--surface);
  transition:border-color .14s, box-shadow .14s; }
.vmimp-ana:hover .vmimp-ana-b { border-color:var(--primary); color:var(--fg); }
.vmimp-ana input:checked + .vmimp-ana-b { border-color:var(--primary);
  background:var(--primary-soft); color:var(--primary); }
.vmimp-ana input:checked + .vmimp-ana-b .vmimp-ana-dot {
  border-color:var(--primary); box-shadow:inset 0 0 0 3px var(--primary); }
.vmimp-ana input:focus-visible + .vmimp-ana-b { outline:2px solid var(--primary);
  outline-offset:2px; }
/* ⚠️ Baska satirda secili adres BU listede kilitli ve soluk gorunur */
.vmimp-dst select option:disabled { color:var(--fg-faint); }
.vmimp-ipadd { display:flex; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-3); flex-wrap:wrap; }

/* Bilgilendirme şeritleri (ana IP / paket uygulanmaz / kota) */
.vmimp-note { margin:var(--sp-4) 0 0; }
.vmimp-note em { font-style:normal; font-weight:600; }

/* İşletim sistemi: elle yaz / listeden seç */
.vmimp-osmode { display:flex; gap:var(--sp-2); flex-wrap:wrap;
  margin-bottom:var(--sp-3); }
#vmimp-os-elle > input, #vmimp-os-liste > select { width:100%; }

/* ⭐ SECIM KARTLARI (`pick-*`) — TEK KAYNAK.
   ⚠️ Bu kurallar `provision.html`in sayfa-ici `<style>`indeydi; Sunucu İçe Aktar
      modali da ayni karti kullandigi icin orada TAMAMEN STILSIZ cikiyordu
      (ekran goruntusu yakaladi). Panelin yazili kurali: kural kopyalanmaz,
      global'e tasinir. `os-*` ayaklari provision'a ozgu oldugu icin ORADA kaldi. */
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:var(--sp-4); }
.pick-card { position:relative; display:block; cursor:pointer; user-select:none; }
.pick-card input { position:absolute; opacity:0; width:1px; height:1px; }
.pick-card .pc-inner { display:block; padding:14px 15px; border:1.5px solid var(--border-strong);
  border-radius:12px; background:var(--surface); transition:border-color .14s, background .14s, box-shadow .14s; height:100%; }
.pick-card:hover .pc-inner { border-color:var(--primary); }
.pick-card input:checked + .pc-inner { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 3px var(--ring); }
.pick-card input:focus-visible + .pc-inner { outline:2px solid var(--primary); outline-offset:2px; }
.pick-card[hidden] { display:none; }  /* display:block [hidden]'i ezerdi — arama/filtre calissin */
.pc-top { display:flex; align-items:center; justify-content:space-between; }
.pc-name { font-weight:700; font-size:var(--t-lg); font-family:var(--display); }
.pc-top .ic, .os-check .ic { width:18px; height:18px; color:var(--primary); opacity:0; transition:opacity .14s; }
.pick-card input:checked + .pc-inner .pc-top .ic, .pick-card input:checked + .pc-inner .os-check .ic { opacity:1; }
.pc-specs { display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-3); font-size:var(--t-sm); color:var(--fg-muted); }
.pc-specs span { display:inline-flex; align-items:center; gap:var(--sp-2); }
.pc-specs .ic { width:14px; height:14px; color:var(--fg-faint); }

/* Paket kartları — kurulum formunun `pick-card` dili.
   ⚠️ Diski küçük paket SEÇİLEMEZ (VMDK yalnız büyür): kart soluk, imleç
      "yasak" ve sebep kartın içinde YAZILI (title'a saklanmaz). */
.vmimp-plans { margin-top:var(--sp-2); }
.pick-card--off { opacity:.55; cursor:not-allowed; }
.pick-card--off .pc-inner { border-style:dashed; }
.vmimp-plan-no { color:var(--danger); font-weight:600; }
.vmimp-plan-no > svg.ic { width:12px; height:12px; vertical-align:-2px;
  margin-right:var(--sp-1); }

/* --- KÜNYE ŞERİDİ (modal tepesi) ------------------------------------------
   Kutucuk ızgarası yerine tek bakışta okunan özellik şeridi: ikon + değer +
   küçük etiket. Ad ve güç durumu üstte, özellikler altta tek satırda akar. */
.vmimp-hero { border:1px solid var(--border); border-radius:var(--radius-md, 12px);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5); }
.vmimp-hero-top { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-4); }
.vmimp-hero-ad { font-family:var(--display); font-size:var(--t-2xl);
  font-weight:700; font-variant-numeric:tabular-nums; }
.vmimp-hero-node { display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-left:auto; font-size:var(--t-sm); color:var(--fg-muted); }
.vmimp-hero-node > svg.ic { width:14px; height:14px; }
/* ⚠️ DORT KART TAM GENISLIGE OTURUR (kullanici istegi): `auto-fit` sutun
   sayisini icerige gore degistirip kartlari kaydiriyordu. Sabit oran: uc esit
   kart + isletim sistemi icin GENIS son sutun (adi tek satirda ve buyuk yazar).
   Dar ekranda ikiye duser. */
.vmimp-hero-specs { display:grid; gap:var(--sp-3); align-items:stretch;
  grid-template-columns:1fr 1fr 1fr 1.6fr; }
@media (max-width:900px){ .vmimp-hero-specs { grid-template-columns:1fr 1fr; } }
.vmimp-spec { display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); min-width:0; }
.vmimp-spec > svg.ic { width:20px; height:20px; flex:none; color:var(--primary); }
.vmimp-spec-b { display:flex; flex-direction:column; gap:1px; min-width:0; }
.vmimp-spec-b > b { font-family:var(--display); font-size:var(--t-xl);
  font-weight:700; line-height:1.15; white-space:nowrap; }
/* Birim, sayidan kucuk ve soluk — ayni satirda okunur */
.vmimp-spec-b > b > em { font-style:normal; font-size:var(--t-sm);
  font-weight:600; color:var(--fg-muted); }
.vmimp-spec-b > span { font-size:var(--t-xs); color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Isletim sistemi karti: ad TEK SATIR ve buyuk (kullanici istegi) */
.vmimp-spec--os .vmimp-spec-b > b { font-size:var(--t-lg); }

/* Güç rozeti: ŞERİT — her durum kendi renginde, ikonlu (liste ve modal ortak) */
.vmimp-pw { display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:3px var(--sp-3); border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:700; border:1px solid transparent;
  white-space:nowrap; }
.vmimp-pw > svg.ic { width:12px; height:12px; flex:none; }
.vmimp-pw--on { color:var(--ok); background:var(--ok-soft);
  border-color:color-mix(in srgb, var(--ok) 38%, transparent); }
.vmimp-pw--off { color:var(--danger); background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 38%, transparent); }
.vmimp-pw--susp { color:var(--warn); background:var(--warn-soft);
  border-color:color-mix(in srgb, var(--warn) 42%, transparent); }

/* --- BÖLÜM BAŞLIĞI (ikonlu) ----------------------------------------------- */
.vmimp-sec { display:flex; align-items:center; gap:var(--sp-3);
  margin:var(--sp-6) 0 var(--sp-3); padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--border); flex-wrap:wrap; }
.vmimp-sec-ic { display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--radius-sm); flex:none;
  background:var(--primary-soft); color:var(--primary); }
.vmimp-sec-ic > svg.ic { width:15px; height:15px; }
.vmimp-sec-t { font-family:var(--display); font-size:var(--t-lg); font-weight:700; }
.vmimp-sec-d { font-size:var(--t-xs); color:var(--fg-muted); margin-left:auto; }

/* Alan etiketi: ikon + metin */
.vmimp-f-lbl { display:flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-2); font-size:var(--t-sm); font-weight:600; }
.vmimp-f-lbl > svg.ic { width:14px; height:14px; flex:none; color:var(--fg-faint); }

/* --- SEGMENTED SEÇİM (elle / paket · elle yaz / listeden seç) --------------
   ⚠️ `opt-box` ikilisi yerine tek gövdeli segment: iki seçenek eşit genişlikte,
      seçili olan dolu. */
.vmimp-seg { display:flex; gap:2px; padding:3px; margin-bottom:var(--sp-4);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); }
.vmimp-seg-o { flex:1 1 0; min-width:0; position:relative; cursor:pointer; }
.vmimp-seg-o input { position:absolute; opacity:0; width:1px; height:1px; }
.vmimp-seg-o > span { display:flex; align-items:center; justify-content:center;
  gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-xs);
  font-size:var(--t-sm); font-weight:600; color:var(--fg-muted);
  transition:background .14s, color .14s; white-space:nowrap; }
.vmimp-seg-o > span > svg.ic { width:15px; height:15px; flex:none; }
.vmimp-seg-o:hover > span { color:var(--fg); }
.vmimp-seg-o input:checked + span { background:var(--surface); color:var(--primary);
  box-shadow:0 1px 3px rgba(0,0,0,.08); }
.vmimp-seg-o input:focus-visible + span { outline:2px solid var(--primary);
  outline-offset:1px; }

.vmimp-3col { display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.vmimp-3col input, .vmimp-2col input, .vmimp-2col select { width:100%; }

/* ⚠️ Global `svg.ic` BLOK cizer: `<p class="faint">{{ icon('info') }} metin</p>`
   yaziyordu ve ikon KENDI SATIRINA dusuyordu (ekran olcumu yakaladi). Bu formun
   ipucu paragraflarinda ikon satir icinde kalir. */
.vmimp-more-b p.faint > svg.ic, .vmimp-form > p.faint > svg.ic {
  display:inline-block; width:13px; height:13px; vertical-align:-2px;
  margin-right:var(--sp-1); color:var(--fg-faint); }

/* Paket kartları daha KOMPAKT (kullanıcı: "aşırı büyük olmuş") */
/* ⚠️ SATIRDA UC PAKET (kullanici istegi): `auto-fill` kart sayisina gore
   sutun uretip satirlari kaydiriyordu. Sabit uc sutun hepsini hizali tutar;
   dar ekranda ikiye, cok darda tek sutuna duser. */
.vmimp-plans { grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); }
@media (max-width:860px){ .vmimp-plans { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .vmimp-plans { grid-template-columns:1fr; } }
.vmimp-plans .pc-inner { padding:var(--sp-3) var(--sp-4); }
.vmimp-plans .pc-specs { margin-top:var(--sp-2); gap:2px; }

/* Alt alta gelen alan satirlari arasinda nefes payi (kullanici: "üstteki alanla
   çok yakın") */
.vmimp-2col--gap { margin-top:var(--sp-5); }
/* Disk alt siniri ihlali: alan kirmizi + gerekce (Kaydet de pasiflesir) */
.vmimp-form input.is-bad { border-color:var(--danger);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.vmimp-disk-bad { display:flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-2) 0 0; color:var(--danger); font-size:var(--t-sm);
  font-weight:600; }
.vmimp-disk-bad[hidden] { display:none; }
.vmimp-disk-bad > svg.ic { width:14px; height:14px; flex:none; }
/* IPv6 satiri: ana IP secimi YOKTUR (kimlik bir IPv4'tur) — yerine aile rozeti.
   Genislik `vmimp-ana` ile ayni tutulur ki sutunlar kaymasin. */
.vmimp-fam { display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 var(--sp-4); border-radius:var(--radius-sm);
  border:1px dashed var(--border-strong); background:var(--surface);
  font-size:var(--t-xs); font-weight:700; color:var(--fg-muted);
  letter-spacing:.02em; }
.vmimp-iprow--v6 { background:color-mix(in srgb, var(--info) 5%, var(--surface-2)); }
.vmimp-ipadd { gap:var(--sp-2) var(--sp-3); }

/* ═══════════════ AUTOVM'DEN AKTARMA (/panel/autovm) ═══════════════════════
   ⚠️ OLCU DEGERLERI TOKEN'DAN: sabit px yazmak `tema_dogrula` denetiminde
      hakli olarak duser (belgeli kural, 2026-08-28 turu). */

/* Iki basligi tek kapta tutar: `ax-page-head__row` space-between oldugu icin
   ikinci OGE saga iter; butonlari kardes koymak "en sagda" istegini bozardi. */
.vmimp-hact { display:flex; align-items:center; gap:var(--sp-3); flex:none; }

.avm-card { margin-top:var(--sp-5); }
/* Adim numarasi: sirayi GORSEL olarak da soyler (once user, sonra IP, sonra VM) */
.avm-step { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:none; margin-right:var(--sp-2);
  border-radius:var(--radius-pill); background:var(--surface-3);
  color:var(--fg-muted); font-size:var(--t-xs); font-weight:700; }
details[open] > summary > .avm-step { background:var(--primary-soft);
  color:var(--primary); }

/* --- Baglanti formu ------------------------------------------------------ */
.avm-conn { display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4);
  align-items:flex-end; }
.avm-conn > label { display:flex; flex-direction:column; gap:var(--sp-1);
  min-width:150px; flex:1 1 150px; }
.avm-conn > label > span { font-size:var(--t-xs); font-weight:600;
  color:var(--fg-muted); }
.avm-conn-act { display:flex; align-items:center; gap:var(--sp-2);
  flex:1 1 100%; margin-top:var(--sp-1); }
.avm-test:not(:empty) { margin-top:var(--sp-4); }

/* ⚠️⚠️ `.hint` SINIFI KULLANILAMAZ: panelde o, 15x15'lik bir IPUCU ROZETI
   (`display:inline-grid; width:15px; height:15px` + acilir `.hint-card`).
   Aciklama paragrafina verilince metin 15px'lik kutudan TASIYOR ve tasan alan
   hit-test'i uzerine aliyordu: "Baglantiyi test et" butonu GERCEK FAREYLE
   tiklanamiyordu (gercek tarayici olcumuyle bulundu). */
.avm-hint { display:flex; align-items:flex-start; gap:var(--sp-2);
  margin-top:var(--sp-4); font-size:var(--t-xs); color:var(--fg-muted);
  line-height:1.5; }
.avm-hint > svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }
/* ⭐ INCE TURUNCU SERIT (kullanici istegi 2026-08-31: "turuncu serit icine al
   ama ince olsun cok kalin degil"). Panelin `vmimp-need` seridiyle AYNI recete;
   fark: bu metin cok satirli olabilir, o yuzden `align-items:flex-start` ve
   `line-height` korunur — dikey dolgu YINE tek adim (`--sp-2`). */
.ax-strip,
.avm-strip { display:flex; align-items:flex-start; gap:var(--sp-2);
  margin-top:var(--sp-4); padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm); border:1px solid
    color-mix(in srgb, var(--warn) 45%, transparent);
  background:var(--warn-soft); color:var(--warn);
  font-size:var(--t-xs); line-height:1.5; }
.ax-strip > svg.ic,
.avm-strip > svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }
/* ⚠️ Serit icindeki baglanti da AYNI TONDA okunmali; panelin genel link rengi
   turuncu zeminde kontrasti dusuruyordu. */
.ax-strip a,
.avm-strip a { color:inherit; text-decoration:underline; }
.avm-note { margin-top:var(--sp-3); font-size:var(--t-xs);
  color:var(--fg-muted); line-height:1.5; }
.avm-yok { color:var(--fg-faint); font-size:var(--t-xs); }
.avm-sep { color:var(--fg-faint); }
.avm-sm { font-size:var(--t-xs); }
/* Ana (birincil) IP — hostname'in altinda, okunur ve mono. */
.avm-anaip { font-size:var(--t-sm); font-weight:600; }
/* AutoVM'deki hesap/guc durumu — ELEME DEGIL, bilgi rozeti. Kullanici
   karari: askidaki/kapali sunucular da listelenir ve aktarilir. */
.avm-durum { display:flex; flex-wrap:wrap; gap:var(--sp-1);
  margin-top:var(--sp-1); }

/* --- Ozet sayaclari (KPI) ------------------------------------------------ */
/* ⚠️ ONCE SAYILAR: operatorun ilk sorusu "kac tane" — tabloya bakmadan
   cevaplanabilmeli. Cip yerine kutu: uc sayi ayni agirlikta okunuyor. */
.avm-kpi { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--sp-3); margin:var(--sp-4) 0 var(--sp-5); }
.avm-kpi__k { border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:2px; }
.avm-kpi__v { font-family:var(--display); font-size:var(--t-2xl);
  font-weight:700; line-height:1.1; }
.avm-kpi__t { font-size:var(--t-md); font-weight:600; color:var(--fg-faint); }
.avm-kpi__l { font-size:var(--t-xs); color:var(--fg-muted); }
.avm-kpi__k--ok { border-color:var(--ok); }
.avm-kpi__k--ok .avm-kpi__v { color:var(--ok); }
.avm-kpi__k--warn { border-color:var(--warn); }
.avm-kpi__k--warn .avm-kpi__v { color:var(--warn); }
.avm-kpi--sm { margin:0 0 var(--sp-4); }
.avm-kpi--sm .avm-kpi__k { padding:var(--sp-3); }
.avm-kpi--sm .avm-kpi__v { font-size:var(--t-xl); }

/* --- Kart izgarasi (uyum raporu + IP bloklari) --------------------------- */
.avm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:var(--sp-4); }
.avm-tile { position:relative; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface);
  padding:var(--sp-4) var(--sp-5) var(--sp-5); display:flex;
  flex-direction:column; gap:var(--sp-3); overflow:hidden; }
/* Sol kenardaki durum seridi: karti okumadan once "iyi mi kotu mu" soyler */
.avm-tile::before { content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--border-strong); }
.avm-tile--ok::before { background:var(--ok); }
.avm-tile--warn::before { background:var(--warn); }
.avm-tile--done { opacity:.72; }
.avm-tile__head { display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap; }
.avm-tile__id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.avm-tile__ip { font-size:var(--t-lg); font-weight:700; }
.avm-tile__ad { display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); color:var(--fg-muted); flex-wrap:wrap; margin:0; }
.avm-tile__ad > svg.ic { width:13px; height:13px; flex:none; }
.avm-tile__vm { display:flex; align-items:baseline; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-xs);
  background:var(--surface-2); }
.avm-tile__vm > strong { font-family:var(--display); font-size:var(--t-xl); }
.avm-tile__vm > span { font-size:var(--t-xs); color:var(--fg-muted); }
/* Etiket/deger listesi: etiketler solda sabit genislikte, degerler sarar */
.avm-tile__dl { display:grid; grid-template-columns:auto 1fr;
  gap:var(--sp-2) var(--sp-3); margin:0; align-items:start; }
.avm-tile__dl > dt { display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); color:var(--fg-muted); white-space:nowrap; }
.avm-tile__dl > dt > svg.ic { width:13px; height:13px; flex:none; }
.avm-tile__dl > dd { margin:0; display:flex; flex-wrap:wrap; gap:var(--sp-1);
  font-size:var(--t-sm); align-items:center; }
/* ⚠️ ENGEL KARTIN ICINDE VE SON SATIRDA: tabloda bu bilgi en sag sutunda
   kayboluyordu; operator "neyi duzeltecegim"i kartla birlikte gormeli. */
.avm-tile__engel { display:flex; align-items:flex-start; gap:var(--sp-2);
  margin:0; padding-top:var(--sp-3); border-top:1px solid var(--border);
  font-size:var(--t-xs); color:var(--warn); line-height:1.45; }
.avm-tile__engel > svg.ic { width:14px; height:14px; flex:none; margin-top:1px; }
.avm-tile__engel--ok { color:var(--ok); }

/* IP blogu karti */
.avm-tile--ip .avm-tile__head { align-items:flex-start; }
.avm-tile__pick { display:flex; align-items:center; gap:var(--sp-3);
  cursor:pointer; min-width:0; }
/* ⚠️ KUTUCUK ESNEMEZ: tema `input`lara `width:100%` veriyor ve flex satirinda
   onay kutusu satirin YARISI kadar genisleyip isareti ORTALIYORDU. */
.avm-tile__pick > input { flex:none; width:auto; min-width:0; }
.avm-tile__det { flex:none; }
.avm-tile__chips { display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.avm-tile__hedef { display:flex; flex-direction:column; gap:var(--sp-1);
  margin-top:auto; }
.avm-tile__hedef > span { display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); color:var(--fg-muted); }
.avm-tile__hedef > span > svg.ic { width:13px; height:13px; flex:none; }
/* Oran cubugu: panelde ZATEN kayitli olan pay */
.avm-bar { height:6px; border-radius:var(--radius-pill);
  background:var(--surface-3); overflow:hidden; }
.avm-bar__fill { height:100%; background:var(--ok); border-radius:inherit; }

/* --- Kapsam sekmeleri ---------------------------------------------------- */
/* ⚠️ SEKMELER KENDI ISTEGINI ATAR: onceki surumde gizli radyo dugmeleriydi ve
   istegi ancak "Ara" butonu atiyordu — tiklama hicbir sey yapmiyor gibi
   gorunuyordu (kullanici bulgusu: "tum kullanicilara tiklanmiyor"). */
.avm-tabs { display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-4); }
.avm-tab { display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); background:var(--surface);
  color:var(--fg-muted); font-size:var(--t-sm); font-weight:600;
  cursor:pointer; transition:border-color .15s, color .15s; }
.avm-tab:hover { border-color:var(--primary); color:var(--primary); }
.avm-tab.on { border-color:var(--primary); background:var(--primary-soft);
  color:var(--primary); }
.avm-tab__n { padding:0 var(--sp-2); border-radius:var(--radius-pill);
  background:var(--surface-3); color:var(--fg-muted);
  font-size:var(--t-xs); font-weight:700; }
.avm-tab.on .avm-tab__n { background:var(--primary); color:var(--surface); }

.avm-fb { flex-wrap:wrap; gap:var(--sp-2); }
.avm-fb--modal { margin-bottom:var(--sp-4); }
/* ⭐ TEK SATIR BAR (kullanici istegi): sekmeler EN SOLDA, arama EN SAGDA.
   ⚠️ Sagi `margin-left:auto` saglar — `justify-content:space-between` olsaydi
   "Ara" butonu da sekmelerden uzaga savrulurdu (aradaki bosluk ORTAYA dagilir);
   burada yalniz arama kutusundan ONCE bosluk istiyoruz. */
.avm-ubar { align-items:center; }
.avm-ubar > .avm-tabs { margin:0; flex:none; }
/* ⚠️⚠️ SECICI `.filter-bar input` ILE AYNI AGIRLIKTA OLMALI: o kural (0,2,1)
   `margin:0` ve `flex:0 1 auto` dayatiyor; tek sinifli `.avm-uq` (0,1,0) onu
   EZEMIYORDU ve arama kutusu saga YASLANMIYORDU (olculdu: sekmelerle arasinda
   12px kaliyor, oysa saga yaslansa 400px+ olmali). Ayni tuzak bu projede
   `#vmimp-need` ve `.pick-card` genisliginde de yasandi. */
.avm-ubar input.avm-uq { margin-left:auto; flex:0 1 340px; min-width:180px; }
@media (max-width:900px){
  /* Dar ekranda bar sarar; arama kutusu tam satiri alir ve sagda kalma
     kurali anlamsizlasir (yatay kaydirma URETMEZ — panelin belgeli kurali). */
  .avm-ubar input.avm-uq { margin-left:0; flex:1 1 100%; }
}

/* --- Listeler ------------------------------------------------------------ */
/* ⚠️ GENIS TABLO KENDI KABINDA KAYAR — sayfa govdesi yatay KAYMAZ (panel kurali) */
.avm-scroll { overflow-x:auto; }
.avm-scroll--modal { overflow:auto; max-height:52vh; }
.avm-table { width:100%; }
.avm-table td { vertical-align:middle; }
.avm-th-chk { width:34px; text-align:center; }
.avm-th-r { text-align:right; }
.avm-table td.avm-th-r { text-align:right; }
.avm-nm { display:flex; flex-direction:column; gap:2px; min-width:0; }
.avm-nm__t { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  font-weight:600; }
.avm-nm__s { font-size:var(--t-xs); color:var(--fg-muted); }
.avm-ip { font-weight:600; }
/* Aktarilamayan satir soluk — ama OKUNUR kalir (operator sebebini gormeli) */
.avm-off { opacity:.62; }
.avm-why { margin-top:var(--sp-1); font-size:var(--t-xs); color:var(--fg-muted);
  max-width:34ch; }
.avm-more > summary { cursor:pointer; font-size:var(--t-xs);
  color:var(--fg-muted); }

/* --- Sayfalama ----------------------------------------------------------- */
/* ⚠️ KOMPAKT: 2917 kullanicida 30 sayfa numarasi satiri tasiriyordu. */
.avm-pager { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:var(--sp-4); font-size:var(--t-sm); }
.avm-pager__i { margin-right:auto; color:var(--fg-muted);
  font-size:var(--t-xs); }
.avm-pager__x { color:var(--fg-faint); }
.avm-pager a, .avm-pager > span.on { display:inline-flex; align-items:center;
  justify-content:center; min-width:30px; height:30px; padding:0 var(--sp-2);
  border:1px solid var(--border); border-radius:var(--radius-xs);
  color:var(--fg-muted); }
.avm-pager a:hover { border-color:var(--primary); color:var(--primary); }
.avm-pager > span.on { border-color:var(--primary); background:var(--primary-soft);
  color:var(--primary); font-weight:700; }

/* --- Secim seridi + eylemler --------------------------------------------- */
.avm-selbar { display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2); }
.avm-selbar__n { font-size:var(--t-sm); color:var(--fg-muted); }
.avm-selbar__n > strong { font-family:var(--display); font-size:var(--t-lg);
  color:var(--fg); }
.avm-chk-all { display:flex; align-items:flex-start; gap:var(--sp-2);
  font-size:var(--t-sm); margin-left:auto; }
.avm-chk-all > input, .avm-post > label > input {
  flex:none; width:auto; min-width:0; margin-top:2px; }
.avm-actions { display:flex; flex-direction:column; gap:var(--sp-4);
  margin-top:var(--sp-5); }
.avm-actions > .btn { align-self:flex-start; }
.avm-row2 { display:flex; flex-wrap:wrap; gap:var(--sp-4); }

/* --- Posta secenegi ------------------------------------------------------ */
.avm-post { border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4);
  margin-top:var(--sp-4); }
.avm-post > legend { padding:0 var(--sp-2); font-size:var(--t-sm);
  font-weight:600; display:inline-flex; align-items:center; gap:var(--sp-2); }
.avm-post > legend > svg.ic { width:14px; height:14px; }
.avm-post > label { display:flex; align-items:flex-start; gap:var(--sp-2);
  font-size:var(--t-sm); line-height:1.45; }
/* Iki secenek yan yana ve TAM GENISLIK (dar `pick-grid` kolonu metni kirpardi) */
.avm-pick2 { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.avm-pick2 .pc-specs { line-height:1.5; }
/* ⚠️⚠️ `.pc-specs span` TEMADA `display:inline-flex` (ikon+metin ozellik satiri
   icin tasarlandi). Duz METIN o kaba konunca `<strong>` ve cevresindeki metin
   parcalari AYRI FLEX OGELERI oluyor ve cumle UC SUTUNA bolunuyordu (gorsel
   denetim 2026-08-31). Burada kutu bir ozellik listesi degil, akan bir cumle. */
.avm-pick2 .pc-specs span { display:block; text-align:left; }
/* ⚠️⚠️ HIZ ALANI: kutu buyuk ve satir KAYIKTI (kullanici bulgusu 2026-08-31).
   Iki ust kural daha agirdi ve bu ogeyi eziyordu:
     `.avm-post > label`        (0,1,1) -> `align-items:flex-start`  (satir kayik)
     `.avm-post > label > input`(0,1,2) -> `width:auto; margin-top:2px` (kutu buyuk)
   Bu yuzden duzeltme AYNI YAPIDA ve DAHA OZGUL yazilir; tek sinifli bir kural
   sessizce etkisiz kalirdi. */
.avm-hiz { display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-sm); }
.avm-post > label.avm-hiz { align-items:center; }
/* ⚠️ `input.ax-input` DE YAZILIR: tema kendi girdi yuksekligini (0,2,2)
   agirlikta veriyor ve yalniz `> input` yazan kural onu ezemiyordu (olculdu:
   74px genislik uygulandi ama yukseklik 38px kaldi). */
/* ⚠️⚠️ `min-height` DE YAZILMALI: tema girdilere `min-height:38px` veriyor ve
   yalniz `height:32px` yazmak SESSIZCE etkisiz kaliyordu (olculdu: height
   uygulandi, kutu yine 38px cizildi). Bu alan bir CUMLENIN ICINDE duran kucuk
   bir sayi kutusu ("Gönderim hızı [20] posta/dakika") — panelin 38px'lik genel
   girdi olcusu burada metne gore buyuk duruyordu (kullanici bulgusu). */
.avm-post > label.avm-hiz > input.ax-input { width:74px; flex:none;
  margin-top:0; height:32px; min-height:32px; padding:0 var(--sp-2);
  text-align:center; font-size:var(--t-sm); }

/* --- Parola sonuc sayfasi ------------------------------------------------ */
.avm-sub { margin-top:var(--sp-4); }
.avm-sub > summary { cursor:pointer; font-size:var(--t-sm); font-weight:600; }
.avm-ul { margin:var(--sp-2) 0 0; padding-left:var(--sp-5);
  font-size:var(--t-sm); display:flex; flex-direction:column; gap:2px; }
/* Gecici parola: okunakli ve secilebilir (operator not alacak) */
.avm-pw { font-weight:700; user-select:all; letter-spacing:.02em; }
.avm-lead { display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin:var(--sp-4) 0 var(--sp-3); }
.avm-chip-warn { color:var(--warn); border-color:var(--warn); }
.avm-chip-ok { color:var(--ok); border-color:var(--ok); }
.avm-act { display:flex; gap:var(--sp-2); align-items:center;
  flex-wrap:wrap; justify-content:flex-end; }

/* --- Adres detay modali --------------------------------------------------- */
/* ⚠️ Panelin `.form-modal .modal` kurali (0,3,0) 560px dayatiyor; tek sinifli
   bir kural onu EZEMEZ — genislik ayni ozgullukte yazilmali (vm-import
   ekraninda birebir ayni tuzak yasanmisti). */
.modal-overlay.form-modal .modal.avm-ipmodal-box { max-width:980px; width:96vw; }

/* ⚠️ Snapshot sekmesindeki disk-IO uyarisi ile ALTINDAKI seritler yapisikti
   (kullanici bulgusu 2026-09-07). `.ax-alert` alt bosluk tasimaz; burada
   tek adim nefes payi verilir — satir ici `style=` yerine SINIF. */
.ax-alert.snap-dio-w { margin-bottom:var(--sp-4); }

/* --- Ince MAVI serit (bilgi tonu) ---------------------------------------- */
/* ⚠️ `.ax-alert` KALIN bir kutu (kullanici: "çok kalın ve üstündeki blok seçme
   alanı ile yapışık"). Bilgi notlari da uyari seridiyle AYNI ince recete;
   yalniz palet degisir. Ust bileşenden nefes payi `margin-top` ile verilir. */
.avm-strip--info { border-color:color-mix(in srgb, var(--info, var(--primary)) 40%, transparent);
  background:color-mix(in srgb, var(--info, var(--primary)) 8%, var(--surface));
  color:var(--fg-muted); margin-top:var(--sp-5); }
.avm-strip--info > svg.ic { color:var(--info, var(--primary)); }
.avm-strip--info strong { color:var(--fg); }

/* --- Bes esit segment (tam genislik) ------------------------------------- */
/* ⚠️ AKAN BUTON DIZISI DEGIL IZGARA (kullanici: "tam ekran sağ sol eşit
   olacak şekilde olsunlar şu an yarım duruyorlar"): `flex` ile dizilen
   butonlar icerik genisligi kadar yer kapliyor ve kabin yarisinda bitiyordu. */
.avm-seg5 { display:grid; grid-template-columns:repeat(5, 1fr);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  overflow:hidden; margin-bottom:var(--sp-4); }
.avm-seg5__b { display:flex; align-items:center; justify-content:center;
  gap:var(--sp-2); min-height:36px; padding:0 var(--sp-2);
  border-right:1px solid var(--border); background:var(--surface);
  color:var(--fg-muted); font-size:var(--t-sm); font-weight:600;
  cursor:pointer; text-align:center; }
.avm-seg5__b:last-child { border-right:0; }
.avm-seg5__b:hover { color:var(--primary); }
.avm-seg5__b.on { background:var(--primary-soft); color:var(--primary); }
.avm-seg5__n { padding:0 var(--sp-2); border-radius:var(--radius-pill);
  background:var(--surface-3); color:var(--fg-muted); font-size:var(--t-xs); }
.avm-seg5__b.on .avm-seg5__n { background:var(--primary); color:var(--surface); }
@media (max-width:760px){
  /* Dar ekranda bes sutun okunamaz olur — ikiye duser, yatay kayma URETMEZ. */
  .avm-seg5 { grid-template-columns:repeat(2, 1fr); }
  .avm-seg5__b { border-bottom:1px solid var(--border); }
}

/* --- Sunucu suzgec bari: arama SOLDA ve genis, digerleri SAGDA ----------- */
/* ⚠️ Ozgulluk `.filter-bar input` (0,2,1) ile ayni agirlikta olmali; tek
   sinifli kural `margin`/`flex` degerlerini EZEMEZ (kullanici barinda birebir
   ayni tuzak yasandi). */
.avm-vbar { align-items:center; }
/* ⚠️⚠️ ARAMA KUTUSU BUYUMEZ (`flex-grow:0`): buyuseydi bos alani kendisi
   yutar ve sagdaki grubun `margin-left:auto`su ITECEK BOSLUK BULAMAZDI —
   olculdu: sag grup arama kutusunun 12px sagina yapisik kaliyordu. Kutu yine
   GENIS (420px), sadece esnemiyor. */
.avm-vbar input.avm-vq { flex:0 1 520px; min-width:200px; }
.avm-vbar select.avm-vsel { margin-left:auto; flex:0 0 auto; }
@media (max-width:900px){
  .avm-vbar select.avm-vsel { margin-left:0; }
}

/* --- Gonderim kuyrugu kartlari ------------------------------------------- */
.avm-tile--mail .avm-tile__ip { color:var(--primary); }
.avm-tile__act { display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--border); }
.avm-bar--lg { height:10px; margin-bottom:var(--sp-4); }
/* Basarisiz kalem varsa dolgu UYARI tonunda: "ilerledi ama sorunlu" hali
   yesil bir cubukla anlatilamaz. */
.avm-bar__fill--warn { background:var(--warn); }

/* --- Adres detayinda HAVUZ ADI ------------------------------------------- */
/* ⚠️ Kullanici bulgusu 2026-08-31: "boşta olan bir ip'nin altında ip havuzu
   adı yazıyor ama bu hiç görünür değil". Once `--fg-faint` 11px duz metindi;
   artik ETIKETLI, cerceveli ve okunur bir rozet. */
.avm-havuz { display:inline-flex; align-items:center; gap:var(--sp-1);
  margin-top:var(--sp-1); padding:1px var(--sp-2);
  border:1px solid var(--border); border-radius:var(--radius-xs);
  background:var(--surface-2); font-size:var(--t-xs); }
.avm-havuz > svg.ic { width:12px; height:12px; flex:none; color:var(--fg-muted); }
.avm-havuz__l { color:var(--fg-muted); }
.avm-havuz__v { color:var(--fg); font-weight:600; }

/* --- Sunucu listesi: kaynak hucresi --------------------------------------- */
/* Ana satir (vCPU/RAM/disk) + limitler ve haklar alt satirda. */
/* ⚠️ Hucre DAR kalirsa "2 vCPU · 4 GB RAM · 30 GB disk" uc satira sariyordu
   (yedi sutunlu tabloda gorsel denetim). Asgari genislik verilir; tablo zaten
   kendi kabinda yatay kayar. */
.avm-kay { display:flex; flex-direction:column; gap:var(--sp-1);
  min-width:210px; }
.avm-kay__ana { font-weight:600; }
.avm-kay__alt { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3);
  font-size:var(--t-xs); color:var(--fg-muted); }
.avm-kay__alt > span { display:inline-flex; align-items:center;
  gap:var(--sp-1); white-space:nowrap; }
.avm-kay__alt svg.ic { width:12px; height:12px; flex:none; color:var(--fg-faint); }

/* ------------------------------------------- KAYIT BUTUNLUGU (zincir) ----- */
.zin-kpi { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-4);
  margin-bottom:var(--sp-5); }
.zin-box { display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); }
.zin-box--wait { border-color:var(--warn); }
.zin-n { font-size:var(--t-2xl); font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; }
.zin-n--sm { font-size:var(--t-lg); }
.zin-l { font-size:var(--t-sm); color:var(--fg-muted); }
.zin-card { margin-bottom:var(--sp-5); }
/* ⚠️ TEK SUTUN GENISLIGI: capa seridi ve girdiler kartin TAM genisligini
   (1272px) kaplarken notlar dar kaliyordu ve kart dagınık goruniyordu.
   Alanlarin hepsi ayni sol/sag kenari paylasir; metin blogu kendi
   okunabilir olcusunde kalir (satir uzunlugu karakterle sinirli). */
.zin-form { padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.zin-sel { min-width:240px; }
/* ⚠️ Sinirlar KUCUK PUNTOYLA GECISTIRILMEZ: operator neyin korunmadigini da
   okumali (ekranin yazili amaci). */
/* ⚠️ NOTLAR BIR BASVURU BLOGUDUR, form akisinin parcasi degil: iki girdi
   alaninin ARASINDA duz metin yigini olarak duruyordu ve kart "alan · metin
   duvari · alan" gibi okunuyordu. Kendi zemini + madde isaretleri + maddeler
   arasi nefes payi ile ayrilir. */
.zin-notlar { margin:var(--sp-4) 0 var(--sp-5); padding:var(--sp-4) var(--sp-5);
  list-style:disc; font-size:var(--t-sm); color:var(--fg-muted);
  line-height:1.65; background:var(--surface-2);
  border-radius:var(--radius-xs); border:1px solid var(--border); }
.zin-notlar li { margin-left:var(--sp-4); }
.zin-notlar li + li { margin-top:var(--sp-3); }
.zin-notlar li::marker { color:var(--fg-faint); }
.zin-sonuc { margin-bottom:var(--sp-5); }
@media (max-width:900px) { .zin-kpi { grid-template-columns:repeat(2, 1fr); } }

/* Butunluk capasi */
/* ⚠️ Deger KENDI SATIRINDA, tam genislikte: tek satirda etiket + 78 karakterlik
   muhur + zaman yan yanayken zaman 1200px oteye itiliyor ve degerle iliskisi
   kopuyordu. */
.zin-capa { display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-4); margin-bottom:var(--sp-5);
  border:1px solid var(--border);
  border-radius:var(--radius-xs); background:var(--surface-2); }
.zin-capa__l { font-size:var(--t-sm); color:var(--fg-muted); font-weight:600; }
/* ⚠️ `user-select:all`: capanin TAMAMI tek tiklamayla secilir — yarim
   kopyalanan bir capa "gecersiz" gorunur ve operator kusuru ARAR. */
/* ⚠️ `flex:1 1 320px` KALDIRILDI: kap SUTUN duzenine gecince o taban
   YUKSEKLIGE uygulandi ve serit 90px yerine 395px oldu (olculdu). Sutun
   duzeninde genislik zaten tam; taban vermeye gerek yok. */
.zin-capa__v { font-family:var(--mono); font-size:var(--t-sm);
  user-select:all; overflow-wrap:anywhere; }
.zin-capa__t { font-size:var(--t-sm); color:var(--fg-muted); }
.zin-cd { margin-top:var(--sp-4); }
.zin-cdin { min-width:420px; font-family:var(--mono); font-size:var(--t-sm); }
@media (max-width:900px) { .zin-cdin { min-width:0; width:100%; } }

.zin-adrin { min-width:320px; font-size:var(--t-sm); }
@media (max-width:900px) { .zin-adrin { min-width:0; width:100%; } }


/* ---- Butunluk: ALAN deseni (etiket ustte, kontroller tek satirda) --------
   ⚠️⚠️ HIZA PIKSEL AYARIYLA DEGIL YAPIYLA: satirdaki her oge `stretch` ile
   AYNI yuksekligi alir. Eskiden etiket+girdi bir sutun-flex (59px) idi ve
   yanindaki ciplak dugmelerle (38px) `flex-end` hizalaniyordu; olculdu,
   ogelerin merkezleri 26px'e kadar ayrisiyordu. */
.zin-alan { margin-bottom:var(--sp-5); }
.zin-etiket { display:block; margin-bottom:var(--sp-2);
  font-size:var(--t-sm); font-weight:600; color:var(--fg-muted); }
.zin-kontrol { display:flex; align-items:stretch; gap:var(--sp-3);
  flex-wrap:wrap; }
.zin-kf { display:flex; align-items:stretch; gap:var(--sp-2); min-width:0; }
.zin-kf .ax-btn { white-space:nowrap; }
.zin-adr { flex:1 1 420px; }
.zin-adr .zin-adrin { flex:1 1 auto; min-width:0; }
.zin-cd { flex:1 1 100%; }
.zin-cd .zin-cdin { flex:1 1 auto; min-width:0; }
/* ⚠️ Bilgi satiri KONTROL DEGILDIR: kendi satirinda durur, dugmelerin arasinda
   degil (orada hem hizayi bozuyor hem tiklanabilir sanilıyordu). */
.zin-ipucu { display:flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-2) 0 0; font-size:var(--t-sm); color:var(--fg-muted); }
.zin-ipucu svg.ic { width:14px; height:14px; flex:none; }
/* ⚠️ SATIR UZUNLUGU: kart 1272px genisliginde ve duz metin o genislikte
   okunmuyor; olcu karakter cinsinden sinirlanir. */

/* ── Disk IOPS ornek tablosu ───────────────────────────────────────────────
   Operatore "bu limit pratikte ne demek" gosterir (kullanici istegi:
   "5000 yazdigimda bir yerde canli olarak ornek hizlar gorunsun").
   ⚠️ Panelin mevcut dilinden turetildi (`lim-box` kutusu + `faint` metin) —
      yeni gorsel dil ICAT EDILMEDI (proje kurali).
   ⚠️ `[hidden]` EZME TUZAGI: `display:grid` UA'nin `[hidden]{display:none}`
      kuralini ezer ve gizleme sessizce olurdu. */
.dio-ornek { margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-1); }
.dio-ornek[hidden] { display:none; }
.dio-ornek__t { display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-sm); font-weight:600; margin-bottom:var(--sp-2); }
.dio-ornek__t > svg.ic { width:14px; height:14px; flex:none; }
.dio-ornek__l { list-style:none; margin:0; padding:0; display:grid;
  gap:var(--sp-1); }
/* ⚠️ ILK KOLON 52px IDI: "32 KB ve üzeri" etiketi sigmiyordu (plato satiri
   eklenince ortaya cikti). Genislik en uzun etikete gore sabit — satirlar
   arasi hizayi korumak icin `auto` DEGIL sabit deger. */
.dio-ornek__l > li { display:grid; grid-template-columns:112px 1fr auto;
  align-items:baseline; gap:var(--sp-2); font-size:var(--t-sm); }
.dio-k { font-variant-numeric:tabular-nums; color:var(--fg-muted); }
.dio-a { color:var(--fg-muted); }
/* Deger sagda ve hizali dursun — okuyan goz sayilari alt alta karsilastirir. */
.dio-v { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.dio-ornek__n { margin-top:var(--sp-2); line-height:1.45; }
/* Snapshot uyarisi, IOPS ornek tablosunun hemen altinda durur. ⚠️ Satir ici
   `style=` YASAK (panel kurali) — bosluk buradan verilir. */
.dio-uyari { margin-top:var(--sp-3); }
/* ⭐ PLATO SATIRLARI: 32 KB ve uzeri bloklarda hiz SABITLENIR (vSphere IO'yu
   32 KB birimlere normalize eder — canli diskspd olcumuyle dogrulandi).
   Operatorun "pratik tavan burasi" demesi icin bu satirlar isaretlenir.
   ⚠️ Yeni gorsel dil ICAT EDILMEDI: panelin `--primary-soft` zemini +
      `--primary` metni kullanildi (iki temada da tanimli tokenlar). */
.dio-ornek__l > li.dio-tavan { background:var(--primary-soft);
  border-radius:var(--radius-sm, 4px); padding:1px var(--sp-2);
  margin:0 calc(-1 * var(--sp-2)); }
.dio-ornek__l > li.dio-tavan .dio-v { color:var(--primary); }

/* ── FIREWALL (VM detay “Ağ ve Firewall” + ESXi ayarları) ───────────────── */
/* ⚠️ Yeni bir gorsel dil ICAT EDILMEDI: kutu/kenarlik/bosluk degerleri panelin
   mevcut kart ve secim listelerinden alindi (`vds-giris__k`, `.form-row`). */

/* Kapali kural: satir SILIK ama OKUNUR kalir — musteri neden etkisiz oldugunu
   gormeli, kaybolmus sanmamali. */
.fw-pasif > td { opacity:.5; }
.fw-tbl td.mono, .fw-tbl th { white-space:nowrap; }

/* Profil secim listesi. */
/* ⚠️ Kullanici (2026-09-10): "profil kartlari cok buyuk, pencere cok yer
   kaplamasin". Uc kolon, kucuk kart; kural listesi YALNIZ secili kartta. */
/* ⚠️ `align-items:start` SART: grid satirindaki kartlar secili kartin boyuna
   UZUYORDU (tarayici olcumu: 246px) — kucultme amacini bosa cikariyordu. */
.fw-prof { display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  align-items:start; }
@media (max-width:900px) { .fw-prof { grid-template-columns:1fr; } }
.fw-prof-i { padding:9px 11px !important; position:relative; }
.fw-prof-i input[type="radio"] { position:absolute; opacity:0; width:1px;
  height:1px; margin:0; pointer-events:none; }
.fw-prof-i:has(input:checked) { border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary) inset; }
.fw-prof-i:focus-within { outline:2px solid var(--ring); outline-offset:2px; }
.fw-prof-i strong { display:flex; align-items:center; gap:6px; font-size:12.5px; }
.fw-prof-n { font-style:normal; font-size:10.5px; font-weight:600; padding:1px 6px;
  border-radius:999px; background:var(--primary-soft); color:var(--primary);
  white-space:nowrap; }
.fw-prof-i small.faint { font-size:11.5px; line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Kural listesi yalniz SECILI kartta acilir — digerlerinde kart kisa kalir. */
.fw-prof-i .fw-prof-k { display:none; }
.fw-prof-i:has(input:checked) .fw-prof-k { display:flex; }
/* Kural ozetleri TEK SATIR (tasan uc nokta): iki satira kirilinca secili
   kart 300px'e uzuyor ve komsu satirlari asagi itiyordu (ekran goruntusu).
   Tam metin `title`da — makro degil, ozet zaten `kural_ozeti`nden. */
.fw-prof-k .mono { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; align-self:stretch; }
.fw-prof-i, .fw-mod-i { display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  cursor:pointer; background:var(--surface); }
.fw-prof-i:hover, .fw-mod-i:hover { border-color:var(--primary); }

/* ⭐ ESXi FIREWALL MOD KARTLARI — eski radyo listesi begenilmedi.
   Recete panelin KENDI `.vds-giris` karar kartlarindan; yeni gorsel dil
   ICAT EDILMEDI. Radyo GIZLENIR, kartin kendisi tiklanir. */
.fw-modlar { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.fw-mod { position:relative; display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--border); border-radius:12px; padding:12px 14px 34px;
  cursor:pointer; background:var(--surface); transition:border-color .12s,
  box-shadow .12s; }
.fw-mod:hover { border-color:var(--primary); }
/* ⚠️ Radyo GORSEL OLARAK gizlenir ama KLAVYE/EKRAN OKUYUCU icin DOM'da kalir —
   `display:none` erisilebilirligi kirardi. */
.fw-mod > input { position:absolute; opacity:0; width:1px; height:1px;
  margin:0; padding:0; pointer-events:none; }
/* ⚠️ Secili hali SUNUCUDAN sinif basarak degil `:has()` ile: tiklayinca
   ANINDA guncellenir, yoksa kart ancak sayfa yenilenince degisirdi ve
   operator "sectim ama secilmedi" gorurdu. `checked` sunucudan gelir,
   yani ilk cizim de dogrudur. */
.fw-mod:has(input:checked) { border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary) inset; }
.fw-mod:has(input:checked) .fw-mod__e { opacity:.8; }
.fw-mod:focus-within { outline:2px solid var(--ring); outline-offset:2px; }
.fw-mod__b { display:flex; align-items:center; gap:7px; font-weight:650;
  font-size:14px; }
.fw-mod__b svg.ic { width:16px; height:16px; flex:none; }
.fw-mod__a { font-size:12.5px; line-height:1.5; opacity:.75; }
/* Kimin icin oldugu — kartin dibinde kucuk rozet. */
.fw-mod__e { position:absolute; left:14px; bottom:10px; font-size:11px;
  letter-spacing:.02em; text-transform:uppercase; opacity:.55; }
@media (max-width:900px) { .fw-modlar { grid-template-columns:1fr; }
  .fw-mod { padding-bottom:30px; } }

/* ⭐ HAK GOSTERGESI — sayi + serit, kart basliginda. */
.fw-hak-g { margin-left:auto; display:flex; align-items:center; gap:8px; }
/* ⚠️ IKI SAYAC AYNI: VM kartinda ve ESXi listesinde ayni punto/agirlik
   (kullanici: "aynı font eşit olsunlar her iki alanda da"). */
.fw-hak-g__n, .fw-durum__n { font-size:13px; font-weight:600;
  white-space:nowrap; }
.fw-hak-g__n .faint, .fw-durum__n .faint { font-weight:400; }
.fw-hak-g .ax-progress { flex:none; width:72px; }

/* ⭐ BILGI SATIRI — eski 5 satirlik gri duvarin yerine tek cumle + katlanan
   ayrinti. ⚠️ Cumlenin OZU gorunur kalir: olculmus bir riski katlamak
   (stateless -> yanlis kural interneti keser) kabul edilemez. */
/* ═══ "NASIL ÇALIŞIR?" REHBERİ ═══════════════════════════════════════════
   Kullanıcı (2026-09-10): summary "buton gibi durmuyordu" (yalnız mavi metin
   + ▸). Artık tam genişlik bir KONTROL gibi çizilir: kenarlık + zemin + sağda
   dönen ok; açılınca içerik aynı çerçeveye bağlanır (tek kutu). İçerik düz
   metin duvarı değil, panelin kart diliyle kurulur. */
/* VM listesi — trafik kotasi ASILMISSA kullanilan miktar kirmizi (kullanici:
   "admin karta bakinca neden turuncu anlamayabilir, sayi kirmizi olsun"). */
.vc-quota__asim { color:var(--danger); font-weight:700; }

/* `.fw-bilgi` KALDIRILDI (2026-09-10): bilgi kutusunun yerini rehber aldı. */
.fw-nasil { margin:0 0 14px; }
.fw-nasil > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:11px; padding:10px 14px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-2);
  transition:border-color .12s, background .12s; }
.fw-nasil > summary::-webkit-details-marker { display:none; }
.fw-nasil > summary:hover { border-color:var(--primary); }
.fw-nasil > summary:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
.fw-nasil > summary > svg.ic { width:18px; height:18px; flex:none;
  color:var(--primary); }
.fw-nasil__st { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.fw-nasil__st b { font-size:13.5px; font-weight:650; }
.fw-nasil__st small { font-size:12px; color:var(--fg-muted); line-height:1.4; }
.fw-nasil__ch { width:9px; height:9px; flex:none; margin-right:4px;
  border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg); transition:transform .15s; }
.fw-nasil[open] > summary { border-color:var(--primary);
  border-bottom-left-radius:0; border-bottom-right-radius:0; }
.fw-nasil[open] .fw-nasil__ch { transform:rotate(-135deg); margin-top:4px; }
.fw-nasil__i { border:1px solid var(--primary); border-top:0;
  border-radius:0 0 10px 10px; padding:6px 16px 16px; background:var(--surface); }
.fw-nasil__h { margin:16px 0 8px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted);
  display:flex; align-items:center; gap:10px; }
.fw-nasil__h::after { content:""; flex:1; height:1px; background:var(--border); }
/* Üç ilke — numaralı kartlar */
.fw-ilke { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fw-ilke__k { display:flex; gap:10px; align-items:flex-start; padding:11px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.fw-ilke__k > b { flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--primary-soft); color:var(--primary); }
.fw-ilke__k > div, .fw-fark__k > div { display:flex; flex-direction:column; gap:3px; }
.fw-ilke__k strong, .fw-fark__k strong { font-size:13px; font-weight:650; }
.fw-ilke__k span, .fw-fark__k span { font-size:12.5px; line-height:1.55;
  color:var(--fg-muted); }
/* Okunuş */
.fw-nasil__anat { padding:12px 14px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-2); }
.fw-nasil__anat p { margin:9px 0 0; font-size:13px; line-height:1.6; }
/* Örnek kartları — TEK KOLON, içi "kurallar | açıklama".
   ⚠️ İki kolonlu kart denendi ve ekran görüntüsünde çürüdü: yarım genişlikte
   kural akış satırı sığmıyor, eylem rozeti alt satıra düşüyordu. Akış satırı
   canlı önizlemeyle aynı makrodan geldiği için küçültülmedi; kart genişledi. */
.fw-orn { display:grid; grid-template-columns:1fr; gap:10px; }
/* ⚠️ Kural sutunu ICERIGINDEN DAR OLAMAZ (minmax(max-content, …)): 1280px'de
   en uzun ornegin rozeti kirpiliyordu. Aciklama sutunu gerekirse daralir. */
.fw-orn__k { display:grid; grid-template-columns:minmax(max-content,2fr) minmax(0,1fr);
  grid-template-areas:"b b" "r c" "r t"; gap:8px 14px; padding:12px 13px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  align-items:start; }
.fw-orn__b { grid-area:b; }
/* ⚠️ GORULDU (2. ornek, 1280px): en uzun satir sutuna sigmayinca ogeler
   BUZUSUP UST USTE BINIYORDU. Ogeler artik buzusmez (max-content); sigmazsa
   kutu KAYDIRIR — ust uste binmek hicbir zaman kabul edilebilir degil. */
.fw-orn__r { grid-area:r; overflow-x:auto; }
.fw-orn__r .fw-onz__k { min-width:max-content; }
.fw-orn__c { grid-area:c; }
.fw-orn__t { grid-area:t; }
/* Kart içinde akış satırı biraz sıkı — ama TEK SATIR kalmalı. */
.fw-orn__r .fw-onz__akis { flex-wrap:nowrap; white-space:nowrap; }
.fw-orn__r .fw-onz__k b { font-size:12.5px; }
.fw-orn__r .fw-onz__k small { font-size:10px; }
.fw-orn__b { display:flex; align-items:center; gap:8px; font-size:13.5px;
  font-weight:650; }
.fw-orn__n { flex:none; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:11.5px; font-weight:700;
  background:var(--primary-soft); color:var(--primary); }
.fw-orn__r { display:flex; flex-direction:column; gap:6px; padding:8px 10px;
  border-radius:8px; background:var(--surface-2); }
.fw-orn__r .fw-onz__akis { gap:8px; }
.fw-orn__c { margin:0; font-size:12.5px; line-height:1.55; color:var(--fg-muted); }
.fw-orn__t { margin:0; display:flex; gap:6px; align-items:flex-start;
  font-size:12px; line-height:1.5; color:var(--fg-muted); }
.fw-orn__t > svg.ic { width:14px; height:14px; flex:none; margin-top:2px;
  color:var(--primary); }
/* Yöne göre alanlar — iki kart */
.fw-yon2 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.fw-yon2__k { padding:11px 13px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-2); }
.fw-yon2__b { display:flex; align-items:center; gap:8px; font-size:13px;
  font-weight:650; margin-bottom:6px; }
.fw-yon2__k dl { margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:4px 12px; font-size:12.5px; line-height:1.5; }
.fw-yon2__k dt { font-weight:600; white-space:nowrap; }
.fw-yon2__k dd { margin:0; color:var(--fg-muted); }
/* Üç fark — uyarı tonlu kartlar */
.fw-fark { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fw-fark__k { display:flex; gap:9px; align-items:flex-start; padding:11px 12px;
  border:1px solid var(--border); border-left:3px solid var(--warn);
  border-radius:10px; background:var(--surface); }
.fw-fark__k > svg.ic { width:16px; height:16px; flex:none; margin-top:2px;
  color:var(--warn); }
@media (max-width:900px) {
  .fw-ilke, .fw-yon2, .fw-fark { grid-template-columns:1fr; }
  .fw-orn__k { grid-template-columns:1fr; grid-template-areas:"b" "r" "c" "t"; }
  .fw-orn__r { overflow-x:auto; } }

/* Kural tablosu: yon oku + eylem sutunlari daralmasin, aksiyonlar sagda. */
.fw-tbl-wrap { overflow-x:auto; border:1px solid var(--border);
  border-radius:11px; }
.fw-tbl { margin:0; }
.fw-tbl td.mono, .fw-tbl th { white-space:nowrap; }
/* ⭐ SIRA SUTUNU: numara + tasima oklari yan yana. Oklar 18px — satir
   yuksekligini buyutmemeli (tablo tarama hizini dusururdu). */
.fw-tbl__s { white-space:nowrap; }
.fw-sira { display:inline-flex; flex-direction:column; gap:1px;
  margin-left:6px; vertical-align:middle; }
.fw-sira form { display:block; line-height:0; }
.fw-sira__b { width:18px; height:11px; padding:0; border:1px solid var(--border);
  background:var(--surface-2); color:var(--fg-muted); border-radius:3px;
  font-size:8px; line-height:9px; cursor:pointer; }
.fw-sira__b:hover:not(:disabled) { border-color:var(--primary);
  color:var(--primary); }
.fw-sira__b:disabled { opacity:.32; cursor:default; }

.fw-tbl__a { text-align:right; white-space:nowrap; }
.fw-tbl__a form { display:inline; }
.fw-yon-c { white-space:nowrap; }
.fw-yon-e { display:inline; font-weight:700; margin-right:4px; }
.fw-yon-e--gelen { color:var(--ax-accent); }
.fw-yon-e--giden { color:var(--ok); }

/* Bos durumun kucuk hali (kart icinde, tek basina degil). */
.fw-bos--kucuk { padding:22px 16px 20px; }
.fw-bos--kucuk svg.ic { width:40px; height:40px; padding:10px; margin-bottom:10px; }
.fw-bos--kucuk > div:nth-of-type(1) { font-size:14px; }

/* ⭐ ARAC CUBUGU — uc akordeon alt alta dizilmek yerine tek satirda dugme
   gibi durur; biri acilinca TAM GENISLIGE yayilir. */
.fw-arac { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fw-arac > details { flex:0 0 auto; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); }
.fw-arac > details[open] { flex:1 1 100%; background:var(--bg); }
.fw-arac > details > summary { cursor:pointer; font-weight:600; font-size:13.5px;
  display:flex; gap:7px; align-items:center; padding:9px 14px; list-style:none;
  white-space:nowrap; }
.fw-arac > details > summary::-webkit-details-marker { display:none; }
.fw-arac > details > summary svg.ic { width:16px; height:16px; flex:none; }
.fw-arac > details:hover { border-color:var(--primary); }
.fw-arac > details[open] > summary { border-bottom:1px solid var(--border); }
.fw-add__i { padding:14px; }

/* ⭐ FIREWALL SERITLERI — `.ax-strip` uzerine yalniz OLCU ayari.
   ⚠️ Bilesenin renkleri/kenarligi DEGISTIRILMEZ; punto ve dolgu bir tik
   buyutulur cunku varsayilan olcu bu kartta okunmuyordu (kullanici bulgusu).
   ⚠️ Panel GENELINDEKI `.ax-strip` degistirilMEZ — 100'den fazla yerde
   kullaniliyor ve orada begenilen olcu ZATEN bu (belgeli "ince serit" karari). */
/* ═══ CANLI KURAL ONIZLEMESI ═══════════════════════════════════════════
   Kullanici istegi: "kural ekle butonunun hemen ustune tam ekran yazilan
   kurali canli gosteren bir serit". Tam genislikte, form izgarasinin
   DISINDA — icindeyken kolonun 1/3'une sikisirdi. */
.fw-onz-l { margin:16px 0 6px; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--fg-muted); }
.fw-onz { width:100%; min-height:78px; }
.fw-onz__b { border:1px solid var(--border); border-left-width:3px;
  border-radius:8px; background:var(--surface-2); padding:12px 14px; }
.fw-onz__b--engel { border-left-color:var(--danger); }
.fw-onz__b--izin  { border-left-color:var(--ok); }
.fw-onz__b--limit { border-left-color:var(--warn); }
.fw-onz__b--hata  { border-left-color:var(--warn); display:flex; gap:9px;
  align-items:center; font-size:13px; color:var(--fg-muted); }
.fw-onz__b--hata > svg.ic { width:17px; height:17px; flex:none;
  color:var(--warn); }
.fw-onz__akis { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fw-onz__et { font-size:11px; font-weight:700; letter-spacing:.05em;
  color:var(--fg-muted); }
.fw-onz__k { display:flex; flex-direction:column; gap:1px; min-width:0; }
.fw-onz__k small { font-size:10.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--fg-muted); }
.fw-onz__k b { font-size:13px; font-weight:600; }
.fw-onz__ok { color:var(--fg-muted); font-size:15px; }
.fw-onz__c { margin:10px 0 0; font-size:13px; line-height:1.6; }
.fw-onz__u { margin:8px 0 0; display:flex; gap:7px; align-items:flex-start;
  font-size:12.5px; line-height:1.55; color:var(--warn); }
.fw-onz__u > svg.ic { width:15px; height:15px; flex:none; margin-top:2px; }

/* Hazir profil: aciklama + hangi kurallarin ekleneceginin onizlemesi. */
.fw-prof-h { margin:0 0 12px; font-size:13px; line-height:1.65;
  color:var(--fg-muted); }
.fw-prof-k { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.fw-prof-k .mono { font-size:11px; color:var(--fg-muted);
  background:var(--surface-2); padding:2px 7px; border-radius:5px;
  align-self:flex-start; }

.fw-serit { padding:11px 14px; font-size:13.5px; line-height:1.6;
  margin-bottom:12px; }
.fw-serit > svg.ic { width:18px; height:18px; flex:none; }

/* ⭐ YONETICI UYARISI — kalin kutu (`ax-alert`) uzerine yalniz OLCU ayari.
   ⚠️ Bilesenin kendi renkleri/kenarligi DEGISTIRILMEZ; burada sadece metin
   boyu buyutulur cunku kart tek basina bu kutudan ibaret ve varsayilan
   `--ax-text-sm` okunmuyordu (kullanici bulgusu). */
.fw-yon { padding:15px 18px; align-items:center; }
/* Anahtar dugmesi metnin sagina, ayni kutuda (kullanici 2026-09-11) */
.fw-yon .ax-alert__content { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fw-yon .fw-yon__m { flex:1 1 320px; }
.fw-yon .ax-alert__actions { margin:0 0 0 auto; }
.fw-yon .ax-alert__actions form { display:inline; }
/* ⚠️ TEK SATIR: baslik+mesaj ikilisi iki satir uretiyordu (kullanici istegi).
   Kutu kalin kalir ama icinde tek cumle var; punto varsayilandan buyuk. */
.fw-yon__m { margin:0; font-size:14px; line-height:1.6; color:var(--fg); }
.fw-yon > svg.ic { width:22px; height:22px; flex:none; }

/* ⭐ MUSTERI BOS DURUMU — recete panelin KENDI `.snap-empty`sinden
   (Snapshot sekmesi): accent yikamali buyuk ikon + baslik + okunur aciklama.
   ⚠️ Onceki hali `.ax-strip` idi; o bileşen bir kartin ICINDEKI yan uyari
   icindir. Burada kartin TEK icerigi oldugu icin kucuk ve okunmaz duruyordu. */
.fw-bos { text-align:center; padding:32px 18px 26px; color:var(--fg-muted); }
.fw-bos svg.ic { display:block; margin:0 auto 14px; width:52px; height:52px;
  padding:13px; box-sizing:border-box; border-radius:14px;
  background:rgba(var(--ax-accent-rgb), .1); color:var(--ax-accent); }
.fw-bos > div:nth-of-type(1) { font-size:15px; font-weight:650; color:var(--fg);
  margin-bottom:8px; }
/* ⚠️ TAM GENISLIK (kullanici istegi): `max-width` metni kartin ortasinda
   dar bir sutuna sikistiriyordu ve "yarim" duruyordu. */
.fw-bos .faint { font-size:13px; line-height:1.65; margin:0; }
/* Ne yapmasi gerektigi — aciklamadan AYRI ve daha belirgin dursun.
   Serit de kart genisligini doldurur. */
.fw-bos__a { margin:16px 0 0; font-size:13px;
  padding:11px 16px; border-radius:10px; background:var(--primary-soft);
  color:var(--fg); border:1px solid color-mix(in srgb,var(--primary) 24%,transparent); }

/* ⭐ KURAL HAKKI SATIRI — etiket · dar kutu · ipucu · sagda kaydet.
   ⚠️ Kendi basina bir blok DEGIL: kullanici uc ayri tasarimda da "tek bir
   kutucuk ekranda cok yer kapliyor" dedi. Tek satir, ~40px. */
.fw-satir { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.fw-satir > label { font-weight:600; margin:0; white-space:nowrap; }
.fw-satir > input { width:92px; max-width:92px; text-align:right; margin:0; }
.fw-satir__h { font-size:12.5px; line-height:1.5; min-width:0; flex:1 1 240px; }
/* Dugme sagda; dar ekranda alt satira gecer ve tam genislik almaz. */
.fw-satir__b { margin-left:auto; flex:none; }
@media (max-width:700px) { .fw-satir__h { flex-basis:100%; order:9; }
  .fw-satir__b { margin-left:0; } }

/* ⭐ SUNUCULARIN DURUMU — tablo yerine KULLANIM SERITLI liste.
   Serit panelin KENDI `.ax-progress` bileseni (ESXi kartindaki CPU/RAM
   seritleriyle ayni); yeni bir gorsel dil icat edilmedi. */
.fw-durum { margin-top:18px; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; background:var(--surface); }
.fw-durum__h { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg); }
.fw-durum__t { display:flex; align-items:center; gap:7px; font-weight:650; }
.fw-durum__t svg.ic { width:16px; height:16px; flex:none; }
.fw-durum__o { margin-left:auto; font-size:12.5px; }
.fw-durum__b { margin:0; padding:10px 14px; font-size:12.5px; }
.fw-durum__l { list-style:none; margin:0; padding:0; }
.fw-durum__i { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 14px; border-bottom:1px solid var(--border); }
.fw-durum__i:last-child { border-bottom:0; }
.fw-durum__ad { font-weight:600; min-width:132px; }
/* Serit kalan bosluğu alir; sayilar sagda sabit genislikte durur ki
   satirlar arasinda HIZALI okunsun. */
.fw-durum__s { flex:1 1 120px; min-width:90px; }
.fw-durum__n { min-width:74px; text-align:right; }
@media (max-width:760px) { .fw-durum__s { flex-basis:100%; order:9; }
  .fw-durum__n { order:8; } }
/* ⚠️⚠️ RADIO'YU ACIKCA DARALT: ESXi Ayarlar formunun kendi `input { width:100% }`
   kurali radio dugmesini de geriyor (olculdu: genislik 1036px) ve etiket
   metnini kutunun DISINA itiyordu. `flex:none` bunu DURDURMAZ — o yalniz
   buyume/kuculmeyi kapatir, ACIKCA verilmis bir genisligi ezmez. */
.fw-prof-i input[type="radio"], .fw-mod-i input[type="radio"] {
  width:16px; min-width:16px; height:16px; flex:none; margin:3px 0 0;
  padding:0; box-sizing:border-box; }
.fw-prof-i span, .fw-mod-i span { display:flex; flex-direction:column; gap:2px; }
.fw-prof-i small, .fw-mod-i small { font-size:12px; line-height:1.45; }

/* ===== MAC kilidi (ESXi › Ayarlar) — `_mac_kilidi.html` =====
   Yeni görsel dil YOK (kullanıcı 2026-09-11: "temaya uygun yap"): kutu =
   firewall durum kutusunun reçetesi (`.fw-durum`), hücre = panelin segment
   kontrolü (`.seg-opt`), rehber = `.fw-nasil`/`.fw-ilke` AYNI sınıf,
   yükleniyor = `.ax-skeleton`. Yalnız bu bölüme özgü olan `.mk-*`. */
.mk-mesaj { margin:0 0 12px; }
.mk-kutu { border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--surface); }
.mk-kutu__h { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg); }
.mk-kutu__t { display:flex; align-items:center; gap:7px; font-weight:650; }
.mk-kutu__t svg.ic { width:16px; height:16px; flex:none; color:var(--primary); }
.mk-kutu__o { font-size:12.5px; color:var(--fg-muted); }
.mk-kutu__b { margin:0; padding:10px 14px; font-size:12.5px; line-height:1.55;
  color:var(--fg-muted); border-bottom:1px solid var(--border); }
.mk-sw { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 14px 6px; }
.mk-sw__t { display:flex; align-items:center; gap:7px; font-weight:650; font-size:13px; }
.mk-sw__t svg.ic { width:15px; height:15px; flex:none; color:var(--fg-muted); }
.mk-sw__n { font-size:12px; color:var(--fg-muted); }
/* Satırlar: gerçek tablo yerine ızgara — hücre segmentleri hizalı kalır,
   dar ekranda satır bloğa dönüşür. */
.mk-grid { display:grid; grid-template-columns:minmax(150px,1.3fr) repeat(3, minmax(150px,1fr)); }
.mk-grid__h, .mk-grid__r { display:contents; }
.mk-grid__h > span { display:flex; align-items:center; padding:6px 14px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg-muted); border-bottom:1px solid var(--border); }
.mk-grid__r > * { display:flex; align-items:center; padding:9px 14px;
  border-bottom:1px solid var(--border); }
.mk-grid__r:last-child > * { border-bottom:0; }
.mk-grid__r > .mk-pg { flex-direction:column; align-items:flex-start; gap:1px; }
.mk-pg strong { font-size:13px; font-weight:600; }
.mk-pg small { font-size:11.5px; color:var(--fg-muted); }
/* Segment: `.seg-opt` reçetesi — seçili dolu (Reject yeşil / Accept kırmızı),
   diğeri eylem (hx-post + onay). */
.mk-seg { display:inline-grid; grid-template-columns:1fr 1fr; gap:2px; padding:2px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); min-width:150px; }
.mk-seg__o { font:inherit; font-size:12px; font-weight:600; line-height:1.3;
  padding:4px 10px; border-radius:var(--radius-xs); border:0; background:transparent;
  color:var(--fg-muted); cursor:pointer; text-align:center;
  transition:background .14s, color .14s; }
.mk-seg__o:hover { color:var(--ax-accent);
  background:color-mix(in srgb, var(--ax-accent) 8%, transparent); }
.mk-seg__o.danger:hover { color:var(--danger);
  background:color-mix(in srgb, var(--danger) 10%, transparent); }
.mk-seg__o:focus-visible { outline:2px solid var(--ring); outline-offset:1px; }
.mk-seg__o.htmx-request { opacity:.5; pointer-events:none; }
.mk-seg__o.is-on { cursor:default; }
.mk-seg__o.is-on.is-reject { color:var(--ax-success-500); background:var(--ax-success-50); }
.mk-seg__o.is-on.is-accept { color:var(--ax-danger-500); background:var(--ax-danger-50); }
.mk-nasil { margin-top:12px; }
.mk-risk { font-style:normal; font-weight:650; color:var(--danger); }
.mk-reject { font-style:normal; font-weight:650; color:var(--ax-success-500); }
.mk-gerekli em { font-style:normal; font-weight:650; }
/* Nested rehberi: `.fw-fark__k` kartları (sol şerit rengi zorunlu/önerilir) + adımlar */
.mk-nested__g { margin:0 0 10px; font-size:13px; line-height:1.6; color:var(--fg-muted); }
.mk-nk3 { margin-bottom:10px; }
.mk-nk.mk-nk--z { border-left-color:var(--danger); }
.mk-nk.mk-nk--z > svg.ic { color:var(--danger); }
.mk-nk.mk-nk--o { border-left-color:var(--primary); }
.mk-nk.mk-nk--o > svg.ic { color:var(--primary); }
.mk-nk__b { align-self:flex-start; margin:1px 0 3px; }
.mk-adim__t { display:flex; align-items:center; gap:7px; font-weight:650; font-size:13px; }
.mk-adim__t svg.ic { width:16px; height:16px; color:var(--ax-success-500); }
.mk-adim__l { margin:8px 0 0; padding-left:22px; }
.mk-adim__l li { margin:5px 0; font-size:13px; line-height:1.55; }
.mk-adim__l li::marker { font-weight:700; color:var(--primary); }
.mk-adim__n { margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--fg-muted); }
/* Yükleniyor: kutunun iskeleti (başlık şeridi + 3 satır) — içerik gelince yerini alır. */
.mk-sk { border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--surface); }
.mk-sk__h { display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--border); background:var(--bg); }
.mk-sk__r { display:grid; grid-template-columns:minmax(150px,1.3fr) repeat(3, minmax(150px,1fr));
  gap:14px; align-items:center; padding:13px 14px; border-bottom:1px solid var(--border); }
.mk-sk__r:last-child { border-bottom:0; }
.mk-sk .ax-skeleton--line { height:.9em; }
.mk-sk__n { display:flex; align-items:center; gap:6px; margin-left:auto;
  font-size:12px; color:var(--fg-muted); }
.mk-sk__n svg.ic { width:14px; height:14px; animation:spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mk-sk__n svg.ic { animation:none; } }
@media (max-width:820px) {
  .mk-grid { grid-template-columns:1fr; }
  .mk-grid__h { display:none; }
  .mk-grid__r > * { border-bottom:0; padding:4px 14px; }
  .mk-cell { flex-direction:column; align-items:stretch; gap:3px; }
  .mk-cell::before { content:attr(data-l); font-size:11px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted); }
  .mk-grid__r > .mk-pg { padding-top:10px; }
  .mk-grid__r > :last-child { border-bottom:1px solid var(--border); padding-bottom:10px; }
  .mk-seg { width:100%; }
  .mk-sk__r { grid-template-columns:1fr; }
}

/* ===== NIOC · yönetim trafiği koruması (ESXi ayarları) — `_nioc.html` =====
   ⚠️ YENİ GÖRSEL DİL YOK: durum kutusu/rehber MAC kilidinin reçetesi (`.mk-kutu`,
   `.fw-nasil`), seçim kartları IP kilidi ile AYNI (`.fw-modlar` / `.fw-mod`),
   tablo panelin `ax-table`'ı. Buradaki kurallar YALNIZ kapsayıcı ve hizalama.
   ⚠️ Segment (`.mk-seg`) reçetesi bir süre kullanıldı ve KALDIRILDI (kullanıcı
   2026-09-15 beğenmedi); onunla gelen `is-iyi`/`is-notr` kuralları da silindi —
   ölü CSS bırakılmadı. */
.nioc-form { margin:0 14px 12px; }
/* `.fw-modlar` sabit 3 kolon (üç modlu bölümler için); burada iki kart var. */
.nioc-modlar { grid-template-columns:repeat(2, 1fr); }
.nioc-form .fw-satir { margin-top:10px; }
.nioc-strip { margin:10px 14px 12px; }
.nioc-liste { margin-top:12px; }
/* ⚠️ `overflow-x:auto` ŞART: 4 kolonluk tablo dar ekranda sayfa gövdesini
   kaydırmamalı (panelin genel kuralı, `.sk-dokum` ile aynı). */
.nioc-wrap { overflow-x:auto; }
.nioc-tbl { width:100%; }
.nioc-tbl tr.is-yonetilen > td { background:color-mix(in srgb, var(--primary) 5%, transparent); }
.nioc-tbl td .ax-badge { margin-left:6px; }
@media (max-width:820px) { .nioc-modlar { grid-template-columns:1fr; } }

/* ===== Bağlantılar (Trafik sekmesi · NetFlow) — `_vm_conn.html` =====
   ⚠️ YENİ GÖRSEL DİL YOK: tablo panelin `ax-table`'ı, rozetler `ax-badge`,
   aralık seçici trafik grafiğiyle AYNI segment grubu (`.traf-ranges`), açılır
   bölüm firewall'un `.fw-nasil` bileşeni. Buradaki kurallar yalnız kapsayıcı,
   hizalama ve "pay" çubuğu. */
.vd-netconn__n { font-size:12px; margin-left:auto; text-align:right; max-width:52%; }
.vc-ranges { display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-bottom:12px; }
/* ⚠️ SEGMENT GRUBU DAR EKRANDA SAYFAYI KAYDIRIYORDU (ölçüldü: 420px'te
   grup 452px, sayfa gövdesi 69px kayıyordu). Grup kendi içinde kayar —
   panelin sekme çubuğunda (`.vd-tabs .ax-tabs__list`) kullanılan AYNI
   reçete; segment düğmeleri sarılmaz (kenarlıkları bozulur). */
.vc-ranges .ax-btn-group { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.vc-ranges .ax-btn-group::-webkit-scrollbar { display:none; }
.vc-ranges .ax-btn { flex:none; }
.vc-yon { margin-left:auto; }
/* Kapsam: secilen araligin tam sinirlari (aralik secicisinin yaninda). */
.vc-kapsam { display:inline-flex; align-items:center; gap:5px; font-size:12px;
  white-space:nowrap; }
.vc-kapsam svg.ic { width:13px; height:13px; flex:none; }
/* ── GECMIS GUN SECICI (arsiv) — ⚠️ AYRI SATIR: aralik/yon secicisinin yanina
   konsaydi 420px'te ucu birden tasardi (o cubuk zaten kendi icinde kayiyor).
   Kendi satirinda, etiketiyle birlikte durur ve tarihler kendi icinde kayar. */
.vc-arsiv { display:flex; gap:10px; align-items:center; margin:0 0 12px;
  min-width:0; }
.vc-arsiv__b { display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:var(--t-sm); font-weight:600; color:var(--fg-muted); }
.vc-arsiv__b svg.ic { width:15px; height:15px; }
.vc-arsiv__l { display:flex; gap:6px; align-items:center; min-width:0;
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.vc-arsiv__l::-webkit-scrollbar { display:none; }
.vc-arsiv__l > * { flex:none; }
/* TAKVIM (kullanici 2026-09-17): arsivi olan gun yesil + tiklanabilir; kayip
   kirmizi; sirada sari; kaldirildi/silindi cizgili gri; gun yok soluk. */
.vc-takvim { margin:0 0 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); }
.vc-takvim__s { display:flex; align-items:center; gap:8px; padding:8px 12px;
  cursor:pointer; list-style:none; font-size:var(--t-sm); color:var(--fg-muted); }
.vc-takvim__s::-webkit-details-marker { display:none; }
.vc-takvim__s b { color:var(--fg); }
.vc-takvim__s svg.ic { width:15px; height:15px; }
.vc-takvim__s .fw-nasil__ch { margin-left:auto; }
.vc-takvim__k { padding:4px 12px 10px; border-top:1px solid var(--border); }
.vc-takvim__h { display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 0 8px; font-size:13px; max-width:276px; }
.vc-takvim__h .ax-btn { min-width:32px; }
.vc-takvim__g { display:grid; grid-template-columns:repeat(7, 36px); gap:4px;
  justify-content:start; }
.vc-takvim__gk { font-size:11px; font-weight:600; color:var(--fg-faint);
  text-align:center; text-transform:uppercase; letter-spacing:.04em; }
.vc-gun { display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:32px; border-radius:7px; font-size:12.5px; font-weight:600;
  border:1px solid transparent; font-family:var(--sans); background:transparent; }
.vc-gun--bos { visibility:hidden; }
.vc-gun--yok, .vc-gun--gelecek { color:var(--fg-faint); font-weight:500; }
.vc-gun--var { color:color-mix(in srgb, var(--ok) 72%, var(--fg));
  background:color-mix(in srgb, var(--ok) 14%, transparent);
  border-color:color-mix(in srgb, var(--ok) 45%, transparent); cursor:pointer; }
.vc-gun--var:hover { background:color-mix(in srgb, var(--ok) 26%, transparent); }
.vc-gun--var.is-secili { background:var(--ok); color:#fff; border-color:var(--ok); }
.vc-gun--kayip { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent);
  background:color-mix(in srgb, var(--danger) 8%, transparent); }
.vc-gun--bekliyor { color:color-mix(in srgb, var(--warn) 80%, var(--fg));
  background:color-mix(in srgb, var(--warn) 14%, transparent); }
.vc-gun--kesildi, .vc-gun--silindi { color:var(--fg-faint); text-decoration:line-through;
  background:var(--surface-2); }
.vc-takvim__l { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:11.5px; }
.vc-takvim__l span { display:inline-flex; align-items:center; gap:5px; }
.vc-gun--ornek { width:12px; height:12px; border-radius:3px; }
.vc-gun--yok.vc-gun--ornek { border-color:var(--border); }
@media (max-width:420px) { .vc-takvim__g { grid-template-columns:repeat(7, 1fr); }
  .vc-gun { width:auto; } }
/* Indirme baglantisi seridin icinde — kendi blogunu acmasin. */
.vc-arsiv__ind { display:inline-flex; align-items:center; gap:5px;
  margin-left:8px; white-space:nowrap; }
.vc-arsiv__ind svg.ic { width:14px; height:14px; }
@media (max-width:620px) {
  .vc-arsiv { flex-direction:column; align-items:flex-start; gap:6px; }
  .vc-arsiv__l { max-width:100%; }
}
.vc-strip { margin:0 0 12px; font-size:13px; line-height:1.5; padding:var(--sp-3) var(--sp-4); }
.vc-strip > svg.ic { width:16px; height:16px; margin-top:1px; }
.vc-strip--uyari { --_t:var(--warn); }
.vc-tarama { margin:0 0 12px; }
.vc-bos { padding:20px; text-align:center; line-height:1.6; }
.vc-hd { font-weight:650; font-size:13px; margin:14px 0 8px; }
.vc-hd .faint { font-weight:400; }
/* ⚠️ `overflow-x:auto` ŞART: 6 kolonluk tablo dar ekranda SAYFA GÖVDESİNİ
   kaydırmamalı (panelin genel kuralı). */
.vc-wrap { overflow-x:auto; }
.vc-tbl { width:100%; }
.vc-r { text-align:right; }
/* Tavan aşımı satırı: "diğer adresler" — veri kaybolmadı, karşı taraf bilinmiyor. */
.vc-tbl tr.vc-tasma > td { background:color-mix(in srgb, var(--fg-muted) 5%, transparent); }
/* Pay çubuğu — en çok veri taşıyan servise göre oran. */
.vc-bar { display:inline-block; width:64px; height:6px; border-radius:3px;
  background:var(--border); position:relative; vertical-align:middle; }
.vc-bar::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--w, 0%);
  background:var(--primary); border-radius:3px; }
.vc-servis { margin-top:14px; }
.vc-not { font-size:11.5px; margin:8px 0 0; }
/* MUSTERI DILI (2026-09-16): ilk surum 40 satirlik ham IP tablosuydu. Ustte
   HUKUM karti (.ax-alert), dort SAYI karti, adres basina gruplanmis satirlar
   (du-srv DNA'si) ve insan dilinde servis cipleri; ham tablo acilirda. */
/* Hukum karti: kullanici 2026-09-17 'serit cok yer kapliyor, yazi boyutu
   ayni kalsin'. `.ax-alert` temasi style.css'ten SONRA yuklenir -> cift sinif. */
/* Hukum karti ACILIR (kullanici 2026-09-17): baslik her zaman, ayrinti tiklayinca. */
.vc-yargi.ax-alert { display:block; margin:0 0 10px; padding:0; }
.vc-yargi__s { display:flex; align-items:center; gap:10px; padding:9px 12px;
  cursor:pointer; list-style:none; }
.vc-yargi__s::-webkit-details-marker { display:none; }
.vc-yargi__s .ax-alert__title { margin:0; flex:1 1 auto; }
.vc-yargi__s .fw-nasil__ch { flex:none; }
.vc-yargi__i { padding:0 12px 10px 38px; }
.vc-yargi__s > svg.ic { width:16px; height:16px; flex:none; }
.vc-yargi .ax-alert__title { margin:0 0 1px; line-height:1.3; }
.vc-yargi .ax-alert__message { margin:0; line-height:1.4; }
.vc-sayilar { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px; margin:0 0 6px; }
.vc-sayi { display:flex; flex-direction:column; gap:3px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
  min-width:0; }
.vc-sayi__b { display:flex; align-items:center; gap:6px; font-size:12px;
  font-weight:650; color:var(--fg-muted); }
.vc-sayi__b svg.ic { width:14px; height:14px; flex:none; }
.vc-sayi > b { font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.1; }
.vc-sayi__n { font-size:11.5px; color:var(--fg-muted); line-height:1.4; }
.vc-adres { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-2) var(--sp-4); margin:0 0 4px; }
.vc-adres > .du-srv:last-child:nth-child(odd) { grid-column:1 / -1; }
.vc-ad .du-srv-ad > b { font-size:13px; }
.vc-ad .du-srv-ad > small { line-height:1.5; }
.vc-ad--giris { border-color:color-mix(in srgb, var(--warn) 45%, var(--border));
  box-shadow:inset 3px 0 0 var(--warn); }
.vc-ad--giris .alr-ic { --_t:var(--warn); }
/* Servis cipi: tur rengi yalniz sol kenar noktasi - tablo hucresinde de calisir. */
.vc-svc { display:inline-flex; align-items:center; gap:5px; font-weight:600;
  color:var(--fg); white-space:nowrap; }
.vc-svc::before { content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--_s, var(--fg-faint)); }
.vc-svc--giris { --_s:var(--warn); }
.vc-svc--web { --_s:var(--primary); }
.vc-svc--eposta { --_s:#8b5cf6; }
.vc-svc--dosya { --_s:#0891b2; }
.vc-svc--veritabani { --_s:#16a34a; }
.vc-svc--altyapi { --_s:var(--fg-muted); }
.vc-svc--gecici, .vc-svc--diger { --_s:var(--border); font-weight:500; color:var(--fg-muted); }
.vc-svc__a { display:block; font-size:11px; margin-top:1px; white-space:normal; }
.vc-tbl--svc td:first-child { max-width:360px; }
.vc-rehber { margin-top:12px; }
/* Ayrintili liste sayfalama (ekranda, istek yok). */
.vc-sayfa { display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.vc-sayfa__d { font-size:12.5px; }
.vc-sayfa .ax-btn-group { flex:none; }
.vc-tbl tr.vc-tasma > td { font-weight:500; }
@media (max-width:820px) { .vc-adres { grid-template-columns:1fr; }
  .vc-adres > .du-srv:last-child:nth-child(odd) { grid-column:auto; } }
@media (max-width:520px) { .vc-sayilar { grid-template-columns:1fr; } }

@media (max-width:820px) {
  .vc-yon { margin-left:0; }
  .vd-netconn__n { max-width:100%; text-align:left; margin-left:0; }
}

/* Ayarlar › NetFlow: durum satirlari + adres onerisi.
   ⚠️ YENI GORSEL DIL YOK: durum satirlari 'Sistem durumu' kartinin
   `du-serv`/`du-srv` bileseninin AYNISIDIR (onceki hairline serit
   kullanici tarafindan begenilmedi, 2026-09-16). Burada yalniz kart
   icindeki marjlar ve oneri satiri tanimlanir. */
.nf-durum, .nf-kaynak, .dep-durum, .nf-denetim { margin:0 0 var(--sp-4); }
/* ⚠️ TEK KALAN SATIR IZGARAYI YARIM BIRAKMASIN: durum seridinde satir sayisi 2
   (adres hic girilmemis) ya da 3 (adres dogrulama satiri da var), kaynak
   listesinde ise ESXi sayisi kadar olabilir; tek sayida sonuncusu bos bir
   hucre yaninda oksuz kalirdi. `last-child:nth-child(odd)` yalniz TEK sayida
   eslesir — sayi degisirse kural kendini tasir. */
.nf-durum > .du-srv:last-child:nth-child(odd),
.nf-kaynak > .du-srv:last-child:nth-child(odd),
.dep-durum > .du-srv:last-child:nth-child(odd),
.nf-denetim > .du-srv:last-child:nth-child(odd) { grid-column:1 / -1; }
/* Denetle dugmesi rozetin YANINDA — satiri buyutmesin (rozetle ayni yukseklik). */
.nf-denetle { flex:none; white-space:nowrap; }
.nf-denetle svg.ic { width:14px; height:14px; }
/* Uzak Depolama › Durum › Sunucu kimliği (TOFU): sıfırlama düğmesi + kırılabilen
   parmak izi. Eylemli satır SARAR: metin sütunu 14rem'in altına inmez, rozet +
   düğme dar ekranda kendi satırına (sağa yaslı) düşer — 420px görüntüsünde
   metin 10 karakterlik sütuna sıkışmıştı. */
.du-srv--eylem { flex-wrap:wrap; }
/* flex-basis 14rem: `auto` olsaydı uzun metnin içerik genişliği satırı doldurup
   ikonu tek başına üst satıra atıyordu (420px görüntüsünde görüldü). */
.du-srv--eylem > .du-srv-ad { flex:1 1 14rem; min-width:14rem; }
.du-srv--eylem > .ax-badge { margin-left:auto; }
.dep-hk-sil { flex:none; white-space:nowrap; }
.dep-hk-pi { word-break:break-all; }
/* Sunucu adi satirin ana kimligi — baglanti oldugu belli olsun ama satirin
   geri kalaniyla yarismasin (panelin `ax-table` ici baglanti tonu). */
.nf-kaynak .du-srv-ad a { color:inherit; text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, currentColor 35%, transparent); }
.nf-kaynak .du-srv-ad a:hover { color:var(--primary); border-bottom-color:var(--primary); }
@media (max-width:820px) {
  .nf-durum, .nf-kaynak, .dep-durum, .nf-denetim {
    grid-template-columns:1fr; } }
/* IP kutusu + "Adresi tespit et" AYNI SATIRDA (kullanici istegi): dugme
   altta dururken IP ve Port aciklamalari farkli yukseklikte basliyordu. */
.nf-ip-satir { display:flex; gap:var(--sp-3); align-items:center; }
.nf-ip-satir .set-inp { flex:1 1 auto; min-width:0; }
.nf-oneri__btn { flex:none; white-space:nowrap; }
.nf-oneri:empty, .nf-oneri:has(> .nf-oneri__s:empty) { display:none; }
.nf-oneri { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-top:var(--sp-2); }
.nf-oneri__s { display:flex; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; font-size:var(--t-sm); color:var(--fg-muted); }
.nf-oneri__m { color:var(--fg); }
/* Akis alinan sunucular tablosu — panelin `ax-table` dili; sarmal
   `.sk-dokum` (dar ekranda KENDI kutusunda kayar). */
.nf-tbl { width:100%; }
.nf-tbl td small { display:block; }

/* ===== NetFlow · akış kaydı (ESXi ayarları + Ayarlar kartı) =====
   `_netflow.html`, `settings.html#s-netflow`
   ⚠️ YENİ GÖRSEL DİL YOK: durum kutusu/rehber MAC kilidinin reçetesi
   (`.mk-kutu`, `.fw-nasil`), seçim kartları IP kilidi/NIOC ile AYNI
   (`.fw-modlar` / `.fw-mod`), tablo panelin `ax-table`'ı. Burada yalnız
   kapsayıcı, hizalama ve "son akış" şeridi var. */
.nf-form { margin:0 14px 12px; }
/* `.fw-modlar` sabit 3 kolon (üç modlu bölümler için); burada iki kart var. */
.nf-modlar { grid-template-columns:repeat(2, 1fr); }
.nf-form .fw-satir { margin-top:10px; }
/* ⚠️ Ön koşul eksikken "Açık" kartı SEÇİLEMEZ görünmeli ama OKUNUR kalmalı:
   operatör neyi kaçırdığını kartın metninden öğreniyor. */
.fw-mod.is-kapali { opacity:.55; }
.fw-mod.is-kapali:hover { border-color:var(--border); }
.nf-liste { margin-top:12px; }
/* ESXi > Akis kaydi: DURUM IZGARASI (Ayarlar > NetFlow kartinin `du-serv`
   bileseni). Ilk surum ayni bilgiyi ust uste uc ince gri serit olarak
   basiyordu (kullanici 2026-09-16: 'gorunumu iyi degil'). */
.nf-esxi { padding:12px 14px 4px; }
.nf-esxi > .du-srv:last-child:nth-child(odd) { grid-column:1 / -1; }
.nf-esxi .du-srv-ad > small a { color:var(--primary); }
@media (max-width:820px) { .nf-esxi { grid-template-columns:1fr; } }

/* ⚠️ `overflow-x:auto` ŞART: tablo dar ekranda sayfa gövdesini kaydırmamalı. */
.nf-wrap { overflow-x:auto; }
.nf-tbl { width:100%; }
@media (max-width:820px) {
  .nf-modlar { grid-template-columns:1fr; }
}

/* ===== IP kilidi (firewall kartı + ESXi ayarları) — `_fw_ipk.html`, `_fw_port.html` ===== */
.fw-ipk { margin:12px 0 14px; padding:10px 14px; border-radius:10px; }  /* rehber şeridiyle AYNI kalınlık (kullanıcı 2026-09-11) */
.fw-ipk > svg.ic { width:18px; height:18px; }
.fw-ipk__t { flex:1 1 320px; display:flex; flex-direction:column; gap:1px; min-width:0; }
/* ── Ağ izolasyonu (2026-09-12): VM şeridi IP kilidi reçetesini (.fw-ipk) AYNEN kullanır;
   burada yalnız iki anahtarlı eylem satırı + Ağ İzolasyonu sayfasının tablo yerleşimi.
   Yeni görsel dil yok: ax-card / ax-table / fw-durum / node-picks / dd-panel. ── */
.fw-izo__a { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.fw-izo__a form { display:inline; }
.fw-izo__n { margin-top:4px; }
.izo-card { margin-bottom:var(--sp-5); }
.izo-tbl td { vertical-align:top; }
/* İşlem hücresi: formlar ALT ALTA (yan yana altı sütunu taşırıyordu — görüntüyle yakalandı). */
.izo-islem { min-width:230px; }
.izo-islem__k { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.izo-verify { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.izo-verify .ax-select { max-width:170px; }
.izo-ogr { margin-top:4px; }
/* Gateway LİSTESİ (kullanıcı 2026-09-12: tablo "çok kötü", kart "çok karmaşık") — panelin
   "Sunucuların durumu" kutusu (`.fw-durum`) AYNEN; satır: adres · rozet · MAC + bilgi · eylem.
   ⚠️ `.fw-durum` overflow:hidden — satırdaki açılır menü (`.dd-panel`) kırpılmasın diye
   yalnız bu kutuda görünür; köşe yuvarlaması başlık/son satıra parça bazında verilir. */
.gwl { margin-top:12px; }
/* Satırlar SÜTUN HİZALI ızgara (kullanıcı: liste "pek sevilmedi" — hizasız metin başlangıçları):
   adres · durum · MAC + ağ · eylem. Başlık şeridi aynı ızgarayı paylaşır. */
.gwl__hd, .gwl .fw-durum__i { display:grid; grid-template-columns:150px 118px minmax(280px, 1fr) auto;
  gap:6px 14px; align-items:center; }
.gwl__hd { padding:6px 14px; border-bottom:1px solid var(--border); font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.04em; }
.gwl__ad, .gwl__s { display:flex; flex-direction:column; gap:2px; min-width:0; }
.gwl__adres { font-weight:600; }
.gwl__durum { display:flex; flex-wrap:wrap; gap:4px; }
.gwl__mac { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
/* Etiketli çipler (Havuz / ESXi / IP / Sanal sunucu) — "test-esxi · 213.226.119.3 · 2 IP · 1 sunucu"
   düz metni okunmuyordu (kullanıcı 2026-09-13). Sol kısım etiket, sağ kısım değer. */
.gwl__cips { display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:3px; }
/* Etiket ve değer AYNI dikey eksende (kullanıcı: "yazılar eşit durmuyor"): ikisi de sabit
   yükseklikte inline-flex + center; satır yüksekliği miras alınmaz. */
.izo-chip { display:inline-flex; align-items:center; height:22px; border:1px solid var(--border); border-radius:999px;
            background:var(--surface-2); font-size:var(--t-xs); line-height:1; overflow:hidden; color:var(--fg);
            padding:0 8px 0 0; }
.izo-chip > b { display:inline-flex; align-items:center; align-self:stretch; font-weight:600; color:var(--fg-faint);
                background:var(--bg); padding:0 7px; margin-right:6px; border-right:1px solid var(--border);
                text-transform:uppercase; font-size:10.5px; letter-spacing:.03em; line-height:1; }
.izo-k { font-weight:600; color:var(--fg); }
.izo-chip .faint { margin-left:5px; }
.izo-kod { margin:4px 0 2px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm, 6px);
           background:var(--bg); font-family:var(--mono, ui-monospace, monospace); font-size:12px; line-height:1.5;
           white-space:pre; overflow-x:auto; }
.gwl__kaynak { line-height:1.5; }

.gwl__not { color:var(--warn); display:inline-flex; gap:5px; align-items:flex-start; }
.gwl__not--n { color:var(--fg-faint); }
.gwl__not svg.ic { width:13px; height:13px; flex:none; margin-top:3px; }
.gwl__a { display:flex; align-items:center; gap:6px; justify-self:end; }
.gwl__verify { display:flex; align-items:center; gap:6px; margin:0; }
.gwl__verify .ax-select { width:150px; }
/* MAC modalı (panelin form modalı) — sayfanın liste dili (.fw-durum) modal içinde:
   başlık + alt bilgi, MAC başına satır (MAC · kaynak · rozet · iki küçük düğme), kutunun
   altında tek satır "Yeni MAC", katlı "Sunucuyla sına" (kullanıcı 2026-09-13, üçüncü tur). */
.modal.gwm { width:min(600px, calc(100vw - 32px)); }
.gwm .m-head { align-items:flex-start; }
.gwm .m-head h3 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gwm .m-head h3 svg { flex:none; width:18px; height:18px; }
.gwm__hd { display:flex; flex-direction:column; gap:2px; }
.gwm__hd h3 { margin:0; }
.gwm__hd h3 .mono { font-size:inherit; font-weight:650; }
.gwm__sina-ack { margin:6px 0 0; }
.gwm__not { display:flex; gap:6px; align-items:flex-start; margin:0 0 8px; color:var(--warn); }
.gwm__not--n { color:var(--fg-faint); }
.gwm__not svg.ic { width:14px; height:14px; flex:none; margin-top:3px; }
.gwm__liste { margin-top:6px; }
.gwm__r { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; }
.gwm__mac { display:flex; flex-direction:column; gap:1px; min-width:0; }
.gwm__e { display:flex; gap:6px; align-items:center; }
.gwm__e form { margin:0; }
.gwm__sil svg.ic { width:14px; height:14px; }
.gwm__ekle { display:flex; gap:8px; align-items:center; padding:10px 14px; border-top:1px solid var(--border); background:var(--bg); }
.gwm__ekle label { margin:0; flex:none; }
.gwm__ekle input { flex:1 1 auto; margin:0; }
/* İnce renkli not şeridi (kalın uyarı kutusu değil) */
.gwm__bar { display:flex; gap:7px; align-items:flex-start; padding:6px 10px; border-radius:8px; margin:0 0 10px;
            font-size:12.5px; line-height:1.45; }
.gwm__bar svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }
.gwm__bar--warn { background:var(--warn-soft); color:var(--warn); }
.gwm__bar--info { background:var(--info-soft); color:var(--info); }
.gwm__bar--ic { margin:10px 14px; }
.gwl__bar { display:inline-flex; margin:2px 0 0; max-width:100%; }
.gwm__bar-x { margin:-2px -4px -2px auto; }
.gwm__x { background:none; border:0; color:inherit; cursor:pointer; font-size:16px; line-height:1; padding:0 4px; opacity:.7; }
.gwm__x:hover { opacity:1; }
/* Sınama satırı: "Yeni MAC" satırıyla aynı düzen, kutunun altında ayrı şerit */
.gwm__sina { margin-top:10px; }
.gwm__sina-f { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.gwm__sina-f label { margin:0; flex:none; }
.gwm__sina-f .ax-select { flex:1 1 160px; }
.gwm__satir { display:flex; gap:8px; align-items:center; }
.gwm__satir input { flex:1 1 auto; }
.gwm__ipucu { margin:8px 0 0; }
@media (max-width:900px) {
  .gwl__hd { display:none; }
  .gwl .fw-durum__i { grid-template-columns:1fr auto; }
  .gwl__s { grid-column:1 / -1; }
  .gwl__a { grid-column:1 / -1; justify-self:start; flex-wrap:wrap; }
}
.izo-mac { display:flex; align-items:center; gap:var(--sp-1); }
.izo-mac .ax-btn svg.ic { width:14px; height:14px; }
.izo-not { color:var(--warn); margin-top:4px; display:flex; gap:4px; align-items:flex-start; }
.izo-not svg.ic { width:14px; height:14px; flex:none; margin-top:3px; }
.izo-hint { margin:4px 0 8px; }
.izo-oneri { margin-top:var(--sp-4); }
.izo-meta { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.izo-p { margin:0 0 12px; }
.fw-port__mac { white-space:nowrap; }
/* Sağlayıcı IP blokları + servis istisnaları: kutu, satır = CIDR/IP · çipler · eylem (2026-09-14) */
.izb { margin-top:12px; }
.izb .fw-durum__i { display:grid; grid-template-columns:200px minmax(200px, 1fr) auto; gap:6px 14px; align-items:center; }
.izb__cidr { font-weight:600; }
.izb__k { min-width:0; display:flex; flex-wrap:wrap; gap:4px; }
.izb__a { display:flex; gap:6px; align-items:center; justify-self:end; }
.izb__a form { margin:0; }
/* Yukleniyor: uygulama seridi (donen ikon + ilerleme cizgisi) — 2026-09-14 */
.fw-yuk__ic { display:inline-flex; flex:none; }
.fw-yuk__ic svg.ic { animation:spin 1.1s linear infinite; }
.fw-yuk__t { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.fw-port__sk { margin:4px 0 2px; }
.fw-port__sk .mk-sk__r { grid-template-columns:minmax(90px,.8fr) repeat(2, minmax(120px,1fr)) minmax(90px,.8fr); }
@media (prefers-reduced-motion: reduce) { .fw-yuk__ic svg.ic { animation:none; } }
/* VM kartinda musteri izolasyon istisnalari (2026-09-14; katli — kullanici istegi) */
/* "Sunucuların durumu" sayfalama şeridi — kutunun ALT BAŞLIĞI gibi (kullanıcı 2026-09-15:
   "alttaki çizgiye çok yakın, sunucu yazısı okunmuyor"): üstten çizgi + dolgu + okunur metin. */
.nd-durum__p { margin:0; padding:11px 14px; gap:10px 8px;
  border-top:1px solid var(--border); background:var(--bg); }
.nd-durum__p .avm-pager__i { margin-right:auto; font-size:12.5px; color:var(--fg); }
.nd-durum__p .avm-pager__i b { font-weight:650; }
.nd-durum__p .avm-pager__x { padding:0 2px; }
.nd-durum__p a, .nd-durum__p > span.on { min-width:32px; height:32px; border-radius:8px;
  background:var(--surface); font-size:13px; }
.nd-durum__p a:hover { background:var(--primary-soft); }

.izi-vm { margin:10px 0 14px; }  /* alt bosluk: altindaki "Nasıl çalışır?" kutusuna yapisiyordu */
.izi-vm__i { padding:0; }
.izi-vm__i > .fw-durum { margin:0; border:none; border-radius:0; }
.izi-vm .fw-durum__i { display:grid; grid-template-columns:160px minmax(0, 1fr) auto; gap:6px 12px; align-items:center; }
.izi-vm__f { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.izi-vm__f input { flex:1 1 150px; width:auto; min-width:0; margin:0; }
.izi-vm__f input[name="aciklama"] { flex:1 1 170px; }
.izi-vm__f button { flex:none; }
.izi-vm__n { margin:10px 14px 12px; }
@media (max-width:760px) { .izi-vm .fw-durum__i { grid-template-columns:1fr auto; } .izi-vm .izb__k { grid-column:1 / -1; } }
/* ESXi sayfasi: izolasyon listeleri kutusu (2026-09-14) */
.izl { margin-top:12px; }
.izl .fw-durum__i { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:4px 14px; align-items:center; }
.izl__ad { display:flex; flex-direction:column; gap:2px; font-weight:600; }
.izl__ad .faint { font-weight:400; font-size:var(--t-xs); }
.izl__v { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.izo-chip--v { padding:0 8px; }
.izo-eksik { margin:10px 0 0; }
@media (max-width:760px) { .izl .fw-durum__i { grid-template-columns:1fr; } }
.izm__ad { display:flex; flex-direction:column; gap:2px; min-width:0; }
.izm__ad a { font-weight:600; text-decoration:none; color:var(--fg); }
.izm__ad a:hover { text-decoration:underline; }
.izm__ad .faint { font-size:var(--t-xs); }
.izb__haric { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:8px 14px; border-top:1px solid var(--border); background:var(--bg); }
.izb__geri { display:inline-flex; gap:6px; align-items:center; margin:0; }
@media (max-width:760px) { .izb .fw-durum__i { grid-template-columns:1fr auto; } .izb__k { grid-column:1 / -1; } }
.fw-ipk .ax-alert__title { font-size:13.5px; font-weight:650; margin:0; }
.fw-ipk .ax-alert__message { flex:none; font-size:12px; line-height:1.4; margin:0; color:var(--fg-muted); }  /* ⚠️ flex-basis SUTUNDA yukseklik olur (320px yasandi) */
.fw-ipk .ax-alert__actions form { display:inline; }
/* Anahtar dugmesi metnin EN SAGINDA, ayni hizada (kullanici 2026-09-11) */
.fw-ipk .ax-alert__content { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fw-ipk .ax-alert__actions { margin:0 0 0 auto; }
.fw-port__n { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; font-size:13.5px; }
.fw-port__n > span { flex:1 1 320px; }
.fw-port__n > button { margin-left:auto; }
.fw-port__t td, .fw-port__t th { font-size:12.5px; }
.fw-port__sis td { background:color-mix(in srgb, var(--primary) 5%, transparent); }

/* ⚠️ KESIM EYLEMLERI BARIN EN SAGINDA (kullanici istegi 2026-09-16):
   metnin ICINE gomulu dugme paragrafin ortasinda kalip satiri kiriyordu.
   ⚠️ Bu kapta BASKA auto-marj YOK — iki auto-marj serbest alani
   IKIYE bolerdi (panelin belgeli tuzagi, SMTP cubugunda yasanmisti). */
/* ⚠️ EYLEMLER KENDI SATIRINDA, SAGA YASLI: ayni satirda durunca
   (170px tarih + ~210px dugme) paragrafa yalniz ~340px kaliyor ve metin
   alti satira sariliyordu — olculdu. Tam genislik + `flex-end`, hem
   kullanicinin istedigi "barin en saginda" hem de okunakli metin. */
.ssl-durum.not-bar.nf-eksik { flex-wrap:wrap; }
/* ⚠️ TABAN `0` SART: `flex-basis:auto` paragrafin ICERIK genisligini
   taban sayar, kap sarmali oldugu icin metin IKON SATIRINDAN TASIP alt
   satira geciyor ve ikon tek basina kaliyordu (ekran goruntusunde
   goruldu). `1 1 0` metni ikonun yanina oturtur. */
.nf-eksik > p { min-width:0; flex:1 1 0; }
/* ⚠️ SORU ile EYLEMLER TEK SATIRDA: solda aciklama (esner), sagda
   tarih + dugme (esnemez). Metin `flex:1 1 0` ile ikisinin arasindaki
   bosluga oturur; `flex-basis:auto` olsaydi icerik genisligi taban sayilip
   eylemleri alt satira iterdi (yasandi). */
.nf-kesim { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  flex:1 0 100%; margin-top:var(--sp-2);
  padding-top:var(--sp-2);
  border-top:1px solid color-mix(in srgb, var(--_sd) 18%, transparent); }
.nf-kesim__t { flex:1 1 0; min-width:220px; }
.nf-kesim .set-inp { width:auto; max-width:160px; flex:none; }
.nf-kesim .ax-btn { flex:none; }
/* ⚠️ TEK SERITLI BAR (kesim bilgisi): ikonun yaninda ayri bir
   paragraf YOK. Tam genislik verilirse serit alt satira duser ve IKON
   TEK BASINA, yani bos kalir (kullanici bulgusu 2026-09-16). */
.nf-kesim--tek { flex:1 1 0; margin-top:0; padding-top:0; border-top:0; }
/* ⚠️ Eksik dosya yollari okunakli kalsin: kutu METINDIR, mono yol
   paragrafin geri kalanindan ayirt edilmeli ama bagirmamali. */
.nf-eksik .mono { font-size:var(--t-sm); opacity:.85; }
/* Dar ekranda eylemler ALT SATIRA gecer — bar zaten sariyor. */
/* Dar ekranda metin ust satira, eylemler altina — tasma olmasin. */
@media (max-width:640px) {
  .nf-kesim__t { flex:1 1 100%; min-width:0; }
  .nf-kesim .set-inp { max-width:100%; }
}

/* ───────────── PORT MIRROR (mirror.html + mirror_detay.html) ─────────────
   Ikinci surum (kullanici 2026-09-17: "tasarimi begenmedim"). Ozet = temanin KPI karti
   (`.ax-kpi` + `.vs` ton eslemesi), arama = `.filter-bar`, uyarilar = `.warn-box/.info-box`.
   Buradakiler yalniz bu sayfaya OZGU bilesenler: sunucu karti, gecmis satiri, durum seridi,
   cubuklu liste, paket akisi. Renkler YALNIZ tema degiskenlerinden. */
.mr-kpi { margin-bottom:var(--sp-4); }
.mr-kpi .vs { cursor:default; }
.mr-kpi__metin { font-size:26px; letter-spacing:-.01em; }
.mr-kpi__bar .ax-progress__track { background:var(--surface-3) !important; }
.mr-card { margin-bottom:var(--sp-4); }
.mr-r { text-align:right; }
.mr-bos { margin:8px 0 0; }
.mr-bos--orta { text-align:center; padding:28px 12px; margin:0; }
.mr-not { margin:12px 0 0; font-size:12.5px; line-height:1.5; display:flex; gap:6px; align-items:flex-start; }
.mr-not svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }

/* BOLUM = TEK KART, basligi kartin ust SERIDI (kullanici: "basliklar arka plansiz duz yazi gibi,
   bir serit icinde olsun"). Serit zemini `--surface-2`; altinda suzgec + tablo + sayfalama. */
/* ⚠️ SECICI LISTESI GENISLETILDI, KOPYA KURAL YAZILMADI (panelin kendi
   konvansiyonu — bkz. `.ax-strip, .avm-strip` ve `.lk-unit, .lk-pref`):
   `.by-blok`/`.by-bolum*` BAYILIK ekranlarinin ayni serididir. Kullanici
   2026-09-28: "port mirrordaki Sunucular kartinin tasarimini bayilikteki
   Kaynak kullanimi kartina uygula". Ayri bir kural yazilsaydi iki serit
   zamanla sessizce ayrisirdi. */
.mr-blok, .by-blok, .kr-blok, .sp-blok { margin:0 0 var(--sp-5); padding:0; overflow:hidden; }
.mr-bolum, .by-bolum, .kr-bolum, .sp-bolum { display:flex; align-items:center; gap:10px; margin:0; padding:13px 18px;
  background:var(--surface-2); border-bottom:1px solid var(--border); }
.mr-blok > .info-box, .mr-blok > .warn-box, .kr-blok > .info-box, .kr-blok > .warn-box, .sp-blok > .info-box, .sp-blok > .warn-box { margin:var(--sp-4); }
.mr-blok > .pager, .kr-blok > .pager, .sp-blok > .pager { padding:12px 18px; margin:0; border-top:1px solid var(--border); }
/* suzgec cubugu kartin ICINDE: kendi kart gorunumu (zemin/cerceve/golge) kalkar */
.mr-blok > .filter-bar, .by-blok .filter-bar, .kr-blok > .filter-bar, .sp-blok > .filter-bar { margin:0; padding:12px 18px; border:0;
  border-bottom:1px solid var(--border);
  border-radius:0; box-shadow:none; background:transparent; }
.mr-blok .mr-tablo, .kr-blok .mr-tablo, .kr-blok > .mr-tblwrap, .sp-blok > .mr-tblwrap { margin:0; }
.mr-blok .mr-tbl th:first-child, .mr-blok .mr-tbl td:first-child, .kr-blok .mr-tbl th:first-child, .kr-blok .mr-tbl td:first-child, .sp-blok .mr-tbl th:first-child, .sp-blok .mr-tbl td:first-child { padding-left:18px; }
.mr-blok .mr-tbl th:last-child, .mr-blok .mr-tbl td:last-child, .kr-blok .mr-tbl th:last-child, .kr-blok .mr-tbl td:last-child, .sp-blok .mr-tbl th:last-child, .sp-blok .mr-tbl td:last-child { padding-right:18px; }
.mr-blok > .mr-saklama { padding:0; }
.mr-bolum__b, .by-bolum__b, .kr-bolum__b, .sp-bolum__b { display:flex; align-items:center; gap:8px; margin:0; font-size:16px; font-weight:700; }
.mr-bolum__b svg.ic, .by-bolum__b svg.ic, .kr-bolum__b svg.ic { width:17px; height:17px; color:var(--fg-muted); }
.mr-bolum__a, .by-bolum__a, .kr-bolum__a, .sp-bolum__a { font-size:12.5px; }
.mr-filtre { margin-bottom:var(--sp-3); }
.mr-bolum__sag, .by-bolum__sag, .kr-bolum__sag { margin-left:auto; }

/* suren izleme seridi + nabiz */
.mr-nabiz { width:10px; height:10px; border-radius:50%; flex:none; background:var(--fg-faint); }
.mr-serit--canli .mr-nabiz, .mr-canli-serit .mr-nabiz { background:var(--ax-danger-500);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--ax-danger-500) 55%, transparent); animation:mr-nabiz 1.4s infinite; }
@keyframes mr-nabiz { 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .mr-nabiz { animation:none !important; } }
.mr-canli-serit { display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:var(--sp-3);
  border:1px solid color-mix(in srgb, var(--ax-danger-500) 35%, var(--border)); border-radius:var(--radius);
  background:color-mix(in srgb, var(--ax-danger-500) 6%, var(--surface)); color:inherit; text-decoration:none; }
.mr-canli-serit__m { flex:1 1 auto; min-width:0; }
.mr-canli-serit__m small { display:block; color:var(--fg-muted); font-size:12.5px; }

/* sunucu tablosu (ilk hali kart izgarasiydi; 1000 sunucuda tablo + sayfalama sart) */
.mr-tablo { margin-bottom:var(--sp-3); overflow:hidden; }
.mr-tblwrap { overflow-x:auto; }
.mr-tbl { width:100%; }
/* 25 satirlik sayfa tek ekrana yakin sigsin: tema varsayilanindan SIKI satir */
.mr-tbl td { vertical-align:middle; padding-top:8px; padding-bottom:8px; }
.mr-tbl__ip { font-weight:700; font-size:14px; color:var(--fg); text-decoration:none; }
.mr-tbl__ip:hover { color:var(--ax-accent); }
.mr-kisa { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mr-ipler { font-size:12.5px; color:var(--fg-muted); white-space:nowrap; }
.mr-filtre .btn { flex:none; }

/* gecmis tablosu (ilk hali satir kartlariydi; kullanici: "duz yazi gibi, tablo olsun") */
.mr-g[hidden] { display:none; }
.mr-g__sebep { display:block; margin-top:3px; font-size:11.5px; }
.mr-g__eylem { white-space:nowrap; }
.mr-g__eylem > * { vertical-align:middle; }
.mr-g__eylem form { display:inline-flex; margin:0; }
.mr-gecmis .mr-tbl__ip { margin-right:6px; }
.mr-nw { white-space:nowrap; }
.mr-tablo__alt { display:flex; justify-content:center; padding:10px; border-top:1px solid var(--border); }

/* alt ikili: saklama + bilgi */
.mr-alt { margin-top:var(--sp-4); }
.mr-kart__b { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:15px; font-weight:700; }
.mr-kart__b svg.ic { width:16px; height:16px; color:var(--fg-muted); flex:none; }
.mr-kart__b--alt { margin-top:18px; }
.mr-kart__a { margin:0 0 12px; font-size:12.5px; line-height:1.5; }
.mr-kart__ust { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:10px; }
.mr-saklama { display:block; margin:0; }
/* 4 sutun: kullanim gostergesi + uc ayar (sure · toplam tavan · tek yakalama tavani) */
.mr-saklama .lk-ctrls { grid-template-columns:minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap:var(--sp-5); }
.mr-saklama .lk-ctrl small { font-size:13px; }
.mr-kullanim__s { display:flex; align-items:baseline; gap:8px; }
.mr-kullanim__s b { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.mr-kullanim__y { margin-left:auto; align-self:center; }
.mr-kullanim__iz { height:8px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; }
.mr-kullanim__iz i { display:block; height:100%; border-radius:inherit; background:var(--ax-success-500); }
.mr-kullanim__iz i.mr-yari { background:var(--ax-warning-500); } .mr-kullanim__iz i.mr-dolu { background:var(--ax-danger-500); }
.mr-saklama .lk-ctrl small em { display:block; font-style:normal; font-size:12px; margin-top:2px; }
.mr-saklama__alt { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); font-size:12.5px; }
.mr-saklama__alt .btn { margin:0; flex:none; }
/* not UZUN: dugmeyi alt satira itmesin — metin daralir, Kaydet SAGDA kalir */
.mr-saklama__alt > span { flex:1 1 0; min-width:0; line-height:1.5; }
.mr-bilgi { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-5); }
.mr-bilgi li { display:flex; gap:12px; font-size:13px; line-height:1.55; color:var(--fg-muted); }
.mr-bilgi li b { color:var(--fg); }
.mr-bilgi__i { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  color:var(--_t, var(--ax-accent)); background:color-mix(in srgb, var(--_t, var(--ax-accent)) 12%, transparent); }
.mr-bilgi__i svg.ic { width:15px; height:15px; }
.mr-bilgi__i--ok { --_t:var(--ax-success-500); } .mr-bilgi__i--uyari { --_t:var(--ax-warning-500); }

/* izle penceresi */
.mr-hedef { display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:14px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.mr-hedef__i { width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  color:var(--ax-accent); background:color-mix(in srgb, var(--ax-accent) 12%, transparent); }
.mr-hedef__i svg.ic { width:17px; height:17px; }
.mr-hedef strong { display:block; font-size:15px; } .mr-hedef small { font-size:12.5px; }
.mr-alan { margin-bottom:14px; }
.mr-alan__e { display:block; font-size:12.5px; color:var(--fg-muted); margin-bottom:5px; }
.seg.mr-seg { grid-template-columns:repeat(3, 1fr); }
/* kip secimi: Ayarlar'in `.opt-box` deseni (radio ile de calisir: `input:checked + .opt-inner`).
   ⚠️ `.form-modal input` girdileri tam genislige ceker — opt-box kendi input'unu gizledigi icin sorun yok. */
.mr-kip { margin-top:8px; }
.mr-kip .opt-body { font-size:13px; }
.mr-kip .opt-body > strong { display:flex; align-items:center; gap:8px; font-size:14px; }
.mr-kip .opt-body .faint { line-height:1.5; }
.mr-kip-not { margin:10px 0 0; }
.mr-hata[hidden], .mr-gecikme[hidden] { display:none; }

/* ── canli ekran ── */
.mr-geri { color:var(--fg-muted); text-decoration:none; }
.mr-geri:hover { color:var(--ax-accent); }
.mr-ayrac { color:var(--fg-faint); font-weight:400; margin:0 2px; }
.ax-page-head__title .mono { font-size:.82em; letter-spacing:-.01em; }
.mr-kunye { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.mr-serit { position:relative; display:flex; align-items:center; gap:14px; padding:14px 18px 17px; margin-bottom:var(--sp-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.mr-serit--canli { border-color:color-mix(in srgb, var(--ax-danger-500) 35%, var(--border)); }
.mr-serit__m { flex:1 1 auto; min-width:0; }
.mr-serit__m b { display:block; font-size:15px; } .mr-serit__m small { font-size:12.5px; }
.mr-serit__kalan { font-size:26px; font-weight:700; letter-spacing:-.02em; flex:none; }
.mr-serit__kalan[hidden] { display:none; }
.mr-serit__cubuk { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--surface-3); }
.mr-serit__cubuk i { display:block; height:100%; background:var(--ax-success-500); transition:width 1s linear; }
.mr-serit--canli .mr-serit__cubuk i { background:var(--ax-danger-500); }
.mr-serit--hata .mr-serit__cubuk i { background:var(--ax-danger-500); }
.mr-serit--hata .mr-nabiz { background:var(--ax-danger-500); }
.mr-serit:not(.mr-serit--canli):not(.mr-serit--hata) .mr-nabiz { background:var(--ax-success-500); }

.mr-grafik { display:block; width:100%; height:140px; }
.mr-grafik polyline { fill:none; stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.mr-grafik__g { stroke:var(--ax-accent); } .mr-grafik__c { stroke:var(--ax-warning-500); }
.mr-grafik__izgara line { stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.mr-dg__a { stop-color:var(--ax-accent); stop-opacity:.22; } .mr-dg__b { stop-color:var(--ax-accent); stop-opacity:0; }
.mr-dc__a { stop-color:var(--ax-warning-500); stop-opacity:.18; } .mr-dc__b { stop-color:var(--ax-warning-500); stop-opacity:0; }
.mr-grafik__l { display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:12.5px; align-items:center; }
.mr-nokta { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.mr-nokta--g { background:var(--ax-accent); } .mr-nokta--c { background:var(--ax-warning-500); }

.mr-ozetler { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-4); }
.mr-ozetler .mr-card { min-width:0; }
.mr-cubuklar { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.mr-cb__ust { display:flex; align-items:baseline; gap:8px; font-size:12.5px; }
.mr-cb__e { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); }
.mr-cb__ek { font-size:11.5px; flex:none; } .mr-cb__d { flex:none; font-size:12.5px; }
.mr-cb__iz { height:5px; border-radius:var(--radius-pill); background:var(--surface-3); margin-top:4px; overflow:hidden; }
.mr-cb__iz i { display:block; height:100%; border-radius:inherit; background:var(--ax-accent); transition:width .4s ease; }
.mr-cb__iz i.mr-cb--uyari { background:var(--ax-warning-500); } .mr-cb__iz i.mr-cb--ok { background:var(--ax-success-500); }
.mr-cb__iz i.mr-cb--notr { background:var(--fg-faint); }

/* ── PAKET AKISI = TERMINAL (kullanici: "tcpdump havasi, SSH'tan izliyor gibi") ──
   Koyu zemin HER iki temada da sabittir (web konsol gibi); renkler yalniz burada gecerli. */
.mr-konsol { --k-bg:#0b1220; --k-bg2:#111a2c; --k-fg:#d6e2f0; --k-dim:#7c8aa5; --k-cizgi:#1f2a40;
  --k-in:#5ac8fa; --k-out:#ffb454; --k-tcp:#7aa2ff; --k-udp:#c39bff; --k-icmp:#ffb454; --k-arp:#6b7590;
  --k-flag:#9be59b; --k-ok:#34d399;
  border:1px solid var(--k-cizgi); border-radius:var(--radius); overflow:hidden; background:var(--k-bg);
  color:var(--k-fg); box-shadow:var(--shadow-sm); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mr-konsol__bar { display:flex; align-items:center; gap:12px; padding:8px 12px; background:var(--k-bg2);
  border-bottom:1px solid var(--k-cizgi); font-size:12px; }
.mr-konsol__ldl { display:inline-flex; gap:6px; flex:none; }
.mr-konsol__ldl i { width:11px; height:11px; border-radius:50%; background:#3a4660; }
.mr-konsol__ldl i:nth-child(1) { background:#ff5f57; } .mr-konsol__ldl i:nth-child(2) { background:#febc2e; }
.mr-konsol__ldl i:nth-child(3) { background:#28c840; }
.mr-konsol__baslik { color:var(--k-dim); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 /* arac cubugu: UC kontrol de AYNI boy (30px) ve ayni cerceve; anahtarlar basili-dugme (kutu gizli).
   ⚠️ Ilk surumde kutu 28px, anahtarlar 26px'ti ve dikeyde kaymis gorunuyordu (kullanici: "yamuk"). */
.mr-arac { display:flex; align-items:stretch; gap:6px; flex:none; height:30px; }
.mr-arac input[type=search], .mr-anahtar { box-sizing:border-box; height:30px; margin:0; font:inherit; font-size:12px;
  line-height:28px; border:1px solid var(--k-cizgi); border-radius:6px; background:var(--k-bg); color:var(--k-fg); }
.mr-arac input[type=search] { width:230px; padding:0 10px; -webkit-appearance:none; appearance:none; }
.mr-arac input[type=search]::placeholder { color:var(--k-dim); }
.mr-arac input[type=search]:focus { outline:none; border-color:var(--k-in); }
.mr-anahtar { display:inline-flex; align-items:center; gap:6px; padding:0 11px; white-space:nowrap; cursor:pointer;
  color:var(--k-dim); user-select:none; position:relative; }
.mr-anahtar input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.mr-anahtar::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--k-cizgi); flex:none; }
.mr-anahtar:hover { border-color:var(--k-dim); color:var(--k-fg); }
.mr-anahtar:has(input:checked) { border-color:var(--k-in); color:var(--k-in); background:rgba(90,200,250,.10); }
.mr-anahtar:has(input:checked)::before { background:var(--k-in); box-shadow:0 0 6px var(--k-in); }
.mr-anahtar:has(input:focus-visible) { outline:2px solid var(--k-in); outline-offset:1px; }
.mr-konsol__govde { height:460px; overflow:auto; padding:10px 14px 6px; font-size:12.5px; line-height:1.6; }
/* Satir = ESIT KOLONLU GRID (kullanici: "satirlar tam ekrana esit yayilsin, icerik anlasilir olsun"):
   zaman · yon · kaynak · hedef · protokol · aciklama · boy. Baslik satiri ayni gridi paylasir -> hizali. */
.mr-l { display:grid; grid-template-columns:12ch 7ch minmax(0, 1.25fr) minmax(0, 1.25fr) 10ch minmax(0, 1.5fr) 8ch;
  column-gap:14px; align-items:center; padding:4px 10px; margin:0 0 3px; border-radius:5px; white-space:nowrap;
  /* her satir KENDI SERIDINDE (kullanici: "yoksa izlenmesi zor"): zebra DEGIL — gizli yayin satirlari
     nth-child sirasini bozardi; her satir ayni hafif zemin + araliklı. */
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.04); }
.mr-l > span { overflow:hidden; text-overflow:ellipsis; }
.mr-l[hidden] { display:none; }
.mr-l:hover { background:rgba(90,200,250,.10); border-color:rgba(90,200,250,.25); }
/* Yon rengi HEM rozette HEM seritte (kullanici): gelen = mavi, giden = turuncu; sol kenar cizgisi de. */
.mr-l--gelen { background:rgba(90,200,250,.10); border-color:rgba(90,200,250,.18); box-shadow:inset 3px 0 0 var(--k-in); }
.mr-l--giden { background:rgba(255,180,84,.10); border-color:rgba(255,180,84,.18); box-shadow:inset 3px 0 0 var(--k-out); }
.mr-l--gelen:hover { background:rgba(90,200,250,.18); } .mr-l--giden:hover { background:rgba(255,180,84,.18); }
.mr-l--yayin, .mr-l--diger { background:rgba(255,255,255,.02); }
.mr-l--baslik { position:sticky; top:-10px; z-index:1; margin:0 0 6px; padding:8px 10px 6px; border:0;
  background:var(--k-bg); color:var(--k-dim); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--k-cizgi); border-radius:0; }
.mr-l--baslik:hover { background:var(--k-bg); }
.mr-l__t { color:var(--k-dim); }
.mr-yon { display:inline-block; font-style:normal; padding:0 7px; border-radius:4px; font-weight:700; font-size:11px; line-height:1.5; }
.mr-yon--gelen { color:#06202e; background:var(--k-in); }
.mr-yon--giden { color:#2e1a00; background:var(--k-out); }
.mr-yon--yayin, .mr-yon--diger { color:var(--k-dim); background:rgba(107,117,144,.22); }
.mr-l__a { color:var(--k-fg); }
.mr-l__p b { font-weight:700; }
.mr-l__b { color:var(--k-flag); }
.mr-l__len { color:var(--k-dim); text-align:right; }
.mr-l--yayin, .mr-l--diger { color:var(--k-dim); }
.mr-l--yayin .mr-l__a, .mr-l--diger .mr-l__a, .mr-l--yayin .mr-l__b, .mr-l--diger .mr-l__b { color:var(--k-dim); }
.mr-konsol__satirlar { white-space:normal; }
.mr-pr { font-weight:700; color:var(--_p, var(--k-dim)); }
.mr-pr--tcp { --_p:var(--k-tcp); } .mr-pr--udp { --_p:var(--k-udp); } .mr-pr--icmp { --_p:var(--k-icmp); }
.mr-pr--arp, .mr-pr--diger { --_p:var(--k-arp); }
.mr-konsol__bos { color:var(--k-dim); padding:6px 0; }
.mr-konsol__bos[hidden] { display:none; }
.mr-konsol__imlec { color:var(--k-ok); margin-top:2px; }
.mr-konsol__imlec i { display:inline-block; width:8px; height:14px; vertical-align:-2px; background:var(--k-fg); animation:mr-imlec 1s steps(2, start) infinite; }
@keyframes mr-imlec { to { visibility:hidden; } }
@media (prefers-reduced-motion: reduce) { .mr-konsol__imlec i { animation:none; } }
.mr-konsol__alt { display:flex; justify-content:space-between; gap:12px; padding:7px 12px; font-size:11.5px; color:var(--k-dim);
  background:var(--k-bg2); border-top:1px solid var(--k-cizgi); font-family:var(--font-sans, system-ui, sans-serif); }
.mr-konsol__alt b { color:var(--k-fg); }
.mr-konsol + .mr-not { margin-top:10px; }

@media (max-width: 980px) {
  .mr-ozetler, .mr-bilgi, .mr-saklama .lk-ctrls { grid-template-columns:1fr; }
  .mr-bolum__sag { display:none; } .mr-konsol__bar { flex-wrap:wrap; } .mr-arac { flex-wrap:wrap; }
  .mr-arac input[type=search] { width:100%; }
  .mr-serit__kalan { font-size:20px; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  .mr-saklama .lk-ctrls { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---- YEDEKLEME (Ayarlar > Uzak Depolama ve Yedekleme; docs/yedekleme.md) ----
   2. tasarim (kullanici 2026-09-18): siklik = TEK SECIM mod kartlari (`.fw-modlar`
   recetesi, 4 kolon), zamanlama ve parola = `.fw-durum` kenarlikli kutu. */
.ydk-modlar { grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:var(--sp-4); }
.ydk-zaman { margin-top:12px; }
.ydk-zaman__g { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 var(--sp-5);
  padding:12px 14px 0; }
.ydk-zaman__g .set-fl { margin-bottom:var(--sp-4); min-width:0; }
.ydk-zaman__g .set-inp { width:100%; min-width:0; }
.ydk-zaman__g .set-fl[hidden] { display:none; }
.ydk-parola { margin-top:12px; }
.ydk-parola--yok { border-color:var(--danger); }
.ydk-parola--yok .fw-durum__h { border-bottom-color:var(--danger); }
.ydk-parola__e { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap;
  padding:0 14px 12px; }
.ydk-parola__e .set-inp { flex:1 1 320px; min-width:0; }
.ydk-parola__e .ax-btn { flex:none; }
.ydk-parola-yeni .ydk-parola-metin { display:block; font-size:var(--t-lg); margin:var(--sp-2) 0;
  user-select:all; word-break:break-all; letter-spacing:.02em; }
.ydk-eylem { margin-top:var(--sp-4); }
@media (max-width:980px) {
  .ydk-modlar { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ydk-zaman__g { grid-template-columns:1fr; }
}
@media (max-width:560px) { .ydk-modlar { grid-template-columns:1fr; } }
.ydk-modlar .fw-mod:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.ydk-modlar .fw-mod:has(input:disabled):hover { border-color:var(--border); }
.ydk-engel { margin-top:10px; }
.ydk-kapsam { align-items:flex-start; } .ydk-kapsam .alr-ic { margin-top:2px; }
.ydk-kapsam__m p { margin:0 0 6px; font-size:var(--t-md); color:var(--fg-muted); line-height:1.55; }
.ydk-kapsam__m p:last-child { margin-bottom:0; }
.ydk-liste { margin-top:var(--sp-4); }
.ydk-liste .fw-durum__i { display:grid; grid-template-columns:minmax(150px, 1fr) 2fr auto;
  gap:6px 14px; align-items:center; }
.ydk-r__z, .ydk-r__d { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ydk-r__d .mono { overflow-wrap:anywhere; }
.ydk-r__s { display:flex; align-items:center; gap:8px; justify-content:flex-end; white-space:nowrap; }
.ydk-r--hata .ydk-r__d small { color:var(--danger); }
/* 2026-09-25: süzgeç satırı (VM yedek süzgecinin reçetesi) + kaybolmuş/silinmiş satır tonu */
.ydk-suz { margin:10px 0 4px; }
.ydk-r--uzakta_yok .ydk-r__d .mono { color:var(--danger); }
.ydk-r--silindi .ydk-r__d .mono, .ydk-r--silindi .ydk-r__z b { color:var(--fg-muted); }
.ydk-pager { margin-top:10px; }
.ydk-sil svg.ic { width:14px; height:14px; }
@media (max-width:760px) {
  .ydk-liste .fw-durum__i { grid-template-columns:1fr auto; }
  .ydk-r__d { grid-column:1 / -1; }
}

/* ---- Yedekleme › Proxy sunucular (docs/vm-yedekleme.md §8; Port Mirror reçetesi üstüne) ---- */
.yp-parola { margin:0 0 var(--sp-5); }
.yp-parola__k { display:inline-flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
.yp-parola__k code { font-size:15px; padding:4px 10px; background:var(--bg-2, var(--bg)); border:1px solid var(--border); border-radius:6px; user-select:all; }
.yp-sag { margin-left:auto; }
.yp-eylem { white-space:nowrap; }
.yp-eylem .yp-inl { display:inline; }
.yp-eylem .ax-btn { margin-left:4px; }
.yp-hiz { white-space:nowrap; }

/* ================= YEDEKLER SAYFASI (kullanici 2026-09-21: "gorunumu cok kotu") ======
   "Simdi yedekle": ara + sec + baslat TEK HIZADA (once uc ayri satira dagilmisti). */
.yy-bas { display:flex; flex-direction:column; gap:10px; }
/* ⚠️ ARANABILIR LISTE (kullanici 2026-09-21: "arama yeri calismiyor, sunucu secin alanini
   sevmedim"): arama kutusu + LISTE KUTUSU + sayac + baslat. Proxy sayfasindaki IP
   arayicisiyla AYNI recete. */
.yy-bas__form { display:flex; flex-direction:column; gap:8px; }
.yy-bas__ara .yp-ara { width:100%; }
.yy-bas__alt { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; }
.yy-bas__form .yp-ip-liste { width:100%; }
/* ===== YEDEK NOKTALARI SUZGECI (kullanici 2026-09-22) =====
   Tek satir: arama (esner) + durum + Suz + Temizle. ⚠️ CSS'siz birakilinca ucu alt alta
   dusuyordu (goruntude yakalandi). */
.yy-filtre { padding-bottom:0; }
/* ⚠️ UCU DE AYNI YUKSEKLIKTE VE TEK HIZADA (kullanici 2026-09-22: "esit hizali degil").
   `align-items:center` + ortak `--yyf` yuksekligi: taban `.ax-input`/`.ax-select`/`.btn`
   dolgulari farkli oldugu icin yalnizca hizalamak YETMIYORDU. */
.yy-filtre__f { --yyf:40px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 var(--sp-4); }
.yy-filtre__ara { flex:1 1 280px; min-width:0; }
/* ⚠️ "Temizle" bagi da ayni satirda duruyor — o da ayni yukseklige baglanir, yoksa
   suzgec acikken dorduncu kontrol tek basina kisa kalirdi. */
.yy-filtre__ara .ax-input,
.yy-filtre__d,
.yy-filtre__f > .ax-btn,
.yy-filtre__b { height:var(--yyf); box-sizing:border-box; }
.yy-filtre__d { flex:0 0 240px; min-width:0; }
.yy-filtre__b { flex:none; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:760px){
  .yy-filtre__ara, .yy-filtre__d, .yy-filtre__b { flex:1 1 100%; } }

/* ⭐ Yedek turu secimi (kullanici 2026-09-22): panelin KENDI segment recetesi. */
.yy-bas__tur { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.yy-bas__turt { font-size:13px; font-weight:600; flex:none; }
.yy-turseg { margin:0; flex:1 1 320px; min-width:0;
  grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* "Listeden bir sunucu secin — N sunucu arasinda" ipucu: tek satir, kirpilir */
.yy-ipuc { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px){ .yy-bas__tur { flex-direction:column; align-items:stretch; }
  .yy-turseg { flex:1 1 auto; } }

/* ⭐ NUMARALI SAYFALAMA (kullanici 2026-09-21: "1 2 3 diye gitsin") */
.yy-pager { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; }
.yy-pager__n { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.yy-sayfa { display:inline-flex; align-items:center; justify-content:center; min-width:30px;
  height:30px; padding:0 8px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--fg); font-size:12.5px; font-weight:600;
  text-decoration:none; line-height:1; }
.yy-sayfa:hover { border-color:var(--primary); color:var(--primary); }
.yy-sayfa.aktif { background:var(--primary); border-color:var(--primary); color:#fff; }
.yy-sayfa--bos { border-color:transparent; background:none; color:var(--fg-muted);
  min-width:16px; padding:0 2px; }

/* Yedek noktalari tablosu: sayi sutunlari SAGA, zaman/veri iki satirli */
.yy-sag { text-align:end; }
.yy-zaman { font-weight:600; }
.yy-vm { font-weight:600; }
/* ⭐⭐ YEDEKLER SAYFASI YENIDEN TASARIM (kullanici 2026-09-24: "bu sayfanin tasarimi cok
   kotu"; uc secenek maketle soruldu, "VERI ONCE, TEK KOLON" secildi).
   ⚠️ NEDEN: dort KPI karti + hep acik "Simdi yedekle" karti ekranin ust yarisini
      yiyordu, asil icerik (yedek noktalari) en dibe sikisiyordu. */
.yy-durum { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  padding:10px 14px; margin-bottom:14px; border:1px solid var(--border);
  border-radius:var(--radius-sm, 10px); background:var(--surface); font-size:13px; }
.yy-durum__d { display:inline-flex; align-items:baseline; gap:7px; }
.yy-durum__d b { font-size:14px; }
.yy-durum__d small { color:var(--fg-muted); }
/* ⚠️ Durum NOKTASI renk tasir; sayilar notr kalir ki goz bolunmesin. */
.yy-durum__nk { width:8px; height:8px; border-radius:50%; flex:none;
  align-self:center; background:var(--fg-muted); }
.yy-durum__d--ok .yy-durum__nk { background:var(--success, #2e7d32); }
.yy-durum__d--yok .yy-durum__nk { background:var(--danger, #d24535); }
.yy-durum__a { flex:1 1 0; min-width:0; }            /* sayilari saga iter */
.yy-durum__s { display:inline-flex; align-items:center; gap:6px; color:var(--fg-muted); }
.yy-durum__s b { color:var(--fg); font-size:14px; }
.yy-durum__s svg.ic { width:15px; height:15px; opacity:.7; }
.yy-durum__s--can b { color:var(--primary); }
@media (max-width:820px){ .yy-durum__a { display:none; } }

/* ⚠️ "Simdi yedekle" KATLANIR SERIT: kapaliyken tek satir, acilinca yerinde acilir
   (pencere DEGIL — secim kutusunun portal'i ve `.ax-card` kirpmasi yuzunden, belgeli). */
.yy-bas__ac { border:1px solid var(--border); border-radius:var(--radius-sm, 10px);
  margin:0 var(--sp-4, 16px) 12px; background:var(--surface-2); overflow:hidden; }
.yy-bas__ac[open] { background:var(--surface); border-color:var(--primary); }
.yy-bas__dg { list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:9px; padding:10px 14px; font-size:14px; }
.yy-bas__dg::-webkit-details-marker { display:none; }
.yy-bas__dg small { font-weight:400; }
.yy-bas__dg svg.ic { width:16px; height:16px; color:var(--primary); }
.yy-bas__dg::after { content:""; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg); transition:transform .18s; }
.yy-bas__ac[open] > .yy-bas__dg::after { transform:rotate(-135deg); }
.yy-bas__ac[open] > .yy-bas__dg { border-bottom:1px solid var(--border); }
.yy-bas__ac .yy-bas { padding-top:14px; }

/* ⚠️ Ikincil bolum: ayar/yardim kartlari veri kartlariyla YARISMASIN. */
.yy-alt__b { display:flex; align-items:center; gap:8px; margin:26px 0 10px;
  color:var(--fg-muted); font-size:12.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; }
.yy-alt__b svg.ic { width:15px; height:15px; }
.yy-alt > summary .mr-bolum__b { font-size:15px; }

/* ⭐⭐ TEK KONTROL SERIDI (kullanici 2026-09-24: "tek satir icinde olsun ve bu tek
   satirin tasarimini guncelle, boyle duz yazi olmasin"). Her ayar kendi CIPI:
   ikon + etiket ustte, secim altta. Cipler tek satirda akar, dar ekranda sarar. */
.vy-kon { display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:0 0 4px; }
/* ⚠️ PLAN SERIDI TAM GENISLIGE ESIT DAGILIR (kullanici 2026-09-24: "siklik, saat ve tam
   yedek tam ekran esit dagilsinlar"). `auto-fit` + `1fr`: gizli cipler (haftalik/aylik)
   kolon ACMAZ, gorunenler esit boluser. Dar ekranda kendiliginden alt satira iner. */
.vy-plan .vy-kon { display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.vy-plan .vy-kon__s { max-width:100%; width:100%; }
.vy-kon__k { display:flex; flex-direction:column; gap:3px; padding:7px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm, 10px);
  background:var(--surface-2); cursor:pointer; min-width:0; }
.vy-kon__k:hover { border-color:var(--primary); }
.vy-kon__e { display:flex; align-items:center; gap:5px; font-size:11px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--fg-muted); }
.vy-kon__e svg.ic { width:13px; height:13px; }
/* Etiketin parantezli aciklamasi (kullanici 2026-09-24: "Saklanacak nokta (yedekleme
   hakki)"): kucuk harf, buyuk harfe cevrilmez. */
.vy-kon__p { text-transform:none; letter-spacing:0; font-weight:400; }
/* ⚠️ Secim cipin ICINDE: kendi kenarligi ve zemini YOK, yoksa cip icinde ikinci bir
   kutu gorunur. Odak halkasi da cipe tasinir. */
.vy-kon__s { border:0; background:transparent; padding:0; height:22px;
  font-size:14px; font-weight:600; color:var(--fg); max-width:200px; }
.vy-kon__s:focus { outline:none; box-shadow:none; }
.vy-kon__k:focus-within { border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.vy-kon__sayi { width:92px; }
.vy-kon__not { align-self:center; font-size:12px; color:var(--fg-muted); }
/* ⭐⭐ TEMAYA UYGUN ACILIR LISTE. Gercek `<select>` DOM'da kalir ama gorunmez
   (erisilebilirlik icin `display:none` DEGIL — ekran okuyucu ve form icin duruyor). */
.vy-sec__gizli { position:absolute; width:1px; height:1px; opacity:0;
  pointer-events:none; }
.vy-sec__b { display:flex; align-items:center; gap:8px; width:100%;
  padding:0; border:0; background:transparent; color:var(--fg);
  font-size:14px; font-weight:600; text-align:left; cursor:pointer; height:22px; }
.vy-sec__b::after { content:""; margin-left:auto; width:7px; height:7px; flex:none;
  border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg) translateY(-2px); }
.vy-sec__b[aria-expanded="true"]::after { transform:rotate(-135deg) translateY(-2px); }
/* ⚠️ Liste `body`e PORTAL edilir (kart `overflow:hidden` + `backdrop-filter`). */
.vy-sec__l { position:fixed; z-index:120; margin:0; padding:5px; list-style:none;
  max-height:280px; overflow:auto; border:1px solid var(--border);
  border-radius:var(--radius-sm, 10px); background:var(--surface);
  box-shadow:0 12px 32px rgba(0,0,0,.14); }
.vy-sec__o { padding:7px 10px; border-radius:var(--radius-xs, 6px); font-size:13.5px;
  cursor:pointer; white-space:nowrap; }
.vy-sec__o:hover { background:var(--surface-2); }
.vy-sec__o.secili { background:var(--primary); color:#fff; font-weight:600; }
/* ⚠️ HAK/KOTA SERIDI: iki cip Kaydet'e kadar TAM GENISLIGI ESIT paylasir, dugme sagda
   ve ayni hizada (kullanici 2026-09-24). Dar ekranda cipler alt alta, dugme tam
   genislikte. */
.vy-kon--hak { display:grid; grid-template-columns:1fr 1fr auto; align-items:stretch; }
/* ⚠️ Sayi kutusu cipin TAMAMINI kaplar; yoksa `max-width:200px` yuzunden artirma
   oklari cipin ORTASINDA kaliyordu (kullanici 2026-09-24: "oklar kutunun en saginda
   olmali, su an ortada duruyor"). */
.vy-kon--hak .vy-kon__sayi { width:100%; max-width:none; }
.vy-kon--hak .vy-kon__kaydet { align-self:center; margin-left:0; }
@media (max-width:820px){
  .vy-kon--hak { grid-template-columns:1fr; }
  .vy-kon--hak .vy-kon__kaydet { width:100%; justify-content:center; } }
/* ⚠️ KOTA GOSTERGESI: etiket + yuzde ustte, buyuk deger altta, cubuk ve tek satir not. */
.vy-kul { border:1px solid var(--border); border-radius:var(--radius-sm, 10px);
  background:var(--surface-2); padding:12px 14px; margin-bottom:12px; }
.vy-kul--asim { border-color:var(--danger, #d24535); }
.vy-kul__u { display:flex; align-items:center; gap:10px; }
.vy-kul__e { display:flex; align-items:center; gap:6px; font-size:11px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--fg-muted); }
.vy-kul__e svg.ic { width:13px; height:13px; }
.vy-kul__y { margin-left:auto; font-size:13px; font-weight:700; color:var(--fg-muted); }
.vy-kul--asim .vy-kul__y { color:var(--danger, #d24535); }
.vy-kul__d { margin:2px 0 8px; font-size:20px; font-weight:700; }
.vy-kul__t { font-size:14px; font-weight:400; color:var(--fg-muted); }
.vy-kul__n { display:block; margin-top:8px; font-size:12px; color:var(--fg-muted);
  line-height:1.5; }
.vy-kon__kaydet { align-self:center; margin-left:auto; }

/* ⭐⭐ CUMLE BICIMINDE FORM (kullanici 2026-09-24 sectiI). Acilir kutular metnin
   AKISINDA durur; satir yuksekligi metinle ayni kalsin diye kutular kucuk ve
   `vertical-align:baseline` degil, satirin kendisi flex sarmali. */
.vy-cum { margin:0; }
.vy-cum__s { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin:0 0 12px; font-size:14px; line-height:2; }
.vy-cum__in { width:auto; min-width:120px; height:32px; padding:0 30px 0 10px;
  font-size:13.5px; }
.vy-cum__sayi { width:84px; height:32px; padding:0 10px; font-size:13.5px;
  text-align:center; }
.vy-cum__g { color:var(--fg); }
/* ⚠️ Soru isareti: uzun aciklama SATIRA degil IPUCUNA (panelin `?` recetesi). */
.vy-cum__n { display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; border:1px solid var(--border);
  color:var(--fg-muted); font-size:11px; cursor:help; }
.vy-cum__alt { display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.vy-cum__alt .btn { margin-left:auto; }
.vy-cum__kota { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.vy-cum__bar { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.vy-cum__bar > span { font-size:14px; }
.vy-cum__kaydet { margin-left:auto; }
@media (max-width:820px){ .vy-cum__s { line-height:1.7; } }

/* ⚠️ Suzgec satiri: yonetici sayfasindaki `yy-filtre__f` recetesinin aynisi; sekmede
   kartla tablo arasinda durur. */
.vy-suz { margin:14px 0 10px; }
/* ⚠️ Depo ayrisimi TABLO BASLIGININ sag ucunda (yonetici sayfasindaki blogun aynisi).
   Baslik hucresi normalde dar; burada icerigi kadar genisler ve sag uca yaslanir. */
.vy-olc__th { text-align:right; white-space:nowrap; padding-top:6px; padding-bottom:6px; }
.vy-olc__th .yy-grp__olc { margin-left:0; justify-content:flex-end; }

/* ⚠️ Kartin ALT SATIRI: plan / siradaki tur / kota etiketli deger olarak (kullanici
   2026-09-24 "bu yazinin yerini degistir"). Kart flex; satir tam genislik kaplar. */
/* ⚠️⚠️ HIZA (kullanici 2026-09-24: "yedek noktasi saklaniyor ile plan gunluk yazisi
   satiri esit degil"). Sol kolon IKI satir (buyuk sayi + etiket), sag taraf UC satir
   olunca `align-items:center` ikisini kaydiriyordu. Kart IZGARAYA cevrildi: sol kolon
   iki satiri kaplar, plan satiri sag tarafin IKINCI satiridir -> etiketle AYNI banda
   oturur. */
/* ⚠️⚠️ OZGULLUK: `.snap-card` kurali `vm_detail.html` icindeki sayfa ici `<style>`te
   ve o blok style.css'ten SONRA yukleniyor — tek sinifla yazilan kural EZILIYORDU
   (plan satiri yuvalarla ayni satirda kaliyordu, olculdu). Iki sinifla yaziliyor. */
.snap-card.vy-hak { display:grid; grid-template-columns:auto 1fr;
  column-gap:22px; row-gap:8px; align-items:center; }
.snap-card.vy-hak > .snap-card-l { grid-row:1 / span 2; }
.snap-card.vy-hak > .snap-card-r { grid-column:2; grid-row:1; }
.snap-card.vy-hak > .vy-hak__alt { grid-column:2; grid-row:2; margin-top:0; }
@media (max-width:820px){
  .snap-card.vy-hak { grid-template-columns:1fr; }
  .snap-card.vy-hak > .snap-card-l, .snap-card.vy-hak > .snap-card-r,
  .snap-card.vy-hak > .vy-hak__alt { grid-column:1; grid-row:auto; } }
/* ⚠️ AYIRAC CIZGISI KALKTI ve satir SAG KOLONUN ICINDE (kullanici 2026-09-24: "plan ve
   siradaki tur ustteki cizginin ustunde olsun ve o cizgiyi kaldir, bu mavi bar daha
   ince olsun"). Kart bir satir kisaliyor. */
.vy-hak__alt { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:8px; }
.vy-hak__e { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.vy-hak__e small { color:var(--fg-muted); }
.vy-hak__e b { color:var(--fg); }
.vy-hak__e svg.ic { width:15px; height:15px; opacity:.7; }

/* ⚠️ INCE BILGI BARI + NEFES PAYI (kullanici 2026-09-24: "kalin bir bar degil ince
   olsun ve ust alt alanlarla cok yakin olmasin; su an yedek al butonuna fazla yakin"). */
.vy-bar { margin:16px 0 12px; }
/* ⚠️⚠️ Bar ile tablo BIRLESIK gorunuyordu (kullanici 2026-09-24, IKINCI kez: "Depoda
   523.2 MB yazisi altindaki tablo ile yapisik, bosluk yok"). Ilk seferde yalniz
   `.vy-bar` tasiyan bara marj verilmisti; tablonun hemen ustundeki bar `vy-depo` ve
   o sinifi TASIMIYORDU. Marj SINIF DIZISINE degil, BARIN KENDISINE baglanir. */
.vd-yedek .yp-bar--bilgi, .vd-yedek .yp-bar--uyari { margin-bottom:12px; }
.vd-yedek .yp-bar--bilgi + .fw-tbl-wrap, .vd-yedek .yp-bar--uyari + .fw-tbl-wrap,
.vd-yedek .yp-bar--bilgi + .mr-tblwrap, .vd-yedek .yp-bar--uyari + .mr-tblwrap { margin-top:12px; }
.vy-not { margin-top:18px; }

/* ⚠️ Yedek hak karti SNAPSHOT'IN kartiyla ayni sinifi kullanir; tek fark, ustunde
   biraz bosluk ve legend'in sarabilmesi (yedekte legend dort ogeye cikiyor). */
.vy-hak { margin-bottom:12px; }
.vy-hak .snap-legend { flex-wrap:wrap; row-gap:4px; }

/* ⚠️ GRUP KARTININ ICINDE sarmalayicinin KENDI kenarligi kapatilir: kart zaten
   kenarlikli, iki cizgi ust uste binerdi (panel geneli Firewall recetesi disaridan
   kenarlik getirir, burada kartin kendisi o isi yapiyor). */
.yy-gwrap { border:0; border-radius:0; }

/* ⚠️ ORTAK DISK NOTU: nokta tablosunun ustunde tek satir (kullanici 2026-09-24).
   Eskiden ayni deger HER SATIRDA tekrarlaniyordu. */
.yy-dnot { display:flex; align-items:flex-start; gap:8px; margin:0 0 8px;
  color:var(--fg-muted); font-size:12.5px; line-height:1.5; }
.yy-dnot b { color:var(--fg); }
.yy-dnot svg.ic { width:15px; height:15px; flex:none; margin-top:2px; opacity:.7; }
.yy-gtbl .yy-dnot { margin:10px 14px 0; }

/* ⭐⭐ VM DETAY > YEDEKLER SEKMESI YENIDEN DUZEN (kullanici 2026-09-24: "buranin temasi
   cok kotu"; uc duzen maketle soruldu, "ozet + noktalar ustte, ayarlar katlanir" secildi).
   ⚠️ NEDEN: sekme 1840px idi, dort bolum de hep acikti ve operatorun ilk baktigi yer
      olan NOKTA LISTESI en alttaydi. */
.vy-ozet { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  padding:10px 14px; margin:0 0 14px; border:1px solid var(--border);
  border-radius:var(--radius-sm, 10px); background:var(--surface-2); font-size:13px; }
.vy-ozet__d { display:inline-flex; align-items:baseline; gap:7px; }
.vy-ozet__d b { font-size:14px; }
.vy-ozet__d small { color:var(--fg-muted); }
.vy-ozet__nk { width:8px; height:8px; border-radius:50%; flex:none; align-self:center;
  background:var(--fg-muted); }
.vy-ozet__d--ok .vy-ozet__nk { background:var(--success, #2e7d32); }
.vy-ozet__a { flex:1 1 0; min-width:0; }
.vy-ozet__s { display:inline-flex; align-items:center; gap:6px; color:var(--fg-muted); }
.vy-ozet__s b { color:var(--fg); font-size:14px; }
.vy-ozet__s svg.ic { width:15px; height:15px; opacity:.7; }
@media (max-width:820px){ .vy-ozet__a { display:none; } }

/* ⚠️ Katlanir bolum: ayni sekmede UC tane var (simdi yedekle · plan ve kota · bunlari
   bilin). Hepsi VARSAYILAN KAPALI — sekmeye gelen once noktalari gorsun. */
.vy-kat { border:1px solid var(--border); border-radius:var(--radius-sm, 10px);
  background:var(--surface); margin:14px 0 0; overflow:hidden; }
.vy-kat__b { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:11px 14px; font-size:14px; background:var(--surface-2); }
.vy-kat__b::-webkit-details-marker { display:none; }
.vy-kat__b small { font-weight:400; }
.vy-kat__b svg.ic { width:16px; height:16px; color:var(--fg-muted); }
.vy-kat__b::after { content:""; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg); transition:transform .18s; }
.vy-kat[open] > .vy-kat__b::after { transform:rotate(-135deg); }
.vy-kat[open] > .vy-kat__b { border-bottom:1px solid var(--border); }
.vy-kat__g { padding:14px; }
/* ⚠️ Tasinan bloklarin ilk basligi (`nd-sec`) kartin KENDI basligiyla ust uste
   biniyordu; ilk cocuktaki ust bosluk kaldirilir. */
.vy-kat__g > .nd-sec:first-child { margin-top:0; }
.vy-kat--eylem > .vy-kat__b svg.ic { color:var(--primary); }
.vy-kat--eylem[open] { border-color:var(--primary); }

/* ⭐⭐ SUNUCU BASINA ACILIR GRUP (kullanici 2026-09-23 secti): nokta listesi artik
   sunucu basina TEK satir; ortak taban + toplam ozet satirinda, noktalar acilinca. */
/* ⚠️⚠️ KARTIN BEYAZI GRUBUN ALTINDA DEVAM ETMELI (kullanici 2026-09-23, BESINCI tur —
   dogru teshis de kendisinden geldi: "Sunucu kapanmaz barinin altinda bosluk var, ayni
   mantikta Yedek noktalari arka planini uzat"). Grup listesi kartin ALT KENARINA
   DAYANIYORDU; `.ax-card` yuvarlak + `overflow:hidden` oldugu icin KARTIN kendi kirpmasi
   son grubun alt koselerini yiyordu. Cizgiyi kalinlastirmak/katman yapmak bunu COZMEZ —
   kirpan sey disaridaki kart. Alt bosluk = kartin kendi zemini, kirpilacak temas YOK. */
/* ⚠️ Bosluk 10px (kullanici 2026-09-23: "biraz kucult, 15 yerine 10"). Olcut alt
   siniri da 10px — daha kisasi kirpmayi geri getirebilir. */
.yy-gruplar { display:flex; flex-direction:column; gap:10px; margin-bottom:9px; }
/* ⚠️ CIFT BEYAZ OLMAZ (kullanici 2026-09-23: "serit beyaz zemin icinde, zaten arkada
   beyaz, cift beyaz kotu durmus"): kart zemini `--surface`; SERIT `--surface-2` ton
   aliyor, acilinca govde `--surface`e donuyor — hangi alanin baslik oldugu belli olsun. */
/* ⚠️⚠️ KENARLIK COCUKLARIN USTUNE CIZILIR (kullanici 2026-09-23, IKINCI tur:
   "arka plandaki beyazlar mavi cerceveyi kesiyor"). GERCEK kenarlik + `overflow:hidden`
   YETMEZ: kirpma PADDING kutusuna gore yapilir, cocugun zemini kenarligin IC kenarina
   kadar basar ve koselerde egri boyunca 1px'lik cizgiyi yutar (yaricapi cocuga vermek
   de yetmedi — antialiasing ayni pikseli paylasiyor). Cozum: kenarlik `::after`
   katmani, TUM cocuklarin USTUNDE; hicbir zemin onu ortemez. */
.yy-grp { position:relative; border:0; border-radius:var(--radius-sm, 10px);
  background:var(--surface); overflow:hidden; }
.yy-grp::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  border:1px solid var(--border); border-radius:inherit; }
.yy-grp > summary { background:var(--surface-2); }
/* ⚠️ CIZGI INCE KALIR: kalinlastirma (2px) denendi, kullanici geri aldirdi —
   "daha kotu olmus, kalinlasmis". Kesinti sebebi kalinlik degildi (bkz. `.yy-gruplar`). */
.yy-grp[open]::after { border-color:var(--primary); }
.yy-grp > summary { list-style:none; cursor:pointer; padding:12px 14px;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px;
  transition:background .14s; }
.yy-grp > summary::-webkit-details-marker { display:none; }
.yy-grp > summary:hover { background:var(--surface-3); }
/* ⚠️ Chevron: `set-det` karti gibi sag uca, acikken doner. */
.yy-grp > summary::after { content:""; margin-left:14px; width:9px; height:9px; flex:none;
  border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted);
  transform:rotate(45deg); transition:transform .18s; }
.yy-grp[open] > summary::after { transform:rotate(-135deg); }
.yy-grp[open] > summary { border-bottom:1px solid var(--border); }
.yy-grp__ik { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none; border-radius:var(--radius-xs);
  background:var(--surface-2); color:var(--fg-muted); }
.yy-grp__ik svg.ic { width:16px; height:16px; }
.yy-grp__ad { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
/* ⚠️ ADRES ve ALT SATIR GORUNUR (kullanici 2026-09-23: "vm adi ve altindaki yazi pek
   gorunur degil"): adres 15px/700, alt satir `faint` degil normal metin tonunda. */
.yy-grp__ad > a { font-weight:700; font-size:15px; }
.yy-grp__alt { font-size:12.5px; color:var(--fg-muted); }
.yy-grp__alt b { color:var(--fg); }
/* ⚠️ ETIKETLI DEGER (panelin kendi dili): sag uca, chevron'dan ONCE; dar ekranda
   kendi satirina duser (marj `auto` ile itiliyor, sabit genislik YOK). */
.yy-grp__olc { margin-left:auto; display:flex; align-items:center; gap:6px 10px;
  flex-wrap:wrap; justify-content:flex-end; text-align:end; }
.yy-grp__d { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.yy-grp__d small { font-size:10.5px; letter-spacing:.02em; color:var(--fg-muted);
  text-transform:uppercase; }
.yy-grp__d b { font-size:13.5px; }
/* ⚠️ Toplam VURGULU: operatorun aradigi sayi o (esitligin sag tarafi). */
.yy-grp__d--top b { font-size:15px; }
.yy-grp__art { color:var(--fg-muted); font-size:13px; align-self:flex-end;
  padding-bottom:1px; }
@media (max-width:820px){
  .yy-grp__olc { flex-basis:100%; margin-left:42px; justify-content:flex-start; } }
/* ⚠️ ACIK GRUBUN MAVI CERCEVESI ALT KOSELERDE KESIK GORUNUYORDU (kullanici
   2026-09-23): `.mr-tablo`nun KENDI `overflow:hidden` kutusu KARE ve zemini kenarligin
   ic kenarini ortuyordu. Son cocuga AYNI alt yaricap verilir — zemin koseyi birakir. */
/* ⚠️ Tablo alt koselere DEGMEZ (ustteki `padding-bottom`), o yuzden alt yaricap
   verilmez — duz biten bir tablo + altinda bosluk. */
.yy-grp .mr-tablo { margin:0; }

/* ⭐⭐ "DEPODA NE OLUYOR" ORNEK TABLOSU (kullanici 2026-09-24). Sol kolon olayi ve tek
   cumlelik aciklamasini tasir, sayi kolonlari SAGA yasli ve dar; son kolon ("Depoda")
   esitligin sag tarafi oldugu icin vurgulu. ⚠️ Dar ekranda `mr-tblwrap` kaydirir —
   sayilar alt alta dusurulmez, cunku okunmasi gereken sey SATIRIN KENDISI. */
/* ⚠️ Sol kolona GENISLIK verilir: `auto` yerleşimde aciklama metni dar sarilip
   hucre genis kalıyordu ve olay ile sayilar arasinda ~700px BOSLUK olusuyordu
   (goruntude yakalandi). Sayi kolonlari icerigi kadar (`width:1%` + nowrap). */
.yy-dtbl { table-layout:auto; }
.yy-dtbl__o { width:42%; min-width:230px; }
.yy-dtbl__o b { display:block; font-size:13.5px; }
.yy-dtbl__o small { display:block; margin-top:3px; color:var(--fg-muted);
  font-size:12px; line-height:1.45; }
.yy-dtbl__s { text-align:right; white-space:nowrap; width:1%; }
.yy-dtbl__t { font-weight:700; color:var(--fg);
  box-shadow:inset 1px 0 0 var(--border); }
.yy-dtbl tbody tr:last-child td { background:var(--surface-2); }
/* ⚠️⚠️ Tablo ile altindaki kural kartlari BITISIKTI (kullanici 2026-09-24). Tek sinifla
   yazilan kural ISLEMEDI: `.mr-blok .mr-tablo { margin:0 }` IKI sinif oldugu icin daha
   ozgul. Kural `.mr-blok` ile yazilir — olculdu (0.0px -> 16px). */
.mr-blok .yy-dtbl__w { margin-bottom:16px; }

/* ⭐ FELAKET KURTARMA ADIMLARI (kullanici 2026-09-23: "orneklemeyle anlat").
   Numarali adim + kopyalanabilir komut blogu + aciklama. Komut blogu KAYAR
   (uzun SFTP satirlari sayfayi yatay tasirmasin). */
.yy-fk__ger { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px; margin:var(--sp-3) 0; }
@media (max-width:900px){ .yy-fk__ger { grid-template-columns:1fr; } }
.yy-fk { list-style:none; counter-reset:fk; margin:var(--sp-4) 0; padding:0;
  display:flex; flex-direction:column; gap:var(--sp-3); }
.yy-fk__a { counter-increment:fk; position:relative; padding-left:38px; }
.yy-fk__a::before { content:counter(fk); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700;
  background:var(--primary-soft); color:var(--primary); }
.yy-fk__b { font-weight:600; margin-bottom:6px; }
.yy-fk__k { margin:0 0 6px; padding:10px 12px; border-radius:var(--radius-xs);
  background:var(--surface-2); border:1px solid var(--border);
  overflow-x:auto; font-size:12.5px; line-height:1.55; }
.yy-fk__k code { font-family:var(--mono); white-space:pre; }
.yy-fk__n { font-size:13px; color:var(--fg-muted); }
.yy-fk__n code { font-family:var(--mono); font-size:12px;
  background:var(--surface-2); padding:1px 5px; border-radius:4px; }

/* ⭐ AYAR KARTININ KAPANIS SATIRI (kullanici 2026-09-23: "ayarlar ekrani da acilir
   kapanir olsun"). "Kaydet" bashktan inmek ZORUNDAYDI: `<summary>` icindeki dugmeye
   tiklamak karti KATLAR ve `<form>` bir `<summary>`yi saramaz. Satir, kaydedilen
   ayarlarin hemen altinda ve neyi kaydettigini YAZIYOR. */
.yy-kaydet__satir { display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid var(--border); }

/* ⭐ Sunucularda yedekleme durumu tablosu (kullanici 2026-09-23): kotasi asan satirda
   kullanim KIRMIZI — VM listesindeki `vc-quota__asim` ile ayni dil, ayri bilesen adi
   (durum sinifina GENEL ad verilmez kurali: kendi onekiyle `yy-`). */
.yy-asim { color:var(--danger); font-weight:700; }

/* ⭐ ENVANTER TABLOSU ZENGINLESTIRILDI (kullanici 2026-09-23: "cok sade, daha iyi
   gorunsun"). Uc is birden: (1) ust ozet cipleri — SUSLEME DEGIL, her biri o suzgece
   GOTURUR; (2) satir sol serit rengi (proxy kartlarindaki dil) — "acik mi" sorusu goz
   taramasiyla cevaplanir; (3) sunucu hucresi ikon cipi + adres + etiket. */
.yy-hak__ozet { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 var(--sp-4); }
.yy-hak__cip { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:8px 14px 8px 8px; border:1px solid var(--border);
  border-radius:var(--radius-pill); background:var(--surface);
  color:var(--fg); font-size:13px; transition:border-color .14s, background .14s; }
.yy-hak__cip:hover { border-color:var(--primary); background:var(--surface-2); }
.yy-hak__cip.aktif { border-color:var(--primary); background:var(--primary-soft); }
.yy-hak__cip b { font-size:15px; }
.yy-hak__cipik { display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex:none; }
.yy-hak__cipik svg.ic { width:14px; height:14px; }
.yy-hak__cipik--success { background:var(--ok-soft); color:var(--ok); }
.yy-hak__cipik--neutral { background:var(--surface-3); color:var(--fg-muted); }
.yy-hak__cipik--info { background:var(--primary-soft); color:var(--primary); }
.yy-hak__cipik--warning { background:var(--warn-soft); color:var(--warn); }

/* ⚠️ Serit `border-left` DEGIL `box-shadow:inset`: `border` hucre kenarligiyla
   catisip satiri 1px kaydiriyordu (tablo reçetesinde hucre kenarliklari var). */
.yy-hak__s > td:first-child { box-shadow:inset 3px 0 0 0 transparent; }
.yy-hak__s--acik > td:first-child { box-shadow:inset 3px 0 0 0 var(--ok); }
.yy-hak__s--kapali > td:first-child { box-shadow:inset 3px 0 0 0 var(--border); }
.yy-hak__sun { display:flex; align-items:center; gap:10px; min-width:0; }
.yy-hak__ik { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:none; border-radius:var(--radius-xs);
  background:var(--surface-2); color:var(--fg-muted); }
.yy-hak__ik svg.ic { width:15px; height:15px; }
.yy-hak__ad { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.yy-hak__esxi { font-size:12.5px; }
.yy-hak__n { white-space:nowrap; font-size:12.5px; color:var(--fg-muted); }
.yy-hak__n b { font-size:15px; color:var(--fg); }
.yy-hak__plan { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.yy-hak__plan svg.ic { width:14px; height:14px; color:var(--fg-muted); flex:none; }
/* ⚠️ "Plan yok" bir HATA DEGIL (elle yedek alinabilir) — kirmizi/turuncu rozet degil,
   KESIKLI notr cip: "eksik ama sorun degil" dilini panelde bu tasir. */
.yy-hak__plan--yok { color:var(--fg-muted); border:1px dashed var(--border);
  border-radius:var(--radius-pill); padding:2px 10px; font-size:12.5px; }
.yy-veri { display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.3; }
.yy-veri b { font-size:13px; }
.yy-kim { display:block; }

/* Ayarlar: uc kolon (aciklamalar `?` ipucunda) */
.yy-ayar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-5); }
/* ⚠️ Tek ayar kaldi (kullanici 2026-09-21): alan dar, aciklama bari genis */
.yy-ayar--tek { grid-template-columns:240px 1fr; align-items:start; }
.yy-ayar--tek .yp-bar { margin-top:0; }

/* ===== AYAR KUTULARI (kullanici 2026-09-22, 5. tur) =====
   ⚠️⚠️ TAM GENISLIK SATIR DENENDI VE BIRAKILDI: kullanici "es zamanli tur ile musteri
   arasinda fazla bosluk var" dedi — kart ~1150px, aciklama solda kontrol en sagda durunca
   ORTADA ~500px bosluk kaliyordu. Iki ayar artik YAN YANA iki kutu: genislik bosluga
   degil icerige gidiyor ve kart kisaliyor. Uzun anlatim yine `?` ipucunda. */
.yy-satirlar { padding-top:var(--sp-2); }
.yy-kutlar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-4); margin:0 0 var(--sp-5); }
.yy-kut { display:flex; flex-direction:column; gap:4px; padding:14px 16px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.yy-kut__b { font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; }
.yy-kut__b svg.ic { width:17px; height:17px; color:var(--fg-muted); }
.yy-kut__a { font-size:12.5px; line-height:1.5; color:var(--fg-muted); }
/* Kontrol kutunun ALTINDA, tam genisligi kullanir — iki kutunun kontrolleri ayni hizada
   bassin diye `margin-top:auto` (aciklamalar farkli uzunlukta olabilir). */
.yy-kut__k { margin-top:auto; padding-top:10px; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap; }
/* ⚠️⚠️ GENISLIK, BIRIM ROZETININ DOLGUSUNA GORE: taban `.lk-in input` SAGDAN 96px dolgu
   alir (rozet mutlak konumlu). Girdiyi 90px'e daraltmak rakama 2px birakti ve kutu BOS
   gorundu (deger yerindeydi — ekran goruntusunde yakalandi, sonra olculdu). */
.yy-kut__k .lk-in { margin:0; width:170px; flex:none; }
/* Segment kutunun icinde: taban `.seg`in 16px alt boslugu YOK */
.yy-seg { margin:0; flex:1 1 auto; min-width:0; }
@media (max-width:900px){ .yy-kutlar { grid-template-columns:1fr; } }

/* ===== ISTISNALAR: CIP LISTESI (kullanici 2026-09-22: "hos durmuyor") =====
   ⚠️ Her sunucu tam genislikte bir kutuydu ve ekleme formu uc alani kartin ucuna kadar
   geriyordu. Sunucular artik CIP, ekleme de DAR bir satir. */
/* ⚠️ Baslik DUZ YAZI DEGIL (kullanici 2026-09-22: "cok duz yazi, degistir"): ustteki iki
   ayar kutusuyla ayni dil — ikon cipi + baslik + sayi rozeti + YUVARLAK ipucu dugmesi. */
.yy-ist__ust { display:flex; align-items:flex-start; gap:12px; margin:0 0 12px; }
.yy-ist__ik { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:9px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--fg-muted); }
.yy-ist__ik svg.ic { width:17px; height:17px; }
.yy-ist__m { display:flex; flex-direction:column; gap:3px; min-width:0; }
.yy-ist__t { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; }
.yy-ist__n { font-size:12.5px; line-height:1.5; color:var(--fg-muted); }
/* Yuvarlak ipucu dugmesi — satir icinde kaybolan bir "?" degil */
.yy-ipucu { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; padding:0; border:1px solid var(--border); border-radius:50%;
  background:var(--surface); color:var(--fg-muted); font-size:11px; font-weight:700;
  line-height:1; cursor:help; }
.yy-ipucu:hover { color:var(--ax-accent); border-color:var(--ax-accent); }
/* ⚠️ CIP DENENDI VE BIRAKILDI (kullanici 2026-09-22: "Istisnalar ise tablo seklinde
   olsun"). Tablo, sayfanin KENDI `ax-table mr-tbl` recetesini kullanir — "Yedek
   noktalari" ile ayni dil; ESXi yeniden GORUNUR bir sutun (baslik "ESXi", hucrede
   `IP (etiket)`), yani adlandirma kurali dogal olarak saglanir. */
.yy-ist__t2 { margin:0; }
.yy-ist__t2 td { vertical-align:middle; }
.yy-ist__ad { font-weight:600; color:var(--primary); text-decoration:none; }
.yy-ist__ad:hover { text-decoration:underline; }
.yy-ist__t2 td small.faint { display:block; font-size:12px; }
.yy-ist__yok { margin:0 0 12px; }
/* Kaydet bolum BASLIGINDA (kullanici 2026-09-22): baslik cubugu 13px dolguda,
   dugme de ona gore kucuk. */
.yy-kaydet { padding:7px 14px; font-size:13px; }
/* Secim yokken "Istisnaya ekle" KAPALI ama yine birincil renkte — soluk ve tiklanamaz
   oldugu anlasilsin (gizli girdide `required` tarayicida dogrulanmaz, kapi bu dugme). */
.yy-kaydet:disabled { opacity:.5; cursor:not-allowed; }
/* "Nerede?" notu kartin EN ALTINDA, ince */
.yy-nerede { margin:var(--sp-4) 0 0; }

/* ===== Musteri izni ISTISNALARI (kullanici 2026-09-22) =====
   Ayar kartinin DEVAMI gibi durur: ustunde ince ayirici, ayni dolgu. */
.yy-ist { border-top:1px solid var(--border); }
/* ⚠️ `.yy-ist__b` (eski kendi baslik satiri) KALKTI: bolum artik sayfanin kendi `nd-sec`
   basligini kullaniyor (kullanici 2026-09-22 tasarim turu) — iki farkli baslik dili
   ayni kartta durmasin. */
/* ===== ARANABILIR SECIM KUTUSU (kullanici 2026-09-22: "sunucu secme yerin ICINDE
   arama olmali") — iki ayri kontrol (arama kutusu + <select>) TEK kutuya indi.
   ⚠️ Blok TABLONUN USTUNDE duruyor (kullanici istedi). */
/* ⚠️ Kutu TAM GENISLIK, "Istisnaya ekle" EN SAGDA (kullanici 2026-09-22). Once kutu
   360px sabitti ve dugme hemen yanindaydi; genis kartta ikisi sola yigiliyordu. */
.yy-ist__ekle { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 12px; }
.yy-ist__ekle #yy-cb-ekle { margin-left:auto; flex:none; }
.yy-ist__ekle #yy-isayac { flex-basis:100%; margin:0; }
/* ⚠️⚠️ `flex` TABANDA VERILMEZ: «Simdi yedekle» formu DIKEY bir flex kabi
   (`flex-direction:column`) ve orada `flex-basis:320px` ANA EKSENE, yani YUKSEKLIGE
   uygulanip kutuyu 320px uzatiyordu — ekranda kocaman bir bosluk (goruntude yakalandi).
   Esneme yalnizca YATAY satirda (istisna ekleme) verilir. */
.yy-cb { position:relative; min-width:0; }
.yy-ist__ekle .yy-cb { flex:1 1 320px; }
.yy-cb__kutu { display:flex; align-items:center; gap:8px; padding:0 8px 0 11px;
  border:1px solid var(--border); border-radius:var(--radius-sm, 10px);
  background:var(--surface); transition:border-color .14s, box-shadow .14s; }
/* ⚠️ MAVI CERCEVE YOK (kullanici 2026-09-22: "tiklayinca kutucuk mavi renk oluyor,
   bu olmasin"). Odak yine GORUNUR ama NOTR: cerceve koyulasir, mavi halka ve mavi
   kenarlik kalkti. Secili durumda da renkli cerceve verilmiyor. */
.yy-cb__kutu:focus-within { border-color:var(--fg-muted); }
.yy-cb__ik { display:inline-flex; color:var(--fg-muted); flex:none; }
.yy-cb__ik svg.ic { width:16px; height:16px; }
/* Girdi KUTUNUN kendisi gibi davranir: kendi cercevesi YOK (cift cerceve olmasin) */
.yy-cb__in { flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent;
  padding:9px 0; font:inherit; font-size:13px; color:var(--fg); }
/* ⚠️⚠️ MAVI HALKAYI ASIL IC GIRDI URETIYORDU (kullanici 2026-09-22: "tiklayinca kutucuk
   mavi cerceve oluyor"): dis kutunun kenarligini notrallestirmek YETMEDI — panelin genel
   `input:focus` recetesi ice `box-shadow:0 0 0 3px rgba(42,95,204,.18)` basiyor ve
   `border:0` onu ENGELLEMIYOR (golge cizilmeye devam eder). Olculdu: kutu gri
   (rgb(83,94,116)) ama girdi mavi (rgb(42,95,204)) + mavi golge. Odak gostergesi DIS
   kutunun kenarligidir; ic golge/anahat kapatilir. */
.yy-cb .yy-cb__in:focus, .yy-cb .yy-cb__in:focus-visible {
  box-shadow:none; outline:none; border-color:transparent; }
.yy-cb__tmz { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:22px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--surface-2); color:var(--fg-muted); }
.yy-cb__tmz svg.ic { width:13px; height:13px; }
.yy-cb__tmz:hover { color:var(--fg); }
/* Acilir liste: kutunun ALTINDA, kendi kaydirmasiyla */
/* ⚠️⚠️ `fixed` — `absolute` DEGIL: `section.ax-card` `overflow:hidden` tasiyor ve mutlak
   konumlu liste kartin alt kenarinda KESILIYORDU (kullanici 2026-09-22: "acilan pencere
   ekranda gomulu kaliyor"; olculdu: 125px kirpik). `fixed` hicbir ustun `overflow`una
   takilmaz. Konumu (left/top/width/max-height) JS yazar ve kaydirmada yeniler. */
.yy-cb__liste { position:fixed; z-index:120; margin:0; padding:4px; list-style:none;
  max-height:280px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm, 10px); box-shadow:0 10px 28px rgba(0,0,0,.14); }
/* ⚠️ ESXi basligi bir SERIT (kullanici 2026-09-22: "esxi isimlerini bir serit icine al
   ki belli olsunlar"): duz metinken sunucu satirlarindan ayrilmiyordu. Negatif yan
   marjlar listenin 4px dolgusunu asip seridi KENARDAN KENARA goturur. */
.yy-cb__g { margin:4px -4px; padding:6px 14px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--fg-muted);
  background:var(--surface-2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); position:sticky; top:-4px; }
.yy-cb__g:first-child { margin-top:-4px; border-top:0; }
.yy-cb__o { display:flex; align-items:baseline; gap:8px; padding:7px 10px;
  border-radius:7px; cursor:pointer; }
.yy-cb__o:hover, .yy-cb__o.is-etkin { background:var(--surface-2); }
.yy-cb__o.is-pasif { cursor:default; opacity:.55; }
.yy-cb__o.is-pasif:hover { background:transparent; }
.yy-cb__oad { font-size:13px; font-weight:600; }
.yy-cb__oet { font-size:12px; color:var(--fg-muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.yy-cb__oz { margin-left:auto; font-size:11.5px; color:var(--fg-muted); white-space:nowrap; }
.yy-cb__bos { padding:10px; font-size:13px; color:var(--fg-muted); }
/* ⚠️ Sayim LISTENIN ICINDE: form satirinda dururken liste acilinca metin doluyor,
   satir buyuyor ve ALTTAKI TABLO KAYIYORDU (kullanici 2026-09-22). Acilir liste mutlak
   konumlu oldugu icin burada hicbir sey kaydirmaz. */
.yy-cb__alt { position:sticky; bottom:-4px; margin:4px -4px -4px; padding:7px 14px;
  font-size:12px; color:var(--fg-muted); background:var(--surface-2);
  border-top:1px solid var(--border); }
/* ⚠️ Dar ekranda satir kirilir: dugme kendi satirinda TAM GENISLIK (saga yaslamak
   kirilan satirda anlamsiz). */
@media (max-width:760px){
  .yy-ist__ekle #yy-cb-ekle { margin-left:0; flex:1 1 100%; justify-content:center; } }

/* ===== VM > Yedekler: hak kapisi + tam/artan secimi (kullanici 2026-09-21) ===== */
/* ⭐⭐ KAPALI DURUM = FIREWALL'IN MUSTERI BOS DURUMU (kullanici 2026-09-24, iki ret
   sonrasi: "kullaniciya hos gorunmeli"). Kesikli kutu ve turuncu uyari seridi
   "bir sey bozuk" diyordu; burasi hata degil, henuz acilmamis bir ozellik. Kural
   blogu `.fw-bos`un kendisi (oge iki sinifi da tasir); burada yalniz alt marj.
   ⚠️ Eylem seridine DUGME konmaz (kullanici kaldirtti; ayrica `.fw-bos svg.ic`
   icindeki her ikonu 52px yapar). */
.vy-bos { margin:0 0 var(--sp-4); }
/* ⚠️ SEKMENIN USTUNDEKI UYARI KUTULARI (izin yok · hazir degil · engel · tur suruyor)
   ALTTAKI KARTLA YAPISIKTI (kullanici 2026-09-24: "Yedek turu suruyor bari altindaki yer
   ile birlesmis"). Taban `.ax-alert` alt marj tasimaz (snapshot sekmesi ayni sorunu
   `.snap-dio-w` ile cozmustu); burada sekmenin dogrudan cocugu olan her kutuya verilir —
   art arda iki kutu da birbirinden ayrilir. */
.vd-yedek > .ax-alert { margin-bottom:12px; }
/* Hak formu kapali halde de "Yedek plani ve kota" kartinin icinde: kartin kendi
   dolgusu var, formun alt marji gereksiz. */
.vy-kat__g .vy-hakver { margin:0; }
/* Hak: girdi degil GOSTERGE (hak yoneticinin alani) */
.vy-hak__d { display:inline-flex; align-items:baseline; gap:5px; font-size:13px; }
.vy-hak__d b { font-size:17px; }
/* Hak 0 iken yoneticinin "hak ver" formu — kapali uyari seridinin hemen altinda durur.
   ⚠️ Ic yerlesim ARTIK KENDI SINIFLARINDA DEGIL: acik haldeki kota seridiyle ayni
   `.vy-kon--hak` izgarasini kullanir (kullanici 2026-09-24: "bu tasarim eski kalmis").
   Eski `.vy-hakver__g` / `__alt` kurallari kaldirildi. */
.vy-hakver { margin:0 0 var(--sp-4); }
.vy-simdi2 { display:flex; flex-direction:column; gap:10px; margin:0 0 var(--sp-5); }
.vy-turler { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:760px) { .vy-turler { grid-template-columns:1fr; } }
@media (max-width:900px) { .yy-ayar { grid-template-columns:1fr; } }

/* "Nasil calisir" kartindaki engel listesi */
/* ⚠️ Panelde `ul` varsayilan imsiz: madde imi ACIKCA verilir, yoksa satirlar
   birbirine karisiyor (ekran goruntusunde yakalandi). */
.yy-engel { margin:8px 0 6px; padding-inline-start:20px; font-size:12.5px; line-height:1.6;
  color:var(--fg-muted); list-style:disc outside; }
.yy-engel li { margin:2px 0; }

/* ================= TEK SEFERLIK SIR KARTI (root parolasi) =========================
   Kullanici 2026-09-21: "bu alani da sevmedim". Once parola, aciklama ve dugme TEK bir
   uyari satirina sikismisti. Simdi: baslik satiri + parolanin KENDI kutusu + aciklama. */
.yp-sir { margin:0 0 var(--sp-5); padding:14px 16px; display:flex; flex-direction:column;
  gap:12px; border-color:var(--ax-warning-500);
  background:color-mix(in srgb, var(--ax-warning-500) 6%, var(--surface)); }
.yp-sir__b { display:flex; align-items:center; gap:10px; }
.yp-sir__ik { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:9px; color:#1b1300;
  background:var(--ax-warning-500); }
.yp-sir__ik svg.ic { width:17px; height:17px; }
.yp-sir__ad { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.yp-sir__ad strong { font-size:14.5px; }
.yp-sir__ad .faint { font-size:12px; }
.yp-sir__rz { margin-inline-start:auto; flex:none; }
/* Parola kutusu: buyuk, secilebilir, kopyalanabilir */
.yp-sir__k { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.yp-sir__k code { flex:1; min-width:220px; padding:10px 14px; border-radius:9px;
  border:1px dashed var(--border); background:var(--surface);
  font-size:17px; letter-spacing:.02em; user-select:all; overflow-wrap:anywhere; }
/* ⚠️⚠️ SINIF ADI `ok` OLAMAZ (kullanici bulgusu 2026-09-21: "kopyalandi bozuk, yamuk"):
   panelde `.ok` GENEL BIR BILDIRIM sinifi (`.err,.ok,.info-box { padding:12px 16px;
   align-items:flex-start; ... }`) — dugmeye eklenince dolguyu, hizayi ve METIN RENGINI
   eziyordu: ikon ve yazi 6-8px asagi kayiyor, yazi koyu renge donuyordu. Olculdu:
   94x32 -> 135x34, ikon merkezi +8px.
   ⚠️ Genislik de degismesin: iki metin ayni kutuda durur (zipzama yok). */
.yp-btn--kopya { min-width:126px; }
.yp-btn--kopya.yp-btn--ok { background:var(--ax-success-500);
  border-color:var(--ax-success-500); color:#fff; }
.yp-btn--kopya.yp-btn--ok:hover { color:#fff; }
.yp-sir__a { display:flex; gap:8px; align-items:flex-start; margin:0; font-size:12.5px;
  line-height:1.55; color:var(--fg-muted); }
.yp-sir__a svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }
.yp-sir__a b { color:var(--fg); }

/* ================= YENIDEN KUR: HEDEF KARTI =======================================
   Kullanici 2026-09-21: "45.9.28.84 · 45.9.28.254 (BG-1) alanini sevmedim" — iki adres
   bir noktayla yan yanaydi, hangisinin ne oldugu belirsizdi. */
.yp-hedef { display:flex; align-items:center; gap:11px; padding:12px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
  margin:0 0 var(--sp-4); }
.yp-hedef__ik { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:9px; background:var(--surface);
  border:1px solid var(--border); color:var(--fg-muted); }
.yp-hedef__ik svg.ic { width:17px; height:17px; }
.yp-hedef__m { display:flex; flex-direction:column; min-width:0; gap:2px; }
.yp-hedef__m strong { font-size:17px; }
.yp-hedef__alt { font-size:12px; color:var(--fg-muted); }
.yp-hedef__alt b { color:var(--fg); font-weight:600; }
.yp-hedef__uyari { display:flex; gap:8px; align-items:flex-start; margin:0 0 var(--sp-4);
  font-size:12.5px; line-height:1.5; color:var(--fg-muted); }
.yp-hedef__uyari svg.ic { width:14px; height:14px; flex:none; margin-top:2px;
  color:var(--warn); }
.yp-hedef__uyari b { color:var(--fg); }

/* ================= KUR PENCERESI: adim rozetleri + ozet seridi ==================== */
/* ⚠️ HIZA (kullanici 2026-09-21: "1 2 3 4 numara ve yazilari kaymis, esit degil"):
   rozet `vertical-align` ile hizalaniyordu ve yaziya gore oynuyordu. Etiketin KENDISI
   flex satiri olunca rozet ve metin ORTAK eksende hizalanir. */
.lk-ctrl-t:has(.yp-adim) { display:flex; align-items:center; gap:6px; }
.yp-adim { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:11px; font-weight:700;
  font-style:normal; line-height:1; }
.yp-ozet { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:var(--sp-4);
  padding:10px 12px; border-radius:9px; background:var(--surface-2); font-size:12.5px;
  color:var(--fg-muted); }
/* ⚠️ `baseline` hizasi ikonu kaydiriyordu (kullanici: "sistem VM'i ve ikonu da kaymis"):
   serit tek eksende hizalanir, rakam ile birim arasi baseline YALNIZ metinde kalir. */
.yp-ozet > span { display:inline-flex; align-items:center; gap:4px; }
.yp-ozet b { font-size:14.5px; color:var(--fg); line-height:1; }
.yp-ozet__et { margin-inline-start:auto; gap:5px; }
.yp-ozet__et svg.ic { width:14px; height:14px; display:block; }

/* ================= PROXY LISTESI: TABLO DEGIL KART (kullanici 2026-09-20) ==============
   "Bu tabloyu degistirelim, pek anlasilir degil." 8 kolonlu tablo satir basina 6 rozet
   tasiyordu; oysa satir sayisi ESXi sayisi kadar (elde 3). Kart dili panelin kendi
   yuzeylerinden (`ax-card` + rozetler), yeni gorsel dil ICAT EDILMEDI.
   ⚠️ `auto-fill`: kart sayisi DEGISKEN (ESXi sayisi). `.yd-nav`daki sabit 3 kolon kurali
   burada gecerli DEGIL — orada bolum sayisi tam uctur, burada degisir. */
.yp-liste { padding-top:var(--sp-4); }
/* ⚠️⚠️ SABIT UC KOLON (kullanici 2026-09-21: "3 kart yanyana olsun ve ekrana tam sigsin,
   ortali hizali, her satirda 3 kart"). `auto-fill` genislige gore 2-4 arasi degisiyordu;
   kullanici SABIT uc istedi. Kartlar esit genislikte ve ayni satirda esit yukseklikte
   (grid `stretch`). Dar ekranda 3 kart fiziken sigmaz -> 2, sonra 1 kolona iner. */
.yp-kartlar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-4); align-items:stretch; }
@media (max-width:1250px) { .yp-kartlar { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:820px)  { .yp-kartlar { grid-template-columns:1fr; } }
.yp-k { display:flex; flex-direction:column; gap:10px; min-width:0;
  border:1px solid var(--border); border-left:3px solid var(--border);
  border-radius:12px; padding:14px 16px; background:var(--surface); }
/* Sol serit = durum (tek bakista "hangisi sorunlu") */
.yp-k--ok { border-left-color:var(--ax-success-500); }
.yp-k--warn, .yp-k--yok { border-left-color:var(--ax-warning-500); }
.yp-k--err { border-left-color:var(--ax-danger-500); }
.yp-k--info { border-left-color:var(--primary); }
.yp-k--silinmis { opacity:.55; }
.yp-k__b { display:flex; align-items:center; gap:10px; min-width:0; }
.yp-k__ik { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:9px; background:var(--surface-2); color:var(--fg-muted); }
.yp-k__ik svg.ic { width:16px; height:16px; }
.yp-k__ad { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.yp-k__ad strong { font-size:15px; font-weight:700; }
.yp-k__ad .faint { font-size:12px; }
.yp-k__d { margin-inline-start:auto; flex:none; }
/* Adres satiri: sayfanin en cok aranan bilgisi -> buyuk ve monospace */
.yp-k__ip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:17px;
  font-weight:600; }
.yp-k__ip .mono { font-size:17px; }
.yp-k__hata, .yp-k__uyari { display:flex; gap:8px; align-items:flex-start; margin:0;
  font-size:12.5px; line-height:1.5; color:var(--fg-muted); }
.yp-k__hata svg.ic, .yp-k__uyari svg.ic { width:15px; height:15px; flex:none; margin-top:2px;
  color:var(--warn); }
.yp-k__hata { color:var(--danger); }
/* ⭐ KONTROL LISTESI (kullanici secimi 2026-09-21): kart "hangi kosul saglanmis"i yazar.
   Once etiket/deger satirlariydi; simdi her satirin basinda ✓/⚠/✗ ikonu var ve SONUC
   cumlesi kartin en okunur satiri. */
.yp-k__cumle { margin:0; font-size:13.5px; font-weight:650; line-height:1.4; }
.yp-k__cumle.iyi { color:var(--ax-success-600, var(--ax-success-500)); }
.yp-k__cumle.kotu { color:var(--danger); }
.yp-ksl { list-style:none; margin:0; padding:10px 0 0; display:flex; flex-direction:column;
  gap:6px; border-top:1px solid var(--border); }
.yp-ks { display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px;
  line-height:1.35; }
.yp-ks__i { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; border-radius:50%; }
.yp-ks__i svg.ic { width:11px; height:11px; }
.yp-ks--ok .yp-ks__i { background:color-mix(in srgb, var(--ax-success-500) 16%, transparent);
  color:var(--ax-success-600, var(--ax-success-500)); }
.yp-ks--uyari .yp-ks__i { background:color-mix(in srgb, var(--ax-warning-500) 18%, transparent);
  color:var(--warn); }
.yp-ks--yok .yp-ks__i { background:color-mix(in srgb, var(--ax-danger-500) 15%, transparent);
  color:var(--danger); }
.yp-ks--bekle .yp-ks__i { background:var(--surface-2); color:var(--fg-muted); }
.yp-ks__a { color:var(--fg); min-width:0; }
.yp-ks--yok .yp-ks__a { font-weight:650; }
/* ⚠️ Deger SAGA yasli: uc kartin degerleri ayni dikey hatta gelince liste "okunur" oluyor */
/* ⚠️ Daktilo yazisi YALNIZ teknik degerde (`mono` bayragi): cumle uzunlugundaki degerler
   monospace'te okunmuyordu (ekran goruntusunde yakalandi). */
.yp-ks__d { margin-inline-start:auto; text-align:end; color:var(--fg-muted);
  font-size:12px; overflow-wrap:anywhere; }
.yp-ks__d.mono { font-family:var(--font-mono, monospace); }
.yp-ks__y { white-space:nowrap; }
.yp-ks__d a { color:var(--primary); }
.yp-k__is { align-self:flex-start; }
.yp-k__son { font-size:11.5px; color:var(--fg-muted); width:100%; }
.yp-k__h { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  padding:9px 10px; border-radius:9px; background:var(--surface-2); }
.yp-k__h span { display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:12px; color:var(--fg-muted); }
.yp-k__h b { font-size:14px; color:var(--fg); }
.yp-k__h small { font-size:11px; }
/* ⭐ EYLEM CUBUGU + DUGMELER (kullanici 2026-09-21: "bu butonlari begenmedim").
   Once tema dugmeleri karisik boylardaydi ve silme ikonu satira yapisik duruyordu.
   Simdi: tek dil, esit yukseklik, birincil eylem DOLU, silme sag ucta AYRI. */
.yp-k__son { display:flex; align-items:center; gap:6px; font-size:11.5px;
  color:var(--fg-muted); padding-top:10px; border-top:1px solid var(--border); }
/* ⭐ Proxy hız tavanı satırı (2026-09-27): etiket · değer · sağda dar girdi + Kaydet */
.yp-k__hiz { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--fg-muted);
  padding:8px 10px; border-radius:9px; background:var(--surface-2); flex-wrap:wrap; }
.yp-k__hiz svg.ic { width:14px; height:14px; flex:none; }
.yp-k__hiz-v { color:var(--fg); font-size:13px; }
/* ⚠️ Kart içi 330px; etiket+değer+girdi+Kaydet tek satıra SIĞMIYOR (ölçüldü 338px) → girdi
   grubu bilerek ikinci satırda, tam genişlik: girdi esner, Kaydet sağ uçta. */
.yp-k__hiz-f { display:flex; align-items:center; gap:6px; flex-basis:100%; }
.yp-k__hiz-f input { flex:1 1 60px; min-width:60px; height:28px; padding:0 8px; font-size:12.5px;
  border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--fg); }
.yp-k__hiz-f small { font-size:11px; }
.yp-btn--kucuk { height:28px; padding:0 10px; font-size:12px; }
.yp-k__son svg.ic { width:13px; height:13px; flex:none; }
.yp-k__e { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto;
  padding-top:8px; }
.yp-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--fg); font-size:12.5px; font-weight:600;
  line-height:1; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s; }
.yp-btn svg.ic { width:14px; height:14px; flex:none; }
.yp-btn:hover { border-color:var(--primary); color:var(--primary); }
.yp-btn:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
/* Birincil eylem: o kartta yapilmasi gereken sey */
.yp-btn--ana { background:var(--primary); border-color:var(--primary); color:#fff; }
.yp-btn--ana:hover { color:#fff; filter:brightness(1.06); }
/* Surum eskiyse yedek DURUR -> birincil eylem uyari renginde one cikar */
.yp-btn--uyari { background:var(--ax-warning-500); border-color:var(--ax-warning-500);
  color:#1b1300; }
.yp-btn--uyari:hover { color:#1b1300; }
/* Silme: sag ucta AYRI, yalniz ikon; hover'da tehlike rengi */
.yp-k__sil { margin-inline-start:auto; }
.yp-btn--sil { width:32px; padding:0; color:var(--fg-muted); }
.yp-btn--sil:hover { border-color:var(--danger); color:var(--danger);
  background:color-mix(in srgb, var(--danger) 8%, transparent); }
/* ⚠️ Ornek kartta dugmeler ISLEV GORMEZ: gorunusu korunur ama tiklanamaz */
.yp-btn[disabled] { opacity:.55; cursor:not-allowed; }
.yp-btn[disabled]:hover { border-color:var(--border); color:var(--fg); }
.yp-btn--ana[disabled]:hover { color:#fff; }
/* ⭐ "Kurulum suruyor" HAREKETLI (kullanici 2026-09-21: "yukleniyor tarzinda olsun"):
   donen halka + akan serit + akan uc nokta. ⚠️ Hareket azaltma tercihi acikken DURUR
   (panelin diger animasyonlariyla ayni kural). */
.yp-k__bekle { display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--fg-muted); position:relative; width:100%; padding-bottom:6px; }
.yp-k__bekle svg.ic { width:14px; height:14px; }
.yp-spin { width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color:var(--primary); animation:yp-donder .8s linear infinite; }
@keyframes yp-donder { to { transform:rotate(360deg); } }
.yp-nokta i { font-style:normal; opacity:.25; animation:yp-yanip 1.2s infinite; }
.yp-nokta i:nth-child(2) { animation-delay:.2s; }
.yp-nokta i:nth-child(3) { animation-delay:.4s; }
@keyframes yp-yanip { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }
/* Akan serit: kartin altinda ilerleyen ince cizgi */
.yp-serit { position:absolute; inset-inline:0; bottom:0; height:2px; border-radius:2px;
  overflow:hidden; background:color-mix(in srgb, var(--primary) 12%, transparent); }
.yp-serit::after { content:""; position:absolute; inset-block:0; width:38%;
  background:var(--primary); border-radius:2px; animation:yp-ak 1.4s ease-in-out infinite; }
@keyframes yp-ak { 0% { inset-inline-start:-38%; } 100% { inset-inline-start:100%; } }
@media (prefers-reduced-motion: reduce) {
  .yp-spin, .yp-nokta i, .yp-serit::after { animation:none; }
  .yp-spin { border-top-color:var(--primary); }
  .yp-nokta i { opacity:1; }
}
/* Eksik uyarisi: rozet degil CUMLE (devrik "Once gerekli: sablon" yerine) */
.yp-k__eksik { display:flex; align-items:flex-start; gap:7px; font-size:12.5px;
  line-height:1.45; color:var(--warn); }
.yp-k__eksik svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }
.yp-k__eksik b { color:var(--fg); }
/* Proxy'si OLMAYAN ESXi karti: bilgi degil UYARI tasir */
.yp-k--yok { background:color-mix(in srgb, var(--ax-warning-500) 5%, var(--surface)); }

/* ================= KUR PENCERESI (kullanici: "kur alani da kotu") ====================
   Eskiden dort duz `select` alt alta duruyordu, ucu "Once ESXi secin" diyordu. Simdi
   numarali adimlar ve ESXi secilene kadar gizli detay blogu. */
.yp-f__grup[hidden] { display:none; }
/* ⚠️ Bloklar arasi bosluk kisildi (kullanici 2026-09-21: "2 disk ve 3 sablon altindaki
   4 ip adresi ile arasinda cok bosluk olmasin"). */
.yp-f__grup { display:flex; flex-direction:column; gap:12px;
  margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border); }
.yp-f__ikili { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.yp-f__ip { display:flex; flex-direction:column; gap:6px; }
/* Arama kutusu: ikon icerde */
.yp-ara { position:relative; display:flex; align-items:center; }
.yp-ara svg.ic { position:absolute; inset-inline-start:10px; width:15px; height:15px;
  color:var(--fg-muted); pointer-events:none; }
/* ⚠️ Kutu her zemin uzerinde GORUNUR olmali: secenek kartinin icinde beyaz uzerine
   beyaz kaliyordu (ekran goruntusunde yakalandi). */
.yp-ara input { width:100%; padding-inline-start:32px; background:var(--surface);
  border:1px solid var(--border); }
/* Yeniden kur: adres blogu yalniz "Yeni IP" secilince acilir (pencere kisaliyor) */
/* ⚠️ TAM GENISLIK SART: blok `.opt-body` (flex kolon) icinde yasiyor ve genislik
   verilmeyince arama kutusu sifira kadar daraliyordu — ekranda yalniz ikon goruntlenip
   kutu KAYBOLUYORDU (ekran goruntusunde yakalandi). */
/* ⚠️ KARTIN TAM GENISLIGI (kullanici 2026-09-21: "ip kutucugu bulundugu kartin icine
   tam sigsin"): blok `.opt-body` icinde yasiyor ve o da kutucuk kolonu kadar iceriden
   basliyor (`.opt-check` 18px + `.opt-inner` gap). Negatif marjla o girinti geri alinir. */
.yp-yk__ip { display:none; flex-direction:column; gap:6px; margin-top:10px;
  align-self:stretch; width:auto;
  margin-inline-start:calc(-1 * (18px + var(--sp-4))); }
.yp-yk__ip > * { width:100%; }
/* ⚠️ SAG KENAR: `.opt-body` bir flex ogesi ve ICERIGI kadar daraliyor; negatif marj yalniz
   SOL girintiyi aliyordu. Blok varsa govde BUYUR (`:has`, panelin baska yerlerinde de
   kullaniliyor) — boylece kutu kartin TAM genisligine oturur. */
.opt-box .opt-inner:has(.yp-yk__ip) .opt-body { flex:1 1 auto; min-width:0; }
.mr-kip input:checked ~ .opt-inner .yp-yk__ip { display:flex; }
/* ⚠️ `size>1` bir LISTE kutusudur, acilir degil: temanin chevron'u ve ona yer acan
   dolgusu burada YANILTICI (ekran goruntusunde yakalandi). */
.yp-ip-liste { width:100%; background-image:none; padding-inline-end:10px; height:auto; }
.yp-ip-liste option { padding:4px 8px; font-family:var(--font-mono, monospace); }
@media (max-width:640px) { .yp-f__ikili { grid-template-columns:1fr; } }
/* ⭐ "Ajan nedir?" rehberi (kullanici 2026-09-19: "bu ajan nedir, adminde bilgilensin").
   Bilesen panelin KENDI rehberi (`fw-nasil`/`fw-ilke`/`fw-fark`); burada yalniz iki fark var:
   ⚠️ adim sayisi DORT — `fw-ilke`nin 3 kolonu son karti tek basina birakirdi, 2x2 yapiliyor
   (ayni ders `.yd-nav`da da yazili: kolon sayisi kart sayisina uymazsa satir yarim kalir). */
/* ⚠️ `.yp-ajan` artik KARTIN GOVDESI (once katlanir bir kutuydu) — kullanici
   2026-09-20: "Ajan nedir karti da ayri bir kart ve acilir pencere olsun". Kart
   basligi `<summary class="mr-bolum">`, katlama `details.set-det` (Ayarlar recetesi).
   ⚠️ Ilk baslik govdenin UST bosluguyla ust uste binmesin: `fw-nasil__h`in 16px ust
   marji kart icinde fazla, ilkinde sifirlanir. */
.yp-ajan > .fw-nasil__h:first-of-type { margin-top:4px; }
/* ⚠️ `mr-bolum` bir `<summary>` oldu: UA ucgenini gizlemek `set-det`ten geliyor ama
   baslik metni secilebilir kaliyordu -> cift tiklamada metin maviye boyaniyordu. */
.set-det > .mr-bolum { user-select:none; }
/* ⚠️ "Nasil calisir?" DORT madde: `.mr-bilgi`nin 3 kolonu sonuncuyu tek basina
   birakiyordu (ayni ders `.yd-nav` ve `.yp-ajan__4`te de yazili — kolon sayisi
   kart sayisina uymazsa satir yarim kalir). Global recete DEGISMEZ (Port Mirror
   sayfasi 3'lu kullaniyor), yalniz bu kartta 2x2. */
#bilgi .mr-bilgi { grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:900px) { #bilgi .mr-bilgi { grid-template-columns:1fr; } }
.yp-ajan__g { margin:0 0 4px; font-size:13px; line-height:1.6; color:var(--fg-muted); }
.yp-ajan__4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.yp-ajan__s { margin-top:14px; }
.yp-ajan__st { display:flex; align-items:center; gap:7px; font-weight:650; font-size:13px; }
.yp-ajan__st svg.ic { width:16px; height:16px; color:var(--primary); }
@media (max-width:900px) { .yp-ajan__4 { grid-template-columns:1fr; } }
.yp-hata { font-size:12px; color:var(--danger); max-width:34ch; white-space:normal; margin-top:3px; }
#yp-tablo td small { display:block; }
@media (max-width:720px){ .yp-eylem { white-space:normal; } .yp-eylem .ax-btn { margin:2px 4px 2px 0; } }
/* Yedekleme alt sekmeleri (Proxy sunucular / Depo) */
/* ⭐ YEDEKLEME ALT SEKMELERI — kullanici "butonlari sevmedim, 3'u tam ekran ve esit
   dagilsin" dedi (2026-09-19). Recete panelin KENDI karar karti dilinden
   (`.fw-modlar`/`.fw-mod`: plan kartlari, IP kilidi, izolasyon, NIOC) — yeni gorsel dil
   ICAT EDILMEDI. Fark: bunlar radyo degil BAGLANTI, o yuzden ayri sinif.
   ⚠️ SABIT 3 KOLON: bolum sayisi TAM UC; `auto-fit` son satirda tek basina kart birakirdi. */
.yd-nav { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin:0 0 var(--sp-5); }
.yd-nav__k { display:flex; align-items:flex-start; gap:10px; min-width:0;
  border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  background:var(--surface); color:var(--fg); text-decoration:none;
  transition:border-color .12s, box-shadow .12s, background .12s; }
.yd-nav__k:hover { border-color:var(--primary); color:var(--fg); }
.yd-nav__k:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
/* Ikon cipi: secili bolumde dolu, digerlerinde yumusak (durum tek bakista okunur) */
.yd-nav__ik { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none; border-radius:9px;
  background:var(--surface-2); color:var(--fg-muted); }
.yd-nav__ik svg { width:17px; height:17px; }
.yd-nav__m { display:flex; flex-direction:column; gap:2px; min-width:0; }
.yd-nav__b { font-weight:700; line-height:1.25; }
/* ⚠️ Aciklama KIRPILMAZ, sarar: dar ekranda tek kelime yutulunca bolumun ne
   yaptigi anlasilmiyordu (uc kartin yuksekligi grid sayesinde zaten esit). */
.yd-nav__a { font-size:var(--t-sm); color:var(--fg-muted); line-height:1.35; }
.yd-nav__k.aktif { border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary) inset; background:var(--primary-soft, var(--surface)); }
.yd-nav__k.aktif .yd-nav__ik { background:var(--primary); color:#fff; }
.yd-nav__k.aktif .yd-nav__b { color:var(--primary); }
@media (max-width:900px) { .yd-nav { grid-template-columns:1fr; } }
/* ⚠️ `display:inline-block` rozetin FLEX ORTALAMASINI bozuyordu (yazı 3px yukarı
   kayıyordu — kullanıcı bulgusu 2026-09-21, ölçüldü). Kırpma İÇ span'e alındı; rozet
   `.ax-badge`in inline-flex'i olarak kalır. */
.yd-kisa { max-width:100%; min-width:0; }
.yd-kisa > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.yy-baslat { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.yy-baslat .yy-sec { flex:1 1 320px; margin:0; }
.yy-adim { display:block; }
#yy-tablo td small { display:block; }
/* VM detay > Yedekler sekmesi */
.vd-yedek .nd-sec { margin-top:var(--sp-5); display:flex; align-items:center; gap:10px; }
.vd-yedek .nd-sec .vy-simdi { margin-left:auto; }
/* ⚠️ DORT SIKLIK KARTI (Kapali + Gunluk + Haftalik + Aylik, kullanici 2026-09-21):
   `.fw-modlar` 3 kolonludur; oldugu gibi birakilinca "Aylik" TEK BASINA alt satira
   dusuyordu (ekran goruntusunde yakalandi). Dar ekranda 2, en darda 1 kolon. */
.vy-modlar { margin-bottom:var(--sp-4); grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1100px){ .vy-modlar { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .vy-modlar { grid-template-columns:1fr; } }
.vy-ctrls { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-5); }
.vy-kota { display:flex; flex-direction:column; gap:10px; }
.vy-kota__m { display:flex; flex-direction:column; gap:6px; }
/* Hak + kota TEK formda: iki etiketli alan + kaydet. Alanlar USTTEN hizali (ipuclari
   farkli uzunlukta), dugme girdilerin hizasinda. */
.vy-kota__f { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px 16px; align-items:start; }
.vy-kota__f .vy-kota__k { margin-top:22px; white-space:nowrap; }
.vy-kota__n { font-size:12px; margin:2px 0 0; }
@media (max-width:720px){ .vy-kota__f { grid-template-columns:1fr; }
  .vy-kota__f .vy-kota__k { margin-top:0; } }
.vy-not { margin-top:var(--sp-5); }
.vy-tbl td small { display:block; }
@media (max-width:720px){ .vy-ctrls { grid-template-columns:1fr; } }
/* Pencere: iki saat kutusu yan yana. `.lk-in` ortak rozeti MUTLAK konumludur (tek kutu
   varsayar); iki kutuda iki rozet ayni sag koseye biner — burada rozet akisa alinir. */
.lk-in.vy-pencere { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lk-in.vy-pencere input { width:84px; padding-right:var(--sp-3); }
.lk-in.vy-pencere .lk-unit { position:static; transform:none; }

/* Yedekleme > Depo: gece bakimi ozeti (uzlastirma / dogrulama / cop toplama) */
.vd-bakim { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-4);
  margin-bottom:var(--sp-4); }
.vd-bakim__k { border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--sp-4); background:var(--surface-2); }
.vd-bakim__b { display:flex; align-items:center; gap:6px; font-weight:700;
  font-size:var(--t-sm); color:var(--fg-muted); margin-bottom:6px; }
.vd-bakim__v { font-weight:700; }
/* 2026-09-26 Depo sayfası: durum kartı (proxy kartı reçetesi, tam genişlik) */
.yd-durum { margin-top:var(--sp-5); }
.yd-durum .yp-k__cumle { margin:2px 0 12px; }
/* 3. tur: satırlar `du-srv` reçetesi; ton çipi satırın durumunu taşır (mono ayrıntı küçük) */
.yd-ks--ok .alr-ic { --_t:var(--ax-success-600, var(--ax-success-500)); }
.yd-ks--uyari .alr-ic { --_t:var(--warn); }
.yd-ks--bekle .alr-ic { --_t:var(--fg-muted); }
.yd-durum__l small.mono { font-family:var(--font-mono, monospace); font-size:12px; }
/* Düğmeler tam genişliğe EŞİT dağılır (kullanıcı: "butonlar tam ekrana eşit dağılarak sığsın");
   sayı 2–4 arası değişir → auto-fit; dar ekranda alt alta iner. */
.yd-durum__e { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px;
  padding-top:14px; }
.yd-durum__e .yp-btn { width:100%; justify-content:center; }
.yp-btn--tehlike { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.yp-btn--tehlike:hover { background:color-mix(in srgb, var(--danger) 10%, transparent); }
.yd-bakim__oz b.err { color:var(--danger); }
@media (max-width:820px){ .vd-bakim { grid-template-columns:1fr; } }

/* Ipuclu metin (ornek: proxy sayfasinda "8 paket" — uzerine gelince adlari cikar) */
.yp-ipucu { border-bottom:1px dotted var(--fg-muted); cursor:help; }
/* ================= INCE BILGI / UYARI BARI (kullanici 2026-09-21) =================
   "mavi bilgilendirme bari icine al ama cok kalin olmasin ince olsun" — ayni recete
   turuncu ton icin de kullanilir (yeniden kur uyarisi). Ikon ile metin AYNI eksende. */
.yp-bar { display:flex; align-items:flex-start; gap:8px; margin:var(--sp-4) 0 0;
  padding:8px 11px; border-radius:8px; font-size:12.5px; line-height:1.5;
  border:1px solid transparent; }
/* ⚠️ Pencere icinde `p` marjini SIFIRLANIYOR (tema) → bar bir ustteki seride YAPISIYORDU
   (kullanici 2026-09-21: "sistem VM'i olan bar ile altindaki mavi bar arasinda bosluk yok").
   Daha ozgul secici ile geri verilir. */
.modal .yp-bar, .form-modal .yp-bar { margin-top:12px; }
.yp-bar svg.ic { width:14px; height:14px; flex:none; margin-top:2px; }
.yp-bar b { font-weight:650; }
.yp-bar--bilgi { color:var(--fg-muted);
  background:color-mix(in srgb, var(--primary) 8%, transparent);
  border-color:color-mix(in srgb, var(--primary) 22%, transparent); }
.yp-bar--bilgi svg.ic { color:var(--primary); }
.yp-bar--bilgi b { color:var(--fg); }
.yp-bar--uyari { color:var(--fg-muted);
  background:color-mix(in srgb, var(--ax-warning-500) 10%, transparent);
  border-color:color-mix(in srgb, var(--ax-warning-500) 30%, transparent); }
.yp-bar--uyari svg.ic { color:var(--warn); }
.yp-bar--uyari b { color:var(--fg); }

/* ⭐ "Artan istendi ama TAM alindi" — sebep rozetin altinda (kullanici 2026-09-25: "artan
   secip yedek al desem de tam aliniyor" — sebep vardi, ekranda yoktu: disk buyutuldu). */
.vy-tamneden { display:block; font-size:11px; margin-top:2px; white-space:nowrap; }

/* ⭐ Gece kesinlesecek yaklasik yedek boyutu (kullanici 2026-09-25: "yedek boyutu gorunmuyor") */
.vy-yaklasik { display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
/* ⚠️ "≈" SAYIYLA AYNI SATIRDA (kullanici 2026-09-25): once ayri dugumdeydi ve dar sutunda
   sayidan kopup alt satira dusuyordu -> ikisi tek `<b>` icinde, `nowrap` ile garanti. */
.vy-yaklasik b { color:var(--fg); white-space:nowrap; }
.vy-yaklasik small { font-size:10.5px; white-space:nowrap; }

/* Nokta satirinda disk kapasitesi: adin altinda kendi satiri (kullanici 2026-09-25) */
.yy-disk { display:block; font-size:11.5px; margin-top:1px; }

/* Yarim kalan geri yukleme uyarisi: metin + dugme (firewall'in ax-alert__actions receti) */
.vy-yarim .ax-alert__content { display:flex; flex-direction:column; gap:10px; }
.vy-yarim .ax-alert__actions form { display:inline; }

/* Firewall kartinin KART DUZEYI hata seridi (izolasyon / IP kilidi / bayilik
   paket kapisi). Kural formunun kendi seridi `.fw-serit` ayri kalir. */
.fw-kart-hata { margin:0 0 12px; }

/* ---- ORTAK: toplu islem cubugu + "tehlikeli bolge" seridi ------------------
   ⚠️ IKISI DE SAYFA-ICI <style> BLOKLARINDAN BURAYA TASINDI (kullanici bulgusu
   2026-09-28: "bir sayfadaki element baska sayfada farkli tasarimda olmamali").
   Sinif adi paylasilip kurali kopyalamak, iki sayfanin sessizce ayrismasi
   demekti; kural artik TEK kaynakta. */
.bulk-bar { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.vd-danger { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding:15px 16px; border:1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  border-radius:12px; background:color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.vd-danger-txt { display:flex; flex-direction:column; gap:3px; font-size:13.5px; }
.vd-danger-txt strong { display:inline-flex; align-items:center; gap:7px; color:var(--danger); }
.vd-danger-txt strong svg { width:15px; height:15px; }
.vd-danger-txt .faint { font-size:12.5px; }

/* ═══════════════ KURALLAR (docs/kurallar.md §8, Faz C) ═══════════════
   Bolum / serit / tablo dili Port Mirror ailesinden (`.kr-blok`, `.kr-bolum*` o secici
   listelerine EKLENDI — kopya kural yok; `mr-tbl`, `mr-r`, `mr-nw`, `mr-kisa`, `mr-g__*`
   yardimcilari GLOBAL). Buradakiler yalniz kural sayfalarina OZGU: form izgarasi, sunucu
   secici, onizleme, sunucu sayfasi bant formu. Renkler YALNIZ tema degiskenlerinden. */
/* IKINCI TASARIM (2026-10-01): TEK sutun, numarali adimlar; iki sutunlu izgara 'anlasilmaz' bulundu. */
.kr-form { display:flex; flex-direction:column; gap:var(--sp-4); }  /* tam genislik (kullanici: 'kartlar yarim duruyor') */
.kr-kart { margin:0; }
.kr-kart--ozet .ax-card__body > label { margin-top:0; }
/* OZET SERIDI YAPISKAN (kullanici 2026-10-02): yalniz mavi serit; Ad kutusu yerinde kalir. Serit
   formun dogrudan cocugu: kapsayici blok `.kr-form` (flex sutun, overflow YOK) -> sticky
   formun sonuna kadar calisir. Zemin OPAK (tema karti yari saydam olabilir; altindaki kartlar
   okunurdu). Negatif alt marj YOK (panel tuzagi). */
.kr-nobet { height:1px; margin:-1px 0 0; }   /* yapisiklik nobetcisi, gorunmez */
.kr-form > .kr-ozet { position:sticky; top:0; z-index:20; margin-top:0;
  background:color-mix(in srgb, var(--primary) 6%, var(--surface));   /* opak: alttaki kart gorunmesin */
  transition:background .15s, color .15s, box-shadow .15s; }
/* YAPISIK HAL (kullanici 2026-10-02: 'arkadaki yazilarla ic ice giriyor'): JS IntersectionObserver
   `kr-ozet--yapisik` sinifini verir -> koyu zemin, beyaz yazi, uste bitisik, belirgin golge. */
/* ozgulluk: `.kr-form > .kr-ozet` (0,1,1) zemini eziyordu -> iki sinifli secici (0,2,0) */
.kr-ozet.kr-ozet--yapisik { background:var(--primary); color:#fff; border-color:var(--primary);
  border-top-left-radius:0; border-top-right-radius:0;
  box-shadow:0 10px 24px -6px color-mix(in srgb, var(--primary) 55%, transparent); }
.kr-ozet--yapisik .faint, .kr-ozet--yapisik strong { color:#fff; }
.kr-ozet--yapisik .faint { opacity:.85; }
.kr-ozet--yapisik .kr-ozet__ic { background:#fff; color:var(--primary); }
.kr-ozet--yapisik .kr-ozet__ic--bos { background:color-mix(in srgb, #fff 25%, transparent); color:#fff; }
.kr-kart--ozet .ax-card__body { padding-top:12px; padding-bottom:12px; }
/* adim numarasi: baslikla ayni satirda (kart basligi flex — secici listesi yukarida) */
.kr-adim { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
  border-radius:50%; background:var(--primary); color:#fff; font-size:14px; font-weight:700; }
.kr-sayac { white-space:nowrap; font-size:12.5px; align-self:center; }
/* canli ozet seridi */
.kr-ozet { display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding:10px 14px; border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background:color-mix(in srgb, var(--primary) 6%, var(--surface));
  font-size:13.5px; line-height:1.5; }
.kr-ozet__ic { display:inline-flex; width:22px; height:22px; flex:none; align-items:center; justify-content:center;
  border-radius:50%; background:var(--primary); color:#fff; }
.kr-ozet__ic svg.ic { width:13px; height:13px; }
.kr-ozet__ic--bos { background:var(--surface-3); color:var(--fg-muted); }
.kr-ozet__m { min-width:0; }
.kr-secenekler > .opt-box { margin-top:0; }
/* tepe/ortalama aciklamasi (1. adim) */
.kr-aciklama { margin-top:12px; padding:10px 14px; border-radius:var(--radius); background:var(--surface-2);
  font-size:12.5px; line-height:1.55; color:var(--fg-muted); }
.kr-aciklama strong { color:var(--fg); }
.kr-aciklama p { margin:0 0 6px; }
.kr-aciklama p:last-child { margin-bottom:0; }
.kr-aciklama ul { margin:0 0 6px; padding-left:18px; }
#kr-soguma-bildir[hidden] { display:none; }
.kr-ipucu { display:block; margin-top:6px; font-size:12.5px; line-height:1.5; }
.kr-ipucu[hidden] { display:none; }
.kr-hatalar { margin:6px 0 0; padding-left:18px; }
.kr-hatalar li { margin:2px 0; }
/* `[hidden]` ezme tuzagi: bloklar `display` alan sinif tasimiyor ama JS ile gizleniyor;
   acik yazilir ki ileride bir `display:` eklenirse gizleme sessizce olmesin. */
.kr-param[hidden], #kr-geri-alan[hidden], #kr-sure-alan[hidden], #kr-secici[hidden] { display:none; }
.kr-serit { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:var(--sp-4); padding:10px 14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); font-size:12.5px; }
.kr-serit__sag { margin-left:auto; display:inline-flex; gap:6px; }
.kr-serit__sag form { display:inline-flex; margin:0; }
.kr-kaydet { display:flex; gap:10px; align-items:center; }
.kr-cumle { max-width:440px; }
.kr-kisa { display:block; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-pasif .mr-tbl__ip { color:var(--fg-muted); }
.kr-not { font-size:12.5px; color:var(--fg-muted); max-width:320px; }
/* sunucu secici: kaydirmali liste, satir = etiketli checkbox (global `label` marji EZILIR) */
.kr-secici-bar { margin:0 0 10px; }
.kr-ara { flex:1 1 260px; min-width:200px; }
.kr-vmler { max-height:360px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); }
.kr-vm { display:flex; align-items:center; gap:10px; margin:0; padding:8px 12px; border-bottom:1px solid var(--border);
  font-size:13px; font-weight:400; color:var(--fg); cursor:pointer; }
.kr-vm:last-child { border-bottom:0; }
.kr-vm:hover { background:var(--surface-2); }
.kr-vm[hidden] { display:none; }
/* ⚠️ global `input { width:100% }` (style.css:365) checkbox'i 1036px yapip metinleri 0'a sikistirdi
   (olculdu, 2026-09-30) -> genislik/dolgu burada geri alinir. */
.kr-vm input { width:auto; padding:0; margin:0; flex:none; }
.kr-vm__ip { font-weight:700; min-width:130px; }
.kr-vm__ad { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-vm__sahip { font-size:12px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ESXi bazli kapsam listesi + kilitli satir */
.kr-alt-b { margin:12px 0 6px; font-size:12.5px; font-weight:700; color:var(--fg); }
.kr-alt-b .faint { font-weight:400; }
.kr-esxi-liste { display:flex; flex-wrap:wrap; gap:8px; }
.kr-esxi { display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 12px; border:1px solid var(--border);
  border-radius:999px; font-size:13px; font-weight:400; color:var(--fg); cursor:pointer; background:var(--surface); }
.kr-esxi:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.kr-esxi input { width:auto; padding:0; margin:0; flex:none; }
.kr-esxi__ad { font-weight:600; }
.kr-vm__rozet { display:none; }
.kr-vm--esxi { background:color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.kr-vm--esxi .kr-vm__rozet { display:inline-flex; }
.kr-vm--esxi .kr-vm__ip, .kr-vm--esxi .kr-vm__ad { color:var(--fg-muted); }
/* C2: acilir ek bolumler (VE kosulu, kademeler), kademe satiri, pencere gunleri, sablonlar */
.kr-ek { margin-top:12px; border:1px solid var(--border); border-radius:var(--radius); padding:0 14px 12px; }
.kr-ek > summary { cursor:pointer; padding:10px 0; font-weight:600; font-size:13.5px; list-style:revert; }
.kr-ek > summary .faint { font-weight:400; }
.kr-row4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.kr-kademe { display:grid; grid-template-columns:28px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap:var(--sp-3);
  align-items:end; padding:10px 0; border-top:1px solid var(--border); }
.kr-kademe:first-of-type { border-top:0; }
.kr-kademe .kr-adim { align-self:center; margin-top:14px; }
.kr-adim--kucuk { width:24px; height:24px; font-size:12px; }
.kr-adim--etiket { width:20px; height:20px; font-size:11px; vertical-align:middle; margin-right:4px; }
.kr-kd-param[hidden] { display:none; }
.kr-ikili { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.kr-ikili:has(> :nth-child(3)) { grid-template-columns:1.4fr 1fr 1fr; }
.kr-ikili.kr-dortlu { grid-template-columns:1.2fr 1fr 1fr 1fr; }
/* §12 muafiyet karti (Otomatik Eylemler sayfasi): sunucu + sure + sebep tek satir */
.kr-muaf-form { display:grid; grid-template-columns:minmax(220px,2fr) 120px minmax(160px,1.4fr) auto; gap:8px; align-items:center;
  padding:0 var(--sp-4) var(--sp-3); }
.kr-muaf-form .ax-select, .kr-muaf-form .ax-input { width:100%; min-width:0; }
.kr-muaf-bos { margin:0; padding:0 var(--sp-4) var(--sp-3); font-size:13px; }
#muaf .kr-bolum__b { flex:none; white-space:nowrap; }   /* uzun aciklama basligi kirmasin */
@media (max-width: 900px) { .kr-muaf-form { grid-template-columns:1fr; } }
#kr-pencere[hidden] { display:none; }
.kr-gunler { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.kr-gun { display:inline-flex; align-items:center; gap:4px; margin:0; padding:5px 9px; border:1px solid var(--border);
  border-radius:999px; font-size:12.5px; font-weight:500; color:var(--fg); cursor:pointer; }
.kr-gun:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.kr-gun input { width:auto; padding:0; margin:0; }
.kr-sablon-liste { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.kr-sablonlar .kr-alt-b:first-child { margin-top:0; }
.kr-sablonlar .kr-sablon-liste { margin-bottom:6px; }
.kr-sablon { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius);
  color:inherit; text-decoration:none; font-size:13px; background:var(--surface); }
.kr-sablon:hover { border-color:var(--primary); }
.kr-sablon--secili { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.kr-sablon .faint { font-size:12px; line-height:1.45; }
@media (max-width: 900px) { .kr-row4, .kr-kademe { grid-template-columns:1fr; } }
/* onizleme */
.kr-onz-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.kr-onizleme:empty { display:none; }
.kr-onz-ozet { margin-bottom:10px; }
.kr-onz-ozet p { margin:0 0 4px; }
.kr-onz-cumle { font-weight:600; }
.kr-onz-tetik td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
.kr-onz-kosular { font-size:12.5px; }
/* sunucu sayfasi banti: satir ici "Geri al" formu (plans.html'deki satir ici style yerine sinif) */
.vd-inline-form { display:inline-flex; margin:0 0 0 8px; vertical-align:middle; }

/* ============================================================
   IP SPAM TESPITI (docs/spam-tespiti.md §6) — sayfa ozel kurallar. Blok/serit/tablo dili
   ortak secicilerde (`.sp-blok`, `.sp-bolum`, `mr-tbl`); burada yalniz bu sayfanin ogeleri.
   ============================================================ */
.sp-inline { display:inline; margin:0; }
.sp-ara { min-width:220px; flex:1 1 320px; }
.sp-kpi__bolu { font-size:var(--t-md); font-weight:500; margin-left:4px; }
.sp-kpi__metin { font-size:var(--t-lg); }
.sp-etiket { font-size:var(--t-xs); margin-top:2px; max-width:360px; overflow:hidden; text-overflow:ellipsis; }
.sp-aciklama { white-space:normal; max-width:420px; }
.sp-listeler { display:flex; flex-wrap:wrap; gap:4px; align-items:center; max-width:460px; }
.sp-satir--onemli td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
.sp-satir--bilgi td:first-child { box-shadow:inset 3px 0 0 var(--warning); }
.sp-satir--pasif td { opacity:.6; }
.sp-satir--kapali td:not(.sp-izleme):not(.sp-islem) { opacity:.55; }
.sp-izleme .sp-izleme__sw { margin:0; gap:0; }
.sp-ekle { border-bottom:1px solid var(--border); }
.ipp-spam { text-decoration:none; }
.sp-blok > .sp-ptr-not { margin:var(--sp-4) var(--sp-4) 0; }
.sp-ekle textarea { width:100%; min-height:64px; font-family:var(--font-mono, ui-monospace, Menlo, monospace); font-size:var(--t-sm); resize:vertical; }
.sp-islem { text-align:right; }
.sp-islem form { display:inline; margin:0; }
.sp-txt { min-width:220px; max-width:380px; }
.sp-ip-baslik { font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.sp-txt > span { display:block; }
.sp-txt__ham { font-size:var(--t-xs); word-break:break-word; margin-top:2px; }
.sp-bos { text-align:center; padding:18px; }
.sp-bolum__sag { margin-left:auto; }
.sp-iki { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:var(--sp-5); }
.lk-ctrls.sp-ctrls--1 { grid-template-columns:1fr; }
.lk-ctrls.sp-ctrls--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.sp-iki > .sp-blok { margin:0 0 var(--sp-5); min-width:0; }
.sp-form { padding:0; margin:0; }
.sp-form__alt { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-4); }
.sp-anahtarlar { display:flex; flex-direction:column; gap:10px; margin-bottom:var(--sp-4); }
.sp-anahtarlar .switch { margin:0; }
.sp-not { margin:0 0 var(--sp-4); font-size:var(--t-sm); }
.sp-sirlar { margin-top:var(--sp-4); }
.sp-sag__ad { font-weight:600; }
.sp-sag-aile { max-width:140px; margin-right:6px; }
.sp-sag-alanlar textarea { width:100%; min-height:72px; font-family:var(--mono, monospace); font-size:var(--t-sm); }
.sp-modal__box h3 { margin:0 0 var(--sp-4); }
/* Sağlayıcı düzenleme penceresi (kullanıcı 2026-10-02: "her şey yarım, kutular kesiliyor"): geniş
   pencere (ekranın %94'ü, 1180px'e kadar), alanlar 2 sütun, uzun metin alanları tam satır. */
.modal-overlay.form-modal.wide .modal.sp-modal__box { max-width:1180px; width:94vw; max-height:92vh; }
.sp-modal__box .lk-ctrls { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4) var(--sp-5); }
.sp-modal__box .lk-ctrl:has(textarea), .sp-modal__box .lk-ctrl:has(input[name="aciklama"]) { grid-column:1 / -1; }
.sp-modal__box .lk-in input, .sp-modal__box .lk-in select, .sp-modal__box .lk-in textarea { width:100%; box-sizing:border-box; }
.sp-modal__box .sp-anahtarlar { margin-top:var(--sp-4); }
.sp-modal__box textarea { min-height:150px; }
@media (max-width:820px) { .sp-modal__box .lk-ctrls { grid-template-columns:1fr; } }
@media (max-width:1100px) { .sp-iki { grid-template-columns:1fr; } }

/* ═══════════ LİSANS (docs/lisans.md §6) — Ayarlar kartı + üst bant + ana sayfa kartı ═══════════
   Durum bandı ve künye SSL kartının `.ssl-durum` dilini PAYLAŞIR (kopya kural yok); burada yalnız
   lisansa özgü parçalar: üst bant (`.lis-bar`, imp-bar'ın ton alan kardeşi), limit çubukları,
   modül çipleri, eylem satırı, anahtar girişi. Satır içi stil YOK (`ot-w<kova>` sınıfları). */
.lis-bar { --_lb:var(--warn); width:100%; max-width:1320px; display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; padding:10px 16px; margin-bottom:20px;
  border-radius:var(--radius-sm); color:var(--fg); font-size:var(--t-md); line-height:1.5;
  background:color-mix(in srgb, var(--_lb) 9%, var(--surface));
  border:1px solid color-mix(in srgb, var(--_lb) 55%, transparent); }
.lis-bar.lis-bar-danger { --_lb:var(--danger); }
.lis-bar.lis-bar-warning { --_lb:var(--warn); }
.lis-bar > span { display:flex; align-items:center; gap:var(--sp-2); min-width:0; flex-wrap:wrap; }
.lis-bar strong { font-weight:600; }
.set-marka-kilit { margin:0 0 var(--sp-3); }   /* Ayarlar > Marka: modul yok banti */
.lis-bar svg.ic { width:15px; height:15px; vertical-align:-3px; color:var(--_lb); flex:none; }
.lis-bar .btn, .lis-bar .ax-btn { background:var(--surface); flex:none; }
/* SABİT üst bant (kullanıcı 2026-10-12): ekranın en üstünde, tam genişlik, ince (40px), kaydırmada sabit, yazı ORTALI,
   kapatılabilir (×: tarayıcıda 24 saat; kip değişince döner). Bant `.ax-layout` DIŞINDA (body'nin ilk çocuğu) → katman
   yığını ondan bağımsız; `<html data-lisbar>` varken kenar çubuğu (fixed, inset 16px) ve kabuk bant yüksekliği kadar iner,
   toast da altına kayar. Ölçüldü: üst şerit `position:static` (kabuk içinde akar), kenar çubuğu fixed top 16px.
   TASARIM "yumuşak vurgu" (4. tur; ton zeminli A/B/C kullanıcıya "çırtlak, temayı bozuyor" geldi → temanın KENDİ paleti,
   scratchpad/_bar_varyant.py D/E/F): zemin `--primary-soft` (menü vurgusuyla aynı), kritikte `--danger-soft`; başlık
   `--primary` / `--danger`; simge çipi `--surface`; "Lisans kartı →" `--primary` dolu düğme. Koyu tema değişkenlerle. */
html[data-lisbar] { --lisbar-h:40px; }
.lis-bar.lis-bar--sabit { position:fixed; top:0; left:0; right:0; height:var(--lisbar-h); max-width:none; margin:0;
  padding:0 150px; border:0; border-radius:0; justify-content:center; flex-wrap:nowrap; gap:var(--sp-3);
  background:var(--primary-soft); color:var(--fg); font-size:13px; line-height:1.2; z-index:400;
  border-bottom:1px solid color-mix(in srgb, var(--primary) 28%, transparent); box-shadow:0 1px 6px rgba(13,23,41,.06); }
.lis-bar.lis-bar--sabit.lis-bar-danger { background:var(--danger-soft);
  border-bottom-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.lis-bar[hidden] { display:none; }                  /* kapatıldı: `display:flex` [hidden]'ı ezmesin */
.lis-bar.lis-bar--sabit > span { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap; }
.lis-bar.lis-bar--sabit .lis-bar__metin { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lis-bar.lis-bar--sabit strong { color:var(--primary); }
.lis-bar.lis-bar--sabit.lis-bar-danger strong { color:var(--danger); }
.lis-bar.lis-bar--sabit .lis-bar__ayrinti { color:var(--fg-muted); }
.lis-bar.lis-bar--sabit svg.ic { width:22px; height:22px; padding:4px; box-sizing:border-box; border-radius:999px; flex:none;
  background:var(--surface); color:var(--primary); }
.lis-bar.lis-bar--sabit.lis-bar-danger svg.ic { color:var(--danger); }
.lis-bar.lis-bar--sabit .lis-bar__eylem { position:absolute; right:12px; top:50%; transform:translateY(-50%); gap:6px; }
/* Sağ denetimler (kullanıcı 2026-10-12/13: dolu düğme ve düz yazı beğenilmedi → bağlantı da × gibi `--surface` çipli DÜĞME) */
.lis-bar.lis-bar--sabit .lis-bar__link { flex:none; height:24px; display:inline-flex; align-items:center; font-size:12px;
  font-weight:600; color:var(--primary); text-decoration:none; padding:0 11px; border-radius:999px; background:var(--surface);
  border:0; }
.lis-bar.lis-bar--sabit.lis-bar-danger .lis-bar__link { color:var(--danger); }
.lis-bar.lis-bar--sabit .lis-bar__link::after { content:" →"; }
.lis-bar.lis-bar--sabit .lis-bar__link:hover { background:var(--surface-2); }
.lis-bar.lis-bar--sabit .lis-bar__eylem { gap:8px; }
.lis-bar.lis-bar--sabit .lis-bar__kapat { flex:none; width:24px; height:24px; padding:0; border:0; border-radius:999px;
  cursor:pointer; display:grid; place-items:center; color:var(--fg-muted); background:var(--surface); }
.lis-bar.lis-bar--sabit .lis-bar__kapat svg.ic { width:13px; height:13px; padding:0; background:transparent; color:inherit; }
.lis-bar.lis-bar--sabit .lis-bar__kapat:hover { background:var(--surface-2); color:var(--fg); }
html[data-lisbar] .ax-sidebar { inset-block-start:calc(var(--ax-detached-inset, 16px) + var(--lisbar-h)); }
html[data-lisbar] .ax-shell { padding-block-start:var(--lisbar-h); }
html[data-lisbar] .toast-wrap { top:calc(22px + var(--lisbar-h)); }
@media (max-width:900px){ .lis-bar.lis-bar--sabit .lis-bar__ayrinti { display:none; } .lis-bar.lis-bar--sabit { padding:0 130px; } }
/* Lisanssız modül (docs/lisans.md §7): menüde kilit simgesi (yalnız yönetici) + sayfa üstü bant. */
.ax-nav__item.lis-kilitli .ax-nav__label { color:var(--fg-muted); }
.ax-nav__item .lis-kilit { display:inline-flex; margin-left:auto; color:var(--fg-muted); flex:none; }
.ax-nav__item .lis-kilit svg.ic { width:13px; height:13px; }
.lis-bar.lis-bar-modul { margin-bottom:16px; }
/* Kart künyesi: SSL'in nth-child genişlikleri (130/260) burada da uyar; dört hücre sarar. */
.lis-kunye > .ssl-kunye-h { min-width:150px; }
.lis-kunye > .ssl-kunye-h:nth-child(2) { min-width:200px; }
.lis-hata { color:var(--danger); font-weight:500; }
.lis-not { margin:var(--sp-2) 0 var(--sp-4); font-size:var(--t-sm); color:var(--fg-muted); line-height:1.55; }
.lis-limitler { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4); }
.lis-limit { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.lis-limit-bas { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.lis-cubuk { background:color-mix(in srgb, var(--fg-muted) 14%, var(--surface)); }
.lis-cubuk > .ot-bar { background:color-mix(in srgb, var(--ok) 72%, var(--surface)); }
.lis-cubuk > .ot-bar.lis-cubuk-az { background:color-mix(in srgb, var(--warn) 78%, var(--surface)); }
.lis-cubuk > .ot-bar.lis-cubuk-asim { background:color-mix(in srgb, var(--danger) 78%, var(--surface)); }
.lis-modlar { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.lis-mod { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font-size:var(--t-sm);
  font-weight:500; border-radius:var(--radius-pill); border:1px solid color-mix(in srgb, var(--ok) 40%, var(--border));
  background:color-mix(in srgb, var(--ok) 7%, var(--surface)); color:var(--fg); }
.lis-mod svg.ic { width:13px; height:13px; color:var(--ok); }
.lis-mod.lis-mod-yok { border-color:var(--border); background:var(--surface); color:var(--fg-muted); }
.lis-mod.lis-mod-yok svg.ic { color:var(--fg-muted); }
.lis-eylem { display:flex; align-items:flex-start; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-3); }
.lis-anahtar { flex:1 1 420px; min-width:0; }
.lis-anahtar > summary { list-style:none; cursor:pointer; display:inline-flex; }
.lis-anahtar > summary::-webkit-details-marker { display:none; }
.lis-anahtar-e { display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.lis-anahtar-e .set-inp { flex:1 1 320px; letter-spacing:.04em; }
.lis-kaynak { margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.lis-kaynak-h { margin:0 0 var(--sp-1); font-size:var(--t-sm); font-weight:600; }
.lis-kaynak-t { margin:0 0 var(--sp-3); }
.lis-kaynak-alt { margin:var(--sp-3) 0 var(--sp-1); font-size:var(--t-sm); font-weight:600; }
.lis-kaynak-alt small { font-weight:400; color:var(--fg-muted); }
.lis-kaynak .lis-anahtar-e .set-inp { flex:1 1 180px; letter-spacing:0; }
/* Ana sayfa kartı: `.card.stat` dilinde; kip tonu sayıya */
.dash-lis .num.lis-warn { color:var(--warn); } .dash-lis .num.lis-danger { color:var(--danger); }
@media (max-width:820px) { .lis-limitler { grid-template-columns:1fr; } }

/* Guncelleme karti + bildirim bandi (2026-10-09) */
.gnc-notlar { margin-top:12px; }
.gnc-not { padding:8px 0; border-top:1px solid var(--border, #e5e8f0); }
.gnc-not { padding:12px 0 14px; }
.gnc-not__bas { display:flex; align-items:center; margin-bottom:8px; }
.gnc-eylem { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0; }
.gnc-ayar { display:grid; gap:10px; }
.gnc-log { margin-top:10px; }
.gnc-log > summary { cursor:pointer; font-size:13px; font-weight:600; }
.gnc-log-metin { max-height:320px; overflow:auto; font-size:12px; background:var(--surface-2, #f3f5f9); border:1px solid var(--border, #d6dbe6); border-radius:8px; padding:10px; white-space:pre-wrap; }
.lis-bar.lis-bar-info { --_lb:var(--info, #2563eb); }
.gnc-bar form { display:flex; gap:6px; }

/* Güncelleme rozeti + çekmecesi (2026-10-09; base.html, yalnız yönetici) */
.gnc-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--fg); font:inherit; font-size:13px; font-weight:600; cursor:pointer; margin-right:10px; line-height:1.2; }
.gnc-pill:hover { border-color:var(--info, #2563eb); }
.gnc-pill--guncellendi:hover { border-color:var(--success, #16a34a); }
.gnc-pill__dot { width:9px; height:9px; border-radius:50%; background:var(--info, #2563eb); box-shadow:0 0 0 0 rgba(37,99,235,.45); animation:gnc-nabiz 1.8s ease-out infinite; }
.gnc-pill--guncellendi .gnc-pill__dot { background:var(--success, #16a34a); animation-name:gnc-nabiz-yesil; }
@keyframes gnc-nabiz { 0% { box-shadow:0 0 0 0 rgba(37,99,235,.45); } 70% { box-shadow:0 0 0 9px rgba(37,99,235,0); } 100% { box-shadow:0 0 0 0 rgba(37,99,235,0); } }
@keyframes gnc-nabiz-yesil { 0% { box-shadow:0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow:0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow:0 0 0 0 rgba(22,163,74,0); } }
@media (max-width:720px) { .gnc-pill__t { display:none; } .gnc-pill { padding:6px 9px; } }
@media (prefers-reduced-motion: reduce) { .gnc-pill__dot { animation:none; } .gnc-cekmece { animation:none; } }
.gnc-perde { position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:60; }
.gnc-cekmece { position:fixed; top:0; right:0; bottom:0; width:min(470px, 100%); background:var(--surface); color:var(--fg); z-index:61; display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(15,23,42,.18); animation:gnc-kay .22s ease-out; }
@keyframes gnc-kay { from { transform:translateX(28px); opacity:0; } to { transform:none; opacity:1; } }
.gnc-kapat { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); background:transparent; color:inherit; cursor:pointer; flex:none; }
.gnc-kapat:hover { background:var(--surface-2); }
.gnc-cekmece__bas { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 22px 14px; border-bottom:1px solid var(--border); }
.gnc-cekmece__govde { padding:16px 22px; overflow:auto; flex:1; }
.gnc-aciklama { margin:0 0 16px; font-size:13.5px; line-height:1.55; }
.gnc-chip { display:inline-block; padding:2px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.gnc-satirlar { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.gnc-satir { display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:start; font-size:13.5px; line-height:1.45; }
.gnc-etiket { display:inline-block; text-align:center; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:700; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gnc-etiket--success { background:#e7f7ec; color:#15803d; border-color:#bfe8cc; }
.gnc-etiket--info { background:#e8f0fe; color:#1d4ed8; border-color:#c7d7fb; }
.gnc-etiket--warning { background:#fff4e0; color:#b45309; border-color:#fbe0b1; }
.gnc-etiket--danger { background:#fdecec; color:#b91c1c; border-color:#f7c5c5; }
.gnc-etiket--neutral { background:var(--surface-2); color:var(--fg-muted); border-color:var(--border); }
[data-theme="dark"] .gnc-etiket--success { background:rgba(22,163,74,.18); color:#4ade80; border-color:rgba(22,163,74,.35); }
[data-theme="dark"] .gnc-etiket--info { background:rgba(37,99,235,.2); color:#93c5fd; border-color:rgba(37,99,235,.4); }
[data-theme="dark"] .gnc-etiket--warning { background:rgba(180,83,9,.2); color:#fcd34d; border-color:rgba(180,83,9,.4); }
[data-theme="dark"] .gnc-etiket--danger { background:rgba(185,28,28,.2); color:#fca5a5; border-color:rgba(185,28,28,.4); }
.gnc-cekmece__alt { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 22px 18px; border-top:1px solid var(--border); }
.gnc-cekmece__alt form { margin:0; }
body.gnc-acik { overflow:hidden; }
/* `hidden` niteligi display:flex kuralini YENMELI — yoksa cekmece ve perde hep gorunur (olculdu) */
.gnc-cekmece[hidden], .gnc-perde[hidden] { display:none; }

/* Çekmece 2. tur: tek satır notlar (rozet + metin eşit hizada), geniş çekmece, "Önceki sürümler" ayracı */
.gnc-cekmece { width:min(620px, 100%); }
.gnc-satir { grid-template-columns:104px 1fr; align-items:center; white-space:nowrap; font-size:13.5px; line-height:1.4; }
.gnc-metin { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.gnc-etiket { font-size:12.5px; font-weight:600; line-height:1.4; padding:2px 8px; }
/* Hareket (kullanici: "biraz daha animasyonlu"): yayli kayma + perde solma, surum numarasinda gradyan + pop,
   satirlarin sirayla belirmesi, rozette parilti supurmesi + hover kaldirma. prefers-reduced-motion'da kapali. */
.gnc-perde { animation:gnc-perde-in .22s ease-out; }
@keyframes gnc-perde-in { from { opacity:0; } to { opacity:1; } }
.gnc-cekmece { animation:gnc-kay .34s cubic-bezier(.2, .9, .3, 1.08); }
@keyframes gnc-kay { from { transform:translateX(44px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes gnc-pop { from { transform:scale(.86) translateY(4px); opacity:0; } to { transform:none; opacity:1; } }
.gnc-aciklama { animation:gnc-giris .4s ease-out both; }
.gnc-satir { animation:gnc-giris .38s ease-out both; }
@keyframes gnc-giris { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.gnc-aciklama { animation-delay:.06s; }
.gnc-satirlar .gnc-satir:nth-child(1) { animation-delay:.10s; } .gnc-satirlar .gnc-satir:nth-child(2) { animation-delay:.15s; }
.gnc-satirlar .gnc-satir:nth-child(3) { animation-delay:.20s; } .gnc-satirlar .gnc-satir:nth-child(4) { animation-delay:.25s; }
.gnc-satirlar .gnc-satir:nth-child(5) { animation-delay:.30s; } .gnc-satirlar .gnc-satir:nth-child(6) { animation-delay:.35s; }
.gnc-satirlar .gnc-satir:nth-child(n+7) { animation-delay:.40s; }
.gnc-pill { position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.gnc-pill:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,99,235,.18); }
.gnc-pill[aria-expanded="true"] { background:var(--info); color:#fff; border-color:transparent; }
.gnc-pill[aria-expanded="true"] .gnc-pill__dot { background:#fff; animation:none; box-shadow:none; }
.gnc-pill::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform:translateX(-130%); animation:gnc-parilti 4.5s ease-in-out infinite; }
[data-theme="dark"] .gnc-pill::after { background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); }
@keyframes gnc-parilti { 0%, 72% { transform:translateX(-130%); } 100% { transform:translateX(130%); } }
.gnc-cekmece__alt .btn { transition:transform .15s ease, box-shadow .15s ease; }
.gnc-cekmece__alt .btn.primary:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(37,99,235,.28); }
.gnc-cekmece__alt .btn.primary:disabled { opacity:.6; }
.gnc-cekmece__alt .btn.primary:disabled svg { animation:gnc-don 1.2s linear infinite; }
@keyframes gnc-don { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gnc-perde, .gnc-cekmece, .gnc-aciklama, .gnc-satir, .gnc-pill::after,
  .gnc-cekmece__alt .btn.primary:disabled svg { animation:none; }
  .gnc-pill, .gnc-cekmece__alt .btn { transition:none; }
}
/* Çekmece 3. tur: notlar TAM yazılır (sarar), başlıklar açık metin ("Bu güncellemeyle gelenler", "Sürüm 1.2.1 · şu an kurulu") */
.gnc-satir { white-space:normal; align-items:start; }
.gnc-metin { overflow:visible; text-overflow:clip; white-space:normal; }
.gnc-etiket { margin-top:1px; }
/* Çekmece 3. tur: küçük etiket başlık, sürüm etiketi (v1.2.1), belirgin "Önceki sürümler" + zaman çizelgesi */
.gnc-etk { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); font-weight:700; margin:0 0 10px; }
.gnc-vtag { display:inline-flex; align-items:center; padding:3px 10px; border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; font-weight:700; color:var(--fg); background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--border-strong, var(--border)); box-shadow:0 1px 0 rgba(15,23,42,.05); }
.gnc-vkurulu { display:inline-flex; align-items:center; gap:4px; margin-left:8px; font-size:11.5px; font-weight:600; color:#15803d; background:#e7f7ec; border:1px solid #bfe8cc; border-radius:999px; padding:2px 9px; }
.gnc-vkurulu svg { width:12px; height:12px; }
[data-theme="dark"] .gnc-vkurulu { background:rgba(22,163,74,.18); color:#4ade80; border-color:rgba(22,163,74,.35); }
.gnc-ara { display:flex; align-items:center; gap:10px; margin:16px 0 8px; }
.gnc-vnot { font-size:12.5px; color:var(--fg-muted); }
.gnc-onceki { margin-top:22px; border-top:2px solid var(--border); padding-top:14px; }
.gnc-onceki__bas { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; margin-bottom:14px; color:var(--fg); }
.gnc-onceki__bas svg { width:18px; height:18px; color:var(--info); }
.gnc-onceki__sayi { margin-left:auto; font-size:12px; font-weight:600; color:var(--fg-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:2px 10px; }
.gnc-zaman { list-style:none; margin:0; padding:0 0 0 20px; position:relative; }
.gnc-zaman::before { content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--border); border-radius:2px; }
.gnc-zaman__oge { position:relative; padding:0 0 18px 12px; }
.gnc-zaman__oge:last-child { padding-bottom:0; }
.gnc-zaman__nokta { position:absolute; left:-20px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--info); box-sizing:border-box; }
.gnc-zaman__oge--kurulu .gnc-zaman__nokta { background:#16a34a; border-color:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.18); }
.gnc-zaman__bas { display:flex; align-items:center; margin-bottom:8px; }
.gnc-zaman .gnc-satirlar { gap:6px; }
.gnc-etk, .gnc-ara, .gnc-onceki__bas, .gnc-zaman__oge { animation:gnc-giris .4s ease-out both; animation-delay:.42s; }
@media (prefers-reduced-motion: reduce) { .gnc-etk, .gnc-ara, .gnc-onceki__bas, .gnc-zaman__oge { animation:none; } }
/* Çekmece başlığı: hero (ikon rozeti + düz başlık + büyük sürüm etiketi) — küçük üstbaşlık + dev sayı kalktı */
.gnc-cekmece__bas { padding:18px 22px 16px; background:linear-gradient(135deg, rgba(37,99,235,.09), rgba(124,58,237,.05) 55%, transparent); }
.gnc-cekmece--guncellendi .gnc-cekmece__bas { background:linear-gradient(135deg, rgba(22,163,74,.10), rgba(14,165,233,.05) 55%, transparent); }
.gnc-hero { display:flex; align-items:center; gap:14px; min-width:0; }
.gnc-hero__ikon { position:relative; flex:none; width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--info) 0%, #7c3aed 100%); box-shadow:0 8px 20px rgba(37,99,235,.28); animation:gnc-pop .5s cubic-bezier(.2, .9, .3, 1.35) both; }
.gnc-hero__ikon svg { width:22px; height:22px; }
.gnc-hero__ikon::after { content:""; position:absolute; inset:-5px; border-radius:18px; border:2px solid var(--info); opacity:0; animation:gnc-halka 2.4s ease-out .5s infinite; }
.gnc-cekmece--guncellendi .gnc-hero__ikon { background:linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%); box-shadow:0 8px 20px rgba(22,163,74,.28); }
.gnc-cekmece--guncellendi .gnc-hero__ikon::after { border-color:#16a34a; }
@keyframes gnc-halka { 0% { transform:scale(.9); opacity:.55; } 70%, 100% { transform:scale(1.25); opacity:0; } }
.gnc-hero__metin { min-width:0; }
.gnc-hero__bas { margin:0; font-size:18px; font-weight:700; line-height:1.25; font-family:"Space Grotesk", var(--font-display, sans-serif); animation:gnc-giris .4s ease-out both; }
.gnc-hero__alt { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; animation:gnc-giris .4s ease-out .08s both; }
.gnc-vtag--buyuk { font-size:14px; padding:4px 12px; color:var(--info); border-color:rgba(37,99,235,.35); background:linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.05)); }
.gnc-cekmece--guncellendi .gnc-vtag--buyuk { color:#15803d; border-color:rgba(22,163,74,.4); background:linear-gradient(180deg, rgba(22,163,74,.14), rgba(22,163,74,.05)); }
[data-theme="dark"] .gnc-vtag--buyuk { color:#93c5fd; }
[data-theme="dark"] .gnc-cekmece--guncellendi .gnc-vtag--buyuk { color:#4ade80; }
.gnc-hero__bilgi { font-size:12.5px; color:var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .gnc-hero__ikon, .gnc-hero__bas, .gnc-hero__alt { animation:none; } .gnc-hero__ikon::after { display:none; } }
/* Zaman çizelgesi sürüm rozetleri: dolu gradyan çip (görünürlük) */
.gnc-zaman .gnc-vtag, .gnc-ara .gnc-vtag, .gnc-notlar .gnc-vtag { font-size:13.5px; padding:5px 14px; color:#fff; border:0; letter-spacing:.02em; background:linear-gradient(135deg, var(--info) 0%, #7c3aed 100%); box-shadow:0 4px 12px rgba(37,99,235,.28); }
.gnc-zaman__oge--kurulu .gnc-vtag, .gnc-not--kurulu .gnc-vtag { background:linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%); box-shadow:0 4px 12px rgba(22,163,74,.28); }
.gnc-zaman__nokta { width:14px; height:14px; left:-21px; top:9px; border-width:3px; }
.gnc-zaman__oge--kurulu .gnc-zaman__nokta { box-shadow:0 0 0 5px rgba(22,163,74,.18); }
.gnc-zaman__bas { margin-bottom:10px; }
.gnc-vkurulu { font-size:12px; padding:3px 10px; }
/* Zaman çizelgesinde sürümler arası kesme (kullanıcı isteği) */
.gnc-zaman__oge { padding-bottom:16px; }
.gnc-zaman__oge + .gnc-zaman__oge { margin-top:2px; padding-top:16px; border-top:1px dashed var(--border-strong, var(--border)); }
.gnc-zaman__oge + .gnc-zaman__oge .gnc-zaman__nokta { top:25px; }
/* Yayın notlarında bağlantı (çekmece + Ayarlar kartı) */
.gnc-link { color:var(--info); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; border-radius:3px; }
.gnc-link:hover { text-decoration-thickness:2px; background:rgba(37,99,235,.08); }
[data-theme="dark"] .gnc-link { color:#93c5fd; }
/* Yayın notu bağlantısı: metinli bağlantıda hedef ana makine adı (gizlenmesin) */
.gnc-host { margin-left:4px; font-size:11.5px; color:var(--fg-muted); }


/* ============================================================
   ANA SAYFA — KOMUTA MERKEZİ (tema turu 2026-10-14, kullanıcı kararı: koyu lacivert
   hero + belirgin hareket, GitHub ana sayfası hissi). Şablon: dashboard.html, veri:
   panel/dashboard_ctx.py. Tüm hareket yalnız transform/opacity/stroke-dashoffset;
   genişlikler betikle (data-pct) → prefers-reduced-motion'da tek statik kare.
   Token adları bu sayfanın dünyasından: gece (zemin), derin (orta ton), ufuk (vurgu),
   ışık-1/2/3 (süzülen parıltılar), cam (yarı saydam yüzey), çizgi (ince kenar).
   ============================================================ */
:root {
  --dh-gece:#0a1538; --dh-derin:#0f2d78; --dh-ufuk:#1d57e0;
  --dh-isik-1:rgba(96,154,250,.62); --dh-isik-2:rgba(45,212,191,.42); --dh-isik-3:rgba(167,139,250,.42);
  --dh-hero-fg:#eef3ff; --dh-hero-muted:rgba(238,243,255,.74); --dh-hero-faint:rgba(238,243,255,.52);
  --dh-cam:rgba(255,255,255,.08); --dh-cam-hover:rgba(255,255,255,.15); --dh-cizgi:rgba(255,255,255,.14);
  --dh-akis:#8fd3ff; --dh-nokta:#9fdcff; --dh-canli:#34d399; --dh-ikaz:#fbbf24;
  --dh-t-hero:clamp(var(--t-3xl), 2.6vw, 40px);
  --dh-t-kpi:40px;
  --dh-ease:cubic-bezier(.23, 1, .32, 1);
}
:root[data-theme="dark"] {
  --dh-gece:#050b1f; --dh-derin:#0b2160; --dh-ufuk:#2f6fe8;
  --dh-isik-1:rgba(91,156,255,.5); --dh-isik-2:rgba(45,212,191,.34); --dh-isik-3:rgba(167,139,250,.36);
  --dh-cam:rgba(255,255,255,.06); --dh-cam-hover:rgba(255,255,255,.12); --dh-cizgi:rgba(255,255,255,.11);
}

/* ---------- HERO ---------- */
.dh-hero { position:relative; isolation:isolate; overflow:hidden; color:var(--dh-hero-fg);
  border-radius:var(--radius-lg); padding:var(--sp-8) var(--sp-8);
  background:linear-gradient(118deg, var(--dh-gece) 0%, var(--dh-derin) 52%, var(--dh-gece) 100%);
  box-shadow:0 30px 60px -30px rgba(10,21,56,.55), 0 2px 10px rgba(10,21,56,.12);
  animation:dh-giris .6s var(--dh-ease) both; }
.dh-hero__sky { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.dh-hero__sky::after { content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(var(--dh-cizgi) 1px, transparent 1.4px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 72% 42%, #000 18%, transparent 68%);
  mask-image:radial-gradient(ellipse at 72% 42%, #000 18%, transparent 68%); }
.dh-hero__glow { position:absolute; border-radius:50%; filter:blur(64px); will-change:transform;
  animation:dh-suzul 22s ease-in-out infinite alternate; }
.dh-hero__glow--a { width:560px; height:560px; top:-240px; left:-140px;
  background:radial-gradient(circle, var(--dh-isik-1), transparent 62%); }
.dh-hero__glow--b { width:620px; height:620px; right:-200px; top:-120px; animation-duration:28s; animation-delay:-9s;
  background:radial-gradient(circle, var(--dh-isik-3), transparent 62%); }
.dh-hero__glow--c { width:420px; height:420px; left:38%; bottom:-260px; animation-duration:18s; animation-delay:-4s;
  background:radial-gradient(circle, var(--dh-isik-2), transparent 62%); }
@keyframes dh-suzul { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(80px,46px,0) scale(1.18); } }

.dh-hero__body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--sp-7); align-items:center; }
.dh-hero__eyebrow { display:inline-flex; align-items:center; gap:var(--sp-3); font-family:var(--display);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dh-hero-faint); }
.dh-hero__eyebrow svg.ic { width:14px; height:14px; }
/* ⚠️ Temanın h1 rengi (koyu metin) mirası ezer → açık temada koyu zeminde koyu yazı. Renk AÇIKÇA. */
.dh-hero__h1 { color:var(--dh-hero-fg); font-size:var(--dh-t-hero); line-height:1.08; letter-spacing:-.035em; margin:var(--sp-4) 0 var(--sp-4);
  text-wrap:balance; }
.dh-hero__lead { display:flex; align-items:flex-start; gap:var(--sp-3); margin:0; max-width:56ch;
  font-size:var(--t-xl); line-height:1.5; color:var(--dh-hero-muted); text-wrap:pretty; }
.dh-hero__lead .dh-dot { margin-top:8px; }
.dh-hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-7); }
.dh-btn.ax-btn { height:44px; padding-inline:var(--sp-6); border-radius:var(--radius-pill); font-weight:600;
  color:#fff; background:linear-gradient(135deg, #3b7bff 0%, #1d57e0 100%); border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px -10px rgba(59,123,255,.85), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s var(--dh-ease), box-shadow .18s var(--dh-ease), filter .18s; }
/* ⚠️ Tema @layer içinde: katmansız global `a{color}` düğme yazısını EZİYORDU (mavi üstüne mavi). */
a.dh-btn.ax-btn, a.dh-btn.ax-btn:hover { color:#fff; }
.dh-btn.ax-btn:hover { transform:translateY(-1px); filter:brightness(1.08);
  box-shadow:0 14px 30px -10px rgba(59,123,255,.95), inset 0 1px 0 rgba(255,255,255,.3); }
.dh-btn.ax-btn:active { transform:scale(.97); }
.dh-btn svg.ic { width:16px; height:16px; }
.dh-chip { display:inline-flex; align-items:center; gap:var(--sp-3); height:44px; padding:0 var(--sp-5) 0 var(--sp-4);
  border-radius:var(--radius-pill); color:var(--dh-hero-fg); background:var(--dh-cam); border:1px solid var(--dh-cizgi);
  font-size:var(--t-lg); font-weight:500; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .18s var(--dh-ease), transform .18s var(--dh-ease), border-color .18s; }
.dh-chip b { font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }
.dh-chip svg.ic { width:16px; height:16px; opacity:.85; }
.dh-chip:hover { background:var(--dh-cam-hover); color:var(--dh-hero-fg); transform:translateY(-1px); }
.dh-chip:active { transform:scale(.97); }
.dh-chip--ok b { color:#7ef2d8; }
.dh-chip--warn { border-color:rgba(238,176,74,.55); } .dh-chip--warn b { color:#ffd27a; }
.dh-chip--danger { border-color:rgba(255,128,128,.6); background:rgba(255,99,99,.14); } .dh-chip--danger b { color:#ffb3b3; }

/* Durum noktası (hero cümlesi + sağlık listesi) */
.dh-dot { display:inline-block; flex:none; width:10px; height:10px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 24%, transparent); }
.dh-dot--ok { animation:dh-nefes 2.8s ease-in-out infinite; }
.dh-dot--warn { background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 26%, transparent); }
.dh-dot--danger { background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 26%, transparent);
  animation:dh-nefes 1.4s ease-in-out infinite; }
.dh-hero .dh-dot--ok { background:#3ddb87; box-shadow:0 0 0 3px rgba(61,219,135,.3); }
.dh-hero .dh-dot--warn { background:#eeb04a; box-shadow:0 0 0 3px rgba(238,176,74,.3); }
.dh-hero .dh-dot--danger { background:#ff8080; box-shadow:0 0 0 3px rgba(255,128,128,.3); }
@keyframes dh-nefes { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.82); opacity:.72; } }

/* ---------- Canlı altyapı haritası (vCenter cihazı + ESXi satırları; `_dash_harita.html`) ---------- */
.dh-hero__map { min-width:0; }
.dh-map__hat { fill:none; stroke:var(--dh-cizgi); stroke-width:1.5; }
.dh-map__akis { fill:none; stroke:var(--dh-akis); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:3 11; opacity:.9; animation:dh-akis 1.9s linear infinite; }
@keyframes dh-akis { to { stroke-dashoffset:-28; } }
/* ---- vCenter CİHAZI (kullanıcı 2026-10-14: "vCenter adı içeren bir bilgisayar gibi") ----
   Ön panelli sunucu: güç + ağ ışığı, havalandırma ızgarası, ekranda ad/sürüm/ESXi sayısı
   (ekranda yavaşça inen tarama çizgisi), disk yuvaları (rastgele yanıp sönen etkinlik ışıkları).
   Dikey (satır düzeni, solda) ve yatay (`--yatay`, sütun düzeni, üstte) iki biçim. */
.dh-vc { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
.dh-vc__on { position:relative; width:152px; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-4);
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 5px rgba(91,156,255,.07);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.dh-vc__bant { display:flex; align-items:center; gap:var(--sp-2); }
.dh-vc__led { flex:none; width:6px; height:6px; border-radius:50%; }
.dh-vc__led--guc { background:#3ddb87; box-shadow:0 0 8px rgba(61,219,135,.95); animation:dh-nefes 2.8s ease-in-out infinite; }
.dh-vc__led--ag { background:#8fd3ff; box-shadow:0 0 8px rgba(143,211,255,.95); animation:dh-kirp 1.7s steps(1, end) infinite; }
@keyframes dh-kirp { 0%, 100% { opacity:1; } 12% { opacity:.25; } 20% { opacity:1; } 58% { opacity:.3; } 64% { opacity:1; } }
.dh-vc__izgara { margin-left:auto; display:flex; gap:3px; }
.dh-vc__izgara i { width:12px; height:3px; border-radius:2px; background:rgba(255,255,255,.2); }
.dh-vc__ekran { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:2px; padding:var(--sp-3) var(--sp-3);
  border-radius:var(--radius-xs); background:linear-gradient(180deg, #050f2c 0%, #0a1d4f 100%);
  border:1px solid rgba(126,242,216,.28); box-shadow:inset 0 0 18px rgba(91,156,255,.28); }
.dh-vc__ekran::after { content:""; position:absolute; left:0; right:0; top:-40%; height:40%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(126,242,216,.14), transparent);
  animation:dh-tara 4.5s linear infinite; }
@keyframes dh-tara { to { transform:translateY(350%); } }
.dh-vc__tur { font-family:var(--display); font-size:var(--t-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#7ef2d8; }
.dh-vc__ad { font-family:var(--display); font-size:var(--t-md); font-weight:700; line-height:1.25; color:#fff;
  text-shadow:0 0 12px rgba(126,242,216,.35); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dh-vc__alt { font-family:var(--mono); font-size:var(--t-xs); color:rgba(238,243,255,.62); }
.dh-vc__yuvalar { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px; }
.dh-vc__yuvalar i { position:relative; height:8px; border-radius:3px; background:rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.dh-vc__yuvalar i::after { content:""; position:absolute; right:3px; top:2.5px; width:3px; height:3px; border-radius:50%;
  background:#3ddb87; box-shadow:0 0 5px rgba(61,219,135,.9); animation:dh-kirp 1.3s steps(1, end) infinite; }
.dh-vc__yuvalar i:nth-child(2)::after { animation-duration:1.9s; animation-delay:-.4s; }
.dh-vc__yuvalar i:nth-child(3)::after { animation-duration:1.1s; animation-delay:-.9s; }
.dh-vc__yuvalar i:nth-child(4)::after { animation-duration:2.3s; animation-delay:-.2s; }
.dh-vc__ek { font-size:var(--t-xs); color:var(--dh-hero-faint); }

/* ---- Satır düzeni (≥4 ESXi): HTML satırlar, yazı boyu sabit ---- */
/* ⚠️ Yalnız geniş ekranda: `:has` daha özgül olduğu için dar ekranın tek sütun kuralını EZİYORDU. */
@media (min-width:1181px) { .dh-hero__body:has(.dh-hs) { grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr); } }
/* Harita kendi genişliğine göre düzen değiştirir (pencereye değil): kenar çubuğu açıkken
   820px pencerede bile harita ~440px kalıyor ve ESXi adları kesiliyordu. */
.dh-hero__map { container-type:inline-size; }
.dh-hs { --dh-hs-h:28px; --dh-hs-kolon:minmax(0,1fr) 96px 68px 68px; display:flex; flex-direction:column; gap:var(--sp-2); }
.dh-hs__govde { display:grid; grid-template-columns:152px minmax(0,1fr); }
.dh-hs__sag { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); align-self:center; min-width:0; }
.dh-hs__kok { display:flex; align-items:center; justify-content:center; }
.dh-hs__hatlar { position:relative; }
.dh-hs__hatlar svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dh-hs__liste { list-style:none; margin:0; padding:0; display:grid; }
.dh-hs__liste > li { height:var(--dh-hs-h); display:flex; align-items:center; animation:dh-giris .5s var(--dh-ease) both; }
.dh-hs__liste > li:nth-child(2) { animation-delay:.04s; } .dh-hs__liste > li:nth-child(3) { animation-delay:.08s; }
.dh-hs__liste > li:nth-child(4) { animation-delay:.12s; } .dh-hs__liste > li:nth-child(5) { animation-delay:.16s; }
.dh-hs__liste > li:nth-child(6) { animation-delay:.2s; } .dh-hs__liste > li:nth-child(7) { animation-delay:.24s; }
.dh-hs__liste > li:nth-child(8) { animation-delay:.28s; } .dh-hs__liste > li:nth-child(9) { animation-delay:.32s; }
.dh-hs__liste > li:nth-child(10) { animation-delay:.36s; }
.dh-hs__satir { flex:1 1 auto; min-width:0; height:24px; display:grid; grid-template-columns:8px var(--dh-hs-kolon); gap:var(--sp-3);
  align-items:center; padding:0 var(--sp-4) 0 var(--sp-3); border-radius:var(--radius-pill); color:var(--dh-hero-fg);
  background:var(--dh-cam); border:1px solid var(--dh-cizgi); transition:background-color .18s, border-color .18s; }
a.dh-hs__satir[href]:hover { background:var(--dh-cam-hover); border-color:rgba(255,255,255,.26); color:#fff; }
.dh-hs__isik { width:8px; height:8px; border-radius:50%; background:#3ddb87; box-shadow:0 0 8px rgba(61,219,135,.85); }
.dh-hs__isik--sicak { background:#eeb04a; box-shadow:0 0 8px rgba(238,176,74,.9); }
.dh-hs__ad { font-family:var(--mono); font-size:var(--t-sm); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ESXi'ye bağlı sunucular: en çok 12 ışıklı nokta (6 × 2), fazlası "+N" */
.dh-hs__vmler { display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.dh-hs__noktalar { display:grid; grid-template-columns:repeat(6, 5px); grid-auto-rows:5px; gap:3px; }
/* ⚠️ Satırdaki sunucu noktaları SABİT (animasyonsuz, parıltısız): çubukların hemen yanında sürekli
   yanıp sönmeleri "çubuklarda beyaz ışık patlaması" olarak görüldü (kullanıcı bulgusu 2026-10-14). */
.dh-hs__noktalar > i { width:5px; height:5px; border-radius:50%; background:#7fb3f5; opacity:.9; }
.dh-hs__vmler em { font-style:normal; font-size:var(--t-xs); color:var(--dh-hero-faint); white-space:nowrap; }
.dh-hs__olcu { display:flex; align-items:center; gap:var(--sp-2); }
.dh-hs__olcu b { flex:none; width:3.6ch; text-align:right; font-size:var(--t-xs); font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
.dh-hs__iz { flex:1 1 auto; height:6px; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); overflow:hidden; }
.dh-hs__dolu { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, #2f7bff, #4fc3f7);
  transition:width 1s var(--dh-ease); }
.dh-hs__olcu--ram .dh-hs__dolu { background:linear-gradient(90deg, #7c5cfc, #b18cff); }
/* "+N ESXi daha" düğmesi (kullanıcı: "görünmüyor, güzel buton yap") — satır sütununa hizalı */
/* Alt şerit: renk açıklaması solda, "+N ESXi daha" düğmesi sağda; satır sütununa hizalı */
.dh-hs__alt { display:flex; margin-left:calc(152px + 36px); }
/* Sütun etiketleri: satırların hemen üstünde, sütunlarla aynı ızgara (renk işaretli) */
.dh-hs { padding-top:22px; }
.dh-hs__bas { position:absolute; left:36px; right:0; bottom:calc(100% + 5px); display:grid;
  grid-template-columns:var(--dh-hs-kolon); gap:var(--sp-3); padding:0 var(--sp-4) 0 24px;
  font-size:var(--t-xs); font-weight:500; color:rgba(238,243,255,.8); }
.dh-hs__bas > span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.dh-hs__lj { display:inline-block; flex:none; width:14px; height:6px; border-radius:var(--radius-pill); }
.dh-hs__lj--cpu { background:linear-gradient(90deg, #2f7bff, #4fc3f7); }
.dh-hs__lj--ram { background:linear-gradient(90deg, #7c5cfc, #b18cff); }
.dh-hs__lj--vm { width:6px; background:#8cc8ff; }
.dh-hs__daha { flex:1 1 auto; display:flex; align-items:center; gap:var(--sp-3); height:32px;
  padding:0 var(--sp-3) 0 var(--sp-4); border-radius:var(--radius-pill); color:#fff; font-size:var(--t-sm);
  background:linear-gradient(90deg, rgba(91,156,255,.26), rgba(126,242,216,.16)); border:1px solid rgba(143,211,255,.45);
  box-shadow:0 8px 22px -12px rgba(91,156,255,.9), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s var(--dh-ease), background-color .18s, box-shadow .18s; }
.dh-hs__daha svg.ic { width:15px; height:15px; color:#8fd3ff; }
.dh-hs__daha-t { font-weight:600; color:#fff; }
.dh-hs__daha-ok { margin-left:auto; color:#fff; padding:3px var(--sp-4); border-radius:var(--radius-pill); font-size:var(--t-xs); font-weight:600;
  background:rgba(255,255,255,.14); }
.dh-hs__daha:hover { color:#fff; transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(91,156,255,1), inset 0 1px 0 rgba(255,255,255,.24); }
.dh-hs__daha:hover .dh-hs__daha-ok { background:rgba(255,255,255,.24); }
.dh-hs__daha:active { transform:scale(.98); }
.dh-hs__bos { display:flex; align-items:center; padding:0 var(--sp-5); color:var(--dh-hero-muted); font-size:var(--t-sm); }
.dh-hs__bos a { color:#fff; text-decoration:underline; margin-left:4px; }
/* ---- Birden çok vCenter: sekmeler + üst üste paneller (yükseklik sabit, dönerken zıplamaz) ---- */
.dh-vcs { display:flex; flex-direction:column; gap:var(--sp-4); }
.dh-vcs__sekmeler { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.dh-vcs__sekme { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:var(--sp-3); height:32px;
  padding:0 var(--sp-4); border-radius:var(--radius-pill); cursor:pointer; font:inherit; font-size:var(--t-sm); font-weight:500;
  color:var(--dh-hero-muted); background:var(--dh-cam); border:1px solid var(--dh-cizgi);
  transition:background-color .18s, color .18s, border-color .18s; }
.dh-vcs__sekme:hover { color:#fff; background:var(--dh-cam-hover); }
.dh-vcs__sekme.is-aktif { color:#fff; background:rgba(91,156,255,.22); border-color:rgba(143,211,255,.55); }
.dh-vcs__sekme b { padding:1px 7px; border-radius:var(--radius-pill); font-size:var(--t-xs); font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; background:rgba(255,255,255,.14); }
.dh-vcs__ad { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-vcs__led { flex:none; width:7px; height:7px; border-radius:50%; background:#3ddb87; box-shadow:0 0 7px rgba(61,219,135,.9); }
.dh-vcs__led--sicak { background:#eeb04a; box-shadow:0 0 7px rgba(238,176,74,.9); }
.dh-vcs__ilerleme { position:absolute; left:0; bottom:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, #5b9cff, #7ef2d8); }
.dh-vcs__sekme.is-aktif .dh-vcs__ilerleme { animation:dh-ilerle 8s linear forwards; }
.dh-vcs.is-durdu .dh-vcs__ilerleme { animation-play-state:paused; }
@keyframes dh-ilerle { to { transform:scaleX(1); } }
.dh-vcs__paneller { display:grid; }
.dh-vcs__panel { grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .45s var(--dh-ease), transform .45s var(--dh-ease), visibility 0s linear .45s; }
.dh-vcs__panel.is-aktif { opacity:1; visibility:visible; transform:none;
  transition:opacity .45s var(--dh-ease), transform .45s var(--dh-ease), visibility 0s; }
.dh-map__bos { display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); padding:var(--sp-7);
  border:1px dashed var(--dh-cizgi); border-radius:var(--radius); color:var(--dh-hero-muted); text-align:center; }
.dh-map__bos svg.ic { width:28px; height:28px; opacity:.7; }
.dh-map__not { margin-top:var(--sp-3); text-align:center; font-size:var(--t-sm); color:var(--dh-hero-faint); }
.dh-map__daha { color:var(--dh-hero-muted); } .dh-map__daha:hover { color:#fff; }
/* Müşteri filosu: cam kutucuklar */
.dh-filo { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-4); }
.dh-filo__t { display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); border-radius:var(--radius);
  background:var(--dh-cam); border:1px solid var(--dh-cizgi); color:var(--dh-hero-fg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .22s var(--dh-ease), background-color .22s, border-color .22s;
  animation:dh-giris .55s var(--dh-ease) both; }
.dh-filo__t:nth-child(2) { animation-delay:.08s; } .dh-filo__t:nth-child(3) { animation-delay:.16s; }
.dh-filo__t:nth-child(4) { animation-delay:.24s; } .dh-filo__t:nth-child(5) { animation-delay:.32s; } .dh-filo__t:nth-child(6) { animation-delay:.4s; }
.dh-filo__t:hover { transform:translateY(-2px); background:var(--dh-cam-hover); border-color:rgba(255,255,255,.26); color:#fff; }
.dh-filo__bas { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.dh-filo__ad { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-filo__alt { font-size:var(--t-xs); color:var(--dh-hero-faint); }
.dh-filo__cpu { display:flex; align-items:center; gap:var(--sp-3); }
.dh-filo__cpu b { flex:none; min-width:4ch; text-align:right; font-variant-numeric:tabular-nums; font-size:var(--t-sm); color:#fff; }
.dh-filo__spark { display:block; flex:1 1 auto; height:22px; overflow:visible; }
.dh-filo__spark polyline { fill:none; stroke:var(--dh-akis); stroke-width:1.6; stroke-linejoin:round; }
.dh-filo__isik { flex:none; width:9px; height:9px; border-radius:50%; background:#8a96b3; }
.dh-filo__isik--on { background:#3ddb87; box-shadow:0 0 8px rgba(61,219,135,.9); animation:dh-nefes 2.6s ease-in-out infinite; }
.dh-filo__isik--susp { background:#ff8080; box-shadow:0 0 8px rgba(255,128,128,.9); animation:dh-nefes 1.4s ease-in-out infinite; }
.dh-filo__isik--prov { background:#5b9cff; box-shadow:0 0 8px rgba(91,156,255,.9); animation:dh-nefes 1.1s ease-in-out infinite; }

/* ---------- Kademeli giriş ---------- */
@keyframes dh-giris { from { opacity:0; transform:translate3d(0,14px,0); } to { opacity:1; transform:none; } }
.dh-giris > * { animation:dh-giris .55s var(--dh-ease) both; }
.dh-giris > :nth-child(1) { animation-delay:.08s; } .dh-giris > :nth-child(2) { animation-delay:.14s; }
.dh-giris > :nth-child(3) { animation-delay:.2s; } .dh-giris > :nth-child(4) { animation-delay:.26s; }
.dh-grid.dh-giris > :nth-child(1) { animation-delay:.3s; } .dh-grid.dh-giris > :nth-child(2) { animation-delay:.38s; }
.dh-grid--alt.dh-giris > :nth-child(1) { animation-delay:.44s; } .dh-grid--alt.dh-giris > :nth-child(2) { animation-delay:.52s; }

/* ---------- KPI şeridi (kullanıcı 2026-10-14: "yazılar okunmuyor, daha güzel kartlar") ----------
   Okunurluk: başlık 14px/600 koyu, parçalar 13px (sayı kalın + koyu), eksen 11px; zemin OPAK
   (temanın camı %72 saydamdı, metin kontrastını düşürüyordu). Her kartın kendi rengi `--k`
   (ikon çipi, köşe ışığı, ilerleme vurgusu); renk anlam taşır: mavi filo, cyan trafik, mor iş, amber uyarı. */
.dh-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-5); margin-top:var(--sp-6); }
.dh-kpi { --k:#2f6fe8; --k-rgb:47,111,232; position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--sp-4); min-height:212px; padding:var(--sp-6) var(--sp-6) var(--sp-5);
  color:var(--fg); text-decoration:none; background:var(--surface);
  transition:transform .22s var(--dh-ease), box-shadow .22s var(--dh-ease), border-color .22s; }
.dh-kpi--cyan { --k:#0891b2; --k-rgb:8,145,178; }
.dh-kpi--mor { --k:#7c5cfc; --k-rgb:124,92,252; }
.dh-kpi--amber { --k:#d97706; --k-rgb:217,119,6; }
[data-theme="dark"] .dh-kpi { --k:#5b9cff; --k-rgb:91,156,255; }
[data-theme="dark"] .dh-kpi--cyan { --k:#38bdf8; --k-rgb:56,189,248; }
[data-theme="dark"] .dh-kpi--mor { --k:#a78bfa; --k-rgb:167,139,250; }
[data-theme="dark"] .dh-kpi--amber { --k:#fbbf24; --k-rgb:251,191,36; }
/* köşe ışığı: kartın rengi, çok hafif; fareyle biraz güçlenir */
.dh-kpi::before { content:""; position:absolute; z-index:-1; top:-90px; right:-70px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--k-rgb), .16), transparent 66%); transition:opacity .3s, transform .5s var(--dh-ease); }
[data-theme="dark"] .dh-kpi::before { background:radial-gradient(circle, rgba(var(--k-rgb), .2), transparent 66%); }
.dh-kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); color:var(--fg); border-color:rgba(var(--k-rgb), .45); }
.dh-kpi:hover::before { transform:scale(1.15); }
.dh-kpi:active { transform:translateY(-1px) scale(.995); }
.dh-kpi__top { display:flex; align-items:center; gap:var(--sp-4); }
.dh-kpi__ikon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:13px; color:var(--k);
  background:linear-gradient(145deg, rgba(var(--k-rgb), .2), rgba(var(--k-rgb), .08));
  box-shadow:inset 0 0 0 1px rgba(var(--k-rgb), .22); }
.dh-kpi__ikon svg.ic { width:19px; height:19px; }
/* Ek bilgi başlığın YANINDA parantez içinde (kullanıcı: "Trafik (Son 24 saat)") */
.dh-kpi__baslik { flex:1 1 auto; min-width:0; line-height:1.3; font-size:var(--t-lg); font-weight:600; color:var(--fg); }
.dh-kpi__baslik em { font-style:normal; font-size:var(--t-md); font-weight:500; color:var(--fg-muted); white-space:nowrap; }
.dh-kpi__git { flex:none; font-size:var(--t-xl); color:var(--k); opacity:0; transform:translateX(-6px);
  transition:opacity .2s, transform .2s var(--dh-ease); }
.dh-kpi:hover .dh-kpi__git, .dh-kpi:focus-visible .dh-kpi__git { opacity:1; transform:none; }
.dh-kpi__deger { font-family:var(--display); font-size:var(--dh-t-kpi); font-weight:700; line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:var(--fg); }
.dh-kpi__deger small { font-size:var(--t-xl); font-weight:500; color:var(--fg-muted); letter-spacing:-.01em; }
/* parçalar: renk noktası + kalın sayı + açıklama */
.dh-kpi__parca { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  font-size:var(--t-md); color:var(--fg-muted); }
.dh-kpi__parca li { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.dh-kpi__parca b { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.dh-kpi__parca--kotu, .dh-kpi__parca--kotu b { color:var(--danger); }
.dh-kpi__nk { flex:none; width:8px; height:8px; border-radius:50%; background:var(--fg-faint); }
.dh-kpi__nk--ok { background:var(--ok); } .dh-kpi__nk--danger { background:var(--danger); }
.dh-kpi__nk--info { background:var(--info); } .dh-kpi__nk--warn { background:var(--warn); }
.dh-kpi__nk--gelen { background:var(--k); } .dh-kpi__nk--giden { background:#7c5cfc; }
[data-theme="dark"] .dh-kpi__nk--giden { background:#a78bfa; }
.dh-kotu { color:var(--danger); font-weight:600; }
.dh-kpi__gorsel { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.dh-kpi__eksen { display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--t-xs); color:var(--fg-muted); white-space:nowrap; }
.dh-kpi__bos { font-size:var(--t-sm); color:var(--fg-muted); }
/* uyarı yokken: belirgin olumlu durum */
.dh-kpi__tamam { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--ok-soft); color:var(--ok); font-size:var(--t-md); font-weight:600; }
.dh-kpi__tamam svg.ic { flex:none; width:18px; height:18px; }
.dh-kpi__tamam small { display:block; font-size:var(--t-xs); font-weight:500; color:var(--fg-muted); }
.dh-kpi--warn .dh-kpi__deger { color:var(--warn); } .dh-kpi--danger .dh-kpi__deger { color:var(--danger); }
.dh-kpi--danger { border-color:color-mix(in srgb, var(--danger) 45%, var(--border)); }

.dh-spark { display:block; width:100%; height:48px; overflow:visible; }
.dh-spark__alan { fill:var(--k); opacity:.16; }
.dh-spark__cizgi { fill:none; stroke:var(--k); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.dh-spark__cizgi--giden { stroke:#7c5cfc; stroke-width:1.6; stroke-dasharray:4 3; }
[data-theme="dark"] .dh-spark__cizgi--giden { stroke:#a78bfa; }
.dh-bars { display:block; width:100%; height:48px; }
.dh-bars rect { fill:var(--k); opacity:.75; }
.dh-bars rect.dh-bars__bos { opacity:.16; }
.dh-bars rect.dh-bars__hata { fill:var(--danger); opacity:.95; }
.dh-stack { display:flex; gap:2px; height:10px; border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-3); }
.dh-stack > span { display:block; height:100%; width:0; transition:width .9s var(--dh-ease); }
.dh-stack__on { background:var(--ok); } .dh-stack__susp { background:var(--danger); } .dh-stack__prov { background:var(--info); }
.dh-uyari { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.dh-uyari li { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--t-md); min-width:0; }
.dh-uyari .dh-dot { width:8px; height:8px; box-shadow:none; animation:none; }
.dh-uyari__t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); }

/* ---------- Çubuk / ölçü (kapasite, tablo) ---------- */
.dh-bar { display:block; position:relative; height:8px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; }
.dh-bar--sm { height:6px; }
.dh-bar__dolu { display:block; height:100%; width:0; border-radius:inherit; transition:width 1s var(--dh-ease);
  background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 62%, transparent), var(--primary)); }
.dh-bar--ram .dh-bar__dolu { background:linear-gradient(90deg, color-mix(in srgb, var(--uc-ram, #7c5cfc) 62%, transparent), var(--uc-ram, #7c5cfc)); }
.dh-bar--disk .dh-bar__dolu { background:linear-gradient(90deg, color-mix(in srgb, var(--uc-disk, #16a34a) 62%, transparent), var(--uc-disk, #16a34a)); }
.dh-bar--ip .dh-bar__dolu { background:linear-gradient(90deg, color-mix(in srgb, #0ea5e9 62%, transparent), #0ea5e9); }
.dh-bar--warn .dh-bar__dolu { background:linear-gradient(90deg, color-mix(in srgb, var(--warn) 62%, transparent), var(--warn)); }
.dh-bar--crit .dh-bar__dolu { background:linear-gradient(90deg, color-mix(in srgb, var(--danger) 62%, transparent), var(--danger)); }

/* ---------- Kart iskeleti ---------- */
.dh-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--sp-5); margin-top:var(--sp-5); align-items:stretch; }
.dh-grid--alt { grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:stretch; }
/* Son sunucular + Olay akışı EŞİT boy (kullanıcı 2026-10-15). Son sunucular listesi DOLUYSA (>=8 satır,
   `dh-grid--sun-dolu`) satır yüksekliğini o belirler: Olay akışı `contain:size` ile katkı vermez, gerilir,
   içi kayar. Liste kısaysa (müşteri 3 sunucu) iki kart Olay akışının boyunda eşitlenir — aksi halde akış
   ~170px'e sıkışıyordu (ölçüldü). Tek sütunda (<=1180px) sınır kalkar. */
@media (min-width:1181px) {
  .dh-grid--sun-dolu > .dh-olay { contain:size; }
  .dh-olay .dh-olay__govde { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .dh-olay .dh-olay__panel:not([hidden]) { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .dh-olay .dh-olay__liste { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    margin-right:calc(-1 * var(--sp-3)); padding-right:var(--sp-3); scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
  .dh-olay .dh-olay__daha { flex:none; }
}
.dh-card { display:flex; flex-direction:column; min-width:0; }
/* Kart başlık bandı (kullanıcı 2026-10-14): kartın renginde hafif tonlu zemin + alt çizgi (soldaki dikey
   şerit kullanıcı isteğiyle kaldırıldı), renkli ikon
   kutusu, başlık + özet satırı, sağda hap düğme. Renk `--b` (mavi/mor/yeşil/amber/kırmızı) anlam taşır. */
.dh-card { overflow:hidden; }
.dh-card__bas { --b:var(--primary); position:relative; display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
  background:linear-gradient(100deg, color-mix(in srgb, var(--b) 11%, var(--surface)) 0%, color-mix(in srgb, var(--b) 3%, var(--surface)) 60%, var(--surface) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--b) 16%, var(--border)); }
.dh-card__bas--mor { --b:#7c5cfc; } .dh-card__bas--yesil { --b:var(--ok); }
.dh-card__bas--amber { --b:var(--warn); } .dh-card__bas--kirmizi { --b:var(--danger); }
[data-theme="dark"] .dh-card__bas--mor { --b:#a78bfa; }
.dh-card__ikon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:12px; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--b) 78%, #fff), var(--b));
  box-shadow:0 6px 16px -6px color-mix(in srgb, var(--b) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }
[data-theme="dark"] .dh-card__ikon { color:#0b1220; }
.dh-card__ikon svg.ic { width:18px; height:18px; }
.dh-card__baslik { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.dh-card__h { font-size:var(--t-xl); font-weight:700; letter-spacing:-.015em; line-height:1.2; color:var(--fg); }
.dh-card__ozet { font-size:var(--t-sm); color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-card__btn { flex:none; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 var(--sp-4);
  border-radius:var(--radius-pill); font-size:var(--t-sm); font-weight:600; white-space:nowrap; color:var(--b);
  background:var(--surface); border:1px solid color-mix(in srgb, var(--b) 35%, var(--border));
  transition:background-color .18s, color .18s, transform .18s var(--dh-ease); }
.dh-card__btn span { transition:transform .18s var(--dh-ease); }
.dh-card__btn:hover { background:var(--b); color:#fff; border-color:var(--b); }
[data-theme="dark"] .dh-card__btn:hover { color:#0b1220; }
.dh-card__btn:hover span { transform:translateX(2px); }
.dh-card__btn:active { transform:scale(.97); }
.dh-card__meta, .dh-card__link { font-size:var(--t-sm); color:var(--fg-faint); white-space:nowrap; }
.dh-card__link:hover { color:var(--primary); }
.dh-card__govde { padding:var(--sp-5) var(--sp-6) var(--sp-6); }
/* Ara başlık (kullanıcı 2026-10-14: "Fiziksel sunucular / Datastore'lar yazısı ve sayısı pek görünür değil"):
   11px soluk BÜYÜK HARF yerine 14px kalın koyu metin; sayı rozeti mavi zeminli. */
/* Ara başlık ŞERİDİ (kullanıcı 2026-10-14: "ekranın ortasında düz yazı olarak durmasınlar"): açık zeminli,
   kenarlıklı bant; solda ikon kutusu, başlık, sayı rozeti; varsa sağda bağlantı. */
.dh-alt-h { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-6) 0 var(--sp-4);
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); border-radius:var(--radius-sm);
  background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, var(--surface-2)), var(--surface-2));
  border:1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  font-family:var(--display); font-size:var(--t-lg); font-weight:700; letter-spacing:-.005em; color:var(--fg); }
.dh-alt-h__ikon { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:8px;
  background:var(--surface); color:var(--primary); box-shadow:0 1px 2px rgba(10,21,56,.08), inset 0 0 0 1px var(--border); }
.dh-alt-h__ikon svg.ic { width:15px; height:15px; }
.dh-alt-h .ax-badge { letter-spacing:0; text-transform:none; }
.dh-bos { padding:var(--sp-6); text-align:center; color:var(--fg-faint); font-size:var(--t-sm); }

/* ---------- KAPASİTE + SAĞLIK (kullanıcı 2026-10-14: "bu iki alanın tasarımını beğenmedim") ---------- */
.dh-alt-h__sayi { display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:24px; margin-left:var(--sp-1);
  padding:0 8px; border-radius:var(--radius-pill); background:var(--primary-soft); color:var(--primary); font-size:var(--t-sm);
  font-weight:700; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.dh-alt-h .dh-card__link { margin-left:auto; font-family:var(--sans); font-weight:600; color:var(--primary); }

/* Halka göstergeler: dolgu açılışta 0'dan çizilir (yalnız stroke-dasharray), eşikte amber/kırmızı */
.dh-halkalar { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-4); }
.dh-halka { --h:var(--primary); display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; }
.dh-halka--ram { --h:var(--uc-ram, #7c3aed); } .dh-halka--disk { --h:var(--uc-disk, #07734a); } .dh-halka--ip { --h:#0284c7; }
[data-theme="dark"] .dh-halka--ip { --h:#38bdf8; }
.dh-halka--warn { --h:var(--warn); } .dh-halka--crit { --h:var(--danger); }
.dh-halka__cizim { position:relative; width:100%; max-width:118px; aspect-ratio:1; }
.dh-halka__cizim svg { display:block; width:100%; height:100%; overflow:visible; }
.dh-halka__iz { fill:none; stroke:var(--surface-3); stroke-width:10; }
.dh-halka__dolu { fill:none; stroke:var(--h); stroke-width:10; stroke-linecap:round;
  filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--h) 35%, transparent));
  animation:dh-halka-ac 1.2s var(--dh-ease) .25s both; }
@keyframes dh-halka-ac { from { stroke-dasharray:0 301.59; } }
.dh-halka__ic { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
.dh-halka__ic b { font-family:var(--display); font-size:var(--t-2xl); font-weight:700; letter-spacing:-.02em; color:var(--fg);
  font-variant-numeric:tabular-nums; }
.dh-halka__ic span { margin-top:2px; font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; color:var(--h); }
.dh-halka__alt { font-size:var(--t-sm); line-height:1.4; color:var(--fg-muted); font-variant-numeric:tabular-nums; text-wrap:balance; }
/* Tahsis kutusu (`dh-tk`): halkanın KENDİ sütununda, halkayla aynı eksende ortalanmış yumuşak kutu.
   Satır: etiket ··· sağda yüzde/değer · ince çubuk · küçük değer. Aşırı satış (>=%100) amber. */
/* aynı satırdaki kutular EŞİT boy: sütun (listitem) gerilir, halka sütunu dolar, kutu kalan yeri alır */
.dh-halkalar > [role=listitem] { display:flex; }
.dh-halkalar .dh-halka { flex:1 1 auto; }
.dh-tk { flex:1 1 auto; width:100%; max-width:200px; margin-top:var(--sp-3); padding:var(--sp-3); display:flex; flex-direction:column;
  gap:var(--sp-3); text-align:left; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); }
.dh-tk__s { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-2); row-gap:4px; align-items:baseline;
  font-size:var(--t-xs); line-height:1.25; }
.dh-tk__s + .dh-tk__s { padding-top:var(--sp-3); border-top:1px solid var(--border); }
.dh-tk__ad { color:var(--fg-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-tk__pct { color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dh-tk__iz { grid-column:1 / -1; display:block; height:4px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; }
.dh-tk__dolu { display:block; height:100%; width:0; border-radius:inherit; background:var(--h); opacity:.55; transition:width 1s var(--dh-ease); }
.dh-tk__d { grid-column:1 / -1; color:var(--fg-muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-tk__s--asim .dh-tk__pct, .dh-tk__s--asim .dh-tk__d { color:var(--warn); }
.dh-tk__s--asim .dh-tk__dolu { background:var(--warn); opacity:1; }
/* IP kutusu: üç sayı satırı (çubuksuz) arası ayırıcı yok, sıkı */
.dh-halka--ip .dh-tk { gap:var(--sp-2); }
.dh-halka--ip .dh-tk__s + .dh-tk__s { padding-top:0; border-top:0; }

/* ESXi kutucukları */
/* Satırda SABİT 4 kutucuk (kullanıcı 2026-10-14); kart dar kalınca 2, telefonda 1 (container query) */
.dh-kap .dh-card__govde { container-type:inline-size; }
.dh-esxi-izgara { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-3); }
@container (max-width:560px) { .dh-esxi-izgara { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@container (max-width:340px) { .dh-esxi-izgara { grid-template-columns:minmax(0,1fr); } }
.dh-esxi-k { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); color:var(--fg);
  transition:transform .18s var(--dh-ease), border-color .18s, box-shadow .18s; }
.dh-esxi-k:hover { color:var(--fg); transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow:var(--shadow-md); }
.dh-esxi-k__bas { display:flex; align-items:flex-start; gap:var(--sp-3); min-width:0; }
.dh-esxi-k__isik { flex:none; width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dh-esxi-k__isik--sicak { background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
/* Ad kesilmez: dar kutucukta "(etiket)" alt satıra sarar (ESXi adı DAİMA "IP (etiket)") */
.dh-esxi-k__ad { font-family:var(--mono); font-size:var(--t-sm); font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.dh-esxi-k__etiket { white-space:nowrap; }
.dh-esxi-k__vm { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); color:var(--fg-muted); }
.dh-esxi-k__vm svg.ic { width:13px; height:13px; }
.dh-esxi-k__olcu { display:grid; grid-template-columns:26px minmax(0,1fr) 3.6ch; align-items:center; gap:var(--sp-3);
  font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); }
.dh-esxi-k__olcu b { text-align:right; color:var(--fg); font-variant-numeric:tabular-nums; }
/* "+N daha" düğmesi (kullanıcı: "okunmuyor bile, daha iyi bir buton yap"): ızgaranın altında tam genişlik */
.dh-daha { display:flex; align-items:center; gap:var(--sp-3); height:40px; margin-top:var(--sp-3); padding:0 var(--sp-2) 0 var(--sp-4);
  border-radius:var(--radius-sm); font-size:var(--t-md); color:var(--primary);
  background:color-mix(in srgb, var(--primary) 6%, var(--surface)); border:1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  transition:background-color .18s, color .18s, border-color .18s, transform .18s var(--dh-ease); }
.dh-daha svg.ic { flex:none; width:16px; height:16px; }
.dh-daha__t { flex:1 1 auto; font-weight:500; color:var(--fg); }
.dh-daha__t b { color:var(--primary); font-weight:800; }
.dh-daha__ok { flex:none; display:inline-flex; align-items:center; height:28px; padding:0 var(--sp-4); border-radius:var(--radius-pill);
  font-size:var(--t-sm); font-weight:700; color:#fff; background:var(--primary);
  box-shadow:0 4px 12px -4px color-mix(in srgb, var(--primary) 70%, transparent); }
[data-theme="dark"] .dh-daha__ok { color:var(--on-primary); }
.dh-daha:hover { color:var(--primary); border-style:solid; background:color-mix(in srgb, var(--primary) 11%, var(--surface)); }
.dh-daha:active { transform:scale(.99); }

/* Datastore ızgarası */
.dh-ds-izgara { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3) var(--sp-6); }
.dh-ds-k { display:flex; flex-direction:column; gap:6px; padding:var(--sp-2) var(--sp-3); margin:0 calc(-1 * var(--sp-3));
  border-radius:var(--radius-xs); color:var(--fg); transition:background-color .15s; }
.dh-ds-k:hover { background:var(--surface-2); color:var(--fg); }
.dh-ds-k__bas { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); }
.dh-ds-k__ad { font-family:var(--mono); font-size:var(--t-sm); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-ds-k__bas b { font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums; }
.dh-ds-k__boyut { font-size:var(--t-xs); color:var(--fg-muted); font-variant-numeric:tabular-nums; }

/* Sayaç şeridi: üç KÜÇÜK, SADE istatistik kutusu (kullanıcı 2026-10-14: "çok büyük; renkli yapma, zemin düz
   beyaz"). Zemin kartın yüzeyi, ikon kutusu nötr; yalnız hover'da ince mavi kenar + ok. */
.dh-sayaclar { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3); margin-top:var(--sp-6);
  padding-top:var(--sp-5); border-top:1px solid var(--border); }
@container (max-width:520px) { .dh-sayaclar { grid-template-columns:minmax(0,1fr); } }
.dh-sayac { position:relative; display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm); color:var(--fg); background:var(--surface); border:1px solid var(--border);
  transition:border-color .18s, box-shadow .18s; }
.dh-sayac:hover { color:var(--fg); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow:var(--shadow-sm); }
.dh-sayac__ikon { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:9px;
  color:var(--fg-muted); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.dh-sayac__ikon svg.ic { width:16px; height:16px; }
.dh-sayac__govde { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.dh-sayac__ust { display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; }
.dh-sayac__deger { font-family:var(--display); font-size:var(--t-xl); font-weight:700; line-height:1.2; letter-spacing:-.01em;
  color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dh-sayac__deger small { font-size:var(--t-sm); font-weight:600; color:var(--fg-muted); }
.dh-sayac__ad { font-size:var(--t-md); font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-sayac__alt { font-size:var(--t-xs); line-height:1.3; color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ok yer KAPLAMAZ (köşede) */
.dh-sayac__git { position:absolute; top:50%; right:var(--sp-3); margin-top:-.6em; font-size:var(--t-md); color:var(--primary);
  opacity:0; transform:translateX(-4px); transition:opacity .18s, transform .18s var(--dh-ease); }
.dh-sayac:hover .dh-sayac__git, .dh-sayac:focus-visible .dh-sayac__git { opacity:1; transform:none; }

/* Sağlık: durum bandı */
.dh-durum { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-sm);
  background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.dh-durum--uyari { background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.dh-durum--kotu { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
.dh-durum__ikon { position:relative; display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%;
  background:currentColor; }
.dh-durum__ikon svg.ic { width:20px; height:20px; color:var(--surface); }
.dh-durum__ikon::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor;
  animation:dh-dalga 2.4s var(--dh-ease) infinite; }
@keyframes dh-dalga { from { transform:scale(1); opacity:.55; } to { transform:scale(1.6); opacity:0; } }
.dh-durum__metin { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dh-durum__metin b { font-size:var(--t-xl); font-weight:700; }
.dh-durum__metin small { font-size:var(--t-sm); color:var(--fg-muted); }

/* Sağlık: bileşen + görev listeleri (kullanıcı 2026-10-14: "daha iyi bir şey yapalım") — TEK beyaz panel,
   satırlar ince çizgiyle ayrılır; renk yalnız durum etiketinde (`dh-etiket`). */
.dh-panel-liste { list-style:none; margin:0; padding:0; display:grid; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); overflow:hidden; }
.dh-panel-liste > li { display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  box-shadow:inset 0 -1px 0 var(--border); font-size:var(--t-md); }
.dh-panel-liste > li:last-child { box-shadow:none; }
/* iki sütun: sağ sütunla arasında dikey çizgi; tek kalan son satır iki sütuna yayılır */
.dh-panel-liste--iki { grid-template-columns:repeat(2, minmax(0,1fr)); }
.dh-panel-liste--iki > li:nth-child(odd) { box-shadow:inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
.dh-panel-liste--iki > li:nth-last-child(-n+2):nth-child(odd) { box-shadow:inset -1px 0 0 var(--border); }
.dh-panel-liste--iki > li:nth-last-child(-n+2):nth-child(even) { box-shadow:none; }
/* tek kalan son satır YAYILMAZ (kullanıcı bulgusu: geniş ekranda "İşler"in etiketi en sağa kayıyordu) */
.dh-panel-liste--iki > li:last-child:nth-child(odd) { box-shadow:inset -1px 0 0 var(--border); }
.dh-panel-liste__ikon { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:7px;
  color:var(--fg-muted); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.dh-panel-liste__ikon svg.ic { width:14px; height:14px; }
.dh-panel-liste__ad { flex:1 1 auto; min-width:0; font-weight:500; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-panel-liste__ad em { font-style:normal; color:var(--fg-muted); }
.dh-panel-liste__zaman { flex:none; font-size:var(--t-sm); color:var(--fg-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
a.dh-panel-liste__link:hover { color:var(--primary); }
.dh-panel-liste > li.is-sorun { background:var(--danger-soft); }
.dh-panel-liste > li.is-sorun .dh-panel-liste__ikon { color:var(--danger); }
.dh-panel-liste--iki > li.is-uyari { background:var(--warn-soft); }
.dh-panel-liste--iki > li.is-uyari .dh-panel-liste__ikon { color:var(--warn); }
a.dh-etiket--uyari { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent); }
a.dh-etiket--uyari:hover { color:var(--warn); filter:brightness(.95); }
/* durum etiketi: nokta + kısa metin */
.dh-etiket { flex:none; display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 var(--sp-3); border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:600; white-space:nowrap; }
.dh-etiket::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.dh-etiket--ok { color:var(--ok); background:var(--ok-soft); }
.dh-etiket--uyari { color:var(--warn); background:var(--warn-soft); }
.dh-etiket--sorun { color:var(--danger); background:var(--danger-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
a.dh-etiket--sorun:hover { color:var(--danger); filter:brightness(.95); }
@container (max-width:460px) { .dh-panel-liste--iki { grid-template-columns:minmax(0,1fr); }
  .dh-panel-liste--iki > li, .dh-panel-liste--iki > li:nth-child(odd) { box-shadow:inset 0 -1px 0 var(--border); }
  .dh-panel-liste--iki > li:last-child, .dh-panel-liste--iki > li:last-child:nth-child(odd) { box-shadow:none; } }
.dh-sag .dh-card__govde { container-type:inline-size; }

/* Kara Liste / Lisans: panel listesinde DEĞER satırı — ikon · başlık + açıklama · sağda büyük renkli değer.
   `.head` / `.sub` / `.num` ÖLÇÜT sözleşmesi (sınıf adları korunur). */
.dh-panel-liste--deger > li { align-items:center; padding-top:var(--sp-3); padding-bottom:var(--sp-3); }
.dh-panel-liste__metin { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dh-panel-liste__metin .head { font-size:var(--t-md); font-weight:600; color:var(--fg); }
.dh-panel-liste__metin .head em { margin-left:var(--sp-2); padding:1px 7px; border-radius:var(--radius-pill); font-style:normal;
  font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.dh-panel-liste__metin .sub { font-size:var(--t-xs); line-height:1.45; color:var(--fg-muted); }
.dh-panel-liste__deger { flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right; padding-left:var(--sp-3); }
.dh-panel-liste__deger .num { font-family:var(--display); font-size:var(--t-2xl); font-weight:700; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--fg); white-space:nowrap; }
.dh-panel-liste__deger .num small { font-size:var(--t-sm); font-weight:600; color:var(--fg-muted); }
/* Kara Liste "45/55": iki sayı EŞİT boy (kullanıcı 2026-10-14); `<small>` ölçüt sözleşmesi için kalır */
#dash-spam .num small { font-size:inherit; font-weight:inherit; letter-spacing:inherit; }
.dh-panel-liste__deger .num[data-ton="danger"] { color:var(--danger); } .dh-panel-liste__deger .num[data-ton="ok"] { color:var(--ok); }
.dh-panel-liste__birim { font-size:var(--t-xs); color:var(--fg-muted); white-space:nowrap; }
/* dar panelde ad kesilmez, sarar */
@container (max-width:380px) { .dh-panel-liste__ad { white-space:normal; overflow:visible; } }
/* uyarı tonu yalnız ikon kutusunda (satır zemini beyaz kalır) */
.dh-panel-liste--deger > li.is-uyari .dh-panel-liste__ikon { color:var(--warn); background:var(--warn-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
#dash-spam.is-uyari .dh-panel-liste__ikon { color:var(--danger); background:var(--danger-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }

/* Sunucu tablosu + sparkline */
/* Son sunucular listesi (`dh-sun`): satır = OS logosu · kimlik · CPU/RAM çubukları · durum etiketi + zaman.
   Liste kartın gövdesinde kendi container'ı: dar kartta ölçü sütunu alt satıra iner. */
.dh-sun-govde { flex:1 1 auto; padding-top:var(--sp-3); container-type:inline-size; display:flex; flex-direction:column; }
/* "Tüm sanal sunucular" düğmesi kartın DİBİNDE (eşit boylu kartta Olay akışı düğmesiyle aynı hizada) */
.dh-sunucular { margin-bottom:var(--sp-4); } .dh-sun__daha { margin-top:auto; }
.dh-sun__daha .dh-daha__t b { margin-left:4px; }
.dh-sunucular { list-style:none; margin:0; padding:0; display:grid; }
.dh-sunucular > li + li { box-shadow:inset 0 1px 0 var(--border); }
.dh-sun { display:grid; grid-template-columns:36px minmax(0,1fr) 170px 96px; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-3); margin:0 calc(-1 * var(--sp-3)); border-radius:var(--radius-sm); color:var(--fg);
  transition:background-color .15s; }
.dh-sun:hover { background:var(--surface-2); color:var(--fg); }
/* OS karosu: Sanal Sunucular kartındakiyle AYNI (kullanıcı 2026-10-16) — mavi degrade + beyaz logo; Linux'ta
   büyük Tux alttan yükselir (ayaklar kırpılır, kutu `overflow:hidden`). Renk/degrade tek kaynak: `.vl-os` kuralı. */
.dh-sun__os { position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; overflow:hidden; }
.dh-sun__os .os-logo { width:18px; height:18px; }
.dh-sun__os svg.ic { width:17px; height:17px; }
.dh-sun__os .os-logo--linux { width:100%; height:100%; -webkit-mask-size:41px 41px; mask-size:41px 41px;
  -webkit-mask-position:50% 5px; mask-position:50% 5px; }
.dh-sun__kimlik { min-width:0; display:flex; flex-direction:column; gap:2px; }
.dh-sun__ad { flex:0 0 auto; font-family:var(--mono); font-size:var(--t-md); font-weight:600; color:var(--fg); white-space:nowrap; }
.dh-sun:hover .dh-sun__ad { color:var(--primary); }
.dh-sun__alt { display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--sp-2); row-gap:2px; font-size:var(--t-xs); color:var(--fg-muted); }
.dh-sun__alt > span + span::before { content:"·"; margin-right:var(--sp-2); color:var(--fg-faint); }
.dh-sun__ust { display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
/* sahip: IP'nin yanında küçük hap (alt satıra sarıp başta "·" bırakıyordu) */
.dh-sun__sahip { flex:0 1 auto; min-width:0; display:inline-flex; align-items:center; gap:4px; max-width:240px; height:20px; padding:0 8px;
  border-radius:var(--radius-pill); font-size:var(--t-xs); font-weight:500; color:var(--fg-muted); background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-sun__sahip svg.ic { flex:none; width:11px; height:11px; }
.dh-sun__sahip--silindi s { text-decoration-color:var(--danger); }
.dh-sun__olcu { display:flex; flex-direction:column; gap:5px; min-width:0; }
.dh-sun__m { display:grid; grid-template-columns:28px minmax(0,1fr) 3.6ch; align-items:center; gap:var(--sp-2);
  font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); }
.dh-sun__m b { text-align:right; color:var(--fg); font-variant-numeric:tabular-nums; }
.dh-sun__yok { font-size:var(--t-xs); color:var(--fg-faint); }
.dh-sun__durum { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.dh-sun__durum time { font-size:var(--t-xs); color:var(--fg-muted); white-space:nowrap; }
.dh-etiket--info { color:var(--info); background:var(--info-soft); }
.dh-etiket--notr { color:var(--fg-muted); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
@container (max-width:560px) {
  .dh-sun { grid-template-columns:36px minmax(0,1fr) auto; row-gap:var(--sp-2); }
  .dh-sun__olcu { grid-column:2 / -1; grid-row:2; }
}

/* Olay akışı */
/* Olay akışı (`dh-olay`, 2026-10-15): sekmeler + gün başlıklı liste; Sağlık/Son sunucular ile aynı dil.
   Satır: türe göre ikon (durum tonunda) · ad + alt satır (sunucu · başlatan · süre) · sağda etiket + saat. */
.dh-olay__govde { padding-top:var(--sp-4); }
.dh-olay__sekmeler { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3); padding:4px; border-radius:var(--radius-pill);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.dh-olay__sekme { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:32px;
  border:0; border-radius:var(--radius-pill); background:transparent; color:var(--fg-muted); font:inherit; font-size:var(--t-sm);
  font-weight:600; cursor:pointer; transition:background-color .15s, color .15s, box-shadow .15s; }
.dh-olay__sekme svg.ic { width:14px; height:14px; }
.dh-olay__sekme b { padding:0 7px; border-radius:var(--radius-pill); font-size:var(--t-xs); background:var(--surface-3); color:var(--fg-muted); }
.dh-olay__sekme:hover { color:var(--fg); }
.dh-olay__sekme.is-aktif { background:var(--surface); color:var(--fg); box-shadow:0 1px 3px rgba(10,21,56,.1), inset 0 0 0 1px var(--border); }
.dh-olay__sekme.is-aktif b { background:var(--primary-soft); color:var(--primary); }
.dh-olay__panel[hidden] { display:none; }
.dh-olay__liste { list-style:none; margin:0; padding:0; }
.dh-olay__gun { position:relative; margin:var(--sp-3) 0 var(--sp-1); padding:0 0 var(--sp-1); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.04em; color:var(--fg-muted); }
.dh-olay__liste > .dh-olay__gun:first-child { margin-top:0; }
.dh-olay__s { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); margin:0 calc(-1 * var(--sp-3)); border-radius:var(--radius-sm); color:var(--fg); transition:background-color .15s; }
.dh-olay__s:hover { background:var(--surface-2); color:var(--fg); }
.dh-olay__ikon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--fg-muted);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.dh-olay__ikon svg.ic { width:15px; height:15px; }
.dh-olay__ikon--ok { color:var(--ok); background:var(--ok-soft); box-shadow:none; }
.dh-olay__ikon--sorun { color:var(--danger); background:var(--danger-soft); box-shadow:none; }
.dh-olay__ikon--uyari { color:var(--warn); background:var(--warn-soft); box-shadow:none; }
.dh-olay__ikon--info { color:var(--info); background:var(--info-soft); box-shadow:none; }
.dh-olay__metin { min-width:0; display:flex; flex-direction:column; gap:2px; }
.dh-olay__ad { font-size:var(--t-md); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-olay__s:hover .dh-olay__ad { color:var(--primary); }
.dh-olay__alt { display:flex; flex-wrap:wrap; column-gap:var(--sp-2); row-gap:1px; font-size:var(--t-xs); color:var(--fg-muted); min-width:0; }
.dh-olay__alt > span + span::before { content:"·"; margin-right:var(--sp-2); color:var(--fg-faint); }
.dh-olay__alt .mono { font-size:var(--t-xs); }
.dh-olay__sag { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.dh-olay__sag time { font-size:var(--t-xs); color:var(--fg-muted); font-variant-numeric:tabular-nums; }
.dh-olay__daha { margin-top:var(--sp-4); }


/* ---------- Dar ekranlar ---------- */
@media (max-width:1180px) {
  .dh-hero__body { grid-template-columns:1fr; }
  .dh-hero__map { max-width:560px; }
  .dh-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dh-grid, .dh-grid--alt { grid-template-columns:1fr; }
}
/* Orta genişlik (kenar çubuğu açıkken içerik ~520-760px): ESXi satırı iki sıraya iner
   (ad + rozet / CPU + RAM) — tek sırada etiketler birbirine giriyordu (%20RAM). */
@media (max-width:1180px) {
  .dh-halkalar { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .dh-hero { padding:var(--sp-7) var(--sp-5); border-radius:var(--radius); }
  .dh-hero__h1 { font-size:var(--t-3xl); }
  .dh-hero__lead { font-size:var(--t-lg); }
  .dh-kpis { grid-template-columns:1fr; }
  .dh-halkalar { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:var(--sp-5); }
  .dh-ds-izgara { grid-template-columns:1fr; }
  .dh-card__ozet { white-space:normal; }
  .dh-card__bas { padding-left:var(--sp-5); gap:var(--sp-3); }
}

/* ---------- Dar HARİTA (container query): cihaz satırların üstünde yatay, hatlar gizli ---------- */
@container (max-width:600px) {
  .dh-hs__govde, .dh-hs__sag { grid-template-columns:minmax(0,1fr); }
  .dh-hs__govde { row-gap:var(--sp-4); }
  .dh-hs__hatlar { display:none; }
  .dh-hs__alt { margin-left:0; }
  .dh-hs__bas { left:0; }
  .dh-vcs__sekmeler { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .dh-vcs__sekmeler::-webkit-scrollbar { display:none; }
  .dh-vcs__sekme { flex:none; }
  .dh-hs__kok .dh-vc { width:100%; }
  .dh-hs__kok .dh-vc__on { width:100%; flex-direction:row; align-items:stretch; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); }
  .dh-hs__kok .dh-vc__bant { flex-direction:column; justify-content:center; }
  .dh-hs__kok .dh-vc__izgara { display:none; }
  .dh-hs__kok .dh-vc__ekran { flex:1 1 auto; }
  .dh-hs__kok .dh-vc__yuvalar { grid-template-columns:repeat(2, 26px); align-content:center; }
}
@container (max-width:440px) {
  .dh-hs { --dh-hs-kolon:minmax(0,1fr) 58px 58px; }
  .dh-hs__vmler, .dh-hs__bas > :nth-child(2) { display:none; }
  .dh-hs__ad { font-size:var(--t-xs); }
  .dh-hs__kok .dh-vc__yuvalar { display:none; }
}

/* Canlı tazeleme sonrası (`html.dh-sessiz`, dashboard.html): değiştirilen düğümlerde giriş/dolma
   animasyonları TEKRAR OYNAMAZ — her dakika sayfa "yeniden açılıyor" gibi görünürdü. */
.dh-sessiz .dh-giris > *, .dh-sessiz .dh-halka__dolu, .dh-sessiz .dh-hs__liste > li { animation:none !important; }
.dh-sessiz .dh-bar__dolu, .dh-sessiz .dh-stack > span, .dh-sessiz .dh-hs__dolu, .dh-sessiz .dh-tk__dolu { transition:none !important; }

/* ---------- Azaltılmış hareket: tek statik kare ---------- */
@media (prefers-reduced-motion: reduce) {
  .dh-hero, .dh-hero__glow, .dh-map__akis, .dh-dot, .dh-hs__liste > li, .dh-vcs__ilerleme, .dh-vcs__panel,
  .dh-vc__led, .dh-vc__ekran::after, .dh-vc__yuvalar i::after,
  .dh-giris > *, .dh-filo__t, .dh-filo__isik, .dh-halka__dolu,
  .dh-durum__ikon::after { animation:none !important; }
  .dh-filo__t { transition:none !important; }
  .dh-vcs__panel { transition:none !important; transform:none !important; }
  .dh-hs__dolu { transition:none !important; }
  .dh-bar__dolu, .dh-stack > span, .dh-kpi, .dh-chip { transition:none !important; }
}


/* ============================================================
   ORTAK KABUK (tema turu 2026-10-15, kullanıcı: "üstteki beyaz çubuk ve sol menüyü güncelle").
   Üst şerit (ikinci tasarım; zemin menüyle aynı beyaz yüzey, kenarlar içerikle hizalı) —
   sayfa grubu + adı · canlı durum (yönetici) · komut paleti (/ · Ctrl+K) · tema · hesap menüsü.
   Sol menü: gruplu, sıkı satırlar, belirgin aktif öğe, görünür ince kaydırma + alt solma.
   Mobil (<768px): temanın kendi çekmecesi `html[data-ax-drawer=open]` + perde (`.sv-perde`).
   ============================================================ */
/* ---------- Üst şerit ----------
   Zemin SOL MENÜYLE AYNI (kullanıcı 2026-10-15: "rengi soldaki menü gibi beyaz zemin olmalı, mavi fazla çırtlak"):
   temanın yükseltilmiş yüzeyi + ince kenarlık + hafif gölge + cam bulanıklığı; koyu temada tema kendisi koyulaşır.
   Kenarlar alttaki içerikle AYNI hizada (kullanıcı: "altındaki kutular ile eşit olmalı"): sağda tema 16px bırakıyor,
   solda içerik tema dolgusu kadar içeride başlıyor → şerit de o kadar içeriden başlar.
   ⚠️ `inset:auto` ŞART: tema, ayrık kabukta başlığa `inset-inline-start:calc(menü genişliği…)` veriyor; konum
   `static`ken etkisiz, `relative` olunca şeridi o kadar sağa itip ekrandan taşırıyordu. */
.ax-header.sv-ust { position:relative; inset:auto; z-index:40; overflow:visible; gap:var(--sp-3);
  block-size:68px; min-height:68px; padding:0 var(--sp-3) 0 var(--sp-4); color:var(--fg);
  background:var(--ax-sidebar-bg, var(--ax-surface-raised)); -webkit-backdrop-filter:blur(14px) saturate(1.05); backdrop-filter:blur(14px) saturate(1.05); }
/* İçerik dolgusu temanın `[data-ax-width=full] .ax-main > :not(.ax-footer)` kuralından = --ax-space-4 (ölçüldü:
   bridge.css'teki --ax-space-6 ezilir). Şerit aynı değeri kullanır; genişlik ayarı değişirse ikisi birlikte değişmeli. */
@media (min-width:768px) { .ax-header.sv-ust { margin-inline-start:var(--ax-space-4, 16px); } }

.sv-ust .ax-icon-btn { position:relative; width:38px; height:38px; border-radius:11px; color:var(--fg-muted); }
.sv-ust .ax-icon-btn:hover { color:var(--fg); background:var(--surface-2); }
.sv-ust__menu { display:none; }
.sv-ust__menu svg.ic { width:20px; height:20px; }
.sv-ust__tema #theme-ic { font-size:var(--t-xl); line-height:1; }

/* sayfa kimliği: ikon karosu + grup + ad (karo, menünün seçili öğesiyle aynı yumuşak mavi) */
.sv-ust__yol { display:flex; align-items:center; gap:var(--sp-3); min-width:0; flex:0 1 auto; }
.sv-ust__ikon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent); }
.sv-ust__ikon svg.ic { width:19px; height:19px; }
.sv-ust__metin { display:flex; flex-direction:column; min-width:0; gap:3px; }
.sv-ust__grup { font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; line-height:1;
  color:var(--fg-faint); white-space:nowrap; }
.sv-ust__sayfa { font-family:var(--display); font-size:var(--t-xl); font-weight:700; letter-spacing:-.02em; line-height:1.15;
  color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }

/* canlı durum çipleri */
.sv-nabiz { display:flex; align-items:stretch; margin-left:var(--sp-4); height:40px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); }
.sv-nabiz__k { display:flex; align-items:center; gap:7px; padding:0 var(--sp-3); color:var(--fg-muted);
  font-size:var(--t-sm); white-space:nowrap; transition:background-color .15s, color .15s; }
.sv-nabiz__k + .sv-nabiz__k { border-left:1px solid var(--border); }
.sv-nabiz__k:first-child { border-radius:11px 0 0 11px; } .sv-nabiz__k:last-child { border-radius:0 11px 11px 0; }
.ax-header .sv-nabiz__k:hover { color:var(--fg); background:var(--surface); }
.sv-nabiz__k b { font-family:var(--mono); font-size:var(--t-md); font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.sv-nabiz__k b small { font-size:var(--t-xs); font-weight:500; color:var(--fg-faint); }
.sv-nabiz__k svg.ic { width:15px; height:15px; color:var(--fg-faint); }
.sv-nabiz__nokta { position:relative; width:8px; height:8px; border-radius:50%; background:var(--dh-canli); box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.sv-nabiz__nokta::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--dh-canli); animation:sv-nabiz 2.4s ease-out infinite; }
@keyframes sv-nabiz { 0% { transform:scale(1); opacity:.7; } 80%, 100% { transform:scale(3.2); opacity:0; } }
.sv-nabiz__k--is svg.ic { color:var(--primary); animation:sv-nabiz-is 1.6s ease-in-out infinite; }
@keyframes sv-nabiz-is { 50% { opacity:.35; } }
.sv-nabiz__k--uyari svg.ic, .sv-nabiz__k--uyari b { color:var(--warn); }

/* komut paleti tetikleyicisi */
.sv-komut { display:flex; align-items:center; gap:var(--sp-2); height:40px; width:clamp(180px, 18vw, 260px); padding:0 6px 0 var(--sp-3);
  border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--fg-faint);
  font:inherit; font-size:var(--t-md); cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; }
.sv-komut:hover { background:var(--surface); border-color:color-mix(in srgb, var(--primary) 45%, transparent); color:var(--fg-muted); }
.sv-komut svg.ic { flex:none; width:16px; height:16px; }
.sv-komut__t { flex:1 1 auto; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-komut kbd, .sv-palet kbd { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:6px;
  font-family:var(--mono); font-size:var(--t-xs); line-height:1; }
.sv-komut kbd { color:var(--fg-muted); background:var(--surface); border:1px solid var(--border); }
.sv-ust .gnc-pill { margin-right:0; }

/* hesap menüsü */
.sv-hesap { position:relative; }
.sv-kim { display:flex; align-items:center; gap:var(--sp-2); height:44px; padding:0 var(--sp-2) 0 4px; border-radius:var(--radius-pill);
  list-style:none; cursor:pointer; color:var(--fg); border:1px solid transparent; transition:background-color .15s, border-color .15s; }
.sv-kim::-webkit-details-marker { display:none; }
.sv-kim:hover, .sv-hesap[open] .sv-kim { background:var(--surface-2); border-color:var(--border); }
.sv-kim .ax-avatar { width:36px; height:36px; font-weight:700; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--primary) 70%, #fff), var(--primary)); }
.sv-kim .ax-header__user { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.sv-kim .ax-header__name { font-size:var(--t-md); font-weight:600; line-height:1.1; color:var(--fg);
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-kim__rol { font-size:var(--t-xs); line-height:1; color:var(--fg-faint); }
.sv-kim > svg.ic { width:15px; height:15px; color:var(--fg-faint); transition:transform .2s var(--dh-ease); }
.sv-hesap[open] .sv-kim > svg.ic { transform:rotate(180deg); }
.sv-hesap__menu { position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:250px; padding:var(--sp-2);
  border-radius:14px; background:var(--surface); border:1px solid var(--border); color:var(--fg);
  box-shadow:0 22px 50px -18px rgba(5,11,31,.45), 0 2px 6px rgba(5,11,31,.08); animation:sv-hesap-ac .16s var(--dh-ease); }
@keyframes sv-hesap-ac { from { opacity:0; transform:translateY(-6px); } }
.sv-hesap__kim { display:flex; flex-direction:column; gap:2px; padding:var(--sp-2) var(--sp-3) var(--sp-3);
  margin-bottom:var(--sp-1); border-bottom:1px solid var(--border); min-width:0; }
.sv-hesap__kim strong { font-size:var(--t-md); color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-hesap__kim span { font-size:var(--t-sm); color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-hesap .hd-out { margin:0; }
.sv-hesap__oge { display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:38px; padding:0 var(--sp-3);
  border:0; border-radius:9px; background:none; color:var(--fg); font:inherit; font-size:var(--t-md); text-align:left; cursor:pointer; }
.sv-hesap__oge svg.ic { width:17px; height:17px; color:var(--fg-faint); }
.ax-header .sv-hesap__oge:hover { background:var(--surface-2); color:var(--fg); }
.sv-hesap__oge.sv-cikis:hover, .sv-hesap__oge.sv-cikis:hover svg.ic { color:var(--danger); }

/* ---------- Komut paleti ---------- */
.sv-palet { width:min(620px, calc(100vw - 32px)); max-height:min(560px, calc(100vh - 120px)); margin:12vh auto auto; padding:0;
  border:1px solid var(--border); border-radius:18px; background:var(--surface); color:var(--fg); overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(5,11,31,.6); }
.sv-palet[open] { display:flex; flex-direction:column; animation:sv-palet-ac .18s var(--dh-ease); }
@keyframes sv-palet-ac { from { opacity:0; transform:translateY(-10px) scale(.985); } }
.sv-palet::backdrop { background:rgba(5,11,31,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.sv-palet .sv-ara { display:flex; align-items:center; gap:var(--sp-3); flex:none; height:60px; margin:0; padding:0 var(--sp-4) 0 var(--sp-5);
  border-bottom:1px solid var(--border); }
.sv-palet .sv-ara > svg.ic { width:19px; height:19px; color:var(--primary); }
.sv-palet .sv-ara input { flex:1 1 auto; min-width:0; height:100%; margin:0; padding:0; border:0; outline:0; box-shadow:none;
  background:transparent; color:var(--fg); font:inherit; font-size:var(--t-lg); }
.sv-palet .sv-ara input::placeholder { color:var(--fg-faint); }
.sv-palet .sv-ara input::-webkit-search-cancel-button { display:none; } /* Esc zaten temizler + kapatır */
.sv-palet kbd { color:var(--fg-muted); background:var(--surface-2); border:1px solid var(--border); }
.sv-palet__liste { flex:1 1 auto; overflow-y:auto; padding:var(--sp-2); scrollbar-width:thin; }
.sv-palet__oge { display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:42px; padding:0 var(--sp-3);
  border:0; border-radius:10px; background:none; color:var(--fg); font:inherit; font-size:var(--t-md); text-align:left; cursor:pointer; }
.sv-palet__oge[hidden] { display:none; }
.sv-palet__oge > svg.ic { flex:none; width:17px; height:17px; color:var(--fg-faint); }
.sv-palet__ad { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-palet__grup { flex:none; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.06em; color:var(--fg-faint); }
.sv-palet__oge .ax-nav__badge { flex:none; }
.sv-palet .sv-palet__oge.is-sec { background:var(--primary-soft); color:var(--primary); }
.sv-palet__oge.is-sec > svg.ic, .sv-palet__oge.is-sec .sv-palet__grup { color:var(--primary); }
.sv-palet__ara { margin-top:var(--sp-1); border-top:1px dashed var(--border); border-radius:0 0 10px 10px; }
.sv-palet__ara b { font-family:var(--mono); color:var(--fg); }
.sv-palet__bos { margin:0; padding:var(--sp-2) var(--sp-5) var(--sp-3); font-size:var(--t-sm); color:var(--fg-muted); }
.sv-palet__bos[hidden] { display:none; }
.sv-palet__alt { flex:none; display:flex; gap:var(--sp-5); padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--border);
  background:var(--surface-2); font-size:var(--t-xs); color:var(--fg-muted); }
.sv-palet__alt span { display:inline-flex; align-items:center; gap:4px; }

@media (prefers-reduced-motion:reduce) {
  .sv-nabiz__nokta::after, .sv-nabiz__k--is svg.ic { animation:none; }
}
/* daralan genişlikler: önce çip yazıları, sonra kullanıcı adı, sonra çipler */
@media (max-width:1439.98px) { .sv-nabiz__k span { display:none; } .sv-ust__sayfa { max-width:240px; } }
@media (max-width:1279.98px) { .sv-kim .ax-header__user { display:none; } .sv-komut { width:auto; } .sv-komut__t, .sv-komut kbd { display:none; } }
@media (max-width:1099.98px) { .sv-nabiz { display:none; } }

/* ---------- Sol menü ---------- */
.ax-sidebar .ax-sidebar__nav { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--fg-faint) 45%, transparent) transparent;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom:var(--sp-6); }
.ax-sidebar .ax-sidebar__nav::-webkit-scrollbar { width:6px; }
.ax-sidebar .ax-sidebar__nav::-webkit-scrollbar-thumb { border-radius:6px; background:color-mix(in srgb, var(--fg-faint) 45%, transparent); }
.ax-sidebar .ax-sidebar__section { margin:var(--sp-5) 0 var(--sp-1); padding:0 var(--sp-4); font-family:var(--display);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-faint); }
.ax-sidebar .ax-nav__item { min-height:36px; gap:var(--sp-3); padding:6px var(--sp-3); margin:1px 0; border-radius:10px;
  font-size:var(--t-md); font-weight:500; color:var(--fg-muted); transition:background-color .12s, color .12s; }
.ax-sidebar .ax-nav__item > svg.ic { width:18px; height:18px; color:var(--fg-faint); transition:color .12s; }
.ax-sidebar .ax-nav__item:hover { color:var(--fg); background:var(--surface-2); }
.ax-sidebar .ax-nav__item:hover > svg.ic { color:var(--fg-muted); }
.ax-sidebar .ax-nav__item.is-active { color:var(--primary); font-weight:600; background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); }
.ax-sidebar .ax-nav__item.is-active > svg.ic { color:var(--primary); }
.ax-sidebar .ax-nav__item.is-active::after { display:none; }
/* seçili öğe işareti (kullanıcı onayı 2026-10-15: "daha belirgin"): hapın İÇİNDE sol kenarda kobalt çizgi. Temanınki
   hapın DIŞINDA (-14px) duruyordu → katlanır grubun `overflow:hidden` kırpmasında kesilirdi; bütün konum değerleri ezilir. */
.ax-layout .ax-sidebar .ax-nav__item.is-active { position:relative; }
.ax-layout .ax-sidebar .ax-nav__item.is-active::before { content:""; display:block; position:absolute; inset:auto; left:0; top:50%;
  width:3px; height:18px; transform:translateY(-50%); border-radius:0 3px 3px 0; background:var(--primary); box-shadow:none; }
.ax-sidebar .ax-nav__item.lis-kilitli { opacity:.72; }

/* logo alanı: altında ince ayırıcı (logo ortalı kalır — eski kullanıcı isteği; sürüm alt bilgiye taşındı) */
.ax-layout .ax-sidebar .ax-sidebar__brand { position:relative; margin:0 var(--sp-4); }
.ax-layout .ax-sidebar .ax-sidebar__brand::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--border); }

/* menü alt bilgisi: sürüm (yalnız yönetici); menü kaydırılsa da altta sabit (kenar çubuğu sütun düzeni, nav esner) */
.sv-menu-alt { flex:none; margin:0 var(--sp-3) var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border); }
.sv-surum { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2); border-radius:12px; color:var(--fg-muted);
  text-decoration:none; transition:background-color .15s, color .15s; }
.ax-sidebar .sv-surum:hover { background:var(--surface-2); color:var(--fg); }
.sv-surum__ikon { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--fg-faint); }
.sv-surum__ikon svg.ic { width:16px; height:16px; }
.sv-surum__ikon--kisi { font-weight:700; font-size:var(--t-sm); color:#fff; border:0;
  background:linear-gradient(145deg, color-mix(in srgb, var(--primary) 70%, #fff), var(--primary)); }
.sv-surum__metin .sv-surum__eposta { font-family:inherit; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-surum--yeni .sv-surum__ikon { background:var(--primary-soft); border-color:transparent; color:var(--primary); }
.sv-surum__metin { flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.sv-surum__ad { font-size:var(--t-xs); line-height:1; color:var(--fg-faint); }
.sv-surum__metin b { font-family:var(--mono); font-size:var(--t-sm); line-height:1; color:var(--fg); }
.sv-surum__yeni { flex:none; display:inline-flex; align-items:center; gap:6px; padding:3px var(--sp-2); border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:600; color:var(--primary); background:var(--primary-soft); white-space:nowrap; }
.sv-surum__yeni i { width:6px; height:6px; border-radius:50%; background:var(--primary); animation:sv-nabiz-is 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .sv-surum__yeni i { animation:none; } }

/* katlanır gruplar (kullanıcı onayı 2026-10-15): başlık düğme, içerik `grid-template-rows` 1fr↔0fr ile kayar.
   ⚠️ Seçici 0,4,0: bridge.css'teki menü etiketi güvencesi `.ax-layout .ax-sidebar :is(.ax-sidebar__section…)
   { display:revert }` 0,3,0 ve style.css'ten SONRA yükleniyor — 0,3,0 yazınca ok etiketin ALTINA düşüyordu (ölçüldü). */
.ax-layout .ax-sidebar .sv-grup .sv-grup__bas { display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:28px;
  margin:var(--sp-4) 0 2px; padding:4px var(--sp-4); border:0; border-radius:8px; background:none; cursor:pointer; text-align:left;
  transition:color .15s, background-color .15s; }
.ax-layout .ax-sidebar .sv-grup .sv-grup__bas:hover { color:var(--fg-muted); background:var(--surface-2); }
.sv-grup__bas > span { flex:1 1 auto; }
.sv-grup__bas svg.ic { flex:none; width:14px; height:14px; transition:transform .22s var(--dh-ease); }
.sv-grup.is-kapali .sv-grup__bas svg.ic { transform:rotate(-90deg); }
.sv-grup__ic { display:grid; grid-template-rows:1fr; }
.sv-grup__ic > div { min-height:0; overflow:hidden; }
.sv-grup.is-kapali .sv-grup__ic { grid-template-rows:0fr; }
.sv-hazir .sv-grup__ic { transition:grid-template-rows .24s var(--dh-ease); }
/* kapalı grupta bekleyen rozet varsa başlıkta nokta (rozet kaybolmasın) */
.sv-grup.is-kapali:has(.ax-nav__badge) .sv-grup__bas > span::after { content:""; display:inline-block; width:6px; height:6px;
  margin-left:6px; border-radius:50%; background:var(--warn); vertical-align:middle; }
.sv-grup.is-kapali:has(.ax-nav__badge--hot) .sv-grup__bas > span::after { background:var(--danger); }
@media (prefers-reduced-motion:reduce) { .sv-hazir .sv-grup__ic, .sv-grup__bas svg.ic { transition:none; } }

/* ---------- Mobil çekmece ---------- */
.sv-perde { display:none; }
@media (max-width:767.98px) {
  .sv-ust__menu { display:inline-grid; place-items:center; }
  .ax-header.sv-ust { gap:var(--sp-2); block-size:60px; min-height:60px; padding:0 var(--sp-2); }
  .sv-ust__ikon, .sv-ust__grup, .sv-ust .ax-header__spacer { display:none; }
  .sv-ust__yol { flex:1 1 auto; }
  .sv-ust__sayfa { font-size:var(--t-lg); max-width:none; }
  .sv-komut { height:38px; padding:0 var(--sp-2); border-radius:11px; }
  .sv-kim { padding:0 2px; } .sv-kim > svg.ic { display:none; }
  .sv-palet { margin-top:var(--sp-4); }
  .sv-palet__alt { display:none; }
  html[data-ax-drawer="open"] .sv-perde { display:block; position:fixed; inset:0; z-index:calc(var(--ax-z-drawer, 1040) - 1);
    background:rgba(5,11,31,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  html[data-ax-drawer="open"] body { overflow:hidden; }
  /* çekmecede zemin OPAK: tema camı (%80) arkadaki sayfayı menünün içinden gösteriyordu */
  .ax-layout .ax-sidebar { background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* ⚠️ Kapalı çekmece kenarı TAŞIYORDU (2026-10-16 ölçüldü): menü soldan 16px içeride duran yüzen bir kart,
     tema ise onu yalnız kendi genişliği kadar (-100%) kaydırıyor → her sayfada solda 16px'lik beyaz şerit. */
  html:not([data-ax-drawer="open"]) .ax-layout .ax-sidebar { transform:translateX(calc(-100% - var(--sp-8))); }
}


/* ============================================================
   SANAL SUNUCULAR (/panel/vms) — tema turu 2026-10-16. Şablonlar: vms.html (hero + süzgeç),
   _vm_cards.html (hero'daki durum karoları + filo dağılımı, `#vml-cards` OOB), _vm_row.html (kart).
   Dil ana sayfanınki (.interface-design/system.md): koyu lacivert `dh-hero`, cam karolar, `dh-etiket`,
   `dh-bar`. Önekler: `vh-` hero · `vl-` liste. Eski `.vc-*` kart kuralları buradan yeniden kuruldu;
   şablon ölçütlerin okuduğu kancaları (`vc-hit`, `vc-btns`, `vc-running`, `vc-last`, `vc-created`,
   `vc-quota`, `vc-maint`…) taşımaya devam eder.
   ⚠️ Genişlikler `data-pct` → sayfa betiği yazar (şablonda `style=` yok).
   ============================================================ */

/* Ağ kesikliği rengi (çalışıyor ama ağı kesik): mor — amber "askıda"dan ayrışsın (kullanıcı 2026-10-16) */
:root { --ag-kesik:#7c3aed; --ag-kesik-soft:rgba(124,58,237,.10); }
:root[data-theme="dark"] { --ag-kesik:#a78bfa; --ag-kesik-soft:rgba(167,139,250,.14); }
/* Bakım rengi: camgöbeği — "Kuruluyor" kobaltından ayrışsın (renk anahtarında ikisi aynı maviydi) */
:root { --bakim:#0891b2; --bakim-soft:rgba(8,145,178,.11); }
:root[data-theme="dark"] { --bakim:#22d3ee; --bakim-soft:rgba(34,211,238,.13); }

/* ---------- HERO ---------- */
.vh-hero { padding:var(--sp-7) var(--sp-8); margin-bottom:var(--sp-5); container:vh / inline-size; }
/* Ana sayfanın hero düzeni: solda metin + düğmeler, sağda karolar (yükseklik "Komuta merkezi" kadar). */
.vh-hero__govde { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:var(--sp-5) var(--sp-8); align-items:center; }
.vh-hero__metin { min-width:0; }
.vh-hero__h1 { margin:var(--sp-3) 0 var(--sp-2); }
.vh-hero__lead { display:flex; align-items:center; gap:var(--sp-3); margin:0; font-size:var(--t-md); line-height:1.5;
  color:var(--dh-hero-muted); text-wrap:pretty; }
.vh-hero__lead b { color:var(--dh-hero-fg); font-weight:600; }
/* Canlı noktası: ışık dalgası yalnız transform/opacity (sistem kuralı). */
.vh-canli { position:relative; flex:none; width:8px; height:8px; border-radius:50%; background:#3ddb87; }
.vh-canli::after { content:""; position:absolute; inset:0; border-radius:50%; background:#3ddb87;
  animation:vh-dalga 2.4s ease-out infinite; }
@keyframes vh-dalga { from { transform:scale(1); opacity:.65; } to { transform:scale(3.4); opacity:0; } }
.vh-hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-5); }

/* Durum karoları — cam kutular; karonun tamamı süzgeç bağlantısı (`vh-karo__hit`), içindeki
   alt çipler kendi bağlantısı. Renk ANLAM: --k = karonun durum rengi (koyu zeminde açık ton). */
.vh-hero #vml-cards { margin-block-end:0; }
/* Karolar kendi alanına göre 2×2 ya da 4'lü (container). */
.vh-durum { min-width:0; container:vhd / inline-size; }
.vh-karolar { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); }
@container vhd (min-width:940px) { .vh-karolar { grid-template-columns:repeat(4, minmax(0,1fr)); } }
/* Kompakt karo: üst satır [ikon · ad · pay ……… değer], alt satır çipler. */
.vh-karo { --k:#9cc0ff; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; align-content:start;
  gap:var(--sp-2) var(--sp-3); min-width:0;
  padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4); border-radius:var(--radius);
  background:var(--dh-cam); border:1px solid var(--dh-cizgi);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .18s var(--dh-ease), border-color .18s var(--dh-ease), transform .18s var(--dh-ease), box-shadow .18s var(--dh-ease); }
.vh-karo--ok { --k:#45e08f; } .vh-karo--kotu { --k:#ff8f8f; } .vh-karo--uyari { --k:#f7c063; }
.vh-karo:hover { background:var(--dh-cam-hover); transform:translateY(-2px); }
.vh-karo:active { transform:scale(.99); }
.vh-karo.is-on { border-color:color-mix(in srgb, var(--k) 70%, transparent);
  background:color-mix(in srgb, var(--k) 13%, rgba(255,255,255,.04));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--k) 38%, transparent), 0 16px 34px -18px color-mix(in srgb, var(--k) 80%, transparent); }
.vh-karo__hit { position:absolute; inset:0; z-index:0; border-radius:inherit; }
.vh-karo__hit:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.vh-karo > :not(.vh-karo__hit) { position:relative; z-index:1; pointer-events:none; }
.vh-karo a, .vh-karo [title] { pointer-events:auto; }
.vh-karo__bas { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); min-width:0; }
.vh-karo__ikon { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px;
  color:var(--k); background:color-mix(in srgb, var(--k) 20%, transparent); }
.vh-karo__ikon svg.ic { width:16px; height:16px; }
.vh-karo__ad { font-size:var(--t-sm); font-weight:600; color:var(--dh-hero-fg); }
.vh-karo__pay { display:inline-flex; align-items:center; height:22px; padding:0 var(--sp-3);
  border-radius:var(--radius-pill); font-size:var(--t-xs); font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--k); background:color-mix(in srgb, var(--k) 15%, transparent); }
.vh-karo__deger { font-family:var(--display); font-size:30px; font-weight:700; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:#fff; }
.vh-karo.is-sifir .vh-karo__deger { color:var(--dh-hero-faint); }
.vh-karo__alt { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:22px; }
.vh-cip { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:500; white-space:nowrap; color:var(--dh-hero-muted);
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--dh-cizgi);
  transition:background-color .15s, color .15s; }
.vh-cip b { font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
a.vh-cip, a.vh-cip:hover { text-decoration:none; }
a.vh-cip:hover { background:var(--dh-cam-hover); color:var(--dh-hero-fg); }
.vh-cip--duz { padding:0; background:none; box-shadow:none; color:var(--dh-hero-faint); }
.vh-cip--uyari, a.vh-cip--uyari:hover { color:#ffd58a; } .vh-cip--uyari { background:rgba(247,192,99,.13); box-shadow:inset 0 0 0 1px rgba(247,192,99,.42); }
.vh-cip--kotu, a.vh-cip--kotu:hover { color:#ffbcbc; } .vh-cip--kotu { background:rgba(255,110,110,.15); box-shadow:inset 0 0 0 1px rgba(255,143,143,.48); }
.vh-cip--bilgi, a.vh-cip--bilgi:hover { color:#c3d8ff; } .vh-cip--bilgi { background:rgba(143,184,255,.13); box-shadow:inset 0 0 0 1px rgba(143,184,255,.42); }
.vh-cip.is-on { box-shadow:inset 0 0 0 1.5px currentColor; background:rgba(255,255,255,.16); }

/* Filo dağılımı: kovalar birbirini dışlar, toplam = filo. Segment genişliği betikten (data-pct). */
.vh-dagilim { margin-top:var(--sp-3); }
.vh-dagilim__cubuk { display:flex; gap:3px; height:8px; border-radius:var(--radius-pill); overflow:hidden;
  background:rgba(255,255,255,.09); }
.vh-dagilim__p { display:block; flex:0 1 auto; min-width:0; height:100%; width:0; transition:width 1s var(--dh-ease); }
.vh-dagilim__p--on, .vh-dagilim__nk--on { background:#45e08f; }
.vh-dagilim__p--prov, .vh-dagilim__nk--prov { background:#7aa9ff; }
.vh-dagilim__p--susp, .vh-dagilim__nk--susp { background:#f7c063; }
.vh-dagilim__p--off, .vh-dagilim__nk--off { background:#ff8080; }
.vh-dagilim__p--unknown, .vh-dagilim__nk--unknown { background:rgba(255,255,255,.4); }
.vh-dagilim__nk--agkesik { background:#b69cff; } .vh-dagilim__nk--bakim { background:#7cc4ff; }
.vh-dagilim__lejant > span { cursor:help; }
.vh-dagilim__eksen { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-5); flex-wrap:wrap;
  margin-top:var(--sp-2); font-size:var(--t-xs); color:var(--dh-hero-faint); }
.vh-dagilim__lejant { display:flex; flex-wrap:wrap; gap:4px var(--sp-4); }
.vh-dagilim__lejant > span { display:inline-flex; align-items:center; gap:6px; }
.vh-dagilim__nk { flex:none; width:7px; height:7px; border-radius:50%; }

@container vh (max-width:860px) { .vh-hero__govde { grid-template-columns:minmax(0,1fr); } }
/* Dar karo (telefon): değer kendi satırına iner — başlıktaki pay hapına biniyordu. */
@container vhd (max-width:560px) {
  .vh-karo { grid-template-columns:minmax(0,1fr); }
}
@container vh (max-width:420px) {
  .vh-karo { padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }
  .vh-karo__deger { font-size:26px; }
  .vh-karo__pay { padding:0 var(--sp-2); }
}
@media (max-width:640px) {
  .vh-hero { padding:var(--sp-6) var(--sp-5) var(--sp-5); }
  .vh-hero__lead { font-size:var(--t-sm); align-items:flex-start; }
  .vh-hero__lead .vh-canli { margin-top:7px; }
}

/* ---------- SÜZGEÇ ÇUBUĞU ---------- */
/* Sayfa çubuğuyla aynı dil: aynı yüzey/dolgu, solda kobalt simge kutusu, 36px kontroller, 10px köşe. */
.vl-suzgec { gap:var(--sp-3); margin-bottom:var(--sp-5); padding:10px var(--sp-4); border-radius:var(--radius); }
.vl-suzgec__ikon { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px;
  color:var(--primary); background:var(--primary-soft); }
.vl-suzgec__ikon svg.ic { width:15px; height:15px; }
.vl-suzgec input.vl-suzgec__ara, .vl-suzgec .ax-select { box-sizing:border-box; min-height:36px; }  /* temanın alan min-height 38px ezilir */
.vl-suzgec input.vl-suzgec__ara { flex:1 1 260px; min-width:0; max-width:460px; height:36px; border-radius:10px;
  font-size:var(--t-sm); border:1px solid var(--border-strong); background-color:var(--surface-2); }
.vl-suzgec .ax-select { height:36px; min-width:150px; border-radius:10px; font-size:var(--t-sm); font-weight:500;
  border:1px solid var(--border-strong); background-color:var(--surface-2); }
.vl-suzgec input.vl-suzgec__ara:focus, .vl-suzgec .ax-select:focus { outline:none; background-color:var(--surface);
  border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
/* Seçili süzgeç: kobalt açık zemin + kobalt çerçeve/yazı — hangi süzgecin açık olduğu bir bakışta görünür */
.vl-suzgec input.vl-suzgec__ara.is-secili, .vl-suzgec .ax-select.is-secili { color:var(--primary); font-weight:600;
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); background-color:var(--primary-soft); }
.vl-suzgec__eylem { display:inline-flex; align-items:center; gap:var(--sp-2); margin-left:auto; }
a.vl-suzgec__temizle, .vl-suzgec .vl-suzgec__ara-btn { display:inline-flex; align-items:center; gap:6px; height:36px;
  margin:0; padding:0 var(--sp-4); border-radius:10px; font-size:var(--t-sm); font-weight:600; cursor:pointer;
  text-decoration:none; transition:background-color .15s, color .15s, box-shadow .15s, filter .15s; }
a.vl-suzgec__temizle { color:var(--fg-muted); box-shadow:inset 0 0 0 1px var(--border-strong); }
a.vl-suzgec__temizle:hover { color:var(--danger); background:var(--danger-soft); text-decoration:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
.vl-suzgec .vl-suzgec__ara-btn { border:0; color:#fff; background:var(--primary); box-shadow:0 6px 14px -8px var(--primary); }
.vl-suzgec .vl-suzgec__ara-btn:hover { filter:brightness(1.08); }
a.vl-suzgec__temizle svg.ic, .vl-suzgec .vl-suzgec__ara-btn svg.ic { width:14px; height:14px; }
@media (max-width:640px) {
  .vl-suzgec__ikon { display:none; }
  .vl-suzgec input.vl-suzgec__ara { flex-basis:100%; max-width:none; }
  .vl-suzgec .ax-select { flex:1 1 140px; min-width:0; }
}

/* ---------- LİSTE / KART ---------- */
/* Liste kendi genişliğine göre düzen değiştirir (container query); kartlar aynı genişlikte. */
.vc-list { display:flex; flex-direction:column; gap:var(--sp-3); container:vl / inline-size; }
.vc-list.dh-giris > .vl { animation:dh-giris .5s var(--dh-ease) backwards; }
.vc-list.dh-giris > :nth-child(5) { animation-delay:.3s; } .vc-list.dh-giris > :nth-child(6) { animation-delay:.34s; }
.vc-list.dh-giris > :nth-child(7) { animation-delay:.38s; } .vc-list.dh-giris > :nth-child(n+8) { animation-delay:.42s; }

/* Kart: temanın `ax-card` yüzeyi — TEK BEYAZ KART, iki kat (kullanıcı seçimi "geniş kart, sade", 2026-10-16).
   ⚠️ Renkli sol şerit / tonlu zemin / gri bant / alt bant YOK (kullanıcı: "şeritler hiç hoş durmuyor");
   durum etiketle + OS karosunun tonuyla okunur. ⚠️ `overflow:visible` ŞART: tema `ax-card`a
   `overflow:hidden` veriyor ve "+N IP" penceresi kartın içinde hapsoluyordu. */
.vl { position:relative; overflow:visible; padding:var(--sp-5) var(--sp-6);
  transition:transform .18s var(--dh-ease), box-shadow .18s var(--dh-ease), border-color .18s var(--dh-ease); }
.vl:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--primary) 22%, var(--border)); }
/* Fareyle üstüne gelince sağ üst köşeden yayılan hafif kobalt ışık (yalnız hover — durum rengi DEĞİL). */
.vl::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(520px 180px at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
  transition:opacity .25s var(--dh-ease); }
.vl:hover::after { opacity:1; }
.vl:has(.vc-ips[open]) { z-index:5; }
/* Kartın tamamı detay bağlantısı (`vc-hit`, kart başına TEK dinleyicisiz <a>). İçerik üstte ama
   tıklamayı geçirir; etkileşimli öğeler ve ipucu taşıyanlar kendi tıklamasını alır. IP seçilebilir. */
.vc-hit { position:absolute; inset:0; z-index:0; border-radius:inherit; }
.vc-hit:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.vl > :not(.vc-hit) { position:relative; z-index:1; pointer-events:none; }
/* Üst kat özellik sütunlarının ÜSTÜNDE: "+N IP" penceresi aşağı açılır ve sütunlar (DOM'da sonra) onu örterdi. */
.vl > .vl-ana { z-index:2; }
.vl a:not(.vc-hit), .vl button, .vl details, .vl summary, .vl [title], .vl .vl-ip { pointer-events:auto; }

/* Kat 1: OS karosu · kimlik · ölçüler · eylemler */
.vl-ana { display:grid; grid-template-columns:48px minmax(0,1fr) auto auto; align-items:center;
  gap:var(--sp-5); }
/* OS karosu: mavi degrade + beyaz logo + köşede canlı durum noktası. Linux da Windows'la AYNI renk
   (kullanıcı: "linux iconunu beğenmedim, aynı renkte olsunlar"); dağıtıma göre renk denendi, kaldırıldı. */
.vl-os, .dh-sun__os { --os-a:#2b8ef0; --os-b:#0058b8; color:#fff; background:linear-gradient(140deg, var(--os-a) 0%, var(--os-b) 100%);
  box-shadow:0 8px 18px -10px var(--os-b), inset 0 1px 0 rgba(255,255,255,.22); }
.vl-os--yok, .dh-sun__os--yok { --os-a:#94a3b8; --os-b:#64748b; }  /* işletim sistemi bilinmiyor */
.vl-os { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; }
.vl-os__kutu { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; overflow:hidden; }
.vl-os .os-logo { width:24px; height:24px; }
/* Linux: gerçek Tux geometrisi BÜYÜK — kutuyu doldurur, baş üstte 7px boşlukla, ayaklar alt kenarda kırpılır
   (uygulama simgesi "yükselen" kesimi). ⚠️ Taban `.os-logo` `contain` KALIR (kurulum/OS kartları); kırpma
   yalnız bu karoda ve bilinçli (`.vl-os__kutu` taşanı keser). */
.vl-os .os-logo--linux { width:100%; height:100%; -webkit-mask-size:54px 54px; mask-size:54px 54px;
  -webkit-mask-position:50% 7px; mask-position:50% 7px; }
.vl-os svg.ic { width:22px; height:22px; }
/* Durum noktası: karonun sağ alt köşesinde, kart zemini renginde halka ile ayrılır */
.vl-os__nk { position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border-radius:50%;
  background:var(--fg-faint); box-shadow:0 0 0 2.5px var(--surface); }
/* Nokta GÜÇ + AĞ durumunu söyler: çalışan yeşil dalga · çalışıyor ama ağı kesik MOR dalga (hâlâ çalışıyor) ·
   askıda amber SABİT (hiç çalışmıyor) · kapalı/hatalı kırmızı · bakım mavi · kurulum kobalt yanıp söner. */
.vl-os__nk--ok { background:var(--ok); }
.vl-os__nk--agkesik { background:var(--ag-kesik); }
.vl-os__nk--ok::after, .vl-os__nk--agkesik::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; animation:vh-dalga 2.4s ease-out infinite; }
.vl-os__nk--askida { background:var(--warn); }
.vl-os__nk--kotu { background:var(--danger); }
.vl-os__nk--bakim { background:var(--bakim); }
.vl-os__nk--kur { background:var(--primary); animation:blink 1.2s ease-in-out infinite; }
.vl-kimlik { min-width:0; display:flex; flex-direction:column; gap:6px; }
.vl-kimlik__ust { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); min-width:0; }
.vl-ip { font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em; color:var(--fg); transition:color .15s; }
.vl:hover .vl-ip { color:var(--primary); }
.vl-kimlik__alt { display:flex; align-items:center; flex-wrap:wrap; gap:6px var(--sp-3); min-width:0;
  font-size:var(--t-sm); color:var(--fg-muted); }
.vl-ad { display:inline-block; max-width:240px; height:22px; line-height:22px; padding:0 var(--sp-3); border-radius:var(--radius-pill);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-xs); font-weight:600;
  color:var(--primary); background:var(--primary-soft); }
.vl-osad { white-space:nowrap; }
.vl-not { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:600; white-space:nowrap; color:var(--fg-muted); background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border); }
.vl-not--uyari { color:var(--warn); background:var(--warn-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 32%, transparent); }
.vl-not--sorun { color:var(--danger); background:var(--danger-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent); }
.vl-not--ok { color:var(--ok); background:var(--ok-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 28%, transparent); }
.vl-not--ok::before { content:""; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; }
/* Ağ kesikliği ailesi (Ağ Kapalı · Kota Doldu · Otomatik eylem: Ağ Kesik) MOR — durum noktasıyla aynı renk */
.vl-not--ag { color:var(--ag-kesik); background:var(--ag-kesik-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ag-kesik) 30%, transparent); }
.vl-not--bakim { color:var(--bakim); background:var(--bakim-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bakim) 30%, transparent); }

/* "+N IP" açılır penceresi (saf <details>, JS yok) */
.vc-ips { position:relative; z-index:3; }
.vc-ips > summary { list-style:none; cursor:pointer; }
.vc-ips > summary::-webkit-details-marker { display:none; }
.vl-ek-ip { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:700; color:var(--primary); background:var(--primary-soft); transition:background-color .15s; }
.vl-ek-ip:hover { background:color-mix(in srgb, var(--primary) 22%, transparent); }
.vc-ips[open] > summary { box-shadow:inset 0 0 0 1px var(--primary); }
.vc-ips-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:4; width:max-content; min-width:240px;
  max-width:min(440px, 80vw); max-height:320px; overflow:auto; scrollbar-width:thin; padding:var(--sp-4);
  border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-lg), 0 0 0 1px var(--border); }
/* ⚠️ SON KARTTA PENCERE YUKARI AÇILIR: liste bir container (`container-type`) ve yerleşim kapsaması
   taşan içeriği "ink overflow" sayar — listenin dibinden taşan pencere KAYDIRILAMIYORDU (sayfa sonunda
   alt yarısı ekran dışında kaldı; ölçüldü). Üstte başka kart/süzgeç olduğu için yukarı açılan görünür. */
.vc-list > .vl:last-child .vc-ips-pop { top:auto; bottom:calc(100% + 8px); }
.vc-ips-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-3); }
.vc-ips-head strong { font-family:var(--display); font-size:var(--t-md); font-weight:700; color:var(--fg); }
.vc-ips-head span { font-size:var(--t-xs); color:var(--fg-faint); white-space:nowrap; }
.vc-ips-sec { font-size:var(--t-xs); font-weight:600; color:var(--fg-faint); margin:var(--sp-3) 0 var(--sp-2); }
.vc-ips-head + .vc-ips-sec { margin-top:0; }
.vc-ips-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px var(--sp-3); }
.vc-ips-grid--v6 { grid-template-columns:minmax(0,1fr); }  /* uzun v6 adresi iki sütunda kesiliyordu */
.vc-ips-i { font-family:var(--mono); font-size:var(--t-xs); color:var(--fg-muted); padding:3px 6px; border-radius:6px; white-space:nowrap; }
.vc-ips-i:hover { background:var(--surface-2); color:var(--fg); }
/* Birincil adres: yazı YOK, rengiyle ayrılır ve listenin başında (kullanıcı 2026-10-16: "birincil" yazısı kayıyordu) */
.vc-ips-i.is-main { color:var(--primary); font-weight:700; background:var(--primary-soft); }

/* Anlık kullanım HALKALARI (ana sayfanın Kapasite halkaları gibi): renk ölçüye göre, eşikte amber/kırmızı,
   açılışta 0'dan çizilir (yalnız stroke-dashoffset; `to` yok → öznitelikteki değere varır). */
.vl-olcu { display:flex; gap:var(--sp-4); min-width:0; }
.vl-olcu.vc-stale { opacity:.45; }
.vl-halka { --h:var(--primary); position:relative; display:grid; justify-items:center; gap:4px; width:56px; }
.vl-halka--ram { --h:var(--uc-ram, #7c5cfc); } .vl-halka--disk { --h:var(--uc-disk, #16a34a); }
.vl-halka.is-warn { --h:var(--warn); } .vl-halka.is-crit { --h:var(--danger); }
.vl-halka svg { display:block; width:56px; height:56px; }
.vl-halka__iz { fill:none; stroke:color-mix(in srgb, var(--h) 15%, var(--surface-3)); stroke-width:5; }
.vl-halka.is-yok .vl-halka__iz { stroke:var(--surface-3); }  /* ölçü yoksa iz nötr (renk "veri var" demesin) */
.vl-halka__dolu { fill:none; stroke:var(--h); stroke-width:5; stroke-linecap:round;
  animation:vl-ciz 1.1s var(--dh-ease) both; }
.vl-halka:nth-child(2) .vl-halka__dolu { animation-delay:.08s; } .vl-halka:nth-child(3) .vl-halka__dolu { animation-delay:.16s; }
@keyframes vl-ciz { from { stroke-dashoffset:144.51; } }
.vl-halka > b { position:absolute; top:0; left:0; width:56px; height:56px; display:grid; place-items:center;
  font-family:var(--display); font-size:var(--t-sm); font-weight:700; letter-spacing:-.02em; color:var(--fg); font-variant-numeric:tabular-nums; }
.vl-halka.is-yok > b { color:var(--fg-faint); font-weight:500; }
.vl-halka > span { font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); }

/* Eylemler — temanın solid semantik düğmeleri (kullanıcı isteği), eşit genişlik */
.vl-eylem { display:flex; justify-content:flex-end; }
/* Alt satır: solda Limitler (varsa), EN SAĞDA son işlem (işlem adı → bu sunucunun tüm işlemleri) */
/* Üstündeki özellik sütunlarından ince çizgiyle ayrılır (kullanıcı 2026-10-16; bant DEĞİL, inset gölge) */
.vl-alt { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-4); padding-top:var(--sp-3); box-shadow:inset 0 1px 0 var(--border); }
.vl-son { display:flex; justify-content:flex-end; min-height:24px; max-width:100%; margin-left:auto; }
.vl-lim { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); min-width:0; margin:0; }
.vl-lim dd { margin:0; }
.vl-eylem .vc-btns { display:inline-flex; gap:var(--sp-2); }
.vl-eylem .vcb { min-width:98px; justify-content:center; gap:6px; }
.vcb > svg.ic { width:15px; height:15px; flex:none; }
.vl-eylem__not { font-size:var(--t-sm); color:var(--fg-faint); }

/* Kat 2: özellik sütunları — ince çizgiyle ayrılır (bant değil); her kartta aynı sütun sayısı → kartlar arası hiza. */
/* ⚠️ Sütun sayısı AÇIK (`--n`, rol başına sabit: 7/6/5) — `auto-fit` DENENDİ: tam genişlik "Limitler"
   satırı (`1/-1`) boş izleri de doldurduğu için o kartta izler çöktürülmüyor ve sütunlar diğer
   kartlarla kayıyordu (1920'de ölçüldü). */
/* ⭐ Orta kısım "çok sade" bulundu (kullanıcı 2026-10-16) → sütunlar İNCE AYRAÇLARLA bölünmüş bir istatistik
   şeridi; sütun payları içeriğe göre (ESXi "IP (etiket)" ve e-posta sığsın), şablon rol başına SABİT → kartlar
   arası hiza korunur. Dar listede ayraç kalkar, sütunlar eşitlenir (container query). */
/* Paylar ölçülen içerik genişliklerinden (1440'ta kesilmesin): Paket · Sahip · ESXi "IP (etiket)" · Donanım
   "8 vCPU · 16 GB RAM" · Trafik · Snapshot · Yedek · Çalışma süresi · Kuruldu. */
.vl-oz { --n:8; display:grid; grid-template-columns:1.15fr 1.2fr 1.5fr 1.3fr 1fr 1.3fr 1fr .8fr; gap:var(--sp-3) 0;
  margin:var(--sp-4) 0 0; padding:var(--sp-4) 0 0; box-shadow:inset 0 1px 0 var(--border); }
.vl-oz--7 { --n:7; grid-template-columns:1.15fr 1.2fr 1.3fr 1fr 1.3fr 1fr .8fr; }
.vl-oz--6 { --n:6; grid-template-columns:1.15fr 1.3fr 1fr 1.3fr 1fr .8fr; }
.vl-oz > .vl-oz__h { padding:0 var(--sp-2); }
.vl-oz > .vl-oz__h:first-child { padding-left:0; }
.vl-oz > .vl-oz__h:last-child { padding-right:0; }
.vl-oz > .vl-oz__h + .vl-oz__h { box-shadow:inset 1px 0 0 var(--border); }
.vl-oz__h { min-width:0; display:flex; flex-direction:column; gap:3px; }
/* Başlık: renkli SİMGE KUTUSU (sütunun renginde %14 zemin) + ad. Kutu `::after`, simge `::before` (maske). */
.vl-oz dt, .vl-lim dt { position:relative; display:flex; align-items:center; min-height:20px; margin:0 0 3px; padding-left:28px;
  font-size:var(--t-xs); font-weight:500; color:var(--fg-muted); }
.vl-oz dt::after, .vl-lim dt::after { content:""; position:absolute; left:0; top:50%; width:20px; height:20px; margin-top:-10px;
  border-radius:6px; background:color-mix(in srgb, var(--ic, var(--primary)) 14%, transparent); }
/* Sütun simgeleri: CSS maskesi (dosyada TEK kez, kart başına 0 bayt), renk sütunun anlamından */
.vl-oz dt::before, .vl-lim dt::before { content:""; position:absolute; left:4px; top:50%; z-index:1; width:12px; height:12px;
  margin-top:-6px; background:var(--ic, var(--primary));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center; }
.vl-oz__h--sahip { --ic:var(--uc-ram, #7c5cfc); } .vl-oz__h--esxi, .vl-oz__h--trafik { --ic:#0ea5e9; }
.vl-oz__h--donanim { --ic:#6366f1; } .vl-oz__h--trafik { --ic:#0d9488; } .vl-oz__h--koruma { --ic:#db2777; }
:root[data-theme="dark"] .vl-oz__h--koruma { --ic:#f472b6; }
/* Hak dolu (snapshot / yedek) → amber */
.vl-v--dolu { color:var(--warn); }
.vl-oz__h--koruma > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Z'/%3E%3Cpath d='m2 17 10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Z'/%3E%3Cpath d='m2 17 10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.vl-oz__h--calisma { --ic:var(--ok); } .vl-oz__h--kuruldu { --ic:#64748b; } .vl-oz__h--limit { --ic:var(--warn); }
:root[data-theme="dark"] .vl-oz__h--kuruldu { --ic:#94a3b8; }
.vl-oz__h--paket > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8Z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8Z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.vl-oz__h--sahip > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.vl-oz__h--esxi > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Ccircle cx='7' cy='7.5' r='.6' fill='%23000'/%3E%3Ccircle cx='7' cy='16.5' r='.6' fill='%23000'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Ccircle cx='7' cy='7.5' r='.6' fill='%23000'/%3E%3Ccircle cx='7' cy='16.5' r='.6' fill='%23000'/%3E%3C/svg%3E"); }
.vl-oz__h--donanim > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2'/%3E%3C/svg%3E"); }
.vl-oz__h--trafik > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 8-4-16-3 8H2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 8-4-16-3 8H2'/%3E%3C/svg%3E"); }
.vl-oz__h--calisma > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.vl-oz__h--kuruldu > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); }
.vl-oz__h--limit > dt::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); }
.vl-oz dd { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; font-size:var(--t-sm); color:var(--fg); }
.vl-v, .vl-v2 { display:block; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vl-v { font-weight:600; }
.vl-v2 { font-size:var(--t-xs); color:var(--fg-muted); }
.vl-v2--kotu { color:var(--danger); font-weight:600; }
.vl-v2--ok { color:var(--ok); font-weight:500; }
/* Mini kota çubuğu (Trafik) */
.vl-kota { display:block; width:100%; max-width:120px; height:4px; margin:4px 0 2px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, #0d9488 14%, var(--surface-3)); overflow:hidden; }
.vl-kota > i { display:block; height:100%; width:0; border-radius:inherit; background:#0d9488; transition:width 1s var(--dh-ease); }
.vl-kota.is-uyari > i { background:var(--warn); } .vl-kota.is-asim > i { background:var(--danger); }
.dh-sessiz .vl-kota > i { transition:none; }
/* Paket adı rozet; "Elle Yapılandırıldı" düz soluk yazı */
.vl-paket { align-self:flex-start; padding:1px 8px; border-radius:var(--radius-pill); color:var(--primary); font-weight:600;
  background:var(--primary-soft); }
.vl-paket--elle { padding:0; background:none; color:var(--fg-muted); font-weight:500; }
a.vl-sahip, a.vl-esxi { display:flex; flex-direction:column; gap:1px; min-width:0; max-width:100%; color:inherit; text-decoration:none; }
a.vl-sahip:hover, a.vl-esxi:hover { color:var(--primary); text-decoration:none; }
a.vl-sahip:hover .vl-v2 { color:var(--primary); }
a.vl-bayi { display:inline-block; max-width:100%; margin-top:4px; height:20px; line-height:20px; padding:0 8px; border-radius:var(--radius-pill);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-xs); font-weight:600;
  color:var(--primary); background:var(--primary-soft); text-decoration:none; }
a.vl-bayi:hover { color:#fff; background:var(--primary); text-decoration:none; }
.vl-lim dd.vl-limitler { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.vl-limit { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--radius-pill); white-space:nowrap;
  font-size:var(--t-xs); font-weight:600; color:var(--warn); background:var(--warn-soft); }
.vl-limit--pasif { color:var(--fg-muted); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }

.vc-last { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); min-width:0; }
a.vl-is { display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:var(--t-sm); color:var(--fg); text-decoration:none; }
a.vl-is:hover { color:var(--primary); text-decoration:none; }
.vl-is b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vl-is svg.ic { flex:none; width:15px; height:15px; color:var(--fg-faint); }
.vl-zaman { font-size:var(--t-xs); color:var(--fg-muted); white-space:nowrap; }
.vc-created { font-variant-numeric:tabular-nums; }
.vc-running { height:auto; padding-block:3px; gap:6px; }
.vc-pulse { flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; animation:blink 1.2s ease-in-out infinite; }
.vc-msg { margin:var(--sp-3) 0 0; font-size:var(--t-sm); color:var(--fg-muted); }

/* Boş durum */
.vl-bos { gap:var(--sp-2); padding:var(--sp-8) var(--sp-6); }
.vl-bos__ikon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:var(--sp-2); border-radius:14px;
  color:var(--primary); background:var(--primary-soft); }
.vl-bos__ikon svg.ic { width:22px; height:22px; }
.vl-bos .btn { margin-top:var(--sp-2); }

/* Sayfa çubuğu: süzgeç çubuğuyla aynı yüzey (beyaz, kenarlıklı, yuvarlak) — solda aralık, ortada numaralar,
   sağda sayfa. Bulunulan sayfa kobalt dolu, diğerleri hover'da kobalt açık zemin. */
.vl-sayfa { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-5); padding:10px var(--sp-4); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.vl-sayfa__bilgi { display:flex; align-items:center; gap:var(--sp-3); min-width:0; font-size:var(--t-sm); color:var(--fg-muted); }
.vl-sayfa__bilgi b { color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; }
.vl-sayfa__ikon { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px;
  color:var(--primary); background:var(--primary-soft); }
.vl-sayfa__ikon svg.ic { width:15px; height:15px; }
.vl-sayfa__dugmeler { display:flex; align-items:center; gap:6px; }
.vl-sayfa__no, .vl-sayfa__ok { display:inline-flex; align-items:center; justify-content:center; height:36px;
  border-radius:10px; font-size:var(--t-sm); font-weight:600; color:var(--fg); text-decoration:none;
  transition:background-color .15s, color .15s, box-shadow .15s; }
.vl-sayfa__no { min-width:36px; padding:0 6px; font-variant-numeric:tabular-nums; }
.vl-sayfa__ok { gap:6px; padding:0 var(--sp-4); box-shadow:inset 0 0 0 1px var(--border); }
a.vl-sayfa__no:hover, a.vl-sayfa__ok:hover { color:var(--primary); background:var(--primary-soft); text-decoration:none; }
a.vl-sayfa__ok:hover { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, var(--border)); }
.vl-sayfa__no.is-on { color:#fff; background:var(--primary); box-shadow:0 6px 14px -8px var(--primary); }
.vl-sayfa__ok.is-kapali { color:var(--fg-faint); cursor:default; opacity:.6; }
.vl-sayfa__bosluk { min-width:20px; text-align:center; color:var(--fg-faint); }
.vl-sayfa__sayfa { justify-self:end; font-size:var(--t-sm); color:var(--fg-muted); white-space:nowrap; }
.vl-sayfa__sayfa b { color:var(--fg); }
/* Bulunulan sayfa = yazılabilir kutucuk: görünüşü dolu kobalt numara; tıklanınca beyaz zemin + kobalt çerçeve
   (yazma kipi belli olsun). Global input kuralları (genişlik %100, kenarlık) burada ezilir. */
.vl-sayfa__git { display:inline-flex; margin:0; }
.vl-sayfa input.vl-sayfa__no { width:44px; height:36px; margin:0; padding:0 4px; text-align:center; cursor:text;
  font:inherit; font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums;
  border:0; border-radius:10px; transition:background-color .15s, color .15s, box-shadow .15s; }
.vl-sayfa input.vl-sayfa__no.is-genis { width:58px; }
.vl-sayfa input.vl-sayfa__no.is-on { color:#fff; background:var(--primary); box-shadow:0 6px 14px -8px var(--primary); }
.vl-sayfa input.vl-sayfa__no.is-on:hover { box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent), 0 6px 14px -8px var(--primary); }
.vl-sayfa input.vl-sayfa__no.is-on:focus { outline:none; color:var(--fg); background:var(--surface);
  box-shadow:inset 0 0 0 2px var(--primary), 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
@media (max-width:900px) {
  .vl-sayfa { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .vl-sayfa__sayfa { display:none; }
}
@media (max-width:480px) {
  .vl-sayfa__ok { padding:0 var(--sp-3); }
  .vl-sayfa__ok > span { display:none; }  /* telefonda yalnız ok */
}

/* ---------- Dar liste (container query) ---------- */
/* Orta: Durdur/Başlat/Konsol yalnız ikona iner (ad `aria-label`da), Yönet yazılı kalır. */
@container vl (max-width:960px) {
  .vl-eylem .vcb:not(.primary) { min-width:40px; width:40px; padding-inline:0; }
  .vl-eylem .vcb:not(.primary) > span { display:none; }
}
/* Ölçüler kimliğin altına, yan yana üç çubuk */
/* Sütunlar alt satıra sarmaya başlayınca ayraçlar kalkar (ikinci satırın başında asılı çizgi kalmasın) */
@container vl (max-width:1000px) {
  .vl-oz { gap:var(--sp-3) var(--sp-4); }
  .vl-oz > .vl-oz__h.vl-oz__h, .vl-oz > .vl-oz__h + .vl-oz__h { padding:0; box-shadow:none; }
}
@container vl (max-width:880px) {
  .vl-ana { grid-template-columns:48px minmax(0,1fr) auto; row-gap:var(--sp-3); }
  .vl-olcu { grid-column:2 / -1; grid-row:2; }
  .vl-oz { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .vl-oz--7, .vl-oz--6 { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* Telefon: tek sütun; düğmeler tam genişlik ve yeniden yazılı */
@container vl (max-width:560px) {
  .vl { padding:var(--sp-4); }
  .vl-ana { grid-template-columns:42px minmax(0,1fr); gap:var(--sp-3) var(--sp-4); }
  .vl-olcu { justify-content:space-around; }
  .vl-os { width:42px; height:42px; border-radius:12px; }
  .vl-os .os-logo--linux { -webkit-mask-size:47px 47px; mask-size:47px 47px; -webkit-mask-position:50% 6px; mask-position:50% 6px; }
  .vl-olcu { grid-column:1 / -1; grid-row:auto; }
  .vl-eylem { grid-column:1 / -1; }
  .vl-son { margin-left:0; } .vl-son, .vc-last { justify-content:flex-start; }
  .vl-eylem .vc-btns { width:100%; }
  .vl-eylem .vcb, .vl-eylem .vcb:not(.primary) { flex:1 1 0; min-width:0; width:auto; padding-inline:var(--sp-2); }
  .vl-eylem .vcb:not(.primary) > span { display:inline; }
  .vl-oz.vl-oz { grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* "+N IP" penceresi kimlik sütununa yayılır (sağdan taşmasın) */
  .vl-kimlik__ust { position:relative; }
  .vc-ips { position:static; }
  .vc-ips-pop { left:0; right:0; width:auto; min-width:0; max-width:none; }
  .vl-lim { flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
}
@container vl (max-width:400px) {
  .vl-eylem .vcb:not(.primary) > span { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-canli::after, .vc-list.dh-giris > .vl, .vc-pulse, .vl-halka__dolu, .vl-os__nk, .vl-os__nk::after { animation:none !important; }
  .vl::after { transition:none !important; }
  .vh-dagilim__p, .vl, .vh-karo { transition:none !important; }
  .vl:hover, .vh-karo:hover { transform:none; }
}
.dh-sessiz .vh-dagilim__p { transition:none !important; }
.dh-sessiz .vl-halka__dolu { animation:none !important; }

/* ---------- AÇIK HERO DENEMESİ (kullanıcı 2026-10-16: "mavi yerine beyaz gibi açık ton") ----------
   Yalnız Sanal Sunucular hero'su (`vh-hero--acik`); ana sayfa koyu kalır. Hero'nun `--dh-*` dünyası temanın
   yüzey/metin token'larına bağlanır → açık temada beyaza yakın, koyu temada koyu kart yüzeyi (göz almaz).
   Karo/çip/çubuk renkleri koyu zemin için açık tonlardı; burada temanın anlam renkleri (ok/danger/warn). */
.vh-hero.vh-hero--acik {
  --dh-hero-fg:var(--fg); --dh-hero-muted:var(--fg-muted); --dh-hero-faint:var(--fg-faint);
  --dh-cam:var(--surface); --dh-cam-hover:var(--surface); --dh-cizgi:var(--border);
  --dh-isik-1:color-mix(in srgb, var(--primary) 16%, transparent);
  --dh-isik-2:rgba(45,212,191,.12); --dh-isik-3:rgba(167,139,250,.13);
  color:var(--fg); border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-md); }
/* Süzülen ışıklar KAPALI (kullanıcı: "soldaki hafif mavi ışık pek iyi durmuyor"); yalnız nokta ızgarası kalır. */
.vh-hero--acik .dh-hero__glow { display:none; }
.vh-hero--acik .dh-hero__sky::after { opacity:.9; }
.vh-hero--acik .vh-canli, .vh-hero--acik .vh-canli::after { background:var(--ok); }
.vh-hero--acik .dh-chip { box-shadow:var(--shadow-sm); }
.vh-hero--acik .dh-chip:hover { border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); color:var(--primary); }
/* Karolar: beyaz kart + anlam rengi */
.vh-hero--acik .vh-karo { --k:var(--primary); box-shadow:var(--shadow-sm); -webkit-backdrop-filter:none; backdrop-filter:none; }
.vh-hero--acik .vh-karo--ok { --k:var(--ok); } .vh-hero--acik .vh-karo--kotu { --k:var(--danger); } .vh-hero--acik .vh-karo--uyari { --k:var(--warn); }
.vh-hero--acik .vh-karo:hover { border-color:color-mix(in srgb, var(--k) 35%, var(--border)); box-shadow:var(--shadow-md); }
.vh-hero--acik .vh-karo.is-on { border-color:color-mix(in srgb, var(--k) 55%, transparent);
  background:color-mix(in srgb, var(--k) 6%, var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--k) 30%, transparent), 0 12px 28px -18px color-mix(in srgb, var(--k) 70%, transparent); }
.vh-hero--acik .vh-karo__hit:focus-visible { outline-color:var(--primary); }
.vh-hero--acik .vh-karo__ikon { background:color-mix(in srgb, var(--k) 13%, transparent); }
.vh-hero--acik .vh-karo__pay { background:color-mix(in srgb, var(--k) 12%, transparent); }
.vh-hero--acik .vh-karo__deger { color:var(--fg); }
.vh-hero--acik .vh-karo.is-sifir .vh-karo__deger { color:var(--fg-faint); }
/* Çipler */
.vh-hero--acik .vh-cip { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.vh-hero--acik .vh-cip b { color:var(--fg); }
.vh-hero--acik a.vh-cip:hover { background:color-mix(in srgb, var(--primary) 8%, var(--surface)); color:var(--fg); }
.vh-hero--acik .vh-cip--duz { background:none; box-shadow:none; }
.vh-hero--acik .vh-cip--uyari, .vh-hero--acik a.vh-cip--uyari:hover { color:var(--warn); }
.vh-hero--acik .vh-cip--uyari { background:var(--warn-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 32%, transparent); }
.vh-hero--acik .vh-cip--kotu, .vh-hero--acik a.vh-cip--kotu:hover { color:var(--danger); }
.vh-hero--acik .vh-cip--kotu { background:var(--danger-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent); }
.vh-hero--acik .vh-cip--ag, .vh-hero--acik a.vh-cip--ag:hover { color:var(--ag-kesik); }
.vh-hero--acik .vh-cip--ag { background:var(--ag-kesik-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ag-kesik) 32%, transparent); }
.vh-hero--acik .vh-cip--bilgi, .vh-hero--acik a.vh-cip--bilgi:hover { color:var(--info); }
.vh-hero--acik .vh-cip--bilgi { background:var(--info-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--info) 32%, transparent); }
.vh-hero--acik .vh-cip--uyari b, .vh-hero--acik .vh-cip--kotu b, .vh-hero--acik .vh-cip--bilgi b,
.vh-hero--acik .vh-cip--ag b { color:inherit; }
.vh-hero--acik .vh-cip.is-on { box-shadow:inset 0 0 0 1.5px currentColor; background:color-mix(in srgb, currentColor 10%, var(--surface)); }
/* Filo dağılımı */
.vh-hero--acik .vh-dagilim__cubuk { background:var(--surface-3); }
.vh-hero--acik .vh-dagilim__p--on, .vh-hero--acik .vh-dagilim__nk--on { background:var(--ok); }
.vh-hero--acik .vh-dagilim__p--prov, .vh-hero--acik .vh-dagilim__nk--prov { background:var(--primary); }
.vh-hero--acik .vh-dagilim__p--susp, .vh-hero--acik .vh-dagilim__nk--susp { background:var(--warn); }
.vh-hero--acik .vh-dagilim__p--off, .vh-hero--acik .vh-dagilim__nk--off { background:var(--danger); }
.vh-hero--acik .vh-dagilim__p--unknown, .vh-hero--acik .vh-dagilim__nk--unknown { background:var(--border-strong); }
.vh-hero--acik .vh-dagilim__nk--agkesik { background:var(--ag-kesik); } .vh-hero--acik .vh-dagilim__nk--bakim { background:var(--bakim); }

/* ============================================================
   SUNUCU DETAYI (/panel/vms/<id>) — tema turu 2026-10-16. Şablon: vm_detail.html.
   KARA LİSTE KARTI `vd-kara` (3. tur, kullanıcı "daha güzel, temaya uygun"): ANA SAYFANIN KART DİLİ — `dh-card__bas`
   renkli başlık bandı, `dh-alt-h` ara başlık, `dh-panel-liste` satırları, `dh-etiket`. Burada yalnız karta özgü
   parçalar: iki sütunlu gövde, adres kutucukları, "Listeden çıkar" hapı, simge kutusundaki dalga.
   ============================================================ */
.vd-kara { margin:0 0 var(--sp-4); container:vdk / inline-size; }
/* Kara listede: başlık simge kutusundan yayılan halka (yalnız transform/opacity) */
.vd-kara__ikon { position:relative; }
.dh-card__bas--kirmizi .vd-kara__ikon::after, .dh-card__bas--amber .vd-kara__ikon::after { content:""; position:absolute; inset:0;
  border-radius:inherit; box-shadow:0 0 0 2px var(--b); opacity:0; animation:vd-halka 2.6s ease-out infinite; }
@keyframes vd-halka { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(1.45); opacity:0; } }
.vd-kara .dh-card__ozet b { color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; }
/* Gövde: solda Listeler, sağda Adresler (kart dar ise alt alta) */
.vd-kara__govde { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5) var(--sp-5) var(--sp-6); }
.vd-kara__blok { min-width:0; }
.vd-kara .vd-kara__alt { margin:0 0 var(--sp-3); font-size:var(--t-md); }
/* Liste satırı: simge kutusu önem katmanının renginde */
.vd-kara__liste { --l:var(--info); }
.vd-kara__liste--kritik { --l:var(--danger); } .vd-kara__liste--onemli { --l:var(--warn); }
.vd-kara__liste .dh-panel-liste__ikon { color:var(--l); background:color-mix(in srgb, var(--l) 12%, transparent); }
.vd-kara__liste .dh-panel-liste__ad { font-weight:600; }
a.vd-kara__cikar { flex:none; display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 var(--sp-3);
  border-radius:var(--radius-pill); font-size:var(--t-xs); font-weight:600; color:var(--primary); text-decoration:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent); transition:background-color .15s, color .15s; }
a.vd-kara__cikar:hover { color:#fff; background:var(--primary); text-decoration:none; }
[data-theme="dark"] a.vd-kara__cikar:hover { color:#0b1220; }  /* açık mavi zeminde beyaz yazı okunmuyordu */
/* Adres kutucukları: nokta (kırmızı listede / yeşil temiz) · mono IP · kaç listede */
.vd-kara__adresler { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--sp-2); }
.vd-kara__adres { display:flex; align-items:center; gap:var(--sp-2); min-width:0; height:34px; padding:0 var(--sp-3);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); color:var(--fg);
  text-decoration:none; transition:box-shadow .15s, background-color .15s; }
a.vd-kara__adres:hover { color:var(--fg); text-decoration:none; background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.vd-kara__nk { flex:none; width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.vd-kara__adres.is-listede .vd-kara__nk { background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.vd-kara__ip { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; }
.vd-kara__ls { flex:none; font-size:var(--t-xs); color:var(--ok); font-weight:600; }
.vd-kara__adres.is-listede .vd-kara__ls { color:var(--danger); }
/* Müşteri ipucu kutusu: kartın renginde açık zemin + renkli simge kutusu + kalın ilk cümle */
/* "+N adres daha" — ızgaranın tam genişliğinde kesikli düğme (ana sayfanın `dh-daha` dili); açılınca kalan
   kutucuklar aynı ızgarada, düğme "Daha az göster"e döner */
.vd-kara__daha-li { grid-column:1 / -1; }
.vd-kara__daha > summary { display:flex; align-items:center; gap:var(--sp-3); height:36px; padding:0 var(--sp-2) 0 var(--sp-4);
  list-style:none; cursor:pointer; border-radius:var(--radius-sm); border:1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
  color:var(--fg-muted); font-size:var(--t-sm); transition:background-color .15s, border-color .15s; }
.vd-kara__daha > summary::-webkit-details-marker { display:none; }
.vd-kara__daha > summary:hover { border-style:solid; background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.vd-kara__daha-t { flex:1 1 auto; min-width:0; font-weight:600; color:var(--fg); }
.vd-kara__daha-t em { font-style:normal; font-weight:500; color:var(--fg-muted); }
.vd-kara__daha-ok > span { display:inline-flex; align-items:center; height:26px; padding:0 var(--sp-3); border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:600; color:#fff; background:var(--primary); }
[data-theme="dark"] .vd-kara__daha-ok > span { color:#0b1220; }
.vd-kara__daha-kapa, .vd-kara__daha[open] .vd-kara__daha-ac { display:none !important; }
.vd-kara__daha[open] .vd-kara__daha-kapa { display:inline-flex !important; }
.vd-kara__daha > .vd-kara__adresler, .vd-kara__daha > .vd-kara__listeler, .vd-kara__daha--liste { margin-top:var(--sp-2); }
.vd-kara__ipucu { display:flex; align-items:center; gap:var(--sp-3); margin:0 var(--sp-5) var(--sp-5) var(--sp-6);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--warn) 8%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 24%, var(--border)); }
.vd-kara__ipucu-ikon { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:10px; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--warn) 75%, #fff), var(--warn)); }
[data-theme="dark"] .vd-kara__ipucu-ikon { color:#0b1220; }
.vd-kara__ipucu-ikon svg.ic { width:16px; height:16px; }
.vd-kara__ipucu p { margin:0; font-size:var(--t-sm); line-height:1.5; color:var(--fg-muted); }
.vd-kara__ipucu b { color:var(--fg); font-weight:700; }
@container vdk (max-width:820px) { .vd-kara__govde { grid-template-columns:minmax(0,1fr); } }
/* Dar kart: "Listeden çıkar" yalnız ↗ (ad aria-label'da) — uzun liste adı üç satıra kırılıyordu */
@container vdk (max-width:520px) { .vd-kara__cikar-t { display:none; } a.vd-kara__cikar { padding:0 var(--sp-2); } }
@media (max-width:640px) {
  .vd-kara__govde { padding:var(--sp-4); }
  .vd-kara__ipucu { margin:0 var(--sp-4) var(--sp-4); }
  /* Başlık simgenin YANINDA kalır, düğme alt satıra iner */
  .vd-kara .dh-card__bas { flex-wrap:wrap; padding-left:var(--sp-4); }
  .vd-kara .dh-card__baslik { flex:1 1 160px; }
}
@media (prefers-reduced-motion: reduce) { .vd-kara__ikon::after { animation:none !important; } }

/* ============================================================
   DURUM KARTLARI `vd-bant` (kullanıcı 2026-10-16: "10 bandı kara liste kartı gibi yap") — sunucu sayfasının
   üstündeki süren işlem, kurulum uyarısı, bakım, askı, kota, otomatik eylem, muafiyet, ağ kesik ve ISO kartları.
   Kara liste kartının dili: `dh-card__bas` başlık bandı (ton `--t`), gövdede BİLGİ KUTUCUKLARI (simge kutusu
   durumun tonunda) + gerekirse ipucu kutusu. Düz yazı paragraf YOK.
   Ton: askı / kota amber · ağ kesik mor · bakım camgöbeği · CD'den açılış kırmızı · bilgi mavi.
   ============================================================ */
.vd-bant { --t:var(--primary); margin:0 0 var(--sp-4); }
.vd-bant--amber { --t:var(--warn); } .vd-bant--kirmizi { --t:var(--danger); } .vd-bant--agkesik { --t:var(--ag-kesik); }
.vd-bant--bakim { --t:var(--bakim); } .vd-bant--yesil { --t:var(--ok); }
.vd-bant > .dh-card__bas { --b:var(--t); }
.vd-bant .dh-card__ozet { white-space:normal; }
.vd-bant .dh-card__ozet b { color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; }
/* Acil kartlarda simge kutusundan yayılan halka (kara liste kartıyla aynı); süren işlemde dönen simge */
.vd-bant__ikon { position:relative; }
.vd-bant__ikon--canli::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 2px var(--b);
  opacity:0; animation:vd-halka 2.6s ease-out infinite; }
.vd-bant__ikon--don svg.ic { animation:vd-don 1.1s linear infinite; }
@keyframes vd-don { to { transform:rotate(360deg); } }
/* Başlıktaki düğme bir form olabilir (otomatik eylem "Geri al") */
form.vd-bant__form { flex:none; margin:0; }
button.dh-card__btn { cursor:pointer; font-family:inherit; }
.dh-card__btn svg.ic { width:14px; height:14px; }
.vd-bant__govde { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5) var(--sp-5) var(--sp-6); }
/* Bilgi kutucukları */
.vd-bant__bilgi { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
/* ⭐ KUTUCUKLAR SATIRI HER ZAMAN TAM DOLDURUR (kullanıcı 2026-10-19: "kaç kutucuk varsa eşit yayılsın, yarım kalmasın"):
   eski ızgara `auto-fill` boş sütun bırakıyordu (4 kutucuk 5 sütunda, sağda boşluk). Esnek satır: her kutucuk aynı
   tabandan (210px) eşit büyür, sığmayan alt satıra iner ve o satırı da tam doldurur. Sunucu kartının kutucukları aynı kural. */
.vd-bant__bilgi > .vd-bant__oz { flex:1 1 210px; }
.vd-bant__oz { --o:var(--fg-muted); display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.vd-bant__bilgi > .vd-bant__oz--genis { flex-basis:100%; }
.vd-bant__oz--ok { --o:var(--ok); } .vd-bant__oz--sorun { --o:var(--danger); } .vd-bant__oz--uyari { --o:var(--warn); }
.vd-bant__oz--agkesik { --o:var(--ag-kesik); } .vd-bant__oz--bakim { --o:var(--bakim); } .vd-bant__oz--info { --o:var(--primary); }
.vd-bant__oz-ikon { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--o);
  background:color-mix(in srgb, var(--o) 12%, transparent); }
.vd-bant__oz-ikon svg.ic { width:15px; height:15px; }
.vd-bant__oz-m { display:flex; flex-direction:column; gap:1px; min-width:0; }
.vd-bant__k { font-size:var(--t-xs); color:var(--fg-muted); }
.vd-bant__v { font-size:var(--t-sm); font-weight:600; color:var(--fg); line-height:1.35; overflow-wrap:anywhere; }
.vd-bant__a { display:block; font-size:var(--t-xs); font-weight:500; color:var(--fg-muted); }
.vd-bant__mono { font-family:var(--mono); font-size:var(--t-xs); }
/* BAĞLANTI KUTUCUĞU (ör. "Web Konsolu aç", 2026-10-19): bütün kutucuk tıklanır (bağlantı ::after ile kutucuğu kaplar),
   sağda ok, üzerine gelince kalkar; sunucu kartının bağlantı kutucuklarıyla aynı dil. */
.vd-bant__oz--git { position:relative; transition:transform .18s var(--dh-ease), box-shadow .18s; }
.vd-bant__oz--git:hover { transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--o) 45%, var(--border)), 0 6px 14px -8px color-mix(in srgb, var(--o) 55%, transparent); }
.vd-bant__oz--git:focus-within { outline:2px solid var(--primary); outline-offset:2px; }
a.vd-bant__oz-a { color:var(--primary); font-weight:700; text-decoration:none; }
a.vd-bant__oz-a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
a.vd-bant__oz-a:focus-visible { outline:none; }
.vd-bant__oz-ok { flex:none; margin-left:auto; font-weight:700; color:var(--fg-faint); transition:color .18s, transform .18s var(--dh-ease); }
.vd-bant__oz--git:hover .vd-bant__oz-ok { color:var(--o); transform:translateX(2px); }
@media (prefers-reduced-motion:reduce) { .vd-bant__oz--git:hover, .vd-bant__oz--git:hover .vd-bant__oz-ok { transform:none; } }
/* Kurulum uyarıları (2. tasarım): her uyarı bir satır — simge kutusu + kalın başlık + kısa açıklama + gideren
   yolun düğmesi; yöneticide teknik kuyruk katlı "Teknik ayrıntı" */
/* Tek liste, maddeler arasında ince çizgi (2026-10-19; eskiden her madde ayrı çerçeveli kutuydu: kutu içinde kutu) */
.vd-kuy { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-radius:var(--radius-sm);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.vd-kuy__oge { --o:var(--warn); display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); }
.vd-kuy__oge + .vd-kuy__oge { border-top:1px solid var(--border); }
.vd-kuy__oge--sorun { --o:var(--danger); }
.vd-kuy__oge--sorun .vd-kuy__baslik { color:var(--danger); }
/* Başlık bandında "N kritik · M uyarı" (yalnız kritik madde varken) */
.vd-kuy__say { flex:none; display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.vd-kuy__say .vl-not { height:24px; padding:0 10px; font-size:var(--t-xs); }
.vd-kuy__ikon { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--o);
  background:color-mix(in srgb, var(--o) 12%, transparent); }
.vd-kuy__ikon svg.ic { width:17px; height:17px; }
.vd-kuy__metin { flex:1 1 auto; min-width:0; }
.vd-kuy__baslik { display:block; font-size:var(--t-md); font-weight:700; color:var(--fg); line-height:1.3; }
.vd-kuy__aciklama { margin:2px 0 0; font-size:var(--t-sm); line-height:1.45; color:var(--fg-muted); }
.vd-kuy__teknik { margin-top:var(--sp-1); font-size:var(--t-xs); }
.vd-kuy__teknik > summary { width:fit-content; cursor:pointer; color:var(--fg-muted); }
.vd-kuy__teknik code { display:block; margin-top:var(--sp-1); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm);
  background:var(--surface-2); font-family:var(--mono); font-size:var(--t-xs); color:var(--fg); white-space:pre-wrap; overflow-wrap:anywhere; }
:is(a, button).vd-kuy__btn { flex:none; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 var(--sp-4); border-radius:var(--radius-pill);
  font-size:var(--t-sm); font-weight:600; white-space:nowrap; color:var(--primary); text-decoration:none; background:var(--surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, var(--border)); transition:background-color .15s, color .15s; }
:is(a, button).vd-kuy__btn:hover { color:#fff; background:var(--primary); text-decoration:none; }
button.vd-kuy__btn { border:0; cursor:pointer; font-family:inherit; }
.vd-kuy__btn svg.ic { width:14px; height:14px; }
[data-theme="dark"] :is(a, button).vd-kuy__btn:hover { color:#0b1220; }
.vd-kuy__oge--sorun a.vd-kuy__btn { color:var(--danger); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, var(--border)); }
.vd-kuy__oge--sorun a.vd-kuy__btn:hover { color:#fff; background:var(--danger); }
/* İpucu kutusu (müşteriye "ne yapmalı"): kartın tonunda açık zemin + renkli simge kutusu + kalın ilk cümle */
/* Bakım kartı (2. tasarım 2026-10-19): yöneticinin notu öne çıkar (müşteri için asıl bilgi "neden") */
/* ⭐ DURUM KARTI ŞERİDİ (`.vd-serit`, 2026-10-19): büyük değer + 10 parçalı çubuk. Kota kartında kullanım (aşınca hepsi
   dolu, kırmızı: `--sorun`), otomatik eylem kartında KALAN SÜRE (geçen kısım dolu, kartın tonunda). Ton `--s`. */
.vd-serit { --s:var(--t); display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.vd-serit--sorun { --s:var(--danger); }
.vd-serit__ust { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.vd-serit__k { font-size:var(--t-xs); font-weight:700; color:var(--fg-faint); }
.vd-serit__rozet { font-size:var(--t-xs); font-weight:700; color:var(--s); padding:2px 8px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--s) 12%, var(--surface)); font-variant-numeric:tabular-nums; }
.vd-serit__sayi { display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; }
.vd-serit__sayi b { font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--fg); }
.vd-serit__sayi span { font-size:var(--t-sm); font-weight:600; color:var(--fg-muted); }
.vd-serit__parcalar { display:flex; gap:3px; }
.vd-serit__p { flex:1 1 0; height:8px; border-radius:99px; background:var(--surface-3); }
.vd-serit__p.is-dolu { background:var(--s); }
.vd-serit__alt { font-size:var(--t-xs); font-weight:600; color:var(--s); }
/* ⭐ DURUM KARTI NOTU (bakım notu, askı sebebi): kartın tonunu (`--t`) alır; müşteri için asıl bilgi "neden", bu yüzden
   kutucukların ÜSTÜNDE ve belirgin (2026-10-19). Göreli zaman satırı `.vd-bant__ne` ("2 saat önce"). */
.vd-bant__not { display:flex; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); background:color-mix(in srgb, var(--t) 7%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t) 28%, var(--border)); }
.vd-bant__not-ikon { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--t);
  background:color-mix(in srgb, var(--t) 14%, transparent); }
.vd-bant__not-ikon svg.ic { width:16px; height:16px; }
.vd-bant__not-m { min-width:0; }
.vd-bant__not-k { display:block; font-size:var(--t-xs); font-weight:700; color:var(--t); }
.vd-bant__not-m p { margin:2px 0 0; font-size:var(--t-md, 14px); font-weight:500; line-height:1.45; color:var(--fg);
  overflow-wrap:anywhere; white-space:pre-line; }
.vd-bant__ne { display:block; font-size:var(--t-xs); font-weight:500; color:var(--fg-muted); }
.vd-bakim__bitir { margin:0; flex:none; }
.vd-bant__ipucu { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--t) 7%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t) 24%, var(--border)); }
.vd-bant__ipucu-ikon { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:10px; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--t) 75%, #fff), var(--t)); }
[data-theme="dark"] .vd-bant__ipucu-ikon { color:#0b1220; }
.vd-bant__ipucu-ikon svg.ic { width:16px; height:16px; }
.vd-bant__ipucu p { margin:0; font-size:var(--t-sm); line-height:1.5; color:var(--fg-muted); }
.vd-bant__ipucu b { color:var(--fg); font-weight:700; }
/* SÜREN İŞLEM KARTI (`_vm_is_kart.html`, 2. tasarım): başlıkta genel ilerleme halkası (% içinde; yüzde yoksa dönen
   yay), gövdede adım şeridi (biten dolu · süren ışıltılı · bekleyen boş · hata kırmızı) + Tamamlandı/Şimdi/Sıradaki */
.vd-is__halka { position:relative; flex:none; display:grid; place-items:center; width:46px; height:46px; color:var(--b); }
/* Yalnız halkanın KENDİ svg'si (doğrudan çocuk): ortadaki ✓/✗ simgesi de svg — genel seçici onu 0 px yapıyordu */
.vd-is__halka > svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.vd-is__iz { fill:none; stroke:color-mix(in srgb, var(--b) 16%, transparent); stroke-width:4; }
.vd-is__dolu { fill:none; stroke:var(--b); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .6s var(--dh-ease); }
/* ⚠️ Halka svg'si temelde rotate(-90deg): `vd-don` (yalnız `to 360deg`) turu 450° yapıp -90°'ye SIÇRATIYORDU
   (kullanıcı: "dönen daire takılıyor") → kendi keyframe'i -90 → 270. Faz ortak saatten (JS `svIsCanlandir`). */
@keyframes vd-is-don { from { transform:rotate(-90deg); } to { transform:rotate(270deg); } }
.vd-is__halka.is-belirsiz > svg { animation:vd-is-don 1.5s linear infinite; }
.vd-is__yuzde { position:relative; font-size:var(--t-xs); font-weight:800; font-variant-numeric:tabular-nums; color:var(--fg); letter-spacing:-.02em; }
.vd-is__yuzde svg.ic { width:18px; height:18px; color:var(--b); }
.vd-is .dh-card__ozet b { color:var(--fg); }
/* Başlıktaki tahmini kalan süre hapı (geçmiş işlerden; uzun sürüyorsa amber) */
.vd-is__kalan { flex:none; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 var(--sp-3);
  border-radius:var(--radius-pill); font-size:var(--t-sm); font-weight:600; color:var(--fg);
  background:color-mix(in srgb, var(--t) 8%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t) 22%, var(--border)); }
.vd-is__kalan svg.ic { width:14px; height:14px; color:var(--t); }
.vd-is__kalan.is-uzun { --t:var(--warn); }
/* ADIM ÇİZGİSİ (3. tasarım, kullanıcı onayı 2026-10-17): her adım adıyla; biten ✓ dolu, süren dönen simge + halka,
   bekleyen numaralı boş, hata kırmızı. Çizgi biten adıma kadar renkli. Kart dar ise (≤720) dikey liste. */
.vd-is { container:vdis / inline-size; }
.vd-is__adimlar { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
.vd-is__adim { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;
  padding:0 3px; text-align:center; }
.vd-is__adim::before { content:""; position:absolute; top:12px; right:50%; width:100%; height:2px; background:var(--border); }
.vd-is__adim:first-child::before { display:none; }
.vd-is__adim.is-bitti::before, .vd-is__adim.is-simdi::before, .vd-is__adim.is-hata::before { background:var(--t); }
.vd-is__nokta { position:relative; z-index:1; flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  font-size:var(--t-xs); font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg-muted);
  background:var(--surface); box-shadow:inset 0 0 0 2px var(--border); }
.vd-is__nokta svg.ic { width:14px; height:14px; }
/* Durum değişimi GEÇİŞLE (tazelemede htmx settle eski sınıfı önce koyar): bekleyen → süren büyür ve halkalanır,
   süren → biten küçülüp maviye döner; çizgi ve ad da yumuşak renk değiştirir */
.vd-is__nokta { transition:background-color .45s, color .45s, box-shadow .45s, transform .45s var(--dh-ease); }
.vd-is__adim::before { transition:background-color .6s; }
.vd-is__ad { transition:color .4s; }
.is-simdi > .vd-is__nokta { transform:scale(1.12); }
/* Süren adım: noktadan yayılan dalga (1,5 sn — 3 sn'lik tazelemeyi tam böler, faz atlaması göze batmaz) */
.is-simdi > .vd-is__nokta::after { content:""; position:absolute; inset:-2px; border-radius:50%; box-shadow:0 0 0 2px var(--t);
  opacity:0; animation:vd-is-dalga 1.5s ease-out infinite; }
@keyframes vd-is-dalga { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(1.9); opacity:0; } }
/* Süren adıma uzanan çizgide akan ışık */
.vd-is__adim.is-simdi::before { background:linear-gradient(90deg, transparent, color-mix(in srgb, #fff 75%, var(--t)), transparent) no-repeat,
  var(--t); background-size:45% 100%, auto; animation:vd-is-akis 1.5s linear infinite; }
@keyframes vd-is-akis { 0% { background-position:-60% 0, 0 0; } 100% { background-position:160% 0, 0 0; } }
@keyframes vd-is-akis-d { 0% { background-position:0 -60%, 0 0; } 100% { background-position:0 160%, 0 0; } }
/* İlk görünüş: kart süzülerek gelir, adımlar soldan sağa sırayla belirir (yalnız `vd-is--giris`).
   ⚠️ ANİMASYON ADIMIN (`li`) KENDİSİNE VERİLMEZ (kullanıcı bulgusu 2026-10-17): opaklık/transform animasyonu her adımı
   ayrı yığın bağlamı yapar ve dolgu süresince öyle kalır → sonraki adımın çizgisi (`::before`, sola uzanır) öncekinin
   noktasının ÜSTÜNE çizilir (F5'te ✓ ve numaralar çizgi altında kalıyordu). Nokta / ad / alt satır ve çizgi AYRI
   oynatılır; nokta `translate` ile kayar (`transform` süren adımdaki `scale`i ezmesin), dolgu `backwards`. */
.vd-is--giris { animation:vd-is-gir .5s var(--dh-ease) backwards; }
.vd-is--giris .vd-is__adim > * { animation:vd-is-adim .45s var(--dh-ease) backwards; }
.vd-is--giris .vd-is__adim::before { animation:vd-is-cizgi .45s ease-out backwards; }
.vd-is--giris .vd-is__adim.is-simdi::before { animation:vd-is-cizgi .45s ease-out backwards, vd-is-akis 1.5s linear infinite; }
@keyframes vd-is-gir { from { opacity:0; translate:0 -8px; } to { opacity:1; translate:0 0; } }
@keyframes vd-is-adim { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
@keyframes vd-is-cizgi { from { opacity:0; } to { opacity:1; } }
.vd-is--giris .vd-is__adim:nth-child(1) > *, .vd-is--giris .vd-is__adim:nth-child(1)::before { animation-delay:120ms; }
.vd-is--giris .vd-is__adim:nth-child(2) > *, .vd-is--giris .vd-is__adim:nth-child(2)::before { animation-delay:165ms; }
.vd-is--giris .vd-is__adim:nth-child(3) > *, .vd-is--giris .vd-is__adim:nth-child(3)::before { animation-delay:210ms; }
.vd-is--giris .vd-is__adim:nth-child(4) > *, .vd-is--giris .vd-is__adim:nth-child(4)::before { animation-delay:255ms; }
.vd-is--giris .vd-is__adim:nth-child(5) > *, .vd-is--giris .vd-is__adim:nth-child(5)::before { animation-delay:300ms; }
.vd-is--giris .vd-is__adim:nth-child(6) > *, .vd-is--giris .vd-is__adim:nth-child(6)::before { animation-delay:345ms; }
.vd-is--giris .vd-is__adim:nth-child(7) > *, .vd-is--giris .vd-is__adim:nth-child(7)::before { animation-delay:390ms; }
.vd-is--giris .vd-is__adim:nth-child(8) > *, .vd-is--giris .vd-is__adim:nth-child(8)::before { animation-delay:435ms; }
.vd-is--giris .vd-is__adim:nth-child(9) > *, .vd-is--giris .vd-is__adim:nth-child(9)::before { animation-delay:480ms; }
.vd-is--giris .vd-is__adim:nth-child(10) > *, .vd-is--giris .vd-is__adim:nth-child(10)::before { animation-delay:525ms; }
.vd-is--giris .vd-is__adim:nth-child(11) > *, .vd-is--giris .vd-is__adim:nth-child(11)::before { animation-delay:570ms; }
.vd-is--giris .vd-is__adim:nth-child(12) > *, .vd-is--giris .vd-is__adim:nth-child(12)::before { animation-delay:615ms; }
.vd-is--giris .vd-is__adim:nth-child(13) > *, .vd-is--giris .vd-is__adim:nth-child(13)::before { animation-delay:660ms; }
.vd-is--giris .vd-is__adim:nth-child(14) > *, .vd-is--giris .vd-is__adim:nth-child(14)::before { animation-delay:705ms; }
.vd-is--giris .vd-is__adim:nth-child(15) > *, .vd-is--giris .vd-is__adim:nth-child(15)::before { animation-delay:750ms; }
.is-bitti > .vd-is__nokta { color:#fff; background:var(--t); box-shadow:none; }
.is-hata > .vd-is__nokta { color:#fff; background:var(--danger); box-shadow:none; }
[data-theme="dark"] .is-bitti > .vd-is__nokta, [data-theme="dark"] .is-hata > .vd-is__nokta { color:#0b1220; }
.is-simdi > .vd-is__nokta { color:var(--t); box-shadow:inset 0 0 0 2px var(--t), 0 0 0 5px color-mix(in srgb, var(--t) 15%, transparent); }
.is-simdi > .vd-is__nokta svg.ic { animation:vd-don 1.5s linear infinite; }
.vd-is__ad { font-size:var(--t-xs); line-height:1.3; color:var(--fg-muted); overflow-wrap:anywhere; }
.is-bitti > .vd-is__ad { color:var(--fg); }
.is-simdi > .vd-is__ad { color:var(--fg); font-weight:700; }
.is-hata > .vd-is__ad { color:var(--danger); font-weight:600; }
.is-geri > .vd-is__nokta svg.ic { color:var(--fg-muted); }
/* TEK ADIMLI İŞ (kullanıcı 2026-10-17: "çok kullanılacak, daha güzel olsun"): halkada işe göre simge (yay döner, simge
   sabit), başlık eylemi söyler, başlık bandının dibinde akan şerit (1,5 sn — tazelemede faz atlaması göze batmaz) */
.vd-is--tek .vd-is__halka { width:48px; height:48px; }
.vd-is--tek .vd-is__yuzde svg.ic { width:20px; height:20px; }
.vd-is--tek .vd-is__halka::before { content:""; position:absolute; inset:7px; border-radius:50%;
  background:color-mix(in srgb, var(--b) 12%, transparent); }
.vd-is__akis { position:absolute; left:0; right:0; bottom:-1px; height:3px; overflow:hidden;
  background:color-mix(in srgb, var(--t) 14%, transparent); }
.vd-is__akis::after { content:""; position:absolute; top:0; bottom:0; left:0; width:32%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, transparent, var(--t), transparent); animation:vd-is-serit 1.5s ease-in-out infinite;
  }
/* Tahmini dolum (tek adımlı iş, tipik süre biliniyor): halka ve şerit `--p0`dan %95'e `--sure` içinde dolar */
.vd-is--tahmin .vd-is__dolu { animation:vd-is-tahmin var(--sure, 0ms) linear forwards; transition:none; }
@keyframes vd-is-tahmin { from { stroke-dashoffset:calc(119.38px * (1 - var(--p0, 0))); } to { stroke-dashoffset:5.97px; } }
.vd-is--tahmin .vd-is__akis::after { width:100%; border-radius:0; transform-origin:left center; background:var(--t);
  animation:vd-is-dol var(--sure, 0ms) linear forwards; }
@keyframes vd-is-dol { from { transform:scaleX(var(--p0, 0)); } to { transform:scaleX(.95); } }
/* Beklenenden uzun: başlık bandı, halka ve şerit amber */
.vd-is--uzun > .dh-card__bas { --b:var(--warn); }
.vd-is--uzun .vd-is__akis { --t:var(--warn); }
.vd-is__sure { font-variant-numeric:tabular-nums; }
/* HATA NEDENİ — tek ve çok adımlı hatada AYNI blok (kullanıcı seçimi): kırmızı yuvarlak simge + üstte temanın etiketleri
   (kırmızı "… durdu", gri sıra ve süre) + kalın büyük hata cümlesi + (müşteride) bilgi hapı; yöneticide yanda dar
   "Hata kodu" kutucuğu (kopyala). Telefonda alt alta. */
.vd-is__neden-kutu { grid-template-columns:minmax(0, 1fr); align-items:stretch; }
.vd-is__neden-kutu--kodlu { grid-template-columns:minmax(0, 1fr) minmax(200px, auto); }
/* Çok adımlı hatada adım çizgisinin altı: kart boyu ince çizgi, neden ayrı bölüm (kullanıcı: "yazılar iç içe girmiş") */
.vd-is__adimlar + .vd-is__neden-kutu { margin:var(--sp-2) calc(-1 * var(--sp-5)) 0 calc(-1 * var(--sp-6));
  padding:var(--sp-4) var(--sp-5) 0 var(--sp-6); border-top:1px solid var(--border); }
@container vdis (max-width:560px) { .vd-is__neden-kutu--kodlu { grid-template-columns:minmax(0, 1fr); } }
.vd-is__kopyala { flex:none; margin-left:auto; }
/* Neden alanı "Hata kodu" kutucuğuyla aynı ince çerçevede (kullanıcı); ikisi aynı boyda (kutu `stretch`) */
.vd-is__neden { display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.vd-is__neden-ikon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, transparent); box-shadow:0 0 0 6px color-mix(in srgb, var(--danger) 5%, transparent); }
.vd-is__neden-ikon svg.ic { width:18px; height:18px; }
.vd-is__neden-kutu--iptal .vd-is__neden-ikon { color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--warn) 6%, transparent); }
.vd-is__neden-m { display:flex; flex-direction:column; gap:6px; min-width:0; }
.vd-is__neden-etiketler { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.vd-is__neden-etiketler .dh-etiket svg.ic { width:12px; height:12px; }
.vd-is__neden-etiketler .dh-etiket:has(svg)::before, .vd-is__adim-no::before { display:none; }   /* simgeli / sıra etiketinde nokta yok */
.vd-is__adim-no { font-variant-numeric:tabular-nums; }
.vd-is__neden-t { font-size:var(--t-lg, 17px); font-weight:700; letter-spacing:-.01em; line-height:1.35; color:var(--fg); overflow-wrap:anywhere; }
.vd-is__neden-a { display:inline-flex; align-items:flex-start; gap:6px; width:fit-content; max-width:100%; padding:5px var(--sp-3) 5px 9px;
  border-radius:12px; font-size:var(--t-xs); line-height:1.45; color:var(--fg-muted); background:color-mix(in srgb, var(--fg) 5%, transparent); }
.vd-is__neden-a svg.ic { flex:none; width:13px; height:13px; margin-top:1px; color:var(--primary); }
/* Hatada "Yeniden çalıştır" başlıkta mavi hap */
button.dh-card__btn.vd-is__tekrar-b { --b:var(--primary); }
/* Kalıcı / bitmiş hatalı kartta durulan adım yavaş kırmızı nabız (ortak saate bağlı, 1,5 sn) */
.is-hata > .vd-is__nokta::after { content:""; position:absolute; inset:-2px; border-radius:50%; box-shadow:0 0 0 2px var(--danger);
  opacity:0; animation:vd-is-dalga 1.5s ease-out infinite; }
/* BİTİŞ EFEKTLERİ (`vd-is--sonuc`, bir kez): halka sıfırdan dolar, ✓/✗ çizilir, halkadan tek dalga yayılır */
.vd-is--sonuc .vd-is__dolu { animation:vd-is-halka-dol .7s var(--dh-ease) both; }
@keyframes vd-is-halka-dol { from { stroke-dashoffset:119.38px; } }
.vd-is--sonuc .vd-is__yuzde svg.ic :is(path, line, polyline) { stroke-dasharray:40; stroke-dashoffset:40;
  animation:vd-is-ciz .45s .45s ease-out forwards; }
@keyframes vd-is-ciz { to { stroke-dashoffset:0; } }
.vd-is--sonuc .vd-is__halka::after { content:""; position:absolute; inset:2px; border-radius:50%; box-shadow:0 0 0 3px var(--b);
  opacity:0; animation:vd-is-patla .9s .55s ease-out both; }
@keyframes vd-is-patla { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(1.9); opacity:0; } }
/* Başarıda adım çizgisi soldan sağa yeşile süzülür, noktalar sırayla belirir */
.vd-is--sonuc.vd-bant--yesil .vd-is__adim::before { transform-origin:left center; animation:vd-is-supur .3s ease-out both; }
.vd-is--sonuc.vd-bant--yesil .is-bitti > .vd-is__nokta { animation:vd-is-pop .4s var(--dh-ease) both; }
@keyframes vd-is-supur { from { transform:scaleX(0); } }
@keyframes vd-is-pop { 0% { scale:.55; opacity:.3; } 70% { scale:1.15; opacity:1; } 100% { scale:1; } }
.vd-is--sonuc .vd-is__adim:nth-child(1)::before, .vd-is--sonuc .vd-is__adim:nth-child(1) > .vd-is__nokta { animation-delay:200ms; }
.vd-is--sonuc .vd-is__adim:nth-child(2)::before, .vd-is--sonuc .vd-is__adim:nth-child(2) > .vd-is__nokta { animation-delay:270ms; }
.vd-is--sonuc .vd-is__adim:nth-child(3)::before, .vd-is--sonuc .vd-is__adim:nth-child(3) > .vd-is__nokta { animation-delay:340ms; }
.vd-is--sonuc .vd-is__adim:nth-child(4)::before, .vd-is--sonuc .vd-is__adim:nth-child(4) > .vd-is__nokta { animation-delay:410ms; }
.vd-is--sonuc .vd-is__adim:nth-child(5)::before, .vd-is--sonuc .vd-is__adim:nth-child(5) > .vd-is__nokta { animation-delay:480ms; }
.vd-is--sonuc .vd-is__adim:nth-child(6)::before, .vd-is--sonuc .vd-is__adim:nth-child(6) > .vd-is__nokta { animation-delay:550ms; }
.vd-is--sonuc .vd-is__adim:nth-child(7)::before, .vd-is--sonuc .vd-is__adim:nth-child(7) > .vd-is__nokta { animation-delay:620ms; }
.vd-is--sonuc .vd-is__adim:nth-child(8)::before, .vd-is--sonuc .vd-is__adim:nth-child(8) > .vd-is__nokta { animation-delay:690ms; }
.vd-is--sonuc .vd-is__adim:nth-child(9)::before, .vd-is--sonuc .vd-is__adim:nth-child(9) > .vd-is__nokta { animation-delay:760ms; }
.vd-is--sonuc .vd-is__adim:nth-child(10)::before, .vd-is--sonuc .vd-is__adim:nth-child(10) > .vd-is__nokta { animation-delay:830ms; }
.vd-is--sonuc .vd-is__adim:nth-child(11)::before, .vd-is--sonuc .vd-is__adim:nth-child(11) > .vd-is__nokta { animation-delay:900ms; }
.vd-is--sonuc .vd-is__adim:nth-child(12)::before, .vd-is--sonuc .vd-is__adim:nth-child(12) > .vd-is__nokta { animation-delay:970ms; }
.vd-is--sonuc .vd-is__adim:nth-child(13)::before, .vd-is--sonuc .vd-is__adim:nth-child(13) > .vd-is__nokta { animation-delay:1040ms; }
.vd-is--sonuc .vd-is__adim:nth-child(14)::before, .vd-is--sonuc .vd-is__adim:nth-child(14) > .vd-is__nokta { animation-delay:1110ms; }
.vd-is--sonuc .vd-is__adim:nth-child(15)::before, .vd-is--sonuc .vd-is__adim:nth-child(15) > .vd-is__nokta { animation-delay:1180ms; }
/* Sayfa yenilenmeden önce geri sayım: şerit 1,6 sn'de dolar (yenileme gecikmesiyle aynı) */
.vd-is__akis--geri::after { width:100%; border-radius:0; transform-origin:left center; background:var(--t);
  animation:vd-is-geri 1.6s linear both; }
@keyframes vd-is-geri { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes vd-is-serit { 0% { transform:translateX(-100%); } 100% { transform:translateX(320%); } }
/* Yöneticinin "İptal et" düğmesi (kırmızı çizgili hap) ve kalıcı hata kartının ✕ düğmesi */
button.dh-card__btn.vd-is__iptal { --b:var(--danger); }
/* ✕ (kullanıcı: "düz yazı gibi duruyor, tuş gibi olsun"): başlıktaki haplarla aynı boy ve çerçeve dili, yuvarlak;
   tonsuz (kapatma eylem değil), üzerine gelince koyulaşır */
.vd-is__kapat { flex:none; display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--fg-muted); background:var(--surface); border:1px solid color-mix(in srgb, var(--fg-muted) 35%, var(--border));
  box-shadow:0 1px 2px color-mix(in srgb, var(--fg) 6%, transparent);
  transition:background-color .18s, color .18s, border-color .18s, transform .18s var(--dh-ease); }
.vd-is__kapat:hover { color:var(--fg); border-color:color-mix(in srgb, var(--fg) 45%, var(--border));
  background:color-mix(in srgb, var(--fg) 6%, var(--surface)); }
.vd-is__kapat:active { transform:scale(.94); }
.vd-is__kapat:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.vd-is__kapat svg.ic { width:15px; height:15px; stroke-width:2.2; }
/* Hatalı işte BAŞARIYLA biten adımlar kırmızı değil yeşil: kart kırmızı (--t) olsa da yalnız hatalı adım kırmızıdır */
.vd-is.vd-bant--kirmizi .is-bitti > .vd-is__nokta { background:var(--ok); }
.vd-is.vd-bant--kirmizi .vd-is__adim.is-bitti::before { background:var(--ok); }
.vd-is.vd-bant--kirmizi .vd-is__adim.is-hata::before { background:linear-gradient(90deg, var(--ok), var(--danger)); }
/* SUNUCU KARTI (2026-10-18) — kimlik + güç tek kart; 2. tasarım (kullanıcı: "çok sade, düz yazı dolmuş"): üstte kimlik
   bölümü (OS karosu + geri bağlantısı / #no + ad + canlı çipler + güç düğmeleri), altta SİMGELİ bilgi + durum çipleri.
   Kullanıcı seçimi: durum kartlarının başlık bandı (`dh-card__bas`) + simgeli KUTUCUKLAR. */
.vd-kim { padding:0; overflow:hidden; margin-bottom:var(--sp-4); container:vdkim / inline-size; }
.vd-kim__bas { display:flex; align-items:center; gap:var(--sp-4) var(--sp-5); padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6); }
/* Bandın sağına doğru belirginleşen hafif nokta dokusu (Sanal Sunucular hero'sunun ızgarası; ışık YOK) */
.vd-kim__bas::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--primary) 30%, transparent) 1px, transparent 1.3px);
  background-size:14px 14px; -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 30%, #000 100%); opacity:.55; }
.vd-kim__bas > * { position:relative; z-index:1; }
.vd-kim__os { flex:none; width:60px; height:60px; border-radius:17px; box-shadow:0 8px 18px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.vd-kim__os .os-logo { width:30px; height:30px; }
/* Linux: liste karosundaki gibi Tux karoyu doldurur, ayaklar kenarda kırpılır */
.vd-kim__os .os-logo--linux { width:100%; height:100%; -webkit-mask-size:66px 66px; mask-size:66px 66px;
  -webkit-mask-position:50% 8px; mask-position:50% 8px; }
.vd-kim__os .vl-os__nk { width:15px; height:15px; right:-3px; bottom:-3px; box-shadow:0 0 0 3px var(--surface); }
.vd-kim__kimlik { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
/* Geri bağlantısı kartın SAĞ ÜST köşesinde (2026-10-19); düğme sütunu biraz aşağı iner ki üst üste binmesin */
a.vd-kim__geri { position:absolute; top:var(--sp-3); right:var(--sp-5); z-index:2; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px 0 7px; border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); text-decoration:none; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border); transition:color .18s, box-shadow .18s, transform .18s var(--dh-ease); }
a.vd-kim__geri svg.ic { width:13px; height:13px; transition:transform .18s var(--dh-ease); }
a.vd-kim__geri:hover { color:var(--primary); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, var(--border)); }
a.vd-kim__geri:hover svg.ic { transform:translateX(-2px); }
a.vd-kim__geri:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.vd-kim__no { font-family:var(--mono); font-size:var(--t-sm); color:var(--fg-muted); }
.vd-kim__ust { display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.vd-kim__ad { margin:0; font-family:var(--display); font-size:clamp(20px, 1.9vw, 26px); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; color:var(--fg); overflow-wrap:anywhere; }
.vd-kim__ad.mono { font-family:var(--mono); letter-spacing:-.02em; }
.vd-kim__kalem { flex:none; display:grid; place-items:center; width:28px; height:28px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--fg-muted); background:var(--surface); border:1px solid color-mix(in srgb, var(--fg-muted) 28%, var(--border));
  opacity:.65; transition:opacity .18s, color .18s, border-color .18s; }
.vd-kim__kalem svg.ic { width:13px; height:13px; }
.vd-kim__ust:hover .vd-kim__kalem, .vd-kim__kalem:hover, .vd-kim__kalem:focus-visible { opacity:1; color:var(--fg);
  border-color:color-mix(in srgb, var(--fg) 40%, var(--border)); }
/* IP kutucuğu öne çıkar (kullanıcı onayı 2026-10-19): adres büyük, kopyala panelin standart `.cbtn` düğmesi */
.vd-kim__ip { font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--fg); }
.vd-kim__kutu--ip .vd-kim__v { gap:8px; }
/* Genel > Disk (Datastore) hücresinde sağlama türü (eski Disk kartının etiketi; hücre mono, tür düz yazı) */
.vd-dtur { font-family:var(--sans); }
/* Canlı çipler (`_vm_power.html` + `_vm_tools.html`): güç hapı + açık kalma + işletim sistemi yanıtı + VMware Tools */
.vd-kim__canli-satir { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.vd-kim__canli { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.vd-kim__guc.dh-etiket--ok::before { animation:vd-kim-nefes 2.4s ease-in-out infinite; }
@keyframes vd-kim-nefes { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
.vd-kim__ek { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:var(--radius-pill);
  font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.vd-kim__ek svg.ic { width:12px; height:12px; }
.vd-kim__ek > i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.vd-kim__ek--ok { color:var(--ok); } .vd-kim__ek--uyari { color:var(--warn); } .vd-kim__ek--sorun { color:var(--danger); }
.vd-kim__tools:empty { display:none; }
/* Kutucuk alt satırındaki Tools durumu hap değil: renkli nokta + yazı */
.vd-kim__a .vd-kim__ek { height:auto; padding:0; background:none; box-shadow:none; font-size:inherit; font-weight:600; }
.vd-kim__os-uyari { color:var(--danger); font-weight:600; }
/* Güç düğmeleri sağda; silindi / kurulmadı / askı / bakım mesajları ve "işlem sürüyor" notu aynı alanda */
.vd-kim__eylem { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:46%; padding-top:18px; }
.vd-kim__dugmeler { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.vd-kim__eylem .vd-hero-actions { justify-content:flex-end; }
.vd-kim__not { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin:0; font-size:var(--t-xs); color:var(--fg-muted); }
.vd-kim__not svg.ic { width:13px; height:13px; flex:none; }
/* Güç işlemi yokken düğme alanındaki BİLGİ KUTUSU (silindi / kurulum / kurulamadı / askı / bakım; kullanıcı 2026-10-19:
   "çok düz metin, okunmuyor"): tonlu simge karosu + kalın başlık + kısa açıklama; ton durum hapıyla aynı. */
.vd-kim__durak { --dt:var(--fg-muted); display:flex; align-items:center; gap:var(--sp-3); max-width:380px;
  padding:9px 14px 9px 9px; border-radius:var(--radius-sm); text-align:left;
  background:color-mix(in srgb, var(--dt) 5%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dt) 26%, var(--border)); }
.vd-kim__durak-ikon { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--dt);
  background:color-mix(in srgb, var(--dt) 14%, transparent); }
.vd-kim__durak-ikon svg.ic { width:17px; height:17px; }
.vd-kim__durak-m { display:flex; flex-direction:column; gap:1px; min-width:0; }
.vd-kim__durak-m > b { font-size:var(--t-sm); font-weight:700; line-height:1.3; color:var(--fg); }
.vd-kim__durak-m > small { font-size:var(--t-xs); line-height:1.45; color:var(--fg-muted); }
.vd-kim__durak--kur { --dt:var(--info); } .vd-kim__durak--sorun { --dt:var(--danger); }
.vd-kim__durak--uyari { --dt:var(--warn); } .vd-kim__durak--bakim { --dt:var(--bakim); }
.vd-kim__durak--kur .vd-kim__durak-ikon svg.ic { animation:vd-don 1.8s linear infinite; }
@media (prefers-reduced-motion:reduce) { .vd-kim__durak--kur .vd-kim__durak-ikon svg.ic { animation:none; } }
/* Güç düğmeleri GÜÇ DURUMUNA göre (canlı güç bölümünün `data-guc` değeri, 12 sn yoklama değiştirir): açıkken Yeniden
   başlat + Durdur, kapalıyken yalnız Başlat; bilinmiyorsa (ya da `:has()` yoksa) üçü de görünür. Görünüm `.sv-gb`. */
.vd-kim:has(.vd-kim__canli[data-guc="acik"]) .vd-kim__g--baslat,
.vd-kim:has(.vd-kim__canli[data-guc="kapali"]) .vd-kim__g--yeniden,
.vd-kim:has(.vd-kim__canli[data-guc="kapali"]) .vd-kim__g--durdur,
.vd-kim:has(.vd-kim__canli[data-guc="kapali"]) .vd-kim__konsol { display:none; }  /* kapalıda konsol çalışmaz (kullanıcı 2026-10-19) */
/* ⭐ GÜÇ / KONSOL / YÖNET DÜĞMELERİ TEK DİL `.sv-gb` (sunucu kartı + Sanal Sunucular liste kartı; kullanıcı 2026-10-19:
   "bazılarının arka planı var, bazılarının yok, uyumsuz" + "benzeri alanlarda da aynı olsun"). Hepsi DOLU, rengi anlamından
   (temanın `ax-btn--success / --warning / --danger / --primary` + `--solid`); Konsol koyu arduvaz (`--konsol`). Gölge,
   üzerine gelince kalkma ve basınca tepki hepsinde aynı; temanın `.btn.primary` parıltısı burada kullanılmaz. */
.ax-btn.sv-gb { border:0; box-shadow:0 1px 2px rgb(15 23 42 / .16), inset 0 1px 0 rgb(255 255 255 / .14);
  transition:filter .15s, transform .15s var(--dh-ease), box-shadow .15s; }
.ax-btn.sv-gb:hover { filter:brightness(.93); transform:translateY(-1px);
  box-shadow:0 6px 14px -6px rgb(15 23 42 / .45), inset 0 1px 0 rgb(255 255 255 / .14); }
.ax-btn.sv-gb:active { filter:brightness(.88); transform:none; box-shadow:0 1px 2px rgb(15 23 42 / .16); }
/* ⚠️ Bağlantı olan düğmelerde (Konsol, Yönet) temanın bağlantı rengi yazıyı maviye çekiyordu (mavi zeminde mavi yazı) */
a.ax-btn.sv-gb, a.ax-btn.sv-gb:hover, a.ax-btn.sv-gb:visited, a.ax-btn.sv-gb:focus { color:var(--ax-on-accent); }
/* ⭐ OKUNURLUK (kullanıcı 2026-10-19 "renk düzeltmesini yap"): temanın dolguları beyaz yazıyla AA'yı geçmiyordu (yeşil
   ~3.4:1, amber ~3.0:1; koyu temada pastel tonlara dönüp daha da düşüyordu). Dolgular İKİ TEMADA DA SABİT ve beyaz yazıyla
   en az 4.5:1 (yeşil 5.0 · amber 5.0 · kırmızı 5.7 · mavi 6.0 · arduvaz 10); üzerine gelince AÇILMAZ, KOYULAŞIR (kontrast
   düşmesin). Ölçüt: `scratchpad/pw_dugme_kontrast.py` (gerçek hesaplanan renklerden, iki tema + üzerine gelme). */
.ax-btn.sv-gb.ax-btn--success { --ax-accent:#15803d; --ax-accent-hover:#15803d; --ax-on-accent:#fff; --ax-focus-ring:#15803d; }
.ax-btn.sv-gb.ax-btn--warning { --ax-accent:#b45309; --ax-accent-hover:#b45309; --ax-on-accent:#fff; --ax-focus-ring:#b45309; }
.ax-btn.sv-gb.ax-btn--danger { --ax-accent:#c81e1e; --ax-accent-hover:#c81e1e; --ax-on-accent:#fff; --ax-focus-ring:#c81e1e; }
.ax-btn.sv-gb.ax-btn--primary { --ax-accent:#1d57e0; --ax-accent-hover:#1d57e0; --ax-on-accent:#fff; --ax-focus-ring:#1d57e0; }
.ax-btn.sv-gb--konsol { --ax-accent:#334155; --ax-accent-hover:#334155; --ax-on-accent:#fff; --ax-focus-ring:#334155; }
[data-theme="dark"] .ax-btn.sv-gb--konsol { --ax-accent:#4b5b72; --ax-accent-hover:#4b5b72; --ax-focus-ring:#94a3b8; }
@media (prefers-reduced-motion:reduce) { .ax-btn.sv-gb:hover { transform:none; } }
/* Canlı kaynak halkaları (`_vm_stats.html`, 15 sn): liste kartının `.vl-halka`sı + altında tahsis ya da kullanılan / toplam.
   Dolma animasyonu yalnız ilk çizimde (`--ciz`); yoklamada yay eski değerden yenisine kayar. */
.vd-kim__olcu { flex:none; display:flex; align-items:flex-start; gap:var(--sp-3); }
.vd-kim__olcu .vl-halka { width:auto; min-width:62px; gap:1px; }
.vd-kim__olcu .vl-halka > b { left:50%; margin-left:-28px; }
.vd-kim__olcu .vl-halka > span { margin-top:3px; line-height:1.2; }
.vd-kim__olcu .vl-halka > small { font-size:11px; line-height:1.2; color:var(--fg-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.vd-kim__olcu:not(.vd-kim__olcu--ciz) .vl-halka__dolu { animation:none; }
.vd-kim__olcu .vl-halka__dolu { transition:stroke-dashoffset .8s var(--dh-ease), stroke .3s; }
/* Alt bölüm: bilgi + durum */
.vd-kim__alt { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5) var(--sp-4) var(--sp-6); }
.vd-kim__kutu--ip { --ic:#0ea5e9; } .vd-kim__kutu--giris { --ic:#d97706; } .vd-kim__kutu--os { --ic:var(--primary); }
.vd-kim__kutu--paket { --ic:#7c5cfc; }
[data-theme="dark"] .vd-kim__kutu--paket { --ic:#a78bfa; } [data-theme="dark"] .vd-kim__kutu--giris { --ic:#fbbf24; }
.vd-kim__kutu-ikon { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--ic);
  background:color-mix(in srgb, var(--ic) 13%, transparent); }
.vd-kim__kutu-ikon svg.ic { width:16px; height:16px; }
.vd-kim__k { display:block; font-size:var(--t-xs); font-weight:600; color:var(--fg-muted); }
.vd-kim__v { display:inline-flex; align-items:center; gap:4px; font-size:var(--t-md, 14px); font-weight:600; color:var(--fg); overflow-wrap:anywhere; }
.vd-kim__v .mono { font-family:var(--mono); }
.vd-kim__a { display:block; font-size:var(--t-xs); color:var(--fg-muted); }
/* Kutucuklar (durum kartlarındaki bilgi kutucuğu dili); bağlantılı olanlar üzerine gelince yükselir */
.vd-kim__kutular { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); }  /* satırı tam doldurur (.vd-bant__bilgi ile aynı kural) */
.vd-kim__kutu { display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.vd-kim__kutular > li { flex:1 1 200px; min-width:0; display:flex; }
.vd-kim__kutu { flex:1 1 auto; }
.vd-kim__kutu-m { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
a.vd-kim__kutu.is-git { color:inherit; text-decoration:none; cursor:pointer;
  transition:box-shadow .18s, transform .18s var(--dh-ease); }
a.vd-kim__kutu.is-git:hover { transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic) 45%, var(--border)), 0 6px 16px -10px color-mix(in srgb, var(--ic) 60%, transparent); }
a.vd-kim__kutu.is-git:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.vd-kim__ok { flex:none; align-self:center; font-weight:700; color:var(--fg-faint); transition:color .18s, transform .18s var(--dh-ease); }
a.vd-kim__kutu.is-git:hover .vd-kim__ok { color:var(--ic); transform:translateX(2px); }
a.vd-kim__a-git { color:var(--primary); font-weight:600; text-decoration:none; }
a.vd-kim__a-git:hover { text-decoration:underline; }
/* Durum çipleri (liste kartının `vl-not` sözlüğü), her biri ilgili karta / sekmeye götürür */
.vd-kim__durum { display:flex; align-items:flex-start; gap:var(--sp-3); }
span.vd-kim__cip { height:24px; padding:0 10px; font-size:var(--t-xs); }
.vd-kim__durum-k { flex:none; padding-top:3px; font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint); }
.vd-kim__ozet { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
a.vd-kim__cip { height:24px; padding:0 10px; font-size:var(--t-xs); text-decoration:none; transition:filter .18s, transform .18s var(--dh-ease); }
a.vd-kim__cip:not([class*="vl-not--"]) { color:var(--fg-muted); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
a.vd-kim__cip:hover { filter:brightness(.96) saturate(1.15); transform:translateY(-1px); }
a.vd-kim__cip:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.vl-not--bilgi { color:var(--info); background:var(--info-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--info) 30%, transparent); }
.vd-capa { display:block; scroll-margin-top:var(--sp-6); }
@container vdkim (max-width:780px) {
  .vd-kim__bas { flex-wrap:wrap; align-items:flex-start; }
  .vd-kim__kimlik { flex-basis:calc(100% - 60px - var(--sp-5)); }
  /* ikinci satır: halkalar solda, düğmeler sağda (sığmazsa düğmeler alta iner) */
  .vd-kim__eylem { flex:1 1 280px; max-width:none; align-self:center; padding-top:0; }
  /* Kart iki satıra inince ad satırı geri bağlantısının altına girmesin */
  .vd-kim__kimlik { padding-right:140px; }
  .vd-kim__durum { flex-direction:column; gap:var(--sp-2); }
}
/* Dar kart: geri bağlantısı yalnız ok simgesi (adı ipucunda) */
@container vdkim (max-width:560px) {
  a.vd-kim__geri { width:28px; height:28px; padding:0; justify-content:center; }
  a.vd-kim__geri span { display:none; }
  .vd-kim__kimlik { padding-right:36px; }
}
@container vdkim (max-width:440px) {
  .vd-kim__bas, .vd-kim__alt { padding-left:var(--sp-4); padding-right:var(--sp-4); }
  .vd-kim__os { width:48px; height:48px; border-radius:14px; }
  .vd-kim__kimlik { flex-basis:calc(100% - 48px - var(--sp-5)); }
  .vd-kim__eylem { flex-basis:100%; align-items:stretch; }
  .vd-kim__not { justify-content:flex-start; }
  .vd-kim__dugmeler, .vd-kim__dugmeler > .vd-hero-actions { flex-wrap:nowrap; gap:6px; }
  .vd-kim__dugmeler > .vd-hero-actions { flex:1 1 auto; min-width:0; }
  .vd-kim__eylem .vd-hero-actions > * { flex:1 1 auto; min-width:0; justify-content:center; }
  .vd-kim__dugmeler .ax-btn { padding-inline:10px; gap:6px; }
  /* Konsol telefonda yalnız simge (üç düğme tek satıra sığsın; adı ipucunda ve sekme çubuğunda) */
  .vd-kim__konsol { flex:none; padding-inline:12px; }
  .vd-kim__konsol-y { display:none; }
  .vd-kim__kutular > li { flex-basis:140px; }  /* telefonda satırda iki */
  /* IP adresi büyük yazılı: tam satır; tek kalan son kutucuk da tam satır */
  .vd-kim__kutular > li:first-child { flex-basis:100%; }  /* IP büyük yazılı: tam satır; tek kalan son kutucuk zaten satırı doldurur */
  .vd-kim__kutu { align-items:flex-start; }
  .vd-kim__kutu-ikon { width:28px; height:28px; border-radius:9px; }
}
@media (prefers-reduced-motion:reduce) { .vd-kim__guc.dh-etiket--ok::before { animation:none; } a.vd-kim__geri:hover svg.ic { transform:none; } }
/* Süren adımın kendi ilerlemesi (motorun `result.pct` / `phase`) */
.vd-is__alt { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; font-size:var(--t-xs);
  color:var(--fg-muted); font-variant-numeric:tabular-nums; }
.vd-is__alt progress { -webkit-appearance:none; appearance:none; width:min(100%, 92px); height:5px; border:0; border-radius:var(--radius-pill);
  overflow:hidden; background:color-mix(in srgb, var(--t) 16%, transparent); }
.vd-is__alt progress::-webkit-progress-bar { background:transparent; }
.vd-is__alt progress::-webkit-progress-value { background:var(--t); border-radius:var(--radius-pill); transition:width .6s var(--dh-ease); }
.vd-is__alt progress::-moz-progress-bar { background:var(--t); border-radius:var(--radius-pill); }
/* Dar kart: başlık tam satır, kalan süre hapı + düğme alt satırda (820 px'te başlık üç satıra sıkışıyordu) */
@container vdis (max-width:640px) {
  .vd-is > .dh-card__bas { flex-wrap:wrap; row-gap:var(--sp-3); }
  .vd-is .dh-card__baslik { flex:1 1 calc(100% - 46px - var(--sp-4)); }
  .vd-is__kalan { margin-left:calc(46px + var(--sp-4)); }
}
@container vdis (max-width:720px) {
  .vd-is__adimlar { grid-auto-flow:row; grid-auto-columns:auto; }
  .vd-is__adim { display:grid; grid-template-columns:26px minmax(0, 1fr); column-gap:var(--sp-3); align-items:start;
    padding:0 0 var(--sp-3); text-align:left; }
  .vd-is__adim:last-child { padding-bottom:0; }
  .vd-is__adim::before { display:none; }
  /* Dikeyde çizgi noktanın ALTINDAN sonraki adıma iner; biten adımın altı renkli */
  .vd-is__adim:not(:last-child)::after { content:""; position:absolute; left:12px; top:26px; bottom:0; width:2px; background:var(--border); }
  .vd-is__adim.is-bitti:not(:last-child)::after { background:var(--t); }
  /* Dikeyde akan ışık: süren adımın ÜSTÜNDEKİ çizgide (önceki adımın alt çizgisi) */
  .vd-is__adim:has(+ .is-simdi)::after { background:linear-gradient(180deg, transparent, color-mix(in srgb, #fff 75%, var(--t)), transparent) no-repeat,
    var(--t); background-size:100% 45%, auto; animation:vd-is-akis-d 1.5s linear infinite; }
  .vd-is__ad { padding-top:5px; }
  .vd-is__alt { grid-column:2; align-items:flex-start; }
}
@media (max-width:640px) {
  .vd-bant__govde { padding:var(--sp-4); }
  .vd-is__adimlar + .vd-is__neden-kutu { margin-left:calc(-1 * var(--sp-4)); margin-right:calc(-1 * var(--sp-4));
    padding-left:var(--sp-4); padding-right:var(--sp-4); }
  /* Uyarı satırı: düğme metnin altına, metinle hizalı */
  .vd-kuy__oge { flex-wrap:wrap; align-items:flex-start; }
  .vd-kuy__metin { flex-basis:calc(100% - 36px - var(--sp-3)); }
  a.vd-kuy__btn { margin-left:calc(36px + var(--sp-3)); }
  /* Başlık simgenin YANINDA kalır, düğme alt satıra iner */
  .vd-bant > .dh-card__bas { flex-wrap:wrap; padding-left:var(--sp-4); }
  .vd-bant .dh-card__baslik { flex:1 1 160px; }
}
@media (prefers-reduced-motion: reduce) { .vd-bant__ikon--canli::after, .vd-bant__ikon--don svg.ic, .vd-is__halka.is-belirsiz > svg,
  .is-simdi > .vd-is__nokta svg.ic, .is-simdi > .vd-is__nokta::after, .vd-is__adim.is-simdi::before,
  .vd-is--giris, .vd-is--giris .vd-is__adim > *, .vd-is--giris .vd-is__adim::before, .vd-is__adim:has(+ .is-simdi)::after,
  .vd-is__akis::after, .is-hata > .vd-is__nokta::after, .vd-is--sonuc .vd-is__dolu, .vd-is--sonuc .vd-is__halka::after,
  .vd-is--sonuc .vd-is__adim::before, .vd-is--sonuc .vd-is__nokta { animation:none !important; }
  .vd-is--sonuc .vd-is__yuzde svg.ic :is(path, line, polyline) { animation:none !important; stroke-dashoffset:0; }
  /* Tahmini dolum akmaz: halka geçen süre oranında SABİT durur, kartın 3 sn'lik tazelemesiyle adım adım ilerler */
  .vd-is--tahmin .vd-is__dolu { animation:none !important; stroke-dashoffset:calc(119.38px * (1 - var(--p0, 0))); }
  .vd-is--tahmin .vd-is__akis::after { transform:scaleX(var(--p0, 0)); } }