/* ============================================================
   NAVIGATION-PROGRESS.CSS - Sayfa gecis durumu
   Bagimlilik: base.css (--brand)
   Element navigation-progress.js tarafindan olusturulur.
   ============================================================ */

.navigation-progress {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1200;
    height: 3px;
    background: var(--brand);
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 45%, transparent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.navigation-progress.is-active {
    opacity: 1;
    animation: navigation-progress-loading 8s cubic-bezier(.1, .7, .2, 1) forwards;
}

.navigation-progress.is-leaving {
    opacity: 1;
    transform: scaleX(.96);
    animation: none;
    transition: transform .18s ease-out;
}

@keyframes navigation-progress-loading {
    0% { transform: scaleX(.08); }
    18% { transform: scaleX(.42); }
    55% { transform: scaleX(.68); }
    100% { transform: scaleX(.84); }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-progress.is-active {
        transform: scaleX(.72);
        animation: none;
    }
}

@media print {
    .navigation-progress { display: none; }
}