/* ============================================================
   SIPADO — Design System v2
   Sistem Penerimaan Calon Donald

   Arah visual: platform recruitment modern (soft indigo /
   periwinkle + putih), rounded, banyak whitespace, mobile-first.
   Humor tidak pernah masuk ke lapisan visual — hanya copywriting.

   CATATAN PENTING UNTUK PENGEMBANGAN SELANJUTNYA:
   Seluruh nama kelas dari versi sebelumnya DIPERTAHANKAN persis,
   sehingga tidak ada satu pun file PHP yang perlu diubah.
   Jangan menghapus nama kelas di sini tanpa mengecek pemakaiannya
   di *.php dan admin/*.php terlebih dahulu.
   ============================================================ */

:root {
  /* Indigo/periwinkle sebagai warna inti */
  --primary: #5A56E9;
  --primary-light: #7C79F0;
  --accent: #3F3BC4;          /* dipakai pada gradient header dashboard */
  --primary-50: #F4F3FF;
  --primary-100: #E8E7FE;
  --primary-200: #CFCDFB;

  /* Aksen terang untuk teks di atas latar indigo */
  --gold: #C9C7FF;
  --gold-light: #E4E3FF;

  --success: #12A57A;
  --success-bg: #E4F7F1;
  --warning: #C77700;
  --warning-bg: #FDF2E2;
  --danger: #DC3055;
  --danger-bg: #FDE9EE;
  --info: #2F6FED;
  --info-bg: #E8F0FE;

  --ink: #14142B;
  --muted: #6E6D8A;

  --gray-100: #F7F7FB;
  --gray-200: #EDEDF4;
  --gray-300: #DFDFEA;
  --gray-400: #C3C3D4;
  --white: #FFFFFF;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Bayangan lembut berwarna indigo, bukan abu-abu netral */
  --shadow-xs: 0 1px 2px rgba(20, 20, 43, .05);
  --shadow: 0 4px 16px rgba(90, 86, 233, .08);
  --shadow-lg: 0 16px 48px rgba(90, 86, 233, .14);

  --font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --transition: .18s cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  /* Jaring pengaman: tidak ada elemen yang boleh membuat halaman
     bisa digeser ke samping di ponsel. */
  max-width: 100vw;
  color: var(--ink);
  background: var(--gray-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Beberapa menu ditulis sebagai <ul><li>. Tanpa reset ini, titik bullet
   bawaan browser ikut tampil di navbar dan daftar bergaya kartu. */
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

/* Kata panjang (URL, nomor lamaran) tidak boleh merusak tata letak */
h1, h2, h3, h4, p, li, td { overflow-wrap: break-word; }
input, select, textarea, button { font-family: inherit; font-size: 1rem; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---- Typography ---- */
h1 { font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: clamp(1.375rem, 4vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin-bottom: .5rem; }

.text-muted { color: var(--muted); font-size: .875rem; }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Layout ---- */
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }
.container-sm { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }
.container-xs { max-width: 460px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }

.section { padding: 3.5rem 0; }
.section-sm { padding: 2.25rem 0; }

.section-eyebrow {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-50);
  padding: .375rem .75rem;
  border-radius: var(--radius-pill);
  margin-bottom: .875rem;
}

.section-title { margin-bottom: .5rem; }

@media (min-width: 768px) {
  .section { padding: 5rem 0; }
  .section-sm { padding: 3rem 0; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  /* Target sentuh minimum 44px untuk kenyamanan di ponsel */
  min-height: 46px;
  text-align: center;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(90, 86, 233, .3);
}
.btn-primary:hover { background: var(--primary-light); box-shadow: 0 10px 26px rgba(90, 86, 233, .38); }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary-200); }
.btn-outline:hover { background: var(--primary-50); border-color: var(--primary); }

.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: #24243F; }

.btn-success { background: var(--success); color: var(--white); }
.btn-warning { background: var(--warning); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }

.btn-sm { padding: .5rem 1rem; font-size: .8125rem; min-height: 36px; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; min-height: 54px; }
.btn-full { width: 100%; }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: var(--transition);
}

.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  font-weight: 700;
}

.card-body { padding: 1.5rem; }

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-100);
}

@media (max-width: 480px) {
  .card-body, .card-header { padding: 1.125rem; }
  .card-footer { padding: .875rem 1.125rem; }
}

/* ---- Navbar ---- */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(12px);
}

.navbar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: .875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar-brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.navbar-brand span { color: var(--primary); }

.navbar-nav { display: none; gap: 1.75rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.navbar-nav li { list-style: none; }
.navbar-nav a { font-size: .9375rem; font-weight: 600; color: var(--muted); transition: var(--transition); }
.navbar-nav a:hover, .navbar-nav a.active { color: var(--primary); }

.navbar-cta { display: none; }
.navbar-mobile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--ink);
}

