@charset "UTF-8";
/* ===========================================================================
   SHIELD — WAF/DDoS kontrol paneli tasarim sistemi
   Elle yazilmistir. Hazir tema, Bootstrap, jQuery YOK.
   Katmanlar:  1) font  2) token  3) reset  4) tipografi  5) kabuk
               6) veri bilesenleri  7) form  8) overlay  9) yardimcilar
   Koyu mod birincil tasarimdir; aydinlik mod ikinci olarak turetilmistir.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1) FONT — self-host. Disari cikan istek YOK (CSP: default-src 'self').
   Geist Variable, 100..900 agirlik ekseni tek dosyada.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/geist-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2-variations');
  /* Turkce ÅŸ ÄŸ Ä° Åž Äž bu aralikta (U+011E-011F, U+015E-015F) */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   2) TOKEN
   --------------------------------------------------------------------------- */
:root {
  /* -- tipografi -- */
  --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --t-10: .625rem;   /* 10 */
  --t-11: .6875rem;  /* 11 */
  --t-12: .75rem;    /* 12 */
  --t-13: .8125rem;  /* 13 — govde */
  --t-14: .875rem;   /* 14 */
  --t-15: .9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-34: 2.125rem;
  --t-44: 2.75rem;

  /* baslik siklastirmasi — premium hissin buyuk kismi buradan gelir */
  --tr-tight: -.014em;
  --tr-tighter: -.022em;
  --tr-display: -.032em;
  --tr-wide: .04em;
  --tr-caps: .07em;

  /* -- olcek -- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 48px;  --s10: 64px;

  /* -- yaricap -- */
  --r1: 6px; --r2: 8px; --r3: 10px; --r4: 14px; --r5: 18px; --r-pill: 999px;

  /* -- hareket -- */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.4, 0, .2, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d1: 110ms; --d2: 190ms; --d3: 300ms; --d4: 480ms;

  /* -- olcu -- */
  --rail-w: 268px;
  --rail-w-min: 76px;
  --topbar-h: 58px;
  --page-max: 1680px;
}

/* --- KOYU MOD (birincil) ------------------------------------------------- */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg:          #080a10;
  --bg-deep:     #05070b;
  --bg-elev:     #0b0e16;
  --surface:     #10131d;
  --surface-2:   #151925;
  --surface-3:   #1c2130;
  --surface-in:  #0a0d14;

  --line:        rgba(255, 255, 255, .07);
  --line-2:      rgba(255, 255, 255, .12);
  --line-3:      rgba(255, 255, 255, .20);

  --fg:          #eef1f7;
  --fg-2:        #a5adc0;
  --fg-3:        #707a90;
  --fg-4:        #4d5567;

  --accent:      #6366f1;
  --accent-2:    #8b5cf6;
  --accent-hi:   #818cf8;
  --accent-fg:   #ffffff;
  --accent-rgb:  99, 102, 241;

  --live:        #22d3ee;
  --live-rgb:    34, 211, 238;

  --ok:          #34d399;   --ok-rgb:     52, 211, 153;
  --warn:        #fbbf24;   --warn-rgb:   251, 191, 36;
  --danger:      #fb7185;   --danger-rgb: 251, 113, 133;
  --info:        #60a5fa;   --info-rgb:   96, 165, 250;
  --neutral:     #94a3b8;   --neutral-rgb: 148, 163, 184;

  /* katmanli golge + ust ici parlaklik: kartlarin "islenmis" gorunmesini saglar */
  --hair-top: inset 0 1px 0 rgba(255, 255, 255, .045);
  --sh1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh2: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -2px rgba(0, 0, 0, .45);
  --sh3: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -6px rgba(0, 0, 0, .6);
  --sh4: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 60px -12px rgba(0, 0, 0, .75);
  --ring: 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 0 4px rgba(var(--accent-rgb), .18);
  --glow: 0 0 40px -8px rgba(var(--accent-rgb), .45);

  --glass: rgba(11, 14, 22, .72);
  --scrim: rgba(3, 5, 9, .72);
}

/* --- AYDINLIK MOD -------------------------------------------------------- */
[data-theme='light'] {
  color-scheme: light;

  --bg:          #f6f7fb;
  --bg-deep:     #eef0f6;
  --bg-elev:     #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f7f8fc;
  --surface-3:   #eff1f7;
  --surface-in:  #f2f4f9;

  --line:        rgba(16, 20, 34, .09);
  --line-2:      rgba(16, 20, 34, .14);
  --line-3:      rgba(16, 20, 34, .24);

  --fg:          #10141f;
  --fg-2:        #4b5468;
  --fg-3:        #6b7488;
  --fg-4:        #9aa2b4;

  --accent:      #4f46e5;
  --accent-2:    #7c3aed;
  --accent-hi:   #4338ca;
  --accent-fg:   #ffffff;
  --accent-rgb:  79, 70, 229;

  --live:        #0891b2;  --live-rgb:   8, 145, 178;
  --ok:          #059669;  --ok-rgb:     5, 150, 105;
  --warn:        #b45309;  --warn-rgb:   180, 83, 9;
  --danger:      #dc2626;  --danger-rgb: 220, 38, 38;
  --info:        #2563eb;  --info-rgb:   37, 99, 235;
  --neutral:     #64748b;  --neutral-rgb: 100, 116, 139;

  --hair-top: inset 0 1px 0 rgba(255, 255, 255, .9);
  --sh1: 0 1px 2px rgba(16, 20, 34, .06);
  --sh2: 0 1px 2px rgba(16, 20, 34, .05), 0 4px 12px -2px rgba(16, 20, 34, .08);
  --sh3: 0 2px 4px rgba(16, 20, 34, .05), 0 12px 28px -6px rgba(16, 20, 34, .12);
  --sh4: 0 4px 8px rgba(16, 20, 34, .06), 0 24px 60px -12px rgba(16, 20, 34, .18);
  --ring: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 0 0 4px rgba(var(--accent-rgb), .14);
  --glow: 0 0 40px -8px rgba(var(--accent-rgb), .28);

  --glass: rgba(255, 255, 255, .78);
  --scrim: rgba(16, 20, 34, .44);
}

/* Renk tonu yardimci fonksiyonu yerine: her semantik renk icin yumusak zemin */
:root {
  --accent-soft:  rgba(var(--accent-rgb), .12);
  --accent-soft2: rgba(var(--accent-rgb), .20);
  --ok-soft:      rgba(var(--ok-rgb), .13);
  --warn-soft:    rgba(var(--warn-rgb), .14);
  --danger-soft:  rgba(var(--danger-rgb), .13);
  --info-soft:    rgba(var(--info-rgb), .13);
  --live-soft:    rgba(var(--live-rgb), .13);
  --neutral-soft: rgba(var(--neutral-rgb), .13);
}

/* ---------------------------------------------------------------------------
   3) RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
  /* Yatay kaydirmayi kok ogede kapat (aciklama body kuralinda). 'clip' kullanildi:
     'hidden' kok ogede dikey kaydirmayi da bozar. */
  overflow-x: clip;
}

body {
  font-family: var(--f-sans);
  font-size: var(--t-13);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  /* [data-tip] ipucu sozde ogeleri gorunmez olsalar bile KAYDIRMA TASMA alanina
     katkida bulunuyor ve sayfada 6-9px'lik yatay kaydirma cubugu olusturuyordu.
     'clip' (hidden DEGIL) yeni bir kaydirma kabi yaratmaz; boylece position:sticky
     baslik ve ray calismaya devam eder. Gercekten ekran disina cikan icerik yok
     (dogrulama: hicbir ogenin sag kenari gorunur alani asmiyor).               */
  overflow-x: clip;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  min-height: 100dvh;
  overflow-wrap: break-word;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }

button, input, select, textarea, optgroup {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
}
button { cursor: pointer; -webkit-appearance: none; appearance: none; }
button:disabled, .btn[aria-disabled='true'] { cursor: not-allowed; }

a { color: var(--accent-hi); text-decoration: none; }
a:hover { color: var(--accent); }

ul, ol { list-style: none; }

table { border-collapse: separate; border-spacing: 0; width: 100%; }
th { font-weight: 500; text-align: start; }

hr { border: 0; border-top: 1px solid var(--line); }

::placeholder { color: var(--fg-4); opacity: 1; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r1);
}

/* seritler */
::selection { background: rgba(var(--accent-rgb), .32); color: var(--fg); }

/* kaydirma cubugu — ince, yuzeye gomulu */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   4) TIPOGRAFI
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 560;
  line-height: 1.22;
  letter-spacing: var(--tr-tighter);
  color: var(--fg);
  text-wrap: balance;
}

.display {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, var(--t-44));
  font-weight: 600;
  letter-spacing: var(--tr-display);
  line-height: 1.06;
}
.h1 { font-size: var(--t-28); font-weight: 580; letter-spacing: var(--tr-display); }
.h2 { font-size: var(--t-24); font-weight: 570; }
.h3 { font-size: var(--t-20); font-weight: 560; }
.h4 { font-size: var(--t-18); font-weight: 550; }
.h5 { font-size: var(--t-16); font-weight: 550; }
.h6 { font-size: var(--t-14); font-weight: 550; }

.lead   { font-size: var(--t-15); color: var(--fg-2); letter-spacing: var(--tr-tight); }
.body   { font-size: var(--t-13); }
.small  { font-size: var(--t-12); }
.tiny   { font-size: var(--t-11); }
.micro  { font-size: var(--t-10); }

/* bolum etiketi — buyuk harf, genis izleme */
.eyebrow {
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* metrik: buyuk sayi, siki izleme, tabular */
.metric {
  font-size: var(--t-28);
  font-weight: 580;
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.metric-sm { font-size: var(--t-20); font-weight: 570; letter-spacing: var(--tr-tighter); }
.metric-lg { font-size: var(--t-34); }

.mono {
  font-family: var(--f-mono);
  font-size: .92em;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); }

.t-fg   { color: var(--fg); }
.t-2    { color: var(--fg-2); }
.t-3    { color: var(--fg-3); }
.t-4    { color: var(--fg-4); }
.t-accent { color: var(--accent-hi); }
.t-ok   { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-danger { color: var(--danger); }
.t-info { color: var(--info); }
.t-live { color: var(--live); }

.fw-4 { font-weight: 400; } .fw-5 { font-weight: 500; }
.fw-6 { font-weight: 560; } .fw-7 { font-weight: 640; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; word-break: break-word; }

/* gradyan metin — yalnizca marka ve display basliklarda */
.grad-text {
  background: linear-gradient(100deg, var(--fg) 10%, var(--accent-hi) 55%, var(--accent-2) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   5) KABUK — .app / .rail / .topbar / .page
   --------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--d3) var(--e-out);
}
[data-rail='min'] .app { grid-template-columns: var(--rail-w-min) minmax(0, 1fr); }

/* zemin atmosferi: cok hafif radyal isik, tek sefer boyanir */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(720px 380px at 18% -6%, rgba(var(--accent-rgb), .10), transparent 62%),
    radial-gradient(620px 340px at 92% 0%, rgba(var(--live-rgb), .055), transparent 60%);
}
[data-theme='light'] body::before {
  background:
    radial-gradient(760px 400px at 16% -8%, rgba(var(--accent-rgb), .07), transparent 60%),
    radial-gradient(640px 340px at 94% -4%, rgba(var(--live-rgb), .05), transparent 58%);
}

/* ===== RAIL (kenar navigasyonu) ===== */
.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--bg-elev);
  border-inline-end: 1px solid var(--line);
  overflow: hidden;
}
.rail::after { /* ic kenar parlaklik cizgisi */
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .28) 22%, transparent 78%);
  pointer-events: none;
}

.rail-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--topbar-h);
  padding-inline: 18px;
  flex: none;
  border-block-end: 1px solid var(--line);
}

/* marka */
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--fg); }
.brand-mark {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent-2) 90%);
  box-shadow: 0 2px 8px -1px rgba(var(--accent-rgb), .55), var(--hair-top);
}
.brand-mark svg { width: 17px; height: 17px; }

/* Z WAF logosu — ACIK PLAKA uzerinde sunulur.
   NEDEN: marka lacivert (#2b3445) ve panelin koyu yuzeyi (#0b0e16/#111725)
   neredeyse ayni degerde. Ustelik orijinal sanatta markanin DIS konturu da
   BEYAZ; seffaf zeminle koyu temada Z ile arkaplan arasinda hicbir sinir
   kalmiyor, katmanli yapi okunmuyor (uc zeminde olculdu). Onceki cozum
   drop-shadow idi, bu tonda yetmiyor. Markanin renklerini degistirmek yerine
   logo tasarlandigi acik zeminde gosteriliyor. */
.brand-mark.is-logo {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .08);
  padding: 3px;
  overflow: hidden;
}
.brand-mark.is-logo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: none;
}
/* giris ekraninda daha iri dursun */
.auth-side > .brand .brand-mark.is-logo,
.auth-card .brand .brand-mark.is-logo { width: 42px; height: 42px; }
.auth-side > .brand .brand-name { font-size: var(--t-16); }
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.brand-name {
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  white-space: nowrap;
}
.brand-sub {
  font-size: var(--t-10);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
  white-space: nowrap;
}

.rail-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s4) 10px var(--s3);
  overscroll-behavior: contain;
}

.nav-group + .nav-group { margin-block-start: var(--s5); }
.nav-label {
  padding: 0 10px var(--s2);
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
  white-space: nowrap;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding-inline: 10px;
  margin-block-end: 2px;
  border-radius: var(--r2);
  color: var(--fg-2);
  font-size: var(--t-13);
  font-weight: 480;
  white-space: nowrap;
  transition: background var(--d1) var(--e-io), color var(--d1) var(--e-io);
}
.nav-item:hover { background: var(--surface-2); color: var(--fg); }
.nav-item .i { flex: none; width: 18px; height: 18px; color: var(--fg-3); transition: color var(--d1); }
.nav-item:hover .i { color: var(--fg-2); }
.nav-item .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav-item.is-active {
  color: var(--fg);
  font-weight: 550;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .05));
}
.nav-item.is-active .i { color: var(--accent-hi); }
.nav-item.is-active::before { /* aktif gosterge cubugu */
  content: '';
  position: absolute;
  inset-inline-start: -10px;
  inset-block: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-2));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
}

/* menu sayaci */
.nav-count {
  flex: none;
  min-width: 20px;
  height: 18px;
  padding-inline: 6px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: var(--t-10);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  background: var(--neutral-soft);
  color: var(--fg-2);
}
.nav-count[data-tone='danger'] { background: var(--danger); color: #fff; box-shadow: 0 0 10px -1px rgba(var(--danger-rgb), .8); }
.nav-count[data-tone='warn']   { background: var(--warn-soft); color: var(--warn); }
.nav-count[data-tone='info']   { background: var(--info-soft); color: var(--info); }

/* rail alt blok */
.rail-foot { flex: none; padding: 10px; border-block-start: 1px solid var(--line); }

/* daraltilmis rail */
[data-rail='min'] .brand-text,
[data-rail='min'] .nav-label,
[data-rail='min'] .nav-item .lbl,
[data-rail='min'] .nav-count,
[data-rail='min'] .rail-card { display: none; }
[data-rail='min'] .rail-head { justify-content: center; padding-inline: 0; }
[data-rail='min'] .nav-item { justify-content: center; padding-inline: 0; }
[data-rail='min'] .nav-group + .nav-group { margin-block-start: var(--s3); position: relative; }
[data-rail='min'] .nav-group + .nav-group::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--s3) / -2 - 1px);
  inset-inline: 8px;
  height: 1px;
  background: var(--line);
}
/* daraltilmisken ucan etiket */
[data-rail='min'] .nav-item::after {
  content: attr(data-tip);
  position: absolute;
  inset-inline-start: calc(100% + 14px);
  top: 50%;
  translate: 0 -50%;
  padding: 5px 9px;
  border-radius: var(--r1);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh3);
  color: var(--fg);
  font-size: var(--t-12);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  translate: -6px -50%;
  transition: opacity var(--d1), translate var(--d2) var(--e-out), visibility var(--d1);
  z-index: 60;
  pointer-events: none;
}
[data-rail='min'] .nav-item:hover::after { opacity: 1; visibility: visible; translate: 0 -50%; }

