:root {
  --brand: #2F765E;
  --brand-tua: #1F3B35;
  --brand-muda: #E7F7F3;
  --brand-teks: #ffffff;
  --aksen: #b4380f;
  --aksen-muda: #fdece6;
  --aksen-teks: #ffffff;
  --teks: #1d2723;
  --redup: #56645e;
  --garis: #dfe6e3;
  --latar: #ffffff;
  --latar-lembut: #f4f7f6;
  --pita: #f4f7f6;
  --bayang: 0 1px 2px rgba(16, 40, 32, .06), 0 6px 16px rgba(16, 40, 32, .06);

  --k-tagihan-b: #e6eefb; --k-tagihan-f: #1f4f9c;
  --k-pln-b: #fff1c9;     --k-pln-f: #7d5200;
  --k-pulsa-b: #e1f3ea;   --k-pulsa-f: #2F765E;
  --k-data-b: #eee8fb;    --k-data-f: #5b3aa6;
  --k-ewallet-b: #dff2f5; --k-ewallet-f: #0b6677;
  --k-game-b: #fbe5ed;    --k-game-f: #a3254f;

  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-s: 8px; --r-m: 16px;
  --tinggi-header: 56px;
}
@media (prefers-color-scheme: dark) {
:root {
    --brand: #97D7C8; --brand-tua: #97D7C8; --brand-muda: #14352b; --brand-teks: #1F3B35;
    --aksen: #ff9a73; --aksen-muda: #3a2118; --aksen-teks: #2b0f05;
    --teks: #e8efec; --redup: #a3b2ac; --garis: #2c3a35; --latar: #0f1714; --latar-lembut: #17211d; --pita: #e9f0ed;
    --bayang: 0 0 0 1px rgba(255, 255, 255, .04);
    --k-tagihan-b: #17263f; --k-tagihan-f: #9ec0ff;
    --k-pln-b: #3a2f10;     --k-pln-f: #f2c76a;
    --k-pulsa-b: #14352b;   --k-pulsa-f: #97D7C8;
    --k-data-b: #2a2142;    --k-data-f: #c6b0ff;
    --k-ewallet-b: #11333a; --k-ewallet-f: #7fd6e6;
    --k-game-b: #3d1b28;    --k-game-f: #ff9fbd;
  }
}
.k-tagihan { --kb: var(--k-tagihan-b); --kf: var(--k-tagihan-f); }
.k-pln { --kb: var(--k-pln-b); --kf: var(--k-pln-f); }
.k-pulsa { --kb: var(--k-pulsa-b); --kf: var(--k-pulsa-f); }
.k-data { --kb: var(--k-data-b); --kf: var(--k-data-f); }
.k-ewallet { --kb: var(--k-ewallet-b); --kf: var(--k-ewallet-f); }
.k-game { --kb: var(--k-game-b); --kf: var(--k-game-f); }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tinggi-header) + var(--s4)); }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--teks); background: var(--latar); line-height: 1.5; font-size: var(--t-m);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--brand); text-decoration: none; }
ul { list-style: none; }
.wadah { max-width: 72rem; margin: 0 auto; padding: 0 var(--s4); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
header.situs {
  position: sticky; top: 0; z-index: 50; height: var(--tinggi-header);
  background: color-mix(in srgb, var(--latar) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--garis);
}
header.situs .wadah { height: 100%; display: flex; align-items: center; gap: var(--s2); }
.merek { display: flex; align-items: center; gap: var(--s2); color: var(--teks); font-weight: 700; font-size: var(--t-m); letter-spacing: -0.01em; min-height: 44px; margin-right: auto; }
.merek svg { width: 28px; height: 28px; }
.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-s); cursor: pointer; color: var(--teks); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 24px; height: 24px; }
.menu[open] summary { background: var(--latar-lembut); }
.menu .panel {
  position: fixed; left: 0; right: 0; top: var(--tinggi-header); background: var(--latar);
  border-bottom: 1px solid var(--garis); box-shadow: 0 12px 24px rgba(0,0,0,.12); padding: var(--s1) var(--s4) var(--s3);
  max-height: calc(100vh - var(--tinggi-header)); overflow: auto;
}
.menu .panel a, .menu .panel button.baris {
  display: flex; align-items: center; min-height: 48px; width: 100%; color: var(--teks);
  border: 0; border-bottom: 1px solid var(--garis); background: none; font: inherit; font-size: var(--t-m); text-align: left; cursor: pointer;
}
.menu .panel a:last-child { border-bottom: 0; }
.menu .panel .tegas { color: var(--brand); font-weight: 650; }
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4); border-radius: 999px; font-weight: 650; font-size: var(--t-s);
  border: 1.5px solid transparent; cursor: pointer; font-family: inherit; text-decoration: none;
}
.tombol-utama { background: var(--brand); color: var(--brand-teks); }
.tombol[disabled] { opacity: .7; cursor: not-allowed; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.14) 6px 12px); }
.logo-brand { height: 28px; width: auto; max-width: 88px; object-fit: contain; }
.penutup { background: var(--latar-lembut); border-top: 1px solid var(--garis); padding: var(--s6) 0 calc(var(--s6) + 64px); }
footer.situs { font-size: var(--t-s); color: var(--redup); display: grid; gap: var(--s5); }
footer.situs .nama-usaha { font-size: var(--t-m); font-weight: 700; color: var(--teks); }
footer.situs address { font-style: normal; line-height: 1.5; margin-top: var(--s1); max-width: 46ch; }
footer.situs h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--redup); margin-bottom: var(--s1); }
footer.situs .kisi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
footer.situs a { display: flex; align-items: center; min-height: 44px; color: var(--teks); font-size: var(--t-s); }
footer.situs .kaki { font-size: var(--t-xs); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
@media (min-width: 768px) {
.wadah { padding: 0 var(--s5); }
.penutup { padding-bottom: var(--s6); }
footer.situs { grid-template-columns: 1.4fr 1fr; }
}
.k-tagihan { --g1: #4a7be0; --g2: #1f3f94; }
.k-pln { --g1: #f7be3a; --g2: #c46a00; }
.k-pulsa { --g1: #25b88e; --g2: #2F765E; }
.k-data { --g1: #9a70ee; --g2: #4b2a9a; }
.k-ewallet { --g1: #2cbdd3; --g2: #0b6677; }
.k-game { --g1: #ec5f8a; --g2: #8e1c47; }
:root {
  --krem: #fbf5ea; --blok-hijau: #2F765E; --blok-gelap: #1F3B35;
  --tile-tagihan: #e6eefb; --tile-pln: #fff1c9; --tile-pulsa: #e1f3ea; --tile-data: #eee8fb; --tile-ewallet: #dff2f5; --tile-game: #fbe5ed;
}
@media (prefers-color-scheme: dark) {
:root { --krem: #131b17; --blok-hijau: #1F3B35; --blok-gelap: #152924; }
}
html:has(.kapsul) { scroll-padding-top: calc(var(--tinggi-header) + var(--s4)); }
.tombol-putih { background: #fff; color: #1F3B35; }
.tombol-putih .panah { background: #2F765E; color: #fff; }
.tombol-terang { background: #97D7C8; color: #1F3B35; }
.tombol-terang .panah { background: #1F3B35; color: #97D7C8; }
.tombol-panah { gap: var(--s3); min-height: 52px; padding: 0 var(--s2) 0 var(--s5); font-size: var(--t-m); }
.tombol-panah .panah { width: 36px; height: 36px; border-radius: 50%; background: var(--latar); color: var(--brand-tua); display: grid; place-items: center; }
.tombol-panah .panah svg { width: 18px; height: 18px; }
.penutup { padding-bottom: 96px; background: var(--blok-gelap); border-top: 0; }
.penutup footer.situs, .penutup footer.situs h2 { color: #a3b2ac; }
.penutup footer.situs .nama-usaha, .penutup footer.situs a { color: #e8efec; }
@media (max-width: 1023px) {
footer.situs .kisi > div:nth-child(3) { display: none; }
}
.nav-desktop, .masuk { display: none; }
@media (hover: hover) {
.tombol-utama:hover { background: var(--brand-tua); }
}
@media (min-width: 1024px) {
:root { --tinggi-header: 64px; }
.wadah { max-width: 75rem; padding: 0 var(--s5); }
.menu { display: none; }
.merek { margin-right: 0; }
.nav-desktop { display: flex; align-items: center; gap: var(--s1); margin: 0 auto 0 var(--s5); }
.nav-desktop a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: 999px; color: var(--teks); font-size: var(--t-s); font-weight: 600; }
.nav-desktop a:hover { background: var(--latar-lembut); }
.nav-desktop a[aria-current="page"] { color: var(--brand); background: var(--brand-muda); }
.masuk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); font-size: var(--t-s); font-weight: 650; color: var(--teks); }
.masuk:hover { color: var(--brand); }
footer.situs { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); align-items: start; }
footer.situs .kisi { display: contents; }
footer.situs .kaki { grid-column: 1 / -1; }
footer.situs .hak-merek { grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--redup); max-width: 60rem; }
.penutup { padding-bottom: var(--s6); }
}
.tombol-panah, .tombol-putih, .tombol-terang { transition: background-color .25s, color .25s; }
.tombol-panah .panah { transition: background-color .25s, color .25s, transform .3s; }
.tombol-panah:hover .panah { transform: translateX(3px); }
:root {
  --krem: #fdf5ee; --aksen-h: #e8590c; --aksen-h-tua: #c2410c; --judul-hangat: #1f2a24; --kalimat-hangat: #6b5d55;
  --font-hero: "Plus Jakarta Sans", "Nunito Sans", "Segoe UI Variable Display", "Segoe UI", ui-rounded, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root { --krem: #17120f; --judul-hangat: #f6efe8; --kalimat-hangat: #c9bdb4; }
}
.tombol-panah .panah { background: var(--aksen-h); color: #fff; }
.tombol-putih .panah, .tombol-terang .panah { background: var(--aksen-h); color: #fff; }
@media (prefers-color-scheme: dark) {
:root .hero-b { background: radial-gradient(60% 40% at 80% 78%, rgba(255, 110, 70, .22), transparent 70%), linear-gradient(170deg, #241812, #17120f); }
}
@media (max-width: 1023px) {
body:has(.bilah-app) { padding-bottom: 48px; }
}
:root {
  --merek: #3A9D7A; --mint: #97D7C8; --es: #E7F7F3; --pasir: #C9B8A8; --tinta: #1F3B35;
  --merek-teks: #2F765E; --pasir-teks: #6E5B4B; --tinta-2: #2D524A; --redup-hijau: #3F5B54;

  --brand: var(--merek-teks); --brand-tua: var(--tinta); --brand-muda: var(--es); --brand-teks: #fff;
  --aksen: var(--pasir-teks); --aksen-muda: #F3EDE6; --aksen-teks: #fff;
  --teks: var(--tinta); --redup: #456159; --garis: #CBE3DC; --latar: #fff; --latar-lembut: var(--es); --pita: var(--es);
  --krem: var(--es); --blok-hijau: var(--mint); --blok-gelap: var(--tinta);
  --on-hijau: var(--tinta); --on-hijau-2: var(--tinta-2);
  --judul-hangat: var(--tinta); --kalimat-hangat: var(--redup-hijau); --aksen-h: var(--pasir);
  --k-tagihan-b: #E3EEF3; --k-tagihan-f: #2B5C7A;
  --k-pln-b: #F3EDE6; --k-pln-f: #6E5B4B;
  --k-pulsa-b: #E7F7F3; --k-pulsa-f: #2F765E;
  --k-data-b: #EAF0E4; --k-data-f: #4B6B3A;
  --k-ewallet-b: #DDF1EC; --k-ewallet-f: #1F6B5B;
  --k-game-b: #F1E8E4; --k-game-f: #7A4A3A;
  --tile-tagihan: #DCEAF0; --tile-pln: #F3EAD9; --tile-pulsa: #DDF1EC; --tile-data: #E6EEDC; --tile-ewallet: #D3EFE7; --tile-game: #EFE3DC;
}
@media (prefers-color-scheme: dark) {
:root {
    --brand: #97D7C8; --brand-tua: #97D7C8; --brand-muda: #25443D; --brand-teks: #1F3B35;
    --aksen: #C9B8A8; --aksen-muda: #3A3229; --aksen-teks: #1F3B35;
    --teks: #E7F7F3; --redup: #A9C4BC; --garis: #2F4C45; --latar: #152924; --latar-lembut: #1B332D; --pita: #E7F7F3;
    --krem: #172E29; --blok-hijau: #1F3B35; --blok-gelap: #0F201C;
    --on-hijau: #E7F7F3; --on-hijau-2: #B9D2CA;
    --judul-hangat: #E7F7F3; --kalimat-hangat: #B9D2CA;
    --k-tagihan-b: #1B2F3A; --k-tagihan-f: #A9CBE0; --k-pln-b: #342D25; --k-pln-f: #D9C6AE; --k-pulsa-b: #1F3B35; --k-pulsa-f: #97D7C8;
    --k-data-b: #27341F; --k-data-f: #C4DBA8; --k-ewallet-b: #17352E; --k-ewallet-f: #97D7C8; --k-game-b: #36251F; --k-game-f: #E3BFAE;
  }
}
body { background: var(--latar); }
.tombol-panah .panah, .tombol-putih .panah, .tombol-terang .panah { background: var(--mint); color: var(--tinta); }
.tombol-putih { background: #fff; color: var(--tinta); }
.tombol-putih .panah { background: var(--tinta); color: var(--mint); }
.tombol-terang { background: var(--mint); color: var(--tinta); }
.tombol-terang .panah { background: var(--tinta); color: var(--mint); }
@media (prefers-color-scheme: dark) {
:root .tombol-utama.tombol-panah, :root .blok-krem .tombol-panah { background: var(--mint); color: var(--tinta); border-color: var(--mint); }
:root .tombol-utama.tombol-panah .panah, :root .blok-krem .tombol-panah .panah { background: var(--tinta); color: var(--mint); }
}
@media (prefers-color-scheme: dark) {
:root .hero-b { background: radial-gradient(60% 45% at 78% 80%, rgba(201, 184, 168, .20), transparent 70%), linear-gradient(170deg, #1B332D, #152924); }
}
html:not(.js) .gl-tutup { display: none; }