/* Bimbel Cerdas Juara — demo Sekolah (bimbingan belajar)
   Palet: utama #7c3aed (ungu), aksen #f97316 (oranye), tema terang */
:root{
  --ungu:#7c3aed; --ungu-tua:#5b21b6; --ungu-muda:#ede9fe; --ungu-soft:#f5f3ff;
  --oranye:#f97316; --oranye-tua:#c2410c; --oranye-muda:#ffedd5;
  --teks:#1e1b2e; --teks-lembut:#5b5670; --garis:#e7e3f3;
  --putih:#ffffff; --bg:#faf8ff;
  --radius:16px; --shadow:0 8px 30px rgba(124,58,237,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--teks); background:var(--bg); line-height:1.65; font-size:16px;
}
img{max-width:100%}
a{color:var(--ungu); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1120px,92%); margin-inline:auto}

/* ---------- Demo bar ---------- */
.demobar{
  background:linear-gradient(90deg,var(--ungu-tua),var(--ungu));
  color:#fff; font-size:13.5px; text-align:center; padding:8px 12px;
}
.demobar a{color:#fff; text-decoration:underline; font-weight:600}
.demobar b{letter-spacing:.5px}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--garis);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0; position:relative}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--teks)}
.brand:hover{text-decoration:none}
.brand .logo{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--ungu),var(--oranye));
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.brand small{display:block; font-weight:600; font-size:11.5px; color:var(--oranye); letter-spacing:1px}
.menu{list-style:none; display:flex; gap:4px; align-items:center}
.menu a{
  display:block; padding:9px 14px; border-radius:10px; color:var(--teks-lembut);
  font-weight:600; font-size:15px;
}
.menu a:hover{background:var(--ungu-soft); color:var(--ungu); text-decoration:none}
.menu a.active{background:var(--ungu); color:#fff}
.menu .cta a{background:var(--oranye); color:#fff}
.menu .cta a:hover{background:var(--oranye-tua); color:#fff}
.burger,#nav{display:none}
.burger{
  width:44px; height:44px; border-radius:10px; border:1px solid var(--garis);
  cursor:pointer; place-items:center; background:#fff;
}
.burger span,.burger span::before,.burger span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ungu); border-radius:2px; position:relative;
}
.burger span::before{position:absolute; top:-6px}
.burger span::after{position:absolute; top:6px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 22px; border-radius:12px; font-weight:700;
  background:var(--oranye); color:#fff; border:none; cursor:pointer; font-size:15px;
}
.btn:hover{background:var(--oranye-tua); text-decoration:none}
.btn.ghost{background:transparent; color:var(--ungu); border:2px solid var(--ungu)}
.btn.ghost:hover{background:var(--ungu); color:#fff}
.btn.lg{padding:14px 28px; font-size:16px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 360px at 88% -10%,var(--ungu-muda),transparent),
    radial-gradient(500px 300px at 5% 110%,var(--oranye-muda),transparent),
    var(--bg);
  padding:64px 0 56px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--ungu-soft);
  color:var(--ungu); font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--ungu-muda); margin-bottom:18px;
}
.hero h1{font-size:clamp(28px,5vw,46px); line-height:1.12; letter-spacing:-.5px}
.hero h1 .grad{
  background:linear-gradient(90deg,var(--ungu),var(--oranye));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{color:var(--teks-lembut); font-size:18px; margin:18px 0 26px; max-width:46ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-stats{display:flex; gap:26px; margin-top:30px; flex-wrap:wrap}
.hero-stats b{display:block; font-size:26px; color:var(--ungu)}
.hero-stats span{font-size:13px; color:var(--teks-lembut)}

/* hero card illustrasi CSS */
.hero-card{
  background:#fff; border-radius:24px; padding:24px; box-shadow:var(--shadow);
  border:1px solid var(--garis); position:relative;
}
.hero-card .tag{
  position:absolute; top:-14px; right:18px; background:var(--oranye); color:#fff;
  font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; box-shadow:var(--shadow);
}
.score-row{display:flex; align-items:flex-end; gap:10px; height:130px; margin:6px 0 16px}
.score-row .bar{flex:1; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,var(--ungu),var(--ungu-tua))}
.score-row .bar:nth-child(2){background:linear-gradient(180deg,var(--oranye),var(--oranye-tua))}
.mini-list{display:grid; gap:10px}
.mini-list div{
  display:flex; align-items:center; gap:10px; background:var(--ungu-soft);
  padding:10px 12px; border-radius:12px; font-size:14px; font-weight:600;
}
.mini-list svg{flex:none}

/* ---------- Sections ---------- */
section.blk{padding:58px 0}
.sec-head{text-align:center; max-width:60ch; margin:0 auto 38px}
.sec-head .kicker{color:var(--oranye); font-weight:800; letter-spacing:1.5px; font-size:13px; text-transform:uppercase}
.sec-head h2{font-size:clamp(24px,4vw,34px); margin:8px 0; letter-spacing:-.4px}
.sec-head p{color:var(--teks-lembut)}
.alt{background:var(--ungu-soft)}

.grid{display:grid; gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff; border:1px solid var(--garis); border-radius:var(--radius);
  padding:24px; box-shadow:0 4px 18px rgba(124,58,237,.06);
}
.card h3{font-size:18px; margin-bottom:8px}
.card p{color:var(--teks-lembut); font-size:15px}
.ico{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--ungu-muda); color:var(--ungu);
}
.ico.or{background:var(--oranye-muda); color:var(--oranye-tua)}

