@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
    --bg:           #060a14;
    --glass:        rgba(255,255,255,0.06);
    --glass-hover:  rgba(255,255,255,0.10);
    --border:       rgba(255,255,255,0.12);
    --gold:         #f59e0b;
    --gold-light:   #fbbf24;
    --blue:         #3b82f6;
    --success:      #10b981;
    --danger:       #ef4444;
    --text:         #e2e8f0;
    --muted:        #94a3b8;
    --radius:       18px;
    --radius-sm:    10px;
    --shadow:       0 20px 60px rgba(0,0,0,.5);
    --t:            all .3s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
}

/* ─── Animated Background ────────────────────────────────────────────────── */
.bg-scene {
    position:fixed; inset:0; z-index:0;
    background:radial-gradient(ellipse at 20% 20%, #0d1b4b 0%, #060a14 60%),
               radial-gradient(ellipse at 80% 80%, #1a0a2e 0%, transparent 60%);
}
.orb {
    position:absolute; border-radius:50%;
    filter:blur(90px); opacity:.35;
    animation:floatOrb 10s ease-in-out infinite;
}
.orb-1 { width:500px;height:500px;background:radial-gradient(#3b82f6,transparent); top:-15%;left:-10%; }
.orb-2 { width:400px;height:400px;background:radial-gradient(#7c3aed,transparent); bottom:-10%;right:-5%; animation-delay:-4s; }
.orb-3 { width:300px;height:300px;background:radial-gradient(#f59e0b22,transparent); top:40%;left:50%; animation-delay:-7s; }
@keyframes floatOrb {
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(30px,-20px) scale(1.05);}
    66%{transform:translate(-20px,30px) scale(.95);}
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.page { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }
.container { width:90%; max-width:960px; margin:0 auto; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    padding:2rem 0 1.5rem;
    display:flex; flex-direction:column; align-items:center; gap:.8rem;
    animation:fadeDown .7s ease both;
}
.site-header img.logo { width:90px; height:90px; object-fit:contain; filter:drop-shadow(0 4px 20px rgba(245,158,11,.4)); }
.site-header .school-name {
    font-size:1.15rem; font-weight:700; letter-spacing:.08em;
    color:var(--gold-light); text-align:center; line-height:1.3;
}
.site-header .school-sub { font-size:.78rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }

/* ─── Hero Text ──────────────────────────────────────────────────────────── */
.hero { text-align:center; padding:2rem 0 1rem; animation:fadeUp .8s ease .2s both; }
.hero h1 { font-size:clamp(1.8rem,5vw,3.2rem); font-weight:800; letter-spacing:.05em; line-height:1.1; }
.hero h1 span { color:var(--gold); }
.hero .badge-year {
    display:inline-block; margin-top:.8rem; padding:.3rem 1rem;
    background:var(--glass); border:1px solid var(--border);
    border-radius:999px; font-size:.8rem; color:var(--muted);
    backdrop-filter:blur(10px);
}

/* ─── Glass Card ─────────────────────────────────────────────────────────── */
.card {
    background:var(--glass); backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:2.5rem; animation:fadeUp .8s ease .4s both;
}
.card-title {
    font-size:1rem; font-weight:600; color:var(--muted); margin-bottom:1.5rem;
    text-transform:uppercase; letter-spacing:.08em; text-align:center;
}

/* ─── Form Elements ──────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.82rem; font-weight:500; color:var(--muted); margin-bottom:.5rem; }
.form-control {
    width:100%; padding:.9rem 1.1rem; border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.05); border:1.5px solid var(--border);
    color:var(--text); font-family:'Poppins',sans-serif; font-size:1rem;
    transition:var(--t); outline:none;
}
.form-control:focus { border-color:var(--gold); background:rgba(255,255,255,0.08); box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.form-control::placeholder { color:var(--muted); }
.form-control.lg { font-size:1.3rem; padding:1rem 1.2rem; letter-spacing:.1em; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 2rem; border-radius:var(--radius-sm); font-family:'Poppins',sans-serif;
    font-size:.95rem; font-weight:600; cursor:pointer; border:none; transition:var(--t); text-decoration:none;
}
.btn-gold {
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#1a0e00; box-shadow:0 4px 20px rgba(245,158,11,.4);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(245,158,11,.5); }
.btn-gold:active { transform:translateY(0); }
.btn-glass {
    background:var(--glass); border:1px solid var(--border); color:var(--text);
    backdrop-filter:blur(10px);
}
.btn-glass:hover { background:var(--glass-hover); }
.btn-success { background:linear-gradient(135deg,#059669,var(--success)); color:#fff; box-shadow:0 4px 20px rgba(16,185,129,.35); }
.btn-success:hover { transform:translateY(-2px); }
.btn-danger { background:linear-gradient(135deg,#dc2626,var(--danger)); color:#fff; box-shadow:0 4px 20px rgba(239,68,68,.35); }
.btn-full { width:100%; }

/* ─── Status Badges ──────────────────────────────────────────────────────── */
.status-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem 1.4rem; border-radius:999px; font-weight:700; font-size:.95rem;
}
.badge-lulus { background:rgba(16,185,129,.15); color:var(--success); border:1px solid rgba(16,185,129,.4); }
.badge-tidak-lulus { background:rgba(239,68,68,.15); color:var(--danger); border:1px solid rgba(239,68,68,.4); }

/* ─── Result Info Table ──────────────────────────────────────────────────── */
.info-table { width:100%; border-collapse:collapse; }
.info-table tr td { padding:.65rem .5rem; border-bottom:1px solid var(--border); font-size:.92rem; }
.info-table tr:last-child td { border-bottom:none; }
.info-table td:first-child { color:var(--muted); width:45%; font-weight:500; }
.info-table td:last-child { color:var(--text); font-weight:600; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    text-align:center; padding:2.5rem 0 2rem; color:var(--muted);
    font-size:.78rem; margin-top:auto;
    animation:fadeUp .8s ease .6s both;
}
.site-footer a { color:var(--gold); text-decoration:none; }

/* ─── Pulse animation for Lulus ──────────────────────────────────────────── */
.pulse { animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4);} 50%{box-shadow:0 0 0 8px rgba(16,185,129,0);} }

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px);}  to{opacity:1;transform:translateY(0);} }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:600px) {
    .card { padding:1.5rem 1.2rem; }
    .hero h1 { font-size:1.6rem; }
    .site-header img.logo { width:72px; height:72px; }
}

/* ─── Print Styles ───────────────────────────────────────────────────────── */
@media print {
    .no-print { display:none !important; }
    body { background:#fff !important; color:#000 !important; font-family:'Times New Roman',serif; }
    .bg-scene { display:none; }
}