/* ========================================================================== nav.css — sabit navbar, glass, tema değiştirici, mobil menü, footer ========================================================================== */ /* ------------------------------------------------------------- Navbar */ .site-nav { position: fixed; top: 0; right: 0; left: 0; z-index: var(--z-nav); height: var(--nav-h); } .glass { background: hsl(var(--background) / .8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid hsl(var(--border) / .5); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; } .site-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; line-height: 1; text-decoration: none; white-space: nowrap; } /* --------------------------------------------------------- Masaüstü menü */ .site-nav__menu { display: none; margin-left: auto; } .site-nav__menu ul { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; } .site-nav__menu a { font-family: var(--font-mono); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .site-nav__menu a:hover { color: hsl(var(--foreground)); } .site-nav__menu .current-menu-item > a, .site-nav__menu .current_page_item > a, .site-nav__menu .current-menu-ancestor > a, .site-nav__menu [aria-current="page"] { color: hsl(var(--foreground)); font-weight: 700; } @media (min-width: 768px) { .site-nav__menu { display: block; } } /* ------------------------------------------------------------ Eylemler */ .site-nav__actions { display: flex; align-items: center; gap: .25rem; } .theme-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-control); color: hsl(var(--muted-foreground)); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .theme-toggle:hover, .nav-toggle:hover { background: hsl(var(--muted) / .6); color: hsl(var(--foreground)); } /* Güneş/ay değişimi — CSS ile, JS yalnızca .dark sınıfını çevirir. */ .theme-toggle .icon--moon { display: none; } .dark .theme-toggle .icon--moon { display: block; } .dark .theme-toggle .icon--sun { display: none; } .nav-toggle { display: inline-flex; } @media (min-width: 768px) { .nav-toggle { display: none; } } @media (max-width: 767px) { .theme-toggle, .nav-toggle { width: var(--tap-target); height: var(--tap-target); } } /* --------------------------------------------------------- Mobil menü */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; padding: calc(var(--nav-h) + 1.5rem) var(--container-pad) 2rem; background: hsl(var(--background) / .92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow-y: auto; overscroll-behavior: contain; } .mobile-menu[hidden] { display: none; } .mobile-menu__close { position: absolute; top: calc((var(--nav-h) - var(--tap-target)) / 2); right: var(--container-pad); display: inline-flex; align-items: center; justify-content: center; width: var(--tap-target); height: var(--tap-target); border-radius: var(--radius-control); color: hsl(var(--foreground)); } .mobile-menu ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; } .mobile-menu a { display: block; padding: .75rem 0; min-height: var(--tap-target); font-family: var(--font-mono); font-size: 1.5rem; color: hsl(var(--muted-foreground)); text-decoration: none; } .mobile-menu a:hover, .mobile-menu .current-menu-item > a, .mobile-menu [aria-current="page"] { color: hsl(var(--foreground)); } body.is-menu-open { overflow: hidden; } @media (min-width: 768px) { .mobile-menu { display: none !important; } } /* -------------------------------------------------------------- Footer */ .site-footer { border-top: 1px solid hsl(var(--border)); padding-block: 3rem; text-align: center; } .site-footer__menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 0 0 2rem; padding: 0; list-style: none; } .site-footer__menu a { font-family: var(--font-mono); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .site-footer__menu a:hover { color: hsl(var(--foreground)); } .site-footer__copy { margin-top: 2rem; font-family: var(--font-mono); font-size: var(--text-meta); color: hsl(var(--muted-foreground)); }