/*
  Copyright (c) 2026 Tayfun Şimşek. Tüm hakları saklıdır / All rights reserved.
  Proprietary and confidential. 5846 sayılı FSEK kapsamında korunan eserdir;
  bir hizmet sözleşmesi kapsamında DEĞİL, bağımsız olarak meydana getirilmiştir.
  İzinsiz kopyalanamaz, değiştirilemez, dağıtılamaz. Ayrıntı: LICENSE
*/

/*
  Purpose / Amaç: DESIGN_SYSTEM belirteçleri ve M1 bileşenleri.
  Kural: ekranda sabit renk/boşluk yazılmaz — yalnızca bu belirteçler (§15 UIStandard).
  Tema: açık varsayılan; koyu değerler SEÇİLMİŞ karşılıklardır, otomatik ters çevirme değil.
*/

:root {
  /* Yüzey ve mürekkep — DESIGN_SYSTEM §2.1 */
  --plane: #f6f5f1;
  --surface-1: #fffefb;
  /* Seçili/üzerine gelinen satırın yüzeyi. NEDEN AYRI BELİRTEÇ / WHY ITS OWN TOKEN:
     eskiden seçili öğe `--plane` kullanıyordu; koyu temada plane yüzeyden DAHA KOYU
     olduğu için seçim bir ÇUKUR gibi görünüyordu — seçili öğe hep daha AYDINLIK olmalı. */
  --surface-2: #efede6;
  --ink-primary: #17160f;
  --ink-secondary: #4f4d46;
  /* Sönük metin: saha koşulu (§2.1 "açık gri metin YASAK") gereği koyulaştırıldı;
     zeminde 4.98:1 — eski değer sınırdaydı. */
  --ink-muted: #6c6960;
  --hairline: #e5e2d9;
  --border: rgba(23, 22, 15, .09);
  /* Kaydırma gölgesi — açık temada koyu, koyu temada AÇIK olmalı;
     yoksa siyah zeminde siyah gölge görünmez (D-57). */
  --scroll-shadow: rgba(11, 11, 11, .30);
  /* Durum — §2.2 (sabit, temalanmaz) */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  /* Vurgu — YALNIZCA etkileşim taşır: bağlantı, birincil eylem, seçili öğe, odak halkası.
     §10 gereği VERİ rengi olarak KULLANILMAZ; durum renkleriyle de çakışmasın diye mavi
     seçildi (yeşil/amber/turuncu/kırmızı durum ailesine ayrılmıştır).
     DS1 "bir ekranda tek birincil eylem GÖRSEL OLARAK BASKINDIR" der; renksiz bir arayüz
     bu kuralı yerine getiremez — vurgu süs değil, o kuralın aracıdır. */
  --accent: #1f4e8c;
  --accent-ink: #ffffff;
  --mark-tile: #ffffff;  /* ürün işaretinin karosu — iki temada da beyaz (OS simgesi gibi) */
  /* ÇATI MARKA kelime işareti (§30 HouseStyle, SenSight ailesi): gövde lacivert, vurgu aile
     kırmızısı. Kırmızı YALNIZ marka vurgusudur — hata rengi değildir (--status-critical ayrı). */
  --wordmark-ink: #0D47A1;
  --sight-red: #e53935;
  --font-wordmark: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --accent-soft: rgba(31, 78, 140, .08);
  /* GÖRÜNÜM TURU (28 Eyl 2026) — "Sakin Lüks". Durum renkleri (§2.2) SABİT kalır; açık
     zeminde uyarı/ciddi tonları metin olarak 3:1'in altında kaldığı için her birinin
     METİN tonu ayrıca tanımlandı (--*-ink, hepsi ≥4.5:1). Rozet zemini color-mix ile
     durum renginden türetilir — ikinci bir renk değeri yazılmaz. */
  --good-ink: #1b7a2b;
  --warn-ink: #8f6000;
  --serious-ink: #b04d1d;
  --crit-ink: #b52f2f;
  /* Mühür: yalnız kanıt zincirinde mühürlenmiş kayıt için. Durum değildir, imzadır. */
  --seal: #86662b;
  --seal-soft: rgba(154, 123, 60, .12);
  --shadow-1: 0 1px 2px rgba(23, 22, 15, .04), 0 6px 20px rgba(23, 22, 15, .05);
  --shadow-2: 0 18px 48px rgba(23, 22, 15, .16);
  /* Başlık ve büyük rakam yazısı: sistemde bulunan zarif serifler; yazı dosyası
     indirilmez (çevrimdışı çalışır, §29.1). Gövde sistem sans'ında kalır (§3). */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --r-xl: 16px;
  /* MENÜ ZEMİNİ (BUS deseni, Tayfun 28 Eyl: "BUS'taki renkler iyi"): gezinme koyu lacivert
     bir şerit/panelde durur, içerik açık zeminde. İki temada da AYNI — temalanmaz (şerit
     içerikten her zaman ayrışsın). Kontrastlar: yazı 12.9:1, sönük 5.9:1, seçili 11:1. */
  --rail-bg: #1b2433;
  --rail-bg-2: #243047;
  --rail-ink: #dde3ec;
  --rail-muted: #93a0b5;
  --rail-line: rgba(255, 255, 255, .09);
  --rail-active-bg: rgba(141, 180, 230, .20);
  --rail-active-ink: #ffffff;
  --rail-accent: #8db4e6;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Durum dolgusu (kırmızı acil düğmesi) üstündeki yazı: iki temada da beyaz — dolgu temalanmaz (§2.2). */
  --on-status: #ffffff;
  /* Boşluk/köşe — §4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  color-scheme: light;
}

/* KOYU TEMA — DEĞERLER BİR KEZ, ATAMA İKİ KEZ.
   Koyu palet iki durumda geçerlidir: (a) kullanıcı seçmemiş ve işletim sistemi koyu,
   (b) kullanıcı ÜRÜNDEN koyuyu seçmiş. CSS'te blok tekrar kullanılamaz; iki blok
   şart. Ama HEX değerlerini iki yere yazmak "bir bilgi iki yerde yaşamaz"ı çiğner ve
   biri güncellenip diğeri unutulduğunda iki tema sessizce ayrışır. Bu yüzden değerler
   burada BİR KEZ tanımlanır, aşağıdaki iki blok yalnızca ATAMA yapar. */
:root {
  /* Koyu tema SEÇİLİR, ters çevrilmez (§2.1). Açık tema sıcak (#f9f9f7 / #e1e0d9);
     bu ramp aynı sıcaklıkta ve basamakları AYRIŞIYOR — kart zeminden kalkıyor. */
  --d-plane: #11110f;
  --d-surface-1: #1a1916;
  --d-surface-2: #24231f;
  /* Saf beyaz (#fff) neredeyse siyah zeminde parlar (halation) ve sert okunur.
     Kırık beyaz aynı okunaklılığı verir, gözü yormaz: 16.45:1. */
  --d-ink-primary: #f0eee7;
  --d-ink-secondary: #bdbab0;
  /* Sönük metin koyu temada AYRICA tanımlanır — eskiden açık temanınkiyle aynıydı,
     yani "seçilmemişti" (5.41:1 sınırda). Şimdi 7.19:1. */
  --d-ink-muted: #a29f95;
  --d-hairline: #2f2e29;
  --d-border: rgba(255, 255, 255, .10);
  --d-scroll-shadow: rgba(255, 255, 255, .30);
  --d-accent: #8db4e6;
  --d-accent-ink: #0f1f33;
  --d-accent-soft: rgba(141, 180, 230, .13);
  --d-wordmark-ink: #e2e8f0;  /* §30 wordmarkInkOnDark */
  --d-sight-red: #ff8a80;     /* §30 familyAccentOnDark */
  --d-good-ink: #6ccb7a;
  --d-warn-ink: #f1b93a;
  --d-serious-ink: #ef9a74;
  --d-crit-ink: #f07a7a;
  --d-seal: #d6b56e;
  --d-seal-soft: rgba(214, 181, 110, .12);
  --d-shadow-1: 0 1px 0 rgba(255, 255, 255, .03);
  --d-shadow-2: 0 18px 48px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  /* Seçim YOKSA işletim sistemi karar verir. `:not([data-theme="light"])`: kullanıcı
     açığı SEÇTİYSE koyu bir işletim sistemi onu ezemez. */
  :root:not([data-theme="light"]) {
    --plane: var(--d-plane); --surface-1: var(--d-surface-1); --surface-2: var(--d-surface-2);
    --ink-primary: var(--d-ink-primary); --ink-secondary: var(--d-ink-secondary);
    --ink-muted: var(--d-ink-muted); --hairline: var(--d-hairline); --border: var(--d-border);
    --scroll-shadow: var(--d-scroll-shadow);
    --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --accent-soft: var(--d-accent-soft);
    --wordmark-ink: var(--d-wordmark-ink); --sight-red: var(--d-sight-red);
    --good-ink: var(--d-good-ink); --warn-ink: var(--d-warn-ink); --serious-ink: var(--d-serious-ink);
    --crit-ink: var(--d-crit-ink); --seal: var(--d-seal); --seal-soft: var(--d-seal-soft);
    --shadow-1: var(--d-shadow-1); --shadow-2: var(--d-shadow-2);
    color-scheme: dark;
  }
}

/* Kullanıcı ÜRÜNDEN koyuyu seçtiyse, işletim sistemi açık olsa bile koyu kazanır. */
:root[data-theme="dark"] {
  --plane: var(--d-plane); --surface-1: var(--d-surface-1); --surface-2: var(--d-surface-2);
  --ink-primary: var(--d-ink-primary); --ink-secondary: var(--d-ink-secondary);
  --ink-muted: var(--d-ink-muted); --hairline: var(--d-hairline); --border: var(--d-border);
  --scroll-shadow: var(--d-scroll-shadow);
  --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --accent-soft: var(--d-accent-soft);
  --wordmark-ink: var(--d-wordmark-ink); --sight-red: var(--d-sight-red);
  --good-ink: var(--d-good-ink); --warn-ink: var(--d-warn-ink); --serious-ink: var(--d-serious-ink);
  --crit-ink: var(--d-crit-ink); --seal: var(--d-seal); --seal-soft: var(--d-seal-soft);
  --shadow-1: var(--d-shadow-1); --shadow-2: var(--d-shadow-2);
  color-scheme: dark;
}

/* --- Temel ------------------------------------------------------------- */
* { box-sizing: border-box; }
/* `hidden` niteliği her zaman kazanır: bir sınıfın `display`'i (ör. .btn inline-flex) UA'nın
   [hidden] kuralını EZİYORDU — devriye "Fotoğrafı çek" çekimden sonra ekranda kalıyordu (09.10,
   emülatör). Aynı hata .exit-warn ve .scan-box'ta tek tek yamanmıştı; kök çözüm burası. */
[hidden] { display: none !important; }
html { font-size: 16px; } /* §12 erişilebilirlik: gövde 16px altına inmez */
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink-primary);
  font-family: var(--font-body);
  line-height: 1.5;
}
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--s4); }
h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--s3); }
h3 { font-size: 1rem; font-weight: 600; margin: var(--s5) 0 var(--s2); }
.muted { color: var(--ink-secondary); font-size: .875rem; }
code { font-size: .875rem; }

