/* Komponen video bersama: kartu portrait, baris geser, pemutar. Dipakai beranda dan /video. */

/* Warna sampul sementara untuk video tanpa poster/file */
[data-tone="0"] { background: linear-gradient(165deg, #1f5a4c, #0a1714 70%); }
[data-tone="1"] { background: linear-gradient(165deg, #2c3470, #0c0e1c 70%); }
[data-tone="2"] { background: linear-gradient(165deg, #5a2650, #170a15 70%); }
[data-tone="3"] { background: linear-gradient(165deg, #6b4a1c, #1a1208 70%); }
[data-tone="4"] { background: linear-gradient(165deg, #2c4a63, #0b131a 70%); }
[data-tone="5"] { background: linear-gradient(165deg, #3d5a24, #10170a 70%); }

.ph { display: grid; place-items: center; }
.ph::before {
  content: "▶"; display: grid; place-items: center; width: 44px; height: 44px; padding-left: 3px;
  border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%;
  font-size: 14px; color: rgba(255, 255, 255, .55);
}

/* ---- Baris geser ---- */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 10px 0 18px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail-btn {
  position: absolute; top: 10px; bottom: 18px; z-index: 3; width: 52px;
  border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.rail-btn.prev { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .75), transparent); border-radius: 8px 0 0 8px; }
.rail-btn.next { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .75), transparent); border-radius: 0 8px 8px 0; }
.rail-wrap:hover .rail-btn, .rail-btn:focus-visible { opacity: 1; }
.rail-btn[hidden] { display: none; }
@media (hover: none) { .rail-btn { display: none; } }

/* ---- Kartu portrait 9:16 ---- */
.pcard {
  position: relative; flex: 0 0 auto; width: clamp(132px, 15vw, 188px); aspect-ratio: 9 / 16;
  padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #111; color: #fff; text-align: left; scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pcard:hover, .pcard:focus-visible { transform: scale(1.05); z-index: 2; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.thumb, .thumb > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb > .ph { display: grid; }

.pc-info {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 5px;
  padding: 48px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}
.pc-title {
  font: 600 13px/1.25 var(--sans);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-meta { font: 400 11px/1 var(--mono); color: rgba(255, 255, 255, .7); }

.badge-contoh {
  position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 6px; border-radius: 3px;
  font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink);
}

/* ---- Pemutar layar penuh ---- */
.viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #eef1f3;
  --surface: #111418; --ink: #eef1f3; --dim: #8e979f; --line: #262c33;
  --accent: #7cf5c4; --accent-ink: #07080a;
}
.viewer::backdrop { background: rgba(3, 4, 5, .94); }
html:has(.viewer[open]) { overflow: hidden; }

.viewer-in { height: 100%; display: flex; align-items: center; justify-content: center; gap: 36px; padding: 24px 96px 24px 24px; }
.viewer-stage {
  position: relative; height: min(100%, 90vh); aspect-ratio: 9 / 16; max-width: 100%;
  border-radius: 12px; overflow: hidden; background: #000;
}
.viewer-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage-kosong { display: grid; place-items: center; height: 100%; font: 400 12px/1 var(--mono); color: rgba(255, 255, 255, .6); }

.viewer-info { width: 340px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.viewer-info h2 { font: 600 24px/1.2 var(--sans); letter-spacing: -.01em; }
.viewer-info .vmeta, .viewer-info .urutan { font: 400 12px/1.4 var(--mono); color: var(--dim); }
.viewer-info .ringkas { color: var(--dim); }
.viewer-info .urutan { margin-top: 6px; }

.vbtn {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 18px;
}
.vbtn { border: 0; }
.vbtn:hover:not(:disabled) { color: var(--accent); }
.vbtn:disabled { opacity: .3; cursor: default; }
.vbtn.close { position: absolute; top: 16px; right: 16px; }
.viewer-nav { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 760px) {
  .viewer-in { display: block; overflow-y: auto; padding: 0; background: #07080a; }
  .viewer-stage { width: 100%; height: 78dvh; aspect-ratio: auto; border-radius: 0; }
  .viewer-info { width: auto; max-height: none; overflow: visible; padding: 20px 16px 40px; }
  .vbtn.close { top: 12px; right: 12px; background: rgba(0, 0, 0, .55); }
  .viewer-nav { top: 39dvh; right: 12px; }
  .viewer-nav .vbtn { background: rgba(0, 0, 0, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .rail-btn { transition: none; }
}