/*
 * Blog karuseli — canlı miniso.com.tr'den ölçüldü.
 * Kaynak brief'ler (bölüm dört genişlikte üç dosyaya dağılmış, index.tsx'te açıklandı):
 *   w360/w768  INDEX-11-05ae7c43.md   s453/s866 … s480/s883
 *   w1024      INDEX-13-9ba3d53c.md   s1397 … s1423
 *   w1440      INDEX-08-8632c153.md   s1668 … s1685
 *
 *                    w360            w768            w1024           w1440
 * kök               360×461.56      768×641.56      1024×459.69     1440×547.69
 * yatay boşluk      16              16              80              80
 * başlık satırı     328 tek sütun   736 tek sütun   130px 1fr 130px (864)
 * karusel           328×238         736×418         864×286         1280×374
 * slayt             156             360             204             308
 * görünen slayt     2               2               4               4
 * kart görseli      156×156         360×360         204×204         308×308
 *
 * Slayt genişliği ölçülerle birebir tutuyor:
 *   w360   (328 - 16) / 2 = 156     w1024  (864 - 48) / 4 = 204
 *   w768   (736 - 16) / 2 = 360     w1440  (1280 - 48) / 4 = 308
 *
 * Kırılım 1024 (temanın `lg`'si) — ürün listesiyle aynı. Kart başlığının
 * tipografisi 1280'de (`xl`) değişiyor, ızgarayla aynı kırılım değil.
 */

.cc_jcmnugos_oqMEGa6FHN .ms-blog {
  width: 100%;
  margin-top: var(--ms-blog-must, 0px);
}

/* justpx — ölçülen dış kenar boşluğu */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-govde {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 var(--ms-bosluk-kenar);
}

/*
 * fullWidth kapalıyken içerik ölçülen masaüstü genişliğinde (1280) sabitlenip
 * ortalanıyor. UYARI: canlı sitede bu bölüm her yerleşimde fullWidth=true, yani
 * kapalı hâli ÖLÇÜLEMEDİ — bu davranış çıkarım. Ölçüm gelirse güncellenmeli.
 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog--dar .ms-blog-govde {
  max-width: calc(1280px + 2 * var(--ms-bosluk-kenar-genis));
  margin: 0 auto;
}

/* ---- başlık satırı ---------------------------------------------------- */

/* s454/s867 — mobil/tablette tek sütun, yan buton yok */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-baslik-satiri {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: var(--ms-bosluk-9);
  overflow: hidden;
}

/*
 * s455/s868/s1399/s1670 — sarmalın kendi ölçülen tipografisi.
 * Canlıda başlığın görünümünü mağazanın RICH_TEXT'i içindeki <style> bloğu
 * belirliyor; buradaki değerler o blok olmadığında devreye giren taban.
 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-baslik {
  color: var(--ms-metin-2);
  font-size: 30px;
  line-height: 36px;
  text-align: center;
}

/*
 * Ham içerik (`ms-ham`) — mağazanın kendi HTML'i burada basılıyor.
 *
 * İşin BÜYÜK kısmı global.css'te: reset köprüsünün tipografi bölümü artık
 * `ms-ham` ağacını dışarıda bırakıyor, yani mağazanın `font-family` /
 * `line-height` bildirimleri devralma yoluyla doğal çalışıyor.
 *
 * Burada kalan tek iş, ikas Studio'nun KENDİ sıfırlamasını geri almak:
 *   button, h1..h6, input, select, textarea { display/font/line-height: unset }
 * Devralınmayan `display`'de `unset` = `initial` = **inline**, ve `unset`
 * devralma zincirini de kesiyor. Bu yüzden mağazanın başlıkları satır-içi
 * oluyor, satır kutusu yanlış yükseklik veriyor.
 *
 * Ölçülen etki (w1920): canlıda başlık bloğu 149.69px, bu kurallar olmadan
 * 122.5px. Üstelik mağazanın `.mn-popular-desk` kuralındaki `overflow:hidden`
 * ile birleşince 26px yazı 24px satıra sıkışıyor ve Ü'nün üstündeki iki nokta
 * kırpılıyordu — başlık ekranda "POPULER" diye okunuyordu.
 *
 * `line-height: 1.6` canlıdan geliyor: eski temanın `prose` kuralı
 * `.prose :where(h3){line-height:1.6}`, ölçülen h3 satırı 41.6px = 26 × 1.6.
 * Yalnızca h3 ölçüldü; diğer başlıklara da aynısı veriliyor (Tailwind
 * typography'nin h3 değeri) — başka başlık ölçülürse ayrıştırılmalı.
 *
 * ÖZGÜLLÜK: seçiciler `:where()` ile sıfırlanıyor, geriye yalnızca build'in
 * eklediği `.cc_<id>` kalıyor → (0,1,0). ikas'ın element kuralını (0,0,1)
 * yener; mağazanın `<style>` bloğu gövdeye basıldığından belge sırasında daha
 * sonradır, yani eşitlikte MAĞAZA kazanır — mobil başlıktaki
 * `@media(max-width:768px){.mn-popular-title{line-height:1.15}}` çalışsın diye
 * bu şart. Canlıdaki hiyerarşinin aynısı: oradaki kural da (0,1,0).
 */
