/* =========================================================
   SPORTIVA Promo Frame Safe Area - Container Transform + Fullscreen FIX v8
   Tujuan:
   - Frame promo berdiri sendiri sebagai sibling player.
   - Player/container tetap di flow halaman, TIDAK absolute.
   - Transform diterapkan ke .watch-player-container / .featured-player.
   - #featuredVideo tidak di-transform langsung.
   - Split layout tidak dipakai.
   ========================================================= */

html body .promo-frame-safe-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  --promo-safe-top: 0%;
  --promo-safe-left: 0%;
  --promo-player-scale-x: 1;
  --promo-player-scale-y: 1;
}

html body .promo-frame-safe-stage > .promo-frame-layer,
html body .promo-frame-safe-stage > #promoFrameLayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  user-select: none !important;
  background: transparent !important;
  transition: opacity .28s ease, visibility .28s ease !important;
}

html body .promo-frame-safe-stage > .promo-frame-layer.is-visible,
html body .promo-frame-safe-stage > #promoFrameLayer.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

html body .promo-frame-safe-stage > .promo-frame-layer.is-clickable,
html body .promo-frame-safe-stage > #promoFrameLayer.is-clickable {
  pointer-events: auto !important;
}

html body .promo-frame-safe-stage .promo-frame-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body .promo-frame-safe-stage > .promo-frame-layer.is-clickable .promo-frame-item,
html body .promo-frame-safe-stage > #promoFrameLayer.is-clickable .promo-frame-item {
  pointer-events: auto !important;
}

html body .promo-frame-safe-stage .promo-frame-item img,
html body .promo-frame-safe-stage .promo-frame-item video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
  border: 0 !important;
}

/* INI BAGIAN UTAMA:
   Player tetap position:relative dan tetap mengisi layout normal halaman.
   Jangan absolute, karena kalau absolute, konten bawah akan seperti timpa-timpaan. */
html body .promo-frame-safe-stage > .featured-player,
html body .promo-frame-safe-stage > .watch-player-container {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 5 !important;
  margin: 0 !important;
  transform-origin: left top !important;
  transform: translate(0%, 0%) scale(1, 1) !important;
  transition: transform 2000ms ease-in-out !important;
  will-change: transform !important;
  overflow: hidden !important;
  line-height: normal !important;
}

html body .promo-frame-safe-stage.promo-frame-active > .featured-player,
html body .promo-frame-safe-stage.promo-frame-active > .watch-player-container {
  transform: translate(var(--promo-safe-left, 0%), var(--promo-safe-top, 0%)) scale(var(--promo-player-scale-x, 0.846), var(--promo-player-scale-y, 0.845)) !important;
}

/* Pastikan video tidak ikut punya transform sendiri dari patch lama/cache lama. */
html body .promo-frame-safe-stage > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage > .featured-player > iframe,
html body .promo-frame-safe-stage > .watch-player-container > iframe {
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: auto !important;
}

/* Jika masih ada layer promo lama di dalam player karena cache HTML lama, matikan agar tidak nutup video. */
html body .featured-player > .promo-frame-layer,
html body .watch-player-container > .promo-frame-layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Jangan sembunyikan frame hanya karena player punya class ad-playing.
   Class ad-playing milik prestream, tapi container-nya tetap harus bisa dikecilkan. */
html body .promo-frame-safe-stage.promo-frame-active > .promo-frame-layer,
html body .promo-frame-safe-stage.promo-frame-active > #promoFrameLayer {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 768px) {
  html body .promo-frame-safe-stage > .featured-player,
  html body .promo-frame-safe-stage > .watch-player-container {
    transition-duration: 650ms !important;
  }
}


/* =========================================================
   SPORTIVA Promo Frame Fullscreen Behaviour v8
   - Fullscreen target adalah .promo-frame-safe-stage, bukan video saja.
   - Pseudo fullscreen dipakai untuk iPhone/iPad Safari agar frame promo tetap ikut tampil.
   - Tetap responsif di portrait, landscape, mobile, dan desktop.
   ========================================================= */
html.sportiva-promo-pseudo-fullscreen,
html.sportiva-promo-pseudo-fullscreen body {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

html body .promo-frame-safe-stage:fullscreen,
html body .promo-frame-safe-stage:-webkit-full-screen,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  z-index: 2147483000 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .promo-frame-safe-stage:fullscreen > .promo-frame-layer,
html body .promo-frame-safe-stage:-webkit-full-screen > .promo-frame-layer,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .promo-frame-layer,
html body .promo-frame-safe-stage:fullscreen > #promoFrameLayer,
html body .promo-frame-safe-stage:-webkit-full-screen > #promoFrameLayer,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > #promoFrameLayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

html body .promo-frame-safe-stage:fullscreen > .featured-player,
html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player,
html body .promo-frame-safe-stage:fullscreen > .watch-player-container,
html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #000 !important;
}

