/* ============================================================
   BROOS – Döner & Pizza  ·  custom styles
   Scope: HEADER/FOOTER logo, HERO video banner, ABOUT 3D video.
   Nothing here touches the DO-NOT-TOUCH sections.
   Brand orange: #EA6D26
   ============================================================ */

:root {
  --broos-orange: #EA6D26;
  --broos-orange-soft: #f59247;
}

/* ---------- Tek sayfa navigasyon (anchor) ---------- */
html { scroll-behavior: smooth; }
#top, #about, #menu, #kontakt { scroll-margin-top: 110px; }

/* ---------- Sayfa altı beyazlığını önle (overscroll) ---------- */
html, body { background-color: #111111; }

/* ---------- Mobilde header telefon bloğunu gizle (taşmayı önle) ---------- */
@media (max-width: 991px) {
  .header-one .rts-header-right .bottom .query-list { display: none; }
}

/* ---------- Footer: yukarı çek + iki blok eşit hizada ---------- */
.rts-footer-one.rts-section-gap2Top { padding-top: 60px; }
.main-footer-wrapper-one {
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.main-footer-wrapper-one .single-footer-wized-one.logo-area { width: 40%; }
.main-footer-wrapper-one .single-footer-wized-one.get-in-touch { width: 40%; }
/* logo bloğundaki üst/alt boşlukları sıfırla ki sağ blokla eşit dursun */
.main-footer-wrapper-one .single-footer-wized-one.logo-area a.logo img { margin-bottom: 18px; }
.main-footer-wrapper-one .single-footer-wized-one.get-in-touch .footer-header-two .title { margin-top: 0; }

/* ---------- Galeri görselleri eşit boyut ---------- */
.rts-gallery-area .gallery-area-inner #open-popup { padding: 0; }
.rts-gallery-area .gallery-area-inner .gallery-image a { display: block; }
.rts-gallery-area .gallery-area-inner .gallery-image a img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* ---------- LOGO (header + footer) ---------- */
/* Header logo arka planı: turuncu yerine kömür siyahı */
.header-one .header-one-container .header-main-wrapper .logo-area {
  background: #161616;
}
/* Sağdaki menü butonu (üç nokta) kutusu da kömür siyahı */
.header-one .header-one-container .header-main-wrapper .menu-area {
  background: #161616;
}
.logo-area .logo img {
  height: 64px;
  width: auto;
  object-fit: contain;
}
.main-footer-wrapper-one .logo-area .logo img {
  height: 78px;
}

/* ============================================================
   Language switcher (DE / EN / TR) — left of the phone number
   ============================================================ */
.rts-header-right .bottom {
  display: flex;
  align-items: center;
  gap: 22px;
}
.broos-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  padding: 4px;
}
.broos-lang-switch button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #cfcfcf;
  background: transparent;
  border: 0;
  border-radius: 30px;
  padding: 5px 11px;
  cursor: pointer;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.broos-lang-switch button:hover { color: #fff; }
.broos-lang-switch button.active {
  background: var(--broos-orange);
  color: #fff;
}
@media (max-width: 1200px) {
  .rts-header-right .bottom { gap: 12px; }
  .broos-lang-switch button { padding: 5px 8px; font-size: 11px; }
}

/* ============================================================
   HERO BANNER — full-cover background video
   ============================================================ */
.banner-one .rts-banner-one {
  position: relative;
  overflow: hidden;
}

/* the video sits behind everything; bg_image--1 remains as a poster fallback */
.banner-one .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.banner-one .hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* darken for legibility + subtle brand-warm vignette */
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(234,109,38,.18) 0%, rgba(0,0,0,0) 45%),
    rgba(0, 0, 0, .45);
}

/* lift the actual content above video + overlay */
.banner-one .rts-banner-one .container {
  position: relative;
  z-index: 2;
}

/* single slide → no pagination bullets */
.banner-one .swiper-pagination {
  display: none !important;
}

