:root {
  --kertas: #faf8f4;
  --tinta: #151514;
  --redup: #6b6a66;
  --garis: #e6e2da;
  --kartu: #ffffff;
  --aksen: #e2552b;
  --wa: #1f9d55;
  --wa-hover: #188447;
  --gelap: #151514;
  --gelap-teks: #f4f1ea;
  --gelap-redup: #a9a69e;
  --r: 14px;
  --isi: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--kertas); color: var(--tinta); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
.isi { max-width: var(--isi); margin: 0 auto; padding: 0 16px; }
.redup { color: var(--redup); }

/* tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: background .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hover); }
.btn-garis { border-color: currentColor; }
.btn.kecil { padding: 7px 14px; font-size: 14px; }
.btn.penuh { width: 100%; }

/* header */
.atas { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--kertas) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis); }
.atas .isi { display: flex; align-items: center; gap: 20px; height: 60px; }
.logo { font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -0.02em; }
.atas nav { display: flex; gap: 18px; margin-left: auto; }
.atas nav a { text-decoration: none; color: var(--redup); font-size: 15px; }
.atas nav a:hover { color: var(--tinta); }
@media (max-width: 640px) { .atas nav { display: none; } .atas .btn { margin-left: auto; } }

/* hero */
.hero { padding: 64px 0 56px; }
.label { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--aksen); margin: 0 0 14px; }
.hero h1 { font-size: clamp(34px, 7vw, 64px); font-weight: 800; max-width: 14ch; }
.hero .sub { font-size: clamp(16px, 2.2vw, 19px); color: var(--redup); max-width: 52ch; margin: 18px 0 28px; }
.angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin-bottom: 28px; }
.angka div { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 14px 16px; }
.angka b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.angka span { font-size: 13px; color: var(--redup); line-height: 1.35; display: block; }
@media (max-width: 520px) { .angka { grid-template-columns: 1fr 1fr; } .angka div:last-child { grid-column: span 2; } }
.aksi { display: flex; gap: 12px; flex-wrap: wrap; }

/* blok */
.blok { padding: 56px 16px; }
.blok.isi { padding-left: 16px; padding-right: 16px; }
.kepala { margin-bottom: 24px; }
.kepala h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
.kepala p { color: var(--redup); margin: 8px 0 0; }
.kepala a { color: var(--aksen); }
.blok h3 { font-size: 17px; margin: 0 0 10px; }

/* katalog */
.chip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip button { font: inherit; font-size: 14px; border: 1px solid var(--garis); background: var(--kartu); color: var(--tinta); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.chip button.on { background: var(--tinta); color: var(--kertas); border-color: var(--tinta); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.kartu:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgb(0 0 0 / .08); }
.kartu[hidden] { display: none; }
.gambar { aspect-ratio: 1; background: #efece6; display: grid; place-items: center; }
.gambar img { width: 100%; height: 100%; object-fit: cover; }
.tanpa { font-weight: 800; color: var(--redup); letter-spacing: .05em; }
.kartu .teks { padding: 12px 14px 4px; display: flex; flex-direction: column; }
.kode { font-size: 12px; font-weight: 700; color: var(--aksen); letter-spacing: .06em; }
.nama { font-weight: 600; line-height: 1.3; }
.kartu .pesan { padding: 4px 14px 14px; font-size: 14px; font-weight: 700; color: var(--wa); margin-top: auto; }
.kosong { background: var(--kartu); border: 1px dashed var(--garis); border-radius: var(--r); padding: 40px; text-align: center; color: var(--redup); }
.kosong a { color: var(--aksen); }

/* harga (blok gelap) */
.gelap { background: var(--gelap); color: var(--gelap-teks); }
.gelap .kepala p, .gelap .catatan li { color: var(--gelap-redup); }
.gelap .catatan b { color: var(--gelap-teks); }
.dua { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 36px; }
@media (max-width: 800px) { .dua { grid-template-columns: 1fr; } }
table.harga { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.harga th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gelap-redup); padding: 0 0 10px; font-weight: 700; }
table.harga td { padding: 14px 0; border-top: 1px solid rgb(255 255 255 / .12); font-size: 17px; }
table.harga th:not(:first-child), table.harga td:not(:first-child) { text-align: right; padding-left: 14px; white-space: nowrap; }
@media (max-width: 480px) { table.harga td { font-size: 15px; } table.harga em { display: inline-block; margin: 4px 0 0; } }
table.harga tr.hemat td { color: #fff; font-weight: 800; }
table.harga em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--aksen); color: #fff; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.catatan { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.catatan li { padding-left: 18px; position: relative; }
.catatan li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--aksen); }
.area { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 480px) { .area { grid-template-columns: 1fr 1fr; } .area span { font-size: 17px; } }
.area div { border: 1px solid rgb(255 255 255 / .14); border-radius: 10px; padding: 12px 14px; }
.area b { display: block; font-size: 14px; }
.area span { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.area em { display: block; font-style: normal; font-size: 12px; color: var(--gelap-redup); }

/* info */
.tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 800px) { .tiga { grid-template-columns: 1fr; } }
.tiga ul { margin: 0; padding-left: 18px; color: var(--redup); }
.tiga li { margin-bottom: 6px; }
table.size { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.size th { text-align: left; font-size: 12px; color: var(--redup); font-weight: 700; padding: 6px 0; border-bottom: 1px solid var(--garis); }
table.size td { padding: 7px 0; border-bottom: 1px solid var(--garis); }

/* cara */
.cara ol { counter-reset: n; list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 800px) { .cara ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cara ol { grid-template-columns: 1fr; } }
.cara li { counter-increment: n; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 18px; color: var(--redup); }
.cara li::before { content: counter(n); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); color: var(--kertas); font-weight: 800; margin-bottom: 12px; }
.cara li b { color: var(--tinta); display: block; }

