body {
    margin: 0;
    padding: 0;
}
.main {
    
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    border: 1px solid silver;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px #333;
    border-radius: 0.5rem;
}
.main .slide{
    width: 100%;
    height: 100%;
    background-color: silver;
    position: absolute;
    left: 100%;
    top: 0;
}
.main .slide img{
    width: 100%;
    height: 100%;
}
img{
    display: inherit;
}

@keyframes sahneye {
    from{
        left:100%;
    }to{
        left: 0;
    }
}
@keyframes  sahneDisina{
    from{
        left: 0;
    }to{
        left: -100%;
    }
}
@keyframes icesahneye {
    from{
        left: -100%;
    }to{
        left: 0;
    }
}
@keyframes disasahneye {
    from{
        left: 0;
    }to{
        left:100%
    }
}
.prev,.next{
    padding: .5rem 1rem;
    display: block;
    background-color: yellow;
    color: white;
    font-size: 3rem;
    position: absolute;
    top:45%;
    cursor: pointer;
    opacity: .5;
}
.prev:hover,.next:hover{
    background-color: darkblue;
    color: yellow;
    opacity: 1;
}
.prev{
    left: 0;
}
.next{
    right: 0;
}
.aciklama{
    font-size: 1.2rem;
    width: auto;
    max-width: 80%;
    position: absolute;
    left: 10%;
    bottom: 3rem;
    background-color: rgba(0, 0, 0, 0.6);
    padding: .5rem;
    box-sizing: border-box;
    border-radius: .2rem;
    color: white;
}
.main ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    left: 10%;
    z-index: 2;
    display: flex;
}
.main ul li{
    padding: .6rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    margin-right: .3rem;
    cursor: pointer;
}
.main ul li:hover{
    background-color: darkblue;
    color: yellow;
}
.main ul li.active{
    background-color: yellow;
}
.button{
    background-color:yellow;
    color: #333;
    width:auto;
    font-size: 1.2rem;
    border: 1px solid #333;
    padding:0;
    margin: 0;
    z-index: 2;
    position: absolute;
    left: 10%;
    bottom: 6rem;
    border-radius: 5px;
    cursor: pointer;
}
.button:hover{
    background-color: darkblue;
 
}

