/* =====================================================================
   TokoInstan.id, landing page
   Ditulis tangan, tanpa framework, agar bisa dijalankan langsung oleh
   PHP/Apache di hosting biasa (tanpa Node, tanpa proses build).
   ===================================================================== */

:root {
  /* Warna merek, diambil dari file logo TokoInstan.id */
  --merah:         #AA0000;
  --merah-gelap:   #6E0000;
  --merah-terang:  #C21B1B;
  --merah-lembut:  #FAE0E0;
  --merah-lembut2: #FBF2F2;

  --tinta:        #1F1416;
  --tinta-lembut: #5A6478;
  --garis:        #ECE1E1;
  --putih:        #FFFFFF;

  --hijau-lembut: #E3F6E9;
  --hijau-tinta:  #1E7A45;

  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --bayang:    0 1px 2px rgba(31, 20, 22, .05), 0 8px 24px rgba(31, 20, 22, .05);
  --bayang-kuat: 0 12px 40px rgba(170, 0, 0, .14);

  --lebar-wadah: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--putih);
  color: var(--tinta);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.ikon { flex: none; }
.merah { color: var(--merah); }
.hijau { color: var(--hijau-tinta); }
.tengah { text-align: center; }
.gap-atas-besar { margin-top: 40px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.wadah {
  width: 100%;
  max-width: var(--lebar-wadah);
  margin-inline: auto;
  padding-inline: 20px;
}
.wadah-sempit { max-width: 780px; }

/* --------------------------------------------------------------- Tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 14px 26px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.tombol-kecil { padding: 10px 20px; font-size: 14px; }
.tombol-blok  { display: flex; width: 100%; margin-top: 26px; }

.tombol-utama { background: var(--merah); color: #fff; box-shadow: 0 2px 10px rgba(170,0,0,.18); }
.tombol-utama:hover { background: var(--merah-terang); }

.tombol-garis { background: #fff; color: var(--merah); border-color: rgba(170,0,0,.35); }
.tombol-garis:hover { background: var(--merah-lembut2); border-color: var(--merah); }

.tombol-halus { background: #fff; color: var(--tinta); border-color: var(--garis); }
.tombol-halus:hover { background: var(--merah-lembut2); }

.tombol-putih { background: #fff; color: var(--merah); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.tombol-putih:hover { transform: translateY(-2px); }

/* Tombol sekunder di atas latar merah */
.tombol-transparan { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.tombol-transparan:hover { background: rgba(255,255,255,.12); border-color: #fff; }

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

/* --------------------------------------------------------------- Navbar */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
  transition: box-shadow .2s ease;
}
.navbar.melayang { box-shadow: 0 4px 20px rgba(31,20,22,.07); }

.navbar-isi { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.merek { display: flex; align-items: center; }
.merek-logo { height: 34px; width: auto; }

.navbar-menu { display: none; align-items: center; gap: 28px; }
.navbar-menu a { font-size: 15px; font-weight: 500; color: var(--tinta-lembut); transition: color .15s ease; }
.navbar-menu a:hover { color: var(--merah); }

.navbar-aksi { display: flex; align-items: center; gap: 8px; }

.tombol-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid var(--garis); border-radius: 12px;
  color: var(--tinta); cursor: pointer;
}
.tombol-menu .ikon-tutup { display: none; }
.tombol-menu[aria-expanded="true"] .ikon-buka  { display: none; }
.tombol-menu[aria-expanded="true"] .ikon-tutup { display: block; }

.menu-hp { border-top: 1px solid var(--garis); background: #fff; }
.menu-hp .wadah { display: flex; flex-direction: column; gap: 2px; padding-block: 12px; }
.menu-hp a { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.menu-hp a:hover { background: var(--merah-lembut2); }
.menu-hp-cta { margin-top: 8px; justify-content: center; }

@media (min-width: 900px) {
  .navbar-menu { display: flex; }
  .tombol-menu { display: none; }
  .menu-hp { display: none !important; }
}
@media (max-width: 899px) { .sembunyi-hp { display: none; } }

/* --------------------------------------------------------------- Hero */
.hero {
  background: linear-gradient(180deg, var(--merah-lembut2) 0%, #fff 78%);
  overflow: hidden;
}
.hero-isi {
  display: grid; gap: 44px; align-items: center;
  padding-block: 56px 64px;
}
@media (min-width: 900px) {
  .hero-isi { grid-template-columns: 1.05fr .95fr; padding-block: 84px 96px; }
}

.label-atas {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(170,0,0,.2); background: rgba(255,255,255,.85);
  border-radius: 999px; padding: 7px 15px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--merah);
}
.titik { width: 7px; height: 7px; border-radius: 50%; background: var(--merah); }

.hero-teks h1 {
  margin-top: 22px;
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  font-weight: 800; line-height: 1.05;
}
.hero-uraian {
  margin-top: 20px; max-width: 34em;
  font-size: 17px; color: var(--tinta-lembut);
}
.hero-tombol { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-poin { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.hero-poin li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.bulat-centang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(170,0,0,.1); color: var(--merah);
}

/* Mockup toko */
.hero-mockup { position: relative; padding-bottom: 34px; }
.mockup-laptop {
  border: 1px solid var(--garis); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--bayang-kuat); overflow: hidden;
}
.mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; background: var(--merah-lembut2); border-bottom: 1px solid var(--garis);
}
.mockup-bar > span { width: 9px; height: 9px; border-radius: 50%; background: rgba(170,0,0,.28); }
.mockup-alamat {
  flex: 1; margin-left: 10px; padding: 4px 12px;
  background: #fff; border-radius: 999px;
  font-size: 11px; color: var(--tinta-lembut); text-align: center;
}
.mockup-layar { padding: 16px; }
.mockup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mockup-judul-toko { width: 96px; height: 13px; border-radius: 6px; background: var(--merah); opacity: .85; }
.mockup-nav { display: flex; gap: 7px; }
.mockup-nav i { width: 30px; height: 7px; border-radius: 4px; background: var(--merah-lembut); }
.mockup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mockup-grid img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }

.mockup-hp {
  position: absolute; right: -6px; bottom: 0;
  width: 132px; padding: 8px;
  background: #fff; border: 1px solid var(--garis); border-radius: 22px;
  box-shadow: 0 14px 34px rgba(31,20,22,.16);
}
.mockup-hp-layar { background: var(--merah-lembut2); border-radius: 16px; padding: 8px; }
.mockup-hp-layar img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }
.mockup-baris { height: 7px; border-radius: 4px; background: #fff; margin-top: 8px; }
.mockup-baris.pendek { width: 60%; }
.mockup-tombol {
  margin-top: 10px; padding: 7px; border-radius: 999px;
  background: var(--merah); color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
@media (max-width: 480px) { .mockup-hp { width: 108px; right: -2px; } }

/* --------------------------------------------------------- Strip ekspedisi */
.strip-ekspedisi { border-block: 1px solid var(--garis); background: #fff; padding-block: 34px; }
.strip-judul {
  text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-lembut);
}
.strip-logo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 28px; margin-top: 22px;
}
/* Setiap logo diberi kotak berukuran sama supaya yang kotak (SiCepat, AnterAja)
   tidak tampak jauh lebih kecil daripada yang memanjang (J&T, Lion Parcel).
   Warnanya sengaja penuh, tidak diabukan: kerja sama dengan ekspedisi besar
   adalah bukti kepercayaan, jadi logonya harus langsung terbaca pengunjung. */
.strip-logo img {
  width: 129px; height: 57px; object-fit: contain;
  background: #fff; border: 1px solid var(--garis); border-radius: 12px;
  padding: 4px 6px; box-shadow: 0 1px 3px rgba(31, 20, 22, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.strip-logo img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 20, 22, .12);
  border-color: color-mix(in srgb, var(--merah, #aa0000) 35%, var(--garis));
}
@media (max-width: 640px) {
  .strip-logo { gap: 12px 14px; }
  .strip-logo img { width: 105px; height: 47px; padding: 3px 5px; }
}
.strip-catatan {
  margin-top: 20px; text-align: center; font-size: 14px; color: var(--tinta-lembut);
  max-width: 44em; margin-inline: auto;
}

/* --------------------------------------------------------------- Bagian */
.bagian { padding-block: 68px; }
@media (min-width: 900px) { .bagian { padding-block: 92px; } }
.bagian-lembut { background: var(--merah-lembut2); }
.bagian-gelap  { background: var(--merah-gelap); color: #fff; }

.kepala-bagian { max-width: 640px; margin-inline: auto; text-align: center; }
.kepala-bagian h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; }
.kepala-bagian p { margin-top: 14px; color: var(--tinta-lembut); }
.bagian-gelap .kepala-bagian p { color: rgba(255,255,255,.72); }

.label-bagian {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--merah);
  margin-bottom: 8px;
}

/* --------------------------------------------------------------- Kartu */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; margin-top: 44px; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.kartu {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--bayang);
}
.kartu-besar { padding: 28px; }
.kartu h3 { margin-top: 18px; font-size: 18px; font-weight: 700; }
.kartu p  { margin-top: 8px; font-size: 14.5px; color: var(--tinta-lembut); }

.kotak-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--merah-lembut); color: var(--merah);
}
.kotak-ikon-penuh { width: 54px; height: 54px; border-radius: 17px; background: var(--merah); color: #fff; }

/* Animasi masuk saat digulir (hanya aktif bila JavaScript menyala) */
.js .muncul { opacity: 0; transform: translateY(18px); }
.js .muncul.tampil { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .js .muncul { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- Zigzag */
.zigzag { display: grid; gap: 34px; align-items: center; margin-top: 56px; }
@media (min-width: 900px) {
  .zigzag { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 72px; }
  .zigzag-balik .zigzag-teks   { order: 2; }
  .zigzag-balik .zigzag-visual { order: 1; }
}
.zigzag-teks h3 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); font-weight: 800; }
.zigzag-teks p  { margin-top: 14px; color: var(--tinta-lembut); }

.catatan-kecil { margin-top: 14px; font-size: 13px; color: var(--tinta-lembut); }

.daftar-centang, .daftar-silang { list-style: none; margin-top: 18px; display: grid; gap: 11px; }
.daftar-centang li, .daftar-silang li {
  display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px;
}
.daftar-centang li svg { color: var(--merah); margin-top: 2px; }
.daftar-silang li svg  { color: var(--tinta-lembut); margin-top: 2px; }
.kartu-cocok .daftar-centang li svg { color: var(--hijau-tinta); }

/* Perbandingan alur pencairan dana */
.banding-alur { display: grid; gap: 14px; }
@media (min-width: 520px) { .banding-alur { grid-template-columns: 1fr 1fr; } }
.alur-kotak {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 20px;
}
.alur-kotak ol { list-style: decimal; padding-left: 18px; margin-top: 12px; display: grid; gap: 8px; }
.alur-kotak li { font-size: 13.5px; }
.alur-judul {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-lembut);
}
.alur-baik { background: var(--hijau-lembut); border-color: rgba(30,122,69,.28); }
.alur-baik .alur-judul { color: var(--hijau-tinta); }

