/*
 * Mobil alt sekme çubuğu — `tasarim/kabuk/s34.png` üzerinden ölçüldü
 * (4.8× render). Sayfa raster olduğu için köşe yarıçapı, gölge ve punto
 * değerleri TÜRETİLMİŞTİR; canlıdan ölçülmüş değil (`tasarim/README.md`).
 */

/*
 * z-index 98 — footer'ın ÜSTÜNDE olmak zorunda.
 *
 * 95'ti ve footer 97; yani sayfa sonuna gelince footer çubuğun üzerine
 * biniyordu. Footer'ın zemini `rgba(249,249,249,.9)`, yani %90 saydam —
 * çubuk altından soluk soluk görünüyordu ("footer üstüne gelince şeffaf
 * oluyor"). 98: footer'ın (97) üstünde, header'ın (99) altında.
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98;
}

/*
 * Bölümün kökü akışta çubuk kadar yer kaplıyor. Çubuk `fixed` olduğu için
 * kendisi yer kaplamaz ve sayfanın son 71 pikselini örterdi; footer'ın
 * ÜSTÜNDE çizildiğinden beri bu örtme görünür durumda.
 *
 * Bu yükseklik AYRI bir boşluk div'inde DEĞİL, bölümün kendi kökünde olmak
 * ZORUNDA: iki köklü (fragment) sürümde ikas'ın sarmalı ikinci kökü akıştan
 * düşürüyordu ve çubuk son akordeonu örtüyordu.
 */
/*
 * Sayfa altı payı BURADA. Bir tur footer'a taşınmıştı (sekme çubuğu ürün
 * detayda gizli ve orada pay hiç kalmıyordu, yapışkan sepet çubuğu
 * footer'ı örtüyordu) — ama o zaman ürün sayfasının altında 88px'lik
 * bomboş bir alan kalıyordu: marka "footerdan sonra hala kayıyor" dedi.
 *
 * Pay yeniden sekme çubuğuna bağlandı: yalnız çubuk çizilen sayfalarda
 * var, `ms-mobil-gizli` ile gizlenince kök de yok oluyor. Ürün detayda
 * pay yerine yapışkan sepet çubuğu FOOTER GÖRÜNÜNCE gizleniyor
 * (MinisoProductMobileBar).
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab-kok {
  display: block;
  height: 88px;
}

@media (min-width: 768px) {
  .cc_jcmnugos_0jncxTaoZP .ms-tab-kok {
    display: none;
  }
}

/* Masaüstünde yok — masaüstü tasarımı bu paketten etkilenmeyecek. */
@media (min-width: 768px) {
  .cc_jcmnugos_0jncxTaoZP .ms-tab {
    display: none;
  }
}

/*
 * ÖLÇÜ DÜZELTİLDİ — önceki değerler s34 artboard'ından alınmıştı ve yanlıştı.
 *
 * s34 376.44×93.11pt, yani 360 ölçeğinde DEĞİL; oradan okunan 78–79 ayrıca
 * çubuğun kendisi değil, GÖLGEYİ de içeren yerleştirme kutusuydu.
 *
 * Doğrusu s1'deki gerçek yerleşimden, bitmap PDF'ten çıkarılıp kendi piksel
 * uzayında ölçülerek alındı (sayfa zemini de beyaza yakın olduğu için
 * sayfadan ölçmek yanıltıyordu):
 *   yerleştirme kutusu  y 10446.78 → 10526.23  (79.45, gölge dahil)
 *   gölgenin iç kenarı  y 10455.34            (bitmapte px 40–41)
 *   ÇUBUK               10455.34 → 10526.23 = 70.99
 *   genişlik            361 — tam genişlik, içeri kaçık DEĞİL
 *   köşe eğrisi         y+5.07'de başlayıp y+18.59'da düzleşiyor → ~13.5
 *   içerik üstü         10464.89 → çubuk üstünden 9.55
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab-ic {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: 71px;
  /*
   * 11.1 — 9.55 öğe KUTUSUNUN üstüydü; kutunun içinde ikonun üstünde boşluk
   * var. Ölçülen ikon MÜREKKEBİ çubuk üstünden 13.68'de başlıyor; büyütecin
   * mürekkebi 21'lik kutunun ortasında (21−15.75)/2 = 2.6 içeride, yani kutu
   * 11.1'de başlamalı.
   */
  padding: 11.1px 8px 0;
  border-radius: 13.5px 13.5px 0 0;
  background-color: #ffffff;
  /* Gölge tasarımdan: bitmapte cubugun ustunde ~4.9pt yayiliyor, en koyu
     nokta 237/255 (yaklasik %7 siyah). 12px bulaniklik 13.84'luk bosluğun
     cogunu yiyip cubuk akordeona bitisikmis gibi gosteriyordu. */
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.07);
}

