:root{--bg:#0f1729;--card:#172238;--card2:#1d2a45;--ink:#eef2fb;--mut:#9fb0cc;--gold:#ffd166;--red:#ff6b6b;--green:#6ee7a8;--brand:#4f8cff;--border:#2a3a5c}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:14px/1.4 "Segoe UI",system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
[hidden]{display:none!important}
header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--border);flex-wrap:wrap;position:sticky;top:0;z-index:5}
header h1{font-size:18px;margin:0;white-space:nowrap}
h1 .logo{width:26px;height:26px;display:inline-block;vertical-align:-6px;margin-right:4px}
header .tur{color:var(--gold);font-weight:800}
header .perde{font-size:11px;color:var(--mut);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
header .sp{flex:1}
header .geri{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
header .geri b{color:var(--ink)}
.altin{background:#3a2f0b;color:var(--gold);border:1px solid #6b5615;border-radius:999px;padding:4px 10px;font-weight:800;font-variant-numeric:tabular-nums}
button{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;font-size:13px;font-family:inherit}
button.g{background:var(--card2);color:var(--ink);border:1px solid var(--border)}
button.k{background:var(--gold);color:#1a1200}
button.s{padding:4px 9px;font-size:12px}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
main{display:grid;grid-template-columns:1fr 340px;gap:12px;padding:12px}
@media (max-width:900px){main{grid-template-columns:1fr}}
#mapwrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:6px;position:relative;touch-action:none;user-select:none}
#mapctl{position:absolute;right:12px;top:12px;display:flex;gap:6px;z-index:2}
#mapctl button{width:34px;height:34px;padding:0;font-size:16px}
#mapctl button.on{background:var(--gold);color:#1a1200}
#map{width:100%;height:auto;display:block;cursor:grab}
.il{stroke:#0f1729;stroke-width:.8;cursor:pointer;transition:filter .15s,opacity .2s}
.il:hover{filter:brightness(1.15)}
.il.sec{stroke:var(--gold);stroke-width:2.2}
.il.dim{opacity:.42}
.il.flash{animation:flash 2.4s ease-out 1}
@keyframes flash{0%{stroke:#fff;stroke-width:4;filter:brightness(1.9)}60%{stroke:var(--gold);stroke-width:3;filter:brightness(1.3)}100%{stroke:#0f1729;stroke-width:.8;filter:none}}
.lbl{pointer-events:none;font-weight:800;font-size:9px;fill:#fff;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:2}
.lbl.n{font-size:8px;font-weight:700}
.ok{stroke-width:2.2;fill:none;marker-end:url(#uc);opacity:.9}
.ok.savas{stroke:#ff6b6b;marker-end:url(#uck);stroke-width:2.6;animation:oksav 2.4s ease-out 1 forwards}
@keyframes oksav{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
.yildiz{pointer-events:none;font-size:10px;text-anchor:middle;dominant-baseline:central}
.surik{pointer-events:none;font-size:8px;text-anchor:middle;dominant-baseline:central}
aside{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;min-height:200px}
aside h2{margin:0 0 6px;font-size:16px}
.mut{color:var(--mut);font-size:12px}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;background:var(--card2);border:1px solid var(--border);margin:2px 2px 0 0}
.chip.gold{color:var(--gold);border-color:#6b5615}
.chip.red{color:var(--red)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
label{display:block;font-size:12px;color:var(--mut);margin-top:8px}
select,input[type=number],input[type=text],textarea{width:100%;background:var(--card2);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:7px 8px;font-size:14px;font-family:inherit}
input[type=range]{width:100%}
hr{border:0;border-top:1px solid var(--border);margin:10px 0}
.tabs{display:flex;gap:6px;padding:0 12px;flex-wrap:wrap}
.tabs button{background:var(--card2);color:var(--mut);border:1px solid var(--border)}
.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.tabs button .n{background:var(--red);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;margin-left:4px}
section#alt{margin:10px 12px 24px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;min-height:160px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 6px;border-bottom:1px solid var(--border);text-align:left;font-variant-numeric:tabular-nums}
th{color:var(--mut);font-weight:700;font-size:11px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.ev{padding:6px 0;border-bottom:1px solid var(--border)}
.ev.dus{color:var(--gold)} .ev.hain{color:var(--red)} .ev.isyan,.ev.gerilla{color:var(--green)} .ev.haber{color:#9ad1ff} .ev.gorev{color:#e6c3ff} .ev.perde,.ev.han{color:#fff;font-weight:800} .ev.iptal{color:var(--mut)}
.manset{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.manset div{font-weight:800;padding:3px 0}
.modal{position:fixed;inset:0;background:rgba(6,10,20,.88);display:none;align-items:center;justify-content:center;z-index:9;padding:12px}
.modal.on{display:flex}
.modal .box{background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:18px;width:min(640px,96vw);max-height:88vh;overflow:auto}
.box h1{margin:0 0 4px;font-size:24px}
.box h1 .logo{width:40px;height:40px;vertical-align:-9px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 14px;border-radius:10px;font-weight:700;z-index:10;max-width:92vw}
.gorev{padding:8px 0;border-bottom:1px solid var(--border)}
.gorev b{display:block}
.oyl{display:block;padding:8px 10px;border:1px solid var(--border);border-radius:10px;margin-top:6px;cursor:pointer}
.oyl input{margin-right:8px}
.msj{padding:6px 8px;border-radius:10px;margin:4px 0;max-width:90%;background:var(--card2);font-size:13px}
.msj.ben{margin-left:auto;background:#2b3f6b}
.msj .z{display:block;font-size:10px;color:var(--mut)}
.hataMetin{color:var(--red);font-size:13px;margin-top:6px}
.dilSec{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.dilSec button{border-radius:0;background:var(--card2);color:var(--mut);padding:4px 10px;border:0}
.dilSec button.on{background:var(--gold);color:#1a1200}
.lobiListe span{display:inline-block;margin:3px 6px 0 0}
@media (prefers-reduced-motion:reduce){.il.flash,.ok.savas{animation:none}}