/* =====================================================================
   Mail Filter Gateway - arayuz stilleri
   Tasarim sistemi: Stitch "Core Mail Admin"
   Yogun bilgi gosterimi icin kompakt, dusuk kontrastli cerceveler,
   teknik veriler icin monospace.
   ===================================================================== */

:root {
  /* GUARD PANELI — kenar cubugu rengi bilerek filter'dan farkli.
     Iki panel cogu zaman yan yana acik duruyor; ad okumadan hangisinde
     oldugunu anlamak icin renk en hizli isaret. Geri kalan her sey
     (govde, kartlar, tablolar, rozetler) filter ile AYNI kalir --
     ayrim kimlik icin, ayri bir tasarim dili icin degil.

     filter: soguk lacivert-arduvaz + mavi vurgu  (giden)
     guard : derin yesil-arduvaz + teal vurgu     (gelen, koruyucu) */
  --sidebar:        #10211f;
  --sidebar-hover:  #1b302d;
  --sidebar-text:   #9db3ae;
  --sidebar-active: #0d9488;

  --primary:        #2563eb;
  --primary-dark:   #1d4ed8;
  --primary-soft:   #eff4ff;

  --success:        #10b981;
  --success-soft:   #ecfdf5;
  --danger:         #ba1a1a;
  --danger-soft:    #ffdad6;
  --warning:        #b45309;
  --warning-dark:   #92400e;

  --info:           #0e7490;
  --info-dark:      #155e75;
  --info-soft:      #ecfeff;

  --secondary:      #475569;
  --secondary-dark: #334155;

  --success-dark:   #059669;
  --danger-dark:    #8f1414;
  --primary-soft2:  #dbeafe;
  --warning-soft:   #fef3c7;

  --bg:             #f8fafc;
  --surface:        #ffffff;
  --border:         #e2e8f0;
  --border-strong:  #cbd5e1;
  --thead:          #f1f5f9;

  --text:           #191c1e;
  --text-muted:     #64748b;

  /* GRAFİK RENKLERİ — arayüzün anlam renklerinden AYRI TUTULUYOR.
     --warning (#b45309) ve --danger (#ba1a1a) METİNDE doğru seçimler:
     ikisi de koyu, beyaz üstünde okunuyor. Ama yan yana ÇUBUK
     olduklarında ayırt edilemiyorlar; ikisi de koyu-sıcak ton ve
     grafik çamura dönüyor.
     Grafikte istenen şey okunabilirlik değil AYIRT EDİLEBİLİRLİK.
     Ekranda birbirine en çok karışan çift turuncu ile kırmızıydı;
     bu yüzden yalnızca renk çemberinde değil AÇIKLIKTA da ayrıldılar:
     turuncu açık, kırmızı koyu. Siyah iade için: o bizim kararımız
     değil, "kapalı" bir sonuç -- renk skalasının dışında durması
     anlamıyla da uyuşuyor. */
  --grafik-teslim:    #10b981;  /* yeşil   */
  --grafik-karantina: #f97316;  /* turuncu */
  --grafik-red:       #b91c1c;  /* kırmızı */
  --grafik-iade:      #111827;  /* siyah   */

  --radius:         4px;
  --radius-lg:      8px;
  --sidebar-w:      240px;

  /* Tum form kontrolleri ve butonlar bu iki olcuyu kullanir.
     Yukseklikler burada degistirilir; hicbir yerde tekil deger yazilmaz. */
  --control-h:      36px;
  --control-h-sm:   30px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  /* ------------------------------------------------ KOYU TEMA KATMANI
     Aşağıdaki belirteçler, gövdede SABİT yazılmış renklerin yerini
     aldı. Açık değerleri eskisinin AYNISI -- yani bu katman açık
     temanın görünümünü değiştirmiyor. Koyu tema, dosyanın sonundaki
     blokta yalnızca bu değerleri yeniden tanımlayarak geliyor.

     NEDEN SABİT RENK SORUN: koyu temada zemin koyulaşırken üzerindeki
     yazı sabit kalırsa okunmuyor. Ölçüldü (21.09.2026): gövdede 196
     sabit renk vardı; 20 kural pastel zemin + sabit koyu yazı
     çiftiydi, yani tam bu tuzağa açıktı.

     KENAR ÇUBUĞU VE İPUCU BALONU DIŞARIDA: ikisi zaten koyu zeminli,
     üzerlerindeki saydam beyazlar ve açık renkli yazılar koyu temada
     da doğru duruyor. Onlara dokunulmadı. */

  /* pastel zemin üzerindeki koyu yazı */
  --uzeri-yesil:      #047857;
  --uzeri-yesil2:     #065f46;
  --uzeri-kirmizi:    #93000a;
  --uzeri-kirmizi2:   #7a1010;
  --uzeri-mavi:       #1e40af;
  --uzeri-mavi2:      #4338ca;
  --uzeri-turuncu:    #7c2d12;
  --uzeri-turuncu2:   #9a3412;
  --uzeri-turuncu3:   #c2410c;
  --uzeri-kahve:      #9a5b2a;
  --uzeri-mor:        #6b21a8;

  /* yüzey basamakları */
  --yuzey2:           #f1f5f9;
  --yuzey3:           #f8fafc;
  --satir-alt:        #f6f9fc;
  --satir-vurgu:      #e2e8f0;

  /* ince renk tintleri (zemin) */
  --tint-mavi:        #eef2ff;
  --tint-mavi2:       #e0edff;
  --tint-yesil:       #ecfdf5;
  --tint-turuncu:     #fff7ed;
  --tint-turuncu2:    #ffedd5;
  --tint-mor:         #f3e8ff;

  /* kenarlık tintleri */
  --cizgi-kirmizi:    #fecaca;
  --cizgi-yesil:      #a7f3d0;
  --cizgi-yesil2:     #d1fae5;
  --cizgi-mavi:       #bfdbfe;
  --cizgi-mavi2:      #e0e7ff;
  --cizgi-turuncu:    #fed7aa;
  --cizgi-sari:       #fde68a;
  --cizgi-camgobegi:  #a5f3fc;

  /* soluk yazı ve ısı ölçeği */
  --text-soluk:       #94a3b8;
  --text-koyu2:       #334155;
  --text-gri2:        #5b6478;
  --isi-1:            #c7d7fe;
  --isi-2:            #93b4fd;
  --isi-3:            #5b8def;

}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- kenar cubugu */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Logo panelin kimligi: iki panel yan yana acikken hangisinde oldugunu
   ad okumadan anlamak icin. Rengini --sidebar-active'ten alir, yani
   guard'da kendiliginden o panelin rengine doner. */
.sidebar-brand .marka-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.07);
  color: var(--sidebar-active);
}
.sidebar-brand .marka-logo svg { width: 20px; height: 20px; }
.sidebar-brand .marka-ad { min-width: 0; }
.sidebar-brand strong { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.sidebar-brand .marka-ad > span {
  display: block;
  font-size: 11px;
  color: var(--sidebar-text);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- menu arama --- */
.menu-ara { position: relative; padding: 12px 14px 8px; }
.sidebar .menu-ara svg {
  position: absolute;
  left: 25px;
  top: 21px;
  width: 14px;
  height: 14px;
  color: var(--sidebar-text);
  opacity: .7;
  pointer-events: none;
}
/* SECICIDE ".sidebar" SART.
   Dosyanin ilerisinde "input[type=search] { background:#fff; padding:0 10px }"
   kurali var; ayni ozgullukte ve SONRA geldigi icin kazaniyordu. Sonuc:
   koyu kenar cubugunda beyaz kutu ve padding gidince metnin ikonun altina
   kaymasi. ".sidebar" oneki ozgullugu bir sinif yukari cikarip bunu kesin
   olarak cozuyor -- !important'a gerek yok. */
.sidebar .menu-ara input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  box-shadow: none;
}
.sidebar .menu-ara input::placeholder { color: var(--sidebar-text); opacity: .75; }
.sidebar .menu-ara input:focus {
  outline: none;
  border-color: var(--sidebar-active);
  background: rgba(255,255,255,.10);
  /* Genel "input:focus" mavi bir halka biniyor; kenar cubugunda yersiz. */
  box-shadow: 0 0 0 2px rgba(13,148,136,.25);
}
/* Tarayicinin kendi temizleme carpisi koyu zeminde gorunmuyor. */
.menu-ara input::-webkit-search-cancel-button { -webkit-appearance: none; }
.menu-ara-bos { padding: 6px 20px 10px; font-size: 11.5px; color: var(--sidebar-text); opacity: .8; }
/* ".sidebar-nav a" display:flex diyor ve bu, tarayicinin kendi
   [hidden] kuralini EZER -- arama gizlemesi calismazdi. Yalnizca
   kenar cubugu icin, dar kapsamda gecersiz kilinir. */
.sidebar-nav [hidden], .menu-ara-bos[hidden] { display: none !important; }

.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  border-left: 3px solid transparent;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.sidebar-nav a.active {
  background: var(--sidebar-hover);
  color: #fff;
  border-left-color: var(--sidebar-active);
  font-weight: 500;
}
.sidebar-nav svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.sidebar-nav .nav-sep {
  margin: 10px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-gri2);
}

.sidebar-foot {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}
.sidebar-foot .who { color: #fff; font-weight: 500; }
.sidebar-foot .role { color: var(--sidebar-text); font-size: 11px; }
.sidebar-foot a { color: var(--sidebar-text); font-size: 12px; }

/* ---------------------------------------------------------------- ana alan */
.main { flex: 1; min-width: 0; padding: 24px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 32px; }
/* Metin 720px'de sag taraftaki kontrollere yer birakmiyordu: Smart Sunucu
   Raporu'nda iki suzgec, Goster, canli secimi ve Yenile yan yana durmak
   zorunda ve sigmayinca alt satira kayiyorlardi. 520px hem kontrollere
   yer birakiyor hem okuma olcusu olarak daha iyi -- satir uzunlugu
   dusuyor. */
.page-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; max-width: 520px; }
/* UZUN KILAVUZ METNI -- 520px'e SIKISMASIN.
 *
 * Yukaridaki 520px sinirinin gerekcesi gecerli: baslikta sagda suzgecler
 * ve dugmeler duruyor, metin onlara yer birakmali. AMA bazi ekranlarda
 * baslikta hic kontrol yok (kara/guvenilir liste, konu, baslik, icerik,
 * ek filtreleri -- altisi da liste-ekran.php'yi kullaniyor) ve oralarda
 * ayni sinir hicbir seyi korumuyor: 10-20 satirlik kural anlatimi dar
 * bir kolona sikisirken sagda 1400px bos duruyor.
 *
 * SINIR KALDIRILMIYOR, YERI DEGISTIRILIYOR -- projede ayni sorun form
 * alanlarinda boyle cozulmus (bkz. FORM GENISLIGI): kap serbest kaliyor,
 * okuma olcusu KOLONA konuyor. 520px'lik iki kolon, tek kolona gore iki
 * kat alan kullaniyor ve satir uzunlugu degismiyor.
 *
 * Maddeler <div> olarak yaziliyor ki kolon sinirinda cumlenin ortasindan
 * bolunmesinler (break-inside). <br> ile ayrilmis metin bunu yapamaz. */
.page-head .kilavuz {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  max-width: 1180px;
  columns: 520px 2;
  column-gap: 44px;
}
.page-head .kilavuz > div { break-inside: avoid; margin-top: 10px; }
.page-head .kilavuz > div:first-child { margin-top: 0; }
@media (max-width: 1100px) { .page-head .kilavuz { columns: auto; max-width: 520px; } }
/* Metin sutunu sikisabilsin, kontroller sikismasin. */
.page-head > div:first-child { min-width: 0; }
.page-head > .baslik-islemler { flex: 0 0 auto; }
/* Baslikta yan yana duran kontroller: alt satira kaymamalari icin tek
   grup halinde ve sarmasiz. Dar ekranda .page-head'in kendisi zaten
   satir atliyor. */
.baslik-islemler { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.baslik-islemler .toolbar { flex-wrap: nowrap; }
@media (max-width: 1100px) {
  .page-head { flex-wrap: wrap; }
  .baslik-islemler { flex-wrap: wrap; }
  .baslik-islemler .toolbar { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- istatistik kartlari */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat .label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.stat .value { font-family: var(--mono); font-size: 22px; font-weight: 500; margin-top: 6px; }
.stat .alt   { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
/* Doluluk çubuğu taşıyan ölçü satırı.
   Çubuk kartların yalnızca bir kısmında olduğu için alt satır
   kendiliğinden kayardı; margin-top:auto onu her kartta aynı hizada
   tutar. Yalnızca bu satıra özel: .stat on üç ekranda kullanılıyor. */
.stats-olculu .stat { display: flex; flex-direction: column; }
.stats-olculu .stat .alt { margin-top: auto; }
.stats-olculu .stat .olcu { margin: 10px 0 8px; min-width: 0; flex: none; }

/* ---------------------------------------------- dörtlü şerit
   Mail Hareketleri'nde sekiz kart var (Tümü + yedi durum). Varsayılan
   .stats ızgarası "sığdığı kadar" çalışıyor (auto-fit / minmax 170px),
   yani geniş ekranda sekizi tek sıraya diziyor ve her kart iğne gibi
   kalıyor. Dörtlü iki sıra sekiz kartı tam bölüyor.

   SATIR SAYISI DEĞİL SÜTUN SAYISI SABİTLENİYOR: kart sayısı ileride
   değişirse (yeni bir durum kovası) ızgara kendiliğinden üçüncü sıraya
   taşar.

   minmax(0, 1fr) -- 1fr DEĞİL: 1fr, ızgara ögesinin en küçük içerik
   genişliğinden daha ince olmasına izin vermiyor ve uzun bir sayı
   sütunu taşırıyordu. minmax(0, …) taşmayı kesiyor.

   DAR EKRAN: dörtten ikiye, sonra bire. Telefonda dört sütun okunmaz.
*/
.stats-dortlu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats-dortlu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stats-dortlu { grid-template-columns: minmax(0, 1fr); } }

.stat.ok    .value { color: var(--success); }
.stat.warn  .value { color: var(--warning); }
.stat.bad   .value { color: var(--danger); }

/* ---------------------------------------------------------------- kart / panel */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

/* Açılır kart.
 *
 * İzleme Raporu'nda açık kuralların tabloları varsayılan olarak kapalı
 * geliyor: o veri geçmişte toplanmış ve artık karar vermek için
 * kullanılmıyor, ama listeyi sayfalarca uzatıyordu. İzleme modundaki
 * kurallar açık gelir — asıl bakılacak olan onlar.
 *
 * <details>/<summary> kullanılıyor, JavaScript değil: açma-kapama
 * tarayıcının kendi işi, sayfa yenilense de bozulmaz ve klavyeyle
 * erişilebilir kalır. */
details.card > summary.card-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.card > summary.card-head::-webkit-details-marker { display: none; }
details.card > summary.card-head::after {
  content: "▸";
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  transition: transform .15s;
}
details.card[open] > summary.card-head::after { content: "▾"; }
details.card:not([open]) > summary.card-head { border-bottom: none; }
details.card > summary.card-head:hover { background: var(--bg); }
/* Kart basligindaki suzgec cubugu bos alani DOLDURUR.
   .card-head bir flex kabi; icindeki form varsayilan olarak icerigi
   kadar genisler. O zaman "N kayit" gibi margin-left:auto ile saga
   yaslanan ogeler kartin degil FORMUN sag kenarina yaslanip ortada
   asili kalir -- az sayida suzgeci olan sayfalarda gozle gorulur.
   flex:1 formu kartin genisligine tasir; yanindaki baslik varsa o kendi
   yerini korur. */
.card-head > form.toolbar { flex: 1; min-width: 0; }

.card-body { padding: 16px; }

/* ------------------------------------------------------ puan ozeti */
/* Mail detayinda "hangi kurala takildi" listesi. Ham kod yerine
   kuralin adi, ne buldugu ve puani gosterilir; ad ayarina baglantidir. */
.puan-liste { display: flex; flex-direction: column; gap: 5px; }
.puan-satir { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.puan-kural {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-strong);
}
.puan-kural:hover { color: var(--primary); border-bottom-color: var(--primary); }
.puan-sonuc { color: var(--text-muted); font-size: 12.5px; }
.puan-deger {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.puan-toplam {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --------------------------------------------------- kural kapsami */
/* Kuralin neye baktigini gosterir: baglanti, baslik, mail icerigi.
   Icerik kurallari ayirt edilsin diye ayri renk kullanir. */
.kapsam {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.kapsam-baglanti { background: var(--tint-mavi); color: var(--uzeri-mavi2); border-color: var(--cizgi-mavi2); }
.kapsam-baslik   { background: var(--yuzey2); color: var(--secondary); border-color: var(--border); }
.kapsam-govde    { background: var(--tint-turuncu); color: var(--uzeri-turuncu3); border-color: var(--cizgi-turuncu); }
.kapsam-imza     { background: var(--tint-yesil); color: var(--uzeri-yesil); border-color: var(--cizgi-yesil2); }

/* ------------------------------------------------------- kurala git */
html { scroll-behavior: smooth; }

/* Kart basligi ust kenara yapismasin diye pay birakilir. */
.card[id^="kural-"] { scroll-margin-top: 18px; }

.kural-baglanti { color: var(--text); text-decoration: none; }
.kural-baglanti:hover { color: var(--primary); text-decoration: underline; }
.kural-baglanti:hover svg { opacity: 1; }

/* Hedefe varildiginda kart kisa sure vurgulanir: sayfada nereye
   gelindigi, kaydirma bitince de anlasilsin. */
.card.vurgu {
  animation: kart-vurgu 1.8s ease-out;
}
@keyframes kart-vurgu {
  0%, 45% { box-shadow: 0 0 0 3px var(--primary-soft), 0 0 0 4px var(--primary); }
  100%    { box-shadow: 0 0 0 3px transparent, 0 0 0 4px transparent; }
}

/* ---------------------------------------------------------------- olcum */
.olcu {
  flex: 1;
  min-width: 60px;
  height: 7px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.olcu-dolu { height: 100%; border-radius: 3px; transition: width .3s; }

.ikili {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .ikili { grid-template-columns: 1fr; } }

.cekirdek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.cekirdek .mono:first-child { width: 26px; }
.cekirdek .mono:last-child  { width: 34px; text-align: right; }

.uyari { color: var(--danger); font-weight: 600; }

/* ---------------------------------------------------------------- sekmeler */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.aktif { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-sayi {
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--yuzey2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.tab.aktif .tab-sayi { background: var(--primary-soft); color: var(--primary); }

/* ---------------------------------------------------------------- tablo */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  background: var(--thead);
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* Siralanabilir baslik.
   Bag, TH'nin kendi bicimini (kucuk, kalin, buyuk harf) devralir; kendi
   rengini vermez, yoksa baslik seridinde tek bir sutun mavi kalir.
   Genisletilmis tiklama alani icin negatif margin + esit padding: bag
   hucrenin tamamini kaplar, kullanici harfin ustune nisan almak zorunda
   kalmaz. */
table.data thead th a.sirala-bag {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  margin: -8px -12px;
  padding: 8px 12px;
  border-radius: 4px;
}
table.data thead th a.sirala-bag:hover { color: var(--text); background: rgba(0,0,0,.04); }
table.data thead th a.sirala-bag:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Etkin sutun koyu: hangisinin sirayi belirledigi bir bakista gorunsun. */
table.data thead th a.sirala-bag.etkin { color: var(--text); }
/* Ok, bilgi ikonuyla ayni satirda dursun diye kucuk ve hafif. */
table.data thead th .sirala-ok { font-size: 8px; opacity: .75; vertical-align: 1px; }
/* Baslik hucresinde bag + bilgi ikonu yan yana; ikonun bagin negatif
   margin'i yuzunden kaymamasi icin. */
table.data thead th a.sirala-bag + .bilgi-ikonu { margin-left: 10px; }

table.data tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .mono { font-family: var(--mono); font-size: 12px; font-weight: 500; }
/* Islem sutunu.
   Butonlarin bir kismi <form> icinde, bir kismi dogrudan <a>: satir ici
   hizalama ikisini ayni eksene oturtmuyor. Cozum, HUCREYE degil ICERIDEKI
   SARMALAYICIYA flex vermek.
   Hucreye flex verilirse tablo duzeninden cikar ve satir alt cizgisi o
   sutunda kayik gorunur -- bu hata bir kez yapildi, tekrarlanmasin. */
table.data td.actions { text-align: right; white-space: nowrap; }
/* İŞLEM GRUBU — düzenle/sil gibi düğmelerin yan yana durduğu şerit.
   TEMEL KURAL SINIFIN KENDİSİNDE, tablo hücresine bağlı DEĞİL.
   Önce yalnızca "table.data td.actions .islem-grubu" olarak
   tanımlıydı; sınıfı tablo dışında (ya da td.actions yerine
   td.right içinde) kullanan her yerde düğmeler sessizce alt alta
   düşüyordu -- hata görünmüyor, yalnızca çirkinleşiyordu. */
.islem-grubu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Tablo hücresinde ayrıca sağa yaslanır: işlem sütunu hep sağda. */
table.data td.actions .islem-grubu,
table.data td.right .islem-grubu {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
table.data td.actions form,
table.data td.right form { display: inline-flex; margin: 0; }
table.data td.actions .btn,
table.data td.actions .btn-icon,
table.data td.actions button,
table.data td.actions a.btn {
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  vertical-align: middle;
  margin: 0;
}
.empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* VEKALET ŞERİDİ -- "başkasının gözünden bakıyorsunuz" uyarısı.
   Sayfanın en üstünde, uyarı renginde ve kapatılamaz: ekran birebir o
   kullanıcının ekranı olduğu için, uyarı olmadan hangi hesapta
   olunduğu anlaşılmıyor. */
.vekalet-serit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 9px 14px;
  /* Yedek değer kaldırıldı: --warning-soft her zaman tanımlı,
     dolayısıyla yedek hiç devreye girmiyordu. Eskiden orada sabit
     bir açık renk (#fff7ed) duruyordu; koyu temada devreye girse
     yanlış olurdu. */
  background: var(--warning-soft);
  border: 1px solid var(--warning, #f59e0b);
  border-left-width: 4px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--uzeri-turuncu);
}
.vekalet-serit .muted { color: var(--uzeri-kahve); }
.vekalet-ikon {
  display: inline-flex; width: 22px; height: 22px; flex: none;
  color: var(--warning, #f59e0b);
}
.vekalet-ikon svg { width: 100%; height: 100%; }

/* Tablo icindeki durum anahtari: aktif/pasif tek tikla degisir.
   Ayar sayfalarindaki anahtarin kucuk olcegi. */
.durum-anahtari { display: inline-flex; align-items: center; gap: 8px; margin: 0; vertical-align: middle; }
.durum-anahtari button {
  border: 0;
  background: none;
  /* YUKSEKLIK VE DOLGU DA SIFIRLANIR. Panelde .btn disindaki bir
     <button> de ortak yuksekligi aliyor; ray sisiyor ve topuz
     raydan tasiyordu. */
  padding: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: inherit;
}
.durum-anahtari .yol {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 19px;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background .15s;
}
.durum-anahtari .yol::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
.durum-anahtari.acik .yol { background: var(--success); }
.durum-anahtari.acik .yol::after { transform: translateX(15px); }
.durum-anahtari .etiket { font-size: 12px; color: var(--text-muted); }
.durum-anahtari.acik .etiket { color: var(--uzeri-yesil); font-weight: 600; }
.durum-anahtari button:focus-visible .yol { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- rozetler */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 16px;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Rozetin altinda yazi olan hucrelerde ikisi ayni hizadan baslasin.
   Rozetin kendi ic bosluguna (8px) esit negatif bosluk verilir; boylece
   nokta isareti, alttaki yazinin ilk harfiyle ayni sutunda durur. */
.badge.hizali { margin-left: -8px; }

/* Satirlar birbirinden ayrilsin.
   Tek renk zeminde, ozellikle iki satirli hucrelerde hangi bilginin
   hangi maile ait oldugu karisiyordu.

   Kart zemini BEYAZ (--surface) oldugu icin serit renginin ondan
   ayrilmasi gerekir. Uzerine gelme rengi seritten belirgin sekilde
   koyu secilir, yoksa cift satirlarda vurgu kaybolur -- serit ne kadar
   acik olursa bu fark o kadar onemli. */
table.data tbody tr:nth-child(even) { background: var(--satir-alt); }
table.data tbody tr:hover { background: var(--satir-vurgu); }
.badge-ok   { background: var(--success-soft); color: var(--uzeri-yesil); }
.badge-off  { background: var(--yuzey2); color: var(--text-muted); }
.badge-bad  { background: var(--danger-soft); color: var(--uzeri-kirmizi); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
/* .badge-info EKSİKTİ. Projede zaten kullanılıyordu (liste-ekran.php'de
   genel kuralları işaretleyen "Genel" rozeti) ama CSS'te karşılığı
   yoktu -- o rozet arka planını hiç almıyor, düz metin gibi
   görünüyordu. Renk değişkenleri baştan beri tanımlı
   (--info-soft / --info-dark), yalnızca rozet türü yazılmamış.
   Aynı sınıfı hareketler ekranındaki alan adı süzgeç çipi de
   kullanıyor. */
.badge-info { background: var(--info-soft); color: var(--info-dark); }

/* panel tipi etiketleri - her panel kendi rengiyle taninir */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.tag-directadmin { background: var(--tint-mavi2); color: var(--uzeri-mavi); }
.tag-plesk       { background: var(--tint-mor); color: var(--uzeri-mor); }
.tag-cpanel      { background: var(--tint-turuncu2); color: var(--uzeri-turuncu2); }
.tag-other       { background: var(--yuzey2); color: var(--secondary); }

/* ---------------------------------------------------------------- butonlar */
.btn {
  display: inline-flex;
  align-items: center;
  /* YATAYDA DA ORTALA. Düğme içeriği kadar genişken bunun etkisi yok;
     yalnızca düğme GERİLDİĞİNDE (flex-grow ya da tam genişlik) fark
     ediyor -- o durumda yazı sola yapışık kalıyordu. Tek yerde
     tanımlı olsun ki gerilen her düğme aynı davransın. */
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-default { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-default:hover { background: var(--yuzey3); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); }
.btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: 12px; }
.btn-icon {
  height: var(--control-h-sm); width: var(--control-h-sm); padding: 0;
  justify-content: center;
  background: var(--surface); border-color: var(--border);
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--yuzey2); color: var(--text); }
.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
/* Düzenle simgesi: silmenin yanında ama onun rengini almamalı.
   İkisi aynı görünseydi el alışkanlığıyla yanlışına basılırdı. */
.btn-icon.info:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); }
.btn-icon svg { width: 14px; height: 14px; }

/* ==================================================================
   BUTON RENK STANDARDI
   ==================================================================
   Renk, butonun NE YAPTIGINI soyler. Ayni is her ekranda ayni renkte
   olmali: "Filtrele" bir sayfada camgobegi, otekinde beyaz olursa
   kullanici her sayfada yeniden ogrenmek zorunda kalir.

   YENI BIR BUTON EKLERKEN once bu tabloya bak, sonra sinifi sec.

     ISLEV                               SINIF                  GORUNUM
     ---------------------------------------------------------------
     Ana islem                           btn-primary            dolu mavi
       kaydet, ekle, olustur, gonder,
       giris yap, degistir
     Filtrele / ara                      btn-info               dolu camgobegi
       liste suzme dugmeleri
     Onay                                btn-success            dolu yesil
       onayla, serbest birak, devri onayla
     Kalici silme                        btn-danger             dolu kirmizi
       sil, sifirla
     Geri alinabilir olumsuz karar       btn-outline-danger     kirmizi anahat
       reddet, talebi geri cek
     BIR KAYDIN detayi / denetimi        btn-outline-info       camgobegi anahat
       teslimat raporu, MX denetle, puan ver
       (satirdaki KAYDA ait islem; genel bir ekrana gitmek degil --
        "Kuyrugu gor", "Esik ayarina git" gibi baglar TARAFSIZDIR)
     Yardimci uretim / satir ici eylem   btn-outline-primary    mavi anahat
       sifre uret, kopyala, simdi yenile
     Tarafsiz                            btn-secondary          beyaz + cerceve
       vazgec, geri don, temizle, sayfalama

   SIMGE BUTONLARI (btn-icon) ayni mantigi izler:
     .primary = duzenle / eylem, .info = goruntule / denetle,
     .success = olumlu, .danger = sil.

   NEDEN NOTR BEYAZ: bir ara butun bunlar dolu koyu lacivertti ve sayfa
   tek duze bir blok gibi duruyordu; gercek ana islem (Kaydet) arada
   kayboluyordu. Tarafsiz isler bagirmaz. */
.btn-success   { background: var(--success);   color: #fff; }
.btn-success:hover   { background: var(--success-dark); }
.btn-warning   { background: var(--warning);   color: #fff; }
.btn-warning:hover   { background: var(--warning-dark); }
.btn-info      { background: var(--info);      color: #fff; }
.btn-info:hover      { background: var(--info-dark); }
/* NÖTR BUTON AÇIK RENKTİR.
   btn-secondary koyu lacivertti ve sayfadaki 48 kullanımının neredeyse
   tamamı gezinme ya da temizleme işiydi: "Girişe dön", "Temizle",
   "Önceki", "Kuyruğu gör". Bunlar bağırmamalı -- her biri dolu koyu
   renk olunca sayfa tek düze bir mavi blok hâline geliyor ve GERÇEK
   ana işlem (Kaydet) arada kayboluyor.
   Renk artık anlam taşıyor: dolu mavi = ana işlem, açık = tarafsız. */
.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--yuzey2); border-color: var(--text-muted); }
.btn-danger:hover    { background: var(--danger-dark); }

/* Anahat (outline) bicimi: tablo icinde yan yana duran cok sayida buton
   dolu renkle agir gorunur; anahat ayni anlami daha sakin verir. */
.btn-outline-primary { background: var(--surface); color: var(--primary);   border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary);   color: #fff; }
.btn-outline-success { background: var(--surface); color: var(--success-dark); border-color: var(--success); }
.btn-outline-success:hover { background: var(--success);   color: #fff; }
.btn-outline-danger  { background: var(--surface); color: var(--danger);    border-color: var(--danger); }
.btn-outline-danger:hover  { background: var(--danger);    color: #fff; }
/* .btn-outline-secondary EKSİKTİ. karantina-onay.php'deki "Vazgeç"
   düğmesi bu sınıfı kullanıyor ama karşılığı yoktu: yalnızca .btn
   uygulanıyor, yani saydam kenarlı ve zeminsiz bir düğme çıkıyordu.
   Öteki outline türlerinin kalıbıyla yazıldı. */
.btn-outline-secondary {
  background: var(--surface); color: var(--text-muted);
  border-color: var(--border-strong);
}
.btn-outline-secondary:hover { background: var(--yuzey3); color: var(--text); }
.btn-outline-info    { background: var(--surface); color: var(--info);      border-color: var(--info); }
.btn-outline-info:hover    { background: var(--info);      color: #fff; }
.btn-outline-warning { background: var(--surface); color: var(--warning);   border-color: var(--warning); }
.btn-outline-warning:hover { background: var(--warning);   color: #fff; }

/* Simge butonlari: normalde sakin, uzerine gelince rengini gosterir. */
.btn-icon.primary { color: var(--primary); border-color: var(--primary-soft2); }
.btn-icon.primary:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); }
.btn-icon.success { color: var(--success-dark); border-color: var(--cizgi-yesil); }
.btn-icon.success:hover { background: var(--success-soft); border-color: var(--success); }
.btn-icon.info { color: var(--info); border-color: var(--cizgi-camgobegi); }
.btn-icon.info:hover { background: var(--info-soft); border-color: var(--info); }
.btn-icon.danger { color: var(--danger); border-color: var(--cizgi-kirmizi); }

/* ---------------------------------------------------------------- formlar */
.form-row { margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
/* Iki sutun: birbirine ait alanlar (bicim + deger) yan yana dursun,
   ucuncu sutuna tasip esleri bolunmesin. */
.form-grid.iki { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
@media (max-width: 640px) { .form-grid.iki { grid-template-columns: 1fr; } }
label.lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--secondary-dark); }
label.lbl .req { color: var(--danger); }
/* type=search DA bu listede olmali.
 *
 * Yoksa tarayicinin kendi kucucuk arama kutusu cizilir: yukseklik,
 * dolgu, cerceve, yazi tipi -- hicbiri uygulanmaz. Uc gorunumde arama
 * kutusu bu yuzden oteki kutulardan farkli duruyordu; sinif eksik
 * degildi, TIP eksikti. */
/* TİPSİZ INPUT DA KAPSANIR.
   "input[type=text]" seçicisi, type niteliği HİÇ YAZILMAMIŞ bir
   input'u yakalamaz -- tarayıcı onu metin kutusu gibi çalıştırsa da
   seçici eşleşmez. Kural puanı ekranındaki üç kutu bu yüzden
   biçimsizdi: ne genişlik, ne yükseklik, ne çerçeve.

   Aynı tuzağın "type eksikti" hâli bir kez daha yaşandı (bkz. yukarıdaki
   arama kutusu notu). Bu sefer seçiciye ":not([type])" eklendi ki
   biri type yazmayı unuttuğunda kutu yine doğru görünsün. */
input:not([type]),
input[type=text], input[type=search], input[type=password], input[type=email],
input[type=number], select, textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* SELECT VARSAYILANI: İÇERİĞE GÖRE.
 *
 * Üstteki kural bütün form kutularına width:100% veriyor. Metin kutusu
 * için doğru; select için DEĞİL. Native select genişliğini en uzun
 * seçeneğine göre ölçer -- %100 verildiği anda bu yetenek kapanıyor ve
 * yan yana dizilen bir şeritte kutu sıkışıp yazıyı kesiyor
 * ("Canlı: kapalı" -> "Canlı: kap", uzun alan adları "…" ile bitiyor).
 *
 * BUNU ÜÇ KEZ ŞERİT ŞERİT YAMADIK ve her yeni şeritte geri geldi:
 * kuralın şekli yanlıştı, tek tek eklenen istisnalardan biri hep
 * unutuluyordu. Varsayılan tersine çevrildi -- select artık içeriğine
 * göre genişler; TAM GENİŞLİK İSTEYEN yer bunu kendi söyler (aşağıda).
 * Böylece yeni bir şerit eklendiğinde hiçbir şey yapmak gerekmiyor. */
select { width: auto; max-width: 100%; }

/* Form satırındaki select tam genişlikte: etiketiyle ve yanındaki
   metin kutularıyla aynı hizada dursun. Tek istisna bu. */
.form-row select { width: 100%; }
textarea { height: auto; min-height: 76px; padding: 8px 10px; line-height: 19px; resize: vertical; }

/* Tarayicinin arama kutusuna kendiliginden ekledigi bicim ve temizleme
   dugmesi kapatilir; kutu oteki alanlarla ayni gorunsun. */
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button { -webkit-appearance: none; }
input.mono, textarea.mono { font-family: var(--mono); font-size: 12.5px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}
.hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* Eşleşme örneği — "sik" kuralı "klasik" kelimesini niçin yakalıyor?
   Kural metni ile örnek kelimeyi yan yana yazmak yetmiyordu: kişi iki
   dizgeyi gözüyle karşılaştırmak zorunda kalıyor ve kalıbın kelimenin
   ORTASINDA geçtiğini fark etmiyordu. Eşleşen parça kelimenin içinde
   boyanınca sebep tek bakışta görünüyor. */
.ornek-satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 5px 0 0 14px;
}
.ornek-kelime {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px;
}
.ornek-kelime .esik {
  background: var(--danger-soft); color: var(--uzeri-kirmizi);
  font-weight: 700; border-radius: 3px; padding: 0 2px;
}
/* Örnek bloğu bir düğmenin ardında durur: açıklama metni formu ekranın
   aşağısına itiyordu, oysa örneklere bir kez bakılıp bir daha
   dönülmüyor. <details> kullanılıyor -- açılıp kapanması tarayıcının
   kendi işi, JavaScript gerekmiyor. */
.ornek-kutu { margin-top: 6px; }
.ornek-kutu > summary {
  display: inline-block; cursor: pointer; user-select: none;
  font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px;
  list-style: none;
}
.ornek-kutu > summary::-webkit-details-marker { display: none; }
.ornek-kutu > summary::before { content: "▸ "; }
.ornek-kutu[open] > summary::before { content: "▾ "; }
.ornek-kutu > summary:hover { border-color: var(--primary); }
.ornek-kutu[open] { padding-bottom: 4px; }

.ornek-kip {
  font-size: 11px; color: var(--text-muted);
  min-width: 86px; text-align: right;
}
.ornek-tutar   { color: var(--uzeri-yesil); font-weight: 600; }
.ornek-tutmaz  { color: var(--uzeri-kirmizi); font-weight: 600; }

/* Uzun metinler tabloda tamamen kaybolmasin: iki satira kadar gosterilir,
   tamami baslik (title) olarak da durur. Hata mesajlari gibi kritik
   bilgiler tek satirda kirpilinca anlamini yitiriyordu. */
.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  line-height: 15px;
}
table.data td.wrap { white-space: normal; word-break: break-word; }
table.data tr.tiklanir { cursor: pointer; }
table.data tr.tiklanir:hover { background: var(--primary-soft); }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.check input { width: auto; height: auto; }
.form-actions { display: flex; gap: 8px; padding-top: 4px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
fieldset legend { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 0 6px; }

/* tablo icindeki kompakt kontroller - kendi aralarinda hizali kalir */
select.sm, input.sm { height: var(--control-h-sm); font-size: 12.5px; }

/* ------------------------------------------------------------------
 * FORM GENISLIGI
 *
 * Form kartlari sabit bir max-width ile yarim sayfada duruyordu; genis
 * ekranda sagda kocaman bos alan kaliyordu. Kart artik serbest.
 *
 * Ama kart genisleyince GRID DISINDA kalan tek bir alan da genisler ve
 * 2000px'lik bir metin kutusu okunmaz olur. Bu yuzden sinir alana
 * konuyor, karta degil:
 *
 *   grid disindaki alan -> 520px (okunabilir genislik)
 *   grid icindeki alan  -> serbest; grid zaten sutun sayisini
 *                          genislige gore ayarliyor (auto-fit)
 *
 * textarea disarida birakildi: domain listesi, aciklama gibi uzun
 * metinlerde genislik ise yariyor.
 * ------------------------------------------------------------------ */
.card-body .form-row > input:not([type=checkbox]):not([type=radio]),
.card-body .form-row > select {
  max-width: 520px;
}
.card-body .form-grid .form-row > input,
.card-body .form-grid .form-row > select {
  max-width: none;
}

/* arama / filtre satiri
 *
 * Tek sinif: .toolbar. Bir ara ucuncu bir ad (.filtre-satiri) kullanilmis
 * ama karsiligi hic yazilmamisti -- arama kutusu bicimsiz kaliyordu.
 * Ayri bir kural eklemek yerine o gorunumler bu sinifa alindi; iki ad
 * zamanla birbirinden ayrilmasin.
 */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar > * { margin: 0; }

/* ŞERİT İÇİNDE KENDİ SATIRINI AÇAN GRUP.
   flex-basis:100% şeritte bir satır sonu demek: öge kendi satırına
   iner ve sonrasındakiler bir alt satıra geçer. Böylece "neye
   bakıyorum" kontrolleri ile "listeyi ne kadar daraltıyorum"
   kontrolleri ayrı satırlarda okunuyor.

   MARGIN KURALI TEKRARLANIYOR: yukarıdaki `.toolbar > *` yalnızca
   DOĞRUDAN çocuklara işliyor; bu sarmalayıcının içindeki etiketler
   artık doğrudan çocuk değil ve kendi margin'lerini geri alırlardı.
   Yükseklik eşitlemesi (.toolbar input / .btn) soyundan gelen seçici
   olduğu için burada da geçerli.

   BU AD DAHA ÖNCE BAŞKA BİR ŞEY İÇİN TANIMLIYDI VE ÇAKIŞTI.
   Aşağıda `.toolbar .toolbar-satir { flex-basis:100%; height:0 }` diye
   bir kural duruyordu: içerik taşımayan, yalnızca satır sonu zorlayan
   sıfır yükseklikli bir ayırıcı. Hiçbir ekran onu kullanmıyordu --
   ölü bir kuraldı. Ben aynı adı İÇERİK taşıyan bir sarmalayıcı için
   kullandım ve `.toolbar .toolbar-satir` daha özgül olduğu için
   `height: 0` kazandı: satırın içeriği kartın dışına taştı.

   Ölü kural kaldırıldı, ad tek anlama indirildi. Ölü yapılandırmanın
   sessizce zarar vermesi bu projenin en pahalı hata biçimi; bir CSS
   kuralı da bunun dışında değil. */
.toolbar-satir {
  flex-basis: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar-satir > * { margin: 0; }

/* ŞERİTTEKİ HER KONTROL AYNI YÜKSEKLİKTE.
   Arama kutusu 36px, yanındaki "Ara" düğmesi ve açılır liste 30px'ti;
   üçü yan yana basamak gibi duruyordu. Tasarım kuralı: aynı satırdaki
   kutu, liste ve düğme eşit yükseklikte olur. Şeritler kompakt
   olduğu için ölçü küçük olandan alınıyor. */
.toolbar input,
.toolbar select,
.toolbar .btn,
.toolbar .select2-container--default .select2-selection--single,
.baslik-islemler .btn,
.baslik-islemler select,
.baslik-islemler .select2-container--default .select2-selection--single {
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
}
.toolbar input, .toolbar select { font-size: 12.5px; }
.toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--control-h-sm) - 2px);
}
.toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-h-sm) - 2px);
}
.toolbar input[type=text],
.toolbar input[type=search] { width: 260px; }
/* Şeritlerdeki select'ler artık varsayılan olarak içeriğe göre
   genişliyor (bkz. "SELECT VARSAYILANI" yukarıda). Burada yalnızca alt
   sınır var: kısa seçenekli bir kutunun ("Tümü") komşularının yanında
   düğme kadar kalmaması için. */
.toolbar select,
.canli select,
.islem-grubu select { min-width: 140px; }

/* Gonderen -> alici suzgec cifti.
   Genel arama kutusundan dar: ikisi yan yana durup aralarindaki okla tek
   bir soru olusturuyorlar ("sundan buna giden mailler"). Ok, gap'in
   yuttugu bosluga oturmasin diye kendi kenar bosluklari negatif. */
.toolbar input[type=text].suzgec-yon { width: 190px; }
.toolbar .suzgec-ok {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 -4px;
  user-select: none;
}
/* Dar ekranda kutular alt alta duser; yatay ok o zaman yaniltici olur. */
@media (max-width: 720px) {
  .toolbar input[type=text].suzgec-yon { width: 100%; }
  .toolbar .suzgec-ok { display: none; }
}


/* ---------------------------------------------------------------- bildirimler */
.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid;
}
.flash-ok    { background: var(--success-soft); border-color: var(--cizgi-yesil); color: var(--uzeri-yesil2); }
.flash-error { background: var(--danger-soft);  border-color: var(--cizgi-kirmizi); color: var(--uzeri-kirmizi); }
.flash-info  { background: var(--primary-soft); border-color: var(--cizgi-mavi); color: var(--uzeri-mavi); }
/* "Kaydedildi AMA bir sorun var" mesajları: işlem başarılı olduğu için
   kırmızı hata kutusu yanlış, yeşil onay kutusu eksik kalıyordu. */
.flash-uyari { background: var(--warning-soft); border-color: var(--cizgi-sari); color: var(--warning-dark); }

.notice {
  background: var(--primary-soft);
  border: 1px solid var(--cizgi-mavi);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--uzeri-mavi);
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------- giris ekrani */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar);
  padding: 20px;
}
.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.login-box h1 { margin: 0 0 3px; font-size: 19px; font-weight: 600; }

/* SERBEST BIRAKMA SAYFASI — giriş sayfasının kabuğunu kullanır ama
   içinde bir tablo var; 380px'lik giriş kutusu dar kalıyordu.
   Ortalamayı .login-wrap yapıyor, buradaki tek iş genişlik. */
/* GENİŞLİK DÜĞMELERE GÖRE: "Serbest bırak ve bu göndericiyi güvenilir
   listeye ekle" + "Sadece bu seferlik serbest bırak" yan yana ancak bu
   genişlikte sığıyor. 620px'te ikisi alt alta düşüyordu -- metinler
   kullanıcının kendi seçtiği sözler, kısaltmak yerine kutu büyüdü. */
.serbest-kutu { width: 100%; max-width: 780px; }
/* DÜĞMELER SATIRI DOLDURUR.
   Metinlerine göre boyutlandıklarında sağda büyük bir boşluk kalıyordu.
   flex-grow ile artan yer ikisine PAYLAŞTIRILIYOR; taban genişlik hâlâ
   metin olduğu için uzun etiket sıkışıp ortadan bölünmüyor -- eşit
   %50'ye zorlasaydık uzun olan iki satıra düşerdi. */
.serbest-kutu .form-actions { align-items: stretch; }
.serbest-kutu .form-actions .btn { flex: 1 1 auto; white-space: nowrap; }
/* Dar ekranda tek sütuna iner ve metin sarabilsin: telefonda 780px
   yok, orada yan yana ısrar etmek taşma demek. */
@media (max-width: 720px) {
  .serbest-kutu .form-actions { flex-direction: column; align-items: stretch; }
  .serbest-kutu .form-actions .btn { white-space: normal; }
}
/* KARTIN DIŞINDAKİ YAZI KOYU ZEMİNDE KALIYOR.
   .login-wrap arka planı koyu (--sidebar); .hint'in gri tonu orada
   neredeyse görünmüyordu ve "Panele git" bağlantısı kayboluyordu.
   Yalnızca kartın DIŞINDAKİ metin açılıyor -- kart içindekiler açık
   zeminde, onlara dokunmak ters etki yapardı. */
/* Kartın altındaki satır .hint sınıfını kullanıyor ama tek başına
   duran bir çıkış bağlantısı; ipucu yazısı ölçüsünde kalınca hem
   küçük hem sönük görünüyordu. */
.serbest-kutu > .hint { color: rgba(255, 255, 255, .62); font-size: 14px; }
.serbest-kutu > .hint a { color: #fff; text-decoration: underline;
  font-size: 15px; font-weight: 500; }
.serbest-kutu > .hint a:hover { color: var(--primary-soft); }
.serbest-kutu .card { margin: 0; }
/* Dar ekranda tablo taşmasın: hücreler daralır, sayfa yana kaymaz. */
@media (max-width: 660px) {
  .serbest-kutu table.data th { width: auto; }
}
.login-box .sub { color: var(--text-muted); font-size: 12.5px; margin-bottom: 22px; }
.login-box .btn { width: 100%; justify-content: center; height: 36px; }

/* ---------------------------------------------------------------- yardimcilar */
.muted { color: var(--text-muted); }
.mono  { font-family: var(--mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  align-items: center;
}
.pagination a, .pagination .cur {
  min-width: 30px;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { background: var(--primary-soft); border-color: var(--primary); }
.pagination .cur { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
/* Ok ve "…" kutu gibi durmasin. */
.pagination .ok { font-size: 14px; line-height: 1; padding: 4px 9px; }
.pagination .bosluk { padding: 4px 2px; color: var(--text-soluk); border: 0; }
/* Kacinci kayitlar goruntuleniyor — sagda, cerceve yok. */
.pagination .sayfa-bilgi { margin-left: auto; border: 0; padding: 4px 0; color: var(--secondary); }
/* Sayfa basina kayit secicisi — bilgi metninin sagi. */
.pagination .sayfa-boyu { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; }
.pagination .sayfa-boyu label { color: var(--text-muted); font-size: 12px; }
.pagination .sayfa-boyu select {
  padding: 3px 26px 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.pagination .sayfa-boyu select:hover { border-color: var(--primary); }

@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .sidebar-brand .marka-ad, .sidebar-nav a span, .sidebar-foot .who,
  .sidebar-foot .role, .sidebar-nav .nav-sep { display: none; }
  /* Dar kenar cubugunda arama kutusuna yer yok; menu etiketleri de gizli
     oldugu icin arayacak metin zaten gorunmuyor. */
  .menu-ara, .menu-ara-bos { display: none; }
  .sidebar-brand { justify-content: center; padding: 16px 0; }
  .sidebar-nav a { justify-content: center; padding: 11px 0; }
  .main { padding: 16px; }
}


/* =====================================================================
   Select2 - varsayilan stilleri panelin olculerine oturtulur.
   Yukseklikler --control-h uzerinden gelir; select ile buton her yerde
   ayni hizada durur.
   ===================================================================== */

.select2-container { vertical-align: middle; }

/* SELECT2 IZGARAYI TAKİP ETSİN.
   select2 kurulurken genişliği PİKSEL olarak hesaplayıp satır içi
   stile yazıyor ve kabı sonradan yeniden boyutlanırsa güncellemiyor.
   Sonuç: gizli bir sütun görünür olunca ızgara 3 sütuna geçiyor ama
   select eski (geniş) ölçüsünde kalıp yan sütunun üstüne biniyordu.
   "!important" şart: satır içi stili ancak o ezer. */
.form-row > .select2-container { width: 100% !important; max-width: 100%; }

.select2-container--default .select2-selection--single {
  height: var(--control-h);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: calc(var(--control-h) - 2px);
  line-height: calc(var(--control-h) - 2px);
  padding-left: 10px;
  padding-right: 28px;
  font-size: 13px;
  color: var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-h) - 2px);
  right: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted);
}

/* kompakt varyant - tablo icinde */
.select2-container.s2-sm .select2-selection--single { height: var(--control-h-sm); }
.select2-container.s2-sm .select2-selection--single .select2-selection__rendered {
  height: calc(var(--control-h-sm) - 2px);
  line-height: calc(var(--control-h-sm) - 2px);
  font-size: 12.5px;
}
.select2-container.s2-sm .select2-selection--single .select2-selection__arrow {
  height: calc(var(--control-h-sm) - 2px);
}

/* ------------------------------------------------------------------
 * COKLU SECIM (select2 multiple)
 *
 * Buradaki ezmelerin tamami --single icin yazilmisti; cunku filter'da
 * coklu secim hic kullanilmamisti. Guard'da bilgi islem kullanicisina
 * alan adi atarken gerekti ve kutu select2'nin HAM varsayilan
 * gorunumuyle ciziliyordu: farkli yukseklik, farkli kenarlik, farkli
 * yazi tipi -- yanindaki kutularla hicbir ilgisi yok.
 *
 * Tekli secimle ayni govde, icindeki secimler ETIKET olarak.
 * ================================================================== */
.select2-container--default .select2-selection--multiple {
  min-height: var(--control-h);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 6px 0;
  /* Cok sayida secimde kutu sonsuz uzamasin: 4 satirdan sonra kaydirir.
     500 alan adindan 40 tanesini secen bir bayide form ekrandan tasardi. */
  max-height: calc(var(--control-h) * 4);
  overflow-y: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
  line-height: normal;
}
.select2-container--default .select2-selection--multiple li { margin: 0; }

/* Secilen her deger bir etiket. Rozetlerle ayni dil: yumusak zemin,
   koyu yazi, yuvarlak kose.

   DIKKAT -- select2 4.1.0'da silme dugmesi MUTLAK KONUMLU:
     .select2-selection__choice__remove { position:absolute; left:0; top:0 }
   ve etikete bunun icin padding-left:20px veriliyor. Akis disinda oldugu
   icin `order` ona HIC etki etmiyor; carpi solda ve yukarida takili
   kaliyordu. Once order ile sagda alacagimi sanmistim, calismama sebebi
   buydu. Cozum: dugmeyi normal akisa geri almak (position:static) ve
   etiketin ayrilmis sol bosluguyla select2'nin cizdigi ayrac cizgisini
   temizlemek. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: static;             /* mutlak dugme icin ayrilmis baglam gereksiz */
  margin: 3px 0;
  padding: 2px 8px;             /* select2'nin padding-left:20px'i yerine */
  font-size: 12px;
  font-family: var(--mono);
  background: var(--primary-soft);
  border: 1px solid rgba(37, 99, 235, .25);
  border-radius: 16px;
  color: var(--primary-dark);
  max-width: 100%;
  overflow: hidden;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding: 0;                   /* bosluk artik gap'ten geliyor */
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  /* ASIL DUZELTME: select2'nin position:absolute'unu bozmak.
     'static' yerine 'relative' -- ikisi de dugmeyi akisa geri sokar
     (yani order calisir) ama relative, ustune 1px'lik kaydirma
     yapmaya da izin verir.

     NEDEN 1px YUKARI: '×' bir matematik isareti ve yazi tipinde
     matematik ekseninde oturuyor; kutusu dikeyde tam ortalanmis olsa
     bile goz onu harflerin optik merkezinden bir tik asagida goruyor.
     Kutuyu degil, GLIFI hizaliyoruz. */
  position: relative;
  top: -1px;
  order: 2;                     /* metinden sonra, yani sagda */
  margin: 0;
  padding: 0 1px;
  line-height: 1;
  border: 0;                    /* select2 sola ayrac cizgisi koyuyor */
  border-radius: 0;
  background: none;
  color: var(--primary-dark);
  opacity: .55;
  font-size: 15px;
  font-weight: 700;
  /* select2 mutlak konum icin left:0 yaziyor; relative'de bu bir
     KAYDIRMA anlamina gelir, sifirlanmali. */
  left: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background: none;             /* select2'nin gri kutusu etiketi bozuyor */
  opacity: 1;
  color: var(--danger);
  outline: none;
}

/* Icine yazarak arama alani: etiketlerle ayni hizada dursun. */
.select2-container--default .select2-search--inline .select2-search__field {
  margin: 3px 0;
  height: 22px;
  line-height: 22px;
  font-size: 13px;
  font-family: var(--font);
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--text-muted);
}

/* odak gorunumu diger alanlarla ayni */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}

