:root {
  --bg: #0b0b0f;
  --fg: #e9e9ee;
  --muted: #9a9aa6;
  --accent: #1583d3;   /* indigo — warna brand Pant3ng!n */
  --accent-2: #43a6ea;
  --live: #e50914;     /* merah HANYA untuk badge LIVE (konvensi siaran langsung) */
  --card-w: 250px;
  --card-h: 141px; /* 16:9 */
}
* { box-sizing: border-box; }
/* Pagar anti-penggelembung huruf (WebView Android jadul): global, murni CSS,
   nol efek visual di browser modern. Lihat skill standar-web-hp. */
body * {
  max-height: 999999px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html { background: #000; }
html, body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Top bar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 3.5vw;   /* space-between memisah kiri/kanan; tak perlu flex gap (kompat WebView jadul) */
  background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.55) 70%, rgba(0,0,0,0));
}
/* Spasi pakai margin (bukan flex `gap`) — WebView lawas (proyektor Android murah) tak dukung gap */
.tb-left { display: flex; align-items: center; min-width: 0; }
.tb-left > * + * { margin-left: 26px; }
.logo { text-decoration: none; white-space: nowrap; color: #fff; }
.brand-lockup { display: inline-flex; align-items: center; }
.brand-mark { width: 30px; height: 30px; display: block; flex: 0 0 auto; margin-right: 9px; }
.brand-wm { font-weight: 800; letter-spacing: -0.03em; font-size: 23px; color: #fff; }
.brand-ver { margin-left: 7px; align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--accent); opacity: 0.85; letter-spacing: 0.02em; }
.brand-wm .g {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav { display: flex; }
.nav a { color: #cfcfd6; text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav a + a { margin-left: 20px; }
.nav a.active { color: #fff; font-weight: 600; }
.nav a:hover { color: #fff; }
.tb-right { display: flex; align-items: center; }
.tb-right > * + * { margin-left: 16px; }
.icon-btn {
  background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer;
  position: relative; line-height: 1; padding: 4px;
}
#btn-refresh { font-size: 24px; }   /* dulu inline di home.html; di CSS supaya media query TV bisa menimpanya */
/* Ikon SVG (bingkai-sudut & QR) memakai ukuran eksplisit — `font-size` hanya mengatur
   glif emoji, tak berpengaruh pada SVG. Ukurannya disamakan dgn tinggi glif emoji di
   sebelahnya supaya deretan ikon tetap sejajar. */
.icon-btn svg { width: 21px; height: 21px; display: block; }
.search-box {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: var(--fg);
  border-radius: 8px; padding: 6px 12px; font-size: 15px; width: 200px; max-width: 42vw; outline: none;
}
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(21, 131, 211, .4); }
.search-box.hidden { display: none; }
.bell .badge {
  position: absolute; top: -4px; right: -6px; background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px;
  padding: 1px 5px; line-height: 1.4;
}
.avatar {
  width: 30px; height: 30px; border-radius: 6px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  position: relative; flex: 0 0 auto;
}
.avatar::after { content: "☺"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: #fff; font-size: 16px; }

/* ---------- Rows ---------- */
#rows { padding: 12px 0 40px; margin-top: 0; }   /* jangan tumpuk judul baris di bawah topbar */
.home-row { margin: 26px 0; }
.row-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; padding: 0 3.5vw; }
.row-scroller {
  display: flex; overflow-x: auto; overflow-y: hidden;
  padding: 6px 3.5vw 14px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.row-scroller .card + .card { margin-left: 8px; }   /* jarak antar kartu (ganti flex gap) */
.row-scroller::-webkit-scrollbar { height: 8px; }
.row-scroller::-webkit-scrollbar-thumb { background: #2a2a33; border-radius: 999px; }
.row-scroller::-webkit-scrollbar-track { background: transparent; }

/* ---------- Card ---------- */
.card {
  position: relative; flex: 0 0 auto; width: var(--card-w); height: var(--card-h);
  border-radius: 6px; overflow: hidden; cursor: pointer; scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .18s ease; background: #16161c;
  text-decoration: none; color: inherit; display: block;
}
.card:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(0,0,0,0.6); z-index: 5; }
/* `:focus` ikut disebut, bukan `:focus-visible` saja. Sertifikasi LG mewajibkan SETIAP
   objek punya efek seleksi yang terlihat, sedangkan `:focus-visible` baru ada di
   Chromium 86 — di TV webOS yang lebih tua aturan ini tak berlaku sama sekali dan
   kartu yang sedang difokus remote TIDAK menunjukkan tanda apa pun. Efek sampingnya di
   desktop cuma cincin fokus ikut muncul setelah diklik; di TV, klik = tekan OK yang
   langsung berpindah halaman. */
.card:focus, .card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.icon-btn:focus, .icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }   /* remote/D-pad: tombol header terlihat saat difokus */
.poster {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; padding: 12px;
  background-image: var(--grad, none); background-size: cover; background-position: center;
}
/* Gambar portrait/persegi JANGAN dipotong. Kartu berbentuk 16:9, jadi `cover`
   membuang hampir seluruh gambar tegak — hanya pita tengahnya yang terlihat.
   Sekarang: gambar tajam tampil UTUH (contain), dan celah kiri-kanannya diisi
   versi BURAM dari gambar yang sama di lapisan kartu. Kartu tetap terisi penuh,
   tak ada bilah kosong, dan gambar lanskap 16:9 praktis tak berubah tampilannya. */
.poster.has-img { background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1; }
.card.has-img::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: var(--img, none); background-size: cover; background-position: center;
  filter: blur(14px); transform: scale(1.16); z-index: 0;
}
.poster::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 62%);
}
.poster .title {
  position: relative; font-weight: 800; font-size: 17px; line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,.7); text-wrap: balance;
}

