/* Kaynak-transfer: donör `beslenme.html`nin KENDİ satır içi "SAYFA CSS" bloğu —
AYNEN (yorumlar dahil, 103 kural). ÖLÇÜLDÜ (2026-09-12): bu içerik önceden
`beslenme/index.blade.php`nin kendi `@push('head')`'inde `@verbatim` sarmalı
içinde gömülüydü (tek neden: içindeki `@media` Blade direktifiyle çakışırdı) —
buraya taşınarak tek bir ``e indirildi. Tek değişiklik: hero arka plan
görselinin yolu. Donör
`varliklar/_dis/images.unsplash.com/photo-1512621776951-a57141f2eefd.avif`
kullanıyor; o dosya repoda YOK, repoda zaten kullanılan ikame
`img/diet-hero-poster.jpg`'e çevrildi (aynı ikameyi `beslenme-ipuclari-v1.css`/
`diyet-puf-noktalari-v1.css` de yapıyor).
NOT: eski `beslenme-v1.css` donörün BİR NESİL ESKİ hâli — yeni işaretlemeyi
taşıyamıyordu (ölçüldü, bu blok olmadan sayfa bozuk çiziliyor) ve bilinçli
olarak bağlı değil; bu dosya ONUN YERİNE geçer, ikisi ASLA birlikte bağlanmaz. */
/* ===== SAYFA CSS — kabuk CSS'i assets/css/dd-shell.css'te ===== */
/* =====================================================================
BESLENME MERKEZİ — menü başlığı "Beslenme"nin merkezi.
YENİ SINIF YOK. Kullanılan yapılar ve geldikleri sayfa:
.reh-hero / .rd-crumb / .reh-htrust / .reh-grid / .reh-note (eski
beslenme-rehberi-v1 sayfasından; o sayfa 9. turda buraya katıldı)
.hub-card ailesi ← beslenme-rehberi-v1
.nut-entry / .nut-search / .nut-pop / .nut-row ← saglik-hub-v1
.sec-green .eyebrow ← saglik-hub-v1
.sec / .sec-head / .see-all / .lead / .soon ← dd-shell.css (kabuk)
2026-08-14 KALDIRMASINDAN SONRA GÖVDEDE KARŞILIĞI KALMAYAN kurallar —
aşağıda hâlâ tanımlıdır ama bu sayfada hiçbir öğe kullanmaz; kaynak
transferi bozulmasın diye silinmedi, yanlış anlaşılmasın diye yazıldı:
.hub-grid / .calc-card / .calc-ico (eski #besin-rehberleri)
.hub-card.hub-soon / .hub-tag.soon-badge (eski #hazirlaniyor)
===================================================================== */
/* ---- HERO (kompakt koyu nane band — beslenme-rehberi dili) ---- */
.rd-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:18px 0 14px;font-size:13px;font-weight:500;color:var(--muted)}
.rd-crumb a{color:var(--muted);transition:.18s}
.rd-crumb a:hover{color:var(--green-deep)}
.rd-crumb i{font-size:9px;color:#c7c7c7}
.rd-crumb b{color:var(--slate);font-weight:700}
.reh-hero{position:relative;background-color:#15241c;background-image:linear-gradient(90deg,rgba(18,28,22,.94),rgba(20,32,25,.74)),url("../img/diet-hero-poster.jpg");background-size:cover;background-position:center;overflow:hidden;padding:128px 0 46px}
.reh-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 320px at 82% -10%,rgba(0,154,68,.20),transparent 60%),linear-gradient(180deg,rgba(18,28,22,0) 60%,rgba(16,26,20,.6));pointer-events:none}
.reh-hero .wrap{position:relative;z-index:2}
.reh-hero .rd-crumb{color:#bcd0c4;padding-bottom:16px;font-size:13px}
.reh-hero .rd-crumb a{color:#bcd0c4}
.reh-hero .rd-crumb a:hover{color:#99d7b4}
.reh-hero .rd-crumb i{color:rgba(255,255,255,.4)}
.reh-hero .rd-crumb b{color:#fff}
.reh-hero .eyebrow{color:#99d7b4}
.reh-hero .eyebrow::before{background:var(--green)}
.reh-hero h1{color:#fff;font-size:42px;margin:12px 0 12px;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.reh-hero h1 .accent{color:#7fcca1}
.reh-hero .lead{color:#e3ede7;font-weight:500;font-size:16px;max-width:620px;text-shadow:0 1px 14px rgba(0,0,0,.3)}
/* ---- BANNER SAYAÇLARI — SAĞDA DİKEY + DIVIDER (Beyar, 2026-08-24) ----
Kanon `/testler` (`.tst-hero`/`.tst-stats`): metin solda, sayaçlar sağda
dikey kolon, aralarında `border-left` ayracı. Ölçüler oradan BİREBİR
(grid `minmax(0,1fr) auto` · gap 44px · align-items:end · padding-left 38px
· `border-left:1px solid rgba(255,255,255,.18)`). Yeni renk/ölçü YOK.
⚠ MARKUP DEĞİŞMEDİ. Sarmalayıcı div eklenmedi; kapsayıcı `:has()` ile
yakalanıp ızgaraya çevrildi. Böylece bayt kopyası blade'in yapısına
dokunulmuyor ve kural sarmalın sınıf adından BAĞIMSIZ çalışıyor —
bu desen 7 sayfada aynı, sarmal adları farklı. */
/* DETAY BANNER'I — sayaçlar SAĞ kolonda, yazar kartı ALTLARINDA (Beyar, 2026-08-24)
Önceki hâlde `.reh-htrust` sol metin kolonunun (`.reh-artmain`) İÇİNDEydi;
orada 224px'lik dar bir alt-kolona düşüyor ve başlığın ÜSTÜNDE yüzüyordu
(ölçüldü: sayaç top=188, h1 top=376). Beyar: *"başlığın üstüne ortalanmış,
kanona aykırı."*
Markup'ta blok `.reh-artmain`in DIŞINA, `.nut-row`un hemen ÖNÜNE alındı.
Böylece `.reh-arthero` ızgarasında: sol kolon eyebrow→başlık→spot (temiz),
sağ kolon üstte sayaçlar, altta yazar kartı.
ÖLÇÜLER KANONDAN, uydurulmadı — kardeş markanın püf noktaları sayfasındaki
sayaç sütunu ölçüldü: column · gap 16px · padding-left 38px ·
border-left 1px rgba(255,255,255,.18) · sayı 29px/700 · etiket 12.5px.
Diet'in kendi `/hesaplayicilar` sayacı da birebir aynı değerleri taşıyor.
⚠ Kaynak adresin ADI buraya YAZILMAZ: kaynak-kod marka kapısı bu dizgiyi
yakalar ve bilinen tabanı (7) yükseltir. Bu yorumun ilk hâli tam olarak
bunu yaptı, kapı 7'den 13'e çıktı ve düzeltildi. */
.reh-arthero > .reh-artmain{grid-column:1;grid-row:1/3}
.reh-arthero > .reh-htrust{grid-column:2;grid-row:1;align-self:end}
.reh-arthero > .nut-row{grid-column:2;grid-row:2}
:where(.wrap,.reh-hero,.hh-wrap):has(> .reh-htrust){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:44px;align-items:end}
:where(.wrap,.reh-hero,.hh-wrap):has(> .reh-htrust) > :not(.reh-htrust){grid-column:1}
.reh-htrust{display:flex;flex-direction:column;gap:16px;margin-top:0;padding-left:38px;border-left:1px solid rgba(255,255,255,.18)}
:where(.wrap,.reh-hero,.hh-wrap) > .reh-htrust{grid-column:2;grid-row:1/-1;align-self:end}
/* ---- BREADCRUMB BANNER'IN EN ÜSTÜNDE (Beyar, 2026-08-24) ----
Kanon dört banner ailesinde de aynı: breadcrumb iki kolonlu ızgaranın
DIŞINDA ve ÜSTÜNDE duruyor. /testler'de `.tst-banner-row`, /programlar'da
`.dl-hero`, /diyetisyenler'de `.lst-hero` — üçünde de crumb bu ızgaranın
KARDEŞİ; /besin-kutuphanesi'nde ızgara hiç yok, crumb yine ilk çocuk.
1440px'te hero üstünden ölçülen crumb Y'si sırasıyla 196 · 174 · 173 · 179.
Bu sayfada crumb Y=300'e düşmüştü: sayaç sütunu ızgaranın 1. satırında
duruyor, o satırı kendi boyuna (221px) şişiriyor ve `align-items:end`
crumb'ı satırın DİBİNE itiyordu. Ölçüldü: sayaçlar Y=133'te, yani
breadcrumb'ın ÜSTÜNDE başlıyordu.
Düzeltme markup'a DOKUNMADAN, yalnız satır ataması:
1. satır breadcrumb — iki kolonu birden kaplar, en üstte
2. satır esnek boşluk (1fr)
3..6. sol kolonda eyebrow → başlık → spot (varsa düğmeler)
Sol kolonun dört kalemi TEK TEK satıra bağlanır: otomatik yerleşim
bırakılırsa imleç 1. satırdan başlıyor ve boş duran 2. satırı (esnek
boşluk) doldurup başlığı eyebrow'un ÜSTÜNE koyuyor — ölçüldü,
eyebrow↔başlık aralığı 12px yerine -77px çıktı.
Sayaç sütunu 2. satırdan sona kadar uzanır; kolon 2'de, dikey ve
`border-left` ayraçlı KALIR — değişen tek şey hangi satırları kapladığı.
2. satırın `1fr` olması şart. Kanonda sol kolon bir SARMAL div olduğu için
sayaç sütunu ondan uzun olduğunda fazlalık metnin ÜSTÜNDE birikir, metnin
kendi iç boşlukları bozulmaz (`.lst-hero` ölçüldü: spot altı Y=383, sayaç
altı Y=457). Burada sarmal yok; esnek satır olmasa fazlalık üç metin
satırına eşit dağılır ve başlık–spot arası ~27px açılırdı. Esnek satır
fazlalığı tek başına yutar, metin uzadığında kendiliğinden 0'a iner.
Dikey ortalamayı kabuk zaten yapıyor (dd-shell.css "BANNER YÜKSEKLİĞİ"):
banner column-flex + `justify-content:center`, liste bandı min 544px.
Crumb yukarı çıkınca sarmal kısalıyor ve kabuk onu ortalıyor.
Yeni renk / ölçü / sınıf ÜRETİLMEDİ. */
.reh-hero .wrap{grid-template-rows:auto 1fr auto auto auto auto}
.reh-hero .wrap > .rd-crumb{grid-column:1/-1;grid-row:1}
.reh-hero .wrap > .eyebrow{grid-row:3}
.reh-hero .wrap > h1{grid-row:4}
.reh-hero .wrap > .lead{grid-row:5}
.reh-hero .wrap > .chips{grid-row:6}
.reh-hero .wrap > .reh-htrust{grid-row:2/-1}
.reh-htrust span{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:12.5px;font-weight:600;color:#cfe0d6}
.reh-htrust i{display:none}
/* `Yayın:` / `Son güncelleme:` span'larında kaynak markup ETİKETİ ÖNCE yazıyor
(metin düğümü, sonra ). Kanon "sayı üstte, etiket altta" olduğu için bu
iki span'da sıra ters çevrilir. Markup'a dokunulmadı. */
.reh-htrust span.ht-meta{flex-direction:column-reverse;justify-content:flex-end}
.reh-htrust b{display:block;font-size:29px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em}
@media (max-width:900px){
:where(.wrap,.reh-hero,.hh-wrap):has(> .reh-htrust){grid-template-columns:1fr}
.reh-arthero > .reh-artmain,.reh-arthero > .reh-htrust,.reh-arthero > .nut-row{grid-column:1;grid-row:auto}
.reh-htrust{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;gap:20px;margin-top:22px;padding-left:0;padding-top:16px;border-left:none;border-top:1px solid rgba(255,255,255,.18)}
/* Tek kolonda satır ataması çözülür: crumb→eyebrow→başlık→spot→sayaç
doğal sırayla alt alta akar (yukarıdaki masaüstü kuralı daha yüksek
özgüllükte olduğu için burada açıkça geri alınır). */
.reh-hero .wrap{grid-template-rows:none}
.reh-hero .wrap > .rd-crumb,.reh-hero .wrap > .eyebrow,.reh-hero .wrap > h1,.reh-hero .wrap > .lead,.reh-hero .wrap > .chips,.reh-hero .wrap > .reh-htrust{grid-row:auto}
}
/* aynı künye şeridi rehber bölümünde açık zemindedir — hero varyantının
açık zemin karşılığı. Yeni sınıf yok, mevcut aile bölüme göre kapsandı. */
#beslenme-rehberi .reh-htrust{margin-top:0}
#beslenme-rehberi .reh-htrust span{color:var(--muted)}
#beslenme-rehberi .reh-htrust b{color:var(--slate)}
/* ---- sağlık bölümü eyebrow'u (saglik-hub) ---- */
.sec-green .eyebrow{color:var(--green-deep)}
.sec-green .eyebrow::before{background:var(--green)}
/* ---- besin kütüphanesi girişi (saglik-hub) ---- */
.nut-entry{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:linear-gradient(180deg,#EFF9F3,#E3F4EA);border:1px solid #c9ead8;border-radius:var(--radius-xl);padding:40px}
.nut-entry h3{font-size:27px;margin:12px 0 10px}
.nut-entry p{color:var(--slate-2);font-weight:500;font-size:15px;margin-bottom:22px;max-width:440px}
.nut-search{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #c9ead8;border-radius:var(--radius-md);padding:14px 18px;max-width:440px;box-shadow:var(--sh-sm)}
.nut-search i{color:var(--green);font-size:16px}
.nut-search span{color:var(--muted);font-size:14px;font-weight:500;flex:1}
.nut-search .btn{padding:9px 16px;font-size:13px;color:#fff}
.nut-pop{display:flex;flex-direction:column;gap:11px}
.nut-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #c9ead8;border-radius:var(--radius-md);padding:13px 16px;transition:.2s var(--ease);cursor:pointer}
.nut-row:hover{border-color:var(--green);transform:translateX(3px)}
.nut-row .nr-ico{flex:none;width:42px;height:42px;border-radius:var(--radius-md);background:#E3F4EA;display:grid;place-items:center;color:var(--tomato-deep);font-size:17px}
.nut-row b{font-size:14.5px;color:var(--slate);display:block}
.nut-row span{font-size:12.5px;color:var(--muted);font-weight:500}
.nut-row .kcal{margin-left:auto;font-size:13px;font-weight:700;color:var(--tomato-deep);white-space:nowrap}
/* ---- calc-card (rehber kartı — saglik-hub'dan) ---- */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.calc-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--paper);border:1px solid #e2efe8;border-radius:var(--radius-lg);cursor:pointer;transition:.25s var(--ease)}
.calc-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:var(--sh-md)}
.calc-ico{flex:none;width:50px;height:50px;border-radius:var(--radius-lg);background:#E3F4EA;display:grid;place-items:center}
.calc-ico i{font-size:21px;color:var(--tomato-deep)}
.calc-card h4{font-size:16px;margin-bottom:3px}
.calc-card p{font-size:12.5px;color:var(--muted);font-weight:500}
.calc-card .go{margin-left:auto;color:var(--green);font-size:13px;transition:.2s var(--ease)}
.calc-card:hover .go{transform:translateX(3px)}
/* ---- hub-card (rehber kartı — beslenme-rehberi'nden) ---- */
.hub-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.3s var(--ease)}
.hub-card:hover{transform:translateY(-6px);border-color:#dcdcdc;box-shadow:var(--sh-md)}
.hub-media{position:relative;height:160px;background-size:cover;background-position:center}
.hub-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,30,22,0) 52%,rgba(20,18,12,.5))}
.hub-tags{position:absolute;bottom:12px;left:12px;z-index:2;display:flex;gap:6px}
.hub-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(20,18,12,.72);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:var(--radius-sm);backdrop-filter:blur(4px)}
.hub-body h4{font-size:16.5px;margin-bottom:8px;letter-spacing:-.01em}
.hub-card:hover .hub-body h4{color:var(--green-deep)}
.hub-body p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55}
.hub-foot .go{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-weight:700}
.hub-foot .go i{transition:.2s var(--ease)}
.hub-card:hover .hub-foot .go i{transform:translateX(3px)}
/* 5-kart rehber grid — hub-card stilini yeniden kullanır (3 sütun) */
.reh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.reh-grid .hub-media{background-color:var(--tomato-tint)}
/* "yakında" kart — henüz üretilmemiş kategoriler (dürüst placeholder, sessiz # değil) */
.hub-card.hub-soon{cursor:default}
.hub-card.hub-soon:hover{transform:none;border-color:var(--line);box-shadow:none}
.hub-card.hub-soon:hover .hub-body h4{color:var(--slate)}
.hub-card.hub-soon .hub-media{filter:grayscale(.3)}
.hub-card.hub-soon .hub-foot .go{color:var(--muted);font-weight:600}
.hub-tag.soon-badge{background:rgba(255,255,255,.94);color:var(--slate-2)}
/* genel-bilgi notu (disclaimer) — nane info kutusu */
.reh-note{display:flex;gap:14px;align-items:flex-start;margin-top:30px;background:var(--tomato-tint);border:1px solid #bae4cc;border-radius:var(--radius-lg);padding:18px 20px}
.reh-note>i{color:var(--tomato-deep);font-size:18px;margin-top:2px;flex:none}
.reh-note p{font-size:14px;color:var(--slate-2);font-weight:500;line-height:1.6}
.reh-note p a{color:var(--tomato-deep);font-weight:700}
.reh-note p a:hover{text-decoration:underline}
/* BİLİNÇLİ SAPMA (Beyar, 2026-09-14) — rehber bölümü tam genişlikte (künye kaldırıldı,
kartlar 1176px); açıklama da kanonun `.sec-head .lead{max-width:520px}` sınırını
bırakıp aynı genişliğe yayılıyor. Yalnız bu bölüm; kanon kuralı değişmedi. */
#beslenme-rehberi .sec-head .lead{max-width:none}
/* ---- responsive ---- */
@media(max-width:1024px){.reh-grid,.hub-grid{grid-template-columns:1fr 1fr}.nut-entry{grid-template-columns:1fr;gap:28px}}
@media(max-width:640px){.reh-hero{padding:96px 0 34px}.reh-hero h1{font-size:29px}.reh-grid,.hub-grid{grid-template-columns:1fr}.nut-entry{padding:26px}}