/* rail bilgi karti (durum ozeti) */
.rail-card {
  margin: var(--s3) 2px 0;
  padding: 12px;
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--hair-top);
}

/* ===== TOPBAR ===== */
/* DIKKAT: burada z-index YOKTUR ve olmamalidir.
   z-index:1 verildiginde .app-body kendi yiginlama baglamini olusturuyordu;
   icindeki .modal (z-index:90) bu baglamin disina cikamadigi icin ray
   (.rail, z-index:40) modalin ve karartmanin UZERINDE kaliyordu — modal
   acikken sol menu yarim yarim gorunuyordu. Konumlandirma korunur, yiginlama
   baglami olusturulmaz; boylece modal .app baglaminda 90 ile yarisir. */
.app-body { display: flex; flex-direction: column; min-width: 0; position: relative; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--topbar-h);
  padding-inline: var(--s5);
  background: var(--glass);
  border-block-end: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.topbar-l { display: flex; align-items: center; gap: var(--s3); min-width: 0; flex: 1 1 auto; }
.topbar-r { display: flex; align-items: center; gap: var(--s1); flex: none; }

/* ikon butonu (topbar / rail) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r2);
  color: var(--fg-2);
  position: relative;
  transition: background var(--d1), color var(--d1);
}
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }
/* DIKKAT: eskiden buradaki nokta 8px'lik guclu bir box-shadow parlamasi
   tasiyordu; 34px'lik butonda parlama ikonun uzerine tasip pembe bir leke
   olarak gorunuyordu. Parlama kaldirildi, nokta kucuk ve keskin. */
.icon-btn.has-dot::after {
  content: '';
  position: absolute;
  top: 6px; inset-inline-end: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-elev);
}

/* ikon butonunun kosesindeki sayili kabartma (bildirim adedi) */
.btn-badge {
  position: absolute;
  top: -3px; inset-inline-end: -3px;
  display: grid; place-items: center;
  min-width: 16px; height: 16px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg-elev), var(--sh1);
  pointer-events: none;
}
[data-theme='light'] .btn-badge { box-shadow: 0 0 0 2px #fff, var(--sh1); }

/* breadcrumb */
.crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--t-12); }
.crumbs a { color: var(--fg-3); }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { color: var(--fg-4); flex: none; }
.crumbs .cur { color: var(--fg); font-weight: 520; }

/* ⌘K arama tetigi */
.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 34px;
  min-width: 230px;
  padding-inline: 10px 8px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface-in);
  color: var(--fg-3);
  font-size: var(--t-12);
  transition: border-color var(--d1), background var(--d1), color var(--d1);
}
.search-trigger:hover { border-color: var(--line-2); color: var(--fg-2); background: var(--surface-2); }
.search-trigger svg { width: 15px; height: 15px; }
.search-trigger .sp { flex: 1 1 auto; text-align: start; }

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 19px;
  padding-inline: 5px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  border-block-end-width: 2px;
  background: var(--surface-2);
  color: var(--fg-3);
  font-family: var(--f-sans);
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: 0;
}

/* canli durum kapsulu */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-in);
  font-size: var(--t-11);
  font-weight: 550;
  color: var(--fg-2);
  white-space: nowrap;
}
.live-pill[data-tone='ok']     { border-color: rgba(var(--ok-rgb), .3);     background: var(--ok-soft);     color: var(--ok); }
.live-pill[data-tone='danger'] { border-color: rgba(var(--danger-rgb), .34); background: var(--danger-soft); color: var(--danger); }
.live-pill[data-tone='warn']   { border-color: rgba(var(--warn-rgb), .3);   background: var(--warn-soft);   color: var(--warn); }
.live-pill[data-tone='live']   { border-color: rgba(var(--live-rgb), .3);   background: var(--live-soft);   color: var(--live); }
.live-pill[data-tone='neutral']{ border-color: var(--line-2);               background: var(--surface-in);  color: var(--fg-4); }

/* telemetri geri sayim kapsulu (tiklanabilir: otomatik yenilemeyi duraklatir) */
.fetch-pill {
  font: inherit;
  font-size: var(--t-11);
  font-weight: 550;
  cursor: pointer;
  gap: 6px;
  transition: border-color var(--d1) var(--e-io), background var(--d1) var(--e-io),
              color var(--d1) var(--e-io), transform var(--d1) var(--e-out);
}
.fetch-pill:hover { transform: translateY(-1px); }
.fetch-pill:focus-visible { outline: none; box-shadow: var(--ring); }
.fetch-pill b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fetch-pill.is-paused .pulse::before { animation: none; }
.fetch-pill.is-paused .pulse { opacity: .5; }

/* nabiz noktasi
   DIKKAT: halka daha once olceklenen (scale) bir sozde ogeydi. Donusturulmus
   icerik KAYDIRMA TASMA alanina katkida bulunur; bu yuzden sayfada 6-9px'lik
   yatay kaydirma olusuyordu. box-shadow ne yerlesimi ne de tasma alanini
   etkiler, gorsel sonuc ayni. */
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: pulse-ring 1.8s var(--e-out) infinite;
}
@keyframes pulse-ring {
  0%        { box-shadow: 0 0 0 0 currentColor;   opacity: .6; }
  70%, 100% { box-shadow: 0 0 0 9px currentColor; opacity: 0; }
}

/* ===== SAYFA ===== */
.page {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s6) var(--s5) var(--s8);
}
@media (max-width: 640px) { .page { padding: var(--s4) var(--s4) var(--s7); } }

/* sayfa basligi */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-block-end: var(--s5);
}
.page-head-t { min-width: 0; }
.page-title {
  font-size: var(--t-24);
  font-weight: 580;
  letter-spacing: var(--tr-display);
  line-height: 1.16;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-desc { margin-block-start: 5px; font-size: var(--t-13); color: var(--fg-3); }
.page-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* footer */
.app-foot {
  flex: none;
  padding: var(--s5);
  border-block-start: 1px solid var(--line);
  color: var(--fg-4);
  font-size: var(--t-11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* mobil: rail cekmece olur */
.rail-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d2), visibility var(--d2);
}
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--rail-w);
    translate: -102% 0;
    box-shadow: var(--sh4);
    transition: translate var(--d3) var(--e-out);
  }
  [data-drawer='open'] .rail { translate: 0 0; }
  [data-drawer='open'] .rail-scrim { opacity: 1; visibility: visible; }
  [data-rail='min'] .app { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) { .rail-toggle-mobile { display: none; } }
@media (max-width: 1023px) { .rail-toggle-desktop { display: none; } }

/* ---------------------------------------------------------------------------
   6) VERI BILESENLERI
   --------------------------------------------------------------------------- */

/* ===== IZGARA ===== */
.grid { display: grid; gap: var(--s4); }
.grid.g2 { gap: var(--s2); } .grid.g3 { gap: var(--s3); } .grid.g5 { gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Analitikte bes KPI yan yana duruyor (istek / engellenen / onbellek / origin /
   yanit suresi). Dortlu izgaraya sikistirmak besinciyi alt satira tek basina
   atiyordu. Kirilma noktalari cols-4 ile ayni davranir. */
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* icerik agirlikli iki kolon */
.cols-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cols-4-8 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cols-9-3 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.cols-3-9 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-full { grid-column: 1 / -1; }

@media (max-width: 1400px) {
  .cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .cols-8-4, .cols-4-8, .cols-9-3, .cols-3-9 { grid-template-columns: minmax(0, 1fr); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4, .cols-5, .cols-6 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
}

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.spacer { flex: 1 1 auto; min-width: 0; }

/* ===== PANEL (kart) ===== */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r4);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh2), var(--hair-top);
  min-width: 0;
}
.panel-hd {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 14px var(--s5);
  border-block-end: 1px solid var(--line);
  flex: none;
  min-height: 54px;
}
.panel-hd.no-line { border-block-end: 0; padding-block-end: 0; }
.panel-t { font-size: var(--t-14); font-weight: 560; letter-spacing: var(--tr-tighter); }
.panel-s { display: block; margin-block-start: 2px; font-size: var(--t-11); color: var(--fg-4); font-weight: 400; }
.panel-hd .spacer { min-width: var(--s2); }
.panel-bd { padding: var(--s5); flex: 1 1 auto; min-width: 0; }
.panel-bd.flush { padding: 0; }
.panel-bd.tight { padding: var(--s4); }
.panel-ft {
  padding: 12px var(--s5);
  border-block-start: 1px solid var(--line);
  flex: none;
  font-size: var(--t-12);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
/* panel varyantlari */
.panel.raised { box-shadow: var(--sh3), var(--hair-top); }
.panel.quiet { background: var(--surface-2); box-shadow: none; }
.panel.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.panel.accent-top { overflow: hidden; }
.panel.accent-top::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}

/* ===== STAT (KPI karosu) ===== */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s5);
  border-radius: var(--r4);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh2), var(--hair-top);
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--d2) var(--e-io), box-shadow var(--d2) var(--e-io), translate var(--d2) var(--e-out);
}
.stat.is-link:hover {
  border-color: rgba(var(--accent-rgb), .38);
  box-shadow: var(--sh3), var(--hair-top), 0 0 0 1px rgba(var(--accent-rgb), .12);
  translate: 0 -2px;
}
.stat-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
/* ton isigi: karonun sag ustunde yumusak renk sizmasi */
.stat::after {
  content: '';
  position: absolute;
  inset-block-start: -50%;
  inset-inline-end: -28%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--tone-rgb, var(--accent-rgb)), .16), transparent 68%);
  pointer-events: none;
}
.stat[data-tone='ok']      { --tone-rgb: var(--ok-rgb); }
.stat[data-tone='warn']    { --tone-rgb: var(--warn-rgb); }
.stat[data-tone='danger']  { --tone-rgb: var(--danger-rgb); }
.stat[data-tone='info']    { --tone-rgb: var(--info-rgb); }
.stat[data-tone='live']    { --tone-rgb: var(--live-rgb); }
.stat[data-tone='neutral'] { --tone-rgb: var(--neutral-rgb); }

.stat-top { display: flex; align-items: flex-start; gap: var(--s3); position: relative; z-index: 1; }
.stat-lbl {
  font-size: var(--t-11);
  font-weight: 550;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
  flex: 1 1 auto;
  min-width: 0;
}
.stat-ico {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r2);
  background: rgba(var(--tone-rgb, var(--accent-rgb)), .13);
  color: rgb(var(--tone-rgb, var(--accent-rgb)));
  border: 1px solid rgba(var(--tone-rgb, var(--accent-rgb)), .2);
}
.stat-ico svg { width: 17px; height: 17px; }
.stat-val { position: relative; z-index: 1; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.stat-val .metric { font-size: var(--t-28); }
.stat-unit { font-size: var(--t-12); color: var(--fg-3); font-weight: 500; }
.stat-sub { position: relative; z-index: 1; font-size: var(--t-12); color: var(--fg-3); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* yukseklik SH.SPARK_H ile ayni olmali; overflow guvenlik agi */
.stat-spark { position: relative; z-index: 1; height: 44px; margin-inline: -4px; overflow: hidden; }
.stat-spark .apexcharts-canvas { display: block; }
/* Yaklasik 5 kaydin sigdigi, tasarsa dikey kayan panel govdesi.
   Uc yan panel (en cok hedef alinan / IP blok / son hareketler) boylece esit
   yukseklikte durur ve sayfayi asagi dogru sisirmez. */
.panel-bd.scroll-5 {
  max-height: 336px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
  /* son satirin kesildigini belli eden yumusak alt gecis */
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.panel-bd.scroll-5::-webkit-scrollbar { width: 8px; }
.panel-bd.scroll-5::-webkit-scrollbar-track { background: transparent; }
.panel-bd.scroll-5::-webkit-scrollbar-thumb {
  background: var(--line-3);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.panel-bd.scroll-5::-webkit-scrollbar-thumb:hover { background: var(--fg-4); background-clip: content-box; }
/* icerik zaten sigiyorsa maske uygulanmasin diye: tasma yoksa gorsel fark olmaz */
.panel-bd.scroll-5 > *:last-child { margin-block-end: 0; }

/* oran cubugunun ustundeki kucuk gosterge satiri: "aktif hesap oranı  %100".
   Baglamsiz duran dolu bir cubugun ne anlattigini netlestirir. */
.stat-gauge {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-block-end: 6px;
  font-size: var(--t-11);
  color: var(--fg-4);
}
.stat-gauge b { font-size: var(--t-12); font-weight: 600; color: var(--fg-2); }

/* hicbir degeri olmayan seri: cubuk cizilmez, yerine kesikli taban cizgisi */
.stat-spark.is-flat::after {
  content: '';
  position: absolute;
  inset-inline: 4px;
  inset-block-end: 3px;
  height: 0;
  border-block-end: 1px dashed var(--line-3);
}
/* sparkline altindaki minik zaman ekseni (orn. "24 sa once" ... "simdi") */
.stat-axis {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between;
  margin-block-start: 3px;
  font-size: var(--t-10);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.stat-ft {
  position: relative; z-index: 1;
  margin-block-start: auto;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--line);
  font-size: var(--t-11);
  color: var(--fg-4);
  display: flex; align-items: center; gap: 6px;
}
.stat-ft svg { width: 13px; height: 13px; flex: none; }

/* delta cipi */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--r1);
  font-size: var(--t-11);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--neutral-soft);
  color: var(--fg-2);
}
.delta svg { width: 12px; height: 12px; }
.delta[data-dir='up']   { background: var(--ok-soft); color: var(--ok); }
.delta[data-dir='down'] { background: var(--danger-soft); color: var(--danger); }
.delta[data-dir='up'][data-invert]   { background: var(--danger-soft); color: var(--danger); }
.delta[data-dir='down'][data-invert] { background: var(--ok-soft); color: var(--ok); }

/* ===== BADGE / CHIP ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--r1);
  border: 1px solid transparent;
  font-size: var(--t-11);
  font-weight: 550;
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--neutral-soft);
  color: var(--fg-2);
  border-color: rgba(var(--neutral-rgb), .2);
}
.badge svg { width: 12px; height: 12px; }
.badge[data-tone='accent'] { background: var(--accent-soft); color: var(--accent-hi); border-color: rgba(var(--accent-rgb), .24); }
.badge[data-tone='ok']     { background: var(--ok-soft);     color: var(--ok);     border-color: rgba(var(--ok-rgb), .24); }
.badge[data-tone='warn']   { background: var(--warn-soft);   color: var(--warn);   border-color: rgba(var(--warn-rgb), .26); }
.badge[data-tone='danger'] { background: var(--danger-soft); color: var(--danger); border-color: rgba(var(--danger-rgb), .26); }
.badge[data-tone='info']   { background: var(--info-soft);   color: var(--info);   border-color: rgba(var(--info-rgb), .24); }
.badge[data-tone='live']   { background: var(--live-soft);   color: var(--live);   border-color: rgba(var(--live-rgb), .24); }
.badge[data-tone='live']   { background: var(--live-soft);   color: var(--live);   border-color: rgba(var(--live-rgb), .26); }
.badge.solid[data-tone='danger'] { background: var(--danger); color: #fff; border-color: transparent; }
.badge.solid[data-tone='ok']     { background: var(--ok);     color: #06231a; border-color: transparent; }
.badge.solid[data-tone='accent'] { background: var(--accent); color: #fff; border-color: transparent; }
.badge.sm { height: 19px; padding-inline: 6px; font-size: var(--t-10); }
.badge.pill { border-radius: var(--r-pill); padding-inline: 9px; }

/* nokta gostergesi */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--neutral); }
.dot[data-tone='ok'] { background: var(--ok); }
.dot[data-tone='warn'] { background: var(--warn); }
.dot[data-tone='danger'] { background: var(--danger); }
.dot[data-tone='info'] { background: var(--info); }
.dot[data-tone='live'] { background: var(--live); }
.dot.glow { box-shadow: 0 0 8px -1px currentColor; }

