/* ============================================================
   BigBerry Theme - Custom Overrides
   webflow.css icindeki ana renkler degistirildi, burada da
   tutarlilik icin body + bazi spesifik selector'lar.
   ============================================================ */

:root {
  --waffle: #E11D48;            /* Bigberry cilek kirmizisi (accent) */
  --bege-light: #FCE7F3;        /* Bigberry pembe bg */
  --color: #500724;             /* Bigberry koyu bordo metin */
}

/* -------- Genel -------- */
body {
  background-color: #FCE7F3;
  color: #500724;
}

a {
  color: #E11D48;
}

/* -------- Hero video arka plan fix --------
   Webflow'un w-background-video JS'i <video>'yu runtime'da
   top/left/transform ile konumlandiriyor. webflow.css'te
   `inset: -100%` ile tum kenarlardan %100 disari cekilmis.
   Sonuc olarak video sol ust veya sag alt koseye kayiyor.
   Tum bu degerleri !important ile sifirliyoruz. */
body .w-background-video > video,
.w-background-video.w-background-video-atom > video {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 0 0 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* -------- Video container sigdirmasi -------- */
.w-background-video {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* -------- Navbar scroll state -------- */
.nav-bar-2 {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
              padding-top 0.3s ease, padding-bottom 0.3s ease;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.nav-bar-2.scrolled {
  background-color: rgba(80, 7, 36, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* -------- Navbar logo boyutu -------- */
.logo-navbar img {
  width: 122px !important;
  height: auto !important;
  max-width: none !important;
  transition: width 0.3s ease;
}

.nav-bar-2.scrolled .logo-navbar img {
  width: 88px !important;
}

/* -------- No-scroll body lock -------- */
body.no-scroll {
  overflow: hidden;
}

/* -------- Mobile hero: vertical video with a persistent poster fallback -------- */
@media (max-width: 991px) {
  .background-video { display: none !important; }
  .background-video-3 {
    display: flex !important;
    min-height: 100vh;
    min-height: 100svh;
    background: #500724 url("/images/vertical-poster.jpg") center / cover no-repeat;
  }
}

/* -------- Reduced motion: video yerine poster -------- */
@media (prefers-reduced-motion: reduce) {
  .w-background-video > video { display: none !important; }
  [data-wf-bgvideo-fallback-img] { display: block !important; }
}

/* ============================================================
   Order Now Modal — Delivery Service Picker
   ============================================================ */
.bb-order-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bb-order-modal.is-open {
  display: flex;
  opacity: 1;
}
.bb-order-modal__box {
  position: relative;
  background: #FCE7F3;
  border-radius: 18px;
  padding: 48px 32px 36px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 25px 70px rgba(80, 7, 36, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.25s ease;
}
.bb-order-modal.is-open .bb-order-modal__box {
  transform: translateY(0) scale(1);
}
.bb-order-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.bb-order-modal__close:hover { background: #333333; }
.bb-order-modal__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bb-order-modal__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  width: 100%;
  max-width: 320px;
  min-height: 70px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.bb-order-modal__link:hover { transform: translateY(-2px); opacity: 0.85; }
.bb-order-modal__link img {
  max-width: 260px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  .bb-order-modal__box { padding: 44px 20px 28px; }
  .bb-order-modal__link { min-height: 60px; padding: 8px 14px; }
  .bb-order-modal__link img { max-width: 200px; max-height: 46px; }
}

/* ============================================================
   Waffle Floating Animation
   - 4 waffle/kumpir/dondurma/bubble-tea goruntuleri .bb-wf ile
   - bb-wf-1..4 her biri farkli animation-delay ile dalga gibi
   - IntersectionObserver .bb-wf-active ekleyince baslar
   - Hover'da scale 1.05 + biraz daha hizli
   - prefers-reduced-motion: reduce -> animasyon yok
   ============================================================ */
@keyframes bb-wf-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-24px); }
  100% { transform: translateY(0); }
}
@keyframes bb-wf-float-hover {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-28px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.bb-wf {
  display: inline-block;
  transform-origin: center bottom;
  will-change: transform;
  animation: bb-wf-float 4.5s ease-in-out infinite;
  animation-play-state: paused;          /* IO ile .bb-wf-active olunca baslar */
  transition: filter 0.2s ease;
  cursor: pointer;
}
.bb-wf.bb-wf-active { animation-play-state: running; }
.bb-wf-1 { animation-delay:  0s;     }
.bb-wf-2 { animation-delay: -1.1s;   }
.bb-wf-3 { animation-delay: -2.2s;   }
.bb-wf-4 { animation-delay: -3.3s;   }

.bb-wf.bb-wf-active:hover {
  animation-name: bb-wf-float-hover;
  animation-duration: 2.5s;
}

/* Mobil: hareket mesafesi daha az */
@media (max-width: 767px) {
  @keyframes bb-wf-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
  }
  @keyframes bb-wf-float-hover {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-18px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
  }
}

/* Erisilebilirlik: reduced motion kullanicilara animasyon yok */
@media (prefers-reduced-motion: reduce) {
  .bb-wf { animation: none !important; }
  .bb-wf:hover { animation: none !important; }
}

/* Mobil + desktop menü — orijinal waffleco davranışı (full-screen koyu overlay) */
.menu-popup-3 {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #242424 !important;
  z-index: 60;
  transform: translateX(100%);
  transition: transform .35s ease;
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
}
.menu-popup-3.is-open,
.menu-popup-3.w--open {
  transform: translateX(0);
}
.menu-popup-3 .padding-nav {
  padding-top: 80px;
}
.menu-popup-3 .navigation-list {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
.menu-popup-3 .nav-link-2 {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #E11D48;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.menu-popup-3 .nav-link-2 p { margin: 0; }
.menu-popup-3 .nav-link-2:hover { color: #ffffff; }
.menu-popup-3 .social-links {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.menu-popup-3 .social-links .footer-social-link {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: #E11D48;
  border-radius: 8px;
}
.menu-popup-3 .social-links .image-30 {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}
.nav-bar-2 .menu-button-3 {
  position: relative;
  z-index: 70;
}
.nav-bar-2 .bb-menu-icon {
  position: relative;
  z-index: 2;
}

/* Desktop: sağdan kayan drawer panel (tam ekran değil) */
@media (min-width: 992px) {
  .menu-popup-3 {
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 380px !important;
    height: 100vh !important;
    transform: translateX(100%);
    transition: transform .35s ease;
    border-radius: 0;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.32);
    background-color: #242424 !important;
  }
  .menu-popup-3.is-open,
  .menu-popup-3.w--open {
    transform: translateX(0);
  }
  .menu-popup-3 .padding-nav {
    padding-top: 80px;
  }
  /* Backdrop overlay */
  body.bb-menu-backdrop::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
    animation: bb-fade-in .25s ease;
  }
  @keyframes bb-fade-in { from { opacity: 0; } to { opacity: 1; } }
  /* Sağ üst X'in pop-up'ın içinde olmasını sağla */
  .nav-bar-2 .menu-button-3 {
    position: relative;
    z-index: 70;
  }
}

/* Hamburger animasyonu (lottie yerine) */
.bb-menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 18px;
  cursor: pointer;
}
.bb-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
  transform-origin: center;
}
.bb-menu-icon.is-open span { background: #ffffff; }
.bb-menu-icon span + span { margin-top: 6px; }
.bb-menu-icon.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bb-menu-icon.is-open span:nth-child(2) { opacity: 0; }
.bb-menu-icon.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Keep mobile hero actions below the fixed navigation. */
@media (max-width: 991px) {
  .nav-bar-2 { width: 100%; padding: 12px 0 !important; }
  .nav-bar-2 .div-block-6 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px;
  }
  .nav-bar-2 .nav-content-wrapper-3 {
    flex: 1;
    min-width: 0;
    align-items: center;
  }
  .nav-bar-2 .logo-navbar img { width: 90px !important; }
  .nav-bar-2 .menu-button-3,
  .nav-bar-2 .location-button-navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
  .background-video-3 .banner-btn {
    position: absolute;
    inset: auto 20px max(28px, env(safe-area-inset-bottom));
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .background-video-3 .banner-btn .button-12 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 14px 10px;
    text-decoration: none;
  }
  .background-video-3 .banner-btn .click-text {
    font-size: clamp(18px, 4vw, 24px);
    line-height: 1.2;
    text-decoration: none;
  }
}