/* Mini Gurme — stylesheet
   Palette comes from the logo: plum, green, orange, sky, berry.
   Each top-level section owns one colour: Tarifler = orange, Uzman = green,
   Literatür = sky, Özel Dosyalar = plum, Basın/Röportaj = berry. */

:root {
  --paper: #FFFDF7;
  --paper-2: #FBF6EC;
  --ink: #2B1B3D;
  --ink-2: #5F5270;
  --ink-3: #8C8199;
  --line: #ECE5DA;
  --plum: #6B2C91;   --plum-t: #F2EBF8;  --plum-d: #4B1B69;
  --green: #1E8B3E;  --green-t: #E5F3E9; --green-d: #146A2E;
  --orange: #F28C1C; --orange-t: #FFF1E0; --orange-d: #C96C09;
  --sky: #2A9FD6;    --sky-t: #E3F2FA;   --sky-d: #1C7BA8;
  --berry: #C6215B;  --berry-t: #FBE7EE; --berry-d: #9E1746;
  --display: "Fraunces", Georgia, serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --r-img: 18px;
  --r-pill: 999px;
  --r-panel: 26px;
  --wrap: 1180px;
  --shadow: 0 18px 40px -22px rgba(43, 27, 61, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--plum); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); font-variation-settings: "SOFT" 100, "opsz" 72; font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-family: var(--body); font-weight: 800; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--ink-2); }
