diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 1b0c7db..85c3cd4 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -2,7 +2,7 @@ name: Deploy CodeSnip to GitHub Pages
 
 on:
   push:
-    branches: ["26Q2.5"]
+    branches: ["26Q3.5"]
   workflow_dispatch:
 
 permissions:
@@ -28,7 +28,7 @@ jobs:
       - name: Upload site artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./docs
+          path: .
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v5
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index 1b0c7db..eb02346 100644
--- a/.github/workflows/static.yml
+++ b/.github/workflows/static.yml
@@ -1,8 +1,6 @@
 name: Deploy CodeSnip to GitHub Pages
 
 on:
-  push:
-    branches: ["26Q2.5"]
   workflow_dispatch:
 
 permissions:
@@ -28,7 +26,7 @@ jobs:
       - name: Upload site artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./docs
+          path: .
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v5
diff --git a/index.html b/index.html
index 4d01f5e..8cd355f 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
 <body class="dark-theme">
     <div class="electron-titlebar">
         <div class="titlebar-drag-zone">
-            <img src="icon.ico" alt="Logo" class="titlebar-logo">CodeSnip - Kod ve Prompt Deposu
+            <img src="icon.png" alt="Logo" class="titlebar-logo">CodeSnip
         </div>
 
         <!-- Sağ Üst Windows Butonları -->
@@ -40,37 +40,30 @@
     <div class="app-container">
         <aside class="sidebar">
             <div class="logo-container">
-                <img src="icon.ico" alt="Logo" class="logo-img">
+                <img src="icon.png" alt="Logo" class="logo-img">
                 <span class="logo-text">CodeSnip</span>
             </div>
 
-            <nav>
+            <nav id="sidebar-nav">
                 <button class="nav-item active" onclick="filterCategory('all', this)" id="nav-all">
-                    <span><span class="lang-txt" data-tr="Tüm Kodlar" data-en="All Snippets">Tüm Kodlar</span></span>
+                    <span><i class="bi bi-collection"></i> <span class="lang-txt" data-tr="Tüm Kodlar"
+                            data-en="All Snippets">Tüm Kodlar</span></span>
                     <span class="badge" id="badge-all">0</span>
                 </button>
                 <button class="nav-item" onclick="filterCategory('favorites', this)" id="nav-favorites"
                     style="color: #ffcc00;">
-                    <span>⭐ <span class="lang-txt" data-tr="Favoriler" data-en="Favorites">Favoriler</span></span>
+                    <span><i class="bi bi-star-fill"></i> <span class="lang-txt" data-tr="Favoriler"
+                            data-en="Favorites">Favoriler</span></span>
                     <span class="badge" id="badge-favorites">0</span>
                 </button>
-                <button class="nav-item" onclick="filterCategory('web', this)" id="nav-web">
-                    <span>HTML / CSS</span> <span class="badge" id="badge-web">0</span>
-                </button>
-                <button class="nav-item" onclick="filterCategory('ai', this)" id="nav-ai">
-                    <span class="lang-txt" data-tr="AI Promptları" data-en="AI Prompts">AI Promptları</span> <span class="badge" id="badge-ai">0</span>
-                </button>
-                <button class="nav-item" onclick="filterCategory('minecraft', this)" id="nav-minecraft">
-                    <span class="lang-txt" data-tr="Minecraft" data-en="Minecraft">Minecraft</span> <span class="badge" id="badge-minecraft">0</span>
-                </button>
-                <button class="nav-item" onclick="filterCategory('unix', this)" id="nav-unix">
-                    <span class="lang-txt" data-tr="Unix" data-en="Unix">Unix</span> <span class="badge" id="badge-unix">0</span>
-                </button>
-                <button class="nav-item" onclick="filterCategory('windows_terminal', this)" id="nav-windows_terminal">
-                    <span class="lang-txt" data-tr="Windows Terminal" data-en="Windows Terminal">Windows Terminal</span> <span class="badge" id="badge-windows_terminal">0</span>
-                </button>
-            </nav>
 
+                <div id="dynamic-categories" style="display: flex; flex-direction: column; gap: 8px;"></div>
+            </nav>
+            <button class="nav-item add-cat-btn"
+                onclick="document.getElementById('category-modal').style.display='flex'">
+                <i class="bi bi-plus"></i> <span class="lang-txt" data-tr="Kategori Ekle"
+                    data-en="Add Category">Kategori Ekle</span>
+            </button>
             <div class="sidebar-footer">
                 <button class="settings-toggle-btn" onclick="toggleSettingsModal()">
                     <span class="lang-txt" data-tr="Ayarlar" data-en="Settings">Ayarlar</span>
@@ -98,11 +91,6 @@ <h2 id="page-title" class="lang-txt" data-tr="Tüm Kodlar" data-en="All Snippets
                 <div class="form-group">
                     <input type="text" id="new-title" placeholder="Başlık">
                     <select id="new-category">
-                        <option value="web">HTML / CSS</option>
-                        <option value="ai">AI Prompts</option>
-                        <option value="minecraft">Minecraft</option>
-                        <option value="unix">Unix</option>
-                        <option value="windows_terminal">Windows Terminal</option>
                     </select>
                 </div>
                 <div class="form-group">
@@ -145,6 +133,8 @@ <h4 class="lang-txt" data-tr="Sistem & Çekirdek" data-en="System & Kernel">Sist
 
                 <div class="settings-section">
                     <h4 class="lang-txt" data-tr="Görünüm Tasarımı" data-en="Appearance Design">Görünüm Tasarımı</h4>
+
+                    <!-- Mevcut Arayüz Teması -->
                     <div class="setting-item">
                         <div>
                             <strong class="lang-txt" data-tr="Arayüz Teması" data-en="Interface Theme">Arayüz
@@ -161,6 +151,7 @@ <h4 class="lang-txt" data-tr="Görünüm Tasarımı" data-en="Appearance Design"
                         </select>
                     </div>
 
+                    <!-- Mevcut Liquid Glass Efekti Aç/Kapat -->
                     <div class="setting-item">
                         <div>
                             <strong class="lang-txt" data-tr="Liquid Glass Efekti" data-en="Liquid Glass Effect">Liquid
@@ -175,6 +166,93 @@ <h4 class="lang-txt" data-tr="Görünüm Tasarımı" data-en="Appearance Design"
                         </label>
                     </div>
 
+                    <!-- YENİ: Liquid Glass Bulanıklık Ayarı -->
+                    <div class="setting-item setting-glass-sub"
+                        style="padding-left: 15px; border-left: 2px solid rgba(255,255,255,0.1);">
+                        <div>
+                            <strong class="lang-txt" data-tr="Cam Bulanıklığı (Blur)" data-en="Glass Blur">Cam
+                                Bulanıklığı (Blur)</strong>
+                            <p class="lang-txt" data-tr="Arka planın bulanıklık seviyesini ayarlar."
+                                data-en="Adjusts the background blur level.">Arka planın bulanıklık seviyesini ayarlar.
+                            </p>
+                        </div>
+                        <div class="glass-slider">
+                            <span id="blur-value">16</span>
+                            <input type="range" id="setting-glass-blur" min="0" max="30" value="16"
+                                oninput="applySettings()">
+                        </div>
+                    </div>
+
+                    <!-- YENİ: Liquid Glass Opaklık Ayarı -->
+                    <div class="setting-item setting-glass-sub"
+                        style="padding-left: 15px; border-left: 2px solid rgba(255,255,255,0.1);">
+                        <div>
+                            <strong class="lang-txt" data-tr="Cam Saydamlığı (Opacity)" data-en="Glass Opacity">Cam
+                                Saydamlığı (Opacity)</strong>
+                            <p class="lang-txt" data-tr="Cam katmanın opaklık değerini belirler."
+                                data-en="Determines the opacity of the glass layer.">Cam katmanın opaklık değerini
+                                belirler.</p>
+                        </div>
+                        <div class="glass-slider">
+                            <span id="opacity-value">16</span>
+                            <input type="range" id="setting-glass-opacity" min="0" max="30" value="16"
+                                oninput="applySettings()">
+                        </div>
+                    </div>
+
+                    <!-- YENİ: Tema Vurgu Rengi Seçici -->
+                    <div class="setting-item">
+                        <div>
+                            <strong class="lang-txt" data-tr="Tema Vurgu Rengi" data-en="Theme Accent Color">Tema Vurgu
+                                Rengi</strong>
+                            <p class="lang-txt" data-tr="Butonlar ve aktif elemanların rengini değiştirir."
+                                data-en="Changes the color of buttons and active elements.">Butonlar ve aktif
+                                elemanların rengini değiştirir.</p>
+                        </div>
+                        <input type="color" id="setting-theme-color" value="#007acc" onchange="applySettings()">
+                    </div>
+                    <!-- Arka Plan Tipi Seçimi -->
+                    <div class="setting-item">
+                        <div>
+                            <strong class="lang-txt" data-tr="Arka Plan Tipi" data-en="Background Type">Arka Plan
+                                Tipi</strong>
+                            <p class="lang-txt" data-tr="Arka planın renk mi görsel mi olacağını belirler."
+                                data-en="Determines if the background is a color or an image.">Arka planın renk mi
+                                görsel mi olacağını belirler.</p>
+                        </div>
+                        <select id="setting-bg-type" onchange="applySettings()">
+                            <option value="color" class="lang-txt" data-tr="Düz Renk" data-en="Solid Color">Düz Renk
+                            </option>
+                            <option value="image" class="lang-txt" data-tr="Özel Görsel (URL / Yol)"
+                                data-en="Custom Image (URL / Path)">Özel Görsel (URL / Yol)</option>
+                        </select>
+                    </div>
+                    <!-- Arka Plan Rengi Seçici (Düz Renk Seçilirse) -->
+                    <div id="bg-color-container" class="setting-item">
+                        <div>
+                            <strong class="lang-txt" data-tr="Arka Plan Rengi" data-en="Background Color">Arka Plan
+                                Rengi</strong>
+                            <p class="lang-txt" data-tr="Uygulamanın ana arka plan rengini belirler."
+                                data-en="Sets the main background color of the app.">Uygulamanın ana arka plan rengini
+                                belirler.</p>
+                        </div>
+                        <input type="color" id="setting-bg-color" value="#1e1e1e" onchange="applySettings()">
+                    </div>
+
+                    <!-- Arka Plan Görseli Inputu (Görsel Seçilirse) -->
+                    <div id="bg-image-container" class="setting-item" style="display: none;">
+                        <div>
+                            <strong class="lang-txt" data-tr="Arka Plan Görseli" data-en="Background Image">Arka Plan
+                                Görseli</strong>
+                            <p class="lang-txt" data-tr="Görsel linki (URL) veya yerel dosya yolu girin."
+                                data-en="Enter image link (URL) or local file path.">Görsel linki (URL) veya yerel dosya
+                                yolu girin.</p>
+                        </div>
+                        <input type="text" id="setting-bg-image" placeholder="https://... veya assets/bg.jpg"
+                            oninput="applySettings()"
+                            style="width: 60%; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); color: #fff;">
+                    </div>
+                    <!-- Mevcut Yazı Tipi Boyutu -->
                     <div class="setting-item">
                         <div>
                             <strong class="lang-txt" data-tr="Yazı Tipi Boyutu (Kodlar)"
@@ -193,82 +271,114 @@ <h4 class="lang-txt" data-tr="Görünüm Tasarımı" data-en="Appearance Design"
                     </div>
                 </div>
 
-                <div class="settings-section">
-                    <h4 class="lang-txt" data-tr="Akıllı Özellikler" data-en="Smart Features">Akıllı Özellikler</h4>
-                    <div class="setting-item">
-                        <div>
-                            <strong class="lang-txt" data-tr="Uygulama Dili" data-en="Application Language">Uygulama
-                                Dili</strong>
-                            <p class="lang-txt" data-tr="Görüntüleme dilini değiştirir."
-                                data-en="Changes the display language.">Görüntüleme dilini değiştirir.</p>
-                        </div>
-                        <select id="setting-lang" onchange="applySettings()">
-                            <option value="tr">Türkçe (TR)</option>
-                            <option value="en">English (EN)</option>
-                            <option value="es">Español (ES)</option>
-                        </select>
+                <div class="setting-item">
+                    <div>
+                        <strong class="lang-txt" data-tr="Liquid Glass Efekti" data-en="Liquid Glass Effect">Liquid
+                            Glass Efekti</strong>
+                        <p class="lang-txt" data-tr="Buzlu cam ve saydamlık efektlerini yönetir."
+                            data-en="Controls frosted glass and transparency effects.">Buzlu cam ve saydamlık
+                            efektlerini yönetir.</p>
                     </div>
+                    <label class="switch">
+                        <input type="checkbox" id="setting-glass" onchange="applySettings()" checked>
+                        <span class="slider"></span>
+                    </label>
+                </div>
 
-                    <div class="setting-item">
-                        <div>
-                            <strong class="lang-txt" data-tr="Kopyalama Bildirimi" data-en="Copy Notification">Kopyalama
-                                Bildirimi</strong>
-                            <p class="lang-txt" data-tr="Kod kopyalandığında ekranda mini bildirim açar."
-                                data-en="Shows a mini notification when code is copied.">Kod kopyalandığında ekranda
-                                mini bildirim açar.</p>
-                        </div>
-                        <label class="switch">
-                            <input type="checkbox" id="setting-toast" onchange="applySettings()" checked>
-                            <span class="slider"></span>
-                        </label>
+                <div class="setting-item">
+                    <div>
+                        <strong class="lang-txt" data-tr="Yazı Tipi Boyutu (Kodlar)" data-en="Font Size (Codes)">Yazı
+                            Tipi Boyutu (Kodlar)</strong>
+                        <p class="lang-txt" data-tr="Kod bloklarının metin boyutunu ayarlar."
+                            data-en="Adjusts text size of code blocks.">Kod bloklarının metin boyutunu ayarlar.</p>
                     </div>
