/* =========================================
   BeMatrx — Home Page (v4.2 — real SVG iPhone + 90 pin world)
   =========================================
   10-section landing page styles.
   Scoped under .bm-home-* classes.
   Updated 2026-04-24 Part 1:
     - iPhone CSS mockup → real SVG frame (iphone.svg 188×388)
     - World map → Simplemaps SVG + 90 Mercator-positioned pins
     - 12 real careers with gradient cards
     - FAQ smooth open+close (both directions)
     - Hero stores-note (single line under badges)
   ========================================= */

/* ===== Section Background Tokens ===== */
:root {
  --bm-home-bg-hero:        linear-gradient(135deg, #0a0e27 0%, #1a1a2e 40%, #2d1a3a 70%, #4a1a3d 100%);
  --bm-home-bg-character:   #FFFFFF;
  --bm-home-bg-world:       linear-gradient(180deg, #FDE8EC 0%, #F0E8FC 100%);
  --bm-home-bg-ai:          linear-gradient(180deg, #0a0e27 0%, #1a1a2e 100%);
  --bm-home-bg-economy:     #FAFAFA;
  --bm-home-bg-community:   #FFF5F8;
  --bm-home-bg-reality:     linear-gradient(180deg, #0f0f1e 0%, #1a1a2e 100%);
  --bm-home-bg-faq:         #F5F5FA;
  --bm-home-bg-cta:         linear-gradient(180deg, #0a0e27 0%, #000000 100%);
}

/* ===== Base ===== */
.bm-home {
  position: relative;
  padding-block: 0;
  overflow: hidden;
  /* Anchor scroll offset for fixed header (#hero, #character, #faq, etc.) */
  scroll-margin-top: var(--bm-header-height);
}

/* Static sections: remove sticky inset — `top: 72` was offsetting the
   sticky child 72px down in natural flow (CSS sticky behaves like
   `position: relative` with insets when not yet engaged), creating a
   visible gap above each title. With scroll-snap removed, sticky has no
   functional purpose for these sections. Community + Screens still need
   sticky for their multi-panel scroll showcase — they're excluded.
   !important required because the original `position: sticky; top: 72`
   declarations are later in the file (per-section blocks). */
.bm-home-hero__sticky {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 100%;
}


/* CTA section — center content vertically inside its section box.
   `justify-content: center` overrides the global `flex-start` from the
   per-section block at line ~2410. `min-height` matches --bm-section-height
   exactly (= calc(100vh - var(--bm-header-height))) so the flex parent has
   a concrete vertical context for centering — without it, sticky's
   `height` declaration alone is enough but the explicit min-height
   guards against any earlier-in-cascade `min-height: 100%` override
   collapsing to 0 against the parent's `min-height` (not `height`).
   Previously this was calc(100vh + 8px) which made CTA sticky 80px
   taller than other sticky panes — visual inconsistency, removed 2026-05-19. */
.bm-home-cta__sticky {
  justify-content: center !important;
  min-height: var(--bm-section-height) !important;
}

.bm-home__head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.bm-home__title {
  font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bm-dark);
  margin: 0 0 0.5rem;
  text-align: center;
}
.bm-home__title--light { color: #FFFFFF; }
.bm-home__subtitle {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  color: var(--bm-text-muted);
  margin: 0.75rem auto 0;
  max-width: 40ch;
  text-align: center;
}
.bm-home__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bm-primary);
  margin-bottom: 0.75rem;
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bm-home *,
  .bm-home *::before,
  .bm-home *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================
   1. HERO
   ========================================= */
/* v4 (2026-05-04): 100dvh sabit yükseklik + flex center.
   Outer viewport-locked container, content vertical-center'a oturur.
   Sticky pattern artık yok (hero ilk bölüm, scroll'a girmeden biter). */
.bm-home-hero {
  color: #FFFFFF;
  min-height: 100dvh;
  max-height: 100dvh;
  position: relative;
  padding-top: 0;
  background: var(--bm-home-bg-hero);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@supports not (height: 100dvh) {
  .bm-home-hero { min-height: 100vh; max-height: 100vh; }
}
.bm-home-hero__sticky {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.bm-home-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(232,65,90,0.35), transparent 70%),
    radial-gradient(ellipse 35% 25% at 15% 80%, rgba(139,92,246,0.25), transparent 70%);
}
.bm-home-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  z-index: 1;
}
@media (min-width: 900px) {
  .bm-home-hero__inner { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
.bm-home-hero__copy { text-align: center; }
@media (min-width: 900px) {
  .bm-home-hero__copy { text-align: left; }
  /* RTL: Arapça gibi sağdan-sola dillerde hero metni sağa yaslı (2026-05-14). */
  [dir="rtl"] .bm-home-hero__copy { text-align: right; }
}
.bm-home-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(4px);
}
.bm-home-hero__title {
  font-size: clamp(2rem, 5vw + 0.5rem, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin: 0 0 2rem;
  padding-bottom: 0.12em;
  overflow: visible;
}
.bm-home-hero__title-line {
  display: block;
  padding-bottom: 0.08em;
}
.bm-home-hero__title-line--accent {
  background: linear-gradient(90deg, #FF6B83 0%, #E8415A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.15em;
}
/* Forced line break on desktop, hidden on mobile so the title flows
   naturally on small screens. The space before <br> in the i18n string
   is preserved when the <br> is hidden, so words don't collide. */
@media (max-width: 768px) {
  .bm-home-hero__title-line br {
    display: none;
  }
}

/* Hero stores row (no per-badge badge; single note underneath) */
.bm-home-hero__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
@media (min-width: 900px) {
  .bm-home-hero__stores { justify-content: flex-start; }
}
.bm-home-hero__store {
  display: inline-flex;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.bm-home-hero__store:hover { opacity: 1; }
.bm-home-hero__store img {
  height: 48px;
  width: auto;
  display: block;
}
.bm-home-hero__stores-note {
  font-size: 0.8125rem;
  color: var(--bm-text-on-dark-muted);
  margin: 0 0 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 899px) {
  .bm-home-hero__stores-note { text-align: center; }
}
.bm-home-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  /* 2026-05-20 — explicit (was `transition: all`). Hover changes
     background, border-color, transform. */
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bm-home-hero__link:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Hero visual (real BeMatrx UI screenshot + floating badges) */
.bm-home-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bm-home-hero__phone-wrap {
  position: relative;
  width: 100%;
  max-width: 240px;
  max-height: 85%;
  margin: 0 auto;
  aspect-ratio: 1184 / 2525;
  z-index: 2;
  transform: rotate(-4deg);
}
/* Backlight — single white radial behind phone */
.bm-home-hero__backlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 540px;
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 75%
  );
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.bm-home-hero__phone {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* 2026-05-20 — drop-shadow removed. Live headless trace caught the
     0px 25px 40px rgba(0,0,0,0.6) creating a visible darker horizontal
     band centered ~25px below the phone, on top of the already-dark
     hero gradient. .bm-home-hero__backlight (radial glow behind phone)
     already separates the phone from the bg; the heavy drop-shadow was
     redundant and band-producing. */
  filter: none;
}

.bm-home-hero__badge {
  position: absolute;
  padding: 10px 16px;
  /* 2026-05-20: backdrop-filter:blur(10px) removed. Badge background is
     rgba(255,255,255,0.95) — essentially opaque, so the backdrop blur
     produced no visible difference. Combined with the always-running
     drift animation (3 badges × infinite loop), the backdrop was being
     re-computed every frame for zero visual benefit. */
  background: rgba(255,255,255,0.95);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  z-index: 3;
  font-family: 'Helvetica Neue', sans-serif;
}
.bm-home-hero__badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: #FFFFFF;
}
.bm-home-hero__badge--xp .bm-home-hero__badge-icon          { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.bm-home-hero__badge--achievement .bm-home-hero__badge-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.bm-home-hero__badge--role .bm-home-hero__badge-icon        { background: linear-gradient(135deg, #ff5970, #ff3b54); }

.bm-home-hero__badge-content {
  display: flex;
  flex-direction: column;
}
.bm-home-hero__badge-label {
  font-size: 11px;
  color: var(--bm-text-muted);
  line-height: 1;
}
.bm-home-hero__badge-text {
  font-size: 13px;
  color: #2a1810;
  font-weight: 700;
  line-height: 1.2;
}

/* Badge positions — pozisyonlar phone-wrap'a göre (telefonun edge'inden
   negatif % ile dışarı taşacak). Counter-rotate rotate(4deg) phone-wrap'in
   -4° tilt'ini iptal eder, badge'ler dik kalır (yere paralel). */
.bm-home-hero__badge--xp          { top: 8%;     right: -25%; transform: rotate(4deg); }
.bm-home-hero__badge--achievement { top: 50%;    left: -35%;  transform: rotate(4deg) translateY(-50%); }
.bm-home-hero__badge--role        { bottom: 12%; right: -30%; transform: rotate(4deg); }

/* Tablet override — phone-wrap daha az dışarı taşacak şekilde içeri çek */
@media (max-width: 1023px) {
  .bm-home-hero__badge--xp          { right: -15%; }
  .bm-home-hero__badge--achievement { left: -25%; }
  .bm-home-hero__badge--role        { right: -20%; }
}

/* Badge drift animations — asimetrik, her biri farklı keypoint/süre/offset.
   badge-2 mevcut translateY(-50%) ile vertical center'da kalmalı —
   keyframe bunu koruyor. */
@keyframes bm-hero-badge-drift-1 {
  0%   { transform: rotate(4deg) translate(0, 0); }
  29%  { transform: rotate(4deg) translate(-3px, -8px); }
  61%  { transform: rotate(4deg) translate(2px, -4px); }
  100% { transform: rotate(4deg) translate(0, 0); }
}
@keyframes bm-hero-badge-drift-2 {
  0%   { transform: rotate(4deg) translateY(-50%) translate(0, 0); }
  41%  { transform: rotate(4deg) translateY(-50%) translate(4px, -6px); }
  76%  { transform: rotate(4deg) translateY(-50%) translate(-2px, -10px); }
  100% { transform: rotate(4deg) translateY(-50%) translate(0, 0); }
}
@keyframes bm-hero-badge-drift-3 {
  0%   { transform: rotate(4deg) translate(0, 0); }
  33%  { transform: rotate(4deg) translate(-5px, -5px); }
  68%  { transform: rotate(4deg) translate(3px, -8px); }
  100% { transform: rotate(4deg) translate(0, 0); }
}
.bm-home-hero__badge--xp          { animation: bm-hero-badge-drift-1 5.3s ease-in-out infinite; }
.bm-home-hero__badge--achievement { animation: bm-hero-badge-drift-2 6.7s ease-in-out infinite -1.4s; }
.bm-home-hero__badge--role        { animation: bm-hero-badge-drift-3 8.1s ease-in-out infinite -2.7s; }

@media (prefers-reduced-motion: reduce) {
  .bm-home-hero__badge { animation: none !important; }
}

/* =========================================
   2. CHARACTER — 12 real careers with gradient cards
   ========================================= */

/* =========================================
   1.5. VIDEO (mobile-only, inserted between hero and character)
   =========================================
   Portrait 1080×1920 video. Hidden on desktop (≥1024px) so the file
   is never downloaded there. Mobile: 100dvh fill with object-fit:cover.
   Bottom-right unmute toggle handled by initVideoSound() in main.js. */
.bm-home-video {
  display: none;                  /* desktop default — hidden */
}
@media (max-width: 1023px) {
  /* 2026-05-23c — section height = video natural height ONLY. Removed
     `background: #000` so no black bars ever paint behind the video
     (caused by section being momentarily taller than video while
     metadata loaded). `aspect-ratio: 1080/1920` on the video element
     reserves the correct height BEFORE the file streams in, eliminating
     the layout flash that produced "üst ve alt siyahlık". */
  .bm-home-video {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;               /* defeats inline whitespace under <video> */
    padding-block: 0;             /* 2026-05-23d: override .bm-home base mobile
                                     padding (48px) — video must sit flush
                                     against hero (above) and character (below)
                                     with no white gap. */
  }
  .bm-home-video__sticky {
    position: relative;
    width: 100%;
    display: block;
    line-height: 0;
  }
  .bm-home-video__media {
    width: 100%;
    height: auto;                 /* natural aspect, fills width */
    aspect-ratio: 1080 / 1920;    /* lock layout before metadata arrives */
    display: block;
  }
  /* Center play overlay — visible only when video is paused. Pure visual
     indicator; pointer-events:none so taps pass through to the video. */
  .bm-home-video__playicon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;            /* optical centering of the play triangle */
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 2;
  }
  .bm-home-video.is-paused .bm-home-video__playicon {
    opacity: 1;
    transform: scale(1);
  }
  /* Sound toggle — top-right of the video frame. 2026-05-23c: contrast
     bumped (semi-opaque black instead of white-glass) so the button
     is visible regardless of what video frame is behind it (light/dark
     content). Sits above any other overlay via z-index 10. Offset
     calculated from the VIDEO's top edge (parent is the section, which
     now has no extra top padding), so on iPhones with safe-area-inset-top
     the button still clears the notch by combining the inset with the
     base clamp. */
  .bm-home-video__sound {
    position: absolute;
    top: max(clamp(14px, 3.5vw, 24px), env(safe-area-inset-top, 0px));
    right: clamp(14px, 3.5vw, 24px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  .bm-home-video__sound:hover,
  .bm-home-video__sound:active {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
  }
  .bm-home-video__sound:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
  }
  /* Muted state (default): X lines visible, sound waves hidden */
  .bm-home-video__sound[aria-pressed="false"] .bm-home-video__sound-wave1,
  .bm-home-video__sound[aria-pressed="false"] .bm-home-video__sound-wave2 {
    display: none;
  }
  /* Unmuted state: X lines hidden, sound waves visible */
  .bm-home-video__sound[aria-pressed="true"] .bm-home-video__sound-x1,
  .bm-home-video__sound[aria-pressed="true"] .bm-home-video__sound-x2 {
    display: none;
  }
}

.bm-home-character {
  /* Sticky-pin hold zone: section is 400px taller than viewport, so
     when sticky child engages it stays pinned for ~400px of scroll
     (~4 wheel clicks) before user can continue down. */
  min-height: calc(100vh + 400px);
  position: relative;
  background: var(--bm-home-bg-character);
  /* CRITICAL: overflow must be `visible` (not `hidden` from .bm-home base)
     so sticky child engages against viewport, not against this section as
     a self-scroll container. With overflow:hidden, sticky never pins. */
  overflow: visible;
}
.bm-home-character__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.bm-home-character .bm-home__title { margin-bottom: clamp(2rem, 4vw + 0.5rem, 4rem); }
.bm-home-character__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .bm-home-character__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 900px) {
  .bm-home-character__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.bm-career-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 0.875rem 1.125rem;
  background: linear-gradient(135deg, var(--career-c1, #FAFAFA), var(--career-c2, #F0F0F0));
  border: 1.5px solid var(--bm-border);
  border-radius: 20px;
  cursor: default;                    /* non-interactive, visual only */
  /* 2026-05-20 — explicit (was `transition: all`). Hover changes
     transform (compositor), box-shadow + border-color (paint). */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  overflow: hidden;
}
.bm-career-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(255,255,255,0.4), transparent 60%);
  pointer-events: none;
  opacity: 0.6;
}
.bm-career-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 40px -10px rgba(232, 65, 90, 0.25);
  border-color: var(--bm-primary);
}
.bm-career-card:hover::before { opacity: 1; }
.bm-career-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--bm-dark);
  /* 2026-05-20 — explicit (was `transition: all`). Hover changes
     transform (compositor) + color (paint). */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}
@media (max-width: 599px) {
  .bm-career-card__icon { font-size: 34px; }
}
.bm-career-card:hover .bm-career-card__icon {
  transform: scale(1.15) rotate(-5deg);
  color: var(--bm-primary);
}
.bm-career-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--bm-dark);
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}
.bm-career-card:hover .bm-career-card__name { color: var(--bm-primary); }

/* =========================================
   3. WORLD — Leaflet, no tiles, silhouette continents (v5.1)
   ========================================= */
.bm-home-world {
  /* Sticky-pin hold zone — see .bm-home-character for pattern */
  min-height: calc(100vh + 400px);
  position: relative;
  background: linear-gradient(180deg, #1A2A3E 0%, #2A3A55 100%);
  overflow: visible;
}
.bm-home-world__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 32px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Heading text scoped to world section (overrides default dark color) */
.bm-home-world .bm-home__title { color: #FFFFFF; }
.bm-home-world .bm-home__subtitle { color: rgba(255, 255, 255, 0.7); }
.bm-home-world__map {
  width: 100%;
  max-width: 1100px;
  height: clamp(320px, 60vh, 560px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  /* v6.3: container gets the same gradient as the section so drag/flyTo
     never reveals a black "unrendered" edge. Inner Leaflet panes stay
     transparent (see pane block below) — only the OUTERMOST container
     paints the fallback gradient. */
  background: linear-gradient(180deg, #1A2A3E 0%, #2A3A55 100%) !important;
  box-shadow: none;                 /* v5.0: borderless integration with section bg */
  contain: layout;                  /* isolate layout (fixes first-paint crop) */
  position: relative;               /* anchor for back-card absolute positioning fallback */
  touch-action: pan-x pan-y;        /* allow Leaflet to handle touch drag on mobile */
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 768px) {
  .bm-home-world__map {
    border-radius: 16px;
    /* Mobile-only height override — desktop clamp(320px, 60vh, 560px) intact.
       75vw at 375px = 281px → clamp picks 300px floor. Tighter container
       reduces vertical real estate so map doesn't dominate the section. */
    height: clamp(300px, 75vw, 380px);
    /* Vertical breathing room around the compact map so the section
       height stays close to its pre-shrink length (~660px). 8vh at 800px
       viewport = 64px each side → adds ~128px total back to the section. */
    margin-block: clamp(40px, 8vh, 80px);
  }
}
/* === Leaflet panes — fully transparent. The OUTERMOST container
   (.bm-home-world__map) paints the gradient fallback; everything inside
   stays transparent so country fills, pin markers, and labels are the
   only pixels drawn over the gradient. v6.3: + canvas selector for the
   Canvas renderer's drawing surface. */
.bm-home-world__map .leaflet-container,
.bm-home-world__map .leaflet-pane,
.bm-home-world__map .leaflet-map-pane,
.bm-home-world__map .leaflet-overlay-pane,
.bm-home-world__map .leaflet-shadow-pane,
.bm-home-world__map .leaflet-marker-pane,
.bm-home-world__map .leaflet-tooltip-pane,
.bm-home-world__map .leaflet-popup-pane,
.bm-home-world__map .leaflet-control-container,
.bm-home-world__map svg,
.bm-home-world__map canvas,
.bm-home-world__map .leaflet-zoom-animated {
  background: transparent !important;
  background-color: transparent !important;
}
.bm-home-world__map .leaflet-tile-pane { display: none !important; }
/* Container typography + interaction */
.bm-home-world__map .leaflet-container {
  font-family: var(--bm-font-sans);
  outline: none;
  min-height: 340px;
  touch-action: pan-x pan-y;
}
/* Attribution hidden — OSM/CARTO credit moved to site footer instead */
.bm-home-world__map .leaflet-control-attribution { display: none !important; }
.bm-home-world__map .leaflet-control-zoom { display: none !important; }
/* Country outlines + hover */
.bm-home-world__map .leaflet-interactive { cursor: pointer; }
.bm-home-world__map .bm-world-country { transition: fill-opacity 0.2s ease, opacity 0.2s ease, stroke-width 0.2s ease; }
/* Custom city pin (v5.3) — small idle, grows + ripple on hover */
.bm-world-pin-wrapper {
  position: relative;
  display: block;
}
.bm-world-pin {
  display: block;
  position: relative;
  width: 4px;
  height: 4px;
  background: #FFFFFF;
  border: none;
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5px rgba(232, 65, 90, 0.9),
    0 0 4px rgba(232, 65, 90, 0.6);
  cursor: pointer;
  /* 2026-05-20: width/height transitions (LAYOUT × 90 pins) replaced with
     transform: scale (COMPOSITOR). Pin layout box stays 6×6 always; active
     state grows visually via scale(1.67) without reflow. transform-origin
     center keeps pin anchored at its geographic coordinate. */
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ripple ring (only visible on hover) */
.bm-world-pin::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 65, 90, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
/* v6.1: active pins (pins of the currently selected country) — pulse.
   v6.2: transition: none so the box-shadow swap into the active state
   is instantaneous (no idle-state flash during country selection). */
.bm-world-pin--active {
  /* width/height removed — visual scale via transform now */
  transition: none;
  animation: bm-world-pin-pulse-active 1.8s infinite ease-in-out;
}
/* Active scale baked into keyframe baseline (1.67 ≈ 10/6, matching old
   width:10px visual). Pulse oscillates between 1.67 and 2.0 (= 1.67 × 1.2,
   preserving the old "scale(1) → scale(1.2)" ratio). All transform-only. */
@keyframes bm-world-pin-pulse-active {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(232, 65, 90, 1),
      0 0 8px rgba(232, 65, 90, 0.8),
      0 0 16px rgba(255, 255, 255, 0.4);
    transform: scale(1.67);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(232, 65, 90, 0.6),
      0 0 16px rgba(232, 65, 90, 1),
      0 0 32px rgba(255, 255, 255, 0.6);
    transform: scale(2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bm-world-pin,
  .bm-world-pin-wrapper:hover .bm-world-pin,
  .bm-world-pin::after,
  .bm-world-pin--active {
    animation: none;
    transition: none;
  }
}
/* City name tooltip (hover) */
.leaflet-tooltip.bm-world-tooltip {
  background: #FFFFFF;
  border: 1px solid rgba(232, 65, 90, 0.2);
  color: var(--bm-dark);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.leaflet-tooltip.bm-world-tooltip::before { display: none; }

/* v4.8: Permanent labels now use divIcon-based markers (full DOM control).
   Tooltip permanent fallback kept for backward compat but not active. */
.bm-city-label-wrapper {
  background: transparent !important;
  border: none !important;
  pointer-events: none !important;
}
.bm-city-label {
  display: inline-block;
  position: relative;
  z-index: 1000;                          /* above pin/ripple */
  /* v6.4: pink BG + white text. Pink halo shadow replaces the dark drop
     shadow so the pill blends with selected-country highlight. */
  background: #E8415A;
  color: #FFFFFF !important;
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 16px rgba(232, 65, 90, 0.4);
  white-space: nowrap;
  /* v6.2: no horizontal centering — divIcon iconAnchor places the pill
     to the right of the pin, so it shouldn't shift back over the dot. */
  animation: bm-world-label-in 0.3s ease both;
  pointer-events: none;
}
@keyframes bm-world-label-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bm-city-label--left .bm-city-label {
  animation: bm-world-label-in-left 0.3s ease both;
  transform: translateX(calc(-100% - 24px));
}
@keyframes bm-world-label-in-left {
  from { opacity: 0; transform: translateX(calc(-100% - 24px)) translateY(4px); }
  to   { opacity: 1; transform: translateX(calc(-100% - 24px)); }
}

/* v6.2: Country name labels (TURKEY, GREECE...) — divIcon-based marker
   layer. Anchored to manually calibrated COUNTRY_VIEW.center so the label
   always lands on the landmass (no Spain-on-Balearics bug). Visibility
   driven by JS (updateCountryLabels) per zoom tier; CSS handles fade. */
.bm-country-label-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.bm-country-name-label {
  display: inline-block;
  /* center the pill on the COUNTRY_VIEW.center anchor */
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--bm-font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  opacity: 0;                          /* JS toggles to 0.85 per tier */
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Back-to-world floating card (top-right, shown when zoomed) */
.bm-world-back-card {
  display: none;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-family: var(--bm-font-sans);
  backdrop-filter: blur(8px);
  margin: 10px;                     /* inset from map edge */
}
.bm-world-back-card.is-visible {
  display: inline-flex;
  animation: bm-back-card-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bm-world-back-card__label {
  color: #6B7280;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bm-world-back-card__country {
  color: var(--bm-dark);
  font-weight: 700;
  font-size: 14px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-world-back-card__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: #F3F4F6;
  border: none;
  border-radius: 6px;
  color: #6B7280;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  margin-left: 4px;
}
.bm-world-back-card__close:hover {
  background: var(--bm-primary);
  color: #FFFFFF;
  transform: scale(1.05);
}
@keyframes bm-back-card-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 768px) {
  .bm-world-back-card {
    padding: 8px 10px;
    font-size: 12px;
    gap: 8px;
    margin: 8px;
  }
  .bm-world-back-card__country { max-width: 120px; font-size: 13px; }
}

/* =========================================
   4. AI TRANSFORMATION — beam + sparkles (CSS only, no JS)
   ========================================= */
.bm-home-ai {
  color: #FFFFFF;
  /* Sticky-pin hold zone — see .bm-home-character for pattern */
  min-height: calc(100vh + 400px);
  position: relative;
  text-align: center;
  background: radial-gradient(ellipse at center, #1A0F2E 0%, #0F0F1A 70%);
  overflow: visible;
}
.bm-home-ai__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.bm-home-ai__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.bm-home-ai__eyebrow {
  color: #E8415A;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.bm-home-ai__title {
  color: #FFFFFF;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
}
.bm-home-ai__subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 32px;
  text-align: center;
}
.bm-home-ai__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 40px;
}
/* Portraits — larger + dramatic (v6.5: 240 → 320)
   v6.5.1: overflow moved from container → <img> so the ::before shimmer
   ring (inset: -6px, painted outside the portrait) isn't clipped. The
   container is now overflow:visible with explicit z-index stacking. */
.bm-home-ai__portrait {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: visible;
  z-index: 1;
  /* 2026-05-20 — explicit (was `transition: all`). before/after state
     changes box-shadow only on this element. */
  transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.bm-home-ai__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;          /* clips itself round (parent no longer crops) */
  object-fit: cover;
  display: block;
  /* 2026-05-20 — explicit (was `transition: all`). before/after state
     changes filter (grayscale + brightness) only on the img. */
  transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Before — muted grayscale */
.bm-home-ai__portrait--before {
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.bm-home-ai__portrait--before img {
  filter: grayscale(0.7) brightness(0.85);
}
/* After — vivid with pink ring */
.bm-home-ai__portrait--after {
  box-shadow:
    0 20px 60px rgba(232, 65, 90, 0.5),
    0 0 0 4px rgba(232, 65, 90, 0.2);
}
.bm-home-ai__portrait-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(232, 65, 90, 0.6);
  pointer-events: none;
  z-index: 0;                  /* v6.5.1: behind shimmer ::before */
  animation: bm-ring-pulse 3s infinite ease-in-out;
}
@keyframes bm-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 0.2; }
}
.bm-home-ai__label {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.bm-home-ai__label strong {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bm-home-ai__label em {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
.bm-home-ai__portrait--after .bm-home-ai__label strong {
  color: #E8415A;
}
/* v6.5: shimmer ring — rotating conic gradient. Replaces the v6.1
   :has() cross-sibling blur/dim hover effect (which dimmed the
   non-hovered portrait). Now both portraits stay fully visible —
   "Real you" stays its statically-grayscaled self, "Tomorrow" stays
   vivid, only the ring spins faster on hover. */
.bm-home-ai__portrait::before {
  content: '';
  position: absolute;
  inset: -6px;                 /* v6.5.1: -3 → -6 (more visible offset) */
  border-radius: 50%;
  padding: 3px;                /* v6.5.1: 2 → 3 (thicker ring) */
  z-index: 2;                  /* v6.5.1: above img + ring */
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 50%,           /* v6.5.1: 70 → 50 (segment now ~50% arc) */
    #FF5C75 70%,
    #E8415A 80%,
    #FF5C75 90%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.85;               /* v6.5.1: 0.7 → 0.85 */
  pointer-events: none;
  animation: bm-shimmer-rotate 4s linear infinite;
  transition: opacity 0.4s ease;
}
/* Tomorrow ring: white-glint variant + offset start angle */
.bm-home-ai__portrait--after::before {
  background: conic-gradient(
    from 90deg,
    transparent 0%,
    transparent 50%,           /* v6.5.1: 70 → 50 */
    #FF5C75 70%,
    #FFFFFF 80%,
    #FF5C75 90%,
    transparent 100%
  );
}
@keyframes bm-shimmer-rotate {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
@media (hover: hover) and (pointer: fine) {
  /* Hover: lift + shimmer speeds up + brightens. No blur on the other
     side — both portraits stay equally visible. */
  .bm-home-ai__portrait:hover {
    transform: scale(1.05);
  }
  .bm-home-ai__portrait:hover::before {
    opacity: 1;
    animation-duration: 2s;
  }
}
/* Beam — gradient line + glow halo + 6 sparkles */
.bm-home-ai__beam {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bm-home-ai__beam-line {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 65, 90, 0.2) 10%,
    rgba(232, 65, 90, 1) 50%,
    rgba(232, 65, 90, 0.2) 90%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(232, 65, 90, 0.8);
  border-radius: 2px;
  animation: bm-beam-flow 2s infinite ease-in-out;
}
@keyframes bm-beam-flow {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scaleX(0.9);  }
  50%      { opacity: 1;   transform: translateY(-50%) scaleX(1.05); }
}
/* 2026-05-20 — Glow split into two layers to eliminate per-frame
   re-blur. Previous: single element with filter:blur(16px) AND
   animated transform:scale → the blur input changed every frame.
   New: ::before holds the STATIC blurred base (cached raster);
   ::after holds an unblurred copy that animates transform:scale +
   opacity (compositor only). Visual layered effect ≈ same. */
.bm-home-ai__beam-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* no filter, no animation on the wrapper */
}
.bm-home-ai__beam-glow::before,
.bm-home-ai__beam-glow::after {
  content: '';
  position: absolute;
  inset: 0;
}
.bm-home-ai__beam-glow::before {
  background: radial-gradient(circle at center, rgba(232, 65, 90, 0.35) 0%, transparent 70%);
  filter: blur(16px);
  /* static — cached once, no per-frame re-blur */
}
.bm-home-ai__beam-glow::after {
  background: radial-gradient(circle at center, rgba(232, 65, 90, 0.22) 0%, transparent 60%);
  /* unblurred, animation safe to play at 60fps */
  animation: bm-glow-pulse 3s infinite ease-in-out;
}
@keyframes bm-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1);   }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.bm-home-ai__sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 8px #FFFFFF, 0 0 16px rgba(232, 65, 90, 0.8);
  opacity: 0;
  animation: bm-ai-sparkle 2.5s infinite ease-in-out;
}
.bm-home-ai__sparkle--1 { top: 20%;    left: 15%;  animation-delay: 0s;   }
.bm-home-ai__sparkle--2 { top: 30%;    right: 20%; animation-delay: 0.4s; }
.bm-home-ai__sparkle--3 { top: 60%;    left: 25%;  animation-delay: 0.8s; }
.bm-home-ai__sparkle--4 { bottom: 20%; right: 15%; animation-delay: 1.2s; }
.bm-home-ai__sparkle--5 { top: 45%;    left: 50%;  animation-delay: 1.6s; }
.bm-home-ai__sparkle--6 { bottom: 30%; left: 40%;  animation-delay: 2s;   }
@keyframes bm-ai-sparkle {
  0%, 100% { opacity: 0; transform: scale(0)   rotate(0deg);   }
  50%      { opacity: 1; transform: scale(1.5) rotate(180deg); }
}
/* Mobile — iter4 (2026-05-05): minimal override, web shape preserved.
   iter2/iter3 yapısal override'ları (height:auto, display:flex, flex-direction
   on portrait, border-radius:0, label position:static) GERİ ALINDI — bunlar
   pembe ::before ring'ini bozuyordu. Şimdi sadece sayısal override'lar
   (boyut + spacing). Label hala default position:absolute bottom:-60px;
   portrait container'a margin-bottom:60px ile altında label için yer açıldı.
   Stage gap:0 çünkü margin-bottom zaten boşluğu sağlıyor. */
@media (max-width: 640px) {
  .bm-home-ai { padding: 24px 16px; }
  .bm-home-ai__eyebrow { margin-bottom: 8px; }
  .bm-home-ai__title { margin-bottom: 8px; }
  .bm-home-ai__subtitle {
    font-size: 14px;
    margin: 0 20px 16px;
  }
  .bm-home-ai__stage {
    flex-direction: column;
    gap: 0;
  }
  .bm-home-ai__portrait {
    width: 200px;
    height: 200px;
    margin-bottom: 60px;
  }
  .bm-home-ai__beam {
    width: 64px;
    height: 64px;
    transform: rotate(90deg);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bm-home-ai__portrait-ring,
  .bm-home-ai__portrait::before,
  .bm-home-ai__beam-line,
  .bm-home-ai__beam-glow,
  .bm-home-ai__sparkle {
    animation: none;
  }
}

/* =========================================
   5. ECONOMY — 3-iPhone hover spotlight
   ========================================= */
.bm-home-economy {
  /* Sticky-pin hold zone — see .bm-home-character for pattern */
  min-height: calc(100vh + 400px);
  position: relative;
  background: var(--bm-home-bg-economy);
  overflow: visible;
}
.bm-home-economy__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 48px;
  box-sizing: border-box;
  overflow: hidden;
}
/* =========================================
   "Build a life." fan layout (2026-05-01)
   =========================================
   3 device mockups: left tilted -10°, center front+larger, right
   tilted +10°. Each phone bobs at a different tempo via separate
   keyframe but using shared CSS custom properties for offset/tilt/
   float — so tablet/mobile breakpoints just override the variables,
   not the keyframes themselves.
   ========================================= */
/* polish (2026-05-05): gradient + decorative pink glow removed —
   plain white section per Sezgin onay (web + mobile). ::before is now
   display:none everywhere (was already display:none on mobile). */
.bm-home-economy {
  background: #ffffff;
}
.bm-home-economy::before {
  display: none;
}
.bm-home-economy__sticky > .bm-container {
  position: relative;
  z-index: 1;
}
.bm-home-economy .bm-home__title {
  font-size: 48px;
  font-weight: 700;
  color: #0f0f0f;
  text-align: center;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  .bm-home-economy .bm-home__title {
    font-size: 32px;
  }
}

.bm-life-stage {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50px);
}
@media (max-width: 1023px) and (min-width: 768px) {
  .bm-life-stage { height: 460px; }
}
@media (max-width: 767px) {
  .bm-life-stage { height: 400px; }
}

.bm-life-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -224px; /* half of frame height (449) — polish 2026-05-05 */
  will-change: transform;
}
/* Frame is now a transparent wrapper — PNG screenshots have their own
   iPhone bezel + notch baked in (1184×2525). CSS frame would create
   a double-bezel; transparent + 0 padding/radius lets the PNG render
   1:1. Width/height retained for layout (parent .bm-life-phone uses
   absolute positioning + animation which needs concrete dimensions). */
.bm-life-phone__frame {
  width: 242px;
  height: 494px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
/* Notch + placeholder hidden — PNG provides notch; placeholder unused
   once real assets exist. */
.bm-life-phone__notch {
  display: none;
}
.bm-life-phone__placeholder {
  display: none;
}
.bm-life-phone__screen {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.bm-life-phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

/* Left phone — tilted -10°, bob 8px, 5.5s tempo */
.bm-life-phone--left {
  --offset: -242px;
  --tilt: -10deg;
  --float: -8px;
  z-index: 1;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
  animation: bm-life-float-left 5.5s ease-in-out infinite;
}

/* Right phone — tilted +10°, bob 10px, 6s tempo */
.bm-life-phone--right {
  --offset: 242px;
  --tilt: 10deg;
  --float: -10px;
  z-index: 1;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
  animation: bm-life-float-right 6s ease-in-out infinite;
}

/* Center phone — bigger, on top, bob 12px, 5s tempo */
.bm-life-phone--center {
  --float: -12px;
  z-index: 2;
  margin-top: -242px; /* intentionally not updated to half of 534 — keeps center ~25px below vertical mid (visual pull-down) */
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.2));
  animation: bm-life-float-center 5s ease-in-out infinite;
}
.bm-life-phone--center .bm-life-phone__frame {
  width: 262px;
  height: 534px;
  padding: 8px;
  border-radius: 48px;
}
.bm-life-phone--center .bm-life-phone__notch {
  width: 100px;
  height: 28px;
  border-radius: 14px;
  top: 9px;
}
.bm-life-phone--center .bm-life-phone__screen {
  border-radius: 43px;
}

/* Tablet (max-1023): closer offsets */
@media (max-width: 1023px) {
  .bm-life-phone--left  { --offset: -198px; }
  .bm-life-phone--right { --offset: 198px; }
}

/* Mobile (max-767): swipe carousel (CSS-only).
   Fan layout disabled — phones become horizontal scroll-snap targets.
   Desktop @keyframes bm-life-float-* preserved (unused on mobile because
   `animation: none !important` clears it; still applied on desktop ≥768).
   !important required because desktop rules use absolute positioning and
   per-phone variants (--offset/--tilt/--float) with high specificity. */
@media (max-width: 767px) {
  /* Decorative pembe radial glow taşıyor mobile'da (rgba 0.04 çok soluk),
     gizle — görsel kayıp minimum, desktop'ta görünür kalır. */
  .bm-home-economy::before { display: none; }

  /* Stage: horizontal scroll container with snap.
     Override desktop height (520) and earlier mobile rule (400). */
  .bm-life-stage {
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 16px 0;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bm-life-stage::-webkit-scrollbar { display: none; }

  /* Phone: scroll-snap target. Clear fan absolute positioning + animation. */
  .bm-life-phone {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
    z-index: auto !important;
    flex: 0 0 260px;
    scroll-snap-align: center;
  }
  /* First/last gutters so first/last phone can center under viewport.
     calc((100vw - 260px) / 2 - 16px) = side space minus the gap.
     max(0, ...) protects against negative margins on very narrow viewports.
     iter2: 220→260 phone width bump, formula updated to match. */
  .bm-life-phone:first-child { margin-left: max(0px, calc((100vw - 260px) / 2 - 16px)) !important; }
  .bm-life-phone:last-child  { margin-right: max(0px, calc((100vw - 260px) / 2 - 16px)) !important; }

  /* Phone frame: 260×531 wrapper. padding/border-radius zeroed to match
     the asset-upload sprint default — PNG has its own bezel; carousel
     only needs the dimensions for layout/snap centering. */
  .bm-life-phone__frame {
    width: 260px;
    height: 531px;
    padding: 0;
    border-radius: 0;
  }
  .bm-life-phone__screen { border-radius: 0; }
  .bm-life-phone__notch {
    width: 82px;
    height: 24px;
    border-radius: 13px;
    top: 7px;
  }
  /* Center phone: same size as siblings in carousel (no fan focus). */
  .bm-life-phone--center .bm-life-phone__frame {
    width: 260px;
    height: 531px;
    padding: 0;
    border-radius: 0;
  }
  .bm-life-phone--center .bm-life-phone__screen { border-radius: 0; }

  /* shadow-fix (2026-05-05): default-scope drop-shadow yarattığı soluk
     gri halka mobile'da telefon alt-üstünde "ince gri şerit" olarak
     görünüyordu (Sezgin onayı). Web'de gölge görsel önemli kalır,
     mobile'da kaldır. !important çünkü --left/--center/--right rule'ları
     filter'i variant-specific tanımlıyor. */
  .bm-life-phone--left,
  .bm-life-phone--center,
  .bm-life-phone--right {
    filter: none !important;
  }
}

@keyframes bm-life-float-left {
  0%, 100% { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(0); }
  50%      { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(var(--float)); }
}
@keyframes bm-life-float-right {
  0%, 100% { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(0); }
  50%      { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)) translateY(var(--float)); }
}
@keyframes bm-life-float-center {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(var(--float)); }
}

/* Reduced motion — pause float, hold static end-position */
@media (prefers-reduced-motion: reduce) {
  .bm-life-phone--left,
  .bm-life-phone--center,
  .bm-life-phone--right { animation: none !important; }
  .bm-life-phone--left  { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)); }
  .bm-life-phone--right { transform: translateX(-50%) translateX(var(--offset)) rotate(var(--tilt)); }
  .bm-life-phone--center{ transform: translateX(-50%); }
}

/* =========================================
   6. COMMUNITY — 3-panel scroll showcase (v4.4)
   ========================================= */
.bm-home-community {
  background: var(--bm-home-bg-community);
  position: relative;
  min-height: calc(100vh + 900px);
  padding: 0;
  overflow: visible;
}

/* Sticky stage — flex column, vertically-centered head + stage.
   v2: top:header-height (header altına yapışır, üstüne taşma yok) +
   height:section-height (header çıkarılmış, "üst boşluk fazla" hissi
   yok). Padding sadece içerik breathing — header offset artık dış
   kapsamda yapılıyor. */
.bm-home-community__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 32px;
  box-sizing: border-box;
  gap: clamp(32px, 5vh, 64px);
  overflow: hidden;
}

