/* ══════════════════════════════════════════
   MENU — des[tec] / Piql 2026
   Topbar · Hamburger · Nav · Theme toggle
   ══════════════════════════════════════════ */

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-radius:14px;margin:0 auto;width:100%;
  position:sticky;top:10px;z-index:100;gap:10px;transition:box-shadow .3s;
  overflow:visible;max-width:932px;isolation:isolate;
}
.topbar:hover{
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px var(--border2),
    0 8px 32px rgba(0,0,0,.3),0 0 60px var(--accent-neon2);
}
.topbar-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.topbar-logo svg{height:22px;width:auto}
.topbar-logo svg .dl1,.topbar-logo svg .dl2{fill:var(--text)}
.logo-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent-neon),0 0 20px rgba(245,166,35,.4);
  animation:pulse 2s ease infinite;flex-shrink:0;
}

/* hamburger (hidden on desktop) */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:6px;border:none;background:none;border-radius:8px;
  transition:background .2s;flex-shrink:0;
}
.hamburger:hover{background:var(--glass-bg)}
.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* nav links */
.topbar-nav{
  display:flex;position:static;background:none;border:none;
  border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;flex-direction:row;gap:4px;box-shadow:none;
}
.nav-link{
  font-family:'Geist Mono',monospace;font-size:10.5px;font-weight:500;
  color:var(--text-mid);text-decoration:none;padding:5px 12px;border-radius:9px;
  border:1px solid transparent;transition:all .2s;letter-spacing:.03em;
  display:inline-block;position:relative;overflow:hidden;
}
.nav-link::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);border-radius:0 2px 2px 0;
  transform:scaleY(0);transition:transform .2s;
}
.nav-link:hover{color:var(--text);background:var(--accent-dim);border-color:var(--accent-b)}
.nav-link:hover::before{transform:scaleY(1)}
.nav-link.active{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-b)}
.nav-link.active::before{transform:scaleY(1)}

/* right side */
.topbar-right{display:flex;align-items:center;gap:8px}
.toggle-wrap{display:flex;align-items:center;gap:6px}
.toggle-label{font-family:'Geist Mono',monospace;font-size:10px;color:var(--text-dim)}
.toggle-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);
  background:var(--card);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:15px;transition:all .2s;
  flex-shrink:0;position:relative;overflow:hidden;
}
.toggle-btn:hover{
  border-color:var(--accent-b);
  box-shadow:0 0 0 1px var(--accent-b),0 0 16px var(--accent-neon2);
}

/* ── RESPONSIVE ── */
@media(max-width:899px){
  .hamburger{display:flex;margin-left:auto}
  .topbar-right{display:none}
  .topbar-nav{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;gap:4px;padding:12px;
    background:var(--bg2);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:1px solid var(--border2);border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.45);
  }
  .topbar-nav.open{display:flex}
  .nav-link{font-size:12px;padding:10px 14px;display:block}
  .topbar-nav .toggle-wrap{
    display:flex;align-items:center;gap:6px;
    padding:10px 14px;border-top:1px solid var(--border2);margin-top:4px;
  }
  .topbar-nav .toggle-label{display:inline-block}
}
@media(min-width:900px){
  .topbar{padding:14px 28px;top:16px}
  .hamburger{display:none}
  .topbar-nav{
    display:flex !important;position:static;background:none;border:none;
    border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0;flex-direction:row;gap:4px;box-shadow:none;
    animation:none;max-height:none !important;opacity:1 !important;
  }
  .nav-link{font-size:10.5px;padding:5px 12px;display:inline-block}
  .toggle-label{display:inline-block}
}