/* ==========================================================================
   Vkus Eat — "Mutfakta bir gün" sahne katmani
   style.css'in USTUNE yuklenir; oradaki token'lar (uygulamadan gelen renkler,
   bosluklar, golgeler) aynen kullanilir, hicbiri burada yeniden tanimlanmaz.
   Yasal sayfalar bu dosyayi yuklemez — onlarin gorunumu degismedi.

   Bolumler:
     1. Gunisigi motoru (--day, --sky, gok murekkebi)
     2. Sahne iskeleti (sticky sahne + ilerleme degiskeni --p)
     3. Ortak parcalar (panel, tahta, etiket)
     4. Sahneler 1-8
     5. Etkilesimli kiler demosu
     6. Geri cekilme yollari: .no-js, prefers-reduced-motion, mobil
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gunisigi motoru
   --------------------------------------------------------------------------
   --day  : 0 (safak) -> 1 (gece). scenes.js her karede tek bir yazma yapar.
   --sky  : o ana karsilik gelen zemin rengi, yine JS tarafindan hesaplanir.
   --sky-ink / --sky-ink-sub : DOGRUDAN gok uzerinde duran metnin rengi.

   KONTRAST KURALI (olculdu, uydurulmadi):
     * Govde metni HICBIR ZAMAN gok uzerinde durmaz; her zaman opak bir
       .panel icindedir -> --fg / --surface = acik temada 14.9:1, koyuda 11.7:1.
     * Gok uzerinde yalnizca buyuk basliklar (>=28px) bulunur. Yayin boyunca
       en kotu nokta day=0.79'da 4.33:1 — buyuk metin icin gereken 3:1'in
       cok uzerinde, govde metni icin gereken 4.5:1'e de yalnizca yolun
       %0.4'unde 0.17 kadar yaklasir.
   -------------------------------------------------------------------------- */

@property --day {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --day: 0;
  --sky: var(--bg);
  --sky-ink: #17110B;
  --sky-ink-sub: #4A3B2A;
}

/* Gunisigi esigi asildiginda scenes.js data-theme'i cevirir; o an gok
   murekkebi de acik tarafa gecer. Gecis kisa ama ani degil. */
:root[data-theme='dark'] {
  --sky-ink: #FFFFFF;
  --sky-ink-sub: rgba(255, 255, 255, 0.78);
}

/* Gunisigi motoru CALISMADIGINDA (JS kapali, hareket azaltma, ya da kullanici
   temayi elle sectiginde) data-theme hic yazilmamis olabilir. Sistemi koyu
   olan bir kullanicida zemin style.css yuzunden koyulasir; murekkep de onunla
   birlikte donmezse baslikllar okunmaz olur. style.css'teki ayni desen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sky-ink: #FFFFFF;
    --sky-ink-sub: rgba(255, 255, 255, 0.78);
  }
}

/* Gunisigi motoru calisiyorken zemini sabit bir katman boyar. Boylece
   scroll sirasinda body'nin background'i yeniden boyanmaz. */
.daylight {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sky);
  pointer-events: none;
}

/* Sabah gunesi: sahne 1-2 boyunca sag ustte durur, gun ilerledikce soner. */
.daylight::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 78% 12%, rgba(255, 226, 160, 0.55), transparent 70%),
    radial-gradient(50% 40% at 12% 88%, rgba(143, 206, 120, 0.16), transparent 70%);
  opacity: calc(1 - var(--day));
  will-change: opacity;
}

/* Aksam: sahne 7-8'de sicak bir lamba isigi devralir. */
.daylight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 45% at 50% 6%, rgba(217, 164, 65, 0.30), transparent 72%);
  opacity: var(--day);
  will-change: opacity;
}

/* Motor calisirken body kendi zeminini bosaltir (cift boyama olmasin). */
html.daylight-on body { background: transparent; }

