@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   Orhangazi Life — üretim stil sayfası
   Kaynak: _planlar/maket/orhangazilife_maket*.html (patron onayı 13.08.2026)
   Sunai · 13.08.2026 · JS 0 byte · inline <style> yok

   MAKETTEN DEĞİŞENLER (yalnız üç şey, tasarım kararı DEĞİŞMEDİ):
     1. Yazı tipi SELF-HOST (Google Fonts kaldırıldı — KVKK + CWV)
     2. İki maketin ortak CSS'i tek dosyada birleşti
     3. Boş durum / 404 / gezinme etkin durumu eklendi (yeni ekranlar)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── YAZI TİPİ · T-02 · PLUS JAKARTA SANS · self-host ─────────────────────
   Google Fonts KULLANILMIYOR: dış istek kullanıcının IP'sini Google'a
   gönderir (KVKK) ve render'ı bloklar (K-30).

   ⭐ 15.08.2026 · T-02 UYGULANDI. Karar kilitliydi ama CSS'te SIFIR referansı
   vardı: font canlıya gönderilmiş, `ogl.css` hâlâ Bricolage+Instrument
   çağırıyordu — yani patronun seçtiği yazı tipi indiriliyor bile değildi
   (referanssız `@font-face` istek üretmez). Gökai ölçtü, burada kapandı.

   🔴 ₺ YAMASI EMEKLİ EDİLDİ — VE BU ÖLÇÜMLE KAPANDI, VARSAYIMLA DEĞİL.
   Eski kurulumda `₺` (U+20BA) yalnız Bricolage'de vardı, Instrument Sans'ta
   yoktu; bu yüzden "OGL TL" diye ÜÇÜNCÜ bir aile `unicode-range:U+20BA` ile
   yalnız o karakter için tanımlanmıştı. Plus Jakarta Sans'ta 19 karakter
   pozitif+negatif kontrollü ölçüldü (`document.fonts.load` ile ZORLA
   yüklenerek — `measureText` tek başına yüklemeyi tetiklemiyor, ilk koşumda
   pozitif kontrol `A` bile "yok" dedi ve ölçüm geçersizdi):
       ç Ç ğ Ğ ı I İ ö Ö ş Ş ü Ü ₺ · › – °  → 19/19 VAR
       pozitif kontrol A → farklı genişlik ✓ · negatif kontrol U+E000 → aynı ✓
   ₺ artık gövde ailesinin kendisinde olduğu için yama gereksiz: üç yerdeki
   `OGL TL` tanımı, yığın girdisi ve gerekçesi kaldırıldı.

   ⚠️ İKİ ALT KÜME BİRDEN ZORUNLU (T-02): `latin` VE `latin-ext`. Birini
   atlarsan Türkçe kırılır — `ğ Ğ İ ı ş Ş` latin-ext'te. `unicode-range`
   sayesinde tarayıcı sayfada geçen karaktere göre YALNIZ gerekeni indirir.
   ⚠️ Dosya adları uçtan doğrulandı (200 · 27.348 B / 21.728 B), tahmin değil. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/varlik/s/plus-jakarta-latin.7660bd99.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+20BA,U+2122,
    U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/varlik/s/plus-jakarta-ext.341687ee.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 🔴 SABİT ÇUBUKLARIN KAYDIRMA BEDELİ — 15.08.2026, EKRAN GÖRÜNTÜSÜ YAKALADI.
   Alt gezinme `fixed` olduğu andan itibaren, bir çapaya gidiş ya da
   `scrollIntoView` hedefi görünüme sokarken çubuğun ALTINA bırakabiliyor:
   tarayıcı hedefi "görünür alanın dibi" sayıyor, oysa dibin son 67px'i
   çubuğun. Kanıt: gün çizgisini `scroll_into_view_if_needed` ile görünüme
   sokup kırptım — kare çubuğun kendisiyle doldu, çizgi görünmüyordu.
   ⚠️ ÜST TARAF DA AYNI: `.ust` yapışkan ve dosyada bunun için ELEMAN BAZLI
      bir yama zaten vardı (`.yazi h2,h3{scroll-margin-top:76px}`) — yani
      sorun biliniyordu ama yalnız yazı sayfalarında çözülmüştü. Buradaki
      kural TÜM sayfalar ve TÜM hedefler için geçerli; eski yama yerinde
      bırakıldı (kaldırmak ayrı ve ölçülmesi gereken bir iş).
   ⚠️ Sayılar jetondan geliyor: çubuk yüksekliği değişirse burası da değişir. */
html{scroll-padding-top:calc(var(--ust-h) + var(--a4));
     scroll-padding-bottom:calc(var(--cubuk-yer) + var(--a3))}
@media (min-width:900px){
  /* Çubuk yok → dipte telafiye gerek yok. */
  html{scroll-padding-bottom:var(--a4)}
}

:root{
  color-scheme:light;
  /* ══ 15.08.2026 · P4 "CADDE"YE GEÇİŞ — maket canlıya taşındı ══════════
     Kaynak: `_planlar/TASARIM_SISTEMI.md` (KİLİTLİ) · maket `varyant_d2_mobil.html`.
     ⚠️ DEĞİŞKEN ADLARI KASTEN KORUNDU. 40+ bileşen kuralı `var(--kobalt)`,
        `var(--cizgi)` diye okuyor; adları da değiştirseydim tek seferde
        yüzlerce satır dokunmam gerekirdi ve her biri ayrı bir kaza şansıydı.
        Değişen yalnız DEĞER. Ad ile değerin ayrılması bu geçişin tamamını
        tek bloğa indirdi — ve geri almayı da tek bloğa indiriyor.
     ⚠️ Kontrast oranları TASARIM_SISTEMI §1'de ölçülmüş çiftler; burada
        yeniden ölçüldü (aşağıdaki `dogrula_tema.py`), en zayıf halka 5,31. */
  --kobalt:#14428A;  /* marka laciverti — başlık, damga, fiyat · kâğıtta 9,65 */
  --mercan:#C2371F;  /* yeme-içme ailesi — TEK vurgu       · kâğıtta 5,44 */
  --gol:#0F6E78;     /* gezi ailesi — bağlantı, ikon        · kâğıtta 5,96 */
  --kagit:#EDF0F4;   /* SAYFA zemini (P4 --zemin) — kart bunun üstünde durur */
  --yuzey:#FFFFFF;   /* kart (P4 --kagit)                                   */
  --metin:#16202C;   /* P4 --murekkep · kâğıtta 16,44 · zeminde 14,39       */
  --is:#525C6E;      /* P4 --soluk    · kâğıtta 6,74 · zeminde 5,90        */
  --cizgi:#D9DFE7;   /* P4 --tel — DERİNLİK YOK, ayrım burada               */
  --cizgi-ince:#E2E7EE;
  --wa:#25D366;      /* WhatsApp markası — sabit */
  --wa-metin:#06301F;/* 7,3:1 · beyaz metin 1,98:1 ile düşerdi */
  /* ⚠️ ÜÇÜNCÜ HÂL — kobalt/mercan çiftinin taşıyamadığı tek durum.
     Recai §12-8: "sarı uyarı rengi palette yok, ölçerek eklenmeli."
     Adı konudan: İznik sırının Kütahya kolunda görülen HARDAL sarısı —
     çini paletinin kendi dünyasından, dışarıdan getirilmiş bir uyarı sarısı
     değil. YALNIZ üç-hâl göstergesinde kullanılır (kapı 🟡 ÖLÇÜLEMEDİ,
     moderasyon SLA sayacı, bayat kapı sonucu). Fiyatsız kalemde ve
     "teyit edilmedi" durumunda KULLANILMAZ: onların dili zaten var
     (kesikli çerçeve = mühürlenmemiş · mercan = bayat).
     Ölçüldü: #8A6410 / #FCFCFA = 5,22:1 · #FBF3E2 zemin üstünde 4,92:1 */
  --hardal:#8A6410;
  --hardal-zemin:#FBF3E2;
  --hardal-cizgi:#E3CE9B;
  --imza:#00BFFE;    /* Saim App favicon — K-04, sabit */
  /* ══ KÖŞE · ÜÇ DEĞER (T-09) ══ eski ikili 10/6 idi; sistem 8/14/999 diyor.
     --r   = katman (kart kabı, panel, menü)      14px
     --r-s = kart/düğme/girdi                      8px
     --r-hap = rozet, hap, sekme                 999px
     ⚠️ Adlar yine korundu: 40 kural `var(--r)`/`var(--r-s)` okuyor. */
  --r:14px; --r-s:8px; --r-hap:999px;
  --olcu:1120px;
  /* ⚠️ TEK AİLE, İKİ ROL. T-02 Plus Jakarta Sans diyor; ayrım artık AİLEDE
     değil AĞIRLIK ve İZDE: display 700-800 + sıkı iz, gövde 400-600.
     `--display` jetonu ADIYLA duruyor çünkü 12 bileşen kuralı onu okuyor —
     ad korunur, değer değişir (jeton geçişinde uygulanan aynı ilke). */
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --govde:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* ══ 🔴 BOŞLUK RİTMİ · 4/8/12/20/32/56 — 15.08.2026 CANLI KUSUR DÜZELTMESİ ══
     ⚠️ BU JETONLAR KULLANILIYORDU AMA HİÇBİR YERDE TANIMLI DEĞİLDİ.
     Ölçüm (canlıdan, `-X GET https://orhangazilife.com/varlik/s/ogl.<karma>.css`):
         `var(--a1..--a6)` kullanımı .......... 23 bildirim
         `--aN:` tanımı ....................... 0
     Tanım `ogl2.css`'te duruyordu (14.08, F2 taslağı) ve `ogl2.css` HİÇBİR
     şablondan bağlı değil (grep: 0 referans) — yani vitrin bandı ve kokpit,
     canlıda `padding:0 / gap:0` ile çiziliyordu. Tanımsız `var()` bildirimi
     "hesaplanan-değer anında geçersiz" yapar: kural düşer, tarayıcı UYARI
     VERMEZ, sayfa çalışmaya devam eder. Kokpit "taşındı ve yeşil" sayıldı
     çünkü kapılar MAKETİ ölçüyordu — canlıda hiçbir boşluk yoktu.
     Bu, projenin kendi "kod var, kablo yok" dersinin CSS hâli.
     ⚠️ Değerler uydurulmadı: `ogl2.css` satır 97'deki ritmin AYNISI. */
  --a1:4px; --a2:8px; --a3:12px; --a4:20px; --a5:32px; --a6:56px;

  /* ══ KOKPİT (gece) — TASARIM_SISTEMI §1. Hex'ler `.kokpit` kurallarında
     zaten gömülüydü; jetona alındı ki gün çizgisi ile kokpit AYNI kaynaktan
     beslensin (iki yerde elle yazılan lacivert, bir gün ayrışır). ══ */
  --gece:#0C2956; --gece-us:#243E67; --gece-tel:#4B6182; --gece-soluk:#B6CCE2;
  --gece-ray:#41587B;      /* gün çizgisinin boş rayı  · gece üstünde 1,72 — ÇİZGİ, metin değil */
  --gece-gecti:#9CB0CE;    /* geçmiş işaret + dolu ray · gece üstünde 5,05 */
  --gece-devir:#95AE7E;    /* nöbet devri — günün TEK geri dönülemez olayı */

  /* ══ ALT GEZİNME · TASARIM_SISTEMI §7 ══ */
  --cubuk-h:58px; --ust-h:56px;
  /* 🔴 ÇUBUĞUN GERÇEKTEN KAPLADIĞI YER — TEK KAYNAK, ÜÇ TÜKETİCİ.
     İlk yazımda gövde payı olarak doğrudan `--cubuk-h` (58px) kullandım ve
     ölçüm 1,0–1,7px ÖRTME gösterdi: çubuğun boyu 58 DEĞİL, 58 + 1px üst
     kenarlık + güvenli alan payı. Bir pikselin peşine düşmek değil mesele;
     aynı sayının üç yerde (gövde payı · profil payı · sipariş çubuğunun
     dibi) elle tekrarlanması, birinin yarın unutulması demekti.
     `--a2` nefes payı: alt bilginin son satırı çubuğa YAPIŞMASIN. */
  --cubuk-yer:calc(var(--cubuk-h) + 1px + var(--a2) + env(safe-area-inset-bottom));
  --cam-koyu:rgba(255,255,255,.82);
  --cam-blur:saturate(180%) blur(20px);

  /* ══ HAREKET · TASARIM_SISTEMI §5 · tavan 300ms ══ */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-cekmece:cubic-bezier(0.32,0.72,0,1);

  /* ══ REKLAM · TASARIM_SISTEMI §8 ══
     ⚠️ Maketteki kesikli "REKLAM ALANI" kutusu CANLIYA GELMEDİ (brief şartı):
     o dil maketin envanter gösterimidir. Canlıda ücret ödemiş işletme yoksa
     yuva 0 BAYT basar — `parca/reklam.php`, vitrin bandıyla aynı sözleşme.
     Jetonlar GERÇEK reklam çizildiğinde kullanılır. */
  --reklam:#E2E7EE; --reklam-cizgi:#C2CBD7; --reklam-yazi:#313B4A;
}