/* acilir liste */
.select2-dropdown {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px rgba(0,0,0,.05);
}
.select2-container--default .select2-results__option {
  font-size: 13px;
  padding: 6px 10px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--primary);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--primary-soft);
  color: var(--text);
}
.select2-search--dropdown .select2-search__field {
  height: var(--control-h-sm);
  padding: 0 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--primary);
}

/* ---------------------------------------------- select2: KOYU TEMA BOŞLUKLARI
   Select2 kendi DOM'unu <body>'ye basıyor ve vendor CSS'i sabit renk
   taşıyor. Belirteç taramam yalnızca style.css'i kapsadığı için bu
   kurallar gözden kaçmıştı; koyu temada açılır liste BEYAZ kalıyor,
   üzerindeki yazı gövdeden gelen AÇIK renkte oluyordu -- yani okunmaz.

   Aşağıdakiler vendor'daki tek tek şu bildirimleri eziyor:
     .select2-dropdown            background-color: white
     .select2-selection__rendered color: #444
     .select2-results__option     (renk gövdeden miras, panel beyaz)
     .select2-selection__choice   background #e4e4e4, border #aaa
     --disabled                   background #eee / color #999
   Guard'ın önceki select2 kuralları zemin ve kenarlığı zaten
   belirteçlemişti; eksik olanlar yalnızca bunlar.

   ARAMA KUTUSU DA: vendor ona zemin vermiyor, tarayıcı varsayılanı
   beyaz kalıyordu (ekran görüntüsünde beyaz şerit olarak görünen şey). */