/* Bağlantı. NEDEN / WHY: eskiden GENEL bir bağlantı kuralı YOKTU — bağlantılar tarayıcı
   varsayılanına kalıyordu, yani ekranda "tıklanabilir" bilgisini yalnız alt çizgi
   taşıyordu. Vurgu rengi bunu ekliyor; alt çizgi KALIYOR (§2.1: bilgi yalnızca renkle
   iletilmez — renk körü kullanıcı için çizgi tek başına yeterli olmalı). */
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-primary); }

/* Odak halkası her zaman görünür (§12) — outline:none YASAK */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Üst çubuk ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}
.brand { font-weight: 650; color: var(--ink-primary); text-decoration: none; }
.topbar-end { display: flex; align-items: center; gap: var(--s2); }

/* --- Seçici (dil · görünüm) ---------------------------------------------
   `details` kullanılır, JS DEĞİL (§29.1): açılır liste JS yüklenmeden de çalışır.
   Eskiden diller üst çubukta iki bağlantı olarak YAZILIYDI; taban 12 dilde (§14, D-35)
   o şerit taşmaz, kırılır. Seçici sayıdan bağımsızdır: 2 dil de 12 dil de aynı yer. */
.picker { position: relative; }
.picker > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--s1);
  min-width: 40px; min-height: 32px; padding: 0 var(--s2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--ink-secondary); font-size: .8125rem; font-weight: 600;
  letter-spacing: .02em;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary:hover { color: var(--ink-primary); background: var(--surface-2); }
.picker[open] > summary { color: var(--ink-primary); background: var(--surface-2); }
/* Görünüm seçicisinin göstergesi: yarısı mürekkep, yarısı zemin — temayı ANLATIR,
   bir simge adı ezberletmez. */
.theme-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--ink-secondary);
  background: linear-gradient(to right, var(--ink-secondary) 0 50%, transparent 50% 100%);
}
.picker-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + var(--s1)); z-index: 20;
  display: flex; flex-direction: column; min-width: 10rem;
  padding: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-1); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.picker-menu a {
  color: var(--ink-secondary); text-decoration: none;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  min-height: 36px; display: flex; align-items: center; white-space: nowrap;
}
.picker-menu a:hover { background: var(--surface-2); color: var(--ink-primary); }
.picker-menu a[aria-current="true"] { color: var(--ink-primary); font-weight: 600; }
/* Seçili satır yalnız kalın yazıyla ayrılmaz (§2.1: bilgi yalnızca renkle/ağırlıkla
   iletilmez) — önüne bir işaret konur. */
.picker-menu a[aria-current="true"]::before {
  content: "✓"; margin-inline-end: var(--s2); color: var(--accent);
}
@media (pointer: coarse) {
  /* Dokunmatikte hedef 44px'in altına inmez (§15). */
  .picker > summary { min-height: 44px; }
  .picker-menu a { min-height: 44px; }
}

/* Müşteri markası — ÜRÜNÜN YANINDA, yerine değil (D-56).
   Ürün markası 650 ağırlıkta ve tam renkte; müşteri markası ikincil renkte, daha
   küçük ve logosu ürün markasının görsel ağırlığını AŞAMAZ (yükseklik sınırı).
   Dar ekranda müşteri markası gizlenir — ürün kimliği hiçbir kırılımda kaybolmaz. */
.brand-sep { color: var(--ink-muted); }
.brand-customer {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--ink-secondary); font-size: .875rem;
  max-width: 22ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.brand-logo { height: 20px; width: auto; max-width: 80px; object-fit: contain; }
@media (max-width: 599px) {
  .brand-sep, .brand-customer { display: none; }
}

/* --- Kabuk ve gezinme — DESIGN_SYSTEM §5 Layout.patterns ----------------
   expanded (>1024): kalıcı YAN gezinme + içerik
   medium (600–1024): üstte yatay kayan şerit
   compact (<600): ALT çubuk (birincil eylem baş parmak erişiminde)
   Her kırılımda `minmax(0, 1fr)`: içerik kolonu KÜÇÜLEBİLİR olmalı, yoksa geniş tablo
   sayfa gövdesini yatay kaydırır (§5 "sayfa gövdesi yatay kaymaz"). */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.sidenav { display: flex; gap: var(--s1); }
.sidenav a {
  color: var(--ink-secondary); text-decoration: none;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  min-height: 44px; display: flex; align-items: center; white-space: nowrap;
}
.sidenav a:hover { background: var(--surface-2); color: var(--ink-primary); }
/* Seçili gezinme öğesi: sol kenarda vurgu çubuğu + hafif zemin. Çubuk SÜS DEĞİL —
   "buradasın" bilgisini yalnız kalın yazıya bırakmak zayıf bir işaretti (§2.1: bilgi
   yalnızca renkle iletilmez; burada renk + ağırlık + konum birlikte çalışıyor). */
.sidenav a[aria-current="page"] {
  background: var(--accent-soft); color: var(--ink-primary); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* --- GERİ YOLU (§15.1 returnPath) ---------------------------------------
   Gezinme kabuğunun İLK öğesi, üç kırılımda da. Bir HEDEF değil bir DENETİM olduğu
   için gezinme bağlantılarından ayrı okunur: kenarlıklı, ikinci derecede.
   `position: sticky` NEDEN: şerit ve alt çubuk yatay KAYIYOR (13 bağlantı sığmıyor);
   sıradan bir öğe olsaydı kullanıcı sağa kaydırınca geri EKRANDAN ÇIKARDI ve
   "her zaman görünür" kuralı sessizce bozulurdu. */
.navback {
  display: inline-flex; align-items: center; gap: var(--s2);
  flex: none; min-height: 44px; padding: var(--s2) var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink-primary);
  text-decoration: none; font-weight: 600; white-space: nowrap;
  position: sticky; inset-inline-start: 0; z-index: 1;
}
.navback:hover { background: var(--surface-2); }
/* Kök ekran: GİZLENMEZ, sönük. Tıklanamaz olduğu imleçle de söylenir. */
.navback.is-off {
  color: var(--ink-muted); background: transparent;
  border-style: dashed; cursor: default;
}
/* Ok bir GÖRSEL değil metindir; RTL'de yön kendiliğinden dönmez, çevrilir. */
.navback-arrow { display: inline-block; font-size: 1.05em; line-height: 1; }
[dir="rtl"] .navback-arrow { transform: scaleX(-1); }

/* Grup başlığı: hangi ekranın hangi işe ait olduğunu söyler. Yalnız yan panelde
   görünür — mobildeki yatay şeritte bir bölme değil, araya giren bir kelime olurdu. */
.nav-group { display: none; }

@media (min-width: 1025px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .shell.no-nav { grid-template-columns: minmax(0, 1fr); }
  .sidenav {
    flex-direction: column; align-self: start; position: sticky; top: 0;
    padding: var(--s3) var(--s3) var(--s5); border-inline-end: 1px solid var(--hairline);
    max-height: 100vh; overflow-y: auto;
  }
  .nav-group {
    display: block; margin: var(--s4) 0 var(--s1); padding-inline: var(--s3);
    font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-muted);
  }
  .nav-group:first-child { margin-top: 0; }
  /* Yan panel dikey: geri tam genişlikte durur ve gruplardan ince bir çizgiyle ayrılır —
     bir gezinme öğesi değil, kabuğun kendi denetimidir. */
  .navback {
    display: flex; justify-content: flex-start; margin-bottom: var(--s3);
    padding-bottom: var(--s2); position: static;
  }
}

/* MASAÜSTÜ YOĞUNLUĞU (2026-08-30). `min-height: 44px` DOKUNMA hedefi kuralıdır (§15) ve
   dokunmatikte aynen kalır — ama fareyle kullanılan bir yan panelde 16 bağlantı × 44px
   ekrana SIĞMIYORDU: yan panel kendi kaydırma çubuğunu açıyor, sayfayla birlikte ekranda
   İKİ kaydırma çubuğu oluyordu. İşaretçi ince olduğunda hedef küçültülür; kural
   çiğnenmez, kapsamı doğru okunur. */
@media (min-width: 1025px) {
  .sidenav a { min-height: 34px; padding-block: var(--s1); font-size: .9375rem; }
}
/* DOKUNMATİK GERİ KAZANIR: geniş ama DOKUNMATİK bir ekranda (hibrit dizüstü) hedef
   44px'e döner — §15 hiçbir cihazda gevşemez, yalnız kapsamı doğru okunur.
   DİKKAT / CAUTION — bu kuralı geliştirirken YANLIŞ TEŞHİS koydum, notu bırakıyorum:
   değişiklik ekranda görünmüyordu ve suçu `pointer` medya sorgusuna attım. Suçlu o
   değildi — service worker BAYAT CSS sunuyordu (D-65 ailesi). Ölçünce çıktı:
   `pointer: fine` = true, `min-height` = 34px, yani kural en baştan çalışıyordu.
   Ders: bir CSS değişikliği "uygulanmıyor" görünüyorsa önce TARAYICININ HANGİ CSS'İ
   okuduğu doğrulanır (`getComputedStyle` + `fetch(cache:'reload')`), kural yeniden
   yazılmaz. Ekran görüntüsü, önbellek varken bir kanıt değildir. */
@media (min-width: 1025px) and (pointer: coarse) {
  .sidenav a { min-height: 44px; }
}
@media (min-width: 600px) and (max-width: 1024px) {
  .sidenav {
    --nav-bg: var(--plane);          /* kaydırma gölgesi bu rengin üstüne biner */
    overflow-x: auto; padding: var(--s2) var(--s4);
    border-bottom: 1px solid var(--hairline);
    /* §15.1: geri denetimi HER ZAMAN ekranda görünür olmalı. Bu kırılımda şerit
       sayfayla birlikte yukarı kayıyordu; geniş ekranda zaten `sticky` olan kabuk
       burada da yapışık hâle getirildi. Alt çubuk (compact) zaten `fixed`. */
    position: sticky; top: 0; z-index: 10;
    background-color: var(--plane);
  }
}

/* KAYDIRMA GÖLGESİ — "devamı var" işareti, JS'siz (D-57).
   Şerit/alt çubuk 13 bağlantıyı taşıyamaz; son bağlantı ortadan kesilir ve kullanıcı
   daha fazlası olduğunu ANLAMAZ. Gölge yalnız kaydırılacak yer VARKEN görünür ve uca
   gelince kendiliğinden kaybolur — bu, `background-attachment: local` sayesinde
   olur (kapaklar içerikle KAYAR, gölgeler kabında SABİT durur).
   NEDEN sabit bir soldurma değil: kaydıracak yer yokken de "devamı var" demek,
   kullanıcıya olmayan bir şeyi göstermektir (§4'ün kırık düğme yasağıyla aynı ruh). */