.cc_jcmnugos_oqMEGa6FHN :where(.ms-ham) :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
  font-family: inherit;
  line-height: inherit;
}

.cc_jcmnugos_oqMEGa6FHN :where(.ms-ham) :where(h1, h2, h3, h4, h5, h6) {
  display: block;
  line-height: 1.6;
}

/* ---- "Tümünü Gör" butonu ---------------------------------------------- */

/*
 * s1406 (yan) / s480 (alt) — iki buton da aynı görünüyor, yalnızca konumları
 * ve hangi kırılımda görüneceği farklı. Yükseklik 46 = 10+24+10 + 2×1 kenarlık.
 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-tumu {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: var(--ms-bosluk-4) var(--ms-bosluk-8);
  border: 1px solid var(--ms-kirmizi);
  border-radius: var(--ms-yaricap-1);
  background-color: var(--ms-kirmizi);
  color: var(--ms-beyaz);
  font-size: var(--ms-fs-normal);
  line-height: var(--ms-satir);
  letter-spacing: 0.8px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition-timing-function: var(--ms-gecis);
  cursor: pointer;
}

/* lg altında yalnızca alttaki buton görünüyor (max-lg:hidden / mx-auto w-max) */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-tumu--yan {
  display: none;
}

.cc_jcmnugos_oqMEGa6FHN .ms-blog-tumu--alt {
  width: max-content;
  margin: 0 auto;
}

/* ---- karusel ----------------------------------------------------------- */

/* s466/s872/s1409/s1674 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-karusel {
  position: relative;
  width: 100%;
}

/*
 * s468/s874/s1411 — canlıda Swiper'ın transform'ladığı şerit. Burada aynı iş
 * yatay kaydırmayla yapılıyor: dokunmatikte tarayıcının kendi akıcılığı,
 * masaüstünde oklar. Kaydırma çubuğu gizli, canlıdaki .swiper gibi.
 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-serit {
  display: flex;
  gap: var(--ms-bosluk-7);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* slider bölümüyle aynı: yumuşak kaydırma CSS'te de tanımlı, ok tıklamaları
     tarayıcının kendi animasyonuyla ilerliyor */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_jcmnugos_oqMEGa6FHN .ms-blog-serit::-webkit-scrollbar {
  display: none;
}

