/* Token desain semantik: satu sumber untuk landing dan aplikasi (PRD 4.1.1, A-10).
   Komponen hanya memakai var(--...), tidak ada nilai warna di-hardcode. */
:root {
  --navy: #22245f;
  --navy-dalam: #0b0f2e;
  --navy-tengah: #1a1e50;
  --navy-terang: #3a3d8f;
  --biru-lembut: #b9c8f2;
  --teal: hsl(180 55% 42%);
  --teal-cahaya: hsl(175 70% 50%);
  --teal-latar: hsl(180 45% 94%);
  --teal-teks: hsl(180 60% 28%);
  --gold: hsl(38 85% 58%);
  --gold-lembut: hsl(42 75% 70%);
  --gold-latar: hsl(42 90% 94%);
  --gold-teks: hsl(32 70% 32%);
  --bg: #ffffff;
  --surface: hsl(220 30% 96%);
  --surface-2: hsl(220 28% 93%);
  --border: hsl(220 25% 90%);
  --border-kuat: hsl(220 20% 82%);
  --text: hsl(230 45% 12%);
  --text-muted: hsl(230 15% 42%);
  --abu-latar: hsl(220 15% 94%);
  --abu-teks: hsl(225 12% 38%);
  --bahaya: hsl(4 60% 46%);
  --bahaya-latar: hsl(4 80% 96%);
  --putih-75: rgb(255 255 255 / 0.78);
  --putih-15: rgb(255 255 255 / 0.15);
  --putih-08: rgb(255 255 255 / 0.08);

  --grad-hero: radial-gradient(120% 90% at 20% 10%, #33368a 0%, var(--navy) 38%, var(--navy-dalam) 100%);
  --grad-navy: linear-gradient(135deg, var(--navy) 0%, #2e3a8c 100%);
  --grad-teal: linear-gradient(135deg, var(--teal) 0%, var(--teal-cahaya) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-lembut) 100%);

  --bayang: 0 8px 30px -12px rgb(34 36 95 / 0.15);
  --bayang-naik: 0 18px 40px -16px rgb(34 36 95 / 0.22);
  --bayang-tombol: 0 10px 24px -10px rgb(34 36 95 / 0.45);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --font-judul: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-isi: 'Inter', system-ui, sans-serif;
  --font-arab: 'Thmanyah Sans', 'Alexandria', 'Cairo', 'Noto Naskh Arabic', serif;
  --font-mushaf: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

[lang='ar'], .arab { font-family: var(--font-arab); letter-spacing: 0; direction: rtl; }

/* Landing page El-Kisai Education. Mobile-first; memakai token dari tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.7 var(--font-isi); overflow-x: hidden; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-judul); color: var(--text); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1.08; font-weight: 800; }
h2 { font-size: clamp(1.875rem, 1.6rem + 1vw, 2.25rem); line-height: 1.15; font-weight: 800; }
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--teal-cahaya); outline-offset: 3px; border-radius: 6px; }
.lewati { position: absolute; left: -999px; top: 8px; background: var(--navy); color: var(--bg); padding: 10px 16px; border-radius: var(--r-sm); z-index: 100; }
.lewati:focus { left: 16px; }

.wadah { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.wadah-sempit { max-width: 820px; }
.seksi { padding: 80px 0; }
.seksi-rapat { padding: 56px 0; }
.seksi-surface { background: var(--surface); }
@media (min-width: 1024px) { .seksi { padding: 112px 0; } .seksi-rapat { padding: 72px 0; } }

.ikon { width: 20px; height: 20px; flex: none; }
.ikon-kecil { width: 16px; height: 16px; }
.ikon-teal { color: var(--bg); background: var(--grad-teal); border-radius: 999px; padding: 4px; width: 28px; height: 28px; }
.ikon-kotak { width: 48px; height: 48px; padding: 12px; border-radius: var(--r-md); background: var(--teal-latar); color: var(--teal-teks); }

/* Chip eyebrow */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font: 600 13px/1.4 var(--font-isi); letter-spacing: .02em; color: var(--navy);
  background: var(--surface); border: 1px solid var(--border); margin-bottom: 18px;
}
.seksi-surface .chip { background: var(--bg); }
.chip-kaca { color: var(--bg); background: var(--putih-08); border-color: var(--putih-15); backdrop-filter: blur(8px); }
.titik { width: 6px; height: 6px; border-radius: 99px; background: var(--gold); display: inline-block; }

.emas { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.emas-teks { color: var(--teal-teks); }

/* Tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-md); font: 600 14px/1.2 var(--font-isi); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.tombol:hover { transform: translateY(-1px); }
.tombol-kecil { min-height: 44px; padding: 10px 16px; }
.tombol-navy { background: var(--grad-navy); color: var(--bg); box-shadow: var(--bayang-tombol); }
.tombol-emas { background: var(--grad-gold); color: var(--navy-dalam); box-shadow: 0 10px 28px -12px hsl(38 85% 58% / .6); }
.tombol-kaca { background: var(--putih-08); color: var(--bg); border-color: var(--putih-15); backdrop-filter: blur(8px); }
.tombol-kaca:hover { background: var(--putih-15); }
.seksi .banner-trial .tombol-kaca { color: var(--bg); }

/* Navbar melayang */
.navbar {
  position: fixed; top: 12px; left: 12px; right: 12px; z-index: 50; max-width: 1232px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 14px;
  background: rgb(255 255 255 / .82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .6); border-radius: var(--r-lg); box-shadow: var(--bayang);
  transition: box-shadow .3s var(--ease);
}
.navbar.tergulir { box-shadow: var(--bayang-naik); }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px/1.1 var(--font-judul); color: var(--navy); white-space: nowrap; }
.merek img { width: 40px; height: 40px; border-radius: 10px; }
.merek b { color: var(--navy-terang); font-weight: 800; }
.nav-tautan { display: none; gap: 4px; }
.nav-tautan a { text-decoration: none; padding: 10px 14px; border-radius: 10px; font-weight: 500; font-size: 15px; color: var(--text-muted); }
.nav-tautan a:hover { color: var(--navy); background: var(--surface); }
.nav-aksi { display: flex; align-items: center; gap: 6px; }
.tautan-masuk { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--navy); padding: 10px 12px; min-height: 44px; border-radius: 10px; }
.tautan-masuk:hover { background: var(--surface); }
.nav-aksi .tombol { display: none; }
.tombol-menu { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--navy); cursor: pointer; }
@media (min-width: 640px) { .nav-aksi .tombol { display: inline-flex; } }
@media (min-width: 1024px) { .nav-tautan { display: flex; } .tombol-menu { display: none; } }

