/* ============ TOKENS (Selçuklu paleti: turkuaz / lacivert / kiremit / fildişi) ============ */
:root{
  color-scheme: light;
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --border:    rgba(0,0,0,0.16);
  --text:      #111111;
  --muted:     #666666;
  --accent:    #111111;
  --accent-2:  #444444;
  --accent-ink:#ffffff;
  --accent-2-ink:#ffffff;
  --team-a:    #c1442e;
  --team-b:    #1c3f72;
  --good:      #2f8f5f;
  --shadow:    0 1px 2px rgba(0,0,0,0.08);
  --shadow-lift: 0 8px 22px rgba(0,0,0,0.14);

  --fac-vlandia: #9a2f2f;
  --fac-battania:#2f6b3f;
  --fac-sturgia: #2f5f78;
  --fac-empire:  #6b3f96;
  --fac-aserai:  #2f8f7a;
  --fac-khuzait: #b06a26;

  --series-1: #2563eb; /* piyade */
  --series-2: #ea580c; /* okcu   */
  --series-3: #059669; /* suvari */
  --chart-grid: #ececec;


}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:        #050403;
    --surface:   #0d0b08;
    --surface-2: #14110c;
    --border:    rgba(214,162,58,0.24);
    --text:      #f8fafc;
    --muted:     #a8a29e;
    --accent:    #fbbf24;
    --accent-2:  #f97316;
    --accent-ink:#120b04;
    --accent-2-ink:#180d05;
    --team-a:    #fb7185;
    --team-b:    #4ade80;
    --good:      #4ade80;
    --shadow:    0 1px 3px rgba(0,0,0,0.5);
    --shadow-lift: 0 10px 30px rgba(0,0,0,0.6);
    --fac-vlandia: #ef5350;
    --fac-battania:#6cc86c;
    --fac-sturgia: #5ec8dc;
    --fac-empire:  #b18ee0;
    --fac-aserai:  #5cd6c0;
    --fac-khuzait: #e0a15c;
    --series-1: #38bdf8;
    --series-2: #fb923c;
    --series-3: #34d399;
    --chart-grid: rgba(248,250,252,0.08);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:        #050403;
  --surface:   #0d0b08;
  --surface-2: #14110c;
  --border:    rgba(214,162,58,0.24);
  --text:      #f8fafc;
  --muted:     #a8a29e;
  --accent:    #fbbf24;
  --accent-2:  #f97316;
  --accent-ink:#120b04;
  --accent-2-ink:#180d05;
  --team-a:    #fb7185;
  --team-b:    #4ade80;
  --good:      #4ade80;
  --shadow:    0 1px 3px rgba(0,0,0,0.5);
  --shadow-lift: 0 10px 30px rgba(0,0,0,0.6);
  --fac-vlandia: #ef5350;
  --fac-battania:#6cc86c;
  --fac-sturgia: #5ec8dc;
  --fac-empire:  #b18ee0;
  --fac-aserai:  #5cd6c0;
  --fac-khuzait: #e0a15c;
  --series-1: #38bdf8;
  --series-2: #fb923c;
  --series-3: #34d399;
  --chart-grid: rgba(248,250,252,0.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background-color:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, sans-serif;
  line-height:1.45;
}
h1,h2,h3{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; text-wrap:balance; letter-spacing:-0.01em; }
.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
a{ color:inherit; }

/* ============ SHELL / NAV ============ */
.shell{
  max-width:1040px; margin:0 auto; padding:1.5rem 1.25rem 4rem;
  animation:shell-in 0.45s ease-out both;
}
@keyframes shell-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .shell{ animation:none; } }

/* Ust bar: sayfa kayarken ustte kalir (sticky), buzlu cam zemin. Iki satir:
   logo + eylemler (dil, admin kilidi, mobil menu) / sekmeler. .shell'in
   kenar boslugunu tasiyip kenardan kenara uzanir. */
.cmdbar{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand . actions" "nav nav nav";
  align-items:center; column-gap:1rem; row-gap:0.7rem;
  margin:-1.5rem -1.25rem 1.75rem; padding:0.85rem 1.25rem 0.75rem;
  background:linear-gradient(180deg, rgba(14,11,8,.98), rgba(10,8,6,.95));
  -webkit-backdrop-filter:blur(12px) saturate(1.25); backdrop-filter:blur(12px) saturate(1.25);
  border-bottom:1px solid rgba(214,162,58,.22);
  box-shadow:0 14px 32px -22px rgba(0,0,0,.95);
}
.cmdbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--accent-2) 20%, var(--accent) 50%, var(--accent-2) 80%, transparent);
  opacity:.55;
}
.brand{ grid-area:brand; display:flex; align-items:center; gap:0.7rem; text-decoration:none; min-width:0; }
.brand-logo{
  width:2.5rem; height:2.5rem; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--accent);
  box-shadow:var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.brand h1{ font-size:1.3rem; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:0.06em; }
.brand .sub{ display:block; font-family:"Inter",sans-serif; font-size:0.7rem; color:var(--muted); font-weight:500; }

/* Dil secici (bkz. static/i18n.js) - .brand'in hemen arkasina eklenir;
   margin-left:auto dar ekranda alt satira dustugunde de saga yaslar. */
.lang-switch{
  display:flex; gap:2px; padding:3px; border-radius:999px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
}
.lang-btn{
  display:flex; align-items:center; gap:0.4rem; cursor:pointer;
  font-family:"Inter",sans-serif; font-size:0.74rem; font-weight:700; letter-spacing:0.04em;
  color:var(--muted); background:transparent; border:0; border-radius:999px;
  padding:0.3rem 0.65rem 0.3rem 0.4rem; transition:color 0.15s, background-color 0.15s;
}
.lang-btn:hover{ color:var(--text); }
.lang-btn[aria-pressed="true"]{ color:var(--accent-ink); background:var(--accent); }
.lang-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lang-flag{
  width:1.35rem; height:0.9rem; border-radius:2px; flex-shrink:0; display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}

/* Sag ustteki eylemler: dil secici (i18n.js buraya ekler), admin kilidi,
   mobil menu butonu. */
