/**
 * Beranda publik NOVA — gaya kampanye parfum mewah.
 *
 * ‼️ Berkas CSS TERPISAH (bukan <style> di dalam Blade) karena halaman ini
 * panjang dan gayanya banyak; ditaruh di public/css/ mengikuti pola
 * public/js/ yang sudah dipakai NOVA Auto Market Engine — proyek ini TIDAK
 * memakai Vite (public/build tidak pernah dibangun), jadi berkas statis
 * adalah satu-satunya cara yang benar-benar jalan di server.
 *
 * ‼️ SEMUA animasi hanya memakai `transform` dan `opacity` supaya ditangani
 * GPU. Tidak ada animasi pada top/left/width/height — itu memaksa layout
 * dihitung ulang tiap frame dan membuat HP panas.
 */

:root {
    --nova-ivory: #fdfbf7;
    --nova-cream: #f7f1e8;
    --nova-champagne: #efe3d2;
    --nova-gold: #b8934f;
    --nova-gold-soft: #c9a86a;
    --nova-ink: #14110d;
    --nova-charcoal: #4a443b;
    --nova-muted: #8c8377;
    --nova-line: rgba(184, 147, 79, 0.22);

    --nova-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --nova-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.nova-beranda {
    margin: 0;
    background: var(--nova-ivory);
    color: var(--nova-ink);
    font-family: var(--nova-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

.nova-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
}

/* ================================================================ HEADER */
.nova-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: 18px 0;
    background: rgba(253, 251, 247, 0);
    backdrop-filter: blur(0px);
    transition: background .5s ease, backdrop-filter .5s ease, box-shadow .5s ease, padding .5s ease;
}
.nova-header.is-menempel {
    background: rgba(253, 251, 247, 0.86);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--nova-line);
    padding: 12px 0;
}
.nova-header-isi { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.nova-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nova-logo img { height: 26px; width: auto; display: block; }

.nova-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.nova-nav a {
    position: relative;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nova-charcoal);
    text-decoration: none;
    padding: 6px 0;
    transition: color .35s ease;
}
.nova-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--nova-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.nova-nav a:hover { color: var(--nova-gold); }
.nova-nav a:hover::after, .nova-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nova-nav a.aktif { color: var(--nova-gold); }
.nova-nav a.aktif::after { transform: scaleX(1); }

.nova-aksi { display: flex; align-items: center; gap: 14px; }
.nova-ikon-tombol {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--nova-line);
    background: transparent; color: var(--nova-charcoal);
    cursor: pointer; text-decoration: none;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.nova-ikon-tombol:hover { background: var(--nova-ink); color: var(--nova-ivory); border-color: var(--nova-ink); transform: translateY(-1px); }
.nova-menu-tombol { display: none; }

/* ================================================================== HERO */
.nova-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 132px 0 72px;
    overflow: hidden;
    background:
        radial-gradient(120% 82% at 78% 18%, rgba(239, 227, 210, .75) 0%, rgba(253, 251, 247, 0) 62%),
        radial-gradient(90% 70% at 12% 88%, rgba(247, 241, 232, .9) 0%, rgba(253, 251, 247, 0) 60%),
        var(--nova-ivory);
}
/* ---------- Latar VIDEO (HANYA layar lebar) ----------
 *
 * ‼️ ATURAN YANG TIDAK BOLEH DILANGGAR: video ini TIDAK PERNAH tampil di
 * HP. Keputusan owner 10 Agu 2026 — tampilan HP tetap memakai rancangan
 * yang sekarang (botol + bunga bergerak), tidak diubah sama sekali.
 *
 * Penyembunyian lewat CSS saja TIDAK CUKUP: `display:none` tetap membuat
 * sebagian peramban mengunduh videonya (21 MB!) di jaringan seluler.
 * Karena itu alamat berkasnya baru dipasang oleh JavaScript setelah lebar
 * layar terbukti >= 1024px — lihat beranda-nova.js. CSS di bawah ini
 * lapis pengaman KEDUA, bukan satu-satunya.
 */
/*
 * ‼️ `cover` — video memenuhi layar penuh, tanpa bilah kosong di kiri-kanan.
 *
 * Catatan 10 Agu 2026: sempat diubah ke `contain` supaya botolnya tidak
 * terasa besar (videonya 1280×720 dipaksa menutup layar yang lebih lebar,
 * jadi ter-zoom ±1,5×), TAPI owner lebih memilih tampilan penuh dan minta
 * dikembalikan. Jadi kalau suatu saat botol terasa besar lagi: itu memang
 * konsekuensi `cover`, dan perbesarannya ditentukan LEBAR layar — jangan
 * buang waktu memendekkan hero, itu tidak mengubah apa pun kecuali seberapa
 * banyak bagian atas-bawah yang terpotong.
 */
