/*
  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
*/

/* =====================================================================
   SenSight Sefer — bileşenler
   Belirteçler tokens.css'te. Burada SABİT GÖRSEL DEĞER yoktur (§30).
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* §30: body zemini AÇIKÇA boyanır — saydam gövde ana sayfanın zeminini ödünç alır */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  /* PR-05 · §15.1 occlusion — ÖNCE ÖRTMEME.
     Sayfa, geri denetiminin kapladığı alan kadar alttan boşlukla biter.
     Bu adım atlanarak "sönükleşme" veya "taşıma" çözümlerine geçilemez. */
  padding-bottom: calc(var(--control-size) + var(--space-5) + env(safe-area-inset-bottom, 0px));
}

/* ── Marka ────────────────────────────────────────────────────────── */
/* §30 HouseStyle: kelime işareti İKİ PARÇALIDIR ve METİNdir, görsel değil.
   Vurgu parçası AYRI bir öğedir; tek metin düğümünde birleşseydi tema
   değişiminde vurgu kaybolurdu.

   ⚠️ "Sen" ile "Sight" ARASINDA BOŞLUK OLMAZ — marka adı tek kelime:
   SenSight. İlk yazımda `gap` bütün esnek çocuklara uygulanıyordu ve
   "Sen"i anonim bir esnek öğe yapıp araya boşluk koyuyordu; ekranda
   "Sen Sight Sefer" yazıyordu. İki parçalı olmak, iki kelime olmak değil:
   parça AYRIMI renkte, boşlukta değil.

   Boşluk yalnızca ÜRÜN adından önce: SenSight ile Sefer ayrı şeylerdir
   (§5.1 marka hiyerarşisi — SenSight çatı marka, Sefer ürün). */
.marka {
  display: inline-flex; align-items: baseline; gap: 0;
  font-weight: 750; letter-spacing: .005em; color: var(--wordmark-ink);
  text-decoration: none;
}
.marka .isaret { color: var(--sight-red); }
.marka .urun {
  font-weight: 500; font-size: var(--font-size-sm);
  color: var(--color-text-muted); letter-spacing: .01em;
  margin-left: var(--space-2);
}

/* ── Yerleşim ─────────────────────────────────────────────────────── */
.sayfa { max-width: 880px; margin: 0 auto; padding: var(--space-5) var(--space-4); }

.ust-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-bottom: 1px solid var(--color-line);
}
.ust-bar .bosluk { flex: 1; }
/* Şoför başlığındaki ad TEK satır, sığmazsa «…» (04.10 ekran kontrolü: dar
   telefonda iki satıra kırılıyor ve eşitleme rozetini ekran dışına itiyordu —
   §10 rozetin her ekranda TAM görünmesini istiyor; kısalan şey ad). */
.ust-bar #soforAd { min-width: 0; flex: 0 1 auto; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ad-alt { display: none; margin: 0 0 var(--space-2); font-weight: 600; }
@media (max-width: 480px) {
  .ust-bar #soforAd { display: none; }
  .ad-alt { display: block; }
}
.ust-bar .senkron { flex: none; }
/* Yan yana iki eylem düğmesi EŞİT genişlikte (muavin molalar bölümü). */
.dugme-cifti { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  margin: var(--space-2) 0; }

/* ── Senkron rozeti (§10 zorunlu: durum HER EKRANDA görünür) ──────── */
.senkron {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  /* Zeminden türeyen dolgu: tek kural iki temayı da çözer */
  background: color-mix(in srgb, currentColor var(--control-fill-alpha), transparent);
}
.senkron .nokta { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.senkron.iyi     { color: var(--state-ok); }
.senkron.bekleyen{ color: var(--state-pending); }
.senkron.hata    { color: var(--state-critical); }

/* ── Kart ─────────────────────────────────────────────────────────── */
.kart {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

h1 { font-size: var(--font-size-2xl); line-height: 1.15; margin: 0 0 var(--space-2); text-wrap: balance; }
h2 { font-size: var(--font-size-xl); line-height: 1.2;  margin: 0 0 var(--space-3); text-wrap: balance; }
p  { margin: 0 0 var(--space-3); }
.ikincil { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ── Form ─────────────────────────────────────────────────────────── */
.alan { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

/* Onay kutulu satır. Etiket kutuyu SARIYOR: `for` yazmayı unutmak mümkün
   olmasın diye — sarmalanan bir kutu her zaman bağlıdır, ve kutunun yanındaki
   metne tıklamak da onu işaretler (küçük ekranda asıl hedef odur).

   ⚠️ `.alan label`'ın dikey akışını bozuyor: kutu ile metin YAN YANA olmalı,
   alt alta değil. Bu yüzden `display` yeniden veriliyor. */
label.kutu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  cursor: pointer;
}

label.kutu input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
.alan label { font-size: var(--font-size-sm); font-weight: 600; }
.alan input, .alan select {
  font: inherit; color: inherit;
  padding: var(--space-3) var(--space-4);
  min-height: var(--control-size);          /* eldivenli parmak */
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}
/* Beyansız kalkış muafiyeti (ofis, sefer ayrıntısı). 03.10 ekran kontrolü:
   çıplak tarayıcı kutusu telefonda kartı genişletip rozeti ve × düğmesini
   dışarı itiyordu. Alan sütun; kutu tasarım sisteminin denetimi, taşmaz. */
.muafiyet-alan { display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2); min-width: 0; }
.muafiyet-alan select { font: inherit; color: inherit; width: 100%; max-width: 100%;
  min-height: var(--control-size); padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm); }
.muafiyet-alan .dugme { align-self: flex-start; }
#atamalar .uye > div:first-child { min-width: 0; }
/* Telefonda ekip satırı ikiye bölünür: ad ve durumlar tam genişlik, rozet ve
   × alta. Yan yana dururken sol sütun ~150 px kalıyor, muafiyet seçim
   kutusu metni kesiliyordu (04.10). */
@media (max-width: 480px) {
  #atamalar .uye { grid-template-columns: 1fr; row-gap: var(--space-2); }
  #atamalar .uye > div:last-child { justify-self: start; }
}

.alan input:focus-visible, .alan select:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
.alan .ipucu { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.dugme {
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: var(--control-size);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong);
  background: var(--color-surface); color: var(--color-text);
  transition: background var(--duration-fast) var(--ease);
}
/* <a class="dugme"> de var: bağlantı gibi değil DÜĞME gibi görünmeli.
   Altı çizili bir düğme, kullanıcıya iki farklı şey söyler. */
a.dugme { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.dugme.birincil { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.dugme:disabled { opacity: var(--control-disabled-opacity); cursor: not-allowed; }
.dugme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Küçük seçim çipi (rapor dönemi) ─────────────────────────────────
   Düğmenin kısa hâli: sık basılan, kutuları dolduran kısayollar.
   ⚠️ Dokunma hedefi 32px'in altına inmiyor — «minik» görünse de parmak
   ona basabilmeli. */
.donem-cipler { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.cip {
  font: inherit; font-size: var(--font-size-xs); font-weight: 600; cursor: pointer;
  min-height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--color-line-strong);
  background: var(--color-surface); color: var(--color-text-muted);
}
.cip:hover { color: var(--color-text); border-color: var(--brand); }
.cip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.cip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Parolayı göster/gizle (§11.1 LoginBaseline — ZORUNLU) ──────────
   Kullanıcı yazdığını göremezse yanlış yazdığını anlamaz; giriş ekranı
   en çok terk edilen ekrandır ve sebebi çoğu zaman budur.
   İkon TEK BAŞINA yeterli değil: durum METİNle de söylenir ve ekran
   okuyucuya aria-label ile bildirilir. */
.parola-sarmal { position: relative; display: flex; }
/* `min-width: 0` ŞART: esnek öğenin varsayılan en küçük genişliği içeriğidir;
   108 px sağ dolguyla o genişlik kabı aşıyor ve kutu ekranın sağından
   taşıyordu — telefonda ölçüldü (20.09.2026, Chrome, 1080 px). */
.parola-sarmal input { flex: 1; min-width: 0; padding-right: 108px; }
.goz {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--color-text-muted); font: inherit; font-size: var(--font-size-xs);
  font-weight: 600;
}
.goz:hover { color: var(--color-text); }
.goz:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.goz svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
           stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Tarayıcının kendi gözü ikinci bir düğme çıkarır — gizlenir */
input[type="password"]::-ms-reveal { display: none; }

.bag {
  display: inline-block; margin-top: var(--space-2);
  color: var(--brand-ink); font-size: var(--font-size-sm);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; line-height: 44px;
}

/* ── Uyarı kutusu (§8: NEDEN + ÇÖZÜM) ─────────────────────────────── */
.uyari {
  display: none; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--font-size-sm); margin-bottom: var(--space-4);
  border-left: 3px solid currentColor;
}
.uyari.gorunur { display: flex; }

/* ── `hidden` GERÇEKTEN gizlesin ─────────────────────────────────────
   ⚠️ TARAYICIDA ÖLÇÜLDÜ (06.09.2026). `hidden` özniteliğinin tek gücü
   tarayıcının `display:none` VARSAYILANIDIR ve satır içi bir `style`
   onu ezer. Beş şerit `hidden` VE `style="display:block"` taşıyordu;
   yani `hidden` hiçbir şey yapmıyordu ve ekranda **boş renkli bir
   çubuk** duruyordu:

     · manifest → rezervasyonSerit · yanYana · araBinisSerit
     · koli     → mevzuatSerit  (⚠️ «kapat»a basan kullanıcının
                  kapattığı şerit KAPANMIYORDU)
     · sefer    → yaklasan

   Testlerin hiçbiri bunu göremezdi: HTML doğru, JS doğru, `el.hidden`
   gerçekten `true`. Yanlış olan tek şey ekrandı — ve ekrana bakılmadan
   bilinemezdi (aynı ders: 05.09'daki üç yazdırma kusuru).

   `!important` burada süs değil: satır içi `style`i ancak o yener. */
[hidden] { display: none !important; }

/* Tam genişlikte «şerit» uyarı: içinde başlık + açıklama satır satır durur,
   yan yana değil. Düzen SATIR İÇİNDEN buraya taşındı — satır içi `display`,
   `hidden` özniteliğini etkisiz kılıyordu (yukarıya bakınız).
   ⚠️ `.uyari.gorunur`dan SONRA gelmeli: ikisinin özgüllüğü eşit ve son
   yazılan kazanıyor. */
.uyari.serit { display: block; margin-bottom: var(--space-4); }

.uyari.hata    { color: var(--state-critical); background: var(--state-critical-soft); }
.uyari.kilit   { color: var(--brand-ink);      background: var(--brand-soft); }
.uyari.basari  { color: var(--state-ok);       background: var(--state-ok-soft); }

/* ── Ekip listesi ─────────────────────────────────────────────────── */
.uye-listesi { display: flex; flex-direction: column; gap: 1px; background: var(--color-line);
               border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.uye {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-3);
  align-items: center; padding: var(--space-4); background: var(--color-surface);
}
.uye .ad { font-weight: 600; }
.uye .alt { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Monospace bir SÜS değil, bir İDDİADIR: "bu bir tanımlayıcı, harfi harfine
   oku" der. Plaka, e-posta, belge no böyledir — marka/model DEĞİLDİR.
   Önce `.alt`ın tamamı mono'ydu ve araç kartında "Mercedes-Benz Travego 16 SHD"
   daktilo yazısıyla çıkıyordu: göz onu kopyalanacak bir kod sanıyor. */
.kimlik { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
          letter-spacing: -0.01em; }

/* Rozet: renk + İŞARET + metin (PR-06 · §15) */
.rozet {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-xs); font-weight: 600;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  white-space: nowrap; border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor var(--control-fill-alpha), transparent);
}
.rozet.sahip  { color: var(--brand-ink); }
.rozet.ofis   { color: var(--state-info); }
.rozet.sofor  { color: var(--state-ok); }
.rozet.muavin { color: var(--state-pending); }
.rozet.bekleyen { color: var(--state-unknown); }
.rozet.odendi { color: var(--state-ok); }

