/* ============================================================
   ÖN YÜKLEYİCİ (preloader) — AYAR TABANLI PERDE
   ------------------------------------------------------------
   İŞARETLEME : private/page/tema/core/preloader.php
   DAVRANIŞ   : public/assets/tema/js/preloader.js
   YÖNETİM    : /yonetim/site-ayarlari#preloader (ayarın evi)
                /yonetim/preloader-onizleme      (tam ekran deneme sahnesi)

   ⚠ 2026-07-28 — GÖSTERİ SETİ simyayayinlari.local'DEN TAM PORTLANDI.
   Beş varyant (ayar: preloaderVaryant, 1–5):
     --v1  Yumuşak odak + süzülme   (bulanıktan netleşir, sonra nazikçe süzülür)
     --v2  Soldan sağa açılış       (clip-path ile perde gibi açılır)
     --v3  Kalp atışı               (belirir, sonra nabız gibi atar)
     --v4  Pop + 3B eğilme          (yaylanarak gelir, hafifçe eğilir)
     --v5  Harf harf çizim          (SVG konturu içeriden çizilir, sonra dolar)
   Simya'nın ara sürümündeki METİN anahtarlar (solma|nabiz|perde|cizim) ve
   onlara ait kurallar TÜMÜYLE KALDIRILDI — kod artık yalnız --v1…--v5 tanır.

   TEMA (preloaderTema): --acik | --koyu · ZEMİN (preloaderZemin): --z-buzlu | --z-duz
   SLOGAN ÇERÇEVESİ (preloaderSloganKutu): --kutulu (varsayılan: kutusuz düz yazı)

   KAYNAK (kanonik): simyakoleji.local/.../tema/css/preloader.css — beş
   varyantın ve çizim mantığının tamamı oradan geldi. TAŞINIRKEN DEĞİŞEN
   TEK ŞEY PALET: kaynak Simya'nın mavi/yeşil jetonlarını (--c-primary,
   --c-logo-*, --kampus-ana) okuyordu; burada marka jetonları --navy-* /
   --gold-* okunur. Kural kümesi ve animasyonlar birebir aynıdır.

   RENK: sabit marka hex'i YOK — CLAUDE.md kuralı. Her renk --navy-* /
   --gold-* jetonundan türer; var(..., #hex) yalnız jeton YOKSA devreye
   giren emniyet yedeğidir (perde renksiz kalmasın).
   ⚠ KAMPÜS/MİKROSİTE YOK: kaynaktaki --kampus-ana katı bu projede
   karşılıksız, tek marka var; jetonlar doğrudan okunur.
   ============================================================ */

/* ---------- PERDE ----------
   VARSAYILAN GÖRÜNÜR: JS hiç çalışmasa bile sunucudan görünür gelir; "JS geç
   yüklendi, içerik bir an çıplak göründü" durumu yaşanmaz. Bedeli kapanmanın
   JS'e bağlı olmasıdır → BAĞIMSIZ bir CSS emniyeti (onYukEmniyet) var, ayrıca
   preloader.php <noscript> ile perdeyi tümden gizler.
   İçerik hiçbir koşulda display:none/visibility:hidden YAPILMAZ; perde yalnız
   ÜSTÜNE serilir → JS ölse de belge okunabilir ve taranabilir kalır. */