/* ===== METER (ilerleme) ===== */
.meter {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(var(--tone-rgb, var(--accent-rgb)), .13);
  overflow: hidden;
}
.meter.xs { height: 4px; }
.meter.lg { height: 9px; }
.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--tone-rgb, var(--accent-rgb)), .75), rgb(var(--tone-rgb, var(--accent-rgb))));
  box-shadow: 0 0 10px -2px rgba(var(--tone-rgb, var(--accent-rgb)), .8);
  transition: width var(--d4) var(--e-out);
}
.meter[data-tone='ok']     { --tone-rgb: var(--ok-rgb); }
.meter[data-tone='warn']   { --tone-rgb: var(--warn-rgb); }
.meter[data-tone='danger'] { --tone-rgb: var(--danger-rgb); }
.meter[data-tone='info']   { --tone-rgb: var(--info-rgb); }
.meter[data-tone='neutral']{ --tone-rgb: var(--neutral-rgb); }
/* seritli/animasyonlu varyant — yalnizca "suruyor" durumlari icin */
.meter.striped > span {
  background-image: linear-gradient(115deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%);
  background-size: 12px 12px;
  animation: meter-slide 900ms linear infinite;
}
@keyframes meter-slide { to { background-position: 12px 0; } }

/* ===== AVATAR ===== */
.avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--r2);
  font-size: var(--t-11);
  font-weight: 650;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent-2));
  box-shadow: var(--hair-top);
  overflow: hidden;
}
.avatar.xs { width: 22px; height: 22px; font-size: var(--t-10); border-radius: var(--r1); }
.avatar.sm { width: 27px; height: 27px; font-size: var(--t-10); }
.avatar.lg { width: 40px; height: 40px; font-size: var(--t-13); border-radius: var(--r3); }
.avatar.xl { width: 56px; height: 56px; font-size: var(--t-18); border-radius: var(--r4); }
.avatar.round { border-radius: 50%; }
.avatar[data-tone='neutral'] { background: var(--surface-3); color: var(--fg-2); border: 1px solid var(--line-2); }
.avatar[data-tone='ok']     { background: var(--ok-soft);     color: var(--ok);     border: 1px solid rgba(var(--ok-rgb), .25); }
.avatar[data-tone='warn']   { background: var(--warn-soft);   color: var(--warn);   border: 1px solid rgba(var(--warn-rgb), .25); }
.avatar[data-tone='danger'] { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(var(--danger-rgb), .25); }
.avatar[data-tone='info']   { background: var(--info-soft);   color: var(--info);   border: 1px solid rgba(var(--info-rgb), .25); }
.avatar[data-tone='live']   { background: var(--live-soft);   color: var(--live);   border: 1px solid rgba(var(--live-rgb), .25); }
.avatar svg { width: 55%; height: 55%; }

/* kimlik blogu (avatar + iki satir) */
.ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ident-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ident-t b { font-weight: 540; font-size: var(--t-13); }
.ident-t span { font-size: var(--t-11); color: var(--fg-4); }

/* ===== DT (veri tablosu) ===== */
.dt-wrap { display: flex; flex-direction: column; min-width: 0; }
.dt-tools {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 12px var(--s5);
  border-block-end: 1px solid var(--line);
  flex-wrap: wrap;
}
.dt-scroll {
  overflow-x: auto;
  overflow-y: visible;
  min-width: 0;
  overscroll-behavior-x: contain;
}
/* width:100% olmadan tablo shrink-to-fit davraniyor ve sabit kolon
   genislikleri toplaninca kapsayiciyi birkac piksel asip yatay kaydirma
   cubugu cikariyordu. Esnek kolonlar artik kalan alani paylasir. */
table.dt { width: 100%; font-size: var(--t-12); }
table.dt thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px var(--s4);
  background: var(--surface-2);
  border-block-end: 1px solid var(--line);
  color: var(--fg-3);
  font-size: var(--t-10);
  font-weight: 620;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
table.dt thead th:first-child { padding-inline-start: var(--s5); }
table.dt thead th:last-child  { padding-inline-end: var(--s5); }
table.dt tbody td {
  padding: 11px var(--s4);
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
  color: var(--fg-2);
  white-space: nowrap;
}
table.dt tbody td:first-child { padding-inline-start: var(--s5); }
table.dt tbody td:last-child  { padding-inline-end: var(--s5); }
table.dt tbody tr { transition: background var(--d1) var(--e-io); }
table.dt tbody tr:hover td { background: var(--surface-2); }
table.dt tbody tr:last-child td { border-block-end: 0; }
table.dt tbody tr.is-unread td { background: rgba(var(--accent-rgb), .045); }
table.dt tbody tr.is-unread td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.dt td.wrap, table.dt th.wrap { white-space: normal; }
table.dt td.end, table.dt th.end { text-align: end; }
table.dt td.mid, table.dt th.mid { text-align: center; }
/* yogunluk */
[data-density='compact'] table.dt tbody td { padding-block: 6px; }
[data-density='compact'] table.dt thead th { padding-block: 6px; }
[data-density='relaxed'] table.dt tbody td { padding-block: 16px; }

/* siralanabilir baslik */
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--fg); background: var(--surface-3); }
th.sortable .sort-i {
  display: inline-block;
  margin-inline-start: 5px;
  opacity: .34;
  transition: opacity var(--d1), rotate var(--d2) var(--e-out);
  vertical-align: -2px;
}
th.sortable[aria-sort] { color: var(--accent-hi); }
th.sortable[aria-sort] .sort-i { opacity: 1; }
th.sortable[aria-sort='descending'] .sort-i { rotate: 180deg; }

/* satir icin aksiyon kumesi */
.act { display: inline-flex; align-items: center; gap: 4px; }
.act-btn {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r1);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg-3);
  transition: all var(--d1) var(--e-io);
}
.act-btn:hover { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .3); color: var(--accent-hi); }
.act-btn.danger:hover { background: var(--danger-soft); border-color: rgba(var(--danger-rgb), .3); color: var(--danger); }
.act-btn svg { width: 14px; height: 14px; }

/* sayfalama */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 12px var(--s5);
  border-block-start: 1px solid var(--line);
  flex-wrap: wrap;
  font-size: var(--t-12);
  color: var(--fg-3);
}
.pager-btns { display: flex; align-items: center; gap: 3px; }
.pager-btn {
  display: grid;
  place-items: center;
  min-width: 30px; height: 30px;
  padding-inline: 8px;
  border-radius: var(--r1);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--t-12);
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  transition: all var(--d1) var(--e-io);
}
.pager-btn:hover { border-color: var(--line-2); color: var(--fg); background: var(--surface-3); }
.pager-btn[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 2px 8px -2px rgba(var(--accent-rgb), .7);
}
.pager-btn[aria-disabled='true'] { opacity: .4; pointer-events: none; }
.pager-btn svg { width: 15px; height: 15px; }

/* ===== FEED (olay akisi) ===== */
.feed { position: relative; display: flex; flex-direction: column; }
.feed::before {
  content: '';
  position: absolute;
  inset-block: 10px 10px;
  inset-inline-start: 11px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent);
}
.feed-item { position: relative; display: flex; gap: var(--s3); padding-block: 11px; }
.feed-item:first-child { padding-block-start: 2px; }
.feed-item:last-child { padding-block-end: 2px; }
.feed-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(var(--tone-rgb, var(--neutral-rgb)), .3);
  background: var(--surface);
  color: rgb(var(--tone-rgb, var(--neutral-rgb)));
  box-shadow: 0 0 0 3px var(--surface);
}
.feed-node svg { width: 12px; height: 12px; }
.feed-item[data-tone='ok']      { --tone-rgb: var(--ok-rgb); }
.feed-item[data-tone='warn']    { --tone-rgb: var(--warn-rgb); }
.feed-item[data-tone='danger']  { --tone-rgb: var(--danger-rgb); }
.feed-item[data-tone='info']    { --tone-rgb: var(--info-rgb); }
.feed-item[data-tone='accent']  { --tone-rgb: var(--accent-rgb); }
.feed-bd { min-width: 0; flex: 1 1 auto; }
.feed-time { font-size: var(--t-10); color: var(--fg-4); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-wide); }
.feed-t { font-size: var(--t-12); font-weight: 530; color: var(--fg); margin-block-start: 1px; }
.feed-d { font-size: var(--t-11); color: var(--fg-3); margin-block-start: 2px; }

/* ===== LISTE (yan panel listeleri) ===== */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--s5);
  border-block-end: 1px solid var(--line);
  min-width: 0;
  color: var(--fg-2);
  transition: background var(--d1) var(--e-io);
}
.list-item:last-child { border-block-end: 0; }
a.list-item:hover { background: var(--surface-2); color: var(--fg); }
.list-item .chev { color: var(--fg-4); flex: none; transition: translate var(--d2) var(--e-out); }
a.list-item:hover .chev { translate: 3px 0; color: var(--accent-hi); }

/* filtre listesi (gelen kutusu sol panel) */
.filters { display: flex; flex-direction: column; gap: 2px; padding: var(--s3); }
.filter {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding-inline: 10px;
  border-radius: var(--r2);
  color: var(--fg-2);
  font-size: var(--t-12);
  font-weight: 490;
  transition: background var(--d1), color var(--d1);
}
.filter:hover { background: var(--surface-2); color: var(--fg); }
.filter.is-active { background: var(--accent-soft); color: var(--accent-hi); font-weight: 560; }
.filter svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.filter .n { margin-inline-start: auto; font-size: var(--t-11); font-variant-numeric: tabular-nums; color: var(--fg-4); }
.filter.is-active .n { color: var(--accent-hi); }

/* ===== KV (etiket/deger listesi) ===== */
.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: 9px;
  border-block-end: 1px solid var(--line);
  min-width: 0;
}
.kv-row:last-child { border-block-end: 0; }
.kv-k { font-size: var(--t-12); color: var(--fg-3); flex: none; }
.kv-v { margin-inline-start: auto; font-size: var(--t-12); font-weight: 520; color: var(--fg); text-align: end; min-width: 0; }

/* ===== BOS DURUM ===== */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s9) var(--s5); }
.empty-ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r4);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg-3);
  margin-block-end: var(--s4);
  box-shadow: var(--hair-top);
}
.empty-ico svg { width: 24px; height: 24px; }
.empty-t { font-size: var(--t-14); font-weight: 550; color: var(--fg); }
.empty-d { margin-block-start: 5px; font-size: var(--t-12); color: var(--fg-3); max-width: 44ch; }
.empty-a { margin-block-start: var(--s4); }

/* ===== GRAFIK KABI ===== */
.chart { width: 100%; min-height: 300px; }
.chart.xs { min-height: 120px; }
.chart.sm { min-height: 220px; }
.chart.lg { min-height: 380px; }
.chart.xl { min-height: 460px; }
.spark { width: 100%; height: 38px; }
/* ApexCharts kendi metin renklerini gomuyor; token'lara baglaniyoruz */
.apexcharts-tooltip {
  border: 1px solid var(--line-2) !important;
  background: var(--surface-3) !important;
  box-shadow: var(--sh3) !important;
  border-radius: var(--r2) !important;
  color: var(--fg) !important;
  font-family: var(--f-sans) !important;
}
.apexcharts-tooltip-title {
  background: var(--surface-2) !important;
  border-block-end: 1px solid var(--line) !important;
  font-weight: 600 !important;
  font-size: var(--t-11) !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
  background: var(--surface-3) !important;
  border-color: var(--line-2) !important;
  color: var(--fg) !important;
}
.apexcharts-legend-text { color: var(--fg-2) !important; font-family: var(--f-sans) !important; }
.apexcharts-gridline { stroke: var(--line); }

/* ===== HEARTBEAT (uptime cubuklari) ===== */
.beats { display: flex; align-items: flex-end; gap: 2px; height: 26px; flex: none; }
.beats i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--line-2);
  transition: background var(--d1);
}
.beats i.up    { background: var(--ok); }
.beats i.down  { background: var(--danger); }
.beats i.pend  { background: var(--warn); }
.beats i.maint { background: var(--neutral); }
@media (max-width: 640px) { .beats { display: none; } }

/* ===== KOD / HAM METIN ===== */
.code {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r1);
  border: 1px solid var(--line);
  background: var(--surface-in);
  font-family: var(--f-mono);
  font-size: var(--t-11);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.raw {
  padding: var(--s4);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface-in);
  font-family: var(--f-mono);
  font-size: var(--t-11);
  line-height: 1.7;
  color: var(--fg-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 380px;
  overflow: auto;
}

/* ===== SKELETON ===== */
.sk {
  border-radius: var(--r1);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease-in-out infinite;
}
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------------------------------------------------------------------------
   7) FORM + BUTON
   --------------------------------------------------------------------------- */

/* ===== BUTON ===== */
.btn {
  --btn-h: 36px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--btn-h);
  padding-inline: 14px;
  border-radius: var(--r2);
  border: 1px solid transparent;
  font-size: var(--t-13);
  font-weight: 540;
  letter-spacing: var(--tr-tight);
  white-space: nowrap;
  user-select: none;
  transition: background var(--d1) var(--e-io), border-color var(--d1) var(--e-io),
              color var(--d1) var(--e-io), box-shadow var(--d2) var(--e-io), translate var(--d1);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { translate: 0 1px; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

/* birincil — gradyan + ic parlaklik + renkli golge */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--accent-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px -4px rgba(var(--accent-rgb), .7),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-hi), var(--accent-hi)); }
.btn-primary:hover { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -4px rgba(var(--accent-rgb), .85), inset 0 1px 0 rgba(255,255,255,.22); }

/* ikincil — yuzey + hairline */
.btn-default {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--fg);
  box-shadow: var(--sh1), var(--hair-top);
}
.btn-default:hover { background: var(--surface-3); border-color: var(--line-3); }

/* hayalet */
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--fg); }

/* anahat */
.btn-outline { border-color: var(--line-2); color: var(--fg-2); }
.btn-outline:hover { border-color: rgba(var(--accent-rgb), .45); color: var(--accent-hi); background: var(--accent-soft); }

