:root {
  /* Palet Pensil Indonesia — Electric Orange & Bermuda Blue */
  --ink-900: #293241;
  --ink-700: #3D5A80;
  --paper-50: #F7FBFC;
  --paper-100: #E0FBFC;
  --pencil-yellow: #EE6C4D;
  --pencil-yellow-dark: #D8543A;
  --accent-carrot: #F2896A;
  --sky-500: #98C1D9;
  --sky-100: #E0FBFC;
  --chalk-green: #3C8557;
  --margin-red: #C0392B;
  --graphite-600: #3D4759;
  --graphite-400: #7C8698;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-note: 'Kalam', cursive;

  --radius-card: 10px;   /* border-radius seragam untuk semua section & card */
  --radius-pill: 999px;
  --max-width: 1160px;
  --inset-x: 20px;        /* jarak kiri-kanan "kartu" section dari tepi layar */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background-color: #FFFFFF;
  color: var(--graphite-600);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

@media (min-width: 1400px) {
  :root { --max-width: 1440px; }
}
@media (min-width: 1700px) {
  :root { --max-width: 1720px; }
}
@media (min-width: 2000px) {
  :root { --max-width: 94vw; }
}

h1, h2, h3 { font-family: var(--font-display); color: var(--ink-900); margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--pencil-yellow-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons (simpel, radius 10px) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--pencil-yellow);
  color: #fff;
}
.btn--primary:hover { background: var(--pencil-yellow-dark); }
.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--ghost:hover { background: var(--ink-900); color: var(--paper-50); }

/* ---------- Header (nav mengambang, lihat nav-glass.css) ---------- */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__icon { width: 28px; height: 28px; }
.brand__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-900);
}
.brand__text em { color: var(--pencil-yellow-dark); font-style: normal; }
[data-theme="dark"] .brand__text { color: var(--paper-50); }
[data-theme="dark"] .brand__text em { color: var(--pencil-yellow); }
.brand__text--light { color: var(--paper-50) !important; font-size: 1.4rem; }
.brand__text--light em { color: var(--pencil-yellow) !important; }

/* beri jarak konten dari nav yang mengambang */
main { display: block; padding-top: 78px; }

/* ---------- Hero (kartu gradien, foto siswa mengambang) ---------- */
.hero {
  position: relative;
  margin: 20px var(--inset-x, 20px) 20px;
  min-height: min(84vh, 760px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 55%, var(--sky-500) 100%); /* fallback gradasi palet jika hero__bg gagal dimuat */
  isolation: isolate;
  display: flex;
}
.hero__inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  padding: 64px 20px 0;
}

/* --- Background foto inner hero (ganti file: assets/images/hero-bg.jpg) --- */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%; /* fokus ke wajah, bukan tengah badan */
  z-index: 0;
}
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(238,108,77,1) 0%, rgba(238,108,77,.45) 22%, rgba(238,108,77,0) 48%),
    linear-gradient(135deg, rgba(41,50,65,.90) 0%, rgba(61,90,128,.78) 45%, rgba(152,193,217,.55) 100%);
}

/* --- Gradasi oren di belakang foto siswa --- */
.hero__visual-glow {
  position: absolute;
  z-index: 2;
  inset: 0;
  left: 40%;
  background: radial-gradient(120% 90% at 78% 100%, rgba(238,108,77,.75) 0%, rgba(216,84,58,.4) 45%, transparent 72%);
  pointer-events: none;
}

/* --- bentuk dekoratif, murni CSS supaya tidak butuh file gambar tambahan --- */
.hero__decor { position: absolute; pointer-events: none; z-index: 2; }
.hero__decor--blob-a {
  top: -60px; right: 18%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(60,133,87,.5), transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
}

.hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
  height: 100%;
}

.hero__content { display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; min-width: 0; }

.hero__title { color: var(--paper-50); margin-bottom: .4em; }
.hero__highlight { position: relative; color: var(--pencil-yellow-dark); white-space: nowrap; }

.hero__lede--light { color: rgba(251,247,236,.82); font-size: 1.1rem; max-width: 46ch; margin-bottom: 0; }

.hero__actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; align-items: center; }
.btn--outline-light {
  background: transparent;
  color: var(--paper-50);
  border-color: rgba(251,247,236,.55);
}
.btn--outline-light:hover { background: rgba(251,247,236,.16); border-color: var(--paper-50); }