.cmd-actions{ grid-area:actions; display:flex; align-items:center; gap:0.5rem; }
.icon-btn{
  display:grid; place-items:center; width:2.25rem; height:2.25rem; flex-shrink:0;
  color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:10px; cursor:pointer; text-decoration:none;
  transition:color .15s, border-color .15s, background-color .15s, box-shadow .15s;
}
.icon-btn:hover{
  color:var(--accent); border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:0 0 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.icon-btn.active{ color:var(--accent-ink); background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; }
.nav-toggle{ display:none; }
.nav-toggle .ic-close{ display:none; }
.nav-toggle[aria-expanded="true"] .ic-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .ic-close{ display:block; }

/* Sekmeler: tek satirlik bolmeli serit. Sigmazsa yana kayar (alt satira
   dusmez). Aktif sekme altin cerceveli ve alti parlak cizgili. */
nav.tabs{
  grid-area:nav; display:flex; gap:0.2rem; overflow-x:auto; scrollbar-width:none;
  padding:0.25rem; border-radius:12px;
  background:rgba(255,255,255,.025); border:1px solid rgba(214,162,58,.16);
}
nav.tabs::-webkit-scrollbar{ display:none; }
nav.tabs a{
  position:relative; flex:1 0 auto; text-align:center; white-space:nowrap;
  font-family:"Inter",sans-serif; font-size:0.86rem; font-weight:600;
  text-decoration:none; color:var(--muted);
  padding:0.5rem 0.85rem; border-radius:9px;
  transition:color .15s, background-color .15s, box-shadow .15s;
}
nav.tabs a:hover{ color:var(--text); background:color-mix(in srgb, var(--accent) 8%, transparent); }
nav.tabs a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
nav.tabs a.active{
  color:#fde68a;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
nav.tabs a.active::after{
  content:""; position:absolute; left:22%; right:22%; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 8px var(--accent);
}

/* Dar ekran: sekmeler menu butonunun arkasina saklanir, acilinca alt alta. */
@media (max-width:760px){
  .cmdbar{ grid-template-columns:1fr auto; grid-template-areas:"brand actions" "nav nav"; row-gap:0; padding:0.7rem 1rem; margin:-1.5rem -1.25rem 1.25rem; }
  .brand h1{ font-size:1.05rem; }
  .brand .sub{ font-size:0.64rem; }
  .nav-toggle{ display:grid; }
  nav.tabs{ display:none; flex-direction:column; overflow:visible; margin-top:0.7rem; }
  .cmdbar.nav-open nav.tabs{ display:flex; }
  nav.tabs a{ text-align:left; padding:0.7rem 0.9rem; }
  nav.tabs a.active::after{ left:0.9rem; right:auto; width:1.5rem; }
}
@media (max-width:420px){
  .brand .sub{ display:none; }
  .lang-btn span{ display:none; }
  .lang-btn{ padding:0.3rem 0.4rem; }
}

.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:0.9rem; flex-wrap:wrap; }
.section-head h2{
  font-size:1.05rem; font-weight:600; margin:0; text-transform:uppercase; letter-spacing:0.05em;
  position:relative; padding-left:0.75rem;
}
.section-head h2::before{
  content:""; position:absolute; left:0; top:0.15em; bottom:0.15em; width:4px; border-radius:2px;
  background:linear-gradient(var(--accent), var(--accent-2));
}
.section-head .meta{ color:var(--muted); font-size:0.85rem; }
.rule{ border:none; border-top:1px solid var(--border); margin:0 0 1.5rem; }

/* ============ ALL-TIME HIGH MMR REKORU (tum sayfalarda, cmdbar altinda) ============
   Player.mmr sezon gecisinde dustugu icin gecmis zirveyi tutmuyor - bu serit
   common/records.py'nin mac gecmisinden (mmr_after) hesapladigi, HIC
   DUSMEYEN tum-zamanlar rekorunu gosterir. Kasitli olarak buyuk ve altin
   cerceveli - "hall of fame" plaketi gibi okunsun diye. */
.record-banner{
  margin:0 0 1.85rem; padding:3px; border-radius:12px;
  background:linear-gradient(120deg, var(--accent-2), var(--accent) 45%, #fde68a 55%, var(--accent) 65%, var(--accent-2));
  box-shadow:var(--shadow-lift);
}
.record-banner[hidden]{ display:none; }
.record-banner-inner{
  position:relative; overflow:hidden; border-radius:14px;
  background:var(--surface);
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  padding:1.15rem 1.5rem;
}
.record-banner-inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:14px;
  margin:4px;
}
.record-crown{ font-size:2.8rem; line-height:1; flex:0 0 auto; position:relative; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15)); }
.record-copy{ display:flex; flex-direction:column; gap:0.35rem; flex:1 1 260px; min-width:0; position:relative; }
.record-eyebrow{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--muted); }
/* Rekor sahibinin ADI seridin basligi - en buyuk yazi o. */
.record-holder{ display:flex; align-items:center; gap:0.8rem; min-width:0; }
.record-holder .p-avatar{ width:3.4rem; height:3.4rem; flex-shrink:0; border-width:2px; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.record-holder .p-name{
  font-family:"Space Grotesk","Inter",sans-serif; font-size:clamp(1.6rem, 4.5vw, 2.6rem); font-weight:800;
  line-height:1.1; color:var(--text); text-decoration:none; overflow-wrap:anywhere;
}
.record-holder .p-name:hover{ color:var(--accent); }
.record-value{ font-family:"Space Grotesk","Inter",sans-serif; font-size:1.15rem; font-weight:800; color:var(--accent); line-height:1.15; }
.record-empty{ position:relative; color:var(--muted); font-size:0.88rem; }
.record-history-link{
  position:relative; flex:0 0 auto; white-space:nowrap;
  font-family:"Inter",sans-serif; font-size:0.78rem; font-weight:700;
  color:var(--accent); text-decoration:none; border:1px solid var(--accent);
  border-radius:20px; padding:0.35rem 0.8rem; transition:background-color 0.15s, color 0.15s;
}
.record-history-link:hover{ background:var(--accent); color:var(--accent-ink); }
@media (max-width:640px){ .record-banner-inner{ padding:1rem 1.1rem; } .record-crown{ font-size:2rem; } .record-holder .p-avatar{ width:2.6rem; height:2.6rem; } }

/* ============ ŞAMPİYONLAR TARİHİ / HALL OF FAME (sezon-arsivi.html) ============ */
.hof-table td, .hof-table th{ padding-left:0.4rem; padding-right:0.4rem; }
.hof-table td{ vertical-align:middle; }
.hof-table th{ white-space:nowrap; }
.hof-cell{ display:flex; align-items:center; gap:0.4rem; }
.hof-cell .p-avatar{ width:1.4rem; height:1.4rem; flex-shrink:0; }
.hof-cell-text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.hof-cell-text .hof-name{ font-weight:600; font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96px; }
.hof-cell-text .hof-stat{ font-size:0.7rem; color:var(--muted); font-family:"JetBrains Mono",monospace; white-space:nowrap; }
.hof-empty{ color:var(--muted); font-size:0.82rem; }
.hof-cell.hof-carry{ opacity:0.55; }
.hof-record-tag{
  display:inline-block; margin-top:0.15rem; font-size:0.58rem; font-weight:700; letter-spacing:0.02em;
  color:var(--accent-ink); background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:3px; padding:0.05rem 0.3rem; white-space:nowrap;
}
.hof-season-current{ color:var(--accent); font-weight:700; }

.live-dot{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--good); }
.live-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--good); animation:pulse 1.8s infinite; }
@media (prefers-reduced-motion: reduce){ .live-dot::before{ animation:none; } }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5);} 70%{box-shadow:0 0 0 6px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }

/* ============ LIVE MATCH (kompakt kartlar, 4 mac ayni anda sigar) ============ */
.fac-flag{ width:14px; height:20px; border-radius:2px; flex:0 0 auto; }
.canli-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap:1rem; }
.canli-kart{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.ck-bas{
  position:relative; display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.8rem; min-height:44px;
  background-color:var(--surface-2);
  background-image:linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.35)), var(--harita, linear-gradient(transparent, transparent));
  background-size:cover; background-position:center;
  color:#f3ede2; font-size:0.78rem;
}
.ck-sol{ display:flex; align-items:center; gap:0.55rem; }
.ck-bas .live-dot{ color:#4ade80; }
.ck-id{ opacity:.75; font-size:0.72rem; }
.ck-harita{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; font-size:0.86rem; margin-left:auto; }
.ck-sunucu{ font-size:0.72rem; padding:0.1rem 0.5rem; border:1px solid rgba(255,255,255,.28); border-radius:999px; white-space:nowrap; }
.ck-skor{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.6rem; padding:0.7rem 0.85rem 0.55rem; }
.ck-takim{ display:flex; align-items:center; gap:0.5rem; min-width:0; }
.ck-takim.b{ justify-content:flex-end; text-align:right; }
.ck-takim .civ-icon{ width:30px; height:30px; object-fit:contain; flex:0 0 auto; }
.ck-takim span{ display:flex; flex-direction:column; min-width:0; }
.ck-takim b{ font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-takim small{ font-size:0.7rem; text-transform:capitalize; }
.ck-sayi{ font-size:1.9rem; font-weight:700; display:flex; align-items:center; gap:0.3rem; line-height:1; }
.ck-sayi .a{ color:var(--team-a); } .ck-sayi .b{ color:var(--team-b); }
.ck-sayi i{ color:var(--muted); font-style:normal; font-size:1.2rem; }
.ck-kadro{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); }
.ck-kadro ul{ list-style:none; margin:0; padding:0.35rem 0.6rem 0.5rem; min-width:0; }
.ck-kadro ul + ul{ border-left:1px solid var(--border); }
.ck-kadro li{ display:flex; align-items:center; gap:0.45rem; padding:0.2rem 0; min-width:0; }
.ck-kadro .rol-emoji{ width:16px; height:16px; margin:0; flex:0 0 auto; }
.ck-kadro .p-avatar{ width:1.65rem; height:1.65rem; border-radius:6px; }
.ck-kadro .p-name{ font-size:0.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ck-kadro .igl-badge{ font-size:0.55rem; padding:0.06rem 0.3rem; }
.p-name{ font-weight:600; font-size:0.9rem; flex:1 1 auto; }
.igl-badge{ font-size:0.6rem; font-weight:700; letter-spacing:0.04em; background:var(--accent); color:var(--accent-ink); padding:0.12rem 0.4rem; border-radius:3px; flex:0 0 auto; }

/* ============ AVATAR (Discord/Steam profil fotografi) ============ */
.p-avatar{
  width:1.6rem; height:1.6rem; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid var(--border); background:var(--surface-2); vertical-align:middle;
}
.player-cell{ display:flex; align-items:center; gap:0.55rem; }
.mvp-tag .p-avatar{ width:1.1rem; height:1.1rem; margin-right:0.15rem; }

.empty,.error{ color:var(--muted); text-align:center; padding:2rem; }

/* ============ YUKLEME ANIMASYONU (loader) ============ */
.loader{
  display:inline-block; width:1.3rem; height:1.3rem; vertical-align:middle;
  border-radius:50%; border:2.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color:var(--accent-2);
  animation:spin 0.7s linear infinite;
}
.loader-row{ display:flex; align-items:center; justify-content:center; gap:0.6rem; color:var(--muted); padding:2rem; font-size:0.88rem; }
.loader-block{ display:flex; align-items:center; justify-content:center; gap:0.6rem; color:var(--muted); padding:3rem 1rem; font-size:0.9rem; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .loader{ animation:none; border-top-color:var(--accent-2); } }

/* ============ GİRİŞ EKRANI (gürz vuruşlu, dolan yükleme çubuklu açılış) ============
   Siteye ilk baglanildiginda bir kerelige oynar (sessionStorage ile
   tekrarlanmaz - sekmeler arasi gezinme sirasinda tekrar tekrar oynayip
   "bunaltici" olmasin diye). Arka planda "Skirmish Matchmaking" gorseli,
   gürzün vurdugu noktada ritmik kivilcim/sarsinti darbeleri, altta gercek
   yuzdeyle dolan bir yukleme cubugu var. */
.intro-splash{
  /* Acilis ekrani: tek merkezi kompozisyon. Onceki surumde ekran ikiye
     bolunuyordu (ustte fotograf, altta ayri koyu bir bar + kalin ilerleme
     cubugu); fotograf 16:9 ekranlarda kotu kirpiliyor, "sarsilma" animasyonu
     ucuz duruyordu. Artik fotograf sadece ATMOSFER: karartilmis, yavas
     yaklasan bir zemin. On planda sitenin kendi arması, Cinzel ile dizilmis
     baslik, ince altin bir cizgi ve 2px'lik bir ilerleme hattı var - hepsi
     ayni dikey eksende. */
  --intro-duration: 2.2s;
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  background:#080602;
  display:grid; place-items:center;
  cursor:pointer;
}
.intro-splash.done{ animation:intro-fadeout 0.7s cubic-bezier(.4,0,.2,1) forwards; }
.intro-splash.skip{ display:none !important; animation:none !important; }
@keyframes intro-fadeout{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* --- Zemin: fotograf, kisik ve yavas yaklasan --- */
.intro-bg{
  position:absolute; inset:0;
  background:url("img/loading-screen.jpg?v=2026092002") center center/cover no-repeat;
  opacity:.32; filter:saturate(.82) contrast(1.05);
  transform-origin:center 28%;
  transform:scale(1.30);
  animation:intro-push 7s cubic-bezier(.2,.6,.3,1) both;
}
@keyframes intro-push{ from{ transform:scale(1.30); } to{ transform:scale(1.13); } }

/* Kenarlari karartip merkeze bakis toplayan vinyet + alttan sicak bir kor. */
.intro-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,6,2,0) 42%, rgba(8,6,2,.72) 72%, rgba(6,4,1,.97) 100%),
    radial-gradient(118% 88% at 50% 44%, rgba(8,6,2,0) 0%, rgba(8,6,2,.5) 54%, rgba(6,4,1,.93) 100%),
    radial-gradient(70% 40% at 50% 104%, rgba(196,124,32,.18) 0%, rgba(196,124,32,0) 70%);
}

