ares/belgeler/admin_panel.md

You are an AI developer assistant. Your task is to generate a complete admin panel scaffold (HTML templates, static assets and server-side route stubs) for a Go Fiber project. Use only the following frontend libraries already available in the project dependencies: Alpine.js, Bootstrap 5, HTMX, jQuery. Do not add other frameworks. Produce code artifacts described in the "Outputs" section below.

Constraints & requirements (önemli)
- Kullanılan frontend kütüphaneleri: Alpine.js (v3), HTMX, Bootstrap 5, jQuery — bunları  proje /public üzerinden kullan.
- Tema: Koyu ve aydın (dark/light) destekli olacak. Kullanıcı temayı değiştirdiğinde tercih localStorage'da saklansın ve sayfa yenilendiğinde korunmalı.
- Layout: Sol sabit (desktop) sidebar; mobilde off-canvas veya slide-in davranışı. Üstte sticky header (navbar) — hep görünür. Ana içerik HTMX ile parçalar halinde yüklensin (partials/fragments).
- Login sayfası: Cloudflare Turnstile ile korumalı. Turnstile için sitekey ve secret key placeholder kullanılacak (örneğin: YOUR_TURNSTILE_SITEKEY, YOUR_TURNSTILE_SECRET). Login formu HTMX ile POST gönderecek, sunucu Turnstile doğrulaması yapacak.
- Accessibility: ARIA nitelikleri eklensin, klavye navigasyonu çalışsın, renk kontrastı erişilebilir seviyede olsun.
- Responsive: Desktop / tablet / mobile uyumlu olmalı.
- Minimal JS: Alpine.js ile UI state yönetimi (tema toggle, mobil sidebar), HTMX ile partial yükleme, küçük helper JS dosyası için jQuery veya vanilla kullanılabilir. Büyük bundler veya build pipeline gerektirmeyecek.
- Security: CSRF, XSS ve session güvenliği için sunucu tarafı notları verilecek (CSRF token uygulaması önerisi, Turnstile server-side doğrulama, secure cookie flags, rate limiting).
- Dosya/dizin yapısı: templates/ (HTML şablonları), public/css, public/js, public/assets. Server tarafı Go Fiber rotaları ve basit handler açıklamaları verilecek (kod değil; hangi endpoint ne döner).

Görsel / UX istekleri
- Tema değişimi için hem simge hem metin olacak (ör. güneş/ay). Geçiş animasyonu küçük (0.2s - 0.35s).
- Sidebar: ikon + etiket, aktif öğe vurgulu, mümkünse collapse/expand (yalnızca genişlik daraltıldığında).
- Header: sol marka, ortada opsiyonel breadcrumb (isteğe bağlı), sağda tema toggle ve kullanıcı dropdown.
- İçerik alanı: kart bazlı, boşluklar (padding/margin) dengeli.
- Animasyonlar: HTMX swap sırasında fade veya slide geçişi (kısa).
- Renk paleti: net iki palet tanımı (aydın için açık nötr arka plan + mavi aksan; koyu için koyu mavi/şeftali aksan). Renkler CSS custom properties (CSS değişkenleri) ile tanımlansın.

Girdi (input)
- ./public Alpine.js, Bootstrap, HTMX, jQuery (mevcut).
- Kullanıcı sağlayacak: Cloudflare Turnstile sitekey/secret (placeholder bırakılacak).
- Sunucu: Go Fiber (kullanıcı Fiber projesine kolayca entegre edebilsin).

