/* ============================================================
   LK21 - gaya khas situs film.

   Ditulis sendiri, bukan turunan stylesheet situs anime. Bedanya bukan cuma
   warna: kerapatan grid, bentuk kartu, kepala bagian, dan sudut lengkungnya
   memang disusun untuk katalog film - poster tegak berjajar rapat, lencana
   mutu dan nilai di atas poster, sudut yang lebih tegas.
   ============================================================ */

:root{
  /* Palet merah-magenta dengan aksen emas, sama dengan lk21.com.mx yang jadi
     sumber tampilan ini. Nilai di sini cadangan: --bg, --acc, --acc2 dan
     turunannya ditimpa panel lewat warna_css() sesudah berkas gaya dimuat.
     Yang TIDAK ditimpa panel adalah tiga warna teks di bawah, jadi nilainya
     harus serona dengan latarnya - teks berona biru di atas latar maroon
     kelihatan kotor tanpa ada satu pun yang error. */
  --bg:#090607; --bg2:#120e0f; --card:#1b1416; --card2:#241a1d;
  --line:#33242a; --line2:#472f36;
  --tx:#f4eff0; --tx2:#aea5a8; --tx3:#837b7e;
  --acc:#d90429; --acc2:#ff6b52; --gold:#f5c518;
  /* Dua ujung gradasi bilah kepala, diturunkan dari --acc oleh warna_css(). */
  --acc-gelap:#7d0218; --acc-terang:#ff4152;
  --acc2-terang:#ff9d8b;
  /* --acc merah pekat: teks putih. --acc2 merah muda terang: teks gelap.
     Enam nilai di blok ini TIDAK ditimpa panel, wajib disisir tiap ganti tema. */
  --atas-acc:#ffffff; --atas-acc2:#2a0509;
  --ok:#22c55e; --hot:#ff6b6b;
  --r:6px; --r2:10px; --wrap:1280px;
  --sh:0 8px 26px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:15px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:#fff;padding:9px 14px;border-radius:var(--r)}

/* ---------- kepala ---------- */
.hdr{position:sticky;top:0;z-index:50;
  background:linear-gradient(95deg,var(--acc-gelap) 0%,var(--acc) 55%,var(--acc-terang) 100%);
  border-bottom:0;box-shadow:0 2px 14px rgba(0,0,0,.45)}
.hdr .logo-t,.hdr .nav > a,.hdr .drop > button{color:#fff}
.hdr .nav > a:hover,.hdr .drop > button:hover{background:rgba(255,255,255,.16);color:#fff}
.hdr .nav > a.on,.hdr .drop.on > button{background:rgba(255,255,255,.22);color:#fff}
.hdr .srch{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.hdr .srch input{color:#fff}
.hdr .srch input::placeholder{color:rgba(255,255,255,.72)}
.hdr .srch button{background:rgba(0,0,0,.22)}
.hdr .srch button:hover{background:rgba(0,0,0,.38)}
.hdr-in{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-t{font-size:21px;font-weight:900;letter-spacing:.5px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.burger span{display:block;width:20px;height:2px;background:var(--tx)}
.nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
.nav > a,.drop > button{display:block;padding:8px 12px;font-size:14px;font-weight:600;
  color:var(--tx2);background:none;border:0;cursor:pointer;font-family:inherit;border-radius:var(--r);white-space:nowrap}
.nav > a:hover,.drop > button:hover{color:var(--tx);background:var(--card)}
.nav > a.on{color:#fff;background:var(--acc)}
.drop{position:relative}
.drop-m{display:none;position:absolute;left:0;top:100%;margin-top:6px;min-width:430px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px;grid-template-columns:repeat(3,1fr);gap:2px;box-shadow:var(--sh)}
.drop:hover .drop-m,.drop:focus-within .drop-m{display:grid}
.drop-m a{padding:7px 10px;font-size:13px;color:var(--tx2);border-radius:var(--r)}
.drop-m a:hover{background:var(--card2);color:var(--tx)}
.srch{display:flex;align-items:center;flex:0 1 260px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.srch input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);padding:9px 12px;font:inherit;font-size:13.5px}
.srch input::placeholder{color:var(--tx3)}
.srch button{background:var(--acc);border:0;color:#fff;padding:0 14px;height:36px;cursor:pointer;display:grid;place-items:center}

/* ---------- remah roti ---------- */
.bread{padding:14px 0 2px}
.bread ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--tx3)}
.bread li+li:before{content:"›";margin-right:6px;color:var(--line2)}
.bread a{color:var(--tx2)}

/* ---------- sorotan atas ---------- */
.hero{position:relative;padding:18px 16px 6px}
.hero-bg{position:absolute;left:0;right:0;top:0;bottom:-40px;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg i{position:absolute;inset:-60px;display:block;background-size:cover;background-position:center 20%;
  filter:blur(30px) saturate(1.15);opacity:.34;transform:scale(1.12)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,5,6,.3) 0%,rgba(15,5,6,.86) 62%,var(--bg) 100%)}
/* Jangan pakai `.hero > *`: .hero-bg juga anak langsung, jadi aturan itu
   menimpa position:absolute miliknya dan latar kabur berubah jadi kotak biasa
   setinggi 400px yang mendorong seluruh isi halaman ke bawah. */
.hero > .sec-h,.hero > .hero-row{position:relative;z-index:1}
.hero-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:12px;overflow-x:auto;padding:4px 0 14px;scroll-snap-type:x mandatory}
.hero-row::-webkit-scrollbar{height:6px}
.hero-row::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.hero-c{position:relative;scroll-snap-align:start;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--line);background:var(--card)}
/* Kartu sorotan memakai poster tegak 2:3, bentuk yang sama dengan kartu di
   daftar bawah. Sebelumnya kartunya melebar 16:9 dan diisi backdrop; posternya
   ikut terpakai sebagai cadangan, dan poster tegak yang dipaksa masuk kotak
   melebar itulah yang terlihat gepeng. */
.hero-c img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover;display:block}
.hero-c .hc{position:absolute;left:0;right:0;bottom:0;padding:26px 11px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9))}
.hero-c h3{font-size:12.5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero-c .hc > span{display:block;font-size:11.5px;color:var(--tx2);margin-top:2px}

/* ---------- kepala bagian: tab merah, bukan garis kiri ---------- */
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 13px}
.sec-h h1,.sec-h h2{font-size:18px;position:relative;padding-bottom:9px}
.sec-h h1:after,.sec-h h2:after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;
  background:var(--acc);border-radius:2px}
