/* ═══ Sahne kompozisyonları: her sahnenin kendi yerleşimi ═══ */

/* ─────────── Sahne 1 · Tatlı Bir Başlangıç · Yaş Pastalar ─────────── */
.s1-vitrin { left: 50%; top: 44%; width: clamp(190px, 22vw, 340px); }
.s1-golge  { left: 50%; top: 74%; width: clamp(190px, 21vw, 320px); height: clamp(40px, 4.6vw, 70px); }
.s1-u1 { left: 14%; top: 26%; width: clamp(80px, 9.6vw, 156px); }
.s1-u2 { left: 86%; top: 32%; width: clamp(74px, 8.8vw, 142px); }
.s1-u3 { left: 21%; top: 76%; width: clamp(68px, 8vw, 128px); }
.s1-u4 { left: 80%; top: 73%; width: clamp(74px, 8.8vw, 140px); }

/* ─────────── Sahne 2 · Katman Katman ─────────── */
.s2-vitrin { left: 50%; top: 48%; width: clamp(200px, 24vw, 360px); }
.s2-golge  { left: 50%; top: 79%; width: clamp(200px, 23vw, 340px); height: clamp(40px, 4.6vw, 72px); }
.s2-u1 { left: 16%; top: 34%; width: clamp(84px, 10vw, 164px); }
.s2-u2 { left: 84%; top: 40%; width: clamp(78px, 9vw, 148px); }
.s2-u3 { left: 24%; top: 78%; width: clamp(70px, 8vw, 132px); }

/* Katman çizgileri — "kat kat" fikrini görselleştirir */
.kat-cizgi {
  position: absolute;
  left: 50%;
  width: min(76vw, 46rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  transform: translateX(-50%);
}
.kat-cizgi-1 { top: 40%; }
.kat-cizgi-2 { top: 56%; }
.kat-cizgi-3 { top: 72%; }

/* ─────────── Kategori tabakları ───────────
   Fotoğrafı henüz gelmemiş kategoriler için marka mührü taşıyan
   tabak. Görsel eklenince <img> ile değiştirilir, düzen aynı kalır. */
.tabak {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  aspect-ratio: 1;
  padding: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, var(--sand-50) 62%, var(--sand-100) 100%);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(146, 62, 37, 0.1);
}
.tabak::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1.5px dashed rgba(146, 62, 37, 0.3);
  border-radius: 50%;
}
[data-tone="dark"] .tabak {
  background: radial-gradient(circle at 38% 32%, var(--clay-600) 0%, var(--clay-700) 60%, var(--clay-800) 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(227, 217, 198, 0.16);
}
[data-tone="dark"] .tabak::before {
  border-color: rgba(227, 217, 198, 0.3);
}
.tabak-muhur {
  width: 62%;
  height: auto;
  opacity: 0.9;
  animation: muhur-don 44s linear infinite;
}
@keyframes muhur-don {
  to { transform: rotate(360deg); }
}
.tabak-not {
  position: absolute;
  bottom: 13%;
  font-size: clamp(0.5rem, 1.1vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
  text-align: center;
}
.tabak-kucuk .tabak-not {
  display: none;
}

/* Kategori sahnesi yerleşimi */
.kt-ana { left: 50%; top: 48%; width: clamp(190px, 23vw, 340px); }
.kt-golge { left: 50%; top: 79%; width: clamp(190px, 22vw, 320px); height: clamp(38px, 4.4vw, 68px); }
.kt-1 { left: 15%; top: 30%; width: clamp(74px, 9vw, 146px); }
.kt-2 { left: 85%; top: 37%; width: clamp(68px, 8.2vw, 132px); }
.kt-3 { left: 22%; top: 76%; width: clamp(62px, 7.4vw, 118px); }
.kt-4 { left: 79%; top: 73%; width: clamp(66px, 8vw, 126px); }

/* ─────────── Sahne 3 · Vitrinimiz (koyu) ─────────── */
.vitrin-yay {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(94vw, 68rem);
  height: clamp(180px, 30vh, 320px);
  transform: translate(-50%, -50%);
}
.yay-oge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(96px, 12vw, 190px);
  transform: translate(-50%, -50%) translateX(var(--x)) translateY(var(--y))
    rotate(var(--r, 0deg));
  transition: transform 520ms var(--ease-back), filter 420ms;
}
.yay-oge:hover {
  transform: translate(-50%, -50%) translateX(var(--x)) translateY(calc(var(--y) - 16px))
    rotate(0deg) scale(1.09);
  z-index: 5;
}

/* ─────────── Sahne 4 · Menü ─────────── */
.s4-vitrin { left: 50%; top: 52%; width: clamp(190px, 22vw, 330px); }
.s4-golge  { left: 50%; top: 80%; width: clamp(190px, 21vw, 310px); height: clamp(38px, 4.4vw, 68px); }
.s4-u1 { left: 17%; top: 40%; width: clamp(80px, 9.5vw, 152px); }
.s4-u2 { left: 83%; top: 46%; width: clamp(76px, 9vw, 144px); }

/* ─────────── Sahne 5 · İletişim ─────────── */
.lambalar {
  left: 50%;
  top: calc(var(--header-h) * 0.2);
  width: min(660px, 80vw);
  transform: translateX(-50%);
  z-index: 2;
}
.metin-iletisim {
  margin-top: clamp(2.4rem, 8vh, 6rem);
}

/* Sarkıt lamba ışıması */
.lamba-hale {
  animation: lamba-nefes 4.6s ease-in-out infinite;
  transform-origin: center;
}
.lamba-hale:nth-of-type(2) { animation-delay: -1.6s; }
.lamba-hale:nth-of-type(3) { animation-delay: -3s; }
@keyframes lamba-nefes {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ─────────── Sahne 2 · Adet Tatlılar (asimetrik kompozisyon) ─────────── */
.at-vitrin { left: 51%; top: 45%; width: clamp(200px, 24vw, 360px); }
.at-golge  { left: 51%; top: 74%; width: clamp(200px, 23vw, 340px); height: clamp(40px, 4.8vw, 76px); }
.at-u1 { left: 17%; top: 28%; width: clamp(78px, 9.5vw, 150px); }
.at-u2 { left: 84%; top: 24%; width: clamp(80px, 9.8vw, 156px); }
.at-u3 { left: 14%; top: 71%; width: clamp(74px, 9vw, 140px); }
.at-u4 { left: 86%; top: 66%; width: clamp(78px, 9.5vw, 148px); }
.at-u5 { left: 33%; top: 83%; width: clamp(70px, 8.4vw, 130px); }

/* ─────────── İçecekler sahnesi · tanıtım afişleri ─────────── */
.afis-gorsel {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 34px 52px -20px rgba(92, 39, 22, 0.44);
}
.ic-afis-1 {
  left: 31%;
  top: 55%;
  width: clamp(150px, 19vw, 288px);
  z-index: 3;
}
.ic-afis-2 {
  left: 69%;
  top: 46%;
  width: clamp(148px, 18.5vw, 282px);
  z-index: 2;
}
.s4-golge {
  left: 50%;
  top: 82%;
  width: clamp(240px, 40vw, 540px);
  height: clamp(40px, 6vw, 90px);
}

@media (max-width: 768px) {
  .ic-afis-1 { left: 30%; top: 56%; width: min(42vw, 210px); }
  .ic-afis-2 { left: 70%; top: 45%; width: min(41vw, 205px); }
}