/*
 * Popüler lisanslar — ölçümler `data/mobil-anasayfa-lisanslar.md`
 * (mobil.pdf s1, y 1871.57–2332; 360pt artboard, 1pt = 1px).
 *
 *   başlık kutusu  157.09 × 31.01, zemin #EEEEEE, metin 14.70pt ExtraBold
 *                  kartın SOL kenarına hizalı (x 8.90), kart üstüne biniyor
 *   kart           x 8–351 (343), y 1902–2332 (430), zemin GEÇİŞLİ
 *                  #EFF1F4 (üst) → #FFFFFF (alt)
 *   ızgara         3 sütun × 3 satır, ilk ikon 1919.24 (kart üstünden 17)
 *   ikon           ~80 yüksek, çizimlerin oranı birbirini tutmuyor
 *   ad             10.32pt Gilroy-Regular #000  → 11 (ölçek tabanı)
 *   sayfa çubuğu   4 adet, 15.52 × 1.11, ara 6.43; aktif #6F6E6E, diğer #DADADA
 *   TÜMÜNÜ GÖR     124.37 × 17.13, zemin #EEEEEE, metin 8.69pt Bold
 *                  → punto 11, yükseklik 32 (dokunma hedefi ::before ile 44)
 */

.cc_jcmnugos_ulTy89VQTV .ms-lis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--ms-lis-must, 0);
  padding: 0 var(--ms-lis-kenar, 8px);
}

  /*
   * `display` AÇIKÇA yazılı: tema başlıklara çok geniş bir reset uyguluyor
   * (`button, h1..h6, input… { … display: unset … }`) ve `display` miras
   * alınmadığı için `unset` = başlangıç değeri = **inline**. Satır içi h2'nin
   * kutusu içeriğe daralıyor, `text-align: center` de hiçbir şey yapmıyor —
   * canlıda başlık 126px'lik kutuda sola yapışık çıktı.
   */
.cc_jcmnugos_ulTy89VQTV .ms-lis-baslik {
  /* kutu içeriğe daralmalı ama dikey ölçüleri tutmalı → inline-block */
  display: inline-block;
  position: relative;
  z-index: 1;
  /* kartın üst kenarına biniyor (tasarımda 0.58 — pratikte 1) */
  margin: 0 0 -1px;
  padding: 0 10px;
  border-radius: 8px 8px 0 0;
  background-color: var(--ms-lis-baslik-zemin, #eee);
  color: var(--ms-lis-baslik-renk, #000);
  font-size: 15px;
  font-weight: 800;
  line-height: 32px;
  white-space: nowrap;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-kart {
  align-self: stretch;
  padding: 17px 0 28px;
  border-radius: 0 var(--ms-lis-yaricap, 16px) var(--ms-lis-yaricap, 16px) var(--ms-lis-yaricap, 16px);
  background: var(--ms-lis-zemin, #f1f3f6);
  overflow: hidden;
}

/* Sayfalı şerit: her sayfa TAM genişlik, snap ile sayfa sayfa kayıyor. */
.cc_jcmnugos_ulTy89VQTV .ms-lis-serit {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-serit::-webkit-scrollbar {
  display: none;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-sayfa {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(var(--ms-lis-sutun, 3), minmax(0, 1fr));
  gap: 16px 8px;
  padding: 0 8px;
  scroll-snap-align: start;
}

/*
 * Çubuk şeridi kaydırma aracı: üstünde parmak gezdirilince şerit kayıyor.
 * `touch-action: none` ŞART — olmazsa tarayıcı hareketi sayfa kaydırması
 * sayıp pointermove olaylarını kesiyor ve sürükleme yarıda kalıyor.
 * Şerit yatay, sayfa dikey kaydığı için bu alanda dikey kaydırmayı da
 * kapatmak kullanıcıyı kilitlemiyor: alan 44px yüksek ve şeridin kendisi
 * hâlâ normal kayıyor.
 */
.cc_jcmnugos_ulTy89VQTV .ms-lis-noktalar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin-top: -2px;
  touch-action: none;
  cursor: pointer;
}

/*
 * Çubuk 16 × 2 — tasarımda 15.52 × 1.11. Kalınlık 2: 1.11 aygıt pikseline
 * oturmuyor (aynı karar kaydırmalı gridin barında da verildi).
 * Dokunma hedefi 44: çubuğun kendisi büyümüyor, görünmez katman ekleniyor.
 */
.cc_jcmnugos_ulTy89VQTV .ms-lis-nokta {
  position: relative;
  width: 16px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #dadada;
  cursor: pointer;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-nokta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-nokta--aktif {
  background-color: #6f6e6e;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-alt {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-tumu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  background-color: var(--ms-lis-buton-zemin, #eee);
  color: var(--ms-lis-buton-renk, #000);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.cc_jcmnugos_ulTy89VQTV .ms-lis-tumu::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

@media (min-width: 1024px) {
  .cc_jcmnugos_ulTy89VQTV .ms-lis {
    margin-top: var(--ms-lis-ust, 0);
  }
}