/* =====================================================================
   KANON — HERO / BANNER DÜZENİ  ·  TEK KAYNAK  ·  DadaDiet
   ---------------------------------------------------------------------
   Beyar, 2026-09-14 (revize partisi 5): "bannerların tutarlılığı, gastro
   ve fit kanon". Bu dosya YALNIZ YERLEŞİM ve ÖLÇÜ taşır; renk, zemin,
   görsel ve tipografi ailesi sayfa CSS'inde Diet paletinde kalır.

   Kardeş markalardaki karşılığı:
     DadaFit   https://dadafit.com.tr/kanon/hero.css  (aynı sözleşme, aynı
               "ayrı dosya, en son bağlanır" kuralı)
     DadaGastro  reference/puf-noktalari/puf-noktalari.css `.lst-top`
               ailesi + build/portal.css `.eyebrow`/`.wrap`
   İkisi de tek tek ölçüldü (@1440×1000 ve @390×844, her görünüm AYRI
   Chromium context — .ai/rules/scripts.md).

   ── SÖZLEŞME (iki markanın ORTAK düzeni) ─────────────────────────────
     · Ekmek kırıntısı HER ZAMAN sol üstte, bandın başlangıcından SABİT
       ofsette: bandın kendi üst dolgusu (128px @1440 · 96px @390).
       İki kolonun DIŞINDA, onların üstünde ayrı bir satır. Kendi dikey
       dolgusunu TAŞIMAZ (taşırsa kutu doğru yerde durur ama yazı kayar).
     · Sol kolon: üst etiket (çizgi + ikon + küçük başlık) → H1 → açıklama.
       Sola yaslı; ortalanmış hero yok.
     · Sayaç bloğu SAĞDA, dikey, ALTA hizalı, sol kolonla arası 44px,
       dikey ayraçlı (1px rgba(255,255,255,.18) + 38px sol dolgu),
       kalemler arası 16px.
     · ≤1024: tek kolon; sayaçlar sol kolonun ALTINA düşer, yatay sıraya
       döner, ayraç dikeyden yataya çevrilir.

   ── ÖLÇÜLEN KANON DEĞERLERİ ──────────────────────────────────────────
     eksen                     Gastro          Fit          bu dosya
     kap genişliği             1240 / 32-16    1240 / 32-16  (Diet zaten)
     kırıntı ofseti @1440      128             128           128
     kırıntı ofseti @390       74              96            96  (Diet zaten)
     kolon arası               44              44            44
     sayaç ayracı              38px + 1px      38px + 1px    38px + 1px
     sayaç kalem arası         16              16            16
     sayaç sayısı (b)          29/700/1.1      29/700/1.1    29/700/1.1
     sayaç etiketi (span)      12.5/500        12.5/500      12.5/500
     dar sayaç sayısı (b)      20–29           20            20
     dar satır ayracı          border-top 18px border-top 18 border-top 18

   ── BİLİNÇLİ SAPMALAR ────────────────────────────────────────────────
     · H1 42px (Gastro 44 · Fit 42): Diet'in kendi yürürlükteki ölçüsü,
       21 hero sayfasının 19'unda zaten 42. Büyütmek kanonun söylemediği
       bir değişiklik olurdu.
     · `.lead{max-width:560px}` — Diet'te 560/566.37/580/600/620/680/
       kısıtsız YEDİ ayrı değer yürürlükteydi (ölçüldü @1440). Tek değere
       indirildi; değer kanonun kendi ölçüsüdür (Gastro liste ailesi 560).
       ⚠ İlk yazımda 620 seçmiştim (Diet'in en kalabalık hero ailesinin
       kendi değeri); lead parti 5 kanon kararında 560 dedi ve haklı —
       "ölçü kanondan" şartı Diet'in yürürlükteki değerini değil kardeş
       markanınkini bağlar.
     · Kırıntı @390 ofseti 96 (Gastro 74): Diet bandın üst dolgusunu
       zaten Fit'ten almış (`.below-header` 96px); iki marka ayrışıyor,
       Diet'in yürürlükteki değeri korundu.
     · Profil kimlik bandı (`.pf-top`, diyetisyen detay) bu dosyanın
       kapsamı DIŞINDA: Fit kanonu da onu ayrı bileşen sayıp listeye
       almıyor (kendi ofseti 112px, 5 sayfada tutarlı). Aynı şekilde
       `<body data-banner>` taşımayan bantlar (`.arama-hero` · `.giris-hero`
       · `/yasal`+`/yasal/*` `.lg-top`) hiç kapsanmıyor; üçünün de kırıntısı
       zaten bandının kendi üst dolgusunda (128/74) ve `/yasal`ın 308/244
       bant ölçüsü parti 3'te onaylanmış bir karar.
     · Makale hero'sunun güven satırı (`.reh-arthero` içindeki
       `.reh-htrust`, rehber/ipucu detayları) DIŞARIDA: o bandın sağ
       kolonunda zaten yazar kartı var, şerit `.reh-artmain`in içinde
       satır olarak duruyor. Ayrı bileşen; kurcalanmadı.
     · Sihirbaz bandı (`.wzp-top`, 3 sayfa) ORTALI değil SOLA yaslandı —
       aşağıda 5 numaralı blok, ölçümüyle.

   ⚠ Sayfa CSS'lerinden SONRA bağlanır (layouts/public.blade.php'de
     `paylasilan/dm-diet-t5d-p.css`ten sonra). Seçiciler dd-shell.css'in
     zaten kurduğu yapısal çapaya asılıdır: banner = `#pageMain`in ilk
     eleman çocuğu, `<body data-banner>` taşıyan sayfalarda.
   ===================================================================== */

