/* ===========================================================================
   Sayfa yükleme çubuğu — .pgl
   ---------------------------------------------------------------------------
   Sayfanın en üstünde, gezinme çubuğunun da üzerinde ince bir şerit.

   İki kip var ve ayrımı ÖNEMLİ:
     - BELİRSİZ (`is-indeterminate`): ne kadar kaldığı gerçekten bilinemediği
       anlarda — bağlantıya tıklanıp sunucunun yanıtı beklenirken ve belge
       ayrıştırılırken. Burada yüzde göstermek yalan olurdu; onun yerine
       soldan sağa akan bir şerit.
     - BELİRLİ: DOMContentLoaded'dan sonra sayfadaki varlıkların kaçının
       indiği gerçekten sayılabiliyor; çubuk o orana göre ilerliyor.
   =========================================================================== */
.pgl {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    transition: opacity .25s ease .1s;
}
.pgl.is-active { opacity: 1; transition-delay: 0s; }

.pgl-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 2px 2px 0;
    /* İnce bir şeritte degradenin okunması için renkler doygun tutuldu;
       parlaklık kalınlıktan değil ışımadan geliyor. */
    background: linear-gradient(90deg, #ffd0ae, #fda871 30%, #f37a52 65%, #ec387d);
    /* Çok katmanlı ışıma: 2px'lik bir şerit tek başına sönük kalıyor,
       çevresine taşan parıltı onu koyu zeminde canlı gösteriyor. */
    box-shadow:
        0 0 6px rgba(253, 168, 113, .9),
        0 0 14px rgba(243, 122, 82, .75),
        0 0 26px rgba(236, 56, 125, .45);
    transition: width .18s ease-out;
}

/* Belirsiz kip: genişlik anlamsız, şerit akıyor. */
.pgl.is-indeterminate .pgl-fill {
    width: 40%;
    transition: none;
    animation: pgl-slide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pgl-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) /* ETKİSİZ: hareket azaltma yok sayılıyor */ {
    .pgl-fill { transition: none; }
    .pgl.is-indeterminate .pgl-fill { animation: none; width: 100%; opacity: .5; }
}