/* semantik yumusak */
.btn-soft {
  background: rgba(var(--tone-rgb, var(--accent-rgb)), .13);
  border-color: rgba(var(--tone-rgb, var(--accent-rgb)), .24);
  color: rgb(var(--tone-rgb, var(--accent-rgb)));
}
.btn-soft:hover { background: rgba(var(--tone-rgb, var(--accent-rgb)), .2); }
.btn-danger {
  background: linear-gradient(180deg, var(--danger), rgba(var(--danger-rgb), .86));
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px -4px rgba(var(--danger-rgb), .6), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn[data-tone='ok']      { --tone-rgb: var(--ok-rgb); }
.btn[data-tone='warn']    { --tone-rgb: var(--warn-rgb); }
.btn[data-tone='danger']  { --tone-rgb: var(--danger-rgb); }
.btn[data-tone='info']    { --tone-rgb: var(--info-rgb); }
.btn[data-tone='neutral'] { --tone-rgb: var(--neutral-rgb); }

/* boyutlar */
.btn.xs { --btn-h: 26px; padding-inline: 8px; font-size: var(--t-11); border-radius: var(--r1); }
.btn.xs svg { width: 13px; height: 13px; }
.btn.sm { --btn-h: 31px; padding-inline: 11px; font-size: var(--t-12); }
.btn.sm svg { width: 14px; height: 14px; }
.btn.lg { --btn-h: 42px; padding-inline: 18px; font-size: var(--t-14); border-radius: var(--r3); }
.btn.block { width: 100%; }
.btn.ico { padding-inline: 0; width: var(--btn-h); }

/* buton grubu */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-start-start-radius: var(--r2); border-end-start-radius: var(--r2); }
.btn-group .btn:last-child { border-start-end-radius: var(--r2); border-end-end-radius: var(--r2); }
.btn-group .btn + .btn { margin-inline-start: -1px; }
.btn-group .btn:hover, .btn-group .btn[aria-current] { z-index: 1; }

/* segmentli kontrol (aralik secici) */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface-in);
}
.segmented > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding-inline: 11px;
  border-radius: 6px;
  font-size: var(--t-12);
  font-weight: 520;
  color: var(--fg-3);
  white-space: nowrap;
  transition: all var(--d1) var(--e-io);
}
.segmented > *:hover { color: var(--fg); background: var(--surface-2); }
.segmented > *[aria-current='true'] {
  background: var(--surface-3);
  color: var(--fg);
  box-shadow: var(--sh1), var(--hair-top);
  font-weight: 560;
}

/* ===== FORM ===== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label {
  font-size: var(--t-11);
  font-weight: 550;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
}
.label .req { color: var(--danger); margin-inline-start: 3px; }
.hint { font-size: var(--t-11); color: var(--fg-4); line-height: 1.5; }
.hint.err { color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border-radius: var(--r2);
  border: 1px solid var(--line-2);
  background: var(--surface-in);
  color: var(--fg);
  font-size: var(--t-13);
  transition: border-color var(--d1), box-shadow var(--d2), background var(--d1);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), .6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
  background: var(--surface-2);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }
.textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.input.mono, .textarea.mono { font-family: var(--f-mono); font-size: var(--t-12); }
.input.sm, .select.sm { min-height: 31px; padding-block: 5px; font-size: var(--t-12); }

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23707a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
[dir='rtl'] .select { background-position: left 9px center; }

/* onekli / sonekli alan */
.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group > .input { border-radius: 0; flex: 1 1 auto; min-width: 0; }
.input-group > :first-child { border-start-start-radius: var(--r2); border-end-start-radius: var(--r2); }
.input-group > :last-child { border-start-end-radius: var(--r2); border-end-end-radius: var(--r2); }
.input-group > * + * { margin-inline-start: -1px; }
.input-group .addon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-inline: 11px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg-3);
  font-size: var(--t-12);
  white-space: nowrap;
}
.input-group .addon svg { width: 15px; height: 15px; }
.input-group .input:focus { z-index: 1; }
.input-group > .btn { border-radius: 0; }

/* anahtar (switch) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: relative;
  width: 38px; height: 22px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  transition: background var(--d2) var(--e-io), border-color var(--d2);
}
.switch .track::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fg-3);
  box-shadow: var(--sh1);
  transition: translate var(--d2) var(--e-spring), background var(--d2);
}
.switch input:checked + .track {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: transparent;
  box-shadow: 0 0 12px -3px rgba(var(--accent-rgb), .8);
}
.switch input:checked + .track::after { translate: 16px 0; background: #fff; }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
.switch .st { font-size: var(--t-13); color: var(--fg-2); }

/* onay kutusu / radyo */
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: var(--t-13); color: var(--fg-2); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  flex: none;
  border-radius: 5px;
  border: 1px solid var(--line-3);
  background: var(--surface-in);
  color: transparent;
  transition: all var(--d1) var(--e-io);
}
.check .box svg { width: 12px; height: 12px; }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.check input:focus-visible + .box { box-shadow: var(--ring); }
.check.radio .box { border-radius: 50%; }

/* dogrulama kodu girisi */
.otp {
  width: 100%;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-24);
  font-weight: 600;
  letter-spacing: .42em;
  padding-inline-start: .42em;
  min-height: 52px;
}

/* ---------------------------------------------------------------------------
   8) OVERLAY
   --------------------------------------------------------------------------- */

/* ===== ALERT ===== */
.alert {
  display: flex;
  gap: var(--s3);
  padding: 13px var(--s4);
  border-radius: var(--r3);
  border: 1px solid rgba(var(--tone-rgb, var(--info-rgb)), .28);
  background: rgba(var(--tone-rgb, var(--info-rgb)), .09);
  color: var(--fg-2);
  font-size: var(--t-12);
  position: relative;
}
.alert::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  border-start-start-radius: var(--r3);
  border-end-start-radius: var(--r3);
  background: rgb(var(--tone-rgb, var(--info-rgb)));
}
.alert-ico { flex: none; color: rgb(var(--tone-rgb, var(--info-rgb))); }
.alert-ico svg { width: 17px; height: 17px; }
.alert-bd { min-width: 0; flex: 1 1 auto; }
.alert-t { font-size: var(--t-13); font-weight: 560; color: var(--fg); margin-block-end: 2px; }
.alert[data-tone='ok']     { --tone-rgb: var(--ok-rgb); }
.alert[data-tone='warn']   { --tone-rgb: var(--warn-rgb); }
.alert[data-tone='danger'] { --tone-rgb: var(--danger-rgb); }
.alert[data-tone='info']   { --tone-rgb: var(--info-rgb); }
.alert[data-tone='accent'] { --tone-rgb: var(--accent-rgb); }
.alert-x { flex: none; align-self: flex-start; color: var(--fg-4); }
.alert-x:hover { color: var(--fg); }

/* ===== DROPDOWN ===== */
.dd { position: relative; }
.dd-menu {
  position: absolute;
  z-index: 70;
  min-width: 200px;
  padding: 5px;
  border-radius: var(--r3);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  box-shadow: var(--sh4), var(--hair-top);
  inset-inline-end: 0;
  inset-block-start: calc(100% + 7px);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  scale: .985;
  transform-origin: top right;
  transition: opacity var(--d1) var(--e-io), translate var(--d2) var(--e-out),
              scale var(--d2) var(--e-out), visibility var(--d1);
}
.dd-menu.start { inset-inline-end: auto; inset-inline-start: 0; transform-origin: top left; }
.dd.is-open > .dd-menu { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
.dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r1);
  color: var(--fg-2);
  font-size: var(--t-12);
  text-align: start;
  transition: background var(--d1), color var(--d1);
}
.dd-item:hover { background: var(--surface-3); color: var(--fg); }
.dd-item svg { width: 15px; height: 15px; flex: none; color: var(--fg-4); }
.dd-item:hover svg { color: var(--fg-2); }
.dd-item.danger { color: var(--danger); }
.dd-item.danger:hover { background: var(--danger-soft); }
.dd-item.danger svg { color: var(--danger); }
.dd-item .k { margin-inline-start: auto; font-size: var(--t-10); color: var(--fg-4); }
.dd-sep { height: 1px; margin: 5px 6px; background: var(--line); }
.dd-head { padding: 9px 10px 7px; }

/* ===== MODAL ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: var(--s6) var(--s4);
  overflow-y: auto;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d2) var(--e-io), visibility var(--d2);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-box {
  width: 100%;
  max-width: 520px;
  margin-block: auto;
  border-radius: var(--r5);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--sh4), var(--hair-top);
  translate: 0 14px;
  scale: .98;
  transition: translate var(--d3) var(--e-out), scale var(--d3) var(--e-out);
}
.modal.is-open .modal-box { translate: 0 0; scale: 1; }
.modal-box.wide { max-width: 760px; }
.modal-box.xwide { max-width: 1040px; }
.modal-hd {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-block-end: 1px solid var(--line);
}
.modal-t { font-size: var(--t-15); font-weight: 560; letter-spacing: var(--tr-tighter); }
.modal-bd { padding: var(--s5); }
.modal-ft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-block-start: 1px solid var(--line);
}
.modal-scroll { max-height: min(62dvh, 620px); overflow-y: auto; }

/* ===== SHEET (yandan cikan panel) ===== */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d2), visibility var(--d2);
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet-box {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border-inline-start: 1px solid var(--line-2);
  box-shadow: var(--sh4);
  translate: 100% 0;
  transition: translate var(--d3) var(--e-out);
}
.sheet.is-open .sheet-box { translate: 0 0; }
.sheet-hd { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-block-end: 1px solid var(--line); flex: none; }
.sheet-bd { padding: var(--s5); overflow-y: auto; flex: 1 1 auto; }
.sheet-ft { padding: var(--s4) var(--s5); border-block-start: 1px solid var(--line); flex: none; }

/* ===== TABS ===== */
.tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--line); overflow-x: auto; }
.tab {
  position: relative;
  padding: 10px 13px;
  color: var(--fg-3);
  font-size: var(--t-13);
  font-weight: 510;
  white-space: nowrap;
  transition: color var(--d1);
}
.tab:hover { color: var(--fg); }
/* kucuk varyant: panel basligi icinde kullanilir (saldiri detay modali) */
.tabs.sm { border-block-end: 0; gap: 0; }
.tabs.sm .tab {
  padding: 4px 9px;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--r-pill);
}
.tabs.sm .tab[aria-selected='true'] { background: var(--accent-soft); color: var(--accent-hi); }
.tabs.sm .tab[aria-selected='true']::after { display: none; }

.tab[aria-selected='true'] { color: var(--fg); font-weight: 560; }
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset-inline: 8px;
  inset-block-end: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.tab-panel[hidden] { display: none; }

/* ===== TOAST =====
   Sag UST kose: kullanici eylemi ustte gerceklestigi icin geri bildirim de
   goz hizasinda belirir. Topbar'in altina hizalanir. */
.toasts {
  position: fixed;
  z-index: 100;
  inset-block-start: calc(var(--topbar-h) + 10px);
  inset-inline-end: var(--s5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - var(--s6)));
  pointer-events: none;
}
.toast {
  --tone-rgb: var(--accent-rgb);
  position: relative;
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  padding-inline-start: 16px;
  border-radius: var(--r3);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  box-shadow: var(--sh4), var(--hair-top);
  pointer-events: auto;
  overflow: hidden;
  translate: 0 -12px;
  opacity: 0;
  animation: toast-in var(--d3) var(--e-out) forwards;
}
/* sol renkli durum seridi */
.toast::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: rgb(var(--tone-rgb));
}
.toast.out { animation: toast-out var(--d2) var(--e-io) forwards; }
@keyframes toast-in  { to { translate: 0 0; opacity: 1; } }
@keyframes toast-out { to { translate: 0 -8px; opacity: 0; } }
.toast-ico {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r2);
  background: rgba(var(--tone-rgb), .13);
  color: rgb(var(--tone-rgb));
  box-shadow: inset 0 0 0 1px rgba(var(--tone-rgb), .22);
}
.toast-ico svg { width: 15px; height: 15px; }
.toast[data-tone='ok']     { --tone-rgb: var(--ok-rgb); }
.toast[data-tone='danger'] { --tone-rgb: var(--danger-rgb); }
.toast[data-tone='warn']   { --tone-rgb: var(--warn-rgb); }
.toast[data-tone='info']   { --tone-rgb: var(--info-rgb); }
.toast-bd { min-width: 0; flex: 1 1 auto; font-size: var(--t-12); color: var(--fg-2); }
.toast-t { font-size: var(--t-13); font-weight: 570; color: var(--fg); }
.toast-x { margin-block-start: 2px; line-height: 1.45; overflow-wrap: anywhere; }

/* kapat dugmesi */
.toast-close {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin-block-start: -2px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--fg-4);
  cursor: pointer;
  transition: background var(--d1) var(--e-io), color var(--d1) var(--e-io);
}
.toast-close:hover { background: var(--surface-3); color: var(--fg); }
.toast-close svg { width: 14px; height: 14px; }

/* kalan sure cubugu — uzerine gelince durur */
.toast-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: rgba(var(--tone-rgb), .16);
}
.toast-bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: rgb(var(--tone-rgb));
  animation-name: toast-bar;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.toast.hold .toast-bar i { animation-play-state: paused; }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; opacity: 1; translate: 0 0; }
  .toast-bar i { animation: none; }
}

/* ===== TOOLTIP (data-tip) ===== */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  translate: -50% 4px;
  padding: 5px 8px;
  border-radius: var(--r1);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh3);
  color: var(--fg);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--tr-tight);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d1), translate var(--d2) var(--e-out), visibility var(--d1);
  z-index: 80;
  pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; translate: -50% 0; }
[data-tip='']::after, [data-tip-off]::after { display: none; }

/* ===== KOMUT PALETI (⌘K) ===== */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: start center;
  padding: clamp(var(--s6), 11vh, 140px) var(--s4) var(--s6);
  background: var(--scrim);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d2) var(--e-io), visibility var(--d2);
}
.cmdk.is-open { opacity: 1; visibility: visible; }
.cmdk-box {
  width: 100%;
  max-width: 620px;
  border-radius: var(--r5);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--sh4), var(--hair-top), var(--glow);
  overflow: hidden;
  translate: 0 -10px;
  scale: .98;
  transition: translate var(--d3) var(--e-out), scale var(--d3) var(--e-out);
}
.cmdk.is-open .cmdk-box { translate: 0 0; scale: 1; }
.cmdk-in {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px var(--s5);
  border-block-end: 1px solid var(--line);
}
.cmdk-in svg { width: 18px; height: 18px; color: var(--fg-4); flex: none; }
.cmdk-in input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-15);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.cmdk-in input:focus { outline: none; }
.cmdk-list { max-height: min(52dvh, 440px); overflow-y: auto; padding: 6px; }
.cmdk-group { padding: 9px 10px 5px; }
.cmdk-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r2);
  color: var(--fg-2);
  font-size: var(--t-13);
  text-align: start;
  transition: background var(--d1);
}
.cmdk-opt .oi {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: var(--r1);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg-3);
}
.cmdk-opt .oi svg { width: 14px; height: 14px; }
.cmdk-opt .ot { flex: 1 1 auto; min-width: 0; }
.cmdk-opt .ot b { display: block; font-weight: 520; color: var(--fg); }
.cmdk-opt .ot span { display: block; font-size: var(--t-11); color: var(--fg-4); }
.cmdk-opt mark { background: rgba(var(--accent-rgb), .28); color: var(--fg); border-radius: 3px; padding: 0 1px; }
.cmdk-opt.is-sel { background: var(--accent-soft); color: var(--fg); }
.cmdk-opt.is-sel .oi { border-color: rgba(var(--accent-rgb), .35); color: var(--accent-hi); background: rgba(var(--accent-rgb), .1); }
.cmdk-ft {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 10px var(--s5);
  border-block-start: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--t-10);
  color: var(--fg-4);
}
.cmdk-ft .kbd { height: 17px; }
.cmdk-empty { padding: var(--s7) var(--s5); text-align: center; color: var(--fg-4); font-size: var(--t-12); }

/* ---------------------------------------------------------------------------
   9) AUTH EKRANI
   --------------------------------------------------------------------------- */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 100dvh;
}
@media (max-width: 980px) { .auth { grid-template-columns: minmax(0, 1fr); } }