/*
 * EN DAR EKRAN — yan pay 8 → 4.
 *
 * 320'de beş etiketin toplamı 247, kaba 304 kalıyor; `space-around` 57'yi
 * beşe bölünce komşu aralığı 11.4 oluyor. "ARA" vuruş alanı için her yana
 * 11.5 büyümek zorunda (21 → 44), komşusu "SEPETİM" de 1 → ikisi 1.2px
 * çakışıyordu (ölçüldü: kontrol-mobil-tabbar, w320).
 *
 * Yan pay 4'e inince kap 312, aralık 13.0 → gereken 12.5 sığıyor. Görsel
 * etki yok denecek kadar az (uçlarda 4px), karşılığında beş sekmenin de
 * dokunma hedefi temiz ayrışıyor. 360 ve üstünde 8 aynen duruyor.
 */
@media (max-width: 359.98px) {
  .cc_jcmnugos_0jncxTaoZP .ms-tab-ic {
    padding-right: 4px;
    padding-left: 4px;
  }
}

/* ikas her COMPONENT_LIST çocuğunu iki sarmala sarıyor (DEVAM.md tuzak 4) —
   torun seçici kullanılmalı, `> *` gerçek çocuğa ulaşmaz. */
/*
 * Öğe `<a>` VEYA `<button>` olabiliyor: "Kategori" gezinmiyor, soldan açılan
 * menüyü açıyor ve bunun için düğme olmak zorunda (`<a>` olsaydı ikas Router
 * bütün bağlantı tıklamalarını window'da yakalayıp gezinirdi). Düğme
 * varsayılanları bu yüzden burada sıfırlanıyor — özellikle `font: inherit`:
 * `<button>` font-family'i DEVRALMAZ, tarayıcı Arial dayatır ve etiket
 * komşularından farklı çizilir.
 */
