/* ==========================================================================
   Halaman pembeli — TATA LETAK SAJA.
   Semua nilai desain (warna, huruf, spasi, radius, garis, bayangan, ukuran
   komponen, ukuran tata letak, lama animasi) ada di design.css.
   Di sini hanya boleh ada var(--...), angka struktural (0, 1, 1fr, 100%, 50%),
   dan batas lebar @media. Lihat ../design.md untuk daftar pengecualiannya.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: var(--gulir-pading); }
body {
  margin: 0; background: var(--krim); color: var(--hijau-tua);
  font-family: var(--font-teks); font-size: var(--ukuran-dasar);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-judul); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: var(--jarak-huruf-judul); }
p { margin: 0 0 var(--jarak-paragraf); }

.loncat {
  position: absolute; left: var(--loncat-kiri); top: 0; z-index: var(--z-loncat);
  background: var(--hijau); color: var(--putih); padding: var(--s-3) var(--r-besar);
}
.loncat:focus { left: var(--s-3); top: var(--s-3); }

/* ----------------------------- Navigasi ----------------------------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--kuning); border-bottom: var(--garis-tebal) solid var(--hijau); }
.nav__dalam { width: var(--lebar); margin: 0 auto; min-height: var(--nav-tinggi); display: flex; align-items: center; gap: var(--s-7); }
.nav__merek { width: var(--nav-merek); flex: none; }
.nav__merek img { width: 100%; border-radius: var(--r-kecil); }
.nav__tautan { display: flex; gap: var(--jarak-nav); margin-left: auto; }
.nav__tautan a { font-weight: 700; font-size: var(--teks-nav); text-decoration: none; padding: var(--s-3) var(--s-0); border-bottom: var(--garis-tebal) solid transparent; white-space: nowrap; }
.nav__tautan a:hover, .nav__tautan a:focus-visible { border-bottom-color: var(--hijau); }
.nav__aksi { display: flex; align-items: center; gap: var(--s-3); }

/* -------------------------------- Hero ------------------------------- */
.hero { position: relative; background: var(--kuning); overflow: clip; }
.kotak-kotak { height: var(--pita-kotak); background: repeating-conic-gradient(var(--oranye) 0% 25%, var(--putih) 0% 50%) 0 0 / var(--pita-kotak) var(--pita-kotak); }
.hero__dalam {
  width: var(--lebar); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: var(--jarak-hero);
  align-items: center; padding: var(--pading-hero-atas) 0 var(--pading-hero-bawah);
}
.hero__kecil { font-weight: 800; color: var(--oranye-teks); margin-bottom: var(--s-3); }
.hero__logo { width: min(100%, var(--lebar-logo-hero)); margin-bottom: var(--s-5); }
.hero__judul { font-size: var(--judul-hero); margin-bottom: var(--s-5); }
.hero__judul span { color: var(--hijau); }
.hero__teks { max-width: var(--lebar-teks-hero); margin-bottom: var(--s-6); }
.hero__tombol { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-8); }
.hero__fakta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--jarak-fakta); }
.hero__fakta li { display: flex; flex-direction: column; max-width: var(--lebar-fakta); }
.hero__fakta strong { font-family: var(--font-judul); font-size: var(--angka-fakta); line-height: 1; color: var(--hijau); }
.hero__fakta span { font-size: var(--teks-fakta); font-weight: 700; }
.hero__visual { display: grid; place-items: center; min-height: var(--tinggi-visual-hero); }
.hero__visual canvas { width: min(100%, var(--bingkai-lebar)); height: auto; }

/* --------------------------- Pita berjalan -------------------------- */
.pita { background: var(--hijau); color: var(--kuning); overflow: clip; padding: var(--s-3) 0; border-top: var(--garis-tebal) solid var(--hijau-tua); border-bottom: var(--garis-tebal) solid var(--hijau-tua); }
.pita__jalur { display: flex; width: max-content; font-family: var(--font-judul); font-size: var(--teks-pita); font-weight: 600; white-space: nowrap; }
.pita.is-visible .pita__jalur { animation: jalan var(--pita-durasi) linear infinite; }
@keyframes jalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------- Bagian umum --------------------------- */
.bagian { width: var(--lebar); margin: 0 auto; padding: var(--pading-bagian) 0; }
.bagian__kepala { max-width: var(--lebar-kepala); margin-bottom: var(--jarak-kepala); }
.bagian h2 { font-size: var(--judul-bagian); margin-bottom: var(--s-4); }
.bagian__sub { max-width: var(--lebar-sub); color: var(--hijau); }
.label { font-family: var(--font-judul); font-weight: 700; color: var(--oranye-teks); margin-bottom: var(--s-2); font-size: var(--teks-label); }
.muncul { opacity: 0; transform: translateY(var(--geser-muncul)); transition: opacity var(--muncul), transform var(--muncul); }
.muncul.tampil { opacity: 1; transform: none; }

