/* ==========================================================================
   Oyuncu detay sayfası — SAYFA ÖZEL kurallar. Kart/kv/stat/ratio/bar/pill/
   card-shape/rating/avatar site.css'te ortak; burada yalnız hero + bu
   sayfaya özgü küçük yerleşim ayrıntıları. design-tokens.md §9.7 birebir.
   ========================================================================== */

.player-page { padding-top: var(--sp-lg); }

/* -- Hero (.card-green.is-gradient zaten yeşil→koyu gradyanı veriyor) -- */
.player-hero { position: relative; overflow: hidden; padding: 26px 22px 22px; }
.player-hero-number {
  position: absolute; right: -14px; top: -20px;
  font: 800 172px/1 var(--font); letter-spacing: -8px;
  color: rgba(255, 255, 255, 0.09); pointer-events: none; user-select: none;
}
.player-hero-body { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 16px; }
.player-hero-avatar { flex: 0 0 auto; }
.player-hero-position { margin: 2px 0 4px; font: 600 12px var(--font); letter-spacing: 0.3px; text-transform: uppercase; color: var(--accent-soft); }
.player-hero-name { margin: 0 0 10px; font: 800 25px/1.12 var(--font); letter-spacing: -0.5px; color: #fff; }
.player-hero-chips { row-gap: 6px; }
.pill.is-strong { font-weight: 800; }
.pill.is-danger { background: var(--red); border-color: var(--red); color: #fff; }

/* -- Kartlar -------------------------------------------------------------- */
.player-card { display: flex; flex-direction: column; gap: 12px; }
.player-card .card-label { margin: 0; }
.player-card-rating { display: flex; align-items: center; gap: 8px; }
.player-stat-grid, .player-mini-grid { gap: 12px 16px; }
.player-ratios { gap: 10px; }

.player-card-empty { flex-direction: row; align-items: flex-start; gap: 12px; color: var(--ink-3); }
.player-card-empty svg { flex: 0 0 auto; margin-top: 2px; color: var(--ink-4); }
.player-card-empty p { margin: 0; }
.player-card-empty .h-card { color: var(--ink); margin-bottom: 4px; }

.player-discipline .row-between { align-items: center; }

.player-footnote { color: var(--ink-4); }

@media (max-width: 480px) {
  .player-hero-body { flex-direction: column; }
  .player-hero-number { font-size: 120px; right: -6px; top: -10px; }
  .player-stat-grid, .player-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}