/* ══ NAVIGASI SITUS BERSAMA — menu atas, laci HP, kaki peta situs, tautan silang review ══════
   Mockup: /root/dapur-konten/mockup/MOCKUP_NavigasiSitus.html (papan F, owner 18 Okt).
   Markup: templates/_publik/menu.html + kaki.html · daftar menu: app/app/situs_nav.py.

   🔴 Satu berkas untuk DELAPAN halaman yang temanya berbeda-beda:
      terang bawaan + html[data-tema="gelap"]   → produk, review, daftar harga
      gelap bawaan  + html[data-tema="terang"]  → cara-beli (.jn--gelap)
      neon gelap tetap (body.cyber-grid)         → landing, laptop-bekas-malang, galeri-toko
   🔴 Semua kelas berawalan jn- dan TIDAK memakai elemen header/footer: CSS lama halaman masih
      menyasar `header{}`, `footer{}`, `.nav`, `.logo`, `.bungkus`, `.aktif`.
   Laci HP: bawaan = laci TERTUTUP tanpa animasi (nol kilatan saat muat); animasi baru hidup sesudah
   frame pertama (situs.js memasang .jn-anim). JS mati → <noscript> di menu.html mengembalikan menu
   jadi baris geser mendatar. */

.jn{
  --jn-latar:#FFFFFF; --jn-tepi:#E2E8F0; --jn-ink:#334155; --jn-kuat:#0F172A;
  --jn-aktif:#0B5CFF; --jn-aktif-bg:#EFF6FF; --jn-wa:#15803D; --jn-tirai:rgba(15,23,42,.55);
  position:sticky; top:0; z-index:40;
  background:var(--jn-latar); border-bottom:1px solid var(--jn-tepi); color:var(--jn-ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14.5px; line-height:1.4; text-align:left;
}
.jn--gelap,
html[data-tema="gelap"] .jn,
body.cyber-grid .jn{
  --jn-latar:#0F172A; --jn-tepi:rgba(148,163,184,.22); --jn-ink:#CBD5E1; --jn-kuat:#F8FAFC;
  --jn-aktif:#60A5FA; --jn-aktif-bg:rgba(96,165,250,.14);
}
html[data-tema="terang"] .jn--gelap{
  --jn-latar:#FFFFFF; --jn-tepi:#E2E8F0; --jn-ink:#334155; --jn-kuat:#0F172A;
  --jn-aktif:#0B5CFF; --jn-aktif-bg:#EFF6FF;
}
.jn *,.jn *::before,.jn *::after{box-sizing:border-box}
.jn a{text-decoration:none}
.jn-dalam{max-width:1380px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:22px; min-height:62px}
.jn-merek{display:flex; align-items:center; gap:10px; color:var(--jn-kuat); font-weight:800; flex:none; white-space:nowrap}
.jn-merek img{width:34px; height:34px; border-radius:9px; object-fit:contain; display:block}
.jn-merek-hp{display:none}
.jn-nav{display:flex; align-items:center; gap:22px; font-weight:600}
/* Penanda aktif = WARNA TEKS saja, nol garis bawah (ketokan owner 23 Okt, mockup menu_tanya). */
.jn-tautan{color:var(--jn-ink); padding:3px 0; white-space:nowrap}
.jn-tautan:hover{color:var(--jn-aktif)}
.jn-tautan.jn-aktif{color:var(--jn-aktif)}
.jn-tautan:focus-visible,.jn-wa:focus-visible,.jn-buka:focus-visible,.jn-tutup:focus-visible,.jn-merek:focus-visible{
  outline:2px solid var(--jn-aktif); outline-offset:3px; border-radius:6px}
.jn-ikon,.jn-laci-kepala,.jn-wa-laci{display:none}
.jn-ekstra{display:flex; align-items:center; gap:10px; margin-left:auto; min-width:0}
.jn-ekstra .cari{width:210px; flex:0 1 210px}
.jn-ekstra .btn-tema{position:static; flex:none; white-space:nowrap}   /* review.css HP: absolute → pecah; nol menyusut */
/* Logo WA + "Chat WA" (ketokan 23 Okt): align-items/gap di sini; `display` SENGAJA di .jn-wa-bar
   (inline-flex) dan .jn-wa-laci (flex, di blok HP) — `.jn-wa{display:…}` di sini akan mengalahkan
   `.jn-wa-laci{display:none}` di atas dan memunculkan tombol laci di desktop. */
.jn-wa{align-items:center; gap:8px; background:var(--jn-wa); color:#FFFFFF !important;
  font-weight:700; font-size:13.5px; padding:9px 14px; border-radius:9px; white-space:nowrap; flex:none}
.jn-wa-bar{display:inline-flex}
.jn-wa-ikon{width:20px; height:20px; flex:none; display:block}
.jn-wa:hover{filter:brightness(1.08)}
.jn-ekstra + .jn-wa-bar{margin-left:0}
.jn-nav + .jn-wa-bar{margin-left:auto}
.jn-buka{display:none; flex:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--jn-tepi);
  background:transparent; color:var(--jn-kuat); font-size:22px; line-height:1; cursor:pointer}
