/* ============================================================
   Hareket katmanı — sayfalar arası ortak
   Gizleme yalnızca .tetik-motion (JS çalışıyor) varken uygulanır;
   JS devre dışıysa içerik hiçbir zaman görünmez kalmaz.
   ============================================================ */

/* ---------- üstteki ince ilerleme çubuğu ---------- */
.tetik-progress{
  position:fixed;top:0;left:0;z-index:1300;height:2px;width:100%;
  background:var(--tetik-accent);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- kademeli beliriş ---------- */
.tetik-motion [data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.tetik-motion [data-reveal].is-in{opacity:1;transform:none}

/* ---------- görsel açılışı: süzülerek gelir, görsel yakından uzağa ----------
   clip-path denendi ancak bazı tarayıcı/oluşturucu birleşimlerinde takılıp
   görseli tamamen gizli bırakıyordu; opaklık + dönüşüm güvenli çalışıyor. */
.tetik-motion [data-reveal-img]{
  opacity:0;transform:translateY(26px);overflow:hidden;
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.tetik-motion [data-reveal-img] img{
  transform:scale(1.12);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.tetik-motion [data-reveal-img].is-in{opacity:1;transform:none}
.tetik-motion [data-reveal-img].is-in img{transform:scale(1)}

/* hover yakınlaşması olan kartlarda açılış bittikten sonra hover devralsın */
.tetik-motion [data-reveal-img].is-in.is-done img{transition:transform .8s cubic-bezier(.16,1,.3,1)}

/* ---------- sayaç ---------- */
.tetik-count{font-variant-numeric:tabular-nums}

/* ---------- paralaks katmanı ---------- */
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .tetik-motion [data-reveal],
  .tetik-motion [data-reveal-img]{opacity:1;transform:none;transition:none}
  .tetik-motion [data-reveal-img] img{transform:none;transition:none}
  [data-parallax]{transform:none!important}
  .tetik-progress{display:none}
}