/* ═══════════════════════════════════════════════════════
   GALLEON KUZGUNCUK — Ammolite-Style Design System
   Reference: ammolite-restaurant.de/en/
   Palette: #03130f (main bg), #112d25 (secondary), 
            #1d5e44 (button green), #35966f (accent)
   ═══════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  /* Colors — exact Ammolite palette (Deeper dark mode) */
  --bg:            #020b09;   /* almost black with green tint */
  --bg-mid:        #04120e;   /* slightly lighter */
  --bg-section:    #061a15;   /* section background */
  --bg-green:      #0e271f;   /* secondary green */
  --btn-green:     #1d5e44;   /* reserve button */
  --accent:        #35966f;   /* lighter green accent/hover */

  --white:         #ffffff;
  --white-75:      rgba(255, 255, 255, 0.75);
  --white-50:      rgba(255, 255, 255, 0.5);
  --white-30:      rgba(255, 255, 255, 0.3);
  --white-12:      rgba(255, 255, 255, 0.12);
  --white-08:      rgba(255, 255, 255, 0.08);

  --rule:          rgba(255, 255, 255, 0.1);

  /* Typography — Cormorant Garamond for deep luxury, Montserrat for clean minimalist UI */
  --ff-display:  'Cormorant Garamond', 'Playfair Display', 'Bodoni Moda', serif;
  --ff-ui:       'Montserrat', 'Inter', system-ui, sans-serif;

  /* Spacing */
  --nav-h:         112px;
  --nav-h-mobile:  64px;
  --section-pad:   clamp(80px, 10vw, 140px);
  --container-w:   1320px;
  --px:            clamp(24px, 4vw, 80px);

  /* Easing */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.5, 0, 0.5, 1);

  /* Grain */
  --grain-opacity: 0.045;
}


/* ─── Reset ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}


/* ─── Section helpers ─── */
.section-eyebrow {
  font-family: var(--ff-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-50);
  display: block;
  margin-bottom: 24px;
}
.section-eyebrow--accent {
  color: var(--accent);
}

.section-heading {
  font-family: var(--ff-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 0;
}
.section-heading em {
  font-style: italic;
  font-weight: 400;
}
.section-heading--xl {
  font-size: clamp(52px, 7vw, 96px);
}

.section-rule {
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 28px 0;
}
.section-rule--center {
  margin-left: auto;
  margin-right: auto;
}

.section-body {
  font-family: var(--ff-ui);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-75);
  max-width: 46ch;
}
.section-body--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px 40px;
  margin-top: 8px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}
.section-link:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
.section-link--outline {
  font-weight: 300;
}


/* ─── Reveal Animations ─── */
.reveal-up,
.reveal-fade,
.reveal-image {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-fade {
  transform: translateY(12px);
  transition-duration: 0.8s;
}
.reveal-image {
  transform: translateY(20px);
  transition-duration: 1.2s;
}
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-image.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-fade, .reveal-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════
   HEADER — Exact Ammolite structure
   ═══════════════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.5s ease, height 0.4s ease;
}

.header.scrolled {
  background: rgba(3, 19, 15, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--rule);
  height: 72px;
}

.header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--px);
  gap: 40px;
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  transition: opacity 0.3s;
}
.header__logo:hover {
  opacity: 0.75;
}
.header__logo-icon {
  width: 44px;
  height: 44px;
  color: var(--white);
  flex-shrink: 0;
}
.header__logo-wordmark {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--white);
  white-space: nowrap;
}

/* Nav links */
.header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: auto;
}
.header__nav-link {
  font-family: var(--ff-ui);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--white);
  transition: color 0.3s, opacity 0.3s;
  white-space: nowrap;
  position: relative;
  opacity: 0.8;
}
.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--white);
  transition: right 0.4s var(--ease);
}
.header__nav-link:hover {
  opacity: 1;
}
.header__nav-link:hover::after {
  right: 0;
}

/* Actions: Reserve + Lang */
.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Reserve button — Ammolite ghost bordered */
.header__reserve {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 14px 32px;
  transition: all 0.6s var(--ease);
}
.header__reserve:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
.header__reserve-icon {
  width: 16px;
  height: 16px;
  color: var(--white);
  flex-shrink: 0;
}