.select2-dropdown {
  background: var(--surface);
  color: var(--text);
}
.select2-container--default .select2-results__option { color: var(--text); }
.select2-container--default .select2-results__option--disabled { color: var(--text-soluk); }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text);
}
.select2-search--dropdown .select2-search__field {
  background: var(--surface);
  color: var(--text);
}
/* Çoklu seçim etiketleri (alan adı atama kutusu). */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary-soft);
  border-color: var(--cizgi-mavi);
  color: var(--uzeri-mavi);
}
.select2-container--default .select2-selection--multiple
  .select2-selection__choice__remove { border-right-color: var(--cizgi-mavi); }
.select2-container--default .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  background: var(--satir-vurgu);
  color: var(--text);
}
/* Kapalı (disabled) kutu: vendor #eee veriyor. */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--yuzey2);
  color: var(--text-muted);
}

/* VENDOR ÖZGÜLLÜĞÜNE EŞİTLENEN ÜÇ KURAL.
   Aşağıdaki üçünde vendor seçicisi benim kuralımdan DAHA ÖZGÜL, yani
   ezilmiyordu -- kural yazmak yetmiyor, özgüllüğü de tutmak gerekiyor.

   1) --highlighted.--selectable: vendor üç sınıf taşıyor
      (.container--default + --highlighted + --selectable), benim
      kuralım iki. Sonuç: üzerine gelinen satır guard'ın --primary'si
      değil select2'nin #5897fb mavisiydi. Açık temada ikisi de mavi
      olduğu için görünmüyordu; koyu temada parlak mavi olarak çıkıyor.
   2) --selected: vendor #ddd veriyor. Benim [aria-selected=true]
      kuralım özgüllükte kazanıyor ama select2 her iki işareti birlikte
      koymuyor olabilir; açıkça ezmek belirsizliği bitiriyor.
   3) Ok işareti kenarlık üçgeniyle çiziliyor ve vendor #888 sabitliyor.
      Orta gri iki temada da görünür, ama belirteçten gelmesi daha
      doğru. */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary);
  color: #fff;
}
.select2-container--default .select2-results__option--selected {
  background: var(--primary-soft);
  color: var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-muted) transparent;
}


/* =====================================================================
   Anlik ipucu — tarayicinin bekleyen "title" ipucunun yerine gecer.
   Body'ye eklendigi icin tablo kaydirmasinda kesilmez.
   ===================================================================== */
.ipucu-kutu {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: 460px;
  padding: 8px 11px;
  background: var(--sidebar);
  color: #f1f5f9;
  font-size: 12px;
  line-height: 17px;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
}
/* HTML bicimli ipucu: liste ve karsilastirmalar icin kucuk bir tablo. */
.ipucu-kutu.ipucu-html { max-width: 560px; white-space: normal; padding: 10px 12px; }
.ipucu-kutu .ipucu-baslik {
  margin-bottom: 7px;
  font-weight: 700;
  font-size: 11.5px;
  color: #cbd5e1;
  letter-spacing: .02em;
}
.ipucu-kutu table { border-collapse: collapse; width: 100%; }
.ipucu-kutu th {
  padding: 3px 10px 5px 0;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}
