Muzibu Sunum Analizi - Agent Üretim Rehberi

1. HTML Temel Yapısı

Tüm sayfalarda ortak olan HTML iskeleti

Head Bölümü (Zorunlu)

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Sayfa Başlığı] | Muzibu.com Sunum</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        body { font-family: 'Inter', sans-serif; background: #030712; }
        /* ... CSS tanımları ... */
    </style>
</head>

TV Layout Yapısı (%65 İçerik / %35 Animasyon)

<body class="text-white overflow-x-hidden">
<div class="tv-container">

    <!-- SOL: İÇERİK (%65) -->
    <div class="content-side">
        <!-- Arka plan efektleri -->
        <div class="fixed top-0 left-0 w-[65%] h-full pointer-events-none overflow-hidden">
            <div class="absolute ... bg-[renk]-500/10 rounded-full blur-3xl float-slow morph"></div>
        </div>

        <div class="relative z-10 max-w-4xl mx-auto px-8 py-10">
            <!-- Header, İçerik, Footer -->
        </div>
    </div>

    <!-- SAĞ: ANİMASYON (%35) -->
    <div class="animation-side relative">
        <!-- Sayfaya özel animasyon tasarımı -->
    </div>

</div>
</body>

Kritik CSS

.tv-container { display: flex; min-height: 100vh; }
.content-side { flex: 0 0 65%; height: 100vh; overflow-y: auto; position: relative; }
.animation-side {
    flex: 0 0 35%;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba([TEMA_RENGİ], 0.15) 0%, transparent 70%);
}

Header Yapısı (Navigasyon)

<header class="flex items-center justify-between mb-12">
    <div class="flex items-center gap-4">
        <!-- Önceki Sayfa Butonu -->
        <a href="[onceki].html" class="w-10 h-10 rounded-lg bg-[renk]-500/20 text-[renk]-400
           flex items-center justify-center hover:bg-[renk]-500/30 transition-colors">
            <i class="fas fa-chevron-left"></i>
        </a>

        <!-- Breadcrumb -->
        <a href="index.html" class="flex items-center gap-2 text-slate-400 hover:text-white transition-colors">
            <i class="fas fa-th-large"></i>
            <span class="text-sm">Tüm Sayfalar</span>
        </a>
        <span class="text-slate-600">/</span>
        <span class="text-[renk]-400 font-medium">[Sayfa No] - [Başlık]</span>
    </div>

    <div class="flex items-center gap-2">
        <span class="text-slate-500 text-sm mr-4">Sayfa [X] / 161</span>
        <!-- Sonraki Sayfa Butonu -->
        <a href="[sonraki].html" class="w-10 h-10 rounded-lg bg-[renk]-500/20 text-[renk]-400
           flex items-center justify-center hover:bg-[renk]-500/30 transition-colors">
            <i class="fas fa-chevron-right"></i>
        </a>
    </div>
</header>

2. CSS Standartları & Animasyonlar

Tüm sayfalarda kullanılan ortak class'lar ve keyframe'ler

Zorunlu Keyframe'ler

gradientFlow - Gradient text animasyonu
float - Yukarı-aşağı hareket
pulse - Nabız efekti
spin - Döndürme
glow - Parlama efekti
borderDance - Border renk değişimi
morphShape - Şekil değiştirme
bounce - Zıplama

Zorunlu Utility Class'lar

.glass - Blur arka plan kartları
.card-lift - Hover efekti
.gradient-text-animated - Animasyonlu başlık
.term - Vurgulu terim
.float - Float animasyonu
.pulse - Pulse animasyonu
.glow - Glow animasyonu

Glass Card Tanımı

.glass {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba([TEMA_RENGİ_RGB], 0.2);
    transition: all 0.4s ease;
}

.card-lift { transition: all 0.4s ease; }
.card-lift:hover {
    background: rgba([TEMA_RENGİ_RGB], 0.15) !important;
    border-color: rgba([TEMA_RENGİ_RGB], 0.5) !important;
}

