/* ═══════════════════════════════════════════════════════════
   AKARÇAY PATISSERIE — Tasarım 3
   Slayt destesi · scroll ile sahne değişimi · uçuşan malzemeler
   ═══════════════════════════════════════════════════════════ */
:root {
  --terra: #923E25;
  --terra-acik: #B8552F;
  --terra-koyu: #6E2C19;
  --clay-800: #5C2716;
  --kahve: #24120A;
  --sand: #E3D9C6;
  --krem: #F3EEE4;
  --krem-acik: #FAF7F1;
  --ink: #2A1710;
  --ink-yumusak: #6B5548;

  --font-d: "Fraunces", Georgia, serif;
  --font-b: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dus: cubic-bezier(0.22, 1.06, 0.32, 1);
  --gecis: 780ms;
  --kenar: clamp(1rem, 4vw, 4rem);

  /* intro.css (tasarım 1 açılış perdesi) için gerekli tokenlar */
  --paper: #FAF7F1;
  --edge: clamp(1rem, 4vw, 4rem);
  --logo-w: clamp(148px, 10vw + 88px, 268px);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-chrome: 60;
  --z-intro: 200;
  --z-curtain: 190;
  --terracotta: #923E25;
  --sand-200: #E3D9C6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-b);
  background: var(--terra);
  color: var(--krem);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
::selection { background: var(--krem); color: var(--terra); }

/* ═══════════ SABİT ARAYÜZ ═══════════ */
/* ── Marka logosu (tasarım 1 FLIP intro ile uyumlu) ── */
.marka {
  position: fixed;
  top: clamp(.85rem, 1.6vw, 1.6rem);
  left: var(--kenar);
  /* perdenin (200) ÜSTÜNDE olmalı — açılış animasyonu görünsün */
  z-index: 201;
  display: block;
  width: clamp(120px, 13vw, 190px);
  border-radius: 6px;
  /* opacity/giriş animasyonu YOK: intro.js logoyu FLIP ile sahneye taşır */
}
.marka-logo { width: 100%; height: auto; overflow: visible; }
.marka-logo .lg-plate { display: none; }
.marka-logo .lg-square { filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.marka:hover { transform: translateY(-2px) scale(1.02); }
/* Koyu sahnede yazılar krem, açık sahnede terracotta */
.marka-logo .lg-letter, .marka-logo .lg-subletter { transition: fill .6s var(--ease); }
/* Koyu sahnede yazı krem olur — ama YALNIZCA açılış bittikten sonra (.hazir).
   Açılış perdesi krem zeminli; o sırada yazı terracotta kalmalı, yoksa kaybolur. */
body.hazir[data-ton="koyu"] .marka-logo .lg-letter,
body.hazir[data-ton="koyu"] .marka-logo .lg-subletter { fill: #F3EEE4; stroke: #F3EEE4; }

.noktalar {
  position: fixed; right: clamp(.9rem, 2.4vw, 2rem); top: 50%; z-index: 60;
  transform: translateY(-50%);
  display: grid; gap: clamp(.75rem, 1.6vh, 1.15rem);
  opacity: 0; transition: opacity .8s var(--ease) .4s;
}
.hazir .noktalar { opacity: 1; }
.noktalar button {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; opacity: .34; color: var(--krem);
  transition: opacity .4s, transform .4s var(--ease);
}
body[data-ton="acik"] .noktalar button { color: var(--terra); }
.noktalar button:hover { opacity: .7; }
.noktalar button[aria-current="true"] { opacity: 1; transform: scale(1.5); }
.noktalar button::after {
  content: attr(data-ad);
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(6px);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: all .35s var(--ease);
}
.noktalar button:hover::after { opacity: .8; transform: translateY(-50%) translateX(0); }

.sayac {
  position: fixed; left: var(--kenar); bottom: clamp(1rem, 3vh, 2rem); z-index: 60;
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  opacity: 0; transition: opacity .8s var(--ease) .5s, color .6s;
  color: rgba(243,238,228,.72);
}
.hazir .sayac { opacity: 1; }
body[data-ton="acik"] .sayac { color: rgba(42,23,16,.55); }
.sayac i { width: 26px; height: 1px; background: currentColor; opacity: .5; }

.kaydir-ok {
  position: fixed; left: 50%; bottom: clamp(.8rem, 2.4vh, 1.6rem); z-index: 60;
  transform: translateX(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  opacity: 0; transition: opacity .8s var(--ease) .6s, color .6s;
  color: rgba(243,238,228,.55);
}
.hazir .kaydir-ok { opacity: 1; }
body[data-ton="acik"] .kaydir-ok { color: rgba(42,23,16,.4); }
.kaydir-ok svg { width: 21px; height: 21px; animation: ok-in 2s ease-in-out infinite; }
@keyframes ok-in { 0%,100% { transform: translateY(-3px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
.son-sahne .kaydir-ok { opacity: 0 !important; }

/* ═══════════ SAHNE DESTESİ ═══════════ */
.deste { position: fixed; inset: 0; }
.sahne {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(3.6rem, 9vh, 5.6rem) var(--kenar) clamp(3.2rem, 8vh, 4.6rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--gecis) var(--ease), visibility var(--gecis);
  overflow: hidden;
}
.sahne.etkin { opacity: 1; visibility: visible; }

.sahne[data-zemin="terra"]      { background: radial-gradient(130% 100% at 50% 8%, var(--terra-acik) 0%, var(--terra) 46%, var(--terra-koyu) 100%); }
.sahne[data-zemin="terra-koyu"] { background: radial-gradient(120% 100% at 50% 50%, var(--terra) 0%, var(--terra-koyu) 55%, var(--clay-800) 100%); }
.sahne[data-zemin="krem"]       { background: radial-gradient(120% 100% at 50% 12%, var(--krem-acik) 0%, var(--krem) 52%, var(--sand) 100%); color: var(--ink); }
.sahne[data-zemin="sand"]       { background: radial-gradient(120% 100% at 50% 10%, #FFFDF8 0%, var(--krem) 45%, #DCD0B8 100%); color: var(--ink); }
.sahne[data-zemin="koyu"]       { background: radial-gradient(120% 90% at 50% 34%, #3E2114 0%, var(--kahve) 58%, #120805 100%); }

.doku {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ═══════════ ÜST / ALT BLOKLAR ═══════════ */
.ust-blok { position: relative; z-index: 7; text-align: center; display: grid; gap: .5rem; }
.alt-blok { position: relative; z-index: 7; text-align: center; display: grid; gap: .55rem; }

.kicker {
  font-size: clamp(.6rem, .95vw, .74rem); font-weight: 800;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,238,228,.66);
}
.kicker.koyu { color: rgba(146,62,37,.72); }

.dev-baslik {
  font-family: var(--font-b); font-weight: 800;
  font-size: clamp(1.9rem, 6.6vw, 5.4rem);
  line-height: .98; letter-spacing: -.02em;
  color: var(--krem);
  text-shadow: 0 8px 30px rgba(0,0,0,.24);
}
.dev-baslik.koyu { color: var(--terra); text-shadow: 0 8px 30px rgba(146,62,37,.14); }
.dev-baslik em { font-family: var(--font-d); font-weight: 600; font-style: italic; letter-spacing: -.01em; }
.harf {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(.6em) rotate(4deg);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.etkin .harf { opacity: 1; transform: none; }

.alt-metin {
  font-size: clamp(.82rem, 1.28vw, 1.02rem);
  line-height: 1.72; color: rgba(243,238,228,.78);
  max-width: 46rem; margin: 0 auto;
}
.alt-metin.koyu { color: rgba(42,23,16,.66); }
.alt-not {
  font-size: clamp(.62rem, 1.02vw, .78rem); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(243,238,228,.5);
}
.alt-not.koyu { color: rgba(42,23,16,.42); }
[data-fade] { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s; }
.etkin [data-fade] { opacity: 1; transform: none; }

/* ═══════════ SAHNE ORTASI ═══════════ */
.sahne-orta {
  position: relative; z-index: 5;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.ana-urun {
  position: relative; z-index: 4;
  width: var(--w, min(42vw, 470px)); height: auto;
  filter: drop-shadow(0 44px 70px rgba(0,0,0,.55));
  opacity: 0; transform: translateY(-112vh) rotate(-24deg) scale(.9);
  transition: opacity .5s var(--ease), transform 1.4s var(--dus);
}
.etkin .ana-urun { opacity: 1; transform: translateY(0) rotate(0) scale(1); }

/* ── Uçuşan malzemeler (BÜYÜK) — konum kapsayıcıya oranlı ── */
.ucus {
  position: absolute; z-index: 5;
  --x: 0%; --y: 0%; --r: 0deg; --s: 1; --yay: 1;
  left: calc(50% + var(--x) * var(--yay));
  top: calc(50% + var(--y) * var(--yay));
  /* giriş: ekranın üstünden takla atarak düşer */
  transform: translate(-50%, -50%) translateY(-118vh) rotate(-560deg) scale(calc(var(--s) * .8));
  opacity: 0;
  transition: opacity .45s var(--ease), transform 1.5s var(--dus);
  pointer-events: none;
}
.etkin .ucus {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) rotate(var(--r)) scale(var(--s));
}
.ucus img {
  width: clamp(96px, 15vmin, 260px); height: auto;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.48));
  animation: yuz 7s ease-in-out infinite;
}
.ucus.u2 img, .ucus.c2 img, .ucus.d2 img { animation-duration: 8.5s; animation-delay: -1.4s; }
.ucus.u4 img, .ucus.c4 img, .ucus.d4 img { animation-duration: 6.2s; animation-delay: -2.6s; }
.ucus.u6 img, .ucus.c6 img, .ucus.d6 img { animation-duration: 9.4s; animation-delay: -3.8s; }
.ucus.c8 img, .ucus.u5 img { animation-duration: 7.8s; animation-delay: -.9s; }
@keyframes yuz {
  0%, 100% { transform: translateY(0) rotate(0); }
  33% { transform: translateY(-14px) rotate(4deg); }
  66% { transform: translateY(10px) rotate(-3deg); }
}
/* blur kaldırıldı — tüm ürünler net */

.etkin .ucus.u1, .etkin .ucus.c1, .etkin .ucus.d1 { transition-delay: .18s; }
.etkin .ucus.u2, .etkin .ucus.c2, .etkin .ucus.d2 { transition-delay: .25s; }
.etkin .ucus.u3, .etkin .ucus.c3, .etkin .ucus.d3 { transition-delay: .32s; }
.etkin .ucus.u4, .etkin .ucus.c4, .etkin .ucus.d4 { transition-delay: .39s; }
.etkin .ucus.u5, .etkin .ucus.c5, .etkin .ucus.d5 { transition-delay: .46s; }
.etkin .ucus.u6, .etkin .ucus.c6, .etkin .ucus.d6 { transition-delay: .53s; }
.etkin .ucus.u7, .etkin .ucus.c7, .etkin .ucus.d7 { transition-delay: .60s; }
.etkin .ucus.u8, .etkin .ucus.c8, .etkin .ucus.d8 { transition-delay: .67s; }
.etkin .ucus.u9, .etkin .ucus.c9 { transition-delay: .74s; }
.etkin .ucus.u10 { transition-delay: .81s; }
/* tekil malzemeler farklı ritimde süzülür */
.ucus.u3 img, .ucus.u7 img, .ucus.d7 img { animation-duration: 8.2s; animation-delay: -1.1s; }
.ucus.u5 img, .ucus.u9 img, .ucus.c9 img { animation-duration: 6.6s; animation-delay: -3.3s; }
.ucus.u8 img, .ucus.u10 img, .ucus.d8 img { animation-duration: 9.1s; animation-delay: -5.2s; }

/* ═══════════ 2 · PASTA DİZİSİ ═══════════ */
.pasta-dizi { gap: clamp(.3rem, 1.2vw, 1.2rem); }
.pasta-oge {
  position: relative; z-index: 4;
  width: clamp(118px, 17vw, 280px); height: auto;
  filter: drop-shadow(0 34px 50px rgba(92,39,22,.36));
  opacity: 0; transform: translateY(-115vh) rotate(-420deg) scale(.9);
  transition: opacity .45s var(--ease), transform 1.45s var(--dus);
}
.etkin .pasta-oge { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
.etkin .p1 { transition-delay: .08s; } .etkin .p2 { transition-delay: .18s; }
.etkin .p3 { transition-delay: .28s; } .etkin .p4 { transition-delay: .38s; }
.pasta-oge { animation: sal 6.5s ease-in-out infinite; }
.p2 { animation-delay: -1.6s; } .p3 { animation-delay: -3.2s; } .p4 { animation-delay: -4.8s; }
@keyframes sal { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }

/* ═══════════ 3 · KAFE ATMOSFERİ — kasa merkez, ürünler hilal ═══════════ */
.isik-huzme {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(48% 40% at 50% 46%, rgba(255,214,150,.22) 0%, transparent 72%),
    radial-gradient(32% 28% at 18% 62%, rgba(255,196,120,.12) 0%, transparent 74%),
    radial-gradient(32% 28% at 82% 60%, rgba(255,196,120,.12) 0%, transparent 74%);
}
.kafe { align-items: center; justify-content: center; }

/* Merkez: Akarçay kasası */
.kasa {
  position: relative; z-index: 5;
  width: clamp(210px, 34vw, 560px); height: auto;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.6));
  opacity: 0; transform: translateY(-112vh) rotate(-18deg) scale(.92);
  transition: opacity .5s var(--ease), transform 1.4s var(--dus);
}
.etkin .kasa { opacity: 1; transform: translateY(0) rotate(0) scale(1); }

/* Kasanın etrafında hilal çizen ürünler */
.hilal {
  position: absolute; z-index: 4;
  --a: 0deg;          /* açı */
  --r: 34vmin;        /* yarıçap */
  --s: 1;
  left: 50%; top: 50%;
  transform:
    translate(-50%, -50%) translateY(-118vh)
    rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1 - 500deg))
    scale(calc(var(--s) * .85));
  opacity: 0;
  transition: opacity .45s var(--ease), transform 1.5s var(--dus);
  pointer-events: none;
}
.etkin .hilal {
  opacity: 1;
  transform:
    translate(-50%, -50%) translateY(0)
    rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))
    scale(var(--s));
}
.hilal img {
  width: clamp(84px, 12vw, 200px); height: auto;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.6));
  animation: yuz 8s ease-in-out infinite;
}
/* hilal dizilimi: üstte geniş yay, yanlarda aşağı iner */
.h1 { --a: -118deg; --r: 38vmin; --s: 1; }
.h2 { --a:  -95deg; --r: 41vmin; --s: .95; }
.h3 { --a:  -70deg; --r: 38vmin; --s: .88; }
.h4 { --a:  -46deg; --r: 32vmin; --s: .82; }
.h5 { --a:   46deg; --r: 32vmin; --s: .82; }
.h6 { --a:   70deg; --r: 38vmin; --s: .88; }
.h7 { --a:   95deg; --r: 41vmin; --s: .95; }
.h8 { --a:  118deg; --r: 38vmin; --s: 1; }
.h2 img { animation-delay: -1.1s; } .h3 img { animation-delay: -2.2s; }
.h4 img { animation-delay: -3.3s; } .h5 img { animation-delay: -4.4s; }
.h6 img { animation-delay: -5.5s; } .h7 img { animation-delay: -6.6s; }
.h8 img { animation-delay: -7.2s; }
.etkin .h1 { transition-delay: .30s; } .etkin .h2 { transition-delay: .38s; }
.etkin .h3 { transition-delay: .46s; } .etkin .h4 { transition-delay: .54s; }
.etkin .h5 { transition-delay: .62s; } .etkin .h6 { transition-delay: .70s; }
.etkin .h7 { transition-delay: .78s; } .etkin .h8 { transition-delay: .86s; }

.kafe-zemin {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: min(56vw, 700px); height: clamp(24px, 4.5vw, 56px);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.66), transparent 72%);
  filter: blur(9px); z-index: 3;
}

/* ═══════════ 4 · İÇECEK DİZİSİ ═══════════ */
.icecek-dizi { gap: clamp(.5rem, 2.4vw, 2.6rem); align-items: center; }
.icecek {
  position: relative; z-index: 4;
  width: clamp(88px, 13vw, 210px); height: auto;
  filter: drop-shadow(0 30px 44px rgba(92,39,22,.4));
  opacity: 0; transform: translateY(-115vh) rotate(-320deg) scale(.9);
  transition: opacity .45s var(--ease), transform 1.45s var(--dus);
}
.etkin .icecek { opacity: 1; transform: translateY(0) rotate(0) scale(1); animation: sal 7s ease-in-out infinite 1.4s; }
.etkin .i1 { transition-delay: .1s; } .etkin .i2 { transition-delay: .2s; }
.etkin .i3 { transition-delay: .3s; } .etkin .i4 { transition-delay: .4s; }
.etkin .i5 { transition-delay: .5s; }
.i2 { animation-delay: -1.8s; } .i3 { animation-delay: -3.4s; }
.i4 { animation-delay: -5s; } .i5 { animation-delay: -6.4s; }

/* ═══════════ 5 · MAĞAZA — tam ekran foto + karartma ═══════════ */
.sahne[data-zemin="foto"] { background: var(--kahve); }
.foto-arka { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.foto-arka img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  transform: scale(1.08);
  transition: transform 6s var(--ease);
}
.etkin .foto-arka img { transform: scale(1); }
.foto-golge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 48%, rgba(20,8,3,.72) 0%, rgba(20,8,3,.5) 45%, rgba(20,8,3,.66) 100%),
    linear-gradient(180deg, rgba(20,8,3,.55) 0%, transparent 26%, transparent 62%, rgba(20,8,3,.78) 100%);
}
.magaza-ic {
  position: relative; z-index: 6;
  grid-row: 1 / -1;
  display: grid; justify-items: center; align-content: center;
  gap: clamp(.8rem, 2.2vh, 1.6rem);
  text-align: center;
}
.magaza-ic .alt-metin { color: rgba(243,238,228,.86); }
.magaza-ic .btn-menu svg { width: 20px; height: 20px; }