.lembar { position: fixed; inset: 0; z-index: 60; background: rgb(11 15 46 / .4); backdrop-filter: blur(4px); }
.lembar-isi { position: absolute; top: 12px; left: 12px; right: 12px; background: var(--bg); border-radius: var(--r-lg); padding: 64px 16px 16px; display: grid; gap: 4px; box-shadow: var(--bayang-naik); }
.lembar-isi a:not(.tombol) { text-decoration: none; padding: 14px 12px; border-radius: 12px; font-weight: 600; color: var(--navy); }
.lembar-isi a:not(.tombol):hover { background: var(--surface); }
.lembar-isi .tombol { margin-top: 8px; }
.lembar-isi .tutup { position: absolute; top: 12px; right: 12px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--grad-hero); color: var(--bg); padding: 140px 0 88px; isolation: isolate; }
.hero h1 { color: var(--bg); max-width: 15ch; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-sub { color: var(--putih-75); font-size: 1.0625rem; max-width: 56ch; margin-top: 22px; }
.aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--putih-15); max-width: 640px; }
.statistik dt { font: 800 2rem/1 var(--font-judul); color: var(--gold); }
.statistik dd { margin: 8px 0 0; color: var(--putih-75); font-size: 14px; line-height: 1.5; }
@media (min-width: 1024px) {
  .hero { padding: 176px 0 120px; }
  .hero-grid { grid-template-columns: 1.35fr .65fr; }
}
.blob { position: absolute; border-radius: 999px; filter: blur(60px); z-index: -1; opacity: .35; animation: apung 7s var(--ease) infinite alternate; }
.blob-1 { width: 380px; height: 380px; background: var(--teal); top: -120px; right: -80px; }
.blob-2 { width: 300px; height: 300px; background: var(--teal-cahaya); bottom: -140px; left: 8%; opacity: .2; animation-duration: 8s; animation-delay: -3s; }
@keyframes apung { to { transform: translateY(14px) translateX(-10px); } }
.pola {
  position: absolute; inset: 0; z-index: -1; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M32 6l7.6 18.4L58 32l-18.4 7.6L32 58l-7.6-18.4L6 32l18.4-7.6z'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Umum */
.kepala { max-width: 680px; margin-bottom: 48px; }
.kepala .lead { margin-top: 14px; }
.kepala-baris { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.lead { color: var(--text-muted); font-size: 1.0625rem; margin-top: 20px; max-width: 60ch; }
.muted { color: var(--text-muted); }
.kecil { font-size: 14px; }
.tagline-kecil { margin-top: 20px; font: 600 14px/1.4 var(--font-judul); color: var(--navy-terang); letter-spacing: .02em; }
.dua-kolom { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .dua-kolom { grid-template-columns: 1.1fr .9fr; gap: 80px; } }
.daftar-centang { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.daftar-centang li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); font-weight: 500; }

.kartu { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--bayang); padding: 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.kartu:hover { transform: translateY(-4px); box-shadow: var(--bayang-naik); }
.kartu h3 { margin-top: 18px; }
.kartu p { color: var(--text-muted); margin-top: 8px; }
.kartu-tautan { display: block; text-decoration: none; }
.kartu-tautan h3 { margin-top: 12px; }

.grid-fitur { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid-fitur { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grid-fitur { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; } }
.fitur-besar { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--teal-latar) 160%); }
.grid-3 { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.pil-baris { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pil { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--navy); border: 1px solid var(--border); }
.pil-emas { background: var(--gold-latar); color: var(--gold-teks); border-color: transparent; }
.lbl-dummy { display: inline-flex; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--gold-latar); color: var(--gold-teks); font: 600 11px/1.6 var(--font-isi); vertical-align: middle; }

