:root{
  --bg:#09090c; --bg2:#0e0e13; --panel:#131319; --panel2:#18181f; --line:#26262f;
  --red:#e8192c; --red2:#ff3b4d; --redd:#8f0d19; --text:#efeef2; --muted:#9a99a6; --ok:#2fd66b;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;color:#ffd5d9}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:'Rajdhani',sans-serif;line-height:1.05;letter-spacing:.3px}

.demo-bar{background:linear-gradient(90deg,#3a0a10,#5a0f19,#3a0a10);color:#ffd9dc;text-align:center;font-size:12.5px;padding:7px 16px;border-bottom:1px solid #6b1420}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(16px,calc((100% - 1180px)/2));background:rgba(9,9,12,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:700 24px 'Rajdhani';letter-spacing:1px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand b{color:var(--red2)}
#menu{display:flex;align-items:center;gap:4px}
#menu a{padding:8px 12px;border-radius:8px;font:600 15px 'Rajdhani';letter-spacing:.8px;text-transform:uppercase;color:#c9c8d1;transition:.2s}
#menu a:hover{color:#fff;background:var(--panel2)}
#menu a.btn{color:#fff;margin-left:8px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:24px;height:2px;background:#fff;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;border:1px solid var(--red);background:linear-gradient(180deg,var(--red2),var(--red) 60%,var(--redd));color:#fff;font:700 16px 'Rajdhani';letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 24px rgba(232,25,44,.28),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(232,25,44,.45),inset 0 1px 0 rgba(255,255,255,.25);filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:#3a3a46;box-shadow:none}
.btn-ghost:hover{border-color:var(--red2);background:rgba(232,25,44,.1);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:14px}
.btn.off{opacity:.45;pointer-events:none}
.copy{padding:9px 14px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);color:#ddd;font:600 13px 'Inter';cursor:pointer;transition:.2s}
.copy:hover{border-color:var(--red2);color:#fff}
.ico{font-style:normal;font-size:12px}

/* hero */
.hero{position:relative;padding:56px 0 28px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(9,9,12,.55),var(--bg) 96%),radial-gradient(70% 90% at 78% 40%,rgba(232,25,44,.28),transparent 70%)}
.hero-glow{position:absolute;right:-120px;top:-60px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(255,40,60,.38),transparent 65%);z-index:-1;filter:blur(30px);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:scale(1.08)}}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;min-height:520px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 14px 'Rajdhani';letter-spacing:2.4px;text-transform:uppercase;color:var(--red2)}
.dot,.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(47,214,107,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(47,214,107,0)}100%{box-shadow:0 0 0 0 rgba(47,214,107,0)}}
.hero h1{font-family:'Bebas Neue','Rajdhani';font-weight:400;font-size:clamp(52px,8.4vw,108px);line-height:.95;letter-spacing:1.5px;margin:14px 0 18px;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,#ff6b78,var(--red) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(232,25,44,.45))}
.lead{max-width:520px;color:#cfced6;font-size:18px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.ipbox{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(14,14,19,.8)}
.ipl{font:700 12px 'Rajdhani';letter-spacing:2px;color:var(--muted)}
.ipbox code{font-size:17px;font-weight:600}
.hero-logo{display:grid;place-items:center}
.hero-logo img{width:min(520px,100%);height:auto;filter:drop-shadow(0 0 40px rgba(232,25,44,.45)) drop-shadow(0 20px 40px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.stat{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(24,24,31,.9),rgba(14,14,19,.9));display:flex;flex-direction:column;gap:6px}
.stat .k{font:700 12px 'Rajdhani';letter-spacing:2px;color:var(--muted)}
.stat .v{font:700 36px 'Rajdhani';line-height:1}
.stat .v small{font-size:18px;color:var(--muted);margin-left:2px}
.stat .v.t{font-size:26px;display:flex;align-items:center;gap:10px}
.stat .v.ok{color:var(--ok)}
.bar,.meter{height:5px;border-radius:5px;background:#23232c;overflow:hidden}
.bar i,.meter i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--redd),var(--red2));border-radius:5px;transform-origin:left;animation:grow 1.4s .3s both cubic-bezier(.2,.7,.2,1)}
@keyframes grow{from{transform:scaleX(0)}}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#0c0c10;margin-top:28px}
.ticker-in{display:flex;gap:56px;white-space:nowrap;width:max-content;padding:12px 0;animation:tick 38s linear infinite;font:600 14px 'Rajdhani';letter-spacing:1.6px;color:#d8d7df}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:84px 0}
.sec.alt{background:linear-gradient(180deg,var(--bg2),var(--bg));border-block:1px solid #15151b}
.sec-head{margin-bottom:34px}
.sec-head h2{font-size:clamp(34px,5vw,52px);margin-top:8px}
.demo-chip{font-style:normal;margin-left:10px;padding:2px 8px;border-radius:6px;background:#2a1014;border:1px solid #5b1c25;color:#ff9aa3;font:700 11px 'Inter';letter-spacing:1px}
.muted{color:var(--muted)}
.note{margin-top:16px;color:var(--muted);font-size:14px;max-width:760px}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:border-color .2s,transform .2s}
.card:hover{border-color:#3d2228}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.srv{position:relative;display:flex;flex-direction:column;gap:12px}
.srv h3{font-size:26px;margin-top:6px}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:99px;font:700 12px 'Rajdhani';letter-spacing:1.5px;border:1px solid #1f5a37;background:#0f2418;color:var(--ok)}
.kv{list-style:none;display:grid;gap:8px;margin:4px 0}
.kv li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #2a2a33;font-size:15px}
.kv span{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.how{margin-top:18px}
.how h3{font-size:26px;margin-bottom:14px}
.how ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.how li{counter-increment:s;display:grid;gap:4px;padding-left:54px;position:relative}
.how li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--red);font:700 22px 'Rajdhani'}
.how li span{color:var(--muted);font-size:14.5px}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tab{padding:9px 18px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:#c9c8d1;font:700 15px 'Rajdhani';letter-spacing:1px;cursor:pointer;transition:.2s}
.tab:hover{border-color:#4a2a30;color:#fff}
.tab.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 18px rgba(232,25,44,.3)}

/* ranking */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;margin-bottom:22px}
.pod{text-align:center;padding:22px 16px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));position:relative}
.pod.p1{order:2;padding-block:36px;border-color:#7a1c27;background:linear-gradient(180deg,#2a1217,var(--panel));box-shadow:0 0 40px rgba(232,25,44,.18)}
.pod.p2{order:1}.pod.p3{order:3}
.pod .no{font:400 54px 'Bebas Neue';color:var(--red2);line-height:1}
.pod .nm{font:700 22px 'Rajdhani';margin:6px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .sub{color:var(--muted);font-size:13.5px}
.pod .kd{margin-top:8px;display:inline-block;padding:3px 12px;border-radius:99px;background:#2a1014;border:1px solid #5b1c25;color:#ffb0b8;font:700 14px 'Rajdhani'}
.crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:26px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.tbl{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
.tbl th{text-align:left;padding:13px 16px;background:#101015;color:var(--muted);font:700 13px 'Rajdhani';letter-spacing:1.6px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px;border-bottom:1px solid #1d1d24}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:rgba(232,25,44,.06)}
.tbl .n{font:700 18px 'Rajdhani';color:var(--red2);width:48px}
.tbl .kd{font-weight:600;color:#ffb0b8}
.pill{padding:2px 10px;border-radius:99px;font:700 12px 'Rajdhani';letter-spacing:1px;background:#2a1014;border:1px solid #5b1c25;color:#ff9aa3}
.pill.t{background:#241a0b;border-color:#5a4210;color:#ffd27a}

/* match */
.mac-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.next{background:radial-gradient(90% 90% at 100% 0,rgba(232,25,44,.2),transparent 60%),linear-gradient(180deg,var(--panel2),var(--panel));border-color:#4a1a22}
.next h3{font-size:40px;margin:8px 0 4px}
.count{display:flex;gap:12px;margin:22px 0}
.count div{min-width:92px;padding:14px 10px;text-align:center;border-radius:12px;background:#0b0b0f;border:1px solid var(--line)}
.count b{display:block;font:400 48px 'Bebas Neue';line-height:1;color:#fff}
.count span{font:700 11px 'Rajdhani';letter-spacing:2px;color:var(--muted)}
.timeline{list-style:none;display:grid;gap:8px;margin-bottom:20px}
.timeline li{color:#d0cfd8}
.timeline b{display:inline-block;min-width:54px;color:var(--red2);font:700 20px 'Rajdhani'}
.results{display:grid;gap:10px;margin:14px 0}
.res{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:10px;background:#0f0f14;border:1px solid #1f1f27}
.res span{grid-column:1/-1;font-size:12px;color:var(--muted)}
.res b{font:700 17px 'Rajdhani'}
.res b:last-child{text-align:right}
.sc{font-style:normal;font:700 22px 'Rajdhani';padding:2px 12px;border-radius:8px;background:#1b1b22}
.sc.w{background:#2a1014;color:#ff8f9a}
.link{color:var(--red2);font-weight:600;font-size:14.5px}
.link:hover{text-decoration:underline}

/* ban */
.ban-top{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ban-top input,.appeal input,.appeal textarea{flex:1;min-width:220px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:#0c0c10;color:#fff;font:inherit;outline:0;transition:.2s}
.ban-top input:focus,.appeal input:focus,.appeal textarea:focus{border-color:var(--red2);box-shadow:0 0 0 3px rgba(232,25,44,.15)}
.appeal{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;margin-top:22px}
.appeal h3{font-size:30px;margin-bottom:8px}
.appeal form{display:grid;gap:10px}
.ok-msg{color:#9fe3b5;font-size:14px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;background:#111}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s;filter:saturate(.9)}
.g:hover img{transform:scale(1.07);filter:saturate(1.1)}
.g::after{content:"⤢";position:absolute;right:10px;bottom:10px;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:rgba(9,9,12,.7);opacity:0;transition:.2s}
.g:hover::after{opacity:1}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,5,8,.94);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:90vh;border-radius:10px}
.lb-x{position:absolute;top:16px;right:20px;width:48px;height:48px;font-size:34px;color:#fff;background:none;border:0;cursor:pointer}

/* staff */
.staff{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.person{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;padding-top:34px}
.rank{position:absolute;top:12px;font:700 11px 'Rajdhani';letter-spacing:2.2px;color:var(--red2)}
.av{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:14px 0 4px;font:700 38px 'Rajdhani';background:radial-gradient(circle at 30% 25%,#ff5b6a,var(--redd));box-shadow:0 0 0 4px #1b1b22,0 0 30px rgba(232,25,44,.35)}
.person h3{font-size:26px}
.person p{color:var(--muted);margin-bottom:6px}

/* rules */
.acc{display:grid;gap:10px;max-width:900px}
.acc[hidden]{display:none}
.acc details{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.acc summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;font:700 19px 'Rajdhani';letter-spacing:.4px;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font:400 28px 'Inter';color:var(--red2);transition:.2s}
.acc details[open]{border-color:#4a1a22}
.acc details[open] summary::after{content:"–"}
.acc p{padding:0 20px 14px;color:#c5c4cd}
.acc .pen{margin:0 20px 18px;padding:10px 14px;border-left:3px solid var(--red);background:#1a1013;border-radius:0 8px 8px 0;color:#ffc1c7;font-size:14.5px}

/* shop */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shop[hidden]{display:none}
.plan{display:flex;flex-direction:column;gap:16px;position:relative}
.plan.wide{grid-column:1/-1;max-width:560px}
.plan h3{font-size:28px}
.plan.hot{border-color:#7a1c27;background:linear-gradient(180deg,#25131a,var(--panel));box-shadow:0 0 44px rgba(232,25,44,.15)}
.flag{position:absolute;top:-12px;left:20px;padding:3px 12px;border-radius:99px;background:var(--red);font:700 12px 'Rajdhani';letter-spacing:1.5px}
.prices{list-style:none;display:grid;gap:4px;flex:1}
.prices li{display:flex;justify-content:space-between;padding:10px 12px;border-radius:9px;background:#0e0e13}
.prices span{color:var(--muted)}
.prices b{font:700 22px 'Rajdhani'}
.prices li.best{background:#1d1014;border:1px solid #4d1a22}
.prices li.best b{color:#ff8f9a}

/* files */
.files{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.file{display:flex;flex-direction:column;gap:6px;padding:18px}
.file b{font:700 21px 'Rajdhani'}
.file span{color:var(--muted);font-size:14px;flex:1}
.file i{font-style:normal;color:var(--red2);font-weight:600;font-size:14px;margin-top:8px}
.file:hover{transform:translateY(-3px)}

/* contact */
.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ct{display:flex;flex-direction:column;gap:2px}
.ct b{font:700 22px 'Rajdhani'}
.ct span{color:var(--muted)}
.ct:hover{transform:translateY(-3px)}

.foot{border-top:1px solid var(--line);background:#07070a;padding:30px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fb{display:flex;align-items:center;gap:14px}
.fb img{width:54px;height:54px;object-fit:contain}
.fb b{display:block;font:700 20px 'Rajdhani';letter-spacing:1px}
.fb span,.foot p{color:var(--muted);font-size:14px}

.toast{position:fixed;left:50%;bottom:28px;translate:-50% 30px;opacity:0;pointer-events:none;padding:11px 20px;border-radius:10px;background:#1b1b22;border:1px solid var(--red);color:#fff;font-weight:600;transition:.3s;z-index:120}
.toast.on{opacity:1;translate:-50% 0}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center;min-height:0}
  .hero-text{order:2}.hero-logo{order:1}
  .hero-logo img{width:min(340px,80%)}
  .lead{margin-inline:auto}.cta,.ipbox{justify-content:center}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards3,.shop,.staff{grid-template-columns:1fr 1fr}
  .mac-grid,.appeal{grid-template-columns:1fr}
  .gallery,.files,.contact{grid-template-columns:repeat(2,1fr)}
  .how ol{grid-template-columns:1fr}
}
@media (max-width:760px){
  .burger{display:flex}
  #menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;padding:12px 16px 20px;background:rgba(9,9,12,.97);border-bottom:1px solid var(--line);display:none}
  #menu.open{display:flex}
  #menu a{padding:14px 12px;font-size:17px}
  #menu a.btn{margin:8px 0 0;justify-content:center}
}
@media (max-width:620px){
  .sec{padding:60px 0}
  .cards3,.shop,.staff,.contact{grid-template-columns:1fr}
  .files{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:8px}
  .podium{grid-template-columns:1fr}.pod.p1,.pod.p2,.pod.p3{order:initial}
  .count div{min-width:0;flex:1}
  .count b{font-size:40px}
  .stat .v{font-size:30px}
  .brand span{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}


/* ===== ikonlar ===== */
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.copy{display:inline-flex;align-items:center;gap:6px}
.stat .k{display:flex;align-items:center;gap:6px}
.stat .k .i{color:var(--red2)}
.acc summary{display:flex;align-items:center;gap:10px}
.acc summary .i{color:var(--red2);width:22px;height:22px}
.plan h3,.appeal h3{display:flex;align-items:center;gap:10px}
.plan h3 .i,.appeal h3 .i{color:var(--red2)}
.link,.file i{display:inline-flex;align-items:center;gap:6px}
.person .rank{display:inline-flex;align-items:center;gap:6px}
.person .btn .i{width:1em;height:1em}
.how li{counter-increment:none}
.how li::before{display:none}
.how .st{position:absolute;left:0;top:0;box-sizing:border-box;width:42px;height:42px;padding:10px;border-radius:11px;background:linear-gradient(180deg,var(--red2),var(--redd));color:#fff;box-shadow:0 6px 18px rgba(232,25,44,.3)}
.bico{position:absolute;top:22px;right:22px;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#2a1014;border:1px solid #5b1c25;color:var(--red2)}
.bico .i{width:22px;height:22px}
.file .fi,.ct .ci{box-sizing:border-box;width:42px;height:42px;padding:10px;border-radius:11px;background:#2a1014;border:1px solid #5b1c25;color:var(--red2);margin-bottom:8px;transition:.25s}
.card:hover .fi,.card:hover .ci{background:var(--red);color:#fff;border-color:var(--red)}
.search{position:relative;flex:1;min-width:220px;display:block}
.search .i{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.search input{padding-left:42px;width:100%}
.lb-x{display:grid;place-items:center}
.lb-x .i{width:30px;height:30px}
.ticker-in span{display:inline-flex;align-items:center;gap:8px}
.ticker .i{color:var(--red2)}
.tab,.btn{white-space:nowrap}

/* ===== hareket ===== */
.progress{position:fixed;top:0;left:0;width:100%;height:3px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--redd),var(--red2));z-index:200;box-shadow:0 0 12px var(--red)}
.nav{transition:padding .25s,background .25s,box-shadow .25s}
.nav.sc{padding-top:5px;padding-bottom:5px;background:rgba(9,9,12,.96);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.nav.sc .brand img{width:38px;height:38px}
.brand img{transition:width .25s,height .25s}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(232,25,44,.17),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .65s}
.btn:hover::after{left:140%}
.btn .i{transition:transform .25s}
.btn:hover .i{transform:translateX(2px) scale(1.1)}
@keyframes wig{25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
.bico:hover .i,.card:hover .st{animation:wig .5s}
.bar i,.meter i{position:relative;overflow:hidden}
.bar i::after,.meter i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:shim 2.6s infinite}
@keyframes shim{to{transform:translateX(100%)}}
.reveal{transition-delay:var(--d,0s)}
.sec-head h2::after{content:"";display:block;width:0;height:3px;margin-top:12px;background:linear-gradient(90deg,var(--red2),transparent);transition:width .9s .25s}
.sec-head.in h2::after{width:110px}
.pod{animation:rise .8s both cubic-bezier(.2,.7,.2,1)}
.pod.p1{animation-delay:.25s}.pod.p2{animation-delay:.1s}.pod.p3{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(46px)}}
.crown{animation:bob 2.4s ease-in-out infinite;display:grid;place-items:center;color:#ffd27a}
.crown .i{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(255,190,80,.6))}
@keyframes bob{50%{transform:translate(-50%,-5px)}}
.tbl tbody tr{animation:rowin .5s both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes rowin{from{opacity:0;transform:translateX(-18px)}}
.count b.tk{animation:tk .35s}
@keyframes tk{from{transform:translateY(-8px);opacity:.35}}
.av{animation:avp 3s ease-in-out infinite}
@keyframes avp{50%{box-shadow:0 0 0 4px #1b1b22,0 0 44px rgba(232,25,44,.6)}}

/* ===== yeni hero ===== */
.hero{padding:36px 0 40px;background:#07070a}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 60% at 50% 30%,rgba(232,25,44,.2),transparent 72%),linear-gradient(180deg,rgba(9,9,12,0) 60%,var(--bg) 100%)}
.hero-fog{position:absolute;inset:0;z-index:-3;background:
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/54px 54px,
  linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/54px 54px,
  radial-gradient(90% 70% at 50% 0,#1a0b10,#07070a 70%)}
.embers{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.op{position:absolute;top:18px;margin:0;width:min(34vw,470px);aspect-ratio:2/3;z-index:-1;pointer-events:none;animation:opf 7s ease-in-out infinite}
.op img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05);
  -webkit-mask-image:linear-gradient(var(--dir,to right),#000 42%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 62%,transparent 100%);
  mask-image:linear-gradient(var(--dir,to right),#000 42%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.op-t{left:0;transform:translateX(calc(var(--px,0)*-16px))}
.op-ct{right:0;--dir:to left;transform:translateX(calc(var(--px,0)*-16px));animation-delay:-3.5s}
@keyframes opf{50%{translate:0 -12px}}
.op figcaption{position:absolute;bottom:34%;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;font:700 15px 'Rajdhani';letter-spacing:2px;color:#fff;background:rgba(9,9,12,.7);border-left:3px solid var(--red2)}
.op-t figcaption{left:6%}
.op-ct figcaption{right:6%;border-left:0;border-right:3px solid #7fb0ff}
.op-ct figcaption .i{color:#7fb0ff}.op-t figcaption .i{color:var(--red2)}
.hero-core{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:680px;position:relative}
.hero-logo{position:relative;width:min(290px,62vw);aspect-ratio:1;margin-bottom:6px}
.hero-logo .tilt{position:absolute;inset:0;transition:transform .15s ease-out;transform-style:preserve-3d}
.hero-logo img{width:100%;height:100%;filter:drop-shadow(0 0 34px rgba(232,25,44,.5)) drop-shadow(0 16px 30px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite}
.rings{position:absolute;inset:-10%;width:120%;height:120%;fill:none;stroke:rgba(232,25,44,.5)}
.rings *{transform-box:fill-box;transform-origin:center}
.rings .r1{stroke-dasharray:2 11;stroke-width:2;animation:spin 46s linear infinite}
.rings .r2{stroke-dasharray:70 34 10 34;stroke-width:1.5;animation:spin 28s linear infinite reverse}
.rings .r3{stroke:var(--red2);stroke-width:3;animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bigip{display:flex;align-items:baseline;justify-content:center;gap:4px 8px;flex-wrap:wrap;margin:8px 0 2px}
.bigip b{font:400 clamp(54px,9.5vw,96px) 'Bebas Neue';line-height:1;letter-spacing:2px;background:linear-gradient(180deg,#ff7a86,var(--red) 78%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(232,25,44,.5));animation:flick 8s infinite}
@keyframes flick{0%,91%,100%{transform:none}92%{transform:translateX(-3px) skewX(-4deg)}94%{transform:translateX(3px)}96%{transform:none}}
.bigip em{font:600 24px 'Rajdhani';color:var(--muted);font-style:normal}
.bigip .copy{align-self:center;margin-left:6px}
.hero .lead{margin:10px 0 22px;max-width:520px;font-size:17px}
.joinbox{display:flex;gap:8px;width:100%;padding:8px;border:1px solid #5b1c25;border-radius:14px;background:rgba(10,8,10,.8);box-shadow:0 0 50px rgba(232,25,44,.14);align-items:stretch}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.seg label{display:flex;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:100%;font:700 16px 'Rajdhani';letter-spacing:1px;color:#a9a8b3;transition:.2s}
.seg label:first-child input:checked+span{background:var(--red);color:#fff}
.seg label:last-child input:checked+span{background:#2c6ad6;color:#fff}
.seg input:focus-visible+span{outline:2px solid #fff;outline-offset:-2px}
.nick{position:relative;flex:1;min-width:0;display:block}
.nick .i{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.nick input{width:100%;height:100%;min-height:48px;padding:0 14px 0 42px;border-radius:10px;border:1px solid var(--line);background:#0c0c10;color:#fff;font:inherit;outline:0;transition:.2s}
.nick input:focus{border-color:var(--red2);box-shadow:0 0 0 3px rgba(232,25,44,.15)}
.join{flex:none;padding-inline:26px}
.join-note{margin:10px 0 18px;color:var(--muted);font-size:13px}
.hero .cta{margin:0 0 6px;justify-content:center}
.quick{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 14px;margin-top:26px}
.qb{display:flex;flex-direction:column;align-items:center;gap:9px;width:88px;font:700 12px 'Rajdhani';letter-spacing:1.2px;text-transform:uppercase;color:#d5d4dc;animation:pop .55s both cubic-bezier(.2,.9,.3,1.3);animation-delay:calc(.35s + var(--i)*70ms)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.6)}}
.qb .c{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg,#201218,#100a0d);border:1px solid #5b1c25;color:#ff8b96;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.qb .i{width:26px;height:26px}
.qb:hover .c{transform:translateY(-6px);border-color:var(--red2);background:linear-gradient(180deg,#3a1019,#1a0a0e);box-shadow:0 12px 30px rgba(232,25,44,.4);color:#fff}
.qb:hover .i{animation:wig .5s}
.hero .stats{margin-top:34px}
.roster{margin-top:36px}
.hud{position:relative;padding:44px 22px 22px;border:1px solid #4f1a22;background:linear-gradient(180deg,rgba(24,12,16,.88),rgba(10,8,10,.92));box-shadow:0 0 60px rgba(232,25,44,.1)}
.hud::before,.hud::after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--red2)}
.hud::before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.hud::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.hud-title{position:absolute;left:50%;top:-1px;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:9px 40px;background:linear-gradient(180deg,var(--red2),var(--redd));clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 100%,0 100%);font:700 19px 'Rajdhani';letter-spacing:2px;white-space:nowrap}
.hud-title .demo-chip{margin-left:4px;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.25);color:#fff}
.hud-total{text-align:right;color:var(--muted);font-size:14px;margin-bottom:12px}
.hud-total b{color:#fff;font:700 20px 'Rajdhani'}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.team{border:1px solid var(--line);border-radius:12px;background:rgba(8,8,11,.6);overflow:hidden}
.team h3{display:flex;align-items:center;gap:10px;padding:12px 16px;font:700 20px 'Rajdhani';letter-spacing:1px;border-bottom:1px solid var(--line);background:rgba(232,25,44,.08)}
.team h3 .i{color:var(--red2)}
.team.ct h3{background:rgba(70,130,255,.09)}.team.ct h3 .i{color:#7fb0ff}
.team h3 span{margin-left:auto;color:var(--muted);font-size:16px}
.plist{list-style:none;min-height:88px;max-height:260px;overflow:auto}
.plist li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #17171d;animation:rowin .45s both}
.plist li:last-child{border-bottom:0}
.plist .av2{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px 'Rajdhani';background:var(--redd);color:#fff;flex:none}
.team.ct .av2{background:#1f4fa8}
.plist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .ok{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;border:1px solid #1f5a37;background:#0f2418;color:var(--ok);font:700 12px 'Rajdhani';letter-spacing:1px}
.plist .ok i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.plist .empty{display:block;padding:24px 16px;color:var(--muted);text-align:center;font-size:14px;animation:none}

@media (max-width:980px){
  .op{width:58vw;opacity:.4;top:0}
  .op figcaption{display:none}
  .hero-core{text-align:center}
}
@media (max-width:620px){
  .joinbox{flex-wrap:wrap}
  .seg{width:100%}.seg label{flex:1}.seg span{justify-content:center;width:100%;height:44px}
  .nick{flex:1 1 100%}
  .join{width:100%;justify-content:center}
  .teams{grid-template-columns:1fr}
  .hud{padding:44px 12px 14px}
  .hud-title{padding-inline:28px;font-size:16px}
  .qb{width:78px;font-size:11px}
  .qb .c{width:54px;height:54px}
}
.quick{width:min(960px,calc(100vw - 32px))}
@media (max-width:980px){
  .hero-logo{order:0}
  .hero-logo img{width:100%}
  .hero-text{order:0}
}

.credit{text-align:right}
.credit p{margin:0}
.credit .dev{margin-top:4px;font-size:14px;color:var(--muted)}
.credit .dev a{color:var(--red2);font-weight:600;border-bottom:1px solid transparent;transition:.2s}
.credit .dev a:hover{border-color:var(--red2)}
@media (max-width:620px){.credit{text-align:left}}

/* ===== performans ===== */
.op{will-change:transform,translate}
.hero.paused,.hero.paused *{animation-play-state:paused!important}

/* ===== yükleme ekranı ===== */
html.loading,html.loading body{overflow:hidden}
html.loading .qb,html.loading .hero .reveal{animation-play-state:paused}
#loader{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;background:radial-gradient(60% 60% at 50% 40%,#2a0c13,#07070a 70%);transition:opacity .7s ease,transform .7s ease,visibility .7s}
#loader.done{opacity:0;visibility:hidden;transform:scale(1.06);pointer-events:none}
.ld-scan{position:absolute;left:0;right:0;height:140px;top:-140px;background:linear-gradient(180deg,transparent,rgba(232,25,44,.14),transparent);animation:scan 3s linear infinite;pointer-events:none}
@keyframes scan{to{transform:translateY(calc(100vh + 280px))}}
.ld-in{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;text-align:center}
.ld-logo{position:relative;width:150px;aspect-ratio:1;margin-bottom:26px}
.ld-logo img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 26px rgba(232,25,44,.55));animation:ldp 1.6s ease-in-out infinite}
@keyframes ldp{50%{transform:scale(1.06);filter:drop-shadow(0 0 40px rgba(255,60,80,.8))}}
.ld-title{font:700 30px 'Rajdhani';letter-spacing:4px;margin-bottom:18px}
.ld-title b{color:var(--red2)}
.ld-title span{font-size:15px;letter-spacing:5px;color:var(--muted);margin-left:4px}
.ld-bar{width:100%;height:6px;border-radius:6px;background:#1d1d25;overflow:hidden;border:1px solid #2a2a33}
.ld-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--redd),var(--red2));box-shadow:0 0 14px rgba(232,25,44,.7);position:relative;overflow:hidden}
.ld-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shim 1.2s infinite}
.ld-row{display:flex;justify-content:space-between;width:100%;margin:10px 0 18px;font:600 14px 'Rajdhani';letter-spacing:1.5px;text-transform:uppercase;color:#bdbcc6}
#ldPct{color:var(--red2);font-weight:700}
.ld-log{list-style:none;width:100%;text-align:left;font:500 13px ui-monospace,Consolas,monospace;color:#8d8c98;min-height:100px}
.ld-log li{opacity:0;transform:translateX(-8px);transition:.35s;padding:2px 0}
.ld-log li::before{content:"> ";color:var(--red2)}
.ld-log li.on{opacity:1;transform:none}
.ld-log li.last.on{color:var(--ok)}
@media (prefers-reduced-motion:reduce){.ld-scan{display:none}}

.av{overflow:hidden;padding:0}
.av img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.person:hover .av img{transform:scale(1.12)}

.g img{object-position:center 22%}
.disc-row{padding:0 0 26px;border-top:1px solid #15151b}
.disc{margin:18px 0 0;color:#7c7b88;font-size:12.5px;line-height:1.6;max-width:900px}
.foot{padding-bottom:0}

/* hero arka plan videosu */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:0;transition:opacity 1.4s;pointer-events:none}
.hero-video.on{opacity:.5}

/* Giriş videosu yumuşak kenar */
.hero-video{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%)}