/*
 * Ana sayfa slider'ı — ölçüler canlı miniso.com.tr'den.
 * Kaynak: cikti/miniso.com.tr/brief/INDEX-01-a0f7c036.md
 *
 * Ölçülen oranlar:  w360 → 360×360 (1:1)
 *                   w768 → 768×230        (3.34:1)
 *                   w1024 → 1024×306.66   (3.34:1)
 *                   w1440 → 1440×431.25   (3.34:1)
 * Carousel:         tek slayt, aralık 4px, döngü, geçiş 300ms, oynatma 6986ms
 */

.cc_jcmnugos_iiBOmWH0Wd .ms-slider {
  width: 100%;
  margin-top: var(--ms-slider-ust-mobil, 0);
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-govde {
  position: relative;
  width: 100%;
}

/* Şerit: yatay kaydırma + snap. Swiper'ın yaptığı işi tarayıcının kendi
   kaydırma motoruna bırakıyoruz — dokunmatikte daha akıcı, JS'siz de çalışır. */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-serit {
  display: flex;
  gap: 4px;                       /* ölçülen spaceBetween */
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-serit::-webkit-scrollbar {
  display: none;
}

/* ikas her child'ı iki sarmalayıcıya sarıyor ve ikisi de `display: contents`:
     .ms-slider-serit > [renderer] > .cc_<id> > a.ms-slayt
   `display: contents` düğümü DÜZEN ağacından kaldırır (slayt doğrudan flex
   öğesi olur) ama CSS SEÇİCİLERİ hâlâ DOM ağacına bakar. Bu yüzden
   `.ms-slider-serit > *` gerçek slayta hiç ulaşmıyordu; torun seçici şart. */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-serit .ms-slayt {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-masaustu, .cc_jcmnugos_iiBOmWH0Wd .ms-slider-mobil {
  display: contents;
}

/* mobilde masaüstü slaytlarını gizle */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-masaustu .ms-slayt {
  display: none;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slayt {
  display: block;
  width: 100%;
  text-decoration: none;
}

/*
 * Oran: slaytın kendi "Oran" alanı varsa o, yoksa ölçülen varsayılan.
 * Değer `--ms-slayt-oran` değişkeninden geliyor (MinisoSlide inline
 * `aspect-ratio` YAZMIYOR — yazsaydı kırılım kuralları ezilirdi).
 */
.cc_jcmnugos_iiBOmWH0Wd .ms-slayt-ic {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ms-slayt-oran, 1 / 1);
  overflow: hidden;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slayt-medya {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slayt-gorsel, .cc_jcmnugos_iiBOmWH0Wd .ms-slayt-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* metin katmanı görselin üstünde; dikey konumu slaytın `position` prop'undan */
.cc_jcmnugos_iiBOmWH0Wd .ms-slayt-metin {
  display: flex;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 20;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 0 var(--ms-bosluk-kenar);
  text-align: center;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slayt-baslik {
  color: var(--ms-beyaz);
  font-size: 24px;
  font-weight: 700;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slayt-aciklama {
  color: var(--ms-beyaz);
  font-size: var(--ms-fs-normal);
}

/* Ok butonları — ölçülen değerler (s1545 / s1546 / s90):
     44×44, min-width 44, tam yuvarlak (r1)
     arka plan rgba(0,0,0,0.2), ikon beyaz 24×24
     sol/sağ kenardan 16px, dikey ortalı (top 50% + translateY(-22px))
     üst/alt padding 6px
   HER ZAMAN görünür — hover'a bağlı değil. (Swiper'ın navigation modülü
   kapalı; bunlar temanın kendi butonları, o yüzden ölçümde "navigation:false"
   görünmesine aldanmamak gerekiyor.) */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-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_iiBOmWH0Wd .ms-slider-ok svg {
  display: block;
  width: var(--ms-bosluk-9);
  height: var(--ms-bosluk-9);
  color: var(--ms-beyaz);
}

/* Mobil tasarımın geniş açılı chevron'u masaüstünde çizilmiyor */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok .ms-ok-chevron {
  display: none;
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok--sol {
  left: var(--ms-bosluk-7);
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok--sag {
  right: var(--ms-bosluk-7);
}

/* sağ ok: aynı çizimin 180° döndürülmüş hali (ölçümde i9 = i8 + rotate-180) */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok--sag svg {
  transform: rotate(180deg);
}

/* Gösterge — ölçülen değerler (s1542 / s1543 / s1544):
   konteyner  absolute, sağ/sol 0, bottom 10px, yükseklik 4px, padding 0 10px
   çubuk      yükseklik 4px, KÖŞELİ (yarıçap yok), aralarında 4px+4px margin
              pasif rgba(255,255,255,.4) · aktif rgb(227,5,27)
              geçiş 0.15s
   Nokta değil çubuk: masaüstünde 20 çubuk şeridi baştan sona dolduruyor
   (ölçülen 63×4), mobilde 9×4. Genişliği `flex: 1` ile paylaştırıyoruz;
   böylece slayt sayısı değişince de doğru bölünür. */
.cc_jcmnugos_iiBOmWH0Wd .ms-slider-noktalar {
  display: flex;
  position: absolute;
  right: 0;
  bottom: var(--ms-bosluk-4);
  left: 0;
  z-index: 10;
  justify-content: center;
  box-sizing: border-box;
  height: var(--ms-bosluk-1);
  padding: 0 var(--ms-bosluk-4);
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-nokta {
  flex: 1;
  height: var(--ms-bosluk-1);
  margin: 0 var(--ms-bosluk-1);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.15s var(--ms-gecis);
}

.cc_jcmnugos_iiBOmWH0Wd .ms-slider-nokta--aktif {
  background-color: var(--ms-kirmizi-marka);
}

/* ---------------------------------------------------------------- masaüstü */
@media (min-width: 768px) {
  .cc_jcmnugos_iiBOmWH0Wd .ms-slider {
    margin-top: var(--ms-slider-ust, 0);
  }

  /* ölçülen oran: 1440×431.25 → 3.34:1 (slaytın kendi oranı varsa o geçerli) */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slayt-ic {
    aspect-ratio: var(--ms-slayt-oran, 1440 / 431.25);
  }

  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-masaustu .ms-slayt {
    display: block;
  }

  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-mobil .ms-slayt {
    display: none;
  }

  .cc_jcmnugos_iiBOmWH0Wd .ms-slayt-baslik {
    font-size: 40px;
  }
}

/* NOT: `wrap` prop'u için kenar boşluğu YAZILMADI — ölçümde slider kökü
   1440px, yani tam genişlik ve padding'siz. Eski temada bu prop başka bir
   şeyi kontrol ediyor olmalı; görsel karşılığı bulunana kadar boş bırakıldı. */

/* ==========================================================================
   MOBİL TASARIM  (max 767.98px)
   ========================================================================== */

/*
 * Tasarım paketinden ölçüldü: `data/mobil-anasayfa-slider.md`
 * (mobil.pdf s1, y 85.67–187.92). Kurallar burada TOPLU duruyor; yukarıdaki
 * temel kurallar canlı masaüstüne karşı 0 farkla doğrulanmıştı, kurcalanmadı
 * — mobil header'da da aynı yol izlenmişti.
 *
 * Canlıdan dört fark var, dördü de tasarımın kendi kararı:
 *   1. Afiş kare değil şerit (1/1 → 3.387) — masaüstündeki afişin aynısı
 *   2. Kart iki yandan 8 içeride ve köşeleri 12 yuvarlak
 *   3. Ok 44'lük koyu daire değil, Ø25.5 BEYAZ daire; yarısı kartın dışında
 *   4. Sayfalama çubukları yok
 */
/*
 * KIRILIM 768, 1024 DEĞİL. Bu bileşenin masaüstü bloğu `min-width: 768px`
 * ile başlıyor (canlıda w768 zaten 3.34:1 geniş afiş). Mobil header'daki
 * gibi 1023.98 yazılırsa 768–1023 aralığında MASAÜSTÜ slider'a mobil
 * kart/ok stilleri uygulanıyor ve canlıya karşı 0 farkla doğrulanmış düzen
 * bozuluyor — koşumda bu aralıkta mobil slayt hiç çizilmediği için fark
 * "kart YOK" diye ortaya çıktı.
 */
@media (max-width: 767.98px) {
  /*
   * Yan boşluk gövdeye veriliyor, şeride değil: oklar `position: absolute`
   * ve konumları gövdenin PADDING kutusundan ölçülüyor — yani `left: 0`
   * doğrudan kartın kenarı oluyor, ayrıca bir düzeltme gerekmiyor.
   */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-govde {
    padding: 0 8px;
  }

  /*
   * Ölçülen oran 346.33 / 102.25; masaüstündeki 1440/431.25 ile aynı afiş.
   * Burada `--ms-slayt-oran` BİLEREK kullanılmıyor: tasarım mobil hero için
   * tek bir oran tanımlıyor, slayt bazlı oran mobilde geçersiz. Mağazadaki
   * 20 mobil slaytın hepsinde bu alan `1/1` yazılı ve tek tek düzeltilmesi
   * gerekmesin diye kırılım kararı kodda veriliyor.
   */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slayt-ic {
    aspect-ratio: 346.33 / 102.25;
    border-radius: 12px;
  }

  /*
   * Ok: beyaz daire, dikeyde ortalı. Merkezi kart kenarının 1.7 DIŞINDA
   * (ölçüm iki okta da aynı), yani dairenin 11'i kartın üstüne düşüyor.
   * Dışarıda kalan yarısı sayfa beyazına karışıyor — canlıda da öyle görünür.
   */
  /*
   * VURUŞ ALANI: daire 25.5 kalıyor (tasarım), tıklama alanı 44'e çıkıyor.
   * Standart gereği (data/mobil-standart.md) görsel kutu büyütülmüyor,
   * görünmez katman ekleniyor.
   */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok {
    width: 25.5px;
    height: 25.5px;
    min-width: 25.5px;
    padding: 0;
    background-color: var(--ms-beyaz, #fff);
    color: #565655;
    transform: translateY(-12.75px);
  }

  /*
   * Chevron dairenin ORTASINDA DEĞİL, sağ/sol yarısında: sivri ucu tam kartın
   * kenarına oturuyor. Ortalanırsa 5.25 kayıyor — ölçüm bunu iki okta da
   * aynı gösterdiği için bilinçli kabul edildi.
   */
  /*
   * `left` mutlak konumlu öğede KENARLIK kutusundan değil, konumlanmış
   * atanın PADDING KUTUSUNDAN ölçülüyor — padding alanı o kutunun İÇİNDE.
   * Yani `left: 0` gövdenin 8px'lik yan boşluğunun DIŞ kenarı, kartın
   * kenarı değil. Bu karıştırılınca ok 8px fazla dışarı kaçıyordu
   * (koşumda "kartta kalan" 11 yerine 3 çıktı).
   * Kart kenarı x=8, daire merkezi onun 1.7 dışında → 8 − 1.7 − 12.75.
   */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok--sol {
    left: -6.45px;
    justify-content: flex-end;
    padding-right: 4px;
  }

  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok--sag {
    right: -6.45px;
    justify-content: flex-start;
    padding-left: 4px;
  }

  /* Mobilde çizim değişiyor: heroicons chevron gizleniyor, ölçülen geniş
     açılı olan açılıyor. */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok svg:not(.ms-ok-chevron) {
    display: none;
  }

  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-ok .ms-ok-chevron {
    display: block;
    width: 7px;
    height: 8.17px;
    color: #565655;
  }

  /* Tasarımda sayfalama çizilmemiş */
  .cc_jcmnugos_iiBOmWH0Wd .ms-slider-noktalar {
    display: none;
  }
}