/* ==========================================================================
   MITA INSTITUTE — Design Tokens
   Konsep: "Seal of Record" — Mita Institute dibaca sebagai lembaga pencatatan
   resmi (registry), bukan marketplace kursus. Kosakata visualnya dipinjam dari
   dunia sertifikat & dokumen resmi: nomor registrasi dalam kotak mono ala
   formulir cetak, garis-garis ledger, dan satu meterai bermata ukir (seal-mark)
   yang jadi benang merah tiap halaman — kecil di navbar, besar di halaman
   verifikasi, sedang di tiap kartu sertifikat.
   ========================================================================== */
:root {
  /* ---- Brand tokens ---- */
  --ink: #101E30;
  --navy: #14345C;
  --navy-deep: #0A1928;
  --teal: #0B7F72;
  --teal-deep: #085F55;
  --teal-tint: #E4F3F1;
  --brass: #A9782E;
  --brass-tint: #F6EEDD;
  --paper: #F5F6FA;
  --surface: #FFFFFF;
  --line: #E2E6EC;
  --text: #16232F;
  --text-muted: #58636F;
  --danger: #B3261E;
  --danger-tint: #FBEAE8;

  /* ---- Alias lama — dipakai panel admin (di luar cakupan redesain ini),
     supaya semua halaman admin tetap konsisten tanpa perlu diubah manual. ---- */
  --bg: var(--paper);
  --border: var(--line);
  --amber: var(--brass);
  --amber-tint: var(--brass-tint);
  --teal-dark: var(--teal-deep);

  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-card: 0 10px 28px -10px rgba(14, 30, 48, 0.18);
  --shadow-lift: 0 24px 48px -18px rgba(10, 25, 40, 0.32);
  --container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.16; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: var(--font-body); cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
::selection { background: var(--brass-tint); color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.ledger-rule { height: 1px; background: var(--line); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 500;
}

/* ---- Scroll-reveal (dipakai bareng dgn IntersectionObserver di main.js) ----
   PENTING: elemen [data-reveal] TAMPIL SECARA DEFAULT — hanya disembunyikan
   kalau class .reveal-pending ditambahkan oleh JS (lihat main.js). Ini jaga-jaga
   supaya konten nggak permanen invisible kalau JS gagal load/di-block, atau
   dibuka oleh crawler/bot yang nggak jalanin JavaScript. */
[data-reveal] { transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].reveal-pending { opacity: 0; transform: translateY(14px); }
[data-reveal].reveal-pending.is-revealed { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SEAL MARK — meterai berukir, jadi tanda tangan visual di seluruh situs.
   Dipakai: navbar (kecil), langkah alur (sedang), kartu sertifikat (sedang),
   halaman verifikasi (besar). Warna diatur lewat `color` (pakai currentColor).
   ========================================================================== */
.seal-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy); }
.seal-mark svg { width: 100%; height: 100%; overflow: visible; }
.seal-mark__ring { fill: none; stroke: currentColor; }
.seal-mark__ticks line { stroke: currentColor; }
.seal-mark__mono { font-family: var(--font-serif); font-weight: 600; fill: currentColor; }

.seal-mark--sm { width: 34px; height: 34px; }
.seal-mark--sm .seal-mark__mono { font-size: 30px; }
.seal-mark--md { width: 52px; height: 52px; }
.seal-mark--md .seal-mark__mono { font-size: 30px; }
.seal-mark--lg { width: 92px; height: 92px; }
.seal-mark--lg .seal-mark__mono { font-size: 30px; }

.seal-mark--light { color: #fff; }
.seal-mark--brass { color: var(--brass); }
.seal-mark--teal { color: var(--teal); }

.result-seal--ok { color: var(--teal); }
.result-seal--fail { color: var(--danger); }

/* ---- Ledger field — kotak ala kolom formulir cetak, buat nomor registrasi ---- */
.ledger-field {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.ledger-field__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.ledger-field__value { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--navy); letter-spacing: 0.02em; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 246, 250, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.navbar__inner {
  max-width: var(--container); margin: 0 auto; padding: 13px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.navbar__brand { display: flex; align-items: center; gap: 10px; }
.navbar__seal { color: var(--navy); }
.navbar__seal--light { color: var(--teal); }
.navbar__wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px; letter-spacing: 0.01em; color: var(--navy);
}
.navbar__wordmark em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: 0.24em; color: var(--text-muted); font-family: var(--font-mono); font-weight: 500; }
.navbar__links { display: none; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.navbar__links a { position: relative; padding: 4px 0; transition: color 0.15s ease; }
.navbar__links a:hover { color: var(--navy); }
.navbar__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.navbar__links a:hover::after { transform: scaleX(1); }
.navbar__cta {
  background: var(--navy); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 11px 20px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.15s ease;
}
.navbar__cta:hover { background: var(--navy-deep); transform: translateY(-1px); }

@media (min-width: 860px) {
  .navbar__links { display: flex; }
}

/* ==========================================================================
   HERO — landas pacu utama, jadi tesis situs: "tiap sertifikat berawal dari
   satu nomor registrasi yang tercatat rapi."
   ========================================================================== */
.hero { position: relative; padding: 40px 0 12px; overflow: hidden; }
.hero::before {
  /* Tekstur stipple halus ala kertas berpengaman — dot grid rapat, BUKAN
     lingkaran konsentris (versi awal bikin garis cincin yang malah terlihat
     kayak bug, bukan tekstur presisi). */
  content: ""; position: absolute; inset: -10% -10% auto -10%; height: 480px;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(20,52,92,0.05) 0, transparent 45%),
    radial-gradient(circle, rgba(20,52,92,0.16) 1px, transparent 1.6px);
  background-size: auto, 16px 16px;
  pointer-events: none; z-index: 0;
}
.hero__intro { position: relative; z-index: 1; padding: 4px 20px 26px; max-width: 660px; margin: 0 auto; text-align: center; }
.hero__intro h1 {
  font-family: var(--font-serif); font-weight: 600; font-style: normal;
  font-size: 32px; margin-top: 14px; color: var(--navy); letter-spacing: -0.015em; line-height: 1.22;
}
.hero__intro p { margin-top: 14px; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; max-width: 46ch; margin-left: auto; margin-right: auto; }

.carousel {
  position: relative; z-index: 1;
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 20px 14px; scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.banner-card {
  position: relative; flex: 0 0 82%; max-width: 340px; scroll-snap-align: start;
  border-radius: var(--radius-lg); padding: 24px; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 190px;
  box-shadow: var(--shadow-card);
}
.banner-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 18px);
  pointer-events: none;
}
.banner-card__eyebrow {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.82; position: relative; z-index: 1;
}
.banner-card__title { font-family: var(--font-display); font-size: 22px; margin-top: 10px; font-weight: 700; position: relative; z-index: 1; letter-spacing: -0.01em; }
.banner-card__tagline { margin-top: 7px; font-size: 13.5px; opacity: 0.88; max-width: 34ch; position: relative; z-index: 1; line-height: 1.5; }
.banner-card__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700;
  position: relative; z-index: 1;
}
@media (min-width: 700px) {
  .banner-card { flex: 0 0 380px; }
}

