/* Halaman depan Galipat Amanah — susunan ala tema SaaS: kepala pil melayang,
 * judul besar di tengah, kartu-kartu melayang, dua kartu besar, panel gelap
 * membulat, baris angka, FAQ dua kolom, kaki dengan nama produk raksasa.
 *
 * Berkas ini berdiri sendiri — halaman depan sengaja TIDAK memuat gaya.css.
 * Tidak ada huruf/berkas dari CDN (default-src 'self'); judul memakai sans
 * bawaan sistem yang ditebalkan — ada di setiap HP dan berharga 0 byte.
 */

:root {
  --malam:    #06231D;
  --malam-2:  #0A3A31;
  --zamrud:   #0E6E63;
  --nyala:    #2BB68B;

  --kertas:   #EFF7F2;
  --permukaan:#FFFFFF;
  --tinta:    #123F37;
  --lembut:   #587068;
  --garis:    #DCE8E1;
  --aksen:    #0E6E63;
  --aksen-mu: #E1F1E9;

  --judul-a:  #0A423A;
  --judul-b:  #14735F;
  --putar-a:  #0E9E76;
  --putar-b:  #2FC98E;

  --sinar-a:  #DEF3E6;
  --sinar-b:  #D2EEDE;
  --pancaran-isi: rgba(43, 182, 139, .16);
  --awan-isi: #FFFFFF;

  --pijar-jingga: rgba(255, 170, 80, .55);
  --pijar-merah:  rgba(244, 114, 182, .5);

  --pastel-1: #DDF3E6;
  --pastel-2: #FBE3F0;
  --pastel-3: #FCE7DE;
  --pastel-4: #E9E5FB;
  --duo-hijau:#A7EABB;

  --judul: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --badan: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --angka: ui-monospace, "SF Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;

  --kolom: 1080px;
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kertas: #0B1412; --permukaan: #121D1B; --tinta: #E3EAE8; --lembut: #90A29E;
    --garis: #22302D; --aksen: #35A79A; --aksen-mu: #10302C;
    --judul-a: #EAF6F1; --judul-b: #8FD5C3;
    --putar-a: #55E0AC; --putar-b: #2BB68B;
    --sinar-a: #10231F; --sinar-b: #0C1A17;
    --pancaran-isi: rgba(53, 167, 154, .09);
  --awan-isi: rgba(143, 213, 195, .18);
    --pastel-1: #12302A; --pastel-2: #301F2C; --pastel-3: #32251C; --pastel-4: #221F33;
    --duo-hijau:#174D36;
  }
}
:root[data-theme="dark"] {
  --kertas: #0B1412; --permukaan: #121D1B; --tinta: #E3EAE8; --lembut: #90A29E;
  --garis: #22302D; --aksen: #35A79A; --aksen-mu: #10302C;
  --judul-a: #EAF6F1; --judul-b: #8FD5C3;
  --putar-a: #55E0AC; --putar-b: #2BB68B;
  --sinar-a: #10231F; --sinar-b: #0C1A17;
  --pancaran-isi: rgba(53, 167, 154, .09);
  --awan-isi: rgba(143, 213, 195, .18);
  --pastel-1: #12302A; --pastel-2: #301F2C; --pastel-3: #32251C; --pastel-4: #221F33;
  --duo-hijau:#174D36;
}
:root[data-theme="light"] {
  --kertas: #EFF7F2; --permukaan: #FFFFFF; --tinta: #123F37; --lembut: #587068;
  --garis: #DCE8E1; --aksen: #0E6E63; --aksen-mu: #E1F1E9;
  --judul-a: #0A423A; --judul-b: #14735F;
  --putar-a: #0E9E76; --putar-b: #2FC98E;
  --sinar-a: #DEF3E6; --sinar-b: #D2EEDE;
  --pancaran-isi: rgba(43, 182, 139, .16);
  --awan-isi: #FFFFFF;
  --pastel-1: #DDF3E6; --pastel-2: #FBE3F0; --pastel-3: #FCE7DE; --pastel-4: #E9E5FB;
  --duo-hijau:#A7EABB;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sasaran jangkar (#fitur, #harga, #tanya, #isi) berhenti di bawah kepala pil
   yang melayang, bukan tertutup olehnya: 12px jarak atas + 60px tinggi + napas. */
section[id], main[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font: 16px/1.6 var(--badan);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; display: block; }
/* Hindari satu kata sendirian di baris terakhir paragraf. */
p, li, dd, summary { text-wrap: pretty; }
a { color: var(--aksen); }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; border-radius: 4px; }

