/* ============================================================
   Cappadocia Coffee — TV Sahne Stilleri
   Dikey öncelikli (1080×1920); yatay 1920×1080 da desteklenir.
   ============================================================ */

:root {
  --color-cream:        #F5EDE0;
  --color-cream-light:  #FAF5EC;
  --color-cream-dark:   #EBDFC9;
  --color-brown-dark:   #3A2418;
  --color-brown:        #5C3A26;
  --color-brown-soft:   #8B6F47;
  --color-terracotta:   #B85C3C;
  --color-terracotta-l: #D4774F;
  --color-sage:         #B8C5B0;
  --color-sage-dark:    #8FA085;
  --color-gold:         #C9A24A;
  --shadow-soft:        rgba(58, 36, 24, 0.10);
  --shadow-warm:        rgba(58, 36, 24, 0.18);

  /* Adaptif ölçek birimi: dikey (max h) ve yatay (max w) için */
  --u: min(1vw, 0.5625vh);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.tv-body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--color-brown-dark);
  background: var(--color-cream);
  cursor: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.svg-defs { position: absolute; left: -9999px; top: -9999px; }

/* ============================================================
   STAGE — ana çerçeve (grid: header / scene / footer)
   ============================================================ */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

/* ============================================================
   ATMOSFER ARKA PLANI — paralaks katmanlar
   ============================================================ */
.bg {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg__warm {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 22% 12%, rgba(255, 240, 220, 0.85), transparent 60%),
    radial-gradient(ellipse 70% 80% at 80% 95%, rgba(184, 197, 176, 0.18), transparent 55%),
    radial-gradient(ellipse 90% 55% at 50% 50%, rgba(184, 92, 60, 0.06), transparent 70%),
    var(--color-cream);
  animation: warm-shift 60s ease-in-out infinite alternate;
}
@keyframes warm-shift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  100% { background-position: 5% 3%, 95% 97%, 52% 48%, 0 0; }
}

.bg__hoodoos {
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  height: 52%;
  color: var(--color-brown);
  opacity: 1;
  filter: drop-shadow(0 -4px 18px rgba(58, 36, 24, 0.10));
  animation: hoodoos-breathe 16s ease-in-out infinite;
}
.bg__hoodoos svg { width: 100%; height: 100%; display: block; }
@keyframes hoodoos-breathe {
  0%, 100% { opacity: 0.92; transform: translateY(0); }
  50%      { opacity: 1.00; transform: translateY(-3px); }
}

