:root{--primary-color:#000000;--white:#fff;--link-color:#FF5722;--text-color:#333;--border-color:#000000;}.bg-dark{background-color:var(--primary-color)!important;}.btn-dark{background:var(--primary-color);color:var(--white);border-color:var(--primary-color);}.btn-outline-light{color:var(--white);border-color:var(--primary-color);}.btn-outline-light:hover,.dropdown-item:hover{background:var(--primary-color);border-color:var(--primary-color);color:var(--white);}.body{font-family:'Roboto',sans-serif;line-height:1.6;color:var(--text-color);}body{font-family:'Roboto',sans-serif;line-height:1.6;color:var(--text-color);}h1,h2,h3,h4,h5,h6{font-family:'Open Sans',sans-serif;font-weight:600;}p{font-family:'Roboto',sans-serif;font-weight:400;font-size:16px;}a{color:var(--link-color);text-decoration:none;}.exo-2{font-family:"Exo 2",sans-serif;font-optical-sizing:auto;font-weight:<weight>;font-style:normal;}.row{margin-top:20px;}.mt-5{margin-top:120px!important;}.nav-item{margin-right:15px;}.card-text,.navbar,#menuOffcanvas .list-group .list-group-item{font-size:15px;}.custom-margin{margin-top:0px;}@media (min-width:992px){.custom-margin{margin-top:0px;}}.scroll-container{max-height:350px;overflow-y:auto;}.box::after,.box-cart::after{content:"";position:absolute;right:0;width:1px;background-color:var(--border-color);height:100px;}.box::after{bottom:0;transform:translateY(-45%);}.box-cart::after{top:0;bottom:0;transform:translateY(-15%);}


body{

height: 100%!important;
  margin: 0!important;
  padding: 0!important;
  display: flex!important;
  flex-direction: column!important;

}

main {
  flex: 1!important;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600; /* İsteğe göre ayarlayın */
  font-style: normal;
}

.modal, .offcanvas{

  z-index: 99999999;
}


.lg-backdrop {
  z-index: 999999999 !important;
}

.lg-outer {
  z-index: 9999999999 !important;
}

.text-success{

    color: #00CC00!important;
}


      .btn-outline-dark:hover{
        background:var(--primary-color)!important;
        background-color:var(--primary-color)!important;
        color: white!important;
      }

      .text-dark{
        color:var(--primary-color)!important ;
      }

  

        .price-original {
            text-decoration: line-through;
            color: #6c757d;
        }
        .price-sale {
            color: #000000;
            font-weight: bold;
        }
        .discount-badge {
            background: #dc3545;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .color-option {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .color-option.active {
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
        }
        
        .rating i {
            color: #ffc107;
        }
        .product-title {
            font-size: clamp(24px, 4vw, 45px);
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        
        .quantity-control {
            width: 120px;
        }
        .quantity-btn {
            width: 40px;
            color: var(--primary-color);
            height: 40px;
            border-radius: 0px;
            border: 1px solid #dee2e6;
            background: white;
            cursor: pointer;
        }
        .quantity-input {
            width: 40px;
            text-align: center;
            border: 1px solid #dee2e6;
            border-radius: 0px;
            border-left: none;
            border-right: none;
        }
        .feature-list {
            list-style: none;
            padding: 0;
        }
        .feature-list li {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
        .feature-list li:last-child {
            border-bottom: none;
        }



                /* Tüm slider ortalansın */
#thumb-slider {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* Thumbnail içindeki img’ler için stil */
#thumb-slider .splide__slide img {
    width: 100px;
    object-fit: cover;
    opacity: 0.85;
    border-radius: 0.5rem; /* rounded-3 */
    transition: all 0.3s ease;
    cursor: pointer;
}

#thumb-slider .splide__slide.is-active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


#thumb-slider .splide__slide.is-active img {
    opacity: 1;
    border: 1px solid #000000;
    box-shadow: 0 0 0 1px rgba(0,123,255,0.25);
}


/* Hover sırasında da değişiklik yapmak istersen */
#thumb-slider .splide__slide img:hover {
    opacity: 1;
    border-color: #666;
}


.radio-img {
          max-width: 60px;
          border-radius: 50%;
          padding: 1px;
          transition: all 0.2s ease-in-out;
          cursor: pointer;
        }


        .radio-img:hover {
          border: 1px solid #666;
        }

        .form-check-input:checked + .form-check-label img {
          border: 1px solid #000000;
          box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }


        .size-option label {
          display: inline-block;
          width: 50px;
          height: 50px;
          border: 1px solid #ccc;
          border-radius: 50%;
          text-align: center;
          line-height: 48px;
          cursor: pointer;
          transition: all 0.2s ease;
          font-weight: 500;
          background-color: #fff;
          color: #000;
        }

        .size-option:hover input + label {

            background-color: var(--primary-color);
            color: #fff;
        }

        .size-option input:checked + label {
          background-color: var(--primary-color);
          color: #fff;
          border-color: #000;
          box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }