*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

    /* ── TEMA DEĞİŞKENLERİ ── */
    :root {
      --bg:#0a0c0f; --bg2:#111418; --bg3:#181c22;
      --border:#1e2530; --border2:#2a3340;
      --green:#00e676; --amber:#ffab00; --red:#ff1744;
      --blue:#2979ff; --teal:#4dbebd;
      --text:#e8eaf0; --muted:#6b7585;
      --font-head:'Rajdhani',sans-serif;
      --font-mono:'Share Tech Mono',monospace;
    }
    body.light {
      --bg:#f0f2f5; --bg2:#ffffff; --bg3:#e8eaed;
      --border:#d0d5dd; --border2:#b0b8c4;
      --text:#1a1d23; --muted:#6b7585;
    }
    body.light .leaflet-tile { filter:none; }
    body.light .topbar { background:#1a1a2e; }

    body { background:var(--bg); color:var(--text); font-family:var(--font-head); min-height:100vh; transition:background .3s,color .3s; }

    /* ── GİRİŞ EKRANI ── */
    .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(ellipse at 50% 0%,rgba(77,190,189,.08) 0%,transparent 70%); }
    .auth-box  { width:100%; max-width:420px; background:var(--bg2); border:0.5px solid var(--border); border-radius:12px; overflow:hidden; }
    .auth-header { background:var(--bg); padding:24px; text-align:center; border-bottom:0.5px solid var(--border); }
    .auth-header img { height:120px; background:#fff; padding:5px 10px; border-radius:6px; margin-bottom:12px; }
    .auth-title { font-size:20px; font-weight:700; letter-spacing:2px; color:var(--teal); }
    .auth-sub   { font-size:12px; color:var(--muted); font-family:var(--font-mono); margin-top:4px; }
    .auth-body  { padding:24px; }
    .field label { display:block; font-size:11px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:5px; }
    .field input { width:100%; background:#f8f7f4; border:1px solid #d0cdc4; border-radius:6px; padding:10px 12px; color:#1a1a2e; font-family:var(--font-mono); font-size:13px; outline:none; }
    [data-theme="dark"] .field input { background:#181c22; border-color:#2a3340; color:#e8eaf0; }
    .field input:focus { border-color:var(--teal); }
    .auth-btn { width:100%; padding:12px; background:var(--teal); color:#000; border:none; border-radius:6px; font-family:var(--font-head); font-size:16px; font-weight:700; letter-spacing:2px; cursor:pointer; transition:.2s; }
    .auth-btn:hover { opacity:.85; } .auth-btn:disabled { opacity:.5; cursor:not-allowed; }
    .auth-msg { font-family:var(--font-mono); font-size:12px; text-align:center; padding:10px; border-radius:6px; display:none; }
    .auth-msg.ok  { background:rgba(0,230,118,.1); color:var(--green); border:0.5px solid var(--green); }
    .auth-msg.err { background:rgba(255,23,68,.1);  color:var(--red);   border:0.5px solid var(--red); }

    /* ── DASHBOARD ── */
    .dash { display:none; }
    .dash.active { display:block; }
    .wrap { padding:16px; max-width:1100px; margin:0 auto; }

    /* ── TOPBAR ── */
    .topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:10px 16px; background:#1a1a2e; border-bottom:3px solid #e63946; border-radius:8px; flex-wrap:wrap; gap:8px; }
    .logo { font-size:20px; font-weight:700; letter-spacing:2px; color:#ffffff; }
    .status-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .dot { width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }
    .dot.live { background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
    .status-txt { font-family:var(--font-mono); font-size:12px; color:var(--muted); }
    .time-txt   { font-family:var(--font-mono); font-size:12px; color:var(--muted); }

    /* MQTT bağlantı badge */
    .mqtt-badge { font-family:var(--font-mono); font-size:10px; padding:3px 10px; border-radius:4px; border:0.5px solid; letter-spacing:1px; transition:.3s; }
    .mqtt-badge.connected    { background:rgba(0,230,118,.1); color:var(--green); border-color:var(--green); }
    .mqtt-badge.disconnected { background:rgba(255,23,68,.1);  color:var(--red);   border-color:var(--red); }
    .mqtt-badge.connecting   { background:rgba(255,171,0,.1);  color:var(--amber); border-color:var(--amber); }

    /* Yarış sayacı */
    .race-timer { font-family:var(--font-mono); font-size:13px; padding:4px 12px; border-radius:4px; background:rgba(255,23,68,.1); color:var(--red); border:0.5px solid var(--red); display:none; }
    .race-timer.active { display:block; animation:pulse 2s infinite; }

    .top-btns { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    .top-btn { font-family:var(--font-head); font-size:12px; font-weight:600; padding:5px 12px; border-radius:5px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#bbb; cursor:pointer; letter-spacing:1px; text-decoration:none; white-space:nowrap; }
    .top-btn:hover { color:#fff; border-color:rgba(255,255,255,.5); }
    .top-btn.teal { color:var(--teal); border-color:var(--teal); }
    .top-btn.red  { color:var(--red);  border-color:var(--red);  }

    /* Tema butonu */
    .theme-btn { font-family:var(--font-mono); font-size:14px; padding:4px 10px; border-radius:20px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; }
    .theme-btn:hover { background:rgba(255,255,255,.2); }

    /* ── SEKMELER ── */
    .tab-bar { display:flex; gap:4px; margin-bottom:12px; background:var(--bg2); border:0.5px solid var(--border); border-radius:8px; padding:6px; }
    .tab-btn { flex:1; padding:8px; text-align:center; font-size:13px; font-weight:600; letter-spacing:1px; cursor:pointer; color:var(--muted); border-radius:5px; border:none; background:transparent; font-family:var(--font-head); transition:.2s; }
    .tab-btn.active { background:var(--bg3); color:var(--teal); border:0.5px solid var(--border2); }
    .tab-btn:hover:not(.active) { color:var(--text); }
    .tab-panel { display:none; }
    .tab-panel.active { display:block; }

    /* ── KARTLAR ── */
    .grid-top  { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
    .grid-top2 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
    .card { background:var(--bg2); border:0.5px solid var(--border); border-radius:8px; padding:14px 16px; }
    .card-label { font-size:11px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
    .card-val   { font-size:32px; font-weight:700; font-family:var(--font-mono); line-height:1; }
    .card-unit  { font-size:13px; color:var(--muted); margin-left:3px; }
    .card-sub   { font-size:11px; color:var(--muted); margin-top:4px; font-family:var(--font-mono); }
    .card-title { font-size:11px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-bottom:12px; padding-bottom:8px; border-bottom:0.5px solid var(--border); }
    .c-green .card-val { color:var(--green); }
    .c-amber .card-val { color:var(--amber); }
    .c-blue  .card-val { color:var(--blue);  }
    .c-teal  .card-val { color:var(--teal);  }
    .c-purple .card-val { color:#ce93d8; }
    .c-orange .card-val { color:#ff9100; }
    .verim-bar  { height:6px; border-radius:4px; background:var(--bg3); margin-top:6px; overflow:hidden; }
    .verim-fill { height:6px; border-radius:4px; background:linear-gradient(90deg,var(--red),var(--amber),var(--green)); transition:width .5s; }

    .grid-mid { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-bottom:12px; }
    .chart-wrap { position:relative; width:100%; height:160px; }
    .phase-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
    .phase-card { background:var(--bg3); border:0.5px solid var(--border); border-radius:6px; padding:10px; text-align:center; }
    .phase-label { font-size:10px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
    .phase-val   { font-family:var(--font-mono); font-size:18px; font-weight:600; }
    .phase-a { color:var(--red); } .phase-b { color:var(--green); } .phase-c { color:var(--blue); }
    .bar-row { margin-top:10px; }
    .bar-track { background:var(--bg3); border-radius:4px; height:6px; overflow:hidden; margin-top:5px; }
    .bar-fill  { height:6px; border-radius:4px; transition:width .5s; }

    .map-row { margin-bottom:12px; }
    .map-outer { position:relative; border-radius:8px; overflow:hidden; border:0.5px solid var(--border); }
    #map { width:100%; height:360px; }
    .map-hud { position:absolute; top:10px; left:10px; z-index:500; display:flex; flex-direction:column; gap:6px; }
    .hud-pill { background:rgba(10,12,15,.85); border:0.5px solid var(--border2); border-radius:6px; padding:5px 12px; font-family:var(--font-mono); font-size:12px; }
    .hud-spd  { color:var(--green); font-size:26px; font-weight:700; }
    .hud-unit { color:var(--muted); font-size:12px; margin-left:3px; }
    .hud-coord { color:var(--teal); font-size:11px; }
    .map-clear-btn { position:absolute; bottom:10px; right:10px; z-index:500; background:rgba(10,12,15,.85); border:0.5px solid var(--border2); color:var(--muted); font-family:var(--font-mono); font-size:10px; letter-spacing:1px; padding:5px 12px; border-radius:4px; cursor:pointer; }
    .map-clear-btn:hover { color:var(--green); border-color:var(--green); }

    .grid-bot { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .log-box { background:var(--bg3); border:0.5px solid var(--border); border-radius:6px; padding:10px; height:100px; overflow:hidden; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
    .log-line { margin-bottom:3px; }
    .log-line span { color:var(--green); }
    .log-line.err span { color:var(--red); }

    /* ── AI SEKMESİ ── */
    .ai-panel { display:flex; flex-direction:column; gap:12px; }
    .ai-chat  { background:var(--bg3); border:0.5px solid var(--border); border-radius:8px; padding:16px; min-height:300px; max-height:450px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
    .ai-msg   { padding:10px 14px; border-radius:8px; font-family:var(--font-mono); font-size:12px; line-height:1.7; max-width:85%; }
    .ai-msg.ai   { background:var(--bg2); border:0.5px solid var(--border); color:var(--text); align-self:flex-start; }
    .ai-msg.user { background:rgba(77,190,189,.15); border:0.5px solid var(--teal); color:var(--teal); align-self:flex-end; }
    .ai-msg.thinking { color:var(--muted); font-style:italic; }
    .ai-input-row { display:flex; gap:8px; }
    .ai-input { flex:1; background:var(--bg3); border:0.5px solid var(--border2); border-radius:6px; padding:10px 12px; color:var(--text); font-family:var(--font-mono); font-size:12px; outline:none; }
    .ai-input:focus { border-color:var(--teal); }
    .ai-send-btn { padding:10px 20px; background:var(--teal); color:#000; border:none; border-radius:6px; font-family:var(--font-head); font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
    .ai-send-btn:disabled { opacity:.5; cursor:not-allowed; }
    .ai-quick { display:flex; gap:6px; flex-wrap:wrap; }
    .ai-quick-btn { font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:4px; border:0.5px solid var(--border2); background:transparent; color:var(--muted); cursor:pointer; }
    .ai-quick-btn:hover { color:var(--teal); border-color:var(--teal); }

    .leaflet-tile { filter:brightness(0.5) saturate(0.5) hue-rotate(200deg); }
    .leaflet-control-attribution { display:none !important; }
    .leaflet-control-zoom a { background:var(--bg2) !important; color:var(--text) !important; border-color:var(--border2) !important; }

    @media (max-width:700px) {
      .grid-top, .grid-top2 { grid-template-columns:1fr 1fr; }
      .grid-mid, .grid-bot  { grid-template-columns:1fr; }
      #map { height:260px; }
      .tab-btn { font-size:11px; padding:6px 4px; }
      #panel-strateji .card > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
      #panel-strateji > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
      #sp-komut { font-size:34px !important; }
    }