@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;
  }
  
  .kap{
      width: 85%;
      margin: auto auto;

  }
  body {
    background: #0F0F0F;
    
}
  .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;
      color: #C9A24D;
  }
  .menu{
      display: flex;
      list-style-type: none;
      justify-content: center;
      gap: 8px;
  }
  .menu li{
      flex-grow: 1;
  }
  .menu li a{
      display: block;
      text-decoration: none;
      color: #C9A24D;
      font-size: 20px;
      text-align: center;
      padding: 10px 0px 10px 0px;
      border-top: 3px solid #C9A24D;
      opacity: 0.8;
      transition: all 0.5s;

  }
  .menu li a:hover{
      opacity: 1;
  }
  .banner2{
      background-image: url(img/banner.png);
      opacity: 0.8;
      background-size: cover;
      padding: 100px 0px 100px 0px;
      border-bottom: 3px solid #C9A24D ;
  }
  .kutu{
      background-color: #2A2A2A ;
      opacity: 0.8 ;
      width: 300px;
      padding: 15px 0px 15px 0px;
      text-align: center;
      color: #C9A24D ;
      text-transform: uppercase;
      font-size: 25px;
      letter-spacing: 4px;
      position: relative;
      left: 100px;

  }
  .kartlar{
      background-color: #2A2A2A;
      padding: 25px 0px 25px 0px;
      margin: 20px 0px 20px 0px;
  }
  .baslik{
      text-align: center;
      font-size: 30px;
      letter-spacing: 8px;
      padding-bottom: 25px;
      color: #C9A24D;

  }
  .kartlar-kart{
      display: flex;
      gap: 10px;
  }
  .kart{
      flex-grow: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      padding: 30px 50px;

  }
 
  .cizgi{
      padding: 3px 10px 3px 10px ;
      background-color: #C9A24D ;
      width: 200px;
      margin: auto auto;

    
  }
  .footer{
      background-color: #2A2A2A;
      color: #C9A24D ;
      text-align: center;
      font-size: 12px;
      font-style: italic;
      padding: 10px 0px 10px 0px;
  }

  .urunler-sayfasi{
    display: flex;
    gap: 10px;

}
.resimalani{
    background-image: url(img/B.png);
    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;
    justify-content: space-between;

}
.urun-kart{
     width: 250px;
     border: 1px solid #C9A24D;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     background-color: #2A2A2A;
}
.resim img{
    width: 100%;
    transition: all 0.5s;
}
.resim{
    border-bottom: 1px solid #cccccc;
    overflow: hidden;

}
.urun-kart a:hover{
    background-color: #C9A12F;
}
.ustunuciz{
    text-decoration: line-through;
}
.resim:hover img{
    scale: 1.5;
    
    transform: rotate(360deg);
}

.urun-kart a{
    display: block;
    text-decoration: none;
    background-color: #C9A24D ;
    color: beige;
    text-align: center;
    width: 100%;
    padding:10px 0px 10px 0px ;
    transition: all 0.5s;

}

.rsm{
    
        background-image: url(img/BMW.png);
        opacity: 0.5;
        background-size: cover;
        padding: 100px 0px 100px 0px;
        border-bottom: 3px solid #C9A24D  ;
    
}
.iletisim ul{
    list-style-type: none
}
.iletisim{
    display: flex;
    padding: 50px 50px;
    
}
.bkutu{
    margin: 10px 0px;
    width: 250px;
    height: 30px;

}
.textarea{
    width: 500px;
    height: 100px;
    margin: 5px 100px;
}
.link {
    background-color:#C9A24D ;
    color: beige;
    text-decoration: none;
    padding: 10px 200px 10px 235px;
    margin: 10px 100px;
    text-align: center;
}
.gkutu{
    margin: 10px 0px;

}

.resim2 img{
    width: 30px;
    margin: 0px 10px;
    transition: all 0.5s;
    
}
.resim2{
    display: flex;
}

    

.ins:hover{
    scale: 1;
    transform: rotate(360deg);
}
.twit:hover{
    scale: 1;
    transform: rotate(360deg);
}
.face:hover{
    scale: 1;
    transform: rotate(360deg);
}
.sbilgi{
    margin: 20px 0px;

}
.sbilgi a{
    font-size: 13px;
    color: #C9A24D;

}
.sbilgi ul {
    flex-direction: column;
    
}
.sbilgi li{
    color: #C9A24D;
    font-size: 25px;
}
.telno{
    margin: 0px 30px;
}
.orta li{
    flex-direction: column;
}






  @media screen and (max-width:700px){
      .kap,.urunler{
          width: 100%;
          justify-content: center;
      }
      .gizle{
          display: none;
      }
      .menu,.kartlar-kart,.banner,.iletisim{
          flex-direction: column;
      }
      .banner2{
          padding: 50px 0px 50px 0px;
      }
      .kutu{
          left: 50px;

      }

      .baslik{
          letter-spacing: 3px;
      }
      .kart img ,urun-kart{
        width: 70%;
    }
      
      .iletisim-sol ul li input{
          width: 100%;
      }
      .iletisim{
          padding: 20px;
      }
  }

  .hakfoto{
      
      background-image: url(img/BMWbanner__1_.webp);
      opacity: 0.8;
      background-size: cover;
      padding: 100px 0px 100px 0px;
      border-bottom: 3px solid  #C9A24D  ;
  
  }
.yazi{
    font-size: 25px;
    text-align: center;
    color: #C9A24D;
    
}
.yazi a{
      background-color:#C9A24D ;
    color: beige;
    text-decoration: none;
    padding: 10px 100px 10px 100px;
    
  
}
.foto{
     width:200px ;  
    margin: 10px 50px ; 
}
.fototo{
    width: 200px;
}
.e60{
    width: 100px;
}
.hakcizgi{
      
      padding: 3px 10px 3px 10px ;
      background-color: #C9A24D ;
      width: 400px;
      margin: auto auto;

    
  
}