/* Tahap 136K47 — Global Loading UX E-LOK. Tidak mengunci scroll mobile. */
:root{
    --elok-loading-accent:#0ea5e9;
    --elok-loading-accent-2:#22c55e;
    --elok-loading-bg:rgba(2,6,23,.90);
    --elok-loading-border:rgba(125,211,252,.22);
    --elok-loading-text:#e2e8f0;
    --elok-loading-muted:#94a3b8;
}

html[data-theme="light"]{
    --elok-loading-bg:rgba(255,255,255,.96);
    --elok-loading-border:rgba(14,165,233,.22);
    --elok-loading-text:#0f172a;
    --elok-loading-muted:#475569;
}

.elok-loading-topbar{
    position:fixed;
    inset:0 0 auto 0;
    z-index:2147483600;
    height:3px;
    pointer-events:none;
    opacity:0;
    transform:scaleX(.04);
    transform-origin:left center;
    background:linear-gradient(90deg,var(--elok-loading-accent),var(--elok-loading-accent-2),#f59e0b,var(--elok-loading-accent));
    box-shadow:0 0 22px rgba(14,165,233,.55);
    transition:opacity .14s ease,transform .28s ease;
}

html.elok-loading-active .elok-loading-topbar{
    opacity:1;
    animation:elokLoadingTopbar 1.05s ease-in-out infinite;
}

@keyframes elokLoadingTopbar{
    0%{transform:scaleX(.08)}
    48%{transform:scaleX(.72)}
    100%{transform:scaleX(.96)}
}

.elok-loading-panel{
    position:fixed;
    right:1rem;
    bottom:1rem;
    z-index:2147483601;
    display:flex;
    align-items:center;
    gap:.75rem;
    max-width:min(26rem,calc(100vw - 2rem));
    border:1px solid var(--elok-loading-border);
    border-radius:1.25rem;
    background:var(--elok-loading-bg);
    color:var(--elok-loading-text);
    padding:.85rem 1rem;
    box-shadow:0 24px 70px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    transform:translateY(14px) scale(.98);
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;
}

html.elok-loading-active .elok-loading-panel{
    opacity:1;
    transform:translateY(0) scale(1);
}

.elok-loading-spinner{
    width:2.15rem;
    height:2.15rem;
    flex:0 0 auto;
    border-radius:9999px;
    border:3px solid rgba(148,163,184,.28);
    border-top-color:var(--elok-loading-accent);
    border-right-color:var(--elok-loading-accent-2);
    animation:elokSpin .72s linear infinite;
}

@keyframes elokSpin{to{transform:rotate(360deg)}}

.elok-loading-text{min-width:0}
.elok-loading-title{display:block;font-size:.86rem;font-weight:950;letter-spacing:.01em;line-height:1.15}
.elok-loading-message{display:block;margin-top:.18rem;font-size:.72rem;font-weight:700;color:var(--elok-loading-muted);line-height:1.25}

.elok-is-loading,
.elok-is-loading *{cursor:progress!important}

button.elok-button-loading,
a.elok-button-loading{
    position:relative!important;
    pointer-events:none!important;
    opacity:.86!important;
    filter:saturate(.95)!important;
}

button.elok-button-loading::after,
a.elok-button-loading::after{
    content:"";
    display:inline-block;
    width:1em;
    height:1em;
    margin-left:.55rem;
    vertical-align:-.18em;
    border-radius:9999px;
    border:2px solid currentColor;
    border-right-color:transparent;
    animation:elokSpin .65s linear infinite;
}

.elok-loading-skeleton{
    position:relative;
    overflow:hidden;
    background:rgba(148,163,184,.16)!important;
}

.elok-loading-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-110%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
    animation:elokSkeleton 1.2s ease-in-out infinite;
}

@keyframes elokSkeleton{to{transform:translateX(110%)}}

@media (max-width:640px){
    .elok-loading-panel{
        right:.75rem;
        left:.75rem;
        bottom:.75rem;
        max-width:none;
        border-radius:1.1rem;
        padding:.78rem .85rem;
    }
    .elok-loading-spinner{width:1.9rem;height:1.9rem;border-width:2.5px}
    .elok-loading-title{font-size:.82rem}
    .elok-loading-message{font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
    .elok-loading-topbar,
    .elok-loading-spinner,
    button.elok-button-loading::after,
    a.elok-button-loading::after,
    .elok-loading-skeleton::after{animation:none!important}
}