/* =====================================================================
   KATEGORI.CSS — kategori.html ile birebir
   ===================================================================== */

.kategori-konteyner {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 30px 20px;
    display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start;
    flex-grow: 1;
}

/* --- SOL SIDEBAR (FİLTRELER) --- */
.sidebar { background-color: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 25px 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); position: sticky; top: 100px; }
.filtre-baslik { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--efor-acik-yesil); }
.kategori-liste { list-style: none; margin-bottom: 30px; }
.kategori-liste li { margin-bottom: 5px; }
.kategori-liste a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--text-muted); font-size: 0.95rem; padding: 8px 10px; border-radius: 4px; transition: all var(--transition-hizi) ease; }
.kategori-liste a:hover { background-color: var(--bg-light); color: var(--efor-koyu-yesil); padding-left: 15px; }
.kategori-liste a.aktif { background-color: var(--efor-koyu-yesil); color: #ffffff; font-weight: 600; }
.kategori-liste a.aktif .sayi-rozet { background-color: #ffffff; color: var(--efor-koyu-yesil); }
.sayi-rozet { background-color: var(--bg-light); color: #888; font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; }

/* --- SAĞ İÇERİK --- */
.ana-icerik { display: flex; flex-direction: column; gap: 20px; }

.icerik-ust-bar {
    background-color: #ffffff; border: 1px solid var(--border-color); border-radius: 8px; padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); margin-bottom: 5px;
}

.secili-kategori-etiket { font-size: 1.15rem; color: var(--efor-koyu-yesil); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.secili-kategori-etiket::before { content: "■"; color: var(--efor-acik-yesil); font-size: 0.8rem; }

.kategori-arama { flex-grow: 1; max-width: 450px; height: 42px; display: flex; align-items: stretch; border: 1px solid var(--border-dark); border-radius: 21px; overflow: hidden; background-color: #fff; transition: border-color var(--transition-hizi) ease; }
.kategori-arama:focus-within { border-color: var(--efor-koyu-yesil); box-shadow: 0 0 0 3px rgba(37, 68, 53, 0.1); }
.kategori-arama .arama-input { flex-grow: 1; border: none; padding: 0 15px; outline: none; font-size: 0.95rem; color: var(--text-main); }
.kategori-arama .arama-buton { background-color: var(--efor-koyu-yesil); color: white; border: none; padding: 0 25px; cursor: pointer; font-weight: 600; transition: background-color var(--transition-hizi) ease; }
.kategori-arama .arama-buton:hover { background-color: var(--efor-acik-yesil); }

.breadcrumb { font-size: 1.05rem; color: var(--text-muted); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.breadcrumb a { color: var(--efor-acik-yesil); text-decoration: none; transition: color var(--transition-hizi) ease; }
.breadcrumb a:hover { color: var(--efor-koyu-yesil); text-decoration: underline; }
.breadcrumb-ayrac { color: #ccc; font-size: 0.85rem; }
.breadcrumb-aktif { color: var(--efor-koyu-yesil); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.5px; }

.kategori-aciklama { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin-bottom: 10px; }

/* --- ÜRÜN KARTLARI IZGARASI --- */
.urun-vitrini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.urun-vitrini .urun-kart { border: 1px solid var(--border-color); }
.urun-vitrini .kart-gorsel-alani { height: 200px; }
.urun-vitrini .kart-baslik-tr { font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.urun-vitrini .kart-baslik-en { font-size: 0.85rem; color: var(--efor-acik-yesil); font-weight: 500; margin-bottom: 15px; }

.bos-durum { text-align: center; padding: 60px 20px; color: var(--text-muted); background: #fff; border-radius: 8px; border: 1px solid var(--border-color); }

/* --- SAYFALAMA --- */
.sayfalama { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.sayfa-btn { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--border-color); background-color: #ffffff; color: var(--text-main); text-decoration: none; border-radius: 6px; font-weight: 600; transition: all var(--transition-hizi) ease; }
.sayfa-btn:hover { border-color: var(--efor-koyu-yesil); color: var(--efor-koyu-yesil); background-color: var(--bg-light); }
.sayfa-btn.aktif { background-color: var(--efor-koyu-yesil); color: #ffffff; border-color: var(--efor-koyu-yesil); }
.sayfa-btn.devre-disi { opacity: 0.4; pointer-events: none; }

@media (max-width: 992px) {
    .kategori-konteyner { grid-template-columns: 1fr; }
    .sidebar { position: static; margin-bottom: 10px; }
    .urun-vitrini { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .urun-vitrini { grid-template-columns: 1fr; }
    .icerik-ust-bar { flex-direction: column; align-items: stretch; gap: 15px; }
    .kategori-arama { max-width: 100%; }
}