sayfagon

Akıllı Arayüz Asistanı

Yapay Zeka ile Esnek Arayüz Deneyimi

Bu alan, gelişmiş Yapay Zeka otomasyon altyapımız ile entegre bir şekilde çalışmaktadır. Bölümün görsel ve metinsel düzenini dilediğiniz an tamamen özgürce yeniden yapılandırabilirsiniz.

Tek yapmanız gereken üst panelde konumlanan Düzenle butonuna tıklamak, açılan sihirli arayüz penceresinden bilgilerinizi güncellemek ve değişiklikleri kaydetmektir.

Sistemimiz yalnızca düz metinleri güncellemekle kalmaz; oluşturduğunuz özel bileşenin tüm yapısal katmanları, yerleşim şemaları ve tasarım öğeleri üzerinde parça bazlı mimari değişiklikler yapmanıza da olanak tanır.

Anlık Yapısal Önizleme
Öğeler Üzerinde Tam Kontrol
Sıfır Kod Bağımlılığı

#section-blank_8400

HTML İçerik

<div class="sf-ai-visual-column">
                <div class="sf-ai-icon-sphere">
                    
                    <svg class="sf-ai-sparkle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m11.314 11.314l.707.707M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z" />
                    </svg>
                    <div class="sf-ai-pulse-wave"></div>
                </div>
            </div>

<div class="sf-ai-text-column">
                <header class="sf-ai-header-group">
                    <span class="sf-ai-micro-badge">Akıllı Arayüz Asistanı</span>
                    <h2 class="sf-ai-main-title">Yapay Zeka ile Esnek Arayüz Deneyimi</h2>
                </header>

<div class="sf-ai-description-body">
                    <p class="sf-ai-p">
                        Bu alan, gelişmiş <strong>Yapay Zeka otomasyon altyapımız</strong> ile entegre bir şekilde çalışmaktadır. Bölümün görsel ve metinsel düzenini dilediğiniz an tamamen özgürce yeniden yapılandırabilirsiniz.
                    </p>
                    <p class="sf-ai-p">
                        Tek yapmanız gereken üst panelde konumlanan <span class="sf-ai-inline-badge">Düzenle</span> butonuna tıklamak, açılan sihirli arayüz penceresinden bilgilerinizi güncellemek ve değişiklikleri kaydetmektir.
                    </p>
                    <p class="sf-ai-p">
                        Sistemimiz yalnızca düz metinleri güncellemekle kalmaz; oluşturduğunuz özel bileşenin tüm yapısal katmanları, yerleşim şemaları ve tasarım öğeleri üzerinde parça bazlı mimari değişiklikler yapmanıza da olanak tanır.
                    </p>
                </div>

<ul class="sf-ai-perks-list">
                    <li class="sf-ai-perk-item" tabindex="0">
                        <span class="sf-ai-perk-dot"></span>
                        <p class="sf-ai-perk-label">Anlık Yapısal Önizleme</p>
                    </li>
                    <li class="sf-ai-perk-item" tabindex="0">
                        <span class="sf-ai-perk-dot"></span>
                        <p class="sf-ai-perk-label">Öğeler Üzerinde Tam Kontrol</p>
                    </li>
                    <li class="sf-ai-perk-item" tabindex="0">
                        <span class="sf-ai-perk-dot"></span>
                        <p class="sf-ai-perk-label">Sıfır Kod Bağımlılığı</p>
                    </li>
                </ul>
            </div>

</div>
    </section>
</div>

HTML içeriğindeki metinleri aşağıdan doğrudan düzenleyebilirsiniz.

Metin yükleniyor...

HTML içeriğindeki görselleri aşağıdan değiştirebilir, yeni görsel yükleyebilir veya kütüphanenizden seçebilirsiniz.

Görseller taranıyor...

HTML içeriğindeki elemanların renk, yazı boyutu, hizalama ve boşluklarını aşağıdan görsel olarak düzenleyebilirsiniz.

Tasarım ayarları yükleniyor...

CSS Kodları

