/* ===================================================================
   HAREKET POLİTİKASI — TEK KARAR NOKTASI (Osman 2026-09-10)
   -------------------------------------------------------------------
   Aşağıdaki bütün az-hareket kuralları :root[data-az-hareket="1"] ile
   KAPILI. Bu özniteliği yalnız tower.js basar ve YALNIZ
   AZ_HAREKET_ONURLANDIR sabiti true iken. Sabit şu an FALSE.

   NEDEN: Müşterinin kullandığı bilgisayarların TAMAMI
   prefers-reduced-motion: reduce raporluyor (tanı sayfası ölçümü,
   2026-09-10). Windows'ta bu bayrak çoğu zaman erişilebilirlik tercihi
   değil, "en iyi performans için ayarla" ayarının yan ürünü. Eski hâlde
   sitedeki HER hareket kapanıyordu — video, film genişlemesi, logo
   şeridi, duyuru şeridi, reveal geçişleri, sayaç ve *{transition-
   duration:.01ms!important} yüzünden BÜTÜN CSS geçişleri. Osman:
   "animasyon olarak hiçbirisi çalışmıyor".

   ⚠ BU BİR UYGUNLUK İDDİASI DEĞİL. Site şu an prefers-reduced-motion'ı
   ONURLANDIRMIYOR; WCAG 2.3.3'ten bilerek sapılmıştır. Ticari gerekçe:
   aksi hâlde ziyaretçilerin neredeyse tamamı siteyi "bozuk" görüyor.

   GERİ ALMA GERÇEKTEN TEK SATIR: tower.js'te AZ_HAREKET_ONURLANDIR=true.
   JS kapıları da aynı sabitten geçtiği için başka hiçbir yere dokunmak
   gerekmez (ilk hâlinde gerekiyordu — Codex 2026-09-10 çürüttü, düzeltildi).

   ⚠ BİLİNEN SINIR: CSS kapısı JS'e bağımlı. Anahtar true yapılsa bile
   tower.js hiç yüklenmezse öznitelik basılmaz ve tercih onurlandırılmaz
   (Codex 2026-09-10). Bugünkü politika kapalı olduğu için etkisi yok;
   anahtar açılırsa bu sınır ayrıca çözülmeli. */

/* ===================================================================
   HEKİM TOWER — Eclat yapısı, Hekim paleti
   -------------------------------------------------------------------
   Tipografi İKİ ROL (Osman 2026-09-09): Inter Tight variable 100–900
   = yapı (başlık, gövde, arayüz, etiket) · Source Serif 4 italik =
   vurgu. Mono rolü KALDIRILDI — gerekçe @font-face yorumunda.
   Desen: BAŞLIK GÖVDESİ SANS, yalnız vurgu kelimesi italik serif.
   Fontlar self-host — fonts.googleapis.com / fonts.gstatic.com YOK.

   Palet iki kaynaktan ÖLÇÜLDÜ, uydurulmadı:
   · logo SVG'sinden  → bordo #9C1D20, gri #595A5A
   · cephe render'ından → soğuk taş #B3B3BB / #6B6E71, gökyüzü #E5ECF4
   Estecape'in sıcak kahve-krem paleti bu binaya oturmuyor: yapı soğuk
   gri-beyaz taş. Bu yüzden zemin soğuk nötr, tek sıcak aksan bordo.
   =================================================================== */

/* Inter Tight — VARIABLE (wght 100–900). Osman kararı 2026-09-09:
   yapı fontu Geist'ten Inter Tight'a geçti. Gerekçe ÖLÇÜLDÜ, seçilmedi:
   Osman'ın verdiği referans foreal.framer.website'ta UYGULANAN font
   sayıldı (@font-face değil — bir font yüklenmiş olabilir ama
   kullanılmıyor olabilir; --framer-font-family kuralları sayıldı):
     Inter Tight 38 · Inter 19 · Instrument Serif 10 · Host Grotesk 1
   → yapı fontu Inter Tight. Instrument Serif referansta italik vurgu
   rolünde; bizde o rol Source Serif 4 italikte kaldı (Osman "font"
   dedi, tek aile istedi — vurgu ailesi ayrı karar).
   Source Serif 4 (vurgu) DEĞİŞMEDİ.
   2026-09-08 Geist kararının gerekçesi: .yedek/2026-09-08-geist/tower.css

   Geist gibi Inter Tight de gerçek variable: wght 100–900 dosyada var
   (fvar ekseni okundu) → hiyerarşi ağırlıkla kuruluyor, sentetik
   kalınlaştırma yok. Tenor Sans'ın tek-ağırlık tuzağı tekrarlanmadı.

   TÜRKÇE DOĞRULAMASI — glif tablosu DOĞRUDAN okundu (fontTools 4.64);
   canvas genişliği / document.fonts.check() / piksel farkı KULLANILMADI,
   üçü de bilinen negatifte yanlış pozitif veriyor:
     latin ∪ latin-ext = 958 kod noktası, TR 12 karakterin HEPSİ VAR
     ı(110,0,280,1118)    vs i(74,0,318,1536)       → FARKLI ✓
     İ(100,0,344,1908)    vs I(132,0,312,1490)      → FARKLI ✓
     ğ(56,-442,1042,1523) vs g(56,-442,1042,1132)   → FARKLI ✓
     ş(60,-436,920,1132)  vs s(60,-24,920,1132)     → FARKLI ✓
     Ş(68,-436,1142,1510) vs S(68,-26,1142,1510)    → FARKLI ✓
     Ğ(74,-20,1346,1895)  vs G(74,-20,1346,1510)    → FARKLI ✓
   Ölçüm aracı İKİ YÖNDE kalibre edildi: (+) Geist'in 2026-09-08'de
   yazılmış bbox değerleri birebir yeniden üretildi · (−) aynı fontun
   latin-ext'siz hâli 5 eksik karakterle KALDI. Script:
   scratchpad/font-union.py — font değişirse TEKRAR KOŞ.

   Fontlar self-host — fonts.googleapis.com / fonts.gstatic.com YOK.

   GEIST MONO KALDIRILDI (Osman 2026-09-09: "iç sayfalardaki minik
   açıklama başlıklarında vs kullanılmasın", "badge içinde de
   kullanılmasın"). 2026-09-08'de mono zaten kart yüzeylerinden
   çıkarılmıştı; bu turda SAYILDI: kalan 11 kullanımın 11'i de tam
   olarak Osman'ın tarif ettiği yerlerdi — .rozet .cip .ekmek
   .gorsel__yazi .alinti-footer .planiz__ad .ic-bas__ad .tipkart__grup
   .zaman__donem .kunye-dt .dipnot__bas. Ana başlıklarda hiç
   kullanılmıyordu. Yani aile sitede sıfır yerde kalıyordu → token,
   @font-face ve iki woff2 dosyası da silindi; yüklenip
   kullanılmayan font bırakılmadı. Referans foreal.framer.website de
   hiç mono yüklemiyor.
   Kalan iki rol: Inter Tight = yapı ve etiket · Source Serif 4
   italik = vurgu. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
  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;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-tight-latin.woff2') format('woff2');
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;
  src:url('../fonts/source-serif-4-italic-600-latin-ext.woff2') format('woff2');
  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;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;
  src:url('../fonts/source-serif-4-italic-600-latin.woff2') format('woff2');
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* --- palet: ölçülmüş --- */
  --deep:#1C1D1F;            /* doğrama/ferforje koyusu */
  --deep-2:#131416;
  /* --tas (#EDEEF0) 2026-09-08'de SİLİNDİ: 0 kullanım. */
  --plan-zemin:#EBEBEB;      /* pafta kapağının zemini (Osman 2026-09-08) */
  --tas-2:#F6F7F8;
  /* Görsel yer tutucusu. 2026-09-08'e kadar #E5ECF4 (render gökyüzü
     mavisi) idi; yüklenmemiş her kutu MAVİ bir dikdörtgen olarak
     görünüyordu (Osman: "renkler komple f6f7f8 olsa daha iyi").
     Artık --tas-2 ile aynı nötr ton. Token ADI korundu: 3 kuralda
     kullanılıyor ve yeniden adlandırmak paralel oturumla çakışırdı. */
  --gok:#F6F7F8;
  --acik:#FFFFFF;
  --bordo:#9C1D20;           /* LOGO */
  --bordo-koyu:#7E1619;
  /* Koyu zemin için açık bordo. #D4736F ile hero vurgusu 4,37:1 ölçüldü —
     büyük metin eşiğini (3.0) geçiyor ama sınırda; bir kademe açıldı. */
  --bordo-acik:#E09490;      /* koyu zemin için — açık zeminde KULLANMA */
  --gri:#595A5A;             /* LOGO */

  /* --- VURGU ROLÜ ------------------------------------------------
     Bordo, sitenin 19 ayrı yerinde tek tek yazılıydı; bunlar bu beş
     token'a bağlandı. İKİ İSTİSNA var, bilerek: `.btn-dolu` doğrudan
     --bordo/--bordo-koyu kullanıyor (dolgu düğme rengi vurgu rolünden
     ayrı bir karar) ve `.script` gradyanı ham hex taşıyor (rampanın üç
     durağı ölçümle seçildi, token'a indirgenemez). Yani "tek satırda
     her yer döner" YANLIŞ — bu iki yer ayrıca elden geçer.
     (Codex 2026-09-08 fazla genel iddiayı çürüttü.) Renk kararı tek satırda dönüyor —
     2026-09-08'de bu iki kez oldu: önce nötre çekildi, sonra Osman
     geri istedi ("butonlar kırmızı kalmalıydı"). Token olmasaydı iki
     turda 38 düzenleme gerekirdi.

     🔴 AÇIK KUSUR — koyu zeminde ÖLÇÜLDÜ, kapatılmadı (Osman kararı):
     · --vurgu-acik (#E09490) hero perdesinin EN PARLAK pikselinde
       1,91:1 — WCAG'ın büyük metin için istediği 3,0'ın ALTINDA.
       (Beyaz aynı noktada 3,92:1 veriyordu.)
     · .btn-dolu bordo yüzeyi, hero'da ETRAFINDAKİ zemine karşı
       2,18:1 — WCAG 1.4.11 bileşen sınırı eşiği 3,0.
       (Kömür 1,01:1 ile çok daha kötüydü; beyaz 15,0:1.)
     Düğmenin İÇİNDEKİ beyaz yazı 8,05:1 ile sorunsuz; kusur yalnız
     düğmenin dış sınırının seçilebilirliğinde. */
  --vurgu:var(--bordo);                /* açık zeminde */
  --vurgu-acik:var(--bordo-acik);      /* koyu zeminde */
  --vurgu-tint:rgba(156,29,32,.07);    /* ikon kutusu zemini */
  --vurgu-cizgi:rgba(156,29,32,.28);   /* kart hover kenarı */
  /* Menü alt çizgisi. İLK İDDİAM YANLIŞTI: zemini #131416 varsaymıştım,
     oysa barın İKİ durumu var ve ilk durumu %12 BEYAZ cam.
     İKİNCİ HATA (Codex 2026-09-10 çürüttü): yapışık durumun zemini de
     yanlış örneklenmişti (o zaman lum 0,0070 → "4,32:1, geçiyor"
     yazılmıştı). Repodaki gerçek örnekler üzerinden yeniden ölçüldü:
        cam durum (hero üstü)          zemin lum 0,1261 → #E23B3B 1,40:1
        yapışık durum (beyaz içerik)   zemin lum 0,0642 → #E23B3B 2,16:1
     🔴 AÇIK KUSUR — İKİ durum da WCAG 1.4.11'in 3:1 eşiğinin ALTINDA,
     KAPATILMADI. Aşağıdaki eski "Çözüm renk DEĞİL DURUM" fikri bu
     ikinci ölçümle GEÇERSİZ: yapışık durumda da kırmızı geçmiyor, bar
     koyulaşması tek başına yetmiyor. Yapılması gereken: (a) her iki
     durumu da gerçek bileşik zemin üstünde ölç — düz #FFF/#F6F7F8/
     #131416 varsaymak yanıltıyor; (b) 3:1'i her iki zeminde de geçen
     bir renk seç YA DA (c) çizgiye renkten bağımsız ikinci bir sinyal
     ekle (kalınlık/desen) — WCAG 1.4.11 tek başına renge güvenmeyi
     istemiyor. Renk şimdilik DEĞİŞTİRİLMEDİ (Osman onayı bekliyor). */
  --menu-alti-koyu:#E23B3B;     /* 🔴 AÇIK KUSUR: cam 1,40:1 / yapışık 2,16:1 — ikisi de 3:1 altında, "her zeminde geçiyor" YANLIŞ (bkz. yukarıdaki not) */
  --ink-soft:#6B6E71;        /* render'dan ölçülen nötr gri */
  --cizgi:rgba(28,29,31,.11);

  /* İki rol, iki aile. Inter Tight variable olduğu için ağırlık GERÇEK —
     sentetik kalınlaştırma yok, hiyerarşi ağırlıkla kuruluyor. */
  --ff-body:'Inter Tight',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-script:"Source Serif 4",ui-serif,Georgia,"Times New Roman",serif;

  /* Ağırlık token'ları — sayı serpiştirmek yerine rol adı.
     Inter Tight'ta 100–900 arası her değer gerçek. */
  --fw-govde:400; --fw-orta:500; --fw-baslik:600;

  /* Harf aralığı Tenor Sans'a göre YENİDEN ayarlandı. Tenor Sans çok
     geniş bir yüz olduğu için -.042em/-.036em gerekiyordu; Inter Tight
     zaten sıkı bir grotesk, aynı değerler harfleri birbirine geçiriyor.
     Referans terris h1'i 56px'te ls:normal kullanıyor — burada bir
     kademe sıkılıyor (premium konut dilinde standart), ama yarısından
     az: -.028em/-.022em/-.014em. */
  /* -.028/-.022 ilk turda referansa bakarak seçilmişti; harfleri
     gerçekten geçirip geçirmediği PİKSEL DÜZEYİNDE ÖLÇÜLMEDİ. Türkçe'de
     İ ve Ğ'nin noktası/çengeli yatay pay istediği için bir kademe
     gevşetildi. Referans (terris) 56px'te ls:normal kullanıyor —
     yani biz hâlâ ondan sıkıyız. */
  --ls-h1:-.02em; --ls-h2:-.018em; --ls-h3:-.01em;
  --ls-etiket:.09em;   /* etiketler: VERSAL, açık aralık */

  /* TİPOGRAFİ ÖLÇEĞİ (Osman 2026-09-09: "bu bölümdeki font büyüklüğü
     çok okey, site genelinde böyle olsun").
     Beğenilen bölüm (bento) ÖLÇÜLDÜ ve ölçek ondan TÜRETİLDİ:
       etiket 12/500/lh1.65/+.09em · başlık 38,4/600/lh1.18/-.018em
       sayı 27,2/600/lh1.10 · alt başlık 27,2/500 · açıklama 13,8/400/lh1.60
     Sitenin geri kalanında 13 FARKLI punto ölçüldü ve bir kısmı birbirine
     0,3px uzaklıktaydı (16,8 · 16,3 · 16 · 15,2 … 14,7 · 14,4 · 14,1 · 13,9).
     Göz bunu "farklı boyut" olarak değil "hizasızlık" olarak okuyor —
     bento'nun temiz durmasının sebebi az sayıda AYRIK basamak.
     Ölçek 7 basamağa indi; her basamak bir öncekinden belirgin uzakta. */
  --fs-3xl:clamp(2rem,5.2vw,56px);   /* sayfa başlığı  */
  --fs-2xl:clamp(1.7rem,3.6vw,40px); /* bölüm başlığı  */
  --fs-xl:clamp(1.35rem,2vw,1.7rem); /* kart değeri / panel başlığı */
  --fs-lg:1.0625rem;                 /* kart başlığı (17px) */
  --fs-md:1rem;                      /* gövde (16px) */
  --fs-sm:.875rem;                   /* ikincil gövde, açıklama (14px) */
  --fs-xs:.75rem;                    /* etiket, çip, künye (12px) */

  /* Satır yüksekliği ROLE bağlı, boyuta değil: büyük başlıkta sıkı,
     küçük metinde gevşek. Ölçülen bento değerleri. */
  --lh-baslik:1.18;   /* ≥27px başlıklar */
  --lh-kart:1.35;     /* 17px kart başlıkları — 1.65 gövde değeriydi,
                         başlığı paragraf gibi gösteriyordu */
  --lh-govde:1.65;
  --lh-etiket:1.45;

  /* --h1/--h2 ölçekten TÜRETİLİYOR: aynı clamp'i iki yerde tutmak
     ikisinin sessizce ayrışmasıyla biterdi. */
  --h1:var(--fs-3xl);
  --h2:var(--fs-2xl);
  /* 26px h2'nin 40px'ine çok yakındı (oran 1,54) ve basamak
     okunmuyordu; 24px'te oran 1,67 → hiyerarşi netleşiyor. */
  --h3:clamp(1.15rem,1.6vw,24px);

  /* 8pt ızgara */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;

  /* Osman 2026-09-09: "sitenin genelinde çok fazla boşluk var".
     clamp(3rem,6.5vw,5.5rem) 1512px'te 88px üretiyordu; iki bölümün
     dolguları uç uca gelince bölüm arası 176px oluyordu (ölçüldü).
     Yeni tavan 4rem → aynı ortamda 64px, bölüm arası 128px. */
  --bosluk-bolum:clamp(2.5rem,4.6vw,4rem);
  --bosluk-ust:var(--s-6);
  --bosluk-baslik:var(--s-4);
  --bosluk-kart:var(--s-5);
  --bosluk-sikik:var(--s-3);
  --bosluk-mikro:var(--s-2);

  /* Üst bar "yüzen ada" ölçüleri.
     Referans: stratwell-consulting.framer.website, computed style ile
     ölçüldü 2026-09-08 — top 40px · yükseklik 80px (48px içerik + 2×16px
     iç boşluk) · radius 16px · zemin rgba(255,255,255,.12) · blur(16px).
     Referanstan AYRILAN TEK NOKTA: orada bar `absolute` (scroll'da yukarı
     kayıp gidiyor, y:40 → −1160 ölçüldü). Burada `fixed` — Osman kararı
     2026-09-08: satış sitesinde "Bilgi al" her an erişilebilir kalmalı. */
  /* Duyuru şeridi. AKIŞTA (sticky) duruyor, `fixed` DEĞİL: sayfanın
     üstünde gerçek yer kaplasın diye — body'ye padding hack'i gerekmiyor
     ve iç sayfada da aynı geometri kuruluyor. `top:0` ile kaydırmada
     yapışık kalır (duyuru satış sitesinde her an görünmeli).
     Yükseklik SABİT: içerik `nowrap` olduğu için satır sarmasıyla
     büyüyemez. Aşağıdaki --ustbar-ust bu değeri PEŞİNDEN alıyor —
     değiştirirsen üst bar da, çapa payı da kendiliğinden kayar. */
  --duyuru-h:40px;
  --duyuru-ara:clamp(14px,1.6vw,22px);   /* madde ↔ daire aralığı */

  /* Üst bar artık duyuru şeridinin ALTINDAN başlıyor: kendi boşluğu
     duyuru yüksekliğine EKLENİYOR. Tek kaynak burası; --ustbar-yer,
     --pay-ustbar ve --capa-payi bunun üzerine kuruluyor. */
  --ustbar-ust:calc(var(--duyuru-h) + clamp(1rem,2.4vw,2.5rem));
  --ustbar-ic:var(--s-4);            /* 16px — referans iç boşluğu */
  /* Bar genişliği ayrı token DEĞİL: Osman 2026-09-08 ızgarayı da 1440'a
     çekti, ikisi tek kanonik ölçüde (--wrap) buluşuyor. İkinci bir
     genişlik token'ı tutmak çift master üretirdi. */
  /* 80px = 48px içerik + 2×16px iç boşluk. SABİT bir sayı: bar yüksekliği
     yazı boyutu ya da satır sarması yüzünden büyürse bu değer PEŞİNDEN
     GELMEZ, çapa payı geride kalır (Codex 2026-09-08 çürüttü — önceki
     yorum "bar yüksekliği değişirse pay da değişir" diyordu, yanlıştı).
     Bar içeriği değişirse burası elle güncellenmeli. */
  --ustbar-yer:calc(var(--ustbar-ust) + 80px);

  /* --capa-payi VIEWPORT ölçüsüdür (scroll-margin-top): duyuru + bar +
     nefes. --pay-ustbar ise AKIŞTAKİ öğelerin üst dolgusu; o öğeler
     zaten duyuru şeridinin altından başladığı için --duyuru-h buradan
     DÜŞÜLÜYOR — yoksa iç sayfada üstte 40px fazla boşluk kalırdı. */
  --pay-ustbar:calc(var(--ustbar-yer) - var(--duyuru-h) + var(--s-5));
  --capa-payi:calc(var(--ustbar-yer) + var(--s-5));
  --dokunma:44px;
  /* Hamburger panelinin içeriği barın altından bu kadar sonra başlar.
     JS bu değeri OKUYOR (`tower.js > menuDurum`): panelin üst dolgusu
     barın gerçek yüksekliği + bu pay. İki yerde ayrı sayı yazılsaydı
     ayrışırdı. 16px'ti, 2026-09-10'da 32'ye çıktı (Osman: logo ile ilk
     menü satırı arasına nefes). */
  --menu-ust-pay:32px;

  /* Menü eşiği TEK KANONİK DEĞER. CSS medya sorgusu değişken kabul
     etmediği için sorgularda 75rem yazılı, ama JS bu token'ı okuyor
     (tower.js > ESIK_MENU) — ikisi bir daha ayrışamaz.
     Neden 1200px, 992 değil: masaüstü menüsü 5 bağlantı taşıyor ve
     992px'te logo+menü+CTA barın iç genişliğine ancak sığıyordu (ölçüm
     2026-09-08: gereken ~862px, mevcut 881px — 19px pay). Böyle bir pay
     Türkçe etiket uzadığında ya da bir bağlantı eklendiğinde sessizce
     tükenir ve menü barın üstüne biner. 1200px'te pay ~290px.
     Benzer bir projede (sogaspaces) aynı hata TÜM tabletlerde alt
     menüleri erişilemez yapmıştı; eşik bu yüzden tek yerde tutuluyor. */
  /* REM, px DEĞİL: medya sorgusu 75rem yazıyor ve JS bu token'ı
     matchMedia'ya veriyor. Token px olsaydı, kullanıcının tarayıcı
     varsayılan yazı boyutu 16px'ten farklı olduğunda (ör. 20px →
     75rem = 1500px) iki taraf ayrışırdı — "ayrışamaz" iddiam bu
     yüzden yanlıştı (Codex 2026-09-08 çürüttü). Aynı birim, tek çözüm. */
  --esik-menu:75rem;

  /* Tek kanonik genişlik: üst bar, içerik ve ızgara çizgileri AYNI ölçüye
     oturur (Osman 2026-09-08). 1440px = 4 × 360px kolon.
     Ölçüm kaynağı protocol3.framer.ai idi (orada 1224 = 4 × 306);
     genişlik bilerek büyütüldü, 4 kolonlu kurgu korundu. */
  --wrap:90rem;

  /* Izgara çizgisi zemine göre: açık bölümde koyu, koyu bölümde açık.
     Referansta da bölüm bölüm değişiyordu (#656771 / #F0F0F0 / #121212).
     Opaklıklar bir kademe DÜŞÜRÜLDÜ (Osman 2026-09-08: "çok sert").
     1px'ten inceltmek yerine opaklık kısıldı: 0.5px retina'da ince
     görünse de retina olmayan ekranda 0'a yuvarlanıp çizgiyi yok eder. */
  --izgara:rgba(28,29,31,.05);
  --pad-x:clamp(1.25rem,4vw,4.5rem);
  --olcu:62ch;

  /* Hero "kart" ölçüleri — stratwell referansından ÖLÇÜLDÜ 2026-09-08:
     sarmalayıcı padding 16px 16px 0 (ALT 0: kart sonraki bölüme yapışır),
     kart border-radius 24px (BİZDE UYGULANMADI: yarıçap 2026-09-09'da
     luxterra ölçümüyle --r-yuzey'e indi), overflow hidden,
     kart genişliği viewport−32. */
  /* Hero kartının dış BEYAZ çerçevesi. 16 → 12px (Osman 2026-09-08:
     "dışarıdan beyaz alan için padding var ya onu azalt"). Telefonda
     ayrıca 8px'e iniyor — aşağıdaki 38rem bloğuna bak.
     DİKKAT: bu değer içerik GENİŞLİĞİNİ değiştirmez; .hero > .hero__ic
     kuralı onu geri ekleyip içeriği sayfa ızgarasına hizalıyor. Yani
     çerçeve inceldikçe metnin KART İÇİ boşluğu artar, kenara yapışmaz. */
  --hero-bosluk:12px;
  /* Yarıçap İKİ DEĞER (Osman 2026-09-09, referans luxterra.framer.website).
     ÖLÇÜLDÜ, seçilmedi — canlı sayfada computed border-radius'u 0
     olmayan, 8px'ten büyük 129 öğe sayıldı:
       2px 83 (%64) · tam hap 25 · kalan 21 dağınık (1/3/4/8/10/11px)
     Dil: "neredeyse kare yüzey + hap buton". Bizdeki üç değer
     (10/16/24px) tek ölçeğe indi. Ölçek DEĞERİ Osman'ın kararı:
     luxterra 2px kullanıyor, biz 7px'te durduk (2026-09-09) —
     referanstan bilinçli sapma, tek token'dan yönetiliyor. --r-buyuk zaten ÖLÜ token'dı
     (tanımı vardı, 0 kullanım). Önceki 10px kararı (2026-09-08)
     bu ölçümle değişti — eski değer .yedek/2026-09-08-geist/'te. */
  --r-yuzey:7px;      /* kart, görsel, panel, hero, açılır kutu, çip */
  /* NOT: yorumdaki luxterra ölçümü 2px'tir; UYGULANAN değer 7px
     (Osman kararı). Tek çıplak istisna .bayrak 2px — gerekçesi orada. */
  --r-hap:999px;      /* buton, rozet, dairesel kontrol, nokta, çizgi ucu */

  --ease:cubic-bezier(.22,1,.36,1);
  --hiz:.45s;

  /* Kanonik hareket seti. Projedeki --ease/--hiz İKİSİ BİRDEN kalıyor:
     mevcut 40+ kural onlara bağlı, tek turda çevirmek kapsam dışı.
     Yeni yazılan geçişler aşağıdakileri kullanır. */
  --duration-fast:180ms;
  --duration-base:320ms;
  --duration-slow:480ms;
  --ease-enter:cubic-bezier(.05,.7,.1,1);
  --ease-exit:cubic-bezier(.3,0,.8,.15);
  --ease-move:cubic-bezier(.2,0,0,1);

  --golge-1:0 1px 2px rgba(28,29,31,.04);
  --golge-2:0 1px 2px rgba(28,29,31,.05), 0 16px 40px -24px rgba(28,29,31,.28);
}

*{box-sizing:border-box}
[id]{scroll-margin-top:var(--capa-payi)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--acik);color:var(--deep);
  font-family:var(--ff-body);font-weight:400;font-size:var(--fs-md);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ZORUNLU. HTML'deki width/height öznitelikleri CLS'i önlemek
   için duruyor, ama `height` özniteliği aynı zamanda belirtilmiş bir
   yükseklik gibi davranıyor: bir kurala `width:100%` yazınca oran değil
   öznitelik kazanıyor ve görsel gerçek yüksekliğinde (ör. 1400px)
   çiziliyor. Kat planı kartlarında tam olarak bu oldu (ölçüldü
   2026-09-08: 706×1400 çıktı, 706×706 olmalıydı). `height:auto` oranı
   geri veriyor, öznitelikler CLS koruması olarak kalıyor. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
figure{margin:0}

/* İçerik TAM --wrap genişliğinde; kenar boşluğu yalnız dar ekranda devreye
   girer. Eski kurgu (max-width:82rem + padding-inline) gerçekte 1168px
   içerik bırakıyordu (1312 − 144). Dar ekranda davranış aynı: her iki
   kurguda da içerik kenardan --pad-x kadar içeride başlar. */
.wrap{width:min(100% - 2 * var(--pad-x),var(--wrap));margin-inline:auto}

/* --- ızgara çizgileri ---------------------------------------------
   Mekanizma protocol3.framer.ai'den ÖLÇÜLDÜ (2026-09-08): çizgi
   hücrenin border'ı DEĞİL, hücrenin ::after'ında. Kanıt: hücrenin
   computed borderLeftWidth 0px, ::after'ınki 1px solid #656771.
   Neden böyle: ::after hücre kutusunun dışına taşmaz, düzeni
   etkilemez ve pointer-events:none ile tıklamayı içeriğe bırakır.

   Overlay .wrap ile AYNI geometriyi kullanır → çizgiler tam içerik
   kenarına ve kolon sınırlarına oturur. 4 hücre = 2 dış + 3 iç çizgi.
   Renk zemine göre değişir; referansta da bölüm bölüm farklıydı. */
/* Sağ dış çizgi KAPSAYICIYA ait, son hücreye değil: dar ekranda 3. ve 4.
   hücre gizlenince `:last-child` gizli elemana denk geliyordu ve sağ dış
   çizgi tamamen kayboluyordu (Codex 2026-09-08). Kapsayıcıda olunca
   hücre sayısından bağımsız. box-sizing:border-box ile genişliğe dahil. */
.izgara{
  border-right:1px solid var(--izgara);
  position:absolute;inset:0;
  width:min(100% - 2 * var(--pad-x),var(--wrap));
  margin-inline:auto;
  display:flex;overflow:hidden;pointer-events:none;
  z-index:0;
}
.izgara span{flex:1 0 0;position:relative}
/* Her sınırı YALNIZ BİR hücre çizer. Önceki hâlde her hücre
   `border-inline` (sol+sağ) çiziyordu; komşu hücrelerin çizgileri
   üst üste BİNMİYOR, yan yana geliyordu → iç sınırlar 2px, dış
   sınırlar 1px. Tutarsız ve kalın görünüyordu (Codex 2026-09-08;
   Osman'ın "çok sert" tespitinin asıl sebebi buydu).
   Şimdi: her hücre yalnız SOL çizgi, son hücre ek olarak sağ. */
.izgara span::after{
  content:"";position:absolute;inset:0;
  border-left:1px solid var(--izgara);
}

/* Zemine göre çizgi rengi. Koyu bölümde açık, açık bölümde koyu. */
/* Dar ekranda ızgara 2 kolona iner: künye ≤60rem'de iki kolona
   düşüyor ve dört çizgi hücrelerin ORTASINDAN geçiyordu — ayırıcı
   işlevi bozuluyordu (Codex 2026-09-08). Diğer bölümlerde de 4 çizgi
   dar ekranda gereksiz sıklaşıyor. */
@media(max-width:60rem){.izgara span:nth-child(n+3){display:none}}

.hero{--izgara:rgba(237,238,240,.07)}
.bolum--tas{--izgara:rgba(28,29,31,.045)}

/* --- tipografi: başlık SANS 300, vurgu italik serif --------------- */
.h1,.h2,.h3{font-family:var(--ff-body);font-weight:var(--fw-baslik);margin:0;color:var(--deep);text-wrap:balance}
/* Satır yüksekliği TAHMİNLE değil ÖLÇÜMLE belirlendi; font değişince
   YENİDEN ölçüldü (2026-09-09, canvas actualBoundingBox, 100px, yüklü
   fontla, Chrome):
   İLK ölçümüm SEÇİLMİŞ 6 karakterleydi (ĞİŞÇÖÜ / şğçyj) ve 1,169
   veriyordu; Codex bunun eksik olduğunu gösterdi — `Ç`nin sedillası
   `Ü`den daha derine iniyor. Küme TÜM Türkçe + latin + rakama
   genişletildi, bbox UPEM'e (2048) normalize edildi:
     Inter Tight 600 → en yüksek `İ` 1933,6 · en derin `Ç` −464,0
     → çakışmasız MİNİMUM line-height 1,17071
     (aynı tarama 400'de: `Ü` 1908 · `Ç` −448 → 1,15039)
   Geist'in eşiği 1,140 idi ve .h1 tam oraya ayarlıydı. Inter Tight'ın
   çıkıntısı daha uzun → 1.14 eşiğin ALTINA düştü. 1.17 de yetmiyor
   (1,17071'in 0,0007 altında) → **1.18**. Bugünkü metinde denk
   gelmiyordu ama bir
   Ğ/İ bir üst satırın ş/ğ kuyruğunun altına düştüğü anda değecekti.
   Sıkı görünüm satır yüksekliğinden değil `max-width` ile sağlanıyor. */
.h1{font-size:var(--h1);line-height:1.18;letter-spacing:var(--ls-h1);max-width:15ch}
.h2{font-size:var(--h2);line-height:1.18;letter-spacing:var(--ls-h2)}
.h3{font-size:var(--h3);line-height:1.32;letter-spacing:var(--ls-h3)}
/* 300 → 600 (Osman 2026-09-08: "vurgulu alanlar bold olabilir mi,
   eğik olan kısımların fontları kalsın"). Yüz DEĞİŞMEDİ; ağırlık için
   GERÇEK kesim indirildi — mevcut dosya yalnız `opsz` ekseninde
   değişkendi (fontTools: fvar = opsz 8–60, usWeightClass 300), yani
   600 yazmak tarayıcıya sentetik kalınlaştırma yaptırırdı.
   Türkçe doğrulaması yeni kesimde TEKRAR koşuldu: 494 kod noktası,
   ı/i · İ/I · ğ/g · Ğ/G · ş/s · Ş/S · ç/c · ö/o · ü/u dokuz çiftin
   dokuzu da AYRI çizim. */
.script{font-family:var(--ff-script);font-style:italic;font-weight:600;letter-spacing:-.03em;color:var(--vurgu)}
.on-koyu .script{color:var(--vurgu-acik)}   /* gradyan desteklenmezse bu renk kalır */
/* Osman 2026-09-08: "yeni bir yaşam gradyanlı kırmızı olabilir mi?
   Butondaki kırmızı ile pembemsiye doğru geçiş".
   ÖLÇÜM, isteğin ilk hâlini ÇÜRÜTTÜ: butonun kırmızısı #9C1D20, hero
   perdesi altındaki zemine karşı 1,13:1 veriyor — metin olarak GÖRÜNMEZ
   (eşik 3,0). Ara tonlar da düşük: #B93B3C 1,63 · #C85A57 2,20 ·
   #D4736F 2,82. Yani "koyu kırmızıdan pembeye" bir rampa, kelimenin ilk
   yarısını kaybettirirdi.
   Bu yüzden geçiş kırmızının AÇIK yarısında kuruluyor; rampanın her
   noktası bugünkü düz rengin (#E09490, 3,83:1) ÜSTÜNDE:
     #E09490 3,83  →  #ECB6B2 5,2  →  #F4D0CC 6,4   (hepsi ort. zemine karşı)
   Daha koyu uç isteniyorsa tek satır — ama ölçüm 3,0'ın altına iner. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .on-koyu .script{
    background-image:linear-gradient(100deg,#E09490 0%,#ECB6B2 52%,#F4D0CC 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    /* Eğik yüzün sağ omzu kırpılmasın diye: clip kutusu satır kutusudur,
       italik glif ondan taşabilir. */
    padding-inline-end:.06em;
  }
}