.nova-hero-video {
    display: none;
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .nova-hero-video { display: block; }

    /* Botol & bunga TIDAK dipakai di layar lebar — semuanya sudah ada di
       dalam videonya sendiri, dan menumpuknya justru jadi dobel. */
    .nova-hero-video-aktif .nova-panggung { display: none; }

    /* Tanpa panggung, teksnya tidak boleh melar selebar layar — dijaga
       tetap di kolom kiri supaya botol di dalam video tidak tertutup. */
    .nova-hero-video-aktif .nova-hero-grid {
        grid-template-columns: minmax(0, 46%) 1fr;
    }

    /* Latar gradien bawaan hero dimatikan supaya videonya benar-benar
       terlihat, bukan tertutup lapisan krem. */
    .nova-hero-video-aktif { background: var(--nova-ivory); }
}

/*
 * ‼️ Dua baris, bukan satu: baris pertama teks, baris kedua tombol — dan
 * panggung produk membentang di KEDUA baris pada kolom kanan. Disusun
 * dengan grid-template-areas supaya di layar kecil urutannya tinggal
 * ditulis ulang jadi TEKS → BOTOL → TOMBOL tanpa mengubah HTML-nya.
 */
.nova-hero-grid {
    position: relative; z-index: 4;
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    grid-template-areas:
        "teks panggung"
        "cta  panggung";
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: clamp(20px, 3vw, 34px) clamp(28px, 5vw, 72px);
    width: 100%;
}
.nova-hero-teks { grid-area: teks; align-self: end; }
.nova-panggung { grid-area: panggung; }
.nova-cta-baris { grid-area: cta; align-self: start; }

.nova-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
    color: var(--nova-gold);
}
.nova-eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--nova-gold); display: block; }

.nova-judul {
    font-family: var(--nova-serif);
    font-weight: 300;
    font-size: clamp(40px, 6.4vw, 90px);
    line-height: .98;
    letter-spacing: -.015em;
    margin: 22px 0 0;
    color: var(--nova-ink);
}
.nova-judul em { font-style: italic; color: var(--nova-gold); }

.nova-teks {
    max-width: 40ch;
    margin: 26px 0 0;
    font-size: clamp(14px, 1.15vw, 15.5px);
    line-height: 1.85;
    color: var(--nova-charcoal);
}
.nova-teks-kecil {
    margin: 14px 0 0;
    font-family: var(--nova-serif);
    font-style: italic;
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--nova-muted);
}

.nova-cta-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 38px; }

.nova-tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 34px;
    border: 1px solid var(--nova-ink);
    background: var(--nova-ink);
    color: var(--nova-ivory);
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    position: relative; overflow: hidden;
    transition: color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.nova-tombol::before {
    content: ''; position: absolute; inset: 0;
    background: var(--nova-gold);
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.nova-tombol span { position: relative; z-index: 1; }
.nova-tombol:hover { border-color: var(--nova-gold); transform: translateY(-2px); }
.nova-tombol:hover::before { transform: translateY(0); }

.nova-tombol-garis {
    display: inline-flex; align-items: center; gap: 12px;
    background: none; border: 0; padding: 8px 0; cursor: pointer;
    font-family: var(--nova-sans);
    font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--nova-charcoal); text-decoration: none;
    transition: color .35s ease;
}
.nova-tombol-garis .lingkar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--nova-line);
    transition: border-color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.nova-tombol-garis:hover { color: var(--nova-gold); }
.nova-tombol-garis:hover .lingkar { border-color: var(--nova-gold); transform: scale(1.08); background: rgba(184,147,79,.08); }

/* ---------- Panggung produk (botol + bunga + kelopak) ---------- */
.nova-panggung {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: clamp(380px, 56vh, 620px);
}

.nova-cahaya {
    position: absolute; z-index: 1;
    width: 78%; aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(239,227,210,.95) 0%, rgba(247,241,232,.5) 45%, rgba(253,251,247,0) 72%);
    animation: nova-bernapas 9s ease-in-out infinite;
}

.nova-cincin {
    position: absolute; z-index: 1;
    width: min(62%, 400px); aspect-ratio: 1;
    border: 1px solid var(--nova-line);
    border-radius: 999px;
    animation: nova-berputar-pelan 46s linear infinite;
}
.nova-cincin::after {
    content: ''; position: absolute; top: -3px; left: 50%;
    width: 5px; height: 5px; border-radius: 999px;
    background: var(--nova-gold-soft); transform: translateX(-50%);
}