html body .promo-frame-safe-stage:fullscreen > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage:fullscreen > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage:fullscreen > .featured-player > iframe,
html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player > iframe,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player > iframe,
html body .promo-frame-safe-stage:fullscreen > .watch-player-container > iframe,
html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container > iframe,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container > iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .promo-frame-safe-stage:fullscreen .player-controls,
html body .promo-frame-safe-stage:-webkit-full-screen .player-controls,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-controls {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 30 !important;
}

html body .promo-frame-safe-stage:fullscreen .player-overlay,
html body .promo-frame-safe-stage:-webkit-full-screen .player-overlay,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-overlay,
html body .promo-frame-safe-stage:fullscreen .quality-menu,
html body .promo-frame-safe-stage:-webkit-full-screen .quality-menu,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .quality-menu,
html body .promo-frame-safe-stage:fullscreen .prestream-ad,
html body .promo-frame-safe-stage:-webkit-full-screen .prestream-ad,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .prestream-ad {
  z-index: 25 !important;
}

@media (orientation: portrait) and (max-width: 820px) {
  html body .promo-frame-safe-stage:fullscreen > .featured-player,
  html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container {
    transform-origin: left top !important;
  }

  html body .promo-frame-safe-stage:fullscreen .player-controls,
  html body .promo-frame-safe-stage:-webkit-full-screen .player-controls,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-controls {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  html body .promo-frame-safe-stage:fullscreen .player-controls,
  html body .promo-frame-safe-stage:-webkit-full-screen .player-controls,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-controls {
    transform: scale(.92) !important;
    transform-origin: bottom center !important;
  }
}


/* =========================================================
   SPORTIVA Mobile Fullscreen Auto Landscape v10
   FIX UTAMA:
   - Jangan rotate/override transform pada #promoFrameLayer dan player secara terpisah.
     Itu menghapus transform safe-area promo sehingga frame berada di belakang player
     dan kelihatan seperti "hilang" saat fullscreen mobile.
   - Jika device masih portrait dan orientation.lock() gagal, yang diputar adalah
     SELURUH stage. Player tetap memakai transform safe-area normal di dalam stage.
   - Jika device benar-benar berubah landscape, stage tidak diputar dan safe-area
     promo tetap aktif seperti desktop.
   ========================================================= */
html.sportiva-mobile-landscape-fullscreen,
html.sportiva-mobile-landscape-fullscreen body {
  overflow: hidden !important;
  background: #000 !important;
}

html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen {
  background: #000 !important;
}

/*
 * Fallback ketika browser tidak mengizinkan screen.orientation.lock('landscape').
 * Seluruh stage dibuat berukuran landscape lalu diputar 90deg.
 * Karena frame + player ikut berputar sebagai satu kesatuan, transform safe-area
 * pada player TIDAK tertimpa lagi.
 */
@media (orientation: portrait) and (max-width: 920px) {
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen {
    position: fixed !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    /* viewport landscape: lebar = tinggi device, tinggi = lebar device */
    width: 100vh !important;
    width: 100dvh !important;
    height: 100vw !important;
    min-width: 100vh !important;
    min-width: 100dvh !important;
    min-height: 100vw !important;
    max-width: none !important;
    max-height: none !important;

    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  /* Frame tetap memenuhi stage landscape dan tidak punya transform sendiri. */
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .promo-frame-layer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .promo-frame-layer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .promo-frame-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: left top !important;
  }

  /* Player memenuhi stage. Transform safe-area berasal dari rule promo-frame-active. */
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .watch-player-container {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform-origin: left top !important;
  }

  /* Saat promo aktif, PAKSA safe-area tetap menang di fullscreen portrait-fallback. */
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active.sportiva-pseudo-fullscreen > .watch-player-container {
    transform: translate(var(--promo-safe-left, 0%), var(--promo-safe-top, 0%))
               scale(var(--promo-player-scale-x, .846), var(--promo-player-scale-y, .845)) !important;
  }

  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen .player-controls,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen .player-controls,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen .player-controls {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/*
 * Jika device sudah benar-benar landscape, jangan reset transform player ke none.
 * Rule promo-frame-active di atas tetap dipakai sehingga banner kanan/bawah tetap muncul.
 */
@media (orientation: landscape) and (max-width: 920px) {
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen {
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active.sportiva-pseudo-fullscreen > .watch-player-container {
    transform: translate(var(--promo-safe-left, 0%), var(--promo-safe-top, 0%))
               scale(var(--promo-player-scale-x, .846), var(--promo-player-scale-y, .845)) !important;
  }
}

/* =========================================================
   SPORTIVA Fullscreen Promo Responsive v11
   FIX HP DENGAN ASPECT RATIO BERBEDA
   ---------------------------------------------------------
   Masalah v10:
   - Frame promo memakai object-fit: fill (mengikuti seluruh viewport).
   - Video utama memakai object-fit: contain (mempertahankan 16:9).
   - Pada HP 19.5:9 / 20:9 / 21:9, kedua strategi ini tidak sama dan
     menghasilkan area hitam/pillarbox di dalam lubang frame.
   Solusi v11:
   - Saat promo aktif, video mengikuti geometri player dengan object-fit: fill.
     Jadi safe-area frame dan video selalu 1:1 pada seluruh ukuran HP.
   - Di luar promo, video kembali menggunakan object-fit: contain.
   - Fallback fullscreen landscape memakai ukuran VisualViewport dari JS,
     bukan hanya 100vw/100dvh, agar stabil di Chrome/Samsung/MIUI/WebView.
   ========================================================= */

/* Hanya ketika frame aktif: samakan strategi sizing video dengan frame.
   Ini mencegah black bar pada HP ultra-wide tanpa mengubah tampilan normal. */
html body .promo-frame-safe-stage.promo-frame-active > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage.promo-frame-active > .watch-player-container > video#featuredVideo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
}

/* Iframe tetap dipaksa memenuhi container; isi internal iframe mengikuti provider. */
html body .promo-frame-safe-stage.promo-frame-active > .featured-player > iframe,
html body .promo-frame-safe-stage.promo-frame-active > .watch-player-container > iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* JS mengisi --sportiva-fs-vw / --sportiva-fs-vh dari visualViewport.
   Fallback 100vw/100dvh tetap tersedia jika API tidak ada. */
html body .promo-frame-safe-stage:fullscreen,
html body .promo-frame-safe-stage:-webkit-full-screen,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen {
  width: var(--sportiva-fs-vw, 100vw) !important;
  height: var(--sportiva-fs-vh, 100dvh) !important;
}

/* Jangan bergantung pada max-width:920px karena beberapa HP landscape
   mempunyai CSS viewport 930-1080px walau tetap perangkat mobile. */
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-viewport-portrait:fullscreen,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-viewport-portrait:-webkit-full-screen,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-viewport-portrait.sportiva-pseudo-fullscreen {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--sportiva-fs-vh, 100dvh) !important;
  height: var(--sportiva-fs-vw, 100vw) !important;
  min-width: var(--sportiva-fs-vh, 100dvh) !important;
  min-height: var(--sportiva-fs-vw, 100vw) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
}

/* Kalau viewport sudah landscape asli, hapus rotasi fallback sepenuhnya. */
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-viewport-landscape:fullscreen,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-viewport-landscape:-webkit-full-screen,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-viewport-landscape.sportiva-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sportiva-fs-vw, 100vw) !important;
  height: var(--sportiva-fs-vh, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

/* Safe area wajib tetap menang baik pada landscape asli maupun fallback rotate. */
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:fullscreen > .featured-player,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:-webkit-full-screen > .featured-player,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active.sportiva-pseudo-fullscreen > .featured-player,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:fullscreen > .watch-player-container,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active:-webkit-full-screen > .watch-player-container,
html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.promo-frame-active.sportiva-pseudo-fullscreen > .watch-player-container {
  transform: translate(var(--promo-safe-left, 0%), var(--promo-safe-top, 0%))
             scale(var(--promo-player-scale-x, .846), var(--promo-player-scale-y, .845)) !important;
}


/* =========================================================
   SPORTIVA Fullscreen Responsive v12 - Portrait Safe Canvas
   ---------------------------------------------------------
   Penyebab bug v11:
   - Elemen #promoFrameSafeStage sendiri dijadikan :fullscreen.
   - Pada browser Android tertentu, transform/ukuran custom pada fullscreen root
     di-clamp oleh browser sehingga stage tetap 100% portrait.
   - Karena frame + video memakai fill, layout landscape lalu tertarik menjadi
     portrait dan terlihat sangat gepeng/tinggi.

   Solusi v12:
   - Fullscreen root dipindah ke #sportivaFullscreenShell.
   - #promoFrameSafeStage menjadi canvas di dalam shell.
   - Landscape: canvas tetap 100% viewport (perilaku v11 yang sudah benar).
   - Portrait: jika promo aktif, canvas mempertahankan aspect ratio banner
     (default 16:9 / mengikuti file promo) dan dipusatkan. Tidak ada stretch.
   ========================================================= */
html body .sportiva-fullscreen-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

html body .sportiva-fullscreen-shell > .promo-frame-safe-stage {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  --promo-frame-aspect: 1.7777778;
}

html body .sportiva-fullscreen-shell:fullscreen,
html body .sportiva-fullscreen-shell:-webkit-full-screen,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: var(--sportiva-fs-vw, 100vw) !important;
  height: var(--sportiva-fs-vh, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
}

/* Default fullscreen: stage mengisi shell. */
html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center center !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

/* Frame dan player mengisi CANVAS, bukan langsung viewport fullscreen. */
html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage > .promo-frame-layer,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage > .promo-frame-layer,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage > .promo-frame-layer,
html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage > #promoFrameLayer,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage > #promoFrameLayer,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage > #promoFrameLayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0 !important;
}

html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage > .featured-player,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage > .featured-player,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage > .featured-player,
html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage > .watch-player-container,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage > .watch-player-container,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage > .watch-player-container {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  transform-origin: left top !important;
}

/* Safe-area promo selalu tetap berlaku di shell fullscreen. */
html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage.promo-frame-active > .featured-player,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage.promo-frame-active > .featured-player,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage.promo-frame-active > .featured-player,
html body .sportiva-fullscreen-shell:fullscreen > .promo-frame-safe-stage.promo-frame-active > .watch-player-container,
html body .sportiva-fullscreen-shell:-webkit-full-screen > .promo-frame-safe-stage.promo-frame-active > .watch-player-container,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen > .promo-frame-safe-stage.promo-frame-active > .watch-player-container {
  transform: translate(var(--promo-safe-left, 0%), var(--promo-safe-top, 0%))
             scale(var(--promo-player-scale-x, .846), var(--promo-player-scale-y, .845)) !important;
}

/* LANDSCAPE: jangan ubah layout yang v11 sudah benar. */
html body .sportiva-fullscreen-shell.sportiva-viewport-landscape:fullscreen > .promo-frame-safe-stage,
html body .sportiva-fullscreen-shell.sportiva-viewport-landscape:-webkit-full-screen > .promo-frame-safe-stage,
html body .sportiva-fullscreen-shell.sportiva-viewport-landscape.sportiva-pseudo-fullscreen > .promo-frame-safe-stage {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  transform: none !important;
}

/* PORTRAIT + PROMO:
   Banner promo adalah desain landscape. Jangan pernah menarik canvas sampai 100vh.
   Fit berdasarkan lebar layar dan pertahankan aspect ratio asli frame, lalu center.
   Hasil: video + frame tetap proporsional, tidak tinggi/gepeng seperti screenshot. */
html body .sportiva-fullscreen-shell.sportiva-viewport-portrait:fullscreen > .promo-frame-safe-stage.promo-frame-active,
html body .sportiva-fullscreen-shell.sportiva-viewport-portrait:-webkit-full-screen > .promo-frame-safe-stage.promo-frame-active,
html body .sportiva-fullscreen-shell.sportiva-viewport-portrait.sportiva-pseudo-fullscreen > .promo-frame-safe-stage.promo-frame-active {
  inset: auto !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: var(--promo-frame-aspect, 1.7777778) !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
}

/* Video boleh fill di dalam safe-area karena canvas portrait sekarang tidak lagi
   berubah menjadi rasio portrait; canvas tetap mengikuti rasio banner landscape. */
html body .sportiva-fullscreen-shell .promo-frame-safe-stage.promo-frame-active > .featured-player > video#featuredVideo,
html body .sportiva-fullscreen-shell .promo-frame-safe-stage.promo-frame-active > .watch-player-container > video#featuredVideo {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
}

/* Controls/overlay tetap berada di atas frame dalam fullscreen shell. */
html body .sportiva-fullscreen-shell:fullscreen .player-controls,
html body .sportiva-fullscreen-shell:-webkit-full-screen .player-controls,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen .player-controls {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
}

html body .sportiva-fullscreen-shell:fullscreen .player-overlay,
html body .sportiva-fullscreen-shell:-webkit-full-screen .player-overlay,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen .player-overlay,
html body .sportiva-fullscreen-shell:fullscreen .quality-menu,
html body .sportiva-fullscreen-shell:-webkit-full-screen .quality-menu,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen .quality-menu,
html body .sportiva-fullscreen-shell:fullscreen .prestream-ad,
html body .sportiva-fullscreen-shell:-webkit-full-screen .prestream-ad,
html body .sportiva-fullscreen-shell.sportiva-pseudo-fullscreen .prestream-ad {
  z-index: 45 !important;
}