/* ── 1 · KIRINTI: BANDIN ÜST DOLGU ÇİZGİSİNE RAPTİYELİ ───────────────
   Kök neden (ölçüldü 2026-09-14, 21 sayfa @1440): dd-shell.css
   `body[data-banner] #pageMain>:first-child{justify-content:center}`
   ile `.wrap`ı dikeyde ortalıyor. Kırıntı `.wrap`ın içinde olduğu için
   sayfanın içerik uzunluğuyla birlikte aşağı kayıyordu: ölçülen y
   141.9 (diyetisyen-ol) … 225.0 (iletisim), 21 sayfada 11 ayrı değer.
   Çözüm kardeş markanın kendi mekanizması: bandın ortalaması KORUNUR
   (Diet'in kendi kararı), `.wrap` bandın içeriğini doldurur ve kırıntı
   `.wrap`ın üst kenarına raptiyelenir → y her sayfada 128 / 96.
   `left` YAZILMAZ: yazılırsa kutu `.wrap`ın yatay dolgusunu kaybeder ve
   132 → 100'e kayar (Fit'te ölçülmüş hata). */
body[data-banner] #pageMain>:first-child{
  justify-content:flex-start;
}
/* ⚠ `padding-bottom` YAZILMIYOR. İlk sürümde aileyi 46px'e eşitlemiştim
   (Fit'in değeri); ölçüldü, `/yasal` ve `/yasal/*` bandını 307.8 → 355.7
   yapıyordu. O 308/244 ölçüsü parti 3'te Beyar'ın onayladığı bir karar
   (yasal iskelet Gastro'dan, `yasal-gastro-v1.css` kuyruğu) — bant
   yüksekliklerinin tek kaynağı dd-shell'in `data-banner` belirteçleri,
   bu dosya oraya karışmaz. */
body[data-banner] #pageMain>:first-child>.wrap{
  position:relative;
  flex:1 1 auto;
  /* Kırıntı satırının yeri AYRILIR. Mutlak kutu `.wrap`ın DOLGU kutusuna
     göre konumlandığı için bu dolgu kırıntıyı kaydırmaz; yalnız altındaki
     içeriğin ona tırmanmasını engeller. 32px = 20px kırıntı satırı +
     Gastro'nun kırıntıya verdiği 12px alt boşluk.
     Ölçülen kusur: /diyetisyenler @390 içerik banda sığmıyor (481.4 >
     427.5) ve `justify-content:center` taşmayı İKİ UÇTAN birden veriyor;
     üst etiket kırıntının 12.4px üstüne biniyordu. */
  padding-top:32px;
}
/* `.wrap` bandın içerik kutusunu doldurur; içeriği kendi içinde ortalanır.
   ⚠ İKİ AYRI DURUM (ölçüldü): dört sayfada (`/beslenme` · `/ipuclari` ·
   `/kac-kalori` · `/puflar`) `.wrap`ın KENDİSİ iki kolonlu ızgaradır
   (`:has(> .reh-htrust)` — beslenme-merkezi-v1.css vd.) ve sayaç şeridi
   onun sağ sütunudur. Oraya `display:flex` yazmak ızgarayı çökertiyor;
   ilk denemede tam bunu yaptım ve kırıntı x=132'den 1216.6'ya, H1 132'den
   582.6'ya kaydı. Izgara olan `.wrap` `align-content` ile ortalanır,
   kalanı sütun flex ile. */
