/* Tampilan situs - dirancang dari layar ponsel dulu, baru dilebarkan ke layar
   besar. Satu berkas, tanpa pustaka luar: halaman tetap terbuka cepat di
   jaringan seluler dan tidak ada yang rusak kalau CDN pihak ketiga mati.

   Warna ditulis sebagai token di :root supaya merek baru cukup mengubah lima
   baris di sini, bukan menyisir seluruh berkas. Panel menimpa token yang sama
   lewat <style> di kepala halaman. */
:root{
  --bg:#050b16; --bg2:#0d1725; --bg3:#152234;
  --tx:#eaf6fd; --tx2:#9cb6c9; --tx3:#66808f;
  --br:#1b2736; --utama:#22d3ee; --utama2:#7df9ff; --ok:#33c06a;
  /* Ujung kanan gradasi tombol utama. Warna merek situs ini biru neon, jadi
     pasangannya biru terang - bukan jingga seperti situs saudaranya. Nama
     tokennya dibiarkan apa adanya supaya berkas ini tetap bisa dibandingkan
     baris per baris dengan tampilan asalnya. */
  --utama-jingga:#4f9dff;
  --lebar:1180px; --lengkung:14px;
  --bar:64px;            /* tinggi bilah atas, sudah termasuk jarak pilnya */
  --tab:60px;            /* tinggi bilah bawah, hanya di ponsel */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.bungkus{max-width:var(--lebar);margin:0 auto;padding:0 16px}
.sembunyi{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= bilah atas =================
   Bentuknya pil melayang, bukan pita selebar layar: di halaman bersampul, pita
   penuh memotong gambar jadi dua walau warnanya bening, sedangkan pil menyisakan
   gambar utuh di kiri, kanan, dan atasnya. */
.bar{position:sticky;top:0;z-index:40;height:var(--bar);padding:10px 0}
.bar-isi{display:flex;align-items:center;gap:10px;height:calc(var(--bar) - 20px);padding:0 8px 0 14px;
  border-radius:999px;background:rgba(9,17,28,.88);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(14px);transition:background .25s,border-color .25s}
/* Di puncak halaman bersampul pilnya hilang sama sekali - tidak ada latar,
   garis, maupun blur yang menutupi gambar. Yang menjaga tulisan tetap terbaca
   di atas gambar terang adalah bayangan huruf, bukan kotak gelap. Pilnya baru
   muncul begitu halaman digulir, waktu di belakangnya tidak ada gambar lagi. */
.bar.melayang .bar-isi{background:transparent;border-color:transparent;backdrop-filter:none}
.bar.melayang .merek{text-shadow:0 1px 12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.65)}
.bar.melayang .menu a{color:#fff;font-weight:600;
  text-shadow:0 1px 12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.65)}
.bar.melayang .menu a.kini{text-shadow:none}
.bar.melayang .bulat{background:rgba(0,0,0,.38);backdrop-filter:blur(6px)}
.bar.melayang .bulat:hover{background:rgba(0,0,0,.6)}
.merek{font-weight:900;font-size:20px;letter-spacing:-.5px;line-height:1;color:var(--utama);
  flex:0 0 auto}
.merek.gambar{display:flex;align-items:center}
.merek.gambar img{display:block;width:auto;height:24px}
.menu{display:none}
.bar-alat{margin-left:auto;display:flex;align-items:center;gap:4px;flex:0 0 auto}
.bulat{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);border:0;cursor:pointer;color:var(--tx);padding:0;flex:0 0 auto}
.bulat:hover{background:rgba(255,255,255,.18)}
.bulat svg{width:19px;height:19px}

/* ---- lapisan pencarian ----
   Di ponsel ia lembar yang naik dari dasar layar, di layar lebar kotak melayang
   di tengah. Bentuk lembar dipilih untuk ponsel karena dasar layar adalah tempat
   yang paling mudah dijangkau ibu jari - kotak melayang di tengah layar tinggi
   membuat kolom isiannya jatuh persis di daerah yang paling sulit disentuh. */
.cari-layar{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.66);
  backdrop-filter:blur(4px);display:none;align-items:flex-end}
.cari-layar[hidden]{display:none}
.cari-layar.buka{display:flex}
.cari-kotak{width:100%;max-height:88vh;overflow-y:auto;background:var(--bg2);
  border:1px solid var(--br);border-bottom:0;border-radius:20px 20px 0 0;
  padding:10px 18px calc(24px + env(safe-area-inset-bottom));
  animation:cari-naik .26s cubic-bezier(.2,.7,.3,1)}