.bm-home-community__head {
  flex-shrink: 0;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.bm-home-community__stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1200px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bm-home-community__title {
  text-align: center;
  margin: 0;                        /* gap stickyden geliyor */
  color: var(--bm-dark);
  font-weight: 800;
}
.bm-home-community__panels {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 440px;
}
.bm-home-community__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-home-community__panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bm-home-community__sub {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bm-dark);
  margin: 0 0 1rem;
}
.bm-home-community__text {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
  max-width: 34ch;
}
.bm-home-community__visual { display: flex; justify-content: center; }

/* Progress dots — sit below the panel stage in normal flex flow.
   Eski layout absolute + bottom:3rem ile sticky'nin bottom kenarına
   yapışıyordu; restructure ile dots __stage'in son flex child'ı oldu. */
.bm-home-community__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  z-index: 2;
}
/* 2026-05-20b — width transition restored. The "neighbor-pushing" akordeon
   feel is the desired UX (active dot grows AND row widens). The earlier
   scaleX(3) attempt kept layout fixed → row never grew → wrong visual.
   `width` is a layout property and IS the only way to make neighbors
   move; perf cost: 3 elements × user-initiated panel snap (not scroll-
   continuous) × 300ms = trivial, well below the threshold that flagged
   the 90 world-pins / 14 FAQ panels for layout-jank concerns. Explicit
   transition list (was `transition: all`) so unrelated property changes
   never trigger surprise animation. border-radius: 50% covers both
   states visually (8×8 circle and 24×8 pill — capped to 4px radius). */
