/* senci — file statis ber-versi (AppSupportAsset::url). Sumber dulu inline: partials/web-styles + video.blade (style) + partials/m-video-style. JANGAN taruh variabel Blade di sini. */
        /* Font system-stack (Roboto native di Android/ChromeOS, Segoe UI/SF di OS lain).
           Tanpa @font-face jaringan → tak ada flash/FOUT saat pindah halaman. */
        /* --muted digelapkan #8a9099→#6b717a agar kontras teks meta ≥4.5:1 (WCAG AA). */
        :root{ --red:#E8443B; --ink:#222; --muted:#6b717a; --line:#eee; --bg:#ffffff; --soft:#f2f3f5; --card:#ffffff; }
        /* Stylesheet lama — kini HANYA dipakai video.blade.php (desktop). Halaman lain sudah
           extends layouts.senci + senci-style. Var gelap di sini agar video ikut tema. */
        :focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
        :root[data-theme="dark"]{
            --red:#ff5a5b; --ink:#e7e9ee; --muted:#98a0ac; --line:#2a2e37; --bg:#0f1116; --soft:#1c2029; --card:#181b21;
        }
        /* Avatar bulat logo sumber (chip "Mengikuti") */
        .src-ava{ width:26px; height:26px; flex:none; border-radius:50%; overflow:hidden; background:#fff;
            border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
            font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; }
        .src-ava img{ width:100%; height:100%; object-fit:contain; }
        .sug-name{ white-space:nowrap; }
        .sug-tick{ margin-left:2px; font-weight:700; }
        *{ box-sizing:border-box; }
        body{ margin:0; background:var(--bg); color:var(--ink);
            font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
        a{ text-decoration:none; color:inherit; }
        .wrap{ max-width:1160px; margin:0 auto; padding:0 16px; }

        /* HERO */
        .hero{ position:relative; height:260px; color:#fff;
            background:radial-gradient(120% 140% at 50% 0%, #1b2a4a 0%, #0a1120 60%, #05070d 100%); overflow:hidden; }
        .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center calc(50% + 35px); z-index:0; }
        .hero__shade{ position:absolute; inset:0; z-index:1;
            background:linear-gradient(180deg,rgba(5,7,13,.25) 0%,rgba(5,7,13,.35) 55%,rgba(5,7,13,.6) 100%); }
        .hero__top{ position:relative; z-index:2; display:flex; justify-content:flex-end; align-items:center; gap:22px;
            height:52px; font-size:14px; color:#dfe6f0; }
        .hero__top a:hover{ color:#fff; }
        .hero__top .btn-login{ background:var(--red); color:#fff; padding:6px 18px; border-radius:16px; }
        .hero__center{ position:relative; z-index:2; text-align:center; margin-top:34px; }
        .logo{ font-size:52px; font-weight:800; letter-spacing:1px; color:#fff; text-decoration:none; display:inline-block; }
        .logo .dot{ color:var(--red); }
        .hero__search{ margin:26px auto 0; max-width:680px; display:flex; align-items:center; background:#e9eaee; border-radius:12px; overflow:hidden; height:52px; }
        .hero__search input{ flex:1; border:0; outline:0; background:transparent; padding:0 20px; font-size:15px; color:#333; }
        .hero__search input::placeholder{ color:#9aa0a6; }
        .hero__search button{ width:58px; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }

        /* STICKY BAR (muncul saat scroll) */
        .stickybar{ position:fixed; top:0; left:0; right:0; z-index:50; background:#fff;
            border-bottom:1px solid var(--line); box-shadow:0 1px 6px rgba(0,0,0,.06);
            transform:translateY(-100%); transition:transform .22s ease; }
        .stickybar.show{ transform:translateY(0); }
        /* Datang dari klik menu di single post: tampilkan header menu, sembunyikan hero. */
        body.nohero{ padding-top:56px; }
        body.nohero .hero, body.nohero .navrow{ display:none !important; }
        body.nohero .stickybar{ transform:translateY(0); transition:none; }
        .stickybar .inner{ max-width:none; margin:0; padding:0 32px; height:56px; display:flex; align-items:center; gap:18px; }
        .stickybar .slogo{ font-size:28px; font-weight:800; white-space:nowrap; color:var(--red); }
        .stickybar .slogo .dot{ color:#111; }
        .stickybar .navtabs{ flex:1; }
        .stickybar .navtabs > a, .stickybar .more__toggle{ font-size:15px; padding:16px 0; }
        .stickybar .mini-search{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#eef0f3; border-radius:8px; height:38px; width:260px; padding:0 14px; color:var(--muted); font-size:13.5px; }
        .stickybar .mini-search svg{ flex:none; }
        .stickybar .mini-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; color:#333; }
        .stickybar .mini-search input::placeholder{ color:var(--muted); }
        .stickybar .mini-search button{ flex:none; border:0; background:transparent; cursor:pointer; padding:0; display:flex; align-items:center; }
        .stickybar .mini-login{ background:var(--red); color:#fff; padding:6px 16px; border-radius:16px; font-size:14px; white-space:nowrap; }
        .stickybar .hdr-write{ display:none; }

        /* NAV TABS (dipakai in-flow & sticky) */
        .navtabs{ display:flex; gap:20px; align-items:center; }
        .navtabs > a, .more__toggle{ font-size:16px; color:#333; padding:14px 0; position:relative; white-space:nowrap; cursor:pointer; }
        /* more__toggle kini <button> (SEO: bukan <a> tanpa href) → reset gaya native. */
        .more__toggle{ background:none; border:0; font-family:inherit; line-height:inherit; }
        .navtabs > a.active, .more__toggle.active{ color:var(--red); font-weight:600; }
        .navtabs > a.active::after, .more__toggle.active::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:3px; background:var(--red); border-radius:2px; }
        /* Dropdown "Lainnya" (grid 4x2) */
        .more{ position:relative; }
        .more__toggle .caret{ font-size:11px; }
        .more__panel{ position:absolute; top:100%; right:0; z-index:60; display:none;
            grid-template-columns:repeat(4,auto); gap:12px 26px; padding:16px 20px;
            background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
        .more:hover .more__panel, .more.open .more__panel{ display:grid; }
        .more__panel a{ font-size:15px; color:#333; white-space:nowrap; padding:5px 4px; cursor:pointer; }
        .more__panel a:hover{ color:var(--red); }
        .navrow{ background:#fff; border-bottom:1px solid var(--line); }
        .navrow .navtabs{ max-width:1160px; margin:0 auto; padding:0 16px; }

        /* LAYOUT */
        .grid{ display:grid; grid-template-columns:1fr 330px; gap:24px; padding:20px 0 60px; align-items:start; }
        .grid > aside{ position:sticky; top:70px; align-self:start; }
        .card-box{ background:#fff; border-radius:8px; }

        /* BERITA UTAMA */
        .today{ padding:16px 8px; background:#fff; border-bottom:1px solid var(--line); }
        .today__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:0 8px; }
        .today__badge{ background:var(--red); color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:4px; }
        .today__date{ color:var(--muted); font-size:13px; }
        .today__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
        .today__cell{ display:flex; gap:10px; align-items:center; padding:4px 8px; }
        .today__cell:hover .mini-title{ color:var(--red); }
        /* Thumbnail kecil kiri (dipakai HARI INI & Terpanas) */
        .mini-thumb{ width:80px; height:60px; flex:none; border-radius:6px; overflow:hidden; background:linear-gradient(90deg,#eee 25%,#e4e4e4 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; position:relative; }
        .mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
        .mini-thumb.noimg{ background:#f2f3f5 url('/news-fallback.webp') center/cover no-repeat; animation:none; }
        .mini-thumb.noimg::after{ content:none; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--red); opacity:.34; font-size:13px; }
        .mini-title{ font-size:14px; line-height:1.35; color:var(--ink); min-width:0; flex:1;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        /* Desktop: di sidebar Terpanas, thumbnail di KANAN judul */
        @media(min-width:821px){ aside .hot__list .hot__link{ flex-direction:row-reverse; } }
        /* "Terpanas senci" disisipkan di feed (mobile saja) */
        .feed-hot{ display:none; background:#fff; border-bottom:1px solid var(--line); padding:16px 20px; }
        .feed-hot .hot__head{ margin-bottom:8px; }
        @media(max-width:560px){ .today__grid{ grid-template-columns:1fr; } }

        /* FEED */
        .feed .card{ display:flex; gap:16px; padding:18px 20px; background:#fff; border-bottom:1px solid var(--line); }
        .feed .card:hover .card__title{ color:var(--red); }
        .card__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
        .card__title{ font-size:17px; line-height:1.45; font-weight:600; margin:2px 0 0; color:var(--ink);
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .card__meta{ margin-top:auto; padding-top:14px; display:flex; gap:16px; align-items:center; color:var(--muted); font-size:13px; }
        .card__meta .src{ color:#5f6570; }
        .card__meta .x{ margin-left:auto; opacity:.5; }
        .card__thumb{ position:relative; width:170px; height:112px; flex:none; border-radius:6px; overflow:hidden; background:linear-gradient(90deg,#eee 25%,#e4e4e4 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
        .card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
        .card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
        .card__dur{ position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:1px 6px; border-radius:3px; }
        /* Grid gambar 2/4 kolom (ala Toutiao) */
        .grid-row{ display:grid; gap:12px; padding:16px 20px; background:#fff; border-bottom:1px solid var(--line); }
        .grid-2{ grid-template-columns:repeat(2,1fr); }
        .grid-3{ grid-template-columns:repeat(3,1fr); }
        .grid-4{ grid-template-columns:repeat(4,1fr); }
        .gcell{ display:block; }
        .gcell__img{ position:relative; width:100%; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:linear-gradient(90deg,#eee 25%,#e4e4e4 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
        .gcell__img img{ width:100%; height:100%; object-fit:cover; display:block; }
        /* Fallback saat gambar hilang/gagal muat → placeholder ber-brand senci */
        .card__thumb.noimg, .gcell__img.noimg{ background:#f2f3f5 url('/news-fallback.webp') center/cover no-repeat; animation:none; }
        .card__thumb.noimg::after, .gcell__img.noimg::after{ content:none; position:absolute; inset:0;
            display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--red);
            opacity:.34; letter-spacing:-.02em; }
        .card__thumb.noimg::after{ font-size:20px; }
        .gcell__img.noimg::after{ font-size:26px; }
        .gcell__title{ margin:8px 0 3px; font-size:15px; line-height:1.35; font-weight:600; color:var(--ink);
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .grid-4 .gcell__title{ font-size:13.5px; }
        .gcell__meta{ color:var(--muted); font-size:12px; }
        .gcell:hover .gcell__title{ color:var(--red); }
        .today li a:hover{ color:var(--red); }
        /* Kartu 1 kolom besar (gambar penuh di atas) — variasi acak di feed */
        .bigcard{ display:block; padding:16px 20px; background:#fff; border-bottom:1px solid var(--line); }
        .bigcard:hover .bigcard__title{ color:var(--red); }
        .bigcard__img{ position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:linear-gradient(90deg,#eee 25%,#e4e4e4 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; margin-bottom:12px; }
        .bigcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
        .bigcard__img.noimg{ background:#f2f3f5 url('/news-fallback.webp') center/cover no-repeat; animation:none; }
        .bigcard__img.noimg::after{ content:none; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--red); opacity:.34; font-size:30px; }
        .bigcard__title{ font-size:19px; line-height:1.4; font-weight:600; margin:0 0 8px; color:var(--ink); }
        .bigcard .card__meta{ margin-top:0; padding-top:0; }
        @media(max-width:820px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }

        /* SIDEBAR */
        .side-card{ background:#fff; border-radius:8px; padding:16px 18px; margin-bottom:16px; }
        .login-card{ text-align:left; }
        .login-card p{ margin:0 0 12px; font-size:14px; color:#555; }
        .login-card .btn{ display:inline-block; background:var(--red); color:#fff; padding:8px 22px; border-radius:18px; font-size:14px; }
        .hot__head{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; margin-bottom:6px; }
        .hot__head .fire{ color:var(--red); }
        .hot__list{ list-style:none; margin:0; padding:0; }
        .hot__list li{ padding:6px 0; border-top:1px solid #f4f4f4; }
        .hot__list li:first-child{ border-top:0; }
        .hot__list .hot__link{ display:flex; gap:10px; align-items:center; color:inherit; }
        .hot__list .hot__link:hover .mini-title{ color:var(--red); }
        .qr-card{ text-align:center; }
        .qr-card .qr{ width:110px; height:110px; margin:10px auto; background:
            repeating-linear-gradient(45deg,#ddd 0 6px,#fff 6px 12px); border-radius:8px; }
        .qr-card .t{ font-size:14px; color:#555; }
        .foot{ color:var(--muted); font-size:12px; text-align:center; padding:24px 0 40px; }
        .feed-sentinel{ height:48px; display:flex; align-items:center; justify-content:center; }
        .feed-sentinel.done{ display:none; }
        .spin{ width:22px; height:22px; border:2.5px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:spin .7s linear infinite; }
        @keyframes spin{ to{ transform:rotate(360deg); } }
        @keyframes shimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

/* ── Responsive mobile-web (≤820px) ── */
@media (max-width: 820px){
    .wrap{ padding:0 8px; }
    /* Hero: search form menempel ke navrow putih di bawah (sudut bawah siku) */
    .hero{ height:210px; display:flex; flex-direction:column; }
    .hero__top{ height:44px; gap:16px; }
    .hero__center{ flex:1; min-height:0; margin:0; padding-top:14px; display:flex; flex-direction:column; align-items:center; }
    .logo{ font-size:36px; }
    .hero__search{ margin:0 8px; margin-top:auto; align-self:stretch; height:46px; max-width:none;
        border-radius:10px 10px 0 0; }
    .navtabs{ gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .navtabs::-webkit-scrollbar{ display:none; }
    .navrow .navtabs{ padding:0 8px; }
    .grid{ grid-template-columns:1fr; gap:14px; }
    .grid > aside{ position:static; }
    .grid-4{ grid-template-columns:repeat(2,1fr); }
    .grid-3{ grid-template-columns:repeat(2,1fr); }
    .feed .card{ padding:14px 8px; }
    .card__thumb{ width:120px; height:80px; }
    .card__title{ font-size:16px; }
    .grid-row{ padding:14px 8px; }
    .bigcard{ padding:14px 8px; }
    .bigcard__title{ font-size:17px; }
    .feed-hot{ padding:14px 8px; }
    /* HARI INI: mobile hanya 3 baris (1 kolom) */
    .today{ padding:14px 8px; }
    .today__grid{ grid-template-columns:1fr; }
    .today__cell:nth-child(n+4){ display:none; }
    /* Sticky (scroll) 2 baris: baris merah (logo-ikon+cari+tulis+avatar) + baris menu putih tanpa logo */
    .stickybar{ background:var(--red); }
    .stickybar .inner{ flex-wrap:wrap; gap:8px; padding:0 8px; height:auto; }
    .stickybar .slogo{ order:1; width:32px; height:32px; flex:none; border-radius:6px; overflow:hidden; font-size:0;
        margin:8px 0; background:#fff url('/senci-logo.png') center/cover no-repeat; }
    .stickybar .slogo .dot{ display:none; }
    .stickybar .mini-search{ order:2; display:flex; flex:1; min-width:0; margin:8px 0; height:38px; background:#fff; }
    .stickybar .hdr-write{ order:3; display:flex; align-items:center; justify-content:center; width:32px; height:38px;
        flex:none; color:#fff; margin:8px 0; }
    .stickybar .mini-login{ order:4; margin:8px 0; background:#fff; color:var(--red); }
    .stickybar .navtabs{ order:5; flex-basis:100%; width:100%; background:#fff; margin:0 -8px; padding:0 8px; }
    .today{ font-size:14px; }
    .side-card.qr-card{ display:none; }
}

        :root{ --vbg:#0d0d0d; --vsurf:#1b1b1b; --vsurf2:#242424; --vline:#2c2c2c; --vtext:#f2f2f2; --vmuted:#9a9a9a; --vtop-h:58px; }
        html,body{ height:100%; margin:0; overflow:hidden; background:var(--vbg); color:var(--vtext); }
        /* Header = sama dgn halaman artikel (logo + nav + cari + login) tapi GELAP */
        .vtop{ height:var(--vtop-h); background:#161616; border-bottom:1px solid var(--vline); display:flex; align-items:center; }
        .vtop .inner{ width:100%; padding:0 24px; display:flex; align-items:center; gap:18px; }
        .vtop .slogo{ font-size:26px; font-weight:800; color:var(--red); white-space:nowrap; }
        .vtop .slogo .dot{ color:#fff; }
        .vtop .navtabs{ flex:1; }
        .vtop .navtabs a{ color:#cfcfcf; }
        .vtop .navtabs a:hover{ color:#fff; }
        .vtop .navtabs a.active{ color:var(--red); }
        .vtop .more__toggle{ color:#cfcfcf; }
        .vtop .more__panel{ background:var(--vsurf); border-color:var(--vline); }
        .vtop .more__panel a{ color:#cfcfcf; }
        .vtop .more__panel a:hover{ background:var(--vsurf2); color:#fff; }
        .vtop .mini-search{ display:flex; align-items:center; gap:10px; background:var(--vsurf2); border-radius:8px; height:38px; width:260px; padding:0 14px; }
        .vtop .mini-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; color:#eee; }
        .vtop .mini-search input::placeholder{ color:var(--vmuted); }
        .vtop .mini-search button{ border:0; background:transparent; cursor:pointer; padding:0; display:flex; align-items:center; }
        .vtop .mini-login{ background:var(--red); color:#fff; padding:7px 16px; border-radius:16px; font-size:14px; white-space:nowrap; }
        .vtop .hdr-write{ display:none; }
        /* FULL WIDTH, tinggi tetap (halaman TIDAK scroll) */
        .vid-wrap{ height:calc(100vh - var(--vtop-h)); display:grid; grid-template-columns:minmax(0,1fr) 400px; }
        .vid-left{ padding:0; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
        /* Stage TEPAT 16:9 → tak ada bilah hitam (letterbox) atas-bawah; margin 0. */
        .vid-stage{ position:relative; width:100%; aspect-ratio:16/9; max-height:calc(100vh - var(--vtop-h)); background:#000; overflow:hidden; }
        /* Short (portrait 9:16): stage TETAP selebar layar (area scroll & panah penuh),
           hanya PLAYER yang tegak 9:16 di tengah. */
        .vid-stage.portrait #player{ left:50%; right:auto; top:0; bottom:auto; transform:translateX(-50%);
            width:auto; height:100%; aspect-ratio:9/16; }
        .vid-stage.portrait .vslide{ left:50%; right:auto; transform:translateX(-50%); width:auto; height:100%; aspect-ratio:9/16; }
        #player{ position:absolute; inset:0; width:100%; height:100%; border:0; }
        /* Slide GESER (konten lama ikut keluar, baru masuk) — ala Toutiao */
        .vslide{ position:absolute; inset:0; z-index:7; display:none; overflow:hidden; background:#000; }
        .vslide-track{ position:absolute; left:0; top:0; width:100%; height:200%; will-change:transform; }
        .vslide-track .p{ position:absolute; left:0; width:100%; height:50%; object-fit:cover; display:block; background:#000; }
        .vslide-track .p.top{ top:0; } .vslide-track .p.bot{ top:50%; }
        /* Penangkap scroll+klik play/pause hanya di TENGAH video. Tepi ATAS (64px) &
           BAWAH (56px) dibiarkan bebas agar SEMUA kontrol YouTube (volume/CC/settings
           di kanan-atas + seek/fullscreen di bawah) bisa diklik. */
        .vwheel{ position:absolute; left:0; right:0; top:64px; bottom:92px; z-index:4; cursor:pointer; }
        .vnav{ position:absolute; right:16px; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; z-index:6;
            background:rgba(255,255,255,.16); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background .12s; }
        .vnav:hover{ background:var(--red); } .vnav:disabled{ opacity:.3; cursor:default; }
        .vnav.up{ top:calc(50% - 54px); } .vnav.down{ top:calc(50% + 8px); }
        /* Info 2 kolom: judul+meta KIRI, aksi KANAN (1 baris) → video lebih besar */
        .vid-info{ flex:0 0 auto; margin-top:0; padding:14px 22px; border-bottom:1px solid var(--vline);
            display:flex; align-items:center; justify-content:space-between; gap:24px; }
        .vid-info-l{ min-width:0; flex:1; }
        .vid-title{ font-size:18px; font-weight:700; color:#fff; margin:0 0 4px; line-height:1.4;
            display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
        .vid-meta{ font-size:13px; color:var(--vmuted); display:flex; gap:14px; align-items:center; }
        .vid-actions{ display:flex; gap:22px; flex:none; align-items:center; }
        .vact{ display:inline-flex; align-items:center; gap:8px; background:none; border:0; color:var(--vmuted); font:inherit; font-size:14px; cursor:pointer; }
        .vact:hover{ color:#fff; } .vact.on{ color:var(--red); } .vact .ic{ font-size:19px; }
        /* Sidebar kanan: SATU-SATUNYA yang scroll */
        .vid-right{ height:calc(100vh - var(--vtop-h)); overflow-y:auto; padding:18px; border-left:1px solid var(--vline);
            scrollbar-width:thin; scrollbar-color:#3a3a3a transparent; }
        .vid-right::-webkit-scrollbar{ width:6px; }
        .vid-right::-webkit-scrollbar-track{ background:transparent; }
        .vid-right::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:3px; }
        .vid-right::-webkit-scrollbar-thumb:hover{ background:#4d4d4d; }
        .vid-right::-webkit-scrollbar-button{ display:none; width:0; height:0; }
        .author-card{ background:var(--vsurf); border-radius:10px; padding:14px; display:flex; align-items:center; gap:12px; margin-bottom:18px; }
        .author-ava{ width:44px; height:44px; border-radius:50%; overflow:hidden; background:#fff; flex:none;
            display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#333; font-size:17px; }
        .author-ava img{ width:100%; height:100%; object-fit:contain; }
        .author-info{ flex:1; min-width:0; }
        .author-name{ font-weight:700; color:#fff; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .author-sub{ font-size:12px; color:var(--vmuted); margin-top:2px; }
        .vfollow{ border:0; background:var(--red); color:#fff; border-radius:18px; padding:8px 18px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; flex:none; }
        .vfollow.on{ background:var(--vsurf2); color:var(--vmuted); }
        .recs-head{ font-weight:700; font-size:16px; color:#fff; margin:0 0 12px; }
        .vrec{ display:flex; gap:10px; padding:8px; border-radius:8px; cursor:pointer; text-decoration:none; }
        .vrec:hover{ background:var(--vsurf); }
        .vrec.active{ background:var(--vsurf2); }
        .vrec__thumb{ width:150px; height:90px; flex:none; border-radius:6px; overflow:hidden; background:#000; position:relative; }
        .vrec__thumb img{ width:100%; height:100%; object-fit:cover; }
        .vrec__t{ font-size:13.5px; line-height:1.4; color:#eaeaea; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .vrec__m{ font-size:12px; color:var(--vmuted); margin-top:8px; }
        /* Panel komentar — geser dari kanan */
        .vcomments{ position:fixed; top:var(--vtop-h); right:0; width:400px; max-width:100%; height:calc(100vh - var(--vtop-h));
            background:#141414; border-left:1px solid var(--vline); z-index:60; display:flex; flex-direction:column;
            transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); box-shadow:-8px 0 30px rgba(0,0,0,.4); }
        .vcomments.open{ transform:translateX(0); }
        .vc-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--vline); font-weight:700; color:#fff; }
        .vc-x{ background:none; border:0; color:var(--vmuted); font-size:26px; line-height:1; cursor:pointer; }
        .vc-x:hover{ color:#fff; }
        .vc-list{ flex:1; overflow-y:auto; padding:8px 18px; scrollbar-width:thin; scrollbar-color:#3a3a3a transparent; }
        .vc-list::-webkit-scrollbar{ width:6px; } .vc-list::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:3px; }
        .vc-list::-webkit-scrollbar-track{ background:transparent; } .vc-list::-webkit-scrollbar-button{ display:none; }
        .vc-item{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #232323; }
        .vc-ava{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; background:var(--vsurf2);
            display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#bbb; }
        .vc-ava img{ width:100%; height:100%; object-fit:cover; }
        .vc-main{ flex:1; min-width:0; }
        .vc-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
        .vc-name{ font-size:13px; font-weight:600; color:#cfcfcf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .vc-like{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:var(--vmuted); font:inherit; font-size:12.5px; cursor:pointer; flex:none; }
        .vc-like:hover{ color:#fff; } .vc-like.on{ color:var(--red); }
        .vc-body{ font-size:14px; color:#eaeaea; margin:4px 0 6px; line-height:1.5; white-space:pre-wrap; }
        .vc-foot{ display:flex; gap:16px; font-size:12px; color:var(--vmuted); align-items:center; }
        .vc-reply{ background:none; border:0; color:var(--vmuted); font:inherit; font-size:12px; cursor:pointer; padding:0; }
        .vc-reply:hover{ color:#fff; }
        .vc-replies{ margin-top:10px; padding-left:12px; border-left:2px solid #2a2a2a; display:flex; flex-direction:column; gap:12px; }
        .vc-replies .vc-item{ border-bottom:0; padding:0; }
        .vc-empty{ color:var(--vmuted); font-size:13.5px; padding:24px 0; text-align:center; }
        .vc-replybar{ display:none; align-items:center; gap:8px; padding:8px 16px 0; font-size:12.5px; color:var(--vmuted); }
        .vc-replybar.show{ display:flex; }
        .vc-replybar b{ color:#ddd; }
        .vc-replybar .cancel{ background:none; border:0; color:var(--vmuted); cursor:pointer; font-size:18px; line-height:1; margin-left:auto; }
        .vc-compose{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--vline); }
        .vc-compose input{ flex:1; min-width:0; background:var(--vsurf2); border:0; border-radius:8px; padding:10px 12px; color:#eee; font:inherit; font-size:14px; outline:none; }
        .vc-compose button{ background:var(--red); color:#fff; border:0; border-radius:8px; padding:0 16px; font:inherit; font-weight:600; cursor:pointer; flex:none; }
        @media(max-width:900px){
            html,body{ overflow:auto; } /* mobile: halaman boleh scroll biasa */
            .vcomments{ width:100%; }
            .vtop .navtabs, .vtop .mini-login{ display:none; }
            .vtop .mini-search{ flex:1; width:auto; }
            .vid-wrap{ grid-template-columns:1fr; height:auto; }
            .vid-left{ padding:0; overflow:visible; }
            .vid-stage{ aspect-ratio:16/9; flex:none; border-radius:0; }
            .vid-info{ flex-direction:column; align-items:stretch; gap:14px; padding:14px; margin-top:0; }
            .vid-actions{ gap:28px; }
            .vid-right{ height:auto; overflow:visible; border-left:0; }
        }
        /* ===== HP: video gaya Douyin (PK7). Desktop TIDAK tersentuh: semua elemen m-v* disembunyikan
           di luar media query; aturan HP hanya berlaku ≤760px ATAU HP diputar (landscape, tinggi ≤500, layar sentuh). ===== */
        .m-vtop,.m-vfeed,.m-vchip,.m-vc-bg,.m-vnav,.m-vtoast,.m-vfsx{ display:none; }
        @media (max-width:760px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){
            :root{ --mbn:calc(56px + env(safe-area-inset-bottom)); }
            html,body{ height:100%; overflow:hidden; background:#000; }
            .vtop,.vid-info,.vid-right,.vnav,.vwheel,#vslide{ display:none !important; }
            .vid-wrap{ display:block; height:auto; }
            .vid-left{ display:block; overflow:visible; }
            /* SATU player: stage fixed di bawah feed (iframe tak pernah dipindah di DOM). */
            .vid-stage{ position:fixed; left:0; right:0; top:0; bottom:var(--mbn); width:auto; aspect-ratio:auto; max-height:none; z-index:1; background:#000; }
            .vid-stage #player, .vid-stage.portrait #player{ position:absolute; left:0; top:0; right:auto; bottom:auto; width:100%; height:100%; transform:none; aspect-ratio:auto; }
            .vid-stage:fullscreen{ background:#000; }
            .vid-stage:fullscreen .m-vfsx{ display:flex; }
            .m-vfsx{ position:absolute; top:10px; left:10px; z-index:3; width:44px; height:44px; border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; align-items:center; justify-content:center; }
            .m-vfsx svg{ width:26px; height:26px; fill:currentColor; }

            /* Feed vertikal scroll-snap. pointer-events:none di wadah → pita seek bawah (56px) tembus ke iframe. */
            .m-vfeed{ display:block; position:fixed; left:0; right:0; top:0; bottom:var(--mbn); z-index:2; overflow-y:scroll; overflow-x:hidden;
                scroll-snap-type:y mandatory; overscroll-behavior:contain; pointer-events:none; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
            .m-vfeed::-webkit-scrollbar{ display:none; }
            .m-vs{ position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; background:#000; overflow:hidden; pointer-events:none; }
            .m-vs.live{ background:transparent; }
            .m-vs-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; opacity:1; transition:none; }
            .m-vs.pt .m-vs-poster{ object-fit:cover; }
            .m-vs.live .m-vs-poster{ opacity:0; transition:opacity .28s; }
            .m-vs-grad{ position:absolute; left:0; right:0; bottom:0; height:240px; background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0)); pointer-events:none; }
            .vtouch{ position:absolute; left:0; right:0; top:0; bottom:56px; pointer-events:auto; -webkit-tap-highlight-color:transparent; cursor:pointer; }
            .m-vs-play{ position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; opacity:0; pointer-events:none; transition:opacity .15s; }
            .m-vs-play svg{ width:72px; height:72px; fill:rgba(255,255,255,.85); filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
            .m-vs.paused.live .m-vs-play{ opacity:1; }
            .m-vs-info{ position:absolute; left:14px; right:78px; bottom:64px; color:#fff; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.55); }
            .m-vs-by{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
            .m-vs-t{ font-size:14.5px; line-height:1.35; margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
            .m-vs-tm{ font-size:12px; color:#bbb; margin-top:5px; }
            .m-vs-rail{ position:absolute; right:6px; bottom:72px; width:62px; display:flex; flex-direction:column; align-items:center; gap:16px; pointer-events:auto; }
            .m-rb{ background:none; border:0; padding:0; margin:0; color:#fff; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; font-size:11.5px;
                text-shadow:0 1px 4px rgba(0,0,0,.55); cursor:pointer; -webkit-tap-highlight-color:transparent; max-width:62px; }
            .m-rb span{ max-width:62px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
            .m-rb svg{ width:34px; height:34px; fill:currentColor; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
            .m-rb.on svg{ fill:var(--red); }
            .m-rb.share svg{ transform:scaleX(-1); }
            .m-ava{ position:relative; width:54px; height:62px; background:none; border:0; padding:0; margin:0 0 2px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
            .m-ava .ring{ position:absolute; left:2px; top:0; width:50px; height:50px; border-radius:50%; background:#fff; padding:2px; box-shadow:0 0 4px rgba(0,0,0,.4); }
            .m-ava .ring i, .m-ava .ring img{ position:absolute; left:2px; top:2px; width:46px; height:46px; border-radius:50%; }
            .m-ava .ring i{ display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:19px; color:#fff; }
            .m-ava .ring img{ object-fit:cover; background:#fff; }
            .m-ava .bdg{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; border:2px solid #fff;
                background:var(--red); color:#fff; font-size:14px; font-weight:800; line-height:18px; text-align:center; }
            .m-ava .bdg.on{ background:#fff; color:var(--red); }
            .m-ava .bdg[hidden]{ display:none; }
            .m-vs-err, .m-endc{ position:absolute; left:0; right:0; top:0; bottom:56px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px;
                color:rgba(255,255,255,.75); font-size:14px; text-align:center; pointer-events:auto; background:rgba(0,0,0,.72); }
            .m-vs.err .m-vs-err{ display:flex; }
            .m-vs-err svg, .m-endc svg{ width:40px; height:40px; fill:rgba(255,255,255,.55); }
            .m-retry{ background:var(--red); color:#fff; border:0; border-radius:22px; padding:10px 24px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
            .m-vs-end{ pointer-events:auto; }
            .m-vs-end .m-endc{ display:flex; bottom:0; background:#000; }
            .m-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:var(--red); animation:mvspin .8s linear infinite; }
            @keyframes mvspin{ to{ transform:rotate(360deg); } }

            /* Bar atas: ← kiri, ⛶ kanan (hanya video horizontal + Fullscreen API tersedia). */
            .m-vtop{ display:flex; justify-content:space-between; position:fixed; left:0; right:0; top:0; z-index:5; padding:calc(4px + env(safe-area-inset-top)) 4px 0; pointer-events:none; }
            .m-vtop button{ pointer-events:auto; width:44px; height:44px; border:0; background:none; color:#fff; display:flex; align-items:center; justify-content:center; padding:0;
                filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); -webkit-tap-highlight-color:transparent; cursor:pointer; }
            .m-vtop button[hidden]{ display:none; }
            .m-vtop svg{ width:26px; height:26px; }
            .m-vback svg{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
            .m-vfs svg{ fill:currentColor; width:30px; height:30px; }
            .m-vchip{ position:fixed; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:6; background:rgba(0,0,0,.6); color:#fff;
                border:0; border-radius:18px; padding:8px 14px; font:inherit; font-size:13.5px; font-weight:600; white-space:nowrap; cursor:pointer; }
            .m-vchip.show{ display:block; }

            /* Komentar = sheet bawah 70dvh */
            .vcomments{ top:auto; left:0; right:0; bottom:0; width:100%; height:70dvh; border-left:0; border-radius:16px 16px 0 0; z-index:70;
                transform:translateY(100%); padding-bottom:env(safe-area-inset-bottom); }
            .vcomments:not(.open){ box-shadow:none; }
            .vcomments.open{ transform:translateY(0); }
            .vc-compose input{ font-size:16px; } /* <16px → iOS zoom saat fokus */
            .m-vc-bg.show{ display:block; position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.4); }
            .m-vtoast.show{ display:block; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:90; background:rgba(0,0,0,.8); color:#fff;
                padding:10px 18px; border-radius:10px; font-size:14px; pointer-events:none; max-width:80%; text-align:center; }

            /* Bottom nav GELAP (= app Flutter di Video/Movie) */
            .m-vnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; height:var(--mbn); padding-bottom:env(safe-area-inset-bottom);
                background:#0E0E0E; border-top:1px solid #1d1d1d; }
            .m-vnav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; line-height:1.2; color:#9AA0A6;
                text-decoration:none; -webkit-tap-highlight-color:transparent; }
            .m-vnav a.on{ color:var(--red); }
            .m-vnav svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; display:block; }
            .m-vnav svg.fill{ fill:currentColor; stroke:none; }
            .m-vnav svg .f{ fill:currentColor; stroke:none; }
            .m-vnav .bn-ic{ position:relative; display:block; font-style:normal; }
            .m-vnav .bn-badge{ position:absolute; top:-5px; left:15px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--red); color:#fff;
                font-size:10.5px; font-weight:700; line-height:17px; text-align:center; border:1.5px solid #0E0E0E; box-sizing:content-box; }
            .m-vnav .bn-badge[hidden]{ display:none; }
        }
        /* HP diputar tanpa fullscreen: video penuh, overlay/rail/nav disembunyikan, geser dikunci. */
        @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
            :root{ --mbn:0px; }
            .m-vnav,.m-vtop,.m-vs-info,.m-vs-rail,.m-vs-grad{ display:none !important; }
            .m-vfeed{ overflow-y:hidden; }
        }
        /* HP tegak + video horizontal: player jadi pita 16:9 di tengah (seperti poster contain),
           agar kontrol/judul bawaan YouTube tak menimpa overlay byline & rail. Fullscreen tak terpengaruh. */
        @media (max-width:760px) and (orientation:portrait){
            .vid-stage.m-land:not(:fullscreen) #player{ top:50%; height:auto; aspect-ratio:16/9; transform:translateY(-50%); }
        }