/* nivile — TASARIM DİLİ (jetonlar)
 * ═══════════════════════════════════════════════════════════════════════
 * TEK KAYNAK: vault `DESIGN.md`. Gerekçeler orada; burada uygulama var.
 * Bu dil sahada yıllardır kullanılan bir ERP'den (entadigital) süzüldü —
 * kuralların çoğu bir şikâyetten doğdu, uydurma değil.
 *
 * TEK CÜMLE: KOMPAKT. Küçük punto, dar padding, sıkı satır aralığı.
 * Boşluk için boşluk bırakma. Ekran "ferah" görünüyorsa yanlıştır.
 *
 * Panel ve ERP AYNI dili kullanır. Ayrım yüzeyde değil, içeriktedir —
 * ayrı renk şeması iki tema bakımı demektir.
 *
 * 🚫 MUTLAK YASAKLAR (nöbetçi: tools/tasarim-kanit.py)
 *   1. Mor / violet / purple — hiçbir tonu
 *   2. Karanlık tema — `prefers-color-scheme: dark` yok
 *   3. Tek-kenar accent şerit (border-left: 4px solid …) — tam çevreleyen
 *      1px border kullan
 *   4. Yumuşak/oyuncak gölge — kart yükseltmesi 1px/2px düzeyinde kalır
 *   5. font-weight < 500 — yoğun veri ekranında ince yazı okunmuyor
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── RENK ─────────────────────────────────────────────────────────── */
  --lacivert:        #1e3a8a;   /* topbar + tablo başlığı */
  --lacivert-2:      #1e40af;
  --topbar-gradient: linear-gradient(135deg, #1e3a8a, #1e40af);

  --vurgu:       #2563eb;   /* buton, link, focus, aktif sekme */
  --vurgu-hover: #1d4ed8;
  --iyi:         #16a34a;   /* ekle (+), onay */
  --iyi-hover:   #15803d;
  --hata:        #dc2626;   /* sil, modal close, gecikme */
  --hata-hover:  #b91c1c;
  --amber:       #d97706;   /* devam eden adım, uyarı */
  --teal:        #0d9488;   /* ikincil vurgu */

  --metin:       #0f172a;   /* ana */
  --metin-2:     #1e293b;
  --soluk:       #475569;   /* ikincil */
  --soluk-2:     #64748b;
  --silik:       #94a3b8;

  --zemin:       #f1f5f9;   /* sayfa */
  --yuzey:       #ffffff;   /* kart */
  --yumusak:     #f8fafc;   /* yumuşak zemin, satır hover */
  --cizgi:       #e2e8f0;
  --cizgi-koyu:  #cbd5e1;   /* input kenarı */

  /* ── ROZET (pill) — durum kodlamanın TEK standart yolu ────────────── */
  /* Aynı ailenin açık zemini + koyu metni. Önem skalası:
     düşük=nötr · orta=amber · yüksek=turuncu · kritik=kırmızı */
  --rozet-notr-bg:     #f1f5f9;  --rozet-notr-metin:    #475569;  --rozet-notr-kenar:    #cbd5e1;
  --rozet-mavi-bg:     #eff6ff;  --rozet-mavi-metin:    #1d4ed8;  --rozet-mavi-kenar:    #bfdbfe;
  --rozet-amber-bg:    #fef3c7;  --rozet-amber-metin:   #92400e;  --rozet-amber-kenar:   #fde68a;
  --rozet-turuncu-bg:  #ffedd5;  --rozet-turuncu-metin: #c2410c;  --rozet-turuncu-kenar: #fdba74;
  --rozet-kirmizi-bg:  #fee2e2;  --rozet-kirmizi-metin: #b91c1c;  --rozet-kirmizi-kenar: #fca5a5;
  --rozet-yesil-bg:    #dcfce7;  --rozet-yesil-metin:   #15803d;  --rozet-yesil-kenar:   #86efac;
  --rozet-teal-bg:     #f0fdfa;  --rozet-teal-metin:    #0f766e;  --rozet-teal-kenar:    #99f6e4;

  /* Hatalı alan: TAM ÇEVRELEYEN kenar + hafif zemin.
     ⚠️ Tek-kenar şerit DEĞİL (yasak 3). */
  --hata-alan-kenar: #fca5a5;
  --hata-alan-zemin: #fef2f2;

  /* ── TİPOGRAFİ ────────────────────────────────────────────────────── */
  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pt-topbar:   13px;   /* topbar başlık */
  --pt-govde:    13px;   /* gövde / form */
  --pt-hucre:    12.5px; /* tablo hücre */
  --pt-baslik-h: 11px;   /* tablo başlık hücresi */
  --pt-filtre:   12.5px; /* filtre select */
  --pt-rozet:    10px;
  --pt-etiket:   11.5px; /* form etiketi */

  /* ⚠️ ASGARİ 500. 100/200/300/400/light/normal hiçbir yerde yok. */
  --ag-govde:  500;
  --ag-etiket: 600;
  --ag-baslik: 700;
  --ag-rozet:  700;

  --satir: 1.35;   /* sıkı — kompakt dilin bel kemiği */

  /* ── ÖLÇÜ ─────────────────────────────────────────────────────────── */
  /* ⚠️ 40px ve üstü "fazla büyük" bulundu, kullanma. */
  --ikonbtn:       32px;   /* topbar ikon butonu */
  --ikonbtn-mobil: 29px;
  --satirici-btn:  34px;   /* satır-içi ikon/metin butonu */
  --modal-close:   32px;

  --r-input:   8px;
  --r-kart:    12px;
  --r-modal:   14px;
  --r-ikonbtn: 8px;
  --r-pill:    99px;

  --p-hucre-y:  6px;   --p-hucre-x:  10px;
  --p-input-y:  8px;   --p-input-x:  11px;
  --p-kart:     12px;
  --p-topbar-y: 8px;   --p-topbar-x: 14px;

  --topbar-y:       50px;
  --topbar-y-mobil: 46px;

  /* ⚠️ Büyük bulanık gölge kurumsal ekranı ucuzlatır (yasak 4). */
  --golge-kart: 0 1px 2px rgba(15, 23, 42, 0.06);
  --golge-ust:  0 2px 6px rgba(15, 23, 42, 0.10);
  --odak-halka: 0 0 0 3px rgba(37, 99, 235, 0.12);

  /* ── KATMAN ───────────────────────────────────────────────────────── */
  --z-topbar:    100;
  --z-filtre:     90;
  --z-modal:    9500;
  --z-altmodal: 9600;
  --z-lightbox: 20000;
  --z-toast:    30000;
}