.more{font-size:12.5px;font-weight:600;color:var(--acc2);white-space:nowrap}
.more:hover{color:var(--tx)}
section{padding-top:2px}

/* ---------- tata letak dua kolom ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;padding-bottom:40px}
.side{display:grid;gap:16px;position:sticky;top:76px}

/* ---------- grid poster: rapat, khas katalog film ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px}
.card{background:none}
.card .thumb{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--card);
  border:1px solid var(--line);transition:border-color .15s,transform .15s}
.card a:hover .thumb{border-color:var(--acc);transform:translateY(-3px)}
.card .thumb img{width:100%;aspect-ratio:2/3;object-fit:cover}
.card .thumb:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.card .b{position:absolute;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:4px;letter-spacing:.3px}
.card .b-t{left:6px;top:6px;background:var(--acc);color:#fff;text-transform:uppercase}
.card .b-s{right:6px;top:6px;background:rgba(15,5,6,.85);color:var(--gold)}
.card .b-e{left:6px;bottom:6px;background:rgba(15,5,6,.85);color:#fff}
.card .pk{display:block;position:relative}
/* Dua tombol di atas poster. Selalu terlihat - di layar sentuh tidak ada
   keadaan "sedang disentuh" sebelum diketuk, jadi menyembunyikannya di balik
   :hover membuat tombolnya mustahil ditemukan di ponsel. */
/* Tombol aksi di kartu poster.

   Keadaan DASAR-nya menempel di bawah gambar dan selalu terlihat. Itu disengaja:
   perangkat yang tidak jelas punya kursor (layar sentuh, dan sebagian browser
   yang melaporkan pointer:none) tetap kebagian tombol yang bisa dipakai. Baru
   perangkat yang benar-benar berkursor yang mendapat versi sembunyi-lalu-muncul
   di bawah ini. Kalau urutannya dibalik, ponsel bisa kehilangan tombolnya sama
   sekali karena di sana hover tidak pernah terjadi. */
