/* ==========================================================================
   Playflix — mode perangkat: HP (portrait/landscape) & TV (10-foot UI)
   Proporsi dipanen dari netflix.com lewat CDP (lihat skill
   webdev/reverse-engineer-web-ui). Warna tetap token Playflix.

   TEMUAN PANEN (28 Okt 2026):
     - Header Netflix menyusut 92px -> 76px di HP, padding 48px -> 24px
     - Tombol TETAP 48px & input TETAP 56px di semua perangkat (target sentuh)
     - H1 tetap 32px walau HP 390px — tidak mengecil (khas Netflix)
     - TIDAK ada bottom-nav di web Netflix; navigasi HP = hamburger + scroll
     - TV: focus outline 3px, elemen fokusable = tombol panah remote
     - Breakpoint: 600 / 740 / 960 / 1280 / 1600 / 1920 / 2560
   ========================================================================== */

/* ==========================================================================
   1. HP — PORTRAIT (<= 599px)
   Prinsip: satu kolom, target sentuh >= 48px, kartu ~40% lebar layar
   ========================================================================== */
@media (max-width: 599px) {
  :root {
    /* skala kartu HP: 2.2 kartu terlihat -> mengundang geser */
    --card-w: 38vw;
    --row-gutter: 16px;
  }

  .site-header {
    height: 76px !important;          /* Netflix: 92 -> 76 */
    padding-inline: 24px !important;  /* Netflix: 48 -> 24 */
  }

  /* Hero memenuhi layar, teks di bawah */
  .hero {
    min-height: 62vh;
    padding: 16px 16px 1.5rem;
    align-items: flex-end;
  }
  .hero h1 {
    font-size: 32px;                  /* Netflix TIDAK mengecilkan H1 */
    line-height: 1.15;
    max-width: 100%;
  }
  .hero p { font-size: 15px; max-width: 100%; }

  /* Tombol full-width bertumpuk — pola Netflix di HP */
  .hero-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .hero-actions > * { width: 100%; }

  /* Kartu */
  .card { width: var(--card-w) !important; }
  .row-track { gap: 6px; padding-inline: var(--row-gutter); padding-block: 4px 12px; }
  .row-head { padding-inline: var(--row-gutter); margin-block-end: 8px; }
  .row-title { font-size: 17px; }

  /* Tidak ada panah di layar sentuh */
  .row-arrow { display: none !important; }

  /* Efek hover dimatikan total — di HP hanya membingungkan */
  .card:hover { transform: none !important; }
  .card-quick { display: none; }

  /* Grid katalog jadi 2 kolom */
  .grid, .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-inline: var(--row-gutter);
  }

  /* Halaman detail: poster di atas, info di bawah */
  .detail-hero {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }
  .detail-poster { width: 100%; max-width: 220px; margin-inline: auto; }
  .detail-title { font-size: 24px; }

  /* Player full-bleed */
  .player-wrap { border-radius: 0; margin-inline: 0; }

  /* Cegah overflow horizontal (dosa terbesar di HP) */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }
}

/* ==========================================================================
   1b. CEKAH OVERFLOW GLOBAL — berlaku semua perangkat
   Kartu di dalam .row-track memang keluar viewport (itu inti carousel).
   Tanpa penjagaan, scrollWidth halaman ikut membengkak ~7px dan memunculkan
   scrollbar horizontal di desktop. Kuncinya: <html>/<body> tidak boleh
   mewarisi lebar isi dari track; track sendiri yang menangani overflow.
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
.row-track { overscroll-behavior-x: contain; }
/* Wadah baris mengurung anak-anaknya supaya tidak menambah scrollWidth halaman */
.row { overflow: hidden; }

/* ==========================================================================
   2. HP — LANDSCAPE (tinggi <= 500px)
   Netflix: tombol 48px & input 56px, padding 24px 32px
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding: 20px 32px; }
  .hero h1 { font-size: 28px; }
  .hero-actions { flex-direction: row; }
  .hero-actions > * { width: auto; }
  .card { width: 24vw !important; }
  .site-header { height: 64px !important; padding-inline: 32px !important; }
}

/* ==========================================================================
   3. TABLET (600 - 959px)
   ========================================================================== */
