/* ===========================================================================
   QPOS · qpos.id
   Sistem visual: navy #0A1024 sebagai dasar, emas #E8A93A sebagai aksen tunggal.
   Prinsip: huruf jadi tokoh utama, garis tipis, ruang kosong lega, tanpa hiasan.
   Aturan rumah yang dijaga: titik sentuh minimal 44px, teks minimal 14px.
   =========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-400Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-600SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-800ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --navy: #0a1024;
  --navy-2: #121a36;
  --navy-3: #1b2548;
  --emas: #e8a93a;
  --emas-terang: #f3c46f;

  --bg: #ffffff;
  --abu: #f6f7f9;
  --garis: #e6e8ee;
  --garis-gelap: rgba(255, 255, 255, 0.14);

  --teks: #1a2133;
  --teks-2: #495368;
  --redup: #6c7689;
  --redup-gelap: #a7b0c4;

  --radius: 18px;
  --radius-besar: 26px;
  --pill: 980px;

  --tepi: 20px;   /* jarak tepi layar di HP */
  --irama: 76px;  /* jarak antar bagian di HP */
  --lebar: 1140px;

  color-scheme: light;
}

@media (min-width: 760px) {
  :root { --tepi: 32px; --irama: 118px; }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--teks);
  font: 400 17px/1.68 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
}

p { margin: 0; }

.bungkus {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--tepi);
}
.bungkus-sempit { max-width: 760px; }

.lewat {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 99;
}
.lewat:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------- tombol */

.tombol {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--pill);
  font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tombol:hover { transform: translateY(-1px); }
.tombol:active { transform: translateY(0); }

.tombol-emas { background: var(--emas); color: #2a1d00; }
.tombol-emas:hover { background: var(--emas-terang); }

.tombol-garis { background: transparent; color: var(--teks); border-color: var(--garis); }
.tombol-garis:hover { border-color: var(--navy); }

.tombol-garis-terang { background: transparent; color: #fff; border-color: var(--garis-gelap); }
.tombol-garis-terang:hover { border-color: rgba(255,255,255,.5); }

.tombol-sunyi { background: transparent; color: #fff; border-color: var(--garis-gelap); }
.tombol-sunyi:hover { border-color: rgba(255,255,255,.45); }

.tombol-besar { min-height: 56px; padding: 0 32px; font-size: 17px; }

/* ---------------------------------------------------------------- kepala */

.kepala {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 16, 36, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--garis-gelap);
}
.kepala-isi {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px;
}
.merek { display: flex; align-items: center; flex: 0 0 auto; }
.merek img { height: 30px; width: auto; }

.menu { display: none; gap: 30px; margin-inline: auto; }
.menu a {
  color: var(--redup-gelap); text-decoration: none;
  font-size: 15.5px; font-weight: 600;
  padding: 10px 0;
  transition: color .16s ease;
}
.menu a:hover { color: #fff; }

.kepala-aksi { display: flex; gap: 10px; margin-left: auto; }
.kepala-aksi .tombol { min-height: 42px; padding: 0 18px; font-size: 15px; }
.kepala-aksi .tombol-sunyi { display: none; }

@media (min-width: 900px) {
  .menu { display: flex; }
  .kepala-aksi { margin-left: 0; }
  .kepala-aksi .tombol-sunyi { display: inline-flex; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(232, 169, 58, 0.16), transparent 62%),
    radial-gradient(760px 420px at 6% 104%, rgba(59, 86, 168, 0.22), transparent 60%),
    var(--navy);
  color: #fff;
  padding-block: clamp(64px, 12vw, 128px) clamp(72px, 13vw, 140px);
  text-align: center;
}
.hero-isi { max-width: 880px; }

.kenal {
  display: inline-block;
  font-size: 13.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--emas);
  padding: 7px 16px;
  border: 1px solid rgba(232, 169, 58, 0.34);
  border-radius: var(--pill);
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(2.3rem, 7vw, 4.1rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
}

.utama-teks {
  margin: 24px auto 0;
  max-width: 620px;
  font-size: clamp(1.03rem, 2.3vw, 1.2rem);
  line-height: 1.66;
  color: #cfd6e6;
}

.hero-tombol {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 36px;
}

.janji {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-size: 14.5px; color: var(--redup-gelap);
}
.janji li { display: flex; align-items: center; gap: 8px; }
.janji li::before {
  content: ''; flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emas);
}

/* ---------------------------------------------------------------- bagian */

.bagian { padding-block: var(--irama); }
.bagian-abu { background: var(--abu); }
.bagian-gelap { background: var(--navy); color: #fff; }

.label {
  font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--redup);
  margin-bottom: 16px;
}
.label-emas { color: var(--emas); }

.bagian h2 {
  font-size: clamp(1.72rem, 4.3vw, 2.65rem);
  max-width: 19ch;
}
.bagian-gelap h2, .bungkus-sempit h2 { max-width: 24ch; }

.pengantar {
  margin-top: 20px;
  max-width: 620px;
  font-size: clamp(1rem, 2.1vw, 1.1rem);
  color: var(--teks-2);
}
.bagian-gelap .pengantar { color: #c3cbdd; }

.catatan-kecil {
  margin-top: 36px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--redup);
  max-width: 660px;
}
.bagian-gelap .catatan-kecil { color: var(--redup-gelap); }

/* ---------------------------------------------------------------- kartu tiga */

.kartu-tiga {
  display: grid; gap: 18px;
  margin-top: 44px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .kartu-tiga { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.kartu {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--radius-besar);
  padding: 30px 26px 32px;
  position: relative;
  overflow: hidden;
}
.kartu::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--emas), rgba(232,169,58,0));
}
.kartu h3 { font-size: 1.22rem; }
.kartu > p { margin-top: 12px; color: var(--teks-2); font-size: 15.5px; }
.kartu ul {
  list-style: none; margin: 22px 0 0; padding: 0;
  border-top: 1px solid var(--garis); padding-top: 18px;
  display: grid; gap: 11px;
}
.kartu li {
  font-size: 15px; color: var(--teks);
  padding-left: 24px; position: relative;
}
.kartu li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--emas); border-bottom: 2px solid var(--emas);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- kebocoran */

