/* ============================================================
   OMERTA · SOSYAL / META SAYFALAR (sayfa-özel bileşenler)
   Yalnızca rankings / profile / messages / register tarafından
   yüklenir. Ortak css'lere (tokens/base/layout) DOKUNMAZ; mevcut
   token ve class'ları (.panel/.btn/.badge/.stat-bar/.data-table/
   .input/.empty-state) yeniden kullanır, üstüne sayfa bileşenleri
   ekler. Neo-noir dilin aynısı.
   ============================================================ */

/* ============================================================
   PAYLAŞILAN SEKME ŞERİDİ (.tabs)  — rankings + messages
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--gold-a10);
  margin-bottom: 20px;
}
.tab {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  margin-bottom: -1px;
  color: var(--text-600);
  font: 600 var(--fs-md) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text-200); }
.tab.is-active { color: var(--gold-bright); border-bottom-color: var(--gold); }
.tab__count {
  font: 700 var(--fs-sm) var(--font-mono);
  min-width: 16px;
  height: 15px;
  padding: 0 4px;
  margin-left: 7px;
  border-radius: 8px;
  background: var(--blood);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* mini aile arması (satır içi) */
.crest-mini { display: block; border-radius: var(--r-round); flex: none; }

/* ============================================================
   RANKINGS
   ============================================================ */
.rank-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1280px) { .rank-layout { grid-template-columns: 1fr; } }

.rank-table td { vertical-align: middle; }
.rank-pos {
  font: 700 var(--fs-xl) var(--font-mono);
  color: var(--text-600);
  width: 46px;
}
.rank-pos--gold   { color: #e6c66a; text-shadow: 0 0 10px rgba(230,198,106,.5); }
.rank-pos--silver { color: #cdd3d8; text-shadow: 0 0 10px rgba(205,211,216,.4); }
.rank-pos--bronze { color: #d3924f; text-shadow: 0 0 10px rgba(211,146,79,.4); }

.rank-name-cell { display: flex; align-items: center; gap: 10px; }
.rank-name { font: 600 var(--fs-lg) var(--font-ui); color: var(--text-200); }
.rank-sub  { font: 500 var(--fs-sm) var(--font-ui); color: var(--text-700); letter-spacing: .04em; }
.rank-val  { font: 500 var(--fs-lg) var(--font-mono); color: var(--gold-bright); text-align: right; }

.data-table tbody tr.rank-row--you {
  background: var(--gold-a08);
  box-shadow: inset 3px 0 0 var(--gold);
}
.data-table tbody tr.rank-row--you .rank-name { color: var(--gold-bright); }
.rank-you-badge {
  font: 700 var(--fs-2xs) var(--font-ui);
  letter-spacing: .12em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  color: #120d06;
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.rank-gap-row td {
  text-align: center;
  color: var(--text-800);
  font: 500 var(--fs-lg) var(--font-mono);
  letter-spacing: .3em;
  padding: 6px 20px;
}

/* Hall of Fame */
.hof-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gold-a06);
}
.hof-item:last-child { border-bottom: none; }
.hof-item__season {
  font: 600 var(--fs-sm) var(--font-mono);
  letter-spacing: var(--ls-wide);
  color: var(--text-700);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hof-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hof-row__label {
  font: 600 var(--fs-2xs) var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-700);
  width: 92px;
  flex: none;
}
.hof-row__value { font: 600 var(--fs-md) var(--font-ui); color: var(--text-200); }
.hof-row__value--gold { color: var(--gold-bright); font-family: var(--font-mono); font-weight: 500; }

/* Sezon panosu — şampiyon rozetleri + mini istatistikler */
.season-medals__cap {
  font: 600 var(--fs-2xs) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-700);
  margin-bottom: 10px;
}
.season-medals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.season-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  flex: 1;
  min-width: 64px;
  background: linear-gradient(180deg, #181309, var(--surface-deep));
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-md);
}
.season-medal__crest { display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.season-medal__season {
  font: 700 var(--fs-2xs) var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-600);
}
.season-stats { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gold-a06); }
.season-stats .hof-row { justify-content: space-between; }

