/* hidden HER ZAMAN gizler.
   .lb{display:flex} gibi sinif kurallari tarayicinin [hidden]{display:none}
   kuralini eziyordu; sonucu: "Oyun Siralamasi" sekmesinde etkinlik siralamasi
   da ekranda kaliyor, oyun listesi onun ALTINA diziliyordu. */
[hidden]{display:none !important}

:root{
  --bg:#141517; --nav:#1c1d20; --panel:#232427; --panel2:#2c2d31; --row:#26272a;
  --line:#303136; --fg:#ffffff; --dim:#a2a5ad; --dim2:#7c7f88; --gold:#ffcb00;
  --red:#ff5555; --orange:#ffaa00; --yellow:#ffe83d; --lime:#55ff55;
  --aqua:#55ffff; --blue:#5f7bff; --purple:#c05cff; --pink:#ff7bd5;
  --cyan:#00c2c2; --green:#3fa93f;
}
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--fg);
  font:15px/1.5 "Segoe UI",system-ui,sans-serif}
.wrap{max-width:1010px;margin:0 auto;padding:0 16px}
h2{margin:28px 0 12px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--dim);font-weight:700}
h2 .hint{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}

::selection{background:var(--gold);color:#141517}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#3a3c42;border-radius:5px}
*::-webkit-scrollbar-track{background:transparent}
button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}

/* ---- üst / alt çubuk ----
   İkisi de aynı zemin ve aynı silik çapraz şerit dokusunu paylaşır; sayfa
   üstten ve alttan aynı ağırlıkta kapanır. */