.carousel-dots { display: flex; gap: 6px; justify-content: center; padding-bottom: 6px; position: relative; z-index: 1; }
.carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: all 0.2s ease; }
.carousel-dots span.is-active { background: var(--teal); width: 22px; border-radius: 3px; }

/* ---- Ledger stats — strip registri, angka besar serif + label mono ---- */
.ledger-stats {
  max-width: var(--container); margin: 8px auto 0; padding: 22px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ledger-row { padding: 6px 16px; text-align: center; border-left: 1px solid var(--line); }
.ledger-row:first-child { border-left: none; }
.ledger-row__label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.02em; }
.ledger-row__value { display: block; font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--navy); margin-top: 6px; }
@media (max-width: 480px) {
  .ledger-row__label { font-size: 9.5px; }
  .ledger-row__value { font-size: 19px; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: 52px 0; }
.section__head { padding: 0 20px 24px; max-width: 640px; }
.section__head h2 { font-size: 23px; color: var(--navy); letter-spacing: -0.01em; }
.section__head p { margin-top: 9px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }

/* ==========================================================================
   PROGRAM GRID / CARDS
   ========================================================================== */
.program-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 20px;
}
@media (min-width: 720px) { .program-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px; } }
@media (min-width: 1020px) { .program-grid { grid-template-columns: repeat(3, 1fr); } }