/* ═══ TABAN ══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html {
  /* Notch arkası topbar rengiyle aynı olsun — PWA'da tepede yabancı
     renk bandı görünmesin. */
  background: var(--lacivert);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;

  /* ⚠️ overflow-x: hidden YAZMA. body'yi kaydırma konteyneri yapar ve
     sayfadaki TÜM position:sticky öğeler (topbar, sekme, filtre) sessizce
     ölür — masaüstü emülatöründe çalışır görünür, iOS'ta yapışmaz.
     `clip` taşmayı keser ama konteyner OLUŞTURMAZ. Üç kez yaşandı. */
  overflow-x: clip;
}

body {
  margin: 0;
  /* ⚠️ html lacivert (notch arkası için). body viewport'u DOLDURMAZSA
     içerik kısa olduğunda sayfanın altı lacivert kalır — gerçek
     cihazda görüldü. min-block-size şart. */
  min-block-size: 100dvh;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: var(--pt-govde);
  font-weight: var(--ag-govde);
  line-height: var(--satir);
  overflow-x: clip;
  /* Parmakla yakınlaştırma kapalı — kompakt yerleşim kaymasın. */
  touch-action: pan-x pan-y;
}

/* ⚠️ Form elemanları UA stilinden dolayı font ailesini/ağırlığını
   INHERIT ETMEZ. `*` seçicisiyle global ağırlık vermek de yanlış: class
   seçicilerden yüksek özgüllükte olup explicit 600/700'leri ezer. */
input, select, button, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* ═══ TOPBAR ═════════════════════════════════════════════════════════ */