.bg__balloons {
  position: absolute; inset: 0;
  overflow: hidden;
}
.balloon {
  position: absolute;
  top: 0;
  width: var(--bw, clamp(70px, 8vmin, 130px));
  height: auto;
  color: var(--bc, var(--color-terracotta));
  opacity: 0;
  filter: drop-shadow(0 6px 14px rgba(184, 92, 60, 0.22)) blur(var(--bbl, 0));
  will-change: transform, opacity;
  animation: balloon-rise var(--bd, 75s) linear infinite;
  animation-delay: var(--bdl, 0s);
}
/*
   16 balon — Kapadokya kalabalık gökyüzü
   Süreler %25 hızlandırıldı (≈56-100s), delay'ler görünür aralıkta dağıldı,
   her açılışta ekranda 10+ balon görünür.
*/
.balloon--a { left:  3%; --bd: 60s;  --bdl:  -7s;  --bc: var(--color-terracotta);   --bw: clamp(82px,  9vmin,   142px); --bo: 0.85; }
.balloon--b { left: 10%; --bd: 78s;  --bdl: -17s;  --bc: var(--color-brown);        --bw: clamp(54px,  5.8vmin,  86px); --bo: 0.55; --bbl: 1.2px; }
.balloon--c { left: 18%; --bd: 68s;  --bdl: -24s;  --bc: var(--color-sage-dark);    --bw: clamp(72px,  7.8vmin, 118px); --bo: 0.72; }
.balloon--d { left: 25%; --bd: 84s;  --bdl: -40s;  --bc: var(--color-terracotta-l); --bw: clamp(94px, 10.5vmin, 168px); --bo: 0.82; }
.balloon--e { left: 33%; --bd: 62s;  --bdl: -34s;  --bc: var(--color-brown-soft);   --bw: clamp(52px,  5.4vmin,  80px); --bo: 0.50; --bbl: 1.4px; }
.balloon--f { left: 41%; --bd: 72s;  --bdl: -13s;  --bc: var(--color-terracotta);   --bw: clamp(80px,  8.8vmin, 134px); --bo: 0.78; }
.balloon--g { left: 48%; --bd: 88s;  --bdl: -63s;  --bc: var(--color-sage-dark);    --bw: clamp(64px,  6.8vmin, 100px); --bo: 0.62; --bbl: 0.8px; }
.balloon--h { left: 56%; --bd: 56s;  --bdl: -18s;  --bc: var(--color-terracotta-l); --bw: clamp(76px,  8.4vmin, 124px); --bo: 0.80; }
.balloon--i { left: 63%; --bd: 75s;  --bdl: -32s;  --bc: var(--color-brown);        --bw: clamp(58px,  6.2vmin,  92px); --bo: 0.58; --bbl: 1.0px; }
.balloon--j { left: 71%; --bd: 90s;  --bdl: -52s;  --bc: var(--color-terracotta);   --bw: clamp(88px,  9.6vmin, 150px); --bo: 0.78; }
.balloon--k { left: 78%; --bd: 65s;  --bdl: -51s;  --bc: var(--color-sage-dark);    --bw: clamp(50px,  5vmin,    78px); --bo: 0.48; --bbl: 1.3px; }
.balloon--l { left: 86%; --bd: 82s;  --bdl: -20s;  --bc: var(--color-terracotta-l); --bw: clamp(70px,  7.5vmin, 116px); --bo: 0.70; }
.balloon--m { left: 93%; --bd: 70s;  --bdl: -46s;  --bc: var(--color-brown);        --bw: clamp(62px,  6.5vmin,  98px); --bo: 0.65; }
.balloon--n { left: 14%; --bd: 100s; --bdl: -15s;  --bc: var(--color-brown-soft);   --bw: clamp(46px,  4.6vmin,  72px); --bo: 0.42; --bbl: 1.6px; }
.balloon--o { left: 38%; --bd: 76s;  --bdl: -60s;  --bc: var(--color-terracotta);   --bw: clamp(78px,  8.2vmin, 130px); --bo: 0.74; }
.balloon--p { left: 67%; --bd: 95s;  --bdl: -47s;  --bc: var(--color-sage-dark);    --bw: clamp(60px,  6.4vmin,  96px); --bo: 0.60; --bbl: 0.6px; }

@keyframes balloon-rise {
  0%   { transform: translate3d(0,        110vh, 0) rotate(-2deg) scale(0.96); opacity: 0; }
  6%   { opacity: var(--bo, 0.6); }
  18%  { transform: translate3d(2.5vw,    85vh,  0) rotate(1.8deg) scale(1); }
  35%  { transform: translate3d(-1.8vw,   62vh,  0) rotate(-1.5deg) scale(1.02); }
  52%  { transform: translate3d(2.8vw,    42vh,  0) rotate(1.2deg) scale(1); }
  70%  { transform: translate3d(-1.2vw,   22vh,  0) rotate(-1deg) scale(0.99); }
  86%  { transform: translate3d(1.5vw,    2vh,   0) rotate(0.6deg) scale(0.97); opacity: var(--bo, 0.6); }
  100% { transform: translate3d(0,        -25vh, 0) rotate(-0.5deg) scale(0.94); opacity: 0; }
}

