:root {
  --zemin:#0f1115; --kart:#171a21; --cizgi:#262b36; --metin:#e6e9ef; --soluk:#9aa3b2;
  --vurgu:#4c8dff; --yesil:#34c759; --kirmizi:#ff4d4f; --sari:#ffb020;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--zemin); color:var(--metin);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
a { color:var(--vurgu); text-decoration:none; }
button { background:var(--kart); color:var(--metin); border:1px solid var(--cizgi);
  padding:7px 12px; border-radius:7px; cursor:pointer; font-size:13px; }
button:hover { border-color:var(--vurgu); }
button.tehlike { border-color:var(--kirmizi); color:var(--kirmizi); }
input, select { background:var(--kart); color:var(--metin); border:1px solid var(--cizgi);
  padding:8px 10px; border-radius:7px; font-size:14px; }

.giris-kutu { max-width:340px; margin:12vh auto; background:var(--kart);
  border:1px solid var(--cizgi); border-radius:12px; padding:28px; }
.giris-kutu h1 { margin:0; font-size:24px; }
.giris-kutu .alt { color:var(--soluk); margin:4px 0 20px; }
.giris-kutu form { display:flex; flex-direction:column; gap:10px; }

header { display:flex; align-items:center; gap:18px; padding:12px 18px;
  border-bottom:1px solid var(--cizgi); background:var(--kart); }
header nav { display:flex; gap:14px; }
header nav a.etkin { color:var(--metin); border-bottom:2px solid var(--vurgu); }
header .sag { margin-left:auto; color:var(--soluk); font-size:13px; }
main { padding:18px; max-width:1400px; margin:0 auto; }

.ozet { display:flex; gap:14px; margin-bottom:16px; }
.ozet div { background:var(--kart); border:1px solid var(--cizgi); border-radius:10px;
  padding:12px 20px; min-width:120px; }
.ozet b { display:block; font-size:24px; }
.ozet span { color:var(--soluk); font-size:12px; }

table { width:100%; border-collapse:collapse; background:var(--kart);
  border:1px solid var(--cizgi); border-radius:10px; overflow:hidden; }
th, td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--cizgi); vertical-align:top; }
th { color:var(--soluk); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td { border-bottom:none; }
.kucuk { font-size:12px; color:var(--soluk); }
.bos { text-align:center; color:var(--soluk); padding:28px; }
.kirmiziSatir td { background:rgba(255,77,79,.07); }
.yesil { color:var(--yesil); } .kirmizi { color:var(--kirmizi); }

.nokta { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.nokta.acik { background:var(--yesil); box-shadow:0 0 6px var(--yesil); }
.nokta.kapali { background:var(--soluk); }

.baslik { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.baslik h2 { margin:0; font-size:19px; }
.sekmeler { display:flex; gap:16px; border-bottom:1px solid var(--cizgi); margin-bottom:16px; }
.sekmeler a { padding:8px 2px; color:var(--soluk); }
.sekmeler a.etkin { color:var(--metin); border-bottom:2px solid var(--vurgu); }

.ekran-alani { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.ekran-kutu { position:relative; background:#000; border:1px solid var(--cizgi);
  border-radius:12px; padding:8px; }
#ekranTuvali { display:block; max-height:72vh; max-width:min(420px,90vw); height:auto; width:auto;
  border-radius:6px; cursor:crosshair; background:#000; }
.ortali { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--soluk); }
.ekran-alani aside { flex:1; min-width:260px; }
.dugmeler { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.durum { margin:0 0 6px; }

.komut-kutu { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.suzgec { display:flex; gap:8px; margin-bottom:12px; }
.serit { margin:0; padding:10px 18px; }
.serit.hata { background:rgba(255,77,79,.15); color:var(--kirmizi); }
.serit.bilgi { background:rgba(52,199,89,.13); color:var(--yesil); }
p.hata { color:var(--kirmizi); }

@media (max-width:760px) {
  .ozet { flex-wrap:wrap; }
  .ekran-alani { flex-direction:column; }
}