:root {
    --primary: #1d3fa0;
    --primary-dark: #122c7a;
    --wa: #25d366;
    --wa-dark: #1da851;
    --bg: #fbf8f1;
    --bg-alt: #f3efe6;
    --text: #141a33;
    --muted: #5d6480;
    --border: #e4e0d4;
    --radius: 12px;
    --shadow: 0 4px 14px rgba(15,25,60, .08);
    --font-judul: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-teks: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --emas: #c8961e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: var(--font-teks);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1, h2 { font-family: var(--font-judul); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
h3 { font-weight: 700; letter-spacing: -.01em; }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.center { text-align: center; }
.kosong { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Tombol ---------- */
.btn {
    display: inline-block; padding: 10px 20px; border-radius: 999px; border: 2px solid transparent;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center;
    background: #ddd; color: #555; transition: .15s;
}
.btn:disabled { cursor: not-allowed; opacity: .7; }
.btn-sm { padding: 6px 14px; font-size: .9rem; }
.btn-block { display: block; width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

/* ---------- Navbar ---------- */
.navbar { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-teks); font-weight: 800; font-size: 1.25rem; letter-spacing: .14em; color: var(--text); text-decoration: none; }
.logo img { width: 44px; height: 44px; }
@media (max-width: 400px) { .logo { font-size: 1.05rem; } .logo img { width: 38px; height: 38px; } }
.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-menu a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; }
.nav-menu a.aktif, .nav-menu a:not(.btn):hover { color: var(--primary); }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--text); }

@media (max-width: 800px) {
    .nav-toggle { display: block; }
    .nav-menu {
        display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff;
        flex-direction: column; align-items: stretch; padding: 12px 16px 20px; gap: 12px;
        box-shadow: 0 8px 16px rgba(0,0,0,.08);
    }
    .nav-menu.buka { display: flex; }
}

