/* ============================================================
   KATEGORI SAYFASI — hm-kat   v4  (Faz 1 + Faz 2 + mobil düzen)
   Dosya: assets/css/kategori.css
   Yukleme sirasi: ... → urun-kart.css → kategori.css → footer.css
   Bagimlilik: theme.css (--c-orange, --c-slate, --s1..--s8, --r-*, --font)

   v4:
     - Mobilde urunler once geliyor; sol sutun "Filtrele" panelinin arkasinda
     - "Sırala" alt sayfasi (bottom sheet)
     - WhatsApp bloku liste altinda yatay bant
     - SEO metni: 13.5px, silik (#667380 = beyaz uzerinde 4.85:1, AA gecer),
       220px'te kirpilir, "Devamini Oku" ile acilir (display:none YOK)
     - Yatay tasma (sagda bosluk/scroll) giderildi
   ============================================================ */

.hm-kat{font-family:var(--font);color:var(--c-text);}

/* yatay tasma guvenligi — sagda beliren bosluk/scroll bundan olusuyordu */
.hm-kat,
.hm-kat__layout,
.hm-kat__main{min-width:0;max-width:100%;}

/* panel acikken arka planin kaymasini engelle */
html.hm-kilit{overflow:hidden;}


/* ============================================================
   1) BREADCRUMB
   ============================================================ */
.hm-kat__crumbwrap{
    padding:var(--s2) 0;
    border-bottom:1px solid var(--c-border);
    background:#fff;
}
.hm-kat__crumb{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    font-size:12.5px;font-weight:500;color:var(--c-muted);
}
.hm-kat__crumb a{color:var(--c-muted);text-decoration:none;transition:color .18s ease;}
.hm-kat__crumb a:hover{color:var(--c-orange);}
.hm-kat__crumb strong{color:var(--c-slate);font-weight:700;}
.hm-kat__crumb span{
    display:inline-block;width:5px;height:5px;
    border-top:1.5px solid #C4CBD2;border-right:1.5px solid #C4CBD2;
    transform:rotate(45deg);margin:0 2px;
}
.hm-kat__crumb i{font-size:13px;}


/* ============================================================
   2) BASLIK BLOGU
   ============================================================ */
.hm-kat__head{padding:var(--s4) 0 var(--s3);}
.hm-kat__h1{
    margin:0 0 6px;
    font-size:30px;font-weight:800;line-height:1.2;
    letter-spacing:-.02em;color:var(--c-slate);
}
.hm-kat__count{margin:0;font-size:13px;font-weight:500;color:var(--c-muted);}
.hm-kat__count strong{color:var(--c-slate);font-weight:700;}
.hm-kat__lead{
    max-width:76ch;margin:var(--s2) 0 0;
    font-size:14.5px;line-height:1.65;color:var(--c-muted);
}


/* ============================================================
   3) KESIM SERIDI
   ============================================================ */
.hm-kat__cut{
    display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
    margin-bottom:var(--s3);
    padding:var(--s2) var(--s3);
    background:rgba(253,87,34,.06);
    border:1px solid rgba(253,87,34,.22);
    border-radius:var(--r-md);
}
.hm-kat__cut-ic{flex:0 0 auto;width:24px;height:24px;color:var(--c-orange);}
.hm-kat__cut-ic svg{
    width:100%;height:100%;display:block;
    fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
}
.hm-kat__cut-tx{flex:1 1 320px;font-size:13.5px;line-height:1.5;color:var(--c-slate);}
.hm-kat__cut-tx strong{font-weight:700;}
.hm-kat__cut-btn{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:6px;
    padding:9px var(--s2);
    background:var(--c-wa);color:#fff!important;
    font-size:13px;font-weight:700;text-decoration:none!important;
    border-radius:var(--r-pill);
    transition:filter .2s ease;
}
.hm-kat__cut-btn:hover{filter:brightness(.93);}
.hm-kat__cut-btn i{font-size:16px;}


/* ============================================================
   4) DUZEN
   ============================================================ */
.hm-kat__layout{
    display:grid;
    grid-template-columns:262px minmax(0,1fr);
    gap:var(--s4);
    align-items:start;
    padding-bottom:var(--s6);
}
.hm-kat__side{position:sticky;top:96px;}

/* panel kromu masaustunde gorunmez */
.hm-kat__panelhead,
.hm-kat__panelfoot,
.hm-kat__mbar,
.hm-kat__msort,
.hm-kat__perde{display:none;}


