/* =========================================================
   Kaydırma animasyonları
   Bu dosyadaki hiçbir şeyi düzenlemenize gerek yok.
   Animasyonları tamamen kapatmak isterseniz sayfalardaki
   anim.css ve anim.js satırlarını silmeniz yeterli;
   site yine sorunsuz çalışır.
   ========================================================= */

/* ---- 1. Belirerek gelme ---- */
.js [data-ac]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .6s cubic-bezier(.16,.84,.24,1),
             transform .6s cubic-bezier(.16,.84,.24,1);
  transition-delay:var(--gecikme,0ms);
  will-change:opacity,transform;
}
.js [data-ac="sagdan"]{transform:translate3d(34px,0,0)}
.js [data-ac="soldan"]{transform:translate3d(-34px,0,0)}
.js [data-ac="buyu"]{transform:scale(.95)}
.js [data-ac].gorundu{opacity:1;transform:none;will-change:auto}

/* ---- 2. Üstteki ince ilerleme çizgisi ---- */
.ilerleme{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;
  background:var(--water);transition:width .1s linear;pointer-events:none}

/* ---- 3. Sabitlenen vitrin bölümü (Apple tarzı) ----
   Yükseklik, adım sayısına göre JS tarafından ayarlanır. */
.vitrin{position:relative;min-height:calc(var(--n,5) * 100vh);min-height:calc(var(--n,5) * 100svh);
  background:var(--card);border-block:1px solid var(--hair)}
.vitrin .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  padding:80px 0 48px}
.vitrin .pin>*{min-width:0}

.shots{position:relative;aspect-ratio:4/3;border:1px solid var(--hair);overflow:hidden}
.shot{position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity .8s cubic-bezier(.16,.84,.24,1),transform 1.1s cubic-bezier(.16,.84,.24,1)}
.shot.aktif{opacity:1;transform:scale(1)}
.shot .ph{width:100%;height:100%}

.sc-text{position:relative;min-height:290px}
.adim{position:absolute;inset:0;opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .6s cubic-bezier(.16,.84,.24,1),transform .6s cubic-bezier(.16,.84,.24,1);
  pointer-events:none;display:flex;flex-direction:column;justify-content:center}
.adim.aktif{opacity:1;transform:none;pointer-events:auto}
.adim .no{font:700 12px/1 "Manrope",sans-serif;color:var(--water);margin-bottom:16px;
  display:flex;align-items:center;gap:9px}
.adim .no::after{content:"";width:34px;height:1px;background:var(--water);opacity:.5}
.adim h2{font-size:clamp(28px,3.9vw,44px);margin-bottom:16px}
.adim p{font-size:17px;color:var(--muted);max-width:44ch;margin:0}
.adim .kucuk{font-size:14px;margin-top:18px;color:var(--muted)}
.adim .kucuk b{color:var(--text)}

.ray{display:flex;gap:6px;margin-top:30px}
.ray i{display:block;width:26px;height:3px;background:var(--hair);transition:background .4s}
.ray i.aktif{background:var(--water)}

/* ---- 4. Hafif derinlik (yalnızca büyük ekran) ---- */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .js .hero-art{transform:translate3d(0,var(--kay,0px),0)}
}

/* ---- 5. Mobil ---- */
@media (max-width:900px){
  .vitrin .pin{grid-template-columns:1fr;gap:26px;padding:74px 0 34px;align-content:center}
  .shots{aspect-ratio:4/3}
  .sc-text{min-height:212px}
  .adim p{font-size:15.5px}
  .adim h2{margin-bottom:12px}
}
@media (max-width:560px){
  .sc-text{min-height:238px}
  .vitrin .pin{padding-top:68px}
}

/* ---- 6. Animasyonu kapatmış kullanıcılar ---- */
@media (prefers-reduced-motion:reduce){
  .js [data-ac]{opacity:1!important;transform:none!important;transition:none}
  .shot{transition:opacity .2s}
  .adim{transition:opacity .2s}
  .ilerleme{display:none}
}