.bawah { border-top: 1px solid var(--garis); padding: 28px 0 90px; color: var(--redup); font-size: 14px; }

/* tombol WA melayang, hanya di layar kecil */
.wa-melayang { display: none; }
@media (max-width: 640px) {
  .wa-melayang { display: flex; position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--wa); color: #fff; font-weight: 700; text-decoration: none; padding: 14px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
}

/* ---------------- tracking ---------------- */
.lacak main { padding: 28px 16px 48px; }
.sempit { max-width: 560px; }
.kartu-lacak { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 22px; margin-bottom: 14px; }
.kartu-lacak h1 { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.kartu-lacak h2 { font-size: 17px; margin-bottom: 12px; }
.kartu-lacak .label { margin-bottom: 4px; }
.kartu-lacak > p { margin: 6px 0 0; }
.status-kini { background: var(--kertas); border-radius: 10px; padding: 12px 14px; margin: 18px 0 20px; }
.status-kini span { display: block; font-size: 12px; color: var(--redup); }
.status-kini b { font-size: 19px; }
.banner { border-radius: 10px; padding: 12px 14px; margin: 18px 0 0; }
.banner.batal { background: #fbe9e6; color: #8a2518; }
ol.langkah { list-style: none; margin: 0; padding: 0; }
ol.langkah li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; position: relative; color: var(--redup); }
ol.langkah li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 26px; bottom: -8px; width: 2px; background: var(--garis); }
ol.langkah .titik { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--garis); background: var(--kartu); position: relative; z-index: 1; }
ol.langkah li.selesai { color: var(--tinta); }
ol.langkah li.selesai .titik { background: var(--wa); border-color: var(--wa); }
ol.langkah li.selesai::after { background: var(--wa) !important; }
ol.langkah li.kini { color: var(--tinta); font-weight: 700; }
ol.langkah li.kini .titik { border-color: var(--aksen); background: var(--aksen); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aksen) 22%, transparent); }
ol.langkah .waktu { font-size: 12px; color: var(--redup); font-weight: 400; font-variant-numeric: tabular-nums; }
.resi { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--garis); margin-top: 16px; padding-top: 14px; }
.resi span { color: var(--redup); font-size: 14px; }
.resi b { font-variant-numeric: tabular-nums; }
dl.bayar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 16px 0 0; font-variant-numeric: tabular-nums; }
dl.bayar dt { color: var(--redup); }
dl.bayar dd { margin: 0; text-align: right; font-weight: 600; }
dd.kurang { color: var(--aksen); font-weight: 800; }
dd.lunas { color: var(--wa); font-weight: 800; }