.bm-home-community__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.2);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.bm-home-community__dot.is-active {
  background: var(--bm-primary);
  width: 24px;
}

/* ---- Chat mock (panel 1) ---- */
.bm-chat-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(232, 65, 90, 0.08);
}
.bm-chat-mock__msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.bm-chat-mock__msg--me { justify-content: flex-end; }
.bm-chat-mock__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #FFFFFF;
  flex-shrink: 0;
}
.bm-chat-mock__bubble {
  max-width: 220px;
  padding: 10px 14px;
  background: #F3F4F6;
  color: var(--bm-dark);
  border-radius: 18px 18px 18px 4px;
  font-size: 14px;
  line-height: 1.4;
}
.bm-chat-mock__bubble--me {
  background: var(--bm-primary);
  color: #FFFFFF;
  border-radius: 18px 18px 4px 18px;
}
.bm-chat-mock__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  background: #F3F4F6;
}
.bm-chat-mock__bubble--typing span {
  width: 6px;
  height: 6px;
  background: var(--bm-text-muted);
  border-radius: 50%;
  animation: bm-typing-dot 1.4s infinite;
}
.bm-chat-mock__bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.bm-chat-mock__bubble--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bm-typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---- Event mock (panel 2) ---- */
.bm-event-mock {
  width: 100%;
  max-width: 360px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(232, 65, 90, 0.08);
}
.bm-event-mock__img {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, #1E3A8A 0%, #4C1D95 50%, #E8415A 100%);
  overflow: hidden;
}
.bm-event-mock__img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.3), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(232, 65, 90, 0.4), transparent 50%);
}
.bm-event-mock__date {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #FFFFFF;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.bm-event-mock__date strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--bm-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bm-event-mock__date span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bm-primary);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.bm-event-mock__body { padding: 16px 20px 20px; }
.bm-event-mock__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--bm-dark);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.bm-event-mock__meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--bm-text-muted);
  margin-bottom: 14px;
}
.bm-event-mock__meta i { margin-right: 4px; color: var(--bm-primary); }
.bm-event-mock__avatars { display: flex; align-items: center; margin-bottom: 14px; }
.bm-event-mock__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #FFFFFF;
  margin-left: -8px;
}
.bm-event-mock__avatar:first-child { margin-left: 0; }
.bm-event-mock__count {
  margin-left: 12px;
  font-size: 13px;
  color: var(--bm-text-muted);
  font-weight: 500;
}
.bm-event-mock__cta {
  width: 100%;
  padding: 12px;
  background: var(--bm-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: default;
}

/* ---- Forum mock (panel 3) ---- */
.bm-forum-mock {
  width: 100%;
  max-width: 380px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(232, 65, 90, 0.08);
}
.bm-forum-mock__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.2s ease;
}
.bm-forum-mock__row:last-child { border-bottom: none; }
.bm-forum-mock__row:hover { background: rgba(232, 65, 90, 0.04); }
.bm-forum-mock__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.bm-forum-mock__body { flex: 1; min-width: 0; }
.bm-forum-mock__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-dark);
  letter-spacing: -0.01em;
}
.bm-forum-mock__count {
  font-size: 12px;
  color: var(--bm-text-muted);
  margin-top: 2px;
}
.bm-forum-mock__chev {
  color: var(--bm-text-subtle);
  font-size: 16px;
}

