/* ============================================================================
   Nusantika AI — gaya halaman depan & halaman modul
   Dipakai /situs.html dan /modul.html. Token warna & huruf ada di merek.css.
   ========================================================================== */
/* ---------------------------------------------------------------- dasar -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tf-kanvas); color: var(--tf-tinta); font-family: var(--tf-badan);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wadah { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3, h4 { font-family: var(--tf-tampilan); margin: 0; letter-spacing: -.03em; line-height: 1.02; font-weight: 600; }
h1 { font-size: clamp(38px, 4.4vw, 64px); }
h2 { font-size: clamp(32px, 3.9vw, 52px); letter-spacing: -.028em; line-height: 1.06; }
h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }
.lede { font-size: clamp(17px, 1.45vw, 19.5px); color: var(--tf-batu); max-width: 590px; line-height: 1.6; }
.label { display: inline-flex; align-items: center; gap: 9px; font: 600 12px/1 var(--tf-badan);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tf-abu); }
.titik { width: 7px; height: 7px; border-radius: 50%; background: var(--tf-hijau);
  box-shadow: 0 0 0 3px rgba(9, 248, 117, .2); flex: none; }
.titik.denyut { animation: denyut 2.4s var(--tf-pegas) infinite; }
@keyframes denyut { 50% { box-shadow: 0 0 0 7px rgba(9, 248, 117, 0); } }
.mono { font-family: var(--tf-mono); }
.angka { font-variant-numeric: tabular-nums; }

.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px;
  padding: 0 24px; border-radius: var(--tf-r-pil); font: 600 15px/1 var(--tf-badan); cursor: pointer;
  border: 0; white-space: nowrap; transition: transform .25s var(--tf-pegas), box-shadow .25s, background .2s; }
.tombol:hover { transform: translateY(-2px); }
.tombol:active { transform: translateY(0) scale(.98); }
.tombol.hitam { background: var(--tf-tinta); color: #fff;
  box-shadow: var(--tf-sorot-dalam), 0 10px 26px -8px rgba(0, 0, 0, .45); }
.tombol.garis { background: #fff; color: var(--tf-tinta); box-shadow: inset 0 0 0 1px var(--tf-rambut); }
.tombol.garis:hover { box-shadow: inset 0 0 0 1px var(--tf-tinta); }
.tombol.hijau { background: var(--tf-hijau); color: var(--tf-tinta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 26px -10px rgba(9,248,117,.7); }
.tombol.kecil { height: 40px; padding: 0 16px; font-size: 14px; }
.panah { transition: transform .25s var(--tf-pegas); }
.tombol:hover .panah { transform: translateX(3px); }

.pil { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 99px;
  font: 600 12px/1 var(--tf-badan); letter-spacing: .01em; white-space: nowrap; }
.pil.live { background: var(--tf-hijau-basuh); color: var(--tf-hijau-tinta); }
.pil.segera { background: #F1F2F3; color: var(--tf-abu); }
.pil.gelap { background: rgba(255,255,255,.08); color: #D0D5DB; }

section { position: relative; }
.bagian { padding: clamp(72px, 9vw, 128px) 0; }
.kepala-bagian { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
/* Judul di kiri, pengantar di kanan: mengisi lebar tanpa membuat judul memanjang ke bawah. */
.kepala-bagian.belah { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
/* kolom kanan mulai sejajar dengan judul, bukan dengan label kecil di atasnya */
.kepala-bagian.belah > :last-child { padding-top: 34px; }
.kepala-bagian.belah .lede { font-size: clamp(16px, 1.2vw, 17.5px); }
.kepala-bagian.belah > div:first-child { display: grid; gap: 18px; }
.kepala-bagian.belah .lede, .kepala-bagian.belah .samping { max-width: 540px; }
.kepala-bagian.belah .samping { display: grid; gap: 22px; }
@media (max-width: 900px) { .kepala-bagian.belah { grid-template-columns: 1fr; row-gap: 18px; } .kepala-bagian.belah > :last-child { padding-top: 0; } }
#agen .kepala-modul { margin-bottom: 30px; }
#agen .kepala-modul h3 { font-size: clamp(26px, 2.6vw, 34px); }

.arsir { background-image: var(--tf-arsir); }
.muncul { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--tf-pegas), transform .8s var(--tf-pegas); }
.muncul.ada { opacity: 1; transform: none; }

/* Anak grid boleh menyempit di bawah lebar isinya. Tanpa ini satu baris
   panjang - blok GATE yang white-space:pre, daftar agen - memaksa seluruh
   halaman melebar di ponsel dan sisi kanannya terpotong. */
.hero .wadah > *, .grid-modul > *, .grid-agen > *, .dasbor > *, .dasbor-isi > *, .dua-kolom > *,
.panel, .stat-grid > *, .aman > *, .lisensi-grid > *, .tanya > *, .grid-harga > *, .kepala-bagian { min-width: 0; }

/* "Nusantika" dan "AI" adalah satu merek. Gap flex pada .merek sempat
   menyisipkan jarak di antaranya; jaraknya kini hanya milik ikon. */
.merek { gap: 0 !important; }
.merek img { margin-right: 10px; }

/* -------------------------------------------------------------- navigasi -- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.gulir { border-bottom-color: var(--tf-rambut-halus); }
.nav .wadah { display: flex; align-items: center; gap: 36px; height: 70px; }
.merek { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tf-tampilan);
  font-size: 19px; letter-spacing: -.02em; font-weight: 500; }
.merek b { font-weight: 700; }
.merek img { width: 30px; height: 30px; }
.nav-tautan { display: flex; gap: 28px; font-size: 14.5px; color: var(--tf-batu); }
.nav-tautan a { position: relative; padding: 6px 0; transition: color .2s; }
.nav-tautan a:hover { color: var(--tf-tinta); }
.nav-kanan { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-kanan .masuk { font-size: 14.5px; color: var(--tf-batu); }
.nav-kanan .masuk:hover { color: var(--tf-tinta); }
@media (max-width: 960px) { .nav-tautan, .nav-kanan .masuk { display: none; } }
/* di ponsel tombol demo tetap ada di hero; di bilah atas hanya satu ajakan supaya tidak melebar keluar layar */
@media (max-width: 520px) { .nav .wadah { gap: 16px; } .nav-kanan .tombol.garis { display: none; } }