/* Akşam ışıkları — peri bacaları üzerinde yüzen küçük altın parıltılar */
.bg__lights {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  pointer-events: none;
}
.firefly {
  position: absolute;
  width: clamp(4px, 0.6vmin, 9px);
  height: clamp(4px, 0.6vmin, 9px);
  background: radial-gradient(circle, var(--color-gold) 0%, rgba(201, 162, 74, 0.4) 50%, transparent 100%);
  border-radius: 50%;
  filter: blur(0.6px);
  animation: firefly 7s ease-in-out infinite;
  opacity: 0;
}
.firefly--1 { left: 12%; bottom: 18%; animation-delay: 0s;   animation-duration: 7s; }
.firefly--2 { left: 28%; bottom: 32%; animation-delay: -2s;  animation-duration: 9s; }
.firefly--3 { left: 44%; bottom: 14%; animation-delay: -4s;  animation-duration: 6s; }
.firefly--4 { left: 60%; bottom: 26%; animation-delay: -1s;  animation-duration: 8s; }
.firefly--5 { left: 76%; bottom: 36%; animation-delay: -3.5s; animation-duration: 7.5s; }
.firefly--6 { left: 88%; bottom: 12%; animation-delay: -5.5s; animation-duration: 9.5s; }
@keyframes firefly {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.85; }
  50%  { transform: translate(8px, -14px) scale(1); opacity: 1; }
  80%  { opacity: 0.7; }
  100% { transform: translate(-6px, -28px) scale(0.7); opacity: 0; }
}

.bg__grain {
  position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: multiply;
  animation: grain-shift 1.4s steps(8) infinite;
  pointer-events: none;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4%, -3%); }
  20%  { transform: translate(3%, -2%); }
  30%  { transform: translate(-2%, 4%); }
  40%  { transform: translate(2%, 3%); }
  50%  { transform: translate(-3%, 1%); }
  60%  { transform: translate(2%, -3%); }
  70%  { transform: translate(-2%, 2%); }
  80%  { transform: translate(3%, -1%); }
  90%  { transform: translate(-1%, 1%); }
  100% { transform: translate(0, 0); }
}

.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(58, 36, 24, 0.20) 100%);
  pointer-events: none;
}

/* ============================================================
   ÇERÇEVE — üst/alt kemer
   ============================================================ */
.frame {
  position: absolute;
  left: 0; right: 0;
  height: clamp(60px, 7vmin, 110px);
  color: var(--color-terracotta);
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
}
.frame--top    { top: 0; }
.frame--bottom { bottom: 0; }

/* ============================================================
   KÖŞE SÜSLEMELERİ
   ============================================================ */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.deco--leaves-tl,
.deco--leaves-br {
  width: clamp(150px, 18vmin, 280px);
  height: auto;
  color: var(--color-sage-dark);
  opacity: 0.75;
}
.deco--leaves-tl { top: 0; left: 0; transform-origin: top left; animation: sway 9s ease-in-out infinite alternate; }
.deco--leaves-br { bottom: 0; right: 0; transform: scale(-1); transform-origin: center; animation: sway-rev 11s ease-in-out infinite alternate; }
@keyframes sway     { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes sway-rev { from { transform: scale(-1) rotate(-2deg); } to { transform: scale(-1) rotate(2deg); } }

.deco--beans-tr,
.deco--beans-bl {
  width: clamp(60px, 6vmin, 110px);
  height: auto;
  color: var(--color-brown-soft);
  opacity: 0.6;
}
.deco--beans-tr { top: clamp(20px, 3vh, 60px); right: clamp(20px, 3vw, 60px); }
.deco--beans-bl { bottom: clamp(20px, 3vh, 60px); left: clamp(20px, 3vw, 60px); transform: scale(-1); }

/* ============================================================
   HEAD — logo + marka adı + saat
   ============================================================ */
.head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(28px, 4.5vh, 70px) clamp(40px, 6vw, 100px) clamp(14px, 2.2vh, 32px);
}

