/* ================================================================
   navbar.css — menubar utama, menempel di atas saat digulir
   Lambang di navbar hanya muncul setelah hero terlewat, supaya
   identitas tidak tampil dua kali bersama topbar.
   ================================================================ */
/* Revisi 16: bayangan navbar dipertegas. Sebelumnya hanya keadaan .solid yang
   punya --shadow-1 dan bilahnya seakan menempel rata di halaman. Sekarang:
   keadaan diam sudah punya bayangan lembut, dan saat digulir naik jadi dua
   lapis (dekat + jauh) supaya bilah terbaca jelas mengambang di atas konten. */
.navbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s ease;
  box-shadow:0 4px 14px rgba(20,36,58,.07)}
/* kaca bersemu aksen 4%: pembeda halus dari topbar putih, ikut berganti per tema */
@supports (background:color-mix(in srgb,red 4%,#fff)){
  .navbar{background:color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.92))}
}
/* garis bawah navbar (Revisi 13): track pucat SELALU tampak; di atasnya isi
   progres gulir yang terisi mengikuti --scroll dari ui.js.
   Revisi 21: dipertegas - 2px jadi 3px dan warnanya naik ke --accent-strong.
   Aksen biasa terlalu dekat dengan track --accent-line sehingga isinya nyaris
   tidak terlihat, terutama di tema terang seperti teal. */
.navbar::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--accent-line);pointer-events:none}
.navbar::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;z-index:1;
  background:var(--accent-strong);border-radius:0 2px 2px 0;
  transform:scaleX(var(--scroll,0));transform-origin:left;pointer-events:none}
.navbar .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.navbar.solid{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 rgba(20,36,58,.05),0 10px 24px rgba(20,36,58,.13),0 28px 56px rgba(20,36,58,.10)}
@supports (background:color-mix(in srgb,red 4%,#fff)){
  .navbar.solid{background:color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.72))}
}

.nav-brand{display:flex;align-items:center;gap:10px;margin-right:14px;max-width:0;overflow:hidden;
  opacity:0;transform:translateX(-8px);filter:blur(4px);pointer-events:none;
  transition:opacity .3s ease,transform .3s var(--ease),max-width .35s var(--ease),filter .3s ease}
.nav-brand-logo{display:block;width:210px;height:auto;max-height:46px;object-fit:contain}
.navbar.solid .nav-brand{opacity:1;transform:none;filter:none;pointer-events:auto;max-width:320px}
/* Revisi 17: inisial "DP" diganti lambang sungguhan + dua baris teks.
   Revisi 21: filter pemutih dibuang (lambang berwarna jadi gumpalan putih).
   Revisi 22: chip putihnya juga dibuang + ukuran naik 34 -> 40px. Lambang
   tampil langsung dengan drop-shadow tegas; drop-shadow mengikuti bentuk
   lambang (bukan kotak/lingkaran wadahnya), itu bedanya dari box-shadow. */
.nav-brand .emblem{width:40px;height:40px;font-size:0;overflow:visible;
  background:none;border:0;box-shadow:none;border-radius:0}
.nav-brand .emblem img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(11,32,58,.4))}
.nav-brand-teks{display:flex;flex-direction:column;line-height:1.15}
.nav-brand b{font-size:14px;font-weight:800;white-space:nowrap}
.nav-brand-teks em{font-style:normal;font-size:10.5px;color:var(--ink3);white-space:nowrap}
@media (max-width:1180px){
  .nav-brand-teks em{display:none}
}

.menu{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;padding:9px 12px;
  border-radius:var(--r-sm);white-space:nowrap;color:var(--ink2);
  transition:background .18s ease,color .18s ease,transform .18s var(--ease)}
.menu a svg{width:15px;height:15px;flex:none}
.menu a:hover{transform:translateY(-1px)}
/* Penanda menu aktif SENGAJA DIHAPUS (revisi 22 Sep 2026).
   Sebelumnya item aktif ditandai kapsul + garis tepi (.menu a.on). Kini
   navbar tidak menyorot menu mana pun; hanya .nav-ind (pil meluncur)
   sebagai sorotan hover. */