.bocor {
  display: grid; gap: 1px;
  margin-top: 46px;
  background: var(--garis-gelap);
  border: 1px solid var(--garis-gelap);
  border-radius: var(--radius-besar);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .bocor { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bocor { grid-template-columns: repeat(3, 1fr); } }

.bocor article { background: var(--navy); padding: 30px 26px 32px; }
.bocor .n {
  display: block;
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  color: var(--emas);
  margin-bottom: 14px;
}
.bocor h3 { font-size: 1.1rem; }
.bocor p { margin-top: 10px; font-size: 15px; line-height: 1.64; color: #b9c2d6; }

/* ---------------------------------------------------------------- langkah */

.langkah {
  list-style: none; margin: 46px 0 0; padding: 0;
  display: grid; gap: 18px;
  counter-reset: none;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .langkah { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.langkah li {
  border-top: 2px solid var(--navy);
  padding-top: 24px;
}
.langkah .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: var(--emas);
  font-size: 15px; font-weight: 700;
  margin-bottom: 16px;
}
.langkah h3 { font-size: 1.14rem; }
.langkah p { margin-top: 10px; color: var(--teks-2); font-size: 15.5px; }

/* ---------------------------------------------------------------- fitur */

.fitur {
  display: grid; gap: 1px;
  margin-top: 46px;
  background: var(--garis);
  border: 1px solid var(--garis);
  border-radius: var(--radius-besar);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .fitur { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fitur { grid-template-columns: repeat(3, 1fr); } }

.fitur article { background: #fff; padding: 30px 26px 32px; }
.fitur h3 { font-size: 1.08rem; line-height: 1.3; }
.fitur p { margin-top: 11px; font-size: 15px; line-height: 1.64; color: var(--teks-2); }

/* ---------------------------------------------------------------- harga */

.paket {
  display: grid; gap: 20px;
  margin-top: 46px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .paket { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.kartu-paket {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--radius-besar);
  padding: 32px 28px 34px;
  display: flex; flex-direction: column;
}
.kartu-pilihan {
  border-color: var(--navy);
  box-shadow: 0 18px 44px -26px rgba(10, 16, 36, 0.45);
}
.pita {
  display: inline-block; align-self: flex-start;
  background: var(--navy); color: var(--emas);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 14px; border-radius: var(--pill);
  margin-bottom: 18px;
}
.kartu-paket h3 { font-size: 1.3rem; }
/* Kartu Pro punya pita di atas yang menggeser isinya ke bawah. Saat ketiga kartu
   berjajar, dua kartu lain diberi ruang setinggi pita itu supaya judul paket
   (Gratis, Pro, Bisnis) sejajar. Saat kartu bertumpuk di HP, ruang ini tidak perlu. */
@media (min-width: 900px) {
  .kartu-paket:not(.kartu-pilihan) h3 { margin-top: 49px; }
}
.harga { margin-top: 14px; display: flex; align-items: baseline; gap: 7px; }
.harga b { font-size: clamp(2.1rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
.harga span { font-size: 15px; color: var(--redup); }
.untuk { margin-top: 8px; font-size: 14.5px; color: var(--redup); }
.kartu-paket ul {
  list-style: none; margin: 24px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--garis);
  display: grid; gap: 12px;
  flex: 1;
}
.kartu-paket li {
  font-size: 15px; line-height: 1.5;
  padding-left: 24px; position: relative;
}
.kartu-paket li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--emas); border-bottom: 2px solid var(--emas);
  transform: rotate(-45deg);
}
.kartu-paket .tombol { margin-top: 28px; width: 100%; }

/* ---------------------------------------------------------------- tanya jawab */

.tj {
  border-bottom: 1px solid var(--garis);
}
.tj:first-of-type { border-top: 1px solid var(--garis); margin-top: 44px; }

.tj summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 0;
  font-size: 1.04rem; font-weight: 600; line-height: 1.45;
  min-height: 44px;
}
.tj summary::-webkit-details-marker { display: none; }
.tj summary::after {
  content: ''; flex: 0 0 auto; margin-left: auto; margin-top: 7px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--redup); border-bottom: 2px solid var(--redup);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.tj[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.tj summary:hover { color: var(--navy); }
.tj p {
  padding: 0 44px 26px 0;
  margin-top: -4px;
  color: var(--teks-2); font-size: 15.5px;
}

/* ---------------------------------------------------------------- ajakan akhir */

.ajakan {
  background:
    radial-gradient(760px 400px at 50% -20%, rgba(232, 169, 58, 0.18), transparent 64%),
    var(--navy);
  color: #fff;
  padding-block: clamp(68px, 11vw, 116px);
  text-align: center;
}
.ajakan h2 {
  font-size: clamp(1.72rem, 4.4vw, 2.6rem);
  max-width: 18ch; margin-inline: auto;
}
.ajakan > .bungkus > p {
  margin: 20px auto 0; max-width: 540px;
  color: #c3cbdd; font-size: 1.03rem;
}

/* ---------------------------------------------------------------- kaki */

.kaki { background: var(--navy); color: var(--redup-gelap); }
.kaki-isi {
  display: grid; gap: 40px;
  padding-block: clamp(52px, 8vw, 76px) 44px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .kaki-isi { grid-template-columns: 1.1fr 1fr; gap: 56px; } }

.kaki-merek img { height: 28px; width: auto; }
.kaki-merek p { margin-top: 16px; font-size: 15px; max-width: 30ch; }

.kaki-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.kaki-menu h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.kaki-menu a {
  display: block; padding: 9px 0;
  font-size: 15px; text-decoration: none; color: var(--redup-gelap);
  transition: color .16s ease;
}
.kaki-menu a:hover { color: #fff; }

.kaki-bawah {
  border-top: 1px solid var(--garis-gelap);
  padding-block: 26px 40px;
  display: grid; gap: 14px;
  font-size: 13.5px; line-height: 1.6;
}
/* Baris penutup: satu garis emas pendek, nama PT yang bisa diklik, lalu kota.
   Alamat lengkap & NIB sengaja TIDAK di sini (permintaan Hadi 10 Nov); keduanya
   tetap tercantum di halaman kebijakan privasi & ketentuan yang ditautkan di atas. */
.kaki-pt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  letter-spacing: .01em;
}
.kaki-tanda {
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--emas), rgba(232, 169, 58, 0.25));
  flex: 0 0 auto;
}
.kaki-pt a {
  color: #fff; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(232, 169, 58, 0.45);
  padding-bottom: 1px;
  transition: border-color .16s ease;
}
.kaki-pt a:hover { border-bottom-color: var(--emas); }
.kaki-kota {
  color: #7f89a0;
  padding-left: 11px;
  border-left: 1px solid var(--garis-gelap);
}
.kaki-bawah .hak { color: #7f89a0; }
@media (min-width: 900px) {
  .kaki-bawah { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
}

/* ---------------------------------------------------------------- gerak */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}