/* ============================================================
   QUIZ — modal latihan soal
   ============================================================ */

.quiz-open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(79, 216, 232, 0.4);
  background: rgba(79, 216, 232, 0.1);
  color: #c9f6fd;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.quiz-open:hover {
  background: rgba(79, 216, 232, 0.18);
  border-color: rgba(79, 216, 232, 0.7);
  transform: translateY(-1px);
}
.quiz-open svg { width: 14px; height: 14px; }

.unit-head .quiz-open { margin-top: 0.9rem; }

.quiz-open.top {
  padding: 0.4rem 0.75rem;
  font-size: 0.74rem;
}

/* ---------- overlay ---------- */
.quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(4, 6, 13, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.quiz-modal.open { display: flex; }

.quiz-panel {
  position: relative;
  width: min(100%, 880px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0d1426 0%, #080c18 100%);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.quiz-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.quiz-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(79, 216, 232, 0.35);
  background: rgba(79, 216, 232, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.quiz-count { font-size: 0.8rem; color: var(--ink-3); font-family: var(--font-mono); }
.quiz-score { margin-left: auto; font-size: 0.78rem; color: var(--ink-3); }
.quiz-score b { color: var(--green); font-family: var(--font-mono); }
.quiz-close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.quiz-close:hover { color: #fff; border-color: var(--line-strong); background: rgba(255,255,255,.05); }

.quiz-progress { height: 2px; background: rgba(255, 255, 255, 0.06); }
.quiz-progress i {
  display: block; height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width 0.35s ease;
}

.quiz-body {
  padding: 1.35rem 1.15rem 1.15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

.quiz-stem {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
  margin-bottom: 1.15rem;
}
.quiz-stem .mono { font-size: 0.88em; }

.quiz-opts { display: grid; gap: 0.55rem; }
.quiz-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.72rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(18, 26, 48, 0.55);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--line-strong); background: rgba(30, 42, 72, 0.6); }
.quiz-opt .key {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-4);
  margin-top: 1px;
}
.quiz-opt.correct {
  border-color: rgba(92, 225, 166, 0.65);
  background: rgba(92, 225, 166, 0.12);
  color: #d8fbec;
}
.quiz-opt.correct .key { border-color: rgba(92,225,166,.6); color: var(--green); }
.quiz-opt.wrong {
  border-color: rgba(255, 111, 145, 0.6);
  background: rgba(255, 111, 145, 0.1);
  color: #ffd6e0;
}
.quiz-opt.wrong .key { border-color: rgba(255,111,145,.55); color: var(--rose); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct::after { content: '✓'; margin-left: auto; color: var(--green); font-weight: 700; padding-left: 0.4rem; }
.quiz-opt.wrong::after { content: '✕'; margin-left: auto; color: var(--rose); font-weight: 700; padding-left: 0.4rem; }

/* ---------- answer panel ---------- */
.quiz-answer {
  margin-top: 1.15rem;
  border: 1px solid rgba(92, 225, 166, 0.28);
  background: rgba(92, 225, 166, 0.05);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  animation: quizIn 0.3s ease both;
}
.quiz-answer[hidden] { display: none; }
@keyframes quizIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.qa-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.qa-correct { font-size: 0.9rem; color: #d8fbec; font-weight: 600; margin-bottom: 0.5rem; }
.qa-why { font-size: 0.845rem; line-height: 1.62; color: var(--ink-2); }
.qa-why b { color: var(--ink); }

/* ---------- viz ---------- */
.qa-viz { margin-top: 0.85rem; }
.qa-viz svg { width: 100%; height: auto; display: block; }
.qa-viz .qv-cap {
  font-size: 0.755rem;
  color: var(--ink-4);
  line-height: 1.55;
  margin-top: 0.45rem;
}

.qv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.qv-table th, .qv-table td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.55rem;
  text-align: left;
}
.qv-table th {
  background: rgba(140, 165, 220, 0.08);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.qv-table td.hl {
  background: rgba(92, 225, 166, 0.16);
  color: #d8fbec;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(92, 225, 166, 0.5);
}

.qv-bars { display: grid; gap: 0.35rem; }
.qv-bar-row { display: grid; grid-template-columns: 88px 1fr 54px; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.qv-bar-row span:first-child { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.7rem; }
.qv-bar-track { height: 14px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
.qv-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(79,216,232,.55), rgba(79,216,232,.85)); border-radius: 4px; }
.qv-bar-row.hl .qv-bar-fill { background: linear-gradient(90deg, rgba(92,225,166,.65), rgba(92,225,166,.95)); }
.qv-bar-row.hl span:first-child, .qv-bar-row.hl span:last-child { color: #b8f5dc; font-weight: 600; }
.qv-bar-row span:last-child { text-align: right; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }

.qv-steps { display: grid; gap: 0.32rem; }
.qv-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.775rem;
  color: var(--ink-3);
  padding: 0.36rem 0.55rem;
  border-radius: 7px;
  border: 1px solid transparent;
}
.qv-step i {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-style: normal;
  color: var(--ink-4);
}
.qv-step.hl {
  border-color: rgba(92, 225, 166, 0.4);
  background: rgba(92, 225, 166, 0.09);
  color: #d8fbec;
  font-weight: 600;
}
.qv-step.hl i { border-color: rgba(92,225,166,.6); color: var(--green); background: rgba(92,225,166,.12); }

.qv-grid { display: inline-grid; gap: 3px; }
.qv-cell {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: rgba(140, 165, 220, 0.1);
  border: 1px solid var(--line);
}
.qv-cell.hl { background: rgba(92, 225, 166, 0.35); border-color: rgba(92, 225, 166, 0.7); }
.qv-cell.bad { background: rgba(255, 111, 145, 0.3); border-color: rgba(255, 111, 145, 0.6); }

/* ---------- footer ---------- */
.quiz-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.15rem;
  border-top: 1px solid var(--line);
  background: rgba(8, 12, 24, 0.7);
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.qbtn {
  font-family: var(--font-sans);
  font-size: 0.79rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
}
.qbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }
.qbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.qbtn.primary {
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  color: #061018;
  border-color: transparent;
}
.qbtn.primary:hover:not(:disabled) { filter: brightness(1.08); color: #061018; }
.qbtn.ghost { border-style: dashed; }
.quiz-foot .spacer { flex: 1 1 auto; }

/* ---------- summary ---------- */
.quiz-summary { text-align: center; padding: 1.6rem 0.5rem; }
.quiz-summary .big {
  font-family: var(--font-disp);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.quiz-summary p { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 1.1rem; }
.quiz-summary .detail { font-size: 0.8rem; color: var(--ink-3); }

@media (max-width: 720px) {
  .quiz-modal { padding: 0; }

  /* tinggi mengikuti viewport dinamis (URL bar HP), bukan 100vh statis */
  .quiz-panel {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  @supports (height: 100dvh) {
    .quiz-panel { height: 100dvh; max-height: 100dvh; }
  }

  .quiz-body { padding: 0.9rem 0.9rem 1rem; }

  /* header 2 baris rapi: tag + tutup, lalu counter + skor */
  .quiz-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.6rem;
    padding: 0.6rem 0.9rem 0.55rem;
  }
  .quiz-tag {
    grid-column: 1; grid-row: 1;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    font-size: 0.58rem;
    padding: 0.2rem 0.4rem;
  }
  .quiz-close { grid-column: 2; grid-row: 1; width: 34px; height: 34px; }
  .quiz-count { grid-column: 1; grid-row: 2; font-size: 0.72rem; }
  .quiz-score {
    grid-column: 2; grid-row: 2;
    margin-left: 0;
    justify-self: end;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* footer: tombol jawaban selebar baris, lalu Sebelumnya | Berikutnya */
  .quiz-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .quiz-foot .spacer { display: none; }
  #qreveal,
  #qrestart,
  #qclose2,
  #qpclose { grid-column: 1 / -1; }
  #qprev { grid-column: 1; }
  #qnext { grid-column: 2; }

  .qv-bar-row { grid-template-columns: 64px 1fr 46px; }
  .quiz-stem { font-size: 0.95rem; margin-bottom: 0.9rem; }
  .quiz-opt {
    font-size: 0.86rem;
    padding: 0.72rem 0.75rem;
    min-height: 46px;
    align-items: center;
  }
  .quiz-opt .key { width: 24px; height: 24px; font-size: 0.72rem; }
  .qbtn {
    min-height: 44px;
    font-size: 0.82rem;
    padding: 0.55rem 0.6rem;
    white-space: nowrap;
  }
  .qa-why { font-size: 0.83rem; }
  .qv-table { font-size: 0.74rem; }
  .qv-table th, .qv-table td { padding: 0.36rem 0.45rem; }
}

/* layar sangat sempit: biarkan judul section membungkus, jangan dipotong */
@media (max-width: 400px) {
  .quiz-tag {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }
}

/* ---------- pemilih materi ---------- */
.qp-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.qp-item {
  display: grid;
  grid-template-columns: 42px 1fr auto 20px;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  text-align: left;
  background: rgba(12, 18, 33, 0.72);
  border: 1px solid rgba(120, 140, 190, 0.18);
  border-radius: 12px;
  color: var(--fg, #e8ecf8);
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.qp-item:hover,
.qp-item:focus-visible {
  border-color: rgba(79, 216, 232, 0.55);
  background: rgba(79, 216, 232, 0.08);
  transform: translateX(2px);
  outline: none;
}
.qp-num {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan, #4fd8e8);
  opacity: 0.9;
}
.qp-name { font-weight: 550; }
.qp-count {
  font-size: 0.74rem;
  color: var(--muted, #8492b4);
  white-space: nowrap;
}
.qp-go { color: var(--cyan, #4fd8e8); text-align: right; }
.qp-hint {
  font-size: 0.72rem;
  color: var(--muted, #8492b4);
  max-width: 62%;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .qp-item {
    grid-template-columns: 34px 1fr auto;
    gap: 0.55rem;
    padding: 0.8rem 0.75rem;
    min-height: 48px;
    font-size: 0.86rem;
  }
  .qp-go { display: none; }
  .qp-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-answer { animation: none; }
  .quiz-progress i { transition: none; }
}