.navbar-mobile {
  display: none;
  flex-direction: column;
  gap: .25rem;
  padding: .75rem 1.25rem 1.25rem;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}
.navbar-mobile.open, .navbar-mobile.show { display: flex; }
.navbar-mobile a {
  padding: .8125rem .5rem;
  font-weight: 600;
  color: var(--ink);
  border-radius: 12px;
}
.navbar-mobile a:hover { background: var(--primary-50); color: var(--primary); }

@media (min-width: 900px) {
  .navbar-nav, .navbar-cta { display: flex; }
  .navbar-mobile-btn { display: none; }
  .navbar-mobile { display: none !important; }
}

/* Navbar varian gelap (dipakai di dashboard dengan latar indigo) */
.navbar[style*="var(--primary)"] .navbar-brand,
.navbar[style*="gradient"] .navbar-brand { color: var(--white); }

/* ---- Hero ---- */
.hero {
  position: relative;
  background: linear-gradient(150deg, #5A56E9 0%, #4B47DC 45%, #3F3BC4 100%);
  color: var(--white);
  padding: 3.5rem 0 4rem;
  overflow: hidden;
  text-align: center;
}

/* Aksen lingkaran lembut, meniru kedalaman pada referensi tanpa menyalinnya */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  top: -180px; right: -140px;
}
.hero::after {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
  bottom: -200px; left: -120px;
}

.hero h1 { color: var(--white); margin-bottom: .75rem; }
.hero-brand-accent { color: var(--gold); }

.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .375rem .5rem;
  padding: .5rem 1rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  max-width: 100%;
  backdrop-filter: blur(8px);
}
.hero-badge > span { white-space: nowrap; }
.hero-badge-sep { opacity: .45; }

@media (min-width: 480px) { .hero-badge { font-size: .8125rem; gap: .5rem .625rem; } }

.dot-live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hero-tagline {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  max-width: 30rem;
  margin: 0 auto 2rem;
}

.hero-separator, .separator { color: rgba(255, 255, 255, .4); }

/* Kartu penghitung: elemen paling menonjol di beranda */
.hero-counter-card {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  max-width: 22rem;
  margin: 0 auto 1.75rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(20, 20, 43, .18);
}

.hero-counter-number {
  font-family: var(--font);
  font-size: clamp(3rem, 13vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

.hero-counter-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-top: .625rem;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  max-width: 34rem;
  margin: 0 auto 2rem;
}

.hero-meta-item {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: .875rem .75rem;
}
.hero-meta-item .label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  display: block;
  margin-bottom: .375rem;
  line-height: 1.35;
  /* Menyamakan garis dasar angka walau label satu atau dua baris */
  min-height: 2.1em;
}
.hero-meta-item .value {
  font-family: var(--font);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 22rem;
  margin: 0 auto .75rem;
}

@media (min-width: 640px) {
  .hero { padding: 5rem 0 5.5rem; }
  .hero-meta { grid-template-columns: repeat(4, 1fr); }
  .hero-actions { flex-direction: row; justify-content: center; max-width: none; }
  .hero-actions .btn { min-width: 12rem; }
}

/* ---- Split dua kolom ----
   Mobile-first: menumpuk dulu, baru berdampingan di layar lebar.
   Menggantikan style inline "1fr 1fr" yang memaksa dua kolom bahkan
   di layar 390px sehingga teks terjepit. */
.split-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .split-2 { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ============================================================
   Kartu Pelamar — STRUKTUR
   Sengaja diletakkan di main.css, bukan motion.css.

   motion.css hanya berisi animasi dan boleh gagal dimuat tanpa
   merusak apa pun. Kalau bentuk kartu ikut ditaruh di sana,
   satu berkas yang tidak terunggah membuat isinya berjatuhan
   menjadi tumpukan teks polos.
   ============================================================ */
.appcard-stage {
  display: flex;
  justify-content: center;
  padding: .5rem 0 2rem;
}

.appcard {
  position: relative;
  width: min(340px, 88vw);
  aspect-ratio: 1.62 / 1;          /* proporsi kartu identitas */
  border-radius: 22px;
  padding: 1.25rem 1.375rem;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, #6E6BF2 0%, #4F4BD8 48%, #3A36B8 100%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow:
    0 22px 50px -12px rgba(28, 24, 110, .55),
    0 2px 0 0 rgba(255,255,255,.18) inset;
}

/* Sebagian browser lama belum mengenal aspect-ratio */
@supports not (aspect-ratio: 1.62 / 1) {
  .appcard { height: 210px; }
}

.appcard-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
}

.appcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.appcard-eyebrow {
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}

