.mobile-hero { display: none; }
@media (max-width: 767px) {
  #mers-hero { height: auto; min-height: 0; }
  #mers-hero > :not(.mobile-hero), #mers-hero::after { display: none !important; }
  #mers-hero .mobile-hero { display: block; position: relative; background: #0a0f1a; color: #fff; }
  /* Sahne ekran boyunu aşmaz: ekran kısaysa görselin ALTI (ana obje) korunur, yalnız üstteki gökyüzü kırpılır.
     Böylece görselin üstüne binen kontroller her zaman ilk ekranda görünür. */
  .mobile-hero__scene { position: relative; touch-action: pan-y pinch-zoom; display: flex; flex-direction: column; justify-content: flex-end; max-height: 100vh; max-height: 100svh; overflow: hidden; }
  .mobile-hero__image { display: block; width: 100%; height: auto; flex-shrink: 0; }
  /* Slayt videosu (masaüstündekiyle aynı) sahneyi doldurur, ortalı kırpılır; görsel altta poster gibi kalır. */
  .mobile-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: #0a0f1a; }
  /* v4.css'teki genel `video { display:block }` kuralı [hidden]'ı ezer → videosuz slaytlarda video görselin üstünde kalıyordu. */
  .mobile-hero__video[hidden] { display: none; }
  .mobile-hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0a0f1ae6, #0a0f1ab3 30%, #0a0f1a40 46%, transparent 60%); }
  .mobile-hero__copy { position: absolute; top: 112px; left: 24px; right: 24px; }
  .mobile-hero__eyebrow { margin: 0 0 12px; color: #bfe4f0; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
  #mers-hero .mobile-hero h2 { margin: 0; font: 800 clamp(28px, 8vw, 42px)/1.08 "Sarabun", sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
  .mobile-hero__description { margin: 16px 0 0; font-size: 15px; line-height: 1.55; }
  .mobile-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .mobile-hero__actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 24px; font-size: 12px; font-weight: 600; color: #fff; text-decoration: none; }
  .mobile-hero__quote { background: #2998bf; }
  .mobile-hero__discover { border: 1px solid #ffffff66; }
  /* Kontroller görselin alt kenarına biner; sağda WhatsApp butonuna yer bırakılır. */
  .mobile-hero__controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 44px 1fr 44px; gap: 12px; align-items: center; padding: 40px 96px 18px 24px; background: linear-gradient(180deg, transparent 0%, #0a0f1acc 55%, #0a0f1ae6 100%); }
  .mobile-hero__controls[hidden] { display: none; }
  .mobile-hero__controls button { width: 44px; height: 44px; border: 1px solid #ffffff80; border-radius: 50%; background: #0a0f1a66; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 20px; cursor: pointer; }
  .mobile-hero__counter { text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .08em; white-space: nowrap; }
  .mobile-hero__track { grid-column: 1 / -1; height: 2px; background: #ffffff33; }
  .mobile-hero__track span { display: block; height: 100%; background: #2998bf; }
  .mobile-hero :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  @media (max-width: 360px) { .mobile-hero__controls { gap: 8px; padding-right: 84px; padding-left: 16px; } .mobile-hero__counter { letter-spacing: .02em; font-size: 13px; } }
}