/* Botol — TITIK FOKUS. Foto produk NOVA yang SUNGGUHAN.
   ‼️ TANPA mix-blend-mode: berkas aslinya (Downloads/nova.png) MEMANG sudah
   tembus pandang, jadi tidak perlu diakali sama sekali. Memberi `multiply`
   di sini justru menggelapkan emasnya tanpa alasan. */
.nova-botol {
    position: relative; z-index: 5;
    width: clamp(210px, 26vw, 330px);
    height: auto; display: block;
    filter: drop-shadow(0 40px 44px rgba(20, 17, 13, .22));
    animation: nova-melayang 8s ease-in-out infinite;
    will-change: transform;
}

/* ---------- Bunga & tangkai: FOTO bunga asli kiriman owner ----------
   ‼️ TANPA mix-blend-mode. Berkas bunga di Downloads/bunga/ MEMANG sudah
   tembus pandang (sudah diperiksa kanal alpha-nya: sudut-sudutnya kosong,
   40–83% pikselnya transparan). Versi sebelumnya memakai potongan dari
   gambar acuan yang masih berlatar putih sehingga butuh `multiply` — itu
   sudah tidak berlaku lagi, dan kalau dipaksakan justru menggelapkan
   kelopaknya.

   Ukuran & letaknya mengikuti perbandingan pada gambar acuan owner:
   bunga atas ≈ 1,27× lebar botol, bunga bawah ≈ 1,22×, tangkai ≈ 0,8×. */
.nova-bunga {
    position: absolute; pointer-events: none;
    height: auto; display: block;
    will-change: transform;
}
.nova-bunga-1 {
    z-index: 2; width: clamp(266px, 33vw, 418px); top: -8%; right: -20%;
    animation: nova-bunga-a 10s ease-in-out infinite;
}
/* Bunga bawah sengaja DI DEPAN botol — memberi kedalaman, seperti pada acuan. */
.nova-bunga-2 {
    z-index: 6; width: clamp(256px, 32vw, 400px); bottom: -4%; right: -22%;
    animation: nova-bunga-b 12s ease-in-out infinite;
}
.nova-daun-1 {
    z-index: 2; width: clamp(168px, 21vw, 264px); top: 12%; left: -16%;
    animation: nova-daun 9s ease-in-out infinite;
}

.nova-kelopak {
    position: absolute; z-index: 7; pointer-events: none;
    height: auto; display: block;
    will-change: transform;
}
.nova-kelopak-1 { width: clamp(43px, 5.4vw, 68px); top: 6%;   left: 2%;  animation: nova-kelopak-a 13s ease-in-out infinite; }
.nova-kelopak-2 { width: clamp(30px, 3.8vw, 48px); top: 54%;  left: -6%; animation: nova-kelopak-b 15s ease-in-out infinite; animation-delay: -3s; }
.nova-kelopak-3 { width: clamp(36px, 4.6vw, 58px); bottom: 6%; left: 14%; animation: nova-kelopak-a 11s ease-in-out infinite; animation-delay: -6s; }
.nova-kelopak-4 { width: clamp(26px, 3.2vw, 40px); top: -2%;  left: 36%; animation: nova-kelopak-b 14s ease-in-out infinite; animation-delay: -9s; }

.nova-debu { position: absolute; z-index: 3; border-radius: 999px; background: var(--nova-gold-soft); pointer-events: none; }
.nova-debu-1 { width: 4px; height: 4px; top: 28%; left: 30%; opacity: .5; animation: nova-debu-a 7s ease-in-out infinite; }
.nova-debu-2 { width: 3px; height: 3px; top: 52%; right: 24%; opacity: .42; animation: nova-debu-b 9s ease-in-out infinite; animation-delay: -2s; }
.nova-debu-3 { width: 5px; height: 5px; bottom: 26%; left: 18%; opacity: .34; animation: nova-debu-a 11s ease-in-out infinite; animation-delay: -5s; }
.nova-debu-4 { width: 3px; height: 3px; top: 14%; right: 34%; opacity: .46; animation: nova-debu-b 8s ease-in-out infinite; animation-delay: -4s; }
.nova-debu-5 { width: 4px; height: 4px; bottom: 40%; right: 8%; opacity: .3; animation: nova-debu-a 12s ease-in-out infinite; animation-delay: -7s; }

/* ---------- Penunjuk gulir ---------- */
.nova-gulir {
    position: absolute; z-index: 6; left: 50%; bottom: 26px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
    color: var(--nova-muted); text-decoration: none;
}
.nova-gulir-garis { width: 1px; height: 46px; background: linear-gradient(var(--nova-gold), transparent); position: relative; overflow: hidden; }
.nova-gulir-garis::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%;
    background: var(--nova-ink); animation: nova-gulir-turun 2.6s ease-in-out infinite;
}