/* Language */
.header__lang {
  font-family: var(--ff-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--white-50);
  cursor: pointer;
  transition: color 0.3s;
}
.header__lang:hover {
  color: var(--white);
}

/* Burger */
.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin-left: auto;
}
.header__burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--white);
  transition: all 0.3s var(--ease);
}

/* Mobile Nav */
.header__mobile-nav {
  display: none;
  flex-direction: column;
  background: rgba(3, 19, 15, 0.97);
  border-top: 1px solid var(--rule);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.header__mobile-nav.open {
  max-height: 420px;
}
.header__mobile-link {
  display: block;
  font-family: var(--ff-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--white-75);
  padding: 18px var(--px);
  border-bottom: 1px solid var(--rule);
  transition: color 0.3s;
}
.header__mobile-link:hover {
  color: var(--white);
}


/* ═══════════════════════════════════════════════════════
   HERO — Full-screen, centered content (Ammolite style)
   ═══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.hero__bg-img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center center;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(3, 19, 15, 0.5) 0%,
    rgba(3, 19, 15, 0.25) 30%,
    rgba(3, 19, 15, 0.5) 65%,
    rgba(3, 19, 15, 0.85) 100%
  );
}

/* Content: centered like Ammolite */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 100svh;
  padding: var(--nav-h) var(--px) 80px;
}

.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Large spiral logo mark */
.hero__emblem {
  width: 80px;
  height: 80px;
  color: var(--white);
  opacity: 0.8;
  margin-bottom: -16px;
  animation: emblemFade 2s ease forwards;
}
@keyframes emblemFade {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Wordmark — lowercase thin serif like ammolite */
.hero__wordmark {
  font-family: var(--ff-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--white);
  line-height: 1;
  animation: wordmarkFade 2s 0.2s ease both;
}
@keyframes wordmarkFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tagline — uppercase small tracking */
.hero__tagline {
  font-family: var(--ff-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-50);
  animation: wordmarkFade 2s 0.4s ease both;
}

/* Stars (like Michelin stars) */
.hero__stars {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  animation: wordmarkFade 2s 0.6s ease both;
}
.hero__stars svg {
  width: 18px;
  height: 18px;
  color: var(--white-50);
}

/* Scroll indicator — bottom center */
.hero__scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: wordmarkFade 2s 1s ease both;
}
.hero__scroll-text {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.20em;
  color: var(--white);
  margin-bottom: 16px;
}
/* The thin vertical line */
.hero__scroll-mouse {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-wheel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--white);
  animation: scrollLineDrop 2s ease-in-out infinite;
}
@keyframes scrollLineDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(350%); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════
   ATMOSPHERE SECTION — Text left, illustration right
   ═══════════════════════════════════════════════════════ */
.section--atmosphere {
  background: var(--bg);
  padding: var(--section-pad) var(--px);
  position: relative;
  overflow: hidden;
}

.atmosphere__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.atmosphere__text {
  display: flex;
  flex-direction: column;
}

.atmosphere__visual {
  position: relative;
  overflow: hidden;
}
.atmosphere__illustration {
  width: 100%;
  height: clamp(400px, 55vw, 680px);
  object-fit: cover;
  object-position: center;
  filter: brightness(0.65) contrast(1.1);
  opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════
   PREMIUM MENU BOARD (Ammolite Layout)
   ═══════════════════════════════════════════════════════ */
.section--menu-board {
  background: var(--bg-section);
  padding: clamp(80px, 12vw, 160px) var(--px);
}

.menu-board__inner {
  max-width: 860px; /* Optically pleasing width for fine dining lists */
  margin: 0 auto;
}

.menu-board__head {
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.menu-board__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 80px);
}