.on-yukleyici {
  /* Tema jetonları — .on-yukleyici--koyu bunları ezer */
  --oy-zemin: var(--white, #fff);
  --oy-yazi: var(--ink, #0f1620);
  --oy-vurgu: var(--navy-800, #0b3480);
  /* ⚠ ÇİZİM KONTURU AYRI JETON (kullanıcı kararı 2026-07-30): önce slogan
     vurgusuyla AYNI --oy-vurgu'yu kullanıyordu, dolayısıyla koyu temada
     kontur da altın/turuncu oluyordu. Kullanıcı "çizimde turuncu olmasın,
     beyaz olsun" dedi; iki rolü ayırmadan bunu yapmak sloganın rengini de
     bozardı. Açık temada varsayılan DEĞİŞMEZ: konturu --oy-vurgu izler. */
  --oy-kontur: var(--oy-vurgu);
  /* SLOGAN KUTUSU — kampüs paletini İZLER (2026-07-28 denetim bulgusu).
     Kaynakta bu iki jeton kampüs <style> bloğunun ezdiği kümenin DIŞINDA
     kaldığı için ayrıca not düşülmüştü; burada ezen bir kat yok, yine de
     ezdiği için kutu her kampüste aynı beyaz/gri kalıyordu — oysa vurgu
     kelimesi ve gösterge kampüs rengine dönüyordu, yani kutu tek başına ayrık
     düşüyordu. color-mix ile ana renkten türetilir: zemin çok açık bir tonu,
     kenarlık biraz daha doygun. Destek yoksa var() yedeği devreye girer.

     ⚠ YILDIZ + EĞİK ÇİZGİ İKİLİSİ BU YORUMDA ASLA YAN YANA YAZILMAZ
       (2026-07-30 bulgusu): jeton adları kısaltılırken iki değişken arasına
       eğik çizgi konmuş, öndeki yıldızla birleşince yorum ERKEN KAPANMIŞTI.
       Kalan Türkçe metin bildirim gibi ayrıştırılıp ilk noktalı virgüle kadar
       her şeyi — yani hemen aşağıdaki cip-ana bildirimini — yutuyordu. Sonuç:
       üç cip jetonu da TANIMSIZ kalıyor, slogan kutusunun zemini ve kenarlığı
       hiç basılmıyordu. Küçültülmüş ikiz de aynı metni canlı CSS olarak
       taşıyordu. Değişken adlarını kısaltırken araya BOŞLUK koyun. */
  --oy-cip-ana: var(--navy-800, #0b3480);
  --oy-cip-zemin: color-mix(in srgb, var(--oy-cip-ana) 8%, var(--white, #fff));
  --oy-cip-kenar: color-mix(in srgb, var(--oy-cip-ana) 28%, var(--white, #fff));
  --oy-ray: var(--paper-2, #eef2f7);

  /* AMBLEMİN ÜÇ RENGİ — ilerleme göstergesi bunları kullanır (kullanıcı kuralı:
     "göstergede logonun üç rengi olsun, turuncu kalksın"). Bunlar tema paleti
     DEĞİL, MARKA VARLIĞININ renkleridir. Kaynakta amblem üç renkliydi
     (lacivert + açık mavi + yeşil); Gazali logosu TEK renk altın
     (2026-09-24), marka paleti lacivert + altın — duraklar bu yüzden
     lacivert → altın geçişine eşlendi. Üçü de var() üzerinden okunur;
     jeton değişirse çizim kendiliğinden onu izler. */
  --oy-logo-1: var(--navy-800, #0b3480);   /* marka laciverti durağı */
  --oy-logo-2: var(--gold-400, #e3c567);   /* açık altın durağı */
  --oy-logo-3: var(--gold-500, #d4af37);   /* altın durağı */

  position: fixed;
  inset: 0;
  z-index: 9999;                    /* çerez barı (1200) dahil her şeyin üstünde */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--oy-bosluk, 30px);
  opacity: 1;
  visibility: visible;

  /* Kapanış: süre AYARDAN gelir (--oy-cikis · preloaderCikisSn).
     ⚠ ESKİDEN SABİTTİ (.45/.6 sn): yönetici "Süreler" bölümünden geçişi
       yavaşlatamıyordu, yazı biter bitmez perde çekiliyordu.
     Opaklık dönüşümden bir tık hızlı kapanır (75%) — kayan çıkışta perde
     "ağır" hissedilsin, ani sıçrama yerine yerçekimi gibi. */
  transition: opacity calc(var(--oy-cikis, .6s) * .75) ease,
              visibility var(--oy-cikis, .6s) ease,
              transform var(--oy-cikis, .6s) cubic-bezier(.6, .05, .5, .95);

  /* EMNİYET AĞI (kaynakta YOK — Simya'da korunuyor) — süre dolunca perde
     KENDİNİ gizler. Neden: preloader.js indirilemezse (404 / ağ hatası /
     eklenti engeli) perde sonsuza kadar içeriğin önünde kalırdı. 0 sn süreli +
     gecikmeli animasyon, gecikme boyunca HİÇBİR ŞEYE dokunmaz (geriye dolgu
     yok), bu yüzden normal akışta JS'in geçişini bozmaz.
     ⚠ GECİKME AYARDAN GELİR: süreler yönetilebilir olduğu için sabit bir saat
     gösteriyi ORTASINDAN keserdi. preloader.php --oy-emniyet'i (logo + yazı +
     1,6 sn) satır içi stille verir; değişken yoksa 4,4 sn. */
  animation: onYukEmniyet 0s var(--oy-emniyet, 4400ms) forwards;
}

/* KOYU TEMA — zemin marka laciverti (kampüste --c-primary-dark ezilir).
   Vurgu rengi BEYAZ, normal kelimeler kısık beyaz: koyu zeminde palet renkleri
   (kampüse göre kırmızı/yeşil olabilir) okunurluğu riske atardı. */
.on-yukleyici--koyu {
  /* ZEMİN MARKA LACİVERTİ: PANTONE 281 C (--navy-950 / #00205b). Kaynak
     burada amblem laciverti #19416F kullanıyordu; karşılığı doğrudan marka
     jetonudur. Üzerindeki üç rengin ölçülen kontrastı: altın vurgu 7,36:1,
     kısık beyaz gövde 10,69:1, beyaz kontur 15,47:1 — üçü de AA küçük metin
     eşiği olan 4,5:1'in üstünde. */
  --oy-zemin: var(--navy-950, #00205b);
  /* VURGU MARKA ALTINI: kaynakta bu satır logonun açık mavisine çevrilmişti
     (Simya ambleminin ikinci rengi). Burada markanın ikinci rengi altındır,
     jeton doğrudan --gold-500'dür. Gövde kısık beyaz kaldığı için vurgu hem
     RENK hem TON olarak ayrışır.
     ⚠ Kontur bu jetonu İZLEMEZ — aşağıda beyaza sabitlenir. */
  --oy-yazi: rgba(255, 255, 255, .82);
  /* ⚠ KAYNAKTAKİ color-mix YAMASI TAŞINMADI — ÖLÇÜLDÜ: orada slogan rengi
     logo mavisiydi ve lacivert kutuda 4,11:1 veriyordu, yani 360px altı
     ekranlarda metin "büyük" sayılmayıp 4,5:1 eşiğine takılıyordu; %18 beyaz
     karıştırmak o yüzden gerekiyordu. Burada vurgu marka altınıdır:
     #d4af37 üzerine #00205b → 7,36:1 (hesaplandı). Eşiği zaten geçtiği için
     karışım altını boşuna soldururdu. */
  --oy-vurgu: var(--gold-500, #d4af37);
  /* Çizim konturu koyu perdede BEYAZ: logo dolgusu kendi renklerine
     kavuşana kadar çizgi en yüksek kontrastla görünsün.
     ⚠ Kaynaktaki 7,8:1 KENDİ laciverti (#19416F) için ölçülmüştü; buradaki
     değer #00205b üzerine beyaz → 15,47:1 (yeniden hesaplandı). */
  --oy-kontur: var(--white, #fff);
  /* ⚠ SLOGAN KUTUSU KOYU PERDEDE KOYULTUR, AÇMAZ (2026-07-30 ölçümü):
     zemin rgba(255,255,255,.1) idi; kutu içindeki gerçek arka plan
     rgb(48,84,125)'e açılıyor ve açık mavi vurgu orada yalnız 2,51:1
     veriyordu — AA'nın büyük metin eşiğini (3:1) bile geçmiyordu.
     Siyah bindirme zemini koyulaştırır, mavi vurgu öne çıkar. */
  --oy-cip-zemin: rgba(0, 0, 0, .22);
  --oy-cip-kenar: rgba(255, 255, 255, .26);
  --oy-ray: rgba(255, 255, 255, .22);
}

/* ZEMİN: TAM RENK — arkadaki sayfa hiç görünmez (en sakin, en okunur) */
.on-yukleyici--z-duz { background: var(--oy-zemin); }

/* ZEMİN: BUZLU CAM — arkadaki gerçek sayfa görünür ama bulanıktır.
   İlk bildirim FALLBACK'tir: color-mix desteklenmeyen motorda perde OPAK olur
   (yarı saydam + blur'suz "neredeyse görünmez perde" durumuna düşmez). */
.on-yukleyici--z-buzlu {
  background: var(--oy-zemin);
  background: color-mix(in srgb, var(--oy-zemin) 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  transform: translateZ(0);         /* katman terfisi — blur'u GPU'ya al */
}

/* backdrop-filter yoksa buzlu zemin okunaksız kalırdı → tam renge dön */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .on-yukleyici--z-buzlu { background: var(--oy-zemin); }
}

/* ---------- KAPANIŞ (ayar: preloaderCikis) ----------
   JS hangi sınıfı ekleyeceğine data-cikis'e bakarak karar verir; düğüm ~0,75 sn
   sonra DOM'dan da alınır (preloader.js). */
.on-yukleyici--git {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.on-yukleyici--asagi  { transform: translateY(103%);  visibility: hidden; }
.on-yukleyici--yukari { transform: translateY(-103%); visibility: hidden; }

/* ÖNİZLEME DÖNGÜSÜ SIFIRLAMASI — perde başa alınırken geçiş ÇALIŞMAMALI.
   Sınıf tek kare için eklenir (preloader.js), sonra hemen silinir: aksi hâlde
   perde geri gelirken de 0,6 sn süzülür ve logo animasyonuyla üst üste biner. */
.on-yukleyici--sifirla { transition: none !important; }

@keyframes onYukEmniyet {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- KAYDIRMA KİLİDİ ----------
   Sınıfı YALNIZ preloader.php'deki satır içi betik ekler. JS tümden kapalıysa
   sınıf da yoktur: sayfa kaydırılabilir kalır (erişilebilirlik emniyeti).
   Normal akışta perde kapanırken preloader.js sınıfı kaldırır.

   ⚠ KİLİDİN DE KENDİ KAÇIŞ KAPISI VAR: satır içi betik kilidi kurduğu halde
   preloader.js indirilememişse perde onYukEmniyet ile kalkar ama kilit kalırdı
   → sayfa GÖRÜNÜR olur, buna karşın HİÇ kaydırılamazdı. Bu yüzden kilit de
   perdeyle AYNI saatte (--oy-emniyet) kendini bırakır. overflow'un animasyon
   türü "ayrık"tır; 0 sn süre + gecikme, gecikme boyunca kurala DOKUNMAZ. */
html.on-yukleniyor {
  overflow: hidden;
  animation: onYukKilitBirak 0s var(--oy-emniyet, 4400ms) forwards;
}

@keyframes onYukKilitBirak {
  to { overflow: visible; }
}

/* ---------- LOGO (ortak) ---------- */
.on-yukleyici__logo {
  width: min(46vw, 250px);
  height: auto;
  will-change: transform, opacity;
}

/* Varyant 5'in satır içi SVG'si: kabın ölçüsünü doldurur → <img> ile AYNI
   boyutta durur. perspective, v4'ün rotateY'sinin 3B görünmesi için. */
.on-yukleyici__logo--svg { display: block; }
.on-yukleyici__logo > svg { width: 100%; height: auto; overflow: visible; }
.on-yukleyici { perspective: 900px; }

/* ---------- VARYANT 1 — YUMUŞAK ODAK + SÜZÜLME (varsayılan) ----------
   Bulanıktan netleşir (odak), sonra sonsuz ve nazik bir süzülmeye geçer.
   Süreler calc(<doğal süre> * var(--oy-hiz)) ile kurulur: --oy-hiz'i
   preloader.php "Logo süresi / varyantın doğal süresi" olarak hesaplar, böylece
   ayardaki saniye HANGİ VARYANTTA DA aynı anlama gelir. */
.on-yukleyici--v1 .on-yukleyici__logo {
  animation: onYukOdak calc(1.1s * var(--oy-hiz, 1)) ease both,
             onYukSuzul 3.6s ease-in-out calc(1.1s * var(--oy-hiz, 1)) infinite;
}

@keyframes onYukOdak {
  from { opacity: 0; filter: blur(14px); transform: scale(.9); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}

@keyframes onYukSuzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ---------- VARYANT 2 — SOLDAN SAĞA AÇILIŞ ----------
   Logo, soldan sağa açılan bir perdeyle ortaya çıkar (clip-path inset).
   Marka-nötr, gösterişsiz: hiçbir şey uçmaz, sıçramaz, sarsılmaz. */
.on-yukleyici--v2 .on-yukleyici__logo {
  animation: onYukAcilis calc(1.3s * var(--oy-hiz, 1)) cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes onYukAcilis {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- VARYANT 3 — KALP ATIŞI ----------
   Belirme süresinin ardından nabız döngüsü. İki animasyon TEK bildirimde
   zincirlenir: belirme "both" ile son karesini korur, nabız sonsuz döner
   (gösteri süresi dolduğunda perde kapanır). */
.on-yukleyici--v3 .on-yukleyici__logo {
  animation: onYukBelir calc(.6s * var(--oy-hiz, 1)) ease both,
             onYukKalp 1.8s ease-in-out calc(.6s * var(--oy-hiz, 1)) infinite;
}

@keyframes onYukBelir {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes onYukKalp {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.11); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.07); }
  48%      { transform: scale(1); }
}

/* ---------- VARYANT 4 — POP + 3B HAFİF EĞİLME ----------
   Yaylanarak (overshoot) gelir, sonra 3B eksende hafifçe eğilir.
   En hareketli varyant; kurumsal tonu bozmaması için açı 10° ile sınırlı. */
.on-yukleyici--v4 .on-yukleyici__logo {
  animation: onYukPop calc(1.2s * var(--oy-hiz, 1)) cubic-bezier(.34, 1.56, .64, 1) both,
             onYukEgim 4s ease-in-out calc(1.2s * var(--oy-hiz, 1)) infinite;
}

@keyframes onYukPop {
  from { opacity: 0; transform: scale(.5) rotateY(-45deg); }
  60%  { opacity: 1; transform: scale(1.06) rotateY(12deg); }
  to   { opacity: 1; transform: scale(1) rotateY(0); }
}

@keyframes onYukEgim {
  0%, 100% { transform: rotateY(0) translateY(0); }
  50%      { transform: rotateY(-10deg) translateY(-6px); }
}

/* ---------- VARYANT 5 — HARF HARF ÇİZİM ----------
   preloader.php her şekle KENDİ GEOMETRİSİYLE bir clipPath verir → kontur
   YALNIZ İÇERİDEN görünür, çizgi harfin DIŞINA TAŞMAZ ve bitmiş logo orijinal
   inceliğinde kalır (kullanıcı kuralı). pathLength="1" sayesinde dash uzunluğu
   geometriden BAĞIMSIZ olur; --oyg (gecikme) / --oys (süre) şekil başına
   enjekte edilir. Şekil = harf (bileşik yol preloader.php'de bölünür); sıra
   satır satır, satır içinde soldan sağa: amblem → GAZALI → AVIATION.
   Kontur TEK renktir (logo kendi renklerine dolgu fazında kavuşur). */
.on-yukleyici--v5 [data-oy-cizim] {
  stroke: var(--oy-kontur);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* kalınlık EKRAN pikseli — büyük ekranda da ince */
  stroke-dasharray: 1;
  /* ⚠ ÜÇÜNCÜ ANİMASYON — KONTURU SİL (kullanıcı kararı 2026-07-30):
     çizgi yalnız ÇİZİM SIRASINDA görünür; şekil dolduktan sonra kontur
     söner ve logo kendi orijinal inceliğinde kalır. Eskiden kontur kalıcıydı
     ve bitmiş logo çizgiyle kalınlaşmış görünüyordu.
     Zamanlama: dolgu (%55'te başlar, %80 sürer) bittikten hemen sonra. */
  animation: onYukCiz var(--oys, .4s) ease-in-out var(--oyg, 0s) both,
             onYukDol calc(var(--oys, .4s) * .8) ease-out calc(var(--oyg, 0s) + var(--oys, .4s) * .55) both,
             onYukKonturSil calc(var(--oys, .4s) * .45) ease-out calc(var(--oyg, 0s) + var(--oys, .4s) * 1.15) both;
}

@keyframes onYukCiz {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Kontur sönümü — çizim bitti, dolgu yerinde: çizgiye artık gerek yok. */
@keyframes onYukKonturSil {
  from { stroke-opacity: 1; }
  to   { stroke-opacity: 0; }
}

/* Dolgu konturdan SONRA gelir → göz önce çizgiyi, sonra rengi görür */
@keyframes onYukDol {
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}

/* ---------- ALT YAZI (mikrositede KAMPÜS ADI, portalda slogan) ----------
   Kelimeler preloader.js tarafından HARF HARF yazılır (kaynaktaki daktilo
   efekti); tek atlamalı kelimeler vurgu renginde çıkar. Logo animasyonu
   bitince belirir (--yazi fazı). */
.on-yukleyici__alt {
  max-width: min(90vw, 30ch);
  font-family: var(--font-body, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.5vw, 2rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: var(--oy-yazi);
  opacity: 0;
  transition: opacity .35s ease;
}

.on-yukleyici--yazi .on-yukleyici__alt { opacity: 1; }

.on-yukleyici__kelime--vurgu { color: var(--oy-vurgu); }

/* Daktilo imleci — JS yazarken satır sonunda durur, yazı bitince kaldırılır */
.on-yukleyici__imlec {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 2px;
  vertical-align: -.14em;
  background: var(--oy-vurgu);
  animation: onYukImlec .7s step-end infinite;
}

@keyframes onYukImlec {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* SLOGAN ÇERÇEVESİ (ayar: preloaderSloganKutu=1) — yazının çevresinde ince
   kenarlıklı, yumuşak zeminli bir şerit. NEDEN SEÇENEK: buzlu zeminde arkadaki
   sayfa yazının içinden sızıp okunurluğu bozabiliyor; kutu o riski keser.
   Varsayılan KUTUSUZ, çünkü sade duruş okul tonuna daha yakın. */
.on-yukleyici--kutulu .on-yukleyici__alt {
  padding: .55rem 1.5rem;
  border: 1px solid var(--oy-cip-kenar);
  border-radius: 999px;
  background: var(--oy-cip-zemin);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, .07));
  font-size: clamp(1rem, 3.6vw, 1.5rem);   /* kutu içinde bir tık küçük durur */
}

/* ---------- BELİRSİZ İLERLEME GÖSTERGESİ ----------
   Gerçek yüzde bildirmez (bilinmiyor); yalnızca "çalışıyor" der.
   Konum (preloaderBarKonum): --logo = akışta, logonun altında ·
   --dip = ekranın dibinde (gösteriyi kalabalıklaştırmaz). */
.on-yukleyici__gosterge--dip {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
}

/* Kayan çubuk — soldan büyür, sağa doğru kapanır. Kaydırılan KISA bir parça
   yerine ölçekleme seçildi: kısa parça rayın dışında geçirdiği anlarda hiç
   hareket görünmüyordu; bu desende çubuk döngünün HER anında görünür.
   Renkler --oy-logo-1…3 durakları (lacivert → altın; gerekçe perde kökünde). */
.on-yukleyici__gosterge--cubuk {
  display: block;
  width: min(42vw, 170px);
  height: 3px;
  border-radius: 999px;
  background: var(--oy-ray);
  overflow: hidden;
}

.on-yukleyici__gosterge--cubuk > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--oy-logo-3), var(--oy-logo-1) 52%, var(--oy-logo-2));
  animation: onYukSupur var(--oy-bar, 1.5s) ease-in-out infinite;
}

@keyframes onYukSupur {
  0%   { transform: scaleX(0); transform-origin: 0 50%; }
  45%  { transform: scaleX(1); transform-origin: 0 50%; }
  55%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* Dönen halka — tek düğüm, kenarlıkla üretilir (ek DOM yok). Üç kenar
   --oy-logo-1…3 duraklarını taşır, dördüncüsü ray rengiyle boşluk hissi verir. */
.on-yukleyici__gosterge--yuvarlak {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--oy-ray);
  border-top-color: var(--oy-logo-1);
  border-right-color: var(--oy-logo-2);
  border-bottom-color: var(--oy-logo-3);
  animation: onYukDon var(--oy-bar, 1.5s) linear infinite;
}

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

.on-yukleyici__gosterge--yuvarlak.on-yukleyici__gosterge--dip {
  animation: onYukDonDip var(--oy-bar, 1.5s) linear infinite;   /* translateX'i koru */
}

@keyframes onYukDonDip {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* ---------- YÖNETİM ÖNİZLEMESİ ----------
   Perde orada da TAM EKRANdır (ölçek yalan söylemesin) — yalnız emniyet saati
   devre dışıdır, yoksa sahne bir süre sonra kendini gizlerdi. Sahnenin sağ
   panele çarpmaması gibi konum işleri stüdyonun kendi CSS'indedir
   (public/assets/yonetim/css/preloader.css). */
.on-yukleyici--onizleme { animation: none; }

/* ---------- MOBİL UYUM (320 / 360 / 480 / 768 / 1200) ---------- */
@media (max-width: 1200px) {
  .on-yukleyici__logo { width: min(44vw, 235px); }
}

@media (max-width: 768px) {
  .on-yukleyici { gap: min(var(--oy-bosluk, 30px), 22px); }
  .on-yukleyici__logo { width: min(52vw, 225px); }
  .on-yukleyici__alt { font-size: clamp(1.05rem, 4.6vw, 1.5rem); }
  .on-yukleyici--kutulu .on-yukleyici__alt { padding: .5rem 1.2rem; }
  .on-yukleyici__gosterge--cubuk { width: min(46vw, 150px); }
  .on-yukleyici__gosterge--dip { bottom: 32px; }
}

@media (max-width: 480px) {
  .on-yukleyici { gap: min(var(--oy-bosluk, 30px), 18px); }
  .on-yukleyici__logo { width: 56vw; }
  .on-yukleyici__alt { font-size: clamp(.95rem, 5vw, 1.25rem); }
  .on-yukleyici--kutulu .on-yukleyici__alt { padding: .45rem 1rem; }
  .on-yukleyici__gosterge--cubuk { width: 40vw; }
}

@media (max-width: 360px) {
  .on-yukleyici__logo { width: 60vw; }
  .on-yukleyici__alt { font-size: .95rem; }
  .on-yukleyici__gosterge--cubuk { width: 34vw; }
}

@media (max-width: 320px) {
  .on-yukleyici__alt { font-size: .88rem; }
  .on-yukleyici__gosterge--cubuk { width: 30vw; }
  .on-yukleyici__gosterge--dip { bottom: 24px; }
}

/* ---------- HAREKET AZALTMA ----------
   Kullanıcı hareket istemiyorsa HİÇBİR VARYANT OYNAMAZ: son kare doğrudan
   gelir (logo tam boyutta ve tam opak, slogan harf harf yazılmaz — preloader.js
   metni tek seferde basıp --yazi fazını anında ekler), göstergeler durur, kayan
   çıkış solmaya çevrilir.
   ⚠ onYukEmniyet ve onYukKilitBirak BİLEREK kapsam dışıdır: onlar süsleme
   değil, perdenin ve kaydırma kilidinin tek CSS kaçış kapısıdır. */
@media (prefers-reduced-motion: reduce) {

  .on-yukleyici { transition: none; }

  .on-yukleyici__logo,
  .on-yukleyici--v1 .on-yukleyici__logo,
  .on-yukleyici--v2 .on-yukleyici__logo,
  .on-yukleyici--v3 .on-yukleyici__logo,
  .on-yukleyici--v4 .on-yukleyici__logo {
    animation: none;
    transform: none;
    filter: none;
    clip-path: none;
    opacity: 1;
  }

  /* Çizim de hareket: kontur hiç çizilmez, dolgu doğrudan görünür */
  .on-yukleyici--v5 [data-oy-cizim] {
    animation: none;
    stroke: none;
    fill-opacity: 1;
  }

  .on-yukleyici__alt { transition: none; }
  .on-yukleyici__imlec { display: none; }

  /* Animasyon düşünce çubuğun span'i zaten tam genişlikte (scaleX uygulanmaz):
     gösterge durağan, soluk bir çizgi/halka olarak kalır. */
  .on-yukleyici__gosterge--cubuk > span,
  .on-yukleyici__gosterge--yuvarlak,
  .on-yukleyici__gosterge--yuvarlak.on-yukleyici__gosterge--dip {
    animation: none;
    opacity: .45;
  }

  .on-yukleyici__gosterge--yuvarlak.on-yukleyici__gosterge--dip { transform: translateX(-50%); }

  /* Kayan çıkış da hareket sayılır → sadece sönerek kapan */
  .on-yukleyici--asagi,
  .on-yukleyici--yukari {
    transform: none;
    opacity: 0;
  }
}