.kategori-page{display:flex;gap:var(--space-6);padding:var(--space-6) 0 var(--space-16);} .filter-sidebar{width:280px;flex-shrink:0;align-self:flex-start;} .filter-section{background:var(--white);border:1px solid var(--gray-200);border-radius:5px;padding:var(--space-5);margin-bottom:var(--space-4);} .filter-section h3{font-size:var(--font-base);font-weight:700;color:var(--gray-800);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;} .filter-section h3 .toggle-icon{font-size:12px;color:var(--gray-400);cursor:pointer;transition:transform var(--transition-fast);} .filter-section h3 .toggle-icon.collapsed{transform:rotate(-90deg);} .category-list{display:flex;flex-direction:column;gap:2px;} .category-list a{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);font-size:var(--font-sm);color:var(--gray-600);border-radius:var(--radius-sm);transition:all var(--transition-fast);} .category-list a:hover,.category-list a.active{background:var(--primary-lighter);color:var(--primary);font-weight:500;} .category-list a .count{font-size:var(--font-xs);color:var(--gray-400);} .category-list a.active .count{color:var(--primary);} .category-list .sub-item{padding-left:var(--space-6);} .price-range{padding:var(--space-2) 0;} .range-slider{position:relative;width:100%;height:6px;background:var(--gray-200);border-radius:3px;margin:var(--space-4) 0;} .range-slider .track{position:absolute;height:100%;background:var(--primary);border-radius:3px;left:10%;right:30%;} .range-slider input[type="range"]{position:absolute;width:100%;height:6px;background:transparent;-webkit-appearance:none;pointer-events:none;top:-4px;} .range-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--white);border:2px solid var(--primary);border-radius:50%;cursor:pointer;pointer-events:all;box-shadow:var(--shadow-sm);} .price-inputs{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);} .price-inputs input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--gray-700);text-align:center;} .price-inputs input:focus{border-color:var(--primary);} .price-inputs span{color:var(--gray-400);font-size:var(--font-sm);} .checkbox-list{display:flex;flex-direction:column;gap:var(--space-2);} .checkbox-item{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;padding:var(--space-1) 0;} .checkbox-item input[type="checkbox"],.checkbox-item input[type="radio"]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;} .checkbox-item label{font-size:var(--font-sm);color:var(--gray-600);cursor:pointer;flex:1;display:flex;align-items:center;justify-content:space-between;} .checkbox-item label .count{font-size:var(--font-xs);color:var(--gray-400);} .show-more{font-size:var(--font-xs);color:var(--primary);font-weight:600;cursor:pointer;margin-top:var(--space-2);display:flex;align-items:center;gap:4px;} .show-more:hover{text-decoration:underline;} .kategori-main{flex:1;min-width:0;} .kategori-header{margin-bottom:var(--space-6);} .kategori-header h1{font-size:var(--font-2xl);font-weight:800;color:var(--gray-900);margin-bottom:var(--space-2);} .kategori-header p{font-size:var(--font-sm);color:var(--gray-500);} .kategori-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:5px;margin-bottom:var(--space-6);} .toolbar-left{display:flex;align-items:center;gap:var(--space-4);} .toolbar-left .result-count{font-size:var(--font-sm);color:var(--gray-500);} .toolbar-left .result-count strong{color:var(--gray-800);} .toolbar-right{display:flex;align-items:center;gap:var(--space-4);} .sort-select{padding:var(--space-2) var(--space-4);border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--gray-700);background:var(--white);cursor:pointer;min-width:160px;} .sort-select:focus{border-color:var(--primary);} .view-modes{display:flex;gap:4px;} .view-mode-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-400);background:var(--white);cursor:pointer;transition:all var(--transition-fast);} .view-mode-btn:hover,.view-mode-btn.active{color:var(--primary);border-color:var(--primary);background:var(--primary-lighter);} .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);} .product-card{background:var(--white);border:1px solid var(--gray-200);border-radius:5px;overflow:hidden;transition:all var(--transition-base);cursor:pointer;position:relative;display:flex;flex-direction:column;height:100%;} .product-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow-lg);transform:translateY(-4px);} .product-card .product-image{width:100%;height:200px;overflow:hidden;background:var(--gray-50);display:flex;align-items:center;justify-content:center;padding:var(--space-4);position:relative;} .product-card .product-image img{max-width:100%;max-height:100%;object-fit:contain;transition:transform var(--transition-base);} .product-card:hover .product-image img{transform:scale(1.05);} .product-card .product-badge{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;} .product-card .wishlist-btn{position:absolute;top:var(--space-3);right:var(--space-3);width:32px;height:32px;background:var(--white);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--gray-400);font-size:14px;box-shadow:var(--shadow-sm);transition:all var(--transition-fast);z-index:2;cursor:pointer;border:none;} .product-card .wishlist-btn:hover{color:var(--danger);transform:scale(1.1);} .product-card .product-info{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;flex-grow:1;} .product-card .product-name{font-size:var(--font-sm);font-weight:600;color:var(--gray-800);margin-bottom:var(--space-1);line-height:1.4;height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .product-card .product-subtitle{font-size:var(--font-xs);color:var(--gray-500);margin-bottom:var(--space-3);height:1.4em;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .product-card .product-price-row{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2);} .product-card .product-price{font-size:var(--font-lg);font-weight:800;color:var(--primary);} .product-card .product-price-old{font-size:var(--font-xs);color:var(--gray-500);text-decoration:line-through;} .product-card .product-meta{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-2);border-top:1px solid var(--gray-100);} .product-card .product-seller{font-size:var(--font-xs);color:var(--gray-500);} .product-card .product-rating{display:flex;align-items:center;gap:4px;font-size:var(--font-xs);color:var(--gray-500);} .product-card .product-rating .star{color:#FBBF24;} .product-card .product-card-seller{margin-top:auto;} .pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-10);} .pagination .page-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:600;color:var(--gray-600);background:var(--white);cursor:pointer;transition:all var(--transition-fast);} .pagination .page-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-lighter);} .pagination .page-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary);} .pagination .page-btn.disabled{opacity:0.4;cursor:not-allowed;} .pagination .page-dots{font-size:var(--font-sm);color:var(--gray-400);padding:0 var(--space-2);} @media (max-width:1200px){.product-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:991px){.kategori-page{padding:var(--space-4) var(--space-2);gap:var(--space-4);} .filter-sidebar{display:none !important;} .kategori-toolbar{padding:var(--space-3);flex-wrap:wrap;} .toolbar-left,.toolbar-right{width:100%;justify-content:space-between;} .product-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3);} }

/* === List View Stilleri === */
.product-grid.list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-5) !important;
}

