/* ==========================================================================
3. ÜRÜN DETAY SAYFASI (ID: 5)
========================================================================== */
.productDetailContainer, #ProductDetailMain, .ProductDetailMain, .contentProductDetail {
width: 100% !important;
max-width: 1350px !important;
margin: 20px auto 60px !important;
padding: 0 15px !important;
box-sizing: border-box !important;
font-family: 'Poppins', sans-serif !important;
}
.ProductDetailMainRow, .TopDet {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 40px !important;
width: 100% !important;
float: none !important;
}
/* Sol Kolon: Galeri & Dikey Küçük Resimler */
.leftImage {
flex: 1 1 550px !important;
max-width: 650px !important;
width: 55% !important;
float: none !important;
position: relative !important;
display: flex !important;
gap: 15px !important;
align-items: flex-start !important;
}
.SmallImages, #divThumbList {
width: 85px !important;
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
position: static !important;
max-height: 600px !important;
overflow-y: auto !important;
float: none !important;
}
.SmallImages div, .AltImgCapSmallImg {
width: 100% !important;
aspect-ratio: 2 / 3 !important;
border-radius: 6px !important;
overflow: hidden !important;
border: 1.5px solid #eaeaea !important;
cursor: pointer !important;
margin: 0 !important;
float: none !important;
}
.SmallImages div.active, .SmallImages div:hover, .AltImgCapSmallImg.active {
border-color: #000000 !important;
}
.SmallImages div img, .AltImgCapSmallImg img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.Images, .imageZoomPreview {
flex: 1 1 auto !important;
width: calc(100% - 100px) !important;
border-radius: 8px !important;
overflow: hidden !important;
background-color: #f8f8f8 !important;
border: 1px solid #f0f0f0 !important;
position: relative !important;
float: none !important;
}
.Images img, #imgUrunResim {
width: 100% !important;
height: auto !important;
max-height: 800px !important;
object-fit: cover !important;
display: block !important;
border-radius: 8px !important;
}
/* Sağ Kolon: Başlık, Fiyat, Beden, Sepete Ekle */
.RightDetail {
flex: 1 1 420px !important;
max-width: 520px !important;
width: 40% !important;
float: none !important;
padding-left: 0 !important;
}
.ProductName {
margin: 0 0 12px 0 !important;
float: none !important;
width: 100% !important;
}
.ProductName h1 span, .product-main-title {
font-size: 22px !important;
font-weight: 600 !important;
color: #111111 !important;
line-height: 1.35 !important;
display: block !important;
}
.PriceList, #pnlFiyatlar {
margin: 15px 0 20px 0 !important;
float: none !important;
width: 100% !important;
}
.PriceList .lineTitle, #divIndirimsizFiyat .lineTitle { display: none !important; }
.spanFiyat, .IndirimliFiyatContent, .product-main-price {
font-size: 26px !important;
font-weight: 700 !important;
color: #000000 !important;
line-height: 1 !important;
display: inline-block !important;
}
.spanKdv {
font-size: 12px !important;
color: #888888 !important;
margin-left: 8px !important;
}
/* Beden / Varyasyon Seçenekleri */
#divUrunEkSecenek {
margin: 20px 0 !important;
float: none !important;
width: 100% !important;
}
#divUrunEkSecenek .eksecenekLine { margin-bottom: 15px !important; }
#divUrunEkSecenek .left_line {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #111111 !important;
margin-bottom: 8px !important;
display: block !important;
}
#divUrunEkSecenek .size_box {
min-width: 44px !important;
height: 38px !important;
line-height: 36px !important;
border: 1.5px solid #dcdcdc !important;
border-radius: 4px !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #111111 !important;
margin: 0 8px 8px 0 !important;
display: inline-block !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
padding: 0 8px !important;
}
#divUrunEkSecenek .size_box:hover, #divUrunEkSecenek .size_box.selected {
background-color: #000000 !important;
color: #ffffff !important;
border-color: #000000 !important;
}
#divUrunEkSecenek .size_box.nostok {
background-color: #f7f7f7 !important;
color: #aaaaaa !important;
border-color: #eeeeee !important;
text-decoration: line-through !important;
}
/* Sepete Ekle & Favori Butonları */
#divSatinAl, .BasketBtn {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
margin: 25px 0 !important;
float: none !important;
}
.basketBtn, .basketBtn input, input#btnSepeteAt, .btn-add-to-cart-main {
flex: 1 !important;
height: 52px !important;
background-color: #000000 !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 600 !important;
border: none !important;
border-radius: 4px !important;
cursor: pointer !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.basketBtn input:hover, .btn-add-to-cart-main:hover {
background-color: #222222 !important;
}
/* Favorilere Ekle Butonu */
.UFavorilerimeEkle, .UFavorilerimeEkle a {
width: 52px !important;
height: 52px !important;
border: 1.5px solid #000000 !important;
border-radius: 4px !important;
background-color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.UFavorilerimeEkle .box1 { display: none !important; }
.UFavorilerimeEkle a::before {
content: "" !important;
width: 22px !important;
height: 22px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
background-size: contain !important;
display: block !important;
}
/* WhatsApp Sipariş Butonu */
.whatsapp-order-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
height: 46px !important;
background-color: #25D366 !important;
color: #ffffff !important;
font-size: 13.5px !important;
font-weight: 600 !important;
border-radius: 4px !important;
text-decoration: none !important;
margin-top: 10px !important;
}
.UIstekListemeEkle, .FiyatHaberVer, .UGelinceHaberVer { display: none !important; }
@media (max-width: 768px) {
.ProductDetailMainRow, .TopDet { flex-direction: column !important; gap: 20px !important; }
.leftImage { width: 100% !important; flex-direction: column-reverse !important; gap: 10px !important; }
.SmallImages, #divThumbList { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; max-height: none !important; }
.SmallImages div, .AltImgCapSmallImg { width: 70px !important; flex-shrink: 0 !important; }
.Images, .imageZoomPreview { width: 100% !important; }
.RightDetail { width: 100% !important; }
}