/* ==========================================================================
   Video (kartu, halaman detail) + iklan slideshow kiri/kanan yang ikut scroll
   Dimuat setelah app.css & mobile.css
   ========================================================================== */

/* ---- Iklan slideshow ---- */
.adslide{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#fff}
.as-stage{display:grid}
.as{grid-area:1/1;position:relative;display:block;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.as.on{opacity:1;visibility:visible;z-index:1}
.as img{display:block;width:100%;height:auto}
.as em{position:absolute;z-index:2;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font:10px/1 inherit;font-style:normal;padding:4px 7px;border-radius:5px}
.ad-d{position:absolute;z-index:3;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.ad-d i{width:8px;height:8px;border-radius:8px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.2);cursor:pointer;transition:.35s}
.ad-d i.on{width:22px;background:#fff}
.ad-right{margin-bottom:18px}

/* Kolom kiri: iklan ikut menempel saat scroll (desktop) */
.gl{display:flex;flex-direction:column}
.ad-sticky{position:sticky;top:76px}
.ad-sticky .poster.empty{aspect-ratio:3/4}
@media(max-width:1100px){.ad-sticky{position:static}}

/* ---- Kartu video ---- */
.vsec{padding-bottom:10px}
.vsec .sec-h a,.art .sec-h a{color:var(--navy2);font-weight:700}
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vgrid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vc{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.vc:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(43,36,98,.18)}
.vc-th{position:relative;aspect-ratio:16/9;background:var(--navyd);overflow:hidden}
.vc-th img,.vc-th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s;pointer-events:none}
.vc:hover .vc-th img{transform:scale(1.07)}
.vc-th:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,14,60,.5))}
.vc-pl{position:absolute;z-index:2;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.93);color:var(--red);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .3s}
.vc-pl svg{margin-left:2px}
.vc:hover .vc-pl{transform:scale(1.15)}
.vc-bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.vc-bd h3{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.vc:hover h3{color:var(--red)}
.vc-bd small{margin-top:auto}

/* ---- Halaman detail video ---- */
.vp{margin:0 0 20px;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--sh);text-align:center}
.vp video{display:block;width:100%;max-height:78vh;margin:0 auto;background:#000}
.yt.vpyt{margin-bottom:20px}
.yt.vs{aspect-ratio:9/16;width:min(420px,100%,calc(78vh * 9 / 16));margin-left:auto;margin-right:auto}
.vdesc{font:16px/1.8 'Plus Jakarta Sans',system-ui,sans-serif;color:#3d3a60;margin-bottom:6px}

/* ---- Tombol "buka halaman" di pemutar reels ---- */
.rvm-cap a{pointer-events:auto;justify-self:start;margin-top:8px;color:#fff;font-size:13px;font-weight:700;padding:8px 16px;border-radius:30px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-height:36px;display:inline-flex;align-items:center}
.rvm-cap a:hover{background:var(--cy);color:var(--navyd);border-color:transparent}

/* ---- Responsif (iPhone / Android) ---- */
@media(max-width:1100px){.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .vgrid,.vgrid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .vc-bd h3{font-size:14px}
  .vc-pl{width:42px;height:42px;margin:-21px 0 0 -21px}
  .ad-right{margin-bottom:14px}
  .vp{border-radius:14px}
}
@media(max-width:380px){.vgrid,.vgrid.g3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.as{transition:none}}
@media(hover:none){.vc:hover{transform:none}}

/* ==========================================================================
   v2 — iklan samping (rail) seperti detik.com, reels kecil, bagian "Videos"
   ========================================================================== */

/* ---- Iklan samping di tepi layar (desktop ≥1200px), ikut scroll ---- */
.rail{display:none;position:fixed;top:-9999px;width:150px;z-index:40;visibility:hidden;transition:visibility 0s}
.rail.ok{visibility:visible}
.rail .adslide{border-radius:12px;box-shadow:0 10px 30px rgba(43,36,98,.16)}
.rail .as img{width:100%;height:auto;max-height:calc(100vh - 100px);object-fit:cover;object-position:top center}
.rail .as em{top:6px;right:6px;font-size:9px;padding:3px 6px}
.rail-inline{display:none}
@media(min-width:1200px){.rail{display:block}}
@media(min-width:1200px){
  :root{--wc:min(1360px,calc(100vw - 360px))}
  .rl-l{left:max(6px,calc((100vw - var(--wc))/2 - 168px))}
  .rl-r{right:max(6px,calc((100vw - var(--wc))/2 - 168px))}
  body.rails .wrap.grid2,body.rails .wrap.grid3,body.rails .wrap.page{max-width:var(--wc)}
  body.rails .grid2{grid-template-columns:minmax(0,1fr) 300px;gap:22px}
}
@media(max-width:1199px){
  .rail-inline{display:block;margin-bottom:18px;max-width:420px;margin-left:auto;margin-right:auto}
  .rail-inline .as img{width:auto;max-width:100%;max-height:340px;margin:0 auto;object-fit:contain}
  .rail-inline .adslide{background:#fff}
}

/* ---- Reels: kartu kecil ala detik.com ---- */
.rl-track{gap:10px}
.rl{flex:0 0 calc((100% - 40px)/5);border-radius:12px}
.rl b{left:8px;right:8px;bottom:8px;font-size:11.5px;line-height:1.3;padding-left:7px;border-left:3px solid var(--red);-webkit-line-clamp:3}
.rl .pl{top:7px;right:7px;width:26px;height:26px}.rl .pl svg{width:13px;height:13px}
.rl-nav,.rl-nav:hover{width:36px;height:36px;top:50%;background:rgba(255,255,255,.88);box-shadow:0 4px 14px rgba(43,36,98,.25)}
.rl-nav:hover{background:var(--navy2);color:#fff}
.rl-nav.prev{left:6px}.rl-nav.next{right:6px}
@media(max-width:1199px){.rl{flex-basis:calc((100% - 30px)/4)}}
@media(max-width:820px){.rl{flex-basis:calc((100% - 20px)/3.15)}.rl b{font-size:11px}}
@media(max-width:420px){.rl{flex-basis:calc((100% - 10px)/2.5)}}

/* ---- Bagian "Videos" (gaya blog: video utama besar + 3 kartu) ---- */
.vbox{margin-top:36px}
.vb-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.vb-t{background:var(--navy2);color:#fff;font:600 22px/1 'Plus Jakarta Sans',system-ui,sans-serif;padding:11px 38px 11px 18px;clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.vb-all{margin-left:auto;color:var(--navy2);font-weight:700;font-size:13px}
.vb-n{display:flex;gap:6px;order:3}
.vb-h .vb-all{order:2}
.vb-n button{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s}
.vb-n button:hover:not(:disabled){background:var(--navy2);color:#fff;border-color:var(--navy2)}
.vb-n button:disabled{opacity:.35;cursor:default}
.vb-pg{display:none}.vb-pg.on{display:block;animation:vbIn .45s both}
@keyframes vbIn{from{opacity:0;transform:translateY(10px)}}
.vb-big{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--navyd);box-shadow:var(--sh)}
.vb-big>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.vb-big:hover>img{transform:scale(1.04)}
.vb-big:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,60,.05) 40%,rgba(20,14,60,.85))}
.vb-bolt{position:absolute;z-index:2;top:14px;left:14px;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.vb-play{position:absolute;z-index:2;left:50%;top:46%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(0,0,0,.35);border:3px solid rgba(255,255,255,.9);display:grid;place-items:center;transition:transform .3s,background .3s}
.vb-play svg{margin-left:3px}
.vb-big:hover .vb-play{transform:scale(1.12);background:rgba(226,60,106,.85)}
.vb-cap{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;display:grid;gap:6px;justify-items:start}
.vb-cap .tag{background:var(--navy2);font-style:normal}
.vb-cap b{font-size:clamp(17px,2.4vw,28px);line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vb-cap small{color:rgba(255,255,255,.85)}
.vb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.vb-c{display:block}
.vb-th{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--navyd);margin-bottom:8px}
.vb-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vb-c:hover .vb-th img{transform:scale(1.07)}
.vb-pl{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.9);display:grid;place-items:center}
.vb-pl svg{margin-left:2px}
.vb-c h4{font-size:15px;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.vb-c:hover h4{color:var(--red)}
@media(max-width:700px){
  .vb-t{font-size:18px;padding:9px 30px 9px 14px}
  .vb-play{width:56px;height:56px;margin:-28px 0 0 -28px}.vb-bolt{width:36px;height:36px;top:10px;left:10px}
  .vb-cap{left:12px;right:12px;bottom:12px}
  .vb-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .vb-row::-webkit-scrollbar{display:none}
  .vb-c{flex:0 0 62%;scroll-snap-align:start}
}

/* ---- v3: "Videos" = video besar + panah kiri/kanan + strip kartu untuk memilih ---- */
.vb-stage{position:relative}
.vb-big.sw>img{animation:vbFade .5s both}
@keyframes vbFade{from{opacity:.25;transform:scale(1.04)}}
.vb-ar{position:absolute;z-index:4;top:46%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--navy);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:transform .25s,background .25s,color .25s}
.vb-ar.prev{left:14px}.vb-ar.next{right:14px}
.vb-ar:hover{background:var(--navy2);color:#fff;transform:translateY(-50%) scale(1.1)}
.vb-ar:active{transform:translateY(-50%) scale(.94)}
.vb-strip{display:flex;gap:16px;margin-top:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.vb-strip .vb-c{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;border-radius:12px;padding:6px;margin:-6px;transition:background .25s,box-shadow .25s}
.vb-strip .vb-c.on{background:#fff;box-shadow:0 0 0 2px var(--navy2),var(--sh)}
.vb-strip .vb-c h4{-webkit-line-clamp:2}
@media(max-width:700px){
  .vb-ar{width:38px;height:38px}.vb-ar.prev{left:8px}.vb-ar.next{right:8px}
  .vb-strip{gap:12px}.vb-strip .vb-c{flex-basis:62%}
}