.catalog-page {
    max-width: 1200px;
}

/* Mobil üst barlar */
.mobile-cat-bar {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(0,0,0,.08);
    padding: .45rem .7rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    background: #fff;
    color: #333;
}

    .chip.active {
        background: #0d6efd;
        color: #fff;
        border-color: transparent;
    }

/* Solda kategori paneli */
.cat-panel {
    background: #fff;
    border-radius: 1rem;
}

.list-wrap {
    padding: .25rem .75rem 1rem;
}

.cat-root {
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.cat-root-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: .75rem;
    text-decoration: none;
    color: #333;
}

    .cat-root-link .chev {
        margin-left: auto;
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        opacity: .4;
    }

.cat-root.open .cat-root-link .chev {
    transform: rotate(45deg);
    opacity: .7;
}

.cat-children {
    padding: 0 0 .75rem .5rem;
}

.cat-child {
    display: block;
    padding: .35rem 0;
    color: #555;
    text-decoration: none;
    border-radius: .5rem;
}

    .cat-child.active {
        color: #4b2ff0;
        font-weight: 600;
    }

.product-card .prod-name {
    font-size: .95rem;
    line-height: 1.2;
}

.product-card img {
    mix-blend-mode: multiply;
}

@media (hover:hover) {
    .product-card:hover {
        box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
        transform: translateY(-2px);
        transition: .2s;
    }
}

/* Sol panel başlığı */
.cat-panel {
    background: #fff;
    border: 1px solid #e0e0e0; /* gri çerçeve */
    border-radius: .5rem;
    padding: .5rem 0;
}
/* Sol panel ana kategori başlığı */
.cat-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0d6efd; /* mavi */
    background: #f1f5ff; /* açık mavi arka plan */
    border: 1px solid #cfe2ff;
    border-radius: .5rem;
    padding: .6rem .9rem;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid #0d6efd; /* site mavisi */
    padding-bottom: .3rem;
}

/* Sol panel alt kategori linkleri */
.cat-child {
    display: block;
    padding: .45rem 1rem;
    font-size: .95rem;
    color: #444;
    border-radius: 0;
}

    .cat-child:hover {
        background: #f8f9fa;
        text-decoration: none;
    }

    .cat-child.active {
        font-weight: 600;
        color: #0d6efd; /* sadece aktif olan mavi */
        background: #eef4ff;
    }

/* Sağ içerik başlığı (alt kategori) */
.section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 1rem 0;
}


/* Genel panel ve link görünümü */
.cat-panel {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: .6rem;
    padding: .5rem 0;
}

.cat-child {
    display: block;
    padding: .45rem 1rem;
    font-size: .95rem;
    color: #444;
}

    .cat-child:hover {
        background: #f5f5f5;
        text-decoration: none;
    }

    .cat-child.active {
        font-weight: 600;
        color: #198754;
        background: #eaf7f0;
    }

/* Sağ içerik başlığı */
.section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 1rem 0;
}

.cat-title--stripe {
    font-size: 1.4rem;
    font-weight: 800;
    color: #198754;
    border-left: 5px solid #198754;
    padding: .4rem 0 .4rem .9rem;
    margin: 0 1rem 1rem;
}

/* Denge için genel renk ayarı (çok mavi olmasın) */
.cat-panel .cat-section-label {
    color: #0d6efd;
    background: #f1f6ff;
    border-radius: .3rem;
    padding: .35rem .6rem;
    font-weight: 900;
}

/* --- Menü ikon/bullet --- */

/* Tüm alt/ara linkler için temel alan bırak */
.cat-child {
    position: relative;
    padding-left: 1.5rem;
}

    /* 1) Kırmızı küçük nokta */
    .cat-child::before {
        content: "";
        position: absolute;
        left: .6rem;
        top: 50%;
        transform: translateY(-50%);
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #dc3545; /* kırmızı nokta */
        opacity: .85;
    }

    /* 2) Ok (chevron) istersen bunu aç, üstteki noktayı kapat */
    /*
.cat-child::before {
  content: "";
  position: absolute; left: .55rem; top: 50%; transform: translateY(-50%) rotate(-45deg);
  width: .45rem; height: .45rem;
  border-left: 2px solid #adb5bd;
  border-bottom: 2px solid #adb5bd;
  border-radius: 1px;
}
*/

    /* 3) Pati simgesi için ufak SVG (renk uyumlu gri) – istersen kullan */
    /*
.cat-child::before {
  content: "";
  position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa0a6'>\
      <path d='M12 13c-2.8 0-6 1.7-6 4v1h12v-1c0-2.3-3.2-4-6-4zM7.5 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm3-2a1.7 1.7 0 110-3.4 1.7 1.7 0 010 3.4zm3 0a1.7 1.7 0 110-3.4 1.7 1.7 0 010 3.4zM16.5 11a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/>\
    </svg>") no-repeat center/contain;
  opacity: .9;
}
*/

    /* Aktif öğe için arka plan ve ikon rengi */
    .cat-child.active {
        background: #eaf7f0;
        color: #198754;
        font-weight: 600;
    }

        .cat-child.active::before {
            background: #198754;
            border-color: #198754;
        }

/* Ara kategori etiket hissi: */
.cat-section-label {
    background: #eef4ff;
    border-radius: .4rem;
    font-weight: 600;
}

    .cat-section-label.active {
        background: #eaf7f0;
    }
    .cat-section-label::before {
        display: none;
    }

.empty-state {
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: .75rem;
    padding: 2rem;
    text-align: center;
    color: #334155;
}

    .empty-state svg {
        width: 40px;
        height: 40px;
        margin-bottom: .5rem;
        opacity: .7;
    }

    .empty-state .empty-title {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: .25rem;
    }

    .empty-state .empty-text {
        color: #64748b;
        margin: 0 auto 1rem auto;
        max-width: 560px;
    }

    .empty-state .btn {
        border-radius: .5rem;
    }

/* Ürün kartı: ad 2 satır olsun, taşanı kes */
.product-card .prod-name {
    font-size: .95rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* en kritik */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word; /* kelime kırılmasına izin */
    white-space: normal; /* tek satır zorlamasın */
    min-height: calc(1.25em * 2); /* 2 satır yüksekliği sabit tut */
}

/* Filtre & sıralama şeridi */
.filterbar {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
}

/* Satır: her boyutta yan yana */
.filterbar-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    flex-wrap: nowrap; /* sarmayı kapat */
}

/* İki form eşit alan */
.filter-price, .filter-sort {
    flex: 1 1 0;
    min-width: 0; /* taşmayı engelle */
}

.filterbar-row .form-select {
    width: 100%;
}

/* Çok dar ekranlarda biraz sıkıştır */
@media (max-width: 420px) {
    .filterbar-row {
        gap: .4rem;
    }

        .filterbar-row .form-select {
            font-size: .95rem;
            padding-top: .35rem;
            padding-bottom: .35rem;
        }
}