.product-grid.list-view .product-card {
    display: flex !important;
    flex-direction: row !important;
    height: auto !important;
    min-height: 200px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 16px !important;
    background: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    gap: 24px !important;
    transition: all var(--transition-base) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.product-grid.list-view .product-card:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 10px 25px rgba(13, 71, 161, 0.08) !important;
    transform: translateY(-2px) !important;
}

.product-grid.list-view .product-card .product-image {
    width: 180px !important;
    height: 180px !important;
    flex-shrink: 0 !important;
    padding: var(--space-3) !important;
    background: #ffffff !important;
    border: 1px solid var(--gray-100) !important;
    border-radius: 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-grid.list-view .product-card .product-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform var(--transition-base) !important;
}

.product-grid.list-view .product-card:hover .product-image img {
    transform: scale(1.03) !important;
}

.product-grid.list-view .product-card .product-info {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr 220px !important;
    grid-template-rows: auto auto 1fr !important;
    grid-template-areas:
        "name price"
        "subtitle price"
        "seller actions" !important;
    gap: 8px 24px !important;
    padding: 0 !important;
    height: auto !important;
}

.product-grid.list-view .product-card .product-name {
    grid-area: name !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--gray-800) !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.product-grid.list-view .product-card .product-subtitle {
    grid-area: subtitle !important;
    font-size: 0.85rem !important;
    color: var(--gray-500) !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.product-grid.list-view .product-card .product-card-seller {
    grid-area: seller !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
    width: fit-content !important;
    transition: transform var(--transition-fast) !important;
}

.product-grid.list-view .product-card .product-price-row {
    grid-area: price !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    text-align: right !important;
    padding-top: 2px !important;
}

.product-grid.list-view .product-card .product-price {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    line-height: 1.2 !important;
}

.product-grid.list-view .product-card .product-price-old {
    font-size: 0.95rem !important;
    color: var(--gray-400) !important;
    text-decoration: line-through !important;
    margin-top: 4px !important;
}

.product-grid.list-view .product-card .product-actions {
    grid-area: actions !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.product-grid.list-view .product-card .product-actions .btn {
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
}

/* Responsive List View */
@media (max-width: 768px) {
    .product-grid.list-view {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    .product-grid.list-view .product-card {
        flex-direction: column !important;
        height: auto !important;
        min-height: unset !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .product-grid.list-view .product-card .product-image {
        width: 100% !important;
        height: 220px !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--gray-100) !important;
        padding: var(--space-4) !important;
    }

    .product-grid.list-view .product-card .product-info {
        display: flex !important;
        flex-direction: column !important;
        padding: var(--space-4) var(--space-5) !important;
        gap: 0 !important;
    }

    .product-grid.list-view .product-card .product-name {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-1) !important;
        line-height: 1.4 !important;
        height: 2.8em !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-grid.list-view .product-card .product-subtitle {
        font-size: var(--font-xs) !important;
        margin-bottom: var(--space-3) !important;
        height: 1.4em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .product-grid.list-view .product-card .product-price-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: var(--space-2) !important;
        margin-bottom: var(--space-2) !important;
        text-align: left !important;
        padding-top: 0 !important;
    }

    .product-grid.list-view .product-card .product-price {
        font-size: var(--font-lg) !important;
    }

    .product-grid.list-view .product-card .product-price-old {
        font-size: var(--font-xs) !important;
        margin-top: 0 !important;
    }

    .product-grid.list-view .product-card .product-card-seller {
        margin-top: auto !important;
        margin-bottom: 0 !important;
        border-top: none !important;
        padding-top: 0 !important;
        width: 100% !important;
    }

    .product-grid.list-view .product-card .product-actions {
        margin-top: 15px !important;
        width: 100% !important;
    }
}