/* Mobile (mega-fix 2026-05-05): yatay swipe carousel (Build a life pattern).
   Sticky devre dışı, 3 panel yan yana scroll-snap. JS mobile'da pasif
   (initCommunityScroll early-return), kullanıcı parmakla swipe eder.
   Dots STATIK indikatör — kullanıcı 3 panel olduğunu görür. */
@media (max-width: 768px) {
  .bm-home-community {
    min-height: 0;
    padding: clamp(3rem, 8vw, 5rem) 0;
  }
  .bm-home-community__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding: 0;
    gap: 0;
  }
  .bm-home-community__head {
    padding-bottom: 32px;
  }
  .bm-home-community__stage {
    display: block;
    width: auto;
  }

  /* Panels — horizontal scroll-snap carousel.
     2026-05-19b: negative margin (`margin: 0 -16px`) removed — it made
     the container 32px wider than viewport, throwing off scroll-snap
     center math (active panel rendered ~16px right of true center,
     unbalanced peek). New model: container is exactly viewport-wide,
     `scroll-padding-inline: 7.5vw` defines the snap reference point. */
  /* 2026-05-19d — canonical CSS carousel pattern: `padding-inline` (real,
     extends scroll area) + snap-align:center. Replaces previous
     `scroll-padding-inline + snap-align:start` which broke at boundaries:
     first panel snap target was scrollLeft -29.25 → clamped to 0 →
     panel flush-left with no peek; last panel snap target exceeded
     scrollLeftMax → clamped → panel flush-right. With real padding-inline,
     scrollWidth grows by 2 * 7.5vw so first/last panels have actual room
     to snap-center inside the scrollport. Verified with headless trace:
     all 3 panels now snap with symmetric ~29px peek on 390×844 viewport. */
  .bm-home-community__panels {
    position: static;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-inline: 7.5vw;               /* real container padding extends scroll area */
    padding-block: 16px;
    scroll-behavior: smooth;
    gap: 16px;
    margin: 0;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bm-home-community__panels::-webkit-scrollbar { display: none; }

  .bm-home-community__panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    flex: 0 0 85vw !important;
    scroll-snap-align: center;           /* center pairs with container padding-inline for symmetric peek */
    scroll-snap-stop: always;
    grid-template-columns: 1fr;
    gap: 1rem;
    /* Defensive: grid items inside that contain flex children must allow
       shrinking to the panel width — otherwise inner mocks (which now have
       their max-width caps removed by the rule below) could overflow. */
    min-width: 0;
    box-sizing: border-box;
  }
  /* First/last gutters explicitly zeroed — peek comes from container's
     padding-inline, not panel margins. Defensive against earlier cascade. */
  .bm-home-community__panel:first-child { margin-left: 0 !important; }
  .bm-home-community__panel:last-child  { margin-right: 0 !important; }

  /* Visual mocks — fill the panel width (override the desktop max-width caps
     of 320/360/380px). Defensive min-width:0 on flex/grid descendants
     prevents long content from forcing the card wider than its container. */
  .bm-chat-mock,
  .bm-event-mock,
  .bm-forum-mock {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .bm-home-community__visual {
    width: 100%;
    min-width: 0;
  }
  /* Long words (DE / RU / JA without spaces) shouldn't push the card wider. */
  .bm-home-community__sub,
  .bm-home-community__text,
  .bm-event-mock__title,
  .bm-forum-mock__title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 3.A — Copy block centered on mobile (single-column grid; on desktop the
     2-column grid kept it left-aligned next to the visual). */
  .bm-home-community__copy {
    text-align: center;
  }
  .bm-home-community__text {
    margin-inline: auto;          /* max-width: 34ch is set in default scope */
  }

  /* Sub-title compact — clamp() default goes ~38px on narrow viewports,
     too dominant inside a 85vw card. */
  .bm-home-community__sub {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .bm-home-community__text {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* Dots — static visual indicator (JS doesn't toggle .is-active on mobile).
     Default scope already styles dot 8×8 / active 24×8 — kept. */
  .bm-home-community__dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
}

/* =========================================
   7. TICKET — "Your ticket. Your seat." Boarding Pass Cinema
   =========================================
   3 vintage-paper tickets in a row (Concert / Football / Theatre):
   square photo on top, perforation strip with notches + dashed line,
   event details below. Cards slightly tilted (-2°/+1°/+3°), middle
   one shifted up 12px for hierarchy. Hover (desktop) lifts and flattens.
   ========================================= */
.bm-home-ticket {
  /* sticky-restore (2026-05-05): pin hold zone GERİ (Çözüm 2 hibrit).
     Önceki mega-fix Çözüm 1 sticky'yi tamamen iptal etmişti — yanlış
     karar. Asıl sebep overflow:hidden + height bound idi. Şimdi sticky
     korunur, sadece overflow:visible + padding daraltma. */
  min-height: calc(100vh + 400px);
  position: relative;
  text-align: center;
  background:
    radial-gradient(ellipse at top, #26161d 0%, #1f1218 60%, #15090e 100%);
  overflow: visible;
}
/* Decorative red radial accents (top-left + bottom-right) */
.bm-home-ticket::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(220, 38, 60, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 80% 70%, rgba(220, 38, 60, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Diagonal scan line texture (subtle paper feel) */
.bm-home-ticket::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 1px,
    rgba(255, 255, 255, 0.04) 1px,
    rgba(255, 255, 255, 0.04) 2px
  );
  pointer-events: none;
  z-index: 0;
}
.bm-home-ticket__sticky {
  /* sticky-restore (2026-05-05): position:sticky GERİ + overflow:visible
     + padding daraltma (80/100 → 40/60, -80px tasarruf). Eski overflow:
     hidden kesimini overflow:visible ile aç + padding küçült → ticket
     alt yarı görünür, sticky pin behavior korunur. */
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 24px 60px;
  box-sizing: border-box;
  overflow: visible;
}
.bm-home-ticket__sticky > .bm-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Eyebrow pill */
/* ticket-polish (2026-05-05): eyebrow pill gizlendi (Sezgin onayı).
   Visual rule'lar dead-code, korumak için block sadece display:none. */
.bm-ticket-eyebrow { display: none; }
.bm-ticket-eyebrow__dot {
  width: 6px;
  height: 6px;
  background: #ff5970;
  border-radius: 50%;
  animation: bm-ticket-pulse 1.6s ease-in-out infinite;
}
@keyframes bm-ticket-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Title — gradient-italic accent on second half */
.bm-home-ticket .bm-home__title {
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 14px;
}
.bm-ticket-title-accent {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #ff5970 0%, #ff8a5c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bm-ticket-subtitle {
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  margin: 0 auto 54px;
}

/* Grid — 3 columns desktop, single column mobile */
.bm-ticket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 891px;
  margin: 0 auto;
  transform: translateY(-20px);
}

/* Ticket — outer reset; rotation + middle-lift on .bm-ticket__inner */
.bm-ticket {
  position: relative;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
}
.bm-ticket--2 { margin-top: -12px; }

.bm-ticket__inner {
  background: linear-gradient(135deg, #f4ead5 0%, #e8d9b8 100%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.18);
  position: relative;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bm-ticket--1 .bm-ticket__inner { transform: rotate(-2deg); }
.bm-ticket--2 .bm-ticket__inner {
  transform: rotate(1deg);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}
.bm-ticket--3 .bm-ticket__inner { transform: rotate(3deg); }

.bm-ticket__paper-grain {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(101, 68, 35, 0.4) 2px,
    rgba(101, 68, 35, 0.4) 3px
  );
  pointer-events: none;
  z-index: 5;
}

.bm-ticket__image-wrap {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: #2a1810;
}
.bm-ticket__image-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #5a4250 0%, #4a3340 100%);
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-ticket__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.bm-ticket__kind-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 9px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
  z-index: 4;
}
/* ============ Polaroid (selfie overlay) ============ */
.bm-ticket__polaroid {
  position: absolute;
  bottom: 14px;
  right: 12px;
  z-index: 6; /* was 4 — now above .bm-ticket__paper-grain (z-index: 5) so polaroid stays clean */
  background: white;
  padding: 4px 4px 12px;
  transform: rotate(var(--polaroid-rotation, 0deg));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  transition: transform 0.4s ease;
}
.bm-ticket__polaroid img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .bm-ticket__polaroid {
    bottom: 10px;
    right: 8px;
    padding: 5px 5px 14px;
    /* Sürekli rüzgar sallanması — her polaroid'in kendi rotation'ının
       üzerine ±2° amplitude. 3 polaroid stagger için negative delays. */
    animation: polaroid-sway 4s ease-in-out infinite;
    transform-origin: top center;
  }
  .bm-ticket--1 .bm-ticket__polaroid { animation-delay: 0s; }
  .bm-ticket--2 .bm-ticket__polaroid { animation-delay: -1.3s; }
  .bm-ticket--3 .bm-ticket__polaroid { animation-delay: -2.6s; }
  .bm-ticket__polaroid img {
    width: 100px;
    height: 100px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .bm-ticket:hover .bm-ticket__polaroid {
    transform: rotate(0deg) scale(1.05);
  }
}

/* Polaroid keyframes (top-level — mobile uses sway, tap-bounce on .is-tapped) */
@keyframes polaroid-sway {
  0%, 100% {
    transform: rotate(var(--polaroid-rotation, 0deg));
  }
  50% {
    transform: rotate(calc(var(--polaroid-rotation, 0deg) + 2deg));
  }
}
@keyframes polaroid-tap-bounce {
  0% {
    transform: rotate(var(--polaroid-rotation, 0deg)) scale(1);
  }
  20% {
    transform: rotate(0deg) scale(1.5);
  }
  80% {
    transform: rotate(0deg) scale(1.5);
  }
  100% {
    transform: rotate(var(--polaroid-rotation, 0deg)) scale(1);
  }
}
/* Tap state (JS adds .is-tapped on click). Overrides sway animation
   for 2.4s, then JS removes the class and sway resumes. */
.bm-ticket__polaroid.is-tapped {
  animation: polaroid-tap-bounce 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 10;
}

/* Reduced-motion respect — kill all polaroid animations for users
   who prefer reduced motion (iOS Settings → Accessibility → Motion). */
@media (prefers-reduced-motion: reduce) {
  .bm-ticket__polaroid,
  .bm-ticket__polaroid.is-tapped {
    animation: none !important;
  }
}

/* Perforation — notches at edges + dashed line crossing */
.bm-ticket__perforation {
  position: relative;
  height: 24px;
  background: transparent;
}
.bm-ticket__notch {
  position: absolute;
  top: 2px;
  width: 20px;
  height: 20px;
  background: radial-gradient(ellipse at top, #1a0e12 0%, #0a0606 60%);
  border-radius: 50%;
  z-index: 6;
}
.bm-ticket__notch--left  { left: -10px; }
.bm-ticket__notch--right { right: -10px; }
.bm-ticket__dashed-line {
  position: absolute;
  top: 11px;
  left: 14px;
  right: 14px;
  border-top: 2px dashed #c9b58e;
  z-index: 6;
}

/* Info section — admit/serial, title, venue, details */
.bm-ticket__info {
  padding: 12px 18px 18px;
}
.bm-ticket__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.bm-ticket__admit,
.bm-ticket__serial {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #4a3318;
}
.bm-ticket__serial { text-align: right; }
.bm-ticket__title {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: #2a1810;
  margin: 0 0 3px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.bm-ticket__venue {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #3d2a14;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.bm-ticket__details {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: #6b4f2a;
}
.bm-ticket__details > div {
  display: flex;
  flex-direction: column;
}
.bm-ticket__details dt {
  opacity: 1;
  font-weight: 400;
  color: #3d2a14;
}
.bm-ticket__details dd {
  color: #2a1810;
  font-weight: 700;
  margin: 2px 0 0;
}

/* Hover — desktop pointer:fine devices only */
@media (hover: hover) and (pointer: fine) {
  .bm-ticket:hover {
    transform: translateY(-12px) scale(1.02);
    z-index: 10;
  }
  .bm-ticket--1:hover .bm-ticket__inner { transform: rotate(-1deg); }
  .bm-ticket--2:hover .bm-ticket__inner { transform: rotate(0deg); }
  .bm-ticket--3:hover .bm-ticket__inner { transform: rotate(1.5deg); }
}

/* Tablet — keep 3-up but tighter */
@media (max-width: 1023px) and (min-width: 768px) {
  .bm-home-ticket .bm-home__title { font-size: 44px; }
  .bm-ticket-grid { gap: 20px; max-width: 836px; }
}

/* Mobile — single column, flat tickets, no middle lift */
@media (max-width: 767px) {
  .bm-home-ticket__sticky { padding: 56px 16px 72px; }
  .bm-home-ticket .bm-home__title { font-size: 32px; }
  .bm-ticket-subtitle { margin-bottom: 48px; }
  .bm-ticket-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 32px;
  }
  .bm-ticket--1 .bm-ticket__inner,
  .bm-ticket--2 .bm-ticket__inner,
  .bm-ticket--3 .bm-ticket__inner { transform: rotate(0); }
  .bm-ticket--2 { margin-top: 0; }

  /* mega-fix (2026-05-05): readability — font scale +20-22% + AA contrast.
     Default scope values are tuned for desktop reading distance; mobile
     needs both larger size and darker tones. dd values already #2a1810
     (AAA), only dt + venue + admit/serial need contrast lift. */
  .bm-ticket__admit,
  .bm-ticket__serial {
    font-size: 11px;        /* 9 → 11 (+22%) */
    color: #6b4f2a;         /* taupe #8b6f3a → koyu (kontrast 3.6 → 5.8, AA pass) */
  }
  .bm-ticket__title { font-size: 18px; }   /* 15 → 18 (+20%) */
  .bm-ticket__venue {
    font-size: 12px;        /* 10 → 12 (+20%) */
    color: #5b4222;         /* daha koyu kahve */
  }
  .bm-ticket__details { font-size: 12px; } /* 10 → 12 (+20%) */
  .bm-ticket__details dt {
    opacity: 1;             /* 0.6 → 1 (kontrast tam) */
    color: #5b4222;         /* effective ~#8e7a5c → #5b4222, AA pass */
  }
  /* dd (DATE values) already #2a1810 / weight 700 → AAA, dokunulmaz */
}

/* Reduced motion — kill all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  .bm-ticket,
  .bm-ticket__inner,
  .bm-ticket__image,
  .bm-ticket__image-placeholder { transition: none !important; }
  .bm-ticket-eyebrow__dot { animation: none !important; }
}

/* iOS Safari URL bar düzeltmesi — dvh varsa tüm sticky stage'ler
   header çıkarılmış dvh kullanır. Eski tarayıcılar vh fallback'inde kalır.
   v4: 7 statik bölüm + community = 8 sticky (screens silindi 2026-05-05). */
@supports (height: 100dvh) {
  .bm-home-character__sticky,
  .bm-home-world__sticky,
  .bm-home-ai__sticky,
  .bm-home-economy__sticky,
  .bm-home-ticket__sticky,
  .bm-home-cta__sticky,
  .bm-home-faq__sticky,
  .bm-home-community__sticky {
    height: var(--bm-section-height-dvh);
  }
}

@supports (height: 100dvh) {
  /* All static sections (except hero) have sticky-pin hold zone.
     Hero handles its own 100dvh enforcement in the v4 block at line ~318. */
  .bm-home-character,
  .bm-home-world,
  .bm-home-ai,
  .bm-home-economy,
  .bm-home-ticket,
  .bm-home-cta,
  .bm-home-faq {
    min-height: calc(100dvh + 400px);
  }
}

/* =========================================
   9. FAQ — smooth open + close (both directions)
   ========================================= */
.bm-home-faq {
  background: var(--bm-home-bg-faq);
  /* Sticky-pin hold zone — see .bm-home-character */
  min-height: calc(100vh + 400px);
  position: relative;
  overflow: visible;
}
.bm-home-faq__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* clamp() scales vertical padding to viewport — small laptops sıkı,
     büyük masaüstü ferah. Horizontal padding sabit kalır. */
  padding: clamp(8px, 1.5vh, 16px) 24px clamp(16px, 3vh, 32px);
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}
/* 2026-05-19c (live-measurement fix): the FAQ markup wraps title + grid
   inside `.bm-container` (a generic max-width centerer). Sticky's flex
   children are therefore [.bm-container] — NOT [title, grid] — so
   `flex: 1` on .bm-home-faq__grid was being ignored (grid's actual
   parent .bm-container is `display: block`, not flex). Headless trace
   showed grid filling only 49% of sticky height (406/828px), with
   343.5px empty below the last card. Fix: turn the container itself
   into a flex column that grows, so the grid (now its flex child) can
   actually claim remaining height + apply `align-content: space-evenly`. */
.bm-home-faq__sticky > .bm-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;          /* allow shrink below content height in tight viewports */
  width: 100%;
}
.bm-home-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2rem;             /* row gap handled by align-content: space-evenly */
  max-width: 1100px;
  margin: 0 auto;          /* space-evenly handles top/bottom distribution */
  align-items: start;
  width: 100%;
  /* Fill remaining vertical space in sticky pane, then distribute the 7
     rows with equal spacing (top, between, bottom) so cards never sit
     compact at the top of a much taller pane. Cards themselves keep
     their natural button height — only the empty space between rows
     scales with viewport. */
  flex: 1 1 auto;
  align-content: space-evenly;
}
@media (min-width: 900px) {
  .bm-home-faq__grid { grid-template-columns: 1fr 1fr; }
}
/* Item is the popover anchor — answer panel uses position:absolute relative
   to this. Margin-bottom scales with viewport. `overflow: visible` so the
   overlay isn't clipped by its own card (sticky pane is still overflow:hidden,
   which is the intended outer boundary). */
.bm-home-faq__item {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--bm-border);
  border-radius: 12px;
  margin-bottom: clamp(0.4rem, 1vh, 0.75rem);
  overflow: visible;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bm-home-faq__item:hover { border-color: rgba(232,65,90,0.3); }
.bm-home-faq__item[aria-expanded="true"] {
  border-color: var(--bm-primary);
  box-shadow: 0 8px 24px rgba(232,65,90,0.12);
  z-index: 11; /* lift the open card above siblings so its overlay can connect visually */
}
/* H3 wrapper added 2026-05-16 for WAI-ARIA accordion semantics + FAQ schema
 * compatibility. Zero default heading spacing — button keeps full visual control. */
.bm-home-faq__q-heading {
  margin: 0;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.bm-home-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  /* Vertical padding clamped — küçük ekranda sıkı, büyük ekranda ferah.
     Horizontal sabit. */
  padding: clamp(0.5rem, 1.5vh, 1rem) 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bm-dark);
  border-radius: 12px; /* match parent so focus-ring matches the card shape */
}
.bm-home-faq__q:focus-visible {
  outline: 2px solid var(--bm-primary);
  outline-offset: 2px;
}