.hero__stats--light { display: flex; gap: 12px; margin-top: 22px; overflow: hidden; }
.hero__stats--light .hero__stat { color: var(--paper-50); }

/* --- Track statistik: 2x agar bisa jadi marquee tanpa putus di mobile --- */
.hero__stats-track { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__stats-track[aria-hidden="true"] { display: none; }

/* --- Pill tag, mirip baris kategori bergulir --- */
.hero__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(251,247,236,.12);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(251,247,236,.35);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .25s ease, border-color .25s ease;
}

.hero__stat:hover {
  background: rgba(251,247,236,.18);
  border-color: rgba(251,247,236,.55);
}
.hero__stat strong { font-size: .82rem; font-weight: 700; }
.hero__stat span { font-size: .78rem; font-weight: 400; opacity: .72; }
.hero__stat span::before { content: '· '; }

@keyframes heroStatsMarquee {
  to { transform: translateX(-100%); }
}

/* --- Foto siswa (ganti file: assets/images/hero-siswa.png) --- */
.hero__visual {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 360px;
}
.hero__photo {
  position: relative;
  z-index: 1;
  max-height: 100%;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.035));
}

/* ---------- Desktop: proporsi hero ---------- */
@media (min-width: 861px) {
  .hero__grid { width: 100%; }
  .hero__visual { min-height: 480px; }
  .hero__bg { object-position: 50% 20%; }

  /* --- Marquee statistik hero (desktop) --- */
  .hero__stats--light {
    flex-wrap: nowrap;
    max-width: 100%;
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .hero__stats-track {
    flex-wrap: nowrap;
    flex-shrink: 0;
    animation: heroStatsMarquee 18s linear infinite;
  }
  .hero__stats-track[aria-hidden="true"] { display: flex; }
  .hero__stat { white-space: nowrap; }
}

@media (max-width: 860px) {
  :root { --inset-x: 10px; }

  .hero { margin: 16px var(--inset-x, 10px) 10px; min-height: auto; }
  .hero__inner {
    padding: 32px 16px 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
  .hero__grid { grid-template-columns: 1fr; align-items: center; gap: 22px; width: 100%; }
  .hero__content { padding-bottom: 0; text-align: center; }
  .hero__title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .hero__lede--light { margin-left: auto; margin-right: auto; }
  .hero__visual { margin-top: 8px; margin-bottom: -32px; min-height: 340px; justify-content: center; }
  .hero__photo { max-height: 340px; margin: 0 auto; }
  .hero__visual-glow { left: 0; }

  /* --- Tombol hero sebaris horizontal, radius 10px --- */
  .hero__actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero__actions::-webkit-scrollbar { display: none; }
  .hero__actions .btn {
    border-radius: 10px;
    white-space: nowrap;
    flex: 0 1 auto;
    padding: 11px 14px;
    font-size: .8rem;
    gap: 6px;
  }

  /* --- Marquee statistik hero (jalan otomatis) --- */
  .hero__stats--light {
    margin-top: 24px;
    flex-wrap: nowrap;
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .hero__stats-track {
    flex-wrap: nowrap;
    flex-shrink: 0;
    animation: heroStatsMarquee 16s linear infinite;
  }
  .hero__stats-track[aria-hidden="true"] { display: flex; }
  .hero__stat { white-space: nowrap; }
}

@media (max-width: 380px) {
  .hero__actions .btn { font-size: .74rem; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stats-track { animation: none; }
}

/* ---------- Generic sections ---------- */
.section { padding: 72px 0; background: var(--paper-50); }
.section--alt { background: var(--sky-100); }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section__head p { color: var(--graphite-400); max-width: 52ch; margin: 6px 0 0; }
.section__link { font-weight: 700; color: var(--ink-900); border-bottom: 2px solid var(--pencil-yellow); padding-bottom: 2px; white-space: nowrap; }

/* ---------- Section-inset: setiap section jadi "kartu" mengambang, radius seragam ---------- */
.section-inset {
  margin: 20px var(--inset-x);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (max-width: 620px) {
  .section-inset { margin: 14px 12px; }
}

/* ---------- Animasi muncul saat discroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Tentang Kami (preview + video) ---------- */
.about-preview__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 20px;
  align-items: center;
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid rgba(22,35,63,.1);
  box-shadow: 8px 10px 0 rgba(22,35,63,.08);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.about-preview__text .hero__eyebrow { margin-bottom: 10px; }
.about-preview__text p { max-width: 50ch; }
.about-preview__text .btn { margin-top: 6px; }

@media (max-width: 860px) {
  .about-preview__grid { grid-template-columns: 1fr; }
}

/* ---------- Mata Pelajaran: bento grid (foto per kategori) ---------- */
.mapel-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.mapel-bento__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink-700), var(--sky-500));
  display: block;
}
.mapel-bento__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.mapel-bento__item:hover img { transform: scale(1.06); }
.mapel-bento__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(41,50,65,.65) 0%, rgba(41,50,65,.15) 55%, transparent 80%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 14px;
  text-align: center;
}
.mapel-bento__label {
  display: block;
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.mapel-bento__title {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.035);
  margin: 0;
}

@media (max-width: 1180px) { .mapel-bento { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) { .mapel-bento { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .mapel-bento { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Judul dengan hiasan dot oranye besar di pojok kiri-atas (di belakang kata pertama) ---------- */
.title-deco {
  position: relative;
  z-index: 1;
}
.title-deco::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pencil-yellow);
  opacity: .55;
  z-index: -1;
}
[data-theme="dark"] .title-deco::before { opacity: .4; }

/* ---------- Alur pendaftaran: layout kiri (judul) - kanan (list bernomor besar) ---------- */
.alur-section__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
}
.alur-section__aside { position: sticky; top: 100px; }
.alur-section__eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pencil-yellow-dark);
  margin-bottom: 10px;
}
.alur-section__title { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 0; }