/* s469/s875/s1412 — görünen slayt sayısı 2; aralık 16 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-slayt {
  display: flex;
  flex-shrink: 0;
  width: calc((100% - var(--ms-bosluk-7)) / 2);
  scroll-snap-align: start;
}

/* s470/s876/s1413 — kart: dikey akış, 10px boşluk */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-kart {
  display: flex;
  flex-direction: column;
  gap: var(--ms-bosluk-4);
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* s471/s877/s1414 — kare görsel kutusu (aspect prop'u, canlıda "1") */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-gorsel-kap {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  aspect-ratio: var(--ms-blog-oran, 1);
  overflow: hidden;
}

/* s473/s1416 — görsel kutuyu tamamen dolduruyor */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * s474/s475/s878/s1417 — 3 satır kırpma.
 * Ölçülen yükseklikler satır yüksekliğini doğruluyor: 24/48/72 → 16px/24px.
 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-kart-baslik {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--ms-fs-normal);
  line-height: var(--ms-satir);
}

/* ---- oklar ------------------------------------------------------------- */

/*
 * s476/s478 (mobil 28×40) — s1419/s1421 (lg+ 32×48).
 * Konum: şeridin dış kenarlarına yapışık, dikeyde ortalı. Arka planı yok,
 * ikon beyaz: canlıda oklar ilk/son kartın görselinin üzerine biniyor.
 */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 40px;
  padding: var(--ms-bosluk-3);
  border: 0;
  background-color: transparent;
  color: var(--ms-beyaz);
  cursor: pointer;
}

/* s1422 — uçtaki ok edilgen; ölçümde tek fark imleç, solma yok */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-ok:disabled {
  cursor: default;
}

.cc_jcmnugos_oqMEGa6FHN .ms-blog-ok--sol {
  left: 0;
}

.cc_jcmnugos_oqMEGa6FHN .ms-blog-ok--sag {
  right: 0;
}

/* s477/s479 — ikon 12×24; sol ok aynı çizimin 180° dönmüş hâli */
.cc_jcmnugos_oqMEGa6FHN .ms-blog-ok svg {
  display: block;
  width: 12px;
  height: var(--ms-satir);
}

.cc_jcmnugos_oqMEGa6FHN .ms-blog-ok--sol svg {
  transform: rotate(180deg);
}

/* ---- lg (1024) --------------------------------------------------------- */

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

  .cc_jcmnugos_oqMEGa6FHN .ms-blog-govde {
    padding: 0 var(--ms-bosluk-kenar-genis);
  }

  /* s1398/s1669 — 130px yan buton | başlık | 130px yedek sütun */
  .cc_jcmnugos_oqMEGa6FHN .ms-blog-baslik-satiri {
    grid-template-columns: 130px 1fr 130px;
  }

  /* s1399/s1670 — başlık açıkça 2. sütunda, buton kendiliğinden 3.'ye düşüyor */
  .cc_jcmnugos_oqMEGa6FHN .ms-blog-baslik {
    grid-column: 2;
  }

  .cc_jcmnugos_oqMEGa6FHN .ms-blog-tumu--yan {
    display: flex;
  }

  .cc_jcmnugos_oqMEGa6FHN .ms-blog-tumu--alt {
    display: none;
  }

  /* s1412/s1677 — görünen slayt 4 */
  .cc_jcmnugos_oqMEGa6FHN .ms-blog-slayt {
    width: calc((100% - 3 * var(--ms-bosluk-7)) / 4);
  }

  .cc_jcmnugos_oqMEGa6FHN .ms-blog-ok {
    width: var(--ms-bosluk-10);
    height: 48px;
  }

  .cc_jcmnugos_oqMEGa6FHN .ms-blog-ok svg {
    width: var(--ms-bosluk-7);
    height: var(--ms-bosluk-10);
  }
}

/* ---- xl (1280) --------------------------------------------------------- */

/*
 * s1682/s1683 — kart başlığı xl'de 18px/28px (ölçülen yükseklikler 28 ve 56).
 * Izgaranın kırılımı değil, yalnızca tipografi burada değişiyor.
 */
@media (min-width: 1280px) {
  .cc_jcmnugos_oqMEGa6FHN .ms-blog-kart-baslik {
    font-size: 18px;
    line-height: 28px;
  }
}