.program-card {
  display: flex; flex-direction: column; gap: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.program-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: #d3d9e2; }
.program-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.seal-badge {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-family: var(--font-serif); font-weight: 600; font-size: 15px;
  flex-shrink: 0; position: relative;
}
.seal-badge::after {
  content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%;
}
.program-card__kategori { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--teal-deep); font-weight: 600; }
.program-card__price { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-deep); white-space: nowrap; }
.program-card__price--paid { background: var(--brass-tint); color: #8a6222; }

.program-card__title { font-size: 17.5px; color: var(--navy); margin-top: 4px; letter-spacing: -0.01em; }
.program-card__tagline { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }

.program-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); }
.program-card__meta span { display: flex; align-items: center; gap: 5px; }

.quota-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.quota-bar__fill { height: 100%; background: var(--teal); border-radius: 4px; }

.program-card__cta {
  display: flex; align-items: center; justify-content: space-between; margin-top: 2px;
  font-size: 13.5px; font-weight: 700; color: var(--navy); padding-top: 12px; border-top: 1px dashed var(--line);
}

/* ---- Detail Program ---- */
.detail-banner {
  position: relative; padding: 24px 20px 64px; color: #fff; overflow: hidden;
}
.detail-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1.6px);
  background-size: 16px 16px;
  pointer-events: none;
}
.detail-banner__back { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.75); display: inline-flex; gap: 6px; align-items: center; position: relative; z-index: 1; }
.detail-banner__seal { margin-top: 22px; position: relative; z-index: 1; }
.detail-banner h1 {
  font-family: var(--font-serif); font-weight: 600; font-size: 28px; margin-top: 16px; max-width: 22ch;
  position: relative; z-index: 1; letter-spacing: -0.01em; line-height: 1.22;
}
.detail-banner__tagline { margin-top: 11px; font-size: 14.5px; opacity: 0.88; max-width: 44ch; position: relative; z-index: 1; line-height: 1.55; }

.detail-body { max-width: 780px; margin: -40px auto 0; padding: 0 20px 120px; position: relative; }
.detail-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.detail-card h3 { font-size: 15.5px; color: var(--navy); margin-bottom: 11px; }
.detail-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-item__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); display: block; font-weight: 600; font-family: var(--font-mono); }
.info-item__value { font-size: 14.5px; color: var(--navy); margin-top: 5px; font-weight: 700; font-family: var(--font-display); }

.module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.module-list li {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px;
}
.module-list .num {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--teal-deep); background: var(--teal-tint);
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.module-lock { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500; }

.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 14px 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 -6px 24px rgba(16,24,40,0.06);
}
.sticky-bar__price { display: flex; flex-direction: column; }
.sticky-bar__price .label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); }
.sticky-bar__price .value { font-family: var(--font-display); font-size: 18px; color: var(--navy); font-weight: 700; }

.btn-primary {
  background: var(--teal); color: #fff; border: none; font-weight: 700; font-size: 14.5px;
  padding: 14px 24px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--teal-deep); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  background: transparent; border: 1.5px solid var(--line); color: var(--navy); font-weight: 700; font-size: 14.5px;
  padding: 13px 20px; border-radius: 999px; transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-secondary:hover { border-color: var(--navy); background: rgba(20,52,92,0.03); }

/* ==========================================================================
   FORM PENDAFTARAN
   ========================================================================== */