/* level pills */
.levels{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px}
.levels span{
  background:#fff; border:1px solid var(--garis); padding:8px 16px; border-radius:999px;
  font-weight:700; font-size:14px; color:var(--ungu);
}

/* program card with price */
.prog{border-top:4px solid var(--ungu)}
.prog:nth-child(2){border-top-color:var(--oranye)}
.prog .price{font-size:22px; font-weight:800; color:var(--teks); margin:6px 0}
.prog .price small{font-size:13px; color:var(--teks-lembut); font-weight:600}
.prog ul{list-style:none; margin:14px 0; display:grid; gap:8px}
.prog li{display:flex; gap:8px; font-size:14.5px; color:var(--teks-lembut)}
.prog li::before{content:"✓"; color:var(--oranye); font-weight:800}
.badge-pop{display:inline-block; background:var(--oranye); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; margin-bottom:8px}

/* stats strip */
.strip{background:linear-gradient(120deg,var(--ungu-tua),var(--ungu)); color:#fff}
.strip .grid{text-align:center}
.strip b{display:block; font-size:34px}
.strip span{opacity:.85; font-size:14px}

/* testimoni */
.quote{position:relative}
.quote .stars{color:var(--oranye); margin-bottom:8px; letter-spacing:2px}
.quote p{color:var(--teks); font-style:italic}
.quote .who{display:flex; align-items:center; gap:10px; margin-top:14px}
.avatar{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--ungu),var(--oranye))}
.who b{display:block; font-size:14px}
.who span{font-size:12.5px; color:var(--teks-lembut)}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--ungu),var(--oranye)); color:#fff; border-radius:24px;
  padding:44px; text-align:center; margin:10px 0;
}
.cta-band h2{font-size:clamp(24px,4vw,32px)}
.cta-band p{opacity:.92; margin:10px auto 22px; max-width:50ch}
.cta-band .btn{background:#fff; color:var(--ungu)}
.cta-band .btn:hover{background:var(--ungu-soft)}

/* page banner */
.page-banner{
  background:radial-gradient(600px 240px at 80% -20%,var(--ungu-muda),transparent),var(--ungu-soft);
  padding:48px 0; border-bottom:1px solid var(--garis);
}
.page-banner .crumbs{font-size:13px; color:var(--teks-lembut); margin-bottom:8px}
.page-banner h1{font-size:clamp(26px,4.5vw,40px); letter-spacing:-.4px}
.page-banner p{color:var(--teks-lembut); margin-top:8px; max-width:60ch}

/* prose / lists */
.prose p{margin-bottom:14px; color:var(--teks-lembut)}
.checklist{list-style:none; display:grid; gap:12px}
.checklist li{display:flex; gap:12px; align-items:flex-start}
.checklist li svg{flex:none; margin-top:3px}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}

/* timeline kurikulum */
.timeline{display:grid; gap:0; position:relative; margin-left:8px}
.tl{display:flex; gap:18px; padding-bottom:24px; position:relative}
.tl::before{content:""; position:absolute; left:15px; top:6px; bottom:-6px; width:2px; background:var(--ungu-muda)}
.tl:last-child::before{display:none}
.tl .dot{width:32px; height:32px; border-radius:50%; flex:none; background:var(--ungu); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; z-index:1}
.tl:nth-child(even) .dot{background:var(--oranye)}
.tl h3{font-size:17px}
.tl p{color:var(--teks-lembut); font-size:14.5px}

