/* 04-hedefler.css — bölüm 4: sürüklenebilir 5 kartlık deste. Yerleşim
   `nth-child` ile SABİT (JS'siz de anlamlı bir yelpaze görünür); JS yalnızca
   üstteki kartı listenin sonuna taşıyor, geçiş `transition` ile kendiliğinden
   oluşuyor (site/prototip/gun.js'teki `desteyiDiz` formülünün durağan hâli). */

.sahne-hedefler {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 5vw, 70px);
  padding: 120px clamp(16px, 7vw, 120px) 100px;
  max-width: 1280px; margin: 0 auto;
}

.hedef-ipucu { font-size: 13px; font-weight: 600; color: var(--kor); letter-spacing: 0.04em; }
/* İlk görünüşte bir kez: "sürüklenebilirim". `translate` ayrı özellik —
   JS'in satır içi `transform`'uyla çakışmaz. */
.hedef-kart.kipirda { animation: kipirda 0.9s cubic-bezier(0.36, 0, 0.3, 1); }
@keyframes kipirda {
  0%, 100% { translate: 0 0; }
  25% { translate: 26px 0; }
  50% { translate: -12px 0; }
  75% { translate: 6px 0; }
}

.rozet-pro {
  font: 700 10px var(--govde-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: #1e1a16; background: var(--altin); padding: 2px 8px; border-radius: 999px;
}

.hedef-sahne { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hedef-deste { position: relative; width: min(280px, 78vw); height: 300px; touch-action: pan-y; }

.hedef-kart {
  position: absolute; inset: 0 0 auto 0; width: 100%; min-height: 260px;
  padding: 22px 20px 20px; cursor: grab;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  user-select: none; -webkit-user-select: none;
}
.hedef-kart:active { cursor: grabbing; }
.hedef-kart.suruklenen { transition: none; }
.hedef-kart h3 { font: 700 18px var(--baslik-font); margin: 4px 0 8px; }
.hedef-kart p { font-size: 14px; line-height: 1.5; color: var(--metin-ikincil); margin: 0; }
.hedef-simge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--kor) 12%, transparent); color: var(--kor);
}

/* Statik yelpaze: k=0 (en üst/aktif) 100 en yüksek z-index, geriye doğru
   küçülüp aşağı kayar — prototipteki `konum = k - orta`, orta=2 formülü. */
.hedef-kart:nth-child(1) { transform: translate(-68px, 24px) rotate(-11deg) scale(1); z-index: 100; }
.hedef-kart:nth-child(2) { transform: translate(-34px, 16px) rotate(-5.5deg) scale(0.965); z-index: 99; }
.hedef-kart:nth-child(3) { transform: translate(0, 8px) rotate(0deg) scale(0.93); z-index: 98; }
.hedef-kart:nth-child(4) { transform: translate(34px, 24px) rotate(5.5deg) scale(0.895); z-index: 97; }
.hedef-kart:nth-child(5) { transform: translate(68px, 40px) rotate(11deg) scale(0.86); z-index: 96; }
.hedef-kart:nth-child(n+2) { pointer-events: none; }
.hedef-kart:nth-child(n+4) { opacity: 0; }

.hedef-sonraki {
  appearance: none; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--metin) 22%, transparent);
  background: transparent; color: var(--metin); font: 600 14px var(--govde-font);
  cursor: pointer; transition: transform 0.2s var(--yay), background 0.2s;
}
.hedef-sonraki:hover { transform: translateY(-2px); }
.hedef-sonraki:focus-visible { outline: 3px solid var(--altin); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hedef-kart { transition: none; }
  .hedef-sonraki:hover { transform: none; }
}

@media (max-width: 760px) {
  .sahne-hedefler { grid-template-columns: 1fr; padding-top: 100px; }
  .hedef-sahne { order: -1; margin-bottom: 12px; }
  /* Yelpaze ±68px açılıyor: deste dar ekranda kendisi daralır ki kartlar
     kenardan taşmasın. */
  .hedef-deste { width: min(240px, 60vw); margin-inline: auto; }
}