/* ==================================================================
   ALUR UJIAN — desain portal ujian berbasis komputer
   ================================================================== */

/* ---------- Gerbang ujian (setup) ---------- */
.exam-gate {
  position: relative;
  min-height: calc(100vh - 64px);
  padding: 48px 20px 72px;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, #eef2ff 0%, transparent 60%),
    radial-gradient(900px 460px at 92% 0%, #ecfeff 0%, transparent 58%),
    var(--bg);
}
.exam-gate__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(700px 380px at 50% 0%, #000 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(700px 380px at 50% 0%, #000 15%, transparent 78%);
}
.exam-gate__inner { position: relative; max-width: 1000px; margin: 0 auto; }

.exam-gate__head { text-align: center; margin-bottom: 34px; }
.exam-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-dark);
  background: rgba(255,255,255,.75);
  border: 1px solid #e0e7ff;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  backdrop-filter: blur(6px);
}
.exam-chip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.16);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,.06); }
}
.exam-gate__title {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.15; letter-spacing: -.025em;
  margin: 16px 0 8px; font-weight: 800;
  background: linear-gradient(135deg, #0f172a 30%, #4338ca 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.exam-gate__sub { color: var(--muted); margin: 0; font-size: .95rem; }

.exam-gate__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 22px;
  align-items: start;
}

/* ---------- Panel formulir ---------- */
.exam-panel {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 26px 60px -34px rgba(15,23,42,.32);
}
.exam-panel__head { margin-bottom: 22px; }
.exam-panel__title { margin: 0 0 4px; font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }
.exam-panel__desc { margin: 0; font-size: .84rem; color: var(--muted); }
.exam-panel__note {
  margin: 14px 0 0; font-size: .74rem; line-height: 1.5;
  color: var(--muted); text-align: center;
}

/* ---------- Field ---------- */
.field { margin-bottom: 16px; }
.field__label {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .01em; color: var(--ink-2); margin-bottom: 7px;
}
.field__wrap { position: relative; }
.field__input {
  width: 100%;
  font: inherit; font-size: .93rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: #a3aec0; }
.field__input:hover { border-color: #cbd5e1; }
.field__input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79,70,229,.11);
}
.field__input.is-error {
  border-color: var(--red);
  background: #fffafa;
  box-shadow: 0 0 0 4px rgba(220,38,38,.08);
}
.field__wrap--select::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.field__wrap--select .field__input { padding-right: 38px; cursor: pointer; }

.err-inline {
  font-size: .76rem; line-height: 1.45; font-weight: 600;
  color: var(--red); margin-top: 6px;
}
.err-inline:empty { display: none; }

.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 14px 22px; font-size: .95rem; border-radius: 12px; }

/* ---------- Lembar ketentuan ---------- */
.exam-sheet {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 30px 70px -38px rgba(15,23,42,.75);
  position: relative; overflow: hidden;
}
.exam-sheet::before {
  content: ""; position: absolute; inset: -40% -20% auto auto;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.5), transparent 66%);
  pointer-events: none;
}
.exam-sheet > * { position: relative; }
.exam-sheet__title {
  margin: 0 0 20px; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: #94a3b8;
}

