@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

:root {
  /*--bg-primary: #575962;
  --bg-secondary: #676971;*/
    --bg-primary: #8e806a;
    --bg-secondary: #c3b091;
    --white : #333333;
}

/*Splash Screen*/
#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  background: var(--bg-primary);
  z-index: 11199;
}

#loading-image {
  z-index: 11100;
  animation: heartbeat 1s infinite;
}



@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}
/*Splash Screen*/

.back-btn {
    margin-top:-5px;
    background: var(--bg-secondary);
    border:none;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}

.back-btn:hover {
    background: var(--bg-secondary);
}

.back-to-categories {
    color: var(--white) !important;
    text-decoration: none !important;
}
.back-to-categories:hover {
    text-decoration: underline !important;
}

/*Ürün Detay*/
.urun-detay-adi {
    font-weight:800;
}
.urun-detay-aciklama {
    font-weight:600;
}
/*Ürün Detay*/

/* Kategoriler grid - satırda 3 adet, kaydırma yok */
.your-class.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.your-class.categories-grid li {
  cursor: pointer;
}

@media only screen and (max-width: 400px) {
  .your-class.categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.your-class .category-item {
  padding: 4px;
}

.your-class .category-name {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  font-weight: 800 !important;
}

/*Active Class*/
.slick-a {
  border-bottom: 2px solid var(--white);
}

.your-class img {
  height: 90px;
  width: 100%;
  object-fit: cover;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

html, body{
    background: var(--bg-primary);
    font-family: 'Nunito Sans', sans-serif !important;
    color:var(--white) !important;
  }

  .left::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }

.left {
  height: 100%;
  position: fixed;
  top: 0px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  /*border-right: 1px solid rgba(87, 89, 98, 0.5);*/
}


/*Modal*/
.modal {
  border:none !important;

}


.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
  width: 100% !important;
  border:none !important;
}

.modal-dialog {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
}

.modal-btn-div {
  position: absolute;
  top:10px;
  left:10px;
}




.modal-backdrop {
  opacity: 0 !important;
}

.modal-body {
  padding:0px !important;
  background: var(--bg-primary) !important;
}

  .right{
    height: 100vh;
  }

  *,a {
    color:var(--white) !important;
    text-decoration: none;
  }
  .items{
    width:90%;
    margin:0px auto;
  }
  
/*Slick Slide*/

/*Slick Slide*/


  .nav-tabs {
    border:none !important
  }

  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: none;
    border:none;
    border-bottom:2px solid var(--white);
  }






  .nav-tabs {
    border-bottom: 0px solid transparent;
  }
  .nav-tabs .nav-link {
    border: 0px solid transparent;
    margin:10px 5px !important;
    padding:5px 5px !important;
  }

  .nav-item {
    font-size:16px;
  }


  .card {
    border-radius: 4px;
    flex-direction: row;
    align-items: center;
    margin-bottom:10px;
    margin-top:10px;
    border:none;
    /*margin:10px;*/
    background: var(--bg-secondary);
    color:var(--white);
    padding-left:0px;
    padding-right:15px;
    padding-top:10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }


  .card-title {
    font-size: 16px;
    font-weight: 800;
  }
  .card-text{
    font-size: 14px;
    font-weight: 600;
  }

  .card-money {
    font-weight: 400;
    font-size: 14px;
    margin-top:5px;
  }

  .card img {
    /*width: 30%;*/
    width: 100px !important;
    height:100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    object-fit: cover;
    /*border-top-right-radius: 0;
    border-bottom-left-radius: calc(0.25rem - 1px);*/
    border-radius: calc(0.25rem - 1px);
  }
  @media only screen and (max-width: 768px) {

    .left{
      width: 100% !important;
    }
    .right {
      display: none;
    }


    .card-body {
      /*padding: 0.5em 1.2em;*/
    }
    .card-body .card-text {
      margin: 0;
    }
    .card img {
      width: 40%;
    }
  }
  @media only screen and (max-width: 1200px) {
    .card img {
      width: 30%;
    }
  }