diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e0f2341
--- /dev/null
+++ b/style.css
@@ -0,0 +1,203 @@
+: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; }