/* ══════════════════ PROFİL (Steam benzeri düzen) ══════════════════
   pages.css'teki temel profil kurallarının (kapak, başlık, şerit, akış)
   üzerine: oyunda durumu, iki sütunlu genel sekme, son oynananlar,
   yıllık ödüller ve tüm hareketler sayfası. */

/* ── Hareket akışı eklentileri ── */
.activity { padding: var(--s-2); }
.activity__row { grid-template-columns: 34px 64px minmax(0, 1fr) auto; }
.activity__icon--achievement { color: var(--gold); background: color-mix(in oklab, var(--gold) 14%, transparent); }
.activity__icon--play        { color: var(--ok);   background: color-mix(in oklab, var(--ok) 14%, transparent); }
.activity__badge { width: 34px; height: 34px; display: grid; place-items: center; }
.activity__badge .ach-badge--sm { width: 34px; height: 34px; }
@media (max-width: 620px) {
  .activity__row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s-2); }
  .activity__thumb { display: none; }
}

/* ── Kazanım kartı: satırlar alt alta (eskiden aynı satıra akıyordu) ── */
.ach-card__game,
.ach-card__title,
.ach-card__meta { display: block; }

/* ── Avatar ve oyunda durumu ── */
.profile-head__avatar-wrap { position: relative; flex-shrink: 0; display: inline-grid; border-radius: 50%; }
.profile-head__avatar-wrap.is-ingame .profile-head__avatar {
  box-shadow: 0 0 0 3px var(--ok), 0 0 28px -6px color-mix(in oklab, var(--ok) 70%, transparent), var(--shadow-lg);
}
.presence-dot {
  position: absolute; right: 7%; bottom: 7%;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok); border: 4px solid var(--bg);
}
@media (max-width: 560px) { .presence-dot { width: 18px; height: 18px; border-width: 3px; } }

.presence {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s-2);
  font-size: var(--fs-sm); color: var(--text-2);
}
.presence .ico { color: var(--text-3); }
.presence a, .presence b { color: var(--text); font-weight: 650; }
.presence a:hover { color: var(--accent); }
.presence__since { color: var(--text-3); }
.presence--ingame, .presence--ingame a, .presence--ingame b { color: var(--ok); }
.presence--ingame a:hover { color: var(--text); }
.presence__pulse {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok);
  animation: presence-pulse 1.8s var(--ease-out) infinite;
}
@keyframes presence-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 65%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
@media (prefers-reduced-motion: reduce) { .presence__pulse { animation: none; } }

.profile-tabs { margin-top: var(--s-6); width: max-content; max-width: 100%; }
.profile-body { margin-top: var(--s-6); }

/* ── İki sütun: solda akış, sağda özet ── */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 1040px) { .profile-layout { grid-template-columns: minmax(0, 1fr); } }
.profile-main { display: grid; gap: var(--s-8); min-width: 0; }
.profile-side { display: grid; gap: var(--s-4); min-width: 0; }
@media (min-width: 1041px) { .profile-side { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }

.pblock { min-width: 0; }
.pblock + .pblock { margin-top: var(--s-8); }
.profile-main > .pblock + .pblock { margin-top: 0; }
.pblock__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.pblock__title {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-md); font-weight: 740; letter-spacing: -0.02em;
}
.pblock__title .ico { color: var(--accent); }
.pblock__sub { font-size: var(--fs-xs); color: var(--text-3); font-weight: 560; }
.pblock__intro { font-size: var(--fs-sm); color: var(--text-3); margin: calc(var(--s-1) * -1) 0 var(--s-4); max-width: 70ch; }
.pblock__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.38rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: var(--fs-xs); font-weight: 650; color: var(--text-2);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.pblock__link:hover { color: var(--accent); border-color: var(--stroke-accent); }

/* ── Şu an oynuyor kartı ── */
.nowplay {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--ok) 38%, transparent);
  background: color-mix(in oklab, var(--ok) 7%, var(--bg-raise));
}
.nowplay__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) saturate(1.25); opacity: 0.4; transform: scale(1.25);
}
.nowplay::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 35%, transparent), color-mix(in oklab, var(--bg) 82%, transparent));
}
.nowplay__art {
  position: relative; width: 168px; aspect-ratio: 460 / 215;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-raise); box-shadow: var(--shadow-md);
}
.nowplay__art img { width: 100%; height: 100%; object-fit: cover; }
.nowplay__body { min-width: 0; display: grid; gap: 2px; }
.nowplay__label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 760; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ok);
}
.nowplay__title { font-size: var(--fs-lg); font-weight: 780; letter-spacing: -0.025em; }
.nowplay__meta { font-size: var(--fs-xs); color: var(--text-2); }
.nowplay__cta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); white-space: nowrap; }
a.nowplay:hover .nowplay__cta { color: var(--ok); }
@media (max-width: 620px) {
  .nowplay { grid-template-columns: 100px minmax(0, 1fr); }
  .nowplay__art { width: 100px; }
  .nowplay__cta { display: none; }
}

/* ── Son oynananlar ── */
.rgames { display: grid; gap: var(--s-2); }
.rgame {
  display: grid; grid-template-columns: 184px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--stroke);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