body{
  margin:0;background:var(--kagit);color:var(--metin);
  font-family:var(--govde);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* ⚠️ ALT GEZİNME İÇİN YER — kural veritabanının (ux · Navigation/Sticky
     Navigation) tam olarak istediği telafi: "Add padding equal to nav height",
     "Don't let nav overlap content". Çubuk `fixed`; bu satır olmasaydı alt
     bilginin son satırı ve imza favicon'u çubuğun ALTINDA kalırdı.
     ⚠️ `env(safe-area-inset-bottom)` iPhone çentik kuşağı için — çubuğun
     KENDİSİ de aynı payı alıyor, ikisi birbirini tamamlıyor. */
  padding-bottom:var(--cubuk-yer);
}
img{max-width:100%;display:block}
a{color:var(--gol);text-underline-offset:3px}
a:hover{color:var(--kobalt)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* ₺ gövde ailesinde YOK — para basan her yer display ailesinde olmalı */
.para{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}

/* Klavye odağı — asla kaldırılmaz */
:focus-visible{outline:3px solid var(--gol);outline-offset:2px;border-radius:4px}

.atla{position:absolute;left:-9999px;top:0;background:var(--kobalt);color:#fff;
  padding:.75rem 1rem;z-index:99;border-radius:0 0 var(--r-s) 0}
.atla:focus{left:0}

.sar{width:100%;max-width:var(--olcu);margin:0 auto;padding:0 1.15rem}
.ust-ara{margin-top:.85rem}
.alt-ara{margin-bottom:1.1rem}
/* ⚠️ 14.08.2026 · KISAYOL YASAĞI — `.kirinti` ile aynı tuzak, aynı gün.
   `.blok` ve `.hero` `.sar` ile AYNI elemanda kullanılıyor (`ara.php` 3 yerde
   `class="sar blok"`, `etkinlikler.php` `class="sar hero"` — ikisi de canlı).
   `padding:2.4rem 0` bir KISAYOL: yatay değeri de yazar ve `.sar`'ın
   `padding:0 1.15rem`'ini SIFIRLAR. İki kural da (0,1,0) özgüllükte; sonra
   yazılan kazanır, `.blok` dosyada `.sar`'dan sonra → mobilde metin ekranın
   kenarına yapışıyordu. Tek yönlü longhand yazılıyor: dikeyi ben veriyorum,
   yatayı `.sar`'a bırakıyorum. @media(min-width:900px) karşılıkları da aynı
   şekilde düzeltildi — yalnız tabanı düzeltmek hatayı 900px üstünde diriltirdi. */
.blok{padding-top:2.4rem;padding-bottom:2.4rem}
.blok + .blok{border-top:1px solid var(--cizgi-ince)}
.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── ikon ───────────────────────────────────────────────────────────────── */
.ikon{width:1.375rem;height:1.375rem;flex:none;fill:none;stroke:currentColor;
  stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.ikon-s{width:1.05rem;height:1.05rem}
.ikon-l{width:1.75rem;height:1.75rem}
.ikon-set{position:absolute;width:0;height:0;overflow:hidden}

/* ── üst bar ────────────────────────────────────────────────────────────── */
.ust{position:sticky;top:0;z-index:40;background:var(--kagit);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;gap:.7rem;min-height:60px}
/* 🚫 Kelime-işareti asla büyük harfe çevrilmez (Fenai kuralı): "ORHANGAZİ LİFE"
   ve "ORHANGAZI LIFE" — iki dil, iki yanlış. Kural burada da yazılı duruyor. */
.marka{display:flex;align-items:center;text-decoration:none;min-height:44px;text-transform:none}
.marka img{height:26px;width:auto;display:block}   /* ölçülmüş üst bar yüksekliği */
.menu-ac{margin-left:auto}
.menu-ac summary{list-style:none;display:flex;align-items:center;gap:.4rem;
  min-height:44px;min-width:44px;justify-content:center;cursor:pointer;
  color:var(--kobalt);font-weight:600;font-size:.92rem;border-radius:var(--r-s)}
.menu-ac summary::-webkit-details-marker{display:none}
.gezinti{position:absolute;left:0;right:0;top:100%;background:var(--yuzey);
  /* ⚠️ GÖLGE KALDIRILDI (T-09: "Derinlik: yok"). Yapışkan başlığın altındaki
     12px'lik düşen gölge, sistemin tek gölge istisnası olan klavye odak
     halkasıyla çakışıyordu. Ayrım artık kenarlık + zemin farkıyla. */
  border-bottom:1px solid var(--cizgi)}
.gezinti ul{display:flex;flex-direction:column;max-width:var(--olcu);margin:0 auto;padding:.4rem 1.15rem 1rem}
.gezinti a{display:flex;align-items:center;min-height:46px;color:var(--metin);
  text-decoration:none;font-weight:500;border-bottom:1px solid var(--cizgi-ince)}
.gezinti a:hover{color:var(--gol)}
/* Bulunduğun yer görünür olmalı (UX kuralı: Navigation · Active State) */
.gezinti a[aria-current="page"]{color:var(--kobalt);font-weight:700;
  box-shadow:inset 3px 0 0 var(--kobalt);padding-left:.55rem}
.gezinti--masa{display:none}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding-top:2.1rem;padding-bottom:2rem}   /* kısayol YOK — bkz. `.blok` notu */
.kas{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--is);margin-bottom:.65rem}
.hero-bas{font-size:clamp(2.05rem,7.4vw,3.5rem);color:var(--kobalt);font-weight:800;
  letter-spacing:-.04em;margin-bottom:1.05rem}
.hero-bas label{cursor:text}

.ara-kutu{display:flex;align-items:center;gap:.55rem;background:var(--yuzey);
  border:1.5px solid var(--kobalt);border-radius:var(--r);padding:.35rem .35rem .35rem .8rem}
.ara-kutu:focus-within{outline:3px solid var(--gol);outline-offset:2px}
.ara-ikon{color:var(--kobalt)}
.ara-girdi{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--metin);
  padding:.6rem 0;min-height:44px}