.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s8) var(--s8) var(--s7);
  background: var(--bg-deep);
  border-inline-end: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 980px) { .auth-side { display: none; } }
.auth-side::before { /* isik + izgara */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 420px at 22% 8%, rgba(var(--accent-rgb), .22), transparent 64%),
    radial-gradient(520px 380px at 88% 92%, rgba(var(--live-rgb), .12), transparent 62%);
  pointer-events: none;
}
.auth-side::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(680px 520px at 30% 34%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(680px 520px at 30% 34%, #000 20%, transparent 78%);
  opacity: .8;
  pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-main { display: grid; place-items: center; padding: var(--s7) var(--s5); }
.auth-card { width: 100%; max-width: 400px; }

.auth-feature { display: flex; gap: 13px; }
.auth-feature + .auth-feature { margin-block-start: var(--s5); }
.auth-feature .fi {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r2);
  border: 1px solid var(--line-2);
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent-hi);
}
.auth-feature .fi svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------------
   10) YARDIMCILAR
   --------------------------------------------------------------------------- */
.hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px)  { .hide-sm { display: none !important; } }
@media (max-width: 900px)  { .hide-md { display: none !important; } }
@media (max-width: 1200px) { .hide-lg { display: none !important; } }
@media (min-width: 641px)  { .only-sm { display: none !important; } }

.mt0 { margin-block-start: 0; } .mt1 { margin-block-start: var(--s1); }
.mt2 { margin-block-start: var(--s2); } .mt3 { margin-block-start: var(--s3); }
.mt4 { margin-block-start: var(--s4); } .mt5 { margin-block-start: var(--s5); }
.mt6 { margin-block-start: var(--s6); }
.mb2 { margin-block-end: var(--s2); } .mb3 { margin-block-end: var(--s3); }
.mb4 { margin-block-end: var(--s4); } .mb5 { margin-block-end: var(--s5); }
.ml-auto { margin-inline-start: auto; }
.w-full { width: 100%; } .h-full { height: 100%; }
.flex1 { flex: 1 1 auto; min-width: 0; }
/* esnek kutuda tasmayi kes: truncate/ellipsis calisabilsin */
.min-w-0 { min-width: 0; }
.center { display: grid; place-items: center; }
.rel { position: relative; }
.line-t { border-block-start: 1px solid var(--line); }
.line-b { border-block-end: 1px solid var(--line); }
.surface-in { background: var(--surface-in); }
.r2 { border-radius: var(--r2); } .r3 { border-radius: var(--r3); } .r4 { border-radius: var(--r4); }
.pad3 { padding: var(--s3); } .pad4 { padding: var(--s4); } .pad5 { padding: var(--s5); }

/* ilk boyama oncesi gecis kilidi — FOUC/tema atlamasi engellenir */
.no-anim, .no-anim * { transition: none !important; animation: none !important; }

/* tema-kosullu gorunurluk (tema dugmesi ikonu) */
[data-theme='dark']  .only-light { display: none; }
[data-theme='light'] .only-dark  { display: none; }
.only-dark, .only-light { display: contents; }
[data-theme='dark']  .only-dark  { display: contents; }
[data-theme='light'] .only-light { display: contents; }

/* ---------------------------------------------------------------------------
   11) INSAN DOGRULAMASI (CAPTCHA)
   --------------------------------------------------------------------------- */

/* --- form icindeki onay satiri --- */
.cap-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 13px 14px;
  text-align: start;
  font: inherit;
  color: var(--fg-2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 62%),
    var(--surface-in);
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--d1) var(--e-io), background var(--d1) var(--e-io),
              box-shadow var(--d1) var(--e-io), transform var(--d1) var(--e-out);
}
.cap-check::after {                     /* ustten gecen ince tarama isigi */
  content: '';
  position: absolute; inset-block-start: 0; inset-inline: 12% 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent);
  opacity: 0;
  transition: opacity var(--d2) var(--e-io);
}
.cap-check:hover { border-color: var(--line-3); background: var(--surface-2); }
.cap-check:hover::after { opacity: 1; }
.cap-check:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.cap-check:active { transform: scale(.994); }
.cap-check:disabled { cursor: default; transform: none; }

.cap-tick {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  color: transparent;
  background: var(--surface-3);
  border: 1.5px solid var(--line-3);
  border-radius: var(--r1);
  transition: all var(--d2) var(--e-spring);
}
.cap-tick svg { width: 13px; height: 13px; stroke-width: 3; }

.cap-txt { display: grid; gap: 2px; min-width: 0; }
.cap-txt-t {
  font-size: var(--t-13); font-weight: 540; color: var(--fg);
  letter-spacing: var(--tr-tight);
}
.cap-txt-d { font-size: var(--t-11); color: var(--fg-4); line-height: 1.45; }

.cap-mark {
  flex: none; margin-inline-start: auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  color: var(--fg-4);
  transition: color var(--d1) var(--e-io), transform var(--d2) var(--e-out);
}
.cap-mark svg { width: 19px; height: 19px; }
.cap-check:hover .cap-mark { color: var(--accent); transform: translateY(-1px); }

/* cozulmus durum */
.cap-check.is-ok {
  border-color: rgba(var(--ok-rgb), .42);
  background: linear-gradient(180deg, rgba(var(--ok-rgb), .10), rgba(var(--ok-rgb), .03));
}
.cap-check.is-ok::after { opacity: 0; }
.cap-check.is-ok .cap-tick {
  color: #fff;
  background: var(--ok);
  border-color: var(--ok);
  box-shadow: 0 0 0 4px rgba(var(--ok-rgb), .14);
}
.cap-check.is-ok .cap-mark { color: var(--ok); }
.cap-check.is-ok .cap-txt-t { color: var(--fg); }

/* --- modal --- */
.modal-box.cap-box { max-width: 452px; }

/* kod plakasi */
.cap-plate {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(var(--accent-rgb), .12), transparent 62%),
    var(--bg-deep);
  box-shadow: var(--hair-top), var(--sh1);
  overflow: hidden;
}
.cap-art-wrap {
  display: grid; place-items: center;
  min-height: 104px;
  padding: var(--s4) var(--s3);
  transition: opacity var(--d2) var(--e-io);
}
.cap-plate.is-busy .cap-art-wrap { opacity: .25; }
.cap-art { display: block; width: 100%; max-width: 268px; height: auto; }

.cap-plate-ft {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px 11px;
  border-block-start: 1px solid var(--line);
  background: rgba(0, 0, 0, .16);
}
.cap-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-10); color: var(--fg-4);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
}
.cap-hint svg { width: 13px; height: 13px; }
.cap-life {
  margin-inline-start: auto;
  width: 74px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.cap-life i {
  display: block; width: 100%; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1s linear;
}

/* yuklenme noktalari */
.cap-load { display: flex; gap: 6px; }
.cap-load span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-4);
  animation: cap-bounce 1s var(--e-io) infinite;
}
.cap-load span:nth-child(2) { animation-delay: .14s; }
.cap-load span:nth-child(3) { animation-delay: .28s; }
@keyframes cap-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: .45; }
  35%           { transform: translateY(-5px); opacity: 1; }
}

/* 3x3 secenek izgarasi */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-block-start: var(--s4);
}
.cap-grid.is-locked { opacity: .5; pointer-events: none; }

.cap-opt {
  position: relative;
  padding: 11px 4px;
  font-family: var(--f-mono);
  font-size: var(--t-14);
  font-weight: 500;
  letter-spacing: .09em;
  color: var(--fg-2);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  cursor: pointer;
  transition: color var(--d1) var(--e-io), background var(--d1) var(--e-io),
              border-color var(--d1) var(--e-io), transform var(--d1) var(--e-out),
              box-shadow var(--d1) var(--e-io);
}
.cap-opt:hover {
  color: var(--fg);
  background: var(--surface-3);
  border-color: var(--line-3);
  transform: translateY(-1px);
}
.cap-opt:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.cap-opt.is-on {
  color: var(--accent-fg);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16), var(--sh1);
  transform: translateY(-1px);
}
.cap-opt.is-bad {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(var(--danger-rgb), .5);
  box-shadow: none;
}

/* durum satiri */
.cap-msg {
  min-height: 17px;
  margin-block-start: var(--s3);
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--fg-4);
}
.cap-msg.is-bad { color: var(--danger); }
.cap-msg.is-ok  { color: var(--ok); }

/* yanlis cevap geri bildirimi */
.cap-shake { animation: cap-shake .42s var(--e-io); }
@keyframes cap-shake {
  0%, 100%      { transform: translateX(0); }
  15%, 55%      { transform: translateX(-6px); }
  32%, 74%      { transform: translateX(6px); }
  88%           { transform: translateX(-2px); }
}

@media (max-width: 420px) {
  .cap-opt { font-size: var(--t-13); padding: 10px 2px; }
  .cap-txt-d { display: none; }
}

/* ---------------------------------------------------------------------------
   12) ENTEGRASYON BAGLANTI TESTI SONUCU
   --------------------------------------------------------------------------- */
.int-result {
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface-in);
  padding: 12px 13px;
  animation: int-in var(--d3) var(--e-out);
}
@keyframes int-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.int-result .int-ico {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r2);
  background: var(--neutral-soft);
  color: var(--fg-3);
}
.int-result .int-ico svg { width: 15px; height: 15px; }
.int-result.is-ok {
  border-color: rgba(var(--ok-rgb), .38);
  background: linear-gradient(180deg, rgba(var(--ok-rgb), .09), transparent 70%), var(--surface-in);
}
.int-result.is-ok .int-ico  { background: var(--ok-soft); color: var(--ok); }
.int-result.is-bad {
  border-color: rgba(var(--danger-rgb), .4);
  background: linear-gradient(180deg, rgba(var(--danger-rgb), .09), transparent 70%), var(--surface-in);
}
.int-result.is-bad .int-ico { background: var(--danger-soft); color: var(--danger); }
.int-result.is-warn {
  border-color: rgba(var(--warn-rgb), .4);
  background: linear-gradient(180deg, rgba(var(--warn-rgb), .09), transparent 70%), var(--surface-in);
}
.int-result.is-warn .int-ico { background: var(--warn-soft); color: var(--warn); }
.int-result .kv-row { padding-block: 5px; }

/* IKON BOYUTU ICIN GUVENLIK AGI
   ic() ile basilan SVG'nin boyutu KAPSAYICI kuraldan gelir (.btn svg,
   .badge svg, .avatar svg ...). Boyle bir kuralin olmadigi duz bir <span>
   icinde SVG kabi doldurup dev gibi ciziliyordu (alt bilgideki saat ikonu,
   entegrasyon tablosu). :where() SIFIR ozgulluk tasir; bu yuzden asagidaki
   varsayilan, mevcut tum kapsayici kurallar tarafindan ezilir ama boyutsuz
   kalan hicbir ikon kalmaz. */
:where(svg.i) { width: 16px; height: 16px; flex: none; }

/* metin akisi icinde daha kucuk ikonlar */
.i-sm { width: 13px; height: 13px; vertical-align: -2px; flex: none; }
.i-xs { width: 11px; height: 11px; vertical-align: -1px; flex: none; }

/* test suresince butonda donen gosterge */
.btn.is-busy { pointer-events: none; }
.btn.is-busy > svg:first-child { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* kapali entegrasyon karti sessizlesir ama okunur kalir */
.panel.quiet .panel-bd { opacity: .82; }

/* ---------------------------------------------------------------------------
   13) HIZLI SECIM CIPI (erisim suresi vb.)
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-in);
  color: var(--fg-3);
  font: inherit;
  font-size: var(--t-11);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--d1) var(--e-io), background var(--d1) var(--e-io),
              border-color var(--d1) var(--e-io), transform var(--d1) var(--e-out);
}
.chip:hover { color: var(--fg); background: var(--surface-2); border-color: var(--line-3); transform: translateY(-1px); }
.chip:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.chip.is-on {
  color: var(--accent-fg);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent);
}
.chip svg { width: 12px; height: 12px; }

/* tehlikeli islem bolgesi (hesap silme vb.) */
.danger-zone {
  border: 1px solid rgba(var(--danger-rgb), .34);
  border-radius: var(--r3);
  background: linear-gradient(180deg, rgba(var(--danger-rgb), .07), transparent 68%), var(--surface-in);
  padding: var(--s4);
}
.danger-zone .dz-t {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-13); font-weight: 600; color: var(--danger);
}
.danger-zone .dz-t svg { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------------------
   14) ULKE BAYRAGI (self-host SVG · flag-icons, MIT)
   --------------------------------------------------------------------------- */
.flag {
  width: 18px; height: 13.5px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .25);
  background: var(--surface-3);
}

/* ---------------------------------------------------------------------------
   15) SALDIRI DETAY MODALI
   --------------------------------------------------------------------------- */
.modal-box.am { max-width: 1120px; }

.am-hd {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-block-end: 1px solid var(--line);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(var(--danger-rgb), .10), transparent 58%),
    var(--surface);
}
.am-ico {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r3);
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: var(--hair-top);
}
.am-ico svg { width: 21px; height: 21px; }
.am-ico[data-tone='neutral'] { background: var(--neutral-soft); color: var(--fg-3); }

/* ozet seridi */
.am-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.am-tile {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface-in);
  box-shadow: var(--hair-top);
  min-width: 0;
}
.am-tile-l {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
}
.am-tile-v { font-size: var(--t-16); font-weight: 600; letter-spacing: var(--tr-tight); color: var(--fg); }

/* iki kolon */
.am-cols {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 12px;
  margin-block-start: var(--s4);
}
@media (max-width: 900px) {
  .am-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-cols  { grid-template-columns: minmax(0, 1fr); }
}

.am-panel {
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface);
  overflow: hidden;
}
.am-panel-hd {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px;
  border-block-end: 1px solid var(--line);
  background: var(--surface-in);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.am-panel-bd { padding: var(--s4); }
.am-panel-bd.flush { padding: 0; }

/* zaman cizgisi */
.am-time { display: grid; gap: 10px; }
.am-time-row { display: flex; align-items: flex-start; gap: 10px; }
.am-dot {
  flex: none;
  width: 9px; height: 9px;
  margin-block-start: 5px;
  border-radius: 50%;
  background: rgb(var(--neutral-rgb));
  box-shadow: 0 0 0 3px rgba(var(--neutral-rgb), .18);
}
.am-dot[data-tone='danger'] { background: var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .18); }
.am-dot[data-tone='ok']     { background: var(--ok);     box-shadow: 0 0 0 3px rgba(var(--ok-rgb), .18); }

/* kaynak dagilimi satirlari */
.am-top { display: grid; }
.am-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 110px 96px;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-block-start: 1px solid var(--line);
}
.am-top > .am-row:first-child { border-block-start: 0; }
.am-row:hover { background: var(--surface-in); }
.am-rank {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r1);
  background: var(--surface-3);
  color: var(--fg-4);
  font-size: var(--t-10);
  font-weight: 700;
}
.am-row-main { display: grid; gap: 2px; }
.am-row-t { font-size: var(--t-12); font-weight: 550; color: var(--fg); }
.am-row-s {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-10); color: var(--fg-4);
}
.am-row-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.am-row-bar i {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--danger-rgb), .55), var(--danger));
  transition: width var(--d3) var(--e-out);
}
.am-row-v { text-align: end; font-size: var(--t-12); font-weight: 600; color: var(--fg-2); }
@media (max-width: 760px) {
  .am-row { grid-template-columns: 22px minmax(0, 1fr) 84px; }
  .am-row-bar { display: none; }
}

/* bos / yuklenme durumlari */
.am-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--s6) var(--s4);
  color: var(--fg-4);
  font-size: var(--t-12);
}
.am-empty svg { width: 15px; height: 15px; }
.am-load { display: grid; gap: 9px; }

