/* ══ HALAMAN VIDEO — /video (rel Video Shorts, ketokan owner 7 Nov 2026) ══════════════════════
   Mockup: /root/dapur-konten/mockup/video/ — Main.dc.html (desktop), HP-Daftar, HP-Putar.
   Markup: templates/public_video.html · perilaku: static/public/video.js.

   🔒 NOL PALET BARU. Warna halaman = variabel review.css (--bg --surface --edge --ink --ink2
      --primaryText --bahayaTeks), jadi terang/gelap mengikuti saklar /review (data-tema).
      Layar putar selalu gelap (latar video, seperti kaki situs): hitam + putih + rgba hitam mockup,
      tombol WA = hijau tombol WA menu bersama (#15803D, situs.css .jn-wa).
   🔴 Grid: desktop 5 kolom, HP 3 kolom, kotak 9/14, sudut tajam, nol teks di bawah kotak.
      Revisi owner 7 Nov 2026 (/reels): MEPET — celah 0, nol garis pembatas; sampul tegak oar2.jpg,
      cadangan hqdefault dipotong pitanya (.vd-cadangan). Nol geser mendatar di 390. */

main.vd{gap:0; padding-top:40px; padding-bottom:64px}
.vd-kepala{display:flex; flex-direction:column; max-width:760px}
.vd-kepala .label{font-size:13px; letter-spacing:.06em}
.vd-kepala h1{margin:10px 0 12px; font-size:44px; line-height:1.12; font-weight:800; letter-spacing:-.02em}
.vd-kepala p{margin:0; max-width:680px; font-size:17px; line-height:1.6; color:var(--ink2)}
.vd-antar-hp{display:none}

.vd-saring{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:28px 0 24px}
.vd-pil-baris{display:flex; flex-wrap:wrap; gap:10px; min-width:0}
.vd-pil{display:inline-flex; align-items:center; font-size:14px; font-weight:600; line-height:1.4; padding:9px 16px;
  border-radius:999px; border:1px solid var(--edge); background:var(--surface); color:var(--ink); text-decoration:none;
  white-space:nowrap}
.vd-pil:hover{border-color:var(--ink2)}
.vd-pil.aktif{background:var(--ink); border-color:var(--ink); color:var(--surface); font-weight:700}

/* ── Grid Reels ── */
.vd-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
.vd-kotak{position:relative; display:block; aspect-ratio:9/14; overflow:hidden; background:#0F172A; color:#FFFFFF;
  text-decoration:none; border:0; border-radius:0; margin:0}
/* oar2.jpg = 1080×1920 (9:16) → cover memotong sedikit atas-bawah ke 9:14. */
.vd-kotak img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block;
  border:0}
/* Cadangan hqdefault (480×360): bingkai Shorts hanya kolom tengah 202,5 px (9:16 × 360), sisanya
   pita hitam/buram. Gambar diperbesar sampai kolom tengah itu = lebar kotak (480/202,5 = 237,04 %),
   dipusatkan → pita sisi DAN atas/bawah terpotong habis. */
.vd-kotak img.vd-cadangan{inset:auto; left:50%; top:50%; width:237.04%; height:auto; object-fit:fill;
  aspect-ratio:4/3; transform:translate(-50%,-50%)}