/* Plus icon (rotates to X on open) */
.bm-home-faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-home-faq__icon::before,
.bm-home-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--bm-primary);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.bm-home-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bm-home-faq__item[aria-expanded="true"] .bm-home-faq__icon {
  transform: rotate(45deg);
}

/* =========================================
   Answer overlay popover (2026-05-19, smoothed 2026-05-19b)
   =========================================
   2026-05-19b: animation switched from max-height/padding to transform +
   opacity. max-height is a layout property — every animation frame
   triggers reflow + repaint, which is what made the open/close feel
   "5 fps". transform + opacity are compositor-only (GPU layer), so the
   transition runs at 60fps without touching layout.

   Sizing model:
     - padding is CONSTANT (1.25rem closed AND open) — no padding animation.
     - max-height caps the panel's content height (clamp(200px,60vh,600px))
       to prevent giant panels; this value never animates. overflow-y:auto
       on the inner <p> handles overflow.
   Visibility model:
     - Closed: opacity 0 + slight translateY + scaleY(0.96) + pointer-events:none
       — invisible, not clickable, no layout impact (panel is position:absolute).
     - Open  : opacity 1 + transform:none + pointer-events:auto.
     - Direction (.is-open-down / .is-open-up) flips transform-origin and
       initial translateY so it slides FROM the right side of the toggle. */
/* 2026-05-19c (live-measurement fix): scaleY(0.96) removed entirely.
   Headless trace caught the panel content being vertically squashed at
   0.96 → 1.0 (the "ezilme" / deform). Apple-style: opacity + tiny
   translateY only. No scale, no transform-origin (no scale to anchor). */
.bm-home-faq__answer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 12;
  background: #FFFFFF;
  border: 1px solid var(--bm-primary);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15, 15, 26, 0.16),
              0 4px 12px rgba(232, 65, 90, 0.08);
  padding: 1.25rem;                    /* always — never animated */
  opacity: 0;
  pointer-events: none;
  /* 2026-05-20 — permanent will-change removed. Was promoting 14 panels
     to GPU layers all the time (memory waste even when closed).
     main.js initFaq() now sets el.style.willChange = 'transform, opacity'
     during open/close transition, and clears to 'auto' on transitionend. */
  /* Default direction (before JS class lands) — open down, harmless */
  top: 100%;
  margin-top: 0.5rem;
  transform: translateY(-6px);
  /* Only compositor-friendly properties transition. cubic-bezier(0.22,1,0.36,1)
     is a soft ease-out — premium feel without bounce. */
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-home-faq__answer > p {
  margin: 0;
  color: var(--bm-text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  /* Content height cap moved here from the panel — long answers scroll
     inside the <p>; panel itself doesn't need max-height animation. */
  max-height: clamp(200px, 60vh, 600px);
  overflow-y: auto;
}

/* Open state: settle to identity transform. Siblings unaffected (absolute). */
.bm-home-faq__item[aria-expanded="true"] .bm-home-faq__answer {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Smart direction classes — initial translateY direction matches the
   visual slide-in side. No scale means no content deformation. */
.bm-home-faq__item.is-open-down .bm-home-faq__answer {
  top: 100%;
  bottom: auto;
  margin-top: 0.5rem;
  margin-bottom: 0;
  transform: translateY(-6px);
}
.bm-home-faq__item.is-open-up .bm-home-faq__answer {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
  transform: translateY(6px);
}
.bm-home-faq__item.is-open-down[aria-expanded="true"] .bm-home-faq__answer,
.bm-home-faq__item.is-open-up[aria-expanded="true"] .bm-home-faq__answer {
  transform: translateY(0);
}

/* Accessibility: respect reduced-motion. Skip the slide; instant fade
   keeps the toggle understandable without animation. */
@media (prefers-reduced-motion: reduce) {
  .bm-home-faq__answer {
    transition: opacity 0.15s linear;
    transform: none !important;
  }
}

/* =========================================
   Tiny-screen escape hatch (2026-05-19)
   =========================================
   At < ~600px usable viewport height, 14 cards physically don't fit even
   with clamp padding. Drop the viewport-lock pattern: sticky off, natural
   flow, page scroll. Overlay popover still works (still absolute over its
   own card). Triggers only on desktop widths — mobile already disables
   sticky at <=1023px (line ~2592 block). */
@media (max-height: 600px) and (min-width: 1024px) {
  .bm-home-faq {
    min-height: auto;
  }
  .bm-home-faq__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    padding-bottom: 2rem;
  }
}

/* =========================================
   10. CTA
   ========================================= */
.bm-home-cta {
  color: #FFFFFF;
  text-align: center;
  /* Sticky-pin hold zone — see .bm-home-character for pattern */
  min-height: calc(100vh + 400px);
  position: relative;
  background: var(--bm-home-bg-cta);
  overflow: visible;
}
.bm-home-cta__sticky {
  position: sticky;
  top: var(--bm-header-height);
  height: var(--bm-section-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 24px 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.bm-home-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bm-home-cta__star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 50%;
  opacity: 0.6;
}
.bm-home-cta__star:nth-child(1)  { top: 10%; left: 15%; animation: bm-star-twinkle 3s infinite; }
.bm-home-cta__star:nth-child(2)  { top: 20%; left: 70%; animation: bm-star-twinkle 4s infinite 0.5s; }
.bm-home-cta__star:nth-child(3)  { top: 35%; left: 30%; animation: bm-star-twinkle 3.5s infinite 1s; }
.bm-home-cta__star:nth-child(4)  { top: 50%; left: 85%; animation: bm-star-twinkle 4.5s infinite 1.5s; }
.bm-home-cta__star:nth-child(5)  { top: 65%; left: 10%; animation: bm-star-twinkle 3s infinite 0.2s; }
.bm-home-cta__star:nth-child(6)  { top: 75%; left: 60%; animation: bm-star-twinkle 5s infinite 0.8s; }
.bm-home-cta__star:nth-child(7)  { top: 85%; left: 40%; animation: bm-star-twinkle 3.5s infinite 2s; }
.bm-home-cta__star:nth-child(8)  { top: 15%; left: 45%; width: 3px; height: 3px; animation: bm-star-twinkle 4s infinite 0.3s; }
.bm-home-cta__star:nth-child(9)  { top: 45%; left: 55%; width: 3px; height: 3px; animation: bm-star-twinkle 3.8s infinite 1.2s; }
.bm-home-cta__star:nth-child(10) { top: 55%; left: 25%; animation: bm-star-twinkle 4.2s infinite 0.6s; }
.bm-home-cta__star:nth-child(11) { top: 25%; left: 80%; width: 3px; height: 3px; animation: bm-star-twinkle 3.3s infinite 1.8s; }
.bm-home-cta__star:nth-child(12) { top: 80%; left: 75%; animation: bm-star-twinkle 4.8s infinite 0.4s; }
/* 2026-05-20 — box-shadow stripped from keyframe (continuous PAINT
   on 12 stars). Twinkle now opacity + transform only (compositor).
   The glow peak via box-shadow was subtle on tiny 2-3px stars;
   removing it is a free perf win with negligible visual change. */
@keyframes bm-star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.8); }
}
.bm-home-cta__inner { position: relative; z-index: 1; max-width: 900px; }
/* CTA title sizing 2026-05-13 (Sprint B3): font shrunk, white-space:nowrap removed,
   text-wrap:balance added so longer copies ("We'll knock when the door opens.")
   wrap to two lines centered without horizontal overflow. */