.n-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 10px;
  padding: var(--p-topbar-y) var(--p-topbar-x);
  padding-top: max(var(--p-topbar-y), env(safe-area-inset-top, 0px));
  min-height: var(--topbar-y);
  background: var(--topbar-gradient);
  color: #fff;
}
.n-topbar h1 { margin: 0; font-size: var(--pt-topbar); font-weight: var(--ag-baslik); }
.n-topbar .n-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.n-iconbtn {
  inline-size: var(--ikonbtn); block-size: var(--ikonbtn);
  display: inline-grid; place-items: center;
  border-radius: var(--r-ikonbtn);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: #fff; cursor: pointer; box-sizing: border-box; padding: 0;
}
.n-iconbtn:hover { background: rgba(255, 255, 255, 0.18); }
.n-iconbtn.n-ekle { background: var(--iyi); border-color: #22c55e; }
.n-iconbtn.n-ekle:hover { background: var(--iyi-hover); }

@media (max-width: 720px) {
  .n-topbar {
    min-height: var(--topbar-y-mobil);
    padding: 6px 10px;
    /* ⚠️ KISAYOL TUZAĞI: kısa `padding` yazımı base'deki safe-area
       padding-top'u EZER → iOS PWA'da saat/pil topbar'ın üstüne biner.
       Mobil blokta padding-top MUTLAKA yeniden bildirilir. */
    padding-top: max(6px, env(safe-area-inset-top, 0px));
  }
  .n-iconbtn { inline-size: var(--ikonbtn-mobil); block-size: var(--ikonbtn-mobil); }
}

/* Topbar altındaki yapışkan filtre çubuğu */
.n-filtre {
  position: sticky; z-index: var(--z-filtre);
  top: calc(var(--topbar-y) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
@media (max-width: 720px) {
  .n-filtre { top: calc(var(--topbar-y-mobil) + env(safe-area-inset-top, 0px)); }
  /* Dar ekranda arama tam satır, segmented altına tam genişlik —
     yan yana sıkışınca sayaç taşıyordu. */
  .n-filtre > .n-girdi { flex: 1 1 100%; }
  .n-filtre > .n-seg { flex: 1 1 100%; }
}

/* ═══ KART / KPI ═════════════════════════════════════════════════════ */

.n-kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  box-shadow: var(--golge-kart);
  padding: var(--p-kart);
}
.n-kpi { display: flex; gap: 8px; flex-wrap: wrap; }
.n-kpi > * { flex: 1 1 120px; }
/* Dar ekranda 3+1 dizilişi dengesiz duruyordu → 2×2. */
@media (max-width: 560px) { .n-kpi > * { flex: 1 1 calc(50% - 4px); } }
.n-kpi-sayi { font-size: 20px; font-weight: 800; line-height: 1.1; }
.n-kpi-etiket { font-size: var(--pt-etiket); font-weight: var(--ag-etiket); color: var(--soluk); }

/* ═══ ROZET ══════════════════════════════════════════════════════════ */

.n-rozet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--pt-rozet); font-weight: var(--ag-rozet);
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--rozet-notr-kenar);
  background: var(--rozet-notr-bg); color: var(--rozet-notr-metin);
  white-space: nowrap;
}
.n-rozet.mavi    { background: var(--rozet-mavi-bg);    color: var(--rozet-mavi-metin);    border-color: var(--rozet-mavi-kenar); }
.n-rozet.amber   { background: var(--rozet-amber-bg);   color: var(--rozet-amber-metin);   border-color: var(--rozet-amber-kenar); }
.n-rozet.turuncu { background: var(--rozet-turuncu-bg); color: var(--rozet-turuncu-metin); border-color: var(--rozet-turuncu-kenar); }
.n-rozet.kirmizi { background: var(--rozet-kirmizi-bg); color: var(--rozet-kirmizi-metin); border-color: var(--rozet-kirmizi-kenar); }
.n-rozet.yesil   { background: var(--rozet-yesil-bg);   color: var(--rozet-yesil-metin);   border-color: var(--rozet-yesil-kenar); }
.n-rozet.teal    { background: var(--rozet-teal-bg);    color: var(--rozet-teal-metin);    border-color: var(--rozet-teal-kenar); }

/* ═══ TABLO ══════════════════════════════════════════════════════════ */

