.pack-scene {
  position: relative;
  height: 280vh;
  background:
    radial-gradient(ellipse 60% 45% at 50% 40%, rgba(240,90,40,0.1), transparent 65%),
    linear-gradient(180deg, #FFFCF9, #F5E9DF);
}
.pack-scene__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.pack-hint {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 5; text-align: center; color: var(--muted);
  font-size: 0.86rem; font-weight: 650;
  animation: bob 2.2s var(--ease) infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50% { transform: translate(-50%, -6px); opacity: 1; }
}
.stage {
  position: relative;
  width: min(980px, 96vw);
  height: min(620px, 82svh);
}
.pack-wrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 2; will-change: transform, opacity;
}
.pack {
  position: relative;
  width: min(820px, 94vw);
  aspect-ratio: 16 / 9;
  filter: drop-shadow(0 32px 60px rgba(26,22,20,0.22));
}
.pack img {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; pointer-events: none;
}
.pack-half {
  position: absolute; inset: 0; overflow: hidden; opacity: 0; will-change: transform;
}
.pack-half img {
  position: absolute; top: 0; height: 100%; width: 200%;
  max-width: none; object-fit: contain;
}
.pack-half--l {
  width: 52%; left: 0;
  clip-path: polygon(0 0, 100% 0, 88% 22%, 100% 45%, 86% 68%, 100% 100%, 0 100%);
}
.pack-half--l img { left: 0; width: calc(100% / 0.52); }
.pack-half--r {
  width: 52%; right: 0; left: auto;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 14% 68%, 0 45%, 12% 22%);
}
.pack-half--r img {
  right: 0; left: auto; width: calc(100% / 0.52);
}
.tear-line {
  position: absolute; left: 50%; top: 18%;
  width: 2px; height: 0%; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, #8a3a1a, transparent);
  opacity: 0; z-index: 4; border-radius: 99px;
  box-shadow: 0 0 10px rgba(240,90,40,0.45);
}
.crumbs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.crumb {
  position: absolute; left: 50%; top: 48%;
  width: 14px; height: 10px; margin: -7px;
  border-radius: 40% 60% 55% 45%; opacity: 0; background: #c48a3a;
}
.picks { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.picks.is-live { pointer-events: auto; }
.pick {
  position: absolute;
  width: clamp(92px, 16vw, 118px);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  opacity: 0; transform: scale(0.35);
  filter: drop-shadow(0 14px 22px rgba(26,22,20,0.18));
  transition: filter 0.25s ease;
}
.pick:hover { filter: drop-shadow(0 18px 28px rgba(240,90,40,0.28)); }
.pick__img {
  width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  display: block; background: #efe6dc;
  transition: box-shadow 0.25s ease, transform 0.25s var(--ease);
}
.pick:hover .pick__img { transform: scale(1.05); }
.pick__label {
  margin-top: 0.45rem; text-align: center;
  font-size: 0.8rem; font-weight: 750; color: var(--ink);
  opacity: 0; transition: opacity 0.3s;
}
.picks.is-live .pick__label { opacity: 1; }
.pick[data-id="cekirdek"] { left: 6%; top: 18%; }
.pick[data-id="fistik"]   { left: 28%; top: 8%; }
.pick[data-id="kahve"]    { left: 52%; top: 12%; }
.pick[data-id="cips"]     { left: 74%; top: 20%; }
.pick[data-id="susam"]    { left: 18%; top: 58%; }
.pick[data-id="leblebi"]  { left: 62%; top: 56%; }

.home-intro {
  padding: clamp(3rem, 7vw, 5rem) 0;
  text-align: center;
}
.home-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 750; letter-spacing: -0.02em; line-height: 1.1;
  margin: 0.4rem auto 0.75rem; max-width: 18ch;
}
.home-intro p { color: var(--muted); max-width: 36rem; margin: 0 auto 1.4rem; }
.home-intro__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

.why-list { list-style: none; display: grid; gap: 0.75rem; }
.why-list li {
  padding: 0.95rem 1rem; border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.why-list strong {
  display: block; font-family: var(--font-display); margin-bottom: 0.15rem;
}
.why-list span { color: rgba(255,255,255,0.6); font-size: 0.92rem; }
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}

@media (max-width: 960px) {
  .why-grid { grid-template-columns: 1fr; }
  .pick { width: clamp(78px, 22vw, 100px); }
  .pick[data-id="cekirdek"] { left: 4%; top: 14%; }
  .pick[data-id="fistik"]   { left: 36%; top: 6%; }
  .pick[data-id="kahve"]    { left: 68%; top: 14%; }
  .pick[data-id="cips"]     { left: 10%; top: 52%; }
  .pick[data-id="susam"]    { left: 40%; top: 58%; }
  .pick[data-id="leblebi"]  { left: 70%; top: 50%; }
}