/* ===================================================================
   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.
     Gerçek bileşik zemin ÖLÇÜLDÜ (canlı video karesi + perde + cam,
     linkin hemen altındaki 3px şerit örneklendi):
        ilk (cam) durum   zemin lum 0,1261
        yapışık durum     zemin lum 0,0070
     Aynı zeminlerde kontrast:
        #C8102E   ilk 1,01  ·  yapışık 3,13     ← ilk durumda GÖRÜNMEZ
        #E23B3B   ilk 1,40  ·  yapışık 4,32
        #F05A5A   ilk 1,79  ·  yapışık 5,54     ← en iyi kırmızı, yine altında
        beyaz     ilk 5,14  ·  yapışık 15,88
     Yani cam barda HİÇBİR kırmızı 3,0'ı geçmiyor — geçmesi için lum
     ≥ 0,478 gerekir, o da soluk pembe demek (Osman'ın reddettiği ton).
     Çözüm renk DEĞİL DURUM: bar koyulaşınca marka kırmızısı, cam
     durumdayken beyaz. Kırmızı sayfanın büyük bölümünde görünüyor. */
  --menu-alti:#EDEEF0;          /* cam bar (ilk durum) — 5,14:1 */
  --menu-alti-koyu:#E23B3B;     /* yapışık bar — 4,32:1, marka ailesinde kırmızı */
  --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;

  /* 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);
}
@media (prefers-reduced-motion:reduce){
  .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. */
  transition: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) and (prefers-reduced-motion:no-preference){
  .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)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--menu-alti);transition:width .4s var(--ease),background var(--hiz) var(--ease)}
.menu a:hover::after{width:100%}
/* 75rem = --esik-menu (1200px). Değeri DEĞİŞTİRİRSEN token'ı da değiştir. */
@media(min-width:75rem){.menu{display:flex}}
.ustbar[data-yapisik="1"] .menu a::after{background:var(--menu-alti-koyu)}
.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). */
  top:calc(var(--ustbar-yer) + var(--s-2));left:50%;transform:translateX(-50%);
  width:min(100% - 2 * var(--pad-x),var(--wrap));
  padding:var(--s-5);border-radius:var(--r-yuzey);   /* barla aynı yarıçap */
  background:rgba(19,20,22,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
  display:grid;gap:var(--s-5);
  /* Menü yüksekliği İÇERİĞE bağlı (650px ölçüldü) ama ekran daha kısa
     olabiliyordu. ÖLÇÜLDÜ 2026-09-09 (iframe, menü açık):
       390×844 → sığıyor (54px pay)
       375×667 → 123px TAŞIYOR, "0454 215 55 55" 34px, "E-posta gönder"
                 99px kesiliyor
       390×600 → 190px taşıyor
     Üstelik overflow-y:visible + max-height:none olduğu için
     KAYDIRILAMIYORDU da: scrollHeight == clientHeight, yani kesilen
     düğmelere hiçbir şekilde ulaşılamıyordu.
     dvh: mobil tarayıcı çubuğu açılıp kapandığında vh sıçrıyor. */
  max-height:calc(100vh - var(--ustbar-yer) - var(--s-2) - var(--s-4));
  max-height:calc(100dvh - var(--ustbar-yer) - var(--s-2) - var(--s-4));
  overflow-y:auto;
  overscroll-behavior:contain;   /* menü sonuna gelince sayfa kaymasın */
}
/* [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(--tas-2);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 rgba(237,238,240,.1);
}
.mobil-menu nav a:last-child{border-bottom:0}
/* .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}
.mobil-menu__eylem .btn{justify-content:center;width:100%}
/* Dil seçimi hamburgerin içinde, tam genişlikte iki seçenek. */
.mobil-dil{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-bottom:var(--s-2)}
.mobil-dil__sec{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--dokunma);padding:0 var(--s-3);
  /* Masaüstü ikizi .dil__sec --r-yuzey; ikisi aynı işi yapıyor. */
  border:1px solid rgba(237,238,240,.16);border-radius:var(--r-yuzey);
  background:rgba(237,238,240,.06);color:rgba(237,238,240,.82);
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-orta);cursor:pointer;
}
.mobil-dil__sec[aria-current="true"]{background:rgba(237,238,240,.16);color:var(--tas-2);cursor:default}
.mobil-dil__sec:disabled{opacity:.45;cursor:not-allowed}