.lewati {
  position: absolute; left: -9999px; top: 0;
  background: var(--aksen); color: #fff; padding: 10px 16px; z-index: 100;
}
.lewati:focus { left: 12px; top: 12px; }

.kolom {
  width: 100%; max-width: var(--kolom); margin: 0 auto; padding: 0 22px;
}

/* ------------------------------------------------------------------ kepala */
/* Kepala pil melayang, PEKAT sebagai keadaan bawaan; JavaScript hanya
   membeningkannya saat di puncak. Skrip gagal = tetap pekat dan terbaca. */
.kepala {
  position: fixed; inset: 12px 16px auto; z-index: 40;
  max-width: var(--kolom); margin: 0 auto;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--garis);
  border-radius: 999px;
  box-shadow: 0 14px 34px -26px rgba(10, 60, 50, .55);
  backdrop-filter: saturate(140%) blur(12px);
  transition: background .28s ease, border-color .28s ease,
              box-shadow .28s ease, backdrop-filter .28s ease;
}
.kepala.di-puncak {
  background: transparent; border-color: transparent;
  box-shadow: none; backdrop-filter: none;
}
@media (prefers-color-scheme: dark) {
  .kepala { background: rgba(11, 20, 18, .92); }
  .kepala.di-puncak { background: transparent; }
}
.kepala .kolom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; height: 60px; padding: 0 10px 0 18px;
}
.merek {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--tinta); text-decoration: none; font-weight: 800; letter-spacing: -.02em;
}
.merek-tanda {
  display: block; width: 30px; height: 30px; border-radius: 9px; flex: none;
  object-fit: contain;
}
.kepala-nav { display: none; }
@media (min-width: 900px) {
  .kepala-nav { display: flex; gap: 4px; }
  .kepala-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 14px; border-radius: 999px;
    color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14.5px;
    transition: background-color .2s ease, color .2s ease;
  }
  .kepala-nav a:hover { background: var(--aksen-mu); color: var(--aksen); }
}
.kepala-kanan { display: flex; align-items: center; gap: 8px; }

/* Di layar HP semuanya harus muat satu baris; nama produk dan tombol Masuk
   TIDAK dibuang — pengurus lama membuka alamat ini justru untuk masuk. */
@media (max-width: 560px) {
  .kepala { inset: 8px 10px auto; }
  .kepala .kolom { height: 52px; gap: 8px; padding: 0 6px 0 12px; }
  .kolom { padding: 0 16px; }
  .merek { font-size: 14px; white-space: nowrap; gap: 8px; }
  .merek-tanda { width: 26px; height: 26px; border-radius: 8px; }
  .kepala-kanan { gap: 6px; }
  .kepala-kanan .tombol.kecil { padding: 8px 13px; font-size: 13px; }
  .hero { padding: 96px 0 40px; }
  .pita, .ajakan { padding: 54px 0; }
}

/* ------------------------------------------------------------------ tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 700 15px/1 var(--badan); text-decoration: none; cursor: pointer;
  white-space: nowrap;                     /* label tombol tidak boleh pecah baris */
  transition: transform .18s ease, box-shadow .25s ease,
              background-color .22s ease, border-color .22s ease, color .22s ease;
}
.tombol:active { transform: translateY(1px); }
/* Tombol ajakan utama: pil teal gelap dengan pijar warna di tepinya. */
.tombol.utama {
  background: linear-gradient(150deg, #125D50, #0A4B40 60%, #093F36);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(9, 63, 54, .8),
              -12px 6px 30px -12px var(--pijar-merah),
              12px 6px 30px -12px var(--pijar-jingga);
}
.tombol.utama:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px rgba(9, 63, 54, .85),
              -14px 8px 36px -12px var(--pijar-merah),
              14px 8px 36px -12px var(--pijar-jingga);
}
.tombol.besar { padding: 17px 32px; font-size: 16.5px; }
.tombol.sepi {
  border-color: var(--garis); color: var(--tinta); background: var(--permukaan);
}
.tombol.sepi:hover { border-color: var(--aksen); color: var(--aksen);
                     background: var(--aksen-mu); }