/* --------------------------------------------------------------- Kalkulator */
.kalkulator {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius-xl);
  padding: 26px; box-shadow: var(--bayang);
}
.kalkulator h4 { margin-top: 4px; font-size: 20px; font-weight: 800; }
.kalkulator-isian { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 560px) { .kalkulator-isian { grid-template-columns: 1fr 1fr; } }
.kalkulator-isian label { display: block; }
.kalkulator-isian span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.kalkulator-isian input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--garis); border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--tinta); background: #fff;
}
.kalkulator-isian input:focus { outline: none; border-color: var(--merah); box-shadow: 0 0 0 3px rgba(170,0,0,.1); }

.kalkulator-hasil { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 560px) { .kalkulator-hasil { grid-template-columns: 1fr 1fr; } }
.hasil-kotak { background: var(--merah-lembut2); border-radius: var(--radius); padding: 18px; }
.hasil-kotak-merah { background: var(--merah); color: #fff; }
.hasil-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-lembut); }
.hasil-kotak-merah .hasil-label { color: rgba(255,255,255,.8); }
.hasil-angka { margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

.kalkulator-batang {
  margin-top: 22px; padding: 20px;
  border: 1px solid var(--garis); border-radius: var(--radius); background: #fff;
}
.batang-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-lembut); }
.batang-baris { margin-top: 18px; }
.batang-judul { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.batang { height: 14px; margin-top: 8px; border-radius: 999px; background: var(--merah-lembut2); overflow: hidden; }
.batang-isi { height: 100%; width: 0; border-radius: 999px; transition: width .7s cubic-bezier(.22,.61,.36,1); }
.batang-merah { background: var(--merah); }
.batang-hijau { background: var(--hijau-tinta); }

/* --------------------------------------------------------------- Ongkir */
.ongkir-alur {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--merah-lembut2); border-radius: var(--radius); padding: 18px;
}
.ongkir-label { font-size: 12px; color: var(--tinta-lembut); }
.ongkir-angka { font-size: 19px; font-weight: 800; margin-top: 2px; }
.ikon-abu { color: var(--tinta-lembut); }
.ongkir-catatan {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--hijau-lembut); color: var(--hijau-tinta);
  font-size: 13.5px; font-weight: 600;
}
.ongkir-kurir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--garis);
}
.ongkir-kurir img {
  width: 88px; height: 39px; object-fit: contain;
  background: #fff; border: 1px solid var(--garis); border-radius: 10px; padding: 3px 5px;
}

