/* Landing page RapiDompet (/) — mengikuti gaya landing rapikerja.com (warna, tipografi, kartu, motion). Ikon SVG, tanpa emoji. */
:root { --hijau-tua:#24392A; --hijau:#3C7A4B; --hijau-muda:#6FAE7C; --krem:#EDF4EA; --tinta:#152018; --redup:#5E6E62; --garis:#E1E8DE; --latar:#F7F8F7; --biru:#2E6FA3; --merah:#B83A2E; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; color:var(--tinta); font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow-x:hidden; }
a { color:var(--hijau); text-decoration:none; }
img { max-width:100%; }
.wadah { max-width:1160px; margin:0 auto; padding:0 20px; }
h1, h2, h3 { letter-spacing:-.02em; line-height:1.2; margin:0; }
h2 { font-size:clamp(26px, 3.4vw, 38px); }
.label { display:inline-block; font-size:13px; font-weight:700; color:var(--hijau); background:var(--krem); padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.sub { color:var(--redup); font-size:17px; max-width:640px; margin:12px 0 0; }
.tengah { text-align:center; } .tengah .sub { margin-left:auto; margin-right:auto; }
.kecil { font-size:13px; } .redup { color:var(--redup); }
.tombol { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:14px; font-weight:700; font-size:16px; background:var(--hijau-tua); color:#fff; border:0; cursor:pointer; min-height:48px; font-family:inherit; transition:transform .15s ease, background .2s; }
.tombol:hover { background:#1b2c20; transform:translateY(-2px); }
.tombol:disabled { opacity:.6; cursor:default; transform:none; }
.tombol.garis { background:#fff; color:var(--hijau-tua); border:1px solid var(--garis); }
.tombol.garis:hover { background:var(--latar); }
.tombol.penuh { width:100%; }
.tombol:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid var(--hijau-muda); outline-offset:2px; }

/* navigasi */
header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--garis); transition:box-shadow .2s; }
header.terguling { box-shadow:0 6px 24px rgba(21,32,24,.08); }
header .wadah { display:flex; align-items:center; gap:24px; height:66px; position:relative; }
.logo { display:inline-flex; align-items:center; gap:8px; color:var(--hijau-tua); font-size:20px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.logo b span { color:var(--hijau); }
.logo img { display:block; }
.logo:hover { transform:rotate(-3deg) scale(1.04); }
.logo.kecil { font-size:16px; vertical-align:middle; }
header .logo img { animation:logo-masuk .9s cubic-bezier(.34,1.56,.64,1) .1s both, logo-loncat 5s ease-in-out 2s infinite; }
@keyframes logo-masuk { from { transform:translateY(-60%) scale(.5) rotate(-90deg); opacity:0; } }
@keyframes logo-loncat { 0%,80%,100% { transform:none; } 85% { transform:translateY(-18%) rotate(-8deg); } 90% { transform:none; } 94% { transform:translateY(-8%) rotate(4deg); } }
header nav { display:flex; gap:22px; margin-left:auto; }
header nav a { color:var(--tinta); font-weight:600; font-size:15px; }
header nav a:hover { color:var(--hijau); }
header .aksi { display:flex; gap:10px; align-items:center; }
header .aksi .masuk { font-weight:700; color:var(--hijau-tua); padding:8px 6px; }
header .tombol { padding:10px 16px; min-height:42px; font-size:15px; }
.menu-hp { display:none; background:none; border:1px solid var(--garis); border-radius:10px; padding:7px 9px; cursor:pointer; color:var(--hijau-tua); }
.menu-hp svg { width:20px; height:20px; display:block; }
@media (max-width: 920px) {
  header nav { display:none; position:absolute; top:66px; left:0; right:0; background:#fff; flex-direction:column; gap:0; padding:8px 20px 16px; border-bottom:1px solid var(--garis); }
  header nav.buka { display:flex; } header nav a { padding:12px 0; border-bottom:1px solid var(--garis); }
  .menu-hp { display:block; margin-left:auto; } header .aksi .masuk { display:none; }
}

/* hero */
.hero { background:linear-gradient(180deg, #F2F7F0 0%, #fff 100%); padding:64px 0 48px; overflow:hidden; position:relative; isolation:isolate; }
.hero .wadah { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero .wadah > * { min-width:0; }
.hero h1 { font-size:clamp(34px, 5vw, 56px); }
.hero h1 em { font-style:normal; color:var(--hijau); }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.jaminan { display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--redup); font-size:14px; }
.jaminan span::before { content:"\2713"; color:var(--hijau); font-weight:800; margin-right:6px; }
@media (max-width: 920px) { .hero .wadah { grid-template-columns:1fr; } .hero { padding-top:36px; } }
.orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; }
.orb.a { width:420px; height:420px; background:#BFE3C6; top:-120px; left:-80px; animation:melayang-a 16s ease-in-out infinite; }
.orb.b { width:360px; height:360px; background:#CFE6F5; top:40px; right:-60px; animation:melayang-b 19s ease-in-out infinite; }
.orb.c { width:300px; height:300px; background:#F3E7C2; bottom:-120px; left:35%; animation:melayang-a 22s ease-in-out infinite reverse; opacity:.45; }
@keyframes melayang-a { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(60px,40px) scale(1.12); } }
@keyframes melayang-b { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-50px,60px) scale(.92); } }
.hero h1 .baris { display:block; opacity:0; transform:translateY(18px); animation:naik .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 .baris:nth-child(2) { animation-delay:.15s; }
.hero h1 em { background:linear-gradient(90deg, #2F8F4E, #6FAE7C, #2E6FA3, #2F8F4E); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:naik .7s cubic-bezier(.2,.7,.2,1) .15s forwards, kilau 6s linear 1s infinite; }
@keyframes naik { to { opacity:1; transform:none; } }
@keyframes kilau { to { background-position:300% 0; } }
.hero .sub, .hero .cta, .hero .jaminan, .hero .lencana-ai { opacity:0; animation:naik .7s ease-out forwards; transform:translateY(12px); }
.hero .lencana-ai { animation-delay:.05s; } .hero .sub { animation-delay:.3s; } .hero .cta { animation-delay:.45s; } .hero .jaminan { animation-delay:.6s; }
.lencana-ai { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(90deg, #24392A, #2E6FA3); padding:6px 14px 6px 8px; border-radius:999px; margin-bottom:14px; box-shadow:0 6px 20px rgba(46,111,163,.25); position:relative; overflow:hidden; }
.lencana-ai b { background:#fff; color:#24392A; border-radius:999px; padding:1px 8px; font-size:11px; }
.lencana-ai::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-100%); animation:sapu 3.5s ease-in-out 1.2s infinite; }
@keyframes sapu { 60%,100% { transform:translateX(100%); } }

/* dua tangkapan layar HP asli */
.tiruan { position:relative; height:600px; }
.bingkai-hp { position:absolute; border:8px solid #1d2a21; border-radius:34px; overflow:hidden; background:#1d2a21; box-shadow:0 30px 60px rgba(21,32,24,.22); }
.bingkai-hp img { display:block; width:100%; height:auto; border-radius:26px; }
.bingkai-hp.utama { width:270px; left:8%; top:0; z-index:2; animation:hp-masuk 1s cubic-bezier(.2,.7,.2,1) .2s both, apung 7s ease-in-out 1.2s infinite; }
.bingkai-hp.kedua { width:236px; right:4%; top:70px; z-index:1; transform:rotate(4deg); animation:hp-masuk2 1s cubic-bezier(.2,.7,.2,1) .45s both, apung2 6s ease-in-out 1.5s infinite; }
@keyframes hp-masuk { from { opacity:0; transform:translateY(50px); } }
@keyframes hp-masuk2 { from { opacity:0; transform:translateY(60px) rotate(10deg); } to { transform:rotate(4deg); } }
@keyframes apung { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes apung2 { 0%,100% { transform:rotate(4deg) translateY(0); } 50% { transform:rotate(4deg) translateY(-12px); } }
.tiruan figcaption { position:absolute; left:8%; bottom:0; font-size:12px; color:var(--redup); }
.tag-apung { position:absolute; z-index:3; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--garis); border-radius:14px; padding:8px 12px; font-size:13px; font-weight:700; color:var(--hijau-tua); box-shadow:0 12px 30px rgba(21,32,24,.14); animation:muncul-tag .6s cubic-bezier(.34,1.56,.64,1) both, apung 5s ease-in-out infinite; line-height:1.3; }
.tag-apung i { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-style:normal; background:var(--krem); color:var(--hijau-tua); flex:none; } .tag-apung i svg { width:15px; height:15px; }
.tag-apung small { display:block; font-weight:600; color:var(--redup); font-size:11px; }
.tag-apung.t1 { top:40px; left:-6px; animation-delay:.9s, .9s; } .tag-apung.t2 { top:47%; right:-8px; animation-delay:1.2s, 1.6s; } .tag-apung.t3 { bottom:70px; left:0; animation-delay:1.5s, 2.2s; }
.tag-apung.ai { background:linear-gradient(135deg, #24392A, #2E6FA3); color:#fff; border:0; } .tag-apung.ai i { background:rgba(255,255,255,.18); color:#fff; } .tag-apung.ai small { color:rgba(255,255,255,.8); }
@keyframes muncul-tag { from { opacity:0; transform:scale(.6) translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width: 920px) { .tiruan { height:560px; max-width:480px; margin:0 auto; width:100%; } }
@media (max-width: 480px) {
  .tiruan { height:470px; }
  .bingkai-hp.utama { width:210px; left:2%; } .bingkai-hp.kedua { width:180px; right:0; top:60px; }
  .tag-apung { font-size:11.5px; padding:6px 10px; } .tag-apung small { font-size:10px; }
  .tag-apung.t1 { top:22px; left:0; } .tag-apung.t2 { right:0; top:52%; } .tag-apung.t3 { bottom:46px; }
  .tiruan figcaption { left:2%; }
}

/* pita fitur berjalan */
.pita-berjalan { overflow:hidden; border-top:1px solid var(--garis); border-bottom:1px solid var(--garis); background:#fff; padding:14px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pita-berjalan .isi { display:flex; gap:12px; width:max-content; animation:geser 38s linear infinite; }
.pita-berjalan:hover .isi { animation-play-state:paused; }
.pita-berjalan span { white-space:nowrap; border:1px solid var(--garis); background:var(--latar); padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--hijau-tua); }
.pita-berjalan span.ai { background:linear-gradient(90deg, #24392A, #2E6FA3); color:#fff; border-color:transparent; }
@keyframes geser { to { transform:translateX(-50%); } }

/* umum */
section { padding:84px 0; }
.abu { background:var(--latar); }
.grid { display:grid; gap:18px; }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 920px) { .g3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g2, .g3 { grid-template-columns:1fr; } section { padding:60px 0; } }
.kartu { background:#fff; border:1px solid var(--garis); border-radius:20px; padding:24px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s; }
.kartu h3 { font-size:19px; margin:12px 0 6px; }
.kartu p { color:var(--redup); margin:0; font-size:15px; }
.ikon { width:46px; height:46px; border-radius:14px; background:var(--krem); display:grid; place-items:center; color:var(--hijau-tua); }
.ikon svg { width:24px; height:24px; }
.ikon.merah { background:#F7EAE8; color:var(--merah); }
.kepala { margin-bottom:40px; }

/* AI unggulan */
.ai-unggul { background:radial-gradient(1200px 500px at 10% 0%, #2c4a35 0%, #1b2c20 55%, #142019 100%); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.ai-unggul::before { content:""; position:absolute; z-index:-1; width:600px; height:600px; right:-200px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(46,111,163,.45), transparent 60%); animation:melayang-b 18s ease-in-out infinite; }
.ai-unggul .label { background:rgba(255,255,255,.12); color:#BFE3C6; }
.ai-unggul .sub { color:rgba(255,255,255,.75); }
.ai-unggul .wadah { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.ai-unggul .wadah > * { min-width:0; }
.ai-unggul ul { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.ai-unggul li { display:flex; gap:12px; align-items:flex-start; } .ai-unggul li i { flex-shrink:0; width:32px; height:32px; border-radius:10px; background:rgba(191,227,198,.14); color:#BFE3C6; display:grid; place-items:center; font-style:normal; } .ai-unggul li i svg { width:17px; height:17px; }
.ai-unggul li span { color:rgba(255,255,255,.8); font-size:15px; } .ai-unggul li b { color:#fff; display:block; }
.ai-unggul .tombol { background:#fff; color:var(--hijau-tua); margin-top:26px; }
.ai-unggul .tombol.garis { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.obrolan { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:18px; backdrop-filter:blur(8px); box-shadow:0 30px 80px rgba(0,0,0,.35); min-height:440px; display:flex; flex-direction:column; }
.obrolan .kepala-ai { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:12px; font-weight:700; }
.obrolan .kepala-ai i { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, #6FAE7C, #2E6FA3); font-style:normal; animation:aksen-denyut 3s ease-in-out infinite; }
.obrolan .kepala-ai small { display:block; font-weight:500; color:rgba(255,255,255,.6); font-size:12px; }
@keyframes aksen-denyut { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18) rotate(8deg); } }
.obrolan .daftar-pesan { flex:1; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; overflow:hidden; }
.gelembung { max-width:85%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; animation:muncul-tag .35s ease-out both; }
.gelembung.saya { align-self:flex-end; background:#fff; color:var(--tinta); border-bottom-right-radius:6px; }
.gelembung.ai { align-self:flex-start; background:rgba(255,255,255,.12); border-bottom-left-radius:6px; }
.gelembung.ai .kartu-konfirmasi { margin-top:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px; font-size:13px; }
.gelembung.ai .kartu-konfirmasi .baris { display:flex; justify-content:space-between; gap:10px; color:rgba(255,255,255,.75); }
.gelembung.ai .kartu-konfirmasi .baris span:last-child { color:#fff; font-weight:600; }
.gelembung.ai .kartu-konfirmasi .tb { display:inline-block; margin-top:8px; background:#6FAE7C; color:#14251a; padding:4px 12px; border-radius:8px; font-weight:700; }
.gelembung.ai .kartu-konfirmasi .tb.ok { background:transparent; color:#BFE3C6; padding:4px 0; }
.titik-ketik { display:inline-flex; gap:4px; } .titik-ketik span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.7); animation:ketik 1s infinite; }
.titik-ketik span:nth-child(2) { animation-delay:.15s; } .titik-ketik span:nth-child(3) { animation-delay:.3s; }
@keyframes ketik { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } }
.obrolan .masukan { margin-top:12px; display:flex; gap:8px; align-items:center; background:rgba(255,255,255,.08); border-radius:14px; padding:10px 12px; color:rgba(255,255,255,.55); font-size:14px; min-height:44px; }
.obrolan .masukan .kursor { width:2px; height:18px; background:#BFE3C6; animation:kedip 1s steps(2) infinite; }
@keyframes kedip { to { opacity:0; } }
@media (max-width: 920px) { .ai-unggul .wadah { grid-template-columns:1fr; } }

/* masalah → solusi Rapi AI */
.ms-daftar { display:grid; gap:18px; }
.ms { display:grid; grid-template-columns:1fr 48px 1.15fr; align-items:stretch; background:#fff; border:1px solid var(--garis); border-radius:24px; padding:10px; }
.ms-masalah { padding:18px 18px 18px 16px; }
.ms-masalah h3 { font-size:19px; margin:12px 0 6px; }
.ms-masalah p { color:var(--redup); margin:0; font-size:15px; }
.ms-no { display:inline-block; margin-left:10px; vertical-align:middle; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--merah); }
.ms-masalah .ikon { display:inline-grid; vertical-align:middle; }
.ms-no.hijau { margin:0; color:var(--hijau); background:var(--krem); padding:3px 10px; border-radius:999px; }
.ms-panah { display:grid; place-items:center; color:var(--hijau-muda); }
.ms-panah svg { width:28px; height:28px; }
.ms-solusi { background:var(--latar); border-radius:18px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; }
.ms-solusi .tanya { margin:12px 0 10px auto; max-width:92%; width:fit-content; font-weight:600; color:#fff; background:var(--hijau-tua); font-size:14.5px; border-radius:14px 14px 4px 14px; padding:9px 12px; line-height:1.45; min-height:1.45em; }
.ms-solusi .jawab { margin:0; max-width:96%; width:fit-content; font-size:14.5px; color:var(--tinta); background:#fff; border:1px solid var(--garis); border-radius:14px 14px 14px 4px; padding:10px 12px; line-height:1.5; }
.kartu-konfirmasi { margin-top:8px; border:1px solid var(--garis); border-radius:12px; padding:10px 12px; background:var(--latar); font-size:13px; }
.kartu-konfirmasi .kk-judul { display:block; margin-bottom:4px; }
.kartu-konfirmasi .baris { display:flex; justify-content:space-between; gap:12px; color:var(--redup); }
.kartu-konfirmasi .baris span:last-child { color:var(--tinta); font-weight:600; white-space:nowrap; }
.kartu-konfirmasi .ok { margin-top:6px; display:flex; align-items:center; gap:5px; color:#2F8F4E; font-weight:700; }
.kartu-konfirmasi .ok svg { width:14px; height:14px; }
.kartu-konfirmasi .tb-konfirmasi { display:inline-block; margin-top:8px; background:var(--hijau-tua); color:#fff; border-radius:8px; padding:5px 14px; font-weight:700; font-size:12.5px; transition:transform .15s, opacity .3s; }
.kartu-konfirmasi .tb-konfirmasi.ditekan { transform:scale(.92); opacity:.7; }
.catatan-ms { color:var(--redup); margin-top:24px; }
.catatan-ms b { color:var(--tinta); }
@media (max-width: 820px) { .ms { grid-template-columns:1fr; padding:8px; } .ms-masalah { padding:14px 12px 4px; } .ms-panah { transform:rotate(90deg); height:34px; } }
/* animasi chat di tiap pasangan (aktif hanya dengan JS) */
.ms.siap .tanya.kosong { visibility:hidden; }
.ms.siap .jawab.tunggu { display:none; }
.ms .jawab.masuk { animation:jawab-masuk .45s ease-out both; }
@keyframes jawab-masuk { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
.ms .ketik-ai { display:inline-flex; gap:4px; background:#fff; border:1px solid var(--garis); border-radius:14px 14px 14px 4px; padding:12px 14px; width:fit-content; }
.ms .ketik-ai i { width:7px; height:7px; border-radius:50%; background:var(--hijau); opacity:.5; animation:titik-ai 1s infinite; }
.ms .ketik-ai i:nth-child(2) { animation-delay:.15s; } .ms .ketik-ai i:nth-child(3) { animation-delay:.3s; }
@keyframes titik-ai { 0%, 60%, 100% { transform:none; opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }
.ms .kursor::after { content:"|"; margin-left:1px; animation:kedip .8s steps(1) infinite; }
.ms.siap.main .ms-panah svg { animation:dorong 1.4s ease-in-out 2; }
@keyframes dorong { 50% { transform:translateX(6px); } }

/* cara lama vs baru */
.vs { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
.vs .kartu ul { margin:12px 0 0; padding-left:0; list-style:none; } .vs li { padding:8px 0 8px 30px; position:relative; border-top:1px solid var(--garis); }
.vs li:first-child { border-top:0; }
.vs .lama li::before { content:"\2715"; position:absolute; left:4px; color:var(--merah); font-weight:800; }
.vs .baru { border-color:var(--hijau-muda); box-shadow:0 0 0 3px var(--krem); } .vs .baru li::before { content:"\2713"; position:absolute; left:4px; color:var(--hijau); font-weight:800; }
@media (max-width: 760px) { .vs { grid-template-columns:1fr; } }

/* fitur */
.modul .kartu ul { margin:12px 0 0; padding-left:18px; color:var(--redup); font-size:14.5px; }
.modul .kartu li { margin:3px 0; }
.modul .kartu:hover, .harga .kartu:hover, .langkah .kartu:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(21,32,24,.10); border-color:#cfe0cb; }
.modul .kartu:hover .ikon { animation:aksen-denyut 1s ease-in-out; }
.kartu.ai-kartu { background:linear-gradient(160deg, #24392A, #2E6FA3); color:#fff; border:0; } .kartu.ai-kartu p, .kartu.ai-kartu li { color:rgba(255,255,255,.8); } .kartu.ai-kartu .ikon { background:rgba(255,255,255,.15); color:#fff; }

/* cara kerja */
.langkah { counter-reset:l; }
.langkah .kartu { position:relative; padding-top:56px; }
.langkah .kartu::before { counter-increment:l; content:counter(l); position:absolute; top:20px; left:24px; width:30px; height:30px; border-radius:50%; background:var(--hijau-tua); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; }

/* galeri berjalan + lightbox */
.galeri { overflow:hidden; margin:0 -20px; padding:8px 0 16px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.galeri-jalur { display:flex; gap:16px; width:max-content; animation:galeri-jalan 60s linear infinite; }
.galeri:hover .galeri-jalur, .galeri.jeda .galeri-jalur { animation-play-state:paused; }
@keyframes galeri-jalan { from { transform:translateX(calc(-50% - 8px)); } to { transform:translateX(0); } }
.galeri-item { width:220px; flex:none; border:1px solid var(--garis); background:#fff; border-radius:18px; padding:0; overflow:hidden; cursor:zoom-in; text-align:left; font:inherit; color:inherit; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.galeri-item:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(21,32,24,.14); }
.galeri-item img { display:block; width:100%; height:auto; aspect-ratio:390/600; object-fit:cover; object-position:top; border-bottom:1px solid var(--garis); background:var(--latar); }
.galeri-item span { display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px; font-size:13px; color:var(--redup); line-height:1.4; }
.galeri-item span b { color:var(--tinta); font-size:14.5px; }
@media (max-width: 620px) { .galeri-item { width:180px; } }
.lightbox { border:0; padding:0; background:transparent; max-width:min(1200px, 94vw); max-height:94vh; overflow:visible; }
.lightbox::backdrop { background:rgba(10,16,12,.82); }
.lightbox figure { margin:0; }
.lightbox img { display:block; max-width:100%; max-height:84vh; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.4); margin:0 auto; }
.lightbox figcaption { color:#fff; text-align:center; margin-top:10px; font-size:14px; }
.lightbox figcaption b { margin-right:8px; }
.lb-tutup, .lb-panah { position:fixed; border:0; background:rgba(255,255,255,.14); color:#fff; border-radius:50%; width:46px; height:46px; font-size:28px; line-height:1; cursor:pointer; }
.lb-tutup { top:16px; right:16px; } .lb-panah { top:50%; transform:translateY(-50%); } .lb-panah.kiri { left:16px; } .lb-panah.kanan { right:16px; }
.lb-tutup:hover, .lb-panah:hover { background:rgba(255,255,255,.26); }

/* harga */
.harga .kartu { display:flex; flex-direction:column; }
.harga .kartu.utama { border:2px solid var(--hijau); position:relative; }
.harga .pita { position:absolute; top:-13px; left:24px; background:var(--hijau); color:#fff; font-size:12px; font-weight:800; padding:3px 12px; border-radius:999px; }
.harga .nominal { font-size:36px; font-weight:800; letter-spacing:-.02em; margin:10px 0 0; }
.harga .nominal small { font-size:15px; color:var(--redup); font-weight:600; }
.harga ul { list-style:none; padding:0; margin:16px 0 22px; flex:1; } .harga li { padding:6px 0 6px 26px; position:relative; font-size:15px; }
.harga li::before { content:"\2713"; position:absolute; left:0; color:var(--hijau); font-weight:800; }
.catatan-harga { color:var(--redup); font-size:14px; margin-top:16px; max-width:820px; margin-left:auto; margin-right:auto; }

/* faq */
details { background:#fff; border:1px solid var(--garis); border-radius:16px; padding:0 20px; margin-bottom:10px; }
summary { cursor:pointer; font-weight:700; padding:18px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
summary::-webkit-details-marker { display:none; } summary::after { content:"+"; font-size:22px; line-height:1; color:var(--hijau); }
details[open] summary::after { content:"\2212"; } details p { margin:0 0 18px; color:var(--redup); }

/* ajakan + form beli */
.ajakan { background:var(--hijau-tua); color:#fff; border-radius:28px; padding:56px 40px; position:relative; overflow:hidden; isolation:isolate; }
.ajakan::before, .ajakan::after { content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(40px); opacity:.5; }
.ajakan::before { width:300px; height:300px; background:#3C7A4B; top:-120px; left:-60px; animation:melayang-a 14s ease-in-out infinite; }
.ajakan::after { width:280px; height:280px; background:#2E6FA3; bottom:-140px; right:-40px; animation:melayang-b 16s ease-in-out infinite; }
.ajakan .sub { color:rgba(255,255,255,.78); }
.label.terang { background:rgba(255,255,255,.14); color:#BFE3C6; }
.beli-isi { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.beli-isi > * { min-width:0; }
.poin-beli { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; color:rgba(255,255,255,.88); }
.poin-beli li::before { content:"\2713"; color:#BFE3C6; font-weight:800; margin-right:10px; }
.beli-kartu { color:var(--tinta); padding:28px; box-shadow:0 30px 60px rgba(0,0,0,.25); }
.beli-kartu h3 { margin:0 0 16px; font-size:20px; }
.isian { display:block; margin-bottom:14px; }
.isian > span { display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
.isian small { color:var(--redup); font-weight:400; }
.input { width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--garis); border-radius:12px; background:var(--latar); color:var(--tinta); }
.input:focus { outline:2px solid var(--hijau-muda); outline-offset:1px; background:#fff; }
.jebak { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.setuju { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--redup); margin:4px 0 16px; cursor:pointer; }
.setuju input { margin-top:3px; accent-color:var(--hijau); width:17px; height:17px; flex:none; }
.ringkas-bayar { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:12px; background:var(--krem); margin-bottom:14px; }
.ringkas-bayar b { font-size:18px; color:var(--hijau-tua); }
.beli-kartu .kecil { margin-top:10px; }
.bayar-no { color:var(--redup); font-size:13px; }
.bayar-total { text-align:center; padding:18px; border-radius:16px; background:var(--krem); margin:12px 0 16px; }
.bayar-total .angka-besar { font-size:34px; font-weight:800; color:var(--hijau-tua); letter-spacing:-.02em; margin:2px 0 6px; font-variant-numeric:tabular-nums; }
.bayar-qris { display:block; width:100%; max-width:260px; margin:10px auto; border-radius:12px; border:1px solid var(--garis); background:#fff; }
.bayar-langkah { margin:14px 0; padding-left:20px; color:var(--redup); font-size:14px; display:grid; gap:6px; }
.bayar-langkah b { color:var(--tinta); }
.status-kotak { text-align:center; padding:8px 4px; }
.status-kotak .ikon { margin:0 auto 8px; width:56px; height:56px; border-radius:18px; }
.status-kotak .ikon svg { width:28px; height:28px; }
.status-kotak h3 { margin:6px 0 8px; font-size:21px; }
.status-kotak p { color:var(--redup); }
.tautan-kecil { background:none; border:0; color:var(--redup); text-decoration:underline; font:inherit; font-size:13px; cursor:pointer; margin-top:12px; }
.tombol.kecil { padding:8px 14px; font-size:14px; min-height:38px; border-radius:10px; }
@media (max-width: 920px) { .beli-isi { grid-template-columns:1fr; } .ajakan { padding:40px 22px; } }
@media (max-width: 480px) { .wadah { padding:0 16px; } .galeri { margin:0 -16px; } .beli-kartu { padding:20px; } .hero .cta .tombol { width:100%; } }

footer { border-top:1px solid var(--garis); padding:36px 0 110px; color:var(--redup); font-size:14px; }
footer .wadah { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; }
footer nav { display:flex; gap:18px; flex-wrap:wrap; } footer a { color:var(--redup); } footer nav.legal { flex-basis:100%; font-size:13px; gap:14px; }
.cta-lengket { display:none; position:fixed; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:30; background:var(--hijau-tua); color:#fff; font-weight:700; text-align:center; padding:15px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.25); transition:transform .25s, opacity .25s; }
.cta-lengket.sembunyi { transform:translateY(130%); opacity:0; pointer-events:none; }

.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); background:#152018; color:#fff; padding:11px 16px; border-radius:12px; font-size:14px; opacity:0; pointer-events:none; transition:.25s; z-index:40; max-width:calc(100% - 32px); text-align:center; }
.toast.buka { opacity:1; transform:translateX(-50%); }
.toast.galat { background:#8E2B24; }

/* muncul saat di-scroll (.js-gerak di <html> menandakan JS aktif, jadi tanpa JS konten tetap tampil) */
.js-gerak .muncul { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js-gerak .muncul.terlihat { opacity:1; transform:none; }
.grid > .muncul:nth-child(3n+2) { transition-delay:.08s; } .grid > .muncul:nth-child(3n) { transition-delay:.16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .hero h1 .baris, .hero h1 em, .hero .sub, .hero .cta, .hero .jaminan, .hero .lencana-ai, .muncul, .bingkai-hp, .tag-apung { opacity:1 !important; transform:none !important; }
  .bingkai-hp.kedua { transform:rotate(4deg) !important; }
  .hero h1 em { color:var(--hijau); background:none; }
  .galeri { overflow-x:auto; -webkit-mask-image:none; mask-image:none; } .galeri-jalur { animation:none; }
  .pita-berjalan .isi { animation:none; }
}
/* header & lencana di HP: tidak terlipat */
header .tombol, .lencana-ai b { white-space:nowrap; }
@media (max-width: 480px) {
  header .wadah { gap:12px; }
  header .tombol { padding:8px 12px; min-height:38px; font-size:14px; }
  .logo { font-size:18px; }
  .lencana-ai { font-size:12px; }
}

/* ===== demo hidup: tiruan aplikasi yang "bekerja" (dirender landing.js) ===== */
.tiruan.hidup { height:auto; min-height:600px; display:flex; justify-content:center; align-items:flex-start; padding-top:6px; }
.demo-hp { --k:1; position:relative; width:calc(300px * var(--k) + 16px); height:calc(640px * var(--k) + 16px); border:8px solid #1d2a21; border-radius:38px; overflow:hidden; background:#1d2a21; box-shadow:0 30px 60px rgba(21,32,24,.22); }
.tiruan.hidup .demo-hp { animation:hp-masuk 1s cubic-bezier(.2,.7,.2,1) .2s both; }
.tiruan.hidup figcaption { left:50%; transform:translateX(-50%); bottom:-26px; white-space:nowrap; }
/* HP di kanan, label di sisi kiri (hanya menyentuh tepi HP, tidak menutupi isi chat) */
.tiruan.hidup { justify-content:flex-end; padding-right:24px; }
.tiruan.hidup figcaption { left:auto; right:24px; transform:none; width:316px; text-align:center; }
.tiruan.hidup .tag-apung { max-width:220px; } .tiruan.hidup .tag-apung.t1 { top:70px; left:-36px; right:auto; } .tiruan.hidup .tag-apung.t2 { top:46%; left:-44px; right:auto; } .tiruan.hidup .tag-apung.t3 { bottom:80px; left:-36px; top:auto; }
@media (max-width: 920px) { .tiruan.hidup { justify-content:center; padding-right:0; } .tiruan.hidup figcaption { right:auto; left:50%; transform:translateX(-50%); } .tiruan.hidup .tag-apung { display:none; } }
@media (max-width: 480px) { .demo-hp { --k:.82; } .tiruan.hidup { min-height:560px; } }
.ap { position:absolute; left:0; top:0; width:300px; height:640px; transform:scale(var(--k)); transform-origin:0 0; background:#F5F7F4; color:#1F2A22; font-size:12.5px; line-height:1.4; border-radius:30px; overflow:hidden; text-align:left; }
.ap b { font-weight:700; }
.ap-status { height:30px; display:flex; justify-content:space-between; align-items:center; padding:4px 22px 0; font-size:12px; font-weight:700; }
.ap-status i { display:inline-block; width:16px; height:9px; border:1.5px solid #1F2A22; border-radius:3px; margin-left:4px; position:relative; }
.ap-status i::after { content:""; position:absolute; inset:1.5px; right:4px; background:#1F2A22; border-radius:1px; }
.ap-isi { position:absolute; top:30px; left:0; right:0; bottom:0; padding:8px 14px 90px; overflow:hidden; }
.ap-nav { position:absolute; left:10px; right:10px; bottom:12px; height:56px; border-radius:28px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(0,0,0,.10); display:grid; grid-template-columns:repeat(5, 1fr); align-items:center; z-index:5; }
.ap-nav span { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:9.5px; color:#6B776E; font-weight:600; padding:6px 0; border-radius:20px; transition:background .3s, color .3s; }
.ap-nav span svg { width:18px; height:18px; }
.ap-nav span.aktif { background:#E3EFE0; color:#2E6A3E; }
.ap-nav .plus { width:44px; height:44px; margin:0 auto; border-radius:50%; background:#24392A; color:#fff; padding:0; justify-content:center; }
.ap-nav .plus svg { width:22px; height:22px; }
.ap-kepala { display:flex; justify-content:space-between; align-items:center; margin:2px 0 10px; }
.ap-kepala small { display:block; color:#6B776E; font-size:11px; } .ap-kepala b { font-size:16px; }
.ap-avatar { width:32px; height:32px; border-radius:50%; background:#3C7A4B; color:#fff; display:grid; place-items:center; font-weight:700; }
.ap-saldo { border-radius:18px; padding:14px; color:#fff; background:linear-gradient(135deg, #24392A, #3C7A4B); position:relative; overflow:hidden; }
.ap-saldo::after { content:""; position:absolute; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.07); right:-40px; top:-50px; }
.ap-saldo small { opacity:.8; font-size:11px; }
.ap-saldo .besar { display:block; font-size:24px; font-weight:800; margin:2px 0 10px; font-variant-numeric:tabular-nums; }
.ap-tiga { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.ap-tiga div { background:rgba(255,255,255,.12); border-radius:10px; padding:6px 8px; } .ap-tiga small { display:block; font-size:9.5px; } .ap-tiga b { font-size:12px; }
.ap-aksi { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:10px 0; }
.ap-aksi div { background:#fff; border:1px solid #E1E7DF; border-radius:12px; padding:8px 2px; text-align:center; font-size:10px; font-weight:600; }
.ap-aksi i { display:grid; place-items:center; width:26px; height:26px; margin:0 auto 4px; border-radius:8px; }
.ap-aksi i svg { width:15px; height:15px; }
.ap-judul { display:flex; justify-content:space-between; font-weight:700; font-size:13px; margin:12px 2px 6px; } .ap-judul small { color:#3C7A4B; font-weight:600; }
.ap-dompet { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.ap-dompet div { background:#fff; border:1px solid #E1E7DF; border-radius:12px; padding:8px; transition:box-shadow .3s, border-color .3s; }
.ap-dompet small { display:block; color:#6B776E; font-size:10px; } .ap-dompet b { font-size:12px; font-variant-numeric:tabular-nums; }
.ap-dompet div.sorot { border-color:#6FAE7C; box-shadow:0 0 0 3px #E3EFE0; }
.ap-trx { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #E1E7DF; border-radius:12px; padding:7px 9px; margin-bottom:5px; }
.ap-trx > div { flex:1; min-width:0; } .ap-trx small { display:block; color:#6B776E; font-size:10px; }
.ap-trx .ik { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(194,69,61,.1); color:#C2453D; flex:none; } .ap-trx .ik svg { width:14px; height:14px; }
.ap-trx .ik.hijau { background:rgba(47,143,78,.12); color:#2F8F4E; }
.ap-trx > b { font-size:12px; color:#C2453D; } .ap-trx > b.masuk { color:#2F8F4E; }
.ap-trx.baru { animation:ap-masuk .5s cubic-bezier(.2,.7,.2,1) both; border-color:#6FAE7C; }
@keyframes ap-masuk { from { opacity:0; transform:translateY(-14px) scale(.96); max-height:0; } to { max-height:60px; } }
/* layar Rapi AI */
.ap-ai-kepala { display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; margin:2px 0 8px; }
.ap-logo { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg, #3C7A4B, #6FAE7C); color:#fff; display:grid; place-items:center; font-size:13px; }
.ap-chat { position:absolute; left:14px; right:14px; top:44px; bottom:136px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; overflow:hidden; }
.ap-saya { align-self:flex-end; background:#E3EFE0; border-radius:14px 14px 4px 14px; padding:8px 11px; max-width:82%; animation:ap-pop .3s ease-out both; }
.ap-ai { display:flex; gap:6px; align-items:flex-start; animation:ap-pop .3s ease-out both; }
.ap-ai .ap-logo { width:22px; height:22px; border-radius:7px; font-size:10px; flex:none; }
.ap-ai .badan { flex:1; min-width:0; }
.ap-titik { display:inline-flex; gap:3px; padding:8px 0; } .ap-titik i { width:6px; height:6px; border-radius:50%; background:#6FAE7C; animation:titik-ai 1s infinite; } .ap-titik i:nth-child(2) { animation-delay:.15s; } .ap-titik i:nth-child(3) { animation-delay:.3s; }
@keyframes ap-pop { from { opacity:0; transform:translateY(8px); } }
.ap-usulan { background:#fff; border:1px solid #E1E7DF; border-radius:12px; padding:9px 10px; margin-top:6px; font-size:11.5px; animation:ap-pop .35s ease-out both; }
.ap-usulan .j { font-weight:700; display:flex; gap:5px; align-items:center; margin-bottom:4px; } .ap-usulan .j svg { width:13px; height:13px; color:#3C7A4B; }
.ap-usulan .r { display:flex; justify-content:space-between; color:#6B776E; padding:1px 0; } .ap-usulan .r b { color:#1F2A22; font-weight:600; }
.ap-tombol2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.ap-tombol2 span { text-align:center; border:1px solid #E1E7DF; border-radius:9px; padding:6px; font-weight:700; transition:transform .15s, background .2s; }
.ap-tombol2 span.ok { background:#24392A; color:#fff; border-color:#24392A; }
.ap-tombol2 span.tekan { transform:scale(.9); background:#3C7A4B; }
.ap-tersimpan { color:#2F8F4E; font-weight:700; margin-top:6px; display:flex; gap:4px; align-items:center; animation:ap-pop .3s ease-out both; } .ap-tersimpan svg { width:13px; height:13px; }
.ap-input { position:absolute; left:12px; right:12px; bottom:80px; height:42px; border-radius:21px; background:#fff; border:1px solid #E1E7DF; display:flex; align-items:center; padding:0 6px 0 14px; color:#8A958C; font-size:12px; gap:6px; }
.ap-input .teks { flex:1; color:#1F2A22; white-space:nowrap; overflow:hidden; } .ap-input .teks.kosong { color:#9AA59C; }
.ap-input .kirim { width:30px; height:30px; border-radius:50%; background:#C9D2C8; color:#fff; display:grid; place-items:center; transition:background .2s, transform .15s; } .ap-input .kirim svg { width:15px; height:15px; }
.ap-input .kirim.siap { background:#24392A; } .ap-input .kirim.tekan { transform:scale(.85); }
.ap-bar { margin-top:6px; } .ap-bar .r { display:flex; justify-content:space-between; font-size:11px; margin-top:5px; } .ap-bar .r b { font-weight:600; }
.ap-bar .g { height:7px; background:#EDF4EA; border-radius:6px; overflow:hidden; margin-top:2px; } .ap-bar .g i { display:block; height:100%; width:0; border-radius:6px; background:#C2453D; opacity:.75; transition:width 1s cubic-bezier(.2,.7,.2,1); }
/* lembar mutasi */
.ap-redup { position:absolute; inset:0; background:rgba(20,30,22,.35); opacity:0; transition:opacity .35s; z-index:6; } .ap-redup.buka { opacity:1; }
.ap-lembar { position:absolute; left:0; right:0; bottom:0; height:84%; background:#fff; border-radius:22px 22px 0 0; z-index:7; padding:10px 14px; transform:translateY(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.ap-lembar.buka { transform:none; }
.ap-lembar::before { content:""; display:block; width:36px; height:4px; border-radius:2px; background:#DDE3DB; margin:0 auto 10px; }
.ap-lembar h4 { margin:0 0 8px; font-size:15px; }
.ap-ringkas { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:8px; } .ap-ringkas div { background:#F5F7F4; border-radius:10px; padding:6px 8px; } .ap-ringkas small { display:block; color:#6B776E; font-size:9.5px; } .ap-ringkas b { font-size:12.5px; }
.ap-baca { display:flex; align-items:center; gap:8px; justify-content:center; color:#3C7A4B; font-weight:700; padding:30px 0; }
.ap-mrow { display:flex; align-items:center; gap:7px; border-bottom:1px solid #EEF1EC; padding:6px 0; font-size:11px; animation:ap-pop .3s ease-out both; }
.ap-mrow .cb { width:15px; height:15px; border-radius:4px; background:#3C7A4B; color:#fff; display:grid; place-items:center; flex:none; } .ap-mrow .cb svg { width:11px; height:11px; }
.ap-mrow.dobel { opacity:.55; } .ap-mrow.dobel .cb { background:#fff; border:1.5px solid #C9D2C8; } .ap-mrow.dobel .cb svg { display:none; }
.ap-mrow > div { flex:1; min-width:0; } .ap-mrow small { display:block; color:#6B776E; font-size:9.5px; } .ap-mrow small em { font-style:normal; color:#C2453D; }
.ap-mrow > b { color:#C2453D; font-size:11px; } .ap-mrow > b.masuk { color:#2F8F4E; }
.ap-cocok { margin-top:8px; border:1px solid #E1E7DF; border-radius:10px; padding:8px 10px; font-size:11px; animation:ap-pop .35s ease-out both; } .ap-cocok .r { display:flex; justify-content:space-between; color:#6B776E; } .ap-cocok .r b { color:#1F2A22; }
.ap-cocok .ok { color:#2F8F4E; font-weight:700; margin-top:4px; display:flex; gap:4px; align-items:center; } .ap-cocok .ok svg { width:13px; height:13px; }
/* tabungan */
.ap-hal-judul { font-size:18px; font-weight:800; margin:2px 0 10px; }
.ap-total { background:#fff; border:1px solid #E1E7DF; border-radius:14px; padding:10px 12px; margin-bottom:8px; } .ap-total small { color:#6B776E; font-size:10.5px; } .ap-total b { display:block; font-size:20px; font-variant-numeric:tabular-nums; }
.ap-target { background:#fff; border:1px solid #E1E7DF; border-radius:14px; padding:10px 12px; margin-bottom:7px; }
.ap-target .a { display:flex; align-items:center; gap:8px; } .ap-target .a > div { flex:1; } .ap-target .a small { display:block; color:#6B776E; font-size:10px; } .ap-target .a > b { color:#B7862A; }
.ap-target .ik { width:30px; height:30px; border-radius:9px; background:#FBF3E2; color:#B7862A; display:grid; place-items:center; } .ap-target .ik svg { width:16px; height:16px; }
.ap-target .g { height:7px; background:#F1EDE2; border-radius:6px; overflow:hidden; margin:8px 0 4px; } .ap-target .g i { display:block; height:100%; width:0; background:#D9A441; border-radius:6px; transition:width 1.4s cubic-bezier(.2,.7,.2,1); }
.ap-target .c { display:flex; justify-content:space-between; color:#6B776E; font-size:10px; }
.ap-toast { position:absolute; left:50%; top:40px; transform:translate(-50%, -20px); background:#1F2A22; color:#fff; border-radius:12px; padding:7px 12px; font-size:11.5px; font-weight:600; opacity:0; transition:.3s; z-index:9; white-space:nowrap; }
.ap-toast.buka { opacity:1; transform:translate(-50%, 0); }
.ap-jari { position:absolute; width:26px; height:26px; border-radius:50%; background:rgba(36,57,42,.25); border:2px solid rgba(255,255,255,.9); z-index:10; pointer-events:none; opacity:0; transform:scale(1.4); transition:opacity .2s, transform .2s; }
.ap-jari.tekan { opacity:1; transform:scale(1); }

/* penanda gulir di bawah hero */
.isyarat-gulir { display:flex; flex-direction:column; align-items:center; gap:8px; margin:34px auto 0; color:var(--redup); font-size:13px; font-weight:600; width:max-content; }
.isyarat-gulir .tikus { width:24px; height:38px; border:2px solid #9DB3A2; border-radius:13px; position:relative; }
.isyarat-gulir .tikus i { position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--hijau); animation:roda 1.6s ease-in-out infinite; }
@keyframes roda { 0% { opacity:0; transform:translateY(-3px); } 30% { opacity:1; } 80%, 100% { opacity:0; transform:translateY(12px); } }

/* demo yang mengikuti gulir: HP menempel, langkah di sampingnya */
.demo { padding-bottom:40px; }
.alur { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.alur-hp { position:sticky; top:90px; display:flex; justify-content:center; order:2; }
.alur-langkah { list-style:none; margin:0; padding:0; order:1; }
.langkah-demo { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:20px 0; opacity:.28; transition:opacity .5s; }
.langkah-demo.aktif { opacity:1; }
.langkah-demo .jam { display:inline-block; width:max-content; font-weight:800; font-size:13px; color:#fff; background:var(--hijau-tua); border-radius:999px; padding:3px 10px; }
.langkah-demo h3 { font-size:clamp(24px, 2.6vw, 32px); margin:12px 0 10px; color:var(--hijau-tua); }
.langkah-demo p { color:var(--redup); font-size:17px; max-width:460px; margin:0; } .langkah-demo p b { color:var(--tinta); }
.langkah-demo .tombol { margin-top:22px; width:max-content; }
@media (max-width: 860px) {
  .alur { display:block; }
  .alur-hp { top:72px; z-index:1; }
  .alur-hp .demo-hp { --k:.78; }
  .alur-langkah { position:relative; z-index:2; margin-top:-30vh; }
  .langkah-demo { min-height:85vh; justify-content:flex-end; padding-bottom:6vh; opacity:1; }
}
@media (max-width: 860px) {
  .kartu-langkah { background:rgba(255,255,255,.96); border:1px solid var(--garis); border-radius:18px; padding:16px; box-shadow:0 14px 40px rgba(21,32,24,.14); opacity:.35; transform:translateY(16px); transition:opacity .4s, transform .4s; }
  .langkah-demo.aktif .kartu-langkah { opacity:1; transform:none; }
  .langkah-demo h3 { font-size:21px; margin:8px 0 6px; } .langkah-demo p { font-size:15px; }
}
@media (max-width: 480px) { .alur-hp .demo-hp { --k:.7; } }
@media (prefers-reduced-motion: reduce) { .langkah-demo { opacity:1; } .alur-hp { position:static; } }

/* ===== ajakan beli berulang: Rp99.000 sekali bayar, seumur hidup ===== */
.harga-hero { margin:16px 0 0; font-size:15px; color:var(--redup); opacity:0; animation:naik .7s ease-out .55s forwards; }
.harga-hero b { color:var(--hijau-tua); background:linear-gradient(transparent 60%, #DCEBD8 60%); }
.harga-gelap { margin:14px 0 0; color:#BFE3C6; font-weight:700; font-size:15px; }
.kecil-harga { display:block; margin-top:8px; color:var(--redup); font-size:13.5px; font-weight:600; }
.pita-berjalan span.harga { background:var(--hijau-tua); color:#fff; border-color:transparent; }
.strip-beli { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-top:36px; padding:18px 22px; border-radius:20px; background:#fff; border:2px solid var(--hijau-muda); box-shadow:0 0 0 4px var(--krem); text-align:left; }
.strip-beli b { display:block; font-size:clamp(18px, 2vw, 22px); color:var(--hijau-tua); letter-spacing:-.01em; }
.strip-beli span { display:block; color:var(--redup); font-size:14px; margin-top:2px; }
.strip-beli .tombol { flex:none; }
.ai-unggul .strip-beli { background:rgba(255,255,255,.06); border-color:rgba(191,227,198,.4); box-shadow:none; }
.ai-unggul .strip-beli b { color:#fff; } .ai-unggul .strip-beli span { color:rgba(255,255,255,.7); }
@media (max-width: 620px) { .strip-beli { padding:16px; } .strip-beli .tombol { width:100%; } }
/* tombol beli melayang: di HP selebar layar, di desktop pil di kanan bawah */
.cta-lengket { display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.cta-lengket small { font-weight:600; font-size:12px; opacity:.8; }
@media (min-width: 921px) { .cta-lengket { left:auto; right:24px; bottom:24px; padding:12px 22px; border-radius:16px; } }
@media (prefers-reduced-motion: reduce) { .harga-hero { opacity:1; } }
/* form beli menyala saat dituju tombol beli */
#beliKartu { scroll-margin-top:84px; }
.beli-kartu.sorot-beli { animation:sorot-beli 1.4s ease-out; }
@keyframes sorot-beli { 0% { box-shadow:0 0 0 0 rgba(111,174,124,.9), 0 30px 60px rgba(0,0,0,.25); transform:scale(1); } 25% { transform:scale(1.02); } 100% { box-shadow:0 0 0 22px rgba(111,174,124,0), 0 30px 60px rgba(0,0,0,.25); transform:scale(1); } }

/* ===== hero di HP: layar pertama = hook + contoh nyata (demo bekerja), teks seminim mungkin ===== */
@media (max-width: 920px) {
  .hero { padding:18px 0 28px; }
  .hero .wadah { display:flex; flex-direction:column; gap:0; }
  .hero .wadah > div:first-child { display:contents; }
  .hero .lencana-ai { order:1; align-self:flex-start; margin-bottom:10px; }
  .hero h1 { order:2; font-size:clamp(28px, 8vw, 38px); }
  .hero .sub { display:none; }
  .hero .tiruan.hidup { order:3; min-height:0; margin:14px 0 0; }
  .hero .cta { order:4; margin-top:16px; }
  .hero .harga-hero { order:5; text-align:center; margin-top:10px; }
  .hero .jaminan { order:6; justify-content:center; margin-top:10px; font-size:13px; gap:6px 14px; }
  .hero .tiruan.hidup figcaption { display:none; }
  .isyarat-gulir { margin-top:22px; }
}
@media (max-width: 480px) {
  .hero .demo-hp { --k:.66; }
  .hero .cta { flex-direction:column; gap:8px; }
  .hero .cta .tombol { width:100%; min-height:46px; padding:11px 16px; }
}
@media (max-width: 380px) { .hero .demo-hp { --k:.6; } }
/* harga: satu kartu saja */
.harga-tunggal { max-width:560px; margin:0 auto; }
.harga-tunggal .kartu { padding:32px; }
.harga-tunggal .nominal { font-size:48px; }
.harga-tunggal .tombol { width:100%; }