.card .act{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  display:grid;gap:5px;pointer-events:none}
.card .act a{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;
  gap:5px;max-width:100%;font-size:10.5px;font-weight:800;letter-spacing:.2px;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 12px rgba(0,0,0,.45)}
/* Di lebar 768-1100px kolom grid paling sempit (sekitar 113px), dan label penuh
   "Tonton Film" tidak muat dengan jarak normal. Yang dikecilkan hanya jarak dan
   spasi hurufnya - labelnya tetap utuh, tidak dipotong. */
@media(max-width:1100px){
  .card .act{left:5px;right:5px;bottom:5px}
  .card .act a{padding:6px;font-size:9.5px;gap:4px;letter-spacing:0}
  .card .act .nt::before{border-width:3.5px 0 3.5px 6px}
}
.card .act .tr{background:rgba(18,8,9,.72);color:#fff;border:1px solid rgba(255,255,255,.26)}
.card .act .tr:hover{background:rgba(18,8,9,.92);border-color:#fff}
.card .act .nt{background:var(--acc);color:#fff}
.card .act .nt:hover{background:var(--acc2);color:var(--atas-acc2,#fff)}
/* segitiga putar dibentuk dari border, jadi tidak perlu berkas ikon tambahan */
.card .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}

@media(hover:hover) and (pointer:fine){
  /* mengambang di tengah gambar, tersembunyi sampai posternya disorot.
     :focus-within disertakan supaya tetap terjangkau lewat tombol Tab.
     inset:0 saja - JANGAN ditambah left/right/bottom:auto sesudahnya, karena
     longhand itu membatalkan inset dan hanya menyisakan top:0, sehingga
     tombolnya melompat ke sudut atas dan menjulur keluar kartu. */
  .card .act{inset:0;padding:clamp(4px,0.5vw,8px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .card .thumb:hover .act,.card .thumb:focus-within .act{opacity:1;visibility:visible;transform:none}
  .card .act .tr{backdrop-filter:blur(6px)}
  /* layar gelap tipis supaya tombol tetap terbaca di atas poster yang terang */
  .card .thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,4,5,.32),rgba(11,4,5,.66));
    opacity:0;transition:opacity .18s ease}
  .card .thumb:hover::before,.card .thumb:focus-within::before{opacity:1}
}

.card .meta{padding:8px 2px 0}
.card .meta h3{font-size:13px;font-weight:600;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .meta h3 a:hover{color:var(--acc2)}
.card .meta p{margin:3px 0 0;font-size:11.5px;color:var(--tx3)}

/* ---------- daftar mendatar ringkas ---------- */
.rel{display:grid;gap:2px}
.rel > a{display:flex;gap:12px;padding:10px 8px;border-radius:var(--r2);border:1px solid transparent}
.rel > a:hover{background:var(--card);border-color:var(--line)}
.rel img{width:52px;height:74px;object-fit:cover;border-radius:var(--r);flex:0 0 auto}
.rel .i{min-width:0}
.rel .i h3{font-size:13.5px;font-weight:600}
.rel .i p{margin:3px 0 0;font-size:11.5px;color:var(--tx3)}

/* ---------- kotak samping ---------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:15px}
.box > h3{font-size:14px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line);position:relative}
.box > h3:after{content:"";position:absolute;left:0;bottom:-1px;width:30px;height:2px;background:var(--acc)}
.rank{display:grid;gap:1px}
.rank a{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:var(--r)}
.rank a:hover{background:var(--card2)}
.rank .n{font-size:15px;font-weight:900;color:var(--line2);min-width:20px;text-align:center}
.rank a:hover .n{color:var(--acc)}
.rank img{width:38px;height:54px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.rank h4{font-size:12.5px;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rank a > span:last-child > span{display:block;font-size:11px;color:var(--tx3);margin-top:2px}

/* ---------- label ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;background:var(--card2);border:1px solid var(--line);color:var(--tx2);
  font-size:12px;padding:5px 10px;border-radius:var(--r)}
a.tag:hover{border-color:var(--acc);color:var(--tx)}

/* ---------- halaman detail film ---------- */
.dtl{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;padding:20px 0 6px}
.dtl > div:first-child .poster img{width:100%;border-radius:var(--r2);border:1px solid var(--line)}
.dtl h1{font-size:clamp(21px,3.2vw,30px)}
.alt{color:var(--tx3);font-size:13px;margin:5px 0 12px}
.scorebig{display:flex;align-items:center;gap:12px;margin:16px 0;padding:13px 15px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.scorebig .v{font-size:27px;font-weight:900;color:var(--gold);line-height:1}
.scorebig b{font-size:13px}
.scorebig small{color:var(--tx3);font-size:11.5px}
.info{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-top:14px}
.info > div{background:var(--card);padding:10px 13px}
.info b{display:block;font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px}
.info span{display:block;font-size:13.5px;margin-top:3px}
.syn{padding:20px 0 4px}
.syn h2{font-size:17px;margin-bottom:10px}
.syn p{color:var(--tx2);font-size:14.5px}

/* ---------- pemutar ---------- */
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r2);
  overflow:hidden;border:1px solid var(--line);margin:14px 0}
.player iframe,.player video{width:100%;height:100%;border:0;display:block}
.ph{height:100%;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:24px;color:var(--tx3)}
.ph p{margin:0;font-size:13.5px}
.srv{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.srv button{background:var(--card);border:1px solid var(--line);color:var(--tx2);
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--r);cursor:pointer}
.srv button:hover{border-color:var(--acc2);color:var(--tx)}
.srv button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.epnav{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 8px}

/* ---------- unduhan ---------- */
.dl{display:grid;gap:9px}
.dl .row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:11px 13px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.dl .q{background:var(--acc);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:4px}
.dl .row a{font-size:13px;color:var(--tx2);border-bottom:1px dashed var(--line2)}
.dl .row a:hover{color:var(--acc2)}

/* ---------- indeks abjad ---------- */
.az{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.az a{min-width:34px;text-align:center;padding:7px 9px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);font-size:13px;font-weight:600;color:var(--tx2)}
.az a:hover{border-color:var(--acc)}
.az a.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);color:var(--tx);font-size:13.5px;font-weight:600}
.btn:hover{border-color:var(--acc)}
.btn-p{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-p:hover{background:var(--acc2);border-color:var(--acc2)}

/* ---------- paginasi ---------- */
.pg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:26px 0 6px}
.pg a,.pg span{padding:8px 13px;border-radius:var(--r);font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--tx2)}
.pg a:hover{border-color:var(--acc);color:var(--tx)}
.pg .on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- prosa & FAQ ---------- */
.prose{padding:22px 0;color:var(--tx2);font-size:14.5px}
.prose h2{font-size:18px;color:var(--tx);margin:20px 0 9px}
.prose h3{font-size:15.5px;color:var(--tx);margin:18px 0 7px}
.prose p{margin:0 0 11px}
.prose a{color:var(--acc2);border-bottom:1px dashed var(--line2)}
.prose ol,.prose ul{margin:0 0 11px;padding-left:20px;line-height:1.8}
.faq details{border:1px solid var(--line);border-radius:var(--r2);padding:11px 14px;margin-bottom:8px;background:var(--bg2)}
.faq summary{cursor:pointer;font-size:13.5px;font-weight:600}
.faq p{margin:9px 0 0;font-size:13.5px;color:var(--tx2)}