/* ---------- Hero & header halaman ---------- */
/* Latar oranye-emas: gradasi + pita emas (includes/dekor-hero.php) + pola titik */
.hero, .page-header, .cta {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    background:
        radial-gradient(ellipse 60% 70% at 85% 45%, rgba(231,4,152, .45), transparent 70%),
        linear-gradient(105deg, #13235a 0%, #1a2f78 28%, #1d3fa0 60%, #ef7a12 85%, #f8931a 100%);
}
.hero > .container, .page-header > .container, .cta > .container { position: relative; z-index: 1; }
.dekor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dekor .pita { position: absolute; inset: 0; width: 100%; height: 100%; }
.titik {
    position: absolute; width: 38%; height: 55%;
    background-image: radial-gradient(rgba(245,207,85, .55) 1.4px, transparent 1.8px);
    background-size: 13px 13px;
}
.titik-kiri { left: 0; bottom: 0; -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 0% 100%, #000 0%, transparent 65%); }
.titik-kanan { right: 0; top: 0; -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 65%); }

.hero { padding: 110px 0 130px; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; line-height: 1.08; max-width: 640px; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.hero h1::after { /* garis ornamen emas di bawah judul */
    content: ''; display: block; width: 90px; height: 3px; margin-top: 22px; border-radius: 2px;
    background: linear-gradient(90deg, #fff6cf, #f5cf55 60%, transparent);
}
.hero p { max-width: 560px; font-size: 1.15rem; opacity: .95; }
.hero-btn { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hero-logo-wrap { position: relative; flex-shrink: 0; }
.hero-logo-wrap::after { /* cahaya emas di bawah logo */
    content: ''; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 22px;
    background: radial-gradient(ellipse, rgba(255, 214, 120, .9), rgba(231,4,152, .35) 45%, transparent 72%);
    filter: blur(2px);
}
.hero-logo {
    width: clamp(200px, 26vw, 320px); height: auto;
    filter: drop-shadow(0 0 22px rgba(255, 200, 90, .55)) drop-shadow(0 14px 26px rgba(6,12,36, .45));
}

.btn-hero, .btn-hero-outline { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; font-size: 1.05rem; }
.btn-hero { background: linear-gradient(180deg, #e70498, #3b2fc9); color: #fff; box-shadow: 0 8px 20px rgba(20,30,90, .35), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-hero:hover { background: linear-gradient(180deg, #e9b52c, #1d3fa0); transform: translateY(-1px); }
.btn-hero-outline { background: rgba(255,255,255,.04); color: #fff; border: 2px solid rgba(255,255,255,.75); }
.btn-hero-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.panah { transition: transform .15s; }
.btn-hero:hover .panah, .btn-hero-outline:hover .panah { transform: translateX(3px); }

@media (max-width: 800px) {
    .hero { padding: 48px 0 80px; }
    .hero-inner { flex-direction: column-reverse; text-align: center; }
    .hero-btn { justify-content: center; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero-logo { width: 170px; }
    .titik { width: 60%; }
}
.page-header { padding: 56px 0; text-align: center; }
.page-header h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.page-header p { color: rgba(255,255,255,.9); margin: 0; }

/* ---------- Section ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--bg-alt); }
.section-title { text-align: center; font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: 36px; }
.section-title::after { /* ornamen: garis emas dengan titik di tengah */
    content: ''; display: block; width: 110px; height: 10px; margin: 12px auto 0;
    background:
        radial-gradient(circle, var(--emas) 3.5px, transparent 4px) center / 10px 10px no-repeat,
        linear-gradient(90deg, transparent, var(--emas) 30%, transparent 46%, transparent 54%, var(--emas) 70%, transparent) center / 100% 2px no-repeat;
}
.subjudul { margin-top: -16px !important; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }

.kategori-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.chip {
    padding: 8px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--border);
    color: var(--text); text-decoration: none; font-weight: 500;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Produk ---------- */
.grid-produk { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 270px)); justify-content: center; gap: 24px; margin-bottom: 32px; }
@media (max-width: 600px) {
    .grid-produk, .grid-produk.kiri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .produk-body { padding: 12px 12px 14px; }
    .produk-body h3 { font-size: .95rem; }
    .produk-bawah .harga { font-size: 1rem; }
    .btn-tambah { width: 38px; height: 38px; border-radius: 12px; }
    .pil-kategori { left: 8px; top: 8px; font-size: .62rem; padding: 3px 8px; }
}
.produk-card { overflow: hidden; display: flex; flex-direction: column; }
.produk-img { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt); display: block; }
.produk-img img { width: 100%; height: 100%; object-fit: cover; }
.placeholder {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    font-family: var(--font-judul); font-size: 4rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #e9b52c, var(--primary));
}
.badge { position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge-habis { background: #333; color: #fff; }
.produk-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.produk-body h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.produk-body h3 a { color: var(--text); text-decoration: none; }
.produk-body .btn { margin-top: auto; }
.kategori { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.harga { color: var(--primary); font-weight: 800; font-size: 1.1rem; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.harga-besar { font-family: var(--font-judul); font-size: 2rem; font-variant-numeric: lining-nums tabular-nums; }
.detail h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; }

.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter input { flex: 1 1 220px; }

.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.detail-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--bg-alt); }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-img .placeholder { font-size: 7rem; }
.form-pesan { margin-top: 20px; padding: 20px; background: var(--bg-alt); border-radius: var(--radius); }
.qty { display: inline-flex; align-items: center; margin-top: 4px; }
.qty button { width: 40px; height: 40px; border: 1px solid var(--border); background: #fff; font-size: 1.2rem; cursor: pointer; }
.qty input { width: 70px; height: 40px; margin: 0; text-align: center; border-radius: 0; }
@media (max-width: 800px) { .detail { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Cara pesan, testimoni, galeri ---------- */
.langkah, .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 24px; }
.langkah .card { padding: 24px; text-align: center; }
.langkah span {
    display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: var(--primary);
    color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 10px;
}
.testimoni { padding: 24px; }
.bintang { color: #e9b52c; font-size: 1.2rem; letter-spacing: 2px; }
.grid-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.grid-galeri figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.grid-galeri img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.grid-galeri figcaption { padding: 8px 12px; font-size: .9rem; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 90vh; border-radius: 8px; }

.cta { text-align: center; padding: 72px 0; }

/* ---------- Form ---------- */
.form { padding: 24px; }
label { display: block; margin-bottom: 14px; font-weight: 500; }
input, select, textarea {
    display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit;
    border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
.filter input, .filter select { margin-top: 0; width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.hp { position: absolute; left: -9999px; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert-success { background: #e6f7ec; color: #1b6b3a; }
.alert-error { background: #fdecea; color: #a12a1b; }

.kontak { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: start; }
.info-kontak { padding: 24px; margin-bottom: 20px; }
.maps { width: 100%; height: 260px; border: 0; border-radius: var(--radius); }
@media (max-width: 800px) { .kontak { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--text); color: #d9dcec; padding: 48px 0 0; }
.footer a { color: #f5cf55; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.footer p { margin: 4px 0; }
.footer-logo { width: 96px; height: 96px; margin-bottom: 10px; }
.copyright { text-align: center; border-top: 1px solid rgba(255,255,255,.1); margin: 32px 0 0; padding: 16px; font-size: .9rem; }

.wa-float {
    position: fixed; right: 20px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%;
    background: var(--wa); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.25); z-index: 60;
}
.wa-float:hover { background: var(--wa-dark); }

/* ---------- Keranjang & navbar ---------- */
.nav-kanan { display: flex; align-items: center; gap: 12px; order: 2; }
.nav-menu { order: 1; margin-left: auto; margin-right: 16px; }
.cart-link { position: relative; font-size: 1.4rem; text-decoration: none; }
.cart-count {
    position: absolute; top: -6px; right: -10px; background: var(--primary); color: #fff;
    font-size: .7rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.cart-count[hidden] { display: none; }
@media (max-width: 800px) { .nav-menu { margin: 0; } }

.toast {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
    background: var(--text); color: #fff; padding: 10px 20px; border-radius: 999px;
    opacity: 0; pointer-events: none; transition: .25s; z-index: 200;
}
.toast.tampil { opacity: 1; transform: translateX(-50%); }

.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .checkout { grid-template-columns: 1fr; } }
.cart-list { padding: 8px 16px; }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: 0; }
.cart-habis { opacity: .6; }
.cart-thumb {
    width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, #e9b52c, var(--primary)); color: #fff; font-weight: 800; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cart-info span { color: var(--primary); font-weight: 600; }
.cart-item .qty button { width: 32px; height: 32px; }
.cart-item .qty input { width: 50px; padding: 4px; margin: 0; }
.hapus { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.hapus:hover { color: #e03131; }
.merah { color: #e03131; }
.total-checkout { font-size: 1.2rem; }
.pilihan { border: 0; padding: 0; margin: 0 0 14px; }
.pilihan legend { font-weight: 500; margin-bottom: 4px; }
.pilihan label { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 0 0; font-weight: 400; }
.pilihan input { width: auto; margin: 0; }

.sempit { max-width: 640px; }
.sempit > .card, .sempit > .alert { margin-bottom: 20px; }
.ikon-sukses {
    width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--wa);
    color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center;
}
.kode-pesanan { font-size: 1.6rem; font-weight: 800; letter-spacing: 2px; color: var(--primary); margin: 0; font-variant-numeric: tabular-nums; }
.tabel-ringkas { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.tabel-ringkas td { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.tabel-ringkas .total td { font-weight: 700; border-bottom: 0; }
.kanan { text-align: right; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }

.progres { display: flex; list-style: none; padding: 0; margin: 20px 0; counter-reset: s; }
.progres li { flex: 1; text-align: center; position: relative; font-size: .9rem; color: var(--muted); counter-increment: s; }
.progres li::before {
    content: counter(s); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px;
    width: 32px; height: 32px; border-radius: 50%; background: #e2e3ec; color: #fff; font-weight: 700; position: relative; z-index: 1;
}
.progres li + li::after { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: #e2e3ec; }
.progres li.selesai { color: var(--text); font-weight: 600; }
.progres li.selesai::before, .progres li.selesai::after { background: var(--wa); }

/* ---------- Rating & ulasan ---------- */
.meta { font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.bintang-kecil { color: #e9b52c; }
.badge-sisa { background: #e9b52c; color: #fff; }
.stok-info { margin-top: 0; }
.aksi-pesan { display: flex; gap: 10px; flex-wrap: wrap; }
.aksi-pesan .btn { flex: 1; }
.ulasan-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .ulasan-wrap { grid-template-columns: 1fr; } }
.ulasan { padding: 14px 18px; margin-bottom: 12px; }
.ulasan p { margin: 6px 0 0; }
.ulasan small { color: var(--muted); }
.rating-input { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.rating-input legend { font-weight: 500; width: 100%; }
.rating-input input { position: absolute; opacity: 0; width: 0; }
.rating-input label { font-size: 2rem; color: #ddd; cursor: pointer; margin: 0; line-height: 1; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: #e9b52c; }
.rating-input input:focus-visible + label { outline: 2px solid var(--primary); }

/* ---------- Rekomendasi (SAW) ---------- */
.subjudul { color: var(--muted); margin-top: -20px; margin-bottom: 28px; }
.chip-aktif { background: var(--primary); border-color: var(--primary); color: #fff; }
.ranking { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.ranking-item { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.peringkat { font-family: var(--font-judul); font-style: italic; font-size: 1.7rem; font-weight: 800; color: var(--primary); width: 52px; font-variant-numeric: lining-nums; }
.ranking-info { flex: 1; min-width: 0; }
.ranking-info h3 { margin: 0; font-size: 1.05rem; }
.ranking-info h3 a { color: var(--text); text-decoration: none; }
.skor-bar { height: 6px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.skor-bar span { display: block; height: 100%; background: linear-gradient(90deg, #e9b52c, var(--primary)); }
.ranking-aksi { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ranking-aksi strong { font-size: 1.3rem; line-height: 1; }
.ranking-aksi small { color: var(--muted); font-size: .75rem; }
@media (max-width: 500px) { .ranking-item { flex-wrap: wrap; } .ranking-aksi { flex-direction: row; width: 100%; justify-content: flex-end; } }

/* =====================================================================
   TAMPILAN v2 — navbar kaca, hero modern, kartu produk, section baru
   (blok ini sengaja di akhir agar menimpa aturan dasar di atas)
   ===================================================================== */
:root {
    --radius: 18px;
    --radius-besar: 28px;
    --shadow: 0 1px 2px rgba(15,25,60, .05), 0 8px 24px rgba(15,25,60, .07);
    --shadow-angkat: 0 2px 4px rgba(15,25,60, .06), 0 18px 40px rgba(15,25,60, .14);
    --gradien-utama: linear-gradient(135deg, #e70498 0%, #3b2fc9 55%, #1d3fa0 100%);
}
html { scroll-behavior: smooth; }
::selection { background: #ffd8a8; color: #13235a; }
:focus-visible { outline: 3px solid #e9b52c; outline-offset: 2px; }
.ikon { flex-shrink: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn-block { display: flex; }
.btn-primary { background: var(--gradien-utama); box-shadow: 0 6px 16px rgba(29,63,160, .28); }
.btn-primary:hover { background: var(--gradien-utama); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(29,63,160, .35); }
.card { border-radius: var(--radius); border-color: rgba(228,224,212, .7); }

/* ---------- Navbar kaca ---------- */
.navbar {
    background: rgba(251,248,241, .78);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    box-shadow: none; border-bottom: 1px solid transparent;
    transition: background .25s, box-shadow .25s, border-color .25s;
}
.navbar.scrolled { background: rgba(251,248,241, .92); border-bottom-color: rgba(228,224,212, .8); box-shadow: 0 6px 24px rgba(15,25,60, .08); }
.nav-inner { position: relative; min-height: 72px; transition: min-height .25s; }
.navbar.scrolled .nav-inner { min-height: 60px; }
.logo img { transition: width .25s, height .25s; }
.navbar.scrolled .logo img { width: 38px; height: 38px; }
.nav-menu { gap: 4px; }
.nav-menu a:not(.btn) { position: relative; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; transition: color .2s, background .2s; }
.nav-menu a:not(.btn):hover { background: rgba(29,63,160, .07); }
.nav-menu a.aktif { color: var(--primary); background: rgba(29,63,160, .1); }
.cart-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
    background: var(--text); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
    transition: transform .15s, background .2s;
}
.cart-link:hover { background: #13235a; transform: translateY(-1px); }
.cart-count { position: static; min-width: 22px; height: 22px; background: var(--gradien-utama); color: #fff; font-size: .75rem; }
.cart-count.bump { animation: bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.45); } }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(20,26,51, .06); flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s, opacity .2s; }
.nav-toggle.buka span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.buka span:nth-child(2) { opacity: 0; }
.nav-toggle.buka span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
    .nav-toggle { display: inline-flex; }
    .cart-label { display: none; }
    .cart-link { padding: 9px 12px; }
    .nav-menu {
        display: flex; position: absolute; top: 100%; left: 12px; right: 12px; margin: 0;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
        background: rgba(251,248,241, .98); border: 1px solid var(--border); border-radius: 20px;
        box-shadow: var(--shadow-angkat);
        opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
        transition: opacity .2s, transform .2s, visibility .2s;
    }
    .nav-menu.buka { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
    .nav-menu a:not(.btn) { padding: 12px 16px; }
}

/* ---------- Hero ---------- */
.hero { padding: 96px 0 150px; }
.hero::after, .page-header::after { /* gelombang pemisah ke konten */
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; z-index: 1;
    background: var(--bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 75 480 75 720 50S1200 5 1440 30V70H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 75 480 75 720 50S1200 5 1440 30V70H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.page-header { padding: 64px 0 100px; }
.page-header::after { height: 48px; }
.eyebrow-kaca {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: #f4f1fb;
}
.eyebrow-kaca .ikon { color: #fde675; }
.hero-teks { max-width: 620px; }
.hero-poin { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 28px 0 0; font-size: .92rem; font-weight: 500; color: #e9e4f5; }
.hero-poin li { display: inline-flex; align-items: center; gap: 6px; }
.hero-poin .ikon { color: #fde675; }
.hero-visual { position: relative; flex-shrink: 0; padding: 20px; }
.cincin { /* cincin emas berputar di sekitar logo */
    position: absolute; inset: -18px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 214, 120, .9) 30%, transparent 42% 70%, rgba(255, 240, 200, .7) 80%, transparent 90%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: putar 14s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }
.hero-logo { animation: melayang 6s ease-in-out infinite; }
@keyframes melayang { 50% { transform: translateY(-10px); } }
.kartu-melayang {
    position: absolute; left: -96px; bottom: -34px; z-index: 2; display: flex; align-items: center; gap: 12px;
    padding: 10px 18px 10px 10px; border-radius: 18px; text-decoration: none; color: var(--text);
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(6,12,36, .3); animation: melayang 6s ease-in-out -3s infinite;
}
.kartu-melayang img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; }
.kartu-melayang span { display: flex; flex-direction: column; line-height: 1.25; }
.kartu-melayang small { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kartu-melayang strong { font-size: .95rem; }
.kartu-melayang em { font-style: normal; font-weight: 800; color: var(--primary); }
@media (max-width: 800px) {
    .hero { padding: 40px 0 110px; }
    .hero-poin { justify-content: center; }
    .hero-visual { padding: 10px; }
    .cincin { inset: -10px; }
    .kartu-melayang { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cincin, .hero-logo, .kartu-melayang { animation: none; } }

/* ---------- Judul section ---------- */
.eyebrow { display: inline-block; margin-bottom: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.eyebrow-terang { color: #f5cf55; }
.kepala-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.kepala-section h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 800; margin: 0; }
.kepala-section .sub { margin: 8px 0 0; color: var(--muted); }
.kepala-section.tengah { justify-content: center; text-align: center; }
.link-panah { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--primary); }
.link-panah .ikon { transition: transform .15s; }
.link-panah:hover .ikon { transform: translateX(4px); }
.kategori-list.kiri { justify-content: flex-start; margin-bottom: 28px; }
.chip { font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.chip-aktif, .chip-aktif:hover { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- Keunggulan ---------- */
.keunggulan-wrap { padding-top: 8px; }
.keunggulan { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.fitur { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid rgba(228,224,212, .7); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.fitur:hover { box-shadow: var(--shadow-angkat); }
.fitur-ikon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; color: #fff; background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(29,63,160, .3); }
.fitur h3 { font-size: 1rem; margin: 2px 0 4px; }
.fitur p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* ---------- Kartu produk ---------- */
.grid-produk.kiri { justify-content: start; }
.produk-card { border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.produk-card:hover { box-shadow: var(--shadow-angkat); }
.produk-img { overflow: hidden; aspect-ratio: 1 / 1; }
.produk-img img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.produk-card:hover .produk-img img { transform: scale(1.07); }
.pil-kategori { position: absolute; left: 12px; top: 12px; padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text); background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.badge { left: auto; right: 12px; top: 12px; }
.produk-body { padding: 16px 18px 18px; }
.produk-body h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 4px; }
.produk-body h3 a:hover { color: var(--primary); }
.produk-body .meta { min-height: 1.2em; }
.produk-bawah { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.produk-bawah .harga { margin: 0; font-size: 1.2rem; }
.btn-tambah {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0;
    border: 0; border-radius: 14px; cursor: pointer; color: #fff; background: var(--gradien-utama);
    box-shadow: 0 8px 18px rgba(29,63,160, .3); transition: transform .2s, box-shadow .2s;
}
.btn-tambah:hover { transform: translateY(-2px) rotate(90deg); box-shadow: 0 12px 24px rgba(29,63,160, .4); }
.btn-tambah:active { transform: scale(.92); }
.habis-teks { font-size: .85rem; font-weight: 700; color: var(--muted); }
.placeholder { font-size: 5rem; }

/* ---------- Sorotan produk unggulan ---------- */
.sorotan { position: relative; overflow: hidden; padding: 88px 0; color: #fff; background: radial-gradient(ellipse 50% 70% at 20% 50%, rgba(59,47,201, .45), transparent 70%), linear-gradient(120deg, #0b1433, #13235a 55%, #1c2d6e); }
.sorotan-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sorotan-foto { position: relative; }
.sorotan-foto::before { content: ''; position: absolute; inset: 8% -4% -6% 8%; border-radius: var(--radius-besar); background: var(--gradien-utama); opacity: .55; filter: blur(30px); }
.sorotan-foto img { position: relative; width: 100%; border-radius: var(--radius-besar); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.sorotan-teks h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.sorotan-teks p { color: #f3dcc6; }
.sorotan-harga { font-family: var(--font-judul); font-size: 2.2rem; font-weight: 800; color: #f5cf55 !important; margin: 4px 0 0; font-variant-numeric: lining-nums; }
@media (max-width: 800px) { .sorotan { padding: 64px 0; } .sorotan-inner { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Cara pesan ---------- */
.langkah { list-style: none; padding: 0; margin: 0; counter-reset: langkah; }
.langkah li { position: relative; text-align: center; padding: 28px 22px; background: #fff; border: 1px solid rgba(228,224,212, .7); border-radius: var(--radius); box-shadow: var(--shadow); counter-increment: langkah; }
.langkah li::before { content: counter(langkah, decimal-leading-zero); position: absolute; top: 14px; right: 18px; font-family: var(--font-judul); font-size: 2.2rem; font-weight: 800; color: rgba(29,63,160, .12); font-variant-numeric: lining-nums; }
.langkah .langkah-ikon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 20px; color: var(--primary); background: #f3efe6; }
.langkah h3 { font-size: 1.1rem; }
.langkah p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Testimoni & galeri ---------- */
.testimoni { margin: 0; }
.testimoni blockquote { margin: 10px 0 14px; font-size: 1.02rem; line-height: 1.6; }
.testimoni figcaption { font-weight: 700; }
.grid-galeri figure { border-radius: var(--radius); }
.grid-galeri img { transition: transform .5s; }
.grid-galeri figure:hover img { transform: scale(1.05); }

/* ---------- CTA kartu ---------- */
.cta { border-radius: var(--radius-besar); padding: 56px 48px; text-align: left; }
.cta-isi { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta h2 { margin-bottom: 6px; }
.cta p { margin: 0; color: #e9e4f5; }
.cta .hero-btn { margin-top: 0; }
@media (max-width: 700px) { .cta { padding: 40px 24px; text-align: center; } .cta-isi { justify-content: center; } .cta .hero-btn { justify-content: center; } }

/* ---------- Footer ---------- */
.footer { position: relative; padding-top: 64px; background: #0a1029; color: #b8bdd6; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #c8961e 20%, #fde675 50%, #c8961e 80%, transparent); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 16px; }
.footer-logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff !important; font-weight: 800; font-size: 1.2rem; letter-spacing: .12em; }
.footer-logo { width: 64px; height: 64px; margin: 0; }
.footer-brand p { margin-top: 14px; line-height: 1.7; font-size: .92rem; }
.footer-link, .footer-kontak { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .95rem; }
.footer a { color: #b8bdd6; text-decoration: none; transition: color .2s; }
.footer a:hover { color: #f5cf55; }
.footer-kontak li { display: flex; gap: 10px; align-items: flex-start; }
.footer-kontak .ikon { color: #f5cf55; margin-top: 2px; }
.footer-bawah { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }
.footer-bawah p { margin: 0; }

/* ---------- Animasi muncul ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.js-reveal [data-reveal].tampil { opacity: 1; transform: none; }
.produk-card.tampil:hover, .js-reveal .produk-card[data-reveal].tampil:hover, .produk-card:hover { transform: translateY(-6px); }
.fitur:hover, .js-reveal .fitur[data-reveal].tampil:hover { transform: translateY(-3px); }

/* ---------- Penyegaran halaman lain ---------- */
input, select, textarea { border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #e9b52c; box-shadow: 0 0 0 4px rgba(233,181,44, .2); }
.qty input { border-radius: 0; box-shadow: none; }
.detail-img { border-radius: var(--radius-besar); box-shadow: var(--shadow-angkat); }
.form-pesan { border-radius: var(--radius); }
.wa-float { box-shadow: 0 10px 28px rgba(37, 211, 102, .45); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }

/* ---------- Pilihan rasa / varian ---------- */
.pilihan-varian { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.pilihan-varian legend { width: 100%; font-weight: 600; margin-bottom: 8px; }
.pilihan-varian label { position: relative; margin: 0; cursor: pointer; }
.pilihan-varian input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilihan-varian span {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 999px;
    border: 2px solid var(--border); background: #fff; font-weight: 600; transition: border-color .15s, background .15s, color .15s;
}
.pilihan-varian label:hover span { border-color: #e9b52c; }
.pilihan-varian input:checked + span { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(29,63,160, .25); }
.pilihan-varian input:checked + span::before { content: '\2713'; }
.pilihan-varian input:focus-visible + span { outline: 3px solid #e9b52c; outline-offset: 2px; }
.pilihan-varian.perlu-dipilih span { border-color: #e03131; }
.pilihan-varian.perlu-dipilih { animation: goyang .4s; }
@keyframes goyang { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .pilihan-varian.perlu-dipilih { animation: none; } }
.varian-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.varian-mini span { padding: 2px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--primary-dark); font-size: .75rem; font-weight: 700; }
.cart-varian { font-style: normal; font-size: .85rem; font-weight: 600; color: var(--muted); }
a.btn-tambah { text-decoration: none; }

/* =====================================================================
   ANIMASI HOVER PRODUK — miring 3D, pantulan cahaya, kilatan, glow
   Posisi kursor dikirim dari JS lewat --mx / --my (0–100%)
   ===================================================================== */
[data-tilt] { --mx: 50%; --my: 50%; backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; }

/* Pantulan cahaya yang mengikuti kursor */
.produk-card[data-tilt]::after,
.sorotan-foto[data-tilt]::after,
.detail-img[data-tilt]::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
}
.produk-card[data-tilt]:hover::after,
.sorotan-foto[data-tilt]:hover::after,
.detail-img[data-tilt]:hover::after { opacity: 1; }
.produk-card, .detail-img { position: relative; }
.sorotan-foto[data-tilt] { border-radius: var(--radius-besar); }

/* Kilatan cahaya diagonal menyapu foto sekali saat disorot */
.produk-img::before {
    content: ''; position: absolute; top: 0; left: -75%; z-index: 2; width: 50%; height: 100%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
}
.produk-card:hover .produk-img::before { animation: kilatan .85s ease; }
@keyframes kilatan { to { left: 130%; } }

/* Foto membesar sedikit dan bergeser berlawanan arah kursor (efek kedalaman) */
.produk-card .produk-img img { transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s; }
.produk-card:hover .produk-img img {
    transform: scale(1.12) translate(calc((50% - var(--mx)) * .06), calc((50% - var(--my)) * .06));
    filter: saturate(1.15) contrast(1.05);
}

/* Cahaya oranye di sekeliling kartu */
.produk-card { transition: box-shadow .35s, border-color .35s; }
.produk-card:hover {
    border-color: rgba(233,181,44, .7);
    box-shadow: 0 22px 45px rgba(29,63,160, .22), 0 0 0 1px rgba(233,181,44, .35), 0 0 32px rgba(231,4,152, .25);
}


/* Nama produk berubah warna dengan garis bawah yang memanjang */
.produk-body h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s, color .2s; }
.produk-card:hover .produk-body h3 a { color: var(--primary); background-size: 100% 2px; }

/* Label rasa muncul bergantian */
.produk-card:hover .varian-mini span { animation: muncul .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.produk-card:hover .varian-mini span:nth-child(2) { animation-delay: .07s; }
.produk-card:hover .varian-mini span:nth-child(3) { animation-delay: .14s; }
@keyframes muncul { from { transform: translateY(6px) scale(.85); opacity: .4; } }

/* Tombol + berdenyut */
.produk-card:hover .btn-tambah { animation: denyut 1.4s ease-in-out infinite; }
@keyframes denyut {
    0%, 100% { box-shadow: 0 8px 18px rgba(29,63,160, .3), 0 0 0 0 rgba(231,4,152, .55); }
    50% { box-shadow: 0 8px 18px rgba(29,63,160, .3), 0 0 0 10px rgba(231,4,152, 0); }
}
.produk-card .btn-tambah:hover { animation: none; }

/* Foto sorotan & detail ikut membesar halus */
.sorotan-foto img, .detail-img img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sorotan-foto[data-tilt]:hover img { transform: scale(1.02); }
.detail-img { overflow: hidden; }
.detail-img[data-tilt]:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .produk-card:hover .produk-img::before, .produk-card:hover .varian-mini span, .produk-card:hover .btn-tambah { animation: none; }
    .produk-card:hover .produk-img img, .detail-img[data-tilt]:hover img { transform: none; }
}

/* =====================================================================
   SLIDESHOW FOTO PRODUK (halaman detail) + ganti foto di kartu produk
   ===================================================================== */
.galeri-produk { min-width: 0; }
/* Geser: slide masuk dari kanan, slide lama keluar ke kiri (dibalik saat mundur) */
.detail-img .slide {
    position: absolute; inset: 0; margin: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transform: translateX(100%); visibility: hidden;
    transition: transform .8s cubic-bezier(.65, 0, .35, 1), visibility 0s .8s;
}
.detail-img[data-arah="mundur"] .slide { transform: translateX(-100%); }
.detail-img .slide.aktif { transform: translateX(0); visibility: visible; z-index: 1; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.detail-img .slide.keluar { transform: translateX(-100%); visibility: visible; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.detail-img[data-arah="mundur"] .slide.keluar { transform: translateX(100%); }
.detail-img .slide:not(.aktif):not(.keluar) { transition: none; }
.detail-img:not([data-slideshow]) .slide { transform: none; visibility: visible; }
/* latar blur dari foto yang sama, agar foto non-persegi tampil utuh */
.detail-img .slide::before {
    content: ''; position: absolute; inset: -30px; background: var(--bg) center / cover no-repeat;
    filter: blur(24px) brightness(.85) saturate(1.2);
}
.detail-img .slide img {
    position: relative; width: 100%; height: 100%; object-fit: contain;
    transform: scale(1.06); transition: transform 5.5s ease-out;
}
.detail-img .slide.aktif img { transform: scale(1); }
.detail-img[data-tilt]:hover .slide img { transform: scale(1.03); transition: transform .6s; }

.slide-nav {
    position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px;
    border: 0; border-radius: 50%; cursor: pointer; font-size: 1.8rem; line-height: 1; color: var(--text);
    background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .25s, transform .2s;
}
.slide-nav.prev { left: 14px; }
.slide-nav.next { right: 14px; }
.detail-img:hover .slide-nav, .slide-nav:focus-visible { opacity: 1; }
.slide-nav:hover { transform: scale(1.1); }
@media (hover: none) { .slide-nav { opacity: .9; } }

.slide-progres { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 4px; background: rgba(255, 255, 255, .3); }
.slide-progres span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5cf55, var(--primary)); }
.slide-progres span.jalan { animation: progres var(--durasi, 4s) linear forwards; }
.detail-img:hover .slide-progres span.jalan { animation-play-state: paused; }
@keyframes progres { to { width: 100%; } }

.slide-thumb { display: flex; gap: 10px; margin-top: 14px; }
.slide-thumb button {
    width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden;
    cursor: pointer; background: var(--bg-alt); opacity: .6; transition: opacity .2s, border-color .2s, transform .2s;
}
.slide-thumb button img { width: 100%; height: 100%; object-fit: cover; }
.slide-thumb button:hover { opacity: 1; transform: translateY(-2px); }
.slide-thumb button.aktif { opacity: 1; border-color: var(--primary); box-shadow: 0 6px 14px rgba(29,63,160, .25); }

/* Kartu produk: foto berganti ke foto kedua saat disorot */
.produk-img .foto-kedua { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.produk-card:hover .produk-img .foto-kedua { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .detail-img .slide, .detail-img .slide.aktif, .detail-img .slide.keluar, .detail-img .slide img, .produk-img .foto-kedua { transition: none; }
    .detail-img .slide img { transform: none; }
}

/* Tombol petunjuk arah di halaman Kontak */
.btn-arah { margin-top: 12px; }
.maps { display: block; box-shadow: var(--shadow); }

/* =====================================================================
   HERO + PRODUK UNGGULAN (digabung dalam satu bagian)
   ===================================================================== */
.hero-visual .kartu-unggulan {
    position: relative; width: min(420px, 100%); padding: 14px; border-radius: 28px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px rgba(6,12,36, .35); color: #fff; text-align: left;
    animation: melayang 7s ease-in-out infinite;
}
.unggulan-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; }
.unggulan-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.unggulan-foto:hover img { transform: scale(1.06); }
.unggulan-foto[data-tilt]::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .45), transparent 45%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
}
.unggulan-foto[data-tilt]:hover::after { opacity: 1; }

/* Logo jadi lencana di sudut kiri atas foto */
.hero-logo-wrap.lencana { position: absolute; top: -34px; left: -34px; z-index: 3; }
.hero-logo-wrap.lencana::after { display: none; }
.hero-logo-wrap.lencana .hero-logo { width: 96px; height: 96px; animation: none; filter: drop-shadow(0 8px 18px rgba(6,12,36, .5)); }
.hero-logo-wrap.lencana .cincin { inset: -8px; }

.unggulan-isi { padding: 14px 6px 4px; }
.unggulan-isi .eyebrow { margin-bottom: 4px; }
.unggulan-isi h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.unggulan-isi p { margin: 0 0 10px; font-size: .9rem; line-height: 1.55; color: #e9e4f5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.unggulan-isi .varian-mini span { background: rgba(255, 255, 255, .18); color: #fff; }
.unggulan-bawah { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.unggulan-bawah .sorotan-harga { margin: 0; font-size: 1.7rem; }
.unggulan-bawah .btn-sm { padding: 10px 18px; font-size: .9rem; }

@media (max-width: 800px) {
    .hero-visual .kartu-unggulan { width: min(400px, 100%); margin-top: 24px; animation: none; }
    .hero-logo-wrap.lencana { top: -26px; left: -10px; }
    .hero-logo-wrap.lencana .hero-logo { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .hero-visual .kartu-unggulan { animation: none; } }
@media (max-width: 800px) { .hero-inner:has(.kartu-unggulan) { flex-direction: column; } }
@media (min-width: 801px) {
    .hero-inner:has(.kartu-unggulan) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
    .hero-inner:has(.kartu-unggulan) .hero-teks { max-width: none; }
    .hero-inner:has(.kartu-unggulan) .hero-visual { display: flex; justify-content: flex-end; padding: 34px 0 0 34px; }
    .hero:has(.kartu-unggulan) { padding-top: 72px; }
}

/* =====================================================================
   NAVIGASI SAMPING MELAYANG (bar kaca di kiri, khusus desktop)
   ===================================================================== */
.rail { display: none; }
@media (min-width: 961px) {
    .container { padding-left: max(16px, calc(108px - max(0px, (100vw - 1140px) / 2))); }
    .navbar { display: none; }
    .rail {
        position: fixed; z-index: 90; left: 18px; top: 50%; transform: translateY(-50%);
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        padding: 12px 10px; border-radius: 28px;
        background: rgba(251,248,241, .72); border: 1px solid rgba(228,224,212, .9);
        -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
        box-shadow: 0 18px 40px rgba(15,25,60, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
    }
    .rail-logo img { width: 46px; height: 46px; transition: transform .3s; filter: drop-shadow(0 4px 8px rgba(15,25,60, .25)); }
    .rail-logo:hover img { transform: rotate(-8deg) scale(1.06); }
    .rail-menu { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .rail-item {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; border-radius: 16px; color: var(--muted); text-decoration: none;
        transition: background .2s, color .2s, transform .2s;
    }
    .rail-item:hover { color: var(--primary); background: rgba(29,63,160, .09); transform: translateX(2px); }
    .rail-item.aktif { color: #fff; background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(29,63,160, .35); }
    /* Penanda kecil di kiri untuk halaman aktif */
    .rail-item.aktif::before { content: ''; position: absolute; left: -11px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
    .rail-cart { color: #fff; background: var(--text); }
    .rail-cart:hover { color: #fff; background: #13235a; }
    .rail-cart .cart-count { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; font-size: .7rem; box-shadow: 0 0 0 2px #fff; }

    /* Label muncul saat disorot */
    .rail-label {
        position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%);
        padding: 7px 12px; border-radius: 10px; white-space: nowrap; font-size: .85rem; font-weight: 700;
        color: #fff; background: var(--text); box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
        opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
    }
    .rail-label::before { content: ''; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--text); }
    .rail-item:hover .rail-label, .rail-item:focus-visible .rail-label { opacity: 1; transform: translate(0, -50%); }

    /* Layar pendek: perkecil agar semua ikon tetap muat */
    @media (max-height: 640px) {
        .rail { gap: 6px; padding: 8px; }
        .rail-item { width: 40px; height: 40px; border-radius: 12px; }
        .rail-logo img { width: 38px; height: 38px; }
    }
}
@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
    .rail-item, .rail-label, .rail-logo img { transition: none; }
}

/* =====================================================================
   TATA LETAK LEBAR + DEKORASI (mengurangi ruang kosong)
   ===================================================================== */
.container { max-width: 1440px; }
@media (min-width: 961px) {
    .container { padding-right: 32px; padding-left: max(32px, calc(112px - max(0px, (100vw - 1440px) / 2))); }
}
.section { padding: 40px 0; }
.keunggulan-wrap { padding-top: 0; padding-bottom: 8px; }
.hero:has(.kartu-unggulan) { padding-top: 56px; padding-bottom: 120px; }
.page-header { padding: 48px 0 84px; }
.kepala-section { margin-bottom: 22px; }

/* Latar halaman: cahaya hangat di tepi + pola titik halus */
body {
    background:
        radial-gradient(900px 600px at 0% 30%, rgba(233,181,44, .13), transparent 60%),
        radial-gradient(900px 600px at 100% 70%, rgba(29,63,160, .09), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
main { position: relative; }
main::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(26,47,120, .07) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

/* Judul section: garis aksen sebelum eyebrow */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.kepala-section.tengah .eyebrow::after { content: ''; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }

/* Produk: 4 sejajar mengisi lebar; kartu tunggal tidak melebar berlebihan */
.grid-produk, .grid-produk.kiri { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-content: stretch; gap: 22px; margin-bottom: 8px; }
.grid-produk > .produk-card { max-width: 420px; }

/* Pita berjalan */
.pita-berjalan {
    position: relative; overflow: hidden; margin: 18px 0 6px; padding: 14px 0;
    background: var(--gradien-utama); color: #fff; transform: rotate(-1.2deg) scale(1.02);
    box-shadow: 0 10px 26px rgba(29,63,160, .25);
}
.pita-isi { display: flex; width: max-content; animation: pita 32s linear infinite; }
.pita-isi span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pita-isi span::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fde675; }
.pita-isi .pita-slogan { font-family: var(--font-judul); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: #f4f1fb; }
.pita-berjalan:hover .pita-isi { animation-play-state: paused; }
@keyframes pita { to { transform: translateX(-50%); } }

/* Cara pesan: garis putus-putus penghubung antar langkah */
.langkah { position: relative; gap: 22px; }
@media (min-width: 801px) {
    .langkah::before { content: ''; position: absolute; left: 12%; right: 12%; top: 60px; border-top: 2px dashed rgba(29,63,160, .3); }
    .langkah li { background: rgba(255, 255, 255, .92); }
}

/* Galeri bento di beranda: 1 foto besar + 4 kecil */
.grid-galeri.bento { grid-template-columns: repeat(4, 1fr); }
.grid-galeri.bento figure { aspect-ratio: 1; }
.grid-galeri.bento figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.grid-galeri.bento figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 700px) {
    .grid-galeri.bento { grid-template-columns: repeat(2, 1fr); }
}

/* CTA lebih padat */
.cta { padding: 44px 48px; }

@media (prefers-reduced-motion: reduce) { .pita-isi { animation: none; } }

/* Cegah geser horizontal akibat pita miring */
html, body { overflow-x: clip; }
@media (max-width: 600px) {
    .grid-produk, .grid-produk.kiri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grid-produk > .produk-card { max-width: none; }
    .pita-isi span { font-size: .85rem; gap: 14px; padding-right: 14px; }
}

/* =====================================================================
   BINGKAI MENGIKUTI UKURAN FOTO (tanpa pita blur atas/bawah)
   ===================================================================== */
/* Detail produk: tinggi kotak diatur JS sesuai rasio foto aktif */
.detail-img { transition: height .65s cubic-bezier(.65, 0, .35, 1), box-shadow .35s; }
.detail-img.pas-rasio { aspect-ratio: auto; }
.detail-img .slide::before { display: none; }
.detail-img .slide img { object-fit: cover; }

/* Halaman Galeri: masonry, setiap foto utuh sesuai ukurannya */
.hal-galeri .grid-galeri { display: block; columns: 4 260px; column-gap: 16px; }
.hal-galeri .grid-galeri figure { break-inside: avoid; margin: 0 0 16px; }
.hal-galeri .grid-galeri img { aspect-ratio: auto; height: auto; }

/* Kartu produk unggulan di hero: foto utuh */
.unggulan-foto { aspect-ratio: auto; }
.unggulan-foto img { height: auto; }

/* =====================================================================
   PRODUK UNGGULAN "MAJU TIMBUL" + ANIMASI LOGO MOTHER RI
   ===================================================================== */
/* Animasi melayang dipindah ke pembungkus agar tidak bentrok dengan efek miring 3D kartu */
.hero-visual:has(.kartu-unggulan) { animation: melayang 7s ease-in-out infinite; perspective: 1000px; }
.hero-visual .kartu-unggulan {
    animation: none; transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s, background .4s;
}
.hero-visual .kartu-unggulan:hover {
    border-color: rgba(255, 226, 154, .75); background: rgba(255, 255, 255, .17);
    box-shadow: 0 50px 90px rgba(6,12,36, .55), 0 0 0 1px rgba(255, 214, 120, .35), 0 0 60px rgba(231,4,152, .45);
}
/* Lapisan di dalam kartu terangkat berbeda-beda -> kesan timbul */
.kartu-unggulan .unggulan-foto { transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.kartu-unggulan:hover .unggulan-foto { transform: translateY(-8px) scale(1.035); box-shadow: 0 24px 40px rgba(6,12,36, .45); }
.kartu-unggulan .hero-logo-wrap.lencana { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.kartu-unggulan:hover .hero-logo-wrap.lencana { transform: translate(-8px, -10px) scale(1.14); }
.kartu-unggulan .unggulan-bawah .btn { transition: transform .4s, box-shadow .3s; }
.kartu-unggulan:hover .unggulan-bawah .btn { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(20,30,90, .45); }
/* Kilau mengikuti kursor (posisi --mx/--my diwarisi dari kartu) */
.kartu-unggulan::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 45%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
}
.kartu-unggulan:hover::after { opacity: 1; }
.kartu-unggulan:hover .unggulan-foto img { transform: scale(1.05); }

/* ---------- Logo MOTHER RI ---------- */
.hero-logo-wrap.lencana { perspective: 600px; }
.hero-logo-wrap.lencana .hero-logo {
    animation: logo-masuk 1.1s cubic-bezier(.3, 1.4, .5, 1) both, logo-koin 7s ease-in-out 1.4s infinite;
    transform-style: preserve-3d; backface-visibility: visible;
}
.hero-logo-wrap.lencana:hover .hero-logo { animation: logo-putar .9s cubic-bezier(.4, 0, .2, 1); }
@keyframes logo-masuk {
    0%   { opacity: 0; transform: scale(.2) rotate(-200deg); }
    70%  { opacity: 1; transform: scale(1.15) rotate(12deg); }
    100% { transform: scale(1) rotate(0); }
}
/* berputar pelan seperti koin, berhenti sejenak menghadap depan */
@keyframes logo-koin {
    0%, 55%, 100% { transform: rotateY(0); }
    75% { transform: rotateY(180deg); }
    95% { transform: rotateY(360deg); }
}
@keyframes logo-putar { to { transform: rotateY(360deg) scale(1.1); } }

/* Kilau cahaya menyapu permukaan logo */
.kilap-logo {
    position: absolute; inset: 8%; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none;
}
.kilap-logo::before {
    content: ''; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: rotate(25deg); animation: kilap-logo 4.5s ease-in-out 1.2s infinite;
}
@keyframes kilap-logo { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }

/* Pendar emas berdenyut di sekeliling logo */
.hero-logo-wrap.lencana::before {
    content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 214, 120, .7); animation: pendar 2.6s ease-out 1.2s infinite;
}
@keyframes pendar { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 120, .6); } 100% { box-shadow: 0 0 0 22px rgba(255, 214, 120, 0); } }

/* Logo di bar samping ikut berkilau saat disorot */
.rail-logo { position: relative; display: block; border-radius: 50%; }
.rail-logo:hover img { animation: logo-putar .8s cubic-bezier(.4, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) {
    .hero-visual:has(.kartu-unggulan), .hero-logo-wrap.lencana .hero-logo, .kilap-logo::before,
    .hero-logo-wrap.lencana::before, .rail-logo:hover img { animation: none; }
}

/* =====================================================================
   TOMBOL MUSIK KOLINTANG (melayang di atas tombol WhatsApp)
   ===================================================================== */
.tombol-musik {
    position: fixed; right: 20px; bottom: 92px; z-index: 60;
    display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem;
    color: #fff; background: linear-gradient(135deg, #1a2b6b, #0b1433);
    box-shadow: 0 10px 26px rgba(6,12,36, .35), inset 0 0 0 1px rgba(255, 214, 120, .35);
    transition: transform .2s, box-shadow .3s;
}
.tombol-musik:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6,12,36, .45), inset 0 0 0 1px rgba(255, 214, 120, .7); }
.musik-ikon { display: inline-flex; color: #f5cf55; }
.musik-label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s; }
.tombol-musik:hover .musik-label, .tombol-musik:focus-visible .musik-label { max-width: 140px; }
/* Equalizer: diam saat mati, bergoyang saat musik main */
.musik-bar { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.musik-bar i { width: 3px; height: 30%; border-radius: 2px; background: #f5cf55; }
.tombol-musik.main .musik-ikon { display: none; }
.tombol-musik.main .musik-bar { display: inline-flex; }
.tombol-musik.main .musik-bar i { animation: eq .9s ease-in-out infinite; }
.tombol-musik.main .musik-bar i:nth-child(2) { animation-delay: -.3s; }
.tombol-musik.main .musik-bar i:nth-child(3) { animation-delay: -.6s; }
.tombol-musik.main .musik-bar i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.tombol-musik.main { background: var(--gradien-utama); }
.tombol-musik.main .musik-bar i { background: #fff; }
/* Musik pernah dinyalakan -> menunggu klik pertama di halaman */
.tombol-musik.menunggu { animation: denyut-musik 1.6s ease-in-out infinite; }
@keyframes denyut-musik { 50% { box-shadow: 0 10px 26px rgba(6,12,36, .35), 0 0 0 8px rgba(245,207,85, .25); } }
@media (prefers-reduced-motion: reduce) { .tombol-musik.main .musik-bar i, .tombol-musik.menunggu { animation: none; } .musik-bar i { height: 70%; } }

/* =====================================================================
   HERO: LATAR MOZAIK FOTO GALERI BERGERAK
   ===================================================================== */
.hero-mozaik { background: #0c1636; }
.mozaik {
    position: absolute; z-index: 0; top: -30%; bottom: -30%; left: 30%; right: -12%;
    display: flex; gap: 16px; transform: rotate(-12deg); pointer-events: none;
}
.mozaik-kolom {
    flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0;
    animation: mozaik-naik var(--durasi, 40s) linear infinite;
}
.mozaik-kolom.turun { animation-direction: reverse; }
.mozaik-kolom img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35); filter: saturate(1.1);
}
@keyframes mozaik-naik { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
/* Tirai oranye: pekat di kiri (area teks), makin tembus ke kanan agar foto terlihat */
.mozaik-tirai {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(100deg, rgba(10,18,48, .97) 0%, rgba(18,32,90, .93) 32%, rgba(40,40,140, .62) 58%, rgba(120,40,170, .38) 80%, rgba(120,60,200, .3) 100%),
        radial-gradient(ellipse 50% 60% at 80% 40%, rgba(231,4,152, .25), transparent 70%);
}
.hero-mozaik .dekor { z-index: 0; }
.hero-mozaik .titik { opacity: .6; }
@media (max-width: 800px) {
    .mozaik { left: -20%; right: -20%; opacity: .55; }
    .mozaik-tirai { background: linear-gradient(180deg, rgba(10,18,48, .92), rgba(26,47,120, .85) 60%, rgba(194, 71, 11, .75)); }
}
@media (prefers-reduced-motion: reduce) { .mozaik-kolom { animation: none; } }

/* =====================================================================
   HALAMAN GALERI: tanpa keterangan, foto beranimasi
   ===================================================================== */
.hal-galeri .grid-galeri figure.galeri-item {
    position: relative; overflow: hidden; border-radius: 22px; background: var(--bg-alt);
    box-shadow: 0 12px 30px rgba(15,25,60, .14); cursor: zoom-in;
    transition: box-shadow .35s;
}
/* Masuk bertahap: muncul dari bawah sambil membesar */
.js-reveal .hal-galeri .galeri-item[data-reveal],
.js-reveal .galeri-item[data-reveal] { opacity: 0; transform: translateY(40px) scale(.92); }
.js-reveal .galeri-item[data-reveal].tampil {
    opacity: 1; transform: none;
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 90ms) !important;
}
/* Foto bergerak pelan (efek Ken Burns) agar galeri tidak diam */
.galeri-item img { display: block; width: 100%; animation: ken-burns 14s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.3s); transform-origin: center; }
@keyframes ken-burns {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.07) translate(-1.5%, 1%); }
    100% { transform: scale(1.04) translate(1.5%, -1%); }
}
/* Kilau cahaya menyapu tiap foto bergantian */
.galeri-item::before {
    content: ''; position: absolute; top: 0; left: -80%; z-index: 2; width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
    animation: kilau-galeri 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s);
}
@keyframes kilau-galeri { 0%, 70% { left: -80%; } 90%, 100% { left: 140%; } }
/* Pantulan cahaya mengikuti kursor + bingkai menyala saat disorot */
.galeri-item[data-tilt]::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .4), transparent 45%);
    box-shadow: inset 0 0 0 2px rgba(233,181,44, 0); mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
}
.galeri-item:hover::after { opacity: 1; }
.galeri-item:hover { box-shadow: 0 26px 50px rgba(29,63,160, .3), 0 0 0 2px rgba(233,181,44, .6); }
.galeri-item:hover img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .galeri-item img, .galeri-item::before { animation: none; }
}

/* =====================================================================
   GALERI LAYAR PENUH ("panggung") dengan transisi unik
   ===================================================================== */
.panggung {
    position: relative; overflow: hidden; isolation: isolate;
    height: 100vh; height: 100svh; min-height: 520px; background: #1a0b04; color: #fff;
}
@media (max-width: 960px) { .panggung { height: calc(100svh - 64px); } }

.pg-slide { position: absolute; inset: 0; margin: 0; z-index: 0; visibility: hidden; }
/* Latar: foto yang sama diperbesar & diburamkan -> tidak ada bagian kosong */
.pg-slide::before {
    content: ''; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat;
    filter: blur(28px) brightness(.55) saturate(1.3); transform: scale(1.1);
}
/* Foto utama tampil utuh di tengah */
.pg-slide img {
    position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}
.pg-slide.aktif, .pg-slide.keluar { visibility: visible; }
.pg-slide.keluar { z-index: 1; }
.pg-slide.aktif { z-index: 2; }
.pg-slide.aktif img { animation: pg-zoom 7s ease-out both; }
@keyframes pg-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.pg-slide.keluar img { transition: transform 1.1s ease, opacity 1.1s ease; transform: scale(.9); opacity: .4; }

/* Tiga gaya transisi bergantian */
.pg-slide.masuk[data-efek="diagonal"] { animation: pg-diagonal 1.1s cubic-bezier(.77, 0, .18, 1) both; }
.pg-slide.masuk[data-efek="lingkaran"] { animation: pg-lingkaran 1.2s cubic-bezier(.77, 0, .18, 1) both; }
.pg-slide.masuk[data-efek="tirai"] { animation: pg-tirai 1.1s cubic-bezier(.77, 0, .18, 1) both; }
.pg-slide.masuk.mundur[data-efek="diagonal"] { animation-name: pg-diagonal-kiri; }
@keyframes pg-diagonal { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 130% 100%); } to { clip-path: polygon(-30% 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes pg-diagonal-kiri { from { clip-path: polygon(-30% 0, 0 0, -30% 100%, -30% 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } }
@keyframes pg-lingkaran { from { clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); } to { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); } }
@keyframes pg-tirai { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
/* Garis cahaya emas mengikuti tepi transisi diagonal */
.pg-slide.masuk::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, transparent 45%, rgba(255, 214, 120, .55) 50%, transparent 55%);
    animation: pg-cahaya 1.1s ease both;
}
@keyframes pg-cahaya { from { transform: translateX(60%); opacity: 1; } to { transform: translateX(-60%); opacity: 0; } }

/* Vinyet + garis-garis halus */
.panggung::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%),
                linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 20%, transparent 70%, rgba(0, 0, 0, .55));
}

/* Penghitung besar */
.pg-hitung { position: absolute; z-index: 5; top: 36px; right: 48px; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-judul); font-variant-numeric: lining-nums; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.pg-ke { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; font-weight: 800; background: linear-gradient(180deg, #fff, #f5cf55); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-hitung span { font-size: 1.3rem; opacity: .75; }
.pg-ke.ganti { animation: pg-angka .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pg-angka { from { transform: translateY(30px); opacity: 0; } }

/* Tombol panah */
.pg-nav {
    position: absolute; top: 50%; z-index: 5; width: 60px; height: 60px; margin-top: -30px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: #fff;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, transform .25s;
}
.pg-nav:hover { background: var(--gradien-utama); border-color: transparent; transform: scale(1.08); }
.pg-nav.prev { left: 40px; } .pg-nav.prev .ikon { transform: rotate(180deg); }
.pg-nav.next { right: 40px; }
@media (min-width: 961px) { .pg-nav.prev { left: 130px; } }

/* Thumbnail dengan progres pengisi */
.pg-thumb { position: absolute; z-index: 5; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 12px; padding: 10px; border-radius: 22px; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pg-thumb button { position: relative; width: 74px; height: 54px; padding: 0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 12px; overflow: hidden; cursor: pointer; background: #000; opacity: .55; transition: opacity .25s, transform .25s, border-color .25s, width .4s; }
.pg-thumb button img { width: 100%; height: 100%; object-fit: cover; }
.pg-thumb button:hover { opacity: .9; transform: translateY(-3px); }
.pg-thumb button.aktif { opacity: 1; width: 110px; border-color: #f5cf55; }
.pg-isi { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gradien-utama); }
.pg-thumb button.aktif .pg-isi.jalan { animation: pg-progres var(--durasi, 5s) linear forwards; }
.panggung.jeda .pg-isi.jalan { animation-play-state: paused; }
@keyframes pg-progres { to { width: 100%; } }

@media (max-width: 700px) {
    .pg-hitung { top: 18px; right: 20px; }
    .pg-nav { width: 46px; height: 46px; margin-top: -23px; }
    .pg-nav.prev { left: 12px; } .pg-nav.next { right: 12px; }
    .pg-thumb { bottom: 16px; gap: 8px; padding: 8px; }
    .pg-thumb button { width: 48px; height: 38px; } .pg-thumb button.aktif { width: 70px; }
}
/* Footer langsung menempel di bawah panggung */
.hal-galeri main + .footer { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
    .pg-slide.aktif img, .pg-slide.masuk, .pg-slide.masuk::after, .pg-ke.ganti { animation: none !important; }
}

/* =====================================================================
   LOGO UTAMA INTERAKTIF DI HERO (pengganti kartu produk unggulan)
   ===================================================================== */
@media (min-width: 801px) {
    .hero-inner:has(.logo-utama) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
    .hero-inner:has(.logo-utama) .hero-teks { max-width: none; }
    .hero-inner:has(.logo-utama) .hero-visual { display: flex; flex-direction: column; align-items: center; padding: 0; }
}
.logo-utama {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
    position: relative; width: clamp(240px, 30vw, 420px); aspect-ratio: 1; cursor: pointer;
    perspective: 900px; outline: none; -webkit-tap-highlight-color: transparent;
    animation: lu-melayang 6s ease-in-out infinite;
}
.logo-utama:focus-visible .lu-koin { outline: 3px solid #f5cf55; outline-offset: 10px; border-radius: 50%; }
@keyframes lu-melayang { 50% { transform: translateY(-14px); } }

/* Koin logo: miring mengikuti kursor (variabel dari JS) */
.lu-koin {
    position: absolute; inset: 0; z-index: 3; border-radius: 50%; transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out;
    animation: lu-masuk 1.3s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.lu-koin img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 25px 45px rgba(6,12,36, .55)) drop-shadow(0 0 30px rgba(255, 196, 90, .35)); }
@keyframes lu-masuk { from { opacity: 0; transform: scale(.3) rotate(-220deg); } }
/* Pantulan cahaya mengikuti kursor + kilau berkala */
.lu-kilap {
    position: absolute; inset: 4%; border-radius: 50%; overflow: hidden; pointer-events: none;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 40%);
    mix-blend-mode: soft-light;
}
.lu-kilap::after {
    content: ''; position: absolute; top: -20%; left: -70%; width: 40%; height: 140%; transform: rotate(25deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    animation: kilap-logo 5s ease-in-out 1.5s infinite;
}
/* Klik: berputar 2 kali dengan pantulan */
.logo-utama.putar .lu-koin { animation: lu-putar 1.2s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes lu-putar { 0% { transform: rotateY(0) scale(1); } 40% { transform: rotateY(400deg) scale(1.12); } 100% { transform: rotateY(720deg) scale(1); } }

/* Pendar di belakang logo */
.lu-cahaya {
    position: absolute; inset: -12%; z-index: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 210, 110, .55), rgba(200,40,170, .2) 45%, transparent 70%);
    animation: lu-denyut 3.5s ease-in-out infinite;
}
@keyframes lu-denyut { 50% { transform: scale(1.08); opacity: .75; } }
.logo-utama:hover .lu-cahaya { background: radial-gradient(circle, rgba(255, 226, 150, .75), rgba(231,4,152, .3) 45%, transparent 72%); }

/* Cincin orbit dengan titik cahaya yang berputar */
.lu-orbit {
    position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
    border: 1.5px solid rgba(255, 214, 120, .35); animation: putar linear infinite;
}
.lu-orbit.o1 { inset: -6%; animation-duration: 14s; }
.lu-orbit.o2 { inset: -15%; border-style: dashed; border-color: rgba(255, 214, 120, .25); animation-duration: 24s; animation-direction: reverse; }
.lu-orbit.o3 { inset: -24%; border-color: rgba(255, 255, 255, .12); animation-duration: 36s; }
.lu-orbit i { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: #fde675; box-shadow: 0 0 14px 4px rgba(255, 200, 80, .8); }
.lu-orbit.o2 i:nth-child(2) { top: auto; bottom: -6px; }
.lu-orbit.o3 i { width: 7px; height: 7px; background: #fff; }
.logo-utama:hover .lu-orbit { animation-duration: 5s; }
.logo-utama:hover .lu-orbit.o2 { animation-duration: 8s; }

/* Bayangan di bawah */
.lu-bayang { position: absolute; left: 18%; right: 18%; bottom: -12%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse, rgba(6,12,36, .5), transparent 70%); filter: blur(4px); animation: lu-bayang 6s ease-in-out infinite; }
@keyframes lu-bayang { 50% { transform: scale(.85); opacity: .6; } }

/* Partikel emas saat diklik */
.lu-partikel {
    position: absolute; left: 50%; top: 50%; z-index: 4; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fffbe6, #f5cf55 60%, #3b2fc9); box-shadow: 0 0 12px rgba(255, 200, 80, .9);
    animation: lu-percik 1s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes lu-percik {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}
.lu-petunjuk { margin: 34px 0 0; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: rgba(233,228,245, .85); animation: lu-petunjuk 2.4s ease-in-out infinite; }
@keyframes lu-petunjuk { 50% { opacity: .45; } }
@media (hover: none) { .lu-petunjuk { display: none; } }
@media (max-width: 800px) { .logo-utama { width: min(260px, 70vw); margin: 40px auto 10px; } }
@media (prefers-reduced-motion: reduce) {
    .logo-utama, .lu-koin, .lu-kilap::after, .lu-cahaya, .lu-orbit, .lu-bayang, .lu-petunjuk { animation: none !important; }
}
/* Partikel & gelombang kejut di atas koin 3D; petunjuk dalam kapsul agar terbaca */
.lu-partikel { z-index: 10; transform: translate(-50%, -50%) translateZ(60px); }
.logo-utama.putar::after {
    content: ''; position: absolute; inset: 10%; z-index: 9; border-radius: 50%; pointer-events: none;
    border: 3px solid rgba(255, 214, 120, .9); box-shadow: 0 0 30px rgba(255, 196, 90, .8);
    animation: lu-gelombang .9s ease-out forwards;
}
@keyframes lu-gelombang { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.lu-petunjuk {
    padding: 8px 16px; border-radius: 999px; color: #f4f1fb;
    background: rgba(11,20,51, .55); border: 1px solid rgba(255, 214, 120, .35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lu-partikel { animation-duration: 1.3s; }
@keyframes lu-percik {
    0%   { transform: translate(-50%, -50%) scale(.6); opacity: 1; }
    65%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.5); opacity: 0; }
}

/* =====================================================================
   GALERI: FOTO BERBINGKAI DI TENGAH + GESER (gaya "slide galeri")
   ===================================================================== */
.pg-slide { display: flex; align-items: center; justify-content: center; }
.pg-slide::before { transition: opacity 1s ease; }
.pg-bingkai {
    position: relative; z-index: 1; line-height: 0; overflow: hidden; border-radius: 6px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
/* Bingkai = ukuran foto itu sendiri (mengikuti rasio asli), dibatasi agar muat di layar */
.pg-bingkai img {
    position: static; display: block; width: auto; height: auto; object-fit: initial; filter: none;
    max-width: min(76vw, 1300px); max-height: 72vh;
}
.pg-slide.keluar img { transition: none; transform: none; opacity: 1; }
.pg-slide.masuk::after { display: none; }

/* Judul besar di tengah foto */
.pg-judul {
    position: absolute; left: 0; right: 0; top: 50%; margin: 0; padding: 0 4%; transform: translateY(-50%);
    text-align: center; line-height: 1.05; color: #fff; pointer-events: none;
    font-family: var(--font-teks); font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    font-size: clamp(2rem, 6vw, 5.5rem); text-shadow: 0 6px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}
.pg-slide.aktif .pg-judul { animation: pg-judul .9s cubic-bezier(.2, .7, .2, 1) .35s both; }
@keyframes pg-judul { from { opacity: 0; transform: translateY(-30%); letter-spacing: .3em; } }

/* Label lokasi di pojok kiri bawah foto */
.pg-lokasi {
    position: absolute; left: 4%; bottom: 7%; display: inline-flex; align-items: center; gap: 12px;
    max-width: 80%; padding: 12px 20px; background: #fff; color: #141a33; line-height: 1.3;
    font-size: clamp(.8rem, 1.1vw, 1rem); box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.pg-lokasi .ikon { color: #141a33; }
.pg-slide.aktif .pg-lokasi { animation: pg-lokasi .7s cubic-bezier(.2, .7, .2, 1) .55s both; }
@keyframes pg-lokasi { from { opacity: 0; transform: translateX(-24px); } }

/* Geser: foto baru masuk dari kanan, foto lama keluar ke kiri (dibalik saat mundur) */
.pg-slide.masuk[data-efek="geser"] { animation: pg-latar 1s ease both; }
.pg-slide.masuk[data-efek="geser"] .pg-bingkai { animation: pg-geser-masuk 1s cubic-bezier(.77, 0, .18, 1) both; }
.pg-slide.masuk.mundur[data-efek="geser"] .pg-bingkai { animation-name: pg-geser-masuk-kiri; }
.pg-slide.keluar .pg-bingkai { animation: pg-geser-keluar 1s cubic-bezier(.77, 0, .18, 1) both; }
.pg-slide.keluar.mundur .pg-bingkai { animation-name: pg-geser-keluar-kanan; }
@keyframes pg-latar { from { opacity: 0; } }
@keyframes pg-geser-masuk { from { transform: translateX(105vw) rotate(3deg) scale(.92); } }
@keyframes pg-geser-masuk-kiri { from { transform: translateX(-105vw) rotate(-3deg) scale(.92); } }
@keyframes pg-geser-keluar { to { transform: translateX(-105vw) rotate(-3deg) scale(.92); } }
@keyframes pg-geser-keluar-kanan { to { transform: translateX(105vw) rotate(3deg) scale(.92); } }

@media (max-width: 700px) {
    .pg-bingkai img { max-width: 92vw; max-height: 60vh; }
    .pg-lokasi { padding: 8px 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-slide .pg-bingkai, .pg-judul, .pg-lokasi { animation: none !important; }
}
/* Judul selalu satu baris, ukurannya menyesuaikan lebar bingkai foto */
.pg-judul { white-space: nowrap; font-size: var(--fs-judul, clamp(1.6rem, 4vw, 4.5rem)); }

/* =====================================================================
   GALERI: JUDUL & LOKASI DI LUAR FOTO, BERANIMASI
   ===================================================================== */
.pg-judul, .pg-lokasi { display: none; }
.pg-bingkai img { max-height: 58vh; max-width: min(70vw, 1200px); }
.pg-slide { padding-top: 6vh; }

.pg-kepala { position: absolute; z-index: 6; top: 4.5vh; left: 0; right: 0; text-align: center; pointer-events: none; }
.pg-eyebrow {
    display: inline-flex; align-items: center; gap: 12px; margin-bottom: 6px;
    font-size: .8rem; font-weight: 800; letter-spacing: .35em; text-transform: uppercase; color: #f5cf55;
    animation: pg-muncul .8s ease .2s both;
}
.pg-eyebrow::before, .pg-eyebrow::after { content: ''; width: 40px; height: 2px; background: linear-gradient(90deg, transparent, #f5cf55); }
.pg-eyebrow::after { transform: scaleX(-1); }
.pg-judul-besar {
    margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .35em;
    font-family: var(--font-teks); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1;
    font-size: clamp(2rem, 5.2vw, 4.6rem); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5));
}
.pg-kata { display: inline-flex; }
/* Huruf masuk satu per satu: naik, tidak buram, berputar sedikit */
.pg-huruf {
    display: inline-block; color: #fff;
    animation: pg-huruf-masuk .9s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(.35s + var(--i) * 55ms);
}
@keyframes pg-huruf-masuk { from { opacity: 0; transform: translateY(60%) rotateX(90deg) scale(.6); filter: blur(8px); } }
/* Kata kedua: gradasi emas dengan kilau bergerak terus */
.pg-kata.emas .pg-huruf {
    background: linear-gradient(100deg, #f5cf55 20%, #fffbe6 40%, #e70498 60%, #f5cf55 80%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: pg-huruf-masuk .9s cubic-bezier(.2, .9, .3, 1.3) both, pg-kilau-teks 4s linear 1.5s infinite;
    animation-delay: calc(.35s + var(--i) * 55ms), 1.5s;
}
@keyframes pg-kilau-teks { to { background-position: -300% 0; } }
/* Gelombang saat slide berganti */
.pg-judul-besar.gelombang .pg-huruf { animation-name: pg-huruf-gelombang; animation-duration: .7s; animation-delay: calc(var(--i) * 40ms); }
.pg-judul-besar.gelombang .pg-kata.emas .pg-huruf { animation-name: pg-huruf-gelombang, pg-kilau-teks; animation-duration: .7s, 4s; animation-delay: calc(var(--i) * 40ms), 0s; }
@keyframes pg-huruf-gelombang { 40% { transform: translateY(-22%) scale(1.08); } }

/* Lokasi di bawah foto */
.pg-lokasi-bawah {
    position: absolute; z-index: 6; left: 50%; bottom: 4.5vh; margin: 0; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; white-space: nowrap;
    border-radius: 999px; color: #fff; font-weight: 600; font-size: .95rem;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 214, 120, .45);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    animation: pg-muncul-bawah .8s ease 1.1s both;
}
.pg-pin { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--gradien-utama); }
.pg-pin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: pendar 2s ease-out infinite; }
.pg-pin .ikon { animation: pg-pin 2s ease-in-out infinite; }
@keyframes pg-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pg-muncul { from { opacity: 0; transform: translateY(-12px); } }
@keyframes pg-muncul-bawah { from { opacity: 0; transform: translate(-50%, 16px); } }

@media (max-width: 700px) {
    .pg-kepala { top: 3vh; }
    .pg-bingkai img { max-height: 52vh; max-width: 90vw; }
    .pg-lokasi-bawah { font-size: .8rem; padding: 8px 14px 8px 8px; bottom: 3vh; }
    .pg-pin { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-huruf, .pg-eyebrow, .pg-lokasi-bawah, .pg-pin .ikon, .pg-pin::after { animation: none !important; }
}
@media (max-width: 700px) { .pg-lokasi-bawah { bottom: 150px; } }

/* =====================================================================
   BERANDA: ETALASE PRODUK (panel + ubin foto penuh)
   ===================================================================== */
.etalase { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 2fr); gap: 20px; align-items: stretch; }
.etalase-panel {
    position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-besar); color: #fff;
    background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(231,4,152, .4), transparent 70%), linear-gradient(160deg, #13235a, #1a2f78 55%, #1d3fa0);
    box-shadow: var(--shadow-angkat);
}
.etalase-panel .dekor { opacity: .7; }
.etalase-isi { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 36px 32px; }
.etalase-isi h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; color: #fff; }
.etalase-isi p { margin: 0; color: #e9e4f5; line-height: 1.6; }
.etalase-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.etalase-chip a { padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); transition: background .2s, color .2s; }
.etalase-chip a:hover { background: #fff; color: var(--primary); }
.etalase-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: auto 0 0; }
.etalase-angka div { padding: 12px; border-radius: 16px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 214, 120, .25); text-align: center; }
.etalase-angka dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #f5cf55; }
.etalase-angka dd { margin: 2px 0 0; font-family: var(--font-judul); font-size: 1.5rem; font-weight: 800; font-variant-numeric: lining-nums; }
.etalase-isi .btn { align-self: flex-start; }

.etalase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ubin {
    position: relative; overflow: hidden; border-radius: var(--radius-besar); min-height: 300px; background: #0b1433;
    box-shadow: var(--shadow); transition: box-shadow .35s;
}
.ubin:hover { box-shadow: 0 26px 50px rgba(29,63,160, .3), 0 0 0 2px rgba(233,181,44, .55); }
.ubin-foto { position: absolute; inset: 0; display: block; }
.ubin-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .55s; }
.ubin-foto .ubin-foto2 { position: absolute; inset: 0; opacity: 0; }
.ubin:hover .ubin-foto img { transform: scale(1.08); }
.ubin:hover .ubin-foto .ubin-foto2 { opacity: 1; }
.ubin-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,30, 0) 40%, rgba(6,10,30, .55) 65%, rgba(6,10,30, .92)); pointer-events: none; }
.ubin .pil-kategori { z-index: 2; }
.ubin-nomor {
    position: absolute; z-index: 2; top: 10px; right: 16px; font-family: var(--font-judul); font-size: 2.6rem; font-weight: 800; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); font-variant-numeric: lining-nums; text-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.ubin-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 20px; pointer-events: none; }
.ubin-info a, .ubin-info button { pointer-events: auto; }
.ubin-info h3 { margin: 0 0 4px; font-size: 1.2rem; line-height: 1.25; }
.ubin-info h3 a { color: #fff; text-decoration: none; }
.ubin-varian { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ubin-varian span { padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); }
.ubin-harga { margin: 0; font-family: var(--font-judul); font-size: 1.45rem; font-weight: 800; color: #f5cf55; font-variant-numeric: lining-nums; }
.ubin .btn-tambah { flex-shrink: 0; }
.ubin:hover .btn-tambah { animation: denyut 1.4s ease-in-out infinite; }
.ubin .habis-teks { color: #fff; }
/* Ubin pertama memanjang ke bawah agar susunan tidak seragam */
@media (min-width: 1101px) {
    .etalase-grid { grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: 1fr; }
    .etalase-grid .ubin:first-child { grid-row: span 2; }
    .etalase-grid .ubin:nth-child(4) { grid-column: span 2; }
}
@media (max-width: 1100px) { .etalase { grid-template-columns: 1fr; } .etalase-angka { margin-top: 4px; } }
@media (max-width: 600px) { .etalase-grid { grid-template-columns: 1fr; } .ubin { min-height: 280px; } }

/* =====================================================================
   BERANDA: CARA PESAN + CTA DALAM SATU BARIS
   ===================================================================== */
.pesan-gabung { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.alur { padding: 34px 32px; border-radius: var(--radius-besar); background: #fff; border: 1px solid rgba(228,224,212, .8); box-shadow: var(--shadow); }
.alur h2 { margin: 0 0 22px; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; }
.alur-langkah { list-style: none; margin: 0; padding: 0; counter-reset: alur; display: grid; gap: 4px; }
.alur-langkah li { position: relative; display: flex; gap: 16px; padding: 14px 0 14px 0; counter-increment: alur; }
.alur-langkah li + li { border-top: 1px dashed rgba(29,63,160, .25); }
.alur-ikon { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(29,63,160, .28); }
.alur-ikon::after { content: counter(alur); position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: var(--primary); background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.alur-langkah h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.alur-langkah p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.alur-langkah li:hover .alur-ikon { transform: rotate(-8deg) scale(1.06); transition: transform .25s; }
.cta-samping { display: flex; align-items: center; padding: 36px 34px; text-align: left; }
.cta-samping .cta-isi { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.cta-samping h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.cta-samping .hero-btn { margin-top: 6px; }
.cta-logo { width: 84px; height: 84px; filter: drop-shadow(0 10px 20px rgba(6,12,36, .45)); animation: logo-koin 7s ease-in-out 1s infinite; }
@media (max-width: 900px) { .pesan-gabung { grid-template-columns: 1fr; } .cta-samping { text-align: center; } .cta-samping .cta-isi { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .cta-logo { animation: none; } }
.etalase-angka dd { white-space: nowrap; font-size: clamp(1.05rem, 1.4vw, 1.5rem); }
.etalase-angka div { padding: 12px 6px; }
@media (max-width: 600px) {
    .etalase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ubin { min-height: 230px; border-radius: 20px; }
    .ubin-info { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .ubin-info h3 { font-size: .92rem; }
    .ubin-harga { font-size: 1.1rem; }
    .ubin-varian span { font-size: .62rem; padding: 1px 7px; }
    .ubin-nomor { font-size: 1.8rem; top: 8px; right: 10px; }
    .ubin .btn-tambah { position: absolute; right: 10px; bottom: 12px; width: 38px; height: 38px; }
    .ubin .pil-kategori { font-size: .6rem; }
    .etalase-isi { padding: 26px 22px; }
}

/* =====================================================================
   GALERI: KLIK FOTO -> PEMESANAN PRODUK
   ===================================================================== */
a.pg-bingkai { display: block; cursor: pointer; text-decoration: none; }
.pg-bingkai::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,10,30, .7)); opacity: 0; transition: opacity .35s; pointer-events: none; }
.pg-ajak {
    position: absolute; z-index: 2; left: 50%; bottom: 7%; display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; white-space: nowrap;
    background: var(--gradien-utama); box-shadow: 0 12px 30px rgba(29,63,160, .5);
    opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
a.pg-bingkai:hover::after, a.pg-bingkai:focus-visible::after { opacity: 1; }
a.pg-bingkai:hover .pg-ajak, a.pg-bingkai:focus-visible .pg-ajak { opacity: 1; transform: translate(-50%, 0); }
a.pg-bingkai:hover img { transform: scale(1.03); }
.pg-bingkai img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.pg-bingkai:focus-visible { outline: 3px solid #f5cf55; outline-offset: 6px; }

/* Tombol pesan di bawah foto (selalu terlihat, juga untuk HP) */
.pg-tombol-pesan {
    position: absolute; z-index: 6; left: 50%; bottom: calc(4.5vh + 64px); transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; white-space: nowrap;
    color: #fff; font-weight: 800; text-decoration: none; background: var(--gradien-utama);
    box-shadow: 0 12px 30px rgba(29,63,160, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
    animation: pg-muncul-bawah .8s ease .9s both; transition: transform .2s, box-shadow .3s;
}
.pg-tombol-pesan:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 16px 36px rgba(29,63,160, .6); }
.pg-tombol-pesan .ikon:last-child { transition: transform .2s; }
.pg-tombol-pesan:hover .ikon:last-child { transform: translateX(4px); }
.pg-tombol-pesan.ganti { animation: pg-tombol-ganti .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pg-tombol-ganti { from { transform: translateX(-50%) scale(.8); opacity: .3; } }
.pg-bingkai img { max-height: 54vh; }
@media (max-width: 700px) {
    .pg-tombol-pesan { bottom: 205px; padding: 11px 18px; font-size: .9rem; }
    .pg-ajak { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pg-tombol-pesan, .pg-tombol-pesan.ganti { animation: none; } }
.pg-bingkai::after { background: linear-gradient(180deg, transparent 60%, rgba(6,10,30, .35)); }

/* =====================================================================
   HERO "PANGGUNG ORBIT": aurora + sinar + bara + foto mengorbit logo
   ===================================================================== */
.hero-aurora { background: #070d24; }
.hero-aurora .dekor { display: none; }
.aurora { position: absolute; inset: -20%; z-index: 0; filter: blur(70px) saturate(1.3); pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: aurora-gerak 18s ease-in-out infinite alternate; }
.aurora .a1 { width: 55%; height: 60%; left: 5%; top: 10%; background: #1d3fa0; animation-duration: 20s; }
.aurora .a2 { width: 45%; height: 55%; right: 8%; top: 5%; background: #e9b52c; opacity: .75; animation-duration: 16s; animation-delay: -5s; }
.aurora .a3 { width: 50%; height: 50%; left: 35%; bottom: 0; background: #1a2f78; animation-duration: 24s; animation-delay: -9s; }
.aurora .a4 { width: 30%; height: 35%; right: 22%; top: 38%; background: #fde675; opacity: .45; animation-duration: 14s; animation-delay: -3s; }
@keyframes aurora-gerak {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6%, -8%) scale(1.15); }
    100% { transform: translate(-6%, 6%) scale(.92); }
}
/* berkas sinar dari atas kanan */
.sinar {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
    background: repeating-conic-gradient(from 200deg at 78% -10%, rgba(255, 226, 154, .18) 0deg 3deg, transparent 3deg 11deg);
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 78% 0%, #000, transparent 75%);
    animation: sinar-goyang 12s ease-in-out infinite alternate;
}
@keyframes sinar-goyang { to { transform: rotate(4deg) scale(1.05); transform-origin: 78% 0; } }
/* butiran film */
.butir {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* bara emas naik */
.bara { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bara i {
    position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
    background: #fde675; box-shadow: 0 0 10px 2px rgba(255, 180, 60, .8);
    animation: bara-naik var(--d) linear var(--t) infinite;
}
@keyframes bara-naik {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(40px, -110vh); opacity: 0; }
}

/* Cincin foto 3D mengorbit logo */
.hero-visual { position: relative; }
.orbit-panggung {
    position: absolute; z-index: 0; left: 50%; top: 50%; width: 0; height: 0;
    perspective: 1400px; transform: translate(-50%, -50%);
}
.orbit-cincin {
    --r: clamp(260px, 26vw, 440px); --w: clamp(110px, 9vw, 160px);
    position: absolute; left: 0; top: 0; transform-style: preserve-3d;
    animation: orbit-putar 40s linear infinite;
}
.orbit-cincin figure {
    position: absolute; margin: 0; width: var(--w); aspect-ratio: 4 / 5; left: calc(var(--w) / -2); top: calc(var(--w) * -.625);
    transform: rotateY(calc(var(--k) * 360deg / var(--n))) translateZ(var(--r));
    border-radius: 18px; overflow: hidden; backface-visibility: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 214, 120, .35);
}
.orbit-cincin img { width: 100%; height: 100%; object-fit: cover; }
@keyframes orbit-putar { from { transform: rotateX(-14deg) rotateY(0); } to { transform: rotateX(-14deg) rotateY(-360deg); } }
.hero-visual:hover .orbit-cincin { animation-duration: 18s; }
.logo-utama { z-index: 2; }
@media (max-width: 800px) {
    .orbit-cincin { --r: 170px; --w: 78px; }
    .aurora { filter: blur(50px); }
}
@media (prefers-reduced-motion: reduce) {
    .aurora span, .sinar, .bara i, .orbit-cincin { animation: none; }
    .bara { display: none; }
}
/* Aurora lebih gelap & dramatis */
.aurora .a1 { background: #24308a; opacity: .85; }
.aurora .a2 { background: #e9b52c; opacity: .42; }
.aurora .a3 { background: #0f1d4a; opacity: .9; }
.aurora .a4 { opacity: .28; }
.hero-aurora::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 72% 45%, transparent 30%, rgba(6,10,30, .55) 100%),
                linear-gradient(90deg, rgba(6,10,30, .55), transparent 55%);
}
.sinar { opacity: .4; }

/* =====================================================================
   HERO: KARTU FOTO MELAYANG DI SEKITAR LOGO (tidak tertutup logo)
   ===================================================================== */
.orbit-panggung { display: none; }
.hero-visual:has(.apung) { width: 100%; min-height: clamp(460px, 38vw, 600px); justify-content: center; }
.apung { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.apung-kartu {
    --w: clamp(120px, 10vw, 180px);
    position: absolute; width: var(--w); aspect-ratio: 4 / 5; perspective: 900px;
    animation: apung-naik 7s ease-in-out infinite; animation-delay: calc(var(--j) * -1.7s);
}
/* Empat posisi di luar lingkaran logo */
.apung-kartu.ka { left: 0;    top: 0;    rotate: -9deg; }
.apung-kartu.kb { right: 0;   top: 4%;   rotate: 8deg; }
.apung-kartu.kc { left: 3%;   bottom: 0; rotate: 7deg; }
.apung-kartu.kd { right: 2%;  bottom: 4%; rotate: -8deg; }
@keyframes apung-naik { 50% { transform: translateY(-16px); } }
.apung-balik {
    position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
    animation: apung-flip 12s cubic-bezier(.7, 0, .3, 1) infinite; animation-delay: calc(var(--j) * 3s);
}
@keyframes apung-flip { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.apung-balik img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px;
    backface-visibility: hidden; border: 3px solid rgba(255, 236, 190, .9);
    box-shadow: 0 24px 50px rgba(6,10,30, .55), 0 0 30px rgba(255, 180, 60, .25);
}
.apung-balik .sisi-belakang { transform: rotateY(180deg); }
/* Sedikit bergeser mengikuti kursor (paralaks, nilai dari logo interaktif) */
.hero-visual:hover .apung-kartu { animation-duration: 4s; }
@media (max-width: 800px) {
    .hero-visual:has(.apung) { min-height: 340px; }
    .apung-kartu { --w: 82px; }
}
@media (prefers-reduced-motion: reduce) { .apung-kartu, .apung-balik { animation: none; } }
@media (min-width: 801px) {
    .apung { inset: -4% -16%; }
    .apung-kartu { --w: clamp(110px, 8.6vw, 165px); }
    .hero-visual:has(.apung) .logo-utama { width: clamp(240px, 24vw, 380px); }
}
@media (min-width: 801px) and (max-width: 1499px) {
    .apung { inset: -2% -4% -2% -10%; }
    .apung-kartu { --w: clamp(96px, 8.2vw, 130px); }
    .hero-visual:has(.apung) .logo-utama { width: clamp(220px, 22vw, 300px); }
}

/* =====================================================================
   TEMA WARNA LOGO MOTHER RI: biru tua + emas + krem, aksen gradasi huruf "M"
   ===================================================================== */
:root {
    --primary: #1d3fa0; --primary-dark: #122c7a;
    --bg: #fbf8f1; --bg-alt: #f3efe6; --text: #141a33; --muted: #5d6480; --border: #e4e0d4;
    --emas: #c8961e; --emas-terang: #fde675;
    /* tombol utama = gradasi huruf M: magenta -> ungu -> biru royal */
    --gradien-utama: linear-gradient(135deg, #e70498 0%, #7b2fd0 50%, #1d3fa0 100%);
    --gradien-emas: linear-gradient(135deg, #fff1a8 0%, #f5cf55 40%, #c8961e 100%);
}
::selection { background: #fde675; color: #141a33; }
/* Latar gelap bagian atas halaman: biru tua seperti teks logo */
.hero, .page-header, .cta {
    background:
        radial-gradient(ellipse 60% 70% at 85% 40%, rgba(231, 4, 152, .22), transparent 70%),
        radial-gradient(ellipse 50% 60% at 15% 90%, rgba(29, 63, 160, .45), transparent 70%),
        linear-gradient(110deg, #070d24 0%, #0f1d4a 45%, #1a2f78 100%);
}
.hero-aurora { background: #070d24; }
.aurora .a1 { background: #1d3fa0; opacity: .9; }
.aurora .a2 { background: #e70498; opacity: .38; }
.aurora .a3 { background: #0f1d4a; opacity: .95; }
.aurora .a4 { background: #fde675; opacity: .22; }
.hero-aurora::before { background: radial-gradient(ellipse 60% 80% at 72% 45%, transparent 30%, rgba(6, 10, 30, .6) 100%), linear-gradient(90deg, rgba(6, 10, 30, .6), transparent 55%); }
.sinar { background: repeating-conic-gradient(from 200deg at 78% -10%, rgba(253, 230, 117, .16) 0deg 3deg, transparent 3deg 11deg); }
.bara i { background: #fde675; box-shadow: 0 0 10px 2px rgba(245, 207, 85, .8); }
/* Garis & ornamen emas */
.hero h1::after, .footer::before { background: linear-gradient(90deg, transparent, #c8961e 20%, #fde675 50%, #c8961e 80%, transparent); }
.hero h1::after { background: linear-gradient(90deg, #fde675, #c8961e 60%, transparent); }
.eyebrow { color: var(--primary); }
.eyebrow-terang, .eyebrow-kaca .ikon, .hero-poin .ikon { color: #f5cf55; }
.btn-hero { background: var(--gradien-utama); box-shadow: 0 8px 22px rgba(123, 47, 208, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-hero:hover { background: var(--gradien-utama); filter: brightness(1.1); }
.btn-hero-outline { border-color: rgba(253, 230, 117, .75); }
.btn-hero-outline:hover { background: rgba(253, 230, 117, .14); border-color: #fde675; }
/* Pita berjalan: emas dengan teks biru tua */
.pita-berjalan { background: var(--gradien-emas); color: #141a33; box-shadow: 0 10px 26px rgba(200, 150, 30, .3); }
.pita-isi span::after { background: #e70498; }
.pita-isi .pita-slogan { color: #1d3fa0; }
/* Harga & angka: emas pada latar gelap, biru royal pada latar terang */
.harga { color: var(--primary); }
.ubin-harga, .sorotan-harga, .etalase-angka dt { color: #f5cf55 !important; }
.etalase-panel { background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(231, 4, 152, .3), transparent 70%), linear-gradient(160deg, #070d24, #0f1d4a 55%, #1d3fa0); }
.etalase-angka div { border-color: rgba(253, 230, 117, .3); }
.ubin { background: #0b1433; }
.ubin:hover { box-shadow: 0 26px 50px rgba(29, 63, 160, .35), 0 0 0 2px rgba(253, 230, 117, .7); }
.produk-card:hover { border-color: rgba(200, 150, 30, .7); box-shadow: 0 22px 45px rgba(29, 63, 160, .2), 0 0 0 1px rgba(200, 150, 30, .4), 0 0 32px rgba(231, 4, 152, .15); }
/* Navigasi samping & keranjang */
.rail-item.aktif { background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(123, 47, 208, .35); }
.rail-item.aktif::before { background: #c8961e; }
.rail-cart, .cart-link { background: #141a33; }
.cart-count { background: var(--gradien-utama); }
/* Footer biru tua */
.footer { background: #070d24; color: #b8bdd6; }
.footer a, .footer-kontak .ikon { color: #b8bdd6; }
.footer a:hover, .footer-kontak .ikon { color: #f5cf55; }
/* Galeri layar penuh */
.panggung { background: #070d24; }
.pg-eyebrow, .pg-hitung span { color: #f5cf55; }
.pg-eyebrow::before, .pg-eyebrow::after { background: linear-gradient(90deg, transparent, #f5cf55); }
.pg-kata.emas .pg-huruf { background-image: linear-gradient(100deg, #f5cf55 20%, #fffbe6 40%, #c8961e 60%, #f5cf55 80%); }
.pg-lokasi-bawah { border-color: rgba(253, 230, 117, .45); }
.pg-tombol-pesan { box-shadow: 0 12px 30px rgba(123, 47, 208, .45); }
/* Tombol musik */
.tombol-musik { background: linear-gradient(135deg, #1a2b6b, #0b1433); box-shadow: 0 10px 26px rgba(6, 12, 36, .4), inset 0 0 0 1px rgba(253, 230, 117, .4); }
.musik-ikon, .musik-bar i { color: #f5cf55; background-color: transparent; }
.musik-bar i { background: #f5cf55; }
/* Kartu foto melayang & bingkai foto: emas */
.apung-balik img { border-color: rgba(253, 230, 117, .9); box-shadow: 0 24px 50px rgba(6, 10, 30, .6), 0 0 30px rgba(245, 207, 85, .25); }
/* Fokus & input */
:focus-visible { outline-color: #e9b52c; }
input:focus, select:focus, textarea:focus { border-color: #1d3fa0; box-shadow: 0 0 0 4px rgba(29, 63, 160, .15); }
.chip-aktif, .chip-aktif:hover { background: #141a33; border-color: #141a33; }
.pilihan-varian input:checked + span { background: var(--gradien-utama); border-color: transparent; box-shadow: 0 6px 14px rgba(123, 47, 208, .3); }
.varian-mini span { color: var(--primary); }
.badge-sisa { background: #c8961e; }
.alur-ikon, .fitur-ikon, .btn-tambah { background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(123, 47, 208, .3); }
.alur-langkah li + li { border-top-color: rgba(29, 63, 160, .2); }
.alur-ikon::after { color: var(--primary); }
.placeholder { background: linear-gradient(135deg, #f5cf55, #1d3fa0); }
/* Latar halaman: cahaya biru & magenta lembut di tepi */
body { background: radial-gradient(900px 600px at 0% 30%, rgba(29, 63, 160, .07), transparent 60%), radial-gradient(900px 600px at 100% 70%, rgba(231, 4, 152, .05), transparent 60%), var(--bg); background-attachment: fixed; }
main::before { background-image: radial-gradient(rgba(20, 26, 51, .07) 1px, transparent 1.4px); }

/* =====================================================================
   BERANDA ATAS: TATA LETAK BENTO (teks + logo + 4 ubin produk)
   ===================================================================== */
.hero.hero-aurora { padding: 64px 0 118px; }
.hero-bento { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hb-teks { max-width: 640px; }
.hb-titik { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); animation: hb-titik 2s ease-out infinite; }
@keyframes hb-titik { to { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } }
.hb-judul { margin: 6px 0 0; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; font-weight: 800; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.hb-judul::after { display: none; }
.hb-kilau {
    display: inline-block; background: linear-gradient(100deg, #f5cf55 10%, #fffbe6 30%, #e9b52c 50%, #f5cf55 70%, #fffbe6 90%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    filter: drop-shadow(0 4px 18px rgba(245, 207, 85, .35)); animation: hb-kilau 5s linear infinite;
}
@keyframes hb-kilau { to { background-position: -250% 0; } }
.hb-desk { margin: 20px 0 0; max-width: 560px; font-size: 1.08rem; line-height: 1.7; color: #d9dcec; }
.hero-bento .hero-btn { margin-top: 28px; }
.hb-info { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px; margin: 34px 0 0; }
.hb-info div {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hb-info dt { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; color: #141a33; background: var(--gradien-emas); }
.hb-info dd { margin: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hb-info strong { color: #fff; font-size: .92rem; }
.hb-info span { color: #b8bdd6; font-size: .78rem; }

/* Grid bento kanan */
.hb-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: repeat(2, minmax(170px, 1fr)); gap: 14px; }
.hb-logo {
    grid-row: span 2; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    border-radius: 28px; padding: 24px 14px; overflow: hidden; isolation: isolate;
    background: radial-gradient(circle at 50% 40%, rgba(231, 4, 152, .25), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    border: 1px solid rgba(253, 230, 117, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px rgba(6, 10, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hb-logo::before { /* sinar emas berputar di belakang logo */
    content: ''; position: absolute; inset: -40%; z-index: -1;
    background: conic-gradient(from 0deg, transparent, rgba(245, 207, 85, .25), transparent 30%, rgba(231, 4, 152, .2), transparent 60%, rgba(29, 63, 160, .3), transparent 85%);
    animation: putar 16s linear infinite;
}
.hb-logo .logo-utama { width: min(100%, 250px); animation: lu-melayang 6s ease-in-out infinite; }
.hb-logo-label { font-weight: 800; letter-spacing: .3em; font-size: .8rem; color: #f5cf55; }
.hb-produk {
    position: relative; overflow: hidden; border-radius: 22px; text-decoration: none; min-height: 170px; background: #0b1433;
    border: 1px solid rgba(253, 230, 117, .2); box-shadow: 0 20px 40px rgba(6, 10, 30, .4);
    animation: hb-masuk .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.15s * var(--n, 1));
}
.hb-produk.p1 { --n: 1; } .hb-produk.p2 { --n: 2; } .hb-produk.p3 { --n: 3; } .hb-produk.p4 { --n: 4; }
@keyframes hb-masuk { from { opacity: 0; transform: translateY(24px) scale(.95); } }
.hb-produk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.hb-produk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(6, 10, 30, .92)); }
.hb-produk:hover img { transform: scale(1.1); }
.hb-produk:hover { border-color: rgba(253, 230, 117, .7); box-shadow: 0 26px 50px rgba(6, 10, 30, .5), 0 0 30px rgba(231, 4, 152, .25); }
.hb-produk-info { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.hb-produk-nama { color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.25; }
.hb-produk-harga { display: inline-flex; align-items: center; gap: 6px; color: #f5cf55; font-family: var(--font-judul); font-weight: 800; font-size: 1.05rem; font-variant-numeric: lining-nums; }
.hb-produk-harga .ikon { transition: transform .2s; }
.hb-produk:hover .hb-produk-harga .ikon { transform: translateX(4px); }
.hb-produk[data-tilt]::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 45%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
}
.hb-produk:hover::before { opacity: 1; }

@media (max-width: 1100px) {
    .hero-bento { grid-template-columns: 1fr; gap: 36px; }
    .hb-teks { max-width: none; text-align: center; margin: 0 auto; }
    .hb-desk { margin-left: auto; margin-right: auto; }
    .hero-bento .hero-btn, .hb-info { justify-content: center; }
}
@media (max-width: 640px) {
    .hero.hero-aurora { padding: 36px 0 96px; }
    .hb-info { grid-template-columns: 1fr; justify-items: center; }
    .hb-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .hb-logo { grid-column: span 2; grid-row: auto; padding: 22px; }
    .hb-logo .logo-utama { width: 170px; }
    .hb-produk { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .hb-kilau, .hb-logo::before, .hb-titik, .hb-produk, .hb-logo .logo-utama { animation: none; } }
@media (min-width: 1500px) { .hb-grid { grid-template-rows: repeat(2, minmax(230px, 1fr)); } .hb-logo .logo-utama { width: min(100%, 290px); } }
@media (max-width: 640px) {
    .hb-info { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hb-info div { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
    .hb-info dt { width: 30px; height: 30px; }
    .hb-info strong { font-size: .8rem; } .hb-info span { font-size: .68rem; }
}

/* =====================================================================
   DUA PITA BERSILANG (pengganti pita berjalan)
   ===================================================================== */
.pita-silang { position: relative; z-index: 2; height: 150px; margin: -10px 0 0; overflow: hidden; }
.pita {
    position: absolute; left: -5%; right: -5%; overflow: hidden; display: flex; align-items: center;
    box-shadow: 0 14px 30px rgba(6, 12, 36, .25);
}
.pita-emas { top: 22px; height: 64px; z-index: 2; transform: rotate(-2.5deg); background: var(--gradien-emas); border-block: 2px solid rgba(255, 255, 255, .5); }
.pita-biru { top: 62px; height: 52px; z-index: 1; transform: rotate(2deg); background: linear-gradient(90deg, #070d24, #1a2f78 50%, #070d24); border-block: 1px solid rgba(253, 230, 117, .35); }
.pita-jalan { display: flex; align-items: center; gap: 14px; width: max-content; padding: 0 14px; animation: pita-kiri 45s linear infinite; }
.pita-jalan.mundur { animation-name: pita-kanan; animation-duration: 55s; gap: 26px; }
@keyframes pita-kiri { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes pita-kanan { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
.pita:hover .pita-jalan { animation-play-state: paused; }
/* Item produk di pita emas */
.pita-produk {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; white-space: nowrap;
    text-decoration: none; color: #141a33; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 4px 10px rgba(120, 80, 0, .15); transition: transform .2s, background .2s;
}
.pita-produk:hover { transform: translateY(-2px) scale(1.04); background: #fff; }
.pita-produk img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.pp-nama { font-weight: 800; font-size: .92rem; letter-spacing: .02em; }
.pp-harga { padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #fff; background: var(--gradien-utama); font-variant-numeric: lining-nums; }
/* Slogan di pita biru */
.pita-slogan2 { white-space: nowrap; font-family: var(--font-judul); font-style: italic; font-size: 1.15rem; color: #fde675; }
.pita-logo { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); animation: logo-koin 6s ease-in-out infinite; }
@media (max-width: 640px) {
    .pita-silang { height: 124px; }
    .pita-emas { height: 54px; top: 18px; } .pita-biru { height: 44px; top: 54px; }
    .pita-produk img { width: 32px; height: 32px; } .pp-nama { font-size: .8rem; } .pp-harga { font-size: .7rem; }
    .pita-slogan2 { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .pita-jalan, .pita-logo { animation: none; } }
.pita-silang { height: 170px; }
.pita-emas { top: 20px; transform: rotate(-2.2deg); }
.pita-biru { top: 92px; transform: rotate(1.6deg); }
@media (max-width: 640px) { .pita-silang { height: 140px; } .pita-emas { top: 16px; } .pita-biru { top: 78px; } }

/* =====================================================================
   BERANDA: LATAR BIRU-MAGENTA PENUH SATU HALAMAN (tanpa area putih)
   ===================================================================== */
body.hal-index {
    color: #d9dcec;
    background:
        radial-gradient(1100px 700px at 85% 8%, rgba(231, 4, 152, .30), transparent 65%),
        radial-gradient(900px 700px at 0% 45%, rgba(29, 63, 160, .55), transparent 65%),
        radial-gradient(1000px 800px at 100% 90%, rgba(123, 47, 208, .30), transparent 65%),
        linear-gradient(180deg, #0b1650 0%, #0a1342 40%, #070d24 100%);
    background-attachment: fixed;
}
body.hal-index main::before { background-image: radial-gradient(rgba(253, 230, 117, .08) 1px, transparent 1.4px); -webkit-mask-image: none; mask-image: none; }
/* Hero menyatu dengan latar halaman: tanpa lengkung putih, tepi bawah memudar */
.hal-index .hero::after { display: none; }
.hal-index .hero.hero-aurora { background: transparent; padding-bottom: 72px;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.hal-index .hero-aurora::before { background: radial-gradient(ellipse 60% 80% at 72% 45%, transparent 30%, rgba(6, 10, 30, .35) 100%); }
/* Teks section di atas latar gelap */
.hal-index .kepala-section h2, .hal-index .alur h2, .hal-index h3 { color: #fff; }
.hal-index .kepala-section .sub, .hal-index .kosong { color: #b8bdd6; }
.hal-index .eyebrow { color: #f5cf55; }
/* Kartu Cara Pesan jadi kaca gelap */
.hal-index .alur {
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(253, 230, 117, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 24px 50px rgba(6, 10, 30, .4);
}
.hal-index .alur-langkah p { color: #b8bdd6; }
.hal-index .alur-langkah li + li { border-top-color: rgba(253, 230, 117, .2); }
.hal-index .etalase-panel, .hal-index .cta-samping, .hal-index .ubin { border: 1px solid rgba(253, 230, 117, .2); }
.hal-index .ubin { box-shadow: 0 24px 50px rgba(6, 10, 30, .45); }
/* Footer menyambung tanpa garis tebal */
.hal-index .footer { background: rgba(4, 8, 22, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 1100px) { .hal-index .hero.hero-aurora { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 1100px) { .hal-index .hero.hero-aurora::after { display: block; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0; background: linear-gradient(180deg, transparent, #0a1342); -webkit-mask: none; mask: none; } }
/* Logo tanpa bingkai: kotak kaca dihilangkan, logo berdiri bebas */
.hb-logo { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; padding: 0; }
.hb-logo::before { inset: 5%; border-radius: 50%; filter: blur(30px); opacity: .9; }
.hb-logo .logo-utama { width: min(118%, 300px); }
@media (min-width: 1500px) { .hb-logo .logo-utama { width: min(125%, 340px); } }
@media (min-width: 1101px) { .hb-logo .logo-utama { width: min(100%, 280px); } }

/* =====================================================================
   BERANDA ATAS: LATAR FOTO PRODUK BERANIMASI (pengganti 4 ubin)
   ===================================================================== */
.hb-grid { display: flex; align-items: center; justify-content: center; min-height: 460px; }
.hb-logo { grid-row: auto; }
.hb-logo .logo-utama, .hb-logo { width: auto; }
.hb-logo .logo-utama { width: clamp(260px, 26vw, 400px) !important; }
.hb-latar {
    --durasi: calc(var(--jml) * 5s);
    position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 62%; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 80%, transparent 100%), linear-gradient(180deg, #000 70%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 80%, transparent 100%);
}
.hb-latar span {
    position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0;
    animation: hb-latar var(--durasi) linear infinite; animation-delay: calc(var(--n) * 5s - 5s);
}
/* tiap foto: muncul memudar, membesar & bergeser pelan, lalu memudar keluar */
}
/* tirai warna agar foto menyatu dengan tema biru-magenta */
.hb-latar::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 55% 50%, transparent 20%, rgba(10, 19, 66, .55) 75%), linear-gradient(120deg, rgba(29, 63, 160, .35), rgba(231, 4, 152, .25)); mix-blend-mode: multiply; }
@media (max-width: 1100px) {
    .hb-latar { width: 100%; top: auto; height: 520px; bottom: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 75%, transparent); }
    .hb-grid { min-height: 360px; }
    .hb-logo .logo-utama { width: 240px !important; }
}
@media (prefers-reduced-motion: reduce) { .hb-latar span { animation: none; } .hb-latar span:first-child { opacity: .5; } }

/* =====================================================================
   LOGO BERANDA: cincin orbit diganti kilau bintang berkedip
   ===================================================================== */
.lu-bintang { position: absolute; inset: -8%; z-index: 4; pointer-events: none; }
.lu-bintang i {
    position: absolute; width: 22px; height: 22px; opacity: 0;
    background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, #fde675 22% 28%, transparent 30% 45%, #fde675 47% 53%, transparent 55% 70%, #fde675 72% 78%, transparent 80% 95%, #fde675 97%);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
    filter: drop-shadow(0 0 6px rgba(253, 230, 117, .9)); animation: kedip 3.2s ease-in-out infinite;
}
.lu-bintang i:nth-child(1) { top: 6%;  left: 18%; animation-delay: 0s; }
.lu-bintang i:nth-child(2) { top: 14%; right: 10%; animation-delay: .7s; width: 16px; height: 16px; }
.lu-bintang i:nth-child(3) { bottom: 16%; right: 4%; animation-delay: 1.4s; }
.lu-bintang i:nth-child(4) { bottom: 6%; left: 22%; animation-delay: 2.1s; width: 14px; height: 14px; }
.lu-bintang i:nth-child(5) { top: 48%; left: 0; animation-delay: 2.7s; width: 12px; height: 12px; }
@keyframes kedip { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.hb-logo-label { display: none; }

/* =====================================================================
   BERANDA: TESTIMONI TEKS BERANIMASI
   ===================================================================== */
.kata-pelanggan {
    position: relative; max-width: 980px; margin: 0 auto; padding: 56px 48px 40px; text-align: center; border-radius: var(--radius-besar); overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(253, 230, 117, .22);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px rgba(6, 10, 30, .4);
}
.kp-kutip { position: absolute; top: -40px; left: 28px; font-family: var(--font-judul); font-size: 14rem; line-height: 1; color: rgba(253, 230, 117, .14); pointer-events: none; }
.kp-panggung { display: grid; margin-top: 10px; }
.kp-item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.kp-item.aktif { opacity: 1; visibility: visible; transition: opacity .5s; }
.kp-item .bintang { color: #f5cf55; font-size: 1.4rem; letter-spacing: 4px; }
.kp-item blockquote { margin: 14px 0 18px; font-family: var(--font-judul); font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.35; color: #fff; }
.kp-kata { display: inline-block; opacity: 0; transform: translateY(16px); filter: blur(6px); }
.kp-item.aktif .kp-kata { animation: kp-kata .55s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--k) * 70ms + .15s); }
@keyframes kp-kata { to { opacity: 1; transform: none; filter: none; } }
.kp-item figcaption { color: #b8bdd6; opacity: 0; }
.kp-item.aktif figcaption { animation: kp-kata .6s ease forwards 1s; }
.kp-item figcaption strong { color: #f5cf55; }
.kp-titik { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.kp-titik button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .3); transition: width .3s, background .3s; }
.kp-titik button.aktif { width: 34px; background: var(--gradien-utama); }
@media (max-width: 640px) { .kata-pelanggan { padding: 44px 22px 30px; } .kp-kutip { font-size: 9rem; } }
@media (prefers-reduced-motion: reduce) { .kp-kata, .kp-item figcaption { animation: none !important; opacity: 1; transform: none; filter: none; } .lu-bintang i { animation: none; opacity: .8; } }

/* =====================================================================
   TATA LETAK: konten di tengah area kanan bar samping (kiri = kanan)
   ===================================================================== */
@media (min-width: 961px) {
    /* pakai % (lebar induk) bukan vw, agar scrollbar tidak membuat sisi kanan lebih lebar */
    :root { --rail: 104px; }
    .container {
        max-width: none; width: min(1360px, calc(100% - var(--rail) - 64px)); padding-left: 0; padding-right: 0;
        margin-left: calc(var(--rail) + (100% - var(--rail) - min(1360px, calc(100% - var(--rail) - 64px))) / 2);
        margin-right: 0;
    }
}

/* =====================================================================
   BERANDA: LATAR ANIMASI SATU HALAMAN (awan cahaya, bintang, bara)
   ===================================================================== */
.latar-hidup { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lh-awan { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; animation: lh-awan 26s ease-in-out infinite alternate; }
.lh-awan.a { width: 46vw; height: 46vw; left: -12vw; top: 35%; background: rgba(29, 63, 160, .55); }
.lh-awan.b { width: 40vw; height: 40vw; right: -10vw; top: 55%; background: rgba(231, 4, 152, .32); animation-duration: 32s; animation-delay: -8s; }
.lh-awan.c { width: 34vw; height: 34vw; left: 30%; bottom: -15vw; background: rgba(123, 47, 208, .35); animation-duration: 22s; animation-delay: -4s; }
@keyframes lh-awan { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, -10vh) scale(1.15); } 100% { transform: translate(-6vw, 8vh) scale(.9); } }
.lh-bintang i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fde675; animation: lh-kedip var(--d) ease-in-out var(--t) infinite; }
@keyframes lh-kedip { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.6); } }
.lh-bara i { position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: #fde675; box-shadow: 0 0 10px 2px rgba(245, 207, 85, .7); animation: lh-naik var(--d) linear var(--t) infinite; }
@keyframes lh-naik { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(30px, -55vh); } 100% { transform: translate(-20px, -110vh); opacity: 0; } }
/* aurora & bara bawaan hero tidak perlu lagi (sudah dari latar halaman) */
.hal-index .hero-aurora .bara { display: none; }
@media (prefers-reduced-motion: reduce) { .lh-awan, .lh-bintang i, .lh-bara i { animation: none; } .lh-bara { display: none; } }
@media (min-width: 961px) { :root { --rail: 88px; } }

/* =====================================================================
   GALERI: ANIMASI STAGGERED FADE-IN & SCALE UP
   Elemen muncul memudar sambil membesar, berurutan satu per satu.
   ===================================================================== */
@keyframes sfs-muncul { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes sfs-muncul-tengah { from { opacity: 0; transform: translateX(-50%) scale(.82); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes sfs-hilang { to { opacity: 0; transform: scale(.92); } }
.panggung { --e: cubic-bezier(.2, .8, .2, 1); }

/* Saat halaman dibuka: label -> judul (per huruf) -> foto -> panah -> tombol pesan -> lokasi */
.pg-eyebrow { animation: sfs-muncul .7s var(--e) .05s both; }
.pg-huruf, .pg-kata.emas .pg-huruf { animation: sfs-muncul .6s var(--e) both; animation-delay: calc(.15s + var(--i) * 45ms); }
.pg-kata.emas .pg-huruf { animation: sfs-muncul .6s var(--e) both, pg-kilau-teks 4s linear 2s infinite; animation-delay: calc(.15s + var(--i) * 45ms), 2s; }
.pg-slide.aktif:not(.masuk) .pg-bingkai { animation: sfs-muncul .9s var(--e) .55s both; }
.pg-slide.aktif img { animation: none; }
.pg-nav { animation: sfs-muncul .6s var(--e) .8s both; }
.pg-nav:hover { transform: scale(1.08); }
.pg-tombol-pesan { animation: sfs-muncul-tengah .7s var(--e) .95s both; }
.pg-lokasi-bawah { animation: sfs-muncul-tengah .7s var(--e) 1.1s both; }

/* Saat foto berganti: foto lama memudar mengecil, foto baru fade-in & scale up, lalu tombol & lokasi menyusul */
.pg-slide.keluar .pg-bingkai { animation: sfs-hilang .45s ease both; }
.pg-slide.keluar.mundur .pg-bingkai { animation-name: sfs-hilang; }
.pg-slide.masuk[data-efek="muncul"] { animation: pg-latar .9s ease both; }
.pg-slide.masuk[data-efek="muncul"] .pg-bingkai { animation: sfs-muncul .85s var(--e) .2s both; }
.pg-tombol-pesan.ganti { animation: sfs-muncul-tengah .6s var(--e) .45s both; }
.pg-lokasi-bawah.ganti { animation: sfs-muncul-tengah .6s var(--e) .6s both; }
/* Judul ikut muncul ulang berurutan per huruf */
.pg-judul-besar.gelombang .pg-huruf { animation: sfs-muncul .5s var(--e) both; animation-delay: calc(var(--i) * 35ms); }
.pg-judul-besar.gelombang .pg-kata.emas .pg-huruf { animation: sfs-muncul .5s var(--e) both, pg-kilau-teks 4s linear infinite; animation-delay: calc(var(--i) * 35ms), .6s; }
@media (prefers-reduced-motion: reduce) {
    .pg-eyebrow, .pg-huruf, .pg-bingkai, .pg-nav, .pg-tombol-pesan, .pg-lokasi-bawah { animation: none !important; opacity: 1; }
}

/* =====================================================================
   HEADER HALAMAN INTERAKTIF (selain Beranda)
   lampu sorot ikut kursor + lantai grid 3D + foto melayang paralaks + judul per huruf
   ===================================================================== */
.page-header.ph {
    --mx: 50%; --my: 40%; --px: 0; --py: 0;
    position: relative; overflow: hidden; isolation: isolate; padding: 70px 0 120px; text-align: center;
    background: linear-gradient(160deg, #070d24 0%, #0f1d4a 55%, #1a1150 100%);
}
.page-header.ph::after { height: 60px; }
.ph-mesh { position: absolute; inset: -30%; z-index: -3; filter: blur(70px); }
.ph-mesh span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: ph-mesh 18s ease-in-out infinite alternate; }
.ph-mesh span:nth-child(1) { width: 40%; height: 70%; left: 10%; top: 20%; background: rgba(29, 63, 160, .8); }
.ph-mesh span:nth-child(2) { width: 35%; height: 60%; right: 12%; top: 10%; background: rgba(231, 4, 152, .45); animation-duration: 22s; animation-delay: -6s; }
.ph-mesh span:nth-child(3) { width: 30%; height: 50%; left: 40%; bottom: 5%; background: rgba(123, 47, 208, .55); animation-duration: 15s; animation-delay: -3s; }
@keyframes ph-mesh { to { transform: translate(10%, -12%) scale(1.2); } }
.ph-lantai {
    position: absolute; z-index: -2; left: -50%; right: -50%; bottom: -10%; height: 70%;
    background-image: linear-gradient(rgba(253, 230, 117, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 230, 117, .22) 1px, transparent 1px);
    background-size: 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: center top;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 95%); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 95%);
    animation: ph-lantai 6s linear infinite;
}
@keyframes ph-lantai { to { background-position: 0 60px, 0 0; } }
.ph-sorot { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(253, 230, 117, .22), rgba(231, 4, 152, .12) 40%, transparent 70%); }
.ph-foto { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ph-foto img {
    position: absolute; left: var(--x); top: var(--y); width: clamp(64px, 7vw, 110px); aspect-ratio: 1; object-fit: cover;
    border-radius: 22px; border: 2px solid rgba(253, 230, 117, .55); opacity: .55;
    box-shadow: 0 16px 34px rgba(6, 10, 30, .5);
    translate: calc(var(--px) * var(--lapis) * -14px) calc(var(--py) * var(--lapis) * -14px);
    transition: translate .35s ease-out, opacity .3s;
    animation: ph-apung 7s ease-in-out infinite; animation-delay: calc(var(--n) * -1.2s);
}
.ph-foto img:nth-child(odd) { border-radius: 50%; }
@keyframes ph-apung { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
.ph:hover .ph-foto img { opacity: .8; }
.ph-isi { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ph-remah { display: inline-flex; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .82rem; color: #b8bdd6;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); animation: sfs-muncul .6s cubic-bezier(.2, .8, .2, 1) both; }
.ph-remah a { color: #f5cf55; text-decoration: none; }
.ph-remah a:hover { text-decoration: underline; }
.ph-ikon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-top: 6px; border-radius: 22px; color: #fff;
    background: var(--gradien-utama); box-shadow: 0 14px 30px rgba(123, 47, 208, .45), 0 0 0 6px rgba(255, 255, 255, .06);
    animation: sfs-muncul .7s cubic-bezier(.3, 1.4, .5, 1) .1s both, ph-ikon 4s ease-in-out 1s infinite; }
@keyframes ph-ikon { 50% { transform: translateY(-6px) rotate(-6deg); } }
.ph-label { font-size: .78rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #f5cf55; animation: sfs-muncul .6s ease .2s both; }
.ph-judul { margin: 0; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.ph-kata { display: inline-block; white-space: nowrap; }
.ph-h { display: inline-block; animation: ph-huruf .7s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(.25s + var(--i) * 40ms); }
@keyframes ph-huruf { from { opacity: 0; transform: translateY(45%) scale(.6); filter: blur(6px); } }
.ph-kata.emas .ph-h { background: linear-gradient(100deg, #f5cf55 20%, #fffbe6 40%, #c8961e 60%, #f5cf55 80%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ph-huruf .7s cubic-bezier(.2, .9, .3, 1.3) both, pg-kilau-teks 5s linear 1.5s infinite; animation-delay: calc(.25s + var(--i) * 40ms), 1.5s; }
.ph-sub { margin: 4px 0 0; max-width: 620px; color: #d9dcec; animation: sfs-muncul .7s ease .7s both; }
@media (max-width: 700px) { .page-header.ph { padding: 46px 0 96px; } .ph-foto img:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ph-mesh span, .ph-lantai, .ph-foto img, .ph-ikon, .ph-h, .ph-remah, .ph-label, .ph-sub { animation: none !important; } }
@media (max-width: 700px) { .ph-foto img { opacity: .28; width: 58px; } }

/* =====================================================================
   HALAMAN KERANJANG BELANJA
   ===================================================================== */
/* Langkah pemesanan */
.langkah-co { display: flex; justify-content: center; gap: 0; list-style: none; padding: 0; margin: 0 auto 30px; max-width: 760px; counter-reset: co; }
.langkah-co li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--muted); text-align: center; }
.langkah-co li span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--border); color: var(--muted); }
.langkah-co li + li::before { content: ''; position: absolute; top: 21px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.langkah-co li.aktif { color: var(--text); }
.langkah-co li.aktif span { background: var(--gradien-utama); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(123, 47, 208, .3); }
.langkah-co li.aktif + li.aktif::before { background: linear-gradient(90deg, #e70498, #1d3fa0); }

.co { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); gap: 28px; }
.co-kiri { display: flex; flex-direction: column; gap: 14px; }
.co-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-kepala h2 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.co-jml { padding: 3px 12px; border-radius: 999px; font-family: var(--font-teks); font-size: .8rem; font-weight: 700; color: var(--primary); background: rgba(29, 63, 160, .08); }
.co-kosongkan { border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); padding: 6px 10px; border-radius: 10px; }
.co-kosongkan:hover { color: #e03131; background: #fdecea; }
.co-list { display: flex; flex-direction: column; gap: 12px; }
.co-list[hidden] { display: none; }

/* Kartu item */
.ci {
    position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 18px;
    padding: 14px 52px 14px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(20, 26, 51, .05); transition: box-shadow .25s, border-color .25s, transform .25s;
    animation: sfs-muncul .45s cubic-bezier(.2, .8, .2, 1) both;
}
.ci:hover { border-color: rgba(29, 63, 160, .25); box-shadow: 0 14px 30px rgba(20, 26, 51, .1); }
.ci-habis { opacity: .6; }
.ci-foto { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 16px; overflow: hidden; color: #fff; font-weight: 800; font-size: 1.8rem; background: linear-gradient(135deg, #f5cf55, #1d3fa0); text-decoration: none; }
.ci-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ci:hover .ci-foto img { transform: scale(1.08); }
.ci-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.ci-nama { font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.ci-nama:hover { color: var(--primary); }
.ci-rasa { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; background: var(--gradien-utama); }
.ci-harga { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ci-harga small { font-size: .78rem; }
.ci-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ci-qty { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); }
.ci-qty button { width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--text); background: #fff; box-shadow: 0 2px 6px rgba(20, 26, 51, .1); transition: background .2s, color .2s; }
.ci-qty button:hover:not(:disabled) { background: var(--gradien-utama); color: #fff; }
.ci-qty button:disabled { opacity: .4; cursor: not-allowed; }
.ci-qty input { width: 44px; margin: 0; padding: 0; border: 0; background: none; text-align: center; font-weight: 800; box-shadow: none !important; -moz-appearance: textfield; }
.ci-qty input::-webkit-outer-spin-button, .ci-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ci-sub { font-family: var(--font-judul); font-size: 1.25rem; color: var(--primary); font-variant-numeric: lining-nums tabular-nums; }
.ci-hapus { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted); background: transparent; transition: background .2s, color .2s; }
.ci-hapus:hover { background: #fdecea; color: #e03131; }

/* Keranjang kosong */
.co-kosong { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; border-radius: 24px; text-align: center; background: #fff; border: 2px dashed var(--border); }
.co-kosong[hidden] { display: none; }
.co-kosong-ikon { display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 86px; margin-bottom: 6px; border-radius: 50%; color: var(--primary); background: rgba(29, 63, 160, .08); animation: ph-ikon 3s ease-in-out infinite; }
.co-kosong h3 { margin: 0; }
.co-kosong p { margin: 0 0 8px; color: var(--muted); }
.co-lanjut { align-self: flex-start; display: inline-flex; gap: 8px; font-weight: 700; color: var(--primary); text-decoration: none; }
.co-lanjut:hover span { transform: translateX(-4px); }
.co-lanjut span { transition: transform .2s; }

/* Formulir checkout */
.co-form {
    position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 24px;
    background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 44px rgba(20, 26, 51, .1);
}
.co-form h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.2rem; }
.co-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: .85rem; color: #fff; background: var(--gradien-utama); }
.co-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 600; font-size: .9rem; }
.co-field small { font-weight: 400; color: var(--muted); }
.co-field[hidden] { display: none !important; }
.co-input { position: relative; display: block; }
.co-input .ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.co-input input { margin: 0; padding-left: 42px; height: 46px; }
.co-field textarea { margin: 0; }
.co-metode { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-metode legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.co-metode label { margin: 0; cursor: pointer; }
.co-metode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-metode label > span {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; height: 100%;
    border: 2px solid var(--border); background: var(--bg); transition: border-color .2s, background .2s, box-shadow .2s;
}
.co-metode label > span .ikon { color: var(--muted); }
.co-metode strong { font-size: .95rem; }
.co-metode small { font-size: .78rem; color: var(--muted); font-weight: 500; }
.co-metode label:hover > span { border-color: rgba(29, 63, 160, .35); }
.co-metode input:checked + span { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gradien-utama) border-box; box-shadow: 0 8px 20px rgba(123, 47, 208, .18); }
.co-metode input:checked + span .ikon { color: #7b2fd0; }
.co-metode input:focus-visible + span { outline: 3px solid #e9b52c; outline-offset: 2px; }
.co-ringkas { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--bg-alt); font-size: .92rem; }
.co-ringkas > div { display: flex; justify-content: space-between; gap: 10px; }
.co-muted { color: var(--muted); font-size: .85rem; }
.co-total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed rgba(20, 26, 51, .2); font-weight: 700; font-size: 1rem; }
.co-total strong { font-family: var(--font-judul); font-size: 1.6rem; color: var(--primary); font-variant-numeric: lining-nums; }
.co-tombol { height: 54px; font-size: 1.05rem; }
.co-tombol:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.co-aman { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .8rem; color: var(--muted); }
.co-aman .ikon { flex-shrink: 0; margin-top: 2px; color: #25d366; }

@media (max-width: 900px) {
    .co { grid-template-columns: 1fr; }
    .co-form { position: static; }
}
@media (max-width: 560px) {
    .ci { grid-template-columns: 72px minmax(0, 1fr); padding-right: 44px; gap: 12px; }
    .ci-foto { width: 72px; height: 72px; }
    .ci-kanan { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .langkah-co li { font-size: .72rem; }
}

/* =====================================================================
   TEKS HERO BERANDA: judul per kata, coretan emas, pil produk, bar info
   ===================================================================== */
.hb-muncul { animation: hb-naik .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--u) * 110ms + .1s); }
@keyframes hb-naik { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
.eyebrow-kaca.hb-muncul { position: relative; overflow: hidden; }
.eyebrow-kaca.hb-muncul::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; animation: hb-sapu 5s ease-in-out 1.5s infinite; }
@keyframes hb-sapu { 0%, 60% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

.hb-judul { line-height: 1.08; }
.hb-kata { display: inline-block; animation: hb-kata .9s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--k) * 120ms + .25s); }
@keyframes hb-kata { from { opacity: 0; transform: translateY(60%) rotate(6deg) scale(.8); filter: blur(8px); } }
.hb-sorot { position: relative; display: inline-block; padding-bottom: .12em; }
.hb-sorot .hb-kilau { display: inline; animation: none; background: none; filter: none; }
.hb-sorot .hb-kata {
    background: linear-gradient(100deg, #f5cf55 10%, #fffbe6 30%, #e9b52c 50%, #f5cf55 70%, #fffbe6 90%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    filter: drop-shadow(0 4px 18px rgba(245, 207, 85, .35));
    animation: hb-kata .9s cubic-bezier(.2, .9, .3, 1.25) both, hb-kilau 5s linear 1.6s infinite;
    animation-delay: calc(var(--k) * 120ms + .25s), 1.6s;
}
.hb-coret { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .36em; overflow: visible; pointer-events: none; }
.hb-coret path { fill: none; stroke: #f5cf55; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hb-coret 1s cubic-bezier(.6, 0, .2, 1) 1.1s forwards; filter: drop-shadow(0 0 6px rgba(245, 207, 85, .6)); }
.hb-coret path + path { stroke: #e70498; stroke-width: 3; opacity: .85; animation-delay: 1.4s; }
@keyframes hb-coret { to { stroke-dashoffset: 0; } }

/* Pil produk di dalam deskripsi */
.hb-pil {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; margin: 0 1px; border-radius: 999px; vertical-align: middle;
    font-weight: 700; font-size: .95em; line-height: 1.5; color: #fff; text-decoration: none; white-space: nowrap;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(253, 230, 117, .35);
    transition: background .25s, transform .25s, border-color .25s, box-shadow .25s;
    animation: hb-pil .7s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--p) * 150ms + .9s);
}
.hb-pil img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1.5px solid #f5cf55; transition: transform .35s; }
.hb-pil:hover { background: var(--gradien-utama); border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(231, 4, 152, .35); }
.hb-pil:hover img { transform: rotate(-12deg) scale(1.15); }
@keyframes hb-pil { from { opacity: 0; transform: scale(.6); } }

/* Tombol */
.hb-kilat { position: relative; overflow: hidden; }
.hb-kilat::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: hb-kilat 3.6s ease-in-out 2s infinite; }
@keyframes hb-kilat { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.hb-wa { gap: 10px; padding-left: 10px; }
.hb-wa-ikon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #25d366; }
.hb-wa-ikon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: hb-denyut 2s ease-out infinite; }
@keyframes hb-denyut { to { transform: scale(1.7); opacity: 0; } }

/* Bar info kaca */
.hb-info {
    display: inline-grid; grid-auto-flow: column; grid-template-columns: none; gap: 0; margin: 34px 0 0; padding: 6px; border-radius: 22px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(6, 10, 30, .3);
}
.hb-info div { position: relative; padding: 10px 16px 10px 10px; border: 0; border-radius: 16px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s; }
.hb-info div + div::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(253, 230, 117, .22); }
.hb-info div:hover { background: rgba(255, 255, 255, .08); }
.hb-info dt { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 6px 14px rgba(233, 181, 44, .3); }
.hb-info div:hover dt { transform: rotate(-10deg) scale(1.12); }
.hb-info strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 960px) {
    .hb-info { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: auto; margin-right: auto; }
    .hb-info div + div::before { display: none; }
}
@media (max-width: 600px) {
    .hb-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .hb-info div { flex-direction: row; text-align: left; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .hb-muncul, .hb-kata, .hb-sorot .hb-kata, .hb-pil, .hb-kilat::after, .hb-wa-ikon::after, .eyebrow-kaca.hb-muncul::after { animation: none !important; }
    .hb-coret path { animation: none; stroke-dashoffset: 0; }
}
.hero h1.hb-judul::after { display: none; }
.hb-info strong span { font-size: inherit; color: inherit; }
.hb-info dd > span { white-space: nowrap; }
@media (max-width: 1320px) {
    .hb-info { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hb-info div + div::before { display: none; }
}

/* =====================================================================
   BERANDA: PERKENALAN WEBSITE (pengganti etalase produk)
   ===================================================================== */
.kenal-wrap { padding-top: 24px; }
.kenal { padding: 44px 44px; text-align: left; }
.kenal-isi { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.kenal-kepala { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kenal-kepala h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; }
.kenal-kepala p { margin: 0; max-width: 420px; color: #d9dcec; line-height: 1.65; }
.kenal-fitur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kf {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 20px; text-decoration: none; color: #fff;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s;
}
.kf:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .11); border-color: rgba(253, 230, 117, .5); }
.kf-ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 14px; color: #141a33; background: var(--gradien-emas); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.kf:hover .kf-ikon { transform: rotate(-10deg) scale(1.1); }
.kf strong { font-size: 1.05rem; }
.kf small { color: #b8bdd6; font-size: .86rem; line-height: 1.5; }
@media (max-width: 900px) {
    .kenal { padding: 36px 24px; }
    .kenal-isi { grid-template-columns: 1fr; gap: 28px; }
    .kenal-kepala { align-items: center; text-align: center; }
    .kenal-kepala p { margin: 0 auto; }
}
@media (max-width: 480px) { .kenal-fitur { grid-template-columns: 1fr; } .kf { flex-direction: row; flex-wrap: wrap; align-items: center; } .kf small { flex-basis: 100%; } }

/* =====================================================================
   BERANDA: Cara Pesan + ajakan tanpa bingkai (langsung di atas latar)
   ===================================================================== */
.hal-index .pesan-gabung { gap: clamp(28px, 5vw, 72px); align-items: center; }
.hal-index .alur, .hal-index .cta-samping {
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
}
.hal-index .cta-samping::before, .hal-index .cta-samping::after, .hal-index .cta-samping .dekor { display: none; }
.hal-index .cta-samping .hero-btn { margin-top: 8px; }
@media (max-width: 900px) { .hal-index .pesan-gabung { gap: 40px; } }
/* Garis bawah "rasa juara": satu garis emas rapi, di bawah huruf berekor (j) */
.hb-sorot { padding-bottom: .26em; }
.hb-coret { left: 1%; width: 98%; bottom: -.04em; height: .22em; }
.hb-coret path { stroke-width: 4; filter: drop-shadow(0 2px 8px rgba(245, 207, 85, .45)); }
.hb-coret path + path { display: none; }
.hb-judul + .hb-desk { margin-top: 14px; }

/* =====================================================================
   NAVIGASI SAMPING: tersembunyi, muncul saat kursor didekatkan ke tepi kiri
   (hanya untuk perangkat dengan mouse; layar sentuh tetap tampil biasa)
   ===================================================================== */
.rail-pemicu { display: none; }
@media (min-width: 961px) {
    .rail-menu { border-top: 0; padding-top: 0; }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    /* menu melayang di atas konten, jadi konten tidak perlu menyisakan ruang */
    :root { --rail: 0px; }
    .rail {
        transform: translate(calc(-100% - 30px), -50%) scale(.92); opacity: 0; pointer-events: none;
        transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .3s ease;
    }
    .rail .rail-item { opacity: 0; transform: translateX(-18px) scale(.6); transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
    .rail-buka .rail, .rail:focus-within { transform: translate(0, -50%) scale(1); opacity: 1; pointer-events: auto; }
    .rail-buka .rail .rail-item, .rail:focus-within .rail-item { opacity: 1; transform: none; }
    .rail-buka .rail .rail-item:hover { transform: translateX(2px); }
    /* muncul bergantian dari atas ke bawah */
    .rail-menu .rail-item:nth-child(1) { transition-delay: .06s; }
    .rail-menu .rail-item:nth-child(2) { transition-delay: .1s; }
    .rail-menu .rail-item:nth-child(3) { transition-delay: .14s; }
    .rail-menu .rail-item:nth-child(4) { transition-delay: .18s; }
    .rail-menu .rail-item:nth-child(5) { transition-delay: .22s; }
    .rail-menu .rail-item:nth-child(6) { transition-delay: .26s; }
    .rail-menu .rail-item:nth-child(7) { transition-delay: .3s; }
    .rail-cart { transition-delay: .34s; }
    .rail-buka .rail .rail-item:hover { transition-delay: 0s; }

    /* penanda di tepi kiri layar */
    .rail-pemicu { display: block; position: fixed; z-index: 89; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 120px; pointer-events: none; }
    .rail-pemicu span {
        position: absolute; left: 4px; top: 0; bottom: 0; width: 5px; border-radius: 999px;
        background: var(--gradien-utama); box-shadow: 0 0 14px rgba(231, 4, 152, .6);
        animation: rail-denyut 2.4s ease-in-out infinite; transition: opacity .3s, transform .3s;
    }
    @keyframes rail-denyut { 50% { opacity: .45; transform: scaleY(.75); } }
    .rail-buka .rail-pemicu span { opacity: 0; transform: translateX(-10px); }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .rail, .rail .rail-item { transition: opacity .2s; transform: translate(0, -50%); }
    .rail .rail-item { transform: none; }
    .rail-pemicu span { animation: none; }
}

/* =====================================================================
   HALAMAN DETAIL PRODUK: panggung gelap beranimasi
   ===================================================================== */
.detail-panggung {
    --mx: 50%; --my: 30%;
    position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 130px; color: #e9e4f5;
    background: linear-gradient(160deg, #070d24 0%, #0f1d4a 55%, #1a1150 100%);
}
.detail-panggung::after { /* gelombang pemisah ke bagian ulasan */
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; z-index: 1; background: var(--bg-alt);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 75 480 75 720 50S1200 5 1440 30V70H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 75 480 75 720 50S1200 5 1440 30V70H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.dp-latar { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dp-latar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 13, 36, .25), rgba(7, 13, 36, .72) 60%, rgba(7, 13, 36, .55)); }
.dp-ambien span {
    position: absolute; inset: -12%; background-size: cover; background-position: center;
    filter: blur(46px) saturate(1.5); opacity: 0; transform: scale(1.1); transition: opacity 1.4s ease;
}
.dp-ambien span.aktif { opacity: .42; animation: dp-ambien 18s ease-in-out infinite alternate; }
@keyframes dp-ambien { to { transform: scale(1.28) translate(3%, -3%) rotate(2deg); } }
.dp-aurora { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; z-index: 1; animation: dp-aurora 16s ease-in-out infinite alternate; }
.dp-aurora.a { width: 38vw; height: 38vw; left: -8vw; top: -10vw; background: rgba(231, 4, 152, .35); }
.dp-aurora.b { width: 34vw; height: 34vw; right: -6vw; bottom: -12vw; background: rgba(29, 63, 160, .55); animation-duration: 20s; animation-delay: -6s; }
.dp-aurora.c { width: 24vw; height: 24vw; left: 40%; top: 30%; background: rgba(123, 47, 208, .35); animation-duration: 13s; animation-delay: -3s; }
@keyframes dp-aurora { to { transform: translate(6vw, 4vw) scale(1.2); } }
.dp-sorot { position: absolute; inset: 0; z-index: 2; background: radial-gradient(460px circle at var(--mx) var(--my), rgba(253, 230, 117, .14), transparent 65%); }
.dp-bara { position: absolute; inset: 0; z-index: 2; }
.dp-bara i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #fde675; box-shadow: 0 0 10px 2px rgba(245, 207, 85, .7); animation: dp-bara var(--d) linear var(--t) infinite; }
@keyframes dp-bara { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 55% { transform: translate(24px, -420px); } 100% { transform: translate(-16px, -900px); opacity: 0; } }

/* Foto: masuk berputar 3D, cahaya berputar di belakang, kilau menyapu */
.detail-panggung .galeri-produk { position: relative; isolation: isolate; }
.dp-foto-masuk { animation: dp-foto 1.1s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes dp-foto { from { opacity: 0; transform: perspective(1100px) rotateY(-30deg) rotateX(8deg) translateX(-50px) scale(.82); filter: blur(10px); } }
.dp-cahaya {
    position: absolute; z-index: -1; left: -6%; right: -6%; top: -6%; aspect-ratio: 1; max-height: 112%; border-radius: 50%;
    background: conic-gradient(from 0deg, #e70498, #7b2fd0, #1d3fa0, #f5cf55, #e70498);
    filter: blur(60px); opacity: .5; animation: dp-putar 12s linear infinite;
}
@keyframes dp-putar { to { transform: rotate(360deg); } }
.detail-panggung .detail-img { box-shadow: 0 30px 70px rgba(4, 8, 26, .6), 0 0 0 1px rgba(253, 230, 117, .25); }
.dp-sapu {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
    animation: dp-sapu 6s ease-in-out 1.6s infinite;
}
@keyframes dp-sapu { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.dp-kilau i {
    position: absolute; z-index: 5; width: 18px; height: 18px; pointer-events: none;
    background: #fde675; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 6px #fde675); animation: dp-kerlip 2.8s ease-in-out infinite;
}
.dp-kilau i:nth-child(1) { left: -8px; top: 8%; }
.dp-kilau i:nth-child(2) { right: -6px; top: 30%; width: 12px; height: 12px; animation-delay: -.9s; }
.dp-kilau i:nth-child(3) { left: 12%; top: -8px; width: 10px; height: 10px; animation-delay: -1.7s; }
.dp-kilau i:nth-child(4) { right: 14%; top: 70%; width: 14px; height: 14px; animation-delay: -2.3s; }
@keyframes dp-kerlip { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.dp-foto-masuk .slide-thumb button { animation: dp-pop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.dp-foto-masuk .slide-thumb button:nth-child(1) { animation-delay: .9s; }
.dp-foto-masuk .slide-thumb button:nth-child(2) { animation-delay: 1s; }
.dp-foto-masuk .slide-thumb button:nth-child(3) { animation-delay: 1.1s; }
.dp-foto-masuk .slide-thumb button:nth-child(n+4) { animation-delay: 1.2s; }
@keyframes dp-pop { from { opacity: 0; transform: scale(.4) translateY(14px); } }

/* Teks: muncul bergantian, judul per huruf */
.dp-muncul { animation: dp-naik .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--u) * 110ms + .35s); }
@keyframes dp-naik { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
.detail-panggung h1 { color: #fff; margin: 12px 0 10px; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.dp-kata { display: inline-block; white-space: nowrap; }
.dp-h { display: inline-block; animation: dp-huruf .7s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(.45s + var(--i) * 35ms); }
@keyframes dp-huruf { from { opacity: 0; transform: translateY(50%) rotate(8deg) scale(.6); filter: blur(6px); } }
.detail-panggung .kategori {
    display: inline-block; padding: 5px 14px; border-radius: 999px; font-weight: 800; letter-spacing: .18em; color: #f5cf55;
    background: rgba(253, 230, 117, .1); border: 1px solid rgba(253, 230, 117, .35);
}
.detail-panggung .meta { color: #b8bdd6; }
.detail-panggung .harga-besar {
    display: inline-block; margin: 10px 0 6px; font-size: clamp(2.2rem, 4vw, 3rem);
    background: linear-gradient(100deg, #f5cf55 10%, #fffbe6 30%, #e9b52c 50%, #f5cf55 70%, #fffbe6 90%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 16px rgba(245, 207, 85, .35));
    animation: dp-naik .8s cubic-bezier(.2, .8, .2, 1) both, hb-kilau 5s linear 2s infinite; animation-delay: calc(var(--u) * 110ms + .35s), 2s;
}
.dp-desk { color: #d9dcec; line-height: 1.75; }

/* Kotak pemesanan kaca */
.detail-panggung .form-pesan {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .22); border-radius: 22px; padding: 22px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px rgba(4, 8, 26, .4); color: #fff;
}
.detail-panggung .form-pesan strong { color: #fff; }
.detail-panggung .pilihan-varian span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; transition: border-color .2s, background .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.detail-panggung .pilihan-varian label:hover span { border-color: #f5cf55; transform: translateY(-2px); }
.detail-panggung .pilihan-varian input:checked + span { background: var(--gradien-utama); border-color: transparent; box-shadow: 0 8px 22px rgba(231, 4, 152, .45); transform: scale(1.06); }
.detail-panggung .qty { border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); }
.detail-panggung .qty button { border: 0; background: rgba(255, 255, 255, .1); color: #fff; transition: background .2s; }
.detail-panggung .qty button:hover { background: var(--gradien-utama); }
.detail-panggung .qty input { border: 0; background: rgba(255, 255, 255, .04); color: #fff; font-weight: 800; }
.detail-panggung .btn-outline { border-color: #f5cf55; color: #f5cf55; }
.detail-panggung .btn-outline:hover { background: rgba(245, 207, 85, .14); color: #fde675; }
.detail-panggung .aksi-pesan .btn { position: relative; overflow: hidden; }
.dp-riak { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; animation: dp-riak .65s ease-out forwards; }
@keyframes dp-riak { to { transform: scale(18); opacity: 0; } }
.dp-percik { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--c); pointer-events: none; z-index: 2; animation: dp-percik .75s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes dp-percik { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.dp-terbang { position: fixed; z-index: 999; left: 0; top: 0; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 3px #f5cf55; }

@media (max-width: 800px) {
    .detail-panggung { padding: 32px 0 100px; }
    .dp-foto-masuk { animation-name: dp-foto-hp; }
    @keyframes dp-foto-hp { from { opacity: 0; transform: translateY(30px) scale(.9); filter: blur(8px); } }
}
@media (prefers-reduced-motion: reduce) {
    .dp-ambien span.aktif, .dp-aurora, .dp-bara i, .dp-foto-masuk, .dp-cahaya, .dp-sapu, .dp-kilau i, .dp-foto-masuk .slide-thumb button,
    .dp-muncul, .dp-h, .detail-panggung .harga-besar { animation: none !important; }
    .dp-bara, .dp-kilau, .dp-sapu { display: none; }
}

/* =====================================================================
   BERANDA: Cara Pesan digabung ke hero (3 langkah ringkas)
   ===================================================================== */
.hb-cara { margin: 26px 0 0; padding: 16px 18px 14px; border-radius: 22px; max-width: 620px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hb-cara-judul { margin: 0 0 12px; font-family: var(--font-judul); font-size: 1.15rem; font-weight: 800; color: #fff; }
.hb-cara-judul span { font-family: var(--font-teks); font-size: .8rem; font-weight: 600; color: #f5cf55; }
.hb-cara ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: cara; }
.hb-cara li { position: relative; display: flex; align-items: center; gap: 10px; counter-increment: cara; }
.hb-cara li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid #f5cf55; border-right: 2px solid #f5cf55; transform: rotate(45deg); opacity: .7; }
.hb-cara-ikon { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: var(--gradien-utama); box-shadow: 0 6px 16px rgba(123, 47, 208, .4); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.hb-cara-ikon::after { content: counter(cara); position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; color: #141a33; background: #f5cf55; }
.hb-cara li:hover .hb-cara-ikon { transform: rotate(-10deg) scale(1.1); }
.hb-cara li div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hb-cara strong { color: #fff; font-size: .9rem; }
.hb-cara small { color: #b8bdd6; font-size: .74rem; }
.hb-teks .hero-btn { margin-top: 22px; }
.hb-jam { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .88rem; color: #b8bdd6; }
.hb-jam .ikon { color: #f5cf55; }
@media (max-width: 960px) {
    .hb-cara { margin-left: auto; margin-right: auto; text-align: left; }
    .hb-jam { justify-content: center; }
}
@media (max-width: 560px) {
    .hb-cara ol { grid-template-columns: 1fr; gap: 12px; }
    .hb-cara li + li::before { display: none; }
    .hb-cara-judul { text-align: center; }
}

/* =====================================================================
   AKUN PELANGGAN: Masuk / Daftar / Akun Saya
   ===================================================================== */
/* Tombol akun di menu samping & bar atas */
.rail-inisial { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: .9rem; color: #141a33; background: var(--gradien-emas); }
.rail-akun.aktif .rail-inisial { box-shadow: 0 0 0 2px #fff; }
@media (min-width: 961px) and (hover: hover) and (pointer: fine) { .rail-akun { transition-delay: .32s; } }
.akun-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: var(--text); background: rgba(20, 26, 51, .06); text-decoration: none; }
.akun-link.aktif { color: #fff; background: var(--gradien-utama); }
.akun-link .rail-inisial { width: 32px; height: 32px; }

/* Panggung halaman masuk/daftar */
.auth-panggung {
    --mx: 50%; --my: 30%;
    position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - 80px); display: flex; align-items: center; padding: 56px 0;
    background: linear-gradient(160deg, #070d24 0%, #0f1d4a 55%, #1a1150 100%); color: #e9e4f5;
}
.auth-panggung > .container { position: relative; z-index: 1; }
.auth-kartu {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1040px; margin: 0 auto; border-radius: 30px; overflow: hidden;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .22);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 40px 90px rgba(4, 8, 26, .55);
    animation: auth-masuk .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes auth-masuk { from { opacity: 0; transform: perspective(1200px) rotateX(10deg) translateY(40px) scale(.95); filter: blur(8px); } }

/* Sisi kiri: logo + manfaat */
.auth-sisi {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: 48px 36px; text-align: center;
    background: radial-gradient(circle at 50% 30%, rgba(231, 4, 152, .35), transparent 60%), linear-gradient(160deg, rgba(29, 63, 160, .55), rgba(123, 47, 208, .35));
}
.auth-cincin { position: absolute; top: 48px; left: 50%; width: 220px; height: 220px; margin-left: -110px; margin-top: -30px; border-radius: 50%;
    background: conic-gradient(from 0deg, #e70498, #7b2fd0, #1d3fa0, #f5cf55, #e70498); filter: blur(40px); opacity: .55; animation: dp-putar 10s linear infinite; }
.auth-logo { position: relative; width: 150px; height: 150px; filter: drop-shadow(0 18px 30px rgba(4, 8, 26, .55)); animation: auth-logo 6s ease-in-out infinite; }
@keyframes auth-logo { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.auth-sisi h2 { position: relative; margin: 0; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; }
.auth-sisi h2 span { background: var(--gradien-emas); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-manfaat { position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.auth-manfaat li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: #e9e4f5; animation: dp-naik .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.5s + var(--n) * 120ms); }
.auth-manfaat li span { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; color: #141a33; background: var(--gradien-emas); }

/* Sisi kanan: formulir */
.auth-form { display: flex; flex-direction: column; gap: 14px; padding: 40px 44px; background: #fff; color: var(--text); }
.auth-form h1 { margin: 6px 0 0; font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.auth-sub { margin: -6px 0 4px; color: var(--muted); }
.auth-tab { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--bg-alt); }
.auth-tab a { position: relative; z-index: 1; padding: 10px; border-radius: 999px; text-align: center; font-weight: 700; color: var(--muted); text-decoration: none; transition: color .3s; }
.auth-tab a.aktif { color: #fff; }
.auth-tab-bg { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--gradien-utama); box-shadow: 0 6px 16px rgba(123, 47, 208, .35); animation: auth-tab-kiri .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.auth-tab-bg.kanan { left: 50%; animation-name: auth-tab-kanan; }
@keyframes auth-tab-kiri { from { transform: translateX(100%); } }
@keyframes auth-tab-kanan { from { transform: translateX(-100%); } }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 600; font-size: .9rem; }
.auth-field small { font-weight: 400; color: var(--muted); }
.auth-field .co-input input { padding-right: 46px; }
.auth-field .co-input input:focus { border-color: #7b2fd0; box-shadow: 0 0 0 4px rgba(123, 47, 208, .14); }
.auth-field .co-input input:focus ~ .ikon, .auth-field .co-input:focus-within > .ikon { color: #7b2fd0; }
.auth-mata { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px; cursor: pointer; color: var(--muted); background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.auth-mata .ikon { position: static; transform: none; }
.auth-mata:hover, .auth-mata.lihat { color: #7b2fd0; background: rgba(123, 47, 208, .08); }
.auth-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.auth-meter i { height: 5px; border-radius: 999px; background: var(--border); transition: background .3s; }
.auth-meter[data-skor="1"] i:nth-child(-n+1) { background: #e03131; }
.auth-meter[data-skor="2"] i:nth-child(-n+2) { background: #f08c00; }
.auth-meter[data-skor="3"] i:nth-child(-n+3) { background: #e9b52c; }
.auth-meter[data-skor="4"] i { background: #2f9e44; }
.auth-meter-teks { min-height: 1em; font-size: .78rem; }
.co-input input.tidak-cocok { border-color: #e03131; }
.co-input input.cocok { border-color: #2f9e44; }
.auth-tombol { height: 52px; margin-top: 4px; font-size: 1.02rem; gap: 8px; }
.auth-alih { margin: 0; text-align: center; color: var(--muted); }
.auth-alih a, .auth-catatan a { font-weight: 700; color: var(--primary); }
.auth-catatan { margin: -6px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }

/* Halaman Akun Saya */
.akun { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.akun-profil {
    position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 22px; border-radius: 24px; text-align: center;
    background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 44px rgba(20, 26, 51, .08);
}
.akun-avatar { display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 86px; margin-bottom: 6px; border-radius: 50%;
    font-family: var(--font-judul); font-size: 2.4rem; font-weight: 800; color: #fff; background: var(--gradien-utama);
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(233, 181, 44, .7), 0 14px 30px rgba(123, 47, 208, .35); animation: dp-pop .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.akun-profil h2 { margin: 0; font-size: 1.35rem; }
.akun-kontak { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .88rem; color: var(--muted); }
.akun-angka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 12px 0 6px; }
.akun-angka div { padding: 10px; border-radius: 14px; background: var(--bg-alt); }
.akun-angka dt { font-size: .72rem; color: var(--muted); }
.akun-angka dd { margin: 2px 0 0; font-weight: 800; font-size: .95rem; color: var(--primary); }
.akun-menu { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 6px 0; }
.akun-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; font-weight: 600; color: var(--text); text-decoration: none; transition: background .2s, color .2s; }
.akun-menu a:hover { background: var(--bg-alt); }
.akun-menu a.aktif { color: #fff; background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(123, 47, 208, .3); }
.akun-profil form { width: 100%; }
.akun-keluar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 600; color: #e03131; background: #fdecea; }
.akun-keluar:hover { background: #fbd5d1; }
.akun-sejak { margin-top: 6px; color: var(--muted); font-size: .78rem; }
.akun-isi { min-width: 0; }
.akun-judul { margin: 0 0 16px; font-size: 1.6rem; }
.akun-pesanan { display: flex; flex-direction: column; gap: 10px; }
.ap {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
    color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(20, 26, 51, .05);
    transition: transform .25s, box-shadow .25s, border-color .25s; animation: dp-naik .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n) * 60ms);
}
.ap:hover { transform: translateY(-3px); border-color: rgba(123, 47, 208, .3); box-shadow: 0 14px 30px rgba(20, 26, 51, .1); }
.ap-ikon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: var(--gradien-utama); }
.ap-info { display: flex; flex-direction: column; min-width: 0; }
.ap-info small { color: var(--muted); font-size: .8rem; }
.ap-total { font-family: var(--font-judul); color: var(--primary); font-size: 1.1rem; font-variant-numeric: lining-nums; }
.ap-panah { color: var(--muted); transition: transform .2s; }
.ap:hover .ap-panah { transform: translateX(4px); color: #7b2fd0; }
.ap .status { padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.status-baru { color: #1c7ed6; background: #e7f1fd; }
.status-diproses { color: #b7791f; background: #fff4db; }
.status-selesai { color: #2f9e44; background: #e6f6ea; }
.status-batal { color: #e03131; background: #fdecea; }
.akun-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 44px rgba(20, 26, 51, .08); }
.akun-form .btn { align-self: flex-start; gap: 8px; }
.akun-form textarea { margin: 0; }
.co-akun { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; padding: 10px 12px; border-radius: 12px; font-size: .84rem; color: var(--muted); background: var(--bg-alt); }
.co-akun a { font-weight: 700; color: var(--primary); }

@media (max-width: 900px) {
    .auth-kartu { grid-template-columns: 1fr; }
    .auth-sisi { padding: 32px 24px; }
    .auth-manfaat { display: none; }
    .auth-logo { width: 96px; height: 96px; }
    .auth-cincin { top: 20px; width: 160px; height: 160px; margin-left: -80px; }
    .akun { grid-template-columns: 1fr; }
    .akun-profil { position: static; }
}
@media (max-width: 560px) {
    .auth-panggung { padding: 24px 0; }
    .auth-form { padding: 28px 20px; }
    .auth-dua { grid-template-columns: 1fr; }
    .ap { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .ap-ikon { width: 40px; height: 40px; }
    .ap .status { grid-column: 2; justify-self: start; }
    .ap-total { grid-column: 3; grid-row: 1 / span 2; }
    .ap-panah { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-kartu, .auth-cincin, .auth-logo, .auth-manfaat li, .auth-tab-bg, .akun-avatar, .ap { animation: none !important; }
}
.auth-field > span:first-child small { font-weight: 400; color: var(--muted); }
.auth-field input::-ms-reveal, .auth-field input::-ms-clear { display: none; }
/* Tombol WA melayang dihapus: tombol musik turun ke pojok kanan bawah */
.tombol-musik { bottom: 20px; }

/* =====================================================================
   AKUN: tab Rekomendasi (terlaris & sering dibeli)
   ===================================================================== */
.rk-grup { margin-bottom: 26px; }
.rk-grup h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; }
.rk-grup h3 .ikon { color: #7b2fd0; }
.rk-sub { margin: 2px 0 12px; font-size: .86rem; color: var(--muted); }
.rk {
    display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 10px; padding: 12px 16px 12px 12px;
    border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(20, 26, 51, .05);
    transition: transform .25s, box-shadow .25s, border-color .25s; animation: dp-naik .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n) * 70ms);
}
.rk:hover { transform: translateY(-3px); border-color: rgba(123, 47, 208, .3); box-shadow: 0 14px 30px rgba(20, 26, 51, .1); }
.rk-no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: var(--muted); background: var(--bg-alt); }
.rk-medali { color: #141a33; box-shadow: 0 6px 14px rgba(20, 26, 51, .18); }
.rk-1 { background: linear-gradient(135deg, #fde675, #e9b52c); }
.rk-2 { background: linear-gradient(135deg, #eef1f6, #b8bfcc); }
.rk-3 { background: linear-gradient(135deg, #f3c9a1, #c27a3e); }
.rk-foto { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; font-weight: 800; font-size: 1.4rem; color: #fff; background: var(--gradien-utama); text-decoration: none; }
.rk-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.rk:hover .rk-foto img { transform: scale(1.1); }
.rk-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-nama { font-weight: 800; color: var(--text); text-decoration: none; }
.rk-nama:hover { color: var(--primary); }
.rk-info small { color: var(--muted); font-size: .8rem; }
.rk-info small b { color: var(--text); }
.rk-bar { display: block; height: 6px; margin-top: 3px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gradien-utama); transform-origin: left; animation: rk-bar 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--n) * 70ms); }
@keyframes rk-bar { from { transform: scaleX(0); } }
.rk-aksi { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rk-aksi strong { font-family: var(--font-judul); color: var(--primary); font-variant-numeric: lining-nums; }
.rk-habis { font-size: .78rem; font-weight: 700; color: #e03131; }
@media (max-width: 560px) {
    .rk { grid-template-columns: 30px 52px minmax(0, 1fr); }
    .rk-foto { width: 52px; height: 52px; }
    .rk-no { width: 30px; height: 30px; }
    .rk-aksi { grid-column: 2 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .rk, .rk-bar i { animation: none; } }

/* =====================================================================
   AKUN SAYA (tampilan baru): panggung profil + kartu member 3D + tab geser
   ===================================================================== */
.profil-panggung {
    --mx: 50%; --my: 30%;
    position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 120px; color: #e9e4f5;
    background: linear-gradient(160deg, #070d24 0%, #0f1d4a 55%, #1a1150 100%);
}
.profil-panggung::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; z-index: 1; background: var(--bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 75 480 75 720 50S1200 5 1440 30V70H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 75 480 75 720 50S1200 5 1440 30V70H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.pp { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pp-sapa { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.pp-tangan { display: inline-block; transform-origin: 70% 80%; animation: pp-lambai 2.4s ease-in-out 1s infinite; }
@keyframes pp-lambai { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.pp-nama { margin: 14px 0 0; font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1.05; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.pp-emas .dp-h { background: linear-gradient(100deg, #f5cf55 10%, #fffbe6 30%, #e9b52c 50%, #f5cf55 70%, #fffbe6 90%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: dp-huruf .7s cubic-bezier(.2, .9, .3, 1.3) both, hb-kilau 5s linear 1.8s infinite; animation-delay: calc(.45s + var(--i) * 35ms), 1.8s; }
.pp-sub { max-width: 500px; margin: 14px 0 0; color: #d9dcec; line-height: 1.7; }
.pp-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin: 28px 0 0; }
.pp-angka div { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .2);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .3s; }
.pp-angka div:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); }
.pp-angka dt { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #b8bdd6; }
.pp-angka dt .ikon { color: #f5cf55; }
.pp-angka dd { margin: 4px 0 0; font-family: var(--font-judul); font-size: 1.5rem; font-weight: 800; color: #fff; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Kartu member 3D */
.pp-kartu-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 1200px; }
.kartu-member {
    --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; --balik: 0deg;
    position: relative; width: min(100%, 440px); aspect-ratio: 1.586; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #fff;
    transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--balik)));
    transition: transform .6s cubic-bezier(.2, .8, .2, 1); animation: km-apung 6s ease-in-out 1.5s infinite;
}
.kartu-member.miring { transition: transform .12s ease-out; }
.kartu-member.terbalik { --balik: 180deg; }
@keyframes km-apung { 50% { translate: 0 -10px; } }
.km-sisi {
    position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 24px; border-radius: 22px; overflow: hidden; text-align: left;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: radial-gradient(circle at 85% 15%, rgba(253, 230, 117, .35), transparent 45%), linear-gradient(135deg, #e70498 0%, #7b2fd0 45%, #1d3fa0 100%);
    box-shadow: 0 30px 60px rgba(4, 8, 26, .55), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.km-sisi::before { content: ''; position: absolute; inset: 0; opacity: .18; pointer-events: none;
    background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255, 255, 255, .5) 14px 15px); }
.km-belakang { transform: rotateY(180deg); justify-content: center; gap: 12px; background: linear-gradient(135deg, #1d3fa0, #0f1d4a 60%, #1a1150); }
.km-kilau { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .85), transparent 45%),
                linear-gradient(115deg, transparent 30%, rgba(253, 230, 117, .5) 45%, rgba(231, 4, 152, .4) 55%, transparent 70%); }
.kartu-member:hover .km-kilau, .kartu-member.miring .km-kilau { opacity: 1; }
.km-atas { position: relative; display: flex; align-items: center; gap: 10px; }
.km-atas img { width: 46px; height: 46px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.km-toko { display: flex; flex-direction: column; font-weight: 800; letter-spacing: .06em; line-height: 1.15; }
.km-toko small { font-weight: 600; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: #fde675; }
.km-chip { margin-left: auto; width: 44px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #fde675, #c8961e);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); position: relative; }
.km-chip::before { content: ''; position: absolute; inset: 8px 6px; border: 1px solid rgba(80, 50, 0, .45); border-radius: 4px; }
.km-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-top: auto; border-radius: 50%;
    font-family: var(--font-judul); font-size: 1.6rem; font-weight: 800; color: #141a33; background: var(--gradien-emas); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.km-nama { position: relative; margin-top: 8px; font-family: var(--font-judul); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.km-bawah { position: relative; display: flex; gap: 28px; margin-top: 8px; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; letter-spacing: .08em; }
.km-bawah span { display: flex; flex-direction: column; }
.km-bawah small { font-family: var(--font-teks); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.km-garis { position: absolute; left: 0; right: 0; top: 26px; height: 42px; background: #070d24; }
.km-data { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: .92rem; }
.km-data:first-of-type { margin-top: 48px; }
.km-data .ikon { color: #f5cf55; flex-shrink: 0; }
.km-tip { position: relative; margin-top: auto; font-size: .72rem; color: rgba(255, 255, 255, .6); }
.pp-petunjuk { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #b8bdd6; }
.pp-petunjuk .ikon { transform: rotate(-90deg); animation: pp-petunjuk 1.6s ease-in-out infinite; }
@keyframes pp-petunjuk { 50% { translate: 0 -4px; } }

/* Tab bar dengan penanda geser */
.akun-wrap2 { padding-top: 10px; }
.akun-tabbar {
    position: relative; display: flex; align-items: center; gap: 4px; padding: 6px; margin: 0 0 24px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
    background: #fff; border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(20, 26, 51, .08);
}
.akun-tabbar::-webkit-scrollbar { display: none; }
.akun-tab-penanda { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: var(--gradien-utama);
    box-shadow: 0 8px 18px rgba(123, 47, 208, .35); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1); }
.akun-tabbar a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; white-space: nowrap;
    font-weight: 700; color: var(--muted); text-decoration: none; transition: color .3s; }
.akun-tabbar a:hover { color: var(--text); }
.akun-tabbar a.aktif { color: #fff; }
.akun-tabbar:not(.siap) a.aktif { background: var(--gradien-utama); } /* sebelum JS siap */
.akun-tab-keluar { margin-left: auto; }
.akun-tab-keluar button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: #e03131; background: transparent; white-space: nowrap; }
.akun-tab-keluar button:hover { background: #fdecea; }
.akun-isi2 { max-width: 920px; margin: 0 auto; }
.akun-panel.masuk { animation: panel-masuk .5s cubic-bezier(.2, .8, .2, 1) both; }
.akun-panel.masuk-kiri { animation: panel-masuk-kiri .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes panel-masuk { from { opacity: 0; transform: translateX(40px); filter: blur(4px); } }
@keyframes panel-masuk-kiri { from { opacity: 0; transform: translateX(-40px); filter: blur(4px); } }
.akun-isi2 .akun-form { max-width: none; }

@media (max-width: 900px) {
    .pp { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .pp-sub, .pp-angka { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
    .profil-panggung { padding: 36px 0 96px; }
    .pp-angka { grid-template-columns: 1fr 1fr; }
    .pp-angka div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
    .km-sisi { padding: 16px 18px; }
    .km-bawah { font-size: .8rem; gap: 18px; }
    .akun-tabbar a { padding: 10px 14px; }
    .akun-tabbar a span, .akun-tab-keluar span { display: none; }
    .akun-tabbar a.aktif span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-tangan, .kartu-member, .pp-petunjuk .ikon, .pp-emas .dp-h, .akun-panel.masuk, .akun-panel.masuk-kiri { animation: none !important; }
}
.km-belakang { justify-content: flex-start; gap: 10px; }
.km-garis { top: 22px; height: 38px; }
.km-data:first-of-type { margin-top: 62px; }
@media (max-width: 560px) { .km-data:first-of-type { margin-top: 54px; } .km-data { font-size: .82rem; } }
.km-garis + .km-data { margin-top: 62px; }
@media (max-width: 560px) { .km-garis + .km-data { margin-top: 52px; } }
/* Keamanan: info + saklar tampilkan semua password */
.kunci-info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: .85rem; color: #5b4a12; background: #fff7dc; border: 1px solid #f5e1a0; }
.kunci-info .ikon { flex-shrink: 0; margin-top: 1px; color: #c8961e; }
.saklar-lihat { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: .9rem; cursor: pointer; user-select: none; align-self: flex-start; }
.saklar-lihat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.saklar { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--border); transition: background .25s; }
.saklar::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.saklar-lihat input:checked + .saklar { background: var(--gradien-utama); }
.saklar-lihat input:checked + .saklar::after { transform: translateX(20px); }
.saklar-lihat input:focus-visible + .saklar { outline: 3px solid #e9b52c; outline-offset: 2px; }

/* =====================================================================
   AKUN > PESANAN: Lacak pesanan (pengganti halaman Cek Pesanan)
   ===================================================================== */
.lk { margin-bottom: 28px; scroll-margin-top: 20px; }
.lk-form {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px;
    border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0f1d4a, #1a1150 60%, #3a1468); box-shadow: 0 18px 40px rgba(15, 29, 74, .25);
}
.lk-ikon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: #141a33; background: var(--gradien-emas); animation: ph-ikon 3s ease-in-out infinite; }
.lk-judul { display: flex; flex-direction: column; line-height: 1.3; }
.lk-judul small { color: #b8bdd6; font-size: .78rem; }
.lk-form .co-input input { margin: 0; height: 44px; color: var(--text); }
.lk-form .btn { height: 44px; gap: 8px; white-space: nowrap; }
.lk-hasil { margin-top: 14px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 44px rgba(20, 26, 51, .08); animation: dp-naik .6s cubic-bezier(.2, .8, .2, 1) both; }
.lk-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lk-kepala > div { display: flex; flex-direction: column; }
.lk-kepala small { color: var(--muted); font-size: .8rem; }
.lk-kode { font-family: ui-monospace, Consolas, monospace; font-size: 1.4rem; letter-spacing: .06em; color: var(--primary); }
.lk-kepala .status { padding: 5px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.lk-langkah { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 22px 0 18px; padding: 0; }
.lk-langkah::before, .lk-langkah::after { content: ''; position: absolute; top: 21px; left: 16.66%; height: 4px; border-radius: 999px; }
.lk-langkah::before { right: 16.66%; background: var(--bg-alt); }
.lk-langkah::after { width: calc(66.66% * var(--isi)); background: var(--gradien-utama); transform-origin: left; animation: lk-isi 1.1s cubic-bezier(.6, 0, .2, 1) .3s both; }
@keyframes lk-isi { from { transform: scaleX(0); } }
.lk-langkah li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--muted); text-align: center; }
.lk-langkah li span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: var(--muted); background: #fff; border: 3px solid var(--bg-alt);
    transition: all .3s; animation: dp-pop .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.3s + var(--k) * .4s); }
.lk-langkah li.lewat, .lk-langkah li.kini { color: var(--text); }
.lk-langkah li.lewat span, .lk-langkah li.kini span { color: #fff; border-color: transparent; background: var(--gradien-utama); }
.lk-langkah li.kini span { box-shadow: 0 0 0 0 rgba(231, 4, 152, .5); animation: dp-pop .6s cubic-bezier(.3, 1.5, .5, 1) both, lk-denyut 2s ease-out 1.6s infinite; animation-delay: calc(.3s + var(--k) * .4s), 1.6s; }
@keyframes lk-denyut { to { box-shadow: 0 0 0 14px rgba(231, 4, 152, 0); } }
.lk-hasil .tabel-ringkas { margin-bottom: 14px; }
.ap.dipilih { border-color: #7b2fd0; box-shadow: 0 0 0 3px rgba(123, 47, 208, .18), 0 14px 30px rgba(20, 26, 51, .1); }
@media (max-width: 900px) {
    .lk-form { grid-template-columns: auto minmax(0, 1fr); }
    .lk-form .co-input, .lk-form .btn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .lk-ikon, .lk-hasil, .lk-langkah::after, .lk-langkah li span { animation: none !important; } }
/* Halaman masuk/daftar/lupa password tanpa footer: panggung penuh layar */
.hal-masuk .auth-panggung, .hal-daftar .auth-panggung, .hal-lupa-password .auth-panggung { min-height: 100vh; }
.auth-label-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auth-label-baris a { font-size: .82rem; font-weight: 700; color: #7b2fd0; text-decoration: none; }
.auth-label-baris a:hover { text-decoration: underline; }
.auth-kembali { align-self: flex-start; display: inline-flex; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--primary); text-decoration: none; }
.auth-kembali span { transition: transform .2s; }
.auth-kembali:hover span { transform: translateX(-4px); }
.auth-gembok { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 36px; color: #141a33;
    background: var(--gradien-emas); box-shadow: 0 20px 40px rgba(4, 8, 26, .45); animation: auth-logo 6s ease-in-out infinite; }
@media (max-width: 900px) { .auth-gembok { width: 90px; height: 90px; border-radius: 26px; } .auth-gembok .ikon { width: 44px; height: 44px; } }

/* "rasa juara": huruf miring elegan, emas merata, tidak terpotong */
.hb-sorot { font-style: italic; font-weight: 800; letter-spacing: .005em; padding-right: .08em; }
.hb-sorot .hb-kata {
    padding: .06em .1em .22em .04em; margin: 0 -.06em -.22em 0;
    background: linear-gradient(180deg, #fff6cf 0%, #fbe08a 30%, #f5cf55 55%, #d9a521 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 rgba(120, 70, 0, .35)) drop-shadow(0 8px 22px rgba(245, 207, 85, .35));
    animation: hb-kata .9s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--k) * 120ms + .25s);
}
.hb-coret { bottom: -.08em; }

/* =====================================================================
   BATALKAN PESANAN (pelanggan, selama status masih "Baru")
   ===================================================================== */
.batal-kotak { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 16px; border-radius: 16px; background: #fff5f5; border: 1px dashed #f3b3b3; text-align: left; }
.batal-kotak > div { display: flex; flex-direction: column; }
.batal-kotak small { color: var(--muted); font-size: .8rem; }
.btn-batal { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 2px solid #e03131; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: #e03131; background: #fff; transition: background .2s, color .2s, transform .2s; }
.btn-batal .ikon { transform: rotate(45deg); }
.btn-batal:hover { background: #e03131; color: #fff; transform: translateY(-2px); }
.modal-batal { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 40px 90px rgba(4, 8, 26, .5); }
.modal-batal[open] { animation: mb-buka .45s cubic-bezier(.3, 1.4, .5, 1); }
.modal-batal::backdrop { background: rgba(7, 13, 36, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: mb-latar .3s ease; }
@keyframes mb-buka { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes mb-latar { from { opacity: 0; } }
.mb-isi { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 26px 24px; text-align: center; }
.mb-ikon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-size: 2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff6b6b, #e03131); box-shadow: 0 0 0 8px #fdecea; animation: goyang .5s .3s; }
.mb-isi h3 { margin: 4px 0 0; font-size: 1.2rem; }
.mb-isi > p { margin: 0; color: var(--muted); font-size: .9rem; }
.mb-alasan { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 0; padding: 0; border: 0; }
.mb-alasan legend { width: 100%; margin-bottom: 8px; font-weight: 700; font-size: .88rem; }
.mb-alasan label { margin: 0; cursor: pointer; }
.mb-alasan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mb-alasan span { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600; border: 1.5px solid var(--border); background: var(--bg); transition: all .2s; }
.mb-alasan label:hover span { border-color: #e03131; }
.mb-alasan input:checked + span { color: #fff; background: #e03131; border-color: #e03131; box-shadow: 0 6px 14px rgba(224, 49, 49, .3); }
.mb-alasan input:focus-visible + span { outline: 3px solid #e9b52c; outline-offset: 2px; }
.mb-lain { width: 100%; margin: 0; }
.mb-tombol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.mb-ya { color: #fff; background: linear-gradient(135deg, #ff6b6b, #e03131); border: 0; box-shadow: 0 8px 18px rgba(224, 49, 49, .35); }
.mb-ya:hover { filter: brightness(1.08); }
.ikon-batal { background: linear-gradient(135deg, #ff6b6b, #e03131) !important; }
@media (prefers-reduced-motion: reduce) { .modal-batal[open], .modal-batal::backdrop, .mb-ikon { animation: none; } }

/* =====================================================================
   RESPONSIF SEMUA PERANGKAT
   1) Layar besar/monitor lebar: seluruh tampilan diperbesar proporsional (zoom)
      sehingga tidak tampak kecil di tengah. Dipilih dari lebar DAN tinggi layar.
   2) Footer selalu menempel di bawah layar (tidak ada ruang kosong di bawahnya).
   Catatan: di browser modern, satuan vh/vw ikut dikali zoom, maka dibagi --zoom.
   ===================================================================== */
:root { --zoom: 1; }
@media (min-width: 1700px) and (min-height: 940px)  { :root { --zoom: 1.12; } }
@media (min-width: 1920px) and (min-height: 1040px) { :root { --zoom: 1.25; } }
@media (min-width: 2300px) and (min-height: 1250px) { :root { --zoom: 1.45; } }
@media (min-width: 2700px) and (min-height: 1480px) { :root { --zoom: 1.7; } }
@media (min-width: 3200px) and (min-height: 1740px) { :root { --zoom: 2; } }
@media (min-width: 3700px) and (min-height: 2000px) { :root { --zoom: 2.35; } }
html { zoom: var(--zoom); }

body { min-height: calc(100vh / var(--zoom)); display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > section:last-child { flex-grow: 1; }
/* Beranda: hero mengisi tinggi layar, isi di tengah */
.hal-index main > .hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.hal-index main > .hero ~ section:last-child { flex-grow: 0; }

/* Elemen setinggi layar: bagi dengan zoom agar tetap pas satu layar */
.panggung { height: calc(100svh / var(--zoom)); }
@media (max-width: 960px) { .panggung { height: calc(100svh - 64px); } }
.auth-panggung { min-height: calc((100vh - 80px) / var(--zoom)); }
.hal-masuk .auth-panggung, .hal-daftar .auth-panggung, .hal-lupa-password .auth-panggung { min-height: calc(100vh / var(--zoom)); }
.modal-batal { width: min(460px, calc(100vw / var(--zoom) - 32px)); }

/* Kotak ulasan di beranda: lebih ringkas */
.kata-pelanggan { max-width: 640px; padding: 30px 32px 22px; }
.kp-kutip { top: -22px; left: 18px; font-size: 8rem; }
.kp-panggung { margin-top: 4px; }
.kp-item blockquote { margin: 8px 0 10px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.kata-pelanggan .eyebrow { font-size: .72rem; }
.kp-titik { margin-top: 12px; }
@media (max-width: 640px) { .kata-pelanggan { padding: 26px 18px 18px; } .kp-kutip { font-size: 6rem; } }
#testimoni.section { padding: 8px 0 48px; }

/* =====================================================================
   BERANDA: tombol utama "Lihat Menu" (lebih besar & mengundang diklik)
   ===================================================================== */
.hb-cta {
    position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px;
    padding: 10px 10px 10px 34px; border: 0; border-radius: 999px; text-decoration: none;
    font-family: var(--font-teks); font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; color: #fff;
    background: linear-gradient(110deg, #e70498, #7b2fd0 35%, #1d3fa0 60%, #7b2fd0 80%, #e70498) 0 0 / 250% 100%;
    box-shadow: 0 14px 34px rgba(231, 4, 152, .45), 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 1px 0 rgba(255, 255, 255, .35) inset;
    animation: cta-alir 6s linear infinite, cta-denyut 2.6s ease-out 1.5s infinite;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.hb-cta-teks { position: relative; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.hb-cta-panah {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    color: #7b2fd0; background: #fff; box-shadow: 0 6px 16px rgba(6, 10, 30, .3);
    transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .3s, color .3s;
}
.hb-cta-panah .ikon { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
/* kilau menyapu */
.hb-cta::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: hb-kilat 3.6s ease-in-out 2s infinite; }
.hb-cta:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 22px 46px rgba(231, 4, 152, .55), 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 1px 0 rgba(255, 255, 255, .35) inset; }
.hb-cta:hover .hb-cta-panah { transform: translateX(4px); background: #fde675; color: #141a33; }
.hb-cta:hover .hb-cta-panah .ikon { transform: translateX(2px); }
.hb-cta:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.hb-cta:focus-visible { outline: 3px solid #fde675; outline-offset: 4px; }
@keyframes cta-alir { to { background-position: -250% 0; } }
@keyframes cta-denyut {
    0% { box-shadow: 0 14px 34px rgba(231, 4, 152, .45), 0 0 0 0 rgba(231, 4, 152, .55), 0 0 0 1px rgba(255, 255, 255, .18) inset; }
    70%, 100% { box-shadow: 0 14px 34px rgba(231, 4, 152, .45), 0 0 0 16px rgba(231, 4, 152, 0), 0 0 0 1px rgba(255, 255, 255, .18) inset; }
}
.hb-cta:hover { animation-play-state: running, paused; }
@media (max-width: 560px) { .hb-cta { font-size: 1.1rem; padding: 8px 8px 8px 26px; } .hb-cta-panah { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .hb-cta, .hb-cta::before { animation: none; } }
/* Pudar bawah hanya untuk latar foto, bukan isi hero (tombol & teks tetap terang) */
.hal-index .hero.hero-aurora { -webkit-mask-image: none; mask-image: none; }

/* =====================================================================
   BERANDA: ULASAN sebagai tumpukan kartu interaktif
   ===================================================================== */
.ul-wrap { max-width: 600px; margin: 0 auto; text-align: center; }
.ul-kepala h2 { margin: 6px 0 18px; color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ul-dek { position: relative; display: grid; padding: 26px 18px 0; outline: none; touch-action: pan-y; perspective: 1200px; }
.ul-dek:focus-visible { outline: 3px solid #fde675; outline-offset: 6px; border-radius: 26px; }
.ul-kartu {
    --x: 0px; --r: 0deg; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
    grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 20px; border-radius: 24px; text-align: left;
    color: #e9e4f5; user-select: none; -webkit-user-select: none; cursor: grab;
    background: linear-gradient(160deg, rgba(41, 58, 140, .92), rgba(52, 22, 104, .92));
    border: 1px solid rgba(253, 230, 117, .25); box-shadow: 0 24px 50px rgba(4, 8, 26, .45);
    transform-origin: 50% 100%;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s, filter .5s;
}
.ul-kartu::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(400px circle at var(--gx) var(--gy), rgba(253, 230, 117, .16), transparent 60%); }
.ul-kartu.depan:hover::after { opacity: 1; }
/* posisi tumpukan: depan, 1 & 2 di belakang, sisanya tersembunyi */
.ul-kartu[data-pos="0"] { z-index: 5; transform: translateX(var(--x)) rotate(var(--r)) rotateX(var(--rx)) rotateY(var(--ry)); }
.ul-kartu[data-pos="1"] { z-index: 4; transform: translateY(-14px) scale(.94) rotate(-2.5deg); filter: brightness(.75); }
.ul-kartu[data-pos="2"] { z-index: 3; transform: translateY(-26px) scale(.88) rotate(3deg); filter: brightness(.55); }
.ul-kartu[data-pos="3"] { z-index: 2; transform: translateY(-34px) scale(.82); opacity: 0; }
.ul-kartu[data-pos="1"] > *, .ul-kartu[data-pos="2"] > *, .ul-kartu[data-pos="3"] > * { opacity: .35; transition: opacity .4s; }
.ul-kartu.seret { transition: none; cursor: grabbing; }
.ul-kartu.miring { transition: transform .12s ease-out; }
.ul-kartu.terbang-kiri { transform: translateX(-130%) rotate(-24deg) !important; opacity: 0; }
.ul-kartu.terbang-kanan { transform: translateX(130%) rotate(24deg) !important; opacity: 0; }
.ul-kutip { position: absolute; top: -18px; right: 18px; font-family: var(--font-judul); font-size: 6.5rem; line-height: 1; color: rgba(253, 230, 117, .22); pointer-events: none; }
.ul-atas { display: flex; align-items: center; gap: 12px; }
.ul-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    font-family: var(--font-judul); font-weight: 800; font-size: 1.3rem; color: #141a33; background: var(--gradien-emas); box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }
.ul-siapa { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ul-siapa strong { color: #fff; }
.ul-siapa small { color: #b8bdd6; font-size: .76rem; }
.ul-bintang { margin-left: auto; color: #f5cf55; font-size: 1rem; letter-spacing: 2px; white-space: nowrap; }
.ul-kartu blockquote { margin: 2px 0 0; font-family: var(--font-judul); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.4; color: #fff; }
.ul-kartu .kp-kata { display: inline-block; opacity: 1; transform: none; filter: none; }
.ul-kartu.depan.baru .kp-kata { animation: ul-kata .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--k) * 60ms); }
@keyframes ul-kata { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
.ul-produk { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: .82rem; color: #e9e4f5; text-decoration: none;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(253, 230, 117, .25); transition: background .2s, transform .2s; }
.ul-produk img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid #f5cf55; }
.ul-produk b { color: #f5cf55; }
.ul-produk:hover { background: rgba(255, 255, 255, .16); transform: translateX(3px); }
.ul-kontrol { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.ul-nav { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1;
    color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(253, 230, 117, .3); transition: background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ul-nav span { margin-top: -3px; }
.ul-nav:hover { background: var(--gradien-utama); border-color: transparent; transform: scale(1.1); }
.ul-titik { display: flex; gap: 8px; }
.ul-titik button { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; background: rgba(255, 255, 255, .25); transition: width .35s cubic-bezier(.3, 1.4, .5, 1); }
.ul-titik button.aktif { width: 36px; }
.ul-titik button i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--gradien-utama); }
.ul-titik button.aktif i { animation: ul-progres var(--durasi, 6s) linear forwards; }
.ul-dek.jeda ~ .ul-kontrol .ul-titik button.aktif i, .ul-wrap.jeda .ul-titik button.aktif i { animation-play-state: paused; }
@keyframes ul-progres { to { transform: scaleX(1); } }
.ul-petunjuk { margin: 12px 0 0; font-size: .8rem; color: #b8bdd6; }
.ul-petunjuk span { display: inline-block; animation: ul-geser 2s ease-in-out infinite; }
@keyframes ul-geser { 50% { transform: translateX(6px); } }
@media (max-width: 560px) { .ul-kartu { padding: 20px 18px 16px; } .ul-bintang { font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .ul-kartu, .ul-titik button i, .ul-petunjuk span, .ul-kartu .kp-kata { transition: none; animation: none !important; } }

/* =====================================================================
   BERANDA: ulasan menyatu di hero (kolom kanan, di bawah logo)
   ===================================================================== */
.hb-grid { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ul-hero { width: 100%; max-width: 460px; margin: 0; }
.ul-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #f5cf55; }
.ul-hero .ul-dek { padding: 18px 10px 0; }
.ul-hero .ul-kartu {
    padding: 16px 18px 14px; gap: 8px; border-radius: 20px;
    background: rgba(255, 255, 255, .08); border-color: rgba(253, 230, 117, .25);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(4, 8, 26, .35);
}
.ul-hero .ul-kartu[data-pos="1"], .ul-hero .ul-kartu[data-pos="2"] { background: rgba(40, 30, 110, .55); }
.ul-hero .ul-kartu blockquote { font-size: 1.12rem; }
.ul-hero .ul-avatar { width: 38px; height: 38px; font-size: 1.1rem; }
.ul-hero .ul-kutip { font-size: 5rem; top: -14px; }
.ul-hero .ul-produk { font-size: .78rem; }
.ul-hero .ul-produk img { width: 24px; height: 24px; }
.ul-hero .ul-kontrol { margin-top: 12px; gap: 10px; }
.ul-hero .ul-nav { width: 34px; height: 34px; font-size: 1.3rem; }
/* logo sedikit lebih kecil agar muat bersama ulasan */
.hal-index .hb-logo .logo-utama { max-width: min(330px, 70vw); }
.hal-index .hb-logo { padding-top: 0; padding-bottom: 0; }
.ul-hero .ul-kartu { background: linear-gradient(160deg, #26388f, #45207f); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ul-hero .ul-kartu[data-pos="1"], .ul-hero .ul-kartu[data-pos="2"] { background: linear-gradient(160deg, #1f2c70, #351a66); }

/* =====================================================================
   KARTU ULASAN (hero): bingkai gradien berputar, foto produk samar, kilau, riak klik
   ===================================================================== */
@property --ul-sudut { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ul-hero .ul-kartu {
    cursor: pointer; overflow: hidden; isolation: isolate; border: 2px solid transparent;
    background:
        linear-gradient(150deg, #23348a, #3a1d78 60%, #561a7a) padding-box,
        conic-gradient(from var(--ul-sudut), #f5cf55, #e70498, #7b2fd0, #1d3fa0, #f5cf55) border-box;
    animation: ul-putar 6s linear infinite;
    box-shadow: 0 18px 40px rgba(4, 8, 26, .45), 0 0 30px rgba(231, 4, 152, .18);
}
@keyframes ul-putar { to { --ul-sudut: 360deg; } }
.ul-hero .ul-kartu[data-pos="1"], .ul-hero .ul-kartu[data-pos="2"] {
    animation: none;
    background: linear-gradient(150deg, #1c2a6c, #2f1862) padding-box, linear-gradient(#3b3580, #3b3580) border-box;
}
.ul-hero .ul-kartu > *:not(.ul-latar):not(.ul-sapu):not(.ul-riak):not(.ul-kutip) { position: relative; z-index: 1; }
.ul-hero .ul-kutip { z-index: 1; }
/* foto produk samar di sisi kanan kartu */
.ul-latar { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 55%; background-size: cover; background-position: center; opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
    transition: transform 6s ease-out; }
.ul-kartu.depan .ul-latar { transform: scale(1.12); }
/* kilau menyapu */
.ul-sapu { position: absolute; z-index: 0; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
    animation: dp-sapu 5s ease-in-out 1s infinite; }
.ul-kartu:not(.depan) .ul-sapu { display: none; }
/* bintang berkilau */
.ul-hero .ul-bintang { text-shadow: 0 0 10px rgba(245, 207, 85, .7); }
.ul-kartu.depan .ul-bintang { animation: ul-bintang 2.4s ease-in-out infinite; }
@keyframes ul-bintang { 50% { text-shadow: 0 0 16px rgba(253, 230, 117, 1), 0 0 2px #fff; } }
.ul-hero .ul-avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 18px rgba(245, 207, 85, .45); }
.ul-hero .ul-kutip { color: rgba(253, 230, 117, .35); }
.ul-hero .ul-produk { background: rgba(7, 13, 36, .45); }
/* riak saat kartu diklik */
.ul-riak { position: absolute; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
    background: rgba(253, 230, 117, .45); animation: dp-riak .6s ease-out forwards; }
.ul-hero .ul-kartu.depan:hover { box-shadow: 0 22px 46px rgba(4, 8, 26, .5), 0 0 40px rgba(231, 4, 152, .35); }
.ul-hero .ul-kontrol { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .ul-hero .ul-kartu, .ul-sapu, .ul-kartu.depan .ul-bintang { animation: none; } }
.hb-teks > .hb-judul:first-child, .hb-teks > h1:first-of-type { margin-top: 0; }

/* =====================================================================
   JUDUL HERO: "Cemilan Khas, / Rasa Juara / Dari Sulawesi Utara" + ornamen emas
   ===================================================================== */
.hb-coret { display: none; }
.hb-sorot { padding-bottom: .34em; }
.hb-ornamen { position: absolute; left: -2%; bottom: -.04em; width: 104%; height: .34em; overflow: visible; pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(245, 207, 85, .55)); }
.hb-orn-garis { transform-box: fill-box; transform-origin: center; transform: scaleX(0); animation: hb-orn-tarik 1.1s cubic-bezier(.6, 0, .2, 1) 1.05s forwards; }
.hb-orn-garis.tipis { opacity: .75; animation-delay: 1.3s; }
@keyframes hb-orn-tarik { to { transform: scaleX(1); } }
.hb-orn-permata { fill: #fffbe6; stroke: #e9b52c; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-90deg);
    animation: hb-orn-permata .6s cubic-bezier(.3, 1.6, .5, 1) 1.9s forwards, hb-orn-kilap 2.6s ease-in-out 2.6s infinite; }
@keyframes hb-orn-permata { to { transform: scale(1) rotate(0); } }
@keyframes hb-orn-kilap { 50% { fill: #f5cf55; filter: drop-shadow(0 0 5px #fff); } }
.hb-asal { display: block; margin-top: .2em; font-family: var(--font-teks); font-size: .38em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e9e4f5; text-shadow: none; }
.hb-asal .hb-kata { margin-right: .18em; }
@media (max-width: 960px) { .hb-asal { font-size: .45em; } }
@media (prefers-reduced-motion: reduce) { .hb-orn-garis, .hb-orn-permata { animation: none; transform: none; } }
.hb-sorot { padding-bottom: .42em; }
.hb-ornamen { bottom: -.1em; }
@media (max-width: 700px) {
    .hb-judul { font-size: clamp(2.1rem, 10vw, 2.8rem); }
    .hb-sorot { display: table; margin: .05em auto 0; }
}

/* =====================================================================
   FOOTER INTERAKTIF: sorot ikut kursor + pola titik, kilau garis atas,
   kolom muncul bergantian, tautan bergaris emas, watermark paralaks, status buka
   ===================================================================== */
.footer { --mx: 50%; --my: 40%; --px: 0; --py: 0; overflow: hidden; isolation: isolate; }
.footer > .container { position: relative; z-index: 1; }
.ft-latar { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ft-titik { position: absolute; inset: 0; opacity: .55;
    background-image: radial-gradient(rgba(253, 230, 117, .35) 1px, transparent 1.4px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 70%); mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 70%); }
.ft-sorot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(123, 47, 208, .22), rgba(231, 4, 152, .08) 40%, transparent 70%); }
.ft-watermark { position: absolute; left: 50%; bottom: -.18em; white-space: nowrap; font-family: var(--font-judul); font-weight: 800; font-size: clamp(5rem, 15vw, 13rem); line-height: 1; letter-spacing: .04em;
    color: transparent; -webkit-text-stroke: 1px rgba(253, 230, 117, .09);
    transform: translate(calc(-50% + var(--px) * -30px), calc(var(--py) * -10px)); transition: transform .5s ease-out; }
/* garis emas atas: kilau berjalan */
.footer::before { background: linear-gradient(90deg, transparent, #c8961e 20%, #fde675 50%, #c8961e 80%, transparent) !important; }
.footer::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 3px; z-index: 2;
    background: linear-gradient(90deg, transparent, #fff, transparent); filter: drop-shadow(0 0 6px #fde675); animation: ft-kilau 4.5s ease-in-out infinite; }
@keyframes ft-kilau { 0% { left: -30%; } 60%, 100% { left: 110%; } }
/* kolom muncul bergantian saat footer terlihat */
.js-reveal .footer [data-ft] { opacity: 0; transform: translateY(26px); }
.footer.tampil [data-ft] { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--n) * 120ms); }
/* logo: cincin cahaya pelan */
.footer-logo-link { position: relative; }
.footer-logo { border-radius: 50%; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); animation: ft-logo 4s ease-in-out infinite; }
@keyframes ft-logo { 50% { filter: drop-shadow(0 0 14px rgba(245, 207, 85, .6)); } }
.footer-logo-link:hover .footer-logo { transform: rotate(-12deg) scale(1.08); }
.footer-logo-link span { transition: letter-spacing .4s; }
.footer-logo-link:hover span { letter-spacing: .2em; }
/* judul kolom dengan garis kecil yang memanjang saat kolom disorot */
.footer h4 { position: relative; padding-bottom: 10px; }
.footer h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--gradien-utama); transition: width .4s cubic-bezier(.3, 1.4, .5, 1); }
.footer-grid > div:hover h4::after { width: 56px; }
/* tautan: panah muncul + garis bawah emas */
.footer-link a { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 2px 0; transition: color .25s, gap .3s, transform .3s; }
.ft-panah { display: inline-block; width: 0; overflow: hidden; opacity: 0; color: #f5cf55; transition: width .3s, opacity .3s; }
.footer-link a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, #f5cf55, #e70498); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.footer-link a:hover { gap: 6px; }
.footer-link a:hover .ft-panah { width: 1em; opacity: 1; }
.footer-link a:hover::after { transform: scaleX(1); }
/* ikon kontak melompat kecil saat disorot */
.footer-kontak li .ikon { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.footer-kontak li:hover .ikon { transform: translateY(-3px) scale(1.15); }
/* status buka / tutup */
.ft-status { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0 !important; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.ft-status.buka { color: #8ff0b4; background: rgba(61, 220, 132, .1); border: 1px solid rgba(61, 220, 132, .35); }
.ft-status.tutup { color: #ffb0b0; background: rgba(224, 49, 49, .1); border: 1px solid rgba(224, 49, 49, .35); }
.ft-status-titik { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ft-status.buka .ft-status-titik { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); animation: hb-titik 2s ease-out infinite; }
.footer-bawah { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .footer::after, .footer-logo, .ft-status-titik { animation: none !important; }
    .js-reveal .footer [data-ft] { opacity: 1; transform: none; }
}
.ft-status { white-space: nowrap; }

/* =====================================================================
   HALAMAN MENU: pencarian langsung, chip kategori geser, kartu interaktif
   ===================================================================== */
.filter-hidup { align-items: stretch; }
.cari-hidup { position: relative; flex: 1; display: flex; align-items: center; margin: 0; }
.cari-hidup > .ikon { position: absolute; left: 16px; color: var(--muted); pointer-events: none; transition: color .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cari-hidup input { width: 100%; margin: 0; padding-left: 46px; padding-right: 110px; transition: border-color .25s, box-shadow .25s; }
.cari-hidup input:focus { border-color: #7b2fd0; box-shadow: 0 0 0 4px rgba(123, 47, 208, .14), 0 10px 26px rgba(123, 47, 208, .14); }
.cari-hidup:focus-within > .ikon { color: #7b2fd0; transform: scale(1.12) rotate(-8deg); }
.cari-jumlah { position: absolute; right: 14px; font-size: .78rem; font-weight: 700; color: #7b2fd0; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.cari-jumlah.tampil { opacity: 1; transform: none; }

.chip-kat { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin: 0 0 26px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(20, 26, 51, .06); }
.chip-kat a { position: relative; z-index: 1; padding: 8px 18px; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--muted); text-decoration: none; transition: color .3s; }
.chip-kat a:hover { color: var(--text); }
.chip-kat a.aktif { color: #fff; }
.chip-kat:not(.siap) a.aktif { background: var(--gradien-utama); }
.chip-kat-penanda { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--gradien-utama); box-shadow: 0 6px 16px rgba(123, 47, 208, .35);
    transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1); }

/* kartu: bingkai bercahaya ikut kursor */
.produk-card { --gx: 50%; --gy: 50%; }
.pk-sorot { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; padding: 2px; opacity: 0; transition: opacity .35s;
    background: radial-gradient(240px circle at var(--gx) var(--gy), #f5cf55, #e70498 35%, transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.produk-card:hover .pk-sorot { opacity: 1; }
/* kilau menyapu foto saat disorot */
.produk-img::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) -160% 0 / 60% 100% no-repeat; }
.produk-card:hover .produk-img::after { background-position: 260% 0; transition: background-position .9s ease; }
/* masuk: naik dengan sedikit putaran 3D */
.js-reveal .grid-produk .produk-card[data-reveal] { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(14deg) scale(.95); }
.js-reveal .grid-produk .produk-card[data-reveal].tampil { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
/* rasa naik sedikit saat disorot */
.varian-mini span { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s; }
.produk-card:hover .varian-mini span { transform: translateY(-2px); }
.produk-card:hover .varian-mini span:nth-child(2) { transition-delay: .05s; }
/* tombol tambah melebar menampilkan teks */
.btn-tambah { width: auto; min-width: 46px; padding: 0 12px; gap: 0; overflow: hidden; white-space: nowrap; transition: gap .3s, padding .3s, transform .25s, box-shadow .25s; }
.btn-tambah .ikon { flex-shrink: 0; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.bt-teks { max-width: 0; overflow: hidden; font-size: .85rem; font-weight: 800; opacity: 0; transition: max-width .35s ease, opacity .3s; }
.produk-card:hover .btn-tambah { gap: 6px; padding: 0 16px 0 12px; }
.produk-card:hover .btn-tambah .bt-teks { max-width: 100px; opacity: 1; }
.btn-tambah:hover .ikon { transform: rotate(90deg); }
.btn-tambah:active { transform: scale(.92); }
.btn-tambah.ditambah { background: #2f9e44 !important; box-shadow: 0 8px 18px rgba(47, 158, 68, .4); }
.btn-tambah.ditambah .ikon { transform: rotate(45deg) scale(0); }
.btn-tambah.ditambah::before { content: '\2713'; position: absolute; font-size: 1.2rem; font-weight: 800; color: #fff; animation: dp-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.btn-tambah { position: relative; }
/* penyaringan langsung */
.produk-card.saring-keluar { animation: pk-keluar .3s ease forwards; }
.produk-card.saring-masuk { animation: pk-masuk .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--urut, 0) * 60ms); }
@keyframes pk-keluar { to { opacity: 0; transform: scale(.85); } }
@keyframes pk-masuk { from { opacity: 0; transform: translateY(20px) scale(.92); } }
.produk-card[hidden] { display: none !important; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; text-decoration: underline; }
.pk-terbang { position: fixed; z-index: 999; left: 0; top: 0; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; pointer-events: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 3px #f5cf55; }
@media (hover: none) { .btn-tambah .bt-teks { display: none; } .pk-sorot { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .js-reveal .grid-produk .produk-card[data-reveal] { opacity: 1; transform: none; }
    .produk-card.saring-keluar, .produk-card.saring-masuk, .btn-tambah.ditambah::before { animation: none; }
}
/* Menu: kolom tetap (auto-fill) agar ukuran kartu tidak berubah saat disaring */
@media (min-width: 701px) { .hal-produk .grid-produk { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); justify-content: start; } }
/* tombol tambah: hanya ikon yang berputar, bukan seluruh tombol; tanpa denyut saat melebar */
.btn-tambah:hover, .produk-card .btn-tambah:hover { transform: translateY(-2px); }
.produk-card:hover .btn-tambah { animation: none; }
.btn-tambah.ditambah .bt-teks { opacity: 0; }
.produk-card .btn-tambah.ditambah .bt-teks, .produk-card:hover .btn-tambah.ditambah .bt-teks { opacity: 0; max-width: 0; } .produk-card .btn-tambah.ditambah { gap: 0; padding: 0 12px; }

/* =====================================================================
   NUANSA SULAWESI UTARA (halus, tidak dominan)
   - Motif kain Bentenan Minahasa (geometris) sebagai pita tipis
   - Siluet Gunung Klabat & nyiur melambai di dasar footer
   ===================================================================== */
:root {
    --motif-bentenan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'%3E%3Cg fill='none' stroke='%23f5cf55' stroke-width='1.1'%3E%3Cpath d='M0 9 12 1.5 24 9 12 16.5Z M24 9 36 1.5 48 9 36 16.5Z'/%3E%3Cpath d='M7 9 12 5.8 17 9 12 12.2Z M31 9 36 5.8 41 9 36 12.2Z'/%3E%3Cpath d='M0 1.5h4M20 1.5h8M44 1.5h4M0 16.5h4M20 16.5h8M44 16.5h4'/%3E%3C/g%3E%3Cg fill='%23f5cf55'%3E%3Ccircle cx='24' cy='9' r='1.3'/%3E%3Ccircle cx='0' cy='9' r='1.3'/%3E%3Ccircle cx='48' cy='9' r='1.3'/%3E%3Ccircle cx='12' cy='9' r='.9'/%3E%3Ccircle cx='36' cy='9' r='.9'/%3E%3C/g%3E%3C/svg%3E");
}
/* pita Bentenan di bawah garis emas footer */
.ft-bentenan { position: absolute; top: 3px; left: 0; right: 0; height: 18px; opacity: .22; background: var(--motif-bentenan) center / 48px 18px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    animation: ft-bentenan 40s linear infinite; }
@keyframes ft-bentenan { to { background-position: 480px 0; } }
/* siluet Klabat & nyiur di dasar footer */
.ft-nyiur { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; }
.ft-gunung { fill: rgba(253, 230, 117, .05); }
.ft-bukit { fill: rgba(123, 47, 208, .1); }
.ft-batang, .ft-pelepah path { fill: none; stroke: rgba(253, 230, 117, .1); stroke-linecap: round; }
.ft-pelepah circle { fill: rgba(253, 230, 117, .1); }
.ft-pelepah { transform-box: view-box; animation: ft-melambai 6s ease-in-out infinite; }
@keyframes ft-melambai { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg); } }
.ft-semboyan { font-family: var(--font-judul); font-style: italic; font-weight: 600; letter-spacing: .03em; color: rgba(245, 207, 85, .75); }
@media (max-width: 700px) { .ft-nyiur { height: 120px; } .footer-bawah { justify-content: center; text-align: center; } }

/* pita Bentenan samar di dasar header halaman */
.ph-bentenan { position: absolute; left: 0; right: 0; bottom: 58px; height: 18px; z-index: -1; opacity: .2; pointer-events: none;
    background: var(--motif-bentenan) center / 48px 18px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
@media (max-width: 700px) { .ph-bentenan { bottom: 44px; } }
@media (prefers-reduced-motion: reduce) { .ft-bentenan, .ft-pelepah { animation: none; } }
/* Gunung merentang penuh, kelapa ukuran tetap di pojok (tidak terpotong di layar lebar) */
.ft-gunung-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }
.ft-kelapa { position: absolute; bottom: 0; height: 200px; width: auto; overflow: visible; }
.ft-kelapa.kiri { left: 0; }
.ft-kelapa.kanan { right: 0; }
@media (max-width: 700px) { .ft-kelapa { height: 130px; } .ft-gunung-svg { height: 100px; } }

/* =====================================================================
   AKUN > PESANAN SAYA: satu panel (lacak + filter status + riwayat)
   ===================================================================== */
.ps { --gx: 50%; --gy: 0%; position: relative; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--border);
    box-shadow: 0 24px 50px rgba(20, 26, 51, .08); scroll-margin-top: 20px; }
.ps::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gradien-utama); z-index: 2; }
.ps::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(123, 47, 208, .06), transparent 60%); }
.ps:hover::after { opacity: 1; }
.ps > * { position: relative; z-index: 1; }
.ps-kepala { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 24px 26px 18px; }
.ps-judul h2 { margin: 0; font-size: 1.5rem; }
.ps-judul small { color: var(--muted); font-size: .84rem; }
.ps-cari { position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ps-cari-kode, .ps-cari-hp { position: relative; display: flex; align-items: center; margin: 0; }
.ps-cari-kode .ikon, .ps-cari-hp .ikon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; transition: color .25s; }
.ps-cari input { margin: 0; height: 44px; padding: 0 16px 0 40px; border-radius: 999px; background: var(--bg-alt); border: 1.5px solid transparent;
    transition: width .45s cubic-bezier(.3, 1.2, .5, 1), border-color .25s, background .25s, box-shadow .25s; }
.ps-cari-kode input { width: 220px; font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.ps-cari-kode input:focus { width: 290px; }
.ps-cari input:focus { background: #fff; border-color: #7b2fd0; box-shadow: 0 0 0 4px rgba(123, 47, 208, .12); }
.ps-cari label:focus-within .ikon { color: #7b2fd0; }
.ps-cari-hp { display: none; }
.ps-cari.hp-lain .ps-cari-hp { display: flex; }
.ps-cari-hp input { width: 200px; }
.ps-cari-tombol { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(123, 47, 208, .3); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ps-cari-tombol:hover { transform: scale(1.08) rotate(-8deg); }
.ps-hp-toggle { flex-basis: 100%; text-align: right; padding: 0 6px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 600; color: #7b2fd0; }
.ps-hp-toggle:hover { text-decoration: underline; }
.ps-tidak { display: flex; align-items: center; gap: 10px; margin: 0 26px 16px; padding: 12px 16px; border-radius: 14px; font-size: .88rem; color: #b42318; background: #fff1f0; animation: dp-naik .4s ease both; }
.ps-detail { margin: 0 26px 18px; padding: 20px; border-radius: 20px; background: linear-gradient(160deg, #f8f5ff, #fff); border: 1px solid rgba(123, 47, 208, .18); animation: dp-naik .5s cubic-bezier(.2, .8, .2, 1) both; }
.ps-detail-kepala { display: flex; align-items: flex-start; gap: 12px; }
.ps-detail-kepala > div { display: flex; flex-direction: column; flex: 1; }
.ps-detail-kepala small { color: var(--muted); font-size: .8rem; }
.ps-detail-kepala .status { padding: 5px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.ps-tutup { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--muted); text-decoration: none; transition: background .2s, color .2s, transform .3s; }
.ps-tutup:hover { background: rgba(20, 26, 51, .06); color: var(--text); transform: rotate(90deg); }
.ps-detail .tabel-ringkas { margin: 6px 0 14px; }
.ps-filter { position: relative; display: flex; gap: 4px; margin: 0 26px; padding: 4px; border-radius: 999px; background: var(--bg-alt); width: max-content; max-width: calc(100% - 52px); overflow-x: auto; scrollbar-width: none; }
.ps-filter button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap; font: inherit; font-size: .84rem; font-weight: 700; color: var(--muted); transition: color .3s; }
.ps-filter button i { font-style: normal; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: rgba(20, 26, 51, .07); transition: background .3s; }
.ps-filter button.aktif { color: #fff; }
.ps-filter button.aktif i { background: rgba(255, 255, 255, .25); }
.ps-filter-penanda { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--gradien-utama); box-shadow: 0 6px 14px rgba(123, 47, 208, .3);
    transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1); }
.ps-filter:not(.siap) button.aktif { background: var(--gradien-utama); }
.ps-daftar { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--border); }
.ps-baris { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto 18px; align-items: center; gap: 14px; padding: 15px 26px; color: var(--text); text-decoration: none;
    transition: background .25s, padding .3s; animation: dp-naik .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n) * 50ms); }
.ps-baris + .ps-baris { border-top: 1px solid var(--border); }
.ps-baris::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gradien-utama); transform: scaleY(0); transition: transform .3s; }
.ps-baris:hover { background: #faf8ff; padding-left: 32px; }
.ps-baris:hover::before, .ps-baris.dipilih::before { transform: scaleY(1); }
.ps-baris.dipilih { background: #f5f0ff; }
.ps-baris[hidden] { display: none; }
.ps-ikon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--gradien-utama); }
.ps-ikon.ps-selesai { background: linear-gradient(135deg, #40c057, #2f9e44); }
.ps-ikon.ps-diproses { background: linear-gradient(135deg, #fcc419, #e8a317); }
.ps-ikon.ps-batal { background: linear-gradient(135deg, #ff8787, #e03131); }
.ps-info { display: flex; flex-direction: column; min-width: 0; }
.ps-info strong { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.ps-info small { color: var(--muted); font-size: .8rem; }
.ps-baris .status { padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.ps-total { font-family: var(--font-judul); color: var(--primary); font-variant-numeric: lining-nums; }
.ps-panah { color: var(--muted); transition: transform .25s, color .25s; }
.ps-baris:hover .ps-panah { transform: translateX(4px); color: #7b2fd0; }
.ps-kosong { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 26px 26px; padding: 20px 22px; border-radius: 20px; background: var(--bg-alt); border: 1.5px dashed rgba(123, 47, 208, .25); }
.ps-kosong-ikon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: #7b2fd0; background: #fff; box-shadow: 0 8px 18px rgba(123, 47, 208, .12); animation: ph-ikon 3s ease-in-out infinite; }
.ps-kosong > div { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.ps-kosong small { color: var(--muted); }
.ps-cta { font-size: 1rem; padding: 7px 7px 7px 22px; }
.ps-cta .hb-cta-panah { width: 38px; height: 38px; }
@media (max-width: 700px) {
    .ps-kepala { padding: 20px 18px 14px; }
    .ps-cari { width: 100%; }
    .ps-cari-kode, .ps-cari-hp { flex: 1; }
    .ps-cari-kode input, .ps-cari-kode input:focus, .ps-cari-hp input { width: 100%; }
    .ps-filter { margin: 0 18px; max-width: calc(100% - 36px); }
    .ps-detail, .ps-tidak { margin-left: 18px; margin-right: 18px; }
    .ps-baris { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 14px 18px; }
    .ps-baris .status { grid-column: 2; justify-self: start; }
    .ps-total { grid-column: 3; grid-row: 1 / span 2; }
    .ps-panah { display: none; }
    .ps-kosong { margin: 4px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .ps-baris, .ps-detail, .ps-tidak, .ps-kosong-ikon { animation: none; } }
.ps-cari-kode input::placeholder { font-family: var(--font-teks); letter-spacing: 0; }

/* =====================================================================
   TOMBOL UTAMA (btn-primary): latar baru tanpa "jahitan" warna di tepi
   gradien biru tua → ungu yang lembut, kilau halus saat disorot
   ===================================================================== */
.btn-primary {
    position: relative; overflow: hidden; isolation: isolate; border: 0; padding: 12px 22px;
    background: linear-gradient(135deg, #1d3fa0 0%, #4b2bb8 55%, #7b2fd0 100%) border-box;
    background-origin: border-box; color: #fff;
    box-shadow: 0 8px 20px rgba(29, 63, 160, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, filter .25s;
}
.btn-primary::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, #2a52c4, #6a3ae0); opacity: 0; transition: opacity .3s; }
.btn-primary:hover { background: linear-gradient(135deg, #1d3fa0 0%, #4b2bb8 55%, #7b2fd0 100%) border-box; transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(75, 43, 184, .38), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-primary:focus-visible { outline: 3px solid #f5cf55; outline-offset: 3px; }
.btn-primary:disabled { opacity: .55; transform: none; box-shadow: none; }
.btn-primary .ikon { vertical-align: -3px; }

/* =====================================================================
   HALAMAN MENU (baru): satu panggung gelap menyatu sampai footer
   ===================================================================== */
.mn { --mx: 50%; --my: 20%; position: relative; isolation: isolate; overflow: hidden; flex-grow: 1; padding: 56px 0 72px; color: #e9e4f5;
    background: linear-gradient(180deg, #101c4f 0%, #0b1438 45%, #070d24 100%); }
.mn-latar { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mn-cahaya { position: absolute; border-radius: 50%; filter: blur(90px); animation: dp-aurora 18s ease-in-out infinite alternate; }
.mn-cahaya.a { width: 46vw; height: 46vw; left: -14vw; top: -20vw; background: rgba(231, 4, 152, .22); }
.mn-cahaya.b { width: 40vw; height: 40vw; right: -12vw; top: 10%; background: rgba(29, 63, 160, .45); animation-duration: 22s; animation-delay: -7s; }
.mn-titik { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(253, 230, 117, .16) 1px, transparent 1.4px); background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.mn .dp-sorot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(253, 230, 117, .07), transparent 65%); }

/* kepala: judul kiri, pencarian kanan */
.mn-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 34px; padding-bottom: 26px;
    border-bottom: 1px solid rgba(253, 230, 117, .14); animation: dp-naik .7s cubic-bezier(.2, .8, .2, 1) both; }
.mn-remah { display: flex; gap: 8px; margin-bottom: 10px; font-size: .82rem; color: #8f96b8; }
.mn-remah a { color: #f5cf55; text-decoration: none; }
.mn-remah a:hover { text-decoration: underline; }
.mn-judul h1 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05; color: #fff; }
.mn-judul h1 span { font-style: italic; background: linear-gradient(180deg, #fff6cf, #f5cf55 55%, #d9a521); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mn-judul p { max-width: 520px; margin: 10px 0 0; color: #b8bdd6; line-height: 1.6; }
.mn-cari { position: relative; display: flex; align-items: center; width: min(420px, 100%); margin: 0; }
.mn-cari > .ikon { position: absolute; left: 18px; color: #8f96b8; pointer-events: none; transition: color .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mn-cari input { width: 100%; height: 54px; margin: 0; padding: 0 96px 0 50px; border-radius: 999px; font-size: 1rem; color: #fff;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .22); box-shadow: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .25s, background .25s, box-shadow .25s; }
.mn-cari input::placeholder { color: #8f96b8; }
.mn-cari input:focus { outline: none; background: rgba(255, 255, 255, .11); border-color: #f5cf55; box-shadow: 0 0 0 4px rgba(245, 207, 85, .12); }
.mn-cari:focus-within > .ikon { color: #f5cf55; transform: scale(1.1) rotate(-8deg); }
.mn-cari .cari-jumlah { right: 20px; color: #f5cf55; }
.mn-cari input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }

/* kartu produk versi gelap (kaca) */
.mn .grid-produk { margin-bottom: 0; }
@media (min-width: 701px) { .mn .grid-produk { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); justify-content: start; } }
.mn .produk-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .16); box-shadow: 0 18px 40px rgba(2, 5, 20, .35);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mn .produk-card:hover { border-color: rgba(253, 230, 117, .35); box-shadow: 0 26px 54px rgba(2, 5, 20, .5); }
.mn .produk-body h3 a { color: #fff; }
.mn .produk-body h3 a:hover { color: #f5cf55; }
.mn .meta { color: #8f96b8; }
.mn .harga { color: #f5cf55; }
.mn .varian-mini span { color: #e9e4f5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.mn .habis-teks { color: #ff9b9b; }
.mn .pil-kategori { background: rgba(7, 13, 36, .7); color: #f5cf55; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mn-kosong { padding: 40px 20px; text-align: center; color: #b8bdd6; }
.mn-kosong a, .mn .link-btn { color: #f5cf55; }
/* footer menyatu: tanpa jeda */
.hal-produk .footer { margin-top: 0; }
@media (max-width: 700px) {
    .mn { padding: 30px 0 48px; }
    .mn-kepala { margin-bottom: 22px; padding-bottom: 20px; gap: 18px; }
    .mn-cari { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mn-cahaya, .mn-kepala { animation: none; } }

/* Menu: animasi halus */
.mn .dp-bara { position: absolute; inset: 0; }
.mn-kepala { position: relative; animation: none; }
.mn-kepala::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 22%; height: 1px;
    background: linear-gradient(90deg, transparent, #fde675, transparent); animation: mn-garis 5s ease-in-out 1.2s infinite; }
@keyframes mn-garis { 0% { left: -22%; } 70%, 100% { left: 100%; } }
.mn-kata { display: inline-block; white-space: nowrap; }
.mn-judul h1 span.emas, .mn-judul h1 .emas .dp-h { font-style: italic; }
.mn-judul h1 > span:not(.mn-kata) { font-style: normal; }
.mn-kata .dp-h { background: none; -webkit-background-clip: border-box; color: #fff; }
.mn-kata.emas .dp-h { background: linear-gradient(100deg, #f5cf55 10%, #fffbe6 30%, #e9b52c 50%, #f5cf55 70%, #fffbe6 90%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: dp-huruf .7s cubic-bezier(.2, .9, .3, 1.3) both, hb-kilau 5s linear 1.6s infinite; animation-delay: calc(.45s + var(--i) * 35ms), 1.6s; }
/* kartu: muncul bergantian (tunda per urutan) */
.js-reveal .mn .grid-produk .produk-card[data-reveal].tampil { transition-delay: calc(var(--urut-masuk, 0) * 90ms); }
.mn .produk-card:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .mn-kepala::after, .mn-kata.emas .dp-h { animation: none; } }
.mn-judul h1 .mn-kata:not(.emas), .mn-judul h1 .mn-kata:not(.emas) .dp-h { font-style: normal; background: none; color: #fff; }
/* "Kami" miring: beri ruang agar ujung huruf tidak terpotong oleh background-clip */
.mn-kata.emas .dp-h { padding: .08em .14em .14em .04em; margin: -.08em -.14em -.14em -.04em; }
.mn-kata.emas { padding-right: .12em; }
.mn-judul h1 { overflow: visible; padding-bottom: .05em; }

/* =====================================================================
   MENU: latar & animasi atas yang seimbang (simetris, mengalir menyatu)
   ===================================================================== */
.mn { background: linear-gradient(180deg, #1a1656 0%, #121a4c 30%, #0b1438 60%, #070d24 100%); }
/* pita aurora lebar di atas: warna mengalir pelan kiri↔kanan, bukan satu sisi */
.mn-pita { position: absolute; left: -10%; right: -10%; top: -160px; height: 520px; filter: blur(70px); opacity: .55;
    background: linear-gradient(90deg, #1d3fa0, #7b2fd0 25%, #e70498 50%, #7b2fd0 75%, #1d3fa0) 0 0 / 200% 100%;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000, transparent 75%);
    animation: mn-pita 16s linear infinite; }
@keyframes mn-pita { to { background-position: -200% 0; } }
/* cahaya kiri & kanan dibuat sepasang (cermin), bergerak serempak */
.mn-cahaya.a { width: 34vw; height: 34vw; left: -10vw; top: 25%; background: rgba(123, 47, 208, .22); animation: mn-apung 14s ease-in-out infinite alternate; }
.mn-cahaya.b { width: 34vw; height: 34vw; right: -10vw; left: auto; top: 25%; background: rgba(123, 47, 208, .22); animation: mn-apung 14s ease-in-out infinite alternate-reverse; }
.mn-cahaya.c { width: 50vw; height: 30vw; left: 25vw; bottom: -12vw; top: auto; background: rgba(29, 63, 160, .3); animation: mn-apung 18s ease-in-out infinite alternate; }
@keyframes mn-apung { from { transform: translateY(0) scale(1); } to { transform: translateY(-6%) scale(1.12); } }
.mn-titik { -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 80%); }
/* garis pemisah: kilau berjalan di dalam batas konten saja */
.mn-kepala { border-bottom: 0; }
.mn-kepala::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(253, 230, 117, .25) 15%, rgba(253, 230, 117, .25) 85%, transparent); }
.mn-kepala::after { left: 0; width: 100%; background: linear-gradient(90deg, transparent 0 40%, #fde675 50%, transparent 60% 100%) -100% 0 / 200% 100% no-repeat; animation: mn-garis2 5s ease-in-out 1.2s infinite; }
@keyframes mn-garis2 { 0% { background-position: 100% 0; } 70%, 100% { background-position: -100% 0; } }
/* kartu mengisi lebar penuh secara merata; saat disaring ukuran kartu tetap */
@media (min-width: 701px) {
    .mn .grid-produk { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .mn .grid-produk.tersaring { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (min-width: 1500px) { .mn .grid-produk:not(.tersaring) > .produk-card { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .mn-pita, .mn-cahaya { animation: none; } }

/* =====================================================================
   HALAMAN KONTAK (baru): panggung gelap seperti Menu, kartu interaktif
   ===================================================================== */
.hal-kontak .footer { margin-top: 0; }
.kt-wa-utama { display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border-radius: 999px; text-decoration: none; color: #fff;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(37, 211, 102, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .3s, box-shadow .3s; }
.kt-wa-utama > span:nth-child(2) { display: flex; flex-direction: column; font-weight: 800; line-height: 1.2; }
.kt-wa-utama small { font-size: .72rem; font-weight: 600; color: #8ff0b4; }
.kt-wa-utama:hover { transform: translateY(-3px); background: rgba(37, 211, 102, .14); box-shadow: 0 14px 30px rgba(37, 211, 102, .25); }
.kt-wa-utama > .ikon { transition: transform .3s; }
.kt-wa-utama:hover > .ikon { transform: translateX(4px); }
.kt-wa-ikon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #25d366; }
.kt-wa-ikon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: hb-denyut 2s ease-out infinite; }

.kt-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
/* kartu kaca umum + muncul bergantian */
.kt-peta, .kt-kartu, .kt-cepat { --gx: 50%; --gy: 50%; position: relative; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(2, 5, 20, .35);
    animation: kt-masuk .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.5s + var(--n) * 110ms); }
@keyframes kt-masuk { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.kt-peta:hover .pk-sorot, .kt-kartu:hover .pk-sorot, .kt-cepat:hover .pk-sorot { opacity: 1; }
/* peta */
.kt-peta { overflow: hidden; min-height: 420px; padding: 0; }
.kt-peta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9) contrast(1.02); }
.kt-pin { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: -46px 0 0 -23px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: #141a33; background: var(--gradien-emas); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); pointer-events: none;
    animation: kt-pin 2.4s ease-in-out infinite; }
.kt-pin .ikon { transform: rotate(45deg); }
.kt-pin i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; border: 2px solid rgba(245, 207, 85, .8); transform: rotate(45deg) translate(24px, 24px) scale(.3); animation: kt-gelombang 2.4s ease-out infinite; }
.kt-pin i + i { animation-delay: 1.2s; }
@keyframes kt-pin { 50% { margin-top: -54px; } }
@keyframes kt-gelombang { to { transform: rotate(45deg) translate(24px, 24px) scale(2.4); opacity: 0; } }
.kt-arah { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; text-decoration: none;
    font-weight: 800; color: #141a33; background: var(--gradien-emas); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.kt-arah:hover { transform: translateY(-3px); }
/* kartu info */
.kt-info { display: flex; flex-direction: column; gap: 14px; }
.kt-kartu { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: #e9e4f5; text-decoration: none; flex-wrap: wrap;
    transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), border-color .3s, background .3s; }
a.kt-kartu:hover, .kt-kartu:hover { transform: translateX(6px); border-color: rgba(253, 230, 117, .35); background: rgba(255, 255, 255, .09); }
.kt-ikon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: var(--gradien-utama);
    box-shadow: 0 8px 18px rgba(123, 47, 208, .35); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.kt-ikon.wa { background: linear-gradient(135deg, #3ddc84, #1faa59); box-shadow: 0 8px 18px rgba(37, 211, 102, .3); }
.kt-kartu:hover .kt-ikon { transform: rotate(-10deg) scale(1.08); }
.kt-isi { display: flex; flex-direction: column; flex: 1; min-width: 160px; line-height: 1.4; }
.kt-isi small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f5cf55; }
.kt-isi strong { color: #fff; font-weight: 600; font-size: .95rem; }
.kt-panah { color: #8f96b8; transition: transform .3s, color .3s; }
.kt-kartu:hover .kt-panah { transform: translateX(4px); color: #f5cf55; }
.kt-salin { position: relative; z-index: 2; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; color: #f5cf55;
    background: rgba(245, 207, 85, .1); border: 1px solid rgba(245, 207, 85, .35); transition: background .2s, transform .2s; }
.kt-salin:hover { background: rgba(245, 207, 85, .2); }
.kt-salin:active { transform: scale(.94); }
.kt-salin.tersalin { color: #8ff0b4; border-color: rgba(61, 220, 132, .45); background: rgba(61, 220, 132, .12); }
.kt-status { margin: 0 !important; }
/* pesan cepat */
.kt-cepat { padding: 16px 18px; }
.kt-cepat > small { display: block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f5cf55; }
.kt-cepat-daftar { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-cepat-daftar a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: .84rem; font-weight: 600;
    color: #e9e4f5; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: all .25s cubic-bezier(.3, 1.6, .5, 1); }
.kt-cepat-daftar a .ikon { color: #f5cf55; }
.kt-cepat-daftar a:hover { transform: translateY(-3px); color: #fff; background: linear-gradient(135deg, #3ddc84, #1faa59); border-color: transparent; box-shadow: 0 10px 22px rgba(37, 211, 102, .3); }
.kt-cepat-daftar a:hover .ikon { color: #fff; }
@media (max-width: 900px) {
    .kt-grid { grid-template-columns: 1fr; }
    .kt-peta { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .kt-peta, .kt-kartu, .kt-cepat, .kt-pin, .kt-pin i, .kt-wa-ikon::after { animation: none; } }
@media (max-width: 600px) { .kt-status { flex-basis: 100%; justify-content: flex-start; width: max-content; margin-left: 62px !important; } }

/* =====================================================================
   DETAIL PRODUK: seluruh halaman gelap menyatu (tanpa area putih di bawah)
   ===================================================================== */
.hal-detail main { background: linear-gradient(180deg, #0f1440 0%, #0b1438 40%, #070d24 100%); }
.hal-detail main::before { display: none; }
.detail-panggung { padding-bottom: 72px; }
.detail-panggung::after { display: none; }                     /* hapus gelombang putih */
.detail-panggung .dp-latar { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.hal-detail #ulasan, .hal-detail main > .section { background: transparent; color: #e9e4f5; }
.hal-detail #ulasan { padding-top: 24px; border-top: 1px solid rgba(253, 230, 117, .12); }
.hal-detail main h2, .hal-detail main h3 { color: #fff; }
.hal-detail .section-title::after { background: var(--gradien-emas); }
/* kartu ulasan & form: kaca gelap */
.hal-detail .card.ulasan, .hal-detail #ulasan .card.form {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .16); box-shadow: 0 18px 40px rgba(2, 5, 20, .35);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #e9e4f5; }
.hal-detail .card.ulasan strong { color: #fff; }
.hal-detail .card.ulasan small, .hal-detail .kosong { color: #8f96b8; }
.hal-detail #ulasan label { color: #d9dcec; }
.hal-detail #ulasan input[type=text], .hal-detail #ulasan textarea { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .15); color: #fff; }
.hal-detail #ulasan input[type=text]:focus, .hal-detail #ulasan textarea:focus { border-color: #f5cf55; box-shadow: 0 0 0 4px rgba(245, 207, 85, .12); }
.hal-detail .rating-input label { color: rgba(255, 255, 255, .22); }
.hal-detail .rating-input input:checked ~ label, .hal-detail .rating-input label:hover, .hal-detail .rating-input label:hover ~ label { color: #f5cf55; }
/* Menu Lainnya: kartu produk versi gelap (sama seperti halaman Menu) */
.hal-detail main > .section:last-child .produk-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .16); box-shadow: 0 18px 40px rgba(2, 5, 20, .35);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hal-detail main > .section:last-child .produk-body h3 a { color: #fff; }
.hal-detail main > .section:last-child .harga { color: #f5cf55; }
.hal-detail main > .section:last-child .meta { color: #8f96b8; }
.hal-detail main > .section:last-child .varian-mini span { color: #e9e4f5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.hal-detail .footer { margin-top: 0; }
.kt-ikon.fb { background: linear-gradient(135deg, #3b82f6, #1877f2); box-shadow: 0 8px 18px rgba(24, 119, 242, .35); }

/* Detail: Menu Lainnya (semua produk lain direkomendasikan) */
.ml-kepala { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(253, 230, 117, .12); }
.ml-label { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #f5cf55; }
.ml-kepala h2 { margin: 6px 0 4px; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; }
.ml-kepala p { margin: 0; color: #b8bdd6; }
@media (min-width: 701px) { .ml-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); justify-content: start; } }
.hal-detail main > .section:last-child { padding-top: 40px; border-top: 1px solid rgba(253, 230, 117, .1); }

/* =====================================================================
   IKON MENU SAMPING BERANIMASI
   - saat disorot: animasi khas tiap ikon diputar sekali
   - halaman aktif: animasi pelan berulang
   ===================================================================== */
.ikon-rail * { transform-box: fill-box; transform-origin: center; }
/* Rumah */
.ir-asap circle { opacity: 0; }
.ir-pintu { transform-origin: left center; }
.rail-item:hover .ir-rumah .ir-atap { animation: ir-atap .6s cubic-bezier(.3, 1.6, .5, 1); }
.rail-item:hover .ir-rumah .ir-pintu { animation: ir-pintu .9s ease-in-out; }
.rail-item:hover .ir-asap circle, .rail-item.aktif .ir-asap circle { animation: ir-asap 1.6s ease-out infinite; }
.rail-item:hover .ir-asap circle + circle, .rail-item.aktif .ir-asap circle + circle { animation-delay: .5s; }
@keyframes ir-atap { 40% { transform: translateY(-2.2px); } }
@keyframes ir-pintu { 40%, 60% { transform: scaleX(.25); } }
@keyframes ir-asap { 0% { opacity: 0; transform: translate(0, 2px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(1.5px, -3px) scale(1.3); } }
/* Menu (mangkuk camilan) */
.rail-item:hover .ir-tas .ir-keripik, .rail-item.aktif .ir-tas .ir-keripik { animation: ir-lompat 1.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.ir-tas .k2 { animation-delay: .15s !important; }
.ir-tas .k3 { animation-delay: .3s !important; }
.rail-item:hover .ir-tas .ir-mangkuk { animation: ir-mangkuk .6s ease-in-out; }
@keyframes ir-lompat { 0%, 60%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px) rotate(-10deg); } }
@keyframes ir-mangkuk { 30% { transform: rotate(-6deg); } 70% { transform: rotate(5deg); } }
.rail-item.aktif .ir-tas .ir-keripik { animation-duration: 2.4s; }
/* Galeri */
.rail-item:hover .ir-galeri .ir-surya { animation: ir-surya 1.4s cubic-bezier(.3, 1.4, .5, 1); }
.rail-item.aktif .ir-galeri .ir-surya { animation: ir-surya-pelan 3.5s ease-in-out infinite; }
.rail-item:hover .ir-galeri .ir-gunung { animation: ir-gunung 1.4s ease-in-out; }
@keyframes ir-surya { 0% { transform: translateY(6px) scale(.5); opacity: 0; } 60% { transform: translateY(-1px) scale(1.15); opacity: 1; } 100% { transform: none; } }
@keyframes ir-surya-pelan { 50% { transform: translateY(-1.2px) scale(1.15); } }
@keyframes ir-gunung { 50% { transform: translateX(-1px); } }
/* Kontak (pin) */
.ir-riak { opacity: .35; stroke-width: 1.4; }
.rail-item:hover .ir-lokasi .ir-pin, .rail-item.aktif .ir-lokasi .ir-pin { animation: ir-pin 1.2s cubic-bezier(.3, 1.4, .5, 1) infinite; transform-origin: center bottom; }
.rail-item:hover .ir-lokasi .ir-riak, .rail-item.aktif .ir-lokasi .ir-riak { animation: ir-riak 1.2s ease-out infinite; }
@keyframes ir-pin { 0%, 100% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(-3.5px) scaleY(1.04); } 60% { transform: translateY(0) scaleY(.94); } }
@keyframes ir-riak { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }
.rail-item.aktif .ir-lokasi .ir-pin, .rail-item.aktif .ir-lokasi .ir-riak { animation-duration: 2.4s; }
/* Akun */
.rail-item:hover .ir-pengguna .ir-kepala { animation: ir-angguk .9s ease-in-out; }
.rail-item:hover .ir-pengguna .ir-badan { animation: ir-badan .9s ease-in-out; }
@keyframes ir-angguk { 30% { transform: translateY(1.2px) rotate(-8deg); } 65% { transform: translateY(-.6px) rotate(6deg); } }
@keyframes ir-badan { 50% { transform: scaleX(1.06); } }
.rail-akun .rail-inisial { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.rail-akun:hover .rail-inisial { transform: rotate(-12deg) scale(1.1); box-shadow: 0 0 0 3px rgba(245, 207, 85, .35), 0 6px 14px rgba(233, 181, 44, .45); }
/* Keranjang */
.ir-barang { opacity: 0; }
.rail-item:hover .ir-keranjang .ir-barang { animation: ir-jatuh .9s cubic-bezier(.5, 0, .5, 1.6) forwards; }
.rail-item:hover .ir-keranjang .ir-kereta { animation: ir-dorong .9s ease-in-out; }
.rail-item:hover .ir-keranjang .ir-roda, .rail-item.aktif .ir-keranjang .ir-roda { animation: ir-roda .9s linear infinite; }
@keyframes ir-jatuh { 0% { opacity: 0; transform: translateY(-5px) rotate(-20deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(3px) rotate(0); } }
@keyframes ir-dorong { 40% { transform: translateX(1.5px); } 70% { transform: translateX(-.6px); } }
@keyframes ir-roda { to { transform: rotate(360deg); } }
/* keranjang ikut bergoyang saat jumlah barang bertambah */
.rail-cart:has(.cart-count.bump) .ir-keranjang .ir-kereta { animation: ir-dorong .6s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .ikon-rail * { animation: none !important; } .ir-barang, .ir-asap circle { opacity: 0 !important; } }

/* =====================================================================
   KERANJANG: langkah pemesanan (diperbaiki) + ikon beranimasi
   ===================================================================== */
.langkah-co { max-width: 820px; }
.langkah-co li { gap: 10px; font-size: .9rem; }
.langkah-co li span {
    width: 54px; height: 54px; border: 0; position: relative;
    background: #fff; color: var(--muted); box-shadow: 0 0 0 2px var(--border) inset, 0 6px 14px rgba(20, 26, 51, .06);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.langkah-co li.aktif span { background: linear-gradient(135deg, #e70498, #7b2fd0 55%, #1d3fa0) border-box; background-origin: border-box; color: #fff;
    box-shadow: 0 10px 22px rgba(123, 47, 208, .32); }
.langkah-co li + li::before { top: 26px; height: 3px; border-radius: 3px; right: calc(50% + 27px); width: calc(100% - 54px); }
.langkah-co li.aktif + li.aktif::before { background: linear-gradient(90deg, #e70498, #7b2fd0, #1d3fa0); background-size: 200% 100%; animation: lc-alir 2.5s linear infinite; }
@keyframes lc-alir { to { background-position: -200% 0; } }
.langkah-co li.nanti { color: var(--muted); }
.langkah-co li:hover span { transform: translateY(-3px) scale(1.06); }
/* lencana centang pada langkah selesai */
.lc-centang { position: absolute; right: -4px; bottom: -4px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    font-size: .7rem; font-style: normal; font-weight: 800; color: #fff; background: #2f9e44; box-shadow: 0 0 0 2px #fff; animation: dp-pop .5s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
/* langkah saat ini: cincin berdenyut */
.langkah-co li.kini span::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(123, 47, 208, .45); animation: lc-denyut 2s ease-out infinite; }
@keyframes lc-denyut { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
/* animasi ikon: keranjang (roda), surat (tutup membuka), chat (titik mengetik) */
.langkah-co .ir-keranjang .ir-roda { animation: ir-roda 1.6s linear infinite; }
.langkah-co li:hover .ir-keranjang .ir-kereta { animation: ir-dorong .9s ease-in-out; }
.ir-surat .ir-kertas { transform: translateY(4px); opacity: 0; }
.ir-surat .ir-tutup { transform-origin: center top; }
.langkah-co li.kini .ir-surat .ir-kertas, .langkah-co li:hover .ir-surat .ir-kertas { animation: lc-kertas 2.6s ease-in-out infinite; }
.langkah-co li.kini .ir-surat .ir-tutup, .langkah-co li:hover .ir-surat .ir-tutup { animation: lc-tutup 2.6s ease-in-out infinite; }
@keyframes lc-kertas { 0%, 15%, 85%, 100% { transform: translateY(4px); opacity: 0; } 35%, 65% { transform: translateY(-2.5px); opacity: 1; } }
@keyframes lc-tutup { 0%, 10%, 90%, 100% { transform: scaleY(1); } 30%, 70% { transform: scaleY(-1) translateY(1px); } }
.ir-chat .ir-titik circle { animation: lc-ketik 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ir-chat .ir-titik circle:nth-child(2) { animation-delay: .2s; }
.ir-chat .ir-titik circle:nth-child(3) { animation-delay: .4s; }
@keyframes lc-ketik { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-2px); opacity: 1; } }
.langkah-co li:hover .ir-chat .ir-gelembung { animation: ir-mangkuk .7s ease-in-out; transform-box: fill-box; transform-origin: center; }
@media (max-width: 560px) {
    .langkah-co li span { width: 46px; height: 46px; }
    .langkah-co li + li::before { top: 22px; right: calc(50% + 23px); width: calc(100% - 46px); }
}
@media (prefers-reduced-motion: reduce) { .langkah-co *, .langkah-co li::before, .langkah-co li span::after { animation: none !important; } .ir-surat .ir-kertas { opacity: 0; } }
/* amplop: tutup cukup turun-naik kecil, kertas mengintip di atas (bentuk amplop tetap jelas) */
@keyframes lc-tutup { 0%, 15%, 85%, 100% { transform: none; } 35%, 65% { transform: translateY(-1.2px); } }
@keyframes lc-kertas { 0%, 15%, 85%, 100% { transform: translateY(3px); opacity: 0; } 35%, 65% { transform: translateY(-1.5px); opacity: 1; } }
.ir-surat .ir-kertas { stroke-width: 1.5; }
.langkah-co li + li::before { background: var(--border); }
@media (max-width: 560px) { .langkah-co li { font-size: .74rem; } .langkah-co { padding: 0 4px; } }

/* =====================================================================
   KERANJANG: satu panggung "pita sutra" (beda dari halaman lain), menyatu ke footer
   ===================================================================== */
.kr { --mx: 50%; --my: 20%; position: relative; isolation: isolate; overflow: hidden; flex-grow: 1; padding: 48px 0 80px; color: #e9e4f5;
    background: radial-gradient(120% 70% at 50% 0%, #2a1a6e 0%, #141d55 40%, #0b1438 70%, #070d24 100%); }
.hal-keranjang .footer { margin-top: 0; }
.kr-latar { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* cahaya lembut di tengah atas, berdenyut pelan */
.kr-cahaya { position: absolute; left: 50%; top: -260px; width: 900px; height: 520px; margin-left: -450px; border-radius: 50%; filter: blur(80px);
    background: radial-gradient(closest-side, rgba(231, 4, 152, .35), rgba(123, 47, 208, .25) 55%, transparent); animation: kr-napas 9s ease-in-out infinite; }
@keyframes kr-napas { 50% { transform: scale(1.12); opacity: .75; } }
/* pita sutra bergelombang: tiap lapis bergeser beda kecepatan */
.kr-pita { position: absolute; left: -10%; width: 120%; top: 0; height: 620px; }
.kr-gel { animation: kr-ombak 14s ease-in-out infinite alternate; }
.kr-gel.g2 { animation-duration: 18s; animation-direction: alternate-reverse; }
.kr-gel.g3 { animation-duration: 11s; }
@keyframes kr-ombak { from { transform: translateX(-4%) translateY(0); } to { transform: translateX(4%) translateY(14px); } }
/* sinar diagonal menyapu pelan */
.kr-sinar { position: absolute; top: -20%; bottom: 40%; left: -40%; width: 30%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(253, 230, 117, .07), transparent); animation: kr-sinar 12s ease-in-out infinite; }
@keyframes kr-sinar { 0% { left: -40%; } 60%, 100% { left: 130%; } }
.kr .mn-titik { -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000, transparent 80%); }
.kr .dp-sorot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(253, 230, 117, .06), transparent 65%); }

/* judul di tengah */
.kr-kepala { text-align: center; margin-bottom: 30px; }
.kr-kepala .mn-remah { justify-content: center; }
.kr-kepala h1 { margin: 0; font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1.08; color: #fff; }
.kr-kepala p { margin: 8px 0 0; color: #b8bdd6; }
.kr-kepala .mn-kata.emas .dp-h { padding: .08em .14em .14em .04em; margin: -.08em -.14em -.14em -.04em; }

/* langkah di atas latar gelap */
.kr .langkah-co li { color: #8f96b8; }
.kr .langkah-co li.aktif { color: #fff; }
.kr .langkah-co li span { background: rgba(255, 255, 255, .08); color: #b8bdd6; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .18) inset; }
.kr .langkah-co li.aktif span { color: #fff; box-shadow: 0 10px 24px rgba(231, 4, 152, .35); }
.kr .langkah-co li + li::before { background: rgba(255, 255, 255, .14); }
.kr .lc-centang { box-shadow: 0 0 0 2px #141d55; }

/* isi keranjang: judul & tautan terang; kartu tetap putih bersih */
.kr .co-kepala h2 { color: #fff; }
.kr .co-jml { color: #f5cf55; background: rgba(245, 207, 85, .12); }
.kr .co-kosongkan { color: #b8bdd6; }
.kr .co-kosongkan:hover { color: #ff9b9b; background: rgba(224, 49, 49, .15); }
.kr .co-lanjut { color: #f5cf55; }
.kr .ci { border-color: rgba(255, 255, 255, .6); box-shadow: 0 16px 36px rgba(2, 5, 20, .35); }
.kr .co-form { border: 0; box-shadow: 0 30px 70px rgba(2, 5, 20, .5), 0 0 0 1px rgba(253, 230, 117, .25); }
.kr .co-kosong { background: rgba(255, 255, 255, .06); border-color: rgba(253, 230, 117, .25); color: #e9e4f5; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kr .co-kosong h3 { color: #fff; }
.kr .co-kosong p { color: #b8bdd6; }
.kr .co-kosong-ikon { color: #f5cf55; background: rgba(245, 207, 85, .12); }
.kr .alert { position: relative; }
@media (max-width: 700px) { .kr { padding: 30px 0 56px; } .kr-cahaya { width: 600px; margin-left: -300px; } }
@media (prefers-reduced-motion: reduce) { .kr-cahaya, .kr-gel, .kr-sinar { animation: none; } }
/* isi kartu putih tetap teks gelap */
.kr .co-form, .kr .ci { color: var(--text); }
.kr .co-form h3, .kr .co-form .co-total, .kr .co-metode strong { color: var(--text); }
/* pita memudar halus ke bawah (tanpa tepi keras) */
.kr-pita { height: 760px; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 95%); mask-image: linear-gradient(180deg, #000 45%, transparent 95%); }
.kr-sinar { top: -10%; bottom: auto; height: 620px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }

/* Keranjang: tamu wajib masuk sebelum checkout */
.co-kunci { text-align: center; }
.co-kunci h3 { justify-content: flex-start; }
.ck-isi { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; border-radius: 18px; background: linear-gradient(160deg, #f8f5ff, #fff); border: 1px dashed rgba(123, 47, 208, .3); }
.ck-gembok { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: var(--gradien-utama);
    box-shadow: 0 12px 26px rgba(123, 47, 208, .35); animation: ck-goyang 3.2s ease-in-out infinite; }
@keyframes ck-goyang { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 89% { transform: rotate(-4deg); } }
.ck-isi strong { font-size: 1.1rem; color: var(--text); }
.ck-isi p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.ck-daftar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .9rem; color: var(--muted); text-decoration: none; }
.ck-daftar b { color: #7b2fd0; }
.ck-daftar .ikon { color: #7b2fd0; transition: transform .25s; }
.ck-daftar:hover .ikon { transform: translateX(4px); }
a.co-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .ck-gembok { animation: none; } }

/* =====================================================================
   BERANDA: widget jam toko langsung (status buka/tutup, hari, garis waktu)
   ===================================================================== */
.jt { --warna: #f5cf55; margin-top: 22px; max-width: 520px; padding: 16px 18px 14px; border-radius: 22px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(253, 230, 117, .22);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(4, 8, 26, .3);
    transition: border-color .5s, box-shadow .5s; }
.jt.buka { --warna: #3ddc84; border-color: rgba(61, 220, 132, .4); box-shadow: 0 18px 40px rgba(4, 8, 26, .3), 0 0 30px rgba(61, 220, 132, .12); }
.jt.tutup { --warna: #ff8a8a; }
.jt-atas { display: flex; align-items: center; gap: 14px; }
/* jam analog mini dengan jarum bergerak */
.jt-jam { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 2px solid var(--warna);
    box-shadow: 0 0 0 0 var(--warna); transition: border-color .5s; }
.jt.buka .jt-jam { animation: jt-denyut 2.2s ease-out infinite; }
@keyframes jt-denyut { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 100% { box-shadow: 0 0 0 12px rgba(61, 220, 132, 0); } }
.jt-jarum { position: absolute; left: 50%; bottom: 50%; width: 2.5px; margin-left: -1.25px; border-radius: 2px; background: #fff; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.jt-jarum.j { height: 12px; transform: rotate(var(--sj, 0deg)); }
.jt-jarum.m { height: 17px; background: var(--warna); transform: rotate(var(--sm, 0deg)); }
.jt-pusat { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; }
.jt-status { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.jt-teks { color: var(--warna); font-size: 1.02rem; transition: color .5s; }
.jt-sub { color: #b8bdd6; font-size: .8rem; }
.jt-waktu { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.jt-digit { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: .04em; }
.jt-digit .titik2 { animation: jt-kedip 1s steps(1) infinite; }
@keyframes jt-kedip { 50% { opacity: .2; } }
.jt-waktu small { font-size: .66rem; font-weight: 700; letter-spacing: .2em; color: #8f96b8; }
/* deretan hari */
.jt-hari { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 12px; }
.jt-hari span { position: relative; padding: 5px 0; border-radius: 9px; text-align: center; font-size: .72rem; font-weight: 700; color: #6f7699;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
    animation: dp-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.9s + var(--i, 0) * 60ms); }
.jt-hari span.on { color: #e9e4f5; background: rgba(253, 230, 117, .1); border-color: rgba(253, 230, 117, .22); }
.jt-hari span.ini { color: #141a33; background: var(--gradien-emas); border-color: transparent; box-shadow: 0 6px 14px rgba(233, 181, 44, .35); }
.jt-hari span.ini::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #f5cf55; }
/* garis waktu 24 jam */
.jt-garis { position: relative; height: 6px; margin: 4px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.jt-rentang { position: absolute; top: 0; bottom: 0; left: calc(var(--buka) * 100%); width: calc((var(--tutup) - var(--buka)) * 100%); border-radius: inherit;
    background: linear-gradient(90deg, #f5cf55, #3ddc84, #f5cf55) 0 0 / 200% 100%; transform-origin: left; animation: jt-isi 1.2s cubic-bezier(.6, 0, .2, 1) 1s both, cta-alir 6s linear infinite; }
@keyframes jt-isi { from { transform: scaleX(0); } }
.jt-kini { position: absolute; top: 50%; left: calc(var(--kini, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: #fff; border: 3px solid var(--warna); box-shadow: 0 0 12px var(--warna); transition: left .8s ease, border-color .5s; }
.jt-garis small { position: absolute; top: 10px; transform: translateX(-50%); font-size: .66rem; color: #8f96b8; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .jt { margin-left: auto; margin-right: auto; text-align: left; } }
@media (max-width: 480px) { .jt-digit { font-size: 1.1rem; } .jt-hari { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .jt *, .jt { animation: none !important; } }
.pp-nama { margin-top: 0; }
/* statistik profil tinggal 2 kotak */
.pp-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; }
@media (max-width: 560px) { .pp-angka div:nth-child(2) { grid-column: auto; grid-row: auto; } }

/* =====================================================================
   GALERI: panel "Ide & Deskripsi Produk" di samping foto
   ===================================================================== */
.pg-wrap { position: relative; background: #070d24; }
.pgi-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pgi-kat { padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #f5cf55; background: rgba(245, 207, 85, .1); border: 1px solid rgba(245, 207, 85, .3); }
.pgi-no { font-family: var(--font-judul); font-size: 1.3rem; font-weight: 800; color: #fff; }
.pgi-no i { font-style: normal; font-size: .85rem; color: #8f96b8; }
.pgi-nama { margin: 14px 0 4px; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.1; color: #fff; }
.pgi-judul { margin: 0 0 16px; font-size: .9rem; font-style: italic; color: #f5cf55; }
.pgi-blok { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.pgi-blok h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--font-teks); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #e9e4f5; }
.pgi-ikon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: #141a33; background: var(--gradien-emas); }
.pgi-blok p { margin: 0; font-size: .92rem; line-height: 1.7; color: #c3c7de; }
.pgi-bawah { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pgi-bawah small { display: block; font-size: .72rem; color: #8f96b8; }
.pgi-bawah strong { font-family: var(--font-judul); font-size: 1.6rem; color: #f5cf55; font-variant-numeric: lining-nums; }
.pgi-rasa { display: flex; gap: 6px; flex-wrap: wrap; }
.pgi-rasa span { padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #e9e4f5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.pgi-tombol { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; padding: 13px 20px; border-radius: 999px; text-decoration: none; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #e70498, #7b2fd0 55%, #1d3fa0); box-shadow: 0 12px 28px rgba(123, 47, 208, .4); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.pgi-tombol:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(231, 4, 152, .45); }
.pgi-tombol .ikon { transition: transform .3s; }
.pgi-tombol:hover .ikon { transform: translateX(4px); }
/* animasi pergantian isi panel */
.pg-info-item.aktif > * { animation: pgi-masuk .7s cubic-bezier(.2, .8, .2, 1) both; }
.pg-info-item.aktif > *:nth-child(2) { animation-delay: .08s; }
.pg-info-item.aktif > *:nth-child(3) { animation-delay: .14s; }
.pg-info-item.aktif > *:nth-child(4) { animation-delay: .2s; }
.pg-info-item.aktif > *:nth-child(5) { animation-delay: .26s; }
.pg-info-item.aktif > *:nth-child(6) { animation-delay: .32s; }
.pg-info-item.aktif > *:nth-child(7) { animation-delay: .38s; }
@keyframes pgi-masuk { from { opacity: 0; transform: translateX(26px); filter: blur(4px); } }
.pg-info-item[hidden] { display: none; }

/* Desktop: panel kaca di kanan, foto & judul bergeser ke kiri */
@media (min-width: 1101px) {
    .pg-wrap { --panel: clamp(360px, 30vw, 460px); }
    .pg-info { position: absolute; z-index: 8; top: 0; bottom: 0; right: 0; width: var(--panel); display: flex; align-items: center; padding: 28px 28px 28px 0; pointer-events: none; }
    .pg-info-item { pointer-events: auto; width: 100%; max-height: calc(100% - 20px); overflow-y: auto; scrollbar-width: thin; padding: 24px 24px 22px; border-radius: 24px;
        background: rgba(8, 13, 38, .72); border: 1px solid rgba(253, 230, 117, .2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
    .pg-wrap .pg-slide { padding-right: var(--panel); }
    .pg-wrap .pg-kepala { right: var(--panel); }
    .pg-wrap .pg-bingkai img { max-width: min(calc(100vw - var(--panel) - 260px), 1000px); }
    .pg-wrap .pg-nav.next { right: calc(var(--panel) + 10px); }
}
/* Tablet & HP: panel di bawah foto */
@media (max-width: 1100px) {
    .pg-info { position: relative; padding: 26px 0 40px; background: linear-gradient(180deg, #0b1438, #070d24); }
    .pg-info-item { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 22px 20px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(253, 230, 117, .18); }
}
.hal-galeri .footer { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .pg-info-item.aktif > * { animation: none; } }
.pg-info-item { overflow-x: hidden; } .pg-info-item > * { min-width: 0; } .pg-info-item::-webkit-scrollbar { width: 6px; } .pg-info-item::-webkit-scrollbar-thumb { background: rgba(253, 230, 117, .25); border-radius: 6px; }
/* Galeri: foto selalu di bawah judul (tidak bertabrakan), ukuran menyesuaikan sisa ruang */
.pg-wrap .panggung { --atas: 170px; --bawah: 5vh; }
.pg-wrap .pg-slide { padding-top: var(--atas); padding-bottom: var(--bawah); box-sizing: border-box; }
.pg-wrap .pg-bingkai img { max-height: calc(100svh / var(--zoom) - var(--atas) - var(--bawah) - 10px); }
.pg-wrap .pg-kepala { top: 3.5vh; }
@media (max-width: 960px) {
    .pg-wrap .panggung { --bawah: 3vh; }
    .pg-wrap .pg-bingkai img { max-height: calc(100svh - 64px - var(--atas) - var(--bawah) - 10px); }
}

/* Beranda: deskripsi toko berparagraf */
.hb-tentang { max-width: 600px; }
.hb-tentang p { margin: 0 0 10px; font-size: .98rem; line-height: 1.7; color: #d9dcec; }
.hb-tentang .hbt-judul { margin-bottom: 8px; font-family: var(--font-judul); font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: #fff; }
.hb-tentang .hbt-penutup { margin: 4px 0 0; font-family: var(--font-judul); font-style: italic; font-weight: 600; font-size: 1.05rem; color: #f5cf55; }
@media (max-width: 960px) { .hb-tentang { margin-left: auto; margin-right: auto; } }

/* =====================================================================
   GALERI: tombol navigasi baru (kaca, cincin emas, panah chevron)
   ===================================================================== */
.pg-nav { width: 58px; height: 58px; margin-top: -29px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
    background: rgba(7, 13, 36, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1.5px rgba(253, 230, 117, .55), 0 10px 26px rgba(0, 0, 0, .35); overflow: visible;
    transition: background .35s, color .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s; }
.pg-nav .ikon { display: none; }
.pg-nav.prev .pg-chev { transform: rotate(180deg); }
.pg-chev { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pg-chev-ekor { stroke-dasharray: 11; stroke-dashoffset: 11; transition: stroke-dashoffset .35s ease; }
.pg-nav-cincin { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(253, 230, 117, .35); opacity: 0; transform: scale(.8); transition: opacity .35s, transform .35s; pointer-events: none; }
.pg-nav:hover { background: linear-gradient(135deg, #fde675, #e9b52c); color: #141a33; transform: scale(1.06); box-shadow: inset 0 0 0 1.5px transparent, 0 14px 32px rgba(233, 181, 44, .45); }
.pg-nav:hover .pg-chev-ekor { stroke-dashoffset: 0; }
.pg-nav.next:hover .pg-chev { transform: translateX(3px); }
.pg-nav.prev:hover .pg-chev { transform: rotate(180deg) translateX(3px); }
.pg-nav:hover .pg-nav-cincin { opacity: 1; transform: scale(1); animation: pg-nav-denyut 1.6s ease-out infinite; }
@keyframes pg-nav-denyut { to { transform: scale(1.25); opacity: 0; } }
.pg-nav:active { transform: scale(.94); }
.pg-nav:focus-visible { outline: 3px solid #f5cf55; outline-offset: 4px; }
@media (max-width: 960px) { .pg-nav { width: 46px; height: 46px; margin-top: -23px; } }
@media (prefers-reduced-motion: reduce) { .pg-nav-cincin { animation: none !important; } }

/* Jam toko ringkas: sebaris di samping tombol Lihat Menu */
.hero-btn { align-items: center; }
.jt.jt-ringkas { display: inline-flex; align-items: center; gap: 10px; max-width: none; margin: 0; padding: 7px 14px 7px 7px; border-radius: 999px; }
.jt-ringkas .jt-jam { width: 34px; height: 34px; }
.jt-ringkas .jt-status { flex: 0 1 auto; line-height: 1.2; }
.jt-ringkas .jt-teks { font-size: .86rem; white-space: nowrap; }
.jt-ringkas .jt-sub { font-size: .72rem; white-space: nowrap; }
.jt-ringkas .jt-waktu { margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .14); }
.jt-ringkas .jt-digit { font-size: .95rem; }
.jt-ringkas .jt-waktu small { font-size: .58rem; letter-spacing: .14em; }
@media (max-width: 960px) { .jt.jt-ringkas { margin: 0 auto; } }
/* panah mengikuti foto: geser halus, muncul setelah posisinya dihitung */
.panggung .pg-nav { transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), background .35s, color .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s, opacity .4s; }
.panggung:not(.nav-siap) .pg-nav { opacity: 0; }
.pg-wrap .pg-nav.next { right: auto; }
@media (max-width: 640px) { .hb-teks .hero-btn { flex-wrap: wrap; justify-content: center; } .jt.jt-ringkas { flex-basis: auto; max-width: 100%; } }
.jt.jt-ringkas { flex-shrink: 0; }

/* =====================================================================
   GALERI: satu slide per produk; beberapa foto disusun berdampingan (kolase)
   ===================================================================== */
.pg-kolase { --celah: 18px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--celah); }
.pg-kolase .pg-bingkai { flex: 0 1 auto; }
/* lebar tiap foto = ruang tersedia dibagi jumlah foto, agar tidak saling tumpang tindih */
.pg-kolase .pg-bingkai img { max-width: calc((min(70vw, 1200px) - (var(--n) - 1) * var(--celah)) / var(--n)); }
@media (min-width: 1101px) {
    .pg-wrap .pg-kolase .pg-bingkai img { max-width: calc((min(calc(100vw - var(--panel) - 260px), 1000px) - (var(--n) - 1) * var(--celah)) / var(--n)); }
}
@media (max-width: 960px) {
    .pg-kolase { --celah: 10px; }
    .pg-kolase .pg-bingkai img { max-width: calc((92vw - (var(--n) - 1) * var(--celah)) / var(--n)); }
}
/* foto kedua dst. muncul sedikit lebih lambat */
.pg-slide.aktif:not(.masuk) .pg-kolase .pg-bingkai { animation-delay: calc(.55s + var(--k) * .15s); }
.pg-kolase .pg-bingkai:nth-child(2) { transform: rotate(1.2deg); }
.pg-kolase .pg-bingkai:nth-child(1):not(:only-child) { transform: rotate(-1.2deg); }
@media (max-width: 960px) {
    .pg-kolase { flex-direction: column; }
    .pg-kolase .pg-bingkai img { max-width: 92vw; max-height: calc((100svh - 64px - var(--atas) - var(--bawah) - 10px - (var(--n) - 1) * var(--celah)) / var(--n)); }
    .pg-kolase .pg-bingkai:nth-child(n) { transform: none; }
}

/* Kontak: alamat + peta satu kartu, jam buka lengkap */
.kt-lokasi { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.kt-alamat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid rgba(253, 230, 117, .14); color: #e9e4f5; }
.kt-lokasi .kt-peta { position: relative; flex: 1; min-height: 360px; border: 0; border-radius: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
.kt-lokasi:hover { border-color: rgba(253, 230, 117, .35); }
.kt-lokasi:hover .kt-ikon { transform: rotate(-10deg) scale(1.08); }
.jt.kt-jam { max-width: none; margin: 0; }
.kt-jam .jt-sub { color: #b8bdd6; }
@media (max-width: 900px) { .kt-lokasi .kt-peta { min-height: 280px; } }
.kt-lokasi { position: relative; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 117, .16);
    box-shadow: 0 18px 40px rgba(2, 5, 20, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    animation: kt-masuk .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .5s; transition: border-color .3s; }
@media (prefers-reduced-motion: reduce) { .kt-lokasi { animation: none; } }

/* =====================================================================
   BERANDA (layar ≤1100px / HP): tampilan awal = judul + logo + ulasan,
   lalu deskripsi, langkah, dan tombol di bawahnya
   ===================================================================== */
@media (max-width: 1100px) {
    .hal-index .hero-bento { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
    .hal-index .hb-teks { display: contents; }
    .hal-index .hb-judul { order: 1; text-align: center; margin: 0 auto; }
    .hal-index .hb-grid { order: 2; }
    .hal-index .hb-tentang, .hal-index .hb-cara, .hal-index .hb-teks > .hero-btn { order: 3; text-align: center; }
    .hal-index .hb-tentang, .hal-index .hb-cara { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
    .hal-index .hb-cara { text-align: left; }
    .hal-index .hb-teks > .hero-btn { justify-content: center; margin-top: 0; }
    .hal-index .hb-grid { gap: 14px; }
}
@media (max-width: 700px) {
    .hal-index .hero.hero-aurora { padding-top: 24px; }
    .hal-index .hb-logo .logo-utama { max-width: min(250px, 62vw); }
    .hal-index .hero-bento { gap: 18px; }
}

/* =====================================================================
   HP / TABLET (≤960px): menu samping seperti laptop
   - bar atas disembunyikan
   - menu tersembunyi, muncul lewat tab kecil di tepi kiri
   ===================================================================== */
.rail-tombol { display: none; }
@media (max-width: 960px) {
    .navbar { display: none !important; }
    .rail {
        position: fixed; z-index: 95; left: 10px; top: 50%;
        display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 26px;
        background: rgba(251, 248, 241, .94); border: 1px solid rgba(228, 224, 212, .9);
        -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
        box-shadow: 0 18px 40px rgba(15, 25, 60, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
        transform: translate(calc(-100% - 24px), -50%) scale(.92); opacity: 0; pointer-events: none;
        transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .3s ease;
    }
    .rail-buka .rail { transform: translate(0, -50%) scale(1); opacity: 1; pointer-events: auto; }
    .rail-menu { display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border-bottom: 1px solid var(--border); }
    .rail-item { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px; color: var(--muted); text-decoration: none;
        opacity: 0; transform: translateX(-16px) scale(.6); transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
    .rail-buka .rail .rail-item { opacity: 1; transform: none; }
    .rail-menu .rail-item:nth-child(1) { transition-delay: .05s; }
    .rail-menu .rail-item:nth-child(2) { transition-delay: .09s; }
    .rail-menu .rail-item:nth-child(3) { transition-delay: .13s; }
    .rail-menu .rail-item:nth-child(4) { transition-delay: .17s; }
    .rail-akun { transition-delay: .21s; }
    .rail-cart { transition-delay: .25s; }
    .rail-item.aktif { color: #fff; background: var(--gradien-utama); box-shadow: 0 8px 18px rgba(123, 47, 208, .35); }
    .rail-cart { color: #fff; background: #141a33; }
    .rail-cart .cart-count { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; font-size: .7rem; box-shadow: 0 0 0 2px #fff; }
    .rail-label { display: none; }
    /* ikon aktif tetap beranimasi pelan; ketukan memicu animasi seperti hover */
    .rail-item:active .ikon-rail { transform: scale(.9); }

    /* tab pembuka di tepi kiri */
    .rail-tombol {
        position: fixed; z-index: 96; left: 0; top: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        width: 30px; height: 74px; margin-top: -37px; padding: 0; border: 0; border-radius: 0 16px 16px 0; cursor: pointer; color: #fff;
        background: var(--gradien-utama); box-shadow: 4px 6px 18px rgba(123, 47, 208, .45);
        transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; animation: rt-denyut 2.6s ease-in-out infinite;
    }
    .rail-tombol .ikon { transition: transform .4s; }
    .rail-tombol .cart-count { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; font-size: .62rem; box-shadow: 0 0 0 2px #fff; }
    .rail-buka .rail-tombol { transform: translateX(-100%); opacity: 0; pointer-events: none; }
    @keyframes rt-denyut { 50% { box-shadow: 4px 6px 26px rgba(231, 4, 152, .75); } }
    /* latar redup saat menu terbuka */
    .rail-redup { position: fixed; inset: 0; z-index: 94; background: rgba(7, 13, 36, .35); opacity: 0; pointer-events: none; transition: opacity .3s;
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .rail-buka .rail-redup { opacity: 1; pointer-events: auto; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .rail, .rail-item, .rail-tombol { transition: none; animation: none; } }
@media (max-width: 600px) { .produk-bawah .harga { white-space: nowrap; font-size: 1rem; } .produk-bawah .btn-tambah { min-width: 40px; height: 40px; } }

/* =====================================================================
   MODE HEMAT ANIMASI UNTUK HP / LAYAR SENTUH
   Efek berat (blur kaca, partikel, latar bergerak, cahaya berputar) dimatikan
   agar scroll lancar dan tidak patah-patah. Animasi masuk sekali & tombol tetap ada.
   ===================================================================== */
@media (max-width: 960px), (hover: none) {
    /* 1) Blur kaca (paling berat di HP): diganti latar semi-transparan biasa */
    *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    body { background-attachment: scroll !important; }

    /* 2) Partikel & bintang & bara: disembunyikan */
    .lh-bintang, .lh-bara, .bara, .dp-bara, .dp-kilau, .lu-bintang, .ph-foto, .ph-lantai, .sinar, .butir,
    .kr-sinar, .ft-titik, .ft-sorot, .dp-sorot, .mn-titik, .ft-watermark { display: none !important; }

    /* 3) Gumpalan cahaya buram yang bergerak: dibuat diam & lebih ringan */
    .lh-awan, .aurora span, .dp-aurora, .mn-cahaya, .kr-cahaya, .ph-mesh span, .mn-pita, .dp-cahaya, .auth-cincin, .hb-logo::before {
        animation: none !important; filter: blur(40px) !important; will-change: auto !important;
    }
    .lh-awan.c, .mn-cahaya.c, .dp-aurora.c { display: none !important; }
    .dp-ambien span, .dp-ambien span.aktif { animation: none !important; filter: blur(24px) saturate(1.3) !important; }

    /* 4) Latar bergerak terus-menerus: dihentikan (tampil diam) */
    body:not(.hal-index) .hb-latar span { animation: none !important; }
    body:not(.hal-index) .hb-latar span:first-child { opacity: .45 !important; }
    .kr-gel, .ft-pelepah, .ft-bentenan, .footer::after, .mn-kepala::after, .dp-sapu, .ul-sapu,
    .hb-kilat::after, .hb-cta::before, .eyebrow-kaca.hb-muncul::after, .produk-img::after { animation: none !important; }
    .footer::after, .dp-sapu, .ul-sapu { display: none !important; }

    /* 5) Kilau & denyut berulang yang memicu repaint */
    .hb-cta { animation: none !important; }
    .hb-sorot .hb-kata, .pp-emas .dp-h, .mn-kata.emas .dp-h, .detail-panggung .harga-besar { animation-iteration-count: 1 !important; }
    .ul-hero .ul-kartu { animation: none !important; }
    .ul-kartu.depan .ul-bintang, .ul-kartu.depan .ul-latar { animation: none !important; transform: none !important; }
    .footer-logo, .cta-logo, .lk-ikon, .ps-kosong-ikon, .co-kosong-ikon, .kt-pin, .auth-logo, .kartu-member { animation: none !important; }
    .logo-utama, .lu-koin, .lu-kilap, .lu-cahaya { animation: none !important; }

    /* 6) Kartu produk: tanpa efek 3D & sorot kursor */
    .pk-sorot { display: none !important; }
    .js-reveal .grid-produk .produk-card[data-reveal] { transform: translateY(20px) !important; }
    .js-reveal .grid-produk .produk-card[data-reveal].tampil { transform: none !important; }
    .produk-card:hover, .ci:hover, .kt-kartu:hover, .ps-baris:hover { transform: none !important; }

    /* 7) Hal kecil lain: bayangan berat dikurangi */
    .detail-panggung .detail-img, .co-form, .kr .co-form { box-shadow: 0 12px 28px rgba(2, 5, 20, .35) !important; }
}
@media (max-width: 960px), (hover: none) {
    /* denyut bayangan & kilau berulang (memicu repaint) */
    .rail-tombol, .hb-titik, .jt.buka .jt-jam, .jt .jt-jam, .tombol-musik.menunggu, .ck-gembok, .lu-kilap, .lu-koin,
    .hb-orn-permata, .kt-wa-ikon::after, .hb-wa-ikon::after, .ft-status.buka .ft-status-titik, .langkah-co li.kini span::after { animation: none !important; }
    .hb-orn-permata { transform: none !important; }
    /* ikon menu samping & langkah: diam (animasi hanya saat diketuk tidak diperlukan di HP) */
    .ikon-rail *, .langkah-co li + li::before { animation: none !important; }
    .ir-barang, .ir-asap circle, .ir-surat .ir-kertas { opacity: 0 !important; }
    .ir-chat .ir-titik circle { opacity: .8; }
    .jt-kedip, [class*="titik2"] { animation: none !important; }
}
@media (max-width: 960px), (hover: none) { .jt-rentang { animation: jt-isi 1.2s cubic-bezier(.6, 0, .2, 1) 1s both !important; } .kilap-logo::before { animation: none !important; display: none; } }

/* =====================================================================
   GALERI HP/TABLET: foto + deskripsi menyatu di satu latar buram (seperti laptop)
   - panggung setinggi isi (tanpa ruang kosong), panah di bawah foto
   - kartu deskripsi tepat di bawah foto, tidak menutupi foto
   ===================================================================== */
@media (max-width: 1100px) {
    .pg-wrap { isolation: isolate; overflow: hidden; background: #070d24; }
    .pg-wrap::before { content: ''; position: absolute; inset: -40px; z-index: -2; pointer-events: none;
        background: var(--pg-bg, none) center / cover no-repeat; filter: blur(28px) brightness(.5) saturate(1.3); transform: scale(1.1); }
    .pg-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 14%, transparent 50%, rgba(7, 13, 36, .7) 88%, #070d24); }
    .pg-wrap .panggung { display: block; height: auto; min-height: 0; background: transparent; transition: height .6s cubic-bezier(.2, .8, .2, 1); }
    /* hanya slide aktif yang menentukan tinggi; slide lain menumpuk di atas */
    .pg-wrap .pg-slide:not(.aktif) { position: absolute; inset: 0 0 auto 0; }
    .pg-wrap .panggung::after { display: none; }
    .pg-wrap .pg-slide.aktif { position: relative; inset: auto; }
    .pg-wrap .pg-slide { padding: var(--atas) 0 84px; }
    .pg-wrap .pg-slide::before { display: none; }
    .pg-wrap .pg-kolase { flex-direction: column; --celah: 12px; }
    .pg-wrap .pg-kolase .pg-bingkai:nth-child(n) { transform: none; }
    .pg-wrap .pg-bingkai img, .pg-wrap .pg-kolase .pg-bingkai img { max-width: min(92vw, 640px);
        max-height: calc((min(62svh, 130vw) - (var(--n, 1) - 1) * var(--celah)) / var(--n, 1)); }
    /* panah: berdampingan di bawah foto */
    .pg-wrap .pg-nav { top: auto !important; bottom: 18px; margin-top: 0; width: 48px; height: 48px; }
    .pg-wrap .pg-nav.prev { left: calc(50% - 60px) !important; right: auto !important; }
    .pg-wrap .pg-nav.next { left: calc(50% + 12px) !important; right: auto !important; }
    /* kartu deskripsi di atas latar yang sama */
    .pg-wrap .pg-info { background: transparent; padding: 0 0 44px; }
    .pg-wrap .pg-info-item { background: rgba(8, 13, 38, .8); border: 1px solid rgba(253, 230, 117, .22); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
}

/* =====================================================================
   BERANDA (HP): latar foto produk menutupi seluruh hero & tetap berganti
   (animasi ringan: hanya opacity + transform, tanpa blur)
   ===================================================================== */
@media (max-width: 1100px), (hover: none) {
    .hal-index .hb-latar {
        top: 0 !important; bottom: 0 !important; left: 0; right: 0; width: 100% !important; height: auto !important;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%) !important;
        mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%) !important;
    }
    .hal-index .hb-latar span {
        animation: hb-latar var(--durasi) linear infinite !important; animation-delay: calc(var(--n) * 5s - 5s) !important;
        will-change: opacity, transform; backface-visibility: hidden;
    }
    .hal-index .hb-latar span, .hal-index .hb-latar span:first-child { opacity: 0; }
    /* lapisan gelap agar teks tetap terbaca di atas foto */
    .hal-index .hb-latar::after { mix-blend-mode: normal;
        background: linear-gradient(180deg, rgba(10, 16, 52, .78) 0%, rgba(20, 18, 70, .62) 40%, rgba(10, 16, 52, .7) 100%), linear-gradient(120deg, rgba(29, 63, 160, .25), rgba(231, 4, 152, .2)); }
}
@media (prefers-reduced-motion: reduce) {
    .hal-index .hb-latar span { animation: none !important; }
    .hal-index .hb-latar span:first-child { opacity: .5 !important; }
}
@media (max-width: 1100px), (hover: none) {
    .hal-index .hb-latar::after { content: '' !important; display: block !important; position: absolute; inset: 0; z-index: 1; mix-blend-mode: normal !important; opacity: 1 !important;
        background: linear-gradient(180deg, rgba(10, 14, 48, .72) 0%, rgba(22, 16, 66, .6) 45%, rgba(10, 14, 48, .82) 100%) !important; }
    .hal-index .hb-latar span { filter: saturate(1.1); }
}

/* =====================================================================
   MASUK: pilihan peran Pelanggan / Admin (satu halaman login)
   ===================================================================== */
.auth-peran { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 16px; background: #141a33; }
.auth-peran a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 12px;
    font-weight: 800; font-size: .92rem; color: #b8bdd6; text-decoration: none; transition: color .3s; }
.auth-peran a:hover { color: #fff; }
.auth-peran a.aktif { color: #141a33; }
.auth-peran-bg { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 12px; background: var(--gradien-emas);
    box-shadow: 0 6px 16px rgba(233, 181, 44, .4); animation: auth-tab-kiri .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.auth-peran-bg.kanan { left: 50%; animation-name: auth-tab-kanan; }
.auth-peran + .auth-tab { margin-top: 2px; }
/* nuansa khusus mode admin */
.auth-admin .auth-sisi { background: radial-gradient(circle at 50% 30%, rgba(245, 207, 85, .28), transparent 60%), linear-gradient(160deg, rgba(20, 26, 51, .85), rgba(29, 63, 160, .45)); }
.auth-admin .auth-tombol { background: linear-gradient(135deg, #141a33, #1d3fa0) !important; }
/* pintasan Panel Admin di menu samping */
.rail-admin { color: #141a33 !important; background: var(--gradien-emas) !important; box-shadow: 0 6px 14px rgba(233, 181, 44, .35); }
.auth-pilih { width: 100%; height: 46px; margin: 0; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font: inherit; appearance: auto; }

/* Kontak: kartu WhatsApp + pesan cepat jadi satu */
.kt-wa { --gx: 50%; --gy: 50%; position: relative; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(37, 211, 102, .28);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(2, 5, 20, .35);
    animation: kt-masuk .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.5s + var(--n) * 110ms); transition: border-color .3s; }
.kt-wa:hover { border-color: rgba(37, 211, 102, .5); }
.kt-wa:hover .pk-sorot { opacity: 1; }
.kt-wa-atas { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: #e9e4f5; text-decoration: none; border-radius: 22px 22px 0 0; transition: background .3s; }
.kt-wa-atas:hover { background: rgba(37, 211, 102, .08); }
.kt-wa-atas:hover .kt-ikon { transform: rotate(-10deg) scale(1.08); }
.kt-wa-atas:hover .kt-panah { transform: translateX(4px); color: #8ff0b4; }
.kt-wa-cepat { position: relative; z-index: 2; padding: 12px 18px 16px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.kt-wa-label { display: block; margin-bottom: 10px; font-size: .78rem; font-weight: 600; color: #b8bdd6; }

/* Pita "toko tutup sementara" di website */
.pita-tutup { position: relative; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; text-align: center; font-size: .9rem; color: #fff;
    background: linear-gradient(90deg, #b42318, #e03131, #b42318) 0 0 / 200% 100%; animation: cta-alir 8s linear infinite; }
.pita-tutup b { color: #fff3c4; }
.pita-tutup-ikon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.toko-tutup #btnCheckout { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pita-tutup { animation: none; } }

/* Checkout: metode pembayaran + info rekening */
.co-bayar .co-emoji { font-size: 1.35rem; line-height: 1; }
.co-rekening { padding: 14px 16px; border-radius: 14px; background: #eef4ff; border: 1px solid #cfdcfb; color: #1d3a8a; font-size: .88rem; animation: dp-naik .4s ease both; }
.co-rekening[hidden] { display: none; }
.co-rekening strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #1d3fa0; }
.co-rekening p { margin: 0 0 6px; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; font-weight: 700; color: #141a33; line-height: 1.6; }
.co-rekening small { color: #4a5a8a; }
.kr .co-rekening { color: #1d3a8a; }
/* QRIS di checkout */
.co-bayar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .co-bayar { grid-template-columns: 1fr 1fr; } }
.co-qris { text-align: center; }
.co-qris strong { justify-content: center; }
.co-qris-gambar { display: block; width: min(240px, 100%); margin: 6px auto 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(20, 26, 51, .12); }

/* =====================================================================
   BUKTI PEMBAYARAN (Transfer / QRIS) + pita pengingat
   ===================================================================== */
.bukti-kotak { margin: 14px 0; padding: 16px; border-radius: 16px; background: #fff8e6; border: 1.5px dashed #f0c95a; text-align: left; animation: dp-naik .5s ease both; }
.bukti-kotak.terkirim { background: #eefaf2; border: 1.5px solid #b9e6c8; }
.bukti-status { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bukti-status > div { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.bukti-status strong { color: #141a33; }
.bukti-status small { color: #6b7194; font-size: .8rem; }
.bukti-ikon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; color: #fff; background: #2f9e44; }
.bukti-ikon.wajib { background: #e9a100; animation: bukti-denyut 1.8s ease-out infinite; }
@keyframes bukti-denyut { 0% { box-shadow: 0 0 0 0 rgba(233, 161, 0, .55); } 100% { box-shadow: 0 0 0 12px rgba(233, 161, 0, 0); } }
.bukti-lihat img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.bukti-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bukti-pilih { flex: 1; min-width: 200px; position: relative; margin: 0; cursor: pointer; }
.bukti-pilih input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bukti-pilih span { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #e4dccb; background: #fff; color: #4b2bb8; font-weight: 700; font-size: .88rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: border-color .2s; }
.bukti-pilih:hover span { border-color: #7b2fd0; }
.bukti-pilih.ada span { color: #1b6b3a; border-color: #2f9e44; }
.bukti-form .btn { height: 46px; gap: 6px; }
.bukti-catatan { display: block; margin-top: 8px; color: #a0a5bf; font-size: .74rem; }
.ps-perlu-bukti { display: inline-block; margin-top: 3px; font-style: normal; font-size: .7rem; font-weight: 800; color: #b36b00; }
/* pita pengingat */
.pita-bukti { position: relative; z-index: 40; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; font-size: .9rem; color: #4a3200;
    background: linear-gradient(90deg, #ffe08a, #ffd25e, #ffe08a) 0 0 / 200% 100%; animation: cta-alir 8s linear infinite; }
.pita-bukti-ikon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; color: #fff; background: #e9a100; animation: bukti-denyut 1.8s ease-out infinite; }
.pita-bukti-tombol { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 800; color: #fff; text-decoration: none; background: #141a33; transition: transform .2s; }
.pita-bukti-tombol:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pita-bukti, .pita-bukti-ikon, .bukti-ikon.wajib { animation: none; } }

/* =====================================================================
   LACAK PESANAN: langkah status (diperbaiki) + latar panel
   ===================================================================== */
.lk-langkah { margin: 18px 0 18px; padding: 22px 10px 16px; border-radius: 20px;
    background: radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #f6f1ff 55%, #eef2ff 100%);
    border: 1px solid rgba(123, 47, 208, .12); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(29, 63, 160, .06); }
.lk-langkah::before, .lk-langkah::after { top: 48px; height: 4px; }
.lk-langkah::before { left: calc(16.66% + 30px); right: calc(16.66% + 30px); background: repeating-linear-gradient(90deg, #ddd6ee 0 8px, transparent 8px 14px); }
.lk-langkah::after { left: calc(16.66% + 30px); width: calc((66.66% - 60px) * var(--isi)); background: linear-gradient(90deg, #e70498, #7b2fd0, #1d3fa0) 0 0 / 200% 100%;
    animation: lk-isi 1.1s cubic-bezier(.6, 0, .2, 1) .3s both, cta-alir 3s linear 1.4s infinite; box-shadow: 0 0 10px rgba(123, 47, 208, .35); }
.lk-langkah li { gap: 10px; font-size: .84rem; }
.lk-langkah li span { position: relative; width: 52px; height: 52px; border: 0; color: #a39cc0; background: #fff;
    box-shadow: 0 0 0 2px #e4def2 inset, 0 6px 14px rgba(20, 26, 51, .06); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.lk-langkah li:hover span { transform: translateY(-3px) scale(1.05); }
.lk-langkah li.lewat span, .lk-langkah li.kini span { color: #fff; background: linear-gradient(135deg, #e70498, #7b2fd0 55%, #1d3fa0) border-box; background-origin: border-box;
    box-shadow: 0 10px 22px rgba(123, 47, 208, .32); }
/* langkah saat ini: cincin putus-putus berputar (pengganti lingkaran pink tebal) */
.lk-langkah li.kini span { animation: dp-pop .6s cubic-bezier(.3, 1.5, .5, 1) both !important; animation-delay: calc(.3s + var(--k) * .4s) !important; }
.lk-langkah li.kini span::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed rgba(123, 47, 208, .55); animation: lk-putar 6s linear infinite; }
.lk-langkah li.kini span::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(123, 47, 208, .35); animation: lk-gelombang 2.2s ease-out 1.2s infinite; }
@keyframes lk-putar { to { transform: rotate(360deg); } }
@keyframes lk-gelombang { to { box-shadow: 0 0 0 12px rgba(123, 47, 208, 0); } }
.lk-langkah li.kini .ikon { animation: lk-ikon 2.4s ease-in-out infinite; }
@keyframes lk-ikon { 50% { transform: rotate(-12deg) scale(1.08); } }
/* langkah selesai: lencana centang hijau */
.lk-langkah li.lewat span::after { content: '\2713'; position: absolute; right: -3px; bottom: -3px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    font-size: .7rem; font-weight: 800; color: #fff; background: #2f9e44; box-shadow: 0 0 0 2px #fff; }
.lk-langkah li.kini { color: #4b2bb8; }
.lk-langkah li:not(.lewat):not(.kini) { color: #a39cc0; }
@media (max-width: 520px) {
    .lk-langkah li span { width: 44px; height: 44px; }
    .lk-langkah::before, .lk-langkah::after { top: 44px; left: calc(16.66% + 26px); }
    .lk-langkah::before { right: calc(16.66% + 26px); }
    .lk-langkah::after { width: calc((66.66% - 52px) * var(--isi)); }
    .lk-langkah li { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) { .lk-langkah li.kini span::before, .lk-langkah li.kini span::after, .lk-langkah li.kini .ikon { animation: none !important; } }
.lk-langkah::after { background: linear-gradient(90deg, #e70498, #7b2fd0, #1d3fa0, #7b2fd0, #e70498) 0 0 / 200% 100%; }

/* Jumlah: hanya tombol − dan +, tanpa panah bawaan browser */
.qty input[type=number], .ci-qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qty input[type=number]::-webkit-outer-spin-button, .qty input[type=number]::-webkit-inner-spin-button,
.ci-qty input[type=number]::-webkit-outer-spin-button, .ci-qty input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.detail-panggung .qty { display: inline-flex; align-items: center; padding: 3px; gap: 2px; background: rgba(255, 255, 255, .08); }
.detail-panggung .qty button { width: 38px; height: 38px; border-radius: 50%; font-size: 1.2rem; font-weight: 700; line-height: 1; background: rgba(255, 255, 255, .12) !important;
    transition: background .2s, transform .2s; }
.detail-panggung .qty button:hover { background: var(--gradien-utama) !important; transform: scale(1.06); }
.detail-panggung .qty button:active { transform: scale(.92); }
.detail-panggung .qty input { width: 52px; height: 38px; padding: 0; text-align: center; font-size: 1.05rem; background: transparent !important; }

/* Detail produk: panggung foto tetap, bingkai foto menyesuaikan di tengahnya */
.dp-stage { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; }
.dp-stage .detail-img { flex: 0 0 auto; max-width: 100%; margin: 0 auto;
    transition: height .65s cubic-bezier(.65, 0, .35, 1), width .65s cubic-bezier(.65, 0, .35, 1), box-shadow .35s; }
.dp-stage + .slide-thumb { margin-top: 14px; }
/* Detail produk: stok per rasa di tombol rasa */
.pilihan-varian .varian-stok { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: rgba(255, 255, 255, .16); }
.pilihan-varian label.varian-habis { cursor: not-allowed; }
.pilihan-varian label.varian-habis span { opacity: .45; text-decoration: line-through; }
.co-bayar:has(label:nth-of-type(2):last-of-type) { grid-template-columns: 1fr 1fr; }

/* Checkout: info pembayaran via WhatsApp (teks biasa, bukan nomor rekening) */
.co-bayar-wa p { font-family: inherit; font-size: .9rem; line-height: 1.55; letter-spacing: normal; }