/* ==========================================================================
   ZEYN RESTAURANT - MODULAR AMBIENCE: UNIFIED RELIEF TEXTURE & HEARTH FLAME
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TEK VE BÜTÜNSEL ARKA PLAN (UNIFIED TEXTURE & MESH)
   -------------------------------------------------------------------------- */

body.home,
body[data-theme] {
  position: relative;
  background-color: var(--paper, #181110);
  background-image: 
    /* Katman 1: Selçuklu / Hatay mikro geometrik taş oyma rölyef dokusu */
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l15 15-15 15-15-15zM0 30l15 15-15 15-15-15zM60 30l15 15-15 15-15-15zM30 60l15 15-15 15-15-15z' fill='%23f07822' fill-opacity='0.022' stroke='%23ffffff' stroke-width='0.4' stroke-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"),
    /* Katman 2: Doğal sıcaklık ve derinlik gradyanları */
    radial-gradient(circle at 50% 0%, rgba(240, 120, 34, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(143, 23, 21, 0.09) 0%, transparent 55%);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   2. EKRANA BAĞLI TEK VE CANLI OCAKBAŞI ALEV SİLÜETİ (VIEWPORT-FIXED FLAME)
   -------------------------------------------------------------------------- */

/* Alttan yükselen tekil, zarif ve canlı kor alevi */
body.home::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 420px;
  background: 
    /* Merkez alev dalgası */
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(240, 120, 34, 0.22) 0%, rgba(217, 45, 32, 0.14) 45%, rgba(143, 23, 21, 0.06) 70%, transparent 88%),
    /* Sol kor dili */
    radial-gradient(ellipse 40% 50% at 18% 100%, rgba(247, 176, 77, 0.18) 0%, rgba(240, 120, 34, 0.12) 40%, transparent 75%),
    /* Sağ kor dili */
    radial-gradient(ellipse 45% 55% at 82% 100%, rgba(217, 45, 32, 0.20) 0%, rgba(240, 120, 34, 0.11) 45%, transparent 80%);
  pointer-events: none;
  z-index: 0;
  filter: blur(26px);
  opacity: 0.90;
  animation: zeynFlameBreath 6.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Yanlarda süzülen hafif duman ve köz ışıltısı */
body.home::after {
  content: "";
  position: fixed;
  top: 25%;
  right: -60px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle at center, rgba(240, 120, 34, 0.10) 0%, rgba(217, 45, 32, 0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(38px);
  animation: zeynEmberDrift 14s ease-in-out infinite alternate;
  will-change: transform;
}

/* Tüm bölümlerin şeffaf ve tek arka plan üzerinde bütünleşmesi */
main, section, .menu-section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.menu-section {
  padding-top: 60px;
  padding-bottom: 70px;
}

/* --------------------------------------------------------------------------
   3. YEMEK VE BÖLÜM KARTLARI — KOR ÜZERİNDE SÜZÜLME ETKİSİ
   -------------------------------------------------------------------------- */

.dish,
.hatay-feature-card,
.weekly-hours-card,
.origin-card,
.review-bubble {
  background: rgba(36, 24, 23, 0.92);
  border: 1px solid rgba(240, 120, 34, 0.18);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 12px 28px rgba(0, 0, 0, 0.40),
    0 3px 14px rgba(240, 120, 34, 0.08);
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dish::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(247, 176, 77, 0.40), transparent);
  pointer-events: none;
  z-index: 2;
}

.dish:hover {
  border-color: var(--gold, #f7b04d);
  transform: translateY(-5px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 36px rgba(0, 0, 0, 0.50),
    0 0 22px rgba(240, 120, 34, 0.24);
}

/* --------------------------------------------------------------------------
   4. ANİMASYONLAR & ERİŞİLEBİLİRLİK
   -------------------------------------------------------------------------- */

@keyframes zeynFlameBreath {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 0.80;
  }
  50% {
    transform: translateY(-10px) scaleY(1.08);
    opacity: 0.98;
  }
  100% {
    transform: translateY(3px) scaleY(0.96);
    opacity: 0.82;
  }
}

@keyframes zeynEmberDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-30px, 20px, 0) scale(1.10);
  }
  100% {
    transform: translate3d(15px, -15px, 0) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home::before,
  body.home::after {
    animation: none !important;
    transform: none !important;
  }
}