.n-tablo { inline-size: 100%; border-collapse: collapse; background: var(--yuzey); }
.n-tablo thead th {
  position: sticky; top: 0;
  background: var(--lacivert); color: #fff;
  font-size: var(--pt-baslik-h); font-weight: var(--ag-baslik);
  text-align: start; padding: var(--p-hucre-y) var(--p-hucre-x);
  white-space: nowrap;
}
.n-tablo td {
  font-size: var(--pt-hucre); font-weight: var(--ag-govde);
  padding: var(--p-hucre-y) var(--p-hucre-x);
  border-bottom: 1px solid var(--yumusak);
}
.n-tablo tbody tr:hover td { background: var(--yumusak); }
/* ⚠️ Kod/numara kolonu sarmaz — "PRS-2026-014" üç satıra kırılır. */
.n-tablo .n-kod { white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-tablo .n-uzun { max-inline-size: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ FORM ═══════════════════════════════════════════════════════════ */

.n-etiket { font-size: var(--pt-etiket); font-weight: var(--ag-etiket); color: var(--soluk); }
.n-etiket .n-zorunlu { color: var(--hata); }

.n-girdi {
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-input);
  padding: var(--p-input-y) var(--p-input-x);
  font-size: var(--pt-govde); font-weight: var(--ag-govde);
  background: var(--yuzey); color: var(--metin);
  inline-size: 100%;
}
.n-girdi:focus {
  outline: none; border-color: var(--vurgu); box-shadow: var(--odak-halka);
}
/* Hatalı alan: TAM ÇEVRELEYEN kenar + hafif zemin (şerit değil). */
.n-girdi.n-hatali { border-color: var(--hata-alan-kenar); background: var(--hata-alan-zemin); }

/* ⚠️ iOS, font-size < 16px inputa odaklanınca sayfayı yakınlaştırır.
   Araç çubuğu/filtre inputları KOMPAKT kalır, yalnız ODAKTA büyür.
   `select` yerel seçici açar, yakınlaştırma tetiklemez → 13px kalabilir. */
@media (max-width: 767px) {
  .n-girdi:focus { font-size: 16px; }
  /* Modal/bottom-sheet form alanları doğrudan 16px — orada sorun değil. */
  .n-kutu .n-girdi { font-size: 16px; }
}

.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-block-size: var(--satirici-btn);
  padding: var(--p-input-y) 14px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-input);
  font-size: var(--pt-govde); font-weight: var(--ag-etiket);
  background: var(--yuzey); color: var(--metin);
  cursor: pointer;
}
.n-btn.birincil { background: var(--vurgu);  border-color: var(--vurgu);  color: #fff; }
.n-btn.birincil:hover { background: var(--vurgu-hover); border-color: var(--vurgu-hover); }
.n-btn.olumlu   { background: var(--iyi);    border-color: var(--iyi);    color: #fff; }
.n-btn.olumlu:hover { background: var(--iyi-hover); border-color: var(--iyi-hover); }
.n-btn.tehlike  { background: var(--hata);   border-color: var(--hata);   color: #fff; }
.n-btn.tehlike:hover { background: var(--hata-hover); border-color: var(--hata-hover); }
.n-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Segmented toggle — sık işlemlerde dropdown'a tercih edilir (tık-tık hız) */
.n-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-input); overflow: hidden; }
.n-seg button {
  /* ⚠️ `flex: 1 1 46%` VARSAYILAN OLAMAZ: 3 seçenekli bir segmented'i
     2+1 sardırıyordu (gerçek cihazda görüldü). Sarma yalnız 4+ seçenek
     için, `.n-seg.sarar` ile AÇIKÇA istenir (DESIGN.md §6). */
  flex: 1 1 0; min-inline-size: 0;
  min-block-size: var(--satirici-btn); padding: 6px 10px;
  border: 0; background: var(--yuzey); color: var(--soluk);
  font-size: var(--pt-filtre); font-weight: var(--ag-etiket); cursor: pointer;
}
.n-seg button[aria-pressed="true"] { background: var(--vurgu); color: #fff; }
@media (max-width: 720px) { .n-seg.sarar button { flex: 1 1 46%; } }

/* ═══ MODAL ══════════════════════════════════════════════════════════ */

.n-ortu {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, 0.55);
}
.n-kutu {
  display: flex; flex-direction: column;
  inline-size: min(720px, 100%); max-block-size: 90vh;
  background: var(--yuzey); border-radius: var(--r-modal);
  box-shadow: var(--golge-ust); overflow: hidden;
}
.n-kutu-bas {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey);
}
.n-kutu-govde { flex: 1; overflow-y: auto; padding: 12px; }
.n-kutu-alt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cizgi); background: var(--yuzey);
}
/* Sil SOLDA ayrık — yanlış basmayı önler. */
.n-kutu-alt .n-sil { margin-right: auto; }