/* --------------------------------------------------------------- Pelanggan */
.pelanggan-judul { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-lembut); }
.pelanggan-daftar { display: grid; gap: 10px; margin-top: 14px; }
.pelanggan-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--merah-lembut2); border-radius: var(--radius); padding: 13px 16px;
}
.pelanggan-nama { font-weight: 700; font-size: 14.5px; }
.pelanggan-info { font-size: 12.5px; color: var(--tinta-lembut); }
.ikon-merah { color: var(--merah); }

/* --------------------------------------------------------------- Cara kerja */
.langkah-grid { margin-top: 52px; }
.kartu-langkah {
  position: relative;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 28px;
}
.kartu-langkah h3 { margin-top: 16px; font-size: 19px; font-weight: 700; }
.kartu-langkah p  { margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.nomor-langkah {
  position: absolute; top: -16px; left: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--merah-gelap); font-size: 15px; font-weight: 800;
}

/* --------------------------------------------------------------- Paket */
.siklus {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: max-content; max-width: 100%; margin: 40px auto 0; padding: 5px;
  background: var(--merah-lembut2); border-radius: 999px;
}
.siklus-tombol {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; padding: 10px 18px;
  background: transparent; color: var(--tinta-lembut);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.siklus-tombol.aktif { background: #fff; color: var(--tinta); box-shadow: var(--bayang); }
.lencana-hemat {
  background: rgba(170,0,0,.1); color: var(--merah); border-radius: 999px;
  padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .03em;
}
.lencana-terbaik { background: var(--merah); color: #fff; }
.siklus-catatan {
  margin-top: 14px; text-align: center;
  font-size: 13px; color: var(--tinta-lembut);
}
@media (max-width: 560px) {
  .siklus { border-radius: var(--radius); }
  .siklus-tombol { padding: 9px 14px; font-size: 13px; }
}

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

.kartu-paket {
  position: relative;
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius-xl);
  padding: 30px 26px; box-shadow: var(--bayang);
  display: flex; flex-direction: column;
}
.kartu-paket.unggulan {
  border: 2px solid var(--merah);
  box-shadow: var(--bayang-kuat);
}
@media (min-width: 900px) { .kartu-paket.unggulan { transform: translateY(-14px); } }

.pita {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--merah); color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.kartu-paket-nama   { font-size: 19px; font-weight: 800; }
.kartu-paket-slogan { margin-top: 4px; font-size: 14px; color: var(--tinta-lembut); }
.kartu-paket-harga  { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.harga-angka  { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.harga-satuan { font-size: 14px; color: var(--tinta-lembut); }

.harga-total { margin-top: 5px; font-size: 13.5px; color: var(--tinta-lembut); }
.harga-hemat {
  display: inline-block; margin-top: 10px;
  background: var(--hijau-lembut); color: var(--hijau-tinta);
  border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 700;
}
.harga-hemat:empty { display: none; }

.kartu-paket-bonus {
  list-style: none; display: grid; gap: 7px;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--garis);
}
.kartu-paket-bonus li { font-size: 13px; color: var(--tinta-lembut); }
.kartu-paket-bonus li:empty { display: none; }
.bonus-domain { color: var(--merah) !important; font-weight: 700; }

.kartu-paket-fitur { list-style: none; display: grid; gap: 12px; margin-top: 20px; flex: 1; }
.kartu-paket-fitur li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.ikon-centang { color: var(--merah); margin-top: 2px; }

.kartu-paket-aksi { display: grid; gap: 9px; margin-top: 24px; }
.kartu-paket-aksi .tombol-blok { margin-top: 0; }
.tombol-demo { padding: 11px 20px; font-size: 14px; }

/* Tabel perbandingan */
.banding-bungkus {
  margin-top: 40px; overflow-x: auto;
  border: 1px solid var(--garis); border-radius: var(--radius-lg); background: #fff;
}
.tabel-banding { width: 100%; min-width: 660px; border-collapse: collapse; }
.tabel-banding th, .tabel-banding td { padding: 13px 16px; text-align: left; font-size: 14px; }
.tabel-banding thead th { background: var(--merah-lembut2); font-weight: 700; }
.tabel-banding thead th:not(:first-child),
.tabel-banding tbody td { text-align: center; }
.tabel-banding thead .kolom-unggulan { color: var(--merah); }
.tabel-banding tbody th { font-weight: 500; }
.tabel-banding tbody tr:nth-child(even of :not(.baris-grup)) { background: rgba(251,242,242,.5); }
.baris-grup th {
  background: rgba(170,0,0,.06); color: var(--merah);
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-align: left;
}
.nilai-teks  { font-weight: 600; }
.nilai-harga { font-weight: 800; font-size: 16px; color: var(--merah); }
.nilai-total { font-weight: 600; }
.baris-harga td { padding-block: 16px; }
.ikon-ada   { color: var(--merah); }
.ikon-tiada { color: rgba(90,100,120,.45); }
.ikon-panah-banding { transition: transform .2s ease; }
[aria-expanded="true"] .ikon-panah-banding { transform: rotate(180deg); }

.catatan-paket {
  margin-top: 40px; padding: 26px;
  background: var(--merah-lembut2); border: 1px solid var(--garis); border-radius: var(--radius-lg);
}
.catatan-paket h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--merah); }
.catatan-paket p  { margin-top: 12px; font-size: 14.5px; color: var(--tinta-lembut); }

/* --------------------------------------------------------------- Halaman demo */
.akun-demo {
  background: var(--merah-lembut2); border: 1px solid var(--garis);
  border-radius: var(--radius-lg); padding: 26px;
}
.akun-demo h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.akun-grid { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 700px) { .akun-grid { grid-template-columns: 1fr 1fr; } }
.akun-kartu { background: #fff; border: 1px solid var(--garis); border-radius: var(--radius); padding: 20px; }
.akun-peran {
  display: inline-block; background: var(--merah); color: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.akun-kartu dl { display: grid; gap: 8px; margin-top: 14px; }
.akun-kartu dl div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.akun-kartu dt { min-width: 76px; font-size: 13px; color: var(--tinta-lembut); }
.akun-kartu dd { margin: 0; }
.akun-kartu code {
  background: var(--merah-lembut2); border-radius: 7px; padding: 3px 9px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 600;
  word-break: break-all;
}
.akun-kartu p { margin-top: 12px; font-size: 13px; color: var(--tinta-lembut); }
.akun-catatan {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 18px;
  font-size: 13.5px; color: var(--tinta-lembut);
}
.akun-catatan svg { flex: none; margin-top: 3px; color: var(--merah); }

.demo-grid { display: grid; gap: 20px; margin-top: 32px; align-items: start; }
@media (min-width: 900px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } }
.demo-kartu {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius-xl);
  padding: 28px 24px; box-shadow: var(--bayang);
}
.demo-kartu.unggulan { border: 2px solid var(--merah); box-shadow: var(--bayang-kuat); }
.demo-kartu.disorot { outline: 3px solid rgba(170,0,0,.18); outline-offset: 4px; }
.demo-kartu-kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.demo-kartu-kepala h3 { font-size: 18px; font-weight: 800; }
.demo-harga { font-size: 17px; font-weight: 800; color: var(--merah); }
.demo-harga small { font-size: 12px; font-weight: 600; color: var(--tinta-lembut); }
.demo-kartu .daftar-centang { flex: 1; }
.demo-aksi { display: grid; gap: 9px; margin-top: 22px; }
.demo-aksi .tombol-blok { margin-top: 0; }
.demo-tautan-paket {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 13px; font-weight: 700; color: var(--merah);
}

/* --------------------------------------------------------------- Untuk siapa */
.kartu-cocok { background: var(--hijau-lembut); border-color: rgba(30,122,69,.25); }
.kartu-cocok-judul {
  font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hijau-tinta);
}
.kartu-cocok-judul-netral { color: var(--tinta-lembut); }
.kotak-jujur {
  margin-top: 22px; padding: 16px 18px;
  background: var(--merah-lembut2); border-radius: var(--radius);
  font-size: 14.5px; color: var(--tinta) !important;
}
.kutipan {
  margin: 40px auto 0; max-width: 720px;
  background: #fff; border: 1px solid rgba(170,0,0,.2); border-radius: var(--radius-lg);
  padding: 26px; text-align: center;
  font-size: 17px; font-weight: 600;
}