/* ═══════════ 6 · MENÜ — dağınık ürün duvarı (bisquitte tarzı) ═══════════ */
.duvar { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.duvar-oge {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w);
  transform: translate(-50%, -50%) translateY(-125vh) rotate(calc(var(--r, 0deg) - 480deg)) scale(.85);
  opacity: 0;
  transition: opacity .4s var(--ease), transform 1.5s var(--dus);
  will-change: transform;
}
.etkin .duvar-oge {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) rotate(var(--r, 0deg)) scale(1);
}
.duvar-oge img {
  width: 100%; height: auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
  animation: suzul var(--sur, 9s) ease-in-out var(--gec, 0s) infinite;
}
@keyframes suzul {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

.sahne[data-zemin="terra-koyu"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(38% 32% at 50% 50%, rgba(70,26,12,.94) 0%, rgba(70,26,12,.78) 46%, rgba(70,26,12,.22) 76%, transparent 92%);
}
.menu-ic {
  position: relative; z-index: 6;
  grid-row: 1 / -1;
  display: grid; justify-items: center; align-content: center;
  gap: clamp(.9rem, 2.4vh, 1.8rem);
  text-align: center;
}
.menu-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: rgba(243,238,228,.8); }
.btn-menu {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: clamp(.9rem, 2vh, 1.15rem) clamp(1.8rem, 4vw, 2.8rem);
  border-radius: 100px;
  background: var(--krem); color: var(--terra);
  font-weight: 800; font-size: clamp(.92rem, 1.5vw, 1.08rem); letter-spacing: .02em;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn-menu svg { width: 21px; height: 21px; transition: transform .4s var(--ease); }
.btn-menu:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 28px 54px -16px rgba(0,0,0,.7); }
.btn-menu:hover svg { transform: translateX(5px); }
.menu-iletisim { font-size: clamp(.78rem, 1.2vw, .92rem); color: rgba(243,238,228,.76); line-height: 1.9; }
.menu-iletisim a { border-bottom: 1px solid rgba(243,238,228,.4); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1100px) {
  .mu3, .mu4 { display: none; }
}
@media (max-width: 900px) {

  .alt-metin br { display: none; }
}
@media (max-width: 640px) {
  .sahne { padding: clamp(3.4rem, 8vh, 4.6rem) .9rem clamp(3rem, 7vh, 4rem); }
  .dev-baslik { font-size: clamp(1.7rem, 8.6vw, 2.8rem); }
  .alt-metin { font-size: .8rem; line-height: 1.62; }
  .ana-urun { --w: 46vw !important; }
  .ucus img { width: clamp(74px, 19vmin, 128px); }
  /* mobilde dikey yayılımı hafif sıkıştır */
  .ucus { top: calc(50% + var(--y) * .78); }
  .pasta-oge { width: clamp(76px, 21.5vw, 124px); }
  .pasta-dizi { gap: .2rem; }
  .icecek { width: clamp(62px, 19vw, 112px); }
  .icecek-dizi { gap: .35rem; }
  .kasa { width: 52vw; }
  .hilal img { width: clamp(46px, 15.5vw, 84px); }
  /* mobilde dar hilal — vmin tabanlı, taşma yok */
  .h1 { --a: -152deg; --r: 30vmin; } .h2 { --a: -120deg; --r: 33vmin; }
  .h3 { --a:  -88deg; --r: 34vmin; } .h4 { --a:  -54deg; --r: 30vmin; }
  .h5 { --a:   54deg; --r: 30vmin; } .h6 { --a:   88deg; --r: 34vmin; }
  .h7 { --a:  120deg; --r: 33vmin; } .h8 { --a:  152deg; --r: 30vmin; }
  .noktalar { right: .7rem; gap: .7rem; }
  .noktalar button { width: 7px; height: 7px; }
  .noktalar button::after { display: none; }
  .sayac { font-size: .68rem; }
  .duvar-oge { --w: clamp(62px, 21vw, 116px) !important; }
}
@media (max-height: 620px) {
  .alt-metin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
}


