/* Vidov — halaman tonton & beranda video. Konsep "ruang tayang": malam violet, panggung untuk video, tanpa sidebar.
   Huruf: Bricolage Grotesque (judul) + Plus Jakarta Sans (teks). Tema gelap bawaan, terang otomatis / tombol tema. */
:root{
  --ink:#16112b;--deck:#201a3c;--deck2:#2b2450;--line:#352d60;--text:#f3efff;--mute:#a69dc9;
  --vi:#8b5cf6;--rose:#ec4899;--sun:#ffc24b;--on-vi:#fff;
  --grad:linear-gradient(120deg,#7c3aed,#ec4899);--stage:#0c0918;--glow:.45;
  --display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --r-lg:22px;--r-md:14px;--r-sm:9px;
  /* alias untuk komponen lama (transkrip, pemutar) */
  --bg:var(--ink);--chip:var(--deck);--chip2:var(--deck2);--txt:var(--text);--mut:var(--mute);--hover:rgba(255,255,255,.07)
}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--ink:#f5f2fc;--deck:#fff;--deck2:#ece6fa;--line:#ddd5f2;--text:#1b1533;--mute:#675e8c;--vi:#7c3aed;--stage:#1b1533;--glow:.35;--hover:rgba(27,21,51,.05)}}
:root[data-theme=light]{--ink:#f5f2fc;--deck:#fff;--deck2:#ece6fa;--line:#ddd5f2;--text:#1b1533;--mute:#675e8c;--vi:#7c3aed;--stage:#1b1533;--glow:.35;--hover:rgba(27,21,51,.05)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;width:100%}
body.tube{display:block;width:100%;min-width:0;float:none;margin:0;background:var(--ink);color:var(--text);font:15px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{fill:currentColor}
:focus-visible{outline:2px solid var(--vi);outline-offset:2px;border-radius:6px}
.vx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vx-skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--vi);color:#fff;padding:8px 14px;border-radius:8px}.vx-skip:focus{left:8px}
.muted,.mut{color:var(--mute)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- bar atas ---------- */
.vx-top{position:sticky;top:0;z-index:60;display:flex;width:100%;align-items:center;gap:14px;height:68px;padding:0 20px 0 14px;background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.vx-logo{display:flex;align-items:center;gap:9px;font:800 1.45rem/1 var(--display);letter-spacing:-.035em;flex:none}
.vx-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px 11px 11px 4px;background:var(--grad);color:#fff;flex:none;box-shadow:0 6px 18px -6px rgba(236,72,153,.75)}
.vx-mark svg{width:18px;height:18px}
.vx-nav{display:flex;gap:4px}
.vx-nav a{position:relative;padding:8px 12px;border-radius:10px;font-weight:600;color:var(--mute);white-space:nowrap}
.vx-nav a:hover{color:var(--text);background:var(--hover)}
.vx-nav a[aria-current]{color:var(--text)}
.vx-nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-14px;height:3px;border-radius:3px 3px 0 0;background:var(--grad)}
.vx-search{flex:1;max-width:620px;margin:0 auto;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:14px;background:var(--deck);border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.vx-search:focus-within{border-color:var(--vi);box-shadow:0 0 0 4px color-mix(in srgb,var(--vi) 22%,transparent)}
.vx-search svg{width:20px;height:20px;color:var(--mute);flex:none}
.vx-search input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;outline:none}
.vx-r{display:flex;align-items:center;gap:6px;flex:none}
.vx-ic{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--text);list-style:none}
.vx-ic:hover{background:var(--hover)}.vx-ic svg{width:22px;height:22px}.vx-ic::-webkit-details-marker{display:none}
.vx-ssearch{display:none}
.vx-create{display:flex;align-items:center;gap:6px;height:42px;padding:0 16px 0 12px;border-radius:12px;background:var(--text);color:var(--ink);font-weight:700;white-space:nowrap}
.vx-create svg{width:20px;height:20px}.vx-create:hover{opacity:.9}
.vx-signin{height:42px;display:flex;align-items:center;padding:0 18px;border-radius:12px;border:1px solid var(--line);font-weight:700}
.vx-signin:hover{background:var(--hover)}
.vx-av{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;cursor:pointer;list-style:none}.vx-av::-webkit-details-marker{display:none}
.vx-pop{position:relative}
.vx-menu{position:absolute;right:0;top:52px;min-width:230px;max-height:70vh;overflow:auto;background:var(--deck);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 24px 60px -12px rgba(0,0,0,.5);display:flex;flex-direction:column;z-index:70}
.vx-menu a{padding:9px 12px;border-radius:10px}.vx-menu a:hover,.vx-menu a[aria-current]{background:var(--hover)}
.vx-menu .vx-prem{color:var(--sun);font-weight:700}
.vx-mh{margin:0 0 6px;padding:6px 12px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column}.vx-mh small{color:var(--mute)}

/* ---------- kerangka ---------- */
.vx-main{max-width:1560px;margin:0 auto;padding:0 28px 56px;min-height:70vh}
.page-watch .vx-main{max-width:none;padding:0 0 56px}
.vx-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--deck);color:var(--text);font-weight:700;cursor:pointer;white-space:nowrap}
.vx-btn:hover{background:var(--deck2)}
.vx-btn svg{width:18px;height:18px}
.vx-btn.pri{background:var(--grad);border-color:transparent;color:#fff}.vx-btn.pri:hover{filter:brightness(1.08)}
.vx-tile{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px 7px 7px 2px;background:var(--c,#7c3aed);color:#fff;font:800 .72rem/1 var(--display)}
.vx-tile.lg{width:44px;height:44px;border-radius:13px 13px 13px 4px;font-size:1.1rem}
.vx-tile.xl{width:112px;height:112px;border-radius:30px 30px 30px 8px;font-size:2.8rem}
.vx-ok{display:inline-block;width:15px;height:15px;margin-left:5px;vertical-align:-2px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316112b' d='m9.5 16.2-4-4 1.4-1.4 2.6 2.6 6.6-6.6 1.4 1.4z'/%3E%3C/svg%3E") center/13px no-repeat}
.vx-by{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;min-width:0}
.vx-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--mute);font-size:.84rem;margin:0}
.vx-sh{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.vx-sh h1,.vx-sh h2{margin:0;font:700 clamp(1.3rem,2vw,1.65rem)/1.15 var(--display);letter-spacing:-.025em}
.vx-sh span{color:var(--mute)}
.vx-sh a{margin-left:auto;color:var(--mute);font-weight:600}.vx-sh a:hover{color:var(--text)}
.vx-empty{text-align:center;padding:72px 16px;color:var(--mute)}.vx-empty p{font-size:1.05rem;margin:0 0 18px}
.vx-mast{display:flex;justify-content:center;margin:0 0 24px;overflow:hidden}

/* ---------- kategori ---------- */
.vx-cats{display:flex;gap:8px;overflow-x:auto;padding:18px 0;margin:0 0 6px;scrollbar-width:none}
.vx-cats::-webkit-scrollbar{display:none}
.vx-cats a{flex:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 12px;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:.9rem;color:var(--mute);white-space:nowrap;transition:color .15s,background .15s}
.vx-cats a i{font-style:normal;font-size:1rem}
.vx-cats a:hover{color:var(--text);background:var(--hover)}
.vx-cats a[aria-current]{background:var(--text);border-color:var(--text);color:var(--ink)}

/* ---------- sorotan ---------- */
.vx-spot{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;margin:0 0 48px}
.vx-stage{position:relative;display:block;aspect-ratio:16/8;border-radius:var(--r-lg);overflow:hidden;background:#000;isolation:isolate}
.vx-stage img,.vx-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-stage video{opacity:0;transition:opacity .8s}.vx-stage.live video{opacity:1}
.vx-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,9,24,.92) 0%,rgba(12,9,24,.55) 38%,transparent 70%),linear-gradient(0deg,rgba(12,9,24,.6),transparent 40%)}
.vx-stx{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);z-index:1;max-width:min(560px,70%);display:flex;flex-direction:column;gap:12px;color:#fff}
.vx-stx b{font:800 clamp(1.6rem,3.4vw,3rem)/1.04 var(--display);letter-spacing:-.035em;text-wrap:balance}
.vx-stx .vx-meta{color:rgba(255,255,255,.75)}
.vx-play{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;height:46px;padding:0 22px 0 16px;border-radius:14px;background:#fff;color:#16112b;font-weight:800;transition:transform .15s}
.vx-play svg{width:22px;height:22px}
.vx-stage:hover .vx-play{transform:translateX(4px)}
.vx-rise{list-style:none;margin:0;padding:18px;border-radius:var(--r-lg);background:var(--deck);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;counter-reset:rk}
.vx-rh{font:700 1.15rem/1.2 var(--display);letter-spacing:-.02em;margin:0 0 10px}
.vx-rise li:not(.vx-rh){counter-increment:rk}
.vx-rise a{display:grid;grid-template-columns:30px 104px 1fr;gap:12px;align-items:center;padding:8px;margin:0 -8px;border-radius:12px}
.vx-rise a:hover{background:var(--hover)}
.vx-rise a::before{content:counter(rk);font:800 1.7rem/1 var(--display);color:var(--sun);text-align:center}
.vx-rimg{aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000}.vx-rimg img{width:100%;height:100%;object-fit:cover;display:block}
.vx-rise .vx-rtx{display:flex;flex-direction:column;min-width:0}
.vx-rise b{font-size:.9rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vx-rise small{color:var(--mute);font-size:.78rem}

/* ---------- grid kartu ---------- */
.vx-sec{margin:0 0 48px}
.vx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px 22px}
.tcard{display:flex;flex-direction:column;gap:12px;min-width:0}
.th{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th.vert img{object-fit:contain;background:radial-gradient(circle,#2b2450,#0c0918)}
.th em{position:absolute;right:8px;bottom:8px;z-index:2;padding:2px 7px;border-radius:7px;background:rgba(12,9,24,.82);color:#fff;font-style:normal;font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.th-frame{position:absolute;left:0;top:0;width:100%;background-repeat:no-repeat;opacity:0;transition:opacity .12s}
.th.scrubbing .th-frame{opacity:1}
.th-scrub{position:absolute;left:0;bottom:0;height:3px;z-index:3;background:var(--grad)}
.tcard .th{transition:transform .2s,box-shadow .2s}
.tcard:hover .th{transform:translateY(-3px);box-shadow:0 18px 34px -18px color-mix(in srgb,var(--vi) 80%,transparent)}
.mt{display:flex;flex-direction:column;gap:7px;min-width:0}
.mt b{font-size:1rem;line-height:1.35;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard:hover .mt b{color:color-mix(in srgb,var(--text) 80%,var(--vi))}

/* ---------- shorts ---------- */
.vx-shorts{padding:26px;margin-left:-26px;margin-right:-26px;border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--vi) 16%,var(--ink)),var(--ink) 70%)}
.vx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,200px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.vx-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:26px 16px}
.scard{position:relative;display:block;min-width:0;scroll-snap-align:start;border-radius:18px;overflow:hidden}
.scard .th{aspect-ratio:9/16;border-radius:18px}
.scard-tx{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;background:linear-gradient(transparent,rgba(12,9,24,.9));color:#fff;display:flex;flex-direction:column;gap:2px}
.scard b{font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard small{opacity:.75;font-size:.78rem}
.scard:hover .th img{transform:scale(1.04)}.scard .th img{transition:transform .3s}

/* ---------- iklan, ajakan kreator, hasil cari ---------- */
.vx-infeed{position:relative;display:flex;justify-content:center;margin:0 0 48px;padding:26px 12px 14px;border-radius:var(--r-lg);border:1px dashed var(--line);overflow:hidden}
.vx-infeed>small{position:absolute;top:7px;left:14px;font-size:.72rem;color:var(--mute)}
.vx-maker{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:30px clamp(20px,4vw,40px);border-radius:var(--r-lg);background:var(--deck);border:1px solid var(--line)}
.vx-maker div{flex:1;min-width:240px}
.vx-maker h2{margin:0 0 6px;font:800 1.6rem/1.1 var(--display);letter-spacing:-.03em}
.vx-maker p{margin:0;color:var(--mute);max-width:60ch}
.vx-results{display:flex;flex-direction:column;gap:22px;max-width:1080px}
.vx-res{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:20px}
.vx-rtx{display:flex;flex-direction:column;gap:8px;min-width:0}
.vx-res .vx-rtx b{font:700 1.2rem/1.25 var(--display);letter-spacing:-.02em}
.vx-ds{color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vx-subs{display:flex;gap:18px;overflow-x:auto;padding:4px 0 22px;scrollbar-width:none}
.vx-subs a{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;flex:none;text-align:center;font-size:.8rem;font-weight:600}
.vx-subs a span:last-child{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- tab ---------- */
.vx-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 22px;overflow-x:auto;scrollbar-width:none}
.vx-tabs a,.vx-tabs button{position:relative;display:flex;align-items:center;gap:8px;padding:12px 14px;border:0;background:none;font-weight:700;color:var(--mute);cursor:pointer;white-space:nowrap}
.vx-tabs small{padding:1px 7px;border-radius:7px;background:var(--deck2);font-size:.74rem;color:var(--text)}
.vx-tabs a:hover,.vx-tabs button:hover{color:var(--text)}
.vx-tabs [aria-current],.vx-tabs [aria-selected=true]{color:var(--text)}
.vx-tabs [aria-current]::after,.vx-tabs [aria-selected=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--grad)}

/* ---------- halaman tonton ---------- */
.player{position:relative;width:100%;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player .vidov-os.vos-pre:not(.vos-run){display:none}
.watch{display:grid;width:100%;grid-template-columns:minmax(0,1fr) 400px;gap:32px;max-width:1760px;margin:0 auto;padding:0 28px}
/* pemutar tetap di posisinya saat halaman digulir; judul, deskripsi & komentar bergulir di bawahnya */
.w-stage{position:sticky;top:68px;z-index:30;padding:16px 0 14px;background:var(--ink);isolation:isolate}
.w-stage::before{content:"";position:absolute;inset:30px 8% 20px;z-index:-1;background:var(--poster) center/cover;filter:blur(60px) saturate(1.5);opacity:var(--glow)}
.w-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(var(--ink),transparent);pointer-events:none}
.w-stagein{width:100%;max-width:max(560px,calc((100vh - 68px - 260px) * 16 / 9));margin:0 auto}
.player.vert{aspect-ratio:9/16;height:max(420px,calc(100vh - 68px - 230px));width:auto;margin:0 auto}
.w-stage.vert .w-stagein{max-width:none;display:flex;justify-content:center}
body.vp-theater .watch{grid-template-columns:minmax(0,1fr)}
body.vp-theater .w-stagein{max-width:max(560px,calc((100vh - 68px - 170px) * 16 / 9))}
/* panel transkrip di kanan pemutar */
.w-side{min-width:0;padding-top:16px}
body.w-tr-open .w-side{position:sticky;top:68px;align-self:start;height:calc(100vh - 68px);overflow-y:auto;scrollbar-width:thin;padding-bottom:16px}
body.vp-theater.w-tr-open .w-side{position:static;height:auto;overflow:visible}
.w-tr[hidden]{display:none!important}
.w-side .w-tr{display:flex;flex-direction:column;height:calc(100vh - 100px);margin:0 0 20px;padding:14px 8px 10px 16px;border-radius:20px;background:var(--deck);border:1px solid var(--line)}
.w-side .w-trb{flex:1;max-height:none;padding-right:8px}
.w-trtop{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.w-trtop h2{flex:1;display:flex;align-items:baseline;gap:10px;margin:0;font:700 1.15rem/1.2 var(--display);letter-spacing:-.02em}
.w-trtop small{font:600 .78rem/1 "Plus Jakarta Sans",sans-serif;color:var(--mute)}
.w-main>.w-tr{margin:0 0 20px}
.w-main>.w-tr .w-trb{max-height:60vh}
.w-tabs [aria-controls=transcript][aria-selected=true]{color:var(--text)}
.w-pending{background:color-mix(in srgb,var(--sun) 18%,var(--deck));border:1px solid color-mix(in srgb,var(--sun) 45%,transparent);border-radius:12px;padding:10px 14px;margin:0 0 16px;font-weight:600}
.w-tags{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 8px}
.w-tags a{color:var(--vi);font-weight:700;font-size:.88rem}.w-tags a:hover{text-decoration:underline}
.w-title{font:800 clamp(1.45rem,2.4vw,2.1rem)/1.12 var(--display);letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.w-stat{margin-bottom:20px}
.w-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0 22px}
.w-sp{flex:1}
.w-ch{display:flex;gap:12px;align-items:center;min-width:0}.w-ch>span:last-child{display:flex;flex-direction:column;min-width:0}
.w-ch b{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.w-ch small{color:var(--mute);font-size:.82rem}
.sub-btn{height:40px;padding:0 20px;border:0;border-radius:12px;background:var(--text);color:var(--ink);font-weight:800;cursor:pointer}
.sub-btn:hover{opacity:.9}.sub-btn.on{background:var(--deck2);color:var(--text)}
.w-likes{display:flex;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--deck)}
.w-likes button{display:flex;align-items:center;gap:7px;height:38px;border:0;background:none;padding:0 14px;cursor:pointer;font-weight:700}
.w-likes svg{width:18px;height:18px}
.w-likes button:hover{background:var(--deck2)}.w-likes button+button{border-left:1px solid var(--line)}
.w-likes button.on{color:var(--rose)}
.w-pane{min-height:120px}
.w-desc{font-size:.98rem;line-height:1.7;max-width:75ch}
.w-desc p{white-space:pre-wrap;margin:0}
.w-desc.clamp{max-height:170px;overflow:hidden;cursor:pointer;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.w-nodesc{color:var(--mute)}
.w-made{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 0;padding:18px 20px;border-radius:18px;background:var(--deck);border:1px solid var(--line)}
.w-made div{flex:1;min-width:200px}.w-made b{font-size:.98rem}.w-made p{margin:2px 0 0;color:var(--mute);font-size:.88rem}
.w-report{margin:16px 0 0;font-size:.84rem}.w-report a{color:var(--mute)}.w-report a:hover{color:var(--text);text-decoration:underline}
.ad-inline{display:flex;justify-content:center;margin:28px 0 0;overflow:hidden}
.cm-form{display:flex;gap:12px;align-items:flex-start;margin-bottom:26px}
.cm-form textarea{flex:1;min-height:46px;background:var(--deck);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font:inherit;resize:vertical;outline:none}
.cm-form textarea:focus{border-color:var(--vi)}
.w-login{display:flex;align-items:center;gap:10px;color:var(--mute)}
.cm{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.cm .vx-tile{width:38px;height:38px;border-radius:11px 11px 11px 3px;font-size:.95rem}
.cm>div{min-width:0;flex:1}
.cm b{font-size:.9rem;margin-right:10px}.cm small{color:var(--mute);font-size:.78rem}.cm p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-del{border:0;background:none;color:var(--mute);cursor:pointer;font-size:.78rem;padding:4px 0}.cm-del:hover{color:var(--rose)}
.w-side .vx-sh{margin-bottom:12px}
.w-side .vx-sh h2{font-size:1.25rem}
.w-ad{display:flex;justify-content:center;margin-bottom:24px;overflow:hidden}
.w-queue{list-style:none;margin:0;padding:0;counter-reset:q}
.w-queue li{counter-increment:q}
.vrow{display:grid;grid-template-columns:22px 150px 1fr;gap:10px;align-items:center;padding:8px;margin:0 -8px;border-radius:14px}
.vrow::before{content:counter(q);color:var(--mute);font:700 .85rem/1 var(--display);text-align:center}
.vrow:hover{background:var(--hover)}
.vrow .th{border-radius:10px}
.vrow .tx{display:flex;flex-direction:column;min-width:0}
.vrow .tx b{font-size:.9rem;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vrow .tx small{color:var(--mute);font-size:.78rem}
.w-queue li:first-child .vrow{background:var(--deck);outline:1px solid var(--line)}
.w-queue li:first-child .vrow::before{color:var(--sun)}

.w-full{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:10px 14px 10px 10px;border-radius:16px;background:var(--deck);border:1px solid var(--line)}
.w-full:hover{background:var(--deck2)}
.w-fth{position:relative;flex:none;width:132px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.w-fth img{width:100%;height:100%;object-fit:cover;display:block}
.w-fth em{position:absolute;right:5px;bottom:5px;padding:1px 5px;border-radius:5px;background:rgba(12,9,24,.82);color:#fff;font-style:normal;font-size:.7rem;font-weight:700}
.w-full>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.w-full small{color:var(--mute);font-size:.8rem}.w-full b{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-full svg{width:24px;height:24px;flex:none;color:var(--vi)}
.w-slink{color:var(--vi);font-weight:700}.w-slink:hover{text-decoration:underline}
/* ---------- channel ---------- */
.ch-wrap{max-width:1360px;margin:0 auto}
.ch-head{position:relative;display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:24px 0 18px;padding:34px clamp(20px,4vw,40px);border-radius:28px;overflow:hidden;isolation:isolate;background:var(--deck);border:1px solid var(--line)}
.ch-head::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--c) 55%,transparent),transparent 65%)}
.ch-tx{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.ch-tx h1{margin:0;font:800 clamp(1.8rem,3.4vw,2.8rem)/1.05 var(--display);letter-spacing:-.035em}
.ch-about{margin:4px 0 0;color:var(--mute);max-width:70ch;white-space:pre-wrap}

/* ---------- footer ringkas (HP / tablet) ---------- */
.vx-foot{display:none;border-top:1px solid var(--line);padding:24px 16px 96px;color:var(--mute);font-size:.84rem}
.vx-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}.vx-foot a:hover{color:var(--text)}.vx-foot p{margin:12px 0 0;font-size:.78rem}
.vx-bottom{display:none}

/* ---------- sidebar kiri ---------- */
body.tube{--sw:248px}
body.tube.vx-rail,body.tube.page-watch{--sw:84px}
.vx-side{position:fixed;top:68px;bottom:0;left:0;z-index:55;width:var(--sw);overflow-y:auto;overflow-x:hidden;padding:14px 12px 20px;background:var(--ink);border-right:1px solid color-mix(in srgb,var(--line) 60%,transparent);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.vx-sg{display:flex;flex-direction:column;gap:2px;padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.vx-sg:last-of-type{border-bottom:0}
.vx-sgh{margin:4px 12px 8px;font:700 .95rem/1.2 var(--display);letter-spacing:-.01em}
.vx-sgt{margin:2px 12px 6px;color:var(--mute);font-size:.8rem}
.vx-sg a{position:relative;display:flex;align-items:center;gap:16px;height:42px;padding:0 12px;border-radius:12px;font-weight:600;font-size:.92rem;color:color-mix(in srgb,var(--text) 85%,var(--mute));white-space:nowrap}
.vx-sg a>svg{width:22px;height:22px;flex:none}
.vx-sg a>i{width:22px;text-align:center;font-style:normal;flex:none}
.vx-sg a>span:last-child{overflow:hidden;text-overflow:ellipsis}
.vx-sg a:hover{background:var(--hover);color:var(--text)}
.vx-sg a[aria-current]{background:color-mix(in srgb,var(--vi) 18%,transparent);color:var(--text)}
.vx-sg a[aria-current]::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--grad)}
.vx-sg a[aria-current]>svg{color:var(--vi)}
.vx-prem-card{display:flex;flex-direction:column;gap:4px;margin:4px 4px 16px;padding:14px;border-radius:16px;background:linear-gradient(140deg,color-mix(in srgb,var(--vi) 32%,var(--deck)),color-mix(in srgb,var(--rose) 22%,var(--deck)));border:1px solid var(--line)}
.vx-prem-card b{font:800 1rem/1.2 var(--display)}.vx-prem-card small{color:var(--mute);font-size:.78rem;line-height:1.4}
.vx-prem-card:hover{filter:brightness(1.08)}
.vx-sfoot{display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 12px;color:var(--mute);font-size:.76rem}
.vx-sfoot a:hover{color:var(--text)}.vx-sfoot p{width:100%;margin:8px 0 0}
.vx-scrim{display:none}
/* mode ramping: ikon + label kecil */
body.vx-rail .vx-side,body.page-watch:not(.vx-open) .vx-side{padding:10px 6px;scrollbar-width:none}
body.vx-rail:not(.vx-open) .vx-full,body.page-watch:not(.vx-open) .vx-full,body.vx-rail:not(.vx-open) .vx-sgh,body.page-watch:not(.vx-open) .vx-sgh,body.vx-rail:not(.vx-open) .vx-sgt,body.page-watch:not(.vx-open) .vx-sgt{display:none}
body.vx-rail:not(.vx-open) .vx-sg,body.page-watch:not(.vx-open) .vx-sg{border:0;margin:0;padding:0 0 6px}
body.vx-rail:not(.vx-open) .vx-sg a,body.page-watch:not(.vx-open) .vx-sg a{flex-direction:column;justify-content:center;gap:5px;height:66px;padding:0 2px;font-size:.66rem;text-align:center}
body.vx-rail:not(.vx-open) .vx-sg a>span:last-child,body.page-watch:not(.vx-open) .vx-sg a>span:last-child{max-width:100%}
body.vx-rail:not(.vx-open) .vx-sg a[aria-current]::before,body.page-watch:not(.vx-open) .vx-sg a[aria-current]::before{left:-6px}
/* laci terbuka (halaman tonton / layar sedang) */
body.vx-open .vx-side{width:268px;padding:14px 12px 20px;box-shadow:24px 0 60px -20px rgba(0,0,0,.55);z-index:58}
body.vx-open .vx-scrim{display:block;position:fixed;inset:68px 0 0 0;z-index:56;background:rgba(8,6,18,.45)}
.vx-main,.vx-foot{margin-left:var(--sw);transition:margin-left .15s}
.vx-side{transition:width .15s}

/* ---------- pemutar mini saat halaman digulir ---------- */

/* ---------- responsif ---------- */
@media (max-width:1240px){.vx-spot{grid-template-columns:1fr}.vx-rise{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.vx-rh{grid-column:1/-1}.watch{grid-template-columns:minmax(0,1fr) 340px;gap:24px}}
@media (max-width:1099px){
  body.tube,body.tube.vx-rail,body.tube.page-watch{--sw:0px}
  .vx-side,body.vx-rail .vx-side,body.page-watch .vx-side{width:268px;transform:translateX(-105%);transition:transform .2s;z-index:58;padding:14px 12px 90px}
  body.vx-open .vx-side{transform:none}
  body.vx-open .vx-scrim{z-index:57}
  body.vx-open .vx-sg{border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);margin:0 0 12px;padding:0 0 12px}
  body.vx-open .vx-sg a{flex-direction:row;justify-content:flex-start;height:42px;padding:0 12px;font-size:.92rem;gap:16px}
  body.vx-open .vx-full,body.vx-open .vx-sgh,body.vx-open .vx-sgt{display:revert}
  .vx-foot{display:block}
  .watch{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .vx-top{height:58px;padding:0 12px 0 6px;gap:6px}
  .vx-side{top:58px}body.vx-open .vx-scrim{inset:58px 0 0 0}
  .vx-logo{font-size:1.25rem}.vx-mark{width:30px;height:30px}
  .vx-search{display:none}
  body.vx-searching .vx-search{display:flex;position:absolute;left:8px;right:8px;top:7px;margin:0;max-width:none;z-index:80}
  .vx-ssearch{display:grid}.vx-r{margin-left:auto;gap:2px}
  .vx-create span{display:none}.vx-create{width:42px;padding:0;justify-content:center}
  .vx-lang{display:none}
  .vx-signin{padding:0 12px}
  .vx-main{padding:0 14px 90px}
  .vx-cats{margin:0 -14px 4px;padding:14px}
  .vx-stage{aspect-ratio:4/5;border-radius:18px}
  .vx-stage::after{background:linear-gradient(0deg,rgba(12,9,24,.95) 0%,rgba(12,9,24,.4) 55%,transparent 80%)}
  .vx-stx{max-width:none;right:20px}
  .vx-rise{padding:14px;display:flex}
  .vx-grid{grid-template-columns:1fr;gap:26px}
  .vx-shorts{margin-left:-14px;margin-right:-14px;padding:20px 14px;border-radius:0}
  .vx-res{grid-template-columns:1fr;gap:10px}
  .w-stage{top:58px;padding:0;margin:0 -14px}.w-stage::before{display:none}.player{border-radius:0}.player.vert{height:62vh;min-height:0}
  .w-stagein{max-width:none}
  .watch{padding:0 14px}
  .w-main>.w-stage+*{margin-top:16px}
  .w-bar{gap:10px}.w-sp{display:none}
  .vrow{grid-template-columns:18px 132px 1fr}
  .ch-head{padding:24px 18px;gap:18px;margin-top:14px;border-radius:22px}.vx-tile.xl{width:76px;height:76px;font-size:2rem;border-radius:22px 22px 22px 6px}
  .vx-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;z-index:60;background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .vx-bottom a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.66rem;font-weight:600;color:var(--mute)}
  .vx-bottom svg{width:23px;height:23px}
  .vx-bottom a[aria-current]{color:var(--text)}
  .vx-bottom .vx-plus svg{width:44px;height:34px;padding:6px 10px;border-radius:12px;background:var(--grad);color:#fff}
}
/* ===== Vidov Player ===== */
.vp{--vpa:#a855f7;--vpg:linear-gradient(90deg,#7c3aed,#ec4899);user-select:none;-webkit-user-select:none;outline:none;color:#fff;font-family:"Plus Jakarta Sans",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.vp:focus-visible{box-shadow:0 0 0 2px var(--vpa)}
.vp video{cursor:pointer}
.vp svg{width:24px;height:24px;fill:currentColor;display:block}
.vp [hidden]{display:none!important}
.vp-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.25) 90px,transparent 170px);opacity:0;transition:opacity .25s}
.vp:not(.vp-started) .vp-shade{opacity:0}
.vp.vp-started.vp-ui .vp-shade,.vp.vp-started.vp-paused .vp-shade{opacity:1}
/* tombol besar */
.vp-big{position:absolute;left:50%;top:50%;z-index:6;width:78px;height:78px;margin:-39px 0 0 -39px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;
  background:var(--vpg);box-shadow:0 10px 34px rgba(124,58,237,.55),0 0 0 8px rgba(255,255,255,.12);transition:transform .18s,box-shadow .18s}
.vp-big svg{width:34px;height:34px;margin-left:4px}
.vp-big:hover{transform:scale(1.07);box-shadow:0 12px 40px rgba(236,72,153,.6),0 0 0 10px rgba(255,255,255,.16)}
.vp.vp-started .vp-big{display:none}
.vp-touch.vp-started.vp-ui:not(.vp-inad):not(.vp-wait) .vp-big{display:flex;width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(0,0,0,.45);box-shadow:none}
.vp-touch.vp-started.vp-ui .vp-big svg{width:30px;height:30px;margin:0}
.vp-touch.vp-started.vp-paused .vp-big svg{margin-left:3px}
/* lanjutkan (sebelum mulai) */
.vp-chip{position:absolute;left:14px;bottom:18px;z-index:5;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;font-size:.82rem;font-weight:600;pointer-events:none}
.vp-pfill{position:absolute;left:0;bottom:0;height:4px;z-index:5;background:var(--vpg);pointer-events:none}
/* spinner */
.vp-spin{position:absolute;left:50%;top:50%;z-index:7;width:56px;height:56px;margin:-28px;display:none;pointer-events:none}
.vp-spin i{display:block;width:100%;height:100%;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:#ec4899;border-right-color:#a855f7;animation:vpr .8s linear infinite}
.vp.vp-wait.vp-started .vp-spin{display:block}
@keyframes vpr{to{transform:rotate(360deg)}}
/* kilasan ikon */
.vp-flash{position:absolute;left:50%;top:50%;z-index:6;min-width:64px;height:64px;padding:0 18px;transform:translate(-50%,-50%);border-radius:999px;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none}
.vp-flash svg{width:30px;height:30px}.vp-flash b{font-size:1rem}
.vp-flash.on{animation:vpf .6s ease-out}
@keyframes vpf{0%{opacity:.95;transform:translate(-50%,-50%) scale(.85)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
/* ketuk ganda */
.vp-tap{position:absolute;top:0;bottom:0;width:38%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;pointer-events:none;background:rgba(255,255,255,.1)}
.vp-tap b{font-size:.85rem}.vp-tap svg{width:30px;height:30px}
.vp-tap-l{left:0;border-radius:0 50% 50% 0/0 50% 50% 0}.vp-tap-r{right:0;border-radius:50% 0 0 50%/50% 0 0 50%}
.vp-tap.on{animation:vpt .65s ease-out}
@keyframes vpt{0%{opacity:1}100%{opacity:0}}
/* subtitle */
.vp-cap{position:absolute;left:4%;right:4%;bottom:4%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;text-align:center;transition:bottom .2s}
.vp-cap span{background:rgba(8,8,8,.78);color:#fff;font-size:clamp(14px,2vw,24px);font-weight:600;line-height:1.38;padding:2px 10px;border-radius:6px;white-space:pre-line;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vp[data-cc=s] .vp-cap span{font-size:clamp(12px,1.5vw,18px)}.vp[data-cc=l] .vp-cap span{font-size:clamp(17px,2.7vw,34px)}
.vp-cap:empty{display:none}
.vp.vp-ui .vp-cap,.vp.vp-paused.vp-started .vp-cap{bottom:76px}
/* kontrol */
.vp-ctl{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 14px 4px;opacity:0;transition:opacity .25s;pointer-events:none}
.vp.vp-started.vp-ui .vp-ctl,.vp.vp-started.vp-paused .vp-ctl,.vp.vp-drag .vp-ctl{opacity:1;pointer-events:auto}
.vp:not(.vp-started) .vp-ctl,.vp.vp-inad .vp-ctl{display:none}
.vp-bar{position:relative;height:20px;cursor:pointer;touch-action:none}
.vp-rail{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);transition:transform .12s;overflow:hidden}
.vp-bar:hover .vp-rail,.vp-drag .vp-rail{transform:scaleY(1.6)}
.vp-rail>i{position:absolute;left:0;top:0;bottom:0;width:0}
.vp-buf{background:rgba(255,255,255,.35)}.vp-hov{background:rgba(255,255,255,.3)}.vp-fill{background:var(--vpg)}
.vp-marks i{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:#facc15}
.vp-knob{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(168,85,247,.55),0 2px 6px rgba(0,0,0,.5);transform:scale(0);transition:transform .12s;pointer-events:none}
.vp-bar:hover .vp-knob,.vp-drag .vp-knob,.vp-touch .vp-knob{transform:scale(1)}
.vp-tip{position:absolute;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.vp-thumb{border-radius:8px;border:2px solid rgba(255,255,255,.9);background-color:#000;background-repeat:no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.55)}
.vp-tip span{background:rgba(0,0,0,.78);padding:3px 8px;border-radius:6px;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.vp-row{display:flex;align-items:center;gap:2px;height:46px}
.vp-b{position:relative;width:42px;height:42px;flex:none;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.92;transition:background .15s,opacity .15s}
.vp-b:hover{opacity:1;background:rgba(255,255,255,.13)}
.vp-b svg{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.vp-pp svg{width:30px;height:30px}
.vp-b[data-tip]:not(:active):hover::after{content:attr(data-tip);position:absolute;bottom:52px;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(20,20,20,.92);padding:5px 9px;border-radius:6px;font-size:.75rem;font-weight:600;pointer-events:none}
.vp-row>.vp-b:last-child[data-tip]:hover::after{left:auto;right:0;transform:none}
.vp-pp[data-tip]:hover::after{left:0;transform:none}
.vp-cc{position:relative}.vp-cc::before{content:"";position:absolute;left:11px;right:11px;bottom:6px;height:3px;border-radius:2px;background:var(--vpg);transform:scaleX(0);transition:transform .15s}.vp-cc.on::before{transform:scaleX(1)}
.vp-set svg{transition:transform .3s}.vp-set.on svg{transform:rotate(60deg)}
.vp-th.on{color:#f0abfc}
.vp-vol{width:0;height:42px;display:flex;align-items:center;overflow:hidden;transition:width .2s;cursor:pointer;touch-action:none}
.vp-mute:hover+.vp-vol,.vp-vol:hover,.vp-vol:active{width:76px}
.vp-vtrack{position:relative;width:64px;height:4px;margin:0 6px;border-radius:4px;background:rgba(255,255,255,.3)}
.vp-vtrack i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#fff}
.vp-vtrack b{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff}
.vp-time{font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 8px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.vp-sep,.vp-dur{opacity:.75}
.vp-sp{flex:1}
/* menu setelan & klik kanan */
.vp-menu,.vp-ctx{position:absolute;z-index:9;background:rgba(24,24,27,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 0;box-shadow:0 16px 48px rgba(0,0,0,.5);font-size:.88rem}
.vp-menu{right:14px;bottom:62px;width:270px;max-height:calc(100% - 80px);overflow-y:auto;scrollbar-width:thin}
.vp-mi,.vp-mh,.vp-ci{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:#fff;padding:10px 16px;cursor:pointer;text-align:left;font:inherit}
.vp-mi:hover,.vp-mh:hover,.vp-ci:hover{background:rgba(255,255,255,.1)}
.vp-mi span{flex:1}.vp-mi em{font-style:normal;opacity:.75}
.vp-mi.vp-has em::after{content:" ›";font-size:1.1em}
.vp-mi.vp-chk span::before{content:"✓";display:inline-block;width:22px;color:#f0abfc;font-weight:800}
.vp-mi:not(.vp-chk) span::before{content:"";display:none}
.vp-menu .vp-mh~.vp-mi:not(.vp-chk) span::before{content:"";display:inline-block;width:22px}
.vp-mh{font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px;padding-left:8px}.vp-mh svg{width:22px;height:22px}
.vp-sw{position:relative;width:36px;height:20px;border-radius:999px;background:rgba(255,255,255,.3);flex:none;transition:background .2s}
.vp-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.vp-sw.on{background:var(--vpg)}.vp-sw.on::after{transform:translateX(16px)}
.vp-ctx{min-width:240px;padding:6px 0}
.vp-ci svg{width:20px;height:20px;opacity:.85}.vp-ci.on{color:#f0abfc}
.vp-brand{padding:8px 16px 4px;margin-top:4px;border-top:1px solid rgba(255,255,255,.1);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--vpg);-webkit-background-clip:text;background-clip:text;color:transparent}
/* chip lanjut tonton, bunyikan, error */
.vp-resume{position:absolute;left:14px;bottom:72px;z-index:6;display:flex;align-items:center;gap:12px;background:rgba(24,24,27,.88);backdrop-filter:blur(10px);border-radius:12px;padding:8px 8px 8px 14px;font-size:.86rem;font-weight:600;animation:vpin .3s ease-out}
.vp-resume button{border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;padding:7px 12px;cursor:pointer;font:inherit;font-weight:700}.vp-resume button:hover{background:rgba(255,255,255,.24)}
.vp-unmute{position:absolute;left:14px;top:14px;z-index:7;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;background:#fff;color:#111;padding:8px 14px 8px 10px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.vp-unmute svg{width:20px;height:20px}
.vp-err{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);padding:20px;text-align:center;font-weight:600}
@keyframes vpin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* iklan in-stream */
.vp-ad{position:absolute;inset:0;z-index:8;background:#000}
.vp-ad video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:pointer}
.vp-adv{position:absolute;left:14px;bottom:62px;z-index:2;display:flex;align-items:center;gap:6px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:#111;padding:8px 14px 8px 10px;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.vp-adv svg{width:18px;height:18px}
.vp-adb{position:absolute;left:0;right:0;bottom:6px;z-index:2;display:flex;align-items:center;gap:2px;padding:0 0 0 10px}
.vp-adl{background:rgba(0,0,0,.6);border-radius:6px;padding:4px 9px;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;margin-left:4px}
.vp-skip{display:flex;align-items:center;gap:6px;border:0;border-left:3px solid #facc15;background:rgba(0,0,0,.72);color:#fff;padding:12px 16px 12px 18px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;border-radius:8px 0 0 8px;min-width:130px;justify-content:center}
.vp-skip:not(:disabled):hover{background:rgba(30,30,30,.9)}.vp-skip:disabled{cursor:default;opacity:.85;border-left-color:rgba(255,255,255,.4)}
.vp-skip svg{width:22px;height:22px}.vp-skip b{font-size:1rem}
.vp-adbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2);z-index:2}.vp-adbar i{display:block;height:100%;width:0;background:#facc15}
/* layar akhir */
.vp-end{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);animation:vpin .3s}
.vp-next{display:grid;grid-template-columns:auto;justify-items:center;gap:6px;color:#fff;text-decoration:none;max-width:min(360px,80%);text-align:center}
.vp-up{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.vp-nth{position:relative;width:min(320px,60vw);aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#222;display:flex;align-items:center;justify-content:center}
.vp-nth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-nth>svg:last-child{position:relative;width:44px;height:44px;padding:10px;border-radius:50%;background:rgba(0,0,0,.55)}
.vp-ring{position:absolute;width:64px;height:64px;left:50%;top:50%;margin:-32px;transform:rotate(-90deg);z-index:1}
.vp-ring circle{fill:none;stroke:#ec4899;stroke-width:3;stroke-dasharray:126;stroke-dashoffset:126}
.vp-ring.go circle{animation:vpc linear forwards;animation-duration:inherit}.vp-ring.off{display:none}
@keyframes vpc{to{stroke-dashoffset:0}}
.vp-next b{font-size:1rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vp-next em{font-style:normal;font-size:.82rem;opacity:.75}
.vp-next:hover .vp-nth>svg:last-child{background:var(--vpg)}
.vp-eact{display:flex;gap:10px}
.vp-rep,.vp-cancel{display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;color:#fff;background:rgba(255,255,255,.14)}
.vp-rep:hover,.vp-cancel:hover{background:rgba(255,255,255,.24)}.vp-rep svg{width:20px;height:20px}
.vp-end>.vp-rep{padding:14px 22px;font-size:1rem}
/* layar penuh, teater, HP */
.vp.vp-fsm,.vp:fullscreen{border-radius:0;aspect-ratio:auto;width:100%;height:100%;margin:0}
.vp-fsm .vp-row{height:56px}.vp-fsm .vp-b{width:50px;height:50px}.vp-fsm .vp-b svg{width:30px;height:30px}.vp-fsm .vp-ctl{padding:0 24px 10px}
.vp-tslot{margin:0 -24px;background:#000}
@media (max-width:999px){.vp-th{display:none!important}}
@media (max-width:760px){
  .vp-vol,.vp-pip{display:none!important}
  .vp-row{height:40px}.vp-b{width:38px;height:38px}.vp-b svg{width:23px;height:23px}
  .vp-ctl{padding:0 6px 2px}.vp-time{font-size:.78rem}
  .vp-menu{right:6px;left:6px;width:auto;bottom:50px}
  .vp-b[data-tip]:hover::after{display:none}
  .vp-big{width:66px;height:66px;margin:-33px 0 0 -33px}
  .vp-skip{min-width:0;padding:10px 12px;font-size:.84rem}
  .vp.vp-ui .vp-cap{bottom:58px}
  .vp-nth{width:min(220px,46vw)}.vp-next b{font-size:.88rem}.vp-end{gap:10px}
}
/* transkrip */
.w-tr{}
.w-trh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.w-trh h2{font-size:1rem;margin:0}
.w-trq{flex:1;max-width:360px;height:40px;background:var(--deck);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:.9rem;outline:none}
.w-trq:focus{border-color:#a855f7}
.w-trb{max-height:62vh;overflow-y:auto;font-size:.98rem;line-height:1.85;max-width:80ch;scrollbar-width:thin;position:relative}
.w-trb.clamp{max-height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.w-trb p{margin:0 0 10px}
.w-trb a{display:inline-block;min-width:44px;margin-right:4px;padding:0 6px;border-radius:6px;background:rgba(168,85,247,.16);color:#a855f7;font-weight:700;font-size:.8rem;text-decoration:none;font-variant-numeric:tabular-nums;text-align:center}
.w-trb a:hover{background:rgba(168,85,247,.3)}
.w-trb span{cursor:pointer;border-radius:4px;transition:background .15s}
.w-trb span:hover{background:var(--hover)}
.w-trb span.on{background:rgba(236,72,153,.22);box-shadow:0 0 0 2px rgba(236,72,153,.22)}
.w-trb span.hit{background:#facc15;color:#111}
.w-trm{border:0;background:none;color:var(--txt);font:inherit;font-weight:700;font-size:.86rem;padding:8px 0 0;cursor:pointer}
.w-trm[hidden]{display:none}
@media (max-width:760px){.w-trq{max-width:none}}