.swiper {
    width: 100%;
    max-width: 600px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    visibility: hidden;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9fafb;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Swiper Navigasyon Okları (prev/next) için dokunma hedefi iyileştirmesi */
.swiper-button-next, .swiper-button-prev {
    color: #1d4ed8;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    transition: background-color 0.3s ease;
    margin-top: -24px;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 26px;
    font-weight: bold;
}

/* === BAŞLANGIÇ: DÜZENLENEN BÖLÜM === */

/* Swiper Pagination Bullet'lerinin dokunma hedefi iyileştirmesi */
.swiper-pagination-bullet {
    width: 12px;  /* Görsel genişlik aynı kalıyor */
    height: 12px; /* Görsel yükseklik aynı kalıyor */

    /* EKLENDİ: Dokunma alanını genişletmek için görünmez bir yastık ekliyoruz.
       Bu sayede toplam tıklanabilir alan yaklaşık 32x32px olur. */
    padding: 10px;

    /* EKLENDİ: Arka plan renginin padding alanına taşmasını engeller.
       Böylece sadece ortadaki 12x12px'lik daire renkli görünür. */
    background-clip: content-box;
    
    margin: 0 8px !important; /* Noktalar arası boşluğu biraz artırdık */
    background-color: #6B7280; /* background'ı daha spesifik hale getirdik */
    opacity: 0.7;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: #1d4ed8; /* Aktif olanın rengi */
    opacity: 1;
    /* GÜNCELLENDİ: Genişlik ve yükseklik değerleri kaldırıldı.
       Böylece aktif olan nokta, diğerleriyle aynı boyutta kalarak sadece renk değiştirir.
       Bu, sayfa düzeninde oynamaları engeller ve daha tutarlı bir görünüm sağlar.
       Gerekli boyut ve padding, yukarıdaki ana kuraldan miras alınır. */
}

/* === BİTİŞ: DÜZENLENEN BÖLÜM === */


/* Açıklama içindeki stiller için */
.product-description h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    margin-top: 1.5rem; /* 24px */
    margin-bottom: 0.5rem; /* 8px */
}
.product-description h3 {
    font-size: 1.5rem; /* 24px - biraz daha büyük */
    font-weight: 700; /* Daha kalın (bold) */
    margin-top: 2rem; /* Üstten biraz daha boşluk */
    margin-bottom: 1rem; /* Alttan biraz daha boşluk */
    color: #1a202c; /* Daha koyu bir renk (isteğe bağlı) */
}
.product-description p {
    margin-bottom: 1rem; /* 16px */
    line-height: 1.6;
}
.product-description ul {
    list-style-type: disc;
    padding-left: 1.5rem; /* 24px */
    margin-bottom: 1rem;
}
.product-description li {
    margin-bottom: 0.5rem;
}