/* 1,78 paragrafı dağıtıyordu (referans terris 1,50 kullanıyor). Türkçe
   güvenli alt sınır font değişiminde YENİDEN ölçüldü (2026-09-09,
   Inter Tight 400, tüm Türkçe küme, UPEM 2048): 1,15039 (eski Geist
   değeri 1,131 idi). 1,65 hâlâ eşiğin belirgin üstünde. */
.metin{color:var(--ink-soft);line-height:1.65;margin:0;max-width:var(--olcu);text-wrap:pretty}
.on-koyu .metin{color:rgba(237,238,240,.92)}
.on-koyu,.on-koyu .h1,.on-koyu .h2,.on-koyu .h3{color:var(--tas-2)}
.h1 + .metin,.h2 + .metin,.h3 + .metin{margin-top:var(--bosluk-baslik)}
/* Gerekçe: docs/proje-sayfasi-kararlar.md §7 */
.metin + .metin{margin-top:var(--s-5)}

/* --- rozet -------------------------------------------------------- */
/* NOT: 2026-09-08'de bu rozete çok segmentli bir sürüm eklenmişti
   (flex-wrap + .rozet__ayrac). Osman aynı gün hero rozetini KALDIRDI;
   kalan tüm kullanımlar tek etiketli olduğu için sarma ve ayraç
   kuralları SİLİNDİ — karşılıksız CSS bırakılmadı. */

/* --- butonlar ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--bosluk-sikik);flex-wrap:nowrap;
  white-space:nowrap;   /* 360px'te "Bilgi al" iki satıra düşüp barı 80→92px yapıyordu */
  padding:var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border-radius:var(--r-hap);border:0;cursor:pointer;
  /* Inter Tight variable 100–900 → 500 için GERÇEK enterpolasyon var.
     Tenor Sans'ta yalnız 400 vardı (ölçüldü: wght@300 → HTTP 400), yani
     500 istendiğinde tarayıcının dayanacağı bir usta çizim yoktu.
     DİKKAT: "tarayıcı sentetik kalınlaştırma yapıyordu" iddiası
     ÖLÇÜLMEDİ — computed 500 istenen ağırlığı gösterir, sentezi değil
     (Codex 2026-09-08 çürüttü). Kesin olan tek şey: kaynakta o ağırlık
     yoktu, şimdi var. Buton gövde metninden ağırlıkla ayrılıyor. */
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-orta);letter-spacing:0;
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease),
             border-color var(--hiz) var(--ease),gap .35s var(--ease);
}
.btn .ok{width:32px;height:32px;border-radius:var(--r-hap);display:grid;place-items:center;flex:none;transition:background .35s}
.btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{gap:var(--bosluk-baslik)}
.btn-dolu{background:var(--bordo);color:#fff}   /* beyaz yazıyla 8,05:1 */
.btn-dolu .ok{background:rgba(255,255,255,.18)}
.btn-dolu:hover{background:var(--bordo-koyu)}
.btn-acik{background:rgba(255,255,255,.94);color:var(--deep)}
.btn-acik .ok{background:rgba(28,29,31,.1)}
.btn-acik:hover{background:#fff}

/* NOT: 2026-09-08'de kısa süre `.on-koyu .btn-dolu` beyaza çevrilmişti
   (kömür dolgu hero'da 1,01:1 ile görünmüyordu). Bordo geri gelince o
   kural karşılıksız kaldı ve SİLİNDİ — ölçüm gerekçesi yukarıdaki
   VURGU ROLÜ bloğunda duruyor. */

/* İKİNCİL eylem koyu yüzeyde KONTUR (Osman 2026-09-08: "bilgi al butonun
   içi güzeldi, o da beyaz değil"). Hero'da birincil eylem dolu bordo;
   ikincil de beyaz hap olsaydı ikisi eşit ağırlıkta okunurdu.
   `border` DEĞİL `inset box-shadow`: .btn'de `border:0` var ve kenarlık
   eklemek hap yüksekliğini 2px büyütüp iki düğmeyi hizasız bırakırdı. */
.on-koyu .btn-acik{
  background:transparent;color:var(--tas-2);
  box-shadow:inset 0 0 0 1px rgba(237,238,240,.42);
}
.on-koyu .btn-acik .ok{background:rgba(237,238,240,.16)}
.on-koyu .btn-acik:hover{background:rgba(237,238,240,.12);box-shadow:inset 0 0 0 1px rgba(237,238,240,.72)}

.lnk{display:inline-flex;align-items:center;gap:var(--bosluk-mikro);font-size:var(--fs-sm);font-weight:var(--fw-orta);letter-spacing:0;color:inherit}
.lnk span{border-bottom:1px solid currentColor;padding-bottom:var(--s-1);opacity:.75;transition:opacity .3s}
.lnk:hover span{opacity:1}
.lnk svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}

/* WCAG 2.2.2 — 5 sn'den uzun otomatik hareketin durdurulabilmesi ŞART.
   .lnk görünümünü paylaşır ama gerçek <button>: klavye ve ekran okuyucu
   için doğru semantik. data-durum'a göre metin/ikon çifti değişir. */
/* `font:inherit` KISA YOL DEĞİL, TUZAK: font-size dahil bütün font
   alt özelliklerini gövdeden miras alıyor ve .lnk'in .85rem'ini eziyordu.
   Ölçüldü 2026-09-08: hero'da "Daireleri incele" 14,4px iken hemen
   yanındaki "Arka planı durdur" 16px çıkıyordu. Yalnız gereken iki
   özellik miras alınıyor. */
/* NOT: .lnk--dugme (hero video oynat/durdur) kuralları 2026-09-08'de
   SİLİNDİ — Osman denetimi hero'dan kaldırdı, HTML'de 0 kullanım kaldı.
   Aynı gün .rozet__ayrac ve .marka__yer de bu sebeple silinmişti. */
.lnk:hover svg{transform:translate(3px,-3px)}

/* --- duyuru şeridi (marquee) ---------------------------------------
   Osman 2026-09-08: "en üstte topbar, duyuru marquee olarak dönsün,
   aralarında yıldız yerine yuvarlak daire".

   Üç karar ve gerekçeleri:
   1) `position:sticky` — `fixed` + `body{padding-top}` ikilisi yerine.
      Sticky akışta yer kaplar; hero'nun ve iç sayfaların üst geometrisi
      tek bir token'dan (--duyuru-h) türüyor, ikinci bir telafi yok.
   2) Animasyon SINIFLA açılıyor (`[data-akis="acik"]`), JS onu kuruyor.
      Neden: kusursuz döngü için şerit genişliğinin viewport'tan GENİŞ
      olması gerekir; tek bir grup 1800px'lik ekranda kısa kalır ve
      döngünün ortasında BOŞLUK açılır. JS grubu ölçüp gereken kadar
      klonluyor. JS yoksa animasyon hiç başlamaz — şerit sabit metin
      olarak durur (kırık döngü göstermektense duruyor).
   3) Hız px/sn cinsinden SABİT (tower.js > DUYURU_HIZ), süre değil:
      sabit süre verilseydi metin uzayınca okunamayacak kadar hızlanırdı.

   Erişilebilirlik: klonlar aria-hidden → ekran okuyucu duyuruyu BİR kez
   okur. prefers-reduced-motion'da akış hiç başlamaz.
   🔴 AÇIK KUSUR (Osman kararı 2026-09-08: "stop butonunu kaldır"):
   WCAG 2.2.2 (Pause, Stop, Hide) 5 sn'den uzun süren otomatik hareket
   için bir DURDURMA YOLU ister. Kalan tek yol fare üstüne gelmek —
   dokunmatik ve klavye kullanıcısını kapsamaz. Bilinen, kabul edilmiş
   sapma; kapatılırsa çözüm görünmez bir "duraklat" düğmesi değil,
   şeridin kendisine odaklanılabilir bir denetim eklemektir. */
.duyuru{
  position:sticky;top:0;z-index:31;   /* üst bar 30 — şerit onun da üstünde */
  height:var(--duyuru-h);
  display:flex;align-items:center;
  background:var(--deep-2);color:var(--tas-2);
  overflow:hidden;
}
/* Kenarlarda sert kesme yerine silinme; sağdaki pay durdurma düğmesine
   ait (metin düğmenin altından geçip kaybolur, çarpmaz). */
.duyuru__ray{
  flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.duyuru__akis{display:flex;width:max-content;will-change:transform}
/* --duyuru-adim ve --duyuru-sure'yi JS yazar; buradaki değerler yalnız
   JS'in ölçümü tamamlanmadan önceki tek kareyi kapsar. */
.duyuru[data-akis="acik"] .duyuru__akis{
  animation:duyuru-kay var(--duyuru-sure,30s) linear infinite;
}
/* Fare imleci şeridin üstündeyken durur — okumak isteyen kullanıcı için.
   `:focus-within` KALDIRILDI: şeridin içinde odaklanabilir hiçbir öğe yok
   (metin bağlantı değil, durdurma düğmesi de kaldırıldı), yani kural hiçbir
   zaman eşleşmiyordu — karşılıksız seçici (Codex 2026-09-08). */
.duyuru__ray:hover .duyuru__akis{animation-play-state:paused}
@keyframes duyuru-kay{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--duyuru-adim,-50%),0,0)}
}
.duyuru__grup{
  display:flex;align-items:center;gap:var(--duyuru-ara);
  list-style:none;margin:0;padding:0 0 0 var(--duyuru-ara);
}
.duyuru__grup li{
  display:flex;align-items:center;gap:var(--duyuru-ara);
  white-space:nowrap;
  /* VERSAL DEĞİL: 3 kelimeden uzun dizide okuma hızı düşüyor ve
     versal Türkçe İ/Ş/Ğ sıkışıyor. En uzun madde 8 kelime. */
  font-size:var(--fs-sm);font-weight:var(--fw-orta);
  letter-spacing:.01em;color:rgba(237,238,240,.94);
}
/* Osman'ın "*" ile gösterdiği ayraç. SON maddede de var: döngü ekinde
   üçüncü madde ile bir sonraki turun ilk maddesi arasındaki ayracı o
   sağlıyor — yoksa sarmalda iki cümle bitişik görünürdü. */
.duyuru__grup li::after{
  content:"";width:6px;height:6px;flex:none;
  border-radius:var(--r-hap);background:rgba(237,238,240,.5);
}
:root[data-az-hareket="1"] .duyuru[data-akis="acik"] .duyuru__akis{animation:none;transform:none}
@media(max-width:48rem){:root{--duyuru-h:36px}}

/* --- üst bar ------------------------------------------------------ */
.ustbar{
  /* transform kullanılıyor, `translate` özelliği DEĞİL: `translate`
     desteklenmeyen tarayıcıda left:50% olduğu gibi kalır ve bar sağa
     kaçardı (Codex 2026-09-08). transform evrensel destekli. */
  position:fixed;top:var(--ustbar-ust);left:50%;transform:translateX(-50%);z-index:30;
  width:min(100% - 2 * var(--pad-x),var(--wrap));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4);
  padding:var(--ustbar-ic);
  color:var(--tas-2);
  /* Bar, hero kartının ÜSTÜNDE yüzüyor ve iki köşe yan yana görünüyor;
     farklı yarıçap iki kenarı hizasız gösteriyordu (Osman 2026-09-08,
     ekran görüntüsü: "mobil navbar ile arkadaki hero-sec'in
     border-radius'u eşit değil"). Bu yüzden ikisi de --r-yuzey.
     Kural artık kendiliğinden korunuyor: tek yüzey token'ı var. */
  border-radius:var(--r-yuzey);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  /* `top` ARTIK ANİMASYONLANMIYOR (2026-09-09). Yapışma hareketi de,
     yön duyarlı gizlenme de tek `transform` üzerinden yürüyor: `top`
     her karede reflow tetikliyordu, `transform` compositor'da kalıyor. */
  /* `width`/`top`/`border-radius` listeye 2026-09-10'da eklendi: menü
     açılışında bar bu üçünü birden değiştiriyor ve geçişsiz kalınca
     panelin yumuşak açılışının yanında sıçrıyordu. */
  transition:width var(--duration-base) var(--ease-enter),
             top var(--duration-base) var(--ease-enter),
             border-radius var(--duration-base) var(--ease-enter),
             background var(--hiz) var(--ease),box-shadow var(--hiz) var(--ease),
             transform var(--hiz) var(--ease);
}
/* backdrop-filter desteklenmeyen tarayıcıda %12 beyaz cam okunmaz kalırdı;
   koyu bir taban zorunlu. @supports not → yalnız desteklemeyen tarayıcı. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ustbar{background:rgba(19,20,22,.82)}
}
/* Hero'yu geçince arkası açık zemine döner: %12 beyaz cam orada kaybolur,
   beyaz menü yazısı okunmaz hâle gelirdi. Koyu cama geçiyor. Padding
   sabit kaldı; zemin + gölge DEĞİŞİR, ayrıca aşağıdaki kural logoyu da
   bir tık küçültür (Codex 2026-09-08: "yalnız zemin ve gölge" eksikti). */
/* YAPIŞIKKEN BAR YUKARI ÇIKAR (Osman 2026-09-08: "navbar fazla aşağı
   iniyor, oradaki boşluğu biraz azaltabilir"). Ölçüldü: duyuru şeridi
   0–40px arasında bitiyordu, bar 80px'te başlıyordu → arada 40px boş
   bant. O boşluk sayfanın TEPESİNDE anlamlı (bar hero üstünde yüzen bir
   ada), ama kaydırıldıktan sonra duyuru ile bar arasında sebepsiz bir
   şerit bırakıyor. Yapışık durumda 8px'e iniyor: 40px → 8px.
   `top` geçişi yukarıda tanımlı, zıplamıyor. */
.ustbar[data-yapisik="1"]{
  /* Eskiden `top` değişiyordu; aynı mesafe artık transform'la alınıyor
     (hedef 48px = --duyuru-h + --s-2, başlangıç --ustbar-ust). */
  transform:translateX(-50%)
            translateY(calc(var(--duyuru-h) + var(--s-2) - var(--ustbar-ust)));
  background:rgba(19,20,22,.78);
  box-shadow:0 18px 40px -28px rgba(28,29,31,.55);
}

/* YÖNE DUYARLI GİZLENME (Osman 2026-09-09: "aşağıya doğru süzülürken
   sticky aktif olmasın, yukarı çıkınca aktif olsun").
   YALNIZ MASAÜSTÜ: telefonda bar zaten dar ve gizlenmesi "Bilgi al"
   düğmesini erişilemez kılıyor — 2026-09-08 kararı barın her an
   erişilebilir kalması yönündeydi, o karar mobilde korunuyor.
   `transform` translateX(-50%) ile BİRLİKTE yazılıyor: ayrı yazılsa
   ortalama bozulur ve bar sağa kaçar (aynı tuzak 2026-09-08'de
   `translate` özelliğinde yaşanmıştı).
   `visibility` geçişten SONRA kapanıyor — gizli bar klavye odağını
   yakalamasın (WCAG 2.4.3), ama geri gelirken beklemesin. */
/* ⚠ İLK YAZIMDA HATALIYDI (Codex 2026-09-09 ölçtü): az-hareket
   istisnası `transform:translateX(-50%)` vererek YAPIŞIK durumun
   translateY'sini de siliyordu — az-hareket tercihi olan kullanıcıda
   bar yön değişiminde 28,29px zıplıyordu (1512px'te 48px ↔ 76,29px).
   Tam da engellemek istediği şeyi üretiyordu.
   Doğrusu: gizlenmeyi `no-preference` koşuluna almak. Böylece az-hareket
   tercihinde kural HİÇ tanımlanmıyor, yapışık transform'u da ezmiyor. */
@media(min-width:60.0625rem){
  .ustbar[data-gizli="1"]{
    transform:translateX(-50%) translateY(calc(-100% - var(--duyuru-h)));
    visibility:hidden;
    transition:transform var(--hiz) var(--ease),visibility 0s linear var(--hiz),
               background var(--hiz) var(--ease),box-shadow var(--hiz) var(--ease);
  }
}
/* Logo inline SVG, fill="currentColor" → rengi buradan verilir.
   Üst bar koyu zemin üstünde durduğu için logo BEYAZ; ileride açık
   zeminli bir bar gerekirse tek satır renk değişikliği yeter. */
.marka{
  grid-column:1;justify-self:start;
  display:flex;align-items:center;gap:var(--s-4);
  color:#fff;                     /* logonun rengi */
}
.marka .logo{
  height:clamp(13px,1.5vw,17px);  /* oran 334,94:25,05 → ~13,4:1, çok yatay */
  width:auto;display:block;flex:none;
  transition:height var(--hiz) var(--ease);
}
.ustbar[data-yapisik="1"] .marka .logo{height:clamp(12px,1.3vw,15px)}
/* NOT: .marka__yer ("GİRESUN" ayırıcısı) kuralları 2026-09-08'de silindi —
   etiket HTML'den kaldırılmıştı, karşılıksız CSS kalmıştı (Codex buldu). */
/* Linkler arası 40px — stratwell referansında 4 aralıkta da aynı ölçü
   çıktı (ölçüldü 2026-09-08). Yazı boyutu POC'un Eclat ölçeğinde
   kalıyor: referansın Inter 16px'i alınmadı, tipografi kararı sabit. */
.menu{display:none;grid-column:2;justify-self:center;gap:2.5rem;font-size:var(--fs-sm);font-weight:var(--fw-orta)}
.menu a{position:relative;padding-bottom:var(--s-1)}
/* ALT ÇİZGİ TEK RENK (Osman 2026-09-10: "anasayfadaki underline efekti
   ile iç sayfalardaki farklı, çakışmalar olmuş").
   Eskiden iki kural vardı: cam barda açık gri, yapışık barda kırmızı.
   İç sayfalarda hero olmadığı için bar HER ZAMAN yapışık sayılıyor —
   yani anasayfa gri, iç sayfalar kırmızı başlıyordu. Tek renge (kırmızı)
   geçiş kararı BU tutarsızlık yüzünden doğru; aşağıdaki eski kontrast
   gerekçesi değil.
   🔴 YANLIŞ HESAP (Codex 2026-09-10 çürüttü): burada silinen tablo düz
   zeminler üstünde hesaplanmıştı (#131416 "hero koyu", #F6F7F8 "açık
   zemin" varsayılmıştı) — oysa bar SAYDAM + blur, gerçek komşu renk
   bileşik zemindir, düz zemin DEĞİL. Gerçek bileşik zeminle ölçülen
   değer (bkz. yukarıda --menu-alti-koyu tanımı): cam durum 1,40:1 ·
   yapışık durum 2,16:1 — İKİSİ DE WCAG 1.4.11'in 3:1 eşiğinin ALTINDA.
   "Kırmızı her zeminde geçiyor" iddiası YANLIŞ; 🔴 AÇIK KUSUR,
   KAPATILMADI. */
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--menu-alti-koyu);transition:width .4s var(--ease)}
.menu a:hover::after{width:100%}
/* AKTİF SAYFA (2026-09-10): hover'daki alt çizginin KALICI hâli — yeni
   bir işaret dili açılmadı, var olan çizgi sabitlendi. Çizgi renk DIŞI
   sinyal olduğu için renk körlüğünde de okunur.
   ⚠ Buraya önce `[data-yapisik="1"]` için `color:var(--deep)` yazmıştım:
   YANLIŞTI ve aktif başlığı görünmez yapıyordu. Ölçüm (2026-09-10,
   iframe 1440px, proje.html): iç sayfada hero olmadığı için
   `data-yapisik` HER ZAMAN "1", bar zemini ise rgba(255,255,255,.12) —
   yani koyu içerik üstünde duran saydam bir katman. Metin açık kalmalı. */
.menu a[aria-current="page"]::after{width:100%}
.menu a[aria-current="page"]{color:var(--acik)}
/* 75rem = --esik-menu (1200px). Değeri DEĞİŞTİRİRSEN token'ı da değiştir. */
@media(min-width:75rem){.menu{display:flex}}
.ustbar-sag{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--s-3)}

/* --- dil seçici (açılır) --------------------------------------------
   Osman 2026-09-08: "dropdown olsun, menü zaten dolu". Yan yana iki
   düğme barın iç genişliğinden ~86px yiyordu; tetikleyici 62px.
   Disclosure deseni: panel `hidden` ile KAPALI — display:none olduğu
   için klavye ve ekran okuyucu kapalıyken paneli hiç görmez, inert
   bakımı gerekmez (mobil menüde alınan karar birebir aynı). */
.dil{position:relative;flex:none}
/* NOT: `.dil--ray` (dil seçicinin ray içindeki hâli) 2026-09-08'de
   SİLİNDİ — Osman seçiciyi üst bara geri taşıdı. */
/* Tetikleyici DAR: yalnız globe + ok. Metinli hâli barın 1280px'teki
   62px'lik payını bitiriyordu (ölçüldü). Ad aria-label'da taşınıyor. */
/* Şekil dili: tetikleyici HAP DEĞİL yumuşak dikdörtgen (8px).
   Hap (999px) içinde 2px köşeli bir bayrak duruyordu ve iki şekil
   birbiriyle konuşmuyordu — kenar sert ve yamalı görünüyordu
   (Osman 2026-09-08: "kenarı çok kötü"). 8px kutu + 3px bayrak +
   10px panel: üçü aynı aileden.
   Kenarlık 2026-09-09'da tamamen kalktı (Osman). Ayrımı artık yalnız
   zemin yapıyor. */
.dil__ac{
  display:inline-flex;align-items:center;gap:4px;
  /* Kenarlık YOK (Osman 2026-09-09: "ona gerek yok"). Kutuyu zemin
     tanımlıyor; hover'da zemin koyulaşıyor. Kaldırılırken hover'daki
     border-color ve transition'daki border-color da SİLİNDİ —
     karşılıksız bildirim bırakılmadı.
     ⚠ `border` bildirimini SİLMEK yetmiyor: bu bir <button> ve tarayıcı
     kendi varsayılan kenarlığını çiziyor (Codex 2026-09-09 yakaladı —
     Osman'ın ekran görüntüsündeki kenar buydu). Açıkça `border:0`.
     Padding'e DOKUNULMADI (7px). */
  height:34px;padding:0 7px;border:0;
  /* HAP DEĞİL yüzey: bu tetikleyici kendi panelini (.dil__panel) ve
     içindeki .dil__sec'leri açıyor, ikisi de --r-yuzey. Hap bir düğmenin
     kare panel açması navbar'ı tutarsız gösteriyordu (Osman 2026-09-09).
     Hap artık yalnız CTA (.btn) ve tam dairesel ikon kontrollerinde. */
  border-radius:var(--r-yuzey);background:rgba(237,238,240,.08);
  color:var(--tas-2);cursor:pointer;
  transition:background var(--hiz) var(--ease);
}
.dil__ac:hover,.dil__ac[aria-expanded="true"]{background:rgba(237,238,240,.16)}
.dil__ac:focus-visible{outline:2px solid var(--bordo-acik);outline-offset:2px}
/* Bayrak: 22×15, hafif yuvarlatılmış. viewBox zaten kırptığı için
   dış clipPath gerekmiyor; içerideki counterchange clipPath'lerin id'si
   örnek başına benzersiz (t/p/m). */
/* Kenarlık/gölge YOK (Osman 2026-09-09: "shadow falan hiçbir şey
   olmasın"). Önceki saç teli iç gölge SİLİNDİ.
   YARIÇAP TOKEN'DAN GELMİYOR — tek belgelenmiş istisna: kutu 22×15px,
   --r-yuzey (7px) yüksekliğin yarısının %93'ü demek; bayrak yuvarlanıp
   KIRMIZI BİR HAP gibi görünüyordu (Osman 2026-09-09, ekran görüntüsü).
   Gerekçe geometrik, zevk değil: token küçük grafiklerde ölçeklenmiyor. */
.bayrak{
  width:22px;height:15px;display:block;border-radius:2px;flex:none;
}
.dil__ok{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.dil__ac[aria-expanded="true"] .dil__ok{transform:rotate(180deg)}
/* Tetikleyici artık rayın bir üyesi: görünümü .ray__dugme'den geliyor,
   burada yalnız bayrak ölçüsü ve açık durum işareti var. */
/* NOT: .dil__bayrak (inline SVG bayraklar) 2026-09-08'de SİLİNDİ —
   20px'te ay-yıldız ve Union Jack okunmuyordu. */

.dil__panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:2;
  /* ray sağ kenarda olduğu için varsayılan konum .dil--ray ile eziliyor */
  display:grid;gap:2px;min-width:150px;padding:6px;
  border-radius:var(--r-yuzey);background:rgba(19,20,22,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);

}
/* [hidden] tarayıcı varsayılanıyla aynı özgüllükte (0,1,0) çakışıyor ve
   bizimki sonra geldiği için display:grid kazanırdı → panel kapalıyken
   ekranda kalırdı. Mobil menüde aynı hata yaşanmıştı. */
.dil__panel[hidden]{display:none}
.dil__sec{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;min-height:var(--dokunma);
  border:0;border-radius:var(--r-yuzey);background:none;color:rgba(237,238,240,.8);
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-orta);text-align:left;cursor:pointer;
  transition:background var(--hiz) var(--ease),color var(--hiz) var(--ease);
}
.dil__sec[aria-current="true"]{background:rgba(237,238,240,.14);color:var(--tas-2);cursor:default}
.dil__sec:disabled{opacity:.45;cursor:not-allowed}
.dil__sec:not(:disabled):not([aria-current]):hover{background:rgba(237,238,240,.1);color:var(--tas-2)}

/* --- sticky eylem rayı ----------------------------------------------
   Sağ kenarda dikey, ekranla birlikte gelen dört eylem. Müşterinin
   mevcut sitesinde de benzeri var (Ara / WhatsApp / Randevu Al).
   44px: WCAG 2.5.8 AA eşiği 24px, burada AAA (2.5.5) ölçüsü tutuldu —
   bunlar tek elle, yürürken kullanılan düğmeler.
   Etiket normalde gizli değil DARALTILMIŞ (max-width:0): ekran okuyucu
   her zaman okur, göz yalnız hover/odakta görür. `display:none` olsaydı
   erişilebilirlik ağacından da çıkardı ve düğmelerin adı kalmazdı. */
.ray{
  position:fixed;right:clamp(10px,1.4vw,20px);top:50%;transform:translateY(-50%);
  z-index:28;                       /* üst bar 30, duyuru 31'in altında */
  display:flex;flex-direction:column;gap:var(--s-2);
  /* flex-end ZORUNLU: varsayılan `stretch` ile bir düğme hover'da
     genişleyince SÜTUNUN TAMAMI o genişliğe çıkıyordu — dört pill
     birden uzuyor, üçü boş görünüyordu (ölçüldü 2026-09-08, Osman'ın
     ekran görüntüsü). flex-end ile her düğme kendi içeriği kadar. */
  align-items:flex-end;
}
.ray__dugme{
  /* row-reverse: DOM sırası (ikon, etiket) ekran okuyucu için korunuyor
     ama görsel sıra ETİKET–İKON oluyor. Sağ kenardaki bir rayda ikon
     kenara sabit kalmalı, etiket SOLA doğru açılmalı; düz sırada etiket
     sağa doğru büyüyüp ekran dışına taşıyordu. */
  position:relative;display:flex;flex-direction:row-reverse;
  align-items:center;justify-content:flex-start;
  height:44px;min-width:44px;padding:0;border:1px solid var(--cizgi);
  border-radius:var(--r-hap);background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--golge-2);color:var(--deep);cursor:pointer;overflow:hidden;
  transition:background var(--hiz) var(--ease),border-color var(--hiz) var(--ease),
             box-shadow var(--hiz) var(--ease);
}
.ray__dugme svg{
  width:19px;height:19px;flex:none;margin:0 12px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* WhatsApp logosu dolu bir işaret; kontur ayarları onu bozuyordu. */
.ray__dugme .ray__ikon--dolu{fill:currentColor;stroke:none}
.ray__etiket{
  max-width:0;opacity:0;white-space:nowrap;overflow:hidden;
  font-size:var(--fs-sm);font-weight:var(--fw-orta);
  transition:max-width .42s var(--ease),opacity .3s var(--ease),padding .42s var(--ease);
}
.ray__dugme:hover,.ray__dugme:focus-visible{background:#fff;border-color:var(--vurgu-cizgi)}
.ray__dugme:hover .ray__etiket,
.ray__dugme:focus-visible .ray__etiket{max-width:190px;opacity:1;padding-left:14px}
.ray__dugme:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.ray__dugme--wa:hover{background:#25D366;border-color:#25D366;color:#fff}
.ray__dugme:disabled{opacity:.5;cursor:not-allowed}
/* "Yukarı" düğmesi `hidden` ile GİRİP ÇIKMIYOR (display:none anlık ve
   sert; Osman 2026-09-08: "gelişi çok sert"). Bunun yerine görünürlük +
   opaklık + hafif kayma ile geliyor. `visibility:hidden` şart: yalnız
   opaklık 0 olsaydı düğme görünmezken de TIKLANABİLİR ve SEKME ile
   ODAKLANABİLİR kalırdı. */
.ray__dugme--ust{
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.9);
  transition:opacity .38s var(--ease),transform .38s var(--ease),
             visibility 0s linear .38s,
             background var(--hiz) var(--ease),border-color var(--hiz) var(--ease);
}
.ray__dugme--ust[data-gorunur="1"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease),
             visibility 0s,
             background var(--hiz) var(--ease),border-color var(--hiz) var(--ease);
}
/* Telefonda ray daralıyor: etiket açılırsa ekranın yarısını kaplar. */
@media(max-width:48rem){
  .ray{right:10px;gap:6px}
  .ray__dugme{height:42px;min-width:42px}
  .ray__dugme svg{margin:0 11px}
  .ray__dugme:hover .ray__etiket,.ray__dugme:focus-visible .ray__etiket{max-width:0;opacity:0;padding-left:0}
}

/* --- menü düğmesi + mobil panel ------------------------------------
   1200px altında (yani tüm telefonlar ve tabletler) tek gezinme yolu.
   Önceki hâlde bu bandın tamamında hiçbir menü bağlantısı yoktu. */
.menu-dugme{
  /* 44px WCAG 2.5.8 (AA) hedef boyutu — dokunmatikte zorunlu. */
  width:var(--dokunma);height:var(--dokunma);flex:none;
  display:grid;place-content:center;gap:5px;
  background:rgba(237,238,240,.1);border:1px solid rgba(237,238,240,.18);
  border-radius:var(--r-hap);cursor:pointer;color:var(--tas-2);
  transition:background var(--hiz) var(--ease);
}
/* Bu kural .menu-dugme tanımının ARDINDAN gelmek ZORUNDA: ikisi de
   0,1,0 özgüllükte, eşitlikte kaynak sırası kazanıyor. Medya sorgusu
   yukarıda .menu ile birlikte dursaydı display:grid onu ezerdi —
   masaüstünde hem yatay menü hem hamburger görünüyordu (2026-09-08). */
@media(min-width:75rem){.menu-dugme{display:none}}
.menu-dugme:hover{background:rgba(237,238,240,.18)}
.menu-dugme__cizgi{
  display:block;width:16px;height:1.5px;background:currentColor;border-radius:var(--r-hap);
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
/* Açıkken çarpı: iki çizgi merkeze gelip çaprazlanıyor.
   translateY değerleri gap(5) + çizgi(1.5) = 6,5 / 2 = 3,25px. */
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgi:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgi:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.mobil-menu{
  position:fixed;z-index:29;
  /* Barın hemen altına: --ustbar-yer barın üst boşluğu + 80px yüksekliği.
     Bar SABİT 80px olduğu varsayımıyla; bar yüksekliği değişirse
     --ustbar-yer elle güncellenmeli (token'ın kendi yorumuna bak). */
  /* TAM GENİŞLİK (Osman 2026-09-10: "hamburger menüyü full-width").
     Eskiden barla aynı ada idi (`left:50%` + `translateX(-50%)` +
     `min(100% - 2*--pad-x, --wrap)`); artık barın altından ekranın
     altına inen tam genişlikte perde. `transform` YATAY ORTALAMADAN
     BOŞALDI — açılış animasyonu onu kullanıyor, ikisi aynı özellikte
     çakışsaydı menü her açılışta yana zıplardı. */
  /* `--s-2` payı KALDIRILDI (Codex 2026-09-10 işaret etti, ölçtüm:
     390px'te 2px, 375px'te 10px'lik bir şerit kalıyor ve arkadaki
     sayfa oradan sızıyordu). O pay panel yüzen bir adayken barla
     arasını açmak içindi; tam genişlikte perde barın altına YAPIŞMALI. */
  /* TAM EKRAN ÖRTÜ (Osman 2026-09-10: "üstte falan boşluk kalmasın,
     ekranda sadece menü olsun, arkada siteyle alakalı bir şey olmasın").
     Panel eskiden barın ALTINDAN başlıyordu; üstte duyuru şeridi ve bar
     ile arasındaki boşluk görünüyordu. Artık `top:0` ile bütün görünen
     alanı kaplıyor, içerik ise barın altından başlasın diye üst DOLGU
     alıyor (`padding-top` JS'ten, barın GERÇEK yüksekliğiyle).
     `z-index:40`: duyuru şeridi 31'in ÜSTÜNDE — şerit gizlenmiyor,
     örtülüyor. Gizleseydim şerit yüksekliği kadar düzen kayar, panel
     kapanınca sayfa zıplardı. */
  top:0;
  left:0;right:0;bottom:0;width:100%;
  z-index:40;
  /* Yatay dolgu `--pad-x`: menü bağlantıları sayfa içeriğiyle aynı
     hizada başlasın. Altta güvenli alan payı (çentikli telefon). */
  padding:var(--s-5) var(--pad-x) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-radius:0;
  /* BEYAZ PANEL (Osman 2026-09-10: "hamburger menü beyaz olsun, buna
     göre tasarımı değiştir"). Koyu panelde okunan her renk beyazda
     kayboluyordu; aşağıdaki bütün alt kurallar bu yüzden birlikte
     çevrildi — logo, kapat düğmesi, bağlantılar, ayırıcılar, dil
     hapları ve telefon düğmesi. Tek tek çevirmek yarısı görünmez bir
     menü bırakırdı. */
  background:var(--acik);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -30px rgba(28,29,31,.28);
  /* GRID DEĞİL FLEX (2026-09-10): marka künyesi artık zemin görseli
     değil, akışın son öğesi. Dibe `margin-top:auto` ile iniyor ve bu
     yalnız flex'te çalışıyor — grid'de satır yüksekliği içerik kadar
     olduğu için auto pay hiçbir şey itmiyordu. Taşma olduğunda auto
     pay kendiliğinden 0'a düşer, künye içeriğin peşine takılır. */
  display:flex;flex-direction:column;gap:var(--s-5);justify-content:flex-start;
  /* `max-height` hesabı KALDIRILDI: yükseklik artık `bottom:0` ile
     ekranın kalanı, iki kaynak aynı sınırı vermesin (üstüne yığma).
     2026-09-09 ÖLÇÜMÜNÜN SEBEBİ DURUYOR — 375×667'de içerik 123px
     taşıyor ("0454 215 55 55" 34px, "E-posta gönder" 99px kesiliyordu)
     ve o gün overflow yoktu, kesilen düğmelere ulaşılamıyordu.
     `overflow-y:auto` bu yüzden ŞART, dekoratif değil. */
  overflow-y:auto;
  overscroll-behavior:contain;   /* menü sonuna gelince sayfa kaymasın */
  /* AÇILIŞ/KAPANIŞ (Osman 2026-09-10: "daha yumuşak, şık ve prof").
     Panel `hidden` ile display:none olduğundan geçiş normalde HİÇ
     çalışmaz — `allow-discrete` + `@starting-style` display'i de
     animasyona sokuyor (aynı desen `.planiz`de kurulu).
     Giren ile çıkan AYNI satırı paylaşmıyor: giriş uzun ve
     yavaşlayarak durur, çıkış kısa ve kararlı. */
  opacity:0;transform:translateY(-10px);
  transition:opacity var(--duration-fast) var(--ease-exit),
             transform var(--duration-fast) var(--ease-exit),
             display var(--duration-fast) allow-discrete;
}
.mobil-menu:not([hidden]){
  opacity:1;transform:none;
  transition:opacity var(--duration-base) var(--ease-enter),
             transform var(--duration-base) var(--ease-enter),
             display var(--duration-base) allow-discrete;
}
@starting-style{ .mobil-menu:not([hidden]){opacity:0;transform:translateY(-10px)} }
/* Hareket kalkar. NOT: burada 120ms'lik bir fade YAZILAMAZ — satır ~3111'deki
   global `prefers-reduced-motion` kuralı `transition-duration:.01ms!important`
   veriyor ve bu bloğu eziyor (Codex 2026-09-10 gösterdi; ilk yazdığım
   "geçiş sıfırlanmaz" yorumu yanlıştı). Geriye kalan tek iş kaymayı
   kapatmak; panel anında belirir, işlev aynı. */
:root[data-az-hareket="1"] .mobil-menu,
:root[data-az-hareket="1"] .mobil-menu:not([hidden]){transform:none}
  @starting-style{ :root[data-az-hareket="1"] .mobil-menu:not([hidden]){transform:none} }
/* [hidden] tarayıcı varsayılanı display:none verir ama özgüllüğü
   .mobil-menu ile AYNI (0,1,0) ve bizim kuralımız sonra geldiği için
   display:grid kazanıyordu → panel `hidden` iken bile ekrandaydı.
   Kendi kuralımızla açıkça kapatılıyor. */
.mobil-menu[hidden]{display:none}
.mobil-menu nav{display:grid}
/* ⚠ SEÇİCİ `nav` İLE DARALTILDI (Osman 2026-09-09: "butonlar gözükmüyor
   hamburger"). Eskiden `.mobil-menu a` idi (0,1,1) ve menüdeki EYLEM
   DÜĞMELERİNİ de yakalıyordu: `.btn-acik{color:var(--deep)}` (0,1,0)
   eziliyor, açık zeminli "0454 215 55 55" ve "E-posta gönder"
   düğmelerinde metin beyaz kalıyordu — beyaz üstünde beyaz, okunmuyor.
   Çözüm `!important` DEĞİL: kural zaten yalnız gezinme bağlantıları
   için yazılmıştı, `nav` onu kendi kapsamına geri koyuyor. Düğmeler
   `.mobil-menu__eylem` içinde, `nav`ın DIŞINDA. */
.mobil-menu nav a{
  color:var(--deep);font-size:var(--fs-lg);font-weight:var(--fw-orta);
  /* Satır yüksekliği değil PADDING ile 44px: yazı boyutu değişse de
     dokunma hedefi küçülmez. */
  padding:var(--s-3) 0;min-height:var(--dokunma);display:flex;align-items:center;
  border-bottom:1px solid var(--cizgi);
}
.mobil-menu nav a:last-child{border-bottom:0}
/* AKTİF SAYFA — mobil. Üst bardaki alt çizgi burada kullanılamaz:
   her satırın zaten bir `border-bottom` ayırıcısı var, ikinci bir
   çizgi ayırıcıyla karışırdı. İki sinyal: metin tam beyaza çıkıyor
   ve solda vurgu çubuğu beliriyor. Çubuk `box-shadow:inset` ile —
   `border-left` kutuyu 2px kaydırıp satırları hizasız bırakırdı. */
.mobil-menu nav a[aria-current="page"]{
  /* Beyaz zeminde `--acik` görünmez olurdu; aktif satırın ikinci
     sinyali (soldaki bordo çubuk) zaten duruyor, metin koyulaşıyor. */
  color:var(--deep);font-weight:var(--fw-baslik);
  box-shadow:inset 2px 0 0 var(--vurgu);padding-left:var(--s-3);
}
/* .mobil-menu__cta kuralı 2026-09-08'de karşılıksız kaldı: tek telefon
   düğmesi yerine üç eylemli bir blok geldi. Silindi. */
.mobil-menu__eylem{display:grid;gap:var(--s-2);border-bottom:0}
/* ORTAK MARKA KÜNYESİ — MENÜNÜN DİBİNDE, DÜZEN DEĞİL ZEMİN
   (Osman 2026-09-10: "footer'daki bu Ömer Hekim ve bina varya,
   hamburgerin altına da onu ekle").
   Kendi ürettiğim bina kırpması SİLİNDİ: footer ve kapanış CTA'sı zaten
   bu dosyayı kullanıyor, ikinci bir türev tek kaynağı bozardı.
   ⚠ ZEMİN GÖRSELİ DENENDİ VE GERİ ALINDI (Osman 2026-09-10: "en altta
   ki bu hekim tower logo ve ömer hekim kısmı iç içe geçiyor çünkü en
   altta ve scroll oluyor"). `background-attachment` varsayılanı zemini
   panelin KUTUSUNA sabitliyordu: künye görünen dipte duruyor, içerik
   ise altından kayıp geçiyordu. 375x667'de eylem düğmelerinin alt
   kenarı 668px, panelin dibi 667px — çakışma kaydırmadan ÖNCE bile
   vardı (ölçüldü, ekran görüntüsüyle doğrulandı).
   Artık akışın SON ÖĞESİ: `margin-top:auto` boş alan varsa künyeyi
   dibe iter, alan yoksa içeriğin peşine takar. İki durumda da hiçbir
   şeyin üstüne binmiyor. Kaydırma maliyeti kabul edildi — zaten vardı.
   Ölçü `min()` ile: dar ekranda oransal, geniş ekranda tavanlı. */
.mobil-menu__kunye{margin-top:auto;padding-top:var(--s-2)}
.mobil-menu__kunye img{
  display:block;width:min(66%,240px);height:auto;margin-inline:auto;
  /* Dekoratif ikinci kopya: kapanış bölümündeki künye ile aynı dosya,
     orada anlamlı `alt` ile duruyor. Burada soluk, imza gibi. */
  opacity:.72;
}
/* ⚠ 2026-09-10: bu kural bir tur SİLİNMİŞTİ. Sebebi kendi düzenleme
   betiğimdi: bina bloğunu kaldırırken blok sınırını `}` sayarak
   bulmuştum ve bir `}` fazla yutup komşu kuralı kesmiştim. Belirti
   ölçümle çıktı — düğme içeriği merkezden 71-80px sola kayıyordu
   (`justify-content` `center` yerine `normal` okundu). */
.mobil-menu__eylem .btn{justify-content:center;width:100%}
/* `.btn-acik` zemini beyaza yakın (rgba(255,255,255,.94)); beyaz panelde
   düğmenin kenarı kayboluyordu. Panel içinde kenarlık kazanıyor. */
.mobil-menu__eylem .btn-acik{background:var(--tas-2);border:1px solid var(--cizgi)}

/* ÜST BAR MENÜ AÇIKKEN TAM GENİŞLİK (Osman 2026-09-10: "böyle
   istemiyorum, tamamen full-width olsun"). Bar normalde yüzen bir ada:
   `left:50%` + `translateX(-50%)` + `min(100% - 2*--pad-x, --wrap)`.
   Panel kenardan kenara açılınca üstte içeride, yuvarlak köşeli bir bar
   kalıyordu ve ikisi tek panel gibi okunmuyordu.
   `transform:none` ŞART: yatay ortalama transform'da yaşıyor, yalnız
   `left/right` vermek barı ekranın sağ yarısına kaydırırdı.
   `top` duyuru şeridinin hemen altına iniyor ki bar ile panel arasında
   arkadaki sayfanın sızdığı bir şerit kalmasın. */
.ustbar[data-menu-acik="1"]{
  /* ⚠ `left:50%` ve `transform:translateX(-50%)` BİLEREK KORUNUYOR.
     Önce `left:0;right:0;transform:none` yazmıştım: bar tek karede
     kenardan kenara SIÇRIYORDU (ölçüldü — genişlikte ara değer sayısı 1,
     panel ise 15 karede yumuşak açılıyordu; "geçiş çok kötü"nün sebebi
     tam bu uyumsuzluktu). Merkez sabit kalıp yalnız `width` büyüyünce
     hareket iki yana simetrik açılıyor ve geçiş anime edilebiliyor. */
  top:0;width:100%;border-radius:0;
  background:var(--acik);border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--deep);
  z-index:41;                 /* duyuru şeridi 31, panel 40 */
}
.ustbar[data-menu-acik="1"] .marka .logo{color:var(--deep)}
.ustbar[data-menu-acik="1"] .menu-dugme{
  background:var(--tas-2);border-color:var(--cizgi);color:var(--deep);
}
/* Dil seçimi hamburgerin içinde. ÖNCE tam genişlikte iki büyük haptı
   (2×350px, 44px yükseklik); menünün ağırlık merkezini dil seçimine
   kaydırıyordu (Osman 2026-09-10: "türkçe ingilizce kısmını ufaltır
   mısın biraz düzeltir misin"). Artık tek çerçeve içinde iki bölümlü
   kompakt bir seçici: içeriği kadar yer kaplıyor, sola hizalı.
   `width:max-content` BİLEREK: panel grid'ken `justify-self`, flex'ken
   `align-self` gerekirdi — genişlik ikisinde de aynı çalışıyor ve
   düzen modeli değişirse kural bozulmuyor.
   Dokunma hedefi 34px: WCAG 2.5.8 (AA) 24×24px istiyor, 44px AAA
   hedefi ve burada tek elle basılan birincil eylem değil. */
.mobil-dil{
  display:flex;width:max-content;max-width:100%;gap:2px;padding:3px;
  border:1px solid var(--cizgi);border-radius:var(--r-hap);
  background:var(--tas-2);
}
/* Etiket "Türkçe/English" DEĞİL "TR/EN" (Osman 2026-09-10, üç varyant
   yan yana gösterildi, kısa kodlu olan seçildi): 180,1px genişlik
   129,8'e indi. Tam dil adı ekran okuyucuya `.yalniz-okur` ile
   veriliyor — kısaltma görsel bir kısaltma, bilgi kaybı değil. */
.mobil-dil__sec{
  display:flex;align-items:center;justify-content:center;gap:5px;
  min-height:30px;padding:0 var(--s-3);
  border:0;border-radius:var(--r-hap);
  background:transparent;color:var(--ink-soft);
  font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-orta);cursor:pointer;
}
.mobil-dil__sec[aria-current="true"]{background:var(--deep);color:var(--acik);cursor:default}
.mobil-dil__sec:disabled{opacity:.45;cursor:not-allowed}
/* Bayrak da bir kademe küçülüyor: 22×15 kutuyu şişiriyordu. Yarıçap
   yine token DIŞI (bkz. .bayrak gerekçesi) — 2px bu ölçüde de doğru. */
.mobil-dil .bayrak{width:16px;height:11px}


/* Dar ekran düzeltmesi — ÖLÇÜLDÜ 2026-09-08 (iframe 360px):
   menü gizliyken bile şema 3 kolondu ve iki gap (2×16px) duruyordu.
   Gerçek ihtiyaç 173,8 (logo) + 32 (gap) + 101,6 (CTA) = 307,4px,
   barın iç alanı ise 288px → CTA sağ kenardan 3,4px TAŞIYORDU.
   overflow-x:clip bunu görünmez kılıyordu. Şema 2 kolona iniyor,
   gap daralıyor, logo bir kademe küçülüyor. */
/* Daralma eşiği 30rem'den 34rem'e çıktı: 481px'te logo + dil seçici +
   CTA + hamburger birlikte geri geliyor ve `nowrap` CTA metnine ~7px
   kalıyordu (Codex 2026-09-09 hesabı). 480-544px bandı korunuyor. */
@media(max-width:34rem){
  .ustbar{grid-template-columns:1fr auto;gap:var(--s-3)}
  .ustbar-sag{grid-column:2}
  .marka .logo{height:12px}
  /* Menü düğmesi (44px + 12px gap) eklenince yukarıdaki bütçe patladı:
     320px'te logo 133,7 + gap 8 + CTA 106,8 + gap 12 + düğme 44 = 305px,
     barın iç alanı 256px → CTA 23px + düğme 44px taşıyordu (iframe ile
     ölçüldü 2026-09-08; .ustbar-sag sağ kenarı 343px, viewport 320).
     ÇÖZÜM: dar ekranda bardaki "Bilgi al" GİZLENİYOR — telefon
     numarası zaten menü panelinin en altında tam genişlikte duruyor,
     yani eylem kaybolmuyor, yeri değişiyor. Kalan bütçe: 133,7 + 8 + 44
     = 185,7 / 256. */
  .ustbar-sag .btn-acik{display:none}
  /* Dil tetikleyicisi de gizleniyor. Codex 2026-09-08 ölçtü: 320px'te
     yapışık durumda logo kuralı 10px'i 12px'e çıkarıyor ve gereken
     274,45px, barın iç alanı 256px — yaklaşık 18,45px TAŞMA. Benim
     "10 genişlikte taşma 0" ölçümüm bu durumu kaçırmıştı çünkü barın
     yapışık hâlini ayrıca ölçmemiştim.
     Eylem kaybolmuyor: dil seçimi hamburger panelinde tam genişlikte. */
  .ustbar .dil{display:none}
}
/* 320px (eski iPhone SE / dar Android): yukarıdaki daraltma YETMİYOR —
   ölçüldü, CTA sağ kenardan 23,2px taşıyordu. Logo 13,37:1 oranında çok
   yatay: 12px yükseklik bile 160px genişlik demek. Burada iç boşluk,
   gap ve logo birlikte kısılıyor. Hedef: 133,7 + 8 + 106,8 = 248,5px,
   barın iç alanı 256px. Eşik 22rem (352px): 20,5rem'de 344px ekranda
   pay yalnız 0,8px kalıyordu — ölçüldü, 1px'lik pay güvenli değil. */
@media(max-width:22rem){
  .ustbar{padding:var(--s-3);gap:var(--s-2)}
  .marka .logo{height:10px}
  /* .ustbar-sag .btn padding kuralı SİLİNDİ: 30rem altında o düğme
     zaten display:none, kural karşılıksız kalıyordu. */
}

/* --- hero --------------------------------------------------------- */
/* Hero kenarlardan içeride, köşeleri yuvarlak bir KART.
   Boşluk DÖRT YANDA eşit (Osman 2026-09-08: "alt kenardaki alan çok
   kötü olmuş"). Referansta alt boşluk 0'dı çünkü kart koyu bir şeride
   yapışıyordu; burada altındaki künye şeridi kaldırıldığı için kart
   beyaz zemine oturuyor ve asimetrik boşluk göze batıyordu.
   min-height'tan iki boşluk birden düşülüyor → toplam tam 100svh. */
.hero{
  position:relative;
  /* duyuru şeridi akışta yer kapladığı için ekrandan düşülüyor:
     duyuru + hero = tam 100svh. */
  min-height:calc(100svh - 2 * var(--hero-bosluk) - var(--duyuru-h));
  margin:var(--hero-bosluk);
  border-radius:var(--r-yuzey);
  display:grid;align-items:end;overflow:hidden;isolation:isolate;
}

/* Hero kart olarak içeri girdiği için içindeki hizalı öğeler sayfa
   geometrisinden KAYAR: .wrap ve .izgara "100%" derken hero'nun daralmış
   genişliğini görür. HESAPLANDI (ölçülmedi): 768px'te ızgara hero içinde
   x=46,7'ye, diğer bölümlerde x=30,7'ye düşecekti — 16px kayma. Telafi
   SONRASI durum ölçüldü: altı genişlikte de kayma 0. Geniş ekranda
   ızgara --wrap sınırına çarptığı için kayma tesadüfen kapanıyordu,
   yani hata yalnız dar ekranda görünürdü. Hero'nun kendi boşluğu
   burada geri ekleniyor; her genişlikte hiza korunuyor. */
/* İkisi de 0-2-0 özgüllükte: `.hero__ic` tek sınıf olarak yazılırsa
   `.wrap` ile eşit özgüllükte kalıp yalnız sıraya bağlı kazanıyordu
   (Codex 2026-09-08) — sonradan eklenecek bir .wrap kuralı sessizce
   telafiyi bozabilirdi. */
.hero > .izgara,.hero > .hero__ic{
  width:min(100% + 2 * var(--hero-bosluk) - 2 * var(--pad-x),var(--wrap));
}
/* KATMAN SIRASI (Osman 2026-09-09: "grid çizgileri videonun önüne
   olmasın arkasında kalsın"). Ölçülen eski sıra: .hero__gorsel z-index
   -1, .izgara 0 → ızgara videonun ÜSTÜNDEYDİ ve çizgiler görüntüyü
   kesiyordu. Yeni sıra, arkadan öne: .izgara (-2) → .hero__gorsel (-1)
   → .hero__ic (1).
   NOT: .hero__gorsel opak (background:var(--deep-2) + object-fit:cover
   video), bu yüzden ızgara hero'da artık GÖRÜNMÜYOR — "arkada kalsın"
   talimatının doğrudan sonucu. Çizgiler video üstünde görünsün
   istenirse çözüm z-index değil, düşük opaklıkta ayrı bir katman. */
.hero > .izgara{z-index:-2}
.hero__gorsel{position:absolute;inset:0;z-index:-1;background:var(--deep-2)}

/* --- arka plan videosu (self-host) ----------------------------------
   Poster attribute'u ilk kareyi hemen boyar; video `preload="none"` ile
   ilk boyamayı yarıştırmaz, JS onu sonradan başlatır. object-fit:cover
   ile alan kaplanır — iframe'deki 16:9 hesabına gerek kalmadı.        */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  pointer-events:none;   /* tıklama hero'nun kendi bağlantılarına gitsin */
}

/* okunabilirlik perdesi + kenar karartma (vinyet).
   Kama: metin solda, sağdaki portal açık kalsın.
   Vinyet: dört kenardan içeri koyu — Osman'ın istediği "kenarlardan siyahlık".
   Video hareketli olduğu için perde görsele göre bir tık kuvvetli;
   kontrast hareketli karede de korunmalı. */
/* KAPAK GÖRSELİ (Osman 2026-09-10: "video yüklenene kadar gözüksün,
   oynamaya başlayınca gitsin; video yüklenmediği senaryoda görsel
   kalsın"). `poster` attribute'unun yerini aldı — poster TEK görsel
   alabiliyordu, burada telefona dikey, masaüstüne yatay kadraj gidiyor.
   Video hiç oynamazsa (JS kapalı, saveData, gerçek 2g, iOS Düşük Güç
   Modu) kapak yerinde kalır: kullanıcı boş siyah alan görmez.
   ⚠ reduced-motion bu listeden 2026-09-10'da ÇIKTI: az-hareket tercihi
   artık videoyu engellemiyor, yalnız `loop`u kapatıyor (tower.js >
   heroVideo). Eski hâlde kaynak hiç bağlanmadığı için kapak kalıcıydı.
   z-index 1: videonun üstünde ama perdenin (::after, z-index 2)
   altında — kapak da videoyla aynı karartmayı alsın, başlık okunsun. */
.hero__kapak{
  position:absolute;inset:0;z-index:1;
  transition:opacity var(--duration-slow) var(--ease-exit);
}
.hero__kapak img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;   /* videoyla AYNI kadraj */
}
/* Geçiş anında sıçrama olmasın diye kapak silinmiyor, soluyor. */
.hero__kapak[data-gizli="1"]{opacity:0}
.hero__gorsel::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(120% 88% at 50% 50%,
      rgba(19,20,22,0) 34%, rgba(19,20,22,.42) 72%, rgba(19,20,22,.82) 100%),
    linear-gradient(100deg,
      rgba(19,20,22,.92) 0%, rgba(19,20,22,.78) 30%,
      rgba(19,20,22,.34) 58%, rgba(19,20,22,.1) 80%),
    linear-gradient(to top,
      rgba(19,20,22,.66) 0%, rgba(19,20,22,0) 40%);
}
/* ---- perde: tablet ve telefon ------------------------------------
   Yukarıdaki `linear-gradient(100deg,…)` kaması SOLDAN SAĞA koyuluyor
   çünkü masaüstünde metin solda, sağdaki portal render'ı açık kalsın
   diye kurulmuştu. Dar ekranda metin TAM GENİŞLİK: kamanın açık kalan
   sağ yarısı doğrudan paragrafın altına düşüyor ve satır sonları
   korumasız kalıyor (390px'te ölçüldü, gövde metni cephenin aydınlık
   bölgesine biniyor). Bu bantta kama YERİNE alttan yukarı perde var —
   içerik zaten alta yaslı.
   Beş durak, üç değil: iki durak arası fark büyüdükçe geniş alanlı
   koyu gradyanlar 8-bit ekranda BANTLANIYOR ("patlamasın"). Ara
   duraklar geçişi yumuşatıyor, toplam koyuluk aynı kalıyor. */
@media(max-width:60rem){
  .hero__gorsel::after{
    background:
      radial-gradient(130% 92% at 50% 46%,
        rgba(19,20,22,0) 42%, rgba(19,20,22,.30) 74%, rgba(19,20,22,.68) 100%),
      /* Duraklar TAHMİN DEĞİL, ÖLÇÜM: gerçek hero videosu 390px'te
         canvas'a çizildi, üstüne aynı duraklarla perde kondu ve
         METNİN KUTUSU İÇİNDEKİ EN PARLAK PİKSEL ile #EDEEF0 arasındaki
         kontrast hesaplandı (t = 0,5 / 5 / 10 sn — kadraj gündüzden
         geceye dönüyor, en kötü an 10. saniye).
           perde yok      → H1 1,06  (zemin metinden PARLAK; okunmuyor)
                            [DÜZELTME: burada 0,94 yazıyordu. Kontrast
                            oranı tanımı gereği 1'in ALTINA İNEMEZ —
                            hesapta açık/koyu sıralanmamıştı. Yön aynı,
                            sayı yanlıştı. Codex 2026-09-08 yakaladı.]
           ilk aday       → H1 2,83  gövde 5,21   ✗ H1 eşiği 3,0'ı geçemedi
           BU (A)         → H1 3,83  gövde 6,58   ✓
           daha koyu (B)  → H1 5,25  gövde 8,58   — geçiyor ama cephe
                            render'ı kayboluyordu, alınmadı. */
      linear-gradient(to top,
        rgba(19,20,22,.92) 0%,
        rgba(19,20,22,.84) 22%,
        rgba(19,20,22,.68) 38%,
        rgba(19,20,22,.46) 54%,
        rgba(19,20,22,.20) 72%,
        rgba(19,20,22,0)   92%);
  }
}
/* Izgara z-index:0'da; içerik onun ÜSTÜNDE kalmalı yoksa çizgiler
   metnin üzerinden geçermiş gibi görünür (aslında altında ama aynı
   düzlemde olunca DOM sırası karar verir). */
.hero__ic,.bolum > .wrap{position:relative;z-index:1}
.hero__ic{padding-block:var(--pay-ustbar) clamp(var(--s-8),9vh,var(--s-9))}
/* 15ch → 17ch: 2026-09-08'de Geist'e göre ölçülmüştü (1ch = 37,1px →
   17ch = 630,7px). Font Inter Tight olunca 1ch = 35,27px'e indi (600 /
   56px, Chrome) → 17ch artık 599,5px. DAR bir kutu, o yüzden kural
   ezberden korunmadı, RENDER edilen satır kutuları yeniden ölçüldü
   (Range.getClientRects, 2026-09-09): iki satır — 562,3px ve 579,0px,
   ikisi de 599,5px'e sığıyor. Satır SAYISI kutu yüksekliğini
   line-height'a bölerek DEĞİL, satır kutularını sayarak bulundu:
   bu başlığın ikinci satırı .script (Source Serif italik) taşıyor,
   iki farklı yüzün satırında bölme güvenilir değil. Ölçülen: 2 satır,
   kutu 133,2px, line-height 66,08px (1.18 × 56).
   NOT: canvas measureText burada YANILTIYOR (ikinci dizeyi 642px
   veriyor) çünkü ne letter-spacing'i ne de .script'in Source Serif
   italiğini hesaba katıyor — kararı render'daki satır kutusu verir. */
.hero__ic .h1{margin-top:var(--s-5);max-width:17ch}
.hero__ic .metin{margin-top:var(--s-5);max-width:44ch}
/* gap --s-6 (32px) İDİ: o değer "bir düğme + bir metin bağlantısı"
   ikilisi içindi, aradaki mesafe iki farklı ağırlıkta öğeyi ayırıyordu.
   2026-09-08'de alan iki GERÇEK CTA'ya döndü (Osman: "Projeyi keşfet /
   Bilgi ve randevu al"); yan yana iki hap düğme 32px arayla birbirinden
   kopuk okunuyor. 12px = düğmenin kendi iç boşluğuyla aynı ölçek. */
.hero__eylem{margin-top:var(--s-7);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}


/* --- bölüm -------------------------------------------------------- */
.bolum{position:relative;padding-block:var(--bosluk-bolum)}
.bolum--tas{background:var(--tas-2)}
/* KART YÜZEYİ BÖLÜM ZEMİNİNE GÖRE DEĞİŞİR.
   Kartları düzleştirirken (.tipkart --acik'ten --tas-2'ye) hangi zeminin
   ÜSTÜNDE durduğunu kontrol etmemiştim: .bolum--tas da #F6F7F8, kart da
   #F6F7F8 → fark SIFIR, kart sınırı canlıda tamamen kayboluyordu
   (proje.html #ticari ve daireler.html #tipler, ikisinde de).
   Çerçeveyi kaldırınca kartı TANIMLAYAN tek şey zemin farkı kalıyor;
   o fark yoksa kart yok demektir. Açık bölümde kart --tas-2,
   --tas-2 bölümünde kart --acik. */
/* `.sss__madde` bu listeden ÇIKARILDI (2026-09-09): SSS bölümü beyaza
   alınınca (Osman) gri bölümde SSS kalmadı — tek kullanımı index.html
   ve orası artık `bolum`. Kural karşılıksız kalmıştı. */
/* ⚠ ÜÇÜNCÜ KEZ AYNI TUZAK (Codex 2026-09-09): yeni bir kart bileşeni
   eklerken bu listeye EKLEMEYİ atlarsam gri bölümde gri kart düşüyor ve
   sınır tamamen kayboluyor (fark 1:1). Sırasıyla .tipkart, .ozellik ve
   şimdi .kunye__satir ile yaşandı — proje.html #kunye `bolum--tas`. */
.bolum--tas .tipkart,
.bolum--tas .olcut,
.bolum--tas .ozellik,
.bolum--tas .kunye__satir,
.bolum--tas .katplan__alt,
.bolum--tas .galeri__ac{background:var(--acik)}
.bolum__bas{max-width:56ch;margin-bottom:var(--s-8)}
/* margin-top KALDIRILDI: bu boşluk h2'yi ÜSTÜNDEKİ ROZETTEN ayırıyordu.
   Rozetler 2026-09-09'da kaldırılınca boşluğa dayandı ve bölüm
   başlarında dev boşluklar üretti (Osman: "tüm sitede boşluk dengesi
   şaşmış"). Aynı sebeple üç kardeş kural da temizlendi. */

/* --- öne çıkan sayı şeridi ----------------------------------------
   Osman 2026-09-08: kart yok, ikon yok, köşe yuvarlaması yok. Yapıyı
   IZGARA ÇİZGİSİ kuruyor — üstte/altta yatay, hücreler ARASINDA dikey.
   Çizgi düzeni (Osman 2026-09-08, ikinci düzeltme): ÜST yatay çizgi YOK
   — hero kartının alt kenarı zaten bir çizgi, ikisi üst üste gelince
   şerit hero'ya "yapışık ikinci kutu" gibi duruyordu. Kalanlar: ALT
   yatay + DÖRT kenardan ikisi olarak SOL ve SAĞ dikey.

   Dış dikey çizgiler kapsayıcıya (`border-inline`) veriliyor, ilk/son
   hücreye DEĞİL: `:first-child`/`:last-child` kuralı hücre sayısı
   değişince ya da bir hücre gizlenince sessizce yanlış hücreye düşüyor
   (bu projede 2026-09-08'de iki kez yaşandı: ızgaranın sağ dış çizgisi
   ve kat planı kartı). İç ayırıcı ise `.seri__hucre + .seri__hucre` —
   aynı sebeple bitişik-kardeş, son-çocuk değil. */
.bolum--seri{padding-block:0}
/* Hero kartının ALT KENAR BOŞLUĞU kadar yukarı çekiliyor.
   ÖLÇÜLDÜ 2026-09-08 (1440px): hero alt kenarı y=808, şeridin dikey
   çizgileri y=820'de başlıyordu — arada tam 12px beyaz vardı ve çizgi
   hero'ya bağlanmıyordu (Osman: "hero ile bu rakamlar arasındaki
   çizgide boşluk var").
   Sabit 12px DEĞİL token: --hero-bosluk telefonda 8px'e iniyor, negatif
   marj onu kendiliğinden takip ediyor. Bitişik-kardeş seçici, yani
   kural yalnız şerit gerçekten hero'nun HEMEN ardındayken çalışıyor;
   şerit başka bir yere taşınırsa asılı bir negatif marj kalmıyor.
   (Araya HTML yorumu girmesi `+` seçicisini etkilemez.) */
.hero + .bolum--seri{margin-top:calc(-1 * var(--hero-bosluk))}
/* İç sayfada üst çizgiyi verecek bir hero kartı YOK — gerekçe:
   docs/proje-sayfasi-kararlar.md §7 */
.ic-bas + .bolum--seri .seri-kutu{border-top:1px solid var(--cizgi)}
.seri{
  display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding:0;
}
/* Çerçeve ŞERİTTE değil KUTUDA: nokta göstergesi de çizgilerin içinde
   kalıyor, böylece dikey çizgiler nokta satırında kesilmiyor ve
   alttaki bölümün ızgara çizgileriyle kesintisiz birleşiyor.
   Üst yatay çizgi YOK (Osman 2026-09-08): hero kartının alt kenarı
   zaten bir çizgi, ikisi üst üste gelince şerit hero'ya yapışık
   ikinci bir kutu gibi duruyordu. */
.seri-kutu{
  border-bottom:1px solid var(--cizgi);
  border-inline:1px solid var(--cizgi);
}
.seri__hucre{
  padding:var(--s-7) var(--s-4);
  display:grid;justify-items:center;align-content:start;gap:var(--s-2);
  text-align:center;
}
.seri__hucre + .seri__hucre{border-left:1px solid var(--cizgi)}
.seri__bas{
  margin:0;font-size:var(--fs-xl);
  font-weight:var(--fw-baslik);letter-spacing:var(--ls-h2);color:var(--deep);
  line-height:1.1;
}
/* tabular-nums ZORUNLU: sayaç dönerken rakam genişlikleri değişirse
   şerit her karede titrer (Inter Tight'ta da 3 ile 1 aynı genişlikte değil). */
.seri__sayi{font-variant-numeric:tabular-nums}
.seri__alt{margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-soft);text-wrap:pretty}

/* Kırılımda dikey ayırıcı YATAYA dönüyor: satır kırılınca alt satırın
   ilk hücresi soldan asılı bir çizgi almasın. */
@media(max-width:75rem){
  .seri{grid-template-columns:repeat(2,1fr)}
  .seri__hucre:nth-child(2n+1){border-left:0}
  .seri__hucre:nth-child(n+3){border-top:1px solid var(--cizgi)}
}

/* --- telefonda KARUSEL ---------------------------------------------
   Osman 2026-09-08: "mesela bu mobilde carousel olabilir mi?"
   Gerekçe ölçüldü: telefonda dört hücre alt alta ~830px yer kaplıyordu,
   yani bir ekranın tamamından fazlası dört rakama gidiyordu.
   Yatayda scroll-snap: parmakla kaydırma NATİF, JS yalnız noktaları
   ekliyor. JS düşerse şerit hâlâ kaydırılabilir ve rakamlar okunur.
   Hücre %76: yanındaki hücrenin ucu görünüyor — "devamı var" işareti
   kullanıcıya kaydırılabildiğini söylüyor (yoksa tek kart sanılır). */
@media(max-width:48rem){
  .seri{
    display:flex;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;      /* gösterge noktalar */
  }
  .seri::-webkit-scrollbar{display:none}
  /* TAM GENİŞLİK, ORTALI (Osman 2026-09-08: "ortalı olsun, her parça
     tek tek gitsin"). %76 + komşunun ucu denenmişti; tek tek geçişte
     yandaki hücrenin ucu kadraja giriyor ve "ortalı" durmuyor. */
  .seri__hucre{
    flex:0 0 100%;scroll-snap-align:center;
    padding:var(--s-6) var(--s-4);
  }
  /* Yukarıdaki iki kolon kuralları burada geçersiz: dizilim yatay.
     `:nth-child(n)` (0,2,0) o kuralları eşit özgüllükle ama SONRA
     geldiği için eziyor — `!important` gerekmiyor. */
  /* Tam genişlikte iç ayırıcı hiç görünmez (her an tek hücre kadrajda);
     geçiş sırasında bir an beliren dikey çizgi ise gürültü. Kapatıldı. */
  .seri__hucre:nth-child(n){border-left:0;border-top:0}
}

/* --- nokta göstergesi: ince ÇİZGİ, aktif olan geniş ve kalın --------
   Düğmenin kendisi 34×24px (WCAG 2.5.8 AA eşiği 24×24); görünen çizgi
   ::before. Çizgiyi doğrudan düğme yapsaydık dokunma hedefi 18×2px
   olurdu — eşiğin çok altında. */
.seri__noktalar{display:flex;justify-content:center;gap:var(--s-1);margin:0;padding:var(--s-5) 0}
/* [hidden] tarayıcı varsayılanı ile aynı özgüllükte (0,1,0) çakışıyor
   ve bizimki sonra geldiği için kazanırdı → açıkça kapatılıyor.
   (Aynı hata mobil menü panelinde yaşanmıştı: panel `hidden` iken
   ekranda duruyordu.) */
.seri__noktalar[hidden]{display:none}
.seri__nokta{
  width:34px;height:24px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;
}
.seri__nokta::before{
  content:"";display:block;width:18px;height:2px;border-radius:var(--r-hap);
  background:rgba(28,29,31,.3);
  transition:width .45s var(--ease),height .45s var(--ease),background .45s var(--ease);
}
.seri__nokta[aria-current="true"]::before{width:30px;height:3px;background:var(--vurgu)}
.seri__nokta:hover::before{background:rgba(28,29,31,.45)}
.seri__nokta:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px;border-radius:var(--r-yuzey)}

