/* ─────────────────────────────────────────────
   Alovasia — shared design system
   Tokens, nav, footer, and common components
   used across all five pages (Home/Profile/News/Contact/Sale).
   ───────────────────────────────────────────── */

:root{
  --cream: #FAFAFA;   /* soft white page background — Alex requested moving off the tan/beige cream */
  --cream-2: #FFFFFF; /* pure white, one step lighter than --cream — panels/cards sitting on top */
  --forest: #1A2620;
  --forest-2: #1F3329;
  --gold: #A9813D;
  --gold-light: #C9A86A;
  --terracotta: #B9754A;
  --moss: #3B5C40;       /* warmer, lighter leaf-green — sampled from real @alovasia plant photos */
  --moss-light: #6E8F5E; /* sage highlight, pairs with --moss for photo-placeholder gradients */
  --moss-dark: #2A4430;  /* deeper moss — still green, not black, for bars needing more contrast (e.g. .cat-bar) */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;

  /* Warna latar plakat logo — SENGAJA token sendiri, bukan menumpang --moss-dark.
     Alasannya: --moss-dark juga dipakai bilah kategori (.cat-bar) di bawah hero,
     jadi kalau token itu yang diubah, bilah kategori ikut berubah tanpa diminta. */
  --logo-bg: #204a2a;

  /* ── Pola latar plakat logo (lihat aturan `.logo::before` untuk penjelasan penuh) ──
     GANTI POLA: cukup timpa berkas `background-pattern/logo_bg_pattern.webp`.
     Kalau ekstensinya berbeda (.png/.jpg/.svg), ubah baris --logo-pattern di bawah ini. */
  --logo-pattern: url("background-pattern/logo_bg_pattern.png?v=20260810b");
  --logo-pattern-size: 360px;     /* Angka dari Alex (2026-08-03). Berkas polanya 400×400 dan plakat
                                     cuma ~135px lebar, jadi di 360px yang tampil adalah SEPOTONG
                                     motif berukuran besar — bukan kisi rapat berulang. Itu memang
                                     tampilan yang dipilih; kalau mau kisinya terbaca berulang,
                                     turunkan ke sekitar 120px. */
  --logo-pattern-opacity: 0.4;    /* 0 = mati total, 1 = sekuat mungkin (angka dari Alex) */
  --logo-pattern-blend: overlay;  /* `overlay` menjaga hijau plakat tetap hidup.
                                     Alternatif: `soft-light` (lebih lembut),
                                     `normal` (pola menutup penuh, warna plakat hilang). */
  --logo-pattern-filter: none;    /* Penguat untuk pola yang TERLALU PUCAT (kontras rendah).
                                     Contoh: `brightness(0.52) contrast(8)`.
                                     Sampel sekarang tidak butuh ini karena berkasnya sudah
                                     direntangkan kontrasnya — biarkan `none` selama polanya
                                     sudah punya gelap-terang yang jelas. */
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--forest-2);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.divider{
  width: 60px;
  height: 2px;
  background: var(--gold);
}

.cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: var(--gold);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.cta svg{ width:16px; height:16px; }
.cta.secondary{
  background: transparent;
  color: var(--forest-2);
  border: 1.3px solid var(--forest-2);
}
.cta:disabled{ opacity:0.45; cursor:not-allowed; }

