/* ==========================================================================
   course.faqih.id — gaya isi halaman (area tengah dan panel kanan)
   Token warna/font, sidebar, bilah atas, dan .btn berasal dari
   https://slides.faqih.id/shared/chrome.css yang dimuat sebelum file ini.
   ========================================================================== */

/* --- Kerangka ------------------------------------------------------------- */

.page {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--bg);
  overflow-y: auto;
}

.lesson {
  flex: 1;
  min-width: 0;
  padding: 24px 24px 20px;
}

/* Video dibuat sebesar mungkin seperti panggung di slides: selebar kolom,
   tapi tidak lebih tinggi dari layar. Video 16:9, jadi lebar maksimumnya
   = (tinggi layar - ruang di luar video) x 16/9. Ruang di luar video:
   bilah atas 57 + padding 24+20 + baris judul (dan tombol Lanjut) 34 +
   jarak 16 ≈ 151px. Deskripsi webinar boleh di bawah garis layar (digulir). Course dan webinar
   memakai angka yang sama supaya ukuran videonya persis sama.
   Batas bawah 480px supaya video tidak jadi mungil di layar yang pendek. */
.lesson-body {
  --outside-video: 152px;
  max-width: max(480px, calc((100vh - var(--outside-video)) * 16 / 9));
  max-width: max(480px, calc((100dvh - var(--outside-video)) * 16 / 9));
  margin: 0 auto;
}

/* Course: kolom tengah dan panel kanan menggulir sendiri-sendiri */
.page-course {
  overflow: hidden;
}

.page-course .lesson {
  overflow-y: auto;
}

/* --- Baris judul ---------------------------------------------------------- */

.lesson-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}

.lesson h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* --- Video ---------------------------------------------------------------- */

.video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--elevated);
  overflow: hidden;
}

.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Poster sebelum diputar: thumbnail YouTube + tombol play sendiri */
.video-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.72);
  transition: background 0.2s, transform 0.2s;
}

.video-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  fill: #fff;
  stroke: #fff;
  stroke-width: 1.5;
}

.video-poster:hover img {
  opacity: 0.88;
}

.video-poster:hover .video-play {
  background: var(--accent);
  transform: scale(1.06);
}

.video-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.video-empty svg {
  display: block;
  width: 34px;
  height: 34px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.4;
}

.video-empty p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.description {
  max-width: 68ch;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--secondary);
}

/* --- Tombol Lanjut (di kanan baris judul) ------------------------------- */

.btn-next {
  flex-shrink: 0;
  color: var(--text);
}

.btn-next span {
  display: flex;
}

/* --- Panel kanan: All Section --------------------------------------------- */

.outline {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--elevated);
  border-left: 1px solid var(--border);
  padding: 0 12px 20px;
}

.outline-head {
  margin: 0 -12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.outline-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.outline-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.outline-label {
  margin: 16px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.outline-session h3 {
  margin: 0;
  padding: 12px 12px 6px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--secondary);
}

.outline-session h3 span {
  font-family: var(--sans);
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
  margin-right: 2px;
}

.outline-session ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Serupa item sidebar supaya sorotannya terasa satu keluarga */
.outline-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--secondary);
  text-decoration: none;
  transition:
    color 0.15s,
    background 0.15s;
}

.outline-item svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  transform: translateY(1px);
}

.outline-item:hover {
  background: var(--bg);
  color: var(--text);
}

.outline-item[aria-current="page"] {
  background: var(--bg);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.outline-item[aria-current="page"] svg {
  stroke: var(--accent);
  fill: var(--accent);
}

/* --- Responsif ------------------------------------------------------------ */

/* Layar sempit: panel kanan turun ke bawah video, seluruh halaman menggulir */
@media (max-width: 1024px) {
  .page-course {
    flex-direction: column;
    overflow-y: auto;
  }

  .page-course .lesson {
    flex: none;
    overflow: visible;
  }

  .outline {
    width: auto;
    flex-shrink: 0;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 720px) {
  .lesson {
    padding: 20px 16px 28px;
  }

  .lesson h1 {
    font-size: 22px;
  }
}