/* 1. DEĞİŞKENLER VE TEMEL AYARLAR */
:root {
    --ibs-turuncu: #F96302; /* RAL 2004 */
    --ibs-antrasit: #2C3E50;
    --turuncu-ral: #F96302;
    --antrasit: #2C3E50;
    --beyaz: #FFFFFF;
    --gri-soft: #fafafa;
    --ral-turuncu: #F96302;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

/* 2. PROFIL VE NAVIGASYON ELEMANLARI */
.profile-nav-link {
    color: var(--ibs-antrasit) !important;
    transition: all 0.3s ease;
    padding: 5px 10px !important;
    border-radius: 8px;
}

.profile-avatar-circle {
    width: 38px;
    height: 38px;
    background-color: var(--ibs-antrasit);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ibs-turuncu);
    font-size: 1.1rem;
}

.profile-name-text {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ibs-antrasit);
}

.profile-sub-text {
    font-size: 0.7rem;
    color: #7f8c8d;
    margin-top: 2px;
}

.profile-dropdown-menu {
    width: 240px;
    border-radius: 0 0 10px 10px !important;
    margin-top: 10px !important;
    overflow: hidden;
    padding: 0;
}

.dropdown-header-custom {
    border-bottom: 3px solid var(--ibs-turuncu);
}

.profile-dropdown-menu .dropdown-item {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ibs-antrasit);
    transition: all 0.2s ease;
}

    .profile-dropdown-menu .dropdown-item:hover {
        background-color: #f8f9fa;
        color: var(--ibs-turuncu);
        padding-left: 20px;
    }

/* 3. AUTH VE MINIMAL LINKLER */
.auth-link-minimal {
    color: var(--antrasit) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
}

    .auth-link-minimal:hover {
        color: var(--turuncu-ral) !important;
    }

    .auth-link-minimal::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -3px;
        left: 0;
        background-color: var(--turuncu-ral);
        transition: width 0.3s ease;
    }

    .auth-link-minimal:hover::after {
        width: 100%;
    }