/* ------------------------------------------------------------------ hero -- */
.hero { padding: clamp(46px, 7vw, 92px) 0 clamp(60px, 7vw, 100px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--tf-arsir);
  -webkit-mask-image: radial-gradient(70% 70% at 78% 40%, #000 25%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 78% 40%, #000 25%, transparent 75%); pointer-events: none; }
.hero .wadah { display: grid; grid-template-columns: 1.02fr .98fr; gap: 30px; align-items: center; position: relative; }
.hero-teks { display: grid; gap: 28px; }
.hero h1 em { font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .08em; height: .2em;
  background: var(--tf-hijau); z-index: -1; border-radius: 2px; transform-origin: left;
  animation: coret 1.1s .45s var(--tf-pegas) both; }
@keyframes coret { from { transform: scaleX(0); } }
.hero-aksi { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-fakta { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--tf-rambut-halus); }
.hero-fakta div { display: grid; gap: 2px; padding-top: 16px; }
.hero-fakta b { font: 600 26px/1 var(--tf-tampilan); letter-spacing: -.02em; }
.hero-fakta span { font-size: 13px; color: var(--tf-abu); }

.panggung { position: relative; aspect-ratio: 1 / .92; }
.panggung svg.iso { width: 100%; height: 100%; overflow: visible; }
.kartu-apung { position: absolute; background: #fff; border-radius: 16px; border: 1px solid var(--tf-rambut-halus);
  box-shadow: var(--tf-bayang); padding: 14px 16px; font-size: 13px; animation: apung 7s ease-in-out infinite; }
.kartu-apung .kecil { font-size: 11.5px; color: var(--tf-abu); letter-spacing: .02em; }
@keyframes apung { 50% { transform: translateY(-9px); } }
.ka-saldo { top: 4%; left: -2%; width: 232px; }
.ka-saldo .nilai { font: 600 26px/1.1 var(--tf-tampilan); letter-spacing: -.02em; margin: 6px 0 10px; }
.bilah { height: 6px; border-radius: 99px; background: #EEF0F2; overflow: hidden; }
.bilah i { display: block; height: 100%; border-radius: 99px; background: var(--tf-tinta); width: 36%; }
.ka-bukti { right: -1%; top: 30%; width: 240px; animation-delay: -2.2s; }
.ka-bukti ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ka-bukti li { display: flex; align-items: center; gap: 8px; }
.cek { width: 18px; height: 18px; border-radius: 50%; background: var(--tf-hijau); display: grid; place-items: center; flex: none; }
.cek svg { width: 10px; height: 10px; }
.ka-sinyal { left: 6%; bottom: 3%; width: 262px; animation-delay: -4.4s; }
.baris-sinyal { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.kode-sinyal { font: 600 11px/1 var(--tf-mono); background: var(--tf-tinta); color: #fff; padding: 5px 6px; border-radius: 5px; }
@media (max-width: 960px) {
  .hero .wadah { grid-template-columns: 1fr; }
  .panggung { max-width: 560px; margin: 20px auto 0; width: 100%; }
}
@media (max-width: 520px) {
  .ka-bukti, .ka-sinyal { display: none; }
  /* di layar sempit kartu saldo pindah ke pojok kanan bawah - di kiri atas ia menutupi menara AMANAH */
  .ka-saldo { top: auto; left: auto; right: 0; bottom: 2%; width: 210px; }
}

/* ------------------------------------------------------------- pita peran -- */
.pita { border-block: 1px solid var(--tf-rambut-halus); padding: 22px 0; }
.pita .wadah { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pita .label { margin-right: 6px; }
.peran { display: flex; gap: 10px; flex-wrap: wrap; }
.peran span { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); font-size: 14px; color: var(--tf-arang); background: #fff; }

/* ----------------------------------------------------------------- modul -- */
.grid-modul { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.kartu-modul { position: relative; border-radius: var(--tf-r-lg); padding: 26px; display: grid; gap: 18px;
  align-content: start; background: #fff; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus);
  transition: transform .45s var(--tf-pegas), box-shadow .45s var(--tf-pegas); overflow: hidden; }
.kartu-modul:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--tf-rambut), var(--tf-bayang); }
.kartu-modul.utama { background: var(--tf-tinta); color: #fff; box-shadow: none; }
.kartu-modul.utama::before { content: ""; position: absolute; inset: 0; background-image: var(--tf-arsir-gelap); pointer-events: none; }
.kartu-modul .atas { display: flex; justify-content: space-between; align-items: center; position: relative; }
.kartu-modul .ilus { height: 150px; position: relative; }
.kartu-modul .ilus svg { width: 100%; height: 100%; }
.kartu-modul h3 { font-size: 30px; letter-spacing: -.03em; }
.kartu-modul .slogan { font-family: var(--tf-tampilan); font-size: 15.5px; color: var(--tf-abu); margin-top: 6px; }
.kartu-modul.utama .slogan { color: #9FFCC6; }
.kartu-modul .tag { color: var(--tf-batu); font-size: 15px; position: relative; }
.kartu-modul.utama .tag { color: #C9CDD2; }
.agen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.agen li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 10px 0; font-size: 14px;
  border-top: 1px solid var(--tf-rambut-halus); color: var(--tf-arang); }
.kartu-modul.utama .agen li { border-top-color: rgba(255,255,255,.09); color: #E5E7EB; }
.agen li span { font: 500 11.5px/20px var(--tf-mono); color: var(--tf-samar); }
.kartu-modul.utama .agen li span { color: var(--tf-hijau); }
.kartu-modul .kaki { display: flex; gap: 10px; align-items: center; position: relative; margin-top: 4px; }
@media (max-width: 1020px) { .grid-modul { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- amanah -- */
.gelap { background: #0A0A0A; color: #fff; overflow: hidden; }
.gelap::before { content: ""; position: absolute; inset: 0; background-image: var(--tf-arsir-gelap); pointer-events: none; }
.gelap::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(9,248,117,.13), transparent 70%); pointer-events: none; }
.gelap .wadah { position: relative; z-index: 1; }
.gelap .label { color: #8A8A8A; }
.gelap .lede { color: #ABABAB; }
.tangga { margin: 10px 0 64px; height: clamp(230px, 30vw, 360px); }
.tangga svg { width: 100%; height: 100%; overflow: visible; }
.tangga .iso-balok { opacity: 0; transform: translateY(.35px); transition: opacity .7s var(--tf-pegas), transform .7s var(--tf-pegas);
  transition-delay: var(--tunda, 0ms); }
.tangga.ada .iso-balok { opacity: 1; transform: none; }
.grid-agen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.08);
  border-radius: var(--tf-r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sel-agen { background: #0E0E0D; padding: 28px 24px 30px; display: grid; gap: 14px; align-content: start; }
.sel-agen .no { font: 500 12px var(--tf-mono); color: var(--tf-hijau); letter-spacing: .06em; }
.sel-agen h4 { font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.sel-agen p { color: #9A9EA3; font-size: 14.5px; }
.sel-agen ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.sel-agen li { font-size: 13px; color: #C9CDD2; display: flex; gap: 9px; }
.sel-agen li code { font: 500 11px/18px var(--tf-mono); color: #0A0A0A; background: #D0D5DB; border-radius: 4px;
  padding: 0 5px; height: 18px; flex: none; }
@media (max-width: 1020px) { .grid-agen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-agen { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ konsol -- */
.bingkai { border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus), var(--tf-bayang-besar); overflow: hidden; }
.bingkai-atas { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--tf-rambut-halus); background: #FAFAF9; }
.bingkai-atas i { width: 10px; height: 10px; border-radius: 50%; background: #E3E5E8; }
.bingkai-atas .alamat { margin-left: 14px; font: 500 12px var(--tf-mono); color: var(--tf-redup); background: #fff;
  height: 26px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); }
.dasbor { display: grid; grid-template-columns: 208px 1fr; min-height: 560px; }
.dasbor-sisi { border-right: 1px solid var(--tf-rambut-halus); padding: 20px 14px; display: grid; gap: 4px; align-content: start; background: #FCFCFB; }
.dasbor-sisi .merek { font-size: 16px; padding: 0 8px 16px; }
.dasbor-sisi .merek img { width: 26px; height: 26px; }
.dasbor-sisi a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; color: var(--tf-batu); }
.dasbor-sisi a.aktif { background: var(--tf-tinta); color: #fff; }
.dasbor-sisi a .bulat { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.dasbor-sisi a.aktif .bulat { background: var(--tf-hijau); opacity: 1; }
.dasbor-isi { padding: 24px; display: grid; gap: 18px; align-content: start; background: #F7F7F5; }
.dasbor-judul { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
.dasbor-judul h4 { font-size: 24px; }
.dasbor-judul p { font-size: 13px; color: var(--tf-abu); }
.seg { display: inline-flex; padding: 3px; background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); }
.seg span { font-size: 12.5px; padding: 6px 12px; border-radius: 7px; color: var(--tf-abu); }
.seg span.on { background: var(--tf-tinta); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: #fff; border-radius: 14px; padding: 16px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); display: grid; gap: 6px; }
.stat .kecil { font-size: 12px; color: var(--tf-abu); }
.stat b { font: 600 26px/1.05 var(--tf-tampilan); letter-spacing: -.02em; }
.stat .ubah { font-size: 12px; color: var(--tf-abu); }
.stat.sorot { background: var(--tf-tinta); color: #fff; box-shadow: none; }
.stat.sorot .kecil, .stat.sorot .ubah { color: #9A9EA3; }
.dua-kolom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.panel { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); padding: 18px; display: grid; gap: 12px; align-content: start; }
.panel-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.panel-kepala h5 { margin: 0; font: 600 14.5px var(--tf-badan); }
.panel-kepala span { font-size: 12px; color: var(--tf-abu); }
.grafik { position: relative; }
.grafik svg { width: 100%; height: 220px; overflow: visible; }
.tip { position: absolute; pointer-events: none; background: var(--tf-tinta); color: #fff; font-size: 12px; padding: 7px 10px;
  border-radius: 8px; white-space: nowrap; transform: translate(-50%, -115%); opacity: 0; transition: opacity .15s; }
.tip.on { opacity: 1; }
.sinyal-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--tf-rambut-halus); font-size: 13px; }
.sinyal-item:first-of-type { border-top: 0; }
.sinyal-item .sub { color: var(--tf-abu); font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; height: 22px; padding: 0 8px; border-radius: 6px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.tinggi { color: var(--tf-kritis); background: #FDECEC; }
.status.sedang { color: var(--tf-waspada); background: #FDF4E3; }
.gate { font: 12.5px/1.65 var(--tf-mono); color: var(--tf-arang); background: #FAFAF9; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); white-space: pre; overflow-x: auto; }
.gate b { color: var(--tf-tinta); }
.gate .h { color: var(--tf-hijau-tinta); }
.gate .w { color: var(--tf-waspada); }
@media (max-width: 1020px) {
  .dasbor { grid-template-columns: 1fr; } .dasbor-sisi { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; } .dua-kolom { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- keamanan -- */
.aman { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.rantai { height: clamp(260px, 32vw, 400px); }
.rantai svg { width: 100%; height: 100%; overflow: visible; }
.daftar-aman { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; }
.daftar-aman li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--tf-rambut-halus); }
.daftar-aman li:last-child { border-bottom: 1px solid var(--tf-rambut-halus); }
.daftar-aman code { font: 600 12px/22px var(--tf-mono); color: var(--tf-tinta); }
.daftar-aman b { font-weight: 600; display: block; margin-bottom: 3px; }
.daftar-aman p { font-size: 14.5px; color: var(--tf-batu); }
@media (max-width: 960px) { .aman { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ harga -- */
.kertas { background: var(--tf-kertas); }
.alih { display: inline-flex; padding: 4px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); }
.alih button { border: 0; background: transparent; height: 38px; padding: 0 18px; border-radius: 99px; font: 600 14px var(--tf-badan); color: var(--tf-abu); cursor: pointer; }
.alih button.on { background: var(--tf-tinta); color: #fff; }
.alih small { color: var(--tf-hijau-tinta); font-weight: 600; margin-left: 4px; }
.alih button.on small { color: var(--tf-hijau); }
.kalkulator { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 30px 0 26px;
  background: #fff; border-radius: 16px; padding: 18px 22px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); }
.kalkulator label { font-size: 14px; color: var(--tf-batu); }
.kalkulator output { font: 600 24px var(--tf-tampilan); min-width: 110px; text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: #ECEEF0; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tf-tinta); border: 4px solid var(--tf-hijau); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--tf-tinta); border: 4px solid var(--tf-hijau); cursor: pointer; }
.grid-harga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paket { background: #fff; border-radius: 20px; padding: 28px; display: grid; gap: 20px; align-content: start;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); position: relative; }
.paket.unggul { background: var(--tf-tinta); color: #fff; box-shadow: var(--tf-bayang-besar); }
.paket.unggul::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--tf-arsir-gelap); pointer-events: none; }
.paket > * { position: relative; }
.paket .nama { display: flex; justify-content: space-between; align-items: center; }
.paket h3 { font-size: 24px; }
.paket .ringkas { font-size: 14.5px; color: var(--tf-batu); min-height: 44px; }
.paket.unggul .ringkas { color: #ABABAB; }
.harga-besar { display: flex; align-items: baseline; gap: 6px; }
.harga-besar b { font: 600 44px/1 var(--tf-tampilan); letter-spacing: -.03em; }
.harga-besar span { font-size: 13.5px; color: var(--tf-abu); }
.paket.unggul .harga-besar span { color: #9A9EA3; }
.perkiraan { font-size: 13.5px; color: var(--tf-batu); padding: 12px 14px; border-radius: 12px; background: var(--tf-kertas); }
.paket.unggul .perkiraan { background: rgba(255,255,255,.06); color: #D0D5DB; }
.perkiraan b { font-family: var(--tf-tampilan); font-size: 17px; color: var(--tf-tinta); }
.paket.unggul .perkiraan b { color: #fff; }
.fitur { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.fitur li { display: flex; gap: 10px; align-items: flex-start; }
.fitur li::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 5px;
  background: var(--tf-hijau-basuh) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='%23047A3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.paket.unggul .fitur li::before { background-color: rgba(9,248,117,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='%2309F875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fitur .pisah { font: 600 11px var(--tf-badan); letter-spacing: .1em; text-transform: uppercase; color: var(--tf-redup); padding-top: 6px; }
.fitur .pisah::before { display: none; }
.catatan-harga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.catatan-harga div { font-size: 13.5px; color: var(--tf-batu); padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); }
.catatan-harga b { display: block; color: var(--tf-tinta); margin-bottom: 4px; font-size: 14px; }
@media (max-width: 1020px) { .grid-harga, .catatan-harga { grid-template-columns: 1fr; } .kalkulator { grid-template-columns: 1fr; } .kalkulator output { text-align: left; } }

/* ---------------------------------------------------------------- lisensi -- */
.lisensi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.rumus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 30px; }
.chip { height: 46px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px var(--tf-mono); box-shadow: inset 0 0 0 1px var(--tf-rambut); background: #fff; }
.chip.modul { background: var(--tf-tinta); color: #fff; box-shadow: none; }
.chip.hasil { background: var(--tf-hijau); color: var(--tf-tinta); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.rumus .op { font: 500 22px var(--tf-tampilan); color: var(--tf-redup); }
.langkah { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.langkah li { counter-increment: l; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--tf-rambut-halus); }
.langkah li::before { content: counter(l, decimal-leading-zero); font: 500 13px/24px var(--tf-mono); color: var(--tf-redup); }
.langkah b { display: block; font-weight: 600; margin-bottom: 2px; }
.langkah p { font-size: 14.5px; color: var(--tf-batu); }
.janji { display: grid; gap: 10px; margin-top: 18px; }
.janji div { display: flex; gap: 12px; font-size: 14.5px; color: var(--tf-batu); }
.janji div::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tf-hijau); transform: rotate(45deg); margin-top: 8px; flex: none; }
@media (max-width: 960px) { .lisensi-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ tanya -- */
.tanya { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
details { border-top: 1px solid var(--tf-rambut-halus); }
details:last-of-type { border-bottom: 1px solid var(--tf-rambut-halus); }
summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 20px;
  font: 600 18px/1.3 var(--tf-tampilan); letter-spacing: -.01em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 24px/1 var(--tf-badan); color: var(--tf-redup); transition: transform .3s var(--tf-pegas); }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 40px 24px 0; color: var(--tf-batu); }
@media (max-width: 960px) { .tanya { grid-template-columns: 1fr; gap: 20px; } }

/* -------------------------------------------------------------------- cta -- */
.cta { text-align: center; }
.cta .wadah { display: grid; gap: 26px; justify-items: center; padding-block: clamp(90px, 11vw, 140px); }
.cta h2 { max-width: 880px; }
.cta .lede { color: #ABABAB; }

.kaki-situs { background: #0A0A0A; color: #8A8A8A; font-size: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.kaki-situs .wadah { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; padding-block: 56px; }
.kaki-situs .merek { color: #fff; }
.kaki-situs h6 { margin: 0 0 14px; color: #fff; font: 600 13px var(--tf-badan); letter-spacing: .02em; }
.kaki-situs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.kaki-situs a:hover { color: #fff; }
.kaki-bawah { border-top: 1px solid rgba(255,255,255,.07); }
.kaki-bawah .wadah { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 20px; grid-template-columns: none; font-size: 13px; }
@media (max-width: 800px) { .kaki-situs .wadah { grid-template-columns: 1fr 1fr; } }

/* ========================================================================
   Lini produk: tiga modul memakai templat yang sama
   ======================================================================== */
.harga-segera > *, .grid-lain > *, .modul-hero .wadah > *, .akses-isian > *, .kepala-modul > * { min-width: 0; }

/* ------------------------------------------------------------ tab modul -- */
.tab-modul { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); margin-bottom: 34px; max-width: 100%; }
.tab-modul button { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 8px; border: 0;
  border-radius: 10px; background: transparent; cursor: pointer; font: 600 14.5px var(--tf-badan); color: var(--tf-batu);
  transition: background .2s, color .2s; }
.tab-modul button img { width: 30px; height: 30px; border-radius: 8px; }
.tab-modul button .pil { height: 20px; font-size: 11px; padding: 0 8px; }
.tab-modul button:hover { color: var(--tf-tinta); }
.tab-modul button.on { background: var(--tf-tinta); color: #fff; }
.tab-modul button.on .pil.segera { background: rgba(255,255,255,.12); color: #D0D5DB; }
.gelap .tab-modul { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.gelap .tab-modul button { color: #9A9EA3; }
.gelap .tab-modul button:hover { color: #fff; }
.gelap .tab-modul button.on { background: #fff; color: var(--tf-tinta); }
.gelap .tab-modul button.on .pil.segera { background: #F1F2F3; color: var(--tf-abu); }
.gelap .tab-modul button .pil.segera { background: rgba(255,255,255,.08); color: #9A9EA3; }
@media (max-width: 600px) {
  .tab-modul { display: grid; grid-template-columns: 1fr; width: 100%; }
  .tab-modul button { justify-content: flex-start; }
}

.isi-modul { animation: gantiModul .55s var(--tf-pegas) both; }
@keyframes gantiModul { from { opacity: 0; transform: translateY(12px); } }

.kepala-modul { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; margin-bottom: 6px; }
.kepala-modul h3 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.03em; line-height: 1.04; margin-top: 16px; }
.kepala-modul p { color: #ABABAB; max-width: 640px; margin-top: 14px; font-size: 16.5px; }
.aksi-modul { display: flex; gap: 10px; flex-wrap: wrap; }
.gelap .aksi-modul .tombol.garis { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.titik.redup { background: #6B6B6B; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
@media (max-width: 860px) { .kepala-modul { grid-template-columns: 1fr; } }

.grid-agen { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tahap-ket { list-style: none; margin: -30px 0 46px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px; counter-reset: t; }
.tahap-ket li { counter-increment: t; font-size: 13px; line-height: 1.45; color: #9A9EA3; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; }
.tahap-ket li::before { content: counter(t, decimal-leading-zero); display: block; font: 500 11.5px var(--tf-mono); color: var(--tf-hijau); margin-bottom: 4px; }
@media (max-width: 900px) { .tahap-ket { grid-template-columns: 1fr 1fr; margin-top: 0; } }

/* -------------------------------------------------------- kartu modul -- */
.kartu-modul .identitas { display: inline-flex; align-items: center; gap: 10px; }
.logo-modul { width: 34px; height: 34px; border-radius: 9px; }
.kartu-modul.utama .logo-modul { box-shadow: 0 0 0 1px rgba(255,255,255,.16); }

/* ------------------------------------------------- pratinjau konsol -- */
.bingkai-atas .pratinjau { margin-left: auto; font: 600 11.5px var(--tf-badan); color: var(--tf-waspada); background: #FDF4E3;
  height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 99px; white-space: nowrap; }
.dasbor-sisi .merek img { border-radius: 7px; }
@media (max-width: 600px) { .bingkai-atas .alamat { display: none; } }

/* ----------------------------------------------------------- akses awal -- */
.akses-awal { background: #fff; border-radius: 20px; padding: 26px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); display: grid; gap: 18px; }
.akses-kepala { display: flex; gap: 14px; align-items: center; }
.akses-kepala img { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.akses-kepala b { font: 600 20px/1.2 var(--tf-tampilan); letter-spacing: -.02em; display: block; }
.akses-kepala small { color: var(--tf-abu); font-size: 14px; }
.akses-isian { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; }
.akses-isian input { height: 50px; border: 0; border-radius: 12px; padding: 0 16px; font: 15px var(--tf-badan); color: var(--tf-tinta);
  background: var(--tf-kertas); box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); outline: none; }
.akses-isian input:focus { box-shadow: inset 0 0 0 1.5px var(--tf-tinta); background: #fff; }
.akses-pesan { font-size: 14px; min-height: 20px; color: var(--tf-abu); }
.akses-pesan.ok { color: var(--tf-hijau-tinta); }
.akses-pesan.galat { color: var(--tf-kritis); }
@media (max-width: 860px) { .akses-isian { grid-template-columns: 1fr; } }

.harga-segera { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: stretch; }
.harga-segera .paket h3 { font-size: 30px; line-height: 1.1; }
.harga-segera .paket p { color: #ABABAB; font-size: 15px; }
@media (max-width: 960px) { .harga-segera { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- rumus -- */
.chip { transition: opacity .18s ease, transform .18s ease; }
.chip.ganti { opacity: 0; transform: translateY(4px); }

/* ----------------------------------------------------------- halaman modul -- */
.nav-tautan a.aktif { color: var(--tf-tinta); font-weight: 600; }
.nav-tautan a.aktif::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tf-hijau); border-radius: 2px; }
.modul-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 6vw, 96px); overflow: hidden; }
.modul-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--tf-arsir);
  -webkit-mask-image: radial-gradient(60% 70% at 80% 45%, #000 25%, transparent 75%);
          mask-image: radial-gradient(60% 70% at 80% 45%, #000 25%, transparent 75%); pointer-events: none; }
.modul-hero .wadah { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; }
.jejak-remah { font-size: 13.5px; color: var(--tf-abu); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jejak-remah a:hover { color: var(--tf-tinta); }
.modul-identitas { display: flex; gap: 14px; align-items: center; }
.modul-identitas img { width: 60px; height: 60px; border-radius: 15px; }
.modul-hero h1 { font-size: clamp(48px, 6.2vw, 84px); }
.slogan-besar { font: 500 clamp(20px, 2.1vw, 27px)/1.2 var(--tf-tampilan); color: var(--tf-abu); letter-spacing: -.02em; margin-top: -12px; }
.panggung-modul { aspect-ratio: 1 / .86; }
.panggung-modul svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 960px) { .modul-hero .wadah { grid-template-columns: 1fr; } .panggung-modul { max-width: 560px; width: 100%; margin: 0 auto; } }

.grid-lain { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kartu-lain { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: #fff; border-radius: 18px;
  padding: 22px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); transition: transform .35s var(--tf-pegas), box-shadow .35s; }
.kartu-lain:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--tf-rambut), var(--tf-bayang); }
.kartu-lain img { width: 52px; height: 52px; border-radius: 13px; }
.kartu-lain b { font: 600 21px/1.2 var(--tf-tampilan); letter-spacing: -.02em; display: block; }
.kartu-lain small { color: var(--tf-abu); font-size: 14px; }
.kartu-lain .panah { font-size: 20px; color: var(--tf-redup); }
@media (max-width: 760px) { .grid-lain { grid-template-columns: 1fr; } }

.paket-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .paket-ringkas { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- pipeline -- */
.pipeline { margin-top: 18px; display: grid; gap: 18px; padding: 22px;
  border-radius: 20px; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); background-color: #FCFCFB; background-image: var(--tf-arsir); }
.pipeline-kepala { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; }
.pipeline-kepala h3 { font-size: 24px; margin-top: 12px; }
.pipeline p { color: var(--tf-abu); font-size: 14.5px; max-width: 520px; }
.pipeline-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.pipeline-item { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-content: start; padding: 14px; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); transition: box-shadow .2s, transform .25s var(--tf-pegas); min-width: 0; }
.pipeline-item:hover { box-shadow: inset 0 0 0 1px var(--tf-tinta); transform: translateY(-2px); }
.pipeline-item img { width: 38px; height: 38px; border-radius: 10px; grid-row: span 2; }
.pipeline-item .atas-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.pipeline-item b { font: 600 15px var(--tf-tampilan); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-item .pil { height: 20px; font-size: 11px; padding: 0 8px; }
.pipeline-item small { color: var(--tf-abu); font-size: 13px; line-height: 1.4; }
.pipeline-item .tag-item { grid-column: 1 / -1; color: var(--tf-batu); font-size: 13.5px; line-height: 1.45; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--tf-rambut-halus); }

/* --------------------------------------------------------- otak agen 3D -- */
.otak-kepala { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.otak-kepala .kepala-bagian { margin-bottom: 0; }
.otak-kepala h2 .aksen { color: var(--tf-hijau-tinta); }
.otak-legenda { display: grid; gap: 10px; font-size: 13.5px; color: var(--tf-batu); }
.otak-legenda > span { display: flex; align-items: center; gap: 10px; }
.otak-legenda small { font-size: 13.5px; color: var(--tf-abu); }
.otak-legenda i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.otak-panggung { position: relative; height: clamp(440px, 56vw, 640px); border-radius: 22px; overflow: hidden; cursor: grab; touch-action: pan-y;
  background: radial-gradient(75% 75% at 50% 44%, #FFFFFF 0%, #FBFBFA 45%, #EFEFEC 100%);
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus), var(--tf-bayang); user-select: none; -webkit-user-select: none; }
.otak-panggung.diseret { cursor: grabbing; }
.otak-panggung canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.otak-catatan { position: absolute; top: 0; left: 0; display: grid; gap: 4px; justify-items: start; max-width: 224px; padding: 10px 13px 11px;
  border-radius: 14px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.06), var(--tf-bayang-kecil); transition: opacity .2s, box-shadow .2s; will-change: transform; }
.otak-catatan.sembunyi { opacity: 0 !important; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.otak-catatan:hover { box-shadow: inset 0 0 0 1px var(--tf-tinta), var(--tf-bayang-kecil); }
.otak-catatan .pil { height: 20px; font-size: 10.5px; padding: 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.otak-catatan b { font: 600 15.5px/1.15 var(--tf-tampilan); letter-spacing: -.01em; }
.otak-catatan.live b { color: var(--tf-hijau-tinta); }
.otak-catatan small { font-size: 12px; line-height: 1.4; color: var(--tf-abu); }
.otak-petunjuk { position: absolute; right: 18px; bottom: 14px; text-align: right; font-size: 12px; line-height: 1.6; color: var(--tf-redup); pointer-events: none; }
/* Mode latar: otak memenuhi seluruh seksi di belakang teks dan miring mengikuti
   kursor. Kanvas tidak menangkap klik; hanya catatan modul yang bisa diklik. */
#otak { overflow: hidden; }
#otak > .wadah { position: relative; z-index: 1; pointer-events: none; }
#otak > .wadah .kepala-bagian { pointer-events: auto; }
.otak-ruang { height: clamp(460px, 54vw, 640px); }
.otak-panggung.latar { position: absolute; inset: 0; height: auto; z-index: 0; border-radius: 0; box-shadow: none; cursor: default; pointer-events: none;
  background: radial-gradient(60% 46% at 50% var(--otak-pusat, 62%), #FFFFFF 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%); }
.otak-panggung.latar canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--otak-mulai, 300px) + 60px));
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--otak-mulai, 300px) + 60px)); }
.otak-panggung.latar .otak-catatan { pointer-events: auto; z-index: 2; }
.otak-panggung.latar .otak-petunjuk { right: max(28px, calc((100% - 1220px) / 2 + 28px)); bottom: 22px; }
@media (max-width: 860px) { .otak-kepala { grid-template-columns: 1fr; } .otak-legenda { grid-auto-flow: column; justify-content: start; gap: 18px; } }
@media (max-width: 560px) {
  .otak-panggung:not(.latar) { height: 400px; border-radius: 18px; }
  .otak-ruang { height: 420px; }
  .otak-catatan { max-width: 150px; padding: 8px 10px; }
  .otak-catatan b { font-size: 14px; }
  .otak-catatan small { font-size: 11px; }
  .otak-petunjuk { display: none; }
  .otak-legenda { grid-auto-flow: row; }
}

/* ------------------------------------------------------ kanvas alur n8n -- */
.alur-tab { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 16px; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); width: fit-content; max-width: 100%; }
.alur-tab button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px; border: 0; border-radius: 10px;
  background: transparent; font: 600 13.5px var(--tf-badan); color: var(--tf-abu); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.alur-tab button:hover { color: var(--tf-tinta); }
.alur-tab button img { width: 26px; height: 26px; border-radius: 7px; }
.alur-tab button.on { background: var(--tf-tinta); color: #fff; }
.status-alur { height: 18px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; font: 600 10.5px/1 var(--tf-badan);
  background: #F1F2F3; color: var(--tf-abu); }
.status-alur.live { background: var(--tf-hijau-basuh); color: var(--tf-hijau-tinta); }
.alur-tab button.on .status-alur { background: rgba(255,255,255,.12); color: #D0D5DB; }
.alur-tab button.on .status-alur.live { background: var(--tf-hijau); color: var(--tf-tinta); }
.alur-bingkai .bingkai-atas { min-width: 0; }
.alur-meta { margin-left: auto; font-size: 12.5px; color: var(--tf-abu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 12px; }
.alur-meta b { color: var(--tf-tinta); font-weight: 600; }
.alur-view { position: relative; height: clamp(360px, 36vw, 440px); overflow: hidden; cursor: grab; touch-action: pan-y; outline: none;
  background-color: #F7F7F5; background-image: radial-gradient(#D5D8DC 1.1px, transparent 1.1px); background-size: 22px 22px;
  user-select: none; -webkit-user-select: none; }
.alur-view:focus-visible { box-shadow: inset 0 0 0 2px var(--tf-tinta); }
.alur-view.diseret { cursor: grabbing; }
.alur-dunia { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.alur-kabel { position: absolute; left: 0; overflow: visible; pointer-events: none; }
.kabel-dasar { fill: none; stroke: var(--tf-tinta); stroke-opacity: .22; stroke-width: 2; }
.kabel-arus { fill: none; stroke: var(--tf-tinta); stroke-opacity: .6; stroke-width: 2; stroke-dasharray: 3 15; stroke-linecap: round; animation: alir 1.1s linear infinite; }
.kabel-ujung { fill: var(--tf-tinta); }
.alur-live .kabel-dasar { stroke: var(--tf-hijau-dalam); stroke-opacity: .35; }
.alur-live .kabel-arus { stroke: var(--tf-hijau-dalam); stroke-opacity: .95; }
.alur-live .kabel-ujung { fill: var(--tf-hijau-dalam); }
@keyframes alir { to { stroke-dashoffset: -18; } }
.alur-simpul { position: absolute; width: 180px; min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 13px;
  background: #fff; border-radius: 12px; border-left: 3px solid var(--tf-tinta);
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus), 0 3px 10px rgba(10,10,10,.05); transition: box-shadow .2s; }
.alur-live .alur-simpul { border-left-color: var(--tf-hijau); }
.alur-simpul.menuju { cursor: pointer; }
.alur-simpul.menuju:hover { box-shadow: inset 0 0 0 1.5px var(--tf-tinta), 0 6px 16px rgba(10,10,10,.1); }
.alur-simpul .lencana { position: absolute; top: -8px; left: 12px; padding: 3px 6px; border-radius: 99px; font: 700 8.5px/1 var(--tf-badan);
  letter-spacing: .07em; text-transform: uppercase; background: var(--tf-tinta); color: #fff; }
.alur-live .alur-simpul .lencana { background: var(--tf-hijau); color: var(--tf-tinta); }
.alur-simpul .ikon { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #F1F2F3; color: var(--tf-tinta); }
.alur-live .alur-simpul .ikon { background: var(--tf-hijau-basuh); color: var(--tf-hijau-tinta); }
.alur-simpul .teks { min-width: 0; display: grid; gap: 2px; }
.alur-simpul .teks b { font: 600 12.5px/1.25 var(--tf-badan); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alur-simpul .teks small { font-size: 10.5px; line-height: 1.3; color: var(--tf-abu); }
.alur-simpul .port { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #C3C8CF; transform: translateY(-50%); }
.alur-simpul .port.masuk { left: -8px; }
.alur-simpul .port.keluar { right: -6px; }
.alur-petunjuk { position: absolute; left: 12px; bottom: 12px; font-size: 12px; color: var(--tf-abu); padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); pointer-events: none; }
.alur-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.alur-zoom button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: #fff; font-size: 16px; color: var(--tf-tinta); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus), 0 2px 6px rgba(10,10,10,.06); }
.alur-zoom button:hover { box-shadow: inset 0 0 0 1px var(--tf-tinta); }
.alur-urut { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
@media (hover: none) { .alur-petunjuk span { display: none; } }
@media (max-width: 600px) {
  .alur-tab { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .alur-tab::-webkit-scrollbar { display: none; }
  .alur-view { height: 380px; }
  .alur-petunjuk { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kabel-arus { animation: none; stroke-opacity: 0; } }

/* ---------------------------------------------------------- konsol menyusul -- */
.konsol-menyusul .menyusul-isi { min-height: 280px; display: grid; place-content: center; gap: 6px; text-align: center; padding: 40px; background-image: var(--tf-arsir); }
.konsol-menyusul b { font: 600 20px var(--tf-tampilan); }
.konsol-menyusul span { color: var(--tf-abu); }

/* --------------------------------------------------------------------- demo -- */
.dialog-demo { border: 0; border-radius: 22px; padding: 30px; width: min(520px, calc(100vw - 32px)); box-shadow: var(--tf-bayang-besar); color: var(--tf-tinta); }
.dialog-demo::backdrop { background: rgba(10,10,10,.45); }
.dialog-demo h3 { font-size: 26px; margin: 10px 0 8px; }
.dialog-demo > p { color: var(--tf-batu); font-size: 15px; }
.dialog-tutup-form { position: absolute; top: 14px; right: 14px; }
.dialog-tutup { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #F1F2F3; font-size: 20px; cursor: pointer; color: var(--tf-batu); }
.form-demo { display: grid; gap: 10px; margin-top: 18px; }
.form-demo input { height: 48px; border: 0; border-radius: 12px; padding: 0 14px; font: 15px var(--tf-badan); color: var(--tf-tinta);
  background: var(--tf-kertas); box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); outline: none; }
.form-demo input:focus { box-shadow: inset 0 0 0 1.5px var(--tf-tinta); background: #fff; }
.form-demo .tombol { margin-top: 6px; }


/* ---------------------------------------------------------------- cerita -- */
.cerita-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.cerita-kiri { position: sticky; top: 108px; display: grid; gap: 22px; justify-items: start; }
.cerita-pembuka { display: grid; gap: 14px; font-size: 17px; line-height: 1.7; color: var(--tf-batu); max-width: 520px; }
.cerita-pembuka p:last-child { color: var(--tf-tinta); font-weight: 500; }
.linimasa { list-style: none; margin: 0; padding: 0; position: relative; display: grid; }
.linimasa::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 150px; width: 2px; background: linear-gradient(var(--tf-rambut), var(--tf-hijau)); }
.linimasa li { position: relative; display: grid; gap: 6px; padding: 0 0 34px 44px; }
.linimasa li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--tf-tinta); }
.linimasa li.selesai::before { background: var(--tf-hijau); box-shadow: 0 0 0 5px rgba(9,248,117,.2); }
.linimasa .waktu { font: 500 12.5px/1.4 var(--tf-mono); color: var(--tf-abu); letter-spacing: .02em; }
.linimasa b { display: block; font: 600 21px/1.25 var(--tf-tampilan); letter-spacing: -.02em; margin-bottom: 6px; }
.linimasa li.selesai b { font-size: 26px; }
.linimasa p { font-size: 15.5px; line-height: 1.65; color: var(--tf-batu); max-width: 540px; }
.linimasa li.cerita-catatan { margin-top: 6px; padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); gap: 4px; }
.linimasa li.cerita-catatan::before { display: none; }
.linimasa li.cerita-catatan b { font-size: 17px; margin: 0; }
@media (max-width: 900px) {
  .cerita-grid { grid-template-columns: 1fr; }
  .cerita-kiri { position: static; }
}
@media (max-width: 520px) { .linimasa li { padding-left: 36px; } .linimasa b { font-size: 19px; } }

/* ---------------------------------------------------- keamanan & lisensi -- */
.percaya-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.percaya-kartu { position: relative; border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; align-content: start;
  background: var(--tf-kertas); box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); overflow: hidden; }
.percaya-kartu h3 { font-size: clamp(22px, 2.2vw, 28px); }
.percaya-kartu > p { color: var(--tf-batu); font-size: 15.5px; line-height: 1.65; }
.percaya-kartu .rantai { height: clamp(170px, 18vw, 230px); margin: -6px 0 6px; }
.percaya-kartu .daftar-aman { margin-top: 4px; }
.percaya-kartu .daftar-aman li { grid-template-columns: 52px 1fr; }
/* Tinggal satu kartu: ilustrasi rantai di kiri, penjelasannya di kanan. */
.percaya-grid:has(> .percaya-kartu:only-child) { grid-template-columns: 1fr; }
.percaya-kartu:only-child { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(28px, 5vw, 72px); align-items: center; }
.percaya-kartu:only-child .rantai { grid-row: 1 / span 3; height: clamp(220px, 24vw, 300px); margin: 0; }
@media (max-width: 960px) {
  .percaya-grid { grid-template-columns: 1fr; }
  .percaya-kartu:only-child { grid-template-columns: 1fr; }
  .percaya-kartu:only-child .rantai { grid-row: auto; height: clamp(170px, 40vw, 230px); }
}

/* ----------------------------------------------------------------- lain-lain -- */
.harga-atas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.harga-lain { margin-top: 22px; font-size: 15px; color: var(--tf-abu); }
.harga-lain a { color: var(--tf-tinta); text-decoration: underline; text-underline-offset: 3px; }
.slogan-redup { color: #8A8A8A; font-weight: 500; }

@media (max-width: 520px) {
  .hero-fakta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hero-fakta b { font-size: 20px; }
  .hero-fakta span { font-size: 12px; line-height: 1.35; }
}

/* ------------------------------------------------------ modul yang berjalan -- */
.kartu-live { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: var(--tf-tinta); color: #fff; overflow: hidden; }
.kartu-live::before { content: ""; position: absolute; inset: 0; background-image: var(--tf-arsir-gelap); pointer-events: none; }
.kartu-live::after { content: ""; position: absolute; right: -10%; bottom: -40%; width: 70%; height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(9, 248, 117, .16), transparent 70%); pointer-events: none; }
.kartu-live > * { position: relative; z-index: 1; }
.kartu-live-teks { display: grid; gap: 22px; align-content: start; }
.kartu-live .atas, .kartu-segera .atas { display: flex; justify-content: space-between; align-items: center; }
.kartu-live .identitas, .kartu-segera .identitas { display: inline-flex; align-items: center; gap: 10px; }
.kartu-live .nomor { font-size: 12px; color: #8A8A8A; }
.kartu-live h3 { font-size: clamp(38px, 4.4vw, 60px); letter-spacing: -.035em; line-height: 1; }
.kartu-live .slogan { font: 500 18px var(--tf-tampilan); color: #9FFCC6; margin-top: 8px; }
.kartu-live .tag { color: #C9CDD2; font-size: 16.5px; line-height: 1.7; max-width: 560px; }
.kartu-live .kaki { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.tombol.garis-terang { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.tombol.garis-terang:hover { box-shadow: inset 0 0 0 1px #fff; }
.kartu-live-sisi { display: grid; gap: 18px; align-content: space-between; }
.kartu-live-sisi .ilus { height: clamp(150px, 16vw, 210px); }
.kartu-live-sisi .ilus svg { width: 100%; height: 100%; }
.kartu-live .agen li { border-top-color: rgba(255, 255, 255, .09); color: #E5E7EB; }
.kartu-live .agen li span { color: var(--tf-hijau); }
@media (max-width: 900px) { .kartu-live { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ modul coming soon -- */
.segera-susun { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.segera-kiri { position: sticky; top: 100px; display: grid; gap: 18px; align-content: start; }
.segera-kiri h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.08; }
.segera-kiri > p { color: var(--tf-batu); font-size: 16px; line-height: 1.7; }
.segera-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.segera-indeks { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--tf-rambut-halus);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.segera-indeks a { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; color: var(--tf-batu); transition: color .2s; }
.segera-indeks a:hover { color: var(--tf-tinta); }
.segera-indeks img { width: 22px; height: 22px; border-radius: 6px; }
.segera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kartu-segera { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--tf-rambut-halus); transition: box-shadow .35s var(--tf-pegas); scroll-margin-top: 100px; }
.kartu-segera:hover { box-shadow: inset 0 0 0 1px var(--tf-rambut), var(--tf-bayang); }
.kartu-segera .nomor { font-size: 12px; color: #ABABAB; }
.kartu-segera .ilus { height: 104px; }
.kartu-segera .ilus svg { width: 100%; height: 100%; }
.kartu-segera h4 { font-size: 24px; letter-spacing: -.025em; }
.kartu-segera .slogan { font: 500 14.5px var(--tf-tampilan); color: var(--tf-abu); margin-top: 4px; }
.kartu-segera .tag { color: var(--tf-batu); font-size: 14.5px; line-height: 1.55; }
.kartu-segera .agen li { padding: 8px 0; font-size: 13px; }
.kartu-segera .kaki { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
@media (max-width: 1020px) { .segera-susun { grid-template-columns: 1fr; } .segera-kiri { position: static; } }
@media (max-width: 640px) { .segera-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ pemilih modul yang ringkas -- */
/* Sepuluh modul tidak muat dalam tombol besar; bentuknya disamakan dengan tab kanvas alur. */
.tab-modul { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; width: fit-content; max-width: 100%; }
.tab-modul button { height: 40px; padding: 0 10px 0 6px; gap: 8px; font-size: 13.5px; border-radius: 10px; flex: none; }
.tab-modul button img { width: 26px; height: 26px; border-radius: 7px; }
.tab-modul button .pil { height: 18px; font-size: 10.5px; padding: 0 6px; }
@media (max-width: 600px) {
  .tab-modul { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .tab-modul::-webkit-scrollbar { display: none; }
}

/* legenda otak untuk banyak modul */
.otak-legenda { grid-template-columns: repeat(2, minmax(0, auto)); column-gap: 28px; row-gap: 8px; justify-content: start; }
@media (max-width: 860px) { .otak-legenda { grid-auto-flow: row; } }
@media (max-width: 420px) { .otak-legenda { grid-template-columns: 1fr; } }