ek css
bizim ek csslerimize ihtiyaç varsa:
<style>
/* --- 1. ÜRÜN KARTI GENEL GÖRÜNÜMÜ --- */
body .productItem {
border: 1px solid #f0f0f0 !important;
border-radius: 12px !important;
background-color: #fff !important;
padding-bottom: 5px !important;
transition: all 0.3s ease !important;
overflow: hidden;
position: relative;
transform-origin: center center !important; /* merkezden 4 tarafa büyüme garantili */
}
body .productItem:hover {
border-color: #4caf50 !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
transform: scale(1.02) !important;
z-index: 999 !important;
}
/* --- 2. MARKA VE ÜRÜN İSMİ --- */
body .productItem .productMarka,
body .productItem .productBrand,
body .productItem .productBrand a {
color: #7cb342 !important;
font-weight: 700 !important;
text-transform: capitalize !important;
text-decoration: none !important;
display: block !important;
font-size: 11px !important;
margin-bottom: 5px !important;
}
body .productItem .productName a,
body .productItem .productTitle a {
font-weight: bold !important;
color: #333 !important;
font-size: 13px !important;
text-decoration: none !important;
}
/* --- 3. BUTONLAR (HAP ŞEKLİ) --- */
body .productItem .productBtn,
body .productItem a.productBtn,
body .productItem .add-to-cart-button,
body .productItem input.productBtn {
background-color: #2e7d32 !important;
background-image: none !important;
border: none !important;
border-radius: 50px !important;
height: 36px !important;
line-height: 36px !important;
padding: 0 20px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3) !important;
display: inline-block !important;
margin-top: 3px !important;
width: auto !important;
}
body .productItem .productBtn:hover {
background-color: #1b5e20 !important;
transform: scale(1.05) !important;
}
/* --- 4. ADET KUTUSU --- */
body .productItem .qty-input,
body .productItem .product-quantity,
body .productItem .qtyBox {
border: 1px solid #ddd !important;
background-color: #f1f8e9 !important;
border-radius: 50px !important;
height: 36px !important;
line-height: 34px !important;
color: #333 !important;
font-weight: bold !important;
margin-right: 5px !important;
overflow: hidden !important;
}
/* --- 5. RESİM ORTALAMA --- */
body .productItem .img,
body .productItem .imgArea {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
body .productItem img {
margin: 0 auto !important;
display: inline-block !important;
}
/* ============================================================
6. SLIDER KESİLME SORUNU - ÜST/ALT KESİLMEYE KESİN ÇÖZÜM (Son versiyon)
============================================================ */
/* Carousel ana kapsayıcıya büyük tampon ver (üst ve alt simetrik) */
.blok .jCarouselLite,
.ProductDetailMain .jCarouselLite,
.SimilarProducts .jCarouselLite,
.ImageProductsBottomArea .jCarouselLite {
overflow: visible !important;
height: auto !important;
padding: 50px 0 !important; /* Üst ve alt eşit tampon – hover taşmasını emer */
margin: -50px 0 !important; /* Negatif margin ile layout bozulmaz */
position: relative !important;
z-index: 50 !important;
}
/* İçteki clip ve container'ları tamamen kır (en kritik kısım) */
.jCarouselLite .jcarousel-clip,
.jCarouselLite .jCarouselClip,
.jcarousel-clip-horizontal,
.jcarousel-clip,
.jCarouselLite > div,
.jcarousel-container,
.jcarousel-container-horizontal,
.jCarouselLite .jcarousel-list {
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
height: auto !important;
min-height: unset !important; /* Sabit height varsa kır */
}
/* li'lere ekstra üst/alt boşluk ver (hover taşmasını dağıtır) */
.blok .jCarouselLite ul li,
.ProductDetailMain .jCarouselLite ul li,
.SimilarProducts .jCarouselLite ul li {
padding: 20px 8px !important; /* Üst/alt 20px ekstra alan */
margin: 0 !important;
box-sizing: border-box !important;
}
/* Hover'ı merkezden tut + hafif yukarı kayma (üst kesilmeyi telafi eder, alt için tampon yeter) */
body .productItem {
transform-origin: center center !important;
}
body .productItem:hover {
transform: scale(1.02) translateY(-10px) !important; /* Merkez büyüme + yukarı kayma */
box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
}
</style>