/*
 * Materi video: tayangan (berkas atau sematan YouTube), daftar bab, dan interaksi
 * di tengah tayangan.
 *
 * Tata letaknya dua kolom di layar lebar — panggung di kiri, daftar bab di kanan —
 * dan menumpuk di ponsel. Panggungnya dikunci pada rasio 16:9 supaya tinggi halaman
 * tidak melompat saat sematan YouTube selesai dimuat.
 *
 * Isi berkas, berurutan:
 *   1. Kerangka & panggung
 *   2. Bilah kendali
 *   3. Sisi: daftar bab
 *   4. Kotak interaksi
 *   5. Lima jenis interaksi
 *   6. Mode baca
 *   7. Ponsel & kurangi-gerakan
 */

/* ── 1. Kerangka & panggung ───────────────────────────────────────────── */
.pm-panggung:has(.vid) { scrollbar-gutter: stable; }
.vid { display: flex; flex-direction: column; gap: 24px; min-height: 0; min-width: 0; width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 32px 40px; }
.vid [hidden] { display: none !important; }
.vid-kepala { display: grid; gap: 6px; }
.vid-kepala .pm-label { color: var(--utama); font-size: 10px; letter-spacing: .12em; }
.vid-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.vid-meta span { padding: 5px 10px; border: 1px solid var(--garis); border-radius: 7px; background: var(--permukaan); color: var(--tinta-2); font-size: 10px; font-weight: 550; }
.vid-kepala h2 { font-size: clamp(20.5px, 2.3vw, 28px); line-height: 1.25; letter-spacing: -.035em; }
.vid-kepala .kecil { color: var(--tinta-3); }

.vid-badan { display: grid; gap: 24px; min-height: 0; min-width: 0; }
@media (min-width: 980px) {
  .vid-badan { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); align-items: start; }
}

.vid-panggung { display: grid; gap: 14px; min-width: 0; align-content: start; }

/* Player tetap memenuhi kolom, termasuk saat interaksi terbuka. */
.vid-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  background: #0d1416;
  box-shadow: 0 1px 2px rgba(30, 33, 36, .06), 0 10px 30px rgba(30, 33, 36, .12);
}
.vid-el { width: 100%; height: 100%; object-fit: contain; background: #0d1416; display: block; cursor: pointer; }
.vid-yt, .vid-yt-slot, .vid-yt iframe { width: 100%; height: 100%; border: 0; display: block; }

.vid-kapsi {
  min-height: 40px;
  padding: 12px 16px;
  border-left: 3px solid var(--utama);
  border-radius: 12px;
  background: var(--permukaan-2);
  color: var(--tinta-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.vid-kapsi:empty { display: none; }

/* ── 2. Bilah kendali ─────────────────────────────────────────────────── */
.vid-bilah {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
}
.vid-tombol {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--permukaan-2);
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.vid-tombol:hover { background: var(--permukaan-3); }
.vid-tombol.utama { background: var(--utama); color: #fff; }
.vid-tombol.utama:hover { background: var(--utama-gelap); }
.vid-waktu { font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.vid-jalur {
  position: relative;
  flex: 1;
  height: 8px;
  min-width: 60px;
  border-radius: 999px;
  background: var(--permukaan-3);
  cursor: pointer;
}
.vid-jalur:focus-visible { outline: 2px solid var(--utama); outline-offset: 3px; }
.vid-isi {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--utama);
}
.vid-penanda { position: absolute; inset: 0; pointer-events: none; }
.vid-titik {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid var(--permukaan);
  background: var(--emas);
}
.vid-titik.dijawab { background: #1b9e6a; }

/* ── 3. Sisi: daftar bab ──────────────────────────────────────────────── */
.vid-sisi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border-radius: 18px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
}
.vid-sisi .kecil { color: var(--tinta-3); font-size: 11.5px; }

.vid-bab {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  max-height: 420px;
  scrollbar-width: thin;
  scrollbar-color: var(--garis-kuat) transparent;
  overflow-y: auto;
}
.vid-bab-item {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--permukaan-2);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.vid-bab-item:hover { background: var(--permukaan-3); }
.vid-bab-item[aria-current="true"] { background: var(--utama-muda); border-color: var(--utama); }
.vid-bab-item[aria-current="true"] b { color: var(--utama-gelap); }
.vid-sisi .pm-fb-sumber { border-top: 1px solid var(--garis); padding-top: 14px; margin: 0; font-size: 10px; line-height: 1.6; }
.vid-sisi .lms-label { font-size: 14px; font-weight: 600; }
.vid-progres { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--garis); }
.vid-progres-label { font-size: 11px; font-weight: 550; color: var(--utama-gelap); }
.vid-progres progress { width: 100%; height: 6px; accent-color: var(--utama); }
.vid-bab-waktu { font-size: 10.5px; font-weight: 600; color: var(--utama); font-variant-numeric: tabular-nums; padding-top: 1px; }
.vid-bab-item b { display: block; font-size: 12px; font-weight: 550; line-height: 1.35; }
.vid-bab-item small { display: block; color: var(--tinta-3); font-size: 10.5px; line-height: 1.45; margin-top: 2px; }

.vid-ragam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.vid-ragam li {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--utama-muda);
  color: var(--utama-gelap);
  font-size: 10px;
  font-weight: 550;
}

.vid-selesai { margin-top: auto; }

/* ── 4. Kotak interaksi ───────────────────────────────────────────────── */
.vid-kuis {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border-radius: 16px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-top: 3px solid var(--emas);
  box-shadow: 0 6px 24px rgba(30, 33, 36, .04);
}
.vid-kuis-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--catatan-tinta);
}
.vid-kuis h3 { font-size: 16.5px; font-weight: 550; line-height: 1.4; letter-spacing: -.01em; }
.vid-kuis-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.vid-kuis-aksi:empty { display: none; }