/* Yetki devri — rolün üstüne verilmiş yetkinin ekrandaki hâli (göç 0049).
   ⚠️ Düğme AÇIK/KAPALI durumunu yalnız renkle söylemiyor: başındaki "✓"
   ile "+" işareti ve `aria-pressed` aynı şeyi ayrıca söylüyor (PR-06 · §15).
   Renk tek başına, renk göremeyen kullanıcıda hiçbir şey söylemez — ve
   burada söylenmeyen şey, birinin firmanın kazancını görüp göremediğidir. */
.devir { display: flex; flex-wrap: wrap; gap: var(--space-2);
         margin-top: var(--space-2); }
.devir-dugme {
  font: inherit; font-size: var(--font-size-xs); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 32px; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer;
  border: 1px dashed var(--color-line);
  background: transparent; color: var(--color-text-muted);
}
.devir-dugme:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.devir-dugme.acik {
  border-style: solid; color: var(--state-ok);
  background: color-mix(in srgb, var(--state-ok) var(--control-fill-alpha), transparent);
}
.devir-dugme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.devir-dugme[disabled] { opacity: .5; cursor: progress; }
.devir-uyari { flex-basis: 100%; font-size: var(--font-size-xs);
               color: var(--state-pending); }

/* Tavan göstergesi — §17: kilit GİZLENMEZ, gösterilir */
.tavan { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
         margin-bottom: var(--space-4); }
/* Kartın son öğesiyse alt pay kartın kendi dolgusuna eklenip altta boşluk
   bırakıyordu (manifest doluluk kartı, 28.09.2026). */
.kart > .tavan:last-child { margin-bottom: 0; }
.tavan .cubuk { flex: 1; min-width: 160px; height: 8px; border-radius: var(--radius-full);
                background: var(--color-line); overflow: hidden; }
.tavan .dolu { height: 100%; background: var(--brand); transition: width var(--duration-base) var(--ease); }
.tavan .sayi { font-family: var(--font-mono); font-size: var(--font-size-sm);
               font-variant-numeric: tabular-nums; }
.sayi { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Boş durum: ekran ne yapılacağını söyler (§15.1) ───────────────── */
.bos { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); }

/* ── GERİ DENETİMİ (§15.1 returnPath · PR-05) ─────────────────────────
   Renk SEÇİLMEZ, zeminden türetilir: ön plan currentColor, dolgu aynı
   rengin düşük alfa hali. Açık zeminde koyu-saydam, koyu zeminde
   açık-saydam olur — tek kural iki temayı da çözer.
   Yarı saydam dolgu TEK BAŞINA kontrast garantisi değildir; bu yüzden
   aynı renkten daha yüksek alfalı bir kenarlık ve zemin bulanıklaştırma
   birlikte kullanılır. */
