<?php
// ==============================================================================
// GRAFTIC MEDIA - ULTRA GÜVENLİ INFLUENCER BAŞVURU PORTALI (BACKEND & FRONTEND)
// ==============================================================================
session_start();

// --- 1. VERİTABANI BAĞLANTI AYARLARI ---
$db_host = 'localhost';
$db_name = 'graftic_db';
$db_user = 'root';        // Veritabanı kullanıcı adınız
$db_pass = '';            // Veritabanı şifreniz

try {
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES => false,
    ]);
} catch (PDOException $e) {
    // Veritabanı bağlantısı yoksa hata döner
    $db_connection_error = "Veritabanı bağlantısı kurulamadı: " . $e->getMessage();
}

// CSRF Token Oluşturma
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// --- 2. AJAX POST İSTEĞİ İŞLEME (BACKEND API) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    header('Content-Type: application/json; charset=utf-8');

    if (isset($db_connection_error)) {
        echo json_encode(['success' => false, 'message' => 'Veritabanı sunucusuna bağlanılamadı. Lütfen veritabanı ayarlarını kontrol edin.']);
        exit;
    }

    // CSRF Doğrulaması
    $csrfToken = $_POST['csrf_token'] ?? '';
    if (!hash_equals($_SESSION['csrf_token'], $csrfToken)) {
        echo json_encode(['success' => false, 'message' => 'Güvenlik doğrulaması başarısız oldu (CSRF Mismatch). Lütfen sayfayı yenileyin.']);
        exit;
    }

    // Gelen Verileri Temizleme & Doğrulama
    $fullName = trim(strip_tags($_POST['fullName'] ?? ''));
    $siteUsername = strtolower(trim(strip_tags($_POST['siteUsername'] ?? '')));
    $email = filter_var(trim($_POST['email'] ?? ''), FILTER_VALIDATE_EMAIL);
    $whatsapp = trim(strip_tags($_POST['whatsapp'] ?? ''));
    $gender = trim(strip_tags($_POST['gender'] ?? ''));
    $password = $_POST['password'] ?? '';
    $kvkkApproved = isset($_POST['kvkkConsent']) && $_POST['kvkkConsent'] === '1';
    $accountsJSON = $_POST['accountsJSON'] ?? '[]';
    $accounts = json_decode($accountsJSON, true);

    // Kullanıcı Adı Temizliği (@ işareti ile başlar)
    if (!str_starts_with($siteUsername, '@')) {
        $siteUsername = '@' . ltrim($siteUsername, '@');
    }

    // Temel Doğrulamalar
    if (empty($fullName) || empty($siteUsername) || !$email || empty($whatsapp) || empty($gender) || empty($password)) {
        echo json_encode(['success' => false, 'message' => 'Lütfen kişisel bilgilerinizi eksiksiz doldurun.']);
        exit;
    }

    if (strlen($password) < 8) {
        echo json_encode(['success' => false, 'message' => 'Şifreniz en az 8 karakter uzunluğunda olmalıdır.']);
        exit;
    }

    if (!$kvkkApproved) {
        echo json_encode(['success' => false, 'message' => 'Başvuru yapabilmek için KVKK Aydınlatma Metni\'ni onaylamanız gerekmektedir.']);
        exit;
    }

    if (!is_array($accounts) || count($accounts) === 0) {
        echo json_encode(['success' => false, 'message' => 'Başvuruyu tamamlamak için en az 1 adet sosyal medya hesabı eklemelisiniz.']);
        exit;
    }

    try {
        // SQL TRANSACTION Başlat
        $pdo->beginTransaction();

        // A) Sistem Kullanıcı Adı Kontrolü (Unique site_username)
        $stmt = $pdo->prepare("SELECT id FROM influencers WHERE site_username = ?");
        $stmt->execute([$siteUsername]);
        if ($stmt->fetch()) {
            $pdo->rollBack();
            echo json_encode(['success' => false, 'message' => "Seçtiğiniz \"{$siteUsername}\" Graftic Media kullanıcı adı zaten kullanılmaktadır. Lütfen farklı bir kullanıcı adı seçin."]);
            exit;
        }

        // B) E-Posta Adresi Kontrolü
        $stmt = $pdo->prepare("SELECT id FROM influencers WHERE email = ?");
        $stmt->execute([$email]);
        if ($stmt->fetch()) {
            $pdo->rollBack();
            echo json_encode(['success' => false, 'message' => "{$email} e-posta adresi ile daha önce başvuru yapılmış."]);
            exit;
        }

        // C) Sosyal Medya Hesapları Benzersizlik Kontrolü (Aynı TikTok/IG hesabı 2. defa eklenemez)
        foreach ($accounts as $acc) {
            $platform = trim($acc['platform'] ?? '');
            $identifier = trim($acc['accountIdentifier'] ?? '');

            if ($platform !== 'YouTube' && !str_starts_with($identifier, '@')) {
                $identifier = '@' . ltrim($identifier, '@');
            }

            $stmt = $pdo->prepare("SELECT id FROM social_accounts WHERE platform = ? AND account_identifier = ?");
            $stmt->execute([$platform, $identifier]);
            if ($stmt->fetch()) {
                $pdo->rollBack();
                echo json_encode([
                    'success' => false, 
                    'message' => "Eklemeye çalıştığınız {$platform} hesabı ({$identifier}) daha önce sistemdeki başka bir başvuruya kaydedilmiş! Aynı sosyal medya hesabı birden fazla başvuruya eklenemez."
                ]);
                exit;
            }
        }

        // D) Influencer Ana Kaydını Ekletme
        $passwordHash = password_hash($password, PASSWORD_BCRYPT, ['cost' => 12]);
        $ipAddress = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
        $now = date('Y-m-d H:i:s');

        $insertUserStmt = $pdo->prepare("
            INSERT INTO influencers (site_username, full_name, email, whatsapp, gender, password_hash, ip_address, kvkk_approved_at)
            VALUES (?, ?, ?, ?, ?, ?, ?, ?)
        ");
        $insertUserStmt->execute([$siteUsername, $fullName, $email, $whatsapp, $gender, $passwordHash, $ipAddress, $now]);
        $influencerId = $pdo->lastInsertId();

        // E) Sosyal Medya Hesaplarını Kaydetme (Her hesabın kendine özel ID'si olur)
        $insertAccountStmt = $pdo->prepare("
            INSERT INTO social_accounts (influencer_id, platform, account_identifier, content_type, followers_count, price_per_video)
            VALUES (?, ?, ?, ?, ?, ?)
        ");

        $addedAccountsInfo = [];

        foreach ($accounts as $acc) {
            $platform = trim($acc['platform'] ?? '');
            $identifier = trim($acc['accountIdentifier'] ?? '');
            $contentType = trim($acc['contentType'] ?? 'Diğer');
            $followers = (int)($acc['followers'] ?? 0);
            $price = (float)($acc['pricePerVideo'] ?? 0);

            if ($platform !== 'YouTube' && !str_starts_with($identifier, '@')) {
                $identifier = '@' . ltrim($identifier, '@');
            }

            $insertAccountStmt->execute([$influencerId, $platform, $identifier, $contentType, $followers,$price]);
            $accountId =$pdo->lastInsertId();

            $addedAccountsInfo[] = [
                'accountId' => $accountId,
                'platform' => $platform,
                'identifier' => $identifier,
                'contentType' => $contentType
            ];
        }

        // İşlemleri Onayla
        $pdo->commit();

        echo json_encode([
            'success' => true,
            'message' => 'Başvurunuz başarıyla veritabanımıza kaydedildi.',
            'data' => [
                'influencerId' => $influencerId,
                'fullName' => $fullName,
                'siteUsername' => $siteUsername,
                'email' => $email,
                'accountsCount' => count($addedAccountsInfo),
                'accounts' => $addedAccountsInfo
            ]
        ]);
        exit;

    } catch (Exception $e) {
        if ($pdo->inTransaction()) {$pdo->rollBack();
        }
        echo json_encode(['success' => false, 'message' => 'Kayıt sırasında bir veritabanı hatası oluştu: ' . $e->getMessage()]);
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="tr" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graftic Media - Influencer Başvuru Portalı</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome Icons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] },
                    colors: {
                        brand: {
                            50: '#f0f3ff',
                            100: '#e4e8ff',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            900: '#312e81',
                        },
                        darkbg: '#0B0F19',
                        cardbg: '#111827',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background: radial-gradient(circle at top center, #1E1B4B 0%, #0B0F19 70%);
            min-height: 100vh;
        }
        .glass-panel {
            background: rgba(17, 24, 39, 0.75);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
    </style>
</head>
<body class="text-slate-100 font-sans antialiased py-6 px-4 sm:px-6">

    <div class="max-w-3xl mx-auto">
        
        <!-- FLOATING NAVBAR (Logo yok, Sade & Mobil Uyumlu) -->
        <header class="glass-panel rounded-2xl px-5 py-3.5 mb-8 shadow-xl flex items-center justify-between">
            <div class="font-extrabold text-base sm:text-lg tracking-wider text-white">
                GRAFTIC MEDIA
            </div>
            <a href="https://graftic.com.tr" class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-xl bg-slate-800/80 hover:bg-slate-700 text-slate-200 text-xs font-semibold border border-slate-700 transition active:scale-95">
                <i class="fa-solid fa-arrow-left text-[10px]"></i>
                <span>Ana Sayfaya Dön</span>
            </a>
        </header>

        <!-- Main Form Container -->
        <form id="influencerForm" onsubmit="handleFormSubmit(event)" class="glass-panel rounded-3xl p-6 sm:p-10 shadow-2xl space-y-8">
            <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
            
            <!-- SECTION 1: Personal & Account Identity -->
            <div>
                <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <span class="flex items-center justify-center w-7 h-7 rounded-lg bg-brand-600/20 text-brand-400 text-xs">1</span>
                    Kişisel Bilgiler & Hesap Kimliği
                </h2>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    
                    <!-- Ad Soyad -->
                    <div>
                        <label for="fullName" class="block text-xs font-medium text-slate-300 mb-1">Ad Soyad <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-500">
                                <i class="fa-regular fa-user"></i>
                            </span>
                            <input type="text" id="fullName" name="fullName" required placeholder="Örn: Burak Yılmaz"
                                class="w-full pl-10 pr-4 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white placeholder-slate-500 outline-none transition">
                        </div>
                    </div>

                    <!-- Graftic Media Sistem Kullanıcı Adı -->
                    <div>
                        <label for="siteUsername" class="block text-xs font-medium text-slate-300 mb-1">Graftic Kullanıcı Adı <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <input type="text" id="siteUsername" name="siteUsername" required placeholder="@kullaniciadi"
                                oninput="formatUsernameInput(this)"
                                class="w-full px-3.5 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white placeholder-slate-500 outline-none transition">
                        </div>
                        <p class="text-[10px] text-slate-400 mt-1">Sistemimizdeki size özel kullanıcı adınızdır (Benzersizdir).</p>
                    </div>

                    <!-- E-Posta Adresi -->
                    <div>
                        <label for="email" class="block text-xs font-medium text-slate-300 mb-1">E-Posta Adresi <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-500">
                                <i class="fa-regular fa-envelope"></i>
                            </span>
                            <input type="email" id="email" name="email" required placeholder="ornek@grafticmedia.com"
                                class="w-full pl-10 pr-4 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white placeholder-slate-500 outline-none transition">
                        </div>
                    </div>

                    <!-- WhatsApp Numarası -->
                    <div>
                        <label for="whatsapp" class="block text-xs font-medium text-slate-300 mb-1">WhatsApp Telefon Numarası <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-emerald-500">
                                <i class="fa-brands fa-whatsapp text-base"></i>
                            </span>
                            <input type="tel" id="whatsapp" name="whatsapp" required placeholder="05XX XXX XX XX"
                                class="w-full pl-10 pr-4 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white placeholder-slate-500 outline-none transition">
                        </div>
                        <p class="text-[10px] text-slate-400 mt-1">Reklam ve iş birliği teklifleri için ulaşacağız.</p>
                    </div>

                    <!-- Cinsiyet -->
                    <div class="sm:col-span-2">
                        <label for="gender" class="block text-xs font-medium text-slate-300 mb-1">Cinsiyet <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-500">
                                <i class="fa-solid fa-venus-mars"></i>
                            </span>
                            <select id="gender" name="gender" required
                                class="w-full pl-10 pr-4 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white outline-none transition appearance-none">
                                <option value="" disabled selected>Seçiniz</option>
                                <option value="Kadin">Kadın</option>
                                <option value="Erkek">Erkek</option>
                                <option value="Diger">Belirtmek İstemiyorum / Diğer</option>
                            </select>
                            <span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-slate-500">
                                <i class="fa-solid fa-chevron-down text-xs"></i>
                            </span>
                        </div>
                    </div>

                </div>
            </div>

            <hr class="border-slate-800">

            <!-- SECTION 2: Security & Password -->
            <div>
                <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <span class="flex items-center justify-center w-7 h-7 rounded-lg bg-brand-600/20 text-brand-400 text-xs">2</span>
                    Giriş Şifresi Oluşturun
                </h2>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- Şifre -->
                    <div>
                        <label for="password" class="block text-xs font-medium text-slate-300 mb-1">Şifre <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <input type="password" id="password" name="password" required placeholder="••••••••"
                                oninput="checkPasswordStrength()"
                                class="w-full pl-3.5 pr-10 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white placeholder-slate-500 outline-none transition">
                            <button type="button" onclick="togglePasswordVisibility('password', 'pwdToggleIcon1')" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-500 hover:text-slate-300">
                                <i id="pwdToggleIcon1" class="fa-regular fa-eye text-xs"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Şifre Tekrarı -->
                    <div>
                        <label for="confirmPassword" class="block text-xs font-medium text-slate-300 mb-1">Şifre Tekrarı <span class="text-rose-500">*</span></label>
                        <div class="relative">
                            <input type="password" id="confirmPassword" required placeholder="••••••••"
                                oninput="checkPasswordStrength()"
                                class="w-full pl-3.5 pr-10 py-3 bg-slate-900/80 border border-slate-700/80 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm text-white placeholder-slate-500 outline-none transition">
                            <button type="button" onclick="togglePasswordVisibility('confirmPassword', 'pwdToggleIcon2')" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-500 hover:text-slate-300">
                                <i id="pwdToggleIcon2" class="fa-regular fa-eye text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Şifre Gücü Ölçer Barı -->
                <div class="mt-3">
                    <div class="flex items-center justify-between text-xs mb-1.5">
                        <span class="text-slate-400 font-medium">Şifre Gücü:</span>
                        <span id="pwdStrengthText" class="font-bold text-slate-500">Girilmedi</span>
                    </div>
                    <div class="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
                        <div id="pwdStrengthBar" class="h-full w-0 transition-all duration-300 bg-slate-600"></div>
                    </div>
                </div>
            </div>

            <hr class="border-slate-800">

            <!-- SECTION 3: Social Media Accounts -->
            <div>
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h2 class="text-lg font-bold text-white flex items-center gap-2">
                            <span class="flex items-center justify-center w-7 h-7 rounded-lg bg-brand-600/20 text-brand-400 text-xs">3</span>
                            Sosyal Medya Hesapları <span class="text-rose-500">*</span>
                        </h2>
                        <p class="text-xs text-slate-400 mt-1">Eklenen her hesap ayrı ID ile sistemimize tanımlanır.</p>
                    </div>

                    <button type="button" onclick="openPlatformModal()"
                        class="px-4 py-2.5 bg-brand-600 hover:bg-brand-500 text-white rounded-xl text-xs font-semibold flex items-center gap-2 transition shadow-lg shadow-brand-600/20 active:scale-95">
                        <i class="fa-solid fa-plus"></i> Hesap Ekle
                    </button>
                </div>

                <!-- Dynamic Accounts Container -->
                <div id="accountsContainer" class="space-y-4">
                    <div id="emptyAccountsState" class="text-center py-8 border-2 border-dashed border-slate-800 rounded-2xl">
                        <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-slate-800/60 flex items-center justify-center text-slate-500">
                            <i class="fa-solid fa-share-nodes text-xl"></i>
                        </div>
                        <p class="text-slate-400 text-xs sm:text-sm font-medium">Henüz hiç hesap eklenmedi</p>
                        <p class="text-slate-500 text-xs mt-1">Yukarıdaki <b>"Hesap Ekle"</b> butonuna basarak hesaplarınızı ekleyin.</p>
                    </div>
                </div>
            </div>

            <hr class="border-slate-800">

            <!-- SECTION 4: KVKK Consent -->
            <div>
                <div class="flex items-start gap-3 bg-slate-900/50 p-4 rounded-2xl border border-slate-800">
                    <input type="checkbox" id="kvkkConsent" name="kvkkConsent" value="1" required
                        class="mt-1 w-4 h-4 rounded border-slate-700 bg-slate-950 text-brand-600 focus:ring-brand-500 focus:ring-offset-slate-900">
                    <label for="kvkkConsent" class="text-xs text-slate-300 leading-relaxed cursor-pointer">
                        6698 Sayılı KVKK kapsamında kişisel verilerimin işlenmesine ilişkin
                        <button type="button" onclick="openKvkkModal()" class="text-brand-400 font-semibold underline hover:text-brand-300">
                            Aydınlatma Metni
                        </button>'ni okudum, anladım ve kabul ediyorum. <span class="text-rose-500">*</span>
                    </label>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="pt-2">
                <button type="submit" id="submitBtn"
                    class="w-full py-4 bg-gradient-to-r from-brand-600 to-indigo-600 hover:from-brand-500 hover:to-indigo-500 text-white font-bold rounded-2xl shadow-xl shadow-brand-600/25 transition duration-200 transform active:scale-[0.99] text-base flex items-center justify-center gap-2">
                    <i class="fa-solid fa-paper-plane"></i> Başvuruyu Tamamla & Kaydet
                </button>
            </div>
        </form>

    </div>

    <!-- PLATFORM MODAL -->
    <div id="platformModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden opacity-0 transition-opacity duration-200">
        <div class="bg-cardbg border border-slate-700/70 rounded-3xl p-6 sm:p-8 max-w-md w-full shadow-2xl transform scale-95 transition-transform duration-200" id="modalContent">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-bold text-white">Platform Seçin</h3>
                    <p class="text-xs text-slate-400">Eklemek istediğiniz sosyal medya hesabını seçin</p>
                </div>
                <button type="button" onclick="closePlatformModal()" class="w-8 h-8 rounded-full bg-slate-800 hover:bg-slate-700 text-slate-400 flex items-center justify-center transition">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 gap-3">
                <button type="button" onclick="addAccountCard('instagram')" class="p-4 bg-slate-900 border border-slate-800 hover:border-pink-500/50 rounded-2xl flex items-center gap-4 transition text-left">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-tr from-amber-500 via-rose-500 to-purple-600 flex items-center justify-center text-white text-2xl shadow">
                        <i class="fa-brands fa-instagram"></i>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-white">Instagram</h4>
                        <p class="text-xs text-slate-400">Reels & Post içerik üreticileri için</p>
                    </div>
                </button>
                <button type="button" onclick="addAccountCard('tiktok')" class="p-4 bg-slate-900 border border-slate-800 hover:border-teal-500/50 rounded-2xl flex items-center gap-4 transition text-left">
                    <div class="w-12 h-12 rounded-xl bg-black border border-slate-700 flex items-center justify-center text-white text-2xl shadow">
                        <i class="fa-brands fa-tiktok"></i>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-white">TikTok</h4>
                        <p class="text-xs text-slate-400">Kısa dikey video üreticileri için</p>
                    </div>
                </button>
                <button type="button" onclick="addAccountCard('youtube')" class="p-4 bg-slate-900 border border-slate-800 hover:border-red-500/50 rounded-2xl flex items-center gap-4 transition text-left">
                    <div class="w-12 h-12 rounded-xl bg-red-600 flex items-center justify-center text-white text-2xl shadow">
                        <i class="fa-brands fa-youtube"></i>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-white">YouTube</h4>
                        <p class="text-xs text-slate-400">Kanal veya Video içerik üreticileri için</p>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <!-- KVKK MODAL -->
    <div id="kvkkModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden opacity-0 transition-opacity duration-200">
        <div class="bg-cardbg border border-slate-700/70 rounded-3xl p-6 sm:p-8 max-w-2xl w-full max-h-[85vh] flex flex-col shadow-2xl">
            <div class="flex items-center justify-between pb-4 border-b border-slate-800 mb-4">
                <h3 class="text-lg font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-shield-halved text-brand-400"></i> KVKK Aydınlatma Metni
                </h3>
                <button type="button" onclick="closeKvkkModal()" class="w-8 h-8 rounded-full bg-slate-800 text-slate-400 flex items-center justify-center">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="overflow-y-auto pr-2 space-y-4 text-xs text-slate-300 leading-relaxed">
                <p><b>Graftic Media</b> olarak 6698 sayılı Kişisel Verilerin Korunması Kanunu (“KVKK”) uyarınca kişisel verilerinizin güvenliğine önem veriyoruz.</p>
                <h4 class="font-bold text-white">1. Veri Sorumlusu</h4>
                <p>Kişisel verileriniz, Graftic Media tarafından KVKK hükümlerine uygun olarak işlenmektedir.</p>
                <h4 class="font-bold text-white">2. İşlenen Veriler ve İşleme Amaçları</h4>
                <p>Toplanan ad, soyad, e-posta, WhatsApp numarası ve sosyal medya hesap bilgileriniz influencer başvurularını değerlendirmek, reklam ajansı süreçlerini yürütmek için işlenir.</p>
                <h4 class="font-bold text-white">3. Haklarınız</h4>
                <p>KVKK’nın 11. maddesi uyarınca dilediğiniz zaman verilerinizin silinmesini veya düzeltilmesini talep edebilirsiniz.</p>
            </div>
            <div class="pt-4 border-t border-slate-800 mt-4 flex justify-end">
                <button type="button" onclick="acceptKvkkFromModal()" class="px-5 py-2.5 bg-brand-600 hover:bg-brand-500 text-white rounded-xl text-xs font-semibold">
                    Okudum ve Onaylıyorum
                </button>
            </div>
        </div>
    </div>

    <!-- JAVASCRIPT LOGIC -->
    <script>
        let accountCounter = 0;

        const platformConfig = {
            instagram: { name: 'Instagram', icon: 'fa-brands fa-instagram', bgGradient: 'from-amber-500 via-rose-500 to-purple-600', isLink: false },
            tiktok: { name: 'TikTok', icon: 'fa-brands fa-tiktok', bgGradient: 'from-slate-800 to-black', isLink: false },
            youtube: { name: 'YouTube', icon: 'fa-brands fa-youtube', bgGradient: 'from-red-600 to-red-700', isLink: true }
        };

        function openPlatformModal() { document.getElementById('platformModal').classList.remove('hidden', 'opacity-0'); }
        function closePlatformModal() { document.getElementById('platformModal').classList.add('hidden', 'opacity-0'); }
        function openKvkkModal() { document.getElementById('kvkkModal').classList.remove('hidden', 'opacity-0'); }
        function closeKvkkModal() { document.getElementById('kvkkModal').classList.add('hidden', 'opacity-0'); }

        function acceptKvkkFromModal() {
            document.getElementById('kvkkConsent').checked = true;
            closeKvkkModal();
        }

        function formatUsernameInput(input) {
            let val = input.value.trim();
            if (val.length > 0) {
                val = val.replace(/^@+/, '');
                input.value = '@' + val;
            } else {
                input.value = '';
            }
        }

        function togglePasswordVisibility(fieldId, iconId) {
            const field = document.getElementById(fieldId);
            const icon = document.getElementById(iconId);
            if (field.type === 'password') {
                field.type = 'text';
                icon.className = 'fa-regular fa-eye-slash text-xs';
            } else {
                field.type = 'password';
                icon.className = 'fa-regular fa-eye text-xs';
            }
        }

        function checkPasswordStrength() {
            const pwd = document.getElementById('password').value;
            const bar = document.getElementById('pwdStrengthBar');
            const text = document.getElementById('pwdStrengthText');

            if (!pwd) {
                bar.style.width = '0%';
                text.innerText = 'Girilmedi';
                text.className = 'font-bold text-slate-500';
                return;
            }

            let score = 0;
            if (pwd.length >= 8) score += 40;
            if (/[A-Z]/.test(pwd) || /[0-9]/.test(pwd)) score += 30;
            if (/[^A-Za-z0-9]/.test(pwd)) score += 30;

            if (score < 40) {
                bar.style.width = '33%';
                bar.className = 'h-full transition-all duration-300 bg-rose-500';
                text.innerText = 'Zayıf';
                text.className = 'font-bold text-rose-400';
            } else if (score < 80) {
                bar.style.width = '66%';
                bar.className = 'h-full transition-all duration-300 bg-amber-500';
                text.innerText = 'Orta';
                text.className = 'font-bold text-amber-400';
            } else {
                bar.style.width = '100%';
                bar.className = 'h-full transition-all duration-300 bg-emerald-500';
                text.innerText = 'Güçlü';
                text.className = 'font-bold text-emerald-400';
            }
        }

        function addAccountCard(platformKey) {
            closePlatformModal();
            accountCounter++;

            const config = platformConfig[platformKey];
            const container = document.getElementById('accountsContainer');
            const emptyState = document.getElementById('emptyAccountsState');
            if (emptyState) emptyState.classList.add('hidden');

            const cardId = `accountCard_${accountCounter}`;
            let identifierHTML = config.isLink ? 
                `<div>
                    <label class="block text-xs font-medium text-slate-300 mb-1">Kanal / Video Linki <span class="text-rose-500">*</span></label>
                    <input type="url" name="accountIdentifier" required data-platform="${config.name}" placeholder="https://youtube.com/@kanal"
                        class="w-full px-3.5 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-sm text-white outline-none focus:ring-2 focus:ring-brand-500">
                </div>` :
                `<div>
                    <label class="block text-xs font-medium text-slate-300 mb-1">Kullanıcı Adı <span class="text-rose-500">*</span></label>
                    <input type="text" name="accountIdentifier" required data-platform="${config.name}" placeholder="@kullaniciadi" oninput="formatUsernameInput(this)"
                        class="w-full px-3.5 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-sm text-white outline-none focus:ring-2 focus:ring-brand-500">
                </div>`;

            const cardHTML = `
                <div id="${cardId}" class="account-card bg-slate-900/90 border border-slate-800 rounded-2xl p-5 relative shadow-lg">
                    <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-gradient-to-tr ${config.bgGradient} flex items-center justify-center text-white text-sm">
                                <i class="${config.icon}"></i>
                            </div>
                            <h4 class="text-sm font-bold text-white">${config.name} Hesabı</h4>
                        </div>
                        <button type="button" onclick="removeAccountCard('${cardId}')" class="text-xs text-rose-400 bg-rose-500/10 px-3 py-1.5 rounded-lg border border-rose-500/20">
                            Sil
                        </button>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        ${identifierHTML}
                        <div>
                            <label class="block text-xs font-medium text-slate-300 mb-1">İçerik Türü <span class="text-rose-500">*</span></label>
                            <select name="contentType" required class="w-full px-3.5 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-sm text-white outline-none">
                                <option value="" disabled selected>Seçiniz</option>
                                <option value="Vlog">Vlog / Günlük Yaşam</option>
                                <option value="Dans">Dans</option>
                                <option value="Lip Sync">Lip Sync</option>
                                <option value="Bilgi / Eğitim">Bilgi / Eğitim</option>
                                <option value="Oyun / Gaming">Oyun / Gaming</option>
                                <option value="Komedi / Mizah">Komedi / Mizah</option>
                                <option value="Moda & Güzellik">Moda & Güzellik</option>
                                <option value="Teknoloji">Teknoloji</option>
                                <option value="Spor & Fitness">Spor & Fitness</option>
                                <option value="Diğer">Diğer</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-300 mb-1">Takipçi / Abone Sayısı <span class="text-rose-500">*</span></label>
                            <input type="number" name="followers" min="1" required placeholder="Örn: 50000" class="w-full px-3.5 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-sm text-white outline-none">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-300 mb-1">Video Başı Ücret (TL) <span class="text-rose-500">*</span></label>
                            <input type="number" name="pricePerVideo" min="0" required placeholder="Örn: 5000" class="w-full px-3.5 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-sm text-white outline-none">
                        </div>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', cardHTML);
        }

        function removeAccountCard(cardId) {
            document.getElementById(cardId)?.remove();
            if (document.querySelectorAll('.account-card').length === 0) {
                document.getElementById('emptyAccountsState')?.classList.remove('hidden');
            }
        }

        async function handleFormSubmit(event) {
            event.preventDefault();

            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            if (password !== confirmPassword) {
                alert('Şifreler birbiriyle uyuşmuyor! Lütfen kontrol edin.');
                return;
            }

            const cards = document.querySelectorAll('.account-card');
            if (cards.length === 0) {
                alert('Başvuru yapabilmek için lütfen en az 1 adet sosyal medya hesabı ekleyin.');
                return;
            }

            const accounts = [];
            cards.forEach(card => {
                const identifierInput = card.querySelector('input[name="accountIdentifier"]');
                accounts.push({
                    platform: identifierInput.getAttribute('data-platform'),
                    accountIdentifier: identifierInput.value,
                    contentType: card.querySelector('select[name="contentType"]').value,
                    followers: card.querySelector('input[name="followers"]').value,
                    pricePerVideo: card.querySelector('input[name="pricePerVideo"]').value
                });
            });

            const form = event.target;
            const formData = new FormData(form);
            formData.append('accountsJSON', JSON.stringify(accounts));

            const btn = document.getElementById('submitBtn');
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> İşleniyor...';

            try {
                const response = await fetch('', {
                    method: 'POST',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    body: formData
                });

                const result = await response.json();

                if (result.success) {
                    alert(`Başvurunuz Başarıyla Alındı!\nGraftic Kullanıcı Adı: ${result.data.siteUsername}\nKayıtlı Hesap Sayısı: ${result.data.accountsCount}`);
                    form.reset();
                    document.getElementById('accountsContainer').innerHTML = `
                        <div id="emptyAccountsState" class="text-center py-8 border-2 border-dashed border-slate-800 rounded-2xl">
                            <p class="text-slate-400 text-xs sm:text-sm font-medium">Henüz hiç hesap eklenmedi</p>
                        </div>
                    `;
                } else {
                    alert('HATA: ' + result.message);
                }
            } catch (err) {
                alert('Sunucu hatası oluştu. Lütfen veritabanı bağlantınızı kontrol edin.');
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Başvuruyu Tamamla & Kaydet';
            }
        }
    </script>
</body>
</html>