.nav,.bottombar{background:var(--nav);
  background-image:repeating-linear-gradient(135deg,#ffffff03 0 2px,transparent 2px 22px)}
.nav{border-bottom:1px solid #0000004d}
.bottombar{border-top:1px solid #0000004d;margin-top:34px}
.bottombar .wrap{display:flex;align-items:center;min-height:58px;
  color:var(--dim2);font-size:13px}
.nav .wrap{display:flex;align-items:center;gap:34px;height:64px}
.logo{height:44px;width:auto;display:block}
.tabs{display:flex;gap:26px}
.tab{background:none;border:0;color:var(--dim);padding:6px 0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.6px}
.tab{position:relative}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg)}
.tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:2px;border-radius:2px;background:var(--gold)}
.meta{margin-left:auto;color:var(--dim2);font-size:13px}

/* ---- ikonlar ---- */
.ic{image-rendering:pixelated;flex:0 0 auto;display:block}
.ic-team{width:34px;height:34px}
.ic-game{width:26px;height:26px}
.ic-coin{width:16px;height:16px}
.ic-crown{width:16px;height:16px}
.ic-pip{width:16px;height:16px}

/* ---- araç çubuğu ---- */
.toolbar{display:flex;align-items:stretch;gap:12px;margin:22px 0 14px}

/* etkinlik seçici (kendi açılır menümüz) */
.pickbox{position:relative;min-width:190px}
.pickbtn{width:100%;height:64px;background:var(--panel);border:0;border-radius:10px;
  color:var(--fg);font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  text-align:left;padding:0 42px 0 20px;transition:background .12s}
.pickbtn:hover{background:var(--panel2)}
.pickbox.open .pickbtn{background:var(--panel2)}
.pickbox::after{content:"";position:absolute;right:18px;top:32px;margin-top:-3px;
  border:5px solid transparent;border-top-color:var(--dim);
  pointer-events:none;transition:transform .15s}
.pickbox.open::after{transform:rotate(180deg);border-top-color:var(--fg)}

.picklist{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:var(--panel);border-radius:10px;padding:6px;
  box-shadow:0 12px 30px #000a;max-height:320px;overflow-y:auto}
.pickopt{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--dim);font:inherit;padding:10px 14px;border-radius:7px;cursor:pointer;
  transition:background .1s}
.pickopt:hover{background:var(--row);color:var(--fg)}
.pickopt.sel{background:var(--gold);color:#141517}
.pickopt.sel .po-dt{color:#141517;opacity:.65}
.po-nm{display:block;font-weight:700;font-size:14px}
.po-nm .po-dt{display:block;font-size:12px;color:var(--dim2);margin-top:2px}

.gamerow{display:flex;background:var(--panel);border-radius:10px;overflow:hidden}
.gbtn{width:64px;height:64px;display:grid;place-items:center;background:none;
  border:0;border-right:1px solid #1b1c1f;cursor:default;padding:0;transition:background .12s}
.gbtn:last-child{border-right:0}
.gbtn:hover{background:var(--panel2)}
.gbtn.on{background:var(--gold);border-radius:8px}
.gbtn.on:hover{background:var(--gold)}
.gbtn .ic-game{width:30px;height:30px}

/* ---- iki sütun ---- */
.grid2{display:grid;grid-template-columns:1fr 462px;gap:12px;align-items:start}
.side{display:flex;flex-direction:column;gap:12px}
.panel{background:var(--panel);border-radius:12px;overflow:hidden}
.phead{padding:17px 20px;font-weight:700;font-size:15px}

.ptabs{display:flex}
.ptab{background:none;border:0;color:var(--dim2);padding:20px 30px;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.ptab:hover{color:var(--dim)}
.ptab.active{color:var(--fg);background:var(--panel2);border-radius:12px 12px 0 0}

/* ---- takım sıralaması ---- */
.lb{display:flex;flex-direction:column}
.lb .r{display:grid;grid-template-columns:52px 34px 1fr auto;align-items:center;
  gap:16px;padding:14px 20px 14px 0;transition:background .12s;
  box-shadow:inset 0 0 0 transparent}
.lb .r:nth-child(odd){background:var(--row)}
.lb .r:hover{box-shadow:inset 3px 0 0 var(--tc,transparent)}
.lb .pos{color:var(--dim);font-size:17px;font-weight:600;text-align:center}
.lb .nm{display:flex;align-items:center;gap:7px;color:var(--dim);
  font-size:15px;font-weight:600;line-height:1.3}
/* şampiyon takım satırı */
.lb .r.champrow .nm{color:var(--gold)}
.lb .r.champrow{box-shadow:inset 3px 0 0 var(--gold)}
.lb .pts{display:flex;align-items:center;gap:7px;font-size:19px;font-weight:800;
  color:var(--fg);line-height:1.25}
.lb .sub2{color:var(--dim2);font-size:12px;margin-top:2px}
.heads{display:flex;gap:10px}
.heads img{width:38px;height:38px;border-radius:50%;image-rendering:pixelated;
  background:#2f3034;display:block}

/* kafa üzerine gelince isim balonu (MCC tarzı) */
.hw{position:relative;display:block;cursor:pointer}
.hw::after{content:attr(data-name);position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) scale(.92);opacity:0;pointer-events:none;
  background:#fff;color:#141517;font-size:13px;font-weight:700;
  padding:7px 12px;border-radius:9px;white-space:nowrap;
  box-shadow:0 4px 14px #0007;transition:.12s;z-index:6}
.hw::before{content:"";position:absolute;right:calc(100% + 3px);top:50%;
  transform:translateY(-50%);border:5px solid transparent;border-left-color:#fff;
  opacity:0;pointer-events:none;transition:.12s;z-index:6}
.hw:hover::after{opacity:1;transform:translateY(-50%) scale(1)}
.hw:hover::before{opacity:1}
.hw:hover img{outline:2px solid #fff;outline-offset:1px}

/* ---- final kartı ---- */
.final{display:grid;grid-template-columns:1fr 220px;min-height:150px}
.final .body{padding:16px 20px}
.final .ttl{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.final .ttl b{display:block;font-size:16px;line-height:1.2}
.final .ttl span{color:var(--dim);font-size:13px}
.final .fr{display:grid;grid-template-columns:34px 1fr;align-items:center;
  gap:12px;padding:9px 0 4px}
.final .fr .nm{color:var(--dim);font-size:13px;font-weight:600;line-height:1.3}
.final .pips{display:flex;align-items:center;gap:5px;margin-top:3px}
.final .art{background:var(--bg);position:relative;display:grid;place-items:center}
.final .art::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--c1) 0%,var(--c1) 48%,var(--c2) 52%,var(--c2) 100%);
  opacity:.8}
.final .art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,#0000 40%,#0003 100%)}
.final .art img{position:relative;width:76px;height:76px;image-rendering:pixelated;
  filter:drop-shadow(0 4px 10px #000b);z-index:1}

/* ---- bireysel liste ---- */
.indiv{max-height:392px;overflow-y:auto}
.indiv .ir{display:grid;grid-template-columns:34px 30px 22px 1fr auto;align-items:center;
  gap:12px;padding:11px 20px;border-top:1px solid #1e1f22;
  box-shadow:inset 0 0 0 transparent}
/* satırın solunda takım rengi şeridi */
.indiv .ir{border-left:3px solid var(--tc,transparent)}
.indiv .rk{color:var(--dim2);font-size:14px;text-align:right}
.indiv img.hd{width:30px;height:30px;image-rendering:pixelated;background:#2f3034}
.indiv .tw{display:flex;align-items:center;justify-content:center}
.indiv .tw .ic-team{width:22px;height:22px}
.indiv .nm{font-weight:700;font-size:15px;color:var(--tc,var(--fg));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.indiv .co{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px}
.indiv .ir:hover{background:var(--row)}
.indiv::-webkit-scrollbar{width:9px}
.indiv::-webkit-scrollbar-track{background:transparent}
.indiv::-webkit-scrollbar-thumb{background:#3a3c42;border-radius:5px}

/* ---- şampiyon kartları ---- */
.champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.champ{background:var(--panel);border-radius:12px;padding:16px 18px;
  border-top:4px solid var(--tc,#666);position:relative;overflow:hidden}
/* köşede silik taç filigranı */
.champ::after{content:"";position:absolute;right:-8px;bottom:-10px;width:72px;height:72px;
  background:url("img/crown.png") center/contain no-repeat;image-rendering:pixelated;
  opacity:.07;transform:rotate(-12deg);pointer-events:none}
.champ .ev{color:var(--dim2);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.champ .t{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;
  margin:8px 0 4px}
.champ .t .ic-team{width:24px;height:24px}
.champ .p{color:var(--dim);font-size:13px}

/* ---- tablo ---- */
.tbl{width:100%;border-collapse:collapse;background:var(--panel);
  border-radius:12px;overflow:hidden}
.tbl th{text-align:left;padding:13px 16px;background:var(--panel2);color:var(--dim2);
  font-size:12px;letter-spacing:1px;text-transform:uppercase}
.tbl td{padding:11px 16px;border-top:1px solid #1e1f22}
.tbl .num,.tbl th.num{text-align:right}
.tbl tr:hover td{background:var(--row)}
.tbl .rank{color:var(--dim2);width:46px}
.tbl tbody tr{transition:background .12s}
.pname{display:flex;align-items:center;gap:10px}
.pname img.hd{width:26px;height:26px;image-rendering:pixelated;background:#2f3034}
.pname .ic-team{width:20px;height:20px}
.coin{font-weight:800}

/* ---- oyuncu kartları ---- */
.bar{display:flex;align-items:center;gap:14px;margin:22px 0 16px;flex-wrap:wrap}

/* Siralama olcutu secici (Tum Zamanlar). */
.sortsel{display:flex;gap:4px;margin-left:auto;background:var(--panel);
  border-radius:10px;padding:4px}
.sortsel .sopt{background:none;border:0;color:var(--dim);font:inherit;font-size:12.5px;
  font-weight:600;padding:8px 13px;border-radius:7px;cursor:pointer;white-space:nowrap}
.sortsel .sopt:hover{color:var(--fg)}
.sortsel .sopt.active{background:var(--gold);color:#141517}
@media(max-width:620px){.sortsel{margin-left:0;width:100%}
  .sortsel .sopt{flex:1;padding:8px 6px;font-size:11.5px}}
input[type=search]{background:var(--panel);color:var(--fg);border:0;border-radius:10px;
  padding:0 16px;height:46px;font:inherit;min-width:260px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:16px}
.card{background:var(--panel);border-radius:12px;padding:15px}
.card .head{display:flex;align-items:center;gap:12px}
.card img.hd{width:38px;height:38px;image-rendering:pixelated;background:#2f3034}
.card .nm{font-weight:700}
.card .tm{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim)}
.card .tm .ic-team{width:16px;height:16px}
.card .rows{margin-top:12px;border-top:1px solid #1e1f22;padding-top:10px;font-size:13px}
.card .row{display:flex;justify-content:space-between;padding:3px 0;color:var(--dim2)}
.card .row b{color:var(--fg);font-weight:700}

/* ---- profil ---- */
.back{background:var(--panel);border:0;color:var(--dim);font:inherit;font-weight:700;
  padding:11px 20px;border-radius:10px;cursor:pointer;margin:22px 0 14px}
.back:hover{color:var(--fg);background:var(--panel2)}
.phd{display:flex;align-items:center;gap:20px;padding:20px 24px;
  background:var(--panel);border-radius:12px}
/* Kafa: yumuşak köşeler + takım renginde ince çerçeve. Renk kimliği
   taşıdığı için çerçeve takımsız oyuncuda nötr kalır. */
.phd img.hd{width:72px;height:72px;image-rendering:pixelated;background:#2f3034;
  border-radius:18px;padding:4px;
  box-shadow:inset 0 0 0 3px var(--tc,var(--line)),0 4px 14px #0006}
.pnm{font-size:27px;font-weight:800;letter-spacing:-.3px}
.ptm{display:flex;align-items:center;gap:8px;color:var(--tc,var(--dim));
  font-weight:600;margin-top:5px}
.ptm .ic-team{width:20px;height:20px}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin:12px 0}
.pstat{background:var(--panel);border-radius:12px;padding:14px 18px;
  transition:background .14s ease}
.pstat:hover{background:var(--panel2)}
.pstat .l{color:var(--dim2);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.pstat .v{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:800;margin-top:5px}

/* tıklanabilir satırlar */
.indiv .ir,#playerAll tbody tr,.card{cursor:pointer}
.indiv .ir{transition:background .12s}
.card{transition:background .12s,transform .12s}
.card:hover{background:var(--panel2);transform:translateY(-2px)}

/* sayılar hizalı otursun */
.lb .pts,.indiv .co,.tbl td.num,.pstat .v{font-variant-numeric:tabular-nums}

/* gelişim grafiği */
.chartwrap{margin-bottom:12px}
.chart{padding:4px 16px 14px}
.chart svg{width:100%;height:auto;display:block}

.note{margin:0;padding:26px 22px;color:var(--dim);font-size:13.5px;line-height:1.7}
.note code{background:var(--panel2);border-radius:4px;padding:1px 6px;font-size:12px}

@media(max-width:940px){
  .grid2{grid-template-columns:1fr}
  .final{grid-template-columns:1fr 170px}
  .indiv{max-height:330px}
}
@media(max-width:660px){
  .nav .wrap{height:auto;flex-wrap:wrap;gap:14px;padding-top:12px;padding-bottom:12px}
  .meta{margin-left:0;width:100%}
  .toolbar{flex-direction:column}
  .gamerow{flex-wrap:wrap}
  .lb .r{grid-template-columns:38px 30px 1fr;row-gap:10px;gap:12px}
  .heads{grid-column:2/4}
  .heads img{width:30px;height:30px}
  .final{grid-template-columns:1fr}
  .final .art{min-height:110px}
}

/* ---- profil: oyun kırılımı ---- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:12px;
  align-items:stretch;margin-bottom:12px}
.gavg{padding:2px 0 8px}
.gav{display:grid;align-items:center;gap:14px;padding:9px 20px;
  grid-template-columns:30px minmax(110px,1fr) minmax(80px,1.2fr) 44px 94px}
.gav:nth-child(odd){background:var(--row)}
.gav .ic-game{width:26px;height:26px}
.gav-n{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.gav-n span{font-weight:700;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gav-n small{color:var(--dim2);font-size:11.5px;margin-top:2px}
.gav-b{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden}
.gav-b i{display:block;height:100%;border-radius:5px;background:var(--gold)}
.gav-p{color:var(--dim);font-size:12.5px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums}
.gav-v{display:flex;align-items:center;justify-content:flex-end;gap:6px;
  font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.radar{padding:0 8px 4px}
.chartnote{margin:0;padding:0 20px 16px;color:var(--dim2);
  font-size:11.5px;line-height:1.55}
.pbest{display:inline-flex;align-items:center;gap:7px;margin-left:6px;
  padding:4px 11px;border-radius:999px;background:var(--panel2);
  color:var(--dim);font-size:12.5px;font-weight:700;white-space:nowrap}
.pbest .ic-game{width:18px;height:18px}
.pnote{padding:20px 22px;color:var(--dim);font-size:13.5px;line-height:1.7;
  margin-bottom:12px}

/* Geniş tablo: sayfayı değil KENDİNİ kaydırır. */
.tblwrap{overflow-x:auto;border-radius:12px}
.tblwrap .tbl{border-radius:0}

@media(max-width:1040px){.pgrid{grid-template-columns:1fr}}
@media(max-width:620px){
  .gav{grid-template-columns:26px minmax(0,1fr) 86px;gap:10px;padding:9px 14px}
  .gav-b,.gav-p{display:none}
  /* Rozet takim adiyla ayni satira sigmiyor: alt satira insin, icinde kirilmasin. */
  .ptm{flex-wrap:wrap;gap:6px}
  .pbest{margin-left:0}
}

/* ---- final oyun sekmesi (büyütülmüş kart) ---- */
.final .art .fw{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:3}

.grid2.finalbig{grid-template-columns:1fr}
.finalbig .final{grid-template-columns:1fr 52%;min-height:340px}
.finalbig .final .body{padding:30px 34px;display:flex;flex-direction:column;
  justify-content:center}
.finalbig .final .ttl{gap:16px;margin-bottom:18px}
.finalbig .final .ttl b{font-size:25px}
.finalbig .final .ttl span{font-size:16px}
.finalbig .final .ttl .ic-game{width:46px;height:46px}
.finalbig .final .fr{grid-template-columns:54px 1fr;gap:18px;padding:11px 0}
.finalbig .final .fr .ic-team{width:54px;height:54px}
.finalbig .final .fr .nm{font-size:19px}
.finalbig .final .pips{gap:7px;margin-top:6px}
.finalbig .final .ic-pip,.finalbig .final .ic-crown{width:22px;height:22px}
.finalbig .final .art img{width:160px;height:160px}

@media(max-width:660px){
  .finalbig .final{grid-template-columns:1fr;min-height:0}
  .finalbig .final .art{min-height:220px}
  .finalbig .final .body{padding:20px 18px}
  .finalbig .final .ttl b{font-size:20px}
  .finalbig .final .art img{width:110px;height:110px}
}

/* ---- şampiyon kadrosu ---- */
/* Kazanan kadro tam boy: podyum hissi. Kartın eni sabit olmadığı için
   her oyuncu eşit pay alır ve isim taşarsa kısalır. */
.champ .roster{display:flex;align-items:flex-end;gap:2px;margin-top:12px}
.champ .roster .pl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:6px;padding:6px 2px 4px;border-radius:10px;
  cursor:pointer;transition:background .14s ease}
.champ .roster .pl:hover{background:var(--panel2)}
.champ .roster img.body{height:92px;width:auto;image-rendering:pixelated;
  filter:drop-shadow(0 5px 11px #0007)}
.champ .roster .pl span{max-width:100%;color:var(--dim);font-size:11px;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.champ .roster .pl:hover span{color:var(--fg)}

/* şampiyon kartı kadroyla birlikte uzuyor; sabit yükseklik yok */
.champs{align-items:start}

/* ---- tüm zamanlar araması ---- */
.bar #search{flex:1;min-width:0;max-width:340px;background:var(--panel);
  border:0;border-radius:10px;color:var(--fg);font:inherit;font-size:14px;
  padding:12px 16px}
.bar #search::placeholder{color:var(--dim2)}
.bar #searchInfo{color:var(--dim2);font-size:12.5px}

/* sıralama içi ayraç (tek etkinlik grubu) */
.tbl tr.sep td{background:var(--bg);color:var(--dim2);font-size:11px;
  letter-spacing:1px;text-transform:uppercase;padding:9px 16px;
  border-top:1px solid var(--line)}
.tbl tr.sep:hover td{background:var(--bg)}

/* ---- geçiş animasyonları ----
   Görünümler display:none ile saklandığı için CSS geçişi (transition) işe
   yaramaz; gizli öğe yeniden gösterilince ANIMASYON kendiliğinden baştan
   çalışır, o yüzden keyframe kullanılıyor. */
/* YÖNLÜ GEÇİŞ. Tek bir blok kayar, eskiden 15 satır ayrı ayrı süzülüyordu
   ve göz yoruyordu. Yön bilgi taşır: ileri giderken sağdan, geri dönerken
   soldan gelir. Eğri sonda yavaşlar (ease-out), böylece kısa ama yumuşak. */
@keyframes inRight{from{opacity:0;transform:translateX(46px)}
  to{opacity:1;transform:none}}
@keyframes inLeft{from{opacity:0;transform:translateX(-46px)}
  to{opacity:1;transform:none}}

/* Kayma sirasinda 46px saga tasar; bunu KABINDA kirp. 'clip' kullaniliyor
   ('hidden' degil): yeni bir kaydirma baglami yaratmaz, dikey tasma serbest
   kalir ve etkinlik secici acilir menusu asagi dogru acilmaya devam eder. */
main.wrap{overflow-x:clip}

.in-right{animation:inRight .24s cubic-bezier(.32,.72,0,1) both}
.in-left{animation:inLeft .24s cubic-bezier(.32,.72,0,1) both}

/* düğme/sekme durum değişimleri de sertçe atlamasın */
.gbtn{transition:background .16s ease,border-radius .16s ease}
.ptab{transition:color .16s ease,background .16s ease}
.tab{transition:color .16s ease}
.champ{transition:transform .14s ease}
.champ:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .in-right,.in-left{animation:none}
  .champ:hover{transform:none}
}

@media(max-width:560px){
  .phd{gap:14px;padding:16px 18px}
  .phd img.hd{width:58px;height:58px;border-radius:15px}
  .pnm{font-size:22px}
}

/* ---- kafalar: her yerde yumusak koseler ----
   Tek kural yeter; profil basligindaki buyuk kafa kendi yaricapini
   ayrica tanimliyor (18px) ve bu kurali ezmeye devam eder. */
img.hd{border-radius:7px}
.tbl .pname img.hd,.indiv .ir img.hd{border-radius:8px}
.lb .heads img.hd{border-radius:8px}


/* ============================================================
   ANA SAYFA + WIKI  (v26)
   Mevcut degiskenler kullanilir: --bg --panel --line --fg --dim --gold
   ============================================================ */

/* --- takim renkleri: metin uzerinde --- */
.t-red{color:var(--red)}.t-orange{color:var(--orange)}.t-yellow{color:var(--yellow)}
.t-lime{color:var(--lime)}.t-aqua{color:var(--aqua)}.t-blue{color:var(--blue)}
.t-purple{color:var(--purple)}.t-pink{color:var(--pink)}
.t-cyan{color:var(--cyan)}.t-green{color:var(--green)}
.dim{color:var(--dim2)}

/* --- hero --- */
.hero{padding:34px 0 18px}
.hero-kicker{margin:0;font-size:13px;letter-spacing:.22em;font-weight:800;
  color:var(--gold);text-transform:uppercase}
.hero-title{margin:2px 0 0;font-size:clamp(38px,7vw,68px);line-height:.98;
  letter-spacing:-.02em;font-weight:900}

/* --- slider --- */
.slider{position:relative;display:flex;align-items:center;gap:10px}
.sl-frame{flex:1;overflow:hidden;border-radius:12px;border:1px solid var(--line);
  background:var(--panel)}
.sl-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide{position:relative;flex:0 0 100%;min-height:360px;display:flex}
.sl-img{position:absolute;inset:0;background:
  linear-gradient(135deg,var(--panel2) 0%,var(--panel) 100%)}
.sl-img.has{background:none}
.sl-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Kart fotoğrafın üstünde duruyor: sağ tarafı karart ki yazı okunsun. */
.sl-img.has::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#0b0c0e00 0%,#0b0c0e40 42%,#0b0c0ec4 100%)}
.sl-card{position:relative;z-index:1;margin:auto 24px auto auto;
  width:min(340px,72%);background:#1c1d20e6;border:1px solid #ffffff1f;
  border-radius:10px;padding:22px 20px 20px;
  box-shadow:0 14px 44px -16px #000;backdrop-filter:blur(7px)}
.sl-no{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:28px;height:28px;background:var(--gold);color:#1a1a1a;font-weight:900;
  display:grid;place-items:center;border-radius:4px}
.sl-no::after{content:'';position:absolute}
.sl-card h3{margin:8px 0 8px;font-size:19px;text-align:center}
.sl-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--dim);text-align:center}
.sl-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);font-size:22px;line-height:1;cursor:pointer}
.sl-nav:hover{background:var(--panel2)}
.sl-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sl-dots{display:flex;gap:9px;justify-content:center;padding:14px 0 4px}
.sl-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:var(--line);cursor:pointer}
.sl-dot.active{background:var(--gold);transform:rotate(45deg);border-radius:2px}

/* --- ana sayfa kartlari --- */
.homegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 40px}
.homecard{padding:16px 18px}
.lastname{margin:2px 0 0;font-size:20px;font-weight:800}
.lastdate{margin:2px 0 10px;font-size:13px}
.champline{margin:0 0 10px;font-size:15px}
.lasttop{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.lasttop li{font-size:14.5px}
.lasttop .num{float:right;color:var(--gold);font-variant-numeric:tabular-nums}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.statcell{background:var(--row);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;column-gap:10px;align-items:center}
.statcell .ico{grid-row:1/3;width:26px;height:26px;margin:0;opacity:.9}
.statnum{font-size:24px;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums}
.statlab{font-size:12.5px;color:var(--dim2)}

@media (max-width:760px){
  .homegrid{grid-template-columns:1fr}
  /* Oklar dar ekranda cerceveden 108px calıyordu: gizle, noktalar +
     kaydırma yeter. */
  .sl-nav{display:none}
  .slider{gap:0}
  .sl-card{margin:auto;width:calc(100% - 32px)}
  .slide{min-height:340px}
  /* Dar ekranda kart ortada: karartma da alt-üst yönünde olsun. */
  .sl-img.has::after{background:linear-gradient(180deg,#0b0c0e33,#0b0c0ecc)}
}


/* ---- pack ikonlari (PNG; glyph webde calismaz) ---- */
.ico{image-rendering:pixelated;vertical-align:-2px;margin-right:6px;flex:none}
.ico-s{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.ico-m{width:20px;height:20px;vertical-align:-4px}
.ico-l{width:34px;height:34px;vertical-align:-6px;margin-right:10px}
.champline{display:flex;align-items:center}
.lasttop li .ico-s{margin-right:5px}






/* ---- hero yazisi + hak bildirimi ---- */
.hero-kicker{font-size:14px !important;letter-spacing:.16em !important}
/* "TÜRKİYEDE!", Ü ve İ'nin işaretleri büyük harflerin 17px üstüne çıkıyor.
   line-height .98 ile satır kutusu bunlara yer bırakmıyordu: başlık tepeden
   sıkışık duruyor, umlaut üstteki yazıya değiyordu. */
.hero-title{font-size:clamp(40px,8vw,76px) !important;line-height:1.06;
  letter-spacing:-.005em;margin-top:10px}
.haklar{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--dim2);
  max-width:78ch}
.haklar strong{color:var(--dim);font-weight:600}
.bottombar .wrap{display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:2px;padding-top:12px;
  padding-bottom:12px}

/* ============================================================
   WIKI v30, Fandom düzeni: görselli ızgara + makale + infobox
   ============================================================
   Makale sayfası tek sütun akar, infobox sağa float eder ve metin
   etrafından dolanır, Fandom'un yaptığı da tam olarak bu. Bölüm
   başlıkları alttan tam genişlik çizgiyle ayrılır.                */

#view-wiki{--wk-cizgi:#3a3c44;--wk-zemin:#1b1c1f}
/* Kategori aksanı: dört tür bakışta ayrışsın diye tek renk taşır. */
[data-kat="pvp"]{--kat:var(--red)}
[data-kat="hareket"]{--kat:var(--aqua)}
[data-kat="takim"]{--kat:var(--lime)}
[data-kat="ozel"]{--kat:var(--gold)}
.wk-rozet{display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--kat,var(--dim));background:color-mix(in srgb,var(--kat) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--kat) 38%,transparent)}
.wk-page{max-width:960px}

/* ---- başlıklar ---- */
.wk-h1{margin:6px 0 0;font-size:34px;line-height:1.15;font-weight:800;
  letter-spacing:-.02em;padding-bottom:10px;
  border-bottom:2px solid var(--wk-cizgi)}
.wk-h2{margin:30px 0 12px;font-size:21px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--fg);padding-bottom:6px;
  border-bottom:1px solid var(--wk-cizgi);clear:none}
.wk-h2[data-kat]{display:flex;align-items:center;gap:10px}
.wk-h2[data-kat]::before{content:'';width:4px;height:17px;border-radius:2px;
  background:var(--kat)}
.wk-lead,.wk-intro{margin:14px 0 0;color:var(--dim);font-size:15px;
  line-height:1.65;max-width:70ch}
.wk-intro{color:var(--fg)}
.wk-bos{margin:0;color:var(--dim2);font-size:14px}
.wk-not{margin:8px 0 0;color:var(--dim2);font-size:12px;line-height:1.5}
.wk-kaynak{margin:34px 0 0;padding-top:12px;border-top:1px solid var(--line);
  color:var(--dim2);font-size:11.5px;line-height:1.5;clear:both}

/* ---- oyun ızgarası (Fandom "Games" sayfası) ---- */
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px;margin-top:4px}
.wk-card{display:flex;flex-direction:column;text-align:left;cursor:pointer;
  padding:0;color:var(--fg);font:inherit;overflow:hidden;
  background:var(--wk-zemin);border:1px solid var(--line);border-radius:8px;
  transition:border-color .15s,transform .15s}
.wk-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.wk-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wk-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#101114}
.wk-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s}
.wk-thumb img.wk-thumb-ic{width:60px;height:60px;object-fit:contain}
.wk-card:hover .wk-thumb img{transform:scale(1.04)}
.wk-thumb.bos{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#ffffff08 0 2px,transparent 2px 20px),
    linear-gradient(135deg,color-mix(in srgb,var(--kat) 26%,#191a1e),#131417)}
.wk-thumb-ic{margin:0;image-rendering:pixelated;
  filter:drop-shadow(0 4px 10px #0009)}
.wk-card:hover{border-color:var(--kat,var(--gold))}
.wk-cardad{display:flex;align-items:center;gap:2px;padding:13px 16px 15px;
  font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15;
  border-top:2px solid var(--kat,var(--line))}
.wk-cardad .ico-m{width:24px;height:24px;margin-right:9px}

/* ---- makale: kırıntı yolu ---- */
.wk-crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--dim2);margin-bottom:2px}
.wk-geri{background:none;border:0;color:var(--gold);font:inherit;font-size:12.5px;
  cursor:pointer;padding:0}
.wk-geri:hover{text-decoration:underline}
.wk-crumbs b{color:var(--dim);font-weight:600}

/* ---- infobox (sağa float) ---- */
.wk-info{float:right;width:288px;margin:16px 0 18px 26px;
  background:var(--wk-zemin);border:1px solid var(--wk-cizgi);border-radius:8px;
  overflow:hidden}
.wk-info-bas{display:flex;align-items:center;justify-content:center;gap:2px;
  padding:11px 14px;background:var(--panel2);font-size:15px;font-weight:800;
  text-align:center;border-bottom:1px solid var(--wk-cizgi)}
.wk-info-gorsel{background:#101114}
.wk-info-gorsel img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.wk-info-tbl{width:100%;border-collapse:collapse;font-size:13px}
.wk-info-tbl th{width:38%;text-align:left;padding:8px 10px;color:var(--dim2);
  font-weight:600;vertical-align:top;background:#ffffff05}
.wk-info-tbl td{padding:8px 12px 8px 10px;vertical-align:top;line-height:1.45}
.wk-info-tbl tr + tr th,.wk-info-tbl tr + tr td{
  border-top:1px solid var(--line)}

/* ---- içindekiler ---- */
.wk-toc{display:inline-block;min-width:230px;margin:20px 0 4px;padding:12px 20px 14px;
  background:var(--wk-zemin);border:1px solid var(--line);border-radius:8px}
.wk-toc-bas{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2);margin-bottom:8px}
.wk-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:5px;counter-reset:none}
.wk-toc a{color:var(--gold);text-decoration:none;font-size:13.5px;
  display:flex;gap:9px}
.wk-toc a:hover{text-decoration:underline}
.wk-toc-n{color:var(--dim2);font-variant-numeric:tabular-nums}

/* ---- gövde listeleri ---- */
.wk-ol,.wk-ul{margin:0;padding-left:22px;display:flex;flex-direction:column;
  gap:8px;max-width:70ch}
.wk-ol li,.wk-ul li{font-size:14.5px;line-height:1.6}
.wk-ol li::marker{color:var(--dim2);font-weight:700}
.wk-ul li::marker{color:var(--dim2)}

/* ---- tablolar (Fandom wikitable) ---- */
.wk-tbl{border-collapse:collapse;font-size:14px;background:var(--wk-zemin);
  border:1px solid var(--wk-cizgi);border-radius:6px;overflow:hidden;
  width:100%;max-width:640px}
.wk-tbl thead th{text-align:left;padding:9px 13px;background:var(--panel2);
  color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid var(--wk-cizgi)}
.wk-tbl tbody th{text-align:left;font-weight:600;color:var(--fg)}
.wk-tbl td,.wk-tbl tbody th{padding:9px 13px;line-height:1.5;
  border-top:1px solid var(--line);vertical-align:top}
.wk-tbl tbody tr:first-child td,.wk-tbl tbody tr:first-child th{border-top:0}
.wk-tbl tbody tr:hover td,.wk-tbl tbody tr:hover th{background:#ffffff06}
.wk-tbl .num{text-align:right;white-space:nowrap;color:var(--gold);
  font-variant-numeric:tabular-nums;font-weight:700}
.wk-tbl .num .ico-s{margin:0 0 0 5px}
.wk-tbl code{background:#ffffff0d;border-radius:4px;padding:2px 7px;
  font-size:12.5px;color:var(--dim)}
/* --- ödül hücresi: sayı + coin ikonu, sıralama tablosu, açıklama --- */
.wk-coin{display:inline-flex;align-items:center;gap:1px;font-weight:700;
  color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.wk-coin .ico-s{margin:0 0 0 3px}
.wk-odul-ek{display:block;margin-top:3px;font-size:12.5px;color:var(--dim2);
  line-height:1.45}
.wk-odul-metin{display:block;line-height:1.5}
.wk-sira{display:flex;flex-wrap:wrap;gap:5px}
.wk-sira-h{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border:1px solid var(--line);border-radius:5px;background:#ffffff06;
  font-size:13px}
.wk-sira-h b{color:var(--dim2);font-weight:600;font-variant-numeric:tabular-nums}

/* --- harita etiketleri (dünya adı gösterilmiyor) --- */
.wk-harita{display:flex;flex-wrap:wrap;gap:7px}
.wk-harita span{border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;font-size:13.5px;background:var(--wk-zemin)}

.wk-td-ic{width:1px;padding-right:0 !important}
.wk-td-ic .ico{margin:0}
.wk-td-n{width:1px;color:var(--dim2);font-variant-numeric:tabular-nums;
  text-align:center;padding-right:6px !important}
.wk-td-n .ico{margin:0}
.wk-td-ev{color:var(--dim2);font-size:12.5px}
/* Puanlama tablosu: sıralama listeleri 2'şerli sarıyordu, etiket sütununu
   içeriğine daraltıp kalan genişliği ödül hücresine bırak. */
.wk-tbl-puan{max-width:100%}
.wk-tbl-puan tbody th{white-space:nowrap;width:1%}

/* etiket/değer tablosu: sol sütun sabit */
.wk-tbl-kv{max-width:100%}
.wk-tbl-kv th{width:210px;color:var(--dim2) !important;background:#ffffff05}

/* ---- galeri ---- */
.wk-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;max-width:100%}
.wk-galit{margin:0;padding:0;border:1px solid var(--line);border-radius:6px;
  cursor:zoom-in;overflow:hidden;background:var(--wk-zemin);display:block;
  transition:border-color .15s}
.wk-galit:hover{border-color:var(--gold)}
.wk-galit:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wk-galit img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  background:#101114}
.wk-galit figcaption{padding:7px 10px;font-size:12.5px;color:var(--dim);
  border-top:1px solid var(--line)}

.wk-lb{position:fixed;inset:0;z-index:90;background:#000000e0;cursor:zoom-out;
  display:flex;align-items:center;justify-content:center;padding:28px}
.wk-lb img{max-width:100%;max-height:100%;border-radius:6px;
  box-shadow:0 20px 60px #000000a0}

@media (max-width:820px){
  .wk-info{float:none;width:100%;max-width:340px;margin:16px 0 4px}
  .wk-h1{font-size:27px}
  .wk-h2{font-size:19px}
  .wk-toc{display:block}
  .wk-tbl{display:block;overflow-x:auto}
  /* Puanlama dar ekranda üç sütuna sığmıyor (chip'ler hücreden taşıyordu):
     satırları bloğa çevir, ikon+etiket üstte, ödül altında. */
  .wk-tbl-puan,.wk-tbl-puan tbody{display:block}
  .wk-tbl-puan thead{display:none}
  .wk-tbl-puan tr{display:block;padding:12px 14px;
    border-top:1px solid var(--line)}
  .wk-tbl-puan tbody tr:first-child{border-top:0}
  .wk-tbl-puan th,.wk-tbl-puan td{display:block;width:auto;padding:0;border:0;
    white-space:normal}
  .wk-tbl-puan .wk-td-ic{display:inline-block;width:auto;vertical-align:-5px;
    margin-right:7px}
  .wk-tbl-puan tbody th{display:inline}
  .wk-tbl-puan tbody td:last-child{margin-top:7px}
  .wk-tbl-puan tbody tr:hover td,.wk-tbl-puan tbody tr:hover th{background:none}
  .wk-sira-h{font-size:12.5px;padding:3px 8px}
}

/* ---- ana sayfa: Dodgebolt final skoru ----
   Ikon ile takim adi arasinda nefes payi olmali; ayrica isimle skor
   birbirine yapisiyordu (flex gap'i yoktu, span'lar duz inline kaliyordu). */
.finalline{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  padding:10px 0 12px; font-size:15px;
}
.finalline > .ico-m{margin-right:0}
.fl-tak{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.fl-tak .ico-s{margin:0}
.fl-tak.kazanan{font-weight:800}
.fl-skor{
  font-variant-numeric:tabular-nums; color:var(--gold); font-weight:800;
  letter-spacing:.02em;
}
.champline .ico-s{margin-right:6px}

/* ---- WIKI v31: baslikli kapak hero + kunye seridi ----
   Sağa float eden infobox ve icindekiler kutusu kaldirildi: kisa sayfada
   ikisi de gurultuydu, mobilde de metnin ustune yigiliyordu. */
.wk-info,
.wk-toc{display:none !important}

.wk-hero{
  position:relative; display:block; margin:14px 0 0; border-radius:10px;
  overflow:hidden; background:#101114; border:1px solid var(--line);
  aspect-ratio:16/9;
}
/* DOGRUDAN cocuk: `.wk-hero img` icerideki 16px oyun ikonunu da yakalayip
   %100'e geriyordu (kapak gorselinin ustune dev pikselli ikon biniyordu). */
.wk-hero > img{width:100%; height:100%; object-fit:cover; display:block}
.wk-hero .ico{width:26px; height:26px; object-fit:contain; margin-right:8px}
/* Gorsel acilmazsa oyun adi yine de okunsun. */
.wk-hero.bos{
  background:repeating-linear-gradient(135deg,#ffffff08 0 2px,transparent 2px 20px),
    linear-gradient(135deg,color-mix(in srgb,var(--kat,#666) 26%,#191a1e),#131417);
}
.wk-hero.bos > img{display:none}
/* Kapak gorseli oyun adini ZATEN tasiyor: ustune bir de yazi basmak hem
   gereksiz hem de dar ekranda tasiyordu. Ad yalnizca gorsel acilmadiginda
   (yedek zemin) gosterilir. */
.wk-hero-ad{display:none}
.wk-hero.bos .wk-hero-ad{
  display:flex; position:absolute; inset:0;
  align-items:center; justify-content:center; gap:4px;
  font-size:clamp(18px,5vw,26px); font-weight:800; color:#fff;
  text-align:center; padding:0 16px;
}

/* Ekran okuyucu icin baslik; gorsel zaten oyun adini tasiyor. */
.wk-gizli{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wk-kunye{
  display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0;
  border-bottom:1px solid var(--line);
}
.wk-kunye > div{padding:14px 26px 14px 0; margin-right:26px}
.wk-kunye dt{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim2); font-weight:700; margin:0 0 3px;
}
.wk-kunye dd{margin:0; font-size:14.5px; font-weight:600}

/* Resmi aciklama: MCC'nin tanitim metni, alintiya benzer dursun. */
.wk-resmi{border-left:3px solid var(--gold); padding-left:18px; max-width:68ch}
.wk-resmi p{font-size:16px; line-height:1.65; color:var(--fg)}
.wk-resmi p:last-child{margin-bottom:0}

.wk-makale p{max-width:68ch; line-height:1.7}
.wk-makale .wk-h2{margin-top:34px}

/* ---- sosyal medya sekmesi ----
   Resmi hesaplar üstte geniş şerit, oyuncular altta kart ızgarası. Rozetin
   rengi ağın markasından gelir (--sc), kartın kenarı oyuncunun son takımından
   (--tc); ikisi de satır içi değişkenle basılır. */
.soc-official{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px;margin:20px 0 6px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.soc-invite{display:flex;gap:12px;align-items:center;text-decoration:none;
  color:var(--fg);background:#5865f2;border-radius:10px;padding:12px 16px;
  flex:1 1 300px;transition:filter .15s}
.soc-invite:hover{filter:brightness(1.12)}
.soc-invite-ic{font-size:26px;line-height:1}
.soc-invite strong{display:block;font-size:15px}
.soc-invite span{font-size:12.5px;opacity:.85}

.soc-grid{display:grid;gap:12px;margin:12px 0 32px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.soc-card{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--tc,var(--line));border-radius:10px;padding:12px}
.soc-head{display:flex;gap:10px;align-items:center;width:100%;
  background:none;border:0;padding:0;cursor:pointer;color:var(--fg)}
.soc-head .hd{width:32px;height:32px;border-radius:6px;image-rendering:pixelated}
.soc-name{font-weight:700;font-size:15px}
.soc-head:hover .soc-name{color:var(--gold)}

.soc-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.soc-badge{display:inline-flex;gap:6px;align-items:center;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--sc);
  border-radius:6px;padding:5px 8px;font:inherit;font-size:12px;
  color:var(--fg);text-decoration:none;transition:background .15s}
.soc-badge:hover{background:var(--row)}
.soc-net{color:var(--sc);font-weight:700}
.soc-val{color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:150px}
.soc-badge.kopyalandi .soc-val::after{content:" ✔ kopyalandı";color:var(--gold)}
.soc-empty{color:var(--dim);margin:8px 0 32px}

/* ---- Discord ile hesap bağlama kartı ---- */
.lnk-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin:20px 0 4px}
.lnk-title{font-weight:700;font-size:16px;margin-bottom:6px}
.lnk-desc{color:var(--dim);font-size:13px;margin:6px 0 10px}
.lnk-btn{display:inline-block;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:9px 14px;color:var(--fg);font:inherit;font-weight:600;
  font-size:13px;cursor:pointer;text-decoration:none;transition:background .15s}
.lnk-btn:hover{background:var(--row)}
.lnk-btn.discord{background:#5865f2;border-color:#5865f2}
.lnk-btn.discord:hover{filter:brightness(1.12);background:#5865f2}
.lnk-btn:disabled{opacity:.5;cursor:default}
.lnk-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);
  margin-bottom:12px}
.lnk-dot{width:8px;height:8px;border-radius:50%;background:#3ba55d}
.lnk-link{background:none;border:0;color:var(--dim2);font:inherit;font-size:12px;
  text-decoration:underline;cursor:pointer;padding:0}
.lnk-link:hover{color:var(--gold)}
.lnk-step{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.lnk-step-t{font-weight:600;font-size:13px;margin-bottom:8px}
.lnk-input{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;color:var(--fg);font:inherit;font-size:13px;width:180px;
  margin-right:8px}
.lnk-input:focus{outline:2px solid var(--gold);outline-offset:1px}
.lnk-note{font-size:12.5px;margin:10px 0 0}
.lnk-note.ok{color:#55dd77}
.lnk-note.err{color:var(--red)}

/* ---- profildeki sahiplik şeridi ----
   Profil başlığının hemen altında durur; sahipsizken çağrı, sahipliyken
   sadece bilgi verir. */
.shp{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:12px 14px;margin:14px 0 4px}
.shp.benim{border-left-color:#3ba55d}
.shp.dolu{border-left-color:var(--dim2)}
.shp.bekliyor{border-left-color:#5865f2}
.shp-ic{font-size:16px;line-height:1}
.shp-t{font-size:13.5px;font-weight:600}
.shp.dolu .shp-t{color:var(--dim);font-weight:400}
.shp-btn{margin-left:auto}
.shp-input{width:140px;margin:0}
.shp .lnk-note{flex-basis:100%;margin:0}

/* ---- üst bardaki hesap düğmesi ---- */
.usth{display:flex;align-items:center;gap:8px;margin-left:auto}
.usth-btn{background:#5865f2;border:0;border-radius:7px;padding:7px 12px;
  color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  text-decoration:none;transition:filter .15s;white-space:nowrap}
.usth-btn:hover{filter:brightness(1.12)}
.usth-ad{font-size:12.5px;color:var(--dim);white-space:nowrap}
.usth-cikis{background:none;border:0;color:var(--dim2);font:inherit;
  font-size:11.5px;text-decoration:underline;cursor:pointer;padding:0}
.usth-cikis:hover{color:var(--gold)}

/* ---- profil bio + düzenleme formu ---- */
.shp-alt{flex-basis:100%;margin-top:4px}
.shp-bio{margin:0 0 8px;font-size:13.5px;color:var(--fg);white-space:pre-wrap;
  font-weight:400}
.shp.duzenle{border-left-color:#5865f2;align-items:flex-start}
.shp-form{flex-basis:100%;display:flex;flex-direction:column;gap:8px;margin:4px 0}
.shp-bio-in{width:100%;resize:vertical;font-family:inherit;line-height:1.45}
.shp-satir{display:flex;align-items:center;gap:8px}
.shp-etiket{font-size:12px;color:var(--dim);width:64px;flex:none}
.shp-satir .lnk-input{flex:1;margin:0}