.geri {
  position: fixed;
  right: var(--space-4);
  /* ⚠️ Pay `--alt-menu-payi`den okunuyor, `env()`den DEĞİL: telefonda alt
     menü de dipte duruyor ve bu denetim onun ÜSTÜNDE kalmalı. Belirteç
     güvenli alanı zaten içeriyor (masaüstünde yalnız o). Aşağıdaki yorumun
     «alt menü konmadı çünkü aynı parmak bölgesi» gerekçesi hâlâ geçerli;
     çözüm menüyü iptal etmek değil, ikisinin de TEK sayıyı okuması. */
  bottom: calc(var(--alt-menu-payi) + var(--space-4));
  z-index: 20;

  width: var(--control-size); height: var(--control-size);
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  cursor: pointer;

  color: inherit;                                  /* ← zeminin karşıt rengi */
  background: color-mix(in srgb, currentColor var(--control-fill-alpha), transparent);
  border: 1px solid color-mix(in srgb, currentColor var(--control-border-alpha), transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.geri svg { width: 24px; height: 24px; stroke: currentColor; fill: none;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Okuma sırasında geri çekilir — ama TAMAMEN KAYBOLMAZ (§15.1).
   Yalnızca soluklaşmak YETMİYOR: emülatör testinde denetim, liste satırının
   rozetini yarı saydam biçimde örttü ve ikisi birden okunmaz oldu. Bu yüzden
   boşta iken KÜÇÜLÜR de — kapladığı alan azalır, izi kalır. */
.geri.sonuk {
  opacity: var(--control-idle-opacity);
  transform: scale(.72);
}

/* Taşınabilirliğin HİSSETTİRİLMESİ (Tayfun, 20.09.2026). Ekranın ilk
   açılışında tek bir kısa salınım: düğmenin yerinin sabit olmadığını
   söyler, sonra susar. Üç açılıştan sonra hiç yapılmaz — her açılışta
   oynayan bir düğme, dikkati sürekli kendine çeken bir düğmedir.
   ⚠️ `prefers-reduced-motion` altında HİÇ oynamaz (§30). */
@keyframes geri-ipucu {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  60%      { transform: translateY(3px); }
}
.geri.ipucu { animation: geri-ipucu 900ms var(--ease) 1; }
@media (prefers-reduced-motion: reduce) {
  .geri.ipucu { animation: none; }
}

/* Kök ekranda GİZLENMEZ, devre dışı gösterilir (§17 ile aynı gerekçe) */
.geri[aria-disabled="true"] { opacity: var(--control-disabled-opacity); cursor: default; }

.geri:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Geçici taşıma: üç DURAK. Serbest sürükleme kas hafızasını yok eder. */
.geri[data-durak="orta"] { bottom: 42%; }
.geri[data-durak="ust"]  { bottom: auto; top: calc(var(--space-5) + env(safe-area-inset-top, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .geri, .tavan .dolu, .dugme { transition: none; }
}

/* ── Alan grubu: ilişkili alanları GÖRSEL olarak da bağlar ───────────────
   Enlem/boylam gibi "ikisi birlikte anlamlı" alanlar ayrı ayrı durduğunda
   kullanıcı birini doldurup diğerini atlar. Çerçeve, kuralı formun kendisine
   yazar; hata mesajından önce gelir. */
.alan-grup {
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-4); margin: 0 0 var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.alan-grup legend {
  font-size: var(--font-size-sm); font-weight: 600; padding: 0 var(--space-2);
  color: var(--color-text-muted);
}
.alan-grup .alan { margin: 0; }

/* ── Gezinme ─────────────────────────────────────────────────────────────
   Üst barın ALTINDA yatay şerit. Alt tarafa konmadı: geri denetimi sağ altta
   duruyor ve alt gezinme onunla aynı parmak bölgesini paylaşırdı — iki farklı
   sonucu olan iki düğme, aynı yerde.

   📌 23.09.2026: onaylı taslak (1. sayfa) TELEFONDA alt menü istiyor ve o
   geldi (bu dosyanın sonu). Yukarıdaki gerekçe geçersiz olmadı, ÇÖZÜLDÜ:
   `.geri` artık `--alt-menu-payi` kadar yukarıda duruyor, yani ikisi tek
   sayıyı okuyor ve çakışma bir daha doğamıyor. Bu şerit telefonda gizli,
   masaüstünde tek menü — iki menü bir arada, aynı soruya iki cevaptır. */
.gezinme {
  display: flex; gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky; top: var(--ust-bar-yuksekligi, 0); z-index: 5;
}
.gezinme::-webkit-scrollbar { display: none; }
.gezinme-bag {
  flex: 0 0 auto; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); text-decoration: none;
  color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500;
  white-space: nowrap; min-height: 40px; display: flex; align-items: center;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.gezinme-bag:hover { background: var(--color-surface-alt); color: var(--color-text); }
/* Çıkış bir BAĞLANTI değil düğme (POST) ama menüde bağlantılarla aynı
   görünmeli: tarayıcının düğme varsayılanları sıfırlanıyor. */
button.cikis-dugmesi {
  font: inherit; background: none; border: 0; cursor: pointer; width: 100%;
}
button.cikis-dugmesi:disabled { opacity: .6; cursor: progress; }
.cikis-uyari {
  margin: var(--space-1) 0 0; font-size: var(--font-size-xs);
  color: var(--state-critical);
}
/* Seçili sekme yalnızca RENKLE değil, altındaki çizgiyle de işaretlenir:
   renk körlüğünde ve düşük kontrastlı ekranda tek başına renk yetmez (§15). */
.gezinme-bag.secili {
  color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 10%, transparent);
  box-shadow: inset 0 -2px 0 var(--brand);
}
@media (prefers-reduced-motion: reduce) { .gezinme-bag { transition: none; } }

/* ── Bölüm başlığı: başlık + eylemler ────────────────────────────────────
   Üç ekranda satır içi stille tekrarlanıyordu ve dar ekranda bozuluyordu:
   `flex:1` verilmiş başlık, düğmeleri tek tek alt satıra iterek "Güzergâh
   ekle"yi yalnız bırakıyordu. Kural artık tek yerde ve kırılma noktası
   düğmelerin sığmadığı yerde — piksel tahminiyle değil. */
.bolum-basligi {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-4);
}
.bolum-basligi h2 { margin: 0; flex: 1 1 12ch; min-width: 0; }
.bolum-basligi .eylemler {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin-left: auto;
}
/* Dar ekranda başlık tam satırı alır, düğmeler ALTINDA tek sıra kalır —
   böylece hiçbir düğme tek başına sarkmaz. */
@media (max-width: 480px) {
  .bolum-basligi h2 { flex: 1 1 100%; }
  .bolum-basligi .eylemler { margin-left: 0; width: 100%; }
  .bolum-basligi .eylemler > * { flex: 1 1 auto; }
}

/* ── Süzgeç şeridi ───────────────────────────────────────────────────────
   Seçili olan yalnızca RENKLE değil dolgu + kenarlıkla da ayrılır: renk
   körlüğünde ve güneş altındaki bir telefonda tek başına renk yetmez (§15).
   `aria-pressed` de yazılır — ekran okuyucu "seçili" bilgisini renkten
   okuyamaz. */
.suzgec {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.suzgec-dugme {
  font: inherit; font-size: var(--font-size-sm); font-weight: 500;
  padding: var(--space-2) var(--space-3); min-height: 36px;
  border: 1px solid var(--color-line); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}
.suzgec-dugme.secili {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand); color: var(--brand-ink); font-weight: 600;
}
.suzgec-dugme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .suzgec-dugme { transition: none; } }

/* ── Tanımlar dizini ─────────────────────────────────────────────────────
   Bir bağlantı listesi değil, DURUM taşıyan kartlar. Her satır "kaç tane
   var"ın yanında "ne eksik"i de söylüyor; kurulumdaki boşluk sefer gününde
   değil burada görünsün diye. */
.tanim-listesi { display: flex; flex-direction: column; gap: var(--space-3); }
.tanim-kart {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
.tanim-kart:hover { border-color: var(--brand); background: var(--color-surface-alt); }
.tanim-kart:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tanim-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.tanim-kart .ad { font-weight: 600; font-size: var(--font-size-lg); }
.tanim-kart .alt { font-size: var(--font-size-sm); }
.tanim-kart .alt.ikincil { color: var(--color-text-muted); }
/* Ok, dokunma hedefi DEĞİL — kartın tamamı bağlantı. Yalnızca "buraya
   gidilir" diyen bir işaret. */
.tanim-ok {
  flex: 0 0 auto; width: 20px; height: 20px; fill: none;
  stroke: var(--color-text-muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) { .tanim-kart { transition: none; } }

/* ── Onay kutusu ─────────────────────────────────────────────────────────
   Etiketin TAMAMI tıklanabilir: 20px'lik bir kutuyu parmakla vurmak zordur
   ve ıskalayan her dokunuş kullanıcıya "bozuk" hissi verir (§15). */
.onay {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; cursor: pointer; margin-bottom: var(--space-3);
}
.onay input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }

/* ── Uygulamadan çıkış uyarısı ─────────────────────────────────────── */
/* Ekranın ALTINDA: geri tuşu oradadır ve uyarı, bakılan yerde durmalı.
   Üstte olsaydı kullanıcı ikinci kez basana kadar onu görmezdi. */
.cikis-uyarisi {
  /* Alt menü payı burada da okunuyor: uyarı menünün üstünde durmalı. */
  position: fixed; left: 50%; bottom: calc(var(--alt-menu-payi) + var(--space-5));
  transform: translateX(-50%) translateY(12px);
  z-index: 40; max-width: min(92vw, 460px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-text); color: var(--color-surface);
  font-size: var(--font-size-sm); line-height: 1.4;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.cikis-uyarisi.gorunur { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 🐛 18.10 (Tayfun: «Şimdi yenile çalışmıyor, ekranda kalıyor»): kutu
   tıklamayı arkaya geçiriyor (`pointer-events: none`, yukarıda) — bilgi
   uyarısı için doğru. Ama «Yeni sürüm hazır» kutusu bir DÜĞME taşıyor ve
   fareyle basılan tık düğmeye hiç ulaşmıyordu; sürüm 0.24.1'den beri hiçbir
   cihazda bu yolla devreye girmedi. Önceki denemeler `click()` ile yapıldığı
   için (o, işaretçi kuralına takılmaz) kusur görünmedi. Yalnız İÇİNDEKİ
   denetim tıklanır; kutunun boş kalanı yine arkayı örtmez. */
.cikis-uyarisi button, .cikis-uyarisi a { pointer-events: auto; }

/* «Yeni sürüm hazır» — dikkat çeksin (Tayfun 03.11; ortak standart:
   KnowledgeBase ops/guncelleme-var-bildirimi.md «Görünüm standardı»).
   Renkli çerçeve + yavaş nabız (saniyede 3 yanıp sönmenin çok altında —
   WCAG 2.3.1). Renk «bekleyen» belirteci: kutunun koyu zemininde de, karanlık
   temanın açık zemininde de ~3,8:1 kontrast. */
#surumUyarisi {
  border: 2px solid var(--state-pending);
  animation: surum-nabiz 1.6s ease-in-out infinite;
}
@keyframes surum-nabiz {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 color-mix(in srgb, var(--state-pending) 55%, transparent); }
  50%      { box-shadow: var(--shadow-md), 0 0 0 7px color-mix(in srgb, var(--state-pending) 0%, transparent);
             border-color: color-mix(in srgb, var(--state-pending) 45%, var(--color-surface)); }
}

/* Hareket azaltma tercihi: uyarı yine görünür, yalnızca kaymaz (§15). */
@media (prefers-reduced-motion: reduce) {
  .cikis-uyarisi { transition: opacity .16s ease; transform: translateX(-50%); }
  .cikis-uyarisi.gorunur { transform: translateX(-50%); }
  /* Yanıp sönme yok; renkli çerçeve kalır — dikkat yine çekilir. */
  #surumUyarisi { animation: none; }
}


/* ── Yardım (§32 InAppHelp) ────────────────────────────────────────────
   Düğme üst barda, HER ekranda, hep aynı yerde (§15.1: aynı işlem her
   yerde aynı yerde, aynı adla). Dar ekranda yazı gizlenir, ikon kalır —
   ama dokunma hedefi 44px'in altına İNMEZ (§15). */
.yardim-dugme {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, currentColor var(--control-border-alpha), transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor var(--control-fill-alpha), transparent);
  color: var(--color-text-muted);
  font: inherit; font-size: var(--font-size-sm); cursor: pointer;
}
.yardim-dugme:hover { color: var(--color-text); }
.yardim-dugme svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 520px) { .yardim-dugme .yazi { display: none; } }

.yardim-panel {
  width: min(96vw, 640px);
  max-height: min(86vh, 900px);
  padding: 0; border: 1px solid var(--color-line);
  /* Kapalıyken display:none kuralı TARAYICININ kendi sayfasından gelir;
     buraya display yazmak onu ezer ve panel kapalıyken de görünür.
     Bu yüzden yerleşim yalnızca [open] iken tanımlanıyor. */
  border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.yardim-panel[open] { display: flex; flex-direction: column; }
.yardim-panel::backdrop { background: rgba(15, 23, 42, .45); }

/* Kapatma yolu YAPIŞIK: uzun bir metnin sonuna konmuş kapat düğmesi,
   kaydırmadan görünmez (§15.1 returnPath). */
.yardim-ust {
  flex: none;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.yardim-ust h2 { flex: 1; margin: 0; font-size: var(--font-size-lg); }

/* Gövde kalan yeri ALIR, bir sayı KADAR yer kaplamaz.
   İlk yazımda `max-height: calc(min(86vh,900px) - 72px)` yazıyordu: başlık
   çubuğunun 72px olduğu VARSAYILMIŞTI. Ölçüldüğünde 89px çıktı ve gövde
   panelin dışına 17px taştı — taşan kısım `overflow:hidden` ile kesildiği
   için son satır, kaydırma çubuğu sonuna geldiği hâlde görünmüyordu.
   Elle yazılmış bir yükseklik, yanındaki her metin değişikliğinde yalan olur.
   `min-height: 0` şart: esnek bir çocuk varsayılan olarak içeriğinden
   küçülmez ve kaydırma hiç başlamaz. */
.yardim-govde {
  flex: 1 1 auto; min-height: 0;
  padding: var(--space-4) var(--space-5) var(--space-6);
  overflow-y: auto;
  line-height: 1.55;
}
/* ── Geri bildirim kutusu (§37 SHOULD) ─────────────────────────────

   Panelin ÜÇÜNCÜ çocuğu ve `flex: none`: gövde kalan yeri alıyor, kutu
   kendi boyunda duruyor. Açıldığında kendi içinde kaydırılıyor — yoksa
   uzun bir yardım metninin altında açılan form, kapat düğmesini panelin
   dışına iterdi (§15.1: çıkış yolu HER ZAMAN görünür). */
.yardim-kutu {
  flex: 0 0 auto;
  /* ⚠️ `max-height: 60%` YAZILAMAZ ve bunu ölçtük: yüzdeli bir max-height,
     ana kabın yüksekliği BELİRSİZse (panelde `height` yok, yalnızca
     `max-height` var) yok sayılır. Kutu açıldığında panelin dışına 154 piksel
     taştı — ve taşan kısım `overflow:hidden` ile kesildiği için gönder
     düğmesi hiç görünmüyordu. Gövdenin 17 piksel taştığı hatanın aynısı,
     başka bir kılıkta. */
  max-height: min(50vh, 320px);
  overflow-y: auto;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface-raised);
}
.yardim-kutu > summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-ink);
}
.yardim-kutu-ic { padding: 0 var(--space-5) var(--space-5); }
.yardim-kutu-ic textarea {
  width: 100%;
  font: inherit;
  resize: vertical;
}

.yardim-govde h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-sm); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.yardim-govde h3:first-child { margin-top: 0; }
.yardim-govde ol, .yardim-govde ul { margin: 0; padding-left: var(--space-5); }
.yardim-govde li { margin-bottom: var(--space-2); }

/* "Yapılamıyorsa neden": belirti kalın, sebep altında. Tek paragrafa
   sıkıştırılsaydı kullanıcı kendi belirtisini tarayarak bulamazdı. */
.yardim-neden { margin: 0; }
.yardim-neden dt { font-weight: 650; margin-top: var(--space-3); }
.yardim-neden dd {
  margin: var(--space-1) 0 0; padding-left: var(--space-3);
  border-left: 2px solid var(--color-line-strong);
  color: var(--color-text-muted);
}

/* ── İpucu düğmesi ─────────────────────────────────────────────────────
   Satır içi `.ipucu` metni birincil biçimdir; bu düğme yalnızca metnin
   SIĞMADIĞI yerler içindir (sayaç, rozet, başlık yanı). */
