:root{
  --navy:#0D2B52;
  --navy-deep:#081B36;
  --kuning:#FFC233;
  --merah:#E53935;
  --putih:#FFFFFF;
  --abu:#F2F5FA;
  --tinta:#10213A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--tinta);background:var(--putih);line-height:1.6}
h1,h2,h3{font-family:'Unbounded',sans-serif;line-height:1.15}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;padding:14px 28px;border-radius:999px;font-size:.95rem;transition:transform .15s,box-shadow .15s;border:3px solid var(--navy-deep)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--navy-deep)}
.btn:focus-visible{outline:3px solid var(--merah);outline-offset:2px}
.btn-kuning{background:var(--kuning);color:var(--navy-deep)}
.btn-wa{background:#22C55E;color:#fff}
.btn-putih{background:#fff;color:var(--navy-deep)}

/* ===== nav ===== */
nav{background:var(--navy-deep);position:sticky;top:0;z-index:60}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;padding:2px}
.brand b{font-family:'Unbounded';font-size:.8rem;line-height:1.2}
.nav-links{display:flex;gap:22px;font-size:.88rem;font-weight:700}
.nav-links a{color:rgba(255,255,255,.75);text-decoration:none}
.nav-links a:hover{color:var(--kuning)}
nav .btn{padding:9px 18px;font-size:.8rem;border-width:2px;border-color:var(--kuning)}

/* ===== hero ===== */
header{background:var(--navy);color:#fff;position:relative;overflow:hidden}
header::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 85% 15%,rgba(255,194,51,.18),transparent 40%),
  radial-gradient(circle at 10% 90%,rgba(229,57,53,.12),transparent 35%)}
