/* ══════════════════════════════════════════════════════════
   KOMISIYONERI — HEADER (TOP NAV)
   Single global header shared by every page in the SPA — there is
   only one <nav class="topnav"> in the whole app, so there is no
   per-module duplicate to reconcile here. This file centralizes it
   as a standalone stylesheet per the platform's shared-component
   convention (see bottom-nav.css, fab.css).

   Deliberately kept position:fixed (not sticky): every page's content
   area, dozens of positioned panels (notif dropdown, dashboard
   sidebar, toasts, modal headers, etc.) already assume a 64px header
   that's removed from normal document flow. Switching to `sticky`
   would require re-deriving all of those offsets for no reproducible
   bug — no header/overlay stacking issue tied to `fixed` was found in
   this codebase's audit.

   NOTE: the hamburger button/menu/overlay's own base appearance is set
   via inline styles on their HTML elements (index.html), not here —
   only their structural/positioning rules live in CSS. Their
   fine-grained small-screen size tweaks (≤660px / ≤360px) stay inline
   in index.html's shared mobile-tightening media queries alongside
   unrelated header controls (logo, language switcher, notif bell) —
   splitting a single breakpoint's rules across files would hurt
   maintainability more than it helps, so only the two fully
   self-contained hamburger rules below were moved.
══════════════════════════════════════════════════════════ */

.topnav{
  position:fixed;top:0;left:0;right:0;height:64px;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;padding:0 3.5%;
  background:var(--nav-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1.5px solid var(--border);
  box-shadow:0 2px 20px rgba(13,59,140,.06);
  padding-left:max(3.5%,env(safe-area-inset-left));
  padding-right:max(3.5%,env(safe-area-inset-right));
}
.topnav-logo{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0}
.logo-mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--blue));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(13,59,140,.3)}
.logo-mark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9}
.logo-text strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-weight:700;color:var(--navy);line-height:1}
.logo-text span{font-size:.62rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.topnav-links{display:flex;gap:.4rem}
.nl{background:none;border:none;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;color:var(--muted);padding:.4rem .9rem;border-radius:8px;transition:var(--tr)}
.nl:hover,.nl.active{background:var(--light);color:var(--blue);font-weight:600}

/* Mobile hamburger dropdown rows — same hover language as .nl above, laid
   out as a full-width icon+label row instead of an inline pill. */
.hm-item{display:flex;align-items:center;gap:.8rem;width:100%;padding:.7rem 1.1rem;background:none;border:none;font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:600;color:var(--dark);text-align:left;cursor:pointer;transition:var(--tr)}
.hm-item svg{width:19px;height:19px;flex-shrink:0;stroke:currentColor}
.hm-item span{flex:1}
.hm-item:hover{background:var(--light);color:var(--blue)}

/* Hamburger button visibility: only the mobile trigger for the drawer
   that already holds all secondary nav — desktop keeps .topnav-links
   visible directly, which is standard responsive nav, not a bug. */
@media(min-width:1025px){ #hamburger-btn{display:none!important} }
@media(max-width:1024px){ #hamburger-btn{display:flex!important} }

/* Hamburger dropdown: right safe-area offset for notched phones */
#hamburger-menu{padding-right:max(.6rem,env(safe-area-inset-right))!important}

/* #hamburger-menu (z-index:999) and #hamburger-overlay (z-index:998) are
   defined inline in index.html and intentionally left untouched here —
   bottom-nav.css uses z-index:950 specifically so the drawer and its
   backdrop always render above the bottom tab bar. */