.detaytop{margin-top:100px;}
@media (max-width: 768px) {
    .detaytop {margin-top:60px;}
}

.detayyildiz{color:#e43997; font-size:20px;}
	
.product-image-slider img {
    display: block;           /* Resmi yatayda ortalamak için */
    margin: 0 auto;           /* Resmi yatayda ortalamak için */
    max-width: 100%;          /* Resmin boyutunun taşmaması için */
    height: auto;             /* Resmin orantılı olarak büyümesi için */
}	
.slider-nav-thumbnails {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: -17px;
}

.thumbnail-wrapper {
margin-top: 16px;
padding: 3px; /* İç boşluk ekleniyor */
border-radius: 5px; /* Kenarları yuvarlama */
background-color: #f8f8f8; /* Arka plan rengi (isteğe bağlı) */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti (isteğe bağlı) */
}

.slider-nav-thumbnails img {
width: 80px; /* Küçük resmin genişliği */
height: auto; /* Yüksekliği otomatik ayarla */
object-fit: cover; /* Resmi kapsayıcıya uydurur */
margin-right: 10px; /* Sağ boşluk ekler */
margin-bottom: 10px; /* Alt boşluk ekler */
}
/*detaz özellik*/	
.detayoz {
position: relative; /* Gölgeleri düzgün konumlandırmak için */
background-color: rgba(255, 255, 255, 0.1); /* Arka plan beyazı hafif saydam yap */
padding: 4px; /* Resmin etrafında boşluk oluştur */
}
.detayoz img {
display: block; /* Görselin altındaki boşlukları kaldırmak için */
width: 100%; /* Genişliği %100 yaparak responsive hale getirin */
height: auto; /* Yüksekliği otomatik ayarlayın */
box-shadow: 0 6px 12px rgb(123 172 204 / 81%);
transition: box-shadow 0.3s; /* Hover efektinde geçiş süresi */
}