.sidenav {
  background-image:
    linear-gradient(to right, var(--nav-bg, var(--plane)), transparent),
    linear-gradient(to left,  var(--nav-bg, var(--plane)), transparent),
    linear-gradient(to right, var(--scroll-shadow), transparent),
    linear-gradient(to left,  var(--scroll-shadow), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (min-width: 1025px) {
  /* Yan panel dikey; yatay gölge orada anlamsız. */
  .sidenav { background-image: none; }
}
@media (max-width: 599px) {
  /* Alt çubuk: parmak erişimi. Sayfa altına çubuk kadar boşluk bırakılır.
     GÜVENLİ ALAN (D-57): çentikli/ana-çizgili telefonlarda ekranın ALT ŞERİDİ sistemin
     kendi göstergesine aittir. `env(safe-area-inset-*)` eklenmezse alt çubuğun son
     bağlantısı o göstergenin ALTINDA kalır ve dokunulamaz. Bu yalnızca
     `viewport-fit=cover` ile birlikte çalışır — base.html'deki meta ile eşleşir. */
  .sidenav {
    position: fixed; inset: auto 0 0 0; z-index: 10;
    overflow-x: auto;
    padding: var(--s2);
    padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    padding-inline-start: calc(var(--s2) + env(safe-area-inset-left, 0px));
    padding-inline-end: calc(var(--s2) + env(safe-area-inset-right, 0px));
    background: var(--surface-1); border-top: 1px solid var(--hairline);
    --nav-bg: var(--surface-1);
  }
  .page {
    padding-bottom: calc(44px + var(--s6) + env(safe-area-inset-bottom, 0px));
  }
  /* Yatay çevrildiğinde çentik yanda kalır; içerik onun altına girmemeli. */
  .topbar, .page {
    padding-inline-start: calc(var(--s5) + env(safe-area-inset-left, 0px));
    padding-inline-end: calc(var(--s5) + env(safe-area-inset-right, 0px));
  }
}

/* --- ÇIKIŞ UYARISI (§15.1 exitGuard) ------------------------------------
   Kısa ömürlü ve KENDİLİĞİNDEN kaybolur; kalıcı bir engel geri hareketini bozar.
   Alt çubuğun ÜSTÜNDE durur (compact) ve sistemin güvenli alanını sayar (D-57). */
.exit-warn {
  position: fixed; z-index: 20;
  inset-inline: var(--s4); bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-width: 30rem;
  display: flex; justify-content: center; text-align: center;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--ink-primary);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  font-size: .9375rem;
}
/* `display: flex` UA'nın `[hidden]` kuralını EZER — sıfırlanmazsa kutu hep görünür. */
.exit-warn[hidden] { display: none; }
@media (max-width: 599px) {
  /* Alt çubuk 44px + kendi payı; uyarı onun üstüne oturur, örtmez (§15.1 occlusion). */
  .exit-warn { bottom: calc(44px + var(--s5) + env(safe-area-inset-bottom, 0px)); }
}

/* --- Sayfa ve kart ------------------------------------------------------ */
/* `width: 100%` ŞART: `margin: 0 auto` bir ızgara öğesinde `stretch`i iptal eder ve kutu
   `fit-content`e döner — o da içeriğin min-content'ine kilitlenip kabından TAŞAR
   (mevzuat ekranı 390px'te 801px'e şişiyordu, §5 yasağı). Kesin genişlik + max-width
   ortalamayı bozmadan bunu keser. */
.page { width: 100%; padding: var(--s5); max-width: 1200px; margin: 0 auto; min-width: 0; }
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5);
  /* §5 MUST: geniş tablo KENDİ KABINDA yatay kayar — sayfa gövdesi kaymaz */
  overflow-x: auto;
}
.narrow { max-width: 420px; margin: var(--s7) auto 0; }
.card-sub { border-top: 1px solid var(--hairline); margin-top: var(--s4); padding-top: var(--s3); }
.card-sub summary { cursor: pointer; font-weight: 600; padding: var(--s2) 0; }

/* --- Liste+detay (geniş ekran) — DESIGN_SYSTEM §5 ----------------------- */
/* minmax(0, …): ızgara kolonu içeriğin min-content'inin ALTINA inebilmeli. Düz `1fr`
   yazılırsa geniş içerik (mevzuat kural tablosu) kolonu şişirir ve SAYFA GÖVDESİ yatay
   kayar — §5 yasağı. Panellerin kendi `overflow-x: auto`'su ancak kolon küçülebilirse iş görür. */
/* align-items: start — NEDEN / WHY: ızgara varsayılanı `stretch`tir; boş detay paneli
   dolu listenin boyuna kadar UZUYOR ve ekranın yarısı kocaman boş bir kutuya dönüşüyordu.
   Boşluk tasarım öğesidir (DS5) ama BOŞ KUTU değildir. */
.split {
  display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: var(--s5); align-items: start;
}
.pane-list, .pane-detail {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  max-width: 900px;
}
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
@media (max-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr); }  /* medium/compact: tek kolon */
}

/* --- Ağaç ---------------------------------------------------------------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-inline-start: var(--s4); border-inline-start: 1px solid var(--hairline); }
.tree a {
  display: block; padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-primary); text-decoration: none;
  min-height: 44px; display: flex; align-items: center; gap: var(--s2); /* §15 hedef */
}
.tree a:hover { background: var(--surface-2); }
/* Ölçek: blok altındaki bölümler KAPALI açılır (D-54). Özet satırı da 44px hedef (§15). */
.tree-group > summary {
  cursor: pointer; list-style: none;
  padding: var(--s2) var(--s3); margin-inline-start: var(--s4);
  min-height: 44px; display: flex; align-items: center;
  color: var(--ink-secondary); font-size: .875rem; border-radius: var(--r-sm);
}
.tree-group > summary:hover { background: var(--plane); color: var(--ink-primary); }
.tree-group > summary::before { content: "▸"; margin-inline-end: var(--s2); }
.tree-group[open] > summary::before { content: "▾"; }
.tree a[aria-current="true"] {
  background: var(--accent-soft); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* --- Form ---------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack label { display: flex; flex-direction: column; gap: var(--s1); font-size: .875rem; font-weight: 500; }
/* DIKKAT: `.stack label` (0,1,1) `.row`'dan (0,1,0) daha ozgul; ozel eziciyi
   KALDIRMA, yoksa onay kutusu ve metni ALT ALTA ve ortalanmis dizilir
   (giris ekraninda "Beni hatirla", oylamada evet/hayir/cekimser). */
.stack label.row { flex-direction: row; align-items: center; min-height: 44px; }
/* flex-wrap YOKSA satir min-content'in altina inemez ve sayfa YATAY KAYAR (§5 yasak):
   uzun etiketli dugme + metin kutusu dar ekrana sigmiyordu. */
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row > input, .row > select { min-width: 0; }
input, select {
  font: inherit; color: var(--ink-primary);
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  min-height: 44px;  /* §15 dokunma hedefi */
}
/* Onay kutusu ve radyo METIN KUTUSU degildir: kutu gorunumunu almaz.
   §15 dokunma hedefini saran ETIKET tasir (yukaridaki .stack label.row). */
input[type="checkbox"], input[type="radio"] {
  min-height: 0; padding: 0; border: none; background: none;
  inline-size: 1.125rem; block-size: 1.125rem;
  flex: none; accent-color: var(--accent);
}
input:focus, select:focus { border-color: var(--ink-secondary); }

/* --- Düğme — ekranda TEK birincil eylem (DS1) ---------------------------- */
.btn {
  font: inherit; font-weight: 600;
  /* Alt çizgi BAĞLANTI işaretidir. Bağlantı olarak yazılmış bir düğme (a.btn) genel
     bağlantı kuralından alt çizgiyi miras alıyordu: kutu + alt çizgi iki farklı şey
     söyler, kullanıcı hangisi olduğuna karar veremez. */
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s4);
  min-height: 44px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s cubic-bezier(.2,0,0,1);
}
/* DS1: ekrandaki TEK birincil eylem görsel olarak baskındır. */
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink-primary); border-color: var(--hairline); }
.btn.ghost:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Negatif tutar. NEDEN / WHY: mali bir üründe "-54.516,66 ₺" ile "54.516,66 ₺" aynı
   görünürse gözden kaçar; eksi işareti tek başına zayıf bir sinyaldir (özellikle uzun
   sayı dizisinin başında). Renk İŞARETİ DEĞİŞTİRMEZ, güçlendirir — eksi işareti yerinde
   durur (§2.1: bilgi yalnızca renkle iletilmez). */
.neg { color: var(--status-critical); }

/* --- Tablo — tutarlar sağa, tabular (DESIGN_SYSTEM §7) ------------------- */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
  text-align: start; color: var(--ink-muted); font-weight: 500;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline);
}
.table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline); }
.num { font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); }
.facts dt { color: var(--ink-muted); font-size: .875rem; }
.facts dd { margin: 0; }

/* --- Mali pano: kahraman rakam + istatistik satırı (DESIGN_SYSTEM §7/§10) - */
.hero-card { margin-bottom: var(--s4); }
.hero-label { color: var(--ink-secondary); font-size: .875rem; font-weight: 500; }
.hero-figure { font-size: 2rem; font-weight: 650; line-height: 1.25; margin: var(--s1) 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--s4); margin-bottom: var(--s5); }
.stat-figure { font-size: 1.25rem; font-weight: 600; }

/* Dayanak satırı (RuleBasisLine — D-18): mevzuattan türeyen rakamın kaynağı */
.basis-line { color: var(--ink-secondary); font-size: .875rem; margin-top: var(--s1); }

/* Durum rozetleri — renk tek başına anlam taşımaz; ikon+metin eşlik eder (§2.2) */
.badge.b-good { border-color: var(--status-good); color: var(--status-good); }
.badge.b-warning { border-color: var(--status-warning); }
.badge.b-serious { border-color: var(--status-serious); color: var(--status-serious); }

.notice {
  background: var(--surface-1);
  border: 1px solid var(--status-good);
  border-inline-start-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}

/* --- Rozet ve uyarı ------------------------------------------------------ */
.badge {
  display: inline-block; font-size: .75rem; font-weight: 500;
  color: var(--ink-secondary);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0 var(--s2); vertical-align: middle;
}
.alert {
  background: var(--surface-1);
  border: 1px solid var(--status-serious);
  border-inline-start-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.invite-link {
  display: block; word-break: break-all;
  background: var(--plane); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s3);
}

/* --- Yazdırma (DESIGN_SYSTEM §11) ---------------------------------------- */
/* Yazdırılan belgede marka — D-56. Üst bilgi MÜŞTERİ, alt satır ÜRÜN (kaldırılamaz). */
.print-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.print-brand-logo { height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.print-brand-name { font-weight: 600; font-size: 1.125rem; }
/* Yasal satırlar (unvan/adres/vergi): belgede VAR olmalı ama markanın
   görsel ağırlığını aşmamalı — okunur, öne çıkmaz. */
.print-legal { font-size: .8125rem; color: var(--ink-secondary); }
.print-product-line {
  margin-top: var(--s6); padding-top: var(--s2);
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted); font-size: .75rem;
}

@media print {
  /* .no-print: şablonların güvendiği kaçış — tanımsız kalırsa ekran öğesi kâğıda basılır */
  .topbar, .sidenav, .btn, form, details, .langs, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .pane-list, .pane-detail { border: none; padding: 0; }
}

/* KÂĞIT OY FORMU (F-414, D-115) — kutular elle işaretlenir, imza satırı boş bırakılır;
   yazdırırken her form kendi sayfasına düşer. */
.ballot-boxes { list-style: none; padding: 0; display: grid; gap: .75rem; }
.ballot-box { display: inline-block; width: 1.4em; height: 1.4em; border: 2px solid currentColor;
  vertical-align: middle; margin-right: .5em; }
.sign-line { border-bottom: 1px solid currentColor; min-height: 2em; }
@media print {
  .ballot-page { break-after: page; page-break-after: always; }
  .ballot-page:last-of-type { break-after: auto; page-break-after: auto; }
}

