/* Imported from: ../../paylasilan/hesap-menu.css */
/*
 * HESAP MENÜ BARI — navbar altındaki açılır sayfa seçici.
 *
 * İki bölüm kullanıyor (Favorilerim, Adreslerim) ve markup'ları ortak
 * (`src/sub-components/MinisoHesapMenu`), o yüzden kural da tek dosyada.
 * `@import` ile her iki bölümün `styles.css`ine giriyor: derlemede satır
 * satır kopyalanıp bölümün kendi kapsamına (`.cc_<id>`) yazılıyor.
 *
 * NEDEN `global.css` DEĞİL: global dosya yalnızca YAYINla gidiyor; editör
 * önizlemesinde bar biçimsiz görünürdü. Bölüm CSS'i `import_section` ile
 * gidiyor (bkz. `ikas-build-import-tuzagi` notu).
 *
 * Denetim: `denetle-mobil.mjs` bu klasörü de tarıyor; mobil değerler
 * `denetle-mobil: baslat/bitir` işaretleri arasında.
 *
 * ÖLÇÜ: kapalı kutu tasarımdan (s26 Favorilerim, s28 Adreslerim) —
 * 48 yüksek (ölçülen 35.7–40), 16 yan dolgu, kenarlık #F3F3F3, yarıçap 12,
 * punto 14/500 (ölçülen 10.9–13.3). AÇIK panel tasarımda YOK, türetildi:
 * aynı kart dili, satır 48 (dokunma hedefi). Ayrıntı `data/mobil-hesap-menu.md`.
 */