.tombol.kecil { padding: 9px 17px; font-size: 14px; min-height: 40px; }
.tombol.gelap {
  background: linear-gradient(150deg, #125D50, #0A4B40 60%, #093F36); color: #fff;
  box-shadow: 0 12px 28px -14px rgba(9, 63, 54, .8),
              -12px 6px 30px -12px var(--pijar-merah),
              12px 6px 30px -12px var(--pijar-jingga);
}
.tombol.gelap:hover { transform: translateY(-1px); }
.tombol.garis {
  border-color: var(--garis); color: var(--tinta); background: var(--permukaan);
}
.tombol.garis:hover { border-color: var(--aksen); color: var(--aksen); }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(75% 68% at 30% 0%, var(--sinar-a) 0%, transparent 60%),
    radial-gradient(65% 60% at 74% 4%, var(--sinar-b) 0%, transparent 56%),
    var(--kertas);
  color: var(--tinta);
  padding: 128px 0 54px;
  text-align: center;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 110, 99, .3), transparent);
}
.hero .kolom { position: relative; z-index: 2; }

.sorot {
  position: absolute; z-index: 1; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  left: var(--sorot-x, 50%); top: var(--sorot-y, 30%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(14, 110, 99, .1), transparent 66%);
  opacity: 0; transition: opacity .35s ease;
}
.hero.disorot .sorot { opacity: 1; }
/* Sorot hanya berguna kalau ada kursor; di layar sentuh tidak perlu ada. */
@media (pointer: coarse) { .sorot { display: none; } }

/* Pancaran cahaya di belakang judul — meniru berkas sinar tema terangnya:
   tiga bilah gradasi menyebar dari atas-tengah, bergoyang sangat pelan
   dengan irama berbeda-beda (itu yang memberi kesan hidup). Sengaja murni
   gradasi tanpa filter blur — blur besar berat di HP; geraknya hanya untuk
   yang tidak minta gerakan dikurangi, dan hanya transform+opacity supaya
   tetap ringan. Di bawah sorot (z 1) dan isi (z 2). */
.pancaran { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pancaran i {
  position: absolute; top: -14%; height: 130%;
  width: clamp(170px, 24vw, 360px);
  /* Semua bilah berporos di SATU titik: puncak tengah hero. left 50% adalah
     titik pusat bilah (digeser balik setengah lebar); yang membedakan hanya
     sudutnya, berjenjang rapi -32/-16/0/+16/+32 — kipas simetris, bukan
     susunan acak. */
  left: 50%; margin-left: calc(clamp(170px, 24vw, 360px) / -2);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, var(--pancaran-isi), transparent 76%);
  transform: rotate(var(--miring, 0deg)); transform-origin: 50% 0;
  opacity: var(--terang, 1);
}
.pancaran i:nth-child(1) { --miring: -32deg; --ayun: -2deg;   --terang: .8; }
.pancaran i:nth-child(2) { --miring: -16deg; --ayun: -1.2deg; }
.pancaran i:nth-child(3) { --miring: 0deg;   --ayun: 0deg;    --terang: .65; }
.pancaran i:nth-child(4) { --miring: 16deg;  --ayun: 1.2deg; }
.pancaran i:nth-child(5) { --miring: 32deg;  --ayun: 2deg;    --terang: .8; }

/* Ayunannya serempak dan simetris: bilah kiri dan kanan bergerak berlawanan
   arah dengan irama yang sama, jadi kipasnya membuka-menutup pelan bersama —
   terasa hidup tapi tetap rapi. */
@media (prefers-reduced-motion: no-preference) {
  .pancaran i { animation: meliuk 18s ease-in-out infinite alternate; }
}
@keyframes meliuk {
  from { transform: rotate(calc(var(--miring, 0deg) - var(--ayun, 0deg)));
         opacity: calc(var(--terang, 1) * .75); }
  to   { transform: rotate(calc(var(--miring, 0deg) + var(--ayun, 0deg)));
         opacity: var(--terang, 1); }
}

/* Awan bersiluet TEGAS di atas pancaran — permintaan pemilik: bentuk awan
   yang langsung dikenali, garisnya tajam, tanpa blur. Digambar SVG segaris
   (siluet awan klasik), isi putih pekat di mode terang, semburat mint pekat
   di mode gelap. Melintas pelan ke kiri dan ke kanan berselang-seling arah;
   gerak hanya transform, dan hanya untuk yang tidak minta gerakan
   dikurangi. */
.awan { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.awan-gumpal {
  position: absolute; fill: var(--awan-isi); height: auto;
}
/* Empat awan: dua kiri (atas besar + bawah kecil), dua kanan (atas + tengah),
   permintaan pemilik — tidak ada yang di tengah supaya judul lapang. */
.awan-gumpal:nth-child(1) { width: 200px; top: 10%; left: 7%;   --geser: 11vw; }
.awan-gumpal:nth-child(2) { width: 150px; top: 18%; right: 9%;  --geser: -12vw; }
.awan-gumpal:nth-child(3) { width: 110px; top: 54%; left: 17%;  --geser: 9vw; }
.awan-gumpal:nth-child(4) { width: 120px; top: 48%; right: 13%; --geser: -8vw; }

@media (prefers-reduced-motion: no-preference) {
  .awan-gumpal { animation: melintas 22s ease-in-out infinite alternate; }
  .awan-gumpal:nth-child(2) { animation-duration: 28s; }
  .awan-gumpal:nth-child(3) { animation-duration: 34s; }
  .awan-gumpal:nth-child(4) { animation-duration: 31s; }
}
@keyframes melintas {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--geser, 5vw)); }
}