/* Kural metni gibi yöneticinin yazdığı çok satırlı düz metin: satır sonları korunur
   (F-508). HTML olarak yorumlanmaz — Jinja kaçışı devrede kalır. */
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Geniş tablo (portföy): dar ekranda SAYFA değil tablo kayar (§15 — yatay sayfa kaydırma yok). */
/* `.table-wrap` (vardiya, puantaj, uyum matrisi, ihale) kuralsız kalmıştı: telefonda gün
   sütunları kesiliyor ve kaydırılamıyordu (04.10 dar ekran turu). Aynı kurala bağlandı. */
.table-scroll, .table-wrap { overflow-x: auto; }

/* MİSAFİR KAPISI (D-125) — hüküm uzaktan okunur: kalın kenarlık, büyük başlık. Renk tek
   başına bilgi taşımaz (§15 erişilebilirlik): başlık metni hükmü zaten söylüyor. */
.gate { border-width: 4px; border-style: solid; }
.gate-ok { border-color: var(--status-good); }
.gate-no { border-color: var(--status-serious); }
.gate h1 { font-size: 2rem; }
.qr-box { display: flex; justify-content: center; background: #fff; padding: .75rem; border-radius: 8px; }
.qr-box svg { width: min(100%, 280px); height: auto; }
.code-big { font-size: 1.5rem; letter-spacing: .15em; }
.copy-field { width: 100%; }

/* İMZA FÖYÜ (D-132) — imza hanesi elle doldurulur; satırlar yazdırırken bölünmez. */
.sig-cell { width: 28%; min-height: 2.2em; border-bottom: 1px solid currentColor; }
.sig-table tr { break-inside: avoid; page-break-inside: avoid; }
.sig-table td { height: 2.4em; }

/* Kapı masası kamera tarayıcısı (D-133) */
.scan-box { display: grid; gap: .5rem; }
.scan-box video { width: min(100%, 420px); border-radius: 8px; background: #000; }

/* ÇEVİRİ GÖZDEN GEÇİRME (D-136) — dört sütun; düzeltme kutusu satırın en genişi. Hatalı
   satır kenarlıkla ve metinle işaretlenir (renk tek başına bilgi taşımaz, §15). */
.i18nrev-filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.i18nrev-table textarea { width: 100%; min-width: 12rem; }
.i18nrev-table td { vertical-align: top; }
.i18nrev-ok { text-align: center; width: 4.5rem; }
.i18nrev-key { font-size: .75rem; word-break: break-all; }
.i18nrev-table tr.row-error { outline: 2px solid var(--status-serious); }
.field-error { display: block; color: var(--status-serious); }
.notice-error { border-color: var(--status-serious); }
.pager { display: flex; gap: .75rem; align-items: center; justify-content: center; }

/* DÖNEM ERİŞİMİ (F-208, D-137) */
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* `display:grid` UA'nın `[hidden]` kuralını EZER (bkz. .exit-warn) — kamera kutusu tur
   sırasında hep görünür çıktı (27.09). */
.scan-box[hidden] { display: none; }
/* `.table td` (0,1,1) `.sig-cell`i (0,1,0) eziyordu — imza çizgisi satır ayracı kadar
   soluk kalıyordu (27.09 turunda görüldü). Özgüllük artırıldı. */
.sig-table td.sig-cell, .sig-table th.sig-cell { width: 28%; border-bottom: 1.5px solid currentColor; }

/* OLAY TUTANAĞI (D-140) — özet kodu kırılabilir; beyan ve ek tutanaklar ayrı kutu. */
.digest { font-size: .75rem; word-break: break-all; }
.note-item { border-inline-start: 3px solid var(--hairline); padding-inline-start: var(--s3); margin-block: var(--s3); }
.custody { display: inline-block; margin-top: var(--s1); }
.custody-set { border: 1px solid var(--hairline); border-radius: 8px; padding: var(--s3); }

/* AFET (D-153) — "Önce 112" şeridi her afet ekranının en üstünde; durum düğmeleri büyük ve
   parmakla basılır. Renk tek başına bilgi taşımaz: düğme metni durumu söyler (§15). */
.call112 { border: 3px solid var(--status-critical); border-radius: var(--r-md);
  padding: var(--s3); font-weight: 700; font-size: 1.1rem; }
.call112 a { font-size: 1.4rem; }
.status-buttons { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.status-buttons button { font-size: 1.25rem; padding: var(--s4); min-height: 64px; }
.status-safe { border: 3px solid var(--status-good); }
.status-help { border: 3px solid var(--status-serious); }
.status-trapped { border: 3px solid var(--status-critical); }
.rescue-trapped td:first-child, .rescue-help td:first-child { font-weight: 700; }
.rescue-none { background: var(--surface-2); }
.card-photo { max-width: 100%; height: auto; max-height: 260px; border-radius: var(--r-sm); }
/* D-212: tahliye krokisi — tam genişlik, basılırken sayfaya sığar ve bölünmez. */
.kroki { margin: var(--s2) 0; break-inside: avoid; }
.kroki-img { max-width: 100%; max-height: 70vh; width: auto; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--r-sm); }
@media print { .kroki-img { max-height: none; width: 100%; } }
/* D-212 devriye anlık fotoğrafı: kamera akışı doğal boyutunda (ör. 480×640) kartı taşırıyordu. */
.pat-kamera video:not([hidden]), .pat-kamera img:not([hidden]) { display: block; width: 100%; max-width: 100%; height: auto;
  max-height: 60vh; object-fit: contain; background: #000; border-radius: var(--r-sm); }
@media (min-width: 640px) { .status-buttons { grid-template-columns: repeat(3, 1fr); } }
@media print { .rescue-none { background: #eee; } .call112 { border-color: #000; } }

/* ALARM (D-157) — acil uyarı ekranı kaplar ve kapatılmadan geçilmez; önemli uyarı üstte şerit.
   Renk tek başına bilgi taşımaz: başlık "ACİL" / "ÖNEMLİ" diye yazar (§15). */
.alarm-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: var(--s3); padding: var(--s5);
  background: var(--plane); border: 10px solid var(--status-critical); text-align: center; }
.alarm-overlay .alarm-title { font-size: 1.8rem; }
.alarm-banner { position: fixed; top: var(--s3); left: 50%; transform: translateX(-50%);
  z-index: 999; max-width: min(92vw, 640px); padding: var(--s3) var(--s4);
  background: var(--surface-1); border: 4px solid var(--status-warning);
  border-radius: var(--r-md); box-shadow: 0 4px 16px var(--scroll-shadow); }
.alarm-actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
@media print { .alarm-overlay, .alarm-banner { display: none !important; } }

/* S-A1 (D-166): talep yazışması — yönetim ve sakin satırları kenarlıkla ayrılır (renk tek
   başına bilgi taşımaz: satır başı kimin yazdığını söyler). */
.msg-thread { list-style: none; padding: 0; margin: var(--s2) 0; display: grid; gap: var(--s2); }
.msg-thread li { padding: var(--s2) var(--s3); border-radius: var(--r-sm); border: 1px solid var(--border); }
.msg-mgmt { border-left: 4px solid var(--accent) !important; }
.msg-resident { background: var(--surface-2); }

/* D-167: dil seçicideki "çeviri program içindir" notu — menü dar, not kısa satırlara kırılır. */
.picker-note { max-width: 18rem; font-size: .75rem; margin: var(--s2) var(--s2) 0; white-space: normal; }


/* ═════════════════════════════════════════════════════════════════════════
   GÖRÜNÜM KATMANI — "Sakin Lüks" (28 Eyl 2026)
   Tayfun: "menü tren gibi gidiyor, sayfalar çok cansız… gerçekten enfes bir dokunuş".
   Önceki tur yalnız menüye dokunmuştu; ekranlar değişmemiş görünüyordu. Bu katman
   BİLEŞENLERİN kendisini yeniden biçimler — 81 şablonun hepsi aynı anda değişir.
   Kurallar korunur: yalnız belirteç (sabit renk yok), 44 px dokunma hedefi, görünür
   odak, renk tek başına bilgi taşımaz. Geri dönüş: bu bloğu silmek yeter.
   Tasarım tuvali: "Resio Yeni Görünüm" (claude.ai/artifact/HfFup67VLkmoJzj7xiiz3s).
   ═════════════════════════════════════════════════════════════════════════ */

/* --- Tipografi ----------------------------------------------------------- */
body { font-size: 1rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 {
  font-family: var(--font-display); font-weight: 500; font-size: 2.1rem;
  line-height: 1.12; letter-spacing: -.012em; margin-bottom: var(--s3);
}
h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 650; }
.muted { color: var(--ink-secondary); }
.lead { font-size: 1.125rem; color: var(--ink-secondary); max-width: 62ch; }
p.muted { max-width: 76ch; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* --- Üst çubuk ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: var(--s2) var(--s5); min-height: 60px;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.brand-mark svg.i { width: 20px; height: 20px; stroke-width: 2; }
/* Ürün işareti (SenSight Resio, §30): tam renkli metal «S» kendi rengini taşır —
   vurgu zemini onu boğar; beyaz karo, işletim sistemi simgesiyle aynı görünüş. */
.brand-mark:has(img) { background: var(--mark-tile); box-shadow: inset 0 0 0 1px var(--hairline); }
.brand-mark img { width: 32px; height: 32px; display: block; }
.brand-name { font-size: 1.25rem; line-height: 1; }
/* KELİME İŞARETİ — «SenSight Resio» (§30 wordmark + §5.1 brandHierarchy; tanım
   templates/_wordmark.html). Çatı marka iki parça, ARALARINDA BOŞLUK YOK: bu yüzden
   `gap: 0` — `gap` ilk parçayı anonim esnek öğe yapıp araya boşluk sokar (BUS'ta
   haftalarca "Sen Sight" yazdı). Ürün adının boşluğu KENDİ kenar boşluğundan gelir.
   Hiyerarşi: çatı marka renkli ve kalın, ürün adı gövde renginde ve bir kademe hafif. */
.wordmark { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap;
  font-family: var(--font-wordmark); font-weight: 780; letter-spacing: .005em; }
.wm-brand { color: var(--wordmark-ink); }
.wm-accent { color: var(--sight-red); }
.wm-product { margin-inline-start: .28em; font-weight: 560; color: var(--ink-primary); letter-spacing: 0; }
/* Dar telefonda üst şerit dil/tema/çıkış düğmeleriyle dolar: §30 "dar ekranda kelime işareti
   gizlenebilir; SEMBOL gizlenmez". Çatı marka burada işaretin «S»inde kalır; tam ad giriş
   ekranında ve Hakkında'da her boyutta görünür. */
@media (max-width: 480px) {
  .topbar .wm-brand { display: none; }
  .topbar .wm-product { margin-inline-start: 0; }
}
.topbar-end { margin-inline-start: auto; }
.picker > summary { border-radius: 10px; background: var(--surface-1); min-height: 38px; }
.picker-menu { border-radius: 14px; padding: var(--s2); box-shadow: var(--shadow-2); }
.picker-menu a { border-radius: 8px; }
.topbar .btn.ghost { min-height: 38px; border-radius: 10px; }

/* --- Gezinme: içeriğe göre katlanır gruplar ------------------------------ */
.nav-sec > summary { list-style: none; }
.nav-sec > summary::-webkit-details-marker { display: none; }
.nav-group {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer; user-select: none;
  color: var(--ink-secondary); font-size: .8125rem; font-weight: 650; letter-spacing: .01em;
  text-transform: none; border-radius: 10px;
}
.nav-group:hover { color: var(--ink-primary); background: var(--surface-2); }
.nav-group .nav-gicon { width: 17px; height: 17px; color: var(--ink-muted); }
.nav-group.is-here .nav-gicon { color: var(--accent); }
.nav-chev { width: 14px; height: 14px; margin-inline-start: auto; color: var(--ink-muted);
  transition: transform .18s cubic-bezier(.2,0,0,1); }
.nav-sec[open] > summary .nav-chev { transform: rotate(90deg); }
[dir="rtl"] .nav-chev { transform: scaleX(-1); }
[dir="rtl"] .nav-sec[open] > summary .nav-chev { transform: rotate(90deg); }
.sidenav a { gap: var(--s3); border-radius: 10px; }
.sidenav a svg.i { color: var(--ink-muted); width: 17px; height: 17px; }
.sidenav a:hover svg.i { color: var(--ink-primary); }
.sidenav a[aria-current="page"] {
  background: var(--surface-1); color: var(--ink-primary); font-weight: 650;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border);
}
.sidenav a[aria-current="page"] svg.i { color: var(--accent); }
.navback { border-radius: 10px; gap: var(--s2); }
.navback-arrow svg.i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .nav-chev { transition: none; } }

@media (min-width: 1025px) {
  .shell { grid-template-columns: 264px minmax(0, 1fr); }
  .sidenav {
    top: 60px; max-height: calc(100vh - 60px); gap: 2px;
    padding: var(--s4) var(--s3) var(--s6); background: var(--plane);
  }
  .nav-sec { margin-top: var(--s1); }
  .nav-group { display: flex; margin: 0; padding: var(--s2) var(--s3); min-height: 36px;
    font-size: .8125rem; letter-spacing: .01em; text-transform: none; color: var(--ink-secondary); }
  .nav-links { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--s2) var(--s3); }
  .sidenav a { font-size: .9rem; min-height: 36px; }
}
/* Şerit (medium) ve alt çubuk (compact): gruplar birer çip, açık grubun bağlantıları
   çipin yanında akar. Bağlantılar yine tek listeden. */
@media (max-width: 1024px) {
  .nav-sec { flex: none; white-space: nowrap; }
  .nav-group { display: inline-flex; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--border);
    background: var(--surface-1); vertical-align: middle; }
  .nav-sec[open] > .nav-group { background: var(--accent-soft); color: var(--ink-primary); border-color: transparent; }
  .nav-links { display: inline-flex; gap: var(--s1); vertical-align: middle; margin-inline: var(--s1) var(--s2); }
  .nav-glabel { font-size: .8125rem; }
}
@media (max-width: 599px) {
  .sidenav { gap: var(--s2); align-items: center; box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); }
  .sidenav a { flex-direction: column; justify-content: center; gap: 2px; font-size: .72rem;
    min-width: 64px; padding: var(--s1) var(--s2); }
  .sidenav a svg.i { width: 20px; height: 20px; }
  .nav-group .nav-glabel { font-size: .75rem; }
}

