/* LABEL SEKSI DI DROPDOWN & DRAWER
   .kn-dd-section, .kn-mega-head, .kn-drawer-section memakai #A0A0A0 — rasio
   2,55 di atas krem, jauh di bawah ambang WCAG AA 4,5 untuk teks sekecil
   itu (10-11px, huruf besar semua, berjarak lebar).

   Label ini memang tak terlihat sampai dropdown dibuka, tapi begitu terbuka
   ia teks biasa dan ambangnya berlaku penuh.

   #6F6F6F adalah abu paling terang yang masih lulus di krem tergelap pada
   palet ini (#F8F3E9 → 4,54). Tidak ada ruang untuk tingkat "lebih redup"
   yang tetap terbaca: apa pun yang lebih terang dari ini gagal.

   Ketiganya tidak punya varian mode gelap, sehingga abu gelap itu akan
   duduk di atas dropdown gelap (rasio 3,46). Varian gelapnya ditambahkan
   di bawah berkas ini. */

/* EMPAT ATURAN MODE GELAP YANG JUSTRU MEMPERTAHANKAN WARNA TERANG
   ────────────────────────────────────────────────────────────────
   Keempat aturan [data-theme="dark"] di bawah menyetel color: #6B4F3A —
   cokelat yang dipakai mode TERANG. Menulis aturan gelap yang menyalin
   warna terang membatalkan seluruh gunanya.

   Diukur di Chromium pada 53 halaman akar, mode gelap:

       .kn-logo-jp     rasio 2,32   cokelat di rgb(26,26,26)
       .kn-link        rasio 2,52   cokelat di rgb(17,17,17)
       .kn-icon-btn    rasio 2,52
       .kn-btn-ghost   rasio 2,32

   Semuanya di bawah ambang WCAG AA 4,5 — logo, menu, tombol pencarian,
   dan tombol Masuk di navbar sulit dibaca di seluruh situs saat gelap.

   Warnanya kini emas #C89B3C, warna aksen yang memang sudah dipakai mode
   gelap di berkas lain (--primary dibalik menjadi emas di kyoto-theme.css).
   Latar dan garis tepinya ikut disesuaikan ke keluarga emas supaya tidak
   ada sisa rona cokelat. */

/* ═══════════════════════════════════════════════════════════════
   京都 KYOTO NAVBAR v5 — Production Ready
   Compact 64px, sticky, dropdown, mobile drawer
   TIDAK ada nav:not() global reset — isolasi pakai nav.kn-nav
   ═══════════════════════════════════════════════════════════════ */
/* ══ INLINE CSS OVERRIDE (ditambah v10 rebuild) ══
   Halaman dengan inline nav{} perlu selector lebih spesifik.
   html body nav.kn-nav menang atas nav{} biasa karena 3 level. */
html body nav.kn-nav {
  position: sticky !important;
  top: 0 !important;
  bottom: auto !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  z-index: 500 !important;
  display: flex !important;
  background: rgba(248,243,233,.97) !important;
}
/* GENUINELY DIPERBAIKI (Fase Audit Navbar, plan lanjutan): dikonfirmasi
   via screenshot genuine bahwa navbar bar utama TETAP CREAM/TERANG di
   mode gelap (`rgba(248,243,233,...)`), padahal SELURUH sub-komponen di
   dalamnya (dropdown `#1A1A1A`, mega menu, user dropdown, drawer mobile)
   GENUINELY sudah benar beradaptasi ke gelap. Dikonfirmasi ADA 3 lokasi
   duplikat rule ini di file (kemungkinan hasil beberapa patch berbeda
   yang tidak dibersihkan) -- diperbaiki KETIGANYA memakai #1A1A1A yang
   genuinely SAMA dengan warna dropdown, memastikan konsistensi visual
   navbar dengan seluruh sub-komponennya. Rule `.dash-nav` (navbar
   dashboard terpisah) GENUINELY TIDAK disentuh -- di luar cakupan. */
[data-theme="dark"] html body nav.kn-nav {
  background: #1A1A1A !important;
}
/* Pastikan kn-links selalu flex di desktop */
html body nav.kn-nav .kn-links {
  display: flex !important;
}
@media (max-width: 768px) {
  html body nav.kn-nav .kn-links {
    display: none !important;
  }
}