.ara-girdi:focus{outline:none}
.ara-girdi::placeholder{color:#72757B}
.ara-btn{border:0;background:var(--kobalt);color:#fff;font:inherit;font-weight:600;
  border-radius:var(--r-s);padding:0 1.15rem;min-height:44px;cursor:pointer;
  transition:background-color .16s ease}
.ara-btn:hover{background:#0D2C52}

/* ⚠️ gap .45rem = 7,2px idi; dokunma hedefleri arası eşik 8px (UX vt ·
   Touch/Spacing). 13.08'de `.alt li` düzeltildi ama AYNI AİLENİN diğer
   iki üyesi (.cipler, .mah) gözden kaçtı — kapı ikisini de sayıyordu.
   Bir kusur ailesi bulunca aileyi taramak gerekir, tek üyeyi değil. */
.cipler{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.85rem}
.cip{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:999px;
  color:var(--is);text-decoration:none;font-size:.92rem;font-weight:500;
  transition:border-color .16s ease,color .16s ease}
.cip:hover{border-color:var(--gol);color:var(--gol)}

/* dürüstlük satırı — hero'nun tezi */
.durust{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--cizgi);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;color:var(--is);font-size:.98rem}
.durust b{color:var(--kobalt);font-weight:700}
.durust a{font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}

/* ── bölüm başlığı ──────────────────────────────────────────────────────── */
.bas-sira{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.bas{font-size:clamp(1.3rem,4.3vw,1.75rem);color:var(--kobalt)}
.bas-yan{font-size:.92rem;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
/* `gap` 14.08.2026'da eklendi: teyit sayacı başlığın yanına tik + sayı olarak
   geliyor (`liste.php`). Tek çocuklu `.bas-yan`ların ("Tümü →", "N kategori")
   çıktısını değiştirmez — gap yalnız iki çocuk arasında iş görür. */

/* ── teyit damgası — İMZA ELEMAN ────────────────────────────────────────── */
.damga{display:inline-flex;flex-direction:column;align-items:center;gap:.05rem;
  position:relative;border:2px solid currentColor;border-radius:5px;
  padding:.5rem .85rem;color:var(--kobalt);background:transparent;
  transform:rotate(-2deg);transform-origin:left center;
  font-family:var(--govde);text-align:center;line-height:1.15}
.damga::before{content:"";position:absolute;inset:3px;border:1px solid currentColor;
  border-radius:2px;opacity:.5;pointer-events:none}
.damga-ust{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.damga-alt{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.damga--mini,.damga--s{padding:.3rem .55rem;transform:rotate(-1.5deg)}
.damga--mini .damga-ust,.damga--s .damga-ust{font-size:.55rem}
.damga--mini .damga-alt,.damga--s .damga-alt{font-size:.8rem}
/* Eşik aşıldı: renk DEĞİŞİR ve METİN de değişir — sadece-renkle-anlam yasağı */
.damga--bayat{color:var(--mercan)}

/* ── bugün şeridi ───────────────────────────────────────────────────────── */
.bugun{display:grid;gap:.9rem}
.nobet{background:var(--yuzey);border:1px solid var(--cizgi);border-left:4px solid var(--kobalt);
  border-radius:var(--r);padding:1.05rem 1.1rem}
.nobet-ust{display:flex;align-items:center;gap:.5rem;color:var(--kobalt);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nobet-ad{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--metin);
  letter-spacing:-.02em;margin:.4rem 0 .15rem}
.nobet-adres{color:var(--is);font-size:.95rem}
.nobet-saat{margin-top:.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--kobalt)}
.nobet-kaynak{margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--cizgi);
  color:var(--is);font-size:.8rem;font-variant-numeric:tabular-nums}

.eylemler{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}   /* 8px alt piksel yuvarlamasında 7,8 ölçüldü → 8,8px */
.eylem{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:48px;padding:0 1.1rem;border-radius:var(--r-s);text-decoration:none;
  font-weight:600;font-size:.97rem;border:1.5px solid var(--kobalt);color:var(--kobalt);
  background:var(--yuzey);transition:background-color .16s ease,color .16s ease}
.eylem:hover{background:var(--kobalt);color:#fff}
.eylem--sade{border-color:var(--cizgi);color:var(--is)}
.eylem--sade:hover{background:var(--kobalt);border-color:var(--kobalt);color:#fff}

/* ── hızlı erişim ───────────────────────────────────────────────────────── */
.hizli{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.hizli li:first-child{grid-column:1 / -1}
.hkart{display:flex;align-items:center;gap:.7rem;min-height:64px;padding:.8rem .9rem;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  text-decoration:none;color:var(--metin);font-weight:600;
  transition:border-color .16s ease,color .16s ease}
.hkart:hover{border-color:var(--kobalt);color:var(--kobalt)}
.hkart .ikon{color:var(--gol)}
.hkart small{display:block;font-weight:400;font-size:.8rem;color:var(--is);line-height:1.3}
/* Kategori kartının teyit sayacı — "Otomotiv · 21 işletme · ✓ 6 teyitli".
   `<small>` blok bir satır, tik onun İÇİNDE satır-içi duruyor: `inline-flex`
   yapsaydım satır kırılınca tik metinden kopardı. Bu yüzden yalnız temel
   çizgi düzeltmesi + kobalt vurgu; sayı ile aralığı HTML'deki gerçek boşluk
   verir (CSS düşse bile "✓ 6" bitişmez). */
.hkart small .ikon-teyit{vertical-align:-.18em;color:var(--kobalt)}

/* ── mekân kartları ─────────────────────────────────────────────────────── */
.kartlar{display:grid;gap:.85rem}
.mkart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .16s ease}
.mkart--one{border-color:var(--kobalt);border-width:1.5px}
.mkart:hover{border-color:var(--kobalt)}
.mkart:focus-within{outline:3px solid var(--gol);outline-offset:2px}
/* Kartın tamamı dokunma hedefi — başlık bağlantısı kartı kaplıyor */
.mkart-ad a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
/* Fotoğraf yok — yer tutucu ince şerit: yeri ayırır (CLS), yalan söylemez */
.foto-yok{height:76px;background:#F3F2EE;border-bottom:1px solid var(--cizgi);
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  color:#676B73;text-align:left;padding:.8rem 1rem}
.foto-yok span{font-size:.78rem;font-weight:600;letter-spacing:.03em;display:block}
.foto-yok small{font-size:.72rem;font-weight:400;display:block;line-height:1.35}
.mkart-ic{padding:.95rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.mkart-ic .damga{align-self:flex-start}
.mkart-kas{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--is)}
.mkart-ad{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.mkart-ad a{color:var(--metin);text-decoration:none}
.mkart-ad a:hover{color:var(--kobalt);text-decoration:underline}
.mkart-alt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.rozet-menu{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;color:var(--mercan);border:1px solid var(--mercan);
  border-radius:999px;padding:.22rem .6rem;text-transform:uppercase}
.bekliyor{font-size:.86rem;color:var(--is)}
.git{display:inline-flex;align-items:center;gap:.25rem;font-weight:600;font-size:.92rem;
  color:var(--gol);min-height:44px}
/* ⭐ 14.08.2026 · Yemek dışı kartta menü sinyali YOK (bkz. parca/kart.php) →
   alt satırda tek çocuk kalıyor. `space-between` tek çocuğu SOLA yaslar; o
   zaman "Künye →" eylemi /firmalar listelerinde solda, /yeme-icme listelerinde
   sağda dururdu. Aynı eylem site boyunca aynı yerde durur. */
.mkart-alt > .git:only-child{margin-left:auto}

/* davet kartı */
.davet{background:var(--kobalt);color:#fff;border-radius:var(--r);padding:1.2rem 1.15rem;
  display:flex;flex-direction:column;gap:.75rem}
.davet h3{font-size:1.15rem;color:#fff}
.davet p{color:#CBD8E8;font-size:.95rem}
.davet a{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  align-self:flex-start;min-height:48px;padding:0 1.15rem;background:#fff;color:var(--kobalt);
  border-radius:var(--r-s);text-decoration:none;font-weight:700}

/* ── mahalleler ─────────────────────────────────────────────────────────── */
.mah{display:flex;flex-wrap:wrap;gap:.55rem}  /* .5rem tam 8px verir ama alt piksel yuvarlaması 7,7px ölçtü — .55rem (8,8px) */
.mah a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:var(--r-s);
  text-decoration:none;color:var(--metin);font-weight:600;font-size:.95rem}
.mah a:hover{border-color:var(--kobalt);color:var(--kobalt)}
.mah-not{margin-top:.8rem;color:var(--is);font-size:.92rem}
.mah-not a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ── uyarı kutusu ───────────────────────────────────────────────────────── */
.uyari{display:flex;gap:.65rem;background:#FDF3F1;border:1px solid #EBC3BA;
  border-left:4px solid var(--mercan);border-radius:var(--r);padding:.85rem 1rem;
  color:#7A2A1B;font-size:.93rem}
.uyari .ikon{color:var(--mercan);margin-top:.15rem;flex:none}

/* ══ İŞLETME PROFİLİ ═══════════════════════════════════════════════════════ */
/* ⚠️ 15.08.2026 · İKİ YAPIŞKAN ÇUBUK AYNI DİBİ PAYLAŞIYOR — ve bu tam olarak
   kural veritabanının uyardığı durum (ux · Layout/Fixed Positioning:
   "Don't stack multiple fixed elements carelessly").
   `.wa-serit` (sipariş) `bottom:0` idi; alt gezinme de `bottom:0`. İkisi
   ÜST ÜSTE binerdi ve z-index'i yüksek olan (wa-serit, 50) gezinmeyi
   tamamen örterdi — yani 2.938 işletme profilinde alt gezinme SESSİZCE
   yok olurdu. Sıra: gezinme en altta (parmağın gittiği yer, her sayfada
   aynı), sipariş çubuğu onun ÜSTÜNDE (o sayfanın birincil eylemi).
   ⚠️ `:has()` KULLANILMADI: sipariş çubuğu varsa gezinme de vardır, yani
   kaydırma KOŞULSUZ doğru. Koşullu yazsaydım destelemeyen tarayıcıda
   çubuklar üst üste binerdi — sessiz bozulma. */
body.profil{padding-bottom:calc(88px + var(--cubuk-yer))}
body.profil--siparissiz{padding-bottom:var(--cubuk-yer)}

/* ⚠️ .kirinti aynı elemanda .sar ile (<nav class="kirinti sar">) — ikisi de tek
   sınıf, özgüllük EŞİT → kaynak sırası kazanır (.kirinti 281 > .sar 90).
   Bu yüzden BURADA KISAYOL YAZILMAZ:
     padding kısayolu  → .sar'ın `padding:0 1.15rem` yatayını siler
     margin  kısayolu  → .sar'ın `margin:0 auto` ORTALAMASINI siler (14.08 hatası:
                         `margin:.85rem 0 .2rem` sol/sağı 0 yaptı, kırıntı
                         >1120px ekranda sola kaçtı, gövde ortada kaldı)
   Kural: bu kural bloğunda yalnız TEK YÖNLÜ (longhand) yaz. */
.kirinti{margin-top:.85rem;margin-bottom:.2rem;font-size:.86rem;color:var(--is)}
.kirinti ol{display:flex;flex-wrap:wrap;gap:0 .5rem;align-items:center}
.kirinti li{display:flex;align-items:center}
/* min-width: kısa kırıntı ("Keşfet" 41px) hedefi 44px'i tutturamıyordu (Kapı 9) */
.kirinti a{color:var(--is);text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;min-width:44px}
.kirinti a:hover{color:var(--gol);text-decoration:underline}
.kirinti li:not(:last-child)::after{content:"›";margin-left:.5rem;color:#72757B}
.kirinti [aria-current]{color:var(--metin);font-weight:600}

.kapak{height:120px;background:#F3F2EE;border:1px solid var(--cizgi);
  border-radius:var(--r);margin-top:.7rem;display:flex;align-items:center;
  justify-content:center;gap:.7rem;color:#676B73;text-align:left;padding:1rem 1.2rem}
.kapak span{font-size:.85rem;font-weight:600;letter-spacing:.03em;display:block}
.kapak small{font-size:.78rem;display:block;line-height:1.4}

.kunye{padding:1.5rem 0 .4rem}
.kunye .kas{display:flex;flex-wrap:wrap;align-items:center;gap:0 .35rem}
.kunye .kas a{color:var(--is);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.kunye .kas a:hover{color:var(--gol);text-decoration:underline}
.kunye h1{font-size:clamp(1.8rem,6.2vw,2.7rem);color:var(--kobalt);font-weight:800;
  letter-spacing:-.035em;margin:.5rem 0 1rem}

.satirlar{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0 0;
  padding-top:1.1rem;border-top:1px solid var(--cizgi)}
.satir{display:flex;gap:.7rem;align-items:flex-start}
.satir .ikon{color:var(--gol);margin-top:.18rem}
.satir b{display:block;font-weight:600}
.satir small{display:block;color:var(--is);font-size:.88rem;line-height:1.45}
.satir a{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.satir a:hover{text-decoration:underline}

.saatler{margin-top:.35rem}
.saatler summary{cursor:pointer;color:var(--gol);font-size:.88rem;font-weight:600;
  min-height:44px;display:inline-flex;align-items:center;gap:.3rem;list-style:none}
.saatler summary::-webkit-details-marker{display:none}
/* ⚠️ maket "▾" karakteri kullanıyordu; ÖLÇTÜM: U+25BE her iki yazı tipinde de
   YOK → sistem yedeğine düşüyordu. Phosphor caret SVG ile değiştirildi. */
.saatler summary .ikon{transition:transform .16s ease}
.saatler[open] summary .ikon{transform:rotate(180deg)}
.saatler table{border-collapse:collapse;margin-top:.4rem;font-size:.9rem}
.saatler td{padding:.22rem .9rem .22rem 0;color:var(--is)}
.saatler td+td{font-variant-numeric:tabular-nums;padding-right:0}
.saatler tr[data-bugun] td{color:var(--metin);font-weight:700}

.profil-ag{display:block}
.bolum-blok{padding:2.2rem 0;border-top:1px solid var(--cizgi-ince)}

.menu-bas{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.menu-bas h2{font-size:clamp(1.5rem,5vw,2rem);color:var(--kobalt)}
.menu-not{margin-top:.65rem;color:var(--is);font-size:.92rem}

.mbolum{margin-top:1.8rem}
.mbolum-bas{font-family:var(--govde);font-size:.74rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mercan);padding-bottom:.5rem;
  border-bottom:1.5px solid var(--cizgi)}
.kalemler{margin-top:.35rem}
.kalem{display:flex;align-items:baseline;gap:.4rem;padding:.62rem 0}
.kalem + .kalem{border-top:1px solid var(--cizgi-ince)}
.kalem-ad{font-weight:500}
.kalem-ad small{display:block;font-size:.85rem;color:var(--is);font-weight:400;line-height:1.4}
.kalem-nokta{flex:1 1 1.5rem;min-width:1.5rem;border-bottom:2px dotted #CFCCC4;
  transform:translateY(-.28rem)}
.kalem-fiyat{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--kobalt);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.paket{margin-top:1.7rem;padding:.95rem 1.05rem;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r);font-size:.95rem;color:var(--is)}
.paket b{color:var(--metin)}

.profil-yan{margin:1.6rem 0 .4rem}
.wa-kart{background:var(--yuzey);border:1.5px solid var(--kobalt);border-radius:var(--r);
  padding:1.15rem 1.1rem;display:flex;flex-direction:column;gap:.85rem}
.wa-kart h2{font-size:1.2rem;color:var(--kobalt)}
.wa-kart p{font-size:.94rem;color:var(--is)}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:56px;padding:0 1.2rem;background:var(--wa);color:var(--wa-metin);
  border-radius:var(--r-s);text-decoration:none;font-family:var(--display);
  font-weight:800;font-size:1.08rem;letter-spacing:-.02em;transition:filter .16s ease}
.wa-btn:hover{filter:brightness(.93);color:var(--wa-metin)}
.wa-btn .ikon{stroke-width:18}
/* Mobilde eylem yapışkan çubukta; kart aynı düğmeyi tekrarlamaz */
.wa-btn--kart{display:none}
.onizleme{background:#F1F6F2;border:1px dashed #B9CFBF;border-radius:var(--r-s);
  padding:.7rem .85rem;font-size:.9rem;color:#2A4436;line-height:1.5}
.onizleme span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#4C6856;margin-bottom:.25rem}

.sahiplik{display:flex;gap:.7rem;align-items:flex-start;padding:1rem 1.05rem;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);font-size:.95rem}
.sahiplik .ikon{color:var(--gol);margin-top:.15rem}
/* ⚠️ 14.08.2026 · GÖZLE BAKIŞTA YAKALANDI (sayısal kapıların hepsi yeşildi).
   Eskiden `inline-flex`ti: 44px'lik dokunma hedefi satır İÇİ bir kutu olduğu için,
   metnin sarılan SON satırına düştüğünde o satırın kutusunu şişiriyor ve araya
   kopuk bir boşluk açıyordu. Nerede görüneceği METNİN UZUNLUĞUNA bağlıydı —
   ölçüldü: 390px'te yemek dışı sayfalarda 🔴, 360/414px'te 🟢, 768/1440px'te
   tek satıra sığdığı için zararsız. Yani konumu tasarım değil, RASTLANTIydı;
   kategori adının kaç harf olduğuna göre değişen bir yerleşim bir karar değildir.
   `flex` + `width:fit-content`: bağlantı DAİMA kendi satırında, her genişlikte
   aynı, 44px hedef korunuyor, odak halkası metni sarıyor (tam genişliğe yayılmıyor). */
.sahiplik a{display:flex;width:fit-content;align-items:center;min-height:44px;font-weight:600}

.yakin-bas{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--is);margin-bottom:.7rem;font-family:var(--govde)}
.yakin{display:grid;gap:.5rem;margin-bottom:1.6rem}
.yakin a{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  min-height:56px;padding:.6rem .95rem;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r);text-decoration:none;color:var(--metin);font-weight:600;
  transition:border-color .16s ease,color .16s ease}
.yakin a:hover{border-color:var(--kobalt);color:var(--kobalt)}
.yakin small{display:block;font-weight:400;font-size:.82rem;color:var(--is)}
.yakin .ikon{color:var(--gol)}

/* ⚠️ `bottom:0` DEĞİL — alt gezinme orada duruyor (bkz. body.profil notu).
   Güvenli alan payı ARTIK BURADA DEĞİL: çubuk onu kendisi alıyor, iki kez
   almak sipariş düğmesini 34px yukarı iterdi. */
.wa-serit{position:fixed;left:0;right:0;bottom:var(--cubuk-yer);z-index:50;
  background:var(--kagit);border-top:1px solid var(--cizgi);
  padding:.6rem 1.15rem}
.wa-serit .wa-btn{max-width:var(--olcu);margin:0 auto}

/* ══ BOŞ DURUM / 404 — K-20'nin görünen yüzü ═══════════════════════════════
   Kural (UX vt · Feedback/Error Recovery): hata tek başına bırakılmaz,
   çıkış yolu verilir. Kural (Feedback/Empty States): boş ekran değil,
   ne olduğu + ne yapılacağı. Sahte doluluk ÜRETİLMEZ. */
.bos{padding:3rem 0 3.5rem;max-width:44rem}
.bos-kod{font-family:var(--govde);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mercan)}
.bos h1{font-size:clamp(1.7rem,5.5vw,2.6rem);color:var(--kobalt);font-weight:800;
  letter-spacing:-.035em;margin:.55rem 0 .9rem}
.bos p{color:var(--is)}
.bos p + p{margin-top:.7rem}
.bos .eylemler{margin-top:1.6rem}
.bos-liste{margin-top:1.9rem;padding-top:1.2rem;border-top:1px solid var(--cizgi)}
.bos-liste h2{font-size:.74rem;font-family:var(--govde);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--is);margin-bottom:.7rem}
.bos-liste ul{display:flex;flex-wrap:wrap;gap:.5rem}   /* 7,2px → 8px (aynı aile) */
/* ⚠️ ÖZGÜLLÜK KAZASI (gözle bakışta yakalandı, kapılar yeşildi):
   seçici `.bos-liste a` idi ve yeni `.bos-not` cümlesinin İÇİNDEKİ bağlantıyı
   da çipe çeviriyordu — cümlenin ortasına düşmüş bir düğme gibi duruyordu.
   Çip yalnız LİSTE ögesine ait: `.bos-liste ul a`. Tasarım DNA'sının uyardığı
   "tip-tabanlı ve eleman-tabanlı seçici karışımı" kazasının aynısı. */
.bos-liste ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:var(--r-s);
  text-decoration:none;color:var(--metin);font-weight:600;font-size:.95rem}
.bos-liste ul a:hover{border-color:var(--kobalt);color:var(--kobalt)}
/* 404 çıkış yolu: açık sayfa yoksa çalışmayan bağlantı vermek yerine tek cümle */
.bos-not{color:var(--is);font-size:.95rem;line-height:1.6;max-width:44ch}
.bos-not a{font-weight:600;text-decoration:underline;padding-block:.32em}
/* Arama YALNIZ /ara ucu açıkken çizilir; etiket görünür (placeholder etiket değildir) */
.bos-ara{margin-top:1.6rem;max-width:34rem}
.bos-ara label{display:block;font-size:.9rem;font-weight:600;color:var(--metin);margin-bottom:.4rem}
/* Hazırlık şeridi — ana sayfada yayında kayıt yokken görünür. Sahte doluluk
   yerine sayının kendisini söyler; "yakında" demez, ne yapıldığını söyler. */
.hazirlik{display:flex;gap:.75rem;align-items:flex-start;background:var(--yuzey);
  border:1px solid var(--cizgi);border-left:4px solid var(--kobalt);
  border-radius:var(--r);padding:1.05rem 1.1rem}
.hazirlik .ikon{color:var(--kobalt);margin-top:.15rem;flex:none}
.hazirlik b{display:block;color:var(--metin);font-weight:700;margin-bottom:.2rem}
.hazirlik p{color:var(--is);font-size:.95rem}
.hazirlik a{font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* ── alt bilgi ──────────────────────────────────────────────────────────── */
.alt{border-top:1px solid var(--cizgi);background:var(--yuzey);padding:2rem 0 2.4rem;margin-top:.5rem}
.alt-ag{display:grid;gap:1.4rem}
.alt h2{font-family:var(--display);font-size:.95rem;color:var(--kobalt);margin:0 0 .5rem;letter-spacing:-.01em}
/* ⚠️ Kapı 9 ölçtü: 44px'lik bağlantılar arasında yalnız 4px kalıyordu
   (UX vt · Touch: hedefler arası ≥8px). .3rem → .55rem, ölçülen aralık 9px. */
.alt li{margin-bottom:.55rem}
.alt a{color:var(--is);text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;min-height:44px}
.alt a:hover{color:var(--gol);text-decoration:underline}
.alt-son{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--cizgi-ince);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--is);font-size:.85rem}
.imza-bag{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-s)}
.imza-bag svg{width:26px;height:26px} /* K-04: hedef ≥24px, dokunma kutusu 44px */

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (min-width:600px){
  .kartlar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hizli{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hizli li:first-child{grid-column:auto}
  .yakin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kalem-fiyat{font-size:1.12rem}
}
@media (min-width:900px){
  /* kısayol YOK — `.sar`'ın yatay padding'ini silmesin (bkz. taban `.blok` notu) */
  .blok{padding-top:3.2rem;padding-bottom:3.2rem}
  .hero{padding-top:3.4rem;padding-bottom:3rem}
  .ara,.cipler,.durust{max-width:46rem}
  .bugun{grid-template-columns:1.4fr 1fr;align-items:start}
  .kartlar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hizli{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hkart{flex-direction:column;align-items:flex-start;justify-content:center;min-height:100px}
  .alt-ag{grid-template-columns:repeat(4,minmax(0,1fr))}
  .menu-ac{display:none}
  .gezinti--masa{display:block;margin-left:auto;position:static;border:0;box-shadow:none;background:none}
  .gezinti--masa ul{flex-direction:row;gap:1.35rem;padding:0;align-items:center}
  .gezinti--masa a{min-height:44px;border:0;font-size:.95rem;color:var(--is);white-space:nowrap}
  .gezinti--masa a:hover{color:var(--gol)}
  .gezinti--masa a[aria-current="page"]{color:var(--kobalt);font-weight:700;box-shadow:none;
    padding-left:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .ust-ic{gap:1.6rem}
  .bolum-blok{padding:2.8rem 0}
  /* ⚠️ ALT GEZİNME BURADA BİTER (maketin kendi kesme noktası da 900px).
     Gerekçe: bu genişlikte üst bardaki yatay menü (`.gezinti--masa`) zaten
     görünür ve aynı altı bölümü veriyor — iki gezinme aynı anda, aynı
     hedeflere. Çubuk kalsaydı ekranın dibinden 58px'i hiçbir şey
     kazandırmadan yerdi. Çubuk gidince telafi payı da gider; `.wa-serit`
     dibe geri iner ve kendi güvenli alan payını geri alır. */
  .cubuk{display:none}
  body,body.profil--siparissiz{padding-bottom:0}
  body.profil{padding-bottom:88px}
  .wa-serit{bottom:0;padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
}
@media (min-width:1024px){
  body.profil{padding-bottom:0}
  .wa-serit{display:none}
  /* DOM sırası künye → WhatsApp kartı → menü; masaüstünde kart sağ sütunda
     ve İLK EKRANDA. Tek işaretleme, iki düzen. */
  .profil-ag{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 2.6rem;align-items:start}
  /* ⚠️ Sipariş kartı yoksa 340px'lik sütun boş kalıyordu ve içerik gereksiz
     daralıyordu (masaüstünde gözle bakışta yakalandı; sayısal kapıların
     hepsi yeşildi). Gövde sınıfı zaten durumu taşıyor, :has() gerekmiyor. */
  body.profil--siparissiz .profil-ag{display:block}
  .kunye{grid-column:1;grid-row:1;padding-top:1.5rem}
  .profil-yan{grid-column:2;grid-row:1 / span 2;position:sticky;top:80px;margin:1.5rem 0 0}
  .profil-ana{grid-column:1;grid-row:2}
  .kunye h1{max-width:18ch}
  .kapak{height:150px}
  .wa-btn--kart{display:flex}
}

/* ══ İÇERİK SAYFASI · mahalle · keşfet · pillar ════════════════════════════
   Sunai · 13.08.2026 · Şifai'nin 52 Markdown dosyası için.

   ⚠️ ÖZGÜLLÜK NOTU: global sıfırlama `p{margin:0}` ve `ul,ol{list-style:none}`
      diyor. Uzun metin bunları GERİ ister; `.yazi p` (0,2,0) ve `.yazi ul`
      (0,2,0) global tek-eleman seçicileri (0,0,1) yener. Sıfırlamayı
      DEĞİŞTİRMİYORUM — kart/liste bileşenlerinin tamamı ona dayanıyor.

   Ölçülen kurallar (ui-ux-pro-max · Typography):
      satır uzunluğu 65-75 karakter → `max-width:68ch`
      satır yüksekliği 1.5-1.75     → gövde 1.72
   Ölçülen kural (Navigation/Sticky): 60px yapışkan üst bar çapa hedefini
      örter → `scroll-margin-top`. */

.yazi-ag{display:block}
.yazi-bas{padding:1.6rem 0 0}
.yazi-bas .kas{margin-bottom:.55rem}
.yazi-bas h1{font-size:clamp(1.85rem,6.4vw,2.9rem);color:var(--kobalt);font-weight:800;
  letter-spacing:-.035em;margin:0 0 1rem;max-width:20ch}

/* ⚠️ ÖLÇÜLDÜ, VARSAYILMADI — `ch` TUZAĞI:
   `1ch` = "0" glifinin genişliği (Instrument Sans 17px'te **11,31px**), ama
   Türkçe gövde metninde ortalama karakter **7,84px**. Yani `68ch` = 769px =
   **98 karakter/satır** demek; kural 65-75 diyor. İlk sürümüm `max-width:68ch`
   yazmıştı ve kapı yeşildi (kural "68ch" olarak yazılıydı) — kuralı SAYIYLA
   sınayınca %40 sapma çıktı. Doğru değer: 49ch ≈ 554px ≈ **71 karakter**.
   Kapsayıcıya değil METİN ÖGESİNE uygulanır: tablo ve omurga ızgarası sütunun
   tamamını kullanmalı, onlar okunacak satır değil. */
.yazi{font-size:1.0625rem;line-height:1.72}
.yazi p,.yazi .yazi-liste,.sss dt,.sss dd{max-width:49ch}
.yazi .not{max-width:54ch}
.yazi .not p{max-width:none}
.yazi p{margin:0 0 1.05rem}
.yazi p:last-child{margin-bottom:0}
.yazi b{font-weight:700;color:var(--metin)}
.yazi code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:#F3F2EE;border:1px solid var(--cizgi);border-radius:4px;padding:.05em .35em}
/* Giriş 18,24px: 49ch orada 76 karakter veriyordu (ölçüldü) → 46ch = 72 */
.yazi--giris{font-size:1.14rem;line-height:1.65;color:var(--is)}
.yazi--giris p{max-width:46ch}
.yazi--giris b{color:var(--metin)}

.yazi section{padding-top:2.1rem}
.yazi section + section{margin-top:.2rem}
/* ⚠️ GÖZLE BAKIŞ: bölüm ayracı (h2'nin üst çizgisi) sütunun TAMAMINI
   kaplıyordu (1084px) ama altındaki metin 555px'te bitiyordu — çizgi metne
   ait görünmüyor, havada duruyordu. Ayraç okuma sütunuyla AYNI genişlikte
   olmalı: 34.7rem = 555px (ölçülen paragraf genişliği). */
.yazi h2{font-size:clamp(1.28rem,4.2vw,1.68rem);color:var(--kobalt);margin:0 0 .9rem;
  padding-top:.9rem;border-top:2px solid var(--cizgi);max-width:34.7rem}
.yazi h3{font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--metin);
  letter-spacing:-.02em;margin:1.7rem 0 .6rem}
/* Yapışkan üst bar (60px) çapayı örtmesin */
.yazi h2,.yazi h3,.yazi section{scroll-margin-top:76px}
/* ⚠️ emojisi ikon DEĞİL: başlıktaki uyarı Phosphor SVG ile çizilir */
.yazi h2.bas-uyari,.yazi h3.bas-uyari{display:flex;align-items:center;gap:.5rem;color:var(--mercan)}
.yazi h2.bas-uyari .ikon,.yazi h3.bas-uyari .ikon{flex:none}

.yazi-liste{list-style:disc;padding-left:1.2rem;margin:0 0 1.05rem}
ol.yazi-liste{list-style:decimal}
.yazi-liste li{margin-bottom:.5rem}
.yazi-liste li::marker{color:var(--gol)}
.yazi a{font-weight:500}
/* ── SATIR İÇİ BAĞLANTI — 44px kuralından BİLİNÇLİ SAPMA, gerekçesiyle ───
   WCAG 2.5.8 (Target Size Minimum) cümle içindeki bağlantıyı AÇIKÇA muaf
   tutar: "hedef bir cümlenin içindeyse veya boyutu hedef olmayan metnin
   satır yüksekliğiyle sınırlanmışsa". Prozadaki 652 bağlantıyı 44px'e
   zorlamak her satırı şişirir ve metnin ritmini bozar.
   Yaptığım: dokunma alanını **satır kutusunun tamamına** (≈29px) genişletmek.
   `padding-block` satır içi kutuda YERLEŞİMİ değiştirmez, yalnız isabet
   alanını büyütür; negatif margin gerekmez.
   ⚠️ Kapı 9 bu muafiyeti tanımıyor ve satır içi bağlantıları kırmızı yakıyor —
      bulgu Fedai/Görai'ye yan bulgu olarak yazıldı, kapı susturulmadı. */
.yazi-liste a,.yazi p a,.sss dd a{text-decoration:underline;text-decoration-thickness:1px}
/* Kapı 9 ölçtü: kural yalnız `p` ve `li` altına iniyordu; `dd`, `.not p`,
   tablo hücresi 19-21px kalmıştı. Kural metin bağlamının TAMAMINA yazıldı. */
.yazi a{padding-block:.32em}
/* Gezinme rolündeki bağlantılar TAM hedef alır — cümle içi muafiyet onlara işlemez */
.omurga a,.kunye-kart dd a,.kaynaklar a{padding-block:0}
/* Veri tablosundaki bağlantı gezinmedir (31 mahalle listesi): satır büyür, hedef 44px olur */
/* min-width: kısa mahalle adları ("Tekke" 41px, "Fatih" 35px) genişlikte
   kalıyordu; kutu büyür, metin hizası değişmez (justify-content: flex-start). */
table.veri a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-block:0}

/* ── not kutusu (⚠️ paragrafı ve alıntı) ─────────────────────────────────
   Emoji yerine Phosphor ikon. Renk TEK BAŞINA anlam taşımaz: uyarı kutusunun
   ikonu ve metni de vardır (UX vt · Accessibility/Color Only). */
.yazi .not{display:flex;gap:.7rem;background:var(--yuzey);border:1px solid var(--cizgi);
  border-left:4px solid var(--is);border-radius:var(--r);padding:.9rem 1.05rem;
  margin:0 0 1.15rem;font-size:.98rem;color:var(--is)}
.yazi .not p{margin:0}
.yazi .not--uyari{background:#FDF3F1;border-color:#EBC3BA;border-left-color:var(--mercan);color:#7A2A1B}
.yazi .not--uyari .ikon{color:var(--mercan);margin-top:.15rem;flex:none}
.yazi .not b{color:inherit}

/* ── TEYİT ROZETİ — imza elemanın satır içi kardeşi ──────────────────────
   `[SAHA TEYİDİ GEREKLİ]` işareti yayında ham köşeli parantez olarak GÖRÜNMEZ;
   yazarın koyduğu yerde bu rozete dönüşür. Kesikli çerçeve = damgalanmamış:
   dolu çerçeve "gittik, sorduk" demektir, burada gidilmedi. */
.teyit-im{display:inline-flex;align-items:center;gap:.28rem;vertical-align:baseline;
  border:1.5px dashed var(--is);border-radius:999px;padding:.05rem .5rem .1rem;
  font-family:var(--govde);font-size:.8rem;font-weight:600;line-height:1.35;
  color:var(--is);background:var(--kagit);white-space:nowrap}
.teyit-im .ikon{flex:none}
.ikon-xs{width:.85rem;height:.85rem}
/* Metin içinde kalan uyarı işareti (tablo hücresi, künye değeri) — emoji değil */
.ikon-uyari{color:var(--mercan);vertical-align:-.1em;margin-right:.2em}
.yazi .kunye-artik{padding-top:1.4rem}
.not--uyari .teyit-im{color:#7A2A1B;border-color:#B9705F;background:#FFF7F5}

/* ── damgasız damga (sayfa düzeyi durum) ─────────────────────────────────
   Aynı kutu, aynı eğim, KESİKLİ çerçeve. Üç durum metinle ayrılır. */
.damga--kesik{border-style:dashed;color:var(--is)}
.damga--kesik::before{border-style:dashed}

.derleme{display:flex;align-items:flex-start;gap:.9rem;flex-wrap:wrap;
  margin:1.35rem 0 0;padding-top:1.1rem;border-top:1px solid var(--cizgi)}
.derleme p{flex:1 1 16rem;color:var(--is);font-size:.92rem;line-height:1.55;margin:0}
.derleme a{font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* ── künye kartı ─────────────────────────────────────────────────────────
   ⚠️ Değeri olmayan satır HİÇ ÇİZİLMEZ (şablon kuralı). Nüfus kaynağı yok →
      nüfus satırı yok; "—" bile basılmaz. Boş alan boş görünür. */
.yan-kunye{margin:1.7rem 0 0}
.kunye-kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1.05rem 1.1rem 1.15rem}
.kunye-kart h2{font-size:.74rem;font-family:var(--govde);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--is);margin:0 0 .35rem}
.kunye-kart dl{margin:0}
/* ⚠️ GÖZLE BAKIŞ BULGUSU (sayısal kapılar yeşilken): ilk sürüm etiket solda /
   değer SAĞA DAYALI idi. "Kırsal mahalle (eski köy)" ve "~6,6 km (kuş uçuşu)"
   sarınca sağa dayalı iki satıra düşüyor ve künye kırık görünüyordu — üstelik
   sağa dayalı sarmalayan metin en zor okunan hizalamadır.
   Çözüm: etiket ÜSTTE, değer ALTTA, ikisi de sola dayalı. Sarma sorunu
   yapısal olarak ortadan kalkıyor; künye bir tablo değil, bir künyedir. */
.kunye-kart dl > div{padding:.62rem 0;border-top:1px solid var(--cizgi-ince)}
.kunye-kart dt{color:var(--is);font-size:.82rem;line-height:1.35;margin-bottom:.12rem}
.kunye-kart dd{margin:0;font-weight:600;line-height:1.4;min-width:0;
  overflow-wrap:break-word}
.kunye-kart dd a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  font-weight:700;text-decoration:none}
.kunye-kart dd a:hover{text-decoration:underline}

/* ── SSS ─────────────────────────────────────────────────────────────────
   AKORDEON YOK: her cevabın ilk cümlesi doğrudan yanıt; kapalı akordeon onu
   hem taramadan hem alıntıdan gizlerdi. */
.sss dl{margin:0}
.sss dl > div{padding:1rem 0;border-top:1px solid var(--cizgi-ince)}
.sss dl > div:first-child{border-top:0;padding-top:.2rem}
.sss dt{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--kobalt);
  letter-spacing:-.015em;margin-bottom:.35rem}
.sss dd{margin:0;color:var(--is)}

/* ── iç link omurgası ────────────────────────────────────────────────────
   652 bağlantı, 0 kırık. Şablon bağlantı EKLEMEZ ve ÇIKARMAZ. */
/* ── iç link omurgası — GEZİNMEDİR, cümle değil ──────────────────────────
   ⚠️ İlk sürümde bağlantılar satır içi duruyordu; Kapı 9 ölçtü: sarılan
      satırlarda hedefler arası **7px** kalıyordu (eşik 8px). Bunlar prozanın
      içindeki bağlantılar değil, sayfanın omurgası — bu yüzden `.mah a` ve
      `.bos-liste a` ile AYNI çip dilini kullanıyorlar. Yeni bileşen değil,
      var olan gezinme dilinin tekrarı. */
.omurga ul{display:grid;gap:.55rem}
.omurga li{padding:.7rem .9rem .55rem;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--r);font-size:.94rem;color:var(--is);line-height:1.55}
.omurga a{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  margin:.32rem .6rem .32rem 0;border:1px solid var(--cizgi);background:var(--kagit);
  border-radius:var(--r-s);color:var(--metin);text-decoration:none;
  font-weight:600;font-size:.93rem;transition:border-color .16s ease,color .16s ease}
.omurga a:hover{border-color:var(--kobalt);color:var(--kobalt)}

/* ── kaynaklar ───────────────────────────────────────────────────────────
   Kapalı başlar (UX vt · Content/Truncation), çünkü kaynak listesi okurun
   değil denetleyenin aradığı şeydir — ama saklanmaz. */
.kaynaklar{margin-top:2.4rem;border:1px solid var(--cizgi);border-radius:var(--r);
  background:var(--yuzey);max-width:54ch}
.kaynaklar summary{display:flex;align-items:center;gap:.55rem;min-height:52px;padding:0 1rem;
  cursor:pointer;list-style:none;font-weight:600;font-size:.94rem;color:var(--kobalt);
  border-radius:var(--r)}
.kaynaklar summary::-webkit-details-marker{display:none}
.kaynaklar summary span{flex:1}
.kaynaklar summary .kaynak-ok{transition:transform .16s ease;color:var(--is)}
.kaynaklar[open] summary .kaynak-ok{transform:rotate(180deg)}
.kaynaklar ul{padding:0 1rem .3rem;display:grid;gap:.55rem}
.kaynaklar li{font-size:.88rem;color:var(--is);line-height:1.55;padding-left:.9rem;
  border-left:2px solid var(--cizgi)}
.kaynak-not{padding:.2rem 1rem 1rem;font-size:.82rem;color:var(--is);line-height:1.5}

/* ── veri tablosu ────────────────────────────────────────────────────────
   Kaydırma SAYFAYA değil tabloya ait (UX vt · Responsive/Horizontal Scroll:
   375px'te 6 sütunlu tablo sayfayı kaydırıyordu). Klavyeyle de kaydırılır. */
.tablo-sar{overflow-x:auto;margin:0 0 1.15rem;border:1px solid var(--cizgi);
  border-radius:var(--r);background:var(--yuzey)}
.tablo-sar:focus-visible{outline:3px solid var(--gol);outline-offset:2px}
table.veri{border-collapse:collapse;width:100%;font-size:.94rem}
table.veri th,table.veri td{padding:.62rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--cizgi-ince)}
table.veri thead th{font-family:var(--govde);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--is);
  border-bottom:1.5px solid var(--cizgi);white-space:nowrap}
table.veri tbody th{font-weight:600;color:var(--metin)}
table.veri tr:last-child th,table.veri tr:last-child td{border-bottom:0}

.ham-satir{white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:.85rem;
  background:#FDF3F1;border:1px dashed var(--mercan);border-radius:var(--r-s);padding:.6rem .8rem}

@media (min-width:900px){
  .yazi-bas{padding-top:2.2rem}
  .omurga ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  /* Aynı DOM, iki düzen: künye masaüstünde sağ sütunda.
     ⚠️ YAPIŞKAN DEĞİL — 5-7 satırlık başvuru verisi takip edilecek bir eylem
        değil. İşletme profilinde yapışkan olan şey sipariş kartıdır. */
  .yazi-ag{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 2.8rem;align-items:start}
  .yazi-bas{grid-column:1;grid-row:1}
  .yan-kunye{grid-column:2;grid-row:1 / span 2;margin-top:2.2rem}
  .yazi--govde{grid-column:1;grid-row:2}
  /* Künyesi olmayan sayfa (keşfet) 320px'lik boş sütun bırakmaz */
  body.yazi-sayfa--kunyesiz .yazi-ag{display:block}
}

/* ── hareket azaltma ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .damga{transform:none}
  .profil-yan{position:static}
}

/* ══ /ara — TEK KUTUDAN ARAMA ══════════════════════════════════════════════
   Sunai · 14.08.2026 · JS 0 byte (form GET, sunucu çizer)

   ⚠️ Arama kutusu YENİDEN TASARLANMADI: ana sayfadaki `.ara-kutu` bileşeninin
      aynısı kullanılıyor. Aynı işi yapan iki farklı görünüm, arayüzün
      sözlüğünü bölerdi.
   ⚠️ Otomatik tamamlama YOK — UX vt `Search/Autocomplete` kuralı BİLİNÇLİ
      reddedildi: öneri ya JS ya her tuşta sunucu isteği ister, ikisi de
      halka açık sayfanın 0-byte sözleşmesini bozar (K-30). Telafi: form GET,
      sonuç sayfası paylaşılabilir ve yer imlenebilir bir adrestir. */

.ara-bas{padding:2rem 0 .4rem}
.ara-h1{font-size:clamp(1.7rem,6vw,2.6rem);color:var(--kobalt);font-weight:800;
  letter-spacing:-.035em;margin:0 0 1rem}
.ara-etiket{display:block;font-size:.92rem;font-weight:600;color:var(--is);
  margin-bottom:.5rem;max-width:44ch;line-height:1.45}
.ara-h2{font-size:.74rem;font-family:var(--govde);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--is);margin:0 0 .7rem}
.ara-not{color:var(--is);font-size:.96rem;line-height:1.6;max-width:46ch}
.ara-not a{font-weight:600;padding-block:.32em}

/* ── İMZA · arama muhasebesi ──────────────────────────────────────────────
   Panelin satır muhasebesiyle AYNI gramer: girdi → çıktının ayrıştırması.
   Kullanıcıya ne kadar veri tarandığı ve neyin neden görünmediği tek satırda
   söylenir. "0 sonuç bulundu" yerine geçen şey budur. */
.ara-muhasebe{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .55rem;
  margin:1.4rem 0 .2rem;padding:.65rem .85rem;background:var(--yuzey);
  border:1px solid var(--cizgi);border-left:4px solid var(--kobalt);
  border-radius:var(--r);font-size:.93rem;color:var(--is);line-height:1.5;
  font-variant-numeric:tabular-nums}
.ara-muhasebe .am-girdi{font-family:var(--display);font-weight:700;color:var(--metin)}
.ara-muhasebe .am-ok{color:var(--kobalt);font-weight:700}
.ara-muhasebe .am-parca{white-space:nowrap}
.ara-muhasebe .am-parca b{font-family:var(--display);font-weight:700;color:var(--metin)}

/* ── grup ─────────────────────────────────────────────────────────────────
   ⚠️ GRUP BAŞINA KAPI DURUMU: bir grup iki tamamen farklı sebeple boş
      olabilir — (a) öyle bir kayıt hiç yok, (b) kayıt var ama yayında değil
      (K-20). Jenerik arama ikisine de "0 sonuç" der; biz hangisi olduğunu
      söylüyoruz. Sitenin tezinin aramaya uygulanmış hâli budur. */
.ara-grup{padding-top:1.6rem}
.ara-grup-bas{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem}
.ara-grup-bas h2{font-family:var(--govde);font-size:.74rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--is)}
.ara-sayi{font-family:var(--display);font-weight:700;color:var(--kobalt);
  font-variant-numeric:tabular-nums;font-size:.95rem}
.ara-liste li{display:flex;align-items:center;gap:.7rem;
  border-bottom:1px solid var(--cizgi-ince)}
.ara-liste a{flex:1;min-width:0;display:block;padding:.7rem 0;min-height:56px;
  text-decoration:none;color:inherit}
.as-ad{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em;color:var(--metin);line-height:1.3}
.ara-liste a:hover .as-ad{color:var(--gol)}
.as-alt{display:block;font-size:.9rem;color:var(--is);margin-top:.1rem}
.as-damga{flex:none;font-size:.78rem;font-weight:700;color:var(--kobalt);
  font-variant-numeric:tabular-nums;text-align:right}
.ara-bos{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1rem 1.05rem}
.ara-bos p{color:var(--is);font-size:.96rem;line-height:1.6;max-width:48ch}
.ara-bos p + p{margin-top:.55rem}
.ara-bos b{color:var(--metin);font-weight:700}
.ara-bos a{font-weight:600;padding-block:.32em}
/* İpucu çipleri — gezinme rolünde, tam 44px hedef (satır içi muafiyet yok) */
.ara-cip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.ara-cip a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
  border:1px solid var(--cizgi);background:var(--yuzey);border-radius:var(--r-s);
  color:var(--metin);text-decoration:none;font-weight:600;font-size:.93rem}
