:root {
  --bg: #070a14;
  --bg2: #0b1020;
  --panel: rgba(18, 25, 48, 0.62);
  --panel-solid: #101731;
  --stroke: rgba(140, 170, 255, 0.16);
  --neon: #37e0ff;
  --neon2: #8f7bff;
  --pink: #ff5d9e;
  --red: #ff4d6d;
  --green: #39f5a0;
  --txt: #dce6ff;
  --dim: #8a97bd;
  --glass-blur: 14px;
}

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

html, body {
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(55,224,255,0.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(143,123,255,0.12), transparent 60%),
    var(--bg);
  color: var(--txt);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
}

/* ---------- ÜST BAR ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 6px 30px rgba(0,0,0,0.35);
  flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 12px; height: 22px; border-radius: 3px;
  background: linear-gradient(#37e0ff, #8f7bff, #ff5d9e);
  box-shadow: 0 0 14px rgba(143,123,255,0.8);
}
.brand h1 { font-size: 22px; letter-spacing: 3px; font-weight: 800; }
.brand h1 span { color: var(--neon); text-shadow: 0 0 12px rgba(55,224,255,0.7); }
.tagline { font-size: 11px; color: var(--dim); letter-spacing: 1px; }

.hud { display: flex; gap: 22px; }
.hud-cell { display: flex; flex-direction: column; align-items: flex-end; }
.hud-label { font-size: 9px; letter-spacing: 2px; color: var(--dim); }
.hud-value {
  font-size: 17px; font-weight: 700; font-family: "Consolas", monospace;
  color: var(--neon);
}
.hud-cell.accent .hud-value { color: var(--pink); }

/* ---------- ÇALIŞMA ALANI ---------- */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 265px 1fr 320px;
  gap: 12px;
  min-height: 0;
}

.panel {
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.3);
}
/* panelin üst kenarına ince "canlı neon" vurgu şeridi */
.panel::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55,224,255,0.55), rgba(143,123,255,0.55), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--txt);
  margin-bottom: 14px;
}
.panel-title.sub { margin-top: 16px; margin-bottom: 8px; font-size: 11px; }
.t-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.t-bullet.warm { background: var(--pink); box-shadow: 0 0 8px var(--pink); }

/* ---------- SOL EDITOR ---------- */
.editor-panel { gap: 4px; overflow-y: auto; }
.editor-panel::-webkit-scrollbar { width: 5px; }
.editor-panel::-webkit-scrollbar-thumb { background: rgba(140,170,255,0.25); border-radius: 4px; }

.slider-group { margin-bottom: 14px; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.slider-head label { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.slider-head output { font-family: "Consolas", monospace; color: var(--neon); font-size: 15px; font-weight: 700; }

input[type="range"] {
  width: 100%; height: 5px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, rgba(55,224,255,0.5), rgba(143,123,255,0.5));
  border-radius: 6px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--neon);
  box-shadow: 0 0 10px rgba(55,224,255,0.9);
}
.slider-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--dim); margin-top: 4px; }
.lr-group { padding-top: 2px; }

.activation-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.act-label { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.segmented { display: flex; border: 1px solid var(--stroke); border-radius: 9px; overflow: hidden; }
.seg-btn {
  flex: 1; padding: 7px 0; font-size: 10px; letter-spacing: 1px; font-weight: 700;
  background: transparent; color: var(--dim); border: none; cursor: pointer;
}
.seg-btn.active { background: linear-gradient(90deg, rgba(55,224,255,0.25), rgba(143,123,255,0.25)); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(55,224,255,0.5); }

.controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ctrl-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 10px; border: 1px solid var(--stroke);
  font-weight: 700; letter-spacing: 1px; cursor: pointer; font-size: 12px;
  background: linear-gradient(90deg, rgba(55,224,255,0.18), rgba(143,123,255,0.18));
  color: var(--txt); transition: all .15s;
}
.ctrl-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(55,224,255,0.25); }
.ctrl-btn.run.running { background: rgba(255,77,109,0.24); box-shadow: 0 0 16px rgba(255,77,109,0.35); }
.ctrl-btn.run.running span::after { content: "LOW"; margin-left: 2px; font-size: 9px; opacity: .8; }
.ctrl-btn.step span::before { }
.ctrl-btn.reset { background: rgba(148,170,255,0.10); border-color: rgba(140,170,255,0.28); }
.ctrl-btn.reset span { color: #b9c6ea; text-shadow: 0 0 8px rgba(148,170,255,0.35); }
.ctrl-btn:active { transform: translateY(1px); }

.arch-preview { margin-top: auto; padding-top: 8px; }
.arch-label { font-size: 10px; letter-spacing: 1px; color: var(--dim); display: block; margin-bottom: 8px; }
.arch-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; align-items: center; justify-content: center; }
.arch-bar {
  width: 22px; border-radius: 5px;
  background: linear-gradient(180deg, var(--neon), var(--neon2));
  box-shadow: 0 0 8px rgba(55,224,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #061020; font-weight: 800;
}

/* ---------- ORTA NET ---------- */
.net-section { position: relative; padding: 10px; }
.net-head { display: flex; justify-content: space-between; align-items: center; }
.net-layer-hint { font-size: 10px; letter-spacing: 1px; color: var(--dim); margin-bottom: 4px; }
#neuralCanvas {
  flex: 1; width: 100%; border-radius: 10px; display: block; min-height: 0;
  background:
    radial-gradient(700px 400px at 50% 30%, rgba(34,50,100,0.6), rgba(7,10,20,0.95)),
    linear-gradient(160deg, rgba(55,224,255,0.03), transparent 45%, rgba(143,123,255,0.04));
  box-shadow: inset 0 0 60px rgba(20,40,90,0.35), inset 0 0 2px rgba(90,160,255,0.25);
}
.legend {
  display: flex; justify-content: center; gap: 16px; padding-top: 10px; flex-shrink: 0;
}
.lg-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.swatch { width: 12px; height: 5px; border-radius: 3px; display: inline-block; }
.swatch.pos { background: #37c7ff; box-shadow: 0 0 6px #37c7ff; }
.swatch.neg { background: #ff4d5e; box-shadow: 0 0 6px #ff4d5e; }
.swatch.fwd { background: #8f7bff; box-shadow: 0 0 6px #8f7bff; }
.swatch.bwd { background: linear-gradient(90deg,#ffb03a,#ff5d3a); box-shadow: 0 0 6px #ff5d3a; }

/* ---------- SAĞ HEAT + LOSS ---------- */
.heat-panel { overflow-y: auto; }
.heat-panel::-webkit-scrollbar { width: 5px; }
.heat-panel::-webkit-scrollbar-thumb { background: rgba(140,170,255,0.25); border-radius: 4px; }
#heatCanvas { width: 100%; height: 210px; border-radius: 10px; background: rgba(5,8,18,0.6); flex-shrink: 0; }
.heat-scale { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 9px; color: var(--dim); letter-spacing: 1px; flex-shrink: 0; }
.heat-gradient-bar {
  flex: 1; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,60,80,0.9), rgba(20,24,40,0.9), rgba(55,199,255,0.9));
}
#lossCanvas { width: 100%; height: 130px; border-radius: 10px; background: rgba(5,8,18,0.6); flex-shrink: 0; }