<?php
session_start();
$pageTitle = "Reklam Verin | Trendlica";
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle; ?></title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon-180x180.png">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #27eaf9;
            --primary-dark: #00ffe7;
            --secondary: #31ffb7;
            --accent: #ff6b35;
            --dark: #121b28;
            --dark-light: #1a3251;
            --text: #d1fff8;
            --text-muted: #94a3b8;
        }

        body {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
            color: var(--text);
            margin: 0;
            min-height: 100vh;
        }

        .navbar {
            background: rgba(18, 46, 66, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(39, 234, 249, 0.1);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.4rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .hero-section {
            background: linear-gradient(135deg, rgba(39, 234, 249, 0.1) 0%, rgba(49, 255, 183, 0.1) 100%);
            padding: 6rem 0;
            text-align: center;
            position: relative;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
        }

        .hero-subtitle {
            font-size: 1.3rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .section {
            padding: 5rem 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--text);
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            color: var(--dark);
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(39, 234, 249, 0.3);
            color: var(--dark);
        }

        .stat-card {
            background: rgba(26, 50, 81, 0.6);
            border: 1px solid rgba(39, 234, 249, 0.2);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(39, 234, 249, 0.2);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: var(--text-muted);
            font-size: 1rem;
        }

        .audience-card {
            background: rgba(26, 50, 81, 0.6);
            border: 1px solid rgba(39, 234, 249, 0.2);
            border-radius: 16px;
            padding: 2rem;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            height: 100%;
        }

        .audience-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(39, 234, 249, 0.2);
        }

        .audience-icon {
            width: 60px;
            height: 60px;
            background: var(--accent);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .position-card {
            background: rgba(26, 50, 81, 0.6);
            border: 1px solid rgba(39, 234, 249, 0.2);
            border-radius: 16px;
            padding: 2rem;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            height: 100%;
        }

        .position-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(39, 234, 249, 0.2);
        }

        .position-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            color: var(--dark);
        }

        .position-specs {
            background: rgba(39, 234, 249, 0.1);
            border-radius: 8px;
            padding: 1rem;
            font-size: 0.9rem;
            color: var(--text);
            margin-top: 1rem;
        }

        .contact-section {
            background: linear-gradient(135deg, rgba(39, 234, 249, 0.1) 0%, rgba(49, 255, 183, 0.1) 100%);
            border-radius: 20px;
            padding: 3rem;
            margin: 3rem 0;
        }

        .contact-info {
            display: flex;
            justify-content: center;
        }

        .contact-item {
            text-align: center;
        }

        .contact-icon {
            width: 80px;
            height: 80px;
            background: var(--primary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 2rem;
            color: var(--dark);
        }

        .footer {
            background: rgba(18, 27, 40, 0.95);
            padding: 2rem 0;
            text-align: center;
            border-top: 1px solid rgba(39, 234, 249, 0.1);
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.php">
                <img src="assets/images/logos/trendlica-logo.png" alt="Trendlica" height="36">
                Trendlica
            </a>
            <div class="d-flex gap-3">
                <a href="index.php" class="btn btn-outline-primary">Ana Sayfa</a>
                <a href="login.php" class="btn btn-primary">Giriş Yap</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <h1 class="hero-title">Reklam Verin</h1>
            <p class="hero-subtitle">
                Türkiye'nin en gelişmiş AI destekli kripto ve borsa analiz platformunda 
                hedef kitlenize ulaşın. Profesyonel trader'lar ve yatırımcılar sizi bekliyor.
            </p>
            <a href="https://wa.me/905422397022" target="_blank" class="btn-primary-custom">
                <i class="bi bi-whatsapp"></i>
                WhatsApp'tan İletişime Geçin
            </a>
        </div>
    </section>

    <!-- İstatistikler -->
    <section class="section">
        <div class="container">
            <h2 class="section-title">Platform İstatistikleri</h2>
            <div class="row g-4">
                <div class="col-md-3 col-6">
                    <div class="stat-card text-center">
                        <div class="stat-number">50K+</div>
                        <div class="stat-label">Aktif Kullanıcı</div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="stat-card text-center">
                        <div class="stat-number">1M+</div>
                        <div class="stat-label">Aylık Sayfa Görüntüleme</div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="stat-card text-center">
                        <div class="stat-number">95%</div>
                        <div class="stat-label">Erkek Kullanıcı Oranı</div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="stat-card text-center">
                        <div class="stat-number">25-45</div>
                        <div class="stat-label">Hedef Yaş Grubu</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Hedef Kitle -->
    <section class="section">
        <div class="container">
            <h2 class="section-title">Hedef Kitlemiz</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="audience-card text-center">
                        <div class="audience-icon">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <h4>Profesyonel Trader'lar</h4>
                        <p>Günlük işlem yapan, deneyimli yatırımcılar</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="audience-card text-center">
                        <div class="audience-icon">
                            <i class="bi bi-currency-exchange"></i>
                        </div>
                        <h4>Kripto Yatırımcıları</h4>
                        <p>Bitcoin, Ethereum ve altcoin yatırımcıları</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="audience-card text-center">
                        <div class="audience-icon">
                            <i class="bi bi-bank"></i>
                        </div>
                        <h4>Borsa Yatırımcıları</h4>
                        <p>BIST, Forex ve uluslararası borsa yatırımcıları</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="audience-card text-center">
                        <div class="audience-icon">
                            <i class="bi bi-laptop"></i>
                        </div>
                        <h4>Teknoloji Meraklıları</h4>
                        <p>AI ve blockchain teknolojilerine ilgi duyanlar</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Reklam Pozisyonları -->
    <section class="section">
        <div class="container">
            <h2 class="section-title">Reklam Pozisyonları</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4">
                    <div class="position-card">
                        <div class="position-icon">
                            <i class="bi bi-layout-text-window"></i>
                        </div>
                        <h4>Header Altı Banner</h4>
                        <p>Tüm sayfalarda görünen üst banner alanı</p>
                        <div class="position-specs">
                            <strong>Boyut:</strong> 728x90px<br>
                            <strong>Görünürlük:</strong> %100
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="position-card">
                        <div class="position-icon">
                            <i class="bi bi-layout-sidebar"></i>
                        </div>
                        <h4>Sağ Panel Üst</h4>
                        <p>Dashboard'da sürekli görünen sağ panel üst alanı</p>
                        <div class="position-specs">
                            <strong>Boyut:</strong> 300x250px<br>
                            <strong>Görünürlük:</strong> Dashboard'da %100
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="position-card">
                        <div class="position-icon">
                            <i class="bi bi-layout-sidebar-reverse"></i>
                        </div>
                        <h4>Sağ Panel Alt</h4>
                        <p>Dashboard'da sürekli görünen sağ panel alt alanı</p>
                        <div class="position-specs">
                            <strong>Boyut:</strong> 300x250px<br>
                            <strong>Görünürlük:</strong> Dashboard'da %100
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- İletişim -->
    <section id="contact" class="section">
        <div class="container">
            <h2 class="section-title">İletişime Geçin</h2>
            <div class="contact-section text-center">
                <p class="lead mb-4">
                    Reklam vermek istiyorsanız veya detaylı bilgi almak istiyorsanız 
                    aşağıdaki iletişim kanalından bize ulaşabilirsiniz.
                </p>
                
                <div class="contact-info mb-4">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="bi bi-whatsapp"></i>
                        </div>
                        <h4>WhatsApp</h4>
                        <p>+90 542 239 70 22</p>
                    </div>
                </div>

                <div class="mt-4">
                    <a href="https://wa.me/905422397022" target="_blank" class="btn-primary-custom btn-lg">
                        <i class="bi bi-whatsapp"></i>
                        WhatsApp'tan Yaz
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Trendlica. Tüm hakları saklıdır.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>