/* --------------------------------------------------------------------------
   2. Sahne iskeleti
   --------------------------------------------------------------------------
   .scene        : yalnizca scroll uzunlugu verir. --scene-len = kac ekran boyu.
   .scene__stage : ekrana yapisan (sticky) kisim, her zaman tam 1 ekran.
   --p           : bu sahnenin kendi ilerlemesi, 0 -> 1. scenes.js yazar.

   Alt ogeler --p'yi kendi --i sirasiyla birlikte kullanir; boylece her kare
   icin JS tek bir ozellik yazar, gerisini CSS hesaplar.
   -------------------------------------------------------------------------- */

.scene {
  position: relative;
  height: calc(var(--scene-len, 3) * 100vh);
}

.scene__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.scene__inner {
  width: min(100% - 2 * var(--sp-2xl), 1080px);
  margin-inline: auto;
}

/* Bir ogenin kendi 0->1 zamani:
   --from ile baslar, --span kadar surer, sinirlar disinda kirpilir. */
.step {
  --from: 0;
  --span: 0.25;
  --t: clamp(0, calc((var(--p) - var(--from)) / var(--span)), 1);
}

/* En sik kullanilan giris: asagidan yukari suzul + belir.
   YALNIZCA transform + opacity — layout'a dokunmaz. */
.rise {
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 28px), 0);
}

.fade { opacity: var(--t); }

/* --------------------------------------------------------------------------
   3. Ortak parcalar
   -------------------------------------------------------------------------- */

/* Govde metninin durdugu opak yuzey. Kontrast garantisi buradan gelir. */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-soft);
  padding: var(--sp-2xl);
}

/* Sahne basligi — dogrudan gok uzerinde duran TEK metin turu. */
.scene__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sky-ink);
  margin: 0 0 var(--sp-md);
  transition: color 320ms ease;
}

/* Sahne etiketi 12px'lik KUCUK metindir; WCAG 4.5:1 ister. Gunisigi yayinin
   alacakaranlik bandinda gok uzerinde bunu tutturmak mumkun degil (2.49:1),
   bu yuzden etiket kendi opak hapinin uzerine alindi: 8.03:1 / 6.75:1. */
.scene__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px var(--sp-md);
  margin: 0 0 var(--sp-md);
}

/* Sahne icindeki aciklama — panel uzerinde oldugu icin --sub kullanabilir. */
.scene__lead {
  font-size: 16px;
  line-height: 1.62;
  color: var(--sub);
  margin: 0;
  max-width: 56ch;
}

/* Mutfak tahtasi: sahne 1-3'un ortak zemini. */
.board {
  position: relative;
  border-radius: 28px;
  background:
    linear-gradient(180deg, var(--top-highlight), transparent 40%),
    linear-gradient(160deg, #C9A87C 0%, #B08E62 55%, #9A784F 100%);
  box-shadow: var(--sh-card);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

[data-theme='dark'] .board {
  background:
    linear-gradient(180deg, var(--top-highlight), transparent 40%),
    linear-gradient(160deg, #6B5540 0%, #55402E 55%, #40301F 100%);
}

/* --------------------------------------------------------------------------
   4. Sahneler
   -------------------------------------------------------------------------- */

/* Ortak iki sutunlu sahne yerlesimi: solda okunacak metin (panel icinde),
   sagda olan biteni gosteren sahne. Dar ekranda alt alta gecer. */
.scene__split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-2xl), 4vw, var(--sp-4xl));
  align-items: center;
}

.scene__copy { min-width: 0; }
.scene__view { min-width: 0; position: relative; }

/* ---- Sahne 1: Sabah ------------------------------------------------------ */

.sc-morning .scene__stage { place-items: center; }

.sc-morning h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sky-ink);
  margin: 0 0 var(--sp-lg);
  transition: color 320ms ease;
}

/* Bos tahtanin ortasindaki soru. Gunun baslangic noktasi. */
.board__question {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-2xl);
}

.board__question span {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 600;
  color: #FDF7E7;
  text-shadow: 0 2px 12px rgba(28, 21, 16, 0.55);
}

/* Tahtanin uzerindeki bicak ve kase — saf CSS, gorsel dosya yok. */
.board__props { position: absolute; inset: 0; }

.board__bowl,
.board__knife {
  position: absolute;
  border-radius: 999px;
}

