/* ========================================= */
/* ÜRÜN GRİD YAPISI - SIFIRDAN TEMİZ       */
/* ========================================= */

/* Tüm carousel ve kategorilist yapılarını sıfırla */
.kategorilist,
div.kategorilist,
#homeProduct .kategorilist,
.carousel,
.carousel2,
.carousel3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* UL yapısı - MOBİL/TABLET (991px ve altı) 2'li */
@media only screen and (max-width: 991px) {
    /* Kategori liste görünümü: 2 sütun kesin uygula */
    #page .box .pright .kategorilist > ul,
    .kategorilist > ul,
    #homeProduct .kategorilist > ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 12px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }
    #page .box .pright .kategorilist > ul > li,
    .kategorilist > ul > li {
        width: auto !important;
        max-width: 100% !important;
        grid-column: auto !important;
        box-sizing: border-box !important;
    }
    .kategorilist ul,
    div.kategorilist ul,
    #homeProduct .kategorilist ul,
    .kategorilist > ul,
    div.kategorilist > ul,
    #homeProduct .kategorilist > ul,
    ul.carousel,
    ul.carousel2,
    ul.carousel3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        list-style: none !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    .kategorilist ul li,
    div.kategorilist ul li,
    #homeProduct .kategorilist ul li,
    .kategorilist li,
    div.kategorilist li,
    #homeProduct .kategorilist li,
    ul.carousel li,
    ul.carousel2 li,
    ul.carousel3 li {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        list-style: none !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}

/* UL yapısı - MASAÜSTÜ (768px ve üstü) 4'lü */
@media only screen and (min-width: 768px) {
    .kategorilist ul,
    div.kategorilist ul,
    #homeProduct .kategorilist ul,
    .kategorilist > ul,
    div.kategorilist > ul,
    #homeProduct .kategorilist > ul,
    ul.carousel,
    ul.carousel2,
    ul.carousel3 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        list-style: none !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    .kategorilist ul li,
    div.kategorilist ul li,
    #homeProduct .kategorilist ul li,
    .kategorilist li,
    div.kategorilist li,
    #homeProduct .kategorilist li,
    ul.carousel li,
    ul.carousel2 li,
    ul.carousel3 li {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px !important;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        list-style: none !important;
        float: none !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    .kategorilist ul li:hover,
    div.kategorilist ul li:hover,
    #homeProduct .kategorilist ul li:hover,
    ul.carousel li:hover,
    ul.carousel2 li:hover,
    ul.carousel3 li:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    }
}

/* Owl Carousel - Tamamen devre dışı */
.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-wrapper,
.owl-wrapper-outer {
    display: contents !important;
    width: auto !important;
    transform: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

.owl-item {
    display: contents !important;
    width: auto !important;
    transform: none !important;
    position: static !important;
}

.owl-nav,
.owl-dots,
.owl-controls {
    display: none !important;
}

/* Eski inline style'ları ez */
.kategorilist ul li[style],
.kategorilist li[style],
div.kategorilist ul li[style],
div.kategorilist li[style],
#homeProduct .kategorilist ul li[style],
#homeProduct .kategorilist li[style] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Li içindeki elementler için stil düzeltmeleri */
.kategorilist ul li .katimage,
.kategorilist li .katimage,
ul.carousel li .katimage,
ul.carousel2 li .katimage,
ul.carousel3 li .katimage {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ========================================= */
/* ALT KATEGORİ ÜRÜN LİSTESİ (pageProductList)
   Masaüstü: 4 sütun, Mobil: 2 sütun
   Mevcut .table görünümünü kart ızgarasına dönüştürür
   Not: Bu dosya en sonda yüklendiği için override eder
*/

/* Mobil/Tablet (<=991px): Liste görünümü (satır) */
@media only screen and (max-width: 991px) {
    div.productList.pageProductList ul.table > li,
    .productList.pageProductList ul.table > li {
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
    }
    div.productList.pageProductList ul.table > li:last-child,
    .productList.pageProductList ul.table > li:last-child {
        margin-bottom: 0 !important;
    }
}

/* Masaüstü: Liste görünümü (satır) */
@media only screen and (min-width: 992px) {
    div.productList.pageProductList ul.table > li,
    .productList.pageProductList ul.table > li {
        margin-bottom: 25px !important;
        padding-bottom: 25px !important;
    }
    div.productList.pageProductList ul.table > li:last-child,
    .productList.pageProductList ul.table > li:last-child {
        margin-bottom: 0 !important;
    }
}

/* Puanlama sistemini gizle */
.productList.pageProductList .ratings,
.productList.pageProductList .star,
.productCode .ratings {
    display: none !important;
}

/* Ürün kodunu ortala */
.productList.pageProductList .productCode,
.productList.pageProductList .productCode span {
    text-align: center !important;
    justify-content: center !important;
}

/* Sol Yan Menü (pleft) - Minimalist Tasarım */
@media only screen and (min-width: 992px) {
    #page .box .pleft { 
        background: transparent !important; 
        border: none !important; 
        border-radius: 0 !important; 
        padding: 0 !important; 
        padding-right: 30px !important; 
        box-shadow: none !important; 
        position: sticky !important; 
        top: 90px !important; 
        height: fit-content !important; 
    }
}
@media only screen and (max-width: 991px) {
    #page .box .pleft { 
        width: 100% !important; 
        margin-bottom: 25px !important; 
        background: transparent !important; 
        border: none !important; 
        border-radius: 0 !important; 
        padding: 0 !important; 
    }
}

/* Ana Başlıklar */
#page .box .pleft .title { 
    background: transparent !important; 
    border: none !important; 
    border-bottom: 2px solid #e5e7eb !important;
    border-radius: 0 !important; 
    padding: 10px 0 !important; 
    font-weight: 700 !important; 
    font-size: 14px !important;
    color: #0f172a !important; 
    cursor: pointer !important; 
    transition: all .2s ease !important; 
    box-shadow: none !important; 
    margin-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#page .box .pleft .title:hover { 
    color: #e61b5d !important; 
    border-bottom-color: #e61b5d !important;
}
#page .box .pleft .title::after { 
    content: '\f107' !important; 
    font-family: 'FontAwesome' !important;
    float: right !important; 
    color: #94a3b8 !important; 
    transition: transform .2s ease !important; 
    font-size: 12px !important;
}
#page .box .pleft .title.active { 
    color: #e61b5d !important;
    border-bottom-color: #e61b5d !important;
}
#page .box .pleft .title.active::after { 
    transform: rotate(180deg) !important; 
    color: #e61b5d !important; 
}