/* NOT: `.proje*` kuralları (bölüm ızgarası, iki görsel, istatistik
   rakamı — 20 kural) 2026-09-08'de SİLİNDİ; bölüm HTML'den kaldırıldı ve
   kurallar karşılıksız kaldı. Aynı gün .marka__yer, .rozet__ayrac,
   .lnk--dugme ve .karusel* de bu sebeple silinmişti. */

/* --- neden HEKİM TOWER (4 madde) ------------------------------------
   Düzen referansı: Osman'ın ekran görüntüsü (2026-09-08). Sol blok 2
   kolon, sağdaki görsel 2 kolon. İlke: column-gap 0,
   nefes payı öğe İÇİNDE — yoksa kolonlar ızgara çizgilerinden kayıyor. */
.neden__ic{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:0;row-gap:var(--s-8);align-items:start;
}
.neden__sol{grid-column:1 / 3;padding-right:var(--s-7)}

/* Bölüm CTA'ları (Osman 2026-09-09: "Projeyi İncele" düğmesi, proje
   detayına gitsin). Yeni bileşen YOK — .btn-cizgi'nin yerleşimi. */
.neden__cta{margin-top:var(--s-5)}
.olanak__cta{margin-top:var(--s-5);align-self:start}
.neden__slayt{
  /* `grid-row` span 2: liste ayrı satıra indiği için slaytın ızgara alanı
     yalnız başlık satırı kadar kalıyordu ve `sticky` yapışacak yer
     bulamıyordu. İki satırı kapsayınca yapışma liste boyunca sürüyor. */
  grid-column:3 / 5;grid-row:1 / span 2;position:sticky;top:var(--capa-payi);
  /* Referans (terris) ölçüldü: görsel sol sütunla AYNI yükseklikte,
     köşe yuvarlaması var, üst köşede açıklama kartı, sol altta oklar.
     Yükseklik burada içerikten değil ORANDAN geliyor: kaynak render'lar
     3:2 (2000×1334) ve `cover` ile kırpmak yerine oranı koruyorum —
     1:1'e kırpsaydım 2000×1334'ü 1410px'e yukarı ölçeklemek gerekirdi
     ve retina ekranda yumuşardı. */
  border-radius:var(--r-yuzey);overflow:hidden;isolation:isolate;
  /* Yer tutucu KOYU DEĞİL: görsel yüklenene kadar --deep-2 kutuyu siyah
     bir dikdörtgen gösteriyordu. Bölümün kendi zemini (--tas-2) ile aynı
     aileden bir ton, boşluk göze batmıyor. */
  background:var(--gok);
}
.slaytlar{list-style:none;margin:0;padding:0;display:grid}
/* Slaytlar ÜST ÜSTE, aynı ızgara hücresinde: geçiş çapraz sönümleme.
   Yatay kaydırma yok — referansta da öyle. */
/* visibility ŞART: yalnız opacity:0 olsaydı görünmeyen dört slaytın alt
   metni de erişilebilirlik ağacında kalır ve ekran okuyucu beş görseli
   birden okurdu (Codex 2026-09-08). visibility geçiş SONUNDA uygulanıyor
   ki sönümleme kesilmesin. */
.slayt{
  grid-area:1 / 1;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s var(--ease),visibility 0s linear .55s;
}
.slayt[data-etkin]{opacity:1;visibility:visible;transition:opacity .55s var(--ease),visibility 0s}
/* Oran 3/2 → 4/3 (Osman 2026-09-08: "yüksekliğini biraz daha artır").
   İKİ KAZANÇ: 1440px'te kutu 442px'ten ~497px'e çıkıyor VE kırpma
   düşüyor — slaytlar artık proje render'ı (3:2) değil olanak görseli,
   dokuzun yedisi 1200×896 (1,339) yani 4:3'e %0,44 farkla oturuyor.
   Codex'in işaretlediği "wellness 3:2 kutuda %10,71 kırpılıyor" bulgusu
   böylece kapandı. Kalan iki dosya bilerek kırpılıyor:
   concierge 1535×1024 (1,499) → yanlardan %11,05
   sinema    1600×860  (1,860) → yanlardan %28,33 ⚠ en ağır kırpma */
.slayt img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4 / 3}
/* `.slayt__not` (görsel üstündeki açıklama kartı) 2026-09-08'de
   KALDIRILDI — liste ile slayt eşleşmesi söküldüğü için kartı
   dolduran metin kaynağı kalmamıştı (Osman). Kuralları da silindi. */
/* Oklar ORTALI (Osman 2026-09-09). Önceden sol alttaydı.
   Segmentli ilerleme şeridi DENENDİ ve KALDIRILDI (Osman: "böyle çok
   basit ve kötü gözüküyor") — gösterge artık okun çevresindeki halka. */
.slayt__oklar{
  position:absolute;left:50%;bottom:var(--s-4);transform:translateX(-50%);
  z-index:2;display:flex;gap:var(--s-2);
}
/* Halka düğmenin İÇİNDE mutlak konumlu: .slayt__ok bir grid ve halka
   grid akışına girerse ok ikonunu ortadan kaydırır. */
.slayt__ok > .slayt__halka{
  position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);      /* dolum 12 yönünden başlasın */
  pointer-events:none;overflow:visible;
}
.slayt__halka circle{fill:none;stroke-width:2}
.slayt__halka-iz{stroke:rgba(28,29,31,.12)}
.slayt__halka-dolum{
  stroke:var(--vurgu);stroke-linecap:round;
  /* Çevre = 2πr = 2π×21 = 131.95. Dasharray/offset ile "boş"tan "tam"a. */
  stroke-dasharray:131.95;stroke-dashoffset:131.95;
}
/* Süre TEK KAYNAKTAN: --slayt-sure'yi JS kendi BEKLEME sabitinden yazıyor.
   CSS'e 4s yazılsaydı iki yerde yaşar ve sessizce ayrışırdı. */
[data-slayt-calisiyor] .slayt__halka-dolum{
  animation:slaytHalka var(--slayt-sure,4000ms) linear forwards;
}
/* Duraklarsa halka DONAR ve fare çekilince KALDIĞI YERDEN devam eder —
   sıfırlanmaz (Osman 2026-09-09). Tek saat olduğu için geçiş de
   halkayla birlikte donuyor, ikisi ayrışamıyor. */
[data-slayt-durdu] .slayt__halka-dolum{animation-play-state:paused}
@keyframes slaytHalka{to{stroke-dashoffset:0}}
/* Özgüllük: `[data-slayt-calisiyor] .slayt__halka-dolum` (0,2,0) bu
     kuralı (0,1,0) yeniyordu — medya sorgusu özgüllüğü DEĞİŞTİRMEZ
     (Codex 2026-09-09). Aynı özgüllükle yazılıyor. */
  
:root[data-az-hareket="1"] [data-slayt-calisiyor] .slayt__halka-dolum{animation:none}
.slayt__ok{
  position:relative;   /* .slayt__halka mutlak konumlanıyor */
  width:44px;height:44px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-hap);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--deep);cursor:pointer;
  transition:background var(--hiz) var(--ease);
}
.slayt__ok:hover{background:#fff}
.slayt__ok:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.slayt__ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* `.ozellik[data-etkin]` kuralları 2026-09-08'de SİLİNDİ: liste artık
   sağdaki slaytla eşleşmiyor (Osman), yani hiçbir maddeye `data-etkin`
   yazılmıyor ve kurallar karşılıksız kalmıştı. Sol işaret aşağıda,
   TÜM maddelerde. */
/* NOT: `.neden__gorsel` (tek sabit görsel) 2026-09-08'de slayt kutusuna
   dönüştü; eski kuralları karşılıksız kaldığı için silindi. */

/* --- proje görselleri ------------------------------------------------
   Osman 2026-09-08'de archscale.webflow.io/services'i referans verdi.
   O sayfada 1800px'te ÖLÇÜLDÜ: kart ızgarası 3 kolon / gap 16px /
   kart görseli 4:3 / köşe yarıçapı 0 / hero altında iki büyük görsel.
   Bizim `.tipler` zaten 3 kolon + var(--s-4)=16px — aynı ızgara.

   İKİ BİLİNÇLİ SAPMA:
   (1) Yarıçap 0 DEĞİL --r-yuzey: buradaki render'lar anasayfadaki
       `.neden__slayt` ile AYNI dosyalar, orada da --r-yuzey var. Aynı
       görselin iki yüzeyde farklı köşesi olamaz.
   (2) 4:3'e kırpma YOK: kaynak render'lar 3:2 (2000×1334, ölçüldü);
       4:3'e kırpmak kadrajdan %11 keserdi. `height:auto` ile oran
       korunuyor — sabit `height` bu projede kat planında bir kez
       aspect-ratio'yu ezmişti. */
.gorsel{margin:0}
.gorsel img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-yuzey);
  /* Yer tutucu: görsel yüklenene kadar kutu boş beyaz kalmasın. */
  background:var(--gok);
}
/* Künye/temsil notu. VERSAL DEĞİL: versal Türkçe (İ Ş Ğ) sıkışıyor
   ve bu dize 3 kelimeden uzun. */
.gorsel__yazi{
  margin:var(--s-3) 0 0;font-family:var(--ff-body);
  font-size:var(--fs-xs);letter-spacing:.04em;color:var(--ink-soft);
}
.gorsel-ikili{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
/* `.gorsel-ikili .gorsel img{aspect-ratio:4/3}` 2026-09-09'da eklendi ve
   AYNI GÜN geri alındı (Codex): eklenme sebebi Öner Hekim sayfasındaki
   farklı oranlı iki görseldi, o sayfa `.satir-ikili`ye geçince sebep
   kalktı — kuralın tek kullanıcısı `proje.html` oldu ve oradaki iki
   görsel 2000×1334 (3:2), `cover` her birinden %11,07 kırpıyordu.
   Ortak sınıfa kural eklerken sınıfın DİĞER kullanıcıları da ölçülmeli. */
/* Sinematik kapanış görseli: metin kolonunun DEĞİL, ızgaranın tamamının
   genişliğinde. Kare kaynak (1365×1365) dar kolonda dikey bir kule gibi
   uzuyordu; 16:9'a kırpılınca cephe yatay okunuyor. */
.gorsel--genis img{aspect-ratio:16 / 9;object-fit:cover;object-position:center 62%}
@media(max-width:40rem){.gorsel--genis img{aspect-ratio:4 / 3}}

/* --- iç sayfa: metin + görsel alternasyonu -------------------------
   Osman 2026-09-09 onayı (Varyant A). Sebep ölçüldü: Dr. Öner Hekim
   sayfasının beş bölümünün beşi de aynı kalıptaydı — rozet + başlık +
   üç uzun paragraf, sağ yarı boş. `--ters` ile görsel sola geçiyor;
   sayfa boyunca sol-sağ alternasyonu o tekrarı kırıyor.
   Izgara `.neden__ic` ile AYNI: 4 kolon, column-gap 0, nefes payı
   öğenin içinde — iki bölüm aynı dikey çizgilere oturuyor. */
.satir-ikili{
  display:grid;grid-template-columns:repeat(4,1fr);column-gap:0;
  /* `center` DEĞİL `stretch` (2026-09-09): metin kolonu görselden uzun
     olduğu için görsel ortada asılı kalıyor, altında ve üstünde boşluk
     birikiyordu — Osman "paragraflar görsellerin altına taşmış" derken
     gördüğü buydu (ızgara dışındaki paragraf da o boşluğa düşüyordu,
     o paragraflar artık yazı kolonunun içinde). İki kolon aynı yükseklikte
     bitiyor, bölümün alt kenarı tek çizgi. */
  row-gap:var(--s-6);align-items:stretch;
}
/* `grid-row:1` ŞART: ızgara yerleştirmesi ileri doğru ilerler, geri
   dönmez ("sparse"). `--ters`te metin 3/5'e konunca görsel için 1/3
   kolonu GERİDE kalıyor ve görsel bir alt satıra düşüyordu — ölçüldü
   1440px: metin y 830-980, görsel y 990-1200. */
/* YAZI KOLONU DİKEYDE ORTALI (Osman 2026-09-10, üçüncü kez söyledi:
   "içerikler görsellerle dikeyde neden ortalı değil").
   Kolon `stretch` ile görselin boyuna uzuyordu ama İÇERİK üstte
   kalıyordu: ölçüldü #imza @1280px → kutu 471px, içerik 399px, altında
   72px boşluk. Kutuyu ölçmek bunu gizliyor (kutu görselle eşit
   görünüyor), görünen boşluğu içerik üretiyor.
   `align-self:center` seçildi, `display:grid + align-content` DEĞİL:
   ikincisi blok akışını grid'e çevirip başlık/paragraf arasındaki
   margin daralmasını (collapse) öldürür ve tüm dikey ritmi kaydırırdı.
   Bu haliyle kutu içeriği kadar oluyor ve satırın ortasına hizalanıyor;
   metin görselden uzunsa hiçbir şey değişmiyor. */
.satir-ikili__yazi{grid-column:1 / 3;grid-row:1;padding-right:var(--s-7);align-self:center}
.satir-ikili__gorsel{grid-column:3 / 5;grid-row:1;margin:0;display:flex}
.satir-ikili--ters .satir-ikili__yazi{grid-column:3 / 5;padding-right:0;padding-left:var(--s-7)}
.satir-ikili--ters .satir-ikili__gorsel{grid-column:1 / 3}
.satir-ikili__gorsel img{
  /* Yükseklik kolondan geliyor; oran serbest bırakıldı ki görsel metnin
     boyuna uzasın. `min-height` kısa metinli bölümde görselin bant gibi
     yassılmasını engelliyor. */
  display:block;width:100%;height:100%;min-height:clamp(280px,26vw,460px);
  object-fit:cover;
  border-radius:var(--r-yuzey);background:var(--gok);
}
@media(max-width:60rem){
  .satir-ikili{grid-template-columns:1fr}
  .satir-ikili__yazi,
  .satir-ikili--ters .satir-ikili__yazi{grid-column:1;grid-row:auto;padding:0}
  .satir-ikili__gorsel,
  .satir-ikili--ters .satir-ikili__gorsel{grid-column:1;grid-row:auto}
  /* ⚠ 2026-09-10 KARARI DEĞİŞTİ (Osman: "önce görsel sonra metin gelecek
     şekilde kolon yapılarını güncellesen daha doğru olur"). Tek kolonda
     görsel artık HER bölümde metnin ÜSTÜNDE.
     `order` kullanılıyor, DOM sırası DEĞİŞMİYOR: ekran okuyucu ve klavye
     bölümü yine başlıktan okumaya başlıyor, yalnız göz görselden
     başlıyor. Markup'ı çevirseydim erişilebilirlik sırası bozulurdu.
     Eski kural bunun TERSİNİ yapıyordu (görseli hep alta itiyordu). */
  .satir-ikili__gorsel,
  .satir-ikili--ters .satir-ikili__gorsel{order:-1}
  /* Tek kolonda görselin metin boyuna uzaması anlamsız (yan yana
     değiller): sabit 4/3 kutuya oturuyor. Görselin KENDİ oranı değil —
     kaynaklar 3:2 ile 1:1 arasında değişiyor, ortak bir kutu ızgarayı
     tek düze tutuyor. */
  .satir-ikili__gorsel img{height:auto;min-height:0;aspect-ratio:4 / 3}
}

/* Şirket/marka rozetleri. `.cip` sitede zaten var (daireler + proje),
   yeni bir görsel dil açılmıyor; bu yalnız sarmalayıcı. */
.kurum-cipler{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin:var(--s-5) 0 0;padding:0;list-style:none;
}
/* NOT: `.kurum-cipler + .metin` kuralı 2026-09-10'da SİLİNDİ — o
   paragraf (kurum-cipler'den sonra gelen kapanış metni) tamamen
   kaldırıldı, kural karşılıksız kalmıştı (Osman/Codex ölü kod
   taraması). */

/* Kapanış alıntısı: docx'in üç dizelik vurgusu ("41 yıllık deneyim…")
   düz paragraf olarak akıp gidiyordu; imza niteliğinde ayrı bir blok. */
.alinti{
  margin:0;padding:var(--s-6) 0 var(--s-6) var(--s-6);
  border-left:1px solid var(--vurgu);
}
.alinti p{
  margin:0;font-family:var(--ff-script);font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.35;color:var(--deep);
}
.alinti p + p{margin-top:var(--s-3)}
.alinti footer{
  margin-top:var(--s-5);font-family:var(--ff-body);font-size:var(--fs-xs);
  font-weight:var(--fw-orta);letter-spacing:var(--ls-etiket);
  text-transform:uppercase;color:var(--ink-soft);
}

/* Telefonda yan yana iki render 170px'e düşüyor — alt alta. */
@media(max-width:48rem){.gorsel-ikili{grid-template-columns:1fr}}

/* `.ozellikler` 2026-09-09'da `.neden__sol` DIŞINA alındı (Osman: telefonda
   görsel en altta kalıyordu, 390px'te başlığın 1151px altındaydı). Artık
   `.neden__ic`'in üçüncü ızgara çocuğu ve DOM'da slayttan SONRA geliyor:
   tek kolona düşen her ekranda sıra rozet→başlık→metin→GÖRSEL→liste olur.
   Üst boşluk `margin` DEĞİL `row-gap` ile geliyor; margin kalsaydı ikisi
   toplanırdı. */
.ozellikler{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-column:1 / 3;
  /* Sağ dolgu `.neden__sol`'dan DEVRALINDI: liste dışarı çıkınca o kutunun
     `padding-right`i geride kaldı ve satırlar sağdaki slaytın hizasına kadar
     uzadı (Codex 2026-09-09). Aynı nefes payı, aynı satır kırılımı. */
  padding-right:var(--s-7);
}
.ozellik{
  position:relative;
  /* KART YÜZEYİ (Osman 2026-09-09: ölçüt kartlarının tasarım mantığı,
     "tek fark kutunun içi bembeyaz olacak"). Beyazı burada ELLE
     vermiyoruz: `.bolum--tas .ozellik` kuralı zaten gri bölümdeki
     kartları --acik'e çeviriyor; aynı mekanizma .olcut ve .tipkart
     için de çalışıyor, kart yüzeyi bölüm zeminine göre terslenmeye
     devam ediyor.
     Eski düzen (grid auto/1fr + soldaki ikon + sol kırmızı işaret)
     SİLİNDİ, üstüne yığılmadı: kart yüzeyi geldiği için ayırıcı
     işarete gerek kalmadı. */
  background:var(--tas-2);
  border-radius:var(--r-yuzey);
  padding:clamp(var(--s-5),2.2vw,var(--s-6));
  /* `space-between` BURADA YANLIŞTI (Osman 2026-09-09: "boşluk dengesi
     şaşmış"). .olcut'ta işe yarıyor çünkü orada min-height var ve
     içerik az — boşluk bilinçli olarak alta itiliyor. Burada açıklama
     metni kartı zaten dolduruyor; space-between başlık ile metin
     arasına ~100px sebepsiz boşluk açıyordu. Akış yukarıdan başlıyor,
     boşluğu tek kaynak (gap) veriyor. */
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:var(--s-5);
  transition:transform var(--duration-base,320ms) var(--ease-move,cubic-bezier(.2,0,0,1));
}
/* Üst satır: anasayfada numara + görsel, proje sayfasında ad + ikon.
   İki bağlam aynı satırı paylaşıyor; hizalama içeriğe göre değil
   KUTUYA göre veriliyor (flex-start), çünkü görsel ile numaranın üst
   kenarı hizalanmalı. */
.ozellik__ust{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
}
/* Başlık artık gövdenin İÇİNDE (referans deseni: numara+görsel üstte,
   metin altta). Gövde içi boşluğu tek kaynak versin. */
.ozellik__govde{display:flex;flex-direction:column;gap:var(--s-2)}
/* Kart yüzeyi geldiği için hover geri bildirimi yalnız yükselme.
   Renk TEK BAŞINA sinyal taşımıyor (WCAG 1.4.1) — hareket taşıyor. */
.ozellik:hover{transform:translateY(-2px)}

/* İkonlar Lucide vektör seti — emoji DEĞİL. Çizgi kalınlığı ve uçları
   sayfadaki diğer inline SVG'lerle (buton oku) aynı dili konuşuyor. */
/* İKON ÖLÇÜT KARTIYLA AYNI (Osman 2026-09-09: "ikon kullanımı rengi vs.
   font büyüklüğü vs. tutarlılık"). Üç değer de .olcut__ikon'dan alındı:
   26px · stroke 1.4 · --ink-soft. Kırmızı (--vurgu) bilerek bırakıldı:
   marka rengi artık kart içinde DEĞİL, eylem yüzeylerinde (düğme, bağlantı)
   çalışıyor; kartlarda tek renkli nötr ikon dili var.
   Bu, HANDOFF'taki açık "ikon varyantı seçimi" maddesini de kapatıyor —
   varyant B'ye (nötr, ince) yakın olan yön seçildi. */
.ozellik__ikon{
  display:grid;place-items:center;flex:none;
  width:26px;height:26px;color:var(--ink-soft);
}
.ozellik__ikon svg{
  width:26px;height:26px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.ozellik__ad{
  font-family:var(--ff-body);font-weight:var(--fw-orta);font-size:var(--fs-xl);
  /* Satır yüksekliği AÇIKÇA veriliyor: gövdeden miras alınan 1.65,
     27,2px başlıkta 44,88px satır üretiyordu (ölçütlerde ~30px).
     Başlık rolü sıkı satır ister (Codex 2026-09-09). */
  line-height:1.15;
  letter-spacing:-.02em;margin:0;color:var(--deep);
}
/* `.ozellik__vurgu` 2026-09-09'da KALDIRILDI (Osman: "bu mini
   başlıkları kaldır gitsin"). Kural karşılıksız kaldığı için silindi.
   ⚠ İÇERİK NOTU: bu satırlar docx'in üç parçalı yapısının ortasıydı
   (ad → üç noktayla biten vurgu → uzun açıklama, docx 76-90). Artık
   sayfada ad + açıklama var; docx ile bu fark bilinçli. */
.ozellik__metin{margin:6px 0 0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-soft)}
/* `.ozellik__no` (01–05 sıra numarası) 2026-09-08'de HTML'den kaldırıldı
   (Osman: "01 02 falan yazıyor ya onları da kaldır") — kural karşılıksız
   kaldığı için silindi. Üçüncü ızgara kolonu da bu numara içindi,
   `.ozellik` artık iki kolon. */

@media(max-width:60rem){
  .neden__ic{grid-template-columns:repeat(2,1fr);row-gap:var(--s-7)}
  .neden__sol{grid-column:1 / 3;padding-right:0}
  /* `position:relative`, `static` DEĞİL: oklar (`.slayt__oklar`) mutlak
     konumlu ve en yakın konumlandırılmış ataya çapalanıyor. `static`
     olunca çapa `.neden__ic`'e kayıyordu — slayt ızgaranın SON öğesiyken
     bu kazara doğru görünüyor, liste sona alınınca oklar 873px aşağı,
     listenin içine düşüyordu (ölçüldü 390px: ok t=2485, slayt 1349–1612).
     Çapa artık slaytın kendisi; sticky yalnız `relative`'e iniyor.
     `top:auto` ŞART: masaüstündeki `top:var(--capa-payi)` `static`'te yok
     sayılıyordu, `relative`'de sayılıyor — slaytı o kadar aşağı kaydırıp
     listenin üstüne bindirdi (ölçüldü 390px: slayt 1532-1794, liste 1702). */
  .neden__slayt{grid-column:1 / 3;grid-row:auto;position:relative;top:auto}
  /* Tek kolonda sağ dolgu anlamsız: liste tam genişlikte akmalı. */
  .ozellikler{grid-column:1 / 3;padding-right:0}
}
@media(max-width:36rem){
  /* Dolgu SİMETRİK (Codex 2026-09-09): asimetrinin gerekçesi soldaki
     kırmızı işaretti, o işaret kart yüzeyiyle birlikte kalktı. */
  .ozellik{padding:var(--s-4)}
}

/* --- kat planları --------------------------------------------------
   Referans terris'in "A Plan That Fits Your Life" bölümü (ölçüm
   değerleri index.html'deki bölüm yorumunda). Bizde 3 değil 2 kart:
   elimizdeki iki pafta TİPİK KAT planı, daire planı değil.

   ÇİFT KART IZGARAYA NASIL OTURUYOR: her kart 2 kolon. Boşluk
   `column-gap` ile DEĞİL, kartların iç padding'iyle veriliyor (sol karta
   sağdan 12, sağ karta soldan 12). Sebep .neden ile aynı: `gap`
   verilince kolon genişliği düşüp kart sınırı ızgara çizgisinden kayıyor.

   ⚠ SAYI DÜZELTMESİ (2026-09-08): "1440px ızgarada kart 720px" YANLIŞTI.
   --wrap = min(100% − 2×--pad-x, 90rem) ve --pad-x = clamp(20px,4vw,72px),
   yani 0,92·W ≥ 1440 ancak W ≥ 1565,2px'te sağlanıyor. Gerçek değerler:
     viewport 1600 → wrap 1440,0 · kolon 359,8 · kart 720
     viewport 1440 → wrap 1324,8 · kolon 331,0 · kart 662
     viewport 1280 → wrap 1177,6 · kolon 294,1 · kart 589
   4 × 360px yalnız çok geniş ekranda gerçekleşiyor. Hizalama bundan
   etkilenmiyor (kart hep 2 kolon), ama sabit piksel varsayma. */
.katplan__bas{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-5);margin-bottom:var(--s-8);
}
.katplan__bas .h2{max-width:20ch}
/* Giriş metni varken başlık bloğunun alt boşluğu iki kez sayılmasın.
   :has() desteklenmeyen tarayıcıda yalnız boşluk büyür, düzen bozulmaz. */
.katplan__bas:has(+ .katplan__giris){margin-bottom:var(--s-6)}
.katplan__giris{margin:0 0 var(--s-7);max-width:58ch}
/* ÜÇ KOLON (2026-09-08, Osman: "3'ü yan yana böyle gözükecek"). Bölümün
   dekoratif ızgarası da 3 span'a indirildi → kart sınırı çizgiye oturuyor.
   Boşluk yine `column-gap` ile DEĞİL kart iç dolgusuyla: gap verilince
   kolon genişliği düşer ve kart sınırı çizgiden kayar. Referansın kart
   aralığı 6px; burada --s-2 (8px, iki kart arası 16px) çünkü referansta
   ızgara çizgisi YOK — 6px'te çizgi kartın kenarına yapışıyordu. */
.katplan__liste{display:grid;grid-template-columns:repeat(3,1fr);column-gap:0;row-gap:var(--s-8)}
/* first/last-child DEĞİL odd/even: önceki hâli tam olarak İKİ kart
   varsayıyordu. Üçüncü bir pafta (ör. ofis planı) eklenseydi ikinci
   kart last-child olmaktan çıkıp sol padding'ini kaybeder, üçüncü kart
   ise ikinci satırın SOL kolonunda olduğu hâlde sol padding alırdı
   (Codex 2026-09-08). odd/even kolon konumuna bağlı: 2 kolonlu ızgarada
   tek sıradakiler hep solda, çiftler hep sağda. */
/* ⚠ DOLGU HER KARTTA EŞİT. Önce kolon konumuna göre veriliyordu
   (1. karta sağdan, 2.'ye iki yandan, 3.'ye soldan) ve ORTADAKİ kart
   8px daha dar kalıyordu — canlıda ölçüldü: pafta 472 / 464 / 472,
   yükseklik 589,5 / 579,5 / 589,5. Osman "eşit ve tutarlı değil" dedi,
   haklıydı. Eşit dolguda kart sınırı yine kolon sınırında, yani ızgara
   çizgisi hizası korunuyor; yalnız içerik her yandan 8px içeride. */
/* ⚠ ORTAK CSS: `.katplan__liste` daireler.html'de DE kullanılıyor ve
   orada YALNIZ İKİ kart var. Üç kolon tanımı o sayfada üçüncü kolonu
   boş bırakıp çizgi hizasını bozuyordu (Codex 2026-09-08). Kural kart
   sayısına uyarlanıyor: tam iki kart varsa iki kolon. `:has()`
   desteklenmeyen tarayıcıda eski davranışa düşer, düzen bozulmaz. */
.katplan__liste:has(.katplan__kart:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.katplan__kart{display:flex;flex-direction:column;padding-inline:var(--s-2)}

.katplan__pafta{
  /* <figure> değil <button>: pafta tıklanabilir bir kapak. Düğme
     varsayılanları (appearance, font, padding, hizalama) sıfırlanıyor. */
  appearance:none;font:inherit;color:inherit;padding:0;width:100%;
  display:block;text-align:left;cursor:zoom-in;
  position:relative;margin:0;overflow:hidden;
  /* Kenarlık YOK (Osman 2026-09-09). Kutuyu --plan-zemin (#EBEBEB)
     zaten tanımlıyor; kenarlık zeminin üstüne ikinci bir sınır
     çiziyordu. */
  border-radius:var(--r-yuzey);border:0;
  /* Zemin --acik DEĞİL --plan-zemin (#EBEBEB, Osman 2026-09-08): pafta
     kendisi beyaz zeminli bir çizim, beyaz kutuda kenarı kayboluyordu.
     Dolgu %10 → pafta kutunun %80'ini kaplıyor ("%20 kadar ufalt");
     box-sizing:border-box global olduğu için kutu büyümüyor. Rozet ve
     "Büyüt" ipucu absolute konumlu, dolgudan etkilenmiyor. */
  background:var(--plan-zemin);
  padding:10%;
}
/* aspect-ratio kaynağın gerçek oranı (896×1200 = 3:4) — CLS yok.
   Referansın kutusu 4:5; 3:4 pafta oraya konsa yanlardan kırpılırdı ve
   kat planında kırpma bilgi kaybıdır (Codex 5. turda wellness görselinde
   %10,71 kırpma bu yüzden bulgu olmuştu).
   object-fit:contain: pafta kırpılmıyor, çünkü sağ alttaki eser sahibi
   damgası ve sol kenardaki başlık yazısı kadrajın parçası. */
/* Kutu KARE. Referansın oranı 4:5 (472×590 ölçüldü) ve 3:4 pafta ona
   konunca kutu yüksekliği 590px'te kalıyordu — kart toplam 819,5px,
   Osman'ın ekranına sığmıyordu. Kare kutuda kart ~700px'e iniyor.
   Pafta `contain` ile yanlarda simetrik pay bırakıyor, kırpma YOK:
   bu bir KAPAK, okuma tam ekranda (bkz. plan görüntüleyici). */
.katplan__pafta img{width:100%;aspect-ratio:1 / 1;object-fit:contain}
/* Osman 2026-09-08: "bu tarz şeylerde hep main font kullanılsın" —
   kart yüzeyindeki mono etiketler gövde fontuna alınmıştı; 2026-09-09'da
   karar tüm siteye yayıldı ve mono ailesi tamamen kaldırıldı.
   Referansın çipleri mono ama bu bilinçli sapma: proje sahibinin
   yazı tercihi referans sadakatinin önünde. */

/* Gövde referansta ayrı bir kutu: açık gri zemin, 24px dolgu, kendi
   köşe yuvarlaklığı (ölçüldü: #FAFAFA / 24px / 6px). Bizde zemin
   --tas-2 (#F6F7F8), köşe --r-yuzey: sayfadaki bütün yüzeyler tek
   token'dan besleniyor, tek kartı ayrıksı yapmak dili bozardı. */
/* Kartlar ızgara hücresinde zaten eşit yükseklikte, ama gövdeler
   içeriğe göre büyüyordu: 3+1 kartında tek tip satırı var, diğerlerinde
   iki → gövde kutuları farklı boyda bitiyordu (Osman: "eşit ve tutarlı
   değil"). Kart bir sütun akışına alınıp gövdeye `flex:1` verilince
   üçü de hücrenin tabanına kadar iniyor. */
/* Osman 2026-09-09, ekran görüntüsü: "bu kısımdaki tasarım düzeni güzel
   değil". ÖLÇÜLEN üç kusur:
   (1) Başlık solda, "TESLİM / 2026 Son Çeyrek" sağda ve İKİ SATIRDI —
       başlık tek satır olunca ikisi dikeyde kayık duruyordu.
   (2) Kartların içerik uzunluğu farklı (2 tip / 1 tip), bu yüzden dip
       satırı her kartta BAŞKA yükseklikte bitiyordu.
   (3) Teslim bilgisi başlıkla yarışıyordu; oysa o bir künye verisi.
   Çözüm: teslim ÜSTTEN DİBE indi, dip satırı `margin-top:auto` ile
   kartın altına sabitlendi → üç kartın dibi aynı hizada. Izgara değil
   FLEX: `align-content:start` ile ızgarada "kalanı doldur" davranışı
   yok, dolayısıyla dip sabitlenemiyordu. */
.katplan__alt{
  flex:1;
  margin-top:var(--s-2);
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-5);
  background:var(--tas-2);border-radius:var(--r-yuzey);
}
.katplan__dip{
  margin-top:auto;                 /* üç kartın dibi aynı hizada */
  padding-top:var(--s-4);
  border-top:1px solid var(--cizgi);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;
}
/* Referansın üst satırı: solda ad, sağda fiyat bloğu (bizde teslim).
   Ad altındaki "TİPİK KAT PLANI" etiketi KALDIRILDI: kaynağı yoktu
   (Osman 2026-09-08 kuralı) ve başlık zaten "… Kat Planı" diyor. */
/* Başlık + tip rozeti (Osman 2026-09-09: "sağ üstteki konut veya ofis
   badge'i yok"). Rozet mevcut `.cip` dilinde — yeni bir etiket dili
   kurulmadı; proje.html'deki ticari çipleriyle aynı. */
.katplan__ust{display:block}   /* rozet pafta görseline taşındı, yalnız başlık kaldı */
/* Rozet GÖRSELİN İÇİNDE, sağ üstte (Osman 2026-09-09: "bu badge'ler
   resmin içinde sağ üstte konumlanmalı"). Pafta zemini açık (#EBEBEB) ve
   plan çizimleri beyaz — `.cip`in şeffaf zemini + gri metni orada
   okunmazdı. Kendi koyu zeminini alıyor; aynı dil `.katplan__buyut`ta
   zaten var (rgba(28,29,31,.86) + açık metin). */
/* ⚠ ÖZGÜLLÜK: `.cip` (0,1,0) bu kuraldan SONRA tanımlı, yani eşit
   özgüllükte olan `.katplan__tip` rengini EZİYORDU — metin gri
   (#6B6E71) kalıyor ve koyu zemin üstünde 2,22:1 ile okunmuyordu
   (Osman gördü, ölçümüm de doğruladı). `.cip.katplan__tip` (0,2,0)
   ile kesin kazanıyor. Metin BEYAZ: pafta zemini (#EBEBEB) üstünde bileşik 11,41:1
   (Codex bağımsız hesabı 11,4119 ile doğruladı). */
