/* KALIPER KATEGORI SUZGECI (2026-11-04) - Views/Products/Kaliper/KaliperKategori.cshtml
   Tasarim: Claude Design "Fren Kaliperi - 4 listeli suzgec". Butun kurallar .kp-kat altinda ve en az
   iki sinifli: site genel kurallari (main.css, product-detail .pd-root dersi) tek sinifli kurali sessizce ezmesin.
   Renkler product-detail.css belirtecleriyle ayni (kirmizi #d32f2f/#b71c1c, koyu #262F2E, cizgi #e6e6e6).
   wwwroot gunluk deploy'a GIRMEZ: yayinda 4 konuma elle kopyalanir. */
/* margin-top 9rem: sitenin sabit ust menusu (section.header, position:fixed, ~145 px) altindan baslar -
   diger sayfalarda bu boslugu ilk bolum veriyor (.search-box{margin-top:9rem}); Hizli Arama bu sayfadan kalkti. */
.kp-kat{margin-top:9rem;padding:24px 0 56px;color:#1a1a1a;font-family:"Poppins",sans-serif}
.kp-kat *,.kp-kat *::before,.kp-kat *::after{box-sizing:border-box}
.kp-kat .kp-yol{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none;font-size:12px;color:#5e5e5e}
.kp-kat .kp-yol li{margin:0}
.kp-kat .kp-yol li+li::before{content:"/";margin-inline-end:8px;color:#b9bfbe}
.kp-kat .kp-yol a,.kp-kat .kp-yol a:visited{color:#4a4a4a;text-decoration:none}
.kp-kat .kp-yol a:hover{color:#b71c1c}
/* Baslik izgarasi suzgecle (.kp-suz) AYNI 3 sutun: arama 3. sutunun (Kaliper Gruplari) tam ustunde biter. */
.kp-kat .kp-ust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:8px;align-items:end}
.kp-kat .kp-ust__sol{grid-column:1 / 3;display:flex;flex-direction:column;gap:10px;min-width:0}
.kp-kat .kp-ust__baslik{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.kp-kat .kp-ust h1{margin:0;font-size:36px;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#1a1a1a}
.kp-kat .kp-ust__say{font-size:14px;color:#4a4a4a}
/* Baslik alti aciklama (21006, 2026-11-05: 1-2-3 adim dizisinin yerine). Yapay max-width YOK (hiza kurali 3). */
.kp-kat .kp-ust__aciklama{margin:0;font-size:15px;line-height:1.5;color:#4a4a4a;text-wrap:pretty}
/* Adimlar: uc kutuya karsilik 1-2-3; secilen adimin numarasi kirmizi onaya doner (kaliper-kategori.js). */
/* Hizli OEM Kodu Arama: baslik satirinin sagi, sag kenar icerik blogunun sag kenari. */
.kp-kat .kp-oem{grid-column:3 / 4;display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.kp-kat .kp-oem__bas{margin:0;font-size:13px;font-weight:600;line-height:1.3;color:#1a1a1a}
.kp-kat .kp-oem__kutu{position:relative;display:flex;align-items:stretch;height:44px;overflow:hidden;border:1px solid #d6d6d6;border-radius:10px;background:#fff}
.kp-kat .kp-oem__kutu:focus-within{border-color:#d32f2f;box-shadow:0 0 0 3px rgba(211,47,47,.12)}
.kp-kat .kp-oem__kutu svg{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:#5e5e5e;pointer-events:none}
.kp-kat .kp-oem__kutu input{flex:1;min-width:0;height:100%;margin:0;padding:0 8px 0 34px;border:0;border-radius:0;background:transparent;box-shadow:none;font:inherit;font-size:13px;color:#1a1a1a;outline:none;text-overflow:ellipsis}
[dir="rtl"] .kp-kat .kp-oem__kutu input{padding:0 34px 0 8px}
.kp-kat .kp-oem__kutu input::placeholder{color:#8a8a8a;text-overflow:ellipsis}
.kp-kat .kp-oem__kutu button{flex:none;height:100%;margin:0;padding:0 14px;border:0;border-radius:0;background:#d32f2f;font:inherit;font-size:14px;font-weight:600;color:#fff;text-transform:capitalize;cursor:pointer}
.kp-kat .kp-oem__kutu button:hover{background:#b71c1c}
.kp-kat .kp-oem__kutu button:focus-visible{outline:2px solid #1a1a1a;outline-offset:-4px}
/* Kaliperci akisi: Marka | Kaliper tipi | Aradiginiz parca - uc esit sutun, tek satirda biter (2026-11-05). */
.kp-kat .kp-suz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:16px}
.kp-kat .kp-pan{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #e6e6e6;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.kp-kat .kp-pan--secili{border-color:#d32f2f}
.kp-kat .kp-pan__bas{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:8px 8px 4px 16px}
.kp-kat .kp-pan__ad{display:flex;flex-direction:column;flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;line-height:1.3;color:#1a1a1a}
.kp-kat .kp-pan__secim{display:none;font-size:12px;font-weight:500;color:#b71c1c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-kat .kp-pan__bilgi{font-size:12px;color:#5e5e5e;padding-inline-end:8px;white-space:nowrap}
.kp-kat .kp-pan__kaldir{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:12px;font-weight:500;color:#b71c1c;cursor:pointer}
.kp-kat .kp-pan__kaldir[hidden],.kp-kat .kp-temizle[hidden],.kp-kat .kp-sayfa[hidden]{display:none}
.kp-kat .kp-pan__kaldir:hover{background:#fff1f1}
.kp-kat .kp-pan__ac{display:none}
.kp-kat .kp-ara{position:relative;margin:0 12px 8px;display:none}
.kp-kat.kp-js .kp-ara{display:block}
.kp-kat .kp-ara svg{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:#5e5e5e;pointer-events:none}
.kp-kat .kp-ara input{width:100%;height:36px;margin:0;padding:0 10px 0 32px;border:1px solid #d6d6d6;border-radius:8px;font:inherit;font-size:13px;color:#1a1a1a;background:#fff;box-shadow:none}
[dir="rtl"] .kp-kat .kp-ara input{padding:0 32px 0 10px}
.kp-kat .kp-ara input:focus{outline:2px solid #d32f2f;outline-offset:-1px;border-color:transparent}
.kp-kat .kp-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kp-kat .kp-liste{height:180px;margin:0 6px 10px 4px;padding:0 4px 0 0;list-style:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c4c4c4 transparent;scrollbar-gutter:stable}
.kp-kat .kp-liste li{margin:0;padding:0}
.kp-kat .kp-sec{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:4px 8px;border:0;border-radius:8px;background:none;font:inherit;color:#1a1a1a;text-align:start;cursor:pointer}
.kp-kat .kp-sec:hover{background:#f4f4f4}
.kp-kat .kp-sec:focus-visible{outline:2px solid #d32f2f;outline-offset:-2px}
.kp-kat .kp-sec--secili,.kp-kat .kp-sec--secili:hover{background:#fff1f1;color:#8e1414}
.kp-kat .kp-gor{flex:none;display:block;width:36px;height:36px;border-radius:6px;object-fit:contain;background:#fff}
.kp-kat .kp-mono{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:#262F2E;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1}
.kp-kat .kp-mono--tip{background:#2b5a85}
.kp-kat .kp-mono--uzun{font-size:10px;letter-spacing:0}
.kp-kat .kp-sec--secili .kp-mono{background:#b71c1c}
.kp-kat .kp-sec__ad{display:flex;flex-direction:column;flex:1;min-width:0;font-size:13px;line-height:1.3}
.kp-kat .kp-sec--secili .kp-sec__ad{font-weight:600}
.kp-kat .kp-sec__alt{font-size:11px;font-weight:400;color:#5e5e5e}
.kp-kat .kp-sec__n{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#5e5e5e;font-variant-numeric:tabular-nums}
.kp-kat .kp-sec--secili .kp-sec__n{color:#8e1414}
.kp-kat .kp-bos{padding:16px 12px;font-size:13px;color:#5e5e5e}
/* Parca kartlari (3. sutun): liste panelleriyle ayni kutu; 2026-11-05'ten beri KILITSIZ (yalniz o anki secimde urunu
   olmayan kart pasif). Kartlar kutunun yuksekligini esit paylasir (flex:1), panel alt kenarlariyla ayni hat. */
.kp-kat .kp-parca{display:flex;flex-direction:column;min-width:0;margin:0;background:#fff;border:1px solid #e6e6e6;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.kp-kat .kp-parca--secili{border-color:#d32f2f}
/* Baslik satiri liste panellerinin basligiyla AYNI olcu (.kp-pan__bas): uc baslik ayni hatta. */
.kp-kat .kp-parca__ust{display:flex;align-items:center;min-height:48px;padding:8px 8px 4px 16px}
.kp-kat .kp-parca__bas{margin:0;font-size:15px;font-weight:600;line-height:1.3;color:#1a1a1a}
.kp-kat .kp-parca__kartlar{display:flex;flex-direction:column;gap:8px;flex:1;padding:0 12px 12px}
.kp-kat .kp-pk{position:relative;display:flex;flex:1 1 0;align-items:center;gap:12px;min-width:0;min-height:60px;margin:0;padding:6px 40px 6px 6px;border:1px solid #e6e6e6;border-radius:10px;background:#fff;font:inherit;color:#1a1a1a;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
[dir="rtl"] .kp-kat .kp-pk{padding:6px 6px 6px 40px}
.kp-kat .kp-pk:hover:not(:disabled){border-color:#d32f2f;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.kp-kat .kp-pk:focus-visible{outline:2px solid #d32f2f;outline-offset:2px}
.kp-kat .kp-pk:disabled{cursor:not-allowed;background:#fafafa}
.kp-kat .kp-pk:disabled .kp-pk__gor img{filter:grayscale(1);opacity:.5}
.kp-kat .kp-pk:disabled .kp-pk__ad,.kp-kat .kp-pk:disabled .kp-pk__n{color:#8a8a8a}
.kp-kat .kp-pk__gor{flex:none;display:block;width:48px;height:48px;overflow:hidden;border-radius:8px;background:#fff}
.kp-kat .kp-pk__gor img{display:block;width:100%;height:100%;object-fit:contain}
.kp-kat .kp-pk__metin{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.kp-kat .kp-pk__ad{font-size:14px;font-weight:600;line-height:1.3;color:#1a1a1a;overflow-wrap:anywhere}
.kp-kat .kp-pk__n{font-size:12px;color:#5e5e5e;font-variant-numeric:tabular-nums}
.kp-kat .kp-pk__isaret{position:absolute;top:50%;inset-inline-end:12px;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#d32f2f;color:#fff}
.kp-kat .kp-pk--secili,.kp-kat .kp-pk--secili:hover:not(:disabled){border-color:#d32f2f;background:#fff1f1;box-shadow:inset 0 0 0 1px #d32f2f}
.kp-kat .kp-pk--secili .kp-pk__ad,.kp-kat .kp-pk--secili .kp-pk__n{color:#8e1414}
.kp-kat .kp-pk--secili .kp-pk__isaret{display:inline-flex}
.kp-kat .kp-sonuc{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid #e6e6e6}
.kp-kat .kp-sonuc__sol{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.kp-kat .kp-cipler{display:contents}
.kp-kat .kp-sonuc__say{margin:0 8px 0 0;font-size:20px;font-weight:600;color:#1a1a1a;font-variant-numeric:tabular-nums}
.kp-kat .kp-cip{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:0 12px 0 14px;border:1px solid #d32f2f;border-radius:999px;background:#fff1f1;font:inherit;font-size:13px;font-weight:600;color:#8e1414;cursor:pointer}
.kp-kat .kp-cip:hover{background:#ffe2e2}
.kp-kat .kp-cip:focus-visible{outline:2px solid #d32f2f;outline-offset:2px}
.kp-kat .kp-cip__tur{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#b71c1c}
/* Sonuclarda arama (2026-11-05, "En cok bakilanlar once" etiketinin yerine): sonuc satirinin sag ucu. */
.kp-kat .kp-sonuc__sag{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.kp-kat .kp-urunara{display:flex;align-items:center;gap:8px;width:320px;max-width:100%;min-height:40px;margin:0;padding:0 12px;border:1px solid #d9d9d9;border-radius:8px;background:#fff;color:#5e5e5e;cursor:text}
.kp-kat .kp-urunara:focus-within{border-color:#262F2E;box-shadow:0 0 0 3px rgba(38,47,46,.12)}
.kp-kat .kp-urunara svg{flex:none}
.kp-kat .kp-urunara input{flex:1;min-width:0;height:38px;margin:0;padding:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:#1a1a1a;text-overflow:ellipsis}
.kp-kat .kp-urunler__bos{grid-column:1 / -1;margin:24px 0;font-size:14px;color:#5e5e5e;text-align:center}
.kp-kat .kp-temizle{min-height:36px;margin:0;padding:0 14px;border:1px solid #d32f2f;border-radius:8px;background:#fff;font:inherit;font-size:13px;font-weight:500;color:#b71c1c;cursor:pointer}
.kp-kat .kp-temizle:hover{background:#fff1f1}
.kp-kat .kp-urunler{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin-top:16px}
.kp-kat .kp-kart,.kp-kat .kp-kart:visited{display:flex;flex-direction:column;gap:8px;min-width:0;color:#1a1a1a;text-decoration:none}
.kp-kat .kp-kart:hover{color:#1a1a1a}
.kp-kat .kp-kart__gor{position:relative;display:block;aspect-ratio:1 / 1;overflow:hidden;border:1px solid #e6e6e6;border-radius:10px;background:#fff}
.kp-kat .kp-kart__gor img{display:block;width:100%;height:100%;object-fit:contain}
/* Kart etiketi (2026-11-05; kullanici: marka SOL UST, kaliper tipi SAG ALT kose; RTL'de aynalanir): marka (koyu) + kaliper tipi (mavi; listelerdeki
   harf simgeleriyle ayni renkler). Uzun ad "..." ile kisalir, "+N" her zaman gorunur. */
.kp-kat .kp-etiket{position:absolute;inset:8px;pointer-events:none}
.kp-kat .kp-etiket__m,.kp-kat .kp-etiket__t{display:inline-flex;flex:0 1 auto;min-width:0;align-items:center;gap:3px;max-width:100%;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;line-height:1.3;color:#fff;white-space:nowrap}
.kp-kat .kp-etiket__m{position:absolute;top:0;inset-inline-start:0;background:#262F2E}
/* Iki etiket farkli koselerde: yan yana sigma sorunu yok. Gorselden uzun ad (cok nadir) "..." ile kisalir. */
.kp-kat .kp-etiket__t{position:absolute;bottom:0;inset-inline-end:0;background:#2b5a85}
.kp-kat .kp-etiket__ad{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kp-kat .kp-etiket__ek{flex:none;font-weight:500;opacity:.85}
/* Urun karti bilgi paneli (2026-11-05): fareyle uzerine gelince kartin yaninda (kaliper-kategori.js konumlar, fixed).
   Etkilesimsiz (pointer-events:none). Koyu ust bant (stok kodu + sagda kucuk logo + adi, kirmizi alt cizgi), govdede
   marka satirlari + kutucuklar (tip mavi, OEM gri). Ok kartin yanina bakar (--kp-ok-y JS'ten). */
.kp-kat .kp-bilgi{position:fixed;z-index:1050;width:360px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);background:#fff;border:1px solid #e3e3e3;border-radius:12px;box-shadow:0 18px 40px rgba(16,24,23,.18),0 2px 6px rgba(16,24,23,.08);pointer-events:none;font-size:13px;line-height:1.45;color:#1a1a1a}
.kp-kat .kp-bilgi[hidden]{display:none}
.kp-kat .kp-bilgi__ust{position:relative;padding:14px 16px 12px;border-radius:11px 11px 0 0;background:#262F2E;border-bottom:3px solid #d32f2f;color:#fff}
.kp-kat .kp-bilgi__kodsatir{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Kucuk logo kodun sag ucunda (RTL sol): siyah logo beyaza cevrilir, bant ustunde hafif soluk. */
.kp-kat .kp-bilgi__logo{flex:none;display:block;width:auto;height:14px;filter:brightness(0) invert(1);opacity:.9}
.kp-kat .kp-bilgi__kod{min-width:0;margin:0;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:.01em;color:#fff}
.kp-kat .kp-bilgi__ad{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.78)}
.kp-kat .kp-bilgi__govde{max-height:calc(100vh - 140px);overflow:hidden;padding:4px 16px 14px;border-radius:0 0 12px 12px}
.kp-kat .kp-bilgi__bolum{padding-top:12px}
.kp-kat .kp-bilgi__bolum+.kp-bilgi__bolum{margin-top:12px;border-top:1px solid #eee}
.kp-kat .kp-bilgi__bas{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b71c1c}
.kp-kat .kp-bilgi__liste{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:start;margin:0}
.kp-kat .kp-bilgi__satir{display:contents}
.kp-kat .kp-bilgi__liste dt{margin:0;padding-top:3px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#262F2E;white-space:nowrap}
.kp-kat .kp-bilgi__liste dd{margin:0;color:#4a4a4a}
.kp-kat .kp-bilgi__kutular{display:flex;flex-wrap:wrap;gap:4px}
.kp-kat .kp-bilgi__kutu{display:inline-block;padding:2px 7px;border-radius:4px;font-size:12px;font-weight:600;line-height:1.45;white-space:nowrap}
.kp-kat .kp-bilgi__kutu--tip{background:#eaf1f8;color:#2b5a85;box-shadow:inset 0 0 0 1px #c9d9ea}
.kp-kat .kp-bilgi__kutu--oem{background:#f4f4f4;color:#1a1a1a;box-shadow:inset 0 0 0 1px #e3e3e3;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.kp-kat .kp-bilgi__kutu--ek{background:transparent;color:#8a8a8a;box-shadow:inset 0 0 0 1px #e3e3e3;font-weight:500}
.kp-kat .kp-bilgi__kalan{margin:8px 0 0;font-size:12px;color:#8a8a8a}
/* Ok: varsayilan panel kartin SAGINDA (LTR) -> ok sol kenarda; --sol: panel kartin solunda -> ok sag kenarda.
   Ust bant hizasinda koyu, asagida beyaz olur (JS --kp-ok-y). RTL'de JS ayni sinifi verir (fiziksel konum). */
.kp-kat .kp-bilgi__ok{position:absolute;top:var(--kp-ok-y,28px);left:-6px;width:12px;height:12px;margin-top:-6px;background:#262F2E;border-left:1px solid #262F2E;border-bottom:1px solid #262F2E;transform:rotate(45deg)}
.kp-kat .kp-bilgi--sol .kp-bilgi__ok{left:auto;right:-6px}
.kp-kat .kp-bilgi--okyok .kp-bilgi__ok{display:none}
.kp-kat .kp-bilgi--okacik .kp-bilgi__ok{background:#fff;border-color:#e3e3e3}
.kp-kat .kp-kart:hover .kp-kart__gor{border-color:#d32f2f}
.kp-kat .kp-kart:focus-visible{outline:2px solid #d32f2f;outline-offset:4px;border-radius:10px}
.kp-kat .kp-kart__kod{margin:0;font-size:14px;font-weight:600;line-height:1.3;color:#1a1a1a}
.kp-kat .kp-kart__ad{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.4;color:#4a4a4a}
/* Sayfalama (2026-11-05, "daha fazla" yerine; kategori sayfasi kt-sayfalama dili): durum solda, dugmeler sagda. */
.kp-kat .kp-sayfa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:16px;border-top:1px solid #e6e6e6}
.kp-kat .kp-sayfa__durum{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.kp-kat .kp-sayfa__deger{color:#1a1a1a;font-variant-numeric:tabular-nums}
.kp-kat .kp-sayfa__liste{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.kp-kat .kp-sayfa__liste li{margin:0}
.kp-kat .kp-sayfa__no,.kp-kat .kp-sayfa__aktif,.kp-kat .kp-sayfa__bosluk{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;margin:0;padding:0 8px;border:1px solid transparent;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:#333}
.kp-kat .kp-sayfa__no{cursor:pointer}
.kp-kat .kp-sayfa__no:hover{border-color:#262F2E;color:#1a1a1a}
.kp-kat .kp-sayfa__no:focus-visible{outline:2px solid #d32f2f;outline-offset:2px}
.kp-kat .kp-sayfa__aktif{border-color:#262F2E;background:#262F2E;color:#fff}
.kp-kat .kp-sayfa__bosluk{min-width:24px;padding:0;color:#8a8a8a}
.kp-kat .kp-sayfa__ok{border-color:#d9d9d9;background:#f7f7f7}
.kp-kat .kp-sayfa__ok:hover{border-color:#d32f2f;color:#b71c1c}
@media (max-width:1199.98px){.kp-kat .kp-urunler{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1023.98px){
  .kp-kat .kp-ust__sol,.kp-kat .kp-oem{grid-column:1 / -1}
  .kp-kat .kp-ust{row-gap:16px}
  /* Tablette uc sutun dar: iki liste ustte yan yana, parca kutusu altta tam genislikte, kartlar yan yana. */
  .kp-kat .kp-suz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kp-kat .kp-parca{grid-column:1 / -1}
  .kp-kat .kp-parca__kartlar{flex-direction:row}
}
@media (max-width:599.98px){
  .kp-kat{padding:16px 0 40px}
  .kp-kat .kp-ust h1{font-size:28px}
  .kp-kat .kp-ust__aciklama{font-size:14px}
  .kp-kat .kp-sonuc__sag{width:100%}
  /* Baska bir site stili label'in flex-grow'unu 0'a cekiyor: tam genislik width ile verilir (flex'e bagli degil). */
  .kp-kat .kp-sonuc__sag .kp-urunara{flex:1 1 auto;width:100%}
  .kp-kat .kp-sayfa{justify-content:center}
  .kp-kat .kp-sayfa__no,.kp-kat .kp-sayfa__aktif{min-width:36px;height:36px;padding:0 6px}
  .kp-kat .kp-etiket{inset:6px}
  .kp-kat .kp-suz{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
  .kp-kat .kp-urunler{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .kp-kat .kp-sonuc{margin-top:24px;padding-top:16px}
  .kp-kat .kp-liste{height:240px}
  .kp-kat .kp-parca__kartlar{flex-direction:column}
  /* Telefonda paneller ac-kapa - YALNIZ JS varken (JS yoksa listeler acik kalir). */
  .kp-kat.kp-js .kp-pan__bas{min-height:56px;padding:4px 4px 4px 16px}
  .kp-kat.kp-js .kp-pan__secim{display:block}
  .kp-kat.kp-js .kp-pan__ac{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:8px;background:none;color:#1a1a1a;cursor:pointer}
  .kp-kat.kp-js .kp-pan__ac svg{transition:transform .15s}
  .kp-kat.kp-js .kp-pan__ac[aria-expanded="true"] svg{transform:rotate(180deg)}
  .kp-kat.kp-js .kp-pan__govde{display:none}
  .kp-kat.kp-js .kp-pan__govde.kp-acik{display:block}
}
@media (prefers-reduced-motion:reduce){.kp-kat .kp-pan__ac svg,.kp-kat .kp-pk{transition:none}}