/* WASM ACILIS EKRANI
 *
 * Blazor WebAssembly ilk acilista ~10 MB runtime indiriyor; o sure boyunca
 * sayfada yalnizca index.html'in icerigi var, hicbir bilesen calismiyor.
 * Bu yuzden buradaki her sey saf CSS: Blazor henuz yok.
 *
 * Halka SAHTE degil. Blazor indirme boyunca :root uzerinde
 * --blazor-load-percentage ve --blazor-load-percentage-text degiskenlerini
 * guncelliyor; conic-gradient dogrudan onu okuyor. Yuzde henuz gelmemisken
 * halka bos gorunmesin diye ustunde surekli donen ince bir vurgu var.
 *
 * site.css'ten ONCE baglanir: 167 KB'lik ana stili beklemeden boyanir.
 */

.boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    background: #f5f8fb;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dark .boot { background: #0b1220; }

.boot__mark {
    position: relative;
    width: 108px;
    height: 108px;
    display: grid;
    place-items: center;
}

/* Logonun arkasindaki yumusak isik. */
.boot__mark::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 150, 190, .20), transparent 72%);
    animation: boot-glow 2.6s ease-in-out infinite;
}

/* Gercek ilerleme: teal -> mavi, uygulamanin gradient-primary'siyle ayni. */
.boot__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(hsl(190 75% 42%) 0,
            hsl(210 80% 50%) var(--blazor-load-percentage, 0%),
            rgba(15, 23, 42, .08) var(--blazor-load-percentage, 0%));
    transition: background .25s linear;
}

.dark .boot__ring {
    background: conic-gradient(hsl(190 75% 46%) 0,
            hsl(210 80% 56%) var(--blazor-load-percentage, 0%),
            rgba(255, 255, 255, .10) var(--blazor-load-percentage, 0%));
}

/* Yuzde 0 iken bile "calisiyor" hissi veren donen vurgu. */
.boot__sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0turn, transparent 0 80%, rgba(255, 255, 255, .9) 90%, transparent 97%);
    animation: boot-spin 1.4s linear infinite;
}

.dark .boot__sweep {
    background: conic-gradient(from 0turn, transparent 0 80%, rgba(255, 255, 255, .35) 90%, transparent 97%);
}

/* Ic disk halkayi inceltiyor. */
.boot__disc {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f5f8fb;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.dark .boot__disc { background: #0b1220; }

.boot__logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    animation: boot-breathe 2.6s ease-in-out infinite;
}

.boot__word {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #0f172a;
}

.dark .boot__word { color: #e2e8f0; }

.boot__pct {
    font-size: .8rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}

/* Blazor'un yayinladigi metin; gelmeden once duz bir ifade gosterilir. */
.boot__pct::after { content: var(--blazor-load-percentage-text, "Yükleniyor…"); }

@keyframes boot-spin { to { transform: rotate(1turn); } }

@keyframes boot-glow {
    0%, 100% { opacity: .5;  transform: scale(.96); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

@keyframes boot-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Yuksek kontrast temasi: efektler kapanir, halka duz renge doner. */
.hc .boot__ring,
.hc .dark .boot__ring { background: conic-gradient(#0b5cab 0, #0b5cab var(--blazor-load-percentage, 0%), #d4d4d4 var(--blazor-load-percentage, 0%)); }
.hc .boot__sweep,
.hc .boot__mark::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .boot__sweep,
    .boot__logo,
    .boot__mark::before { animation: none; }
}