@keyframes cari-naik{from{transform:translateY(18px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.cari-kotak{animation:none}}
.cari-pegangan{display:block;width:42px;height:4px;border-radius:99px;background:var(--br);
  margin:0 auto 14px}
.cari-atas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.cari-atas h2{margin:0;font-size:19px;font-weight:800}

.cari-bentuk{position:relative;display:block}
.cari-ikon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--tx3);
  display:grid;place-items:center;pointer-events:none}
.cari-ikon svg{width:18px;height:18px}
.cari-bentuk input{width:100%;background:var(--bg3);border:1px solid var(--br);color:var(--tx);
  padding:14px 16px 14px 44px;border-radius:12px;font-size:16px}
.cari-bentuk input:focus{outline:0;border-color:var(--utama)}
.cari-bentuk input::placeholder{color:var(--tx3)}

.cari-label{display:flex;align-items:center;gap:8px;margin:22px 0 8px;font-size:11.5px;
  font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--tx3)}
.cari-label svg{width:15px;height:15px}
.cari-label a{margin-left:auto;letter-spacing:.3px;text-transform:none;font-weight:600;
  font-size:12.5px;color:var(--tx2)}
.cari-label a:hover{color:var(--utama)}
.cari-kosong{margin:20px 0 4px;color:var(--tx3);font-size:14px;line-height:1.7}

/* ---- saran film di kotak pencarian ----
   Barisnya mendatar dengan poster kecil di kiri, bukan kisi poster: kotak
   pencarian dibuka untuk menemukan satu judul, dan daftar yang bisa dibaca
   sambil menggulir lurus ke bawah lebih cepat dipindai daripada kisi. */
.cari-saran a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px}
.cari-saran a:hover{background:var(--bg3)}
.cari-saran .gbr{flex:0 0 42px;width:42px;aspect-ratio:2/3;border-radius:7px;overflow:hidden;
  background:var(--bg3)}
.cari-saran .gbr img{width:100%;height:100%;object-fit:cover}
.cari-saran .isi{flex:1;min-width:0}
.cari-saran .judul{display:block;font-size:14.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cari-saran .cari-kaki{display:block;font-size:12px;color:var(--tx3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cari-saran .nilai{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--utama2)}

@media(min-width:700px){
  .cari-layar{align-items:center;justify-content:center;padding:24px}
  .cari-kotak{width:min(100%,780px);max-height:84vh;border:1px solid var(--br);
    border-radius:18px;padding:22px 26px 26px;
    box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .cari-pegangan{display:none}
  .cari-atas{margin-bottom:16px}
  .cari-atas h2{font-size:21px}
  @keyframes cari-naik{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
}

/* ---- laci menu ---- */
.tirai{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .25s}
.tirai.buka{opacity:1;pointer-events:auto}
/* Bingkai tetap selebar layar yang menggunting isinya: apa pun yang diparkir
   di luar tepinya tidak ikut terhitung sebagai lebar dokumen. pointer-events
   dimatikan di bingkainya dan dinyalakan lagi di lacinya, supaya bingkai yang
   menutupi seluruh layar ini tidak menelan ketukan pada halaman di bawahnya. */
.laci-bingkai{position:fixed;inset:0;z-index:55;overflow:hidden;pointer-events:none}
.laci{position:absolute;top:0;right:0;bottom:0;width:min(82vw,320px);pointer-events:auto;
  background:var(--bg2);border-left:1px solid var(--br);padding:18px 18px 40px;
  transform:translateX(100%);transition:transform .28s ease;overflow-y:auto}
.laci.buka{transform:none}
.laci h3{margin:22px 0 10px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3)}
.laci h3:first-of-type{margin-top:14px}
.laci a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
  font-size:15px;color:var(--tx2)}
.laci a svg{width:18px;height:18px;flex:0 0 auto;color:var(--tx3)}
.laci a.kini{background:color-mix(in srgb,var(--utama) 18%,transparent);color:var(--utama)}
.laci a.kini svg{color:var(--utama)}
.laci-genre a svg{display:none}
.laci-cari{display:flex;gap:7px;margin:14px 0 4px}
.laci-cari input{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--br);
  color:var(--tx);padding:10px 13px;border-radius:10px;font-size:15px}
.laci-cari input:focus{outline:0;border-color:var(--utama)}
.laci-cari button{display:grid;place-items:center;width:42px;background:var(--utama);color:#fff;
  border:0;border-radius:10px;cursor:pointer}
.laci-cari button svg{width:18px;height:18px}
.laci a:hover,.laci a:focus{background:var(--bg3);color:var(--tx)}
.laci-atas{display:flex;align-items:center;justify-content:space-between}
.laci-genre{display:flex;flex-wrap:wrap;gap:8px}
.laci-genre a{padding:7px 13px;border:1px solid var(--br);border-radius:20px;font-size:13px}

/* ================= sampul beranda =================
   Satu deret gambar yang digeser dengan jari. Penggeserannya murni CSS
   (scroll-snap), JavaScript hanya menyalakan putar otomatis, menyorot titiknya,
   dan memasang trailer di layar lebar - kalau JavaScript mati, sampulnya tetap
   bisa digeser dan seluruh isinya tetap terbaca.

   Sampul dibuat selebar layar walau berada di dalam pembungkus ber-margin:
   gambar sampul yang berhenti 16px dari tepi layar ponsel terlihat seperti
   kartu yang kelupaan, bukan sampul. */
.sampul{position:relative;overflow:hidden;
  margin:calc(var(--bar) * -1) calc(50% - 50vw) 8px}
.sampul-rel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.sampul-rel::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:center;
  height:78vh;max-height:620px;min-height:440px;display:block}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom,rgba(5,11,22,.5) 0,rgba(5,11,22,0) 28%,
             rgba(5,11,22,.72) 62%,var(--bg) 100%)}

