/* ====================================================================
   UFUK KOLEJİ — Eğitim temalı animasyonlu SVG stilleri
   Hem site (style.css yanında) hem admin panelinde kullanılır;
   bu yüzden ayrı dosyada tutulur.
   ==================================================================== */
/* ====================================================================
   EĞİTİM TEMALI ANİMASYONLU SVG'LER
==================================================================== */
.edu-svg{display:block;width:100%;height:100%;overflow:visible}

/* 1) KİTAP — sayfa çevirme */
@keyframes esBookPage{0%,15%{transform:rotateY(0)}50%{transform:rotateY(-160deg)}85%,100%{transform:rotateY(0)}}
.es-book .es-page{animation:esBookPage 4.2s ease-in-out infinite;backface-visibility:visible;transform-style:preserve-3d}

/* 2) MEZUNİYET KEPİ — püskül salınımı */
@keyframes esTassel{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}
.es-mortar{animation:esFloat 4s ease-in-out infinite}
.es-mortar .es-tassel{animation:esTassel 2.6s ease-in-out infinite;transform-origin:60px 50px}

/* 3) ATOM — elektron yörüngeleri */
@keyframes esOrbit1{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes esOrbit2{from{transform:rotate(60deg)}to{transform:rotate(420deg)}}
@keyframes esOrbit3{from{transform:rotate(-60deg)}to{transform:rotate(300deg)}}
.es-atom .es-orbit1{animation:esOrbit1 3.5s linear infinite}
.es-atom .es-orbit2{animation:esOrbit2 4.5s linear infinite}
.es-atom .es-orbit3{animation:esOrbit3 5.5s linear infinite}

/* 4) AMPUL — parlama + ışınlar */
@keyframes esGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,203,5,.5))}50%{filter:drop-shadow(0 0 18px rgba(255,203,5,.95))}}
@keyframes esRays{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
.es-bulb .es-glow{animation:esGlow 2.4s ease-in-out infinite}
.es-bulb .es-rays{animation:esRays 2.4s ease-in-out infinite;transform-origin:60px 50px}

/* 5) KALEM — yazı çizgisi + kalem hareketi */
@keyframes esDraw{0%{stroke-dashoffset:160}45%{stroke-dashoffset:0}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-160}}
@keyframes esPenMove{0%{transform:translate(0,0)}45%{transform:translate(-70px,-15px)}55%{transform:translate(-70px,-15px)}100%{transform:translate(0,0)}}
.es-pencil .es-line{stroke-dasharray:160;stroke-dashoffset:160;animation:esDraw 4s ease-in-out infinite}
.es-pencil .es-pen{animation:esPenMove 4s ease-in-out infinite}

/* 6) ROKET — yükseliş + alev titremesi */
@keyframes esRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes esFlame{0%,100%{transform:scaleY(1);opacity:.95}50%{transform:scaleY(.7);opacity:.7}}
.es-rocket .es-rise{animation:esRise 1.6s ease-in-out infinite}
.es-rocket .es-flame{animation:esFlame .35s ease-in-out infinite;transform-origin:60px 80px}

