/* ============================================================
   LOGITERA — Yükleme göstergesi
   Giriş ekranındaki "canlı ağ" dilinin devamı.

   İKİ MOD (bilinçli ayrım):
     1) AÇILIŞ  (.loading-panel.is-boot)
        Sisteme ilk giriş anı. Tam ekran mürekkep zemin + ağ + logo +
        ilerleme çubuğu + durum satırı. Giriş ekranından gelen kullanıcı
        aynı dünyada kalır, gri boşluk görmez.
     2) GÜNDELİK (.loading-panel)
        Her AJAX isteğinde çıkar. Karartma YOK, durum satırı YOK — sadece
        küçük ağ işareti. 200 ms'lik bir kaydetmede ekranı meşgul etmez.

   customize.css DONDURULMUŞ olduğu için eski .loading-panel-* kuralları
   orada bırakıldı; bu dosya sonra yüklenip görseli devralır.
   ============================================================ */

.loading-panel {
    --lgl-violet: #6D3BF5;
    --lgl-blue: #2C6BF0;
    --lgl-amber: #F2A03D;
    --lgl-ink: #0B1020;
    --lgl-ink-dim: #8E9AC0;
    --lgl-ink-text: #F2F5FF;
}

/* ---------- Ağ işareti ---------- */
.lgl-net {
    width: 104px;
    height: 104px;
    display: block;
}

.lgl-net .lgl-edge {
    fill: none;
    stroke: rgba(142, 154, 192, 0.32);
    stroke-width: 1.2;
}

/* Sinyaller: kesikli desen kaydırılarak hat üzerinde akıyormuş gibi görünür */
.lgl-net .lgl-flow {
    fill: none;
    stroke: var(--lgl-amber);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 5 58;
    animation: lgl-flow 2.6s linear infinite;
}

.lgl-net .lgl-flow.b {
    stroke: var(--lgl-blue);
    animation-delay: -0.9s;
}

.lgl-net .lgl-flow.c {
    stroke: var(--lgl-violet);
    animation-delay: -1.7s;
}

.lgl-net .lgl-node { fill: rgba(150, 168, 220, 0.72); }
.lgl-net .lgl-node.hub { fill: #E4EAFF; }

.lgl-net .lgl-halo {
    fill: none;
    stroke: rgba(109, 59, 245, 0.42);
    stroke-width: 1.2;
    stroke-dasharray: 3 7;
    transform-origin: 60px 60px;
    animation: lgl-spin 22s linear infinite;
}

@keyframes lgl-flow {
    to { stroke-dashoffset: -63; }
}

@keyframes lgl-spin {
    to { transform: rotate(360deg); }
}

/* Gündelik modda düğümler açık zeminde de okunsun */
.loading-panel:not(.is-boot) .lgl-net .lgl-edge { stroke: rgba(109, 59, 245, 0.28); }
.loading-panel:not(.is-boot) .lgl-net .lgl-node { fill: rgba(109, 59, 245, 0.55); }
.loading-panel:not(.is-boot) .lgl-net .lgl-node.hub { fill: var(--lgl-violet); }

/* ---------- Gündelik mod: sade, karartmasız ---------- */
.lgl-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lgl-mark,
.lgl-bar,
.lgl-status {
    display: none; /* yalnızca açılış modunda görünür */
}

/* ---------- Açılış modu: tam ekran mürekkep sahne ----------
   `is-active` BEKLENMEZ: sahne sayfa boyanır boyanmaz görünür.
   Aksi hâlde common.js ilk isteği başlatana kadar (1-2 sn) gri
   bir boşluk görünüyordu. */
.loading-panel.is-boot {
    display: flex;
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    /* Şablonun kendi gri yükleyicisi (.infraloader.is-active) 99999999'da —
       açılış sahnesi onun ÜSTÜNDE kalmalı, yoksa gri ekran görünüyor. */
    z-index: 100000000;
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* Açılış bitince yumuşak kaybolur (sert kesme olmasın) */
.loading-panel.is-boot.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.loading-panel.is-boot .loading-panel-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 30%, #17203C 0%, var(--lgl-ink) 58%, #05080F 100%);
}

.loading-panel.is-boot .lgl-loader {
    position: relative;
    gap: 22px;
}

.loading-panel.is-boot .lgl-net {
    width: 150px;
    height: 150px;
}

.loading-panel.is-boot .lgl-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loading-panel.is-boot .lgl-mark svg {
    width: 30px;
    height: 30px;
}

.loading-panel.is-boot .lgl-word {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.19em;
    color: var(--lgl-ink-text);
}

.loading-panel.is-boot .lgl-status {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.05em;
    color: var(--lgl-ink-dim);
    min-height: 1.2em;
}

.loading-panel.is-boot .lgl-status b {
    color: var(--lgl-amber);
    font-weight: 500;
}

.loading-panel.is-boot .lgl-bar {
    display: block;
    width: 170px;
    height: 2px;
    border-radius: 2px;
    background: rgba(142, 154, 192, 0.20);
    overflow: hidden;
}

.loading-panel.is-boot .lgl-bar i {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lgl-violet), var(--lgl-blue), var(--lgl-amber));
    animation: lgl-track 2.4s ease-in-out infinite;
}

@keyframes lgl-track {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
    .lgl-net .lgl-flow,
    .lgl-net .lgl-halo,
    .loading-panel.is-boot .lgl-bar i {
        animation: none;
    }

    .loading-panel.is-boot .lgl-bar i {
        width: 62%;
        transform: none;
    }
}