/* ---------------------------------------------------------------------------
   16) SISTEM DURUMU (status.php)
   Genel durum seridi + alt sistem sagligi kartlari.
   Renk, data-tone / data-state uzerinden tek noktadan yonetilir; JSON ucu
   yalnizca bu ozniteligi degistirir, sinif listesine dokunmaz.
   --------------------------------------------------------------------------- */
.sys-banner {
  --sys: var(--neutral-rgb);
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid rgba(var(--sys), .30);
  border-radius: var(--r4);
  background:
    radial-gradient(120% 220% at 0% 0%, rgba(var(--sys), .13), transparent 60%),
    var(--surface);
  box-shadow: var(--sh2), var(--hair-top);
  color: rgb(var(--sys));
}
.sys-banner[data-tone='ok']     { --sys: var(--ok-rgb); }
.sys-banner[data-tone='warn']   { --sys: var(--warn-rgb); }
.sys-banner[data-tone='danger'] { --sys: var(--danger-rgb); }

.sys-banner-ico {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r3);
  background: rgba(var(--sys), .14);
  box-shadow: inset 0 0 0 1px rgba(var(--sys), .26);
}
.sys-banner-ico svg { width: 24px; height: 24px; }
.sys-banner .h3 { color: var(--fg); margin: 0; }
.sys-banner .tiny.t-4 { color: var(--fg-4); }

.sys-banner-n {
  flex: none;
  display: flex; align-items: baseline; gap: 6px;
  padding-inline-start: var(--s4);
  border-inline-start: 1px solid var(--line);
}
.sys-banner-n b {
  font-size: var(--t-24);
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  font-variant-numeric: tabular-nums;
  color: rgb(var(--sys));
}
.sys-banner-n span { font-size: var(--t-12); color: var(--fg-4); white-space: nowrap; }
@media (max-width: 700px) {
  .sys-banner { flex-wrap: wrap; }
  .sys-banner-n { padding-inline-start: 0; border-inline-start: 0; }
}

/* ===== ALT SISTEM KARTLARI ===== */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s3);
}
.sys-card {
  --sys: var(--neutral-rgb);
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface);
  box-shadow: var(--hair-top);
  min-width: 0;
  transition: border-color var(--d2) var(--e-out), background var(--d2) var(--e-out);
}
/* sol kenar durum cizgisi */
.sys-card::before {
  content: '';
  position: absolute; inset-block: 10px; inset-inline-start: 0;
  width: 3px;
  border-start-end-radius: 3px; border-end-end-radius: 3px;
  background: rgb(var(--sys));
  opacity: .85;
}
.sys-card[data-state='ok']   { --sys: var(--ok-rgb); }
.sys-card[data-state='warn'] {
  --sys: var(--warn-rgb);
  border-color: rgba(var(--warn-rgb), .32);
  background: linear-gradient(180deg, rgba(var(--warn-rgb), .05), transparent 70%), var(--surface);
}
.sys-card[data-state='down'] {
  --sys: var(--danger-rgb);
  border-color: rgba(var(--danger-rgb), .38);
  background: linear-gradient(180deg, rgba(var(--danger-rgb), .07), transparent 70%), var(--surface);
}

.sys-card-ico {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r2);
  background: rgba(var(--sys), .12);
  color: rgb(var(--sys));
  box-shadow: inset 0 0 0 1px rgba(var(--sys), .20);
}
.sys-card-ico svg { width: 17px; height: 17px; }

