/* ==========================================================================
   Lumiè Nature · "Yörünge" hero
   Ürünler bir halka üzerinde döner: kaydırınca sırayla öne gelir,
   tutup çekince sınırsız döner. Davranış: orbit.js
   ========================================================================== */

:root { --step: 34svh; }

/* kaydırma alanı: her ürün için bir adım + ilk katmanın üstüne kaydığı bir ekran */
.orbit-wrap {
  position: relative;
  height: calc(200svh + 11 * var(--step) + 24svh);
}
/* ilk renk katmanı, yörüngenin son ekranında onun üzerine kayar */
.stack .anchor + .sheet { margin-top: calc(var(--men) - 100svh); }

.orbit {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  touch-action: pan-y;          /* yatay sürükleme halkayı çevirir, dikey sayfayı kaydırır */
  cursor: grab;
  background:
    var(--grain-l),
    linear-gradient(180deg, transparent 50%, rgba(8, 2, 4, .6) 100%),
    linear-gradient(168deg, #2a0e16 0%, var(--ink) 46%, #170609 100%);
  --H0: min(50svh, 520px);       /* öndeki ürünün temel yüksekliği */
  --base: 75%;                   /* öndeki ürünün tabanı (dikey) */
}
.orbit::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 8;
  background: #0d0306;
  opacity: calc(var(--cover, 0) * .6);
  pointer-events: none;
}

.orbit__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.orbit__mist { z-index: 3; }

/* ---------- halka ------------------------------------------------------ */
.orbit__ring { position: absolute; inset: 0; z-index: 2; }
.orb {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  height: calc(var(--H0) * var(--hf, .8));
  transform-origin: 50% 100%;
  will-change: transform, filter;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}
.orbit.is-dragging, .orbit.is-dragging .orb { cursor: grabbing; }
.orb img { height: 100%; width: auto; max-width: none; display: block; }
/* cam zemin yansıması: ürünün kendi pikselleri, aşağı doğru sönümlenir */
.orb__ref {
  position: absolute;
  left: 0;
  top: 100%;
  transform: scaleY(-1);
  opacity: var(--ref, .22);
  -webkit-mask: linear-gradient(to top, rgba(0,0,0,.55), transparent 34%);
  mask: linear-gradient(to top, rgba(0,0,0,.55), transparent 34%);
  margin-top: 2px;
}

/* JS yokken: ürünler alt alta değil, yan yana bir dizi olarak görünür */
.no-js .orbit__ring { display: flex; align-items: flex-end; justify-content: center; gap: 2vw; padding: 0 var(--gut) 34svh; }
.no-js .orb { position: relative; height: calc(var(--H0) * .42); }
.no-js .orb__ref { display: none; }

/* ---------- başlık ------------------------------------------------------ */
.orbit__title {
  position: absolute;
  left: 50%;
  bottom: clamp(2.2rem, 6svh, 3.6rem);
  translate: -50% 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: .5rem;
  pointer-events: none;
  width: max-content;
}
.orbit__name {
  font: 400 var(--fs, clamp(3.6rem, 10vw, 10.5rem))/.9 var(--display);
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 .04em .5em rgba(20, 4, 9, .45);
}
.orbit__name .ch { display: inline-block; white-space: pre; }
.orbit__name.is-swap .ch { animation: chUp .9s var(--ease) both; animation-delay: calc(var(--k) * 32ms); }
@keyframes chUp {
  from { transform: translateY(.42em) rotate(4deg); opacity: .12; filter: blur(6px); }
}
.orbit__line { font: 400 clamp(1.05rem, 1.5vw, 1.4rem)/1.2 var(--display); color: #e6d2ce; text-shadow: 0 1px 2px rgba(20, 4, 9, .8), 0 0 18px rgba(20, 4, 9, .9); }
.orbit__line.is-swap { animation: rise .8s var(--ease) both; animation-delay: .18s; }

/* ---------- sol alt: sayaç + içerik ------------------------------------ */
.orbit__meta {
  position: absolute;
  left: var(--gut);
  bottom: clamp(2.2rem, 6svh, 3.6rem);
  z-index: 5;
  display: grid;
  gap: .35rem;
  max-width: 17rem;
}
.orbit__count {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font: 400 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.orbit__count .of { font: 400 .95rem/1 var(--sans); color: var(--text-3); }
.orbit__kind { font-size: .86rem; color: var(--text); margin-top: .5rem; }
.orbit__ings { font-size: .82rem; color: var(--text-2); line-height: 1.45; }

/* ---------- sağ alt: detay ---------------------------------------------- */
.orbit__more {
  position: absolute;
  right: var(--gut);
  bottom: clamp(2.2rem, 6svh, 3.6rem);
  z-index: 5;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .85rem 1.3rem .85rem 1.4rem;
  border-radius: 2px 18px 18px 18px;
  background: var(--text);
  color: var(--ink);
  font-size: .9rem; font-weight: 500;
  transition: background .35s var(--ease);
}
.orbit__more span { display: inline-block; transition: transform .45s var(--ease); }
.orbit__more:hover { background: #fff; }
.orbit__more:hover span { transform: translate(3px, -3px); }

/* ---------- mobil -------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --step: 30svh; }
  .orbit { --H0: min(44svh, 104vw); --base: 66%; }
  .orbit__title { bottom: auto; top: calc(var(--base) + 1.2rem); }
  .orbit__name { --fs: clamp(2.8rem, 14vw, 4.6rem); }
  .orbit__meta { bottom: 2rem; max-width: 60%; }
  .orbit__meta .orbit__ings { display: none; }
  .orbit__count { font-size: 2rem; }
  .orbit__more { bottom: 2rem; padding: .75rem 1.1rem; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit__name.is-swap .ch, .orbit__line.is-swap { animation: none; }
}