/**
 * nav.css — ŘΨØŬ v2.1.0
 * Navbar top + Mobile drawer + Search results
 */

/* ── Navbar ─────────────────────────────────────────────────────── */
#app-nav {
  position  : fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  height    : var(--nav-h);
  background: rgba(6,16,30,.93);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--bdr-mid);
}
.nav-inner {
  display    : flex; align-items:center; gap:var(--sp-2);
  height     : 100%; max-width:1440px;
  margin     : 0 auto; padding: 0 var(--sp-5);
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
.nav-logo img { height:26px; width:auto; }
.nav-logo-text { font-size:var(--font-size-md); font-weight:800; letter-spacing:-.02em; color:var(--txt-primary); }
.nav-spacer    { flex:1; }

/* Search */
.nav-search {
  position:relative; display:flex; align-items:center;
  background:var(--bg-float); border:1px solid var(--bdr-subtle);
  border-radius:var(--r-pill); padding:0 14px; gap:8px;
  width:min(360px,36vw); height:36px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.nav-search:focus-within { border-color:var(--clr-accent); box-shadow:0 0 0 3px var(--clr-accent-glow); }
.nav-search svg { color:var(--txt-tertiary); flex-shrink:0; width:15px; height:15px; }
.nav-search input {
  flex:1; background:none; border:none; outline:none;
  color:var(--txt-primary); font-size:var(--font-size-sm);
}
.nav-search input::placeholder { color:var(--txt-tertiary); }
.nav-search-clear {
  background:none; border:none; color:var(--txt-tertiary); cursor:pointer;
  padding:0; line-height:1; display:none;
  transition:color var(--dur-fast);
}
.nav-search-clear.show { display:block; }
.nav-search-clear:hover { color:var(--clr-accent); }

/* Search dropdown */
.nav-search-results {
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--srf-01); border:1px solid var(--bdr-strong);
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-xl); z-index:var(--z-dropdown);
  max-height:380px; overflow-y:auto;
}
.nav-search-results.open { display:block; animation:scaleIn .15s var(--ease); }
.search-result-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; cursor:pointer; transition:background var(--dur-fast);
}
.search-result-item:hover { background:var(--clr-accent-subtle); }
.search-result-item + .search-result-item { border-top:1px solid var(--bdr-subtle); }
.search-ri-thumb { width:38px; height:54px; object-fit:cover; border-radius:var(--r-xs); flex-shrink:0; background:var(--bg-float); }
.search-ri-info  { flex:1; min-width:0; }
.search-ri-title { font-size:var(--font-size-sm); font-weight:600; }
.search-ri-meta  { font-size:var(--font-size-xs); color:var(--txt-secondary); margin-top:2px; }
.search-no-result { padding:20px; text-align:center; color:var(--txt-secondary); font-size:var(--font-size-sm); }

/* Nav buttons */
.nav-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-md);
  font-size:var(--font-size-sm); font-weight:500; color:var(--txt-secondary);
  transition:all var(--dur-fast); white-space:nowrap; cursor:pointer;
}
.nav-btn:hover  { color:var(--clr-accent); background:var(--clr-accent-subtle); }
.nav-btn.active { color:var(--clr-accent); }
.nav-btn svg    { width:16px; height:16px; flex-shrink:0; }

/* Lang switcher */
.nav-lang {
  display:flex; background:var(--bg-float);
  border:1px solid var(--bdr-subtle); border-radius:var(--r-pill);
  padding:3px; gap:2px; flex-shrink:0;
}
.nav-lang-btn {
  padding:3px 9px; border-radius:var(--r-pill);
  font-size:var(--font-size-xs); font-weight:700; color:var(--txt-secondary);
  transition:all var(--dur-fast); cursor:pointer;
}
.nav-lang-btn.active { background:var(--clr-accent); color:var(--txt-inverse); }
.nav-lang-btn:hover:not(.active) { color:var(--txt-primary); }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:8px; border-radius:var(--r-sm);
  transition:background var(--dur-fast);
}
.nav-hamburger:hover { background:var(--bg-float); }
.nav-hamburger span { display:block; width:20px; height:2px; background:var(--txt-primary); border-radius:2px; transition:all var(--dur-base) var(--ease); }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile Drawer ───────────────────────────────────────────────── */
/* Backdrop harus di BAWAH navbar agar hamburger tetap bisa diklik */
#drawer-backdrop { z-index:calc(var(--z-nav) - 2); }

#app-drawer {
  position:fixed; top:0; left:0; bottom:0;
  width:min(300px,82vw); z-index:var(--z-nav);
  background:var(--bg-raised); border-right:1px solid var(--bdr-mid);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform var(--dur-slow) var(--ease);
}
#app-drawer.open { transform:none; }

.drawer-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--bdr-subtle); flex-shrink:0;
}
.drawer-logo { display:flex; align-items:center; gap:8px; }
.drawer-logo img  { height:22px; }
.drawer-logo span { font-size:var(--font-size-md); font-weight:800; }
.drawer-close { width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--txt-secondary); transition:all var(--dur-fast); cursor:pointer; }
.drawer-close:hover { background:var(--bg-float); color:var(--txt-primary); }

.drawer-search-wrap { padding:12px 14px; border-bottom:1px solid var(--bdr-subtle); flex-shrink:0; }

.drawer-body { flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }

.drawer-nav-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r-md);
  font-size:var(--font-size-sm); font-weight:500; color:var(--txt-secondary);
  transition:all var(--dur-fast); cursor:pointer;
}
.drawer-nav-item:hover  { color:var(--clr-accent); background:var(--clr-accent-subtle); }
.drawer-nav-item.active { color:var(--clr-accent); background:var(--clr-accent-subtle); font-weight:600; }
.drawer-nav-item svg    { width:18px; height:18px; flex-shrink:0; }

.drawer-divider { height:1px; background:var(--bdr-subtle); margin:6px 12px; }

.drawer-footer { padding:14px 18px; border-top:1px solid var(--bdr-subtle); flex-shrink:0; }
.drawer-lang-row { display:flex; align-items:center; justify-content:space-between; }
.drawer-lang-label { font-size:var(--font-size-xs); color:var(--txt-secondary); font-weight:500; }
.drawer-lang-btns { display:flex; gap:6px; }
.drawer-lang-btn {
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:var(--font-size-xs); font-weight:700; cursor:pointer;
  background:var(--bg-float); color:var(--txt-secondary); border:1px solid var(--bdr-subtle);
  transition:all var(--dur-fast);
}
.drawer-lang-btn.active { background:var(--clr-accent); color:var(--txt-inverse); border-color:var(--clr-accent); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-search, .nav-lang, .nav-btn-desktop { display:none !important; }
  .nav-hamburger { display:flex; }
}
@media (min-width: 769px) {
  .nav-hamburger, #app-drawer, #drawer-backdrop { display:none !important; }
}

/* ── PWA Install button (di drawer footer) ───────────────────────── */
.btn-pwa-install {
  display    : none;       /* default hidden, ditampilkan via JS */
  width      : 100%;
  margin-top : 12px;
  padding    : 10px 0;
  border-radius: var(--r-md);
  border     : 1.5px solid var(--clr-accent);
  background : var(--clr-accent-subtle);
  color      : var(--clr-accent);
  font-size  : var(--font-size-sm);
  font-weight: 600;
  cursor     : pointer;
  transition : background var(--dur-fast);
}
.btn-pwa-install:hover {
  background: var(--clr-accent);
  color     : var(--txt-inverse);
}