/* ============================================================= KOLEKSI */
.nova-bagian { padding: clamp(72px, 11vw, 148px) 0; }
.nova-bagian-krem { background: linear-gradient(180deg, var(--nova-ivory), var(--nova-cream) 55%, var(--nova-ivory)); }

.nova-kepala { text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 6vw, 76px); }
.nova-kepala .nova-eyebrow { justify-content: center; }
.nova-kepala .nova-eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--nova-gold); display: block; }
.nova-judul-bagian {
    font-family: var(--nova-serif); font-weight: 300;
    font-size: clamp(30px, 4.1vw, 58px); line-height: 1.08; letter-spacing: -.01em;
    margin: 18px 0 0;
}
.nova-judul-bagian em { font-style: italic; color: var(--nova-gold); }

/* ‼️ `auto-fit` — jumlah kolomnya mengikuti berapa produk yang aktif.
   Dulu dipatok 3 kolom; begitu owner minta SEMUA produk tampil (bisa 5+),
   kartunya jadi gepeng dan barisnya timpang. */
.nova-kartu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
}

.nova-kartu {
    position: relative; display: block; text-decoration: none; color: inherit;
    background: var(--nova-ivory);
    border: 1px solid var(--nova-line);
    overflow: hidden;
    transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease, border-color .6s ease;
}
.nova-kartu:hover,
.nova-kartu:focus-within { transform: translateY(-8px); box-shadow: 0 38px 70px -44px rgba(20,17,13,.5); border-color: rgba(184,147,79,.5); }
/* Kartu bisa difokus lewat papan ketik — panelnya ikut terbuka. */
.nova-kartu:focus-visible { outline: 2px solid var(--nova-gold); outline-offset: 3px; }

.nova-kartu-gambar { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--nova-cream); }
.nova-kartu-gambar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.nova-kartu:hover .nova-kartu-gambar img { transform: scale(1.055); }

.nova-kartu-nomor {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    font-family: var(--nova-serif); font-size: 26px; font-style: italic;
    color: var(--nova-gold);
    text-shadow: 0 1px 10px rgba(253,251,247,.9);
}

.nova-kartu-lencana {
    position: absolute; top: 16px; right: 16px; z-index: 3;
    border-radius: 999px; padding: 4px 12px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--nova-ink); background: var(--nova-gold-soft);
    box-shadow: 0 6px 16px -8px rgba(20,17,13,.6);
}

