.category-sidebar-link i.bi {
    transition: transform 0.3s ease; /* 0.3 saniyede yumuşak dönüş */
    display: inline-block; /* Dönüşün doğru uygulanması için */
}

/* 2. DÖNÜŞ KURALINI TANIMLAMA */
/* İkonu 90 derece döndüren kural */
.rotate-90 {
    transform: rotate(90deg);
}


/* SIDEBAR STYLES (Light Mode) */
.sidebar-container {
    border: 1px solid #dee2e6; /* Hafif sınır */
    border-radius: 8px;
    background-color: #fff; /* Beyaz arka plan */
}

/* BURASI ÇAĞRI İÇİN AYARLANDI: Artık tek tek 'a' değil, 'div' içindeki 'a' etiketini hedefleyeceğiz */
.category-sidebar-link {
    display: flex; /* D-flex eklendi */
    align-items: center;
    padding: 8px 15px;
    color: #343a40; /* Koyu metin */
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    justify-content: space-between; /* İçeriği ayırmak için eklendi */
}

    .category-sidebar-link a {
        /* Linkin kendisi için dark metin rengi */
        color: #343a40;
    }

    .category-sidebar-link:hover {
        color: #0d6efd; /* Hover'da mavi (Primary) */
        background-color: #f8f9fa; /* Çok hafif gri hover */
    }

    .category-sidebar-link.active a {
        color: #fff !important; /* Aktif linkin metni beyaz olmalı */
    }

    .category-sidebar-link.active,
    .category-sidebar-link.active:hover {
        color: #fff;
        background-color: #0d6efd; /* Aktif kategori rengi (Primary) */
        font-weight: bold;
    }

/* Collapsible İkon Dönüşü için CSS */
.bi-chevron-right {
    transition: transform 0.3s ease;
}

    /* Aktif (açık) olan collapse butonu içindeki oku 90 derece döndür */
    .collapse.show + button .bi-chevron-right,
    .bi-chevron-right.rotate-90 {
        transform: rotate(90deg);
    }

/* Gerekli olmadığı için sidebar-child kaldırıldı. View Component MS-4 ile girinti veriyor */

.category-count {
    color: #6c757d; /* Gri sayı */
}

.category-sidebar-link.active .category-count {
    color: #fff;
}

/* BREADCRUMB STYLES (Light Mode) */
.breadcrumb-light {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

    .breadcrumb-light .breadcrumb-item a {
        color: #0d6efd;
    }

    .breadcrumb-light .breadcrumb-item.active {
        color: #6c757d;
    }

/* KART STYLES (Aynı kaldı) */
.product-card, .category-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background-color: #fff;
}

    .product-card:hover, .category-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.card-img-top-container {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #f8f9fa;
}

.card-title {
    color: #212529 !important;
}

/* ------------------------------------------------ */
/* KART STYLES (Sade ve Tekdüzen Görünüm İçin Güncellendi) */
/* ------------------------------------------------ */
.product-card, .category-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    /* 💡 KRİTİK: Grid'de tüm kartların yüksekliğini sabitler */
    height: 100%;
    display: flex;
    flex-direction: column; /* İçeriğin yukarıdan aşağı akmasını sağlar */
}

    .product-card:hover, .category-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.card-img-top-container {
    /* 💡 KRİTİK: Görselin kapsayıcı alanını sabitler */
    height: 200px; /* Sabit yükseklik */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #f8f9fa;
    overflow: hidden; /* Taşmaları engeller */
    /* Kartın üst kısmına yuvarlaklık verir */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

    .card-img-top-container img {
        /* Görselin kendisinin kapsayıcıya sığmasını sağlar */
        max-height: 100%;
        max-width: 100%;
        object-fit: contain; /* Görselin bozulmadan alana sığmasını garanti eder */
    }

.card-body {
    /* Grid'de metin alanının esnek olmasını ve boşluğu doldurmasını sağlar */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Başlık/Açıklama/Buton dikeyde yayılır */
    padding: 15px;
}

.card-title {
    color: #212529 !important;
    /* Tek satırda kalması için gizler (Modern ve temiz görünüm) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------ */
/* YENİ ÜRÜN GÖRÜNÜM STİLLERİ (Grid ve Liste) */
/* ------------------------------------------------ */

/* Grid Görünümü (Varsayılan) */
.product-grid-view .product-card-item {
    width: 100%;
}

.product-grid-view .product-card .card-body {
    text-align: center;
}

/* Liste Görünümü */
.product-list-view .product-card-item {
    width: 100%;
}

.product-list-view .product-card {
    flex-direction: row; /* Kart içeriğini yatay hale getir */
    text-align: left;
    align-items: center; /* Dikeyde ortala */
    padding: 15px 0 15px 15px; /* Sadece sol/üst/alt padding */
}

.product-list-view .product-card-item:last-child .product-card {
    border-bottom: none; /* Listenin son öğesinde alt çizgi olmasın */
}

.product-list-view .card-img-top-container {
    height: 120px; /* Liste görünümünde resim alanı daha küçük */
    width: 120px;
    margin-right: 15px;
    flex-shrink: 0;
    background-color: transparent; /* Listenin arka planı transparan olsun */
    border-radius: 0;
}

.product-list-view .card-body {
    padding: 0 15px 0 0; /* Liste görünümünde sağ padding bırak */
    flex-grow: 1;
    justify-content: center;
}

    .product-list-view .card-body h5 {
        margin-top: 0;
        font-size: 1.1rem; /* Başlık biraz daha küçük */
    }

    .product-list-view .card-body p {
        margin-bottom: 0;
        color: #6c757d;
    }