/* Sol — slogan (script font) */
.head__slogan {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  margin: 0;
  font-family: 'Allura', cursive;
  font-size: clamp(26px, 3.4vmin, 56px);
  line-height: 1.05;
  color: var(--color-terracotta);
  max-width: clamp(220px, 32vmin, 460px);
  letter-spacing: 0.005em;
  text-shadow: 0 1px 2px rgba(184, 92, 60, 0.10);
  animation: slogan-fade 1400ms 200ms cubic-bezier(.2, 0, 0, 1) both;
}
@keyframes slogan-fade {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Orta — logo */
.head__logo-wrap {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  position: relative;
}
.head__logo-wrap::before,
.head__logo-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(20px, 2.5vw, 50px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-terracotta) 50%, transparent);
  opacity: 0.45;
}
.head__logo-wrap::before { right: calc(100% + clamp(8px, 1vw, 18px)); }
.head__logo-wrap::after  { left:  calc(100% + clamp(8px, 1vw, 18px)); }

.logo {
  display: block;
  width: clamp(240px, 26vmin, 420px);
  height: auto;
  max-height: clamp(90px, 13vmin, 190px);
  filter: drop-shadow(0 6px 18px rgba(58, 36, 24, 0.12));
  animation: logo-breath 9s ease-in-out infinite;
  transform-origin: center;
}
@keyframes logo-breath {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.025) translateY(-2px); }
}

/* Sağ — saat */
.head__meta {
  grid-column: 3;
  justify-self: start;
  text-align: left;
  animation: slogan-fade 1400ms 300ms cubic-bezier(.2, 0, 0, 1) both;
  animation-name: meta-fade;
}
@keyframes meta-fade {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Saat + saatler */
.clock {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 4vmin, 60px);
  color: var(--color-brown-dark);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  perspective: 400px;
}
.clock__h, .clock__m {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  transform-origin: center;
  backface-visibility: hidden;
}
.clock__sep {
  display: inline-block;
  margin: 0 0.05em;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.clock__m.is-changing { animation: flip 700ms cubic-bezier(.4, 0, .2, 1); }
@keyframes flip {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg); opacity: 0; }
  51%  { transform: rotateX(90deg);  opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}
.head__hours {
  margin-top: clamp(4px, 0.8vh, 10px);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 1.2vmin, 16px);
  letter-spacing: 0.32em;
  color: var(--color-brown-soft);
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   SAHNE — kategori başlığı + ürün listesi
   ============================================================ */
.scene {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 3vh, 50px) clamp(40px, 6vw, 110px);
  overflow: hidden;
  display: grid;
  align-items: stretch;
}
.scene__loading {
  display: grid;
  place-items: center;
  gap: 20px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--color-brown-soft);
  font-size: clamp(18px, 2.2vmin, 28px);
}
.loader {
  width: 36px; height: 36px;
  border: 3px solid var(--color-cream-dark);
  border-top-color: var(--color-terracotta);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scene__page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 2.5vh, 36px);
  height: 100%;
  width: 100%;
  /* JS hesabıyla küçültülen otomatik sığdırma — içerik scene'i aşarsa scale 1'in altına iner */
  transform: scale(var(--fit, 1));
  transform-origin: center top;
  will-change: transform;
}

/* Sahne başlığı */
.scene__head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1vh, 14px);
}
.scene__label {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 1.4vmin, 16px);
  letter-spacing: 0.55em;
  color: var(--color-brown-soft);
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 0.55em;
}
.scene__cat-icon {
  width: clamp(36px, 4.5vmin, 64px);
  height: clamp(36px, 4.5vmin, 64px);
  color: var(--color-terracotta);
}
.scene__cat-icon svg { width: 100%; height: 100%; }
.scene__cat-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(52px, 8vmin, 124px);
  color: var(--color-brown-dark);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-shadow:
    0 2px 6px rgba(58, 36, 24, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
  display: inline-block;
  padding: 0 0.2em;
}
.scene__cat-title::before,
.scene__cat-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(20px, 3vmin, 44px);
  height: 1.5px;
  background: var(--color-terracotta);
  opacity: 0.5;
  animation: title-line 1200ms 600ms cubic-bezier(.2, 0, 0, 1) both;
}
.scene__cat-title::before { right: 100%; transform-origin: right center; }
.scene__cat-title::after  { left:  100%; transform-origin: left  center; }
@keyframes title-line {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.5; }
}
.scene__ornament {
  width: clamp(180px, 24vmin, 320px);
  height: clamp(14px, 2vmin, 24px);
  color: var(--color-terracotta);
  opacity: 0.75;
}