/* ---------- Panel yang menyembul (product reveal) ---------- */
.nova-kartu-panel {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
    padding: 22px 22px 24px;
    background: linear-gradient(to top, rgba(20,17,13,.95) 0%, rgba(20,17,13,.86) 62%, rgba(20,17,13,0) 100%);
    color: var(--nova-ivory);
    transform: translateY(101%);
    opacity: 0;
    transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.nova-kartu:hover .nova-kartu-panel,
.nova-kartu:focus-within .nova-kartu-panel,
.nova-kartu:focus-visible .nova-kartu-panel { transform: translateY(0); opacity: 1; }

.nova-panel-ket { margin: 0; font-size: 12.5px; line-height: 1.7; color: rgba(253,251,247,.85); }
.nova-panel-ciri {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 13px 0 0; padding: 0; list-style: none;
}
.nova-panel-ciri li {
    border-radius: 999px; padding: 3px 10px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(253,251,247,.82);
    border: 1px solid rgba(201,168,106,.4);
}
.nova-panel-tombol {
    display: block; margin-top: 16px; padding: 11px 18px;
    text-align: center; text-decoration: none;
    background: var(--nova-gold); color: var(--nova-ink);
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    transition: background .35s ease, transform .35s ease;
}
.nova-panel-tombol:hover { background: var(--nova-gold-soft); transform: translateY(-1px); }
.nova-panel-daftar {
    display: block; margin-top: 9px; text-align: center; text-decoration: none;
    font-size: 10.5px; color: rgba(253,251,247,.7);
}
.nova-panel-daftar:hover { color: var(--nova-gold-soft); text-decoration: underline; }

.nova-kartu-isi { padding: 22px 24px 26px; }
.nova-kartu-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nova-kartu-nama {
    font-family: var(--nova-serif); font-weight: 400;
    font-size: clamp(21px, 2vw, 27px); line-height: 1.15; margin: 0;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.nova-kartu:hover .nova-kartu-nama { transform: translateX(5px); }
.nova-kartu-bintang { display: inline-flex; gap: 1.5px; color: var(--nova-gold); flex-shrink: 0; }
.nova-kartu-nada {
    margin: 10px 0 0; font-size: 10.5px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--nova-gold);
}
.nova-kartu-harga {
    margin: 14px 0 0; font-family: var(--nova-serif);
    font-size: 22px; font-weight: 500; color: var(--nova-ink);
}

/* ============================================================== CERITA */
.nova-cerita { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.nova-cerita-gambar { position: relative; isolation: isolate; }
.nova-cerita-gambar img {
    position: relative; z-index: 1; width: 100%; height: auto; display: block;
}

/*
 * ‼️ Animasi "keluar" gambar produk — TIRAI yang menyingkap dari bawah,
 * lalu botolnya melayang tenang. Bukan sekadar fade: gambar produk mahal
 * pantas muncul seperti dibuka penutupnya, bukan seperti gambar biasa yang
 * telat dimuat. Tetap ringan (transform + opacity saja, GPU-friendly).
 */
.nova-cerita-gambar { overflow: hidden; }
.nova-cerita-gambar img {
    clip-path: inset(0 0 100% 0);
    transform: translateY(34px) scale(1.04);
    opacity: 0;
    transition:
        clip-path 1.5s cubic-bezier(.16,.84,.28,1),
        transform 1.6s cubic-bezier(.16,.84,.28,1),
        opacity 1s ease;
}
.nova-cerita-gambar.tampil img {
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
    opacity: 1;
}
/* Setelah tersingkap, botolnya bernapas pelan — hidup, bukan diam kaku. */
.nova-cerita-gambar.tampil img { animation: nova-produk-melayang 9s ease-in-out 1.7s infinite; }

@keyframes nova-produk-melayang {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-13px) rotate(-.7deg); }
}
/*
 * ‼️ z-index 0 (BUKAN -1). Dengan -1 bingkainya jatuh ke belakang latar
 * halaman dan hilang sama sekali — `isolation: isolate` di induknya
 * memastikan keduanya bertumpuk di dalam kartu ini saja.
 */
/* ‼️ .nova-cerita-bingkai (garis hias di belakang gambar produk) DIHAPUS
   10 Agu 2026 — owner menilainya mengganggu. Jangan dikembalikan. */

.nova-nilai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.nova-nilai h3 {
    font-family: var(--nova-serif); font-size: 30px; font-weight: 400; margin: 0; color: var(--nova-gold);
}
.nova-nilai p { margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nova-muted); }

/* ================================================== HALAMAN ISI (BUKAN HERO) */
/*
 * Header posisinya fixed, jadi halaman tanpa hero WAJIB diberi jarak atas —
 * kalau tidak, judulnya tertutup header dan tidak ada yang menyadarinya
 * sampai ada yang membuka halamannya.
 */
.nova-halaman {
    padding: clamp(112px, 15vh, 168px) 0 clamp(56px, 8vw, 96px);
    background:
        radial-gradient(90% 60% at 82% 0%, rgba(239, 227, 210, .5) 0%, rgba(253, 251, 247, 0) 60%),
        var(--nova-ivory);
}
.nova-halaman-kepala { max-width: 760px; }
.nova-halaman-judul {
    font-family: var(--nova-serif); font-weight: 300;
    font-size: clamp(34px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.015em;
    margin: 18px 0 0;
}
.nova-halaman-judul em { font-style: italic; color: var(--nova-gold); }
.nova-halaman-intro {
    margin: 22px 0 0; max-width: 62ch;
    font-size: clamp(14px, 1.15vw, 15.5px); line-height: 1.9; color: var(--nova-charcoal);
}

/* ---------- Naskah panjang (privasi, syarat) ---------- */
.nova-naskah { max-width: 76ch; margin-top: clamp(34px, 5vw, 56px); }
.nova-naskah h2 {
    font-family: var(--nova-serif); font-weight: 400;
    font-size: clamp(22px, 2.6vw, 31px); line-height: 1.25;
    margin: 46px 0 0; color: var(--nova-ink);
}
.nova-naskah h2:first-child { margin-top: 0; }
.nova-naskah h3 {
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin: 30px 0 0; color: var(--nova-gold);
}
.nova-naskah p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--nova-charcoal); }
.nova-naskah ul { margin: 14px 0 0; padding-left: 20px; }
.nova-naskah li { margin: 9px 0 0; font-size: 14.5px; line-height: 1.9; color: var(--nova-charcoal); }
.nova-naskah li::marker { color: var(--nova-gold); }
.nova-naskah a { color: var(--nova-gold); }

.nova-naskah-tanggal {
    display: inline-block; margin-top: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--nova-muted);
}

