/* ============================================================================
S-32 — C-07 özellik ızgarası (kolon varyantları) · C-08 eşli bölüm (metin + medya)
🔴 BU DOSYA C-07'Yİ YENİDEN YAZMAZ. Ölçüldü (29 Eylül): C-07'nin kendisi
`bilesen.css`te ZATEN kurulu ve yoğun kullanımda —
· `.oz` + `.oz-m` + `.oz-kutu` → 2 kolon, ikon kutusu + başlık + metin.
Kullanım: 5 sayfa / 32 madde (blog 6 · demo 5 · index 12 · sektörler 6 ·
yaklaşım 6) — hepsi referansın ölçtüğü 4–8 madde bandında.
Anatomi referansla birebir: 42px kare ikon (beyaz zemin, yuvarlak, gölge)
+ başlık 16/w500 + açıklama 14 soluk.
· `.dortlu` → 4 kolon, aynı anatomi ama `p` rengi
`--koyu-soluk`'a PİNLİ, yani yalnız KOYU bölümde kullanılabiliyor (2 sayfa).
Brief'in istediği `.ozellik-izgara` adı repoda **0 geçiş**; yazılsaydı aynı
özgüllükte ikinci bir yazım olur ve yükleme sırasına göre çalışan kuralı
sessizce ezerdi. O yüzden burada YALNIZ ölçülen boşluklar var:
(a) C-07'nin 3 KOLON varyantı hiç yoktu (envanter "2/3/4 kolon" diyor;
repoda 2 ve 4 vardı, 3 yoktu).
(b) 4 kolon BEYAZ zeminde yoktu — `.dortlu` koyu bölüme pinli.
(c) C-08 (metin + medya split) hiç yoktu: paylaşılan bileşen 0, ve
`position:sticky` tüm `site/assets` içinde **0 geçiş**.
Mevcut iki kolonlu şeyler AYRI kavramlar: `.hero-ic` (C-04 hero),
`.sekmeler` (C-14 sekme), `.sk-sebep`/`.yk-kanit`/`.gv-satir`/`.olgu`
(terim → anlam tanım listeleri), `.ikili` (madde listesi çifti).
⚠️ YÜKLEME SIRASI: bu dosya `bilesen.css`ten SONRA yüklenmeli. Ama buna
BAĞIMLI DEĞİL — `.oz` modifiyerleri bilerek `.oz.oz-3` (0,2,0) biçiminde,
yani `bilesen.css`teki `.oz` (0,1,0) kuralını sıradan bağımsız yenerler.
Eşit özgüllükte yazılsaydı sıra kayınca modifiyer sessizce ölürdü.
Token disiplini: çıplak hex yok, çıplak `font-size:px` yok; yalnız 1px
hairline ve %'li değerler literal (tokens.css'in izin verdiği istisna).
============================================================================ */
/* ============================================================================
C-07 — `.oz` KOLON MODİFİYERLERİ (additive; hiçbir bildirim tekrarlanmıyor)
----------------------------------------------------------------------------
MARKUP SÖZLEŞMESİ — taban `bilesen.css`ten gelir, burada yalnız kolon sayısı:
← `.ac` = scroll-reveal (temel.css)
Başlık
Açıklama.
…4–8 madde
`.oz-3` / `.oz-4` YALNIZ `.oz` ile birlikte anlamlıdır (tek başına hiçbir şey
yapmaz — ikon kutusu, tipografi ve satır boşluğu tabandan gelir).
============================================================================ */
/* Kolon boşluğu 3–4 kolonda `--b5`(48) yerine `--b4`(24): taban 2 kolonluk
ölçüye göre ayarlıydı, 4 kolonda 48px gutter kolonu 224px'e düşürüyordu.
24 referansın kendi 4'lü ızgarasının ölçülen değeri (ve `.dortlu` da onu
kullanıyor) — yani bu sayı uydurma değil, deponun kendi 4-kolon kararı. */
.oz.oz-3{grid-template-columns:repeat(3,1fr);column-gap:var(--b4)}
.oz.oz-4{grid-template-columns:repeat(4,1fr);column-gap:var(--b4)}
/* Kırılma `.dortlu`nun ÖLÇÜLEN deseniyle aynı: 4 → 2 → 1.
Taban `.oz` 991'de doğrudan 1 kolona iner (2 kolondan geliyor, doğru);
3–4 kolonda bir ara adım olmadan 1'e inmek 8 maddeyi tek kolonda uzun bir
şerit yapar. Bu kural `bilesen.css`teki `@media` kuralını (0,1,0) ezmek
zorunda, o yüzden burada da (0,2,0) yazılı — `@media` ÖZGÜLLÜK EKLEMEZ. */
@media (max-width:991px){ .oz.oz-3,.oz.oz-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .oz.oz-3,.oz.oz-4{grid-template-columns:1fr} }
/* ============================================================================
C-08 — `.esli`: metin + medya iki kolonu (referansın "split feature"ı)
----------------------------------------------------------------------------
🔴 `.ikili` İLE KARIŞTIRMA. İkisi de "iki" diyor, kavramlar ayrı:
· `.ikili` = iki sütunlu MADDE LİSTESİ çifti ("şunu yapar / şunu yapmaz").
· `.esli` = solda METİN, sağda MEDYA (ekran görüntüsü, maket, çizim).
MARKUP SÖZLEŞMESİ
← başlık bloğu `bilesen.css`ten
Etiket
Başlık
Alt metin.
…
← üst boşluğu `.bas + *` veriyor
🔴 `.bas`ı DOĞRUDAN `.esli`nin çocuğu YAPMA — `.esli-metin` İÇİNE koy.
Doğrudan çocuk olduğunda `bilesen.css`teki `.bas + *` kuralı yanındaki MEDYA
kolonunu vurur; ölçüldü (izgara.css önce yüklenirse medya 48px aşağı kayar).
Kural yine de 0,2,0 ile savunuluyor, ama sözleşme budur.
VARYANTLAR (hepsi `.esli` ile birlikte)
`.esli-ters` → medya SOLDA, metin sağda. Görsel sıra değişir, DOM sırası
AYNI kalır: ekran okuyucu ve klavye hep metinden başlar.
`.esli-dar` → metin kolonu 320px sabit (referansın ölçülen 320/766'sı).
`.esli-yapiskan` → İKİ kolondan BİRİNE konur; o kolon kaydırmada pinlenir.
🔴 `.esli-yapiskan` KISITI — ÖLÇÜLDÜ, VARSAYILMADI (Chrome 154, 1440×900):
· `body{overflow-x:hidden}` (temel.css:18) body'yi kaydırma kabı YAPIYOR
(hesaplanan `overflow-y:auto`) — ama sticky YİNE PİNLİYOR: iki ayrı
kaydırma konumunda `rect.top` 48px / 48px, fark 0.
Yani bu depoda korkulan "body overflow-x sticky'yi öldürür" tuzağı
ATEŞLENMİYOR. Pozitif kontrol (`body{overflow-x:visible}`) aynı sonucu
verdi, yani sonuç body'nin overflow'una bağlı değil.
· NEGATİF kontrol: sticky, `overflow:hidden` taşıyan bir ARA KABIN içinde
pinlenMİYOR (aynı iki okuma arası 806px kaydı). Yani ölçüm kusuru
GÖREBİLİYOR — "pinli" sonucu kalibre edilmiş bir sonuç.
· Sonuç olarak: **`.esli-yapiskan`, `overflow:hidden` taşıyan bir atanın
içinde OLAMAZ.** Bu depoda öyle bir ata VAR: `.kart` (bilesen.css:60).
Bu yüzden markup sözleşmesinde `.kart` MEDYA kolonunda, yapışkanlık
ÖTEKİ kolonda. İkisini aynı kolona koymak sticky'yi sessizce öldürür
(hata yok, uyarı yok — yalnız pinlenmez).
============================================================================ */
.esli{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--b5);
/* `align-items:start` yapışkanlığın ÖN KOŞULU: grid öğesi varsayılan olarak
`stretch` ile satır yüksekliğine uzar; uzayan bir kutu pinlenince KUTU
sabitlenir ama içerik kutunun tepesinde kalır, yani kullanıcı hiçbir şeyin
pinlendiğini GÖRMEZ. `start` kutuyu içerik yüksekliğine indiriyor. */
align-items:start;
}
/* Metin kolonu — SADECE ızgaraya özgü olan: taşan içeriğin kolonu genişletmesini
engelleyen `min-width:0`.
🔴 Başlık bloğunun DİKEY RİTMİ BURAYA YAZILMAZ: `bilesen.css`in `.bas` kuralı
(`display:flex;flex-direction:column;gap:var(--b3);max-width:var(--olcu-bas)`
+ `.bas .g-alt{max-width:var(--olcu-orta)}`) tam olarak bunu yapıyor. İlk
yazımımda bu iki satırı buraya KOPYALAMIŞTIM — birebir, bayt bayt aynı — yani
bu deponun en pahalı sınıfını (aynı kavramın iki yazımı) tam da ondan
kaçınmak için yazılan dosyada üretmiştim. Kaldırıldı; sözleşme `.bas`ı
İÇE koymayı söylüyor.
Aynı sebeple butonların üst boşluğu da yazılmıyor: `.bas + *` (bilesen.css)
başlıktan sonraki bloğa `--b5` veriyor ve ritim odur. */
.esli-metin{min-width:0}
/* Medya kolonu. `overflow` BURAYA YAZILMIYOR — yazılsaydı bu kolona konan bir
`.esli-yapiskan` sessizce ölürdü (yukarıdaki ölçüm). Kırpma gerekiyorsa
çağıran `.kart`ı kullanır ve yapışkanlığı ÖTEKİ kolona koyar.
Seçici `.esli > .esli-medya` (0,2,0) — ÇIPLAK `.esli-medya` (0,1,0) DEĞİL.
Sebebi ÖLÇÜLDÜ: biri sözleşmeyi atlayıp `.bas`ı doğrudan ızgara çocuğu
yaparsa `bilesen.css`teki `.bas + *{margin-block-start:var(--b5)}` (0,1,0)
bu kolonu vurur. Eşit özgüllükte yazılsaydı kazanan YÜKLEME SIRASI olurdu:
izgara.css önce yüklendiğinde medya kolonu 48px aşağı kayıyor (ölçüm:
`.bas` tepe 80, medya tepe 128, hizalı DEĞİL), sonra yüklendiğinde 0px.
0,2,0 ile iki sırada da 0px. */
.esli > .esli-medya{position:relative;margin:0;min-width:0}
.esli-medya > img,.esli-medya > video,.esli-medya > svg{inline-size:100%;block-size:auto}
.esli-medya > figcaption{margin-block-start:var(--b2);font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)}
/* ---- Varyant: medya solda -------------------------------------------------- */
/* DOM sırası korunuyor, yalnız görsel sıra dönüyor. `order` yalnız 991 üstünde
anlamlı: tek kolona inince metin HER ZAMAN önce gelmeli (okuma sırası). */
@media (min-width:992px){ .esli-ters > .esli-medya{order:-1} }
/* ---- Varyant: dar metin kolonu -------------------------------------------- */
/* Referansın ölçülen ürün kartı splitı: sol 320px başlık kolonu + sağ 766px.
NOT — `anasayfa.css`teki `.urun-kart` aynı `minmax(0,320px) minmax(0,1fr)`
biçimini taşıyor. İKİNCİ YAZIM DEĞİL: o bir kart (kendi padding'i ve zemini
var, ana sayfaya özgü), bu paylaşılan bölüm ızgarası. Yine de ilerideki bir
tur `.urun-kart`ı buna bağlayarak tek yazıma indirebilir — bugün kavramlar
ayrı olduğu için birleştirilmedi. */
.esli-dar{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
/* ---- Varyant: yapışkan kolon ---------------------------------------------- */
/* `--b5` (48px) üstten pay. Nav `position:relative` (sabit değil), yani
temizlenecek sabit başlık YOK — ölçüldü, offset yalnız nefes payı.
`max-block-size` + `overflow-y:auto` BİLEREK YOK: bir kaydırma kabı
yaratırdı ve içindeki hiçbir şey artık sayfaya göre pinlenmezdi. */
.esli-yapiskan{position:sticky;inset-block-start:var(--b5)}
/* 991'de ızgara tek kolona indiği için yapışkanlık KAPANIR: tek kolonlu bir
sayfada pinlenen blok ekranın tepesini yer ve altındaki içeriği okumayı
zorlaştırır (telefonda düşmanca). */
@media (max-width:991px){ .esli-yapiskan{position:static} }
/* ---- Tek kolona iniş ------------------------------------------------------ */
/* 991 deponun ölçülen kırılma noktası (tokens.css: çok kolonlu her şey burada
tek kolona düşer). `.esli-dar` de aynı kuralla iner — sabit 320px bir kolon
390px'lik ekranda metni 320'ye kilitleyip sağda ölü boşluk bırakırdı. */
@media (max-width:991px){
.esli,.esli-dar{grid-template-columns:1fr;gap:var(--b4)}
.esli-metin{max-width:none}
}
/* ============================================================================
SÜREĞEN DÖNGÜ (hareket sözleşmesi)
----------------------------------------------------------------------------
Medya çerçevesinin üst kenarında ince bir tarama çizgisi — "bu yüzey canlı"
sinyali. Deponun hareket sözleşmesi her sayfada bir süreğen döngü istiyor.
Üç kural burada ÖLÇÜLEBİLİR biçimde tutuluyor:
1) `0%` ve `100%` BİREBİR AYNI ve GÖRÜNÜR kare. `prefers-reduced-motion`'da
`temel.css` süreyi .001ms VE gecikmeyi 0s'e çekiyor, yani animasyon son
karesine ATLIYOR — son kare görünür olduğu için donduğunda kaybolan
hiçbir şey yok. (`opacity:0`da PARK ETME yasağı.)
2) Kırpma GEREKMİYOR: çizgi kabın %30'u genişliğinde ve en çok kendi
genişliğinin %233'ü kadar ötelenir → 0,30 × 2,33 = %69,9 sol kenar,
sağ kenar %99,9. Yani kabı HİÇ taşmaz, bu yüzden `.esli-medya`ya
`overflow:hidden` yazmak gerekmedi — ki yazılsaydı yapışkan kolonu
öldürürdü (yukarıdaki ölçüm).
3) Süs katmanı: `pointer-events:none` — dokunma hedeflerini örtmez.
Süre 9s: `bilesen.css`in ölçülen Lottie döngüsünden (6,47s) BİLEREK farklı,
çünkü ikisi aynı ekranda yan yana görünebilir ve eşit süre yapay bir senkron
hissi verir.
============================================================================ */
.esli-medya::after{
content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
inline-size:30%;block-size:1px;
background:var(--nokta);opacity:.55;
pointer-events:none;
animation:esliTarama 9s var(--egri) infinite;
}
.koyu .esli-medya::after{background:var(--vurgu-acik)}
@keyframes esliTarama{0%,100%{transform:translateX(0)}50%{transform:translateX(233%)}}