/* --- Yukselen korlar --- */
.intro-embers{ position:absolute; inset:0; overflow:hidden; }
.intro-embers i{
  position:absolute; left:var(--x); bottom:-12px;
  width:3px; height:3px; border-radius:50%;
  background:#ffb24d; box-shadow:0 0 7px 2px rgba(255,150,40,.55);
  opacity:0; transform:scale(var(--s));
  animation:intro-ember var(--d) linear infinite;
}
@keyframes intro-ember{
  0%{ transform:translate(0,0) scale(var(--s)); opacity:0; }
  12%{ opacity:var(--o); }
  70%{ opacity:var(--o); }
  100%{ transform:translate(26px,-78vh) scale(calc(var(--s) * .4)); opacity:0; }
}

/* --- On plan --- */
.intro-core{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:.85rem; padding:0 1.5rem; text-align:center;
  width:min(520px, 100%);
  animation:intro-rise .9s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes intro-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.intro-crest{ position:relative; display:grid; place-items:center; width:112px; height:112px; }
.intro-crest img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.8));
}
/* Armanin cevresinde bir kere donen ince altin halka - "muhur aciliyor" hissi. */
.intro-ring{
  position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(226,182,92,.42);
  border-top-color:rgba(255,224,160,.95);
  animation:intro-seal 2.4s cubic-bezier(.5,0,.2,1) both;
}
@keyframes intro-seal{
  from{ transform:rotate(0deg) scale(.82); opacity:0; }
  25%{ opacity:1; }
  to{ transform:rotate(410deg) scale(1); opacity:.75; }
}

.intro-title{
  margin:0; font-family:"Cinzel","Source Sans 3",serif; font-weight:600;
  font-size:clamp(1.35rem, 5.2vw, 2.05rem); line-height:1.1;
  letter-spacing:.16em; text-indent:.16em;
  color:#f6e9cd;
  text-shadow:0 2px 20px rgba(0,0,0,.9), 0 0 34px rgba(212,160,60,.22);
}
.intro-rule{ display:flex; align-items:center; gap:.7rem; width:100%; max-width:330px; color:#d9ad52; }
.intro-rule span{ flex:1 1 auto; height:1px; background:linear-gradient(90deg,rgba(217,173,82,0),rgba(217,173,82,.75)); }
.intro-rule span:last-of-type{ background:linear-gradient(90deg,rgba(217,173,82,.75),rgba(217,173,82,0)); }
.intro-rule b{ font-size:.7rem; line-height:1; opacity:.9; }

.intro-tag{
  margin:0; font-family:"Space Grotesk","Source Sans 3",sans-serif;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(233,214,176,.62);
}

/* Kalin cubuk yerine ince bir hat - fotografin onunde daha az yer kaplasin. */
.intro-bar{
  width:100%; max-width:330px; height:2px; margin-top:.55rem;
  background:rgba(233,214,176,.14); border-radius:2px; overflow:hidden;
}
.intro-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#8a5f1c,#e2b65c 60%,#fff0c9);
  box-shadow:0 0 12px rgba(255,190,90,.7);
}
.intro-status{
  margin:0; width:100%; max-width:330px;
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:"Space Grotesk","Source Sans 3",sans-serif;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(233,214,176,.55);
}
.intro-pct{ font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; color:rgba(233,214,176,.8); }

@media (prefers-reduced-motion: reduce){
  .intro-splash.done{ animation:intro-fadeout .3s ease forwards; }
  .intro-bg,.intro-ring,.intro-core{ animation:none; }
  .intro-bg{ transform:none; }
  .intro-embers{ display:none; }
}

/* ============ FILTER ROW ============ */
.filters{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.filters select, .filters input{
  font-family:"Inter",sans-serif; font-size:0.85rem;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:0.4rem 0.6rem;
}
.filters input{ flex:1 1 180px; min-width:140px; }
.filters select:focus, .filters input:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* ============ PODYUM (leaderboard.html - ilk 3) ============ */
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:1rem; margin:0 0 2rem; flex-wrap:wrap; }
.podium-step{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:190px; min-height:150px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:1rem 0.8rem 0.9rem; text-align:center;
  box-shadow:var(--shadow); transition:transform 0.15s;
}
.podium-step .medal{ font-size:1.8rem; line-height:1; margin-bottom:0.35rem; }
.podium-step .p-avatar{ width:3.2rem; height:3.2rem; border-width:2px; margin-bottom:0.4rem; }
.podium-step .p-name{ font-weight:700; font-size:0.95rem; margin-bottom:0.2rem; }
.podium-step .p-mmr{ font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--accent); font-size:1.2rem; }
.podium-step .p-meta{ font-size:0.72rem; color:var(--muted); margin-top:0.35rem; }
.podium-step.rank-1{
  order:2; min-height:190px; border-color:#eab308; z-index:1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
  box-shadow:0 10px 24px rgba(234,179,8,0.3);
}
.podium-step.rank-1 .p-avatar{ width:4rem; height:4rem; border-color:#eab308; }
.podium-step.rank-2{ order:1; min-height:160px; opacity:0.97; }
.podium-step.rank-3{ order:3; min-height:145px; opacity:0.94; }
@media (max-width:640px){
  .podium{ flex-direction:column; align-items:stretch; }
  .podium-step{ width:auto; min-height:auto !important; }
  .podium-step.rank-1{ order:0; } .podium-step.rank-2{ order:1; } .podium-step.rank-3{ order:2; }
}

/* ============ LEDGER TABLE (leaderboard + match history) ============ */
.table-wrap{ overflow-x:auto; }
.ledger{ width:100%; border-collapse:collapse; }
.ledger th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:600; padding:0 0.6rem 0.5rem; border-bottom:2px solid var(--border); white-space:nowrap; }
.ledger td{ padding:0.55rem 0.6rem; border-bottom:1px solid var(--border); font-size:0.88rem; white-space:nowrap; }
.ledger tbody tr:hover{ background:var(--surface); }
.ledger .rank{ width:2.4rem; color:var(--muted); font-weight:700; }
.ledger .player{ font-weight:600; }
.ledger .num{ text-align:right; }
.wr-cell{ display:flex; align-items:center; gap:0.5rem; justify-content:flex-end; }
.wr-bar{ width:64px; height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.wr-bar > span{ display:block; height:100%; background:var(--accent); }
.wr-pct{ width:2.6rem; text-align:right; }
.win-tag{ color:var(--good); font-weight:700; font-size:0.78rem; }
.loss-tag{ color:var(--team-a); font-weight:700; font-size:0.78rem; }
.mvp-tag{ font-size:0.72rem; color:var(--accent); font-weight:600; }

/* ============ MATCH HISTORY DETAY (per-player K/D/A) ============ */
.detail-btn{
  font-family:"Inter",sans-serif; font-size:0.76rem; font-weight:600; cursor:pointer;
  background:var(--surface-2); color:var(--accent); border:1px solid var(--border); border-radius:5px;
  padding:0.28rem 0.6rem; white-space:nowrap;
}
.detail-btn:hover{ border-color:var(--accent); }
.detail-row td{ padding:0.8rem 0.6rem 1.1rem; background:var(--surface); border-bottom:1px solid var(--border); }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .detail-grid{ grid-template-columns:1fr; } }
/* Mac gecmisi KARTLARI (bkz. app.js -> initMatchHistoryPage): ustte harita gorseli,
   ortada takimlar + buyuk skor, altta yari skorlari, MVP ve Detay butonu. */
