/* Video panduan: pemutar ber-poster (landing & /panduan). Memakai token warna halaman. */
/* bingkai pemutar: poster (sebelum diputar) lalu iframe/video di ruang yang sama */
.vid-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--green-950); isolation: isolate;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -26px rgba(0,0,0,.65); }
.vid-player.sm { border-radius: 8px; }
.vid-cover { position: absolute; inset: 0; display: block; text-decoration: none; color: #fff; }
.vid-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.vid-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,33,15,0) 45%, rgba(6,33,15,.55) 78%, rgba(6,33,15,.85) 100%); transition: opacity .4s ease; }
.vid-cta { position: absolute; left: 4.5%; bottom: 7%; display: flex; align-items: center; gap: 14px; }
.vid-play { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--gold-500); display: grid; place-items: center;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.55); transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease; }
.vid-play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(220,187,90,.55); opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .3s ease; }
.vid-play svg { width: 24px; height: 24px; fill: var(--green-950); margin-left: 3px; }
.vid-cta-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.vid-cta-txt b { font: 700 16px/1 var(--sans); letter-spacing: .02em; color: #fff; }
.vid-cta-txt span { font: 500 13px/1 var(--sans); color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.vid-cover:hover img, .vid-cover:focus-visible img { transform: scale(1.035); filter: brightness(1.06); }
.vid-cover:hover .vid-play, .vid-cover:focus-visible .vid-play { transform: scale(1.08); background: var(--gold-400); }
.vid-cover:hover .vid-play::after, .vid-cover:focus-visible .vid-play::after { opacity: 1; transform: scale(1); animation: vid-pulse 1.6s ease-out infinite; }
.vid-cover:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; border-radius: inherit; }
@keyframes vid-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.vid-player.sm .vid-cta { gap: 10px; }
.vid-player.sm .vid-play { width: 46px; height: 46px; }
.vid-player.sm .vid-play svg { width: 18px; height: 18px; margin-left: 2px; }
.vid-player.sm .vid-cta-txt b { font-size: 14px; }
.vid-player.sm .vid-cta-txt span { font-size: 12px; }
@media (max-width: 600px) {
    .vid-player .vid-play { width: 46px; height: 46px; }
    .vid-player .vid-play svg { width: 18px; height: 18px; margin-left: 2px; }
    .vid-player .vid-cta { gap: 10px; bottom: 6%; }
    .vid-player .vid-cta-txt b { font-size: 14px; }
    .vid-player .vid-cta-txt span { font-size: 12px; }
}
.vid-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; display: block; }
.vid-player.is-playing { box-shadow: 0 0 0 1px rgba(201,160,50,.45), 0 24px 48px -26px rgba(0,0,0,.65); }
.vid-player video.vid-frame { cursor: pointer; }

/* bilah kontrol MP4 lokal, di bawah bingkai agar caption di video tidak tertutup */
/* MP4 tanpa kontrol: saat dijeda tampil ikon putar di tengah (tidak menangkap klik) */
.vid-player.is-paused::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none;
    background: var(--gold-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2306210f' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.55); }
.vid-player.sm.is-paused::after { width: 46px; height: 46px; margin: -23px 0 0 -23px; background-size: 18px; }
.vid-player video.vid-frame:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; }
.vid-tag { align-self: flex-start; font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green-950); background: var(--gold-400); padding: 5px 7px; border-radius: 3px; }

/* landing: band hijau */
.s-video { background: radial-gradient(120% 90% at 85% 0%, var(--green-800) 0%, var(--green-900) 45%, var(--green-950) 100%); color: #fff; }
.s-video .s-head .eyebrow { color: var(--gold-400); }
.s-video .s-head .eyebrow .line { background: var(--gold-500); }
.s-video .s-head h2 { color: #fff; }
.s-video .s-head h2 em { color: var(--gold-400); }
.s-video .s-head p { color: rgba(255,255,255,.74); }
.vid-stack { display: flex; flex-direction: column; gap: 56px; }
.vid-feat { max-width: 960px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.vid-feat-meta { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.vid-feat-meta .vid-tag { align-self: center; }
.vid-feat h3 { font: 500 28px/1.2 var(--serif); margin: 0; color: #fff; }
.vid-feat h3 em { color: var(--gold-400); }
.vid-feat p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.74); }
.vid-more { display: flex; flex-direction: column; gap: 18px; }
.vid-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.vid-more-head h4 { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.vid-more-head a { font-size: 14px; font-weight: 600; color: var(--gold-400); text-decoration: none; }
.vid-more-head a:hover { text-decoration: underline; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.vid-card { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.03); min-width: 0; }
.vid-card .meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vid-card h4 { font: 600 19px/1.25 var(--serif); margin: 0; color: #fff; }
.vid-card p { margin: 0; font-size: 14px; color: rgba(255,255,255,.7); }

/* /panduan: kartu di artikel */
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.pv { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 16px; background: var(--paper); min-width: 0; }
.pv .vid-tag { background: var(--gold-100); }
.pv h3 { margin: 0; }
.pv p { margin: 0; font-size: 14px; color: var(--ink-mute); }
@media (max-width: 620px) { .pv-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .vid-cover img, .vid-play, .vid-play::after { transition: none; animation: none !important; } }