/* Effect: glazen menupil (glasnav) — v0.1.0
   Zwevende pil bovenaan met matglas (backdrop-filter), dunne lichtrand en één groene actieknop.
   Herbruikbaar: <nav class="glasnav"> met <a class="glasnav-merk">, <a> links en <a class="glasnav-knop">.
   Kost: laag (één backdrop-filter-laag). Valt terug op een donkere pil zonder backdrop-filter. */
.glasnav {
  position: fixed; top: 12px; left: 50%; z-index: 50;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  width: max-content; max-width: calc(100% - 20px);
  padding: 5px 5px 5px 8px; border-radius: 999px;
  background: rgba(14, 10, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glasnav { background: rgba(22, 16, 30, 0.42); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
  .glasnav.is-gescrold { background: rgba(14, 10, 20, 0.62); }
}
.glasnav.is-gescrold { border-color: rgba(57, 255, 144, 0.22); }
.glasnav a { text-decoration: none; color: var(--ink, #f1ecf8); }
.glasnav-merk { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 2px; border-radius: 999px; }
.glasnav-merk img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 140, 60, 0.45), 0 0 14px rgba(255, 90, 0, 0.35); }
.glasnav-merk span { font: 400 17px/1 var(--display, serif); letter-spacing: 0.02em; }
.glasnav-link { padding: 10px 12px; border-radius: 999px; font: 500 14px/1 var(--sans, sans-serif); color: rgba(241, 236, 248, 0.82) !important; transition: background 0.25s, color 0.25s; }
.glasnav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff !important; }
.glasnav-knop {
  margin-left: 4px; padding: 10px 16px; border-radius: 999px;
  background: var(--groen, #39ff90); color: #04130a !important; font: 700 14px/1 var(--sans, sans-serif);
  box-shadow: 0 0 0 rgba(57, 255, 144, 0); transition: box-shadow 0.3s, transform 0.3s;
}
.glasnav-knop:hover { box-shadow: 0 6px 22px -6px rgba(57, 255, 144, 0.7); transform: translateY(-1px); }
@media (max-width: 419px) {
  .glasnav-merk span { display: none; }
  .glasnav-link { padding: 10px 9px; font-size: 13px; }
  .glasnav-knop { padding: 10px 13px; font-size: 13px; }
}