/* BonusTV — UI mobile-first (grid cover 2 kolom + halaman detail + pemutar) */
:root{--bg:#0d0f14;--card:#171a22;--card2:#20242f;--fg:#e8eaf0;--mut:#8b93a6;
      --acc:#ff5c8a;--ok:#3ecf8e;--line:#232734}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,sans-serif;
     padding-bottom:calc(24px + env(safe-area-inset-bottom))}
a{color:var(--acc);text-decoration:none}
button{font:inherit;color:inherit}
.badge{background:#233046;border-radius:6px;padding:2px 6px}
.badge.burn{background:#4a2b34}

/* ---------- header beranda ---------- */
header{position:sticky;top:0;z-index:5;background:#0d0f14f2;backdrop-filter:blur(10px);
       padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--line)}
/* satu baris: brand | pencarian | bahasa. min-width:0 pada anak flex supaya
   input bisa menyusut (bukan melebarkan layar) di HP sempit. */
header .bar{display:flex;gap:8px;align-items:center}
.brand{font-weight:700;font-size:17px;color:var(--fg);flex:0 0 auto;white-space:nowrap}
#q,#lang{background:var(--card);color:var(--fg);border:1px solid #2b3040;border-radius:10px;
         padding:10px;font:inherit;font-size:14px;min-width:0}
#q{flex:1 1 auto;width:100%}
/* X bawaan input[type=search] (WebKit) disembunyikan: kita punya #clear sendiri */
#q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
#lang{flex:0 0 auto;max-width:32vw}
.ghost{background:var(--card);border:1px solid #2b3040;border-radius:10px;padding:10px 12px;
       flex:0 0 auto}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-top:8px;padding-bottom:2px;
      scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:var(--card);border:1px solid #2b3040;border-radius:999px;
             padding:7px 13px;white-space:nowrap;font-size:13px}
.tabs button.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.sub{color:var(--mut);font-size:12px;margin-top:6px}

/* layar sempit: sembunyikan label brand, sisakan logo singkatan "BTV" agar input
   dan select bahasa tetap lega (target sentuh tetap ≥40px). */
.brand::before{content:"BTV";display:none}
@media(max-width:430px){
  .brand{font-size:0}
  .brand::before{display:inline;font-size:16px}
  #q,#lang{padding:9px 10px}
  #lang{max-width:30vw}
  .ghost{padding:9px 11px}
}

/* ---------- grid cover 2 kolom ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:860px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.card{display:block;background:var(--card);border-radius:12px;overflow:hidden;color:var(--fg)}
.card:active{transform:scale(.98)}
.card .cover{position:relative;background:#222}
.card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.card .ep{position:absolute;right:6px;bottom:6px;background:#000000b3;border-radius:6px;
          padding:2px 6px;font-size:11px}
.card .t{font-size:13px;font-weight:600;padding:8px 8px 2px;display:-webkit-box;
         -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card .m{color:var(--mut);font-size:11px;padding:0 8px 8px;display:flex;gap:6px;flex-wrap:wrap}
.full{grid-column:1/-1;color:var(--mut);text-align:center;padding:18px}

/* ---------- status & tombol ---------- */
.status{padding:20px;color:var(--mut);text-align:center}
.status[hidden]{display:none}
.sp{display:inline-block;width:14px;height:14px;border:2px solid var(--mut);
    border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;
    vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.more{display:block;width:calc(100% - 24px);margin:0 12px 16px;background:var(--card2);
      border:0;border-radius:10px;padding:13px;font-size:14px}
.foot{color:var(--mut);font-size:12px;padding:16px 12px;text-align:center}

/* ---------- halaman detail ---------- */
main{padding:12px;overflow-x:hidden}
main>*{min-width:0}
.hero{display:flex;gap:12px;align-items:flex-start}
.hero img{width:112px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:#222;flex:0 0 auto}
/* flex child wajib min-width:0 agar judul panjang tidak melebarkan layar (overflow) */
.hero>div{flex:1 1 auto;min-width:0}
.hero h1{font-size:19px;margin:0 0 6px;line-height:1.25;
         overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.hero .meta{color:var(--mut);font-size:12px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.hero .genres{color:var(--mut);font-size:12px;margin-bottom:10px}
.epgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-top:10px}
.epgrid button{background:var(--card2);border:1px solid #2b3040;border-radius:9px;padding:11px 0;
               font-size:14px;min-height:44px}
.epgrid button.free{background:#1d3a2a;border-color:#26563c}
.epgrid button.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.sec{margin:16px 0 4px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}

/* ---------- pemutar fullscreen ---------- */
.player{position:fixed;inset:0;background:#000;display:none;z-index:50;flex-direction:column}
.player.on{display:flex}
.player video{flex:1;min-height:0;width:100%;background:#000}
.pbar{padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#11141b;
      display:flex;gap:8px;align-items:center;font-size:13px}
.pbar b{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pbar button{background:#252a38;border:0;border-radius:8px;padding:10px 12px}
.epsel{background:#252a38;border:0;border-radius:8px;padding:9px;max-width:112px;font-size:14px}
.captions{position:absolute;left:0;right:0;bottom:96px;text-align:center;pointer-events:none;
          font-size:17px;text-shadow:0 1px 3px #000,0 0 6px #000;padding:0 16px;line-height:1.3}
.captions span{background:#000000a8;padding:2px 8px;border-radius:6px;display:inline-block}