.alur-list { display: flex; flex-direction: column; gap: 14px; }
.alur-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--paper-50);
  border: 1px solid rgba(22,35,63,.1);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease;
}
.alur-item__badge {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper-50);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  z-index: 1;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.alur-item__body { z-index: 1; transition: color .3s ease; }
.alur-item__body h3 { margin-bottom: 4px; font-size: 1.1rem; transition: color .3s ease; }
.alur-item__body p { margin-bottom: 0; font-size: .9rem; color: var(--graphite-600); transition: color .3s ease; }
.section--alt .alur-item { background: var(--paper-50); }

.alur-item:hover {
  background: linear-gradient(90deg, var(--ink-700) 0%, var(--sky-500) 100%);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(41,50,65,.025);
  transform: translateY(-2px);
}
.alur-item:hover .alur-item__badge { background: #fff; color: var(--ink-700); }
.alur-item:hover .alur-item__body h3 { color: #fff; }
.alur-item:hover .alur-item__body p { color: rgba(255,255,255,.85); }

@media (max-width: 960px) {
  .alur-section__grid { grid-template-columns: 1fr; gap: 24px; }
  .alur-section__aside { position: static; }
}

@media (max-width: 620px) {
  .alur-item { padding: 16px 16px; gap: 14px; }
  .alur-item__badge { width: 52px; height: 52px; font-size: 1.2rem; }
}

[data-theme="dark"] .alur-item { background: rgba(251,247,236,.03); border-color: rgba(251,247,236,.1); }
[data-theme="dark"] .alur-item:hover { box-shadow: 0 14px 34px rgba(0,0,0,.04); }

/* ---------- Jadwal bimbingan hari ini ---------- */
.schedule-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sky-100);
  color: var(--ink-900);
  font-weight: 600;
  font-size: .85rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}
.schedule-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 12px;
}
.schedule-table thead th {
  text-align: left;
  font-family: var(--font-display);
  color: var(--ink-900);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 20px 4px;
}
.schedule-table tbody tr { background: var(--paper-50); }
.schedule-table tbody td {
  padding: 16px 20px;
  color: var(--graphite-600);
  font-weight: 600;
  font-size: .92rem;
}
.schedule-table tbody tr td:first-child { border-top-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card); }
.schedule-table tbody tr td:last-child { border-top-right-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
.schedule-empty { text-align: center; padding: 32px 16px; color: var(--graphite-400); font-weight: 600; }
.schedule-foot { text-align: center; margin-top: 28px; }

@media (max-width: 620px) {
  .schedule-table { border-spacing: 0; }
  .schedule-table thead { display: none; }
  .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td { display: block; width: 100%; }
  .schedule-table tbody tr { padding: 6px 16px; border-radius: var(--radius-card); margin-bottom: 12px; }
  .schedule-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: .86rem; border-bottom: 1px solid rgba(22,35,63,.08); }
  .schedule-table tbody td:last-child { border-bottom: none; }
  .schedule-table tbody td::before { content: attr(data-label); font-family: var(--font-display); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--graphite-400); }
  .schedule-table tbody tr td:first-child, .schedule-table tbody tr td:last-child { border-radius: 0; }
}