/* Server Tarihi — kalıcı olay kütüğü */
.hist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gold-a06);
}
.hist-item:last-child { border-bottom: none; }
.hist-item__icon { font-size: 14px; line-height: 1.3; flex: none; }
.hist-item__body { min-width: 0; }
.hist-item__day {
  font: 600 var(--fs-sm) var(--font-mono);
  letter-spacing: var(--ls-wide);
  color: var(--text-700);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hist-item__text { font: 500 var(--fs-md) var(--font-ui); color: var(--text-200); line-height: 1.35; }

/* Dünya Hakimi tarihi (kalıcı unvan) */
.ruler-hist {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--gold-a30);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #181309, var(--surface-deep));
}
.ruler-hist__crown { font-size: 18px; line-height: 1; filter: drop-shadow(0 0 5px rgba(230, 198, 106, .55)); flex: none; }
.ruler-hist__none { font: 500 var(--fs-md) var(--font-ui); color: var(--text-600); line-height: 1.35; }
.ruler-hist--held { border-style: solid; }
.ruler-hist__name { font: 700 var(--fs-lg) var(--font-display); color: var(--gold-bright); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) { .profile-layout { grid-template-columns: 1fr; } }

.profile-card { padding: 22px 20px; text-align: center; }
.profile-avatar {
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: var(--r-round);
  border: 1px solid var(--gold-a35);
  background: radial-gradient(circle at 30% 25%, #2a2419, var(--surface-deep));
  display: flex; align-items: center; justify-content: center;
  font: 700 38px var(--font-display);
  color: var(--gold-bright);
  box-shadow: var(--glow-gold);
}
.profile-name { font: 700 var(--fs-4xl) var(--font-display); color: var(--text-100); letter-spacing: var(--ls-tight); }
.profile-badges { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 16px; flex-wrap: wrap; }
.profile-online {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-sm) var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.profile-online--on  { color: var(--emerald-soft); }
.profile-online--off { color: var(--text-600); }

.profile-xp { text-align: left; margin: 6px 0 18px; }
.profile-meta { text-align: left; border-top: 1px solid var(--gold-a10); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.profile-meta__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-meta__key {
  font: 600 var(--fs-2xs) var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-700);
}
.profile-meta__val { font: 600 var(--fs-md) var(--font-ui); color: var(--text-300); }

.profile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1280px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  background: linear-gradient(180deg, #181309, var(--surface-deep));
  border: 1px solid var(--gold-a12);
  border-radius: var(--r-md);
  padding: 15px 14px;
}
.stat-tile__label {
  font: 600 var(--fs-2xs) var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-700);
}
.stat-tile__value { font: 500 var(--fs-4xl) var(--font-mono); color: var(--text-100); margin-top: 8px; line-height: 1; }
.stat-tile__sub { font: 500 var(--fs-sm) var(--font-mono); color: var(--text-600); margin-top: 6px; letter-spacing: .04em; }

/* achievements strip */
.ach-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1280px) { .ach-strip { grid-template-columns: repeat(2, 1fr); } }
.ach-badge {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, #181309, var(--surface-deep));
  border: 1px solid var(--gold-a12);
  border-radius: var(--r-md);
  padding: 13px 14px;
}
.ach-badge--locked { opacity: .4; filter: grayscale(.6); }
.ach-badge__medal {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-round);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  border: 1px solid var(--gold-a30);
  background: radial-gradient(circle at 30% 25%, #2a2419, var(--surface-void));
}
.ach-badge--earned .ach-badge__medal { color: var(--gold-bright); box-shadow: var(--glow-gold); }
.ach-badge__name { font: 700 var(--fs-md) var(--font-ui); color: var(--text-200); }
.ach-badge__desc { font: 400 var(--fs-sm) var(--font-ui); color: var(--text-700); margin-top: 3px; }

