/* ==========================================================================
   ALMER ÇİÇEK — Premium Florist Brand
   Design system: luxury, emotional, editorial. Black/cream canvas,
   magenta (#E10490) as the single accent that carries meaning.
   ========================================================================== */

:root{
  --pink: #E10490;
  --pink-rgb: 225,4,144;
  --pink-soft: #F472B6;
  --pink-deep: #9c0364;
  --ink: #231815;
  --ink-rgb: 35,24,21;
  --ink-soft: #5b4a44;
  --cream: #FFF8FB;
  --cream-deep: #F7EEF3;
  --gold: #C8A969;
  --line: rgba(35,24,21,0.1);
  --line-light: rgba(255,248,251,0.18);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 6px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
/* Horizontal clip on BOTH the root and body. body.overflow-x does not clip
   position:fixed descendants (they resolve against the viewport, not body),
   so the closed slide-in .mobile-drawer — which sits one viewport-width off to
   the right by design — could extend the scroll area on some mobile engines.
   Clipping the root as well neutralises that in every browser. */
html{scroll-behavior:auto;overflow-x:hidden;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Belt-and-suspenders: never allow a stray wide child to widen the page. */
  max-width:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.1;letter-spacing:-0.01em;}
p{margin:0;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Lenis smooth-scroll housekeeping */
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--pink);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:28px;height:1px;
  background:var(--pink);
  display:inline-block;
}
.display-1{font-size:clamp(44px,8vw,108px);}
.display-2{font-size:clamp(36px,5.2vw,68px);}
.display-3{font-size:clamp(28px,3.4vw,42px);}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);max-width:54ch;}

.text-cream{color:var(--cream);}
.text-pink{color:var(--pink);}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:18px 38px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
  white-space:nowrap;
}
.btn span{position:relative;z-index:2;transition:color .45s var(--ease);}
.btn::before{
  content:'';
  position:absolute;inset:0;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
  z-index:1;
}
.btn:hover::before{transform:translateY(0);}
.btn:hover span{color:var(--cream);}
.btn-primary{background:var(--ink);border-color:var(--ink);}
.btn-primary span{color:var(--cream);}
.btn-primary::before{background:var(--pink);}
.btn-primary:hover span{color:var(--cream);}
.btn-light{border-color:var(--line-light);color:var(--cream);}
.btn-light::before{background:var(--pink);}
.btn-light:hover span{color:var(--cream);}
.btn-pink{background:var(--pink);border-color:var(--pink);}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-outline::before{background:var(--pink);}
.btn-outline:hover{border-color:var(--pink);}
.btn-sm{padding:12px 22px;font-size:11.5px;}
.btn-pink span{color:var(--cream);}
.btn-pink::before{background:var(--ink);}

.btn-icon{
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn-icon:hover{background:var(--pink);border-color:var(--pink);color:var(--cream);transform:translateY(-3px);}

/* ---------- Header ----------
   Single permanent style: a translucent cream/blurred backdrop with dark
   ink text. This guarantees readable contrast no matter what section
   (light hero, dark hero, dark page-hero) sits underneath — no fragile
   light/dark theme toggle needed. */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:200;
  padding:18px 0;
  background:rgba(250,246,242,0.92);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(26,19,16,0.06);
  transition:padding .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-header.is-scrolled{
  background:rgba(250,246,242,0.98);
  padding:12px 0;
  box-shadow:0 6px 24px rgba(26,19,16,0.08);
}
.logo{height:48px;width:auto;max-width:200px;display:block;transition:height .4s var(--ease);}
.site-header.is-scrolled .logo{height:40px;}
/* Homepage only: header logo 2x larger (raise max-width so wide logo isn't clipped/distorted) */
.home .logo{height:96px;max-width:400px;}
.home .site-header.is-scrolled .logo{height:80px;}

.main-nav{display:flex;align-items:center;gap:32px;}
.main-nav ul{display:flex;gap:28px;}
.main-nav a{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--ink);
  position:relative;padding-bottom:6px;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--pink);
  transition:width .35s var(--ease);
}
.main-nav a:hover::after,.main-nav a.is-active::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:14px;}
.header-actions .btn{padding:13px 26px;}

.nav-toggle{
  display:none;width:46px;height:46px;border-radius:50%;
  align-items:center;justify-content:center;border:1px solid var(--line);
  position:relative;z-index:300;flex-shrink:0;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;width:18px;height:1.4px;background:var(--ink);transition:.3s var(--ease);
}
.nav-toggle span::before{transform:translateY(-6px);}
.nav-toggle span::after{transform:translateY(6px);}