.ipucu-kutu td {
  padding: 4px 10px 4px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ipucu-kutu tr:last-child td { border-bottom: 0; }
.ipucu-kutu td:last-child, .ipucu-kutu th:last-child { padding-right: 0; }
.ipucu-kutu .ipucu-sag { text-align: right; white-space: nowrap; }
.ipucu-kutu .ipucu-deger { font-size: 12.5px; word-break: break-all; }
.ipucu-kutu .ipucu-alt {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 11.5px;
  color: #cbd5e1;
}
/* Mod harfi ve durum renkleri koyu zeminde okunur kalsın. */
/* Aktif kural: liste rozetleriyle aynı dil (yeşil A). Eskiden kırmızı
   "U" idi; kırmızı burada yanlış sinyal veriyordu -- kuralın aktif
   olması bir sorun değil, olması gereken durum. */
.ipucu-kutu .im-a { color: #6ee7b7; font-weight: 700; }
.ipucu-kutu .im-i { color: #fcd34d; font-weight: 700; }
.ipucu-kutu .im-ok { color: #6ee7b7; }
.ipucu-kutu .im-bad { color: #fca5a5; }
.ipucu-kutu .im-soluk { color: #94a3b8; }

[data-ipucu], [data-ipucu-html] { cursor: help; }
table.data td[data-ipucu], table.data td[data-ipucu-html] { cursor: inherit; }


/* =====================================================================
   Ac/kapa anahtari (toggle)
   Kural ayarlarinda iki anahtar yan yana kullanilir:
   "Durum" kuralin calisip calismadigini, "Izleme modu" ise calisiyorsa
   yalnizca gozlem mi yaptigini belirler.
   ===================================================================== */
.anahtar-grup {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
}

.anahtar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }

.anahtar .yol {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background .15s;
}
.anahtar .yol::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
.anahtar input:checked + .yol::after { transform: translateX(18px); }
.anahtar input:focus-visible + .yol { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Durum anahtari yesil, izleme anahtari turuncu — renk ne yaptigini anlatir */
.anahtar.durum  input:checked + .yol { background: var(--success); }
.anahtar.izleme input:checked + .yol { background: var(--warning); }

.anahtar .ad    { font-size: 13px; font-weight: 500; color: var(--text); }
.anahtar .deger { font-size: 12px; color: var(--text-muted); min-width: 42px; }

/* Kural kapaliyken izleme anahtari anlamsizdir */
.anahtar.pasif { opacity: .45; cursor: not-allowed; }
.anahtar.pasif input { pointer-events: none; }

.mod-aciklama { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 17px; }
.mod-aciklama strong { color: var(--text); }

/* Temizlik işareti: suçlama değil, puanı düşüren kural. */
.kapsam-kredi { background: var(--success-soft); color: var(--uzeri-yesil); }
.puan-kredi   { color: var(--uzeri-yesil); font-weight: 600; }

/* ------------------------------------------------------------------
   Yüzen kaydet butonu (genel ayarlar)

   Sayfa uzun; kullanıcı hangi kuralın yanındaysa oradan kaydedebilsin.
   Sayfanın en altındaki asıl düğme görünürken gizlenir.
------------------------------------------------------------------ */
.yuzen-kaydet {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .15s, opacity .15s, box-shadow .15s;
}
.yuzen-kaydet:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.yuzen-kaydet:active { transform: translateY(0); }

/* Kaydedilmemiş değişiklik varken dikkat çeker. */
.yuzen-kaydet.degisti { background: var(--warning); color: #fff; }

/* Yüzen düğme yıkıcı ya da olumlu bir işi temsil ediyorsa rengini
   ondan alır. Bayes eğitiminde "spam olarak öğret" ile "temiz olarak
   öğret" aynı görünürse yanlış yığına örnek eklemek kolaylaşır --
   ikisi de tek tıklık ve geri alması ayrı bir iş. */
.yuzen-kaydet.tehlike { background: var(--danger); color: #fff; }
.yuzen-kaydet.iyi     { background: var(--success); color: #fff; }

/* ------------------------------------------------------------------
   YÜZEN İKİ DÜĞME  (Bayes eğitimi)

   Uzun listede aşağı inmeden her iki yönde de öğretilebilmeli:
   karantinaya yanlışlıkla düşmüş bir maili "temiz" öğretmek için
   sayfanın en altına inmek gerekmesin.
------------------------------------------------------------------ */
.yuzen-grup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: opacity .15s, transform .15s;
}
.yuzen-grup.gizli { opacity: 0; pointer-events: none; transform: translateY(8px); }
.yuzen-grup .yuzen-rozet {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.yuzen-dugme {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.yuzen-dugme:hover { transform: translateY(-1px); filter: brightness(1.06); }
.yuzen-dugme.tehlike { background: var(--danger); }
.yuzen-dugme.iyi     { background: var(--success); }
/* Ters sinif SOLUK: beklenen yon bir tiklik kalsin, istisna
   gozle aranarak secilsin. */
.yuzen-dugme.ikincil {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.yuzen-dugme.ikincil:hover { background: var(--bg); color: var(--text); }

@media (max-width: 640px) {
  .yuzen-grup { right: 12px; bottom: 12px; padding: 5px; }
  .yuzen-dugme { padding: 7px 12px; font-size: 12.5px; }
}
.yuzen-rozet {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  font-size: 11.5px;
  font-weight: 600;
}

/* Asıl kaydet düğmesi ekrandayken görünmez ama tıklanamaz da olmalı. */
.yuzen-kaydet.gizli { opacity: 0; pointer-events: none; transform: translateY(8px); }

@media (max-width: 640px) {
  .yuzen-kaydet { right: 12px; bottom: 12px; padding: 10px 14px; }
  .yuzen-kaydet span:not(.yuzen-rozet) { display: none; }
}

/* ------------------------------------------------------------------
   Kural çalışma modu harfi  (U = uygulamada, İ = izlemede, K = kapalı)

   Takılan kural listesinde her kuralın puanının GERÇEKTEN sayılıp
   sayılmadığını tek bakışta gösterir.
------------------------------------------------------------------ */
.mod-harf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
/* Aktif kural YESIL: kirmizi "bir sorun var" demek, oysa kuralin
   uygulanmasi istenen durumdur. Kirmizi rozet, puani sayilan her satiri
   hataymis gibi gosteriyordu. */
.mod-a { background: var(--success-soft); color: var(--uzeri-yesil2); }
.mod-i { background: var(--warning-soft); color: var(--warning); }
.mod-k { background: var(--yuzey2);             color: var(--text-muted); }

/* ==================================================================
   Sayfa basina don
   ==================================================================
   Sag alt kose PAYLASILIYOR: ayarlar sayfasindaki yuzen kaydet dugmesi
   (24px) ve bildirim kutusu (18px) da orada. Cakismayi onlemek icin:
     - yuzen kaydet varsa bu dugme yukari kayar (body.yuzen-var, app.js)
     - bildirimlerin z-index'i (1200) bundan yuksek; anlik cikip
       kayboluyorlar, ustte durmalari dogru
   ================================================================== */
.yukari-cik {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
  /* Gorunurluk opacity ile: [hidden] aninda kaybettirirdi, gecis olmazdi.
     app.js once hidden'i kaldirir, sonra .gorunur ekler. */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, color .15s ease, border-color .15s ease;
}
.yukari-cik.gorunur { opacity: 1; transform: translateY(0); }
.yukari-cik:hover { color: var(--primary); border-color: var(--primary); }
.yukari-cik:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.yukari-cik svg { width: 18px; height: 18px; }

/* Ayarlar sayfasinda yuzen kaydet dugmesi var; ustune bin. */
body.yuzen-var .yukari-cik { bottom: 82px; }

@media (max-width: 720px) {
  .yukari-cik { right: 12px; bottom: 12px; width: 36px; height: 36px; }
  body.yuzen-var .yukari-cik { bottom: 62px; }
}

/* Kaydirma animasyonunu kapatanlar icin gecis de kapanir; JS tarafinda
   ani kaydirma yapilir (bkz. app.js, yukariCikKur). */
@media (prefers-reduced-motion: reduce) {
  .yukari-cik { transition: none; }
}

/* ==================================================================
   Panel (genel durum)
   ================================================================== */

/* Durum bandi: sistem calisiyor mu, son 24 saatte ne oldu. */
.durum-bandi {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--cizgi-yesil);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  background: var(--success-soft);
}
.durum-bandi.sorunlu {
  border-color: var(--cizgi-kirmizi);
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
/* Dikkat ister ama acil degil: ornegin SNDS "engelli" diyor fakat
   teslimatlar geciyor. Kirmizi birakmak kurt masali uretirdi. */
.durum-bandi.uyari {
  border-color: var(--cizgi-sari);
  border-left-color: var(--warning);
  background: var(--warning-soft);
}
.durum-bandi strong { font-size: 14.5px; }
.servis-rozetleri { display: flex; flex-wrap: wrap; gap: 7px; }
.servis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
}
.servis .dot { width: 7px; height: 7px; border-radius: 50%; }
.servis.acik   .dot { background: var(--success); }
.servis.kapali .dot { background: var(--danger); }
.servis.kapali { border-color: var(--cizgi-kirmizi); color: var(--uzeri-kirmizi); font-weight: 600; }

/* Sayi kartlarindaki aciklama satiri. */
.stat .alt { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }

/* Iki sutunlu panel yerlesimi. */
.panel-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) { .panel-ikili { grid-template-columns: 1fr; } }

/* Yapilacak maddesi: ne oldu, sonucu ne, nereye bakilir. */
.yapilacak {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.yapilacak:last-child { border-bottom: 0; padding-bottom: 0; }
.yapilacak:first-child { padding-top: 0; }
.yapilacak .ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.yapilacak .etiket {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.yapilacak.kritik .etiket { background: var(--danger-soft);  color: var(--uzeri-kirmizi); }
.yapilacak.uyari  .etiket { background: var(--warning-soft); color: var(--warning); }
.yapilacak.bilgi  .etiket { background: var(--info-soft);    color: var(--info-dark); }
.yapilacak .btn { flex: 0 0 auto; }

/* Saatlik akis cubuklari. */
.akis { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.akis-sutun {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  cursor: help;
}
.akis-cubuk {
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--success);
  opacity: .75;
  transition: opacity .12s;
}
.akis-sutun:hover .akis-cubuk { opacity: 1; }
.akis-sutun span { margin-top: 5px; font-size: 10px; color: var(--text-soluk); font-variant-numeric: tabular-nums; }

/* Karantinada toplu islem cubugu — secim yapilinca gorunur. */
.toplu-cubuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 10px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-soft);
  font-size: 13px;
}
.toplu-cubuk strong { font-size: 15px; }
.toplu-cubuk .btn { margin-left: 0; }

/* Karantina detayinda mail icerigi. Uzun satirlar sarilir, cok uzun
   govde kutunun icinde kaydirilir — sayfa metrelerce uzamasin. */
.mail-icerik {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--yuzey3);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Baslik yanindaki bilgi simgesi. Aciklama ipucunda durur; basligi
   uzatmadan sutunun ne saydigini kalici olarak anlatir. */
.bilgi-ikonu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.bilgi-ikonu:hover { border-color: var(--primary); color: var(--primary); }

/* Sayi sutunlari: baslik ve deger ayni hizada ortalanir. */
table.data th.orta, table.data td.orta { text-align: center; }
table.data td.orta { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Gecis modu serididir: filtre kapaliyken her sayfanin tepesinde durur.
   Filtrenin kapali oldugunu unutmak, kapatilmasindan cok daha buyuk bir
   risk -- bu yuzden serit kapatilamaz ve dikkat cekici birakilmistir.
   ===================================================================== */
.gecis-serit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--uzeri-kirmizi2);
  font-size: 13.5px;
  line-height: 1.5;
}
.gecis-serit strong { font-weight: 700; }
.gecis-serit > div { flex: 1; }
.gecis-serit a {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--uzeri-kirmizi2);
  text-decoration: underline;
  white-space: nowrap;
}
.gecis-nokta {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: gecis-yanip-sonme 1.4s ease-in-out infinite;
}
@keyframes gecis-yanip-sonme { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* Hareketi rahatsiz edici bulan ya da kapatmis kullanicilar icin
   nokta sabit kalir; renk ve serit zaten yeterince belirgin. */
@media (prefers-reduced-motion: reduce) {
  .gecis-nokta { animation: none; }
}

/* Uyarı tonu: sunucu tarafında bir şeyin bozuk olduğunu söyleyen not.
   Normal "notice" bilgilendirmedir; bu ise eylem ister. */
.notice-warn {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning-dark);
}
.notice-warn code {
  background: rgba(255,255,255,.6);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* =====================================================================
   Sekmeler — aynı içeriğin farklı görünümleri
   ===================================================================== */
.sekme-basliklar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.sekme-baslik {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  padding: 8px 14px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.sekme-baslik:hover { background: var(--bg); color: var(--text); }
.sekme-baslik.aktif {
  background: var(--surface);
  border-color: var(--border);
  border-bottom: 1px solid var(--surface);
  color: var(--primary);
  font-weight: 600;
}
.sekme-baslik:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* =====================================================================
   HTML mail önizlemesi
   Icerik ayri bir cerceve icinde gosterilir; yuksekligi sabit degil,
   kullanici asagi kenardan cekerek buyutebilir -- bulten mailleri cok
   uzun olabiliyor.
   ===================================================================== */
.mail-onizleme {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  resize: vertical;
  height: 560px;
  min-height: 160px;
}
.mail-onizleme iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Liste temizlik formu — açılır kutu ve buton yan yana, eşit yükseklikte. */
.temizlik-formu {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.temizlik-formu select { min-width: 172px; }

/* Teslimat ipucundaki hata metni uzun olabilir: karşı sunucunun tam yanıtı
   gösterilir. Kutu genişler, metin sarar; sütun ne aşırı daralsın ne de
   tabloyu ekran dışına taşısın. */
.ipucu-kutu.ipucu-html { max-width: 720px; }
.ipucu-kutu td .im-bad { display: block; max-width: 340px; white-space: normal;
  overflow-wrap: anywhere; line-height: 1.45; }

/* =====================================================================
   Köşe bildirimi
   Satır işlemleri sayfayı yenilemediği için üstteki bildirim şeridi
   görünmüyor; mesaj kullanıcının olduğu yerde, sağ altta belirir.
   ===================================================================== */
#bildirim-kabi {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(440px, calc(100vw - 36px));
}
.bildirim {
  position: relative;
  padding: 12px 34px 12px 14px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .16);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  animation: bildirim-giris .22s ease-out;
}
.bildirim-ok    { border-left-color: var(--success); background: var(--success-soft); color: var(--uzeri-yesil2); }
.bildirim-info  { border-left-color: var(--primary); background: var(--primary-soft); color: var(--uzeri-mavi); }
.bildirim-error { border-left-color: var(--danger);  background: var(--danger-soft);  color: var(--uzeri-kirmizi); }
.bildirim-cikiyor { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.bildirim-kapat {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  font-size: 17px;
  line-height: 1;
  color: inherit;
  opacity: .55;
  cursor: pointer;
}
.bildirim-kapat:hover { opacity: 1; }
@keyframes bildirim-giris { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* İşlenen satırın akıbeti gözle görülsün: kaybolan solar, güncellenen
   kısa süre vurgulanır. */
.satir-gidiyor {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s, transform .4s;
}
.satir-guncellendi { animation: satir-vurgu 1.6s ease-out; }
@keyframes satir-vurgu {
  0%   { background: var(--warning-soft); }
  100% { background: transparent; }
}
button.mesgul { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .bildirim, .satir-guncellendi { animation: none; }
  .satir-gidiyor { transition: none; }
}

/* =====================================================================
   Karşılığı yazılmamış sınıflar
   Görünümlerde kullanılıyor ama CSS'i hiç yazılmamıştı; kutular ve
   birimler hizasız kalıyordu. Aynı hata .filtre-satiri ile de yaşandı --
   sınıf adı uydurulup tanımı unutulunca ekranda sessizce bozuk duruyor.
   ===================================================================== */

/* Sayı + birim ikilisi: "30" [farklı kişi] yan yana, eşit yükseklikte. */
.birlesik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.birlesik .inp { width: 110px; }
.birlesik .birim { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }

/* Ayar kartlarının altındaki açıklama paragrafı. */
p.ipucu {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
p.ipucu a { color: var(--primary); }

/* Durum bandındaki metin bloğu: rozetle aynı hizada, taşarsa sarar. */
.durum-metin { flex: 1; min-width: 0; line-height: 1.5; }

/* =====================================================================
   Seçim grubu — tablo içinde az seçenekli tercih
   Durumu GÖSTERİR ve DEĞİŞTİRİR: seçili olan doldurulmuş, ötekiler soluk
   ve tıklanabilir. Önce bir rozet + yanında aynı değeri tekrarlayan bir
   select vardı; aynı bilgi iki kez duruyor ve select tablonun içinde
   yer kaplıyordu.
   ===================================================================== */
.secim-grubu {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
/* Süzgeç ölçüsünde tam yuvarlak kenar fazla geliyor: şerit büyüdükçe
   yuvarlaklık da büyüyor ve panelin öteki kutularıyla uyumsuzlaşıyor. */
.secim-grubu.suzgec { border-radius: var(--radius); }
.secim {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border);
  background: none;
  padding: 0 10px;
  height: 24px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.secim:last-child { border-right: 0; }
.secim:hover { background: var(--bg); color: var(--text); }

/* SEÇİLİ OLAN DOLU RENKTE.
   Önce `.secim.aktif` tek başına yalnızca `cursor: default` veriyordu;
   görsel fark `badge-bad` / `badge-warn` / `badge-ok` sınıflarından
   geliyordu. Anlamsal rengi olmayan süzgeçlerde (Her kanıt /
   Güçlü kanıt / İncelenecek) hiçbiri kullanılmadığı için şerit
   tamamen düz görünüyor ve hangi seçeneğin açık olduğu
   anlaşılmıyordu. Rozetli kullanımlar üç sınıflı seçicileriyle bu
   kuralı zaten eziyor. */
.secim.aktif {
  background: var(--primary);
  color: #fff;
  cursor: default;
}

/* ETIKET ILE SAYI ARASINDA BOSLUK.
   `.secim` icinde bir `.tab-sayi` rozeti tasindiginda ikisi bitisik
   duruyordu ve rozet yaziyi eziyordu ("Tümü1,199"). Sekme seridinde
   sorun yok cunku orada aralarinda bosluk karakteri var; burada
   ogeler dogrudan yan yana. */
.secim { gap: 6px; }

/* Secili seritte rozetin acik gri zemini mavinin uzerinde okunmuyor. */
.secim.aktif .tab-sayi { background: rgba(255, 255, 255, .28); color: #fff; }
.secim.aktif:hover { background: var(--primary); color: #fff; filter: none; }

/* Şeridin kendisi de metnin içinde kaybolmasın: beyaz kart üstünde
   beyaz zeminli bir şerit yalnızca ince çerçevesiyle var oluyordu. */
.secim-grubu { background: var(--bg); }
/* Seçili olan, rozetlerle aynı renk dilini kullanır. */
.secim.aktif.badge-bad  { background: var(--danger-soft);  color: var(--uzeri-kirmizi); }
.secim.aktif.badge-warn { background: var(--warning-soft); color: var(--warning); }
.secim.aktif.badge-ok   { background: var(--success-soft); color: var(--uzeri-yesil); }
.secim:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Şerit <button> ile doğdu; süzgeç olarak kullanılınca öğeler <a> oluyor.
   Bağlantının kendi varsayılanları (satır içi kutu, altı çizili) şeridi
   bozar — burada eşitleniyor. */
a.secim {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
a.secim:hover { text-decoration: none; }

/* Süzgeç ölçüsü.
   Şerit tablo hücresi için 24px tasarlandı; sayfa üstünde bir süzgeç
   olarak kullanılınca fark edilmiyordu. Bu ölçü öteki form
   kontrolleriyle aynı yüksekliktedir (--control-h). */
.secim-grubu.suzgec { height: auto; }
.secim-grubu.suzgec .secim {
  height: var(--control-h);
  padding: 0 14px;
  font-size: 12.5px;
  gap: 7px;
}
/* Sayı, etiketle birleşik görünmesin. */
.secim-grubu.suzgec .secim .sayi {
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--thead);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.secim-grubu.suzgec .secim.aktif .sayi {
  background: rgba(255, 255, 255, .6);
  color: inherit;
}

/* Süzgeç şeridi — açıklama metniyle tablo arasında kendi alanı.
   İkisinin arasına boşluksuz sıkıştırıldığında fark edilmiyordu. */
.suzgec-serit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.suzgec-baslik {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- İçerik penceresi ----
   Tabloda kırpılmış metin bir düğmedir; tıklanınca tamamı pencerede
   açılır. Düğme satır içinde metin gibi durmalı, düğme gibi değil. */
.icerik-ac {
  display: block;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted var(--border-strong);
}
.icerik-ac:hover { color: var(--primary); border-bottom-color: var(--primary); }
.icerik-ac:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.pencere {
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .22);
}
.pencere::backdrop { background: rgba(15, 23, 42, .45); }

.pencere-bas {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.pencere-baslik { margin: 0; font-size: 15px; line-height: 1.35; }
.pencere-alt { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); }
.pencere-kapat {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}
.pencere-kapat:hover { color: var(--text); }

.pencere-govde {
  padding: 14px 16px;
  max-height: 52vh;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pencere-dip {
  margin: 0;
  padding: 11px 16px 13px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Mail detay penceresi ----
   Yeni sayfa açılmış gibi görünür ama liste arkada bekler: kenar
   çubuğunun sağındaki alanı tam kaplar, kendi içinde kayar. Kenar
   çubuğu görünür kalır ki menü hep elinizin altında olsun. */
.detay-pencere {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--sidebar-w);
  z-index: 60;
  display: none;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg);
  box-shadow: -1px 0 0 var(--border), 0 0 24px rgba(15, 23, 42, .10);
}
.detay-pencere.acik { display: block; }

/* Arkadaki liste kaymasın: pencere açıkken sayfanın kendi kaydırması
   kilitlenir, kaydırılan yer pencerenin içidir. */
body.pencere-acik { overflow: hidden; }

/* Gövde, olağan sayfa içeriğiyle aynı genişlikte aksın: pencere
   içindeki kartlar liste sayfasındakilerle aynı ölçüde dursun. */
.detay-govde { min-width: 0; }

.detay-yukleniyor {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .detay-pencere { left: 64px; padding: 16px; }
}

/* ---- Son 24 saat: saatlik gönderim ----
   Kütüphane yok; çubuklar ve ısı hücreleri düz CSS. Grafik dar ekranda
   kendi içinde kayar, sayfayı yana kaydırmaz. */
.saat-grafik {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  padding: 8px 0 0;
  overflow-x: auto;
}
.saat-sutun {
  flex: 1 1 0;
  min-width: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  cursor: default;
}
.saat-cubuk {
  width: 100%;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: background .12s;
}
.saat-sutun:hover .saat-cubuk { background: var(--primary-dark); }
.saat-etiket {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Isı satırı: 24 hücre, koyuluk o saatteki yoğunluk. */
.tablo-kaydir { overflow-x: auto; }
.isi-satir { display: flex; gap: 2px; min-width: 240px; }
.isi-hucre {
  flex: 1 1 0;
  min-width: 8px;
  height: 18px;
  border-radius: 2px;
  background: var(--border);
}
.isi-0 { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.isi-1 { background: var(--isi-1); }
.isi-2 { background: var(--isi-2); }
.isi-3 { background: var(--isi-3); }
.isi-4 { background: var(--primary-dark); }
.isi-tablo td { vertical-align: middle; }

/* Ham hata metni — kırpılmadan, seçilip kopyalanabilir şekilde.
   Rapordaki satırda yer kazanmak için kısaltılıyor; karar ekranında
   tamamı görünmeli. */
/* Kaydırılabilir hata kutusu.
 *
 * Uzun SMTP yanıtları dar bir sütunda on üç satıra yayılıyor ve tablo
 * satırını dört yüz piksele çıkarıyordu. Metni KIRPMAK çözüm değil:
 * engel mesajıyla kutu-yok mesajını ayıran ayrıntı çoğu zaman
 * cümlenin sonunda kalıyor, kesilen yer tam da okunması gereken yer.
 *
 * Bu yüzden kutu kısaltılmıyor, KAYDIRILIYOR: satır yüksekliği sabit
 * kalıyor, metnin tamamı da yerinde duruyor. */
.hata-metni.kaydirmali {
  max-height: 108px;
  overflow-y: auto;
}

.hata-metni {
  padding: 10px 12px;
  background: var(--bg);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Smart sunucu raporu: gün gün seyir ----
   Çubuğun yüksekliği o günün hacmi, kırmızı kısmı ulaşmayanlar. İki
   boyut tek çubukta: hacim düşerken oran artıyorsa bu görünür. */
.seyir-grafik {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
  padding: 8px 0 0;
  overflow-x: auto;
}
.seyir-sutun {
  flex: 1 1 0;
  min-width: 38px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
}
.seyir-oran {
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.seyir-oran.bos { color: var(--text-muted); font-weight: 400; }

/* Yol, çubuğun oturduğu tam yükseklikteki alan. */
.seyir-yol {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.seyir-cubuk {
  width: 100%;
  min-height: 2px;
  background: var(--success);
  border-radius: 2px 2px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
/* Kırmızı kısım ÜSTTE: göz önce ona takılsın. */
.seyir-kotu { width: 100%; background: var(--danger); }
.seyir-sutun:hover .seyir-cubuk { filter: brightness(.92); }

.seyir-etiket {
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Renk anahtarı */
.seyir-anahtar {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin: 0 3px 0 10px;
  vertical-align: -1px;
}
.seyir-anahtar-iyi  { background: var(--success); margin-left: 0; }
.seyir-anahtar-kotu { background: var(--danger); }

/* Tek cümlelik özet: iyileşiyor mu? */
.seyir-ozet {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
  border-left: 3px solid var(--border-strong);
  background: var(--bg);
  font-size: 13px;
}
.seyir-iyi  { border-left-color: var(--success); background: var(--success-soft); color: var(--uzeri-yesil2); }
.seyir-kotu { border-left-color: var(--danger);  background: var(--danger-soft);  color: var(--uzeri-kirmizi); }

/* Ek olarak gelen resim — data: URI ile gömülü, dışarıya istek gitmez.
   Büyük resim paneli taşırmasın diye sınırlanır ve kendi içinde kayar. */
.ek-resim {
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 520px;
  overflow: auto;
  text-align: center;
}
.ek-resim img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--surface);
}

/* PDF ve metin eki önizlemesi. İçerik ayrı adresten "sandbox"
   başlığıyla gelir; iframe ayrıca sandbox özniteliği taşır. */
.ek-onizleme {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.ek-onizleme object {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  background: var(--surface);
}
/* Tarayıcı eki açamazsa <object> içindeki bu metin görünür. */
.ek-yedek {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* Değişen değer bir an vurgulanır. Saniyede bir tazelenen bir ekranda
   hangi sayının kıpırdadığını yakalamak yoksa neredeyse imkânsız. */
@keyframes mf-degisti {
  from { background-color: rgba(59, 130, 246, .22); }
  to   { background-color: transparent; }
}
.degisti { animation: mf-degisti 1s ease-out; border-radius: 3px; }

/* Ölçü çubuğu yeni değerine kayarak gider; geçiş .olcu-dolu üzerinde
   zaten tanımlı, burada yalnızca yumuşatması ayarlanıyor. */
.olcu-dolu { transition: width .45s cubic-bezier(.4, 0, .2, 1), background-color .3s; }

@media (prefers-reduced-motion: reduce) {
  .degisti { animation: none; }
  .olcu-dolu { transition: none; }
}

/* "Geçen mail" kartının alt dökümü: karantina | bloklanan | reddedilen.
   Ayıraç kenarlıkla çizilir, düz "|" karakteriyle değil -- karakter satır
   sonuna düşünce tek başına kalıyor ve satır kaydırmada kopuyordu. */
.gecen-dokum { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.gecen-dokum span + span { border-left: 1px solid var(--border); padding-left: 8px; }
.gecen-dokum strong { font-family: var(--mono); font-weight: 600; color: var(--text); }

/* Alıcı Yönlendirmeleri'ndeki teslimat sayısı: tıklanınca detay açılır.
   Bağlantı olduğu ilk bakışta belli olmalı, ama sayı da okunaklı kalmalı --
   bu yüzden renk değil, üzerine gelince beliren zemin ve alt çizgi
   kullanıldı. Sayıların kendi renkleri (yeşil/kırmızı) durumu taşıyor,
   onları bağlantı mavisiyle ezmek bilgiyi yok ederdi. */
a.teslimat-bag {
  display: block;
  margin: -6px -8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background .12s;
}
/* Satirin kendisi zaten hover'da griye donuyor (#e2e8f0). Bu yuzden
   hucre TERSINE, beyaza donuyor: renk eklemek yerine cikararak ayrisiyor
   ve "burasi ayri bir tiklama alani" hissi veriyor. */
a.teslimat-bag:hover {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
a.teslimat-bag:hover .hint { text-decoration: underline; }
a.teslimat-bag:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Sayıya tıklanıp süzgeç uygulanan satır: aşağıdaki tablonun neyi
   gösterdiği yukarıdan da okunsun. */
tr.secili-satir > td { background: var(--primary-soft2); }

/* Alan adı kontrolünün açıldığı satır. Kendi satırının devamı olduğu
   belli olsun diye üst çizgisi yok ve zemini hafifçe çekilmiş. */
tr.kontrol-satiri > td { background: var(--bg); border-top: 0; padding: 10px 14px 14px; }
tr.kontrol-satiri:hover > td { background: var(--bg); }

/* "Zaten yapılmış" durumunu anlatan devre dışı buton.
   Rozet yerine buton kullanılıyor: aynı sütunda kimi satırda düğme kimi
   satırda rozet olunca sütun dağılmış görünüyordu. Aynı yeri aynı şekil
   tutuyor, yalnız bu tıklanmıyor.

   cursor:default -- disabled butonun varsayılan imleci "yasak" işareti
   çıkarıyor, oysa burada bir yasak yok: iş zaten yapılmış. */
.btn-yapildi[disabled] {
  background: var(--thead);
  color: var(--text-muted);
  border-color: var(--border);
  opacity: .75;
  cursor: default;
}

/* Hata metni tablo hücresinde: tam metin gösteriliyor ama sütunun tabloyu
   ezmesi de istenmiyor. Genişlik iç kutuya verilir -- hücreye verilirse
   tablo düzeni yok sayar (table-layout: auto). */
table.data .hata-metni.dar { max-width: 560px; padding: 6px 8px; }

/* Kurulum çıktısı: terminal dökümü. Uzun olabildiği için kendi içinde
   kaydırılır -- sayfayı uzatmak, ilerlemeyi izlemeyi zorlaştırıyordu. */
.kurulum-cikti {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: 12px 14px;
  background: var(--thead);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* İŞLEM GÜNLÜĞÜ — dikkat isteyen satır.
   Yetki/kapsam ihlali, kilitlenen hesap, reddedilen talep gibi satırlar
   düz listede diğerleriyle aynı görünüyordu; günlüğe bakma sebebi çoğu
   zaman tam olarak bu satırları aramak. Rozet tek başına yeterli değil:
   göz önce satırın zeminini tarıyor, rozeti sonra okuyor.
   Zemin ÇOK hafif tutuldu; uyarı her satırda değil, birkaç satırda. */
tr.gunluk-dikkat > td { background: var(--danger-soft); }
tr.gunluk-dikkat:hover > td { background: var(--danger-soft); filter: brightness(0.97); }

/* ALAN ADI SAHİPLİK DOĞRULAMASI — yönerge satırı.
   Doğrulanmamış her alan adının ALTINDA tam genişlikte açılır. Sütunların
   içine sıkıştırılmadı: söylenecek üç parça var (ad, tür, değer) ve değer
   36 karakter -- dar bir hücrede kırpılır, kırpılınca da kopyalanamaz. */
tr.dogrulama-satiri > td { padding: 0 0 12px; border-top: 0; }
.dogrulama-kutu {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.dogrulama-baslik { font-size: 12.5px; margin-bottom: 10px; }
.dogrulama-alanlar { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; }
.dogrulama-alanlar > div { display: flex; align-items: center; gap: 8px; }
.dogrulama-alanlar .etiket {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--warning-dark);
}
.dogrulama-kutu code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 7px;
}
/* Asıl kopyalanacak değer; seçilebilir olması şart. */
.dogrulama-kutu code.kod-deger { user-select: all; font-weight: 600; }
.dogrulama-kutu .hint code { padding: 1px 4px; font-size: 11px; }
.dogrulama-kutu .hint { margin-top: 9px; line-height: 1.6; }

/* ŞİFRE ALANI — giriş kutusu + göster/üret/kopyala düğmeleri.
   Düğmeler kutunun YANINDA durur, altında değil: alt alta dizildiklerinde
   form satırı iki kat uzuyor ve "Durum" alanıyla hizası bozuluyordu. */
.sifre-alani { display: flex; gap: 6px; align-items: center; }
/* Göz düğmesi kutunun TAM boyunda: btn-icon varsayılanı küçük buton
   yüksekliği, yanındaki giriş kutusu ise normal -- ikisi yan yana
   basamak gibi duruyordu. */
.sifre-alani .goz-dugme { height: var(--control-h); width: var(--control-h); }
.sifre-alani .goz-dugme svg { width: 17px; height: 17px; }
.sifre-alani input { flex: 1; min-width: 0; }
.sifre-alani .btn { flex: 0 0 auto; }
/* Üretilen şifre okunurken karakterler ayırt edilebilsin. */
.sifre-alani input[type="text"] {
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* DURUM ROZETİ = DÜĞME.
   Rozetin görünümü korunur; yalnızca tıklanabilir olduğu belli edilir.
   Tarayıcının kendi buton biçimi (kenarlık, zemin, yazı tipi) sıfırlanır,
   yoksa rozet satır içinde bir "kutu" gibi görünüyordu. */
.badge-dugme {
  /* Zemin ve yazı rengi badge-ok / badge-off'tan gelir; burada
     EZİLMEZ. Kenarlık da yok: 1px kenarlık rozeti komşularından bir
     tık büyütüp satırdaki hizayı bozuyordu -- vurgu için yer kaplamayan
     box-shadow kullanılır. */
  border: 0;
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: filter .12s, box-shadow .12s;
}
.badge-dugme:hover { filter: brightness(.94); box-shadow: 0 0 0 1px currentColor; }
.badge-dugme:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Göz ikonunun iki hâli. [hidden] burada display:none demeli; .btn
   inline-flex olduğu için çocuk span'ler de akışa giriyor ve gizli
   olanı da çizilebiliyordu. */
.goz-dugme .goz-acik[hidden],
.goz-dugme .goz-kapali[hidden] { display: none !important; }
.goz-dugme .goz-acik,
.goz-dugme .goz-kapali { display: inline-flex; }

/* ------------------------------------------------------------------
 * KENAR CUBUGU ALTI — kim oturum acmis + islemler
 *
 * Once duz metin baglantilardi ("Sifre · Cikis"). Nokta ayracli metin
 * tiklanacak yer oldugunu gostermiyor, dar cubukta ise hepten
 * kayboluyordu. Bas harfli avatar kimin oturumu acik sorusunu yaziyi
 * okumadan cevapliyor -- iki panel yan yana acikken en cok sorulan sey bu.
 * ================================================================== */
.sidebar-foot .kul-kart {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-foot .kul-avatar {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--sidebar-active);
}
.sidebar-foot .kul-bilgi { flex: 1; min-width: 0; }
/* Uzun ad kenar cubugunu tasirmasin. */
.sidebar-foot .who,
.sidebar-foot .role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-foot .foot-islem { display: flex; gap: 2px; flex: 0 0 auto; }
.sidebar-foot .foot-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--sidebar-text);
  transition: background .12s, color .12s;
}
.sidebar-foot .foot-dugme svg { width: 16px; height: 16px; }
.sidebar-foot .foot-dugme:hover { background: var(--sidebar-hover); color: #fff; }
/* Cikis geri alinamaz degil ama oturumu bitirir; uzerine gelince
   otekilerden ayrissin. */
.sidebar-foot .foot-dugme.cikis:hover { background: var(--danger); color: #fff; }

/* Dar kenar cubugunda ad/rol zaten gizli; avatar ve dugmeler alt alta. */
@media (max-width: 1100px) {
  .sidebar-foot .kul-kart { flex-direction: column; gap: 6px; }
  .sidebar-foot .foot-islem { flex-direction: column; }
}

/* Giris/kayit kutusunda iki dugme yan yana.
   .login-box .btn kurali butun dugmeleri %100 genislige cekiyor; tek
   dugmeli giris ekraninda dogru, iki dugmeli kayit ekraninda alt alta
   iki blok cikariyordu. */
.login-box .form-actions { display: flex; gap: 8px; }
.login-box .form-actions .btn { width: auto; flex: 1 1 auto; }

/* Sifre satirindaki dugmeler giris kutusunda da DAR kalmali.
   .login-box .btn butun dugmeleri %100 genislige cekiyor; sifre satirinda
   bu, "Sifre Uret" dugmesinin butun satiri kaplamasina ve giris kutusunun
   birkac piksele sikismasina yol aciyordu. */
.login-box .sifre-alani .btn { width: auto; flex: 0 0 auto; }
.login-box .sifre-alani input { flex: 1 1 auto; min-width: 0; }

/* Goz dugmesi KARE kalmali.
   Bir ustteki ".login-box .sifre-alani .btn { width:auto }" kurali, sifre
   satirindaki butun dugmelerin genisligini icerige indiriyor -- goz
   dugmesinde bu, 16px'lik ikonun cerceveye yapismasi demek. Kare olcusu
   burada geri veriliyor (ayni ozgulluk, sonra geldigi icin kazanir). */
.sifre-alani .goz-dugme,
.login-box .sifre-alani .goz-dugme {
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  flex: 0 0 var(--control-h);
}
.sifre-alani .goz-dugme svg { width: 16px; height: 16px; }

/* ROZET, BIR YAZI SATIRIYLA AYNI YUKSEKLIKTE OLMALI.
 *
 * body { line-height: 20px } SABIT bir deger; rozet de bunu miras
 * aliyordu. Icerik 20px + 2px ust + 2px alt dolgu = 24px, yanindaki
 * cumlenin satir kutusu ise 20px. Ustten hizalandiklarinda rozetin
 * ortasi 2px asagi kayiyor ve yazi yukarida kalmis gibi duruyordu.
 * (Temel cizgiyle hizalamak da cozmedi: rozetin ilk ogesi metni olmayan
 * nokta isareti, temel cizgi uretmiyor.)
 *
 * 16px + 4px dolgu = 20px: rozet artik tam bir yazi satiri kadar.
 */
.badge {
  line-height: 16px;
  /* Cumle icinde kullanildiginda TAM oturmasi icin 'top'.
     'middle' kutunun ortasini "temel cizgi + x-yuksekliginin yarisi"
     hizasina koyuyor; 14px Inter'de bu, rozeti satirin ortasindan ~1.8px
     asagi birakiyordu. Rozet artik tam bir yazi satiri kadar (20px)
     oldugu icin ustten hizalamak ikisini birebir cakistiriyor.
     Esnek kapsayicilarda vertical-align zaten yok sayilir; oradaki
     rozetleri etkilemez. */
  vertical-align: top;
}

/* ÜST ŞERİT — aktif alan adı.
   Panelin bütün mail ekranları TEK bir alan adı için veri gösteriyor;
   hangisi olduğu her sayfada görünmezse kişi yanlış müşterinin
   karantinasına bakıp doğru sanır. Şerit bu yüzden sayfa başlığının
   da üstünde, içeriğin akışında duruyor. */
.alan-serit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px 0 16px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
}
.alan-serit-etiket {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Alan adı seçicisi İÇERİĞE GÖRE genişler.
   Sabit bir genişlik verilmişti; uzun alan adları kırpılıp "…" ile
   bitiyordu ve kişi hangi müşteriye baktığını tam okuyamıyordu --
   oysa şeridin tek işi bunu söylemek. select2 kendi kutusunu
   içeriğine göre ölçsün, kırpma kuralı da kalksın. */
.alan-serit select { max-width: none; width: auto; }
.alan-serit .select2-container { width: auto !important; min-width: 200px; max-width: 100%; }
.alan-serit .select2-container--default .select2-selection--single .select2-selection__rendered {
  overflow: visible;
  text-overflow: clip;
  padding-right: 30px;
}
/* Menü başlıkları — bölümleri ayırır. */
.sidebar .nav-baslik {
  padding: 14px 20px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
}
@media (max-width: 1100px) { .sidebar .nav-baslik { display: none; } }

/* Sıralanabilir sütun başlığı. */
th a.sirala { color: inherit; text-decoration: none; display: inline-block; }
th a.sirala:hover { color: var(--primary); }

/* Özet kutuları — hem sayı gösterir hem süzgeçtir.
   Rakamı görüp "bunu nasıl süzerim" diye aramak yerine üstüne basılır. */


/* CANLI GÜNCELLEME DENETİMİ — TEK TANIM.
 *
 * Burası bir süre İKİ AYRI blok tarafından biçimlendirildi: eski tasarım
 * durum metnini rozetin dışında, geniş (150px) bir alanda tutuyordu ve
 * seçim kutusuna 90px dayatıyordu. Yeni tasarım geldiğinde eskisi
 * silinmedi; daha özgül olduğu için de kazanmaya devam etti. Sonuç:
 * "Canlı: kapalı" yazan kutu "Canlı: kap" diye kırpılıyordu.
 * Üç kez "select genişliği" diye yamanan şey aslında buydu. */
.canli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ŞERİTTE SIKIŞMASIN: .canli bir flex öğesi, içindekiler de öyle.
   Varsayılan flex-shrink:1 olduğu için dar başlık şeridinde kutu
   içeriğinin altına iniyordu -- genişlik auto olsa bile. */
.canli > * { flex: none; }

.canli-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  background: var(--yuzey2); color: var(--text-muted);
  white-space: nowrap;
}
.canli-rozet[hidden] { display: none; }
.canli-nabiz {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
/* Açıkken yeşil ve nabız gibi: sayfanın kendini tazelediği görünsün. */
.canli.canli-acik .canli-rozet { background: var(--success-soft); color: var(--uzeri-yesil); }
.canli.canli-acik .canli-nabiz { animation: canli-nabiz 1.6s ease-in-out infinite; }
/* Duraklatma sessiz kalmamalı: kişi verinin donduğunu görmeli, yoksa
   bayat veriye bakarken canlı sanır. */
.canli-rozet.duraklamis { background: var(--warning-soft); color: var(--warning); }
.canli-rozet.duraklamis .canli-nabiz { animation: none; }
.canli.canli-yukleniyor .canli-rozet { opacity: .6; }
@keyframes canli-nabiz {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70%      { opacity: .5; box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) { .canli-nabiz { animation: none; } }

/* Durum metni rozetin DIŞINDA: rozet "açık mı" der, metin "en son ne
   zaman" der. İçeri koymak rozeti sayfa boyu uzatıyordu. */
.canli-durum { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.canli-durum.canli-duraklamis { color: var(--warning); font-weight: 600; }
.canli.canli-yukleniyor .canli-durum { opacity: .45; }
/* Tazelenen tabloda değişen satır kısa süre işaretlenir. */
tr.satir-guncellendi > td { background: var(--primary-soft); transition: background .8s; }

/* Ayrıntı tablosu: etiket solda dar, değer sağda geniş. */
table.data.ayrinti th {
  width: 190px; text-align: left; font-weight: 500;
  color: var(--text-muted); background: transparent;
  text-transform: none; letter-spacing: 0; font-size: 12.5px;
}
table.data.ayrinti td { font-size: 12.5px; }

/* ---------------------------------------------------------------- panel görselleri */

/* Sayı kartı bağlantı olduğunda: bağlantı gibi değil, kart gibi dursun. */
a.stat { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.stat:hover { border-color: var(--primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }

/* SAATLİK AKIŞ — yığılmış çubuk.
   Sütun aşağıdan yukarı dolduğu için (justify-content: flex-end)
   işaretlemedeki SIRA görsel sırayı verir: önce yazılan üstte kalır.
   Elenen üstte duruyor; gözün aradığı şey o. */
.akis-cubuk.temiz      { background: var(--grafik-teslim); }
.akis-cubuk.karantina  { background: var(--grafik-karantina); }
.akis-cubuk.reddedildi { background: var(--grafik-red); }
/* İade kendi rengini alıyor: karantina ve reddedilenle aynı kefeye
   konmuyor. Sistemin kararı değil, KARŞI TARAFIN teslim alamaması. */
.akis-cubuk.iade       { background: var(--grafik-iade); }
/* Parçalar arasına ince bir ayraç: renkler ne kadar ayrı olursa olsun
   iki dolu blok bitişikken tek parça gibi okunuyor. Kılpayı bir
   çizgi, sınırı gözle bulunur yapıyor. */
.akis-cubuk + .akis-cubuk { box-shadow: 0 -1px 0 var(--surface); }
/* Alttaki parçaların üst köşeleri düz olmalı, yoksa parçaların
   arasında çentik oluşuyor. Yalnızca EN ÜSTTEKİ yuvarlak kalır. */
.akis-cubuk.altta  { border-radius: 0; }
.akis-cubuk.bos    { height: 2px; background: var(--border); opacity: 1; }

.akis-anahtar {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 12px; font-size: 11px;
}
.akis-anahtar .kare { width: 8px; height: 8px; border-radius: 2px; }
.akis-anahtar .kare.temiz      { background: var(--grafik-teslim); }
.akis-anahtar .kare.karantina  { background: var(--grafik-karantina); }
.akis-anahtar .kare.reddedildi { background: var(--grafik-red); }
.akis-anahtar .kare.iade       { background: var(--grafik-iade); }

/* DAĞILIM SATIRI — ad, sayı ve iki renkli oran çubuğu.
   Çubuğun UZUNLUĞU sıradaki payı, RENK BÖLÜNMESİ o satırın ne
   kadarının elendiğini gösterir; iki bilgi tek çizimde. */
/* DAĞILIM SATIRININ BAĞLANTI HÂLİ.
   Satır artık hareketler ekranına gidiyor; <a> olduğu için varsayılan
   bağlantı rengini ve altçizgisini almaması gerekiyor. Tıklanabilir
   olduğu üzerine gelindiğinde belli oluyor -- satırın tamamı hedef,
   yalnızca metin değil. */
/* MENÜ ROZETİ -- teslimat kuyruğu / spam bildirimi sayacı.
   Bu oturumda menüye eklendi ama CSS'i yazılmamıştı: sayı düz metin
   olarak etiketin hemen yanına yapışıyordu. Kenar çubuğunun kendi
   renk düzeninde, sağa yaslı küçük bir pastil.
   Etkin menü ögesinde zemin farklı: orada satırın kendi rengi
   koyulaştığı için soluk pastil okunmuyordu. */
.nav-rozet {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: rgba(255, 255, 255, .12);
  color: var(--sidebar-text);
}
.sidebar-nav a.active .nav-rozet { background: rgba(255, 255, 255, .22); color: #fff; }
.sidebar-nav a:hover .nav-rozet  { color: #fff; }

.dagilim-bag { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.dagilim-bag:hover { background: var(--bg); text-decoration: none; }
.dagilim-bag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.dagilim { padding: 9px 0; border-bottom: 1px solid var(--border); }
.dagilim:first-child { padding-top: 0; }
.dagilim:last-child  { border-bottom: 0; padding-bottom: 0; }
.dagilim-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px; font-size: 12px;
}
.dagilim-ust > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dagilim-ust > span:last-child  { flex: none; font-size: 11.5px; }
/* İki parçanın yan yana durması için: genel .olcu tek parçalı
   kullanımda kaldığından kural yalnızca burada geçerli. */
.dagilim .olcu { display: flex; height: 8px; }
/* Çubuk artık dört parçalı: teslim, karantina, reddedilen, iade.
   Yuvarlak köşe yalnızca EN SAĞDAKİ parçada; hangisinin sonuncu
   olduğu satıra göre değiştiği için sınıf işaretlemeden geliyor. */
.dagilim .olcu-dolu.temiz      { background: var(--grafik-teslim); }
.dagilim .olcu-dolu.karantina  { background: var(--grafik-karantina); }
.dagilim .olcu-dolu.reddedildi { background: var(--grafik-red); }
.dagilim .olcu-dolu.iade       { background: var(--grafik-iade); }
.dagilim .olcu-dolu + .olcu-dolu { box-shadow: -1px 0 0 var(--surface); }

/* ÇUBUĞUN ALTINDAKİ DÖKÜM — dört sonucun sayısı.
   Bilerek SÖNÜK: asıl bilgi çubuğun kendisi, bu satır onu doğrulamak
   için var. Koyu yazılsaydı satırın en dikkat çeken parçası olur ve
   göz her alan adında dört sayı okumak zorunda kalırdı. */
.dagilim-alt {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 5px;
  font-size: 10.5px; line-height: 1.4;
  color: var(--text-muted);
}
.dagilim-alt .pay { display: inline-flex; align-items: center; gap: 4px; }
/* Renk noktası üstteki çubuğun parçasıyla AYNI: yazı ile çizim
   birbirine bağlansın, göz hangi rengin ne olduğunu aramasın. */
.dagilim-alt .pay::before {
  content: ''; width: 6px; height: 6px; border-radius: 2px; flex: none;
}
.dagilim-alt .pay.temiz::before      { background: var(--grafik-teslim); }
.dagilim-alt .pay.karantina::before  { background: var(--grafik-karantina); }
.dagilim-alt .pay.reddedildi::before { background: var(--grafik-red); }
.dagilim-alt .pay.iade::before       { background: var(--grafik-iade); }
/* Sıfırlar iyice geri çekilir: sütun düzeni korunur, göz takılmaz. */
.dagilim-alt .pay.sifir { opacity: .45; }
.dagilim .olcu-dolu.son { border-radius: 0 3px 3px 0; }

/* Kart öbeklerini ayıran bölüm başlığı. Kart içindeki .card-head
   değil; ÖBEĞİN başlığı, dolayısıyla kartların dışında durur. */
.bolum-baslik {
  margin: 4px 0 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Süzgeç görevi gören sayı kartı: seçili olan çerçeveden belli olur.
   Arka planı da boyanır, yoksa yan yana beş kartta ince çerçeve farkı
   gözden kaçıyordu. */
a.stat.secili { border-color: var(--primary); background: var(--primary-soft); }

/* ---------------------------------------------------------------- spam kuralları
   rspamd'nin ham kural adları ("ONCE_RECEIVED_STRICT") panelde hiçbir
   şey ifade etmiyordu. Kuralların tamamı -- Türkçe adı, açıklaması ve
   getirdiği puan -- PUAN SÜTUNUNUN İPUCUNDA duruyor.

   Önce konunun altında rozet olarak duruyorlardı; her satır iki sıra
   yer kaplıyor ve tablo taranamaz hâle geliyordu. Puan sütunu doğru
   yer: "bu sayı neden bu kadar" sorusu zaten oraya bakarken doğuyor. */

/* İmleç: table.data içindeki ipuçlu hücreler için genel kural
   cursor'ı devralıyor (satır tıklanabilir olduğundan). Puan hücresinde
   ipucu VAR ve bulunabilir olmalı, o yüzden geri alınıyor. */
.puan-hucre[data-ipucu-html] {
  cursor: help;
  /* İpucu olduğunu söyleyen tek ipucu imleç olmasın: noktalı alt çizgi
     fareyi getirmeden de görünür. Rozetli hücrede (karantina) rozet
     inline-flex olduğu için çizgi ona geçmez. */
  text-decoration: underline dotted var(--text-muted);
  text-underline-offset: 3px;
}

/* Ayrıntı ekranındaki gerçek kural tablosu. */
.kural-baslik {
  margin: 16px 0 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted);
}
.kural-tablo td { vertical-align: top; }

/* İŞLEYİŞ SINIRLARI VE ÖZ-DENETİM TABLOLARI
   Satırların yüksekliği eşit değil: bir hücrede tek sayı, yanındaki
   hücrede üç satırlık açıklama ve altındaki hücrede form var.
   table.data varsayılanı 'vertical-align: middle' olduğu için kısa
   hücreler uzun hücrenin ortasına kayıyor ve tablo basamaklı
   görünüyordu. Aynı düzeltme .kural-tablo ve .gunluk-tablo'da da var.

   İlk yazımda bu tablolar 'class="tablo"' ile yazılmıştı; projede
   öyle bir sınıf YOK (yalnızca .tablo-kaydir var), yani üç tablo da
   tamamen stilsiz kalmıştı -- başlık biçimi, kenarlık, yazı boyu ve
   hücre boşluğu hiç uygulanmıyordu. */
.sinir-tablo td,
.denetim-tablo td { vertical-align: top; }

/* Değiştir sütunu: giriş alanı ile düğme yan yana, açıklamalar altta.
   Önce satır içi flex ve 'flex-basis:100%' ile yapılıyordu; sütunun
   genişliği sınırlı olmadığı için uzun açıklama metni kartın sağ
   kenarından TAŞIYORDU. */
.sinir-uygula { display: flex; gap: 6px; align-items: center; }
.sinir-uygula input[type=text] { width: 84px; }
.sinir-aralik { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.sinir-etki   { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* Sınır adı ve dosya yolu: yol uzun ve tek parça; taşmasın diye
   kırılabilir bırakıldı. */
.sinir-yol { font-size: 11px; margin-top: 3px; word-break: break-all; }
.kural-tablo tfoot th { font-variant-numeric: tabular-nums; }
.kural-tablo .puan-arti { color: var(--danger); font-weight: 600; }
.kural-tablo .puan-eksi { color: var(--success-dark); font-weight: 600; }

/* ---------------------------------------------------------------- spam eşiği
   Eşik bir metin kutusuydu: "6" yazılıyordu ama o 6'nın ne yakalayıp
   ne kaçıracağı görünmüyordu. Kaydırıcının altındaki çubuklar son 30
   günün gerçek puan dağılımı; eşiğin sağında kalanlar karantinaya
   girecek olanlar. */
.esik-kutu { max-width: 620px; }

.esik-grafik {
  display: flex; align-items: flex-end; gap: 1px;
  height: 84px; padding: 0 2px;
  border-bottom: 1px solid var(--border);
}
.esik-cubuk {
  flex: 1; min-width: 0;
  background: var(--border);
  border-radius: 2px 2px 0 0;
  transition: background-color .12s;
  cursor: help;
}
/* Boş kovalar eksen üzerinde ince bir iz bırakır: dağılımın nerede
   bittiği, hiç çubuk olmamasından daha iyi okunuyor. */
.esik-cubuk.bos { background: var(--thead); cursor: default; }
/* Eşiğin sağı = karantinaya girecek olanlar. */
.esik-cubuk.yakalanir { background: var(--warning); }
.esik-cubuk.bos.yakalanir { background: var(--warning-soft); }

.esik-eksen {
  display: flex; justify-content: space-between;
  margin: 4px 2px 10px;
  font-size: 10px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* KAYDIRICI. Genel form kuralları input[type=range]'e uymuyor
   (yükseklik, dolgu, çerçeve); kendi biçimi veriliyor. */
.esik-kaydirici {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; padding: 0;
  border: 0; border-radius: 3px;
  background: linear-gradient(to right,
              var(--primary) 0 var(--oran, 50%), var(--border) var(--oran, 50%) 100%);
  cursor: pointer;
}
.esik-kaydirici::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  cursor: grab;
}
.esik-kaydirici::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  cursor: grab;
}
.esik-kaydirici:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.esik-etiketler {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
}
.esik-deger { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.esik-sayi { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.esik-ozet {
  margin-top: 6px;
  font-size: 12.5px; color: var(--text-muted);
}
.esik-ozet strong { color: var(--text); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .esik-cubuk { transition: none; } }

/* Hesap adı + sabit alan adı soneki.
   Alan adı bir etiket, girdi değil: kişi yalnızca @ öncesini yazar,
   sahibi olmadığı bir alan adının kutusunu yazması mümkün olmaz. */
.kutu-birlesik { display: flex; align-items: stretch; }
.kutu-birlesik input { border-radius: var(--radius) 0 0 var(--radius); min-width: 0; }
.kutu-sonek {
  display: flex; align-items: center;
  padding: 0 10px;
  height: var(--control-h);
  border: 1px solid var(--border); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--thead); color: var(--text-muted);
  font-size: 12px; white-space: nowrap;
}

/* ---------------------------------------------------------------- mail içeriği
   Gövde ve ham kaynak: satır sonları korunur, uzun satırlar sarılır.
   Kutunun kendi kaydırması var; sayfa yana kaymamalı. */
.mesaj-govde, .mesaj-ham {
  margin: 0;
  padding: 12px 14px;
  max-height: 520px;
  overflow: auto;
  background: var(--thead);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.mesaj-ham { max-height: 640px; font-size: 11.5px; }

/* Ham günlük satırı: uzun, sarılmalı, ama okunurluğu için biraz küçük. */
.gunluk-tablo td.gunluk-satir {
  font-size: 11.5px; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
}
.gunluk-tablo td { vertical-align: top; }

/* Sonuç sütunundaki işlem düğmeleri: rozetin ve sebep metninin altında,
   satırı şişirmeden. Bağlantı tarihin üstündeyken kimse bulamıyordu.
   İki düğme YAN YANA -- "teslimat raporu" ile "spam bildir" aynı sorunun
   iki adımı; alt alta dizilince sütun uzuyor ve ikincisi gözden
   kaçıyordu. */
.hareket-islem {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* Sütun iki düğmeyi yan yana alacak kadar geniş olmalı; yoksa her
   satırda alta kayarlar ve yan yana koymanın anlamı kalmaz. */
.sonuc-sutun { min-width: 260px; }

/* SIRALANABILIR BASLIKLARIN GENISLIGI BURADA DURUR.
   sirala_baslik() bir sinif aliyor, satir ici style almiyor -- bilerek:
   siralama baglantisi uretilen her yerde ayni olcunun tekrar yazilmasi
   gerekirdi. Basliklar siralanabilir yapilirken <th style="width:...">
   kaldirildi; tarih ve puan sutunlari olcusuz kalinca konu sutunu
   hepsini sikistirip tarihi iki satira boluyordu. */
/* Toplu secim sutunu: yalnizca onay kutusu kadar yer. */
.toplu-sutun { width: 34px; text-align: center; padding-right: 0; }
.toplu-sutun input { cursor: pointer; }

/* Toplu islem seridi: solda "N kayit secildi", sagda dugme.
   Serit tablonun hem USTUNDE hem ALTINDA duruyor; cizgi hangi tarafta
   olduguna gore degisiyor ki tabloyla arasinda cift cizgi olmasin. */
.toplu-serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.toplu-serit-alt { border-top: 1px solid var(--border); }
.toplu-serit-ust { border-bottom: 1px solid var(--border); }
/* Dugme kapaliyken tiklanabilir gorunmesin. */
.toplu-dugme:disabled { opacity: .45; cursor: not-allowed; }

/* Sayfalama seridi: solda sayim, sagda dugmeler. */
.sayfalama {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sayfalama-dugmeler { display: flex; align-items: center; gap: 8px; }

.geldi-sutun { min-width: 118px; }
.puan-sutun  { min-width: 68px; }
.adres-sutun { min-width: 190px; }
.tarih-sutun { min-width: 138px; }

.teslimat-dugme { margin-top: 6px; }

/* Ek önizlemesi: PDF ve metin ekleri sayfa içinde açılır. */
.ek-onizleme {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  resize: vertical;
  height: 520px;
  min-height: 160px;
}
.ek-onizleme object { display: block; width: 100%; height: 100%; border: 0; }
.ek-yedek { padding: 16px; font-size: 13px; color: var(--text-muted); }

/* Üç alanlı ızgara: başlık filtresinde "metin + başlık adı + eşleme"
   tek satırda durur. İkili ızgarada üçüncü alan alta düşüyor ve form
   iki satır yerine üç satır oluyordu. */
.form-grid.uclu { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Eşik kaydırıcısı kapalıyken: değer değişse de kaydedilmeyeceği
   görünmeli. Tamamen gizlemek yerine soluklaştırılıyor -- kişi sistem
   geneli eşiğin nereye düştüğünü yine de görebilsin. */
.esik-kutu.esik-kapali { opacity: .45; }
.esik-kutu.esik-kapali .esik-kaydirici { cursor: not-allowed; }

/* ---------------------------------------------------------------- spam raporu */

/* KURAL ÖNERİSİ SATIRI.
   Bir onay kutusu ve yanında üç katman bilgi: ne yaptığı, kuralın
   kendisi, ve neyi riske attığı. Üçü de gerekli -- yalnızca kuralı
   gösterseydik yönetici "bunu işaretlersem ne olur" sorusuna cevap
   bulamadan seçim yapardı. */
.oneri {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.oneri:last-of-type { border-bottom: 0; }
.oneri > input { margin-top: 3px; flex: none; }
.oneri > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oneri-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Kuralın kendisi tek satırda durmalı ama taşmamalı: uzun bir alan adı
   satırı yana kaydırmasın. */
.oneri-deger {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oneri:hover { background: var(--primary-soft); }

/* Dosya seçici de öbür kutularla aynı yükseklikte dursun (tasarım
   kuralı: input, select ve butonlar eşit yükseklikte). */
.form-row > input[type=file] {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); font-size: 13px; width: 100%;
}

/* TIKLANABİLİR MAİL PARÇALARI (spam raporu denetleme ekranı).
   Gönderici, konu kelimeleri ve başlıklar birer düğme; tıklayınca
   aşağıdaki kural formunu doldururlar. */
.parca-obek { margin-top: 16px; }
.parca-baslik {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.parca-satir { display: flex; flex-wrap: wrap; gap: 6px; }
.parca {
  font: inherit; font-size: 12px; font-family: var(--mono, monospace);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.parca.genis { border-radius: 6px; font-family: inherit; }
.parca:hover { border-color: var(--primary); background: var(--primary-soft); }
.parca.secili { border-color: var(--primary); background: var(--primary-soft2); font-weight: 600; }

/* BAŞLIKLAR TABLO GİBİ: adı solda sabit genişlikte, değeri sağda.
   Rozet şeridi olarak dizseydik uzun değerler okunmaz olurdu. */
.parca-tablo { display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.parca-baslik-satir {
  display: flex; gap: 10px; align-items: baseline; text-align: left;
  font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer;
  background: var(--surface); border: 0; border-bottom: 1px solid var(--border);
}
.parca-baslik-satir:last-child { border-bottom: 0; }
.parca-baslik-satir:hover { background: var(--primary-soft); }
.parca-baslik-satir.secili { background: var(--primary-soft2); }
.parca-baslik-satir .ad { flex: none; width: 190px; font-weight: 600; color: var(--text); }
.parca-baslik-satir .deger {
  color: var(--text-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  .parca-baslik-satir { flex-direction: column; gap: 2px; }
  .parca-baslik-satir .ad { width: auto; }
}

/* BİRİKEN KURALLAR — kaydedilmeden önce ekranda duran liste.
   Kaydet'e basmadan ne yazılacağının tamamı görünsün diye var; tek
   tek kaydedip sayfayı yenilemek bir mailden üç kural çıkarmayı üç
   ayrı işe çeviriyordu. */
.yazilacak-liste {
  margin-top: 12px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: 6px; padding: 10px;
  background: var(--primary-soft);
}
.yazilacak {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; padding: 6px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
}
.yazilacak > span { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------- tema seçimi
   Logonun hemen altında üç düğme: Açık / Koyu / Sistem. Aktif olan
   vurgulu duruyor, yani hangi durumda olunduğu tahmin gerektirmiyor.

   ÜÇ DÜĞME, DÖNGÜLEYEN TEK DÜĞME DEĞİL: ilk yazımda tek düğme koyup
   durumu döngülüyordum (Sistem→Açık→Koyu). Kullanıcı filter
   projesindeki üç düğmeli hâli tercih etti ve haklı: döngülü düğmede
   istediğin duruma varmak için iki kez tıklamak gerekebiliyor ve o an
   hangisinde olduğun yalnızca simgeden okunuyor.

   KENAR ÇUBUĞU HER İKİ TEMADA DA KOYU olduğu için burada --sidebar-*
   belirteçleri ve saydam beyazlar kullanılıyor; gövdenin yüzey
   renkleri buraya uymaz. */
.tema-secim {
  display: flex;
  gap: 2px;
  /* Marka bloğunun hemen altında; menü aramasıyla aynı yatay pay. */
  margin: 2px 14px 0;
  padding: 2px;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-lg);
}
.tema-dugme {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--sidebar-text);
  font: inherit;
  font-size: 10px;
  line-height: 12px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tema-dugme svg { width: 15px; height: 15px; }
.tema-dugme:hover { background: var(--sidebar-hover); color: #fff; }
.tema-dugme.aktif {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
}

/* ==================================================================
   KOYU TEMA

   Yalnızca :root belirteçlerini yeniden tanımlıyor; tek bir bileşen
   kuralı tekrarlanmıyor. Bunu mümkün kılan şey gövdedeki sabit
   renklerin belirteçlere çevrilmiş olması (bkz. :root içindeki
   "KOYU TEMA KATMANI" notu).

   ÜÇ DURUM VAR:
     data-tema="koyu"  -> kullanıcı koyuyu seçti
     data-tema="acik"  -> kullanıcı açığı seçti (işletim sistemi koyu
                          olsa bile açık kalır)
     öznitelik yok     -> işletim sistemini izle

   Seçim ÇEREZDE tutuluyor ve duzen.php özniteliği sunucu tarafında
   yazıyor. Neden JS değil: JS ile yazılsaydı sayfa önce açık boyanıp
   sonra koyuya atlardı (beyaz parlama) ve JS kapalıyken hiç
   çalışmazdı.

   KENAR ÇUBUĞU ZATEN KOYU: rengi ufak bir miktar değişiyor ki koyu
   temada gövdeden ayrışmaya devam etsin.

   VURGU RENKLERİ (primary/success/danger) ÜZERİNDE BEYAZ YAZI OLAN
   düğmelerde kullanılıyor, o yüzden koyu temada da doygun kalıyor;
   yalnızca biraz açıldılar çünkü koyu zeminde aynı ton daha karanlık
   görünüyor. Rozetlerin okunabilirliği *-soft zeminleri ile
   --uzeri-* yazı renklerinin BİRLİKTE çevrilmesinden geliyor.
   ================================================================== */
:root[data-tema="koyu"] {
  --sidebar:          #0b1618;
  --sidebar-hover:    #16292b;
  --sidebar-text:     #93a9a5;
  --sidebar-active:   #2dd4bf;

  --primary:          #3b82f6;
  --primary-dark:     #2563eb;
  --primary-soft:     #16243a;
  --primary-soft2:    #1b2c46;
  --success:          #10b981;
  --success-dark:     #34d399;
  --success-soft:     #10291f;
  --danger:           #dc2626;
  --danger-dark:      #b91c1c;
  --danger-soft:      #3a1618;
  --warning:          #d97706;
  --warning-dark:     #f59e0b;
  --warning-soft:     #33240d;
  --info:             #0891b2;
  --info-dark:        #22d3ee;
  --info-soft:        #0d2a31;
  --secondary:        #94a3b8;
  --secondary-dark:   #b6c2cc;

  --bg:               #0f1417;
  --surface:          #171e22;
  --border:           #2a343a;
  --border-strong:    #3c4850;
  --thead:            #1e262b;
  --text:             #e4e9eb;
  --text-muted:       #93a3ad;

  --grafik-teslim:    #10b981;
  --grafik-karantina: #fb923c;
  --grafik-red:       #ef4444;
  --grafik-iade:      #cbd5e1;

  /* pastel zemin üzerindeki yazı: koyu zeminde AÇIK olmak zorunda */
  --uzeri-yesil:      #6ee7b7;
  --uzeri-yesil2:     #a7f3d0;
  --uzeri-kirmizi:    #fca5a5;
  --uzeri-kirmizi2:   #fcb3b3;
  --uzeri-mavi:       #93c5fd;
  --uzeri-mavi2:      #a5b4fc;
  --uzeri-turuncu:    #fdba74;
  --uzeri-turuncu2:   #fdb98a;
  --uzeri-turuncu3:   #fdb283;
  --uzeri-kahve:      #e0b48a;
  --uzeri-mor:        #d8b4fe;

  /* yüzey basamakları */
  --yuzey2:           #1e262b;
  --yuzey3:           #131a1d;
  --satir-alt:        #1b2327;
  --satir-vurgu:      #263036;

  /* ince tintler */
  --tint-mavi:        #17233a;
  --tint-mavi2:       #16283f;
  --tint-yesil:       #112a20;
  --tint-turuncu:     #2c2011;
  --tint-turuncu2:    #32230f;
  --tint-mor:         #241a33;

  /* kenarlık tintleri */
  --cizgi-kirmizi:    #55252a;
  --cizgi-yesil:      #1d4a39;
  --cizgi-yesil2:     #17402f;
  --cizgi-mavi:       #26436e;
  --cizgi-mavi2:      #293a63;
  --cizgi-turuncu:    #573a1c;
  --cizgi-sari:       #4d3c12;
  --cizgi-camgobegi:  #1b4954;

  --text-soluk:       #6e7f8a;
  --text-koyu2:       #b6c2cc;
  --text-gri2:        #8a99a3;
  --isi-1:            #1e3a63;
  --isi-2:            #2c5596;
  --isi-3:            #3b82f6;

  color-scheme: dark;
}