.mac-liste{ display:grid; gap:0.9rem; }
.mac-kart{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; }
.mac-kart:hover{ border-color:color-mix(in srgb, var(--accent) 65%, transparent); transform:translateY(-1px); box-shadow:var(--shadow-lift); }
.mac-kart.acik{ border-color:var(--accent); cursor:default; transform:none; }
.mk-bas{ display:flex; align-items:center; gap:0.7rem; padding:0.75rem 1rem; min-height:64px; color:#f3ede2;
  background-color:var(--surface-2); background-size:cover; background-position:center;
  background-image:linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.25)), var(--harita, linear-gradient(transparent, transparent)); }
.mk-harita{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:0.04em; text-transform:uppercase; }
.mk-id{ font-size:0.74rem; opacity:.8; }
.mk-tarih{ margin-left:auto; font-size:0.78rem; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:0.15rem 0.6rem; }
.mk-govde{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.8rem; padding:0.95rem 1rem 0.7rem; }
.mk-takim{ display:flex; align-items:center; gap:0.6rem; min-width:0; opacity:.62; }
.mk-takim.kazandi{ opacity:1; }
.mk-takim.b{ flex-direction:row-reverse; text-align:right; }
.mk-takim .civ-icon{ width:38px; height:38px; flex:0 0 auto; }
.mk-takim > span{ display:flex; flex-direction:column; min-width:0; }
.mk-takim b{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-takim small{ font-size:0.74rem; }
.mk-rozet{ font-style:normal; font-size:0.62rem; font-weight:800; letter-spacing:0.08em; color:var(--accent-ink); background:var(--accent);
  border-radius:999px; padding:0.16rem 0.5rem; flex:0 0 auto; }
.mk-skor{ display:flex; align-items:center; gap:0.45rem; font-size:2.3rem; font-weight:700; line-height:1; color:var(--muted); }
.mk-skor .kazanan{ color:var(--accent); text-shadow:0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.mk-skor i{ font-style:normal; font-size:1.4rem; opacity:.6; }
.mk-alt{ display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 1rem; padding:0.55rem 1rem 0.8rem; border-top:1px solid var(--border); font-size:0.8rem; }
.mk-yarilar{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.mac-kart.acik .mk-yarilar{ display:none; }   /* acik kartta ayni skorlar detaydaki butonlarda */
.mk-yari{ --bc:var(--accent); color:var(--bc); border:1px solid color-mix(in srgb, var(--bc) 50%, transparent);
  background:color-mix(in srgb, var(--bc) 10%, transparent); border-radius:999px; padding:0.12rem 0.6rem; font-weight:600; }
.mk-yari.b1{ --bc:#38bdf8; } .mk-yari.b2{ --bc:#a78bfa; } .mk-yari.b3{ --bc:#f97316; }
.mk-yari b{ margin-left:0.25rem; }
.mk-mvp{ display:inline-flex; align-items:center; gap:0.3rem; color:var(--accent); font-weight:600; margin-left:auto; min-width:0; }
.mk-mvp .p-avatar{ width:1.3rem; height:1.3rem; }
.mk-mvp b{ color:var(--text); font-weight:500; margin-left:0.25rem; }
.mk-alt .detail-btn{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; padding:0.4rem 0.9rem; }
.mk-alt .detail-btn:hover{ filter:brightness(1.1); }
.mk-detay{ padding:0.9rem 1rem 1rem; border-top:1px solid var(--border); background:var(--surface-2); cursor:default; }
@media (max-width:640px){
  .mk-govde{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .mk-takim, .mk-takim.b{ flex-direction:row; text-align:left; }
  .mk-mvp{ margin-left:0; }
}
/* Mac detayi: yari skorlari + round tablosu (bkz. app.js -> macDetayi) */
tr.history-row{ cursor:pointer; }
/* Liderlik tablolari: her satir ayri bir kart (bkz. leaderboard.html -> .lider-tablo). */
.lider-tablo{ border-collapse:separate; border-spacing:0 7px; }
.lider-tablo th{ border-bottom:0; padding-bottom:0.2rem; }
.lider-tablo td{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:0.6rem 0.7rem; }
.lider-tablo td:first-child{ border-left:1px solid var(--border); border-radius:12px 0 0 12px; }
.lider-tablo td:last-child{ border-right:1px solid var(--border); border-radius:0 12px 12px 0; }
.lider-tablo tbody tr{ transition:transform .15s, filter .15s; }
.lider-tablo tbody tr:hover{ background:none; transform:translateX(3px); filter:brightness(1.18); }
.lider-tablo tbody tr:hover td{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.lider-tablo tr.oynamadi td{ opacity:.55; }
.lider-tablo .p-avatar{ width:2rem; height:2rem; }
.lider-tablo .player-link{ font-size:0.93rem; }
.sira-rozet{ display:inline-grid; place-items:center; min-width:1.9rem; height:1.9rem; padding:0 0.3rem; border-radius:8px;
  font-weight:700; font-size:0.82rem; color:var(--text); background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.kazanc{ color:var(--good); font-weight:700; } .kayip{ color:var(--team-a); font-weight:700; }
.mmr-sayi{ color:var(--accent); font-size:1.02rem; }
.mmr-degisim{ font-family:"JetBrains Mono",monospace; font-weight:700; }
.kd-kucuk{ display:block; font-size:0.66rem; color:var(--muted); font-weight:500; margin-top:0.1rem; }
/* Kalibrasyon rozeti: kac kalibrasyon maci oynandi + ilerleme cubugu */
.kal-rozet{ display:inline-grid; grid-template-columns:auto auto; gap:0.1rem 0.45rem; align-items:center; font-size:0.72rem;
  color:#38bdf8; background:color-mix(in srgb, #38bdf8 10%, transparent); border:1px solid color-mix(in srgb, #38bdf8 45%, transparent);
  border-radius:9px; padding:0.22rem 0.55rem 0.3rem; font-weight:600; text-align:left; }
.kal-rozet b{ color:var(--text); font-size:0.8rem; }
.kal-cubuk{ grid-column:1 / -1; display:block; height:4px; border-radius:2px; background:color-mix(in srgb, #38bdf8 22%, transparent); overflow:hidden; }
.kal-cubuk > i{ display:block; height:100%; background:#38bdf8; border-radius:2px; }
.lider-tablo .wr-bar{ width:92px; height:8px; border-radius:4px; }
.wr-bar.iyi > span{ background:linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 60%, #fff)); }
.wr-bar.kotu > span{ background:var(--team-a); }
/* Podyum: altin / gumus / bronz cerceve ve isilti */
.podium-step{ width:215px; position:relative; overflow:hidden; }
.podium-step::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--pc, var(--border)); }
.podium-step.rank-1{ --pc:#fbbf24; } .podium-step.rank-2{ --pc:#cbd5e1; } .podium-step.rank-3{ --pc:#d08a4e; }
.podium-step.rank-2, .podium-step.rank-3{ border-color:color-mix(in srgb, var(--pc) 55%, transparent); box-shadow:0 8px 22px color-mix(in srgb, var(--pc) 16%, transparent); opacity:1; }
.podium-step:hover{ transform:translateY(-4px); }
@media (max-width:640px){ .podium-step{ width:100%; } }   /* telefonda podyum kartlari tam genislik */
.podium-step .p-avatar{ border-color:var(--pc); }
.podium-step .p-name{ font-size:1rem; }
.podium-step .p-mmr{ display:flex; align-items:center; justify-content:center; gap:0.3rem; margin-top:0.2rem; }
.podium-step .p-mmr small{ font-size:0.7rem; color:var(--muted); font-weight:600; }
.podium-step .p-meta{ display:flex; align-items:center; gap:0.45rem; font-size:0.76rem; margin-top:0.55rem; padding-top:0.5rem;
  border-top:1px solid var(--border); width:100%; justify-content:center; }
/* Liderlik tablosu: tiklanabilir sutun basliklari */
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--accent); }
th.sortable.sort-desc::after{ content:" ▼"; color:var(--accent); }
th.sortable.sort-asc::after{ content:" ▲"; color:var(--accent); }
.rt-ozet{ display:flex; flex-wrap:wrap; gap:0.4rem 1.3rem; margin-bottom:0.7rem; font-size:0.82rem; color:var(--muted); }
/* Yari secimi: her bolumun kendi rengi var (1. yari mavi, 2. yari mor, grup savasi turuncu,
   toplam altin); secili olan dolu, digerleri cerceveli. Round basliklari ve sutunlari ayni renkte. */
.detail-row{ --p1:#38bdf8; --p2:#a78bfa; --p3:#f97316; }
.rt-yari{ --bc:var(--accent); font:inherit; font-size:0.8rem; font-weight:600; color:var(--bc); cursor:pointer;
  background:color-mix(in srgb, var(--bc) 12%, transparent); border:1.5px solid color-mix(in srgb, var(--bc) 55%, transparent);
  border-radius:999px; padding:0.32rem 0.9rem; transition:background-color .15s, box-shadow .15s, transform .15s; }
.rt-yari.b1{ --bc:var(--p1); } .rt-yari.b2{ --bc:var(--p2); } .rt-yari.b3{ --bc:var(--p3); }
.rt-yari b{ color:inherit; margin-left:0.3rem; font-size:0.92rem; }
.rt-yari:hover{ background:color-mix(in srgb, var(--bc) 28%, transparent); transform:translateY(-1px); }
.rt-yari.aktif{ background:var(--bc); border-color:var(--bc); color:#0b0906;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bc) 30%, transparent); }
.rt-kaydir{ overflow-x:auto; }
.round-table{ width:100%; border-collapse:collapse; font-size:0.8rem; }
.round-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.04em; padding:0.2rem 0.45rem; white-space:nowrap; }
.detail-row .round-table td{ padding:0.26rem 0.45rem; background:none; border-bottom:0; border-top:1px solid var(--border); white-space:nowrap; }
.round-table .num{ text-align:right; }
/* Round'lar: basliklar bolum renginde etiket, sutunlar ayni rengin acik tonu. */
.round-table .p1{ --pc:var(--p1); } .round-table .p2{ --pc:var(--p2); } .round-table .p3{ --pc:var(--p3); }
.rt-round{ display:inline-block; min-width:2.1rem; text-align:center; font-family:"JetBrains Mono",monospace; font-size:0.72rem;
  font-weight:700; letter-spacing:0; color:#0b0906; background:var(--pc); border-radius:4px; padding:0.14rem 0.35rem; }
.detail-row .round-table td.p1, .detail-row .round-table td.p2, .detail-row .round-table td.p3{
  background:color-mix(in srgb, var(--pc) 8%, transparent); }
.round-table th.rt-ayrac, .detail-row .round-table td.rt-ayrac{ border-left:2px solid var(--pc, var(--border)); }
.detail-row .round-table .rt-takim td{ padding-top:0.7rem; font-size:0.84rem; }
.round-table .rt-takim .civ-icon{ margin:0 0.3rem 0 0.35rem; }
.round-table .rt-takim small{ margin-left:0.3rem; }
.rt-kazanan{ display:inline-block; min-width:1.7rem; text-align:center; font-family:"JetBrains Mono",monospace; font-size:0.72rem; font-weight:700; border-radius:4px; padding:0.14rem 0.35rem; }
.rt-kazanan.t1{ background:var(--team-a); color:#0b0906; }
.rt-kazanan.t2{ background:var(--team-b); color:#0b0906; }
.detail-team h4{ margin:0 0 0.5rem; font-family:"Space Grotesk","Inter",sans-serif; font-size:0.82rem; font-weight:700; }
.kda-table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
.kda-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; padding:0.2rem 0.4rem; }
.kda-table td{ padding:0.28rem 0.4rem; border-top:1px solid var(--border); }
.kda-table .num{ text-align:right; font-family:"JetBrains Mono",monospace; }

/* ============ CIVILIZATION STATS ============ */
.civ-list{ display:flex; flex-direction:column; gap:0.85rem; }
.civ-row{ display:grid; grid-template-columns:150px 1fr 90px; align-items:center; gap:0.75rem; }
.civ-name{ display:flex; align-items:center; gap:0.5rem; font-weight:600; font-size:0.9rem; }
.civ-swatch{ width:12px; height:16px; border-radius:2px; flex:0 0 auto; }

/* ============ HARİTA HAVUZU (haritalar.html) ============ */
.map-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0.8rem;
  max-width:100%;
}
.map-card{
  min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
/* En-boy orani KAYNAK GORSELLE ayni (1280x620). 16/9 iken object-fit:cover
   kenarlardan kirpiyor ve haritanin uzerine basili adi/bayrak etiketleri
   (A/B/C, T1 SPAWN) kesiliyordu. */
.map-thumb{
  position:relative;
  width:100%;
  aspect-ratio:64/31;
  background:var(--surface-2);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Gorseli olmayan harita: kirik resim yerine haritanin bas harfi. */
.map-thumb-empty{
  font-family:"Cinzel",serif;
  font-size:1.9rem;
  font-weight:600;
  color:var(--border);
  line-height:1;
}
.map-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}
.map-card.has-image:hover .map-thumb img{ transform:scale(1.025); }
.map-card-body{
  padding:0.55rem 0.65rem 0.7rem;
}
.map-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.45rem;
  min-width:0;
}
.map-name{
  display:block;
  min-width:0;
  font-weight:700;
  font-size:0.76rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.map-percent{
  flex:0 0 auto;
  color:var(--accent-2);
  font-size:0.72rem;
}
.map-usage-track{
  height:6px;
  margin-top:0.5rem;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}
.map-usage-fill{
  display:block;
  height:100%;
  min-width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .35s ease;
}
.map-usage-meta{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:0.15rem 0.45rem;
  margin-top:0.38rem;
  color:var(--muted);
  font-size:0.67rem;
}
.map-usage-meta strong{ color:var(--text); }
.map-played{ grid-column:1 / -1; color:var(--muted); }

@media (max-width:900px){
  .map-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .map-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.65rem; }
  .map-card-body{ padding:0.45rem 0.55rem; }
  .map-name{ font-size:0.74rem; }
}

/* ============ ÇOKLU CANLI MAÇ (index.html) ============ */
.live-count{ color:var(--muted); font-size:0.88rem; margin:0 0 1rem; }

/* ============ MEDENİYET ARMALARI (Discord özel emojileriyle aynı resimler) ============ */
.civ-icon{ width:1.15rem; height:1.15rem; flex:0 0 auto; vertical-align:-0.22em; border-radius:50%; }
.civ-icon-md{ width:1.7rem; height:1.7rem; }
.civ-icon-lg{ width:2.4rem; height:2.4rem; }
.civ-cell{ display:flex; align-items:center; gap:0.4rem; }
/* td'de flex YOK: hucre tablo hucresi olmaktan cikip satirdaki digerleriyle hizasini kaybediyordu. */
td.civ-cell{ display:table-cell; white-space:nowrap; }
td.civ-cell .civ-icon{ margin-right:0.3rem; }
td.civ-cell span + .civ-icon{ margin-left:0.15rem; }
.civ-track{ height:16px; background:var(--border); border-radius:4px; overflow:hidden; position:relative; }
.civ-fill{ height:100%; border-radius:4px 0 0 4px; }
.civ-meta{ text-align:right; font-size:0.8rem; color:var(--muted); }
.civ-meta strong{ color:var(--text); font-family:"JetBrains Mono",monospace; }

.footnote{ margin-top:2.5rem; padding:0.9rem 1.1rem; border:1px dashed var(--border); border-radius:14px; font-size:0.82rem; color:var(--muted); background:var(--surface); }
.footnote strong{ color:var(--text); }

/* ============ OYUNCU ADI LINKI (leaderboard/rol tablolari -> profile.html) ============ */
.player-link{ color:var(--text); text-decoration:none; font-weight:600; }
.player-link:hover{ color:var(--accent); text-decoration:underline; }

/* ============ ROL BAZLI LIDERLIK (leaderboard.html) ============ */
.role-tabs{ display:flex; gap:0.4rem; margin-bottom:0.9rem; }
.role-tab{
  font-family:"Inter",sans-serif; font-size:0.82rem; font-weight:600; cursor:pointer;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border); border-radius:5px;
  padding:0.4rem 0.8rem; transition:background-color 0.15s, color 0.15s, border-color 0.15s;
}
.role-tab:hover{ color:var(--text); border-color:var(--accent); }
.role-tab.active{
  color:var(--accent-ink); border-color:var(--accent-2);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:var(--shadow);
}

/* ============ OYUNCU PROFILI (profile.html) ============ */
.profile-head{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.profile-head h2{ font-size:1.4rem; margin:0; }
.profile-mmr{ font-family:"JetBrains Mono",monospace; font-size:1.1rem; color:var(--accent); font-weight:700; }
.league-pill{
  display:inline-flex; align-items:center; gap:0.3rem; margin-left:0.6rem;
  font-family:"Inter",sans-serif; font-size:0.78rem; font-weight:700;
  color:var(--accent-ink); padding:0.25rem 0.7rem; border-radius:20px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:var(--shadow); vertical-align:middle;
}
.profile-avatar{ width:4.5rem; height:4.5rem; border-radius:50%; object-fit:cover; border:2px solid var(--accent); box-shadow:var(--shadow); flex-shrink:0; }
/* align-items:flex-start olmadan sutun icindeki rozet/pill'ler kolonun tam
   genisligine YAYILIYORDU (lig rozeti ekranin yarisini kapliyordu) -
   flex'in varsayilan "stretch" davranisi. */
.profile-head-text{ display:flex; flex-direction:column; align-items:flex-start; gap:0.3rem; }
.profile-head-text .league-pill{ margin-left:0; }

.stat-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.75rem; margin-bottom:1.75rem; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:0.85rem 1rem; box-shadow:var(--shadow); }
.stat-tile .label{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:600; }
.stat-tile .value{ font-family:"JetBrains Mono",monospace; font-size:1.35rem; font-weight:700; margin-top:0.2rem; }

.badge-row{ display:flex; flex-direction:column; gap:0.9rem; margin-bottom:1.75rem; }
.badge-group-label{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); margin-bottom:0.4rem;
}
.badge-group-label .mono{ color:var(--muted); font-weight:600; }
.badge-row-inner{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.badge-chip{
  display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8rem; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:0.35rem 0.8rem;
}

.mmr-chart-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1rem 1.1rem; margin-bottom:1.75rem; box-shadow:var(--shadow); overflow-x:auto; }
.mmr-chart-wrap svg{ display:block; }
.mmr-chart-wrap text{ fill:var(--muted); font-family:"JetBrains Mono",monospace; font-size:10px; }
.mmr-chart-wrap .mmr-line{ fill:none; stroke:var(--accent); stroke-width:2; }
.mmr-chart-wrap .mmr-area{ fill:var(--accent); opacity:0.12; }
.mmr-chart-wrap .mmr-dot{ fill:var(--accent); }
.mmr-chart-wrap .grid-line{ stroke:var(--chart-grid); stroke-width:1; }

.role-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.85rem; }
.role-stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:0.9rem 1rem; box-shadow:var(--shadow); }
.role-stat-card h4{ margin:0 0 0.5rem; font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; }
.role-stat-card .rs-line{ font-size:0.82rem; color:var(--muted); display:flex; justify-content:space-between; padding:0.15rem 0; }
.role-stat-card .rs-line strong{ color:var(--text); font-family:"JetBrains Mono",monospace; }

/* ============ OYUNCU ARAMA (profile.html - profil bul / karşılaştır) ============ */
.profile-lookup{ max-width:440px; margin:2.5rem auto; text-align:center; }
.profile-lookup p{ color:var(--muted); font-size:0.9rem; margin-bottom:1.1rem; }
.player-search{ position:relative; }
.player-search input{
  width:100%; font-family:"Inter",sans-serif; font-size:0.92rem;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:0.65rem 0.9rem;
}
.player-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.player-search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:5; text-align:left;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-lift); max-height:280px; overflow-y:auto;
}
.player-search-results[hidden]{ display:none; }
.player-search-empty{ padding:0.65rem 0.9rem; color:var(--muted); font-size:0.85rem; }
.player-search-result{
  display:flex; align-items:center; gap:0.55rem; padding:0.5rem 0.75rem;
  cursor:pointer; font-size:0.86rem; border-top:1px solid var(--border);
}
.player-search-result:first-child{ border-top:none; }
.player-search-result:hover{ background:var(--surface); }
.player-search-result .mmr{ margin-left:auto; color:var(--muted); font-family:"JetBrains Mono",monospace; font-size:0.76rem; }

/* ============ OYUNCU KARŞILAŞTIRMA (profile.html) - .section-head yeniden
   kullanılır (h2 + buton, aynı satırda) ============ */
.compare-toggle-btn{
  font-family:"Inter",sans-serif; font-size:0.82rem; font-weight:600; cursor:pointer;
  background:var(--surface-2); color:var(--accent); border:1px solid var(--border); border-radius:999px;
  padding:0.42rem 0.95rem; margin-left:auto; white-space:nowrap;
}
.compare-toggle-btn:hover{ border-color:var(--accent); }
.compare-panel{ margin-top:0.25rem; }
.compare-panel[hidden]{ display:none; }
.compare-picker{ max-width:380px; margin-bottom:1.25rem; }
.compare-grid{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:1.1rem 1.25rem; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr auto 1fr; gap:0.15rem 1.25rem; align-items:center;
}
@media (max-width:640px){ .compare-grid{ grid-template-columns:1fr; } .compare-vs{ padding:0.4rem 0; } }
.compare-player-head{
  display:flex; align-items:center; gap:0.6rem; padding-bottom:0.7rem; margin-bottom:0.3rem;
  border-bottom:2px solid var(--border); grid-column:1;
}
.compare-player-head.side-b{ grid-column:3; }
@media (max-width:640px){ .compare-player-head.side-b{ grid-column:1; } }
.compare-player-head .p-avatar{ width:2.3rem; height:2.3rem; }
.compare-player-head .p-name{ font-weight:700; font-size:0.92rem; }
.compare-row-label{
  grid-column:1 / -1; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); text-align:center; padding-top:0.6rem;
}
@media (max-width:640px){ .compare-row-label{ padding-top:0.9rem; text-align:left; } }
.compare-value{
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.05rem;
  padding:0.3rem 0.5rem; border-radius:8px; text-align:center;
}
.compare-value.side-b{ grid-column:3; }
@media (max-width:640px){ .compare-value.side-b{ grid-column:1; } }
.compare-value.better{ background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }
.compare-empty{ color:var(--muted); font-size:0.88rem; text-align:center; padding:1.5rem; }

/* ============ ROZET İLERLEMESİ (profile.html) ============ */
.progress-intro{ color:var(--muted); font-size:0.85rem; margin:0 0 1.25rem; }
.progress-intro a{ color:var(--accent); }
.progress-group{ margin-bottom:1.6rem; }
.progress-group-label{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); font-weight:700; margin-bottom:0.65rem; }
.progress-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:0.75rem; }
.progress-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:0.8rem 0.95rem; box-shadow:var(--shadow); }
.progress-card.done{ opacity:0.72; }
.progress-card.locked{ opacity:0.6; }
.progress-card-head{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.5rem; }
.progress-label{ font-weight:700; font-size:0.84rem; }
.progress-tier{ margin-left:auto; font-size:0.74rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.progress-tier.done{ color:var(--good); }
.progress-tier.muted{ color:var(--muted); font-weight:600; }
.progress-track{ height:6px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden; }
.progress-fill{ height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent)); transition:width 0.4s ease; }
.progress-card.done .progress-fill{ background:var(--good); }
.progress-status{ margin-top:0.5rem; font-size:0.77rem; color:var(--muted); line-height:1.45; }