/* Mobile nav drawer */
.mobile-drawer{
  position:fixed;inset:0;background:var(--ink);
  z-index:600;
  display:flex;flex-direction:column;
  padding:max(22px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .5s var(--ease), visibility .5s var(--ease);
  pointer-events:none;
  overflow-y:auto;
}
body.nav-open .mobile-drawer{transform:translateX(0);visibility:visible;pointer-events:auto;}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.mobile-drawer-logo-chip{display:inline-flex;align-items:center;background:var(--cream);padding:8px 14px;border-radius:10px;}
.mobile-drawer-logo{height:30px;width:auto;max-width:46vw;display:block;}
.nav-close{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(250,246,242,.25);background:transparent;position:relative;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav-close:hover{border-color:var(--pink);background:rgba(225,4,144,.12);}
.nav-close span,.nav-close span::before,.nav-close span::after{
  content:'';position:absolute;width:18px;height:1.4px;background:var(--cream);
}
.nav-close span{background:transparent;}
.nav-close span::before{transform:rotate(45deg);}
.nav-close span::after{transform:rotate(-45deg);}
.mobile-drawer-links{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;
  margin:0;padding:0;
}
.mobile-drawer-links li{border-bottom:1px solid rgba(250,246,242,.1);}
.mobile-drawer-links li:first-child{border-top:1px solid rgba(250,246,242,.1);}
.mobile-drawer-links a{
  display:block;padding:18px 4px;
  font-family:var(--font-display);font-size:clamp(22px,6vw,28px);font-weight:600;
  color:var(--cream);letter-spacing:.01em;
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.mobile-drawer-links a:hover,.mobile-drawer-links a:active{color:var(--pink-soft);padding-left:10px;}
.mobile-drawer-foot{
  flex-shrink:0;display:flex;flex-direction:column;gap:12px;
  margin-top:28px;padding-top:24px;border-top:1px solid rgba(250,246,242,.1);
}
.mobile-drawer-foot .btn{width:100%;justify-content:center;box-sizing:border-box;}
.mobile-drawer-foot .btn-outline{border-color:rgba(250,246,242,.3);color:var(--cream);}
.mobile-drawer-foot .btn-outline:hover{border-color:var(--pink);}
body.nav-open{overflow:hidden;}

/* ---------- Hero ---------- */
/* Hero — light, floral, structurally safe (no absolute-positioned
   elements that can overlap; stats sit in normal flow under the CTA). */
.hero{
  position:relative;
  padding:152px 0 70px;
  display:flex;align-items:center;
  background:
    radial-gradient(circle at 88% 8%, rgba(var(--pink-rgb),0.16), transparent 50%),
    radial-gradient(circle at 8% 92%, rgba(var(--pink-rgb),0.10), transparent 55%);
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-image:url("../img/hero/hero-vehicle-scene.jpg");
  background-repeat:no-repeat;
  /* Controlled size (not "cover") so the whole vehicle + circular arrangement stay
     visible at a balanced scale, anchored bottom-right with breathing room on top/left. */
  background-size:auto 88%;
  background-position:right bottom;
}
/* Very subtle light blush gradient on the left so the headline / description / CTA
   stay readable over the negative space. Lightens only — never darkens — and fades
   fully out before the vehicle on the right, so the truck is never dimmed. */
.hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,250,247,0.80) 0%,
    rgba(255,250,247,0.48) 26%,
    rgba(255,250,247,0) 52%);
}
/* Hero ambient petals (canvas). Explicit width/height because initPetals sizes
   the bitmap from offsetWidth/offsetHeight. Stacking inside .cinematic-hero:
   poster 0 < petals 1 < scrim 2 < copy 3 — so petals always drift ABOVE the
   photo and never over the headline, paragraph or buttons. */
.hero-petals{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:1;
  pointer-events:none;
}

/* ---------- Sitewide ambient petals ----------
   Fixed full-viewport, lowest stacking layer of the page: paints above the
   plain cream body background but every section/header/footer below sits
   on top of it because they each carry an opaque or explicit background,
   so petals are only ever visible through the "open" cream sections — they
   can never cover text, buttons or images since real content always paints
   on top of its own section's background. */
.site-petals{
  position:fixed;inset:0;
  /* 100% (not 100vw) so the vertical scrollbar width never pushes this past the
     viewport edge and creates horizontal overflow. */
  width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
}

.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr 0.95fr;gap:50px;align-items:center;}
.hero-content .eyebrow{margin-bottom:24px;}
.hero-title{font-size:clamp(40px,6.4vw,86px);line-height:1.08;letter-spacing:-0.01em;color:var(--ink);font-weight:700;}
.hero-title em{font-style:normal;color:var(--pink);}
.hero-sub{margin-top:26px;max-width:48ch;color:var(--ink-soft);font-size:clamp(16px,1.4vw,18px);}
.hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

