:root {
    --om-preloader-duration: 600ms;
    /* Geçiş süresi */

    /* Görsel geçiş hedefleri */
    --om-target-alpha: 0.5;
    /* overlay hedef opaklığı */
    --om-target-blur: 12px;
    /* arka plan blur hedefi */

    /* Anlık değerler (animasyon bunlar üzerinden akar) */
    --om-bg-alpha: 0;
    /* başlangıçta 0 → aktifte 0.5 */
    --om-blur: 0px;
    /* başlangıçta 0px → aktifte 12px */

    /* geçiş eğrisi (easing) */
    --om-ease: cubic-bezier(.22, .61, .36, 1);

    /* Faz ofsetleri (JS doldurur) */
    --om-s-offset: 0;
    --om-h-offset: 0;
    --om-ring-offset: 0;

    /* Aydınlık/Karanlık tema uyum değişkenleri */
    --om-overlay-rgb: 255, 255, 255;
    /* AÇIK: beyaz overlay */
    --om-backdrop-brightness: 0.98;
    /* AÇIK: hafif karartma */
}

/* Karanlık modda siyah overlay + biraz aydınlat */
@media (prefers-color-scheme: dark) {
    :root {
        --om-overlay-rgb: 0, 0, 0;
        /* KARANLIK: siyah overlay */
        --om-backdrop-brightness: 1.06;
        /* KARANLIK: hafif aydınlat */
    }
}

/* Üst katmanda, tüm ekranı kaplayan ön yükleyici (preloader) */
#om-preloader {
    view-transition-name: om-pre;
    /* CDVT’de aynı isimle eşleşip kesintisiz taşınsın */
    position: fixed;
    inset: 0;
    z-index: 999999999 !important;
    /* en baskın katman */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Başlangıçta gizli */
    opacity: 0;
    visibility: hidden;

    /* Arka planı yumuşat: daha belirgin ama göz yormayan opaklık + güçlü blur */
    background: rgba(var(--om-overlay-rgb), var(--om-bg-alpha));
    backdrop-filter: blur(var(--om-blur)) saturate(110%) brightness(var(--om-backdrop-brightness));
    -webkit-backdrop-filter: blur(var(--om-blur)) saturate(110%) brightness(var(--om-backdrop-brightness));

    /* Kendi boyalı bağlamını yarat → başka stacking context'ler aşamasın */
    isolation: isolate;
    contain: paint;

    /* Varsayılan: etkileşim geçsin; aktifken engelleyeceğiz */
    pointer-events: none;

    /* Geçişler */
    transition:
        opacity var(--om-preloader-duration) var(--om-ease),
        visibility 0s linear var(--om-preloader-duration),
        background-color var(--om-preloader-duration) var(--om-ease),
        backdrop-filter var(--om-preloader-duration) var(--om-ease),
        -webkit-backdrop-filter var(--om-preloader-duration) var(--om-ease);
}

/* HTML'e sınıf verilerek (head'te) anında görünür kıl: body/dom oluşmadan bile gizlenmez */
.om-pre-activate #om-preloader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Hedefe doğru yumuşak geçiş */
    --om-bg-alpha: var(--om-target-alpha);
    --om-blur: var(--om-target-blur);
}

/* Görünür (aktif) durum: opacity=1 + blur */
#om-preloader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    /* Hedef değerlere yumuşak geçsin (çakışan sabitler kaldırıldı) */
    --om-bg-alpha: var(--om-target-alpha);
    --om-blur: var(--om-target-blur);

    transition:
        opacity var(--om-preloader-duration) var(--om-ease),
        visibility 0s,
        background-color var(--om-preloader-duration) var(--om-ease),
        backdrop-filter var(--om-preloader-duration) var(--om-ease),
        -webkit-backdrop-filter var(--om-preloader-duration) var(--om-ease);
}

/* Aktifken sayfayı kilitle: scroll ve olası şeritlerin "üstte" görünmesi engellenir */
html.om-prelock,
body.om-prelock {
    overflow: hidden !important;
}

/* Boyut ve zamanlama değişkenleri */
:root {
    /* Küçük logoların sabit boyutu */
    --om-glyph-size: 60px;

    /* Logoların merkezden uzaklığı (yakınlaştır/uzaklaştır kontrolü) */
    --om-radius: 24px;
    /* 🔸 Daha yakın: 18–22px | Varsayılan: 24px | Daha uzak: 26–30px */

    /* Kenar güvenlik payı (dairenin içine değmesin) */
    --om-gap: 10px;
    /* 🔸 8–12px aralığı iyi */

    /* Çember kalınlığı ve zaman */
    --om-ring-thickness: 6px;
    --om-step-ms: 400ms;

    /* Çember çapını otomatik hesapla:
     görsel + 2*(yarıçap + boşluk)  → logolara göre “tam” oturur */
    --om-logo-size: calc(var(--om-glyph-size) + 2 * (var(--om-radius) + var(--om-gap)));
}


