/* ==========================================================================
   Hanfa AI, halaman depan (landing.html)
   Design read: halaman pengantar untuk guru SD sampai SMA yang non-teknis dan banyak memakai HP,
   mengutamakan kepercayaan (trust-first), bahasa tenang. Dial: VARIANCE 5, MOTION 2, DENSITY 4.
   Sama dengan aplikasi (kepala app.css): satu aksen biru, hijau/kuning/merah tidak dipakai di sini, font Geist,
   radius 10px untuk kontrol dan 16px untuk wadah, tanpa tanda pisah panjang, tanpa label kecil huruf kapital di atas judul.
   Token di bawah disalin dari app.css agar halaman ini tidak memuat seluruh gaya ruang kerja; ubah di dua tempat.
   Tanpa JavaScript. Gerak hanya transform/opacity dan mati di prefers-reduced-motion.
   Layar sentuh: tombol dan tautan minimal 44px tingginya, teks isi 17px.
   ========================================================================== */

:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --ink: #12151C;
  --ink-2: #3B4150;
  --muted: #5B6272;              /* 6,2:1 di atas putih dan 5,3:1 di atas --bg */
  --line: #E3E6EB;
  --line-2: #CFD4DC;
  --accent: #2C6BD2;
  --accent-hover: #2259B3;
  --accent-ink: #1B4E9E;
  --accent-soft: #E9F0FC;

  --font: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r-box: 16px;
  --r-ctl: 10px;
  --shadow: 0 1px 2px rgba(18, 28, 45, .05), 0 10px 28px -16px rgba(26, 45, 82, .28);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --maxw: 1120px;
  --gutter: clamp(18px, 4.5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink-2); background: var(--surface); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ic { width: 20px; height: 20px; fill: currentColor; flex: none; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--sempit { max-width: calc(760px + 2 * var(--gutter)); }

.skip-link { position: absolute; left: 12px; top: 12px; z-index: 50; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; text-decoration: none; transform: translateY(-200%); transition: transform .15s var(--ease); }
.skip-link:focus { transform: none; }

/* ----------------------------------------------------------- tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl); border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .15s var(--ease), background-color .15s, border-color .15s; }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--line { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--ink-2); }
.btn--putih { background: #fff; color: var(--accent-ink); }
.btn--putih:hover { background: var(--accent-soft); }

/* ----------------------------------------------------------- bilah atas */
.bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar__in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand b { color: var(--accent); font-weight: 700; }
.bar__nav { display: flex; gap: 4px; margin-left: auto; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-ctl); color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.bar__nav a:hover { background: var(--bg); color: var(--ink); }
.bar .btn { flex: none; }

/* ----------------------------------------------------------- hero */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(33px, 4.7vw, 54px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.lead { margin-top: 18px; max-width: 46ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__shot { justify-self: end; width: 100%; max-width: 340px; }
.hero__crop { position: relative; max-height: 480px; overflow: hidden; border-radius: var(--r-box); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.hero__crop img { width: 100%; }
.hero__shot figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* ----------------------------------------------------------- bagian umum */
.sec { padding: clamp(48px, 7vw, 96px) 0; }
.sec--abu { background: var(--bg); }
.sec__head { max-width: 640px; margin-bottom: clamp(24px, 4vw, 44px); }
.sec h2, .tutup h2 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.sec__head p { margin-top: 12px; max-width: 56ch; color: var(--ink-2); }
h3 { font-size: 19px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }

/* ----------------------------------------------------------- hasil (bento) */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cell { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--shadow); }
.cell__text { padding: 26px 26px 20px; }
.cell__text .ic { width: 26px; height: 26px; margin-bottom: 14px; color: var(--accent); }
.cell__text p { margin-top: 8px; max-width: 52ch; }
.cell__img { margin-top: auto; border-top: 1px solid var(--line); background: var(--bg); }
.cell__img--atas { max-height: 400px; overflow: hidden; }
.cell--soal { grid-column: span 7; }
.cell--slide { grid-column: span 5; }
.cell--modul { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cell--modul .cell__text { align-self: center; padding: clamp(26px, 4vw, 44px); }
.cell--modul .cell__img { border-top: 0; border-left: 1px solid var(--line); max-height: 360px; }
.slides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; margin-top: auto; }
.slides img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.slides__a { grid-column: 1 / -1; }

/* ----------------------------------------------------------- cara kerja */
.cara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.cara__head { margin-bottom: 0; }
.cara__list { display: grid; gap: clamp(26px, 4vw, 40px); }
.cara__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent-ink); }
.ico .ic { width: 26px; height: 26px; }
.cara__list p { margin-top: 6px; max-width: 54ch; }

/* ----------------------------------------------------------- fakta */
.fakta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fakta > div { padding: 4px clamp(16px, 2.4vw, 28px); border-left: 1px solid var(--line-2); }
.fakta > div:first-child { padding-left: 0; border-left: 0; }
.fakta p { margin-top: 8px; font-size: 16px; }

/* ----------------------------------------------------------- paket */
.paket { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: stretch; }
.paket__utama { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 4vw, 40px); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--r-box); box-shadow: var(--shadow); }
.paket__poin { margin-top: 10px; font-size: 20px; color: var(--ink); }
.paket__poin b { font-size: clamp(48px, 7vw, 68px); line-height: 1; letter-spacing: -.04em; color: var(--accent-ink); font-weight: 700; margin-right: 4px; }
.paket__utama > p:not(.paket__poin) { margin: 14px 0 26px; max-width: 42ch; }
.paket__utama .btn { margin-top: auto; }
.paket__lain { display: grid; gap: 20px; grid-template-rows: 1fr; }
.paket__lain article { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); }
.paket__lain p { margin-top: 6px; }
.paket__lain b { color: var(--ink); font-weight: 650; }
.harga { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.harga li { display: grid; gap: 2px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.harga .harga__best { border-color: var(--accent); }
.harga__term { font-size: 14px; color: var(--muted); }
.harga__term em { margin-left: 6px; font-style: normal; font-weight: 600; color: var(--accent-ink); }
.paket__lain .harga b { font-size: 24px; letter-spacing: -.02em; }
.harga small { font-size: 14px; color: var(--muted); }
.harga s { color: var(--muted); }
.paket__kontak { margin-top: 22px; font-size: 16px; }
/* tautan di dalam kalimat: area ketuk 44px tanpa mengubah jarak baris (bantalan dan margin negatif saling meniadakan) */
.paket__kontak a, .faq details p a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ----------------------------------------------------------- tanya jawab */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 4px; font-size: 18px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--muted); transition: transform .2s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq summary:hover { color: var(--accent-ink); }
.faq details p { padding: 0 4px 20px; max-width: 62ch; }

/* ----------------------------------------------------------- penutup */
.tutup { padding: clamp(40px, 6vw, 72px) 0; background: var(--accent); color: #fff; }
.tutup__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.tutup h2 { color: #fff; }
.tutup p { margin-top: 10px; max-width: 52ch; color: #fff; }

/* ----------------------------------------------------------- kaki */
.kaki { padding: 36px 0 44px; border-top: 1px solid var(--line); }
.kaki__in { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: center; }
.kaki__nama { color: var(--muted); font-size: 15px; }
.kaki__link { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.kaki__link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }

/* ----------------------------------------------------------- layar sempit */
@media (max-width: 900px) {
  .bar__nav { display: none; }
  .bar .btn { margin-left: auto; }
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__shot { justify-self: start; max-width: 320px; }
  .hero__crop { max-height: 440px; }
  .cell--soal, .cell--slide, .cell--modul { grid-column: 1 / -1; }
  .cell--modul { display: flex; }
  .cell--modul .cell__img { border-left: 0; border-top: 1px solid var(--line); max-height: 360px; }
  .cara { grid-template-columns: minmax(0, 1fr); }
  .fakta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; }
  .fakta > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .paket { grid-template-columns: minmax(0, 1fr); }
  .paket__lain { grid-template-rows: none; }
  .tutup__in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .actions .btn { flex: 1 1 100%; }
  .fakta { grid-template-columns: minmax(0, 1fr); }
  .fakta > div { padding: 0; border-left: 0; }
  .kaki__in { grid-template-columns: minmax(0, 1fr); }
  .bar__in { gap: 12px; }
  .bar .btn { padding: 0 14px; }
  .brand { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .skip-link, .faq summary .ic { transition: none; }
  .btn:active { transform: none; }
}