/* PURE GRAIN v2 — koleksiyon: asimetrik editöryal grid.
   Kabuk (palet, fontlar, diğer bölümler) ../styles/site.css'ten gelir;
   bu dosya yalnızca #pieces bölümünü kurar. Hareket GSAP'ta (index.html). */

.coll {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.2rem);
  row-gap: clamp(3.5rem, 8vw, 7rem);
  align-items: start;
}
.coll > * { grid-column: var(--c); grid-row: var(--r); }
/* --shift: hücre, kendi genişliğinin yüzdesi kadar aşağı kayar — sıraları kırar
   (margin, transform değil: paralaks transform'u ezmesin) */
.coll > [style*="--shift"] { margin-top: var(--shift); }

/* ---------- parça ---------- */
.pc { display: block; text-decoration: none; color: var(--ink); }
.pc-media {
  display: block;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: var(--ar, 4 / 5);
}
.pc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}
.pc:hover .pc-media img, .pc:focus-visible .pc-media img { transform: scale(1.045); }
.pc-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line-paper);
}
.pc-cap .name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.2;
}
.pc-cap .note {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.pc-cap .go {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cognac);
  white-space: nowrap;
  opacity: .55;
  transition: opacity .3s, transform .3s;
}
.pc:hover .go, .pc:focus-visible .go { opacity: 1; transform: translateX(4px); }

/* ---------- aile etiketi: grid içinde hücre ---------- */
.coll-label { align-self: start; padding-top: .4rem; }
.coll-label .tag { color: var(--cognac); display: block; }
.coll-label h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
  margin: .6rem 0 .6rem;
}
.coll-label h3 em { font-style: italic; color: var(--cognac); }
.coll-label p { color: var(--ink-soft); font-size: .92rem; max-width: 22ch; }

/* ---------- başlık satırları (GSAP açılışı için maske) ---------- */
.coll-head h2 .line { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* ---------- JS yüklenmeden önce de her şey görünür; GSAP hazırsa gizleyip açar ---------- */
html.gsap-ready .coll .pc-media { clip-path: inset(100% 0 0 0); }
html.gsap-ready .coll .pc-cap, html.gsap-ready .coll-label { opacity: 0; }

/* ---------- mobil / tablet ---------- */
@media (max-width: 1024px) {
  .coll { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: clamp(2.5rem, 7vw, 4rem); }
  .coll > * { grid-row: auto; }
  .coll > [style*="--shift"] { margin-top: 0; }
  .coll-label { grid-column: 1 / -1; padding-top: 0; }
  .coll-label p { max-width: 40ch; }
  .pc { grid-column: span 3; }
  /* ikişerli sıralarda ikinci parça hafif aşağıda — tek sıra hissi kırılsın */
  .pc:nth-of-type(even) { margin-top: clamp(1.5rem, 8vw, 4rem); }
  /* ailesinde tek kalan parça yarım genişlikte yetim kalmasın */
  .pc.pc-solo { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 520px) {
  .coll { column-gap: .8rem; }
  .pc-cap { flex-direction: column; gap: .3rem; }
  .pc-cap .go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-media img, .pc-cap .go { transition: none; }
}

/* kürk cinsi başlıkta; astar/laminasyon/kapitone yalnız küçük detay satırı (müşteri notu 20/10) */
.coll-label .detail {
  display: block;
  margin-top: .9rem;
  padding-top: .6rem;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, var(--ink-soft) 30%, transparent);
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  max-width: 24ch;
}

/* öne çıkan uzun yorumlar: solda büyük kostüm yorumu, sağda iki yorum üst üste (21/10) */
.reviews-feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.reviews-feature .review { grid-column: 8 / -1; }
.reviews-feature .review-lead { grid-column: 1 / 8; grid-row: 1 / span 2; padding: clamp(1.6rem, 3vw, 2.6rem); }
.review-lead blockquote { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.4; flex: 0 0 auto; }
.review-lead .review-more { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; max-width: 60ch; flex: 1; }
@media (max-width: 900px) {
  .reviews-feature { grid-template-columns: 1fr; }
  .reviews-feature .review, .reviews-feature .review-lead { grid-column: 1; grid-row: auto; }
}

/* toptan bölümü: iki yatay ham-post görseli yerine tek dikey görsel, atölye bölümüyle aynı oran (21/10) */
.trade-media-single img { aspect-ratio: 4 / 5; object-position: center; }
.trade-media-single { align-self: center; }
/* başlık sol kolonda: görsel bölümün tamamının yanında, dikeyde ortalı (21/10) */
.trade-grid-beside { align-items: center; }

/* toplu sipariş penceresi açıkken yukarı-çık butonu formun üstüne binmesin (30/10) */
body.modal-open .totop { display: none; }

/* ---------- SSS (teslim, 30/10) ---------- */
.faq { border-top: 1px solid var(--line-paper); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-item { border-bottom: 1px solid var(--line-paper); }
.faq-item:first-child { border-top: 1px solid var(--line-paper); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.15rem 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.3; color: var(--ink);
  min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--cognac); transition: transform .3s; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--cognac); outline-offset: 4px; }
.faq-item p { color: var(--ink-soft); max-width: 60ch; padding: 0 0 1.3rem; margin: 0; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.footer-privacy { color: var(--cream-soft) !important; border-bottom-color: rgba(242,233,218,.25) !important; font-weight: 400 !important; }