/* Template Kursus Bahasa & Pelatihan: navy pekat + hijau limau neon (tombol berteks gelap), tipografi tebal rapat, foto miring
   dengan kartu level, kartu kelas horizontal bergaris warna level, tes penempatan interaktif satu soal per layar. */
:root{--latar:#F7F7FB;--latar-2:#EEEEF7;--permukaan:#FFFFFF;--teks:#13112E;--teks-2:#45436A;--teks-3:#6A688C;--garis:#E2E1EF;
  --utama:#1E1B4B;--utama-tua:#13112E;--utama-muda:#E0E7FF;--pada-utama:#FFFFFF;--aksen:#BEF264;--aksen-tua:#A3E635;--pada-aksen:#13112E;
  --koral:#FB7185;--gelap:#1E1B4B;--pada-gelap:#C7C6E6;--radius:18px;--radius-kecil:12px;--bayang:0 20px 40px -26px rgba(19,17,46,.55)}
h1,h2,h3{font-weight:900;letter-spacing:-.035em}
.serif{font-family:inherit;font-style:normal;font-weight:900;color:var(--utama);background:linear-gradient(transparent 58%,var(--aksen) 58%);padding:0 .08em}

.kepala{background:rgba(255,255,255,.95)}
.kepala .merek{color:var(--utama);font-weight:900}
.kepala .btn-wa,.btn-wa,.btn-utama{background:var(--utama);color:#fff}
.kepala .btn-wa:hover,.btn-wa:hover,.btn-utama:hover{background:#312E81;color:#fff}
.btn{border-radius:12px}
.menu a[aria-current],.menu a:hover{background:var(--utama-muda);color:var(--utama)}

.ks2-alis,.alis{display:inline-block;margin-bottom:12px;font-size:12.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--aksen)}
.ks2-alis.gelap,.alis{color:#4338CA}
.kepala-bag.tengah{margin-left:auto;margin-right:auto;text-align:center}
.ks2-btn{background:var(--aksen);color:var(--pada-aksen);border:2px solid var(--aksen);font-weight:900}
.ks2-btn:hover{background:#fff;border-color:#fff;color:var(--pada-aksen)}
.ks2-btn-garis{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);font-weight:800}
.ks2-btn-garis:hover{border-color:#fff}
.ks2-btn-gelap{background:var(--utama);color:#fff;border:2px solid var(--utama);font-weight:900}
.ks2-btn-gelap:hover{background:#312E81;border-color:#312E81;color:#fff}
.ks2-btn-garis-gelap{background:transparent;color:var(--utama);border:2px solid var(--utama);font-weight:800}
.ks2-tautan{font-weight:900;color:#4338CA;text-decoration:none}
:focus-visible{outline:3px solid #A3E635;outline-offset:3px}

/* Hero */
.ks2-hero{padding:64px 0 76px;background:var(--utama);color:#fff;overflow:hidden}
.ks2-hero .wrap{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.ks2-hero .wrap{grid-template-columns:1.1fr .9fr;gap:60px}}
.ks2-hero h1{color:#fff;font-size:clamp(38px,6vw,72px);line-height:.98;margin:0 0 18px}
.ks2-hero h1 .serif,.ks2-tes-kiri h2 .serif{background:var(--aksen);color:var(--utama-tua);border-radius:10px;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ks2-hero p{color:var(--pada-gelap);font-size:18px;max-width:540px}
.ks2-aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ks2-angka{display:flex;flex-wrap:wrap;gap:12px 36px;margin:34px 0 0}
.ks2-angka dt{font-size:30px;font-weight:900;color:var(--aksen)}
.ks2-angka dd{margin:0;font-size:13.5px;color:var(--pada-gelap)}
.ks2-hero-gbr{position:relative;margin:0;transform:rotate(2.5deg)}
.ks2-hero-gbr img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:24px;border:6px solid #fff}
.ks2-hero-gbr figcaption{position:absolute;left:-18px;bottom:-22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:300px;padding:16px;border-radius:16px;background:#fff;color:var(--teks);transform:rotate(-4deg);box-shadow:var(--bayang)}
.ks2-hero-gbr figcaption span{display:grid;place-items:center;width:40px;height:34px;border-radius:8px;background:var(--latar-2);font-weight:900;font-size:13px;color:var(--teks-3)}
.ks2-hero-gbr figcaption span.on{background:var(--aksen);color:var(--pada-aksen)}
.ks2-hero-gbr figcaption b{width:100%;margin-top:4px;font-size:14px}

/* Kepala kiri */
.ks2-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:26px}
.ks2-kepala h2{margin:0}

/* Kelas */
.ks2-kelas-kisi{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.ks2-kelas-kisi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ks2-kartu{display:grid;grid-template-columns:150px minmax(0,1fr);overflow:hidden;border-radius:var(--radius);background:var(--permukaan);border:1px solid var(--garis);border-left:8px solid #A5B4FC}
.ks2-kartu.l1{border-left-color:var(--aksen-tua)}.ks2-kartu.l2{border-left-color:#818CF8}.ks2-kartu.l3{border-left-color:var(--koral)}
.ks2-kartu-gbr img{width:100%;height:100%;min-height:100%;object-fit:cover}
.ks2-kartu-isi{display:flex;flex-direction:column;padding:18px 20px}
.ks2-level{align-self:flex-start;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:var(--latar-2);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--utama)}
.ks2-kartu.l1 .ks2-level{background:#ECFCCB;color:#3F6212}.ks2-kartu.l3 .ks2-level{background:#FFE4E6;color:#9F1239}
.ks2-kartu h3{font-size:19px;margin:0 0 6px}
.ks2-kartu h3 a{color:inherit;text-decoration:none}
.ks2-kartu p{margin:0 0 10px;color:var(--teks-2);font-size:14.5px}
.ks2-info{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;font-weight:700;color:var(--teks-3)}
.ks2-info li{display:inline-flex;align-items:center;gap:5px}
.ks2-info .ico{width:15px;height:15px}
.ks2-harga{margin-top:auto!important;font-size:13.5px!important}
.ks2-harga b{font-size:20px;color:var(--utama)}
@media(max-width:560px){.ks2-kartu{grid-template-columns:minmax(0,1fr)}.ks2-kartu-gbr img{aspect-ratio:16/9;height:auto}}

/* Tes level */
.ks2-tes{background:var(--latar-2)}
.ks2-tes-kotak{display:grid;gap:28px;padding:34px;border-radius:28px;background:var(--utama);color:#fff}
@media(min-width:900px){.ks2-tes-kotak{grid-template-columns:.8fr 1.2fr;gap:48px;padding:48px}}
.ks2-tes-kiri h2{color:#fff;margin:0 0 10px}
.ks2-tes-kiri p{color:var(--pada-gelap)}
.ks2-bar{height:10px;margin-top:22px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.ks2-bar span{display:block;height:100%;width:0;background:var(--aksen);transition:width .3s}
.ks2-nomor{margin:10px 0 0;font-weight:800;font-size:14px;color:var(--aksen)!important}
.ks2-tes-kanan{padding:24px;border-radius:20px;background:#fff;color:var(--teks)}
.ks2-soal-statis[hidden],.ks2-soal[hidden]{display:none}
.ks2-soal-statis{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14.5px}
.ks2-soal-statis b{display:block}
.ks2-tanya{margin:0 0 16px;font-size:clamp(19px,2.2vw,24px);font-weight:900;letter-spacing:-.02em}
.ks2-pilihan{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ks2-pilihan button{min-height:54px;padding:10px 14px;border:2px solid var(--garis);border-radius:14px;background:var(--latar);font:inherit;font-size:16px;font-weight:800;color:var(--teks);cursor:pointer;text-align:left}
.ks2-pilihan button:hover,.ks2-pilihan button:focus-visible{border-color:var(--utama);background:#ECFCCB}
.ks2-hasil{margin:4px 0 8px;font-size:30px;font-weight:900;letter-spacing:-.03em;color:var(--utama)}
.ks2-hasil-kecil{margin:0 0 10px;color:var(--teks-2);font-weight:700}
.ks2-soal .btn{margin-top:8px}
.ks2-ulang{display:block;margin-top:14px;border:0;background:none;color:#4338CA;font:inherit;font-weight:800;cursor:pointer;text-decoration:underline}

/* Metode (markup bawaan) */
#unggulan .fitur{border-radius:var(--radius);background:var(--permukaan);border:1px solid var(--garis)}
#unggulan .ikon{background:var(--aksen);color:var(--pada-aksen);border-radius:14px}

/* Pengajar */
.ks2-guru-kisi{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.ks2-guru-kisi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ks2-guru-kisi li{display:flex;gap:14px;align-items:center;padding:18px;border-radius:var(--radius);background:var(--permukaan);border:1px solid var(--garis);border-bottom:4px solid var(--aksen-tua)}
.ks2-guru-kisi img,.ks2-inisial{flex:none;width:62px;height:62px;border-radius:18px;object-fit:cover}
.ks2-inisial{display:grid;place-items:center;background:var(--utama);color:var(--aksen);font-size:24px;font-weight:900}
.ks2-guru-kisi b{display:block;font-size:16px}
.ks2-guru-kisi span{display:block;font-size:14px;font-weight:800;color:#4338CA}
.ks2-guru-kisi small{display:block;font-size:13px;color:var(--teks-3)}

/* Galeri, testimoni, faq */
#galeri .galeri figure{border-radius:var(--radius);overflow:hidden}
#galeri .galeri img{aspect-ratio:1/1;object-fit:cover;filter:saturate(1.05)}
#testimoni .testi{background:var(--permukaan);border-radius:var(--radius);border:1px solid var(--garis)}
#testimoni .testi .nama small,#testimoni .testi small{color:#4338CA;font-weight:800}
#testimoni .bintang{color:#65A30D}
#faq .faq details{background:var(--permukaan);border-radius:var(--radius-kecil);border:1px solid var(--garis)}

/* Ajakan */
.ks2-ajakan{padding:72px 0}
.ks2-ajakan-panel{padding:54px 40px;border-radius:32px;background:var(--aksen);color:var(--pada-aksen);text-align:center}
.ks2-ajakan-panel h2{font-size:clamp(30px,4.6vw,52px);margin:0 0 12px}
.ks2-ajakan-panel h2 .serif{background:none;color:var(--utama);text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:6px}
.ks2-ajakan-panel p{max-width:620px;margin:0 auto;font-size:17px;color:#26350B}
.ks2-ajakan .ks2-aksi{justify-content:center}

.kaki{background:var(--utama-tua)}

@media(max-width:760px){
  .ks2-hero{padding:40px 0 64px}
  .ks2-aksi .btn{width:100%;justify-content:center}
  .ks2-hero-gbr{transform:none;margin-bottom:12px}
  .ks2-hero-gbr figcaption{left:10px;right:10px;bottom:-26px;max-width:none;transform:none}
  .ks2-tes-kotak{padding:22px;border-radius:22px}
  .ks2-tes-kanan{padding:18px}
  .ks2-pilihan{grid-template-columns:minmax(0,1fr)}
  .ks2-ajakan-panel{padding:36px 20px}
}