/* -------------------------------- Cerita ---------------------------- */
.cerita__kepala { max-width: var(--lebar-kepala-cerita); margin-bottom: var(--jarak-kepala-pendek); }
.cerita__isi { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--jarak-cerita); align-items: start; }
.cerita__teks { max-width: var(--lebar-teks-cerita); }
.cerita__teks em { font-style: italic; font-weight: 700; }
.sumber { font-size: var(--teks-kecil); border-top: var(--garis-tipis) solid var(--hijau-muda); padding-top: var(--s-3); }
.sumber a { font-weight: 800; }
.langkah { list-style: none; margin: 0; padding: 0; }
.langkah li { display: flex; gap: var(--s-5); align-items: flex-start; padding: var(--r-besar) 0; border-bottom: var(--garis-tipis) dashed var(--hijau-muda); }
.langkah__nomor { font-family: var(--font-judul); font-size: var(--teks-langkah); color: var(--oranye-teks); flex: none; width: var(--langkah-nomor); }
.langkah__isi { display: flex; flex-direction: column; font-size: var(--teks-sedang); }
.langkah__isi strong { font-family: var(--font-judul); font-size: var(--teks-angka-langkah); }

/* --------------------------- Kartu varian -------------------------- */
.kartu-varian { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.kartu {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--putih); border: var(--garis-tebal) solid var(--hijau);
  border-radius: var(--r-kartu); padding: var(--kartu-pading); min-height: var(--kartu-min);
}
.kartu--utama { grid-column: span 2; background: var(--kuning-muda); flex-direction: row; align-items: center; gap: var(--r-panel); }
.kartu--utama .kartu__badan { flex: 1; }
.kartu--utama .kartu__gambar { width: var(--gambar-kartu-utama); flex: none; }
.kartu__gambar { width: 100%; max-width: var(--lebar-gambar-kartu); margin: 0 auto; }
.kartu__gambar svg { width: 100%; height: auto; }
.kartu__badan { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.kartu__jenis { font-weight: 800; font-size: var(--teks-jenis); color: var(--oranye-teks); }
.kartu h3 { font-size: var(--judul-kartu); }
.kartu__isian { font-weight: 700; color: var(--hijau); font-size: var(--teks-isian); }
.kartu__deskripsi { font-size: var(--teks-sedang); margin: 0; flex: 1; }
.kartu__aksesoris { height: var(--s-2); width: var(--aksesoris-lebar); border-radius: var(--r-kecil); background: var(--warna, var(--hijau)); }
.kartu__harga { display: block; margin: var(--s-1) 0 0; font-family: var(--font-judul); font-size: var(--teks-harga); font-weight: 700; color: var(--hijau); }
.kartu__harga small { font-family: var(--font-teks); font-size: var(--teks-kecil); font-weight: 700; }
.kartu__harga--tanya { font-family: var(--font-teks); font-size: var(--teks-kecil); font-weight: 800; color: var(--oranye-teks); }
.kartu__kontrol { margin-top: auto; padding-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.kartu__kontrol > small { font-size: var(--teks-kecil); font-weight: 800; color: var(--teks-redup); }
.kartu__kontrol .stepper { align-self: flex-start; }

/* -------------------------- Guliran visual ------------------------- */
.urutan { position: relative; height: var(--tinggi-urutan); background: var(--hijau); color: var(--krim); }
.urutan__panggung {
  position: sticky; top: 0; min-height: var(--tinggi-layar-dinamis); width: var(--lebar); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--jarak-panggung);
  align-items: center; padding: var(--pading-panggung);
}
.urutan__kiri { justify-content: center; }
.urutan__nama { font-family: var(--font-judul); font-size: var(--nama-urutan); line-height: 1; margin: 0 0 var(--s-2); color: var(--kuning); }
.urutan__jenis { margin: 0; font-size: var(--teks-info); font-weight: 800; color: var(--kuning-muda); }
.urutan__kanan { display: grid; place-items: center; gap: 0; }
.urutan__bingkai { width: min(100%, var(--bingkai-lebar)); aspect-ratio: var(--bingkai-rasio); display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, var(--kuning-16), transparent 68%); }
.urutan__bingkai canvas { width: 100%; height: auto; max-width: var(--bingkai-lebar); }