/* Ürün listesi */
.scene__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 22px);
  padding: 0 clamp(0px, 4vw, 80px);
  height: 100%;
  position: relative;
}
/* Liste etrafına yumuşak terracotta glow (sayfa odağı) */
.scene__list::before {
  content: '';
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(ellipse at center, rgba(245, 237, 224, 0.55) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Tek tek ürün satırı — özel etkinlik tabanı */
.item {
  position: relative;
  display: block;
  padding: clamp(10px, 1.6vh, 22px) clamp(16px, 2vw, 32px);
  border-radius: 8px;
  --i: 0;
  animation: item-in 750ms cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: calc(500ms + var(--i) * 95ms);
  transition: background 400ms ease;
}
@keyframes item-in {
  0%   { opacity: 0; transform: translateX(-24px); filter: blur(5px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateX(0);     filter: blur(0); }
}
/* Çift sıralı ürünler sağdan gelsin (hareketli his) */
.item:nth-child(even) {
  animation-name: item-in-r;
}
@keyframes item-in-r {
  0%   { opacity: 0; transform: translateX(24px); filter: blur(5px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateX(0);    filter: blur(0); }
}

/* Üst satır: ad + dot leader + fiyat */
.item__line {
  display: flex;
  align-items: baseline;
  gap: clamp(6px, 0.8vw, 14px);
  width: 100%;
}
.item__name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3.6vmin, 56px);
  color: var(--color-brown-dark);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.item__dots {
  flex: 1;
  border-bottom: 2.5px dotted var(--color-brown-soft);
  margin: 0 clamp(10px, 1.2vw, 20px) clamp(10px, 1.2vmin, 18px);
  opacity: 0.45;
  min-width: 40px;
}
.item__price {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 3.9vmin, 60px);
  color: var(--color-terracotta);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(184, 92, 60, 0.18);
}
.item__price-currency {
  font-size: 0.7em;
  margin-left: 0.05em;
  opacity: 0.85;
  font-weight: 500;
}
.item__desc {
  display: block;
  margin-top: clamp(4px, 0.7vh, 10px);
  margin-left: clamp(2px, 0.4vw, 8px);
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.9vmin, 26px);
  color: var(--color-brown-soft);
  letter-spacing: 0.015em;
  line-height: 1.35;
  max-width: 80%;
}

/* Öne çıkan ürün — sol kenarda altın akış çubuğu */
.item--special {
  background: linear-gradient(90deg, rgba(201, 162, 74, 0.06), transparent 60%);
}
.item--special::before {
  content: '';
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--color-gold) 30%,
    #f4d77a 50%,
    var(--color-gold) 70%,
    transparent 100%);
  background-size: 100% 200%;
  border-radius: 2px;
  animation: gold-flow 4.5s ease-in-out infinite;
}
@keyframes gold-flow {
  0%   { background-position: 0 -100%; opacity: 0.4; }
  50%  { opacity: 1; }
  100% { background-position: 0 100%;  opacity: 0.4; }
}
.item--special .item__name::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: clamp(6px, 0.8vw, 12px);
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.20);
  vertical-align: middle;
}

/* Tükendi ürün */
.item--unavailable { opacity: 0.42; }
.item--unavailable .item__name {
  text-decoration: line-through;
  text-decoration-color: var(--color-terracotta);
  text-decoration-thickness: 1.5px;
}

/* Değişen ürün parıltısı (polling sonrası) */
.item--changed {
  animation: item-shimmer 1.4s ease-out;
}
@keyframes item-shimmer {
  0%   { background: rgba(255, 215, 130, 0); }
  20%  { background: rgba(255, 215, 130, 0.45); }
  100% { background: rgba(255, 215, 130, 0); }
}