/* --- Sayfa ---------------------------------------------------------------- */
.page { max-width: 1240px; padding: var(--s6) var(--s6) var(--s7); }
.page > * + * { margin-top: var(--s5); }
.page > .card + .card, .page > section + section { margin-top: var(--s5); }
/* SAYFA BAŞLIĞI: ekranların neredeyse hepsi başlık + açıklamayı TAŞIYAN bir kartla
   başlıyordu — "gri kart içinde paragraf". Aynı yapı artık kartsız, büyük serif
   başlıklı bir sayfa başlığı olarak okunur; şablonlara dokunmadan 81 ekranda. */
.page > .card:first-child:has(> h1:first-child) {
  background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--s2);
  overflow: visible;
}
.page > .card:first-child:has(> h1:first-child) > h1 { font-size: 2.35rem; margin-bottom: var(--s2); }
.page > .card:first-child:has(> h1:first-child) > p.muted { font-size: 1rem; margin-top: 0; }
.page > h1:first-child { font-size: 2.35rem; }
.page > .card.narrow:first-child:has(> h1:first-child) {
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  padding: var(--s6); border-radius: var(--r-xl);
}

/* --- Kart ----------------------------------------------------------------- */
.card, .pane-list, .pane-detail {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-1);
}
.card { padding: var(--s5) var(--s6); }
.card > h2:first-child, .pane-detail > h2:first-child { margin-bottom: var(--s3); }
.card h2 { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pane-list, .pane-detail { padding: var(--s5); }
.card-sub { border-top-color: var(--hairline); margin-top: var(--s4); padding-top: var(--s4); }
.card-sub > summary, details > summary { cursor: pointer; }
.card-sub > summary { display: flex; align-items: center; gap: var(--s2); font-weight: 650; min-height: 44px;
  list-style: none; }
.card-sub > summary::-webkit-details-marker { display: none; }
.card-sub > summary::before {
  content: ""; width: 7px; height: 7px; border: solid var(--ink-muted); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .16s; margin-inline-end: var(--s1);
}
.card-sub[open] > summary::before { transform: rotate(45deg); }

/* --- Kahraman rakam ve istatistik ---------------------------------------- */
.hero-card { padding: var(--s6); position: relative; overflow: hidden; }
.hero-label { font-size: .8125rem; font-weight: 650; color: var(--ink-muted); letter-spacing: .01em; }
.hero-figure { font-family: var(--font-display); font-weight: 500; font-size: 3.4rem; line-height: 1.05;
  letter-spacing: -.02em; margin: var(--s2) 0 var(--s2); font-variant-numeric: lining-nums tabular-nums; }
.stat-row { gap: var(--s4); }
.stat-row > * {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-1); padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: var(--s1);
}
.stat-row > * > :first-child { font-size: .8125rem; color: var(--ink-muted); font-weight: 600; }
.stat-figure { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -.01em; }
.stat { display: flex; flex-direction: column; gap: 2px; }

/* --- Tablo ---------------------------------------------------------------- */
.table { font-size: .9rem; }
.table th {
  font-size: .75rem; font-weight: 650; letter-spacing: .03em; color: var(--ink-muted);
  padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.table td { padding: var(--s3); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* F-016 YOĞUNLUK (DESIGN_SYSTEM §5): kırılım + işaretçiye göre OTOMATİK, kullanıcı ayarı değil.
   compact  = geniş ekran + FARE: satır ~36px (yönetici/muhasebe tabloları bir bakışta).
   comfortable = dokunmatik: satır ~56px, hedef 44px'in altına inmez (§15).
   Arada (fareli tablet/dar pencere) yukarıdaki varsayılan kalır (~44px). Dokunmatik
   geniş ekran (hibrit dizüstü) compact ALMAZ: sorgu `pointer: fine` ister. */
@media (min-width: 1025px) and (pointer: fine) {
  .table th { padding: var(--s2) var(--s3) var(--s1); }
  .table td { padding: 6px var(--s3); }
}
@media (pointer: coarse) {
  .table td { padding-block: var(--s4); }
}

/* --- Listeler (desk, etkinlik, denetim…) — eskiden tanımsızdı ----------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list > li {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s2); border-bottom: 1px solid var(--hairline); min-height: 52px;
}
.list > li:last-child { border-bottom: 0; }
.list > li > a { font-weight: 550; text-decoration: none; color: var(--ink-primary); }
.list > li > a:hover { color: var(--accent); text-decoration: underline; }
.desk-list > li > .badge { min-width: 5.5rem; justify-content: center; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); margin: var(--s4) 0; }
.kv dt { color: var(--ink-muted); font-size: .875rem; }
.kv dd { margin: 0; }
.facts { gap: var(--s2) var(--s5); }
.facts dt { font-size: .8125rem; font-weight: 600; }

/* --- Rozet: dolgulu yumuşak hap; renk + METİN birlikte (§2.2) ------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 650; line-height: 1.5;
  padding: 2px 10px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-secondary);
}
.badge.b-good { background: color-mix(in srgb, var(--status-good) 13%, transparent); color: var(--good-ink); }
.badge.b-warning { background: color-mix(in srgb, var(--status-warning) 22%, transparent); color: var(--warn-ink); }
.badge.b-serious { background: color-mix(in srgb, var(--status-serious) 18%, transparent); color: var(--serious-ink); }
.badge.b-critical { background: color-mix(in srgb, var(--status-critical) 14%, transparent); color: var(--crit-ink); }
.badge.b-good::before, .badge.b-warning::before, .badge.b-serious::before, .badge.b-critical::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

/* --- Düğme ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border-radius: 10px; padding: var(--s2) var(--s5); letter-spacing: .005em;
  transition: background .14s cubic-bezier(.2,0,0,1), box-shadow .14s, transform .06s;
}
.btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink-primary)); }
.btn.ghost { background: var(--surface-1); border-color: var(--border); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

/* --- Form ------------------------------------------------------------------ */
input, select, textarea {
  border-radius: 10px; background: var(--surface-1); border: 1px solid var(--hairline);
  transition: border-color .12s, box-shadow .12s;
}
textarea { font: inherit; color: var(--ink-primary); padding: var(--s2) var(--s3); min-height: 88px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stack label { font-weight: 600; color: var(--ink-secondary); font-size: .8125rem; gap: 6px; }
.stack label > input, .stack label > select, .stack label > textarea { font-size: 1rem; font-weight: 400; color: var(--ink-primary); }

/* --- Bildirim, uyarı, dayanak -------------------------------------------- */
.notice, .alert {
  border: 0; border-radius: 12px; padding: var(--s3) var(--s4) var(--s3) var(--s5);
  position: relative; background: color-mix(in srgb, var(--status-good) 9%, var(--surface-1));
}
.notice::before, .alert::before {
  content: ""; position: absolute; inset-block: 10px; inset-inline-start: 8px; width: 3px; border-radius: 3px;
  background: var(--status-good);
}
.alert, .notice.notice-error { background: color-mix(in srgb, var(--status-serious) 11%, var(--surface-1)); }
.alert::before, .notice.notice-error::before { background: var(--status-serious); }
.basis-line {
  display: flex; align-items: flex-start; gap: var(--s2); font-size: .8125rem; color: var(--ink-muted);
  padding-top: var(--s2); border-top: 1px dashed var(--hairline); max-width: 90ch;
}
.basis-line::before { content: "§"; font-family: var(--font-display); font-size: 1rem; line-height: 1.1; color: var(--seal); }

/* --- Liste + detay, ağaç -------------------------------------------------- */
.tree a { border-radius: 10px; }
.tree a[aria-current="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.pane-head h1, .pane-head h2 { margin: 0; }

/* --- Olay tutanağı: mühür pirinç ----------------------------------------- */
.digest { color: var(--seal); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.custody-set { border-radius: 12px; background: var(--surface-2); border-color: transparent; }
.note-item { border-inline-start-color: var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0;
  padding: var(--s3) var(--s4); }

/* --- Yazdırma: katman kâğıda taşınmaz ------------------------------------ */
@media print {
  .topbar { position: static; backdrop-filter: none; }
  .card, .pane-list, .pane-detail, .stat-row > * { box-shadow: none; border-radius: 0; }
  h1 { font-family: inherit; }
  .badge { border: 1px solid currentColor; background: none; }
}

/* --- Görünüm turu, 2. dalga: özet kutusu, tahsilat oranı, iş listesi ------- */
.ozet { gap: var(--s3) !important; }
.ozet-bas { display: flex; align-items: center; gap: var(--s3); }
.ozet-karo {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-secondary);
}
.ozet-karo svg.i { width: 18px; height: 18px; }
.ozet-etiket { font-size: .8125rem; font-weight: 650; color: var(--ink-muted); line-height: 1.3; }
.ozet-etiket a { color: inherit; }
.ozet-good .ozet-karo { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--good-ink); }
.ozet-serious .ozet-karo { background: color-mix(in srgb, var(--status-serious) 16%, transparent); color: var(--serious-ink); }
.ozet-accent .ozet-karo { background: var(--accent); color: var(--accent-ink); }
.ozet-alt { font-size: .8125rem; color: var(--ink-muted); }
.stat-row > .ozet > :first-child { font-size: inherit; color: inherit; font-weight: inherit; }

.hero-oran { margin-top: var(--s4); height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; max-width: 520px; }
.hero-oran-dolu { display: block; height: 100%; border-radius: 999px; background: var(--status-good); }
.hero-oran-metin { margin-top: var(--s2); font-size: .875rem; display: flex; gap: var(--s2); align-items: baseline; }
.hero-card { border-top: 3px solid var(--accent); }

.card > h2 svg.i, .page > h2 svg.i { width: 18px; height: 18px; color: var(--ink-muted); }
.page > h2, .page > h3 { font-size: 1.0625rem; font-weight: 650; margin: var(--s6) 0 var(--s3); }
.page > .table, .page > .table-scroll {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-1); padding: var(--s2) var(--s3); display: table;
}
.page > .table-scroll { display: block; }
.eylem-karti { padding-block: var(--s2); }
.eylem-karti .card-sub:first-child { border-top: 0; margin-top: 0; }

.desk-ozet { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0 0; }
.desk-ozet .badge { font-size: .8125rem; padding: 4px 12px; }
.desk-list > li.desk-is { gap: var(--s4); padding: var(--s3) var(--s2); flex-wrap: nowrap; }
.desk-karo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-secondary);
}
.desk-soon .desk-karo { background: color-mix(in srgb, var(--status-warning) 20%, transparent); color: var(--warn-ink); }
.desk-overdue .desk-karo { background: color-mix(in srgb, var(--status-serious) 18%, transparent); color: var(--serious-ink); }
.desk-list > li.desk-is > a { flex: 1 1 auto; min-width: 0; }
.desk-sag { display: inline-flex; align-items: center; gap: var(--s3); flex: none; margin-inline-start: auto; }
@media (max-width: 599px) {
  .desk-list > li.desk-is { flex-wrap: wrap; }
  .desk-sag { margin-inline-start: calc(38px + var(--s4)); }
}

