/* ====================================================
   products-page-custom.css - Sadece Katalog Sayfası İskeleti
   ==================================================== */

.products-page-section {
    background-color: #f8fafc;
    min-height: 100vh;
}

    /* Üst Başlık Tasarımı */
    .products-page-section .catalog-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .products-page-section .catalog-title {
        font-size: 1.85rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.02em;
    }

    .products-page-section .catalog-subtitle {
        color: #64748b;
        margin-bottom: 0;
    }

.custom-sort-select {
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Mobil Filtre Butonu */
.custom-mobile-filter-btn {
    background-color: #05a0d4;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-weight: 700;
    width: 100%;
    box-shadow: 0 10px 15px -3px rgba(5, 160, 212, 0.3);
}

/* ====================================================
   MASAÜSTÜ: KUSURSUZ SABİT (STICKY) YERLEŞİM
   ==================================================== */
@media (min-width: 992px) {
    .products-page-section .row {
        align-items: flex-start !important;
    }

    .custom-filter-col {
        flex: 0 0 22% !important;
        max-width: 22% !important;
        padding-right: 15px;
        position: sticky !important;
        top: 110px !important;
        height: calc(100vh - 130px) !important;
        z-index: 10;
        margin-bottom: 2rem;
        height: fit-content;
    }

    .custom-products-col {
        flex: 0 0 78% !important;
        max-width: 78% !important;
    }

    /* Mobil Offcanvas özelliklerini masaüstünde ez */
    .custom-filter-offcanvas {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ====================================================
   MOBİL FİLTRE TAMİRİ (HAYALET BOŞLUK DÜZELTMESİ)
   ==================================================== */
@media (max-width: 991px) {
    .custom-filter-col {
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
        position: absolute !important;
    }
      
    #mobileFilterOffcanvas {
        top: 80px !important;
        height: calc(100vh - 70px) !important;
        border-top-right-radius: 0px;
    }

    .offcanvas {
        width: 85% !important;
        max-width: 360px !important;
    }

    .custom-filter-offcanvas {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85vw !important;
        max-width: 350px !important;
        height: 100vh !important;
        z-index: 1055 !important;
        background-color: #ffffff !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.15) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        display: block !important;
        padding-top: 6rem;
    }

        .custom-filter-offcanvas:not(.show) {
            visibility: hidden !important;
        }
}