.jn-tirai{display:none}

/* Layar sedang (produk & cara-beli punya kotak cari + tombol tema di bilah): cari dilipat dulu. */
/* ≤1360: cari dilipat → .jn-ekstra tinggal tombol tema; jangan biarkan ia menyusut di bawah tombolnya
   (terukur sejak navigasi 22 Okt: tombol tema cara-beli 1100–1249 tertutup Chat WA). */
@media (max-width:1360px){ .jn-ekstra .cari{display:none} .jn-ekstra{flex:none} }
/* 7 entri + Chat WA (+ tombol tema) satu baris sampai 1100: jarak dirapatkan, nama TIDAK dipotong. */
@media (max-width:1280px){ .jn-dalam{gap:16px} .jn-nav{gap:15px} }
/* 1100–1200 terukur melebar 15 px (31 px di cara-beli, + tombol tema) dengan jarak di atas → rapatkan lagi. */
/* 1100–1200: rapatkan lagi + merek bentuk HP ("JVS Laptop", sudah ada di menu.html). Terukur: tanpa
   ini tombol tema cara-beli terjepit di bawah Chat WA pada 1100. Nama menu TIDAK dipotong. */
@media (max-width:1200px){
  .jn-dalam{gap:12px; padding-left:16px; padding-right:16px} .jn-nav{gap:11px}
  .jn-merek-penuh{display:none} .jn-merek-hp{display:inline}
}
/* Bilah berkotak cari (produk, cara-beli): 7 entri + cari + tema + Chat WA. Terukur huruf cadangan
   (cara-beli tak memuat Plus Jakarta Sans): tanpa ini cari menyusut 141 → 65 px di 1440 dan bilah
   melebar 11–35 px di 1201–1225. Merek pendek di SEMUA lebar (.jn-dalam berbatas 1380 px, jadi layar
   lebih lebar tak menambah ruang), jarak lebih rapat ≤1200. Peramban tanpa :has → aturan di atas saja. */
.jn-dalam:has(.jn-ekstra .cari) .jn-merek-penuh{display:none}
.jn-dalam:has(.jn-ekstra .cari) .jn-merek-hp{display:inline}
@media (max-width:1200px){ .jn-dalam:has(.jn-ekstra .cari){gap:10px} .jn-dalam:has(.jn-ekstra .cari) .jn-nav{gap:9px} }

