@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
  }

*{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
.container{
    width: 85%; /*ana sayfa yüzde 85 i kaplar */
    margin: auto auto; /*sağdan soldan ortalar*/
}
.banner{
    display: flex; /*içindeki elemanlar yan yana*/
    list-style-type: none; /*liste elemanlarının numarası kalkar*/
    align-items: center; /*dikey hizalama ortalı*/
    justify-content: space-around; /*elemanları yatayda eşit aralıklı yerleştirir*/
    padding: 20px 0 20px 0; /*iç boşluk üst 20 sol sıfır alt 20 sağ 0*/
}
.logo{
    width: 100px; /*logo 100px genişliğinde*/
}
.banner h3{
    font-size: 45px; /*başlık 45 px boyutunda */
    text-align: center; /*ortalı*/
}
.menu{
    display: flex;
    list-style-type: none;
    justify-content:center ;
    gap: 8px; /*menü içindeki elemanlar arası boşluk*/
}
.menu li{
    flex-grow: 1; /* liste elemanlarını eşit bir şekilde dağıtır*/
}
.menu li a{
    display: block;
    text-decoration: none;
    color:rgb(34, 34, 34);
    font-size: 20px;
    text-align: center;
    padding: 10px 0px 10px 0px;
    border-top: 3px solid rgba(97, 29, 8, 0.753); /*rgba a hrafi opakalık*/
    opacity: 0.8; /* yazının opaklığı*/
    transition: all 0.5s;
}
.menu li a:hover{
    opacity: 1; /*üzerine gelindiği yazı ve çizgi opaklık yüzde yüz olur*/
}
.banner2{
    background-image: url(img2/bannertesbih.jpg);
    opacity: 0.8;
    background-size: cover;/*resim bulunduğu kutunun tamamını kapsar*/
    padding: 100px 0px 100px 0px;
    border-bottom: 3px solid rgba(97, 29, 8, 0.753); /*rgba a harfi opaklık derecesi*/
}
.kutu{
    background-color:rgba(97, 29, 8, 0.3); 
    width: 300px;
    padding: 15px 0px 15px 0px;
    text-align: center;
    color: beige;
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 8px;
    position: relative; /*görecili konumlandırma bulunduğu kutuya 100px soldan mesafe vererek konumlandırı*/
    left:100px;
}
.kartlar{
    background-color: beige;
    padding: 25px 0px 25px 0px;
    margin:20px 0px 20px 0px; 
}
.baslik{
    text-align: center;
    font-size: 30px;
    letter-spacing: 8px;
    padding-bottom: 25px;
}
.kartlar-kart
{
    display: flex; /*içindeki elemanları yan yana yapar*/
    gap:10px;/* içindeki elemanların birbiri arası mesafe*/
    flex-wrap: wrap;
    justify-content: space-around;

}
.kart{
    width: 350px;
    text-align: center;
    display: flex;
    flex-direction: column; /*responsive kodu ekran 700 altına düşünce tek sütunda gözükür*/
    gap:8px;
    align-items: center;
}
.kart img{
   width: 350px;
   height: 350px;
}
.cizgi{
    padding: 5px 20px 5px 20px ;
    background-color:rgba(97, 29, 8) ;
    width: 50px;
    margin: auto auto;
}
footer{
    background-color:rgb(34, 34, 34); 
    color: beige;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    padding: 20px 0px 20px 0px; /**/
}


.urunlerSayfasi{
    display: flex;
    gap:10px;
}
.resimAlani{
    background-image: url(img2/pexels-konstantin-mishchenko-1926769.jpg);
    width: 25%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    background-position: center;
}
.urunler{
    width: 75%;
    display: flex;
    gap:10px;
    flex-wrap:wrap ; /*kutular tek satıra sığmaya zorlanır, sığmayınca otomatik alt satıra geçer*/
    justify-content: space-between;  
}
.urun-kart{
    width: 350px;
    border:1px solid #cccccc;
    display: flex;
    flex-direction: column; /*750px altına düştüğünden tek sütunda gözüksün responsive*/
    align-items: center; /*dikey hizalama */
    gap:4px; /*elemanlar arası boşluk*/
}
.ustunuCiz{
  text-decoration: line-through;
}
.resim img{
    width: 100%;
}
.resim{
   border-bottom:1px solid #cccccc; /*resmin altına çizgi koyar*/
   overflow: hidden; /*bulunduğu kutunun dışına taşma gerçekleştirmez*/
}
.urun-kart a{ /*sepete ekle butonu*/
    display: block;
    text-decoration: none;
    background-color: rgba(97, 29, 8, 0.6); 
    color:beige;
    text-align: center;
    width: 100%;
    padding: 10px 0px 10px 0px;
    transition: all 0.5s;
}
.urun-kart a:hover{
    background-color: rgba(97, 29, 8); 
}
.resim img{
    transition: all 1s; /**/
}
.resim:hover img{
    scale:2; /*boyut olarak 1.5 katına çıkar*/
    transform: rotate(360deg); /*üstüne geldiğinde dönme hareketi yaptırır*/
}

.iletisim{
    display: flex;
    list-style-type: none;
    padding: 25px 0 25px 0;
}
.iletisim-sol{
    flex-grow: 1;
}
.iletisim-orta{
    flex-grow: 1;
 }
.iletisim-sag{
    flex-grow: 1;
  }
.iletisim-sol ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;   
    gap: 10px;
}
.iletisim-sol ul li{
    flex-grow: 1;
}
.iletisim-sol ul li input{
    width: 85%;
    height: 35px;
    border:1px solid #cccccc;
}
.iletisim-orta ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;   
    gap: 10px;
}
.iletisim-orta ul li{
    flex-grow: 1;
}
.iletisim-orta textarea{
    width: 100%;
    height: 80px;
    border:1px solid #cccccc;
}
#gonder{
    width: 100%;
    height: 35px;
    border:1px solid #cccccc;
    background-color: rgba(124, 87, 51, 0.84);
    color: beige;
    font-size: 15px;
}

.iletisim-sag ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;   
    gap: 10px;
    align-items: center;
} 
.iletisim-sag img{
    width: 35px;
    padding-right: 10px;
    opacity: 0.7;
    transition: all 0.8s;
}
.iletisim-sag img:hover{
    opacity: 1;
    transform: rotate(360deg);
}
.iletisim-resim{
    padding: 155px 0px 155px 0px;
    background-image: url(img2/banner2.jpg);
    background-size: cover;
    opacity: 0.7;
}



@media screen and (max-width:700px) { /* ekran boyutu 700px e kadar olduğu durumlarda */
  .container,.urunler,.kart{   /* ana kapsayıcı yüzde yüz ve ortalı olsun */
    width: 100%;
    justify-content: center;
  }
    .gizle{  /* ekran 700 altına düşünce gizle klasındaki öğeler gizlenir*/
    display: none;
  }
    .menu,.kartlar-kart,.banner,.iletisim{ /*ilgili klaslar 700px altına düşünce tek sütunda gözükür*/
    flex-direction: column;
   }

   .baslik{  /*ekran 700 altına füşünce başlıktaki harfler arası mesafe 3px */
    letter-spacing: 3px;
   }
 
   .kutu{
    left:50px;
   }

   .banner2{
    padding: 50px 0px 50px 0px;
   }
  
   .kart img,.urun-kart{
    width: 75%;
   }
   .iletisim-sol ul li input{
    width: 100%;
   }
   .iletisim{
    padding:20px;
   }
}