/* ============================================================
   NOW ACADEMY — Sistem Informasi Kursus Online
   Tema: akademik formal (navy + putih)
   ============================================================ */
:root {
  --navy-900: #0a2340;
  --navy-800: #10305a;
  --navy: #163f70;
  --navy-600: #1e5a9c;
  --blue-500: #2f7fd1;
  --blue-100: #e8f1fb;
  --gold: #c9a227;
  --ink: #13233c;
  --muted: #5c6b85;
  --line: #dbe3ef;
  --bg: #f2f5fa;
  --card: #ffffff;
  --green: #1c7c54;
  --green-bg: #e6f5ee;
  --amber: #a06800;
  --amber-bg: #fdf3dd;
  --red: #b3261e;
  --red-bg: #fdeceb;
  --blue-bg: #e8f1fb;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 48, 90, .06), 0 8px 24px rgba(16, 48, 90, .06);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Georgia', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; color: var(--navy-900); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p { margin: .4rem 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 99; }

/* ---------- Kerangka aplikasi ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 258px; flex: 0 0 258px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #dce6f5;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-500), var(--navy-600));
  border: 1px solid rgba(255, 255, 255, .35);
  display: grid; place-items: center;
  font-weight: 800; color: #fff; letter-spacing: .5px;
}
/* Kotak logo: latar putih agar perisai navy tetap terbaca di latar gelap */
.brand-mark.logo { background: #fff; padding: 2px; box-shadow: 0 2px 8px rgba(6, 20, 38, .28); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { color: #fff; font-size: .98rem; letter-spacing: .04em; }
.brand-text span { font-size: .72rem; color: #9fb4d4; }
.nav { padding: 12px 10px 4px; flex: 1; }
.nav-group { margin-bottom: 14px; }
.nav-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: #7d93b6; padding: 6px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; margin-bottom: 2px;
  color: #cfdcef; font-size: .9rem; font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.nav-item.on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav-ico { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 18px; opacity: .95; }
.nav-ico svg { width: 18px; height: 18px; }
.sidebar-foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 24px; position: sticky; top: 0; z-index: 20;
}
.burger { display: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 1.1rem; padding: 4px 10px; cursor: pointer; }
.topbar-title { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--muted);
  /* Judul panjang (mis. "Surat NA/SRT/PRJ/2026/0001") harus boleh menyusut &
     dipangkas dengan ellipsis, kalau tidak bilah atas melebar di ponsel. */
  flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-title strong, .topbar-title > span, .topbar-title .crumb-link {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title strong { color: var(--navy-900); }
.crumb-sep { color: var(--line); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-100); color: var(--navy); border: 1px solid #cfe0f5;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  flex: 0 0 auto; overflow: hidden;
}
/* Avatar dengan foto profil */
.avatar.ada-foto { background: #eef2f8; border-color: #cfe0f5; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.besar { border-width: 2px; box-shadow: 0 2px 10px rgba(16, 48, 90, .12); }
/* Kolom tabel berisi avatar + teks */
.sel-avatar { display: flex; align-items: center; gap: 10px; }
.sel-avatar > div:last-child { min-width: 0; }

/* ============================================================
   Editor foto profil (geser / perbesar / putar lalu potong)
   ============================================================ */
.pemotong {
  margin-top: 16px; padding: 18px; border: 1px solid var(--line);
  border-radius: 12px; background: #fbfcfe;
}
.pemotong-atas { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.pemotong-bingkai {
  position: relative; width: 300px; height: 300px; flex: 0 0 300px;
  border-radius: 12px; overflow: hidden; background: #0f1c2e;
  touch-action: none; cursor: grab; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(10, 35, 64, .25);
}
.pemotong-bingkai.menyeret { cursor: grabbing; }
.pemotong-bingkai canvas { display: block; width: 300px; height: 300px; }
/* Area di luar lingkaran digelapkan sebagai penunjuk hasil akhir */
.pemotong-mask {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 48%, rgba(8, 24, 44, .45) 49% 100%);
}
.pemotong-lingkaran {
  position: absolute; left: 2%; top: 2%; width: 96%; height: 96%;
  border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92), 0 0 0 1px rgba(8, 24, 44, .3);
}
.pemotong-garis { position: absolute; background: rgba(255, 255, 255, .35); pointer-events: none; }
.pemotong-garis-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.pemotong-garis-h { top: 50%; left: 0; right: 0; height: 1px; }
.pemotong-panel { flex: 1; min-width: 250px; }
.pemotong-zoom {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  font-size: .84rem; font-weight: 600; color: var(--navy-800);
}
.pemotong-zoom input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--navy-600); }
.pemotong-zoom output {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-900);
  min-width: 48px; text-align: right;
}
.pemotong-bingkai.rasio {
  width: var(--pw, 320px); height: var(--ph, 130px); flex: 0 0 auto;
}
.pemotong-bingkai.rasio canvas { width: var(--pw, 320px); height: var(--ph, 130px); }
/* Editor tanda tangan & logo: seluruh bingkai = hasil, jadi tanpa lingkaran/mask */
.pemotong-siku .pemotong-mask, .pemotong-siku .pemotong-lingkaran { display: none; }
.pemotong-siku .pemotong-bingkai { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pemotong-opsi {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  font-size: .82rem; font-weight: 600; color: var(--navy-800); line-height: 1.45;
}
.pemotong-opsi input { margin-top: 2px; accent-color: var(--navy-600); }
.pemotong-hasil { display: block; margin-top: 8px; font-size: .78rem; font-weight: 600; color: var(--green); }
@media (max-width: 720px) {
  .pemotong-bingkai.rasio { width: var(--pw, 320px); height: var(--ph, 130px); max-width: 100%; }
  .pemotong-bingkai.rasio canvas { max-width: 100%; }
}
@media (max-width: 720px) {
  .pemotong-bingkai, .pemotong-bingkai canvas { width: 240px; height: 240px; }
  .pemotong-bingkai { flex: 0 0 240px; }
  .pemotong { padding: 14px; }
}
.who-text { display: flex; flex-direction: column; line-height: 1.2; }
.who-text strong { font-size: .86rem; }
.who-text span { font-size: .74rem; color: var(--muted); }

.content {
  padding: 26px 24px 40px; flex: 1; max-width: 1360px; width: 100%;
  /* Aksen cahaya sangat halus di atas agar halaman tidak terasa datar */
  background:
    radial-gradient(1100px 340px at 92% -160px, rgba(47, 127, 209, .10), transparent 70%),
    radial-gradient(760px 300px at 0% -120px, rgba(201, 162, 39, .07), transparent 70%);
}
.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; background: #fff;
}

/* ============================================================
   Hero promosi di dashboard (flier program) — seperti situs web
   ============================================================ */