/* avatar picker */
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.avatar-opt {
  aspect-ratio: 1;
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-md);
  background: var(--surface-void);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.avatar-opt:hover { border-color: var(--gold-a35); transform: translateY(-2px); }
.avatar-opt.is-selected { border-color: var(--gold); box-shadow: var(--glow-gold); }
.avatar-opt img { width: 100%; height: 100%; }
.field-label {
  display: block;
  font: 600 var(--fs-sm) var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-600); margin-bottom: 8px;
}
.textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  background: var(--surface-input);
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-xs);
  padding: 10px 12px;
  color: var(--text-200);
  font: 400 var(--fs-md)/1.5 var(--font-ui);
  outline: none;
}
.textarea:focus { border-color: var(--gold-a45); }
.textarea::placeholder { color: var(--text-700); }

/* ============================================================
   MESSAGES
   ============================================================ */
.msg-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: stretch;
  /* sohbet alanı viewport'a uzasın; alttaki boşluk kapansın */
  min-height: calc(100vh - 220px);
}
@media (max-width: 1100px) { .msg-layout { grid-template-columns: 1fr; } }
/* her iki kolon da grid satır yüksekliğini doldurur (thread ↔ liste eşit) */
.msg-layout > .panel { display: flex; flex-direction: column; min-height: 0; }

.conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.conv-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gold-a06);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.conv-item:hover { background: var(--gold-a06); }
.conv-item.is-active { background: var(--gold-a12); box-shadow: inset 3px 0 0 var(--gold); }
.conv-avatar {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-round);
  border: 1px solid var(--gold-a28);
  background: radial-gradient(circle at 30% 25%, #2a2419, var(--surface-deep));
  display: flex; align-items: center; justify-content: center;
  font: 700 14px var(--font-display); color: var(--gold-bright);
}
.conv-body { flex: 1; min-width: 0; }
.conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conv-name { font: 600 var(--fs-md) var(--font-ui); color: var(--text-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font: 400 var(--fs-2xs) var(--font-mono); color: var(--text-700); flex: none; }
.conv-preview { font: 400 var(--fs-sm)/1.35 var(--font-ui); color: var(--text-600); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-unread {
  font: 700 var(--fs-2xs) var(--font-mono);
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--blood); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

.thread { display: flex; flex-direction: column; height: auto; }
.thread__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gold-a10);
  flex: none;
}
.thread__name { font: 700 var(--fs-xl) var(--font-display); color: var(--text-100); }
.thread__body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font: 400 var(--fs-md)/1.5 var(--font-ui);
}
.msg-bubble__time { display: block; font: 400 var(--fs-2xs) var(--font-mono); margin-top: 5px; opacity: .7; }
.msg-bubble--them {
  align-self: flex-start;
  background: var(--surface-inset);
  border: 1px solid var(--gold-a10);
  color: var(--text-300);
  border-top-left-radius: var(--r-xs);
}
.msg-bubble--me {
  align-self: flex-end;
  background: var(--gold-a12);
  border: 1px solid var(--gold-a30);
  color: var(--text-100);
  border-top-right-radius: var(--r-xs);
}
.thread__compose {
  display: flex; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--gold-a10);
  flex: none;
}
.thread__compose .input { flex: 1; }

