*{
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}
body{
    background-color: white;
}
#container{
    width: 1200px;
    height: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(245, 244, 244);
}
#banner{
    height: 100px;
    display: flex;
    justify-content: space-between ; /*yatayda ortalama yapar*/
    align-content: center; /* satırın ortalı bir satır olmasını istiyoruz*/
    align-items: center; /* tek satırlı yapıları dikey ortalar*/
}
header h1{
    font-size: 28px;
    margin-left:115px;
    color: #a73636;
}
nav ul{
    width: 600px;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    /*gap: 20px; eğer gap verirsem boşlukların ölçüsünü kendim ayarlamam gerekir ama justify-content kendisi otamatik ayarlıyor.*/
}
label span{
    border-bottom: 3px solid rgb(43, 43, 43);
    display: block;
    width: 30px;
    height: 10px;
}
label,#btn{
    display: none;/* nesneleri gizler, öyle bir görünmez olur ki hiç yazmamış gibi iskeletten de yok olur*/
    /*visibility: hidden;*/
}
nav ul li a{
    color: black;
    font-size: 18px;
    text-decoration: none;
}
#slayt{
    /*width: 1200px;*/
    width: 100%;
    height: 400px;
    /*background-color: blueviolet;*/
    overflow: hidden;
    position: relative;
}
#filmrulo{
    width: 300%;
    height: 400px;
    background-color: blue;
    display: flex;
    position: absolute;
    left: 0px;
    top: 0px;
    animation-name: slider;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    

}
#filmrulo:hover{
    animation-play-state: paused;
}
@keyframes slider{
0%{
        left: 0%;
    }
    20%{
        left: 0%;
    }
    40%{
        left: -100%;

    }
    60%{
        left: -100%;

    }
    80%{
        left: -200%;

    }
    100%{
        left: -200%;
    }
}
/* @keyframes slider{
    0%{
        left: 0px;
    }
    20%{
        left: 0px;
    }
    40%{
        left: -1200px;

    }
    60%{
        left: -1200px;

    }
    80%{
        left: -2400px;

    }
    100%{
        left: -2400px;
    }
} */
#filmrulo div{
    /*width: 1200px;*/
    width: 100%;
    height: 400px;
    background-image: url("../images/istanbulda-en-iyi-hamburger-yapan-yerler.jpg");
    background-size: cover;
}
#filmrulo div h2{
    color: white;
    font-size: 40px;
    width: 600px;
    margin-left: 115px;
    margin-top: 115px;

}
#filmrulo div a{
    display: block;
    width: 130px;
    line-height: 60px;
    margin-left: 115px;
    margin-top: 20px;
    background-color: rgba(216, 216, 216, 0.451);
    text-align: center;
    border: 4px solid white;
    border-radius: 30px;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
#cards{
    display: flex;
    justify-content: space-between;
    padding: 50px 115px; /*ilk dikey üst, alt, 2.sağ-sol, 115*/
    height: 370px;


}
#cards #sol, #cards #sag{
    width: 470px;
    height: 270px;    

}
#cards #sol{
    display: flex;
    justify-content: space-between; /*yatay hizalama*/
    flex-wrap: wrap; /*satırı kırıp, 2. satırın oluşması için*/
    align-content: space-between;
}
#sol div, #sol img{
    width: 220px;
    height: 120px;
}
#sol img{
    border-radius: 10px;
}
#sol div{
    position: relative;
}
#sol a{
    position: absolute;
    bottom: 0px;
    display: block;
    text-align: center;
    width: 220px;
    line-height: 60px;
    color: white;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    background-image: linear-gradient(rgba(0, 0, 0, 0), 
    rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.91));
    border-radius: 10px;


}
#cards #sag{
    background-image: url(../images/kabak-tatlisi.jpg);
    background-size: 470px 270px;
    border-radius: 10px;
}
#sag a{
    display: block;
    min-width: 479px;
    text-align: center;
    color: white;
    font-size: 22px;
    font-weight: bold;
    line-height: 60px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), 
    rgba(0, 0, 0, 0.63), black);
    border-radius: ;
    margin-top: 210px;
    text-decoration: none;
    
}
#yorum{
    height: 200px;
    padding: 20px 115px;
    background-color: rgb(194, 54, 54);
    display: flex;
    justify-content: space-between;
}
#yorum img{
    width: 160px;/*tam kare olması lazım daire yapabilmek için*/
    height: 160px;
    border-radius: 100px;
    /*clip-path: circle(30% at 50% 50%); ya da bu yöntemle daire yapabiliriz*/
}
#yorum p{
    width: 470px;
    height: 160px;
    font-size: 18px;
    overflow:auto;
}
footer{
    padding: 20px 115px;
    background-color: black;
    display: flex;
    justify-content: space-between;
}
footer form{
    width: 470px;
    padding: 10px;  
    display: flex;
    flex-direction: column;
    text-align: center;


}
/*footer form input #ad, footer form #tc{}*/
footer input[type="text"]{
    /*display: block;*/
    height: 40px;
    width: 400px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid blue;

}
footer form textarea{
    padding: 5px;
}
footer input[type="email"]{
    height: 40px;
    width: 400px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 2px solid blue;
    
}
footer input[type="submit"]{
    height: 50px;
    width: 200px;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;

}
footer iframe{
    width: 470px;
    height: 270px;
}









@media only screen and (max-width: 576px) {
    #container{
        width: 100%; /*576 altında olan cep tel.ölçüsü ne ise o ekranın tamamını kapla demek*/
        min-width: 479px;
    }

    #banner{
        height: 70px;
    }
    header h1{
        margin-left: 0px;
    }
    label{
        display: block; /*menu cep formunda gözüksün*/
    }
    
    
    /*# ul blok bir elementtir*/
    nav ul{
        display: none;           
    }

    #btn:checked+ul{
    display: block; /* tıklayınca menü dikey açılır*/
    position: absolute;
    /*width: auto;*/
    /*height: 100vh; vertical-height*/
    right: 0px; /* nav ın sağdan */
    top: 50px;
    z-index: 1000;
    }

    nav{
    position: relative;
    }

    nav ul li a{
    display: block;
    width: 400px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(157, 154, 154, 0.800);    
    }
    #slayt,#filmrulo,#filmrulo div{
        height: 220px;
    }
    #filmrulo div{
    background-size: 100% 100%;
}
    #filmrulo div h2{
    
    font-size: 28px;
    width: 50%;
    margin-left: 5px;
    margin-top: 5px;

}

#filmrulo div a{
    
    margin-left: 5px;
    margin-top: 10px;
    font-size: 20px;
    line-height: 40px;    
    border: 2px solid white;    

}
#cards{
    display: block;
    padding: 10px 5px;
    height: auto;
}
#sag a{
    margin: 0px;
}
#cards #sag{
    margin-top: 10px;
    padding-top: 210px;
}
#yorum{
    padding: 5px;
    height: auto;
}
#yorum img{
    display: none;
}
#yorum p{
    width: auto;
    height: auto;
    text-align: center;
}
footer{
    display: block;
    padding: 5px;
}






    
}