.hero-stats-row{
  margin-top:50px;padding-top:36px;border-top:1px solid var(--line);
  display:flex;gap:42px;flex-wrap:wrap;
  color:var(--ink-soft);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.hero-stats-row .stat-num{font-family:var(--font-display);font-size:30px;color:var(--ink);display:block;line-height:1.2;}

.hero-visual{position:relative;width:100%;margin:0 auto;}
.hero-visual .glow{
  position:absolute;inset:-6%;border-radius:24px;
  background:radial-gradient(circle, rgba(var(--pink-rgb),0.16), transparent 70%);
  z-index:0;filter:blur(18px);
}
.hero-visual .hero-slider{position:relative;z-index:1;width:100%;height:100%;}

/* ---------- Cinematic scroll-triggered hero ----------
   Full-viewport hero. Poster <img> and <video> are stacked in the same box,
   both object-fit:cover. The poster paints first (z0); the video sits on top
   (z1) but transparent until the intro plays, so on error/reduced-motion the
   poster simply stays visible. JS toggles .is-playing / .has-ended and locks
   the body with .is-cinematic-locked. */
.cinematic-hero{
  min-height:100vh;
  min-height:100svh;
  padding:140px 0 96px;
  display:flex;
  align-items:center;
  background:#f6e7ee; /* soft blush behind the media while it loads */
}
.cinematic-hero__poster,
.cinematic-hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* Bias toward the right so the vehicle + bouquet + sign are never clipped
     when the viewport is narrower/taller than the image; the left plain
     floral area has room to spare for the text. */
  object-position:72% center;
  pointer-events:none;
  user-select:none;
}
.cinematic-hero__poster{z-index:0;}
.cinematic-hero__video{
  z-index:1;opacity:0;
  transition:opacity .85s var(--ease-soft);
  will-change:opacity;
}
/* Video is only visible while it plays; on end (or skip) it fades back out
   so the hero settles onto the crisp, legible poster + restored content. */
.cinematic-hero.is-playing .cinematic-hero__video{opacity:1;}
.cinematic-hero.has-ended .cinematic-hero__video{opacity:0;}

/* --- Per-viewport video selection --------------------------------------
   Two independent <video> elements ship in the DOM. Only the one matching
   the viewport is rendered; the other is display:none, so the browser never
   fetches or decodes it and there is no mid-scroll source swap. JS plays
   whichever one is currently visible. */
.cinematic-hero__video--desktop{display:block;}
.cinematic-hero__video--mobile{display:none;}
@media (max-width:900px) and (orientation:portrait){
  .cinematic-hero__video--desktop{display:none;}
  .cinematic-hero__video--mobile{display:block;}
}

/* Readability wash: lightens the left text column only and fades to fully
   transparent before the vehicle on the right. Only ever lightens. */
.cinematic-hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,250,247,.86) 0%,
    rgba(255,250,247,.52) 26%,
    rgba(255,250,247,0) 54%);
  transition:opacity .6s var(--ease-soft);
}
/* The wash only serves the static poster + restored content. While the video
   plays there is no text to protect, so it fades away for a clean, cinematic
   frame — then returns when the hero settles back onto the poster. */
.cinematic-hero.is-playing .cinematic-hero__scrim{opacity:0;}

.cinematic-hero__content{
  position:relative;z-index:3;
  max-width:520px;
  text-align:left;
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
  will-change:opacity, transform;
}
.cinematic-hero__content.is-hidden{
  opacity:0;transform:translateY(-10px);
  pointer-events:none;
}
/* A whisper of light text-shadow keeps the headline crisp over bright media,
   without any heavy dark overlay. */
.cinematic-hero .hero-title,
.cinematic-hero .hero-sub{text-shadow:0 1px 2px rgba(255,250,247,.6);}

/* Scroll cue — a soft, bouncing chevron inviting the first scroll. */
.cinematic-hero__cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  opacity:.8;transition:opacity .5s var(--ease-soft);
}
.cinematic-hero__cue-arrow{
  width:20px;height:20px;
  border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(45deg);
  animation:cinematic-cue 1.8s var(--ease-soft) infinite;
}
@keyframes cinematic-cue{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.55;}
  50%{transform:rotate(45deg) translate(4px,4px);opacity:1;}
}
/* Hide the cue while the cinematic video is playing. */
.cinematic-hero.is-playing .cinematic-hero__cue{opacity:0;pointer-events:none;}

/* Locked body during the intro: block native + touch scrolling. Lenis is
   paused separately from JS. */
body.is-cinematic-locked{overflow:hidden;touch-action:none;}

/* Desktop: pin the hero copy toward the left ~8% of the viewport (over the
   soft pink negative space) with a controlled width, so it never crowds the
   bouquet on the right. The container is opened full-width here only for the
   cinematic hero — the poster/video/scrim live outside it, so nothing else
   about the media or scroll system is affected. */
@media (min-width:1101px){
  .cinematic-hero > .container{
    max-width:none;
    width:100%;
    padding-left:clamp(40px,12%,240px);
    padding-right:var(--gutter);
  }
  .cinematic-hero__content{margin:0;max-width:560px;}
}

/* ---------- Section shells ---------- */
section{position:relative;}
.section{padding:130px 0;}
.section-tight{padding:90px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-bottom:70px;flex-wrap:wrap;
}
.section-dark{
  background:var(--ink);color:var(--cream);position:relative;overflow:hidden;
}
.section-dark::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--pink-rgb),0.22), transparent 45%),
    radial-gradient(circle at 4% 100%, rgba(var(--pink-rgb),0.14), transparent 50%);
}
.section-dark .container{position:relative;z-index:1;}
.section-dark .lead{color:rgba(250,246,242,.7);}