.cip.katplan__tip{
  position:absolute;top:var(--s-4);right:var(--s-4);z-index:2;
  border:0;background:rgba(28,29,31,.86);color:#fff;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-hap);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* Referansta kart başına TEK tip olduğu için tek satır çip yetiyor.
   Bizim paftalar tipik kat: bir katta iki tip, her birinin kendi m²'si
   ve kat aralığı var. Tek satıra sıkıştırmak hangi değerin hangi tipe
   ait olduğunu belirsizleştirirdi → tip başına bir satır.
   Ayırıcı çizgi referansın divider'ı (1px, üstünde 16px boşluk). */
.katplan__tipler{
  list-style:none;margin:0;padding:var(--s-4) 0 0;
  display:grid;gap:var(--s-3);
  border-top:1px solid var(--cizgi);
}
/* Satırlar IZGARA: mono kalkınca `min-width` ile hizalama tutmuyordu
   (orantılı yazıda "Brüt 65" ile "Brüt 135" farklı genişlikte).
   Dört sabit kolon + `tabular-nums` ile rakamlar alt alta hizalı.
   Ofis satırlarında son iki hücre yok — ızgara boş bırakır, kayma olmaz. */
.katplan__tipler li{
  display:grid;grid-template-columns:2.6em repeat(3,auto);
  justify-content:start;align-items:baseline;
  gap:var(--s-2) var(--s-4);
  font-size:var(--fs-sm);font-weight:var(--fw-govde);
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.katplan__tipler b{
  font-weight:var(--fw-baslik);color:var(--deep);
}
/* DAR EKRAN (Osman 2026-09-10: "mobilde şu hizalama sorunu oluşmuş").
   Dört sabit kolon dar kartta sığmıyor: ölçüldü 390px'te satır 248px,
   her hücre 2 satıra sarıyordu ("Kat 3 –" / "12"), 360px'te 3 satıra.
   Izgara bırakılıp SARAN dizilime geçiliyor — hücrenin kendisi artık
   bölünmüyor (`nowrap`), sığmayan hücre komple alt satıra iniyor.
   Tip (`b`) kendi satırında: alt satır sol kenardan başladığı için
   aynı satırda kalsaydı hizası bozulurdu. */
@media(max-width:48rem){
  .katplan__tipler li{
    display:flex;flex-wrap:wrap;
    column-gap:var(--s-4);row-gap:var(--s-1);
  }
  .katplan__tipler li b{flex:0 0 100%}
  .katplan__tipler li span{white-space:nowrap}
}
.katplan__ortak{
  margin:0;font-size:var(--fs-sm);line-height:var(--lh-govde);color:var(--ink-soft);
  flex:1 1 16ch;
}
/* KART BAŞLIĞI TEK ÖLÇÜDE (Osman 2026-09-09: "bu kısımdaki font
   büyüklüğü tipi neyse diğer section'larımda da böyle olsun").
   --fs-lg (17px) → --fs-xl (27,2px): ölçüt kartı, özellik kartı ve
   bu üç kart aynı rolü taşıyor. Satır yüksekliği de başlık rolüne
   göre açıkça veriliyor; --lh-kart (1.35) 17px için ayarlıydı. */
.katplan__ad{
  margin:0;
  font-size:var(--fs-xl);font-weight:var(--fw-orta);line-height:1.15;
  letter-spacing:-.02em;color:var(--deep);
}
.cipler{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.cip{
  padding:var(--s-1) var(--s-3);border:1px solid var(--cizgi);border-radius:var(--r-yuzey);
  /* .68rem = 10,88px idi: VERSAL + Türkçe aksan (İ, Ş, Ğ) bu boyutta
     okunmuyordu (ölçüldü 2026-09-08). Referans çipi 12px. */
  font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  line-height:1.5;letter-spacing:var(--ls-etiket);text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap;
}
/* Referansta bu köşede fiyat var ("From $3,200/mo"). Fiyat politikası
   müşteriden gelmedi, m² yayımlanamıyor → köşe boş bırakılmıyor,
   çelişkisiz tek olguyla dolduruluyor: teslim dönemi. */
/* Osman 2026-09-09: "teslim'in altına br ekle, teslimi sağa yanaştır".
   Etiket ile değer artık alt alta ve blok sağa yaslı. */
.katplan__teslim{
  flex:none;margin:0;margin-left:auto;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.katplan__teslim span{
  font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.katplan__teslim b{font-size:var(--fs-lg);font-weight:var(--fw-baslik);line-height:var(--lh-kart);letter-spacing:-.01em;color:var(--deep)}

/* Üçüncü buton biçimi: dolu (birincil eylem) ve açık (koyu zemin) zaten
   vardı; bölüm başlığındaki ikincil eylem için çizgili olan eksikti. */
.btn-cizgi{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 1px var(--cizgi)}
.btn-cizgi .ok{background:rgba(28,29,31,.06)}
.btn-cizgi:hover{background:var(--acik);box-shadow:inset 0 0 0 1px rgba(28,29,31,.24)}

/* --- olanaklar ----------------------------------------------------- */
/* --- olanaklar karuseli ---------------------------------------------
   Osman 2026-09-08 archscale'ın "Core Values" bölümünü referans verdi.
   O karusel 1800px'te ÖLÇÜLDÜ: kart 500×500 · radius 16px ·
   padding 40px 32px · kart aralığı 516−500 = 16px · oklar 48×48 tam
   yuvarlak, başlık satırının sağ ucunda, aralarında 8px.
   Boşluk token'ımız birebir tutuyor (--s-4 16px). Yarıçapta artık
   SAPIYORUZ: archscale 16px, biz --r-yuzey (2px) — luxterra kararı
   (2026-09-09) archscale referansının önüne geçti.

   MEKANİK: JS karuseli DEĞİL, native yatay kaydırma + scroll-snap.
   Sebep bu projede yaşandı — tower.js bir kez çöküp iç sayfaları
   TAMAMEN boşaltmıştı. Native kaydırmada JS ölse bile dokuz kart
   okunabilir kalıyor, klavye ve dokunma kendiliğinden çalışıyor;
   oklar yalnız bir kolaylık katmanı. */
.olanaklar{
  /* Kart genişliği: 1440px'te wrap 1324,8 → 3 kart + 4. karttan pay
     görünüyor (3×400 + 3×16 = 1248, kalan 77px "devamı var" sinyali).
     768px'te 2 kart, 390px'te 1 kart + pay. */
  /* `<ul>` idi: UA'nın `padding-left:40px` + madde işareti varsayılanı
     sıfırlanmamıştı (Codex 2026-09-08). Sonucu ölçülmüştü ama yanlış
     okumuştum — ilk kart ızgaradan 40px İÇERİDE başlıyor ve şerit
     `scrollLeft:40` konumundan açılıyordu. Ölçüm doğrulaması:
     9×400 + 8×16 + 40 = 3768 = ölçülen scrollWidth. */
  list-style:none;margin:0;padding-left:0;
  display:grid;grid-auto-flow:column;
  /* `minmax(0,…)` KULLANILMAZ: alt sınır 0 olduğu için ızgara dokuz
     kartı kabın genişliğine sıkıştırıyordu (ölçüldü: kart 141px,
     scrollWidth == clientWidth, yani taşma ve kaydırma hiç oluşmadı).
     Kesin ölçü verilince şerit taşıyor ve kaydırma doğuyor. */
  grid-auto-columns:clamp(260px,28vw,400px);
  gap:var(--s-4);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* SAĞDA IZGARADAN TAŞIYOR (Osman 2026-09-08: "en sağa uzamalı, gride
     bağlı kalmayabilir; solda gride bağlı kalmalı").
     `50vw − 50%` = wrap'in sağ kenarı ile ekranın sağ kenarı arasındaki
     boşluk (50% burada wrap'in yarısı). Negatif marj şeridi oraya
     uzatıyor; sol kenar `.wrap` hizasında KALIYOR çünkü sola dokunulmuyor.
     ⚠ `100vw` dikey kaydırma çubuğunu DA sayar; `html{overflow-x:clip}`
     (satır 277) bundan doğacak birkaç pikseli yatay çubuğa çevirmiyor.
     Şeridin sonunda kart ekran kenarına yapışmasın diye eşit bir
     `padding-right` var — kaydırmanın bitiş payı da o. */
  --tasma-sag:calc(50vw - 50%);
  margin-right:calc(-1 * var(--tasma-sag));
  padding-right:var(--tasma-sag);
  /* Kart gölgesi kırpılmasın diye alt pay; şerit görsel olarak gizli
     ama kaydırma erişilebilir kalıyor. */
  padding-bottom:var(--s-2);
  scrollbar-width:none;
}
.olanaklar::-webkit-scrollbar{display:none}

/* IZGARA VARYANTI — yalnız olanaklar.html'de (Osman 2026-09-09:
   "iç sayfalarda mesela olanaklarda carousel değil de onlar normal grid
   olabilirdi çünkü o sayfanın odak noktası o"). Anasayfadaki şerit
   DEĞİŞMİYOR: orada olanaklar bir vitrin, burada sayfanın konusu.
   Şerit kurallarının hepsi tek tek geri alınıyor — üstüne yığmak
   yerine sıfırlanıyor ki iki düzen birbirine karışmasın. */
.olanaklar--izgara{
  grid-auto-flow:row;
  /* ÜÇERLİ (Osman 2026-09-09). auto-fill 1440px'te dört kolon veriyordu;
     dokuz kart 4+4+1 diziliyor ve son satırda tek kart kalıyordu.
     Üç kolonda 3+3+3 tam oturuyor — kart sayısı ızgarayı belirliyor. */
  grid-template-columns:repeat(3,1fr);
  grid-auto-columns:auto;
  overflow-x:visible;
  scroll-snap-type:none;
  margin-right:0;padding-right:0;padding-bottom:0;
  gap:var(--s-5);
}
.olanaklar--izgara .olanak{scroll-snap-align:none}
@media(max-width:64rem){.olanaklar--izgara{grid-template-columns:repeat(2,1fr)}}
@media(max-width:38rem){.olanaklar--izgara{grid-template-columns:1fr}}
/* Osman 2026-09-09: "bu kartlar tasarım olarak çok eski, daha
   profesyonel bir hale getirmelisin".
   ESKİ görünen ne olduğu tek tek ayrıldı, hepsi kaldırıldı:
   · kenarlık + kutu gölgesi + `translateY(-3px)` hover → 2015 kart deseni
   · kartın kendisinin zıplaması → premium sitelerde kart DURUR, GÖRSEL
     hareket eder (galeri bileşeninde de aynı dil kuruldu)
   · üç metin katmanı aynı ritimde → hiyerarşi düzleşiyordu
   Yeni: çerçevesiz yüzey, görselde hover yakınlaşması, başlığın önünde
   ince bir sıra numarası (CSS sayacı — HTML'e numara yazılmadı, kart
   sırası değişirse numara kendiliğinden düzelir). */

/* REFERANS DESENİ (Osman 2026-09-09): numara sol üstte, küçük görsel
   sağ üstte, altta ad + metin. Görsel ARTIK TAM KANAMA DEĞİL, o yüzden
   kartın kendi iç dolgusu var; `overflow:hidden` görselin kendi
   yarıçapı için yeterli olmadığından görsele ayrı yarıçap veriliyor. */
.olanak{
  scroll-snap-align:start;
  background:var(--acik);border-radius:var(--r-yuzey);
  padding:clamp(var(--s-5),2.2vw,var(--s-6));
  display:flex;flex-direction:column;gap:var(--s-5);
}
.olanak__ust{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
}
/* Sıra numarası dekoratif: sıra bilgisini <ul>/<li> zaten taşıyor. */
.olanak__no{
  font-size:var(--fs-lg);font-weight:var(--fw-orta);
  color:var(--ink-soft);letter-spacing:.02em;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;flex:none;
}
/* Haber kartı `.olanak` bileşenini AYNEN kullanıyor (haberler.html);
   ikinci bir kart dili açılmadı. Tek fark: sol üstteki ayırt edici
   numara değil TARİH — `.olanak__no` ile aynı ölçü ve ağırlık, yalnız
   `white-space` eklendi ("4 Eylül 2026" dar kolonda kırılmasın). */
.haber__tarih{
  font-size:var(--fs-lg);font-weight:var(--fw-orta);
  color:var(--ink-soft);letter-spacing:.02em;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;flex:none;white-space:nowrap;
  display:block;
}
/* Kaynak bağlantısı gövdenin DİBİNE yaslanıyor: özet uzunlukları
   farklı, bağlantılar hizasız duruyordu. */
.haber .olanak__govde{display:flex;flex-direction:column;gap:var(--s-3);height:100%}
.haber .lnk{margin-top:auto;padding-top:var(--s-4);align-self:flex-start}
/* Haber kartı YATAY: solda içerik, sağda görsel (Osman 2026-09-09).
   Liste görünümü olduğu için ızgara TEK kolon — kart genişleyince hem
   metin rahat okunuyor hem gazete grafiği yeterli boyda duruyor.
   `minmax(0,1fr)`: `1fr`in örtük `min-width:auto`su içerik genişliğini
   dayatıyor ve 768px'te kartı 362px'e şişirip belgeyi 10px taşırıyordu
   (ölçüldü). Sıfır minimum bunu kapatıyor. */
.olanaklar--haber{grid-template-columns:1fr}
.haber__ic{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,22vw,300px);
  gap:var(--s-6);align-items:start;
}
/* Dar ekranda görsel metnin ALTINA değil ÜSTÜNE geçmiyor: sıra DOM'da
   içerik önce; tek kolonda da öyle kalıyor, görsel kapanışı yapıyor. */
@media(max-width:38rem){.haber__ic{grid-template-columns:1fr}}
/* Haber görselleri olanak kartının 4:3 kutusunda üstten-alttan
   kırpılıyor, gazete grafiğinin başlığı kesiliyordu ("TEMELİ
   ATILDI"nın üstü gitti).
   ⚠ ORAN: dört görselin üçü 866×450 = 1,924:1, biri 650×371 =
   1,752:1 — hiçbiri 16:9 (1,778) DEĞİL, "kaynak oranı korunuyor"
   demek yanlıştı (Codex 2026-09-09). `auto` ile kutu görselin kendi
   oranına oturuyor, kırpma sıfır; dört kartın görsel yüksekliği
   birbirinden ~%9 ayrışıyor, metin kolonu zaten daha uzun olduğu
   için kart yüksekliğini o belirliyor. */
.haber .olanak__gorsel{aspect-ratio:auto;width:100%;height:auto}
/* `margin-bottom` YOK: gövde flex ve `gap` zaten 12px veriyordu,
   ikisi toplanıp 28px üretiyordu — flex'te margin collapse olmaz
   (Codex 2026-09-09). Ayrım tek kaynaktan. */
.haber__kaynak{
  margin:var(--s-7) 0 0;font-size:var(--fs-sm);color:var(--ink-soft);
}

.olanak .olanak__gorsel{transition:transform .7s var(--ease)}
.olanak:hover .olanak__gorsel,
.olanak:focus-within .olanak__gorsel{transform:scale(1.04)}
:root[data-az-hareket="1"] .olanak .olanak__gorsel{transition:none}
  :root[data-az-hareket="1"] .olanak:hover .olanak__gorsel{transform:none}
/* Görsel kartın ÜST kenarına oturuyor, üstünde yazı YOK (Osman kararı
   2026-09-08 + müdür notu: "görsel üzerinde uzun büyük harfli metinler
   kaldırılsın"). Oran 4:3 çünkü dokuz olanak görselinin YEDİSİ
   1200×896 (1,339) — 4:3 kutuda kırpma %0,44. */
.olanak__gorsel{
  display:block;flex:none;
  /* Osman 2026-09-09: "görsel biraz daha sol tarafa doğru genişlemeli". */
  width:clamp(140px,19vw,224px);height:auto;aspect-ratio:4 / 3;object-fit:cover;
  border-radius:var(--r-yuzey);background:var(--gok);
}
/* `.olanak__gorsel--yok` 2026-09-09'da SİLİNDİ: Sanat Alanları'nın
   görseli artık var (assets/img/olanak/sanat-alani.webp) ve kural
   hiçbir sayfada kullanılmıyordu (Codex bulgusu). */
/* Dolgu ARTIK KARTTA (2026-09-09 referans deseni): görsel tam kanama
   olmaktan çıkıp sağ üste küçüldüğü için kartın kendi iç dolgusu var.
   Gövdenin ayrı padding'i ikinci bir kaynak olurdu — boşluğu tek
   kaynak versin. Eski gerekçe (metin kenara yapışıyordu) kart
   dolgusuyla zaten karşılanıyor. */
.olanak__govde{
  display:flex;flex-direction:column;gap:var(--s-3);
}
.olanak__ad{
  font-family:var(--ff-body);font-weight:var(--fw-orta);font-size:var(--fs-xl);
  line-height:1.15;
  letter-spacing:-.02em;margin:0;color:var(--deep);text-wrap:balance;
}
/* Sıra numarası 2026-09-09'da pseudo-element'ten HTML'e taşındı
   (referans deseni: numara görselle aynı satırda, sol üstte). Eski
   `.olanak__ad::before` + counter mekanizması SİLİNDİ — üstte span,
   altta pseudo-element ile ÇİFT numara basıyordu (Osman gördü). */
/* Müdürün her olanağa yazdığı tek cümlelik vurgu. Serif italik: gövde
   metninden ayrılsın ama başlıkla yarışmasın. */
.olanak__ozet{
  margin:0;font-family:var(--ff-script);font-style:italic;font-weight:600;
  font-size:var(--fs-sm);line-height:1.45;color:var(--deep);
}
.olanak .metin{margin:0;font-size:var(--fs-sm)}

/* Başlık satırı: solda metin, sağda oklar (archscale deseni). */
/* Oklar SAĞ IZGARA KENARINA dayanıyor (Osman 2026-09-08).
   `.bolum__bas` 56ch ile sınırlı; o kısıt burada İPTAL edilip METNE
   taşınıyor. Kısıtı sadece kaldırsaydım başlık ve paragraf da bütün
   genişliğe yayılır, satır uzunluğu okunabilir ölçünün üstüne çıkardı —
   yani ölçü kaybolmuyor, doğru öğeye veriliyor. */
.bolum__bas.olanak__bas{
  max-width:none;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s-6);
}
.olanak__giris{max-width:56ch}
.olanak__oklar{display:flex;gap:var(--s-2)}
.olanak__ok{
  width:48px;height:48px;display:grid;place-items:center;padding:0;
  border:1px solid var(--cizgi);border-radius:var(--r-hap);
  background:var(--acik);color:var(--deep);cursor:pointer;
  transition:background var(--duration-fast) var(--ease-move),
             border-color var(--duration-fast) var(--ease-move);
}
.olanak__ok:hover{border-color:var(--vurgu-cizgi)}
.olanak__ok:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
/* Şeridin ucundaki ok işlevsiz kalınca sönümleniyor — tıklanabilir
   görünüp hiçbir şey yapmaması yanlış geri bildirim olurdu. */
.olanak__ok[disabled]{opacity:.35;cursor:default}
.olanak__ok svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Dar ekranda oklar başlığın ALTINA iniyor: 390px'te 1fr+auto düzeninde
   başlık 2 kelimeye sıkışıyordu. Kaydırma zaten parmakla yapılıyor. */
@media(max-width:48rem){
  /* `.bolum__bas.olanak__bas` (0,2,0) bu kuralı (0,1,0) yeniyordu:
     mobilde `1fr auto` ve kolon aralığı kalıyordu (Codex 2026-09-09).
     Özgüllük eşitlendi. */
  .bolum__bas.olanak__bas{grid-template-columns:1fr;column-gap:0}
  .olanak__oklar{display:none}
}

/* --- plan görüntüleyici ---------------------------------------------
   Karttaki pafta bir KAPAK; okuma tam ekranda. Gerekçe ölçüldü: pafta
   kutusu 1440px'te 650px, 768px'te 341px, 360px'te ~148px. Sekiz
   daireli bir kat planı 148px'te bilgi değil gürültü.
   <dialog> + showModal() seçildi çünkü odak tuzağını, Esc ile kapanmayı
   ve arka planın inert olmasını TARAYICI yapıyor — elle yazılan odak
   tuzağı bu projede bir kez asılı kalmıştı. */
.katplan__buyut{
  position:absolute;left:var(--s-4);bottom:var(--s-4);
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-hap);
  background:rgba(28,29,31,.86);color:var(--tas-2);
  /* Mono KALDIRILDI: "kart yüzeyinde mono kalmadı" iddiam eksikti,
     hover/focus'ta görünen bu ipucu atlanmıştı (Codex 2026-09-08). */
  font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:.05em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.katplan__buyut svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* :focus-visible de dahil — ipucu yalnız fareyle görünürse klavye
   kullanıcısı paftanın tıklanabilir olduğunu hiç öğrenemez. */
.katplan__pafta:hover .katplan__buyut,
.katplan__pafta:focus-visible .katplan__buyut{opacity:1;transform:none}

/* Olanak kartındaki görsel de tıklanabilir bir kapak (Osman 2026-09-09:
   "bu kartlardaki görsellere tıklayınca lightbox açılmalı"). Kat planı
   paftasının stili KOPYALANMIYOR — o kutu kat planına özel (1/1 oran,
   contain, --plan-zemin). Buradaki düğme yalnız kendi varsayılanlarını
   sıfırlıyor; ölçü ve köşe hâlâ `.olanak__gorsel`in.
   `overflow:hidden` + köşe: hover'daki scale(1.04) düğmenin dışına
   taşmasın diye — görselin kendi border-radius'u scale altında kırpma
   yapmıyordu. */
.olanak__pafta{
  appearance:none;font:inherit;color:inherit;padding:0;border:0;background:none;
  display:block;flex:none;cursor:zoom-in;
  position:relative;overflow:hidden;border-radius:var(--r-yuzey);
  /* GÖRSEL/KART ORANI SABİT (Osman 2026-09-10: "görsel büyüklük, geniş
     alan eşit olsun"). Ölçüm: karusel kartı 400px/görsel 224px = %56;
     ızgara kartı 464px/görsel 224px = %48,3; mobilde fark daha büyüktü
     (%53,8 → %40), çünkü görsel `19vw`ye bağlıydı ve KABIN genişliğini
     hiç görmüyordu. Artık kapak, kartın iç genişliğinin yüzdesi:
     336px içerik kutusunda 224px = %66,67, yani karusel kartı BİREBİR
     korunuyor, ızgara kartı ona hizalanıyor.
     `cqi` denendi ve BIRAKILDI (Codex): container content-box'ı ölçtüğü
     için 400px kartta 224 değil ~188px veriyor, ayrıca gereksiz
     containment açıyordu. */
  width:66.67%;
}
.olanak__pafta .olanak__gorsel{width:100%}
.olanak__pafta:hover .katplan__buyut,
.olanak__pafta:focus-visible .katplan__buyut{opacity:1;transform:none}

/* Osman 2026-09-09: "büyütünce görsel boşluklar kalıyor, odak nokta
   görsel olmalı, açılış kapanış smooth olsun".
   ÜÇ DEĞİŞİKLİK:
   (1) Sabit `width` KALDIRILDI. Diyalog artık içeriğine oturuyor
       (`width:max-content`) → görselin kenarında zemin bandı kalmıyor.
   (2) Zemin `--tas-2` DEĞİL şeffaf: açık gri kutu, koyu perdede
       görselin etrafında görünür bir çerçeve üretiyordu.
   (3) Açılış/kapanış geçişi: `@starting-style` + `allow-discrete`
       ile `display` geçişi de animasyonlanıyor — bunlar olmadan
       <dialog> anında belirir. Desteklemeyen tarayıcıda geçiş yok,
       işlev aynı (aşamalı iyileştirme). */
/* 🔄 2026-09-10 — (2) MADDESİ GERİ ALINDI (Osman: "lightbox'da açıldığında
   sıfıra sıfıra değil içinde padding olacak şekilde dengeli sunulmalı").
   Eski gerekçe "açık gri kutu çerçeve üretiyordu" idi; şikâyet o gün
   EŞİTSİZ banttı (object-fit:contain kare kutuda 207px tek yanlı boşluk
   bırakıyordu), çepeçevre eşit pay değil. Bant `width:auto` ile zaten
   çözülmüştü. Şimdi kasıtlı, her yanı eşit paspartu var: zemin BEYAZ
   (--acik) seçildi, açık gri değil — kat planları beyaz zeminli olduğu
   için gri kutu paftanın kendi kenarında ikinci bir çizgi gösteriyordu.
   Beyaz, koyu perdede "kâğıt" gibi durur, fotoğraflarda paspartu olur. */
.planiz{
  width:max-content;max-width:min(100vw - 2rem,1400px);
  /* `vh` ÖNCE, `dvh` SONRA: dvh'yi tanımayan tarayıcı ilkini kullanır,
     tanıyan ikinciyle ezer. Tek başına dvh yazılırsa eski Safari
     bildirimi tümden atıyor ve yükseklik sınırı KAYBOLUYOR (Codex
     2026-09-10 işaret etti). */
  max-height:calc(100vh - 2rem);
  max-height:calc(100dvh - 2rem);
  padding:var(--s-5);border:0;border-radius:var(--r-yuzey);background:var(--acik);
  overflow:hidden;
  opacity:0;transform:scale(.97);
  transition:opacity var(--duration-base,320ms) var(--ease),
             transform var(--duration-base,320ms) var(--ease),
             overlay var(--duration-base,320ms) allow-discrete,
             display var(--duration-base,320ms) allow-discrete;
}
.planiz[open]{opacity:1;transform:none}
@starting-style{ .planiz[open]{opacity:0;transform:scale(.97)} }
.planiz::backdrop{
  background:rgba(19,20,22,.88);backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity var(--duration-base,320ms) var(--ease),
             overlay var(--duration-base,320ms) allow-discrete,
             display var(--duration-base,320ms) allow-discrete;
}
.planiz[open]::backdrop{opacity:1}
@starting-style{ .planiz[open]::backdrop{opacity:0} }
:root[data-az-hareket="1"] .planiz,
:root[data-az-hareket="1"] .planiz::backdrop{transition-duration:1ms}
  :root[data-az-hareket="1"] .planiz{transform:none}
.planiz img{
  /* width:100% DEĞİL: kare pafta yüksekliğe göre kısıtlanınca kutu
     802×595 kalıyor ve object-fit:contain 207px'i beyaz banda çeviriyordu
     (ölçüldü 2026-09-08). width:auto ile kutu görselin kendisine oturuyor,
     bant kalmıyor, diyalog da paftanın gerçek boyutunda duruyor. */
  display:block;margin-inline:auto;
  width:auto;max-width:100%;height:auto;
  /* 8rem → 4rem: başlık şeridi galeride yok, o payı görsele veriyoruz.
     4rem → 7,5rem (2026-09-10): kutuya çepeçevre 1,5rem paspartu girdi;
     box-sizing:border-box olduğu için o pay diyalogun max-height'ından
     düşülmezse görsel kutuyu taşırıp kırpılırdı (2×1,5rem = 3rem).
     Önce 7rem yazdım, Codex eksik olduğunu gösterdi: başlık şeridi
     1rem üst dolgu + 1px çizgi + ~1,3rem metin ≈ 2,3rem istiyor, bana
     kalan 2rem'di → yüksekliğe dayanan ekranlarda `overflow:hidden`
     son 5-6px'i kesiyordu. 2rem + 3rem + 2,5rem = 7,5rem. */
  max-height:calc(100vh - 7.5rem);
  max-height:calc(100dvh - 7.5rem);
  border-radius:var(--r-yuzey);
  /* Dar ekranda kullanıcı paftayı iki parmakla büyütebilsin diye
     kaydırma serbest — resmin kendi çözünürlüğü 1400px. */
  touch-action:pan-x pan-y pinch-zoom;
}
/* Boş başlık yer KAPLAMAZ: galeride bilinçli olarak detay verilmiyor,
   kat planında veriliyor. Aynı bileşen iki bağlamda. */
.planiz__ad:empty{display:none}
.planiz__ad{
  /* Yatay dolgu 0: paspartu (2026-09-10) zaten diyalogdan geliyor,
     ikisi toplanınca başlık görselden 48px içeride başlıyordu.
     Boşluğu TEK kaynak versin — üstteki pay ayırıcı çizgi için. */
  margin:0;padding:var(--s-4) 0 0;border-top:1px solid var(--cizgi);
  font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);text-transform:uppercase;color:var(--ink-soft);
}
.planiz__kapat{
  position:absolute;top:var(--s-3);right:var(--s-3);z-index:1;
  width:var(--dokunma);height:var(--dokunma);
  display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:var(--r-hap);
  background:rgba(28,29,31,.82);color:var(--tas-2);
}
.planiz__kapat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.planiz__kapat:hover{background:var(--deep)}

/* --- görüntüleyici gezinmesi (2026-09-09) ---------------------------
   Osman: "görsele tıkladığında lightbox'da diğer görsellere geçiş
   yapılabilme özelliği". Düğmeler tower.js tarafından ekleniyor
   (markup üç sayfada tekrar ediyor, dördüncü kopya istemedik) —
   burada yalnız görünümleri var. Kapat düğmesiyle aynı dil: hap
   yarıçap, aynı koyu şeffaf zemin, aynı dokunma hedefi. */
.planiz__ok{
  position:absolute;top:50%;translate:0 -50%;z-index:1;
  width:var(--dokunma);height:var(--dokunma);
  display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:var(--r-hap);
  background:rgba(28,29,31,.82);color:var(--tas-2);
}
.planiz__ok--onceki{left:var(--s-3)}
.planiz__ok--sonraki{right:var(--s-3)}
/* ⚠ `hidden` TEK BAŞINA YETMEZ: yukarıdaki `display:grid` / `.planiz__sayac`
   yazar stilleri, `[hidden]`ın UA varsayılanı olan `display:none`ı ezer
   (bu projede `.mobil-menu`de birebir aynı tuzak yaşandı). Galeri
   gruplaması ok/sayaç görünürlüğünü `hidden` ile açıp kapattığı için
   kural açıkça yazılıyor. */
.planiz__ok[hidden],.planiz__sayac[hidden]{display:none}
.planiz__ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.planiz__ok:hover{background:var(--deep)}
/* Yalnız ekran okuyucunun gördüğü metin. `display:none` OLMAZ —
   o, içeriği erişilebilirlik ağacından da siler. */
.yalniz-okur{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.planiz__sayac{
  position:absolute;left:50%;bottom:var(--s-3);translate:-50% 0;z-index:1;
  margin:0;padding:.35rem .8rem;border-radius:var(--r-hap);
  background:rgba(28,29,31,.82);color:var(--tas-2);
  font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);font-variant-numeric:tabular-nums;
}
/* Dar ekranda oklar görselin ortasını kapatmasın: kenara yapışır,
   küçülür. 44 → 38px; WCAG 2.2 AA "Target Size (Minimum)" eşiği
   24×24 CSS px olduğu için sınırın hâlâ epey üstünde. */
@media(max-width:30rem){
  .planiz__ok{width:38px;height:38px}
  .planiz__ok--onceki{left:6px}
  .planiz__ok--sonraki{right:6px}
  .planiz__ok svg{width:17px;height:17px}
}

/* --- iç sayfa başlığı ----------------------------------------------
   Anasayfanın hero'su tam ekran ve videolu. İç sayfalar aynı dili SAKİN
   sürdürüyor: aynı rozet, aynı h1 ölçeği, aynı ızgara — video yok,
   yükseklik içerik kadar. Üst boşluk --pay-ustbar: yüzen bar sabit
   olduğu için içerik onun altından başlamalı, yoksa başlık barın
   arkasında kalır. */
.ic-bas{position:relative;padding-top:var(--pay-ustbar);padding-bottom:var(--bosluk-bolum)}
/* İç sayfa başlığının ALT dolgusu ile ardındaki bölümün ÜST dolgusu üst
   üste biniyordu — galeri sayfasında hero metniyle ızgara arası 192px
   ölçüldü (Osman: "başlıktan sonra galeri alanıyla çok fazla boşluk
   var"). İlk bölüm başlığa yaklaşıyor; başlığın kendi alt dolgusu zaten
   ayrımı veriyor.
   İSTİSNA yalnız zemin RENGİ değişen bölüm: `--tas` (gri arka plan)
   sıfır dolguyla içeriği kendi kenarına yapıştırırdı, orada bir basamak
   boşluk kalıyor.
   ⚠ `--film` BURADAN 2026-09-09'da ÇIKARILDI: istisna onu da kapsıyordu
   ama `.bolum--film` hiçbir zaman arka plan rengi almadı (grep: proje.html
   dışında hiç kullanılmıyor, `background` kuralı yok) — `.ic-bas` ile aynı
   zeminde duruyor, yalnız video kutusunun kendi köşeleri yuvarlak. Zemin
   değişimi olmayan bölüm genel kurala (padding-top:0) tabi olmalı; --tas
   ile aynı istisnaya sokmak proje.html'de 96px'lik, diğer sayfalardaki
   düz `.bolum` geçişlerinden (64px) fazla bir boşluk üretiyordu. */
.ic-bas + .bolum{padding-top:0}
.ic-bas + .bolum--tas{padding-top:var(--s-6)}
.ic-bas .h1{margin-top:var(--s-5);max-width:16ch}
.ic-bas .metin{margin-top:var(--bosluk-baslik)}

/* Portreli iç sayfa başlığı: solda metin, sağda kişi/mekân görseli.
   `.neden__ic` ile AYNI ızgara mantığı (4 kolon, column-gap 0, nefes payı
   öğenin içinde) — iki bölüm aynı dikey çizgilere oturuyor. */
.ic-bas--gorselli .ic-bas__ic{
  display:grid;grid-template-columns:repeat(4,1fr);column-gap:0;
  row-gap:var(--s-7);align-items:end;
}
.ic-bas--gorselli .ic-bas__yazi{grid-column:1 / 3;padding-right:var(--s-7)}
/* Portre BENTO paneline geçti (2026-09-09): eskiden görsel ayrı bir
   `.ic-bas__cerceve` içindeydi ve isim etiketi ALTINDA akışta duruyordu.
   Artık isim görselin ÜSTÜNDE, sol altta — bento panelinin diliyle aynı.
   `overflow:hidden` artık figure'da: figcaption mutlak konumlu olduğu
   için kırpılma sorunu ortadan kalktı. */
.ic-bas--gorselli .ic-bas__gorsel{
  grid-column:3 / 5;
  position:relative;margin:0;overflow:hidden;isolation:isolate;
  border-radius:var(--r-yuzey);background:var(--gok);
}
.ic-bas--gorselli .ic-bas__gorsel img{
  display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;
}
/* Perde yalnız ALT banda: portrenin yüzü açık kalsın, isim okunsun.
   ⚠⚠ BU DEĞER İKİ KEZ YANLIŞ HESAPLANDI, üçüncüde doğru ölçüldü:
   (1) Agent .56 dedi. (2) Ben "yetersiz" deyip .86'ya çıkardım — ama
       FORMÜLÜM YANLIŞTI: perdeyi LUMİNANSLARI karıştırarak modelledim
       (L = L_px·(1−α) + L_perde·α). sRGB'de luminans doğrusal DEĞİL;
       doğru yol RGB kanallarını birleştirip SONRA luminans almaktır
       (Codex 2026-09-09 çürüttü).
   (3) Doğru formülle ve etiketin GERÇEK kutusu örneklenerek ölçüldü
       (element sınırları görsel pikseline ölçeklendi, 1493×44 alan;
       en parlak piksel 213,210,231 — tahmini banttaki 249,255,255 değil):
         .56 → 5,15   .62 → 6,14   .86 → 12,51
       Yani .56 zaten yeterliydi; .86 portreyi boş yere karartıyordu.
       Pay bırakarak .62 seçildi.
   Kalibrasyon: siyah/beyaz 21,00 · beyaz/beyaz 1,00. */
.ic-bas--gorselli .ic-bas__gorsel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(19,20,22,.62) 0%, rgba(19,20,22,.62) 12%, rgba(19,20,22,0) 28%);
}
.ic-bas--gorselli .ic-bas__ad{
  position:absolute;z-index:2;left:var(--s-5);right:var(--s-5);bottom:var(--s-5);
  margin:0;font-family:var(--ff-body);font-size:var(--fs-xs);
  font-weight:var(--fw-orta);letter-spacing:var(--ls-etiket);
  text-transform:uppercase;color:var(--tas-2);
}
@media(max-width:60rem){
  .ic-bas--gorselli .ic-bas__ic{grid-template-columns:1fr}
  .ic-bas--gorselli .ic-bas__yazi{grid-column:1;padding-right:0}
  .ic-bas--gorselli .ic-bas__gorsel{grid-column:1}
}

.ekmek{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.ekmek a{color:var(--ink-soft)}
.ekmek a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:3px}
.ekmek [aria-current]{color:var(--deep)}
.ekmek span[aria-hidden]{opacity:.45}

/* --- tip kartları ---------------------------------------------------
   3 kolon: 4 kolonlu ızgaraya birebir oturmuyor (3∤4) ama bu bölüm
   ızgara çizgilerinin ÜSTÜNDE değil, kendi kart ritminde okunuyor —
   .olanaklar da aynı desende. Kart sayısı 6 olduğu için 3'lü ızgara
   iki tam satır veriyor, boşluk kalmıyor. */
.tipler{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);
  /* SATIRLAR EŞİT: ızgara satırı en uzun kartına göre gerilir ve iki
     satırlı bu ızgarada satırlar farklı yükseklikte kalıyordu (ölçüldü
     @1440px: 200px / 237px). `1fr` bütün satırları eşitliyor. */
  grid-auto-rows:1fr;
}
/* EŞİT KART TABANI (Osman 2026-09-10: "tasarımını da düzelt hepsinin").
   Değer .olcut tabanıyla aynı ailede — iki bileşen aynı ritimde. */
.tipkart{min-height:clamp(150px,16vw,200px)}
/* Çerçeve, gölge ve zıplama KALDIRILDI (Osman 2026-09-09: "daire tipleri
   sectionunda border var onu kaldır" + luxterra yönü). Kartı zemin
   tanımlıyor; site genelindeki düz yüzey diliyle aynı. */
.tipkart{
  background:var(--tas-2);border-radius:var(--r-yuzey);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
}
.tipkart__grup{
  margin:0;font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);text-transform:uppercase;color:var(--vurgu);
}
.tipkart__ad{margin:0;font-size:var(--fs-xl);font-weight:var(--fw-orta);line-height:1.15;letter-spacing:-.02em;color:var(--deep)}
/* `.tipkart .cipler` ve `.tipkart--not` GERİ ALINDI: daireler.html'den
   kaldırdım diye CSS'i de silmiştim, oysa proje.html ikisini de
   kullanıyor (ticari ünite alanları için "veri yok" kartı). Kural
   silmeden önce TEK sayfaya değil TÜM sayfalara bakılır.
   daireler.html'deki "alan bilgisi yayımlanmayacak" kartı ise
   gerçekten silindi: anasayfa o değerleri zaten yayımlıyordu,
   iki sayfa çelişiyordu. */
.tipkart .cipler{margin-top:auto}
/* Bu kart bir tip değil, verinin YOKLUĞUNUN açıklaması — kasten farklı
   görünüyor ki kullanıcı onu bir ünite sanmasın. Çerçeve düz kart
   dilinde: kesikli kenarlık, zemin yok. */
/* ⚠ `.bolum--tas .tipkart` (0,2,0) bu kuralı (0,1,0) EZİYORDU: proje
   sayfasındaki "Ünite alanları" açıklama kartı şeffaflığını kaybediyor
   ve normal bir kart gibi görünüyordu (Codex 2026-09-09). Özgüllük
   eşitlendi — bu kart bilerek FARKLI görünmeli, veri değil verinin
   yokluğunu anlatıyor. */
/* Tam genişlik ZORUNLU (2026-09-09 ölçüldü): not kartının kendi metni
   (başlık + açıklama + link) diğer tipkart'lardan doğal olarak daha
   uzun — grid satırı içinde aynı sıraya düştüğü kart(lar) da onunla
   birlikte gerip 175px yerine 203px'e çıkıyordu (proje.html #ticari,
   3 kolonda Dükkân 4). Aynı içerik uzunluğundaki Dükkân 1-3 kısa
   kalınca Dükkân 4 kardeşlerinden farklı görünüyordu — kartın kendi
   içeriği değil, komşu hücredeki not kartı sebep oluyordu. Not kartını
   kendi satırına almak diğer kartların hepsini doğal (kısa) yükseklikte
   bırakıyor; boş kalan hücre daireler.html #tipler'in son satırında da
   var (5 kart / 3 kolon), aynı ızgara dilinde zaten kabul edilmiş bir
   desen. */
/* ⚠ 2026-09-10: `grid-column:1 / -1` KALDIRILDI (Osman: "ünite alanları
   ortak alan kısmında 6. kutu olarak, tam aşağıya eklemek yerine").
   Kesikli çerçeve + şeffaf zemin de kalktı: kart "farklı görünmeli" diye
   seçilmişlerdi ama düz yüzey dilindeki beş kartın yanında yamalı
   duruyordu. AYIRT EDİCİLİK KAYBOLMADI, TAŞINDI: kart artık diğerleri
   gibi bir `.tipkart__grup` etiketi taşıyor ("BİLGİ").
   Eski gerekçe "not kartı satır arkadaşlarını geriyordu" idi; onu artık
   yukarıdaki min-height + grid-auto-rows çözüyor. */
.tipkart--not .metin{color:var(--ink-soft)}
.tipkart--not .lnk{margin-top:auto}
.tipkart--not .metin{font-size:var(--fs-sm)}

/* --- BENTO: görsel paneli + ölçüt kartları -------------------------
   luxterra deseni ÖLÇÜLDÜ (Osman referansı 2026-09-09):
   · sol panel kare/kareye yakın, görsel tam kanama, metin BİNDİRME
   · sağ 2×2 kart: düz açık gri yüzey, kenarlık YOK, gölge YOK
   · kart içeriği ÜSTE ve ALTA yaslı, aradaki boşluk bilinçli
   · ikon ince outline, sağ üstte, tek renk gri
   · yarıçap küçük (referans 2px; bizde token --r-yuzey) */
.bento{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
  align-items:stretch;
}
@media(max-width:60rem){.bento{grid-template-columns:1fr}}

.bento__gorsel{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--r-yuzey);background:var(--deep-2);
  min-height:clamp(360px,42vw,560px);
  isolation:isolate;
}
.bento__gorsel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Perde: metin görselin ÜSTÜNDE okunacak. Tek gradyan yetmiyor —
   üstte ve altta ayrı ayrı koyulaşan iki durak, ortası açık kalıyor
   ki görsel kaybolmasın.
   KONTRAST ÜÇ KEZ ÖLÇÜLDÜ, ilk ikisi YANLIŞ FORMÜLLEYDİ:
   perdeyi luminansları karıştırarak modelliyordum (L = L_px·(1−α) +
   L_perde·α). sRGB'de luminans doğrusal değil — doğru yol RGB
   kanallarını birleştirip SONRA luminans almak (Codex 2026-09-09).
   Doğru formülle, her metnin GERÇEK kutusu görsel pikseline
   ölçeklenip örneklenerek (tahmini bant değil):
     etiket 12px, α .88 → 11,36  (eşik 4,5)
     başlık 40px, α .60 → 4,82   (eşik 3)
     paragraf 14px, α .90 → 12,29 (eşik 4,5)
   Yani perde eşiğin ÇOK üstündeydi ve görseli boş yere karartıyordu.
   Açıldı: üst .72, alt .74 — ölçülen değerler yorumun altında.
   Kalibrasyon: siyah/beyaz 21,00 · beyaz/beyaz 1,00. */
/* ⚠ Perde YALNIZ bindirme metni varken. olanaklar.html'de panel metinsiz
   (agent kontrastı güvenilir ölçemediği için bindirme yapmadı — doğru
   karar); orada perde koruyacak bir şey olmadan görseli karartıyordu.
   `:has()` ile panel kendi durumuna göre karar veriyor. */
.bento__gorsel:has(.bento__ic)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(19,20,22,.72) 0%, rgba(19,20,22,.24) 38%,
                    rgba(19,20,22,.34) 64%, rgba(19,20,22,.74) 100%);
}
.bento__ic{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(var(--s-5),3vw,var(--s-7));color:var(--tas-2);
}
/* Osman 2026-09-09: yer adı VERSAL değil, yalnız baş harfler büyük.
   --ls-etiket (.09em) büyük harf için ayarlıydı; küçük harfte harfleri
   dağıtıyor, o yüzden aralık burada .02em'e iniyor. Token'a
   dokunulmadı — başka etiketler hâlâ versal. */
.bento__etiket{
  margin:0;display:inline-flex;align-items:center;gap:var(--bosluk-mikro);
  font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:.02em;
  color:rgba(237,238,240,.9);
}
/* Kırmızı nokta yerine konum ikonu (Osman 2026-09-09). Path GERÇEK
   Lucide map-pin — index.html'deki #neden bölümünde zaten kullanılan
   aynı çizim, elle çizilmedi. */
.bento__ikon{flex:none;display:block;line-height:0}
.bento__ikon svg{
  width:14px;height:14px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.bento__bas{
  margin:var(--s-5) 0 0;
  /* h2 ile AYNI basamak: 38,4 ve 40 arasındaki 1,6px farkı göz
     "farklı boyut" değil "hizasızlık" olarak okuyor. */
  font-size:var(--fs-2xl);font-weight:var(--fw-baslik);
  line-height:1.18;letter-spacing:var(--ls-h2);color:#fff;text-wrap:balance;
}
.bento__alt{
  margin:var(--s-5) 0 0;max-width:46ch;
  font-size:var(--fs-sm);line-height:var(--lh-govde);color:rgba(237,238,240,.92);
}

.olcutler{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
}
@media(max-width:30rem){.olcutler{grid-template-columns:1fr}}
/* Bölümün TAM genişliğinde duran ölçüt şeridi (Öner Hekim sayfası).
   `1fr 1fr` orada kart başına 688px üretiyordu (ölçüldü 1512px'te):
   içerik kartın sol üçte birinde kalıyor, sağında ~400px boş alan
   duruyordu. Dörtlü ızgara kartı 344px'e indiriyor — anasayfa bento
   kartıyla (336px) aynı ölçü, iki sayfada kart eni eşitleniyor. */
@media(min-width:64rem){.olcutler--dortlu{grid-template-columns:repeat(4,1fr)}}
/* KÜNYE KARTLARI (Osman 2026-09-10: "buradaki sağdaki box tasarımı da
   anasayfa hero-sec’in altındaki gibi olsun"). proje.html #kunye’de
   sekiz künye satırı dl tablosundan anasayfanın kart diline geçti.
   İki kolonlu düzenin SAĞ kolonunda ikişerli duruyor: .olcutler
   varsayılanı zaten 1fr 1fr, burada yalnız kart yüksekliği sol
   kolonun metniyle dengelensin diye taban min-height düşüyor.
   YENİ KART DİLİ YOK — anasayfadaki .olcut aynen kullanılıyor. */
.olcutler--kunye{gap:var(--s-3)}
.olcutler--kunye .olcut{min-height:clamp(140px,15vw,190px);gap:var(--s-5)}
.olcut{
  background:var(--tas-2);border-radius:var(--r-yuzey);
  padding:clamp(var(--s-5),2.2vw,var(--s-6));
  /* `space-between` DEĞİL `flex-start` (Osman 2026-09-09: "açıklama
     hizalamaları"). space-between açıklamayı kartın DİBİNE yaslıyordu;
     açıklamalar farklı satır sayısında olduğu için üst kenarları 23px
     kayık başlıyordu (ölçüldü). Üst blok zaten iki satırlık sabit alan
     kapladığından, akış yukarıdan başlayınca açıklamalar da aynı
     hizadan başlıyor. Kartın alt boşluğunu min-height veriyor. */
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:var(--s-7);            /* üst ile alt arasındaki bilinçli boşluk */
  min-height:clamp(170px,20vw,264px);
}
/* Açıklaması OLMAYAN kart (kaynakta cümle yoksa uydurulmuyor): alt blok
   yoksa `space-between` + min-height anlamsız bir boşluk bırakıyordu.
   `:has()` ile kart kendini ayarlıyor, HTML'e varyant sınıfı gerekmiyor. */
.olcut:not(:has(.olcut__not)){min-height:auto;gap:0}
.olcut__ust{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.olcut__deger{margin:0;display:grid;gap:2px}
/* KART DEĞERİ TEK TOKEN'A BAĞLANDI (Osman 2026-09-09: "bu kısımdaki font
   büyüklüğü tipi neyse diğer section'larımda da böyle olsun").
   Buradaki clamp --fs-xl ile AYNI değerdi ama elle tekrar yazılmıştı;
   token'ın sessizce ayrışmasına açık kapı bırakıyordu (Codex bulgusu).
   Aynı role sahip .seri__bas (40px), .zaman__oran (44px) ve
   .ozellik__ad (16px) de bu token'a çekildi — dört bileşen tek ölçüde. */
.olcut__deger b{
  /* Osman 2026-09-09: "rakamlar daha büyük olabilir". Alt başlık
     --fs-xl'de kalıyor; sayı bir basamak yukarı çıkıp öne geçiyor. */
  display:block;font-size:var(--fs-2xl);font-weight:var(--fw-baslik);
  letter-spacing:-.02em;line-height:1.1;color:var(--deep);
  font-variant-numeric:lining-nums tabular-nums;
}
/* Alt başlık MEDIUM (Osman 2026-09-09): sayı ile aynı ağırlıkta olunca
   ikisi yarışıyordu; 500 ile sayı önde kalıyor, etiket okunur. */
/* İKİ SATIRLIK YER AYRILIYOR (Osman 2026-09-09: "başlıklar 2 satır,
   açıklama hizalamaları"). Kartların üç tanesi tek satır, biri iki
   satır başlık taşıyordu; `space-between` altı hizaladığı için
   AÇIKLAMALAR birbirinden 23px kayık başlıyordu (ölçüldü). Sabit iki
   satırlık alan üst bloğu eşitliyor, açıklamalar aynı hizadan
   başlıyor. `lh` birimi desteklenmeyen tarayıcıda calc yedeği. */
/* ⚠ `> span` ZORUNLU (Codex 2026-09-09): proje.html'de kart değeri
   `<b><span data-sayac>56</span></b><span>Bağımsız bölüm</span>`
   yapısında — inen seçici SAYAÇ span'ını da yakalıyor ve sayıyı
   27,2px/500 + min-height:2lh ile biçimlendiriyordu. Doğrudan çocuk
   seçicisi yalnız alt başlığı hedefler. */
.olcut__deger > span{
  display:block;font-size:var(--fs-xl);font-weight:var(--fw-orta);
  letter-spacing:-.02em;line-height:1.15;color:var(--deep);text-wrap:balance;
  min-height:calc(2 * 1.15em);
  min-height:2lh;
}
.olcut__ikon{flex:none;color:var(--ink-soft)}
.olcut__ikon svg{
  width:26px;height:26px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.olcut__not{margin:0;font-size:var(--fs-sm);line-height:var(--lh-govde);color:var(--ink-soft);max-width:34ch}

/* proje.html'de satır içi `style="margin…"` olarak duran iki yerleşim
   kuralının kalıcı evi (2026-09-09). Satır içi stil CSS'in dışında
   yaşıyor, aramada görünmüyor ve token disiplininden kaçıyordu.
   `--oran` satır içi kalıyor — o VERİ taşıyor, yerleşim değil. */
/* ⚠ Sınıf adı vermeden ÖNCE `grep` şart: `.gorsel--ayrik` bir kez
   "yeni sınıf" sanılıp ikinci kez tanımlandı ve oner-hekim.html'in
   kapanış bloğuna alttan 48px ekledi (Codex 2026-09-09). O sınıfın
   kendisi 2026-09-09'da ölü kaldı (kapanış bölümü yeniden kuruldu,
   son kullanıcısı düştü) ve silindi; ders duruyor. */
.ozellikler--ayrik{margin-top:var(--s-6)}
.gorsel--proje-ayrik{margin:var(--s-7) 0}

/* Bölüm başlığı ile alttaki liste arasına giren bento, başlığın kendi
   alt boşluğunu taşır (agent satır içi style ile çözmüştü, kalıcı ev
   burası). Anasayfanın kendi .bolum--bento'sunu ETKİLEMEZ. */
.bolum--tas .bento{margin-bottom:var(--s-8)}

/* Atlama bağlantısı: klavyeyle gezen kullanıcı her sayfada navbarı
   tekrar tekrar geçmesin (WCAG 2.4.1). Odaklanmadan görünmez, odakta
   sol üstte belirir — `display:none` KULLANILMAZ, o odaklanmayı da
   engeller. */
/* `top:-100%` MUTLAK konumlu öğede kapsayıcı BLOĞUN yüksekliğine göre
   çözülüyor — sayfa boyu 966px olunca -966px oluyor ve odakta geri
   getirmek için gereken mesafe sayfadan sayfaya değişiyor. Sabit bir
   değer kullanılıyor. */
.atla{
  position:fixed;left:var(--s-4);top:-4rem;z-index:60;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-yuzey);
  background:var(--deep);color:var(--tas-2);
  font-size:var(--fs-sm);font-weight:var(--fw-orta);
  transition:top var(--hiz) var(--ease);
}
/* `:focus-visible` DEĞİL `:focus`: atlama bağlantısına zaten yalnız
   klavyeyle ulaşılıyor ve `:focus-visible` bazı bağlamlarda (programatik
   odak, bazı tarayıcı sürümleri) tetiklenmiyor — bağlantı görünmez
   kalırsa hiç yok demektir. */
.atla:focus{top:var(--s-4);outline:2px solid var(--vurgu);outline-offset:2px}

/* --- SSS (sıkça sorulanlar) ---------------------------------------
   `<details>`: açılır davranış, klavye ve ekran okuyucu desteği
   tarayıcıdan geliyor, JS'e bağlı değil. */
/* SSS + İLETİŞİM TEK DÜZENDE (Osman 2026-09-09: "projeyi yerinde görün
   ile aklınızdaki sorular kısmını birleştirip tek sticky yapalım").
   İki bölümün SOL blokları tek sticky sütuna alındı (`<div>`, `<aside>`
   DEĞİL — başlık ve iletişim eylemi ana içeriğin parçası, Codex 2026-09-09);
   sağ sütunda iki `<section>` (sorular + künye) sırayla akıyor.
   Semantik korundu: başlık sticky sütunda ama section'lar ona
   `aria-labelledby` ile bağlı, yani her bölümün adı hâlâ var. */
.bilgi-duzen{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(var(--s-6),5vw,var(--s-9));align-items:start;
  padding-block:var(--bosluk-bolum);
}
@media(max-width:60rem){.bilgi-duzen{grid-template-columns:1fr}}
/* Tek sticky: iki başlık bloğu birlikte takip ediyor. `align-items:start`
   olmadan sticky çalışmaz (ızgara hücresi tam yükseklik olur). */
.bilgi-duzen__yan{
  position:sticky;top:var(--capa-payi,120px);
  /* Gap 96px'ti — o değer İKİ ayrı başlık bloğu içindi. Osman iki bloğu
     tek içeriğe indirince (2026-09-09) başlık/metin/eylem arasında
     sebepsiz 96px boşluk kalmıştı. Tek blok, tek ritim: --s-5 (24px). */
  display:flex;flex-direction:column;gap:var(--s-5);
}
@media(max-width:60rem){.bilgi-duzen__yan{position:static}}
.bilgi-duzen__yan .metin{max-width:46ch}
/* Eylem satırı kendi üst boşluğunu taşıyor (.iletisim__eylem'in
   margin-top'u) — flex gap'iyle toplanmasın diye 8px'e iniyor. */
.bilgi-duzen__yan .iletisim__eylem{margin-top:var(--s-2)}
/* Sağ sütun: iki bölüm alt alta, aralarında bölüm boşluğu. */
.bilgi-duzen__akis{display:flex;flex-direction:column;gap:clamp(var(--s-8),7vw,var(--s-9))}
.bilgi-bolum{position:relative}

.sss{display:grid;gap:var(--s-3);max-width:none}
/* Kart yüzeyi: zemin bölüme göre terslenir — `.bolum--tas` listesinde. */
.sss__madde{
  background:var(--tas-2);border-radius:var(--r-yuzey);
  padding:0 clamp(var(--s-5),2.2vw,var(--s-6));
}
.sss__soru{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;cursor:pointer;list-style:none;
}
.sss__soru::-webkit-details-marker{display:none}
.sss__soru h3{
  /* Ağırlık --fw-orta (500): bento kart başlığı (.olcut__deger span) da
     500 kullanıyor. 600 ile yazılınca aynı puntoda daha ağır duruyordu
     — punto eşit, ağırlık ayrışıktı (Osman sordu, ölçüm doğruladı). */
  margin:0;font-size:var(--fs-xl);font-weight:var(--fw-orta);line-height:1.15;
  letter-spacing:-.02em;color:var(--deep);text-wrap:balance;
}
.sss__soru:hover h3{color:var(--vurgu)}
/* ⚠ `focus-within` FARE TIKLAMASINDA da tetikleniyordu ve halka kartın
   İÇİNDEKİ summary'ye çiziliyordu — kart yüzeyi gelince kenardan taşıp
   çerçeve gibi görünüyordu (Osman 2026-09-09 ekran görüntüsü).
   `:focus-visible` yalnız klavye odağında çalışır: fareyle açarken halka
   yok, Tab ile gezerken var (WCAG 2.4.7 korunuyor).
   Halka KARTIN kendisine çiziliyor, iç öğeye değil. */
.sss__madde:has(.sss__soru:focus-visible){
  outline:2px solid var(--vurgu);outline-offset:2px;
}
/* `:has()` desteklenmeyen tarayıcıda odak yine görünsün. */
@supports not selector(:has(*)){
  .sss__soru:focus-visible{outline:2px solid var(--vurgu);outline-offset:-2px}
}
/* Artı/eksi işareti: ikon dosyası değil iki çizgi — tek renk, keskin,
   ölçekten bağımsız. Açıkken dikey çizgi kayboluyor. */
.sss__ikon{
  position:relative;flex:none;width:16px;height:16px;
  transition:transform var(--hiz) var(--ease);
}
.sss__ikon::before,.sss__ikon::after{
  content:"";position:absolute;inset:50% 0 auto;
  height:1.5px;background:var(--ink-soft);border-radius:var(--r-hap);
  transform:translateY(-50%);
}
.sss__ikon::after{transform:translateY(-50%) rotate(90deg);transition:opacity var(--hiz) var(--ease)}
.sss__madde[open] .sss__ikon::after{opacity:0}
.sss__cevap{padding:0 0 var(--s-5);max-width:64ch}
.sss__cevap .metin{font-size:var(--fs-sm)}
:root[data-az-hareket="1"] .sss__ikon,
:root[data-az-hareket="1"] .sss__ikon::after{transition:none}

/* --- iletisim.html düzeni ------------------------------------------
   ⚠ Bu beş sınıfı HTML'e yazıp CSS'ini YAZMAMIŞTIM: sayfa stilsiz
   yığılmış bloklar hâlinde render oluyordu (Osman: "o alanlar patlamış").
   Sınıf üretip kuralını yazmamak sessiz bir kusur — build hatası
   vermiyor, yalnız sayfa çöküyor. */
.bolum--harita{padding-block:0}          /* harita bölüme yapışsın */
/* `.harita.harita--tam` — TEK sınıfla yazınca `.harita` ile AYNI
   özgüllükte (0,1,0) kalıyor ve dosyada önce geldiği için `.harita`nın
   `aspect-ratio:16/7`i kazanıyordu. Sonuç: harita 1800px viewport'ta
   406×16/7 = 927px kalıyordu (ölçüldü). Özgüllük (0,2,0)'a çıkarıldı —
   kuralı sıraya bağlamak kırılgan. */
.harita.harita--tam{
  border-radius:0;aspect-ratio:auto;width:100%;
  height:clamp(320px,42vh,480px);
}
/* SAYFA IZGARASINDAKİ HARİTA (Osman 2026-09-10: "google maps soldan ve
   sağdan full-width, onu da sitedeki mevcut tasarıma göre oturtmak
   lazım"). Tam kanama, sayfanın geri kalanının wrap hizasını bozuyordu;
   harita tek başına "yapıştırılmış" duruyordu. Artık aynı ızgarada ve
   aynı yüzey yarıçapıyla. overflow:hidden ZORUNLU — iframe kendisi
   border-radius almaz, köşeler kutudan taşar. */
.harita.harita--sayfa{
  width:100%;aspect-ratio:auto;height:clamp(320px,42vh,480px);
  border-radius:var(--r-yuzey);overflow:hidden;
}
/* Bölüm dolgusu 0 idi (harita eskiden üstteki bölüme yapışıktı);
   ızgaraya girince kendi nefes payını istiyor. Çift sınıf, yukarıdaki
   tek sınıflı kuralı özgüllükle yener — kaynak sırasına dayanmaz. */
/* ÜST DOLGU 0 (Osman 2026-09-10: "maps ile başlık arasında çok boşluk
   var, diğer sayfalarımızda bu kadar yoktu"). Ölçüldü @1440px: .ic-bas
   zaten 64px alt dolgu veriyor; harita bölümü 64px daha ekleyince
   toplam 128px oluyordu. Karşılaştırma: galeri/haberler sonraki bölüme
   0px, insaat 32px ekliyor — iletişim tek başına ayrışıyordu.
   ALT dolgu KALIYOR: harita ile altındaki iki kolon birbirine
   yapışmasın. */
.bolum--harita.bolum--harita{padding-block:0 var(--bosluk-bolum)}
/* Harita altı düzeni: SOL bilgiler, SAĞ form (Osman 2026-09-09,
   iki kez: önce "solda bilgiler sağda iletişim formu olsun", sonra
   bento denemesi geri alınırken "başka bir şey istemiyorum o kısımda").
   Sağ kolon biraz geniş: form alanları iki kolonlu satırlar taşıyor. */
/* MOBİL-ÖNCE, TEK kırılım. Önce `max-width:60rem` (düzen) ile
   `min-width:60rem` (künye) yan yana yazılmıştı: 960px'te İKİSİ de
   eşleşiyor, düzen tek kolona iniyor ama künye dar-kolon kuralını
   alıyordu ve kart 883px kalıyordu (Codex 2026-09-09 hesapladı).
   Aynı sınırın aynı tarafında duran tek bir sorgu bu sınıfı kapatıyor. */
.iletisim__duzen{
  display:grid;grid-template-columns:1fr;
  gap:var(--s-7);align-items:start;
}
/* Künye kart eni İKİ AŞAMALI, çünkü kabın eni iki farklı sebeple
   değişiyor:
   · ≥60rem — düzen iki kolonlu, künye DAR sol kolonda: tek sıra.
     (Global iki kolon kuralı burada kartı 300px altına indirip adresi
     üç satıra kırıyordu.)
   · <60rem — düzen tek kolona indi, künye TAM genişlikte: kart eni
     içeriğe göre kendini kursun. 768px'te koşulsuz tek sıra yazınca
     kart 706px kalıyor, içerik solda, sağı boş duruyordu (ölçüldü). */
.iletisim__bilgi .kunye{
  margin-top:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
@media(min-width:60rem){
  .iletisim__duzen{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-8)}
  /* Künye artık DAR sol kolonda: tek sıra. Global iki kolon kuralı
     burada kartı 300px altına indirip adresi üç satıra kırıyordu. */
  .iletisim__bilgi .kunye{grid-template-columns:1fr}
}
/* FORM YÜZEYİ (Osman 2026-09-10: "form tasarımı düzenlenmemiş").
   Alanlar bölüm zemininde ÇIPLAK duruyordu; sol kolondaki künye
   satırları ise --tas-2 yüzeydeydi. İki kolon aynı dili konuşmuyordu.
   Form artık kendi yüzey kartında: aynı zemin, aynı yarıçap, .olcut
   ile aynı dolgu ölçeği. Girdiler BEYAZ kalıyor — yüzey üstündeki
   okunur kontrast oradan geliyor, ayrıca odak halkası görünür kalıyor. */
.iletisim__form .form{
  margin-top:var(--s-6);max-width:none;
  background:var(--tas-2);border-radius:var(--r-yuzey);
  padding:clamp(var(--s-5),2.2vw,var(--s-6));
}
.iletisim__form .form .btn{margin-top:var(--s-2)}

/* --- harita + form (iletisim.html) --------------------------------
   Kenarlık rengi --cizgi (rgba(28,29,31,.11)) DEĞİL: WCAG 1.4.11
   arayüz bileşeni kenarlığı için 3:1 istiyor, o ton beyaz üstünde
   1,2:1 kalıyor ve kutu görünmez oluyor.
   ⚠ İlk yazdığım .38 de YETMİYORDU — ölçtüm: bileşik rgb(169,169,170),
   beyazla 2,35:1. Alfa HESAPLANDI, seçilmedi: 3:1'i geçen ilk değer
   .48 (3,08); pay bırakmak için .54 → rgb(132,133,134), 3,70:1.
   Odak halkası ayrı (--vurgu, 2px). */
.harita{
  border-radius:var(--r-yuzey);overflow:hidden;background:var(--tas-2);
  aspect-ratio:16 / 7;
}
.harita iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:48rem){.harita{aspect-ratio:4 / 3}}

.form{display:grid;gap:var(--s-4);max-width:56rem}
.form__satir{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:44rem){.form__satir{grid-template-columns:1fr}}
/* Etiket→girdi aralığı 8→12px (Osman 2026-09-10: "labelların vs
   pop-upın biraz daha paddingli olabilir"). Modal'a özel bir kural
   YAZILMADI: aynı formu iletişim sayfası da kullanıyor, ikinci bir
   etiket dili açmak yerine tek dil ferahladı. */
.form__alan{display:grid;gap:var(--s-3)}
.form__etiket{
  font-size:var(--fs-sm);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);text-transform:uppercase;color:var(--ink-soft);
}
.form__girdi{
  /* appearance:none ZORUNLU — Chrome native kontrolü kendi çiziyor ve
     getComputedStyle bunu göstermiyor; select/checkbox'ta tema dışı
     görünüm buradan sızar. */
  appearance:none;-webkit-appearance:none;
  /* 16px ZORUNLU: iOS Safari 16px'ten küçük alanda odaklanınca sayfayı
     otomatik yakınlaştırıyor ve kullanıcı elle geri çıkmak zorunda
     kalıyor (Codex 2026-09-09). Ölçek basamağı --fs-md. */
  font:inherit;font-size:var(--fs-md);color:var(--deep);
  padding:var(--s-3) var(--s-4);min-height:var(--dokunma);
  border:1px solid rgba(28,29,31,.54);border-radius:var(--r-yuzey);
  background:#fff;
  transition:border-color var(--hiz) var(--ease);
}
.form__girdi:hover{border-color:rgba(28,29,31,.72)}
.form__girdi:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px;border-color:var(--vurgu)}
.form__metin{min-height:auto;resize:vertical}
/* select oku: appearance:none onu da sildi, geri veriliyor */
select.form__girdi{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6E71' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;background-size:16px;
  padding-right:calc(var(--s-4) * 2 + 16px);
}
.form__onay{
  display:flex;align-items:flex-start;gap:var(--s-3);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-soft);cursor:pointer;
}
.form__onay input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin-top:2px;
  border:1px solid rgba(28,29,31,.54);border-radius:var(--r-yuzey);
  background:#fff;cursor:pointer;
}
.form__onay input:checked{
  background:var(--vurgu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color:var(--vurgu);
}
.form__onay input:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.form__durum{
  margin:0;padding:var(--s-4);border-radius:var(--r-yuzey);
  background:var(--tas-2);border-left:3px solid var(--vurgu);
  font-size:var(--fs-sm);line-height:var(--lh-govde);color:var(--deep);
}
.form .btn{justify-self:start}

/* --- ÖN TALEP & REZERVASYON MODALI --------------------------------
   Sticky raydaki düğmeden açılır. YENİ BİLEŞEN DİLİ YOK: kabuk
   `.planiz` ile aynı `<dialog>` kalıbı, içerik ise sayfadaki `.form`
   sınıflarının aynısı — girdi, etiket, onay kutusu ve durum satırı
   iletişim formuyla birebir aynı kuralları kullanıyor. */
.rezerve{
  border:0;padding:0;background:transparent;
  width:min(100% - 2 * var(--pad-x),46rem);max-height:calc(100svh - 2 * var(--s-6));
}
.rezerve::backdrop{background:rgba(19,20,22,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rezerve__ic{
  /* Dolgu TEK KAYNAKTA: sticky eylem çubuğu bu değeri negatif payla
     geri alıp kenardan kenara uzanıyor. İki yerde elle yazılsaydı
     ayrışınca çubuk kutunun içinde kayardı. Alt sınır --s-5 (24px)
     idi, --s-6 (32px) oldu — telefonda kutu kenarına yapışıyordu. */
  --rezerve-pad:clamp(var(--s-6),3vw,var(--s-7));
  /* Klavyeyle alan alan ilerlerken tarayıcı odaklanan alanı kaydırma
     kutusunun kenarına getiriyor; yapışık başlık ve eylem çubuğu onu
     örtebilirdi. Pay ikisinin yüksekliği kadar (Codex 2026-09-10). */
  /* Alt pay ÇUBUĞUN GERÇEK YÜKSEKLİĞİ kadar: dokunma hedefi + kendi
     dolgusu + üst payı. İlk yazdığım 76px yetmedi — masaüstünde çubuk
     108,2px ve "Mesajınız" alanı Tab'la odaklanınca altında kalıyordu
     (ölçüldü: örtülen odak 1). 44+43,2+24 = 111,2px ile 0'a indi. */
  scroll-padding-block:calc(var(--dokunma) + var(--s-6))
                       calc(var(--dokunma) + var(--rezerve-pad) + var(--s-5));
  background:var(--acik);border-radius:var(--r-yuzey);
  /* ALT DOLGU YOK, ÇUBUĞUN İÇİNDE. `position:sticky` öğeyi kapsayıcının
     CONTENT box'ında tutuyor: kutuda alt dolgu kalırsa çubuk o kadar
     yukarıda durur ve altındaki şeritten kayan içerik görünür (ölçüldü,
     43,2px). Dolguyu çubuk taşıyınca çubuk gerçekten dibe yapışıyor. */
  padding:var(--rezerve-pad) var(--rezerve-pad) 0;
  /* Alanlar arası 16→24px: uzun form, sıkışık ritimde okunmuyordu. */
  gap:var(--s-5);
  /* Odak forma DEĞİL başlığa veriliyor (tower.js) — kural aşağıda. */
  /* Uzun formda taşma ŞART: 375x667'de alanlar ekranı geçiyor ve
     gönder düğmesine ulaşılamıyordu (aynı hata mobil menüde yaşandı). */
  max-height:calc(100svh - 2 * var(--s-6));overflow-y:auto;overscroll-behavior:contain;
}
/* Başlık bloğu formdan bir çizgiyle ayrılıyor: metin ile ilk etiket
   arasında hiyerarşi yoktu, "OLANAK *" açıklama paragrafının devamı
   gibi okunuyordu. */
.rezerve__bas{
  /* YAPIŞIK: kapat düğmesi kaydırınca ekrandan çıkıyordu. Mobilde
     "İptal" gizli olduğu için (aşağıda) X tek görünür çıkış yolu —
     onun da kaybolması kabul edilemezdi (Codex 2026-09-10 işaret etti).
     Eylem çubuğuyla aynı desen: negatif pay dolguyu geri alıyor, üst
     dolgu yeniden veriliyor, zemin opak. */
  position:sticky;top:0;z-index:2;background:var(--acik);
  margin:calc(-1 * var(--rezerve-pad)) calc(-1 * var(--rezerve-pad)) 0;
  padding:var(--rezerve-pad) var(--rezerve-pad) var(--s-5);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  border-bottom:1px solid var(--cizgi);
}
/* Modal açılınca odak buraya geliyor. Halka çizilmiyor: başlık işletilen
   bir kontrol değil, yalnız ekran okuyucunun başlangıç noktası; klavye
   kullanıcısının gördüğü ilk odak halkası ilk GERÇEK kontrolde (kapat
   düğmesi) çıkıyor ve o kural duruyor. */
.rezerve__bas .h2:focus{outline:none}
.rezerve__bas .metin{max-width:44ch;margin-top:var(--s-3)}
.rezerve__kapat{
  flex:none;width:var(--dokunma);height:var(--dokunma);display:grid;place-content:center;
  border:1px solid var(--cizgi);border-radius:var(--r-hap);background:var(--tas-2);
  color:var(--deep);cursor:pointer;transition:background var(--hiz) var(--ease);
}
.rezerve__kapat:hover{background:var(--gok)}
.rezerve__kapat svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* Tarih/saat/süre tek satırda; dar ekranda alt alta. */
.form__satir--uclu{grid-template-columns:1fr 1fr 1fr}
@media(max-width:44rem){.form__satir--uclu{grid-template-columns:1fr}}
/* GÖNDER DÜĞMESİ HEP EKRANDA. Ölçüm 390x844: modal içeriği 486px
   taşıyordu, yani telefonda gönder düğmesine ulaşmak için formun
   tamamını kaydırmak gerekiyordu. Çubuk kaydırma kutusunun dibine
   yapışıyor; negatif pay dolguyu geri alıp kenardan kenara uzatıyor
   (bu yüzden dolgu `--rezerve-pad` değişkeninde). */
.rezerve__eylem{
  position:sticky;bottom:0;z-index:1;
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:flex-end;
  margin:var(--s-2) calc(-1 * var(--rezerve-pad)) 0;
  padding:var(--s-4) var(--rezerve-pad) var(--rezerve-pad);
  background:var(--acik);border-top:1px solid var(--cizgi);
}
@media(max-width:34rem){
  .rezerve__eylem{flex-direction:column-reverse}
  .rezerve__eylem .btn{width:100%;justify-content:center}
  /* İPTAL MOBİLDE GİZLİ: yapışık çubukta iki tam genişlik düğme üst
     üste ~112px, ekranın yedide biri. Kapatma yolu KAYBOLMUYOR —
     sağ üstte X düğmesi, klavyede Esc, dışarıya tıklama. */
  .rezerve__eylem .btn-acik{display:none}
}

/* --- tekil haber sayfası ------------------------------------------
   `bes-stratejik-yatirim.html` için. Sayfanın geri kalanı sitede kurulu
   bileşenleri kullanıyor (`.ic-bas`, `.olanak`, `.alinti`, `.galeri`);
   burada yalnız üç şey yeni. Kararların tamamı:
   docs/haber-tekil-sayfa-kararlar.md
   ⚠ Paragraf aralığı GENEL `.metin + .metin` kuralı olarak YAZILMADI:
   sitedeki çoğu yerde ardışık paragrafların arasını grid `gap` veriyor
   ve genel kural oralarda çift boşluk üretirdi. Kapsam bu sarmalayıcı. */
.haber-akis > .metin + .metin{margin-top:var(--s-4)}
/* `.haber__tarih` `.ic-bas` içinde İLK KEZ kullanılıyor (tekil haber
   sayfası): ekmek kırıntısıyla arasında 0px kalıyordu, ölçüldü. */
.ic-bas .haber__tarih{margin-block:var(--s-4) 0}
.haber__kapak{margin:0}
.haber__kapak img{display:block;width:100%;height:auto;border-radius:var(--r-yuzey)}
/* Video gömmesi sitede İLK KEZ kullanılıyor (bugüne kadar tek iframe
   iletişimdeki haritaydı). Oran `aspect-ratio` ile: eski yüzdelik
   padding hilesi gerekmiyor, ve oran sabit olduğu için iframe yüklenene
   kadar düzen kaymıyor (CLS). */
.video-ikili{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
@media(max-width:48rem){.video-ikili{grid-template-columns:1fr}}
.video-kutu{margin:0;display:grid;gap:var(--s-3)}
.video-kutu iframe{
  display:block;width:100%;aspect-ratio:16 / 9;border:0;
  border-radius:var(--r-yuzey);background:var(--gok);
}
.video-kutu figcaption{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}

/* --- galeri ızgarası ---------------------------------------------
   Yeni bir lightbox YAZILMADI: mevcut <dialog> plan görüntüleyicisi
   genelleştirildi (tower.js). İkinci bir görüntüleyici bileşeni bu
   projedeki "aynı işi yapan iki sınıf" sorununu büyütürdü. */
.galeri{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--s-4);
}
/* İlk öğe iki kolon + daha uzun: galeri girişinde bir odak görseli
   olmadan ızgara tek düze bir kontak sayfası gibi okunuyor.
   `:not(.galeri--bento)`: bento varyantında odak görselini nth-child
   deseni veriyor; iki kural aynı öğeye yazsa biri ölü kod olurdu. */
@media(min-width:48rem){
  .galeri:not(.galeri--bento) > :first-child{grid-column:span 2;grid-row:span 2}
  /* ÜÇ ÖĞELİ ALBÜMDE ODAK GÖRSELİ YOK. 1325px kapta `minmax(280px)`
     dört kolon veriyor; ilk öğe 2×2 kaplayınca kalan iki öğe sağ üste
     diziliyor ve sağ altta iki hücre boş kalıyor (Codex 2026-09-10 —
     tekil haber sayfasında albüm altıdan üçe indi). Üç eşit hücre
     dengeli duruyor.
     `:has()` desteklenmeyen tarayıcıda kural hiç uygulanmaz ve eski
     davranış sürer: güvenli düşüş, kırılma değil. */
  .galeri:not(.galeri--bento):has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .galeri:not(.galeri--bento):has(> :nth-child(3):last-child) > :first-child{grid-column:auto;grid-row:auto}
}
.galeri__ac{
  appearance:none;font:inherit;color:inherit;padding:0;border:0;
  display:block;width:100%;height:100%;margin:0;cursor:zoom-in;
  position:relative;overflow:hidden;border-radius:var(--r-yuzey);
  background:var(--tas-2);
}
.galeri__gorsel{
  display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4 / 3;
  transition:transform .6s var(--ease);
}
.galeri > :first-child .galeri__gorsel{aspect-ratio:auto;min-height:100%}
.galeri__ac:hover .galeri__gorsel,
.galeri__ac:focus-visible .galeri__gorsel{transform:scale(1.03)}
.galeri__ac:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.galeri__buyut{
  position:absolute;right:var(--s-3);bottom:var(--s-3);
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-hap);background:rgba(28,29,31,.86);color:var(--tas-2);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--hiz) var(--ease),transform var(--hiz) var(--ease);
}
.galeri__buyut svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.galeri__ac:hover .galeri__buyut,
.galeri__ac:focus-visible .galeri__buyut{opacity:1;transform:none}
:root[data-az-hareket="1"] .galeri__gorsel{transition:none}
  /* :focus-visible de eklendi — yalnız :hover kaldırılmıştı, klavyeyle
     gezen kullanıcıda görsel hâlâ büyüyordu (Codex 2026-09-09). */
  
:root[data-az-hareket="1"] .galeri__ac:hover .galeri__gorsel,
:root[data-az-hareket="1"] .galeri__ac:focus-visible .galeri__gorsel{transform:none}

/* --- galeri BENTO varyantı -----------------------------------------
   Osman 2026-09-09: "galeri kısmındaki görseller düzenli değil …
   bentogrid olarak". Düzensizliğin kökü ölçüldü: `auto-fill` ızgarada
   her kart 4/3 kutudaydı ama ilk öğe 2×2 span'la farklı orandaydı →
   satır yükseklikleri birbirini tutmuyordu. Bento'da hücre yüksekliği
   SABİT (`--galeri-satir`), büyük öğeler o hücrenin tam katı kadar yer
   kaplıyor; ritim her satırda aynı.

   Kolon sayısı burada SABİT — `auto-fill` DEĞİL. Span'lı desenin ritmi
   kolon sayısına bağlı; auto-fill kolon sayısını kabın genişliğine göre
   değiştirir ve desen her aralıkta başka türlü kırılır. Bu,
   tasarim-sistemi.md §5'teki "sabit kolon yazma" kuralının bento sağ
   paneliyle aynı gerekçeli istisnası.

   `dense`: 2×2 bir öğe satır sonunda yer bulamazsa arkasından gelen
   1×1'ler boşluğu doldurur, ızgarada delik kalmaz (17 görsel hiçbir
   kolon sayısında tam bölünmüyor). */
.galeri--bento{
  --galeri-satir:150px;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:var(--galeri-satir);
  grid-auto-flow:dense;
}
/* Sabit hücre yüksekliği geldiği için görselin kendi oranı devre dışı:
   kutuyu `cover` dolduruyor. Yazılmazsa 4/3 oranı satır yüksekliğiyle
   yarışır ve öğeler bir piksel oynar. */
.galeri--bento .galeri__gorsel{aspect-ratio:auto;height:100%}
.galeri--bento > :first-child .galeri__gorsel{min-height:0}
/* Odak öğeleri: her 7'de bir 2×2 (büyük kare), beşincisi 2×1 (yatay
   bant). 7'lik periyot 17 görselde 1/8/15'i büyük, 5/12'yi geniş yapar —
   iki büyük kart hiçbir zaman yan yana düşmüyor.

   ⚠ BİLİNEN TAKAS — ölçülerek seçildi (1440px, 4 kolon):
   · mevcut hâl → son satırda boşluk 0, ama görsel sıra
     1,2,3,4,**6,5**,7,**9,8**,10…17 (dense iki çifti yer değiştiriyor)
   · geniş kart kuralı kaldırılırsa → görsel sıra 1…17 doğru, ama son
     satırda 670px boş kalıyor (4 kolonun ikisi)
   · `dense` de kapatılırsa sonuç aynı: sıra doğru, 670px boşluk
   Delik yokluğu seçildi: Osman'ın şikâyeti "görseller düzenli değil"di.
   Sıra ayrışması iki çiftte kalıyor ve galeri görsellerinin anlamsal
   bir okuma sırası yok (WCAG 1.3.2 anlamı etkilemiyor); klavye ve
   görüntüleyici sırası DOM'a bağlı olduğu için kendi içinde tutarlı.
   Codex 2026-09-09 bu ayrışmayı hesapla yakaladı; ben ilk ölçümde
   "yok" demiştim — kanıtım hatalıydı, DOMRect `{...rect}` ile
   kopyalanmıyor, sıralama hiç çalışmamıştı. */
.galeri--bento > :nth-child(7n+1){grid-column:span 2;grid-row:span 2}
@media(min-width:48rem){
  .galeri--bento{--galeri-satir:180px;grid-template-columns:repeat(3,1fr)}
  .galeri--bento > :nth-child(7n+5){grid-column:span 2}
}
/* Aralık ÜST SINIRLA yazılmıyor. Önce `74.99rem` vardı: 75rem ile
   arasında 0,16px'lik bant kalıyor, kesirli genişlikte (zoom, kesirli
   iframe) iki kural da kapalı kalabiliyordu (Codex 2026-09-09). Sonra
   `calc(75rem - 0.02px)` denendi — medya sorgusunda `calc` desteği
   tarayıcıya göre değişiyor ve DESTEKLENMEZSE kural sessizce ölür,
   yani düzeltme hiç uygulanmaz.
   Bunun yerine kural 48rem'de AÇILIYOR, 75rem'de GERİ ALINIYOR: iki
   sorgu da yalnız `min-width` kullanıyor, aralarında boşluk yok ve
   `calc` desteğine bağımlı değil. */
@media(min-width:48rem){
  /* ÜÇ kolonda desen tam bölünmüyor: 3 büyük (4 hücre) + 2 geniş
     (2) + 12 normal = 28 hücre, 28 % 3 = 1 → son satırda İKİ hücre
     boş kalıyordu (Codex 2026-09-09 yerleştirme modeliyle hesapladı;
     `dense` boşluğu dolduracak öğe üretemez). Son öğe satırın
     kalanını kaplayınca toplam 30 hücre = tam 10 satır oluyor ve
     ızgara düz bir kenarla bitiyor.
     İki ve dört kolonda gerek YOK: 26 ve 28 hücre zaten tam bölünüyor. */
  /* `grid-row:auto` ŞART: kolonu buradan, satırı desen kuralından alan
     bir son öğe 4 kolonda 1×2'lik dikey şeride dönüşüyordu (Codex
     2026-09-09). İkisini birlikte sıfırlamak bunu CASCADE ile kesin
     kapatıyor: 75rem'de sonraki eş özgüllüklü kural hem `grid-column`
     hem `grid-row` değerini `auto` yapıyor, `7n+1` deseninden kalan
     `row span 2` yaşayamıyor.
     ⚠ Bunu kanıtlayan şey cascade; ölçümdeki `height > width*1.4`
     testi DEĞİL — bozuk 1×2 öğe 416/319 = 1,30 oranında olurdu ve o
     testi geçerdi (test kötü kalibreydi, Codex yakaladı).

     ⚠ "Öğe sayısından bağımsız" DEĞİL. İlk ölçümüm yalnız SON SATIRIN
     boşluğuna bakıyordu; ızgaranın İÇİNDEKİ delikleri saymıyordu.
     Gerçek boş hücre sayısı (Codex'in yerleştirme modeli):
       öğe:      14  15  16  17  18  19
       2 kolon:   0   0   1   0   1   0
       3 kolon:   0   2   1   0   2   1
       4 kolon:   2   1   1   0   3   2
     Yani bugünkü 17 öğe üç kırılımda da TAM doluyor; başka her sayıda
     delik var. `grid-row:auto` alt kenarı düzleştiriyor ama toplam
     boşluğu her zaman azaltmıyor (15 öğede `:not()` zinciri 1, bu
     kalıp 2 delik bırakıyor). Seçilme sebebi az boşluk değil, dikey
     şerit riskini cascade ile kesin kapatması ve daha basit olması.

     GALERİYE GÖRSEL EKLENİRSE üç kırılım da yeniden ölçülmeli. Çözüm
     CSS ile yazılabilir ama tek bildirimle değil: `:last-child:nth-child(28n+14)`
     gibi sayı kalıpları kodlanır (periyot 7×4 = 28'de tekrar eder).
     17 öğe için gerekmedi, o yüzden yazılmadı. */
  .galeri--bento > :last-child{grid-column:span 3;grid-row:auto}
}
@media(min-width:75rem){
  .galeri--bento{--galeri-satir:200px;grid-template-columns:repeat(4,1fr)}
  /* Dört kolonda desen zaten tam bölünüyor; üç kolon düzeltmesi geri alınır. */
  .galeri--bento > :last-child{grid-column:auto;grid-row:auto}
}

/* --- inşaat zaman çizelgesi ----------------------------------------
   3 dönem yan yana; her adımın üstünde ince bir ilerleme çubuğu var ve
   çubuğun dolu kısmı o dönemin oranı kadar (--oran değil, inline yok:
   oranlar sabit üç değer olduğu için nth-child ile veriliyor — sayı
   HTML'de METİN olarak da duruyor, yani çubuk kaybolsa bilgi kalıyor). */
.zaman{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;margin:0;padding:0}
.zaman__adim{padding:var(--s-5) var(--s-5) var(--s-5) 0;border-top:2px solid var(--cizgi);position:relative}
.zaman__adim::before{
  content:"";position:absolute;top:-2px;left:0;height:2px;background:var(--vurgu);
  width:var(--oran,0%);
}
/* ⚠ Oran SIRAYA değil ÖĞENİN KENDİ VERİSİNE bağlı. Önceki hâli
   `nth-child` ile sabitti: HTML'de dönemlerin sırası değişince Haziran
   %72 metni %45'lik çubuk alıyordu ve bu SESSİZCE oluyordu (Codex
   bellekte yer değiştirerek üretti). Artık oran öğenin `style="--oran:%"`
   değerinden geliyor — metin ve çubuk aynı kaynaktan besleniyor. */
/* SÜREÇ İŞLİYOR SİNYALİ (Osman 2026-09-10: "progress barda loading gibi
   bir şey, süreç devam ediyor çalışıyor hissiyatı").
   Yalnız SON adımda: ilk iki dönem kapanmış bildirimler, canlı olan
   sonuncusu. Nabız çubuğun BİTTİĞİ noktada — "buraya kadar geldi,
   devam ediyor" okuması veriyor.
   Renk hard-code edilmiyor: `--vurgu`dan türetiliyor. */
.zaman__adim:last-child::after{
  content:"";position:absolute;top:-4px;left:var(--oran,0%);
  width:6px;height:6px;border-radius:50%;
  background:var(--vurgu);transform:translateX(-50%);
  animation:zamanNabiz 2s ease-in-out infinite;
}
@keyframes zamanNabiz{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--vurgu) 55%,transparent)}
  70%     {box-shadow:0 0 0 9px color-mix(in srgb,var(--vurgu) 0%,transparent)}
}
/* Hareket istenmiyorsa nokta DURUR ama KALIR: "devam ediyor" bilgisi
   animasyona değil noktanın varlığına bağlı. */
