/* ============================================================
   KATEGORİ — Trendyol mobil web
   Ölçüler 390px'te canlı alındı (2026-09-26, "Kadın Kazak"):
     kırıntı 16 (y62) · yapışkan blok 153, üst barın hemen altına yapışır
       başlık 52 · sırala|filtrele 42 (1px #E6E6E6) · çip satırı 59, hap h28
     ızgara 2 kolon · kenar 10 · aralık 10
   Masaüstünde yan filtre paneli açılır, çip satırı ve sayaç kalır.
   ============================================================ */

:root{ --kt-ust:53px; }

/* ---------- kırıntı ---------- */
.kt-kirinti{
  display:flex; align-items:center; gap:4px; margin:0; padding:10px 10px 0;
  font-size:14px; line-height:16px; color:var(--metin); white-space:nowrap; background:var(--zemin);
}
.kt-kirinti a, .kt-kirinti span{ flex:0 0 auto; color:var(--metin); }
.kt-kirinti .ikn{ width:10px; height:10px; flex:0 0 auto; color:var(--metin3); }

/* ---------- yapışkan blok ---------- */
.kt-yapiskan{
  position:sticky; top:var(--kt-ust); z-index:50;
  background:var(--zemin); border-bottom:1px solid var(--hat);
}
.kt-bas{ position:relative; display:flex; align-items:center; justify-content:center; height:52px; padding:0 48px; }
.kt-geri{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center; padding:0;
  background:none; border:0; color:var(--metin); cursor:pointer;
}
.kt-geri .ikn{ width:22px; height:22px; }
.kt-bas-ic{ min-width:0; text-align:center; display:flex; flex-direction:column; gap:2px; }
.kt-bas h1{
  margin:0; font-size:16px; font-weight:600; line-height:18px; color:var(--metin);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kt-bas small{ font-size:12px; font-weight:600; line-height:14px; color:var(--metin3); }

.kt-bar{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hat); border-bottom:1px solid var(--hat);
}
.kt-bar button{
  display:flex; align-items:center; justify-content:center; gap:8px; height:40px; min-width:0;
  padding:0 8px; background:none; border:0; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--metin);
}
.kt-bar button + button{ border-left:1px solid var(--hat); }
.kt-bar span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-bar em{ font-style:normal; color:var(--mnd); }
.kt-bar .ikn{ width:18px; height:18px; flex:0 0 auto; color:var(--metin); }

/* scroll-padding: .ray'in snap'i ilk çipi kenara yapıştırıyordu */
.kt-cipler{ margin:0; padding:15px; gap:10px; scroll-padding-inline:15px; }
.kt-cip{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; height:28px;
  padding:0 10px 0 11px; border:1px solid var(--hat); border-radius:var(--r-tam);
  background:var(--zemin); font-size:14px; color:var(--metin); white-space:nowrap; cursor:pointer;
}
.kt-cip .ikn{ width:12px; height:12px; color:var(--metin); }
.kt-cip em{ font-style:normal; }
.kt-cip-secili{ border-color:var(--mnd); color:var(--mnd); }
.kt-cip-secili .ikn{ color:var(--mnd); }
.kt-cip-anlik{ padding-inline:10px; }
.kt-cip-anlik .ikn{ width:14px; height:14px; color:var(--mnd); }
.kt-cip-anlik[aria-pressed="true"]{ border-color:var(--mnd); background:var(--mnd-acik); color:var(--mnd-koyu); font-weight:600; }

/* ---------- aramada ilgili aramalar şeridi ---------- */
.kt-iliskili{ margin:0; padding:10px 10px 0; gap:8px; scroll-padding-inline:10px; background:var(--zemin); }

/* ---------- ızgara ---------- */
.kt-duzen{ padding:10px 10px 24px; }
.kt-grid{ gap:10px; }
.kt-yukle{ display:grid; place-items:center; height:64px; }
.kt-yukle span{
  width:24px; height:24px; border-radius:50%;
  border:3px solid var(--hat); border-top-color:var(--mnd);
  animation:ktDon .8s linear infinite;
}
@keyframes ktDon{ to{ transform:rotate(360deg); } }
.kt-son{ margin:20px 0 6px; text-align:center; font-size:12px; color:var(--metin3); }
.kt-bos{ padding:48px 20px; text-align:center; background:var(--zemin); border-radius:var(--r2); }
.kt-bos p{ margin:6px 0 16px; font-size:13px; color:var(--metin2); }
.kt-bos .kt-bos-bas{ margin:0; font-size:16px; font-weight:600; color:var(--metin); }