.appcard-title {
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: .25rem;
  line-height: 1.3;
}

.appcard-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .625rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  font-size: .625rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.appcard-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #5BE49B;
  flex-shrink: 0;
}

.appcard-number {
  font-family: var(--font-mono);
  font-size: clamp(.875rem, 4.2vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.appcard-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
}
.appcard-meta-label {
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}
.appcard-meta-value {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: .125rem;
  line-height: 1.2;
}

/* ---- Odometer: STRUKTUR ----
   overflow:hidden inilah yang menyembunyikan sembilan angka lain.
   Tanpa ini seluruh kolom "0123456789" terlihat sekaligus. */
.odo { display: inline-flex; vertical-align: baseline; }
.odo-digit { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.odo-track { display: flex; flex-direction: column; }
.odo-track span { height: 1em; line-height: 1; display: block; }

/* ---- Skeleton: STRUKTUR ---- */
.skeleton {
  display: inline-block;
  min-width: 2.5ch;
  border-radius: 6px;
  color: transparent !important;
  background: rgba(255,255,255,.16);
  user-select: none;
}

/* ---- Penjaga luapan horizontal ----
   Anak grid/flex secara bawaan bernilai min-width:auto, sehingga teks
   panjang atau tabel bisa mendorong kolom melebihi lebar layar.
   Inilah penyebab halaman tergeser ke samping di ponsel. */
.split-2 > *,
.stages-grid > *,
.stat-grid > *,
.hero-meta > *,
.form-grid > * { min-width: 0; }

.card, .container, .container-sm, .container-xs { max-width: 100%; }

/* ---- Statistik ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .875rem;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: var(--transition);
}
.stat-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow); }

.stat-value {
  font-family: var(--font);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.stat-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
}

@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1.4;
}

.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-registered  { background: var(--primary-100); color: var(--primary); }
.badge-pending     { background: var(--warning-bg); color: var(--warning); }
.badge-review      { background: var(--info-bg); color: var(--info); }
.badge-verified    { background: var(--success-bg); color: var(--success); }
.badge-assessment  { background: var(--primary-100); color: var(--accent); }
.badge-interview   { background: #EDE7FB; color: #6B3FCB; }
.badge-qualified   { background: var(--success-bg); color: var(--success); }
.badge-rejected    { background: var(--danger-bg); color: var(--danger); }
.badge-withdrawn   { background: var(--gray-200); color: var(--muted); }

/* ---- Timeline (dashboard pelamar) ---- */
.timeline {
  display: flex;
  gap: 0;
  min-width: max-content;
  padding: .5rem 0;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 92px;
  text-align: center;
}

/* Garis penghubung antar tahap */
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, .22);
  z-index: 0;
}
.timeline-step.done::after { background: var(--gold); }

.timeline-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .75);
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: var(--transition);
}

.timeline-step.done .timeline-dot { background: var(--gold); color: var(--accent); }
.timeline-step.active .timeline-dot {
  background: var(--white);
  color: var(--primary);
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(201, 199, 255, .25);
}

.timeline-label {
  font-size: .6875rem;
  font-weight: 600;
  margin-top: .5rem;
  color: rgba(255, 255, 255, .65);
  padding: 0 .25rem;
  line-height: 1.3;
}
.timeline-step.done .timeline-label,
.timeline-step.active .timeline-label { color: var(--white); font-weight: 700; }

/* ---- Step bar (proses pendaftaran) ---- */
.step-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.75rem;
}

.step-bar-item {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
  transition: var(--transition);
}
.step-bar-item.active { background: var(--primary); }
.step-bar-item.done { background: var(--primary-200); }

/* ---- Stages grid (daftar tahap seleksi) ---- */
.stages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .875rem;
}

@media (min-width: 640px) { .stages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stages-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Forms ---- */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--ink);
}

.req { color: var(--danger); margin-left: .125rem; }

.form-control {
  width: 100%;
  padding: .8125rem 1rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  transition: var(--transition);
  /* 16px mencegah iOS Safari melakukan zoom otomatis saat field difokuskan */
  font-size: 16px;
  min-height: 48px;
}

.form-control:hover { border-color: var(--gray-400); }
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}
.form-control::placeholder { color: var(--gray-400); }