/* ── Nav (shared) ── */
.nav{
  position: relative;
  z-index: 3;
  /* 🐞 FIX (Alex 2026-08-07) — overlay menu mobile (`#nav-links.open`) kalah tumpuk
     dari foto carousel hero Beranda ("BERANDA" kebaca separuh di belakang foto).
     Root cause SEBENARNYA bukan z-index `#nav-links` itu sendiri (sempat dicoba
     dinaikkan ke 50, tidak ngaruh) — `#nav-links` posisinya `fixed`, tapi karena
     `.nav` ini sendiri sudah `position:relative` + `z-index` (baris di atas), `.nav`
     membentuk stacking context sendiri dan MENJEBAK `#nav-links` di dalamnya untuk
     urusan tumpuk-menumpuk (z-index anak cuma dibandingkan SESAMA anak `.nav`, tidak
     lolos ke level dokumen — gotcha CSS klasik: posisi `fixed` cuma bikin elemen lepas
     dari alur/containing-block, BUKAN dari stacking context leluhurnya).
     `.nav` sendiri (z-index:3) kebetulan SERI dengan `.hero-slide.pos-front` (z-index:3,
     index.html) yang jadi tetangganya di dalam `.hero-full` — kalau seri, giliran DOM
     yang menang, dan `.hero-inner` (isi carousel) ditulis SETELAH `.nav` di HTML → carousel
     menang. Fix: begitu menu lagi kebuka, naikkan z-index `.nav` ITU SENDIRI (bukan cuma
     anaknya) jauh di atas carousel — `:has()` supaya cuma aktif saat overlay benar-benar
     terbuka, tidak mengubah tumpukan nav dalam keadaan normal. */
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* Padding atas-bawah 0 (2026-08-03, angka diberikan Alex langsung lewat DevTools).
     Urutannya: 20px → 10px → 0.
     Catatan: tinggi nav sekarang murni ditentukan PLAKAT LOGO (137px, tersisa 71px
     setelah margin negatif −20/−46) — padding sudah tidak menyumbang apa pun lagi.
     Jadi kalau nanti diminta lebih pendek lagi, yang disetel HARUS plakatnya
     (`.logo` → tinggi `.logo-mark` atau margin-bottom negatifnya), bukan baris ini.
     Menu & ikon tetap di tengah karena `.nav` memakai align-items:center. */
  padding: 0px 56px 0px;
  max-width: 1680px;
  margin: 0 auto;
}
/* Bagian dari fix di atas — begitu overlay menu terbuka, `.nav` (bukan cuma `#nav-links`
   di dalamnya) dinaikkan jauh di atas z-index apa pun lain di situs ini (tertinggi
   berikutnya cuma 8, di luar lightbox foto di 200 yang sengaja tetap dibiarkan menang). */
.nav:has(#nav-links.open){ z-index: 60; }
/* Logo dibungkus "plakat" — kotak hijau bergaris emas yang menembus ke atas sampai
   tepi halaman dan menjorok ke bawah melewati bilah nav, seperti lencana.
   Margin negatif atas & bawah yang membuatnya keluar dari tinggi nav; nav sendiri
   tidak ikut membesar karena margin negatif tidak menambah tinggi baris. */
.logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-decoration:none;
  align-self: flex-start;
  position: relative;
  z-index: 4;
  background: var(--logo-bg);     /* #204a2a (2026-08-03, dari Alex) — token khusus plakat */
  border: 2px solid var(--gold);
  border-top: none;
  border-radius: 0 0 24px 24px;
  /* Padding atas: 12px → 26px → 16px (2026-08-03, angka terakhir diberikan Alex langsung). */
  padding: 16px 10px 18px;
  /* margin-top HARUS = minus padding-atas nav, supaya plakat menempel PERSIS di tepi
     halaman — tidak lebih, tidak kurang. Dulu -20px karena nav berpadding 20px;
     begitu padding nav jadi 0 (2026-08-03), -20px itu jadi kelebihan dan menyedot
     plakat 20px ke luar layar sampai gambar logonya ikut terpotong 8px.
     Sekarang 0 = menempel tepat. Kalau padding atas nav diubah lagi, angka ini
     WAJIB ikut disesuaikan (lihat juga override mobile di media query bawah). */
  margin-top: 0;
  /* Menjorok ke bawah keluar dari bilah nav. Angka ini yang menahan tinggi nav tetap 71px:
     tinggi plakat (151px) + margin-bottom (-80px) = 71px sisa yang dihitung baris nav.
     Rumusnya: margin-bottom = -(tinggi plakat - tinggi nav yang diinginkan). */
  margin-bottom: -80px;
  box-shadow: 0 14px 30px rgba(26,38,32,0.28);
  overflow: hidden;       /* pola tekstur ikut terpotong mengikuti sudut membulat */
}
/* ── Pola latar plakat logo ──────────────────────────────────────────────
   CARA GANTI POLA (tanpa menyentuh kode sama sekali):
   timpa berkas `background-pattern/logo_bg_pattern.webp` dengan pola baru,
   lalu muat ulang halaman. Selesai.

   Kalau pola barunya BUKAN .webp (misal .png/.jpg/.svg), cukup ubah SATU baris:
   `--logo-pattern` di blok `:root` bagian atas berkas ini.

   Tiga setelan lain juga ada di `:root` supaya tidak perlu mengubek aturan di sini:
     --logo-pattern-size    seberapa besar polanya diulang (mis. `auto`, `8px`, `120px auto`)
     --logo-pattern-opacity seberapa kuat polanya terlihat (0 = mati, 1 = penuh)
     --logo-pattern-blend   cara pola bercampur dengan hijau plakat

   Kenapa perlu `mix-blend-mode`: pola bisa saja BERLATAR PENUH (tidak transparan) —
   sampel `p6.webp` misalnya isinya putih pucat rapat. Kalau ditempel biasa, ia menutupi
   hijau plakat jadi keabu-abuan. Dengan `overlay`, pola hanya menerangkan/menggelapkan
   hijau yang ada di bawahnya, jadi warna plakat tetap hidup. Berlaku baik untuk pola
   transparan maupun tidak — makanya aman dipakai untuk berkas apa pun yang kamu timpakan. */