body[data-banner] #pageMain>:first-child>.wrap:not(:has(> .reh-htrust)){
  display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;
  /* `safe`: içerik banda sığmazsa ortalama BAŞA döner, taşma yalnız alta
     gider. Desteklemeyen tarayıcı bu satırı atar ve üstteki `center`
     yürürlükte kalır. */
  justify-content:safe center;
}
/* ── 1b · IZGARA OLAN `.wrap`: KIRINTI BANDA RAPTİYELENİR ────────────
   Dört sayfa (`/beslenme` · `/ipuclari` · `/kac-kalori` · `/puflar`) ve
   makro-rehberi ailesi `.wrap`ı 6 satırlı ızgara yapar; 2. satır `1fr`
   ile kırıntıyı yukarı, içeriği aşağı iter ve sayaç şeridi `grid-row:
   2/-1 · align-self:end` ile metin kolonunun ALTINA hizalanır.
   Bu ızgarayı KURCALAMIYORUZ — denendi ve ölçüldü: `.wrap`ı bandı
   doldurmaya zorlayınca `1fr` 254.4px'e şişiyor (üst etiket 307→382),
   satırları `auto`ya çevirince de şeridin kendi boyu satırlara dağılıp
   sayaç alt kenarı açıklamanın 39px altına düşüyordu (hizalama bozuluyor).
   Bu ailede kırıntı `.wrap`a değil BANDA raptiyelenir; `.wrap` dd-shell'in
   kendi dikey ortalamasında kalır.
   `left` bandın kendi kutusuna göre yazılır: kap 1240px ve ortalı olduğu
   için sol iç kenar = 50% − 620px + `.wrap` yatay dolgusu (32/24/16 —
   dd-shell.css:104/1140/1158). `max()` kap genişliği daraldığında dolguya
   düşürür. */
body[data-banner] #pageMain>:first-child:has(> .wrap > .reh-htrust){
  position:relative;
  justify-content:center;
}
body[data-banner] #pageMain>:first-child:has(> .wrap > .reh-htrust)>.wrap{
  position:static;
  flex:0 1 auto;
  padding-top:0;
}
body[data-banner] #pageMain>:first-child:has(> .wrap > .reh-htrust)>.wrap>.rd-crumb{
  top:128px;
  left:max(32px, calc(50% - 588px));
}
@media (max-width:1024px){
  body[data-banner] #pageMain>:first-child:has(> .wrap > .reh-htrust)>.wrap>.rd-crumb{
    left:max(24px, calc(50% - 596px));
  }
}
@media (max-width:640px){
  body[data-banner] #pageMain>:first-child:has(> .wrap > .reh-htrust)>.wrap>.rd-crumb{
    top:96px;
    left:max(16px, calc(50% - 604px));
  }
}

/* ── 1c · `.wrap > .reh-htrust` AİLESİ TEK DÜZENE ALINIR ─────────────
   Ölçüldü 2026-09-14: dokuz sayfanın `.wrap` çocuk dizisi BİREBİR aynı
   (`nav.rd-crumb | span.eyebrow | h1 | p.lead | div.reh-htrust`) ama
   düzen ikiye ayrılıyordu, çünkü ızgara kuralı yalnız dört sayfanın
   kendi CSS'inde var (`beslenme-merkezi-v1` · `beslenme-ipuclari-v1` ·
   `kac-kalori-v1` · `diyet-puf-noktalari-v1`):
     ızgara + sağda dikey şerit   /beslenme /makro-rehberi /ipuclari
                                  /kac-kalori /puflar
     düz blok + altta yatay satır /sayfa/nasil-calisir /sayfa/editoryal-
                                  ve-bilimsel-kurul /sayfa/reklam-ve-marka-
                                  is-birlikleri /sayfa/sponsorlar-ve-
                                  partnerler /sayfa/uzmanla-calisma-rehberi
   Aynı markup'ın iki düzeni tutarsızlığın ta kendisi; kanon (Gastro
   `.lst-hero`/`.lst-stats` · Fit `.lib-row`/`.lib-stats`) sağda dikey
   şeridi söylüyor. Izgara buraya, tek kaynağa taşındı ve dokuzuna birden
   iniyor. Satır şablonu kaynak dosyaların kendi şablonudur (2. satır
   `1fr`: kırıntı üstte, içerik altta); `.wrap` gerilmediği için `1fr`
   çökük kalır ve şerit metin kolonuyla alttan hizalanır (altFark 0). */
