.hero-overlay h1{
    font-size:64px;
    margin-bottom:10px;
    display:inline-block;
}

/* soldan gelen */
.left{
    transform: translateX(-200px);
    opacity: 0;
    animation: fromLeft 1s ease forwards;
}

/* sağdan gelen */
.right{
    transform: translateX(200px);
    opacity: 0;
    animation: fromRight 1s ease forwards;
}

/* alt yazı */
.bottom{
    font-size:24px;
    margin-bottom:30px;
    opacity:0;
    animation: fadeIn 1.5s ease forwards;
}

/* animasyonlar */
@keyframes fromLeft{
    to{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fromRight{
    to{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn{
    to{
        opacity:1;
    }
}