/* badges & overlays */
.live {
  position: absolute; top: 8px; left: 8px; background: var(--live); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; z-index: 2;
}
.live::before { content: "● "; }
.lock { position: absolute; top: 6px; right: 8px; font-size: 13px; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.hoverbar {           /* pojok KANAN-ATAS + kecil -> tak menutup nama channel (yang ada di bawah) */
  position: absolute; right: 8px; top: 8px; display: flex; opacity: 0;
  transition: opacity .18s ease; z-index: 3;
}
.hoverbar > * + * { margin-left: 6px; }
.card:hover .hoverbar { opacity: 1; }
.btn-watch { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }

#foot { color: var(--muted); font-size: 17px; line-height: 1.5; padding: 14px 3.5vw 44px; max-width: 900px; }

#fs-hint {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: rgba(0,0,0,.72); color: #fff; font-size: 14.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; z-index: 80; pointer-events: none;
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px);
  animation: fsPulse 1.8s ease-in-out infinite;
}
@keyframes fsPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* ===== HP / portrait ===== */
@media (max-width: 640px) {
  /* kartu besar & prominan: ~1 penuh + intip berikutnya -> mengundang swipe */
  :root { --card-w: 74vw; --card-h: 41.6vw; }   /* 16:9 */
  .nav { display: none; }
  #topbar { padding: 12px 4vw; }
  .brand-wm { font-size: 20px; }
  .brand-mark { width: 26px; height: 26px; }
  .tb-right > * + * { margin-left: 12px; }
  #rows { margin-top: 0; padding-top: 8px; }
  .home-row { margin: 20px 0; }
  .row-title { font-size: 18px; padding: 0 4vw; }
  .row-scroller { padding: 6px 4vw 16px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .row-scroller .card + .card { margin-left: 10px; }
  .card { scroll-snap-align: center; }
  .poster .title { font-size: 4.6vw; }
  .card:hover { transform: none; }              /* HP: tak ada hover, jangan zoom nyangkut */
  /* Badge "▶ Tayangkan" itu petunjuk HOVER/FOKUS untuk TV & desktop (di sana kartu perlu
     tanda bahwa ia bisa ditayangkan). Di HP tak ada hover — mengetuk kartu SUDAH langsung
     menayangkan — jadi badge cuma menutupi poster tanpa menambah informasi. Sembunyikan. */
  .hoverbar { display: none; }
  /* Label versi ditumpuk dua baris (apk / web). Sebaris ia makan ~55px, dan dgn empat
     ikon (🔍 bingkai QR ↻) — lima kalau 🔑 PIN ikut muncul — teks logo yang `nowrap`
     menembus ke bawah deretan ikon sampai 87px di layar 320px. */
  .brand-ver { line-height: 1.15; margin-left: 4px; }
  /* Bilah atas HP kini berisi EMPAT ikon (cari · sesuaikan layar · pasang layar · muat
     ulang), lima kalau 🔑 PIN tersimpan ikut muncul. Dengan ukuran bawaan, sisi kanan
     memakan 196px dan teks logo yang `nowrap` menembus ke bawahnya. Ikon dirapatkan &
     sedikit dikecilkan — sentuhannya tetap nyaman, dan tak satu pun fitur dibuang
     (tombol sesuaikan-layar tetap ada; pemiliknya memang memakainya dari HP, R74). */
  .tb-right > * + * { margin-left: 8px; }
  .icon-btn { font-size: 17px; padding: 2px; }
  .icon-btn svg { width: 19px; height: 19px; }
  #btn-refresh { font-size: 21px; }
  .brand-wm { font-size: 18px; }
  .brand-mark { width: 24px; height: 24px; margin-right: 7px; }
  /* Kotak cari terbuka di HP: logo memakai `white-space: nowrap` sehingga TAK BISA
     menciut, jadi flexbox membiarkan kotak cari dan wordmark BERTUMPUK (input
     menabrak "Pant3ng!n" + label versi). Selama mencari, bilah atas diserahkan
     seluruhnya ke kotak cari — logo disembunyikan sampai pencarian ditutup. */
  #topbar.searching .tb-left { display: none; }
  #topbar.searching .tb-right { flex: 1 1 auto; min-width: 0; }
  #topbar.searching .search-box { width: 100%; max-width: none; }
  #foot { font-size: 14.5px; padding: 12px 4vw 40px; }
}
/* Layar sangat sempit (≤340px, mis. perangkat lawas): label versi mengalah supaya teks
   logo tak menembus ke bawah deretan ikon. Ia diagnostik dan tetap tampil di HP normal,
   tablet, dan TV. Blok ini WAJIB di luar blok ≤640px di atas — pernah tersisip di
   tengahnya dan diam-diam menelan aturan `#topbar.searching` (R74), sehingga kotak cari
   menabrak logo lagi di 390px. */
@media (max-width: 340px) {
  .brand-ver { display: none; }
}
@media (max-width: 380px) {
  :root { --card-w: 82vw; --card-h: 46.1vw; }
}

.cat-inst { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); padding: 1px 7px; border-radius: 5px; z-index: 2; }