/* --------------------------- Kenapa RisolMi ------------------------ */
.alasan__kepala { max-width: var(--lebar-kepala); margin-bottom: var(--jarak-kepala-pendek); }
.alasan__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jarak-alasan); align-items: center; }
.alasan__diagram { background: var(--kuning-muda); border: var(--garis-tebal) solid var(--hijau); border-radius: var(--r-kartu); padding: var(--s-5); }
.alasan__diagram svg { width: 100%; height: auto; }
.alasan__daftar { list-style: none; margin: 0; padding: 0; }
.alasan__daftar li { position: relative; padding: 0 0 var(--s-5) var(--r-besar); margin-bottom: var(--s-5); border-bottom: var(--garis-tipis) solid var(--hijau-muda); font-weight: 600; }
.alasan__daftar li::before { content: ''; position: absolute; left: var(--s-0); top: var(--s-2); width: var(--r-besar); height: var(--r-besar); border-radius: 50%; background: var(--hijau); }

/* -------------------------------- Momen ---------------------------- */
.momen { border-top: var(--garis-tipis) solid var(--hijau-muda); }
.momen__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--momen-jarak); }
.momen__kartu { background: var(--putih); border: var(--garis-tipis) solid var(--hijau); border-radius: var(--s-5); padding: var(--s-6); min-height: var(--momen-min); }
.momen__kartu:nth-child(even) { background: var(--kuning-muda); }
.momen__angka { font-family: var(--font-judul); color: var(--oranye-teks); font-size: var(--teks-momen-angka); }
.momen__kartu h3 { font-size: var(--teks-momen-judul); margin: var(--s-3) 0 var(--s-2); }
.momen__kartu p { font-size: var(--teks-sedang); margin: 0; }

/* ----------------------------- Pilih rasa -------------------------- */
.pilih__kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.pilih__panah { display: flex; gap: var(--s-2); }
.pilih__jalur { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-1) var(--s-1) var(--s-5); scrollbar-width: thin; }
.pilih__kartu {
  flex: 0 0 var(--pilih-lebar); scroll-snap-align: start;
  background: var(--putih); border: var(--garis-tebal) solid var(--hijau);
  border-radius: var(--r-kartu); padding: var(--pilih-pading);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.pilih__kartu svg { width: var(--pilih-gambar-lebar); height: var(--pilih-gambar-tinggi); align-self: center; }
.pilih__kartu h3 { font-size: var(--judul-pilih); }
.pilih__kartu p { font-size: var(--teks-sedang); margin: 0; flex: 1; }
.pilih__kartu .kartu__harga { margin: 0; }
.pilih__kartu .kartu__kontrol { margin-top: 0; }
.pilih__kartu .kartu__kontrol .stepper { align-self: stretch; }
.pilih__kartu .stepper--lebar { margin-top: var(--s-1); }
.pilih__titik { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--r-besar); }
.pilih__titik button {
  width: var(--titik); height: var(--titik); min-height: var(--titik); padding: 0;
  border-radius: 50%; border: var(--garis-tipis) solid var(--hijau); background: transparent;
  transition: transform var(--sedang), background-color var(--sedang);
}
.pilih__titik button.aktif { background: var(--hijau); transform: scale(1.15); }