/* 7) PERGEL — kollar açılma + daire çizimi */
@keyframes esCompass{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes esCircle{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
.es-compass .es-arms{animation:esCompass 3s ease-in-out infinite}
.es-compass .es-circle{stroke-dasharray:200;animation:esCircle 4s ease-in-out infinite alternate}

/* 8) DÜNYA — yatay dönme (continent shift) */
@keyframes esSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.es-globe .es-spin{animation:esSpin 12s linear infinite;transform-origin:60px 60px;transform-style:preserve-3d}

/* GENEL — yumuşak yüzme efekti */
@keyframes esFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* ====================================================================
   BÜYÜK HERO SVG ANİMASYONLARI (slider sağ slot)
   Katmanlı hareket kurgusu: sahne yavaş (10–30 sn), ana obje orta (4–6 sn),
   parçacıklar hızlı (2–3 sn). Böylece kompozisyon canlı ama huzursuz değil.
==================================================================== */
.es-hero{overflow:visible}

/* --- Sahne zemini: aura nefes alır, halkalar zıt yönde döner --- */
@keyframes esAura{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes esRingCw{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes esRingCcw{from{transform:rotate(360deg)}to{transform:rotate(0)}}
.es-hero .es-aura  {animation:esAura   6s   ease-in-out infinite;transform-origin:220px 225px}
.es-hero .es-ring-a{animation:esRingCw 34s  linear      infinite;transform-origin:220px 225px}
.es-hero .es-ring-b{animation:esRingCcw 24s linear      infinite;transform-origin:220px 225px}

/* --- Ortak hareketler --- */
@keyframes esBob     {0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes esBobSlow {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes esFloatA  {0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-7px,-12px) rotate(-4deg)}}
@keyframes esFloatB  {0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(8px,-10px) rotate(5deg)}}
@keyframes esTwinkle {0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.es-hero .es-bob      {animation:esBob     5s   ease-in-out infinite}
.es-hero .es-bob-slow {animation:esBobSlow 6.4s ease-in-out infinite}
.es-hero .es-float-a  {animation:esFloatA  5.6s ease-in-out infinite}
.es-hero .es-float-b  {animation:esFloatB  6.2s ease-in-out infinite}

/* Parçacıklar — her biri farklı fazda */
.es-hero .es-mote{animation:esTwinkle 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.es-hero .es-mote.m2{animation-duration:2.4s;animation-delay:.3s}
.es-hero .es-mote.m3{animation-duration:3.4s;animation-delay:.6s}
.es-hero .es-mote.m4{animation-duration:2.8s;animation-delay:.9s}
.es-hero .es-mote.m5{animation-duration:3.2s;animation-delay:1.2s}
.es-hero .es-mote.m6{animation-duration:2.6s;animation-delay:1.5s}

/* Rozetler (chip) — hafif nabız */
@keyframes esChip{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}
.es-hero .es-chip{animation:esChip 4.4s ease-in-out infinite}

/* Yörünge sarmalayıcıları: kap döner, içindeki rozet ters dönerek dik kalır */
@keyframes esOrbCw {from{transform:rotate(0)}     to{transform:rotate(360deg)}}
@keyframes esOrbCcw{from{transform:rotate(360deg)}to{transform:rotate(0)}}
.es-hero .es-orbit-slow{animation:esOrbCw  26s linear infinite}
.es-hero .es-orbit-rev {animation:esOrbCcw 32s linear infinite}
.es-hero .es-orbit-slow > .es-chip{animation:esOrbCcw 26s linear infinite}
.es-hero .es-orbit-rev  > .es-chip{animation:esOrbCw  32s linear infinite}

/* --- 10) AKADEMİK: grafik soldan sağa çizilir, noktalar sırayla parlar --- */
@keyframes esDrawLine{0%{stroke-dashoffset:340}35%,100%{stroke-dashoffset:0}}
@keyframes esAreaIn  {0%{opacity:0}45%,100%{opacity:1}}
@keyframes esPop     {0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.es-hero-math .es-hm-line{stroke-dasharray:340;animation:esDrawLine 7s ease-in-out infinite}
.es-hero-math .es-hm-area{animation:esAreaIn 7s ease-in-out infinite}
.es-hero-math .es-hm-dots circle{transform-box:fill-box;transform-origin:center;animation:esPop 7s ease-in-out infinite}
.es-hero-math .es-hm-dots .d2{animation-delay:.5s}
.es-hero-math .es-hm-dots .d3{animation-delay:1s}
.es-hero-math .es-hm-dots .d4{animation-delay:1.5s}
.es-hero-math .es-hm-badge{animation:esChip 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* --- 11) BİLİM: sarmal nefes alır, kabarcıklar yükselir, buhar tüter --- */
@keyframes esHelix {0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-6px) scaleY(1.03)}}
@keyframes esRungs {0%,100%{opacity:.45}50%{opacity:1}}
@keyframes esBubble{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-62px);opacity:0}}
@keyframes esWave  {0%,100%{transform:translateX(0)}50%{transform:translateX(-32px)}}
@keyframes esSteam {0%{opacity:0;transform:translateY(6px)}45%{opacity:.55}100%{opacity:0;transform:translateY(-28px)}}
.es-hero-chem .es-hc-helix{animation:esHelix 5.4s ease-in-out infinite;transform-origin:74px 216px}
.es-hero-chem .es-hc-rungs line{animation:esRungs 2.4s ease-in-out infinite}
.es-hero-chem .es-hc-rungs line:nth-child(2){animation-delay:.2s}
.es-hero-chem .es-hc-rungs line:nth-child(3){animation-delay:.4s}
.es-hero-chem .es-hc-rungs line:nth-child(4){animation-delay:.6s}
.es-hero-chem .es-hc-rungs line:nth-child(5){animation-delay:.8s}
.es-hero-chem .es-hc-rungs line:nth-child(6){animation-delay:1s}
.es-hero-chem .es-hc-wave{animation:esWave 4s ease-in-out infinite}
.es-hero-chem .es-hc-bub{animation:esBubble 3s ease-in infinite}
.es-hero-chem .es-hc-bub.b2{animation-duration:3.6s;animation-delay:.5s}
.es-hero-chem .es-hc-bub.b3{animation-duration:3.2s;animation-delay:1s}
.es-hero-chem .es-hc-bub.b4{animation-duration:2.8s;animation-delay:1.5s}
.es-hero-chem .es-hc-steam{animation:esSteam 3.4s ease-in-out infinite}
.es-hero-chem .es-orbit-a{animation:esOrbCw 6s  linear infinite}
.es-hero-chem .es-orbit-b{animation:esOrbCw 8s  linear infinite}
.es-hero-chem .es-orbit-c{animation:esOrbCw 10s linear infinite}

/* --- 12) MEZUNİYET: püskül sallanır, kep yüzeyinde ışık geçer, konfeti düşer --- */
@keyframes esTassel2 {0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes esSheen   {0%{transform:translateX(0)}55%,100%{transform:translateX(560px)}}
@keyframes esConfetti{0%{transform:translateY(-14px) rotate(0);opacity:0}20%{opacity:1}100%{transform:translateY(26px) rotate(220deg);opacity:0}}
.es-hero-grad .es-hg-tassel{animation:esTassel2 3.4s ease-in-out infinite}
.es-hero-grad .es-hg-sheen {animation:esSheen 5s ease-in-out infinite}
.es-hero-grad .es-hg-confetti rect{transform-box:fill-box;transform-origin:center;animation:esConfetti 4.2s ease-in infinite}
.es-hero-grad .es-hg-confetti .c2{animation-duration:5s;  animation-delay:.4s}
.es-hero-grad .es-hg-confetti .c3{animation-duration:4.6s;animation-delay:.9s}
.es-hero-grad .es-hg-confetti .c4{animation-duration:5.4s;animation-delay:1.3s}
.es-hero-grad .es-hg-confetti .c5{animation-duration:4.8s;animation-delay:1.8s}

/* --- 13) KÜTÜPHANE: sayfa çevrilir, saat işler, bilgi ışıkları yükselir --- */
@keyframes esPageTurn{0%,18%{transform:rotateY(0)}52%{transform:rotateY(-158deg)}86%,100%{transform:rotateY(0)}}
@keyframes esSparkUp {0%{transform:translateY(0)   scale(.5);opacity:0}
                      25%{opacity:1}
                      100%{transform:translateY(-46px) scale(1.1);opacity:0}}
.es-hero-books .es-hb-page{animation:esPageTurn 6s ease-in-out infinite;backface-visibility:visible}
.es-hero-books .es-hb-hour{animation:esRingCw 40s linear infinite}
.es-hero-books .es-hb-min {animation:esRingCw 7s  linear infinite}
.es-hero-books .es-hb-sparks circle{transform-box:fill-box;transform-origin:center;animation:esSparkUp 3s ease-out infinite}
.es-hero-books .es-hb-sparks .s2{animation-duration:3.6s;animation-delay:.6s}
.es-hero-books .es-hb-sparks .s3{animation-duration:3.2s;animation-delay:1.2s}

/* --- 14) KAMPÜS: pencereler sırayla yanar, bayrak dalgalanır --- */
@keyframes esWindow{0%,100%{fill:rgba(123,7,97,.28)}45%,65%{fill:#ffcb05}}
@keyframes esFlag  {0%,100%{transform:skewY(0)   scaleX(1)}50%{transform:skewY(-4deg) scaleX(.94)}}
.es-hero-campus .es-hp-win rect{animation:esWindow 5s ease-in-out infinite}
.es-hero-campus .es-hp-win .w2{animation-delay:.4s}
.es-hero-campus .es-hp-win .w3{animation-delay:.8s}
.es-hero-campus .es-hp-win .w4{animation-delay:1.2s}
.es-hero-campus .es-hp-win .w5{animation-delay:1.6s}
.es-hero-campus .es-hp-win .w6{animation-delay:2s}
.es-hero-campus .es-hp-flag{animation:esFlag 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
.es-hero-campus .es-hb-min{animation:esRingCw 9s linear infinite}

/* Hareket azaltma tercihi — tüm süsleme animasyonları durur */
@media (prefers-reduced-motion:reduce){
  .es-hero *,.edu-svg *{animation:none!important}
}