/* --- Görünüm turu, 3. dalga: çıplak bölümler, tablo düğmeleri, nisap ------ */
/* Bazı ekranlar (operasyon…) bölümlerini kartsız, `card-sub` ile sayfaya diziyor. */
.page > .card-sub, .page > section.card-sub, .page > details.card-sub, .page > form.stack {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-1); padding: var(--s4) var(--s6); margin-top: var(--s5);
}
.page > .card-sub > h3:first-child, .page > section.card-sub > h3:first-child { margin-top: var(--s2); font-size: 1.0625rem; }
.table .btn { min-height: 36px; padding: var(--s1) var(--s3); font-size: .8125rem; }
@media (pointer: coarse) { .table .btn { min-height: 44px; } }

.karar-sonuc { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; margin: var(--s2) 0 var(--s3); }
.karar-sonuc.kabul { color: var(--good-ink); }
.karar-sonuc.red { color: var(--serious-ink); }
.nisap { margin-bottom: var(--s3); max-width: 560px; }
.nisap-bas { display: flex; align-items: center; gap: var(--s3); font-size: .875rem; margin-bottom: var(--s1); }
.nisap-bas > .num { margin-inline-start: auto; font-weight: 650; }
.nisap-cubuk { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nisap-cubuk > span { display: block; height: 100%; border-radius: 999px; }
.nisap.gecti .nisap-cubuk > span { background: var(--status-good); }
.nisap.kaldi .nisap-cubuk > span { background: var(--status-serious); }

/* --- Giriş sahnesi ---------------------------------------------------------- */
.giris-sahne {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s6);
  align-items: stretch; max-width: 980px; margin: var(--s6) auto 0;
}
.giris-sahne > .card.narrow { margin: 0; align-self: center; width: 100%; max-width: none; }
.giris-marka {
  position: relative; overflow: hidden; border-radius: 22px; padding: var(--s7) var(--s6);
  /* Koyu lacivert, iki temada AYNI (menü şeridinin zemini): aile kırmızısı mavi vurgu
     zemininde okunmuyordu (#e53935 / #1f4e8c ≈ 2:1). Bu zeminde kelime işareti koyu
     tema değerlerini kullanır (#e2e8f0 + #ff8a80, ikisi de ≥ 7:1). */
  background: var(--rail-bg); color: var(--rail-ink);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px;
}
.giris-isaret {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rail-ink) 16%, transparent); margin-bottom: auto;
}
.giris-isaret svg.i { width: 30px; height: 30px; stroke-width: 2; }
.giris-isaret:has(img) { background: var(--mark-tile); }
.giris-isaret img { width: 52px; height: 52px; display: block; }
.giris-marka .wordmark { --wordmark-ink: var(--d-wordmark-ink); --sight-red: var(--d-sight-red); }
.giris-marka .wm-product { color: var(--rail-ink); }
.giris-ad { font-size: 2.6rem; line-height: 1; margin: var(--s6) 0 var(--s3); letter-spacing: -.015em; }
.giris-slogan { font-size: 1.0625rem; opacity: .9; max-width: 32ch; margin: 0 0 var(--s6); }
.giris-izler { list-style: none; display: flex; gap: var(--s3); margin: 0; padding: 0; }
.giris-izler li {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rail-ink) 28%, transparent);
}
.giris-marka::after {
  content: ""; position: absolute; inset-inline-end: -80px; inset-block-start: -80px; width: 280px; height: 280px;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--rail-ink) 18%, transparent);
  box-shadow: 0 0 0 60px color-mix(in srgb, var(--rail-ink) 5%, transparent);
}
@media (max-width: 760px) {
  .giris-sahne { grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s3); }
  .giris-marka { min-height: 0; padding: var(--s5); flex-direction: row; align-items: center; gap: var(--s3); }
  .giris-isaret { margin: 0; width: 44px; height: 44px; }
  .giris-isaret img { width: 40px; height: 40px; }
  .giris-ad { font-size: 1.8rem; margin: 0; }
  .giris-slogan, .giris-izler, .giris-marka::after { display: none; }
}

/* Parola alanı satırı doldurur; "göster" düğmesi yanında kalır. */
.giris-sahne .row > #password-field { flex: 1 1 12rem; }

/* Telefonda iş satırı: ikon + metin yan yana, tarih ve rozet altta (ızgara). */
@media (max-width: 599px) {
  .desk-list > li.desk-is { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); }
  .desk-list > li.desk-is > a { grid-column: 2; }
  .desk-sag { grid-column: 2; margin: 0; }
  .karar-sonuc { font-size: 1.45rem; }
  h1, .page > .card:first-child:has(> h1:first-child) > h1, .page > h1:first-child { font-size: 1.85rem; }
  .hero-figure { font-size: 2.5rem; }
  .card { padding: var(--s4); }
}
.nisap-bas > .num { white-space: nowrap; }
.nisap-bas > span:first-child { flex: 1 1 auto; min-width: 0; }

/* --- Görünüm turu 3: acil durum, olay tutanağı ------------------------------ */
.emg-kart { border-top: 4px solid var(--status-critical); }
.emg-bas { display: flex; gap: var(--s4); align-items: flex-start; margin-bottom: var(--s4); }
.emg-bas h1 { margin-bottom: var(--s1); }
.emg-karo {
  width: 52px; height: 52px; border-radius: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--status-critical) 13%, transparent); color: var(--crit-ink);
}
.emg-karo svg.i { width: 26px; height: 26px; }
.emg-turler { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.emg-turler > legend { font-size: .8125rem; font-weight: 600; color: var(--ink-secondary); margin-bottom: var(--s2); }
.emg-tur { position: relative; display: block; cursor: pointer; }
.emg-tur > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.emg-tur-ic {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4);
  border: 1.5px solid var(--hairline); border-radius: 12px; background: var(--surface-1);
  font-weight: 600; font-size: .9rem; color: var(--ink-primary); transition: border-color .12s, background .12s;
}
.emg-tur-ic svg.i { width: 22px; height: 22px; color: var(--ink-muted); }
.emg-tur:hover .emg-tur-ic { border-color: var(--ink-muted); }
.emg-tur > input:checked + .emg-tur-ic {
  border-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, var(--surface-1));
}
.emg-tur > input:checked + .emg-tur-ic svg.i { color: var(--crit-ink); }
.emg-tur > input:focus-visible + .emg-tur-ic { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.btn-acil { background: var(--status-critical); border-color: var(--status-critical); color: var(--on-status);
  min-height: 52px; font-size: 1.0625rem; box-shadow: 0 4px 14px color-mix(in srgb, var(--status-critical) 35%, transparent); }
.btn.btn-acil:hover { background: var(--status-critical); filter: brightness(.9); }

.zaman { list-style: none; margin: 0; padding: 0; position: relative; }
.zaman > li { position: relative; padding: 0 0 var(--s5) var(--s6); }
.zaman > li::before { content: ""; position: absolute; inset-inline-start: 6px; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--status-critical); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-critical) 15%, transparent); }
.zaman > li::after { content: ""; position: absolute; inset-inline-start: 10px; top: 22px; bottom: 0; width: 2px; background: var(--hairline); }
.zaman > li:last-child::after { display: none; }
.zaman > li p { margin: var(--s1) 0 0; color: var(--ink-secondary); }
.zaman-meta { font-size: .8125rem; color: var(--ink-muted); margin-bottom: 2px; }

.badge.b-seal { background: var(--seal-soft); color: var(--seal); }
.badge svg.i { width: 12px; height: 12px; stroke-width: 2.2; }
.cagri-satir { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.cagri-satir > .muted { flex: 1 1 18rem; margin: 0; }
.cagri-karo { width: 44px; height: 44px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); }
.olay-rozet { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); }
.olay-meta { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  color: var(--ink-secondary); font-size: .9rem; }
.olay-meta li { display: inline-flex; align-items: center; gap: var(--s2); }
.olay-meta svg.i { color: var(--ink-muted); }
.olay-anlatim { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; max-width: 70ch; }