/* ============================================================
   ORDER CTA banner (replaces the reservation form)
   Big centered "Jetzt bestellen" text on the gray banner.
   ============================================================ */
.rts-reservation-area.broos-order-banner .broos-order-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 16px;
  min-height: 120px;
}
.broos-order-text {
  display: inline-block;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .5px;
  color: #fff;
  background: var(--broos-orange);
  border: 3px solid var(--broos-orange);
  border-radius: 18px;
  padding: 24px 80px;
  text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(234, 109, 38, .7);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  /* kalp atışı gibi nabız */
  animation: broosHeartbeat 1.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes broosHeartbeat {
  0%   { transform: scale(1);     box-shadow: 0 16px 34px -12px rgba(234, 109, 38, .55); }
  14%  { transform: scale(1.12);  box-shadow: 0 22px 52px -8px rgba(234, 109, 38, 1); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.12);  box-shadow: 0 22px 52px -8px rgba(234, 109, 38, 1); }
  70%  { transform: scale(1);     box-shadow: 0 16px 34px -12px rgba(234, 109, 38, .55); }
  100% { transform: scale(1); }
}
.broos-order-text:hover {
  background: transparent;
  color: var(--broos-orange);
  animation-play-state: paused;
  transform: scale(1.06);
  box-shadow: 0 24px 46px -10px rgba(234, 109, 38, .7);
}
/* Hareketi azalt tercihi olan kullanıcılar için kapat */
@media (prefers-reduced-motion: reduce) {
  .broos-order-text { animation: none; }
}

/* ============================================================
   ABOUT / WELCOME — scroll-scrubbed 3D burger video
   ============================================================ */
.broos-video-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* perspective gives the tilt real depth */
  perspective: 1000px;
  padding: 30px 10px;
}

/* soft orange brand blobs behind the video for depth */
.broos-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.broos-blob--1 {
  width: 220px;
  height: 220px;
  top: -10px;
  left: -20px;
  background: radial-gradient(circle, rgba(234,109,38,.35), rgba(234,109,38,0) 70%);
}
.broos-blob--2 {
  width: 280px;
  height: 280px;
  bottom: -30px;
  right: -30px;
  background: radial-gradient(circle, rgba(245,146,71,.28), rgba(245,146,71,0) 70%);
}

.broos-video-tilt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #1a1a1a;
  transform-style: preserve-3d;
  will-change: transform;
  /* premium layered shadow + warm rim */
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 0 6px rgba(234, 109, 38, .12);
}

.broos-canvas,
.broos-video-fallback {
  display: block;
  position: absolute;   /* fill the box; let aspect-ratio drive the height */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the fallback <video> is hidden on desktop (canvas drives the scrub) */
.broos-video-fallback {
  display: none;
}

.broos-scroll-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(234, 109, 38, .85);
  padding: 6px 16px;
  border-radius: 30px;
  pointer-events: none;
  animation: broosHintPulse 2.2s ease-in-out infinite;
}
@keyframes broosHintPulse {
  0%, 100% { opacity: .55; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(4px); }
}

/* ---------- WIDE SCREENS: let the about section fill the display ----------
   The template's .container is capped narrow, which leaves big empty margins
   on large monitors. We widen ONLY the about-area container (scoped — other
   sections keep their original width) and grow the video to match. */
@media (min-width: 1400px) {
  .rts-about-area .container { max-width: 1620px; }
  .rts-about-area .broos-video-stage { padding: 50px 20px; }
  .broos-video-tilt { max-width: 1040px; }
  .broos-blob--1 { width: 340px; height: 340px; }
  .broos-blob--2 { width: 430px; height: 430px; }
}
@media (min-width: 1900px) {
  .rts-about-area .container { max-width: min(1880px, 95vw); }
  .broos-video-tilt { max-width: 1220px; }
}

/* ============================================================
   "OUR FOOD MENU" — floating ingredient decorations
   Scattered around the section like the template's mushroom/leaf
   shapes. Behind the content, click-through, gently floating.
   ============================================================ */