/* small reusable floral corner accent for breaking up empty space */
.floral-accent{position:absolute;pointer-events:none;opacity:0.5;z-index:0;}
.section-pink{background:var(--pink);color:var(--cream);}
.section-cream-deep{background:var(--cream-deep);}

.bg-stem{
  position:absolute;top:0;bottom:0;
  width:1px;background:var(--line);
}

/* ---------- Categories ---------- */
.cat-section{position:relative;overflow:hidden;}
.cat-petals{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.cat-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px;max-width:980px;margin-left:auto;margin-right:auto;justify-content:center;}
.cat-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--cream);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(var(--ink-rgb),0.06);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cat-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 54px -20px rgba(var(--ink-rgb),0.24);
}
.cat-card .cat-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--cream-deep);
}
.cat-card .cat-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .7s var(--ease);
}
.cat-card .cat-media--contain img{object-fit:contain;}
.cat-card .cat-media--top img{object-position:center 22%;}
.cat-card:hover .cat-media img{transform:scale(1.05);}
.cat-card .cat-body{position:relative;z-index:2;padding:26px 28px 32px;flex:1;display:flex;flex-direction:column;}
.cat-card .cat-num{font-size:12px;letter-spacing:.2em;color:var(--pink);font-weight:700;margin-bottom:14px;}
.cat-card h3{font-size:24px;}
.cat-card p{color:var(--ink-soft);font-size:13.5px;margin-top:10px;line-height:1.6;flex:1;}
.cat-card .cat-arrow{
  margin-top:20px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;
  transition:.4s var(--ease);
}
.cat-card:hover .cat-arrow{background:var(--pink);border-color:var(--pink);color:var(--cream);transform:rotate(45deg);}

/* ---------- Bouquet / product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px 38px;}
.product-grid--large{grid-template-columns:repeat(2,1fr);gap:60px 48px;}
.product-card{
  position:relative;background:var(--cream);padding:14px 14px 30px;
  border-radius:14px;transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:0 1px 3px rgba(var(--ink-rgb),0.05);
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 50px -18px rgba(var(--ink-rgb),0.22);
}
.product-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep);
  margin-bottom:24px;border-radius:10px;
}
.product-media .ph{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--pink-rgb),.20), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(200,169,105,.22), transparent 55%),
    linear-gradient(160deg, var(--cream-deep), #ecdce8);
  transition:transform 1.1s var(--ease);
}
.product-card:hover .ph{transform:scale(1.08);}
.product-badge{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--pink);color:var(--cream);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 14px;font-weight:700;border-radius:30px;
}
.product-fav{
  position:absolute;top:18px;right:18px;z-index:2;width:42px;height:42px;border-radius:50%;
  background:rgba(255,248,251,.9);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-6px);transition:.4s var(--ease);
}
.product-card:hover .product-fav{opacity:1;transform:translateY(0);}
.product-info{padding:0 10px;}
.product-info h3{font-size:21px;}
.product-info .meta{color:var(--ink-soft);font-size:14.5px;margin-top:10px;line-height:1.65;}
.product-order-btn{
  margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--cream);background:var(--ink);padding:13px 24px;border-radius:30px;
  transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product-order-btn:hover{background:var(--pink);transform:translateX(2px);box-shadow:0 10px 24px -8px rgba(var(--pink-rgb),.55);}
.product-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.1s var(--ease);}
.product-card:hover .product-media img{transform:scale(1.07);}

/* ---------- Wedding ---------- */
.wedding-split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
.wedding-visual{position:relative;min-height:560px;background:var(--ink);overflow:hidden;}
.wedding-visual picture{
  position:absolute;inset:0;display:block;overflow:hidden;
}
.wedding-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block;
  transform:scale(1.12);transform-origin:center;
}
.wedding-visual::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(var(--ink-rgb),.18), transparent 45%);
}
.wedding-visual .ring{
  position:absolute;border:1px solid rgba(225,4,144,.45);border-radius:50%;
}
.wedding-copy{background:var(--ink);color:var(--cream);padding:80px 70px;display:flex;flex-direction:column;justify-content:center;}
.wedding-copy .eyebrow{color:var(--pink-soft);}
.wedding-list{margin-top:36px;display:flex;flex-direction:column;gap:18px;}
.wedding-list li{display:flex;gap:16px;align-items:flex-start;color:rgba(250,246,242,.82);}
.wedding-list .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);margin-top:8px;flex-shrink:0;}

/* ---------- Delivery ---------- */
.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;}
.delivery-item{text-align:left;}
.delivery-num{font-family:var(--font-display);font-size:54px;color:var(--pink);line-height:1;margin-bottom:18px;}
.delivery-item h3{font-size:21px;margin-bottom:10px;}
.delivery-item p{color:var(--ink-soft);font-size:14.5px;}

