/* ============================================================
   Lit Education — Sistem desain v2 (restart)
   Sumber visual: feed Instagram @liteducation + logo pohon.
   Putih sebagai kertas, hijau hutan #014819 dari logo, kuning
   #fcb71c dari feed, sage sebagai warna ketiga yang lembut.
   Motif brand: blob organik, grid titik 3x3, garis squiggle kuning,
   lingkaran arsir hijau, ranting daun, badge tiket garis putus.
   ============================================================ */

:root {
  --green: #014819;
  --green-700: #0b5c26;
  --green-600: #1f7a3a;
  --green-tint: #eaf2e6;
  --sage: #dbe4cc;
  --sage-2: #c4d2ad;
  --yellow: #fcb71c;
  --yellow-deep: #e39f0a;
  --amber-text: #8a5c08;
  --cream: #fbf6ea;
  --paper: #ffffff;
  --ink: #1c2a22;
  --muted: #4f5d55;
  --line: #e2eadb;
  --wa: #25d366;

  --font-display: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', cursive;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-s: 0 2px 6px rgba(1, 72, 25, 0.06), 0 10px 24px -12px rgba(1, 72, 25, 0.18);
  --shadow-m: 0 6px 14px -6px rgba(1, 72, 25, 0.16), 0 24px 48px -20px rgba(1, 72, 25, 0.28);

  --container: 1160px;
  --gutter: 24px;
}

/* ---------- Reset & dasar ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: 3.25rem; letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-size: 2.5rem; letter-spacing: -0.012em; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Permukaan yang digambar browser ----------
   Bagian ini tidak dibuat oleh kita: sorotan pilihan di dropdown, kursor
   ketik, isian yang diisi otomatis, dan bilah gulir. Kalau dibiarkan,
   semuanya memakai warna bawaan sistem (biru di kebanyakan perangkat)
   dan langsung terasa asing di tengah halaman hijau-kuning. */

:root { color-scheme: light; accent-color: var(--green); }

::selection { background: var(--yellow); color: var(--green); }

input, textarea, select, button { accent-color: var(--green); }
input, textarea { caret-color: var(--green); }

/* Daftar pilihan dropdown. Sorotannya digambar sistem, jadi kendali kita
   sebagian: accent-color mengarahkan warna sorotan di browser berbasis
   Chromium, sisanya diatur di sini. */
select option { background: #fff; color: var(--ink); }
select option:checked { background: var(--green-tint); color: var(--green); font-weight: 700; }
select option:disabled { color: #93a199; }

/* Isian yang diisi otomatis oleh browser: bawaannya biru muda. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--cream) inset;
  box-shadow: 0 0 0 100px var(--cream) inset;
  caret-color: var(--green);
}

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container { width: min(var(--container), 100%); margin: 0 auto; }

.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Tipografi pendukung ---------- */

.lead { font-size: 19px; color: var(--muted); max-width: 56ch; }
.muted { color: var(--muted); }
.meta { font-size: 13px; color: var(--muted); }
.script { font-family: var(--font-script); font-weight: 700; color: var(--amber-text); }
/* Nama brand "Lit" / "Lit Education" memakai serif Baskerville seperti logo.
   Libre Baskerville dimuat dari Google Fonts (Baskerville Old Face di logo
   berlisensi Microsoft). Bobot mengikuti konteksnya (tebal di judul). */
.merek { font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.01em; }

/* Sorotan kuning di belakang teks: pengganti judul kuning di feed IG
   supaya tetap terbaca (hijau di atas kuning = 6.1:1). */
.hl {
  display: inline;
  background: var(--yellow);
  color: var(--green);
  padding: 0.02em 0.22em 0.06em;
  border-radius: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Garis kuning pendek di bawah judul, seperti di feed */
.underscore::after {
  content: '';
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 3px;
  background: var(--yellow);
  margin-top: 14px;
}
.center .underscore::after { margin-left: auto; margin-right: auto; }

/* Tagline brand: Learn • Inspire • Thrive */
.tagline {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600; color: var(--green);
  font-size: 15px;
}
.tagline i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 20px; height: 20px; }

.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--green-700); color: #fff; box-shadow: var(--shadow-m); }

.btn-yellow { background: var(--yellow); color: var(--green); }
.btn-yellow:hover { background: #ffc43a; color: var(--green); }

.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green-tint); color: var(--green); }

.btn-white { background: #fff; color: var(--green); }
.btn-white:hover { background: var(--cream); color: var(--green); }

.btn-sm { padding: 10px 18px; font-size: 15px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none;
}

/* Menu atas selain Beranda dinonaktifkan: halaman-halaman itu masih
   memakai desain lama, jadi belum layak dibuka dari beranda baru. */
.is-soon { cursor: not-allowed; opacity: 0.5; }
.site-nav a.is-soon:hover { background: transparent; color: var(--ink); }

.link-arrow .icon { transition: transform 200ms var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Badge & pil ---------- */

/* Badge tiket: garis putus-putus, seperti "FREE Registration Fee" di feed */
.ticket {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 12px;
  border: 2px dashed var(--yellow-deep);
  background: var(--cream); color: var(--green);
  font-weight: 800; font-size: 14px; line-height: 1.25;
}
.ticket small { display: block; font-weight: 600; font-size: 12px; color: var(--amber-text); }
.ticket.green { border-color: var(--green-600); background: var(--green-tint); }
.ticket.green small { color: var(--green-700); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.2;
  background: var(--green-tint); color: var(--green);
}
.pill.yellow { background: var(--yellow); color: var(--green); }
.pill.dark { background: var(--green); color: #fff; }

/* Lingkaran ikon krem, seperti baris ikon di feed IG */
.icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--cream); color: var(--green);
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 1px rgba(1, 72, 25, 0.06);
}
.icon-circle .icon { width: 28px; height: 28px; }
.icon-circle.yellow { background: var(--yellow); }
.icon-circle.green { background: var(--green); color: #fff; }
.icon-circle.sm { width: 48px; height: 48px; }
.icon-circle.sm .icon { width: 22px; height: 22px; }

/* ---------- Motif dekoratif brand ---------- */

.deco { position: absolute; pointer-events: none; }

.deco-dots {
  width: 44px; height: 44px;
  background-image: radial-gradient(circle, var(--green) 3px, transparent 3.5px);
  background-size: 16px 16px;
}
.deco-dots.yellow { background-image: radial-gradient(circle, var(--yellow) 3px, transparent 3.5px); }

.deco-hatch { width: 90px; height: 90px; color: var(--green); }
.deco-hatch.yellow { color: var(--yellow); }

.deco-squiggle { width: 110px; height: 26px; color: var(--yellow); }
.deco-squiggle path { stroke: currentColor; stroke-width: 5; fill: none; stroke-linecap: round; }

.deco-leaf { width: 54px; height: 76px; color: var(--green); }
.deco-leaf path { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Tiga garis kecil di samping judul (aksen "kilat" di feed) */
.deco-flick { width: 22px; height: 28px; color: var(--green); }
.deco-flick path { stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }

.blob {
  position: absolute; pointer-events: none; z-index: 0;
  border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
}
.blob.yellow { background: var(--yellow); }
.blob.sage { background: var(--sage); }
.blob.green { background: var(--green); }

/* ---------- Header ---------- */

.site-header {
  padding-inline: var(--gutter);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(1, 72, 25, 0.25); }

.header-inner { display: flex; align-items: center; gap: 28px; height: 76px; }

/* Logo: pohon utuh berikut tulisan kecilnya, lalu wordmark di kanan.
   Tinggi pohon 60px di kepala setinggi 76px, supaya tidak ada yang
   terpotong dan tetap ada napas di atas bawah. */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand-logo { width: auto; height: 60px; object-fit: contain; display: block; }
.brand-word { width: auto; height: 26px; object-fit: contain; display: block; }
@media (max-width: 640px) {
  .brand { gap: 10px; }
  .brand-logo { height: 48px; }
  .brand-word { height: 20px; }
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav a {
  display: block; padding: 8px 12px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.site-nav a:hover { background: var(--green-tint); color: var(--green); }
.site-nav a[aria-current="page"] { color: var(--green); box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; padding-bottom: 5px; }


/* ---------- Hero ---------- */

.hero { position: relative; padding: 48px var(--gutter) 84px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }

.hero-greet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--green-700);
  margin-bottom: 18px;
}
.hero-greet .cjk { font-family: 'Noto Sans JP', 'Noto Sans SC', var(--font-display); }
.hero-greet .zh { font-family: 'Noto Sans SC', 'Noto Sans JP', var(--font-display); }
.hero-greet i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }

.hero h1 { margin-bottom: 22px; max-width: 15ch; line-height: 1.16; }
.hero .lead { margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-hours { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); font-weight: 600; }
.hero-hours .icon { color: var(--green-600); width: 20px; height: 20px; }

.hero-visual { position: relative; aspect-ratio: 1 / 1.22; }
.hero-visual .blob.yellow { width: 32%; height: 30%; right: -4%; bottom: -4%; }
.hero-visual .blob.sage { width: 24%; height: 24%; left: -4%; top: -2%; border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.hero-photo {
  position: absolute; inset: 2% 3% 3% 4%; z-index: 1;
  border-radius: 22px; overflow: hidden;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hero-pill {
  position: absolute; z-index: 2; left: 2%; bottom: 4%;
  display: flex; align-items: center; gap: 10px;
  background: var(--green); color: #fff; padding: 10px 16px 10px 10px;
  border-radius: 999px; box-shadow: var(--shadow-m); max-width: 280px;
  font-size: 14px; line-height: 1.3;
}
.hero-pill b { color: var(--yellow); }
.hero-pill .icon-circle { width: 40px; height: 40px; }
.hero-pill .icon-circle .icon { width: 20px; height: 20px; }

.hero .deco-dots { top: 2%; right: 3%; }
.hero .deco-squiggle { top: 5%; left: 40%; }
.hero .deco-leaf { bottom: 0%; right: 1%; z-index: 2; width: 38px; height: 54px; }
.hero .deco-hatch { left: -2%; bottom: -4%; width: 52px; height: 52px; }

/* Momen masuk pertama kali: elemen visual hero "mendarat" satu per satu.
   Satu momen yang dirancang, bukan efek pada setiap section. */
@keyframes lit-land {
  from { opacity: 0; transform: translateY(14px) var(--land-rot, rotate(0)); }
  to { opacity: 1; transform: translateY(0) var(--land-rot, rotate(0)); }
}
.hero-visual > * { animation: lit-land 600ms var(--ease-out) both; }
.hero-visual .blob.sage { animation-delay: 0ms; }
.hero-visual .blob.yellow { animation-delay: 60ms; }
.hero-visual .hero-photo { animation-delay: 120ms; }
.hero-visual .hero-pill { animation-delay: 400ms; }
.hero-visual .deco { animation-delay: 480ms; }

.deco-squiggle.draw path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: lit-draw 900ms var(--ease-out) 500ms forwards; }
@keyframes lit-draw { to { stroke-dashoffset: 0; } }

/* ---------- Section umum ---------- */

.section { padding: 84px var(--gutter); position: relative; }
.section.tight { padding: 56px var(--gutter); }
.section.sage-bg { background: #f3f7ee; }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 18px; }

.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.head-row .section-head { margin-bottom: 0; }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Pilar: Learn • Inspire • Thrive ---------- */

.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px dashed var(--sage-2); border-bottom: 1px dashed var(--sage-2);
}
.pillar { display: flex; gap: 18px; align-items: center; padding: 28px 28px; }
.pillar + .pillar { border-left: 1px dashed var(--sage-2); }
.pillars.boxed { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 8px 12px; }
.pillar h3 { margin: 0 0 4px; font-size: 20px; }
.pillar p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Program & tab bahasa ---------- */

.lang-tabs {
  position: relative; display: inline-flex; gap: 4px; padding: 5px;
  background: var(--green-tint); border-radius: 999px; margin-bottom: 36px;
}
.lang-indicator {
  position: absolute; top: 5px; left: 0; height: calc(100% - 10px);
  background: var(--yellow); border-radius: 999px; z-index: 0;
  transition: transform 260ms var(--ease-out);
  box-shadow: 0 2px 6px rgba(1, 72, 25, 0.12);
}
.lang-tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 0; background: transparent; border-radius: 999px;
  font-family: var(--font-body); font-weight: 800; font-size: 15px; color: var(--green-700);
  cursor: pointer; white-space: nowrap; transition: color 160ms ease, transform 160ms var(--ease-out);
}
.lang-tab:active { transform: scale(0.97); }
.lang-tab[aria-selected="true"] { color: var(--green); }
.lang-tab .native { font-family: 'Noto Sans JP', 'Noto Sans SC', var(--font-display); font-weight: 700; font-size: 14px; opacity: 0.8; }

.course-grid { transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.course-grid.is-switching { opacity: 0; transform: translateY(8px); }

.course-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 26px 26px 24px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--sage-2); }
.course-card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.course-card h3 { margin: 4px 0 0; font-size: 22px; }
.course-card p { color: var(--muted); font-size: 15px; margin: 0; flex: 1; }
.course-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.course-meta .icon { color: var(--green-600); width: 18px; height: 18px; }
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding-top: 16px; border-top: 1px dashed var(--sage-2); }
.price { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--green); }
.price { white-space: nowrap; }
.price small { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--muted); }

.course-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; color: var(--muted); font-size: 15px;
}

.empty {
  padding: 40px; text-align: center; border: 1px dashed var(--sage-2);
  border-radius: var(--radius-l); color: var(--muted);
}

/* Blok penerjemah tersumpah */
.translator-band {
  position: relative; overflow: clip;
  margin-top: 40px; padding: 34px 38px;
  background: var(--green); color: #e6efe2; border-radius: var(--radius-l);
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center;
}
.translator-band > div:not(.deco), .translator-band > ul { position: relative; z-index: 1; }
.translator-band > .deco { position: absolute; }
.translator-band h3 { color: #fff; font-size: 1.75rem; margin-bottom: 10px; }
.translator-band p { color: #edf3ea; max-width: 52ch; }
.translator-band .hl { transform: rotate(-1deg); }
.translator-band .deco-hatch { right: -20px; bottom: -30px; width: 140px; height: 140px; opacity: 0.35; }
.translator-band .deco-dots { top: 24px; right: 36px; }
.translator-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.translator-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #e6efe2; }
.translator-list .icon { color: var(--yellow); width: 20px; height: 20px; margin-top: 3px; }
.translator-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Tentang (foto blob + nilai) ---------- */

.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.about-visual { position: relative; aspect-ratio: 1 / 0.92; }
.about-visual .blob.sage { width: 36%; height: 34%; left: -5%; bottom: -5%; }
.about-visual .blob.yellow { width: 18%; height: 16%; right: -3%; top: -2%; border-radius: 50%; }
/* Foto about: tanpa clip-path supaya tepi atas lurus dan puncak gunung
   tampil penuh. Sudut membulat biasa saja, bukan blob. */
.about-photo { position: absolute; inset: 3% 3% 3% 3%; z-index: 1; border-radius: 22px; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-visual .deco-leaf { left: -2%; top: 2%; z-index: 2; width: 38px; height: 54px; }
.about-visual .deco-dots { right: 4%; bottom: 0%; }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 32px; }
.value { text-align: center; padding: 0 8px; }
.value + .value { border-left: 1px dashed var(--sage-2); }
.value .icon-circle { margin: 0 auto 10px; }
.value b { display: block; font-size: 15px; color: var(--green); line-height: 1.25; }

/* ---------- Alasan memilih LIT (grid garis putus) ---------- */

.reasons { display: grid; grid-template-columns: repeat(3, 1fr); }
.reason { padding: 32px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.reason:nth-child(3n+2), .reason:nth-child(3n+3) { border-left: 1px dashed var(--sage-2); }
.reason:nth-child(n+4) { border-top: 1px dashed var(--sage-2); }
.reason h3 { margin: 16px 0 6px; font-size: 19px; }
.reason p { margin: 0; color: var(--muted); font-size: 15px; max-width: 28ch; }

.belief {
  display: flex; align-items: center; gap: 18px;
  margin-top: 40px; padding: 22px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
}
.belief p { margin: 0; }
.belief b { color: var(--green); }

/* ---------- Tutor ---------- */

.tutor-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.tutor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-s); }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--green); color: var(--yellow);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
}
/* Foto tutor: duotone hijau (filter dari sprite) dengan cincin kuning tipis.
   Kalau tutor belum punya foto, tampil inisial dengan cincin yang sama. */
.tutor-foto {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  overflow: hidden; background: var(--green);
}
.tutor-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: url(#duo-hijau); }
.tutor-card .avatar, .tutor-foto { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--yellow); }
/* Di halaman Tutor kartunya menumpuk ke bawah, jadi fotonya dibesarkan. */
.tutor-grid .tutor-foto, .tutor-grid .avatar {
  width: 130px; height: 130px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--yellow);
}
.tutor-grid .avatar { font-size: 42px; }

.tutor-card h3 { margin: 4px 0 4px; font-size: 19px; }
.tutor-card .pill { margin-bottom: 8px; }
.tutor-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Fasilitas ---------- */

.facility-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.facility-photos { position: relative; aspect-ratio: 1 / 0.9; }
.facility-photos img { position: absolute; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-m); }
.facility-photos .p1 { width: 68%; height: 62%; left: 0; top: 0; }
.facility-photos .p2 { width: 56%; height: 50%; right: 0; bottom: 0; border: 6px solid #fff; }
.facility-photos .blob.yellow { width: 40%; height: 40%; right: 6%; top: 8%; border-radius: 50%; }
.facility-photos .deco-squiggle { left: 4%; bottom: 10%; }
.facility-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.facility-list li { display: flex; gap: 14px; align-items: flex-start; }
.facility-list b { display: block; color: var(--green); font-size: 16px; }
.facility-list span { color: var(--muted); font-size: 15px; }

/* ---------- Testimoni ---------- */

.testi-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 20px; scrollbar-width: thin; scrollbar-color: var(--yellow) var(--green-tint);
}
.testi-row::-webkit-scrollbar { height: 8px; }
.testi-row::-webkit-scrollbar-track { background: var(--green-tint); border-radius: 4px; }
.testi-row::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 4px; }
.testi {
  scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.testi .stars { display: flex; gap: 3px; color: var(--yellow); }
.testi .stars .icon { width: 18px; height: 18px; }
.testi blockquote { margin: 0; font-size: 16px; line-height: 1.6; flex: 1; }
.testi footer { display: flex; align-items: center; gap: 12px; }
.testi footer b { display: block; color: var(--green); }
.testi footer div span { font-size: 13px; color: var(--muted); }
.testi .avatar { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--yellow); }
/* Foto testimoni: perlakuan sama dengan foto tutor, ukuran kecil. */
.testi-foto { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--green); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--yellow); }
.testi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: url(#duo-hijau); }

/* ---------- Blok ajakan penutup ---------- */

/* Dibuat sebagai kartu yang mengambang di atas kertas putih, bukan pita
   selebar layar. Bagian di atasnya sering berlatar sage dan kaki halaman
   berlatar hijau tua, jadi pita hijau muda nyaris tak terlihat batasnya.
   Kartu dengan jarak putih di atas-bawah memberi pemisahan yang jelas
   tanpa menambah warna baru. */
.cta-band { background: var(--paper); padding: 76px var(--gutter); }
.cta-kartu {
  position: relative; overflow: clip;
  background: var(--sage); border-radius: var(--radius-l);
  padding: 52px 56px; box-shadow: var(--shadow-m);
}
.cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; position: relative; z-index: 1; }
.cta-band h2 { color: var(--green); margin-bottom: 12px; }
.cta-band p { color: var(--muted); font-size: 18px; max-width: 48ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.cta-aside {
  background: #fff; border-radius: var(--radius-m); padding: 26px 28px;
  box-shadow: var(--shadow-s); display: grid; gap: 14px;
}
.cta-aside .row { display: flex; gap: 12px; align-items: flex-start; }
.cta-aside .row .icon { color: var(--green-600); width: 22px; height: 22px; margin-top: 2px; }
.cta-aside b { color: var(--green); display: block; }
.cta-aside span { color: var(--muted); font-size: 15px; }
.cta-kartu .blob.green { width: 360px; height: 360px; right: -150px; top: -190px; opacity: 0.07; }
.cta-kartu .deco-hatch { left: -34px; bottom: -46px; width: 120px; height: 120px; opacity: 0.3; color: var(--yellow); }
/* Titik-titik ditaruh di pojok kanan atas supaya tidak menimpa judul. */
.cta-kartu .deco-dots { left: auto; right: 30px; top: 26px; }

/* ---------- Blog ---------- */

.post-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: clip;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); color: inherit; }
.post-thumb {
  height: 150px; background: var(--green-tint); color: var(--green);
  display: grid; place-items: center; position: relative;
}
.post-thumb svg { width: 56px; height: 56px; }
.post-thumb::after {
  content: ''; position: absolute; right: 18px; bottom: 14px; width: 44px; height: 44px;
  background-image: radial-gradient(circle, var(--yellow) 3px, transparent 3.5px); background-size: 16px 16px;
}
.post-body { padding: 22px 24px 24px; display: grid; gap: 8px; }
.post-body h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.post-card:hover h3 { color: var(--green-600); }