.rts-menu-area.rts-section-gapTop { position: relative; }
.rts-menu-area.rts-section-gapTop > .container { position: relative; z-index: 2; }

.broos-ingredients {
  position: absolute;
  inset: 0;
  overflow: hidden;        /* keep pieces inside the section, no page scroll */
  pointer-events: none;
  z-index: 1;              /* behind the menu content (container = z-index 2) */
}
.broos-ing {
  position: absolute;
  width: 110px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18));
  will-change: transform;
  transform: rotate(var(--rot, 0deg));
}

/* gentle float variants (mirrors the template's jump-* idea, with rotation) */
@keyframes broosFloatA {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-26px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes broosFloatB {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(24px) rotate(calc(var(--rot, 0deg) - 6deg)); }
}
@keyframes broosFloatC {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(18px, -18px) rotate(calc(var(--rot, 0deg) + 8deg)); }
}

/* tidy, symmetric layout: 3 evenly-spaced items per side (mirrored, same
   size & margins) + the döner accent inside the circled spot on the right. */
.broos-ing { width: 112px; }   /* unified base size */

/* ---- left side (evenly spaced) ---- */
.bi-ekmek   { top: 18%; left: 4%;  --rot: -7deg; animation: broosFloatA 9s    ease-in-out infinite; }
.bi-domates { top: 45%; left: 4%;  --rot: 5deg;  animation: broosFloatC 8s    ease-in-out infinite .6s; }
.bi-patates { top: 72%; left: 4%;  --rot: 5deg;  animation: broosFloatB 11s   ease-in-out infinite .9s; }
/* ---- right side (mirrors the left at the same heights) ---- */
.bi-marul   { top: 18%; right: 4%; --rot: 7deg;  animation: broosFloatB 9.5s  ease-in-out infinite .2s; }
.bi-sogan   { top: 45%; right: 4%; --rot: -5deg; animation: broosFloatA 8.5s  ease-in-out infinite .7s; }
.bi-etdoner { top: 72%; right: 4%; --rot: 6deg;  animation: broosFloatC 10.5s ease-in-out infinite .4s; }
/* ---- döner accent: mirrors the mushroom — to the RIGHT of the title, same level ---- */
.bi-tavuk   { top: 14%; right: 20%; width: 130px; --rot: -6deg; animation: broosFloatB 10s ease-in-out infinite .35s; }

/* shrink a touch on mid screens, hide on phones (matches template shapes) */
@media (max-width: 1200px) {
  .broos-ing { width: 92px !important; }
  .bi-domates, .bi-sogan { width: 80px !important; }
}
@media (max-width: 768px) {
  .broos-ingredients { display: none; }
}

/* ============================================================
   "FIND FOOD LOUNGE" — brand video (left) + photo (right)
   ============================================================ */
/* text header centered at the top */
.rts-contact-area .broos-lounge-head { margin-bottom: 30px; }

/* video + photo: same 16:9 box so they sit perfectly side by side */
.rts-contact-area .broos-dunya-video {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .4), 0 0 0 5px rgba(234, 109, 38, .12);
}
.rts-contact-area .broos-dunya-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rts-contact-area .right-side-image img {
  border-radius: 20px;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
@media (max-width: 991px) {
  .rts-contact-area .right-side-image { margin-top: 24px; }  /* stacked: gap between video & photo */
}

/* ---------- MOBILE FALLBACK (no scroll-scrub) ---------- */
@media (max-width: 768px) {
  .broos-video-tilt {
    transform: none !important;   /* never apply the 3D scrub transform */
    aspect-ratio: 16 / 9;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45), 0 0 0 5px rgba(234,109,38,.12);
  }
  .broos-canvas { display: none; }          /* drop the canvas */
  .broos-video-fallback { display: block; } /* show plain autoplay-loop video */
  .broos-scroll-hint { display: none; }
  .broos-blob--1 { width: 140px; height: 140px; }
  .broos-blob--2 { width: 170px; height: 170px; }
}