/* PARALLAX MENU OBJECTS */
.menu-obj {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.menu-obj--ring {
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  border: 1px solid rgba(255, 223, 180, 0.05);
  top: 5%;
  left: -200px;
}
.menu-obj--flare {
  width: 40vw;
  height: 40vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, rgba(255, 223, 180, 0.05) 0%, transparent 60%);
  top: 45%;
  right: -10vw;
  filter: blur(40px);
}
.menu-obj--sphere {
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.03), transparent 60%);
  bottom: 5%;
  left: 40%;
  box-shadow: inset 0 0 50px rgba(255,255,255,0.01);
}


.menu-board__course-title {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 48px);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #FFDFB4 0%, #aa8014 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 223, 180, 0.2);
}

.menu-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
.menu-item:last-child {
  margin-bottom: 0;
}

.menu-item__top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}

.menu-item__name {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.5vw, 26px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--white);
}

.menu-item__line {
  flex-grow: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  opacity: 0.7;
}

.menu-item__price {
  font-family: var(--ff-ui);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--white-75);
}
.menu-item__price::after {
  content: '₺';
  margin-left: 6px;
  font-size: 12px;
  color: var(--white-50);
}

.menu-item__desc {
  font-family: var(--ff-ui);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--white-50);
  max-width: 90%;
}


/* ═══════════════════════════════════════════════════════
   TEAM SECTION — Wide photo left, text right
   ═══════════════════════════════════════════════════════ */
.section--team {
  background: var(--bg);
  padding: var(--section-pad) var(--px);
}

.team__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

/* Partner Club Cards Container */
.team__cards {
  position: relative;
  width: 100%;
  height: clamp(400px, 45vw, 560px);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

/* Glass Card Base */
.glass-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(280px, 28vw, 380px);
  aspect-ratio: 1.586 / 1; /* Ultimate Credit Card Ratio */
  height: auto;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(20,20,20,0.4) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 
    0 40px 80px rgba(0,0,0,0.5), 
    inset 0 1px 1px rgba(255,255,255,0.2),
    inset 0 -1px 1px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 2.5vw, 32px);
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s var(--ease), border-color 0.4s var(--ease);
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Infinite Shimmer Background Overlay */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 40%);
  opacity: 0.3;
  animation: shimmerPulse 5s infinite alternate ease-in-out;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes shimmerPulse {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.05); }
}

/* Linear Specular Sweep (Glint) */
.glass-card::after {
  content: '';
  position: absolute;
  top: 0; left: -150%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-20deg);
  animation: cardGlint 8s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 20;
}

@keyframes cardGlint {
  0%   { left: -100%; opacity: 0; }
  10%  { opacity: 1; }
  25%  { left: 200%; opacity: 0; }
  100% { left: 200%; opacity: 0; }
}

.glass-card:hover {
  border-color: rgba(255,255,255,0.3);
}

/* Base stack positions (only top one is visible, perfectly aligned) */
.glass-card--1 {
  z-index: 10;
  transform: translate(-50%, -50%) translateZ(20px);
  opacity: 1;
  background: linear-gradient(135deg, rgba(25, 30, 25, 0.6) 0%, rgba(5, 5, 5, 0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
}

.glass-card--2 {
  z-index: 5;
  background: linear-gradient(135deg, rgba(53, 150, 111, 0.3) 0%, rgba(10, 30, 20, 0.8) 100%);
  border: 1px solid rgba(53, 150, 111, 0.3);
  transform: translate(-50%, -50%) translateZ(10px);
  opacity: 0;
}

.glass-card--3 {
  z-index: 1;
  background: linear-gradient(135deg, rgba(160, 120, 60, 0.25) 0%, rgba(20, 15, 5, 0.8) 100%);
  border: 1px solid rgba(160, 120, 60, 0.3);
  transform: translate(-50%, -50%) translateZ(0px);
  opacity: 0;
}

/* Modern Hover Fanning Effects with 3D Depth */
.team__cards:hover .glass-card--1 {
  transform: translate(-60%, -70%) rotate(-6deg) rotateY(10deg) rotateX(5deg) scale(1.05) translateZ(50px);
  box-shadow: -15px 50px 80px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.2);
}

.team__cards:hover .glass-card--2 {
  transform: translate(-30%, -40%) rotate(8deg) rotateY(5deg) scale(0.95) translateZ(20px);
  opacity: 1;
  box-shadow: 15px 40px 60px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.2);
}

