diff --git a/.agents/skills/blog-post-creation/SKILL.md b/.agents/skills/blog-post-creation/SKILL.md
new file mode 100644
index 0000000..c790dc5
--- /dev/null
+++ b/.agents/skills/blog-post-creation/SKILL.md
@@ -0,0 +1,231 @@
+# Skill: Blog Yazısı Ekleme
+
+> Bu skill, CalmKernel web sitesine yeni bir blog yazısı eklerken izlenmesi gereken
+> adımları içerir. Blog yazıları hem TR hem EN olarak oluşturulmalıdır.
+
+---
+
+## Ön Koşullar
+
+- Mevcut bir blog yazısını referans al: `blog/bigfive-v6.1.0.html`
+- `AGENTS.md` dosyasını oku (dokunulmaz dosyalar, SEO gereksinimleri).
+
+---
+
+## Adımlar
+
+### 1. Dosya Oluştur
+
+1. TR: `blog/[yazı-adi].html`
+2. EN: `en/blog/[yazı-adi].html`
+3. Dosya adı kebab-case, yalnızca ASCII karakterler, Türkçe karakter kullanma.
+
+### 2. Head Bölümü — Blog Yazısı İçin
+
+```html
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>[YAZI BAŞLIĞI] - CalmKernel</title>
+    <meta name="description" content="[YAZI AÇIKLAMASI — max 160 karakter]">
+    <meta name="author" content="Ahmet TANRIKULU">
+    <link rel="canonical" href="https://calmkernel.tr/blog/[yazı-adi].html">
+    <link rel="alternate" hreflang="tr" href="https://calmkernel.tr/blog/[yazı-adi].html">
+    <link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/blog/[yazı-adi].html">
+    <link rel="alternate" hreflang="x-default" href="https://calmkernel.tr/blog/[yazı-adi].html">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/assets/images/calmkernel-icon.svg">
+
+    <!-- Open Graph — blog için og:type="article" -->
+    <meta property="og:type" content="article">
+    <meta property="og:url" content="https://calmkernel.tr/blog/[yazı-adi].html">
+    <meta property="og:title" content="[YAZI BAŞLIĞI] - CalmKernel">
+    <meta property="og:description" content="[AÇIKLAMA]">
+    <meta property="og:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+    <meta property="og:locale" content="tr_TR">
+    <meta property="og:site_name" content="CalmKernel">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="[YAZI BAŞLIĞI] - CalmKernel">
+    <meta name="twitter:description" content="[AÇIKLAMA]">
+    <meta name="twitter:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+
+    <!-- JSON-LD BlogPosting -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "BlogPosting",
+        "headline": "[YAZI BAŞLIĞI]",
+        "description": "[AÇIKLAMA]",
+        "datePublished": "[YYYY-MM-DD]",
+        "dateModified": "[YYYY-MM-DD]",
+        "author": {
+            "@type": "Person",
+            "name": "Ahmet TANRIKULU",
+            "url": "https://github.com/ahm3t0t"
+        },
+        "publisher": {
+            "@type": "Organization",
+            "name": "CalmKernel",
+            "url": "https://calmkernel.tr",
+            "logo": {
+                "@type": "ImageObject",
+                "url": "https://calmkernel.tr/assets/images/calmkernel-icon.svg"
+            }
+        },
+        "mainEntityOfPage": "https://calmkernel.tr/blog/[yazı-adi].html",
+        "inLanguage": "tr"
+    }
+    </script>
+
+    <!-- CSS — blog sayfaları mutlak yol kullanır -->
+    <link rel="stylesheet" href="/assets/css/fonts.css">
+    <link rel="stylesheet" href="/assets/css/font-awesome.min.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/fontello-enqueue.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/fontello-icons.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/bootstrap.min.css">
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <link rel="stylesheet" href="/assets/css/calmkernel-dark-fix.css">
+    <link rel="stylesheet" href="/assets/css/cookie-consent.css">
+    <link rel="stylesheet" href="/assets/css/calmkernel-custom.css">
+    <link rel="stylesheet" href="/assets/css/plugins/swiper-bundle.min.css" media="print" onload="this.media='all'">
+    <noscript>
+        <link rel="stylesheet" href="/assets/css/plugins/swiper-bundle.min.css">
+    </noscript>
+</head>
+```
+
+### 3. Blog İçerik Yapısı
+
+```html
+<main id="main-content">
+    <article>
+        <!-- Breadcrumb -->
+        <div class="breadcrumb">
+            <a href="/">Ana Sayfa</a> &gt; <a href="/#blog">Blog</a> &gt; [Yazı Başlığı]
+        </div>
+
+        <!-- Başlık -->
+        <h1>[YAZI BAŞLIĞI]</h1>
+
+        <!-- Meta bilgileri -->
+        <div class="blog-meta">
+            <span>Yazar: Ahmet TANRIKULU</span>
+            <span>Tarih: [GG Ay YYYY]</span>
+        </div>
+
+        <!-- İçerik bölümleri -->
+        <h2>[Alt Başlık]</h2>
+        <p>[Paragraf]</p>
+
+        <!-- Kod blokları (gerekiyorsa) -->
+        <pre><code>[KOD]</code></pre>
+
+        <!-- Bilgi kutusu -->
+        <div class="info-box">
+            <h3>[Bilgi Başlığı]</h3>
+            <p>[Bilgi içeriği]</p>
+        </div>
+
+        <!-- Linkler kutusu (isteğe bağlı) -->
+        <div class="links-box">
+            <h3>Bağlantılar</h3>
+            <a href="[URL]" target="_blank" rel="noopener">[Link metni]</a>
+        </div>
+
+        <!-- Ana sayfaya dönüş -->
+        <a href="/" class="back-link">Ana Sayfaya Dön</a>
+    </article>
+</main>
+```
+
+### 4. Blog Yazısına Özel CSS
+
+Blog yazıları inline `<style>` kullanır (mevcut örneklere bak: `blog/bigfive-v6.1.0.html`).
+Temel stiller:
+
+- `article` → max-width: 800px, ortalanmış
+- `.breadcrumb` → üst navigasyon
+- `.blog-meta` → yazar ve tarih bilgisi
+- `.highlight-box` → vurgulu bilgi kutusu
+- `.info-box` → bilgi kutusu (turkuaz kenarlık)
+- `.links-box` → bağlantılar kutusu
+- `.back-link` → geri dönüş butonu
+
+**Dark mode override'ları:**
+```css
+.active-body article p { color: #ccc !important; }
+.active-body article h3 { color: #fff !important; }
+.active-body article strong { color: #e6edf3 !important; }
+.active-body .meta { color: #8b949e !important; border-color: #30363d !important; }
+.active-body .highlight-box { background: #1f1f1f !important; border-color: #333 !important; }
+```
+
+### 5. Navigasyon Güncelleme
+
+1. **Mobile menü:** Blog sayfasının dil bağlantısını EN/TR karşılığına yönlendir.
+2. **Header menüsü:** Blog link'lerini `/#blog` veya `/en/#blog` olarak ayarla.
+
+### 6. Sitemap Güncelleme
+
+`sitemap.xml` dosyasına ekle (mevcut blog girişlerinin hemen altına):
+
+```xml
+<url>
+    <loc>https://calmkernel.tr/blog/[yazı-adi].html</loc>
+    <xhtml:link rel="alternate" hreflang="tr" href="https://calmkernel.tr/blog/[yazı-adi].html"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/blog/[yazı-adi].html"/>
+    <lastmod>[YYYY-MM-DD]</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+</url>
+<url>
+    <loc>https://calmkernel.tr/en/blog/[yazı-adi].html</loc>
+    <xhtml:link rel="alternate" hreflang="tr" href="https://calmkernel.tr/blog/[yazı-adi].html"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/blog/[yazı-adi].html"/>
+    <lastmod>[YYYY-MM-DD]</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+</url>
+```
+
+### 7. Ana Sayfa Blog Bölümünü Güncelle
+
+Blog yazısını ana sayfadaki blog bölümüne ekle:
+
+1. `index.html` → `#blog` section'ına yeni blog kartı ekle.
+2. `en/index.html` → aynı yapıda İngilizce versiyonu ekle.
+
+---
+
+## Kontrol Listesi
+
+- [ ] TR dosyası `blog/[yazı-adi].html` oluşturuldu mu?
+- [ ] EN dosyası `en/blog/[yazı-adi].html` oluşturuldu mu?
+- [ ] `og:type` → `article` olarak ayarlandı mı?
+- [ ] JSON-LD `@type` → `BlogPosting` mi?
+- [ ] `datePublished` ve `dateModified` doğru mu?
+- [ ] `author` bilgisi doğru mu?
+- [ ] Hreflang etiketleri (tr, en, x-default) mevcut mu?
+- [ ] Blog-spesifik inline CSS'de dark mode override'ları var mı?
+- [ ] Breadcrumb navigasyonu doğru mu?
+- [ ] Dil değiştirme linki (mobile menü + navigasyon) doğru mu?
+- [ ] `sitemap.xml` güncellendi mi?
+- [ ] Ana sayfa blog bölümüne kart eklendi mi?
+- [ ] `html5validator` yerel olarak çalıştırıldı mı?
+
+---
+
+## Blog Yazısı Farklılıkları (Normal Sayfadan)
+
+| Özellik | Normal Sayfa | Blog Yazısı |
+|---------|-------------|------------|
+| `og:type` | `website` | `article` |
+| JSON-LD `@type` | `WebPage` | `BlogPosting` |
+| JSON-LD ek alanlar | — | `datePublished`, `dateModified`, `author` |
+| `meta name="author"` | — | Gerekli |
+| İçerik yapısı | Section'lar | `<article>` etiketi |
+| CSS | Global | Global + inline `<style>` |
+| Breadcrumb | — | Gerekli |
diff --git a/.agents/skills/dark-mode-css/SKILL.md b/.agents/skills/dark-mode-css/SKILL.md
new file mode 100644
index 0000000..55a305c
--- /dev/null
+++ b/.agents/skills/dark-mode-css/SKILL.md
@@ -0,0 +1,268 @@
+# Skill: Dark Mode CSS Yazma Standartları
+
+> Bu skill, CalmKernel web sitesinde dark mode CSS kuralları yazarken
+> uyulması gereken standartları ve en iyi pratikleri içerir.
+
+---
+
+## Dark Mode Mekanizması
+
+### Nasıl Çalışır?
+
+1. Site varsayılan olarak `<body class="dark">` ile açılır.
+2. `ThemeToggle` modülü (`main.js:1689-1756`) dark/light geçişini yönetir.
+3. Dark mode aktifken body'ye **`active-body`** ve **`dark-mode`** class'ları eklenir.
+4. Kullanıcı tercihi `localStorage` üzerinden saklanır:
+   - `themeMode`: `"active"` (dark) veya `"inactive"` (light)
+   - `darkMode`: `"enabled"` veya `"disabled"`
+5. İlk yüklemede sistem teması (`prefers-color-scheme`) kontrol edilir.
+
+### Class Durumları
+
+| Durum | Body Class'ları |
+|-------|----------------|
+| Light mode | `dark` (yalnızca başlangıç class'ı) |
+| Dark mode | `dark active-body dark-mode` |
+
+---
+
+## CSS Yazma Kuralları
+
+### Temel Kural: `.active-body` Prefix Kullan
+
+Dark mode stillerini **her zaman** `.active-body` prefix'i ile yaz:
+
+```css
+/* DOĞRU — Light mode varsayılan, dark mode override */
+.element {
+    color: #333;
+    background: #fff;
+}
+.active-body .element {
+    color: #e6edf3;
+    background: #1f1f1f;
+}
+```
+
+```css
+/* YANLIŞ — .active-body prefix'i olmadan dark mode yazma */
+.dark .element { ... }        /* YANLIŞ: .dark class'ı her zaman body'de */
+body.dark-mode .element { ... } /* YANLIŞ: tutarsız kullanım */
+[data-theme="dark"] .element { ... } /* YANLIŞ: data attribute yok */
+```
+
+### Nereye Yazmalı?
+
+| Dosya | Ne Zaman Kullan |
+|-------|----------------|
+| `calmkernel-custom.css` | Yeni bileşenler için light + dark mode stilleri |
+| `calmkernel-dark-fix.css` | Temanın dark mode'da eksik bıraktığı düzeltmeler |
+| Inline `<style>` (blog) | Blog yazılarına özel dark mode override'ları |
+
+> **Kural:** `assets/css/style.css` dosyasına **kesinlikle dokunma** (39K+ satır tema CSS'i).
+
+---
+
+## Renk Paleti
+
+### Dark Mode Renkleri
+
+| Kullanım | Renk Kodu | Örnek |
+|----------|-----------|-------|
+| **Arka plan — Ana** | `#0d1117` | Body background |
+| **Arka plan — Kart/kutu** | `#1a1a1a`, `#1f1f1f` | Card, box, highlight |
+| **Arka plan — Aktif/hover** | `#2d2d2d` | Kod blokları, hover state |
+| **Metin — Birincil** | `#e6edf3` | Ana metin, başlıklar |
+| **Metin — İkincil** | `#ccc`, `#adb5bd` | Açıklama metinleri |
+| **Metin — Soluk** | `#8b949e` | Meta bilgiler, placeholder |
+| **Kenarlık** | `#30363d`, `#333` | Border, divider |
+| **Vurgu — Primary** | `#45d0bd` | CTA butonları, linkler |
+| **Vurgu — Link** | `#58a6ff` | Hover link rengi |
+| **Uyarı — Hata** | `#ef6464` | Error state |
+
+### Light Mode Renkleri
+
+| Kullanım | Renk Kodu |
+|----------|-----------|
+| **Arka plan** | `#fff`, `#f5f5f5` |
+| **Metin — Birincil** | `#111`, `#333` |
+| **Metin — İkincil** | `#444`, `#666` |
+| **Kenarlık** | `#e2e2e2` |
+| **Vurgu — Primary** | `#45d0bd` |
+
+---
+
+## Yaygın Kalıplar
+
+### 1. Basit Element Override
+
+```css
+/* Light mode (varsayılan) */
+.card-title {
+    color: #333;
+}
+
+/* Dark mode */
+.active-body .card-title {
+    color: #e6edf3;
+}
+```
+
+### 2. Arka Plan + Metin + Kenarlık
+
+```css
+.info-box {
+    background: #f5f5f5;
+    border: 1px solid #e2e2e2;
+    color: #444;
+}
+
+.active-body .info-box {
+    background: #1f1f1f;
+    border-color: #333;
+    color: #ccc;
+}
+```
+
+### 3. Badge ve Etiketler (Yarı Saydam Arka Plan)
+
+```css
+.badge-custom {
+    background: rgba(69, 208, 189, 0.1);
+    color: #45d0bd;
+}
+
+.active-body .badge-custom {
+    background: rgba(69, 208, 189, 0.2);
+    /* Renk aynı kalabilir veya opaklık artırılabilir */
+}
+```
+
+### 4. Tablo
+
+```css
+.table th {
+    background: #f5f5f5;
+    color: #666;
+}
+.table td {
+    color: #111;
+    border-bottom: 1px solid #e2e2e2;
+}
+
+.active-body .table th {
+    background: #1f1f1f;
+    color: #8b949e;
+}
+.active-body .table td {
+    color: #e6edf3;
+    border-color: #333;
+}
+```
+
+### 5. Kod Blokları
+
+```css
+code {
+    background: #f0f0f0;
+    color: #e65100;
+}
+
+.active-body code {
+    background: #2d2d2d;
+    /* color aynı kalabilir */
+}
+
+pre {
+    background: #1e1e2e;
+    border: 1px solid #313244;
+    color: #cdd6f4;
+}
+/* pre zaten dark — genellikle override gerekmez */
+```
+
+### 6. Logo ve Görseller (Filter Kullan)
+
+```css
+/* Dark mode'da logonun beyaz görünmesi için */
+.active-body img[src*="calmkernel-logo"] {
+    filter: brightness(0) invert(1) brightness(1.1);
+}
+
+/* Sticky header logosu */
+.active-body .sticky-active .header-logo a img {
+    filter: brightness(9);
+}
+```
+
+---
+
+## CSS Variable Kullanımı
+
+Tema bazı CSS variable'ları tanımlar. Dark mode override'larında bunları kullanabilirsin:
+
+```css
+/* Tema tarafından tanımlanan variable'lar */
+.active-body .sticky-active .menu-style1 > ul > li > a {
+    color: var(--color-content-white);
+}
+
+.active-body .sticky-active .menu-style1 > ul > li > a:hover {
+    background-color: var(--color-surface-dark-2);
+}
+```
+
+> **Not:** Tüm CSS variable'ları `style.css` tema dosyasında tanımlanır.
+> Kullanmadan önce DevTools ile mevcut variable'ları kontrol et.
+
+---
+
+## `!important` Kullanımı
+
+### Ne Zaman Kullan?
+
+- Tema CSS'inin specificity'si çok yüksekse ve override edilemiyorsa.
+- Blog yazılarının inline `<style>` bloklarında (düşük specificity).
+
+### Ne Zaman Kullanma?
+
+- Yeni bileşenler yazarken — kendi specificity'ini doğru ayarla.
+- `calmkernel-custom.css`'de mümkün olduğunca kaçın.
+
+### Doğru Kullanım Örneği
+
+```css
+/* Blog inline style — düşük specificity, !important gerekebilir */
+.active-body article p {
+    color: #ccc !important;
+}
+```
+
+---
+
+## Test Kontrol Listesi
+
+CSS değişikliklerinden sonra:
+
+- [ ] Light mode'da doğru görünüyor mu?
+- [ ] Dark mode'da doğru görünüyor mu?
+- [ ] Dark → Light geçişte animasyon düzgün mü? (0.3s transition mevcut)
+- [ ] Mobile'da dark mode doğru çalışıyor mu?
+- [ ] Sticky header dark mode'da okunabilir mi?
+- [ ] Badge/etiketler dark mode'da yeterli kontrast sağlıyor mu?
+- [ ] Görseller dark mode'da uyumlu mu?
+- [ ] `html5validator` geçiyor mu?
+
+---
+
+## Sık Yapılan Hatalar
+
+| Hata | Sonuç | Çözüm |
+|------|-------|-------|
+| `.dark` prefix kullanmak | Her zaman aktif (body'de `dark` class'ı sabit) | `.active-body` kullan |
+| `style.css` düzenlemek | Tema güncellenmesinde kaybolur | Override dosyalarına yaz |
+| `!important` aşırı kullanım | Bakım zorlaşır | Specificity'yi doğru ayarla |
+| Transition eklememek | Ani renk değişimi | Body'deki genel transition yeterli |
+| Sabit renk kodları yerine variable | Tutarsız renkler | Renk paletine uy |
+| `filter` kullanmamak | Dark mode'da logo/ikon görünmez | `brightness` + `invert` kullan |
+| RGBA opaklık düşük | Dark mode'da badge okunmaz | Dark mode'da opaklığı artır |
diff --git a/.agents/skills/html-page-creation/SKILL.md b/.agents/skills/html-page-creation/SKILL.md
new file mode 100644
index 0000000..88c5c99
--- /dev/null
+++ b/.agents/skills/html-page-creation/SKILL.md
@@ -0,0 +1,208 @@
+# Skill: Yeni HTML Sayfası Oluşturma
+
+> Bu skill, CalmKernel web sitesine yeni bir HTML sayfası eklerken izlenmesi gereken
+> adımları ve kontrol listesini içerir.
+
+---
+
+## Ön Koşullar
+
+- `AGENTS.md` dosyasını oku (dokunulmaz dosyalar, override stratejisi).
+- Mevcut bir sayfayı referans olarak aç (örn. `tools.html` veya `premium.html`).
+
+---
+
+## Adımlar
+
+### 1. Dosyayı Oluştur
+
+1. TR versiyonunu root dizinde oluştur: `/yeni-sayfa.html`
+2. EN versiyonunu `/en/yeni-sayfa.html` olarak oluştur.
+3. Dosya adı küçük harf, tire ile ayrılmış olmalı (kebab-case).
+
+### 2. Head Bölümü (Zorunlu Meta Etiketler)
+
+Aşağıdaki tüm etiketler **her sayfada zorunludur**:
+
+```html
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>[SAYFA BAŞLIĞI] - CalmKernel</title>
+    <meta name="description" content="[SAYFA AÇIKLAMASI — max 160 karakter]">
+    <link rel="canonical" href="https://calmkernel.tr/[yeni-sayfa.html]">
+
+    <!-- Hreflang — üç satır zorunlu -->
+    <link rel="alternate" hreflang="tr" href="https://calmkernel.tr/[yeni-sayfa.html]">
+    <link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/[yeni-sayfa.html]">
+    <link rel="alternate" hreflang="x-default" href="https://calmkernel.tr/[yeni-sayfa.html]">
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://calmkernel.tr/[yeni-sayfa.html]">
+    <meta property="og:title" content="[SAYFA BAŞLIĞI] - CalmKernel">
+    <meta property="og:description" content="[AÇIKLAMA]">
+    <meta property="og:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+    <meta property="og:locale" content="tr_TR">
+    <meta property="og:site_name" content="CalmKernel">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="[SAYFA BAŞLIĞI] - CalmKernel">
+    <meta name="twitter:description" content="[AÇIKLAMA]">
+    <meta name="twitter:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+
+    <!-- JSON-LD -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "name": "[SAYFA BAŞLIĞI]",
+        "description": "[AÇIKLAMA]",
+        "url": "https://calmkernel.tr/[yeni-sayfa.html]",
+        "inLanguage": "tr",
+        "publisher": {
+            "@type": "Organization",
+            "name": "CalmKernel",
+            "url": "https://calmkernel.tr",
+            "logo": {
+                "@type": "ImageObject",
+                "url": "https://calmkernel.tr/assets/images/calmkernel-icon.svg"
+            }
+        }
+    }
+    </script>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/assets/images/calmkernel-icon.svg">
+
+    <!-- CSS (sıralama önemli, değiştirme!) -->
+    <link rel="stylesheet" href="/assets/css/fonts.css">
+    <link rel="stylesheet" href="/assets/css/font-awesome.min.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/fontello-enqueue.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/fontello-icons.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/bootstrap.min.css">
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <link rel="stylesheet" href="/assets/css/calmkernel-dark-fix.css">
+    <link rel="stylesheet" href="/assets/css/cookie-consent.css">
+    <link rel="stylesheet" href="/assets/css/calmkernel-custom.css">
+    <link rel="stylesheet" href="/assets/css/plugins/swiper-bundle.min.css" media="print" onload="this.media='all'">
+    <noscript>
+        <link rel="stylesheet" href="/assets/css/plugins/swiper-bundle.min.css">
+    </noscript>
+</head>
+```
+
+### 3. Body Yapısı
+
+```html
+<body class="dark">
+    <!-- 1. Skip link (erişilebilirlik) -->
+    <a href="#main-content" class="skip-link"
+       style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;padding:8px;background:#45d0bd;color:#fff;text-decoration:none;font-weight:bold;">
+        İçeriğe atla
+    </a>
+
+    <!-- 2. Preloader -->
+    <div id="preloader">
+        <div class="loader">
+            <img src="/assets/images/preloader-dark.png" alt="Yükleniyor...">
+        </div>
+    </div>
+
+    <!-- 3. Theme Toggle -->
+    <button id="themeBtn"><i class="far fa-moon"></i></button>
+
+    <!-- 4. Video Modal (boş iframe) -->
+    <div class="video-modal">
+        <div class="video-modal-content">
+            <span class="close-btn">&times;</span>
+            <iframe allow="autoplay; encrypted-media" allowfullscreen></iframe>
+        </div>
+    </div>
+
+    <!-- 5. Side Menu — mevcut sayfadan kopyala -->
+    <!-- 6. Mobile Menu — mevcut sayfadan kopyala -->
+    <!-- 7. Sticky Header — mevcut sayfadan kopyala -->
+    <!-- 8. Normal Header — mevcut sayfadan kopyala -->
+
+    <!-- 9. Ana içerik -->
+    <main id="main-content">
+        <!-- Sayfa içeriği buraya -->
+    </main>
+
+    <!-- 10. Footer — mevcut sayfadan kopyala -->
+
+    <!-- 11. JS (sıralama önemli) -->
+    <script src="/assets/js/vendor/gsap.min.js" defer></script>
+    <script src="/assets/js/vendor/ScrollTrigger.min.js" defer></script>
+    <script src="/assets/js/vendor/lenis.min.js" defer></script>
+    <script src="/assets/js/vendor/swiper-bundle.min.js" defer></script>
+    <script src="/assets/js/bootstrap.min.js" defer></script>
+    <script src="/assets/js/main.js" defer></script>
+    <script src="/assets/js/cookie-consent.js" defer></script>
+</body>
+```
+
+### 4. Navigasyon Güncelleme
+
+1. **Header menüsü:** Yeni sayfayı hem sticky hem normal header'a ekle.
+2. **Mobile menü:** `side-menu2` içindeki `<ul>`'ye ekle.
+3. **Dil bağlantısı:** TR sayfasında EN'ye, EN sayfasında TR'ye link ver.
+
+### 5. Sitemap Güncelleme
+
+`sitemap.xml` dosyasına her iki dil için giriş ekle:
+
+```xml
+<url>
+    <loc>https://calmkernel.tr/yeni-sayfa.html</loc>
+    <xhtml:link rel="alternate" hreflang="tr" href="https://calmkernel.tr/yeni-sayfa.html"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/yeni-sayfa.html"/>
+    <lastmod>[YYYY-MM-DD]</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+</url>
+<url>
+    <loc>https://calmkernel.tr/en/yeni-sayfa.html</loc>
+    <xhtml:link rel="alternate" hreflang="tr" href="https://calmkernel.tr/yeni-sayfa.html"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/yeni-sayfa.html"/>
+    <lastmod>[YYYY-MM-DD]</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+</url>
+```
+
+---
+
+## Kontrol Listesi
+
+Sayfayı commit etmeden önce kontrol et:
+
+- [ ] `<html lang="tr">` (veya `"en"`) doğru mu?
+- [ ] `<title>` ve `<meta name="description">` dolu mu?
+- [ ] `<link rel="canonical">` doğru URL'yi gösteriyor mu?
+- [ ] 3 hreflang etiketi (tr, en, x-default) mevcut mu?
+- [ ] Open Graph etiketleri (og:type, og:url, og:title, og:description, og:image, og:locale, og:site_name) tam mı?
+- [ ] Twitter Card etiketleri tam mı?
+- [ ] JSON-LD script bloğu var mı?
+- [ ] Favicon `<link>` etiketi var mı?
+- [ ] CSS dosyaları doğru sırada yükleniyor mu?
+- [ ] `<body class="dark">` mevcut mu?
+- [ ] Skip link (erişilebilirlik) var mı?
+- [ ] Preloader, ThemeBtn, Video Modal mevcut mu?
+- [ ] Header ve footer mevcut sayfalarla tutarlı mı?
+- [ ] JS dosyaları doğru sırada, `defer` ile yükleniyor mu?
+- [ ] Cookie consent JS son sırada mı?
+- [ ] EN versiyonu da oluşturuldu mu?
+- [ ] `sitemap.xml` güncellendi mi?
+- [ ] `html5validator` yerel olarak çalıştırıldı mı?
+
+---
+
+## Notlar
+
+- CSS dosyası sırası kritiktir: `style.css` > `calmkernel-dark-fix.css` > `cookie-consent.css` > `calmkernel-custom.css`
+- Blog dışı sayfalar için `assets/css/` yollarını root'tan veya `/en/` altındaki dosyadan göreceli ya da mutlak yol ile kullan.
+- Blog sayfaları `/assets/` mutlak yol kullanır (alt dizinde oldukları için).
+- `og:locale` değeri TR için `tr_TR`, EN için `en_US` olmalı.
diff --git a/.agents/skills/i18n-sync/SKILL.md b/.agents/skills/i18n-sync/SKILL.md
new file mode 100644
index 0000000..8e3e81d
--- /dev/null
+++ b/.agents/skills/i18n-sync/SKILL.md
@@ -0,0 +1,151 @@
+# Skill: TR/EN Sayfa Eşitleme (i18n Sync)
+
+> Bu skill, CalmKernel web sitesinde Türkçe ve İngilizce sayfaların
+> senkronizasyonunu sağlamak için izlenmesi gereken kuralları içerir.
+
+---
+
+## Genel Kurallar
+
+1. **Her TR sayfasının bir EN karşılığı olmalıdır** (ve tersi).
+2. TR sayfaları root dizinde (`/`), EN sayfaları `/en/` altında bulunur.
+3. Sayfa yapısı (HTML iskelet, section sırası, class isimleri) **birebir aynı** olmalıdır.
+4. Yalnızca metin içerikleri ve dil-spesifik meta etiketler farklılaşır.
+
+---
+
+## Dosya Eşleme Tablosu
+
+| TR Dosya | EN Dosya |
+|----------|----------|
+| `/index.html` | `/en/index.html` |
+| `/tools.html` | `/en/tools.html` |
+| `/premium.html` | `/en/premium.html` |
+| `/privacy-policy.html` | `/en/privacy-policy.html` |
+| `/404.html` | `/en/404.html` |
+| `/blog/[dosya].html` | `/en/blog/[dosya].html` |
+
+---
+
+## Eşitleme Kontrol Listesi
+
+Bir sayfada değişiklik yaptığında diğer dil versiyonunda da güncelle:
+
+### 1. Meta Etiketler
+
+| Etiket | TR | EN |
+|--------|----|----|
+| `<html lang="">` | `tr` | `en` |
+| `<title>` | Türkçe başlık | İngilizce başlık |
+| `<meta name="description">` | Türkçe açıklama | İngilizce açıklama |
+| `<link rel="canonical">` | `https://calmkernel.tr/sayfa.html` | `https://calmkernel.tr/en/sayfa.html` |
+| `og:url` | TR URL | EN URL |
+| `og:title` | Türkçe | İngilizce |
+| `og:description` | Türkçe | İngilizce |
+| `og:locale` | `tr_TR` | `en_US` |
+| `twitter:title` | Türkçe | İngilizce |
+| `twitter:description` | Türkçe | İngilizce |
+| JSON-LD `inLanguage` | `tr` | `en` |
+| JSON-LD `headline/name` | Türkçe | İngilizce |
+
+### 2. Hreflang (Her İki Sayfada da Aynı)
+
+```html
+<!-- TR sayfasında -->
+<link rel="alternate" hreflang="tr" href="https://calmkernel.tr/sayfa.html">
+<link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/sayfa.html">
+<link rel="alternate" hreflang="x-default" href="https://calmkernel.tr/sayfa.html">
+
+<!-- EN sayfasında (aynı hreflang seti) -->
+<link rel="alternate" hreflang="tr" href="https://calmkernel.tr/sayfa.html">
+<link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/sayfa.html">
+<link rel="alternate" hreflang="x-default" href="https://calmkernel.tr/sayfa.html">
+```
+
+> **Dikkat:** `x-default` her zaman TR URL'sini gösterir (birincil dil).
+
+### 3. Navigasyon
+
+| Bileşen | TR Sayfası | EN Sayfası |
+|---------|-----------|-----------|
+| Menü metinleri | Türkçe (`Projeler`, `Araçlar`, `Blog`, `Hakkında`) | İngilizce (`Projects`, `Tools`, `Blog`, `About`) |
+| Dil değiştirme linki | `<a href="/en/[sayfa]">EN</a>` | `<a href="/[sayfa]">TR</a>` |
+| Logo linki | `/` | `/en/` |
+| Side menu iletişim | `İletişim`, `Türkiye` | `Contact`, `Turkey` |
+| Side menu kapatma | `kapat` | `close` |
+| Mobile menu | Türkçe linkler | İngilizce linkler |
+
+### 4. Skip Link
+
+```html
+<!-- TR -->
+<a href="#main-content" class="skip-link" ...>İçeriğe atla</a>
+
+<!-- EN -->
+<a href="#main-content" class="skip-link" ...>Skip to content</a>
+```
+
+### 5. Preloader Alt Text
+
+```html
+<!-- TR -->
+<img src="/assets/images/preloader-dark.png" alt="Yükleniyor...">
+
+<!-- EN -->
+<img src="/assets/images/preloader-dark.png" alt="Loading...">
+```
+
+### 6. Footer ve İletişim
+
+- Footer metinleri dile göre çevrilmeli.
+- E-posta adresleri, GitHub linkleri aynı kalır.
+- `aria-label` değerleri dile göre çevrilmeli.
+
+---
+
+## İçerik Değişikliği Yapılınca
+
+1. TR sayfasında bir bölüm eklenirse/silinirse → EN sayfasında da aynı yapısal değişiklik yapılmalı.
+2. Yeni bir `<section>` eklendiyse → EN versiyonundaki metinler İngilizce olarak çevrilmeli.
+3. CSS class'ları, id'ler ve HTML yapısı iki dilde **birebir aynı** olmalı.
+4. Görsel (`<img>`) `alt` text'leri dile uygun olmalı.
+
+---
+
+## Sitemap Eşitleme
+
+Her yeni sayfa için `sitemap.xml`'e **iki giriş** ekle (TR + EN), her ikisinde de karşılıklı `xhtml:link` olmalı:
+
+```xml
+<url>
+    <loc>https://calmkernel.tr/sayfa.html</loc>
+    <xhtml:link rel="alternate" hreflang="tr" href="https://calmkernel.tr/sayfa.html"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/sayfa.html"/>
+    <lastmod>[YYYY-MM-DD]</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+</url>
+<url>
+    <loc>https://calmkernel.tr/en/sayfa.html</loc>
+    <xhtml:link rel="alternate" hreflang="tr" href="https://calmkernel.tr/sayfa.html"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/sayfa.html"/>
+    <lastmod>[YYYY-MM-DD]</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+</url>
+```
+
+---
+
+## Sık Yapılan Hatalar
+
+| Hata | Sonuç | Çözüm |
+|------|-------|-------|
+| Hreflang eksik | Google yanlış dil versiyonunu gösterir | Her sayfada 3 hreflang olmalı |
+| `x-default` EN'yi gösteriyor | Yanlış varsayılan dil | `x-default` her zaman TR URL'sini göstermeli |
+| Menüde dil linki yanlış | Kullanıcı yanlış sayfaya gider | TR→EN ve EN→TR linkleri kontrol et |
+| `og:locale` yanlış | Sosyal medya paylaşımlarında yanlış dil | TR: `tr_TR`, EN: `en_US` |
+| `<html lang="">` yanlış | SEO ve erişilebilirlik sorunu | TR: `tr`, EN: `en` |
+| Yapısal farklılık | Tutarsız kullanıcı deneyimi | HTML yapısı birebir aynı olmalı |
+| `canonical` yanlış | SEO duplicate content | Her sayfada kendi URL'sini göstermeli |
+| JSON-LD `inLanguage` eksik | Schema.org hatası | TR: `"tr"`, EN: `"en"` |
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..bbecb8a
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,440 @@
+# AGENTS.md — CalmKernel Statik Web Sitesi
+
+> Bu dosya, AI asistanlarının (Devin, Claude Code vb.) bu repo üzerinde çalışırken
+> uyması gereken kuralları ve mimari bilgileri içerir.
+
+---
+
+## 1. Proje Özeti
+
+| Alan | Değer |
+|------|-------|
+| **Repo** | `CalmKernelTR/calmkerneltr.github.io` |
+| **Domain** | `calmkernel.tr` |
+| **Tür** | Statik web sitesi (GitHub Pages) |
+| **Tema** | Aiero IT Services (index13) — Dark mode varsayılan |
+| **Diller** | Türkçe (birincil, `/`), İngilizce (ikincil, `/en/`) |
+| **Stack** | Bootstrap 5, GSAP + ScrollTrigger, Swiper, Lenis, vanilla JS |
+| **Tipografi** | Sora + Manrope (self-hosted WOFF2, GDPR/KVKK uyumlu) |
+| **Renkler** | Primary: `#45d0bd` (turkuaz), Secondary: `#ef6464` (kırmızı) |
+| **CI** | html5validator + Lighthouse CI (`.github/workflows/ci.yml`) |
+
+---
+
+## 2. Dizin Yapısı
+
+```
+calmkerneltr.github.io/
+├── index.html                  # Ana sayfa (TR)
+├── tools.html                  # Araçlar sayfası (TR)
+├── premium.html                # Premium hizmetler (TR)
+├── privacy-policy.html         # KVKK/Gizlilik politikası (TR)
+├── 404.html                    # Hata sayfası (TR)
+├── blog/
+│   ├── bigfive-v6.1.0.html     # Blog yazısı (TR)
+│   └── edition-methodology.html
+├── en/                         # İngilizce versiyonlar (aynı yapı)
+│   ├── index.html
+│   ├── tools.html
+│   ├── premium.html
+│   ├── privacy-policy.html
+│   ├── 404.html
+│   └── blog/
+│       ├── bigfive-v6.1.0.html
+│       └── edition-methodology.html
+├── assets/
+│   ├── css/
+│   │   ├── style.css               # ❌ DOKUNMA — Aiero tema (39K+ satır)
+│   │   ├── calmkernel-custom.css    # ✅ Custom override dosyası
+│   │   ├── calmkernel-dark-fix.css  # ✅ Dark mode düzeltmeleri
+│   │   ├── cookie-consent.css       # ✅ Cookie banner stilleri
+│   │   ├── fonts.css                # ✅ Self-hosted font tanımları
+│   │   ├── font-awesome.min.css     # ❌ DOKUNMA — vendor
+│   │   └── plugins/                 # ❌ DOKUNMA — vendor (Bootstrap, Swiper, Fontello)
+│   ├── js/
+│   │   ├── main.js                  # ⚠️ Tema + custom JS (dikkatli düzenle)
+│   │   ├── cookie-consent.js        # ✅ Cookie consent mekanizması
+│   │   ├── bootstrap.min.js         # ❌ DOKUNMA — vendor
+│   │   └── vendor/                  # ❌ DOKUNMA — vendor (GSAP, Lenis, Swiper)
+│   ├── fonts/                       # Self-hosted WOFF2 fontlar
+│   └── images/                      # Görseller, logolar, og:image
+├── robots.txt                  # AI bot engelleme dahil
+├── sitemap.xml                 # XML sitemap (hreflang destekli)
+├── CNAME                       # Custom domain: calmkernel.tr
+├── .nojekyll                   # Jekyll devre dışı
+├── .github/
+│   ├── workflows/ci.yml        # CI pipeline
+│   └── CODEOWNERS              # @ahm3t0t
+└── .REPOMAP.md                 # Repo haritası
+```
+
+---
+
+## 3. DOKUNULMAZ Dosyalar (Kesinlikle Değiştirme)
+
+Aşağıdaki dosyalar tema veya vendor kaynaklarıdır. **Hiçbir koşulda düzenlenmemelidir**:
+
+| Dosya | Neden |
+|-------|-------|
+| `assets/css/style.css` | Aiero tema CSS'i (~39K satır). Güncelleme tema paketinden gelir. |
+| `assets/css/font-awesome.min.css` | Font Awesome — CDN yerine lokal, minified. |
+| `assets/css/plugins/*.css` | Bootstrap, Swiper, Fontello — vendor dosyaları. |
+| `assets/js/bootstrap.min.js` | Bootstrap JS — vendor. |
+| `assets/js/vendor/*.js` | GSAP, ScrollTrigger, Lenis, Swiper — vendor. |
+
+> **Kural:** Tema stillerini değiştirmek istiyorsan `calmkernel-custom.css` veya
+> `calmkernel-dark-fix.css` dosyasına override yaz.
+
+---
+
+## 4. Override Stratejisi
+
+Tema dosyalarına dokunmadan özelleştirme yapmak için:
+
+### CSS Override Dosyaları
+
+| Dosya | Amaç |
+|-------|------|
+| `calmkernel-custom.css` | Genel özelleştirmeler: badge stilleri, proje kartları, tema butonu |
+| `calmkernel-dark-fix.css` | Dark mode'da temanın eksik bıraktığı düzeltmeler (sticky header vb.) |
+| `cookie-consent.css` | Cookie consent banner stilleri |
+
+### Override Kuralları
+
+1. **Yeni CSS kuralı eklerken** `calmkernel-custom.css` kullan.
+2. **Dark mode düzeltmesi** için `calmkernel-dark-fix.css` kullan.
+3. Selector specificity yeterli değilse `!important` kullanabilirsin ama minimize et.
+4. Yeni bir CSS dosyası oluşturmak yerine mevcut override dosyalarına ekle.
+5. Her override'ın üstüne yorum satırı ile neyi düzelttiğini yaz.
+
+### JS Kuralları
+
+- `main.js` hem tema hem custom kodu içerir. Düzenleme yaparken mevcut modül yapısına uy.
+- Yeni JS eklerken `main.js` içindeki `DOMContentLoaded` bloğuna veya ayrı bir modül olarak ekle.
+- Vendor JS dosyalarına (`vendor/` altı) kesinlikle dokunma.
+
+---
+
+## 5. Dark Mode Kuralları
+
+Site varsayılan olarak dark modda açılır (`<body class="dark">`).
+
+### Mekanizma
+
+1. `ThemeToggle` modülü (`main.js:1689-1756`) dark mode'u yönetir.
+2. Dark mode aktifken body'ye `active-body` ve `dark-mode` class'ları eklenir.
+3. Kullanıcı tercihi `localStorage` üzerinden `themeMode` ve `darkMode` key'leri ile saklanır.
+4. Sistem teması (`prefers-color-scheme`) otomatik algılanır.
+
+### CSS'de Dark Mode Yazarken
+
+```css
+/* Dark mode'da bir elementi hedeflemek için: */
+.active-body .hedef-element {
+    color: #e6edf3;
+    background: #1f1f1f;
+}
+
+/* Light mode varsayılan, dark mode override: */
+.hedef-element {
+    color: #333;           /* light mode */
+}
+.active-body .hedef-element {
+    color: #e6edf3;        /* dark mode */
+}
+```
+
+### Renk Paleti (Dark Mode)
+
+| Kullanım | Renk |
+|----------|------|
+| Arka plan (koyu) | `#0d1117`, `#1a1a1a`, `#1f1f1f` |
+| Metin (açık) | `#e6edf3`, `#ccc`, `#adb5bd` |
+| İkincil metin | `#8b949e` |
+| Kenarlık | `#30363d`, `#333` |
+| Vurgu (primary) | `#45d0bd` |
+| Bağlantı | `#58a6ff` |
+| Kod arka planı | `#2d2d2d` |
+
+---
+
+## 6. SEO Gereksinimleri
+
+Her HTML sayfasında aşağıdakiler **zorunludur**:
+
+### Head Meta Etiketleri
+
+```html
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>[Sayfa Başlığı] - CalmKernel</title>
+<meta name="description" content="[Açıklama]">
+<link rel="canonical" href="https://calmkernel.tr/[sayfa-yolu]">
+```
+
+### Hreflang (Dil Bağlantıları)
+
+```html
+<link rel="alternate" hreflang="tr" href="https://calmkernel.tr/[sayfa-yolu]">
+<link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/[sayfa-yolu]">
+<link rel="alternate" hreflang="x-default" href="https://calmkernel.tr/[sayfa-yolu]">
+```
+
+### Open Graph
+
+```html
+<meta property="og:type" content="website"> <!-- veya "article" blog için -->
+<meta property="og:url" content="https://calmkernel.tr/[sayfa-yolu]">
+<meta property="og:title" content="[Başlık]">
+<meta property="og:description" content="[Açıklama]">
+<meta property="og:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+<meta property="og:locale" content="tr_TR"> <!-- veya en_US -->
+<meta property="og:site_name" content="CalmKernel">
+```
+
+### Twitter Card
+
+```html
+<meta name="twitter:card" content="summary">
+<meta name="twitter:title" content="[Başlık]">
+<meta name="twitter:description" content="[Açıklama]">
+<meta name="twitter:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+```
+
+### JSON-LD (Yapılandırılmış Veri)
+
+- Ana sayfalar: `@type: "Organization"`
+- Blog yazıları: `@type: "BlogPosting"` (datePublished, dateModified, author zorunlu)
+- Tüm sayfalarda `publisher` bilgisi olmalı.
+
+---
+
+## 7. KVKK / Gizlilik Uyumluluğu
+
+### Cookie Consent
+
+- `cookie-consent.js` + `cookie-consent.css` ile yönetilir.
+- Yalnızca teknik çerezler (Cloudflare) kullanılır — analiz/izleme çerezi **YOK**.
+- Banner, `localStorage` key `ck_cookie_consent` ile kontrol edilir.
+- Dil otomatik algılanır (`document.documentElement.lang`).
+
+### Self-Hosted Fontlar
+
+- Google Fonts **kullanılmaz** — GDPR/KVKK uyumluluğu için.
+- Fontlar `assets/fonts/` altında WOFF2 formatında.
+- `fonts.css` dosyasında `@font-face` tanımları.
+
+### AI Bot Engelleme
+
+`robots.txt` dosyasında aşağıdaki botlar engellenir:
+- GPTBot, ChatGPT-User, Google-Extended, CCBot, anthropic-ai, Claude-Web
+
+### Harici Kaynak Kullanmama Politikası
+
+- CDN'den CSS/JS yükleme — tüm kaynaklar lokal.
+- Harici font servisleri kullanma.
+- Üçüncü parti analiz/izleme script'i ekleme.
+
+---
+
+## 8. i18n (Çoklu Dil) Kuralları
+
+### Yapı
+
+- Türkçe sayfalar: `/` (root)
+- İngilizce sayfalar: `/en/`
+- Her TR sayfasının bir EN karşılığı olmalı (ve tersi).
+
+### Yeni Sayfa Eklerken
+
+1. TR versiyonunu root'ta oluştur.
+2. EN versiyonunu `/en/` altında oluştur.
+3. Her iki sayfaya da karşılıklı `hreflang` etiketleri ekle.
+4. `sitemap.xml`'e her iki URL'yi de `xhtml:link` ile ekle.
+5. Navigasyon menülerinde dil değiştirme bağlantısını güncelle.
+
+### Dil Değiştirme Bağlantıları
+
+- TR sayfalarında: `<a href="/en/[sayfa]">EN</a>`
+- EN sayfalarında: `<a href="/[sayfa]">TR</a>`
+- Blog sayfalarında: `<a href="/en/blog/[dosya]">EN</a>` / `<a href="/blog/[dosya]">TR</a>`
+
+---
+
+## 9. CI Pipeline
+
+### html5validator
+
+```bash
+html5validator --root . --ignore-re 'background-clip'
+```
+
+- Tüm HTML dosyalarını doğrular.
+- `background-clip` uyarısı göz ardı edilir (tema CSS'i ile ilgili).
+
+### Lighthouse CI
+
+```bash
+lhci autorun \
+  --collect.staticDistDir=. \
+  --collect.url=http://localhost/index.html \
+  --collect.url=http://localhost/tools.html \
+  --collect.url=http://localhost/premium.html \
+  --collect.url=http://localhost/en/index.html \
+  --collect.url=http://localhost/en/tools.html \
+  --collect.url=http://localhost/en/premium.html \
+  --assert.assertions.categories:accessibility=warn \
+  --assert.assertions.categories:best-practices=warn \
+  --assert.assertions.categories:seo=warn
+```
+
+- Accessibility, Best Practices, SEO kategorileri `warn` seviyesinde.
+- Raporlar artifact olarak 14 gün saklanır.
+
+### Yerel Test
+
+```bash
+# Statik sunucu ile önizleme
+python -m http.server 8000
+# veya
+npx serve .
+```
+
+---
+
+## 10. HTML Sayfa Şablonu
+
+Yeni bir sayfa oluştururken bu yapıyı kullan:
+
+```html
+<!DOCTYPE html>
+<html lang="tr"> <!-- veya "en" -->
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>[BAŞLIK] - CalmKernel</title>
+    <meta name="description" content="[AÇIKLAMA]">
+    <link rel="canonical" href="https://calmkernel.tr/[YOL]">
+    <link rel="alternate" hreflang="tr" href="https://calmkernel.tr/[TR-YOL]">
+    <link rel="alternate" hreflang="en" href="https://calmkernel.tr/en/[EN-YOL]">
+    <link rel="alternate" hreflang="x-default" href="https://calmkernel.tr/[TR-YOL]">
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://calmkernel.tr/[YOL]">
+    <meta property="og:title" content="[BAŞLIK]">
+    <meta property="og:description" content="[AÇIKLAMA]">
+    <meta property="og:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+    <meta property="og:locale" content="tr_TR"> <!-- veya en_US -->
+    <meta property="og:site_name" content="CalmKernel">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="[BAŞLIK]">
+    <meta name="twitter:description" content="[AÇIKLAMA]">
+    <meta name="twitter:image" content="https://calmkernel.tr/assets/images/og-preview.png">
+
+    <!-- JSON-LD -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "name": "[BAŞLIK]",
+        "url": "https://calmkernel.tr/[YOL]",
+        "publisher": {
+            "@type": "Organization",
+            "name": "CalmKernel",
+            "url": "https://calmkernel.tr"
+        }
+    }
+    </script>
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/assets/images/calmkernel-icon.svg">
+
+    <!-- CSS (sıralama önemli) -->
+    <link rel="stylesheet" href="/assets/css/fonts.css">
+    <link rel="stylesheet" href="/assets/css/font-awesome.min.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/fontello-enqueue.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/fontello-icons.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="/assets/css/plugins/bootstrap.min.css">
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <link rel="stylesheet" href="/assets/css/calmkernel-dark-fix.css">
+    <link rel="stylesheet" href="/assets/css/cookie-consent.css">
+    <link rel="stylesheet" href="/assets/css/calmkernel-custom.css">
+    <link rel="stylesheet" href="/assets/css/plugins/swiper-bundle.min.css" media="print" onload="this.media='all'">
+    <noscript>
+        <link rel="stylesheet" href="/assets/css/plugins/swiper-bundle.min.css">
+    </noscript>
+</head>
+
+<body class="dark">
+    <!-- Skip link (erişilebilirlik) -->
+    <a href="#main-content" class="skip-link" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;padding:8px;background:#45d0bd;color:#fff;text-decoration:none;font-weight:bold;">
+        İçeriğe atla  <!-- veya "Skip to content" EN için -->
+    </a>
+
+    <!-- Preloader -->
+    <div id="preloader">
+        <div class="loader">
+            <img src="/assets/images/preloader-dark.png" alt="Yükleniyor...">
+        </div>
+    </div>
+
+    <!-- Theme Toggle Button -->
+    <button id="themeBtn"><i class="far fa-moon"></i></button>
+
+    <!-- [HEADER — mevcut sayfalardan kopyala] -->
+    <!-- [SAYFA İÇERİĞİ] -->
+    <!-- [FOOTER — mevcut sayfalardan kopyala] -->
+
+    <!-- JS (sıralama önemli) -->
+    <script src="/assets/js/vendor/gsap.min.js" defer></script>
+    <script src="/assets/js/vendor/ScrollTrigger.min.js" defer></script>
+    <script src="/assets/js/vendor/lenis.min.js" defer></script>
+    <script src="/assets/js/vendor/swiper-bundle.min.js" defer></script>
+    <script src="/assets/js/bootstrap.min.js" defer></script>
+    <script src="/assets/js/main.js" defer></script>
+    <script src="/assets/js/cookie-consent.js" defer></script>
+</body>
+
+</html>
+```
+
+---
+
+## 11. Commit Kuralları
+
+- Conventional Commits kullan: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`
+- Commit mesajları İngilizce veya Türkçe olabilir.
+- `main` branch'e doğrudan push yapma — PR aç.
+- PR'lar CI'dan geçmeli (html5validator + Lighthouse).
+
+---
+
+## 12. Sık Yapılan Hatalar
+
+| Hata | Çözüm |
+|------|-------|
+| `style.css` düzenleme | `calmkernel-custom.css` kullan |
+| Vendor JS düzenleme | Yapma. Custom kodu `main.js`'e ekle |
+| Hreflang eksik | Her sayfada TR + EN + x-default olmalı |
+| OG image eksik | `og-preview.png` kullan |
+| CDN bağlantısı ekleme | Lokal dosya kullan, CDN yasak |
+| Google Fonts import | `fonts.css` ile self-hosted kullan |
+| Dark mode prefix unutma | `.active-body` prefix'i zorunlu |
+| sitemap.xml güncellememek | Her yeni sayfa sitemap'e eklenmeli |
+
+---
+
+## 13. Skill Dosyaları
+
+Detaylı görev rehberleri `.agents/skills/` altında:
+
+| Skill | Dosya | Açıklama |
+|-------|-------|----------|
+| HTML Sayfa Oluşturma | `.agents/skills/html-page-creation/SKILL.md` | Yeni sayfa ekleme adımları |
+| i18n Eşitleme | `.agents/skills/i18n-sync/SKILL.md` | TR/EN sayfa eşitleme kuralları |
+| Blog Yazısı Ekleme | `.agents/skills/blog-post-creation/SKILL.md` | Blog yazısı oluşturma rehberi |
+| Dark Mode CSS | `.agents/skills/dark-mode-css/SKILL.md` | Dark mode CSS yazma standartları |