/* ============ ROZET KATALOĞU (rozetler.html) ============ */
.badge-catalog-intro{ color:var(--muted); font-size:0.9rem; margin-bottom:1.75rem; max-width:660px; }
.badge-catalog-group{ margin-bottom:2.25rem; }
.badge-catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0.85rem; }
.badge-def-card{
  display:flex; gap:0.8rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:0.9rem 1.05rem; box-shadow:var(--shadow);
}
.badge-def-emoji{ font-size:1.6rem; line-height:1; flex:0 0 auto; }

/* ---- Rozet armalari ----
   Her rozet kademesinin kendi SVG armasi var (tools/generate_badges.py).
   Uc boy: profil cipinde kucuk, katalog kartinda buyuk. */
.badge-art{
  flex:0 0 auto; height:auto;
  /* inline-block: tablo hucresinde/satir ici metinde ARMA sayiyi alt satira
     itmesin (display:block iken "◆ / 2050 MMR" diye iki satir oluyordu).
     Flex kapsayicilarda (rozet kartlari) zaten flex item olarak davranir. */
  display:inline-block; vertical-align:middle;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
/* Lig armasi + MMR ayni satirda kalsin. */
td.num, .p-mmr{ white-space:nowrap; }
td .badge-art, .p-mmr .badge-art{ margin-right:.3rem; }
.badge-art-sm{ width:22px; }
.badge-art-md{ width:34px; }
.badge-art-lg{ width:58px; }
.badge-art-fallback{ font-size:1.3rem; line-height:1; flex:0 0 auto; }
.badge-chip{ padding-left:0.45rem; }
.badge-chip .badge-art{ margin:-2px 0; }
@media (max-width:640px){ .badge-art-lg{ width:46px; } }
/* Rozet adindaki rol emojisi (bkz. app.js -> rolEmojili) - Discord'daki
   ozel rol emojisiyle AYNI resim. */
.rol-emoji,
.stat-emoji{ width:1.25em; height:1.25em; vertical-align:-0.28em; margin-right:0.25em; }
.badge-def-name{ font-weight:700; font-size:0.86rem; margin-bottom:0.25rem; }
.badge-def-desc{ font-size:0.79rem; color:var(--muted); line-height:1.4; }

/* ============ SEZON ARŞİVİ (sezon-arsivi.html) ============
   Liderlik tablosundaki ilk-3 podyumuyla (bkz. .podium/.podium-step) AYNI
   dilde ama 5 kişilik: her kategori bir sıra podyum kartı olarak gösterilir,
   1. sıradaki kart hafifçe büyütülüp altın çerçeveyle öne çıkarılır. */
.top5-grid{ display:flex; align-items:stretch; justify-content:center; gap:0.85rem; flex-wrap:wrap; margin-bottom:0.5rem; }
.top5-card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  width:148px; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:1.35rem 0.7rem 0.9rem; box-shadow:var(--shadow);
}
.top5-card .rank-chip{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-family:"JetBrains Mono",monospace; font-size:0.68rem; font-weight:700; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:0.1rem 0.5rem;
}
.top5-card .medal{ font-size:1.5rem; line-height:1; margin-bottom:0.3rem; }
.top5-card .p-avatar{ width:2.5rem; height:2.5rem; border-width:1.5px; margin-bottom:0.45rem; }
.top5-card .p-name{
  font-weight:700; font-size:0.84rem; margin-bottom:0.25rem; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.top5-card .stat-value{ font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--accent); font-size:1.1rem; }