/* ============================================================
   5) SOL SUTUN — filtreler
   ============================================================ */
.hm-kat__acc{
    margin-bottom:var(--s2);
    padding:var(--s2);
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
}
.hm-kat__acc--tek{padding:6px var(--s2);}

.hm-kat__acc-sum{
    display:flex;align-items:center;justify-content:space-between;
    font-size:13.5px;font-weight:800;color:var(--c-slate);
    letter-spacing:-.01em;cursor:pointer;list-style:none;padding:2px 0;
}
.hm-kat__acc-sum small{font-weight:500;color:var(--c-muted);font-size:11px;}
.hm-kat__acc-sum::-webkit-details-marker{display:none;}
.hm-kat__acc-sum::after{
    content:'';width:7px;height:7px;
    border-right:2px solid var(--c-muted);
    border-bottom:2px solid var(--c-muted);
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
    margin-left:8px;flex:0 0 auto;
}
.hm-kat__acc[open] > .hm-kat__acc-sum::after{transform:rotate(-135deg) translateY(-2px);}

.hm-kat__catlist{list-style:none;margin:var(--s2) 0 0;padding:0;max-height:340px;overflow-y:auto;}
.hm-kat__catlist li{margin:0;}
.hm-kat__catlist a{
    display:block;padding:7px 8px;
    font-size:13px;font-weight:500;color:var(--c-slate);
    text-decoration:none;border-radius:var(--r-sm);
    transition:background .16s ease, color .16s ease;
}
.hm-kat__catlist a:hover{background:#F4F5F7;color:var(--c-orange);}
.hm-kat__catlist li.is-aktif > a{background:rgba(253,87,34,.08);color:var(--c-orange);font-weight:700;}
.hm-kat__catup a{
    color:var(--c-muted);font-weight:600;font-size:12.5px;
    border-bottom:1px solid var(--c-border);
    border-radius:0;margin-bottom:4px;padding-bottom:9px;
}
.hm-kat__catup i{font-size:10px;margin-right:4px;}

.hm-kat__facet{list-style:none;margin:var(--s2) 0 0;padding:0;max-height:280px;overflow-y:auto;}
.hm-kat__opt{
    display:flex;align-items:center;gap:9px;
    padding:6px 8px;font-size:13px;color:var(--c-slate);
    text-decoration:none!important;border-radius:var(--r-sm);
    transition:background .16s ease;
}
.hm-kat__opt:hover{background:#F4F5F7;}
.hm-kat__box{
    flex:0 0 auto;width:16px;height:16px;
    border:1.5px solid #C4CBD2;border-radius:4px;background:#fff;
    position:relative;transition:background .16s ease, border-color .16s ease;
}
.hm-kat__opt.is-secili .hm-kat__box{background:var(--c-orange);border-color:var(--c-orange);}
.hm-kat__opt.is-secili .hm-kat__box::after{
    content:'';position:absolute;left:4.5px;top:1px;
    width:4px;height:8px;
    border-right:2px solid #fff;border-bottom:2px solid #fff;
    transform:rotate(45deg);
}
.hm-kat__opt-tx{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-kat__opt.is-secili .hm-kat__opt-tx{font-weight:700;color:var(--c-orange);}
.hm-kat__opt-n{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--c-muted);}

/* --- kalinlik: kompakt pill izgarasi (28 secenege kadar cikabiliyor) --- */
.hm-kat__pills{
    display:flex;flex-wrap:wrap;gap:6px;
    margin-top:var(--s2);
    max-height:230px;overflow-y:auto;
}
.hm-kat__pill{
    display:inline-flex;align-items:baseline;gap:5px;
    padding:6px 10px;
    background:#fff;color:var(--c-slate);
    font-size:12.5px;font-weight:700;
    text-decoration:none!important;
    border:1px solid var(--c-border);
    border-radius:var(--r-pill);
    transition:all .16s ease;
}
.hm-kat__pill small{font-size:10px;font-weight:600;color:var(--c-muted);}
.hm-kat__pill:hover{border-color:var(--c-orange);color:var(--c-orange);}
.hm-kat__pill.is-secili{
    background:var(--c-orange);border-color:var(--c-orange);color:#fff;
}
.hm-kat__pill.is-secili small{color:rgba(255,255,255,.8);}

.hm-kat__price{margin-top:var(--s2);}
.hm-kat__price-row{display:flex;align-items:center;gap:6px;}
.hm-kat__price input{
    width:100%;min-width:0;padding:8px 9px;
    font-family:var(--font);font-size:13px;font-weight:600;color:var(--c-slate);
    border:1px solid var(--c-border);border-radius:var(--r-sm);background:#fff;
    -moz-appearance:textfield;
}
.hm-kat__price input::-webkit-outer-spin-button,
.hm-kat__price input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.hm-kat__price input:focus{outline:none;border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(253,87,34,.12);}
.hm-kat__price-sep{color:var(--c-muted);font-size:12px;flex:0 0 auto;}
.hm-kat__price-btn{
    width:100%;margin-top:8px;padding:9px;
    background:var(--c-slate);color:#fff;
    font-family:var(--font);font-size:12.5px;font-weight:700;
    border:0;border-radius:var(--r-sm);cursor:pointer;
    transition:background .18s ease;
}
.hm-kat__price-btn:hover{background:var(--c-orange);}


/* ============================================================
   6) ARAC CUBUGU (masaustu)
   ============================================================ */
.hm-kat__bar{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:var(--s2);
    margin-bottom:var(--s3);
    padding:10px var(--s2);
    background:#F7F8F9;
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
}
.hm-kat__bar-n{font-size:13px;color:var(--c-muted);}
.hm-kat__bar-n strong{color:var(--c-slate);font-weight:800;}
.hm-kat__bar-r{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}

.hm-kat__perpage{display:flex;align-items:center;gap:4px;}
.hm-kat__lbl{font-size:12px;font-weight:600;color:var(--c-muted);margin-right:2px;}
.hm-kat__pp{
    display:inline-block;min-width:30px;padding:5px 8px;
    background:#fff;color:var(--c-slate);
    font-size:12.5px;font-weight:700;text-align:center;
    text-decoration:none!important;
    border:1px solid var(--c-border);border-radius:var(--r-sm);
    transition:all .16s ease;
}
.hm-kat__pp:hover{border-color:var(--c-orange);color:var(--c-orange);}
.hm-kat__pp.is-aktif{background:var(--c-slate);border-color:var(--c-slate);color:#fff;}

.hm-kat__sort{position:relative;}
.hm-kat__sort-btn{
    display:flex;align-items:center;gap:8px;
    padding:8px var(--s2);
    background:#fff;color:var(--c-slate);
    font-family:var(--font);font-size:13px;font-weight:700;
    border:1px solid var(--c-border);border-radius:var(--r-sm);
    cursor:pointer;transition:border-color .16s ease;
}
.hm-kat__sort-btn:hover{border-color:var(--c-orange);}
.hm-kat__sort-btn i:first-child{font-size:15px;color:var(--c-muted);}
.hm-kat__sort-btn i:last-child{font-size:11px;color:var(--c-muted);}

.hm-kat__sort-drop{
    position:absolute;top:calc(100% + 6px);right:0;z-index:40;
    min-width:220px;margin:0;padding:6px;list-style:none;
    background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md);
    box-shadow:0 12px 28px rgba(37,61,78,.14);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.hm-kat__sort:hover .hm-kat__sort-drop,
.hm-kat__sort:focus-within .hm-kat__sort-drop{opacity:1;visibility:visible;transform:translateY(0);}
.hm-kat__sort-drop a{
    display:block;padding:8px 10px;
    font-size:13px;font-weight:500;color:var(--c-slate);
    text-decoration:none;border-radius:var(--r-sm);
    transition:background .14s ease;
}
.hm-kat__sort-drop a:hover{background:#F4F5F7;}
.hm-kat__sort-drop a.is-aktif{background:rgba(253,87,34,.08);color:var(--c-orange);font-weight:700;}


/* ============================================================
   7) AKTIF FILTRE CIPLERI
   ============================================================ */
.hm-kat__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3);}
.hm-kat__chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;
    background:rgba(253,87,34,.09);color:var(--c-orange)!important;
    font-size:12px;font-weight:700;text-decoration:none!important;
    border-radius:var(--r-pill);transition:background .16s ease;
}
.hm-kat__chip:hover{background:rgba(253,87,34,.18);}
.hm-kat__chip i{font-size:11px;}
.hm-kat__chip--clear{
    background:transparent;color:var(--c-muted)!important;
    text-decoration:underline!important;font-weight:600;
}
.hm-kat__chip--clear:hover{background:transparent;color:var(--c-slate)!important;}


/* ============================================================
   8) URUN GRIDI — 4'lu
   ============================================================ */
.hm-kat__grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:var(--s3);
}
.hm-kat__grid > .hm-pc{margin-bottom:0;}