.auth-orange-icon {
    color: var(--turuncu-ral);
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.auth-link-minimal:hover .auth-orange-icon {
    transform: translateY(-2px);
}

.cart-badge-minimal {
    position: absolute;
    top: -7px;
    right: -9px;
    background-color: var(--antrasit);
    color: white;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-link-minimal:hover .cart-badge-minimal {
    background-color: var(--turuncu-ral);
}

/* 4. MAIN CONCEPT BOX & KATEGORI SİSTEMİ */
:root {
    --antrasit: #2C2E35;
    --turuncu-ral: #E75B12; /* RAL 2004 */
    --beyaz: #FFFFFF;
    --gri-soft: #F4F4F4;
}


/* ANA KUTU */
.main-concept-box {
   
  
    display: flex !important;
    height: 520px !important;
    background: #fff !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: visible !important; /* Dışarı taşma için hayatidir */
}

/* KATEGORİ PANELİ */
.category-wrapper {


    flex: 0 0 25% !important;
    max-width: 25% !important;
    height: 100% !important;
    position: relative !important;
    background: #fff !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* LİSTE ALANI (VARSAYILAN - KAPALI) */


    /* --- AÇILDIĞINDAKİ DURUM --- */
 
    .category-scroll-area.category-expanded {
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important; /* İçerik boyu kadar uzasın */
        max-height: 800px !important; /* Çok aşırı uzamasın derseniz */
        overflow-y: visible !important; /* Scroll çubuğunu öldürür */
        z-index: 1100 !important;
        background: #fff !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
        border: 1px solid #eee !important;
        border-top: none !important;

    }

/* BUTON */
.view-all-cats {
    width: 100% !important;
    height: 40px !important; /* Daha ince */
    background: #fff !important;
    color: #555 !important; /* Daha yumuşak antrasit */
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
    font-size: 11px !important; /* Daha küçük yazı */
    font-weight: 600 !important;
    letter-spacing: 0.5px; /* Daha profesyonel duruş */
    text-transform: uppercase;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1101 !important;


}

    /* Hover Durumu (Üzerine Gelince) */
    .view-all-cats:hover {
        color: #F96302 !important; /* Senin turuncun */
        background: #fffcf9 !important; /* Çok hafif turuncu arka plan */
    }

/* 2. LİSTE ALANI - BOZULMAYI ÖNLEYEN YAPI */
.category-scroll-area {
    display: block !important;
    height: 420px !important; /* (520px - 60px header - 40px buton) */
    overflow: hidden !important;
    background: #fff !important;
}

    /* Açıldığında slider üzerine binen kısım */
    .category-scroll-area.category-expanded {
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 850px !important;
        overflow: visible !important;
        z-index: 1100 !important;
        background: #fff !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        border: 1px solid #eee !important;
        border-top: none !important;
    }

/* Genişlediğinde butonu listenin sonuna mıhlar */
.category-wrapper.is-expanded-wrapper .view-all-cats {
    position: absolute !important;
    /* JS ile top değeri atanacak */
}

/* SLIDER ASLA KAYMAZ */
.col-slider {
    flex: 1 !important;
    height: 520px !important;
    overflow: hidden !important;
}

/* ÜST KISIM UYUMU: Kategori Başlığı ve Slider Nav aynı stilde */
.side-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: var(--antrasit); /* Slider üstü ile aynı */
    color: var(--beyaz);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 4px solid var(--turuncu-ral); /* Kesintisiz turuncu hat */
}



    /* Kategoriler Normal Durum */
.category-scroll-area .accordion-button,
.category-scroll-area .nav-link.fw-semibold {
    background: var(--beyaz) !important;
   
    padding: 15px 20px !important;
    border: none !important;
    border-bottom: 1px solid #f8f8f8 !important;
   
    transition: all 0.3s ease;
    /*---------------*/
   
    color: #555 !important; /* Daha yumuşak antrasit */
    
    
    font-size: 13px !important; /* Daha küçük yazı */
    font-weight: 600 !important;
    letter-spacing: 0.5px; /* Daha profesyonel duruş */
    text-transform: uppercase;
}

        /* Kategoriler Hover Durumu (Üzerine gelince Turuncu) */
        .category-scroll-area .accordion-button:not(.collapsed),
        .category-scroll-area .accordion-button:hover,
        .category-scroll-area .nav-link.fw-semibold:hover,
        .category-scroll-area .accordion-button:not(.collapsed) {
            color: var(--turuncu-ral) !important; /* Yazı turuncu */
            background: var(--beyaz) !important; /* Hafif gri zemin */
            padding-left: 25px !important; /* Sağa kayma efekti */
        }

        /* Akordiyon İkonu Rengi */
        .category-scroll-area .accordion-button::after {
           
            filter: grayscale(1) brightness(0.5); /* İkonu antrasit yap */
        }

        .category-scroll-area .accordion-button:not(.collapsed)::after {
            filter: none; /* Açıldığında orijinal rengine dönsün veya turuncu yapılsın */
        }


        .category-scroll-area .accordion-button::after {
            filter: grayscale(1) brightness(0.5); /* İkonu koyu antrasit yapar */
            transition: all 0.3s ease;
            background-size: 0.8rem; /* İkonu biraz daha zarifleştirebilirsin */
        }

        /* 2. Tıklandığında/Açıldığında: Rengi RAL 2004 Turuncuya zorlayalım */
        .category-scroll-area .accordion-button:not(.collapsed)::after {
            /* Bootstrap'in varsayılan mavi ikonunu Turuncuya çevirmek için filter kullanıyoruz */
            /* Bu filtre RAL 2004 tonlarına (Turuncu) yakındır */
            filter: invert(41%) sepia(93%) saturate(1455%) hue-rotate(359deg) brightness(96%) contrast(105%);
        }

        /* 3. Bootstrap'in varsayılan mavi arka planını ve gölgesini tamamen öldürelim */
        .category-scroll-area .accordion-button:focus {
            box-shadow: none !important; /* Tıklayınca etrafında çıkan mavi halkayı siler */
            border-color: rgba(0,0,0,0.1) !important;
        }

        .category-scroll-area .accordion-button:not(.collapsed) {
            box-shadow: none !important; /* Açık olduğundaki gölgeyi siler */
        }



.cat-icon {
    width: 20px;
    margin-right: 10px;
    opacity: 0.7;
}


.main-horizontal-nav {
    background: var(--antrasit);
    color: white;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 4px solid var(--turuncu-ral); /* Turuncu Bar Sol */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;


  
}

.h-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 700;
    font-size: 12px;
    padding: 0 50px !important;
    text-decoration: none;
    transition: 0.3s;
}

    .h-link:hover {
        color: var(--turuncu-ral) !important;
    }



    
/* --- MOBİL UYUMLULUK (992px altı slider ve kategori için) --- */
@media (max-width: 991.98px) {
    .main-concept-box {
        display: block !important; /* Yan yana yapıyı boz, alt alta getir */
        height: auto !important; /* Sabit yüksekliği kaldır */
        border: none !important;
        box-shadow: none !important;
    }

    .category-wrapper {
        display: none !important; /* Masaüstü kategorisini mobilde gizle */
    }

    .col-slider {
        width: 100% !important;
        height: auto !important;
    }

    /* Eğer mobilde kategorileri tamamen gizlemek istemiyorsan, 
       genelde slider en üste alınır. Senin tasarımında 
       kategori zaten d-none d-lg-flex olduğu için mobilde otomatik gizlenir. */
}




/* 6. PRODUCT GRID & CARD TASARIMI */
.card-img-container {
    position: relative;
    height: 200px;
    width: 100%;
    display: block;
    overflow: hidden;
}

.product-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-decoration: none;
}