.ara-cip a:hover{border-color:var(--kobalt);color:var(--kobalt)}

/* ══ /etkinlikler — AJANDA OMURGASI ════════════════════════════════════════
   ⚠️ TAKVİM IZGARASI REDDEDİLDİ: belediyenin tüm arşivi 23 kayıt; bir ay
      ızgarası ekranın büyük bölümünü boş kutuyla doldurur — yani sayfa
      "burada bir şey yok" der ve bunu SÜSLEYEREK der. Tek sütun, zaman
      sıralı ajanda.
   ⚠️ Tarih burada dekorasyon değil YAPININ KENDİSİ: doktrin "sıra ancak
      içerik gerçekten sıralıysa" der; tarih gerçekten sıralıdır. */

.etk-suzgec ul{display:flex;flex-wrap:wrap;gap:.5rem;padding:.4rem 0 0}
.etk-suzgec a,.etk-yok{display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:0 .9rem;border-radius:var(--r-s);
  font-weight:600;font-size:.93rem;text-decoration:none}
.etk-suzgec a{border:1px solid var(--cizgi);background:var(--yuzey);color:var(--metin)}
.etk-suzgec a:hover{border-color:var(--kobalt);color:var(--kobalt)}
.etk-suzgec a[aria-current="page"]{border-color:var(--kobalt);border-width:2px;
  background:#EEF3F9;color:var(--kobalt);font-weight:700}
/* ⚠️ SIFIR DÖNECEK SÜZGEÇ DÜĞMEYE DÖNMEZ — ölü uca giden bir çip, çıkmazı
   süslemektir. 404 sayfasında arama kutusunu çizmeme kuralının aynısı. */
.etk-yok{border:1px dashed var(--cizgi);color:var(--is);cursor:default}
.etk-sayi{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--is)}
.etk-suzgec a[aria-current="page"] .etk-sayi{color:var(--kobalt)}