/* ---------- Reviews ---------- */
.review-track{display:flex;gap:28px;overflow:hidden;}
.review-card{
  position:relative;flex:0 0 auto;width:380px;background:var(--cream);
  border:1px solid var(--line);border-radius:12px;padding:42px 38px 38px;
  display:flex;flex-direction:column;gap:20px;
  box-shadow:0 1px 2px rgba(var(--ink-rgb),0.04);
}
.review-card::before{
  content:'"';position:absolute;top:6px;left:24px;
  font-family:var(--font-display);font-size:64px;color:rgba(var(--pink-rgb),.22);
  line-height:1;
}
.review-stars{color:var(--pink);font-size:14px;letter-spacing:3px;}
.review-card p{font-size:16px;color:var(--ink-soft);font-style:italic;position:relative;z-index:1;}
.review-who{display:flex;align-items:center;gap:14px;margin-top:auto;}
.review-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--pink),var(--pink-deep));flex-shrink:0;}
.review-who strong{font-size:14px;display:block;}
.review-who span{font-size:12px;color:var(--ink-soft);}

/* ---------- Classic ornamental section divider ---------- */
.section-divider{display:flex;align-items:center;justify-content:center;gap:16px;padding:48px 0;background:var(--cream);}
.section-divider .rule{width:70px;height:1px;background:linear-gradient(90deg, transparent, var(--gold));}
.section-divider .rule:last-child{background:linear-gradient(90deg, var(--gold), transparent);}
.section-divider .mark{width:7px;height:7px;border-radius:50%;border:1px solid var(--gold);}

/* ---------- Hero vehicle visual ---------- */
.hero-visual-vehicle{max-width:560px;}
.hero-visual-vehicle picture{position:relative;z-index:1;display:block;width:100%;}
.hero-visual-vehicle img{
  width:100%;height:auto;display:block;object-fit:contain;
  filter:drop-shadow(0 50px 60px rgba(var(--ink-rgb),0.28));
}
.hero-visual-vehicle .glow{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--pink-rgb),0.22), transparent 70%);
  z-index:0;filter:blur(24px);
}
.hero-visual-vehicle picture{animation:hero-float 7s ease-in-out infinite;}
@keyframes hero-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-visual-vehicle picture{animation:none;}
}

/* ---------- Carousel (Best Sellers, etc.) ---------- */
.carousel-wrap{position:relative;}
.carousel-track{
  display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track .product-card{flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column;}
.carousel-track .product-info{display:flex;flex-direction:column;flex:1;}
.carousel-track .product-info .meta{flex:1;}
.carousel-track .product-media{aspect-ratio:3/4;}
.carousel-nav{display:flex;gap:12px;}
.carousel-nav button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);
  background:var(--cream);
}
.carousel-nav button:hover{background:var(--pink);border-color:var(--pink);color:var(--cream);}

/* ---------- Branches — premium showcase (homepage) ---------- */
.branch-section{position:relative;overflow:hidden;}
.branch-section::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 90% 10%, rgba(var(--pink-rgb),.10), transparent 50%),
    radial-gradient(circle at 6% 88%, rgba(var(--pink-rgb),.08), transparent 55%);
}
.branch-petals{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.branch-section > .container{position:relative;z-index:1;}

.branch-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(var(--pink-rgb),.08);color:var(--pink);
  border:1px solid rgba(var(--pink-rgb),.25);border-radius:30px;
  padding:8px 18px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.branch-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:16px;max-width:380px;}
.branch-head-actions .lead{text-align:right;}
.branch-head-actions .btn-outline{margin-right:0;}
.branch-locate-btn{font-size:12px;}

.branch-cards-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:56px;
}
.branch-card-v2{
  position:relative;background:var(--cream);border-radius:18px;padding:0;overflow:hidden;
  box-shadow:0 1px 3px rgba(var(--ink-rgb),0.06);
  border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.branch-card-v2:hover{
  transform:translateY(-8px);
  box-shadow:0 32px 56px -22px rgba(var(--ink-rgb),0.22);
  border-color:rgba(var(--pink-rgb),.3);
}
.branch-card-v2.is-nearest{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink), 0 32px 56px -22px rgba(var(--pink-rgb),0.3);}
.branch-card-photo{aspect-ratio:4/3;width:100%;overflow:hidden;}
.branch-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.branch-card-body{position:relative;padding:32px 36px 38px;}
.branch-flower{
  position:absolute;top:32px;right:36px;font-size:26px;color:rgba(var(--pink-rgb),.35);
  transition:transform .5s var(--ease), color .5s var(--ease);
}
.branch-card-v2:hover .branch-flower{transform:rotate(25deg) scale(1.15);color:var(--pink);}
.branch-tag-v2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);font-weight:700;}
.branch-card-v2 h3{font-size:28px;margin:12px 0 14px;}
.branch-card-v2 address{font-style:normal;color:var(--ink-soft);font-size:14.5px;line-height:1.7;}
.branch-info-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
}
.branch-hours{font-size:13px;color:var(--ink-soft);}
.branch-phone{font-size:13px;font-weight:700;color:var(--ink);}
.branch-phone:hover{color:var(--pink);}
.branch-distance{
  display:block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--pink);
}
.branch-distance:empty{display:none;}
.branch-card-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}

