/* ===== SAYFA CSS — kabuk CSS'i assets/css/dd-shell.css'te ===== */
/* ============ KİMLİK TOKEN'LARI (brand-tokens.md) ============ */
:root{
  --tomato:#009A44;          /* DadaDiet kabuk aksanı — NANE (Beyar kararı A5; site default domatesten bilinçli sapma, --green token'ı). DadaFit'in doygun #0093d0 sporcu yeşilinden daha yumuşak/klinik → beslenme tonu */
  --tomato-dark:#007E38;     /* hover türevi (nane koyu, --green-deep ile aynı) */
  --tomato-deep:#00602b;     /* nane derin — CTA/footer/aksan metin (WCAG AA: beyaz üstü & beyaz zeminde ≥4.5) */
  --tomato-tint:#DDF2E6;     /* nane fısıltısı zemin */
  --slate:#211E16;           /* Pantone Process Black C — başlık/koyu metin/panel */
  --slate-2:#56514a;           /* sıcak muted koyu */
  --green:#009A44;           /* yalnız sağlık bloğu */
  /* R37 (2026-08-24): bu satır KALDIRILDI — kabuğun kanon değeri geçerli.
     Ölçüldü: #007e38 eyebrow metni olarak beyazda 3,59:1 / kremde 3,41:1,
     WCAG AA metin eşiği 4,5:1. dd-shell.css'in kendi --green-deep'i
     #00602b ve o eşiği geçiyor (5,33 / 5,06). Buradaki yeniden tanım
     kanondan KAYMIŞ bir kopyaydı; yeni renk açılmadı, kayma kaldırıldı. */
  --yellow:#FAC045;          /* yalnız puan */
  --muted:#717171;           /* ikincil metin (AA: beyaz zeminde ≥4.5) */
  --line:#ECECEC;            /* hairline ayraç */
  --cream:#EFE5D3;           /* sıcak nötr */
  --cream-2:#F7F1E6;
  /* kurumsal alternatif renkler (kılavuz) */
  --c-purple:#b14fc5; --c-mint:#6cca98; --c-green:#0093d0; --c-petrol:#006072;
  --paper:#ffffff;
  --bg:#f9f9f9;              /* eski site grisi — sayfa zemini (Revize T3 M12) */
  --ink:#211E16;
  /* section zemin ritmi — açık bölüm alternasyonu (gri ↔ beyaz, eski site ekseni) */
  --bg-white:#ffffff;        /* saf beyaz */
  --bg-cream:#f9f9f9;        /* eski site section grisi (own.css'teki en yaygın zemin) */

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; --radius-circle:50%;
  /* legacy alias → yeni ölçek */
  --r:var(--radius-lg); --r-sm:var(--radius-sm); --r-lg:var(--radius-xl);
  --sh-sm:0 1px 2px rgba(33,30,22,.04), 0 2px 6px rgba(33,30,22,.05);
  --sh-md:0 6px 22px rgba(33,30,22,.09);
  --sh-lg:0 18px 50px rgba(33,30,22,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1240px;
}
:root{--c-mint-deep:#009A44}
:root{
  --d-3:#322D26; --d-deep:#161310;
  --dline:rgba(251,248,243,.16);
  --r-md:12px; --r-lg:16px; --r-xl:24px; --r-circle:50%;
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --tomato-rgb:59,183,126;
  --slate-rgb:33,30,22;      /* --slate (#211E16) rgb üçlüsü — R5 "Nasıl Çalışır" adım arka planı bunu kullanır, yeni renk değil */
  --paper-rgb:255,255,255;   /* --paper (#ffffff) rgb üçlüsü — R5 adım fotoğrafının okunurluk perdesi bunu kullanır, yeni renk değil */
  --sh-3:0 18px 50px rgba(33,30,22,.16);
  --panel-fl:360px;
  /* KARDEŞ MARKA RENK DEĞİŞKENLERİ DÜŞTÜ — ölçüldü, davranış değişmedi.
     Bu `:root` bloğu `dd-shell.css:1040-1053`ün BİREBİR kopyasıdır ve kabuk
     CSS'i her sayfada zaten yükleniyor; yani düşen iki satırın değerlerini
     `:root`a yine kabuk veriyor (aynı hex). Bu dosyada o değişkenleri OKUYAN
     tek bir kural YOK (ölçüldü: 0 kullanım) — o değişkenleri okuyan iki
     kural mentör panelindedir ve onlar kabuk CSS'inde. Düşme sebebi: bu blok satır-içi
     `<style>` olarak HTTP gövdesine basılıyor ve marka kapısı (a) gövdede
     yasak dizgi görürse KIRMIZI verir; kapının Beyar onaylı iki istisnası da
     bunu kapsamıyor. */
  --b-diet:#009A44;    --b-diet-l:#7FCCA1;
  --b-fit:#0093d0;     --b-fit-l:#4DB4DE;
  --b-akademi:#006072; --b-akademi-l:#2E97AB;
}
/* "Tüm Tarifler" — kategori grid'inin 13. hücresi, buton dilinde (Revize T3 M1) */
.mega-cats .mega-cat-all{
  font-weight:700;color:var(--tomato);
  background:var(--tomato-tint);border:1px solid rgba(0,154,68,.22);
}
/* Tarif Bulucu CTA — mega-feat kolonunda (Faz3 #22; finder giriş noktası) */

/* =====================================================================
   F10 — SAĞLIK HUB · sağlık dili (yeşil aksan; token seti AYNI)
   Kaynaklar: lst-hero (koyu band) · calc-card/diet-panel (v3a 418–447)
   ===================================================================== */

/* ---- HERO: koyu band (liste hero dili) — yeşil sağlık aksanı ---- */
/* FULL-VIEWPORT hero (kardeş markanın .hero-v kompozisyonu → Diet): tam ekran yükseklik, içerik dikey ortalı */
/* +22px: kabuktaki R1 kuralı hero'dan sonraki paneli 22px yukarı bindirir
   (margin-top:-22px, border-radius:22px). Ölçüm 1440x900: hero 900px iken
   sonraki panel 878px'de başlıyor, yani beyaz panel ekranın altından 22px
   içeri giriyordu. Hero, R1 binişi kadar uzatılıyor; biniş bozulmadan ilk
   ekran tamamen hero olur (panel top = viewport yüksekliği). */
.sh-top{position:relative;min-height:calc(100vh + 22px);min-height:calc(100svh + 22px);display:flex;align-items:center;padding-top:96px;background:#15241c;overflow:hidden}
/* hero media: optimize lazy video (JS kontrollü) + LOCAL poster (ilk-paint + mobil/reduced/save-data fallback) = bg; ::after nane overlay video ÜSTÜNDE; içerik .wrap z:2. prefers-reduced-motion → video gizli, poster kalır. */
.sh-hero-media{position:absolute;inset:0;z-index:0;background:#15241c url('../img/diet-hero-poster.jpg') center/cover no-repeat}
.sh-hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.sh-hero-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(820px 360px at 84% 12%,rgba(0,154,68,.22),transparent 62%),
  linear-gradient(90deg,rgba(18,28,22,.93) 0%,rgba(20,32,25,.80) 46%,rgba(20,32,25,.55) 100%),
  linear-gradient(180deg,rgba(18,28,22,0) 58%,rgba(16,26,20,.9) 100%)}
@media(prefers-reduced-motion:reduce){.sh-hero-media video{display:none}}
/* full-viewport hero alt scroll ipucu */
/* bottom 24 → 46: hero'nun son 22px'i R1 binişiyle panelin altında kalıyor;
   ipucunun ölçülen 24px'lik görünür alt boşluğu (1440x900'de alt kenar 876,
   viewport 900) ancak 24+22 ile korunur. Yeni değer değil, iki mevcut
   ölçünün toplamı. */
.sh-scroll{position:absolute;left:50%;bottom:calc(24px + 22px);transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.72);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.sh-scroll i{font-size:15px;animation:shbob 1.8s var(--ease) infinite}
@keyframes shbob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.sh-scroll i{animation:none}}
.sh-top .wrap{position:relative;z-index:2;width:100%}
/* İA 2. faz: hero tek kolon — özet alanı kendi bölümüne taşındı (sıra: hero →
   hızlı başlangıç → özet). Kolon değeri ≤1024 kuralında zaten kullanılan değer. */
.sh-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:50px;align-items:center;padding:14px 0 50px}
.sh-main{max-width:720px}
.sh-hero .eyebrow{color:#99d7b4}
.sh-hero .eyebrow::before{background:var(--green)}
.sh-hero h1{color:#fff;font-size:44px;margin:14px 0 12px;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.sh-hero h1 .accent{color:#7fcca1;white-space:nowrap}
.sh-hero .lead{color:#e3ede7;font-weight:500;font-size:15.5px;max-width:560px;text-shadow:0 1px 14px rgba(0,0,0,.3)}
.sh-hchips{margin-top:20px}
.sh-hchips .lbl{color:#c4d4ca}
.sh-hchips .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(4px)}
.sh-hchips .chip:hover{background:var(--green);border-color:var(--green);color:#fff}
/* hero trust şeridi (eski sh-stats sayıları — DadaFit df-htrust kalıbı) */
.sh-htrust{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:24px}
.sh-htrust span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#cfe6da}
.sh-htrust i{color:var(--green);font-size:13px}
.sh-htrust b{color:#fff;font-weight:700}
/* SIGNATURE: Günün Beslenme Özeti — sağ kolon canlı kart (cam, nane) */
.sh-ledger{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:22px 22px 20px;backdrop-filter:blur(8px);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.shl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.shl-head h3{color:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em}
/* Etiket yarıçapı kanon düğme/çip değerine çekildi (--radius-md 12px; Beyar, 2026-09-14 — donörde hap). */
.shl-date{font-size:11.5px;font-weight:600;color:#bfe0cf;background:rgba(0,154,68,.22);border:1px solid rgba(0,154,68,.45);padding:4px 10px;border-radius:var(--radius-md)}
.shl-row{margin-bottom:14px}
.shl-rowtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.shl-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#e3efe9}
.shl-tag i{color:var(--green);width:15px;text-align:center}
.shl-val{font-size:13.5px;font-weight:700;color:#fff}
.shl-val small{font-size:11px;font-weight:500;color:#a9c6b7;margin-left:2px}
.shl-bar{height:7px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);overflow:hidden}
.shl-fill{height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--green),var(--c-mint))}
.shl-net{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
.shl-net>i{color:var(--green);font-size:15px;margin-top:2px}
.shl-net b{display:block;color:#fff;font-size:13px;font-weight:700;margin-bottom:2px}
.shl-net span{font-size:12px;color:#b9d3c6;line-height:1.5}
.shl-net a{color:var(--green);font-weight:700;white-space:nowrap}

/* ---- sağlık eyebrow yeşil (genel) ---- */
.sec-green .eyebrow{color:var(--green-deep)}
.sec-green .eyebrow::before{background:var(--green)}
/* (sayfa-içi araç arama KALDIRILDI — header büyüteci + hero "Popüler" çipleri kapsıyor) */

/* ---- HESAPLAYICILAR: calc-card grid (v3a) — 3 sütun ---- */
/* HESAPLAYICILAR: yatay scroll-snap slider (3 tam kart + 4.'nün peek'i; sıfır bağımlılık) */
.calc-slider{position:relative}
.calc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 8px}
.calc-track::-webkit-scrollbar{display:none}
.calc-track>.calc-card{flex:0 0 calc((100% - 122px)/3);scroll-snap-align:start}
.calc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:var(--radius-circle);border:1px solid #d9ebe1;background:#fff;color:var(--green-deep);font-size:15px;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(20,40,30,.12);transition:.2s var(--ease)}
.calc-arrow:hover{background:var(--green);border-color:var(--green);color:#fff}
.calc-arrow.prev{left:-12px}
.calc-arrow.next{right:-12px}
.calc-arrow[disabled]{opacity:0;pointer-events:none}
/* DİYET LİSTELERİ: aynı slider reçetesi (hub-card, .calc-arrow yeniden kullanılır) */
.hub-slider{position:relative}
.hub-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 8px}
.hub-track::-webkit-scrollbar{display:none}
.hub-track>.hub-card{flex:0 0 calc((100% - 130px)/3);scroll-snap-align:start}
.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 KARTLARI (testler + diyet programları) ---- */
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.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:172px;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-cat{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.94);color:var(--slate);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:var(--radius-sm);letter-spacing:.02em}
.hub-cat.green{background:var(--tomato-deep);color:#fff}
/* Program kategori etiketi ikonlu (Beyar, 2026-09-14 — canlıda ikon yok, bilinçli sapma); ikon–metin aralığı
   yanındaki `.hub-tag` ile aynı 5px. */
.hub-cat{display:inline-flex;align-items:center;gap:5px}
.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)}
/* R3/B1: .hub-body ve .hub-foot'un KANON tanımı artık dd-shell.css'te
   (Beyar B1 kararı) — yerel kopya burada SİLİNDİ (çift `margin-top` hatası
   oradaydı, kanon tek bildirimle doğru). Türev kurallar (h4/p/.go) kalır. */
.hub-body h4{font-size:17px;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(--tomato-deep);font-weight:700}
.hub-card:hover .hub-foot .go i{transform:translateX(3px)}
.hub-foot .go i{transition:.2s var(--ease)}

/* ---- BESİN KÜTÜPHANESİ girişi (yeşil yıkamalı band) ---- */
.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}
/* R4b: #shSecNut içinde iki blok var (nut-entry + rehber ızgarası); aradaki
   nefes payı İCAT EDİLMİŞ 56px yerine .sec'in KENDİ ölçüsünü (74px masaüstü
   / 44px ≤640, dd-shell.css:205,1044) tek kaynak olarak kullanır — yeni
   ölçü yok, .sec ile aynı ritim. */
.nut-guides-head{margin-top:74px}

/* ---- DİYETİSYEN paneli (v3a diet-panel VERBATIM dili) ---- */
.diet-panel{background:var(--slate);border-radius:var(--radius-xl);padding:42px;color:#fff;position:relative;overflow:hidden}
.diet-panel::before{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:var(--radius-circle);background:radial-gradient(circle,rgba(0,154,68,.35),transparent 70%)}
.diet-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.diet-panel .eyebrow{color:#99d7b4;position:relative}
.diet-panel .eyebrow::before{background:var(--green)}
.diet-panel h3{color:#fff;font-size:28px;margin:13px 0 12px;position:relative;letter-spacing:-.02em}
.diet-panel .lead{color:#b9c6d1;font-weight:500;font-size:15px;margin-bottom:24px;position:relative}
.diet-list{position:relative;display:flex;flex-direction:column;gap:13px}
.diet-doc{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:13px 15px;transition:.2s var(--ease);cursor:pointer}
.diet-doc:hover{background:rgba(255,255,255,.1)}
.diet-doc .av{width:50px;height:50px;border-radius:var(--radius-circle);background-size:cover;background-position:center;flex:none;border:2px solid rgba(0,154,68,.6)}
/* R6: görseli olmayan diyetisyende boş/kırık daire kalmasın — kabuğun kendi
   ".is-harf" baş-harf rozeti dili (dd-shell.css:441 .acct-ava.is-harf/.da-ava.is-harf)
   burada AYNEN yeniden kullanılır; yeni renk/ölçü icat edilmedi, kartın
   kendi 50px avatar ölçüsü korunur. */
.diet-doc .av.is-harf{display:grid;place-items:center;background:var(--tomato);color:#fff;font-weight:700;font-size:18px;letter-spacing:0;line-height:1}
.diet-doc .di b{font-size:15px;font-weight:700;color:#fff;display:block}
.diet-doc .di span{font-size:12.5px;color:#9fb0bc;font-weight:500}
.diet-doc .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--c-mint);background:rgba(0,154,68,.18);padding:6px 12px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:6px;white-space:nowrap}
.diet-panel .btn-green{position:relative;background:var(--tomato-deep);color:#fff;width:100%;margin-top:22px;box-shadow:0 8px 22px rgba(0,154,68,.3)}
.diet-panel .btn-green:hover{filter:brightness(1.06);transform:translateY(-2px)}
.diet-panel .diet-all{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:700;color:#99d7b4}
.diet-panel .diet-all i{font-size:12px;transition:transform .2s var(--ease)}
.diet-panel .diet-all:hover{color:#fff}
.diet-panel .diet-all:hover i{transform:translateX(3px)}

/* R6-düzeltme (lead ölçümü): #gunun-ozeti'nin .diet-panel'i KOYU kalır
   (değişmedi) — ama #shSecDyt (Diyetisyenler) bölümü R4'ten sonra AÇIK
   zeminde (--bg-white) ve aynı sınıf ailesi üstündeki metinler beyazdı
   (isim #fff ↔ zemin #fff = 1.00:1). Yalnız BU bölüm için kit AÇIK ZEMİNE
   tonlanıyor — .nut-entry/.nut-row'daki AYNI "tonlu panel + beyaz kart"
   yapısı (satır ~213-226) tekrar kullanılıyor, yeni renk icat edilmedi.
   #gunun-ozeti hiç dokunulmadı. */
#shSecDyt .diet-panel{background:var(--bg-cream);color:var(--slate);border:1px solid var(--line)}
#shSecDyt .diet-panel .eyebrow{color:var(--green-deep)}/* dosyanın kendi ".sec-green .eyebrow" dili, satır ~163 */
#shSecDyt .diet-panel h3{color:var(--slate)}
#shSecDyt .diet-panel .lead{color:var(--slate-2)}
#shSecDyt .diet-doc{background:var(--paper);border:1px solid var(--line)}
#shSecDyt .diet-doc:hover{background:var(--tomato-tint);border-color:var(--green)}
#shSecDyt .diet-doc .di b{color:var(--slate)}
#shSecDyt .diet-doc .di span{color:var(--muted)}
#shSecDyt .diet-doc .tag{color:var(--tomato-deep);background:var(--tomato-tint)}
#shSecDyt .diet-panel .diet-all{color:var(--tomato-deep)}
#shSecDyt .diet-panel .diet-all:hover{color:var(--tomato-dark)}

/* ---- responsive ---- */
@media(max-width:1024px){
  .sh-top{align-items:flex-start}/* stacked içerik 100vh'yi aşarsa üstten başla, kırpma yok */
  .sh-hero{grid-template-columns:minmax(0,1fr);align-items:start;gap:22px;padding-bottom:34px}
  .sh-main{min-width:0}
  .sh-htrust{margin-top:18px}
  .sh-ledger{margin-top:4px}
  .hub-grid{grid-template-columns:1fr 1fr}
  .calc-track>.calc-card{flex-basis:calc((100% - 60px)/2.3)}
  .hub-track>.hub-card{flex-basis:calc((100% - 70px)/2.2)}
  .nut-entry,.diet-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
  .wz-steps{flex-wrap:wrap;gap:20px 0;padding:24px 14px}
  .wz-step{flex:0 0 50%}
  .wz-step::before,.wz-step::after{display:none}
  .wz-next-row{padding:16px 14px 22px}
  .sh-top{padding-top:74px}/* 62 header + 12 nefes (H1 koyu hero kanon) */
  .sh-hero h1{font-size:29px}
  .sh-hero .lead{font-size:14.5px}
  .sh-htrust{gap:10px 16px}
  .sh-ledger{padding:18px 16px 16px}
  .sh-hchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .sh-hchips::-webkit-scrollbar{display:none}
  .sh-hchips .chip{flex:none;white-space:nowrap}
  .hub-grid{grid-template-columns:1fr}
  .calc-track>.calc-card{flex-basis:86%}
  .hub-track>.hub-card{flex-basis:88%}
  .calc-arrow{display:none}
  .nut-entry{padding:26px}
  .diet-panel{padding:28px}
  .nut-guides-head{margin-top:44px}/* .sec'in ≤640 ölçüsüyle aynı (dd-shell.css:1044) */
}
.nav a.active[href="saglik-hub-v1.html"]{color:var(--green)}
.nav a.active[href="saglik-hub-v1.html"]::after{background:var(--green)}
/* saglik-dropdown: scoped health chrome */
/* diğer dropdown/mega aktif-item (turuncu kanon, underline gizli) */
.dropdown:not(.dropdown-health) a.active{background:var(--tomato-tint)}
.dropdown a.active::after,.mega-cats a.active::after{display:none}
.mega-cats a.active{background:var(--tomato-tint)}
.nav a[href="saglik-hub-v1.html"]:hover{color:var(--green);background:rgba(0,154,68,.10)}

/* ===== NASIL ÇALIŞIR — sihirbaz adım yolu dili (diyetisyen-bul-v1'den BİREBİR) ===== */
.wz-card{max-width:940px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--sh-md);overflow:hidden}
.wz-steps{display:flex;align-items:flex-start;gap:0;padding:34px 30px 32px;background:var(--bg-cream)}
/* R5: adımlar artık statik değil — gerçek <button>, tıklanabilir + klavye odaklı */
.wz-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;background:none;border:none;font-family:inherit;min-width:0;padding:0;cursor:pointer}
.wz-step:hover .wz-num{border-color:var(--green);color:var(--green)}
.wz-step:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:var(--radius-sm)}
.wz-num{width:38px;height:38px;border-radius:var(--radius-circle);display:grid;place-items:center;font-size:15px;font-weight:800;background:var(--paper);border:2px solid var(--line);color:var(--muted);transition:.25s var(--ease);z-index:2}
.wz-lbl{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;transition:color .25s}
.wz-lbl small{display:block;font-size:11px;font-weight:500;color:#a3a3a3;margin-top:4px;line-height:1.4}
.wz-step::before,.wz-step::after{content:"";position:absolute;top:19px;height:2px;background:var(--line);z-index:1}
.wz-step::before{left:0;right:50%;margin-right:19px}
.wz-step::after{left:50%;right:0;margin-left:19px}
.wz-step:first-child::before{display:none}
.wz-step:last-child::after{display:none}
.wz-step.current .wz-num{border-color:var(--green);color:var(--green);background:var(--tomato-tint)}
.wz-step.current .wz-lbl{color:var(--slate)}
/* "Sonraki Adım" — .btn-ghost'un kendisi, ok ikonuna .see-all/.diet-all'daki
   AYNI hover-translate mikro-etkileşimi (yeni etkileşim dili değil) */
.wz-next-row{display:flex;justify-content:center;padding:22px 30px 28px;background:var(--paper)}
.wz-next i{transition:transform .2s var(--ease)}
.wz-next:hover i,.wz-next:focus-visible i{transform:translateX(3px)}
.wz-res-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
/* Düğmeler KARTIN hizasında durur (Beyar, 2026-08-25). Kart `max-width:940px`
   ve ortalı; düğme satırı ise `.wrap`ın tam genişliğini kullanıyordu, o yüzden
   iki uç kartın kenarlarından taşıyordu. Aynı ölçü ve aynı ortalama veriliyor —
   yeni değer üretilmedi, kartın kendi ölçüsü tekrarlandı. */
#nasil-calisir .wz-res-actions{max-width:940px;margin-left:auto;margin-right:auto}
/* R5: "Bana Uygun Olanı Bul" bölümün sağına, "Sağlık Araçları" sola —
   yalnız bu bölümde (ID kapsamlı), diğer .wz-res-actions kullanımları
   (ör. Programlar bölümü) ETKİLENMEZ */
#nasil-calisir .wz-res-actions{justify-content:space-between}
#nasil-calisir .wz-res-actions .btn-primary i{transition:transform .2s var(--ease)}
#nasil-calisir .wz-res-actions .btn-primary:hover i{transform:translateX(3px)}
/* ---- R5 arka plan katmanı — TAM EKRAN FOTOĞRAF + KOYU OVERLAY ----
   Beyar (2026-08-25): *"burdaki kısım beyaz aşırı fazla, buradaki görseli
   TAM EKRAN istiyorum tabii section için, overlaylı."*

   Önceki hâl fotoğrafı beyaz bir perdenin altına koyuyordu ve metin koyu
   kalıyordu; bölüm de bu yüzden bembeyaz görünüyordu. Yön TERSİNE çevrildi:
   fotoğraf bölümün tamamını kaplar, üstüne KOYU overlay iner, metinler açık
   renge döner.

   🔴 YENİ TASARIM DİLİ ÜRETİLMEDİ. Overlay reçetesi ve metin renkleri
   AYNI SAYFANIN kendi hero'sundan (`.sh-hero-media::after`) birebir alındı:
   aynı üç katman (yeşil radyal parıltı + soldan sağa koyu gradyan + alt
   karartma), aynı `#fff` / `#e3ede7` / `#99d7b4` üçlüsü, aynı metin gölgesi.
   Bölüm zaten o hero ile aynı sayfada ve aynı dili konuşuyor.

   ⚠ Beyaz perde ve dar ekran kırpma istisnası KALKTI: koyu zeminde açık
     metnin payı geniş, o istisnaların dayandığı kısıt ortadan kalktı.
     Fotoğraf artık 390px'te de görünür — eskiden görünmez oluyordu.

   ⚠ `center/cover no-repeat` ZORUNLU: `background` kısayolu `url()` aldığı
     anda boyutu `auto`ya döndürür ve fotoğraf DÖŞENİR. 2x retina çarpımı
     YOK — dosyalar 1600px, ölçü CSS render genişliğinden gelir. */
#nasil-calisir{position:relative;background:#15241c!important;
  --nc-bg-img:url('../img/nasil-calisir-1.jpg')}
#nasil-calisir[data-step="2"]{--nc-bg-img:url('../img/nasil-calisir-2.jpg')}
#nasil-calisir[data-step="3"]{--nc-bg-img:url('../img/nasil-calisir-3.jpg')}
#nasil-calisir[data-step="4"]{--nc-bg-img:url('../img/nasil-calisir-4.jpg')}
#nasil-calisir>.wrap{position:relative;z-index:1}
#nasil-calisir .nc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;transition:background .6s var(--ease);
  background:var(--nc-bg-img,radial-gradient(900px 420px at 85% 0%,rgba(var(--tomato-rgb),.08),transparent 60%)) center/cover no-repeat}
#nasil-calisir[data-step="2"] .nc-bg,#nasil-calisir[data-step="3"] .nc-bg,#nasil-calisir[data-step="4"] .nc-bg{
  background:var(--nc-bg-img) center/cover no-repeat}
/* OVERLAY — hero'nun reçetesi birebir. Ayrı bir katman olarak duruyor ki
   fotoğraf adımdan adıma geçiş yaparken overlay sabit kalsın; tek katmanda
   olsaydı geçiş sırasında karartma da yanıp sönerdi. */
#nasil-calisir .nc-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(820px 360px at 84% 12%,rgba(0,154,68,.22),transparent 62%),
  linear-gradient(90deg,rgba(18,28,22,.93) 0%,rgba(20,32,25,.80) 46%,rgba(20,32,25,.55) 100%),
  linear-gradient(180deg,rgba(18,28,22,0) 58%,rgba(16,26,20,.9) 100%)}
/* Dar ekranda overlay DÜZLEŞİR — ölçümün sonucu, tercih değil.
   Geniş ekranda karartma soldan sağa açılıyor (.93 → .55) çünkü metin solda,
   fotoğraf sağda görünsün diye. 390px'te metin bölümün tamamını kaplıyor ve
   o açılan uç metnin altına düşüyordu (ölçüldü: spot metni 3.68:1).
   Burada karartma düzleşir; fotoğraf kaybolmaz, yalnız daha derin okunur. */
@media (max-width:640px){
  #nasil-calisir .nc-bg::after{background:
    radial-gradient(820px 360px at 84% 12%,rgba(0,154,68,.18),transparent 62%),
    linear-gradient(90deg,rgba(18,28,22,.94) 0%,rgba(20,32,25,.90) 55%,rgba(20,32,25,.86) 100%),
    linear-gradient(180deg,rgba(18,28,22,0) 58%,rgba(16,26,20,.9) 100%)}
}
/* Metinler açık renge döner — hero'nun kendi üçlüsü. */
#nasil-calisir .eyebrow{color:#99d7b4}
#nasil-calisir .eyebrow::before{background:var(--green)}
#nasil-calisir h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
#nasil-calisir .lead{color:#e3ede7;text-shadow:0 1px 14px rgba(0,0,0,.3)}
/* Koyu zeminde beyaz zeminli hayalet düğme okunmuyordu; kabuğun kendi
   koyu-yüzey dili kullanıldı (`.header.at-top .icon-btn` ile aynı değerler,
   yeni değer üretilmedi). */
#nasil-calisir .wz-res-actions .btn-ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff}
#nasil-calisir .wz-res-actions .btn-ghost:hover{background:rgba(255,255,255,.16)}
@media (prefers-reduced-motion:reduce){#nasil-calisir .nc-bg{transition:none}}

/* ===== genel-bilgi notu (beslenme-rehberi .reh-note dili) ===== */
.reh-note{display:flex;gap:14px;align-items:flex-start;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}

/* ===== A4 GÜVEN KATMANI: tıbbi şerit ===== */
.pf-disclaimer{background:var(--tomato-tint);border-top:1px solid rgba(0,154,68,.25)}
.pf-disclaimer .wrap{display:flex;gap:14px;align-items:flex-start;padding-top:22px;padding-bottom:22px}
.pf-disclaimer i{color:var(--tomato-deep);font-size:17px;margin-top:2px;flex:none}
.pf-disclaimer p{font-size:13.5px;color:var(--slate-2);font-weight:500;line-height:1.65;max-width:960px}
.pf-disclaimer b{color:var(--slate);font-weight:700}