@media (min-width: 600px) and (max-width: 959px) {
  :root { --card-w: 150px; }
  .site-header { height: 76px !important; padding-inline: 32px !important; }
  .grid, .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hero h1 { font-size: 40px; }
  .card { width: var(--card-w) !important; }
}

/* ==========================================================================
   4. TV / LAYAR BESAR (>= 1600px) — "10-foot UI"
   Kunci TV: teks lebih besar, fokus terlihat jelas, jarak lega,
   navigasi remote = Tab/panah (bukan hover)
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --tv-scale: 1.15;
  }

  body { font-size: 17px; }

  .site-header { height: 96px !important; padding-inline: 64px !important; }
  .site-header .brand { font-size: 26px; }
  .site-nav a { font-size: 18px; }

  .hero { min-height: 52vh; padding: 64px; }
  .hero h1 { font-size: clamp(36px, 3.4vw, 56px); }
  .hero p { font-size: 20px; max-width: 60ch; }

  /* Tombol TV lebih besar (Netflix 10-foot: 48px minimum, kita 56px) */
  .btn-play, .btn-info { height: 56px; font-size: 20px; padding: 0 2rem; }

  /* Baris kartu lebih lega */
  .row { margin-block-start: 3.5rem; }
  .row-title { font-size: 28px; }
  .row-track { gap: 14px; padding-inline: 64px; }
  .card { width: 264px !important; }

  .grid, .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    padding-inline: 64px;
  }

  /* ==== FOKUS TERLIHAT — wajib untuk remote TV ==== */
  /* Netflix memakai outline 3px. Di TV fokus harus tidak mungkin terlewat. */
  a:focus-visible,
  button:focus-visible,
  .card:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--accent) !important;
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Kartu yang difokus remote ikut membesar, sama seperti hover di desktop */
  .card:focus-visible,
  .card:focus-within {
    transform: scale(1.08);
    z-index: 5;
    box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.9);
  }

  /* Di TV, hover tidak ada — tampilkan aksi saat fokus */
  .card-quick {
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .card:focus-within .card-quick {
    opacity: 1;
    transform: translateY(0);
  }

  /* Player TV memenuhi layar */
  .player-wrap { border-radius: 0; }
}

/* ==========================================================================
   5. TV 4K / 2560px+ — jangan biarkan konten melebar tanpa batas
   ========================================================================== */
@media (min-width: 2560px) {
  .hero h1 { font-size: clamp(48px, 3vw, 68px); }
  .card { width: 296px !important; }
  .row-track, .row-head { padding-inline: 96px; }
  .site-header { padding-inline: 96px !important; }
  .grid, .catalog-grid { padding-inline: 96px; }
}

/* ==========================================================================
   6. MODE TV EKSPLISIT — dipasang lewat JS saat terdeteksi smart TV
   (deteksi: UA TV / layar besar + tanpa hover + tanpa sentuh)
   Memberi navigasi remote yang benar: fokus awal, lompat baris dengan
   panah atas/bawah, Enter untuk pilih.
   ========================================================================== */
body.is-tv {
  /* Teks dasar lebih besar, kontras lebih tinggi untuk jarak 3 meter */
  font-size: 18px;
  --text: #ffffff;
  --text-secondary: #d0d0da;
}

body.is-tv .card {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: transform 200ms ease, outline-color 200ms ease, box-shadow 200ms ease;
}

body.is-tv .card.is-focused {
  outline: 3px solid var(--accent);
  transform: scale(1.08);
  z-index: 6;
  box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.95);
}

body.is-tv .row.is-focused .row-title {
  color: var(--accent);
}

/* Sembunyikan scrollbar & panah di TV — navigasi pakai remote */
body.is-tv .row-arrow { display: none !important; }
body.is-tv .row-track { scrollbar-width: none; }

/* Petunjuk remote */
body.is-tv .tv-hint {
  position: fixed;
  inset-inline-end: 48px;
  inset-block-end: 40px;
  padding: 14px 22px;
  border-radius: 8px;
  background: rgba(10, 10, 12, 0.94);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 15px;
  z-index: 50;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
body.is-tv .tv-hint.show { opacity: 1; }

/* ==========================================================================
   7. AKSESIBILITAS & PREFERENSI
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Perangkat sentuh: hilangkan semua efek hover */
@media (hover: none) {
  .card:hover { transform: none !important; }
  .card-quick { display: none; }
  .row-arrow { display: none !important; }
}