.bm-home-cta__title { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 auto 1rem; max-width: 900px; line-height: 1.15; text-wrap: balance; }
.bm-home-cta__subtitle { font-size: 1.25rem; color: var(--bm-text-on-dark-muted); margin: 0 0 2.5rem; }
.bm-home-cta__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  /* 2026-05-16 b: max-width bumped from 480 to 560 so long emails fit inside
   * the input without crowding the button. Mobile still drops to single column
   * via the <600px @media block below. */
  max-width: 560px;
  margin: 0 auto 1rem;
  position: relative;
  /* 2026-05-16: prevent button overflow when label is long (de "Benachrichtige
   * mich", ja/ko/ar variants). Form is a flex row; button keeps natural width
   * but is allowed to flex-shrink, and input's min-width:0 (set below) makes
   * the input the elastic side instead of pushing the button outside. */
  flex-wrap: nowrap;
}
.bm-home-cta__input {
  flex: 1 1 0;
  min-width: 0; /* allow flex shrink past content width — keeps button inside form */
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
}
.bm-home-cta__input::placeholder { color: rgba(255,255,255,0.4); }
.bm-home-cta__button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0; /* button keeps its content width, never compressed */
  white-space: nowrap; /* long labels (de, ru, ja) don't wrap inside button */
  gap: 0.4rem;
  padding: 0.875rem 1.5rem;
  background: var(--bm-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  /* 2026-05-20 — explicit (was `transition: all`). Hover changes
     background-color (paint), transform (compositor), box-shadow (paint). */
  transition: background-color 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
  font-family: inherit;
}
.bm-home-cta__button:hover {
  background: var(--bm-primary-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(232,65,90,0.4);
}
.bm-home-cta__button-arrow { transition: transform 0.2s ease; }
@keyframes bm-bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
}
.bm-home-cta__button:hover .bm-home-cta__button-arrow {
  animation: bm-bell-ring 0.5s ease;
}
.bm-home-cta__note { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-top: 1rem; }
.bm-home-cta__status {
  /* 2026-05-16 c: wrap-friendly typography. Forcing a single line across 12
   * languages doesn't work — German/French/Portuguese messages are too long
   * for any reasonable max-width. Instead: comfortable line-height + slightly
   * larger vertical padding + text-wrap balance so wrapped lines look
   * intentional, not crammed. text-align:center keeps both 1-line and 2-line
   * messages visually centered. */
  max-width: 600px;
  margin: 1rem auto 0;
  padding: 0.9rem 1.5rem;
  background: rgba(255,255,255,0.08);
  animation: bm-cta-status-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  text-align: center;
  text-wrap: balance; /* modern browsers split wrapped text evenly (no orphan word on last line) */
}
.bm-home-cta__status--success { background: rgba(16,185,129,0.2); border: 1px solid rgba(16,185,129,0.35); }
.bm-home-cta__status--error { background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.35); }