.pengajar { text-align: center; }
.pengajar .foto, .avatar-besar { width: 96px; height: 96px; border-radius: 999px; margin: 0 auto; object-fit: cover; }
.pengajar .pil-baris { justify-content: center; margin-top: 10px; }
.kutipan { font-style: italic; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--grad-teal); color: var(--bg); font: 700 15px/1 var(--font-judul); flex: none; }
.avatar-besar { display: grid; font-size: 28px; }

.program { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sampul { aspect-ratio: 16 / 9; background: var(--grad-navy); display: grid; place-items: center; }
.sampul img { width: 100%; height: 100%; object-fit: cover; }
.ikon-sampul { width: 56px; height: 56px; color: var(--gold); }
.program .isi { padding: 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.program h3 { margin-top: 10px; }
.harga-baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; }
.harga { font: 800 1.25rem/1.2 var(--font-judul); color: var(--navy); margin: 0 !important; }
.harga span { font: 500 13px var(--font-isi); color: var(--text-muted); }
.harga-tanya { font-size: 1rem; color: var(--text-muted); }
.harga-kecil { font-weight: 700; color: var(--navy) !important; }

.banner-trial {
  margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px; border-radius: var(--r-xl); background: var(--grad-hero); color: var(--bg); position: relative; overflow: hidden;
}
.banner-trial h3 { color: var(--bg); font-size: 1.5rem; }
.banner-trial p { color: var(--putih-75); margin-top: 8px; }
.banner-trial .aksi { margin-top: 0; }
.kuota { font-weight: 600; color: var(--gold-lembut) !important; }

.nav-slider { display: flex; gap: 8px; }
.bulat { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--bg); color: var(--navy); cursor: pointer; }
.bulat:hover { background: var(--navy); color: var(--bg); }
.slider { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 24px; scrollbar-width: thin; }
.poster { scroll-snap-align: start; padding: 14px; margin: 0; }
.poster-img { aspect-ratio: 4 / 5; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.poster-img img { width: 100%; height: 100%; object-fit: contain; }
.poster figcaption { padding: 14px 6px 4px; display: grid; gap: 4px; }
.poster figcaption span { color: var(--text-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; margin-top: 10px !important; }
.tiga-baris { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.testimoni { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ikon-kutip { width: 28px; height: 28px; color: var(--gold); }
.testimoni blockquote { margin: 0; color: var(--text); flex: 1; }
.testimoni figcaption { display: flex; gap: 12px; align-items: center; }
.testimoni figcaption strong { display: block; font-size: 15px; }
.testimoni figcaption small { color: var(--text-muted); }

.langkah { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; counter-reset: l; }
@media (min-width: 720px) { .langkah { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .langkah { grid-template-columns: repeat(4, 1fr); } }
.langkah li { position: relative; padding-top: 4px; }
.nomor { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: var(--grad-gold); color: var(--navy-dalam); font: 800 18px/1 var(--font-judul); box-shadow: 0 8px 20px -10px hsl(38 85% 58% / .7); }
.langkah h3 { margin-top: 18px; }
.langkah p { color: var(--text-muted); margin-top: 8px; }
@media (min-width: 1100px) {
  .langkah li:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: 64px; right: -12px; border-top: 1px dashed var(--border-kuat); }
}

.faq { display: grid; gap: 12px; }
.faq details { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font: 600 16px/1.5 var(--font-judul); position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 14px; font: 400 24px/1 var(--font-isi); color: var(--teal); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--text-muted); }

.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--grad-hero); padding: 56px 28px; text-align: center; }
.cta h2 { color: var(--bg); max-width: 22ch; margin: 0 auto; }
.cta .aksi { justify-content: center; }
.blob-cta { width: 420px; height: 420px; background: var(--teal); top: -200px; left: 50%; transform: translateX(-50%); opacity: .25; }
@media (min-width: 900px) { .cta { padding: 80px 48px; } }

.footer { background: var(--navy-dalam); color: var(--putih-75); font-size: 14px; }
.footer-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 28px; padding-bottom: 24px; }
.footer-merek { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bg); font: 700 15px/1.2 var(--font-judul); }
.footer-merek small { display: block; font: 400 12px/1.4 var(--font-isi); color: var(--putih-75); }
.footer-tautan, .footer-kontak { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.footer a:hover { color: var(--bg); }
.hak-cipta { border-top: 1px solid var(--putih-08); text-align: center; font-size: 11px; padding: 12px; color: rgb(255 255 255 / .55); }

/* Form testimoni */
.seksi-form { padding-top: 140px; min-height: 80vh; background: var(--surface); }
.form-kartu:hover { transform: none; }
.h-form { font-size: 1.75rem; margin-bottom: 8px; }
.form { display: grid; gap: 16px; margin-top: 20px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.form input, .form textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--border-kuat); border-radius: var(--r-sm); background: var(--bg); color: var(--text); min-height: 48px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--teal); border-color: transparent; }
.madu { position: absolute; left: -9999px; }
.galat { background: var(--bahaya-latar); color: var(--bahaya); padding: 12px 14px; border-radius: var(--r-sm); margin-top: 12px; }
.halaman-404 main { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 16px; padding: 24px; }