.form-page { max-width: 560px; margin: 0 auto; padding: 30px 20px 120px; }
.form-page__head { margin-bottom: 24px; }
.form-page__head h1 { font-size: 23px; color: var(--navy); letter-spacing: -0.01em; }
.form-page__head p { margin-top: 8px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px;
  font-size: 14.5px; font-family: var(--font-body); background: var(--surface); color: var(--text);
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: none; }
.field-error { color: var(--danger); font-size: 12.5px; margin-top: 6px; font-weight: 500; }
.field input.has-error { border-color: var(--danger); }

.wa-input { display: flex; gap: 8px; }
.wa-input select { flex: 0 0 96px; }
.wa-input input { flex: 1; }
.field-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.5; }

/* ---- Opsi pilihan ganda post-test ---- */
.quiz-question {
  font-size: 15px !important; font-weight: 600 !important; text-transform: none !important;
  color: var(--text) !important; line-height: 1.5; margin-bottom: 4px !important;
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.field:has(.quiz-options) { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.quiz-option {
  display: flex; gap: 10px; align-items: center; font-weight: 400; text-transform: none;
  font-size: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-option:hover { border-color: var(--teal); }
.quiz-option:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.quiz-option input { accent-color: var(--teal); flex-shrink: 0; }
.quiz-option span { color: var(--text); }

.form-summary-card {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 22px;
}
.form-summary-card .seal-badge { width: 42px; height: 42px; font-size: 12px; border-radius: 11px; }
.form-summary-card__title { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.form-summary-card__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; font-weight: 500; font-family: var(--font-mono); }

/* ==========================================================================
   HALAMAN SUKSES / LEDGER (pendaftaran, post-test hasil, sertifikat, verifikasi)
   ========================================================================== */
.success-page { max-width: 560px; margin: 0 auto; padding: 48px 20px 60px; text-align: center; }
.success-seal {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; background: var(--navy); color: #fff; font-size: 26px; position: relative;
}
.success-seal::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; }
.success-page h1 { font-family: var(--font-serif); font-weight: 600; font-size: 26px; color: var(--navy); letter-spacing: -0.01em; margin-top: 18px; }
.success-page > p { margin-top: 11px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }

.success-code {
  display: inline-flex; margin-top: 16px; font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  color: var(--navy); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: 9px 18px; letter-spacing: 0.03em;
}
.success-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px;
  text-align: left; margin-top: 18px; box-shadow: var(--shadow-sm);
}
.success-card h3 { font-size: 14.5px; color: var(--navy); margin-bottom: 6px; }
.success-card p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 15px; line-height: 1.55; }
.cert-display-name {
  font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--navy);
  margin-bottom: 6px !important; letter-spacing: -0.01em;
}
.success-actions { display: flex; flex-direction: column; gap: 10px; }
.success-actions a { display: block; text-align: center; }

.ledger-rule.spaced { margin: 28px 0; }

/* ==========================================================================
   KELAS ONLINE
   ========================================================================== */