:root[data-az-hareket="1"] .zaman__adim:last-child::after{animation:none}
.zaman__donem{
  margin:0;font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);text-transform:uppercase;color:var(--ink-soft);
}
.zaman__oran{
  margin:var(--s-3) 0 0;font-size:var(--fs-xl);font-weight:var(--fw-orta);
  letter-spacing:-.03em;line-height:1;color:var(--deep);
  font-variant-numeric:lining-nums tabular-nums;
}
.zaman__not{margin:var(--s-3) 0 0;font-size:var(--fs-sm);line-height:1.65;color:var(--ink-soft);max-width:32ch}

/* --- iletişim ------------------------------------------------------
   4 kolonlu ızgarada sol blok 2 kolon, künye 2 kolon. .neden ile
   aynı kural: column-gap YOK, ayrım öğe içi padding'de — gap verilirse
   kolon genişliği düşüp ızgara çizgisinden kayıyor. */
/* Karakalem filigranı: projenin kurşun kalem çizimi iletişim bölümünün
   arkasında %10 opaklıkta duruyor (Osman 2026-09-09). Pseudo-element,
   `<img>` DEĞİL: salt dekoratif olduğu için DOM'a ve erişilebilirlik
   ağacına girmiyor, ayrıca `opacity` yalnız filigranı etkiliyor —
   `<img>` olsaydı metni de soldurmamak için ayrı katman gerekirdi.
   `isolation` şart: `z-index:-1` olan katman bölüm zemininin ALTINA
   değil, bölümün KENDİ yığın bağlamının altına insin. */
/* KARAKALEM FİLİGRANI — TEK GÖRSEL, İKİ BÖLÜM (Osman 2026-09-09:
   "f.a.q ile en alttaki iletişim kendini tekrarlamasın, tek bg olsun
   yayılsın, sol üstten hizalı olsun").
   ⚠ İLK DENEMEM YANLIŞTI: kuralı `#sss` ve `.iletisim`'e AYRI AYRI
   verdim — iki bölümün her biri kendi filigranını çizdi ve çizim alt
   alta TEKRARLADI. Doğrusu iki bölümü saran tek kapsayıcı; filigran
   onun ::before'unda, bütün alana bir kez yayılıyor.
   Konum `left top`: Osman'ın istediği sol üst hiza. */
/* ⚠ `overflow:hidden` DEĞİL `clip` (Codex 2026-09-09): `hidden` bu
   kapsayıcıyı en yakın KAYDIRMA KONTEYNERİ yapıyor ve içindeki
   `.bilgi-duzen__yan` sticky bloğu sayfa kaydırmasına göre yapışmayı bırakıyor.
   `clip` kırpar ama kaydırma konteyneri kurmaz — aynı tuzak projede
   daha önce `body{overflow-x:hidden}` ile yaşanmıştı. */
.filigranli{position:relative;isolation:isolate;overflow:clip}
.filigranli::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/proje/karakalem.webp") left top / cover no-repeat;
  opacity:.04;                    /* .1 → .06 → .04 (Osman 2026-09-09) */
  /* Üstten aşağı hafifçe sönüyor: çizimin sert kenarı iki bölümün
     birleştiği yerde çizgi bırakmasın. */
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);
          mask-image:linear-gradient(to bottom,#000 70%,transparent);
}
/* `.iletisim` ve `#sss` kendi konumlandırma kuralları 2026-09-09'da
   SİLİNDİ: iki bölüm `.filigranli > .bilgi-duzen` düzenine taşındı,
   filigran katmanı artık kapsayıcıda. `.iletisim` sınıfı hiçbir
   sayfada kalmadı (tarama: 0 kullanım). */
.iletisim__ic{display:grid;grid-template-columns:1fr 1fr;column-gap:0;align-items:start;position:relative}
/* GÖRSELLİ KULLANIM DİKEYDE ORTALI (Osman 2026-09-10).
   Temel kural `align-items:start` KALIYOR: bu bileşen iletişim
   formunda ve künyede de kullanılıyor, orada iki kolonun üstten
   hizalanması doğru. Varyant yalnız sağında GÖRSEL olan bölümler için
   (proje.html #konum ve #yatirim). Ölçüldü @1280px: #konum metin 565px
   / görsel 736px → merkezler 85px kayık, #yatirim 36px kayık.
   ⚠ Varyant temel sınıfla BİRLİKTE yazılıyor (`.iletisim__ic.--ortali`
   biçimi): tek başına yazılsaydı aynı özgüllükte kalır ve yalnız
   kaynak sırasına dayanırdı — bu projede aynı hata üç kez ısırmış. */
.iletisim__ic.iletisim__ic--ortali{align-items:center}
.iletisim__sol{padding-right:var(--s-7)}
/* ZİGZAG (Osman 2026-09-10: "bunu ters çevir, görsel solda olsun,
   zigzag mantığı"). Bir üstteki #yatirim bölümünde görsel sağda;
   #gelecek'te sola geçince sayfa aşağı inerken göz sağ-sol değişiyor.
   `order` DEĞİL açık `grid-column`: ızgara hücreleri adreslendiği için
   kaynak sırası (metin önce) korunuyor — ekran okuyucu ve klavye
   içeriği yine metinden başlayarak okuyor. */
.iletisim__ic--ters .iletisim__sol{grid-column:2;grid-row:1;padding-right:0;padding-left:var(--s-7)}
.iletisim__ic--ters .gorsel{grid-column:1;grid-row:1}
/* Tek kolona inince adresleme kalkıyor, akış kaynağa dönüyor. */
@media(max-width:60rem){
  .iletisim__ic--ters .iletisim__sol{grid-column:1;grid-row:auto;padding-left:0}
  .iletisim__ic--ters .gorsel{grid-column:1;grid-row:auto}
}
/* YAPIŞKAN SOL KOLON (Osman 2026-09-10: "#kunye alanı okey ama sticky
   olmamış"). Yeni kalıp İCAT EDİLMEDİ: anasayfadaki .bilgi-duzen__yan
   ile birebir aynı — aynı --capa-payi ofseti, aynı 60rem kapanışı.
   ⚠ .iletisim__ic üzerindeki align-items:start ZORUNLU; stretch olsaydı
   ızgara hücresi tam yükseklik olur ve sticky kayacak pay bulamazdı.
   ⚠ Çıplak .iletisim__sol DEĞİL modifier: aynı sınıf #konum, #yatirim,
   #gelecek ve iletişim formunda da kullanılıyor; oralarda sağ kolon
   kısa, yapışmanın anlamı yok ve boş alan üretirdi. */
.iletisim__sol--yapiskan{position:sticky;top:var(--capa-payi)}
@media(max-width:60rem){.iletisim__sol--yapiskan{position:static}}

.iletisim__eylem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-6)}

/* KÜNYE KART DİLİNE ALINDI (Osman 2026-09-09: "Projeyi yerinde görün
   alanındaki font vs. olaylarını da düzelt"). Çizgili ad-değer listesi,
   sayfanın geri kalanı kart yüzeyine geçtiği hâlde geride kalmıştı;
   değerler de 14px'te duruyordu.
   `dl/dt/dd` SEMANTİĞİ KORUNUYOR — yalnız yüzey ve ölçü değişti, ekran
   okuyucu hâlâ "terim / tanım" çiftleri duyuyor.
   Bileşen üç yerde kullanılıyor (index #iletisim, iletisim.html,
   proje.html #kunye) — üçü birden aynı dile geçiyor. */
.kunye{
  margin:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:48rem){.kunye{grid-template-columns:1fr}}
.kunye__satir{
  background:var(--tas-2);border-radius:var(--r-yuzey);
  padding:clamp(var(--s-5),2.2vw,var(--s-6));
  display:flex;flex-direction:column;gap:var(--s-3);
}
.kunye dt{
  font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);text-transform:uppercase;color:var(--ink-soft);
}
/* Değer --fs-sm'den --fs-lg'ye: etiket 12px ile arasında okunur bir
   basamak var. --fs-xl (27,2px) DEĞİL — künye değerleri uzun cümleler
   olabiliyor ("Prof. Dr. A. İlhan Özdemir Devlet Hastanesi, üniversite,
   otogar ve sahil yolu bağlantısı…"), o ölçüde paragraf gibi taşardı. */
.kunye dd{
  margin:0;font-size:var(--fs-lg);line-height:var(--lh-kart);
  color:var(--deep);text-wrap:pretty;
}

/* Etiket + ikon aynı satırda, ikon sağ üstte — tasarim-sistemi.md §3
   ve `.olcut__ust` ile aynı desen. `:has()` ile KOŞULLU: ikonsuz künye
   (index #iletisim, proje.html #kunye) etkilenmiyor. */
