/* =====================================================================
 SAYFA CSS — ANTRENMAN OLUŞTURUCU (H3 · 7. oturum)

 Tam sayfa sihirbaz, pop-up DEĞİL (K33 / K35). İskelet R13'ün
 `programini-bul-v1.html`inden alındı: numaralı adım rayı, soru bloğu,
 büyük tıklanabilir kartlar, alt bar (Adım n/5 + Geri/İleri), sonuç,
 alt aksiyon, yasal şerit. Sınıf öneki `wg-` (workout generator).

 R13'ten FARKI: R13 var olan programları puanlayıp SIRALIYOR; burada
 motor yeni bir plan KURUYOR — havuz süzme + gün gün dağıtma. Kurallar
 sayfaya gömülü değil, `tasks/H3-KURALLAR.md`'nin §9 bloğuyla birebir
 aynı `KURALLAR` nesnesinden okunuyor.

 Banner LİSTE ailesine giriyor (R15): `.lib-top` + dosya adında
 "-detay-" geçmiyor → kabuk body'ye data-fit-hero-kind="liste" yazıyor
 → yükseklik --banner-h-liste (544 / 607 / 587). Burada banner ölçüsüne
 dair TEK SATIR yok; yalnız arka plan görseli bildiriliyor.
 ===================================================================== */
