/*SLAYT*/

.slayt{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #0099ff;
    /*background-image: url(/images/back51.webp); */
    position: relative;
    height: 60vh;
    width: 100%;
    margin: auto;
    text-align: center;
    overflow: hidden;
    padding-top: 40px;
    }
    .slayt img{
    width: 100%;
    height: auto;
    margin: auto;   
    }
    .sol{
        display: inline-block;
        width: 40%;
        text-align: left;
        padding: 15px;
        min-width: 300px;
    }
    .sol1{
        padding: 30px;
    }
    .slayt h1{
        position: relative;
        color: white;
        font-size: 3rem;
        margin: auto;
        line-height: 60px;
    }

    .slayt h2{
        color: black;
        font-weight: 400;
        background-color: rgba(255, 255, 255, 0.559);
        padding: 15px;
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }
    .slayt button{
        position: relative;
        margin-left: 15px;
        margin-top: 10px;
        color: white;
        background-color: black;
        padding: 8px;
        width: 145px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border: none;
    }
    .slayt button a{
        color: white;
        text-decoration: none;
    }
    .slayt button:nth-child(even){
        background-color: red;
    }

    .hiz-anime{
    width: 100%;
    max-width: 500px;
    height: 350px;
    overflow: hidden;
    position: relative;
    margin: auto;
    text-align: center;
    }
    .hiz-anime img{
        margin: auto;
        margin-top: 25px;
        width: 85%;
        height: auto;
    }
    .hiz-anime span{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 100;
    position: absolute;
    left: 0px;
    animation: animasyon 10s ease-in-out infinite;
    animation-fill-mode: backwards;
    transform: translateY(-100px);
    opacity: 0;
    color: white;
    text-align: center;
    margin-top: 20px;
    }
    .hiz-anime span:nth-child(1) {
    animation-delay: 0s;
    }
    .hiz-anime span:nth-child(2) {
    animation-delay: 3s;
    }
    .hiz-anime span:nth-child(3) {
    animation-delay: 6s;
    }
    
    @keyframes animasyon {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    5% {
        transform: translateY(0px);
        opacity: 1;
    }
    30% {
        transform: translateY(0px);
        opacity: 1;
    }
    40% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(100px);
        opacity: 0;
    }
    }

            /* MOBİL SLAYT */
            @media screen and (max-width: 950px){

                .slayt h1{
                    position: relative;
                    color: white;
                    font-size: 2.5rem;
                    margin: auto;
                    line-height: 50px;
                }
            
                .slayt button{
                    width: 110px;
                }
    
            }

        @media screen and (max-width: 696px){

            .sol{
                transition: 2s;
                width: 88%;
                margin-left: -2%;
                text-align: center;
            }
            .slayt{
                height: 95vh;
                padding-top: 60px;
            }
            .slayt h1{
                font-size: xx-large;
                line-height: 40px;
                margin-bottom:25px;
            }
            .slayt h2{
                margin-top: 10px;
                font-size: large;
            }
            
            .hiz-anime img{
                margin: auto;
                margin-top: -25px;
                width: 80%;
                height: auto;
            }
            .slayt button{
                width: 130px;
            }
        }