[hidden] { display: none !important; }
:root { --nyx: #0f0a1f; --aurora: #7c3aed; --ink: #1c1830; --slate: #5b5670; --line: #e6e2ef; --mist: #f6f4fa; --ok: #0f8a6a; --warn: #b4540a; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 Inter, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--mist); }
header { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--nyx); color: #fff; }
header b { font-weight: 700; } header span.urun { font-weight: 300; opacity: .85; }
header nav { display: flex; gap: 14px; margin-left: 24px; } header nav a { color: #cfc6ea; text-decoration: none; } header nav a.on, header nav a:hover { color: #fff; }
header .kim { margin-left: auto; font-size: 13px; color: #cfc6ea; display: flex; gap: 12px; align-items: center; }
header .kim a { color: #fff; }
main { display: grid; grid-template-columns: 300px 1fr; gap: 16px; padding: 16px 20px; min-height: calc(100vh - 48px); }
.kart { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.hedef { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 6px; cursor: pointer; font: inherit; }
.hedef:hover, .hedef.secili { border-color: var(--aurora); background: #f3eefe; }
.hedef small { display: block; color: var(--slate); }
label { display: block; font-size: 12px; color: var(--slate); margin: 10px 0 4px; }
input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
button.birincil { margin-top: 10px; width: 100%; padding: 9px; border: 0; border-radius: 8px; color: #fff; font: inherit; font-weight: 600; cursor: pointer; background: linear-gradient(90deg, #f97316, #f59e0b); }
button.birincil:disabled { opacity: .45; cursor: default; }
button.ikincil { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
button.tehlike { padding: 6px 12px; border: 1px solid #f1c2a3; color: var(--warn); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
.not { font-size: 12px; color: var(--slate); margin-top: 10px; }
.ust { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ust .durum { font-size: 13px; color: var(--slate); } .ust .sag { margin-left: auto; display: flex; gap: 8px; }
.kayitli { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #b91c1c; } .kayitli::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }
#terminal { height: calc(100vh - 150px); background: #0f0a1f; border-radius: 8px; padding: 6px; }
.bos { display: grid; place-items: center; height: calc(100vh - 150px); color: var(--slate); border: 1px dashed var(--line); border-radius: 8px; text-align: center; padding: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); } th { color: var(--slate); font-weight: 500; font-size: 12px; }
tr.sec { cursor: pointer; } tr.sec:hover { background: #f3eefe; }
.rozet { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: #eee9f8; color: #4c1d95; } .rozet.uyari { background: #fdecdc; color: var(--warn); }
@media (max-width: 1000px) { main { grid-template-columns: 1fr !important; } #terminal, .bos { height: 60vh; } }
#terminal { overflow-x: auto; }
#ekran-kutu { height: calc(100vh - 150px); background: #0f0a1f; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
#ekran { max-width: 100%; max-height: 100%; cursor: default; outline: none; image-rendering: auto; }
#ekran:focus { box-shadow: 0 0 0 2px var(--aurora); }
select#klavye { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; background: #fff; }
.ikiadim { background: #fff4e5; color: #6b3a00; border-bottom: 1px solid #f3d3a6; padding: 10px 16px; font-size: 13px; }
.ikiadim a { color: inherit; font-weight: 600; }