.nova-kotak-catatan {
    margin-top: 40px; padding: 22px 24px;
    border: 1px solid var(--nova-line); border-radius: 2px;
    background: linear-gradient(135deg, rgba(247,241,232,.75), rgba(253,251,247,.75));
}
.nova-kotak-catatan p { margin: 0; font-size: 13.5px; line-height: 1.85; }

/* ========================================================== TESTIMONI */
.nova-testi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 28px);
    margin-top: clamp(34px, 5vw, 54px);
}
.nova-testi {
    display: flex; flex-direction: column;
    padding: 30px 28px 26px;
    background: var(--nova-ivory);
    border: 1px solid var(--nova-line);
    transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease;
}
.nova-testi:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -46px rgba(20,17,13,.45); }
.nova-testi-kutip {
    font-family: var(--nova-serif); font-size: 44px; line-height: 1;
    color: var(--nova-gold); opacity: .5;
}
.nova-testi-isi {
    margin: 8px 0 0; flex: 1;
    font-family: var(--nova-serif); font-size: 19px; font-style: italic;
    line-height: 1.6; color: var(--nova-ink);
}
/* ‼️ Foto DI SAMPING nama & kota (permintaan owner 10 Agu 2026). */
.nova-testi-kaki {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nova-line);
    display: flex; align-items: center; gap: 12px;
}
.nova-testi-foto {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px; overflow: hidden;
    background: var(--nova-cream);
    border: 1px solid var(--nova-line);
    font-family: var(--nova-serif); font-size: 18px; color: var(--nova-gold);
}
.nova-testi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nova-testi-orang { min-width: 0; }
.nova-testi-nama { display: block; margin: 0; font-size: 13px; font-weight: 700; color: var(--nova-ink); }
.nova-testi-asal { display: block; margin: 3px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nova-muted); }
.nova-bintang { display: flex; gap: 3px; margin-bottom: 12px; color: var(--nova-gold); }

.nova-kosong {
    margin-top: 34px; padding: clamp(38px, 6vw, 64px) 28px;
    text-align: center; border: 1px dashed var(--nova-line);
    background: rgba(247,241,232,.5);
}
.nova-kosong p { margin: 0; color: var(--nova-muted); font-size: 14px; line-height: 1.85; }

/* Angka penilaian produk sungguhan */
.nova-nilai-produk { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); margin-top: clamp(30px, 4vw, 46px); }
.nova-nilai-produk > div { padding: 24px; border: 1px solid var(--nova-line); background: var(--nova-ivory); }
.nova-nilai-produk .nama { margin: 0; font-family: var(--nova-serif); font-size: 23px; }
.nova-nilai-produk .angka { margin: 10px 0 0; font-size: 30px; font-weight: 300; font-family: var(--nova-serif); color: var(--nova-gold); }
.nova-nilai-produk .ket { margin: 4px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nova-muted); }

/* ============================================================== FOOTER */
.nova-footer { background: var(--nova-ink); color: rgba(253,251,247,.72); padding: clamp(48px, 7vw, 84px) 0 34px; }
.nova-footer img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .92; }

/*
 * ‼️ TIGA KOLOM: Kontak — Merek (di tengah) — Tautan.
 *
 * Susunan sebelumnya (blok merek lebar di kiri + tiga kolom tautan mepet di
 * kanan) dinilai owner "jelek sekali": berat sebelah, dan logonya tenggelam
 * di pojok. Sekarang logo berdiri di TENGAH sebagai jangkar, diapit kontak
 * dan tautan yang bobotnya seimbang.
 */
/*
 * ‼️ Tiga kolom dengan lebar SAMA (1fr) dan jarak tetap. Versi sebelumnya
 * memakai `1fr auto 1fr` — kolom tengah boleh selebar isinya, sehingga
 * kolom kiri & kanan sisa lebarnya berubah-ubah dan tata letaknya terasa
 * miring. Sekarang tidak bisa meleset lagi.
 */
.nova-footer-atas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.nova-footer-judul {
    margin: 0 0 20px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--nova-gold);
}