Outputs — AI'nin üretmesi gerekenler (tam liste)
1. Temel layout şablonu (templates/layout.html veya .tmpl):
    - ./public/assets (Bootstrap CSS/JS, HTMX, Alpine, jQuery, Turnstile script).
    - Body: sticky header, sol sidebar, main content container (#main-content) — HTMX hedefi.
    - Tema yönetimi için Alpine veri nesnesi referansları (tema toggle, mobile sidebar kontrol).
    - Ana layout'ta HTMX ile fragment yüklemeye uygun linkler (hx-get, hx-target="#main-content", hx-swap).

2. Login şablonu (templates/login.html):
    - Cloudflare Turnstile widget (data-sitekey placeholder).
    - Form HTMX ile POST atacak (hx-post="/login", hx-target="#login-feedback" vb.).
    - Başarı/hata fragment'leri için sunucu tarafı cevap formatı belirtilecek.

3. Örnek HTMX fragment'leri (templates/fragments/*):
    - dashboard fragment
    - users list fragment
    - settings fragment
      (her fragment minimal içerik, HTMX swap ile çalışacak biçimde)

4. public/js/main.js (küçük açıklama, içerik oluşturulacak):
    - Alpine tema manager yapısı (isDark reactive, save/load localStorage, toggle fonksiyonları).
    - Mobile sidebar toggle fonksiyonları.
    - HTMX üzerinden fragment yüklenirken küçük loading indicator veya class ekleme.
    - Turnstile ile integration notu (widget render ve token gönderimi; token'ın login formu ile nasıl dahil olacağı).

5. public/css/theme.css:
    - CSS custom properties hem light hem dark için.
    - Sidebar, header, card stilleri, responsive medya sorguları.
    - Küçük animasyonlar (fade, transition).

6. Sunucu tarafı: Go Fiber rotaları listesi ve davranış açıklamaları (kod değil, endpoint + beklenen request/response):
    - GET /login -> login şablonunu döndür
    - POST /login -> Turnstile token doğrulaması + credentials doğrulama; başarılıysa session cookie oluştur ve /admin yönlendir (HTMX için fragment veya redirect)
    - GET /admin -> layout render (veya layout + default fragment)
    - GET /admin/content/dashboard -> dashboard fragment (HTMX hedefi)
    - GET /admin/content/users -> users fragment
    - GET /admin/content/settings -> settings fragment
    - GET /logout -> oturumu sonlandır
    - admin middleware ye agit tum rotalar
    - (Opsiyonel) POST /api/users/* gibi API uç noktaları (JSON) — HTMX yerine AJAX gerekeceğinde kullanılacak

7. Güvenlik & operasyonel notlar (dokümantasyon/metin):
    - Turnstile: server-side doğrulama nasıl yapılır (istek: secret ve token ile Cloudflare API endpoint çağrısı; doğrulama şartı).
    - CSRF: HTMX formlarında CSRF token nasıl geçilir (hidden input veya header); Fiber için örnek header adı ve cookie ilişkisi (kod değil açıklama).
    - Session yönetimi: secure, httpOnly, SameSite=strict/ Lax önerisi.
    - Rate limiting önerisi (ör. login için).
    - Input validation and output escaping reminder.

8. Acceptance criteria / test senaryoları:
    - Tema toggle yapıldığında localStorage güncellenmeli ve sayfa yenilendiğinde tercih korunmalı.
    - Sidebar linkine tıklandığında HTMX ile fragment yüklensin, header sabit kalsın.
    - Mobilde sidebar toggle düzgün çalışsın ve overlay kapanışı sağlansın.
    - Login formu Turnstile widget üretiyor; form gönderildiğinde Sunucu Turnstile token'ı doğruluyor — geçerse oturum açma gerçekleşiyor, geçmezse hata mesajı.
    - Erişilemeyen bir fragment istenirse HTMX hedefinde uygun hata gösterimi (alert/flash) gelsin.
    - Temel a11y kontrolü: tüm interaktif öğeler klavye ile erişilebilir olsun, img/ikonlar için alt metin/aria-label.

Ek istekler / tercih edilen çıktı biçimi
- Üretilen dosyaları dosya isimleriyle ve kısa açıklamalarıyla listelerken KOD VERMEYİN — sadece hangi dosyayı ve ne içermesi gerektiğini net maddelemeyle verin (ama AI kod da üretirse ayrı bir adımda bunu isteyebilirim).
- Turnstile sitekey/secret için placeholder kullanın ve kullanıcıya nerede değiştireceğini açıkça belirtin.
- HTMX fragment response biçimi: tam HTML fragment (sadece main-content içeriği) veya JSON+HTML toggles; tercihen saf HTML fragment kullanılsın.
- Her dosya için kısa "örnek içerik açıklaması" verin (ör. dashboard fragment: 3 adet statistic card ve bir tablo).

Çıktı teslim formatı
- Lütfen üretim çıktısını şu şekilde organize et:
    - "Files to create" listesi (path + kısa açıklama)
    - "Server endpoints" listesi (method + path + beklenen davranış)
    - "Güvenlik & deployment notları"
    - "Acceptance tests"
- Tekrar ediyorum: BU PROMPT sadece kılavuzdur — şu an yalnızca prompt dosyasını istiyorum, KOD YOK. Eğer kod oluşturmaya hazırsan, ayrı bir istekte bulunacağım.

Not: Kullanıcı adı ve mevcut package.json bağımlılıklarını unutma: Alpine.js, Bootstrap 5, htmx, jquery. Cloudflare Turnstile sitekey/secret işaretlerini placeholder bırak.