.team__cards:hover .glass-card--3 {
  transform: translate(-10%, -15%) rotate(18deg) rotateY(0deg) scale(0.85) translateZ(0px);
  opacity: 0.7;
  box-shadow: 25px 30px 50px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.15);
}

/* Card Internals */
.glass-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

/* Luxury EMV Chip Simulation */
.glass-card__chip {
  width: clamp(38px, 4.5vw, 46px);
  height: clamp(28px, 3.5vw, 34px);
  background: linear-gradient(135deg, #d4af37 0%, #aa8014 100%);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 5px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.glass-card__chip::before, .glass-card__chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.25);
}
.glass-card__chip::after {
  top: 0; left: 50%; width: 1px; height: 100%;
}

.glass-card__logo {
  font-family: var(--ff-display);
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--white-75);
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.glass-card__bottom {
  display: flex;
  flex-direction: column;
}

.glass-card__tier {
  font-family: var(--ff-ui);
  font-size: clamp(9px, 1vw, 10px);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--white-50);
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
  display: inline-block;
}

.glass-card__name {
  font-family: var(--ff-display);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.15em;
  color: var(--white);
  font-weight: 300;
}

.team__text {
  display: flex;
  flex-direction: column;
}


/* ═══════════════════════════════════════════════════════
   FULL BG SECTION — Atmosphere & Attitude
   ═══════════════════════════════════════════════════════ */
.section--full-bg {
  position: relative;
  min-height: 90vh; /* Taller for cinematic breathing room */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.full-bg__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.full-bg__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cinematic-zoom {
  animation: cinematicScale 25s linear infinite alternate;
}
@keyframes cinematicScale {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.full-bg__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2, 11, 9, 0.4),
    rgba(2, 11, 9, 0.8)
  );
}

.atmosphere-beams {
  bottom: -20%;
  height: 150vh;
  opacity: 0.15;
  filter: blur(40px);
  z-index: 0;
}

.full-bg__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: var(--section-pad) var(--px);
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Editorial Typography */
.section-heading--editorial {
  line-height: 1.1;
  margin-bottom: 24px;
}
.editorial-light {
  font-family: var(--ff-ui);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--white-75);
}
.editorial-italic {
  font-family: var(--ff-display);
  font-size: clamp(64px, 8vw, 120px);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #FFDFB4 0%, #aa8014 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transform: translateY(-10px);
}

.section-body--editorial {
  font-family: var(--ff-display);
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--white-75);
  line-height: 1.8;
  max-width: 600px;
  font-weight: 300;
  text-align: center;
}

/* Gold Outline Button */
.section-link--outline--gold {
  position: relative;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #FFDFB4;
  padding: 18px 48px;
  border: 1px solid rgba(255, 223, 180, 0.4);
  background: transparent;
  backdrop-filter: blur(10px);
  transition: all 0.4s var(--ease);
  overflow: hidden;
  display: inline-block;
}
.section-link--outline--gold:hover {
  background: rgba(255, 223, 180, 0.1);
  border-color: #FFDFB4;
  color: #fff;
}


/* ═══════════════════════════════════════════════════════
   CORPORATE SECTION
   ═══════════════════════════════════════════════════════ */
.section--corporate {
  background: var(--bg-section);
  padding: var(--section-pad) var(--px);
}

.corporate__inner {
  max-width: var(--container-w);
  margin: 0 auto;
}

.corporate__header {
  max-width: 600px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
}

.corporate__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.corporate__card {
  position: relative;
  padding: 48px 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  height: 100%;
}

.corporate__card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 223, 180, 0.3);
  transform: translateY(-8px);
}

.corporate__num {
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: var(--ff-display);
  font-size: 80px;
  font-weight: 300;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  pointer-events: none;
  transition: all 0.6s var(--ease);
}

.corporate__card:hover .corporate__num {
  transform: scale(1.05);
  background: linear-gradient(135deg, #FFDFB4 0%, #aa8014 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.8;
}

.corporate__card-content {
  position: relative;
  z-index: 2;
  margin-top: 54px;
}

.corporate__title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 12px;
}