.promo { margin-bottom: 26px; }
.promo-rel {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 35, 64, .16); background: var(--navy-900);
}
.promo-slide {
  display: none; position: relative;
  /* Flier dirancang 3240 × 1080 piksel = rasio 3:1. Elemen banner dibuat 3:1 juga
     agar SELURUH gambar terlihat utuh (tidak terpotong) di semua lebar layar;
     ukuran teks mengikuti lebar layar lewat clamp(). */
  aspect-ratio: 3 / 1;
  padding: clamp(12px, 2.2vw, 34px) clamp(14px, 2.4vw, 38px);
  color: #fff;
  background-size: cover; background-position: center;
  align-items: flex-end;
}
.promo-slide.aktif { display: flex; }
/* Tanpa gambar: gradasi lembaga + pola halus agar tetap terlihat seperti banner */
.promo-slide.tanpa-gambar {
  background-image:
    radial-gradient(circle at 85% 15%, rgba(201, 162, 39, .35), transparent 45%),
    radial-gradient(circle at 12% 90%, rgba(47, 127, 209, .45), transparent 50%),
    linear-gradient(135deg, var(--navy-900), var(--navy) 60%, var(--navy-600));
}
/* Tirai gelap agar teks tetap terbaca di atas flier apa pun */
.promo-tirai {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 20, 38, .88) 0%, rgba(6, 20, 38, .62) 48%, rgba(6, 20, 38, .18) 100%);
}
.promo-isi { position: relative; z-index: 2; max-width: 62%; }
.promo-label {
  display: inline-block; font-size: clamp(.55rem, .68vw, .7rem); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: clamp(3px, .6vw, 8px);
}
.promo-isi h2 {
  color: #fff; font-family: var(--serif); font-size: clamp(1rem, 2.3vw, 2rem);
  line-height: 1.15; margin: 0 0 clamp(3px, .55vw, 8px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.promo-isi p {
  color: #e4ecf7; font-size: clamp(.72rem, .95vw, .95rem);
  margin: 0 0 clamp(6px, 1.1vw, 16px); max-width: 52ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.promo-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.promo-aksi .btn.ghost { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); }
.promo-aksi .btn.ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.promo-titik { position: absolute; bottom: 14px; right: 18px; z-index: 3; display: flex; gap: 7px; }
.promo-titik-btn {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45);
}
.promo-titik-btn.aktif { background: var(--gold); width: 22px; border-radius: 999px; }
.promo-panah {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
}
.promo-panah:hover { background: rgba(255, 255, 255, .32); }
.promo-panah.kiri { left: 12px; transform: translateY(-50%) rotate(180deg); }
.promo-panah.kanan { right: 12px; }

@media (max-width: 900px) {
  .promo-isi { max-width: 72%; }
  .promo-tirai { background: linear-gradient(0deg, rgba(6, 20, 38, .92) 10%, rgba(6, 20, 38, .55) 70%, rgba(6, 20, 38, .3) 100%); }
  .promo-titik { right: auto; left: 14px; bottom: 8px; }
  .promo-panah { display: none; }
}
/* Ponsel: banner tetap 3:1 (gambar utuh) sehingga tingginya pendek — teks
   dikecilkan dan subjudul + tombol sekunder disembunyikan agar tetap rapi. */
@media (max-width: 560px) {
  .promo-isi { max-width: 100%; }
  .promo-isi p { display: none; }
  .promo-isi h2 { font-size: .95rem; }
  .promo-label { font-size: .52rem; letter-spacing: .12em; }
  .promo-aksi { gap: 6px; }
  .promo-aksi .btn { padding: 5px 10px; font-size: .74rem; }
  .promo-aksi .btn.ghost { display: none; }
  .promo-titik-btn { width: 7px; height: 7px; }
  .promo-titik-btn.aktif { width: 16px; }
}

/* Gambar mini flier pada daftar & pratinjau di form.
   Rasio 3:1 mengikuti bentuk flier (3240 × 1080) agar pratinjau tidak menipu. */
.flier-mini {
  width: 84px; height: 28px; flex: 0 0 84px; border-radius: 5px; overflow: hidden;
  background: #eef2f8; display: grid; place-items: center; color: var(--muted);
}
.flier-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flier-mini.kosong { border: 1px dashed var(--line); }
.flier-mini svg { width: 18px; height: 18px; }
/* Thumbnail foto program (rasio 16:10, bukan 3:1 seperti flier) */
.program-mini {
  width: 72px; height: 45px; flex: 0 0 72px; border-radius: 6px; overflow: hidden;
  background: #eef2f8; display: grid; place-items: center; color: var(--muted);
  border: 1px solid var(--line);
}
.program-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.program-mini svg { width: 18px; height: 18px; }
.flier-pratinjau {
  width: 300px; height: 100px; flex: 0 0 300px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #eef2f8; display: grid; place-items: center;
  color: var(--muted); font-size: .78rem; text-align: center; gap: 6px;
}
.flier-pratinjau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flier-pratinjau.kosong { border-style: dashed; }
.flier-pratinjau svg { width: 22px; height: 22px; opacity: .6; }
@media (max-width: 700px) { .flier-pratinjau { width: 100%; flex: 0 0 auto; height: 110px; } }

/* Susunan slide beranda (halaman Flier & Promosi): daftar berurutan + ▲/▼ */
.slide-urut { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.slide-baris {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafd;
}
.slide-no {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.slide-thumb {
  width: 96px; height: 32px; flex: 0 0 96px; border-radius: 6px; overflow: hidden;
  background: #eef2f8; display: grid; place-items: center;
  font-size: .62rem; color: var(--muted); text-align: center;
}
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-teks { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.slide-teks strong { font-size: .9rem; color: var(--navy-900); }
.slide-baris .btn[disabled] { opacity: .4; }
@media (max-width: 560px) {
  .slide-baris { gap: 10px; }
  .slide-thumb { width: 84px; flex: 0 0 84px; height: 28px; }
  .slide-teks { flex: 1 1 100%; }
}

/* ============================================================
   "Kenapa Memilih Kami" — kartu keunggulan berikon
   ============================================================ */
.keunggulan-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 26px; }
.keunggulan {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px;
  box-shadow: 0 1px 2px rgba(16, 48, 90, .05); text-align: left;
}
.keunggulan-ikon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-100), #dbe9fa); color: var(--navy-600);
  border: 1px solid #cfe0f5; margin-bottom: 14px;
}
.keunggulan-ikon svg { width: 22px; height: 22px; }
.keunggulan h3 { font-size: .98rem; margin: 0 0 6px; color: var(--navy-900); }
.keunggulan p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.keunggulan-ikon.kecil { width: 34px; height: 34px; border-radius: 9px; margin: 0; }
.keunggulan-ikon.kecil svg { width: 17px; height: 17px; }

/* ============================================================
   Galeri foto kegiatan
   ============================================================ */
.galeri-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 26px; }
.galeri-item {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(16, 48, 90, .05);
  display: flex; flex-direction: column;
}
.galeri-item a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f8; }
.galeri-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.galeri-item:hover img { transform: scale(1.04); }
.galeri-item figcaption { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.galeri-item figcaption strong { font-size: .9rem; color: var(--navy-900); }
.galeri-pratinjau { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #eef2f8; }
.galeri-pratinjau img { width: 100%; display: block; max-height: 320px; object-fit: cover; }
@media (max-width: 520px) {
  .galeri-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .keunggulan-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Testimoni di beranda publik
   ============================================================ */
.testimoni-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 26px; }
.testimoni {
  margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 2px rgba(16, 48, 90, .05);
}
.testimoni-bintang { color: var(--gold); letter-spacing: .12em; font-size: 1rem; }
.testimoni blockquote {
  margin: 0; color: var(--ink); font-size: .93rem; line-height: 1.65; flex: 1;
  font-style: italic;
}
.testimoni figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.testimoni figcaption > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.testimoni figcaption strong { font-size: .9rem; color: var(--navy-900); }
.testimoni-foto {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; overflow: hidden;
  background: var(--blue-100); color: var(--navy); border: 1px solid #cfe0f5;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.testimoni-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Grid pratinjau testimoni pada halaman pengelolaan */
.testi-mini { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--blue-100);
  display: grid; place-items: center; color: var(--navy); font-weight: 700; font-size: .8rem; flex: 0 0 46px; }
.testi-mini img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Perbandingan kandidat Nurse vs Midwife
   ============================================================ */
.stase-banding { display: flex; flex-direction: column; gap: 16px; }
.stase-baris {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: #fbfcfe; display: flex; flex-direction: column; gap: 6px;
}
.stase-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stase-kepala strong { font-size: 1rem; color: var(--navy-900); }
.stase-kepala .tbl-sub { margin-left: auto; }

/* ============================================================
   Ceklis kehadiran materi (matriks materi x peserta)
   ============================================================ */
.ceklis-tbl th, .ceklis-tbl td { white-space: nowrap; }
.ceklis-th { min-width: 120px; max-width: 150px; vertical-align: top; text-align: left; }
.ceklis-no {
  display: inline-block; font-size: .7rem; font-weight: 800; color: var(--navy-600);
  background: var(--blue-100); border: 1px solid #cfe0f5; border-radius: 5px; padding: 0 5px; margin-bottom: 3px;
}
.ceklis-judul {
  display: block; font-size: .78rem; font-weight: 600; color: var(--navy-900);
  white-space: normal; line-height: 1.25; margin-bottom: 2px;
}
.ceklis-td { padding: 6px 4px !important; }
/* Lima tombol status per sel: ✓ mengikuti · × tidak mengikuti · I izin · S sakit · – kosong.
   Radio asli disembunyikan; label-lah yang tampak sebagai tombol. Tanpa JavaScript,
   formulir tetap terkirim dan tersimpan lewat tombol "Simpan Semua Perubahan". */
.ceklis-pilih { display: inline-flex; gap: 3px; align-items: center; }
.ceklis-btn {
  position: relative; display: inline-grid; place-items: center; cursor: pointer;
  width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--line);
  background: #fff; color: #9aa8bd; font-weight: 800; font-size: .84rem; line-height: 1;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ceklis-btn input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.ceklis-btn:hover { border-color: var(--navy-600); color: var(--navy-600); transform: translateY(-1px); }
.ceklis-btn:focus-within { outline: 2px solid var(--navy-600); outline-offset: 1px; }
.ceklis-btn.on { font-weight: 800; box-shadow: inset 0 0 0 1px currentColor; }
.ceklis-btn.on.ceklis-hijau { background: var(--green-bg); border-color: #9fd8bd; color: var(--green); }
.ceklis-btn.on.ceklis-merah { background: var(--red-bg); border-color: #eebcb8; color: var(--red); }
.ceklis-btn.on.ceklis-kuning { background: var(--amber-bg); border-color: #ecd49b; color: var(--amber); }
.ceklis-btn.on.ceklis-biru { background: var(--blue-bg); border-color: #b9d5f2; color: var(--navy-600); }
.ceklis-btn.on.ceklis-netral { background: #eef1f6; border-color: #d7dfea; color: var(--muted); }
/* Sedang menyimpan (dipakai skrip saat menyimpan satu sel) */
.ceklis-pilih.menyimpan { opacity: .55; }
.ceklis-tanda {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line); background: #fff; font-weight: 800; font-size: .85rem; color: var(--muted);
}
.ceklis-tanda.ceklis-hijau { background: var(--green-bg); border-color: #bfe3d2; color: var(--green); }
.ceklis-tanda.ceklis-kuning { background: var(--amber-bg); border-color: #f0dfb4; color: var(--amber); }
.ceklis-tanda.ceklis-biru { background: var(--blue-bg); border-color: #cfe0f5; color: var(--navy-600); }
.ceklis-tanda.ceklis-merah { background: var(--red-bg); border-color: #f2c9c6; color: var(--red); }
/* Contoh kecil di dalam kotak petunjuk */
.ceklis-contoh {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid var(--line); background: #fff; font-weight: 800; font-size: .72rem;
  color: var(--muted); vertical-align: -4px;
}
.ceklis-contoh.ceklis-hijau { background: var(--green-bg); border-color: #bfe3d2; color: var(--green); }
.ceklis-contoh.ceklis-merah { background: var(--red-bg); border-color: #f2c9c6; color: var(--red); }
.ceklis-contoh.ceklis-kuning { background: var(--amber-bg); border-color: #f0dfb4; color: var(--amber); }
.ceklis-contoh.ceklis-biru { background: var(--blue-bg); border-color: #cfe0f5; color: var(--navy-600); }
.ceklis-contoh.ceklis-kosong { background: #eef1f6; border-color: #d7dfea; }
/* Kolom progres per peserta */
.ceklis-selesai { min-width: 104px; }
.ceklis-prog {
  display: block; height: 6px; border-radius: 999px; background: #eef2f8; overflow: hidden; margin-bottom: 3px;
}
.ceklis-prog i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.ceklis-selesai .badge { margin-top: 4px; }
.ceklis-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: .8rem; color: var(--muted);
}
.ceklis-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .ceklis-btn { width: 22px; height: 22px; font-size: .76rem; border-radius: 6px; }
  .ceklis-pilih { gap: 2px; }
  .ceklis-th { min-width: 96px; max-width: 120px; }
}

/* ============================================================
   Jam langsung dua zona (WIB & Saudi)
   ============================================================ */
.jam-zona-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.jam-kartu {
  background: linear-gradient(160deg, #f8fbff, #eef4fc); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.jam-kartu.utama { border-color: #b9d2ef; box-shadow: inset 0 0 0 1px #d7e6f8; background: linear-gradient(160deg, #eef6ff, #e3eefb); }
.jam-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.jam-angka {
  font-size: 1.9rem; font-weight: 800; color: var(--navy-900); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.jam-kartu.utama .jam-angka { color: var(--navy-600); }
.jam-tanggal { font-size: .78rem; color: var(--muted); }

.jam-cek {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.jam-cek-hasil { font-size: .9rem; color: var(--ink); }
.jam-cek-pasangan { font-weight: 700; color: var(--navy-900); margin-top: 2px; }
.jam-cek-pasangan .tbl-sub { font-weight: 500; }

/* Versi ringkas di bilah atas */
.jam-zona-mini {
  display: flex; align-items: center; gap: 8px; margin-right: 14px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #f7fafe; font-size: .8rem; color: var(--navy-800);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jam-zona-mini .jz { display: inline-flex; align-items: baseline; gap: 4px; }
.jam-zona-mini .jz b { font-weight: 700; color: var(--navy-900); }
.jam-zona-mini .jz i { font-style: normal; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.jam-zona-mini .jz-sep { color: var(--line); }
@media (max-width: 1100px) { .jam-zona-mini { display: none; } }
@media (max-width: 700px) {
  .jam-angka { font-size: 1.5rem; }
  .jam-cek { gap: 10px; }
}

/* ---------- Judul halaman ---------- */
.page-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head .sub { color: var(--muted); font-size: .88rem; margin: 4px 0 0; }
.page-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Flash ---------- */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius); margin-bottom: 18px;
  font-size: .9rem; border: 1px solid transparent;
}
.flash svg { width: 18px; height: 18px; flex: 0 0 18px; }
.flash.ok { background: var(--green-bg); color: #10563a; border-color: #bfe3d2; }
.flash.err { background: var(--red-bg); color: #7d1b15; border-color: #f2c9c6; }
.flash .mark {
  width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}

/* ---------- Kartu ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 48, 90, .05), 0 12px 28px -16px rgba(16, 48, 90, .22);
  margin-bottom: 22px; overflow: hidden; min-width: 0; max-width: 100%;
}
.card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfeff 0%, #f5f9fd 100%);
}
.card-head h2 { font-size: 1rem; }
.card-head .page-actions, .card-head .actions { margin-left: auto; }
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }
.card.hilite { border-top: 3px solid var(--gold); }
/* Kartu sambutan beranda (dashboard) — panel navy bergradien, tetap formal */
.card.sambutan {
  border: 0; color: #e8f0fa;
  background:
    radial-gradient(520px 200px at 92% -40px, rgba(201, 162, 39, .28), transparent 70%),
    linear-gradient(135deg, #0b2544 0%, #123f6c 58%, #1e5a9c 100%);
  box-shadow: 0 14px 30px -16px rgba(10, 35, 64, .65);
}
.sambutan .card-body { padding: 22px; }
.sambutan h2 { color: #fff; }
.sambutan .lead { color: #c9daea; margin: 4px 0 0; }
.sambutan .avatar { border-color: rgba(255, 255, 255, .55); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.sambutan .btn { background: #fff; border-color: #fff; color: var(--navy-900); }
.sambutan .btn:hover { background: #eaf2fc; color: var(--navy-900); }
.sambutan .btn.ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; }
.sambutan .btn.ghost:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.grid { display: grid; gap: 20px; }
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Lima kotak statistik (mis. halaman Peserta): 5 sejajar di layar lebar, 3 + 2 di layar
   sedang, 2 di ponsel. Dipilih eksplisit (bukan auto-fit) supaya tidak pernah berakhir
   dengan 4 + 1 yang terlihat pincang di sekitar 1200px. */
.grid-5 { display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1279px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split { display: grid; gap: 22px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
/* Penting: item grid harus boleh menyusut (min-width:0) agar tabel yang lebar
   tidak memaksa kartu/kolom melebar melampaui layar (khususnya di ponsel). */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .grid > *, .split > * { min-width: 0; }
.split > *, .grid > * { max-width: 100%; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   PENGATURAN DASHBOARD — banner RINGKAS, teks sambutan, pintasan menu.
   Banner sengaja pendek (±96px, 72px di ponsel) supaya tidak menutupi
   kartu statistik/filter seperti pada desain hero besar sebelumnya.
   ============================================================ */
.dsh-banner {
  position: relative; margin-bottom: 18px; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); background: #10305a;
}
.dsh-banner-slide {
  display: none; align-items: center; gap: 16px;
  /* Flier 3240 × 1080 (3:1). Di layar komputer tinggi banner dibuat
     200–260 px dan GAMBAR DIPASANG UTUH (background-size auto 100%) di tengah,
     sisa ruang di kiri/kanan diisi gradasi navy lembaga — jadi tidak ada
     bagian gambar yang terpotong. Di ponsel rasionya 3:1 seperti beranda. */
  padding: clamp(12px, 1.6vw, 22px) clamp(14px, 2vw, 26px);
  position: relative; color: #fff;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: auto 100%, cover;
}
@media (min-width: 901px) {
  .dsh-banner-slide { height: clamp(200px, 17vw, 260px); }
}
@media (max-width: 900px) {
  .dsh-banner-slide { aspect-ratio: 3 / 1; }
}
.dsh-banner-slide.aktif { display: flex; }
.dsh-banner-slide.tanpa-gambar { background: linear-gradient(120deg, var(--navy-900), var(--navy-600) 60%, #2f7fd1); }
.dsh-banner-tirai {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(6, 20, 38, .88) 0%, rgba(6, 20, 38, .55) 62%, rgba(6, 20, 38, .25) 100%);
}
.dsh-banner-isi {
  position: relative; z-index: 1; min-width: 0; flex: 1;
  display: flex; flex-direction: column; gap: 1px;
}
.dsh-banner-label {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #f0d478;
  font-weight: 700;
}
.dsh-banner-isi strong {
  font-size: clamp(.9rem, 1.4vw, 1.15rem); line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsh-banner-sub {
  font-size: clamp(.72rem, .95vw, .85rem); color: #d9e4f2;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.dsh-banner-btn { position: relative; z-index: 1; flex: 0 0 auto; align-self: center; }
.dsh-banner-titik {
  position: absolute; right: 14px; bottom: 8px; z-index: 2; display: flex; gap: 5px;
}
.dsh-banner-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 99px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45);
}
.dsh-banner-dot.aktif { background: var(--gold); width: 18px; }

/* Teks sambutan */
.dsh-sambutan {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px;
  padding: 12px 16px; border-radius: 10px; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--navy-600);
  box-shadow: var(--shadow);
}
.dsh-sambutan strong { font-size: 1rem; color: var(--navy-900); }
.dsh-sambutan span { font-size: .84rem; color: var(--muted); }

/* Pintasan menu */
.dsh-pintasan {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.dsh-pintasan-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: .84rem; font-weight: 600; color: var(--navy-800); text-decoration: none;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.dsh-pintasan-item:hover {
  background: var(--blue-100); border-color: #cfe0f5; color: var(--navy-900);
  transform: translateY(-1px); text-decoration: none;
}
.dsh-pintasan-ikon { display: inline-grid; place-items: center; color: var(--navy-600); }
.dsh-pintasan-ikon svg { width: 15px; height: 15px; }

/* Pratinjau di halaman Pengaturan Dashboard */
.dsh-pratinjau {
  padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: #f8fafd;
}
.dsh-pratinjau .dsh-banner,
.dsh-pratinjau .dsh-sambutan,
.dsh-pratinjau .dsh-pintasan { margin-bottom: 0; }

@media (max-width: 700px) {
  .dsh-banner-slide { padding: 10px 12px; gap: 10px; }
  .dsh-banner-isi strong { font-size: .84rem; }
  .dsh-banner-sub { display: none; }
  .dsh-banner-btn.btn.sm { padding: 5px 9px; font-size: .72rem; }
  .dsh-banner-label { font-size: .56rem; }
  .dsh-banner-titik { right: 10px; bottom: 5px; }
  .dsh-banner-dot { width: 6px; height: 6px; }
  .dsh-banner-dot.aktif { width: 14px; }
  .dsh-sambutan { padding: 10px 12px; }
  .dsh-pintasan { gap: 8px; }
  .dsh-pintasan-item { padding: 7px 11px; font-size: .8rem; }
}

/* ---------- Statistik ---------- */
.stat {
  position: relative;
  /* Gradien sangat halus: kartu terasa "hidup" tanpa meninggalkan nuansa formal. */
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); border-left: 4px solid var(--navy-600);
  --tone: var(--navy-600); --tone-bg: #eef2f8;
}
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-top span:first-child { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* Ikon dalam kotak berwarna lembut (bukan garis tipis pucat) */
.stat-ico {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tone-bg); color: var(--tone);
}
.stat-ico svg { width: 17px; height: 17px; }
.stat-value { font-size: 1.55rem; font-weight: 700; color: var(--navy-900); margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; }
/* Nada warna: biru (pendaftar), hijau (akademik/baik), emas (uang), merah (tunggakan), ungu (materi) */
.stat.nada-biru { --tone: var(--blue-500); --tone-bg: #e8f1fb; }
.stat.nada-hijau { --tone: var(--green); --tone-bg: var(--green-bg); }
.stat.nada-emas { --tone: #a8801a; --tone-bg: #fdf3dd; }
.stat.nada-merah { --tone: var(--red); --tone-bg: var(--red-bg); }
.stat.nada-ungu { --tone: #6f5bd0; --tone-bg: #eeebfb; }
.stat.nada-biru, .stat.nada-hijau, .stat.nada-emas, .stat.nada-merah, .stat.nada-ungu { border-left-color: var(--tone); }
/* Kotak statistik yang bisa diklik (tautan penyaring) */
a.stat-link {
  display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
a.stat-link .stat-sub { padding-right: 22px; }
a.stat-link::after {
  content: '→'; position: absolute; right: 14px; bottom: 12px;
  font-size: .95rem; line-height: 1; color: var(--navy-600);
  opacity: .3; transition: opacity .15s ease, transform .15s ease;
}
a.stat-link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16, 48, 90, .13); background: #fbfdff; }
a.stat-link:hover::after { opacity: 1; transform: translateX(3px); }
a.stat-link:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
a.stat-link.aktif { border-left-color: var(--gold); background: linear-gradient(180deg, #fffdf6 0%, #fdf7e8 100%); box-shadow: 0 0 0 2px rgba(201, 162, 39, .28), var(--shadow); }
a.stat-link.aktif .stat-top span:first-child { color: var(--navy-800); font-weight: 600; }
a.stat-link.aktif::after { content: '✓'; opacity: 1; color: var(--gold); }

/* ---------- Tabel ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tbl thead th {
  text-align: left; padding: 11px 14px; background: #f6f9fd;
  border-bottom: 1px solid var(--line); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap;
}
table.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
table.tbl tbody tr:hover { background: #fafcff; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
.ta-right { text-align: right !important; }
.ta-center { text-align: center !important; }
.tbl-sub { display: block; font-size: .76rem; color: var(--muted); }
.nowrap { white-space: nowrap; }
.empty {
  padding: 34px 20px; text-align: center; color: var(--muted);
  background: #fbfcfe; border: 1px dashed var(--line); border-radius: var(--radius); font-size: .9rem;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.badge-hijau { background: var(--green-bg); color: var(--green); border-color: #c5e7d6; }
.badge-kuning { background: var(--amber-bg); color: var(--amber); border-color: #f0dfb4; }
.badge-biru { background: var(--blue-bg); color: var(--navy-600); border-color: #cfe0f5; }
.badge-merah { background: var(--red-bg); color: var(--red); border-color: #f2c9c6; }
.badge-netral { background: #eef1f6; color: var(--muted); border-color: #e0e6ef; }

/* ---------- Formulir ---------- */
.form-grid { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: .82rem; font-weight: 600; color: var(--navy-800); }
.inp {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .9rem; color: var(--ink); background: #fff;
}
.inp:focus { outline: 2px solid #cfe0f5; border-color: var(--navy-600); }
.inp[readonly] { background: #f6f8fc; color: var(--muted); }
textarea.inp { resize: vertical; }
.hint { font-size: .76rem; color: var(--muted); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.filter-bar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 20px; background: #fbfcfe; border-bottom: 1px solid var(--line);
}
.filter-bar .field { min-width: 150px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px; background: #fff; cursor: pointer; }
.radio-chip:has(input:checked) { border-color: var(--navy-600); background: var(--blue-100); font-weight: 600; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  padding: 10px 16px; border-radius: 8px; font-size: .88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--navy-800); text-decoration: none; color: #fff; }
.btn svg { width: 16px; height: 16px; }
.btn.sm { padding: 6px 11px; font-size: .8rem; }
.btn.ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn.ghost:hover { background: #f4f7fc; color: var(--navy-900); }
.btn.danger { background: #fff; color: var(--red); border-color: #f0c8c5; }
.btn.danger:hover { background: var(--red-bg); color: var(--red); }
.btn.ok { background: var(--green); border-color: var(--green); }
.btn.ok:hover { background: #15603f; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #3a2c00; }
.btn.gold:hover { background: #b8931f; color: #2c2100; }
.btn.block { width: 100%; }
.btn-set { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: inline; }

/* ---------- Paginasi & progres ---------- */
.pager { display: flex; align-items: center; gap: 6px; padding: 14px 20px; flex-wrap: wrap; }
.page-btn {
  min-width: 34px; text-align: center; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: #fff; font-size: .84rem; color: var(--navy);
}
.page-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.pager-info { margin-left: auto; font-size: .78rem; color: var(--muted); }
.prog { position: relative; background: #eef2f8; border-radius: 999px; height: 20px; overflow: hidden; min-width: 110px; }
.prog-bar { height: 100%; background: var(--green); }
.prog-bar.warn { background: var(--gold); }
.prog-bar.bad { background: #d8604f; }
.prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #21304a; }

/* ---------- Grafik batang mini (rekap bulanan dashboard) ---------- */
.mini-chart { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.mini-chart-row { display: flex; align-items: center; gap: 7px; }
.mini-chart-row .mc-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); width: 46px; flex: 0 0 46px;
}
.mini-chart-track { flex: 1; height: 8px; border-radius: 999px; background: #eef2f8; overflow: hidden; min-width: 60px; }
.mini-chart-fill { display: block; height: 100%; border-radius: 999px; }
.mini-chart-fill.tagihan { background: linear-gradient(90deg, var(--navy-600), var(--navy)); }
.mini-chart-fill.masuk { background: linear-gradient(90deg, var(--blue-500), #63b3e8); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l-tagihan { background: var(--navy); }
.legend .l-masuk { background: var(--blue-500); }

/* ---------- Detail / key-value ---------- */
.kv { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kv-item {
  background: #f8fafd; border: 1px solid #eaf0f8; border-radius: 9px;
  padding: 10px 12px; min-width: 0;
}
.kv-item span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kv-item strong { font-size: .94rem; font-weight: 600; color: var(--navy-900); }
.note { background: #f6f9fd; border-left: 3px solid var(--navy-600); padding: 12px 14px; border-radius: 0 8px 8px 0; font-size: .86rem; color: var(--muted); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab { padding: 9px 14px; font-size: .88rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.on { color: var(--navy-900); border-color: var(--navy-600); }
.tab:hover { text-decoration: none; color: var(--navy-600); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money.neg { color: var(--red); }

/* ============================================================
   Halaman publik (landing, login, pendaftaran)
   ============================================================ */
.site-head {
  background: var(--navy-900); color: #fff; padding: 16px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.site-head .brand-mark { background: linear-gradient(135deg, var(--blue-500), var(--navy-600)); }
.site-head .brand-text strong { color: #fff; }
.site-head .brand-text span { color: #9fb4d4; }
.site-head nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.site-head nav a { color: #dce6f5; font-size: .88rem; font-weight: 500; padding: 8px 12px; border-radius: 7px; }
.site-head nav a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.site-head nav a.solid { background: #fff; color: var(--navy-900); }
.hero {
  background: linear-gradient(140deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-600) 100%);
  color: #fff; padding: 62px 24px 72px;
}
.hero-inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; font-family: var(--serif); font-size: 2.35rem; line-height: 1.15; }
.hero .lead { color: #cbd9ec; font-size: 1.02rem; max-width: 60ch; margin-top: 12px; }
.hero .eyebrow { display: inline-block; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-card { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 20px; backdrop-filter: blur(8px); }
.hero-card h3 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.hero-card ul { margin: 0; padding-left: 18px; color: #d7e3f4; font-size: .88rem; }
.hero-card li { margin-bottom: 7px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 46px 0; }
.section h2 { font-size: 1.4rem; }
.section .lead { color: var(--muted); margin-top: 6px; }
.program-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 26px; }
.program-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.program-card h3 { font-size: 1.02rem; }
.program-card .kat { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 700; }
.program-card .desc { color: var(--muted); font-size: .88rem; flex: 1; }
.program-card .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.program-card .harga { font-size: 1.1rem; font-weight: 700; color: var(--navy-900); }
/* Foto promosi program: gambar utama kartu program (beranda & daftar program).
   Margin negatif dipakai agar gambar menempel ke tepi kartu tanpa mengubah
   padding kartu untuk isi teksnya. */
.program-card { overflow: hidden; }
.program-foto {
  margin: -20px -20px 2px; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f8;
  border-bottom: 1px solid var(--line);
}
.program-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.program-card:hover .program-foto img { transform: scale(1.05); }
.program-foto-pratinjau {
  width: 260px; height: 163px; flex: 0 0 260px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #eef2f8; display: grid; place-items: center;
  color: var(--muted); font-size: .78rem; text-align: center; gap: 6px;
}
.program-foto-pratinjau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.program-foto-pratinjau.kosong { border-style: dashed; }
.program-foto-pratinjau svg { width: 22px; height: 22px; opacity: .6; }
.program-foto-detail {
  width: 240px; flex: 0 0 240px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #eef2f8;
}
.program-foto-detail img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .program-foto-pratinjau { width: 100%; flex: 0 0 auto; height: 170px; }
  .program-foto-detail { width: 100%; flex: 0 0 auto; }
}
.site-foot { background: #0c203a; color: #8fa6c6; padding: 26px 24px; font-size: .84rem; }

.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
/* Catatan: aturan ponsel untuk panel Masuk sengaja diletakkan SETELAH aturan
   dasarnya (lihat blok responsif di bawah). Sebelumnya .auth-side{display:none}
   ditulis di sini sehingga tertimpa oleh .auth-side{display:flex} di bawahnya —
   akibatnya panel tampil penuh di ponsel dan form login jadi jauh di bawah. */
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } }
.auth-side {
  background: linear-gradient(150deg, var(--navy-900), var(--navy) 60%, var(--navy-600));
  color: #fff; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.auth-side h2 { color: #fff; font-family: var(--serif); font-size: 1.9rem; }
.auth-side p { color: #cbd9ec; max-width: 52ch; font-size: .94rem; line-height: 1.65; }
.auth-side ul { color: #d7e3f4; padding-left: 18px; font-size: .9rem; }
/* Teks panel Masuk (diatur di Pengaturan → Teks Halaman Masuk) */
.auth-tagline {
  color: #fff !important; font-size: 1.02rem !important; font-weight: 600;
  letter-spacing: .01em; border-left: 3px solid var(--gold); padding-left: 12px; max-width: 46ch;
}
.auth-motto { color: var(--gold) !important; font-style: italic; font-size: .9rem !important; }
.auth-misi { border-top: 1px solid rgba(255, 255, 255, .23); padding-top: 16px; }
.auth-misi h3 {
  color: #fff; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 8px; color: var(--gold);
}
.auth-misi p { margin: 0; color: #e2eaf6; max-width: 52ch; }
.auth-penutup { color: #fff !important; font-weight: 600; font-size: .92rem !important; }
.auth-kontak { font-size: .8rem !important; color: #9fb4d4 !important; margin-top: 4px; }

/* PENTING: blok media query untuk panel Masuk harus berada SETELAH aturan
   dasarnya. Dengan spesifisitas yang sama, aturan yang ditulis lebih akhir
   yang menang — menaruhnya di atas membuat override ini tidak berefek
   (pernah terjadi dua kali: aturan ponsel dan aturan layar pendek). */

/* Laptop dengan layar pendek: rapatkan panel Masuk agar naskahnya muat
   tanpa perlu menggulir berlebihan. */
@media (min-width: 901px) and (max-height: 840px) {
  .auth-side { padding: 22px 34px; gap: 10px; }
  .auth-side h2 { font-size: 1.5rem; }
  .auth-side p { font-size: .84rem; line-height: 1.5; max-width: 56ch; }
  .auth-tagline { font-size: .92rem !important; }
  .auth-side .brand-mark.logo { width: 48px; height: 48px; flex: 0 0 48px; }
  .auth-misi { padding-top: 10px; }
  .auth-misi p { font-size: .84rem; }
}
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 30px; width: 100%; max-width: 460px; }
.auth-card h1 { font-size: 1.35rem; }
.auth-card .sub { color: var(--muted); font-size: .88rem; margin: 6px 0 22px; }
.auth-foot { margin-top: 18px; font-size: .86rem; color: var(--muted); text-align: center; }
.demo-list { font-size: .8rem; margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; color: var(--muted); }
.demo-list code { background: #f2f5fa; padding: 1px 5px; border-radius: 4px; }

/* ============================================================
   Halaman cetak (invoice / kwitansi)
   ============================================================ */
.print-body { background: #e9edf4; }
.print-toolbar { display: flex; gap: 10px; padding: 16px; justify-content: center; }
.print-area { display: flex; justify-content: center; padding: 0 12px 40px; }
.sheet {
  background: #fff; width: 210mm; min-height: 250mm; margin: 0 auto 40px; padding: 18mm 16mm;
  box-shadow: 0 10px 30px rgba(10, 35, 64, .18); font-size: 13.5px; color: var(--ink);
}
.doc-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px double var(--navy-900); padding-bottom: 14px; }
.doc-head .lembaga { display: flex; gap: 12px; align-items: flex-start; }
.doc-head .lembaga .brand-mark { width: 46px; height: 46px; }
.doc-head h1 { font-family: var(--serif); font-size: 1.4rem; letter-spacing: .02em; }
.doc-head .alamat { font-size: .8rem; color: var(--muted); }
.doc-title { text-align: right; }
.doc-title h2 { font-size: 1.15rem; letter-spacing: .16em; text-transform: uppercase; }
.doc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.doc-meta .box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.doc-meta .box span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
table.doc-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: .86rem; }
table.doc-tbl th { background: var(--navy-900); color: #fff; text-align: left; padding: 8px 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
table.doc-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.doc-tbl tfoot td { font-weight: 700; background: #f6f9fd; }
.doc-total { display: flex; justify-content: flex-end; margin-top: 6px; }
.doc-total table { min-width: 320px; font-size: .88rem; }
.doc-total td { padding: 5px 8px; }
.doc-total td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.doc-sign { display: flex; justify-content: space-between; gap: 30px; margin-top: 40px; }
.doc-sign div { text-align: center; min-width: 190px; }
.doc-sign .line { margin-top: 62px; border-top: 1px solid var(--ink); padding-top: 5px; font-weight: 600; }
.doc-foot { margin-top: 26px; font-size: .76rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; }
.stamp { display: inline-block; border: 2px solid var(--green); color: var(--green); border-radius: 8px; padding: 4px 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; transform: rotate(-6deg); }
.stamp.merah { border-color: var(--red); color: var(--red); }

/* ============================================================
   Perjanjian Kerja Sama (MOU) Tutor
   Naskah ditampilkan seperti dokumen resmi (putih, serif, bernomor),
   baik di halaman aplikasi maupun di lembar cetak A4.
   ============================================================ */
.mou-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 2px solid var(--navy-900); padding-bottom: 10px; margin-bottom: 20px; flex-wrap: wrap;
}
.mou-kop-kiri { display: flex; align-items: center; gap: 10px; }
.mou-kop-kiri strong { display: block; font-size: .86rem; color: var(--navy-900); letter-spacing: .02em; }
.mou-kop-kiri span { display: block; font-size: .72rem; color: var(--muted); }
.mou-logo { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; }
.mou-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mou-judul {
  text-align: center; font-family: var(--serif); font-size: 1.15rem;
  letter-spacing: .06em; margin: 0 0 4px; color: var(--navy-900);
}
.mou-subjudul {
  text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .18em;
  color: var(--muted); margin-bottom: 20px;
}
.mou-pembuka { font-size: .88rem; line-height: 1.7; margin: 0 0 16px; text-align: justify; }
.mou-pihak { margin-bottom: 16px; padding-left: 10px; border-left: 3px solid var(--blue-100); }
.mou-pihak-judul {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; color: var(--navy-600); margin-bottom: 6px;
}
table.mou-identitas { border-collapse: collapse; font-size: .86rem; margin-bottom: 6px; }
table.mou-identitas td { padding: 2px 6px 2px 0; vertical-align: top; }
table.mou-identitas td:first-child { width: 78px; color: var(--muted); }
.mou-sebut { font-size: .86rem; }
.mou-pasal { margin: 18px 0; }
.mou-pasal h3 {
  text-align: center; font-size: .84rem; letter-spacing: .1em; color: var(--navy-900);
  margin-bottom: 10px; line-height: 1.4;
}
.mou-pasal h3 span { font-size: .78rem; letter-spacing: .06em; color: var(--navy-600); }
.mou-pasal p { font-size: .86rem; margin: 0 0 8px; }
.mou-pasal ol { list-style: none; margin: 0; padding: 0; }
.mou-pasal li {
  position: relative; font-size: .86rem; line-height: 1.65; text-align: justify;
  padding-left: 26px; margin-bottom: 7px;
}
.mou-nomor { position: absolute; left: 6px; font-weight: 700; color: var(--navy-600); }
.mou-isi-kosong { color: var(--muted); letter-spacing: .04em; }

/* Blok tanda tangan pada naskah */
.mou-ttd { margin-top: 26px; }
.mou-ttd-tempat { font-size: .86rem; margin-bottom: 16px; }
.mou-ttd-dua { display: flex; gap: 24px; flex-wrap: wrap; }
.mou-ttd-blok { flex: 1; min-width: 200px; text-align: center; }
.mou-ttd-label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; color: var(--navy-900); }
.mou-ttd-sub { font-size: .72rem; color: var(--muted); margin-bottom: 6px; }
.mou-ttd-ruang {
  height: 90px; display: grid; place-items: center; position: relative;
  border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfe; margin-bottom: 6px;
}
.mou-ttd-img { max-height: 84px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mou-ttd-belum { font-size: .72rem; color: var(--muted); font-style: italic; }
.mou-materai {
  width: 62px; height: 62px; border: 1px dashed #c9a227; border-radius: 50%;
  display: grid; place-items: center; font-size: .58rem; color: #a8801a;
  text-align: center; line-height: 1.15; letter-spacing: .04em; transform: rotate(-8deg);
}
.mou-ttd-garis { border-top: 1px solid var(--ink); margin: 0 12px; }
.mou-ttd-nama { font-size: .86rem; margin-top: 4px; }
.mou-ttd-ket { font-size: .72rem; color: var(--muted); }
.mou-ttd-catatan {
  margin-top: 14px; font-size: .72rem; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: 8px;
}

/* Halaman lihat di aplikasi: naskah tampil sebagai "kertas" putih */
.mou-dokumen {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow); margin-bottom: 22px;
}
.mou-status-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
}

/* Kotak tanda tangan (kanvas) */
.mou-kanvas-bingkai {
  position: relative; border: 2px dashed var(--navy-600); border-radius: 10px;
  background: #fdfefe; padding: 0; margin-top: 10px; overflow: hidden;
}
.mou-kanvas-bingkai canvas {
  display: block; width: 100%; height: 200px; cursor: crosshair; touch-action: none;
}
.mou-kanvas-nama {
  position: absolute; left: 14px; bottom: 28px; font-size: .74rem; color: var(--muted);
  letter-spacing: .04em; pointer-events: none;
}
.mou-kanvas-hapus { position: absolute; top: 8px; right: 8px; }
.mou-ttd-terpasang { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mou-ttd-terpasang img {
  max-width: 280px; max-height: 120px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; padding: 6px;
}
@media (max-width: 620px) {
  .mou-kanvas-bingkai canvas { height: 160px; }
  .card > .card-body > .mou-dokumen { padding: 16px 14px; }
}

/* ============================================================
   Tanggal terbit di tengah kaki sertifikat (tanpa stempel).
   Logo lembaga tampil di POJOK KIRI ATAS & POJOK KANAN ATAS.
   ============================================================ */
.cert-tanggal {
  font-size: 9pt; color: var(--muted); text-align: center; line-height: 1.35;
  max-width: 58mm;
}
/* Logo kanan atas: didorong ke pojok kanan agar kop seimbang */
.awd-logo.kanan { justify-self: end; }
.cert-head .cert-mark.logo.kanan { justify-self: end; }

/* Grid caption bagian beranda (halaman Beranda: Teks & Tampilan) */
.caption-grid {
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.caption-blok {
  border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 14px 16px;
  min-width: 0;
}
.caption-judul {
  font-size: .8rem; font-weight: 700; color: var(--navy-800); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.warna-blok { min-width: 0; }
.warna-label { display: block; font-size: .78rem; font-weight: 600; color: var(--navy-800); margin-bottom: 6px; }
.warna-baris { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.warna-input { width: 64px; height: 38px; padding: 2px; flex: 0 0 auto; }
/* input[type=color] bawaan peramban perlu tinggi eksplisit */
input[type="color"].inp { height: 38px; padding: 2px 4px; cursor: pointer; }

/* Dua kotak logo (utama/kiri & pojok kanan sertifikat) di Pengaturan */
.logo-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 4px;
}
.logo-kotak {
  border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 14px 16px;
  min-width: 0;
}
.logo-label {
  font-size: .8rem; font-weight: 700; color: var(--navy-800);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.logo-pratinjau {
  width: 96px; height: 96px; margin: 0 auto 4px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 6px;
}
.logo-pratinjau img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-kotak .hint { text-align: center; }

/* Blok pengaturan dua penandatangan pada form */
.ttd-blok {
  margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: #f8fafd;
}
.ttd-blok-judul {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-600); margin-bottom: 6px;
}
.ttd-blok .form-grid { margin-top: 0; }

/* Blok "Penerima Sertifikat" pada form sertifikat penghargaan */
.penerima-blok {
  margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: #f8fafd;
}
.penerima-blok-judul {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-600); margin-bottom: 10px;
}
.penerima-blok .form-grid { margin-top: 0; }

/* Lembar cetak MOU */
.mou-sheet { font-size: 12.5px; }
.mou-sheet .mou-judul { font-size: 1.05rem; }
.mou-sheet .mou-pasal li, .mou-sheet .mou-pembuka { font-size: 11.4px; line-height: 1.55; }
.mou-sheet .mou-ttd-ruang { break-inside: avoid; }
.mou-sheet .mou-pasal h3 { break-after: avoid; }
.mou-sheet .mou-ttd { break-inside: avoid; }
.mou-sheet .mou-kop { break-after: avoid; }

/* Lembar jawaban / try out peserta */
.q-item { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; background: #fff; }
.q-item .no { font-size: .78rem; font-weight: 700; color: var(--navy-600); letter-spacing: .08em; text-transform: uppercase; }
.q-item .tanya { font-weight: 600; margin: 6px 0 12px; }
.q-opsi { display: flex; flex-direction: column; gap: 8px; }
.q-opsi label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-size: .9rem; }
.q-opsi label:hover { background: #f7fafe; }
.q-opsi label:has(input:checked) { border-color: var(--navy-600); background: var(--blue-100); }
.q-kunci { font-size: .8rem; margin-top: 10px; }
.q-kunci .ok { color: var(--green); font-weight: 700; }
.q-kunci .no { color: var(--red); font-weight: 700; }
.timer {
  position: sticky; top: 74px; z-index: 15; background: var(--navy-900); color: #fff;
  border-radius: 10px; padding: 12px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.timer strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.timer.warn { background: var(--red); }
/* Hitungan sisa waktu UJIAN (bukan per soal) di kartu timer pengerjaan try out */
.timer-ujian {
  display: inline-block; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #dce8f8; font-size: .74rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.timer-ujian.warn { background: rgba(255, 255, 255, .26); color: #fff; font-weight: 700; }
.q-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.q-nav a { text-align: center; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; font-size: .82rem; background: #fff; }
.q-nav a.done { background: var(--green-bg); border-color: #bfe3d2; color: var(--green); font-weight: 700; }

/* ============================================================
   LATIHAN SOAL — kartu paket peserta, hasil opsi, pratinjau impor PDF
   ============================================================ */
.latihan-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.latihan-kartu {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.latihan-kartu h3 { font-size: 1.02rem; color: var(--navy-900); margin: 0; }
.latihan-kartu p { margin: 0; font-size: .88rem; color: var(--muted); flex: 1; }
.latihan-label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.latihan-meta {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.latihan-kartu .btn-set { display: flex; gap: 8px; flex-wrap: wrap; }

/* Opsi pada halaman hasil/pembahasan: kunci = hijau, jawaban salah = merah */
.opsi-hasil {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: .9rem;
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; background: #fff;
}
.opsi-hasil.kunci { border-color: #bfe3d2; background: var(--green-bg); }
.opsi-hasil.salah { border-color: #f5c9c4; background: #fdf1f0; }
.pembahasan { white-space: pre-wrap; }

/* ============================================================
   DOKUMEN PENTING — berkas umum & surat kandidat (dua tanda tangan)
   ============================================================ */
.dokpent-grid { display: flex; flex-direction: column; gap: 12px; }
.dokpent-kartu {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #f8fafd;
}
.dokpent-ikon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--navy-600);
}
.dokpent-ikon svg { width: 20px; height: 20px; }
.dokpent-teks { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dokpent-teks strong { font-size: .92rem; color: var(--navy-900); }
.dokpent-kartu .btn-set { align-self: center; }
@media (max-width: 640px) {
  .dokpent-kartu { padding: 10px 12px; gap: 10px; }
  .dokpent-teks { flex: 1 1 100%; }
  .dokpent-kartu .btn-set { align-self: flex-start; }
}

/* Lembar surat (di aplikasi & saat dicetak) */
.surat-dokumen {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow); font-size: .9rem; line-height: 1.65;
}
.surat-nomor { font-size: .84rem; color: var(--muted); margin-bottom: 16px; }
.surat-p { margin: 0 0 12px; text-align: justify; }
.surat-dokumen .mou-kop-kanan { font-size: .74rem; font-weight: 700; color: var(--navy-600); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 700px) {
  .surat-dokumen { padding: 16px 14px; font-size: .84rem; }
  /* Blok tanda tangan ditumpuk agar tidak ada lebar minimum yang memaksa
     halaman melebar di ponsel (dulu min-width: 200px × 2 + gap = meluap). */
  .surat-dokumen .mou-ttd-dua { flex-direction: column; gap: 18px; }
  .surat-dokumen .mou-ttd-blok { min-width: 0; }
  .surat-dokumen .mou-ttd-ruang { height: 74px; }
}

/* Pratinjau hasil impor PDF: satu kotak per soal */
.impor-soal {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
  background: #f8fafd;
}
.impor-kepala {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.impor-kepala strong { color: var(--navy-900); }
.impor-soal .form-grid { gap: 12px; }
.impor-contoh {
  background: #f4f7fb; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  font-size: .82rem; line-height: 1.55; overflow-x: auto; white-space: pre; color: var(--navy-900);
  margin: 0 0 12px;
}
@media (max-width: 700px) {
  .latihan-grid { grid-template-columns: 1fr; gap: 14px; }
  .impor-soal { padding: 12px; }
}

/* ============================================================
   Sertifikat kelulusan (A4 landscape)
   ============================================================ */
.cert-sheet {
  width: 297mm; min-height: 208mm; background: #fff; position: relative;
  padding: 9mm; box-shadow: 0 10px 30px rgba(10, 35, 64, .2);
}
.cert-frame { border: 2px solid var(--navy-900); padding: 3mm; height: 100%; }
.cert-inner {
  border: 1px solid var(--gold); padding: 10mm 12mm; height: 100%;
  background:
    radial-gradient(circle at 12% 8%, rgba(201, 162, 39, .10), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(22, 63, 112, .08), transparent 42%),
    #fff;
  display: flex; flex-direction: column; text-align: center;
}
.cert-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4mm;
  align-items: center; text-align: left;
}
.cert-head .cert-head-teks { min-width: 0; }
.cert-head .cert-mark {
  width: 16mm; height: 16mm; flex: 0 0 16mm; border-radius: 3mm;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-900));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15pt; letter-spacing: 1px;
}
/* Perisai logo pada kop cetak (kertas putih, cukup diberi bingkai tipis) */
.cert-head .cert-mark.logo { background: #fff; padding: 1mm; border: 0.4mm solid var(--navy-900); }
.cert-head .cert-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.doc-head .brand-mark.logo { width: 16mm; height: 16mm; flex: 0 0 16mm; border: 0.4mm solid var(--navy-900); padding: 1mm; }
.cert-lembaga { font-family: var(--serif); font-size: 17pt; font-weight: 700; color: var(--navy-900); letter-spacing: .03em; }
.cert-sub { font-size: 8.5pt; color: var(--muted); }
.cert-title { margin: 5mm 0 1.5mm; }
.cert-title span {
  display: block; font-family: var(--serif); font-size: 13pt; letter-spacing: .5em;
  text-transform: uppercase; color: var(--navy-600); margin-bottom: 1mm;
}
.cert-title strong {
  display: block; font-family: var(--serif); font-size: 34pt; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-900); line-height: 1.05;
}
.cert-no { font-size: 9pt; color: var(--muted); letter-spacing: .08em; }
.cert-lead { font-size: 10pt; color: var(--muted); margin: 5mm 0 1mm; }
.cert-name {
  font-family: var(--serif); font-size: 27pt; color: var(--navy-900);
  border-bottom: 1px solid var(--line); display: inline-block; padding: 0 8mm 2mm; margin: 0 auto;
}
.cert-rule { width: 42mm; height: 2px; background: var(--gold); margin: 3mm auto; }
.cert-body { font-size: 10pt; color: #2c3a53; max-width: 200mm; margin: 0 auto 4mm; line-height: 1.55; }
.cert-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 6mm;
  max-width: 220mm; margin: 0 auto 6mm; text-align: left;
}
.cert-facts span { display: block; font-size: 7pt; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.cert-facts strong { font-size: 10pt; color: var(--navy-900); }
/* Kaki sertifikat: TTD kiri di pojok kiri bawah — tanggal terbit (tengah) —
   TTD kanan di pojok kanan bawah. Grid 1fr auto 1fr menjaga tanggal benar-benar
   di tengah lembar, bukan di tengah sisa ruang. */
.cert-sign {
  margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 6mm;
}
.cert-sign-kiri { justify-self: start; }
.cert-sign-kanan { justify-self: end; }
.cert-sign-tengah { justify-self: center; align-self: end; }
.cert-sign-date { font-size: 9.5pt; color: var(--muted); }
.cert-sign-box { text-align: center; min-width: 52mm; font-size: 9.5pt; color: var(--muted); }
.cert-sign-line { border-top: 1px solid var(--ink); padding-top: 2mm; font-weight: 700; color: var(--ink); font-size: 10.5pt; }
.cert-sign-jab { font-size: 8.5pt; color: var(--muted); margin-top: .5mm; }
.cert-sign-img {
  max-height: 13mm; max-width: 54mm; object-fit: contain; display: block; margin: 0 auto;
  mix-blend-mode: multiply; /* buang latar putih gambar tanda tangan */
}
/* Tanda tangan OTOMATIS: nama ditulis dengan huruf bersambung agar sertifikat
   langsung tampil sudah ditandatangani tanpa perlu mengunggah gambar. */
.cert-sign-auto {
  /* Huruf bersambung bila peramban punya; bila tidak, tetap terbaca sebagai
     tanda tangan karena dimiringkan + ada goresan garis di bawahnya. */
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Lucida Handwriting', 'Dancing Script', cursive;
  font-style: italic; font-weight: 400;
  font-size: 19pt; line-height: 1.1; color: #1b3a68;
  transform: skewX(-9deg) rotate(-2.5deg);
  height: 13mm; display: grid; place-items: center; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; position: relative; padding-bottom: 1mm;
}
.cert-sign-auto::after {
  content: ''; position: absolute; left: 8%; right: 6%; bottom: 1.5mm; height: 4px;
  border-bottom: 1.4px solid rgba(27, 58, 104, .55);
  border-radius: 50% / 100% 100% 0 0; transform: skewX(9deg) rotate(1deg);
}
.cert-foot {
  margin-top: 5mm; padding-top: 3mm; border-top: 1px dashed var(--line);
  font-size: 7.5pt; color: var(--muted);
}

/* ============================================================
   SERTIFIKAT PENGHARGAAN (bebas) — 3 template:
   .tpl-formal (navy & emas) · .tpl-elegan (krem & emas) · .tpl-modern (bersih)
   Semua memakai ukuran lembar A4 landscape yang sama (.cert-sheet.awd).
   ============================================================ */
.cert-sheet.awd {
  display: flex; flex-direction: column; padding: 0;
  font-family: var(--font); color: var(--ink); overflow: hidden;
}
.awd-dalam {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 11mm 16mm; position: relative; z-index: 1;
}
.awd-kop {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 4mm; width: 100%;
}
.awd-kop .awd-lembaga { text-align: center; min-width: 0; }
.awd-logo img { max-height: 18mm; max-width: 34mm; object-fit: contain; display: block; }
.awd-lembaga strong { display: block; font-size: 12pt; letter-spacing: .1em; text-transform: uppercase; }
.awd-lembaga span { display: block; font-size: 8pt; letter-spacing: .05em; opacity: .75; }
.awd-judul-wrap { margin: 7mm 0 0; }
.awd-judul-kecil {
  font-size: 9pt; letter-spacing: .34em; text-transform: uppercase; opacity: .8;
}
.awd-judul {
  font-family: var(--serif); font-size: 30pt; line-height: 1.1; margin: 2mm 0 0;
  letter-spacing: .05em; text-transform: uppercase;
}
.awd-no { margin-top: 3mm; font-size: 8.5pt; letter-spacing: .08em; opacity: .8; }
.awd-lead { font-size: 9.5pt; opacity: .8; margin: 8mm 0 0; letter-spacing: .02em; }
.awd-nama {
  font-family: var(--serif); font-size: 26pt; font-weight: 700; line-height: 1.15;
  margin-top: 2mm; letter-spacing: .01em; max-width: 210mm;
}
.awd-garis-nama { width: 90mm; height: 1px; background: currentColor; opacity: .45; margin: 3mm auto 0; }
.awd-isi {
  font-size: 10pt; line-height: 1.6; max-width: 200mm; margin: 6mm auto 0; opacity: .92;
}
.awd-kegiatan {
  margin-top: 3mm; font-size: 9pt; letter-spacing: .16em; text-transform: uppercase; opacity: .8;
}
.awd-fakta {
  display: flex; gap: 6mm 12mm; flex-wrap: wrap; justify-content: center; margin-top: 5mm;
}
.awd-fakta div { min-width: 30mm; }
.awd-fakta span {
  display: block; font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; opacity: .65;
}
.awd-fakta strong { font-size: 10pt; }
.awd-kaki {
  margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 6mm; padding-top: 5mm;
}
.awd-kiri { justify-self: start; }
.awd-kanan { justify-self: end; }
.awd-tengah { justify-self: center; align-self: end; }
.awd-tempat { font-size: 9.5pt; opacity: .85; max-width: 60mm; }
.awd-ttd { text-align: center; min-width: 48mm; }
.awd-ttd-ruang { height: 17mm; }
.awd-ttd-img {
  max-height: 17mm; max-width: 52mm; object-fit: contain; display: block; margin: 0 auto;
  /* Latar putih pada gambar tanda tangan dibuat "menyatu" dengan kertas,
     sehingga hanya goresan tanda tangan yang terlihat. */
  mix-blend-mode: multiply;
}
/* Tanda tangan otomatis (huruf bersambung) — tampil "sudah ditandatangani" */
.awd-ttd-auto {
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Lucida Handwriting', 'Dancing Script', cursive;
  font-style: italic; font-weight: 400;
  font-size: 16pt; line-height: 1.1;
  transform: skewX(-9deg) rotate(-2.5deg);
  height: 17mm; display: grid; place-items: center; white-space: nowrap;
  overflow: hidden; position: relative; padding-bottom: 1mm;
}
.awd-ttd-auto::after {
  content: ''; position: absolute; left: 8%; right: 6%; bottom: 1.5mm; height: 4px;
  border-bottom: 1.4px solid currentColor; opacity: .5;
  border-radius: 50% / 100% 100% 0 0; transform: skewX(9deg) rotate(1deg);
}
.awd-ttd-garis { border-top: 1px solid currentColor; margin: 1mm 4mm 0; opacity: .7; }
.awd-ttd-nama { font-size: 10.5pt; font-weight: 700; margin-top: 1.5mm; }
.awd-ttd-jab { font-size: 8pt; opacity: .75; letter-spacing: .04em; }
.awd-catatan {
  margin-top: 4mm; font-size: 7pt; opacity: .65; text-align: center;
  border-top: 1px dashed currentColor; padding-top: 2mm; width: 100%;
}

/* Template 1 — FORMAL: bingkai navy ganda + garis emas */
.tpl-formal { background: #fff; }
.tpl-formal .awd-bingkai {
  flex: 1; margin: 6mm; padding: 2.5mm; border: 2px solid var(--navy-900);
  display: flex;
}
.tpl-formal .awd-dalam { border: 1px solid var(--gold); flex: 1; }
.tpl-formal .awd-judul { color: var(--navy-900); }
.tpl-formal .awd-lembaga strong { color: var(--navy-900); }
.tpl-formal .awd-nama { color: var(--navy-800); }
.tpl-formal .awd-isi, .tpl-formal .awd-lead { color: #25324a; }

/* Template 2 — ELEGAN: krem, serif, ornamen sudut emas */
.tpl-elegan {
  background:
    radial-gradient(circle at 10% 6%, rgba(201, 162, 39, .16), transparent 38%),
    radial-gradient(circle at 90% 94%, rgba(201, 162, 39, .16), transparent 38%),
    #fdfaf1;
}
.tpl-elegan .awd-ornamen {
  position: absolute; inset: 6mm; border: 1px solid rgba(168, 128, 26, .45);
  border-radius: 3mm; pointer-events: none;
}
.tpl-elegan .awd-ornamen::before,
.tpl-elegan .awd-ornamen::after {
  content: ''; position: absolute; width: 16mm; height: 16mm;
  border: 2px solid var(--gold);
}
.tpl-elegan .awd-ornamen::before { top: 4mm; left: 4mm; border-right: 0; border-bottom: 0; }
.tpl-elegan .awd-ornamen::after { bottom: 4mm; right: 4mm; border-left: 0; border-top: 0; }
.tpl-elegan .awd-dalam { padding: 13mm 18mm; }
.tpl-elegan .awd-judul { color: #6b4f12; font-size: 33pt; letter-spacing: .12em; }
.tpl-elegan .awd-judul-kecil { color: #8a6a1e; letter-spacing: .4em; }
.tpl-elegan .awd-lembaga strong { color: #6b4f12; }
.tpl-elegan .awd-nama { color: #3f2f0d; }
.tpl-elegan .awd-ornamen-garis {
  display: flex; align-items: center; justify-content: center; gap: 4mm; margin-top: 3mm;
}
.tpl-elegan .awd-ornamen-garis span {
  width: 40mm; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tpl-elegan .awd-ornamen-garis i { color: var(--gold); font-style: normal; font-size: 10pt; }
.tpl-elegan .awd-garis-nama { background: var(--gold); opacity: .8; }
.tpl-elegan .awd-catatan { border-top-color: rgba(138, 106, 30, .5); }

/* Template 3 — MODERN: pita warna, tanpa serif, tegas */
.tpl-modern { background: #fff; }
.tpl-modern .awd-pita {
  height: 9mm; width: 100%;
  background: linear-gradient(90deg, var(--navy-900), var(--navy-600) 55%, var(--gold));
}
.tpl-modern .awd-dalam { padding: 10mm 18mm 11mm; align-items: flex-start; text-align: left; }
.tpl-modern .awd-kop { justify-content: flex-start; }
.tpl-modern .awd-judul-wrap { margin-top: 9mm; }
.tpl-modern .awd-judul {
  font-family: var(--font); font-weight: 800; font-size: 34pt; letter-spacing: -.01em;
  text-transform: none; color: var(--navy-900); margin: 1mm 0 0;
}
.tpl-modern .awd-judul-kecil { letter-spacing: .3em; color: var(--blue-500); font-weight: 700; }
.tpl-modern .awd-no { color: var(--muted); }
.tpl-modern .awd-lead { margin-top: 6mm; }
.tpl-modern .awd-nama {
  font-family: var(--font); font-weight: 800; font-size: 27pt; color: var(--navy-800);
  letter-spacing: -.01em;
}
.tpl-modern .awd-garis-nama { width: 26mm; height: 3px; background: var(--gold); margin: 3mm 0 0; opacity: 1; }
.tpl-modern .awd-isi { margin-left: 0; max-width: 190mm; }
.tpl-modern .awd-kegiatan { color: var(--blue-500); font-weight: 700; letter-spacing: .18em; }
.tpl-modern .awd-fakta { justify-content: flex-start; }
.tpl-modern .awd-kaki { align-items: flex-end; }

/* Pratinjau di layar: skala agar tidak melebar */
.cert-preview { overflow: hidden; }
.cert-preview .cert-sheet {
  transform: scale(.55); transform-origin: top left;
  margin-bottom: calc(-208mm * .45); box-shadow: none; border: 1px solid var(--line);
}
@media (max-width: 1400px) { .cert-preview .cert-sheet { transform: scale(.42); margin-bottom: calc(-208mm * .58); } }
@media (max-width: 1100px) { .cert-preview .cert-sheet { transform: scale(.28); margin-bottom: calc(-208mm * .72); } }
@media (max-width: 700px) { .cert-preview .cert-sheet { transform: scale(.17); margin-bottom: calc(-208mm * .83); } }

/* Unggah berkas */
.unggah-box {
  border: 1px dashed var(--line); border-radius: 10px; padding: 16px; background: #fbfcfe;
}
.unggah-box.drag { border-color: var(--navy-600); background: var(--blue-100); }
input[type="file"].inp { padding: 9px 12px; background: #fff; }

/* Filter baris tabel yang perlu perhatian */
table.tbl tbody tr.warning td { background: #fffaf2; }

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
  /* Panel Masuk di ponsel: tampil RINGKAS — hanya logo, nama lembaga, tagline,
     motto, dan kontak. Paragraf panjang & bagian misi disembunyikan supaya
     form login cepat dijangkau. */
  .auth-side {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 14px 18px; gap: 6px 12px; text-align: left;
    justify-content: flex-start; min-height: 0;
  }
  .auth-side .brand-mark.logo { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; }
  .auth-side h2 { font-size: 1.2rem; flex: 1 1 auto; }
  .auth-side p:not(.auth-tagline):not(.auth-motto):not(.auth-kontak) { display: none; }
  .auth-side .auth-misi { display: none; }
  .auth-tagline { flex: 1 1 100%; border-left: 0; padding-left: 0; font-size: .82rem !important; max-width: 40ch; }
  .auth-motto { flex: 1 1 100%; font-size: .78rem !important; }
  .auth-kontak { flex: 1 1 100%; font-size: .72rem !important; margin: 0; }
  .auth-main { padding: 22px 18px 34px; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%);
    transition: transform .18s ease; box-shadow: 0 0 40px rgba(10, 35, 64, .35);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .burger { display: inline-block; }
  .content { padding: 20px 16px 34px; }
  .topbar { padding: 10px 16px; }
  .who-text { display: none; }
  .page-actions { width: 100%; margin-left: 0; }
}
/* Halaman sertifikat dicetak TANPA margin halaman: lembar .cert-sheet memang
   berukuran 297 × 208 mm (A4 landscape), jadi dengan margin 6mm isinya akan
   meluber ke halaman kedua. Isi sertifikat sendiri sudah punya bingkai & padding
   di dalam, sehingga aman terhadap batas cetak printer. */
.print-body:has(.cert-sheet) { background: #fff; }
@media print {
  .no-print, .sidebar, .topbar, .foot { display: none !important; }
  .print-toolbar { display: none !important; }
  .print-area { display: block; padding: 0; }
  .cert-sheet { margin: 0; box-shadow: none; page-break-after: always; }
  .cert-sheet:last-of-type { page-break-after: auto; }
  body, .print-body { background: #fff; }
  .content { background: none; }
  .sheet { box-shadow: none; margin: 0; width: auto; padding: 0; }
  .cert-sheet { box-shadow: none; margin: 0; width: 100%; min-height: auto; padding: 0; page-break-inside: avoid; }
  .print-area { display: block; padding: 0; }
  .cert-preview .cert-sheet { transform: none; margin: 0; }
  .content { padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Dokumen pertemuan & materi kurikulum (tautan pratinjau)
   Peserta hanya melihat; staf punya tombol unduh di ui.daftarDokumen().
   ============================================================ */
.doc-link {
  display: inline-block;
  margin: 0 10px 4px 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy-700, var(--navy));
  text-decoration: none;
  border-bottom: 1px dashed rgba(10, 35, 64, .35);
}
.doc-link:hover { color: var(--navy-900); border-bottom-style: solid; }
.doc-link:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   Pratinjau ukuran tanda tangan & logo sertifikat (Pengaturan)
   Angka mm diatur di kartu "Ukuran Tanda Tangan & Logo di Sertifikat".
   ============================================================ */
.cert-ukur-pratinjau {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(#ffffff, #f8fbff);
}
.cert-ukur-kotak {
  flex: 1 1 170px; min-width: 150px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: #fff;
}
.cert-ukur-label {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: auto;
}
.cert-ukur-kotak img { display: block; object-fit: contain; }
.cert-ukur-auto {
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  font-style: italic; color: #1b3a68; text-align: center; font-size: 15pt;
  transform: skewX(-9deg) rotate(-2.5deg);
}
.cert-ukur-auto span {
  display: block; font-family: var(--font); font-size: .62rem; font-style: normal;
  color: var(--muted); letter-spacing: .04em; transform: none; margin-top: 4px;
}

/* ============================================================
   Pemilih bahasa (ID / EN) — bilah atas aplikasi, header publik,
   dan bilah alat halaman cetak.
   ============================================================ */
.pilih-bahasa {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px; background: rgba(10, 35, 64, .07);
  border: 1px solid rgba(10, 35, 64, .1);
}
.pilih-bahasa .pb-item {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  color: var(--navy-800); text-decoration: none; line-height: 1.1;
}
.pilih-bahasa .pb-item:hover { background: rgba(10, 35, 64, .08); }
.pilih-bahasa .pb-item.on {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: #fff; box-shadow: 0 2px 6px rgba(10, 35, 64, .25);
}
.pilih-bahasa .pb-item:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.pilih-bahasa.di-toolbar { margin: 0 8px; }
.auth-bahasa { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.site-head .pilih-bahasa { margin-left: 10px; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
.site-head .pilih-bahasa .pb-item { color: #fff; }
.site-head .pilih-bahasa .pb-item.on { background: #fff; color: var(--navy-900); }
@media (max-width: 760px) {
  .topbar .pilih-bahasa { margin-left: auto; }
  .pilih-bahasa .pb-item { padding: 4px 9px; font-size: .68rem; }
}