/*
  Butik — Instagram'dan satan giyim butikleri için (ücretsiz).
  Tek imza: hikâye halkaları (fuşya → kayısı halka). Geri kalan her şey sakin: beyaz zemin, gece eriği metin,
  dikey kartlar, fiyat görselin üstünde etiket. Telefon öncelikli: kartlar ve kombinler yatay kayar.
*/
:root {
  --ring: conic-gradient(from 200deg, #ff9a62, var(--color-accent), #8e2bd1, #ff9a62);
  --pill: color-mix(in srgb, var(--color-bg) 92%, transparent);
}

/* Yazı: sıkı, cümle düzeninde başlıklar */
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.section-heading__title { font-size: calc(clamp(1.6rem, 4.2vw, 2.6rem) * var(--heading-scale)); }
.section-heading__subtitle { font-size: 1rem; }
.section-heading__link { font-weight: 600; }
.section-heading__eyebrow { display: none; } /* Etiket kalabalığı yok: başlık yeterli */
::selection { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* Üst menü: ince, beyaz; logo ortada */
.header { border-bottom: 0; }
.header.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 10%, transparent); }
.logo-text { font-size: 1.6rem; letter-spacing: -.04em; }
@media (max-width: 749px) { .logo-text { font-size: 1.3rem; white-space: nowrap; } }
.menu__link { font-weight: 600; }
.cart-count { background: var(--color-accent); }

/* Butonlar: tam yuvarlak, kalın */
.button { font-weight: 600; letter-spacing: -.005em; }

/* --- İmza: hikâye halkaları --- */
.stories { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.stories__rail {
  list-style: none; margin: 0; padding: .25rem .1rem .5rem; display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.stories__rail::-webkit-scrollbar { display: none; }
.stories__item { flex: none; scroll-snap-align: start; }
.story { display: grid; justify-items: center; gap: .45rem; width: 84px; text-decoration: none; }
.story__ring {
  display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 14%, transparent); padding: 2px;
  transition: transform .25s var(--ease);
}
.story--new .story__ring { background: var(--ring); padding: 3px; }
.story__media { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--color-bg); background: var(--color-surface); }
.story__media img, .story__media svg { width: 100%; height: 100%; object-fit: cover; }
.story__label { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.2; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story:hover .story__ring, .story:focus-visible .story__ring { transform: scale(1.05); }
.story:focus-visible { outline: none; }
.story:focus-visible .story__label { text-decoration: underline; }
@media (min-width: 750px) {
  .stories__rail { gap: 1.75rem; justify-content: center; }
  .story { width: 100px; }
  .story__ring { width: 96px; height: 96px; }
  .story__label { max-width: 100px; font-size: .85rem; }
}

/* --- Vitrindeki kombinler (4:5 kareler) --- */
.looks__grid {
  list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.looks__grid::-webkit-scrollbar { display: none; }
.looks__item { scroll-snap-align: start; }
.look { position: relative; display: block; text-decoration: none; color: #fff; border-radius: var(--radius); overflow: hidden; }
.look__media { display: block; aspect-ratio: 4 / 5; background: var(--color-surface); }
.look__media img, .look__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.look__caption {
  position: absolute; inset: auto 0 0 0; display: grid; gap: .15rem; padding: 2.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgb(20 6 24 / .62));
}
.look__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; }
.look__text { font-size: .88rem; opacity: .9; }
.look:hover .look__media img { transform: scale(1.04); }
.look:not(:has(img)) { color: var(--color-text); }
.look:not(:has(img)) .look__caption { background: none; }
@media (min-width: 990px) {
  .looks__grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}

/* --- Ürün kartı: dikey görsel, fiyat etiketi görselin üstünde --- */
.card__media { border-radius: var(--radius); }
.card__price-tag {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 1; padding: .3rem .6rem; border-radius: 999px;
  background: var(--pill); color: var(--color-text); font-size: .85rem; backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px -6px rgb(0 0 0 / .4);
}
.card__price-tag .price { gap: 0 .4rem; flex-wrap: nowrap; }
.card__price-tag .price__compare { font-size: .8em; }
.card__price-tag .price__badge { display: none; }
.card:hover .card__price-tag, .card:focus-within .card__price-tag { opacity: 0; transition: opacity .2s; }
.card__quick-add { border-radius: 999px; }
.card__title { font-weight: 600; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__colors { margin: 0; font-size: .8rem; color: var(--color-muted); }
.badge { border-radius: 999px; padding: .25rem .6rem; }
.badge--sale { background: var(--color-accent); }
.product-carousel__item { flex-basis: 62%; }
@media (min-width: 750px) { .product-carousel__item { flex-basis: 34%; } }
@media (min-width: 990px) { .product-carousel__item { flex-basis: 23%; } }

/* --- Yorumlar: mesaj balonu gibi (müşteri DM'leri) --- */
.testimonial {
  background: var(--color-surface); border-radius: 22px 22px 22px 6px; padding: 1.2rem 1.25rem;
}
.testimonial .stars { color: var(--color-accent); }
.testimonial__quote { font-size: 1rem; }
.testimonial__name { font-size: .9rem; }

/* Koleksiyon kartları ve görsel + metin */
.collection-card__title { font-weight: 700; letter-spacing: -.02em; }
.image-text__heading, .rich-text__heading { letter-spacing: -.03em; }
.newsletter__heading { letter-spacing: -.03em; }

/* Ürün sayfası */
.product__title { letter-spacing: -.03em; }
.variant-picker .swatch, .variant-picker label { border-radius: 999px; }

/* Alt bilgi */
.footer__heading { font-family: var(--font-heading); letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  .story__ring, .look__media img { transition: none; }
}

/* Alt bilgi başlıkları büyük harf değil, cümle düzeninde */
.footer__heading { text-transform: none; letter-spacing: -.01em; }