.top5-card .stat-meta{ font-size:0.68rem; color:var(--muted); margin-top:0.3rem; line-height:1.3; }
.top5-card.rank-1{
  border-color:#eab308; transform:scale(1.06); z-index:1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
  box-shadow:0 10px 24px rgba(234,179,8,0.28);
}
.top5-card.rank-1 .p-avatar{ width:3rem; height:3rem; border-color:#eab308; }
.top5-card.rank-1 .stat-value{ font-size:1.25rem; }
@media (max-width:640px){
  .top5-card{ width:110px; padding:1.2rem 0.5rem 0.75rem; }
  .top5-card.rank-1{ transform:none; }
}

/* ============ ADMIN PANEL (admin.html) ============ */
.admin-gate{ max-width:420px; margin:3rem auto; text-align:center; }
.admin-gate input{ width:100%; font-family:"JetBrains Mono",monospace; font-size:0.95rem; padding:0.6rem 0.8rem; border:1px solid var(--border); border-radius:5px; background:var(--surface-2); color:var(--text); margin:0.75rem 0; }
.admin-gate button{ font-family:"Inter",sans-serif; font-weight:700; font-size:0.9rem; padding:0.6rem 1.2rem; border-radius:999px; border:none; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); cursor:pointer; box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent); }

.admin-section{ margin-bottom:2.25rem; }
.admin-section h3{ font-size:0.95rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.75rem; }
.report-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:0.9rem 1.1rem; margin-bottom:0.7rem; box-shadow:var(--shadow); }
.report-card .rc-head{ display:flex; justify-content:space-between; gap:0.75rem; align-items:baseline; margin-bottom:0.35rem; flex-wrap:wrap; }
.report-card .rc-kind{ font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:0.15rem 0.5rem; border-radius:4px; }
.report-card .rc-kind.hile{ background:var(--team-a); color:#fff; }
.report-card .rc-kind.itiraz{ background:var(--series-1); color:#fff; }
.report-card .rc-msg{ font-size:0.88rem; }
.resolve-btn{ font-family:"Inter",sans-serif; font-size:0.76rem; font-weight:600; cursor:pointer; background:var(--surface-2); color:var(--good); border:1px solid var(--border); border-radius:5px; padding:0.3rem 0.7rem; margin-top:0.5rem; }
.resolve-btn:hover{ border-color:var(--good); }

/* Profil basligindaki "beyan edilen tercihler" satiri (class/IGL/dogrulama) */
.pref-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
.pref-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.26rem .6rem; border-radius:999px;
  font-size:.75rem; letter-spacing:.02em;
  background:rgba(233,214,176,.07);
  border:1px solid rgba(233,214,176,.16);
  color:var(--text, #e9d6b0); text-decoration:none;
}
.pref-pill b{ font-weight:700; }
a.pref-pill:hover{ border-color:rgba(233,214,176,.42); }
.pref-pill.pref-ok{ background:rgba(59,165,93,.12); border-color:rgba(59,165,93,.38); color:#7fd79b; }
.pref-pill.pref-warn{ background:rgba(214,90,60,.12); border-color:rgba(214,90,60,.4); color:#e59178; }
.pref-pill.pref-igl{ background:rgba(201,162,39,.14); border-color:rgba(201,162,39,.45); color:#e2b65c; }
.pref-pill.pref-muted{ opacity:.6; }

/* Haritalar & Medeniyetler tek sayfada - ikinci bolum basligi ilk bolumun
   kartlarina yapismasin diye nefes payi. */
#map-list + #medeniyetler { margin-top: 46px; }


/* === BANNERLORD HALL BACKGROUND — FULL PAGE === */
/* Visual-only background; existing layout and functionality remain unchanged. */
html {
  background: #080706 !important;
}

body {
  position: relative !important;
  z-index: 0 !important;
  background: #080706 !important;
  isolation: isolate !important;
}

/* Fixed artwork covers the whole viewport, so it cannot end halfway down a page. */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(5, 5, 6, .72), rgba(5, 5, 6, .86)),
    url('./assets/bannerlord-hall.jpg') center center / cover no-repeat !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 38%, rgba(0,0,0,.45)),
    linear-gradient(90deg, rgba(0,0,0,.20), transparent 28%, transparent 72%, rgba(0,0,0,.22)) !important;
}

/* Keep the existing content readable while allowing the artwork to remain visible. */
header, .header, .navbar {
  background: rgba(10, 8, 7, .88) !important;
  backdrop-filter: blur(7px) !important;
  border-bottom-color: rgba(194, 145, 68, .42) !important;
}

.card, .panel, .content-card, .stat-card, .table-container,
.profile-card, .leaderboard-card, .modal-content {
  background: rgba(13, 13, 14, .88) !important;
  backdrop-filter: blur(5px) !important;
  border-color: rgba(194, 145, 68, .28) !important;
}

/* Footer added without changing the existing page structure or scripts. */
.bl-disclaimer {
  max-width: 1040px;
  margin: 2.5rem auto 0;
  padding: 1.25rem 1.25rem 1.75rem;
  color: rgba(232, 228, 218, .62);
  font-size: .78rem;
  line-height: 1.65;
  text-align: center;
  border-top: 1px solid rgba(194, 145, 68, .24);
}

.bl-disclaimer a {
  color: #d7b36d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bl-disclaimer a:hover {
  color: #f0d49a;
}


/* Catalog imagery */
.map-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.map-card.has-image .map-thumb { overflow:hidden; }
/* Ad artik gorselin ALTINDA yaziyor, uzerinde degil - bu yuzden eskisi gibi
   koyu bir perde gerekmiyor. Hafif bir karartma birakildi ki kart kenari
   acik renkli haritalarda da belli olsun; haritanin uzerine basili ad ve
   bayrak etiketleri okunur kaliyor. */
.map-card.has-image .map-thumb::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 72%, rgba(0,0,0,.28));
  pointer-events:none;
}
.civ-icon-md { width:34px; height:42px; object-fit:contain; vertical-align:middle; margin-right:10px; }
.civ-icon-lg { width:52px; height:62px; object-fit:contain; }
.civ-row { align-items:center; }
.badge-def-card { border-color:rgba(199,154,80,.28) !important; background:rgba(16,18,21,.82) !important; }
.badge-def-emoji { filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)); }