/* ── 5. Lima jenis interaksi ──────────────────────────────────────────── */

.vid-kuis .pm-opsi { border-width: 1px; border-radius: 10px; padding: 12px 14px; font-size: 13px; min-height: 52px; }
.vid-kuis .pm-opsi:active:not(:disabled) { transform: none; border-width: 1px; }
.vid-kuis .pm-fb-opsi { counter-reset: pilihan; gap: 8px; }
.vid-kuis .pm-fb-opsi .pm-opsi::before { counter-increment: pilihan; content: counter(pilihan, upper-alpha); display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid var(--garis); border-radius: 7px; color: var(--tinta-3); font-size: 10px; font-weight: 600; }
.vid-kuis .pm-fb-status:empty { display: none; }
.vid button:focus-visible, .vid a:focus-visible { outline: 2px solid var(--utama); outline-offset: 3px; }

/* Tepat atau keliru */
.vid-tk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vid-tk-tombol { text-align: center; font-weight: 550; }

/* Melengkapi kalimat */
.vid-isian { font-size: 14px; line-height: 2; color: var(--tinta); }
.vid-isian-kotak {
  min-width: 140px;
  padding: 5px 11px;
  margin: 0 3px;
  border: 0;
  border-bottom: 2.5px solid var(--utama);
  border-radius: 8px 8px 0 0;
  background: var(--utama-muda);
  font: inherit;
  font-weight: 550;
  color: var(--tinta);
}
.vid-isian-kotak:focus { outline: 2px solid var(--utama); outline-offset: 1px; }
.vid-isian-kotak.cocok { background: #daf3e8; border-bottom-color: #1b9e6a; }
.vid-isian-kotak.belum { background: #fdece7; border-bottom-color: var(--koral); }

/* Pemetaan proses bisnis */
.vid-urut { display: grid; gap: 9px; }
.vid-urut-kolam { display: grid; gap: 7px; }
@media (min-width: 620px) { .vid-urut-kolam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vid-urut-kartu {
  padding: 10px 13px;
  border: 1.5px solid var(--garis-kuat);
  border-radius: 12px;
  background: var(--permukaan);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform .14s, border-color .14s;
}
.vid-urut-kartu:hover { border-color: var(--utama); transform: translateY(-1px); }
.vid-urut-kartu.dipakai { opacity: .4; cursor: default; border-style: dashed; }
.vid-urut-kartu.belum { border-color: var(--koral); background: #fdece7; }
.vid-urut-hasil {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 22px;
  counter-reset: none;
}
.vid-urut-hasil li {
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--utama-muda);
  color: var(--utama-gelap);
  font-size: 12px;
  font-weight: 550;
}
.vid-urut-hasil:empty { display: none; }

/* Word search ringkas */
.vid-ck { display: grid; gap: 9px; }
.vid-ck-badan { display: grid; gap: 12px; align-items: start; }
@media (min-width: 620px) { .vid-ck-badan { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
.vid-ck-grid { max-width: 320px; margin: 0; }
.vid-ck-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: start;
}
.vid-ck-daftar li {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--permukaan-3);
  color: var(--tinta-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.vid-ck-daftar li.ketemu { color: #fff; text-decoration: line-through; }

/* ── 6. Mode baca ─────────────────────────────────────────────────────── */
.vid-baca {
  display: grid;
  gap: 9px;
  align-content: center;
  justify-items: start;
  height: 100%;
  padding: 20px 22px;
  background: linear-gradient(160deg, #0a3d43, #0f6e75);
  color: #fff;
  overflow-y: auto;
}
.vid-baca-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.vid-baca > p { color: rgba(255, 255, 255, .85); font-size: 12.5px; line-height: 1.6; max-width: 58ch; margin: 0; }
.vid-baca .tombol-kedua { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); color: #fff; }
.vid-baca-isi { display: grid; gap: 5px; margin-top: 4px; }
.vid-baca-isi h3 { font-size: 15px; font-weight: 550; color: #ffe3b0; }
.vid-baca-isi p { color: rgba(255, 255, 255, .88); font-size: 12.5px; line-height: 1.6; margin: 0; max-width: 58ch; }

/* ── 7. Ponsel & kurangi-gerakan ──────────────────────────────────────── */
@media (max-width: 720px) {
  .vid { padding: 20px 16px 28px; gap: 20px; }
  .vid-kepala h2 { font-size: 21.5px; }
  .vid-sisi { padding: 16px; }
  .vid-bilah { flex-wrap: wrap; gap: 8px; }
  .vid-waktu { font-size: 10px; }
  .vid-isian-kotak { max-width: 100%; width: 160px; }
  .vid-bab { max-height: 210px; }
  .vid-kuis { padding: 13px; }
  .vid-tk { grid-template-columns: 1fr; }
  .vid-isian { font-size: 13px; }
  .vid-isian-kotak { min-width: 110px; }
  .vid-ck-grid { max-width: 100%; }
  .vid-slot, .vid:has(.vid-kuis:not([hidden])) .vid-slot { max-height: none; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vid-urut-kartu { transition: none; }
  .vid-urut-kartu:hover { transform: none; }
}