.logo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--logo-pattern);
  background-size: var(--logo-pattern-size);
  background-repeat: repeat;
  background-position: center;
  opacity: var(--logo-pattern-opacity);
  mix-blend-mode: var(--logo-pattern-blend);
  filter: var(--logo-pattern-filter);
  pointer-events:none;
}
/* Logo resmi dari klien (daun + wordmark jadi satu file, latar transparan).
   Tingginya sengaja jauh lebih besar dari logo lama (daun 55px + teks) sesuai
   permintaan "perbesar 2 kali" — kalau mau disetel ulang, cukup ubah angka height di sini. */
/* Selalu putih — plakat di belakangnya selalu hijau tua, di halaman manapun. */
.logo-mark{ position:relative; z-index:1; width:auto; height:105px; object-fit:contain; flex-shrink:0; filter: brightness(0) invert(1); }
.logo-text{ display:flex; flex-direction:column; gap:2px; }
.logo .wordmark{
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--forest-2);
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 40px;
}
.nav-links a{
  text-decoration:none;
  color: var(--forest-2);
  font-size: 14.5px;
  font-weight: 500;
  display:flex;
  align-items:center;
  gap:4px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}
.nav-links a.active{
  color: var(--gold);
  font-weight: 700;
  border-bottom-color: var(--gold);
}
.nav-icons{
  display:flex;
  align-items:center;
  gap: 22px;
}
.nav-icons svg{ width:20px; height:20px; color: var(--forest-2); cursor:pointer; flex-shrink:0; }
.nav-icons a{ display:flex; }
/* Sale page's search trigger is a <label>, not an <a> — kept separate from .nav-icons so it never
   picks up the outer container's own flex/order rules (that collision used to shove it out of place). */
.search-toggle{ display:flex; }
.search-toggle svg{ width:20px; height:20px; color: var(--forest-2); cursor:pointer; flex-shrink:0; }

/* Hamburger toggle — hidden on desktop, only shown/used under the 900px breakpoint below */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  padding:4px;
  margin:0;
  cursor:pointer;
  color: var(--forest-2);
  flex-shrink:0;
}
.nav-toggle svg{ width:24px; height:24px; display:block; }

/* Bottom tab bar — mobile only (2026-08-10, atas permintaan Alex, pola bottom
   navigation umum di app/situs belanja HP). Desktop TIDAK disentuh sama sekali —
   .nav-links inline tetap satu-satunya navigasi di sana, elemen ini display:none
   di luar breakpoint 900px (lihat override display:flex di media query bawah). */