.kelas-layout { max-width: 900px; margin: 0 auto; padding: 26px 20px 60px; }
.kelas-head { margin-bottom: 22px; }
.kelas-head .eyebrow { display: block; margin-bottom: 9px; }
.kelas-head h1 { font-size: 22px; color: var(--navy); letter-spacing: -0.01em; }
.kelas-head p { margin-top: 7px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.kelas-progress { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.kelas-progress .quota-bar { flex: 1; }
.kelas-progress span { font-size: 12px; font-weight: 600; color: var(--navy); font-family: var(--font-mono); white-space: nowrap; }

.video-frame {
  position: relative; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy-deep); box-shadow: var(--shadow-card);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.module-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.module-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.module-item:hover { border-color: var(--teal); }
.module-item.is-active { border-color: var(--teal); background: var(--teal-tint); }
.module-item__check {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; transition: all 0.15s ease;
}
.module-item.is-done .module-item__check { background: var(--teal); border-color: var(--teal); color: #fff; }
.module-item__body { flex: 1; min-width: 0; }
.module-item__title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.module-item__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); }
.module-item__play { font-size: 17px; color: var(--teal); flex-shrink: 0; }

.kelas-cta-card {
  margin-top: 24px; background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
}
.kelas-cta-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1.6px);
  background-size: 16px 16px;
}
.kelas-cta-card h3, .kelas-cta-card p, .kelas-cta-card .btn-primary { position: relative; z-index: 1; }
.kelas-cta-card h3 { font-size: 16.5px; }
.kelas-cta-card p { font-size: 13.5px; opacity: 0.85; line-height: 1.5; }
.kelas-cta-card .btn-primary { align-self: flex-start; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--navy-deep); color: #fff; margin-top: 48px; }
.footer__inner {
  max-width: var(--container); margin: 0 auto; padding: 44px 20px 30px; display: grid; gap: 30px;
}
@media (min-width: 720px) { .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__desc { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,0.62); line-height: 1.6; max-width: 40ch; }
.footer__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-bottom: 13px; font-family: var(--font-mono); }
.footer__col a, .footer__col span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.88); margin-bottom: 8px; font-weight: 500; }
.footer__col a:hover { color: var(--teal); }
.footer__col svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1); text-align: center; padding: 18px 20px;
  font-size: 11.5px; color: rgba(255,255,255,0.45); font-family: var(--font-mono);
}
/* Ruang ekstra di bawah supaya teks copyright nggak ketiban bubble helpbox
   yang fixed di kanan-bawah viewport, khususnya di layar sempit. */
@media (max-width: 640px) { .footer__bottom { padding-bottom: 84px; } }

.pad-sticky { height: 88px; }

/* ==========================================================================
   AUTH (Login Peserta)
   ========================================================================== */
.auth-page {
  min-height: calc(100vh - 66px); display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  position: relative; overflow: hidden;
}
.auth-page::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(20,52,92,0.07) 1px, transparent 1.6px);
  background-size: 16px 16px;
  pointer-events: none;
}
.auth-card {
  position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; max-width: 400px; width: 100%; box-shadow: var(--shadow-card);
}
.auth-card h1 { font-size: 21px; margin-bottom: 7px; color: var(--navy); }
.auth-card p { color: var(--text-muted); font-size: 13.5px; margin-bottom: 22px; line-height: 1.55; }
.auth-error {
  background: var(--danger-tint); color: var(--danger); border: 1px solid #f3c7c2; border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 13px; font-weight: 500; margin-bottom: 18px; line-height: 1.5;
}

/* Admin login — varian gelap, meterai di atas kartu supaya konsisten sama
   bahasa visual "Seal of Record" dipakai di navbar/verifikasi. */
