/* ============================================================
   preloader.css — RTWLoader (ORTAK preloader / yükleniyor katmanı) stilleri
   Marka: Cobalt ring + Lime arc + nabız çekirdek. Poppins.

   TECH-6019: Bu kurallar önce `preloader.js` içindeki `injectCSS()` ile çalışma
   zamanında `document.createElement('style')` + `textContent` ile enjekte ediliyordu.
   CSP `style-src 'self'` (TECH-5858) inline <style> bloğunu BLOKLUYORDU → aşağıdaki
   kuralların HİÇBİRİ uygulanmıyordu ve kullanıcının gördüğü ilk ekran (açılış splash'ı)
   biçimsiz kalıyordu. Sayfa çalışmaya devam ettiği için hata SESSİZDİ, yalnız konsolda
   görünüyordu. Çözüm CSP'yi gevşetmek DEĞİL (`'unsafe-inline'` asıl korumayı kaldırır),
   stilleri statik bir dosyaya taşımak: App.razor bunu `@Assets[...]` ile parmak izli
   olarak <link> eder, `style-src 'self'` olduğu gibi kalır.

   KATMANSIZ (@layer YOK) — bilinçli istisna, enjekte edilen sürümün davranışı aynen
   korunuyor: splash sayfanın kendi stylesheet'lerinden (tokens/typography/glass/app.css)
   bağımsız görünebilmeli. Katmansız CSS Tailwind utility'lerini ezer (bkz.
   rules/pattern-bilgi-bankasi.md Kat. 11), ancak `.rtwl-*` namespace'i BU DOSYAYA ÖZGÜ:
   seçicilerin hiçbiri projedeki başka bir CSS/Razor dosyasında geçmiyor ve loader
   elemanları JS ile üretilip üzerlerine Tailwind class'ı yazılmıyor — çakışma yok.
   ============================================================ */

/* ---- spinner ---- */
.rtwl-spin { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }

.rtwl-spin__r { position: absolute; border-radius: 50%; }

.rtwl-spin__r1 {
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0 28%, #3452E3 76%, #6E84F0 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: rtwl-spin .9s linear infinite;
}

.rtwl-spin__r2 {
    inset: 22%;
    background: conic-gradient(from 210deg, transparent 0 60%, #B8F038 90%, #C8F252 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    animation: rtwl-spin 1.15s linear infinite reverse;
}

.rtwl-spin__core {
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: #B8F038;
    box-shadow: 0 0 10px #B8F038, 0 0 20px rgba(184, 240, 56, .5);
    animation: rtwl-pulse 1.1s ease-in-out infinite;
}

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

@keyframes rtwl-pulse {
    0%, 100% { transform: scale(.55); opacity: .55; }
    50% { transform: scale(1); opacity: 1; }
}

/* ---- page splash ---- */
.rtwl-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    font-family: "Poppins", sans-serif;
    overflow: hidden;
    opacity: 1;
    background: radial-gradient(120% 90% at 50% 34%, #12235f 0%, #0B0A09 68%);
}

.rtwl-page.rtwl-out { animation: rtwl-out .3s ease both; }

.rtwl-page__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(150, 175, 255, .13) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask: radial-gradient(circle at 50% 40%, #000, transparent 66%);
    mask: radial-gradient(circle at 50% 40%, #000, transparent 66%);
}

.rtwl-page__orb { position: absolute; border-radius: 50%; pointer-events: none; }

.rtwl-page__orb--l {
    right: -120px;
    top: -100px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(184, 240, 56, .18), transparent 66%);
}

.rtwl-page__orb--c {
    left: -140px;
    bottom: -120px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(52, 82, 227, .34), transparent 66%);
}

.rtwl-page__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; }

.rtwl-page__logo { height: 64px; width: auto; display: block; opacity: 1; animation: rtwl-rise .5s ease; }

.rtwl-page__spin { opacity: 1; animation: rtwl-rise .5s ease; }

.rtwl-page__l {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
    opacity: 1;
    animation: rtwl-rise .5s ease;
}

.rtwl-page__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}

.rtwl-page__bar::after {
    content: "";
    position: absolute;
    left: -40%;
    top: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, #B8F038, #C8F252, transparent);
    animation: rtwl-sweep 1.3s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes rtwl-sweep {
    0% { left: -45%; }
    100% { left: 105%; }
}

@keyframes rtwl-rise {
    from { transform: translateY(8px); }
    to { transform: none; }
}

/* ---- cover (form / card) ---- */
.rtwl-cover {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    border-radius: inherit;
    font-family: "Poppins", sans-serif;
    opacity: 1;
    background: rgba(11, 10, 9, .58);
    -webkit-backdrop-filter: blur(4px) saturate(130%);
    backdrop-filter: blur(4px) saturate(130%);
}

.rtwl-cover.rtwl-out { animation: rtwl-out .24s ease both; }

@keyframes rtwl-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* light tema class-tabanlı: <html class="light"> (TECH-5347/boot-init.js) */
.light .rtwl-cover { background: rgba(245, 242, 236, .66); }

.rtwl-cover__in { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.rtwl-cover__l { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .01em; }

.light .rtwl-cover__l { color: var(--ds-carbon-900, #0D0C0B); }

/* ---- button loading ---- */
.rtwl-btnwrap { display: inline-flex; align-items: center; gap: 9px; }

@media (prefers-reduced-motion: reduce) {
    .rtwl-spin__r1,
    .rtwl-spin__r2 { animation-duration: 2.2s; }

    .rtwl-page__bar::after { animation-duration: 2.6s; }
}