/*
  Tema warna & font khusus landing page publik — disesuaikan dengan sistem PPDB lama lembaga
  (Google Apps Script, https://script.google.com/.../exec) atas permintaan eksplisit pengguna.
  Palet Material Blue + font Poppins, menimpa token warna/font bersama di pendaftar.css — HANYA
  di halaman ini (dimuat cuma di home/index.php). Halaman auth & seluruh area /akun/* pendaftar
  SENGAJA TIDAK ikut berubah, tetap pakai identitas navy/emas/merah + Fraunces/Karla yang sudah
  ada sejak awal (dikonfirmasi ke pengguna dulu sebelum dikerjakan — lihat SPEC.md §11).

  Warna semantik (--red/--red-tint untuk error, --green/--green-tint untuk sukses) SENGAJA
  TIDAK diubah — itu indikator fungsional, bukan identitas brand.
*/
:root{
  --navy:#1565C0; --navy-2:#0D47A1;
  --gold:#64B5F6; --gold-2:#90CAF9; --gold-text:#0D47A1; --gold-tint:#E3F2FD;
  --ink:#0d1b2e; --ink-dim:#4a5b73;
  --ground:#f4f8fc; --surface-tint:#eaf3fc;
  --font-display:"Poppins", "Segoe UI", Arial, sans-serif;
  --font-body:"Poppins", "Segoe UI", Arial, sans-serif;
}

.eyebrow{font-style:normal;}

.hero{background:linear-gradient(135deg, #2196F3 0%, #1565C0 100%);}
.hero h1 em{color:#FFC94A;}
.hero p.lede{color:#eaf3ff;}
.hero .btn-primary{background:#fff;color:var(--navy);}
.hero .btn-primary:hover{background:var(--gold-tint);}

.btn-primary{background:var(--navy);}
.btn-primary:hover{background:var(--navy-2);}

/* ---------- Hero modern: dua kolom + orb dekoratif + chip statistik nyata ----------
   Riset referensi eksternal (hero section trend 2026 — gradient bertujuan, tipografi besar
   & ekspresif, layout dua kolom dengan elemen visual, indikator kepercayaan berbasis data
   nyata) diterapkan di sini, tetap dengan palet biru yang sudah disesuaikan di atas. */
.hero-modern{position:relative;overflow:hidden;text-align:left;padding-block:64px 56px;}
.hero-modern::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px);
  background-size:26px 26px;mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
}
.hero-modern .hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;text-align:left;}
.hero-content,.hero-visual{min-width:0;width:100%;}
.hero-visual .banner-slider{width:100%;max-width:100%;}
.hero-modern .actions{justify-content:flex-start;}
.hero-content{position:relative;z-index:1;animation:heroFadeUp .7s ease both;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0;}
.hero-orb-1{width:360px;height:360px;background:radial-gradient(circle, #90CAF9, transparent 70%);top:-100px;right:-60px;}
.hero-orb-2{width:280px;height:280px;background:radial-gradient(circle, #E3F2FD, transparent 70%);bottom:-120px;left:8%;}
.hero-stats{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap;}
.hero-stat strong{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:#fff;line-height:1;}
.hero-stat-teks strong{font-size:1.15rem;line-height:1.25;}
.hero-stat span{display:block;font-size:.74rem;color:#d6e9fc;text-transform:uppercase;letter-spacing:.05em;margin-top:5px;}
.hero-visual{position:relative;z-index:1;animation:heroFadeUp .8s ease .12s both;}
.hero-visual .banner-slider{margin-top:0;}
.hero-visual-fallback{
  position:relative;aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:14px;
  padding:24px 30px;text-align:center;backdrop-filter:blur(8px);box-shadow:var(--shadow);overflow:hidden;
}
.hero-visual-fallback::before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,74,.35), transparent 70%);pointer-events:none;
}
.hero-visual-fallback img{
  position:relative;height:72px;width:72px;object-fit:contain;border-radius:14px;background:#fff;padding:8px;
  margin-bottom:14px;box-shadow:0 10px 24px -8px rgba(0,0,0,.35);
}
.hero-visual-fallback strong{position:relative;display:block;color:#fff;font-family:var(--font-display);font-size:1.25rem;}
.hero-visual-fallback span{position:relative;display:block;color:#d6e9fc;font-size:.85rem;margin-top:8px;}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.hero-content,.hero-visual{animation:none;}}
@media (max-width:860px){
  .hero-modern .hero-grid{grid-template-columns:1fr;text-align:center;}
  .hero-modern .actions{justify-content:center;}
  .hero-stats{justify-content:center;}
}