body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr auto auto auto auto;
  column-gap:44px;
  align-items:end;
}
body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>:not(.reh-htrust){ grid-column:1; }
body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>.eyebrow{ grid-row:3; }
body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>h1{ grid-row:4; }
body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>.lead{ grid-row:5; }
body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>.chips{ grid-row:6; }
body[data-banner] #pageMain>:first-child>.wrap>.reh-htrust{
  grid-column:2;grid-row:2/-1;align-self:end;
  display:flex;flex-direction:column;
  gap:16px;margin-top:0;
  padding-left:38px;
  border-left:1px solid rgba(255,255,255,.18);
  border-top:0;padding-top:0;
}
body[data-banner] #pageMain>:first-child>.wrap>.rd-crumb{
  position:absolute;top:0;
  /* `grid-area:auto` ŞART: ızgara olan `.wrap`larda (dört rehber sayfası)
     kırıntının `grid-row:1` ataması duruyorsa mutlak kutunun kapsayıcı
     bloğu ızgara KUTUSU değil o GRID ALANI olur (CSS Grid §9.1) ve
     `top:0` satırın tepesine düşer. Ölçüldü: position=absolute, top=0px,
     y yine 232. Yerleşimi `auto`ya çevirince kapsayıcı blok ızgaranın
     dolgu kenarına döner ve y=128 olur. */
  grid-area:auto;
  width:auto;max-width:100%;
  /* `left` YAZILMAZ (Fit kanonunun ölçülmüş hatası): flex olan `.wrap`ta
     `left:auto` kutuyu yatayda statik konumunda, yani kolonun kendi sol
     kenarında tutar (x=132 / 16). Yalnız ızgara olan `.wrap`ta bu konum
     kaybolur — orası aşağıda ayrıca telafi edilir. */
  padding-top:0;padding-bottom:0;
  margin-top:0;margin-bottom:0;
}

/* ── 2 · İKİ KOLONLU SATIR: sol kolon esner, sayaçlar sağda, ALTA hizalı ── */
body[data-banner] #pageMain>:first-child :is(.lst-hero,.dl-hero,.tst-hero,.tst-banner-row){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:44px;
  align-items:end;
}
body[data-banner] #pageMain>:first-child :is(.lh-main,.dl-main,.tst-head,.nb-head){
  min-width:0;
}

/* ── 3 · SAYAÇ ŞERİDİ: dikey, ayraçlı, alta hizalı ───────────────────── */
/* ⚠ `display:flex` aynı zamanda BİR KUSURU KAPATIYOR, kasıtlı: ölçüldü,
   `/diyetisyenler` `.lst-stats` @390'da `display:none` idi (üç `.st` ile
   birlikte). Kanon hiçbir ölçüde sayaç gizlemiyor — Gastro da Fit de
   390'da şeridi metnin ALTINA indirip gösteriyor. Bu satır silinirse
   şerit o sayfada yeniden kaybolur. */
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats){
  display:flex;flex-direction:column;
  align-self:end;align-items:flex-start;
  gap:16px;
  margin-top:0;
  padding-left:38px;
  border-left:1px solid rgba(255,255,255,.18);
}
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) :is(.st,.tst-stat,.dl-stat,.lst-stat,.nb-stat,.tb-stat){
  display:block;
}
/* Sayı ve etiketin TİP ÖLÇEĞİ. Diet'te iki ayrı ölçek yürürlükteydi
   (ölçüldü @1440): 29/700 + 12.5/500 (programlar · diyetisyenler ·
   kurumsal · hesaplayıcılar · /beslenme) ve 26/800 + 11.5/600 (/testler ·
   test detay · /ipuclari · /kac-kalori · /puflar). Kanon değeri birincisi:
   Gastro `.lst-stats .st b` 29/700 · `span` 12.5/500, Fit `.lib-stat b`
   29/700 · `span` 12.5/500 — iki marka burada birebir aynı.
   `.reh-htrust` (rehber ailesinin şeridi) farklı bir markup taşıyor
   (`span > i + b + metin`); markup'a dokunulmadı, yalnız ölçek eşitlendi. */
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) b,
body[data-banner] #pageMain>:first-child>.wrap>.reh-htrust b{
  font-size:29px;font-weight:700;line-height:1.1;letter-spacing:-.02em;
}
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) :is(.st,.tst-stat,.dl-stat,.lst-stat,.nb-stat,.tb-stat)>b{
  display:block;
}
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) :is(.st,.tst-stat,.dl-stat,.lst-stat,.nb-stat,.tb-stat)>span,
body[data-banner] #pageMain>:first-child>.wrap>.reh-htrust>span{
  font-size:12.5px;font-weight:500;letter-spacing:normal;text-transform:none;
}
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) :is(.st,.tst-stat,.dl-stat,.lst-stat,.nb-stat,.tb-stat)>span{
  display:block;margin-top:6px;line-height:1.55;
}
/* içi boş kalem satırda hayalet boşluk bırakmasın (Fit kanonu) */
body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) :is(.st,.tst-stat,.dl-stat,.lst-stat,.nb-stat,.tb-stat):empty{
  display:none;
}