.btn { display: inline-block; background: var(--ink); color: #fff; padding: .8rem 1.5rem; border-radius: var(--r-pill); font-weight: 700; transition: background .15s; }
.btn:hover { background: var(--plum); color: #fff; }

/* ---------- chips (category labels) ---------- */
.chip { display: inline-block; font-size: .78rem; font-weight: 800; padding: .22rem .7rem; border-radius: var(--r-pill); line-height: 1.4; }
.chip--plum { background: var(--plum-t); color: var(--plum-d); }
.chip--green { background: var(--green-t); color: var(--green-d); }
.chip--orange { background: var(--orange-t); color: var(--orange-d); }
.chip--sky { background: var(--sky-t); color: var(--sky-d); }
.chip--berry { background: var(--berry-t); color: var(--berry-d); }
a.chip:hover { filter: brightness(.95); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-head__row { display: flex; align-items: center; gap: 2rem; min-height: 86px; }
.brand img { width: 150px; height: auto; }
.nav { flex: 1; position: relative; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav__item { position: static; }
.nav__link { display: inline-block; padding: .55rem .85rem; border-radius: var(--r-pill); font-weight: 800; font-size: .98rem; color: var(--ink); }
.nav__item--orange > .nav__link:hover, .nav__item--orange:focus-within > .nav__link { background: var(--orange-t); color: var(--orange-d); }
.nav__item--green > .nav__link:hover, .nav__item--green:focus-within > .nav__link { background: var(--green-t); color: var(--green-d); }
.nav__item--sky > .nav__link:hover, .nav__item--sky:focus-within > .nav__link { background: var(--sky-t); color: var(--sky-d); }
.nav__item--plum > .nav__link:hover, .nav__item--plum:focus-within > .nav__link { background: var(--plum-t); color: var(--plum-d); }
.nav__item > .nav__link:hover { background: var(--paper-2); }
.mega { position: absolute; left: 0; top: 100%; padding-top: .9rem; display: none; z-index: 60; width: max-content; max-width: 100%; }
.nav__item:hover .mega, .nav__item:focus-within .mega { display: block; }
.mega__inner { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; max-width: min(960px, 92vw); }
.mega__group { flex: 0 0 auto; width: 190px; }
.mega__title { display: block; font-weight: 800; padding: .3rem 0; line-height: 1.25; }
.mega__title small { font-weight: 600; color: var(--ink-3); font-size: .78em; margin-left: .2em; }
.mega__group ul { list-style: none; margin: 0 0 .3rem; padding: 0 0 0 .6rem; border-left: 2px solid var(--line); }
.mega__group li a { display: block; padding: .15rem .4rem; font-size: .92rem; color: var(--ink-2); border-radius: 6px; }
.mega__group li a:hover { background: var(--paper-2); color: var(--ink); }
.search { display: flex; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .15rem .25rem .15rem 1rem; }
.search input { border: 0; background: transparent; font: inherit; font-size: .95rem; width: 190px; outline: none; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search button { border: 0; background: var(--ink); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.search button:hover { background: var(--plum); }
.search--big { max-width: 560px; padding: .35rem .35rem .35rem 1.3rem; margin-top: .5rem; background: #fff; }
.search--big input { flex: 1; width: auto; font-size: 1.05rem; }
.search--big button, .search--drawer button { width: auto; height: auto; border-radius: var(--r-pill); padding: .6rem 1.2rem; font-weight: 800; font-family: inherit; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; margin-left: auto; }
.burger span { width: 24px; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* drawer (mobile nav) */
.drawer { position: fixed; inset: 86px 0 0; background: var(--paper); z-index: 49; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.drawer[hidden] { display: none; }
.search--drawer { padding: .3rem .3rem .3rem 1rem; margin-bottom: .5rem; }
.search--drawer input { flex: 1; width: auto; }
.drawer__group { border-bottom: 1px solid var(--line); padding: .3rem 0 .6rem; }
.drawer__group summary { font-family: var(--display); font-size: 1.35rem; font-weight: 600; padding: .5rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.drawer__group summary::after { content: "+"; font-family: var(--body); color: var(--ink-3); }
.drawer__group[open] summary::after { content: "–"; }
.drawer__group--orange summary { color: var(--orange-d); } .drawer__group--green summary { color: var(--green-d); } .drawer__group--sky summary { color: var(--sky-d); } .drawer__group--plum summary { color: var(--plum-d); }
.drawer__group a { display: block; padding: .35rem 0 .35rem .5rem; color: var(--ink-2); }
.drawer__group a.drawer__all { font-weight: 800; color: var(--ink); }
.drawer__link { font-family: var(--display); font-size: 1.35rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
body.nav-open { overflow: hidden; }

/* ---------- sections ---------- */
.section { padding: 3.5rem 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; padding-bottom: .9rem; border-bottom: 3px solid var(--ink); }
.section__head--orange { border-color: var(--orange); } .section__head--green { border-color: var(--green); } .section__head--sky { border-color: var(--sky); } .section__head--plum { border-color: var(--plum); } .section__head--berry { border-color: var(--berry); }
.section__sub { margin: .35rem 0 0; color: var(--ink-2); max-width: 52ch; }
.more { font-weight: 800; white-space: nowrap; border-bottom: 2px solid transparent; }
.more:hover { border-color: currentColor; }

/* ---------- hero ---------- */
.hero { padding: 3rem 0 2.5rem; background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero__title { font-size: clamp(2.3rem, 5vw, 4.3rem); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.02em; line-height: 1.05; }
.hero__lead { font-size: 1.2rem; color: var(--ink-2); max-width: 48ch; margin: 1.4rem 0 1.8rem; }
.hero__ages { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hero__ages-label { font-weight: 800; color: var(--ink-2); margin-right: .3rem; }
.age { border: 2px solid var(--plum); color: var(--plum-d); padding: .5rem 1.05rem; border-radius: var(--r-pill); font-weight: 800; transition: background .15s, color .15s; }
.age:hover { background: var(--plum); color: #fff; }
/* the plate: latest recipe served on a dish */
.plate { justify-self: center; display: grid; justify-items: center; gap: 1rem; text-align: center; max-width: 460px; }
.plate__rim { display: block; width: min(440px, 80vw); aspect-ratio: 1; border-radius: 50%; padding: 16px; background: #fff; box-shadow: 0 1px 0 #fff, 0 0 0 1px var(--line), var(--shadow); }
.plate__rim img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.plate__label { display: grid; gap: .1rem; }
.plate__label small { color: var(--orange-d); font-weight: 800; }
.plate__label strong { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; }
.plate:hover .plate__label strong { color: var(--plum); }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 2rem 1.6rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { display: grid; gap: .8rem; align-content: start; }
.card__img { display: block; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 4 / 3; background: var(--paper-2); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card__img img { transform: scale(1.03); }
.card__body { display: grid; gap: .45rem; justify-items: start; }
.card__title { font-size: 1.3rem; line-height: 1.2; }
.card--mini .card__title { font-size: 1.08rem; }
.card__excerpt { margin: 0; color: var(--ink-2); font-size: .95rem; }
.card__meta { margin: 0; font-size: .85rem; color: var(--ink-3); font-weight: 700; }
.card--row { grid-template-columns: 150px 1fr; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.card--row .card__img { aspect-ratio: 1; border-radius: 14px; }
.card--row .card__title { font-size: 1.2rem; }
.list { margin-top: 2rem; }
.list .card--row:last-child { border-bottom: 0; }

/* ---------- plum band + scroller ---------- */
.band { color: #fff; }
.band--plum { background: var(--plum-d); }
.band .section__head { border-color: rgba(255,255,255,.35); }
.band .section__sub { color: rgba(255,255,255,.75); }
.band a:hover { color: #fff; }
.scroller { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 0 1rem; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.tile { flex: 0 0 240px; scroll-snap-align: start; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--plum); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__title { position: absolute; inset: auto 0 0; padding: 3rem 1rem 1rem; background: linear-gradient(180deg, transparent, rgba(43,27,61,.85)); font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: #fff; }
.tile:hover img { filter: brightness(1.06); }

/* ---------- experts ---------- */
.experts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.expert { display: grid; gap: .35rem; align-content: start; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--r-panel); background: var(--green-t); color: var(--ink); transition: background .15s; }
.expert:hover { background: #d9ecdf; color: var(--ink); }
.expert__role { font-weight: 800; color: var(--green-d); font-size: .9rem; }
.expert__name { font-family: var(--display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; }
.expert__latest { color: var(--ink-2); font-size: .92rem; margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.expert__count { font-size: .85rem; color: var(--ink-3); font-weight: 700; margin-top: .3rem; }

/* ---------- two column + link list ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-bottom: 1px solid var(--line); }
.linklist a { display: grid; gap: .15rem; padding: .9rem 0 .9rem 1.4rem; position: relative; }
.linklist a::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 10px; height: 10px; border-radius: 3px; background: var(--sky); }
.linklist strong { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; }
.linklist span { color: var(--ink-2); font-size: .92rem; }

/* ---------- about strip ---------- */
.about-strip { padding-top: 0; }
.about-strip__inner { background: var(--orange-t); border-radius: var(--r-panel); padding: 2.2rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.about-strip__text { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 500; line-height: 1.35; max-width: 42ch; }

/* ---------- category head ---------- */
.cat-head { padding: 2.75rem 0 2.25rem; background: var(--paper-2); }
.cat-head--orange { background: var(--orange-t); } .cat-head--green { background: var(--green-t); } .cat-head--sky { background: var(--sky-t); } .cat-head--plum { background: var(--plum-t); } .cat-head--berry { background: var(--berry-t); }
.cat-head h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-variation-settings: "SOFT" 100, "opsz" 144; }
.cat-head__desc { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; margin: .8rem 0 0; }
.cat-head__count { margin: .6rem 0 0; font-weight: 800; color: var(--ink-3); }
.crumbs { font-size: .88rem; color: var(--ink-3); margin-bottom: .8rem; font-weight: 700; }
.crumbs a:hover { color: var(--ink); }
.subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.subcat { background: #fff; border: 1px solid var(--line); padding: .45rem .95rem; border-radius: var(--r-pill); font-weight: 800; font-size: .92rem; }
.subcat small { color: var(--ink-3); font-weight: 600; }
.subcat:hover { border-color: var(--ink); }
.pager { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 3rem; font-weight: 800; }
.pager a { border: 2px solid var(--ink); padding: .5rem 1.1rem; border-radius: var(--r-pill); }
.pager a:hover { background: var(--ink); color: #fff; }
.empty { color: var(--ink-2); font-size: 1.1rem; }
.empty a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- post ---------- */
.post__head { padding: 2.5rem 0 1.5rem; max-width: 900px; margin-inline: auto; }
.post__title { font-size: clamp(2rem, 4.6vw, 3.4rem); font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.02em; }
.post__summary { font-size: 1.2rem; color: var(--ink-2); margin: 1rem 0 0; max-width: 60ch; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.2rem 0 0; font-size: .9rem; color: var(--ink-3); font-weight: 700; }
.post__date { margin-left: .4rem; }
.post__read::before { content: "•"; margin-right: .5rem; }
.post__cover { max-width: 900px; margin: 0 auto; }
.post__cover img { width: 100%; aspect-ratio: 16 / 9; max-height: 480px; object-fit: cover; border-radius: var(--r-panel); }

.recipe { display: grid; grid-template-columns: 360px 1fr; gap: 3rem; margin-top: 2.5rem; align-items: start; }
.recipe__side { position: sticky; top: 100px; }
.ingredients { background: var(--orange-t); border-radius: var(--r-panel); padding: 1.6rem 1.7rem; }
.ingredients__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.ingredients h2 { font-size: 1.6rem; margin: 0; }
.ingredients__clear { border: 0; background: transparent; color: var(--orange-d); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; padding: .2rem .5rem; border-radius: var(--r-pill); }
.ingredients__clear:hover { background: #fff; }
.ingredients__list { list-style: none; margin: 0; padding: 0; }
.ingredients__list li { border-bottom: 1px dashed rgba(201,108,9,.3); }
.ingredients__list label { display: flex; gap: .8rem; align-items: flex-start; padding: .55rem 0; cursor: pointer; }
.ingredients__list input { appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin-top: .15rem; border: 2px solid var(--orange-d); border-radius: 7px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.ingredients__list input::after { content: ""; width: 12px; height: 7px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ingredients__list input:checked { background: var(--orange-d); }
.ingredients__list input:checked::after { opacity: 1; }
.ingredients__list input:checked + span { color: var(--ink-3); text-decoration: line-through; }
.ingredients__facts { display: flex; gap: 1.5rem; margin: 1rem 0 0; }
.ingredients__facts dt { font-size: .8rem; font-weight: 800; color: var(--orange-d); }
.ingredients__facts dd { margin: 0; font-weight: 700; }
.ingredients__equip { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-2); }
.recipe__main h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 1.6rem 4rem; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -.15rem; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.35rem; display: grid; place-items: center; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 50px; bottom: 6px; width: 2px; background: var(--line); }
.steps h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--ink-2); }
.notes { background: var(--sky-t); border-radius: 20px; padding: 1.2rem 1.5rem; margin-top: .5rem; }
.notes h3 { font-size: 1.1rem; margin-bottom: .3rem; color: var(--sky-d); }
.notes p { margin: 0; }

.prose-wrap { max-width: 760px; margin-top: 3rem; }
.prose-wrap__title { font-size: 1.8rem; margin-bottom: 1rem; }
.prose { font-size: 1.1rem; line-height: 1.7; }
.prose > p:first-child > strong:only-child { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.25; display: block; }
.prose h2 { font-size: 1.65rem; margin: 2rem 0 .7rem; }
.prose h3 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
.prose h2 strong, .prose h3 strong { font-weight: inherit; }
.prose img { border-radius: var(--r-img); margin: 1.5rem auto; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { font-size: .9rem; color: var(--ink-3); text-align: center; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.3rem; border-left: 4px solid var(--orange); font-family: var(--display); font-size: 1.25rem; }
.embed { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: .8rem; margin: 1.5rem 0; text-decoration: none !important; color: var(--ink) !important; transition: border-color .15s; }
.embed:hover { border-color: var(--plum); }
.embed__img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.embed__img img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.embed__body { display: grid; gap: .15rem; font-size: 1rem; line-height: 1.35; }
.embed__kicker { font-size: .8rem; font-weight: 800; color: var(--plum); }
.embed__body strong { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.embed__excerpt { color: var(--ink-2); font-size: .9rem; }
.tags { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags a { background: var(--paper-2); border: 1px solid var(--line); padding: .25rem .7rem; border-radius: var(--r-pill); font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.tags a:hover { border-color: var(--ink); color: var(--ink); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-weight: 800; }
.share span { color: var(--ink-3); margin-right: .3rem; }
.share a, .share button { border: 2px solid var(--ink); background: transparent; color: var(--ink); padding: .4rem 1rem; border-radius: var(--r-pill); font: inherit; font-weight: 800; cursor: pointer; }
.share a:hover, .share button:hover { background: var(--ink); color: #fff; }
.share button.is-done { background: var(--green); border-color: var(--green); color: #fff; }
.related { background: var(--paper-2); margin-top: 3rem; }
.team { margin-top: 3rem; }
.team h2 { margin-bottom: 1rem; }
.page .prose-wrap { margin-top: 2.5rem; padding-bottom: 3rem; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #EFE8F5; margin-top: 3rem; padding: 3.5rem 0 1.5rem; }
.site-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-foot__about img { filter: brightness(0) invert(1); opacity: .9; margin-bottom: 1rem; }
.site-foot__about p { font-family: var(--display); font-size: 1.15rem; max-width: 34ch; }
.site-foot__about .muted { font-family: var(--body); font-size: .95rem; color: rgba(239,232,245,.65); }
.site-foot h4 { margin-bottom: .8rem; color: #fff; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-foot a { color: rgba(239,232,245,.85); }
.site-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-foot__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(239,232,245,.6); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__link { padding: .5rem .6rem; font-size: .92rem; }
  .search input { width: 140px; }
}
@media (max-width: 960px) {
  .nav, .site-head .search { display: none; }
  .burger { display: flex; }
  .site-head__row { min-height: 72px; }
  .brand img { width: 120px; }
  .drawer { inset: 72px 0 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__text { text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__ages { justify-content: center; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .experts__grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .recipe { grid-template-columns: 1fr; gap: 2rem; }
  .recipe__side { position: static; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .about-strip__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 2.5rem 0; }
  .grid { gap: 1.5rem 1rem; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 .card--grid .card__title { font-size: 1.05rem; }
  .card--row { grid-template-columns: 96px 1fr; }
  .card--row .card__title { font-size: 1.05rem; }
  .experts__grid { grid-template-columns: 1fr; }
  .site-foot__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .post__cover img { border-radius: 18px; }
  .ingredients { padding: 1.3rem; }
  .steps li { padding-left: 3.2rem; }
  .steps li::before { width: 38px; height: 38px; font-size: 1.15rem; }
  .steps li:not(:last-child)::after { left: 18px; }
  .tile { flex-basis: 200px; }
  .embed { grid-template-columns: 84px 1fr; }
}

/* =====================================================================
   v2 — hero slider, finder, weekly menu, cooking mode, motion
   ===================================================================== */
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--orange); color: #fff; }
.btn--ghost { background: transparent; border: 2px solid var(--ink); color: var(--ink); padding: calc(.8rem - 2px) 1.5rem; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.nav__link--tool { background: var(--berry-t); color: var(--berry-d); }
.nav__item--berry > .nav__link:hover { background: var(--berry); color: #fff; }

/* ---------- hero slider ---------- */
.hero-slider { position: relative; height: min(88vh, 760px); min-height: 520px; overflow: hidden; background: var(--ink); color: #fff; }
.hs__track { position: absolute; inset: 0; }
.hs__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; display: grid; align-items: end; }
.hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; z-index: 1; }
.hs__img { position: absolute; inset: 0; }
.hs__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
.hs__slide.is-active .hs__img img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hs__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,27,61,.15) 0%, rgba(43,27,61,0) 30%, rgba(43,27,61,.55) 65%, rgba(43,27,61,.92) 100%), linear-gradient(90deg, rgba(43,27,61,.55), transparent 60%); }
.hs__content { position: relative; padding-bottom: 6.5rem; max-width: 720px; margin-left: max(1.25rem, (100% - var(--wrap)) / 2); }
.hs__slide.is-active .hs__content > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hs__slide.is-active .hs__content > :nth-child(2) { animation-delay: .1s; } .hs__slide.is-active .hs__content > :nth-child(3) { animation-delay: .2s; } .hs__slide.is-active .hs__content > :nth-child(4) { animation-delay: .28s; } .hs__slide.is-active .hs__content > :nth-child(5) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hs__chip { font-size: .85rem; }
.hs__title { font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.02em; line-height: 1.02; margin: .8rem 0 .6rem; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hs__title a { color: #fff; }
.hs__lead { font-size: 1.15rem; color: rgba(255,255,255,.85); max-width: 52ch; margin-bottom: .8rem; }
.hs__meta { display: flex; gap: 1.2rem; font-weight: 800; font-size: .9rem; color: rgba(255,255,255,.75); margin-bottom: 1.4rem; }
.hs__ui { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2rem; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.hs__dots { display: flex; gap: .5rem; }
.hs__dot { width: 46px; height: 6px; border: 0; padding: 0; background: rgba(255,255,255,.3); border-radius: 3px; cursor: pointer; overflow: hidden; }
.hs__dot span { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 3px; }
.hs__dot.is-active span { animation: fill 6s linear forwards; }
@keyframes fill { to { width: 100%; } }
.hero-slider.is-paused .hs__dot.is-active span { animation-play-state: paused; }
.hs__arrows { display: flex; gap: .5rem; }
.hs__arrows button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(43,27,61,.35); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s; }
.hs__arrows button:hover { background: var(--orange); border-color: var(--orange); }
.hs__tagline { position: absolute; right: 0; left: 0; top: 2.2rem; z-index: 2; text-align: right; pointer-events: none; }
.hs__tagline p { display: inline-block; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: rgba(255,255,255,.9); background: rgba(43,27,61,.35); backdrop-filter: blur(8px); padding: .6rem 1rem; border-radius: 14px; margin: 0; }

/* ---------- finder ---------- */
.finder { background: var(--orange-t); padding: 3rem 0 3.25rem; }
.finder--page { background: transparent; padding-top: 2rem; }
.finder__head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.finder__head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.finder__head p { margin: 0; color: var(--ink-2); }
.finder__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fchip { border: 2px solid #fff; background: #fff; color: var(--ink); padding: .5rem 1rem; border-radius: var(--r-pill); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; transition: transform .12s, background .12s, color .12s; }
.fchip:hover { transform: translateY(-2px); }
.fchip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fchip--input { background: transparent; border-style: dashed; border-color: var(--orange-d); padding: 0 .2rem 0 1rem; display: inline-flex; align-items: center; }
.fchip--input input { border: 0; background: transparent; font: inherit; font-weight: 700; width: 150px; outline: 0; padding: .5rem 0; }
.finder__results { margin-top: 1.4rem; min-height: 3rem; }
.finder__hint { margin: 0; color: var(--ink-2); }
.finder__hint .link, .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--orange-d); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finder__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fres { display: grid; grid-template-columns: 76px 1fr; gap: .8rem; align-items: center; background: #fff; border-radius: 16px; padding: .6rem; animation: rise .4s both; }
.fres img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.fres strong { font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; display: block; }
.fres small { color: var(--ink-3); font-weight: 700; }
.fres .hit { color: var(--green-d); }
.finder__empty { color: var(--ink-2); margin: 0; }

/* ---------- weekly menu ---------- */
.week { padding: 3.5rem 0; background: var(--plum-t); }
.week__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.week__day { background: #fff; border-radius: 20px; padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.week__name { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--plum-d); padding-bottom: .3rem; border-bottom: 2px solid var(--plum-t); }
.week__item { display: grid; grid-template-columns: 44px 1fr; gap: .6rem; align-items: center; font-size: .88rem; line-height: 1.25; font-weight: 700; }
.week__item img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.week__item small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 800; }
.week__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.week-page { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.week-page__days { display: grid; gap: 1.5rem; }
.wday h2 { font-size: 1.5rem; color: var(--plum-d); margin-bottom: .7rem; }
.wday__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.wday__item { display: grid; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .6rem; font-size: .92rem; line-height: 1.25; }
.wday__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.wday__item small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 800; }
.wday__item strong { font-family: var(--display); font-weight: 600; }
.shopping { position: sticky; top: 100px; background: var(--orange-t); border-radius: var(--r-panel); padding: 1.5rem; }
.shopping h2 { font-size: 1.5rem; }
.shopping .ingredients__list { max-height: 60vh; overflow: auto; }
@media print { .site-head, .site-foot, .week__actions, .drawer { display: none !important; } .week-page { grid-template-columns: 1fr; } .shopping { position: static; } }

/* ---------- stats ---------- */
.stats { padding: 1.5rem 0 3.5rem; }
.stats__row { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.8rem 0; }
.stats__row strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--plum-d); font-variation-settings: "SOFT" 100, "opsz" 144; }
.stats__row span { font-weight: 700; color: var(--ink-2); }

/* ---------- ages ---------- */
.ages { padding: 0 0 3.5rem; }
.ages__inner { background: var(--ink); color: #fff; border-radius: var(--r-panel); padding: 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.ages__text h2 { color: #fff; }
.ages__text p { margin: .5rem 0 0; color: rgba(255,255,255,.7); max-width: 46ch; }
.ages__btns { display: flex; gap: .8rem; flex-wrap: wrap; }
.age--big { border-color: var(--orange); color: #fff; display: grid; text-align: center; padding: .8rem 1.4rem; line-height: 1.1; }
.age--big small { font-size: .75rem; color: rgba(255,255,255,.65); font-weight: 700; }
.age--big:hover { background: var(--orange); border-color: var(--orange); }

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- cooking tools + mode ---------- */
.cook-tools { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.tool { display: grid; text-align: left; border: 0; border-radius: 16px; padding: .9rem 1.3rem; font: inherit; font-weight: 800; font-size: 1.02rem; cursor: pointer; color: #fff; transition: transform .12s; }
.tool small { font-weight: 600; font-size: .8rem; opacity: .85; }
.tool:hover { transform: translateY(-2px); }
.tool--cook { background: var(--ink); }
.tool--listen { background: var(--green); }
.tool--listen.is-playing { background: var(--berry); }
.cook { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: grid; grid-template-rows: auto auto 1fr auto; }
.cook[hidden] { display: none; }
.cook__head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; }
.cook__title { font-family: var(--display); font-weight: 600; font-size: 1.2rem; flex: 1; }
.cook__pos { font-weight: 800; color: var(--ink-3); }
.cook__close { border: 0; background: var(--paper-2); width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; }
.cook__bar { height: 6px; background: var(--line); }
.cook__bar span { display: block; height: 100%; background: var(--orange); transition: width .3s; }
.cook__body { position: relative; overflow: auto; }
.cook__step { display: none; padding: 3rem clamp(1.5rem, 8vw, 8rem); max-width: 1000px; margin: auto; animation: rise .35s both; }
.cook__step.is-active { display: block; }
.cook__num { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-size: 2rem; margin-bottom: 1.2rem; }
.cook__step h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; margin-bottom: 1rem; }
.cook__step p { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.5; color: var(--ink-2); }
.cook__ings { list-style: none; padding: 0; margin: 0; columns: 2; gap: 2rem; font-size: 1.35rem; line-height: 1.6; }
.cook__ings li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.cook__foot { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--line); background: #fff; }

@media (max-width: 960px) {
  .hero-slider { height: 78vh; min-height: 560px; }
  .hs__content { padding-bottom: 5.5rem; margin-left: 1.25rem; margin-right: 1.25rem; }
  .hs__tagline { display: none; }
  .finder__grid { grid-template-columns: repeat(2, 1fr); }
  .week__strip { grid-template-columns: repeat(2, 1fr); }
  .week-page { grid-template-columns: 1fr; }
  .shopping { position: static; }
  .wday__items { grid-template-columns: repeat(2, 1fr); }
  .stats__row { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
  .ages__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hs__arrows { display: none; }
  .hs__meta { flex-wrap: wrap; gap: .6rem 1rem; }
  .finder__grid { grid-template-columns: 1fr; }
  .week__strip { grid-template-columns: 1fr; }
  .cook__ings { columns: 1; }
  .cook__foot { flex-wrap: wrap; }
  .cook__foot .btn { flex: 1; text-align: center; }
}