+                    <select id="setting-font-size" onchange="applySettings()">
+                        <option value="12px" class="lang-txt" data-tr="Küçük (12px)" data-en="Small (12px)">Küçük
+                            (12px)</option>
+                        <option value="14px" class="lang-txt" data-tr="Normal (14px)" data-en="Normal (14px)" selected>
+                            Normal (14px)</option>
+                        <option value="16px" class="lang-txt" data-tr="Büyük (16px)" data-en="Large (16px)">Büyük
+                            (16px)</option>
+                    </select>
+                </div>
+            </div>
 
-                    <div class="setting-item">
-                        <div>
-                            <strong class="lang-txt" data-tr="Kod Satırlarını Kaydır" data-en="Word Wrap">Kod
-                                Satırlarını Kaydır</strong>
-                            <p class="lang-txt" data-tr="Yatay kaydırma yerine kodları alt satıra indirir."
-                                data-en="Wraps long lines instead of horizontal scrolling.">Yatay kaydırma yerine
-                                kodları alt satıra indirir.</p>
-                        </div>
-                        <label class="switch">
-                            <input type="checkbox" id="setting-wrap" onchange="applySettings()">
-                            <span class="slider"></span>
-                        </label>
+            <div class="settings-section">
+                <h4 class="lang-txt" data-tr="Akıllı Özellikler" data-en="Smart Features">Akıllı Özellikler</h4>
+                <div class="setting-item">
+                    <div>
+                        <strong class="lang-txt" data-tr="Uygulama Dili" data-en="Application Language">Uygulama
+                            Dili</strong>
+                        <p class="lang-txt" data-tr="Görüntüleme dilini değiştirir."
+                            data-en="Changes the display language.">Görüntüleme dilini değiştirir.</p>
+                    </div>
+                    <select id="setting-lang" onchange="applySettings()">
+                        <option value="tr">Türkçe (TR)</option>
+                        <option value="en">English (EN)</option>
+                            <option value="es">Español (ES)</option>
+                    </select>
+                </div>
+
+                <div class="setting-item">
+                    <div>
+                        <strong class="lang-txt" data-tr="Kopyalama Bildirimi" data-en="Copy Notification">Kopyalama
+                            Bildirimi</strong>
+                        <p class="lang-txt" data-tr="Kod kopyalandığında ekranda mini bildirim açar."
+                            data-en="Shows a mini notification when code is copied.">Kod kopyalandığında ekranda
+                            mini bildirim açar.</p>
                     </div>
+                    <label class="switch">
+                        <input type="checkbox" id="setting-toast" onchange="applySettings()" checked>
+                        <span class="slider"></span>
+                    </label>
                 </div>
-                <div class="settings-group version-26Q2-5">
-                    <h3 class="lang-txt" data-tr="Veri Yönetimi (v26Q2.5)" data-en="Data Management (v26Q2.5)">Veri
-                        Yönetimi (v26Q2.5)</h3>
-                    <div class="backup-buttons">
-                        <button id="exportBtn" onclick="window.exportCodeSnipData()" class="glass-btn">
-                            <i class="fas fa-download"></i> Yedekle (Export)
-                        </button>
 
-                        <button id="importBtn" onclick="window.importCodeSnipData()" class="glass-btn">
-                            <i class="fas fa-upload"></i> Yedek Yükle (Import)
-                        </button>
+                <div class="setting-item">
+                    <div>
+                        <strong class="lang-txt" data-tr="Kod Satırlarını Kaydır" data-en="Word Wrap">Kod
+                            Satırlarını Kaydır</strong>
+                        <p class="lang-txt" data-tr="Yatay kaydırma yerine kodları alt satıra indirir."
+                            data-en="Wraps long lines instead of horizontal scrolling.">Yatay kaydırma yerine
+                            kodları alt satıra indirir.</p>
                     </div>
+                    <label class="switch">
+                        <input type="checkbox" id="setting-wrap" onchange="applySettings()">
+                        <span class="slider"></span>
+                    </label>
                 </div>
-                <br>
-                <br>
-                <div class="settings-section">
-                    <h4 class="lang-txt" data-tr="Tehlike Bölgesi" data-en="Danger Zone">Tehlike Bölgesi</h4>
-                    <div class="setting-item">
-                        <div>
-                            <strong class="lang-txt" data-tr="Tüm Verileri Sıfırla" data-en="Reset All Data">Tüm
-                                Verileri Sıfırla</strong>
-                            <p class="lang-txt" data-tr="Kayıtlı tüm verileri ve notları kalıcı olarak siler."
-                                data-en="Permanently deletes all saved data and notes.">Kayıtlı tüm verileri ve notları
-                                kalıcı olarak siler.</p>
-                        </div>
-                        <button class="danger-btn" onclick="clearAllData()"><span class="lang-txt"
-                                data-tr="Fabrika Ayarları" data-en="Factory Reset">Fabrika Ayarları</span></button>
+            </div>
+            <div class="settings-group version-26Q2-5">
+                <h3 class="lang-txt" data-tr="Veri Yönetimi" data-en="Data Management">Veri
+                    Yönetimi</h3>
+                <div class="backup-buttons">
+                    <button id="exportBtn" onclick="exportCodeSnipData()" class="glass-btn">
+                        <i class="fas fa-download"></i> Yedekle (Export)
+                    </button>
+
+                    <button id="importBtn" onclick="importCodeSnipData()" class="glass-btn">
+                        <i class="fas fa-upload"></i> Yedek Yükle (Import)
+                    </button>
+                </div>
+            </div>
+            <br>
+            <br>
+            <div class="settings-section">
+                <h4 class="lang-txt" data-tr="Tehlike Bölgesi" data-en="Danger Zone">Tehlike Bölgesi</h4>
+                <div class="setting-item">
+                    <div>
+                        <strong class="lang-txt" data-tr="Tüm Verileri Sıfırla" data-en="Reset All Data">Tüm
+                            Verileri Sıfırla</strong>
+                        <p class="lang-txt" data-tr="Kayıtlı tüm verileri ve notları kalıcı olarak siler."
+                            data-en="Permanently deletes all saved data and notes.">Kayıtlı tüm verileri ve notları
+                            kalıcı olarak siler.</p>
                     </div>
+                    <button class="danger-btn" onclick="clearAllData()"><span class="lang-txt"
+                            data-tr="Fabrika Ayarları" data-en="Factory Reset">Fabrika Ayarları</span></button>
                 </div>
             </div>
         </div>
     </div>
+    </div>
     <!-- Bu katman body'nin hemen içinde, diğer tüm elementlerden bağımsız olmalı -->
     <div id="spotlight-overlay" class="spotlight-hidden">
         <div class="spotlight-window">
@@ -284,7 +394,54 @@ <h4 class="lang-txt" data-tr="Tehlike Bölgesi" data-en="Danger Zone">Tehlike B
         </div>
     </div>
     <div id="toast-notification" class="toast">Kopyalandı!</div>
+    <div id="category-modal" class="modal-overlay hidden-initially">
+        <div class="modal-content glass-panel">
+            <h3 class="modal-title">Kategori Ekle</h3>
+            <input type="text" id="cat-name-tr" placeholder="İsim" class="modal-input">
+            <select id="cat-icon-select" class="modal-input">
+                <option value="bi-code-slash">Kod</option>
+                <option value="bi-robot">AI</option>
+                <option value="bi-box">Kutu</option>
+            </select>
+            <div class="modal-actions">
+                <button onclick="addCategoryProcess()" class="btn-primary">Kaydet</button>
+                <button onclick="document.getElementById('category-modal').style.display='none'"
+                    class="btn-secondary">İptal</button>
+            </div>
+
+        </div>
+    </div>
+    <!-- DİKKAT: onclick kısmını buraya ekledik -->
+    <!-- <div class="beta-watermark" onclick="toggleAboutModal()" style="cursor: pointer;">
+        CodeSnip 26Q4 <br>
+        <span class="beta-subtitle">Her Şey Zamanla Değişebilir.</span>
+    </div>
+
+    <div id="about-modal" class="modal-overlay liquid_glass">
+        <div class="modal-content glass-panel">
+            <h3 class="modal-title" style="text-align: center;">CodeSnip 26Q4-beta</h3>
+            <hr>
+            <p>
+                <span style="color: #ffc107; font-weight: bold; display: inline-flex; align-items: center; gap: 5px;">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path
+                            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
+                        </path>
+                        <line x1="12" y1="9" x2="12" y2="13"></line>
+                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                    </svg>
+                    UYARI:
+                </span>
+                Bu, beta bir sürümdür ve bazı özellikler henüz tamamlanmamış olabilir. Eğer bir hata bulursanız veya bir
+                öneriniz varsa, bize bildirmekten çekinmeyin!
+            </p>
 
+            <div class="modal-actions">
+                <button onclick="toggleAboutModal()" class="btn-primary">Kapat</button>
+            </div>
+        </div>
+    </div> -->
     <!-- Script Yüklemeleri ve Prism Eklentileri -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
diff --git a/main.js b/main.js
index 4219f2e..7e24add 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,6 @@
-const { app, BrowserWindow, globalShortcut, ipcMain } = require('electron');
+const { app, BrowserWindow, globalShortcut, ipcMain, dialog } = require('electron');
 const path = require('path');
+const fs = require('fs');
 
 let mainWindow;
 