/* ── ISOLASI TOTAL: semua property .kn-nav pakai !important
   supaya nav{...} dari pro-style, neko-theme, index-page
   tidak bisa menimpa ─────────────────────────────────────── */
nav.kn-nav {
  all: revert !important;            /* batalkan any "all:unset" dari luar */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 clamp(16px, 3vw, 48px) !important;
  background: rgba(248,243,233,.97) !important;
  border-bottom: 1px solid rgba(107,79,58,.12) !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 500 !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  transition: background 0.3s, border-color 0.3s !important;
  gap: 8px !important;
  box-shadow: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  margin: 0 !important;
  animation: kn-enter .45s cubic-bezier(.22,1,.36,1) both !important;
}
[data-theme="dark"] nav.kn-nav {
  background: #1A1A1A !important;
  border-bottom-color: rgba(200,155,60,.12) !important;
}

/* ── ENTRANCE — animasi "masuk situs", berlaku di 376 halaman yang
   memuat navbar ini. kyoto-navbar.min.js MEMBANGUN <nav class="kn-nav">
   lewat JS (elemen ini tidak ada di HTML mentah), jadi tidak ada risiko
   FOUC: momen pertama nav.kn-nav muncul di DOM adalah momen animasi ini
   mulai, tidak ada jeda "sudah ter-render lalu tiba-tiba disembunyikan"
   seperti yang membuat #reveal-fallback perlu dibuat untuk sistem
   .reveal berbasis JS (lihat index.html). `both` membuat status akhir
   (100%) sama persis dengan tampilan normal nav.kn-nav di atas, jadi
   browser yang entah bagaimana tidak menjalankan animasi ini tetap
   menampilkan navbar apa adanya, bukan tersembunyi. */
@keyframes kn-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  nav.kn-nav { animation: none !important; }
}