/* Alt Menü Listesi */
#page .box .pleft ul.sidebar { 
    border: none !important; 
    padding: 0 !important; 
    margin: 0 !important;
}
#page .box .pleft ul.sidebar li { 
    border: none !important; 
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important; 
}
#page .box .pleft ul.sidebar li:last-child { 
    border-bottom: none !important; 
}

/* Alt Menü Linkleri */
#page .box .pleft ul.sidebar li a { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    gap: 8px !important; 
    padding: 10px 0 !important; 
    border-radius: 0 !important; 
    background: transparent !important; 
    border: none !important; 
    color: #333 !important; 
    font-weight: 400 !important; 
    font-size: 13px !important;
    transition: all .2s ease !important; 
    position: relative !important; 
}
#page .box .pleft ul.sidebar li a::before { 
    content: '' !important; 
    display: none !important;
}
#page .box .pleft ul.sidebar li a::after { 
    content: "\f105" !important; 
    font-family: 'FontAwesome' !important; 
    color: #999 !important; 
    transition: all .2s ease !important; 
    font-size: 11px !important;
    opacity: 1 !important;
}

/* Hover Durumu */
#page .box .pleft ul.sidebar li a:hover { 
    color: #e61b5d !important; 
    padding-left: 8px !important;
}
#page .box .pleft ul.sidebar li a:hover::after { 
    color: #e61b5d !important; 
}

/* Aktif Menü Öğesi */
#page .box .pleft ul.sidebar li.active a { 
    color: #e61b5d !important; 
    font-weight: 600 !important; 
}
#page .box .pleft ul.sidebar li.active a::after { 
    color: #e61b5d !important; 
}

/* Kategori gridinde inline width veren eski kuralları geçersiz kıl (tek sütun sorununu düzelt) */
#page .kategorilist ul.category-grid li[style] {
    width: auto !important;
    max-width: 100% !important;
}

/* Etiketler (Yeni, Çok Satılan, vs.) */
.kategorilist ul li .katimage .alert,
.kategorilist li .katimage .alert,
ul.carousel li .katimage .alert,
ul.carousel2 li .katimage .alert,
ul.carousel3 li .katimage .alert {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    margin: 0 !important;
    border: none !important;
}

.kategorilist ul li .katimage img,
.kategorilist li .katimage img,
ul.carousel li .katimage img,
ul.carousel2 li .katimage img,
ul.carousel3 li .katimage img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Lazy loading placeholder */
.kategorilist ul li .katimage img[loading="lazy"],
.kategorilist li .katimage img[loading="lazy"],
ul.carousel li .katimage img[loading="lazy"],
ul.carousel2 li .katimage img[loading="lazy"],
ul.carousel3 li .katimage img[loading="lazy"] {
    opacity: 0 !important;
    transform: scale(0.95) !important;
}

