/* =====================================================================
   CSPULSE — FACEIT ve siralama bilesenleri
   ===================================================================== */

/* ---------------------------------------------------------------------
   SIRALAMA KARTI  (Premier / FACEIT / Competitive)
   Ust satirda kaynak etiketi, ortada buyuk deger, altta baglam.
   --------------------------------------------------------------------- */
.rank-card {
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

/* Sol kenarda kademe rengi seridi — kartin kimligi */
.rank-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rank-color, var(--line));
}

.rank-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.rank-card__mode {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.rank-card__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--rank-color, var(--ink));
}

.rank-card__label {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.rank-card__meta {
  font-size: var(--fs-2xs);
  color: var(--ink-3);
}

/* Kaynak etiketi: veri nereden geldi (gc / oyuncu beyani / faceit) */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--s-1);
  border-radius: 3px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.source-tag--self { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ---------------------------------------------------------------------
   FACEIT SEVIYE ROZETI
   --------------------------------------------------------------------- */
.faceit-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--level-color, var(--line));
  background: color-mix(in srgb, var(--level-color, var(--line)) 12%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--level-color, var(--ink));
  line-height: 1;
}

.faceit-level--lg { width: 44px; height: 44px; font-size: var(--fs-lg); border-width: 2px; }

/* ELO ilerleme cubugu: bir sonraki seviyeye ne kadar kaldi */
.elo-bar {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.elo-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--level-color, var(--signal));
  transition: width var(--dur-slow) var(--ease);
}

/* ---------------------------------------------------------------------
   FACEIT BASLIK PANELI
   --------------------------------------------------------------------- */
.faceit-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--s-5);
}

.faceit-head__nick {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

@media (max-width: 620px) {
  .faceit-head { grid-template-columns: auto minmax(0, 1fr); }
  .faceit-head > :last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   SON MAC SERISI  (W/L noktalari)
   --------------------------------------------------------------------- */
.streak { display: inline-flex; gap: var(--s-1); }

.streak__dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  background: var(--surface-3);
  color: var(--ink-3);
}
.streak__dot--w {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok);
}
.streak__dot--l {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
}

/* ---------------------------------------------------------------------
   SIRALAMA IZGARASI
   --------------------------------------------------------------------- */
.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}

/* Veri bagli degilse gosterilen sessiz kart */
.rank-card--empty {
  border-style: dashed;
  background: var(--bg-elevated);
}
.rank-card--empty .rank-card__value {
  font-size: var(--fs-lg);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------
   FACEIT MAC GECMISI SATIRLARI
   Sonuc rengine boyanmis satirlar; sag tarafta soluklasan harita gorseli.
   --------------------------------------------------------------------- */
.fm-list { display: grid; gap: var(--s-2); }

.fm-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.fm-row:hover { transform: translateY(-1px); color: var(--ink); }

/* sagda soluklasan harita gorseli */
.fm-row::before {
  content: "";
  position: absolute;
  inset: 0 0 0 35%;
  z-index: -1;
  background: var(--fm-img, none) center / cover no-repeat;
  opacity: .16;
  -webkit-mask: linear-gradient(90deg, transparent, #000 65%);
          mask: linear-gradient(90deg, transparent, #000 65%);
  transition: opacity var(--dur) var(--ease);
}
.fm-row:hover::before { opacity: .3; }

/* sonuc tonlari: sol serit + hafif renk yikamasi */
.fm-row--w {
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
  background: linear-gradient(90deg, var(--ok-wash), var(--surface) 50%);
}
.fm-row--l {
  border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
  background: linear-gradient(90deg, var(--danger-wash), var(--surface) 50%);
}

.fm-row__result {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  background: var(--surface-3);
  color: var(--ink-3);
}
.fm-row--w .fm-row__result {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
  color: var(--ok);
}
.fm-row--l .fm-row__result {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}

.fm-row__main { display: grid; gap: 2px; min-width: 0; }
.fm-row__map  { font-family: var(--font-display); font-size: var(--fs-md); }
.fm-row__date { font-size: var(--fs-2xs); color: var(--ink-3); }

.fm-row__score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.fm-row--w .fm-row__score { color: var(--ok); }
.fm-row--l .fm-row__score { color: var(--danger); }

.fm-row__go { color: var(--ink-3); font-size: var(--fs-sm); }
.fm-row:hover .fm-row__go { color: var(--ink); }