.auth-page--admin {
  min-height: 100vh; padding: 32px 20px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1.6px);
  background-size: 18px 18px;
}
.auth-page--admin::before { display: none; }
.auth-card--admin {
  padding: 36px 30px 30px; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-lift);
}
.auth-card__seal { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-card--admin h1 { text-align: center; }
.auth-card--admin p { text-align: center; }
@media (max-width: 480px) {
  .auth-page--admin { padding: 24px 16px; align-items: flex-start; padding-top: 48px; }
  .auth-card--admin { padding: 28px 22px 24px; }
}

/* ==========================================================================
   ADMIN PANEL (di luar cakupan redesain — token diwarisi otomatis via alias)
   ========================================================================== */
.admin-shell { display: flex; min-height: 100vh; background: var(--bg); }
.admin-sidebar {
  width: 232px;
  background: var(--navy-deep);
  color: #fff;
  flex-shrink: 0;
  padding: 20px 14px;
}
.admin-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; }
.admin-sidebar nav a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 2px;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.is-active { background: rgba(255,255,255,0.1); color: #fff; }
.admin-sidebar__role {
  margin-top: 20px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.admin-sidebar__install { display: block; width: 100%; margin-top: 10px; text-align: center; }
.admin-main { flex: 1; padding: 28px 32px; max-width: 1100px; min-width: 0; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.admin-topbar h1 { font-size: 22px; }
.admin-topbar form button {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: 13px; color: var(--text-muted);
}
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.admin-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px;
}
.admin-stat__label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-stat__value { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-top: 6px; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.admin-table th { background: var(--bg); color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.admin-table tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge--paid, .badge--published, .badge--active { background: var(--teal-tint); color: var(--teal-dark); }
.badge--pending, .badge--draft { background: var(--amber-tint); color: var(--amber); }
.badge--failed, .badge--expired, .badge--inactive, .badge--archived { background: #fef3f2; color: var(--danger); }
.admin-btn {
  display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12.5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); margin-right: 6px;
}
.admin-btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; }
.admin-form .field { margin-bottom: 14px; }
.admin-403 { max-width: 480px; margin: 80px auto; text-align: center; }

/* ---- Topbar mobile (hamburger) — cuma tampak di layar sempit ---- */
.admin-mobile-topbar { display: none; }
.admin-sidebar__overlay { display: none; }

/* ---- Responsive: sidebar jadi drawer geser dari kiri di bawah 900px ---- */
@media (max-width: 900px) {
  .admin-mobile-topbar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40;
    background: var(--navy-deep); color: #fff; padding: 12px 16px;
  }
  .admin-mobile-topbar__burger {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06); color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .admin-mobile-topbar__brand { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }

  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 260px; max-width: 82vw;
    transform: translateX(-100%); transition: transform 0.22s ease; overflow-y: auto;
    box-shadow: var(--shadow-lift);
  }
  .admin-shell.is-nav-open .admin-sidebar { transform: translateX(0); }
  .admin-sidebar__overlay {
    display: block; position: fixed; inset: 0; background: rgba(10,25,40,0.55); z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .admin-shell.is-nav-open .admin-sidebar__overlay { opacity: 1; pointer-events: auto; }

  .admin-main { padding: 18px 16px 40px; max-width: 100%; }
  .admin-topbar h1 { font-size: 19px; }
  .admin-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .admin-stat { padding: 13px 14px; }
  .admin-stat__value { font-size: 21px; }
  .admin-card { padding: 16px; }

  /* Tabel di-scroll horizontal langsung dari elemen <table>-nya sendiri,
     tanpa perlu bungkus div tambahan di tiap halaman. */
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .admin-table th, .admin-table td { white-space: nowrap; }
}
@media (max-width: 480px) {
  .admin-main { padding: 14px 12px 36px; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Tombol Install PWA (mengambang, sisi customer) ---- */
.pwa-install-btn {
  position: fixed; left: 20px; bottom: 20px; z-index: 998;
  display: flex; align-items: center; gap: 7px;
  background: var(--navy); color: #fff; border: none; border-radius: 999px;
  padding: 11px 18px 11px 16px; font-size: 13.5px; font-weight: 700; font-family: var(--font-body);
  box-shadow: var(--shadow-lift); cursor: pointer;
}
.pwa-install-btn:hover { background: var(--navy-deep); }
@media (max-width: 480px) {
  .pwa-install-btn { left: 14px; bottom: 14px; padding: 10px 16px 10px 14px; font-size: 13px; }
  .pwa-install-btn span { display: inline; }
}

/* ---- Editor "Materi" modul (transkrip YouTube / upload PDF) ---- */
.materi-editor summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.materi-editor summary::-webkit-details-marker { display: none; }
.materi-editor textarea {
  font-family: var(--font-body); font-size: 13px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; resize: vertical;
}

/* ==========================================================================
   HELP BOX (FAQ + Chat AI + Kontak Admin, mengambang)
   ========================================================================== */
.helpbox { position: fixed; bottom: 20px; right: 20px; z-index: 999; font-family: var(--font-body); }
.helpbox__toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--teal); color: #fff; font-size: 24px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(11,127,114,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.helpbox__toggle:hover { background: var(--teal-deep); transform: translateY(-1px); }

.helpbox__panel {
  position: absolute; bottom: 68px; right: 0;
  width: 340px; max-width: calc(100vw - 40px); height: 460px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(10,25,40,0.22);
  flex-direction: column; overflow: hidden;
}
.helpbox__tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.helpbox__tab {
  flex: 1; padding: 12px 8px; font-size: 12.5px; font-weight: 600; border: none;
  background: var(--paper); color: var(--text-muted); cursor: pointer;
}
.helpbox__tab.is-active { background: var(--surface); color: var(--navy); border-bottom: 2px solid var(--teal); }
.helpbox__body { flex: 1; overflow-y: auto; padding: 16px; }

.helpbox__faq-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.helpbox__faq-item summary { font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--navy); }
.helpbox__faq-item p { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.helpbox__empty { font-size: 13px; color: var(--text-muted); }

.helpbox__body[data-helpbox-content="ai"] { display: flex; flex-direction: column; padding: 0; }
.helpbox__chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.helpbox__chat-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
.helpbox__chat-msg--ai { background: var(--paper); color: var(--text); align-self: flex-start; border-bottom-left-radius: 3px; }
.helpbox__chat-msg--user { background: var(--teal); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.helpbox__chat-msg--typing { opacity: 0.6; font-style: italic; }
.helpbox__chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); flex-shrink: 0; }
.helpbox__chat-form input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 13px;
}
.helpbox__chat-form input:focus { border-color: var(--teal); outline: none; }
.helpbox__chat-form button {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--teal); color: #fff; cursor: pointer;
}