/* Çember konteyneri */
.om-logo {
    position: relative;
    width: var(--om-logo-size);
    height: var(--om-logo-size);
}

/* Dairesel maske: yalnızca logoları kırpar, halkayı kırpmaz */
.om-mask {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;

    /* Merkezde %50 şeffaf beyaz, tam çember kenarında %100 şeffaf */
    background: radial-gradient(circle closest-side,
            rgba(var(--om-overlay-rgb), 0.5) 0%,
            rgba(var(--om-overlay-rgb), 0.0) 100%);


}

/* Küçük logolar: merkeze göre konumlandır */
.om-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--om-glyph-size);
    height: var(--om-glyph-size);
    object-fit: contain;
    display: block;
    will-change: transform;
}


/* Konteyner (çember alanı) */
.om-logo {
    position: relative;
    width: var(--om-logo-size);
    height: var(--om-logo-size);
}

/* İki küçük görselin ortak stili */
.om-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--om-glyph-size);
    height: var(--om-glyph-size);
    object-fit: contain;
    display: block;
    will-change: transform;
}

/* Responsive offset: kutu - görsel = hareket mesafesi */

/* s.webp hareket döngüsü: TL → TR → BR → BL → (tekrar) */
/* 1 tam yer değişimi = 1000ms, kesintisiz */
.om-glyph--s {
    animation: omSwapS 1500ms ease-in-out infinite;
    animation-delay: calc(-1ms * var(--om-s-offset));
}

.om-glyph--h {
    animation: omSwapH 1500ms ease-in-out infinite;
    animation-delay: calc(-1ms * var(--om-h-offset));
}

/* s.webp: TL → TR → BR → BL → (tekrar)
   Her bacakta 500ms hareket (ease-out) + 500ms duraklama
   4 bacak = 4000ms (calc(var(--om-step-ms)*8)) */
/* s.webp: TL → TR → BR → BL → (tekrar) */
/* s.webp: SOL → SAĞ → SOL → ... (merkez bazlı) */
/* s.webp: soldan sağa → tekrar sola (merkez referanslı, duraksamasız) */
@keyframes omSwapS {
    0% {
        transform: translate(calc(-50% - var(--om-radius)), -50%);
    }

    50% {
        transform: translate(calc(-50% + var(--om-radius)), -50%);
    }

    100% {
        transform: translate(calc(-50% - var(--om-radius)), -50%);
    }
}

/* h.webp: sağdan sola → tekrar sağa (s ile zıt fazda) */
@keyframes omSwapH {
    0% {
        transform: translate(calc(-50% + var(--om-radius)), -50%);
    }

    50% {
        transform: translate(calc(-50% - var(--om-radius)), -50%);
    }

    100% {
        transform: translate(calc(-50% + var(--om-radius)), -50%);
    }
}

/* Dönen halka: iki karşılıklı beyaz çizgi, 500ms’de %25 adım, TERS yönde */
.om-ring {
    position: absolute;
    inset: -2px;
    /* çemberi logolardan 2px büyük tut */
    border-radius: 50%;
    border: var(--om-ring-thickness) solid transparent;
    /* şeffaf halka */
    border-top-color: rgb(var(--om-overlay-rgb));
    border-bottom-color: rgb(var(--om-overlay-rgb));
    animation: omSpinLinear 1000ms linear infinite;
    /* kesintisiz, 1 tur = 1000ms */
    animation-delay: calc(-1ms * var(--om-ring-offset));
    will-change: transform;
}

/* 0–12.5%: -90°'ye kadar hareket (hızlı→yavaş), 12.5–25%: durakla
   25–37.5%: -180°'ye hareket (hızlı→yavaş), 37.5–50%: durakla
   50–62.5%: -270°'ye hareket (hızlı→yavaş), 62.5–75%: durakla
   75–87.5%: -360°'ye hareket (hızlı→yavaş), 87.5–100%: durakla */
@keyframes omSpinLinear {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

    /* 1 tur, kesintisiz */
}

/* Hareket kısıtlaması olan kullanıcılar için animasyonu kapat */
@media (prefers-reduced-motion: reduce) {

    .om-ring,
    .om-glyph--s,
    .om-glyph--h {
        animation: none;
    }
}

/* CDVT kök animasyonlarını mümkün olduğunca anlık yap (arka plan kırpışmasın) */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.001s;
}