:root { --koyu:#1d2433; --soluk:#5b6478; --cizgi:#d9dee8; --kirmizi:#c8322b; --yesil:#2f8f4e; --sari:#b97c10; --gri:#8a93a5; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; font-family:system-ui, "Segoe UI", sans-serif; color:var(--koyu); background:#f6f7fa; }
[hidden] { display:none !important; }
h1 { font-size:1.15rem; margin:0; }
.hata { color:var(--kirmizi); font-weight:600; }

.giris { max-width:340px; margin:12vh auto; padding:24px; background:#fff; border:1px solid var(--cizgi); border-radius:12px; display:grid; gap:14px; }
.giris label { display:grid; gap:4px; font-size:.9rem; }
.giris input { padding:11px; font-size:1rem; border:1px solid var(--cizgi); border-radius:8px; }
button { padding:10px 14px; font-size:1rem; border:0; border-radius:8px; background:var(--koyu); color:#fff; cursor:pointer; }
.giris p { margin:0; min-height:1.3em; }

main { height:100%; display:grid; grid-template:auto 1fr / 1fr 340px; }
header { grid-column:1 / -1; display:flex; align-items:center; gap:12px; padding:8px 14px; background:#fff; border-bottom:1px solid var(--cizgi); }
header #baglanti { flex:1; font-size:.85rem; }
header button { padding:6px 12px; font-size:.9rem; }
#harita { min-height:0; }
#liste { list-style:none; margin:0; padding:0; overflow:auto; background:#fff; border-left:1px solid var(--cizgi); }
#liste li { padding:12px 14px; border-bottom:1px solid var(--cizgi); cursor:pointer; }
#liste li.yok { cursor:default; }
.plaka { font-weight:700; }
.bilgi { font-size:.88rem; color:var(--soluk); margin-top:2px; }
.nokta { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; }
.hareket { background:var(--yesil); } .duruyor { background:var(--sari); } .cevrimdisi { background:var(--gri); }
.aku { color:var(--kirmizi); font-weight:700; font-size:.88rem; margin-top:3px; }

.isaret span { display:inline-block; white-space:nowrap; transform:translate(-50%, -50%); padding:3px 7px; border-radius:6px; color:#fff; font:700 12px system-ui, sans-serif; box-shadow:0 1px 4px #0006; }
.isaret .hareket { background:var(--yesil); } .isaret .duruyor { background:var(--sari); } .isaret .cevrimdisi { background:var(--gri); }
.isaret .aku-kesik { outline:3px solid var(--kirmizi); }

@media (max-width:760px) {
  main { grid-template:auto 55vh 1fr / 1fr; }
  #liste { border-left:0; }
}