/* ---- lapisan trailer ----
   Dipasang skrip hanya di layar lebar. Iframe YouTube selalu 16:9, jadi
   dilebihkan ke dua arah lalu dipusatkan: yang terpotong tepinya, bukan
   tersisa pita hitam di atas dan bawahnya. pointer-events dimatikan supaya
   seluruh slide tetap bisa diklik seperti tautan biasa. */
.slide-video{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .6s ease}
.slide-video.tampil{opacity:1}
.slide-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0}

.slide-isi{position:absolute;left:0;right:0;bottom:26px;z-index:3;padding:0 20px;text-align:center}
.slide-dalam{display:block;max-width:var(--lebar);margin:0 auto}
.slide-lencana{display:none}
.slide-judul{display:block;font-size:clamp(26px,8vw,46px);font-weight:900;line-height:1.02;
  margin:0 0 10px;text-transform:uppercase;letter-spacing:-1px;
  text-shadow:0 3px 24px rgba(0,0,0,.75)}
.slide-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
  font-size:13px;color:var(--tx2);margin:0 0 14px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.slide-meta .bintang{color:var(--utama2);font-weight:800}
.slide-meta .pisah{color:var(--tx3)}
/* Sinopsis sengaja tidak ditampilkan di ponsel: tiga baris teks di atas gambar
   mendorong tombol nonton keluar layar, dan sinopsis lengkapnya toh ada di
   halaman filmnya sendiri. */
.slide-sinopsis{display:none}
.slide-tombol{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:min(100%,420px);padding:14px 26px;border-radius:9px;font-weight:800;font-size:15px;
  color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.45);
  background:linear-gradient(100deg,var(--utama),color-mix(in srgb,var(--utama) 62%,var(--utama-jingga)))}
.slide-tombol svg{width:17px;height:17px}

.sampul-kendali{position:absolute;left:0;right:0;bottom:8px;z-index:4;display:flex;
  align-items:center;justify-content:center;gap:12px;padding:0 20px;pointer-events:none}
.titik{display:flex;justify-content:center;gap:7px;pointer-events:auto}
.titik span{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.34);
  transition:all .25s;cursor:pointer}