/* ---------- Locations (used on subeler.html) ---------- */
.branch-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.branch-photo-card{
  background:var(--cream);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px -20px rgba(26,19,16,0.18);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.branch-photo-card:hover{transform:translateY(-8px);box-shadow:0 28px 56px -18px rgba(26,19,16,0.28);}
.branch-photo-frame{aspect-ratio:4/3;width:100%;overflow:hidden;}
.branch-photo{width:100%;height:100%;object-fit:cover;display:block;}
.branch-photo-body{padding:30px 32px 34px;}
.branch-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);font-weight:700;}
.branch-photo-body h3{font-size:26px;margin:12px 0 10px;}
.branch-photo-body address{font-style:normal;color:var(--ink-soft);font-size:14.5px;line-height:1.7;}
.branch-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}
.branch-map{aspect-ratio:16/9;width:100%;border:0;filter:grayscale(.25) contrast(1.05);}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:28px 0;text-align:left;font-family:var(--font-display);font-size:20px;
}
.faq-q .plus{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);position:relative;flex-shrink:0;transition:.4s var(--ease);}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--ink);transition:.4s var(--ease);}
.faq-q .plus::before{top:50%;left:8px;right:8px;height:1px;transform:translateY(-50%);}
.faq-q .plus::after{left:50%;top:8px;bottom:8px;width:1px;transform:translateX(-50%);}
.faq-item.is-open .plus{background:var(--pink);border-color:var(--pink);transform:rotate(180deg);}
.faq-item.is-open .plus::before,.faq-item.is-open .plus::after{background:var(--cream);}
.faq-item.is-open .plus::after{opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.faq-a p{padding-bottom:28px;color:var(--ink-soft);max-width:65ch;}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.field{margin-bottom:26px;}
.field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:12px 0;font-family:var(--font-body);font-size:16px;color:var(--ink);
  transition:border-color .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--pink);}
.field textarea{resize:vertical;min-height:110px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--cream);padding:100px 0 0;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;padding-bottom:70px;border-bottom:1px solid var(--line-light);}
.footer-top p{color:rgba(250,246,242,.65);margin-top:20px;max-width:32ch;font-size:14.5px;}
.footer-logo-chip{display:inline-block;background:var(--cream);padding:10px 16px;border-radius:8px;}
.footer-logo-chip img{height:34px;display:block;}
.footer-col h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-soft);margin-bottom:22px;}
.footer-col ul{display:flex;flex-direction:column;gap:13px;}
.footer-col a{color:rgba(250,246,242,.78);font-size:14.5px;transition:color .3s;}
.footer-col a:hover{color:var(--pink);}
.footer-social{display:flex;gap:12px;margin-top:24px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:28px 0;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:12.5px;color:rgba(250,246,242,.5);}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{
  background:var(--ink);color:var(--cream);padding:200px 0 100px;position:relative;overflow:hidden;
}
.page-hero .breadcrumb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,246,242,.55);margin-bottom:24px;}
.page-hero .breadcrumb a:hover{color:var(--pink);}

/* ---------- Category quick-nav (urunler.html) ---------- */
.category-nav{
  position:sticky;top:86px;z-index:90;background:rgba(250,246,242,.97);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px);
}
.category-nav-track{
  display:flex;gap:10px;overflow-x:auto;padding:16px 0;
  scrollbar-width:none;
}
.category-nav-track::-webkit-scrollbar{display:none;}
.category-nav a{
  flex:0 0 auto;font-size:12.5px;letter-spacing:.04em;font-weight:600;
  padding:9px 18px;border-radius:30px;border:1px solid var(--line);
  color:var(--ink-soft);white-space:nowrap;transition:.3s var(--ease);
}
.category-nav a:hover{border-color:var(--pink);color:var(--pink);}

