/* Navigation buttons */
.navbar nav { gap: 24px; }
.navbar .brand { flex-basis: 220px; }
.nav-links { min-width: 0; justify-content: flex-end; gap: 12px; }
.nav-links li { min-width: 0; }
.nav-links a,
.nav-links a.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 2px solid var(--brand-ink);
  border-radius: 999px;
  background: var(--brand-cream);
  box-shadow: 3px 3px 0 var(--brand-ink);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.nav-links a[href="#tummy-time"] { background: var(--brand-orange); }
.nav-links a[href="#iletisim"] { background: var(--brand-cobalt); color: var(--brand-white); }
.nav-links a:hover { color: var(--brand-ink); }
.nav-links a[href="#iletisim"]:hover { color: var(--brand-white); }
.nav-links a.is-active,
.nav-links a.is-active:hover {
  background: var(--brand-orange);
  color: var(--brand-ink);
  box-shadow: 3px 3px 0 var(--brand-ink), 0 0 0 2px var(--brand-orange);
}
.nav-links a:focus-visible { outline: 4px solid var(--brand-cobalt); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-on .nav-links a { transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
  .motion-on .nav-links a:hover { transform: translateY(-2px); }
  .motion-on .nav-links a:active { transform: translate(2px, 2px); }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; margin-left: auto; gap: 8px 12px; }
  .nav-links a { white-space: normal; }
}

@media (max-width: 768px) {
  .navbar nav { gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  .navbar .brand { flex: none; }
  .nav-links { gap: 8px 12px; }
  .nav-links a,
  .nav-links a.is-active { width: 100%; padding: 8px 10px; white-space: normal; font-size: 15px; }
}