.titik span.kini{width:26px;background:var(--utama)}
.bulat.suara{position:absolute;right:20px;bottom:0;pointer-events:auto;
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.bulat.suara[hidden]{display:none}

/* ================= deret kartu ================= */
.blok{margin:26px 0}
.judul-blok{font-size:17px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.judul-blok small{font-size:13px;font-weight:400;color:var(--tx3)}
.lainnya{margin-left:auto;font-size:13px;color:var(--tx2);white-space:nowrap}
.lainnya:hover{color:var(--utama)}

/* Di ponsel deret film digulir ke samping, bukan dijejer ke bawah: satu layar
   bisa memuat lebih banyak judul tanpa halaman jadi sepanjang gulungan. */
/* scroll-padding menjaga jarak 16px di tepi kiri tetap terlihat: tanpa itu
   penjajaran scroll-snap menggeser deret sampai kartu pertama menempel di
   tepi layar, sementara judul di atasnya tetap menjorok ke dalam. */
.rel{display:flex;align-items:flex-start;gap:11px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding:0 16px;
  padding:2px 16px 4px;margin:0 -16px;scrollbar-width:none}
.rel::-webkit-scrollbar{display:none}
.rel>.kartu{flex:0 0 33vw;max-width:150px;scroll-snap-align:start}

/* align-items:start, bukan bawaan stretch: kartu yang diregangkan setinggi
   baris membuat baris judulnya ikut melar sampai ke dasar baris, dan judul
   dua baris di satu kartu menyeret kartu-kartu lain di baris yang sama. */
.kisi{display:grid;align-items:start;gap:14px 11px;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}
.kartu{display:block;min-width:0}
.kartu .poster{position:relative;display:block;aspect-ratio:2/3;background:var(--bg3);
  border-radius:var(--lengkung);overflow:hidden}
.kartu .poster-tautan{display:block;height:100%}
.kartu .poster img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.kartu:hover .poster img{transform:scale(1.05)}
.kartu .kosong{display:flex;align-items:center;justify-content:center;height:100%;
  font-size:34px;color:var(--tx3);font-weight:800}
.kartu .tanda{position:absolute;left:7px;top:7px;z-index:2;background:var(--utama);color:#fff;
  font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;letter-spacing:.3px}
.kartu .nilai{position:absolute;right:7px;top:7px;z-index:2;background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);font-size:11px;font-weight:800;padding:3px 7px;border-radius:6px;
  color:var(--utama2)}

/* ---- tombol di atas poster ----
   Di perangkat sentuh tombol ini disembunyikan: kartu di ponsel cuma selebar
   sepertiga layar, dua tombol di dalamnya menutupi posternya sendiri dan tidak
   ada sorotan tetikus yang bisa memunculkannya lalu menyembunyikannya lagi.
   Ketukan di kartunya sudah membuka halaman film, yang memuat kedua tombol itu
   dalam ukuran penuh. */
.kartu .act{display:none}
@media(hover:hover) and (pointer:fine){
  .kartu .act{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:7px;padding:8px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .kartu .poster:hover .act,.kartu .poster:focus-within .act{opacity:1;visibility:visible;transform:none}
  .kartu .act a{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    max-width:100%;font-size:11px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;box-shadow:0 4px 14px rgba(0,0,0,.45)}
  .kartu .act .tr{background:rgba(8,15,26,.7);color:#fff;border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px)}
  .kartu .act .tr:hover{background:rgba(8,15,26,.92);border-color:#fff}
  .kartu .act .nt{background:var(--utama);color:#fff;border:1px solid transparent}
  .kartu .act .nt:hover{filter:brightness(1.12)}
  /* Segitiga putar dibentuk dari border, jadi tidak perlu berkas ikon tambahan. */
  .kartu .act .nt::before{content:"";flex:0 0 auto;width:0;height:0;border-style:solid;
    border-width:4px 0 4px 7px;border-color:transparent transparent transparent currentColor}
  /* Layar gelap tipis supaya tombol tetap terbaca di atas poster yang terang. */
  .kartu .poster::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,9,18,.3),rgba(4,9,18,.68));
    opacity:0;transition:opacity .18s ease}
  .kartu .poster:hover::before,.kartu .poster:focus-within::before{opacity:1}
}

.kartu .judul{display:-webkit-box;margin-top:8px;font-size:13px;font-weight:600;line-height:1.35;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kartu .judul:hover{color:var(--utama2)}
.kartu-kaki{display:block;font-size:11px;color:var(--tx3);margin-top:2px}
/* ---- deret bernomor ----
   Angkanya digambar dengan garis tepi saja, tanpa isi, lalu posternya ditumpuk
   menimpa sisi kanannya - itu yang membuat angka setinggi poster tetap terbaca
   tanpa menutupi gambarnya. Lebar poster dipegang satu peubah supaya ukuran
   angka ikut menyesuaikan sendiri: angkanya dihitung dari lebar itu, bukan
   ditulis terpisah lalu meleset tiap kali posternya diubah. */
/* overflow:hidden WAJIB ada di sini. Angka peringkat setinggi 127px dengan
   garis tepi melebar jauh melewati tepi kanan deretnya, dan walau deret di
   dalamnya sudah punya penggulung sendiri, lebar itu tetap merembet ke lebar
   dokumen - scrollWidth halaman ini sempat 1555px di layar selebar 412px.
   Chrome di Android menjawab dokumen selebar itu dengan mengecilkan seluruh
   halaman supaya muat, jadi tampilannya mengkerut jadi satu kolom sempit. */
.tren-bingkai{position:relative;overflow:hidden;margin:0 -16px}
.tren-rel{display:flex;align-items:flex-end;gap:2px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding:0 16px;padding:4px 16px 6px;
  scrollbar-width:none}
.tren-rel::-webkit-scrollbar{display:none}
.tren-kartu{--poster:104px;
  flex:0 0 auto;display:flex;align-items:flex-end;scroll-snap-align:start}
.tren-no{position:relative;z-index:0;flex:0 0 auto;
  font-size:calc(var(--poster) * 1.22);line-height:.76;font-weight:900;
  letter-spacing:-.07em;margin-right:calc(var(--poster) * -.14);
  color:rgba(255,255,255,.1);
  -webkit-text-stroke:2.5px rgba(255,255,255,.82);
  paint-order:stroke fill}
.tren-gbr{position:relative;z-index:1;flex:0 0 var(--poster);width:var(--poster);
  aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--bg3)}
.tren-gbr img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.tren-kartu:hover .tren-gbr img{transform:scale(1.05)}
.tren-gbr .kosong{display:flex;align-items:center;justify-content:center;height:100%;
  font-size:30px;color:var(--tx3);font-weight:800}

/* Tombol panah hanya berguna kalau ada tetikus - di layar sentuh deretnya
   digeser dengan jari, dan tombol yang menempel di tepi justru menutupi poster. */
.tren-panah{display:none}
@media(hover:hover) and (pointer:fine){
  .tren-panah{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    display:grid;place-items:center;width:38px;height:64px;border:0;cursor:pointer;
    background:rgba(7,13,24,.72);backdrop-filter:blur(6px);color:#fff;
    opacity:0;transition:opacity .2s}
  .tren-panah.kiri{left:0;border-radius:0 10px 10px 0}
  .tren-panah.kanan{right:0;border-radius:10px 0 0 10px}
  .tren-panah.kanan svg{transform:rotate(180deg)}
  .tren-panah svg{width:20px;height:20px}
  .tren-panah:hover{background:rgba(7,13,24,.92)}
  .tren-bingkai:hover .tren-panah{opacity:1}
  .tren-panah[disabled]{opacity:0 !important;pointer-events:none}
}

.kosong-pesan{color:var(--tx3);padding:28px 0}
.catatan{color:var(--tx2);margin:-4px 0 14px;font-size:14px}

/* ================= penomoran halaman ================= */
.nav-hal{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0}
.nav-hal a,.nav-hal .kini,.nav-hal .elipsis{padding:8px 13px;border-radius:10px;font-size:14px;
  background:var(--bg2);border:1px solid var(--br)}
.nav-hal .kini{background:var(--utama);border-color:var(--utama);color:#fff;font-weight:700}
.nav-hal .elipsis{background:none;border:0;color:var(--tx3)}
.nav-hal a:hover{border-color:var(--utama)}

/* ================= halaman film =================
   Gambar latar film dipasang sebagai kepala halaman, persis seperti kartu pos:
   gambarnya lebar, judulnya di bawahnya, dan tombol silang mengembalikan
   pengunjung ke halaman sebelumnya. */
/* Tinggi gambar latar dibatasi seperlima layar lebih sedikit: gambar 16:9
   penuh mendorong judul dan tombol nonton keluar layar ponsel, dan halaman
   film yang tombol nontonnya harus dicari dengan menggulir tidak ada
   gunanya. */
.film-sampul{position:relative;margin:calc(var(--bar) * -1) -16px 0;
  aspect-ratio:16/9;max-height:30vh;background:var(--bg2)}
.film-sampul img{width:100%;height:100%;object-fit:cover}
.film-sampul::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,11,22,.45) 0,rgba(5,11,22,0) 38%,
             rgba(5,11,22,.72) 78%,var(--bg) 100%)}
