diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..cf21c79
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Stüdyo Teleprompter — Numex Studio</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%2333ff9c'/%3E%3Crect x='5' y='7' width='2.4' height='10' fill='%2333ff9c' rx='1'/%3E%3Crect x='16.6' y='7' width='2.4' height='10' fill='%2322e0ff' rx='1'/%3E%3C/svg%3E" />
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <!-- ============ TELEPROMPTER EKRANI (metnin aktığı asıl alan) ============ -->
+  <main id="teleprompter" class="teleprompter">
+    <div id="scrollContent" class="content" aria-live="off">
+      <h1 id="speechTitle" class="speech-title"></h1>
+      <div id="speechText" class="speech-text"></div>
+    </div>
+    <div class="screen-vignette"></div>
+    <!-- Konum / görünüm göstergesi -->
+    <div id="statusBadge" class="status-badge scr">HAZIR</div>
+  </main>
+
+  <!-- Devasa neon geri sayım (3-2-1) overlay -->
+  <div id="countdown" class="countdown-overlay" aria-hidden="true">
+    <span id="countdownNumber">3</span>
+  </div>
+
+  <!-- ============ KONTROL PANELİ (altyazı çubuğu) ============ -->
+  <aside id="panel" class="control-panel" aria-label="Denetim paneli">
+    <header class="panel-header">
+      <span class="brand-mark">🎙</span>
+      <div class="brand-text">
+        <span class="brand-name">STÜDYO TELEPROMPTER</span>
+        <span class="brand-sub">Numex Studio · Canlı</span>
+      </div>
+      <button id="btnFullscreen" class="icon-btn" title="Tam ekran (F)" aria-label="Tam ekran">⛶</button>
+    </header>
+
+    <!-- Oynatma denetimleri -->
+    <section class="control-row transport" aria-label="Oynatma">
+      <div class="main-buttons">
+        <button id="btnCountdown" class="rec-btn" title="Geri sayımlı başlat (A)">
+          <span class="rec-dot"></span> A · Geri Sayım
+        </button>
+        <button id="btnPlay" class="primary-btn" title="Başlat / Duraklat (Boşluk)">
+          <span id="playIcon">▶</span> <span id="playLabel">Başlat</span>
+        </button>
+        <button id="btnHome" class="ghost-btn" title="Başa dön (HOME)">⟲ En Baş</button>
+      </div>
+    </section>
+
+    <!-- İlerleme çubuğu -->
+    <section class="control-row progress-row" aria-label="İlerleme">
+      <div class="time-display"><span id="elapsed">00:00</span></div>
+      <div class="ruler-wrap">
+        <input id="seekSlider" class="ruler" type="range" min="0" max="1000" value="0" title="Konum" />
+      </div>
+    </section>
+
+    <!-- Hız + Boyut + Ayna + dikey kaydırma -->
+    <section class="control-row sliders" aria-label="Metin ayarları">
+      <div class="slider-field">
+        <label for="speedSlider">
+          <span class="slider-icon">⚡</span>
+          <span class="slider-label">Hız</span>
+        </label>
+        <input id="speedSlider" class="range-val" type="range" min="10" max="500" value="180" step="5" />
+        <span id="speedValue" class="slider-value">180 px/s</span>
+      </div>
+
+      <div class="slider-field">
+        <label for="sizeSlider">
+          <span class="slider-icon">🔤</span>
+          <span class="slider-label">Yazı Boyutu</span>
+        </label>
+        <input id="sizeSlider" class="range-val" type="range" min="20" max="120" value="48" step="2" />
+        <span id="sizeValue" class="slider-value">48 px</span>
+        <div class="mini-actions">
+          <button id="btnSizeMinus" class="mini-btn" title="Küçült (-)">A−</button>
+          <button id="btnSizePlus" class="mini-btn" title="Büyüt (+)">A+</button>
+        </div>
+      </div>
+
+      <div class="slider-field toggles">
+        <button id="btnMirror" class="toggle-btn" title="Ayna (M)" aria-pressed="false">
+          <span class="tg-ico">⇋</span> Ayna
+        </button>
+        <button id="btnVScroll" class="toggle-btn" title="Dikey kaymayı aç/kapat (V)" aria-pressed="true">
+          <span class="tg-ico">↕</span> Dikey Kayma
+        </button>
+      </div>
+    </section>
+
+    <!-- Metin düzenleme -->
+    <section class="panel-section" aria-label="Konuşma metni">
+      <div class="section-head">
+        <span class="section-title">📝 Konuşma Metni</span>
+        <div class="preset-group">
+          <label class="title-field">
+            <input id="speechTitleInput" type="text" placeholder="Konuşma başlığı (opsiyonel)" class="title-input" />
+          </label>
+          <select id="presetSelect" class="preset-select" title="Hazır örnek metin seç">
+            <option value="yeni">➕ Yeni Boş Metin</option>
+            <option value="cumhuriyet">🇹🇷 Cumhuriyet Bayramı Konuşması</option>
+            <option value="lansman">🚀 Ürün Lansman Sunumu</option>
+          </select>
+          <button id="btnApplyText" class="ghost-btn sm">Metni Aktar</button>
+        </div>
+      </div>
+      <textarea id="textEditor" class="text-editor" spellcheck="false"
+        placeholder="Konuşma metnini buraya yapıştırın veya düzenleyin, sonra 'Metni Aktar'a basın."></textarea>
+      <div class="editor-foot">
+        <span id="wordCount">0 kelime · 0 karakter</span>
+        <button id="btnLiveEdit" class="ghost-btn sm toggle-state" title="Aktarımda metni canlı güncelle" aria-pressed="true">
+          ⚡ Canlı Yansı AÇIK
+        </button>
+      </div>
+    </section>
+
+    <!-- Klavye kısayolları -->
+    <footer class="shortcuts" aria-label="Kısayollar">
+      <span><b>SPACE</b> Oynat/Pause</span>
+      <span><b>A</b> Geri sayımlı başlat</span>
+      <span><b>F</b> Tam ekran</span>
+      <span><b>M</b> Ayna</span>
+      <span><b>V</b> Dikey kayma</span>
+      <span><b>↑↓</b> Hız</span>
+      <span><b>+/−</b> Boyut</span>
+      <span><b>HOME</b> Başa dön</span>
+    </footer>
+  </aside>
+
+  <!-- Alt sağ görünürlük göstergesi (toast) -->
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+
+  <script src="app.js"></script>
+</body>
+</html>
