/* Kaynak-transfer: prototip kac-kalori-v1.html <style> blogu — AYNEN.
   HANDOFF §0: bu tasarim yeniden yapilmaz, oldugu gibi tasinir. */
/* ===== SAYFA CSS — kabuk CSS'i assets/css/dd-shell.css'te ===== */
/* =====================================================================
   KAÇ KALORİ? — liste sayfası. Beslenme başlığının beşinci modülü ve
   Beslenme İpuçları'nın kardeşi: ipuçları alışkanlık anlatır, bu modül
   tek bir sayıyı yanıtlar (bir besin ya da bir pişirme biçimi kaç kalori,
   porsiyon karşılığı ne, pratik alternatifi var mı).

   Yapı referansı DadaGastro "Püf Noktaları" listesi. Referansın kendi
   stil dosyasından ölçülüp birebir alınanlar:
     - kart: solda 166px görsel (sağa doğru maskeyle silinir) + sol alt
       köşede ikon rozeti + sağda dikeyde ortalanmış gövde
     - kart içi sıra: başlık → özet → aynı satırda kategori + okunma
     - ızgara: iki kolon, ≤1024'te tek kolon, 16px boşluk
     - kategori düzeni: tek satır, "Tümü" başta ve sayaçsız, sıralama
       kontrolü aynı satırın sağ ucunda
   Renk ve tipografi DadaDiet'in kendi kimliğinden gelir; referansın
   domates paleti taşınmadı. Sayfalama YOK: on iki yazı tek sayfaya
   sığıyor (9. turun ipuçları kararıyla aynı gerekçe).

   YENİ SINIF YOK. Kullanılan yapılar ve geldikleri yer:
     .reh-hero / .rd-crumb / .reh-htrust / .reh-note   ← beslenme-ipuclari-v1
     .lst-bar                                          ← dd-shell.css (kabuk)
     .pf-tabs / .dt / .cnt / .pf-pane / .tst-tabwrap    ← saglik-testler-v1
     .dl-fbar / .dl-fchip / .lbl                        ← diyet-listeleri-v1
     .pufl-grid                                         ← diyetisyen-profil-v1
     .puf-card / .puf-fig / .puf-ico / .puf-body /
     .puf-tag / .puf-reads                              ← dd-shell.css (kabuk)
     .macro-note                                        ← beslenme-ipuclari-v1
     .sec / .eyebrow / .lead                            ← dd-shell.css (kabuk)
   ===================================================================== */

/* ---- HERO (kardeş modülün .reh-hero dili — birebir; paralaks kabuktan) ---- */
.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)}
/* ---- HERO SAYAÇLARI SAĞ KOLONDA — canlı dadadiet.com/kac-kalori/liste satır içi stil
   bloğundan birebir (2026-09-14). İpuçlarından farkı: sayaç rakamı 29px/700, etiket 12.5px
   ve kolon `:where(.wrap,.reh-hero,.hh-wrap):has(> .reh-htrust)` ile kuruluyor. ---- */
.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}
.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}
.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)}
  .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}
}

/* ---- KATEGORİ + SIRALAMA TEK SATIRDA (referansın .pufl-bar düzeni)
   Şeridin kendisi kabuktaki .lst-bar; solda sitenin tek kategori deseni
   (.pf-tabs, 9. tur kararı), sağ ucunda sıralama (.dl-fbar). ---- */
/* flex:1 1 0 + min-width:0 — referansın kategori satırının (.ke-filter)
   kendi bildirimi. Taban genişlik sıfır olduğu için şerit hiçbir zaman alt
   satıra kırılmaz; sekmeler kalan yere yayılır, yer yetmezse yatay kayar.
   Sıralama kontrolü böylece şeridin sağ ucundan hiç ayrılmaz. Sekme iç
   boşluğu 22→20px: altı sekme kırpılmadan sığsın (sayfaya özel ölçü). */
.pf-tabs{display:inline-flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:4px;overflow-x:auto;scrollbar-width:none;max-width:100%;flex:1 1 0;min-width:0}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tabs .dt{font-family:inherit;font-weight:700;font-size:13.5px;color:var(--muted);background:transparent;border:none;border-radius:var(--radius-sm);padding:11px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:normal;transition:.2s var(--ease);white-space:nowrap;flex:none}
.pf-tabs .dt:hover{color:var(--green-deep)}
.pf-tabs .dt.active{background:var(--tomato-deep);color:#fff}
.pf-tabs .dt .cnt{font-size:11px;font-weight:700;opacity:.6}
.pf-tabs .dt.active .cnt{opacity:.85}
/* ---- SIRALAMA KUTUSU — kanon DadaGastro http://127.0.0.1:8030/puf-noktalari `.disc-tabs`/`.dt`
   ölçüsü (Beyar kuralı, 2026-09-14; sıralama düğmesi olan her sayfada aynı). Canlı Diet'in
   `padding:4px 4px 4px 14px`i ("Sırala:" etiketinden kalma) kutunun solunda boşluk bırakıyordu;
   Gastro'da kutu düğmelere yapışık: dört yanda 4px, düğme 9px 16px + 20px satır = 38px, kutu 48px
   (sekme çubuğuyla aynı boy). Renkler Diet paletinde kaldı. ---- */
.dl-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;width:fit-content;max-width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);flex:none}
.dl-fchip{font-family:inherit;font-size:13px;font-weight:700;line-height:20px;color:var(--muted);background:transparent;border:none;border-radius:var(--radius-sm);padding:9px 16px;cursor:pointer;transition:.2s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.dl-fchip:hover{color:var(--green-deep);background:rgba(0,154,68,.08)}
.dl-fchip.active{background:var(--tomato-deep);color:#fff}

/* ---- KART IZGARASI — referansın .pufl-grid ölçüsü birebir ---- */
.pufl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf-pane{animation:fadeUp .35s var(--ease)}
.pf-pane[hidden]{display:none}

/* ---- toplam sayısı (referansta ızgaranın ÜSTÜNDEKİ özet satırı, bu yüzden
   .macro-note'un üst ayracı yok) ---- */
.macro-note{display:flex;gap:9px;font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.5;margin:20px 0 16px}

/* ---- genel bilgi notu (beslenme-hub) ---- */
.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}
.pagi{margin-top:22px}

/* CANLIDA YOK, BİZDE ZORUNLU — /testler, /besin-kutuphanesi, /ipuclari ile aynı tuzak: canlıda
   olmayan paylasilan/dd-kabuk.css `.pf-tabs .dt.active{background:var(--fit)}` basıyor, `--fit`
   Diet'te tanımsız → aktif "Tümü" sekmesi şeffaf zeminde beyaz yazıyla görünmüyordu. */
#kaloriler .pf-tabs .dt{text-align:start}
#kaloriler .pf-tabs .dt.active{background:var(--tomato-deep)}

/* ---- responsive ---- */
@media (max-width:1024px){
  .pufl-grid{grid-template-columns:1fr}
  /* Şerit iki satıra ayrılır: sekmeler tam genişliği alıp yatay kayar,
     sıralama altına düşer. Tek satırda kalsalardı sekme çubuğuna ~450px
     kalıyordu ve altı sekmenin yalnız ikisi görünüyordu. */
  .pf-tabs{flex-basis:100%}
  .lst-bar{align-items:stretch;gap:12px}
}
@media (max-width:640px){
  .reh-hero{padding:96px 0 34px}
  .reh-hero h1{font-size:29px}
  .pf-tabs .dt{padding:11px 16px}
}