/* announcements */
.ann-card {
  background: linear-gradient(180deg, var(--surface-ember), var(--surface-deep));
  border: 1px solid var(--gold-a16);
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.ann-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ann-card__title { font: 700 var(--fs-xl) var(--font-display); color: var(--text-100); }
.ann-card__time { font: 400 var(--fs-sm) var(--font-mono); color: var(--text-700); }
.ann-card__by { font: 600 var(--fs-sm) var(--font-ui); letter-spacing: .06em; color: var(--gold); margin-bottom: 8px; }
.ann-card__text { font: 400 var(--fs-md)/1.6 var(--font-ui); color: var(--text-400); }

/* ============================================================
   REGISTER (public — sidebar yok)
   ============================================================ */
.register-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px 60px;
}
.register-body {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
.reg-steps { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px 0 26px; }
.reg-step { display: flex; align-items: center; gap: 10px; }
.reg-step__dot {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-round);
  border: 1px solid var(--gold-a30);
  display: flex; align-items: center; justify-content: center;
  font: 700 var(--fs-md) var(--font-mono);
  color: var(--text-600);
  background: var(--surface-void);
}
.reg-step__label { font: 600 var(--fs-sm) var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-600); }
.reg-step.is-active .reg-step__dot { background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); color: #120d06; border-color: var(--gold); }
.reg-step.is-active .reg-step__label { color: var(--gold-bright); }
.reg-step.is-done .reg-step__dot { color: var(--emerald-soft); border-color: var(--emerald-a40); }
.reg-step__line { width: 40px; height: 1px; background: var(--gold-a20); }

.reg-card { max-width: 460px; margin: 0 auto; padding: 26px 28px; }
.reg-card--wide { max-width: 920px; }
.reg-card__title { font: 700 var(--fs-4xl) var(--font-display); color: var(--text-100); text-align: center; letter-spacing: var(--ls-tight); }
.reg-card__sub { font: 500 var(--fs-md) var(--font-ui); color: var(--text-600); text-align: center; margin-top: 8px; margin-bottom: 22px; letter-spacing: .04em; }

.field { margin-bottom: 16px; }
.field .input { width: 100%; padding: 11px 12px; font-size: var(--fs-md); }
.field .input.is-error { border-color: var(--blood); }
.field__error { font: 500 var(--fs-sm) var(--font-ui); color: var(--blood-soft); margin-top: 6px; min-height: 14px; }

/* ---- Soluk demo toggle'ı (hospital/jail deseniyle ortak) ---
   Üretim CTA'sı gibi durmaz: %50 opaklık + küçük; hover'da açılır. */
.demo-toggle {
  opacity: .5;
  transition: opacity var(--dur-fast) var(--ease);
}
.demo-toggle:hover,
.demo-toggle:focus-visible { opacity: 1; }

.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }
.city-card {
  text-align: left;
  background: linear-gradient(180deg, var(--surface-ember), var(--surface-deep));
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.city-card:hover { border-color: var(--gold-a35); transform: translateY(-2px); }
.city-card.is-selected { border-color: var(--gold); box-shadow: var(--glow-gold); }
.city-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.city-card__country {
  font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .16em;
  color: var(--text-700); border: 1px solid var(--gold-a20); padding: 2px 6px; border-radius: var(--r-xs);
}
.city-card__name { font: 700 var(--fs-2xl) var(--font-display); color: var(--text-100); line-height: 1.05; }
.city-card__fam { font: 600 var(--fs-sm) var(--font-ui); letter-spacing: .04em; margin: 6px 0 12px; }
.city-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--gold-a10); padding-top: 10px;
}
.city-card__players { font: 500 var(--fs-lg) var(--font-mono); color: var(--text-200); }
.city-card__cap { font: 600 var(--fs-2xs) var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-700); }

.reg-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 8px; }

.reg-success { text-align: center; padding: 40px 20px; }
.reg-success__crest {
  width: 120px; height: 120px; margin: 0 auto 22px;
  animation: omGlow 2.4s var(--ease) infinite, omFloat .7s var(--ease) both;
}
.reg-success__crest img { width: 100%; height: 100%; }
.reg-success__title { font: 700 var(--fs-5xl) var(--font-display); color: var(--text-100); letter-spacing: var(--ls-tight); }
.reg-success__tag { font-family: var(--font-accent); font-style: italic; font-size: clamp(18px, 2.2vw, 26px); color: var(--gold); margin: 12px 0 28px; }