.corporate__desc {
  font-family: var(--ff-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white-50);
}


/* ═══════════════════════════════════════════════════════
   RESERVATION SECTION
   ═══════════════════════════════════════════════════════ */
.section--reservation {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.reservation__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.reservation__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.reservation__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 19, 15, 0.78);
}

.reservation__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--section-pad) var(--px);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Main CTA button — Premium Ammolite ghost style */
.reserve-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(2, 11, 9, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 18px 48px;
  margin-top: 24px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reserve-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}
.reserve-cta__icon {
  width: 18px;
  height: 18px;
  color: var(--white);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   FOOTER — Ammolite Clean 3-Column Layout
   ═══════════════════════════════════════════════════════ */
.footer {
  background: var(--bg);
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  z-index: 2;
}

/* Volumetric Light Beams (Ammolite Style) */
.section__light-beams {
  position: absolute;
  bottom: -20%;
  left: 50%;
  width: 200vw;
  height: 200vh;
  transform: translateX(-50%);
  background: conic-gradient(
    from 180deg at 50% 100%, 
    transparent 0deg, 
    transparent 135deg, 
    rgba(255, 255, 255, 0.02) 145deg,
    transparent 150deg,
    rgba(255, 255, 255, 0.03) 160deg,
    rgba(53, 150, 111, 0.08) 175deg,
    rgba(255, 255, 255, 0.04) 180deg,
    rgba(53, 150, 111, 0.08) 185deg,
    rgba(255, 255, 255, 0.03) 200deg,
    transparent 210deg,
    rgba(255, 255, 255, 0.02) 215deg,
    transparent 225deg,
    transparent 360deg
  );
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
  animation: raySway 12s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes raySway {
  0% { transform: translateX(-50%) rotate(-4deg); opacity: 0.6; }
  100% { transform: translateX(-50%) rotate(4deg); opacity: 1; }
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--px);
  position: relative;
  z-index: 1;
}

/* Left column */
.footer__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 25%;
}
.footer__brand-title {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.footer__address {
  font-family: var(--ff-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-50);
  font-style: normal;
  letter-spacing: 0.02em;
}
.footer__address a {
  transition: color 0.3s;
}
.footer__address a:hover {
  color: var(--white);
}
.footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 300;
  color: var(--white-30);
  margin-top: 16px;
}
.footer__bottom-links span {
  margin-right: 12px;
}
.footer__bottom-links a {
  margin-right: 12px;
  transition: color 0.3s;
}
.footer__bottom-links a:hover {
  color: var(--white);
}

/* Center column */
.footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  gap: 16px;
}
.footer__huge-icon {
  width: 140px;
  height: 140px;
  color: var(--white-50);
}
.footer__huge-wordmark {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--white-75);
}