@keyframes bm-cta-status-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bm-home-cta__status { animation: none; }
}
@media (max-width: 600px) {
  .bm-home-cta__form { flex-direction: column; border-radius: 20px; }
  .bm-home-cta__button { width: 100%; justify-content: center; }
}

/* =========================================
   Global responsive tweaks
   ========================================= */
@media (max-width: 768px) {
  .bm-home { padding-block: 3rem; }
  .bm-home-hero { min-height: auto; max-height: none; padding: 0 16px 60px; }
  /* Hero-only sticky padding override — diğer 7 sticky bölüm (character/world/ai/
     economy/ticket/cta/faq) home.css:2747'deki ortak rule'a (clamp(3rem, 8vw, 5rem))
     dokunulmaz. !important gerek çünkü ortak rule sonra geliyor (1023px @media,
     line ~2747) ve specificity eşit. */
  .bm-home-hero__sticky {
    padding: 24px clamp(1rem, 4vw, 1.5rem) clamp(3rem, 8vw, 5rem) !important;
  }
  .bm-home-hero__visual { min-height: 480px; }
  .bm-home-hero__phone-wrap { max-width: 240px; }
  .bm-home-hero__backlight { width: 280px; height: 460px; filter: blur(30px); }
  .bm-home-hero__badge { padding: 8px 12px; gap: 8px; }
  .bm-home-hero__badge-icon { width: 24px; height: 24px; font-size: 12px; }
  .bm-home-hero__badge-text { font-size: 12px; }
  .bm-home-hero__badge-label { font-size: 10px; }
  .bm-home-hero__badge--xp          { right: -5%; top: 5%; }
  .bm-home-hero__badge--achievement { left: -8%; top: 50%; }
  .bm-home-hero__badge--role        { right: -8%; bottom: 10%; }
  .bm-home-ai__portrait-wrap { width: 160px; height: 160px; }
  .bm-home-world__pin { width: 5px; height: 5px; }
}

/* =========================================
   Mobile snap-section heights — v3 sticky disable (2026-04-30)
   =========================================
   Desktop'ta tüm statik bölümlerin sticky inner pattern var
   (.bm-home-X__sticky). Mobile'da içerik dikey stack edildiği için
   100vh-72 sığdırma mümkün değil (Economy 3 phone alt alta ~1500px,
   Hero copy + phone alt alta ~1000px, vb.).

   Mobile çözüm: sticky'leri statik (position:static) yap, height:auto,
   overflow:visible — natural flow. Snap-align outer'da kalır, snap
   noktası bölüm üstüne hizalanır, içerik aşağı doğru akar.
   Community/Screens için sticky zaten mobile'da kapalı (kendi rule'ları). */
@media (max-width: 1023px) {
  .bm-home-hero,
  .bm-home-character,
  .bm-home-world,
  .bm-home-ai,
  .bm-home-economy,
  .bm-home-ticket,
  .bm-home-cta {
    min-height: auto;
  }
  .bm-home-hero__sticky,
  .bm-home-character__sticky,
  .bm-home-world__sticky,
  .bm-home-ai__sticky,
  .bm-home-economy__sticky,
  .bm-home-ticket__sticky,
  .bm-home-cta__sticky,
  .bm-home-faq__sticky {
    position: static;
    height: auto;
    padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 1.5rem);
    overflow: visible;
  }
}

/* Hero phone mobile büyütme (2026-05-06) — +%10, sadece ≤767px */
@media (max-width: 767px) {
  .bm-home-hero__phone-wrap { max-width: 264px; }
  .bm-home-hero__backlight  { display: none; }
  .bm-home-hero__bg         { display: none; }
}

/* Landscape mobile (2026-05-06) — phone landscape için özel layout.
   Modern iPhone (844×390) ve eski (568×320) hepsi tetiklenir; tablet (h>500)
   etkilenmez. Hero fixed-height kaldırılır + scroll'a izin, phone küçültme,
   AI transformation yatay row. Portrait orientation etkilenmez. */
@media (orientation: landscape) and (max-height: 500px) {
  /* BUG 1+2 — Hero viewport h küçük: fixed height yok, scroll allow */
  .bm-home-hero {
    min-height: auto;
    max-height: none;
    overflow: visible;
  }
  .bm-home-hero__sticky {
    padding-block: 24px;
  }
  .bm-home-hero__visual {
    min-height: auto;
  }
  .bm-home-hero__phone-wrap {
    max-width: 200px;
  }
  /* BUG 3 — AI transformation landscape'te yatay row, küçük portrait */
  .bm-home-ai__stage {
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: center;
  }
  .bm-home-ai__portrait {
    width: 140px;
    height: 140px;
    margin-bottom: 0;
  }
  .bm-home-ai__beam {
    transform: rotate(0deg);
    width: 48px;
    height: 48px;
  }
}

/* Polaroid tap overflow fix (2026-05-06)
   .is-tapped JS tarafından polaroid + parent .bm-ticket'a eklenir.
   Tap sırasında 1.5x büyüyen polaroid'in inner/image-wrap overflow:hidden
   tarafından kesilmemesi için parent overflow'larını visible yap + ticket'i
   kardeşleri üstüne çıkar. */
.bm-ticket.is-tapped {
  z-index: 100;
}
.bm-ticket.is-tapped .bm-ticket__inner,
.bm-ticket.is-tapped .bm-ticket__image-wrap {
  overflow: visible;
}

/* Build a life phones — desktop position fine-tune (2026-05-06)
   Head wrapper sonrası stage başlangıcı aşağı kaymıştı; phone'lar drop-shadow
   ile alt kesim yapıyordu. Phone center'ı yukarı kaydır → alt drop-shadow
   stage altına taşmaz. */
@media (min-width: 1024px) {
  .bm-life-phone { top: 44%; }
}

/* Hero bell hover ring animation (2026-05-06) — CTA ile aynı keyframe */
.bm-home-hero__link .ph-bell { transition: transform 0.2s ease; }
.bm-home-hero__link:hover .ph-bell { animation: bm-bell-ring 0.5s ease; }

/* Calibration debug — country label anchor cross (2026-05-06)
   CALIBRATION_MODE = true iken her country label anchor pozisyonunda cyan +
   işareti gösterir. Sezgin label kayık olanları görsel tespit eder. Aşama B'de
   CALIBRATION_MODE kapanınca JS taraf debug marker üretmez, CSS ölü kod kalır
   (gelecek calibration sprintleri için). */
.bm-country-label-debug {
  pointer-events: none;
}
.bm-country-label-debug__cross {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 0 0 3px #000, 0 0 6px #000;
  user-select: none;
}

/* Calibration debug — viewport center crosshair (2026-05-06)
   CALIBRATION_MODE = true iken JS container'a .bm-cal-mode class ekler.
   ::after pseudo-element map'in görsel ortasında sabit + işareti gösterir
   (pan/zoom container'a relative — pseudo-element sabit kalır). Sezgin
   ülkeyi map ortasına alıp label position'ı crosshair'a oturtur. */
#bm-world-map.bm-cal-mode::after {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Courier New', monospace;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #00ffff;
  text-shadow: 0 0 3px #000, 0 0 6px #000;
  pointer-events: none;
  z-index: 1000;
  user-select: none;
}

/* Country hover tooltip (2026-05-06) — zoom-out (world view) only.
   Zoom-in'de JS taraf closeTooltip ile gizlenir (city pinleri görünür). */
.leaflet-tooltip.bm-country-hover-tooltip {
  background: rgba(15, 8, 14, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}
.leaflet-tooltip.bm-country-hover-tooltip::before {
  display: none;
}

/* Custom zoom controls (2026-05-06) — right-center sticky map override.
   Replaces Leaflet default (zoomControl: false). Phosphor plus/minus icons,
   BeMatrx accent on hover, disabled state at min/max zoom. */
.bm-world-zoom-controls {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.bm-world-zoom-btn {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(15, 8, 14, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
  font-family: inherit;
  padding: 0;
}
.bm-world-zoom-btn:hover {
  background: #FF5C75;
  transform: scale(1.05);
}
.bm-world-zoom-btn:active {
  transform: scale(0.95);
}
.bm-world-zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bm-world-zoom-btn:disabled:hover {
  background: rgba(15, 8, 14, 0.85);
  transform: none;
}
@media (max-width: 767px) {
  .bm-world-zoom-controls { right: 12px; }
  .bm-world-zoom-btn { width: 36px; height: 36px; font-size: 16px; }
}

/* GPU layer promotion for continuously animated elements
   (polaroid sway + tap-bounce; hero phone parallax timeline) */
.bm-ticket__polaroid { will-change: transform; }
/* 2026-05-20 — .bm-home-hero__phone-wrap will-change removed. The element
   carries a STATIC transform: rotate(-4deg) only — no transition, no
   animation. Keeping it as a permanent GPU layer wasted memory. */

/* =========================================
   RTL — Mobile RTL fixes (Arapça, 2026-05-14)
   - Career kartları: icon + name center force (RTL'de start sağa kayar)
   - Community 3-panel yatay scroll-snap: first/last gutter mirror
   - "Build a life" mobile carousel: first/last gutter mirror
   ========================================= */
[dir="rtl"] .bm-career-card { text-align: center; }

@media (max-width: 768px) {
  /* Community panels — first/last side gutter swap for RTL flex flow */
  [dir="rtl"] .bm-home-community__panel:first-child {
    margin-left: 0 !important;
    margin-right: 7.5vw !important;
  }
  [dir="rtl"] .bm-home-community__panel:last-child {
    margin-right: 0 !important;
    margin-left: 7.5vw !important;
  }

  /* Life-phone carousel — first/last side gutter swap for RTL flex flow */
  [dir="rtl"] .bm-life-phone:first-child {
    margin-left: 0 !important;
    margin-right: max(0px, calc((100vw - 260px) / 2 - 16px)) !important;
  }
  [dir="rtl"] .bm-life-phone:last-child {
    margin-right: 0 !important;
    margin-left: max(0px, calc((100vw - 260px) / 2 - 16px)) !important;
  }
}

/* 2026-05-25 — Off-screen animation pause.
   12+ adet `animation: ... infinite` (hero badge, cta star, world pin,
   ai portrait, life polaroid, chat typing dots, ticket eyebrow). IO-driven
   `.is-out-of-view` section'a eklenince içindeki tüm animations paused.
   Mobile pil + scroll budget tasarrufu. main.js initAnimationPause()
   observe ediyor. */
.bm-home.is-out-of-view *,
.bm-home.is-out-of-view *::before,
.bm-home.is-out-of-view *::after {
  animation-play-state: paused !important;
}