/* ---------- Kolom kiri: kontak ---------- */
.nova-footer-kontak ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.nova-footer-kontak li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 13px; line-height: 1.65; color: rgba(253,251,247,.72);
}
.nova-footer-kontak svg { flex-shrink: 0; margin-top: 3px; color: var(--nova-gold); }
.nova-footer-kontak a { color: inherit; text-decoration: none; transition: color .3s ease; }
.nova-footer-kontak a:hover { color: #fdfbf7; }

/* ---------- Kolom tengah: merek ---------- */
.nova-footer-merek { text-align: center; }
.nova-footer-merek p {
    margin: 18px auto 0; max-width: 32ch;
    font-size: 13px; line-height: 1.9; color: rgba(253,251,247,.62);
}
.nova-footer-garis {
    display: block; width: 54px; height: 1px; margin: 22px auto 0;
    background: linear-gradient(90deg, transparent, var(--nova-gold), transparent);
}

/* ---------- Kolom kanan: tautan ---------- */
/* ‼️ Tautannya anak LANGSUNG dari .nova-footer-kolom (yang sendiri sudah
   sebuah <nav>) — bukan dibungkus <nav> lagi di dalamnya. Pembungkus
   ganda itulah yang dulu membuat judul dan daftarnya berjajar aneh. */
.nova-footer-kolom { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 13px; }
.nova-footer-kolom .nova-footer-judul { margin-bottom: 7px; }
.nova-footer-kolom a {
    font-size: 13px; font-weight: 500; white-space: nowrap;
    color: rgba(253,251,247,.72); text-decoration: none;
    transition: color .3s ease, transform .3s ease;
}
.nova-footer-kolom a:hover { color: #fdfbf7; transform: translateX(-3px); }

/* ---------- Baris menu mendatar ---------- */
.nova-footer-menu {
    margin-top: clamp(40px, 6vw, 66px);
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(20px, 4vw, 52px);
}
.nova-footer-menu a {
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(253,251,247,.78); text-decoration: none;
    transition: color .3s ease;
}
.nova-footer-menu a:hover { color: var(--nova-gold); }

.nova-footer-bawah {
    margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(253,251,247,.12);
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    font-size: 11px; color: rgba(253,251,247,.5);
}

/* ====================================================== ANIMASI MASUK */
.nova-muncul { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.nova-muncul.tampil { opacity: 1; transform: none; }

/* ---------- Teks hero: muncul BARIS DEMI BARIS ----------
 *
 * ‼️ Judulnya disingkap per baris memakai tirai (clip-path), bukan sekadar
 * digeser naik. Itulah cara halaman merek mahal memperkenalkan diri: baris
 * pertama dulu, baru baris kedua menyusul sepersekian detik kemudian.
 *
 * `overflow: hidden` pada pembungkusnya WAJIB — tanpa itu bagian huruf yang
 * seharusnya masih tersembunyi tetap terlihat mengintip di atas garis.
 */
.nova-judul .baris {
    display: block;
    overflow: hidden;
}
.nova-judul .baris > span {
    display: block;
    transform: translateY(105%);
    opacity: 0;
    transition:
        transform 1.25s cubic-bezier(.16,.84,.28,1),
        opacity .9s ease;
}
.nova-muncul.tampil.nova-judul .baris > span { transform: translateY(0); opacity: 1; }
.nova-muncul.tampil.nova-judul .baris:nth-child(2) > span { transition-delay: .16s; }

/* Garis emas pada eyebrow ditarik dari nol — kesan "digambar". */
.nova-eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16,.84,.28,1) .1s; }
.nova-eyebrow.tampil::before { transform: scaleX(1); }

/* Paragraf & tombol naik lebih lembut daripada bawaan. */
.nova-teks.nova-muncul, .nova-teks-kecil.nova-muncul { transform: translateY(18px); }
.nova-cta-baris.nova-muncul { transform: translateY(22px); }

/* ============================================================ KEYFRAMES */
@keyframes nova-melayang {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    30%      { transform: translate3d(0, -9px, 0) rotate(.7deg); }
    62%      { transform: translate3d(0, -14px, 0) rotate(-.6deg); }
}
@keyframes nova-bernapas {
    0%, 100% { transform: scale(1); opacity: .95; }
    50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes nova-berputar-pelan {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes nova-bunga-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%      { transform: translate3d(-5px, -10px, 0) rotate(1.6deg) scale(1.015); }
}
@keyframes nova-bunga-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%      { transform: translate3d(6px, -8px, 0) rotate(-1.9deg) scale(1.02); }
}
@keyframes nova-daun {
    0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 0); }
    50%      { transform: rotate(2.4deg) translate3d(0, -6px, 0); }
}
@keyframes nova-kelopak-a {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .28; }
    25%  { opacity: .85; }
    50%  { transform: translate3d(-16px, -30px, 0) rotate(28deg); opacity: .7; }
    75%  { opacity: .5; }
    100% { transform: translate3d(4px, -62px, 0) rotate(58deg); opacity: 0; }
}
@keyframes nova-kelopak-b {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .22; }
    30%  { opacity: .75; }
    50%  { transform: translate3d(14px, -26px, 0) rotate(-24deg); opacity: .62; }
    100% { transform: translate3d(-6px, -58px, 0) rotate(-52deg); opacity: 0; }
}
@keyframes nova-debu-a {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: .18; }
    50%      { transform: translate3d(7px, -20px, 0); opacity: .6; }
}
@keyframes nova-debu-b {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: .22; }
    50%      { transform: translate3d(-9px, -15px, 0); opacity: .55; }
}
@keyframes nova-gulir-turun {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

/* =========================================================== RESPONSIF */
@media (max-width: 1023px) {
    .nova-nav { display: none; }
    .nova-menu-tombol { display: inline-flex; }
    /* Layar kecil: TEKS → BOTOL(+bunga) → TOMBOL. Botol tetap titik fokus. */
    .nova-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "teks" "panggung" "cta";
        text-align: center;
        gap: 10px;
    }
    .nova-hero { padding-top: 116px; }
    .nova-eyebrow, .nova-cta-baris { justify-content: center; }
    .nova-teks { margin-left: auto; margin-right: auto; }
    .nova-hero-teks, .nova-cta-baris { align-self: auto; }
    .nova-panggung { min-height: clamp(320px, 46vh, 460px); }

    /*
     * ‼️ HP: hiasan yang menjorok jauh ke luar dipangkas.
     *
     * Bunga & kelopak memakai offset negatif besar (right: -22% dst.) yang
     * dirancang untuk layar lebar. Di layar HP itu membuat pemandangannya
     * meluber sampai ke tepi dan terasa berantakan. Di sini dirapatkan,
     * dan panggungnya diberi `overflow: hidden` supaya benar-benar tidak
     * ada yang bisa menyembul keluar.
     */
    .nova-panggung { overflow: hidden; }
    .nova-bunga-1 { width: clamp(150px, 38vw, 230px); top: -2%; right: -8%; }
    .nova-bunga-2 { width: clamp(145px, 36vw, 220px); bottom: 2%; right: -9%; }
    .nova-daun-1 { width: clamp(88px, 22vw, 130px); top: 16%; left: -5%; }
    .nova-kelopak-1 { width: clamp(26px, 6vw, 38px); top: 8%; left: 6%; }
    .nova-kelopak-2 { width: clamp(20px, 4.6vw, 30px); top: 56%; left: 0%; }
    .nova-kelopak-3 { width: clamp(23px, 5.2vw, 34px); bottom: 8%; left: 16%; }
    .nova-kelopak-4 { display: none; }

    /* Judul hero: pastikan tidak pernah melebihi lebar layar. */
    .nova-judul { font-size: clamp(34px, 11vw, 56px); }
    .nova-teks { max-width: 34ch; }
    .nova-cerita { grid-template-columns: 1fr; }
    .nova-kartu-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .nova-testi-grid { grid-template-columns: 1fr; max-width: 520px; }
    .nova-nilai-produk { grid-template-columns: 1fr; max-width: 520px; }
    /* Footer: tiga kolom ditumpuk, merek naik ke atas sebagai kepala. */
    .nova-footer-atas { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .nova-footer-merek { order: -1; }
    .nova-footer-kontak ul { justify-items: center; }
    .nova-footer-kontak li { justify-content: center; text-align: left; }
    .nova-footer-kolom { align-items: center; text-align: center; }
    .nova-footer-kolom .nova-footer-judul { text-align: center; }
    .nova-footer-kolom nav { align-items: center; }
}

@media (max-width: 560px) {
    /* Tiga kolom tautan jadi dua — cukup lapang untuk jempol. */
    .nova-footer-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}

@media (max-width: 640px) {
    .nova-botol { width: clamp(190px, 56vw, 260px); }
    .nova-gulir { display: none; }
    .nova-nilai { gap: 14px; }
    .nova-nilai h3 { font-size: 23px; }
    .nova-nilai p { font-size: 9.5px; letter-spacing: .1em; }
    /* Sebagian hiasan disembunyikan di layar kecil supaya tetap ringan. */
    .nova-debu-3, .nova-debu-5, .nova-kelopak-4 { display: none; }
}

/* ============================================ HORMATI PREFERENSI GERAK */
/*
 * ‼️ Kalau pengguna meminta gerakan dikurangi (pengaturan sistem HP/komputer),
 * SEMUA gerakan berulang dimatikan — bukan sekadar diperlambat. Sebagian
 * orang benar-benar merasa pusing/mual karenanya.
 */
@media (prefers-reduced-motion: reduce) {
    .nova-beranda *,
    .nova-beranda *::before,
    .nova-beranda *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .nova-muncul { opacity: 1; transform: none; }
}