/* ============================================================
   LegendRivals - tema
   Palet ve kose isareti motifi launcher'dan geliyor
   (tools/launcher-tasarim.ps1 icindeki $INK900/$AMBER/$TEXT_*).
   Site ile oyun ici arayuzun ayni dili konusmasi icin birebir
   ayni degerler kullaniliyor - "benzer" degil, ayni.
   ============================================================ */

:root{
  /* launcher paleti */
  --ink-900:#0B0C0F;      /* ana zemin */
  --ink-850:#0E1015;
  --ink-800:#12141A;      /* panel zemini */
  --ink-750:#171A21;
  --line:#262B35;         /* kenarlik */
  --line-hi:#343A47;      /* vurgulu kenarlik */
  --amber:#F0A32B;        /* vurgu */
  --amber-dim:#C9791A;
  --text-hi:#E8EAF0;
  --text-md:#A8AEBD;
  --text-lo:#767C8B;

  /* uluslar - oyundan */
  --bcu:#4B8FD6;          /* Bygeniou City United */
  --ani:#D6584B;          /* Arlington National Influence */

  /* durum */
  --ok:#4FB477;
  --warn:#E0A53A;
  --down:#D6584B;

  --measure:68ch;
  --r:2px;                /* kose yariçapi - kosegen HUD hissi icin cok kucuk */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink-900);
  color:var(--text-md);
  font:400 15px/1.65 "IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  letter-spacing:.005em;
}

/* ---------- tipografi ---------- */
h1,h2,h3,h4,.mark{
  font-family:"Saira Condensed","Segoe UI",system-ui,sans-serif;
  color:var(--text-hi);
  font-weight:600;
  letter-spacing:.02em;
  text-wrap:balance;
  margin:0 0 .5em;
}
h1{ font-size:clamp(30px,4.4vw,50px); line-height:1.06; }
h2{ font-size:clamp(21px,2.5vw,30px); line-height:1.14; }
h3{ font-size:18px; }

p{ margin:0 0 1em; max-width:var(--measure); }
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* teknik etiket - HUD dilinden */
.etiket{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-lo);
}
.sayi{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------- duzen ---------- */
.kap{ width:min(1180px,92vw); margin-inline:auto; }
.bolum{ padding:64px 0; }
.bolum + .bolum{ border-top:1px solid var(--line); }

/* ---------- panel: kose isaretli cerceve (launcher motifi) ---------- */
.panel{
  position:relative;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-850));
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 24px;
}
/* launcher'daki L seklindeki kose vurgusu */
.panel::before,.panel::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  pointer-events:none;
}
.panel::before{
  top:-1px; left:-1px;
  border-top:2px solid var(--amber);
  border-left:2px solid var(--amber);
}
.panel::after{
  bottom:-1px; right:-1px;
  border-bottom:2px solid var(--amber);
  border-right:2px solid var(--amber);
}
.panel--sade::before,.panel--sade::after{ display:none; }

/* ---------- baslik cubugu ---------- */
.ustbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,15,.86);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.ustbar .kap{ display:flex; align-items:center; gap:26px; height:62px; }

.logo{
  display:flex; align-items:center; gap:10px;
  font-family:"Saira Condensed",sans-serif;
  font-size:23px; font-weight:700;
  letter-spacing:.03em;
  color:var(--text-hi);
  white-space:nowrap;
}
.logo:hover{ text-decoration:none; color:var(--text-hi); }

/* Launcher ile ayni: "Rivals" amber. Tek kelime olarak okunuyor,
   renk yalnizca vurgu - launcher'daki marka yazisinin aynisi. */
.logo b{ font-weight:700; color:var(--amber); }

.menu{ display:flex; gap:2px; margin-left:auto; }
.menu a{
  padding:8px 13px;
  font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;
  color:var(--text-md);
  border-bottom:2px solid transparent;
}
.menu a:hover{ color:var(--text-hi); text-decoration:none; background:var(--ink-800); }
.menu a[aria-current="page"]{ color:var(--amber); border-bottom-color:var(--amber); }

/* ---------- dugmeler ---------- */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 22px;
  font-family:"Saira Condensed",sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--r); border:1px solid var(--line-hi);
  background:var(--ink-750); color:var(--text-hi);
  cursor:pointer; transition:border-color .14s, background .14s, color .14s;
}
.dugme:hover{ border-color:var(--text-lo); background:var(--ink-800); text-decoration:none; }
.dugme--ana{
  background:linear-gradient(180deg,var(--amber),var(--amber-dim));
  border-color:var(--amber); color:#140E03;
}
.dugme--ana:hover{ filter:brightness(1.08); background:linear-gradient(180deg,var(--amber),var(--amber-dim)); }

/* ---------- tablo ---------- */
.tablo-sar{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead th{
  position:sticky; top:0;
  background:var(--ink-750);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-lo); font-weight:500;
  text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{ padding:10px 14px; border-bottom:1px solid var(--line); color:var(--text-md); }
tbody tr:hover td{ background:var(--ink-850); color:var(--text-hi); }
tbody tr:last-child td{ border-bottom:0; }
td.sag,th.sag{ text-align:right; }

/* ---------- rozet ---------- */
.rozet{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:var(--r);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-hi); color:var(--text-md);
}
.rozet--bcu{ color:var(--bcu); border-color:color-mix(in oklab,var(--bcu) 45%,transparent); }
.rozet--ani{ color:var(--ani); border-color:color-mix(in oklab,var(--ani) 45%,transparent); }
.rozet--ok{ color:var(--ok); border-color:color-mix(in oklab,var(--ok) 45%,transparent); }
.rozet--down{ color:var(--down); border-color:color-mix(in oklab,var(--down) 45%,transparent); }

.nokta{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.nokta--canli{ animation:nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- izgara ---------- */
.izgara{ display:grid; gap:18px; }
.izgara--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.izgara--3{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.izgara--4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ---------- alt bilgi ---------- */
.altbilgi{
  border-top:1px solid var(--line);
  padding:38px 0 46px;
  color:var(--text-lo); font-size:13px;
}
.altbilgi a{ color:var(--text-md); }
.altbilgi a:hover{ color:var(--amber); }

/* ---------- erisilebilirlik ---------- */
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ---------- ust cubuk eylem dugmeleri ---------- */
.ust-eylem{ display:flex; gap:8px; align-items:center; flex:none; }
.ust-eylem .dugme{ padding:8px 15px; font-size:13px; white-space:nowrap; }

/* Dar ekranda menu sarilir; kayit dugmesi her zaman gorunur kalsin,
   giris ikincil oldugu icin once o gizleniyor. */
@media (max-width:1080px){
  .ustbar .kap{ height:auto; padding-block:12px; flex-wrap:wrap; }
  .menu{ order:3; width:100%; margin-left:0; overflow-x:auto; }
}
@media (max-width:560px){
  .ust-eylem .dugme:not(.dugme--ana){ display:none; }
}