.helpbox__wa-btn {
  display: block; text-align: center; background: #25D366; color: #fff; font-weight: 600;
  padding: 12px; border-radius: var(--radius-sm); text-decoration: none; font-size: 14px;
}

@media (max-width: 480px) {
  .helpbox__panel { width: calc(100vw - 32px); height: 70vh; bottom: 64px; right: -4px; }
}

/* ==========================================================================
   VALIDASI SERTIFIKAT — Halaman Pencarian Publik (/verifikasi)
   ========================================================================== */
.verify-alert {
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.5;
}
.verify-alert--error { background: var(--danger-tint); color: var(--danger); border: 1px solid #f3c7c2; }

.verify-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.verify-tabs::-webkit-scrollbar { display: none; }
.verify-tabs__btn {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.verify-tabs__btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.verify-panel { display: flex; flex-direction: column; gap: 14px; }

.verify-scan-card {
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 30px 20px;
  text-align: center;
}
.verify-scan-card__icon { font-size: 34px; margin-bottom: 10px; }
.verify-scan-card h3 { font-size: 15.5px; color: var(--navy); margin-bottom: 6px; }
.verify-scan-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; }

.verify-divider {
  display: flex; align-items: center; gap: 10px; margin: 4px 0;
  color: var(--text-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono);
}
.verify-divider::before, .verify-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.verify-manual { display: flex; gap: 8px; }
.verify-manual input { flex: 1; }

/* Modal kamera — satu instance dipakai bareng dari tombol "Scan Barcode" & "Scan Sertifikat" */
.scan-modal {
  position: fixed; inset: 0; background: rgba(10, 25, 40, 0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 200;
}
.scan-modal__card {
  background: var(--surface); border-radius: var(--radius-lg);
  max-width: 380px; width: 100%; padding: 22px;
  box-shadow: var(--shadow-lift);
}
.scan-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.scan-modal__head h3 { font-size: 15.5px; color: var(--navy); }
.scan-modal__close {
  background: none; border: none; font-size: 20px; color: var(--text-muted);
  line-height: 1; padding: 4px; cursor: pointer;
}
.scan-modal__hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.scan-modal__reader {
  border-radius: var(--radius-sm); overflow: hidden; background: #000;
  min-height: 240px; display: flex; align-items: center; justify-content: center;
}
.scan-modal__reader video { border-radius: var(--radius-sm); }
.scan-modal__status { font-size: 12.5px; color: var(--danger); margin-top: 12px; min-height: 16px; text-align: center; }

/* Hasil pencarian (bisa > 1 sertifikat per peserta) */
.verify-result-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
}
.verify-result-item__nama { font-size: 15px; font-weight: 700; color: var(--navy); }
.verify-result-item__meta { font-size: 13px; color: var(--text-muted); }
.verify-result-item__status {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-self: flex-start; margin-top: 6px;
}
.verify-result-item__status--ok { background: var(--teal-tint); color: var(--teal-deep); }
.verify-result-item__status--pending { background: var(--brass-tint); color: #8a6222; }
.verify-result-item__link {
  margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--teal-deep);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ==========================================================================
   PROFIL SAYA — Program Diikuti + Rak Sertifikat (/profil)
   ========================================================================== */
.profile-layout { max-width: 780px; margin: 0 auto; padding: 30px 20px 60px; }

.profile-head {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 30px; box-shadow: var(--shadow-sm);
}
.profile-head__avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px;
  font-family: var(--font-serif); flex-shrink: 0;
}
.profile-head__name { font-size: 17px; font-weight: 700; color: var(--navy); }
.profile-head__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); }
.profile-head__logout {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--danger);
  background: none; border: none; cursor: pointer; white-space: nowrap;
}