.etk-ajanda{margin:0}
/* Gün başlığı = omurga. `aria-hidden`: tam tarih her kayıtta ayrıca yazılı,
   görsel gruplama işitsel bağlamı bozmasın. */
.etk-gun{display:flex;align-items:center;gap:.65rem;padding:1.5rem 0 .5rem}
.etk-gun:first-child{padding-top:.2rem}
.etk-gun-no{font-family:var(--display);font-size:2.1rem;font-weight:800;
  color:var(--kobalt);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.etk-gun-ad{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--is);line-height:1.25}
.etk-kayit{border-top:1px solid var(--cizgi-ince);padding:.85rem 0}
.etk-zaman{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--is);
  font-variant-numeric:tabular-nums;margin-bottom:.2rem}
.etk-im{display:inline-flex;align-items:center;padding:.05rem .5rem .1rem;
  border:1px solid var(--cizgi);border-radius:999px;background:var(--yuzey);
  font-size:.78rem;font-weight:700;color:var(--gol)}
.etk-ad{font-size:1.18rem;letter-spacing:-.025em;line-height:1.28}
.etk-ad a{color:var(--metin);text-decoration:none;display:inline-flex;
  align-items:center;min-height:44px}
.etk-ad a:hover{color:var(--gol)}
.etk-yer{display:flex;align-items:center;gap:.35rem;font-size:.92rem;color:var(--is);
  margin-top:.1rem}
.etk-yer .ikon{flex:none;color:var(--is)}
.etk-arsiv{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--cizgi)}
.etk-arsiv a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* Etkinlik künyesi — mahalle künye kartının kardeşi: etiket ÜSTTE, değer
   ALTTA, ikisi de sola dayalı. (Sağa dayalı sarmalayan metin en zor okunandır;
   bu ders 13.08 gözle bakışında ölçüldü.) */
.etk-kunye{margin:1.3rem 0 0;max-width:34.7rem}
.etk-kunye > div{padding:.7rem 0;border-top:1px solid var(--cizgi-ince)}
.etk-kunye dt{color:var(--is);font-size:.82rem;line-height:1.35;margin-bottom:.12rem}
.etk-kunye dd{margin:0;font-weight:600;line-height:1.5;overflow-wrap:break-word}
.etk-kunye dd a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  font-weight:700;text-decoration:none}
.etk-kunye dd a:hover{text-decoration:underline}
.etk-bitis{font-weight:400;color:var(--is);font-size:.92rem}
.yazi-h2-benzeri{font-family:var(--display);font-size:1.28rem;color:var(--kobalt);
  margin:0 0 .9rem;padding-top:.9rem;border-top:2px solid var(--cizgi);max-width:34.7rem}

@media (min-width:900px){
  .ara-bas{padding-top:3rem}
  .ara-h1{max-width:18ch}
  .etk-gun-no{font-size:2.5rem}
}

/* ══ /mahalleler — MUHTAR DEFTERİ ══════════════════════════════════════════
   Sunai · 14.08.2026

   ⚠️ KART IZGARASI REDDEDİLDİ. Bu sayfanın tek gerçek değeri 31 muhtarın
      telefon numarası (PLAN'ın kendi gerekçesi). Kart ızgarası seçilseydi
      31 fotoğrafsız gri dikdörtgen çıkar, numara kartın dibinde küçük metne
      düşerdi. Burada numara BİR DÜĞMEDİR: 44 px hedef, tabular rakam, tel:.
   ⚠️ SATIRI KAPLAYAN GÖRÜNMEZ BAĞLANTI YOK (`.mkart-ad a::after` kalıbı).
      Satırda iki ayrı hedef var (mahalle sayfası + arama); üstlerine üçüncü
      bir katman koymak ikisini de yutardı. */
.mliste{display:grid;gap:.55rem}          /* 8,8px — alt piksel yuvarlaması payı */
.mrow{display:flex;align-items:center;gap:.6rem .9rem;flex-wrap:wrap;
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:.35rem .95rem .6rem;transition:border-color .16s ease}
.mrow:hover{border-color:var(--kobalt)}
.mrow:focus-within{outline:3px solid var(--gol);outline-offset:2px}
.mrow-ic{flex:1 1 10rem;min-width:0}
.mrow-ad{font-family:var(--display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.2}
.mrow-ad a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--metin);text-decoration:none}
.mrow-ad a:hover{color:var(--kobalt);text-decoration:underline}
.mrow-muhtar{font-size:.9rem;color:var(--is);line-height:1.35;
  overflow-wrap:break-word;margin-top:-.35rem}
.mrow-not{font-size:.82rem;color:var(--is);line-height:1.4;margin-top:.2rem}
/* Numara: kobalt metin + kağıt zemin = 8,6:1. Hover'da zemin kobalt olur ve
   metin beyaza döner — iki durumda da eşiğin çok üstünde. */
.mrow-tel{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  min-height:44px;padding:0 .85rem;border:1.5px solid var(--cizgi);
  border-radius:var(--r-s);background:var(--kagit);color:var(--kobalt);
  text-decoration:none;font-weight:700;font-size:.95rem;
  font-variant-numeric:tabular-nums;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.mrow-tel:hover{background:var(--kobalt);border-color:var(--kobalt);color:#fff}

/* ══ /kesfet — METİN ÖNCELİKLİ DİZİN ═══════════════════════════════════════
   ⚠️ `parca/kart` KULLANILMADI: 18 kaydın hiçbirinin fotoğrafı yok ve uydurma
      görsel yasak. Kart kalıbı 18 tane "Fotoğraf bekleniyor" yer tutucusu
      üretirdi — kart.php'nin kendi uyarısının ("gri dikdörtgen kolonu")
      tam olarak gerçekleşmesi. Bir yer tutucu dürüsttür; on sekizi sayfa olur.
      Fotoğraflar geldiği gün ızgaraya geçmek tek `grid` satırıdır. */
.kliste{display:grid}
.krow{border-top:1px solid var(--cizgi-ince);padding:.75rem 0 .9rem}
.krow:first-child{border-top:0;padding-top:.1rem}
.krow-ad{font-family:var(--display);font-size:1.15rem;font-weight:700;
  letter-spacing:-.025em;line-height:1.28}
.krow-ad a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--metin);text-decoration:none}
.krow-ad a:hover{color:var(--gol);text-decoration:underline}
.krow-ozet{color:var(--is);font-size:.94rem;line-height:1.55;max-width:62ch;margin-top:-.3rem}
.krow-durum{margin-top:.5rem}
/* Kesikli rozet = MÜHÜRLENMEMİŞ. Damganın kardeşi ama mührü yok; dolu
   çerçeve "gittik, sorduk" demek ve bu 17 sayfa için doğru değil. */
.rozet-kesik{display:inline-flex;align-items:center;border:1px dashed #B4AFA3;
  border-radius:999px;padding:.18rem .65rem;background:var(--yuzey);
  font-size:.76rem;font-weight:700;letter-spacing:.03em;color:var(--is)}
.cip-sayi{margin-left:.45rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ══ kategori kökü — ÜST KATEGORİ KARTLARI ════════════════════════════════
   Kart görünümü `.hkart`'ın ta kendisi (ana sayfadaki "Nereye bakalım?"
   kartı). Yeni bir kart dili ÜRETİLMEDİ: aynı iş, aynı görünüm. Değişen
   yalnız ızgara — `.hizli` ilk ögeyi tam genişlik yapar, kategori kökünde
   hiçbir kategori diğerinden büyük değildir. */
/* 🔴 `1fr` DEĞİL `minmax(0,1fr)` — 15.08.2026, canlıdan ölçüldü.
   `/firmalar` 360px'te 16px YATAY KAYDIRIYORDU (375'te 1px). Sebep klasik:
   `1fr` = `minmax(auto,1fr)` ve `auto` taban, ögenin EN KISA SATIRINDAN
   (min-content) daha dar olamaz. "Akaryakıt & Şarj", "Anaokulu & Kreş" gibi
   uzun kategori adları sütunu 176,6px'e itiyor, iki sütun + boşluk 360'a
   sığmıyor ve sayfa yana kayıyordu.
   ⚠️ Kusur ALT GEZİNMEDEN DEĞİL — çubuk DOM'dan silinip yeniden ölçüldü,
      taşma aynen 16px kaldı. Yani bu kusur bugünkü işin regresyonu değil,
      ölçüm ilk kez o sayfaya uzandığı için görüldü.
   ⚠️ Aynı tuzak dosyadaki 13 ızgaranın hepsinde vardı (`.hizli`, `.kartlar`,
      `.alt-ag`, `.kliste`, `.mliste`, `.omurga`, `.yakin`) — hepsi
      `minmax(0,1fr)`e çevrildi: bugün yalnız `.kat-ag` taşıyordu ama taşma
      İÇERİĞE bağlı, yani uzun bir ad eklendiği gün ötekiler de taşardı. */
