/* ============================================================
   Eylem Destesi (Action Deck)
   ------------------------------------------------------------
   SORUN: eylem sayısı arttıkça grid dikey büyüyor, sayfa scroll'a
   giriyor ve arka plan (career_background) aşağıda yarım kalıyor.

   ÇÖZÜM: sabit yükseklikli yatay ray. Kartlar dikey değil YATAY
   akıyor, konteyner asla büyümüyor, sayfa scroll'a girmiyor.
   Detaylar ayrı bir panelde — kart üstünde yer kaplamıyor.
   ============================================================ */

.action-deck {
  --deck-card-w: 104px;
  --deck-card-h: 116px;
  --deck-gap: 10px;
  position: relative;
  width: 100%;
  /* Sabit yükseklik: ray + detay paneli. Konteyner asla uzamaz. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 2px;
  contain: layout paint;
}

/* ── Ray ──────────────────────────────────────────────────── */

.deck-rail-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: calc(var(--deck-card-h) + 14px);
}

.deck-rail {
  display: flex;
  gap: var(--deck-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 6px 2px 8px;
  flex: 1;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
}
.deck-rail::-webkit-scrollbar { display: none; }

/* ── Kart ─────────────────────────────────────────────────── */

.deck-card {
  position: relative;
  flex: 0 0 var(--deck-card-w);
  width: var(--deck-card-w);
  height: var(--deck-card-h);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .22s cubic-bezier(.34,1.4,.64,1),
              background .18s ease, border-color .18s ease, box-shadow .18s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.deck-card:hover,
.deck-card:focus-visible {
  transform: translateY(-6px) scale(1.05);
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.24);
  outline: none;
}

.deck-card.is-active {
  background: rgba(129,140,248,0.16);
  border-color: rgba(129,140,248,0.55);
  box-shadow: 0 0 0 1px rgba(129,140,248,0.25), 0 6px 18px -8px rgba(99,102,241,0.7);
  transform: translateY(-4px) scale(1.03);
}

.deck-card:active { transform: translateY(-2px) scale(0.98); }

.deck-card.is-locked {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(0.7);
}
.deck-card.is-locked:hover { transform: none; background: rgba(255,255,255,0.045); }

.deck-card-icon {
  font-size: 30px;
  line-height: 1;
  transition: transform .22s cubic-bezier(.34,1.4,.64,1);
}
.deck-card:hover .deck-card-icon { transform: scale(1.14) rotate(-4deg); }

.deck-card-name {
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  color: rgba(255,255,255,0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rozetler */
.deck-badge {
  position: absolute;
  top: 5px;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: .2px;
}
.deck-badge-lock  { right: 5px; background: rgba(248,113,113,0.22); color: #fca5a5; }
.deck-badge-group { left: 5px;  background: rgba(96,165,250,0.20);  color: #93c5fd; }
.deck-badge-reco  { left: 5px;  background: rgba(52,211,153,0.20);  color: #6ee7b7; }

/* Kart giriş animasyonu — sırayla belirir */
@keyframes deckCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.deck-card { animation: deckCardIn .32s cubic-bezier(.22,1,.36,1) backwards; }

/* ── Ok butonları ─────────────────────────────────────────── */

.deck-arrow {
  flex: 0 0 26px;
  width: 26px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 15px;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
  user-select: none;
}
.deck-arrow:hover { background: rgba(255,255,255,0.12); transform: scale(1.06); }
.deck-arrow[disabled] { opacity: .22; cursor: default; transform: none; }

/* ── Detay paneli ─────────────────────────────────────────── */

.deck-detail {
  min-height: 96px;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.09);
  transition: opacity .18s ease, transform .18s ease;
}
.deck-detail.is-empty { opacity: .45; }

.deck-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.deck-detail-icon { font-size: 20px; line-height: 1; }
.deck-detail-title {
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
}
.deck-detail-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
}

/* Maliyet / ödül satırları */
.deck-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
  animation: deckChipIn .24s ease backwards;
}
@keyframes deckChipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.deck-chip-cost   { background: rgba(248,113,113,0.13); border-color: rgba(248,113,113,0.24); color: #fca5a5; }
.deck-chip-reward { background: rgba(52,211,153,0.13);  border-color: rgba(52,211,153,0.24);  color: #6ee7b7; }
.deck-chip-time   { background: rgba(148,163,184,0.13); border-color: rgba(148,163,184,0.24); color: #cbd5e1; }
.deck-chip-lock   { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.35); color: #fca5a5; }

.deck-section-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,255,255,0.34);
  margin: 7px 0 4px;
}

/* Sayfa göstergesi */
.deck-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: -2px;
}
.deck-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  transition: background .2s ease, width .2s ease;
}
.deck-dot.is-active { background: rgba(129,140,248,0.85); width: 12px; border-radius: 3px; }

/* ── Dar ekran ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .action-deck { --deck-card-w: 86px; --deck-card-h: 102px; }
  .deck-card-icon { font-size: 25px; }
  .deck-detail { min-height: 88px; }
  .deck-arrow { display: none; }   /* dokunmatikte parmakla kaydırılır */
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck-card-icon, .deck-chip, .deck-arrow, .deck-detail { animation: none; transition: none; }
  .deck-rail { scroll-behavior: auto; }
}