.term {
    background: linear-gradient(90deg, rgba([RENk1], 0.2), rgba([RENK2], 0.2));
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

YASAK Animasyonlar

icon-bounce - Sürekli zıplayan ikonlar (dikkat dağıtıcı)
ring-anim - Sallanan telefon ikonu (rahatsız edici)
roadmapPulse - Agresif box-shadow pulse
lineGrow - Sayfa yüklendiğinde uzayan çizgi
fadeIn gecikmeleri - Sıralı açılan kartlar
transform: scale(1.15) - Aşırı büyüme efekti

Neden yasak? Bu animasyonlar profesyonel sunumda dikkat dağıtır, yorucu hissedilir ve düşük performanslı cihazlarda takılma yaratır.

DOĞRU Animasyonlar

subtle-float - Hafif yukarı-aşağı (4s, 5px)
subtleGlow - Zarif box-shadow parlaması (3s)
gradientFlow - Başlık gradient akışı (4s)
spin-slow - Çok yavaş dönme (20s)
pulse - Hafif opaklık değişimi (2s)
Statik gradient çizgiler (animasyonsuz)

Neden doğru? Zarif, profesyonel, göz yormayan. Sayfayı canlı tutar ama dikkat dağıtmaz.

Animasyon Hız Referansı

2-3s

pulse, glow

3-4s

float, gradient

4-6s

subtle-float, morph

15-20s

spin-slow, orbit

3. İçerik Bölüm Sırası

Her sayfada takip edilmesi gereken standart akış

1

Badge/Tag

Kategori göstergesi. Örn: "Teknik Altyapı", "Güvenlik", "Modül"

inline-flex items-center gap-2 px-4 py-2 bg-[renk]-500/20 text-[renk]-400 rounded-full text-sm mb-6 glow

2

Ana Başlık (h1)

Gradient animasyonlu büyük başlık

text-5xl md:text-6xl font-bold + span.gradient-text-animated

3

Alt Başlık

Kısa açıklama paragrafı

text-xl text-slate-400 mt-4

4

"Biz Ne Yaptık?" Kartı

Ana açıklama paragrafı - ne inşa ettik

glass rounded-3xl p-8 mb-8 border-dance card-lift

5

"Ne İşe Yarıyor?" Kartı

4 adet fayda kartı (2x2 grid) - değer önerisi

glass rounded-3xl p-8 mb-8 card-lift

6

Animasyonlu Ayırıcı

Gradient çizgi + pulse noktalar + chevron-down ikonu

relative h-24 mb-16 flex items-center justify-center overflow-hidden

7

"Arkada Ne Oluyor?" Bölümü

Teknik detaylar, adım adım açıklamalar, katman kartları

8

Konuya Özel Ek Bölümler

Grid kartlar, listeler, metrikler, detay açıklamaları

9

Animasyonlu Ayırıcı (2)

Sözlük bölümü öncesi

10

"Anahtar Terimler" (Sözlük) ZORUNLU!

Her sayfada 3-5 anahtar terim kartı OLMALI. Terimler sayfanın konusuna özel seçilmeli.

Format: ikon + terim (Türkçe açıklama) + ne olduğu + ne işe yaradığı
Örnek: "HLS (HTTP Live Streaming) - Şifreli parçalar halinde müzik yayını"

11

Footer

Önceki/Sonraki butonları + sayfa numarası + tarih

"10 Şubat 2026 • Tuufi.com / Türk Bilişim"

4. Anlatım Dili & Üslup

Tüm sayfalarda tutarlı olması gereken dil kuralları

DOĞRU Kullanım

İkinci çoğul kişi: "Sizin için inşa ettik", "Biz ne yaptık?"
Teknik terim + açıklama: "Middleware (Ara Katman)"
Benzetmeler: "Apartman güvenliği gibi", "Lego parçaları gibi"
Somut rakamlar: "42 güvenlik katmanı", "284 Livewire bileşeni"
"Neden Önemli?" sorusu: Her bölümde değer açıklaması
Karşılaştırma: "Eski Sistemler" vs "Muzibu Sistemi"

YANLIŞ Kullanım

Teknik jargon açıklamasız: "CSRF token ile XSS koruması"
Belirsiz ifadeler: "birçok", "bazı", "genellikle"
Pasif cümle: "Yapılmıştır", "Eklendi"
Footer'da: "Claude AI tarafından oluşturuldu"
ASCII Türkçe: "Ozellik", "Islem", "Guvenlik"

Standart Bölüm Başlıkları

Ana Bölümler

"Biz Ne Yaptık?"
"Arkada Ne Oluyor?"
"Bu Ne İşe Yarar?"

Detay Bölümleri

"Neden Önemli?"
"Admin Panelden Ne Görebilirsiniz?"
"Arkaplanda Neler Çalışıyor?"

Sabit Bölümler

"Bu Sayfanın Anahtar Terimleri"
Referans: "Sayfa 12 - Merkezi Sözlük"

5. Renk Temaları

Sayfa tipine göre kullanılacak ana renkler

Orange

#f97316 - Giriş, Genel, Muzibu Modülü

Cyan

#06b6d4 - Mimari, Teknik, SPA

Red

#ef4444 - Güvenlik, Hata, Uyarı

Purple

#8b5cf6 - AI, Livewire, Reaktif

Emerald

#10b981 - Başarı, Ödeme, Aktif

Pink

#ec4899 - Müzik, Medya, İçerik

Blue

#3b82f6 - Database, Cloud, API

Amber

#f59e0b - Sözlük, Uyarı, İpucu

6. Agent Tasarımı Blueprint

Sayfaları analiz edip düzeltecek agent türleri

1. Analyzer Agent

Sayfayı okur, eksikleri ve hataları raporlar

Kontrol Listesi:

TV Layout yapısı mevcut mu?

Header navigasyonu doğru mu?

"Biz Ne Yaptık?" bölümü var mı?

Sözlük bölümü var mı?

Footer formatı doğru mu?

Keyboard navigation var mı?

Animasyon paneli var mı?

Türkçe karakterler doğru mu?

2. Content Fixer Agent

Eksik içerikleri standart yapıya uygun şekilde tamamlar

Görevler:

Eksik bölümleri (Sözlük, Footer) ekler
"Biz Ne Yaptık?" bölümü yoksa oluşturur
Karşılaştırma kartlarını (Eski vs Yeni) ekler
Animasyonlu ayırıcıları doğru yerlere koyar

3. Style Fixer Agent

CSS ve tasarım tutarlılığını sağlar

Görevler:

Eksik CSS keyframe'leri ekler
.glass, .card-lift class tanımlarını kontrol eder
Renk temasını sayfaya uygun hale getirir
Scrollbar styling'i düzeltir

4. Animation Agent

Sağ panel animasyonlarını tasarlar/düzeltir

Görevler:

Sayfanın konusuna uygun görsel metafor tasarlar
Örnek: Güvenlik → Radar/Shield, Mimari → Pipeline
Alt bilgi mesajını ekler
Animasyon keyframe'lerini kontrol eder

Agent İş Akışı

Analyzer

Eksikleri bul

Content

İçerik tamamla

Style

CSS düzelt

Animation

Sağ panel

Tamamlandı

Doğrula

7. Sağ Panel (Animasyon) Tasarımı

Her sayfa için ÖZGÜN görsel metafor oluşturma rehberi

KRİTİK: Her Sayfa Farklı Olmalı!

Sağ panel (animation-side) her sayfa için benzersiz tasarlanmalı. Copy-paste YASAK! Sayfanın konusuna uygun yaratıcı bir görsel metafor seçilmeli.

Sayfa → Görsel Metafor Eşleştirmesi

Güvenlik

Radar tarama, kalkan, kilit, saldırı engelleme animasyonu

Performans

Roket, hız çizgileri, yıldızlar, speedometer

Mimari

Dikey pipeline, katman akışı, akan veri topları

Müzik/Medya

Waveform, kulaklık, notalar, equalizer barları

Database/Cache

Veri küpleri, bağlantı noktaları, bellek blokları

Final/Teşekkür

Konfeti, sparkle, kutlama, kupa animasyonu

AI/Livewire

Sinir ağı, bağlantı çizgileri, parlayan düğümler

İstatistik

Animasyonlu bar chart, canlı sayaçlar, pie chart

Kullanıcı

Avatar kartları, profil döngüsü, rol ikonları

Sağ Panel Teknik Yapısı

<!-- SAĞ: ANİMASYON PANELİ (%35) -->
<div class="animation-side relative">

    <!-- 1. ÜST BÖLGE: Ana görsel metafor (top: 30-40%) -->
    <div class="absolute top-[35%] left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <!-- Dönen halkalar, merkez ikon, yörünge animasyonları -->
    </div>

    <!-- 2. ORTA BÖLGE: İstatistikler veya ek görseller (top: 55-75%) -->
    <div class="absolute top-[60%] left-4 right-4">
        <div class="glass rounded-2xl p-4">
            <!-- Bar chart, metrik kartları, veri akışı -->
        </div>
    </div>

    <!-- 3. ALT MESAJ: Sayfanın özeti (bottom: 6) -->
    <div class="absolute bottom-6 left-4 right-4">
        <div class="glass rounded-2xl p-4 text-center">
            <div class="flex items-center justify-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-[renk]-500/20 flex items-center justify-center">
                    <i class="fas fa-[ikon] text-[renk]-400"></i>
                </div>
                <p class="text-slate-400 text-sm">[Özet mesaj]</p>
            </div>
        </div>
    </div>

</div>

<!-- SAYFA ÖZEL ANİMASYONLAR (style içinde) -->
<style>
    @keyframes [sayfaOzelAnim] {
        /* Sayfaya özel keyframe tanımı */
    }
</style>

Tam Örnek Şablon

Tüm standartları içeren hazır HTML şablonu

Şablonu Görüntüle