/* ── LOGO ─────────────────────────────────────────────────── */
.kn-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 4px;
  /* Kotak kliknya hanya setinggi 15px — tinggi barisnya sendiri. Navbar
     setinggi 72px dan isinya rata tengah, jadi min-height 44px memperbesar
     sasaran sentuh tanpa memindahkan apa pun secara visual. Diukur di
     Chromium pada 47 halaman. */
  min-height: 44px;
}
.kn-logo-jp {
  font-family: 'Noto Serif JP','Shippori Mincho B1',serif;
  font-size: 19px;
  font-weight: 700;
  color: #6B4F3A;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
[data-theme="dark"] .kn-logo-jp { color: var(--gold, #C89B3C); }
.kn-logo-sep { width:1px; height:16px; background:rgba(107,79,58,.25); flex-shrink:0; }
[data-theme="dark"] .kn-logo-sep { background:rgba(200,155,60,.25); }
/* Warnanya dulu dipaksa #E53935 lewat gaya INLINE di kyoto-navbar.js.
   Gaya inline mengalahkan aturan di berkas ini, termasuk varian gelap di
   bawah — sehingga aturan gelap itu TIDAK PERNAH berlaku. Diukur di
   Chromium pada 47 halaman:

       terang  #E53935 di krem     rasio 3,82
       gelap   #E53935 di #1A1A1A  rasio 4,12

   Keduanya di bawah ambang WCAG AA 4,5, dan teksnya kecil (10px, tebal).

   Warna inline sudah dicabut. Merah kini lebih dalam agar lulus di krem,
   dan mode gelap memakai emas penuh — warna aksen yang memang sudah
   dipakai tema gelap di berkas lain. */
.kn-logo-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase;
  color: #C62828; line-height: 1; white-space: nowrap;
}
[data-theme="dark"] .kn-logo-tag { color: #C89B3C; }

/* Tinggi bilah atas dipusatkan ke satu angka.
   .kn-link memakai 36px sementara ketiga komponen aksi di kanan
   (.kn-icon-btn, .kn-btn-ghost, .kn-btn-primary) memakai 34px. Keduanya
   memang sudah rata secara vertikal -- terukur semua cy=36 -- jadi ini bukan
   salah perataan, melainkan dua irama tinggi yang berdampingan di satu bilah,
   dengan radius dan ukuran font yang sama persis. Disamakan ke 36px supaya
   bilahnya terbaca sebagai satu baris komponen. */

/* ── CENTER NAV LINKS ────────────────────────────────────── */
.kn-links {
  display: flex !important;
  align-items: center;
  gap: 1px;
  list-style: none;
  flex: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.kn-item { position: relative; list-style: none; }

.kn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 11px;
  border-radius: 7px;
  font-family: 'DM Sans','Noto Sans JP',system-ui,sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4A4A4A;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms, background 120ms;
  cursor: pointer;
  background: none;
  border: none;
  letter-spacing: .005em;
}
.kn-link:hover, .kn-link.active {
  color: #6B4F3A;
  background: rgba(107,79,58,.07);
}
.kn-link.active { font-weight: 700; }
[data-theme="dark"] .kn-link { color: var(--ink-mid, #D0CFC9); }
[data-theme="dark"] .kn-link:hover,
[data-theme="dark"] .kn-link.active { color: var(--gold, #C89B3C); background: rgba(200,155,60,.10); }

.kn-chevron { width:14px; height:14px; opacity:.5; transition:transform 200ms; flex-shrink:0; }
.kn-item.open > .kn-link .kn-chevron { transform:rotate(180deg); opacity:.8; }

/* ── DROPDOWN ────────────────────────────────────────────── */
.kn-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: #FEFCF8;
  border: 1px solid rgba(107,79,58,.13);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(107,79,58,.14), 0 2px 8px rgba(107,79,58,.08);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms cubic-bezier(0.16,1,0.3,1);
  z-index: 600;
}
[data-theme="dark"] .kn-dropdown {
  background: #1A1A1A;
  border-color: rgba(200,155,60,.15);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}
.kn-item.open > .kn-dropdown {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.kn-dd-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  text-decoration: none; transition: background 100ms;
}
.kn-dd-item:hover { background: rgba(107,79,58,.06); }
[data-theme="dark"] .kn-dd-item:hover { background: rgba(200,155,60,.08); }

.kn-dd-icon {
  width:30px; height:30px; border-radius:7px;
  background:rgba(107,79,58,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0; margin-top:1px;
}
[data-theme="dark"] .kn-dd-icon { background:rgba(200,155,60,.10); }
.kn-dd-text { flex:1; min-width:0; }
.kn-dd-label {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px; font-weight:600; color:#2D2D2D;
  line-height:1.3; display:block;
}
[data-theme="dark"] .kn-dd-label { color:#F0EDE8; }
.kn-dd-sub { font-size:11px; color:#8B6E56; line-height:1.4; margin-top:1px; display:block; }
[data-theme="dark"] .kn-dd-sub { color:rgba(200,155,60,.6); }
.kn-dd-sep { height:1px; background:rgba(107,79,58,.08); margin:4px; }
[data-theme="dark"] .kn-dd-sep { background:rgba(200,155,60,.08); }
.kn-dd-section {
  font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#6F6F6F; padding:6px 10px 2px;
}

/* ── MEGA MENU ───────────────────────────────────────────── */
.kn-mega {
  position: absolute;
  top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 580px; max-width: 95vw;
  background: #FEFCF8;
  border: 1px solid rgba(107,79,58,.13);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(107,79,58,.14), 0 2px 10px rgba(107,79,58,.08);
  padding: 16px; opacity: 0; pointer-events: none;
  transition: opacity 180ms, transform 180ms cubic-bezier(0.16,1,0.3,1);
  z-index: 600;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
[data-theme="dark"] .kn-mega {
  background: #1A1A1A; border-color: rgba(200,155,60,.15);
  box-shadow: 0 8px 40px rgba(0,0,0,.50), 0 2px 10px rgba(0,0,0,.35);
}
.kn-item.open > .kn-mega {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.kn-mega-col { display:flex; flex-direction:column; gap:2px; }
.kn-mega-head {
  font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#6F6F6F;
  padding:4px 10px 6px; display:flex; align-items:center; gap:6px;
}
.kn-mega-head::after { content:''; flex:1; height:1px; background:rgba(107,79,58,.10); }
[data-theme="dark"] .kn-mega-head::after { background:rgba(200,155,60,.10); }

/* ── RIGHT ACTIONS ───────────────────────────────────────── */
.kn-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }

.kn-icon-btn {
  width:36px; height:36px; border-radius:7px;
  border:1px solid rgba(107,79,58,.18);
  background:transparent; color:#6B4F3A;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer;
  transition:background 120ms, border-color 120ms; flex-shrink:0;
}
.kn-icon-btn:hover { background:rgba(107,79,58,.08); border-color:rgba(107,79,58,.30); }
[data-theme="dark"] .kn-icon-btn { border-color:rgba(200,155,60,.20); color:var(--gold, #C89B3C); }
[data-theme="dark"] .kn-icon-btn:hover { background:rgba(200,155,60,.10); border-color:rgba(200,155,60,.35); }

.kn-btn-ghost {
  height:36px; padding:0 14px; border-radius:7px;
  border:1px solid rgba(107,79,58,.22); background:transparent;
  color:#6B4F3A; font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background 120ms, border-color 120ms;
  text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap;
}
.kn-btn-ghost:hover { background:rgba(107,79,58,.07); border-color:rgba(107,79,58,.35); }
[data-theme="dark"] .kn-btn-ghost { border-color:rgba(200,155,60,.24); color:var(--gold, #C89B3C); }
[data-theme="dark"] .kn-btn-ghost:hover { background:rgba(200,155,60,.08); border-color:rgba(200,155,60,.38); }

.kn-btn-primary {
  height:36px; padding:0 16px; border-radius:7px;
  border:1px solid #6B4F3A; background:#6B4F3A; color:#FEFCF8;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:background 120ms; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; box-shadow:0 2px 8px rgba(107,79,58,.22);
}
.kn-btn-primary:hover { background:#553C2B; border-color:#553C2B; }
[data-theme="dark"] .kn-btn-primary {
  background:#C89B3C; border-color:#C89B3C; color:#1A1209;
  box-shadow:0 2px 8px rgba(200,155,60,.28);
}
[data-theme="dark"] .kn-btn-primary:hover { background:#D4AA56; border-color:#D4AA56; }

/* ── USER CHIP ───────────────────────────────────────────── */
.kn-user {
  position:relative; display:flex; align-items:center; gap:7px;
  height:34px; padding:0 10px 0 4px; border-radius:20px;
  border:1px solid rgba(107,79,58,.18); background:transparent;
  cursor:pointer; transition:background 120ms;
}
.kn-user:hover { background:rgba(107,79,58,.06); }
[data-theme="dark"] .kn-user { border-color:rgba(200,155,60,.18); }
[data-theme="dark"] .kn-user:hover { background:rgba(200,155,60,.08); }
.kn-avatar {
  width:26px; height:26px; border-radius:50%;
  background:#6B4F3A; color:#FEFCF8;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
[data-theme="dark"] .kn-avatar { background:#C89B3C; color:#1A1209; }
.kn-user-name {
  font-size:12px; font-weight:600; color:#4A4A4A;
  max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
[data-theme="dark"] .kn-user-name { color:var(--ink-mid, #D0CFC9); }

.kn-user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:200px; background:#FEFCF8;
  border:1px solid rgba(107,79,58,.13); border-radius:12px;
  box-shadow:0 8px 32px rgba(107,79,58,.14);
  padding:6px; opacity:0; pointer-events:none;
  transition:opacity 160ms, transform 160ms cubic-bezier(0.16,1,0.3,1);
  transform:translateY(-4px); z-index:700;
}
[data-theme="dark"] .kn-user-dropdown {
  background:#1A1A1A; border-color:rgba(200,155,60,.15);
  box-shadow:0 8px 32px rgba(0,0,0,.50);
}
.kn-user.open .kn-user-dropdown { opacity:1; pointer-events:all; transform:translateY(0); }
.kn-user-header { padding:8px 10px 10px; border-bottom:1px solid rgba(107,79,58,.08); margin-bottom:4px; }
[data-theme="dark"] .kn-user-header { border-bottom-color:rgba(200,155,60,.08); }
.kn-user-header-name { font-size:13px; font-weight:700; color:#2D2D2D; margin-bottom:2px; }
[data-theme="dark"] .kn-user-header-name { color:#F0EDE8; }
.kn-user-header-email { font-size:11px; color:#8B6E56; }
[data-theme="dark"] .kn-user-header-email { color:rgba(200,155,60,.6); }
.kn-user-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:7px; font-size:13px; font-weight:500; color:#4A4A4A;
  text-decoration:none; cursor:pointer; background:none; border:none;
  width:100%; font-family:'DM Sans',system-ui,sans-serif;
  transition:background 100ms; text-align:left;
}
.kn-user-item:hover { background:rgba(107,79,58,.06); }
.kn-user-item.danger { color:#A63A3A; }
.kn-user-item.danger:hover { background:rgba(166,58,58,.08); }
[data-theme="dark"] .kn-user-item { color:#D0CFC9; }
[data-theme="dark"] .kn-user-item:hover { background:rgba(200,155,60,.08); }
[data-theme="dark"] .kn-user-item.danger { color:#E07070; }

/* ── HAMBURGER ───────────────────────────────────────────── */
.kn-hamburger {
  display: none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:36px; height:36px;
  border:1px solid rgba(107,79,58,.18); border-radius:7px;
  background:transparent; cursor:pointer; padding:0; flex-shrink:0;
}
[data-theme="dark"] .kn-hamburger { border-color:rgba(200,155,60,.20); }
.kn-hamburger:hover { background:rgba(107,79,58,.07); }
[data-theme="dark"] .kn-hamburger:hover { background:rgba(200,155,60,.08); }
.kn-hamburger span {
  display:block; width:18px; height:1.5px;
  background:#6B4F3A; border-radius:99px;
  transition:transform 250ms, opacity 250ms;
}
[data-theme="dark"] .kn-hamburger span { background:#C89B3C; }
.kn-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.kn-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.kn-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE DRAWER ───────────────────────────────────────── */
.kn-drawer { position:fixed; inset:0; z-index:490; pointer-events:none; }
.kn-drawer-overlay {
  position:absolute; inset:0; background:rgba(45,45,45,.48);
  opacity:0; transition:opacity 280ms; backdrop-filter:blur(3px);
}
.kn-drawer.open .kn-drawer-overlay { opacity:1; pointer-events:all; }
.kn-drawer-panel {
  position:absolute; top:0; right:0; bottom:0;
  /* GENUINELY DIPERBAIKI (Fase Audit Navbar, Prioritas 3): lebar dikurangi
     dari 90vw menjadi 82vw -- dikonfirmasi via pengujian interaktif genuine
     area overlay yang genuinely bisa diklik pada viewport 390px sebelumnya
     hanya ~50px (13% lebar layar), menyebabkan Playwright timeout mencoba
     klik overlay (elemen panel drawer genuinely mencegat pointer events di
     area tengah/kanan). Overlay TETAP berfungsi (dibuktikan klik presisi
     pada area sempit yang tersisa genuinely berhasil menutup drawer) --
     ini genuinely peningkatan UX (area tap lebih layak), bukan perbaikan
     fungsi yang genuinely rusak total. */
  width:min(340px,82vw); background:#FEFCF8;
  border-left:1px solid rgba(107,79,58,.12);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(0.16,1,0.3,1);
  pointer-events:all; overflow-y:auto;
}
[data-theme="dark"] .kn-drawer-panel { background:#111111; border-left-color:rgba(200,155,60,.12); }
.kn-drawer.open .kn-drawer-panel { transform:translateX(0); }
.kn-drawer-header {
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; border-bottom:1px solid rgba(107,79,58,.10); flex-shrink:0;
}
[data-theme="dark"] .kn-drawer-header { border-bottom-color:rgba(200,155,60,.10); }
.kn-drawer-logo {
  font-family:'Noto Serif JP',serif; font-size:18px; font-weight:700;
  color:#6B4F3A; text-decoration:none;
}
[data-theme="dark"] .kn-drawer-logo { color:#C89B3C; }
.kn-drawer-close {
  width:32px; height:32px; border-radius:6px;
  border:1px solid rgba(107,79,58,.18); background:transparent;
  color:#6B4F3A; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 120ms;
}
[data-theme="dark"] .kn-drawer-close { border-color:rgba(200,155,60,.20); color:#C89B3C; }
.kn-drawer-close:hover { background:rgba(107,79,58,.08); }
.kn-drawer-body { flex:1; padding:12px 16px 24px; display:flex; flex-direction:column; gap:2px; }
.kn-drawer-section {
  font-size:9px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#6F6F6F; padding:12px 4px 4px;
}
.kn-drawer-link {
  display:flex; align-items:center; gap:10px; padding:10px;
  border-radius:8px; text-decoration:none; color:#4A4A4A;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:14px; font-weight:600; transition:background 100ms, color 100ms;
}
.kn-drawer-link:hover { background:rgba(107,79,58,.07); color:#6B4F3A; }
.kn-drawer-link.active { color:#6B4F3A; background:rgba(107,79,58,.08); }
[data-theme="dark"] .kn-drawer-link { color:#C8C5BF; }
[data-theme="dark"] .kn-drawer-link:hover { background:rgba(200,155,60,.08); color:#C89B3C; }
[data-theme="dark"] .kn-drawer-link.active { color:#C89B3C; background:rgba(200,155,60,.09); }
.kn-drawer-link-icon {
  width:32px; height:32px; border-radius:7px; background:rgba(107,79,58,.07);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
[data-theme="dark"] .kn-drawer-link-icon { background:rgba(200,155,60,.08); }
.kn-drawer-sep { height:1px; background:rgba(107,79,58,.08); margin:6px 0; }
[data-theme="dark"] .kn-drawer-sep { background:rgba(200,155,60,.08); }
.kn-drawer-footer {
  padding:16px; border-top:1px solid rgba(107,79,58,.10);
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
[data-theme="dark"] .kn-drawer-footer { border-top-color:rgba(200,155,60,.10); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kn-btn-primary.kn-hide-1100 { display: none; }
}
@media (max-width: 900px) {
  .kn-logo-sep, .kn-logo-tag { display: none; }
}
@media (max-width: 768px) {
  .kn-links { display: none !important; }
  .kn-hamburger { display: flex; }
  /* .kn-btn-ghost dipakai DUA tombol berbeda: #knLoginBtn di navbar atas
     (digantikan hamburger di lebar ini, jadi disembunyikan) dan
     #knDrawerLogin di footer drawer mobile (justru SATU-SATUNYA jalan
     masuk login di lebar ini). Selector tanpa `.kn-nav` menyembunyikan
     keduanya sekaligus -- drawer tidak pernah bisa dipakai untuk login
     di ponsel manapun. Dipersempit ke navbar atas saja. */
  .kn-nav .kn-btn-ghost { display: none; }
  .kn-btn-primary.kn-hide-mobile { display: none; }
}
@media (max-width: 480px) {
  nav.kn-nav { padding: 0 14px !important; }
}

/* ── FOCUS ───────────────────────────────────────────────── */
.kn-nav *:focus-visible {
  outline: 2px solid #6B4F3A; outline-offset: 2px; border-radius: 4px;
}
[data-theme="dark"] .kn-nav *:focus-visible { outline-color: #C89B3C; }

/* ── DASH-NAV OVERRIDE ───────────────────────────────────── */
.dash-nav {
  height: 64px !important;
  background: rgba(248,243,233,.97) !important;
  border-bottom: 1px solid rgba(107,79,58,.12) !important;
}
[data-theme="dark"] .dash-nav {
  background: rgba(248,243,233,.92) !important;
  border-bottom-color: rgba(200,155,60,.12) !important;
}

/* ── HTML BODY SPECIFICITY OVERRIDE (untuk kalahkan inline nav{}) ── */
html body nav.kn-nav {
  position: sticky !important;
  top: 0 !important;
  bottom: auto !important;
  height: 64px !important;
  min-height: 64px !important;
  z-index: 500 !important;
  display: flex !important;
  background: rgba(248,243,233,.97) !important;
}
[data-theme="dark"] html body nav.kn-nav {
  background: rgba(248,243,233,.92) !important;
}
html body nav.kn-nav .kn-links { display: flex !important; }
@media (max-width: 768px) {
  html body nav.kn-nav .kn-links { display: none !important; }
}

/* ── LEGACY NAV SAFE HIDE ── */
.kn-legacy-hidden { display: none !important; }


/* ── NAVBAR FIXED + GLASSMORPHISM (override) ── */
html body nav.kn-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  z-index: 9999 !important;
  background: rgba(248, 243, 233, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(107, 79, 58, 0.14) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
nav.kn-nav.scrolled {
  box-shadow: 0 4px 24px rgba(107, 79, 58, 0.18) !important;
}
[data-theme="dark"] html body nav.kn-nav {
  background: #1A1A1A !important;
}


/* Varian mode gelap untuk label seksi — lihat catatan di awal berkas.
   Tanpa ini, #6F6F6F duduk di atas latar dropdown gelap dengan rasio 3,46. */
[data-theme="dark"] .kn-dd-section,
[data-theme="dark"] .kn-mega-head,
[data-theme="dark"] .kn-drawer-section { color: #A5A29B; }