.kategorilist ul li .katimage img.loaded,
.kategorilist li .katimage img.loaded,
ul.carousel li .katimage img.loaded,
ul.carousel2 li .katimage img.loaded,
ul.carousel3 li .katimage img.loaded {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Resim yükleme durumu için basit spinner */
.kategorilist ul li .katimage.loading::after,
.kategorilist li .katimage.loading::after,
ul.carousel li .katimage.loading::after,
ul.carousel2 li .katimage.loading::after,
ul.carousel3 li .katimage.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 30px !important;
    height: 30px !important;
    margin: -15px 0 0 -15px !important;
    border: 3px solid #f3f3f3 !important;
    border-top: 3px solid #e61b5d !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    z-index: 3 !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Resim yüklenirken arka plan - kaldırıldı */
.kategorilist ul li .katimage.loaded::before,
.kategorilist li .katimage.loaded::before,
ul.carousel li .katimage.loaded::before,
ul.carousel2 li .katimage.loaded::before,
ul.carousel3 li .katimage.loaded::before {
    display: none !important;
}

/* Mobilde resim ve yazı boyutları */
@media only screen and (max-width: 991px) {
    .kategorilist ul li .katimage,
    .kategorilist li .katimage,
    ul.carousel li .katimage,
    ul.carousel2 li .katimage,
    ul.carousel3 li .katimage {
        height: auto !important;
        min-height: 160px !important;
        aspect-ratio: auto !important;
    }
    
    /* Mobilde resim kırpma optimizasyonu */
    .kategorilist ul li .katimage img,
    .kategorilist li .katimage img,
    ul.carousel li .katimage img,
    ul.carousel2 li .katimage img,
    ul.carousel3 li .katimage img {
        object-fit: contain !important;
        object-position: center !important;
        max-width: 100% !important;
        max-height: 200px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .kategorilist ul li .katname,
    .kategorilist li .katname,
    ul.carousel li .katname,
    ul.carousel2 li .katname,
    ul.carousel3 li .katname {
        font-size: 13px !important;
        min-height: 35px !important;
    }
    
    .kategorilist ul li .katadet,
    .kategorilist li .katadet,
    ul.carousel li .katadet,
    ul.carousel2 li .katadet,
    ul.carousel3 li .katadet {
        font-size: 11px !important;
    }
    
    .kategorilist ul li .katlink,
    .kategorilist li .katlink,
    ul.carousel li .katlink,
    ul.carousel2 li .katlink,
    ul.carousel3 li .katlink {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
}

/* Masaüstünde resim ve yazı boyutları */
@media only screen and (min-width: 768px) {
    .kategorilist ul li .katimage,
    .kategorilist li .katimage,
    ul.carousel li .katimage,
    ul.carousel2 li .katimage,
    ul.carousel3 li .katimage {
        height: auto !important;
        min-height: 200px !important;
        aspect-ratio: auto !important;
    }
    
    /* Masaüstünde resim kırpma optimizasyonu */
    .kategorilist ul li .katimage img,
    .kategorilist li .katimage img,
    ul.carousel li .katimage img,
    ul.carousel2 li .katimage img,
    ul.carousel3 li .katimage img {
        object-fit: contain !important;
        object-position: center !important;
        max-width: 100% !important;
        max-height: 250px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .kategorilist ul li .katname,
    .kategorilist li .katname,
    ul.carousel li .katname,
    ul.carousel2 li .katname,
    ul.carousel3 li .katname {
        font-size: 16px !important;
    }
    
    .kategorilist ul li .katadet,
    .kategorilist li .katadet,
    ul.carousel li .katadet,
    ul.carousel2 li .katadet,
    ul.carousel3 li .katadet {
        font-size: 14px !important;
    }
}

.kategorilist ul li .katname,
.kategorilist li .katname,
ul.carousel li .katname,
ul.carousel2 li .katname,
ul.carousel3 li .katname {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 6px !important;
    display: block !important;
    line-height: 1.3 !important;
    min-height: 40px !important;
}

.kategorilist ul li .katname a,
.kategorilist li .katname a,
ul.carousel li .katname a,
ul.carousel2 li .katname a,
ul.carousel3 li .katname a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

.kategorilist ul li .katname a:hover,
.kategorilist li .katname a:hover,
ul.carousel li .katname a:hover,
ul.carousel2 li .katname a:hover,
ul.carousel3 li .katname a:hover {
    color: #e61b5d !important;
}

.kategorilist ul li .katadet,
.kategorilist li .katadet,
ul.carousel li .katadet,
ul.carousel2 li .katadet,
ul.carousel3 li .katadet {
    font-size: 13px !important;
    color: #999 !important;
    margin-bottom: 12px !important;
    display: block !important;
    font-weight: 500 !important;
}

.kategorilist ul li .katfiyat,
.kategorilist li .katfiyat,
ul.carousel li .katfiyat,
ul.carousel2 li .katfiyat,
ul.carousel3 li .katfiyat {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #e61b5d !important;
    margin-bottom: 12px !important;
    display: block !important;
    text-align: center !important;
}

.kategorilist ul li .katlink,
.kategorilist li .katlink,
ul.carousel li .katlink,
ul.carousel2 li .katlink,
ul.carousel3 li .katlink {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 10px !important;
    background: #e61b5d !important;
    color: #fff !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    margin-top: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.kategorilist ul li .katlink:hover,
.kategorilist li .katlink:hover,
ul.carousel li .katlink:hover,
ul.carousel2 li .katlink:hover,
ul.carousel3 li .katlink:hover {
    background: #c71850 !important;
    transform: scale(1.02) !important;
}