/* Desktop header menu looks chosen in the panel (Menü ve bağlantılar > Menü görünümü).
   The panel preview loads this file too, so each look is complete without crv-ui.css. */
.vd-nav[data-nav-style]{display:flex;align-items:center;gap:.25rem}
/* The header menu is desktop only; phones and tablets keep the tab bar (crv-ui.css hides .vd-nav below 1024px). */
@media(max-width:1023px){.vd-header .vd-nav[data-nav-style]{display:none}}
.vd-nav[data-nav-style] a{display:inline-flex;align-items:center;gap:.4rem;padding:.375rem .75rem;border:0;border-radius:8px;background:transparent;color:#334155;font:600 14px/20px Inter,system-ui,sans-serif;text-decoration:none;transition:background-color .12s,color .12s,transform .12s,box-shadow .12s}
.vd-nav[data-nav-style] a:hover{background:#eef2fb;color:#111827;text-decoration:none}
.vd-nav[data-nav-style] a[aria-current=page]{background:#dae2fd;color:#131b2e}
.vd-nav[data-nav-style] a:focus-visible{outline:3px solid #111827;outline-offset:2px}

/* Comic faces: Anton is the logo face, Bangers the classic balloon lettering. */
.vd-nav[data-nav-font=anton] a{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:16px;letter-spacing:.04em}
.vd-nav[data-nav-font=bangers] a{font-family:Bangers,Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:19px;letter-spacing:.07em}
.vd-nav[data-nav-case=upper] a{text-transform:uppercase}

/* "blok": every link is an inked, slanted block like the logo; hover and the current page fill with colour. */
.vd-nav[data-nav-style=blok]{gap:.6rem;padding:0 6px 4px 0}
.vd-nav[data-nav-style=blok] a{padding:.3rem .85rem;border:2px solid #111827;border-radius:0;background:#fff;color:#111827;box-shadow:3px 3px 0 #111827;transform:skewX(-8deg)}
.vd-nav[data-nav-style=blok] a:hover{background:var(--nav-hover,#ffd23f);color:var(--nav-hover-ink,#111827);box-shadow:4px 4px 0 #111827;transform:skewX(-8deg) translate(-1px,-1px)}
.vd-nav[data-nav-style=blok] a[aria-current=page]{background:var(--nav-active,#e23b2e);color:var(--nav-active-ink,#fff)}

/* "vurgu": plain comic lettering; only the current page is a slanted block, hover draws a marker stroke. */
.vd-nav[data-nav-style=vurgu]{gap:.5rem;padding:0 6px 4px 0}
.vd-nav[data-nav-style=vurgu] a{border:2px solid transparent;border-radius:0;color:#111827}
.vd-nav[data-nav-style=vurgu] a:hover{background:linear-gradient(transparent 58%,var(--nav-hover,#ffd23f) 58%,var(--nav-hover,#ffd23f) 92%,transparent 92%);color:#111827}
.vd-nav[data-nav-style=vurgu] a[aria-current=page]{border-color:#111827;background:var(--nav-active,#e23b2e);color:var(--nav-active-ink,#fff);box-shadow:3px 3px 0 #111827;transform:skewX(-8deg)}
/* Narrow desktops: blocks take more room than plain links. */
@media(max-width:1279px){
  .vd-nav[data-nav-style=blok],.vd-nav[data-nav-style=vurgu]{gap:.4rem}
  .vd-nav[data-nav-style] a{padding:.25rem .55rem}
  .vd-nav[data-nav-font=anton] a{font-size:14px;letter-spacing:.03em}
  .vd-nav[data-nav-font=bangers] a{font-size:17px;letter-spacing:.05em}
}
@media(prefers-reduced-motion:reduce){.vd-nav[data-nav-style] a,.vd-nav[data-nav-style] a:hover{transition:none}}