@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
.material-symbols-outlined
{
    font-variation-settings: 
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 28
}
*
{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans',sans-serif;
}
.container 
{
    width: 85%;
    margin: auto auto;
}
.banner
{
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0 20px 0;
}
.logo
{
    width: 100px;
}
.banner h3
{
    font-size: 45px;
    text-align: center;
}
.menu 
{
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: 8px;/* elamanlar arasında ki boşluğu ayarlıyor*/
}
.menu li
{
    flex-grow: 1;/*elemanları eşit ş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 red;
    opacity: 0.8;
    transition: all 0.5s;
}
.menu li a:hover
{
    opacity: 1;
}
.banner2
{
    background-image: url(img3/rafa\ forma.webp);
    opacity: 0.8;/* opaklığı soyut göstermeyi yapar*/
    background-size: cover;/*resim bulunduğu kutunun tamamını kapsar*/
    padding: 100px 0px 100px 0px;
    border-bottom: 3px  solid  red;/*rgba a harfi opaklığın derecesi*/
}
.kutu
{
    background-color: rgba(97, 29, 8, 0, 0.3);
    width: 300px;
    padding: 15px 0px 15px 0px;
    text-align: center;
    color: beige;
    text-transform: uppercase;/* harfleri büyük yapar*/
    font-size: 25px;
    letter-spacing: 8px;
    position: relative;/* göreceli konumlandırma bulunduğu kutuya 100px soldan mesefa vererek konumlandırma*/
    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;
    gap: 10px;
}
.kart
{
    flex-grow: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.kart img 
{
    width: 100%;
}
.cizgi
{
    padding: 3px 10px 3px 10px;
    background-color: red;
    width: 30px;
    margin:  auto auto;
}
footer
{
    background-color: rgb(34, 34, 34);
    color: beige;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    padding: 10px 0px 10px 0px;
}
.urunlarsayfasi
{
    display: flex;
    gap: 10px;
}
.resimalani
{
    background-image: url(img3/FORMACIKLAR.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 otomotik olarak alt satıra geçer*/
    justify-content: space-between  ;
}
.urunkart
{
    width: 200px;
    border: 1px solid #cccccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ustunuciz
{
    text-decoration: line-through;
}
.resim 
{
    border-bottom: 1px solid #cccccc;/*resmin altına çizgi koyar*/
    overflow: hidden;/*bulunduğu kutunun dışına taşma gerçekleşmez*/
}
.resim img
{
    width: 100%;
}
.urunkart a
{
    display: block;
    text-decoration: none;
    background-color: rgba(97, 29, 8, 0, 0.8);
    color: beige;
    text-align: center;
    width: 100%;
    padding: 10px 0px 10px 0px;
    transition: all 0.5s;
}
.urunkart a:hover
{
    background-color: rgba(97, 29, 8);
}
.resim img 
{
    transition: all 0.5s;
}
.resim:hover img
{
    scale: 1.5;/*boyut olarak 1.5 katına çıkar*/
    transform: rotate(360deg);/*resmin üstüne gelince dönme hareketi yapar*/
}
.hyazi
{
    text-align: center;
}
.banner3
{
    background-image: url(img3/forma2.jpeg);
    opacity: 0.5;
    background-size: cover;
    padding: 100px 0px 100px 0px;
    border-bottom: 3px solid red;
}
.iletisim 
{
   display: flex;
   padding: 20px 10px 20px 10px;
   text-decoration: none;
   background-color: beige;
   list-style-type: none;
}
.iletisimsol
{
    flex-grow: 1;
}
.iletisimorta
{
    flex-grow: 1;
}
.iletisimsag
{
    flex-grow: 1;
}
.iletisimsol ul
{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.iletisimsol ul li
{
    flex-grow: 1;
}
.iletisimsol ul li input
{
    width: 85%;
    height: 35px;
    border: 1px solid #cccccc;
}
.iletisimorta ul
{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.iletisimorta ul li
{
    flex-grow: 1;
}
.iletişimorta ul li textarea
{
    width: 100%;
    height: 80px;
    border: 1px solid #cccccc;
}
.iletisimsag ul
{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.iletisimsag img
{
    width: 35px;
    padding-right: 10px;
    opacity: o.7;
    transition: all 0.8s;
}
.iletisimsag img:hover
{
    opacity: 1;
    transform: rotate(360deg);
}
.iletisimresim
{
    padding: 155ox 0px 155px 0px;
    background-image: url(img9/banner2.jpg);
    background-size: cover;
    opacity: 0.7;
}
#gonder
{
    width: 90%;
    height: 35px;
    border: 1px solid #cccccc;
    background-color: rgba(124, 87, 51, 0, 0.84);
    color: black;
    font-size: 15px;
}
@media screen and (max-width:700px) {
   .container,.urunler
    {
    width: 100%;
    justify-content: center;
    }
    .gizle
    {
        display: none;
    }
    .menu,.kartlar-kart,.banner,.iletisim
    {
        flex-direction: column;
    }
    .baslik
    {
        letter-spacing: 3px;
    }
    .kutu
    {
        left: 50px;
    }
    .banner2
    {
        padding: 50px 0px 50px 0px;
    }
    .kart img,.urunkart
    {
        width: 75%;
    }
    .iletisimsol ul li input 
    {
        width: 100%;
    }
    .iletisim
    {
        padding: 20px;
    }
}