/* Fiyat değişimi: slot makinesi efekti */
.item__price--rolling {
  display: inline-block;
  animation: price-roll 0.85s cubic-bezier(.4, 0, .2, 1);
}
@keyframes price-roll {
  0%   { transform: translateY(-110%); opacity: 0; filter: blur(3px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0);     opacity: 1; }
}

/* SAHNE GİRİŞ / ÇIKIŞ */
.scene__page {
  animation: page-in 900ms cubic-bezier(.2, 0, 0, 1) both;
}
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.scene__cat-title {
  animation: title-in 1000ms 150ms cubic-bezier(.2, 0, 0, 1) both;
}
@keyframes title-in {
  from { opacity: 0; transform: translateY(40px); filter: blur(10px); letter-spacing: 0.08em; }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0);  letter-spacing: 0.005em; }
}
.scene__label,
.scene__cat-icon,
.scene__ornament {
  animation: fade-up 800ms 120ms cubic-bezier(.2, 0, 0, 1) both;
}
.scene__ornament { animation-delay: 700ms; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scene__page.is-leaving {
  animation: page-out 600ms cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes page-out {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(6px); }
}

/* ============================================================
   FOOT — slogan, indikatör, sosyal, bağlantı
   ============================================================ */
.foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(12px, 2vh, 28px) clamp(40px, 6vw, 110px) clamp(20px, 3.5vh, 48px);
}
.foot__slogan {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.4vmin, 17px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  padding-left: 0.5em;
  background: linear-gradient(
    100deg,
    var(--color-brown) 0%,
    var(--color-brown) 38%,
    var(--color-terracotta) 50%,
    var(--color-brown) 62%,
    var(--color-brown) 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: slogan-shimmer 14s linear infinite;
}
@keyframes slogan-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.foot__indicator {
  display: flex;
  gap: clamp(8px, 0.8vw, 14px);
  justify-content: center;
}
.dot {
  width: clamp(7px, 0.9vmin, 12px);
  height: clamp(7px, 0.9vmin, 12px);
  border-radius: 50%;
  background: var(--color-cream-dark);
  border: 1px solid var(--color-brown-soft);
  transition: all 600ms cubic-bezier(.2, 0, 0, 1);
}
.dot.is-active {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  width: clamp(22px, 2.8vmin, 40px);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(184, 92, 60, 0.20);
  animation: dot-glow 2.4s ease-in-out infinite;
}
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(184, 92, 60, 0.18), 0 0 12px rgba(184, 92, 60, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 92, 60, 0.28), 0 0 18px rgba(201, 162, 74, 0.32); }
}
.foot__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.4vw, 22px);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 1.3vmin, 16px);
  letter-spacing: 0.18em;
  color: var(--color-brown-soft);
  text-transform: uppercase;
}
.foot__connection {
  position: relative;
  width: 14px; height: 14px;
  display: inline-grid;
  place-items: center;
}
.foot__pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-sage-dark);
  position: relative;
  display: inline-block;
}
.foot__pulse::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-sage-dark);
  animation: ping 2.5s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.foot__connection.is-offline .foot__pulse           { background: var(--color-terracotta); }
.foot__connection.is-offline .foot__pulse::after    { border-color: var(--color-terracotta); animation-duration: 1.4s; }

/* ============================================================
   DUYURU OVERLAY — sinematik
   ============================================================ */