.sf-ai-editor-notice-wrapper {
    /* Modern Minimalist Page Content Architecture */
    --sf-ai-bg: transparent;
    /* Kart görünümünü kırmak için arka plan tamamen transparan yapıldı */
    --sf-ai-primary: #0f172a;
    --sf-ai-text: #475569;
    --sf-ai-accent: #6366f1;
    --sf-ai-accent-glow: rgba(99, 102, 241, 0.08);
    --sf-ai-border: #e2e8f0;
    --sf-ai-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-ai-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);

background-color: var(--sf-ai-bg);
    font-family: var(--sf-ai-font);
    color: var(--sf-ai-text);
    line-height: 1.8;
    padding: 80px 0;
    /* Ferah ve geniş bir sayfa içeriği hissi için dikey boşluk artırıldı */
    box-sizing: border-box;
    width: 100%;
}

.sf-ai-editor-notice-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Structural Spatial Containers */
.sf-ai-editor-notice-wrapper .sf-ai-notice-container {
    width: 100%;
    max-width: 900px;
    /* Daha odaklanmış ve ferah bir okuma alanı */
    margin: 0 auto;
    padding: 0 24px;
}

.sf-ai-editor-notice-wrapper .sf-ai-notice-layout {
    /* Kart algısını yok etmek için border, arka plan rengi, border-radius ve gölgeler tamamen kaldırıldı */
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;

display: grid;
    grid-template-columns: 80px 1fr;
    gap: 40px;
    align-items: start;
    /* Tepeden başlayan, serbest bir düzen */

/* Intended Initial Structural State for Smooth Script Transition */
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Toggled dynamically by our safe standard execution IIFE script block */
.sf-ai-editor-notice-wrapper .sf-ai-notice-layout.sf-init-fade {
    opacity: 1;
    transform: translateY(0);
}

/* Left Layout Visual Column Elements */
.sf-ai-editor-notice-wrapper .sf-ai-visual-column {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
    /* Başlıkla hizalanması için ufak bir üst boşluk */
}

.sf-ai-editor-notice-wrapper .sf-ai-icon-sphere {
    background-color: var(--sf-ai-accent-glow);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--sf-ai-accent);
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sf-ai-editor-notice-wrapper .sf-ai-sparkle-icon {
    width: 26px;
    height: 26px;
    transition: transform 0.4s ease;
}

.sf-ai-editor-notice-wrapper .sf-ai-pulse-wave {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px dashed rgba(99, 102, 241, 0.25);
    border-radius: 50%;
    z-index: 1;
    animation: sfAiSpinLoop 50s linear infinite;
}

/* Right Layout Text Content Column Elements */
.sf-ai-editor-notice-wrapper .sf-ai-text-column {
    display: flex;
    flex-direction: column;
}

.sf-ai-editor-notice-wrapper .sf-ai-header-group {
    margin-bottom: 24px;
}

.sf-ai-editor-notice-wrapper .sf-ai-micro-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sf-ai-accent);
    margin-bottom: 8px;
}

.sf-ai-editor-notice-wrapper .sf-ai-main-title {
    font-size: 32px;
    /* Sayfa başlığı tonunda daha geniş ve iddialı font boyutu */
    font-weight: 700;
    color: var(--sf-ai-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.sf-ai-editor-notice-wrapper .sf-ai-description-body {
    margin-bottom: 32px;
}

.sf-ai-editor-notice-wrapper .sf-ai-p {
    font-size: 16px;
    color: var(--sf-ai-text);
    margin-bottom: 16px;
    text-align: left;
}

.sf-ai-editor-notice-wrapper .sf-ai-p:last-child {
    margin-bottom: 0;
}

.sf-ai-editor-notice-wrapper .sf-ai-inline-badge {
    background-color: var(--sf-ai-accent-glow);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--sf-ai-accent);
    font-size: 15px;
}

/* Interactive Perks Metadata & Perfect Alignment Fix */
.sf-ai-editor-notice-wrapper .sf-ai-perks-list {
    list-style: none;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--sf-ai-border);
    /* Sayfa içi bölümlendirme hissi veren ince çizgi */
}

.sf-ai-editor-notice-wrapper .sf-ai-perk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    outline: none;
    background: none;
    transition: opacity 0.2s ease;
}

