.main-image-container {
    position: relative;
    overflow: hidden; /* Taşan kısmı gizler - Zoom için gerekli */
    background: #f0e8df;
    padding: 10px;
    display: flex;
    justify-content: center;
    border: #e67614 solid 2px;
  }

  .main-image {
    top: 0;
    left: 0;
    height: 360px;
    object-fit: cover;
    /* 1. YENİ KURAL: Yumuşak geçiş (animasyon) */
    transition: transform 0.4s ease-in-out;
    /* Görselin büyütme merkezini ortala */
    transform-origin: center center;
  }

  /* **2. YENİ KURAL: Mouse ile Gelindiğinde Yakınlaştırma Efekti** */
  .main-image-container:hover .main-image {
    transform: scale(1.15); /* Görseli %15 büyüt */
  }

  .product-name {
    background: #e67614;
    color: white;
    text-align: center;
    font-size: 14px;
  }

  /* Küçük Görsellerin Yatay Kaydırma Ayarları */
  .thumbnail-scroller-container {
    overflow-x: auto; /* Yatay kaydırmayı etkinleştir */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    background: bisque;
  }

  .thumbnail-scroller::-webkit-scrollbar {
    height: 8px; /* Kaydırma çubuğu yüksekliği */
  }

  .thumbnail-scroller::-webkit-scrollbar-thumb {
    background: #ccc; /* Kaydırma çubuğu rengi */
    border-radius: 4px;
  }

  /* Küçük Görsel Öğeleri (Linkler) */
  .thumbnail-link {
    display: inline-block;
    flex-shrink: 0; /* Küçülmeyi engelle, kaydırmayı sağla */
    /* Masaüstü (>= 992px) - 5 görsel görünmeli. (100% / 5) - margin */
    width: calc((100% / 5) - 8px); /* 5 görsel + 2px*5 margin/padding */
    max-width: 120px; /* Opsiyonel: Maksimum genişlik sınırı */
  }

  .thumbnail-image {
    width: 100%;
    height: 110px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
  }

  .thumbnail-image.active,
  .thumbnail-image:hover {
    border-color: #e67614;
    background: #eecea3; /* Bootstrap primary rengi veya seçtiğiniz bir renk */
  }

  /* Mobil Görünüm Ayarları (< 992px) - 3 görsel görünmeli */
  @media (max-width: 991.98px) {
    .thumbnail-link {
      /* Mobil (<= 991px) - 3 görsel görünmeli. (100% / 3) - margin */
      width: calc((100% / 3) - 8px);
    }
  }