.sys-card-t {
  font-size: var(--t-13);
  font-weight: 550;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-card-n {
  margin-block-start: 2px;
  font-size: var(--t-11);
  color: var(--fg-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sys-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding-inline: 8px;
  border-radius: var(--r-pill);
  background: rgba(var(--sys), .13);
  color: rgb(var(--sys));
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(var(--sys), .22);
  white-space: nowrap;
}
.sys-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* bozuk durumda nokta nabiz atsin: goz once kirmiziyi bulsun */
.sys-card[data-state='down'] .sys-pill .dot { animation: sysBeat 1.1s var(--e-out) infinite; }
@keyframes sysBeat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .sys-card[data-state='down'] .sys-pill .dot { animation: none; }
}
@media (max-width: 560px) {
  .sys-card { flex-wrap: wrap; }
  .sys-card-n { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   17) SUNUCU TARAFLI SIRALAMA BASLIGI + DENETIM DETAY CIPLERI
   --------------------------------------------------------------------------- */
/* Baslik bir baglantidir: siralama sunucuda yapilir, bu yuzden yalnizca
   ekrandaki satirlar degil TUM kayit kumesi siralanir. */
.th-sort {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.th-sort:hover { color: var(--fg); }
.th-sort-i {
  display: inline-grid; place-items: center;
  width: 13px; height: 13px;
  opacity: .38;
  transition: opacity var(--d2) var(--e-out);
}
.th-sort-i svg { width: 13px; height: 13px; }
.th-sort:hover .th-sort-i { opacity: .8; }
.th-sort.is-on { color: var(--accent-hi); }
.th-sort.is-on .th-sort-i { opacity: 1; }

/* ===== DETAY CIPLERI ===== */
.dchips { display: flex; flex-wrap: wrap; gap: 4px; }
.dchip {
  display: inline-flex; align-items: baseline; gap: 5px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface-in);
  font-size: var(--t-10);
  color: var(--fg-2);
  min-width: 0;
}
.dchip b {
  font-weight: 600;
  color: var(--fg-4);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  font-size: 9.5px;
  flex: none;
}
.dchip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   18) DUZELTMELER + YERLESIM YARDIMCILARI
   --------------------------------------------------------------------------- */
/* KRITIK: hidden ozniteligi calismiyordu.
   .empty / .alert / .dchips gibi siniflar display:flex tanimliyor ve bu kural
   tarayicinin varsayilan [hidden]{display:none} kuralini OZGULLUKTE eziyordu.
   Sonuc: "Eslesen kayit yok" kutusu, tabloda kayit varken de goruntuleniyor ve
   sayfanin ortasinda hayalet bir blok olarak duruyordu. Ayni sorun modaldeki
   gizli uyari/aciklama bloklarini da etkiliyordu. */
[hidden] { display: none !important; }

/* Izgara ogeleri icerigi kadar yukselsin.
   Varsayilan stretch davranisi, kisa panelin altinda 250-450px beyaz alan
   birakiyordu (ornegin hesap sayfasindaki Parola / 2FA panelleri). */
.grid.top { align-items: start; }

/* Tablo araç şeridindeki başlık ikonu — panel-hd ile görsel tutarlılık için */
.dt-tools .panel-t { display: inline-flex; align-items: center; gap: 9px; }

/* Kompakt bos durum: yan kolonlardaki kucuk panellerde tam boy bos durum
   paneli gereksiz yukseltiyordu (300px'lik bos kutu). */
.empty.sm { padding: var(--s5) var(--s4); }
.empty.sm .empty-ico { width: 40px; height: 40px; border-radius: var(--r3); }
.empty.sm .empty-ico svg { width: 19px; height: 19px; }
.empty.sm .empty-t { font-size: var(--t-13); }

/* Dolgu cubugu satir icinde de gorunsun (tablo/liste hucrelerinde) */
.meter.inline { display: block; width: 100%; }
/* Deger sifirdan buyukse cubuk gorunur kalsin: 1 / 254 gibi oranlarda
   yuvarlama sonucu %0 cikiyor ve cubuk tamamen kayboluyordu. */
.meter > span[data-meter]:not([data-meter='0']) { min-width: 3px; }

/* ---------------------------------------------------------------------------
   19) SSL SERTIFIKA DURUMU
   --------------------------------------------------------------------------- */
.ssl-hero {
  --ssl: var(--neutral-rgb);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(var(--ssl), .30);
  border-radius: var(--r3);
  background:
    radial-gradient(130% 200% at 0% 0%, rgba(var(--ssl), .12), transparent 62%),
    var(--surface-in);
  box-shadow: var(--hair-top);
  min-width: 0;
}
.ssl-hero[data-tone='ok']      { --ssl: var(--ok-rgb); }
.ssl-hero[data-tone='warn']    { --ssl: var(--warn-rgb); }
.ssl-hero[data-tone='danger']  { --ssl: var(--danger-rgb); }
.ssl-hero[data-tone='info']    { --ssl: var(--info-rgb); }
.ssl-hero[data-tone='neutral'] { --ssl: var(--neutral-rgb); }

.ssl-hero-ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r3);
  background: rgba(var(--ssl), .14);
  color: rgb(var(--ssl));
  box-shadow: inset 0 0 0 1px rgba(var(--ssl), .24);
}
.ssl-hero-ico svg { width: 22px; height: 22px; }
.ssl-hero-t {
  font-size: var(--t-15);
  font-weight: 570;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.ssl-hero-n {
  margin-block-start: 2px;
  font-size: var(--t-11);
  color: var(--fg-4);
}

/* tablo hucresindeki SSL durumu */
.ssl-cell {
  display: inline-flex; flex-direction: column; gap: 3px;
  text-decoration: none;
  min-width: 0;
}
.ssl-cell:hover .badge { filter: brightness(1.08); }

/* ---------------------------------------------------------------------------
   20) TRAFIK AKIS SEMASI (ziyaretci -> panel -> origin)
   --------------------------------------------------------------------------- */
.flow {
  display: flex; align-items: stretch; gap: 10px;
  flex-wrap: wrap;
}
.flow-node {
  flex: 1 1 190px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface-in);
  box-shadow: var(--hair-top);
}
.flow-node[data-active='1'] {
  border-color: rgba(var(--accent-rgb), .38);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .07), transparent 70%), var(--surface-in);
}
.flow-ico {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r2);
  background: var(--surface-3);
  color: var(--fg-3);
  margin-block-end: 3px;
}
.flow-ico svg { width: 16px; height: 16px; }
.flow-ico[data-tone='accent'] { background: var(--accent-soft); color: var(--accent-hi); }
.flow-ico[data-tone='ok']     { background: var(--ok-soft);     color: var(--ok); }
.flow-ico[data-tone='warn']   { background: var(--warn-soft);   color: var(--warn); }
.flow-t { font-size: var(--t-12); font-weight: 570; color: var(--fg); }
.flow-s {
  font-size: var(--t-11); color: var(--fg-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-arrow {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: var(--fg-4);
  padding-inline: 2px;
}
.flow-arrow svg { width: 17px; height: 17px; }
.flow-arrow b {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
}
@media (max-width: 780px) {
  .flow { flex-direction: column; }
  .flow-arrow { flex-direction: row; gap: 6px; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------------------
   21) KURULUM ADIMLARI (stepper) + ISLEM GECMISI
   --------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block-end: 1px solid var(--line);
  background: var(--surface-in);
}
.step {
  --st: var(--neutral-rgb);
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  min-width: 0;
}
/* adimlar arasi ayirici */
.step + .step { border-inline-start: 1px solid var(--line); }
/* alt durum cizgisi: tamamlanan adimlar dolu gorunur */
.step::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 2px;
  background: rgb(var(--st));
  opacity: 0;
  transition: opacity var(--d2) var(--e-out);
}
.step[data-state='ok']  { --st: var(--ok-rgb); }
.step[data-state='now'] { --st: var(--info-rgb); }
.step[data-state='ok']::after,
.step[data-state='now']::after { opacity: .9; }

.step-n {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(var(--st), .13);
  color: rgb(var(--st));
  font-size: var(--t-11);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(var(--st), .28);
}
.step-n svg { width: 14px; height: 14px; }
.step[data-state='ok'] .step-n {
  background: rgb(var(--ok-rgb));
  color: #fff;
  box-shadow: none;
}
.step[data-state='now'] .step-n svg { animation: spin 1.6s linear infinite; }
.step[data-state='off'] { opacity: .55; }

.step-t {
  font-size: var(--t-12);
  font-weight: 570;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-s {
  margin-block-start: 1px;
  font-size: var(--t-10);
  color: var(--fg-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { border-inline-start: 0; }
  .step:nth-child(n+3) { border-block-start: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step + .step { border-inline-start: 0; border-block-start: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .step[data-state='now'] .step-n svg { animation: none; }
}

/* ===== ISLEM GECMISI (hizali satirlar) ===== */
.jlog { display: grid; gap: 1px; }
.jlog-row {
  --jt: var(--neutral-rgb);
  display: grid;
  grid-template-columns: 24px minmax(120px, auto) minmax(0, 1fr) 132px;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-block-start: 1px solid var(--line);
}
.jlog-row:first-child { border-block-start: 0; }
.jlog-row[data-tone='ok']      { --jt: var(--ok-rgb); }
.jlog-row[data-tone='danger']  { --jt: var(--danger-rgb); }
.jlog-row[data-tone='info']    { --jt: var(--info-rgb); }
.jlog-ico {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--r1);
  background: rgba(var(--jt), .13);
  color: rgb(var(--jt));
}
.jlog-ico svg { width: 13px; height: 13px; }
.jlog-t {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-12);
  font-weight: 550;
  color: var(--fg);
  white-space: nowrap;
}
.jlog-s {
  font-size: var(--t-11);
  color: var(--fg-4);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jlog-d { font-size: var(--t-11); color: var(--fg-4); text-align: end; white-space: nowrap; }
@media (max-width: 700px) {
  .jlog-row { grid-template-columns: 24px minmax(0, 1fr); }
  .jlog-s, .jlog-d { grid-column: 2; text-align: start; }
}

/* Donme animasyonu: .btn.is-busy ve adim gostergesi bunu kullaniyordu ama
   @keyframes hic tanimlanmamisti, dolayisiyla hicbir yerde donmuyordu. */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Ipucu metninde ikon + yazi ayni satirda kalsin. svg.i blok oldugu icin
   duz bir <p class="hint"> icinde ikon alt satira dusuyordu. */
.hint.hint-ic { display: flex; align-items: flex-start; gap: 7px; }
.hint.hint-ic > svg { flex: none; margin-block-start: 1px; }

/* ---------------------------------------------------------------------------
   22) DNS KAYDI: VEKIL / DOGRUDAN ISARETI
   Bir alt alan adi icin spesifik A kaydi joker kaydi ezer. Icerigi edge IP
   degilse istek paneli ATLAR ve o adreste SSL'i biz saglamayiz. Bu isaret
   durumu satir bazinda gorunur kilar.
   --------------------------------------------------------------------------- */
.rflag {
  --rf: var(--neutral-rgb);
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: 7px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--r-pill);
  background: rgba(var(--rf), .12);
  color: rgb(var(--rf));
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(var(--rf), .22);
  white-space: nowrap;
  vertical-align: middle;
}
.rflag[data-tone='ok']   { --rf: var(--ok-rgb); }
.rflag[data-tone='warn'] { --rf: var(--warn-rgb); }
.rflag svg { width: 11px; height: 11px; }

/* satir icindeki hizli duzeltme dugmesi */
.rflag-fix {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  margin-inline-start: 4px;
  border: 1px solid rgba(var(--warn-rgb), .32);
  border-radius: var(--r1);
  background: var(--warn-soft);
  color: var(--warn);
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--d1) var(--e-io), border-color var(--d1) var(--e-io);
}
.rflag-fix:hover { background: rgba(var(--warn-rgb), .2); border-color: rgba(var(--warn-rgb), .5); }
.rflag-fix svg { width: 12px; height: 12px; }

/* adim gostergesinde uyari durumu */
.step[data-state='warn'] { --st: var(--warn-rgb); }
.step[data-state='warn']::after { opacity: .9; }

/* Bes adimli gosterge (nameserver adimi eklendiginde) */
.steps.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .steps.steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .steps.steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .steps.steps-5 { grid-template-columns: minmax(0, 1fr); } }
/* cok kolonlu yerlesimde satir gecislerinde sol kenar cizgisi tekrar etmesin */
.steps.steps-5 .step { border-inline-start: 1px solid var(--line); }
.steps.steps-5 .step:first-child { border-inline-start: 0; }

/* ---------------------------------------------------------------------------
   23) ALAN ADI KARTLARI (domains.php)
   Liste yerine kart izgarasi: her alan adinin nameserver, SSL, vekil ve DNS
   kayit durumu TEK BAKISTA gorunur. Tablo bu bilgileri yatayda sikistiriyordu.
   --------------------------------------------------------------------------- */
.zone-bar {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
}

/* Durum sekmeleri (.zone-tabs / .zone-tab) KALDIRILDI: ayni suzgec islevi
   acilis blogundaki dagilim lejantina tasindi (.ov-legend), iki yerde ayni
   kontrolu tutmak gurultuden baska bir sey degildi. */
.zone-res {
  font-size: var(--t-12);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.zone-res b { color: var(--fg); font-weight: 600; }

/* Kart izgarasi stilleri (.zone-grid / .zone-* ) KALDIRILDI: domains.php
   satir duzenine gecti (.dt-zones). Kart duzeninde alan adi basina ~160px
   yer gidiyordu; 36 alan adinda liste 1920px yerine 1298px tutuyor. */

/* ===========================================================================
   KURULUM AKISI — numarali adimlar, secim kartlari, canli geri bildirim
   Kullanildigi yer: domains.php "Alan adi ekle" modali.
   Tasarim niyeti: uzun bir form yerine, sirasi belli ve sonucu onceden
   okunabilen bir akis. Adimlar arasindaki dikey cizgi ilerlemeyi gorunur
   kilar; son adim gizlenebildigi icin cizgi :has() ile kosullu cizilir.
   =========================================================================== */
.setup { display: flex; flex-direction: column; }
/* Kurulum akisi standart modal govdesinden uzun. Ekran yetiyorsa TAMAMI
   gorunsun; yetmiyorsa kaydirma cubugu yer ayirir ve icerik zıplamaz. */
.modal-bd.setup { max-height: min(78dvh, 860px); scrollbar-gutter: stable; }
.setup-step {
  position: relative;
  min-width: 0;
  padding-inline-start: 38px;
  padding-block-end: var(--s5);
}
.setup-step:last-child { padding-block-end: 0; }
.setup-n {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 1;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: var(--hair-top);
  font-size: var(--t-11);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
/* birlestirici cizgi — yalnizca ARDINDAN gorunur bir adim varsa */
.setup-step::before { content: none; }
.setup-step:has(~ .setup-step:not([hidden]))::before {
  content: '';
  position: absolute;
  inset-inline-start: 13px;
  inset-block: 30px 2px;
  width: 1px;
  /* --line (%7 opaklik) 1px'de gorunmuyordu; bir kademe belirgin ton */
  background: var(--line-2);
}
.setup-hd {
  min-height: 26px;
  display: flex; flex-direction: column; justify-content: center;
  margin-block-end: var(--s3);
}
.setup-t {
  font-size: var(--t-13);
  font-weight: 560;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.setup-d {
  margin-block-start: 3px;
  font-size: var(--t-11);
  color: var(--fg-3);
  line-height: 1.55;
}
.setup-d .code, .setup-t .code { font-size: var(--t-10); }

/* --- ozet blogu ---------------------------------------------------------- */
.setup-sum { margin-block-start: var(--s2); }
.setup-sum-hd {
  display: flex; align-items: center; gap: 7px;
  margin-block-end: var(--s2);
  font-size: var(--t-10);
  font-weight: 560;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-4);
}
.setup-sum-hd svg { width: 13px; height: 13px; }

/* --- secim kartlari (radyo) ---------------------------------------------- */
.picks {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.pick { position: relative; display: block; min-width: 0; cursor: pointer; }
.pick > input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-bd {
  --pk: var(--neutral-rgb);
  display: flex; flex-direction: column; gap: 8px;
  height: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface-2);
  box-shadow: var(--hair-top);
  transition: border-color var(--d1) var(--e-io), background var(--d1) var(--e-io),
              box-shadow var(--d1) var(--e-io);
}
.pick[data-tone='accent'] .pick-bd  { --pk: var(--accent-rgb); }
.pick[data-tone='ok'] .pick-bd      { --pk: var(--ok-rgb); }
.pick[data-tone='neutral'] .pick-bd { --pk: var(--neutral-rgb); }
.pick:hover .pick-bd { border-color: var(--line-3); background: var(--surface-3); }
.pick > input:checked + .pick-bd {
  border-color: rgba(var(--pk), .5);
  background:
    linear-gradient(180deg, rgba(var(--pk), .11), rgba(var(--pk), .035));
  box-shadow: var(--hair-top), inset 0 0 0 1px rgba(var(--pk), .22),
              0 8px 22px -14px rgba(var(--pk), .9);
}
.pick > input:focus-visible + .pick-bd { box-shadow: var(--ring); }
.pick-hd { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pick-ico {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r2);
  background: rgba(var(--pk), .15);
  color: rgb(var(--pk));
}
.pick-ico svg { width: 15px; height: 15px; }
.pick-t {
  min-width: 0;
  font-size: var(--t-13);
  font-weight: 560;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.pick-mark {
  flex: none;
  margin-inline-start: auto;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border: 1px solid var(--line-3);
  border-radius: 50%;
  color: transparent;
  transition: background var(--d1) var(--e-io), border-color var(--d1) var(--e-io),
              color var(--d1) var(--e-io);
}
.pick-mark svg { width: 11px; height: 11px; stroke-width: 2.4; }
.pick > input:checked + .pick-bd .pick-mark {
  background: rgb(var(--pk));
  border-color: rgb(var(--pk));
  color: var(--bg);
}
.pick-d {
  font-size: var(--t-11);
  color: var(--fg-3);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.pick > input:checked + .pick-bd .pick-d { color: var(--fg-2); }
.pick-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-block-start: auto;
  padding-block-start: 2px;
}
.pick-tags > i {
  font-style: normal;
  font-size: var(--t-10);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid rgba(var(--pk), .26);
  border-radius: var(--r-pill);
  background: rgba(var(--pk), .1);
  color: rgb(var(--pk));
  white-space: nowrap;
}

/* --- "ne olacak" listesi ------------------------------------------------- */
.plan {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--line);
  overflow: hidden;
}
.plan-i {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 13px;
  background: var(--surface-in);
  transition: opacity var(--d2) var(--e-io);
}
.plan-i > svg {
  flex: none;
  width: 15px; height: 15px;
  margin-block-start: 1px;
  color: var(--ok);
}
.plan-i[data-on='0'] { opacity: .42; }
.plan-i[data-on='0'] > svg { color: var(--fg-4); }
.plan-tx {
  min-width: 0;
  font-size: var(--t-11);
  color: var(--fg-2);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.plan-tx b { font-weight: 560; color: var(--fg); }

/* --- alan alti canli geri bildirim --------------------------------------- */
.fx {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: var(--t-11);
  line-height: 1.5;
  color: var(--fg-4);
}
.fx > svg { flex: none; width: 13px; height: 13px; margin-block-start: 2px; }
.fx > span { min-width: 0; overflow-wrap: anywhere; }
.fx[data-s='ok']  { color: var(--ok); }
.fx[data-s='err'] { color: var(--danger); }
.fx .mono { font-family: var(--f-mono); font-size: var(--t-10); }
/* Gecersiz alan cercevesi — .input:focus'un ring'ini ezmesi icin daha ozgul */
.input[aria-invalid='true'], .select[aria-invalid='true'] {
  border-color: rgba(var(--danger-rgb), .55);
}
.input[aria-invalid='true']:focus, .select[aria-invalid='true']:focus {
  box-shadow: 0 0 0 1px rgba(var(--danger-rgb), .55), 0 0 0 4px rgba(var(--danger-rgb), .16);
}
/* modal alt bilgisi: gecerli olunca yesile doner */
#dm-foot[data-s='ok'] { color: var(--ok); }

@media (max-width: 620px) {
  .setup-step { padding-inline-start: 0; }
  .setup-step:has(~ .setup-step:not([hidden]))::before { content: none; }
  .setup-n { position: static; margin-block-end: var(--s2); }
  .picks { grid-template-columns: minmax(0, 1fr); }
  .modal-ft { flex-wrap: wrap; }
  #dm-foot { flex: 1 0 100%; order: -1; margin-block-end: 4px; }
}

/* ===========================================================================
   ACILIS BLOGU (.ov) — domains.php
   Dort KPI kartinin yerini alir. Amac: ekranin ust seridi bir SORUYU
   cevaplasin ("ilgilenmem gereken bir sey var mi?"), sadece sayi sergilemesin.
     sol  -> durum yargisi + dagilim cubugu + lejant (lejant = suzgec)
     sag  -> uc kompakt metrik
   =========================================================================== */
.ov {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr);
  gap: var(--s4);
  align-items: stretch;
}
.ov-main {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--s4) var(--s5) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  background: var(--surface);
  box-shadow: var(--sh2), var(--hair-top);
}

/* --- durum satiri --- */
.ov-hd { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ov-ring {
  --ot: var(--neutral-rgb);
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--ot), .32);
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(var(--ot), .22), rgba(var(--ot), .06) 70%);
  color: rgb(var(--ot));
  box-shadow: 0 0 22px -10px rgba(var(--ot), .9), var(--hair-top);
}
.ov-ring[data-tone='ok']      { --ot: var(--ok-rgb); }
.ov-ring[data-tone='warn']    { --ot: var(--warn-rgb); }
.ov-ring[data-tone='danger']  { --ot: var(--danger-rgb); }
.ov-ring[data-tone='info']    { --ot: var(--info-rgb); }
.ov-ring[data-tone='neutral'] { --ot: var(--neutral-rgb); }
.ov-ring svg { width: 20px; height: 20px; }
.ov-t {
  font-size: var(--t-16);
  font-weight: 570;
  letter-spacing: var(--tr-tighter);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.ov-s {
  margin-block-start: 3px;
  font-size: var(--t-12);
  color: var(--fg-3);
  line-height: 1.5;
}
.ov-count {
  flex: none;
  display: flex; align-items: baseline; gap: 6px;
  padding-inline-start: var(--s4);
}
.ov-count b {
  font-size: var(--t-28);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1;
}
.ov-count span { font-size: var(--t-11); color: var(--fg-4); }

/* --- dagilim cubugu --- */
.ov-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-block-start: var(--s4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ov-bar > span {
  --ot: var(--neutral-rgb);
  width: var(--w, 0%);
  min-width: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(var(--ot), .72), rgb(var(--ot)));
  box-shadow: 0 0 12px -3px rgba(var(--ot), .85);
}
.ov-bar > span[data-tone='ok']      { --ot: var(--ok-rgb); }
.ov-bar > span[data-tone='info']    { --ot: var(--info-rgb); }
.ov-bar > span[data-tone='warn']    { --ot: var(--warn-rgb); }
.ov-bar > span[data-tone='danger']  { --ot: var(--danger-rgb); }
.ov-bar > span[data-tone='neutral'] { --ot: var(--neutral-rgb); }

/* --- lejant = suzgec --- */
.ov-legend {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-block-start: var(--s3);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--line);
}
.ov-lg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: transparent;
  color: var(--fg-3);
  font-size: var(--t-12);
  font-weight: 520;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d1) var(--e-io), color var(--d1) var(--e-io),
              border-color var(--d1) var(--e-io);
}
.ov-lg > i {
  --ot: var(--neutral-rgb);
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgb(var(--ot));
  box-shadow: 0 0 8px -1px rgba(var(--ot), .9);
}
.ov-lg > i[data-tone='ok']      { --ot: var(--ok-rgb); }
.ov-lg > i[data-tone='info']    { --ot: var(--info-rgb); }
.ov-lg > i[data-tone='warn']    { --ot: var(--warn-rgb); }
.ov-lg > i[data-tone='danger']  { --ot: var(--danger-rgb); }
.ov-lg > i[data-tone='accent']  { --ot: var(--accent-rgb); }
.ov-lg > i[data-tone='neutral'] { --ot: var(--neutral-rgb); }
.ov-lg > b {
  min-width: 17px;
  padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--fg-3);
  font-size: var(--t-10);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ov-lg:hover { background: var(--surface-2); color: var(--fg); }
.ov-lg:focus-visible { outline: 0; box-shadow: var(--ring); }
.ov-lg[aria-selected='true'] {
  border-color: var(--line-2);
  background: var(--surface-2);
  color: var(--fg);
}
.ov-lg[aria-selected='true'] > b { background: var(--accent-soft); color: var(--accent-hi); }

/* --- sag kolon: tek panel, uc kompakt satir --------------------------------
   Kart yigini denendi ve sol kolonun iki kati yukseklik dayatti; satir duzeni
   ayni bilgiyi tasir, yuksekligi sol kolon belirler. */
.ov-side {
  display: flex; flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r4);
  background: var(--surface);
  box-shadow: var(--sh2), var(--hair-top);
  overflow: hidden;
}
.ov-r {
  --ot: var(--accent-rgb);
  position: relative;
  flex: 1 1 0;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  min-height: 46px;
  padding-inline: var(--s4);
}
.ov-r + .ov-r { border-block-start: 1px solid var(--line); }
.ov-r[data-tone='ok']      { --ot: var(--ok-rgb); }
.ov-r[data-tone='warn']    { --ot: var(--warn-rgb); }
.ov-r[data-tone='danger']  { --ot: var(--danger-rgb); }
.ov-r[data-tone='info']    { --ot: var(--info-rgb); }
.ov-r[data-tone='neutral'] { --ot: var(--neutral-rgb); }
.ov-r-l {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-11);
  color: var(--fg-3);
  white-space: nowrap;
}
.ov-r-l svg { width: 14px; height: 14px; color: rgb(var(--ot)); }
.ov-r-v {
  flex: none;
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1;
}
.ov-r-v em {
  font-style: normal;
  font-size: var(--t-11);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--fg-4);
}
.ov-r-b {
  flex: none;
  min-width: 44px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--ot), .26);
  border-radius: var(--r-pill);
  background: rgba(var(--ot), .1);
  color: rgb(var(--ot));
  font-size: var(--t-10);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
/* Bilgilendirici (uyari olmayan) etiket: renk tasimaz, dikkat calmaz */
.ov-r-b[data-soft] {
  border-color: var(--line);
  background: var(--surface-in);
  color: var(--fg-4);
  font-weight: 500;
}
.ov-r-b .mono { font-family: var(--f-mono); font-size: var(--t-10); }
/* Kapsama cubugu satirin ALT KENARINDA: kendine ayri satir istemez */
.ov-r-m {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  border-radius: 0;
}
.ov-r-m > span { border-radius: 0; box-shadow: none; }