/* --- "başlayan fiyat" etiketi (urun.fiyat=0, fiyat varyantta) --- */
.hm-pc__baslayan{
    flex:1 0 100%;
    font-size:10.5px;font-weight:700;color:var(--c-muted);
    text-transform:lowercase;letter-spacing:.01em;
    margin-bottom:-2px;
}
/* --- fiyat hic yoksa --- */
.hm-pc__price--yok{margin-top:auto;}
.hm-pc__sor{
    font-size:13px;font-weight:700;color:var(--c-slate);
}

/* --- kartta m² birim fiyati --- */
.hm-pc__m2{
    margin:-6px 0 var(--s2);
    font-size:11.5px;font-weight:700;
    color:var(--c-slate);
    letter-spacing:-.01em;
}
.hm-pc__m2 span{font-weight:600;color:var(--c-muted);}
@media (max-width:767px){
  .hm-pc__m2{font-size:10.5px;margin-bottom:10px;}
}

/* 4'lu gridde kart ~230px genisliginde kaliyor; 3 ozellik cipi yan yana
   sigmadigi icin alt alta dizilip karti ~50px uzatiyor. Kategori sayfasinda
   2 cip gosteriliyor. urun-sabit-kod.php'ye DOKUNULMADI — sadece CSS,
   vitrinler ve urun sayfasi 3 cip gostermeye devam ediyor.
   3 cip istersen bu bloku sil. */