[data-theme="dark"] .schedule-date { background: rgba(132,187,220,.15); color: var(--paper-50); }
[data-theme="dark"] .schedule-table thead th { color: var(--paper-50); }
[data-theme="dark"] .schedule-table tbody tr { background: rgba(251,247,236,.03); }
[data-theme="dark"] .schedule-table tbody td { color: rgba(251,247,236,.75); }
[data-theme="dark"] .schedule-empty { color: rgba(251,247,236,.55); }

/* ---------- Cards grid (Mata Pelajaran / keunggulan) ---------- */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } }
@media (min-width: 1700px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  background: rgba(251,247,236,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  padding: 40px 34px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(22,35,63,.08), inset 0 1px 0 rgba(255,255,255,.04);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover {
  box-shadow: 0 14px 44px rgba(22,35,63,.14), inset 0 1px 0 rgba(255,255,255,.05);
  border-color: rgba(240,112,26,.4);
  background: rgba(251,247,236,.72);
}
.card__icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: var(--pencil-yellow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-900);
  margin-bottom: 20px;
  box-shadow: 0 6px 16px rgba(240,112,26,.08);
}
.card h3 { font-size: 1.35rem; }
.card p:last-child { margin-bottom: 0; color: var(--graphite-600); font-size: 1.02rem; }

.section--alt .card { background: rgba(255,255,255,.4); }
.section--alt .card:hover { background: rgba(255,255,255,.58); }

/* ---------- Kenapa Kami: switcher nomor + teks bertumpuk + panel ikon ---------- */
.kenapa-switch__glass {
  position: relative;
  background: rgba(251,247,236,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow: 0 8px 32px rgba(22,35,63,.08), inset 0 1px 0 rgba(255,255,255,.04);
}

.kenapa-switch__row {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}

.kenapa-switch__title { margin-bottom: .3em; }
.kenapa-switch__lede { color: var(--graphite-400); max-width: 46ch; margin-bottom: 28px; }

/* --- Navigasi nomor + garis progres + panah --- */
.kenapa-switch__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.kenapa-switch__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--graphite-400);
  cursor: pointer;
  transition: color .3s ease, font-size .3s ease;
  line-height: 1;
}
.kenapa-switch__num.is-active {
  color: var(--pencil-yellow-dark);
  font-size: 1.4rem;
}
.kenapa-switch__line {
  --progress: 25%;
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(22,35,63,.15);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}
.kenapa-switch__line::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--progress);
  background: var(--pencil-yellow);
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.kenapa-switch__arrows { display: flex; gap: 8px; flex: none; }
.kenapa-switch__arrows button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(22,35,63,.2);
  background: transparent;
  color: var(--ink-900);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.kenapa-switch__arrows button:hover {
  background: var(--pencil-yellow);
  border-color: var(--pencil-yellow);
  color: #fff;
}

/* --- Teks bertumpuk (prev/aktif/next) --- */
.kenapa-switch__text {
  position: relative;
  height: 130px;
}
.kenapa-switch__item {
  position: absolute;
  inset: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1);
  cursor: default;
}
.kenapa-switch__item h3 { font-size: 1.3rem; margin-bottom: 8px; transition: color .3s ease; }
.kenapa-switch__item p { color: var(--graphite-600); margin: 0; max-width: 46ch; }

.kenapa-switch__item[data-offset="0"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  z-index: 3;
}
.kenapa-switch__item[data-offset="-1"] {
  transform: translateY(-56px) scale(.94);
  opacity: .35;
  z-index: 2;
  cursor: pointer;
}
.kenapa-switch__item[data-offset="1"] {
  transform: translateY(56px) scale(.94);
  opacity: .35;
  z-index: 2;
  cursor: pointer;
}
.kenapa-switch__item[data-offset="-1"] p,
.kenapa-switch__item[data-offset="1"] p { display: none; }
.kenapa-switch__item[data-offset="hidden-up"] { transform: translateY(-100px); opacity: 0; z-index: 1; pointer-events: none; }
.kenapa-switch__item[data-offset="hidden-down"] { transform: translateY(100px); opacity: 0; z-index: 1; pointer-events: none; }