.ipucu-sarmal { position: relative; display: inline-flex; margin-left: var(--space-2); }
.ipucu-dugme {
  width: 22px; height: 22px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor var(--control-border-alpha), transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor var(--control-fill-alpha), transparent);
  color: var(--color-text-muted);
  font: inherit; font-size: var(--font-size-xs); font-weight: 700;
  line-height: 1; cursor: pointer;
}
/* Görsel daire 22px ama DOKUNMA hedefi 44px: görünen boyutu büyütmeden
   §15 tabanını tutturmanın yolu, görünmez bir taşma alanıdır. */
.ipucu-dugme::after {
  content: ""; position: absolute; inset: -11px;
}
.ipucu-dugme:hover { color: var(--color-text); }

.ipucu-balon {
  position: absolute; z-index: 30; top: calc(100% + var(--space-2));
  left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(78vw, 300px);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-text); color: var(--color-surface);
  font-size: var(--font-size-sm); font-weight: 400; line-height: 1.45;
  white-space: normal; text-align: left;
  box-shadow: var(--shadow-md);
}

/* ── Akış adımları (§32 FlowDiagrams, ekran içi görünüm) ───────────────
   Geçit adımı üç şeyle birden ayrılıyor: kalın çizgi, koyu metin ve
   «zorunlu» etiketi. Yalnızca renkle ayrılsaydı §15'i bozardı — ve renk
   körü bir kullanıcı, atlayamayacağı adımı atlanabilir sanırdı. */
.akis { margin: 0; padding-left: var(--space-5); }
.akis-adim {
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-line);
}
.akis-adim.gecit {
  border-left: 3px solid var(--state-pending);
  font-weight: 650; color: var(--color-text);
}
.akis-adim.istege {
  border-left: 2px dashed var(--color-line-strong);
  color: var(--color-text-muted);
}
.akis-etiket {
  display: inline-block; margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor var(--control-fill-alpha), transparent);
  font-size: var(--font-size-xs); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  vertical-align: 1px;
}
.yardim-govde .akis-baslik {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-base); font-weight: 650;
}

/* ── Hakkında (§32 AboutScreen) ────────────────────────────────────────
   Kelime işareti burada BÜYÜK gösteriliyor: §30 onun bir görsel değil
   METİN olduğunu ve büyütüldüğünde bozulmamasını istiyor. Ürünün başka
   hiçbir ekranında büyük hâli görünmüyor; kural burada kanıtlanıyor. */
.hakkinda-kimlik { text-align: center; }
.marka.buyuk {
  font-size: var(--font-size-2xl);
  /* İki parça ARALARINDA BOŞLUK OLMADAN yazılır — ayrım RENKTEDİR (§30).
     Bu yüzden esnek kutuda `gap` KULLANILMAZ. */
  gap: 0;
}
.hakkinda-kimlik .urun-adi {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-lg); color: var(--color-text-muted);
}
.hakkinda-kimlik .surum {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono); font-size: var(--font-size-sm);
  color: var(--color-text);
}
.hakkinda-kimlik .ikincil { margin: var(--space-2) 0 0; }

/* Belirlenmemiş / üretim olmayan durum. Renk TEK BAŞINA bırakılmıyor —
   metnin kendisi zaten "henüz belirlenmedi" diyor (§15). */
.belirsiz { color: var(--state-pending); }

.hakkinda-liste { margin: 0; }
.hakkinda-liste dt {
  font-size: var(--font-size-sm); font-weight: 600;
  color: var(--color-text-muted); margin-top: var(--space-3);
}
.hakkinda-liste dt:first-child { margin-top: 0; }
.hakkinda-liste dd { margin: var(--space-1) 0 0; }

/* Uzun tablo dar ekranda YATAY kaydırılır; sayfa gövdesi kaydırılmaz. */
.lisans-tablo { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.lisans-tablo th {
  text-align: left; padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--color-line-strong);
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted);
}
.lisans-tablo td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}
/* Alt alta gelen sayılar tabular hizalanır (§30). */
.lisans-tablo .sayisal { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* Gizli kapı ilerlemesi (§37 · Hakkında ekranı).
   Hiçbir geri bildirim vermeyen bir gizli hareket, bilen kişinin bile
   "çalışıyor mu" diye merak ettiği bir harekettir. İlerleme kelime
   işaretinin ALTINDA ince bir çizgi; hareketi azaltma tercihinde de
   görünür kalıyor çünkü ölçüsü SÜREdir, animasyon değil. */
/* Süre TEK kaynakta: JS'teki KAPI_MS ile buradaki süre AYNI olmak zorunda
   ve ayrışırlarsa çubuk yolun ortasında durur. Bir bekçi ikisinin tuttuğunu
   ölçüyor (tests/test_konsol_kapisi.py). */
:root { --kapi-suresi: 5000ms; }

.marka.buyuk { position: relative; }
.marka.buyuk::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px;
  width: 0;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
}
.marka.buyuk.kapi-basiliyor::after {
  width: 100%;
  transition: width var(--kapi-suresi) linear;
}

/* Hareketi azaltma tercihinde çubuk KAYMAZ ama YİNE GÖRÜNÜR: geri bildirimi
   tamamen kaldırmak, gizli hareketi bilen kişiye bile sessiz yapardı (§15). */
@media (prefers-reduced-motion: reduce) {
  .marka.buyuk.kapi-basiliyor::after { transition: none; width: 100%; }
}

/* ── Bekleyen işler paneli (§10) ───────────────────────────────────────
   Yardım paneliyle aynı kabuğu kullanıyor: aynı işlev (bir liste okumak)
   iki farklı görünüm almasın (§30: aynı işlevin iki farklı görünümü
   olamaz). */