.sf-ai-editor-notice-wrapper .sf-ai-perk-dot {
    width: 6px;
    height: 6px;
    background-color: var(--sf-ai-accent);
    border-radius: 50%;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sf-ai-editor-notice-wrapper .sf-ai-perk-label {
    font-size: 14px;
    color: var(--sf-ai-primary);
    font-weight: 500;
    margin: 0;
    padding: 0;
    line-height: 1;
    /* Nokta ile dikey hizalanmayı kusursuzlaştırmak için satır yüksekliğini eşitleyen kural */
}

/* Dynamic Interactivity Architecture (Without Buttons) */
.sf-ai-editor-notice-wrapper .sf-ai-notice-layout:hover .sf-ai-icon-sphere {
    transform: scale(1.05);
}

.sf-ai-editor-notice-wrapper .sf-ai-notice-layout:hover .sf-ai-sparkle-icon {
    transform: rotate(15deg);
}

.sf-ai-editor-notice-wrapper .sf-ai-perk-item:hover .sf-ai-perk-dot {
    transform: scale(1.4);
}

/* Accessibility Safe Focus Rings Design */
.sf-ai-editor-notice-wrapper .sf-ai-perk-item:focus-visible {
    box-shadow: var(--sf-ai-focus-ring);
    border-radius: 4px;
}

/* Infinite Spin Keyframe Definition */
@keyframes sfAiSpinLoop {
    from {
        transform: rotate(0deg);
    }

to {
        transform: rotate(360deg);
    }
}

/* Responsive Fluid Media Adaptations */
@media (max-width: 768px) {
    .sf-ai-editor-notice-wrapper {
        padding: 40px 0;
    }

.sf-ai-editor-notice-wrapper .sf-ai-notice-container {
        padding: 0 20px;
    }

.sf-ai-editor-notice-wrapper .sf-ai-notice-layout {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

.sf-ai-editor-notice-wrapper .sf-ai-visual-column {
        margin: 0 auto;
        padding-top: 0;
    }

.sf-ai-editor-notice-wrapper .sf-ai-main-title {
        font-size: 26px;
    }

.sf-ai-editor-notice-wrapper .sf-ai-p {
        text-align: center;
    }

.sf-ai-editor-notice-wrapper .sf-ai-perks-list {
        justify-content: center;
        gap: 16px;
        padding-top: 16px;
    }
}

JS Kodları

Yapay Zeka Tasarım & İçerik Merkezi

Tasarım kurallarınızı tanımlayın ve kurumsal içeriklerinizi yönetin.

⚡ Hızlı Giriş & Doğrudan İstem Modu

İsterseniz hızlıca ne istediğinizi aşağıdaki kutuya serbestçe yazıp anında prompt oluşturabilir, ya da daha detaylı bir tasarım için Tasarım Sihirbazı ve Kurumsal İçerik & Medya formlarını doldurabilirsiniz.

Ne Yapmak İstiyorsunuz? (Hızlı Tarif) Serbest Metin

💡 Hızlı İlham Alın (Tıklayıp Ekleyin):

🚀 Yazılım & SaaS Koyu Hero 🍕 Restoran & Cafe Menü & Galeri 💼 Kurumsal Danışmanlık & Referanslar 🏥 Klinik & Sağlık Hızlı Randevu 🛒 E-Ticaret Ürün Vitrini & Fiyat Tablosu 🎨 Kreatif Portfolyo & Özgeçmiş 🏖️ Otel & Villa Rezervasyon Sayfası 🏗️ İnşaat & Mimarlık Proje Galerisi 📱 Mobil Uygulama Tanıtım & İndirme 🎯 Tek Ürün Yüksek Dönüşüm Landing Page

Sihirbaz Modu Aktif! Hayalinizdeki tasarımı aşağıdaki alanlara kendi kelimelerinizle yazabilir veya hızlıca doldurmak için ipucu rozetlerine tıklayabilirsiniz.

1 Sektör, İş Kolu ve Hedef Kitle (Persona)

Oto Tamir Güzellik & Klinik SaaS Girişimi Hukuk & Danışmanlık Kreatif Portfolyo Restoran & Kafe E-Ticaret Moda Gayrimenkul Agency Eğitim & Akademi Dijital Pazarlama Spor & Fitness Turizm & Villa Kiralama İnşaat & Mimarlık Lojistik & Nakliyat Muhasebe & Finans Usta & Teknik Servis Düğün & Organizasyon

2 Bileşenin Amacı ve Türü

🌐 Komple Landing Page (Hero+Özellik+Fiyat+CTA) ⚡ Hero + 3'lü Hizmet Kartı Kombini 🍱 Bento Grid Özellik Vitrini 🔄 3 Adımda Nasıl Çalışır? (Süreç) 📱 Mobil Uygulama Tanıtım Bloğu 🎁 E-Bülten & İndirim Kuponu Yakalama Hero (Giriş) Bloğu Hizmet Kartları Müşteri Logoları Yorum Slider'ı Fiyat Tablosu İletişim Formu (CTA) SSS Akordeon Sayaç & İstatistik Ekip Üyeleri Grid Zaman Akışı (Timeline) Video Tanıtım Alanı

3 İçerik Hiyerarşisi ve Metin Stratejisi

Acil & Çağrı Odaklı Profesyonel & Güvenilir Samimi & Sıcak Dil İddialı & Kurumsal Dönüşüm (CTA) Odaklı Minimal & Az Metin Hikaye Anlatımı Teknik & Detaycı Dil Eğlenceli & Genç Ton Sosyal Kanıt & Güven Ağırlıklı İndirim & Fırsat Vurgusu

4 Görsel, İkonografi ve Medya Dinamikleri

Unsplash Görselleri Inline SVG İkonlar Öncesi/Sonrası Kaydırıcı Mockup Ekranları Minimal Galeri Grid 3D İllüstrasyonlar Video Arka Planı İkonlu Liste Efekti Masonry Duvar Galerisi Müşteri Avatarları & Sosyal Kanıt İnteraktif Ürün Etiketi (Hotspot) Bento Grid Görsel Düzeni

5 Renk Teorisi ve Tema Seçimi

Aydınlık Tema Karanlık Tema Lacivert & Gri Adaçayı & Krem Turuncu & Antrasit Siyah & Altın Pembe & Mor Neon Koyu Tema Toprak Tonları & Bej Nordic Minimal & Soft Pastel Fintech Zümrüt Yeşili & Lacivert Lüks Bordo & Şampanya Cyber Gece Mavisi & Mor

6 Tipografi ve Okunabilirlik Tarzı

Modern Sans (Inter) Geometrik (Montserrat) Klasik Serif (Playfair) Kalın Başlık & Geniş Satır Monospace Kod Stili Yuvarlak (Poppins) Zıt Yazı Tipleri Lüks & Zarif Başlıklar (Cormorant) Editoryal & Gazete Stili

7 İnteraktivite ve Animasyonlar

Hover Yükselme & Gölge Akordeon Smooth Açılış Sekmeli (Tab) Geçişler Focus Çerçeve Efekti Hover Parlama Efekti Yavaşça Belirme (Fade) Sonsuz Logo Bandı Canlı Sayı Sayacı (Scroll Counter) Manyetik Buton / Parlayan Kenarlık Açılır Kapanır Kartlar (Interactive Cards) Tek Tıkla Kopyala / Paylaş

8 Düzen, Grid/Flexbox ve Ekran Duyarlılığı

3'lü Kart Izgarası (Grid) 50/50 Yerleşim Mobil Uyumlu 48px Dokunma Alanı Asimetrik Duvar (Masonry) Yatay Kaydırılabilir Bento Box Modern Izgara Sabit Sol Panel + Kayan Sağ İçerik Üst Üste Binen (Overlapping) Katmanlar Mobil Alt Sabit Buton (Sticky Bar)

9 Erişilebilirlik ve Özel İstekler

Ekran Okuyucu (ARIA) Keskin Köşeli Kartlar Yapışkan Mobil Arama Gölgesiz Düz Tasarım Glassmorphism Efekti Yumuşak Yuvarlak Köşeler Buzlu Cam & Neumorphism Doğrudan WhatsApp Butonu Açık / Koyu Tema Seçicisi Sıfır Kütüphane (Pure HTML/CSS/JS)

10 Teknik Entegrasyon & Harici Kütüphaneler

Bootstrap 5 Sınıfları Bootstrap Icons FontAwesome İkon Seti Swiper.js Slider Chart.js Grafik Lottie Animasyon AOS Kaydırma Efekti AJAX Form Gönderimi WhatsApp Yönlendirme:Telefon_No SweetAlert Bildirimi Scoped CSS (İzole Stil) Saf Vanilla JS (Kütüphanesiz)

Kurumsal İçerik & Medya Yöneticisi! Buraya girdiğiniz bilgiler ve yüklediğiniz görseller yapay zekaya "Tasarımda doğrudan bu gerçek verileri ve URL'leri kullan" talimatı olarak eklenecektir.

🧾 1️⃣ Genel Bilgiler

🌐 Site Adı / Marka Adı

🏢 Sektör / Faaliyet Alanı

🧰 İş Tanımı

📞 2️⃣ İletişim Bilgileri

📱 Telefon

📧 E-posta

📍 Açık Adres

🗺️ Google Harita Linki

🎨 3️⃣ Marka ve Görsel Kimlik

🖼️ Logo Yükle veya URL Girin Otomatik URL Üretilir

📸 İş / Ürün Fotoğrafları Yükleyin Çoklu Yükleme

⚙️ Misyon ve Vizyon

🎯 4️⃣ İçerik ve Hedef Kitle

👥 Hedef Kitle

💬 Slogan / Ana Mesaj

🧱 Hizmetler / Ürünler

🏗️ Referanslar / Rakipler

🔍 5️⃣ SEO ve Sosyal Medya

🪶 Anahtar Kelimeler

📝 Meta Açıklama

🔗 Dış Bağlantılar (Sosyal Medya Linkleri, Pazaryerleri vb.)

📽️ Projeler / Referans İşler

Proje #1

AI Bileşen Üretim Merkezi

Bileşeninizi üretmek için aşağıdaki 2 yöntemden birini seçin.

Bu Bölüm Ne İşe Yarar?

Sol tarafta girdiğiniz form bilgileri (sektör, renkler, interaktivite vb.) yapay zeka için özel bir tasarım talimatına (prompt) dönüştürülür. Bu talimatı kullanarak iki şekilde bileşen üretebilirsiniz:

1. Prompt Kopyalama Akışı: API anahtarınız yoksa, promptu kopyalayıp webdeki AI araçlarına yapıştırarak kod ürettirebilirsiniz.

2. Entegre API Akışı: API anahtarınız varsa doğrudan tarayıcıdan tek tıkla kod üretir, sekmeleri otomatik doldurursunuz.

Yöntem 1: Prompt Kopyala & Web Arayüzü

API anahtarınız yoksa, aşağıdaki butonlarla promptları kopyalayıp harici yapay zekalarda (ChatGPT, Claude web vb.) çalıştırabilirsiniz.

Prompt Türünü Seçin & Kopyalayın: • Kod Promptu: AI'ın vereceği HTML, CSS ve JS kodlarını tek tek ilgili sekmelere kopyalamanız gerekir. • JSON Promptu (Önerilen): AI size tek bir JSON kodu verir. Sonucu kopyalayıp aşağıdaki JSON kutusuna yapıştırarak tek tıkla tüm sekmeleri doldurursunuz.

Yapay Zeka Aracında Çalıştırın: Aşağıdaki linklerle yapay zekaya gidip promptu gönderin.

JSON Yükleme Adımı: JSON formatı seçtiyseniz, yapay zekanın çıktısını aşağıdaki "JSON Çıktısını Yapıştırın" kutusuna girip "JSON Kodlarını Yükle"ye basın.

Yapay Zeka Servis Linkleri

ChatGPT Gemini Claude DeepSeek

JSON Çıktısını Yapıştırın

{
    "html": "<div class=\"sf-ai-editor-notice-wrapper\">\n    \n    <section class=\"sf-ai-notice-container\">\n        <div class=\"sf-ai-notice-layout\">\n\n            \n            <div class=\"sf-ai-visual-column\">\n                <div class=\"sf-ai-icon-sphere\">\n                    \n                    <svg class=\"sf-ai-sparkle-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m11.314 11.314l.707.707M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z\" />\n                    </svg>\n                    <div class=\"sf-ai-pulse-wave\"></div>\n                </div>\n            </div>\n\n            \n            <div class=\"sf-ai-text-column\">\n                <header class=\"sf-ai-header-group\">\n                    <span class=\"sf-ai-micro-badge\">Akıllı Arayüz Asistanı</span>\n                    <h2 class=\"sf-ai-main-title\">Yapay Zeka ile Esnek Arayüz Deneyimi</h2>\n                </header>\n\n                <div class=\"sf-ai-description-body\">\n                    <p class=\"sf-ai-p\">\n                        Bu alan, gelişmiş <strong>Yapay Zeka otomasyon altyapımız</strong> ile entegre bir şekilde çalışmaktadır. Bölümün görsel ve metinsel düzenini dilediğiniz an tamamen özgürce yeniden yapılandırabilirsiniz.\n                    </p>\n                    <p class=\"sf-ai-p\">\n                        Tek yapmanız gereken üst panelde konumlanan <span class=\"sf-ai-inline-badge\">Düzenle</span> butonuna tıklamak, açılan sihirli arayüz penceresinden bilgilerinizi güncellemek ve değişiklikleri kaydetmektir.\n                    </p>\n                    <p class=\"sf-ai-p\">\n                        Sistemimiz yalnızca düz metinleri güncellemekle kalmaz; oluşturduğunuz özel bileşenin tüm yapısal katmanları, yerleşim şemaları ve tasarım öğeleri üzerinde parça bazlı mimari değişiklikler yapmanıza da olanak tanır.\n                    </p>\n                </div>\n\n                \n                <ul class=\"sf-ai-perks-list\">\n                    <li class=\"sf-ai-perk-item\" tabindex=\"0\">\n                        <span class=\"sf-ai-perk-dot\"></span>\n                        <p class=\"sf-ai-perk-label\">Anlık Yapısal Önizleme</p>\n                    </li>\n                    <li class=\"sf-ai-perk-item\" tabindex=\"0\">\n                        <span class=\"sf-ai-perk-dot\"></span>\n                        <p class=\"sf-ai-perk-label\">Öğeler Üzerinde Tam Kontrol</p>\n                    </li>\n                    <li class=\"sf-ai-perk-item\" tabindex=\"0\">\n                        <span class=\"sf-ai-perk-dot\"></span>\n                        <p class=\"sf-ai-perk-label\">Sıfır Kod Bağımlılığı</p>\n                    </li>\n                </ul>\n            </div>\n\n        </div>\n    </section>\n</div>",
    "css": ".sf-ai-editor-notice-wrapper {\n    /* Modern Minimalist Page Content Architecture */\n    --sf-ai-bg: transparent;\n    /* Kart görünümünü kırmak için arka plan tamamen transparan yapıldı */\n    --sf-ai-primary: #0f172a;\n    --sf-ai-text: #475569;\n    --sf-ai-accent: #6366f1;\n    --sf-ai-accent-glow: rgba(99, 102, 241, 0.08);\n    --sf-ai-border: #e2e8f0;\n    --sf-ai-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    --sf-ai-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);\n\n    background-color: var(--sf-ai-bg);\n    font-family: var(--sf-ai-font);\n    color: var(--sf-ai-text);\n    line-height: 1.8;\n    padding: 80px 0;\n    /* Ferah ve geniş bir sayfa içeriği hissi için dikey boşluk artırıldı */\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.sf-ai-editor-notice-wrapper * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n}\n\n/* Structural Spatial Containers */\n.sf-ai-editor-notice-wrapper .sf-ai-notice-container {\n    width: 100%;\n    max-width: 900px;\n    /* Daha odaklanmış ve ferah bir okuma alanı */\n    margin: 0 auto;\n    padding: 0 24px;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-notice-layout {\n    /* Kart algısını yok etmek için border, arka plan rengi, border-radius ve gölgeler tamamen kaldırıldı */\n    background: none;\n    border: none;\n    border-radius: 0;\n    padding: 0;\n    box-shadow: none;\n\n    display: grid;\n    grid-template-columns: 80px 1fr;\n    gap: 40px;\n    align-items: start;\n    /* Tepeden başlayan, serbest bir düzen */\n\n    /* Intended Initial Structural State for Smooth Script Transition */\n    opacity: 1;\n    transform: translateY(20px);\n    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n/* Toggled dynamically by our safe standard execution IIFE script block */\n.sf-ai-editor-notice-wrapper .sf-ai-notice-layout.sf-init-fade {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n/* Left Layout Visual Column Elements */\n.sf-ai-editor-notice-wrapper .sf-ai-visual-column {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: 6px;\n    /* Başlıkla hizalanması için ufak bir üst boşluk */\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-icon-sphere {\n    background-color: var(--sf-ai-accent-glow);\n    border-radius: 50%;\n    width: 64px;\n    height: 64px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: var(--sf-ai-accent);\n    position: relative;\n    z-index: 2;\n    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-sparkle-icon {\n    width: 26px;\n    height: 26px;\n    transition: transform 0.4s ease;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-pulse-wave {\n    position: absolute;\n    top: -6px;\n    left: -6px;\n    right: -6px;\n    bottom: -6px;\n    border: 1px dashed rgba(99, 102, 241, 0.25);\n    border-radius: 50%;\n    z-index: 1;\n    animation: sfAiSpinLoop 50s linear infinite;\n}\n\n/* Right Layout Text Content Column Elements */\n.sf-ai-editor-notice-wrapper .sf-ai-text-column {\n    display: flex;\n    flex-direction: column;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-header-group {\n    margin-bottom: 24px;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-micro-badge {\n    display: inline-block;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: var(--sf-ai-accent);\n    margin-bottom: 8px;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-main-title {\n    font-size: 32px;\n    /* Sayfa başlığı tonunda daha geniş ve iddialı font boyutu */\n    font-weight: 700;\n    color: var(--sf-ai-primary);\n    letter-spacing: -0.02em;\n    line-height: 1.3;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-description-body {\n    margin-bottom: 32px;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-p {\n    font-size: 16px;\n    color: var(--sf-ai-text);\n    margin-bottom: 16px;\n    text-align: left;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-p:last-child {\n    margin-bottom: 0;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-inline-badge {\n    background-color: var(--sf-ai-accent-glow);\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-weight: 600;\n    color: var(--sf-ai-accent);\n    font-size: 15px;\n}\n\n/* Interactive Perks Metadata & Perfect Alignment Fix */\n.sf-ai-editor-notice-wrapper .sf-ai-perks-list {\n    list-style: none;\n    display: flex;\n    gap: 32px;\n    flex-wrap: wrap;\n    padding-top: 8px;\n    border-top: 1px solid var(--sf-ai-border);\n    /* Sayfa içi bölümlendirme hissi veren ince çizgi */\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-perk-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 4px 0;\n    outline: none;\n    background: none;\n    transition: opacity 0.2s ease;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-perk-dot {\n    width: 6px;\n    height: 6px;\n    background-color: var(--sf-ai-accent);\n    border-radius: 50%;\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-perk-label {\n    font-size: 14px;\n    color: var(--sf-ai-primary);\n    font-weight: 500;\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    /* Nokta ile dikey hizalanmayı kusursuzlaştırmak için satır yüksekliğini eşitleyen kural */\n}\n\n/* Dynamic Interactivity Architecture (Without Buttons) */\n.sf-ai-editor-notice-wrapper .sf-ai-notice-layout:hover .sf-ai-icon-sphere {\n    transform: scale(1.05);\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-notice-layout:hover .sf-ai-sparkle-icon {\n    transform: rotate(15deg);\n}\n\n.sf-ai-editor-notice-wrapper .sf-ai-perk-item:hover .sf-ai-perk-dot {\n    transform: scale(1.4);\n}\n\n/* Accessibility Safe Focus Rings Design */\n.sf-ai-editor-notice-wrapper .sf-ai-perk-item:focus-visible {\n    box-shadow: var(--sf-ai-focus-ring);\n    border-radius: 4px;\n}\n\n/* Infinite Spin Keyframe Definition */\n@keyframes sfAiSpinLoop {\n    from {\n        transform: rotate(0deg);\n    }\n\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n/* Responsive Fluid Media Adaptations */\n@media (max-width: 768px) {\n    .sf-ai-editor-notice-wrapper {\n        padding: 40px 0;\n    }\n\n    .sf-ai-editor-notice-wrapper .sf-ai-notice-container {\n        padding: 0 20px;\n    }\n\n    .sf-ai-editor-notice-wrapper .sf-ai-notice-layout {\n        grid-template-columns: 1fr;\n        gap: 24px;\n        text-align: center;\n    }\n\n    .sf-ai-editor-notice-wrapper .sf-ai-visual-column {\n        margin: 0 auto;\n        padding-top: 0;\n    }\n\n    .sf-ai-editor-notice-wrapper .sf-ai-main-title {\n        font-size: 26px;\n    }\n\n    .sf-ai-editor-notice-wrapper .sf-ai-p {\n        text-align: center;\n    }\n\n    .sf-ai-editor-notice-wrapper .sf-ai-perks-list {\n        justify-content: center;\n        gap: 16px;\n        padding-top: 16px;\n    }\n}",
    "js": "(function() {\n    // Scoped internal selector safely handling single or multiple blank component instances\n    const wrappers = document.querySelectorAll(\".sf-ai-editor-notice-wrapper\");\n    if (!wrappers.length) return;\n\n    const executeComponentFade = () => {\n        wrappers.forEach(wrapper => {\n            const noticeLayout = wrapper.querySelector(\".sf-ai-notice-layout\");\n            if (noticeLayout) {\n                noticeLayout.classList.add(\"sf-init-fade\");\n            }\n        });\n    };\n\n    // Handle lifecycle timings reliably regardless of script load delays\n    if (document.readyState === \"complete\" || document.readyState === \"interactive\") {\n        setTimeout(executeComponentFade, 150);\n    } else {\n        document.addEventListener(\"DOMContentLoaded\", executeComponentFade);\n    }\n})();"
}

Yöntem 2: Entegre API Akışı

API anahtarınızı girerek doğrudan bu panel üzerinden tek tıkla otomatik bileşen üretin.

Yapay Zeka Servisi

Gemini API Anahtarı

Prompt Önizlemesi

                                                        Prompt önizlemesi yükleniyor...
                                                    

Buton Yazısı

Bağlantı (URL)

Görsel Stil (CSS)

Yazı Rengi

Arka Plan

Hover Rengi

Hover Arka Plan

Yazı Boyutu

Köşe Yuvarlaklığı

İç Boşluk (Padding)

Dış Boşluk (Margin)

Oto Kayıt

Görsel URL veya Seçimi

Bilgisayardan Yükle

Görsel Bağlantısı (Link URL)

Görsel Stil (CSS)

Hover Arka Plan

Köşe Yuvarlaklığı

İç Boşluk (Padding)

Dış Boşluk (Margin)

Oto Kayıt

Kart / Öğe

Görsel Stil (CSS) Metin Seçildi

Yazı Rengi

Arka Plan

Hover Rengi

Hover Arka Plan

Yazı Boyutu

Köşe Yuvarlaklığı

İç Boşluk (Padding)

Dış Boşluk (Margin)

Oto Kayıt

İkon Sınıfları (CSS Class)

Görsel Stil (CSS)

Yazı Rengi

Arka Plan

Hover Rengi

Hover Arka Plan

Boyut

Köşe Yuvarlaklığı

İç Boşluk

Dış Boşluk

Oto Kayıt

Arka Plan Görseli CSS Background

Görsel URL

Bilgisayardan Yükle

Boyutlandırma

Konum

Tekrarlama

Opaklık (Overlay)

Oto Kayıt

Sayfagon

Sosyal Bağlantılar