/* ---------- keadaan kosong ---------- */
.empty{text-align:center;padding:44px 20px;background:var(--card);
  border:1px dashed var(--line2);border-radius:var(--r2);color:var(--tx3)}
.empty h2{color:var(--tx)}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--r);padding:12px 15px;font-size:13.5px;color:var(--tx2);margin:14px 0}

/* ---------- kaki ---------- */
.ftr{background:var(--bg2);border-top:1px solid var(--line);margin-top:34px;padding:34px 0 0}
.ftr-in{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:26px;padding-bottom:26px}
.ftr h4{font-size:13px;margin-bottom:11px;color:var(--tx)}
.ftr a{display:block;font-size:13px;color:var(--tx3);padding:3px 0}
.ftr a:hover{color:var(--acc2)}
.ftr > .wrap > div > p,.ftr-in > div > p{color:var(--tx3);font-size:13px;margin:9px 0 0}
.copy{border-top:1px solid var(--line);padding:15px 16px;text-align:center;color:var(--tx3);font-size:12px}
.copy p{margin:3px 0}
.totop{position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:var(--r2);
  background:var(--acc);color:#fff;border:0;cursor:pointer;font-size:19px;display:none;z-index:40}
.totop.on{display:block}

/* ---------- layar kecil ---------- */
@media(max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr) 280px;gap:20px}
}
@media(max-width:980px){
  .cols{grid-template-columns:1fr;gap:8px}
  .side{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .ftr-in{grid-template-columns:1fr 1fr}
  .drop-m{min-width:320px;grid-template-columns:repeat(2,1fr)}
}
/* Dulu 760px. Menu mendatarnya butuh lebih dari itu, sehingga antara 761px
   dan ~980px bilahnya meluap ke samping dan menyeret halaman ikut melebar.
   Titik alih dinaikkan dari 760px ke 980px. */
@media(max-width:980px){
  .hdr-in{height:auto;padding:10px 0;flex-wrap:wrap;row-gap:10px}
  .logo{order:1}
  .burger{order:0}
  .srch{order:2;flex:1 1 100%}
  .sec-h{margin:20px 0 11px}
  .sec-h h1,.sec-h h2{font-size:16px}
  .hero{padding:12px 14px 4px}
  .hero-bg{bottom:-20px}
  .scorebig{padding:11px 13px}
  .scorebig .v{font-size:23px}
  .info{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .dtl h1{font-size:19px}
  .burger{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;align-items:stretch;
    background:var(--card);border-bottom:1px solid var(--line);padding:8px;gap:1px;max-height:70vh;overflow:auto}
  .nav.on{display:flex}
  .drop-m{position:static;min-width:0;grid-template-columns:repeat(2,1fr);box-shadow:none;background:var(--bg2);margin-top:4px}
  .drop:hover .drop-m{display:none}
  .drop.on .drop-m{display:grid}
  .srch{flex:1 1 auto}
  .dtl{grid-template-columns:130px minmax(0,1fr);gap:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 9px}
  .ftr-in{grid-template-columns:1fr}
  .hero-row{grid-auto-columns:minmax(140px,1fr)}
}

@media(max-width:430px){
  .card .act{left:5px;right:5px;bottom:5px;gap:4px}
  .card .act a{font-size:9.5px;padding:5px 4px;letter-spacing:.2px}
  .grid{grid-template-columns:repeat(2,1fr);gap:11px 8px}
  .hero-row{grid-auto-columns:minmax(118px,1fr)}
  .dtl{grid-template-columns:100px minmax(0,1fr);gap:12px}
  .info{grid-template-columns:1fr}
  .az a{min-width:30px;padding:6px 7px;font-size:12px}
  .pg a,.pg span{padding:7px 10px}
}

/* ---------- baris negara di kaki halaman ---------- */
.ftr-neg{padding:6px 16px 22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.ftr-neg h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--tx);
  margin:0 0 12px;padding-bottom:8px;position:relative}
.ftr-neg h4:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--acc) 0 44px,var(--line) 44px)}
.ftr-neg .tag{background:var(--card2);font-weight:600;font-size:11.5px;padding:6px 12px}
.ftr-neg .tag:hover{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- blok tentang yang lebih berisi ---------- */
.tentang{padding:26px 0 6px}
.tentang h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:0 0 14px;
  padding-bottom:8px;position:relative}
