.scroll-anim {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Başlangıç Pozisyonları (Görünmeden Önceki Haller) */
[data-animation="fade-up"] {
    transform: translateY(80px);
}

[data-animation="fade-down"] {
    transform: translateY(-80px);
}

[data-animation="fade-left"] {
    transform: translateX(-80px);
}

[data-animation="fade-right"] {
    transform: translateX(80px);
}

/* Ekrana Girdiğinde Alacağı Son Hal (JS bu sınıfı ekleyecek) */
.scroll-anim.active {
    opacity: 1;
    transform: translate(0, 0);
}