/*
 * Afiş ızgarası — ana sayfadaki yuvarlak kategori şeridi.
 * Tüm ölçüler canlı miniso.com.tr'den: brief/INDEX-02-8632c153.md
 *
 *              w1440                      w360
 * kök          1440×166.33                360×156.66
 * justpx       padding 0 80px  → 1280     padding 0 16px → 328
 * iç           padding 0 24px  → 1232     padding 0 16px → 296
 * öğe          84.33×142.33, sağ 20px     74.66×108.66, sağ 36px
 * görsel       84.33 kare, radius 288px   74.66 kare
 * etiket       48px, üst 10px, gap 6px    24px, üst 10px, gap 2px
 *
 * Öğe genişliği sabit yazılmadı: (100% - (n-1)·boşluk) / n formülüyle sütun
 * sayısından hesaplanıyor. 12 sütun ve 20px boşlukla 1232px şeritte tam
 * 84.33 çıkıyor — ölçülen değerle birebir aynı, ama sütun sayısı editörden
 * değişince de doğru kalıyor.
 */

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara {
  width: 100%;
  margin-top: var(--ms-izgara-ust-mobil, 20px);
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* justpx — ölçülen dış kenar boşluğu */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-govde {
  position: relative;
  box-sizing: border-box;
  /* yerleşimden gelirse o, yoksa temanın kenar boşluğu (bkz. index.tsx) */
  padding: var(--ms-izgara-pad-mobil, 0 var(--ms-bosluk-kenar));
}

/* Başlık sarmalı — canlıdaki `.wrapper !max-w-[1000px]`:
   ortalı, en fazla 1000px, yatay boşluk 16px (1024'te 80px).
   Izgara bu sarmalın DIŞINDA, tam genişlikte duruyor. */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-baslik-sarmal {
  width: 100%;
  max-width: var(--ms-izgara-baslik-en, 1000px);
  margin: 0 auto;
  padding: 0 var(--ms-bosluk-kenar);
  box-sizing: border-box;
}

/* Ölçüldü: 840×36 kutu, alt boşluk 24, ortalı.
   Tipografi `text-3xl font-medium` → 30px / 500 / satır 36. */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-baslik-alani {
  display: flex;
  position: relative;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--ms-bosluk-9);
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara--ortali .ms-izgara-baslik-alani {
  text-align: center;
}

/* Başlık metni tipografiyi sarmaldan devralır — mağaza kendi HTML'inde
   renk/kalınlık veriyor (ör. <b> ve inline color), o yüzden burada
   sabitlenmiyor. */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-baslik {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-aciklama {
  color: var(--ms-metin-gri-orta);
  font-size: var(--ms-fs-orta);
}

/* iç kapsayıcı — ölçülen ikinci kenar boşluğu */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-kapsayici {
  position: relative;
  box-sizing: border-box;
  padding: 0 var(--ms-bosluk-kenar);
}

/* NOT: `full` prop'u canlıda kenar boşluğunu KALDIRMIYOR. Üç yerleşimde de
   full=true ama üçünde de dış boşluk 80px duruyor (1920 → 1760). Önceden
   burada padding sıfırlanıyordu; yuvarlak şeride full=true yazınca şerit
   kenara taşıyordu. Kural kaldırıldı — iç boşluğu artık mod belirliyor. */

/* Kaydırmasız kullanım GERÇEK IZGARA. Canlıda "Kategoriden Alışverişe
   Başlayın" ve "Karakterine Göre" blokları CSS grid; yatay kaydırma yok.
   Ölçüm (1920, dış boşluk sonrası 1760):
     6  → 6 sütun × 273.33, gap 24, iç boşluk YOK
     10 → 8 sütun × 209.50, gap 12, iç boşluk YOK
   Şerit modunda ise iç boşluk var (mobil 16, masaüstü 24) — yuvarlak
   kategori şeridinde ölçüldü: 1760 → 1712. */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara:not(.ms-izgara--kaydirmali) .ms-izgara-kapsayici {
  padding: 0;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara:not(.ms-izgara--kaydirmali) .ms-izgara-serit {
  display: grid;
  grid-template-columns: repeat(var(--ms-izgara-sutun-mobil, 3), minmax(0, 1fr));
  overflow-x: visible;
  scroll-snap-type: none;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara:not(.ms-izgara--kaydirmali) .ms-izgara-serit .ms-afis {
  width: auto;
}

/* Şerit. Ölçümde Swiper var ama davranışı tek satır yatay kaydırma;
   scroll-snap ile aynısını bağımlılıksız veriyoruz. */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-serit {
  display: flex;
  gap: var(--ms-izgara-bosluk-mobil);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-serit::-webkit-scrollbar {
  display: none;
}

/* ikas her child'ı display:contents sarmalayıcılara sarıyor; seçici
   doğrudan çocuğa değil, gerçek öğeye bakmalı (slider'da bu tuzağa düşülmüştü) */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-serit .ms-afis {
  flex: 0 0 auto;
  width: calc(
    (100% - (var(--ms-izgara-sutun-mobil) - 1) * var(--ms-izgara-bosluk-mobil))
      / var(--ms-izgara-sutun-mobil)
  );
  scroll-snap-align: start;
}

/* --- afiş (components/MinisoBanner) --- */

.cc_jcmnugos_Mrp9LVXLTs .ms-afis {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
}

/* görsel alanı — yarıçap yerleşimden gelir: yuvarlak şeritte 288px,
   ızgaralarda 0. Yedek 0, çünkü 288 yedeği "kare" durumunu bozuyordu. */
.cc_jcmnugos_Mrp9LVXLTs .ms-afis-gorsel-alan {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ms-afis-oran, 1 / 1);
  border-radius: var(--ms-izgara-yaricap, 0);
  overflow: hidden;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-afis-medya {
  display: block;
  position: absolute;
  inset: 0;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-afis-gorsel, .cc_jcmnugos_Mrp9LVXLTs .ms-afis-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* etiket: ölçülen üst boşluk 10px, dikey ortalı, metin ortalı */
.cc_jcmnugos_Mrp9LVXLTs .ms-afis-etiket {
  display: flex;
  z-index: 50;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ms-bosluk-7);
  width: 100%;
  margin-top: var(--ms-bosluk-4);
  text-align: center;
}

/* Etiket tipografisi ölçüldü — hem yuvarlak şeritte hem ızgaralarda aynı:
   16px / 400 / satır 24. (Önce 14px yazılmıştı.) */
.cc_jcmnugos_Mrp9LVXLTs .ms-afis-baslik, .cc_jcmnugos_Mrp9LVXLTs .ms-afis-aciklama, .cc_jcmnugos_Mrp9LVXLTs .ms-afis-buton {
  color: var(--ms-metin);
  font-size: var(--ms-fs-normal);
  line-height: var(--ms-satir);
}

/* ok butonları — slider'daki ölçülen stilin aynısı */
.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-ok {
  display: flex;
  position: absolute;
  top: 50%;
  z-index: 20;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: var(--ms-bosluk-2) 0;
  border: 0;
  border-radius: var(--ms-yaricap-tam);
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--ms-beyaz);
  transform: translateY(-22px);
  cursor: pointer;
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-ok svg {
  display: block;
  width: var(--ms-bosluk-9);
  height: var(--ms-bosluk-9);
  color: var(--ms-beyaz);
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-ok--sol {
  left: var(--ms-bosluk-1);
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-ok--sag {
  right: var(--ms-bosluk-1);
}

.cc_jcmnugos_Mrp9LVXLTs .ms-izgara-ok--sag svg {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------- masaüstü */
@media (min-width: 1024px) {
  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara {
    margin-top: var(--ms-izgara-ust, 20px);
  }

  /* ölçülen: 1440 → 1280 (80px) → 1232 (24px) */
  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara-govde, .cc_jcmnugos_Mrp9LVXLTs .ms-izgara-baslik-sarmal {
    padding: var(--ms-izgara-pad, 0 var(--ms-bosluk-kenar-genis));
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara-kapsayici {
    padding: 0 var(--ms-bosluk-9);
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara-serit {
    gap: var(--ms-izgara-bosluk);
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara-serit .ms-afis {
    width: calc(
      (100% - (var(--ms-izgara-sutun) - 1) * var(--ms-izgara-bosluk))
        / var(--ms-izgara-sutun)
    );
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara:not(.ms-izgara--kaydirmali) .ms-izgara-serit {
    grid-template-columns: repeat(var(--ms-izgara-sutun, 12), minmax(0, 1fr));
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara:not(.ms-izgara--kaydirmali) .ms-izgara-serit .ms-afis {
    width: auto;
  }

  /* masaüstünde öğenin kendi oranı (aspect) geçerli */
  .cc_jcmnugos_Mrp9LVXLTs .ms-afis-gorsel-alan {
    aspect-ratio: var(--ms-afis-oran-web, var(--ms-afis-oran, 1 / 1));
  }

  /* etiket ölçülen: 48px yükseklik, 6px gap */
  .cc_jcmnugos_Mrp9LVXLTs .ms-afis-etiket {
    gap: var(--ms-bosluk-2);
  }
}

/* ==========================================================================
   MOBİL TASARIM — yuvarlak kategori şeridi (max 1023.98px)
   ========================================================================== */

/*
 * Tasarımdan ölçüldü: `data/mobil-anasayfa-kategori-seridi.md`
 * (mobil.pdf s1, y 195.5–266; şerit tek raster, ölçüler pikselden).
 *
 * Kapsam `--kaydirmali` ile SINIRLI. Bu bileşen ana sayfada üç kez geçiyor:
 * yuvarlak kategori şeridi (kaydırmalı) ve iki afiş bloğu (ızgara). Etiket
 * 6.5px yalnız 41.8'lik dairelerin altında anlamlı; afiş bloklarına da
 * uygulansaydı oradaki başlıklar okunmaz hâle gelirdi.
 *
 * Sütun sayısı ve aralık PROP: mobileCols 7, mobileGap 8 — yerleşimde yazılı.
 * Daire genişliği oradan türüyor: (360 − 2×10 − 6×8) / 7 = 41.71 (ölçülen 41.8).
 */
@media (max-width: 1023.98px) {
  /*
   * Yan boşluk 10 (ölçülen sol 10.12, sağ 10.62) — varsayılan 32'ydi.
   * 32 İKİ katmandan geliyor: `-govde` ve `-kapsayici` ikisi de
   * `--ms-bosluk-kenar` (16) yazıyor. Yalnız kapsayıcıyı 10'a çekince
   * toplam 26 kalıyordu; ikisi birden ele alınmalı.
   */
  /*
   * Slider ile arası 8 — tasarımda slider 187.92'de bitiyor, şerit 195.5'te
   * başlıyor (7.58). Bileşenin varsayılanı 20'ydi ve mobilde afiş ile
   * daireler arasında tasarımın iki buçuk katı boşluk kalıyordu.
   * Değişken yine devrede: editörden ayarlanırsa o kazanır.
   */
  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali {
    margin-top: var(--ms-izgara-ust-mobil, 8px);
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-izgara-govde {
    padding: 0;
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-izgara-kapsayici {
    padding: 0 10px;
  }

  /*
   * Etiket: 6.5px / 9.8, ağırlık 700, renk #303030. Punto mürekkep
   * genişliğinden çözüldü (`punto-murekkep.mjs`), yedi etiketin altısı
   * 6.45–6.57 aralığında çıktı — medyan 6.5. Ağırlık ölçülen mürekkep
   * yüksekliğiyle 700'de örtüşüyor (600'de 0.3 sapıyor).
   *
   * Kural torunlara da veriliyor: etiket RICH_TEXT, mağaza metni <p>/<span>
   * içinde gelebiliyor ve global köprü her torun düğüme line-height yazıyor.
   */
  /*
   * OK YOK. Tasarımda şeridin üstünde ok çizilmemiş; müşteri de mobilde
   * istemedi — parmakla kaydırılıyor. Yalnızca MOBİLDE kapalı: masaüstünde
   * ok canlıdan ölçülmüş ve 0 farkla doğrulanmış durumda, oraya dokunulmadı.
   *
   * `sliderButtons` prop'u da kapatılabilirdi ama o bileşenin ÜÇ yerleşimini
   * birden değil, yalnız bunu etkilerdi — yine de masaüstünü de söndürürdü.
   * Kırılıma bağlı olan şey kırılımda çözülüyor.
   */
  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-izgara-ok {
    display: none;
  }

  /*
   * ÖĞE GENİŞLİĞİ SÜTUN SAYISINDAN DEĞİL, OKUNABİLİRLİKTEN türüyor.
   *
   * Önce `mobileCols: 7` prop'u genişliği ekran genişliğine bölüyordu:
   * 360'ta daire 41.7 çıkıyordu. İki şey birden bozuluyordu —
   *   - etiket 6.5px'e sıkışıyordu (standardın tabanı 11)
   *   - daire 41.7, dokunma hedefi 44'ün altında
   * ve 320'lik telefonda daha da küçülüyordu.
   *
   * 76 nereden: en uzun BÖLÜNEMEZ kategori adı "Atıştırmalıklar" 11px
   * Gilroy 700'de 73.4 ölçüldü. Kutu bundan darsa kelime ortadan bölünüyor
   * ("Atıştırmalıkl / ar"). 76 = 73.4 + pay, 4'ün katı.
   *
   * Sonuç sabit: 320'de 3, 360'ta 4, 430'da 5 daire + sonraki sızıyor.
   * Yani sayı ekrana göre değişiyor, DAİRE değişmiyor — "hangi cihazdan
   * girilirse girilsin düzgün" kuralı bunu istiyor (data/mobil-standart.md).
   *
   * Markanın yazılı isteği "ilk görünümde 7 adet"ti; 7 ile okunur etiket
   * aynı anda mümkün değil (aritmetik yukarıda). Karar markayla alındı,
   * gerekçe MARKAYA-NOTLAR.md'de.
   */
  /*
   * KUTU 59 — "ilk görünümde 5 daire" kararı (marka, 2026-08-18).
   *
   * Nereden: 360'ta yan boşluk 10, ara 8. Beş kutu + dört ara 327 ediyor,
   * geriye 13 kalıyor: bir ara (8) + 5 SIZMA. Yani beş daire tam giriyor ve
   * altıncısı ucundan görünüyor — şeridin kaydırıldığı belli oluyor.
   *
   * Neden sabit px, neden yüzde değil: yüzde yazınca 360'ta tam 5 sütun
   * çıkıyor ama sızma 0 kalıyor, şerit durağan bir sıra gibi duruyor.
   * Sabit kutuda geniş telefon daha ÇOK daire gösteriyor (430'da 6),
   * daire küçülmüyor.
   *
   * 58 denendi: sızma 10'a çıkıyor ama "Peluş Oyuncaklar" da kırpılıyor.
   * 59'da kırpılan etiket sayısı 4'lü düzendekiyle aynı: 21 adın 3'ü.
   *
   * Dokunma hedefi: daire 59, 44 kuralının üstünde.
   */
  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-izgara-serit .ms-afis {
    width: 59px;
  }

  /*
   * Tablet (600–1024): 59'luk daire bu genişlikte iğne başı gibi kalıyor
   * ve şerit seyrekleşiyor. Tasarım telefon tasarımı; bu aralık için
   * kutu 88'e çıkıyor — 768'de on daire, hâlâ kaydırmalı.
   */
  @media (min-width: 600px) {
    .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-izgara-serit .ms-afis {
      width: 88px;
    }
  }


  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-afis-etiket {
    /* İki satır sabit yer: adı tek satır olan daire ile iki satır olan
       yan yana duruyor, alt kenarları aynı hizada kalmalı. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 28px;
    margin-top: 5px;
    gap: 0;
    overflow: hidden;
    /*
     * Kutuya sığmayan tek kelime ALT SATIRA insin, ortadan kesilmesin.
     * "Atıştırmalıklar" 11px'te 73.4 ve 59'luk kutuya sığmıyor; bu kural
     * olmadan "Atıştırmalıkl" diye kırpılıyordu.
     *
     * `hyphens` tek başına yetmiyor — tarayıcıda Türkçe heceleme sözlüğü
     * yoksa hiçbir şey yapmıyor (koşumda görüldü). Yine de duruyor:
     * sözlüğü olan cihazda tire ile böler, olmayanda break-word devreye
     * girer.
     */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Etiket RICH_TEXT: mağaza metni <p>/<span> içinde gelebiliyor.
     Kırpmanın çalışması için torunlar satır içi olmalı. */
  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-afis-etiket > * {
    display: inline;
  }

  .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-afis-etiket, .cc_jcmnugos_Mrp9LVXLTs .ms-izgara--kaydirmali .ms-afis-etiket * {
    color: #303030;
    /*
     * 11 / 14 — ölçekteki en küçük punto. Tasarımda 6.5 / 9.8 ölçüldü ve
     * bir süre öyle durdu; "7 daire" kısıtı yüzünden ölçek düzeltmesinin
     * dışında bırakılmıştı. O kısıt kalkınca punto tabana çıktı.
     *
     * Ağırlık 700 ve renk #303030 TASARIMDAN, değişmedi.
     */
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
  }
}