.tutup-sampul{position:absolute;left:14px;top:calc(var(--bar) + 8px);z-index:3;
  width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  display:grid;place-items:center;border:0;cursor:pointer;color:#fff}
.tutup-sampul svg{width:18px;height:18px}

.film-kepala{position:relative;z-index:2;text-align:center;margin:-30px 0 0}
.film-kepala h1{font-size:clamp(22px,6.4vw,38px);font-weight:900;line-height:1.05;margin:0 0 8px;
  text-transform:uppercase;letter-spacing:-.8px;text-shadow:0 3px 20px rgba(0,0,0,.6)}
.film-kepala .asli{color:var(--tx3);font-size:13px;margin:-4px 0 10px}
.genre-baris{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  font-size:13px;color:var(--tx2);margin:0 0 12px}
.genre-baris a{color:var(--tx2)}
.genre-baris a:hover{color:var(--utama)}
.genre-baris .pisah{color:var(--tx3)}

/* Deretan tombol kecil di bawah judul - digulir ke samping kalau tidak muat,
   bukan dipatahkan ke baris kedua yang membuat tingginya melonjak. */
.cip-rel{display:flex;gap:8px;justify-content:center;overflow-x:auto;
  padding:0 16px 4px;margin:0 -16px 12px;scrollbar-width:none}
.cip-rel::-webkit-scrollbar{display:none}
.cip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap;
  background:var(--bg2);border:1px solid var(--br);padding:8px 14px;border-radius:10px;
  font-size:13px;font-weight:600;cursor:pointer}