.board__bowl {
  width: 26%;
  aspect-ratio: 1;
  left: 8%;
  bottom: 12%;
  background: radial-gradient(circle at 38% 30%, #FDF7E7, #E4D6BC 62%, #C3B296);
  box-shadow: var(--sh-small);
}

.board__knife {
  width: 34%;
  height: 8px;
  right: 9%;
  top: 26%;
  background: linear-gradient(90deg, #6B645C 0 22%, #D5D0C6 22% 100%);
  transform: rotate(-14deg);
}

/* ---- Sahne 2: Malzemeler ------------------------------------------------- */

/* Malzeme karolari tahtaya birer birer duser. Konum statiktir (left/top),
   yalnizca transform + opacity animasyona girer. */
.ing-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  gap: 2px;
  width: clamp(64px, 9vw, 88px);
  padding: var(--sp-sm) var(--sp-xs);
  border-radius: var(--r-ing);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-small);
  text-align: center;
  /* --t: 0 iken tahtanin uzerinde, yukarida ve donuk */
  opacity: var(--t);
  transform:
    translate3d(-50%, calc(-50% + (1 - var(--t)) * -70px), 0)
    scale(calc(0.72 + var(--t) * 0.28))
    rotate(calc((1 - var(--t)) * var(--spin, -12deg)));
  will-change: transform, opacity;
}

.ing-tile__emoji {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.1;
}

.ing-tile__name {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* ---- Sahne 3: Yemek kartinin kurulmasi ----------------------------------- */

/* Uygulamadaki gradyan yemek karti. Renk cifti AppPalettes'ten gelir. */
.dish-card {
  position: relative;
  border-radius: var(--r-card);
  padding: var(--sp-2xl);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-xs);
  color: var(--on-media);
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: var(--sh-card);
  overflow: hidden;
}

/* Flutter'da inset golge yok; uygulamada ust kenar isigi gradyanla taklit
   edilir — sitede de ayni yontem. */
.dish-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--top-highlight), transparent 42%);
  pointer-events: none;
}

/* Gradyanin acik ucunde (or. #E8D9A0) beyaz metin 1.41:1'e dusuyordu.
   Alt perde metnin durdugu bolgeyi koyulastirir -> 12:1 uzeri. */
.dish-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: linear-gradient(to top, rgba(28, 21, 16, 0.80), rgba(28, 21, 16, 0) 100%);
  pointer-events: none;
}

/* Metin perdenin ustunde kalmali. */
.dish-card > * { position: relative; z-index: 1; }

.dish-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 16px 12px 18px 10px;   /* uygulamadaki asimetrik chip */
  /* Uygulamadaki --card-tag-bg 0.35 opaklikta; gradyanin acik ucunde beyaz
     metin icin yetmiyor, sitede 0.55'e cikarildi (2.4:1 -> 6.2:1). */
  background: rgba(28, 21, 16, 0.55);
  margin-bottom: auto;
}

.dish-card__title {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.14;
  margin: 0;
}

.dish-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
}

/* Kartin kurulusu: malzemeler ortada birlesir, kart uzerlerinde buyur. */
.sc-dish .dish-card {
  opacity: var(--t);
  transform: scale(calc(0.88 + var(--t) * 0.12));
  transform-origin: center;
}

/* Bir ogenin belirip sonra kaybolmasi (pisirme adimlari icin).
   --from'da girer, --until'da cikar; ikisi de 0-1 arasi sahne ilerlemesi. */
.band {
  --span: 0.08;
  --t: clamp(0, calc((var(--p) - var(--from)) / var(--span)), 1);
  --u: clamp(0, calc((var(--p) - var(--until)) / var(--span)), 1);
  --v: calc(var(--t) - var(--u));
}

/* ---- Sahne 4: Haftalik menu ---------------------------------------------- */

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-sm);
}

.week__day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  min-width: 0;
}

.week__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  text-align: center;
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--border);
}

/* Gune dusen yemek. Renk cifti yine AppPalettes'ten. */
.week__slot {
  border-radius: 14px;
  padding: var(--sp-sm) 6px;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  color: var(--on-media);
  box-shadow: var(--sh-small);
  text-align: center;
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * -18px), 0) scale(calc(0.9 + var(--t) * 0.1));
  will-change: transform, opacity;
}

