/* ==========================================================================
   Vitrin — ürün görselleri ve renk seçici

   style.css'e DOKUNULMADI. Geçiş planındaki birinci koruma maddesi bu
   dosyanın tek satırının bile değişmemesi; renk ve ölçü değişkenleri
   oradan geliyor, burada yeni palet tanımlanmadı.

   Mevcut tasarımda ürün görseli yerine renkli bir kare çiziliyordu
   (.product-card__figure::after). Gerçek görsel varken o kare gizlenir;
   görsel yoksa eski davranış aynen sürer.
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */

/* Görsel gelince beyaz dikdörtgen yer tutucusu kalkar. Sınıf yoksa
   eski görünüm aynen sürer — görsel eklenmemiş bir kurulumda sayfa
   boş görünmesin. */
.hero__figure--foto::after {
  display: none;
}

/* Kart görseli ------------------------------------------------------------ */

.product-card__figure--foto::after,
.product-detail__figure--foto::after {
  display: none;
}

.product-card__img,
.product-detail__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kartta hover büyümesi ::after üzerindeydi; görsel varken görsele taşınır. */
.product-card__figure--foto .product-card__img {
  transition: transform 650ms ease;
}

.product-card:hover .product-card__figure--foto .product-card__img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .product-card__figure--foto .product-card__img {
    transition: none;
  }

  .product-card:hover .product-card__figure--foto .product-card__img {
    transform: none;
  }
}

.product-detail__figure--foto {
  overflow: hidden;
}

/* Küçük görseller --------------------------------------------------------- */

.thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.thumbs__btn {
  width: 68px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--color-line, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt, #f4efe7);
  cursor: pointer;
}

.thumbs__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbs__btn[aria-current='true'] {
  border-color: var(--color-accent, #b07a4a);
  box-shadow: 0 0 0 2px var(--color-accent, #b07a4a);
}

/* Renk seçici ------------------------------------------------------------- */

.swatches {
  margin: 1.25rem 0;
}

.swatches__label {
  font-size: var(--text-sm, 0.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft, #7d6a58);
  margin-bottom: 0.5rem;
}

.swatches__label b {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink, #3d3630);
}

.swatches__list {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.swatch-btn {
  /* Dokunma hedefi en az 44px — erişilebilirlik notundaki kural. */
  width: 44px;
  height: 44px;
  padding: 5px;
  border: 1px solid var(--color-line, rgba(0, 0, 0, 0.14));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.swatch-btn__dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
}

.swatch-btn[aria-pressed='true'] {
  border-color: var(--color-accent, #b07a4a);
  box-shadow: 0 0 0 2px var(--color-accent, #b07a4a);
}

.swatch-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.swatch-btn[disabled] .swatch-btn__dot {
  /* Tükenen renkte çapraz çizgi — rengi ayırt edemeyenler için de
     bilgi rengin dışında bir işaretle taşınmalı. */
  background:
    linear-gradient(to bottom right, transparent 45%, rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.55) 55%, transparent 55%),
    var(--swatch);
}

.swatches__note {
  margin-top: 0.5rem;
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-ink-soft, #7d6a58);
}

/* Kartta renk noktaları --------------------------------------------------- */

.card-swatches {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.card-swatches__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: inline-block;
}