@media (max-width: 1180px) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  .ov-side { flex-direction: row; }
  .ov-r + .ov-r { border-block-start: 0; border-inline-start: 1px solid var(--line); }
  .ov-r { flex-direction: column; align-items: flex-start; justify-content: center;
          gap: 4px; padding-block: 11px; }
  .ov-r .spacer { display: none; }
  .ov-r-b { margin-block-start: 2px; }
}
@media (max-width: 720px) {
  .ov-side { flex-direction: column; }
  .ov-r + .ov-r { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .ov-r { flex-direction: row; align-items: center; }
  .ov-r .spacer { display: block; }
  .ov-r-b { margin-block-start: 0; }
  .ov-count { display: none; }
  .ov-main { padding-inline: var(--s4); }
}

/* ===========================================================================
   IP TAHSIS — bos adres yardimcisi (admin/assignments.php modali)
   Yonetici hangi adresin bos oldugunu bilmek zorunda kalmasin: blok secilir,
   adet secilir, adresler kutuya yazilir.
   =========================================================================== */
.asg-pick {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface-in);
}
.asg-pick-l {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-11);
  font-weight: 560;
  color: var(--fg-2);
  white-space: nowrap;
}
.asg-pick-l svg { width: 14px; height: 14px; color: var(--accent-hi); }
.asg-pick-n {
  padding: 2px 8px;
  border: 1px solid rgba(var(--ok-rgb), .26);
  border-radius: var(--r-pill);
  background: rgba(var(--ok-rgb), .1);
  color: var(--ok);
  font-size: var(--t-10);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.asg-pick-n[data-empty='1'] {
  border-color: rgba(var(--warn-rgb), .28);
  background: rgba(var(--warn-rgb), .1);
  color: var(--warn);
}
/* Musteri listesindeki hizli ekleme dugmesi satiri buyutmesin */
.list-item .act-btn { flex: none; }
#as-foot[data-s='ok'] { color: var(--ok); }
@media (max-width: 620px) {
  .asg-pick .spacer { display: none; }
  .asg-pick { justify-content: flex-start; }
}

/* ===========================================================================
   SAYFALANDIRMA EKLERI
   Ortak pager() bileseni ilk/son sayfa dugmeleri ve atlama isareti kullanir.
   Pasif dugmeler <span> olarak basildigi icin .pager-btn hem <a> hem <span>
   olarak dogru gorunmelidir.
   =========================================================================== */
.i-flip { scale: -1 1; }
.pager-gap {
  padding-inline: 4px;
  color: var(--fg-4);
  font-size: var(--t-12);
  user-select: none;
}
/* <span> olarak basilan pasif dugme metin imleci gostermesin */
span.pager-btn { cursor: default; }
a.pager-btn { text-decoration: none; }

/* Zamanlanmis is durumu etiketi (ornek: abuse cekimi ayakta mi?)
   Elle tetikleme dugmesinin yerini alir: yonetici isin CALISTIGINI gormeli,
   onu baslatmak zorunda kalmamali. */
.feed-dot-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--t-11);
  color: var(--fg-3);
  white-space: nowrap;
}
.feed-dot-lbl[data-tone='ok']     { border-color: rgba(var(--ok-rgb), .26);     color: var(--ok); background: rgba(var(--ok-rgb), .08); }
.feed-dot-lbl[data-tone='warn']   { border-color: rgba(var(--warn-rgb), .28);   color: var(--warn); background: rgba(var(--warn-rgb), .09); }
.feed-dot-lbl[data-tone='danger'] { border-color: rgba(var(--danger-rgb), .30); color: var(--danger); background: rgba(var(--danger-rgb), .09); }
@media (max-width: 720px) {
  .feed-dot-lbl { display: none; }
}

/* ===========================================================================
   TABLO: KIRPILABILIR HUCRE (.cell-tr)
   Sorun: uzun konu basliklarina `max-width: 46ch` verilmisti. Bu deger hucrenin
   MIN-CONTENT olcusunu buyutuyor, otomatik yerlesimli tablo da o kadar
   genisliyordu. Sonuc: 1600px ekranda tablo kapsayiciyi 47px asiyor ve son
   kolondaki "Sil" dugmesi gorunmez oluyordu (olculdu).
   Cozum: hucre 0'a kadar daralabilsin, tasan metin kirpilsin. Tam metin
   detay modalinda okunur.
   =========================================================================== */
.dt td.cell-tr {
  max-width: 0;          /* auto layout'ta "kalan yeri al, min-content'i dayatma" */
  overflow: hidden;
}
.dt td.cell-tr > button,
.dt td.cell-tr > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================================================
   MARKA AVATARI (.avatar.is-brand)
   Onceden her hesapta isim bas harfleri gosteriliyordu ("AX", "MA"). Tek bir
   kurumsal kimlik istendi: artik her profilde marka logosu var. Logo seffaf
   zeminli PNG oldugu icin altina notr bir yuzey ve ince cerceve konur.
   =========================================================================== */
.avatar.is-brand {
  padding: 2px;
  overflow: hidden;
  /* Zemin ACIK ve temadan BAGIMSIZ: marka lacivert oldugu icin koyu temada
     var(--surface-3) uzerinde kayboluyordu. Logo her iki temada da kendi
     tasarlandigi acik zeminde durur. */
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  color: transparent;              /* olasi metin dugumu gorunmesin */
}
.avatar.is-brand > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Retina'da yumusama; kucuk boyutlarda logo bulanik gorunmesin */
  image-rendering: -webkit-optimize-contrast;
}
.avatar.is-brand.xs { padding: 1px; }
.avatar.is-brand.xl { padding: 4px; }
/* Kimlik blogunda (.ident) hizalama bozulmasin */
.ident .avatar.is-brand { flex: none; }

/* ===========================================================================
   HESAP SAYFASI — guvenlik ozeti
   Dort KPI kutusunun yerini alir. Kutular profil kartiyla ayni bilgiyi iki kez
   soyluyordu; burada tek bir yargi ve eksik onlem listesi var.
   =========================================================================== */
.acc-sec { margin-block-start: var(--s4); }
.acc-sec-t {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 9px;
  font-size: var(--t-12);
  color: var(--fg-3);
}
.acc-sec-t b {
  font-size: var(--t-13);
  font-weight: 560;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.acc-sec .meter { width: 100%; }
/* Guvenlik puani sayaci: /100 ibaresi iki satira dusmesin */
.ov-count span { white-space: nowrap; }
@media (max-width: 900px) {
  .ov-count { display: none; }
}

/* ===========================================================================
   ALAN ADI LISTESI — SATIR DUZENI (.dt-zones)
   Kart izgarasi alan adi basina ~160px yiyordu; yedi alan adi ekrani
   dolduruyordu. Satir duzeni ayni bilgiyi ~40px'e sigdirir, yirmi alan adi
   tek ekranda gorunur. Tablo oldugu icin sutun siralamasi da bedava gelir.
   =========================================================================== */
.dt-zones td { padding-block: 4px; }
.dt-zones tbody tr[data-state='problem'] { box-shadow: inset 3px 0 0 rgb(var(--warn-rgb)); }
.dt-zones tbody tr[data-state='pending'] { box-shadow: inset 3px 0 0 rgb(var(--info-rgb)); }

/* --- alan adi hucresi: ikon + ad + alt satir --- */
.zr-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.zr-ico {
  --zt: var(--neutral-rgb);
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--zt), .28);
  border-radius: var(--r2);
  background: rgba(var(--zt), .12);
  color: rgb(var(--zt));
}
.zr-ico[data-tone='ok']      { --zt: var(--ok-rgb); }
.zr-ico[data-tone='warn']    { --zt: var(--warn-rgb); }
.zr-ico[data-tone='danger']  { --zt: var(--danger-rgb); }
.zr-ico[data-tone='info']    { --zt: var(--info-rgb); }
.zr-ico[data-tone='neutral'] { --zt: var(--neutral-rgb); }
.zr-ico svg { width: 14px; height: 14px; }
.zr-dom {
  display: block;
  font-size: var(--t-12);
  font-weight: 560;
  letter-spacing: var(--tr-tighter);
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zr-dom:hover { color: var(--accent-hi); }

/* --- durum metni: nokta + etiket (rozet cercevesi satiri sisiriyordu) --- */
.st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-11);
  font-weight: 520;
  color: var(--fg-2);
  white-space: nowrap;
}
.st[data-tone='ok']      { color: var(--ok); }
.st[data-tone='warn']    { color: var(--warn); }
.st[data-tone='danger']  { color: var(--danger); }
.st[data-tone='info']    { color: var(--info); }
.st[data-tone='neutral'] { color: var(--fg-3); }


/* Dar ekranda kolon dusurme SINIF ile yapilir; nth-child kullanilamaz cunku
   Musteri kolonu yalnizca yoneticide basiliyor ve sira numaralari kayiyor.
   Dusurulen bilgilerin tamami domain.php detay sayfasinda var. */
@media (max-width: 1240px) {
  .dt-zones .c-org { display: none; }
}
@media (max-width: 1080px) {
  .dt-zones .c-dns { display: none; }
}
@media (max-width: 940px) {
  .dt-zones .c-px, .dt-zones .c-cust { display: none; }
}
@media (max-width: 800px) {
  .dt-zones .c-ns { display: none; }
}

/* ---------------------------------------------------------------------------
   SATIR YUKSEKLIGI — OLCUME DAYALI DUZELTME
   Olculdu: satir 51px. Sebep iki tane:
     1) `.dt-zones td { padding-block: 4px }` HIC UYGULANMIYORDU; tablo govdesi
        icin daha ozgul bir kural (.dt tbody td) 11px/11px dolgu dayatiyor.
        Bu yuzden secici tabloya da baglanip ozgullugu yukseltildi.
     2) Kalan yuksekligi .act-btn (28px) belirliyordu; bu listede 24px yeter.
   Hedef ~35px: 24px dugme + 2x5px dolgu + kenar.
   --------------------------------------------------------------------------- */
.dt.dt-zones tbody td { padding-block: 5px; }
.dt.dt-zones thead th { padding-block: 8px; }
.dt-zones .act-btn { width: 24px; height: 24px; }
.dt-zones .act-btn svg { width: 13px; height: 13px; }
.dt-zones .zr-ico { width: 20px; height: 20px; }
.dt-zones .zr-ico svg { width: 13px; height: 13px; }

/* ===========================================================================
   ONAY MODALI (#shConfirm)
   Tarayicinin confirm() penceresinin yerini alir. Yikici islemlerde ton
   danger olur ve varsayilan odak "Vazgec"e gecer.
   =========================================================================== */
.shc-text {
  font-size: var(--t-13);
  color: var(--fg-2);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.shc-note {
  margin-block-start: var(--s3);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-in);
  font-size: var(--t-11);
  color: var(--fg-3);
  line-height: 1.5;
}
/* Yikici onayda kutunun ust kenarina ince bir uyari serdi */
#shConfirm .modal-box { border-block-start: 2px solid transparent; }
#shConfirm:has(#shcIco[data-tone='danger']) .modal-box { border-block-start-color: rgb(var(--danger-rgb)); }
#shConfirm:has(#shcIco[data-tone='warn'])   .modal-box { border-block-start-color: rgb(var(--warn-rgb)); }
#shConfirm .modal-ft { gap: 8px; }

/* ===========================================================================
   ULKE ERISIM KONTROLU (domain.php)
   Mod secimi + aranabilir ulke listesi. Liste sabit yukseklikte kaydirilir:
   200 ulke sayfayi metrelerce uzatmasin.
   =========================================================================== */
.geo-modes {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
}
.geo-mode { position: relative; display: block; min-width: 0; cursor: pointer; }
.geo-mode > input { position: absolute; opacity: 0; width: 0; height: 0; }
.geo-mode-bd {
  --gm: var(--neutral-rgb);
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--surface-2);
  box-shadow: var(--hair-top);
  transition: border-color var(--d1) var(--e-io), background var(--d1) var(--e-io),
              box-shadow var(--d1) var(--e-io);
}
.geo-mode[data-mode='allow'] .geo-mode-bd { --gm: var(--ok-rgb); }
.geo-mode[data-mode='deny']  .geo-mode-bd { --gm: var(--danger-rgb); }
.geo-mode:hover .geo-mode-bd { border-color: var(--line-3); background: var(--surface-3); }
.geo-mode > input:checked + .geo-mode-bd {
  border-color: rgba(var(--gm), .5);
  background: linear-gradient(180deg, rgba(var(--gm), .11), rgba(var(--gm), .035));
  box-shadow: var(--hair-top), inset 0 0 0 1px rgba(var(--gm), .22);
}
.geo-mode > input:focus-visible + .geo-mode-bd { box-shadow: var(--ring); }
.geo-mode-hd { display: flex; align-items: center; gap: 8px; }
/* DOGRUDAN cocuk secilir: `.geo-mode-hd svg` yazildiginda .pick-mark icindeki
   onay isareti de boyaniyordu. Sonuc: secili olmayan kartlarda isaret gorunur
   hale geliyor, secili kartta ise isaret zeminle ayni renge dusup kayboluyordu
   (ekran goruntusunde uc kartta da tik cikti). */
.geo-mode-hd > svg { width: 15px; height: 15px; flex: none; color: rgb(var(--gm)); }
.geo-mode-hd b {
  font-size: var(--t-13); font-weight: 560;
  letter-spacing: var(--tr-tight); color: var(--fg);
}
.geo-mode-hd .pick-mark { margin-inline-start: auto; }
.geo-mode > input:checked + .geo-mode-bd .pick-mark {
  background: rgb(var(--gm)); border-color: rgb(var(--gm)); color: var(--bg);
}
.geo-mode-d { font-size: var(--t-11); color: var(--fg-3); line-height: 1.5; }

/* --- arama seridi --- */
.geo-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-block-end: var(--s3);
}
.geo-count {
  font-size: var(--t-11);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.geo-count b { color: var(--fg); font-weight: 600; }

/* --- ulke listesi --- */
.geo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 1px;
  max-height: 306px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--line);
}
.geo-item {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 7px 11px;
  background: var(--surface-in);
  cursor: pointer;
  transition: background var(--d1) var(--e-io);
}
.geo-item:hover { background: var(--surface-3); }
.geo-item > input { position: absolute; opacity: 0; width: 0; height: 0; }
.geo-item .box {
  flex: none;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border: 1px solid var(--line-3);
  border-radius: var(--r1);
  background: var(--surface);
  color: transparent;
  transition: all var(--d1) var(--e-io);
}
.geo-item .box svg { width: 11px; height: 11px; stroke-width: 2.6; }
.geo-item > input:checked + .box {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
.geo-item > input:focus-visible + .box { box-shadow: var(--ring); }
.geo-item.is-on { background: rgba(var(--accent-rgb), .08); }
.geo-flag {
  flex: none;
  width: 20px; height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.geo-name {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--t-12);
  color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.geo-item.is-on .geo-name { color: var(--fg); font-weight: 520; }
.geo-cc {
  flex: none;
  font-size: var(--t-10);
  color: var(--fg-4);
  letter-spacing: var(--tr-caps);
}
@media (max-width: 620px) {
  .geo-list { grid-template-columns: minmax(0, 1fr); max-height: 260px; }
  .geo-modes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   VEKIL ANAHTARI (.rflag.is-btn)
   Etiket eskiden yalnizca bilgi veriyordu ve "vekile al" ayri bir dugmeydi;
   tersi (vekilden cikarma) hic yoktu. Artik etiketin kendisi iki yonlu
   anahtardir. Dokunulabilir olduğu gorunmeli: imlec, hafif buyume, cerceve.
   --------------------------------------------------------------------------- */
button.rflag.is-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--d1) var(--e-io), box-shadow var(--d1) var(--e-io),
              scale var(--d1) var(--e-io);
}
button.rflag.is-btn:hover {
  background: rgba(var(--rf), .22);
  box-shadow: inset 0 0 0 1px rgba(var(--rf), .5);
  scale: 1.04;
}
button.rflag.is-btn:active { scale: .98; }
button.rflag.is-btn:focus-visible { outline: 0; box-shadow: var(--ring); }
/* Anahtar oldugu ipucu: ustune gelince ikon hafifce doner */
button.rflag.is-btn svg { transition: rotate var(--d2) var(--e-io); }
button.rflag.is-btn:hover svg { rotate: -12deg; }