.exam-stats {
  display: grid; gap: 1px; margin: 0;
  background: rgba(148,163,184,.18);
  border-radius: 14px; overflow: hidden;
}
.exam-stat {
  display: flex; align-items: baseline; justify-content: space-between;
  background: rgba(15,23,42,.72); padding: 13px 16px;
}
.exam-stat dt { font-size: .8rem; color: #94a3b8; font-weight: 600; }
.exam-stat dd { margin: 0; font-variant-numeric: tabular-nums; }
.exam-stat dd strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.exam-stat dd span { font-size: .76rem; color: #94a3b8; margin-left: 3px; }

.exam-rules { margin-top: 22px; }
.exam-rules__title {
  margin: 0 0 10px; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: #94a3b8;
}
.exam-rules__list {
  margin: 0; padding-left: 0; list-style: none;
  counter-reset: r; font-size: .82rem; line-height: 1.6; color: #cbd5e1;
}
.exam-rules__list li {
  counter-increment: r; position: relative;
  padding-left: 26px; margin-bottom: 8px;
}
.exam-rules__list li::before {
  content: counter(r);
  position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 800; color: #c7d2fe;
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(129,140,248,.35);
}

.exam-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding: 12px 14px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.22);
  border-radius: 12px;
}
.exam-note svg {
  width: 16px; height: 16px; flex: none; margin-top: 2px;
  stroke: #fbbf24; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.exam-note p { margin: 0; font-size: .76rem; line-height: 1.5; color: #fde68a; }

/* ---------- Layar ujian ---------- */
.exam-screen { background: #f1f5f9; min-height: calc(100vh - 64px); padding-bottom: 40px; }

.exam-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #0f172a; color: #e2e8f0;
  padding: 12px clamp(16px, 3vw, 30px);
  flex-wrap: wrap;
}
.exam-bar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.exam-bar__logo {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  font-size: .64rem; font-weight: 900; letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  box-shadow: 0 4px 14px -4px rgba(99,102,241,.8);
}
.exam-bar__id { min-width: 0; }
.exam-bar__id strong {
  display: block; font-size: .92rem; font-weight: 800;
  letter-spacing: -.01em; color: #fff;
}
.exam-bar__id span { display: block; font-size: .74rem; color: #94a3b8; }

.exam-bar__peserta { display: flex; align-items: center; gap: 11px; }
.exam-bar__peserta-txt { text-align: right; min-width: 0; }
.exam-bar__peserta-txt strong {
  display: block; font-size: .84rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.exam-bar__peserta-txt span {
  display: block; font-size: .72rem; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.exam-bar__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: .92rem; color: #c7d2fe;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(129,140,248,.35);
}

.exam-statusbar {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px clamp(16px, 3vw, 30px);
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.exam-statusbar__progress { flex: 1; min-width: 200px; }
.exam-progress-txt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .78rem; color: var(--muted);
  margin-bottom: 7px; font-variant-numeric: tabular-nums;
}
.exam-progress-txt strong { color: var(--ink); font-weight: 800; }
.exam-statusbar__mode {
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-dark); background: var(--brand-soft);
  padding: 2px 9px; border-radius: 6px;
}
.exam-track { height: 7px; background: #e8edf4; border-radius: 99px; overflow: hidden; }
.exam-track > i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #4338ca);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.exam-clock {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 6px 14px; border-radius: 11px;
  background: var(--bg-soft); border: 1px solid var(--line);
  min-width: 108px;
}
.exam-clock__lbl {
  font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.exam-clock__val {
  font-size: 1.16rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.25;
}
.exam-clock.warn { background: var(--red-soft); border-color: #fecaca; }
.exam-clock.warn .exam-clock__lbl { color: #b91c1c; }
.exam-clock.warn .exam-clock__val { color: var(--red); animation: blinkWarn 1.1s steps(2, start) infinite; }
@keyframes blinkWarn { 50% { opacity: .45; } }

.exam-quit {
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.exam-quit:hover { background: var(--red-soft); border-color: #fecaca; color: var(--red); }

.exam-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 22px auto 0;
  padding: 0 clamp(14px, 3vw, 24px);
  align-items: start;
}

/* panel navigasi */
.exam-nav-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; position: sticky; top: 88px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.exam-nav-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 13px;
}
.exam-nav-panel__head h2 {
  margin: 0; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.exam-nav-panel__toggle {
  font: inherit; font-size: .7rem; font-weight: 700; color: var(--brand);
  background: none; border: 0; cursor: pointer;
  padding: 2px 4px; border-radius: 6px;
}
.exam-nav-panel__toggle:hover { background: var(--brand-soft); }
.exam-nav-panel.is-collapsed .exam-nav-grid,
.exam-nav-panel.is-collapsed .exam-nav-legend { display: none; }

.exam-nav-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 7px; margin-bottom: 15px;
}
.exam-nav-btn {
  font: inherit; font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  aspect-ratio: 1; border-radius: 9px; cursor: pointer;
  color: var(--ink-2); background: #f8fafc;
  border: 1.5px solid var(--line);
  transition: transform .12s, background .12s, border-color .12s, color .12s;
}
.exam-nav-btn:hover {
  border-color: #c7d2fe; background: var(--brand-soft);
  transform: translateY(-1px);
}
.exam-nav-btn.is-done { background: #eef2ff; border-color: #c7d2fe; color: var(--brand-dark); }
.exam-nav-btn.is-current {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(79,70,229,.7);
}

.exam-nav-legend {
  display: grid; gap: 6px;
  margin-bottom: 16px; font-size: .7rem; color: var(--muted);
}
.exam-nav-legend span { display: flex; align-items: center; gap: 7px; }
.dot {
  width: 12px; height: 12px; border-radius: 4px;
  border: 1.5px solid var(--line); background: #f8fafc; flex: none;
}
.dot--filled { background: #eef2ff; border-color: #c7d2fe; }
.dot--now { background: var(--brand); border-color: var(--brand); }

/* kartu soal */
.exam-main { min-width: 0; }
.exam-main .q-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 30px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 50px -40px rgba(15,23,42,.35);
  animation: cardIn .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.exam-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; flex-wrap: wrap;
}
.exam-foot .hint { flex: 1; text-align: center; }

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
  .exam-gate__grid { grid-template-columns: 1fr; }
  .exam-body { grid-template-columns: 1fr; }
  .exam-nav-panel { position: static; }
  .exam-nav-grid { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 620px) {
  .exam-gate { padding: 30px 16px 52px; }
  .exam-panel, .exam-sheet { padding: 22px; border-radius: 18px; }
  .exam-main .q-card { padding: 20px; border-radius: 16px; }
  .exam-nav-grid { grid-template-columns: repeat(6, 1fr); }
  .exam-statusbar { gap: 12px; padding: 12px 16px; }
  .exam-clock { min-width: 92px; padding: 5px 11px; }
  .exam-clock__val { font-size: 1.02rem; }
  .exam-bar__peserta-txt strong,
  .exam-bar__peserta-txt span { max-width: 40vw; }
  .exam-foot .hint { order: 3; flex-basis: 100%; }
  .exam-foot .btn { flex: 1; }
}

.exam-progress-note {
  margin: 7px 0 0; font-size: .7rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.exam-progress-note strong { color: var(--ink-2); font-weight: 800; }

/* ---- status penyimpanan hasil ---- */
.simpan-status {
  margin: 0 auto 22px; max-width: 560px;
  padding: 12px 16px; border-radius: 12px;
  font-size: .84rem; font-weight: 600; line-height: 1.5;
  text-align: center; border: 1px solid transparent;
}
.simpan-status[hidden] { display: none; }
.simpan-status.is-proses { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.simpan-status.is-ok     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.simpan-status.is-gagal  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }