/* =====================================================================
   MAĞAZA KANALLARI ekranı (Yönetim → Mağaza Kanalları · 25.09.2026)
   ---------------------------------------------------------------------
   Ekranın gövdesi ortak sınıfları kullanıyor (`.shTablo` · `.shGirdi` ·
   `.shMini` · `.mtEkran`); burada YALNIZ bu ekrana özgü birkaç kural var.
   Ayrı dosya olmasının sebebi `marka.css`in paylaşılan bir dosya olması
   (16.09.2026 kuralı: başka oturumun hunk'ı yayına karışmasın).

   Renk YOK — hepsi tema tokenı (`--muted-aa` · `--line2` · `--accent`),
   böylece koyu tema kendiliğinden doğru çalışıyor.
   ===================================================================== */

.knArac{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.knAra{flex:0 1 260px;min-width:170px}
.knRozetler{display:flex;align-items:center;gap:4px;flex-wrap:wrap}

/* Süzgeç rozeti: seçili olan çerçeveyle işaretlenir. Renk dolgusu YOK —
   koyu temada okunaklılığı ayrıca ayarlamak gerekirdi. */
.knRozet.on{border-color:var(--accent);color:var(--ink);font-weight:600}
.knSayi{color:var(--muted-aa);font-variant-numeric:tabular-nums;margin-left:3px}

/* Mağaza kodu adın yanında küçük ve soluk — arama kolaylığı için var,
   okunurken gözü yormasın. */
.knKod{color:var(--muted-aa);font-size:.78rem;margin-left:6px;font-weight:400}

/* "otomatik" / "elle" işareti: seçim nereden geliyor. */
.knOto{color:var(--muted-aa);font-size:.72rem;margin-left:6px;white-space:nowrap}
.knSimdi{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:none;letter-spacing:0;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}

/* --- Gruplar bölümü (kullanıcının kendi kurduğu kırılım) ----------- */
.knGrupKartlar{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.knGrupKart{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;
  background:var(--surface);min-width:170px;display:flex;flex-direction:column;gap:4px}
.knGrupAd{font-weight:600}
.knGrupSayi{color:var(--muted-aa);font-size:.8rem}
/* Tek mağazalı grupta kıyas yapılamaz — kullanıcı kurarken görsün. */
.knAz{color:var(--uyari,var(--muted-aa))}
.knGrupOto{color:var(--muted-aa);font-size:.75rem}
.knGrupDugme{display:flex;gap:4px;margin-top:auto;padding-top:6px}
.knGrupDugme .shMini{margin-left:0}
/* "Grup ekle" kart yüksekliğinde bir kutu: kartların arasında durur. */
.knGrupEkle{border:1px dashed var(--line);border-radius:10px;background:transparent;
  color:var(--ink2);font:inherit;font-size:.86rem;cursor:pointer;padding:10px 14px;min-width:120px}
.knGrupEkle:hover{background:var(--surface2);color:var(--ink)}

.knTablo select.shGirdi{min-width:120px;padding:5px 8px;font-size:.84rem}

@media (max-width:760px){
  .knGrupKart,.knGrupEkle{flex:1 1 100%}
  .knArac{align-items:stretch}
  .knAra{flex:1 1 100%}
  /* ⚠️ Telefonda açılır kutu TAM GENİŞLİK ama en az 96 px: `min-width:0`
     tek başına bırakılınca "Outlet" yazısı "Ou…" diye kırpılıyordu
     (375 px'te ölçüldü). Bölge kolonu bu genişlikte zaten gizli
     (`shDarGizli`), yer var. */
  .knTablo select.shGirdi{width:100%;min-width:96px}
  .knTablo th,.knTablo td{padding-left:8px;padding-right:8px}
  /* Kod alt satıra insin — ad ile yan yana sıkıştırmasın. */
  .knKod{display:block;margin-left:0}
}