/* Right column */
.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
  width: 25%;
}
.footer__langs {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--white-50);
}
.footer__langs a {
  padding: 0 4px;
  transition: color 0.3s;
}
.footer__langs a.active,
.footer__langs a:hover {
  color: var(--white);
}
.footer__tagline {
  font-family: var(--ff-display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  text-align: right;
  color: var(--white-75);
}
.footer__tagline em {
  font-style: italic;
  font-weight: 400;
  color: var(--white);
}


/* ═══════════════════════════════════════════════════════
   FLOATING BUTTONS — Back to top (Ammolite style)
   ═══════════════════════════════════════════════════════ */
.floating-btn {
  position: fixed;
  right: 24px;
  z-index: 150;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-green);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, background 0.3s, transform 0.3s;
  cursor: pointer;
}
.floating-btn--top {
  bottom: 24px;
}
.floating-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.floating-btn:hover {
  background: var(--accent);
  color: var(--white);
  transform: translateY(-2px);
}
.floating-btn svg {
  width: 18px;
  height: 18px;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .corporate__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .corporate__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 960px) {
  :root { --nav-h: var(--nav-h-mobile); }

  .header__nav,
  .header__actions {
    display: none;
  }
  .header__burger {
    display: flex;
    margin-left: auto;
  }
  .header__mobile-nav {
    display: flex;
  }

  .atmosphere__inner,
  .team__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* On mobile, team image comes after text */
  .team__inner {
    direction: ltr;
  }



  .team__image img {
    height: clamp(280px, 55vw, 440px);
  }

  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 56px;
    text-align: center;
  }
  .footer__left {
    width: 100%;
    align-items: center;
  }
  .footer__bottom-links {
    justify-content: center;
  }
  .footer__right {
    width: 100%;
    align-items: center;
  }
  .footer__tagline {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero__wordmark {
    font-size: clamp(28px, 10vw, 44px);
  }

  .footer__huge-icon {
    width: 100px;
    height: 100px;
  }
  .footer__huge-wordmark {
    font-size: 24px;
  }
  .footer__tagline {
    font-size: 28px;
  }

  .corporate__grid {
    grid-template-columns: 1fr;
  }
  .corporate__item:nth-child(odd) {
    border-right: none !important;
    padding-right: 0 !important;
  }
  .corporate__item:nth-child(even) {
    padding-left: 0 !important;
  }

  .section-heading {
    font-size: clamp(38px, 10vw, 56px);
  }
  .section-heading--xl {
    font-size: clamp(44px, 12vw, 68px);
  }
}


/* ═══════════════════════════════════════════════════════
   GRAIN / NOISE OVERLAY  (Ammolite film-texture)
   ═══════════════════════════════════════════════════════ */

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%,  2%); }
  30%  { transform: translate(-1%,  4%); }
  40%  { transform: translate(4%, -1%); }
  50%  { transform: translate(-3%,  3%); }
  60%  { transform: translate(2%, -4%); }
  70%  { transform: translate(-4%,  1%); }
  80%  { transform: translate(3%,  3%); }
  90%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

.grain-overlay {
  position: fixed;
  inset: -20%;
  width: 140%;
  height: 140%;
  pointer-events: none;
  z-index: 900;
  opacity: var(--grain-opacity, 0.045);
  animation: grainShift 0.8s steps(1) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════
   FLOATING SPARKLES / LIGHT PARTICLES
   ═══════════════════════════════════════════════════════ */

@keyframes sparklePulse {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  30%  { opacity: 1; }
  70%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-60px) scale(0); }
}
@keyframes sparkleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  20%  { opacity: 0.9; transform: translateY(-20px) scale(1); }
  80%  { opacity: 0.3; transform: translateY(-80px) scale(0.6); }
  100% { opacity: 0; transform: translateY(-120px) scale(0); }
}

.sparkle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  opacity: 0;
  filter: blur(0.5px);
}
.sparkle::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%);
}
.sparkle:nth-child(1)  { left: 12%; top: 35%; animation: sparklePulse 4s   0.2s  infinite; }
.sparkle:nth-child(2)  { left: 22%; top: 55%; animation: sparkleFloat 5s   1.1s  infinite; }
.sparkle:nth-child(3)  { left: 35%; top: 28%; animation: sparklePulse 3.5s 0.8s  infinite; }
.sparkle:nth-child(4)  { left: 48%; top: 68%; animation: sparkleFloat 4.5s 0.3s  infinite; }
.sparkle:nth-child(5)  { left: 58%; top: 42%; animation: sparklePulse 6s   1.5s  infinite; }
.sparkle:nth-child(6)  { left: 72%; top: 25%; animation: sparkleFloat 4s   0.6s  infinite; }
.sparkle:nth-child(7)  { left: 82%; top: 60%; animation: sparklePulse 5s   2s    infinite; }
.sparkle:nth-child(8)  { left: 90%; top: 38%; animation: sparkleFloat 3.8s 1.3s  infinite; }
.sparkle:nth-child(9)  { left: 8%;  top: 72%; animation: sparklePulse 4.2s 0.9s  infinite; }
.sparkle:nth-child(10) { left: 65%; top: 78%; animation: sparkleFloat 5.5s 0.5s  infinite; }
.sparkle:nth-child(11) { left: 42%; top: 48%; width: 3px; height: 3px; animation: sparklePulse 3s 1.7s infinite; }
.sparkle:nth-child(12) { left: 28%; top: 82%; animation: sparkleFloat 4.7s 2.2s  infinite; }

