` ve `
`. Gerekçe hiza sözleşmesi: gövde hizası `dd-shell.css:170`de YALNIZ `
`ye bağlıdır. `` kalsaydı 814px'lik bir
gövde metni kuralın kapsamı dışında kalırdı — Kurul sayfasının bugünkü
kusurunun tam olarak sebebi buydu (beş adım ` ` ile
kurala DOKUNULMADAN, istisna listesine SATIR EKLEMEDEN yaslı hizaya girer.
814px, kararın yaslı BIRAKTIĞI hikâye kolonundan (702px) geniş, kapattığı
kart ailelerinden (331px) iki kattan fazla geniş — kararın kendi ölçütü
bu yüzeyi açık tarafta bırakıyor. */
.reh-article .tips-steps{display:flex;flex-direction:column;gap:20px;margin:18px 0}
.reh-article .tip-step{display:flex;align-items:flex-start;gap:14px}
.reh-article .tip-step .tn{flex:none;width:32px;height:32px;border-radius:var(--radius-circle);background:var(--tomato-deep);color:#fff;display:grid;place-items:center;font-size:14.5px;font-weight:700}
/* `flex:1` DAR VARYANTTA YOK ve burada ŞART. Ölçüldü: `flex` verilmeden metin
kutusu içeriğe göre daralıyor ve beş adım 5 FARKLI genişlikte duruyordu
(ortalama 554px). Dar yan sütunda bu görünmez, çünkü kap zaten 336px ve
metin onu dolduruyor. Tam genişlikte ise ızgara ragged düşer ve yaslı hiza
her adımda başka bir satır uzunluğuna uygulanır. `flex:1` beşini de 814px'e
sabitler — sayfanın kendi gövde kolonuyla (860px) aynı okuma ölçüsü. */
.reh-article .tip-step>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.reh-article .tip-step b{font-size:16.5px;font-weight:700;color:var(--slate);line-height:1.4}
.reh-article .tip-step p{font-size:16px;line-height:1.7;margin:0}
/* ---- SAYI BANDI ----
Zemin bu markanın koyu nane bandıdır (`.reh-hero`nun dili), kaynağın
kahve gradienti DEĞİL.
📷 SABİT GÖRSEL (2026-08-20). Bant düz gradientti; artık altında bu
markanın YERLEŞİK hero görseli duruyor ve sayfa kaydırılırken SABİT
kalıyor. Görsel yerel: `public/reference/diet/img/diet-hero-poster.jpg`
(1600×1089) — `home.blade.php` ve `search.blade.php` de aynı dosyayı
kullanıyor. HOTLINK YOK, yeni varlık indirilmedi.
🔴 `background-attachment:fixed` iOS SAFARI'DE ÇALIŞMAZ. Orada tarayıcı
niteliği yok saymakla kalmaz, görseli kutu yerine GÖRÜNTÜ ALANI ölçüsünde
boyutlayıp yanlış kırpar. Bu yüzden düşme davranışı TAHMİNE bırakılmadı,
AÇIKÇA yazıldı: kaba işaretçili (dokunmatik) cihazlarda iki katman da
`scroll`a döner — görsel kalır, yalnız sabitlik gider. Aynı düşüş
`prefers-reduced-motion` için de geçerli: sabit zemin kaydırmada hareket
izlenimi üretir.
🔴 KARARTMA PERDESİ — WCAG AA İÇİN ÖLÇÜLDÜ, GÖZLE SEÇİLMEDİ. Yöntem:
görselin TAMAMINDAKİ en parlak piksel bulundu (rgb 255,255,255 — masa
örtüsündeki parlama), perde onun üstüne alfa bileşimiyle kondu, `.st`
kutusunun kendi katmanı da eklendi, oran öyle hesaplandı. Tek bir kareyi
ölçmek yanlış-temiz verirdi: görsel `fixed` + `cover` olduğu için bandın
hangi bölgeyi göstereceği kaydırmaya göre değişir.
perde alfası .92 · kutu rgba(0,0,0,.32) · gradientin AÇIK ucunda,
GERÇEK PİKSELDEN (analitik değil, ölçüm aşağıdaki tabloda):
`.st b` (30px bold #fff) eşik 3,0 ✅
`.st span` (12.5px #b9d8c9) eşik 4,5 ✅
`.sb-head h2` (26px bold) eşik 3,0 ✅
`.eyebrow` (12px bold #99d7b4) eşik 4,5 ✅
🔴 AÇIK UÇ KOYULAŞTIRILDI: `#00602b` → `#11492f` (Beyar kararı,
2026-08-20). Gerekçe ÜSTBAŞLIKTI: `.sb-head .eyebrow` 12px bold `#99d7b4`
ve bant üstünde AA'yı geçmiyordu — görselsiz eski bantta 2,75:1, görsel
gelince 2,86:1. Karar rengi değil ZEMİNİ değiştirmek oldu; `#99d7b4` ve
`--tomato`/`--green` token'larına DOKUNULMADI, YENİ TOKEN ÜRETİLMEDİ.
📐 DEĞER TAHMİNLE SEÇİLMEDİ, HEDEFTEN GERİ HESAPLANDI. `#99d7b4`ın bağıl
parlaklığı 0,6096; 4,5:1 için bandın parlaklığı ≤ 0,0966 olmalı. Açık uç
`k × rgb(0,96,43)` diye taranınca eşik k≈0,70'te (4,48 — kıl payı KALIYOR)
çıktı; geçen en açık kademe k=0,65 (#124f33, 4,83). Karardaki *"bir tık
koyusunu al"* gereği bir kademe aşağısı alındı: k=0,60 → **#11492f**, 5,21.
⚠ KUTU DOLGUSU KOYU KALMAK ZORUNDA. Bant koyulaşınca "artık beyaz cam
geri gelebilir mi" diye ÖLÇÜLDÜ: `rgba(255,255,255,.08)` ile `.st span`
açık uçta 4,39:1'de kalıyor — hâlâ AA'nın ALTINDA. Yani koyu dolgu bir
tercih değil, ölçümün dayattığı şey.
⚠ 640 KIRILIMI KONTROL EDİLDİ: orada yalnız punto düşüyor (`.st b` 25px,
`sb-head h2` 22px) ve ikisi de hâlâ "büyük metin" sınırının (18,66px bold)
üstünde, yani eşikleri 3,0 olarak KALIYOR. Üstbaşlık 12px'te sabit. Renk
dalı yok — koyulaştırma o kırılıma ayrıca inmiyor.
⚠ KUTU DOLGUSU BEYAZDAN SİYAHA DÖNDÜ. `rgba(255,255,255,.08)` kutuyu
BANTTAN AÇIK yapıyordu; fotoğrafın üstünde 12,5px etiket böylece açık
uçta 2,59:1'de kalıyor ve AA'yı geçemiyordu (ölçüldü). Cam kart görüntüsü
korundu, yalnız camın rengi koyulaştı.
⚠ AÇIK UÇ .92'YE ÇEKİLDİ. Gradientin iki ucu ayrı ayrı ölçülür; kötü olan
AÇIK uçtur ve kapıyı o belirler. */
.statband{
padding:56px 0;
background-color:#153A2B;
/* 🔴 PERDE KOYULAŞTI ve NÖTRLEŞTİ (Beyar, 2026-08-25). Önceki iki yeşil
kat fotoğrafı yıkayıp bandı soluk yeşil bir yüzeye çeviriyordu. Kanonun
kendi reçetesi alındı — ve o reçetenin rengi zaten BİZİM `--slate`
token'ımızın rgb üçlüsü (33,30,22), yani dışarıdan renk gelmedi. */
background-image:
linear-gradient(90deg,rgba(28,25,18,.92),rgba(33,30,22,.82)),
url('../img/diet-hero-poster.jpg');
background-repeat:no-repeat,no-repeat;
background-position:center,center;
background-size:cover,cover;
/* perde kutuyla birlikte akar, görsel sabit durur */
background-attachment:scroll,fixed;
}
@media (hover:none) and (pointer:coarse){
/* iOS Safari'nin `fixed`i — bkz. yukarıdaki not. Görsel kalır, sabitlik gider. */
.statband{background-attachment:scroll,scroll}
}
@media (prefers-reduced-motion:reduce){
.statband{background-attachment:scroll,scroll}
}
/* BAŞLIK ORTALANIR — kanon `sb-head{text-align:center}` + eyebrow ortalı.
⚠ Kartın İKONU KALIYOR: onu R23·b'de Beyar'ın kendisi geri getirdi
(2026-08-24), bu turun isteği bandın SOLGUNLUĞUYDU. İki karar
çelişmiyor; biri rengi, öteki ikonu konuşuyor. */
.statband .sb-head{margin-bottom:34px;text-align:center}
.statband .sb-head .eyebrow{justify-content:center}
.statband .st{justify-content:center;text-align:center}
.statband .sb-head .eyebrow{color:#99d7b4}
.statband .sb-head h2{color:#fff;font-size:26px;margin:10px 0 0;letter-spacing:-.02em}
.statband .sb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.statband .st{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:20px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
/* İKON GERİ GELDİ (R23·b, 2026-08-24). Kalıp sayfanın kendi "Ne bulursun"
başlıklarıyla aynı: çıplak satır içi ikon, zeminsiz kutu YOK. Renk
`.sb-head .eyebrow`in bu banttaki AÇIK NANE tonu — YENİ RENK ÜRETİLMEDİ. */
.statband .st i{flex:none;font-size:16px;color:#99d7b4}
.statband .st b{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.statband .st span{flex-basis:100%;display:block;font-size:12.5px;color:#b9d8c9;font-weight:500}
/* ---- KÖPRÜ KARTLARI ---- */
.bridge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.bridge-card{
display:block;background:var(--paper);border:1px solid var(--line);
border-radius:var(--radius-lg);padding:24px 22px;box-shadow:var(--sh-sm);
transition:.2s var(--ease);
}
.bridge-card:hover{border-color:rgba(0,154,68,.4);box-shadow:var(--sh-md);transform:translateY(-2px)}
.bridge-card .bi{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md);background:var(--tomato-tint);color:var(--tomato);font-size:18px;margin-bottom:16px}
.bridge-card h3{font-size:16.5px;margin:0 0 9px}
.bridge-card p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.65;margin:0 0 14px}
.bridge-card .bgo{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--tomato-deep)}
.bridge-card:hover .bgo i{transform:translateX(3px)}
.bridge-card .bgo i{font-size:11px;transition:.2s var(--ease)}
/* ---- dar ekran ---- */
@media (max-width:1024px){
/* Banner tek kolona düşer; şerit dikeyden YATAYA döner ve ayıracı sol
çizgiden üst çizgiye geçer — yapı referansının kendi kırılımı. */
.lst-hero{grid-template-columns:1fr;align-items:start;gap:22px}
.lst-stats{flex-direction:row;gap:34px;padding-left:0;border-left:none;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
/* Tek kolona düşünce boşluk yatay ayraç değil DİKEY ara olur; referans
bu kırılımda 34px kullanıyor (ölçüldü), 22px'ten oraya çekildi. */
.about-grid{grid-template-columns:1fr;gap:34px}
.val-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width:640px){
.lst-stats{gap:10px}
.lst-stats .st{flex:1}
.lst-stats .st b{font-size:20px}
/* Çip şeridi dar ekranda sarmaz, yatay kaydırılır (kabuğun `.chip`
kuralı zaten `white-space:nowrap` veriyor, dd-shell.css:963). */
.lh-chips{margin-top:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.lh-chips::-webkit-scrollbar{display:none}
.lh-chips .chip{flex:none}
.sec[id]{scroll-margin-top:79px}
.val-grid{grid-template-columns:1fr}
.statband{padding:34px 0}
.statband .sb-head h2{font-size:22px}
.statband .st b{font-size:25px}
.about-figs{gap:11px}
}