a.rgame:hover { background: var(--surface-2); border-color: var(--stroke-strong); }
.rgame__art {
  position: relative; width: 184px; aspect-ratio: 460 / 215;
  border-radius: 8px; overflow: hidden; background: var(--bg-raise);
}
.rgame__art img { width: 100%; height: 100%; object-fit: cover; }
.rgame__body { min-width: 0; display: grid; }
.rgame__title { font-weight: 720; font-size: var(--fs-base); letter-spacing: -0.01em; }
.rgame__meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.rgame__prog { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); min-width: 0; }
.rgame__bar {
  flex: 1 1 auto; max-width: 240px; height: 6px;
  border-radius: 99px; background: var(--surface-3); overflow: hidden;
}
.rgame__bar > span,
.award-card__bar > span,
.ach-card__bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.rgame__tier { font-size: var(--fs-xs); color: var(--text-2); font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgame__recent { text-align: right; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.rgame__recent b { display: block; color: var(--text); font-size: var(--fs-sm); font-weight: 720; }
@media (max-width: 700px) {
  .rgame { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-3); }
  .rgame__art { width: 112px; }
  .rgame__recent { display: none; }
}

.profile-favs { --col: 170px; }

/* ── Yan sütun kutuları ── */
.pbox { padding: var(--s-4); border-radius: var(--r-lg); }
.pbox__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs); font-weight: 740; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3);
}
.pbox__title a { text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--text-2); }
.pbox__title a:hover { color: var(--accent); }
.pbox__empty { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.55; }

.side-awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
.side-award { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.side-award__t { font-size: 10.5px; line-height: 1.25; color: var(--text-2); font-weight: 620; }
.side-award:hover .side-award__t { color: var(--text); }

.side-list { display: grid; gap: 2px; }
.side-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2); border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-out);
}
.side-item:hover { background: var(--surface); }
.side-item__body { min-width: 0; display: grid; }
.side-item__t { font-size: var(--fs-sm); font-weight: 680; }
.side-item__m { font-size: var(--fs-xs); color: var(--text-3); }

.side-facts { display: grid; }
.side-facts > div {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--stroke);
  font-size: var(--fs-sm);
}
.side-facts > div:last-child { border-bottom: 0; }
.side-facts dt { color: var(--text-3); }
.side-facts dd { font-weight: 680; }

.side-people { display: flex; flex-wrap: wrap; gap: 8px; }
.side-people a { border-radius: 50%; transition: transform var(--t-fast) var(--ease-out); }
.side-people a:hover { transform: translateY(-2px); }

/* ── Tüm hareketler: yıllar ve aylar ── */
.activity-years { margin: var(--s-2) 0; }
.activity-yearblock + .activity-yearblock { margin-top: var(--s-4); }
.activity-year {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-3);
  font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.035em;
}
.activity-year span { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--text-3); }
.activity-month {
  margin: var(--s-3) var(--s-3) var(--s-1);
  font-size: var(--fs-xs); font-weight: 740; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.activity-month:first-child { margin-top: var(--s-1); }
.activity-more { display: flex; justify-content: center; margin-top: var(--s-3); }

/* ── Yıllık ödül rozeti: altıgen (oyun kazanımı yuvarlaktır) ── */
.yaward {
  --c1: #F3C08B; --c2: #9C5B33; --ink: #2A1406; --glow: rgba(176, 110, 60, 0.35);
  position: relative; display: inline-grid; flex-shrink: 0;
  width: 50px; height: 56px;
  filter: drop-shadow(0 6px 12px var(--glow));
}
.yaward__hex {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--c1), var(--c2) 78%);
  color: var(--ink);
}
.yaward__hex::before {
  content: ""; position: absolute; inset: 3px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 55%);
}
.yaward__icon { position: relative; display: grid; place-items: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.yaward__lvl {
  position: absolute; bottom: 12%; left: 0; right: 0; text-align: center;
  font-size: 9px; font-weight: 850; letter-spacing: 0.06em;
}
.yaward__hex:has(.yaward__lvl) .yaward__icon { transform: translateY(-3px); }

.yaward--gumus    { --c1: #EEF2F6; --c2: #8E99AB; --ink: #1E232B; --glow: rgba(152, 162, 179, 0.4); }
.yaward--altin    { --c1: #FFE58A; --c2: #C98A0E; --ink: #2E1C00; --glow: rgba(255, 201, 75, 0.5); }
.yaward--platin   { --c1: #D6FFFB; --c2: #3FB4B8; --ink: #062526; --glow: rgba(79, 195, 199, 0.5); }
.yaward--elmas    { --c1: #CDEBFF; --c2: #3B82F6; --ink: #051B3D; --glow: rgba(59, 130, 246, 0.55); }
.yaward--efsanevi { --ink: #17102B; --glow: rgba(178, 109, 255, 0.55); }
.yaward--efsanevi .yaward__hex { background: conic-gradient(from 120deg, #FF6B6B, #FFC94B, #2FDFA0, #49A6FF, #B26DFF, #FF6B6B); }
.yaward--kilitli  { --c1: var(--surface-3); --c2: var(--surface-2); --ink: var(--text-3); --glow: transparent; }

.yaward--sm { width: 34px; height: 38px; }
.yaward--lg { width: 70px; height: 78px; }
.yaward--lg .yaward__lvl { font-size: 11px; }

/* ── Ödül kartı (kazanımlar sekmesi) ── */
.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-3); }
.award-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.award-card.is-locked { background: transparent; border-style: dashed; }
.award-card.is-locked .award-card__title { color: var(--text-3); }
.award-card__body { min-width: 0; flex: 1; }
.award-card__name { font-size: var(--fs-xs); color: var(--text-3); font-weight: 620; }
.award-card__title { font-weight: 740; font-size: var(--fs-base); margin-top: 1px; letter-spacing: -0.01em; }
.award-card__meta { font-size: var(--fs-xs); color: var(--text-2); margin-top: 4px; }
.award-card__bar,
.ach-card__bar {
  display: block; height: 5px; border-radius: 99px;
  background: var(--surface-3); overflow: hidden;
  margin-top: var(--s-2);
}
.award-card__desc { font-size: 11px; color: var(--text-3); margin-top: 6px; }