/* ============================================================
   PPDB ONLINE - SMK Bumi Siliwangi 2027/2028
   Premium Elegant Theme (Navy + Gold)
   ============================================================ */
:root{
  --navy-900:#0a1330; --navy-800:#0f1d4a; --navy-700:#16265f;
  --gold-400:#eab308; --gold-500:#d4a017; --gold-600:#b8860b;
  --ink:#1c2434; --muted:#6b7280; --line:#e5e9f2;
  --bs-primary:#16265f !important;
  --grad-gold:linear-gradient(135deg,#f6d365 0%,#d4a017 55%,#b8860b 100%);
  --grad-navy:linear-gradient(135deg,#0f1d4a 0%,#16265f 45%,#1f3a8a 100%);
  --shadow-lg:0 20px 45px rgba(10,19,48,.18);
  --radius:1rem;
}
*{scrollbar-width:thin}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#f4f6fb}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',serif;font-weight:700;letter-spacing:.2px}
a{text-decoration:none}
.text-gold{color:var(--gold-500)!important}
.bg-gold{background:var(--grad-gold)!important;color:#fff!important}
.bg-navy-grad{background:var(--grad-navy)!important;color:#fff}

/* ---------- Buttons ---------- */
.btn-gold{background:var(--grad-gold);border:none;color:#1a1a1a;font-weight:700;box-shadow:0 8px 20px rgba(212,160,23,.35);transition:.25s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(212,160,23,.5);color:#000}
.btn-outline-gold{border:2px solid var(--gold-500);color:var(--gold-500);font-weight:700;background:transparent}
.btn-outline-gold:hover{background:var(--gold-500);color:#111}
.btn-navy{background:var(--navy-700);color:#fff;font-weight:600;border:none}
.btn-navy:hover{background:var(--navy-800);color:#fff;transform:translateY(-1px)}
.btn-soft{background:#eef2ff;color:var(--navy-700);font-weight:600;border:1px solid #dbe3ff}
.btn-soft:hover{background:var(--navy-700);color:#fff}

/* ---------- Navbar publik ---------- */
.navbar-ppdb{background:rgba(10,19,48,.92);backdrop-filter:blur(12px);padding:.85rem 0;box-shadow:0 4px 24px rgba(0,0,0,.25)}
.navbar-ppdb .navbar-brand{color:#fff;font-weight:800;display:flex;align-items:center;gap:.65rem}
.navbar-ppdb .brand-sub{display:block;font-size:.68rem;color:var(--gold-400);letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
.navbar-ppdb .brand-name{font-family:'Playfair Display',serif;font-size:1.15rem;line-height:1.1}
.brand-badge{width:44px;height:44px;border-radius:12px;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;font-weight:800;color:#0f1d4a;font-size:.95rem;box-shadow:0 6px 16px rgba(212,160,23,.4)}
.navbar-ppdb .nav-link{color:#d7def0!important;font-weight:600;padding:.5rem 1rem!important;border-radius:.6rem;transition:.2s}
.navbar-ppdb .nav-link:hover,.navbar-ppdb .nav-link.active{color:#fff!important;background:rgba(255,255,255,.08)}
.navbar-ppdb .nav-link.active{box-shadow:inset 0 -2px 0 var(--gold-400)}

/* ---------- Hero landing page ---------- */
.hero{position:relative;background:var(--grad-navy);color:#fff;overflow:hidden;padding:7.5rem 0 6rem}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 85% 15%,rgba(212,160,23,.28),transparent 45%),
  radial-gradient(circle at 10% 85%,rgba(37,99,235,.25),transparent 40%);}
.hero::after{content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:-220px;top:-180px}
.hero::after{z-index:0}
.hero .container{position:relative;z-index:2}
.hero h1{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.15}
.hero .accent{color:transparent;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(234,179,8,.45);color:var(--gold-400);padding:.45rem 1.1rem;border-radius:2rem;font-weight:700;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}
.hero-stats{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.2rem}
.hero-stats .num{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:800;color:var(--gold-400)}
.hero-stats .lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;color:#aab6d3}
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);border-radius:1.4rem;padding:1.6rem;box-shadow:var(--shadow-lg)}

/* wave divider */
.wave{display:block;width:100%;margin-bottom:-1px}

/* ---------- Sections ---------- */
.section{padding:4.5rem 0}
.section-title{position:relative;display:inline-block;margin-bottom:.4rem}
.eyebrow{color:var(--gold-600);font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:.78rem}
.card-elegant{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 6px 22px rgba(15,29,74,.06);transition:.3s;height:100%}
.card-elegant:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(212,160,23,.5)}
.icon-tile{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.15)}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--grad-gold);color:#0f1d4a;font-family:'Playfair Display',serif;font-weight:800;font-size:1.35rem;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 8px 20px rgba(212,160,23,.4)}
.timeline-line{position:absolute;top:26px;left:calc(50% - 1px);width:2px;height:100%;background:linear-gradient(#d4a017,transparent)}

/* footer publik */
.footer-dark{background:#0a1330;color:#aab6d3}
.footer-dark a{color:#dbe3f7}
.footer-dark a:hover{color:var(--gold-400)}
.social-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:.25s}
.social-btn:hover{background:var(--grad-gold);color:#0f1d4a;transform:translateY(-3px)}

/* ---------- Form pendaftaran ---------- */
.form-panel{background:#fff;border-radius:1.5rem;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.form-section-head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.5rem;background:linear-gradient(90deg,#f8fafd,#fff);border-bottom:1px solid var(--line);border-radius:1.5rem 1.5rem 0 0}
.form-section-head .n{width:34px;height:34px;border-radius:10px;background:var(--grad-navy);color:var(--gold-400);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.form-control:focus,.form-select:focus{border-color:var(--gold-500);box-shadow:0 0 0 .22rem rgba(212,160,23,.18)}
.required-star{color:#dc3545}
.upload-zone{border:2px dashed #c8d2e8;border-radius:1rem;background:#f8fafd;padding:1.6rem;text-align:center;cursor:pointer;transition:.25s}
.upload-zone:hover{border-color:var(--gold-500);background:#fdf8ea}
.upload-zone i{font-size:2rem;color:var(--gold-600)}
.alert-gold{background:#fdf6e3;border:1px solid #f0d78c;color:#7a5c00;border-radius:1rem}

/* success page */
.success-ring{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#e7f8ee 0 55%,transparent 56%);border:3px solid #22c55e;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 15px 35px rgba(34,197,94,.25)}
.credential-box{background:var(--grad-navy);color:#fff;border-radius:1.2rem;font-family:'JetBrains Mono',monospace}
.credential-box .val{color:var(--gold-400);font-weight:700;letter-spacing:1px}

/* ---------- Auth / login ---------- */
.auth-wrap{min-height:100vh;display:flex;background:var(--grad-navy);position:relative;overflow:hidden}
.auth-wrap::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,.35),transparent 70%);top:-140px;right:-120px}
.auth-card{max-width:960px;width:100%;border-radius:1.6rem;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);background:#fff;z-index:2}
.auth-side{background:var(--grad-navy);color:#fff;padding:2.5rem}
.login-role-btn{border:2px solid var(--line);border-radius:1rem;padding:.9rem;text-align:center;cursor:pointer;transition:.2s;font-weight:700;color:var(--muted)}
.login-role-btn.active,.login-role-btn:hover{border-color:var(--gold-500);background:#fdf8ea;color:var(--navy-800)}

/* ---------- App layout (dashboard) ---------- */
.app-body{display:flex;min-height:100vh;background:#f4f6fb}
.sidebar{width:265px;background:#0c1638;color:#c3cde8;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;transition:.3s}
.sidebar .brand{padding:1.3rem 1.25rem;display:flex;gap:.75rem;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar .menu-label{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:#6f7fa8;padding:1.1rem 1.4rem .4rem;font-weight:800}
.sidebar .nav-link{color:#c3cde8;font-weight:600;padding:.68rem 1.4rem;border-left:3px solid transparent;transition:.2s;display:flex;align-items:center;gap:.75rem}
.sidebar .nav-link i{width:20px;text-align:center;color:#8fa0cc}
.sidebar .nav-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar .nav-link.active{background:linear-gradient(90deg,rgba(212,160,23,.16),transparent);color:#fff;border-left-color:var(--gold-400)}
.sidebar .nav-link.active i{color:var(--gold-400)}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.avatar-circle{width:42px;height:42px;border-radius:50%;background:var(--grad-navy);color:var(--gold-400);display:flex;align-items:center;justify-content:center;font-weight:800}
.content{flex:1;padding:1.6rem;min-width:0}

/* stat cards */
.stat-card{border-radius:1.1rem;padding:1.25rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 12px 28px rgba(10,19,48,.18)}
.stat-card .bg-icon{position:absolute;right:-8px;bottom:-14px;font-size:5rem;opacity:.14}
.stat-card .v{font-family:'Playfair Display',serif;font-size:2rem;font-weight:800;line-height:1}
.stat-sky{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.stat-gold{background:linear-gradient(135deg,#f6b93b,#d4a017)}
.stat-green{background:linear-gradient(135deg,#16a34a,#059669)}
.stat-red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.stat-purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.panel{background:#fff;border:1px solid var(--line);border-radius:1.15rem;box-shadow:0 4px 16px rgba(15,29,74,.05)}
.panel-head{padding:1rem 1.35rem;border-bottom:1px solid var(--line);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.panel-head h5{margin:0;font-size:1.02rem}
.table thead th{background:#f8fafd;font-size:.76rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);border-bottom:2px solid var(--line)}
.table td{vertical-align:middle}
.badge-soft{padding:.42em .85em;border-radius:2rem;font-weight:700;font-size:.72rem}
.b-wait{background:#fef3c7;color:#92400e}.b-ok{background:#dcfce7;color:#166534}
.b-reject{background:#fee2e2;color:#991b1b}.b-info{background:#e0e7ff;color:#3730a3}
.progress{height:9px;border-radius:1rem;background:#e9edf7}
.progress-bar{background:var(--grad-gold)}

/* berkas upload list */
.berkas-item{border:1px solid var(--line);border-radius:1rem;padding:1rem 1.15rem;background:#fff;transition:.2s}
.berkas-item:hover{border-color:rgba(212,160,23,.6);box-shadow:0 8px 20px rgba(15,29,74,.07)}
.berkas-icon{width:46px;height:46px;border-radius:12px;background:#eef2ff;color:var(--navy-700);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}

/* kartu peserta */
.kartu{width:340px;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.kartu .head{background:var(--grad-navy);color:#fff;padding:.9rem 1rem}
.kartu .head .kode{color:var(--gold-400);font-family:'JetBrains Mono',monospace;font-weight:700}

/* print */
@media print{
  .no-print,.sidebar,.topbar{display:none!important}
  body{background:#fff}
  .content{padding:0}
  .panel{border:none;box-shadow:none}
}
@media (max-width:991px){
  .sidebar{position:fixed;left:-280px;z-index:1040;box-shadow:20px 0 60px rgba(0,0,0,.3)}
  .sidebar.show{left:0}
}
@media (max-width:576px){
  .hero{padding:6rem 0 4.5rem}
  .content{padding:1rem}
}
.fade-up{animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}