/*
 * Kategori keşif kartları — canlı miniso.com.tr'den ölçüldü.
 * Kaynak: cikti/miniso.com.tr/brief/PRODUCT-03-9ef9c10b.md
 *
 *                     w360 (s263/s264/s265)     w1440 (s1228/s1229/s1230)
 *   sarmal            mt 11, px 16              mt 13, px 80, max-w 1480
 *   ızgara            1 kolon, aralık 16        3 kolon, aralık 20
 *   kart              67 yüksek, py 8, gap 8    154 yüksek, p 16, gap 16
 *                     alt kenarlık 1px c5       tam kenarlık 1px c5, radius 16
 *   görsel            50×50, radius 4           120×120, radius 12
 *   metin             14px/20                   18px/28
 *   ok                16×16                     30×30
 */

.cc_jcmnugos_UYypBX2loG .ms-kl {
  width: 100%;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-govde {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  margin-top: var(--ms-kl-must, 0px);
  padding: 0 16px;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

/* `display: contents` — ikas her COMPONENT_LIST child'ını sarmallara sarıyor
   (tuzak 4). Sarmallar saydamlaşmazsa ızgaranın hücresi SARMAL olur, kart
   değil.
   
   `> *` yalnızca ilk seviyeyi düzleştiriyordu; sarmal derinliği ikas'ın
   iç işi ve değişebilir. `:has()` ile "içinde kart barındıran her ara
   eleman" hedefleniyor — derinlik kaç olursa olsun düzleşiyor. Kartın KENDİ
   torunları eşleşmiyor, çünkü onlar kart barındırmıyor.

   Bu, kartın sırasını `order` ile verebilmek için ŞART: `order` yalnızca
   ızgara hücresine işler, sarmalın içindeki elemana değil. */
.cc_jcmnugos_UYypBX2loG .ms-kl-izgara > *, .cc_jcmnugos_UYypBX2loG .ms-kl-izgara *:has(.ms-kl-kart) {
  display: contents;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-kart {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 67px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ms-kenarlik-kucuk, rgb(221, 221, 221));
  cursor: pointer;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-gorsel-kap {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-gorsel-kap span {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-gorsel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Canlıda kart metni ALTI ÇİZİLİ DEĞİL — <a> varsayılanı bastırılıyor */
.cc_jcmnugos_UYypBX2loG .ms-kl-kart, .cc_jcmnugos_UYypBX2loG .ms-kl-kart:hover {
  text-decoration: none;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-metin {
  display: block;
  flex: 1 1 0%;
  font-size: 14px;
  line-height: 20px;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-ok {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.cc_jcmnugos_UYypBX2loG .ms-kl-ok svg {
  width: 100%;
  height: 100%;
  stroke-width: 1px;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_UYypBX2loG .ms-kl-govde {
    margin-top: var(--ms-kl-ust, 0px);
    padding: 0 80px;
  }

  .cc_jcmnugos_UYypBX2loG .ms-kl-izgara {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .cc_jcmnugos_UYypBX2loG .ms-kl-kart {
    height: 154px;
    padding: 16px;
    gap: 16px;
    border: 1px solid var(--ms-kenarlik-kucuk, rgb(221, 221, 221));
    border-radius: 16px;
  }

  .cc_jcmnugos_UYypBX2loG .ms-kl-gorsel-kap {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 12px;
  }

  .cc_jcmnugos_UYypBX2loG .ms-kl-metin {
    font-size: 18px;
    line-height: 28px;
  }

  .cc_jcmnugos_UYypBX2loG .ms-kl-ok {
    width: 30px;
    height: 30px;
  }
}