/* Gerak saat gulir */
.js [data-muncul] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-muncul].terlihat { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-muncul] { opacity: 1; transform: none; }
}

/* Kartu event/library dengan cover, status, dan CTA pendaftaran */
.kartu-daftar { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kartu-daftar .isi { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.kartu-daftar h3 { margin-top: 10px; }
.sampul { position: relative; }
.sampul-kecil { aspect-ratio: 16 / 9; }
.lencana-segera { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: var(--navy-dalam); font: 700 12px/1.5 var(--font-isi); }
.tombol-nonaktif { background: var(--surface); color: var(--text-muted); border-color: var(--border); cursor: default; }
.tombol-nonaktif:hover { transform: none; }
.pil-teal { background: var(--teal-latar); color: var(--teal-teks); border-color: transparent; }
.sampul-artikel { aspect-ratio: 16 / 9; margin: -28px -28px 16px; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; background: var(--surface); }
.sampul-artikel img { width: 100%; height: 100%; object-fit: cover; }
.daftar-kartu { display: grid; gap: 10px; }
.sampul-daftar { aspect-ratio: 16 / 9; margin: -28px -28px 8px; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; background: var(--surface); }
.sampul-daftar img { width: 100%; height: 100%; object-fit: cover; }
.garis { border: 0; border-top: 1px solid var(--border); margin: 8px 0; width: 100%; }
.h-form-kecil { font-size: 1.15rem; }
.kembali-landing { display: inline-block; margin-bottom: 12px; text-decoration: none; color: var(--text-muted); font-size: 14px; padding: 8px 0; }
.kuota-info { padding: 14px; border-radius: var(--r-md); background: var(--gold-latar); color: var(--gold-teks); font-weight: 600; }
.meta { margin-top: 4px !important; }

/* Tampilan mobile lebih padat (setara zoom 75%) */
@media (max-width: 640px) {
  body { zoom: 0.75; }
  .tombol { min-height: 56px; font-size: 16px; }
  .tombol-kecil { min-height: 52px; }
  .tombol-menu, .bulat { width: 52px; height: 52px; }
  .tautan-masuk, .footer a, .faq summary { min-height: 52px; }
  .form input, .form textarea { min-height: 56px; font-size: 18px; }
}

/* Form pendaftaran */
.form-dua { display: grid; gap: 16px; }
@media (min-width: 560px) { .form-dua { grid-template-columns: 1fr 1fr; } }
.form-grup { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px 16px; margin: 0; display: grid; gap: 12px; }
.form-grup legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.form-grup legend small { font-weight: 400; color: var(--text-muted); }
.langkah-form { display: flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--font-judul); margin-top: 8px !important; }
.nomor-kecil { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--grad-gold); color: var(--navy-dalam); font-size: 13px; }
.daftar-program { display: grid; gap: 10px; }
@media (min-width: 560px) { .daftar-program { grid-template-columns: 1fr 1fr; } }
.pilih-program { display: grid; gap: 2px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); text-decoration: none; transition: border-color .2s var(--ease); }
.pilih-program:hover { border-color: var(--teal); }
.pilih-program.aktif { border-color: var(--navy); background: var(--surface); box-shadow: inset 0 0 0 1px var(--navy); }
.pp-nama { font: 700 15px/1.3 var(--font-judul); color: var(--navy); }
.pp-meta { font-size: 13px; color: var(--text-muted); }
.pp-harga { font-size: 13px; font-weight: 600; color: var(--teal-teks); }