.hm-kat__grid .hm-pc__chip:nth-child(n+3){display:none;}


/* ============================================================
   9) BOS SONUC
   ============================================================ */
.hm-kat__bos{
    padding:var(--s6) var(--s3);text-align:center;
    background:#F7F8F9;border:1px solid var(--c-border);border-radius:var(--r-md);
}
.hm-kat__bos h2{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--c-slate);}
.hm-kat__bos p{margin:0 0 var(--s3);font-size:14px;color:var(--c-muted);}
.hm-kat__bos-btn{
    display:inline-block;padding:11px var(--s3);
    background:var(--c-orange);color:#fff!important;
    font-size:13px;font-weight:700;text-decoration:none!important;
    border-radius:var(--r-md);
}
.hm-kat__bos-btn:hover{background:#E14A17;}
.hm-kat__bos-form{display:flex;gap:8px;max-width:420px;margin:0 auto;}
.hm-kat__bos-form input{
    flex:1 1 auto;min-width:0;padding:11px var(--s2);
    font-family:var(--font);font-size:14px;
    border:1px solid var(--c-border);border-radius:var(--r-md);
}
.hm-kat__bos-form input:focus{outline:none;border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(253,87,34,.12);}
.hm-kat__bos-form button{
    flex:0 0 auto;padding:11px var(--s3);
    background:var(--c-orange);color:#fff;
    font-family:var(--font);font-size:13px;font-weight:700;
    border:0;border-radius:var(--r-md);cursor:pointer;
}
.hm-kat__bos-form button:hover{background:#E14A17;}


/* ============================================================
   10) SAYFALAMA
   ============================================================ */
.hm-kat__pager{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:var(--s4);}
.hm-kat__pg{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-width:38px;height:38px;padding:0 10px;
    background:#fff;color:var(--c-slate);
    font-size:13px;font-weight:700;text-decoration:none!important;
    border:1px solid var(--c-border);border-radius:var(--r-sm);
    transition:all .16s ease;
}
.hm-kat__pg:hover{border-color:var(--c-orange);color:var(--c-orange);}
.hm-kat__pg.is-aktif{background:var(--c-orange);border-color:var(--c-orange);color:#fff;cursor:default;}
.hm-kat__pg--yon{font-weight:600;}
.hm-kat__pg--yon i{font-size:11px;}
.hm-kat__pg-ara{padding:0 4px;color:var(--c-muted);font-weight:700;}


/* ============================================================
   11) WHATSAPP BANDI — liste altinda, yatay
   ============================================================ */
.hm-kat__wa{
    display:flex;align-items:center;gap:var(--s3);
    margin-top:var(--s5);
    padding:var(--s3);
    background:var(--c-slate);
    border-radius:var(--r-lg);
}
.hm-kat__wa-ic{
    flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;
    background:var(--c-wa);border-radius:50%;
}
.hm-kat__wa-ic i{font-size:26px;color:#fff;}
.hm-kat__wa-tx{flex:1 1 auto;min-width:0;display:block;}
.hm-kat__wa-h{
    display:block;margin-bottom:3px;
    font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;
}
.hm-kat__wa-p{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.74);}
.hm-kat__wa-btn{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:8px;
    padding:12px var(--s3);
    background:var(--c-wa);color:#fff!important;
    font-size:13.5px;font-weight:700;text-decoration:none!important;
    border-radius:var(--r-md);
    transition:filter .2s ease;
}
.hm-kat__wa-btn:hover{filter:brightness(.93);}
.hm-kat__wa-btn i{font-size:18px;}


/* ============================================================
   12) SEO METNI — silik, kirpilmis, acilabilir
   ONEMLI: kirpma max-height ile. display:none KULLANILMIYOR,
   metnin tamami DOM'da ve render ediliyor -> Google hepsini gorur.
   Renk #667380: beyaz uzerinde 4.85:1 kontrast (WCAG AA gecer).
   ============================================================ */
.hm-kat__seo{
    margin-top:var(--s6);
    padding-top:var(--s4);
    border-top:1px solid var(--c-border);
}
.hm-kat__seo-h{
    margin:0 0 var(--s2);
    font-size:17px;font-weight:800;color:var(--c-slate);letter-spacing:-.01em;
}

.hm-kat__seo-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

.hm-kat__seo-tx{
    position:relative;
    max-height:220px;overflow:hidden;
    max-width:88ch;
    font-size:13.5px;line-height:1.75;color:#667380;
    transition:max-height .001s;
}
.hm-kat__seo-tx::after{
    content:'';
    position:absolute;left:0;right:0;bottom:0;height:110px;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 82%);
    pointer-events:none;
}
.hm-kat__seo-cb:checked ~ .hm-kat__seo-tx{max-height:none;}
.hm-kat__seo-cb:checked ~ .hm-kat__seo-tx::after{display:none;}

.hm-kat__seo-tx h2,
.hm-kat__seo-tx h3,
.hm-kat__seo-tx h4{
    margin:var(--s3) 0 var(--s1);
    font-size:15px;font-weight:700;color:#4A5560;
}
.hm-kat__seo-tx h2:first-child,
.hm-kat__seo-tx h3:first-child{margin-top:0;}
.hm-kat__seo-tx p{margin:0 0 var(--s2);}
.hm-kat__seo-tx strong,
.hm-kat__seo-tx b{color:#4A5560;font-weight:700;}
.hm-kat__seo-tx ul,
.hm-kat__seo-tx ol{margin:0 0 var(--s2);padding-left:20px;}
.hm-kat__seo-tx li{margin-bottom:5px;}
.hm-kat__seo-tx a{color:var(--c-orange);text-decoration:underline;}
.hm-kat__seo-tx img{max-width:100%;height:auto;border-radius:var(--r-sm);margin:0 0 var(--s2);}
.hm-kat__seo-tx table{
    width:100%;border-collapse:collapse;margin:0 0 var(--s3);font-size:13px;
}
.hm-kat__seo-tx th,
.hm-kat__seo-tx td{border:1px solid var(--c-border);padding:7px 9px;text-align:left;}
.hm-kat__seo-tx th{background:#F7F8F9;font-weight:700;color:#4A5560;}

.hm-kat__seo-more{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:var(--s2);
    font-size:13px;font-weight:700;color:var(--c-slate);
    cursor:pointer;user-select:none;
    transition:color .16s ease;
}
.hm-kat__seo-more:hover{color:var(--c-orange);}
.hm-kat__seo-more svg{
    width:14px;height:14px;
    fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s ease;
}
.hm-kat__seo-more [data-kapa]{display:none;}
.hm-kat__seo-cb:checked ~ .hm-kat__seo-more [data-ac]{display:none;}
.hm-kat__seo-cb:checked ~ .hm-kat__seo-more [data-kapa]{display:inline;}
.hm-kat__seo-cb:checked ~ .hm-kat__seo-more svg{transform:rotate(180deg);}
.hm-kat__seo-cb:focus-visible ~ .hm-kat__seo-more{outline:2px solid var(--c-orange);outline-offset:3px;}

/* tema varsayilani: bolum basligi altindaki yesil cizgi -> turuncu */
.hm-kat .section-title::before,
.hm-kat .section-title::after,
.hm-kat .title.style-3::before,
.hm-kat .title.style-3::after{background-color:var(--c-orange)!important;}


/* ============================================================
   13) MOBIL PANEL BILESENLERI
   Masaustunde display:none (bolum 4). Asagida <=991px'te aciliyor.
   ============================================================ */
.hm-kat__mbar{gap:8px;margin-bottom:var(--s2);}
.hm-kat__mbtn{
    flex:1 1 0;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:12px 10px;
    background:#fff;color:var(--c-slate);
    font-family:var(--font);font-size:13.5px;font-weight:700;
    border:1px solid var(--c-border);border-radius:var(--r-md);
    cursor:pointer;
}
.hm-kat__mbtn i{font-size:17px;color:var(--c-muted);}
.hm-kat__mbadge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:19px;height:19px;padding:0 5px;
    background:var(--c-orange);color:#fff;
    font-size:11px;font-weight:800;border-radius:var(--r-pill);
}

.hm-kat__panelhead{
    align-items:center;justify-content:space-between;
    padding:var(--s2);
    border-bottom:1px solid var(--c-border);
    font-size:15px;font-weight:800;color:var(--c-slate);
    flex:0 0 auto;
}
.hm-kat__panelx{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;padding:0;
    background:#F4F5F7;color:var(--c-slate);
    border:0;border-radius:50%;cursor:pointer;
}
.hm-kat__panelx svg{
    width:16px;height:16px;
    fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
}

.hm-kat__panelfoot{
    align-items:center;gap:10px;
    padding:var(--s2);
    border-top:1px solid var(--c-border);
    background:#fff;flex:0 0 auto;
}
.hm-kat__panelclear{
    flex:0 0 auto;padding:12px var(--s2);
    color:var(--c-muted)!important;font-size:13px;font-weight:700;
    text-decoration:underline!important;
}
.hm-kat__panelok{
    flex:1 1 auto;padding:13px;
    background:var(--c-orange);color:#fff;
    font-family:var(--font);font-size:14px;font-weight:700;
    border:0;border-radius:var(--r-md);cursor:pointer;
}

.hm-kat__perde{
    position:fixed;inset:0;z-index:1090;
    background:rgba(37,61,78,.5);
}
.hm-kat__perde[hidden]{display:none!important;}

.hm-kat__msort-list{list-style:none;margin:0;padding:8px;overflow-y:auto;}
.hm-kat__msort-list a{
    display:block;padding:13px 12px;
    font-size:14px;font-weight:500;color:var(--c-slate);
    text-decoration:none;border-radius:var(--r-sm);
}
.hm-kat__msort-list a.is-aktif{background:rgba(253,87,34,.09);color:var(--c-orange);font-weight:700;}
.hm-kat__msort-pp{
    display:flex;align-items:center;gap:6px;
    padding:12px var(--s2) calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--c-border);
}
.hm-kat__msort-pp .hm-kat__lbl{display:inline;}


/* ============================================================
   14) RESPONSIVE
   ============================================================ */
@media (max-width:1399px){
  .hm-kat__layout{grid-template-columns:240px minmax(0,1fr);gap:var(--s3);}
}

@media (max-width:1199px){
  .hm-kat__grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .hm-kat__h1{font-size:26px;}
}

/* ---------- MOBIL / TABLET: sol sutun panele donusuyor ---------- */
@media (max-width:991px){

  .hm-kat__layout{grid-template-columns:1fr;gap:0;}

  /* tetik cubugu gorunur */
  .hm-kat__mbar{display:flex;}

  /* masaustu arac cubugunun sag tarafi (adet + siralama) gizlenir,
     ayni islevi mobil paneller ustleniyor */
  .hm-kat__bar{
      margin-bottom:var(--s2);padding:8px 12px;
      background:transparent;border:0;
  }
  .hm-kat__bar-r{display:none;}
  .hm-kat__bar-l{width:100%;}

  /* SOL SUTUN -> sagdan acilan cekmece */
  .hm-kat__side{
      position:fixed;top:0;right:0;bottom:0;left:auto;
      z-index:1100;
      display:flex;flex-direction:column;
      width:min(88vw, 380px);
      background:#fff;
      transform:translateX(101%);
      transition:transform .26s cubic-bezier(.4,0,.2,1);
      box-shadow:-10px 0 34px rgba(37,61,78,.20);
      will-change:transform;
  }
  .hm-kat__side.is-acik{transform:none;}

  .hm-kat__panelhead{display:flex;}
  .hm-kat__panelfoot{display:flex;}
  .hm-kat__panelbody{
      flex:1 1 auto;overflow-y:auto;
      padding:var(--s2);
      -webkit-overflow-scrolling:touch;
  }
  .hm-kat__acc{
      margin-bottom:0;padding:var(--s2) 0;
      border:0;border-bottom:1px solid var(--c-border);border-radius:0;
  }
  .hm-kat__acc:last-child{border-bottom:0;}
  .hm-kat__catlist,
  .hm-kat__facet{max-height:none;}

  /* SIRALAMA -> alttan acilan sayfa */
  .hm-kat__msort{
      position:fixed;left:0;right:0;bottom:0;
      z-index:1100;
      display:flex;flex-direction:column;
      max-height:80vh;
      background:#fff;
      border-radius:var(--r-lg) var(--r-lg) 0 0;
      transform:translateY(101%);
      transition:transform .26s cubic-bezier(.4,0,.2,1);
      box-shadow:0 -10px 34px rgba(37,61,78,.20);
      will-change:transform;
  }
  .hm-kat__msort.is-acik{transform:none;}

  .hm-kat__grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .hm-kat__wa{margin-top:var(--s4);}
}

@media (max-width:767px){
  .hm-kat__head{padding:var(--s3) 0 var(--s2);}
  .hm-kat__h1{font-size:22px;}
  .hm-kat__lead{font-size:13.5px;}
  .hm-kat__grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}
  /* Mobilde urunlere daha cabuk ulasilsin diye baslik bloku sikistiriliyor.
     Metin DOM'da tam duruyor (line-clamp sadece gorsel kirpma). */
  .hm-kat__lead{
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
      overflow:hidden;margin-top:10px;
  }

  /* kesim seridi: tek satir + kucuk pill buton (eskiden tam genislik buton) */
  .hm-kat__cut{
      padding:10px 12px;gap:8px;margin-bottom:var(--s2);
      align-items:flex-start;
  }
  .hm-kat__cut-ic{width:19px;height:19px;margin-top:1px;}
  .hm-kat__cut-tx{font-size:12.5px;line-height:1.45;flex:1 1 auto;min-width:0;}
  .hm-kat__cut-btn{
      padding:7px 12px;font-size:12px;
      margin-left:27px;   /* ikon hizasindan devam etsin */
  }
  .hm-kat__cut-btn i{font-size:14px;}

  .hm-kat__pager{justify-content:center;}

  /* WhatsApp bandi dikey */
  .hm-kat__wa{flex-direction:column;text-align:center;gap:var(--s2);padding:var(--s3) var(--s2);}
  .hm-kat__wa-btn{width:100%;justify-content:center;}

  /* SEO metni mobilde biraz daha kisa kirpilir */
  .hm-kat__seo{margin-top:var(--s4);}
  .hm-kat__seo-tx{max-height:180px;font-size:13.5px;}
  /* genis tablolar sayfayi yana kaydirmasin */
  .hm-kat__seo-tx table{display:block;overflow-x:auto;white-space:nowrap;}
}

@media (max-width:420px){
  .hm-kat__mbtn{font-size:12.5px;padding:11px 8px;}
}

@media (prefers-reduced-motion: reduce){
  .hm-kat__sort-drop,
  .hm-kat__side,
  .hm-kat__msort,
  .hm-kat__seo-more svg{transition:none;}
}


/* ============================================================
   15) SOL SUTUN TAMAMEN KAPALIYSA
   kategori.php bolum 0'daki dort ayarin hepsi false ise sayfa
   tek sutuna duser. Bu kural DOSYANIN SONUNDA olmali — yukaridaki
   medya sorgulariyla ayni ozgullukte, sonra geldigi icin onlari eziyor.
   ============================================================ */
.hm-kat__layout--tek{grid-template-columns:minmax(0,1fr);}