/* ----------------------------- Cara pesan -------------------------- */
.pesan__kotak {
  background: var(--hijau); color: var(--krim); border-radius: var(--r-panel);
  padding: var(--pading-pesan);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5) var(--pesan-jarak-kolom); align-items: start;
}
.pesan__kotak .label { color: var(--oranye); grid-column: 1 / -1; margin-bottom: 0; }
.pesan__kotak h2 { grid-column: 1 / -1; font-size: var(--judul-pesan); }
.pesan__teks { max-width: var(--lebar-teks-pesan); }
.pesan__langkah { list-style: none; margin: 0; padding: 0; }
.pesan__langkah li { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; font-weight: 700; }
.pesan__langkah span { display: grid; place-items: center; width: var(--pesan-lingkaran); height: var(--pesan-lingkaran); flex: none; border-radius: 50%; background: var(--kuning); color: var(--hijau-tua); font-family: var(--font-judul); }
.pesan__tombol { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.pesan__kotak .tombol--utama { background: var(--kuning); color: var(--hijau-tua); border-color: var(--kuning); }
.pesan__kotak .tombol--garis { color: var(--krim); border-color: var(--krim); }
.pesan__catatan { grid-column: 1 / -1; font-size: var(--teks-kecil); color: var(--hijau-muda); margin: var(--s-2) 0 0; }

/* --------------------------- Kaki halaman -------------------------- */
.kaki { background: var(--kuning); color: var(--hijau-tua); padding: 0 0 var(--r-panel); }
.kaki::before { content: ''; display: block; height: var(--kaki-kotak); background: repeating-conic-gradient(var(--oranye) 0% 25%, var(--putih) 0% 50%) 0 0 / var(--kaki-kotak) var(--kaki-kotak); border-bottom: var(--garis-tebal) solid var(--hijau); }
.kaki > * { width: var(--lebar); margin-left: auto; margin-right: auto; }
.kaki__atas { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; padding-top: var(--jarak-kepala-pendek); }
.kaki__merek { width: var(--lebar-merek-kaki); flex: none; }
.kaki__tag { margin: 0; font-family: var(--font-judul); font-size: var(--teks-tag-kaki); }
.kaki__tautan { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--r-panel); padding: var(--s-7) 0; margin-top: var(--s-6); border-top: var(--garis-tipis) solid var(--hijau-28); }
.kaki__tautan a { font-weight: 700; text-decoration: none; padding: var(--s-2) 0; }
.kaki__tautan a:hover { text-decoration: underline; }
.kaki__bawah { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font-size: var(--teks-kecil); border-top: var(--garis-tipis) solid var(--hijau-28); padding-top: var(--s-5); }
.kaki__bawah p { margin: 0; }
.kaki__bawah a { font-weight: 800; }

/* ------------------------ Tautan media sosial --------------------- */
.kaki__medsos { padding: var(--s-5) 0; border-top: var(--garis-tipis) solid var(--hijau-28); }
.kaki__medsos-judul { font-family: var(--font-judul); font-size: var(--teks-info); color: var(--hijau); margin: 0 0 var(--s-3); }
.medsos { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.medsos__tautan {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tombol-tinggi-kecil); padding: var(--tombol-pading-kecil);
  border: var(--tombol-tepi) solid var(--hijau); border-radius: var(--r-pill);
  background: var(--putih); color: var(--hijau-tua);
  font-size: var(--teks-kecil); font-weight: 800; text-decoration: none;
  transition: transform var(--sedang), background-color var(--sedang);
}
.medsos__tautan:hover, .medsos__tautan:focus-visible { background: var(--kuning-muda); transform: translateY(var(--geser-tombol)); }
.medsos__ikon { width: var(--medsos-ikon); height: var(--medsos-ikon); display: grid; place-items: center; flex: none; }
.medsos__ikon svg { width: 100%; height: 100%; }