.cip svg{width:16px;height:16px;color:var(--tx2)}
.cip b{color:var(--tx2);font-weight:600}
.cip:hover{border-color:var(--utama)}
.cip.nyala{border-color:var(--utama);color:var(--utama)}
.cip.nyala svg{color:var(--utama)}

.fakta{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 10px;padding:0;margin:0 0 8px;color:var(--tx2);font-size:13.5px}
.fakta.kiri{justify-content:flex-start;margin-bottom:14px}
.fakta li{display:flex;align-items:center;gap:6px}
.fakta .lencana{border:1px solid var(--ok);color:var(--ok);font-size:11px;font-weight:800;
  padding:2px 7px;border-radius:6px;letter-spacing:.4px}
.fakta .bintang{color:var(--utama2);font-weight:800}
.fakta .lemah{color:var(--tx3)}
.fakta a{color:var(--tx2)}
.fakta a:hover{color:var(--utama)}
.baris-info{text-align:center;color:var(--tx2);font-size:13.5px;margin:0 0 4px}
.baris-info:empty{display:none}
.baris-info b{color:var(--tx2);font-weight:600}
.baris-info a:hover{color:var(--utama)}
.slogan{text-align:center;color:var(--tx3);font-style:italic;margin:10px 0 14px}

/* Tombol nonton dan trailer berbagi satu baris: dua tombol selebar layar
   yang bertumpuk memakan 130px tinggi hanya untuk dua kata. */
.aksi{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.film-kepala .aksi .tombol{flex:1 1 120px;padding:13px 12px;font-size:14px;white-space:nowrap}
.film-kepala .aksi .tombol.utama{flex:1.5 1 170px}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg3);border:1px solid var(--br);padding:12px 20px;border-radius:11px;
  font-weight:700;font-size:14px;cursor:pointer}
.tombol svg{width:16px;height:16px}
.tombol:hover{border-color:var(--utama)}
.tombol.utama{color:#fff;border-color:transparent;
  background:linear-gradient(100deg,var(--utama),color-mix(in srgb,var(--utama) 62%,var(--utama-jingga)))}
.tombol.lebar{width:100%}
.tombol.mati{opacity:.45;cursor:not-allowed}
.tombol.kecil{padding:8px 14px;font-size:13px;font-weight:600}
.tombol.kecil small{color:var(--tx3);margin-left:2px}

.sinopsis{color:var(--tx2);margin:0;max-width:75ch}
.tagar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tagar a{background:var(--bg2);border:1px solid var(--br);padding:8px 15px;
  border-radius:20px;font-size:14px}
.tagar a:hover,.tagar a.kini{border-color:var(--utama);color:var(--utama)}