/* --- Panel visual kanan (ikon bergonta-ganti) --- */
.kenapa-switch__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 55%, var(--sky-500) 100%);
}
.kenapa-switch__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.kenapa-switch__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kenapa-switch__icon {
  width: 96px; height: 96px;
  color: var(--paper-50);
  opacity: .92;
  transform: scale(.8);
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.kenapa-switch__slide:not(.is-active) .kenapa-switch__icon { transform: scale(.6); opacity: 0; }
.kenapa-switch__slide.is-active .kenapa-switch__icon { transform: scale(1); opacity: .95; }
.kenapa-switch__icon svg { width: 100%; height: 100%; }

@media (max-width: 860px) {
  .kenapa-switch__glass { padding: 30px 22px; }
  .kenapa-switch__row { grid-template-columns: 1fr; gap: 26px; }
  .kenapa-switch__visual { order: -1; max-height: 200px; aspect-ratio: 16 / 9; }
  .kenapa-switch__text { height: 150px; }
}

[data-theme="dark"] .kenapa-switch__glass { background: rgba(24,93,130,.08); border-color: rgba(251,247,236,.14); box-shadow: 0 8px 32px rgba(0,0,0,.035), inset 0 1px 0 rgba(251,247,236,.06); }
[data-theme="dark"] .kenapa-switch__lede { color: rgba(251,247,236,.55); }
[data-theme="dark"] .kenapa-switch__item p { color: rgba(251,247,236,.7); }
[data-theme="dark"] .kenapa-switch__line { background: rgba(251,247,236,.15); }
[data-theme="dark"] .kenapa-switch__arrows button { border-color: rgba(251,247,236,.25); color: var(--paper-50); }

/* ---------- Empty state ---------- */
.empty-state {
  border: 1px dashed rgba(22,35,63,.25);
  border-radius: var(--radius-card);
  padding: 48px 24px;
  text-align: center;
  color: var(--graphite-400);
}
.empty-state strong { display: block; color: var(--ink-900); font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px; }

/* ---------- Event list ---------- */
.event-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  align-items: center;
  background: var(--paper-50);
  border: 1px solid rgba(22,35,63,.1);
  border-radius: var(--radius-card);
  padding: 20px 24px;
}
.event-card + .event-card { margin-top: 16px; }
.event-card__date {
  background: var(--sky-500);
  color: var(--ink-900);
  border-radius: 10px;
  text-align: center;
  padding: 10px 4px;
}
.event-card__date strong { display: block; font-family: var(--font-display); font-size: 1.5rem; }
.event-card__date span { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.event-card__body h3 { margin-bottom: 4px; }
.event-card__meta { font-size: .85rem; color: var(--graphite-400); margin-bottom: 6px; }
.event-card__past { opacity: .55; }
.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(60,133,87,.12);
  color: var(--chalk-green);
}
.badge--muted { background: rgba(71,80,107,.1); color: var(--graphite-400); }

@media (max-width: 620px) {
  .event-card { grid-template-columns: 64px 1fr; }
  .event-card > a.btn { grid-column: 1 / -1; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--pencil-yellow);
  color: var(--ink-900);
  border-radius: var(--radius-card);
  padding: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--ink-900); margin-bottom: 6px; }