.week__slot span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.week__slot small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.85;
}

/* Bos yuva — uygulamada oldugu gibi kesikli cerceve. */
.week__empty {
  border-radius: 14px;
  min-height: 58px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
}

/* ---- Sahne 5: Alisveris listesi ------------------------------------------ */

.buy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-sm);
}

.buy__row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-input);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.buy__box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid var(--accent-text);
  display: grid;
  place-items: center;
}

/* Kutu icinin dolmasi ve tikin cizilmesi: yalnizca transform + opacity. */
.buy__box::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  background: var(--accent-text);
  opacity: var(--t);
  transform: scale(var(--t));
}

.buy__tick {
  position: relative;
  width: 13px;
  height: 13px;
  color: var(--on-accent);
  opacity: var(--t);
  transform: scale(calc(0.4 + var(--t) * 0.6));
}

.buy__name {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
}

/* Ustunu cizme: genislik degil, scaleX animasyonu. */
.buy__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1.5px;
  background: var(--sub);
  transform: scaleX(var(--t));
  transform-origin: left center;
}

.buy__row { transition: opacity 240ms ease; }
.buy__row .buy__name { opacity: calc(1 - var(--t) * 0.42); }

.buy__qty {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sub);
}

/* ---- Sahne 6: Pisirme modu ----------------------------------------------- */

.cook {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2xl);
  align-items: center;
}

.cook__ring { flex: none; display: block; width: clamp(96px, 13vw, 132px); height: auto; }

.cook__ring-track { stroke: var(--surface-2); }
.cook__ring-bar {
  stroke: var(--accent-text);
  stroke-linecap: round;
  /* --circ: 2*pi*r. Dolum stroke-dashoffset ile — layout tetiklemez. */
  stroke-dasharray: var(--circ);
  stroke-dashoffset: calc(var(--circ) * (1 - var(--p)));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.cook__ring-text {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  fill: var(--fg);
}

/* Adimlar ust uste yigilir; ayni anda yalnizca biri gorunur. */
.cook__steps {
  position: relative;
  min-height: 132px;
}

.cook__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-sm);
  opacity: var(--v);
  transform: translate3d(0, calc((1 - var(--v)) * 14px), 0);
  will-change: transform, opacity;
}

.cook__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}

.cook__text {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}

.cook__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
  padding: 6px var(--sp-md);
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* ---- Sahne 7: Sofra ve ev halki ------------------------------------------ */

.table-scene { display: grid; gap: var(--sp-2xl); justify-items: center; }

.plate {
  position: relative;
  width: clamp(150px, 22vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #FDF7E7, #EFE6D2 58%, #CFC4AC);
  box-shadow: var(--sh-card);
  display: grid;
  place-items: center;
  font-size: clamp(48px, 8vw, 78px);
  opacity: var(--t);
  transform: scale(calc(0.82 + var(--t) * 0.18));
}

/* Ev halki avatarlari — renkler AppPalettes.householdAvatars sirasindan. */
.family {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
}

/* Durum yazisi 10px — o da kendi opak kartinda durur (5.45:1 / 6.74:1). */
.member {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 92px;
  padding: var(--sp-sm) 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-ing);
  box-shadow: var(--sh-small);
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 22px), 0) scale(calc(0.8 + var(--t) * 0.2));
  will-change: transform, opacity;
}

.member__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--avatar);
  color: #FAF6EF;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  box-shadow: var(--sh-small);
}

.member__status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  color: var(--sub);
}

/* --------------------------------------------------------------------------
   5. Etkilesimli kiler demosu
   --------------------------------------------------------------------------
   Sahne 2'den sonra gelir. Sticky DEGIL — normal akista bir bolum, cunku
   kullanicinin kendi hizinda oynamasi gerekir.
   Veri gercektir: assets/data.js, uygulamanin seed_data.dart'indan uretildi.
   NOT: burada "yapay zeka" ifadesi bilerek kullanilmaz — uygulamadaki
   AI Sef henuz gercek bir dil modeli degil, site de oyle bir soz vermez.
   -------------------------------------------------------------------------- */