.vd-kotak:focus-visible{outline:3px solid var(--primaryText); outline-offset:-3px}
.vd-kotak:hover img{filter:brightness(1.08)}
.vd-reels,.vd-tonton{position:absolute; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.vd-reels{right:8px; top:8px; width:18px; height:18px}
.vd-reels svg{width:18px; height:18px; display:block}
.vd-tonton{left:8px; bottom:8px; display:flex; align-items:center; gap:4px; font-size:13px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(0,0,0,.6)}
.vd-tonton svg{width:16px; height:16px; flex:none}
.vd-kosong{margin-top:4px}
.vd-kosong a{font-weight:700}

.vd-lagi{display:flex; justify-content:center; margin-top:36px}
.vd-tombol-lagi{font-size:15px; font-weight:700; line-height:1.4; padding:13px 28px; border-radius:12px;
  border:1px solid var(--edge); background:var(--surface); color:var(--ink); text-decoration:none; cursor:pointer}
.vd-tombol-lagi:hover{border-color:var(--ink2)}
.vd-tombol-lagi[aria-busy="true"]{opacity:.6; pointer-events:none}

/* ── HP (mockup HP-Daftar, 390) ── */
@media (max-width:640px){
  main.vd{padding-top:22px; padding-bottom:32px}
  .vd-kepala .label{font-size:12px}
  .vd-kepala h1{margin:8px 0; font-size:28px; line-height:1.15}
  .vd-kepala p{font-size:14px; line-height:1.55}
  .vd-antar-lebar{display:none}
  .vd-antar-hp{display:inline}
  .vd-saring{margin:18px -16px 16px; gap:0}
  .vd-pil-baris{flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:0 16px; width:100%;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .vd-pil-baris::-webkit-scrollbar{display:none}
  .vd-pil{flex:0 0 auto; font-size:13px; padding:9px 14px}
  .vd-grid{grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 -16px}
  .vd-reels{right:6px; top:6px; width:16px; height:16px}
  .vd-reels svg{width:16px; height:16px}
  .vd-tonton{left:6px; bottom:6px; gap:3px; font-size:12px}
  .vd-tonton svg{width:13px; height:13px}
  .vd-lagi{margin-top:24px}
}

/* ══ LAYAR PUTAR ══════════════════════════════════════════════════════════════════════════ */
.vd-layar{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.94); color:#FFFFFF;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.4;
  overscroll-behavior:contain; touch-action:none}
.vd-layar[hidden]{display:none}
.vd-layar a{color:#FFFFFF; text-decoration:none}
.vd-panggung{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:20px; padding:3vh 16px}
/* Desktop: pemutar 9:16 di tengah setinggi layar. */
.vd-bingkai{position:relative; height:94vh; height:94dvh; aspect-ratio:9/16; max-width:calc(100vw - 140px);
  background:#000; overflow:hidden; border-radius:12px}
.vd-bingkai iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* Lapisan sentuh: menangkap geser/roda/ketuk di atas iframe (iframe lintas-asal menelan semua
   peristiwa). 64 px bawah DIBIARKAN terbuka untuk bilah kendali YouTube (suara, layar penuh). */
.vd-sentuh{position:absolute; left:0; right:0; top:64px; bottom:64px; z-index:2; cursor:pointer}
.vd-atas{position:absolute; left:0; right:0; top:0; z-index:3; padding:14px 12px; display:flex; align-items:center;
  justify-content:space-between; pointer-events:none}
.vd-atas > *{pointer-events:auto}
.vd-hitung{font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums}
.vd-hitung:empty{display:none}
.vd-bulat{width:48px; height:48px; border-radius:999px; background:rgba(0,0,0,.45); display:flex; align-items:center;
  justify-content:center; flex:none; border:0; padding:0; color:#FFFFFF; cursor:pointer}
.vd-kembali{width:44px; height:44px}
.vd-bulat-wa{background:#15803D}
.vd-bulat:focus-visible,.vd-aksi:focus-visible{outline:2px solid #FFFFFF; outline-offset:3px}
.vd-info{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:48px 16px 40px;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0)); pointer-events:none}
.vd-merek{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; font-weight:700}
.vd-merek img{width:32px; height:32px; border-radius:9px; object-fit:contain; background:#FFFFFF; max-width:none}
.vd-nama{font-size:17px; font-weight:800; line-height:1.3; margin-bottom:6px; overflow-wrap:anywhere}
.vd-ringkas{font-size:13px; color:#D5DBE6; line-height:1.5; overflow-wrap:anywhere}
.vd-petunjuk{display:none}
.vd-aksi-kolom{display:flex; flex-direction:column; gap:18px; align-items:center; align-self:flex-end;
  margin-bottom:12vh}
.vd-aksi{display:flex; flex-direction:column; align-items:center; gap:4px; font:600 11px/1.3 'Plus Jakarta Sans',system-ui,sans-serif;
  color:#FFFFFF; background:none; border:0; padding:0; cursor:pointer; text-align:center}
.vd-aksi[hidden]{display:none}
.vd-aksi:hover .vd-bulat{filter:brightness(1.25)}
.vd-geser-lebar{display:flex; flex-direction:column; gap:10px; margin-top:8px}
/* Desktop: kolom tombol di LUAR video (latar hitam) → bulatan putih tipis supaya terlihat. */
.vd-aksi-kolom .vd-bulat{background:rgba(255,255,255,.14)}
.vd-aksi-kolom .vd-bulat-wa{background:#15803D}
.vd-pesan{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:62; background:#FFFFFF; color:#0F172A;
  font-size:14px; font-weight:700; padding:10px 16px; border-radius:10px; opacity:0; transition:opacity .2s; pointer-events:none}
.vd-pesan.tampil{opacity:1}

/* HP (mockup HP-Putar): pemutar penuh layar, tombol di kanan di atas video, info di bawah. */
@media (max-width:640px), (max-aspect-ratio:3/4){
  .vd-panggung{padding:0; display:block}
  .vd-bingkai{position:absolute; inset:0; height:auto; width:auto; max-width:none; aspect-ratio:auto; border-radius:0}
  .vd-info{right:70px; padding:48px 16px 28px; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
  .vd-aksi-kolom{position:absolute; right:10px; bottom:170px; z-index:4; margin:0}
  .vd-aksi-kolom .vd-bulat{background:rgba(0,0,0,.45)}
  .vd-aksi-kolom .vd-bulat-wa{background:#15803D}
  .vd-geser-lebar{display:none}
  .vd-petunjuk{position:absolute; left:0; right:0; bottom:6px; z-index:3; display:flex; justify-content:center;
    align-items:center; gap:4px; font-size:11px; color:#C2C9D6; pointer-events:none}
  .vd-sentuh{bottom:72px}
}
@media (prefers-reduced-motion:reduce){ .vd-pesan{transition:none} }