.ann {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--color-cream-light);
  display: grid; place-items: center;
  overflow: hidden;
  animation: ann-mask-in 1.2s cubic-bezier(.2, 0, 0, 1) both;
}
.ann[hidden] { display: none; }
.ann.is-leaving { animation: ann-mask-out 0.9s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes ann-mask-in {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(150% at 50% 50%); }
}
@keyframes ann-mask-out {
  from { clip-path: circle(150% at 50% 50%); opacity: 1; }
  to   { clip-path: circle(0% at 50% 50%); opacity: 1; }
}
.ann__bg { position: absolute; inset: 0; }
.ann__hoodoos {
  position: absolute; left: -2%; right: -2%; bottom: 0;
  height: 60%;
  color: var(--color-brown);
  opacity: 0.50;
}
.ann__hoodoos svg { width: 100%; height: 100%; }
.ann__balloon {
  position: absolute;
  width: clamp(80px, 10vmin, 160px);
  filter: drop-shadow(0 8px 20px rgba(184, 92, 60, 0.25));
}
.ann__balloon--a { left: 12%;  bottom: 10%; color: var(--color-terracotta); animation: ann-balloon 5s 0.4s cubic-bezier(.2, 0, 0, 1) both; }
.ann__balloon--b { left: 70%;  bottom: 30%; color: var(--color-brown);       animation: ann-balloon 5s 0.7s cubic-bezier(.2, 0, 0, 1) both; }
.ann__balloon--c { left: 40%;  bottom: 8%;  color: var(--color-sage-dark);   animation: ann-balloon 5s 0.55s cubic-bezier(.2, 0, 0, 1) both; transform: scale(0.7); }
@keyframes ann-balloon {
  0%   { transform: translateY(40vh) scale(1) rotate(-3deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-15vh) scale(1) rotate(2deg); opacity: 1; }
}
.ann__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(20px, 4vw, 60px);
  max-width: 86%;
}
.ann__label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(12px, 1.5vmin, 20px);
  letter-spacing: 0.55em;
  color: var(--color-terracotta);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: clamp(16px, 2.5vh, 32px);
  padding-left: 0.55em;
  animation: fade-up 800ms 700ms cubic-bezier(.2, 0, 0, 1) both;
}
.ann__title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 8vmin, 140px);
  color: var(--color-brown-dark);
  line-height: 1.05;
  margin-bottom: clamp(12px, 2vh, 24px);
  animation: title-in 1100ms 850ms cubic-bezier(.2, 0, 0, 1) both;
}
.ann__sub {
  font-family: 'Allura', cursive;
  font-size: clamp(28px, 4vmin, 64px);
  color: var(--color-terracotta);
  line-height: 1.1;
  animation: fade-up 900ms 1100ms cubic-bezier(.2, 0, 0, 1) both;
}

/* ============================================================
   HATA / BOŞ DURUMLAR
   ============================================================ */
.empty {
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--color-brown-soft);
  font-size: clamp(18px, 2.4vmin, 30px);
  height: 100%;
}

/* ============================================================
   YATAY ORYANTASYON — 1920×1080 düzeltmeleri
   ============================================================ */
@media (orientation: landscape) {
  .head { padding-top: clamp(20px, 3vh, 50px); padding-bottom: clamp(8px, 1.5vh, 20px); }
  .scene__cat-title { font-size: clamp(40px, 6vmin, 90px); }
  .item__name, .item__price { font-size: clamp(22px, 2.8vmin, 42px); }
  .scene__list { padding: 0 clamp(40px, 8vw, 200px); }
  .deco--leaves-tl, .deco--leaves-br { width: clamp(140px, 14vmin, 240px); }
}

/* ============================================================
   DİKEY ORYANTASYON — 1080×1920
   ============================================================ */
@media (orientation: portrait) {
  .stage {
    grid-template-rows: auto 1fr auto;
  }
  .head {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
    row-gap: clamp(10px, 1.6vh, 22px);
  }
  .head__logo-wrap { grid-column: 1; grid-row: 1; justify-self: center; }
  .head__slogan    { grid-column: 1; grid-row: 2; justify-self: center; text-align: center; max-width: 92%; }
  .head__meta      { grid-column: 1; grid-row: 3; justify-self: center; text-align: center; }
  .head__logo-wrap::before,
  .head__logo-wrap::after { display: none; }
  .head__slogan { animation-name: fade-up; }
  .head__meta   { animation-name: fade-up; }
  .scene__list { padding: 0 clamp(20px, 4vw, 80px); }
  /* Dikey ekranda peri bacaları biraz daha geniş */
  .bg__hoodoos { height: 42%; }
}

