/* =====================================================================
   ANSIKLOPEDI-DETAY — SAYFA CSS (kaynak-transfer, AYNEN)
   Kaynak: reference/ansiklopedi/ansiklopedi-detay-v1.html ilk <style>
   bloğunun "SAYFA CSS" işaretinden sonraki kısmı (satır 738-872). Kabuk/
   mega-menü/footer katmanı hariç (portal.css'te kanonik).
   ===================================================================== */

/* ============ F11 CİLA-2 — MUTFAK ANSİKLOPEDİSİ · MADDE DETAYI (YENİ) ============
   tarif-detay anatomisinden türetildi: rd-top + rd-crumb + rd-gallery tek-sahne +
   kunye-col (kc-card) VERBATIM. Gövde seo-landing .seo-prose dilinden (uzun-form
   SEO içerik: Nedir / Ne işe yarar / Faydaları). r-card ve disc-card ilgili rayları. */
.rd-top{padding-top:112px;background:var(--bg-white)}
.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(--tomato)}
.rd-crumb i{font-size:9px;color:#c7c7c7}
.rd-crumb b{color:var(--slate);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.rd-gallery{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;padding-bottom:18px}
.rd-stage{position:relative;grid-column:1;height:420px;border-radius:var(--radius-xl);background-size:cover;background-position:center;overflow:hidden;box-shadow:var(--sh-md);cursor:zoom-in}
.rd-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,12,0) 42%,rgba(20,18,12,.28) 64%,rgba(15,13,9,.78))}
.r-chip{position:absolute;top:16px;left:16px;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)}
.rd-stage-info{position:absolute;left:28px;right:28px;bottom:24px;z-index:2}
.rd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.tbadge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:var(--radius-sm)}
.tbadge.t-green{background:var(--green);color:#fff}
.tbadge.t-editor{background:rgba(255,255,255,.92);color:var(--tomato)}
.rd-stage-info h1{color:#fff;font-size:38px;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px;text-shadow:0 2px 20px rgba(15,13,9,.4)}
.rd-stage-info .latin{color:rgba(255,255,255,.82);font-size:14px;font-weight:600;font-style:italic}
.kunye-col{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0}
.kc-card{flex:1;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg)}
.kc-card .rdf{flex:1;display:flex;align-items:center;gap:11px;padding:13px 15px;min-width:0}
.kc-card .rdf+.rdf{border-top:1px solid var(--line)}
.kc-card .rdf i{flex:none;width:38px;height:38px;border-radius:var(--radius-md);background:#EAF7F0;color:var(--green-deep);display:grid;place-items:center;font-size:15px}
.kc-card .rdf span{display:block;font-size:11px;color:var(--muted);font-weight:500}
.kc-card .rdf b{display:block;font-size:14.5px;font-weight:700;color:var(--slate)}
/* Görsel atıf satırı (CC BY/BY-SA künyesi) — küçük, sessiz. */
.rd-credit{font-size:11.5px;color:var(--muted);font-weight:500;margin:12px 0 0}
.rd-credit a{color:var(--slate-2);text-decoration:underline;text-underline-offset:2px}
.rd-head{padding-bottom:24px;border-bottom:1px solid var(--line)}
.rd-head .rd-sub{font-size:15px;color:var(--slate-2);font-weight:500;max-width:860px;margin:0;line-height:1.7}
/* seo-prose iki kolon (seo-landing VERBATIM) */
.seo-intro{background:var(--bg-white);padding:46px 0 10px}
.seo-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.seo-prose h2{font-size:26px;margin:30px 0 14px;letter-spacing:-.02em;scroll-margin-top:128px}
.seo-prose h2:first-child{margin-top:0}
.seo-prose h3{font-size:18px;margin:24px 0 10px}
/* Beyar revizesi (2026-07-18): gövde paragrafları blok (justify) hizalı; dar
   mobilde boşluk-nehri oluşmaması için hyphens:auto (layout lang="tr" ile TR
   heceleme). Yalnız <p> — başlık/liste doğal hizasında kalır. */
.seo-prose p{font-size:15.5px;color:var(--slate-2);font-weight:500;line-height:1.75;margin-bottom:14px;text-align:justify;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.seo-prose strong{color:var(--slate);font-weight:700}
.seo-prose a.inline{color:var(--tomato);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.seo-prose ul{margin:6px 0 18px;padding:0;list-style:none}
.seo-prose ul li{position:relative;padding:7px 0 7px 28px;font-size:15px;color:var(--slate-2);font-weight:500;line-height:1.6}
.seo-prose ul li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:8px;color:var(--green);font-size:12px}
.seo-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:128px}
.seo-box{background:var(--bg-cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.seo-box h4{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.nutri{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.nutri li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);list-style:none;font-size:13.5px;font-weight:500;color:var(--slate-2)}
.nutri li:last-child{border-bottom:none}
.nutri li b{color:var(--slate);font-weight:700;font-size:14px}
.seo-quick{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.seo-quick li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);list-style:none;font-size:13.5px;font-weight:500;color:var(--slate-2)}
.seo-quick li:last-child{border-bottom:none}
.seo-quick li i{flex:none;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--tomato-tint);color:var(--tomato);display:grid;place-items:center;font-size:14px}
.seo-quick li b{display:block;color:var(--slate);font-weight:700;font-size:14px;margin-bottom:1px}
.rd-sec-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.rd-sec-head h2{font-size:26px}.rd-sec-head .eyebrow{margin-bottom:10px}
.see-all{flex:none;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;color:var(--slate);padding:11px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);transition:.25s var(--ease);white-space:nowrap}
.see-all:hover{border-color:var(--tomato);color:var(--tomato)}
/* ilgili tarifler r-card */
.ans-recipes{background:var(--bg-cream);padding:58px 0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.r-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.3s var(--ease);cursor:pointer;display:flex;flex-direction:column}
.r-card:hover{transform:translateY(-6px);border-color:#dcdcdc}
.r-media-wrap{overflow:hidden}
.r-media{position:relative;height:200px;background-size:cover;background-position:center;transition:.5s var(--ease)}
.r-card:hover .r-media{transform:scale(1.04)}
.r-card .r-chip{position:absolute;top:13px;left:13px}
.r-save{position:absolute;top:11px;right:11px;width:38px;height:38px;border-radius:var(--radius-circle);background:rgba(255,255,255,.94);border:none;color:var(--slate);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:.2s var(--ease)}
.r-save:hover{background:#fff;color:var(--tomato)}.r-save.saved{background:var(--tomato);color:#fff}
.r-body{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1}
.r-body h4{font-size:18px;margin-bottom:11px;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.r-card:hover .r-body h4{color:var(--tomato)}
.r-facts{display:flex;align-items:center;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:13px}
.r-facts span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.r-facts i{font-size:12px;color:var(--tomato)}
.r-facts span+span{border-left:1px solid var(--line);padding-left:12px;margin-left:12px}
.r-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:13px;border-top:1px solid var(--line)}
.r-author{display:flex;align-items:center;gap:9px;min-width:0}
.r-author .av{width:28px;height:28px;border-radius:var(--radius-circle);background-size:cover;background-position:center;flex:none}
.r-author b{color:var(--slate);font-weight:700;font-size:12.5px}
.r-rate{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--slate);font-weight:700}
.r-rate i{color:var(--yellow)}
/* ilgili maddeler disc-card */
.ans-related{background:var(--bg-white);padding:58px 0 68px}
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.disc-card{cursor:pointer;display:block}
.disc-fig{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.disc-fig .bg{width:100%;height:100%;background-size:cover;background-position:center;transition:.5s var(--ease)}
.disc-card:hover .disc-fig .bg{transform:scale(1.05)}
.disc-cat{display:inline-block;margin:16px 0 7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tomato)}
.disc-card h3{font-size:18px;line-height:1.3;margin-bottom:8px;transition:color .2s var(--ease)}
.disc-card:hover h3{color:var(--tomato)}
.disc-card p{font-size:13.5px;color:var(--muted);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,18,12,.9);display:grid;place-items:center;padding:34px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lb-img{max-width:min(1100px,92vw);max-height:80vh;border-radius:var(--radius-lg);box-shadow:var(--sh-lg);display:block;animation:fadeUp .25s var(--ease)}
.lb-close{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.lb-close:hover{background:var(--tomato);border-color:var(--tomato)}
@media (max-width:1024px){
  .rd-gallery{grid-template-columns:1fr}.rd-stage{grid-column:1;height:340px}
  .kunye-col{grid-column:1}.kc-card{flex-direction:row;flex-wrap:wrap}.kc-card .rdf{flex:1 1 45%;border-top:none}
  .seo-intro-grid{grid-template-columns:1fr;gap:30px}.seo-aside{position:static;top:auto}
  .rel-grid,.ans-related .disc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .rd-top{padding-top:62px}.rd-crumb{padding:14px 0 10px;font-size:12px}
  .rd-stage{height:280px;border-radius:var(--radius-lg)}
  .rd-stage-info{left:16px;right:16px;bottom:14px}.rd-stage-info h1{font-size:25px}
  .seo-prose h2{font-size:22px}
  .ans-recipes,.ans-related{padding:40px 0}
  .rel-grid,.ans-related .disc-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .rel-grid::-webkit-scrollbar,.ans-related .disc-grid::-webkit-scrollbar{display:none}
  .rel-grid>*,.ans-related .disc-grid>*{flex:none;width:80vw;max-width:310px;scroll-snap-align:start}
}


/* 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)}
.d-sub-health a i{color:var(--green)}
.d-sub-health a:hover{color:var(--green);background:rgba(59,183,126,.10)}
.nav a[href="saglik-hub-v1.html"]:hover{color:var(--green);background:rgba(59,183,126,.10)}
.header.at-top .nav>.nav-item>a[href="saglik-hub-v1.html"]:hover{color:#fff;background:rgba(255,255,255,.14)}
.dropdown-health a i{color:var(--green)}
.dropdown-health a:hover{background:rgba(59,183,126,.12);color:var(--green)}
.dropdown-health a.active{background:rgba(59,183,126,.12);color:var(--green)}
.dropdown-health a.active i{color:var(--green)}
.dropdown-health a.active::after{display:none}

/* sayfa-yerel (korundu): T5 sticky fix */
html,body{overflow-x:clip}