/* ---------- Scroll-reveal utility (driven by JS/GSAP) ---------- */
.reveal-up{opacity:0;transform:translateY(60px);}
.reveal-fade{opacity:0;}
.reveal-scale{opacity:0;transform:scale(.92);}
.split-line{overflow:hidden;}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;}
.marquee-track{display:flex;gap:60px;white-space:nowrap;width:max-content;}
.marquee-track span{font-family:var(--font-display);font-size:22px;color:var(--ink-soft);display:flex;align-items:center;gap:60px;}
.marquee-track span em{color:var(--pink);font-style:normal;}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .header-actions .btn-outline.btn-sm{display:none;}
}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:0;}
  .hero-visual{max-width:340px;margin:0 auto;}
  .hero-visual-vehicle{max-width:460px;margin:36px auto 0;}
  /* Landscape tablets keep the full-bleed overlay (text on the soft floral
     left, vehicle on the right). Narrow the text column a touch so it never
     reaches the bouquet. Portrait tablets/phones use the stacked layout below. */
  .cinematic-hero__content{max-width:min(58%,460px);}
  .cinematic-hero__poster,
  .cinematic-hero__video{object-position:78% center;}
  /* Stacked layout: text on top, the full delivery-vehicle scene shown below it at a
     controlled (not full-bleed) size, anchored bottom-right. Whole vehicle + arrangement
     stay visible; no aggressive crop and no horizontal overflow. */
  .hero-bg{
    background-size:auto min(50vw,430px);
    background-position:bottom right;
  }
  .hero-bg::after{display:none;}
  .hero{padding-bottom:calc(min(50vw,430px) + 24px);}
  /* Mobile hero order: eyebrow -> headline -> subtitle -> CTAs -> vehicle image -> stats.
     .hero-content becomes a transparent wrapper so its children act as direct
     grid items of .hero-grid and can be interleaved with .hero-visual via order. */
  .hero-content{display:contents;}
  .hero-content .eyebrow{order:1;}
  .hero-title{order:2;}
  .hero-sub{order:3;}
  .hero-cta{order:4;}
  .hero-visual-vehicle{order:5;}
  .hero-stats-row{order:6;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .branch-photo-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;gap:50px;}
  .product-grid--large{grid-template-columns:repeat(2,1fr);}
  .map-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .category-nav{top:62px;}
  .site-header{padding:12px 0;}
  .logo{height:38px;max-width:160px;}
  .site-header.is-scrolled .logo{height:34px;}
  /* Homepage only: header logo 2x larger on mobile */
  .home .logo{height:76px;max-width:300px;}
  .home .site-header.is-scrolled .logo{height:68px;}
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .wedding-split{grid-template-columns:1fr;}
  .wedding-visual{min-height:0;aspect-ratio:4/3;}
  .wedding-copy{padding:60px 36px;}
  .delivery-grid{grid-template-columns:1fr;gap:40px;}
  .section{padding:90px 0;}
  .hero{padding:128px 0 calc(min(50vw,430px) + 24px);}
  .hero-stats-row{gap:28px;}
  .hero-cta{gap:12px;}
  .carousel-track .product-card{flex:0 0 calc(50% - 15px);}
  .branch-head-actions{align-items:flex-start;max-width:none;width:100%;}
  .branch-head-actions .lead{text-align:left;}
}
@media (max-width:600px){
  /* Comfortable, balanced horizontal breathing room on phones.
     Raises the gutter floor from 20px -> 24px (5vw still takes over above ~480px,
     so this only lifts the small-screen minimum and never reduces spacing). */
  :root{--gutter:clamp(24px,5vw,80px);}
  /* Defensive: never let a long button label force horizontal scroll on phones.
     Buttons that already fit stay on one line; only over-wide labels wrap. */
  .btn{white-space:normal;max-width:100%;}
  /* Phones: vehicle centered below the text at a controlled size with side margins
     (not full-bleed), full arrangement + wheels visible, no horizontal overflow. */
  .hero-bg{background-size:auto 46vw;background-position:bottom center;}
  .hero{padding-bottom:calc(46vw + 24px);}
  .cat-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .product-grid--large{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:40px;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .branch-cards-grid{grid-template-columns:1fr;gap:22px;margin-top:40px;}
  .branch-card-body{padding:26px 24px 30px;}
  .branch-card-actions .btn{flex:1;justify-content:center;}
  .branch-photo-grid{gap:24px;}
  .branch-photo-body{padding:24px 22px 28px;}
  .branch-actions .btn{flex:1;justify-content:center;}
  .carousel-track .product-card{flex:0 0 88vw;}
  .hero-title{font-size:clamp(34px,11vw,46px);line-height:1.12;}
  .mobile-drawer{padding-left:24px;padding-right:24px;}
  .mobile-drawer-links a{font-size:clamp(19px,6.5vw,24px);padding:14px 4px;}
  .mobile-drawer-foot{flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important;}
  /* No cinematic intro: keep the static poster, hide BOTH videos entirely, and
     drop the bouncing scroll cue. JS also skips the scroll-lock in this mode.
     The descendant selector outranks the single-class display toggles above so
     the videos stay hidden on every viewport, portrait included. */
  .cinematic-hero .cinematic-hero__video{display:none;}
  .cinematic-hero__cue{display:none;}
  .cinematic-hero__content{opacity:1 !important;transform:none !important;}
}

/* ---------- Cinematic hero — PORTRAIT (phones + portrait tablets) ----------
   Mobile = ONE full-screen composition: the dedicated vertical 9:16 poster /
   video fills the hero (object-fit:contain, never cropped, blush fills any
   letterbox — no black), and the copy sits ON the poster inside a premium
   frosted-glass panel anchored to the lower safe zone (road / below the
   bouquet) so it never covers the bouquet.

     ┌───────────────┐
     │   bouquet      │  ← full 9:16 poster/video, bouquet + vehicle visible
     │   + vehicle    │
     │ ┌───────────┐ │
     │ │ headline   │ │  ← frosted panel over the road: title + copy + CTAs
     │ │ + CTAs     │ │
     │ └───────────┘ │
     └───────────────┘

   The scroll-triggered intro is untouched: on the first scroll cinematic-hero.js
   adds .is-hidden (the panel fades/slides out via the base transition), plays
   this same <video> in place, then unlocks on end. */
@media (max-width:900px) and (orientation:portrait){
  /* Mobile = STACKED: a solid cream copy block on top, the photo directly under
     it filling the rest. Nothing overlaps, so the headline needs no wash.
     Flex children here are <picture> and .container — .hero-petals is absolute
     (out of flow, stays a full-hero overlay) and .cinematic-hero__scrim is
     display:none, so neither takes part in the column. */
  .cinematic-hero{
    display:flex;
    flex-direction:column;
    position:relative;
    min-height:100svh;
    padding:0;
    overflow:hidden;
    background:var(--cream);
    /* Soft diffused white glow behind the dark copy. Works together with the
       gradient wash on .cinematic-hero__content: the gradient carries the bulk
       of the contrast, this just lifts the letters off the busy artwork. */
    --hero-halo:
      0 0 15px rgba(255,255,255,.9),
      0 0 32px rgba(255,255,255,.65);
  }
  /* The photo band: second in the column, soaks up whatever height the copy
     leaves. min-height keeps it present if the copy ever runs long. */
  .cinematic-hero > picture{
    order:2;
    display:block;
    position:relative;
    flex:1 1 auto;
    min-height:32svh;
    width:100%;
    overflow:hidden;
  }
  /* Fills its <picture> box. cover (not contain) so the band is never
     letterboxed; framed at 55% so the bouquet + vehicle stay centred in the
     strip and only the empty sky is cropped away. */
  .cinematic-hero__poster{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 55%;
    background:var(--cream);
  }
  /* Readability now comes from the frosted panel, not a gradient wash. */
  .cinematic-hero__scrim{display:none;}
  /* Full-bleed copy band: drop the container gutter so the cream reaches both
     edges instead of reading as an inset card. */
  .cinematic-hero > .container{
    order:1;
    flex:0 0 auto;
    width:100%;
    max-width:none;
    padding:0;
  }
  /* Back in normal flow (no longer an overlay), on a solid cream fill — the copy
     no longer touches the photo, so no gradient wash is needed. Keeps
     position:relative + z-index:3 so it paints above the .hero-petals canvas
     (z-index:1) and petals never drift across the text.
     padding-top clears the fixed header (home logo 76px + 12px ≈ 100px). */
  .cinematic-hero__content{
    position:relative;
    z-index:3;
    inset:auto;
    width:100%;max-width:none;margin:0;
    text-align:center;
    background:var(--cream);
    padding:calc(100px + env(safe-area-inset-top,0px) + 16px) 20px 26px;
    /* No card: never a border, radius, blur or shadow. */
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  /* Pink kicker above the headline — back on now that the panel is gone. */
  .cinematic-hero .eyebrow{
    display:inline-flex;
    font-size:12px;letter-spacing:.24em;
    color:var(--pink);
    text-shadow:var(--hero-halo);
  }
  /* Big, striking headline leading on the pale sky. Brand ink + pink <em> kept;
     the gradient + halo carry it over the artwork. */
  .cinematic-hero .hero-title{
    margin-top:8px;
    font-size:clamp(34px,9.6vw,44px);
    line-height:1.1;
    letter-spacing:-.015em;
    text-shadow:var(--hero-halo);
  }
  /* Full ink (not ink-soft) + weight 500 — without a panel behind it the softer
     tone and 400 weight lost too much contrast against the bouquet. */
  .cinematic-hero .hero-sub{
    display:block;margin:12px auto 0;max-width:34ch;
    font-size:15px;line-height:1.5;font-weight:500;color:var(--ink);
    text-shadow:var(--hero-halo);
  }
  /* Full-width stacked CTAs inside the panel — the primary tap targets.
     Tighter type + spacing so long labels (WhatsApp'tan Sipariş Ver) stay on
     one line and the panel never rises onto the bouquet. */
  .cinematic-hero .hero-cta{
    margin-top:18px;flex-direction:column;gap:14px;align-items:stretch;
  }
  .cinematic-hero .hero-cta .btn{
    width:100%;justify-content:center;
    padding:14px 16px;font-size:12px;letter-spacing:.05em;
    white-space:nowrap;
  }
  /* The CTAs sit past the gradient, straight on the bouquet — so every one of
     them needs its own solid fill. btn-pink and btn-primary already have one;
     btn-outline was transparent and dissolved into the road markings. Give it
     the brand cream with the existing ink border + ink label. */
  .cinematic-hero .hero-cta .btn-outline{
    background:var(--cream);
    border-color:var(--ink);
  }
  .cinematic-hero .hero-cta .btn-outline span{color:var(--ink);}
  /* Trust stats live in the sections below on mobile — kept out of the panel
     so it stays compact and never rises onto the bouquet. */
  .cinematic-hero .hero-stats-row{display:none;}
  /* No overlay scroll cue — it would collide with the panel. */
  .cinematic-hero__cue{display:none;}
}