.cta-band p { color: rgba(24,93,130,.75); margin: 0; }
.cta-band .btn--primary { background: var(--ink-900); color: var(--paper-50); }
.cta-band .btn--primary:hover { background: #123F58; }

/* ---------- Page header (Mata Pelajaran / Event) ---------- */
.page-hero {
  background: var(--pencil-yellow);
  color: var(--ink-900);
  padding: 56px 0 60px;
}
.page-hero h1 { color: var(--ink-900); }
.page-hero p { color: rgba(24,93,130,.75); max-width: 52ch; margin: 0; }
.page-hero .hero__eyebrow { color: var(--ink-900); }

/* Footer lengkap ada di footer.css (footer-pro dkk) */

@media (max-width: 720px) {
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mode gelap untuk konten halaman ---------- */
[data-theme="dark"] body { background-color: #10182C; background-image: none; color: rgba(251,247,236,.82); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--paper-50); }
[data-theme="dark"] .section { background: #10182C; }
[data-theme="dark"] .section--alt { background: #123F58; }
[data-theme="dark"] .card { background: rgba(24,93,130,.28); border-color: rgba(251,247,236,.14); box-shadow: 0 8px 32px rgba(0,0,0,.035), inset 0 1px 0 rgba(251,247,236,.06); }
[data-theme="dark"] .card:hover { background: rgba(24,93,130,.4); border-color: rgba(240,112,26,.5); }
[data-theme="dark"] .card p:last-child { color: rgba(251,247,236,.7); }
[data-theme="dark"] .section--alt .card { background: rgba(251,247,236,.05); }
[data-theme="dark"] .section--alt .card:hover { background: rgba(251,247,236,.08); }
[data-theme="dark"] .section__head p { color: rgba(251,247,236,.55); }
[data-theme="dark"] .event-card { background: rgba(251,247,236,.03); border-color: rgba(251,247,236,.1); }
[data-theme="dark"] .empty-state { border-color: rgba(251,247,236,.2); color: rgba(251,247,236,.6); }
[data-theme="dark"] .step { background: rgba(251,247,236,.03); border-color: rgba(251,247,236,.1); }
[data-theme="dark"] .section--alt .step { background: rgba(251,247,236,.04); }
[data-theme="dark"] .video-frame { border-color: rgba(251,247,236,.1); box-shadow: 8px 10px 0 rgba(0,0,0,.035); }
[data-theme="dark"] .btn--ghost { color: var(--paper-50); border-color: rgba(251,247,236,.4); }
[data-theme="dark"] .btn--ghost:hover { background: var(--paper-50); color: var(--ink-900); }
.eyebrow-icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.card__icon svg { width: 28px; height: 28px; }

/* ---------- Cari Guru: layout pencarian ---------- */
.guru-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: flex-start;
}
.guru-list__result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 20px;
}
.guru-list__clear { font-size: .85rem; font-weight: 600; color: var(--graphite-400); border-bottom: 1px solid var(--graphite-400); }
.guru-list__clear:hover { color: var(--margin-red); border-color: var(--margin-red); }

.guru-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: start;
  background: rgba(251,247,236,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 32px rgba(22,35,63,.08), inset 0 1px 0 rgba(255,255,255,.04);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.guru-card + .guru-card { margin-top: 18px; }
.guru-card:hover { box-shadow: 0 14px 44px rgba(22,35,63,.14); border-color: rgba(240,112,26,.4); background: rgba(251,247,236,.072); }
.guru-card__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  flex: none;
}
.guru-card__body h3 { margin-bottom: 6px; font-size: 1.15rem; }
.guru-card__meta { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--graphite-400); margin-bottom: 10px; }
.guru-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.guru-card__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.guru-card__tarif { font-size: .82rem; font-weight: 700; color: var(--ink-900); white-space: nowrap; }

@media (max-width: 780px) {
  .guru-layout { grid-template-columns: 1fr; }
  .guru-card { grid-template-columns: 44px 1fr; }
  .guru-card__avatar { width: 44px; height: 44px; font-size: .9rem; }
  .guru-card__cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
}

/* ---------- Tentang Kami: konten fun & ceria ---------- */
.about-story { position: relative; }
.about-story__lead { font-size: 1.05rem; }
.about-story__tagline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(240,112,26,.1);
  border: 1px dashed var(--pencil-yellow-dark);
  color: var(--ink-900);
  font-family: var(--font-note);
  font-size: 1.15rem;
  padding: 12px 20px;
  border-radius: 10px;
  margin: 6px 0 18px;
  animation: aboutWobble 4s ease-in-out infinite;
}
.about-story__tagline .emoji { display: inline-block; animation: aboutBounce 1.6s ease-in-out infinite; }

.happy-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 24px 0 8px;
}
.happy-grid__item {
  text-align: center;
  background: var(--paper-50);
  border: 1px solid rgba(22,35,63,.1);
  border-radius: 10px;
  padding: 14px 8px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.happy-grid__item:hover {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: 0 10px 20px rgba(22,35,63,.12);
  border-color: rgba(240,112,26,.4);
}
.happy-grid__item strong {
  display: block;
  font-family: var(--font-display);
  color: var(--pencil-yellow-dark);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 6px;
}
.happy-grid__item span { font-size: .74rem; font-weight: 600; color: var(--graphite-600); }

@media (max-width: 780px) {
  .happy-grid { grid-template-columns: repeat(3, 1fr); }
}

@keyframes aboutBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes aboutWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-.6deg); }
  75% { transform: rotate(.6deg); }
}
@keyframes aboutFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}

