/* Yükleme göstergesi: React panelin AppLoader'ı (src/WarehouseFrontend/src/components/shared/AppLoader.tsx, animasyonlar
   index.css). Dış halka saat yönünde 3 sn (marka yeşili), iç halka ters yönde 2 sn, ortada nabız atan logo.
   Metronic'in sayfa kilidinin (KTApp.blockPage) yerine geçer; davranış org/library/js/app-loader.js.
   Kilit hemen açılır (tıklamayı tutar), görüntü 150 ms sonra belirir: hızlı isteklerde ekran yanıp sönmesin. */

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

    .app-loader[hidden] {
        display: none;
    }

.app-loader__veil {
    position: absolute;
    inset: 0;
    background: rgba(250, 250, 250, .55);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    animation: app-loader-in .2s ease-out .15s forwards;
}

.app-loader__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    opacity: 0;
    animation: app-loader-in .2s ease-out .15s forwards;
}

.app-loader__ring {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
}

.app-loader__ring--outer {
    width: 128px;
    height: 128px;
    border-bottom-color: rgba(15, 159, 108, .7);
    border-left-color: rgba(15, 159, 108, .7);
    animation: app-loader-spin 3s linear infinite;
}

.app-loader__ring--inner {
    width: 96px;
    height: 96px;
    border-top-color: rgba(38, 38, 38, .7);
    border-right-color: rgba(38, 38, 38, .7);
    animation: app-loader-spin-reverse 2s linear infinite;
}

.app-loader__logo {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 16px;
    animation: app-loader-pulse 1.5s ease-in-out infinite;
}

    .app-loader__logo img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

/* Koyu yüzey (giriş ekranı): React'in koyu teması */
.app-loader--dark .app-loader__veil {
    background: rgba(17, 17, 19, .6);
}

.app-loader--dark .app-loader__ring--outer {
    border-bottom-color: rgba(35, 169, 115, .7);
    border-left-color: rgba(35, 169, 115, .7);
}

.app-loader--dark .app-loader__ring--inner {
    border-top-color: rgba(230, 230, 230, .7);
    border-right-color: rgba(230, 230, 230, .7);
}

@keyframes app-loader-in {
    to {
        opacity: 1;
    }
}

@keyframes app-loader-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes app-loader-spin-reverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes app-loader-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .85;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loader__ring,
    .app-loader__logo {
        animation-duration: 6s;
    }
}