/* --- Görünüm turu 3: form çiftleri, kişi rozeti ------------------------------ */
.alan-cift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.alan-cift > label { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--ink-secondary); }
@media (max-width: 699px) { .alan-cift { grid-template-columns: minmax(0, 1fr); } }
.kisi { display: inline-flex; align-items: center; gap: var(--s3); }
.kisi-harf {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.btn svg.i { width: 17px; height: 17px; }

/* Dosya seçici ve kart içi açılır bölümler: tarayıcının ham görünümü yerine ürün dili. */
input[type="file"] { padding: 6px; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-primary);
  border-radius: 8px; padding: 6px 14px; margin-inline-end: var(--s3);
}
.card details:not(.card-sub):not(.nav-sec) > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.card details:not(.card-sub):not(.nav-sec) > summary::-webkit-details-marker { display: none; }
.card details:not(.card-sub):not(.nav-sec) > summary::before {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .16s; margin-inline-end: 2px;
}
.card details:not(.card-sub):not(.nav-sec)[open] > summary::before { transform: rotate(45deg); }

/* --- Görünüm turu 4: operasyon ------------------------------------------------ */
.bolum-atla { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.bolum-atla a {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4);
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); box-shadow: var(--shadow-1);
  color: var(--ink-primary); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.bolum-atla a:hover { border-color: var(--accent); color: var(--accent); }
.bolum-atla svg.i { width: 16px; height: 16px; color: var(--ink-muted); }
@media (pointer: coarse) { .bolum-atla a { min-height: 44px; } }
.page > .card-sub > h3 { display: flex; align-items: center; gap: var(--s2); }
.page > .card-sub > h3 svg.i { color: var(--ink-muted); }
.page > .card-sub[id] { scroll-margin-top: 76px; }
.duyuru, .talep {
  border: 1px solid var(--hairline); border-radius: 12px; padding: var(--s3) var(--s4); margin-top: var(--s3);
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface-1));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
}
.duyuru > div, .talep > div, .talep > ul, .talep > form, .talep > a.btn { flex-basis: 100%; }
.talep > a.btn { flex-basis: auto; }
.duyuru-kritik { border-inline-start: 4px solid var(--status-critical); }
.talep > strong, .duyuru > strong { font-size: 1rem; }
.talep > form.row { margin-top: var(--s1); }
/* D-212: talep fotoğrafları — kare küçük resim, tıklayınca tam boy. */
/* D-212: panoda ortak alan kuralları — her alan kendi içinde açılır. */
.alan-kurali { border-top: 1px solid var(--border); padding: var(--s1) 0; }
.alan-kurali > summary { cursor: pointer; }
.talep-foto { display: flex; flex-wrap: wrap; gap: var(--s1); }
.talep-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm, 6px);
  border: 1px solid var(--border); display: block; }
.msg-thread li { border-radius: 12px; }

/* --- Görünüm turu 4: mülk ağacı ---------------------------------------------- */
.pane-head h1 { font-size: 1.9rem; }
.tree a svg.agac-ikon { width: 17px; height: 17px; color: var(--ink-muted); }
.tree a[aria-current="true"] svg.agac-ikon { color: var(--accent); }
.bos-durum { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3);
  padding: var(--s6) var(--s4) var(--s5); }
.bos-karo { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-muted); }
.bos-karo svg.i { width: 30px; height: 30px; stroke-width: 1.5; }
.detay-bas { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; gap: var(--s3) !important; }
.detay-karo { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); }
.detay-karo svg.i { width: 22px; height: 22px; }
.detay-bas .badge { font-family: var(--font-body); }
.pane-list > .pane-head { flex-direction: column; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.pane-list > .pane-head > .row { flex-wrap: wrap; }
.pane-list > .pane-head .btn { min-height: 36px; padding: var(--s1) var(--s3); font-size: .8125rem; }
@media (pointer: coarse) { .pane-list > .pane-head .btn { min-height: 44px; } }
.tree-group > summary::before, .tree-group[open] > summary::before {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .16s; margin-inline-end: var(--s3);
}
.tree-group[open] > summary::before { transform: rotate(45deg); }
.tree-group > summary::-webkit-details-marker { display: none; }
.detay-bas { display: flex; align-items: center; flex-wrap: wrap; }

/* --- Görünüm turu 5 ------------------------------------------------------------ */
/* BOŞ DURUM: bir kartın tek içeriği (ya da başlığın ardından son öğesi) sönük bir
   "henüz yok" satırıysa, o satır ortalanmış kesik çerçeveli bir kutu olur. */
.card > p.muted:only-child,
.card > h2 + p.muted:last-child,
.card > h3 + p.muted:last-child,
.card-sub > h3 + p.muted:last-child {
  border: 1px dashed var(--hairline); border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  padding: var(--s5) var(--s4); text-align: center; margin: var(--s2) 0 0; max-width: none;
}

.akis > li { flex-wrap: nowrap; gap: var(--s3); position: relative; }
.akis-nokta { width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-secondary); }
.akis-nokta svg.i { width: 16px; height: 16px; }
.akis-zaman { flex: none; min-width: 9.5rem; }
.akis > li > a, .akis > li > span:last-child { min-width: 0; }
@media (max-width: 599px) {
  .akis > li { flex-wrap: wrap; }
  .akis-zaman { min-width: 0; }
}

.status-buttons button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  border-radius: 16px; min-height: 96px; font-weight: 700; }
.status-buttons svg.durum-ikon { width: 30px; height: 30px; }
.status-safe { background: color-mix(in srgb, var(--status-good) 12%, var(--surface-1)); color: var(--good-ink); }
.status-help { background: color-mix(in srgb, var(--status-serious) 14%, var(--surface-1)); color: var(--serious-ink); }
.status-trapped { background: color-mix(in srgb, var(--status-critical) 12%, var(--surface-1)); color: var(--crit-ink); }

.ekstre-bakiye { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin: var(--s2) 0 var(--s5);
  padding: var(--s4) var(--s5); border-radius: 14px; background: var(--surface-2); }
.ekstre-bakiye .hero-label { flex-basis: 100%; }
.ekstre-rakam { font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; line-height: 1.05; letter-spacing: -.015em; }
.ekstre h2 { display: flex; align-items: center; gap: var(--s2); }
.ekstre h2 svg.i { color: var(--ink-muted); }

.gecis-karti { text-align: center; overflow: hidden; padding-top: 0; }
.gecis-karti > h1 {
  margin: 0 calc(-1 * var(--s6)) var(--s4); padding: var(--s5) var(--s5) var(--s4);
  background: var(--accent); color: var(--accent-ink); font-size: 1.6rem;
}
.gecis-karti .qr-box { margin: var(--s3) auto; max-width: 300px; border-radius: 16px; box-shadow: var(--shadow-1); }
.gecis-karti .code-big { display: inline-block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.9rem; letter-spacing: .22em; padding: var(--s2) var(--s4); border-radius: 12px; background: var(--surface-2); }
.gecis-karti .row { justify-content: center; }
.gecis-karti .alert { text-align: start; }
@media (max-width: 599px) {
  .gecis-karti > h1 { margin-inline: calc(-1 * var(--s4)); }
}

/* Telefon düzeltmeleri (görünüm turu 5, emülasyonda görüldü):
   1) Uzun seçenek metinli açılır liste kabını taşırmasın.
   2) Alt çubukta AÇIK grubun bağlantıları çipin YANINDA aksın — Chrome açılır bölümün
      içeriğini ayrı bir blok kutuya koyuyor ve bağlantılar alta düşüp çubuğu iki satıra
      çıkarıyordu. `::details-content` desteklemeyen tarayıcıda eski (alt alta) hâl kalır. */
select { max-width: 100%; }
.row > label { min-width: 0; max-width: 100%; }
@media (max-width: 1024px) {
  .nav-sec { display: inline-flex; align-items: center; }
  /* YALNIZ açık grup: kapalıda `display: contents` gizlemeyi de kaldırır ve kapalı grubun
     bağlantıları görünür (ilk denemede tam bu oldu). */
  .nav-sec[open]::details-content { display: contents; }
}
/* Şerit/alt çubukta "Geri" YAPIŞIK durur; sönük hâlinin zemini şeffaftı ve kaydırılan
   bağlantılar arkasından okunuyordu (üst üste binen yazı). Çubuğun kendi zeminini alır. */
@media (max-width: 1024px) {
  .navback.is-off { background: var(--nav-bg, var(--plane)); }
}

/* ═══ KENAR ŞERİDİ (telefon) + DARALTMA (masaüstü) — 28 Eyl 2026 ═══════════════════
   Tayfun: "telefonda menü yanda değil en altta… BUS'taki deseni al". BUS D-141/D-147:
   56 px dikey şerit, varsayılan SAĞ kenar; `html[data-el="sol"]` sola alır. Geri şeridin en
   üstünde (iPhone'da sistem geri tuşu yok) ve şeritle birlikte taşınır. ☰ çekmecesi, taşıma
   hareketi ve daraltma static/ray.js'te; JS yoksa şerit gruplarla (details) yine çalışır. */
.ray-ac, .menu-daralt, .ray-perde, .ray-ipucu { display: none; }
@media (max-width: 1024px) {
  :root { --ray: 56px; }
  body { padding-right: var(--ray); }
  :root[data-el="sol"] body { padding-right: 0; padding-left: var(--ray); }
  .page { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
  .sidenav {
    inset: 0 0 0 auto; width: var(--ray); z-index: 40;
    flex-direction: column; align-items: center; gap: 2px;
    overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
    padding: calc(var(--s2) + env(safe-area-inset-top, 0px)) 4px calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    border-top: 0; border-inline-start: 1px solid var(--hairline);
    background: var(--surface-1); background-image: none;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .06);
    touch-action: pan-y; -webkit-touch-callout: none; user-select: none;
    transition: width .18s cubic-bezier(.2,0,0,1);
  }
  :root[data-el="sol"] .sidenav { inset: 0 auto 0 0; border-inline-start: 0; border-inline-end: 1px solid var(--hairline);
    box-shadow: 8px 0 24px rgba(0, 0, 0, .06); }
  .sidenav.tasiniyor { transition: none; opacity: .94; box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
  .sidenav .ray-ac { display: inline-flex; }
  .ray-ac, .sidenav .navback, .sidenav .nav-group, .sidenav a {
    width: 48px; min-height: 48px; padding: 0; margin: 0; justify-content: center; align-items: center;
    border-radius: 12px; flex: none; position: static;
  }
  .ray-ac { border: 0; background: var(--surface-2); color: var(--ink-primary); cursor: pointer; margin-bottom: var(--s1); }
  .sidenav .navback { border: 1px solid var(--border); display: inline-flex; margin-bottom: var(--s2); }
  .sidenav .navback.is-off { background: transparent; }
  .navback-yazi, .nav-glabel, .nav-chev, .sidenav a > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sidenav .nav-sec { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .sidenav .nav-sec::details-content { display: block; }
  .sidenav .nav-group { display: flex; border: 0; background: transparent; }
  .sidenav .nav-sec[open] > .nav-group { background: var(--accent-soft); color: var(--accent); }
  .sidenav .nav-group .nav-gicon { width: 21px; height: 21px; }
  .sidenav .nav-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 var(--s2);
    padding: 0; border-bottom: 1px solid var(--hairline); padding-bottom: var(--s2); }
  .sidenav a { display: inline-flex; font-size: 0; }
  .sidenav a svg.i { width: 21px; height: 21px; }
  .sidenav a[aria-current="page"] { background: var(--accent-soft); box-shadow: none; }

  /* Çekmece: aynı şerit yerinde genişler, yazılar görünür. */
  .sidenav.acik { width: min(82vw, 300px); align-items: stretch; padding-inline: var(--s3); box-shadow: var(--shadow-2); }
  .sidenav.acik .ray-ac { align-self: flex-end; }
  :root[data-el="sol"] .sidenav.acik .ray-ac { align-self: flex-start; }
  .sidenav.acik .navback, .sidenav.acik .nav-group, .sidenav.acik a {
    width: 100%; justify-content: flex-start; gap: var(--s3); padding: 0 var(--s3); font-size: .9375rem;
  }
  .sidenav.acik .navback-yazi, .sidenav.acik .nav-glabel, .sidenav.acik .nav-chev, .sidenav.acik a > span {
    position: static; width: auto; height: auto; clip: auto; overflow: visible;
  }
  .sidenav.acik .nav-chev { margin-inline-start: auto; }
  .sidenav.acik .nav-sec { align-items: stretch; }
  .sidenav.acik .nav-links { align-items: stretch; padding-inline-start: var(--s3); }
  .sidenav.acik .ray-ipucu { display: block; font-size: .8125rem; color: var(--ink-muted); margin: var(--s3) var(--s2) 0; }
  .ray-perde:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(15, 15, 13, .45); }
  .exit-warn { bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }

/* Masaüstü daraltma: yan panel ikon şeridine iner; bağlantı adları `title` ile görünür. */
@media (min-width: 1025px) {
  .sidenav .menu-daralt {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-end;
    width: 34px; height: 34px; margin: 0 0 var(--s2); border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface-1); color: var(--ink-secondary); cursor: pointer;
  }
  .sidenav .menu-daralt:hover { color: var(--ink-primary); }
  :root[data-menu="dar"] .shell { grid-template-columns: 76px minmax(0, 1fr); }
  :root[data-menu="dar"] .sidenav { padding-inline: var(--s2); align-items: center; }
  :root[data-menu="dar"] .sidenav .menu-daralt { align-self: center; transform: scaleX(-1); }
  :root[data-menu="dar"] .navback-yazi, :root[data-menu="dar"] .nav-glabel, :root[data-menu="dar"] .nav-chev,
  :root[data-menu="dar"] .sidenav a > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root[data-menu="dar"] .sidenav .navback, :root[data-menu="dar"] .nav-group, :root[data-menu="dar"] .sidenav a {
    width: 44px; justify-content: center; padding: 0;
  }
  :root[data-menu="dar"] .nav-links { padding: 2px 0 var(--s2); align-items: center; }
  :root[data-menu="dar"] .nav-sec { width: 100%; display: flex; flex-direction: column; align-items: center; }
}