/* denetle-mobil: baslat */
.cc_jcmnugos_7c318IoPUL .ms-hsm {
  position: relative;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-kutu {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* ölçülen 40 ↔ uygulanan 48 (standart liste satırı / dokunma hedefi) */
  height: 48px;
  padding: 0 16px;
  border: 1px solid #f3f3f3;
  border-radius: 12px;
  background: #fff;
  color: #202532;
  /* ölçülen: "Favori Ürünler" 10.9px ↔ uygulanan 14 */
  font: inherit;
  /* ölçülen: "Adreslerim" 13.3px / orta ağırlık ↔ uygulanan 14/500 */
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-etiket {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-ikon, .cc_jcmnugos_7c318IoPUL .ms-hsm-ok {
  display: inline-flex;
  flex: none;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-ikon svg, .cc_jcmnugos_7c318IoPUL .ms-hsm-ok svg {
  width: 16px; /* ölçülen 12 ↔ uygulanan 16 */
  height: 16px;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-ok {
  transition: transform 0.18s var(--ms-gecis);
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-ok--acik {
  transform: rotate(180deg);
}

/* Panel akışı ittirmiyor: altındaki başlık ve ızgara yerinden oynamasın. */
.cc_jcmnugos_7c318IoPUL .ms-hsm-panel {
  display: flex;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(32 37 50 / 12%);
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-oge {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px; /* dokunma hedefi */
  padding: 0 16px;
  border: 0;
  background: none;
  color: #202532;
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-oge + .ms-hsm-oge {
  border-top: 1px solid #f3f3f3;
}

/* Bulunulan sayfa: hesap kartlarının pembesi + marka kırmızısı. */
.cc_jcmnugos_7c318IoPUL .ms-hsm-oge--aktif {
  background: #fdf0f0;
  color: #e60012;
  font-weight: 600;
}

.cc_jcmnugos_7c318IoPUL .ms-hsm-cikis {
  color: #e60012;
}
/* denetle-mobil: bitir */

/* End import: ../../paylasilan/hesap-menu.css */
/*
 * Favorilerim — mobil tasarım paketi, `s22` (`tasarim/hesap/s22.png`).
 * Palet: kart kenarlığı #F3F3F3, kırmızı #E60012, koyu #202532.
 *
 * ÖLÇEK NOTU (2026-08-20): mobil taban `data/mobil-standart.md`'ye çekildi.
 * Sayfa 17 Ağustos'ta tasarımın ham sayılarıyla yazılmıştı (ürün adı 7.8,
 * yorum 7.2, fiyat 9.8) ve mobil-önce yazılı olduğu için
 * `denetle-mobil.mjs`in kör noktasındaydı. Düzen, hiyerarşi, oran ve renk
 * tasarımdaki gibi; her satırda "ölçülen ↔ uygulanan" duruyor.
 *
 * TEK BİLİNÇLİ DÜZEN SAPMASI — kart altındaki "Sepete Ekle". Tasarımda
 * fiyatla AYNI satırda; ölçüldü, bu ölçekte 2 kolonda mümkün değil:
 * 360'ta kartın metin genişliği 136, gereken 165 (fiyat 57 + ara 8 +
 * düğme 100). İkonu atsak 145, puntoyu 11'e indirsek 140 — hiçbiri
 * sığmıyor, indirimli kartta üstü çizili eski fiyat da (47) aynı satırda.
 * Etiketi ikona düşürmek yerine düğme fiyatın ALTINA tam genişlikte
 * alındı: "SEPETE EKLE" etiketinin çerçeveli kalması markanın kararı
 * (GÖRSEL 11) ve 44'lük tam genişlik birincil eylem CRO'ya da uygun.
 * Masaüstünde kart genişlediği için tasarımdaki tek satır geri geliyor.
 */

/* denetle-mobil: baslat */

.cc_jcmnugos_7c318IoPUL .ms-fv {
  width: 100%;
  background-color: #ffffff;
}

/* ölçülen (s22, 360pt): yan boşluk 9.2, kart 166, aralık 8.8 ↔ uygulanan
   yan pay 16 (standart), aralık 8; kart 160'a iniyor. */
.cc_jcmnugos_7c318IoPUL .ms-fv-kap {
  display: flex;
  flex-direction: column;
  gap: 12px; /* ölçülen 10 ↔ uygulanan 12 */
  padding: 16px 16px 32px;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ölçülen: "Favorilerim (4)" 95.6pt → 14.7px ↔ uygulanan 20/28 */
.cc_jcmnugos_7c318IoPUL .ms-fv-baslik {
  margin: 0;
  color: #202532;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

/* --- ızgara: iki kolon, hesabım anasayfayla aynı aralık --- */

.cc_jcmnugos_7c318IoPUL .ms-fv-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; /* ölçülen 8.8 ↔ uygulanan 8 */
  min-width: 0;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-kart {
  display: flex;
  position: relative;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  border-radius: 12px; /* ölçülen 10 ↔ uygulanan 12 */
  background-color: #ffffff;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-gorsel-kap {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-gorsel {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* İndirim rozeti sol üstte, kırmızı */
.cc_jcmnugos_7c318IoPUL .ms-fv-indirim {
  position: absolute;
  top: 8px;
  left: 8px;
  /* ölçülen metin 9.6, pay 3/7 ↔ uygulanan 11, kutu 20 (ızgara) */
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background-color: #e60012;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

/* Kalp sağ üstte, beyaz daire içinde dolu kırmızı */
.cc_jcmnugos_7c318IoPUL .ms-fv-kalp {
  display: inline-flex;
  position: absolute;
  top: 8px;
  right: 8px;
  align-items: center;
  justify-content: center;
  /* Görsel daire tasarımdaki 26 (kutu, ikon değil — ölçek kararına göre
     kutulara dokunulmuyor); vuruş alanı ::before ile 44. */
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
}

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

.cc_jcmnugos_7c318IoPUL .ms-fv-kalp svg {
  width: 15px;
  height: 15px;
}

/* ölçülen: metin kart solundan ~10 içeride ↔ uygulanan 12 */
.cc_jcmnugos_7c318IoPUL .ms-fv-bilgi {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px; /* ölçülen 3 ↔ uygulanan 4 */
  padding: 8px 12px 12px;
}

/* ölçülen: "MINISO" 29.1pt → 8.6px ↔ uygulanan 12 */
.cc_jcmnugos_7c318IoPUL .ms-fv-marka {
  color: #202532;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-ad {
  /* h2 — başlık boşluğu ve kalınlığı geri alınıyor. */
  margin: 0;
  font-weight: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #202532;
  /* ölçülen: ürün adı satırı 45.8pt → 7.8px ↔ uygulanan 13/18 */
  font-size: 13px;
  line-height: 18px;
  /*
   * SABİT YER (data/mobil-standart.md "kart satır hizası"): iki satırlık
   * yer her kartta duruyor. `min-height` yetmiyor — tek satırlık adda
   * ("El Kremi") kart yukarı toplanıp komşusuyla hizası bozuluyordu.
   * `line-clamp: 2` üçüncü satıra kaçmayı zaten kesiyor.
   */
  height: 36px;
  text-decoration: none;
}

/*
 * Ürün adı h2 oldu (SEO). Başlığın İÇİNDEKİ bağlantı, adın eskiden <a>
 * olduğu zamanki görünümü aynen sürdürsün diye tipografiyi devralıyor:
 * `font: inherit` olmazsa global `[class*="cc_..."] *` kuralı satır
 * yüksekliğini 24px'e çekiyor ve iki satırlık kırpma yüksekliği taşıyor.
 */
.cc_jcmnugos_7c318IoPUL .ms-fv-ad-bag {
  color: inherit;
  font: inherit;
  text-decoration: none;
}


/* Puanlama satırı — tasarımda değer, beş yıldız ve parantezli yorum sayısı */
.cc_jcmnugos_7c318IoPUL .ms-fv-puan {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Sabit yer: puanı olmayan kartta satır boş durur (aşağıdaki --bos). */
  height: 16px;
  margin-top: 0;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-puan--bos {
  visibility: hidden;
}

/* ölçülen 8.4 ↔ uygulanan 12 */
.cc_jcmnugos_7c318IoPUL .ms-fv-puan-deger {
  color: #202532;
  font-size: 12px;
  line-height: 16px;
}

/* Yıldız arası 1 ızgaraya oturmuyor; çizimin kendi payı yeterli, 0 yazıldı. */
.cc_jcmnugos_7c318IoPUL .ms-fv-yildizlar {
  display: inline-flex;
  gap: 0;
  color: #f5a623;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-yildizlar svg {
  width: 12px; /* ölçülen 9 ↔ uygulanan 12 */
  height: 12px;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-yildiz--bos {
  color: #e5e7eb;
}

/* ölçülen 7.2 ↔ uygulanan 11 (mikro) */
.cc_jcmnugos_7c318IoPUL .ms-fv-yorum {
  color: #9ca3af;
  font-size: 11px;
  line-height: 14px;
}

/*
 * Tasarımda fiyat ve düğme AYNI satırda; bu ölçekte 2 kolonda sığmıyor
 * (dosya başındaki ölçüm). Düğme alta, tam genişliğe alındı.
 */
.cc_jcmnugos_7c318IoPUL .ms-fv-alt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-fiyat-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px; /* ölçülen 2/5 ↔ uygulanan 0/4 */
  min-width: 0;
}

/* ölçüldü: "299,99 TL" 39.8pt → 9.8px */
/* Fiyat ORTASINDAN bölünmemeli — dar kartta "319,99 / TL" diye
   kırılıyordu. */
.cc_jcmnugos_7c318IoPUL .ms-fv-fiyat, .cc_jcmnugos_7c318IoPUL .ms-fv-eski {
  white-space: nowrap;
}

/* ölçülen 9.8 ↔ uygulanan 14 — kartın en baskın öğesi (CRO: fiyat) */
.cc_jcmnugos_7c318IoPUL .ms-fv-fiyat {
  color: #202532;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

/* ölçülen 8.4 ↔ uygulanan 12 */
.cc_jcmnugos_7c318IoPUL .ms-fv-eski {
  color: #9ca3af;
  font-size: 12px;
  line-height: 20px;
  text-decoration: line-through;
}

/* "Sepete Ekle" — kırmızı kenarlıklı, zeminsiz */
.cc_jcmnugos_7c318IoPUL .ms-fv-sepet, .cc_jcmnugos_7c318IoPUL .ms-fv-stok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  /* ölçülen kutu 26, metin 8.4 ↔ uygulanan 44 (kartın birincil eylemi),
     metin 12; kart 160'ta 44 tam genişlik dokunma hedefini karşılıyor */
  height: 44px;
  padding: 0 8px;
  border: 1px solid #e60012;
  border-radius: 8px;
  background: none;
  color: #e60012;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cc_jcmnugos_7c318IoPUL .ms-fv-sepet svg, .cc_jcmnugos_7c318IoPUL .ms-fv-stok svg {
  width: 16px; /* ölçülen 12 ↔ uygulanan 16 */
  height: 16px;
  flex-shrink: 0;
}

/* Stokta rozeti yeşil — tasarımın üçüncü rengi #159947 */
.cc_jcmnugos_7c318IoPUL .ms-fv-stok {
  border-color: #159947;
  color: #159947;
  cursor: default;
}

/* --- boş liste --- */

.cc_jcmnugos_7c318IoPUL .ms-fv-bos {
  display: flex;
  flex-direction: column;
  gap: 12px; /* ölçülen 10 ↔ uygulanan 12 */
  padding: 24px 0;
}

/* ölçülen 10.5 ↔ uygulanan 14 (boş durum standardı) */
.cc_jcmnugos_7c318IoPUL .ms-fv-bos-metin {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* ölçülen 10.5, pay 8/18 ↔ uygulanan 15, kutu 44 */
.cc_jcmnugos_7c318IoPUL .ms-fv-bos-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-right: auto;
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #e60012;
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
}

/* denetle-mobil: bitir */

/* --- masaüstü: aynı düzen, dört kolon ve okunabilir ölçek --- */

@media (min-width: 768px) {
  .cc_jcmnugos_7c318IoPUL .ms-fv-kap {
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 24px 48px;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-izgara {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-baslik {
    /* mobil taban 20'ye çıktı; masaüstü bir basamak üstte kalsın */
    font-size: 24px;
    line-height: 32px;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-marka, .cc_jcmnugos_7c318IoPUL .ms-fv-ad, .cc_jcmnugos_7c318IoPUL .ms-fv-eski {
    font-size: 13px;
    line-height: 18px;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-fiyat {
    font-size: 16px;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-puan-deger, .cc_jcmnugos_7c318IoPUL .ms-fv-yorum {
    font-size: 12px;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-yildizlar svg {
    width: 13px;
    height: 13px;
  }

  /*
   * Masaüstünde kart genişliyor (1000/4 = 232) ve tasarımdaki TEK SATIR
   * geri geliyor: fiyat solda, düğme sağda.
   */
  .cc_jcmnugos_7c318IoPUL .ms-fv-alt {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cc_jcmnugos_7c318IoPUL .ms-fv-sepet, .cc_jcmnugos_7c318IoPUL .ms-fv-stok {
    height: 36px;
    font-size: 13px;
  }
}