.kunye__satir:has(.kunye__ikon) dt{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
.kunye__ikon{flex:none;color:var(--ink-soft)}
.kunye__ikon svg{
  width:26px;height:26px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

/* --- footer --------------------------------------------------------- */
.dipnot{
  position:relative;background:var(--deep-2);color:var(--tas-2);
  padding-block:var(--bosluk-bolum) var(--s-6);
  --izgara:rgba(237,238,240,.07);--cizgi:rgba(237,238,240,.14);
}
/* 3 → 4 blok (Osman 2026-09-09: "footer'da eski kalmış"). Marka + üç
   gezinme sütunu. Yeni sayfalar (galeri, iletişim, inşaat) ve
   Dr. Öner Hekim footer'da hiç yoktu; "Konut ve ofis" ile "Kat planları"
   ise AYNI hedefe gidiyordu (daireler.html) — tekrar kaldırıldı. */
.dipnot__ic{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;column-gap:var(--s-4);row-gap:var(--s-7)}
@media(max-width:64rem){.dipnot__ic{grid-template-columns:1fr 1fr}}
/* DUPLICATE SİLİNDİ (2026-09-10): burada ayrıca `@media(max-width:38rem)
   {.dipnot__ic{grid-template-columns:1fr}}` vardı. Aynı değer aşağıda
   §"hero: telefon bandı" bloğunda (satır ~3428) TEKRAR yazılıyor —
   ama aradan `@media(max-width:60rem){.dipnot__ic{grid-template-columns:
   1fr 1fr}}` geçiyor (kaskad sırası: bu satır → 60rem bloğu → alttaki
   38rem bloğu). Metinde "İKİNCİ"yi silmek yanlış olurdu: 60rem bloğu
   burayı zaten geçersiz kılıyordu, gerçek son sözü alttaki 38rem bloğu
   söylüyor. Bu yüzden BİRİNCİSİ (asıl ölü kod) silindi, ikincisi
   dokunulmadan kaldı — görünen sonuç (dar ekranda 1 kolon) DEĞİŞMEDİ. */
.dipnot__marka{padding-right:var(--s-8)}
.dipnot__marka .logo{height:16px;width:auto;color:#fff}
.dipnot__metin{margin:var(--s-5) 0 0;font-size:var(--fs-sm);line-height:var(--lh-govde);color:rgba(237,238,240,.66);max-width:44ch}
/* Ortak marka künyesi (Osman 2026-09-09). Beyaz kutu ZORUNLU: logonun
   kendi renkleri (#004899 / #9e1a16 / ince gri bina çizimi) --deep-2
   zemininde okunmuyor; beyaza çevirmek marka renklerini yok ederdi.
   `inline-block` — kutu logonun genişliği kadar, sütunu doldurmuyor. */
/* ORTAK MARKA ŞERİDİ (Osman 2026-09-10: "footer'dan kaldıralım, tüm
   sitelerde footer'ın bir üstüne ekleyelim, biraz daha büyük ama
   full-width olmayacak"). `.dipnot__ortak` kuralları SİLİNDİ, üstüne
   yazılmadı — künye artık footer sütunlarının içinde değil.
   Beyaz kutu da gerekmiyor: şerit kendi açık zeminini taşıyor, logonun
   kendi renkleri (mavi/bordo) doğrudan okunuyor.
   Genişlik `.wrap` ile sınırlı ve ortalı — tam genişliğe yayılmıyor. */
/* --- kapanış CTA'sı: metin solda, ortak marka künyesi sağda ----------
   Osman 2026-09-10 (ekran görüntüsü): "bilgi ve randevu alın solda, bu
   görsel sağda olacak şekilde tek CTA alanına çevirebiliriz". Öncesinde
   CTA'nın sağ yarısı TAMAMEN boştu ve künye hemen altında AYRI bir bant
   olarak duruyordu — iki bant tek bölüme indi.
   Yalnız #talep'i OLAN beş sayfada geçerli (daireler, galeri, haberler,
   insaat, olanaklar). Kalan dördünde şerit footer'da kaldı: onların
   kendi kapanış bölümleri var (bkz. sayfa-uret.mjs > markaSeridi ve
   php/parts/footer.php'deki aynı koşul). */
.talep{display:grid;gap:var(--s-6);align-items:center}
/* İki sütun ancak künye kendi asgari genişliğini alabildiğinde anlamlı;
   altında tek sütuna düşüp künye metnin ALTINA geçiyor. */
@media(min-width:60rem){.talep{grid-template-columns:1fr auto;gap:var(--s-8)}}
.talep .bolum__bas{margin:0}
.talep__kunye{justify-self:end}
/* Mobilde ORTALI (Osman 2026-09-10: "o Ömer Hekim görseli ortalı olsun,
   sola hizalı olmasın"). Tek kolona inince künye CTA metniyle aynı sol
   hizada duruyordu ve yanında geniş boş alan kalıyordu. */
@media(max-width:60rem){.talep__kunye{justify-self:center}}
/* .marka-serit img'den bir tık küçük: orada künye tek başına ve ortada,
   burada CTA metniyle aynı satırda ağırlık paylaşıyor. */
.talep__kunye img{display:block;width:clamp(300px,32vw,460px);height:auto}

.marka-serit{background:var(--gok);padding-block:var(--s-7)}
.marka-serit .wrap{display:flex;justify-content:center}
/* 240px → 360px: "biraz daha büyük". Üst sınır var, şerit değil künye.
   360px → 540px (2026-09-10, Osman "görsel %50 oranında büyüsün"):
   her üç değer de %50 artırıldı. Kaynak 760px olduğu için 540px'te
   hâlâ 1,4x piksel yoğunluğu kalıyor, bulanıklaşmıyor.
   Zemin BEYAZ DEĞİL: künyenin kendi beyaz arka planı görselden
   kaldırıldı (flood-fill, %62,7 saydam), böylece şeridin kendi zemini
   görünüyor ve açık gri üstünde beyaz bir kutu durmuyor
   (Osman: "bg arka planla aynı renkte olabilir, beyaz olmasın"). */
.marka-serit img{display:block;width:clamp(330px,39vw,540px);height:auto}
.dipnot__sutun{display:grid;align-content:start;gap:var(--s-3)}
.dipnot__bas{
  margin:0 0 var(--s-2);font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:var(--fw-orta);
  letter-spacing:var(--ls-etiket);text-transform:uppercase;color:rgba(237,238,240,.55);
}
/* rgba(237,238,240,.82) #131416 üstünde ~11:1 — AA fazlasıyla geçiyor.
   Hover'da tam beyaza çıkıyor, ayrıca alt çizgi geliyor (renk TEK
   ayırt edici işaret olmasın, WCAG 1.4.1). */
.dipnot__sutun a{color:rgba(237,238,240,.82);font-size:var(--fs-sm);min-height:var(--dokunma);display:flex;align-items:center}
.dipnot__sutun a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dipnot__adres{font-size:var(--fs-sm);line-height:var(--lh-govde);color:rgba(237,238,240,.55)}
.dipnot__alt{
  grid-column:1 / -1;margin:var(--s-6) 0 0;padding-top:var(--s-5);
  border-top:1px solid var(--cizgi);
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between;
  font-size:var(--fs-sm);line-height:1.65;color:rgba(237,238,240,.55);
}
.dipnot__uyari{max-width:62ch}

/* --- hareket: İÇERİK VARSAYILAN GÖRÜNÜR ---------------------------- */
[data-anim]{opacity:1}
.js [data-anim]{opacity:0;transform:translateY(16px)}
:root[data-az-hareket="1"] .js [data-anim]{opacity:1!important;transform:none!important}
  /* ⚠ KÖKÜN KENDİSİ AYRI YAZILIYOR: `*` yalnız kökün ALTINDAKİ öğeleri
     seçer, `<html>`i seçmez — ve `scroll-behavior:smooth` tam orada
     tanımlı (satır ~367). Anahtar (`AZ_HAREKET_ONURLANDIR`) true
     yapıldığında "İçeriğe atla" gibi native kök kaydırmaları yumuşak
     kalır, yani "tek satır geri alma" sözü eksik çalışırdı
     (Codex 2026-09-10). Şu an anahtar false olduğu için bu blok hiç
     uygulanmıyor; kural sözleşmeyi tamamlamak için var. */
  :root[data-az-hareket="1"]{scroll-behavior:auto!important}
  :root[data-az-hareket="1"] *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* `*` sözde-elemanları SEÇMEZ: yeni sol işaretin scaleY geçişi
     (320ms) az-hareket tercihinde çalışmaya devam ediyordu
     (Codex 2026-09-08). Açıkça kapatılıyor. */
  
:root[data-az-hareket="1"] *::before,
:root[data-az-hareket="1"] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}

/* --- duyarlı --------------------------------------------------------
   ÜÇ BANT, hepsi sahipli. Daha önce yalnız 60rem ve 38rem vardı ve
   601–1199px aralığında gezinme diye bir şey yoktu (menü 62rem'de
   açılıyor, hamburger hiç yoktu) — yani BÜTÜN TABLETLER menüsüzdü.
   Aynı hata benzer bir projede tabletlerde alt menüleri tamamen
   erişilemez yapmıştı; bant burada bilerek adlandırıldı:

     masaüstü  ≥ 75rem (1200px)   tam düzen, yatay menü
     tablet    48–74,99rem        hamburger + 2 kolon ızgara
     telefon   < 48rem (768px)    hamburger + tek kolon

   Aralık sözdizimi (max-width:74.99rem yerine) kullanılmıyor çünkü
   kurallar üst üste binmeden max-width zincirinde kuruluyor; ama
   75rem/1200px'te menü kuralı ile hamburger kuralı BİRBİRİNİ TAMAMLIYOR
   (biri min, diğeri yokluğunda görünür) — 1199,5px'te boşluk kalmıyor. */

/* --- kat planları: üç kademeli düzen (Osman 2026-09-08) --------------
   Genişlik hesabı --wrap = min(100% − 2×--pad-x, 90rem), --pad-x =
   clamp(20px,4vw,72px). Üç kolonda pafta kutusu:
     1440px → wrap 1324,8 → kart 441 → pafta ~425px
     1200px → wrap ~1104  → kart 368 → pafta ~352px
     1024px → wrap  ~942  → kart 314 → pafta ~298px  ← alt sınır
   298px'in altında tipik kat paftası bilgi değil gürültü oluyor
   (aynı gerekçe plan görüntüleyicinin var oluş sebebi). Bu yüzden
   1024px'te ikiye, 768px'te karusele düşüyor.

   Karusel mekaniği olanaklar şeridiyle AYNI: native yatay kaydırma +
   scroll-snap, JS yok. Gerekçe orada yazılı — tower.js bir kez çöküp
   iç sayfaları boşaltmıştı; native kaydırmada JS ölse bile kartlar
   okunur, klavye ve dokunma kendiliğinden çalışır. */
@media(max-width:64rem){
  .katplan__liste{grid-template-columns:repeat(2,1fr);row-gap:var(--s-7)}
  /* Izgara 3 span; kartlar artık 2 kolon → çizgi kart sınırından kayar.
     Salt dekoratif olduğu için gizleniyor, hizasız bırakılmıyor. */
  .katplan .izgara{display:none}
}
@media(max-width:48rem){
  .katplan__liste{
    display:grid;grid-auto-flow:column;
    /* ⚠ ZORUNLU: 64rem bloğunun `repeat(2,1fr)` değeri buraya MİRAS
       KALIYOR. Sıfırlanmazsa ilk iki kart açık kolonlara oturuyor,
       yalnız üçüncüsü örtük kolona düşüyor ve `grid-auto-columns`
       üçünü eşitleyemiyor (Codex 2026-09-08 çürüttü — ben yalnız CSS
       okuyup "üç kademe çalışıyor" demiştim, dar ekranı ölçmemiştim). */
    grid-template-columns:none;
    /* `minmax(0,…)` DEĞİL kesin ölçü: alt sınır 0 olunca ızgara kartları
       kabın genişliğine sıkıştırıyor ve taşma hiç doğmuyor (olanaklar
       şeridinde ölçüldü: kart 141px, scrollWidth == clientWidth). */
    grid-auto-columns:clamp(248px,76vw,330px);
    gap:var(--s-4);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:var(--s-2);
  }
  .katplan__liste::-webkit-scrollbar{display:none}
  .katplan__kart{scroll-snap-align:start;padding-inline:0}
}


/* ---- tablet ve altı: kat planı tek kolona ------------------------- */
/* Neden 60rem değil 75rem: iki pafta yan yana kalırsa 1000px'lik bir
   tablette her pafta ~470px'e iniyor ve kat planındaki oda isimleri /
   mobilya çizimleri okunmaz oluyor. Plan okunurluğu, yan yana
   göstermekten önemli — tek kolonda pafta bandın tam genişliğini alıyor. */
@media(max-width:75rem){
  /* 961–1199 KÖR BANDI: bu aralıkta olanak kartları 3 kolonda 303px'e
     iniyor ve başlıklar sarıyordu (ölçüldü 1024px'te). Bant artık
     sahipli — kartlar 2 kolona geçiyor. */
  /* `.olanaklar` KALDIRILDI: artık 3 kolonlu ızgara değil karusel;
     açık kolon tanımı `grid-auto-flow:column` düzenini bozuyordu. */
  .tipler{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:60rem){
  /* `.olanaklar` KALDIRILDI: artık 3 kolonlu ızgara değil karusel;
     açık kolon tanımı `grid-auto-flow:column` düzenini bozuyordu. */
  .tipler{grid-template-columns:repeat(2,1fr)}
  .zaman{grid-template-columns:1fr 1fr}
  .iletisim__ic{grid-template-columns:1fr;row-gap:var(--s-8)}
  .iletisim__sol{padding-right:0}
  .dipnot__ic{grid-template-columns:1fr 1fr}
  .dipnot__marka{grid-column:1 / -1;padding-right:0}
}

@media(max-width:48rem){
  /* Başlık ve "Tüm planlar" düğmesi 768px'te yan yana sığmıyor:
     h2 20ch'lik satırıyla düğmeyi kenara sıkıştırıp iki satıra kırıyordu. */
  .katplan__bas{flex-direction:column;align-items:flex-start}
  .katplan__alt{gap:var(--s-3)}
  /* Teslim bloğu sağa yaslıyken çiplerin altına düşüp ortada boşluk
     bırakıyordu; dar ekranda çiplerin yanına, sola hizalı geliyor. */
  .katplan__teslim{margin-left:0;text-align:left}
}

/* --- hero: tablet bandı (768–960) ---------------------------------
   Hero yüksekliği 100svh'e kilitli ve içerik alta yaslı; tablette
   ölçüldü (2026-09-08, kırılım tezgâhı 768px): başlığın ÜSTÜNDE 306px
   boş alan kalıyordu — telefonda 250px, masaüstünde 243px. Yani en çok
   boşluk en dar tablette birikiyordu. Alt boşluk kısılınca içerik
   bloğu yukarı geliyor ve bant masaüstüyle aynı oranı yakalıyor. */
@media(max-width:60rem){
  .hero__ic{padding-block:var(--pay-ustbar) clamp(var(--s-6),6vh,var(--s-8))}
  .hero__ic .metin{max-width:52ch}
}

/* Telefonda kenar boşlukları: --pad-x 20px → 12px, hero çerçevesi
   16px → 8px. Token düzeyinde yapılıyor ki .wrap kullanan BÜTÜN
   bölümler aynı hizada kalsın; yalnız hero'yu genişletmek sayfanın
   geri kalanıyla hiza kaybı üretirdi. */
@media(max-width:38rem){
  /* --pad-x DEĞİŞMİYOR (20px): onu kısmak metni kart kenarına yapıştırır
     ("sıfıra sıfır kalmasın" — Osman). Yalnız çerçeve inceliyor:
     kart 8px'e geliyor, metin ekran kenarından yine 20px'te kalıyor,
     yani KART İÇİ boşluk 4px'ten 12px'e ÇIKIYOR. Görünen dolu alan
     her iki yanda 8px büyüyor. */
  :root{--hero-bosluk:8px}
}

/* --- hero: telefon bandı ------------------------------------------ */
@media(max-width:38rem){
  /* Osman 2026-09-08 (320px kırılım tezgâhında): "bu kenarlar çok boş
     kalmış, biraz daha genişletmek lazım".
     ÖLÇÜLDÜ: telefonda içerik genişliği = viewport − 2×--pad-x = 280px
     (320'de). Ayrıca hero kartının 16px'lik BEYAZ ÇERÇEVESİ var, yani
     göz iki ayrı boşluk görüyor: kart çerçevesi + iç boşluk.
     İkisi birlikte kısılıyor — yalnız birini kısmak farkı yaratmıyor
     çünkü içerik genişliği hero boşluğundan BAĞIMSIZ
     (.hero > .hero__ic telafisi onu geri ekliyor).
     Yeni: içerik = viewport − 24 (320'de 296px, +16px), çerçeve 8px. */

  /* ÖLÇÜLDÜ: 320/390/430'da iki düğme alt alta düşüyor ama genişlikleri
     169px ve 198px, kap ise 280–390px — yani sola yaslı, sağda 82–111px
     boşlukla DÜZENSİZ duruyorlardı. Dikey dizilimde iki farklı genişlik
     kenar hizasını bozuyor. Alt alta düşen CTA tam genişlik olur. */
  .hero__eylem{width:100%;margin-top:var(--s-6)}
  .hero__eylem .btn{flex:1 1 100%;justify-content:center}
}

/* 320px'te (eski iPhone SE / dar Android) başlık DÖRT satıra düşüyordu:
   kap 280px, "Giresun'un merkezinde" 32px'te ~336px istiyor → ilk
   segment ikiye kırılıyor ve "Giresun'un / merkezinde" ayrışıyordu.
   26px'te aynı dize ~273px: tek satırda kalıyor, başlık 2 satır.
   Ölçüm o gün Geist 600'e göreydi (56px'te 587,8px; 1ch = 37,1px).
   2026-09-09 font değişiminde bu kural DOĞRUDAN ölçülemedi: Chrome
   macOS'ta pencereyi 320px'e indirmiyor (istendi, innerWidth 500'de
   kaldı). Kural yine de güvenli tarafta: Inter Tight ölçülen şekilde
   Geist'ten ~%5 DAR (1ch 35,27 vs 37,1) → aynı dize daha az yer
   istiyor, 320px'te durum kötüleşemez. Gerçek cihazda doğrulanmalı. */
@media(max-width:22rem){
  .hero__ic .h1{font-size:26px}
}

@media(max-width:38rem){
  .tipler{grid-template-columns:1fr}
  .hero__ic .h1{max-width:none}
  .ic-bas .h1{max-width:none}
  .kunye__satir{grid-template-columns:1fr;gap:var(--s-2)}
  .zaman{grid-template-columns:1fr}
  .zaman__adim{padding-right:0}
  .dipnot__ic{grid-template-columns:1fr}
  .dipnot__alt{flex-direction:column;gap:var(--s-3)}
}

/* --- KOYU RAKAM ŞERİDİ (Osman 2026-09-09, referans ekran görüntüsü) ---
   Eski `.seri` (çizgili açık şerit) bunun yerini aldı. Desenden ÖLÇÜLEN:
   koyu kart · ortada nokta+etiket, iki yanında ince çizgi · altında
   başlık · en altta 4 hücre, aralarında dikey ayırıcı.
   Şeridin dört değeri (56 · 9 · 3 · proje alanı m²).
   Başlık uydurulmadı — eski bölümün `aria-label`'ı görünür hâle geldi. */
.bolum--sayilar{padding-block:var(--bosluk-bolum)}
.sayilar{
  background:var(--deep-2);border-radius:var(--r-yuzey);
  padding:clamp(var(--s-6),4vw,var(--s-8)) clamp(var(--s-5),3vw,var(--s-7));
  color:var(--tas-2);text-align:center;
}
/* Etiket iki yanındaki çizgi: dekoratif, `::before/::after` ile —
   markup'a boş `<span>` eklemiyoruz. */
.sayilar__etiket{
  display:flex;align-items:center;justify-content:center;gap:var(--s-4);
  margin:0 0 var(--s-4);
  font-size:var(--fs-xs);font-weight:var(--fw-orta);letter-spacing:var(--ls-etiket);
  text-transform:uppercase;color:rgba(237,238,240,.72);
}
.sayilar__etiket::before,.sayilar__etiket::after{
  content:"";height:1px;flex:1;max-width:clamp(40px,18vw,280px);
  background:rgba(237,238,240,.18);
}
.sayilar__bas{
  margin:0 0 clamp(var(--s-6),4vw,var(--s-8));
  font-size:var(--fs-2xl);font-weight:var(--fw-baslik);
  line-height:var(--lh-baslik);letter-spacing:var(--ls-h2);
  color:#fff;text-wrap:balance;
}
.sayilar__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
/* Ayırıcı hücrenin KENDİ kenarında: ilk hücrede yok, böylece kenarda
   asılı çizgi kalmıyor. Şerit tek satırdan çok satıra düştüğünde de
   doğru çalışır (nth-child ile sayıya bağlanmadı). */
.sayilar__hucre + .sayilar__hucre{
  border-left:1px solid rgba(237,238,240,.14);
}
.sayilar__hucre{padding:0 clamp(var(--s-3),2vw,var(--s-5))}
.sayilar__deger{
  margin:0;font-size:clamp(2rem,4.4vw,3.5rem);font-weight:var(--fw-baslik);
  line-height:1.05;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:lining-nums tabular-nums;
}
.sayilar__alt{
  margin:var(--s-2) 0 0;font-size:var(--fs-sm);line-height:var(--lh-govde);
  color:rgba(237,238,240,.68);text-wrap:balance;
}
/* Dört hücre telefonda yan yana sıkışıyor: 2×2'ye düşüyor ve dikey
   ayırıcılar satır başlarında kesiliyor. */
/* ⚠ ÖZGÜLLÜK TUZAĞI (Codex 2026-09-09): ayırıcıyı `.sayilar__hucre +
   .sayilar__hucre` (0,2,0) veriyor; mobil sıfırlamayı tek sınıfla
   (0,1,0) yazmak ONU YENEMİYORDU — medya sorgusu özgüllüğü değiştirmez.
   ≤416px'te ikinci ve dördüncü hücrenin sol çizgisi kalıyordu.
   Sıfırlamalar aynı kardeş seçici üzerinden yazıldı. */
@media(max-width:48rem){
  .sayilar__liste{grid-template-columns:repeat(2,1fr);gap:var(--s-6) 0}
  .sayilar__hucre + .sayilar__hucre:nth-child(odd){border-left:0}
}
@media(max-width:26rem){
  .sayilar__liste{grid-template-columns:1fr;gap:var(--s-5)}
  .sayilar__hucre + .sayilar__hucre{border-left:0}
}

/* ===================================================================
   FİLM ŞERİDİ — kaydırdıkça açılıp kapanan video
   -------------------------------------------------------------------
   Osman 2026-09-09: "ilk başta videonun boyutu böyle olsun, sonra
   scroll oldukça tam ekrana doğru büyüsün, bitmeye yaklaşınca yine
   normal sol sağ boyutuna gelsin ve alttaki içerikler gelsin."

   MEKANİZMA — neden `clip-path`, neden `width` DEĞİL:
   video HER KAREDE tam ekran boyutunda render edilir; değişen tek şey
   kırpma dikdörtgeni. `width/height` animasyonu her karede yeniden
   YERLEŞİM ister (layout → paint → composite) ve kaydırmayı takar;
   `clip-path` yerleşime dokunmaz. Video kutusu hiç kıpırdamadığı için
   düzen kayması (CLS) da üretmez.

   Ölçüleri `tower.js > filmSeridi` yazar. JS yoksa/çökerse aşağıdaki
   yedek değerler geçerli kalır: video wrap genişliğinde, yuvarlak
   köşeli, sabit durur — bozuk değil, yalnız hareketsiz.
   =================================================================== */
.bolum--film{padding-block:0}

/* Kaydırma mesafesini bu ray verir; sticky kap onun İÇİNDE yapışır.
   (Ders: `position:sticky` yalnız kendi ata kutusunun içinde yapışır —
   ray kısa olursa video erken bırakır.)
   ⚠ Yüksekliği CSS DEĞİL `tower.js > filmSeridi > rayAc()` verir: JS
   yüklenmezse burada sabit 280vh yazsaydı boş bir kaydırma çölü kalırdı.
   JS yoksa bölüm normal akışta kısa bir video kutusu olarak durur. */
.film__ray{position:relative}

/* TABAN DÜZEN — JS'siz de doğru olan hâl: akışta sıradan bir 16:9 kutu.
   Sticky, tam ekran yüksekliği ve kırpma AŞAĞIDA, `--etkin` sınıfıyla
   açılıyor; o sınıfı yalnız `tower.js > rayAc()` ekliyor.
   Neden böyle: önce sticky/100svh taban kuraldı ve JS yüklenmezse GENİŞ
   ekranda video ekranı dolduran, kenarlarından kırpılmış bir kutu olarak
   kalıyordu (Codex 2026-09-09 çürüttü — "kısa 16:9 kutu" fallback'i
   gerçekleşmiyordu). */
.film__kap{
  position:static;margin:0;overflow:hidden;
  border-radius:var(--r-yuzey);
}
.film__video{
  display:block;width:100%;height:auto;aspect-ratio:1600 / 1067;object-fit:cover;
  /* Yer tutucu zemin videonun KENDİ arka planına uyar: Osman 2026-09-09'da
     videoyu beyaz arka planlı sürümüyle değiştirdi (dosya adı
     "arka_plan_rengini_f_f_f_yap_"), koyu yer tutucu poster yüklenene
     kadar ters bir kare gösteriyordu. */
  background:var(--tas-2);
}

/* EFEKT AÇIK — yalnız JS kurulduğunda, geniş ekranda, hareket istenirken */
.film__ray--etkin .film__kap{
  position:sticky;top:0;
  height:100svh;            /* svh: mobil adres çubuğu açılıp kapanınca zıplamasın */
  border-radius:0;          /* yuvarlaklık artık clip-path'in işi */
}
.film__ray--etkin .film__video{
  height:100%;aspect-ratio:auto;
  clip-path:inset(
    var(--film-dikey,12vh)
    var(--film-yatay,var(--pad-x))
    round var(--film-yaricap,var(--r-yuzey))
  );
}

/* EFEKTİN KAPALI OLDUĞU İKİ DURUM — aynı kurallar, iki gerekçe:

   1. Az hareket tercihi: kaydırmaya bağlı büyüme de harekettir.
      ⚠ 2026-09-10'a kadar burada "JS bu tercihte kaynağı hiç bağlamaz,
      poster kalır" yazıyordu — ARTIK YANLIŞ. Video az-hareket tercihinde
      de yükleniyor ve oynuyor; kapanan yalnız bu kaydırma efekti ve
      videonun `loop`u (bkz. tower.js > filmSeridi).
   2. Dar ekran (≤60rem): kap 390x844 gibi DİKEY bir kutu oluyor, video
      ise 16:9 yatay — `object-fit:cover` yatayda ~%74'ünü kırpıyordu
      (Codex 2026-09-09 hesabı). `object-position` kaybı azaltmaz,
      yalnız hangi parçanın kalacağını seçer; `70svh` de %63'e indirir,
      çözmez. Bu yüzden dar ekranda efekt tümden kalkıyor ve video
      akıştaki sıradan bir 16:9 kutu oluyor.

   ⚠ 60rem eşiği `tower.js > darSorgu` ile AYNI olmak zorunda —
   ayrı tutulursa aradaki her genişlik kör nokta olur.

   ⚠ Seçiciler `.film__ray--etkin` ile YAZILIYOR, çıplak `.film__kap` ile
   DEĞİL: yukarıdaki etkin kuralları (0,2,0), çıplak bir kuralı (0,1,0)
   yener ve bu blok sessizce etkisiz kalırdı. `rayAc()` sınıfı zaten
   kaldırıyor; bu blok onun YEDEĞİ — JS bir kez çalışıp sonra
   dinleyicisi düşerse düzen yine doğru kapanıyor. */
/* Satır içi 280vh'yi `!important` ile EZMİYORUZ (proje kuralı):
     `rayAc()` kapalı durumda `ray.style.height`i zaten SİLİYOR. */
  
:root[data-az-hareket="1"] .film__ray--etkin{height:auto}
  :root[data-az-hareket="1"] .film__ray--etkin .film__kap{position:static;height:auto;border-radius:var(--r-yuzey)}
  :root[data-az-hareket="1"] .film__ray--etkin .film__video{height:auto;aspect-ratio:1600 / 1067;clip-path:none}
  :root[data-az-hareket="1"] .bolum--film{padding-block:var(--bosluk-bolum) 0}
@media (max-width:60rem){
  /* Satır içi 280vh'yi `!important` ile EZMİYORUZ (proje kuralı):
     `rayAc()` kapalı durumda `ray.style.height`i zaten SİLİYOR. */
  .film__ray--etkin{height:auto}
  .film__ray--etkin .film__kap{position:static;height:auto;border-radius:var(--r-yuzey)}
  .film__ray--etkin .film__video{height:auto;aspect-ratio:1600 / 1067;clip-path:none}
  .bolum--film{padding-block:var(--bosluk-bolum) 0}
}

/* --- Dr. Öner Hekim sayfası: marka logo ızgarası ---------------------
   Osman 2026-09-09: yedi bağlı marka adı `.kurum-cipler` içinde METİN
   chip'i olarak duruyordu, logo istendi. Wrapper (`.kurum-cipler`)
   DEĞİŞMEDİ — flex-wrap listesi görsel için de işe yarıyor, yalnız
   içindeki öğe metin chip'i (`.cip`, daireler+proje'de de kullanılıyor)
   yerine bu YENİ class'ı alıyor.
   Osman 2026-09-10 canlıda gördü: "eşit ve tutarlı olmalı, şu an değil"
   — 7 logo kendi doğal ölçüsüyle konmuştu (128×128 … 303×106), farklı
   en-boy oranları ekranda eşit ağırlık vermiyordu. Çözüm: SABİT ölçülü
   kutu (104×40), `object-fit:contain` içeriği kutuda ortalar ve
   oranını korur. `width`/`height` öznitelikleri HTML'de DOĞAL piksel
   kalıyor (CLS için doğru olan), eşitlemeyi bu kutu yapıyor.
   Soluk/gri varsayılan, hover'da netleşen dil siteye yabancı değil:
   `.lnk span` zaten opacity geçişi kullanıyor (~satır 514), aynı mantık
   grayscale'e eklendi. */
.kurum-logo{
  display:flex;align-items:center;justify-content:center;
  /* 40→52px (Osman 2026-09-10: "logo daha yapışık ve az daha büyük
     olsun"). Kutu ölçüsü SABİT kalmak zorunda — yedi logonun doğal
     ölçüsü 128x128 ile 303x106 arasında değişiyor ve `object-fit:contain`
     onları bu kutuda eşitliyor. Kutu büyüyünce logolar da büyüyor,
     hücreyi daha çok doldurdukları için aralarındaki boşluk göze
     daha az geliyor. */
  height:52px;width:104px;
}
.kurum-logo img{
  display:block;width:100%;height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.5;
  transition:opacity var(--duration-base) var(--ease-move),
             filter var(--duration-base) var(--ease-move);
}
.kurum-logo img:hover{filter:grayscale(0);opacity:1}
@media(max-width:30rem){.kurum-logo{height:42px;width:88px}}

/* LOGO AKIŞI (Osman 2026-09-10: "carousel olsun, infinity loop olsun,
   autoplay olsun, tek sıra halinde dönsün, 4'erli").
   JS YOK — bu projede tower.js bir kez çöküp iç sayfaları boşaltmıştı;
   yedi kurumsal logo script'e emanet edilmiyor. Script çökse de akış
   sürer, hareket kapansa bile logolar yerinde durur.
   Kusursuz döngü: liste markup'ta İKİ KEZ var (ikinci set aria-hidden)
   ve ray tam yarısı kadar kayıyor — dönüş noktasında sıçrama olmuyor.
   `cqi` burada güvenli: `.logo-akis`in dolgusu yok, yani content-box
   ile dış genişlik aynı (Codex'in olanak kartındaki uyarısı bu kapta
   geçerli değil). */
.logo-akis{
  overflow:hidden;margin:var(--s-5) 0 0;
  /* Kenarlarda sert kesim yerine erime: logo görüş alanına girip
     çıkarken belirsizleşiyor, şerit sonsuz görünüyor. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logo-akis__ray{
  display:flex;flex-wrap:nowrap;   /* .kurum-cipler'in `wrap`ını ezer */
  gap:0;width:max-content;margin:0;
  /* Süre TEK KAYNAKTA: kapı bloğu ile burası aynı değeri elle iki
     kez yazmasın — ayrışırsa hız sessizce bozulur. */
  --logo-akis-sure:34s;
  animation:logoAkis var(--logo-akis-sure) linear infinite;
}
/* TEMEL (fallback) ÖLÇÜ — container query BİRİMİ OLMADAN da çalışır.
   ⚠ `cqi` ilk hâlinde koşulsuz yazılmıştı; desteklemeyen tarayıcıda
   `flex-basis` GEÇERSİZ olup 14 logo doğal genişliğine açılıyor ve
   şerit dağılıyordu (Osman 2026-09-10: "başka pcden bakınca logo
   carousel bozulmuş"). Sabit ölçü önce yazılıyor, `cqi` yalnız
   destekleniyorsa üstüne biniyor — döngü matematiği iki durumda da
   bozulmuyor çünkü kaydırma yüzdeyle (%50 = tam bir set). */
.logo-akis .kurum-logo{flex:0 0 104px;width:auto}

@supports (width:1cqi){
  .logo-akis{container-type:inline-size}
  /* 25cqi = kabın dörtte biri → aynı anda TAM 4 logo görünür. */
  .logo-akis .kurum-logo{flex-basis:25cqi}
  /* ⚠ TELEFON KOLU KALDIRILDI (Codex 2026-09-10): aşağıdaki telefon
     bloğu aynı seçiciye `flex:0 0 104px` verip bunu tamamen eziyordu,
     yani ölü koddu. Telefonda ölçü artık tek yerden geliyor. */
}
@keyframes logoAkis{ to{ transform:translateX(-50%) } }
/* Fareyle üzerine gelince durur: okumak isteyen durdurabilsin. */
.logo-akis:hover .logo-akis__ray{animation-play-state:paused}
:root[data-az-hareket="1"] .logo-akis__ray{animation:none}
  :root[data-az-hareket="1"] .logo-akis{overflow-x:auto}   /* hareket yoksa elle kaydırılabilsin */

/* TELEFONDA ŞERİT ELLE KAYDIRILIR (Osman 2026-09-10: "logolar çok
   uzakta ve drag drop olmuyor onu da aktif et... birbirine yakınlaşsın
   ve büyüsün, özellikle bu yuvarlak olan logolar çok küçük").
   Üç ayrı kusur, tek blokta:
   1) UZAKLIK — `flex-basis:50cqi` hücreyi kabın YARISI yapıyordu:
      375px'te 88px logo, iki yanında 43'er px boşluk. Hücre artık
      logonun kendi ölçüsü, aradaki pay `gap` ile 12px.
   2) KÜÇÜKLÜK — kutu 88×42px'ti. Kare logolar (prefabrik 128×128,
      özge 100×100) `object-fit:contain` ile 42×42'ye iniyordu, yatay
      olanlar 88px'i doldururken onlar yarısı kadar yer kaplıyordu.
      Kutu 104×60 oldu; kare logo 60×60, fark kapanıyor.
   3) SÜRÜKLEME — otomatik akış `transform` ile ray'ı kaydırıyor,
      elle kaydırma ise kabın `scrollLeft`'i. İkisi aynı anda açıkken
      kullanıcı sağa gittiğinde transform'un açtığı boşluğa düşüyor.
      Telefonda kontrol kullanıcıya veriliyor: akış duruyor, şerit
      parmakla kayıyor. Masaüstünde otomatik akış AYNEN duruyor.
   İkinci (aria-hidden) set telefonda gizli: o kopya yalnız kusursuz
   döngü matematiği için vardı, elle kaydırmada aynı yedi logoyu ikinci
   kez göstermekten başka işe yaramıyor. */
@media(max-width:38rem){
  .logo-akis{
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    /* Kenar erimesi kaldırıldı: otomatik akışta şeridi sonsuz
       gösteriyordu, elle kaydırmada ilk ve son logoyu soluklaştırıp
       "eksik" gösteriyor. */
    -webkit-mask-image:none;mask-image:none;
  }
  .logo-akis::-webkit-scrollbar{width:0;height:0}
  .logo-akis__ray{animation:none;gap:var(--s-3)}
  .logo-akis__ray > [aria-hidden="true"]{display:none}
  /* Hücre SABİT 104px: `flex:0 0 auto` bırakılınca genişlik logonun
     kendi oranından geliyordu (kare logo 60px, piraziz 171px) ve
     "eşit ve tutarlı olsun" kararı (Osman 2026-09-10) bozuluyordu. */
  .logo-akis .kurum-logo{flex:0 0 104px;scroll-snap-align:center}
  .kurum-logo{height:60px;width:104px}
}

/* --- Dr. Öner Hekim sayfası: kendi oranında görsel (vizyon + imza) ---
   Osman 2026-09-10: iki bölümün görseli metnin YANINDA kalmalı (satir-
   ikili bozulmuyor) ama ikisi de `.satir-ikili__gorsel`in varsayılan
   kutusuna (dikey, min-height 280-460px, `cover`) SIĞMAYACAK oranda:
   `sanayiden-yasama.webp` 2,39:1 (çok yatay, cover yanlardan ağır
   kırpardı) · `kalici-imza.webp` 1400×1120 önceden kırpılmış geldi,
   TEKRAR kırpma istenmedi. Çözüm kutuyu STRETCH'ten çıkarmak: kutu
   kendi içeriğinin (görselin doğal oranının) yüksekliğine döner,
   satır ortasına hizalanır — kırpma sıfır, her iki görsel de kendi
   oranında görünür. */
.satir-ikili__gorsel--dogal{align-self:center}
.satir-ikili__gorsel--dogal img{height:auto;min-height:0}
@media(max-width:60rem){.satir-ikili__gorsel--dogal img{aspect-ratio:auto}}

/* --- Dr. Öner Hekim sayfası: kapanış imzası, ortalı -------------------
   Osman 2026-09-10: "Dr. Öner Hekim alanı ortalı olmalı, sağında görsel
   olmayacak, buton da olmayacak — en son kapanış bu şekilde olacak."
   `.alinti` (sol çizgili, sola yaslı) sitede zaten vardı ve DEĞİŞMEDİ;
   bu yalnız bir modifier. Sol çizgi ortalı blokta anlamsız kaldığı için
   kapatıldı, satır genişliği okunabilirlik için sınırlandı. */
.alinti--ortali{
  margin:var(--s-8) auto 0;padding:0;max-width:52ch;
  border-left:0;text-align:center;
}
.alinti--ortali footer{text-align:center}
@media(max-width:60rem){.alinti--ortali{margin-top:var(--s-7)}}

/* --- ÇEREZ RIZA BANNER'I (parts/cerez.php) -------------------------
   Kaynak: analiz/2026-09-17-kvkk-uyum-envanteri.md §3. KVKK Kurulu
   çerez rehberi + vault anti-pattern-kvkk-compliance §2: "Kabul Et" ve
   "Reddet" AYNI görsel ağırlıkta olmalı — bu yüzden sitenin kasıtlı
   ASİMETRİK ikilisi `.btn-dolu`/`.btn-acik` (rezervasyon modalındaki
   "Gönder"/"İptal" gibi) burada KULLANILMADI; iki düğme de dolu zemin,
   aynı padding/font-size/border-radius/min-width taşıyor, yalnız
   zeminle ayrışıyor.
   HAREKET YOK: tasarım sistemi §7 + tower.js AZ_HAREKET_ONURLANDIR=false
   politikasıyla çakışmasın diye `hidden` özniteliği geçişsiz açılır/
   kapanır, transition tanımlanmadı. */
.cerez-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--acik);border-top:1px solid var(--cizgi);
}
.cerez-banner__ic{
  width:min(100% - 2 * var(--pad-x),var(--wrap));margin-inline:auto;
  padding:var(--s-5) var(--pad-x);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);
}
.cerez-banner__metin{
  flex:1 1 32rem;margin:0;color:var(--ink-soft);
  font-size:var(--fs-sm);line-height:var(--lh-govde);
}
/* Sözleşme/politika bağlantısı İKİ sinyalle ayrılır (renk TEK BAŞINA
   yetmez, ders-frontend.md "Onay/rıza ekranında sözleşme bağlantısı"):
   alt çizgi + `--fw-orta` (500) ağırlık farkı. */
.cerez-banner__metin a{
  color:var(--deep);font-weight:var(--fw-orta);
  text-decoration:underline;text-underline-offset:2px;
}
.cerez-banner__eylem{display:flex;flex-wrap:wrap;gap:var(--s-3);flex:none}
.cerez-banner__buton{
  min-width:9rem;min-height:var(--dokunma);
  padding:var(--s-3) var(--s-5);border:0;border-radius:var(--r-hap);
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-orta);
  cursor:pointer;
}
.cerez-banner__buton--kabul{background:var(--vurgu);color:#fff}
.cerez-banner__buton--kabul:hover{background:var(--bordo-koyu)}
.cerez-banner__buton--ret{background:var(--deep);color:#fff}
.cerez-banner__buton--ret:hover{background:var(--deep-2)}
.cerez-banner__buton:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
@media(max-width:34rem){
  .cerez-banner__eylem{width:100%}
  .cerez-banner__buton{flex:1 1 0}
}

/* --- footer yasal bağlantı satırı ----------------------------------
   Yeni bir yüzey dili DEĞİL: .dipnot__alt zaten flex/wrap/space-between
   (satır 3639) ve bu span onun üçüncü öğesi olarak diziliyor. Renk ve
   ölçü ebeveynden miras; yalnız bağlantılar arası boşluk tanımlanıyor. */
.dipnot__yasal{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.dipnot__yasal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.dipnot__yasal a:hover,.dipnot__yasal a:focus-visible{color:var(--metin)}

/* --- honeypot: ekrandan gizli, ekran okuyucudan da uzak -------------
   display:none KULLANILMAZ — bazı botlar görünmeyen alanı atlar, oysa
   tuzağın DOLDURULMASI isteniyor. Konumlandırma ile taşınıyor; ayrıca
   markup'ta aria-hidden + tabindex="-1" var, yani klavye ve ekran
   okuyucu kullanıcısı alana hiç ulaşmıyor (yanlış pozitif riski yok). */
.form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- form kapalı durumu (arka uç yapılandırması eksik) --------------
   `fieldset disabled` içindeki kontroller tarayıcı tarafından GÖNDERİLMEZ
   ve submit düğmesi de devre dışı kalır — JS'e bağımlı olmayan tek
   güvenilir kapatma yolu. fieldset'in varsayılan çerçeve/boşluğu
   sıfırlanıyor ki form düzeni değişmesin; `min-width:0` ise fieldset'in
   flex/grid içinde taşma yapmasını engelleyen bilinen bir düzeltme. */
.form__kapali{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s-4)}
/* ⚠ `.form__kapali .form__durum{display:block}` KURALI KALDIRILDI (Codex
   2026-09-17): `.form__durum` JS tarafından `hidden` ile gizli tutuluyor ve
   `display:block` o özniteliği EZİYORDU — sonuç, padding/arka plan/sol
   kenarlık taşıyan GÖRÜNÜR BOŞ bir kutu. Bu dosya aynı cascade tuzağını
   daha önce iki yerde belgelemiş; üçüncüsüne düşülmüştü.
   Kapalı-durum mesajı zaten `hidden` OLMADAN basılıyor, ek kurala gerek yok.
   `display:grid` + `gap`: fieldset `.form`un grid akışında tek bir hücre
   hâline geliyordu, iç satır boşlukları kayboluyordu — aynı ızgara burada
   yeniden kuruluyor. */