/* Close: her platformda DOLU KIRMIZI DAİRE. */
.n-kapat {
  margin-left: auto;
  inline-size: var(--modal-close); block-size: var(--modal-close);
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--hata); color: #fff; cursor: pointer; padding: 0;
}
.n-kapat:hover { background: var(--hata-hover); }

@media (max-width: 767px) {
  /* ZORUNLU bottom-sheet */
  .n-ortu { align-items: flex-end; padding: 0; }
  .n-kutu {
    inline-size: 100vw; max-inline-size: 100vw;
    block-size: 92dvh; max-block-size: 92dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .n-kutu::before {   /* sürükleme tutamağı */
    content: ""; display: block; inline-size: 40px; block-size: 4px;
    margin: 8px auto; border-radius: var(--r-pill); background: var(--cizgi-koyu);
  }
  .n-kutu-alt .n-btn { flex: 1; }
}

/* ⚠️ PWA ÜST BEYAZ BANT TUZAĞI (gerçek hata, uzun sürdü):
   `display-mode: standalone` içinde [role="dialog"]'a blanket
   padding-top: env(safe-area-inset-top) VERME. Bottom-sheet'in İÇ beyaz
   kutusunda role="dialog" varsa notch payı İKİ KEZ sayılır ve tepede
   ~110px beyaz bant kalır. Kutu zaten alta yapışık, notch'u temizliyor.
   Belirti: "sadece ana ekrandan açınca oluyor, tarayıcıda yok."
   Bu yüzden burada BİLEREK böyle bir kural YOK. */

/* ═══ MOBİL KART LİSTESİ (tablo yerine) ══════════════════════════════ */
/* ⚠️ Mobilde tablo YASAK. Render dalı isMobil() ile AYRILIR — CSS ile
   tabloyu "sıkıştırmaya" çalışma, kritik kolonlar gizli kalır. */
.n-kartliste { display: grid; gap: 8px; }
.n-satirkart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-kart); padding: 10px;
}
.n-satirkart-ust { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.n-satirkart-baslik { font-size: var(--pt-govde); font-weight: var(--ag-etiket); }
.n-satirkart-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ═══ ERİŞİLEBİLİRLİK ════════════════════════════════════════════════ */

:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
:where(a, button, [role="button"], summary):not(:disabled) { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

  .sahne.svelte-dbgltl { min-block-size: 100dvh; display: grid; place-items: center; padding: 16px; }
  form.svelte-dbgltl { inline-size: min(22rem, 100%); display: flex; flex-direction: column; gap: 4px; }
  h1.svelte-dbgltl { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  h1.svelte-dbgltl span:where(.svelte-dbgltl) { color: var(--vurgu); }
  .alt.svelte-dbgltl { color: var(--soluk); margin: 2px 0 12px; font-size: var(--pt-etiket); font-weight: 500; }
  label.svelte-dbgltl { margin-top: 8px; }
  /* Giriş formu: iOS yakınlaştırmasına karşı doğrudan 16px — burada
     kompaktlıktan çok yanlış yazmama önemli (DESIGN.md §2). */
  input.svelte-dbgltl { font-size: 16px; }
  button.svelte-dbgltl { margin-top: 14px; }
  /* Hata: TAM ÇEVRELEYEN kenar + hafif zemin (tek-kenar şerit yasak). */
  .hata-kutu.svelte-dbgltl {
    margin: 10px 0 0; padding: 8px 10px;
    border: 1px solid var(--hata-alan-kenar); border-radius: var(--r-input);
    background: var(--hata-alan-zemin); color: var(--rozet-kirmizi-metin);
    font-size: var(--pt-etiket); font-weight: 600;
  }

  .dev-bant.svelte-kodyt8 {
    position: sticky; top: 0; z-index: var(--z-filtre);
    background: var(--amber); color: #fff;
    text-align: center; font-size: var(--pt-rozet); font-weight: 700;
    letter-spacing: 0.04em; padding: 3px 10px;
  }
  .rozet.svelte-kodyt8 {
    position: fixed; right: 10px; bottom: 10px; z-index: var(--z-filtre);
    cursor: pointer;
    /* Dokunma hedefi asgarisi 24px (WCAG 2.2 AA) — Playwright ölçümünde
       46×17 çıkmıştı, rozet yüksekliği tek başına yetmiyor. */
    min-block-size: 24px;
  }
  .rozet.svelte-kodyt8:hover { border-color: var(--vurgu); color: var(--vurgu); }
  .ortu-kapat.svelte-kodyt8 {
    position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
    border: 0; background: transparent; cursor: default;
  }
  .n-kutu.svelte-kodyt8 { position: relative; }
  .bas-metin.svelte-kodyt8 { display: flex; align-items: center; gap: 8px; }
  h2.svelte-kodyt8 { margin: 0; font-size: var(--pt-govde); font-weight: 700; }
  section.svelte-kodyt8 { padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
  section.svelte-kodyt8:last-child { border-bottom: 0; }
  .satirbas.svelte-kodyt8 { display: flex; align-items: baseline; gap: 8px; }
  .satirbas.svelte-kodyt8 strong:where(.svelte-kodyt8) { font-size: var(--pt-govde); font-weight: 700; }
  time.svelte-kodyt8 { color: var(--soluk); font-size: var(--pt-etiket); font-weight: 500; }
  ul.svelte-kodyt8 { margin: 4px 0 0; padding-inline-start: 16px; }
  li.svelte-kodyt8 { margin: 2px 0; font-size: var(--pt-hucre); }
  .bos.svelte-kodyt8 { color: var(--soluk); margin: 12px 0; font-size: var(--pt-govde); }

  .bekle.svelte-1mozrhd { min-height: 100dvh; display: grid; place-items: center; color: var(--soluk); }

  svg.svelte-d5dn8y { display: block; flex: none; }
  .ikon-yok.svelte-d5dn8y {
    display: inline-grid; place-items: center;
    border: 2px solid var(--hata); border-radius: 3px;
    color: var(--hata); font-size: 11px; font-weight: 700; line-height: 1;
  }

  .hizli.svelte-1tdx387 { display: grid; gap: 8px; margin-bottom: 8px; }
  .bas.svelte-1tdx387 { display: flex; align-items: center; gap: 6px; }
  .gec.svelte-1tdx387 { inline-size: 100%; min-block-size: 36px; font-weight: 700; }
  .baglantilar.svelte-1tdx387 { display: flex; flex-wrap: wrap; gap: 6px; }
  .baglantilar.svelte-1tdx387 .n-btn:where(.svelte-1tdx387) { text-decoration: none; color: var(--vurgu); font-size: var(--pt-etiket); }
  .not.svelte-1tdx387 { margin: 0; color: var(--soluk); font-size: var(--pt-etiket); font-weight: 500; }
  .not.svelte-1tdx387 code:where(.svelte-1tdx387) { font-weight: 700; color: var(--metin); }
  .hata-kutu.svelte-1tdx387, .uyari-kutu.svelte-1tdx387 {
    display: flex; align-items: center; gap: 6px; margin: 0;
    padding: 8px 10px; border-radius: var(--r-input);
    font-size: var(--pt-etiket); font-weight: 600;
  }
  .hata-kutu.svelte-1tdx387 { border: 1px solid var(--hata-alan-kenar); background: var(--hata-alan-zemin); color: var(--rozet-kirmizi-metin); }
  .uyari-kutu.svelte-1tdx387 { border: 1px solid var(--rozet-amber-kenar); background: var(--rozet-amber-bg); color: var(--rozet-amber-metin); }

  .kim.svelte-gd826i {
    font-size: var(--pt-rozet); font-weight: 700; letter-spacing: 0.03em;
    padding: 2px 8px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.14); color: #fff;
    max-inline-size: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .alt.svelte-gd826i { margin: 0; color: var(--soluk); font-size: 0.85rem; }
  .kim.svelte-gd826i { color: var(--soluk); font-size: 0.9rem; }

  main.svelte-gd826i { max-width: 68rem; margin: 0 auto; padding: 1.5rem; }
  section.svelte-gd826i { margin-bottom: 2.5rem; }
  .baslik.svelte-gd826i { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
  h2.svelte-gd826i { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em;
       color: var(--soluk); margin: 0; }

  .genel.svelte-gd826i { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
  .genel.ok.svelte-gd826i    { background: color-mix(in srgb, var(--iyi) 15%, transparent); color: var(--iyi); }
  .genel.uyari.svelte-gd826i { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
  .genel.hata.svelte-gd826i  { background: color-mix(in srgb, var(--hata) 15%, transparent); color: var(--hata); }

  .izgara.svelte-gd826i { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .kart.svelte-gd826i { border: 1px solid var(--cizgi); border-radius: 12px; padding: 1rem; background: var(--yuzey); }
  .kart.uyari.svelte-gd826i { border-color: color-mix(in srgb, var(--amber) 55%, var(--cizgi)); }
  .kart.hata.svelte-gd826i  { border-color: color-mix(in srgb, var(--hata) 55%, var(--cizgi)); }
  .ust.svelte-gd826i { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  h3.svelte-gd826i { margin: 0; font-size: 0.9rem; font-family: ui-monospace, SFMono-Regular, monospace;
       color: var(--soluk); font-weight: 600; }
  .buyuk.svelte-gd826i { margin: 0.5rem 0 0.6rem; font-size: 2rem; font-weight: 700;
           letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .buyuk.kucuk.svelte-gd826i { font-size: 1.25rem; }
  .nokta.svelte-gd826i { width: 9px; height: 9px; border-radius: 999px; flex: none; }
  .nokta.ok.svelte-gd826i { background: var(--iyi); }
  .nokta.uyari.svelte-gd826i { background: var(--amber); }
  .nokta.hata.svelte-gd826i { background: var(--hata); }
  .aciklama.svelte-gd826i { margin: 0.35rem 0 0; color: var(--soluk); font-size: 0.82rem; }
  .mesaj.svelte-gd826i { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--amber); }
  dl.svelte-gd826i { margin: 0.75rem 0 0; display: grid; gap: 0.25rem; font-size: 0.82rem; }
  dl.svelte-gd826i div:where(.svelte-gd826i) { display: flex; justify-content: space-between; gap: 0.5rem; }
  dt.svelte-gd826i { color: var(--soluk); }
  dd.svelte-gd826i { margin: 0; font-variant-numeric: tabular-nums; }
  .sure.svelte-gd826i { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--soluk); }
  .grup.svelte-gd826i {
    margin: 0.9rem 0 0.3rem; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--soluk);
    padding-top: 0.6rem; border-top: 1px dashed var(--cizgi);
  }
  dl.kumulatif.svelte-gd826i dd:where(.svelte-gd826i) { color: var(--soluk); }
  dl.svelte-gd826i div[title]:where(.svelte-gd826i) { cursor: help; }

  .cubuk.svelte-gd826i { height: 6px; border-radius: 999px; background: var(--cizgi); overflow: hidden; }
  .cubuk.svelte-gd826i span:where(.svelte-gd826i) { display: block; height: 100%; background: var(--vurgu); }
  .kart.uyari.svelte-gd826i .cubuk:where(.svelte-gd826i) span:where(.svelte-gd826i) { background: var(--amber); }
  .kart.hata.svelte-gd826i  .cubuk:where(.svelte-gd826i) span:where(.svelte-gd826i) { background: var(--hata); }
  .cubuk.ince.svelte-gd826i { display: inline-block; width: 4rem; height: 5px;
                vertical-align: middle; margin-right: 0.4rem; }

  .tablo-sar.svelte-gd826i { overflow-x: auto; }
  table.svelte-gd826i { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
  th.svelte-gd826i, td.svelte-gd826i { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cizgi); }
  th.svelte-gd826i { color: var(--soluk); font-weight: 600; font-size: 0.78rem;
       text-transform: uppercase; letter-spacing: 0.04em; }
  .is-rozet.svelte-gd826i { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--cizgi); }
  .is-rozet.calisiyor.svelte-gd826i { background: color-mix(in srgb, var(--vurgu) 18%, transparent); color: var(--vurgu); }
  .is-rozet.bitti.svelte-gd826i { background: color-mix(in srgb, var(--iyi) 15%, transparent); color: var(--iyi); }
  .is-rozet.hata.svelte-gd826i  { background: color-mix(in srgb, var(--hata) 15%, transparent); color: var(--hata); }

  .bos.svelte-gd826i { color: var(--soluk); font-size: 0.9rem; margin: 0; }
  .damga.svelte-gd826i { color: var(--soluk); font-size: 0.78rem; text-align: center; }
  .hata.svelte-gd826i { padding: 0.7rem 0.9rem; border-radius: 8px; margin: 0 0 1.5rem;
          background: color-mix(in srgb, var(--hata) 12%, transparent); color: var(--hata); }