/* ═══════════════════════════════════════════
   FIRINDAN — scroll ile sürülen ürün vitrini

   Referans (Dribbble "Bakery Website Design")
   düzeni: sağda kategori listesi, aktif olan ok
   ile işaretli; ortada ürün havada süzülüyor;
   solda başlık ve metin.

   Ürünler şeffaf PNG (tools/prep-pastry.js) ve
   üst üste duruyor; hangisinin görüneceğini
   pastry-scene.js'teki timeline belirliyor.
   Burada yalnızca yerleşim ve durağan görünüm var.
   ═══════════════════════════════════════════ */

.pastry {
  position: relative;
  background: var(--bg-alt);
  color: var(--ink);
}

.pastry-pin {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

/* Sahnenin arkasındaki sıcak ışık — referanstaki krem sıçramanın
   sakin karşılığı. Ürünün arkasında durur, kenarlara doğru söner. */
.pastry-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(94vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255, 252, 246, .95) 0%,
      rgba(250, 240, 224, .75) 38%,
      rgba(243, 235, 223, 0) 68%);
  pointer-events: none;
}

.pastry-grid {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.05fr) minmax(180px, .62fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

/* ── Orta: ürün sahnesi ── */
.pastry-stage {
  position: relative;
  height: min(62vh, 520px);
  display: grid;
  place-items: center;
}

.pastry-shot {
  position: absolute;
  inset: 0;
  /* Kesimlerde gölge yok (kaynaktaki gölge fonla birlikte atıldı);
     zemine oturma hissini bu gölge veriyor. */
  filter: drop-shadow(0 26px 34px rgba(84, 58, 28, .26));
  will-change: transform, opacity;
}

/* Kareler .pastry-shot içinde inset:0 ile duruyor, yani kutunun ölçüsü
   sahneden geliyor. Boyutlandırma object-fit ile yapılıyor, max-height ile
   DEĞİL: .pastry-shot bir grid ve `place-items: center` satırı içeriğe göre
   boyutlandırıyor, dolayısıyla `max-height: 100%` kutuya değil görselin
   kendi yüksekliğine çözülüyordu. Dikey görsellerde (browni ve elmalı tart,
   en/boy 0.94) bu 284 px'lik sahnede 380 px'lik görsel demekti — mobilde
   alttaki metnin üstüne taşıyordu. object-fit: contain her oranda kutuya
   sığmayı garanti ediyor; drop-shadow alfayı izlediği için gölge yine
   ürünün siluetine oturuyor.

   Görsel de mutlak konumlu: .pastry-shot önce `display: grid` +
   `place-items: center` idi ve grid satırı içeriğe göre boyutlandığı için
   `height: 100%` kutuya değil görselin kendi yüksekliğine çözülüyordu —
   object-fit eklemek tek başına yetmedi. inset: 0 ile ölçü tartışmasız. */
.pastry-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Sol: metin ── */
.pastry-copy {
  max-width: 26rem;
  position: relative;
}

.pastry-eyebrow {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

/* Metin blokları üst üste duruyor: biri çıkarken diğeri girerken
   yerleşim zıplamasın diye ilki akışta, kalanlar üstüne konumlanıyor. */
.pastry-texts { position: relative; }

.pastry-text {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
.pastry-text:first-child { position: relative; }

.pastry-name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 .7rem;
}

.pastry-meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.pastry-tur {
  padding: .22rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.pastry-ozet {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

.pastry-notlar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pastry-notlar li {
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(192, 150, 81, .13);
  color: var(--accent);
}

/* ── Sağ: ürün listesi (referanstaki ok işaretli menü) ── */
.pastry-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  justify-self: end;
  text-align: right;
}

.pastry-nav button {
  appearance: none;
  background: none;
  border: 0;
  padding: .3rem 0;
  font: inherit;
  font-size: clamp(.78rem, 1.05vw, .95rem);
  color: var(--ink-soft);
  opacity: .5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  transition: opacity .35s var(--ease), color .35s var(--ease);
}

.pastry-nav button:hover { opacity: .85; }

/* Ok yalnızca aktif satırda görünür; yerini her zaman kapladığı için
   liste okla birlikte kaymıyor. */
.pastry-nav button::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s var(--ease);
}

.pastry-nav .is-on {
  opacity: 1;
  color: var(--accent);
  font-weight: 600;
}
.pastry-nav .is-on::before { transform: scaleX(1); }

/* ── Sayaç ──
   Pin'in altına yaslı; metin bloğunun içinde değil, çünkü blokların boyu
   ürüne göre değişiyor ve sayaç metnin üstüne biniyordu. Yatayda .container
   ile aynı hizada dursun diye aynı genişlik hesabı kullanılıyor. */
.pastry-count {
  position: absolute;
  left: 50%;
  bottom: clamp(1.6rem, 5vh, 3rem);
  transform: translateX(-50%);
  width: min(100% - 2.5rem, var(--container));
  margin: 0;
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--ink-soft);
  opacity: .75;
}
.pastry-count b { color: var(--accent); font-weight: 600; }
.pastry-count span { opacity: .5; margin: 0 .25rem; }
.pastry-count i { font-style: normal; }

/* ── Dar ekran ── */
@media (max-width: 900px) {
  .pastry-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: clamp(.8rem, 3vh, 1.8rem);
    /* Üst pay sabit başlığı (74 px) geçmeli — kısa ekranlarda clamp'in alt
       sınırı buna çok yaklaşıyordu; açık yazılmış hâli tartışmasız. */
    padding-block: max(clamp(4.5rem, 12vh, 7rem), calc(var(--header-h) + 1rem))
                   clamp(3.5rem, 9vh, 5rem);
  }
  .pastry-nav { display: none; }
  /* HTML'de metin önce geliyor (ekran okuyucu ürünü adıyla duysun);
     dar ekranda görsel üste alınıyor. */
  .pastry-stage { order: -1; height: clamp(190px, 33vh, 320px); }
  .pastry-copy { max-width: none; }
  .pastry-eyebrow { margin-bottom: .8rem; }
  .pastry-count { bottom: clamp(1rem, 3vh, 1.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pastry-shot,
  .pastry-text { transition: none; }
}