/* tabel */
.tbl{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--garis)}
.tbl th,.tbl td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--garis); font-size:14.5px}
.tbl th{background:var(--ungu); color:#fff; font-weight:700}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:nth-child(even) td{background:var(--ungu-soft)}

/* steps PPDB */
.steps{counter-reset:s; display:grid; gap:16px}
.steps .step{display:flex; gap:16px; background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:18px 20px}
.steps .step::before{
  counter-increment:s; content:counter(s); flex:none; width:38px; height:38px; border-radius:10px;
  background:var(--oranye-muda); color:var(--oranye-tua); font-weight:800; display:grid; place-items:center;
}
.steps h3{font-size:16px}
.steps p{color:var(--teks-lembut); font-size:14.5px}

/* galeri */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gal .item{
  aspect-ratio:4/3; border-radius:14px; position:relative; overflow:hidden; color:#fff;
  display:flex; align-items:flex-end; padding:14px; font-weight:700; font-size:14px;
  border:1px solid var(--garis);
}
.gal .item span{position:relative; z-index:1}
.gal .item::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.45))}
.gal .g1{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.gal .g2{background:linear-gradient(135deg,#f97316,#fb923c)}
.gal .g3{background:linear-gradient(135deg,#5b21b6,#7c3aed)}
.gal .g4{background:linear-gradient(135deg,#c2410c,#f97316)}
.gal .g5{background:linear-gradient(135deg,#6d28d9,#ec4899)}
.gal .g6{background:linear-gradient(135deg,#ea580c,#facc15)}
.gal .g7{background:linear-gradient(135deg,#4c1d95,#7c3aed)}
.gal .g8{background:linear-gradient(135deg,#9333ea,#f97316)}
.gal .g9{background:linear-gradient(135deg,#7c3aed,#06b6d4)}

/* kontak */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.info-card{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:18px; margin-bottom:14px}
.info-card .ico{margin:0}
.info-card b{display:block}
.info-card span{color:var(--teks-lembut); font-size:14.5px}
form .field{margin-bottom:16px}
form label{display:block; font-weight:700; font-size:14px; margin-bottom:6px}
form input,form select,form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--garis); border-radius:12px;
  font:inherit; background:#fff; color:var(--teks);
}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--ungu); border-color:var(--ungu)}
.formnote{font-size:12.5px; color:var(--oranye-tua); background:var(--oranye-muda); padding:8px 12px; border-radius:10px; margin-bottom:16px; font-weight:600}
.map{height:240px; border-radius:var(--radius); border:1px solid var(--garis); background:
  repeating-linear-gradient(0deg,#eee9fb 0 24px,#f6f3ff 24px 48px),
  repeating-linear-gradient(90deg,#eee9fb 0 24px,transparent 24px 48px);
  display:grid; place-items:center; color:var(--teks-lembut); font-weight:600;
}

/* FAQ */
.faq details{background:#fff; border:1px solid var(--garis); border-radius:12px; padding:16px 18px; margin-bottom:12px}
.faq summary{font-weight:700; cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋"; color:var(--oranye); font-weight:800; margin-right:10px}
.faq details[open] summary::before{content:"－"}
.faq p{color:var(--teks-lembut); margin-top:10px; font-size:14.5px}

/* ---------- Footer ---------- */
.site-foot{background:#1e1b2e; color:#cfc8e6; padding:50px 0 24px; margin-top:10px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px}
.site-foot h4{color:#fff; font-size:15px; margin-bottom:14px}
.site-foot a{color:#cfc8e6}
.site-foot a:hover{color:#fff}
.site-foot ul{list-style:none; display:grid; gap:8px; font-size:14.5px}
.foot-brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; margin-bottom:12px}
.foot-brand .logo{width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--ungu),var(--oranye)); display:grid; place-items:center; flex:none}
.foot-about{font-size:14px; color:#b3aacf; max-width:34ch}
.foot-contact li{display:flex; gap:8px; align-items:flex-start}
.foot-bottom{border-top:1px solid #332c4a; margin-top:34px; padding-top:18px; font-size:13px; color:#9d93bc; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .burger{display:grid}
  .menu{
    position:absolute; top:calc(100% + 8px); right:0; left:0;
    flex-direction:column; align-items:stretch; gap:6px;
    background:#fff; border:1px solid var(--garis); border-radius:14px;
    padding:10px; box-shadow:var(--shadow); display:none;
  }
  #nav:checked ~ .menu{display:flex}
  .menu a{padding:12px 14px}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-band{padding:30px 20px}
  .hero{padding:40px 0}
  .gal{grid-template-columns:1fr 1fr}
}