/* ===== Layar besar / TV / proyektor: besarkan kartu & teks biar tak kecil-sparse ===== */
@media (min-width: 1200px) {
  :root { --card-w: 300px; --card-h: 169px; }
  .row-title { font-size: 24px; }
  .poster .title { font-size: 19px; }
}
@media (min-width: 1600px) {
  :root { --card-w: 380px; --card-h: 214px; }
  .row-title { font-size: 28px; }
  .brand-wm { font-size: 27px; } .brand-mark { width: 34px; height: 34px; }
  .nav a + a { margin-left: 26px; } .nav a { font-size: 17px; }
  .poster .title { font-size: 22px; } .lock { font-size: 18px; top: 10px; right: 12px; }
  .live { font-size: 12px; } #foot { font-size: 20px; max-width: 1100px; }
  .home-row { margin: 34px 0; }
}
@media (min-width: 1900px) {
  :root { --card-w: 460px; --card-h: 259px; }
  .row-title { font-size: 34px; padding: 0 3vw; }
  .poster .title { font-size: 26px; } .lock { font-size: 22px; }
  .row-scroller { padding: 8px 3vw 18px; } .home-row { margin: 42px 0; }
}

/* ===== Dialog PIN channel terkunci (OTP 6 kotak) ===== */
.pin-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pin-box { width: 92vw; max-width: 420px; max-height: 94vh; overflow-y: auto; background: #17171f; border: 1px solid #2a2a36; border-radius: 18px;
  padding: 28px 26px 22px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.pin-lock { font-size: 34px; line-height: 1; }
.pin-title { font-size: 20px; font-weight: 800; color: var(--fg); margin: 10px 0 4px; }
.pin-sub { font-size: 14px; color: var(--muted); margin-bottom: 18px; line-height: 1.4; }
.pin-inputs { display: flex; justify-content: center; margin-bottom: 12px; }
.pin-cell + .pin-cell { margin-left: 10px; }
.pin-cell { display: flex; align-items: center; justify-content: center; width: 46px; height: 58px; font-size: 32px; font-weight: 700;
  color: var(--fg); background: #0e0e14; border: 2px solid #33333f; border-radius: 12px; }
.pin-cell.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21, 131, 211,.3); }
/* Keypad angka di dalam dialog (TV: navigasi remote/D-pad; HP: sentuh). Tanpa keyboard sistem. */
.pin-keypad { display: flex; flex-wrap: wrap; justify-content: center; width: 246px; max-width: 100%; margin: 6px auto 14px; }
.pin-keypad .pin-key { width: 74px; height: 54px; margin: 4px; padding: 0; font-size: 22px; font-weight: 700;
  color: var(--fg); background: #23232e; border: 1px solid #33333f; border-radius: 12px; cursor: pointer; }
.pin-keypad .pin-key:focus { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21,131,211,.45); outline: none; }
.pin-keypad .pin-key:active { transform: scale(.95); }
.pin-keypad .pin-key-ok { background: var(--accent); color: #fff; }
.pin-box.checking .pin-keypad { opacity: .5; pointer-events: none; }
/* Kelola PIN tersimpan (tombol 🔑) */
.pinmgr-list { margin: 6px 0 10px; }
.pinmgr-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-top: 8px;
  background: #0e0e14; border: 1px solid #2a2a36; border-radius: 10px; }
.pinmgr-name { color: var(--fg); font-weight: 600; font-size: 15px; text-align: left; margin-right: 12px; }
.pinmgr-forget { background: #3a2330; color: #f7a8bf; flex: 0 0 auto; }
.pinmgr-no { background: #2a2a36; color: var(--fg); flex: 0 0 auto; }
.pinmgr-acts { display: flex; flex: 0 0 auto; }
.pinmgr-acts > * + * { margin-left: 8px; }
.pinmgr-row button { padding: 8px 14px; font-size: 14px; }
.pinmgr-forget:focus, .pinmgr-no:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.pin-err { min-height: 20px; color: #f87171; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.pin-remember { display: flex; align-items: center; justify-content: center; margin: 2px 0 14px; font-size: 15px; color: var(--fg); cursor: pointer; }
.pin-remember input { width: 20px; height: 20px; margin-right: 9px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.pin-actions { display: flex; justify-content: center; margin-top: 6px; }
.pin-actions > * + * { margin-left: 12px; }
.pin-actions.two { justify-content: stretch; }
.pin-actions.two button { flex: 1; }
.pin-box button { font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 10px; border: 0; cursor: pointer; }
.pin-cancel, .pin-no { background: #2a2a36; color: var(--fg); }
.pin-yes { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; }
.pin-box.checking .pin-inputs { opacity: .5; pointer-events: none; }
.pin-box.shake { animation: pinShake .42s; }
@keyframes pinShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
@media (max-width: 400px) { .pin-cell + .pin-cell { margin-left: 7px; } .pin-cell { width: 40px; height: 52px; font-size: 22px; } }
/* ===== Anjuran sertifikasi LG (self-checklist butir 6 & 7) =====
   Di TV: setiap objek yang bisa difokus/ditekan minimal 75x75 px, dan teks minimal
   20px. Hanya berlaku di viewport SEBESAR TV (>=1200px) — HP/tablet tak ikut membesar,
   jadi tata letak HP yang baru dirapikan (R74) tak tersentuh. Perbesarannya sebagian
   besar tak kasat mata: .icon-btn berlatar transparan, jadi yang tumbuh cuma area
   sentuh/fokusnya, bukan gambar tombolnya. */
@media (min-width: 1200px) {
  .logo { min-height: 75px; }
  .brand-ver { font-size: 20px; align-self: center; margin-left: 10px; }
  .nav a { display: inline-flex; align-items: center; justify-content: center;
           min-width: 75px; min-height: 75px; font-size: 20px; padding: 0 12px; }
  .icon-btn { min-width: 75px; min-height: 75px; font-size: 30px; }
  .icon-btn svg { width: 34px; height: 34px; }
  #btn-refresh { font-size: 34px; }
  .search-box { min-height: 75px; width: 320px; font-size: 20px; padding: 6px 18px; }
  .live { font-size: 20px; }
  .btn-watch { font-size: 20px; }
  .cat-inst { font-size: 20px; }
  #fs-hint { font-size: 20px; }
  /* Dua ini sudah >=20px di blok >=1600px; disebut lagi di sini supaya TV/proyektor
     1200-1599px ikut memenuhi. Nilainya sengaja disamakan, bukan diperkecil —
     blok ini berada SETELAH blok 1600/1900 di berkas, jadi ia yang menang di 1920. */
  #foot { font-size: 20px; }
  .lock { font-size: 22px; }
}
/* Modal PIN: dibesarkan hanya bila layar juga CUKUP TINGGI. Guard `min-height` ini
   wajib — di TV pendek (540-680px) R59 justru MERAPATKAN modal supaya tombol paling
   bawah tak kepotong; membesarkan di sana akan membatalkan perbaikan itu. */
@media (min-width: 1200px) and (min-height: 700px) {
  .pin-box { width: 92vw; max-width: 470px; }
  .pin-sub { font-size: 20px; }
  .pin-err { font-size: 20px; }
  .pin-keypad { width: 264px; }
  .pin-keypad .pin-key { width: 75px; height: 75px; font-size: 26px; }
  .pin-remember { min-height: 75px; font-size: 20px; }
  .pin-remember input { width: 26px; height: 26px; }
  .pin-box button { min-height: 75px; font-size: 20px; padding: 12px 26px; }
  .pinmgr-name { font-size: 20px; }
  .pinmgr-row button { font-size: 20px; padding: 12px 20px; }
}

/* TV layar pendek / overscan: rapatkan modal PIN supaya keypad + tombol OK TAK KEPOTONG di bawah.
   (Total default ~540px; di TV 540-680px + overscan, bagian bawah keluar layar.) */
@media (max-height: 680px) {
  .pin-box { max-height: 96vh; padding: 16px 22px 14px; }
  .pin-lock { font-size: 24px; }
  .pin-title { font-size: 17px; margin: 6px 0 3px; }
  .pin-sub { font-size: 12.5px; margin-bottom: 10px; line-height: 1.3; }
  .pin-inputs { margin-bottom: 8px; }
  .pin-cell { width: 40px; height: 46px; font-size: 24px; }
  .pin-cell + .pin-cell { margin-left: 7px; }
  .pin-keypad { width: 210px; margin: 4px auto 8px; }
  .pin-keypad .pin-key { width: 62px; height: 42px; margin: 3px; font-size: 19px; }
  .pin-err { min-height: 15px; font-size: 13px; margin-bottom: 4px; }
  .pin-remember { margin: 2px 0 8px; font-size: 13px; }
  .pin-remember input { width: 17px; height: 17px; }
  .pin-actions { margin-top: 4px; }
  .pin-box button { padding: 9px 15px; font-size: 14px; }
}

/* ===== Kalibrasi overscan di layar (tombol ⚙) — panel bawah, remote-friendly ===== */
.os-panel { position: fixed; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 10000;
  display: flex; align-items: center; background: rgba(10,10,15,.94); border: 1px solid #33313f;
  border-radius: 16px; padding: 12px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.os-panel > * + * { margin-left: 14px; }
.os-label { font-size: 16px; font-weight: 700; color: var(--fg); }
.os-btn { width: 54px; height: 54px; font-size: 30px; font-weight: 800; border: 0; border-radius: 12px; background: #2a2a36; color: #fff; cursor: pointer; line-height: 1; }
.os-val { font-size: 28px; font-weight: 800; color: var(--fg); min-width: 70px; text-align: center; }
.os-save { font-size: 16px; font-weight: 700; padding: 12px 22px; border: 0; border-radius: 12px; background: linear-gradient(180deg,var(--accent-2),var(--accent)); color: #fff; cursor: pointer; }
.os-btn:focus, .os-save:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.os-hint { font-size: 12px; color: var(--muted); }
.os-frame { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; pointer-events: none; border: 6px solid #22d3ee; box-sizing: border-box; }
/* HP portrait: panel di atas dirancang untuk TV — SATU baris panjang (label + − +
   nilai + + + Simpan + petunjuk). Lebarnya jauh melebihi layar HP, dan karena
   dipusatkan dgn `translateX(-50%)` ia terpotong di KEDUA tepi sehingga tombol
   Simpan tak terjangkau. Di HP: rentangkan selebar layar dan bungkus jadi 3 baris
   (label / kontrol / petunjuk). Blok ini WAJIB setelah aturan dasar .os-panel —
   media query di bagian atas berkas kalah urutan sumber dari aturan di sini. */
@media (max-width: 640px) {
  .os-panel { left: 10px; right: 10px; transform: none; bottom: 14px;
              flex-wrap: wrap; justify-content: center; padding: 10px 12px; }
  .os-panel > * + * { margin-left: 6px; }
  .os-panel > .os-label, .os-panel > .os-hint { width: 100%; margin-left: 0; text-align: center; }
  .os-panel > .os-label { margin-bottom: 8px; }
  .os-panel > .os-hint { margin-top: 10px; }
  .os-btn { width: 48px; height: 48px; font-size: 27px; }
  .os-val { font-size: 24px; min-width: 58px; }
  .os-save { padding: 12px 18px; }
}
/* TV: panel kalibrasi ikut anjuran LG (objek >=75x75, teks >=20px). Sama seperti blok
   HP di atas, letaknya WAJIB setelah aturan dasar .os-* — media query di bagian atas
   berkas kalah urutan sumber dan tak berefek sama sekali. */
@media (min-width: 1200px) {
  /* Petunjuknya naik ke 20px -> satu baris jadi terlalu panjang dan flexbox MENCIUTKAN
     tombolnya (75 -> 51px). Jadi: petunjuk pindah ke barisnya sendiri, tombol dikunci
     `flex: 0 0 auto` supaya ukurannya tak bisa dikorbankan lagi. */
  .os-panel { max-width: 92vw; flex-wrap: wrap; justify-content: center; }
  .os-panel > .os-hint { width: 100%; margin-left: 0; margin-top: 12px; text-align: center; }
  .os-label, .os-hint { font-size: 20px; }
  .os-label, .os-btn, .os-val, .os-save { flex: 0 0 auto; }
  .os-btn { width: 75px; height: 75px; font-size: 38px; }
  .os-save { min-height: 75px; font-size: 20px; padding: 0 26px; }
  .os-val { font-size: 30px; min-width: 90px; }
}

/* Banner hitung-mundur auto-resume (muncul hanya kalau ada channel tersimpan). */
.auto-resume { position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 9997;
  max-width: 92vw; padding: 13px 20px; border-radius: 16px; overflow: hidden;
  background: rgba(11, 16, 32, .96); border: 1px solid var(--accent);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55); animation: ar-in .3s ease; }
@keyframes ar-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.auto-resume .ar-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent2, #43a6ea); transition: width 1s linear; }
.auto-resume .ar-body { display: flex; align-items: center; color: #fff; font-size: 15px; line-height: 1.2; }
.auto-resume .ar-icon { color: var(--accent2, #43a6ea); margin-right: 9px; animation: ar-pulse 1.4s ease-in-out infinite; }
@keyframes ar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.auto-resume .ar-text { margin-right: 14px; }
.auto-resume .ar-name { color: var(--accent2, #7cc3f2); }
.auto-resume .ar-time { display: inline-block; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.auto-resume .ar-cancel { background: #1f2937; color: #cbd5e1; border: 0; border-radius: 9px; padding: 8px 15px; font-size: 14px; cursor: pointer; flex: 0 0 auto; }
.auto-resume .ar-cancel:hover { background: #334155; }
.auto-resume .ar-cancel:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .auto-resume, .auto-resume .ar-icon { animation: none; } }