.pantry { padding-block: clamp(var(--sp-4xl), 9vh, var(--sp-5xl)); }

.pantry__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-sm);
  margin-block: var(--sp-xl) var(--sp-lg);
  padding: 0;
  list-style: none;
}

.pantry__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-ing);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.pantry__btn:hover:not(:disabled) { transform: translateY(-2px); }

.pantry__btn[aria-pressed='true'] {
  background: var(--nav-active-bg);
  border-color: var(--accent-text);
  color: var(--nav-active-fg);
}

/* Ucten fazlasi secilemez; kalanlar devre disi ama okunur kalir. */
.pantry__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pantry__btn span[aria-hidden] { font-size: 18px; line-height: 1; }

.pantry__count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sub);
}

.pantry__result { margin-top: var(--sp-xl); }

/* Bos durum: hicbir sey secilmediginde ya da eslesme cikmadiginda. */
.pantry__empty {
  display: grid;
  gap: var(--sp-sm);
  justify-items: center;
  text-align: center;
  padding: var(--sp-3xl) var(--sp-xl);
  border: 1px dashed var(--border);
  border-radius: var(--r-card);
  color: var(--sub);
}

.pantry__empty-emoji { font-size: 34px; }

.pantry__match {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-lg);
}

@media (min-width: 720px) {
  .pantry__match { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Eslesen malzemeler vurgulanir, eksikler soluk kalir. */
.pantry__ings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.pantry__ing {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 13.5px;
  padding: 5px var(--sp-sm);
  border-radius: 10px;
  color: var(--sub);
}

.pantry__ing.is-hit {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  font-weight: 600;
}

.pantry__reset {
  margin-top: var(--sp-lg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  background: none;
  border: 0;
  padding: var(--sp-sm) 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Geri cekilme yollari — bunlar sus degil, sartname
   -------------------------------------------------------------------------- */

/* ---- (a) JS kapaliyken -----------------------------------------------------
   Icerik zaten HTML'de. Tek yapmamiz gereken sahneleri normal, dikey bir
   yerlesime dondurmek: yapiskanlik yok, uzun bosluk yok, --t her yerde 1.
   Hicbir sahne opacity:0 ile BASLAMAZ — yani JS hic gelmese de gorunur. */
html.no-js .scene,
html.no-js .scene__stage {
  height: auto;
  position: static;
  overflow: visible;
}

html.no-js .scene { padding-block: var(--sp-4xl); }
html.no-js .scene__stage { display: block; }

html.no-js .daylight { display: none; }

/* Tum zamanlama degiskenleri "tamamlanmis" degerine sabitlenir. */
html.no-js .step,
html.no-js .band,
html.no-js .ing-tile,
html.no-js .week__slot,
html.no-js .buy__box,
html.no-js .buy__tick,
html.no-js .plate,
html.no-js .member {
  --t: 1;
  --v: 1;
  --p: 1;
}

/* Ustu cizili alisveris satirlari JS yokken cizilmemis gorunsun —
   aksi halde "hepsi alinmis" gibi yanlis bir izlenim olusur. */
html.no-js .buy__name::after,
html.no-js .buy__box::before,
html.no-js .buy__tick { opacity: 0; transform: none; }
html.no-js .buy__row .buy__name { opacity: 1; }

/* Serbest konumlu malzeme karolari JS yokken normal bir izgaraya doner. */
html.no-js .board { aspect-ratio: auto; padding: var(--sp-2xl); }
html.no-js .board__props,
html.no-js .board__question { position: static; }
html.no-js .ing-board {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
}
html.no-js .ing-tile { position: static; transform: none; }

/* Pisirme adimlari ust uste degil, alt alta okunur. */
html.no-js .cook__steps { min-height: 0; display: grid; gap: var(--sp-lg); }
html.no-js .cook__step { position: static; }

/* Etkilesimli kiler demosu JS'siz calisamaz — gizlemek yerine durumu soyler. */
html.no-js .pantry__interactive { display: none; }
.pantry__nojs { display: none; }
html.no-js .pantry__nojs { display: block; }

/* ---- (b) Hareket azaltma tercihi -------------------------------------------
   Kullanici "reduce" dediyse: sahneler animasyonsuz, duz dikey yerlesimde ve
   TAM OKUNUR olur. Gunisigi yayi da durur — o da scroll'a bagli bir hareket
   sayilir; tema kullanicinin/isletim sisteminin secimine birakilir.
   Kural .no-js ile ayni oldugu icin ayni bloklar tekrarlanir. */
@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene__stage {
    height: auto;
    position: static;
    overflow: visible;
  }

  .scene { padding-block: var(--sp-4xl); }
  .scene__stage { display: block; }
  .daylight { display: none; }

  .step, .band, .ing-tile, .week__slot, .buy__box, .buy__tick, .plate, .member {
    --t: 1;
    --v: 1;
    --p: 1;
  }

  .board { aspect-ratio: auto; padding: var(--sp-2xl); }
  .board__props { display: none; }
  .board__question { position: static; }
  .ing-board {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    justify-content: center;
  }
  .ing-tile { position: static; transform: none; }

  .cook__steps { min-height: 0; display: grid; gap: var(--sp-lg); }
  .cook__step { position: static; }
  .cook__ring-bar { stroke-dashoffset: 0; }

  /* Kalan her sey icin: gecis ve animasyon yok. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- (c) Klavye odagi ------------------------------------------------------
   style.css'te genel bir :focus-visible kurali var; sahne icindeki
   etkilesimli ogeler de ayni cerceveyi almalidir. */
.pantry__btn:focus-visible,
.pantry__reset:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--r-ing);
}

/* ---- (d) Mobil -------------------------------------------------------------
   Yapiskan sahneler telefonda da calisir ama sadelesir: tek sutun, daha kisa
   scroll, agir blur/filter yok (60 fps icin). Yatay kaydirma olusmaz. */
@media (max-width: 860px) {
  .scene { height: calc(var(--scene-len-sm, var(--scene-len, 3)) * 100vh); }
  .scene__split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .scene__inner { width: calc(100% - 2 * var(--sp-lg)); }
  .panel { padding: var(--sp-lg); }
  .scene__lead { font-size: 15px; }

  /* Yedi gunluk hafta telefonda dort sutuna doner — yatay tasma olmasin. */
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week__day:nth-child(n + 5) { display: none; }

  .cook { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
  .cook__ring { justify-self: center; }

  .board { aspect-ratio: 4 / 3; }
  .ing-tile { width: clamp(56px, 17vw, 72px); }
}

@media (max-width: 520px) {
  .pantry__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .member { width: 80px; }
}

/* Hicbir kosulda yatay kaydirma cubugu cikmaz. */
html, body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   7. Sonradan eklenen kucuk duzeltmeler
   -------------------------------------------------------------------------- */

/* JS HENUZ CALISMADAN once her sahne "tamamlanmis" sayilir. Boylece ilk boyamada
   hicbir sey gorunmez halde beklemez; scenes.js devraldiginda --p'yi kendisi
   yazar. Bu, sartnamedeki "sahneler opacity:0 ile baslayip JS beklemesin"
   kuralinin CSS tarafindaki karsiligidir. */
.scene { --p: 1; }

/* Ust cubuk sticky (z-index 50) ve sahne sahnesi de top:0'da yapisiyor —
   sahne icerigi cubugun altinda kalmasin. */
.scene__stage { padding-top: 76px; }

@media (max-width: 860px) {
  .scene__stage { padding-top: 64px; }
}

/* Malzeme karolarinin serbest konumlanmasi icin olcu kutusu. */
.ing-board { position: absolute; inset: 0; }

/* Kiler sonucundaki miktar sutunu. */
.pantry__qty {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}

/* Sahne 1 acilista TAM GORUNUR olmalidir — kullanicinin kaydirmasini
   beklemez. --from negatif verildigi icin p=0 aninda --t zaten 1'dir. */
.sc-morning .step { --from: -0.35; --span: 0.35; }