/* --------------------------- Panel pesanan ------------------------- */
.panel {
  position: fixed; z-index: var(--z-panel); top: 0; right: 0; height: var(--tinggi-layar-dinamis);
  width: var(--panel-lebar); background: var(--krim);
  border-left: var(--garis-panel) solid var(--hijau);
  transform: translateX(var(--geser-panel)); transition: transform var(--lambat);
  display: flex; flex-direction: column;
}
.panel.terbuka { transform: none; }
.panel__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--panel-pading); border-bottom: var(--garis-tipis) solid var(--hijau); }
.panel__kepala h2 { font-size: var(--judul-panel); }
.panel__isi { flex: 1; overflow-y: auto; padding: var(--panel-pading); }
.panel__kosong { background: var(--kuning-muda); border-radius: var(--r-besar); padding: var(--s-5); font-weight: 600; }
.panel__baris {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) 0;
  border-bottom: var(--garis-tipis) dashed var(--hijau-muda);
}
.panel__warna { width: var(--s-5); height: var(--s-5); border-radius: 50%; border: var(--garis-tipis) solid var(--hijau); }
.panel__info { display: flex; flex-direction: column; min-width: 0; }
.panel__info strong { font-family: var(--font-judul); font-size: var(--teks-info); }
.panel__info small { font-size: var(--teks-kecil); color: var(--oranye-teks); font-weight: 700; }
.panel__kontrol { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.panel__subtotal { font-family: var(--font-judul); font-size: var(--teks-kecil); font-weight: 700; color: var(--hijau); white-space: nowrap; }
.panel__baris .stepper { gap: 0; }
.panel__baris .stepper__tombol { width: var(--stepper-tombol-panel); height: var(--stepper-tombol-panel); min-height: var(--stepper-tombol-panel); font-size: var(--teks-stepper-panel); }
.panel__baris .stepper__angka { min-width: var(--stepper-angka-panel); font-size: var(--teks-sedang); }
.panel__ringkas { background: var(--kuning-muda); border-radius: var(--r-besar); padding: var(--s-4); margin-top: var(--s-5); }
.panel__ringkas > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; }
.panel__ringkas > div span { font-size: var(--teks-sedang); font-weight: 700; }
.panel__ringkas strong { font-family: var(--font-judul); font-size: var(--teks-harga); color: var(--hijau); white-space: nowrap; }
.panel__ringkas p { font-size: var(--teks-kecil); margin: var(--s-2) 0 0; color: var(--teks-redup); }
.panel__kaki { padding: var(--panel-pading); border-top: var(--garis-tipis) solid var(--hijau); display: flex; flex-direction: column; gap: var(--s-2); }
.panel__kaki .tombol { width: 100%; }
.panel__kaki p { font-size: var(--teks-kecil); margin: var(--s-1) 0 0; }
.panel__latar { position: fixed; inset: 0; z-index: var(--z-latar); background: var(--hijau-50); }

/* ------------------------ Pemberitahuan singkat -------------------- */
.kabar {
  position: fixed; z-index: var(--z-kabar); left: 50%; bottom: var(--s-6);
  transform: translate(-50%, var(--s-5));
  display: flex; align-items: center; gap: var(--s-3); max-width: var(--lebar-kabar);
  background: var(--hijau); color: var(--kuning); padding: var(--s-3) var(--panel-pading);
  border-radius: var(--r-sedang); font-weight: 800;
  opacity: 0; pointer-events: none;
  transition: opacity var(--kabar-muncul), transform var(--kabar-muncul);
}
.kabar.tampil { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.kabar button {
  flex: none; border: 0; border-radius: var(--r-kecil); padding: var(--s-2) var(--s-3);
  background: var(--kuning); color: var(--hijau);
  font-family: inherit; font-weight: 800; font-size: var(--teks-kecil); cursor: pointer;
}

/* ---------------------- Foto asli pengganti vektor ----------------- */
.risol-lapis { position: relative; width: 100%; aspect-ratio: var(--bingkai-rasio); }
#heroRisol.risol-lapis { width: min(100%, var(--bingkai-lebar)); }
.risol-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;
  transition: opacity var(--foto-silang); will-change: opacity;
}
.risol-foto-kartu { display: block; width: 100%; height: auto; }
.pilih__kartu .risol-foto-kartu { width: var(--pilih-gambar-lebar); height: var(--pilih-gambar-tinggi); object-fit: cover; border-radius: var(--r-sedang); box-shadow: var(--bayang-foto); }