.kat-ag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}

/* ══ KÖKEN BEYANI — damgasız kaydın görünür karşılığı ══════════════════════
   ⚠️ ALARM DEĞİL, DURUM. `.uyari` (mercan/kırmızı) kullanılmadı: bugün
      künyelerin neredeyse tamamı damgasız ve her sayfada kırmızı yanan bir
      kutu, kırmızının anlamını tüketirdi. Kırmızı BAYAT'a ayrıldı — orada
      gerçekten bir şey bozulmuştur.
   ⚠️ Kesikli çerçeve bu projede zaten "mühürlenmemiş" demek
      (`.damga--kesik`). Yeni dil icat edilmedi, var olan doğru yere kondu.
   Kontrast (ölçüldü, formülle): #1C2430/#FAF9F6 = 14,9:1 · #55606F = 6,05:1
   · #19707E = 5,45:1 — üçü de 4,5:1 eşiğinin üstünde. */
.beyan{display:flex;align-items:flex-start;gap:.7rem;
  background:#FAF9F6;border:1px dashed #C6C1B5;border-radius:var(--r);
  padding:.85rem 1rem}
.beyan .ikon{flex:none;color:var(--is);margin-top:.15rem}
.beyan-ic{min-width:0}
.beyan-bas{color:var(--metin);font-weight:600;font-size:.95rem;line-height:1.5}
.beyan-alt{color:var(--is);font-size:.88rem;line-height:1.5;margin-top:.2rem}
.beyan-bag{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  color:var(--gol);font-weight:700;font-size:.93rem}
.beyan-bag:hover{color:var(--kobalt)}