/* --------------------------------------------------------------- Contoh toko */
.contoh-toko { display: grid; gap: 32px; align-items: center; margin-top: 44px; }
/* Kolom gambar dilebarkan sejak isinya menjadi DUA layar HP berdampingan.
   Dengan pembagian .8fr/1.2fr yang lama, tiap layar hanya selebar 211
   piksel dan isinya tidak lagi terbaca sebagai toko, hanya sebagai
   bercak warna. */
@media (min-width: 900px) { .contoh-toko { grid-template-columns: 1fr 1.05fr; gap: 46px; } }
.contoh-foto img {
  width: 100%; height: auto; border-radius: var(--radius-xl);
  box-shadow: var(--bayang-kuat);
}
.contoh-detail h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 800; }
.contoh-detail p  { margin-top: 12px; color: var(--tinta-lembut); }
.contoh-detail .tombol-baris { margin-top: 26px; }
.tombol-baris-kiri { justify-content: flex-start; }

/* --------------------------------------------------------------- FAQ */
.faq { max-width: 780px; margin: 44px auto 0; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; }
.faq-tanya {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 20px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--tinta); text-align: left;
}
.faq-tanya:hover { color: var(--merah); }
.faq-panah { color: var(--tinta-lembut); transition: transform .2s ease; }
.faq-tanya[aria-expanded="true"] .faq-panah { transform: rotate(180deg); color: var(--merah); }
.faq-jawab { padding: 0 20px 20px; }
.faq-jawab p { font-size: 14.5px; color: var(--tinta-lembut); }