.bottom-nav{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  background: var(--cream-2);
  border-top: 1px solid rgba(26,38,32,0.1);
  box-shadow: 0 -4px 16px rgba(26,38,32,0.06);
  justify-content:space-around;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  flex:1;
  text-decoration:none;
  color: var(--forest-2);
  opacity:0.5;
  padding:4px 2px;
}
.bottom-nav a svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; flex-shrink:0; }
.bottom-nav a span{ font-family:var(--font-sans); font-size:10.5px; font-weight:600; letter-spacing:0.01em; }
.bottom-nav a.active{ opacity:1; color: var(--gold); }
.bottom-nav a.active svg{ stroke-width:2; }
.lang-toggle{
  display:flex;
  border: 1.3px solid var(--moss);
  border-radius: 999px;
  overflow: hidden;
  margin-right: 4px;
}
.lang-opt{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  background: none;
  border: none;
  color: var(--forest-2);
  cursor: pointer;
}
.lang-opt.active{
  background: var(--moss);
  color: var(--cream);
}
.cart-wrap{ position:relative; }
.cart-badge{
  position:absolute;
  top:-8px; right:-9px;
  background: var(--gold);
  color: var(--cream);
  font-size:10px;
  font-weight:700;
  width:17px; height:17px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ── Compact page header (Profile/News/Contact/Sale) ── */
.page-header{
  max-width: 1680px;
  margin: 0 auto;
  padding: 56px 56px 40px;
  text-align:center;
}
.page-header .eyebrow{
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
}
.page-header h1{
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--forest-2);
  margin-top: 12px;
}
.page-header .divider{ margin: 22px auto 0; }
.page-header p.lede{
  max-width: 560px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.7;
  opacity: 0.75;
}

/* ── Placeholder / pending marker (shared visual language) ── */
.pending-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: rgba(185,117,74,0.1);
  border: 1px solid rgba(185,117,74,0.3);
  border-radius: 999px;
  padding: 5px 12px;
}
.pending-tag svg{ width:11px; height:11px; }