.lib-top{--lib-img:url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1680&q=80&auto=format&fit=crop&exp=7&gam=6&sat=-16');--lib-pos:center 38%}

/* banner güven şeridi — .lib-stats kabuğun blok sırasını verdiği için
   kap sınıfı korunuyor, kalemler sayısal değil ikonlu */
.lib-stats .wg-trust{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.lib-stats .wg-trust i{color:var(--fit-bright);font-size:13px}

.wg-wrap{max-width:980px}

/* ---- ADIM RAYI ---- */
.wg-rail{list-style:none;display:flex;align-items:stretch;gap:8px;margin:0 0 26px;padding:0}
.wg-rail li{flex:1;display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:13px 13px;transition:.2s var(--ease);min-width:0}
.wg-rail .no{flex:none;width:28px;height:28px;border-radius:var(--radius-circle);display:grid;place-items:center;background:#ececeb;color:var(--muted);font-size:13px;font-weight:800}
.wg-rail .lbl{font-size:13.5px;font-weight:700;color:var(--muted);line-height:1.3;min-width:0}
.wg-rail li.on{border-color:var(--fit);background:var(--fit-tint)}
.wg-rail li.on .no{background:var(--fit);color:#fff}
.wg-rail li.on .lbl{color:var(--fit-deep)}
.wg-rail li.done .no{background:var(--fit-deep);color:#fff}
.wg-rail li.done .lbl{color:var(--slate)}

/* ---- SORU KUTUSU ---- */
.wg-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);overflow:hidden}
.wg-head{padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.wg-head h2{font-size:20px;margin-bottom:5px}
.wg-head p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.6;margin:0}
.wg-body{padding:24px 26px 6px}
.wg-step{display:none}
.wg-step.on{display:block;animation:fadeUp .3s var(--ease)}
/* R9 · EKSİK ZORUNLU SORU İŞARETİ (Beyar).
   Önce yalnız adım altında tek bir genel uyarı vardı ("zorunlu soruları
   yanıtla") ve HANGİ sorunun eksik olduğu belli olmuyordu — adımda birden
   çok soru varsa kullanıcı hepsini gözle tarıyordu. Artık eksik sorunun
   kendisi işaretleniyor, sayfa ona kaydırılıyor ve genel uyarı sorunun
   adını yazıyor. */
.wg-q{margin-bottom:26px;scroll-margin-top:130px}
.wg-eksik{display:none;margin:0 0 10px;font-size:13px;font-weight:700;color:#A32B10;
  align-items:center;gap:7px}
.wg-q.eksik>.wg-eksik{display:flex}
.wg-q.eksik>h3{color:#A32B10}
/* şerit SORU BLOĞUNUN tamamını sarar (başlık + ipucu + uyarı + seçenekler).
   Önce yalnız `.wg-opts`'a veriliyordu ve kartların 16px solunda, oluğun
   içinde asılı kalıyordu — hangi bloğa ait olduğu okunmuyordu. */
.wg-q.eksik{border-left:3px solid #A32B10;padding-left:16px;margin-left:-19px}
.wg-q:last-child{margin-bottom:0}
.wg-q h3{font-size:18px;margin-bottom:5px}
.wg-q h3 .wg-ops{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:#ececeb;border-radius:var(--radius-pill);padding:3px 9px;margin-left:8px;vertical-align:2px}
.wg-hint{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:14px}

/* seçenek ızgarası — sütun sayısı SORUYA göre değişiyor (keşif §9:
   "adıma göre sütun sayısı"). 2–3 seçenekli adımlar geniş kart, çok
   seçenekli adımlar sıkışık ızgara. */
.wg-opts{display:grid;gap:12px}
.wg-opts[data-kol="1"]{grid-template-columns:minmax(0,1fr)}
.wg-opts[data-kol="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.wg-opts[data-kol="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.wg-opts[data-kol="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}

.wg-opt{font-family:inherit;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;display:flex;align-items:flex-start;gap:12px;transition:.18s var(--ease)}
/* 🔴 Koşullu seçenek gizlenince gerçekten gizlensin — `.wg-opt`ın kendi
   `display:flex`i `[hidden]`ın tarayıcı varsayılanını yener (2026-09-05). */
.wg-opt[hidden]{display:none !important}
.wg-opt .ico{flex:none;width:34px;height:34px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:14px;transition:.18s var(--ease)}
.wg-opt .txt{min-width:0}
.wg-opt b{display:block;font-size:14.5px;font-weight:700;color:var(--slate);line-height:1.35}
.wg-opt small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.5;margin-top:3px}
.wg-opt .meta{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:800;letter-spacing:.01em;color:var(--fit-deep);background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-pill);padding:3px 10px}
.wg-opt[aria-pressed="true"] .meta{background:#fff;border-color:var(--fit)}
.wg-opt:hover{border-color:var(--fit);background:var(--fit-tint)}
.wg-opt[aria-pressed="true"]{border-color:var(--fit);background:var(--fit-tint);box-shadow:inset 0 0 0 1px var(--fit)}
.wg-opt[aria-pressed="true"] .ico{background:var(--fit);color:#fff}
.wg-opt:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
/* ================= R8/23 · DIKKAT DURUMU KIRMIZI VURGU =================
 SORUN: "Agri", "Gebelik", "Ozel saglik durumu", "Uzun suredir hareketsiz"
 secilince secenek her secenek gibi YESIL oluyordu — plan uretilmeyecegini
 haber veren tek isaret yoktu.
 RENK: #A32B10 · zemin #FFF5F2 uzerinde kontrast 6.73:1 (AA kucuk metin
 4.5:1 esigini gecer). Secilen secenegin basligi #8C2409 = 8.26:1 (AAA).
 Rozet metni #FFFFFF uzerine #A32B10 zemin = 7.22:1 (AAA).
 Uc oran da WCAG 2.1 relative-luminance formuluyle hesaplandi.
 IKINCI ISARET (renk tek basina degil): (a) gorunur "Dikkat" rozeti + ucgen
 ikon, (b) 1.5px yerine 2px kenarlik + sol 4px seritten ayri ic golge,
 (c) ikon kutusu dolu kirmiziya donuyor. Renk gormeyen de ayirt eder. */
.wg-opt[data-risk="1"]:hover{border-color:#A32B10;background:#FFF5F2}
.wg-opt[data-risk="1"][aria-pressed="true"]{
  border-color:#A32B10;background:#FFF5F2;
  box-shadow:inset 0 0 0 1px #A32B10, inset 4px 0 0 #A32B10}
.wg-opt[data-risk="1"][aria-pressed="true"] .ico{background:#A32B10;color:#fff}
.wg-opt[data-risk="1"][aria-pressed="true"] b{color:#8C2409}
.wg-opt[data-risk="1"]:focus-visible{outline-color:#A32B10}
.wg-dikkat{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  padding:2px 8px;border-radius:var(--radius-pill);background:#A32B10;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  vertical-align:middle;line-height:1.6}
.wg-dikkat i{font-size:9.5px}
/* sıkışık kip — gün sayısı ve odak kartları */
/* ÇİP DİZİSİ — 7 kalemlik "odak" sorusu ızgarada son satırda BOŞ KUTU
   bırakıyordu (@1440 4+3, @390 2+2+2+1). Akan çip dizisinde satır
   uzunluğu içerikten çıkıyor, boşluk kalmıyor; ayrıca isteğe bağlı
   sorunun görsel ağırlığı zorunlu ekipman kartlarının altına iniyor.
   Dil, kütüphanedeki süzgeç çipiyle (.df-fchip) aynı ailede. */
.wg-opts.cip{display:flex;flex-wrap:wrap;gap:9px}
.wg-opt.cip{flex:0 0 auto;align-items:center;gap:9px;padding:10px 16px 10px 10px;border-radius:var(--radius-pill)}
.wg-opt.cip .ico{width:26px;height:26px;font-size:12px;border-radius:var(--radius-circle)}
.wg-opt.cip b{font-size:13.5px}
.wg-opt.dar{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px}
.wg-opt.dar b{font-size:14px}
.wg-opt.dar small{margin-top:1px;font-size:11.5px}

/* ---- CİNSİYET KARTI — H2'nin SVG gövde modeli ---- */
.wg-opt.govde{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 14px 16px}
/* R6 · MADDE 17 — gövde görselleri anatomi setiyle BİRLEŞTİRİLDİ.
   Aynı dört dosya (assets/svg/govde-*.svg) artık iki katmanlı: altta
   Higgsfield render'ı (<image class="an-govde">), üstte segmentlenmiş
   tıklama path'leri (.an-bolge). Burada seçim yok — path'ler yalnız
   SEÇİLİ DURUMUN yeşil yıkamasını taşıyor, tıklama hedefi değiller.
   Eski .an-siluet / .an-cizgi kuralları kaldırıldı: o düğümler artık yok
   ve .an-bolge kuralsız kalırsa SVG varsayılanı olan SİYAHA boyanırdı.
   aspect-ratio yeni ortak viewBox'tan (758/1380). */
.wg-govde{width:100%;max-width:132px;aspect-ratio:758/1380;display:grid;place-items:center}
.wg-govde svg{width:100%;height:100%;display:block}
.wg-govde .an-govde{opacity:.86;transition:opacity .18s var(--ease)}
.wg-govde .an-bolge{fill:transparent;pointer-events:none;transition:fill .18s var(--ease)}
.wg-opt.govde:hover .wg-govde .an-govde,
.wg-opt.govde[aria-pressed="true"] .wg-govde .an-govde{opacity:1}
.wg-opt.govde:hover .wg-govde .an-bolge{fill:color-mix(in srgb,var(--fit) 18%,transparent)}
.wg-opt.govde[aria-pressed="true"] .wg-govde .an-bolge{fill:color-mix(in srgb,var(--fit) 34%,transparent)}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .wg-opt.govde:hover .wg-govde .an-bolge{fill:rgba(0,150,227,.18)}
  .wg-opt.govde[aria-pressed="true"] .wg-govde .an-bolge{fill:rgba(0,150,227,.34)}
}
.wg-govde-yok{background:var(--fit-tint);border-radius:var(--radius-md)}

/* ---- ALT BAR ---- */
.wg-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 26px 20px;border-top:1px solid var(--line);margin-top:24px;flex-wrap:wrap}
.wg-no{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.wg-nav{display:flex;align-items:center;gap:10px}
.wg-warn{width:100%;font-size:12.5px;font-weight:600;color:#a8431f;display:none;align-items:center;gap:8px}
.wg-warn.on{display:flex}
.wg-warn i{font-size:13px}

/* ---- R6 · MADDE 3 · KARTIN YASAL ALT BANDI ----
   Kabuğun `.hr-note` kutusu (yeşil zemin + kenarlık + 34px üst boşluk +
   yuvarlak köşe) kart DIŞINDA duran bağımsız bir blok içindi. Kartın içine
   girince aynı görünüm iki kutunun iç içe geçmesi demek olurdu; band
   kartın kendi kenarına yaslanıyor: dış kenarlık ve yarıçap yok, yalnız
   üstte ayraç çizgisi ve kartın alt köşe yarıçapı. */
.wg-card>.wg-legal{
  margin-top:0;border:none;border-top:1px solid var(--fit-line);
  border-radius:0;padding:18px 26px 20px;background:var(--fit-tint);
  align-items:flex-start;gap:12px
}
.wg-card>.wg-legal>i{font-size:15px;margin-top:1px}
.wg-card>.wg-legal p{font-size:13px;line-height:1.62;color:var(--slate-2)}

/* ---- SONUÇ: PLAN ÖZETİ ---- */
.wg-ozet{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.wg-ozet span{display:inline-flex;align-items:center;gap:8px;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-pill);padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--fit-deep)}
.wg-ozet i{font-size:12px}

/* havuz sınırı bildirimi — gizlenmiyor, söyleniyor */
.wg-uyari{display:flex;gap:13px;align-items:flex-start;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-lg);padding:15px 18px;margin-bottom:20px}
.wg-uyari>i{color:var(--fit-deep);font-size:15px;margin-top:2px;flex:none}
.wg-uyari p{margin:0;font-size:13px;font-weight:500;color:var(--slate-2);line-height:1.65}

/* ---- SONUÇ: GÜNLER ---- */
.wg-gunler{display:flex;flex-direction:column;gap:14px}
.wg-gun{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.wg-gun-head{display:flex;align-items:center;gap:13px;padding:15px 19px;background:var(--paper);border-bottom:1px solid var(--line);flex-wrap:wrap}
.wg-gun-no{flex:none;width:32px;height:32px;border-radius:var(--radius-circle);background:var(--fit);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:800}
.wg-gun-ad{flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--slate)}
.wg-gun-kalip{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wg-nicin{padding:13px 19px;border-bottom:1px solid var(--line);background:#fcfcfb}
.wg-nicin b{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.wg-nicin ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:4px}
.wg-nicin li{font-size:12.5px;font-weight:500;color:var(--slate-2);line-height:1.55}
.wg-nicin li i{color:var(--fit-deep);font-style:normal;font-weight:700}
.wg-hrk{display:flex;flex-direction:column}
.wg-hrk a{display:flex;align-items:center;gap:14px;padding:13px 19px;border-top:1px solid var(--line);transition:.18s var(--ease)}
.wg-hrk a:first-child{border-top:none}
.wg-hrk a:hover{background:var(--fit-tint)}
.wg-hrk .s{flex:none;width:26px;height:26px;border-radius:var(--radius-sm);background:#ececeb;color:var(--slate-2);display:grid;place-items:center;font-size:12px;font-weight:800}
.wg-hrk .t{flex:1;min-width:0}
.wg-hrk .t b{display:block;font-size:14.5px;font-weight:700;color:var(--slate);line-height:1.35}
.wg-hrk .t small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.wg-recete{flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.wg-recete span{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--slate-2);white-space:nowrap}
.wg-hrk .go{flex:none;color:var(--fit-deep);font-size:13px}
/* şema v2 · §3.3 — günün ısınması. `.wg-nicin` ile aynı şeritte durur ama
 zemini değil AKSANI farklı: ısınma bir gerekçe değil, yapılacak ilk iş. */
.wg-isinma{display:flex;gap:11px;align-items:flex-start;padding:13px 19px;border-bottom:1px solid var(--line);background:var(--fit-tint)}
.wg-isinma>i{flex:none;margin-top:2px;color:var(--fit-deep);font-size:13px}
.wg-isinma b{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fit-deep);margin-bottom:4px}
.wg-isinma p{font-size:12.5px;font-weight:500;color:var(--slate-2);line-height:1.55;margin:0}
.wg-isinma p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wg-isinma p a:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px;border-radius:var(--radius-sm)}
/* "zorlarsa şu" satırı — ikinci kademe bilgi, ad satırından bir ton aşağıda */
.wg-hrk .t .alt{display:block;font-size:12px;font-weight:600;color:var(--fit-deep);margin-top:3px}
.wg-hrk .t .alt i{font-size:10px;margin-right:5px}

/* risk dalı — kişisel egzersiz reçetesi üretilmez */
/* R8/23: sonuc blogu da ayni kirmiziyi kullanir — ikon zaten kirmiziydi,
 BASLIK notrdu. Sol 4px serit = ikinci isaret (renk tek basina degil). */
.wg-risk{display:flex;gap:14px;align-items:flex-start;background:#fff5f2;border:1px solid #f3cdc0;border-left:4px solid #A32B10;border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px}
.wg-risk>i{color:#A32B10;font-size:18px;margin-top:2px;flex:none}
.wg-risk b{display:block;font-size:15px;color:#8C2409;margin-bottom:5px}
.wg-risk p{font-size:13.5px;color:var(--slate-2);font-weight:500;line-height:1.65;margin:0}
.wg-list{display:flex;flex-direction:column;gap:12px}
.wg-hit{display:flex;align-items:flex-start;gap:15px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px 19px;transition:.2s var(--ease)}
.wg-hit:hover{border-color:var(--fit);background:var(--fit-tint)}
.wg-hit .rank{flex:none;width:32px;height:32px;border-radius:var(--radius-circle);background:var(--fit);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:800}
.wg-hit .txt{flex:1;min-width:0}
.wg-hit .kind{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wg-hit .ad{display:block;font-size:16px;font-weight:700;color:var(--slate);margin:3px 0 4px}
.wg-hit small{display:block;font-size:13px;font-weight:500;color:var(--slate-2);line-height:1.55}
.wg-hit .go{flex:none;color:var(--fit-deep);font-size:13px;margin-top:9px}

/* seçimlerin + nasıl kuruldu */
.wg-sum,.wg-how{margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px}
.wg-sum h3,.wg-how h3{font-size:14px;margin-bottom:10px}
.wg-sum-row{display:flex;gap:14px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.wg-sum-row:first-of-type{border-top:none;padding-top:0}
.wg-sum-k{flex:0 0 40%;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.5}
.wg-sum-v{flex:1;display:flex;flex-wrap:wrap;gap:6px}
.wg-pick{background:var(--fit-tint);color:var(--fit-deep);border:1px solid var(--fit-line);border-radius:var(--radius-pill);padding:4px 11px;font-size:12px;font-weight:700}
.wg-how ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.wg-how li{font-size:12.5px;font-weight:500;color:var(--slate-2);line-height:1.6}
.wg-how li b{color:var(--slate);font-weight:700}
.wg-how-note{margin:12px 0 0;font-size:12px;font-weight:500;color:var(--muted);line-height:1.6}

/* plan bağlantısı */
.wg-link{margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px}
.wg-link h3{font-size:14px;margin-bottom:5px}
.wg-link p{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.6;margin:0 0 11px}
.wg-link-row{display:flex;gap:10px;flex-wrap:wrap}
.wg-link-row input{flex:1;min-width:220px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--slate-2);background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 14px}
.wg-link-row input:focus-visible{outline:3px solid var(--fit);outline-offset:1px}
.wg-kopyalandi{font-size:12.5px;font-weight:700;color:var(--fit-deep);margin:9px 0 0;display:none}
.wg-kopyalandi.on{display:block}

/* ---- PLANI KAYDET (madde 18) ----
   Referans (dadagastro.com/bugun-ne-pisirsem · "Menüye Ekle") eylemi
   kartın içinde, tam genişlikte ve birincil renkte tutuyor; burada plan
   TEK bir nesne olduğu için eylem sonucun en üstünde tek bir bant. */
.wg-kaydet{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-lg);padding:17px 20px;margin-bottom:20px}
.wg-kaydet .kt{flex:1;min-width:240px}
.wg-kaydet .kt>b{display:block;font-size:15px;font-weight:700;color:var(--slate);line-height:1.35}
.wg-kaydet p{margin:4px 0 0;font-size:12.5px;font-weight:500;color:var(--slate-2);line-height:1.6}
.wg-kaydet p b{font-weight:700;color:var(--slate)}
.wg-kaydet p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wg-kaydet .ke{flex:none;display:flex;gap:10px;flex-wrap:wrap}
.wg-kaydet.ok{background:#fff;border-color:var(--fit)}
.wg-kaydet .kico{flex:none;width:38px;height:38px;border-radius:var(--radius-circle);background:var(--fit);color:#fff;display:grid;place-items:center;font-size:15px}

/* alt aksiyon */
/* R11/M11 · Beyar: "alttaki 3'lü butonları merkezi yap ve altındaki
   infoyla mesafeyi koy". Ortalandı; alt boşluk 24 → 40px (bilgi kutusunun
   kendi `margin-top:34px`'i ile toplam nefes belirgin ayrım veriyor).
   Değerler 4px ızgarasına oturuyor. */
.wg-done{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px;margin-bottom:40px}

@media (max-width:1024px){
  .sec{padding:var(--sec-pad) 0}
  .wg-rail{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wg-rail::-webkit-scrollbar{display:none}
  .wg-rail li{flex:0 0 auto;min-width:132px}
}
@media (max-width:640px){
  .sec{padding:var(--sec-pad) 0}
  .wg-rail li{min-width:118px;padding:11px 12px}
  .wg-rail .lbl{font-size:12.5px}
  .wg-opts[data-kol="2"],.wg-opts[data-kol="3"],.wg-opts[data-kol="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wg-opts[data-kol="1"],.wg-opts[data-kol-m="1"]{grid-template-columns:minmax(0,1fr)}
  .wg-head{padding:18px 18px 14px}
  .wg-body{padding:20px 18px 4px}
  .wg-foot{padding:16px 18px 18px}
  .wg-card>.wg-legal{padding:16px 18px 18px}
  .wg-nav{width:100%}
  .wg-nav .btn{flex:1;justify-content:center}
  .wg-sum-row{flex-direction:column;gap:5px}
  .wg-sum-k{flex:none}
  .wg-hrk a{flex-wrap:wrap}
  .wg-recete{justify-content:flex-start;width:100%;padding-left:40px}
  .wg-gun-ad{flex:1 0 100%}
  .wg-kaydet{padding:16px 18px}
  .wg-kaydet .ke,.wg-kaydet .ke .btn{width:100%;justify-content:center}
}