/* --------------------------------------------------------------- CTA penutup */
.cta-penutup { background: var(--merah); color: #fff; padding-block: 72px; text-align: center; }
.cta-penutup h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; }
.cta-penutup p  { max-width: 34em; margin: 16px auto 0; color: rgba(255,255,255,.86); }
.cta-penutup .tombol { margin-top: 30px; }

/* --------------------------------------------------------------- Halaman isi */
.kepala-halaman { background: var(--merah-lembut2); padding-block: 60px; text-align: center; }
.kepala-halaman h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; }
.kepala-halaman p  { max-width: 40em; margin: 16px auto 0; color: var(--tinta-lembut); }

.artikel { padding-block: 60px 80px; }
.artikel h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; }
.artikel-tanggal { margin-top: 8px; font-size: 13.5px; color: var(--tinta-lembut); }
.artikel h2 { margin-top: 34px; font-size: 19px; font-weight: 800; }
.artikel p  { margin-top: 12px; color: var(--tinta-lembut); }
.artikel ul { margin-top: 12px; padding-left: 22px; list-style: disc; display: grid; gap: 8px; }
.artikel li { color: var(--tinta-lembut); }
.artikel a  { color: var(--merah); text-decoration: underline; }

.kartu-terima-kasih { text-align: center; padding: 44px 28px; }
.kartu-terima-kasih h1 { margin-top: 22px; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; }
.kartu-terima-kasih p  { margin-top: 14px; color: var(--tinta-lembut); }
.bulat-sukses {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--hijau-lembut); color: var(--hijau-tinta);
}
.empat-nol-empat { font-size: 56px; font-weight: 800; color: var(--merah); letter-spacing: -.04em; }