@media (min-width:760px){
  .mliste{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* İki sütunda ÜST ÇİZGİYİ İKİ ÖGE birden kaybetmeli; tek `:first-child`
     kuralı sağ sütunun ilk ögesinde çizgi bırakırdı (gözle bakışta yakalanır
     ama önce burada engellendi). */
  .krow:nth-child(2){border-top:0;padding-top:.1rem}
  .kliste{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.2rem}
  .kat-ag{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .kat-ag{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ═════════════════════════════════════════════════════════════════════════
   SON DEPREMLER · /son-depremler — Sunai 15.08.2026
   İmza: İKİ SAYI RAYI. Solda büyüklük mührü, sağda Orhangazi'ye uzaklık,
   ortada yer adı. Göz iki sütunu ayrı ayrı tarayabilsin diye ikisi de
   SABİT GENİŞLİKTE ve `tabular-nums` — orantılı rakamla "1,3" ile "4,7"
   farklı genişlikte olur ve sütun taranamaz hâle gelir.
   ═════════════════════════════════════════════════════════════════════════ */

.deprem-serit{display:flex;flex-wrap:wrap;gap:.25rem 1rem;justify-content:space-between;
  padding-bottom:.6rem;margin-bottom:.2rem;border-bottom:1px solid var(--cizgi);
  color:var(--is);font-size:.86rem;line-height:1.45}
.deprem-serit strong{color:var(--metin);font-weight:700}
.deprem-serit-sag{margin-left:auto}

.deprem-liste{list-style:none;margin:0;padding:0}
/* Kartlar arası boşluk YOK, ayrım kıl payı çizgi: bu bir LİSTE, kart
   koleksiyonu değil. Boşluk her satırı ayrı bir "nesne" gibi gösterip
   dikey taramayı yavaşlatıyordu. */
.deprem-kayit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:.85rem;padding:.8rem 0;
  border-bottom:1px solid var(--cizgi-ince)}
.deprem-kayit:last-child{border-bottom:0}

/* ── SOL RAY · büyüklük mührü ──
   ⚠️ ŞİDDET SATIRI BOYAMAZ. `DepremService::siddet()` "hasar yapar/yapmaz"
   demiyor ve biz de demeyiz; sınıf yalnız mührün AĞIRLIĞINI değiştirir.
   Kırmızı yalnız en üst sınıfta: her satırı alarm rengine boyamak, alarmın
   kendisini değersizleştirir. */
.deprem-m{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:56px;padding:.3rem .35rem .25rem;border-radius:var(--r-s);
  border:1px solid var(--cizgi);background:var(--yuzey);line-height:1}
.deprem-m-sayi{font-family:var(--display);font-size:1.32rem;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--metin)}
.deprem-m-birim{margin-top:.15rem;font-size:.62rem;font-weight:700;
  letter-spacing:.14em;color:var(--is)}
.deprem-m--orta{border-color:#D8D3C7}
.deprem-m--kuvvetli{border-color:#E0A99D;background:#FDF3F1}
.deprem-m--kuvvetli .deprem-m-sayi{color:var(--mercan)}
.deprem-m--kuvvetli .deprem-m-birim{color:var(--mercan)}
.deprem-m--siddetli{border-color:var(--mercan);background:var(--mercan)}
.deprem-m--siddetli .deprem-m-sayi{color:#fff}
/* beyaz üstüne mercan zemin 5,05 — birim yazısı da beyaz kalır, soluk değil */
.deprem-m--siddetli .deprem-m-birim{color:#fff}

.deprem-orta{min-width:0}
.deprem-yer{display:block;font-weight:600;color:var(--metin);line-height:1.3;
  overflow-wrap:anywhere}
.deprem-alt{display:flex;flex-wrap:wrap;gap:.15rem .5rem;margin-top:.2rem;
  color:var(--is);font-size:.85rem;line-height:1.35}
.deprem-gecen::before,.deprem-derin::before{content:"·";margin-right:.5rem;color:var(--cizgi)}

/* ── SAĞ RAY · İMZA · Orhangazi'ye uzaklık ──
   Bu portalda uzaklık ikincil bir ayrıntı değil, sayfanın varoluş sebebi:
   kullanıcının sorusu "bize yakın mıydı". Kendi sütunu var. */
.deprem-uzak{text-align:right;line-height:1.15}
.deprem-uzak-sayi{display:block;font-family:var(--display);font-weight:700;
  font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--kobalt);
  white-space:nowrap}
.deprem-uzak-et{display:block;margin-top:.1rem;font-size:.72rem;color:var(--is)}

.deprem-damga{margin-top:.5rem;color:var(--is);font-size:.85rem}
.deprem-uyari-bas{display:block;font-weight:700;margin-bottom:.2rem}
.deprem-kaynak-bag{font-weight:600}

/* ⚠️ EŞİK 400 → 340 (15.08, EKRAN GÖRÜNTÜSÜ YAKALADI).
   İlk yazımda 400px'ti ve bu, sayfanın BÜTÜN TEZİNİ en yaygın telefonlarda
   öldürüyordu: 360 · 375 · 390'ın üçü de 400'ün altında, yani "iki sayı rayı"
   imzası fiilen yalnız masaüstünde vardı. Sayısal kapıların hiçbiri görmedi
   (taşma 0, kontrast temiz) — çünkü kusur bir ihlal değil, İMZANIN SESSİZCE
   KAYBOLMASIYDI.
   340'ta ölçüldü: 360px'te üç sütun sığıyor (mühür 56 + boşluk 14 + uzaklık
   ~74 = 144, yer adına 176px kalıyor ve 2 satıra sarıyor — kabul).
   320px'te sığmıyor, orada tek sütuna iniyor ve uzaklık RAY OLMAKTAN ÇIKMIYOR:
   hâlâ kendi satırında, hâlâ tek satırda. */
@media (max-width:340px){
  .deprem-kayit{grid-template-columns:auto minmax(0,1fr);row-gap:.35rem}
  .deprem-uzak{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:.35rem}
  .deprem-uzak-et{margin-top:0}
}

/* Kokpit şeridi — ana sayfada, EŞİKLİ. Normal günlerde bu blok hiç
   basılmadığı için 0 piksel; CSS'i de o yüzden kısa. */
.deprem-kokpit{display:flex;align-items:center;gap:.7rem;
  background:#FDF3F1;border:1px solid #EBC3BA;border-left:4px solid var(--mercan);
  border-radius:var(--r);padding:.7rem .9rem;color:#7A2A1B}
.deprem-kokpit .ikon{flex:none;color:var(--mercan)}
.deprem-kokpit b{font-weight:700}
.deprem-kokpit a{margin-left:auto;flex:none;font-weight:600;white-space:nowrap;color:#7A2A1B}
@media (max-width:480px){
  .deprem-kokpit{flex-wrap:wrap}
  .deprem-kokpit a{margin-left:0;width:100%}
}

/* ═════════════════════════════════════════════════════════════════════════
   VİTRİN BANDI · /firmalar · /yeme-icme — Sunai 15.08.2026
   Maket: `_staging/tasarim_20260815/varyant_d2_liste.html`

   🔴 BANT TONU #D0D8E3 — VE BU BİR TAVANDIR, ZEVK DEĞİL.
   Yönetmelik md.6/3 etiketin yanında GÖRSEL AYRIM istiyor; ayrımı taşıyan
   şey bandın SAYFA ZEMİNİNDEN farkı. Ölçümler:
       #E2E7EE / sayfa #EDF0F4 = 1,087   ← eski, geçiyordu ama SINIRDA
       #D0D8E3 / sayfa #EDF0F4 = 1,257   ← seçilen (fark 2,3 kat açıldı)
   ⚠️ DAHA KOYU YAPMAYIN. Bir tık koyusu (#CAD3E0) bandın üstündeki ikincil
      yazıyı (--is) 4,46'ya düşürür ve AA'yı KIRAR. #D0D8E3, her metin çifti
      ≥4,5 kalırken seçilebilecek EN KOYU tondur: damga 7,88 · ikincil 4,69.
      Yani tavanı estetik değil, bandın ÜSTÜNDEKİ METİN belirliyor.
   ⚠️ 1,243 diye bir sayı dolaşıyorsa o YANLIŞ KIYAS: bandı beyaz kartla
      karşılaştırıyordu (elma-armut). Yasal soru bant↔SAYFA farkıdır.
   ═════════════════════════════════════════════════════════════════════════ */
.vitrin-bant{background:#D0D8E3;border-block:1px solid var(--cizgi)}
.vitrin-ic{padding-block:var(--a3)}
.vitrin-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--a2)}
.vitrin-k{position:relative;display:grid;gap:.15rem;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r-s);padding:.7rem .85rem .8rem}
/* Damga ızgaranın 1. satırında ve tüm genişlikte: yasal koşul yerleşimden
   BAĞIMSIZ olsun diye (maket turunda görsel sütunu eklenince damga 75px
   sağa kayıp "ilk satır" olmaktan çıkmıştı — kapı yakaladı). */
.vitrin-damga{grid-row:1;justify-self:start;display:inline-block;
  padding:2px 7px;border-radius:var(--r-hap);background:#E2E7EE;color:#313B4A;
  font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.vitrin-ad{font-family:var(--display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.25;margin-top:.15rem}
.vitrin-ad a{color:var(--metin);text-decoration:none}
.vitrin-ad a:hover{color:var(--kobalt);text-decoration:underline}
/* Dokunma hedefi kartın TAMAMI — başlık bağlantısı yayılıyor. */
.vitrin-ad a[data-genis="kart"]::after{content:"";position:absolute;inset:0;
  border-radius:var(--r-s)}
.vitrin-yer{display:flex;align-items:center;gap:.35rem;color:var(--is);font-size:.88rem}
.vitrin-yer .ikon{flex:none;color:var(--is)}
.vitrin-beyan{margin-top:var(--a2);color:#2C3646;font-size:.84rem;line-height:1.5;max-width:64ch}
@media (min-width:640px){
  .vitrin-liste{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}

/* ═════════════════════════════════════════════════════════════════════════
   KOKPİT · ilçenin o anki hâli — Sunai 15.08.2026
   Sözleşme: `_planlar/faz2_zekai_kokpit_sozlesmesi.md`

   🔴 TASARIMIN TEK ZOR SORUSU: 5 hücrenin 4'ü boşken sayfa "BOZUK" mu
   görünecek, "KURULMAKTA" mı? Fark tamamen görsel dilde:
     bozuk      = kırmızı, uyarı ikonu, boş kutu, gri ölü alan
     kurulmakta = sakin ton, kesikli çerçeve, ve HER HÜCREDE BİR SEBEP
   Bu yüzden burada tek bir uyarı rengi yok. Kesikli çerçeve sitenin KENDİ
   sözlüğünden geliyor (`.beyan`, fiyatsız kalem): "mühürlenmemiş" demek.
   Hazırlanan hücre de mühürlenmemiş bir kayıttır — yeni bir dil icat
   etmiyorum, var olanı doğru yere uyguluyorum.
   ⚠️ Boş hücre DOLU hücreyle aynı boyutta DEĞİL: eşit boyut, eksikliği
      sayfanın konusu yapardı. Dolu olan büyür, bekleyenler küçük kalır.
   ═════════════════════════════════════════════════════════════════════════ */
.kokpit{background:#0C2956;color:#fff;padding-block:var(--a4) var(--a5)}
.kokpit-kas{color:#B6CCE2;margin-bottom:var(--a3)}
.kokpit-etiket{font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#B6CCE2}

/* ── DOLU HÜCRE — kokpitin kahramanı ── */
.kokpit-dolu{background:#123B70;border:1px solid #2E5A93;border-radius:var(--r);
  padding:var(--a3) var(--a4) var(--a4);margin-bottom:var(--a3)}
.kokpit-deger{font-family:var(--display);font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;line-height:1.2;margin-top:.25rem}
.kokpit-deger a{color:#fff;text-decoration:none;position:relative}
.kokpit-deger a:hover{text-decoration:underline}
/* 🔴 DOKUNMA HEDEFİ 30px İDİ — ölçüldü (199,1×30,0), kural 44.
   Kokpitin en çok dokunulan bağlantısı bu (nöbetçi eczane → çizelge) ve
   dünkü turda bütün kapılar yeşilken 30px'te kalmıştı.
   ⚠️ `padding` ya da `min-height` İLE BÜYÜTÜLMEDİ: bağlantı 1,5rem'lik bir
      başlığın içinde satır içi duruyor; kutusunu büyütmek yaprağın boyunu
      uzatır, ray en uzun yaprağa göre yükselir ve iki boş yaprakta ölü
      lacivert alan açılır (maket turunda ölçülmüş zincir).
      Görünmez bir uzantı hedefi 44px'e çıkarıyor, YERLEŞİME DOKUNMADAN. */
.kokpit-deger a::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:48px;transform:translateY(-50%)}
/* ⚠️ 44 DEĞİL 48: kapı gerçek vurulabilir alanı `elementFromPoint` ile
   ölçüyor ve tam 44'te 43,0 okuyor (piksel yuvarlaması + sonda kalan yarım
   piksel). Eşiğe TAM oturan bir değer, ölçüm gürültüsünün altında kalır ve
   yarın "neden 43?" diye geri dönülür. Kapıyı gevşetmek yerine hedefe
   gerçek pay verildi — 4px'in kimseye maliyeti yok. */
.kokpit-satir{margin-top:.3rem;color:#D8E4F2;font-size:.95rem;line-height:1.45}
/* Tazelik damgası: kaynağı + ne zaman alındığı. `.kokpit-satir`dan daha
   soluk çünkü VERİ DEĞİL, verinin künyesi. */
.kokpit-damga{margin-top:var(--a3);padding-top:.6rem;border-top:1px solid #2E5A93;
  color:#9FBBD8;font-size:.8rem;line-height:1.4}

/* ── BEKLEYEN HÜCRELER ──
   Izgara `auto-fit`: 1 tane kalırsa tek sütun, 4 tane olursa iki/üç sütun.
   Veri geldikçe hücreler bu ızgaradan ÇIKIP yukarıya taşınır — düzen
   kendiliğinden dolar, şablon değişmez. */
.kokpit-bekleyen{list-style:none;margin:0;padding:0;display:grid;gap:var(--a2);
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.kokpit-b{border:1px dashed #4B6182;border-radius:var(--r-s);
  padding:.75rem .85rem .8rem;background:rgba(255,255,255,.03)}
.kokpit-b-deger{margin-top:.2rem;color:#D8E4F2;font-size:.98rem;font-weight:600}
/* SEBEP — küçük punto olabilir, GİZLİ OLAMAZ (sözleşme §48).
   ⚠️ Kontrast ölçüldü: #9FBBD8 / #0C2956 = 7,42 — küçük punto ama AA'nın
      çok üstünde. "Küçük" ile "okunmaz" aynı şey değil. */
.kokpit-b-not{margin-top:.35rem;color:#9FBBD8;font-size:.82rem;line-height:1.5}

@media (min-width:640px){
  .kokpit-dolu{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:var(--a4);align-items:start}
  .kokpit-dolu .kokpit-etiket,.kokpit-dolu .kokpit-deger,
  .kokpit-dolu .kokpit-satir{grid-column:1}
  .kokpit-damga{grid-column:2;grid-row:1/span 4;margin-top:0;padding-top:0;
    border-top:0;border-left:1px solid #2E5A93;padding-left:var(--a4);
    max-width:14rem;text-align:right}
}

/* ═════════════════════════════════════════════════════════════════════════
   KOKPİT · ÜÇ YAPRAKLI KAYDIRMALI PANO (patron kararı 15.08.2026)
   Mekanik maketten taşındı; fizik CSS'te (`scroll-snap`), JS yalnız durum.

   🔴 BOŞ YAPRAK "BOZUK" DEĞİL "KURULMAKTA" GÖRÜNMELİ — bu bölümün tek
   zor sorusu bu ve cevabı üç yerde:
     · benek yaprağın durumunu ÖNCEDEN söyler (içi boş = hazırlanıyor)
     · boş yaprak kesikli çerçeve = "mühürlenmemiş" (sitenin kendi sözlüğü)
     · her boş yaprak SEBEBİNİ taşır
   Kırmızı/uyarı/özür YOK — o dil "maket"e ait, "henüz yok"a değil.
   ═════════════════════════════════════════════════════════════════════════ */
.kok-yapraklar{--serit-pay:8px;margin-top:var(--a3)}
.yaprak-ray{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;
  align-items:start;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* ⚠️ `touch-action:pan-y` DEĞİL — ölçüldü, yatay sürüklemeyi öldürüyor.
     Eksen ayrımının doğru aracı `overscroll-behavior-x`. */
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  /* ayrılan şerit: en uzun yaprağın dibi ile denetim satırı arasındaki nefes.
     8px keyfi değil — dokunma hedefleri arası asgari aralıkla aynı sayı. */
  padding-bottom:var(--serit-pay);
}
.yaprak-ray::-webkit-scrollbar{display:none}
.yaprak-ray:focus-visible{outline:3px solid #A6B7D3;outline-offset:3px;border-radius:var(--r-s)}
.yaprak{scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
.yaprak-et{display:flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#B6CCE2;margin-bottom:.55rem}
.yaprak-et .ikon{width:15px;height:15px;flex:none;color:#B6CCE2}

/* ── BOŞ YAPRAK · kurulum paneli ── kesikli = mühürlenmemiş */
.yaprak-kurulum{border:1px dashed #4B6182;border-radius:var(--r);
  padding:var(--a3) var(--a4) var(--a4);background:rgba(255,255,255,.03)}
.yaprak-kurulum .kokpit-b-not{max-width:52ch}

/* ── DİP: benekler + oklar — ikisi de GERÇEK dokunma hedefi (44×44).
   Görünen benek 9px kalır, hedef 44'e büyür: görsel aynı, kural geçer. */
.yaprak-dip{display:flex;align-items:center;gap:var(--a2);margin-top:.2rem}
.yaprak-nok{display:flex;align-items:center;gap:var(--a2);margin-right:auto}
.yap-n{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.yap-n i{display:block;width:9px;height:9px;border-radius:50%;background:#8AA2C4;
  transition:background-color 160ms var(--egri),transform 160ms var(--egri)}
/* Durum yalnız renkle taşınmıyor: etkin benek hem BEYAZ hem BÜYÜK, ayrıca
   `aria-current` taşıyor ve değişim canlı bölgeden duyuruluyor. */
.yap-n[aria-current="true"] i{background:#FFFFFF;transform:scale(1.45)}
.yap-n:active i{transform:scale(1.2)}
/* 🔴 HAZIRLANAN YAPRAĞIN BENEĞİ İÇİ BOŞ — kullanıcı kaydırmadan ÖNCE bilir.
   Renk tek başına anlam taşımıyor: `aria-label`'da da "— hazırlanıyor" var. */
.yap-n--bekleyen i{background:transparent;box-shadow:inset 0 0 0 1.5px #8AA2C4}
.yap-n--bekleyen[aria-current="true"] i{background:transparent;
  box-shadow:inset 0 0 0 2px #FFFFFF}
.yaprak-ok{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #4B6182;border-radius:var(--r-s);background:transparent;color:#fff;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color 140ms var(--egri),transform 120ms var(--egri),opacity 140ms var(--egri)}
.yaprak-ok .ikon{width:17px;height:17px;transform:rotate(180deg)}
.yaprak-ok--ileri .ikon{transform:none}
@media (hover:hover){.yaprak-ok:hover{background:rgba(255,255,255,.09)}}
.yaprak-ok:active{transform:scale(.94);background:rgba(255,255,255,.16)}
/* Kenarda ok SÖNÜKLEŞİR ama ODAKTA KALIR: `disabled` olsaydı klavye odağı
   zincirden düşer, kullanıcı son yapraktan geri dönemezdi. */
.yaprak-ok[aria-disabled="true"]{opacity:.34}
.yaprak-ok[aria-disabled="true"]:active{transform:none;background:transparent}

/* Yaprak içindeki dolu kart, tek bloktakinden daha sıkı: yaprakta yan yana
   birden çok hücre var, nefes payı ray boyunu şişirmemeli. */
.yaprak .kokpit-dolu{margin-bottom:var(--a2)}
.yaprak .kokpit-b{margin-bottom:var(--a2)}
.yaprak .kokpit-dolu:last-child,.yaprak .kokpit-b:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .yap-n i{transition:background-color 120ms linear!important}
  .yaprak-ok:active,.yap-n:active i{transform:none!important}
  .yap-n[aria-current="true"] i{transform:scale(1.45)!important}
}
/* `deger` ile eşleşen çizelge satırı: tekrar değil VURGU.
   Renk tek başına taşımıyor — sol şerit + kalın ağırlık + gizli "şu an" metni. */
.kokpit-satir--simdi{font-weight:700;color:#fff;
  border-left:2px solid #8AA2C4;padding-left:.5rem;margin-left:-.7rem}
/* Çok satırlı hücre (namaz: 6 vakit) tek sütunda ray boyunu şişiriyordu →
   4+ satır iki sütuna geçer. Ölçülen kazanç: 1. yaprak ~120px kısalıyor,
   dolayısıyla boş yapraklardaki ölü alan da o kadar azalıyor. */
.kokpit-satirlar[data-adet="4"],
.kokpit-satirlar[data-adet="5"],
.kokpit-satirlar[data-adet="6"],
.kokpit-satirlar[data-adet="7"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--a4)}
/* 🔴 BOŞ YAPRAK ARTIK YÜZMÜYOR. Ray en uzun yaprağa göre yükseldiği için
   kurulum paneli lacivert bir denizde küçük bir kutu olarak kalıyordu —
   "kurulmakta" değil "unutulmuş" görünüyordu. Panel kalan yüksekliği
   dolduruyor: alan aynı, ama artık BİR ŞEYİN alanı. */
/* ⚠️ `flex:1` TEK BAŞINA TUTMADI: `.yaprak` rayın ızgara öğesi ve ray
   `align-items:start` diyor — yani yaprak içeriği kadar yüksek kalıyor,
   satırın tamamını kaplamıyor. `align-self:stretch` YALNIZ bekleyen yaprağa
   veriliyor: dolu yaprakların üstten hizası (kasıtlı) bozulmuyor. */
.yaprak--bekleyen{display:flex;flex-direction:column;align-self:stretch}
.yaprak--bekleyen .yaprak-kurulum{flex:1;display:flex;flex-direction:column;
  justify-content:center}

/* ═════════════════════════════════════════════════════════════════════════
   KOKPİT ARTIK SAYFANIN AÇILIŞI — "HERO BİR TEZDİR"   Sunai · 15.08.2026
   Maket: `_staging/tasarim_20260815/varyant_d2_mobil.html` (`.gece` bloğu)
   Kilitli sistem: `_planlar/TASARIM_SISTEMI.md` §1 (gece paleti), §5 (hareket)

   ── NE DEĞİŞTİ VE NEDEN
   Kokpit dünkü turda taşınmıştı ama YANLIŞ YERDE duruyordu: eski hero
   ("Orhangazi'de ne arıyorsun?") sayfayı açıyor, kokpit onun ALTINDA bir
   blok olarak duruyordu. Yani sayfa hâlâ "arama kutusu" ile açılıyordu —
   her rehberin verdiği varsayılan cevap. Maketin tezi bunun tersi:
   ilçenin O ANKİ HÂLİ açılışta durur, arama kutusu onun altına iner.
   Arama bir ARAÇTIR; nöbetçi eczane ve namaz vakti CEVAPTIR. Sayfa cevapla
   açılır.

   ⚠️ SINIF ADI `.kokpit` KORUNDU, `.gece`YE ÇEVRİLMEDİ. 35 kural, kokpit.js
      ve iki kapı betiği bu adı okuyor; ad değişikliği tasarımı bir milim
      değiştirmeden onlarca kaza şansı açardı. Maketin `.gece`si = bizim
      `.kokpit`imiz. Ad korunur, ROL değişir.
   ═════════════════════════════════════════════════════════════════════════ */

/* Kokpit sayfanın İLK bloğu; lacivert doğrudan üst bardan başlıyor. */
.kokpit{position:relative;overflow:hidden}
/* Dipten yükselen çok hafif ışık. Tek dekoratif öğe ve bilinçli:
   yapraklar rayda yatay kayarken düz lacivert bir levha ölü durur.
   ⚠️ Ölçülen metin kontrastları DEĞİŞMEZ: degrade YALNIZ dipteki %70'lik
      şeritte ve saydamlığı .30 — metin kutuları kendi opak zeminlerini
      (#123B70) taşıyor, degradenin üstünde değil altında kalıyorlar. */
.kokpit::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(109,138,182,.30),transparent 72%);
  pointer-events:none}
.kokpit > .sar{position:relative}
/* Kokpit içindeki odak halkası: `--gol` lacivert üstünde okunmuyor. */
.kokpit a:focus-visible,.kokpit button:focus-visible{outline-color:#A6B7D3}

/* ── ÜST SATIR · tarih (+ JS ile saat) ──
   ⚠️ SAATİ SUNUCU BASMIYOR. Sayfa uçta 3600 sn'ye kadar önbellekli
      (ölçüldü: `Cache-Control: public, max-age=3600` · `cf-cache-status: HIT`
      · `Age: 101`). Sunucudan basılan bir saat, ziyaretçiye BİR SAAT ESKİ
      gösterilebilirdi — kokpitin bütün iddiası "şu an" iken. Tarih gün boyu
      doğrudur, saat DEĞİLDİR: tarih PHP'den, saat JS'ten. JS yoksa saat hiç
      yok — yanlış saatten iyidir. */
.kok-ust{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--a1) var(--a3);
  font-size:.845rem;font-weight:600;color:var(--gece-soluk)}
.kok-ust .saat{font-size:1.3rem;font-weight:200;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums}
/* ── TEZ · sayfanın tek h1'i ── */
.kok-tez{font-size:clamp(2rem,8.7vw,2.75rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;margin-top:var(--a2);text-wrap:balance;color:#fff}
.kok-cumle{margin-top:var(--a2);font-size:1.0625rem;line-height:1.5;
  color:var(--gece-soluk);max-width:36ch}
.kok-cumle b{font-weight:800;color:#fff}
.kok-yapraklar{--serit-pay:8px;margin-top:var(--a3)}

/* ═════════════════════════════════════════════════════════════════════════
   İMZA · GÜN ÇİZGİSİ — sayfanın hatırlanacağı TEK eleman

   Neden bu imza: bir ilçe rehberinin gerçekten benzersiz olduğu yer, günü
   nasıl böldüğüdür. Orhangazi'nin günü altı vakit + bir devirle bölünüyor
   ve ikisi de UYDURULMUŞ DEĞİL: vakitler Diyanet'ten (`namaz` hücresi,
   `vakitler` alanı), devir nöbet hücresinin kendi geçerlilik damgasından.
   Sahte ray çizmeyi geçen tur reddetmiştim; bu tur veri geldi, çizildi.

   🔴 SUNUCU NEYİ ÇİZER, TARAYICI NEYİ ÇİZER — bu ayrım pazarlıksız:
     sunucu  → günün İŞARETLERİ (gün boyu değişmez, önbelleğe uygun)
     tarayıcı → "şu an" beneği · dolu ray · hangi işaret geçti · sıradaki
   Sebebi yukarıdaki önbellek ölçümü: `gecti` sınıfını sunucu basaydı,
   17.05'te önbelleğe giren sayfa 18.05'te hâlâ "sıradaki İkindi" derdi.
   Namaz vaktini YANLIŞ gösteren bir çizgi, hiç göstermeyenden kötüdür.
   JS yoksa: çizgi günün çizelgesini gösterir, "şu an" işareti yoktur.
   Eksik olur, YANLIŞ olmaz.
   ═════════════════════════════════════════════════════════════════════════ */
.gun{position:relative;margin-top:var(--a4);padding-bottom:var(--a1)}
.gun-etiket{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--a3);margin-bottom:31px}
.gun-ad{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gece-soluk)}
/* Sağ uç: JS'in yazdığı TEK olgu. Boşken hiçbir yer kaplamıyor.
   ⚠️ Satırda her zaman TEK olgu durur — maket turunda iki olgu yan yana
      gelince üst üste binmişti ve bütün sayısal kapılar yeşildi. */
.gun-ozet{display:flex;flex-wrap:wrap;gap:2px var(--a3);justify-content:flex-end;
  text-align:right;min-width:0;font-size:.82rem;color:var(--gece-soluk);line-height:1.35}
.gun-ozet b{color:#fff;font-weight:700}
.gun-ray{position:relative;height:3px}
.gun-ray::before{content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--gece-ray)}
/* Dolu ray SIFIRDAN başlar ve yalnız JS `data-hazir="1"` yazınca açılır:
   JS yoksa dolu ray hiç görünmez (yanlış bir doluluk göstermez). */
.gun-dolu{position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:2px;
  background:var(--gece-gecti);transform-origin:left center;transform:scaleX(0)}
[data-hazir="1"] .gun-dolu{transform:scaleX(1);
  transition:transform 300ms var(--ease-out)}   /* T-12 tavanı 300ms — tam sınırda */
.gun-nok{position:absolute;top:0;left:var(--x);transform:translateX(-50%)}
.gun-nok i{display:block;width:2px;height:11px;margin-top:-4px;
  background:#C0C7D3;border-radius:1px}
.gun-nok.gecti i{background:var(--gece-gecti)}
/* Nöbet devri — çizginin tek AYRI işareti, çünkü günün tek geri
   döndürülemez olayı. Renk TEK BAŞINA taşımıyor: işaret daha kalın ve
   daha uzun, ayrıca `.gun-ray`in aria-label'ında adıyla geçiyor. */
.gun-nok.devir i{width:3px;height:15px;margin-top:-6px;background:var(--gece-devir)}
.gun-nok b{display:none}
/* 🔴 MOBİLDE RAY ÜSTÜNDE YÜZEN ETİKET YOK — VE BU BİR HATA DÜZELTMESİ.
   Maketten gelen kural şuydu:
       .gun-nok.sirada b{left:clamp(40px,var(--x),calc(100% - 40px))}
   Niyeti "etiketi rayın içinde tut" idi. AMA `100%` rayın değil,
   etiketin kabı olan `.gun-nok`un genişliğine çözülüyor — ve `.gun-nok`
   yalnızca 2px'lik bir çizgi. Yani `calc(100% - 40px)` = −38px oluyor,
   clamp'in tavanı tabanının ALTINA düşüyor ve clamp sessizce tabanı
   döndürüyor: sıkıştırma HİÇ ÇALIŞMIYOR.
   Ölçüldü (canlıdan, üç genişlikte): "Akşam 20.11" etiketi rayın sağ
   ucundan 12,9 / 15,8 / 18,7px DIŞARI taşıyordu. Belge taşması
   üretmediği için (kap `.sar` paylı) hiçbir yatay-kaydırma kapısı
   görmedi; kırpılmayı EKRAN GÖRÜNTÜSÜ yakaladı.
   ⚠️ Clamp'i "düzeltmek" (ör. rayı kap yapmak) yerine etiket KALDIRILDI:
      mobilde sıradaki vakit zaten `.gun-ozet` satırında, akış içinde ve
      sağa hizalı duruyor — orada taşması yapısal olarak imkânsız. Aynı
      olgunun iki yerde durması dosyanın kendi kuralını da çiğnerdi.
      ≥900px'te bütün etiketler açılıyor ve `.gun-ozet` gizleniyor:
      tek olgu, tek yer, iki bilgi yoğunluğu. */
.gun-simdi{position:absolute;top:50%;left:var(--x);width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px #113876;opacity:0;transform:scale(.7)}
[data-hazir="1"] .gun-simdi{opacity:1;transform:scale(1);
  transition:opacity 200ms var(--ease-out) 90ms,transform 200ms var(--ease-out) 90ms;
  animation:ogl-nabiz 2400ms var(--ease-out) 900ms infinite}
@keyframes ogl-nabiz{0%,100%{box-shadow:0 0 0 4px #113876}
  50%{box-shadow:0 0 0 7px rgba(17,56,118,.55)}}

@media (min-width:900px){
  .kok-ust .saat{font-size:1.6rem}
  .kok-cumle{font-size:1.125rem}
  .kok-yapraklar{margin-top:var(--a4)}
  /* Masaüstünde etiketlerin hepsi sığıyor — ölçü verdiği için hepsi açılır.
     Mobilde tek etiket, burada tam çizelge: aynı bileşen, iki bilgi yoğunluğu. */
  .gun{margin-top:26px;padding-bottom:62px}
  .gun-etiket{margin-bottom:58px}
  .gun-ozet{display:none}   /* etiketlerin hepsi görünürken özet tekrar olurdu */
  .gun-nok b,.gun-nok.sirada b{display:block;position:absolute;left:50%;bottom:auto;
    top:14px;transform:translateX(-50%);white-space:nowrap;text-align:center;
    font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--gece-soluk)}
  .gun-nok b em,.gun-nok.sirada b em{display:block;font-style:normal;font-weight:200;
    font-size:.82rem;color:#fff;margin-left:0}
  /* Şaşırtmalı yerleşim: komşu etiketler çakışmasın diye biri üstte biri altta. */
  .gun-nok.yukari b{top:auto;bottom:16px}
  .gun-nok.devir b{color:#C9D6BD}
}

/* ═════════════════════════════════════════════════════════════════════════
   KUŞAK — ana sayfanın bölüm ritmi (maket: `.kusak`)

   ⚠️ KUŞAK BİR KAP, BİR İÇERİK DEĞİL. Maketin altı kuşağının çoğu "maket
   çizelge" damgalı uydurma panolar taşıyor; canlıya YALNIZ gerçek verisi
   olan kuşaklar geliyor. Verisi olmayan kuşak 0 bayt basar (`ana.php`),
   çünkü boş bir kuşak "burada bir şey olacaktı" der — sahte dolulugun
   sessiz hâli.
   `content-visibility` yalnız KATLAMANIN ALTINDAKİ kuşaklara veriliyor:
   ilk ekrandakine verilirse LCP'yi geciktirir. */
.kusak{display:grid;gap:var(--a3);grid-template-columns:1fr;margin-bottom:var(--a3)}
.kusak-gec{content-visibility:auto;contain-intrinsic-size:auto 780px}
/* 🔴 VARSAYILAN TAM GENİŞLİK — VE BU SATIR BİR KAZAYI ÖNLÜYOR.
   Maket ≥900px'te kuşağı 12 kolona çeviriyor ve her panoya kendi `span`ını
   veriyor. Bizim bugünkü çocuklarımız (`.blok`) span TAŞIMIYOR; 12 kolonlu
   ızgaraya span'sız girselerdi her biri 1/12 genişliğe düşerdi — masaüstü
   düzeni tamamen çökerdi ve mobilde hiçbir kapı bunu görmezdi.
   Varsayılan `1/-1`; span taşıyan gelecekteki panolar bunu ezer. */
.kusak > *{grid-column:1 / -1}
/* Kuşak içinde ayrım BOŞLUKLA yapılıyor; `.blok + .blok` çizgisi boşlukla
   birleşince kopuk bir kenarlık gibi duruyordu. Biri ya da öteki. */
.kusak > .blok + .blok{border-top:0}
@media (min-width:900px){
  .kusak{gap:var(--a4);margin-bottom:var(--a4)}
}

/* ═════════════════════════════════════════════════════════════════════════
   ALT GEZİNME — DÖRT SEKME · TASARIM_SISTEMI §7 (kilitli)

   🔴 MAKETTEN TEK SAPMA, VE ZORUNLU: SEKMELER ÇAPA DEĞİL GERÇEK ADRES.
   Maket TEK SAYFA olduğu için sekmeleri `#p-rehber` gibi çapalar. Canlı
   portal ÇOK SAYFALI: `/firmalar/bakkal` sayfasında `#p-yeme` çapası
   hiçbir yere gitmez — çubuk her sayfada görünür ama üç sekmesi ÖLÜ olurdu.
   Sekmeler artık `/`, `/firmalar`, `/yeme-icme`, `/ara`.
   Bu sapma `@view-transition`ı da anlamlı kılıyor: maketin kendi notu
   "kural gerçek çok sayfalı portalda işler" diyor — burası orası.

   ⚠️ SEKME AÇILMAMIŞ SAYFAYA GİTMEZ: hedefler K-20 kapısından geçen
   `gezinti` listesinden doğrulanıyor (`duzen.php`). Kapalı sayfaya sekme
   vermek kendi kapımızdan kalmaktır.
   ═════════════════════════════════════════════════════════════════════════ */
.cubuk{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--cam-koyu);
  -webkit-backdrop-filter:var(--cam-blur);backdrop-filter:var(--cam-blur);
  border-top:1px solid var(--cizgi);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.cubuk-ic{display:flex;position:relative;max-width:var(--olcu);margin:0 auto}
/* TEK gösterge, dört sekme arasında KAYAR. Her sekmeye ayrı çubuk koyup
   sönüp yakmak "nereden nereye" bilgisini vermez; kayan tek şerit verir. */
.cubuk-gosterge{position:absolute;top:0;left:0;width:25%;height:3px;
  pointer-events:none;transform:translateX(calc(var(--i,0) * 100%));
  transition:transform 240ms var(--ease-cekmece)}
.cubuk-gosterge::before{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;
  margin-left:-14px;border-radius:0 0 3px 3px;background:var(--kobalt)}
/* 🔴 DOKUNMA HEDEFİ — kural veritabanı (ux · Touch/Touch Target Size):
   min 44×44px. Sekme yüksekliği 58px (çubuğun tamamı), genişliği ekranın
   dörtte biri (360px'te 90px) → en dar hâlde 90×58. */
.cubuk .sek{flex:1;display:flex;align-items:center;justify-content:center;
  min-height:var(--cubuk-h);padding:6px 2px 8px;text-decoration:none;
  color:var(--is);-webkit-tap-highlight-color:transparent}
.cubuk .sek-ic{display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:transform 140ms var(--ease-out)}
.cubuk .sek span{font-size:.66rem;font-weight:700;letter-spacing:.005em;line-height:1}
.cubuk .sek .ikon{width:1.5rem;height:1.5rem}   /* T-13 · alt gezinme 24px */
.cubuk .sek:active .sek-ic{transform:scale(.92)}
/* Etkin sekme: renk TEK BAŞINA taşımıyor — kalın ağırlık + üstteki kayan
   şerit + `aria-current="page"` birlikte söylüyor. */
.cubuk .sek[aria-current="page"]{color:var(--kobalt)}
.cubuk .sek[aria-current="page"] span{font-weight:800}
.cubuk .sek:focus-visible{outline-offset:-3px;border-radius:var(--r-s)}

/* ═════════════════════════════════════════════════════════════════════════
   BELGELER ARASI GEÇİŞ — saf CSS, JS yok

   Yerli sekme çubuğunun tek ayırt edici davranışı: sayfa değişirken çubuk
   yanıp sönmez, YERİNDE DURUR. Web'deki tam karşılığı bu üç satır.
   Desteklemeyen tarayıcıda sessizce normal yükleme — hiçbir şey kırılmaz.
   ⚠️ `view-transition-name` BELGE BAŞINA BENZERSİZ olmalı; çakışırsa geçiş
      SESSİZCE iptal olur. İkisi de tekil eleman (`.ust` ve `.cubuk` sayfada
      birer tane) — ölçüm kapısı bunu sayıyor.
   ═════════════════════════════════════════════════════════════════════════ */
@view-transition{navigation:auto}
.ust{view-transition-name:ust-serit}
.cubuk{view-transition-name:alt-cubuk}

/* Saydamlığı azaltılmış / kontrastı artırılmış sistemlerde cam kalkar:
   `backdrop-filter` okunurluğu düşürüyorsa malzeme değil OKUNURLUK kazanır. */
@media (prefers-reduced-transparency:reduce){
  .cubuk{background:var(--yuzey);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .cubuk{background:var(--yuzey);-webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:var(--metin)}
}

/* ── T-12'NİN DÖRT HAREKETİ BURADA KAPANIR ──
   Dosyanın başındaki genel kural süreleri .001ms'ye indiriyor; bu blok
   ondan AYRI çünkü iki hareket SÜRE ile değil DURUM ile kapanmalı:
   nabız bir `animation` (süresi kısalınca titremeye döner, kaybolmaz) ve
   dolu ray `transform:scaleX(0)`da KALIRDI — yani hareket kapatınca çizgi
   BOŞ görünürdü. Son hâlleri doğrudan yazılıyor. */
@media (prefers-reduced-motion:reduce){
  [data-hazir="1"] .gun-simdi{animation:none!important;
    opacity:1!important;transform:scale(1)!important;transition:none!important}
  .gun-dolu{transform:scaleX(1)!important;transition:none!important}
  .cubuk-gosterge{transition:none!important}
  .cubuk .sek:active .sek-ic{transform:none!important}
}

/* ═════════════════════════════════════════════════════════════════════════
   1. YAPRAK · KÜÇÜK HÜCRELER YAN YANA — İMZAYI KATLAMANIN ÜSTÜNE ÇIKARIR

   🔴 ÖLÇÜMLE GELDİ, GÖZLE GÖRÜLDÜ. Bütün sayısal kapılar yeşilken ekran
   görüntüsü şunu gösterdi: gün çizgisi (İMZA) ilk ekranda YOK.
       gün çizgisi üstü 876–878px · katlama 812–844px → 34–66px KAÇIRIYOR
   Sebep: 1. yaprak dört hücreyi alt alta diziyordu (179+206+73+118).
   İki "hazırlanıyor" hücresi küçük ve alt alta durmaları 81px'i boşa
   harcıyordu — maket de onları YAN YANA diziyor ("telefonda yan yana
   üçlü şerit"). Dolu hücreler tam genişlikte kalıyor: kokpitin kahramanı
   onlar, küçültülmüyor. Kazanç ~81px, yani imza katlamanın üstüne çıkıyor.
   ⚠️ Bu bir MEKANİK değişikliği DEĞİL: `scroll-snap` rayda ve yaprakta
      olduğu gibi duruyor, yalnız yaprağın İÇ dizilişi değişti.

   🔴 `:not(.yaprak--bekleyen)` PAZARLIKSIZ. `.yaprak--bekleyen` dosyanın
   yukarısında `display:flex` diyor ve BENİM kuralım ondan SONRA geliyor —
   düz `.yaprak{display:grid}` yazsaydım eşit özgüllükte sonra gelen kural
   kazanır, boş yaprakların `stretch` düzeltmesi SESSİZCE ölürdü ve boş
   yapraklar yine lacivert denizde yüzerdi. Projenin kendi dersi:
   "kardeş sınıfla paylaşılan elemanda kısayol yazma."
   ═════════════════════════════════════════════════════════════════════════ */
.yaprak:not(.yaprak--bekleyen){
  display:grid;grid-template-columns:1fr 1fr;gap:var(--a2);align-content:start}
/* Dolu hücre ve yaprak etiketi tam genişlik; yalnız bekleyen küçükler eşleşir. */
.yaprak:not(.yaprak--bekleyen) > .kokpit-dolu,
.yaprak:not(.yaprak--bekleyen) > .yaprak-et{grid-column:1 / -1}
/* Boşluğu artık `gap` veriyor — alt kenar payı kalsaydı çift boşluk olurdu. */
.yaprak:not(.yaprak--bekleyen) > .kokpit-dolu,
.yaprak:not(.yaprak--bekleyen) > .kokpit-b{margin-bottom:0}
/* Yan yana gelen iki bekleyen hücre eşit boyda dursun: biri 73 biri 118px
   iken üstten hizalı iki farklı kutu "biri eksik" gibi görünüyordu. */
.yaprak:not(.yaprak--bekleyen) > .kokpit-b{align-self:stretch}