/* ═══════════════════════════════════════════════════════
   BUTTON SHIMMER  (Ammolite sweep-light on hover)
   ═══════════════════════════════════════════════════════ */

@keyframes button-shimmer {
  0%   { transform: translateX(-100%) skew(-15deg); opacity: 0; }
  10%  { opacity: 0.05; }
  55%  { opacity: 0.45; }
  100% { transform: translateX(300%) skew(-15deg); opacity: 0; }
}

.header__reserve { overflow: hidden; }
.header__reserve::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%) skew(-15deg);
  opacity: 0;
  pointer-events: none;
}
.header__reserve:hover::after  { animation: button-shimmer 0.75s ease forwards; }

.reserve-cta { overflow: hidden; }
.reserve-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%) skew(-15deg);
  opacity: 0;
  pointer-events: none;
}
.reserve-cta:hover::after { animation: button-shimmer 0.75s ease forwards; }

/* ═══════════════════════════════════════════════════════
   PARALLAX HELPERS
   ═══════════════════════════════════════════════════════ */

.parallax-wrap {
  overflow: hidden;
  position: relative;
}
.parallax-img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform-origin: center top;
}

/* ═══════════════════════════════════════════════════════
   HERO SLOW LIGHT SWEEP
   ═══════════════════════════════════════════════════════ */

@keyframes lightBeam {
  0%   { opacity: 0; transform: rotate(-20deg) translateX(-200%); }
  30%  { opacity: 1; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; transform: rotate(-20deg) translateX(500%); }
}

.hero__light-beam {
  position: absolute;
  top: -50%;
  left: -10%;
  width: 180px;
  height: 250%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.035), transparent);
  animation: lightBeam 10s 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .grain-overlay,
  .sparkle,
  .hero__light-beam {
    animation: none !important;
    opacity: 0 !important;
  }
  .parallax-img { height: 100%; }
}


/* ═══════════════════════════════════════════════════════
   VIDEO BACKGROUNDS — Hero & Full-BG sections
   ═══════════════════════════════════════════════════════ */

/* Hero video */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
}
.hero__bg-video.is-loaded {
  opacity: 1;
}

/* Video değişiminde hafif fade-out/in */
.hero__bg-video {
  transition: opacity 0.8s ease;
}

/* Full-bg section video */
.full-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.full-bg__video.is-loaded {
  opacity: 1;
}
.full-bg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transition: opacity 1.4s ease 0.3s;
}
.full-bg__video.is-loaded ~ .full-bg__img {
  opacity: 0;
}

/* Video cross-fade transition between sections via clip-path wipe */
@keyframes videoWipeIn {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.video-wipe-enter {
  animation: videoWipeIn 1.4s var(--ease) forwards;
}


/* ═══════════════════════════════════════════════════════
   RELLAX.JS PARALLAX — real translate3d parallax
   Overrides/disables our CSS-only parallax helpers
   ═══════════════════════════════════════════════════════ */

/* Elements managed by Rellax get will-change for GPU layer */
[data-rellax-speed] {
  will-change: transform;
}

/* Hero background: overflow clip so parallax movement stays inside viewport */
.hero__bg {
  overflow: hidden;
}
#hero-parallax {
  position: absolute;
  inset: 0;
  /* Rellax will apply transform — give extra height to prevent gap */
  height: 130%;
  top: -15%;
}
#hero-parallax img,
#hero-parallax video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section image parallax: overflow clip per container */
.menu__image-wrap,
.team__image,
.atmosphere__visual {
  overflow: hidden;
}

/* Montserrat letter-spacing adjustments for UI text (geometric elegance) */
.section-eyebrow,
.header__nav-link,
.header__reserve,
.hero__tagline,
.hero__scroll-text,
.footer__col-head,
.section-link,
.reserve-cta,
.corporate__num {
  font-family: var(--ff-ui);
  letter-spacing: 0.16em; /* Slightly wider for luxury UI feeling */
}

