/* ==========================================================================
   BİLEŞEN — SEPET ÇEKMECESİ
   Sağdan açılan beyaz panel. Üstte ücretsiz teslimat ilerlemesi, ortada
   satırlar, altında tamamlayıcı öneriler ve sabit özet çubuğu.
   ========================================================================== */

.mu-sepetc {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-panel);
  width: min(432px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  box-shadow: var(--sh-4);
  transform: translateX(102%);
  transition: transform var(--t-3) var(--e-cik);
  overscroll-behavior: contain;
}
.mu-sepetc.is-acik { transform: none; }

/* ------------------------------------------------------------------- baş */
.mu-sepetc__bas {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--cizgi);
}
.mu-sepetc__baslik {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-baslik);
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--metin);
}
.mu-sepetc__sayi {
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  background: var(--kirmizi-sis);
  color: var(--kirmizi-500);
  border-radius: var(--r-pill);
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1;
}
.mu-sepetc__bas .mu-ibtn { margin-inline-start: auto; }

/* --------------------------------------------------- ücretsiz teslimat */
.mu-sepetc__ilerleme {
  flex: none;
  padding: 12px var(--sp-5);
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  display: grid;
  gap: 8px;
}
.mu-ilerleme__metin {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--metin-2);
  line-height: 1.45;
}
.mu-ilerleme__metin .mu-ikon { width: 15px; height: 15px; flex: none; color: var(--kirmizi-500); }
.mu-ilerleme__metin strong { color: var(--metin); font-weight: 800; }
.mu-ilerleme__metin.is-tamam { color: var(--basari-500); }
.mu-ilerleme__metin.is-tamam .mu-ikon,
.mu-ilerleme__metin.is-tamam strong { color: var(--basari-500); }

.mu-ilerleme__ray {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cizgi);
  overflow: hidden;
}
.mu-ilerleme__dolgu {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kirmizi-500);
  transition: width 520ms var(--e-cik), background var(--t-3);
}
.mu-ilerleme__dolgu.is-tamam { background: var(--basari-500); }

/* ---------------------------------------------------------------- gövde */
.mu-sepetc__govde {
  flex: 1;
  min-height: 150px;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-5);
}

.mu-sepet-satir {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  align-items: start;
}
.mu-sepet-satir + .mu-sepet-satir { border-top: 1px solid var(--cizgi); }
.mu-sepet-satir__gorsel {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
}
.mu-sepet-satir__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.mu-sepet-satir__adet-rozet {
  position: absolute;
  top: -6px; left: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--lacivert-800);
  color: #fff;
  border: 2px solid var(--yuzey);
  border-radius: var(--r-pill);
  font-family: var(--font-baslik);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.mu-sepet-satir__govde { display: grid; gap: 4px; min-width: 0; }
.mu-sepet-satir__ad { font-size: var(--fs-sm); font-weight: 800; color: var(--metin); line-height: 1.3; }
.mu-sepet-satir__secim { font-size: var(--fs-xs); color: var(--metin-3); line-height: 1.45; }
.mu-sepet-satir__not {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-xs);
  color: var(--altin-700);
  line-height: 1.4;
}
.mu-sepet-satir__not .mu-ikon { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.mu-sepet-satir__alt { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.mu-sepet-satir__fiyat {
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--metin);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mu-sepet-satir__sil {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  color: var(--metin-3);
  transition: color var(--t-1), background var(--t-1);
}
.mu-sepet-satir__sil:hover { color: var(--hata-500); background: var(--hata-sis); }
.mu-sepet-satir__sil .mu-ikon { width: 16px; height: 16px; }
.mu-sepet-satir.is-siliniyor { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------- öneriler */
.mu-sepetc__upsell {
  flex: none;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  display: grid;
  gap: 10px;
}
.mu-sepetc__upsell > h3 {
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
}

/* ------------------------------------------------------------------ alt */
.mu-sepetc__alt {
  flex: none;
  padding: var(--sp-4) var(--sp-5) max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--cizgi);
  display: grid;
  gap: 9px;
  background: var(--yuzey);
}
.mu-ozet-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--metin-2);
}
.mu-ozet-satir b { font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; }
.mu-ozet-satir--bedava b { color: var(--basari-500); }
.mu-ozet-satir--indirim b { color: var(--basari-500); }
.mu-ozet-satir--toplam {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px dashed var(--cizgi-koyu);
}
.mu-ozet-satir--toplam span {
  font-family: var(--font-baslik);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--metin);
}
.mu-ozet-satir--toplam b {
  font-family: var(--font-baslik);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lacivert-800);
}

.mu-sepetc__min {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs);
  color: var(--altin-700);
  background: var(--altin-sis);
  border: 1px solid rgba(232, 162, 0, .32);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}
.mu-sepetc__min .mu-ikon { width: 15px; height: 15px; flex: none; }
.mu-sepetc__alt .mu-btn { width: 100%; }
.mu-sepetc__devam {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--metin-3);
}
.mu-sepetc__devam a { color: var(--kirmizi-500); font-weight: 700; }
.mu-sepetc__devam a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Dar ve alçak ekranlarda ikincil bölümleri gizle */
@media (max-height: 760px) { .mu-sepetc__upsell { display: none; } }
@media (max-height: 620px) {
  .mu-sepetc__ilerleme { display: none; }
  .mu-ozet-satir:not(.mu-ozet-satir--toplam) { display: none; }
}