/* ═══════════ KAMPANYA KARTI ═══════════ */
.kampanya {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(.7rem, 2.4vw, 2rem);
  background: rgba(24,10,4,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
  cursor: pointer;
}
.kampanya.acik { opacity: 1; visibility: visible; }
.kampanya-kart {
  position: relative;
  width: min(100%, 1180px);
  max-height: 94vh;
  overflow: auto;
  background: var(--krem);
  border-radius: 22px;
  padding: clamp(1.2rem, 3vw, 2.4rem) clamp(.9rem, 2.4vw, 2rem) clamp(1rem, 2.4vw, 1.8rem);
  box-shadow: 0 44px 100px -30px rgba(0,0,0,.72);
  text-align: center;
  transform: translateY(26px) scale(.95);
  transition: transform .6s var(--dus);
  cursor: default;
}
.kampanya.acik .kampanya-kart { transform: none; }
.kampanya-kapat {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(146,62,37,.12); color: var(--terra);
  transition: background .25s, transform .35s var(--ease);
}
.kampanya-kapat:hover { background: rgba(146,62,37,.24); transform: rotate(90deg); }
.kampanya-ust {
  font-family: var(--font-b); font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.9rem);
  color: var(--terra);
  margin-bottom: clamp(.8rem, 2vw, 1.3rem);
  letter-spacing: -.01em;
}
.kampanya-ust em { font-family: var(--font-d); font-weight: 600; font-style: italic; }
.kampanya-afisler {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 1.6vw, 1.2rem);
}
.kampanya-afisler img {
  width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 40px -16px rgba(92,39,22,.55);
}
.kampanya-ipucu {
  margin-top: clamp(.8rem, 2vw, 1.2rem);
  font-size: clamp(.72rem, 1.1vw, .86rem);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(42,23,16,.42);
}
@media (max-width: 620px) {
  /* afişler mobilde de YAN YANA, ekranı dolduracak kadar büyük */
  .kampanya { padding: .35rem; }
  .kampanya-afisler { grid-template-columns: 1fr 1fr; gap: .3rem; }
  .kampanya-kart { width: 100%; padding: 2.2rem .35rem .6rem; border-radius: 14px; }
  .kampanya-ust { font-size: clamp(.82rem, 3.6vw, 1.1rem); margin-bottom: .6rem; }
  .kampanya-kapat { width: 34px; height: 34px; top: .5rem; right: .5rem; }
  .kampanya-afisler img { border-radius: 9px; }
  .kampanya-ipucu { font-size: .6rem; letter-spacing: .12em; margin-top: .6rem; }
}

/* ═══════════ MENÜ GEÇİŞİ (tasarım 2 video) ═══════════ */
.menu-gecis {
  position: fixed; inset: 0; z-index: 180;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
  background: var(--kahve);
  overflow: hidden;
}
.menu-gecis.acik { opacity: 1; visibility: visible; }
.menu-gecis video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.22);
}
.menu-gecis.acik video { animation: mg-yakinlas 3.4s var(--ease) forwards; }
@keyframes mg-yakinlas { to { transform: scale(1); } }
.menu-gecis-golge {
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 50%, rgba(20,8,3,.55) 0%, rgba(20,8,3,.82) 100%);
}
.menu-gecis-yazi {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 1.1rem;
  color: var(--krem); text-align: center;
}
.mg-amblem img {
  width: clamp(52px, 7vw, 78px); height: auto;
  border-radius: 10px;
  animation: amblem-nefes 1.8s var(--ease) infinite;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.menu-gecis-yazi p {
  font-size: clamp(.78rem, 1.3vw, .95rem);
  font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(243,238,228,.8);
}
@keyframes amblem-nefes {
  0%, 100% { transform: scale(1) rotate(0); opacity: .92; }
  50% { transform: scale(1.1) rotate(4deg); opacity: 1; }
}