.profile-section { margin-bottom: 34px; }
.profile-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.profile-section__head h2 { font-size: 17.5px; color: var(--navy); }
.profile-section__count { font-size: 12.5px; color: var(--text-muted); font-weight: 600; font-family: var(--font-mono); }

.profile-empty {
  text-align: center; padding: 34px 20px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6;
  background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--radius-md);
}
.profile-empty a { color: var(--teal-deep); font-weight: 700; }

/* ---- Kartu program yang diikuti ---- */
.program-status-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 17px 18px; margin-bottom: 14px;
}
.program-status-card__top { display: flex; align-items: flex-start; gap: 12px; }
.program-status-card__title { font-size: 15px; font-weight: 700; color: var(--navy); }
.program-status-card__kategori { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal-deep); font-weight: 600; }
.program-status-card__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }

.status-badge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; margin-left: auto; }
.status-badge--berlangsung { background: var(--teal-tint); color: var(--teal-deep); }
.status-badge--selesai { background: #eef2ff; color: #3538cd; }
.status-badge--akan_datang { background: var(--brass-tint); color: #8a6222; }
.status-badge--pending { background: var(--brass-tint); color: #8a6222; }
.status-badge--expired { background: #f2f4f7; color: var(--text-muted); }

.program-status-card__progress { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.program-status-card__progress .quota-bar { flex: 1; }
.program-status-card__progress span { font-size: 11.5px; font-weight: 600; color: var(--navy); font-family: var(--font-mono); white-space: nowrap; }

.program-status-card__posttest { font-size: 12.5px; color: var(--text-muted); margin-top: 11px; }
.program-status-card__posttest strong { color: var(--navy); }

.program-status-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.program-status-card__actions a, .program-status-card__actions button {
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px;
}
.pill-btn-primary { background: var(--teal); color: #fff; border: none; transition: background 0.15s ease; }
.pill-btn-primary:hover { background: var(--teal-deep); }
.pill-btn-secondary { background: transparent; border: 1.5px solid var(--line); color: var(--navy); transition: border-color 0.15s ease; }
.pill-btn-secondary:hover { border-color: var(--navy); }

/* ---- Rak Sertifikat ---- */
.cert-shelf { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .cert-shelf { grid-template-columns: 1fr 1fr; } }

.cert-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cert-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.cert-card__strip { height: 8px; background: linear-gradient(90deg, var(--brass), var(--navy)); }
.cert-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.cert-card__icon { color: var(--brass); margin-bottom: 8px; }
.cert-card__title { font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--navy); line-height: 1.3; }
.cert-card__nama { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.cert-card__nomor {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line);
}
.cert-card__actions { display: flex; gap: 8px; margin-top: 14px; }
.cert-card__actions a { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 9px 10px; border-radius: 999px; }

.profile-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; text-align: center; }
.profile-hint a { color: var(--teal-deep); font-weight: 700; }