.hero-teks { max-width: 860px; margin: 0 auto; }
.alis {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 12px/1 var(--badan); letter-spacing: .13em; text-transform: uppercase;
  color: var(--aksen); margin: 0 0 22px;
}
.alis::before, .alis::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--nyala); flex: none;
}

h1 {
  font: 800 clamp(32px, 6.2vw, 60px)/1.06 var(--judul);
  letter-spacing: -.03em; margin: 0 0 22px;
}
h1 .baris {
  display: block; text-wrap: balance;
  background: linear-gradient(160deg, var(--judul-a) 20%, var(--judul-b) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Huruf bening yang dicat latar hanya tercat sebatas kotak barisnya —
     dengan jarak baris rapat, ekor huruf g/p/q jatuh di luar kotak dan tampak
     terpotong. Kotaknya diberi ruang ke bawah, lalu jaraknya ditarik balik. */
  padding-bottom: .12em; margin-bottom: -.12em;
}

/* Kata yang berganti-ganti, kini di tengah. Tinggi barisnya 1.34em supaya ekor
   huruf q/p pada "titipan qurban" tidak terpotong overflow:hidden; kelebihan
   tingginya ditarik balik dengan margin negatif agar irama barisnya tetap. */
.putar {
  display: block; position: relative; height: 1.34em; margin-bottom: -.2em;
  overflow: hidden;
}
.putar .kata {
  position: absolute; left: 0; right: 0; text-align: center;
  white-space: nowrap; line-height: 1.2;
  opacity: 0; transform: translateY(.85em);
  background: linear-gradient(160deg, var(--putar-a), var(--putar-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .34s ease, transform .6s cubic-bezier(.22, 1, .28, 1);
}
.putar .kata.tampil { opacity: 1; transform: none; }
.putar .kata.keluar { opacity: 0; transform: translateY(-.85em); }

@media (prefers-reduced-motion: reduce) {
  /* Yang meminta gerakan dikurangi tidak diberi kata berganti sama sekali. */
  .putar { height: auto; margin-bottom: 0; }
  .putar .kata { position: static; opacity: 0; transform: none; }
  .putar .kata.tampil { opacity: 1; }
  .putar .kata:not(.tampil) { display: none; }
}

.hanya-pembaca {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero p.pokok {
  font-size: 17.5px; line-height: 1.62; color: var(--lembut);
  max-width: 36em; margin: 0 auto 30px;
}
.hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px;
             justify-content: center; }
.hero-yakin {
  display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 0;
  font-size: 13.5px; color: var(--lembut); justify-content: center;
}
.hero-yakin span { display: inline-flex; align-items: center; gap: 7px; }
.hero-yakin span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--nyala); flex: none;
}

/* --------------------------------------------------- kartu melayang di hero */
.apung {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: center; margin: 46px auto 0; max-width: 1160px;
  text-align: left;
}
.apung-kartu {
  border-radius: 20px; padding: 18px;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  box-shadow: 0 22px 44px -34px rgba(10, 60, 50, .55);
}
/* Susunan acuannya simetris: dua kartu luar paling tinggi, dua kartu dalam
   sedang, lencana kecil di tengah — semuanya rata tengah, bukan semaunya. */
@media (min-width: 900px) {
  .apung { grid-template-columns: 1.06fr .98fr .64fr .98fr 1.06fr; gap: 18px; }
  .layar-mini { min-height: 430px; gap: 12px; }
  .pastel-a { min-height: 360px; }
  .pastel-c { min-height: 360px; }
  .pastel-b { min-height: 430px; }
}
.pastel-a, .pastel-b, .pastel-c { text-align: center; align-items: center;
                                  gap: 8px; }
.pastel-c { background: var(--pastel-1); }
.apung i { font-style: normal; }
.layar-mini {
  background: linear-gradient(150deg, #11745F, #0C5A4C 60%, #094A3F);
  color: #fff; gap: 8px;
}
.mini-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
              opacity: .8; }
.mini-angka { font-size: 22px; font-weight: 800; letter-spacing: -.01em;
              font-variant-numeric: tabular-nums; }
.mini-baris {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .1); border-radius: 10px;
  padding: 8px 10px; font-size: 12.5px;
}
.mini-baris b { font-variant-numeric: tabular-nums; }
.pastel-a { background: var(--pastel-4); }
.pastel-b { background: var(--pastel-2); }
.mini-besar { font-size: 28px; font-weight: 800; letter-spacing: -.02em;
              color: var(--tinta); }