.unduh{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.unduh a{background:var(--bg2);border:1px solid var(--br);padding:10px 16px;border-radius:10px;
  display:block;font-size:14px}
.unduh a:hover{border-color:var(--utama)}

/* ================= pemutar ================= */
.pemutar{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;
  margin:0 -16px 14px;border-radius:0}
.pemutar iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.server{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:4px;
  margin:0 -16px 16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.server::-webkit-scrollbar{display:none}
.server .label{color:var(--tx3);font-size:13px;flex:0 0 auto}
.server .tombol{flex:0 0 auto;white-space:nowrap}

.pengantar p{color:var(--tx2);max-width:80ch}
.kosong-hal{text-align:center;padding:70px 0}
.kosong-hal h1{font-size:64px;margin:0;color:var(--utama);font-weight:900}

/* ================= kaki ================= */
.kaki{border-top:1px solid var(--br);background:var(--bg2);margin-top:40px;padding:28px 0 22px;
  color:var(--tx2);font-size:14px}
.kaki a:hover{color:var(--utama2)}
.kaki-kolom{display:grid;gap:24px;grid-template-columns:1fr}
.kaki-kolom h4{margin:0 0 10px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--tx)}
.kaki-kolom a{display:block;padding:4px 0;font-size:13.5px;color:var(--tx2)}
.kaki-merek strong{display:block;font-size:19px;font-weight:900;color:var(--utama);margin-bottom:8px}
.kaki-merek img{height:26px;width:auto;margin-bottom:10px}
.kaki-merek p{margin:0;font-size:13px;color:var(--tx3);line-height:1.7;max-width:46ch}
.kaki-hak{border-top:1px solid var(--br);margin-top:22px;padding-top:16px;text-align:center}
.kaki-hak p{margin:4px 0;font-size:12.5px;color:var(--tx3);max-width:90ch;margin-inline:auto}

/* ================= jendela trailer ================= */
.tr-latar{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.tr-latar[hidden]{display:none}
.tr-kotak{width:min(100%,900px);background:var(--bg2);border:1px solid var(--br);
  border-radius:var(--lengkung);overflow:hidden}
.tr-atas{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px 10px 16px;border-bottom:1px solid var(--br);font-size:14px}
.tr-layar{position:relative;aspect-ratio:16/9;background:#000}
.tr-layar iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tr-kosong{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:6px;margin:0;padding:0 18px;text-align:center;color:var(--tx2);font-size:14px}
.tr-kosong a{color:var(--utama2);text-decoration:underline}

/* ================= bilah bawah (ponsel) ================= */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
  height:calc(var(--tab) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(11,20,32,.96);backdrop-filter:blur(14px);border-top:1px solid var(--br)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-size:10.5px;color:var(--tx3);background:none;border:0;
  cursor:pointer;padding:0}
.tabbar svg{width:22px;height:22px}
.tabbar .kini{color:var(--utama)}

@media(min-width:700px){
  /* Empat kolom dimulai di lebar tablet, bukan menunggu layar meja: di 800px
     kaki satu kolom menyisakan dua pertiga lebar layar kosong di kanannya. */
  .kaki-kolom{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
}

@media(min-width:768px){
  /* Ambangnya 768px, bukan 900px seperti sisa tata letak layar lebar: tablet
     tegak selebar 800px masih memakai menu ponsel, tapi layarnya sudah cukup
     lapang untuk sampul rata kiri beserta sinopsis dan trailernya. Skrip
     memakai ambang yang sama waktu memutuskan memasang trailer atau tidak -
     kalau dua angka ini berbeda, akan ada lebar layar yang memutar trailer di
     balik tata letak yang tidak menyediakan tempatnya. */
  .slide{height:min(84vh,660px);max-height:none}
  .slide-isi{bottom:56px;text-align:left;padding:0 16px}
  .slide-dalam{max-width:var(--lebar)}
  .slide-lencana{display:inline-block;background:var(--utama);color:#fff;font-size:11px;
    font-weight:800;letter-spacing:1.4px;text-transform:uppercase;padding:4px 11px;
    border-radius:5px;margin:0 0 14px}
  .slide-judul{max-width:16ch;margin-bottom:12px}
  .slide-meta{justify-content:flex-start;font-size:14px;margin-bottom:14px}
  .slide-sinopsis{display:-webkit-box;max-width:58ch;margin:0 0 20px;font-size:14.5px;
    line-height:1.7;color:var(--tx2);-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.8)}
  .slide-tombol{width:auto;padding:14px 30px;font-size:15.5px}
  .sampul-kendali{justify-content:flex-start;bottom:22px;
    padding-left:max(16px,calc(50vw - var(--lebar) / 2 + 16px))}
  .bulat.suara{right:max(20px,calc(50vw - var(--lebar) / 2 + 16px))}
}

@media(min-width:900px){
  :root{--bar:74px}
  body{padding-bottom:0}
  .tabbar{display:none}

  /* Menu lengkap muat di pil. Tiap butir punya ikon kecil di kirinya, dan yang
     sedang terbuka diberi latar merah lembut - bukan sekadar warna huruf, yang
     nyaris tidak terlihat di atas gambar sampul. */
  .menu{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
  .menu a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
    font-size:14px;color:var(--tx2);white-space:nowrap;transition:background .18s,color .18s}
  .menu a svg{width:16px;height:16px;opacity:.85}
  .menu a:hover{background:rgba(255,255,255,.09);color:var(--tx)}
  .menu a.kini{background:color-mix(in srgb,var(--utama) 22%,transparent);color:var(--utama)}
  .menu a.kini svg{opacity:1}
  .bar-isi{padding-right:10px}
  .bulat{width:38px;height:38px}

  .rel{display:grid;align-items:start;gap:18px 14px;grid-template-columns:repeat(6,1fr);
    overflow:visible;padding:0;margin:0}
  .rel>.kartu{max-width:none}
  .kisi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 16px}
  .tren-bingkai{margin:0}
  .tren-rel{gap:6px;padding:4px 0 6px;scroll-padding:0}
  .tren-kartu{--poster:148px}
  .tren-no{-webkit-text-stroke-width:3px}

  .film-sampul{margin:calc(var(--bar) * -1) 0 0;border-radius:0 0 18px 18px;overflow:hidden;
    aspect-ratio:21/9;max-height:none}
  .tutup-sampul{display:none}
  .film-kepala{text-align:left;margin:-56px 0 0}
  .genre-baris,.fakta{justify-content:flex-start}
  .baris-info,.slogan{text-align:left}
  .cip-rel{padding:0;margin:0 0 16px;flex-wrap:wrap;justify-content:flex-start}
  .pemutar{margin:0 0 18px;border-radius:var(--lengkung)}
  .server{margin:0 0 18px;padding-left:0;padding-right:0;flex-wrap:wrap}
}

/* ---- poster kecil di halaman film ----
   Di ponsel gambar latar sudah memenuhi layar dan poster hanya menambah satu
   gambar lagi yang harus diunduh, jadi poster disembunyikan di sana dan baru
   muncul di layar lebar - tempat gambar latar 21:9 menyisakan ruang di kirinya. */
.poster-kecil{display:none}

@media(min-width:900px){
  .film-kepala{display:grid;grid-template-columns:168px 1fr;gap:0 26px;align-items:start}
  /* height:auto WAJIB ada. Markahnya memuat height="750" sebagai atribut, dan
     atribut itu berlaku sebagai tinggi sungguhan begitu lebarnya dipatok lewat
     CSS - posternya jadi 168x750, memanjang sampai ke dasar halaman. */
  .poster-kecil{display:block;grid-row:span 99;width:168px;height:auto;
    align-self:start;border-radius:var(--lengkung);box-shadow:0 12px 34px rgba(0,0,0,.5)}
  .film-kepala>:not(.poster-kecil){grid-column:2}
  .film-kepala h1{margin-top:14px}
  .tombol.lebar{width:auto;min-width:210px}
  .film-kepala .aksi .tombol{flex:0 0 auto;min-width:200px}
  .film-kepala .aksi{margin-bottom:8px}
}

/* ---- halaman pemain / sutradara ---- */
.orang{display:flex;gap:16px;align-items:flex-start;margin:22px 0 26px}
.orang-foto{flex:0 0 96px;width:96px;border-radius:var(--lengkung)}
.orang-nama{font-size:22px;font-weight:800;margin:0 0 8px;line-height:1.2}
.orang .fakta{justify-content:flex-start;margin-bottom:10px}
@media(min-width:900px){
  .orang{gap:24px}
  .orang-foto{flex:0 0 168px;width:168px}
  .orang-nama{font-size:30px}
}