diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e7ce13a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NEURALFLOW — Gerçek Zamanlı Sinir Ağı Simülatörü</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='6' cy='16' r='4' fill='%2337e0ff'/%3E%3Ccircle cx='26' cy='6' r='4' fill='%23ff5d9e'/%3E%3Ccircle cx='26' cy='26' r='4' fill='%23ff5d9e'/%3E%3Cline x1='8' y1='14' x2='23' y2='7' stroke='%238f7bff' stroke-width='2'/%3E%3Cline x1='8' y1='18' x2='23' y2='25' stroke='%238f7bff' stroke-width='2'/%3E%3C/svg%3E">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <span class="logo-mark"></span>
+      <h1>NEURAL<span>FLOW</span></h1>
+      <span class="tagline">canlı yapay sinir ağı</span>
+    </div>
+    <div class="hud">
+      <div class="hud-cell">
+        <span class="hud-label">EPOCH</span>
+        <span class="hud-value" id="epochReadout">0</span>
+      </div>
+      <div class="hud-cell accent">
+        <span class="hud-label">LOSS</span>
+        <span class="hud-value" id="lossReadout">—</span>
+      </div>
+      <div class="hud-cell">
+        <span class="hud-label">AKTİVASYON</span>
+        <span class="hud-value" id="actReadout">sigmoid</span>
+      </div>
+    </div>
+  </header>
+
+  <main class="workspace">
+    <!-- SOL: Katman Editörü -->
+    <aside class="panel editor-panel" id="editorPanel">
+      <div class="panel-title">
+        <span class="t-bullet"></span> KATMAN EDİTÖRÜ
+      </div>
+
+      <div class="slider-group">
+        <div class="slider-head">
+          <label for="inputSlider">GİRİŞ NÖRON</label>
+          <output id="inputOut">2</output>
+        </div>
+        <input type="range" id="inputSlider" min="1" max="8" value="2" step="1">
+        <div class="slider-scale">
+          <span>1</span><span>4</span><span>8</span>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <div class="slider-head">
+          <label for="hiddenSlider">GİZLİ KATMAN NÖRON</label>
+          <output id="hiddenOut">4</output>
+        </div>
+        <input type="range" id="hiddenSlider" min="1" max="8" value="4" step="1">
+        <div class="slider-scale">
+          <span>1</span><span>4</span><span>8</span>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <div class="slider-head">
+          <label for="hiddenCountSlider">GİZLİ KATMAN SAYISI</label>
+          <output id="hiddenCountOut">3</output>
+        </div>
+        <input type="range" id="hiddenCountSlider" min="1" max="3" value="3" step="1">
+        <div class="slider-scale">
+          <span>1</span><span>2</span><span>3</span>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <div class="slider-head">
+          <label for="outputSlider">ÇIKIŞ NÖRON</label>
+          <output id="outputOut">1</output>
+        </div>
+        <input type="range" id="outputSlider" min="1" max="8" value="1" step="1">
+        <div class="slider-scale">
+          <span>1</span><span>4</span><span>8</span>
+        </div>
+      </div>
+
+      <div class="slider-group lr-group">
+        <div class="slider-head">
+          <label for="lrSlider">ÖĞRENME ORANI</label>
+          <output id="lrOut">0.10</output>
+        </div>
+        <input type="range" id="lrSlider" min="5" max="90" value="10" step="1">
+        <div class="slider-scale">
+          <span>0.05</span><span>0.50</span><span>0.90</span>
+        </div>
+      </div>
+
+      <div class="activation-row">
+        <span class="act-label">AKTİVASYON</span>
+        <div class="segmented" id="activationSeg">
+          <button class="seg-btn active" data-act="sigmoid">SIGMOID</button>
+          <button class="seg-btn" data-act="relu">RELU</button>
+        </div>
+      </div>
+
+      <div class="controls">
+        <button id="runBtn" class="ctrl-btn run">▶ <span>RUN</span></button>
+        <button id="stepBtn" class="ctrl-btn step">⚡ <span>TRAIN STEP</span></button>
+        <button id="resetBtn" class="ctrl-btn reset">⟳ <span>RESET</span></button>
+      </div>
+
+      <div class="arch-preview">
+        <span class="arch-label">MİMARİ</span>
+        <div id="archBars" class="arch-bars"></div>
+      </div>
+    </aside>
+
+    <!-- ORTA: Sinir Ağı Kanvası -->
+    <section class="net-section panel">
+      <div class="net-head">
+        <span class="panel-title-sm net-layer-hint">NÖRON AKIŞI — soldan sağa sinyal, sağdan sola gradyan</span>
+      </div>
+      <canvas id="neuralCanvas"></canvas>
+      <div class="legend">
+        <span class="lg-item"><i class="swatch pos"></i> pozitif ağırlık</span>
+        <span class="lg-item"><i class="swatch neg"></i> negatif ağırlık</span>
+        <span class="lg-item"><i class="swatch fwd"></i> ileri sinyal</span>
+        <span class="lg-item"><i class="swatch bwd"></i> gradyan / hataya dönen alev</span>
+      </div>
+    </section>
+
+    <!-- SAĞ: Ağırlık Isı Haritası -->
+    <aside class="panel heat-panel" id="heatPanel">
+      <div class="panel-title">
+        <span class="t-bullet warm"></span> AĞIRLIK MATRİSİ
+      </div>
+      <canvas id="heatCanvas"></canvas>
+      <div class="heat-scale">
+        <span class="hs-neg">negatif</span>
+        <div class="heat-gradient-bar"></div>
+        <span class="hs-pos">pozitif</span>
+      </div>
+      <div class="panel-title sub">
+        <span class="t-bullet"></span> LOSS — MSE (epoch)
+      </div>
+      <canvas id="lossCanvas"></canvas>
+    </aside>
+  </main>
+
+  <script src="app.js"></script>
+</body>
+</html>
