/* public/css/beranda.css — khusus halaman Beranda.
   Mengikuti mockup terkunci "Versi 3 — Halaman Depan detail" (laptop & HP). Batas HP: 900px. */

.beranda h2 { margin: 0; color: var(--navy); font-size: 42px; line-height: 1.15; }
.beranda em { color: var(--emas); font-style: italic; }

/* Tombol tambahan */
.tombol-emas.besar { min-height: 56px; padding: 0 28px; font-size: 16px; }
.tombol-navy.besar { height: 52px; padding: 0 24px; align-self: flex-start; }
.tombol-navy.besar svg { color: var(--emas); }
.tombol-hantu {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 12px;
  border: 1.5px solid rgba(233, 213, 154, .6); color: var(--putih); font-weight: 700; font-size: 16px; text-decoration: none;
}
.tombol-hantu svg { color: var(--emas-lembut); }
.tombol-hantu:hover { background: rgba(255, 255, 255, .08); color: var(--putih); }
.tombol-garis.kotak { border-radius: 12px; border-width: 1.5px; font-weight: 700; align-self: flex-start; }

/* Judul tiap bagian */
.b-sek { padding-top: 96px; padding-bottom: 48px; }
.b-sek + .b-sek { padding-top: 48px; }
.b-putih { background: var(--putih); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); padding-top: 88px !important; padding-bottom: 88px; }
.b-putih + .b-sek { padding-top: 96px; }
.b-kolom { display: flex; flex-direction: column; gap: 36px; }
.b-judul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.b-judul-teks { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.b-judul p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--abu); }
.b-judul.tengah { justify-content: center; text-align: center; }
.b-judul.tengah .b-judul-teks { align-items: center; max-width: 640px; }
.b-eyebrow { color: var(--emas-teks); font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.b-eyebrow.emas { color: var(--emas); }
.b-lihat { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; text-decoration: none; }

/* ---------- Foto utama ---------- */
.b-utama { background: var(--navy); background-image: radial-gradient(900px 520px at 88% 20%, rgba(28, 75, 163, .9) 0%, rgba(13, 43, 107, 0) 70%); color: var(--putih); overflow: hidden; }
.b-utama-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; padding-top: 80px; padding-bottom: 96px; }
.b-utama-teks { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 1; }
.b-garis-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--emas); font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.b-garis-eyebrow span { height: 1px; width: 40px; background: var(--emas); }
.b-utama h1 { margin: 0; font-size: 60px; line-height: 1.06; letter-spacing: -.5px; color: var(--putih); }
.b-utama-desk { margin: 0; font-size: 18px; line-height: 1.7; color: #C8D2E8; max-width: 540px; }
.b-tombol-baris { display: flex; flex-wrap: wrap; gap: 12px; }
.b-utama .b-tombol-baris { margin-top: 4px; }
.b-cepat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: #A9B7D6; }
.b-cepat a { color: var(--emas-lembut); text-decoration: none; border: 1px solid rgba(233, 213, 154, .3); border-radius: 999px; padding: 6px 12px; }
.b-cepat a:hover { background: rgba(255, 255, 255, .08); color: var(--putih); }
.b-angka { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 14px; padding-top: 24px; border-top: 1px solid rgba(233, 213, 154, .2); }
.b-angka div { display: flex; flex-direction: column; gap: 2px; }
.b-angka b { font-family: var(--huruf-isi); font-size: 32px; font-weight: 800; color: var(--emas); line-height: 1.2; }
.b-angka span { font-size: 13px; color: #A9B7D6; }
/* Laptop: foto tanpa bingkai, sisi kiri memudar menyatu dengan latar biru */
.b-utama-foto { flex: 1 1 520px; min-width: 0; position: relative; align-self: center; height: 520px; margin-left: -64px; margin-right: -32px; }
.b-utama-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 45%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 22%, #000 45%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-composite: intersect;
}

/* ---------- Kenapa pilih (ikon emas) — dipakai juga di Tentang Kami ---------- */
.eyebrow-garis { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--emas-teks); font-size: 17px; font-weight: 700; letter-spacing: 4px; }
.eyebrow-garis span { height: 1.5px; width: 72px; background: var(--emas); }
.logo-judul { margin: 4px 0; line-height: 0; }
.logo-judul img { height: 44px; width: auto; display: block; margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(12%) sepia(52%) saturate(4400%) hue-rotate(214deg) brightness(92%) contrast(101%); }
.b-judul p.tampil { display: block; }
.ikon-emas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ikon-emas-kartu { background: var(--putih); border: 1px solid var(--garis); border-radius: 20px; box-shadow: 0 12px 28px rgba(13, 43, 107, .08); padding: 28px 22px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.ikon-emas-kartu img { width: 116px; height: 116px; display: block; }
.ikon-emas-kartu > b { font-family: var(--huruf-judul); font-size: 22px; line-height: 1.2; color: var(--navy); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.ikon-emas-kartu > span:last-child { font-size: 15px; color: #3B4456; line-height: 1.6; }
.garis-emas { display: flex; align-items: center; }
.garis-emas span { width: 40px; height: 2px; background: linear-gradient(90deg, rgba(201, 162, 49, 0), #C9A231); }
.garis-emas span:last-child { background: linear-gradient(90deg, #C9A231, rgba(201, 162, 49, 0)); }
.garis-emas i { width: 9px; height: 9px; border-radius: 50%; background: #C9A231; }
/* Cincin emas untuk ikon buatan (Nilai Kami) */
.cincin-emas { width: 104px; height: 104px; border-radius: 50%; padding: 5px; box-sizing: border-box; background: linear-gradient(145deg, #F4E2A6, #B88E22 45%, #F4E2A6 70%, #A67C1A); box-shadow: 0 8px 18px rgba(184, 142, 34, .3); display: flex; }
.cincin-emas > span { flex: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #EFEAE0); display: flex; align-items: center; justify-content: center; color: var(--navy); }

/* ---------- Kategori ---------- */
.b-kat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.b-kat {
  background: var(--putih); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--teks); border: 1px solid var(--garis);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.b-kat:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(13, 43, 107, .10); border-color: #D9CDAE; color: var(--teks); }
.b-kat-foto { display: flex; height: 240px; background: var(--krem); overflow: hidden; }
.b-kat-foto img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .4s ease; }
.b-kat:hover .b-kat-foto img { transform: scale(1.05); }
.b-kat-isi { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.b-kat-isi b { font-size: 17px; }
.b-kat-jumlah { font-size: 13px; color: var(--abu); }
.b-kat-harga { font-size: 14px; color: #B42318; font-weight: 800; margin-top: 8px; }
.b-kat-harga span { font-weight: 500; color: var(--abu); }
.b-kat-semua { background: var(--navy); border-color: var(--navy); color: var(--putih); justify-content: space-between; padding: 26px; min-height: 320px; }
.b-kat-semua:hover { color: var(--putih); border-color: var(--navy); }
.b-kat-eyebrow { color: var(--emas); font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.b-kat-semua-teks { display: flex; flex-direction: column; gap: 10px; }
.b-kat-semua-teks b { font-family: var(--huruf-judul); font-size: 28px; line-height: 1.2; font-weight: 600; }
.b-kat-semua-teks > span { font-size: 14px; color: #C8D2E8; line-height: 1.6; }
.b-bulat { align-self: flex-start; width: 46px; height: 46px; border-radius: 50%; background: var(--emas); color: var(--navy-tua); display: flex; align-items: center; justify-content: center; }

/* ---------- Untuk setiap momen ---------- */
.b-sek.b-acara { background: var(--navy); background-image: radial-gradient(900px 500px at 85% 10%, rgba(28, 75, 163, .85), rgba(13, 43, 107, 0) 70%); padding-top: 88px; padding-bottom: 96px; margin-top: 0; }
.b-acara h2 { color: var(--putih); max-width: 820px; }
.b-acara .b-judul p { color: var(--emas-lembut); }
.b-acara-baris { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.b-acara-kartu { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--putih); }
.b-acara-kartu img { width: 100%; height: auto; aspect-ratio: 486 / 609; object-fit: contain; display: block; border-radius: 24px; border: 3px solid var(--putih); box-sizing: border-box; background: var(--navy-tua); }
.b-acara-kartu b { font-size: 22px; font-weight: 700; color: var(--putih); }
a.b-acara-kartu:hover img { box-shadow: 0 16px 32px rgba(0, 0, 0, .3); }
.b-acara-tombol { align-self: center; }

/* ---------- Produk pilihan ---------- */
.b-tab { display: flex; gap: 8px; flex-wrap: wrap; }
.b-tab button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--garis); background: var(--putih); color: var(--teks); font-size: 14px; font-weight: 600; }
.b-tab button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--putih); font-weight: 700; }
.b-pilihan-panel { display: flex; flex-direction: column; gap: 20px; }
.b-pilihan-panel[hidden] { display: none; }
.b-pilihan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-pilihan-jalur { padding-top: 4px; padding-bottom: 10px; }
.b-pilihan-jalur > .kartu-produk { flex: 0 0 calc((100% - 60px) / 4); min-width: 0; }
.b-pilihan-bawah { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.b-pilihan-bawah .geser-titik { justify-content: flex-start; }
.b-pilihan .kartu-produk { background: var(--gading); }

/* ---------- Contoh desain ---------- */
.b-desain-isi { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.b-desain-teks { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.b-desain-isi.tunggal .b-desain-teks { max-width: 760px; }
.b-desain-teks h2 { font-size: 40px; }
.b-desain-teks p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--abu); }
.b-langkah-kecil { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.b-langkah-kecil li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.b-langkah-kecil span { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--navy); color: var(--emas-lembut); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.b-desain-grid { flex: 1.3 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.b-desain-kartu { border-radius: 16px; overflow: hidden; background: var(--putih); border: 1px solid var(--garis); text-decoration: none; color: var(--teks); display: flex; flex-direction: column; }
.b-desain-kartu.besar { grid-row: span 2; }
.b-desain-foto { display: flex; height: 130px; background: var(--krem); }
.b-desain-kartu.besar .b-desain-foto { flex: 1; min-height: 300px; }
.b-desain-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.b-desain-nama { padding: 10px 12px; font-size: 13px; font-weight: 700; }
.b-desain-nama span { display: block; font-size: 12px; font-weight: 500; color: var(--abu); }

/* ---------- Cara pemesanan ---------- */
.b-cara-baris { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.b-cara-baris::before { content: ''; position: absolute; left: 12%; right: 12%; top: 28px; height: 1px; background: repeating-linear-gradient(90deg, #D4AF37 0 8px, transparent 8px 16px); }
.b-cara-baris li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.b-cara-no { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--emas); font-family: var(--huruf-isi); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.b-cara-baris li.akhir .b-cara-no { background: var(--emas); color: var(--navy-tua); }
.b-cara-baris b { font-size: 17px; color: var(--navy); }
.b-cara-baris li > span:last-child { font-size: 14px; color: var(--abu); line-height: 1.6; max-width: 240px; }

/* ---------- Pengalaman event & expo ---------- */
.b-kegiatan-jalur .b-kegiatan-foto { margin: 0; flex: 0 0 calc((100% - 40px) / 3); display: flex; flex-direction: column; gap: 12px; }
.b-kegiatan-bingkai { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #E9E2CF; }
.b-kegiatan-bingkai img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-kegiatan-foto figcaption { text-align: center; font-size: 16px; font-weight: 600; color: var(--teks); }
.b-kegiatan-foto figcaption span { display: block; font-size: 13px; font-weight: 500; color: var(--abu); }

/* ---------- Apa kata customer ---------- */
.b-sek.b-ulasan { background: var(--navy-tua); padding-top: 88px; padding-bottom: 88px; margin-top: 48px; }
.b-ulasan h2 { color: var(--putih); }
.b-ulasan-rating { font-size: 15px; color: #C8D2E8; }
.bintang { color: var(--emas); letter-spacing: 2px; }
.b-ulasan-jalur .b-ulasan-kartu { margin: 0; flex: 0 0 calc((100% - 40px) / 3); box-sizing: border-box; background: linear-gradient(160deg, #1C4BA3, #0D2B6B 70%); border: 1px solid rgba(233, 213, 154, .5); border-radius: 18px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.b-ulasan-kartu .kutip { font-family: var(--huruf-judul); color: var(--emas); font-size: 54px; line-height: .5; height: 22px; }
.b-ulasan-kartu blockquote { margin: 0; font-family: var(--huruf-judul); font-size: 18px; line-height: 1.55; color: var(--putih); flex: 1; }
.b-ulasan-kartu figcaption { display: flex; align-items: center; gap: 12px; }
.b-ulasan-kartu figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--emas-lembut); display: block; }
.b-ulasan-kartu figcaption > span { display: flex; flex-direction: column; gap: 2px; }
.b-ulasan-kartu figcaption b { font-family: var(--huruf-judul); font-size: 18px; color: var(--putih); font-weight: 600; }
.b-ulasan-kartu figcaption .bintang { font-size: 14px; }
.b-avatar { width: 48px; height: 48px; border-radius: 50%; background: #E9E2CF; color: var(--emas-teks); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- FAQ ---------- */
.b-faq-isi { max-width: 820px; margin: 0 auto; }
.b-faq-isi h2 { font-size: 38px; margin-bottom: 6px; }
.b-faq .faq details p { font-size: 15px; line-height: 1.7; color: var(--abu); }

/* ---------- Kontak ---------- */
.b-kontak-kotak { display: flex; flex-wrap: wrap; background: var(--putih); border: 1px solid var(--garis); border-radius: 24px; overflow: hidden; }
.b-kontak-teks { flex: 1 1 420px; min-width: 0; padding: 48px; display: flex; flex-direction: column; gap: 22px; }
.b-kontak-teks h2 { font-size: 36px; }
.b-kontak-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.b-kontak-sel { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.6; }
.b-kontak-sel > span { font-size: 12px; font-weight: 700; color: var(--abu); letter-spacing: 1px; }
.b-kontak-sel a { text-decoration: none; }
.b-kontak .tombol-navy { height: 48px; }
.b-kontak .tombol-garis.kotak { min-height: 48px; }
.b-peta {
  flex: 1 1 420px; min-width: 0; min-height: 360px; background: #E9EEF5; background-image: linear-gradient(#DCE3EE 1px, transparent 1px), linear-gradient(90deg, #DCE3EE 1px, transparent 1px);
  background-size: 40px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--teks);
}
.b-peta-nama { background: var(--putih); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(13, 43, 107, .15); }
.b-peta-ket { font-size: 13px; color: var(--navy); font-weight: 600; text-decoration: underline; }

/* ---------- Ajakan ---------- */
.b-ajakan-wrap { padding-bottom: 96px; }
.b-ajakan {
  border-radius: 24px; padding: 56px; background: var(--navy-tua); background-image: radial-gradient(700px 300px at 90% 0%, rgba(28, 75, 163, .8), rgba(10, 31, 77, 0) 70%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid rgba(212, 175, 55, .35);
}
.b-ajakan > div:first-child { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.b-ajakan h2 { color: var(--putih); font-size: 40px; line-height: 1.2; }
.b-ajakan p { margin: 0; font-size: 16px; color: #C8D2E8; line-height: 1.6; }

/* ================= HP ================= */
@media (max-width: 900px) {
  .beranda h2 { font-size: 26px; line-height: 1.2; }
  .b-sek, .b-sek + .b-sek, .b-putih + .b-sek { padding-top: 36px; padding-bottom: 12px; }
  .b-putih { padding-top: 32px !important; padding-bottom: 32px; margin-top: 24px; }
  .b-kolom { gap: 18px; }
  .b-judul { flex-wrap: nowrap; align-items: flex-end; }
  .b-judul-teks { gap: 6px; }
  .b-judul p { display: none; }
  .b-judul.tengah { justify-content: flex-start; text-align: left; }
  .b-judul.tengah .b-judul-teks { align-items: flex-start; }
  .b-eyebrow, .b-garis-eyebrow { font-size: 11px; letter-spacing: 2.5px; }
  .b-lihat { font-size: 13px; white-space: nowrap; }
  .b-lihat svg { display: none; }

  /* Foto utama: foto di atas (berbingkai emas), teks di bawah */
  .b-utama { background-image: radial-gradient(420px 340px at 85% 0%, rgba(28, 75, 163, .9), rgba(13, 43, 107, 0) 70%); }
  .b-utama-isi { flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; gap: 18px; padding-top: 20px; padding-bottom: 28px; }
  .b-utama-teks { flex: none; gap: 16px; }
  .b-utama-foto { flex: none; height: auto; margin: 0; border-radius: 20px; padding: 5px; background: linear-gradient(135deg, #E9D59A, #B88E22 55%, #E9D59A); }
  .b-utama-foto img { position: static; height: 230px; object-fit: contain; background: var(--navy); border-radius: 16px; -webkit-mask-image: none; mask-image: none; }
  .b-garis-eyebrow span { width: 28px; }
  .b-utama h1 { font-size: 38px; line-height: 1.08; margin-top: -4px; }
  .b-utama-desk { font-size: 15px; line-height: 1.65; }
  .b-utama .b-tombol-baris { flex-direction: column; gap: 10px; margin-top: 0; }
  .tombol-emas.besar, .tombol-hantu { min-height: 54px; width: 100%; font-size: 16px; }
  .b-cepat { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .b-cepat::-webkit-scrollbar { display: none; }
  .b-cepat a { flex-shrink: 0; white-space: nowrap; }
  .b-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; padding-top: 16px; text-align: center; }
  .b-angka b { font-size: 22px; }
  .b-angka span { font-size: 11px; }

  /* Kenapa pilih: 2 × 2 */
  .eyebrow-garis { font-size: 13px; gap: 10px; letter-spacing: 3px; }
  .eyebrow-garis span { width: 36px; }
  .logo-judul img { height: 28px; }
  .b-judul p.tampil { display: block; font-size: 13px; line-height: 1.6; }
  .ikon-emas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ikon-emas-kartu { padding: 16px 10px 18px; gap: 8px; border-radius: 16px; box-shadow: 0 8px 20px rgba(13, 43, 107, .07); }
  .ikon-emas-kartu img { width: 76px; height: 76px; }
  .ikon-emas-kartu > b { font-size: 15px; }
  .ikon-emas-kartu > span:last-child { font-size: 12px; line-height: 1.5; }
  .garis-emas span { width: 26px; }
  .garis-emas i { width: 7px; height: 7px; }
  .cincin-emas { width: 76px; height: 76px; }
  .cincin-emas svg { width: 30px; height: 30px; }

  /* Kategori: 2 kolom */
  .b-kat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .b-kat { border-radius: 14px; }
  .b-kat:hover { transform: none; box-shadow: none; }
  .b-kat-foto { height: 140px; }
  .b-kat-foto img { padding: 6px; }
  .b-kat-isi { padding: 10px 12px 12px; gap: 3px; }
  .b-kat-isi b { font-size: 14px; line-height: 1.3; }
  .b-kat-jumlah { display: none; }
  .b-kat-harga { font-size: 12px; margin-top: 0; }
  .b-kat-harga span { display: none; }
  .b-kat-semua { min-height: 196px; padding: 14px; }
  .b-kat-eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  .b-kat-semua-teks b { font-size: 20px; }
  .b-bulat { width: 38px; height: 38px; }

  /* Untuk setiap momen: geser ke samping */
  .b-sek.b-acara { padding-top: 32px !important; padding-bottom: 28px; margin-top: 24px; }
  .b-acara .b-judul.tengah { justify-content: flex-start; text-align: left; }
  .b-acara-baris { display: flex; gap: 12px; }
  .b-acara-kartu { flex: 0 0 200px; gap: 10px; }
  .b-acara-kartu img { border-radius: 20px; }
  .b-acara-kartu b { font-size: 16px; }
  .b-acara-tombol { width: 100%; }

  /* Produk pilihan: geser ke samping */
  .b-pilihan .b-judul { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  .b-tab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .b-tab::-webkit-scrollbar { display: none; }
  .b-tab button { height: 36px; font-size: 13px; flex-shrink: 0; }
  .b-pilihan-panel { gap: 12px; }
  .b-pilihan-grid { display: flex; overflow-x: auto; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .b-pilihan-grid::-webkit-scrollbar { display: none; }
  .b-pilihan-grid .kartu-produk { flex: 0 0 156px; }
  .b-pilihan-jalur > .kartu-produk { flex: 0 0 156px; }
  .b-pilihan-bawah { justify-content: center; }
  .b-pilihan-bawah .geser-titik { justify-content: center; }

  /* Contoh desain */
  .b-desain-isi { gap: 18px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .b-desain-teks { flex: none; gap: 12px; }
  .b-desain-teks h2 { font-size: 24px; }
  .b-desain-teks p { font-size: 14px; line-height: 1.65; }
  .b-langkah-kecil li { font-size: 14px; }
  .tombol-navy.besar { align-self: stretch; justify-content: center; height: 50px; }
  .b-desain-grid { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .b-desain-kartu.besar .b-desain-foto { min-height: 220px; }

  /* Cara pemesanan: daftar ke bawah */
  .b-cara-baris { grid-template-columns: 1fr; gap: 14px; }
  .b-cara-baris::before { display: none; }
  .b-cara-baris li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; text-align: left; }
  .b-cara-no { width: 44px; height: 44px; font-size: 17px; grid-row: span 2; }
  .b-cara-baris b { font-size: 15px; padding-top: 2px; }
  .b-cara-baris li > span:last-child { font-size: 13px; max-width: none; }

  /* Kegiatan & ulasan: geser, satu kartu hampir selebar layar */
  .b-kegiatan-jalur .b-kegiatan-foto { flex: 0 0 300px; gap: 8px; }
  .b-kegiatan-bingkai { border-radius: 14px; }
  .b-kegiatan-foto figcaption { font-size: 14px; }
  .b-sek.b-ulasan { padding-top: 32px !important; padding-bottom: 28px; margin-top: 24px; }
  .b-ulasan-rating { font-size: 13px; }
  .b-ulasan-jalur .b-ulasan-kartu { flex: 0 0 300px; padding: 18px; gap: 12px; border-radius: 16px; }
  .b-ulasan-kartu .kutip { font-size: 40px; height: 16px; }
  .b-ulasan-kartu blockquote { font-size: 16px; line-height: 1.5; }
  .b-ulasan-kartu figcaption img { width: 44px; height: 44px; }
  .b-ulasan-kartu figcaption b { font-size: 16px; }

  /* FAQ */
  .b-faq-isi h2 { font-size: 24px; }
  .b-faq .faq details p { font-size: 14px; }

  /* Kontak */
  .b-kontak-kotak { border-radius: 18px; flex-direction: column; flex-wrap: nowrap; }
  .b-kontak-teks { flex: none; padding: 22px 18px; gap: 16px; }
  .b-kontak-teks h2 { font-size: 22px; }
  .b-kontak-grid { grid-template-columns: 1fr; gap: 12px; }
  .b-kontak-sel { font-size: 14px; }
  .b-kontak .b-tombol-baris { display: grid; grid-template-columns: 1fr 1fr; }
  .b-kontak .tombol-navy, .b-kontak .tombol-garis.kotak { justify-content: center; align-self: stretch; padding: 0 12px; }
  .b-peta { flex: none; min-height: 160px; }

  /* Ajakan */
  .b-ajakan-wrap { padding-bottom: 32px !important; }
  .b-ajakan { padding: 24px 18px; border-radius: 18px; gap: 18px; }
  .b-ajakan h2 { font-size: 26px; }
  .b-ajakan p { font-size: 14px; }
  .b-ajakan .b-tombol-baris { flex-direction: column; width: 100%; gap: 10px; }
}

/* ---------- Halaman Kontak / Cara Order / FAQ ---------- */
.b-halaman-judul { background: var(--putih); border-bottom: 1px solid var(--garis); padding: 28px 0 32px; }
.b-halaman-judul .w { display: flex; flex-direction: column; gap: 10px; }
.b-halaman-judul h1 { margin: 0; font-size: 44px; color: var(--navy); }
.b-halaman-judul p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--abu); max-width: 680px; }
.halaman-info > .b-sek:nth-child(2) { padding-top: 56px; }
@media (max-width: 900px) {
  .b-halaman-judul { padding: 16px 0 20px; }
  .b-halaman-judul h1 { font-size: 28px; }
  .b-halaman-judul p { font-size: 14px; }
  .halaman-info > .b-sek:nth-child(2) { padding-top: 24px; }
}

/* ---------- Tentang Kami ---------- */
.t-judul { background: var(--navy); background-image: radial-gradient(900px 480px at 85% 10%, rgba(28, 75, 163, .85), rgba(13, 43, 107, 0) 70%); color: var(--putih); }
.t-judul .w { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 16px; }
.t-judul .remah, .t-judul .remah a { color: #A9B7D6; }
.t-judul .remah .kini { color: var(--emas-lembut); }
.t-judul h1 { margin: 0; font-size: 56px; line-height: 1.1; color: var(--putih); }
.t-judul p { margin: 0; font-size: 18px; line-height: 1.7; color: #C8D2E8; max-width: 640px; }
.halaman-info.tentang > .t-cerita { padding-top: 88px; }
.t-cerita-isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.t-cerita-teks { display: flex; flex-direction: column; gap: 16px; }
.t-cerita-teks h2 { font-size: 40px; line-height: 1.2; }
.t-cerita-teks p { margin: 0; font-size: 16px; line-height: 1.8; color: #3B4456; }
.t-cerita-foto { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.t-cerita-foto > span { display: block; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: #E9E2CF; box-shadow: 0 24px 48px rgba(13, 43, 107, .14); }
.t-cerita-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.t-cerita-foto figcaption { font-size: 13px; color: var(--abu); text-align: center; }
.t-angka { background: var(--putih); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); margin-top: 48px; }
.t-angka-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 36px; padding-bottom: 36px; }
.t-angka-grid div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.t-angka-grid div + div { border-left: 1px solid var(--garis); }
.t-angka-grid b { font-family: var(--huruf-isi); font-size: 40px; color: var(--navy); font-weight: 800; line-height: 1.1; }
.t-angka-grid span { font-size: 14px; color: var(--abu); }
.t-nilai .ikon-emas-kartu > b { min-height: 0; }
@media (max-width: 900px) {
  .t-judul .w { padding-top: 16px; padding-bottom: 32px; gap: 12px; }
  .t-judul h1 { font-size: 34px; line-height: 1.12; }
  .t-judul p { font-size: 15px; }
  .halaman-info.tentang > .t-cerita { padding-top: 28px; }
  .t-cerita-isi { grid-template-columns: 1fr; gap: 16px; }
  .t-cerita-teks h2 { font-size: 24px; }
  .t-cerita-teks p { font-size: 15px; line-height: 1.75; }
  .t-cerita-foto { order: -1; }
  .t-cerita-foto > span { aspect-ratio: 4 / 3; border-radius: 16px; box-shadow: none; }
  .t-angka { margin-top: 24px; }
  .t-angka-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; padding-top: 18px; padding-bottom: 18px; }
  .t-angka-grid div + div { border-left: none; }
  .t-angka-grid b { font-size: 28px; }
  .t-angka-grid span { font-size: 12px; }
}
/* ---------- Kebijakan Privasi ---------- */
.privasi-isi { max-width: 760px; display: flex; flex-direction: column; gap: 22px; color: #2A3040; font-size: 16px; line-height: 1.75; }
.privasi-isi h2 { margin: 0 0 6px; font-size: 22px; color: var(--navy); }
.privasi-isi p, .privasi-isi ul { margin: 0; }
.privasi-isi ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.privasi-tgl { font-size: 14px; color: var(--abu); }