/* Çekmece altı: tema + el tercihi (yalnız telefonda açık çekmecede). */
.ray-ayar, .ray-el { display: none; }
@media (max-width: 1024px) {
  .sidenav.acik .ray-ayar, .sidenav.acik .ray-el {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    margin-top: var(--s3); padding: 4px; border-radius: 14px; background: var(--surface-2);
  }
  .sidenav.acik .ray-tema, .sidenav.acik .ray-el button {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: auto; min-height: 60px; padding: var(--s2); border: 1.5px solid transparent; border-radius: 11px;
    background: transparent; color: var(--ink-secondary); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  }
  .sidenav.acik .ray-tema[aria-current="true"], .sidenav.acik .ray-el button[aria-pressed="true"] {
    border-color: var(--accent); background: var(--surface-1); color: var(--ink-primary);
  }
  .sidenav.acik .ray-tema > span { position: static; width: auto; height: auto; clip: auto; }
}

/* ═══ Kenar şeridi 2: koyu menü zemini (BUS) + çekmece düzeltmeleri ═════════════════ */
@media (max-width: 1024px) {
  .sidenav { background: var(--rail-bg); border-color: transparent; color: var(--rail-ink); }
  .ray-ac { background: var(--rail-bg-2); color: var(--rail-ink); }
  .sidenav .navback { border-color: var(--rail-line); color: var(--rail-ink); background: transparent; }
  .sidenav .navback.is-off { color: var(--rail-muted); background: transparent; }
  .sidenav a { color: var(--rail-ink); }
  .sidenav a svg.i { color: var(--rail-ink); }
  .sidenav a[aria-current="page"] { background: var(--rail-active-bg); color: var(--rail-active-ink); }
  .sidenav a[aria-current="page"] svg.i { color: var(--rail-accent); }
  /* Şeritte grup simgesi KÜÇÜK ve SÖNÜK: asıl hedef bağlantılar; aynı ikon alt alta karışmasın. */
  .sidenav .nav-group { min-height: 34px; color: var(--rail-muted); }
  .sidenav .nav-group .nav-gicon { width: 16px; height: 16px; color: var(--rail-muted); }
  .sidenav .nav-sec[open] > .nav-group { background: transparent; color: var(--rail-accent); }
  .sidenav .nav-sec[open] > .nav-group .nav-gicon { color: var(--rail-accent); }
  .sidenav .nav-links { border-bottom-color: var(--rail-line); }
  /* Çekmece */
  .sidenav.acik .nav-chev { width: 14px; height: 14px; }
  .sidenav.acik a, .sidenav.acik .navback { flex-direction: row; min-height: 46px; }
  .sidenav.acik .nav-group { min-height: 40px; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
  .sidenav.acik .nav-group .nav-gicon { width: 16px; height: 16px; }
  .sidenav.acik .ray-ipucu { color: var(--rail-muted); }
  .sidenav.acik .ray-ayar, .sidenav.acik .ray-el { background: var(--rail-bg-2); }
  .sidenav.acik .ray-tema, .sidenav.acik .ray-el button { color: var(--rail-muted); }
  .sidenav.acik .ray-tema[aria-current="true"], .sidenav.acik .ray-el button[aria-pressed="true"] {
    background: var(--rail-active-bg); color: var(--rail-active-ink); border-color: var(--rail-accent);
  }
}
/* Masaüstü yan panel de koyu (BUS masthead). */
@media (min-width: 1025px) {
  .sidenav { background: var(--rail-bg); border-inline-end: 0; }
  .sidenav .nav-group { color: var(--rail-muted); }
  .sidenav .nav-group:hover { color: var(--rail-ink); background: var(--rail-bg-2); }
  .sidenav .nav-group .nav-gicon { color: var(--rail-muted); }
  .sidenav .nav-group.is-here, .sidenav .nav-group.is-here .nav-gicon { color: var(--rail-accent); }
  .sidenav .nav-chev { color: var(--rail-muted); }
  .sidenav a { color: var(--rail-ink); }
  .sidenav a svg.i { color: var(--rail-muted); }
  .sidenav a:hover { background: var(--rail-bg-2); color: var(--rail-active-ink); }
  .sidenav a:hover svg.i { color: var(--rail-ink); }
  .sidenav a[aria-current="page"] { background: var(--rail-active-bg); color: var(--rail-active-ink); box-shadow: inset 3px 0 0 var(--rail-accent); }
  .sidenav a[aria-current="page"] svg.i { color: var(--rail-accent); }
  .sidenav .navback { background: transparent; border-color: var(--rail-line); color: var(--rail-ink); }
  .sidenav .navback.is-off { color: var(--rail-muted); }
  .sidenav .navback:hover { background: var(--rail-bg-2); }
  .sidenav .menu-daralt { background: var(--rail-bg-2); border-color: var(--rail-line); color: var(--rail-muted); }
  .sidenav .menu-daralt:hover { color: var(--rail-ink); }
  .sidenav :focus-visible { outline-color: var(--rail-accent); }
}


/* Geri oku gizlenmez: dar şerit ve daraltılmış menüde yalnız YAZI saklanır, ok görünür kalır. */
@media (max-width: 1024px) {
  .sidenav .navback > .navback-arrow {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
  }
}
@media (min-width: 1025px) {
  :root[data-menu="dar"] .sidenav .navback > .navback-arrow {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
  }
}

/* Kenar şeridi 3 (D-171): menüye özel kapatma oku + geri tuşu başparmak bölgesinde.
   §15.1 returnPath SHOULD: telefonda geri denetimi ALT bölgede durur (üst köşe tek elle erişilemez).
   Şerit içeriği örtmediği için (gövde şerit kadar pay bırakır) occlusion'ın "önce örtmeme"
   adımı yapıdan karşılanır; yaylı geçici taşıma gerekmez. */
@media (max-width: 1024px) {
  .sidenav:not(.acik) .navback {
    order: 99; margin-top: auto; margin-bottom: 0;
    position: sticky; bottom: 0; z-index: 1;
    background: var(--rail-bg-2); box-shadow: 0 -10px 14px var(--rail-bg);
  }
  .sidenav:not(.acik) .navback.is-off { background: var(--rail-bg); }
  .sidenav.acik .ray-ac {
    width: auto; align-self: stretch; justify-content: flex-start; gap: var(--s3);
    padding-inline: var(--s3); font: inherit; font-weight: 600; flex-direction: row-reverse;
  }
  :root[data-el="sol"] .sidenav.acik .ray-ac { flex-direction: row; align-self: stretch; }
  .sidenav.acik .ray-ac svg.i { transform: scaleX(-1); }
  :root[data-el="sol"] .sidenav.acik .ray-ac svg.i { transform: none; }
  .ray-ac-yazi { font-size: .9375rem; }
}

/* Kenar şeridi 4 — TABLET (600–1024, §15 navShell v3.45): "diğer cihazlarda solda, hamburgerli".
   Eskiden bu kırılımda menü üstte YATAY kayan bir şeritti (bağlantılar sağa taşıyor, kaydırma
   çubuğu görünüyordu). Artık telefonla aynı ikon şeridi + ☰ çekmecesi, ama HEP SOLDA:
   el tercihi ve taşıma jesti yalnız telefonda (tablet iki elle tutulur). */
@media (min-width: 600px) and (max-width: 1024px) {
  body, :root[data-el="sol"] body { padding-right: 0; padding-left: var(--ray); }
  .sidenav, :root[data-el="sol"] .sidenav {
    position: fixed; inset: 0 auto 0 0; border-bottom: 0;
    border-inline-start: 0; border-inline-end: 1px solid var(--rail-line);
  }
  .sidenav.acik .ray-el, .sidenav.acik .ipucu-el { display: none; }
  .sidenav.acik .ray-ac, :root[data-el="sol"] .sidenav.acik .ray-ac { flex-direction: row; }
  .sidenav.acik .ray-ac svg.i, :root[data-el="sol"] .sidenav.acik .ray-ac svg.i { transform: none; }
}

/* Y6 tanıtım sayfası (templates/landing.html) — kök adres, oturumsuz ziyaretçi.
   Yalnız düzen: renk ve aralık mevcut belirteçlerden (tokens), yeni renk yok. */
.landing { max-width: 920px; margin-inline: auto; display: grid; gap: var(--s4); }
.landing-hero { text-align: center; padding-block: var(--s7); }
.landing-hero h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: var(--s2); }
.landing-tagline { font-size: 1.15rem; font-weight: 600; color: var(--accent); margin-bottom: var(--s4); }
.landing-hero > p:not(.landing-tagline):not(.landing-cta) { max-width: 60ch; margin-inline: auto; }
.landing-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }
.landing .card ul { padding-inline-start: var(--s5); display: grid; gap: var(--s2); }
.landing-footer { text-align: center; padding: var(--s5) 0; line-height: 1.8; }
@media (min-width: 900px) {
  .landing { grid-template-columns: 1fr 1fr; }
  .landing-hero, .landing-footer { grid-column: 1 / -1; }
}