/* Pembayaran manual setelah pendaftaran */
.bayar { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); }
.bayar-nominal { color: var(--navy); }
.rek { display: grid; gap: 2px; justify-items: start; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.rek-bank { font-size: 13px; color: var(--text-muted); }
.rek-nomor { font: 800 1.4rem/1.3 var(--font-judul); letter-spacing: .04em; color: var(--navy); }
.rek-an { font-size: 14px; margin-bottom: 8px; }
.tombol-garis { background: var(--bg); color: var(--navy); border-color: var(--border-kuat); }
.qris-box { margin: 0; display: grid; gap: 6px; justify-items: center; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.qris-box img { max-width: 240px; width: 100%; }
.qris-box figcaption { font-size: 13px; color: var(--text-muted); }
.tombol-wa { background: hsl(142 70% 36%); color: var(--bg); box-shadow: 0 10px 24px -12px hsl(142 70% 30% / .6); }

.form-bukti { margin-top: 0; padding: 14px; background: var(--bg); border: 1px dashed var(--border-kuat); border-radius: var(--r-md); }
.form-bukti input[type=file] { padding: 10px; min-height: auto; }
.bukti-ok { padding: 12px 14px; border-radius: var(--r-md); background: var(--teal-latar); color: var(--teal-teks); font-weight: 600; }
.form-bukti input[type=file] { width: 100%; max-width: 100%; min-width: 0; font-size: 14px; }
.daftar-kartu, .bayar, .form-bukti, .form label { min-width: 0; }

/* Kode promo */
.promo-baris { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: end; }
.promo-baris .promo-info { grid-column: 1 / -1; margin: 0; font-size: 13px; min-height: 1em; }
.promo-baris input { text-transform: uppercase; }
.ok-teks { color: var(--teal-teks); font-weight: 600; }
.galat-teks { color: var(--bahaya); }

/* Hero: simulasi fitur (animasi, bukan tangkapan layar) */
.hero-sim { position: relative; width: 100%; max-width: 420px; margin: 0 auto; padding: 14px; border-radius: 28px; background: var(--putih-08); border: 1px solid var(--putih-15); backdrop-filter: blur(10px); }
.sim-tab { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgb(11 15 46 / .35); }
.sim-tab button { flex: 1; min-height: 36px; border: 0; border-radius: 10px; background: none; color: var(--putih-75); font: 600 12px/1.2 var(--font-isi); cursor: pointer; }
.sim-tab button[aria-selected="true"] { background: var(--bg); color: var(--navy); }
.sim-layar { position: relative; margin-top: 12px; height: 330px; border-radius: 20px; overflow: hidden; background: var(--bg); color: var(--text); }
.sim-adegan { position: absolute; inset: 0; padding: 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.sim-adegan.aktif { opacity: 1; transform: none; pointer-events: auto; }
.sim-cap { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; }
.sim-label { margin: 8px 0 0; text-align: center; font-size: 11px; color: rgb(255 255 255 / .55); }
/* Adegan 1: mushaf */
.sim-mushaf { direction: rtl; padding: 12px; border-radius: 12px; background: hsl(44 70% 92%); border: 2px double hsl(40 50% 54%); display: grid; gap: 10px; }
.sim-kepala-surat { height: 16px; border-radius: 6px; background: linear-gradient(90deg, hsl(42 80% 66% / .25), hsl(42 80% 66% / .6), hsl(42 80% 66% / .25)); border: 1px solid hsl(40 50% 54%); }
.sim-baris { display: flex; justify-content: space-between; gap: 6px; }
.sim-kata { display: block; height: 10px; width: var(--w); border-radius: 6px; background: hsl(230 30% 30% / .55); }
.sim-tanda { animation: simTanda 5s var(--ease) infinite; }
.sim-tanda.j-tajwid { --j: hsl(40 77% 48%); }
.sim-tanda.j-lupa { --j: hsl(258 90% 66%); animation-delay: .6s; }
@keyframes simTanda { 0%, 18% { background: hsl(230 30% 30% / .55); box-shadow: none } 28%, 100% { background: var(--j); box-shadow: 0 0 0 4px color-mix(in srgb, var(--j) 25%, transparent) } }
.sim-pil { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--bg); box-shadow: var(--bayang-naik); font: 600 12px/1 var(--font-isi); opacity: 0; }
.sim-pil b { width: 8px; height: 8px; border-radius: 99px; }
.titik-tajwid { background: hsl(40 77% 48%); } .titik-lupa { background: hsl(258 90% 66%); }
.sim-adegan.aktif .sim-pil-1 { animation: simMuncul .5s 1.4s var(--ease) forwards; top: 70px; left: 22px; }
.sim-adegan.aktif .sim-pil-2 { animation: simMuncul .5s 2.1s var(--ease) forwards; top: 138px; right: 22px; }
.sim-ringkas { margin-top: 18px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; padding: 10px; border-radius: 12px; background: var(--surface); }
.sim-ringkas b { color: var(--navy); } .sim-ringkas em { font-style: normal; color: var(--teal-teks); font-weight: 600; }
@keyframes simMuncul { from { opacity: 0; transform: translateY(6px) scale(.96) } to { opacity: 1; transform: none } }
/* Adegan 2: mutaba'ah */
.sim-ring { position: relative; width: 120px; height: 120px; margin: 0 auto; display: grid; place-content: center; text-align: center; }
.sim-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sim-ring circle { fill: none; stroke-width: 10; }
.sim-ring-latar { stroke: var(--surface-2); }
.sim-ring-isi { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; }
.sim-adegan.aktif .sim-ring-isi { animation: simRing 1.6s .2s var(--ease) forwards; }
@keyframes simRing { to { stroke-dashoffset: 0 } }
.sim-ring b { font: 800 1.5rem/1 var(--font-judul); color: var(--navy); }
.sim-ring small { font-size: 10px; color: var(--text-muted); }
.sim-item { display: grid; gap: 8px; margin-top: 14px; }
.sim-item div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 12px; }
.sim-item i { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); position: relative; overflow: hidden; }
.sim-item i::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--grad-teal); border-radius: 99px; }
.sim-adegan.aktif .sim-item i::after { animation: simBar 1.2s .5s var(--ease) forwards; }
.sim-adegan.aktif .sim-item div:nth-child(2) i::after { animation-delay: .8s; } .sim-adegan.aktif .sim-item div:nth-child(3) i::after { animation-delay: 1.1s; }
@keyframes simBar { to { width: var(--p) } }
.sim-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.sim-kal i { aspect-ratio: 1; border-radius: 99px; border: 2px solid var(--border); }
.sim-adegan.aktif .sim-kal i.isi { animation: simKal .3s var(--d) var(--ease) forwards; }
@keyframes simKal { to { border-color: var(--gold); background: var(--gold-latar) } }
/* Adegan 3: laporan WhatsApp */
.sim-chat { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: hsl(40 30% 93%); height: 260px; align-content: start; }
.sim-bubble { max-width: 88%; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; display: grid; gap: 2px; opacity: 0; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.sim-bubble.masuk { background: var(--bg); justify-self: start; border-top-left-radius: 4px; }
.sim-bubble.masuk b:first-child { color: var(--teal-teks); font-size: 11px; }
.sim-bubble.keluar { background: hsl(120 60% 88%); justify-self: end; border-top-right-radius: 4px; }
.sim-adegan.aktif .sim-bubble.masuk { animation: simMuncul .5s .3s var(--ease) forwards; }
.sim-adegan.aktif .sim-bubble.keluar { animation: simMuncul .5s 1.6s var(--ease) forwards; }
.hero-grid .hero-sim { margin-top: 8px; }
@media (min-width: 1024px) { .hero-grid .hero-sim { margin: 0 0 0 auto; } }
@media (prefers-reduced-motion: reduce) {
  .sim-pil, .sim-bubble { opacity: 1 !important; }
  .sim-ring-isi { stroke-dashoffset: 0 !important; }
  .sim-item i::after { width: var(--p) !important; }
  .sim-kal i.isi { border-color: var(--gold); background: var(--gold-latar); }
  .sim-tanda { background: var(--j); }
  .sim-adegan.aktif .sim-pil-1 { top: 70px; left: 22px; } .sim-adegan.aktif .sim-pil-2 { top: 138px; right: 22px; }
}

/* Video KBM */
.grid-video { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid-video { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-video { grid-template-columns: repeat(3, 1fr); } }
.kartu-video { margin: 0; padding: 12px; display: grid; gap: 12px; align-content: start; }
.video-poster, .video-main { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 0; display: block; background: var(--grad-navy); }
.kartu-video.potret .video-poster, .kartu-video.potret .video-main { aspect-ratio: 9 / 16; max-height: 560px; }
.video-poster { position: relative; padding: 0; overflow: hidden; cursor: pointer; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-putar { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 99px; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: var(--navy); box-shadow: var(--bayang-naik); transition: transform .2s var(--ease); }
.video-putar svg { width: 28px; height: 28px; margin-left: 3px; }
.video-poster:hover .video-putar { transform: scale(1.06); }
.kartu-video figcaption { display: grid; gap: 4px; padding: 0 4px 4px; }
.kartu-video figcaption span { color: var(--text-muted); font-size: 14px; }