textarea.form-control { min-height: 108px; resize: vertical; line-height: 1.6; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6D8A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.form-hint { font-size: .8125rem; color: var(--muted); margin-top: .375rem; }
.form-error { font-size: .8125rem; color: var(--danger); margin-top: .375rem; font-weight: 600; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 14px;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: .625rem;
  background: var(--white);
}
.form-check:hover { border-color: var(--primary-200); background: var(--primary-50); }
.form-check input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.form-check input:checked ~ * { color: var(--ink); }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.col-full { grid-column: 1 / -1; }

@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Alerts ---- */
.alert {
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  font-weight: 500;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(18, 165, 122, .2); }
.alert-error   { background: var(--danger-bg); color: var(--danger); border-color: rgba(220, 48, 85, .2); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(199, 119, 0, .2); }
.alert-info    { background: var(--info-bg); color: var(--info); border-color: rgba(47, 111, 237, .2); }

/* ---- Nomor lamaran ---- */
.app-number {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* ---- Score bar ---- */
.score-bar {
  height: 10px;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-pill);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* ---- Upload ---- */
.upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--gray-100);
}
.upload-area:hover, .upload-area.dragover { border-color: var(--primary); background: var(--primary-50); }
.upload-icon { font-size: 1.75rem; margin-bottom: .5rem; opacity: .55; }
.upload-filename { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); word-break: break-all; }

/* Input file asli disembunyikan, label yang bergaya btn menjadi pemicunya */
input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---- Ticker pendaftar terbaru ---- */
.recent-ticker {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow: hidden;
}
.ticker-label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .75rem;
}
.ticker-items { display: flex; flex-direction: column; gap: .625rem; }
.ticker-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--gray-200);
}
.ticker-item:last-child { border-bottom: none; padding-bottom: 0; }
.ticker-item .org {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8125rem;
  flex-shrink: 0;
}
.ticker-item .emoji { font-size: 1.125rem; flex-shrink: 0; }

/* ---- Tabel ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}

.sipado-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.sipado-table thead th {
  text-align: left;
  padding: .875rem 1rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.sipado-table tbody td { padding: .875rem 1rem; border-bottom: 1px solid var(--gray-200); font-size: .875rem; vertical-align: middle; }
.sipado-table tbody tr:last-child td { border-bottom: none; }
.sipado-table tbody tr { transition: var(--transition); }
.sipado-table tbody tr:hover { background: var(--primary-50); }

/* ---- Dashboard layout ---- */
.dash-layout { display: block; min-height: 100vh; background: var(--gray-100); }

.dash-sidebar {
  display: none;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  padding: 1.5rem 1rem;
  flex-direction: column;
  gap: 1.5rem;
}
.dash-sidebar-brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; padding: 0 .75rem; }
.dash-sidebar-brand span { color: var(--primary); }
.dash-sidebar-section {
  font-size: .625rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-400);
  padding: 0 .75rem; margin-bottom: .5rem;
}
.dash-sidebar-nav { display: flex; flex-direction: column; gap: .125rem; }
.dash-sidebar-nav a {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem;
  border-radius: 12px;
  font-size: .9375rem; font-weight: 600;
  color: var(--muted);
  transition: var(--transition);
}
.dash-sidebar-nav a:hover { background: var(--gray-100); color: var(--ink); }
.dash-sidebar-nav a.active { background: var(--primary-50); color: var(--primary); font-weight: 700; }
.nav-icon { width: 20px; text-align: center; flex-shrink: 0; opacity: .85; }

.dash-main { min-width: 0; }
.dash-topbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky; top: 0; z-index: 50;
}
.dash-content { padding: 1.5rem 1.25rem 4rem; max-width: 1100px; margin: 0 auto; }

@media (min-width: 1024px) {
  .dash-layout { display: grid; grid-template-columns: 260px 1fr; }
  .dash-sidebar { display: flex; }
  .dash-content { padding: 2rem 2rem 4rem; }
}

/* ---- Admin ---- */
.admin-container { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.admin-topbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 50;
}

@media (min-width: 768px) { .admin-container { padding: 2rem 2rem 4rem; } }

/* Halaman detail pelamar: menumpuk di ponsel, dua kolom di desktop.
   Sebelumnya "1fr 320px" ditulis inline sehingga sidebar 320px
   menghabiskan hampir seluruh lebar layar ponsel. */
.admin-detail-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .admin-detail-layout { grid-template-columns: minmax(0, 1fr) 320px; padding: 1.5rem; }
}

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty-state .emoji { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; }

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--primary-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Footer ---- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .7); padding: 3rem 0 2rem; margin-top: 4rem; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer-brand { font-size: 1.25rem; font-weight: 800; color: var(--white); letter-spacing: -.03em; }
.footer-brand span { color: var(--primary-light); }
.footer a { color: rgba(255, 255, 255, .7); transition: var(--transition); }
.footer a:hover { color: var(--white); }
.footer-disclaimer {
  font-size: .8125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
}
.footer-bottom {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8125rem; color: rgba(255, 255, 255, .45);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
}

@media (min-width: 768px) { .footer-inner { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }

/* ---- Utilitas cetak ---- */
@media print {
  .navbar, .footer, .btn, .dash-sidebar { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}