/* ------------------------------- Tablet ---------------------------- */
@media (max-width: 1024px) {
  html { scroll-padding-top: var(--gulir-pading-tablet); }
  .nav__dalam { min-height: var(--nav-tinggi-tablet); }
  .tombol--menu { display: inline-flex; }
  .nav__tautan {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    background: var(--kuning); border-bottom: var(--garis-tebal) solid var(--hijau);
    padding: var(--pading-nav-tablet); box-shadow: var(--bayang-menu);
  }
  .nav__tautan.terbuka { display: flex; }
  .nav__tautan a { padding: var(--s-3) 0; border-bottom: var(--garis-tipis) solid var(--hijau-muda); font-size: var(--teks-info); }
  .hero__dalam { grid-template-columns: 1fr; padding-top: var(--s-8); }
  .hero__visual { min-height: var(--tinggi-visual-tablet); order: -1; }
  .hero__visual canvas { width: var(--kanvas-hero-tablet); }
  .cerita__isi { grid-template-columns: 1fr; }
  .kartu-varian { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartu--utama { grid-column: span 2; }
  .alasan__grid { grid-template-columns: 1fr; }
  .momen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .urutan { height: var(--tinggi-urutan-tablet); padding: 0; }
  .urutan__panggung { padding: var(--pading-panggung-tablet); grid-template-columns: 1fr; gap: var(--s-3); align-content: center; }
  .urutan__bingkai { width: var(--bingkai-tablet); aspect-ratio: auto; }
  .urutan__bingkai canvas { width: 100%; max-width: var(--bingkai-tablet-maks); }
  .urutan__nama { font-size: var(--nama-urutan-tablet); }
  .urutan__jenis { font-size: var(--teks-kecil); }
  .pesan__kotak { grid-template-columns: 1fr; }
  .pesan__kotak .label, .pesan__kotak h2, .pesan__tombol, .pesan__catatan { grid-column: 1; }
}

/* -------------------------------- Ponsel --------------------------- */
@media (max-width: 640px) {
  .nav__merek { width: var(--nav-merek-ponsel); }
  .nav__tautan a { font-size: var(--teks-nav-ponsel); }
  .kotak-kotak { height: var(--s-6); background-size: var(--s-6) var(--s-6); }
  .hero__dalam { padding: var(--s-7) 0 var(--s-8); gap: var(--s-6); }
  .hero__logo { margin-bottom: var(--s-3); }
  .hero__teks { font-size: var(--teks-sedang); }
  .hero__tombol { flex-direction: column; margin-bottom: var(--s-7); }
  .hero__tombol .tombol { width: 100%; }
  .hero__fakta { gap: var(--s-4) var(--s-6); }
  .hero__fakta li { max-width: var(--lebar-fakta-ponsel); }
  .hero__visual { min-height: var(--tinggi-visual-ponsel); }
  .hero__visual canvas { width: var(--kanvas-hero-ponsel); }
  .bagian { padding: var(--pading-bagian-ponsel) 0; }
  .bagian h2 { font-size: var(--judul-bagian-ponsel); }
  .kartu-varian { grid-template-columns: 1fr; }
  .kartu--utama { grid-column: span 1; flex-direction: column; align-items: stretch; }
  .kartu--utama .kartu__gambar { width: var(--gambar-kartu-ponsel); }
  .kartu { min-height: 0; padding: var(--s-5); }
  .langkah li { gap: var(--s-3); padding: var(--s-3) 0; }
  .momen__grid { grid-template-columns: 1fr; }
  .momen__kartu { min-height: 0; }
  .pilih__kepala { flex-direction: column; align-items: flex-start; }
  .pilih__kartu { flex-basis: var(--pilih-lebar-ponsel); }
  .pesan__kotak { padding: var(--s-6) var(--panel-pading); border-radius: var(--panel-pading); }
  .pesan__tombol { flex-direction: column; }
  .pesan__tombol .tombol { width: 100%; }
  .kaki__atas { flex-direction: column; align-items: flex-start; }
  .kaki__bawah { flex-direction: column; }
  .urutan { height: var(--tinggi-urutan-ponsel); }
  .urutan__panggung { padding: var(--pading-panggung-ponsel); gap: var(--s-2); }
  .urutan__bingkai { width: var(--bingkai-ponsel); }
  .urutan__bingkai canvas { max-width: var(--bingkai-ponsel-maks); }
  .urutan__nama { font-size: var(--nama-urutan-ponsel); }
  .urutan__jenis { font-size: var(--teks-kecil); }
  .kabar { flex-direction: column; gap: var(--s-2); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: var(--gerak-minim) !important; animation-iteration-count: 1 !important; transition-duration: var(--gerak-minim) !important; }
  .muncul { opacity: 1; transform: none; }
}