@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Orbitron:wght@600;900&display=swap');
* { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100vh; background:#030712; color:#f8fafc; font-family:'Rajdhani',sans-serif; font-size:17px; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background-image:linear-gradient(rgba(14,165,233,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.03) 1px,transparent 1px); background-size:40px 40px; }
.wrap { max-width:1100px; margin:0 auto; padding:24px 20px 60px; }
.top-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(15,23,42,.95); border:1px solid rgba(56,189,248,.25); padding:12px 24px; border-radius:12px; margin-bottom:24px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.top-bar a { color:#38bdf8; font-weight:700; text-decoration:none; transition:.3s; } .top-bar a:hover { color:#fff; text-shadow:0 0 10px #38bdf8; }
.brand { font-family:'Orbitron',sans-serif; font-weight:900; letter-spacing:2px; color:#e2e8f0; }
.card { background:rgba(15,23,42,.88); border:1px solid rgba(56,189,248,.22); border-radius:14px; padding:22px 26px; box-shadow:0 10px 25px rgba(0,0,0,.5); margin-bottom:20px; }
.card h2 { font-family:'Orbitron',sans-serif; font-size:15px; letter-spacing:1.5px; color:#38bdf8; margin:0 0 14px; text-transform:uppercase; }
.form-card { max-width:480px; margin:30px auto; }
.form-card h1 { font-family:'Orbitron',sans-serif; font-size:24px; margin:0 0 6px; text-align:center; background:linear-gradient(90deg,#38bdf8,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.form-card .sub { text-align:center; color:#94a3b8; margin-bottom:18px; font-size:15px; }
label { display:block; font-size:14px; font-weight:700; color:#94a3b8; margin:12px 0 4px; letter-spacing:.5px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea { width:100%; background:#0b1220; border:1px solid rgba(56,189,248,.3); border-radius:8px; padding:11px 14px; color:#fff; font:inherit; outline:none; transition:.25s; }
input:focus, textarea:focus { border-color:#38bdf8; box-shadow:0 0 14px rgba(56,189,248,.35); }
.btn { display:inline-block; width:100%; margin-top:18px; padding:12px 18px; border:0; border-radius:9px; background:linear-gradient(90deg,#0ea5e9,#6366f1); color:#fff; font:700 17px 'Rajdhani',sans-serif; letter-spacing:1px; cursor:pointer; text-align:center; text-decoration:none; transition:.25s; }
.btn:hover { filter:brightness(1.15); box-shadow:0 0 18px rgba(14,165,233,.5); } .btn.gray { background:#334155; } .btn.small { width:auto; margin:0; padding:8px 16px; font-size:15px; }
.msg { min-height:22px; margin-top:14px; font-weight:700; text-align:center; } .msg.ok { color:#4ade80; } .msg.bad { color:#f87171; }
.cap { display:flex; align-items:center; gap:10px; } .cap b { font-family:'Orbitron',sans-serif; font-size:20px; white-space:nowrap; color:#fbbf24; } .cap button { width:auto; margin:0; padding:9px 14px; }
.note { font-size:14px; color:#94a3b8; margin-top:14px; line-height:1.4; }
/* Sayfam */
.hero { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.avatar { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:900 42px 'Orbitron',sans-serif; color:#030712; box-shadow:0 0 28px rgba(56,189,248,.45); flex:0 0 auto; }
.hero h1 { font-family:'Orbitron',sans-serif; font-size:28px; margin:0; word-break:break-all; }
.badge { display:inline-block; padding:3px 12px; border-radius:20px; font-size:14px; font-weight:700; margin:6px 8px 0 0; background:rgba(56,189,248,.15); border:1px solid rgba(56,189,248,.4); color:#7dd3fc; } .badge.gold { background:rgba(251,191,36,.15); border-color:rgba(251,191,36,.5); color:#fbbf24; }
.urlbox { margin-top:10px; font-size:15px; color:#94a3b8; } .urlbox code { color:#7dd3fc; background:#0b1220; padding:3px 9px; border-radius:6px; } .urlbox button { margin-left:6px; }
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.stat { background:#0b1220; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:14px 16px; } .stat span { display:block; color:#94a3b8; font-size:14px; } .stat b { font-family:'Orbitron',sans-serif; font-size:22px; color:#fff; } .stat.gold b { color:#fbbf24; }
.chips span { display:inline-block; background:rgba(14,165,233,.12); border:1px solid rgba(56,189,248,.35); border-radius:8px; padding:5px 12px; margin:4px 6px 4px 0; font-weight:700; cursor:help; color:#bae6fd; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:800px) { .cols { grid-template-columns:1fr; } }
.inbox .m { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); } .inbox .m.new { background:rgba(251,191,36,.08); border-left:3px solid #fbbf24; } .inbox .m small { display:block; color:#64748b; } .inbox .m b a { color:#7dd3fc; text-decoration:none; }
.empty { color:#64748b; font-style:italic; }
.xp { height:8px; background:#0b1220; border-radius:6px; overflow:hidden; margin-top:6px; } .xp i { display:block; height:100%; background:linear-gradient(90deg,#0ea5e9,#a78bfa); }
/* Galibiyet duvarı: skora göre renk (1M altı siyah, 1-2M kırmızı, 2-3M sarı, 3-4M turuncu, 4-5M yeşil, 5M+ mavi) */
.wwall { display:flex; flex-wrap:wrap; gap:6px; }
.wt { flex:var(--g,1) 1 96px; min-width:96px; padding:9px 10px 8px; border-radius:10px; text-align:center; font:900 13px 'Orbitron',sans-serif; color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.35); cursor:default; text-shadow:0 1px 0 rgba(0,0,0,.45); transition:transform .15s; }
.wt:hover { transform:translateY(-2px) scale(1.03); filter:brightness(1.12); }
.wt small { display:block; margin-top:2px; font:700 12px 'Rajdhani',sans-serif; opacity:.92; }
.wt.t0 { background:linear-gradient(#17171d,#08080b); border-color:#3a3a48; }
.wt.t1 { background:linear-gradient(#f43f4f,#c8102e); }
.wt.t2 { background:linear-gradient(#fde047,#d9a900); color:#1a1300; text-shadow:none; }
.wt.t3 { background:linear-gradient(#fb923c,#ea580c); }
.wt.t4 { background:linear-gradient(#4ade80,#15803d); }
.wt.t5 { background:linear-gradient(#60a5fa,#1d4ed8); }
.wleg { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:#94a3b8; margin:-4px 0 14px; }
.wleg i { display:inline-block; width:13px; height:13px; border-radius:4px; margin-right:5px; vertical-align:-2px; border:1px solid rgba(255,255,255,.25); }
.wtotal { font:900 26px 'Orbitron',sans-serif; margin:0 0 10px; } .wtotal small { font:600 14px 'Rajdhani',sans-serif; color:#94a3b8; margin-left:6px; }
/* Biçimsiz giriş kutuları temaya uysun */
input:not([type]), input[type=search], select { background:#0b1220; border:1px solid rgba(56,189,248,.3); color:#fff; border-radius:8px; padding:9px 11px; font:inherit; outline:none; }
input:not([type]):focus { border-color:#38bdf8; box-shadow:0 0 12px rgba(56,189,248,.3); }
input[type=file] { color:#94a3b8; padding:6px 0; } input[type=file]::file-selector-button { background:#1e293b; color:#bae6fd; border:1px solid rgba(56,189,248,.35); border-radius:7px; padding:6px 12px; margin-right:10px; cursor:pointer; font:inherit; }
.cols > .card.wide { grid-column:1 / -1; }
/* Hero ve rekor kartları */
.herocard { background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(99,102,241,.16) 50%,rgba(15,23,42,.92)); border-color:rgba(56,189,248,.5); box-shadow:0 0 44px rgba(56,189,248,.14),0 10px 25px rgba(0,0,0,.5); }
.herocard .avatar { box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 30px rgba(56,189,248,.55); }
.rgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.rcard { position:relative; display:flex; flex-direction:column; gap:8px; padding:18px 16px 14px; border-radius:16px; background:linear-gradient(180deg,rgba(251,191,36,.18),rgba(15,23,42,.9) 55%); border:1px solid rgba(251,191,36,.5); box-shadow:0 8px 26px rgba(251,191,36,.1); text-align:center; }
.rcard .tr { font-size:42px; line-height:1; filter:drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.rcard .rn { font:900 13px 'Orbitron',sans-serif; letter-spacing:1px; color:#fde68a; }
.rcard .rs { font:900 26px 'Orbitron',sans-serif; color:#fbbf24; text-shadow:0 0 18px rgba(251,191,36,.45); }
.rcard .rr { display:flex; gap:6px; } .rcard .rr input { flex:1; min-width:0; } .rcard .rr .btn { margin:0; width:auto; padding:8px 12px; }
[hidden] { display:none !important; }
/* Ortalı Sayfam düzeni */
.wrap { max-width:920px; }
#page .card { text-align:center; }
#page .herocard .hero { flex-direction:column; justify-content:center; text-align:center; gap:10px; }
#page .herocard .hero h1 { font-size:30px; }
#page .urlbox, #page .xp { margin-left:auto; margin-right:auto; }
#page .xp { max-width:340px; }
#page .nrow { justify-content:center; text-align:center; }
#page .stats { text-align:center; }
#page label { text-align:center; }
#page .rgrid { justify-items:stretch; }
#page .inbox .m { text-align:left; }
#skPrev { margin:10px auto !important; }
/* ===== Klasik (agarz tarzı) Sayfam: sade, ortalı, açık zemin ===== */
body.classic { background:#e9f5ff; color:#1b2a3a; font:15px/1.5 Arial,Helvetica,sans-serif; }
body.classic::before { display:none; }
body.classic .wrap { max-width:1500px; padding:14px 18px 50px; }
body.classic .top-bar { background:transparent; border:0; box-shadow:none; padding:0 0 6px; }
body.classic .top-bar a, body.classic .brand { color:#1d4ed8; text-shadow:none; font-family:Arial,sans-serif; }
body.classic #page .card, body.classic #page .herocard { background:transparent; border:0; box-shadow:none; padding:6px 0; margin:0 0 10px; border-radius:0; }
body.classic #page .card h2 { font:700 16px Arial,sans-serif; letter-spacing:0; color:#1b2a3a; text-transform:none; margin:10px 0 6px; }
body.classic #page .herocard .hero { gap:4px; }
body.classic #page .avatar { width:64px; height:64px; font:700 28px Arial; box-shadow:none; }
body.classic #page .hero h1 { font:400 20px Arial,sans-serif; color:#1b2a3a; }
body.classic .badge { background:#d6e9fb; border:1px solid #9cc4ea; color:#12406e; font-size:12px; padding:1px 9px; }
body.classic .badge.gold { background:#fff1c2; border-color:#e7c25a; color:#6b4a00; }
body.classic .urlbox { color:#41627f; font-size:13px; } body.classic .urlbox code { background:#fff; color:#12406e; border:1px solid #b9d5ee; }
body.classic .xp { background:#cfe3f5; max-width:300px; height:5px; } body.classic #xptxt { color:#41627f; opacity:1; }
/* düğmeler: küçük, gri çerçeveli */
body.classic .btn, body.classic .nrow .b2, body.classic .rcard .btn { display:inline-block; width:auto; margin:3px; padding:2px 8px; background:#f4f4f4; color:#111; border:1px solid #767676; border-radius:3px; font:12px Arial,sans-serif; box-shadow:none; text-transform:none; letter-spacing:0; }
body.classic .btn:hover, body.classic .nrow .b2:hover { background:#e3e3e3; filter:none; box-shadow:none; color:#111; }
body.classic .btn.small { padding:2px 8px; }
body.classic .btn.gray { background:#f4f4f4; }
body.classic #page input, body.classic #page input:not([type]), body.classic #page select, body.classic #page textarea { background:#fff; color:#111; border:1px solid #767676; border-radius:2px; padding:3px 6px; font:13px Arial,sans-serif; box-shadow:none; width:auto; }
body.classic #page input[type=text], body.classic #page input[type=email], body.classic #page input[type=password] { width:220px; max-width:90%; }
body.classic #page input[type=file]::file-selector-button { background:#f4f4f4; color:#111; border:1px solid #767676; border-radius:3px; }
body.classic label { color:#1b2a3a; font-weight:400; font-size:13px; margin:6px 0 2px; }
body.classic .note { color:#4b6580; font-size:11px; margin-top:6px; }
body.classic .msg.ok { color:#0a7d2c; } body.classic .msg.bad { color:#b3261e; }
body.classic .empty { color:#6a8097; }
/* istatistik: satır içi */
body.classic .stats { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; }
body.classic .stat { background:transparent; border:0; padding:0; } body.classic .stat span { display:inline; color:#41627f; font-size:14px; } body.classic .stat b, body.classic .stat div { display:inline; font:700 15px Arial; color:#111; margin-left:5px; }
/* kayıtlı isimler kutusu (açık mavi, gri) */
body.classic #namesCard #nameList { display:inline-block; background:#c9d9e8; padding:6px 10px; border-radius:2px; text-align:center; }
body.classic .nrow { border:0; padding:1px 0; gap:4px; justify-content:center; } body.classic .nrow b { font:400 14px Arial; min-width:0; color:#111; }
body.classic .nrow select, body.classic .nrow input[type=color] { padding:0 2px; font-size:12px; }
/* rekor kartları: agarz sarısı */
body.classic .rgrid { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
body.classic .rcard { width:200px; background:#ffe600; border:0; border-radius:0; box-shadow:none; padding:10px 8px; }
body.classic .rcard .rn { font:700 13px Arial; color:#111; letter-spacing:0; } body.classic .rcard .rs { font:700 20px Arial; color:#111; text-shadow:none; }
body.classic .rcard .tr { font-size:34px; filter:none; }
/* galibiyet duvarı: tam genişlik, düz renkli şeritler */
body.classic .wtotal { font:400 20px Arial; margin:6px 0; color:#111; } body.classic .wtotal small { color:#111; font:400 20px Arial; }
body.classic .wleg { justify-content:center; color:#41627f; font-size:12px; margin:0 0 8px; }
body.classic .wwall { gap:3px; }
body.classic .wt { border-radius:2px; border:0; box-shadow:none; padding:5px 8px; font:700 12px Arial,sans-serif; text-shadow:none; flex:var(--g,1) 1 80px; min-width:80px; }
body.classic .wt small { display:inline; margin-left:6px; font:400 11px Arial; opacity:.9; }
body.classic .wt.t0 { background:#000; border:0; } body.classic .wt.t1 { background:#f00000; } body.classic .wt.t2 { background:#ffe600; color:#111; } body.classic .wt.t3 { background:#ff9500; } body.classic .wt.t4 { background:#0f9d1c; } body.classic .wt.t5 { background:#1d6bff; }
body.classic .wt:hover { transform:none; filter:brightness(1.1); }
body.classic .inbox .m { border-bottom:1px solid #b9d5ee; } body.classic .inbox .m.new { background:#fff6d6; border-left-color:#e7a600; }
body.classic #skPrev { background:#fff; }

body.classic .wt { flex:var(--g,1) 1 150px; min-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; justify-content:center; align-items:center; gap:6px; }
body.classic .wt, body.classic .wt * { color:#fff; } body.classic .wt.t2, body.classic .wt.t2 * { color:#111; }
body.classic .wt b { white-space:nowrap; }