/* ==========================================================================
   4. NAVİGASYON
   ========================================================================== */
/* DİKKAT: bu kural #navbar'a kilitli, çıplak `nav` değil. Portalın içinde de
   bir <nav> var (portfolyo dizini). */
#navbar {
    margin-top: max(45px, calc(env(safe-area-inset-top) + 20px));
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    z-index: 10;
    /* Intro bitince yerine süzülerek gelir. Süre, perdenin sönmesiyle (0.45s)
       aynı pencereye sığacak kadar: 0.9s + 0.15s gecikme, perde gittikten
       sonra da yerine oturmayı sürdürüyor, sayfa bir saniye daha kuruluyor
       gibi görünüyordu. Gecikme yok — ikisi birlikte başlıyor. */
    transition: opacity 0.5s var(--ease-out),
                transform 0.5s var(--ease-out);
}

body.intro-active #navbar {
    opacity: 0;
    transform: translateY(-16px);
    pointer-events: none;
}

.nav-btn {
    background: transparent;
    border: none;
    padding: 14px 28px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.4s var(--ease-out),
                color 0.4s var(--ease-out),
                transform 0.4s var(--ease-out);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Hover'da harf aralığı yerine renk + transform: letter-spacing animasyonu
   her karede layout tetikliyordu. */
.nav-btn:hover,
.nav-btn:focus-visible {
    background: var(--hover-bg);
    color: var(--hover-text);
    transform: scale(1.04);
}

.nav-btn:active { transform: scale(0.98); }

.nav-btn:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

.nav-btn[disabled] { opacity: 0.45; cursor: default; }
.nav-btn[disabled]:hover { background: transparent; color: inherit; transform: none; }

#lang-toggle { padding: 14px 22px; font-weight: 800; margin-left: 4px; }

.btn-text {
    display: inline-block;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.btn-text.fade-out { opacity: 0; transform: translateY(-8px) scale(0.95); }