/* --------------------------------------------------------------- Footer */
.footer { background: var(--tinta); color: rgba(255,255,255,.75); }
.footer-atas { display: grid; gap: 36px; padding-block: 54px; }
@media (min-width: 800px) { .footer-atas { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } }

.footer-logo { height: 36px; width: auto; }
.footer-merek p { margin-top: 16px; max-width: 40em; font-size: 14.5px; line-height: 1.7; }
.footer-ekspedisi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.footer-ekspedisi img {
  width: 70px; height: 24px; object-fit: contain;
  filter: grayscale(1) brightness(2.6); opacity: .55;
}

.footer-kolom h3 { font-size: 14px; font-weight: 700; color: #fff; }
.footer-subjudul { margin-top: 26px; }
.footer-kolom ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.footer-kolom a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; transition: color .15s ease; }
.footer-kolom a:hover { color: #fff; }

.footer-bawah { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bawah .wadah { padding-block: 18px; font-size: 12.5px; color: rgba(255,255,255,.55); }

/* --------------------------------------------------------- WhatsApp mengambang */
.wa-mengambang {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  background: #25D366; color: #fff;
  border-radius: 999px; padding: 13px 18px;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
  transition: transform .18s ease;
}
.wa-mengambang:hover { transform: scale(1.05); }
@media (max-width: 560px) {
  .wa-mengambang span { display: none; }
  .wa-mengambang { padding: 14px; }
}

/* Cetak: sembunyikan elemen yang tidak perlu */
@media print {
  .navbar, .wa-mengambang, .menu-hp, .cta-penutup { display: none !important; }
  body { color: #000; }
}

/* ============ Contoh toko: dua layar HP + satu layar komputer ============
   Yang berdampingan dengan teks adalah dua tangkapan layar dari HP, karena
   hampir seluruh pembeli datang dari HP. Keduanya dibiarkan rata atas dan
   tingginya boleh berbeda, sebab memang dua bagian halaman yang berbeda,
   bukan sepasang gambar yang harus simetris. */
.contoh-foto-hp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

/* Tampilan komputer selebar halaman. Gambarnya 1631 piksel; dijejalkan ke
   kolom sempit di samping teks, tulisan di dalamnya tidak akan terbaca, dan
   tangkapan layar yang tidak terbaca tidak membuktikan apa pun. */
.contoh-desktop {
    margin: 40px 0 0;
}
.contoh-desktop img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--bayang-kuat);
}
.contoh-desktop figcaption {
    margin-top: 14px;
    text-align: center;
    color: var(--tinta-lembut);
    font-size: .95rem;
}

@media (max-width: 640px) {
    /* Di layar sempit jaraknya dirapatkan supaya kedua layar HP tetap
       cukup besar untuk dikenali isinya. */
    .contoh-foto-hp { gap: 9px; }
    .contoh-desktop { margin-top: 28px; }
    .contoh-desktop figcaption { font-size: .88rem; }
}