.product-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    z-index: 1;
}

.product-card {
    transition: 0.3s;
    border: 1px solid #eee !important;
    border-radius: 10px;
}

    .product-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
        border-color: var(--turuncu-ral) !important;
    }

.critical-stock-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--turuncu-ral);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    animation: pulse-effect 2s infinite;
}

.out-of-stock-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--antrasit);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    z-index: 10;
}

.quick-view-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.custom-product-card:hover .quick-view-overlay {
    opacity: 1;
}

.custom-product-card:hover .product-img {
    transform: scale(1.1);
}

/* 7. BUTONLAR VE EKSTRALAR */
.btn-turuncu {
    background-color: var(--turuncu-ral);
    color: white;
    border: none;
    border-radius: 10px;
    transition: 0.3s;
}

    .btn-turuncu:hover {
        background-color: var(--antrasit);
        transform: scale(1.05);
        color: white;
    }

.custom-pagination .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--antrasit);
    background: #f8f9fa;
    font-weight: 700;
    transition: all 0.3s;
    text-decoration: none;
}

.custom-pagination .page-item.active .page-link {
    background-color: var(--turuncu-ral) !important;
    color: white;
    box-shadow: 0 4px 10px rgba(249, 99, 2, 0.3);
}




/* 8. LİSTE GÖRÜNÜMÜ MODU (6'lı Sıralama) */
#productWrapper.view-list > div {
    width: 16.666% !important;
    max-width: 16.666% !important;
    flex: 0 0 16.666% !important;
    padding: 10px;
}

#productWrapper.view-list .custom-product-card {
    flex-direction: column;
    align-items: stretch; /* Kart içeriğini tam genişliğe yayar */
    min-height: 250px;
}

#productWrapper.view-list .card-img-container {
    width: 100%;
    height: 150px;
}

/* Fiyat Sola, Sepet Sağa Yaslama */
#productWrapper.view-list .price-action-row {
    display: flex !important;
    flex-direction: row !important; /* Yan yana dizilim */
    justify-content: space-between !important; /* Fiyat sola, Buton sağa */
    align-items: flex-end !important; /* Tabanda hizala */
    width: 100%;
    margin-top: auto;
}

#productWrapper.view-list .price-box {
    text-align: left;
}

#productWrapper.view-list .product-title {
    text-align: left;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

/* 6'lı sıralamada buton çok büyük kalmasın diye hafif küçültme */
#productWrapper.view-list .btn-add-cart {
    width: 36px !important;
    height: 36px !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1. MASAÜSTÜ (Varsayılan - 6'lı) */
#productWrapper.view-list > div {
    width: 16.666% !important;
    max-width: 16.666% !important;
    flex: 0 0 16.666% !important;
    padding: 10px;
}

/* 2. TABLET VE KÜÇÜK LAPTOPLAR (1200px - 768px arası) */
/* Ürünleri yan yana 3 tane olacak şekilde ayarlar */
@media (max-width: 1200px) {
    #productWrapper.view-list > div {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
}

