/* ==========================================================================
   Okulia Landing — hareket ve etkileşim katmanı

   İlke: hareket bir şeyi anlatmak için var, süs olsun diye değil.
   - Sürekli oynayan animasyon yalnızca maskotta ve "aşağı" okunda.
   - Hover'da kısa mesafe (4–6 px), sıkı gölge, hızlı geçiş.
   - Beliriş animasyonları kısa (.42 s) ve az mesafeli (16 px);
     okumayı geciktirmez.
   - Tamamı prefers-reduced-motion ile kapanır.
   ========================================================================== */
:root{
  --e-cikis:cubic-bezier(.22,.9,.28,1);   /* yumuşak duruş */
  --e-giris:cubic-bezier(.4,0,.2,1);
  --h:.2s var(--e-cikis);                  /* hover geçişi */
  --r:.42s var(--e-cikis);                 /* beliriş geçişi */

  --golge-yumusak:0 10px 22px -10px rgba(43,42,80,.38);
  --golge-derin:0 16px 28px -18px rgba(43,42,80,.55);
}
html{scroll-behavior:smooth}

/* --------------------------------------------------------------------------
   1. Beliriş — JS ilgili ögelere .ac ekler, görünürken .ac--gor gelir
   -------------------------------------------------------------------------- */
.ac{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--r) var(--gec,0ms), transform var(--r) var(--gec,0ms);
}
.ac--pop{transform:translateY(12px) scale(.965)}
.ac--sag{transform:translateX(36px)}
.ac--sol{transform:translateX(-36px)}
.ac.ac--gor{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   2. Üst menü
   -------------------------------------------------------------------------- */
.ust__kus,.ust__logo,.dip__logo{transition:transform var(--h)}
.ust__kus:hover,.ust__logo:hover,.dip__logo:hover{transform:scale(1.05)}

.ust__menu a{transition:color var(--h)}
.ust__menu a::after{
  content:"";position:absolute;left:50%;bottom:11px;
  width:0;height:2px;border-radius:2px;background:var(--mavi);
  transform:translateX(-50%);transition:width var(--h);
}
.ust__menu a:hover{color:var(--mavi)}
.ust__menu a:hover::after{width:calc(100% - 30px)}

/* Gökkuşağı çerçeve: hover'da renkler yavaşça kayar */
.ogrenci{
  background-size:200% 100%;
  transition:transform var(--h),background-position .9s var(--e-giris);
}
.ogrenci:hover{transform:translateY(-2px);background-position:100% 0}
.ogrenci__ic{transition:color var(--h)}
.ogrenci .ok-asagi{transition:transform var(--h)}
.ogrenci:hover .ok-asagi{transform:rotate(-90deg) translateY(-3px)}

.giris{transition:transform var(--h),box-shadow var(--h)}
.giris .ok-asagi{transition:transform var(--h)}
.giris:hover{transform:translateY(-2px);box-shadow:0 5px 0 0 #74c68b}
.giris:hover .ok-asagi{transform:rotate(-90deg) translateY(-3px)}
.giris:active{transform:translateY(1px);box-shadow:none}

.ust__bayrak{transition:transform var(--h),background var(--h)}
.ust__bayrak:hover{transform:scale(1.06);background:#e3eaf7}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
/* Altı çizgi, başlık yerleştikten sonra soldan sağa çizilir */
.hero__cizgi{transform-origin:left center;animation:cizgiCiz .8s 1.1s var(--e-cikis) both}
@keyframes cizgiCiz{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

.hero__tanitim{transition:transform var(--h),background var(--h)}
.hero__tanitim:hover{transform:translateY(-2px);background:#e7eef9}
.hero__tanitim u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.hero__tanitim-ok{transition:transform var(--h),box-shadow var(--h)}
.hero__tanitim:hover .hero__tanitim-ok{transform:translateX(4px);box-shadow:0 6px 14px -6px rgba(43,42,80,.5)}

/* Altı renkli kart — dinginde sabit, hover'da tek bir hareket */
.kart{transition:transform var(--h),box-shadow var(--h);cursor:pointer}
.kart img{transition:transform .34s var(--e-cikis)}
.etiket{transition:transform var(--h),box-shadow var(--h)}
/* Yukarı–aşağı zıplama yerine hafif bir yana dönme: kartlar oyuncak gibi
   eğiliyor, sıra bozulmuyor. Her kart sırayla ters yöne dönüyor. */
.kart--1{--egim:-2.4deg}
.kart--2{--egim: 2.4deg}
.kart--3{--egim:-2.4deg}
.kart--4{--egim: 2.4deg}
.kart--5{--egim:-2.4deg}
.kart--6{--egim: 2.4deg}
.kart:hover{
  transform:rotate(var(--egim)) scale(1.04);
  box-shadow:0 18px 30px -14px var(--parilti,rgba(43,42,80,.5));
}
.kart:hover img{transform:rotate(calc(var(--egim) * -.5)) scale(1.04)}
.kart:active{transform:rotate(calc(var(--egim) * .4)) scale(1.01);transition-duration:.09s}

.kayit{transition:box-shadow var(--h)}
.kayit:hover{box-shadow:var(--golge-yumusak)}
.kayit__buton{transition:transform var(--h),box-shadow var(--h)}
.kayit__buton .ok-asagi{transition:transform var(--h)}
.kayit__buton:hover{transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(43,42,80,.5)}
.kayit__buton:hover .ok-asagi{transform:rotate(-90deg) translateY(-4px)}
.kayit__buton:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}

/* Maskot: sayfadaki tek sürekli hareket */
.hero__maskot{animation:suzul 6s ease-in-out infinite}
@keyframes suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.hero__mobil{transition:transform var(--h),box-shadow var(--h)}
.hero__mobil:hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(212,160,20,.7)}
.hero__mobil:active{transform:translateY(0);transition-duration:.08s}

.hero__inceleyin{transition:transform var(--h),box-shadow var(--h)}
.hero__inceleyin:hover{transform:translateY(-2px);box-shadow:var(--golge-yumusak)}
.hero__inceleyin-ok{animation:zipla 2.4s ease-in-out infinite}
.hero__inceleyin:hover + .hero__inceleyin-ok,
.hero__inceleyin:hover .hero__inceleyin-ok{animation-duration:1.1s}
@keyframes zipla{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* --------------------------------------------------------------------------
   4. Planlar
   -------------------------------------------------------------------------- */
.plan{transition:transform var(--h),box-shadow var(--h)}
.plan:hover{transform:translateY(-8px);box-shadow:0 26px 44px -20px rgba(13,20,60,.65)}
.plan__serit{transition:transform var(--h)}
.plan:hover .plan__serit{transform:translateY(-3px)}
.plan__buton{transition:transform var(--h),box-shadow var(--h)}
.plan__buton:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 var(--mavi-acik)}
.plan__buton:active{transform:translateY(4px);box-shadow:none;transition-duration:.08s}

/* --------------------------------------------------------------------------
   5. Deneyimler
   -------------------------------------------------------------------------- */
.serit{cursor:grab}
.serit.serit--tutuluyor{cursor:grabbing}
.yorum{transition:transform var(--h),box-shadow var(--h)}
.yorum:hover{transform:translateY(-5px);box-shadow:0 6px 0 0 #e9edf6,0 20px 30px -18px rgba(43,42,80,.5)}
.yorum__foto{transition:transform var(--h)}
.yorum:hover .yorum__foto{transform:scale(1.05)}

/* --------------------------------------------------------------------------
   6. Hakkında
   -------------------------------------------------------------------------- */
.bilgi__gorsel img{transition:transform .4s var(--e-cikis)}
.bilgi:hover .bilgi__gorsel img{transform:scale(1.06)}
.bilgi__kutu{transition:transform var(--h),box-shadow var(--h)}
.bilgi:hover .bilgi__kutu{transform:translateY(-4px);box-shadow:var(--golge-yumusak)}
.bilgi__buton{transition:transform var(--h),filter var(--h)}
.bilgi__buton i{transition:transform var(--h)}
.bilgi:hover .bilgi__buton{transform:translateY(-2px);filter:brightness(.96)}
.bilgi:hover .bilgi__buton i{transform:rotate(-45deg) translate(2px,2px)}
.bilgi__buton:active{transform:translateY(1px);transition-duration:.08s}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.kanal__daire{transition:transform var(--h),box-shadow var(--h)}
.kanal h3{transition:transform var(--h)}
.kanal a:hover .kanal__daire{transform:scale(1.07);box-shadow:0 0 0 5px rgba(255,255,255,.25)}
.kanal a:hover h3{transform:translateX(3px)}
.kanal p a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--h);
}
.kanal p a:hover{background-size:100% 1px}

/* Bağlantılar blok kalmalı — satır içine düşerse sütunlar iç içe geçiyor */
.hizli a,.yasal a{position:relative;display:block;width:fit-content;transition:transform var(--h)}
.hizli a::after,.yasal a::after{
  content:"";position:absolute;left:0;bottom:1px;width:0;height:2px;
  border-radius:2px;background:currentColor;transition:width var(--h);
}
.hizli a:hover,.yasal a:hover{transform:translateX(3px)}
.hizli a:hover::after,.yasal a:hover::after{width:100%}

/* --------------------------------------------------------------------------
   8. Erişilebilirlik
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,.serit:focus-visible{
  outline:3px solid var(--mavi-koyu);outline-offset:3px;border-radius:8px;
}
.dip a:focus-visible,.hizli a:focus-visible,.yasal a:focus-visible,.kanal a:focus-visible{
  outline-color:var(--beyaz);
}

/* --------------------------------------------------------------------------
   9. Hareket azaltma tercihi
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ac{opacity:1 !important;transform:none !important}
  .hero__cizgi{animation:none}
}