/* =========================================================
   MAGI SPLASH LOADER - CORPORATE PHOTO VERSION
   Tidak transparan ke page belakang.
========================================================= */

:root {
    --loader-bg: url('images/loader-bg.jpg');
    --loader-navy-overlay: rgba(7, 28, 54, 0.86);
    --loader-red: #ef3d4b;
}

body.is-page-loading {
    overflow: hidden;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
    background:
        linear-gradient(var(--loader-navy-overlay), var(--loader-navy-overlay)),
        var(--loader-bg) center center / cover no-repeat,
        #071c36;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.10), transparent 38%),
        radial-gradient(circle at 78% 22%, rgba(239,61,75,0.20), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,0.20), transparent 45%, rgba(0,0,0,0.22));
    pointer-events: none;
}

.page-loader-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-orbit {
    position: relative;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-ring-1,
.loader-ring-2,
.loader-ring-3 {
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
}

.loader-ring-1 {
    width: 170px;
    height: 170px;
    border: 5px solid rgba(255,255,255,0.14);
    border-top-color: rgba(255,255,255,0.95);
    border-right-color: var(--loader-red);
    animation: loaderSpin 1.2s linear infinite;
}

.loader-ring-2 {
    width: 138px;
    height: 138px;
    border: 4px solid rgba(255,255,255,0.10);
    border-left-color: rgba(255,255,255,0.82);
    border-bottom-color: rgba(239,61,75,0.82);
    animation: loaderSpinReverse 1.9s linear infinite;
}

.loader-ring-3 {
    width: 108px;
    height: 108px;
    border: 2px solid rgba(255,255,255,0.16);
}

.loader-core {
    position: relative;
    z-index: 3;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 18px 42px rgba(0,0,0,0.28),
        0 0 0 10px rgba(255,255,255,0.06);
}

.loader-core img {
    width: 58px;
    height: auto;
    display: block;
    animation: loaderPulse 1.7s ease-in-out infinite;
}

.loader-title {
    margin-top: 22px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 8px 20px rgba(0,0,0,0.26);
}

.loader-subtitle {
    margin-top: 8px;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.03em;
}

.loader-dots span {
    display: inline-block;
    animation: dotBlink 1.25s infinite;
}

.loader-dots span:nth-child(2) {
    animation-delay: .15s;
}

.loader-dots span:nth-child(3) {
    animation-delay: .30s;
}

@keyframes loaderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes loaderSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes loaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: .95;
    }
}

@keyframes dotBlink {
    0%, 80%, 100% {
        opacity: .25;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@media (max-width: 768px) {
    .loader-orbit {
        width: 160px;
        height: 160px;
    }

    .loader-ring-1 {
        width: 142px;
        height: 142px;
    }

    .loader-ring-2 {
        width: 116px;
        height: 116px;
    }

    .loader-ring-3 {
        width: 92px;
        height: 92px;
    }

    .loader-core {
        width: 78px;
        height: 78px;
    }

    .loader-core img {
        width: 50px;
    }

    .loader-title {
        font-size: 15px;
    }

    .loader-subtitle {
        font-size: 12px;
    }
}