/* ============================================================
   AZALTILMIŞ HAREKET TERCİHİ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   4K VE ÜZERİ
   ============================================================ */
@media (min-width: 2560px) {
  .head, .scene, .foot { padding-left: clamp(80px, 8vw, 200px); padding-right: clamp(80px, 8vw, 200px); }
}

/* ============================================================
   TABLET — 768px ve altı
   ============================================================ */
@media (max-width: 768px) {
  .head {
    padding: 14px 18px 8px;
    gap: 12px;
  }
  .head__logo-wrap::before,
  .head__logo-wrap::after { display: none; }
  .logo {
    width: 170px;
    max-height: 64px;
  }
  .head__slogan {
    font-size: 14px;
    max-width: 130px;
    line-height: 1.1;
  }
  .clock { font-size: 26px; }
  .head__hours {
    font-size: 10px;
    letter-spacing: 0.22em;
    margin-top: 2px;
  }

  .scene { padding: 14px 18px; }
  .scene__head { gap: 6px; }
  .scene__label { font-size: 10px; letter-spacing: 0.4em; }
  .scene__cat-icon { width: 30px; height: 30px; }
  .scene__cat-title { font-size: 36px; line-height: 1.05; }
  .scene__cat-title::before,
  .scene__cat-title::after { width: 18px; }
  .scene__ornament { width: 150px; height: 14px; }

  .scene__list {
    padding: 0 4px;
    gap: 8px;
  }
  .scene__list::before { display: none; }
  .item { padding: 6px 12px; }
  .item__name { font-size: 17px; }
  .item__price { font-size: 19px; }
  .item__desc {
    font-size: 12px;
    margin-top: 2px;
    max-width: 100%;
  }
  .item__dots { margin: 0 8px 6px; }
  .item--special::before { width: 2px; }

  .foot {
    padding: 8px 16px 14px;
    gap: 12px;
  }
  .foot__slogan {
    font-size: 10px;
    letter-spacing: 0.32em;
  }
  .foot__right { font-size: 10px; gap: 10px; }
  .dot { width: 6px; height: 6px; }
  .dot.is-active { width: 18px; }

  /* Köşe süsleri küçült */
  .deco--leaves-tl,
  .deco--leaves-br { width: 110px; opacity: 0.5; }
  .deco--beans-tr,
  .deco--beans-bl { width: 50px; opacity: 0.45; }
  .frame { height: 50px; }

  /* Balonlar küçült */
  .balloon { width: clamp(40px, 8vmin, 70px) !important; }
}

/* ============================================================
   MOBİL — 480px ve altı (telefon)
   ============================================================ */
@media (max-width: 480px) {
  .stage {
    grid-template-rows: auto 1fr auto;
  }
  .head {
    grid-template-columns: 1fr auto;
    padding: 10px 12px 6px;
    gap: 8px;
    row-gap: 4px;
  }
  .head__logo-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
  .head__slogan {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    font-size: 12px;
    max-width: 60vw;
  }
  .head__meta {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
  }
  .logo {
    width: 140px;
    max-height: 52px;
  }
  .clock { font-size: 22px; }
  .head__hours {
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  .scene { padding: 10px 12px; }
  .scene__cat-title { font-size: 28px; }
  .scene__cat-title::before,
  .scene__cat-title::after { display: none; }
  .scene__ornament { width: 110px; height: 12px; }
  .scene__cat-icon { width: 24px; height: 24px; }

  .scene__list { gap: 5px; padding: 0; }
  .item { padding: 4px 10px; }
  .item__name { font-size: 15px; }
  .item__price { font-size: 17px; }
  .item__desc { font-size: 11px; }

  .foot { padding: 6px 12px 10px; gap: 8px; }
  .foot__slogan { font-size: 9px; letter-spacing: 0.25em; }

  .deco--leaves-tl,
  .deco--leaves-br { width: 80px; opacity: 0.4; }
  .deco--beans-tr,
  .deco--beans-bl { width: 40px; opacity: 0.4; }
  .frame { height: 40px; }
}