/* 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:#0b0b0f; --bg2:#14141b; --bg3:#1d1d26;
  --tx:#f2f4f8; --tx2:#a8b0bd; --tx3:#6f7785;
  --br:#252530; --utama:#e11d2e; --utama2:#f5b301; --ok:#33c06a;
  --lebar:1180px; --lengkung:14px;
  --bar:56px;            /* tinggi bilah atas */
  --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 =================
   Di ponsel bilah ini melayang di atas gambar sampul beranda, jadi latarnya
   dibuat tembus pandang dan baru menggelap setelah halaman digulir - itu yang
   membuat gambar sampul terasa memenuhi layar. */
.bar{position:sticky;top:0;z-index:40;height:var(--bar);
  background:rgba(11,11,15,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.bar.melayang{background:transparent;border-color:transparent}
.bar-isi{display:flex;align-items:center;gap:14px;height:var(--bar)}
.merek{font-weight:900;font-size:21px;letter-spacing:-.5px;line-height:1;color:var(--utama)}
.merek small{display:block;font-size:10px;font-weight:500;color:var(--tx3);letter-spacing:.4px;margin-top:2px}
.merek.gambar{display:flex;align-items:center}
.merek.gambar img{display:block;width:auto;height:26px}
.menu{display:none}
.bar-alat{margin-left:auto;display:flex;align-items:center;gap:4px}
.bulat{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:0;cursor:pointer;color:var(--tx);padding:0}
.bulat:hover{background:rgba(255,255,255,.16)}
.bulat svg{width:20px;height:20px}
.cari{display:none}

/* ---- pencarian layar penuh (ponsel) ---- */
.cari-layar{position:fixed;inset:0;z-index:60;background:rgba(11,11,15,.97);
  backdrop-filter:blur(8px);padding:14px 16px;display:none}
.cari-layar[hidden]{display:none}
.cari-layar.buka{display:block}
.cari-layar form{display:flex;gap:8px;align-items:center}
.cari-layar input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--br);
  color:var(--tx);padding:12px 14px;border-radius:12px;font-size:16px}
.cari-layar input:focus{outline:0;border-color:var(--utama)}
.cari-layar button{background:var(--utama);color:#fff;border:0;padding:12px 18px;
  border-radius:12px;font-weight:700;cursor:pointer}
.cari-layar .tutup{background:none;border:0;color:var(--tx2);cursor:pointer;padding:8px}

/* ---- 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}
.laci{position:fixed;top:0;right:0;bottom:0;z-index:55;width:min(82vw,320px);
  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:block;padding:11px 12px;border-radius:10px;font-size:15px;color:var(--tx2)}
.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 dan menyorot
   titiknya - kalau JavaScript mati, sampulnya tetap bisa digeser. */
/* 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;
  background:linear-gradient(to bottom,rgba(8,8,12,.55) 0,rgba(8,8,12,0) 28%,
             rgba(8,8,12,.72) 62%,var(--bg) 100%)}
.slide-isi{position:absolute;left:0;right:0;bottom:26px;z-index:2;padding:0 20px;text-align:center}
.slide-judul{font-size:clamp(28px,8.5vw,46px);font-weight:900;line-height:1.02;margin:0 0 12px;
  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 16px}
.slide-meta .bintang{color:var(--utama2);font-weight:800}
.slide-meta .pisah{color:var(--tx3)}
.slide-tombol{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:min(100%,420px);padding:15px 26px;border-radius:12px;font-weight:800;font-size:16px;
  color:#fff;background:linear-gradient(95deg,var(--utama),color-mix(in srgb,var(--utama) 55%,#ff8a3d));
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.slide-tombol svg{width:18px;height:18px}
.titik{display:flex;justify-content:center;gap:7px;margin:14px 0 0}
.titik span{width:7px;height:7px;border-radius:99px;background:var(--bg3);transition:all .25s}
.titik span.kini{width:26px;background:var(--utama)}

/* ================= 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(12,8,14,.7);color:#fff;border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px)}
  .kartu .act .tr:hover{background:rgba(12,8,14,.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(6,4,8,.3),rgba(6,4,8,.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}
.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(8,8,12,.5) 0,rgba(8,8,12,0) 45%,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(95deg,var(--utama),color-mix(in srgb,var(--utama) 55%,#ff8a3d))}
.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}
.kaki-hak p{margin:4px 0;font-size:12.5px;color:var(--tx3);max-width:90ch}

/* ================= 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(16,16,22,.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:900px){
  :root{--bar:64px}
  body{padding-bottom:0}
  .tabbar{display:none}
  .bar{background:rgba(11,11,15,.92);border-bottom:1px solid var(--br)}
  .bar.melayang{background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);border-color:transparent}
  .menu{display:flex;gap:20px;font-size:14px;color:var(--tx2);margin-left:10px}
  .menu a:hover{color:var(--utama)}
  .bar-alat .bulat.hanya-hp{display:none}
  .cari{display:flex;gap:6px;margin-left:auto}
  .cari input{background:var(--bg3);border:1px solid var(--br);color:var(--tx);
    padding:9px 13px;border-radius:10px;min-width:220px;font-size:14px}
  .cari input:focus{outline:0;border-color:var(--utama)}
  .cari button{background:var(--utama);color:#fff;border:0;padding:9px 16px;
    border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}
  .bar-alat{margin-left:8px}

  .slide{height:66vh;max-height:560px}
  .slide-isi{text-align:left;left:auto;right:auto;bottom:52px;padding:0;
    max-width:var(--lebar);margin:0 auto;left:0;right:0;padding:0 16px}
  .slide-judul{max-width:16ch}
  .slide-meta{justify-content:flex-start}
  .slide-tombol{width:auto}

  .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}

  .film-sampul{margin:calc(var(--bar) * -1) 0 0;border-radius:0 0 18px 18px;overflow:hidden;
    aspect-ratio:21/9}
  .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}
  .pemutar{margin:0 0 18px;border-radius:var(--lengkung)}
  .film-sampul{max-height:none}
  .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}
  .poster-kecil{display:block;grid-row:span 99;width:168px;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}
}