.tentang h2:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--acc) 0 56px,var(--line) 56px)}
.tentang p{margin:0 0 12px;color:var(--tx2);font-size:14px;line-height:1.75}
.tentang a{color:var(--acc2);font-weight:600}
.tentang a:hover{color:var(--tx);text-decoration:underline}
.tentang b{color:var(--tx)}

/* tautan "Semua" di kepala rel sisi kanan */
.box > h3 .rank-semua{margin-left:auto;font-size:11.5px;font-weight:600;white-space:nowrap}


/* Bagian "Tentang" - ringkas berkolom.
   Dulu berupa lima paragraf panjang yang memakan layar tanpa banyak menolong
   pembaca. Sekarang cukup satu paragraf pengantar, lalu tautan yang memang
   dicari orang: jelajah utama, genre, dan tahun rilis. */
.tentang-kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px 26px;margin:18px 0 16px}
.tentang-kolom h3{font-size:12px;text-transform:uppercase;letter-spacing:.9px;
  margin:0 0 10px;color:var(--tx)}
.tentang-kolom ul{list-style:none;margin:0;padding:0}
.tentang-kolom li{margin:0 0 7px}
.tentang-kolom a{font-size:13.5px;font-weight:500;color:var(--tx2)}
.tentang-kolom a:hover{color:var(--acc)}
.tentang-kaki{font-size:12.5px;color:var(--tx3);margin:0;line-height:1.7}
.tentang-kaki a{font-weight:500}
@media(max-width:560px){
  .tentang-kolom{gap:18px;margin:16px 0 14px}
  .tentang-kolom a{font-size:13px}
}