/* Catalog cards remain visible while API data is unavailable. */
.map-grid, .badge-catalog-group { min-height: 40px; }

.civ-icon-md { width: 42px; height: 42px; object-fit: contain; border-radius: 6px; vertical-align: middle; margin-right: 10px; }
.civ-icon-lg { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; }
.civ-name { display:flex; align-items:center; gap:8px; }


/* ---- Rozet ilerleme kartinda hedef kademenin armasi ----
   Kart artik yatay: solda arma, sagda etiket + cubuk + durum metni.
   Kilitli/tamamlanmis kartlarda arma soluklasir. */
.progress-card.has-art{ display:flex; align-items:flex-start; gap:0.7rem; }
.progress-card.has-art .progress-card-body{ flex:1 1 auto; min-width:0; }
.progress-card .progress-art{ margin-top:0.1rem; }
.progress-card.locked .progress-art{ opacity:0.35; filter:grayscale(1); }
.progress-card.done .progress-art{ opacity:0.9; }
@media (max-width:640px){ .progress-card .progress-art{ width:28px; } }


/* ---- Profil basligindaki Steam / Discord kisayollari ----
   Marka logosu KULLANILMIYOR (telif): servis adi yazi olarak, yaninda kendi
   cizdigimiz disari-link oku. Renkler servisin bilinen tonlarindan, boylece
   yazi okunmadan da hangisi oldugu anlasiliyor. */
.profile-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .7rem; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  text-decoration:none; border:1px solid transparent;
  transition:transform .12s ease, filter .12s ease;
}
.profile-link:hover{ transform:translateY(-1px); filter:brightness(1.12); }
.profile-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.profile-link .ext-ok{ width:11px; height:11px; flex:0 0 auto; opacity:.85; }
/* Marka logosu - dosya varsa gorunur, yoksa <img> kendini siler (bkz.
   app.js -> renderProfileLinks) ve buton yazili haliyle kalir. */
.profile-link .brand-ic{ width:15px; height:15px; flex:0 0 auto; object-fit:contain; display:block; }
/* Zemin KOYU, marka rengi kenarlik + yaziya tasindi. Discord logosu mor
   oldugu icin mor zeminde kayboluyordu; koyu zeminde iki logo da okunuyor. */
