/* Nav — the site's one header, generated by build-pages.mjs from
   sitemap.mjs (NAV) between the NAV markers of every page. Same shape as
   bamp.com.tr: the logo on the left, five flat links on the right, and on
   narrow screens a burger that opens the same five as an overlay. Loaded
   last so these rules own .bp-nav on index, showcase and the content pages. */

.bp-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px clamp(20px, 4vw, 48px);
  background: rgba(11,11,12,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.bp-nav__home { display: block; flex: none; position: relative; z-index: 2; }
.bp-nav__mark { display: block; height: 32px; width: auto; }

.bp-nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.bp-nav__links a {
  color: var(--sc-ink-soft); text-decoration: none;
  font: 500 13px/1 var(--sc-font-text); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; transition: color 160ms;
}
.bp-nav__links a:hover, .bp-nav__links a[aria-current="page"] { color: var(--sc-ink); }

/* The Grid sits last, behind a rule, with its own green dot and a
   "Platform" tag: Bamp's platform, not one of Bamp's pages. */
.bp-nav__links a.bp-nav__platform {
  display: inline-flex; align-items: center; gap: 8px;
  padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid rgba(255,255,255,.18);
}
.bp-nav__platform::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex: none; }
.bp-nav__platform small {
  font: 500 9.5px/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 5px; border: 1px solid rgba(255,255,255,.22); border-radius: 3px; color: var(--sc-ink-soft);
}

/* ---- the burger and the overlay (narrow screens) ---- */
.bp-nav__burger {
  display: none; position: relative; z-index: 2;
  width: 40px; height: 40px; margin: -8px -8px -8px 0; padding: 0;
  border: 0; background: none; color: var(--sc-ink); cursor: pointer;
}
.bp-nav__burger svg { position: absolute; inset: 0; margin: auto; fill: currentColor; transition: opacity 160ms; }
.bp-nav__burger svg:last-child, .bp-nav.is-open .bp-nav__burger svg:first-child { opacity: 0; }
.bp-nav.is-open .bp-nav__burger svg:last-child { opacity: 1; }

@media (max-width: 640px) {
  .bp-nav__burger { display: block; }
  .bp-nav__links {
    /* absolute, not fixed: the bar's backdrop-filter makes it the containing block either way */
    position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 1;
    box-sizing: border-box;
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px;
    padding: 96px clamp(20px, 6vw, 48px) 48px;
    background: var(--sc-canvas);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms, transform 200ms, visibility 0s linear 200ms;
  }
  .bp-nav.is-open .bp-nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms, transform 200ms, visibility 0s; }
  .bp-nav__links a { font: 500 clamp(28px, 8vw, 40px)/1.1 var(--sc-font-display); letter-spacing: .01em; color: var(--sc-ink); }
  .bp-nav__links a[aria-current="page"] { color: var(--sc-ink-soft); }
  .bp-nav__links a.bp-nav__platform { margin-top: 8px; padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); gap: 12px; }
  .bp-nav__platform small { font-size: 11px; padding: 4px 6px; }
  html.bp-nav-lock, html.bp-nav-lock body { overflow: hidden; }
}