.hero{padding:64px 0 56px;position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.sticker{display:inline-flex;align-items:center;gap:8px;background:var(--kuning);color:var(--navy-deep);font-weight:800;font-size:.78rem;padding:8px 16px;border-radius:999px;border:3px solid var(--navy-deep);box-shadow:3px 3px 0 var(--navy-deep);transform:rotate(-2deg);margin-bottom:22px;text-transform:uppercase;letter-spacing:.05em}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:900}
.hero h1 .hl{color:var(--kuning);position:relative;white-space:nowrap}
.hero p{margin:18px 0 30px;max-width:48ch;opacity:.88;font-size:1.02rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-logos{display:flex;gap:14px;margin-top:34px;align-items:center}
.hero-logos img{width:58px;height:58px;border-radius:50%;background:#fff;padding:4px;border:3px solid var(--kuning)}
.hero-logos small{font-size:.78rem;opacity:.75;max-width:22ch}
.hero-banner{border-radius:22px;border:4px solid var(--kuning);box-shadow:8px 8px 0 rgba(0,0,0,.25);transform:rotate(1.5deg)}

/* countdown */
.count{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
.count div{background:rgba(255,255,255,.07);border:2px solid rgba(255,194,51,.5);border-radius:14px;padding:10px 16px;text-align:center;min-width:72px}
.count b{display:block;font-family:'Unbounded';font-size:1.6rem;color:var(--kuning)}
.count small{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

/* ===== marquee ===== */
.marquee{background:var(--kuning);border-top:3px solid var(--navy-deep);border-bottom:3px solid var(--navy-deep);overflow:hidden;white-space:nowrap;padding:10px 0}
.marquee span{display:inline-block;font-family:'Unbounded';font-weight:700;font-size:.85rem;color:var(--navy-deep);animation:scroll 22s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== sections ===== */
section{padding:70px 0}
.tag{display:inline-block;background:var(--merah);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.sec-head h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;margin-bottom:36px}

/* sekolah */
.sekolah-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.skl{background:var(--abu);border:3px solid var(--navy-deep);border-radius:22px;padding:30px;box-shadow:6px 6px 0 var(--navy-deep);transition:transform .15s}
.skl:hover{transform:translate(-3px,-3px)}
.skl-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.skl-head img{width:70px;height:70px;border-radius:50%;background:#fff;padding:4px;border:3px solid var(--kuning)}
.skl h3{font-size:1.05rem;color:var(--navy)}
.skl .bidang{font-size:.8rem;font-weight:700;color:var(--merah);text-transform:uppercase;letter-spacing:.06em}
.jurusan{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.jurusan span{background:var(--navy);color:#fff;font-size:.8rem;font-weight:700;padding:7px 14px;border-radius:999px}
.jurusan span b{color:var(--kuning)}

/* keunggulan */
#kenapa{background:var(--navy);color:#fff}
#kenapa .sec-head h2{color:#fff}
.plus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.plus{background:rgba(255,255,255,.06);border:2px solid rgba(255,194,51,.45);border-radius:18px;padding:24px}
.plus .ic{font-size:1.8rem}
.plus b{display:block;font-family:'Unbounded';font-size:.92rem;margin:10px 0 6px;color:var(--kuning)}
.plus p{font-size:.88rem;opacity:.85}

/* alur */
.alur{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;list-style:none}
.alur li{background:#fff;border:3px solid var(--navy-deep);border-radius:18px;padding:26px 22px 22px;position:relative;box-shadow:5px 5px 0 var(--kuning)}
.alur li::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:18px;background:var(--navy-deep);color:var(--kuning);font-family:'Unbounded';font-weight:900;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--kuning)}
.alur b{display:block;margin-bottom:6px;color:var(--navy)}
.alur p{font-size:.88rem;opacity:.8}

/* form */
#daftar{background:var(--navy-deep);color:#fff}
#daftar .sec-head h2{color:#fff}
form{display:grid;gap:16px;max-width:560px}
label{font-weight:600;font-size:.9rem}
input,select{width:100%;margin-top:6px;padding:14px 16px;border-radius:14px;border:2px solid rgba(255,194,51,.5);background:rgba(255,255,255,.06);color:#fff;font:inherit}
input::placeholder{color:rgba(255,255,255,.4)}
input:focus,select:focus{outline:3px solid var(--kuning);outline-offset:1px}
select option{color:var(--tinta)}
.note{font-size:.8rem;opacity:.65}
.kontak-cepat{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.kontak-cepat a{background:rgba(255,255,255,.07);border:2px solid rgba(255,194,51,.5);color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;padding:10px 18px;border-radius:999px}
.kontak-cepat a:hover{background:var(--kuning);color:var(--navy-deep)}

footer{background:#050F1F;color:rgba(255,255,255,.65);padding:36px 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer img{width:46px;height:46px;border-radius:50%;background:#fff;padding:3px}

@media(max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero-banner{display:none}
  .sekolah-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== halaman profil ===== */
.page-hero{background:var(--navy);color:#fff;padding:56px 0 48px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,194,51,.16),transparent 45%)}
.page-hero .wrap{position:relative;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.page-hero img{width:96px;height:96px;border-radius:50%;background:#fff;padding:5px;border:4px solid var(--kuning)}
.page-hero h1{font-size:clamp(1.5rem,3.6vw,2.4rem);font-weight:900}
.page-hero .sub{opacity:.85;margin-top:8px;max-width:60ch}
.crumb{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kuning);margin-bottom:10px;display:block}

.prose{max-width:720px}
.prose p{margin-bottom:16px}
.vm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:10px}
.vm{background:var(--abu);border:3px solid var(--navy-deep);border-radius:20px;padding:28px;box-shadow:6px 6px 0 var(--kuning)}
.vm h3{font-size:1rem;color:var(--navy);margin-bottom:12px}
.vm ul{padding-left:20px;font-size:.92rem}
.vm ul li{margin-bottom:8px}

.info-tabel{width:100%;border-collapse:collapse;max-width:680px;font-size:.93rem}
.info-tabel td{padding:12px 14px;border-bottom:2px solid var(--abu);vertical-align:top}
.info-tabel td:first-child{font-weight:800;color:var(--navy);width:200px}

.skl-link{display:flex;gap:16px;align-items:center;background:var(--abu);border:3px solid var(--navy-deep);border-radius:18px;padding:20px 24px;text-decoration:none;color:var(--tinta);box-shadow:5px 5px 0 var(--navy-deep);transition:transform .15s;margin-bottom:18px}
.skl-link:hover{transform:translate(-3px,-3px)}
.skl-link img{width:56px;height:56px;border-radius:50%;background:#fff;padding:3px;border:3px solid var(--kuning)}
.skl-link b{color:var(--navy);font-family:'Unbounded';font-size:.9rem}
.skl-link small{display:block;color:var(--merah);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em}
.skl-link .arrow{margin-left:auto;font-size:1.4rem;color:var(--navy)}

.cta-strip{background:var(--kuning);border-top:3px solid var(--navy-deep);border-bottom:3px solid var(--navy-deep);padding:34px 0;text-align:center}
.cta-strip h2{font-size:1.2rem;color:var(--navy-deep);margin-bottom:16px}