.menu a{position:relative;z-index:1;border:1px solid transparent;border-radius:7px}
.menu a:hover{color:var(--accent-strong)}
/* sorotan hover: kapsul garis, hanya tampil saat menyorot item non-aktif */
.nav-ind{position:absolute;left:0;top:50%;height:34px;width:40px;margin-top:-17px;border-radius:7px;
  border:1px solid var(--accent-strong);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  opacity:0;transition:transform .28s var(--ease),width .28s var(--ease),opacity .2s ease;pointer-events:none;z-index:0}
@media (hover:none){
  .nav-ind{display:none}
}

/* ---------------- LACAK BERKAS (Revisi 16) ----------------
   Satu-satunya menu yang berupa aksi, bukan navigasi: dia membuka modal.
   Diberi garis tepi aksen supaya beda dari tautan biasa, tapi tetap flat
   (tanpa gradasi/glow) mengikuti aturan Revisi 12. */
  border-radius:999px;color:var(--accent-strong);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s var(--ease)}


@media (prefers-reduced-motion:reduce){
}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-md);
  place-items:center;margin-left:auto}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}

/* laci menu ponsel */
.drawer{display:none;border-top:1px solid var(--line);background:#fff}
.drawer.open{display:block}
.drawer a{display:block;padding:13px var(--gutter);font-size:14.5px;font-weight:600;border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}
/* Penanda menu aktif di laci ponsel (.drawer a.on) ikut dihapus — lihat catatan
   pada .menu a.on di atas. */
.drawer a:active{color:var(--accent-strong)}

@media (max-width:1180px){
  .menu a{padding:9px 9px;font-size:13.5px}
}
@media (max-width:980px){
  .menu{display:none}
  .burger{display:grid}
  /* Pada layar kecil identitas navbar tetap tersembunyi saat posisi awal.
     Logo baru muncul setelah ui.js menambahkan .solid ketika hero terlewati. */
  .nav-brand{max-width:0;margin-right:0;opacity:0;transform:translateX(-8px);
    filter:blur(4px);pointer-events:none}
  .navbar.solid .nav-brand{max-width:calc(100vw - 92px);margin-right:auto;opacity:1;
    transform:none;filter:none;pointer-events:auto}
}

/* ---------- dropdown menu: kembaran .tb-pop (kaca blur + panah) ---------- */
.nav-item{position:relative}
/* jembatan hover: menutup celah 10px antara item dan panel supaya hover tidak putus */
.nav-item::after{content:"";position:absolute;left:-6px;right:-6px;top:100%;height:12px}
.nav-item>a .ncaret{width:11px;height:11px;flex:none;transition:transform .22s ease}
.nav-item:hover>a .ncaret,.nav-item:focus-within>a .ncaret,
.nav-item[data-open]>a .ncaret{transform:rotate(180deg)}
.nav-pop{position:absolute;left:50%;top:calc(100% + 10px);z-index:60;min-width:224px;padding:8px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.65);border-radius:16px;box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);
  transition:opacity .2s ease,transform .2s var(--ease),visibility .2s}
/* wajik penunjuk: diisi warna aksen agar jelas, dengan garis tepi sejelas panel */
.nav-pop::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-6px;width:12px;height:12px;
  background:var(--accent-strong);border-left:1px solid var(--accent-strong);border-top:1px solid var(--accent-strong);
  border-top-left-radius:3px;transform:rotate(45deg);
  box-shadow:-1px -1px 0 rgba(255,255,255,.35)}
.nav-item:hover .nav-pop,.nav-item:focus-within .nav-pop,
.nav-item[data-open] .nav-pop{opacity:1;visibility:visible;transform:translateX(-50%)}
.nav-pop a{display:block;padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--ink2);
  border-radius:10px;white-space:nowrap;transition:background .18s ease,color .18s ease}
.nav-pop a:hover{background:var(--accent-soft);color:var(--accent-strong);transform:none}

/* sub-item laci ponsel: menjorok, kembaran isi dropdown */
.drawer a.sub{padding-left:calc(var(--gutter) + 20px);font-size:13.5px;font-weight:500;
  color:var(--ink2);background:var(--soft)}
.drawer a.sub:hover{color:var(--accent-strong)}