/* 3. MOBİL VE KÜÇÜK TABLETLER (768px altı) */
/* İstediğin 2'li kurgu burada devreye girer */
@media (max-width: 767.98px) {
    #productWrapper.view-list > div {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding: 5px !important; /* Mobilde boşluğu biraz daralttık ki ürünler büyük görünsün */
    }

    /* Mobilde resim kutusunu biraz küçültelim ki yazıya yer kalsın */
    #productWrapper.view-list .card-img-container {
        height: 130px !important;
    }

    #productWrapper.view-list .product-title {
        font-size: 0.85rem !important;
        height: 36px !important; /* Başlık 2 satırı geçmesin */
        margin-bottom: 5px !important;
    }

    /* Fiyat kutusunu mobilde daha kibar yapalım */
    #productWrapper.view-list .price-box .h4 {
        font-size: 1.1rem !important;
    }
}




/* 9. ANIMASYONLAR */
@keyframes pulse-effect {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(249, 99, 2, 0.4);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
}

/* Görünüm butonlarındaki mavi çerçeveyi (outline) kaldır */

#viewModeGroup .btn:focus,
#viewModeGroup .btn:active,
#viewModeGroup .btn-light:focus {
    outline: none !important;
    box-shadow: none !important; /* Mavi gölgeyi siler */
    border-color: #ddd !important;
}

/* İkonun kaybolmasını engelle ve netleştir */
#viewModeGroup .btn i {
    pointer-events: none; /* Tıklama ikonun kendisine değil butona gitsin */
    transition: all 0.2s ease;
}

/* Aktif butondaki ikon rengini sabitle */
#viewModeGroup .btn.active i,
#viewModeGroup .btn.btn-antrasit i {
    color: red !important;
}

/* Pasif butondaki ikon rengi */
#viewModeGroup .btn-light i {
    color: var(--ibs-antrasit);
}

/* --- FOOTER TASARIMI --- */
.main-footer {
    background-color: var(--ibs-antrasit);
    color: #ecf0f1;
    padding: 60px 0 20px;
    margin-top: 80px;
    border-top: 5px solid var(--ibs-turuncu);
}

.footer-title {
    color: var(--ibs-turuncu);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-links a {
        color: #bdc3c7;
        text-decoration: none;
        transition: all 0.3s ease;
        font-size: 0.9rem;
        display: inline-block;
    }

        .footer-links a:hover {
            color: var(--ibs-turuncu);
            transform: translateX(5px);
        }

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #bdc3c7;
}

    .footer-contact-item i {
        color: var(--ibs-turuncu);
        width: 20px;
    }

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-btn {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .social-btn:hover {
        background: var(--ibs-turuncu);
        color: white;
        transform: translateY(-3px);
    }

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: #7f8c8d;
}

/* Mobil Düzenleme */
@media (max-width: 768px) {
    .main-footer {
        padding: 40px 0 20px;
        text-align: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }
}

/* 10. MOBIL UYUMLULUK */
@media (max-width: 991.98px) {
    .main-concept-box {
        height: auto !important;
        flex-direction: column;
        margin-top: 1rem;
        background: transparent;
    }

    .col-slider {
        padding-left: 0 !important;
        height: auto !important;
    }

    .main-horizontal-nav {
        display: none;
    }

    #heroSlider, .carousel-inner, .carousel-item {
        height: 250px !important;
    }
}

@media (max-width: 576px) {
    #productWrapper.view-list .custom-product-card {
        flex-direction: column;
    }

    #productWrapper.view-list .card-img-container {
        width: 100%;
    }
}


/* Slider Arka Plan ve Katman Ayarları */
.slider-image-layer {
    height: 460px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: center;
}

/* Buton ve Tipografi */
.btn-turuncu-ral {
    background-color: #ff6600; /* Kendi turuncu tonunla değiştir */
    color: white;
    border: none;
    transition: transform 0.3s ease;
}

    .btn-turuncu-ral:hover {
        transform: translateY(-3px);
        background-color: #e65c00;
    }

/* Geçiş Efektini Yumuşat */
.carousel-fade .carousel-item {
    transition-duration: 0.8s;
}