/* Cormorant Garamond display tracking adjustment */
.section-heading,
.hero__wordmark,
.footer__wordmark,
.corporate__title {
  letter-spacing: -0.01em; /* elegant tight serif spacing */
  line-height: 1.1;
}

/* Cormorant Garamond italic looks stunning, ensure it uses standard weight */
.section-heading em,
.hero__wordmark em,
.footer__tagline em {
  font-style: italic;
  font-weight: 300;
}


/* ═══════════════════════════════════════════════════════
   3D GEMİ ÇARKI — Scroll-driven wireframe object
   Ammolite deniz feneri efektinden ilham
   ═══════════════════════════════════════════════════════ */

.hero__3d-object {
  position: absolute;
  /* Sağ tarafta, dikey orta */
  right: -6vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(320px, 36vw, 580px);
  height: clamp(320px, 36vw, 580px);
  z-index: 3;
  pointer-events: none;

  /* Scroll ile fade-in */
  opacity: 0;
  animation: galleon3dReveal 1.8s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

  /* Subtle glow halo */
  filter: drop-shadow(0 0 40px rgba(53, 150, 111, 0.12));
}

@keyframes galleon3dReveal {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 30px)) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
  }
}

/* Canvas element içinde tam dolu */
.hero__3d-object canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Mobil: küçük ve yukarı taşı */
@media (max-width: 960px) {
  .hero__3d-object {
    right: -10vw;
    width: clamp(200px, 55vw, 320px);
    height: clamp(200px, 55vw, 320px);
    top: 60%;
    opacity: 0.5;
  }
}

@media (max-width: 640px) {
  .hero__3d-object {
    display: none; /* Küçük ekranlarda gizle */
  }
}

/* ═══════════════════════════════════════════════════════
   AMMOLITE VIGNETTE (Atmospheric Edge Darkening)
   ═══════════════════════════════════════════════════════ */
.vignette-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(circle, transparent 40%, rgba(2, 11, 9, 0.75) 100%);
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════════
   FLOATING ELEMENTS (Ammolite UI)
   ═══════════════════════════════════════════════════════ */
.floating-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all 0.3s var(--ease);
  z-index: 150;
  cursor: pointer;
}
.floating-btn svg {
  width: 20px;
  height: 20px;
}
.floating-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.floating-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

.floating-btn--left {
  position: fixed;
  bottom: 40px;
  left: var(--px);
}

.floating-controls-right {
  position: fixed;
  bottom: 40px;
  right: var(--px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 150;
}

/* Hide back to top by default */
#back-to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
#back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════
   SETMORE BOOKING WIDGET EMBED
   Dark glass container matching Ammolite luxury aesthetic
   ═══════════════════════════════════════════════════════ */

.setmore-embed {
  width: 100%;
  max-width: 900px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(4, 18, 14, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.setmore-embed:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 60px 140px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Simulated browser chrome — URL bar style */
.setmore-embed__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Three macOS-style dots */
.setmore-embed__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.setmore-embed__dot:nth-child(1) { background: #ff5f57; opacity: 0.7; }
.setmore-embed__dot:nth-child(2) { background: #febc2e; opacity: 0.7; }
.setmore-embed__dot:nth-child(3) { background: #28c840; opacity: 0.7; }

.setmore-embed__label {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--white-30);
  margin-left: 8px;
  user-select: none;
}

/* The iframe itself */
.setmore-embed__frame {
  display: block;
  width: 100%;
  min-height: 620px;
  border: none;
  background: transparent;
}

/* Reservation section action row below iframe */
.reservation__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
}

.reservation__note {
  font-family: var(--ff-ui);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.10em;
  color: var(--white-30);
}

.reservation__tel-link {
  color: var(--white-50);
  text-decoration: none;
  transition: color 0.3s;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 1px;
}
.reservation__tel-link:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}

/* Mobile tweaks for Setmore embed */
@media (max-width: 768px) {
  .setmore-embed {
    border-radius: 12px;
  }
  .setmore-embed__frame {
    min-height: 520px;
  }
}