.profile-link.is-steam{ background:#131c26; border-color:#3f5d79; color:#c7d5e0; }
.profile-link.is-steam:hover{ border-color:#6b93bd; }
.profile-link.is-discord{ background:#191b2b; border-color:#5865f2; color:#b6bdff; }
.profile-link.is-discord:hover{ border-color:#8b95ff; }
.profile-link.is-epic{ background:#1d1d1d; border-color:#5c5c5c; color:#ededed; }
.profile-link.is-epic:hover{ border-color:#a8a8a8; }

/* Ad + kisayollar tek satirda; isim uzunsa butonlar alta sarar. */
.profile-name-row{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.profile-links{ display:inline-flex; gap:.4rem; flex-wrap:wrap; }


/* ---- Rutbe plaketi (liderlik podyumu / sezon arsivi top5) ----
   Emoji madalya yerine kendi cizdigimiz alti kenarli plaket; rozet
   armalariyla ayni metal rampasini kullanir (bkz. app.js -> rankMark). */
.rank-mark{ display:block; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.podium-step .rank-mark{ margin:0 auto .35rem; }
.top5-card .rank-mark{ margin:0 auto .3rem; }
.rank-num{ font-weight:700; color:var(--muted); }

/* Karsilastirmadaki lig satiri */
.compare-lig{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.compare-lig-ad{ font-size:.72rem; color:var(--muted); font-weight:600; }
.compare-player-head .badge-art{ margin-left:.35rem; }


/* ============ BUTONLAR - ortak dil ============
   Sitedeki butonlar zamanla farkli farkli yazilmisti (5px / 10px / tam
   yuvarlak kose, farkli yukseklik ve hover). Burada tek dile getirilir:
   ayni kose, ayni yukseklik, hover'da hafif kalkma + altin parilti, klavye
   odak halkasi. Dosyanin SONUNDA - yukaridaki tek tek tanimlari ezer.
   Renkler (hangi butonun ne renkte oldugu) kendi kurallarinda kalir. */
.role-tab, .detail-btn, .compare-toggle-btn, .resolve-btn,
.record-history-link, .admin-gate button, .profile-link{
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  min-height:2.15rem; border-radius:9px; line-height:1.1;
  transition:color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, filter .15s;
}
.detail-btn, .resolve-btn{ min-height:1.9rem; }
.role-tab:hover, .detail-btn:hover, .compare-toggle-btn:hover, .resolve-btn:hover,
.record-history-link:hover, .admin-gate button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.role-tab:active, .detail-btn:active, .compare-toggle-btn:active, .resolve-btn:active,
.record-history-link:active, .admin-gate button:active, .profile-link:active{ transform:translateY(0); box-shadow:none; }
.role-tab:focus-visible, .detail-btn:focus-visible, .compare-toggle-btn:focus-visible,
.resolve-btn:focus-visible, .record-history-link:focus-visible, .admin-gate button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* Pasif sekme/butonlar: zemine gomulu degil, hafif cam. */
.role-tab, .detail-btn, .compare-toggle-btn, .resolve-btn{ background:rgba(255,255,255,.035); }
.role-tab .stat-emoji, .role-tab .rol-emoji{ margin:0; }
/* Aktif sekme: ust bardaki aktif sekmeyle ayni dil (altin gecis). */
.role-tab.active{
  color:var(--accent-ink); border-color:transparent;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 4px 14px -6px color-mix(in srgb, var(--accent-2) 80%, transparent);
}
.role-tabs{ flex-wrap:wrap; }
.filters select, .filters input{ min-height:2.15rem; border-radius:9px; background:rgba(255,255,255,.035); }
.filters select:hover, .filters input:hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
@media (prefers-reduced-motion: reduce){
  .role-tab, .detail-btn, .compare-toggle-btn, .resolve-btn, .record-history-link,
  .admin-gate button, .profile-link{ transition:none; }
  .role-tab:hover, .detail-btn:hover, .compare-toggle-btn:hover, .resolve-btn:hover,
  .record-history-link:hover, .admin-gate button:hover, .profile-link:hover{ transform:none; }
}

/* ============ ORTAK GORUNUM KATMANI (2026-10-04) ============
   Haritalar & Medeniyetler, Rozetler, Oyuncu Profili ve Sezon Arsivi ayni
   bilesenleri kullanir; burada hepsi mac gecmisi / liderlik tablosuyla ayni
   dile cekilir: belirgin kartlar, renkli vurgular, uzerine gelince tepki. */

/* --- istatistik kutulari (profil + sezon arsivi) --- */
.stat-tiles{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.85rem; }
.stat-tile{ position:relative; overflow:hidden; padding:1rem 1.1rem 0.95rem; transition:transform .15s, border-color .15s, box-shadow .15s; }
.stat-tile::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--kc, var(--accent)); }
.stat-tile:nth-child(5n+1){ --kc:#fbbf24; } .stat-tile:nth-child(5n+2){ --kc:#38bdf8; } .stat-tile:nth-child(5n+3){ --kc:#a78bfa; }
.stat-tile:nth-child(5n+4){ --kc:#4ade80; } .stat-tile:nth-child(5n+5){ --kc:#f97316; }
.stat-tile:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--kc) 60%, transparent); box-shadow:0 10px 24px color-mix(in srgb, var(--kc) 16%, transparent); }
.stat-tile .label{ display:flex; align-items:center; gap:0.35rem; }
.stat-tile .value{ font-size:1.6rem; color:var(--kc, var(--accent)); margin-top:0.35rem; }

/* --- medeniyetler: her satir kendi renginde bir kart --- */
.civ-list{ gap:0.6rem; }
.civ-row{ grid-template-columns:170px 1fr 110px; gap:1rem; padding:0.7rem 1rem; background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--fac, var(--border)); border-radius:12px; transition:transform .15s, border-color .15s; }
.civ-row:hover{ transform:translateX(3px); border-color:color-mix(in srgb, var(--fac) 65%, transparent); }
.civ-row.oynanmadi{ opacity:.55; }
.civ-row .civ-icon-md{ width:2.2rem; height:2.2rem; }
.civ-name{ font-size:1rem; color:var(--fac, var(--text)); }
.civ-track{ height:12px; border-radius:999px; background:color-mix(in srgb, var(--fac, var(--border)) 16%, transparent); }
.civ-fill{ border-radius:999px; box-shadow:0 0 12px color-mix(in srgb, var(--fac) 55%, transparent); }
.civ-meta strong{ font-size:1.1rem; }
@media (max-width:640px){ .civ-row{ grid-template-columns:1fr auto; } .civ-track{ grid-column:1 / -1; order:3; } }

/* --- haritalar --- */
.map-card{ transition:transform .18s, border-color .18s, box-shadow .18s; }
.map-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 65%, transparent); box-shadow:var(--shadow-lift); }
.map-card.has-image:hover .map-thumb img{ transform:scale(1.07); }
.map-name{ font-size:0.98rem; }
.map-percent{ color:var(--accent); }
.map-usage-track{ height:7px; border-radius:999px; }
.map-usage-fill{ border-radius:999px; background:linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* --- rozetler --- */
.badge-def-card{ transition:transform .15s, border-color .15s, box-shadow .15s; }
.badge-def-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 14%, transparent); }
.badge-def-card:hover .badge-art{ transform:scale(1.08) rotate(-2deg); }
.badge-def-card .badge-art{ transition:transform .2s; }
.badge-def-name{ font-size:0.95rem; color:var(--accent); }

/* --- oyuncu profili --- */
.profile-head{ position:relative; overflow:hidden; gap:1.2rem; padding:1.2rem 1.3rem; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  background-image:linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); box-shadow:var(--shadow); }
.profile-head::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.profile-avatar{ width:5.6rem; height:5.6rem; border-width:3px; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow); }
.profile-head h2{ font-size:1.6rem; }
.profile-mmr{ font-size:1.3rem; }
.progress-card{ transition:transform .15s, border-color .15s; }
.progress-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.progress-track{ height:8px; }
.progress-fill{ background:linear-gradient(90deg, var(--accent-2), var(--accent)); }
.role-stat-card{ position:relative; overflow:hidden; transition:transform .15s, border-color .15s; }
.role-stat-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); }
.role-stat-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.role-stat-card h4{ font-size:0.95rem; }

/* --- sezon arsivi --- */
.top5-card{ transition:transform .15s, box-shadow .15s; }
.top5-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.hof-table{ border-collapse:separate; border-spacing:0 7px; }
.hof-table th{ border-bottom:0; }
.hof-table td{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding-top:0.6rem; padding-bottom:0.6rem; }
.hof-table td:first-child{ border-left:4px solid var(--accent); border-radius:12px 0 0 12px; padding-left:0.8rem; font-weight:700; }
.hof-table td:last-child{ border-right:1px solid var(--border); border-radius:0 12px 12px 0; }
.hof-table tbody tr:hover{ background:none; filter:brightness(1.15); }

/* --- bos durumlar: "henuz veri yok" kutulari --- */
.top5-grid > .empty, .role-stat-grid > .empty, #recap-igl > .empty{ flex:1 1 100%; border:1px dashed var(--border); border-radius:14px;
  background:color-mix(in srgb, var(--surface) 70%, transparent); padding:1.4rem; font-size:0.88rem; }

/* --- sayfa ici hedefler (#haritalar, #rozet-ilerlemesi, mac gecmisinde ?mac=): ustte
   yapisik duran menunun ALTINDA kalmasin --- */
html{ scroll-padding-top:150px; }