@@ -9,12 +10,10 @@ function createWindow() {
     mainWindow = new BrowserWindow({
         width: 1200,
         height: 800,
-        minWidth: 900,
-        minHeight: 600,
-        icon: isMac ? undefined : path.join(__dirname, 'icon.ico'),
+        icon: path.join(__dirname, 'icon.ico'),
         frame: false,
-        titleBarStyle: isMac ? 'hiddenInset' : 'hidden',
-        trafficLightPosition: isMac ? { x: 12, y: 15 } : undefined,
+        titleBarStyle: isMac ? 'hidden' : 'default',
+        trafficLightPosition: isMac ? { x: 18, y: 18 } : undefined,
         webPreferences: {
             nodeIntegration: true,
             contextIsolation: false
@@ -23,12 +22,14 @@ function createWindow() {
 
     mainWindow.setMenu(null);
     mainWindow.loadFile('index.html');
+    // mainWindow.webContents.toggleDevTools(); 
 
     mainWindow.on('closed', () => {
         mainWindow = null;
     });
 }
 
+// Pencere Buton Kontrolleri
 ipcMain.on('window-minimize', () => {
     if (mainWindow) mainWindow.minimize();
 });
@@ -47,6 +48,57 @@ ipcMain.on('window-close', () => {
     if (mainWindow) mainWindow.close();
 });
 
+// 💾 JSON Dışa Aktarma (Export) Handleri
+ipcMain.handle('export-data', async (event, dataString) => {
+    const { canceled, filePath } = await dialog.showSaveDialog(mainWindow, {
+        title: 'CodeSnip Verilerini Yedekle',
+        defaultPath: path.join(app.getPath('downloads'), 'codesnip_backup_26Q3.1.json'),
+        filters: [
+            { name: 'JSON Dosyası', extensions: ['json'] }
+        ]
+    });
+
+    if (canceled || !filePath) {
+        return { success: false, message: 'Yedekleme iptal edildi.' };
+    }
+
+    try {
+        fs.writeFileSync(filePath, dataString, 'utf-8');
+        return { success: true, message: 'Veriler başarıyla yedeklendi!' };
+    } catch (error) {
+        return { success: false, message: `Hata oluştu: ${error.message}` };
+    }
+});
+
+// 📂 EKSİK OLAN KISIM EKLENDİ: JSON İçe Aktarma (Import) Handleri
+ipcMain.handle('import-data', async () => {
+    try {
+        const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
+            title: 'CodeSnip Yedeği Seçin',
+            properties: ['openFile'],
+            filters: [
+                { name: 'JSON Dosyaları', extensions: ['json'] },
+                { name: 'Tüm Dosyalar', extensions: ['*'] }
+            ]
+        });
+
+        if (canceled || filePaths.length === 0) {
+            return { success: false, message: 'İçe aktarma iptal edildi.' };
+        }
+
+        const filePath = filePaths[0];
+        const rawData = fs.readFileSync(filePath, 'utf-8');
+
+        // Yüklenen dosyanın geçerli bir JSON olup olmadığını doğrula
+        JSON.parse(rawData);
+
+        return { success: true, data: rawData };
+    } catch (error) {
+        return { success: false, message: 'Seçilen dosya geçerli bir JSON yedeği değil veya okunamadı!' };
+    }
+});
+
+// Uygulama Başlatma Alanı
 app.whenReady().then(() => {
     createWindow();
 
@@ -55,6 +107,7 @@ app.whenReady().then(() => {
             if (mainWindow.isMinimized()) mainWindow.restore();
             mainWindow.show();
             mainWindow.focus();
+
             mainWindow.webContents.send('global-spotlight-trigger');
         }
     });
diff --git a/renderer.js b/renderer.js
index 6ce74f0..2a97037 100644
--- a/renderer.js
+++ b/renderer.js
@@ -4,21 +4,63 @@ let currentCategory = 'all';
 let currentLang = 'tr';
 
 const spanishTranslations = {
-  'Tüm Kodlar':'Todos los snippets','All Snippets':'Todos los snippets','Favoriler':'Favoritos','Favorites':'Favoritos',
-  'Ayarlar':'Configuración','Settings':'Configuración','Yeni Kod Ekle':'Añadir código','Add New Code':'Añadir código',
-  'Yeni Kod Kartı Oluştur':'Crear nuevo snippet','Create New Snippet Card':'Crear nuevo snippet','Kod Kartını Düzenle':'Editar snippet','Edit Snippet Card':'Editar snippet',
-  'Kaydet':'Guardar','Save':'Guardar','Güncelle':'Actualizar','Update':'Actualizar','İptal':'Cancelar','Cancel':'Cancelar',
-  'Başlık':'Título','Title':'Título','Kod veya prompt ara...':'Buscar código o prompt...','Search code or prompt...':'Buscar código o prompt...',
-  'Kod bloğunu buraya yapıştır...':'Pega aquí el código...','Paste code block here...':'Pega aquí el código...','Kopyala':'Copiar','Copy':'Copiar',
-  'Sil':'Eliminar','Delete':'Eliminar','Düzenle':'Editar','Edit':'Editar','Paylaş':'Compartir','Share':'Compartir',
-  'satır':'líneas','lines':'líneas','karakter':'caracteres','characters':'caracteres',
-  'Yenile':'Recargar','Reload':'Recargar','Koyu Tema':'Tema oscuro','Dark Theme':'Tema oscuro','Açık Tema':'Tema claro','Light Theme':'Tema claro',
-  'Liquid Glass Efekti':'Efecto Liquid Glass','Liquid Glass Effect':'Efecto Liquid Glass','Uygulama Dili':'Idioma de la aplicación','Application Language':'Idioma de la aplicación',
-  'Kopyalama Bildirimi':'Notificación de copia','Copy Notification':'Notificación de copia','Kod Satırlarını Kaydır':'Ajuste de línea','Word Wrap':'Ajuste de línea',
-  'Tehlike Bölgesi':'Zona de peligro','Danger Zone':'Zona de peligro','Tüm Verileri Sıfırla':'Restablecer todos los datos','Reset All Data':'Restablecer todos los datos',
-  'Fabrika Ayarları':'Restablecer','Factory Reset':'Restablecer'
+        "All Snippets": "Todos los fragmentos",
+        "Favorites": "Favoritos",
+        "Add Category": "Añadir categoría",
+        "Settings": "Ajustes",
+        "Reload Application": "Recargar aplicación",
+        "Instantly reloads the application.": "Recarga la aplicación al instante.",
+        "Appearance Design": "Diseño de apariencia",
+        "Interface Theme": "Tema de interfaz",
+        "Changes the color palette of the app.": "Cambia la paleta de colores de la aplicación.",
+        "Dark Theme": "Tema oscuro",
+        "Light Theme": "Tema claro",
+        "Liquid Glass Effect": "Efecto Liquid Glass",
+        "Controls frosted glass and transparency effects.": "Controla los efectos de cristal esmerilado y transparencia.",
+        "Glass Blur": "Desenfoque del cristal",
+        "Adjusts the background blur level.": "Ajusta el nivel de desenfoque del fondo.",
+        "Glass Opacity": "Opacidad del cristal",
+        "Determines the opacity of the glass layer.": "Determina la opacidad de la capa de cristal.",
+        "Theme Accent Color": "Color de acento",
+        "Changes the color of buttons and active elements.": "Cambia el color de los botones y elementos activos.",
+        "Background Type": "Tipo de fondo",
+        "Determines if the background is a color or an image.": "Determina si el fondo es un color o una imagen.",
+        "Solid Color": "Color sólido",
+        "Custom Image (URL / Path)": "Imagen personalizada (URL / ruta)",
+        "Background Color": "Color de fondo",
+        "Sets the main background color of the app.": "Establece el color de fondo principal de la aplicación.",
+        "Background Image": "Imagen de fondo",
+        "Enter image link (URL) or local file path.": "Introduce un enlace de imagen (URL) o una ruta local.",
+        "Font Size (Codes)": "Tamaño de fuente (código)",
+        "Adjusts text size of code blocks.": "Ajusta el tamaño del texto de los bloques de código.",
+        "Small (12px)": "Pequeño (12px)",
+        "Normal (14px)": "Normal (14px)",
+        "Large (16px)": "Grande (16px)",
+        "Smart Features": "Funciones inteligentes",
+        "Application Language": "Idioma de la aplicación",
+        "Changes the display language.": "Cambia el idioma de visualización.",
+        "Save": "Guardar",
+        "Cancel": "Cancelar",
+        "Update": "Actualizar",
+        "Create New Snippet Card": "Crear nueva tarjeta de fragmento",
+        "Add New Code": "Añadir código",
+        "Search code or prompt...": "Buscar código o prompt...",
+        "Copied!": "¡Copiado!",
+        "Copy": "Copiar",
+        "Delete": "Eliminar",
+        "Edit": "Editar",
+        "Share": "Compartir",
+        "Quick Add:": "Añadir rápido:",
+        "No matching code found.": "No se encontraron coincidencias.",
+        "Successfully added to": "Añadido correctamente a",
+        "Invalid import code!": "¡Código de importación no válido!",
+        "Data successfully restored! App will reload.": "¡Datos restaurados correctamente! La aplicación se recargará.",
 };
-function t(tr,en){return currentLang==='tr'?tr:currentLang==='es'?(spanishTranslations[tr]||spanishTranslations[en]||en):en;}
+
+function t(tr, en) {
+    if (currentLang === 'es') return spanishTranslations[en] || tr;
+    return currentLang === 'tr' ? tr : en;
+}
 
 const defaultInitialSnips = [
     { id: 'snip-1', title: 'HTML Koyu Mod Temeli', category: 'web', code: '<!DOCTYPE html>\n<html>\n<body style="background:#1e1e1e; color:#fff;">\n   <h1>Hello, World!</h1>\n</body>\n</html>', isFavorite: false },
@@ -38,29 +80,63 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!localStorage.getItem('all_snippets_data')) {
         localStorage.setItem('all_snippets_data', JSON.stringify(defaultInitialSnips));
     }
+
+    if (!localStorage.getItem('codesnip_categories')) {
+        const defaultCategories = [
+            { id: 'web', name: { tr: 'HTML / CSS', en: 'HTML / CSS' }, icon: 'bi-globe' },
+            { id: 'ai', name: { tr: 'AI Promptları', en: 'AI Prompts' }, icon: 'bi-robot' },
+            { id: 'minecraft', name: { tr: 'Minecraft', en: 'Minecraft' }, icon: 'bi-box' },
+            { id: 'unix', name: { tr: 'Unix', en: 'Unix' }, icon: 'bi-terminal' },
+            { id: 'windows_terminal', name: { tr: 'Windows Terminal', en: 'Windows Terminal' }, icon: 'bi-pc-display' }
+        ];
+        localStorage.setItem('codesnip_categories', JSON.stringify(defaultCategories));
+    }
+
     loadSettings();
+    renderCategories();
     renderSnips();
     loadNotes();
 
-    // Sürüm 26Q2.5 Buton Event Listener Bağlantıları
-    const exportBtn = document.getElementById('exportBtn');
-    const importBtn = document.getElementById('importBtn');
-    if (exportBtn) exportBtn.addEventListener('click', exportCodeSnipData);
-    if (importBtn) importBtn.addEventListener('click', importCodeSnipData);
-
     // Pencere Kontrolleri
     const minBtn = document.getElementById('min-btn');
     const maxBtn = document.getElementById('max-btn');
     const closeBtn = document.getElementById('close-btn');
 
-    if (minBtn) { minBtn.addEventListener('click', () => { ipcRenderer.send('window-minimize'); }); }
-    if (maxBtn) { maxBtn.addEventListener('click', () => { ipcRenderer.send('window-maximize'); }); }
-    if (closeBtn) { closeBtn.addEventListener('click', () => { ipcRenderer.send('window-close'); }); }
+    if (minBtn) minBtn.addEventListener('click', () => ipcRenderer.send('window-minimize'));
+    if (maxBtn) maxBtn.addEventListener('click', () => ipcRenderer.send('window-maximize'));
+    if (closeBtn) closeBtn.addEventListener('click', () => ipcRenderer.send('window-close'));
 
-    // İlk açılışta menüdeki "Tüm Kodlar" butonuna active sınıfı ver
     const allCodesBtn = document.querySelector('.sidebar-menu li:first-child');
-    if (allCodesBtn) {
-        allCodesBtn.classList.add('active');
+    if (allCodesBtn) allCodesBtn.classList.add('active');
+
+    // ⚡ IPC Dinleyici Bellek Temizliği (Global Spotlight)
+    ipcRenderer.removeAllListeners('global-spotlight-trigger');
+    ipcRenderer.on('global-spotlight-trigger', () => {
+        const spotlightOverlay = document.getElementById('spotlight-overlay');
+        const spotlightInput = document.getElementById('spotlight-input');
+        if (spotlightOverlay && spotlightInput) {
+            spotlightOverlay.classList.remove('spotlight-hidden');
+            spotlightInput.value = '';
+            spotlightInput.focus();
+        }
+    });
+
+    // ⚡ Slider Dinleyicileri (Tek seferlik ve bellek dostu yükleme)
+    document.querySelectorAll('input[type="range"]').forEach(slider => {
+        const update = () => {
+            const percent = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
+            slider.style.setProperty('--slider-progress', percent + '%');
+        };
+        update();
+        slider.addEventListener('input', update);
+    });
+
+    const blurSlider = document.getElementById("setting-glass-blur");
+    const blurValue = document.getElementById("blur-value");
+    if (blurSlider && blurValue) {
+        blurSlider.addEventListener("input", () => {
+            blurValue.textContent = blurSlider.value;
+        });
     }
 });
 
@@ -79,40 +155,37 @@ function renderSnips() {
     const wrapEnabled = settingWrap ? settingWrap.checked : false;
     const glassClass = glassEnabled ? 'liquid_glass' : 'no-glass';
 
+    const fragment = document.createDocumentFragment();
+
     allSnips.forEach(snip => {
-        if (currentCategory === 'favorites' && !snip.isFavorite) {
-            return;
-        } else if (currentCategory !== 'all' && currentCategory !== 'favorites' && snip.category !== currentCategory) {
-            return;
-        }
+        if (currentCategory === 'favorites' && !snip.isFavorite) return;
+        if (currentCategory !== 'all' && currentCategory !== 'favorites' && snip.category !== currentCategory) return;
 
         const card = document.createElement('div');
         card.className = `snip-card ${glassClass} fade-in`;
         card.setAttribute('data-category', snip.category);
 
         const safeCode = snip.code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-        const copyBtnText = t('Kopyala','Copy');
-        const deleteBtnText = t('Sil','Delete');
-        const editBtnText = t('Düzenle','Edit');
-        const shareBtnText = t('Paylaş','Share');
+        const copyBtnText = t('Kopyala', 'Copy');
+        const deleteBtnText = t('Sil', 'Delete');
+        const editBtnText = t('Düzenle', 'Edit');
+        const shareBtnText = t('Paylaş', 'Share');
 
         const favIcon = snip.isFavorite ? '★' : '☆';
         const favClass = snip.isFavorite ? 'fav-active' : '';
 
         const lineCount = snip.code.split('\n').length;
         const charCount = snip.code.length;
-        const linesTxt = t('satır','lines');
-        const charsTxt = t('karakter','characters');
+        const linesTxt = currentLang === 'tr' ? 'satır' : currentLang === 'es' ? 'líneas' : 'lines';
+        const charsTxt = currentLang === 'tr' ? 'karakter' : currentLang === 'es' ? 'caracteres' : 'characters';
 
         let langClass = 'language-none';
         if (snip.category === 'web') {
             langClass = snip.code.trim().startsWith('<') ? 'language-html' : 'language-css';
-        } else if (snip.category === 'unix') {
+        } else if (snip.category === 'unix' || snip.category === 'windows_terminal') {
             langClass = 'language-bash';
         } else if (snip.category === 'ai') {
             langClass = 'language-javascript';
-        } else if (snip.category === 'windows_terminal') {
-            langClass = 'language-bash';
         }
 
         card.innerHTML = `
@@ -131,9 +204,10 @@ function renderSnips() {
                 <span>${lineCount} ${linesTxt}</span> • <span>${charCount} ${charsTxt}</span>
             </div>
         `;
-        container.appendChild(card);
+        fragment.appendChild(card);
     });
 
+    container.appendChild(fragment);
     updateBadges(allSnips);
 
     if (typeof Prism !== 'undefined') {
@@ -141,24 +215,63 @@ function renderSnips() {
     }
 }
 
+function renderCategories() {
+    const categories = JSON.parse(localStorage.getItem('codesnip_categories')) || [];
+    const container = document.getElementById('dynamic-categories');
+    const selectCategory = document.getElementById('new-category');
+
+    if (!container || !selectCategory) return;
+
+    container.innerHTML = '';
+    selectCategory.innerHTML = '';
+
+    const fragment = document.createDocumentFragment();
+
+    categories.forEach(cat => {
+        const catName = cat.name[currentLang] || cat.name.tr;
+
+        const btn = document.createElement('button');
+        btn.className = `nav-item ${currentCategory === cat.id ? 'active' : ''}`;
+        btn.id = `nav-${cat.id}`;
+        btn.onclick = function () { filterCategory(cat.id, this); };
+
+        btn.innerHTML = `
+            <span><i class="bi ${cat.icon}"></i> <span>${catName}</span></span>
+            <span class="badge" id="badge-${cat.id}">0</span>
+        `;
+
+        const deleteBtn = document.createElement('i');
+        deleteBtn.className = 'bi bi-trash';
+        deleteBtn.style.marginLeft = 'auto';
+        deleteBtn.style.cursor = 'pointer';
+        deleteBtn.style.paddingLeft = '10px';
+        deleteBtn.onclick = function (e) { deleteCategory(e, cat.id); };
+
+        btn.appendChild(deleteBtn);
+        fragment.appendChild(btn);
+
+        const option = document.createElement('option');
+        option.value = cat.id;
+        option.innerText = catName;
+        selectCategory.appendChild(option);
+    });
+
+    container.appendChild(fragment);
+    const allSnips = JSON.parse(localStorage.getItem('all_snippets_data')) || [];
+    updateBadges(allSnips);
+}
+
 function kartiKopruyeDonustur(id) {
     const allSnips = JSON.parse(localStorage.getItem('all_snippets_data')) || [];
     const snip = allSnips.find(s => s.id === id);
 
     if (!snip) return;
 
-    const kartVerisi = {
-        title: snip.title,
-        code: snip.code,
-        category: snip.category
-    };
+    const kartVerisi = { title: snip.title, code: snip.code, category: snip.category };
 
     try {
         const jsonMetni = JSON.stringify(kartVerisi);
-        const sifreliKopru = btoa(encodeURIComponent(jsonMetni).replace(/%([0-9A-F]{2})/g, function (match, p1) {
-            return String.fromCharCode('0x' + p1);
-        }));
-
+        const sifreliKopru = btoa(encodeURIComponent(jsonMetni).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode('0x' + p1)));
         const tamPaylasimMetni = `import:${sifreliKopru}`;
 
         navigator.clipboard.writeText(tamPaylasimMetni).then(() => {
@@ -172,9 +285,7 @@ function kartiKopruyeDonustur(id) {
 function hariciKartEkle(title, code, category) {
     let allSnips = JSON.parse(localStorage.getItem('all_snippets_data')) || [];
     const newId = 'snip-' + Date.now();
-
     allSnips.push({ id: newId, title, category, code, isFavorite: false });
-
     localStorage.setItem('all_snippets_data', JSON.stringify(allSnips));
     renderSnips();
 }
@@ -187,7 +298,7 @@ window.toggleFavorite = function (id) {
         localStorage.setItem('all_snippets_data', JSON.stringify(allSnips));
         renderSnips();
     }
-}
+};
 
 window.deleteSnip = function (id) {
     const confirmMsg = currentLang === 'tr' ? 'Bu kod kartını silmek istediğinize emin misiniz?' : 'Are you sure you want to delete this snippet?';
@@ -197,7 +308,7 @@ window.deleteSnip = function (id) {
         localStorage.setItem('all_snippets_data', JSON.stringify(allSnips));
         renderSnips();
     }
-}
+};
 
 window.editCard = function (cardId) {
     const allSnips = JSON.parse(localStorage.getItem('all_snippets_data')) || [];
@@ -215,7 +326,7 @@ window.editCard = function (cardId) {
         document.getElementById('add-form-panel').style.display = 'block';
         document.getElementById('new-title').focus();
     }
-}
+};
 
 window.saveSnipAction = function () {
     const editId = document.getElementById('edit-snip-id').value;
@@ -228,12 +339,7 @@ window.saveSnipAction = function () {
     let allSnips = JSON.parse(localStorage.getItem('all_snippets_data')) || [];
 
     if (editId) {
-        allSnips = allSnips.map(snip => {
-            if (snip.id === editId) {
-                return { ...snip, title, category, code };
-            }
-            return snip;
-        });
+        allSnips = allSnips.map(snip => snip.id === editId ? { ...snip, title, category, code } : snip);
     } else {
         const newId = 'snip-' + Date.now();
         allSnips.push({ id: newId, title, category, code, isFavorite: false });
@@ -242,7 +348,7 @@ window.saveSnipAction = function () {
     localStorage.setItem('all_snippets_data', JSON.stringify(allSnips));
     closeFormPanel();
     renderSnips();
-}
+};
 
 window.toggleAddForm = function () {
     document.getElementById('edit-snip-id').value = '';
@@ -253,20 +359,20 @@ window.toggleAddForm = function () {
 
     const panel = document.getElementById('add-form-panel');
     panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
-}
+};
 
 window.closeFormPanel = function () {
     document.getElementById('add-form-panel').style.display = 'none';
-}
+};
 
 window.toggleSettingsModal = function () {
     const modal = document.getElementById('settings-modal');
     modal.style.display = modal.style.display === 'none' ? 'flex' : 'none';
-}
+};
 
 window.reloadApp = function () {
     window.location.reload();
-}
+};
 
 function applySettings() {
     const settingTheme = document.getElementById('setting-theme');
@@ -276,6 +382,13 @@ function applySettings() {
     const settingToast = document.getElementById('setting-toast');
     const settingWrap = document.getElementById('setting-wrap');
 
+    const settingGlassBlur = document.getElementById('setting-glass-blur');
+    const settingGlassOpacity = document.getElementById('setting-glass-opacity');
+    const settingThemeColor = document.getElementById('setting-theme-color');
+    const settingBgType = document.getElementById('setting-bg-type');
+    const settingBgColor = document.getElementById('setting-bg-color');
+    const settingBgImage = document.getElementById('setting-bg-image');
+
     const theme = settingTheme ? settingTheme.value : 'dark';
     const glass = settingGlass ? settingGlass.checked : true;
     const fontSize = settingFontSize ? settingFontSize.value : '14px';
@@ -283,73 +396,131 @@ function applySettings() {
     const toastEnabled = settingToast ? settingToast.checked : true;
     const wrapEnabled = settingWrap ? settingWrap.checked : false;
 
+    const glassBlur = settingGlassBlur ? settingGlassBlur.value : '16';
+    const glassOpacity = settingGlassOpacity ? settingGlassOpacity.value : '5';
+    const themeColor = settingThemeColor ? settingThemeColor.value : '#007acc';
+    const bgType = settingBgType ? settingBgType.value : 'color';
+    const bgColor = settingBgColor ? settingBgColor.value : '#1e1e1e';
+    const bgImage = (settingBgImage && settingBgImage.value.trim() !== '') ? settingBgImage.value : 'abstract_beta.png';
+
     document.body.className = theme === 'dark' ? 'dark-theme' : 'light-theme';
+    const root = document.documentElement;
+    root.style.setProperty('--theme-color', themeColor);
+    root.style.setProperty('--glow-color', `${themeColor}33`);
+
+    const bgColorContainer = document.getElementById('bg-color-container');
+    const bgImageContainer = document.getElementById('bg-image-container');
+
+    if (bgType === 'image') {
+        if (bgColorContainer) bgColorContainer.style.display = 'none';
+        if (bgImageContainer) bgImageContainer.style.display = 'flex';
+
+        if (bgImage.trim() !== '') {
+            document.body.style.backgroundImage = `url('${bgImage}')`;
+            document.body.style.backgroundSize = 'cover';
+            document.body.style.backgroundPosition = 'center';
+            document.body.style.backgroundAttachment = 'fixed';
+        } else {
+            document.body.style.backgroundImage = 'none';
+            document.body.style.backgroundColor = '#1e1e1e';
+        }
+    } else {
+        if (bgColorContainer) bgColorContainer.style.display = 'flex';
+        if (bgImageContainer) bgImageContainer.style.display = 'none';
+
+        document.body.style.backgroundImage = 'none';
+        document.body.style.backgroundColor = bgColor;
+    }
 
     const sidebar = document.querySelector('.sidebar');
     const addPanel = document.getElementById('add-form-panel');
     const modalContent = document.querySelector('.modal-content');
 
-    if (sidebar) {
-        if (glass) sidebar.classList.add('liquid_glass');
-        else sidebar.classList.remove('liquid_glass');
-    }
-    if (addPanel) {
-        if (glass) addPanel.classList.add('liquid_glass');
-        else addPanel.classList.remove('liquid_glass');
-    }
-    if (modalContent) {
-        if (glass) modalContent.classList.add('liquid_glass');
-        else modalContent.classList.remove('liquid_glass');
+    if (sidebar) sidebar.classList.toggle('liquid_glass', glass);
+    if (addPanel) addPanel.classList.toggle('liquid_glass', glass);
+    if (modalContent) modalContent.classList.toggle('liquid_glass', glass);
+
+    if (glass) {
+        document.body.classList.add('liquid-glass');
+        root.style.setProperty('--glass-blur', `${glassBlur}px`);
+        root.style.setProperty('--glass-opacity', (glassOpacity / 100));
+    } else {
+        document.body.classList.remove('liquid-glass');
+        root.style.setProperty('--glass-blur', '0px');
+        root.style.setProperty('--glass-opacity', '0');
     }
 
-    currentLang = lang;
-    document.documentElement.lang = lang;
+    currentLang = lang;
     document.querySelectorAll('.lang-txt').forEach(el => {
-        const trText=el.getAttribute('data-tr')||el.innerText; const enText=el.getAttribute('data-en')||trText; el.innerText=lang==='tr'?trText:lang==='es'?(spanishTranslations[trText]||spanishTranslations[enText]||enText):enText;
+        el.innerText = lang === 'es' ? (spanishTranslations[el.getAttribute('data-en')] || el.innerText) : (el.getAttribute(`data-${lang}`) || el.innerText);
     });
 
     const searchInput = document.getElementById('search-input');
-    if (searchInput) searchInput.placeholder = t('Kod veya prompt ara...','Search code or prompt...');
+    if (searchInput) searchInput.placeholder = lang === 'tr' ? 'Kod veya prompt ara...' : lang === 'es' ? 'Buscar código o prompt...' : 'Search code or prompt...';
 
-    const newTitle = document.getElementById('new-title');
-    if (newTitle) newTitle.placeholder = t('Başlık','Title');
+    localStorage.setItem('app_settings', JSON.stringify({
+        theme, glass, fontSize, lang, toastEnabled, wrapEnabled,
+        glassBlur, glassOpacity, themeColor, bgType, bgColor, bgImage
+    }));
 
-    const newCode = document.getElementById('new-code');
-    if (newCode) newCode.placeholder = t('Kod bloğunu buraya yapıştır...','Paste code block here...');
-
-    const scratchPad = document.getElementById('scratchpad');
-    if (scratchPad) scratchPad.placeholder = lang === 'tr' ? 'Notları buraya karala...' : 'Scratch your notes here...';
-
-    localStorage.setItem('app_settings', JSON.stringify({ theme, glass, fontSize, lang, toastEnabled, wrapEnabled }));
     renderSnips();
+
+    const bValEl = document.getElementById("blur-value");
+    const oValEl = document.getElementById("opacity-value");
+    if (bValEl) bValEl.textContent = glassBlur;
+    if (oValEl) oValEl.textContent = glassOpacity;
 }
 
 function loadSettings() {
-    const saved = JSON.parse(localStorage.getItem('app_settings'));
-    if (saved) {
-        if (saved.theme && document.getElementById('setting-theme')) document.getElementById('setting-theme').value = saved.theme;
-        if (saved.glass !== undefined && document.getElementById('setting-glass')) document.getElementById('setting-glass').checked = saved.glass;
-        if (saved.fontSize && document.getElementById('setting-font-size')) document.getElementById('setting-font-size').value = saved.fontSize;
-        if (saved.lang && document.getElementById('setting-lang')) document.getElementById('setting-lang').value = saved.lang;
-        if (saved.toastEnabled !== undefined && document.getElementById('setting-toast')) document.getElementById('setting-toast').checked = saved.toastEnabled;
-        if (saved.wrapEnabled !== undefined && document.getElementById('setting-wrap')) document.getElementById('setting-wrap').checked = saved.wrapEnabled;
+    const defaultBackgroundImage = 'abstract_beta.png';
+    let saved = JSON.parse(localStorage.getItem('app_settings'));
+
+    if (!saved) {
+        saved = {
+            theme: 'dark', glass: true, fontSize: '14px', lang: 'tr',
+            toastEnabled: true, wrapEnabled: false, glassBlur: '16',
+            glassOpacity: '5', themeColor: '#007acc', bgType: 'image',
+            bgColor: '#1e1e1e', bgImage: defaultBackgroundImage
+        };
+        localStorage.setItem('app_settings', JSON.stringify(saved));
     }
+
+    if (saved.theme && document.getElementById('setting-theme')) document.getElementById('setting-theme').value = saved.theme;
+    if (saved.glass !== undefined && document.getElementById('setting-glass')) document.getElementById('setting-glass').checked = saved.glass;
+    if (saved.fontSize && document.getElementById('setting-font-size')) document.getElementById('setting-font-size').value = saved.fontSize;
+    if (saved.lang && document.getElementById('setting-lang')) document.getElementById('setting-lang').value = saved.lang;
+    if (saved.toastEnabled !== undefined && document.getElementById('setting-toast')) document.getElementById('setting-toast').checked = saved.toastEnabled;
+    if (saved.wrapEnabled !== undefined && document.getElementById('setting-wrap')) document.getElementById('setting-wrap').checked = saved.wrapEnabled;
+
+    if (saved.glassBlur && document.getElementById('setting-glass-blur')) document.getElementById('setting-glass-blur').value = saved.glassBlur;
+    if (saved.glassOpacity && document.getElementById('setting-glass-opacity')) document.getElementById('setting-glass-opacity').value = saved.glassOpacity;
+    if (saved.themeColor && document.getElementById('setting-theme-color')) document.getElementById('setting-theme-color').value = saved.themeColor;
+
+    if (saved.bgType && document.getElementById('setting-bg-type')) document.getElementById('setting-bg-type').value = saved.bgType;
+    if (saved.bgColor && document.getElementById('setting-bg-color')) document.getElementById('setting-bg-color').value = saved.bgColor;
+    if (document.getElementById('setting-bg-image')) {
+        document.getElementById('setting-bg-image').value = saved.bgImage || defaultBackgroundImage;
+    }
+
     applySettings();
+    renderCategories();
 }
 
 window.copyCode = function (id, event) {
-    const codeText = document.getElementById(id).innerText;
-    navigator.clipboard.writeText(codeText);
+    const codeElem = document.getElementById(id);
+    if (!codeElem) return;
+
+    navigator.clipboard.writeText(codeElem.innerText);
 
     const btn = event.target;
-    btn.innerText = t('Kopyalandı!','Copied!');
+    btn.innerText = t('Kopyalandı!', 'Copied!');
 
     const settingToast = document.getElementById('setting-toast');
     const toastEnabled = settingToast ? settingToast.checked : true;
     if (toastEnabled) {
         const toast = document.getElementById('toast-notification');
         if (toast) {
-            toast.innerText = t('Kod panoya kopyalandı!','Code copied to clipboard!');
+            toast.innerText = t('Kod panoya kopyalandı!', 'Code copied to clipboard!');
             toast.classList.add('show');
             setTimeout(() => toast.classList.remove('show'), 2000);
         }
@@ -358,27 +529,33 @@ window.copyCode = function (id, event) {
     setTimeout(() => {
         btn.innerText = currentLang === 'tr' ? "Kopyala" : "Copy";
     }, 1500);
-}
+};
 
 window.filterCategory = function (category, element) {
     currentCategory = category;
-    document.getElementById('search-input').value = '';
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) searchInput.value = '';
+
     document.querySelectorAll('.nav-item').forEach(btn => btn.classList.remove('active'));
-    element.classList.add('active');
+    if (element) element.classList.add('active');
 
     const titleMap = {
-        all: { tr: 'Tüm Kodlar', en: 'All Snippets', es: 'Todos los snippets' },
-        favorites: { tr: 'Favori Kodlarım', en: 'Favorite Snippets', es: 'Snippets favoritos' },
-        web: { tr: 'HTML / CSS Şablonları', en: 'HTML / CSS Templates', es: 'Plantillas HTML / CSS' },
-        ai: { tr: 'Yapay Zeka Promptları', en: 'AI Prompts', es: 'Prompts de IA' },
-        minecraft: { tr: 'Minecraft Teknik Notlar', en: 'Minecraft Technical Notes', es: 'Notas técnicas de Minecraft' },
-        unix: { tr: 'Unix / Linux Komutları', en: 'Unix / Linux Commands', es: 'Comandos Unix / Linux' },
-        windows_terminal: { tr: 'Windows Terminal Kodları', en: 'Windows Terminal Snippets', es: 'Snippets de Windows Terminal' }
+        all: { tr: 'Tüm Kodlar', en: 'All Snippets' },
+        favorites: { tr: 'Favori Kodlarım', en: 'Favorite Snippets' }
     };
 
-    document.getElementById('page-title').innerText = titleMap[category][currentLang] || titleMap[category].en;
+    const pageTitle = document.getElementById('page-title');
+    if (pageTitle) {
+        if (category === 'all' || category === 'favorites') {
+            pageTitle.innerText = titleMap[category][currentLang];
+        } else {
+            const categories = JSON.parse(localStorage.getItem('codesnip_categories')) || [];
+            const cat = categories.find(c => c.id === category);
+            if (cat) pageTitle.innerText = cat.name[currentLang] || cat.name.tr;
+        }
+    }
     renderSnips();
-}
+};
 
 window.searchSnips = function () {
     const query = document.getElementById('search-input').value.toLowerCase();
@@ -390,25 +567,22 @@ window.searchSnips = function () {
             (currentCategory === 'favorites' && card.querySelector('.fav-btn').classList.contains('fav-active')) ||
             (card.getAttribute('data-category') === currentCategory);
 
-        if (matchesCategory && (title.includes(query) || code.includes(query))) {
-            card.style.display = 'block';
-        } else {
-            card.style.display = 'none';
-        }
+        card.style.display = (matchesCategory && (title.includes(query) || code.includes(query))) ? 'block' : 'none';
     });
-}
+};
 
 function updateBadges(allSnips) {
-    const categories = ['all', 'favorites', 'web', 'ai', 'minecraft', 'unix', 'windows_terminal'];
-    categories.forEach(cat => {
-        let count = 0;
-        if (cat === 'all') count = allSnips.length;
-        else if (cat === 'favorites') count = allSnips.filter(s => s.isFavorite).length;
-        else count = allSnips.filter(s => s.category === cat).length;
+    const badgeAll = document.getElementById(`badge-all`);
+    const badgeFav = document.getElementById(`badge-favorites`);
 
-        if (document.getElementById(`badge-${cat}`)) {
-            document.getElementById(`badge-${cat}`).innerText = count;
-        }
+    if (badgeAll) badgeAll.innerText = allSnips.length;
+    if (badgeFav) badgeFav.innerText = allSnips.filter(s => s.isFavorite).length;
+
+    const categories = JSON.parse(localStorage.getItem('codesnip_categories')) || [];
+    categories.forEach(cat => {
+        const count = allSnips.filter(s => s.category === cat.id).length;
+        const bEl = document.getElementById(`badge-${cat.id}`);
+        if (bEl) bEl.innerText = count;
     });
 }
 
@@ -427,12 +601,11 @@ window.saveNotes = function () {
             setTimeout(() => { saveStatus.style.opacity = "0"; }, 1200);
         }
     }, 300);
-}
+};
 
 function loadNotes() {
     const scratchPad = document.getElementById('scratchpad');
-    if (!scratchPad) return; // 💡 BUGFIX: Eğer not alanı ekranda yoksa çökme, geç!
-
+    if (!scratchPad) return;
     const n = localStorage.getItem('codesnip_notes');
     if (n) scratchPad.value = n;
 }
@@ -443,7 +616,7 @@ window.clearAllData = function () {
         localStorage.clear();
         reloadApp();
     }
-}
+};
 
 // 🧠 Spotlight Canlı Arama Motoru
 let seciliIndeks = -1;