/* --- Kartu program (Kelas Privat, Komunitas, LDL, dst) --- */
.program-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.program-card {
  position: relative;
  background: rgba(251,247,236,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  padding: 30px 28px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(22,35,63,.14);
  border-color: rgba(240,112,26,.4);
}
.program-card__icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--pencil-yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(240,112,26,.28);
  transition: transform .3s ease;
}
.program-card:hover .program-card__icon { animation: aboutWiggle .6s ease; }
.program-card__badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--chalk-green);
  background: rgba(60,133,87,.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.program-card__deco {
  position: absolute;
  top: -18px;
  right: -18px;
  font-size: 2.4rem;
  opacity: .18;
  animation: aboutFloat 5s ease-in-out infinite;
}
.program-card p:last-child { margin-bottom: 0; }

@keyframes aboutWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@media (max-width: 780px) {
  .program-grid { grid-template-columns: 1fr; }
}

[data-theme="dark"] .about-story__tagline { background: rgba(240,112,26,.14); }
[data-theme="dark"] .happy-grid__item { background: rgba(251,247,236,.04); border-color: rgba(251,247,236,.1); }
[data-theme="dark"] .happy-grid__item span { color: rgba(251,247,236,.65); }
[data-theme="dark"] .program-card { background: rgba(24,93,130,.28); border-color: rgba(251,247,236,.14); }
[data-theme="dark"] .program-card:hover { background: rgba(24,93,130,.4); border-color: rgba(240,112,26,.5); }

@media (prefers-reduced-motion: reduce) {
  .about-story__tagline, .about-story__tagline .emoji, .program-card__deco { animation: none; }
}

/* ---------- Panel pencarian (sidebar) ---------- */
.search-panel {
  position: sticky;
  top: 92px;
  background: rgba(251,247,236,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(22,35,63,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
.search-panel h2 { font-size: 1.3rem; margin-bottom: 18px; }
.search-field { margin-bottom: 16px; }
.search-field label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--graphite-400);
  margin-bottom: 6px;
}
.search-field input,
.search-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(22,35,63,.15);
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink-900);
}
.search-field input:focus,
.search-field select:focus { outline: none; border-color: var(--pencil-yellow-dark); }
.search-field--actions { display: flex; gap: 10px; margin-bottom: 0; }
.search-field--actions .btn { flex: 1; justify-content: center; }

@media (max-width: 780px) {
  .search-panel { position: static; }
}

/* ---------- Rekrutmen: kartu lowongan ---------- */
.job-card {
  background: rgba(251,247,236,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(22,35,63,.08), inset 0 1px 0 rgba(255,255,255,.04);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.job-card + .job-card { margin-top: 20px; }
.job-card:hover { box-shadow: 0 14px 44px rgba(22,35,63,.14); border-color: rgba(240,112,26,.04); background: rgba(251,247,236,.072); }
.job-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.job-card__head h3 { margin: 8px 0 8px; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--graphite-400); }
.job-card__meta span { display: flex; align-items: center; gap: 6px; }
.job-card__desc { margin-bottom: 14px; }
.job-card__syarat strong { display: block; margin-bottom: 8px; color: var(--ink-900); }
.job-card__syarat ul { margin: 0; padding-left: 20px; color: var(--graphite-600); }
.job-card__syarat li { margin-bottom: 4px; }

[data-theme="dark"] .guru-card,
[data-theme="dark"] .search-panel,
[data-theme="dark"] .job-card { background: rgba(24,93,130,.08); border-color: rgba(251,247,236,.14); box-shadow: 0 8px 32px rgba(0,0,0,.035), inset 0 1px 0 rgba(251,247,236,.06); }
[data-theme="dark"] .guru-card:hover,
[data-theme="dark"] .job-card:hover { background: rgba(24,93,130,.4); border-color: rgba(240,112,26,.5); }
[data-theme="dark"] .search-field label { color: rgba(251,247,236,.55); }
[data-theme="dark"] .search-field input,
[data-theme="dark"] .search-field select { background: rgba(16,24,44,.4); border-color: rgba(251,247,236,.16); color: var(--paper-50); }
[data-theme="dark"] .guru-list__result { color: var(--paper-50); }
[data-theme="dark"] .job-card__syarat ul { color: rgba(251,247,236,.7); }