/* ── HP & tablet: ☰ membuka laci ─────────────────────────────────────────────────────────── */
@media (max-width:1099px){
  .jn-dalam{padding:10px 16px; gap:10px; min-height:56px}
  .jn-merek{font-size:13.5px}
  .jn-merek img{width:28px; height:28px; border-radius:8px}
  .jn-merek-penuh{display:none}
  .jn-merek-hp{display:inline}
  .jn-wa-bar{display:none}
  .jn-ekstra{margin-left:auto}
  .jn-ekstra .cari{display:none}

  /* Laci kanan (mockup HP). */
  .jn-buka{display:inline-flex; align-items:center; justify-content:center; margin-left:auto}
  .jn-ekstra ~ .jn-buka{margin-left:0}
  .jn-nav{position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:46;
    flex-direction:column; align-items:stretch; gap:4px; padding:16px; overflow-y:auto;
    background:var(--jn-latar); color:var(--jn-ink); box-shadow:-12px 0 30px rgba(15,23,42,.25);
    transform:translateX(105%); visibility:hidden}
  .jn-anim .jn-nav{transition:transform .2s ease, visibility 0s linear .2s}
  .jn-buka-laci .jn-nav{transform:none; visibility:visible}
  .jn-anim.jn-buka-laci .jn-nav{transition:transform .2s ease}
  .jn-laci-kepala{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--jn-kuat)}
  .jn-tutup{width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:var(--jn-kuat); font-size:20px; cursor:pointer}
  .jn-tautan{padding:12px 10px; border-radius:8px; font-size:15px}
  .jn-tautan.jn-aktif{background:var(--jn-aktif-bg); font-weight:700}
  .jn-ikon{display:inline-block; width:1.6em}
  .jn-wa-laci{display:flex; justify-content:center; margin-top:auto; padding:12px; border-radius:10px}
  .jn-buka-laci .jn-tirai{display:block; position:fixed; inset:0; z-index:45; background:var(--jn-tirai)}
}
@media (prefers-reduced-motion:reduce){ .jn-nav{transition:none !important} }
html.jn-terkunci,html.jn-terkunci body{overflow:hidden}

/* ── Kaki peta situs (selalu gelap, mockup) ──────────────────────────────────────────────── */
.jn-kaki{background:#0F172A; color:#CBD5E1; margin-top:32px; text-align:left;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:13.5px; line-height:2}
.jn-kaki *,.jn-kaki *::before,.jn-kaki *::after{box-sizing:border-box}
.jn-kaki-dalam{max-width:1380px; margin:0 auto; padding:24px 28px; display:flex; flex-wrap:wrap; gap:12px 36px}
.jn-kolom{flex:1 1 200px; min-width:0; display:flex; flex-direction:column; align-items:flex-start}
.jn-kolom-lebar{flex-basis:240px}
.jn-kjudul{color:#FFFFFF; font-weight:800; margin-bottom:4px}
.jn-kaki a{color:#CBD5E1; text-decoration:none; overflow-wrap:anywhere}
.jn-kaki a:hover{color:#FFFFFF; text-decoration:underline}
.jn-kaki a:focus-visible{outline:2px solid #60A5FA; outline-offset:2px; border-radius:4px}
.jn-kaki span{overflow-wrap:anywhere}
.jn-kbawah{max-width:1380px; margin:0 auto; padding:12px 28px 22px; border-top:1px solid rgba(148,163,184,.18);
  color:#94A3B8; font-size:12.5px}
@media (max-width:640px){ .jn-kaki-dalam{padding:22px 16px} .jn-kbawah{padding:12px 16px 90px} }

/* ── Tautan silang review ↔ produk ───────────────────────────────────────────────────────── */
.lencana-review{display:inline-block; background:#EFF6FF; color:#0B5CFF !important; font-size:11.5px; font-weight:700;
  padding:3px 8px; border-radius:6px; text-decoration:none !important; white-space:nowrap; vertical-align:middle; line-height:1.4}
.lencana-review:hover{background:#DBEAFE}
.jn-baca-review{display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:#EFF6FF; color:#0B5CFF !important;
  font-weight:700; font-size:13px; padding:7px 12px; border-radius:8px; text-decoration:none !important}
.jn-baca-review:hover{background:#DBEAFE}