.mini-ket { font-size: 13px; color: var(--lembut); line-height: 1.45; }

.lencana-gulir {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: 50%; aspect-ratio: 1; padding: 0;
  align-items: center; justify-content: center; align-self: center;
  justify-self: center; display: none; text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (min-width: 900px) { .lencana-gulir { display: flex; } }
.gulir-teks { font: 600 10.5px var(--badan); letter-spacing: .2em;
              fill: var(--lembut); transition: fill .25s ease; }
.gulir-panah { font: 700 20px var(--badan); fill: var(--aksen);
               text-anchor: middle; }

/* Lencana ini tautan sungguhan ke #fitur, bukan hiasan: disentuh kursor ia
   membesar sedikit, garis dan tulisannya menghijau; ditekan ia mengempis.
   Gulirnya sendiri datang dari scroll-behavior: smooth di atas — murni CSS,
   tetap bekerja walau seluruh skrip gagal dimuat. */
.lencana-gulir:hover {
  border-color: var(--aksen);
  box-shadow: 0 22px 44px -30px rgba(10, 60, 50, .6);
}
.lencana-gulir:hover .gulir-teks { fill: var(--aksen); }

/* Isi kartu keunggulan — layar mini yang digambar dengan CSS. */
.mini-judul { font: 800 20px/1.2 var(--judul); letter-spacing: -.02em;
              color: var(--tinta); }
.mini-nol { font: 800 54px/1 var(--judul); letter-spacing: -.03em;
            color: var(--tinta); }
.mini-ket-gelap { font-size: 11px; color: rgba(255, 255, 255, .65); }

.mini-grafik { display: flex; align-items: flex-end; gap: 5px;
               height: 48px; width: 100%; margin-top: 6px; }
.mini-grafik i { flex: 1; border-radius: 4px 4px 0 0;
                 background: rgba(255, 255, 255, .32); }
.mini-grafik .b1 { height: 38%; }
.mini-grafik .b2 { height: 55%; }
.mini-grafik .b3 { height: 30%; }
.mini-grafik .b4 { height: 70%; }
.mini-grafik .b5 { height: 48%; }
.mini-grafik .b6 { height: 100%; background: #5EE6C4; }

.mini-lembar { display: grid; grid-template-columns: repeat(3, 1fr);
               gap: 4px; width: 100%; margin-top: 10px; }
.mini-lembar i, .mini-lembar b {
  height: 22px; border-radius: 5px; background: var(--permukaan);
  display: grid; place-items: center;
  font: 600 9.5px var(--angka); color: var(--lembut); letter-spacing: .04em;
}
.mini-lembar b { background: var(--aksen); color: #fff; font-size: 11px; }

.mini-centang {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--permukaan); border-radius: 11px; padding: 9px 12px;
  font: 600 13px var(--badan); color: var(--tinta); text-align: left;
}
.mini-centang i {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--aksen-mu); color: var(--aksen);
  font-size: 11px;
}
.mini-centang.sudah { background: var(--aksen); color: #fff; }
.mini-centang.sudah i { background: rgba(255, 255, 255, .25); color: #fff; }

.mini-segel {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin-top: 8px; border: 2px dashed var(--aksen); border-radius: 50%;
  color: var(--aksen); font-size: 24px; font-weight: 800;
}

/* Gerak mengambang pelan — dan berputarnya lencana gulir. Panahnya diputar
   balik dengan laju yang sama supaya selalu menunjuk ke bawah, ke arah yang
   dituju tautannya; membesar/mengempis saat disentuh juga di sini karena
   itu gerakan, bukan warna. */
@media (prefers-reduced-motion: no-preference) {
  .apung > * { animation: kambang 7s ease-in-out infinite alternate; }
  .apung > :nth-child(2) { animation-delay: .9s; }
  .apung > :nth-child(3) { animation: none; }
  .apung > :nth-child(4) { animation-delay: 1.7s; }
  .apung > :nth-child(5) { animation-delay: 2.4s; }
  .lencana-gulir svg { animation: pusar 16s linear infinite; }
  .lencana-gulir .gulir-panah { animation: pusar-balik 16s linear infinite; }
  .lencana-gulir:hover { transform: scale(1.05); }
  .lencana-gulir:active { transform: scale(.96); }
}
@keyframes kambang { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes pusar { to { transform: rotate(360deg); } }
@keyframes pusar-balik { to { transform: rotate(-360deg); } }
/* view-box, bukan fill-box: poros putar baliknya harus persis (60,60) —
   titik yang sama dengan poros putar svg-nya — supaya keduanya saling
   meniadakan sempurna dan panah benar-benar diam menunjuk ke bawah. */
.lencana-gulir .gulir-panah { transform-box: view-box; transform-origin: 50% 50%; }

/* ----------------------------------------------------- ukuran judul (cqw)
   TIDAK ADA nowrap pada judul, dan itu disengaja: Chrome Android punya
   pengaturan "Ukuran teks" yang mengalikan ukuran huruf tanpa menambah lebar
   layar, jadi paksaan sebaris bisa membuat kalimat terpotong. Ukuran huruf
   diambil dari lebar wadahnya sendiri; kalau tak muat, ia membungkus rapi. */
@media (min-width: 900px) {
  .hero-teks { container-type: inline-size; }
  .hero { padding: 140px 0 64px; }
  .hero .kolom { max-width: 1200px; }
}
@supports (width: 1cqw) {
  @media (min-width: 900px) {
    h1 { font-size: min(60px, 7.4cqw); }
  }
}

/* Masuknya isi hero — satu urutan, sekali. */
@media (prefers-reduced-motion: no-preference) {
  .hero-teks > * { animation: naik .7s cubic-bezier(.2, .7, .3, 1) backwards; }
  .hero-teks > :nth-child(1) { animation-delay: .05s; }
  .hero-teks > :nth-child(2) { animation-delay: .13s; }
  .hero-teks > :nth-child(3) { animation-delay: .21s; }
  .hero-teks > :nth-child(4) { animation-delay: .29s; }
  .hero-teks > :nth-child(5) { animation-delay: .37s; }
  .apung { animation: pudar 1.4s ease .3s backwards; }
}
@keyframes naik { from { opacity: 0; transform: translateY(14px); } }
@keyframes pudar { from { opacity: 0; } }

/* ------------------------------------------------------------------ bagian */
.pita { padding: 76px 0; }
.pita.terang { background: var(--permukaan); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }

.judul-bagian { max-width: 34em; margin: 0 0 40px; }
.judul-bagian.tengah { margin: 0 auto 44px; text-align: center; }
.judul-bagian h2 {
  font: 800 clamp(25px, 4vw, 36px)/1.14 var(--judul);
  letter-spacing: -.025em; text-wrap: balance; margin: 0 0 12px; color: var(--tinta);
}
.judul-bagian p { margin: 0; color: var(--lembut); font-size: 16.5px; }
.judul-bagian .tombol { margin-top: 20px; }
.label {
  display: block; font: 700 12px/1 var(--badan); letter-spacing: .13em;
  text-transform: uppercase; color: var(--aksen); margin: 0 0 14px;
}

/* Muncul saat digulir.
   Yang disembunyikan HANYA elemen yang sudah dipasangi kelas `sembunyi` oleh
   JavaScript. Kalau JavaScript gagal dimuat, tidak ada satu pun yang
   tersembunyi dan halaman tetap terbaca utuh. */
[data-muncul] { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
[data-muncul].sembunyi { opacity: 0; transform: translateY(18px); }

/* ------------------------------------------------------------------- duo */
.duo { display: grid; gap: 18px; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; gap: 22px; } }
.duo-kartu {
  border-radius: 26px; padding: 30px 28px 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.duo-kartu:hover { transform: translateY(-4px);
                   box-shadow: 0 26px 50px -34px rgba(10, 60, 50, .55); }
.duo-kartu.mint { background: var(--pastel-1); }
.duo-kartu.hijau { background: var(--duo-hijau); }
.duo-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.duo-kartu h2 {
  font: 800 clamp(21px, 2.6vw, 27px)/1.18 var(--judul);
  letter-spacing: -.02em; margin: 0; color: var(--tinta); text-wrap: balance;
}
.duo-panah {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tinta); color: var(--kertas); font-size: 19px;
}
.duo-kartu p { margin: 0; color: var(--tinta); opacity: .78; font-size: 15px; }
.duo-layar { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.baris-mini {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--permukaan); border-radius: 12px; padding: 12px 14px;
  font-size: 13.5px; color: var(--tinta);
  box-shadow: 0 6px 16px -12px rgba(10, 60, 50, .4);
}
.baris-mini i { font-style: normal; }
.baris-mini b { font-variant-numeric: tabular-nums; color: var(--aksen); }
.baris-mini.redup { opacity: .6; }

/* --------------------------------------------------------------- keluhan */
.keluhan { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 760px) { .keluhan { grid-template-columns: 1fr 1fr; } }
.keluhan li {
  list-style: none; margin: 0; padding: 26px 24px 28px;
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
.keluhan li:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -26px rgba(10, 60, 50, .45); }
.keluhan li:nth-child(1) { background: var(--pastel-1); }
.keluhan li:nth-child(2) { background: var(--pastel-2); }
.keluhan li:nth-child(3) { background: var(--pastel-3); }
.keluhan li:nth-child(4) { background: var(--pastel-4); }
.keluhan b { display: block; font: 700 16px/1.4 var(--badan); margin: 0 0 6px; color: var(--tinta); }
.keluhan p { margin: 0; color: var(--lembut); font-size: 15px; }
.keluhan-nomor {
  display: block; font: 600 12px/1 var(--angka); color: var(--aksen);
  letter-spacing: .08em; margin: 0 0 12px;
}

/* ----------------------------------------------------------------- fitur */
.fitur { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px) { .fitur { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fitur { grid-template-columns: repeat(3, 1fr); } }
.fitur li {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fitur li:hover {
  transform: translateY(-3px); border-color: transparent;
  box-shadow: 0 22px 40px -28px rgba(10, 60, 50, .5);
}
.pita.terang .fitur li { background: var(--kertas); }
.fitur h3 { font: 700 16.5px/1.35 var(--badan); margin: 0; color: var(--tinta); }
.fitur p { margin: 0; color: var(--lembut); font-size: 14.8px; }
.tanda {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--aksen-mu); color: var(--aksen); font-size: 19px; line-height: 1;
  margin: 0 0 4px;
}
.fitur li:nth-child(2) .tanda { background: var(--pastel-2); }
.fitur li:nth-child(3) .tanda { background: var(--pastel-1); }
.fitur li:nth-child(4) .tanda { background: var(--pastel-4); }
.fitur li:nth-child(5) .tanda { background: var(--pastel-3); }

/* ----------------------------------------------------------------- janji */
.janji { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 780px) { .janji { grid-template-columns: 1fr 1fr; gap: 22px 34px; } }
.janji li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.janji .centang {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--aksen); color: #fff; font-size: 14px; line-height: 1; margin-top: 2px;
}
.janji b { display: block; font: 700 15.5px/1.4 var(--badan); margin: 0 0 4px; }
.janji p { margin: 0; color: var(--lembut); font-size: 14.8px; }

/* ----------------------------------------------------------- panel gelap */
.panel-gelap {
  background: radial-gradient(110% 130% at 50% 0%, #10453A 0%, var(--malam-2) 55%, var(--malam) 100%);
  color: #E9F4F2; border-radius: 28px; padding: 64px 26px;
  text-align: center;
}
.panel-gelap h2 {
  font: 800 clamp(26px, 4.2vw, 38px)/1.12 var(--judul); letter-spacing: -.025em;
  text-wrap: balance; margin: 0 auto 14px; max-width: 18ch; color: #F2FAF8;
}
.panel-gelap p { margin: 0 auto 30px; max-width: 52ch; color: #A9C4BF; font-size: 16px; }
.orbit { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.orbit span {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; background: rgba(233, 244, 242, .1);
  border: 1px solid rgba(79, 224, 200, .25);
  color: #6BE8CC; font-size: 20px;
}

/* ----------------------------------------------------------------- angka */
.andalan { display: grid; gap: 26px; text-align: center; }
@media (min-width: 760px) {
  .andalan { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .andalan .andal + .andal { border-left: 1px solid var(--garis); }
}
.andal { display: flex; flex-direction: column; gap: 6px; padding: 8px 18px; }
.andal-angka {
  font: 800 clamp(40px, 6vw, 58px)/1 var(--judul); letter-spacing: -.03em;
  color: var(--aksen); font-variant-numeric: tabular-nums;
}
.andal-ket { color: var(--lembut); font-size: 14.5px; max-width: 24em; margin: 0 auto; }

/* ----------------------------------------------------------------- harga */
.harga-kartu {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: 24px; padding: 32px 26px; max-width: 560px;
  box-shadow: 0 30px 70px -46px rgba(14, 110, 99, .55);
}
/* Coret harga perkenalan: harga normal (sungguhan, berlaku tahun depan)
   dicoret di atas harga yang berlaku sekarang. */
.harga-coret { margin: 0; font-family: var(--judul); font-size: 22px;
               font-weight: 700; color: var(--lembut);
               text-decoration: line-through; }
.promo-catatan { margin: 0 0 8px; font-size: 14px; font-weight: 600;
                 color: var(--aksen); }

.harga-angka {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--judul); font-variant-numeric: tabular-nums;
  margin: 0 0 6px;
}
.harga-angka .rp { font-size: 19px; color: var(--lembut); }
.harga-angka .nilai { font-size: clamp(38px, 8vw, 52px); font-weight: 800;
                      letter-spacing: -.03em; color: var(--tinta); }
.harga-angka .satuan { font-family: var(--badan); font-size: 16px; color: var(--lembut); }
.harga-kartu > p.catatan { margin: 0 0 22px; color: var(--lembut); font-size: 14.5px; }
.harga-daftar { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.harga-daftar li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 15px; }
.harga-daftar li::before { content: "✓"; color: var(--aksen); font-weight: 700; }
.harga-kartu .tombol { width: 100%; }
.harga-kaki { margin: 14px 0 0; font-size: 13.5px; color: var(--lembut); text-align: center; }

.harga-susun { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .harga-susun { grid-template-columns: 1fr 1fr; gap: 46px; } }
.harga-samping p { color: var(--lembut); font-size: 15.5px; }
.harga-samping p:first-child { margin-top: 0; }
.harga-samping strong { color: var(--tinta); }

/* ----------------------------------------------------------------- tanya */
.tanya-susun { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .tanya-susun { grid-template-columns: .85fr 1.15fr; gap: 54px; } }
.tanya-susun .judul-bagian { margin-bottom: 0; }
.tanya { display: grid; gap: 10px; }
.tanya details {
  background: var(--aksen-mu); border-radius: 16px; padding: 2px 20px;
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.tanya details[open] { background: var(--permukaan); border-color: var(--garis); }
.tanya summary {
  cursor: pointer; list-style: none; padding: 16px 34px 16px 0; position: relative;
  font: 700 16px/1.45 var(--badan); color: var(--tinta);
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 22px/1 var(--badan); color: var(--aksen); transition: transform .2s ease;
}
.tanya details[open] summary::after { content: "−"; }
.tanya details p { margin: 0 0 18px; color: var(--lembut); font-size: 15.2px; max-width: 62ch; }

/* ----------------------------------------------------------------- ajakan */
.ajakan {
  background: radial-gradient(110% 130% at 50% 0%, #10453A 0%, var(--malam-2) 55%, var(--malam) 100%);
  color: #E9F4F2; padding: 78px 0; text-align: center;
}
.ajakan h2 {
  font: 800 clamp(27px, 4.6vw, 40px)/1.12 var(--judul); letter-spacing: -.025em;
  text-wrap: balance; margin: 0 auto 14px; max-width: 17ch; color: #F2FAF8;
}
.ajakan p { margin: 0 auto 28px; max-width: 46ch; color: #A9C4BF; font-size: 16.5px; }
.ajakan .hero-aksi { justify-content: center; margin-bottom: 0; }
.ajakan .tombol.utama {
  background: #FFFFFF; color: #0A423A;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5),
              -12px 6px 30px -12px var(--pijar-merah),
              12px 6px 30px -12px var(--pijar-jingga);
}
.ajakan .tombol.sepi {
  border-color: rgba(233, 244, 242, .3); color: #E9F4F2; background: transparent;
}
.ajakan .tombol.sepi:hover { border-color: rgba(233, 244, 242, .6);
                             background: rgba(233, 244, 242, .08); }

/* ------------------------------------------------------------------- kaki */
.kaki {
  background: var(--kertas); color: var(--lembut); padding: 44px 0 38px;
  border-top: 1px solid var(--garis); font-size: 13.5px; overflow: hidden;
}
/* Nama produk raksasa — tanda tangan penutup, seperti desain acuannya. */
.kaki-merek {
  margin: 0 0 18px; text-align: center; white-space: nowrap;
  font: 800 clamp(44px, 10.4vw, 150px)/0.95 var(--judul);
  letter-spacing: -.045em; color: var(--aksen); opacity: .16;
  user-select: none;
}
.kaki-baris { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.kaki a { color: var(--aksen); text-decoration: none; }
.kaki a:hover { color: var(--tinta); }
/* Tautan kaki halaman tetap sasaran sentuh — 44 px, bukan setinggi hurufnya. */
.kaki-tautan { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kaki-tautan a { display: inline-flex; align-items: center; min-height: 44px; }