/* ===== Topluluk kartı ===== */

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart {
  scroll-snap-align: start;
  min-width: 0;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__kart {
  position: relative;
  isolation: isolate; /* noktaların kutusu yalnız kartın içinde öne çıkar */
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: color-mix(in srgb, var(--alg-cizgi) 55%, var(--alg-yuzey));
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__medya {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (hover: hover) {
  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__kart:hover .alg-tkart__medya {
    transform: scale(1.03);
  }
}

/* Kartın tamamını kaplayan, görünmez açma düğmesi (noktalar ve çanta üstte kalır: DOM sırası) */
.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__ac {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Üst sol: profil + kullanıcı adı */
.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__hesap {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  max-width: calc(100% - 1.25rem);
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: rgba(28, 27, 25, 0.38);
  color: var(--kombos-white);
  pointer-events: none;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--alg-yuzey);
  color: var(--alg-murekkep);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tkart__ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ürün noktası ve hover kutusu: sub-components/UrunNoktasi (Takımı tamamla ile ortak) */

/* ===== Topluluk ürün penceresi =====
   Boyutu sabit: ürün sayısı ne olursa olsun aynı büyüklükte açılır (liste içinde kayar). */

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen {
  position: fixed;
  inset: 0;
  z-index: var(--kombos-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 27, 25, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen--acik {
  opacity: 1;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--alg-yuzey);
  color: var(--alg-murekkep);
  outline: none;
}

/* Görsel / video */
.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__medya {
  position: relative;
  flex: 0 0 40%;
  min-height: 12.5rem;
  background: color-mix(in srgb, var(--alg-cizgi) 55%, var(--alg-yuzey));
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__medya img, .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__medya video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__medya video {
  background: var(--alg-murekkep);
}

/* Sağ: başlık, kayan liste, düğme */
.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__icerik {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ust {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 1rem 3.5rem 0.5rem 1.25rem;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__baslik {
  margin: 0;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__liste {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__satir {
  display: flex;
  gap: 1rem;
  margin: 0 -0.75rem;
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--alg-cizgi);
  transition: background-color var(--alg-gecis);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__satir:last-child {
  border-bottom: 0;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__satir--vurgulu {
  background: color-mix(in srgb, var(--alg-vurgu-acik) 60%, var(--alg-yuzey));
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__resim {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 5.25rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: color-mix(in srgb, var(--alg-cizgi) 55%, var(--alg-yuzey));
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__resim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__bos-simge {
  font-size: 1.75rem;
  color: var(--alg-ikincil);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__bilgi {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ad {
  color: inherit;
  text-decoration: none;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ad:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ikincil {
  margin-top: -0.25rem;
  color: var(--alg-ikincil);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.625rem;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__fiyat--indirimli > span:first-child {
  color: var(--alg-indirim);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__eski {
  color: var(--alg-ikincil);
  text-decoration: line-through;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__bedenler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__etiket {
  margin-right: 0.25rem;
  color: var(--alg-ikincil);
}

/* Kutulu beden düğmesi (Takımı tamamla ile aynı); seçili = dolu koyu */
.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__beden {
  min-width: 3.25rem;
  height: 2.125rem;
  padding: 0 0.625rem;
  border: 1px solid color-mix(in srgb, var(--alg-murekkep) 28%, transparent);
  background: var(--alg-yuzey);
  color: var(--alg-murekkep);
  cursor: pointer;
  transition: background-color var(--alg-gecis), color var(--alg-gecis), border-color var(--alg-gecis);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__beden:hover:not(:disabled) {
  border-color: var(--alg-murekkep);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__beden[aria-pressed="true"] {
  border-color: var(--alg-murekkep);
  background: var(--alg-murekkep);
  color: var(--alg-yuzey);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__beden:disabled {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__git {
  padding: 0.375rem 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__alt {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--alg-cizgi);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__hata {
  margin: 0;
  color: var(--alg-indirim);
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ekle {
  width: 100%;
  min-height: 3.25rem;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ekle:disabled, .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ekle:disabled:hover {
  background: var(--alg-murekkep);
  color: var(--alg-yuzey);
  opacity: 0.4;
  cursor: not-allowed;
}

/* Kapat: telefonda görselin üstünde beyaz daire, geniş ekranda sağ üst köşe */
.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__kapat {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--alg-yuzey);
  color: var(--alg-murekkep);
  font-size: 1.125rem;
  cursor: pointer;
}

.cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__kapat:focus-visible, .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__beden:focus-visible, .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ekle:focus-visible {
  outline: 2px solid var(--alg-murekkep);
  outline-offset: 2px;
}

/* Dar telefon: "Beden" yazısı kendi satırında, bedenler altında tek satır (4–5 beden sığar) */
@media (max-width: 639px) {
  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__satir {
    gap: 0.75rem;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__resim {
    width: 4.5rem;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__etiket {
    flex-basis: 100%;
    margin-right: 0;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__beden {
    min-width: 2.75rem;
    padding: 0 0.5rem;
  }
}

/* ===== Tablet ve geniş ekran: yan yana, sabit boyut ===== */
@media (min-width: 768px) {
  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen {
    padding: 1rem;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__panel {
    flex-direction: row;
    width: min(65rem, 100%);
    height: min(45rem, calc(100vh - 2rem));
    transform: translateY(0.75rem);
    transition: transform 0.25s ease;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen--acik .alg-tpen__panel {
    transform: none;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__medya {
    flex: 0 0 43%;
    min-height: 0;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__ust {
    min-height: 4.25rem;
    padding: 1.5rem 4rem 0.75rem 1.75rem;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__liste {
    padding: 0 1.75rem;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__alt {
    padding: 1rem 1.75rem 1.5rem;
  }

  .cc_XBicLfRnK3_rEp6w4qxmb .alg-tpen__kapat {
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
  }
}