/* ── 4 · SOL KOLON: üst etiket → H1 → açıklama, sola yaslı ───────────── */
body[data-banner] #pageMain>:first-child .eyebrow{
  justify-content:flex-start;
}
body[data-banner] #pageMain>:first-child h1{
  margin:14px 0 12px;
}
body[data-banner] #pageMain>:first-child .lead{
  max-width:560px;
  margin-left:0;margin-right:0;
}

/* ── 5 · SİHİRBAZ BANDI (.wzp-top · 3 sayfa) SOLA YASLANIR ───────────
   Ölçüldü @1440: `.wzp-hero{text-align:center;max-width:700px;margin:0
   auto}` ile üst etiket x=599–643, H1 x=370, açıklama x=430 — kırıntı
   ise x=132. Kanonda ortalanmış hero YOK (Gastro 9, Fit 8 hero sayfası
   tek tek bakıldı); band ailesinin kalanıyla aynı sol çizgiye alındı. */
body[data-banner] #pageMain>:first-child .wzp-hero{
  max-width:none;margin-left:0;margin-right:0;
  text-align:start;
}
body[data-banner] #pageMain>:first-child .wzp-hero .eyebrow{
  justify-content:flex-start;
}
body[data-banner] #pageMain>:first-child .wzp-hero .lead{
  margin-left:0;margin-right:0;
}
body[data-banner] #pageMain>:first-child .wzp-trust{
  justify-content:flex-start;
}

/* ── ≤1024 · TEK KOLON; SAYAÇLAR ALTA DÜŞER, YATAY SIRAYA DÖNER ─────── */
@media (max-width:1024px){
  body[data-banner] #pageMain>:first-child :is(.lst-hero,.dl-hero,.tst-hero,.tst-banner-row){
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:22px;
  }
  body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats){
    flex-direction:row;flex-wrap:wrap;
    align-self:start;
    column-gap:34px;row-gap:14px;
    padding-left:0;padding-top:18px;
    border-left:0;border-top:1px solid rgba(255,255,255,.18);
  }
  /* Rehber ailesinin şeridi kendi dosyalarında 900px'te düşüyordu; ailenin
     kalanı 1024'te düşüyor. Kanon bir kırılma noktası tanıyor (Fit ≤1024),
     şerit oraya alındı. */
  body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust){
    grid-template-columns:minmax(0,1fr);
    /* Satır şablonu da sıfırlanır, yoksa `grid-row:auto` olan şerit
       boşalmış 1. satıra (kırıntı raptiyelendi) yerleşip BAŞLIĞIN
       ÜSTÜNE çıkıyor — ölçüldü @1024: şerit y=260.5, açıklamanın
       115.6px üstünde. Kaynak dosyalar aynı sıfırlamayı 900px'te
       yapıyor (beslenme-merkezi-v1.css:142). */
    grid-template-rows:none;
  }
  /* 1c'deki açık satır atamaları da geri alınır — `> *` seçicisi onları
     ezemiyor (özgüllük düşük) ve şerit boşalan 1. satıra tırmanıp
     BAŞLIĞIN ÜSTÜNE çıkıyordu (ölçüldü @1024: şerit y=266, üst etiket
     y=305). */
  body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>*,
  body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>.eyebrow,
  body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>h1,
  body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>.lead,
  body[data-banner] #pageMain>:first-child>.wrap:has(> .reh-htrust)>.chips{
    grid-row:auto;
  }
  body[data-banner] #pageMain>:first-child>.wrap>.reh-htrust{
    grid-column:1;grid-row:auto;
    flex-direction:row;flex-wrap:wrap;
    align-self:start;
    column-gap:34px;row-gap:14px;
    margin-top:22px;
    padding-left:0;padding-top:18px;
    border-left:0;border-top:1px solid rgba(255,255,255,.18);
  }
}

/* ── ≤640 ───────────────────────────────────────────────────────────── */
@media (max-width:640px){
  body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats){
    column-gap:20px;row-gap:12px;
  }
  body[data-banner] #pageMain>:first-child>.wrap>.reh-htrust{
    column-gap:20px;row-gap:12px;
  }
  body[data-banner] #pageMain>:first-child :is(.lst-stats,.dl-stats,.tst-stats,.nb-stats,.tb-stats) b,
  body[data-banner] #pageMain>:first-child>.wrap>.reh-htrust b{
    font-size:20px;
  }
}