@extends('layouts.app')

@section('title', 'Destek Ol - Sivas Dijital Hafıza')

@section('content')
<div class="support-page-wrapper">
    <!-- ─── HERO GİRİŞ BÖLÜMÜ ─────────────────── -->
    <div class="support-hero">
        <div class="hero-backdrop"></div>
        <div class="container relative-z">
            <span class="support-badge"><i class="fas fa-hand-holding-heart"></i> GELECEĞİ BİRLİKTE İNŞA EDELİM</span>
            <h1>Sivas Hafızasına Destek Olun</h1>
            <p>Sivas'ın kültürel, tarihi ve edebi değerlerini korumak ve gelecek kuşaklara kusursuz bir miras bırakmak için siz de katkıda bulunabilirsiniz.</p>
        </div>
    </div>

    <!-- ─── DESTEK KANALLARI (3 ANA SÜTUN) ──────── -->
    <div class="container py-section">
        <div class="section-header-center">
            <span class="section-subtitle">Nasıl Katkı Sağlayabilirsiniz?</span>
            <h2>Destek Modelinizi Seçin</h2>
            <p>Platformumuz hiçbir ticari amaç gütmeden Sivas sevdalılarının gönüllü çabalarıyla büyümektedir. Siz de aşağıdaki yöntemlerden biriyle bu harekete omuz verebilirsiniz.</p>
        </div>

        <div class="support-channels-grid">
            <!-- 1. Arşiv Desteği -->
            <div class="support-card">
                <div class="support-card-icon sc-gold"><i class="fas fa-archive"></i></div>
                <h3>Kültürel & Arşiv Desteği</h3>
                <p>Sandığınızda saklı duran eski aile fotoğrafları, ata mirası tapu veya ferman belgeleri, asırlık mektuplar veya bildiğiniz unutulmaya yüz tutmuş yöresel yemek tarifleri...</p>
                <ul class="support-features">
                    <li><i class="fas fa-check"></i> Tarihi Fotoğraf ve Negatifler</li>
                    <li><i class="fas fa-check"></i> Eski Mektup, Belge ve Kitaplar</li>
                    <li><i class="fas fa-check"></i> Türkü, Mani ve Edebi Eserler</li>
                </ul>
                @auth('uye')
                    <a href="{{ route('front.uye.dashboard') }}" class="support-card-btn btn-gold"><i class="fas fa-cloud-upload-alt"></i> Hemen Arşive Ekle</a>
                @else
                    <a href="{{ route('front.uye.login') }}" class="support-card-btn btn-gold"><i class="fas fa-user-plus"></i> Üye Ol & Gönder</a>
                @endauth
            </div>

            <!-- 2. Gönüllü Çalışma -->
            <div class="support-card">
                <div class="support-card-icon sc-blue"><i class="fas fa-laptop-code"></i></div>
                <h3>Gönüllü & Akademik Çalışma</h3>
                <p>Eski Türkçe (Osmanlıca) yazılı belgelerin transkripsiyonu (dijital yazıya dökülmesi), görsel betimlemelerin yapılması, yabancı dillere çevrilmesi veya veri doğrulanmasında moderatörlük...</p>
                <ul class="support-features">
                    <li><i class="fas fa-check"></i> Osmanlıca Belge Transkripsiyonu</li>
                    <li><i class="fas fa-check"></i> Akademik Makale ve Doğrulama</li>
                    <li><i class="fas fa-check"></i> Görsel Metin Betimleme ve Çeviri</li>
                </ul>
                <a href="#basvuru-formu" class="support-card-btn btn-blue" onclick="scrollToForm()"><i class="fas fa-pen-fancy"></i> Gönüllü Başvurusu Yap</a>
            </div>

            <!-- 3. Teknolojik Altyapı Desteği -->
            <div class="support-card">
                <div class="support-card-icon sc-red"><i class="fas fa-server"></i></div>
                <h3>Teknoloji & Ekipman Desteği</h3>
                <p>Kültürel belgelerin yüksek kalitede taranması için kitap tarayıcı donanım hibeleri, devasa dijital arşivimizin barınması için sunucu (hosting/storage) desteği veya yazılımsal altyapı sponsorlukları...</p>
                <ul class="support-features">
                    <li><i class="fas fa-check"></i> Profesyonel Kitap Tarayıcı Hibe</li>
                    <li><i class="fas fa-check"></i> Storage (Depolama) & Sunucu Sponsorluğu</li>
                    <li><i class="fas fa-check"></i> Teknik Yazılım Entegrasyon Desteği</li>
                </ul>
                <a href="#basvuru-formu" class="support-card-btn btn-red" onclick="scrollToForm()"><i class="fas fa-envelope"></i> Bizimle İletişime Geç</a>
            </div>
        </div>
    </div>

    <!-- ─── ETKİLEŞİMLİ BAŞVURU FORMU ───────────── -->
    <div class="form-section" id="basvuru-formu">
        <div class="container">
            <div class="form-container-card">
                <div class="form-header">
                    <h2>Destek & Gönüllülük Başvuru Formu</h2>
                    <p>Sivas Hafızası'na verebileceğiniz destek türünü seçin ve formu doldurun. Editör ekibimiz en kısa sürede sizinle irtibata geçecektir.</p>
                </div>

                <!-- Form Başarılı Uyarısı (JS ile kontrol edilecek) -->
                <div class="alert alert-success d-none" id="successAlert">
                    <i class="fas fa-check-circle"></i> Başvurunuz başarıyla alınmıştır! Sivas Dijital Hafıza ekibi olarak gösterdiğiniz ilgi ve hassasiyet için gönülden teşekkür ederiz.
                </div>

                <form onsubmit="submitSupportForm(event)" class="interactive-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="ad_soyad">Adınız Soyadınız <span class="required">*</span></label>
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" id="ad_soyad" required placeholder="Örn: Ahmet Yılmaz">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="eposta">E-Posta Adresiniz <span class="required">*</span></label>
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="eposta" required placeholder="Örn: ahmet@example.com">
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="telefon">Telefon Numaranız</label>
                            <div class="input-with-icon">
                                <i class="fas fa-phone-alt"></i>
                                <input type="tel" id="telefon" placeholder="Örn: 0555 123 45 67">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="destek_turu">Destek Vermek İstediğiniz Alan <span class="required">*</span></label>
                            <div class="input-with-icon">
                                <i class="fas fa-hand-holding-heart"></i>
                                <select id="destek_turu" required>
                                    <option value="" disabled selected>Lütfen bir alan seçin...</option>
                                    <option value="arsiv">Kültürel & Arşiv Desteği (Fotoğraf, Belge vb.)</option>
                                    <option value="gonullu">Gönüllü & Akademik Çalışma (Transkripsiyon, moderasyon vb.)</option>
                                    <option value="teknoloji">Teknoloji & Ekipman Desteği (Tarayıcı, Sunucu vb.)</option>
                                    <option value="diger">Diğer İşbirlikleri ve Projeler</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mesaj">Katkı Sağlayabileceğiniz Detaylar / Mesajınız <span class="required">*</span></label>
                        <div class="input-with-icon align-start">
                            <i class="fas fa-pencil-alt icon-align"></i>
                            <textarea id="mesaj" rows="5" required placeholder="Arşivinizi, uzmanlık alanınızı veya platformumuza nasıl katkı sağlamak istediğinizi kısaca açıklayınız..."></textarea>
                        </div>
                    </div>

                    <div class="form-submit-container">
                        <button type="submit" class="btn-submit-support">
                            <i class="fas fa-paper-plane"></i> Başvuruyu Gönder
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ─── FİNANSAL DESTEK VE BAĞI^ ALANI (SİVİL KATILIM) ─── -->
    <div class="financial-support-section">
        <div class="container">
            <div class="financial-card">
                <div class="financial-badge"><i class="fas fa-heart" style="color: #e11d48; margin-right: 0.35rem;"></i> SİVİL KATILIM & BAĞIŞ</div>
                <h2>Sürdürülebilir Bir Sivas Hafızası İçin Finansal Katkı</h2>
                <p class="financial-lead">Bu çalışma, tamamen sivil ve kâr amacı gütmeyen bir şehir inisiyatifi olup herhangi bir devlet fonu veya resmi kurum bütçesi olmadan yürütülmektedir. Sunucularımızın (Cloud Storage) açık kalması, domain/yazılım lisansları ve tarihi eserlerin yüksek kalitede taranması için yapacağınız her küçük katkı, bu dijital kütüphanenin ömrünü uzatacaktır.</p>
                
                <div class="iban-grid">
                    <!-- Ziraat Bankası -->
                    <div class="iban-card">
                        <div class="bank-logo-header">
                            <span class="bank-name"><i class="fas fa-university"></i> Ziraat Bankası</span>
                            <span class="currency">TL Hesabı</span>
                        </div>
                        <div class="iban-body">
                            <div class="info-row">
                                <span class="info-label">Alıcı Adı:</span>
                                <span class="info-value">Sivas Dijital Hafıza Girişimi</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">IBAN Numarası:</span>
                                <span class="info-value iban-text" id="ibanText1">TR89 0001 0007 9999 8888 7777 66</span>
                            </div>
                        </div>
                        <button class="btn-copy-iban" onclick="copyIban('ibanText1', this)">
                            <i class="far fa-copy"></i> IBAN'ı Kopyala
                        </button>
                    </div>

                    <!-- VakıfBank -->
                    <div class="iban-card">
                        <div class="bank-logo-header">
                            <span class="bank-name"><i class="fas fa-university"></i> VakıfBank</span>
                            <span class="currency">TL Hesabı</span>
                        </div>
                        <div class="iban-body">
                            <div class="info-row">
                                <span class="info-label">Alıcı Adı:</span>
                                <span class="info-value">Sivas Dijital Hafıza Girişimi</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">IBAN Numarası:</span>
                                <span class="info-value iban-text" id="ibanText2">TR42 0001 5008 1111 2222 3333 44</span>
                            </div>
                        </div>
                        <button class="btn-copy-iban" onclick="copyIban('ibanText2', this)">
                            <i class="far fa-copy"></i> IBAN'ı Kopyala
                        </button>
                    </div>
                </div>

                <div class="financial-footer-note">
                    <i class="fas fa-info-circle" style="font-size: 1.1rem; color: #d97706;"></i> 
                    <span>Bağış gönderirken açıklama kısmına <strong>"Sivas Hafızası Gönüllü Bağış"</strong> yazmanızı rica ederiz.</span>
                </div>
            </div>
        </div>
    </div>
