/* ===== Kategori vitrini ===== */

.cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__grid {
  display: grid;
  grid-template-columns: repeat(var(--kig-cols-mobile, 2), minmax(0, 1fr));
  gap: var(--kig-card-gap, 12px);
}

.cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__empty {
  margin: 0;
  padding: 44px 20px;
  border: 1px dashed var(--kig-line);
  border-radius: var(--kig-radius);
  background: var(--kig-accent-soft);
  color: var(--kig-muted);
  font-size: 0.9375rem;
  text-align: center;
}

/*
 * Kırılımlar Keşfet (BannerGrid) ile birebir aynı: 1024'e kadar mobil kolon
 * sayısı geçerli, sadece boşluk büyüyor. Eskiden 768'de 3 kolona zorluyordu
 * ve iki bölüm tabletde farklı diziliyordu.
 */
/*
 * MOBİL: ızgara değil yatay şerit — TEK KART EKRANA SIĞAR.
 *
 * Telefonda bölüm tek kolona düşüyordu (--kig-cols-mobile: 1), yani kartlar
 * tam genişlikte alt alta dizilip sayfayı uzatıyordu. Burada yan yana
 * geçiyorlar ve parmakla kaydırılıyor.
 *
 * Kart genişliği tam %100 ve şerit KASITLI olarak ekran kenarına taşmıyor:
 * taşsaydı bir sonraki kart sağdan birkaç piksel sızardı. Bu haliyle kart
 * içerik sütununa birebir oturuyor, sonraki kart tamamen ekran dışında
 * kalıyor ve ancak kaydırınca geliyor — yarım kart görünmüyor.
 */
@media (max-width: 767px) {
  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__grid {
    display: flex;
    gap: var(--kig-card-gap, 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__grid::-webkit-scrollbar {
    display: none;
  }

  /*
   * Ölçüler kartın KENDİSİNE veriliyor, ızgaranın doğrudan çocuğuna değil:
   * manuel kartlarda (IkasComponentRenderer) araya display:contents
   * sarmalayıcılar giriyor, yani şeridin gerçek öğesi iki seviye aşağıdaki
   * karttır. `.kig-tile` her iki modda da o öğeye denk geliyor.
   */
  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__grid .kig-tile {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }


  /*
   * Daire rozetler istisna: bunlar küçük yuvarlak etiketler, ekranda bir
   * tane göstermek anlamsız olurdu. Şeritte kalıyorlar ama üçer üçer.
   */
  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats--circle .kig-cats__grid .kig-tile {
    flex-basis: 30%;
  }
}

@media (min-width: 768px) {
  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__grid {
    gap: var(--kig-card-gap, 18px);
  }
}

@media (min-width: 1024px) {
  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats__grid {
    grid-template-columns: repeat(var(--kig-cols, 4), minmax(0, 1fr));
    gap: var(--kig-card-gap, 22px);
  }
}

/* Daire varyantında kartlar daha sık dizilir ve yatay kaydırılabilir olmaz */
.cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats--circle .kig-cats__grid {
  gap: var(--kig-card-gap, 16px 10px);
}

@media (min-width: 1024px) {
  .cc_AH7GXA16Q3_rIy5xUSPCH .kig-cats--circle .kig-cats__grid {
    gap: var(--kig-card-gap, 24px 18px);
  }
}