@@ -493,13 +666,7 @@ if (spInputEl) {
                     </div>
                 `;
             });
-            listeHtml += '</div>';
-
-            listeHtml += `
-                <div id="spotlight-ql" class="spotlight-quick-preview">
-                    <pre><code id="spotlight-ql-code"></code></pre>
-                </div>
-            `;
+            listeHtml += '</div><div id="spotlight-ql" class="spotlight-quick-preview"><pre><code id="spotlight-ql-code"></code></pre></div>';
 
             resultsDiv.innerHTML = listeHtml;
         } else {
@@ -563,12 +730,8 @@ window.addEventListener('keydown', (e) => {
             e.preventDefault();
             const qlPanel = document.getElementById('spotlight-ql');
             if (qlPanel) {
-                if (qlPanel.style.display === 'flex') {
-                    qlPanel.style.display = 'none';
-                } else {
-                    qlPanel.style.display = 'flex';
-                    guncelleSpotlightQuickLook();
-                }
+                qlPanel.style.display = qlPanel.style.display === 'flex' ? 'none' : 'flex';
+                guncelleSpotlightQuickLook();
             }
         }
     }
@@ -599,9 +762,7 @@ window.addEventListener('keydown', (e) => {
             e.preventDefault();
             try {
                 const sifreliKisim = girdi.replace('import:', '');
-                const cozulmusMetin = decodeURIComponent(atob(sifreliKisim).split('').map(function (c) {
-                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-                }).join(''));
+                const cozulmusMetin = decodeURIComponent(atob(sifreliKisim).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
 
                 const gelenKart = JSON.parse(cozulmusMetin);
                 hariciKartEkle(`${gelenKart.title} (Gelen)`, gelenKart.code, gelenKart.category);
@@ -619,11 +780,7 @@ window.addEventListener('keydown', (e) => {
         e.preventDefault();
         const anaAramaCubugu = document.getElementById('search-input');
         if (anaAramaCubugu) {
-            if (filtrelenmisKartlar[seciliIndeks]) {
-                anaAramaCubugu.value = filtrelenmisKartlar[seciliIndeks].title;
-            } else {
-                anaAramaCubugu.value = girdi;
-            }
+            anaAramaCubugu.value = filtrelenmisKartlar[seciliIndeks] ? filtrelenmisKartlar[seciliIndeks].title : girdi;
             if (typeof searchSnips === 'function') searchSnips();
         }
 
@@ -657,19 +814,8 @@ function guncelleSpotlightQuickLook() {
     }
 }
 
-// Global kısayol dinleyicisi
-ipcRenderer.on('global-spotlight-trigger', () => {
-    const spotlightOverlay = document.getElementById('spotlight-overlay');
-    const spotlightInput = document.getElementById('spotlight-input');
-    if (spotlightOverlay && spotlightInput) {
-        spotlightOverlay.classList.remove('spotlight-hidden');
-        spotlightInput.value = '';
-        spotlightInput.focus();
-    }
-});
-
-// 💾 JSON Dışa Aktarma (Export)
-async function exportCodeSnipData() {
+// 💾 JSON Dışa Aktarma (Export) - Çift tıklama korumalı
+window.exportCodeSnipData = async function () {
     try {
         const localData = localStorage.getItem('all_snippets_data');
         if (!localData || localData === '[]') {
@@ -677,27 +823,105 @@ async function exportCodeSnipData() {
             return;
         }
         const result = await ipcRenderer.invoke('export-data', localData);
-        if (result.success) alert(result.message);
+        if (result && result.success) alert(result.message);
     } catch (error) {
-        alert('Yedekleme başlatılamadı.');
+        console.error("Export hatası:", error);
     }
-}
+};
 
-// 📂 JSON İçe Aktarma (Import)
-async function importCodeSnipData() {
+// 📂 JSON İçe Aktarma (Import) - Çift pencere çakışması engellendi
+window.importCodeSnipData = async function () {
     const onay = confirm(currentLang === 'tr' ? "Mevcut verilerinizin üzerine yazılacak. Emin misiniz?" : "This will overwrite your existing data. Are you sure?");
     if (!onay) return;
 
     try {
         const result = await ipcRenderer.invoke('import-data');
-        if (result.success) {
+        if (result && result.success) {
             localStorage.setItem('all_snippets_data', result.data);
             alert(currentLang === 'tr' ? 'Verileriniz başarıyla geri yüklendi! Uygulama yenilenecektir.' : 'Data successfully restored! App will reload.');
             window.location.reload();
-        } else {
+        } else if (result && result.message) {
             alert(result.message);
         }
     } catch (error) {
+        console.error("Import hatası:", error);
         alert('İçe aktarma sırasında bir hata oluştu.');
     }
-}
\ No newline at end of file
+};
+
+function addCategoryProcess() {
+    const nameTr = document.getElementById('cat-name-tr').value;
+    const icon = document.getElementById('cat-icon-select').value;
+
+    if (!nameTr) return;
+
+    let categories = JSON.parse(localStorage.getItem('codesnip_categories')) || [];
+
+    categories.push({
+        id: nameTr.toLowerCase().replace(/\s+/g, '-'),
+        name: { tr: nameTr, en: nameTr },
+        icon: icon
+    });
+
+    localStorage.setItem('codesnip_categories', JSON.stringify(categories));
+    document.getElementById('category-modal').style.display = 'none';
+    renderCategories();
+}
+
+function deleteCategory(event, categoryId) {
+    event.stopPropagation();
+
+    if (!confirm("Bu kategoriyi silmek istediğine emin misin?")) return;
+
+    let categories = JSON.parse(localStorage.getItem('codesnip_categories')) || [];
+    const updatedCategories = categories.filter(c => c.id !== categoryId);
+
+    localStorage.setItem('codesnip_categories', JSON.stringify(updatedCategories));
+    renderCategories();
+}
+
+function toggleAboutModal() {
+    const modal = document.getElementById('about-modal');
+    if (!modal) return;
+    modal.style.display = (modal.style.display === 'none' || modal.style.display === '') ? 'flex' : 'none';
+}
+
+
+// Subtle Liquid Glass 3D depth — intentionally restrained.
+// It changes the light/depth of a card without moving it around the page.
+function initGlass3D() {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    document.addEventListener('mousemove', (event) => {
+        const card = event.target.closest('.snip-card');
+        if (!card) return;
+
+        const rect = card.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+
+        // Very small angles: depth, not a spinning card effect.
+        const rotateY = (x - 0.5) * 3;
+        const rotateX = (0.5 - y) * 3;
+
+        card.style.setProperty('--card-rotate-x', rotateX.toFixed(2) + 'deg');
+        card.style.setProperty('--card-rotate-y', rotateY.toFixed(2) + 'deg');
+        card.style.setProperty('--card-glow-x', (x * 100).toFixed(1) + '%');
+        card.style.setProperty('--card-glow-y', (y * 100).toFixed(1) + '%');
+    });
+
+    document.addEventListener('mouseleave', () => {
+        document.querySelectorAll('.snip-card').forEach(card => {
+            card.style.setProperty('--card-rotate-x', '0deg');
+            card.style.setProperty('--card-rotate-y', '0deg');
+            card.style.setProperty('--card-glow-x', '50%');
+            card.style.setProperty('--card-glow-y', '50%');
+        });
+    }, true);
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initGlass3D);
+} else {
+    initGlass3D();
+}
diff --git a/style.css b/style.css
index 6a737aa..1cce7f4 100644
--- a/style.css
+++ b/style.css
@@ -2,12 +2,12 @@
     box-sizing: border-box;
 }
 
-* {
-    box-sizing: border-box;
-}
-
 body {
-    background-color: #0f141c;
+    /* Eski rengi yedek olarak tuttuk, hemen arkasına resmi bağlıyoruz */
+    background: #0f141c url('abstract.png') no-repeat center center fixed;
+    background-size: cover;
+    /* Resmi ekrana tam yayar, boşluk bırakmaz */
+
     color: #f5f6f9;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     margin: 0;
@@ -15,11 +15,28 @@ body {
     overflow: hidden;
     transition: background-color 0.3s, color 0.3s;
 
-    /* Body üzerinde ekstra padding veya position bırakmıyoruz, tertemiz */
     display: flex;
     flex-direction: column;
 }
 
+/* Liquid Glass aktifken arka plana pürüzsüzlük katacak katman */
+body.liquid-glass::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: inherit;
+    filter: blur(2px);
+    /* Arka plan görselini hafifçe yumuşatmak için */
+    z-index: -1;
+}
+
+.border-highlight {
+    border-color: var(--theme-color) !important;
+}
+
 /* GÜNCELLENEN ÜST BAR TASARIMI */
 .electron-titlebar {
     width: 100%;
@@ -135,8 +152,11 @@ nav {
     flex: 1;
     padding: 30px;
     overflow-y: auto;
-    background-color: #0f141c;
-    /* Mat ve derin koyu tema tabanı */
+
+    /* DÜZELTME: Mat renk yerine %45 saydamlık ve cam bulanıklığı ekledik */
+    background-color: rgba(15, 20, 28, 0.45) !important;
+    backdrop-filter: blur(20px);
+
     transition: background-color 0.3s;
 }
 
@@ -153,16 +173,30 @@ header h2 {
     gap: 20px;
 }
 
-/* Kod Kartları Genel Yapısı */
+/* Kod Kartları Genel Yapısı (Liquid Glass Güncellemesi) */
 .snip-card {
     border-radius: 12px;
     padding: 20px;
+
+    /* DÜZELTME: Kart zeminini yarı saydam yapıp arkasını bulandırdık */
+    background-color: rgba(30, 35, 45, 0.5) !important;
+    backdrop-filter: blur(12px);
+
+    /* İnce cam yansıması kenarlık */
+    border: 1px solid rgba(255, 255, 255, 0.06);
+
     transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s, border-color 0.3s;
 }
 
+/* Karta Yaklaştığında (Hover) Cam Parlaması Efekti */
 .snip-card:hover {
     transform: translateY(-2px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
+
+    /* Üzerine gelince cam biraz daha aydınlanıp parlasın */
+    background-color: rgba(40, 45, 60, 0.6) !important;
+    border-color: rgba(255, 255, 255, 0.15);
+
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
 }
 
 .snip-header {
@@ -180,16 +214,6 @@ header h2 {
 }
 
 /* Butonlar */
-.copy-btn {
-    background-color: rgba(255, 255, 255, 0.07);
-    color: #e4e6eb;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    padding: 6px 14px;
-    border-radius: 6px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
 
 .copy-btn:hover {
     background-color: #007aff;
@@ -202,15 +226,77 @@ header h2 {
     gap: 8px;
 }
 
+
+/* ==========================================================================
+   KART BUTONLARI (MİLİMETRİK EŞİTLEME GÜNCELLEMESİ)
+   ========================================================================== */
+
+.copy-btn,
+.delete-btn,
+.share-btn,
+.edit-btn {
+    /* Hepsine sabit yükseklik vererek tarayıcı farklılıklarını sıfırlıyoruz */
+    height: 32px;
+
+    /* İçerikleri (metin ve ikonları) dikeyde tam ortalıyoruz */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Yatay boşluklar ve fontlar tamamen aynı */
+    padding: 0 14px;
+    font-size: 13px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: inherit;
+    box-sizing: border-box;
+    /* Border'ların yüksekliğe dahil olmasını sağlar */
+    transition: all 0.2s ease;
+}
+
+/* Kopyala Butonu Özel Renkleri */
+.copy-btn {
+    background-color: rgba(255, 255, 255, 0.07);
+    color: #e4e6eb;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Sil Butonu Özel Renkleri */
 .delete-btn {
     background-color: rgba(255, 61, 48, 0.15);
     color: #ff453a;
     border: 1px solid rgba(255, 61, 48, 0.2);
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s;
+}
+
+/* Paylaş Butonu Özel Renkleri */
+.share-btn {
+    background: rgba(85, 255, 7, 0.15);
+    color: #7fff07;
+    border: 1px solid rgba(139, 255, 7, 0.3);
+    gap: 4px;
+    /* İkon ile yazı arasındaki boşluk */
+}
+
+.share-btn:hover {
+    background: #a8ff07;
+    color: #111;
+    /* Koyu temada yazı net okunsun diye */
+    box-shadow: 0 0 8px rgba(181, 255, 7, 0.4);
+}
+
+/* Düzenle Butonu Özel Renkleri */
+.edit-btn {
+    background: rgba(255, 193, 7, 0.15);
+    color: #ffc107;
+    border: 1px solid rgba(255, 193, 7, 0.3);
+    gap: 4px;
+}
+
+.edit-btn:hover {
+    background: #ffc107;
+    color: #111;
+    /* Koyu temada yazı net okunsun diye */
+    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
 }
 
 .delete-btn:hover {
@@ -219,17 +305,31 @@ header h2 {
 }
 
 /* Kod Editörü / Blokları Görünümü */
+/* Kod Editörü / Blokları Görünümü (Liquid Glass Güncellemesi) */
 pre {
-    background-color: #080b11;
-    /* Kodların içi tam bir terminal gibi simsiyah ve net */
+    /* DÜZELTME: Sabit koyu renk yerine yarı saydam bir ton verdik */
+    background-color: rgba(10, 13, 20, 0.4) !important;
+
+    /* Kodların arkasında da cam akıcılığı devam etsin */
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+
     padding: 15px;
     border-radius: 8px;
     margin: 0;
     overflow-x: auto;
-    border: 1px solid rgba(255, 255, 255, 0.03);
+
+    /* Hafif parlayan şık bir iç kenarlık */
+    border: 1px solid rgba(255, 255, 255, 0.05);
     transition: background-color 0.3s, border-color 0.3s;
 }
 
+/* Fareyle kod bloğunun üzerine gelindiğinde hafif bir parlamayla canlansın */
+pre:hover {
+    background-color: rgba(15, 20, 30, 0.55) !important;
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
 code {
     font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, monospace;
     color: #e0e0e0;
@@ -237,11 +337,14 @@ code {
 }
 
 /* ================= MODERN SIVI CAM (LIQUID GLASS) EFEKTİ ================= */
+/* style.css içindeki mevcut tanımı dinamik değişkenlerle güncelleyelim */
 .liquid_glass {
-    background: rgba(255, 255, 255, 0.03) !important;
-    backdrop-filter: blur(16px) !important;
-    -webkit-backdrop-filter: blur(16px) !important;
+    background: rgba(255, 255, 255, var(--glass-opacity, 0.03)) !important;
+    backdrop-filter: blur(var(--glass-blur, 16px)) !important;
+    -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) !important;
     border: 1px solid rgba(255, 255, 255, 0.06) !important;
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), var(--glow-color, rgba(0, 0, 0, 0));
+    transition: all 0.3s ease;
 }
 
 /* ================= MAT GÖRÜNÜM (CAM EFEKTİ KAPALIYKEN) ================= */
@@ -336,22 +439,6 @@ code {
     transition: opacity 0.3s;
 }
 
-#scratchpad {
-    width: 100%;
-    height: 130px;
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    border-radius: 8px;
-    color: #ffffff;
-    padding: 12px;
-    font-family: inherit;
-    font-size: 13px;
-    resize: none;
-    /* Düzgün durması için manuel büyütmeyi kapattık */
-    outline: none;
-    transition: border-color 0.2s;
-}
-
 #scratchpad:focus {
     border-color: #007aff;
 }
@@ -426,13 +513,42 @@ code {
 }
 
 .form-group select {
-    flex: 1;
-    background-color: #080b11;
+    /* Temel tasarım */
+    background: #080b11;
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 15px 17px;
+    /* Biraz daha iç boşluk verdik */
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+    /* Kutunun genişliği tam sığması için */
+
+    /* 🌟 Sihirli dokunuş: Varsayılan tarayıcı stilini tamamen kapat */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    /* Kendi özel ok simgemizi ekliyoruz (çünkü appearance: none ok'u yok eder) */
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+    padding-right: 30px;
+    /* Okun yazının üstüne binmemesi için */
+}
+
+/* Üzerine gelince belirginleşsin */
+.form-group select:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background-color: #111622;
 }
 
 .form-group textarea {
     width: 100%;
-    height: 120px;
+    height: 150px;
     resize: vertical;
 }
 
@@ -443,13 +559,18 @@ code {
 }
 
 .save-btn {
-    background-color: #30d158;
-    color: white;
-    border: none;
-    padding: 10px 20px;
+    background: rgba(85, 255, 7, 0.15);
+    color: #7fff07;
+    border: 1px solid rgba(139, 255, 7, 0.3);
+    border-radius: 6px;
+}
+
+.save-btn:hover {
+    background: #a8ff07;
+    color: #111;
+    /* Koyu temada yazı net okunsun diye */
+    box-shadow: 0 0 8px rgba(181, 255, 7, 0.4);
     border-radius: 6px;
-    cursor: pointer;
-    font-weight: 500;
 }
 
 .cancel-btn {
@@ -463,8 +584,21 @@ code {
 
 /* Sol Menü Footer (Ayarlar Butonu) */
 .sidebar-footer {
+    margin-top: auto;
+    /* Üstteki elemanlardan tamamen bağımsız en alta itilmesi için garanti */
     padding-top: 15px;
-    margin-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    /* İsteğe bağlı: Üstüne şık ince bir çizgi */
+    align-items: center;
+}
+
+/* Footer içindeki ayarlar butonunun tasarımı (gerekirse genişlik ayarı) */
+.sidebar-footer button {
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .settings-toggle-btn {
@@ -498,24 +632,144 @@ code {
     z-index: 9999;
 }
 
+/* ==========================================================================
+   🔍 AYARLAR PENCERESİ - CHROMIUM BUG ARINDIRILMIŞ KESİN ÇÖZÜM
+   ========================================================================== */
+
+/* Modalı taşıyan ve tüm ekranı kaplayan karartma katmanı */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* Arka planı biraz daha koyulaştırarak alttaki blur çakışmasını nötrlüyoruz */
+    background: rgba(5, 7, 12, 0.85) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+/* Ayarlar Penceresinin Ana Kutusu */
 .modal-content {
     width: 540px;
     max-height: 85vh;
     overflow-y: auto;
-    padding: 30px;
+    padding: 0 30px 30px 30px;
     border-radius: 16px;
-    background-color: #161e2b;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
+    position: relative;
+
+    /* ⚠️ CHROMIUM BLUR BUG ÇÖZÜMÜ: 
+       Üst üste binen filtreler patlamaya sebep olduğu için buradaki blur'u sıfırladık.
+       Arkayı tamamen kapatan, asil ve opak bir gece laciverti verdik: */
+    background-color: #111622 !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+
+    /* Şık ve ince çerçeve çizgisi */
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85) !important;
+
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
+/* Üst Sabit Başlık Alanı (Aşağı kaydırırken yazılar arkaya gizlenir) */
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: sticky;
+    top: 0;
+    padding: 25px 0 15px 0;
     margin-bottom: 25px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    padding-bottom: 15px;
+    z-index: 10;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    /* İçerik kutusuyla birebir aynı, opak renk olmak zorunda: */
+    background-color: #111622 !important;
+}
+
+/* ☀️ Jilet Gibi Açık Tema (Light Theme) Aktifken Ayarlar Görünümü */
+.light-theme .modal-content {
+    background-color: #e8e6e6 !important;
+    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+
+.light-theme .modal-header {
+    background-color: #e8e6e6 !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* --------------------------------------------------------------------------
+   A) LIQUID GLASS AKTİFKEN (body elementinde .liquid-glass sınıfı VARKEN)
+   -------------------------------------------------------------------------- */
+body.liquid-glass .modal-content {
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+body.liquid-glass .modal-header {
+    /* Yazılar arkadan kayarken hafifçe süzülmesi için yarı saydam cam efekti */
+    background-color: rgba(22, 30, 43, 0.6) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+
+    /* Sağdan soldan taşma yapmaması için iç boşluk dengeleyici */
+    padding: 25px 15px 15px 15px;
+    margin: 0 -15px 25px -15px;
+}
+
+
+/* --------------------------------------------------------------------------
+   B) LIQUID GLASS KAPALIYKEN (body elementinde .liquid-glass sınıfı YOKKEN)
+   -------------------------------------------------------------------------- */
+body:not(.liquid-glass) .modal-content {
+    /* Orijinal asil koyu lacivert mat görünüm */
+    background-color: #161e2b !important;
+    border: 1px solid rgba(255, 255, 255, 0.06) !important;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7) !important;
+}
+
+body:not(.liquid-glass) .modal-header {
+    /* Arkadan kayan yazılar üste binmesin diye tamamen opak mat arka plan */
+    background-color: #161e2b !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+
+    /* Düz temada ekstra margin taşmalarına gerek yok, sıfırlıyoruz */
+    padding: 25px 0 15px 0;
+    margin: 0 0 25px 0;
+}
+
+
+/* --------------------------------------------------------------------------
+   C) MODERN KAPATMA BUTONU
+   -------------------------------------------------------------------------- */
+.modal-header button,
+.close-modal-btn {
+    background: rgba(255, 255, 255, 0.05);
+    color: #a0a5b5;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.modal-header button:hover,
+.close-modal-btn:hover {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+    color: #ffffff !important;
+    border-color: rgba(255, 255, 255, 0.2) !important;
 }
 
 .modal-header h2 {
@@ -602,12 +856,15 @@ code {
     color: white;
 }
 
-/* Toggle Switch */
+/* ==========================================================================
+   🔮 HAREKET ANINDA VE BASILI TUTULDUĞUNDA CAMLAŞAN TOGGLE SWITCH
+   ========================================================================== */
+
 .switch {
     position: relative;
     display: inline-block;
-    width: 46px;
-    height: 24px;
+    width: 51px;
+    height: 31px;
 }
 
 .switch input {
@@ -616,6 +873,7 @@ code {
     height: 0;
 }
 
+/* Gövde */
 .slider {
     position: absolute;
     cursor: pointer;
@@ -623,29 +881,59 @@ code {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #3a3a3c;
-    transition: .3s;
-    border-radius: 24px;
+    background-color: #39393d;
+    border: 1.5px solid rgba(255, 255, 255, 0.1);
+    border-radius: 31px;
+    transition: background-color 0.25s ease;
 }
 
+/* İçteki Yuvarlak (Normal dururken ve hareket bittiğinde HER ZAMAN mat beyaz) */
 .slider:before {
     position: absolute;
     content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background-color: white;
-    transition: .3s;
+    height: 25px;
+    width: 25px;
+    left: 2px;
+    bottom: 2px;
+    background-color: #ffffff;
     border-radius: 50%;
+    transform-origin: left center;
+
+    /* 🌟 Sihir burada: Cam efektinin açılıp kapanma hızını da transition'a bağlıyoruz */
+    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
+        width 0.25s cubic-bezier(0.25, 1, 0.5, 1),
+        background-color 0.2s ease,
+        backdrop-filter 0.2s ease,
+        border 0.2s ease,
+        box-shadow 0.2s ease;
+
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    border: 1px solid transparent;
 }
 
+/* 🟢 SWITCH AKTİF OLDUĞUNDA (SAĞA KAYIŞ) */
 input:checked+.slider {
-    background-color: #30d158;
+    background-color: #34c759;
 }
 
 input:checked+.slider:before {
-    transform: translateX(22px);
+    transform: translateX(20px);
+}
+
+/* 🧪 ⚡ BASILI TUTULDUĞU AN (ACTIVE) TETİKLENEN DETAYLAR */
+/* Sen parmağını fare düğmesinden çekene kadar buton bu cam formunda donar: */
+.switch input:active+.slider:before {
+    width: 32px;
+    /* Videodaki esneme payı */
+
+    /* Liquid Glass Kodları */
+    background-color: rgba(255, 255, 255, 0.25) !important;
+    backdrop-filter: blur(6px) !important;
+    -webkit-backdrop-filter: blur(6px) !important;
+
+    /* Kristal kenarlık parlaması ve gölgesi */
+    border: 1px solid rgba(255, 255, 255, 0.45) !important;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
 /* AKILLI TOAST BİLDİRİM SİSTEMİ */
@@ -679,7 +967,9 @@ input:checked+.slider:before {
 }
 
 .light-theme .main-content {
-    background-color: #c3faf9 !important;
+    /* Açık tema için de istersen hafif saydam bir cam yapabilirsin */
+    background-color: rgba(195, 250, 249, 0.7) !important;
+    backdrop-filter: blur(20px);
 }
 
 .light-theme .sidebar {
@@ -724,6 +1014,7 @@ input:checked+.slider:before {
 
 .light-theme .snip-card pre {
     background-color: #ffffff !important;
+    backdrop-filter: none !important;
     border: 1px solid rgba(0, 0, 0, 0.1) !important;
 }
 
@@ -802,21 +1093,7 @@ input:checked+.slider:before {
     /* Aktifken altın sarısı parlasın */
 }
 
-/* Düzenle Buton Tasarımı */
-.edit-btn {
-    background-color: #ffcc00;
-    color: #ffffff;
-    border: none;
-    padding: 4px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
-    transition: background 0.2s;
-}
 
-.edit-btn:hover {
-    background-color: #ffde5b;
-}
 
 /* Butonların Kapsayıcısı */
 .window-controls {
@@ -987,32 +1264,6 @@ input:checked+.slider:before {
     align-items: center;
 }
 
-/* Paylaş Butonunun Genel Tasarımı */
-.share-btn {
-    background: rgba(255, 193, 7, 0.15);
-    /* Hafif şeffaf sarı/turuncu tonu */
-    border: 1px solid rgba(255, 193, 7, 0.3);
-    color: #ffc107;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 12px;
-    cursor: pointer;
-    font-family: inherit;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    /* İkon ve metin arası boşluk */
-}
-
-/* Paylaş Butonuna Hover (Fareyle üzerine gelince) Efekti */
-.share-btn:hover {
-    background: #ffc107;
-    color: #111;
-    /* Koyu temada yazı net okunsun diye */
-    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
-}
-
 /* Eğer butonların genel bir stili varsa (edit-btn, copy-btn gibi) uyum sağlaması için */
 .card-actions button {
     outline: none;
@@ -1143,7 +1394,7 @@ input:checked+.slider:before {
 .spotlight-item.active .item-category {
     background: #00adb5;
     /* Seçili satırdaki kategori senin neon mavisi rengini alır */
-    color: #fff;
+    color: #ff008c;
 }
 
 /* 📑 SAĞ TARAFTAKİ MINI QUICK LOOK (ÖNİZLEME) PANELİ */
@@ -1228,200 +1479,653 @@ input:checked+.slider:before {
 ::-webkit-scrollbar-corner {
     background: transparent;
 }
+
+/* ==========================================================================
+   🎬 CODESNIP MEGA ANIMATION PACK v26Q3-beta1 — COMPLETE 20 ANIMATIONS
+   ========================================================================== */
+
+/* ==========================================
+   Section 1: Global Keyframes (01 - 06)
+   ========================================== */
+
+/* 01. Aşağıdan Yukarı Süzülme Girişi */
+@keyframes csFadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(16px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 02. Soldan Sağa Akıcı Giriş */
+@keyframes csFadeInLeft {
+    0% {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* 03. macOS Tarzı Esnek Büyüme */
+@keyframes csScalePop {
+    0% {
+        opacity: 0;
+        transform: scale(0.94);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* 04. Kopyalama Başarı Sıçraması */
+@keyframes csSuccessBounce {
+    0% {
+        transform: scale(1);
+    }
+
+    30% {
+        transform: scale(1.15);
+        background-color: #34c759 !important;
+        border-color: transparent;
+    }
+
+    50% {
+        transform: scale(0.95);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+/* 05. Bildirim Kutusu Sallanma Efekti */
+@keyframes csAlertShake {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    20%,
+    60% {
+        transform: translateX(-4px);
+    }
+
+    40%,
+    80% {
+        transform: translateX(4px);
+    }
+}
+
+/* 06. Arka Plan Shimmer (Yükleniyor) Dalgası */
+@keyframes csShimmerWave {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+
+/* ==========================================
+   Section 2: Uygulama İçi Bileşenler (07 - 20)
+   ========================================== */
+
+/* 07. Kod Kartları İlk Giriş Efekti (.snip-card) */
+.snip-card {
+    animation: csFadeInUp 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
+/* 08. Kod Kartları Üzerine Gelince Yükselme (Hover) */
+.snip-card {
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+        box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+        border-color 0.3s ease;
+}
+
+.snip-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
+    border-color: rgba(255, 255, 255, 0.18) !important;
+}
+
+/* 09. Sol Menü Elemanları Esnek Sağa Kayma (.nav-item) */
+.nav-item {
+    transition: background-color 0.2s ease,
+        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+        padding-left 0.25s ease,
+        color 0.2s ease !important;
+}
+
+.nav-item:hover {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+    padding-left: 26px !important;
+    transform: scale(1.02);
+    color: #ffffff !important;
+}
+
+/* 10. Sol Menü Elemanları Tıklama İçe Çökme (Active) */
+.nav-item:active {
+    transform: scale(0.97);
+}
+
+/* 11. Arama Çubuğu Genişleme ve Parlama (Focus) */
+.search-bar-container input,
+input[type="text"] {
+    transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
+}
+
+/* 12. İşlem Butonları Yumuşak Parlama (Hover) */
+.btn-copy,
+.btn-edit,
+.btn-share,
+.main-button {
+    transition: filter 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.btn-copy:hover,
+.btn-edit:hover,
+.btn-share:hover,
+.main-button:hover {
+    filter: brightness(1.2);
+    transform: translateY(-1.5px);
+}
+
+/* 13. İşlem Butonları Tıklama Tepkisi */
+.btn-copy:active,
+.btn-edit:active,
+.btn-share:active,
+.main-button:active {
+    transform: translateY(1px) scale(0.95);
+}
+
+/* 14. Kopyala Butonu Başarı Zıplaması (.copied sınıfı tetiklendiğinde) */
+.btn-copy.copied {
+    animation: csSuccessBounce 0.4s ease-in-out;
+}
+
+/* 15. "+ Yeni Kod Ekle" Butonu Neon Glow Efekti */
+.add-btn {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.add-btn:hover {
+    transform: scale(1.04);
+    box-shadow: 0 0 18px rgba(52, 152, 219, 0.5) !important;
+}
+
+/* 16. Ayarlar / Kod Ekleme Penceresi Pop-up Açılışı (.modal-content) */
+.modal-content {
+    animation: csScalePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+/* 17. Modal Kapatma Butonu (X) Kendi Etrafında Dönüşü */
+.modal-close-btn {
+    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.modal-close-btn:hover {
+    transform: rotate(90deg) scale(1.15);
+}
+
+/* 18. Dil Seçim Dropdown Menü Yumuşak Aşağı Açılışı (.dropdown-menu) */
+.dropdown-menu {
+    display: block !important;
+    /* Görünürlüğü opacity ile yöneteceğiz */
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.dropdown-container:hover .dropdown-menu,
+.dropdown-menu.show {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+/* 19. Logo / Başlık Üzerine Gelindiğinde Hafif Sallanma Efekti */
+.app-logo,
+.brand-title {
+    transition: transform 0.3s ease;
+}
+
+.app-logo:hover,
+.brand-title:hover {
+    transform: rotate(-3deg) scale(1.05);
+}
+
+/* 20. Kod Blokları Satır Numaraları Sol Şerit Girişi (.line-numbers) */
+.line-numbers {
+    animation: csFadeInLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
+/* Açık temada sol menüdeki tüm sayı rozetlerinin kesin rengi */
+.light-theme .sidebar .badge {
+    background-color: #007aff !important;
+    color: #ffffff !important;
+    opacity: 1 !important;
+}
+
+/* Aktif olan menü elemanının sayısının tam beyaz kalması için */
+.light-theme .nav-item.active .badge {
+    background-color: #0056b3 !important;
+    color: #ffffff !important;
+}
+
+/* Eski .add-code-panel kodunu sil, doğrusunu yazıyoruz: */
+.add-panel {
+    overflow: visible !important;
+    /* Listenin dışarı taşarak düzgün açılması için */
+}
+
+/* Modal Arka Plan */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(10px);
+    /* O beklediğimiz cam efekti */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+/* Modal İçerik Kutusu - Ana Temayı Giyiyor */
+.modal-content.glass-panel {
+    background: rgba(30, 30, 45, 0.8) !important;
+    /* Koyu tema glass */
+    padding: 25px;
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    width: 320px;
+    color: rgb(255, 255, 255);
+}
+
+/* Input ve Select stilleri */
+.modal-input {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgb(54, 54, 54);
+    border-radius: 6px;
+    box-sizing: border-box;
+}
+
+/* Butonlar */
+.modal-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.btn-primary {
+    flex: 1;
+    padding: 10px;
+    border-radius: 6px;
+    border: none;
+    background: #3498db;
+    color: white;
+    cursor: pointer;
+}
+
+.btn-secondary {
+    flex: 1;
+    padding: 10px;
+    border-radius: 6px;
+    border: none;
+    background: #444;
+    color: white;
+    cursor: pointer;
+}
+
+/* 4. Kategori Ekle Butonu */
+.add-cat-btn {
+    background: transparent;
+    border: 1px dashed rgba(255, 255, 255, 0.3);
+    color: var(--accent-blue);
+    padding: 10px;
+    margin-top: 10px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.add-cat-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--accent-blue);
+}
+
+/* Favori butonu rengi */
+.nav-favorites {
+    color: #ffcc00;
+}
+
+/* Kategori container düzeni */
+.cat-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Modallar için başlangıç gizleme */
+.hidden-initially {
+    display: none;
+}
+
+.beta-watermark {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    opacity: 0.7;
+    /* Hafif silik görünmesi için */
+    font-size: 20px;
+    font-family: 'Segoe UI', sans-serif;
+    letter-spacing: 1px;
+    pointer-events: none;
+    /* Tıklamaları uygulamaya geçirir, yazıya tıklanmaz */
+    user-select: none;
+    /* Metnin seçilmesini engeller */
+    z-index: 9999;
+    /* En üstte kalmasını sağlar */
+    cursor: pointer;
+    /* Fare imlecini el işareti yap */
+    pointer-events: auto;
+    /* Tıklanabilirliği aç */
+    transition: color 0.3s;
+    /* Tatlı bir geçiş */
+}
+
+.beta-subtitle {
+    font-size: 15px;
+    /* Birinci satırdan daha küçük */
+    opacity: 0.7;
+    /* Biraz daha silik */
+    display: block;
+    /* Alt satıra geçmesini sağlar */
+    margin-top: 2px;
+    /* Satırlar arası boşluk */
+    letter-spacing: 0.5px;
+}
+
+.beta-watermark:hover {
+    color: rgba(255, 255, 255, 0.4);
+    /* Üzerine gelince biraz belirginleşsin */
+}
+
+#about-modal {
+    display: none;
+    /* Başlangıçta gizli */
+}
+
+#about-modal.active {
+    display: flex;
+    /* Açıkken flex yap */
+}
+
+/* =======================================================================AI===
+                    SLIDER METİN HİZALAMASI VE BOZULMA FİXİ
+   ========================================================================== */
+
+/* Kaydırıcıların bulunduğu ayar kutularını özel olarak hizala */
+/* ===========================
+   Modern Glass Slider
+   =========================== */
+/* =======================
+   Glass Slider
+======================= */
+
+.glass-slider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 220px;
+}
+
+.glass-slider span {
+    min-width: 42px;
+    text-align: center;
+    padding: 5px 8px;
+
+    border-radius: 10px;
+
+    background: rgba(255, 255, 255, .06);
+    border: 1px solid rgba(255, 255, 255, .08);
+
+    backdrop-filter: blur(10px);
+
+    font-size: 12px;
+    font-weight: 600;
+
+    color: #fff;
+}
+
+.glass-slider input[type=range] {
+    -webkit-appearance: none;
+    appearance: none;
+
+    width: 180px;
+    height: 5px;
+
+    border-radius: 999px;
+
+    background: rgba(255, 255, 255, .12);
+
+    cursor: pointer;
+
+    transition: .25s;
+}
+
+.glass-slider input[type=range]:hover {
+    background: rgba(255, 255, 255, .18);
+}
+
+.glass-slider input[type=range]::-webkit-slider-runnable-track {
+    height: 5px;
+    border-radius: 999px;
+}
+
+.glass-slider input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+
+    margin-top: -6px;
+
+    width: 17px;
+    height: 17px;
+
+    border-radius: 50%;
+
+    background: #fcfbfb;
+
+    border: 3px solid var(--theme-color);
+
+    box-shadow:
+        0 0 0 3px rgba(255, 255, 255, .08),
+        0 4px 12px rgba(0, 0, 0, .35);
+
+    transition: .2s;
+}
+
+.glass-slider input[type=range]::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow:
+        0 0 12px var(--theme-color),
+        0 6px 18px rgba(0, 0, 0, .45);
+}
+
+/* Alt açıklama metinlerinin ("Arka planın bulanıklık seviyesi..." vb.) hizası */
+.setting-item:has(input[type="range"]) .setting-description {
+    font-size: 12px;
+    color: #a0a5b1;
+    margin-top: -8px;
+    /* Başlığa biraz daha yaklaştırıp bütünlük sağlar */
+    margin-bottom: 5px;
+}
 
 
-/* ==========================================================================
-   CodeSnip 26Q3.5 — Light Theme Refinement
-   ========================================================================== */
-.light-theme {
-    background: #f5f7fa !important;
-    color: #1d1d1f !important;
-}
-
-.light-theme .electron-titlebar {
-    background: rgba(255,255,255,0.88);
-    color: #4b4b4f;
-    border-bottom: 1px solid rgba(0,0,0,0.08);
-    backdrop-filter: blur(18px);
-}
-
-.light-theme .titlebar-drag-zone {
-    color: #5f6368;
-}
-
-.light-theme .sidebar {
-    background: rgba(255,255,255,0.72) !important;
-    border-right: 1px solid rgba(0,0,0,0.08) !important;
-    box-shadow: 4px 0 24px rgba(0,0,0,0.04);
-}
-
-.light-theme .logo-text,
-.light-theme h2,
-.light-theme h3,
-.light-theme strong,
-.light-theme .nav-item,
-.light-theme .sidebar-footer button {
-    color: #202124 !important;
-}
-
-.light-theme .nav-item {
-    border: 1px solid transparent;
-}
-
-.light-theme .nav-item:hover {
-    background: rgba(0,122,255,0.07) !important;
-    border-color: rgba(0,122,255,0.12);
-}
-
-.light-theme .nav-item.active {
-    background: rgba(0,122,255,0.11) !important;
-    border-color: rgba(0,122,255,0.16);
-}
-
-.light-theme .badge {
-    background: rgba(0,0,0,0.07);
-    color: #555 !important;
-}
-
-.light-theme .snip-card.liquid_glass,
-.light-theme .snip-card.no-glass {
-    background: rgba(255,255,255,0.82) !important;
-    border: 1px solid rgba(0,0,0,0.08) !important;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.055);
-}
-
-.light-theme .snip-card:hover {
-    box-shadow: 0 12px 30px rgba(0,0,0,0.09);
-    border-color: rgba(0,122,255,0.18) !important;
-}
-
-.light-theme .snip-card pre {
-    background: #f8f9fb !important;
-    border: 1px solid rgba(0,0,0,0.07) !important;
-}
-
-.light-theme .snip-card pre code {
-    color: #24292f !important;
-    text-shadow: none !important;
-}
-
-.light-theme .code-stats {
-    color: #6b7280 !important;
-}
-
-.light-theme #search-input,
-.light-theme .form-group input,
-.light-theme .form-group textarea,
-.light-theme .form-group select,
-.light-theme .setting-item select {
-    background: rgba(255,255,255,0.94) !important;
-    color: #202124 !important;
-    border: 1px solid rgba(0,0,0,0.12) !important;
-}
-
-.light-theme #search-input:focus,
-.light-theme .form-group input:focus,
-.light-theme .form-group textarea:focus,
-.light-theme .form-group select:focus {
-    border-color: rgba(0,122,255,0.45) !important;
-    box-shadow: 0 0 0 3px rgba(0,122,255,0.09);
+/* ==========================================================================
+   26Q3.5 — Light Theme Refinement (Liquid Glass preserved)
+   Keep translucency, backdrop blur, and layered glass surfaces intact.
+   ========================================================================== */
+.light-theme {
+    --light-surface: rgba(255,255,255,.52);
+    --light-surface-strong: rgba(255,255,255,.68);
+    --light-border: rgba(20,30,45,.12);
+    --light-text: #1d2430;
+    --light-muted: #667085;
 }
-
+.light-theme .sidebar,
+.light-theme .snip-card,
 .light-theme .add-panel,
 .light-theme .modal-content {
-    background: rgba(255,255,255,0.94) !important;
-    color: #202124;
-    border: 1px solid rgba(0,0,0,0.09) !important;
-    box-shadow: 0 24px 60px rgba(0,0,0,0.12);
-}
-
-.light-theme .setting-item {
-    background: rgba(0,0,0,0.025);
-    border-color: rgba(0,0,0,0.055);
-}
-
-.light-theme .setting-item p {
-    color: #5f6368 !important;
+    background: var(--light-surface) !important;
+    color: var(--light-text);
+    border-color: var(--light-border) !important;
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    box-shadow: 0 8px 28px rgba(31,41,55,.08), inset 0 1px 0 rgba(255,255,255,.42);
 }
-
-.light-theme .settings-section h4 {
-    color: #007aff;
+.light-theme .main-content,
+.light-theme header { color: var(--light-text); }
+.light-theme .nav-item { color: #475467 !important; }
+.light-theme .nav-item:hover { background: rgba(0,122,255,.08) !important; color: #111827 !important; }
+.light-theme .nav-item.active { background: rgba(0,122,255,.12) !important; color: #0056b3 !important; }
+.light-theme input[type="text"],
+.light-theme textarea,
+.light-theme select,
+.light-theme .search-container input {
+    background: rgba(255,255,255,.42) !important;
+    color: #1d2430 !important;
+    border-color: rgba(20,30,45,.14) !important;
+    backdrop-filter: blur(16px) saturate(160%);
+    -webkit-backdrop-filter: blur(16px) saturate(160%);
 }
-
-.light-theme .close-modal-btn {
-    color: #555 !important;
+.light-theme input::placeholder,
+.light-theme textarea::placeholder { color: #7b8494 !important; }
+.light-theme pre {
+    background: rgba(245,247,250,.48) !important;
+    border-color: rgba(20,30,45,.08) !important;
+    backdrop-filter: blur(14px) saturate(150%);
+    -webkit-backdrop-filter: blur(14px) saturate(150%);
 }
-
-.light-theme .backup-buttons .glass-btn {
-    background: rgba(0,0,0,0.035);
-    color: #202124;
-    border-color: rgba(0,0,0,0.09);
+.light-theme .code-stats { color: #667085 !important; }
+.light-theme .modal-overlay { background: rgba(15,23,42,.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
+.light-theme .settings-section h4 { color: #344054; }
+.light-theme .setting-item p { color: #667085; }
+.light-theme .glass-slider span {
+    color: #344054;
+    background: rgba(255,255,255,.42);
+    border-color: rgba(20,30,45,.10);
+    backdrop-filter: blur(14px) saturate(160%);
+    -webkit-backdrop-filter: blur(14px) saturate(160%);
 }
-
-.light-theme #spotlight-overlay {
-    background: rgba(255,255,255,0.34);
-}
-
 .light-theme .spotlight-window {
-    background: rgba(255,255,255,0.82);
-    border-color: rgba(0,0,0,0.10);
-    box-shadow: 0 25px 60px rgba(0,0,0,0.18);
+    background: rgba(255,255,255,.62) !important;
+    color: #1d2430;
+    border-color: rgba(20,30,45,.12);
+    backdrop-filter: blur(32px) saturate(190%);
+    -webkit-backdrop-filter: blur(32px) saturate(190%);
 }
-
-.light-theme .spotlight-search-wrapper {
-    background: rgba(255,255,255,0.48);
-    border-bottom-color: rgba(0,0,0,0.08);
+.light-theme .spotlight-item { color: #475467; }
+.light-theme .spotlight-item:hover,
+.light-theme .spotlight-item.active { background: rgba(0,122,255,.10); color: #101828; }
+.light-theme #spotlight-results {
+    background: rgba(248,250,252,.46) !important;
+    border-color: rgba(20,30,45,.08) !important;
+    backdrop-filter: blur(18px) saturate(160%);
+    -webkit-backdrop-filter: blur(18px) saturate(160%);
 }
 
-.light-theme #spotlight-input {
-    color: #202124;
-    text-shadow: none;
-}
 
-.light-theme #spotlight-input::placeholder,
-.light-theme .spotlight-icon {
-    color: rgba(32,33,36,0.45);
-}
+/* ==========================================================================
+   26Q3.5 — Subtle 3D Glass Depth
+   No layout movement, no bounce, no generic SaaS hover lift.
+   ========================================================================== */
 
-.light-theme #spotlight-results {
-    background: rgba(245,247,250,0.86) !important;
-    border-top-color: rgba(0,0,0,0.07) !important;
+.snip-card {
+    --card-rotate-x: 0deg;
+    --card-rotate-y: 0deg;
+    --card-glow-x: 50%;
+    --card-glow-y: 50%;
+    position: relative;
+    transform-style: preserve-3d;
+    perspective: 900px;
+    transform: perspective(900px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));
+    transition:
+        transform 160ms cubic-bezier(.2,.8,.2,1),
+        box-shadow 220ms ease,
+        background-color 300ms ease,
+        border-color 300ms ease;
+    overflow: hidden;
 }
 
-.light-theme .spotlight-item {
-    color: rgba(32,33,36,0.72);
+.snip-card::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    background:
+        radial-gradient(
+            circle 180px at var(--card-glow-x) var(--card-glow-y),
+            rgba(255,255,255,.10),
+            transparent 68%
+        );
+    opacity: 0;
+    transition: opacity 220ms ease;
 }
 
-.light-theme .spotlight-item:hover,
-.light-theme .spotlight-item.active {
-    background: rgba(0,122,255,0.09);
-    color: #202124;
+.snip-card:hover::after {
+    opacity: 1;
 }
 
-.light-theme .item-category {
-    background: rgba(0,0,0,0.06);
-    color: rgba(32,33,36,0.55);
+.snip-card > * {
+    position: relative;
+    z-index: 1;
+    transform: translateZ(8px);
 }
 
-.light-theme .spotlight-item.active .item-category {
-    color: #fff;
+.snip-card pre,
+.snip-card .card-actions {
+    transform: translateZ(12px);
 }
 
-.light-theme .spotlight-quick-preview {
-    background: rgba(255,255,255,0.72);
-    border-left-color: rgba(0,0,0,0.08);
+.snip-card:hover {
+    /* Replace the old lift with depth, not movement. */
+    transform: perspective(900px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));
 }
 
-.light-theme ::-webkit-scrollbar-track {
-    background: rgba(0,0,0,0.05);
-}
+@media (prefers-reduced-motion: reduce) {
+    .snip-card {
+        transform: none !important;
+        transition: background-color 300ms ease, border-color 300ms ease;
+    }
 
-.light-theme ::-webkit-scrollbar-thumb {
-    background: rgba(0,0,0,0.16);
-}
+    .snip-card::after {
+        display: none;
+    }
 
-/* Prism Tomorrow is dark by design; keep code readable in the light theme. */
-.light-theme .snip-card pre code .token,
-.light-theme .spotlight-quick-preview pre code .token {
-    text-shadow: none !important;
+    .snip-card > *,
+    .snip-card pre,
+    .snip-card .card-actions {
+        transform: none;
+    }
 }