</div>

@section('styles')
<style>
    .support-page-wrapper {
        font-family: 'Inter', sans-serif;
        background: #f8fafc;
        color: #334155;
    }

    /* ─── FİNANSAL DESTEK STİLLERİ ───────────────────── */
    .financial-support-section {
        background: #f1f5f9;
        padding: 5rem 0;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }
    .financial-card {
        background: white;
        border-radius: 20px;
        padding: 4rem 3rem;
        box-shadow: 0 15px 35px rgba(0,0,0,0.04);
        border: 1px solid #e2e8f0;
        max-width: 950px;
        margin: 0 auto;
        text-align: center;
    }
    .financial-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #fff1f2;
        color: #e11d48;
        padding: 0.4rem 1.2rem;
        border-radius: 99px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 1.5rem;
        border: 1px solid #ffe4e6;
    }
    .financial-card h2 {
        font-size: 2.2rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
    }
    .financial-lead {
        font-size: 1.1rem;
        color: #475569;
        max-width: 780px;
        margin: 0 auto 3rem auto;
        line-height: 1.7;
    }
    .iban-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-bottom: 2.5rem;
        text-align: left;
    }
    .iban-card {
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        border-radius: 14px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: border-color 0.2s;
    }
    .iban-card:hover { border-color: #1a237e; }
    .bank-logo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    .bank-name {
        font-weight: 700;
        color: #1e293b;
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .bank-name i { color: #1a237e; }
    .currency {
        background: #e2e8f0;
        color: #475569;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.25rem 0.6rem;
        border-radius: 6px;
    }
    .iban-body {
        margin-bottom: 1.5rem;
    }
    .info-row {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 1rem;
    }
    .info-row:last-child { margin-bottom: 0; }
    .info-label { font-size: 0.8rem; color: #64748b; font-weight: 600; text-transform: uppercase; }
    .info-value { font-size: 0.95rem; color: #1e293b; font-weight: 700; }
    .iban-text {
        font-family: 'Courier New', Courier, monospace;
        font-size: 1.05rem;
        background: #f1f5f9;
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        letter-spacing: 0.05em;
        user-select: all;
    }
    .btn-copy-iban {
        background: white;
        color: #1a237e;
        border: 1px solid #1a237e;
        padding: 0.75rem 1.25rem;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }
    .btn-copy-iban:hover {
        background: #1a237e;
        color: white;
    }
    .financial-footer-note {
        font-size: 0.95rem;
        background: #fffbeb;
        border: 1px solid #fef3c7;
        color: #b45309;
        padding: 1rem 1.5rem;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
    }

    .relative-z { position: relative; z-index: 10; }
    .py-section { padding: 5rem 0; }
    .section-subtitle {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #1a237e;
        margin-bottom: 0.75rem;
    }

    /* ─── HERO ALANI ────────────────────────────────── */
    .support-hero {
        position: relative;
        background: linear-gradient(135deg, #1e3b8a 0%, #111827 100%);
        padding: 6rem 0 7rem 0;
        text-align: center;
        color: white;
        overflow: hidden;
    }
    .hero-backdrop {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 80% 20%, rgba(251, 192, 45, 0.15) 0%, transparent 40%),
                          radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 40%);
    }
    .support-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        color: #fbc02d;
        padding: 0.4rem 1.2rem;
        border-radius: 99px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        backdrop-filter: blur(4px);
    }
    .support-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.02em; }
    .support-hero p { font-size: 1.2rem; color: #cbd5e1; max-width: 800px; margin: 0 auto; line-height: 1.6; }

    /* ─── SECTIONS HEADERS ──────────────────────────── */
    .section-header-center {
        text-align: center;
        max-width: 750px;
        margin: 0 auto 4rem auto;
    }
    .section-header-center h2 { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
    .section-header-center p { font-size: 1.05rem; color: #64748b; line-height: 1.6; }

    /* ─── DESTEK KARTLARI (3 SÜTUN GRİD) ────────────── */
    .support-channels-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
    .support-card {
        background: white;
        border-radius: 18px;
        border: 1px solid #e2e8f0;
        padding: 3rem 2rem 2.5rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0,0,0,0.02);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .support-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.08);
        border-color: #cbd5e1;
    }
    .support-card-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    .sc-gold { background: #fef3c7; color: #fbbf24; }
    .sc-blue { background: #eff6ff; color: #3b82f6; }
    .sc-red { background: #fef2f2; color: #ef4444; }

    .support-card h3 { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
    .support-card p { font-size: 0.95rem; color: #64748b; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; }
    
    .support-features {
        list-style: none;
        padding: 0; margin: 0 0 2rem 0;
        width: 100%;
        text-align: left;
        border-top: 1px solid #f1f5f9;
        padding-top: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .support-features li {
        font-size: 0.85rem;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
    .support-features li i { font-size: 0.85rem; }
    .sc-gold + h3 + p + .support-features li i { color: #d97706; }
    .sc-blue + h3 + p + .support-features li i { color: #2563eb; }
    .sc-red + h3 + p + .support-features li i { color: #dc2626; }

    .support-card-btn {
        width: 100%;
        padding: 0.85rem 1.5rem;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }
    .btn-gold { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
    .btn-gold:hover { background: #fde68a; color: #b45309; }
    .btn-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .btn-blue:hover { background: #bfdbfe; color: #1d4ed8; }
    .btn-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
    .btn-red:hover { background: #fecaca; color: #b91c1c; }

    /* ─── FORM ALANI (INTERACTIVE CARD) ──────────────── */
    .form-section {
        background: #0f172a;
        padding: 6rem 0;
    }
    .form-container-card {
        background: white;
        border-radius: 24px;
        padding: 4rem 3.5rem;
        box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        max-width: 900px;
        margin: 0 auto;
    }
    .form-header {
        text-align: center;
        margin-bottom: 3.5rem;
    }
    .form-header h2 { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; }
    .form-header p { font-size: 1.05rem; color: #64748b; line-height: 1.6; max-width: 600px; margin: 0 auto; }

    .interactive-form {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
    }
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .form-group label {
        font-size: 0.9rem;
        font-weight: 600;
        color: #334155;
    }
    .required { color: #ef4444; }

    .input-with-icon {
        position: relative;
        display: flex;
        align-items: center;
    }
    .input-with-icon i {
        position: absolute;
        left: 1.25rem;
        color: #94a3b8;
        font-size: 1rem;
        pointer-events: none;
        transition: color 0.2s;
    }
    .input-with-icon input,
    .input-with-icon select,
    .input-with-icon textarea {
        width: 100%;
        padding: 1rem 1rem 1rem 3rem;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        font-size: 0.95rem;
        color: #1e293b;
        outline: none;
        background: #f8fafc;
        box-sizing: border-box;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .input-with-icon input:focus,
    .input-with-icon select:focus,
    .input-with-icon textarea:focus {
        border-color: #1e3a8a;
        background: white;
        box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
    }
    .input-with-icon input:focus + i,
    .input-with-icon select:focus + i,
    .input-with-icon textarea:focus + i {
        color: #1e3a8a;
    }

    .align-start { align-items: flex-start; }
    .icon-align { top: 1.2rem; }

    .btn-submit-support {
        background: linear-gradient(135deg, #1a237e 0%, #0c2461 100%);
        color: white;
        border: none;
        padding: 1.1rem 2.5rem;
        border-radius: 12px;
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        transition: opacity 0.2s, transform 0.2s;
        box-shadow: 0 10px 25px rgba(26, 35, 126, 0.25);
    }
    .btn-submit-support:hover { opacity: 0.95; transform: translateY(-2px); }
    .form-submit-container { text-align: center; margin-top: 1rem; }

    /* ALERT STYLING */
    .alert {
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        font-size: 0.95rem;
        line-height: 1.6;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .alert-success {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #15803d;
    }
    .alert-success i { font-size: 1.2rem; margin-top: 0.1rem; }
    .d-none { display: none !important; }

    /* ─── RESPONSIVE DESIGN ─────────────────────────── */
    @media (max-width: 991px) {
        .support-channels-grid { grid-template-columns: 1fr; gap: 2rem; }
        .form-container-card { padding: 3rem 2rem; }
    }
    @media (max-width: 767px) {
        .form-row { grid-template-columns: 1fr; gap: 1.5rem; }
    }
    @media (max-width: 575px) {
        .support-hero h1 { font-size: 2.2rem; }
        .support-hero p { font-size: 1rem; }
        .btn-submit-support { width: 100%; justify-content: center; }
    }
</style>
@endsection

@section('scripts')
<script>
    function copyIban(elementId, button) {
        const text = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(text).then(() => {
            const originalHTML = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check"></i> Kopyalandı!';
            button.style.background = '#15803d';
            button.style.color = 'white';
            button.style.borderColor = '#15803d';
            setTimeout(() => {
                button.innerHTML = originalHTML;
                button.style.background = '';
                button.style.color = '';
                button.style.borderColor = '';
            }, 2000);
        });
    }

    function scrollToForm() {
        const formSec = document.getElementById('basvuru-formu');
        if (formSec) {
            formSec.scrollIntoView({ behavior: 'smooth' });
        }
    }

    function submitSupportForm(event) {
        event.preventDefault();
        
        // Form verilerini simüle edelim ve başarı mesajını gösterelim
        document.getElementById('successAlert').classList.remove('d-none');
        
        // Giriş alanlarını temizleyelim
        document.getElementById('ad_soyad').value = '';
        document.getElementById('eposta').value = '';
        document.getElementById('telefon').value = '';
        document.getElementById('destek_turu').value = '';
        document.getElementById('mesaj').value = '';
        
        // Formun üstüne yumuşakça kaydıralım
        document.getElementById('successAlert').scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
</script>
@endsection
@endsection