/* ---------- FAQ ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px dashed var(--sage-2); padding: 4px 0; }
.faq-item:first-child { border-top: 1px dashed var(--sage-2); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--green);
}
.faq-q .chev { width: 32px; height: 32px; border-radius: 50%; background: var(--green-tint); display: grid; place-items: center; flex: none; transition: transform 260ms var(--ease-out), background-color 160ms ease; }
.faq-q .chev .icon { width: 18px; height: 18px; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); background: var(--yellow); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 60px 22px 4px; margin: 0; color: var(--muted); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ---------- Footer ---------- */

.site-footer { background: var(--green); color: #edf3ea; padding: 64px var(--gutter) 28px; position: relative; overflow: clip; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; position: relative; z-index: 1; }
.site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.site-footer a { color: #e6efe2; text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.site-footer ul li { display: flex; gap: 10px; align-items: flex-start; }
.site-footer ul .icon { color: var(--yellow); width: 18px; height: 18px; margin-top: 4px; flex: none; }
.footer-brand img { width: 72px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-brand .tagline { color: #fff; margin-bottom: 14px; }
.footer-brand p { font-size: 15px; max-width: 34ch; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px dashed rgba(255, 255, 255, 0.22);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #dcebd6;
}
.site-footer .deco-hatch.yellow { right: -30px; top: -40px; width: 160px; height: 160px; opacity: 0.35; }

/* ---------- Tab bar bawah (khusus layar HP) ---------- */

.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; padding: 4px 2px; border: 0; background: none; border-radius: 14px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1.1;
  color: var(--muted); text-decoration: none; cursor: pointer;
  transition: transform 120ms var(--ease-out), color 160ms ease;
}
.tab:active { transform: scale(0.94); }
.tab-ic {
  width: 52px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  transition: background-color 180ms ease;
}
.tab-ic .icon { width: 22px; height: 22px; }
.tab.is-active { color: var(--green); }
.tab.is-active .tab-ic { background: var(--yellow); }
.tab[aria-expanded="true"] { color: var(--green); }
.tab[aria-expanded="true"] .tab-ic { background: var(--green-tint); }
.tab.is-soon { opacity: 0.45; }

.sheet-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(1, 72, 25, 0.38);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Lembar naik dari bawah, keluar lewat jalan yang sama. Kurva ala
   laci iOS, bisa ditarik turun untuk menutup. */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  background: #fff; border-radius: 26px 26px 0 0;
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px -16px rgba(1, 72, 25, 0.35);
  transform: translateY(100%); visibility: hidden; touch-action: none;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 380ms;
}
.sheet.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.sheet.is-dragging { transition: none; }
.sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--sage-2); margin: 0 auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sheet-head h2 { font-size: 19px; margin: 0; }
.sheet-close {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--green-tint); color: var(--green);
  display: grid; place-items: center; cursor: pointer; transition: transform 120ms var(--ease-out);
}
.sheet-close:active { transform: scale(0.92); }
.sheet-close .icon { width: 18px; height: 18px; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li + li { border-top: 1px dashed var(--sage-2); }
.sheet-list a {
  display: flex; align-items: center; gap: 14px; padding: 12px 2px;
  font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none;
}
.sheet-list a small { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.sheet .btn { width: 100%; margin-top: 14px; }

/* ---------- Tombol WhatsApp melayang ---------- */

.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: var(--wa); color: var(--green); padding: 12px 18px 12px 14px; border-radius: 999px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(37, 211, 102, 0.6);
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.wa-float .icon { width: 24px; height: 24px; }
.wa-float:hover { color: var(--green); transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.7); }
.wa-float:active { transform: scale(0.97); }

/* ---------- Reveal saat scroll (hanya grid daftar) ---------- */

[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsif ---------- */

@media (max-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.1rem; }
  .hero-grid { grid-template-columns: 1fr 0.9fr; gap: 32px; }
  .about-grid, .facility-grid { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .value:nth-child(3) { border-left: 0; }
}

@media (max-width: 900px) {
  .site-nav, .nav-toggle { display: none; }
  .header-cta { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { display: grid; }
  .wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .hero { padding: 28px var(--gutter) 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: none; }
  .hero-visual { max-width: 460px; margin: 16px auto 0; width: 100%; }
  .hero-pill { left: 0; max-width: 280px; }

  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px dashed var(--sage-2); }
  .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .translator-band { grid-template-columns: 1fr 1fr; padding: 28px 26px; gap: 20px; }
  .about-grid, .facility-grid { grid-template-columns: 1fr; }
.about-visual { max-width: 460px; }
  .story-grid .about-visual { max-width: 460px; }
  .reasons { grid-template-columns: 1fr 1fr; }
  .reason:nth-child(3n+2), .reason:nth-child(3n+3) { border-left: 0; }
  .reason:nth-child(2n) { border-left: 1px dashed var(--sage-2); }
  .reason:nth-child(n+3) { border-top: 1px dashed var(--sage-2); }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-kartu { padding: 40px 34px; }
  .section { padding: 64px var(--gutter); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1, .page-head h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }
  .lang-title h2 { font-size: 1.4rem; }
  .article h1 { font-size: 1.9rem; }
  .translator-band h3 { font-size: 1.5rem; }
  :root { --gutter: 18px; }
  .header-inner { height: 68px; }
  .brand img { width: 40px; height: 40px; }
  .grid-3, .grid-2, .reasons { grid-template-columns: 1fr; }
  .reason { border-left: 0 !important; }
  .reason + .reason { border-top: 1px dashed var(--sage-2); }
  .values { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-visual { aspect-ratio: 1 / 1.22; }
  .hero-pill { bottom: 2%; font-size: 14px; max-width: 250px; }
  .hero .deco-hatch { display: none; }
  .translator-band { grid-template-columns: 1fr; padding: 26px 20px; }
  .translator-band .deco-dots { display: none; }
  .lang-tabs { display: flex; width: 100%; }
  .lang-tab { flex: 1; justify-content: center; padding: 10px 6px; font-size: 14px; }
  .lang-tab .native { display: none; }
  .testi-row { grid-auto-columns: 86%; }
  .faq-a p { padding-right: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-band { padding: 52px var(--gutter); }
  .cta-kartu { padding: 32px 22px; border-radius: var(--radius-m); }
  .cta-kartu .deco-dots { display: none; }
  .cta-actions .btn { width: 100%; }
  .wa-float span { display: none; }
  .wa-float { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-visual > *, .deco-squiggle.draw path { animation: none !important; }
  .deco-squiggle.draw path { stroke-dashoffset: 0; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .lang-indicator, .course-grid, .faq-a, .faq-q .chev, .course-card, .post-card, .tutor-card, .tab, .tab-ic { transition: none; }
  .sheet { transition: opacity 200ms ease, visibility 0s linear 200ms; transform: none; opacity: 0; }
  .sheet.is-open { opacity: 1; transition-delay: 0s; }
}

/* ============================================================
   Halaman dalam (Program, Tutor, Blog, Kontak, Penerjemah, Tentang)
   ============================================================ */

.page-head { position: relative; padding: 44px var(--gutter) 36px; }
.page-head .container { position: relative; }
.page-head h1 { font-size: 3rem; max-width: 20ch; margin-bottom: 14px; }
.page-head .lead { margin: 0; }
.page-head .deco-dots { right: 0; top: -6px; }
.page-head .deco-squiggle { right: 10%; bottom: 0; }
.page-head .deco-leaf { right: 2%; top: -10px; width: 44px; height: 62px; }
.page-head + .section { padding-top: 24px; }

.lang-section { padding: 36px 0 8px; }
.lang-section + .lang-section { border-top: 1px dashed var(--sage-2); }
.lang-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.lang-title h2 { margin: 0; font-size: 1.8rem; }
.lang-title .native { font-family: 'Noto Sans JP', 'Noto Sans SC', var(--font-display); font-weight: 700; font-size: 15px; }
.lang-title .meta { margin-left: auto; }

.tutor-role { color: var(--green-700) !important; font-weight: 700; font-size: 14px !important; margin-bottom: 8px !important; }
.tutor-grid .tutor-card { flex-direction: column; }
.tutor-grid .avatar { width: 76px; height: 76px; font-size: 26px; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points b { display: block; color: var(--green); }
.points span { color: var(--muted); font-size: 15px; }

/* ---------- Form ---------- */

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 32px; }
/* align-content: start menjaga isian tetap di atas. Tanpa itu, kalau
   isian di sebelahnya dalam satu baris lebih tinggi karena catatan atau
   pesan galat, baris label dan isian ikut meregang dan isiannya turun. */
.field { display: grid; gap: 6px; margin-bottom: 18px; align-content: start; }
.field label { font-weight: 700; font-size: 15px; color: var(--green); }
.field .hint { font-size: 13px; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--sage-2); border-radius: 12px; background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: #66756d; }
.field select:hover { border-color: var(--green-600); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(252, 183, 28, 0.35);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014819' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; text-overflow: ellipsis; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #c62828; }
.field .error { display: none; font-size: 13px; font-weight: 700; color: #b3261e; }
.field.invalid .error { display: block; }
.field-check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.field-check input { width: 20px; height: 20px; accent-color: var(--green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.btn-block { width: 100%; }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 15px; margin-bottom: 18px; }
.alert .icon { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.alert.success { background: var(--green-tint); color: var(--green); }
.alert.error { background: #fdecea; color: #8c1d18; }

.done-card { text-align: center; padding: 48px 32px; }
.done-card .icon-circle { width: 88px; height: 88px; margin: 0 auto 18px; }
.done-card .icon-circle .icon { width: 40px; height: 40px; }
.done-card h2 { margin-bottom: 10px; }
.done-card p { color: var(--muted); max-width: 46ch; margin: 0 auto 22px; }

/* ---------- Kontak ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.info-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list b { display: block; color: var(--green); font-size: 15px; }
.info-list span, .info-list a { font-size: 15px; }
.info-list a { color: var(--ink); }
.map-slot {
  position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: clip;
  background: var(--green-tint); display: grid; place-items: center; text-align: center; padding: 24px;
}
.map-slot .deco-dots { right: 18px; top: 18px; }
.map-slot .deco-squiggle { left: 18px; bottom: 16px; }
.map-slot .icon-circle { margin: 0 auto 12px; }
.map-slot b { display: block; color: var(--green); }
.map-slot span { display: block; color: var(--muted); font-size: 14px; margin-bottom: 12px; }

/* ---------- Penerjemah ---------- */

.steps { display: grid; gap: 18px; margin-top: 28px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-num { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--yellow); color: var(--green); font-family: var(--font-display); font-weight: 600; font-size: 18px; display: grid; place-items: center; }
.step b { display: block; color: var(--green); margin-bottom: 2px; }
.step div span { color: var(--muted); font-size: 15px; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.doc-chips .pill { font-size: 14px; padding: 8px 14px; }

/* ---------- Blog ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--green-700); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms var(--ease-out);
}
.chip:hover { background: var(--green-tint); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--green); }

.article { max-width: 760px; margin: 0 auto; }
.article-hero {
  position: relative; height: 200px; border-radius: 28px; background: var(--green-tint); color: var(--green);
  display: grid; place-items: center; margin-bottom: 32px; overflow: clip;
}
.article-hero svg:not(.deco) { width: 72px; height: 72px; }
.article-hero .deco-dots { right: 24px; bottom: 18px; }
.article-hero .deco-squiggle { left: 24px; top: 20px; }
.article h1 { font-size: 2.6rem; margin: 12px 0 10px; }
.article-body { font-size: 18px; line-height: 1.75; margin-top: 28px; }
.article-body h2, .article-body h3 { margin-top: 1.5em; margin-bottom: 0.4em; font-size: 22px; }
.article-body p { margin-bottom: 1.15em; }
.article-body ul, .article-body ol { padding-left: 1.3em; margin-bottom: 1.15em; }
.article-body a { text-decoration: underline; }
.article-foot { margin-top: 36px; padding-top: 24px; border-top: 1px dashed var(--sage-2); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* ---------- Tentang ---------- */

.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.story-grid .about-visual { aspect-ratio: 1 / 1; }
.vm-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; }
.vm-divider { border-left: 1px dashed var(--sage-2); }
.vm-grid h3 { font-size: 22px; margin-bottom: 10px; }
.photo-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-top: 32px; }
.photo-row img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; aspect-ratio: 4 / 3; }
.photo-row img:first-child { grid-row: span 1; }

/* ---------- Responsif halaman dalam ---------- */

@media (max-width: 900px) {
  .contact-grid, .story-grid, .vm-grid { grid-template-columns: 1fr; }
  .vm-divider { border-left: 0; border-top: 1px dashed var(--sage-2); }
  .photo-row { grid-template-columns: 1fr 1fr; }
  .story-grid .about-visual { max-width: 460px; }
}
@media (max-width: 600px) {
  .form-card { padding: 22px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .photo-row { grid-template-columns: 1fr; }
  .lang-title .meta { margin-left: 0; width: 100%; }
  .page-head .deco-squiggle, .page-head .deco-leaf { display: none; }
}

/* ---------- Tambahan untuk versi Go: panel tab dirender server ---------- */
.course-grid-wrap { transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.course-grid-wrap.is-switching { opacity: 0; transform: translateY(8px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.post-thumb.has-img, .article-hero.has-img { padding: 0; }
.post-thumb.has-img img, .article-hero.has-img img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb.has-img::after { display: none; }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .steps.steps-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps.steps-4 { grid-template-columns: 1fr; } }


/* ---------- Dropdown bertema ----------
   Daftar pilihan yang terbuka dari <select> digambar sistem operasi, jadi
   warnanya tidak bisa diikutkan ke tema lewat CSS. Daftar di bawah ini
   digambar sendiri oleh halaman, sementara <select> aslinya tetap ada dan
   tersembunyi supaya formulir tetap terkirim seperti biasa. */

.pilihan { position: relative; }

/* Select asli disembunyikan tanpa display:none, supaya pesan validasi
   bawaan browser tetap punya tempat berlabuh. */
.pilihan-asli {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; left: 0; top: 0; margin: 0;
}

.pilihan-tombol {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 16px; text-align: left; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--sage-2); border-radius: 12px;
  background: #fff; cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.pilihan-tombol:hover { border-color: var(--green-600); }
.pilihan-tombol:focus-visible {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(252, 183, 28, 0.35);
}
.pilihan-tombol.kosong { color: #66756d; }
.pilihan-teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pilihan-panah {
  flex: none; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.pilihan.terbuka .pilihan-panah { transform: translateY(2px) rotate(-135deg); }
.field.invalid .pilihan-tombol { border-color: #c62828; }

.pilihan-daftar {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: 280px; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--sage-2); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(1, 72, 25, 0.16);
  scrollbar-width: thin; scrollbar-color: var(--sage-2) transparent;
  /* Tumbuh dari tombolnya, bukan dari tengah dirinya sendiri. */
  transform-origin: top center;
  animation: pilihanMuncul 170ms var(--ease-out);
}
.pilihan.ke-atas .pilihan-daftar { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }

@keyframes pilihanMuncul {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pilihan.ke-atas .pilihan-daftar { animation-name: pilihanMunculAtas; }
@keyframes pilihanMunculAtas {
  from { opacity: 0; transform: scale(0.97) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pilihan-daftar { animation: none; }
  .pilihan-panah { transition: none; }
}

.pilihan-item {
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  font-size: 15px; line-height: 1.35; color: var(--ink);
}
.pilihan-item.kosong { color: #66756d; }
.pilihan-item.disorot { background: var(--green-tint); }
.pilihan-item.terpilih { color: var(--green); font-weight: 700; }
.pilihan-item.terpilih.disorot { background: var(--green-tint); }
.pilihan-item[aria-disabled="true"] { color: #93a199; cursor: default; }

.pilihan-daftar::-webkit-scrollbar { width: 8px; }
.pilihan-daftar::-webkit-scrollbar-track { background: transparent; }
.pilihan-daftar::-webkit-scrollbar-thumb { background: var(--sage-2); border-radius: 4px; }

/* ---------- Halaman Karier ----------
   Daftar lowongan dibuat sebagai baris lebar, bukan kartu bersebelahan,
   karena yang dibaca orang di sini teks: posisi apa, di mana, penuh waktu
   atau tidak. Kartu sempit justru memotong kalimatnya. */

.lowongan-list { display: grid; gap: 16px; }
.lowongan-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-m);
  padding: 24px 26px;
  transition: border-color 200ms ease, transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.lowongan-card:hover { border-color: var(--sage-2); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.lowongan-utama { flex: 1; min-width: 260px; }
.lowongan-card h3 { font-size: 22px; margin: 8px 0 6px; }
.lowongan-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.lowongan-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lowongan-tempat { display: flex; align-items: center; gap: 7px; margin-top: 12px !important; }
.lowongan-tempat .icon { width: 16px; height: 16px; flex: none; }
.lowongan-card .btn { flex: none; }

/* Daftar tugas dan syarat: centang hijau, bukan bulatan bawaan, supaya
   terbaca sebagai hal yang bisa dicocokkan sendiri oleh pembaca. */
.daftar-centang { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.daftar-centang li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.daftar-centang .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--green-600); }

.ajakan-gabung {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--green-tint); border-radius: var(--radius-m); padding: 28px 30px;
}
.ajakan-gabung h2 { font-size: 24px; margin: 0 0 6px; }
.ajakan-gabung p { margin: 0; color: var(--green-700); font-size: 15px; max-width: 52ch; line-height: 1.6; }
.ajakan-gabung .btn { flex: none; }

@media (max-width: 640px) {
  .lowongan-card, .ajakan-gabung { flex-direction: column; align-items: stretch; }
  .lowongan-card .btn, .ajakan-gabung .btn { width: 100%; }
}

/* Isian berkas: tombol bawaan browser berbeda-beda bentuknya, jadi
   dirapikan supaya menyatu dengan isian lain di formulir. */
.field input[type="file"] {
  width: 100%; font: inherit; font-size: 15px; color: var(--muted);
  padding: 10px 12px; border: 1.5px dashed var(--sage-2); border-radius: 12px;
  background: #fff; cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.field input[type="file"]:hover { border-color: var(--green-600); background: var(--green-tint); }
.field input[type="file"]:focus-visible {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(252, 183, 28, 0.35);
}
.field input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: 14px; margin-right: 12px;
  padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--green); color: #fff; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--green-700); }

/* ---------- Menu bertingkat di kepala halaman ----------
   Mengikuti kebiasaan yang orang sudah kenal dari situs hosting: tombol
   dengan panah kecil, daftar melayang di bawahnya dengan judul tebal dan
   keterangan satu baris. Terbuka saat disorot di perangkat bertetikus,
   dan saat ditekan di layar sentuh atau keyboard. */

.site-nav .has-sub { position: relative; }
.sub-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.sub-toggle:hover, .sub-toggle[aria-expanded="true"] { background: var(--green-tint); color: var(--green); }
.sub-toggle.is-current { color: var(--green); box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; padding-bottom: 5px; }
.sub-toggle .caret { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.sub-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 320px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px -12px rgba(1, 72, 25, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.has-sub.is-open .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Jembatan tak terlihat antara tombol dan daftar, supaya tetikus tidak
   "jatuh" ke celah dan menutup daftarnya. */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.site-nav ul.submenu { display: grid; gap: 2px; }
.submenu li a {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 400; font-size: 14px;
}
.submenu li a:hover { background: var(--green-tint); color: var(--green); }
.submenu li a b { font-size: 15px; font-weight: 700; }
.submenu li a small { font-size: 12.5px; color: var(--muted); }
.submenu li a:hover small { color: var(--green-700); }
.submenu-all { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--sage-2); }
.submenu-all a { font-weight: 700 !important; color: var(--green-700) !important; font-size: 14px !important; }

@media (prefers-reduced-motion: reduce) {
  .submenu { transition: opacity 120ms ease, visibility 0s; transform: none; }
  .sub-toggle .caret { transition: none; }
}

/* Remah jalan di kepala halaman layanan. */
.crumb { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.crumb a { color: var(--green-700); font-weight: 700; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.layanan-grid { gap: 14px; }
.layanan-grid .belief { margin: 0; }
.layanan-card h3 { font-size: 21px; }