/* ══════════════════════════════════════════════════════════════════════
   Get-started progress bar CSS — external asset (canonical `?v=` cache
   invalidation pattern). Deploy sonrası mz_asset_version bump → browser
   cache miss → fresh CSS zorla indirilir (iPhone Safari cache fix).

   Consumer: partials/web/get_started_progress.blade.php
   Scope: /get-started/* full-page blade'ler (payment.blade.php HARİÇ).
   ══════════════════════════════════════════════════════════════════════ */

.mz-gs-topbar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 5px;
    /* Soluk mor track — is-active olduğunda outer wrap görünür olur,
       user hemen kalın bar'ı fark eder. Inner span üzerine bindirmeli
       animasyon "dolan progress" hissi verir. */
    background: rgba(124, 58, 237, 0.18);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    /* iOS Safari fixed positioning + transparent parent layer bug fix —
       GPU compositing layer'a promote et. `translateZ(0)` + `will-change`
       ile iPhone Safari bar'ı doğru render eder (görünmezlik sorunu). */
    will-change: opacity, transform;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.mz-gs-topbar.is-active {
    opacity: 1;
}
.mz-gs-topbar > span {
    display: block;
    height: 100%;
    width: 0;
    /* Solid Monezzi brand purple — gradient rendering cross-browser
       farklılıklarını engeller (Safari mor, Chrome pembe algısı). */
    background: #7c3aed;
    /* Güçlü glow — 5px bar mobile Retina'da net fark edilebilir. */
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.8);
}
.mz-gs-topbar.is-active > span {
    /* 6s duration — submit → page load arası user animasyonu görür.
       30s çok yavaş idi (page yüklenmeden animation dolmaya bile başlamamış). */
    animation: mz-gs-topbar-fill 6s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
}
@keyframes mz-gs-topbar-fill {
    0%   { width: 0; }
    30%  { width: 60%; }
    70%  { width: 85%; }
    100% { width: 92%; }
}
.is-loading {
    opacity: 0.65;
    pointer-events: none;
    cursor: wait;
}