*{
    margin: 0; /*Dış boşlukları sıfırla*/
    padding: 0; /*İç boşlukları sıfırla*/
    box-sizing: border-box; /*Kutu genişlik ve yüksekliğini border'a kadar belirler*/
}
body{
    background-image: url(../img/fresh-spring-background.jpg);
    background-size: cover;/*Resmin ekranı kaplaması için*/
    min-height: 100vh;
    font-family: "Roboto", serif;
    font-weight: 700;
    font-style: normal;
}
#logo{
    text-align: center;
    padding: 24px;

}
#logo img{
    width: 150px;
}
.container{
    margin: auto;
    width: 70%;
}
#menu{
    background-color: #ffffff;
    box-shadow: 0 0 5px rgb(82, 82, 82);/*0 0 x ve y konumu 5px kalınlığında*/

}
#menu ul{
    display: flex;
    justify-content: space-around;/* flex nesnelerin hizalanması*/
    list-style-type: none;
}
#menu a{
    display: inline-block;
    text-decoration: none;/*Alt çizgi gider*/
    color: #e66c06;
    padding: 10px;
    transition: 1s;/*Gecikme süresi*/
}
#menu a:hover{
    color: #3dfa3d;
    transition: 1s;/*Gecikme süresi*/
}
.banner{
    text-align: center;
}
.urunler{
    display: flex;
    gap: 24px;   
}
.urun {
    flex: 1;/*urun sınıfına ait divlerin aynı genişlikte sağlar*/
    box-shadow: 0 0 5px rgb(82, 82, 82);/*0 0 x ve y konumu 5px kalınlığında*/
}
.urun img{
    width: 100%;
    height: 300px;
    object-fit: cover;/*nesneyi kutuya sığdır yani kırpma işlemi*/
}
footer{
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(82, 82, 82, 0.877);/*0 0 x ve y konumu 5px kalınlığında*/
    justify-content: space-between;
    display: flex;
    margin-top: 20px;
    padding: 8px;   
}
.alt{
    color: #e66c06;
}
.yan{
    color: #3dfa3d;
}