/* Futbol Radarı — base styles shared by club and player pages (mirrors the homepage). */
:root {
  --ink: #08110d;
  --ink-2: #0c1813;
  --panel: #101f19;
  --panel-2: #142820;
  --line: #1f3a2e;
  --line-soft: #183026;
  --chalk: #edf3ea;
  --muted: #8ea89a;
  --muted-2: #6b8577;
  --lime: #c8ef4a;
  --lime-deep: #9cc22a;
  --live: #ff5a4e;
  --grass-a: #17402c;
  --grass-b: #1b4a33;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 18px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin:0; font-family:var(--body); background:var(--ink); color:var(--chalk); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
#app { min-height:100vh; position:relative; }
a { color:inherit; }
::selection { background:var(--lime); color:var(--ink); }
:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }

/* Grain overlay — fixed, non-interactive */
body:before { content:''; position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width:min(1260px, calc(100% - 48px)); margin:auto; }

/* ---------- Header ---------- */
.topbar { position:sticky; top:0; z-index:100; background:rgba(var(--ink-rgb),.78); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(var(--acc-rgb),.12); }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ink-2); border:1.5px solid var(--lime); box-shadow:0 0 0 4px rgba(var(--acc-rgb),.08); position:relative; overflow:hidden; }
.brand-mark svg { width:32px; height:32px; display:block; }
.brand-mark .sweep { transform-origin:20px 20px; animation:radar 3.2s linear infinite; }
.brand span { font-family:var(--display); font-weight:900; font-size:26px; letter-spacing:.5px; line-height:1; }
.brand span em { font-style:normal; color:var(--lime); }
.navlinks { display:flex; gap:6px; align-items:center; font-size:13px; font-weight:700; }
.navlinks a { position:relative; text-decoration:none; color:var(--text-2); padding:10px 14px; border-radius:999px; transition:color .25s, background .25s; }
.navlinks a:after { content:''; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:var(--lime); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.navlinks a:hover { color:var(--chalk); background:rgba(255,255,255,.04); }
.navlinks a:hover:after { transform:scaleX(1); }
.search-box { position:relative; display:block; }
.search-box svg { position:absolute; left:14px; top:50%; width:15px; height:15px; transform:translateY(-50%); color:var(--muted); pointer-events:none; transition:color .2s; }
.search { width:230px; border:1px solid var(--line); background:var(--ink-2); color:var(--chalk); border-radius:999px; padding:11px 16px 11px 38px; font:600 13px var(--body); outline:none; transition:border-color .25s, width .35s var(--ease-out), box-shadow .25s; }
.search::placeholder { color:var(--muted-2); }
.search:focus { border-color:var(--lime); width:270px; box-shadow:0 0 0 4px rgba(var(--acc-rgb),.1); }
.search-box:focus-within svg { color:var(--lime); }
.pulse { width:8px; height:8px; flex:0 0 8px; background:var(--live); border-radius:50%; position:relative; }
.pulse:after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--live); animation:ping 1.6s var(--ease-out) infinite; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 18px; }
.section-head h2 { margin:0; font-family:var(--display); font-weight:800; font-size:40px; line-height:1; text-transform:uppercase; letter-spacing:.3px; display:flex; align-items:center; gap:12px; }
.section-head h2:before { content:''; width:14px; height:14px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(var(--acc-rgb),.12); flex:0 0 14px; }
.section-head small { display:block; color:var(--muted); font-size:13px; margin-top:8px; }
.section-head > small { font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:1.6px; color:var(--lime); margin:0; padding:6px 12px; border:1px solid rgba(var(--acc-rgb),.25); border-radius:999px; white-space:nowrap; }
.grid-main { display:block; }
.panel { background:linear-gradient(180deg, var(--panel), var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.panel-head strong { font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.mini-crest { width:28px; height:28px; flex:0 0 28px; display:inline-grid; place-items:center; object-fit:contain; border-radius:50%; padding:3px; background:#eef2ec; color:var(--ink); font-size:10px; font-weight:900; transition:transform .4s var(--ease-spring); }
.disclaimer { color:var(--muted-2); font-size:12px; line-height:1.6; margin-top:14px; padding-left:14px; border-left:2px solid var(--line); }
footer { position:relative; background:var(--ink-2); border-top:1px solid var(--line); color:var(--muted); padding:40px 0 34px; font-size:13px; overflow:hidden; }
footer:before { content:''; position:absolute; left:50%; top:-90px; width:180px; height:180px; transform:translateX(-50%); border:2px solid var(--line); border-radius:50%; }
.footer-row { position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-row strong { font-family:var(--display); font-size:24px; font-weight:900; letter-spacing:.5px; color:var(--chalk); }
.footer-row strong em { font-style:normal; color:var(--lime); }
footer a { color:var(--lime); text-decoration:none; }
footer a:hover { text-decoration:underline; }
@keyframes radar { to { transform:rotate(360deg); } }
@keyframes ping { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(3.2); opacity:0; } }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes spin { to { transform:rotate(360deg); } }
.search-suggest { position:absolute; top:calc(100% + 8px); right:0; width:min(320px, 86vw); background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.5); padding:6px; z-index:300; }
.search-suggest[hidden] { display:none; }
.search-suggest button { width:100%; display:flex; align-items:center; gap:10px; background:none; border:0; color:var(--chalk); font:600 13px var(--body); padding:9px 10px; border-radius:10px; cursor:pointer; text-align:left; }
.search-suggest button:hover, .search-suggest button.active { background:var(--panel-2); color:var(--lime); }
.search-suggest img, .search-suggest .mini-crest { width:22px; height:22px; object-fit:contain; flex:none; }
.search-suggest .hint { padding:10px; color:var(--muted); font-size:12px; }
main { padding:40px 0 90px; }
.nav-back { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; padding:9px 14px; border:1px solid var(--line); border-radius:999px; transition:color .2s, border-color .2s; }
.nav-back:hover { color:var(--lime); border-color:var(--lime); }
@media (max-width:860px){ .navlinks { display:none; } }
@media (max-width:600px){ .wrap { width:calc(100% - 28px); } .nav { min-height:62px; gap:12px; } .brand span { font-size:20px; } .brand-mark { width:36px; height:36px; } .search { width:140px; font-size:12px; } .search:focus { width:160px; } .section-head h2 { font-size:30px; } .nav-back span { display:none; } }