/*
 * `flex: 1 1 0` DEĞİL `0 1 auto`: eşit beşe bölünce her sütun 72 kalıyor ve
 * 11px'lik "ÇOK SATANLAR" (86) taşıp komşusuna giriyordu. İçeriğe göre
 * bölününce uzun etiket kendi yerini alıyor, kalan boşluğu şerit eşit
 * dağıtıyor (`justify-content: space-between` + yan pay). Ölçülen 6.6px'te
 * bu gerekmiyordu; ölçek büyüyünce düzen kuralı da değişti.
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab-ic .ms-tab-oge {
  display: flex;
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  /* 8.3 — ölçülen etiket mürekkebi çubuk üstünden 41.89'da; ikon kutusu
     11.1+21 = 32.1'de bitiyor, etiket kutusu ~40.4'te başlamalı. */
  gap: 8.3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #232731;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/*
 * VURUŞ ALANI — görsel kutuya DOKUNMADAN dokunma hedefini 44'e çıkarır.
 *
 * Öğenin görsel kutusu ikon 21 + ara 8.3 + etiket 14 = 43.3 yüksek ve
 * genişliği İÇERİĞİ kadar: "ARA" 21, "SEPETİM" 42, "ÇOK SATANLAR" 79.
 * Yani hem yükseklik 44'ün 1 piksel altındaydı hem de kısa etiketli üç
 * öğenin genişliği yarısı kadardı (denetle-cihaz, 6 genişlikte 5 bulgu).
 *
 * Kutuyu büyütmek DÜZENİ BOZAR: `flex: 1 1 0` ile eşit beşe bölmek bir tur
 * denendi, sütun 72'ye düşüyor ve "ÇOK SATANLAR" (86) komşusuna giriyordu —
 * bu yüzden sütunlar içeriğe göre bölünüyor (yukarıdaki nota bak). Standart
 * zaten kutuyu büyütmeyi yasaklıyor: görünmez `::before` katmanı
 * (data/mobil-standart.md).
 *
 * `space-around` her öğenin İKİ YANINA eşit boşluk koyuyor; katman o
 * boşluğun içine taşıyor, yani kimsenin olmayan yeri kullanıyor. Çakışma
 * yok: en dar öğe "ARA" her yana 11.5 büyüyor, en dar komşu aralığı (320'de
 * ~11.4, 375'te 22.3) ve komşuların çoğu zaten 44'ten geniş olduğu için
 * hiç büyümüyor.
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab-ic .ms-tab-oge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/*
 * İkon kutusu 21 — s1'deki öğe bitmap'lerinden, MÜREKKEPTEN çözüldü.
 * Ölçülen mürekkep ÷ SVG'nin mürekkep oranı:
 *   anasayfa 18.31 ÷ 0.833 = 21.97
 *   kategori 17.64 ÷ 0.833 = 21.17
 *   çok satanlar 16.61 ÷ 0.833 = 19.93
 * Üçü ~21'de buluşuyor. ARA (27.8) ve SEPETİM (39.1) aykırı: SEPETİM'in
 * mürekkebi rozeti de içeriyor, ARA'nın çizimi paketin büyütecinden farklı.
 * Önceki değer 24'tü, s34'ten türetilmişti (o artboard 360 ölçeğinde değil).
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab-ikon-kap {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 21px;
}

.cc_jcmnugos_0jncxTaoZP .ms-tab-ikon {
  width: auto;
  max-width: 24px;
  height: 21px;
  object-fit: contain;
}

/* Üretimde ikon `<img class="ms-tab-ikon">`; koşumda inline SVG basılıyor ve
   sınıfı olmadığı için kendi 24'ünde kalıyordu — koşum yanlış boy gösteriyordu. */
.cc_jcmnugos_0jncxTaoZP .ms-tab-ikon-kap svg {
  display: block;
  width: auto;
  height: 21px;
}

/* Sepet rozeti — tasarımda ikonun sağ üstünde kırmızı daire */
.cc_jcmnugos_0jncxTaoZP .ms-tab-rozet {
  display: inline-flex;
  position: absolute;
  top: -2px;
  right: -8.35px;
  align-items: center;
  justify-content: center;
  /*
   * 10.38 — SEPETİM öğesinin bitmap'inden ölçüldü (kırmızı piksellerin
   * kutusu 10.38×10.38). Önceki 16, s34'ten TÜRETİLMİŞTİ ve %54 büyüktü.
   * Konum da oradan: rozet çantanın sağ üstüne, kutusunun ~8.4 sağına taşıyor.
   */
  /*
   * ÖLÇEK DÜZELTMESİ (data/mobil-olcek-plani.md): rozet 6.6 → 10, kutu
   * 10.38 → 15. Tasarımdaki değer okunmuyordu; rozet sekme çubuğunun en
   * küçük yazısı olduğu için skalanın altına, 10'a çekildi.
   */
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background-color: #e60012;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

/*
 * ÖLÇÜLEN 6.6px — beş etiketin GENİŞLİĞİNDEN çözülmüştü (punto.mjs):
 *   ANASAYFA 34.44→7.0 · ARA 13.71→7.0 · SEPETİM 25.31→6.6
 *   KATEGORİ 30.19→6.3 · ÇOK SATANLAR 43.17→5.5 · medyan 6.6
 *
 * UYGULANAN 11px. Tasarım yanlış ölçekte çizilmiş, marka büyütülmesini
 * istedi (data/mobil-olcek-plani.md). Faktör ×2 olsa 13.2 verirdi ama
 * sekme etiketinde platform normu faktörü eziyor: iOS 10pt, Android 12sp.
 * 11 ikisinin ortası ve canlı mobilin kullandığı en küçük punto.
 *
 * Etiket TEK SATIR. 6.6px'te her etiket eşit genişlikteki sütuna sığıyordu;
 * 11px'te "ÇOK SATANLAR" 72'lik sütuna sığmıyor. Çözüm sarmak DEĞİL
 * (sekme çubuğunda iki satır etiket olmaz) — sütunlar eşit genişlik
 * olmaktan çıkarıldı, aşağıda `.ms-tab-oge` içeriğe göre bölünüyor.
 */
.cc_jcmnugos_0jncxTaoZP .ms-tab-etiket {
  color: #131a27;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}