/* =====================================================================
   Hareket katmanı — stil.css'in ÜSTÜNE biner, ayrı dosya ki tek bayrakla kapansın.

   🔴 TAMAMI `prefers-reduced-motion:no-preference` İÇİNDE. Hareket istemeyen
   ziyaretçide bu dosya hiçbir şey yapmaz; sayfa stil.css ile eksiksiz.
   🔴 Başarısızlık yönü "GÖSTER": animasyon `both` dolgu kipiyle bitiş durumunda
   kalır; destek yoksa öğeler zaten görünür (başlangıç opaklığı 0 YAZILMAZ,
   yalnız animasyonun `from` karesinde).
   ===================================================================== */

@media (prefers-reduced-motion:no-preference){

  /* ---------- açılış: kahraman sırayla girer ---------- */
  .kahraman-metin > *{animation:giris .8s cubic-bezier(.2,.7,.2,1) both}
  .kahraman-metin > :nth-child(1){animation-delay:.05s}
  .kahraman-metin > :nth-child(2){animation-delay:.18s}
  .kahraman-metin > :nth-child(3){animation-delay:.32s}
  .kahraman-metin > :nth-child(4){animation-delay:.46s}
  .hk-ana{animation:giris-sag 1s .2s cubic-bezier(.2,.7,.2,1) both}
  .hk-yan{animation:giris-yukari .9s cubic-bezier(.2,.7,.2,1) both, yuz 6s ease-in-out infinite}
  .hk-1{animation-delay:.7s,1.6s}
  .hk-2{animation-delay:.85s,2.4s}
  .kunye li{animation:giris .7s cubic-bezier(.2,.7,.2,1) both}
  .kunye li:nth-child(1){animation-delay:.6s}
  .kunye li:nth-child(2){animation-delay:.72s}
  .kunye li:nth-child(3){animation-delay:.84s}
  .kunye li:nth-child(4){animation-delay:.96s}
  .sayfabasi .kapsa > *{animation:giris .7s cubic-bezier(.2,.7,.2,1) both}
  .sayfabasi .kapsa > :nth-child(2){animation-delay:.1s}
  .sayfabasi .kapsa > :nth-child(3){animation-delay:.2s}

  /* başlıktaki vurgulu söz: altı çizgi soldan çizilir */
  .kahraman h1 em{background:linear-gradient(var(--kehribar),var(--kehribar)) no-repeat 0 94%/0 4px;animation:cizgi 1.1s 1s cubic-bezier(.2,.7,.2,1) forwards}

  /* arka plan: mühendislik ızgarası ağır ağır kayar, mavi ışık nefes alır */
  .kahraman::before{animation:izgara-kay 60s linear infinite}
  .kahraman::after{content:"";position:absolute;right:-8%;top:8%;width:46vw;height:46vw;max-width:640px;max-height:640px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgb(255 198 26/.16),transparent);animation:nefes 7s ease-in-out infinite;pointer-events:none}

  /* ---------- düğmeler ---------- */
  .kahraman-dugme .dugme-kehribar{animation:nabiz 2.6s 2s infinite}
  .dugme-kehribar,.dugme-ana{position:relative;overflow:hidden}
  .dugme-kehribar::after,.dugme-ana::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgb(255 255 255/.45),transparent);transform:skewX(-20deg);transition:none}
  .dugme-kehribar:hover::after,.dugme-ana:hover::after{left:130%;transition:left .7s ease}
  .yuzen a{animation:zipla 4.5s ease-in-out infinite}
  .yuzen a + a{animation-delay:.6s}

  /* ---------- üretim hattı: bağlantı akar, halka atar ---------- */
  .hat li:not(:last-child)::after{border:0;height:2px;background:repeating-linear-gradient(90deg,#8fa9bf 0 9px,transparent 9px 18px);animation:akis 1.1s linear infinite}
  .hat-ikon{animation:halka 3.4s ease-out infinite}
  .hat li:nth-child(2) .hat-ikon{animation-delay:.5s}
  .hat li:nth-child(3) .hat-ikon{animation-delay:1s}
  .hat li:nth-child(4) .hat-ikon{animation-delay:1.5s}
  .hat a:hover .hat-ikon{transform:scale(1.08) rotate(-4deg)}
  .hat-ikon{transition:transform .25s,background .2s}

  /* ---------- kartlar: fotoğraf yaklaşır ---------- */
  .mkart-foto{overflow:hidden}
  .mkart-foto img,.paket-serit img,.paket-izgara img,.ornek-izgara img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .mkart:hover .mkart-foto img,.paket-serit a:hover img,.paket-izgara a:hover img,.ornek-izgara a:hover img{transform:scale(1.06)}
  .paket-serit a,.paket-izgara a{overflow:hidden}
  .ornek-izgara a{overflow:hidden}
  .urun-kart-liste a i{transition:transform .25s}
  .urun-kart-liste a:hover i{transform:translateX(6px)}
  .neden li{transition:transform .22s,box-shadow .22s,border-color .22s}
  .neden li:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgb(7 31 54/.12);border-left-color:var(--kehribar)}
  .iletisim-kart{transition:transform .22s,box-shadow .22s}
  .iletisim-kart:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgb(7 31 54/.12)}

  /* ---------- videolar ---------- */
  .video-oynat svg{animation:oynat-halka 2.4s ease-out infinite}

  /* ---------- kaydırınca: yüklenen ilerleme çizgisi + sıralı belirme ---------- */
  @supports (animation-timeline:view()){
    .mizgara > :nth-child(3n+2),.urun-kart-liste > :nth-child(3n+2),.neden > :nth-child(3n+2),.paket-izgara > :nth-child(5n+2){--i:1}
    .mizgara > :nth-child(3n),.urun-kart-liste > :nth-child(3n),.neden > :nth-child(3n),.paket-izgara > :nth-child(5n+3){--i:2}
    .paket-izgara > :nth-child(5n+4){--i:3}
    .paket-izgara > :nth-child(5n){--i:4}
    .bel{animation-range:entry calc(var(--i,0)*9%) entry calc(38% + var(--i,0)*9%)}
    .baslik::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--mavi),var(--kehribar));transform-origin:0 50%;animation:ilerleme linear both;animation-timeline:scroll(root)}
    .hk-ana img{animation:parallax linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }

  /* ---------- anahtar kareler ---------- */
  @keyframes giris{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes giris-sag{from{opacity:0;transform:translateX(46px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes giris-yukari{from{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes yuz{0%,100%{translate:0 0}50%{translate:0 -9px}}
  @keyframes cizgi{to{background-size:100% 4px}}
  @keyframes izgara-kay{to{background-position:0 0,36px 36px,36px 36px}}
  @keyframes nefes{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
  @keyframes nabiz{0%{box-shadow:0 0 0 0 rgb(255 198 26/.55)}70%,100%{box-shadow:0 0 0 16px rgb(255 198 26/0)}}
  @keyframes zipla{0%,88%,100%{transform:translateY(0)}93%{transform:translateY(-7px)}97%{transform:translateY(0)}}
  @keyframes akis{to{background-position:18px 0}}
  @keyframes halka{0%{box-shadow:0 0 0 6px var(--acik),0 0 0 8px #c5d3e0,0 0 0 8px rgb(0 79 135/.35)}80%,100%{box-shadow:0 0 0 6px var(--acik),0 0 0 8px #c5d3e0,0 0 0 22px rgb(0 79 135/0)}}
  @keyframes oynat-halka{0%{box-shadow:0 8px 24px rgb(0 0 0/.4),0 0 0 0 rgb(255 198 26/.6)}70%,100%{box-shadow:0 8px 24px rgb(0 0 0/.4),0 0 0 18px rgb(255 198 26/0)}}
  @keyframes ilerleme{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes parallax{from{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(18px)}}
}

/* fare ile derinlik (site.js --px/--py yazar; yalnız ince işaretçi + hareket kısıtı yok) */
@media (prefers-reduced-motion:no-preference) and (pointer:fine){
  .hk-ana{translate:calc(var(--px,0px)*-.6) calc(var(--py,0px)*-.6);transition:translate .25s ease-out}
  .hk-1{right:calc(-6px - var(--px,0px)*1.4);bottom:calc(0px - var(--py,0px)*1.2)}
  .hk-2{left:calc(-6px + var(--px,0px)*1.4);bottom:calc(0px - var(--py,0px)*1.2)}
}