/* ---------- popup trailer ---------- */
.tr-latar{position:fixed;inset:0;z-index:200;background:rgba(8,3,4,.86);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
.tr-latar[hidden]{display:none}
.tr-kotak{width:100%;max-width:900px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.tr-atas{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.tr-atas b{font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-tutup{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--tx2);font-size:20px;line-height:1;cursor:pointer;transition:.15s}
.tr-tutup:hover{background:var(--acc);border-color:transparent;color:var(--atas-acc)}
.tr-layar{aspect-ratio:16/9;background:#000;display:grid;place-items:center}
.tr-layar iframe{width:100%;height:100%;border:0;display:block}
.tr-layar p{color:var(--tx3);font-size:13.5px;margin:0;padding:18px;text-align:center}
.tr-layar p a{color:var(--acc);font-weight:600}
@media(max-width:560px){
  .tr-latar{padding:12px}
  .tr-kotak{border-radius:10px}
  .tr-atas b{font-size:13px}
}


/* ---------- halaman film di layar sempit ----------
   Dulu poster dipaksa jadi kolom selebar 100px dan seluruh tabel info
   dijejalkan ke kolom kanan yang tersisa, jadi halamannya memanjang ke bawah
   dengan tulisan sempit. Di sini tata letaknya disusun ulang, bukan diperas:
   poster berdampingan dengan tombol tonton, lalu judul, nilai, dan tabel info
   memakai lebar halaman penuh. */
.dtl-tonton{width:100%;justify-content:center;margin-top:12px}

@media(max-width:560px){
  /* Dua pembungkus di dalam .dtl dibongkar dengan display:contents supaya
     isinya jadi sel kisi langsung. Dengan begitu poster bisa duduk di kiri
     sementara judul, genre, dan nilai menumpuk di kanannya - tanpa mengubah
     susunan HTML, dan tanpa menyisakan ruang kosong di samping poster. */
  /* Poster membentang empat baris dan biasanya lebih tinggi daripada isi
     kolom kanan. Tanpa patokan, sisa tingginya dibagi rata ke keempat baris
     sehingga muncul jarak menganga antara judul dan genre. Baris 1-3 dipatok
     setinggi isinya dan baris terakhir menyerap sisanya, jadi ruang kosongnya
     jatuh di bawah - sejajar dengan ujung poster. */
  .dtl{grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;
       gap:9px 13px;align-items:start;padding:14px 0 4px}
  .dtl > div{display:contents}
  /* Barisnya dipatok satu per satu, tidak diserahkan ke penempatan otomatis.
     Begitu ada elemen selebar penuh (tombol tonton), penempatan otomatis tidak
     bisa mundur ke baris di atasnya - akibatnya judul terlempar ke bawah tombol
     pada film yang sudah punya video. Baris eksplisit membuat susunannya sama
     saja, ada tombol maupun tidak. Baris yang isinya kosong menyusut sendiri. */
  .dtl .poster{grid-column:1;grid-row:1 / span 4;align-self:start}
  .dtl h1{grid-column:2;grid-row:1}
  .dtl .alt{grid-column:2;grid-row:2}
  .dtl .tags{grid-column:2;grid-row:3}
  .dtl .scorebig{grid-column:2;grid-row:4}
  .dtl h1{font-size:17px;line-height:1.3;margin:0}
  .dtl .alt{margin:0}
  .dtl .tags{gap:5px}
  .dtl .tag{font-size:11px;padding:4px 8px}
  .dtl .scorebig{padding:9px 11px;align-self:start}
  .dtl .scorebig .v{font-size:20px}
  /* tombol dan tabel info memakai lebar penuh, di bawah blok poster */
  .dtl-tonton{grid-column:1 / -1;grid-row:5;width:100%;margin-top:4px}
  .dtl .info{grid-column:1 / -1;grid-row:6;grid-template-columns:repeat(2,minmax(0,1fr))}
  .info > div{padding:9px 11px}
  .info span{font-size:13px}
}
@media(max-width:360px){
  .dtl{grid-template-columns:104px minmax(0,1fr);gap:8px 11px}
  .dtl .info{grid-template-columns:minmax(0,1fr)}
}


/* ---------- strip kategori ----------
   Pintasan genre, tahun, dan peringkat di bawah header. Menggulir mendatar di
   layar sempit supaya tidak membungkus jadi dua baris. */
.strip{background:linear-gradient(95deg,var(--acc2) 0%,var(--acc2-terang) 60%,var(--acc2) 100%);
  border-bottom:1px solid rgba(0,0,0,.18)}
.strip-in{display:flex;gap:2px;align-items:center;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.strip-in::-webkit-scrollbar{display:none}
.strip a{flex:0 0 auto;padding:9px 12px;font-size:12.5px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--atas-acc2);white-space:nowrap}
.strip a:hover{background:rgba(0,0,0,.14);color:#000}

/* Ukuran nama merek diturunkan bertahap mengikuti lebar layar supaya bilah
   header tidak sesak. Angkanya disetel untuk merek sepanjang sebelas huruf -
   kalau merek domain ini diganti jadi lebih panjang, di sinilah tempat
   menyesuaikannya, bukan di berkas tampilan. */
.logo-t{font-size:19px;letter-spacing:.2px}
@media(max-width:900px){ .logo-t{font-size:17px} }
@media(max-width:640px){
  .strip a{padding:8px 10px;font-size:11.5px}
  .logo-t{font-size:16px}
}

/* Di layar kecil bilah kategori kuning disembunyikan supaya kepala halaman
   bersih dan yang terbaca tinggal logo serta nama merek. Tautan genrenya tetap
   ada di HTML dan tetap tampil di layar lebar, jadi tidak ada jalur perayapan
   yang hilang. */
@media(max-width:980px){
  .strip{display:none}
}


/* ---------- baris bioskop yang bergeser sendiri ---------- */
.hero-geser{position:relative}
/* Batang gulir disembunyikan karena navigasinya kini lewat panah dan geseran
   otomatis; isinya tetap bisa diseret dan diusap seperti biasa. */
.hero-geser .hero-row{scrollbar-width:none;-ms-overflow-style:none}
.hero-geser .hero-row::-webkit-scrollbar{display:none}
.hero-panah{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:5;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);
  background:rgba(15,5,6,.74);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  opacity:0;pointer-events:none;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:opacity .18s,background .15s}
.hero-geser:hover .hero-panah,.hero-panah:focus-visible{opacity:1;pointer-events:auto}
.hero-panah:hover{background:var(--acc);border-color:transparent;color:var(--atas-acc)}
.hero-panah.kiri{left:-8px}
.hero-panah.kanan{right:-8px}
.hero-panah.mati{opacity:0 !important;pointer-events:none !important}
@media(max-width:760px){
  /* di layar sentuh panah tidak berguna - usapan jari lebih enak */
  .hero-panah{display:none}
}

/* Tag merek - teks biasa, sengaja BUKAN tautan. Lihat tag_merek_film(). */
.tagmerek{display:flex;flex-wrap:wrap;gap:6px}
/* white-space:nowrap SENGAJA TIDAK dipakai: judul film bisa sangat panjang,
   dan satu pil yang tidak boleh patah memaksa seluruh halaman melebar di
   ponsel. Tag dibiarkan patah baris, dengan lebar dibatasi lebar induknya. */
.tagmerek .tm{display:inline-block;font-size:11.5px;line-height:1.45;
  padding:4px 9px;border-radius:99px;background:var(--card2);
  color:var(--tx2);border:1px solid var(--line);
  max-width:100%;overflow-wrap:anywhere}
.tagsec{margin-top:22px}