/* 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ı. */
.hero__gorsel::after{
  content:"";position:absolute;inset:0;
  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 (5 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{position:relative}
.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}}
@media(prefers-reduced-motion:reduce){
  /* Ö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. */
  [data-slayt-calisiyor] .slayt__halka-dolum{animation:none}
}
.slayt__ok{
  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. */
.satir-ikili__yazi{grid-column:1 / 3;grid-row:1;padding-right:var(--s-7)}
.satir-ikili__gorsel{grid-column:3 / 5;grid-row:1;margin:0}
.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{display:flex}
.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}
  /* Tek kolonda görsel HER ZAMAN metnin altında: `--ters` DOM sırasını
     değil yalnız kolonu çeviriyordu, mobilde ters bölümlerde görsel
     başlığın üstüne çıkıyordu. */
  .satir-ikili--ters .satir-ikili__gorsel{order:2}
  /* 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);
}
.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;
}
/* 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__tarih{display:block}
.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)}
@media(prefers-reduced-motion:reduce){
  .olanak .olanak__gorsel{transition:none}
  .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);
}
.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). */
.planiz{
  width:max-content;max-width:min(100vw - 2rem,1400px);
  max-height:calc(100dvh - 2rem);
  padding:0;border:0;border-radius:var(--r-yuzey);background:transparent;
  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} }
@media(prefers-reduced-motion:reduce){
  .planiz,.planiz::backdrop{transition-duration:1ms}
  .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. */
  max-height:calc(100dvh - 4rem);
  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{
  margin:0;padding:var(--s-4) var(--s-5);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)}
.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)}
.ic-bas--gorselli .ic-bas__gorsel{grid-column:3 / 5;margin:0}
/* 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{
  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)}
/* Ç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. */
.bolum--tas .tipkart--not,
.tipkart--not{background:transparent;border:1px dashed var(--cizgi);grid-column:1 / -1}
.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)}}
.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)}
@media(prefers-reduced-motion:reduce){.sss__ikon,.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);
}
/* 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}
}
.iletisim__form .form{margin-top:var(--s-6);max-width:none}

/* --- 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}}
.form__alan{display:grid;gap:var(--s-2)}
.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}

/* --- 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}
}
.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}
@media(prefers-reduced-motion:reduce){
  .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). */
  .galeri__ac:hover .galeri__gorsel,
  .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}
}
/* Üst sınır `74.99rem` DEĞİL: 75rem ile arasında 0,16px'lik bant
   kalıyordu ve kesirli genişlikte (zoom, kesirli iframe) iki kural da
   kapalı kalabiliyordu (Codex 2026-09-09). `calc` ile bitişik. */
@media(min-width:48rem) and (max-width:calc(75rem - 0.02px)){
  /* ÜÇ 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. */
  .galeri--bento > :last-child{grid-column:span 3}
}
@media(min-width:75rem){
  .galeri--bento{--galeri-satir:200px;grid-template-columns:repeat(4,1fr)}
}

/* --- 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);
}
/* ⚠ 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. */
.zaman__adim::before{width:var(--oran,0%)}
.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}
.iletisim__sol{padding-right:var(--s-7)}

.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)}
.dipnot{--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}}
@media(max-width:38rem){.dipnot__ic{grid-template-columns:1fr}}
.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. */
.dipnot__ortak{
  margin:var(--s-6) 0 0;display:inline-block;
  padding:var(--s-4) var(--s-5);
  background:#fff;border-radius:var(--r-yuzey);
}
.dipnot__ortak img{display:block;width:clamp(180px,16vw,240px);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)}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1!important;transform:none!important}
  *{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. */
  *::before,*::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ı.
   VERİ DEĞİŞMEDİ: eski şeridin dört değeri (56 · 9 · 3 · 45.000 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:16 / 9;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.
      JS bu tercihte kaynağı hiç bağlamaz, poster kalır (bkz. tower.js).
   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. */
@media(prefers-reduced-motion:reduce), (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:16 / 9;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;
  height:40px;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:32px;width:88px}}

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