.kuyruk-is {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.kuyruk-is:last-child { border-bottom: none; }
.kuyruk-is .ust {
  display: flex; gap: var(--space-3); align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.kuyruk-is p { margin: var(--space-1) 0 0; }
/* Hata TEK BAŞINA renkle söylenmiyor — satırın metni zaten "Sunucu
   reddetti: …" diyor (§15). Çizgi yalnızca gözü oraya çekiyor. */
.kuyruk-is.hatali { border-left: 3px solid var(--state-critical); padding-left: var(--space-3); }
.kuyruk-is .eylemler { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

/* ── İçe aktarım eşleme tablosu (F-011) ────────────────────────────────
   Her alan bir satır ve seçici. Okunur bir liste DEĞİL seçici: sunucunun
   tahmini bir öneri ve düzeltilebilir olmadığı sürece tahmine dayanarak
   içe aktarmış oluruz — bir telefon sütununun kimlik alanına düşme yolu. */
.ia-esleme {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: var(--space-4);
}
.ia-satir {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--font-size-sm);
}
.ia-satir span { flex: 0 0 120px; color: var(--color-text-muted); }
.ia-satir select { flex: 1; min-width: 0; }

/* ── Geri bildirim konuşması ─────────────────────────────────────────────
   Kutu bir posta kutusundan konuşmaya çevrildi (göç 0027). İki taraf GÖRSEL
   olarak ayrılıyor: kimin yazdığını okumadan anlayamamak, üç mesajdan sonra
   konuşmayı takip edilemez yapar. */
.gb-konular { margin-top: var(--space-4); }
.gb-konular h3 { font-size: var(--font-size-sm); margin: 0 0 var(--space-2); }

.gb-konu {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.gb-ust {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer; background: var(--surface-2);
  font-size: var(--font-size-sm);
}
.gb-durum { color: var(--text-muted); margin-left: auto; }
/* Okunmamış yanıt rozeti: sayı DEĞİL cümle — "2" tek başına neyin ikisi
   olduğunu söylemez. */
.gb-yeni {
  background: var(--sight-red); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: var(--font-size-xs);
}
.gb-ilk { padding: var(--space-2) var(--space-3); color: var(--text-muted);
  font-size: var(--font-size-sm); }
.gb-mesajlar { padding: 0 var(--space-3) var(--space-3); }

.gb-mesaj {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}
.gb-mesaj.sizden { background: var(--surface-2); }
.gb-mesaj.bizden { background: var(--surface-3, var(--surface-2));
  border-left: 3px solid var(--sight-red); }
.gb-kim { display: block; font-weight: 600; font-size: var(--font-size-xs);
  color: var(--text-muted); margin-bottom: 2px; }

.gb-yanit { display: flex; gap: var(--space-2); align-items: flex-start; }
.gb-yanit textarea { flex: 1; }

/* ── Engelli görünen ama TIKLANABİLİR düğme ──────────────────────────────
   `disabled` özniteliği kullanılmıyor: devre dışı bir düğme tıklama olayı
   üretmez ve sebebi anlatan kod hiç çalışmaz. Kullanıcı dokunur, hiçbir şey
   olmaz, ürünü bozuk sanır. Düğme etkin kalıyor; dokunulduğunda NEDEN
   yapılamadığını söylüyor (§8: neden + çözüm). */
.dugme.edilgen {
  opacity: .5;
  /* İmleç `not-allowed` DEĞİL: dokunulabilir olduğunu söylemesi gerekiyor,
     çünkü dokunmak bir şey YAPIYOR — sebebi gösteriyor. */
  cursor: pointer;
}

/* ── Sefer özeti: doluluk ve para ────────────────────────────────────────
   İşletmecinin seferin sonunda sorduğu soru "kaç yolcu vardı" değil,
   "değdi mi". Girilmemiş masraf, girilmiş bir sıfırdan FARKLI görünmeli —
   `.eksik` bunu taşıyor. */
.ozet-kart {
  display: grid; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.ozet-satir { display: flex; justify-content: space-between; gap: var(--space-3); }
.ozet-satir span { color: var(--text-muted); }
.ozet-satir.eksik b { color: var(--text-muted); font-weight: 400; font-style: italic; }
.ozet-satir.arti b { color: var(--state-ok); }
.ozet-satir.eksi b { color: var(--sight-red); }

table.hareket { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
table.hareket th, table.hareket td {
  padding: var(--space-2); text-align: right;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
table.hareket th:first-child, table.hareket td:first-child { text-align: left; }
table.hareket th { color: var(--text-muted); font-weight: 500; }
/* Yolcu deneyimi + otogar tabloları: `hareket`in dolgusu, ama hizalama
   sütunun içeriğinden (metin solda, `yd-sayi` sağda — `tablo()` ölçüyor). */
table.yd-tablo th, table.yd-tablo td { text-align: left; }
table.yd-tablo .yd-sayi { text-align: right; }

/* Geniş tablo dar ekranda: kapsayıcı kayar, SAYFA kaymaz.
   ⚠️ 400 px'te ölçüldü (23.09.2026): dönem raporunun 8 sütunlu ve dakiklik
   raporunun 7 sütunlu tablosu 346 px'lik kapsayıcıdan taşıyor (406–443 px) ve
   taşma BELGEYİ yatay kaydırılır yapıyordu — yalnız tablo değil, üst şerit ve
   bütün metin de sağa sürükleniyordu. Beş sütunlu eski tablolar (satış kanalı,
   satan kişi) sığdığı için kusur ancak yeni raporlarla ortaya çıktı.
   `width:100%` tek başına yetmez: sekiz sütunun min-content genişliği zaten
   kapsayıcıdan büyük, tarayıcı yüzdeyi o tabanın altına indiremez — tablo
   kapsayıcıyı AŞAR. Tek gereken, o aşmanın sayfaya değil kapsayıcıya
   yazılması.
   ⚠️ Burada `min-width: max-content` YOK ve bu bilinçli: denendi, taşmayan
   beş sütunlu tabloları da (satış kanalı, satan kişi) 346'dan 414'e açıp
   gereksiz yere kaydırılır yaptı. Kural yalnız SIĞMAYANI kurtarmalı;
   sığanın görünüşünü değiştiren bir düzeltme, düzelttiğinden fazlasını
   bozar. Tablo `width:100%` ile kendi min-content'ine zaten açılıyor. */
.tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.maliyet-form { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

/* ── Koli fişi (F-104) ────────────────────────────────────────────────────
   ⚠️ TAKİP NUMARASI HÂKİM ve bu bir süsleme değil. Bu kâğıdın var olma
   sebebi o numara; gerisi onu doğrulayan ayrıntı. İlk yazımda numara
   başlıkla aynı boydaydı ve kâğıda basıldığında sıradan bir satır gibi
   kayboluyordu — tarayıcıda bakılınca görüldü (04.09.2026).

   Üstteki firma adı da gerekli: eline kâğıt geçen kişi, kâğıdın KİMDEN
   geldiğini bilmeli. */
.fis-baslik {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-4); font-weight: 600;
}
.fis-numara {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); margin-bottom: var(--space-3);
  border: 2px solid var(--color-line-strong); border-radius: var(--radius-md);
  text-align: center;
}
.fis-numara .kimlik {
  font-size: var(--font-size-2xl); line-height: 1.1; letter-spacing: 0.02em;
}

/* ── QR: HER ZAMAN SİYAH-BEYAZ ────────────────────────────────────────────
   ⚠️ ÖLÇÜLDÜ (04.09.2026, tarayıcıda, koyu tema): QR çizgileri `#000`,
   kartın zemini `#151A21`. Yani siyah üstüne siyah — kontrast neredeyse
   sıfır ve kod OKUNMUYOR. Yolcunun bilet QR'ı (F-020) bu hâliyle canlıdaydı:
   koyu temalı bir telefonda bileti açan yolcunun kodu okutulamıyordu.

   Sebep, temaya uyan bir yüzeyde temaya UYMAYAN bir içerik olması. QR bir
   arayüz öğesi değil, OPTİK bir nesne: tarayıcı kamerası kontrast arıyor ve
   «kullanıcının tema tercihi» diye bir şey tanımıyor. Bu yüzden zemin
   koşulsuz beyaz, çizgi koşulsuz siyah — koyu temada da, kâğıtta da.

   Dolgu SESSİZ BÖLGE için: şartname QR'ın çevresinde boş bir çerçeve
   istiyor ve beyaz zemin o çerçeveyi de kaplamalı, yoksa koyu kart kenardan
   içeri girer. */
.segno {
  display: block;
  background: #ffffff;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.segno .qrline, .segno path { stroke: #000000; }

/* Firma kimliği kutusundaki logo önizlemesi (D-102 S-4). Kâğıttaki ölçüyle
   aynı sınır: burada sığmayan logo kâğıtta da sığmaz. */
.kimlik-logo-onizleme {
  margin-bottom: var(--space-3);
}
.kimlik-logo-onizleme img {
  max-height: 4rem;
  max-width: 10rem;
  object-fit: contain;
}

/* Fiyat ekranı — paket kartları (D-102 S-2). Dar ekranda alt alta. */
/* ── «Paketiniz» kartı (F-154, taslak 3. sayfa) ───────────────────────
   Koyu kart: sayfadaki öteki kartlar beyaz, bu biri değil. Abonelik bu
   ekranın en çok bakılan satırı ve taslak onu bilerek ayırıyor.

   ⚠️ Renkler `--masthead-*`ten, `--color-*` / `--state-*`ten DEĞİL. Kart
   İKİ TEMADA DA koyu; tema ile yer değiştiren bir belirteç burada açık
   temada kontrastı düşürürdü. Aynı kusur 23.09'da şerit kutucuklarında
   ÖLÇÜLEREK bulundu (ACİL 3.07) — gerekçenin tamamı `tokens.css`te.
   📌 Kural: temayla DEĞİŞMEYEN yüzeyde, temayla DEĞİŞEN renk kullanılmaz. */
.paketiniz {
  background: var(--masthead-bg);
  color: var(--masthead-text);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.paketiniz-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.plan-rozet {
  background: var(--brand);
  /* ⚠️ `--brand-ink` DEĞİL `--brand-contrast`. İlki markanın KOYU TONU ve
     nötr zeminde marka yazısı için; turuncu DOLGUNUN üstüne konunca
     ölçülen kontrast 1.49 (koyu temada 1.23) — neredeyse okunmuyordu.
     Marka dolgusunun üstündeki yazının belirteci `--brand-contrast` ve
     `.dugme.birincil` zaten onu kullanıyor.
     📌 Burada bir zamanlar `var(--brand-ink, #1F2633)` yazılıydı: renk
     YEDEĞİ, belirteç tanımlı olduğu için HİÇ devreye girmez ve yalnızca
     kuralın doğru göründüğü izlenimini verir (KnowledgeBase:
     ui/css-var-yedegi-tanimsizi-gizler). Ekran CSS'inde renk yedeği yok. */
  color: var(--brand-contrast);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-weight: 700;
  font-size: var(--font-size-sm);
}
.paketiniz .tavan-sayi { color: var(--masthead-muted); font-size: var(--font-size-sm); }
.paketiniz-kalan {
  margin: var(--space-4) 0 var(--space-3);
  color: var(--masthead-muted);
}
.paketiniz-kalan b {
  color: var(--masthead-text);
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-2);
}
/* ⚠️ Yükseklik ve `overflow` BURADA da yazılı ve bu bir tekrar değil:
   `.cubuk`un ölçüsü `.tavan .cubuk`ta tanımlı, yani o kabın İÇİNDE. Yalnız
   rengi geçersiz kılmak yetmedi — çubuk 0 piksel yüksekliğinde, yani
   GÖRÜNMEZ çıktı ve hiçbir hata vermedi. Ölçerek bulundu (23.09): yerleşim
   ölçümünde yükseklik 0 ve açıklama satırıyla aynı y'de duruyordu. */
.paketiniz .cubuk {
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: color-mix(in srgb, var(--masthead-text) 18%, transparent);
}
.paketiniz .cubuk .dolu {
  height: 100%;
  background: var(--brand);
  transition: width var(--duration-base) var(--ease);
}
.paketiniz-not { margin: var(--space-3) 0 0; color: var(--masthead-muted); }
/* Sona ermiş abonelik SÖNÜK ama okunur: marka rengi bir «devam ediyor»
   işaretidir, bitmiş abonelikte yanıltır. */
.paketiniz.bitti .plan-rozet {
  background: color-mix(in srgb, var(--masthead-text) 16%, transparent);
  color: var(--masthead-text);
}

.paket-listesi {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: var(--space-4);
}
.paket {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.paket.mevcut { border-color: var(--brand); }
.paket-ad { font-weight: 700; }
.paket-fiyat { font-size: var(--font-size-lg); font-weight: 700; margin: var(--space-1) 0; }

/* Sözleşme metni: kaydırılabilir bir kutu. Kaydırma, «sonuna kadar okundu»
   ölçümünün kendisi (ekip.html) — yüksekliği sabit olmalı. */
.sozlesme-metin {
  max-height: 22rem;
  overflow-y: auto;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.5;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}


/* ── Firma geçişi (D-116 #12 · `menu.js`) ─────────────────────────────
   Yalnız birden çok firmada hesabı olan kişide görünür. Belirteçlerden
   başka değer yok (§30). */
.firma-cip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--space-7);
  max-width: 40vw;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: transparent; color: inherit;
  font: inherit; font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer;
}
.firma-cip .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firma-cip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.firma-secici {
  width: min(28rem, calc(100vw - 2 * var(--space-4)));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}
.firma-secici::backdrop { background: color-mix(in srgb, var(--gray-900) 45%, transparent); }
.firma-ara { width: 100%; margin-bottom: var(--space-2); }
.firma-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.firma-secenek {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-size);
  padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.firma-secenek:hover, .firma-secenek:focus-visible { background: var(--color-bg); outline: none; }
.firma-secenek.simdiki { background: var(--brand-soft); }
.firma-secenek .ad { flex: 1; font-weight: 600; }
.firma-secenek .rol { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.firma-secenek kbd {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}

/* ── Dar ekranda üst çubuk (ölçülerek, 21.09.2026) ────────────────────
   400 px genişlikte (iframe ile gerçek görüntü alanı) üst çubuk 402 px
   istiyordu, sığacak alan 377 px: eşitleme rozeti ekranın 9 px DIŞINA
   taşıyor ve BÜTÜN sayfayı yatay kaydırılabilir yapıyordu — her ekranda.
   Rozetin metni GİZLENMİYOR (§10: eşitleme durumu her ekranda görünür;
   §15: yalnız renk yetmez); küçülen şey yalnızca ARALIKLAR. */
@media (max-width: 420px) {
  .ust-bar { gap: var(--space-2); padding-inline: var(--space-3); }
}

/* =====================================================================
   ALT MENÜ — onaylı taslak `notlar/Sefer Arayüz Önerisi.pdf` 1. sayfası.

   TELEFONDA alt menü, MASAÜSTÜNDE üst şerit. İkisi aynı anda görünmez;
   `menu.js` ikisini de çizer, görünürlüğü BURASI kararlaştırır — kural
   CSS'te olunca ekran genişliği değiştiğinde JS'in haberi olması
   gerekmiyor.

   ⚠️ `app.css:370` alt menünün NEDEN yapılmadığını yazıyordu: sağ alttaki
   `.geri` denetimi aynı parmak bölgesini paylaşıyordu — «iki farklı sonucu
   olan iki düğme, aynı yerde». O gerekçe HÂLÂ GEÇERLİ ve çözüm menüyü
   iptal etmek değil, `.geri`yi menünün ÜSTÜNE kaldırmak: ikisi de
   `--alt-menu-payi` belirtecini okuyor, böylece çakışma bir daha
   doğamıyor.

   ⚠️ Taslakta dört sekme var (Seferler · Muavin · Koliler · Tanımlar) ama
   üründe YEDİ ekran var. Dördüncü sıra «Daha fazla» oldu: taşan ekranlar
   (Tanımlar · Personel · Ekip · Hakkında) orada. Yedi sekmeyi dibe yatay
   kaydırılır biçimde dizmek DENENMEDİ, çünkü kayan menüde görünmeyen öğe
   kullanıcı için olmayan öğedir — kimse sağa kaydırmayı denemez.
   ===================================================================== */

/* Telefon sınırı 700 px: bu bir tasarım tercihi değil, üst şeridin yedi
   girdisinin sığmayı bıraktığı ölçülen genişlik. */
/* ⚠️ SIRA ÖNEMLİ: temel kurallar ÖNCE, medya sorguları SONRA. Bu blok bir
   ara yazımda medya sorgusu başta olacak şekilde duruyordu; `.alt-menu`nun
   temel `display:none`u aynı özgüllükte ve DAHA SONRA geldiği için medya
   sorgusundaki `display:flex`i eziyordu — menü telefonda hiç görünmüyordu
   ve hiçbir hata vermiyordu. Ölçülerek bulundu (23.09): `display` hesaplanan
   değeri «none» çıktı. */
.alt-menu {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  /* z-index 25: `.koltuk-panel` (30) ve perdesi (29) alt menüyü ÖRTER.
     Bu bilinçli — koltuk paneli kipli bir alt sayfadır ve açıkken
     kullanıcı bir alt işin içindedir; menüyü yarı örtmek bozuk görünürdü,
     tamamen örtmek doğru. `.cikis-uyarisi` (40) da üstte kalır. */
  z-index: 25;
  height: var(--alt-menu-payi);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}

.alt-menu-bag {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs, 12px);
  /* Dokunma hedefi BÜTÜN sütun: taslakta ikon küçük, ama 24 piksellik bir
     ikona nişan almak kullanıcının yapacağı iş değil
     (KnowledgeBase: ui/mobil-sabit-serit-tuzaklari). */
  min-height: var(--alt-menu-yuksekligi);
  background: none; border: none; cursor: pointer;
  font-family: inherit;
}
.alt-menu-bag svg { width: 24px; height: 24px; }
.alt-menu-bag.secili { color: var(--brand); }
.alt-menu-bag:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* «Daha fazla» paneli: menünün ÜSTÜNDE açılır, ekranı kaplamaz. Kipli bir
   pencere olsaydı, menüden menüye geçmek için iki kez kapatma gerekirdi. */
.alt-menu-daha {
  position: fixed; left: 0; right: 0;
  bottom: var(--alt-menu-payi);
  z-index: 26;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-2) var(--space-3);
  display: flex; flex-direction: column;
}
.alt-menu-daha .gezinme-bag {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

/* ── Alt menü: genişliğe göre görünürlük (temel kurallardan SONRA) ───── */
@media (max-width: 699px) {
  :root {
    --alt-menu-yuksekligi: 56px;
    --alt-menu-payi: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  /* Üst şerit telefonda GİZLİ — iki menü bir arada, aynı soruya iki cevaptır. */
  .gezinme { display: none; }
  .alt-menu { display: flex; }
  /* Akan içerik menünün ALTINDA kalmasın. ⚠️ Bu yalnız AKAN içeriği
     kurtarır; sabit konumlu kaplar bu dolguyu GÖRMEZ ve her biri payı
     `--alt-menu-payi`den kendisi hesaplar (`.geri`, `.cikis-uyarisi`). */
  .sayfa { padding-bottom: calc(var(--space-5) + var(--alt-menu-payi)); }
}

@media (min-width: 700px) {
  .alt-menu, .alt-menu-daha { display: none; }
}

/* =====================================================================
   YAN MENÜ + «DAHA FAZLA» SAYFASI + TEMA ANAHTARI — «Gece kabini»
   (onaylı tuval «Sefer Arayüz Tasarımı», 26.09.2026)

   Üç genişlik, tek menü (`menu.js` bir kez çizer, görünüşü BURASI seçer):
     · telefon  <700 px  → kenar şeridi (el tarafında, ☰ ile açılır) —
                            dosyanın sonundaki «TELEFON: KENAR ŞERİDİ» (D-141)
     · tablet   700–1099 → ikonlu RAY (88 px): başparmakla da dokunulur
     · masaüstü ≥1100    → başlıklı tam yan menü (248 px)
   Yatay şerit (`.gezinme`) ürün menüsünde ARTIK KULLANILMIYOR — sekiz
   girdiyi taşıyamıyordu ve her yeni ekran onu daha da sıkıştıracaktı.
   Sınıfı duruyor: konsol kendi bölüm şeridinde kullanıyor.

   Yan menü İKİ TEMADA DA koyu (`--masthead-*`): üst şeritle aynı gerekçe —
   gece aletinin yüzü. Seçili girdi yalnız renkle değil, soldaki çizgiyle
   de işaretli (§15).
   ===================================================================== */

/* Bölüm başlığı — hem yan menüde hem «Daha fazla»da aynı dil. */
.yan-menu-baslik {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Tema değişimi yumuşak geçsin (bekletmez: 200 ms) — ama ilk çizimde değil:
   `tema.js` temayı çizimden ÖNCE yazıyor, geçecek bir şey yok. */
body { transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

.yan-menu { display: none; }

@media (min-width: 700px) {
  :root { --yan-menu-genislik: 88px; }
  body.yan-menulu { padding-left: var(--yan-menu-genislik); }

  .yan-menu {
    display: flex; flex-direction: column; gap: var(--space-2);
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 20;
    width: var(--yan-menu-genislik);
    overflow-y: auto; scrollbar-width: thin;
    padding: var(--space-4) var(--space-2);
    background: var(--yan-menu-bg); color: var(--yan-menu-muted);
    border-right: 1px solid color-mix(in srgb, var(--yan-menu-text) 8%, transparent);
  }
  .yan-menu .yan-menu-baslik { display: none; color: var(--yan-menu-muted); }
  .yan-menu-marka { display: none; }

  .yan-menu-grup { display: flex; flex-direction: column; gap: 2px; }
  .yan-menu-grup + .yan-menu-grup {
    border-top: 1px solid color-mix(in srgb, var(--yan-menu-text) 10%, transparent);
    padding-top: var(--space-2);
  }
  /* Seyrek açılan «Hesap» ve tema DİBE yaslanır. */
  .yan-menu .grup-hesap { margin-top: auto; }

  .yan-menu-bag {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-1);
    min-height: var(--control-size);
    padding: var(--space-2) 2px;
    border-radius: var(--radius-md);
    color: var(--yan-menu-muted); text-decoration: none; text-align: center;
    font-size: var(--font-size-xs); font-weight: 600; line-height: 1.2;
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  }
  .yan-menu-bag svg { width: 22px; height: 22px; flex: none; }
  .yan-menu-bag:hover { background: var(--yan-menu-tile); color: var(--yan-menu-text); }
  .yan-menu-bag:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .yan-menu-bag.secili {
    color: var(--yan-menu-text);
    background: color-mix(in srgb, var(--brand) 22%, var(--yan-menu-bg));
  }
  .yan-menu-bag.secili::before {
    content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2);
    width: 3px; border-radius: var(--radius-full); background: var(--brand);
  }
  .yan-menu-bag.secili svg { color: var(--brand); }
  .yan-menu-bag .menu-rozet { position: absolute; top: var(--space-1); right: var(--space-2); margin: 0; }

  /* Rayda tema anahtarı dikey üç ikon; adları ekran okuyucuya kalır. */
  .yan-menu .tema-anahtar { margin-top: var(--space-2); }
  .yan-menu .tema-secenekler { grid-template-columns: minmax(0, 1fr); background: var(--yan-menu-tile); border-color: transparent; }
  .yan-menu .tema-secenek { min-height: 44px; color: var(--yan-menu-muted); }
  .yan-menu .tema-secenek span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .yan-menu .tema-secenek[aria-pressed="true"] {
    color: var(--yan-menu-text);
    background: color-mix(in srgb, var(--brand) 22%, var(--yan-menu-bg));
    box-shadow: inset 0 0 0 1.5px var(--brand);
  }
  .yan-menu .tema-durum { display: none; }
}

@media (min-width: 1100px) {
  :root { --yan-menu-genislik: 248px; }
  .yan-menu { padding: var(--space-5) var(--space-3); gap: var(--space-3); }
  /* Kelime işareti yan menüye taşınır; üst çubukta ikinci kez yazılmaz. */
  .yan-menu-marka {
    display: inline-flex; align-self: flex-start;
    padding: 0 var(--space-3) var(--space-3);
    font-size: var(--font-size-lg);
    color: var(--yan-menu-text);
  }
  .yan-menu-marka .urun { color: var(--brand); }
  body.yan-menulu .ust-bar .marka { display: none; }

  .yan-menu .yan-menu-baslik { display: block; margin: 0 var(--space-3) var(--space-1); }
  .yan-menu-grup + .yan-menu-grup { border-top: 0; padding-top: 0; }

  .yan-menu-bag {
    flex-direction: row; justify-content: flex-start; gap: var(--space-3);
    min-height: 44px; padding: 0 var(--space-3);
    font-size: var(--font-size-sm); text-align: left;
  }
  .yan-menu-bag svg { width: 20px; height: 20px; }
  .yan-menu-bag .menu-rozet { position: static; margin-left: auto; }

  .yan-menu .tema-secenekler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yan-menu .tema-secenek span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .yan-menu .tema-durum { display: block; }

  /* ── Daralt / genişlet (Tayfun 27.09) ───────────────────────────────
     Düğme markanın hizasında sağ üstte. DAR hâl = tabletteki ikon şeridi
     (yukarıdaki ≥700 kuralları); burada yalnız ≥1100'ün geniş kuralları
     geri alınıyor — ikinci bir şerit tasarımı YAZILMIYOR. */
  /* `.yan-menu` ile: dosyanın ilerisindeki genel `display:none` bunu ezmesin. */
  .yan-menu .yan-menu-daralt {
    display: grid; place-items: center;
    position: absolute; top: var(--space-4); right: var(--space-2);
    width: 36px; height: 36px; border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--yan-menu-muted); cursor: pointer;
  }
  .yan-menu-daralt:hover { background: var(--yan-menu-tile); color: var(--yan-menu-text); }
  .yan-menu-daralt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .yan-menu-daralt svg { width: 20px; height: 20px; }

  :root[data-menu="dar"] { --yan-menu-genislik: 88px; }
  :root[data-menu="dar"] .yan-menu { padding: var(--space-4) var(--space-2); gap: var(--space-2); }
  :root[data-menu="dar"] .yan-menu-daralt { position: static; align-self: center; flex: none; }
  :root[data-menu="dar"] .yan-menu-daralt svg { transform: scaleX(-1); }
  :root[data-menu="dar"] .yan-menu-marka,
  :root[data-menu="dar"] .yan-menu .yan-menu-baslik { display: none; }
  :root[data-menu="dar"] body.yan-menulu .ust-bar .marka { display: revert; }
  :root[data-menu="dar"] .yan-menu-grup + .yan-menu-grup {
    border-top: 1px solid color-mix(in srgb, var(--yan-menu-text) 10%, transparent);
    padding-top: var(--space-2);
  }
  :root[data-menu="dar"] .yan-menu-bag {
    flex-direction: column; justify-content: center; gap: var(--space-1);
    min-height: var(--control-size); padding: var(--space-2) 2px;
    font-size: var(--font-size-xs); text-align: center;
  }
  :root[data-menu="dar"] .yan-menu-bag svg { width: 22px; height: 22px; }
  :root[data-menu="dar"] .yan-menu-bag .menu-rozet { position: absolute; top: var(--space-1); right: var(--space-2); margin: 0; }
  :root[data-menu="dar"] .yan-menu .tema-secenekler { grid-template-columns: minmax(0, 1fr); }
  :root[data-menu="dar"] .yan-menu .tema-secenek span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root[data-menu="dar"] .yan-menu .tema-durum { display: none; }
}

/* ── «Daha fazla» sayfası (telefon) ───────────────────────────────────── */
.alt-menu-daha {
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: calc(100dvh - var(--alt-menu-payi) - var(--space-7));
  overflow-y: auto;
}
.alt-menu-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.alt-menu-daha a.daha-bag {
  /* `a.` ile güçlendirildi: `.koyu-serit .gezinme-bag` (masthead.css, daha
     SONRA yüklenir) aynı özgüllükte ve yazıyı koyu şeridin sönük rengine
     çekiyordu — beyaz sayfada okunmuyordu. Ölçüldü, 26.09.2026. */
  position: relative;
  flex-direction: column; justify-content: center; gap: var(--space-1);
  min-height: 76px; padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-bg); color: var(--color-text);
  font-size: var(--font-size-xs); font-weight: 600; text-align: center; white-space: normal;
}
.alt-menu-daha .daha-bag svg { width: 24px; height: 24px; color: var(--color-text-muted); }
.alt-menu-daha a.daha-bag.secili {
  background: var(--brand-soft); color: var(--brand-ink);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.alt-menu-daha .daha-bag.secili svg { color: var(--brand-ink); }
.alt-menu-daha .daha-bag .menu-rozet { position: absolute; top: var(--space-1); right: var(--space-2); margin: 0; }

/* ── Tema anahtarı: Otomatik · Gündüz · Gece ──────────────────────────── */
.tema-anahtar { display: flex; flex-direction: column; gap: var(--space-2); }
/* Masaüstü daralt düğmesi yalnız ≥1100 px'te (aşağıdaki @media). */
.yan-menu-daralt { display: none; }
/* Jest ipucu yalnız telefonda, açık panelde görünür (aşağıdaki @media). */
.el-ipucu { display: none; }
.tema-secenekler {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.tema-secenek {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  /* Ekip telefonunda dokunma tabanı 56 px (DESIGN_SYSTEM §1). */
  min-height: var(--control-size);
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-muted);
  font: inherit; font-size: var(--font-size-xs); font-weight: 600;
  cursor: pointer;
}
.tema-secenek svg { width: 20px; height: 20px; }
.tema-secenek[aria-pressed="true"] {
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--brand);
}
.tema-secenek:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tema-durum { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; }
.tema-secenekler.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── El tercihi (telefon) — `tema.js` `data-el` yazar ────────────────────
   Sol el: alt menü AYNALANIR, «Daha fazla» sol başparmağın altına gelir.
   Yalnız sıra değişiyor; hiçbir düğme küçülmüyor ya da kaybolmuyor. */
@media (max-width: 699px) {
  :root[data-el="sol"] .alt-menu { flex-direction: row-reverse; }
  /* Geri düğmesi de aynalanır (PR-05, Tayfun onayı 26.09.2026): sol elini
     kullanan için sağ alt köşe, başparmağın EN UZAK noktası. Yalnız
     telefonda — tablet ve masaüstünde sol kenarda yan menü duruyor ve
     düğme onun üstüne düşerdi. Taşıma durakları (orta/üst) aynı tarafta. */
  :root[data-el="sol"] .geri { right: auto; left: var(--space-4); }
}

/* ── K4 mikro-anket (koltuk QR) ─────────────────────────────────────────
   Beş büyük dokunma hedefi: yolcu hareket eden bir otobüste, tek elle. */
#anket fieldset, .otogar-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
#anket legend, .otogar-form legend { font-weight: 600; margin-bottom: var(--space-2); }
/* ↑ Ekip otogar penceresi yolcu anketinin desenini kullanır: çerçeveli
   fieldset'te iki satıra kırılan soru çizginin üstüne taşıyordu (03.10). */
.mola-yorum-satir label { white-space: nowrap; }
.anket-olcek { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.anket-puan {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-2) 0; min-height: 48px;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
}
.anket-puan:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
#anketKonu label { display: inline-flex; gap: var(--space-1); margin: 0 var(--space-3) var(--space-2) 0; }

/* ── Yolcu deneyimi raporu (web/yolcu-deneyimi.js) ──────────────────────
   Tek seri marka renginde; sınırlar ikincil mürekkepte ve kesikli. Sınır
   dışı nokta durum rengi AMA büyük işaret + ipucu metniyle — renk tek
   başına anlam taşımıyor. */
.yd-ozet { font-size: 1.25rem; font-weight: 600; max-width: 60ch; }
.yd-sekmeler { display: inline-flex; gap: var(--space-1); padding: var(--space-1);
  border-radius: var(--radius-md); background: var(--color-surface-raised); margin: var(--space-3) 0; }
.yd-sekmeler button { border: 0; background: transparent; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font: inherit; font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.yd-sekmeler button[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); }
.yd-grafik { position: relative; width: 100%; }
.yd-grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.yd-izgara { stroke: var(--color-line); stroke-width: 1; }
.yd-eksen { fill: var(--color-text-muted); font-size: 11px; }
.yd-seri { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.yd-nokta { fill: var(--brand); stroke: var(--color-surface); stroke-width: 2; }
.yd-disari { fill: var(--state-critical); stroke: var(--color-text); stroke-width: 2; }
.yd-disari-etiket { fill: var(--color-text); font-size: 13px; font-weight: 700; }
.yd-sinir { fill: none; stroke: var(--color-text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.yd-merkez { stroke: var(--color-text-muted); stroke-width: 1.5; }
.yd-ipucu { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  background: var(--color-text); color: var(--color-surface); font-size: 12.5px;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.yd-cubuk { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 3rem; gap: var(--space-2);
  align-items: center; margin-bottom: var(--space-2); }
.yd-iz { height: 12px; background: var(--color-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; position: relative; }
.yd-iz span { position: absolute; inset: 0 auto 0 0; background: var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.yd-sayi { text-align: right; font-variant-numeric: tabular-nums; }
.yd-istat { font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-x: auto; }
.yd-oneri li { margin-bottom: var(--space-2); max-width: 70ch; }
/* Önce/sonra formu (DEVAM A2): dar ekranda alt alta, genişte yan yana;
   düğme kutuların hizasında. Soru kutusu kendi satırında; seçenekler
   sorunun KISA adı — tam cümle telefonda kesiliyordu (04.10, A4'ün eşi). */
.yd-os-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.yd-os-form .alan { flex: 1 1 10rem; min-width: 0; }
.yd-os-form .alan:has(#os_soru) { flex-basis: 100%; }
.yd-os-form select { width: 100%; }
.yd-os-form .dugme { margin-bottom: var(--space-4); }
.yd-yorumlar { list-style: none; padding: 0; margin: 0; max-width: 70ch; }
.yd-yorumlar li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
.yd-yorumlar li div { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Lastik ölçüm tablosu (göç 0085): tablo içindeki kutular `.alan` dışında
   kaldığı için tarayıcı varsayılanına düşüyordu — 20 px, parmakla
   basılamaz ve karanlık temada beyaz kutu. Formun kutusunun aynısı. */
.lastik-tablo input {
  font: inherit; width: 100%; max-width: 7rem;
  min-height: var(--control-size); padding: var(--space-2);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.lastik-tablo input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Özet kartları (konsol · rapor) ─────────────────────────────────────
   26.09.2026'da konsol.css'ten taşındı: rapor ekranı aynı sınıfları
   kullanıyor ama konsol.css'i yüklemiyordu ve kartlar düz satır çıkıyordu. */
.konsol-kartlar {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.konsol-kart {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.konsol-kart .baslik {
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted);
}
.konsol-kart .deger {
  font-size: var(--font-size-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Mola tesisi penceresi (web/mola-secimi.js · göç 0075) ─────────────── */
.mola-penceresi { max-width: min(640px, calc(100vw - 32px)); width: 100%;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); padding: var(--space-5); }
.mola-penceresi::backdrop { background: rgb(0 0 0 / .45); }
.mola-adaylar { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.mola-aday { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.mola-sec { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.mola-ozet { margin: var(--space-1) 0 var(--space-2) var(--space-6); font-size: var(--font-size-sm); }
.mola-ozet ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.mola-konu { display: inline-flex; gap: var(--space-1); margin-right: var(--space-3); }
.mola-konu .olumlu { color: var(--state-ok); } .mola-konu .olumsuz { color: var(--state-critical); }
.mola-yorum { margin: var(--space-2) 0 0 var(--space-6); }
.mola-yorum-satir { display: grid; grid-template-columns: 8rem repeat(3, auto); gap: var(--space-3);
  align-items: center; min-height: 40px; }
.mola-not { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; }
.mola-not textarea, .mola-plansiz input[data-plansiz-ad] { font: inherit; color: inherit;
  padding: var(--space-2) var(--space-3); background: var(--color-surface-raised);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); }
.mola-plansiz { margin: var(--space-4) 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-line); }
.mola-plansiz label { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); flex-wrap: wrap; }
.sefer-molalari { margin: var(--space-3) 0; }
/* Telefonda konu adı kendi satırında. ⚠️ Gruplar AYRILIR (çizgi + boşluk):
   03.10 ekran kontrolünde konu adı bir önceki konunun seçeneklerine
   yapışık duruyordu — hangi seçeneğin hangi konuya ait olduğu karışıyordu. */
@media (max-width: 480px) { .mola-yorum-satir { grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-1) var(--space-3); padding: var(--space-2) 0;
    border-top: 1px solid var(--color-line); }
  .mola-yorum-satir > span { grid-column: 1 / -1; font-weight: 600; } }

/* ── Gelen kutusu (web/bildirim.js · göç 0071) ─────────────────────────── */
.menu-rozet { display: inline-block; min-width: 1.4em; margin-left: var(--space-1);
  padding: 0 .35em; border-radius: var(--radius-full); background: var(--state-critical);
  color: #fff; font-size: var(--font-size-xs); font-weight: 700; text-align: center; line-height: 1.4; }
.bildirim-araclari { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin: var(--space-4) 0; }
.bildirim-araclari .yd-sekmeler { margin: 0; }
.bildirim-listesi { list-style: none; margin: 0; padding: 0; }
.bildirim { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.bildirim.okunmamis { border-left: 4px solid var(--brand); }
.bildirim.onem-acil { border-left-color: var(--state-critical); }
.bildirim-ust { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bildirim-metin { margin: var(--space-2) 0; white-space: pre-line; }
.bildirim-hedef { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); }
.konu-mesajlari { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.konu-mesajlari li { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  border-radius: var(--radius-md); background: var(--color-surface-raised); max-width: 90%; }
.konu-mesajlari li.benim { margin-left: auto; background: var(--brand-soft); }
.konu-mesajlari p { margin: var(--space-1) 0 0; white-space: pre-line; }
#yeniForm select, #yeniForm textarea { font: inherit; color: inherit; padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); }

/* Kopyala düğmesi (Sefer.kopyaDugmesi · 26.09) — küçük, metnin hemen yanında. */
.kopya-dugmesi { font: inherit; font-size: var(--font-size-xs); cursor: pointer;
  padding: 2px var(--space-2); margin-left: var(--space-1); vertical-align: middle;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-raised); color: var(--color-text); min-width: 2.2em; }
.kopya-dugmesi:hover { border-color: var(--brand); }

/* =====================================================================
   TELEFON: KENAR ŞERİDİ (Tayfun 26–27.09.2026)
   «Yan paneldeki menü sağ ya da sol ele göre» — kapalıyken İNCE İKON
   ŞERİDİ, ☰ ile yazılı tam panel. Alt çubuk telefonda KALKTI; tuvalde
   (Seferler — koyu) alt menü çizilmişti, istek yan şeritti ve yolda
   kaybolmuştu. Sağ el → sağ kenar, sol el → sol kenar (`data-el`).
   Geri düğmesi şeridin İÇ tarafında durur, üstüne binmez (PR-05).
   ===================================================================== */
@media (max-width: 699px) {
  :root {
    --ray-genislik: 56px;
    /* Dipte artık menü yok: alt pay yalnız güvenli alan. */
    --alt-menu-payi: env(safe-area-inset-bottom, 0px);
  }
  .alt-menu, .alt-menu-daha { display: none !important; }
  .sayfa { padding-bottom: calc(var(--space-5) + var(--alt-menu-payi)); }

  body.yan-menulu { padding-right: var(--ray-genislik); }
  :root[data-el="sol"] body.yan-menulu { padding-right: 0; padding-left: var(--ray-genislik); }

  .yan-menu {
    display: flex; flex-direction: column; gap: var(--space-1);
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 30;
    width: var(--ray-genislik);
    padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) 4px calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; scrollbar-width: none;
    background: var(--masthead-bg); color: var(--masthead-muted);
    border-left: 1px solid color-mix(in srgb, var(--masthead-text) 8%, transparent);
  }
  /* Basılı tut + at (menu.js `elSurukleKur`): yatay jest tarayıcıya
     değil bize gelsin (`pan-y`: dikey kaydırma yine çalışır); uzun basışta
     bağlantı menüsü ve metin seçimi çıkmasın. */
  .yan-menu { touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
  .yan-menu.acik .el-ipucu {
    display: block; margin: var(--space-1) var(--space-2) 0;
    font-size: var(--font-size-xs); color: var(--masthead-muted);
  }
  .yan-menu.tasiniyor {
    transition: none; opacity: .92;
    box-shadow: 0 0 0 2px var(--brand), var(--shadow-md);
  }
  :root[data-el="sol"] .yan-menu {
    right: auto; left: 0;
    border-left: 0; border-right: 1px solid color-mix(in srgb, var(--masthead-text) 8%, transparent);
  }
  .yan-menu-ac {
    display: grid; place-items: center; flex: none;
    min-height: 48px; border: 0; border-radius: var(--radius-md);
    background: var(--masthead-tile); color: var(--masthead-text); cursor: pointer;
  }
  .yan-menu-ac svg { width: 22px; height: 22px; }
  .yan-menu-ac:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .yan-menu-marka, .yan-menu .yan-menu-baslik,
  .yan-menu .tema-anahtar, .yan-menu .el-anahtar { display: none; }
  .yan-menu-grup { display: flex; flex-direction: column; gap: 2px; }
  .yan-menu-grup + .yan-menu-grup {
    border-top: 1px solid color-mix(in srgb, var(--masthead-text) 10%, transparent);
    padding-top: var(--space-1);
  }
  .yan-menu-bag {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: var(--radius-md);
    color: var(--masthead-muted); text-decoration: none;
  }
  .yan-menu-bag svg { width: 22px; height: 22px; flex: none; }
  /* Şeritte ad görünmez ama ekran okuyucuya kalır. */
  .yan-menu-bag .ad {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .yan-menu-bag.secili { color: var(--brand); background: color-mix(in srgb, var(--brand) 22%, var(--masthead-bg)); }
  .yan-menu-bag .menu-rozet { position: absolute; top: 4px; right: 4px; margin: 0; }

  /* ☰ AÇIK: yazılı tam panel. */
  .yan-menu.acik {
    width: min(82vw, 300px);
    gap: var(--space-2);
    padding-left: var(--space-3); padding-right: var(--space-3);
    box-shadow: var(--shadow-md);
  }
  /* Açıkken ☰ yerine «Menüyü kapat» (panel ikonu + yazı, 28.09): kenara yaslı,
     ikon şeridin kenarına bakar — sağ şeritte aynalanır. */
  .yan-menu.acik .yan-menu-ac {
    display: flex; align-items: center; gap: var(--space-3); align-self: stretch;
    flex-direction: row-reverse; justify-content: flex-start; padding: 0 var(--space-3);
    font: inherit; font-size: var(--font-size-sm); font-weight: 600;
  }
  .yan-menu.acik .yan-menu-ac svg { transform: scaleX(-1); }
  :root[data-el="sol"] .yan-menu.acik .yan-menu-ac { flex-direction: row; }
  :root[data-el="sol"] .yan-menu.acik .yan-menu-ac svg { transform: none; }
  .yan-menu.acik .yan-menu-baslik { display: block; margin: var(--space-2) var(--space-2) var(--space-1); color: var(--masthead-muted); }
  .yan-menu.acik .yan-menu-bag { justify-content: flex-start; gap: var(--space-3); padding: 0 var(--space-3); font-size: var(--font-size-sm); font-weight: 600; }
  .yan-menu.acik .yan-menu-bag .ad { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .yan-menu.acik .yan-menu-bag .menu-rozet { position: static; margin-left: auto; }
  .yan-menu.acik .tema-anahtar { display: flex; margin-top: auto; }
  .yan-menu.acik .el-anahtar { display: grid; }
  .yan-menu.acik .tema-secenekler { background: var(--masthead-tile); border-color: transparent; }
  .yan-menu.acik .tema-secenek { color: var(--masthead-muted); }
  .yan-menu.acik .tema-secenek[aria-pressed="true"] {
    color: var(--masthead-text);
    background: color-mix(in srgb, var(--brand) 22%, var(--masthead-bg));
    box-shadow: inset 0 0 0 1.5px var(--brand);
  }
  .yan-menu.acik .tema-durum { color: var(--masthead-muted); }

  .yan-menu-perde {
    position: fixed; inset: 0; z-index: 29;
    background: color-mix(in srgb, var(--gray-900) 45%, transparent);
  }

  /* Geri düğmesi şeridin İÇ tarafında (PR-05 ev konumu + şerit payı). */
  .geri { right: calc(var(--ray-genislik) + var(--space-4)); }
  :root[data-el="sol"] .geri { right: auto; left: calc(var(--ray-genislik) + var(--space-4)); }
}
@media (min-width: 700px) {
  .yan-menu-ac, .yan-menu-perde, .yan-menu .el-anahtar { display: none; }
}


/* Koli resmi (göç 0102): kabul formunda küçük resimler + «Sil». */
.koli-fotolar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.koli-fotolar:empty { display: none; }
.koli-fotolar > div { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; }
.koli-foto { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md, 8px); cursor: zoom-in; display: block; }

/* «Unutulanlar» şeridi (F-182): süresi geçmiş iş varsa sayfanın üstünde. */
.unutulan-serit { display: block; cursor: pointer; margin-bottom: var(--space-4); }
.unutulan-serit[hidden] { display: none; }
.unutulan-baslik { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.unutulan-liste { display: none; margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.unutulan-serit.acik .unutulan-liste { display: block; }
.unutulan-liste li { margin: var(--space-1) 0; }

/* ── Organizasyon şeması (web/organizasyon.js · F-185) ──────────────────
   Girintili ağaç, kutu-çizgi grafiği DEĞİL: telefonda yana taşmaz, ekran
   okuyucu iç içe liste olarak okur. Bağ çizgisi sol kenarda. */
.org-sema ul { list-style: none; margin: 0; padding-left: var(--space-5);
  border-left: 1px solid var(--color-line); }
.org-sema > ul { padding-left: 0; border-left: 0; }
.org-sema li { margin: var(--space-2) 0; }
.org-dugum { display: inline-block; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); min-width: 14ch; }
.org-sema .org-kisiler { border-left: 0; padding-left: 0; margin-top: var(--space-1);
  font-size: var(--font-size-sm); }
.org-sema .org-kisiler li { margin: 0; }