:root{
  --bg:#05070f; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.09);
  --text:#e8ecf8; --muted:#7d87a6; --acc:#5cf2c4; --warn:#ffcf5c; --bad:#ff5f6d;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1100px 760px at 12% -10%,#16204a 0,transparent 60%),
             radial-gradient(900px 700px at 110% 0%,#2a1140 0,transparent 55%),
             linear-gradient(180deg,#05070f,#080b18);
  min-height:100vh; font-size:14px;
}
a{color:inherit;text-decoration:none}

/* ==========================================================================
   ÜST BAR — masaüstünde tek satır, telefonda açılır menü
   Eskiden nav sabit genişlikteydi ve telefonda ekrandan taşıyordu; sayfa
   yatay kayıyor, metinler kesiliyordu. Menü artık 900px altında kapanıp
   hamburger düğmesine bağlanıyor (JS yok, gizli onay kutusu).
   ========================================================================== */
.top{display:flex;align-items:center;gap:20px;padding:12px 18px;border-bottom:1px solid var(--line);
  background:rgba(6,9,20,.82);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.asword{font-weight:900;letter-spacing:2.2px;font-size:15px;line-height:1;white-space:nowrap}
.asword b{color:var(--acc)}
.asmark{flex:0 0 auto;display:block}

.top nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.top nav a{padding:7px 12px;border-radius:9px;font-size:13px;color:#aab3cf;font-weight:600;
  white-space:nowrap}
.top nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.top nav a.on{background:rgba(92,242,196,.15);color:var(--acc)}
.navbtn{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);font-weight:700;font-size:13px;
  transition:.15s;white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn.play{background:linear-gradient(135deg,var(--acc),#3ac7e8);color:#04121a;border-color:transparent}
.btn.sm{padding:5px 10px;font-size:11.5px}

/* hamburger ve perde yalnızca dar ekranda */
.hamburger{display:none;margin-left:auto;width:40px;height:36px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:0 0 auto}
.hamburger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--text);
  transition:.2s}
.menuac:checked ~ .top .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menuac:checked ~ .top .hamburger span:nth-child(2){opacity:0}
.menuac:checked ~ .top .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menuperde{display:none}

@media(max-width:900px){
  .top{gap:12px;padding:10px 14px;flex-wrap:wrap}
  .hamburger{display:flex}
  .top nav{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(8,11,24,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    padding:10px 14px 16px;transform:translateY(-125%);transition:transform .22s ease;z-index:29;
    max-height:calc(100dvh - 56px);overflow-y:auto}
  .menuac:checked ~ .top nav{transform:translateY(0)}
  .top nav a{padding:12px 14px;font-size:15px;border-radius:11px}
  .navbtn{margin:12px 0 0;flex-direction:column;gap:8px}
  .navbtn .btn{justify-content:center;padding:12px;font-size:14px}
  .menuperde{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:28;opacity:0;
    pointer-events:none;transition:opacity .22s}
  .menuac:checked ~ .top .menuperde{display:block;opacity:1;pointer-events:auto}
}

main{max-width:1180px;margin:0 auto;padding:26px 22px 60px}
h1{font-size:clamp(21px,3vw,29px);font-weight:900;letter-spacing:-.5px;margin:0 0 4px}
h2{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin:34px 0 12px;display:flex;align-items:center;gap:10px}
h2:after{content:'';flex:1;height:1px;background:var(--line)}
.sub{color:var(--muted);margin:0 0 6px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:15px 16px}
.grid{display:grid;gap:13px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* istatistik kutusu */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.stat .v{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat .l{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-top:3px}
.stat .s{font-size:11.5px;color:#9aa4c4;margin-top:5px}

/* arma */
.crest{display:inline-grid;place-items:center;font-weight:900;flex:0 0 auto;border-radius:50%;
  letter-spacing:-.3px;line-height:1;font-variant-numeric:tabular-nums;user-select:none}

/* eşleşme satırı */
.fix{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);transition:.15s}
.fix:hover{border-color:rgba(92,242,196,.4);transform:translateY(-1px)}
.fix .names{flex:1;min-width:0}
.fix .names b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fix .names span{font-size:11px;color:var(--muted)}
.fix .num{font-variant-numeric:tabular-nums;font-weight:900;font-size:17px;text-align:right}
.fix .num small{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:1px}

/* tablo */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
  font-weight:800;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px;border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
tr:hover td{background:rgba(255,255,255,.03)}
td.nm{font-variant-numeric:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.num{text-align:right}
.mut{color:var(--muted)}
.pill{display:inline-block;font-size:9.5px;padding:2px 7px;border-radius:20px;
  background:rgba(255,255,255,.08);color:var(--muted);font-weight:700;letter-spacing:.4px}
.score{font-weight:900;font-variant-numeric:tabular-nums}

/* skor barı */
.bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;display:flex;margin-top:6px}
.bar i{display:block;height:100%}

/* yetenek çubukları */
.attrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin-top:10px}
.attr .t{display:flex;justify-content:space-between;font-size:11px;color:#aab3cf;margin-bottom:3px}
.attr .t b{font-variant-numeric:tabular-nums}
.attr .tr{height:5px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.attr .tr i{display:block;height:100%;border-radius:3px}

footer{max-width:1180px;margin:0 auto;padding:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11.5px;line-height:1.7;display:flex;gap:20px;flex-wrap:wrap;
  align-items:flex-start}
footer .fnote{flex:1;min-width:280px}
footer .fnote a{color:var(--acc)}
footer .fby{font-size:11.5px;text-align:right;min-width:220px}
footer .fby a{color:var(--acc);font-weight:700}
footer .fby b{color:var(--text)}
@media(max-width:640px){footer{flex-direction:column}footer .fby{text-align:left}}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabs a{padding:6px 13px;border-radius:9px;font-size:12px;font-weight:700;color:#aab3cf;
  border:1px solid var(--line);background:var(--panel)}
.tabs a.on{background:rgba(92,242,196,.15);color:var(--acc);border-color:rgba(92,242,196,.4)}
.empty{color:var(--muted);padding:22px;text-align:center}


/* --- eşleşme kartı: büyük ortalama skor --- */
.pairbig{gap:12px}
.pairbig .names b{font-size:15px;letter-spacing:.3px}
.pairbig .avg{display:flex;align-items:center;gap:5px;font-weight:900;font-size:22px;
  font-variant-numeric:tabular-nums;position:relative;padding:0 4px}
.pairbig .avg i{font-style:normal;opacity:.3;font-size:15px}
.pairbig .avg small{position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;
  font-size:8px;letter-spacing:1.3px;color:var(--muted);font-weight:800;white-space:nowrap}
.pairbig .goplay{color:var(--acc);font-size:15px;opacity:.55;transition:.15s}
.pairbig:hover .goplay{opacity:1;transform:scale(1.25)}

/* --- canlı akış --- */
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);display:inline-block;
  box-shadow:0 0 10px var(--acc);flex:0 0 auto}
.dot.pulse{animation:dotp .6s ease-out 2}
@keyframes dotp{0%{transform:scale(1)}50%{transform:scale(1.9)}100%{transform:scale(1)}}
.live{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.live:hover{background:rgba(255,255,255,.04)}
.live .t{font-size:11px;color:var(--muted);width:38px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.live .n{flex:1;font-size:13px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .n.r{text-align:left}
.live .sc{font-weight:900;font-size:16px;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.live .sc i{font-style:normal;opacity:.3;margin:0 3px}
.live.fresh{animation:freshIn .7s cubic-bezier(.2,1.2,.3,1) both}
@keyframes freshIn{from{opacity:0;transform:translateY(-12px);background:rgba(92,242,196,.18)}
  to{opacity:1;transform:none;background:transparent}}
.pairbig .dirs{display:block;font-size:10px;color:#68729a;margin-top:2px}

/* ================== ANASAYFA ================== */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:22px;
  align-items:center;margin:6px 0 12px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.hero .kick{font-size:10px;letter-spacing:4px;color:var(--acc);text-transform:uppercase;font-weight:800}
.hero h1{font-size:clamp(32px,6vw,54px);margin:10px 0 8px;letter-spacing:-1.5px;
  background:linear-gradient(120deg,#fff 20%,#8ad6ff 60%,#5cf2c4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#aab3cf;max-width:520px;line-height:1.65;margin:0 0 18px}
.heroBtns{display:flex;gap:9px;flex-wrap:wrap}
.heroStats{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-size:11.5px;color:var(--muted)}
.heroStats b{display:block;font-size:19px;color:var(--text);font-weight:900;font-variant-numeric:tabular-nums}

/* --- günün maçı: arenanın üstünde skor --- */
.heroMatch{display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,rgba(92,242,196,.10),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:18px;transition:.18s}
.heroMatch:hover{transform:translateY(-3px);border-color:rgba(92,242,196,.45);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.hm-art{position:relative;line-height:0}
.hm-art svg{display:block;width:100%;height:auto}
/* skor sahanın üstünde: alttan yukarı koyulaşan bir perde okunurluğu sağlıyor */
.hm-over{position:absolute;inset:auto 0 0 0;padding:26px 16px 12px;text-align:center;
  background:linear-gradient(transparent,rgba(4,7,16,.72) 46%,rgba(4,7,16,.92))}
.hm-k{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--acc);font-weight:800}
.hm-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 0}
.hm-sc{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-1px;
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hm-sc i{font-style:normal;opacity:.3;font-size:22px;margin:0 4px}
.hm-b{padding:12px 16px 14px;text-align:center;border-top:1px solid var(--line)}
.hm-n{font-weight:800;font-size:14px}
.hm-t{font-size:11px;color:var(--muted);margin-top:5px}

.homeGrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:26px;margin-top:10px}
@media(max-width:900px){.homeGrid{grid-template-columns:1fr}}

.news{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;margin-bottom:9px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ac,var(--acc));
  border-radius:5px 13px 13px 5px;transition:.15s}
.news:hover{transform:translateX(3px);background:rgba(255,255,255,.06)}
.news-cat{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;
  color:var(--ac,var(--acc));min-width:62px;padding-top:2px}
.news-b{flex:1;min-width:0}
.news-b b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:3px}
.news-b span{font-size:12.5px;color:#9aa4c4;line-height:1.5}
.news-t{font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:3px}

.joinbox{margin-top:14px}
.joinbox b{font-size:14px}
.joinbox p{font-size:12px;color:#9aa4c4;line-height:1.6;margin:7px 0 12px}
.filters{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters .tabs{margin:0}

/* Form tablosu: sayı sütunları dar ve hizalı dursun */
table.league td, table.league th{padding:5px 7px}
table.league td.num, table.league th.num{width:44px;text-align:right;font-variant-numeric:tabular-nums}
table.league td.nm{max-width:none}
table.league tr:hover td{background:rgba(255,255,255,.03)}


/* ==========================================================================
   GİRİŞ / KAYIT
   Eski hâlinde input'un fontu kalın çıkıyordu: label'a verilen font-weight:700
   `font:inherit` üzerinden input'a geçiyordu. Artık input kendi ağırlığını
   söylüyor. Ekran ikiye ayrıldı — solda ne olduğunu anlatan panel, sağda form.
   ========================================================================== */
.auth{display:grid;grid-template-columns:1.05fr .95fr;gap:0;max-width:940px;margin:34px auto 60px;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75)}

/* --- sol: marka paneli --- */
.auth-side{position:relative;padding:34px 32px;overflow:hidden;
  background:radial-gradient(560px 420px at 15% 0%,rgba(92,242,196,.13),transparent 62%),
             radial-gradient(520px 460px at 110% 100%,rgba(176,107,255,.15),transparent 60%),
             rgba(6,9,20,.55);
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.auth-side .mark{display:flex;align-items:center;gap:9px}
.auth-side .mark .asword{font-size:14px}
.auth-side h2{margin:0;font-size:23px;line-height:1.25;letter-spacing:-.5px;font-weight:900;
  color:var(--text);text-transform:none}
.auth-side h2:after{display:none}
.auth-side p{margin:0;color:#a7b0cd;font-size:13px;line-height:1.7}
.auth-pts{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.auth-pts li{display:flex;gap:9px;font-size:12.5px;color:#c2cae4;line-height:1.5}
.auth-pts li:before{content:'✓';width:16px;height:16px;border-radius:50%;flex:0 0 auto;margin-top:1px;
  background:rgba(92,242,196,.15);border:1px solid rgba(92,242,196,.45);color:var(--acc);
  font-size:9px;font-weight:900;display:grid;place-items:center;line-height:1}
.auth-pts li em{font-style:normal;color:var(--acc);font-weight:700}
/* afiş: giriş panelindeki arena */
.auth-poster{margin:4px 0 0;padding:0;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:rgba(0,0,0,.28)}
.auth-poster svg{display:block;width:100%;height:auto}
.auth-poster figcaption{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px solid var(--line);background:rgba(0,0,0,.34);font-size:11px;font-weight:800;
  letter-spacing:.6px}
.auth-poster .tm{display:flex;align-items:center;gap:6px}
.auth-poster .tm.r{margin-left:auto}
.auth-poster .tm i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.auth-poster .vs{margin:0 auto;color:var(--muted);font-weight:700;font-size:9.5px;letter-spacing:1.1px}

.auth-nums{display:flex;gap:16px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  flex-wrap:wrap}
.auth-nums div{line-height:1.25}
.auth-nums b{display:block;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;
  letter-spacing:-.4px}
.auth-nums span{font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
  font-weight:700}

/* dairesel arena motifi — sahayı hatırlatan sessiz bir imza */
.auth-art{position:absolute;right:-96px;top:44px;width:280px;height:280px;opacity:.4;pointer-events:none}
.auth-art circle{fill:none;stroke:rgba(255,255,255,.16)}
.auth-art .mid{stroke:rgba(92,242,196,.35);stroke-dasharray:3 9}
.auth-art .ball{fill:var(--acc);filter:drop-shadow(0 0 7px var(--acc));
  transform-box:fill-box;transform-origin:140px 140px;animation:orbit 14s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-art .ball{animation:none}}

/* --- sağ: form --- */
.auth-main{padding:32px 32px 28px;display:flex;flex-direction:column}
.auth-seg{display:flex;gap:3px;padding:3px;border-radius:12px;background:rgba(0,0,0,.3);
  border:1px solid var(--line);margin-bottom:22px}
.auth-seg a{flex:1;text-align:center;padding:9px 10px;border-radius:9px;font-size:12.5px;
  font-weight:700;color:#98a2c0;transition:.16s;letter-spacing:.2px}
.auth-seg a:hover{color:#fff}
.auth-seg a.on{background:linear-gradient(135deg,rgba(92,242,196,.22),rgba(58,199,232,.16));
  color:var(--acc);box-shadow:inset 0 0 0 1px rgba(92,242,196,.35)}
.auth-main h1{font-size:22px;margin:0 0 5px}
.auth-main .lead{color:var(--muted);font-size:12.5px;line-height:1.65;margin:0 0 20px}

.authform{display:flex;flex-direction:column;gap:14px}
.authform .f{display:flex;flex-direction:column;gap:6px}
.authform .f > span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);font-weight:800;display:flex;align-items:baseline;gap:7px}
.authform .f > span em{font-style:normal;font-size:10px;letter-spacing:.3px;text-transform:none;
  font-weight:600;color:var(--acc);opacity:.85}
.authform .wrap{position:relative;display:flex;align-items:center}
/* Asıl düzeltme: input kendi fontunu ve ağırlığını söylüyor, label'dan miras almıyor. */
.authform input{width:100%;font-family:inherit;font-size:14.5px;font-weight:500;letter-spacing:.1px;
  color:var(--text);background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;transition:border-color .16s,box-shadow .16s,background .16s}
.authform input::placeholder{color:#5f6885;font-weight:400;letter-spacing:0}
.authform input:hover{border-color:rgba(255,255,255,.16)}
.authform input:focus{outline:none;border-color:rgba(92,242,196,.7);background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(92,242,196,.13)}
.authform input.code{letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
.authform .eye{position:absolute;right:6px;background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.6px;padding:8px 10px;border-radius:8px;
  font-family:inherit;transition:.15s}
.authform .eye:hover{color:var(--text);background:rgba(255,255,255,.07)}
.authform button.play{width:100%;cursor:pointer;margin-top:4px;padding:13px;font-size:14px;
  border:0;font-family:inherit;letter-spacing:.2px}
.authform button.play:hover{transform:translateY(-1px)}
.auth-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.65}
.auth-foot a{color:var(--acc)}
.alert{background:rgba(255,95,109,.1);border:1px solid rgba(255,95,109,.42);color:#ffb3b8;
  border-radius:12px;padding:11px 13px;font-size:12.5px;margin-bottom:16px;line-height:1.5}

@media (max-width:800px){
  .auth{grid-template-columns:1fr;margin:18px auto 40px;border-radius:18px}
  .auth-side{border-right:0;border-bottom:1px solid var(--line);padding:26px 22px}
  .auth-art{display:none}
  .auth-main{padding:24px 22px}
  .auth-nums{margin-top:14px}
}


/* --- anasayfa: öne çıkan eşleşmeler --- */
.featrow{margin-top:2px}
.feat{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  border-radius:16px;background:var(--panel);transition:.18s}
.feat:hover{transform:translateY(-3px);border-color:rgba(92,242,196,.45);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.75)}
.feat-art{position:relative;line-height:0}
.feat-art svg{display:block;width:100%;height:auto}
.feat-go{position:absolute;right:11px;bottom:11px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:#04121a;
  background:linear-gradient(135deg,var(--acc),#3ac7e8);opacity:0;transform:scale(.7);transition:.18s;
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
.feat:hover .feat-go{opacity:1;transform:scale(1)}
.feat-b{padding:11px 13px 13px;border-top:1px solid var(--line)}
.feat-t{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.5px}
.feat-t span{display:flex;align-items:center;gap:6px}
.feat-t span.r{margin-left:auto}
.feat-t i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.feat-t b{color:var(--acc);font-size:10px;letter-spacing:1px;font-weight:800}
.feat-s{font-size:12.5px;font-weight:700;margin-top:7px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.feat-m{font-size:10.5px;color:var(--muted);margin-top:3px}


/* --- hesap: davet --- */
.davetform{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 0}
.davetform input{flex:1;min-width:220px;font-family:inherit;font-size:14px;font-weight:500;
  color:var(--text);background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;transition:border-color .16s,box-shadow .16s}
.davetform input::placeholder{color:#5f6885;font-weight:400}
.davetform input:focus{outline:none;border-color:rgba(92,242,196,.7);
  box-shadow:0 0 0 3px rgba(92,242,196,.13)}
.davetform button{cursor:pointer;border:0;font-family:inherit}
.davetbas{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin:20px 0 6px;display:flex;align-items:center;gap:8px}
.davetbas span{background:rgba(255,255,255,.08);border-radius:20px;padding:1px 8px;font-size:10px}
.kopyala{cursor:pointer;white-space:nowrap}

/* ==========================================================================
   MAÇIN AKIŞI — gol, kart ve değişiklikler tek zaman çizelgesinde
   Ortada dakika şeridi, olaylar ait oldukları takımın tarafında. Ayrı
   listelerde "kim çıktı, sonra ne oldu" görünmüyordu.
   ========================================================================== */
.tl-card{padding:10px 12px;position:relative}
.tl{display:grid;grid-template-columns:1fr 58px 1fr;gap:10px;align-items:center;
  padding:7px 0;position:relative}
/* ortadaki dikey şerit */
.tl-card:before{content:'';position:absolute;left:50%;top:14px;bottom:14px;width:2px;
  transform:translateX(-1px);background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.05))}
.tl-sol{display:flex;align-items:center;justify-content:flex-end;gap:9px;text-align:right;min-width:0}
.tl-sag{display:flex;align-items:center;gap:9px;min-width:0}
.tl-dk{text-align:center;font-size:11px;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:2px 0;position:relative;z-index:1}
.tl.gol .tl-dk{color:var(--text);border-color:rgba(255,255,255,.25)}
.tl-m{font-size:13px;line-height:1.45;min-width:0}
.tl-sol .tl-m{order:-1}
.tl-ek{color:var(--muted);font-size:11px;margin-left:7px;white-space:nowrap}
.tl-ek.bad{color:#ff8b6b}
.tl .cikan{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,95,109,.5)}
.tl .ok{color:var(--muted);margin:0 5px}
.tl-skor{display:inline-block;margin-left:9px;font-weight:900;font-size:12px;
  font-variant-numeric:tabular-nums;background:rgba(255,255,255,.08);border-radius:6px;padding:1px 7px}
/* ikonlar */
.tl-ikon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-size:11px;line-height:1}
.tl-ikon.gol{background:rgba(255,255,255,.1);font-size:12px}
.tl-ikon.deg{background:rgba(92,242,196,.14);color:var(--acc);font-size:12px;font-weight:900}
.tl-ikon.sari{width:11px;height:15px;border-radius:2px;background:#ffcf5c}
.tl-ikon.kirmizi{width:11px;height:15px;border-radius:2px;background:#ff5f6d}
.tl.gol{background:rgba(255,255,255,.028);border-radius:10px}
/* devre arası */
.tl-devre{display:flex;align-items:center;gap:12px;margin:10px 0;color:var(--muted);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:800}
.tl-devre:before,.tl-devre:after{content:'';flex:1;height:1px;background:var(--line)}

/* maç yorumu */
.yorum p{margin:0 0 10px;font-size:13.5px;line-height:1.75;color:#c2cae4}
.yorum p:last-child{margin-bottom:0}
.yorum p:first-child{font-size:15px;color:var(--text);font-weight:600}

/* istatistik çubuğu biraz daha kalın olsun ki oran okunsun */
.bar.tall{height:7px;border-radius:4px}

@media(max-width:640px){
  .tl{grid-template-columns:1fr 46px 1fr;gap:6px}
  .tl-m{font-size:12px}
  .tl-ek{display:block;margin-left:0}
  .tl-card:before{left:calc(50% - 0px)}
}

/* ==========================================================================
   TELEFON DÜZENİ
   Sayfa yatay kaymamalı: 390 px genişlikte hiçbir şey taşmıyor. Kaynak
   sorunlar tek tek kapatıldı — geniş tablolar, iki sütunlu ızgaralar,
   sabit genişlikli kartlar ve uzun sayı satırları.
   ========================================================================== */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  main{padding:18px 14px 44px}
  h1{font-size:clamp(20px,6vw,26px)}
  h2{margin:26px 0 10px}

  /* hero: tek sütun, yazı küçülsün */
  .hero{grid-template-columns:1fr;gap:16px}
  .hero h1{font-size:clamp(28px,10vw,40px);margin:8px 0 6px}
  .hero p{font-size:13.5px;max-width:none}
  .hero .kick{font-size:9px;letter-spacing:2.6px}
  .heroBtns{gap:8px}
  .heroBtns .btn{flex:1 1 auto;justify-content:center;min-width:140px}
  .heroStats{gap:14px;margin-top:16px}
  .heroStats b{font-size:16px}

  /* ızgaralar tek sütun */
  .grid.g2,.grid.g3,.grid.g4,.homeGrid,.auth{grid-template-columns:1fr}
  .homeGrid aside{margin-top:8px}

  /* geniş tablolar kendi içinde kayabilsin */
  .card{padding:13px 12px}
  .card table{display:block;overflow-x:auto;white-space:nowrap}
  table.league{min-width:560px}

  /* sekmeler ve filtreler taşmasın */
  .tabs{flex-wrap:wrap}
  .filters{gap:10px}

  /* canlı akış satırları */
  .live .n{font-size:12px}
  .live .sc{font-size:14px;min-width:44px}

  /* eşleşme kartları */
  .pairbig .avg{font-size:18px}
  .fix{gap:9px;padding:10px}

  /* maç sayfası başlığı */
  .hm-sc{font-size:28px}
  footer{padding:18px 14px}
}

@media(max-width:420px){
  main{padding:14px 11px 40px}
  .card{padding:11px 10px;border-radius:13px}
  .stat{padding:12px 12px}
  .stat .v{font-size:22px}
  .heroStats{gap:11px}
  .heroStats span{font-size:10.5px}
  .heroStats b{font-size:15px}
  .asword{font-size:13px;letter-spacing:1.8px}
}

@media(max-width:760px){
  /* başlık + alt açıklama yan yana sıkışıyordu */
  h2{flex-wrap:wrap;gap:4px 10px}
  h2 .mut{flex-basis:100%;order:3}
  h2:after{order:2}
}

/* ==========================================================================
   IZGARA TAŞMASI
   CSS'te `1fr` aslında `minmax(auto,1fr)` demek ve `auto` tabanı içeriğin
   min-content genişliği. Uzun oyuncu adları ya da geniş tablolar sütunu
   viewport'un ötesine itiyordu; overflow-x:auto da işe yaramıyordu çünkü
   taşan şey tablonun kendisi değil, onu tutan ızgara sütunuydu.
   Taban sıfırlanınca sütun küçülebiliyor ve tablo kendi içinde kayıyor.
   ========================================================================== */
.grid > *{min-width:0}
.tl{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)}
.tl-sol,.tl-sag,.tl-m{min-width:0}
.tl-m{overflow-wrap:anywhere}

@media(max-width:760px){
  .grid.g2,.grid.g3,.grid.g4,.homeGrid{grid-template-columns:minmax(0,1fr)}
  .tl{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)}
  .homeGrid > *{min-width:0}
}

/* ==========================================================================
   FİLTRE ÇUBUĞU — lig ve turnuva
   Dokuz lig ve iki turnuva var; tek satırda sıkıştırmak yerine kaydırılabilir
   satırlar.

   YATAY KAYDIRMA YOK. Bir dönem satır `overflow-x:auto` idi; dokuz lig
   ekrana sığmayınca kaydırma çubuğu çıkıyor ve son ligler görünmüyordu —
   orada bir şey olduğunu ancak kaydırınca anlıyordun. Filtre gizlenecek
   şey değil: sığmayan alt satıra iniyor. Başlık ("LİG") solda sabit
   kalsın diye satır iki sütunlu bir ızgara; sarma yalnızca bağlantılarda.
   ========================================================================== */
.filtre{margin:14px 0 16px;display:flex;flex-direction:column;gap:8px}
.filtre-satir{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:6px}
.filtre-satir .filtre-kutu{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.filtre-bas{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  font-weight:800;padding-right:4px;padding-top:8px;white-space:nowrap}
.filtre-satir a{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  padding:6px 11px;border-radius:9px;font-size:12px;font-weight:700;color:#aab3cf;
  border:1px solid var(--line);background:var(--panel);transition:.15s}
.filtre-satir a:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.filtre-satir a.on{background:rgba(92,242,196,.15);color:var(--acc);border-color:rgba(92,242,196,.42)}
.filtre-satir .say{font-size:9.5px;opacity:.6;font-variant-numeric:tabular-nums}

/* maç listesi: takım rengi işareti — 164 kulüplük listede satırlar
   birbirine karışıyordu, kazanan taraf ayrıca kalın */
.maclist .tren{display:inline-block;width:7px;height:7px;border-radius:50%;
  vertical-align:middle;margin:0 6px;box-shadow:0 0 0 1px rgba(0,0,0,.45);flex:0 0 auto}
.maclist td.nm{max-width:none}

/* ülke bayrağı — satır içi SVG (Windows'ta emoji bayrak render olmuyor) */
.bayrak{display:inline-block;vertical-align:-1px;border-radius:2px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);margin:0 5px 0 0}
.filtre-satir .bayrak{margin:0}
.maclist .bayrak{margin:0 4px}

/* ==========================================================================
   MAÇ KUR — iki künye kartı, aranabilir takım seçimi
   164 kulüplük açılır liste kullanılamıyordu; aradığın takımı bulmak için
   kaydırmak gerekiyordu. Artık yazarak süzülüyor.
   ========================================================================== */
.kur{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:start;
  margin-top:16px}
.kur-taraf{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.kur-orta{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:22px}
.kur-vs{font-size:11px;letter-spacing:2px;font-weight:900;color:var(--muted)}
.kur-orta .btn{cursor:pointer;padding:7px 11px;font-size:15px;line-height:1}

.kunye{display:flex;align-items:center;gap:11px}
.kunye-b{flex:1;min-width:0}
.kunye-b b{display:block;font-size:16px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.kunye-lig{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);margin-top:3px}
.kunye-lig .pill{font-size:8.5px;padding:1px 5px;font-style:normal}
.kunye-guc{text-align:center;flex:0 0 auto}
.kunye-guc b{display:block;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;
  color:var(--acc);line-height:1}
.kunye-guc span{font-size:8.5px;letter-spacing:1.4px;color:var(--muted);font-weight:800}
.kunye-satir{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}

.ara{position:relative;margin-top:11px}
.ara input{width:100%;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--text);
  background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  transition:border-color .16s,box-shadow .16s}
.ara input::placeholder{color:#5f6885;font-weight:400}
.ara input:focus{outline:none;border-color:rgba(92,242,196,.7);box-shadow:0 0 0 3px rgba(92,242,196,.13)}
.ara-liste{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;max-height:320px;
  overflow-y:auto;background:#0c1120;border:1px solid var(--line);border-radius:12px;padding:5px;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.85)}
.ara-liste button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;color:inherit;font:inherit;font-size:13px;padding:7px 8px;border-radius:9px}
.ara-liste button.on,.ara-liste button:hover{background:rgba(92,242,196,.14)}
.ara-liste .ad{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ara-liste .lig{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);
  white-space:nowrap;flex:0 0 auto}
.ara-liste .g{font-size:11px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;
  width:22px;text-align:right;flex:0 0 auto}
.ara-bos{padding:12px;text-align:center;color:var(--muted);font-size:12px}

.kur-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.secgrup{display:flex;align-items:center;gap:8px}
.segsec{display:flex;gap:3px;padding:3px;border-radius:11px;background:rgba(0,0,0,.3);
  border:1px solid var(--line)}
.segsec button{cursor:pointer;background:none;border:0;color:#98a2c0;font:inherit;font-size:12px;
  font-weight:700;padding:7px 12px;border-radius:8px;white-space:nowrap;transition:.15s}
.segsec button:hover{color:#fff}
.segsec button.on{background:rgba(92,242,196,.2);color:var(--acc)}
.btn.buyuk{padding:12px 22px;font-size:14.5px;margin-left:auto}

@media(max-width:760px){
  .kur{grid-template-columns:minmax(0,1fr);gap:10px}
  .kur-orta{flex-direction:row;padding:0;justify-content:center;gap:14px}
  .kur-alt{flex-direction:column;align-items:stretch}
  .btn.buyuk{margin-left:0;justify-content:center}
  /* Kaydırmak yerine alt satıra — filtre çubuğuyla aynı gerekçe:
     sığmayan seçenek gizlenmiş oluyor, orada olduğunu anlamıyorsun. */
  .segsec{flex-wrap:wrap}
  .segsec button{flex:1 0 auto}
  .secgrup{align-items:flex-start;flex-wrap:wrap}
}

/* Maç listesinde ortadaki armalar: bayrak dışta (nereli), arma skora yakın
   (kim). Renkler arenaKits() ile aynı — listede gördüğün renk sahada
   giyilen forma. */
.maclist td.arma{width:26px;padding:0;text-align:center}
.maclist td.arma .crest{width:22px;height:22px;font-size:8px;vertical-align:middle}

/* Maç kur ekranında iki yol: kadroyu kur (uzun yol) / hemen başlat (kısa yol) */
.kur-git{display:flex;gap:9px;margin-left:auto;flex-wrap:wrap}
@media(max-width:760px){ .kur-git{margin-left:0;width:100%} .kur-git .btn{flex:1;justify-content:center} }

/* Telefonda maç listesi: toplam gol sütunu ve tarih saati yer kaplıyor,
   ikisi de skorun yanında zaten okunabilir bilgi değil. */
@media(max-width:640px){
  .maclist th:nth-last-child(2), .maclist td:nth-last-child(2){display:none}
  .maclist td.nm{max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .maclist td.arma{width:22px}
  .maclist td.arma .crest{width:19px;height:19px}
}

/* Anasayfadaki hareketli arena. Posterin üstünü kaplıyor: JS kapalıysa ya da
   "hareket azaltılsın" ayarı açıksa altındaki poster görünmeye devam eder. */
.hm-film{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity .5s ease}
.hm-film.acik{opacity:1}

/* Son 24 saatin uçları — uydurma vitrin değil, kendi verimizdeki gerçek
   uçlar. Her kart o maça götürüyor. */
.uclar{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:11px;margin-bottom:22px}
@media(max-width:760px){.uclar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.uclar{grid-template-columns:minmax(0,1fr)}}
.uc{display:block;padding:13px 14px;border-radius:14px;text-decoration:none;color:inherit;
  background:linear-gradient(160deg,rgba(92,242,196,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);transition:.16s}
.uc:hover{transform:translateY(-2px);border-color:rgba(92,242,196,.42);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75)}
.uc-b{font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--acc);font-weight:800}
.uc-s{display:flex;align-items:center;justify-content:center;gap:9px;margin:9px 0 7px}
.uc-s b{font-size:27px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.uc-s b span{opacity:.3;font-size:18px;margin:0 3px}
.uc-n{font-size:12.5px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.uc-d{font-size:10.5px;color:var(--muted);text-align:center;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc .tren{display:inline-block;width:8px;height:8px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}