/* decorative leaf mark, reused across section headers */
.leaf-mark{ width:22px; height:28px; opacity:0.5; flex-shrink:0; }
.leaf-mark path{ fill:none; stroke: var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* ── Photo placeholder (shared) ──
   Used for every "photo pending" card across Home/Sale/News/Profile.
   Add this class alongside the page-specific card class (which sets
   aspect-ratio/layout) — this class owns only the moss gradient + texture,
   so the look stays identical everywhere and only needs updating in one place. */
.photo-placeholder{
  position: relative;
  background: linear-gradient(150deg, var(--moss-light) 0%, var(--moss) 100%);
}
.photo-placeholder::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(250,250,250,0.14) 1px, transparent 1.3px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

/* ── Footer (shared) ── */
.site-footer{
  background: var(--forest);
  color: var(--cream);
  padding: 64px 56px 28px;
}
.footer-inner{
  max-width: 1680px;
  margin: 0 auto;
  display:flex;
  justify-content:space-between;
  gap: 48px;
  flex-wrap:wrap;
}
/* Wrapper baru (2026-08-07) di sekeliling ke-2 `.footer-col` — dulu keduanya anak
   langsung `.footer-inner` bareng `.footer-brand`. Di desktop cuma "transparan"
   (flex row biasa, jaraknya disamakan 48px persis seperti sebelumnya lewat gap
   di sini) — perubahan sungguhannya cuma kerasa di HP, lihat override ≤900px. */
.footer-cols{
  display:flex;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand .wordmark{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.footer-brand p{
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  opacity: 0.65;
  max-width: 320px;
}
.footer-col h4{
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 16px;
}
.footer-col a{
  display:block;
  text-decoration:none;
  color: var(--cream);
  opacity: 0.75;
  font-size: 14px;
  margin-bottom: 10px;
}
.footer-col a:hover{ opacity: 1; }
.footer-bottom{
  max-width: 1680px;
  margin: 40px auto 0;
  border-top: 1px solid rgba(250,250,250,0.15);
  padding-top: 20px;
  font-size: 12px;
  opacity: 0.55;
  text-align:center;
}

@media (max-width: 900px){
  .nav{
    flex-wrap: wrap;
    row-gap: 14px;
    /* Padding-bawah dikecilkan 18px→8px (2026-08-05, Alex minta bilah putih lebih pendek
       TANPA mengubah ukuran/posisi logo). padding-atas TETAP 18px — itu yang menjaga
       rumus margin-top plakat (lihat komentar di bawah), jangan ikut disentuh. */
    padding: 18px 24px 8px;
  }
  .logo-mark{ height:70px; }
  /* Plakat versi HP — angkanya BEDA dari desktop dan itu memang disengaja:
     di sini padding atas nav 18px, jadi margin-top -18px sudah pas menempel tepi halaman
     (aturan tetap: margin-top = minus padding-atas nav). Karena sudah cocok, HP TIDAK ikut
     kena masalah logo terpotong yang terjadi di desktop 2026-08-03.
     Dulu ini ditulis sebagai dua blok `.logo` terpisah di media query yang sama —
     digabung jadi satu supaya tidak ada dua aturan yang diam-diam saling menimpa.
     margin-bottom -30px→-42px (2026-08-05): TIDAK mengubah tinggi/posisi plakat itu
     sendiri (padding & logo-mark plakat tidak disentuh) — cuma mengurangi berapa banyak
     tinggi plakat yang "dihitung" bilah nav, supaya bilah putihnya menyusut. Efek sampingnya
     plakat jadi menjorok sedikit lebih jauh ke bawah bilah putih (bukan bug, konsekuensi
     wajar dari bilah yang lebih pendek — gaya "lencana" ini memang sudah begitu di desktop). */
  .logo{ order:1; padding:12px 14px 18px; margin-top:-18px; margin-bottom:-42px; border-radius:0 0 16px 16px; }
  .nav-icons{ order:2; margin-left:auto; gap:16px; }
  /* 🐞 FIX (dilaporkan Alex 2026-08-07) — "tombol close di menu HP nggak kelihatan".
     z-index 2 → 55. Root cause: `#nav-links` (overlay penuh layar) punya z-index:50,
     lebih tinggi dari tombol hamburger/close ini (dulu cuma 2) — begitu menu dibuka,
     overlay-nya justru MENUTUPI tombolnya sendiri (termasuk ikon X yang seharusnya jadi
     tombol tutup). 55 dipilih supaya tombolnya menang dari overlay (50) tapi tetap kalah
     dari lightbox foto (200) kalau kebetulan ada yang lain terbuka bersamaan. */
  /* Hamburger dimatikan lagi di HP (2026-08-10) — 5 tujuan yang tadinya dibuka lewat
     overlay ini sekarang tersedia langsung lewat .bottom-nav (bilah tab bawah).
     .nav-links (overlay fixed) & JS toggleNav() sengaja TIDAK dihapus — kode lama
     tetap ada kalau suatu saat perlu diaktifkan lagi, cuma sudah tidak ada tombol
     yang memicunya di HP. */
  .nav-toggle{ display:none; }
  .bottom-nav{ display:flex; }
  /* Ruang di bawah body supaya footer/konten terakhir tidak ketutup bilah tab yang
     position:fixed ini — tinggi bar ±60px (ikon+label+padding) + jarak aman. */
  body{ padding-bottom: 76px; }

  /* 🐞 FIX (2026-08-04) — di layar sempit (≈320px, HP kecil), plakat + ikon + hamburger
     tidak muat berdampingan di satu baris. `.nav` masih `flex-wrap:wrap`, jadi hamburger
     (order:3, item terakhir) yang terlempar ke baris baru — dan baris barunya jatuh
     TEPAT DI BAWAH plakat logo, tertimpa separuh badan plakat (terverifikasi lewat
     pengukuran koordinat, bukan cuma dilihat: hamburger x=40-72 vs plakat x=24-121,
     tumpang tindih penuh secara horizontal). Akibatnya tombol menu nyaris tidak
     terlihat/tidak nyaman disentuh di HP kecil.
     Fix: bukan melarang wrap (tetap dibiarkan ada sebagai jaring pengaman), tapi
     mengecilkan total lebar plakat+ikon+hamburger supaya semuanya muat satu baris
     tanpa perlu wrap sama sekali — diuji turun sampai 300px, 0 tumpang tindih. */
  @media (max-width: 380px){
    /* padding-atas dikunci 18px (bukan 16px lagi) — 🐞 ketemu pas kerjakan permintaan
       Alex 2026-08-05 (bilah nav dipendekkan): 16px tidak cocok dengan rumus margin-top
       plakat (-18px), jadi logo kepotong 2px ke atas di layar ≤380px. padding-bawah ikut
       dikecilkan 8px sama seperti breakpoint 900px, biar konsisten. */
    .nav{ padding: 18px 16px 8px; }
    .nav-icons{ gap: 8px; }
    .lang-toggle{ margin-right: 0; }
    .lang-opt{ padding: 5px 8px; font-size: 10px; }
    .nav-icons svg, .search-toggle svg{ width: 18px; height: 18px; }
    .nav-toggle{ padding: 2px; }
    .nav-toggle svg{ width: 22px; height: 22px; }
  }
  /* 2026-08-07: sempat diubah jadi baris tab selalu-tampil, TAPI Alex minta balik lagi
     ke versi hamburger+overlay semula — jadi ini dikembalikan persis seperti sebelumnya.
     z-index 1 → 50 sekalian dinaikkan untuk jaga-jaga, TAPI ini BUKAN fix utama bug
     "overlay ketimpa foto carousel" yang dilaporkan Alex — perbaikan sebenarnya ada di
     `.nav:has(#nav-links.open)` (lihat komentar panjang di aturan `.nav`, dekat atas
     berkas ini) karena `#nav-links` posisinya `fixed` tapi tetap terjebak di dalam
     stacking context `.nav`. Angka 50 di sini cuma memastikan overlay tetap menang
     terhadap sesama isi `.nav` (logo, ikon, dst), bukan terhadap elemen luar `.nav`. */
  .nav-links{
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--cream-2);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-links.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a{
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    justify-content:center;
    padding:14px 0;
    border-bottom:none;
  }
  .nav-links a.active{ color: var(--gold); }
  /* 40px → 74px (revisi Alex 2026-08-07, no. 3) — jarak ke plakat logo cuma 6px
     sebelumnya (nyaris nempel, kebaca lewat screenshot "MENGENAL LEBIH DEKAT" mepet
     ke logo), sekarang ±40px. Dipakai bersama oleh Profil/Kabar/Kontak/Belanja/Pesanan
     (`.page-header` shared) — satu perbaikan otomatis kena ke semua halaman itu,
     angkanya disamakan dengan jarak plakat→judul di hero Beranda (72px) biar konsisten
     lintas halaman. */
  .page-header{ padding: 74px 24px 32px; }
  /* Footer HP (revisi Alex 2026-08-07, no. 2): brand (logo+deskripsi) tetap baris
     sendiri di atas (flex-basis:100% memaksa wrap), TAPI "Jelajah" & "Terhubung" sekarang
     SEBARIS berdampingan di bawahnya — sebelumnya ketiganya (brand+Jelajah+Terhubung)
     ditumpuk vertikal semua lewat flex-direction:column. Desktop tidak disentuh (masih
     row biasa lewat rule dasar `.footer-inner`/`.footer-cols`, unchanged).
     🐞 Sempat kejadian dites: `flex:1 1 0` di dua kolom pas-pasan sama persis lebar
     kontainer (161px+161px+gap 20px = pas 100%, nol sisa) — di lebar SEPAS itu, hasil
     pengukuran font/subpixel yang beda tipis antar-render bisa bikin flex-wrap ragu2
     lalu KADANG membungkus salah satu kolom ke baris baru sendiri (flaky, ke observasi
     lewat tes berulang: kadang sebaris, kadang tidak). Fix: `.footer-cols` dikunci
     `flex-wrap:nowrap` — dengan nowrap, browser TIDAK PERNAH membungkus, kolom yang
     kurang muat mengecil (flex-shrink) alih-alih pindah baris, jadi hasilnya konsisten. */
  .footer-inner{ flex-direction:row; flex-wrap:wrap; gap: 28px 0; }
  .footer-brand{ flex-basis: 100%; }
  .footer-cols{ flex-wrap: nowrap; gap: 20px; width: 100%; }
  .footer-col{ flex: 1 1 0; min-width: 0; }
  .site-footer{ padding: 48px 24px 24px; }
}

/* ── Foto zoom — komponen bersama Profil & Belanja (2026-08-04) ──
   Trigger ikon khusus (bukan seluruh foto jadi area klik): area foto di Profil/Belanja
   belum dipakai aksi lain hari ini, tapi ikon terpisah menjaganya tetap aman kalau
   nanti kartu itu dapat aksi lain, dan ikon yang SELALU terlihat adalah satu-satunya
   pola yang kebaca tanpa hover di layar sentuh. Beranda SENGAJA tidak dapat fitur ini —
   seluruh kartunya sudah jadi tautan ke halaman kategori, foto yang bisa diklik lagi
   di situ akan bentrok dengan tautan yang sudah ada.
   Posisi PALING ATAS (bukan bawah lagi, revisi Alex 2026-08-04): panel info hover
   Profil (`.plant-extra`) naik dari bawah kartu dan kadang menutupi bagian BAWAH foto
   kalau isinya panjang — pojok atas foto tidak pernah ketiban panel itu.
   Warna hitam transparan + ikon putih (revisi Alex 2026-08-04, ganti dari emas solid)
   supaya netral di foto apa pun tanpa border. Ukuran 40px desktop, naik ke 46px di
   ≤900px — 44px+ adalah target sentuh minimum yang disarankan (Apple HIG / WCAG 2.5.5),
   dipas di breakpoint sentuh yang sama dengan sisa situs. */
.zoom-btn{
  position:absolute;
  top:10px; right:10px;
  z-index:7;
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  box-shadow: 0 3px 10px rgba(26,38,32,0.35);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.zoom-btn:hover, .zoom-btn:focus-visible{ background: rgba(0,0,0,0.75); transform:scale(1.08); }
/* Selector sengaja "button.zoom-btn svg" (bukan cuma ".zoom-btn svg") — spesifisitas
   perlu MENGALAHKAN aturan ikon daun placeholder tiap halaman (mis. `.plant-photo svg`
   di profile.html, `.product-photo svg` di sale.html) yang juga menyasar SEMUA svg di
   dalam kotak foto termasuk tombol zoom ini, dan tanpa ini ikut kena width:30%+opacity:0.4
   milik aturan itu — itu sebab awal ikon kelihatan kecil & pudar. */
button.zoom-btn svg{ width:19px; height:19px; opacity:0.8; stroke-width:2.4; }
/* Sama alasannya dengan aturan di atas — aturan placeholder daun tiap halaman juga
   menimpa warna GARIS <path> di dalam svg (mis. `.plant-photo svg path{ stroke:
   var(--gold-light) }`), yang kebetulan PERSIS warna latar tombol ini → gagang &
   tanda "+" kaca pembesar jadi tak kelihatan (nyaris sama warna dengan latarnya). */
button.zoom-btn svg path{ stroke: #fff; stroke-width: 2.4; }

.zoom-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,20,17,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 0.2s ease;
}
.zoom-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.zoom-lightbox-img{ max-width:min(900px,92vw); max-height:88vh; object-fit:contain; border-radius:4px; }
.zoom-lightbox-close{
  position:absolute; top:22px; right:22px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
}
.zoom-lightbox-close svg{ width:18px; height:18px; }
.zoom-lightbox-caption{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.85);
  font-family:var(--font-serif); font-size:16px; text-align:center;
  padding:0 20px;
}

@media (max-width:900px){
  /* 46px → 32px (revisi Alex 2026-08-07) — sebelumnya dinaikkan LEBIH BESAR dari
     desktop (40px) demi target sentuh minimum (44px+, WCAG 2.5.5), tapi Alex menilai
     bulatannya kelihatan kebesaran di kartu HP. Diturunkan di bawah ukuran desktop. */
  .zoom-btn{ width:32px; height:32px; top:10px; right:10px; }
  button.zoom-btn svg{ width:15px; height:15px; }
  .zoom-lightbox-close{ top:16px; right:16px; }
}