/* ---------- sayaç + yukarı çık ---------- */
.kt-sayac{
  position:fixed; right:5px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none;
}
.kt-sayac > span{
  min-width:69px; height:28px; display:flex; align-items:center; justify-content:center; gap:3px; padding:0 8px;
  white-space:nowrap;
  background:var(--zemin); border:1px solid var(--hat); border-radius:var(--r);
  font-size:14px; color:var(--metin3); pointer-events:auto;
}
.kt-sayac b{ font-weight:400; color:var(--metin); }
.kt-yukari{
  width:32px; height:32px; margin-right:23px; display:grid; place-items:center; padding:0;
  background:rgba(0,0,0,.65); border:0; border-radius:50%; color:#fff; cursor:pointer;
  opacity:0; transform:translateY(8px); transition:opacity var(--hiz), transform var(--hiz);
}
.kt-yukari .ikn{ width:16px; height:16px; transform:rotate(-90deg); }
.kt-sayac-yukari .kt-yukari{ opacity:1; transform:none; pointer-events:auto; }

/* ---------- kategori menüsü (☰) ---------- */
.km{ display:grid; grid-template-columns:112px minmax(0, 1fr); min-height:calc(100vh - 136px); background:var(--zemin); }
.km-sol{ background:var(--panel); display:flex; flex-direction:column; }
.km-kat{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 10px; text-align:left; font-size:13px; font-weight:500; color:var(--metin); line-height:1.25;
  border-bottom:1px solid var(--hat);
}
.km-kat.aktif{ background:var(--zemin); color:var(--metin); font-weight:700; }
/* seçili kategori: kenar şeridi yerine kara rengi lob nokta */
.km-kat.aktif::before{ content:''; position:absolute; left:4px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--mandalina); }
.km-kat .yeni{ font-size:var(--t1); font-weight:700; background:var(--metin); color:var(--sayfa, #fff); padding:1px 6px; border-radius:var(--r-tam); }
.km-sag{ padding:12px; min-width:0; }
.km-tumu{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:10px 12px; margin-bottom:14px; border-radius:var(--r2); background:var(--mnd-acik);
  font-size:13px; font-weight:700; color:var(--mnd-koyu);
}
.km-tumu .ikn{ width:12px; height:12px; }
.km-izgara{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px 8px; }
.km-alt{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:12px; color:var(--metin); line-height:1.2; }
.km-gorsel{ width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--panel); }
.km-gorsel img{ width:100%; height:100%; object-fit:cover; }

@media (hover:hover){
  .km-kat:hover{ color:var(--mnd); }
  .kt-cip:hover, .kt-bar button:hover{ color:var(--mnd); }
}

/* ---------- masaüstü ---------- */
@media (min-width:900px){
  :root{ --kt-ust:var(--ust-y); }
  .kt-kirinti, .kt-yapiskan, .kt-duzen{ max-width:var(--maks); margin-inline:auto; }
  .kt-kirinti{ padding:14px var(--pad) 8px; background:none; }
  .kt-yapiskan{ border-radius:var(--r2) var(--r2) 0 0; }
  .kt-bas{ justify-content:flex-start; padding-left:var(--pad); }
  .kt-bas-ic{ flex-direction:row; align-items:baseline; gap:8px; text-align:left; }
  .kt-geri{ display:none; }
  /* filtre yan panelde; barda yalnız sıralama kalır, sağa yaslı */
  .kt-bar{ position:absolute; top:6px; right:var(--pad); border:0; grid-template-columns:auto; }
  .kt-bar [data-ac="filtre"]{ display:none; }
  .kt-yapiskan{ position:sticky; }
  .kt-yapiskan > .kt-bas{ padding-right:260px; }
  .kt-duzen{
    display:grid; gap:16px; grid-template-columns:242px minmax(0, 1fr); align-items:start;
    padding:16px var(--pad) 32px;
  }
  .kt-sayac{ bottom:24px; }
  .km{ max-width:var(--maks); margin:16px auto; grid-template-columns:220px minmax(0, 1fr); min-height:0; border-radius:var(--r2); overflow:hidden; }
  .km-izgara{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .km-gorsel{ width:88px; height:88px; }
  .kt-iliskili{ max-width:var(--maks); margin-inline:auto; }
}

/* marka sayfası: haritadan gelen müşteri aynı işareti başlıkta görür */
.kat-marka{ padding:12px 10px 4px; }
.pd-marka-baslik{ background:var(--zemin); }