<?php
/**
 * SMM Paket Satış Scripti - Ana Sayfa
 * Popup Sistemi ve Gelişmiş Paket Tasarımı
 * @version 2.7.0
 */

require_once __DIR__ . '/config.php';

// Sipariş sorgulama AJAX işlemi - EN ÜSTTE OLMALI
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax_order_query'])) {
    header('Content-Type: application/json; charset=utf-8');
    
    $query = trim($_POST['query'] ?? '');
    $response = ['success' => false, 'message' => '', 'order' => null];
    
    if (empty($query)) {
        $response['message'] = 'Sipariş numarası veya e-posta adresi girin.';
        echo json_encode($response, JSON_UNESCAPED_UNICODE);
        exit;
    }
    
    try {
        $stmt = $db->prepare("
            SELECT o.*, p.name as package_name, p.quantity as package_quantity,
                   c.name as category_name, c.icon as category_icon, c.color as category_color
            FROM orders o
            JOIN packages p ON o.package_id = p.id
            JOIN categories c ON p.category_id = c.id
            WHERE o.order_number = ? OR o.customer_email = ?
            ORDER BY o.created_at DESC
            LIMIT 1
        ");
        $stmt->execute([$query, $query]);
        $order = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($order) {
            $response['success'] = true;
            $response['order'] = [
                'id' => $order['id'],
                'order_number' => $order['order_number'],
                'status' => $order['status'],
                'package_name' => $order['package_name'],
                'category_name' => $order['category_name'],
                'category_icon' => $order['category_icon'],
                'category_color' => $order['category_color'],
                'customer_name' => $order['customer_name'],
                'customer_email' => $order['customer_email'],
                'social_media_link' => $order['social_media_link'] ?? '',
                'amount' => $order['amount'],
                'amount_formatted' => formatMoney($order['amount']),
                'created_at' => $order['created_at'],
                'created_at_formatted' => formatDate($order['created_at']),
            ];
        } else {
            $response['message'] = 'Sipariş bulunamadı. Lütfen sipariş numaranızı veya e-posta adresinizi kontrol edin.';
        }
    } catch (PDOException $e) {
        $response['message'] = 'Bir hata oluştu. Lütfen tekrar deneyin.';
    }
    
    echo json_encode($response, JSON_UNESCAPED_UNICODE);
    exit;
}

// Popup görüntüleme AJAX
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax_popup_view'])) {
    header('Content-Type: application/json; charset=utf-8');
    $popupId = (int)($_POST['popup_id'] ?? 0);
    if ($popupId > 0) {
        $db->prepare("UPDATE popups SET view_count = view_count + 1 WHERE id = ?")->execute([$popupId]);
    }
    echo json_encode(['success' => true]);
    exit;
}

// Popup tıklama AJAX
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax_popup_click'])) {
    header('Content-Type: application/json; charset=utf-8');
    $popupId = (int)($_POST['popup_id'] ?? 0);
    if ($popupId > 0) {
        $db->prepare("UPDATE popups SET click_count = click_count + 1 WHERE id = ?")->execute([$popupId]);
    }
    echo json_encode(['success' => true]);
    exit;
}

// parent_id sütunu var mı kontrol
function hasParentColumn($db) {
    try {
        $result = $db->query("SHOW COLUMNS FROM categories LIKE 'parent_id'")->fetch();
        return !empty($result);
    } catch (PDOException $e) {
        return false;
    }
}

$hasParentSupport = hasParentColumn($db);

// Kategorileri çek (hiyerarşik)
try {
    if ($hasParentSupport) {
        $allCategoriesRaw = $db->query("
            SELECT c.*, 
                   (SELECT COUNT(*) FROM categories c2 WHERE c2.parent_id = c.id AND c2.is_active = 1) as subcategory_count
            FROM categories c 
            WHERE c.is_active = 1 
            ORDER BY c.parent_id, c.sort_order ASC, c.name
        ")->fetchAll(PDO::FETCH_ASSOC);
        
        $categories = array_filter($allCategoriesRaw, function($c) {
            return empty($c['parent_id']) || $c['parent_id'] == 0;
        });
        $categories = array_values($categories);
        
        $subcategoriesByParent = [];
        foreach ($allCategoriesRaw as $cat) {
            if (!empty($cat['parent_id']) && $cat['parent_id'] > 0) {
                $subcategoriesByParent[$cat['parent_id']][] = $cat;
            }
        }
        
        $categoriesById = [];
        foreach ($allCategoriesRaw as $cat) {
            $categoriesById[$cat['id']] = $cat;
        }
    } else {
        $categories = $db->query("SELECT * FROM categories WHERE is_active = 1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
        $subcategoriesByParent = [];
        $categoriesById = [];
        foreach ($categories as $cat) {
            $categoriesById[$cat['id']] = $cat;
        }
    }
} catch (PDOException $e) {
    $categories = [];
    $subcategoriesByParent = [];
    $categoriesById = [];
}

// Paketleri çek
try {
    $packages = $db->query("
        SELECT p.*, c.name as category_name, c.slug as category_slug, c.icon as category_icon, c.color as category_color,
               " . ($hasParentSupport ? "c.parent_id as category_parent_id," : "") . "
               c.id as direct_category_id
        FROM packages p 
        JOIN categories c ON p.category_id = c.id 
        WHERE p.is_active = 1 AND c.is_active = 1 
        ORDER BY p.is_featured DESC, p.is_popular DESC, c.sort_order ASC, p.sort_order ASC
    ")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $packages = [];
}

// Paketlere kategori yolu ekle
foreach ($packages as &$pkg) {
    $catId = $pkg['category_id'];
    if (isset($categoriesById[$catId])) {
        $cat = $categoriesById[$catId];
        $pkg['category_path'] = $cat['name'];
        $pkg['is_subcategory'] = false;
        $pkg['parent_category_id'] = null;
        $pkg['parent_category_slug'] = null;
        
        if ($hasParentSupport && !empty($cat['parent_id']) && isset($categoriesById[$cat['parent_id']])) {
            $parent = $categoriesById[$cat['parent_id']];
            $pkg['category_path'] = $parent['name'] . ' → ' . $cat['name'];
            $pkg['is_subcategory'] = true;
            $pkg['parent_category_id'] = $parent['id'];
            $pkg['parent_category_slug'] = $parent['slug'];
            $pkg['main_category_icon'] = $parent['icon'];
            $pkg['main_category_color'] = $parent['color'];
        } else {
            $pkg['main_category_icon'] = $cat['icon'];
            $pkg['main_category_color'] = $cat['color'];
        }
    }
}
unset($pkg);

// Öne çıkan paketler
$featuredPackages = array_filter($packages, fn($p) => $p['is_featured'] == 1 || $p['is_popular'] == 1);
$featuredPackages = array_values($featuredPackages);

// Aktif ödeme yöntemlerini çek
try {
    $paymentMethods = $db->query("SELECT * FROM payment_methods WHERE is_active = 1 ORDER BY sort_order ASC")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $paymentMethods = [];
}

// Paketleri kategoriye göre grupla
$packagesByCategory = [];
$packagesBySubcategory = [];
foreach ($packages as $pkg) {
    if (!empty($pkg['parent_category_slug'])) {
        $packagesByCategory[$pkg['parent_category_slug']][] = $pkg;
        $packagesBySubcategory[$pkg['category_slug']][] = $pkg;
    } else {
        $packagesByCategory[$pkg['category_slug']][] = $pkg;
    }
}

// Aktif popup'ları çek
$activePopups = [];
try {
    $currentPage = 'index.php';
    $isGuest = !isLoggedIn();
    $isMember = isLoggedIn();
    
    $popupSql = "
        SELECT * FROM popups 
        WHERE is_active = 1 
        AND (start_date IS NULL OR start_date <= NOW())
        AND (end_date IS NULL OR end_date >= NOW())
        AND (
            target_audience = 'all' 
            OR (target_audience = 'guests' AND ?)
            OR (target_audience = 'members' AND ?)
        )
        ORDER BY priority DESC, id DESC
    ";
    $popupStmt = $db->prepare($popupSql);
    $popupStmt->execute([$isGuest ? 1 : 0, $isMember ? 1 : 0]);
    $activePopups = $popupStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $activePopups = [];
}

// Durum yapılandırması
$statusConfig = [
    'pending' => ['color' => '#f59e0b', 'bg' => 'rgba(245, 158, 11, 0.1)', 'text' => 'Ödeme Bekleniyor', 'icon' => 'fas fa-clock'],
    'paid' => ['color' => '#3b82f6', 'bg' => 'rgba(59, 130, 246, 0.1)', 'text' => 'Ödeme Onaylandı', 'icon' => 'fas fa-check-circle'],
    'processing' => ['color' => '#8b5cf6', 'bg' => 'rgba(139, 92, 246, 0.1)', 'text' => 'İşleniyor', 'icon' => 'fas fa-spinner'],
    'completed' => ['color' => '#10b981', 'bg' => 'rgba(16, 185, 129, 0.1)', 'text' => 'Tamamlandı', 'icon' => 'fas fa-check-double'],
    'cancelled' => ['color' => '#ef4444', 'bg' => 'rgba(239, 68, 68, 0.1)', 'text' => 'İptal Edildi', 'icon' => 'fas fa-times-circle'],
    'refunded' => ['color' => '#6b7280', 'bg' => 'rgba(107, 114, 128, 0.1)', 'text' => 'İade Edildi', 'icon' => 'fas fa-undo']
];

$pageTitle = 'Ana Sayfa';
require_once __DIR__ . '/header.php';
?>

<style>
/* ==================== HERO ==================== */
.hero {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 50px 0 70px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-gradient {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 70%;
    height: 130%;
    background: radial-gradient(ellipse, rgba(var(--primary-rgb), 0.15), transparent 65%);
}

.hero-content {
    padding-right: 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 20px;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-desc {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 500px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient);
    color: #fff;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.4);
    color: #fff;
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-hero-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.hero-stats {
    display: flex;
    gap: 35px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.hero-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    display: block;
}

.hero-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==================== QUICK ORDER WIDGET ==================== */
.quick-order-widget {
    background: #1a1f2e;
    border: 2px solid #2d3548;
    border-radius: 24px;
    overflow: hidden;
}

.quick-order-widget::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--gradient);
}

.quick-order-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px;
    background: #151a27;
    border-bottom: 1px solid #2d3548;
}

.quick-order-icon {
    width: 52px;
    height: 52px;
    background: var(--gradient);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.quick-order-title h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #fff;
}

.quick-order-title span {
    font-size: 14px;
    color: #94a3b8;
}

.quick-order-body {
    padding: 24px;
}

/* Steps */
.quick-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 16px;
    background: #151a27;
    border-radius: 14px;
}

.quick-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-step-num {
    width: 32px;
    height: 32px;
    background: #2d3548;
    border: 2px solid #3d4560;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.quick-step.active .quick-step-num {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.25);
}

.quick-step.done .quick-step-num {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.quick-step-text {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.quick-step.active .quick-step-text {
    color: #fff;
}

.quick-step.done .quick-step-text {
    color: #10b981;
}

.quick-step-line {
    width: 30px;
    height: 3px;
    background: #2d3548;
    border-radius: 2px;
}

.quick-step-line.done {
    background: #10b981;
}

.quick-step-line.half {
    background: linear-gradient(to right, #10b981 50%, #2d3548 50%);
}

/* Back Button */
.quick-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #2d3548;
    border: 1px solid #3d4560;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.quick-back-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.quick-back-btn.show {
    display: inline-flex;
}

/* Category Carousel */
.quick-categories {
    position: relative;
}

.quick-cat-carousel {
    overflow: hidden;
    margin-bottom: 16px;
}

.quick-cat-track {
    display: flex;
    gap: 12px;
    transition: transform 0.4s ease;
}

.quick-cat-item {
    flex: 0 0 calc((100% - 60px) / 6);
    min-width: calc((100% - 60px) / 6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.quick-cat-item:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-3px);
}

.quick-cat-item.selected {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

.quick-cat-item i {
    font-size: 28px;
}

.quick-cat-item span {
    font-size: 11px;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.3;
}

.quick-cat-item .subcat-badge {
    font-size: 9px;
    background: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

/* Carousel Nav */
.quick-cat-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.quick-cat-btn {
    width: 42px;
    height: 42px;
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.quick-cat-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.quick-cat-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quick-cat-page {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
}

.quick-cat-page strong {
    color: #fff;
}

/* Subcategory List */
.quick-subcat-list {
    display: none;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.quick-subcat-list.show {
    display: flex;
}

.quick-subcat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.quick-subcat-item:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    background: rgba(var(--primary-rgb), 0.1);
}

.quick-subcat-item.selected {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
}

.quick-subcat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.quick-subcat-info {
    flex: 1;
}

.quick-subcat-info h5 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 3px;
    color: #fff;
}

.quick-subcat-info span {
    font-size: 12px;
    color: #94a3b8;
}

.quick-subcat-arrow {
    color: #64748b;
    font-size: 14px;
}

/* Package List */
.quick-pkg-list {
    display: none;
    flex-direction: column;
    gap: 12px;
    max-height: 340px;
    overflow-y: auto;
}

.quick-pkg-list.show {
    display: flex;
}

.quick-pkg-list::-webkit-scrollbar,
.quick-subcat-list::-webkit-scrollbar {
    width: 6px;
}

.quick-pkg-list::-webkit-scrollbar-track,
.quick-subcat-list::-webkit-scrollbar-track {
    background: #1e2433;
    border-radius: 3px;
}

.quick-pkg-list::-webkit-scrollbar-thumb,
.quick-subcat-list::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

.quick-pkg-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.quick-pkg-item:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    background: rgba(var(--primary-rgb), 0.1);
}

.quick-pkg-item.selected {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
}

.quick-pkg-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.quick-pkg-info {
    flex: 1;
    min-width: 0;
}

.quick-pkg-info h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 5px;
    color: #fff;
}

.quick-pkg-info span {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-pkg-info span i {
    color: var(--primary);
    font-size: 11px;
}

.quick-pkg-price {
    text-align: right;
    flex-shrink: 0;
}

.quick-pkg-price .now {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.quick-pkg-price .was {
    font-size: 13px;
    color: #64748b;
    text-decoration: line-through;
}

/* Package Details */
.quick-pkg-detail {
    display: none;
}

.quick-pkg-detail.show {
    display: block;
}

.quick-detail-box {
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 18px;
    overflow: hidden;
}

.quick-detail-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: #151a27;
    border-bottom: 1px solid #2d3548;
}

.quick-detail-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    flex-shrink: 0;
}

.quick-detail-info {
    flex: 1;
}

.quick-detail-info h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #fff;
}

.quick-detail-info span {
    font-size: 14px;
    color: #94a3b8;
}

.quick-detail-price {
    text-align: right;
    flex-shrink: 0;
}

.quick-detail-price .now {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    display: block;
}

.quick-detail-price .was {
    font-size: 15px;
    color: #64748b;
    text-decoration: line-through;
}

.quick-detail-bottom {
    padding: 22px;
}

.quick-detail-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-detail-feat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #151a27;
    border: 1px solid #2d3548;
    border-radius: 25px;
    font-size: 13px;
    color: #e2e8f0;
}

.quick-detail-feat i {
    color: #10b981;
    font-size: 11px;
}

/* Quick Order Footer */
.quick-order-footer {
    padding: 20px 24px;
    border-top: 1px solid #2d3548;
    background: #151a27;
}

.quick-order-btn {
    width: 100%;
    padding: 18px;
    background: var(--gradient);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
}

.quick-order-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.4);
}

.quick-order-btn:disabled {
    background: #2d3548;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==================== ORDER QUERY MODAL ==================== */
#orderQueryModal .modal-dialog {
    max-width: 600px;
}

#orderQueryModal .modal-content {
    background: #0f1219;
    border: 2px solid #1e2433;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(0,0,0,0.7);
}

#orderQueryModal .modal-header {
    background: #151a27;
    border-bottom: 2px solid #1e2433;
    padding: 24px 28px;
}

#orderQueryModal .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

#orderQueryModal .modal-title i {
    color: var(--primary);
    font-size: 22px;
}

#orderQueryModal .btn-close {
    background: #1e2433;
    border-radius: 10px;
    padding: 10px;
    opacity: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#orderQueryModal .btn-close:hover {
    background: #ef4444;
}

#orderQueryModal .modal-body {
    padding: 28px;
    background: #0f1219;
}

.query-search-box {
    text-align: center;
    margin-bottom: 25px;
}

.query-search-box h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.query-search-box p {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 20px;
}

.query-search-form {
    display: flex;
    gap: 12px;
}

.query-search-input {
    flex: 1;
    padding: 16px 20px;
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s;
}

.query-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.query-search-input::placeholder {
    color: #64748b;
}

.query-search-btn {
    padding: 16px 28px;
    background: var(--gradient);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.query-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
}

.query-search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.query-result {
    display: none;
}

.query-result.show {
    display: block;
}

.query-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #ef4444;
}

.query-error i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
}

.query-order-box {
    background: #1e2433;
    border: 2px solid #2d3548;
    border-radius: 18px;
    overflow: hidden;
}

.query-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #151a27;
    border-bottom: 1px solid #2d3548;
    flex-wrap: wrap;
    gap: 15px;
}

.query-order-number {
    font-family: monospace;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.query-order-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
}

.query-order-package {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #2d3548;
}

.query-order-pkg-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.query-order-pkg-info h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #fff;
}

.query-order-pkg-info span {
    font-size: 13px;
    color: #94a3b8;
}

.query-order-details {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.query-detail-item {
    background: #151a27;
    border-radius: 10px;
    padding: 14px;
}

.query-detail-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.query-detail-value {
    font-size: 14px;
    color: #fff;
    word-break: break-all;
}

.query-order-footer {
    padding: 20px;
    border-top: 1px solid #2d3548;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.query-order-total {
    font-size: 14px;
    color: #94a3b8;
}

.query-order-total strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.query-new-search {
    padding: 10px 20px;
    background: #2d3548;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.query-new-search:hover {
    background: var(--primary);
}

/* ==================== FEATURED SECTION ==================== */
.featured-section {
    padding: 80px 0;
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.03) 0%, transparent 100%);
    border-top: 1px solid var(--border-color);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.section-header h2 {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 12px;
}

.section-header p {
    font-size: 17px;
    color: var(--text-secondary);
    margin: 0;
}

/* ==================== FEATURES ==================== */
.features-section {
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-card {
    text-align: center;
    padding: 40px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.3s;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.feature-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    background: var(--gradient);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
}

.feature-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ==================== YENİ PAKET KARTLARI ==================== */
.packages-section {
    padding: 80px 0;
    background: rgba(255,255,255,0.02);
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 45px;
}

.category-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.category-tab:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary);
}

.category-tab.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
}

.package-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 0;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s;
}

.package-card:hover {
    transform: translateY(-12px);
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3), 0 0 40px rgba(var(--primary-rgb), 0.1);
}

.package-card:hover::before { opacity: 1; }

.package-card.popular { border-color: rgba(245, 158, 11, 0.4); }

.package-card.popular::after {
    content: '🔥 POPÜLER';
    position: absolute;
    top: 20px; right: -35px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 6px 50px;
    font-size: 10px;
    font-weight: 800;
    transform: rotate(45deg);
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.package-card.featured { border-color: rgba(var(--primary-rgb), 0.4); }

.package-card.featured::before {
    opacity: 1;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
    background-size: 200% 100%;
    animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.package-header { padding: 28px 28px 20px; position: relative; }

.package-icon-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.package-icon {
    width: 65px; height: 65px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.package-icon::after {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 21px;
    background: inherit;
    opacity: 0.3; filter: blur(10px); z-index: -1;
}

.package-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 11px; font-weight: 600; color: #10b981;
}

.package-badge.discount {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.package-category {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--primary); opacity: 0.8; margin-bottom: 8px;
}

.package-name {
    font-size: 22px; font-weight: 800;
    margin-bottom: 10px; line-height: 1.3; color: #fff;
}

.package-desc { font-size: 14px; color: #94a3b8; line-height: 1.6; margin: 0; }

.package-body { padding: 0 28px 20px; flex-grow: 1; }

.package-features { list-style: none; padding: 0; margin: 0; }

.package-features li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; font-size: 14px; color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.package-features li:last-child { border: none; }

.package-features li i {
    width: 22px; height: 22px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #10b981; font-size: 10px; flex-shrink: 0;
}

.package-footer {
    margin-top: auto;
    padding: 24px 28px 28px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.package-price-row {
    display: flex; align-items: flex-end;
    justify-content: space-between; margin-bottom: 18px;
}

.package-price { display: flex; align-items: baseline; gap: 10px; }

.price-current {
    font-size: 36px; font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.price-old { font-size: 18px; text-decoration: line-through; color: #64748b; }

.package-delivery {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #94a3b8;
    background: rgba(var(--primary-rgb), 0.1);
    padding: 6px 12px; border-radius: 20px;
}

.package-delivery i { color: var(--primary); font-size: 12px; }

.btn-package {
    width: 100%;
    background: var(--gradient); border: none; color: #fff;
    padding: 16px 24px; border-radius: 14px;
    font-weight: 700; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.3s; position: relative; overflow: hidden;
}

.btn-package::before {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-package:hover::before { left: 100%; }

.btn-package:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.4);
}

/* ==================== POPUP SİSTEMİ ==================== */
.popup-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: none; align-items: center; justify-content: center;
    padding: 20px; opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-overlay.show { display: flex; }
.popup-overlay.visible { opacity: 1; }

.popup-overlay.position-center { align-items: center; justify-content: center; }
.popup-overlay.position-bottom-right { align-items: flex-end; justify-content: flex-end; }
.popup-overlay.position-bottom-left { align-items: flex-end; justify-content: flex-start; }
.popup-overlay.position-top-right { align-items: flex-start; justify-content: flex-end; }
.popup-overlay.position-top-left { align-items: flex-start; justify-content: flex-start; }

.popup-container {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 24px; overflow: hidden;
    max-height: 90vh; overflow-y: auto;
    position: relative;
    box-shadow: 0 30px 100px rgba(0,0,0,0.5);
}

.popup-container.size-small { width: 100%; max-width: 380px; }
.popup-container.size-medium { width: 100%; max-width: 520px; }
.popup-container.size-large { width: 100%; max-width: 700px; }

.popup-container.anim-fade { opacity: 0; transition: opacity 0.4s ease; }
.popup-overlay.visible .popup-container.anim-fade { opacity: 1; }

.popup-container.anim-slide { opacity: 0; transform: translateY(50px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.popup-overlay.visible .popup-container.anim-slide { opacity: 1; transform: translateY(0); }

.popup-container.anim-zoom { opacity: 0; transform: scale(0.8); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.popup-overlay.visible .popup-container.anim-zoom { opacity: 1; transform: scale(1); }

.popup-container.anim-bounce { opacity: 0; transform: scale(0.5); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.popup-overlay.visible .popup-container.anim-bounce { opacity: 1; transform: scale(1); }

.popup-close {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 18px; cursor: pointer;
    transition: all 0.3s; z-index: 10;
}

.popup-close:hover {
    background: #ef4444; border-color: #ef4444;
    color: #fff; transform: rotate(90deg);
}

.popup-image { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.popup-image-wrap { position: relative; overflow: hidden; }
.popup-image-wrap::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to top, #1e293b, transparent);
}

.popup-content { padding: 28px; }
.popup-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.3; }
.popup-text { font-size: 15px; color: #94a3b8; line-height: 1.7; margin-bottom: 24px; }
.popup-text p { margin-bottom: 12px; }
.popup-text p:last-child { margin-bottom: 0; }

.popup-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 32px; border-radius: 14px;
    font-size: 16px; font-weight: 700; color: #fff;
    text-decoration: none; transition: all 0.3s;
    border: none; cursor: pointer; width: 100%;
}

.popup-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3); color: #fff;
}

.popup-no-image .popup-content { padding-top: 50px; }

/* ==================== PAYMENT MODAL ==================== */
#paymentModal .modal-dialog { max-width: 520px; }

#paymentModal .modal-content {
    background: #0f1219;
    border: 2px solid #1e2433;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 100px rgba(0,0,0,0.7);
}

#paymentModal .modal-header {
    background: #151a27;
    border-bottom: 2px solid #1e2433;
    padding: 24px 28px;
}

#paymentModal .modal-title {
    font-size: 20px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 12px;
}

#paymentModal .modal-title i { color: var(--primary); font-size: 22px; }

#paymentModal .btn-close {
    background: #1e2433; border-radius: 10px;
    padding: 10px; opacity: 1;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
}

#paymentModal .btn-close:hover { background: #ef4444; }

#paymentModal .modal-body { padding: 28px; background: #0f1219; }

.modal-package-box {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 18px; padding: 24px; margin-bottom: 28px;
}

.modal-package-inner { display: flex; align-items: center; gap: 18px; }

.modal-package-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff; flex-shrink: 0;
}

.modal-package-info { flex: 1; }

.modal-package-info h4 { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: #fff; }

.modal-package-info span {
    font-size: 14px; color: #10b981;
    display: flex; align-items: center; gap: 6px;
}

.modal-package-price { text-align: right; flex-shrink: 0; }

.modal-package-price .amount { font-size: 30px; font-weight: 800; color: var(--primary); display: block; }

.modal-package-price .label { font-size: 12px; color: #94a3b8; }

.payment-title {
    font-size: 16px; font-weight: 700; color: #fff;
    margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}

.payment-title i { color: var(--primary); }

.payment-list { display: flex; flex-direction: column; gap: 14px; }

.payment-item {
    display: flex; align-items: center; gap: 18px;
    background: #151a27; border: 2px solid #1e2433;
    border-radius: 16px; padding: 20px 22px;
    cursor: pointer; transition: all 0.3s;
}

.payment-item:hover { border-color: rgba(var(--primary-rgb), 0.4); background: #1a1f2e; }

.payment-item.active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.payment-icon {
    width: 56px; height: 56px;
    background: #1e2433; border: 1px solid #2d3548;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--primary); flex-shrink: 0;
}

.payment-item.active .payment-icon {
    background: var(--primary); border-color: var(--primary); color: #fff;
}

.payment-content { flex: 1; }
.payment-content h5 { font-size: 17px; font-weight: 600; margin: 0 0 4px; color: #fff; }
.payment-content p { font-size: 14px; color: #94a3b8; margin: 0; }

.payment-check {
    width: 28px; height: 28px;
    border: 2px solid #2d3548;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: transparent; flex-shrink: 0;
    transition: all 0.3s;
}

.payment-item.active .payment-check {
    background: #10b981; border-color: #10b981; color: #fff;
}

#paymentModal .modal-footer {
    padding: 24px 28px;
    border-top: 2px solid #1e2433;
    background: #151a27;
}

.btn-modal-continue {
    width: 100%; padding: 18px;
    background: var(--gradient); border: none; border-radius: 14px;
    color: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
}

.btn-modal-continue:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 15px 45px rgba(var(--primary-rgb), 0.4);
}

.btn-modal-continue:disabled {
    background: #1e2433; color: #64748b;
    cursor: not-allowed; box-shadow: none;
}

/* ==================== MODAL Z-INDEX - BİLDİRİMLERİN ÜSTÜNDE ==================== */
#paymentModal,
#orderQueryModal {
    z-index: 1070 !important;
}

#paymentModal .modal-content,
#orderQueryModal .modal-content {
    position: relative;
    z-index: 2;
}

.modal-backdrop {
    z-index: 1069 !important;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1199px) {
    .hero-title { font-size: 40px; }
    .quick-cat-item {
        flex: 0 0 calc((100% - 24px) / 3);
        min-width: calc((100% - 24px) / 3);
    }
    .package-name { font-size: 20px; }
    .price-current { font-size: 32px; }
}

@media (max-width: 991px) {
    .hero { padding: 40px 0 60px; min-height: auto; }
    .hero-content { text-align: center; padding-right: 0; margin-bottom: 40px; }
    .hero-title { font-size: 36px; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .quick-order-widget { max-width: 540px; margin: 0 auto; }
    .quick-cat-item {
        flex: 0 0 calc((100% - 24px) / 3);
        min-width: calc((100% - 24px) / 3);
    }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .section-header h2 { font-size: 32px; }
}

@media (max-width: 767px) {
    .hero { padding: 30px 0 50px; }
    .hero-title { font-size: 30px; }
    .hero-desc { font-size: 16px; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons a, .hero-buttons button { width: 100%; justify-content: center; }
    .hero-stats { gap: 25px; }
    .hero-stat-value { font-size: 26px; }
    .quick-cat-item {
        flex: 0 0 calc((100% - 12px) / 2);
        min-width: calc((100% - 12px) / 2);
        padding: 16px 8px;
    }
    .quick-cat-item i { font-size: 24px; }
    .quick-step-text { display: none; }
    .features-grid { grid-template-columns: 1fr; }
    .section-header h2 { font-size: 28px; }
    .category-tabs { gap: 8px; }
    .category-tab { padding: 10px 18px; font-size: 13px; }
    .query-search-form { flex-direction: column; }
    .query-order-details { grid-template-columns: 1fr; }
    .package-header { padding: 24px 24px 16px; }
    .package-body { padding: 0 24px 16px; }
    .package-footer { padding: 20px 24px 24px; }
    .package-name { font-size: 19px; }
    .price-current { font-size: 30px; }
    .popup-container.size-large { max-width: 95%; }
    .popup-title { font-size: 20px; }

    /* ===== MOBİL ÖDEME MODALI KÜÇÜLTME ===== */
    #paymentModal .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
    #paymentModal .modal-content { border-radius: 16px; }
    #paymentModal .modal-header { padding: 14px 16px; }
    #paymentModal .modal-title { font-size: 15px; gap: 8px; }
    #paymentModal .modal-title i { font-size: 17px; }
    #paymentModal .btn-close { width: 30px; height: 30px; padding: 5px; }
    #paymentModal .modal-body { padding: 14px; }
    .modal-package-box { padding: 12px; margin-bottom: 14px; border-radius: 12px; }
    .modal-package-inner { gap: 10px; }
    .modal-package-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
    .modal-package-info h4 { font-size: 13px; margin: 0 0 2px; }
    .modal-package-info span { font-size: 11px; }
    .modal-package-price .amount { font-size: 18px; }
    .modal-package-price .label { font-size: 10px; }
    .payment-title { font-size: 13px; margin-bottom: 10px; }
    .payment-list { gap: 8px; }
    .payment-item { gap: 10px; padding: 12px; border-radius: 12px; }
    .payment-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; }
    .payment-content h5 { font-size: 13px; margin: 0 0 1px; }
    .payment-content p { font-size: 11px; }
    .payment-check { width: 20px; height: 20px; font-size: 9px; }
    #paymentModal .modal-footer { padding: 12px 14px; }
    .btn-modal-continue { padding: 13px; font-size: 14px; border-radius: 10px; gap: 8px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 26px; }
    .quick-order-header { padding: 20px; }
    .quick-order-body { padding: 20px; }
    .quick-order-footer { padding: 16px 20px; }
    .quick-cat-item span { font-size: 10px; }
    .package-name { font-size: 18px; }
    .price-current { font-size: 28px; }
    .popup-content { padding: 20px; }
    .popup-button { padding: 14px 24px; font-size: 14px; }

    /* ===== 480px ÖDEME MODALI DAHA KOMPAKT ===== */
    #paymentModal .modal-body { padding: 10px; }
    .modal-package-box { padding: 10px; margin-bottom: 10px; }
    .modal-package-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; }
    .modal-package-info h4 { font-size: 12px; }
    .modal-package-price .amount { font-size: 16px; }
    .payment-item { padding: 10px; gap: 8px; }
    .payment-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
    .payment-content h5 { font-size: 12px; }
    .payment-content p { font-size: 10px; }
    .payment-check { width: 18px; height: 18px; }
    #paymentModal .modal-footer { padding: 10px; }
    .btn-modal-continue { padding: 12px; font-size: 13px; }
}
</style>
















<!-- Hero Section -->
<section class="hero">
    <div class="hero-bg"><div class="hero-gradient"></div></div>
    
    <div class="container">
        <div class="row align-items-center">
            <!-- Sol İçerik -->
            <div class="col-lg-6" data-aos="fade-right">
                <div class="hero-content">
                    <div class="hero-badge">
                        <i class="fas fa-bolt"></i>
                        <span>Hızlı & Güvenilir Hizmet</span>
                    </div>
                    
                    <h1 class="hero-title">
                        Sosyal Medyada <span class="gradient-text">Büyümenin</span> En Kolay Yolu
                    </h1>
                    
                    <p class="hero-desc">
                        Instagram, TikTok, YouTube ve daha fazlası için uygun fiyatlı paketler. 
                        Hemen sipariş verin, anında sonuç alın!
                    </p>
                    
                    <div class="hero-buttons">
                        <a href="#packages" class="btn-hero">
                            <i class="fas fa-box"></i> Paketleri İncele
                        </a>
                        <button type="button" class="btn-hero-outline" onclick="openOrderQuery()">
                            <i class="fas fa-search"></i> Sipariş Sorgula
                        </button>
                    </div>
                    
                    <div class="hero-stats">
                        <div class="hero-stat">
                            <span class="hero-stat-value">10K+</span>
                            <span class="hero-stat-label">Mutlu Müşteri</span>
                        </div>
                        <div class="hero-stat">
                            <span class="hero-stat-value">50K+</span>
                            <span class="hero-stat-label">Tamamlanan Sipariş</span>
                        </div>
                        <div class="hero-stat">
                            <span class="hero-stat-value">7/24</span>
                            <span class="hero-stat-label">Destek</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Sağ Widget -->
            <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
                <div class="quick-order-widget">
                    <div class="quick-order-header">
                        <div class="quick-order-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <div class="quick-order-title">
                            <h3>Hızlı Sipariş</h3>
                            <span>3 adımda kolayca sipariş verin</span>
                        </div>
                    </div>
                    
                    <div class="quick-order-body">
                        <!-- Steps -->
                        <div class="quick-steps">
                            <div class="quick-step active" id="qs1">
                                <div class="quick-step-num">1</div>
                                <span class="quick-step-text">Kategori</span>
                            </div>
                            <div class="quick-step-line" id="ql1"></div>
                            <div class="quick-step" id="qs2">
                                <div class="quick-step-num">2</div>
                                <span class="quick-step-text">Paket</span>
                            </div>
                            <div class="quick-step-line" id="ql2"></div>
                            <div class="quick-step" id="qs3">
                                <div class="quick-step-num">3</div>
                                <span class="quick-step-text">Sipariş</span>
                            </div>
                        </div>
                        
                        <!-- Back -->
                        <button class="quick-back-btn" id="qBackBtn" onclick="qBack()">
                            <i class="fas fa-arrow-left"></i> Geri Dön
                        </button>
                        
                        <!-- Step 1: Main Categories -->
                        <div class="quick-categories" id="qStep1">
                            <div class="quick-cat-carousel">
                                <div class="quick-cat-track" id="catTrack">
                                    <?php foreach ($categories as $cat): ?>
                                    <div class="quick-cat-item" 
                                         onclick="qSelectCat(<?php echo $cat['id']; ?>, '<?php echo $cat['slug']; ?>', '<?php echo htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8'); ?>', '<?php echo $cat['icon']; ?>', '<?php echo $cat['color']; ?>', <?php echo isset($cat['subcategory_count']) ? $cat['subcategory_count'] : 0; ?>)"
                                         data-slug="<?php echo $cat['slug']; ?>"
                                         data-id="<?php echo $cat['id']; ?>">
                                        <i class="<?php echo $cat['icon']; ?>" style="color: <?php echo $cat['color']; ?>"></i>
                                        <span><?php echo htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8'); ?></span>
                                        <?php if ($hasParentSupport && isset($subcategoriesByParent[$cat['id']]) && count($subcategoriesByParent[$cat['id']]) > 0): ?>
                                        <span class="subcat-badge"><?php echo count($subcategoriesByParent[$cat['id']]); ?> alt</span>
                                        <?php endif; ?>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                            
                            <?php if (count($categories) > 6): ?>
                            <div class="quick-cat-nav">
                                <button class="quick-cat-btn" id="catPrev" onclick="catPrev()">
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <div class="quick-cat-page">
                                    <span id="catPage"><strong>1</strong> / <?php echo ceil(count($categories) / 6); ?></span>
                                </div>
                                <button class="quick-cat-btn" id="catNext" onclick="catNext()">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- Step 1b: Subcategories -->
                        <div class="quick-subcat-list" id="qStep1b"></div>
                        
                        <!-- Step 2: Packages -->
                        <div class="quick-pkg-list" id="qStep2"></div>
                        
                        <!-- Step 3: Details -->
                        <div class="quick-pkg-detail" id="qStep3">
                            <div class="quick-detail-box">
                                <div class="quick-detail-top">
                                    <div class="quick-detail-icon" id="qDetailIcon"></div>
                                    <div class="quick-detail-info">
                                        <h4 id="qDetailName"></h4>
                                        <span id="qDetailCat"></span>
                                    </div>
                                    <div class="quick-detail-price">
                                        <span class="now" id="qDetailPrice"></span>
                                        <span class="was" id="qDetailOld"></span>
                                    </div>
                                </div>
                                <div class="quick-detail-bottom">
                                    <div class="quick-detail-features" id="qDetailFeats"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="quick-order-footer">
                        <button class="quick-order-btn" id="qOrderBtn" onclick="qOrder()" disabled>
                            <i class="fas fa-hand-pointer"></i>
                            <span>Kategori Seçin</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Öne Çıkan Paketler -->
<?php if (!empty($featuredPackages)): ?>
<section class="featured-section">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <div class="section-badge">
                <i class="fas fa-star"></i> Öne Çıkan Paketler
            </div>
            <h2>En Popüler Paketlerimiz</h2>
            <p>Müşterilerimizin en çok tercih ettiği paketler</p>
        </div>
        
        <div class="row g-4">
            <?php foreach (array_slice($featuredPackages, 0, 4) as $i => $pkg): 
                $feats = json_decode($pkg['features'], true) ?: [];
                $hasOldPrice = !empty($pkg['old_price']) && $pkg['old_price'] > $pkg['price'];
                $discountPercent = $hasOldPrice ? round((($pkg['old_price'] - $pkg['price']) / $pkg['old_price']) * 100) : 0;
            ?>
            <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="<?php echo $i * 100; ?>">
                <div class="package-card <?php echo $pkg['is_popular'] ? 'popular' : ''; ?> <?php echo $pkg['is_featured'] ? 'featured' : ''; ?>">
                    <div class="package-header">
                        <div class="package-icon-wrap">
                            <div class="package-icon" style="background: <?php echo $pkg['main_category_color'] ?? $pkg['category_color']; ?>">
                                <i class="<?php echo $pkg['main_category_icon'] ?? $pkg['category_icon']; ?>"></i>
                            </div>
                            <?php if ($discountPercent > 0): ?>
                            <div class="package-badge discount">
                                <i class="fas fa-bolt"></i> %<?php echo $discountPercent; ?> İndirim
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="package-category"><?php echo htmlspecialchars($pkg['category_path'] ?? $pkg['category_name'], ENT_QUOTES, 'UTF-8'); ?></div>
                        <h3 class="package-name"><?php echo htmlspecialchars($pkg['name'], ENT_QUOTES, 'UTF-8'); ?></h3>
                        <?php if (!empty($pkg['description'])): ?>
                        <p class="package-desc"><?php echo htmlspecialchars(mb_substr($pkg['description'], 0, 80), ENT_QUOTES, 'UTF-8'); ?><?php echo mb_strlen($pkg['description']) > 80 ? '...' : ''; ?></p>
                        <?php endif; ?>
                    </div>
                    
                    <div class="package-body">
                        <ul class="package-features">
                            <?php foreach (array_slice($feats, 0, 4) as $f): ?>
                            <li><i class="fas fa-check"></i> <?php echo htmlspecialchars($f, ENT_QUOTES, 'UTF-8'); ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    
                    <div class="package-footer">
                        <div class="package-price-row">
                            <div class="package-price">
                                <span class="price-current"><?php echo formatMoney($pkg['price']); ?></span>
                                <?php if ($hasOldPrice): ?>
                                <span class="price-old"><?php echo formatMoney($pkg['old_price']); ?></span>
                                <?php endif; ?>
                            </div>
                            <?php if ($pkg['delivery_time']): ?>
                            <div class="package-delivery">
                                <i class="fas fa-clock"></i> <?php echo htmlspecialchars($pkg['delivery_time'], ENT_QUOTES, 'UTF-8'); ?>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <button class="btn-package" onclick="openPayment(<?php echo $pkg['id']; ?>, '<?php echo htmlspecialchars(addslashes($pkg['name']), ENT_QUOTES, 'UTF-8'); ?>', '<?php echo $pkg['price']; ?>', '<?php echo $pkg['main_category_icon'] ?? $pkg['category_icon']; ?>', '<?php echo $pkg['main_category_color'] ?? $pkg['category_color']; ?>')">
                            <i class="fas fa-shopping-cart"></i> Satın Al
                        </button>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Özellikler -->
<section class="features-section">
    <div class="container">
        <div class="features-grid" data-aos="fade-up">
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-bolt"></i></div>
                <h4 class="feature-title">Anında Teslimat</h4>
                <p class="feature-desc">Siparişleriniz dakikalar içinde başlar</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
                <h4 class="feature-title">Güvenli Ödeme</h4>
                <p class="feature-desc">256-bit SSL şifreleme ile korunur</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-headset"></i></div>
                <h4 class="feature-title">7/24 Destek</h4>
                <p class="feature-desc">Her zaman yanınızdayız</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-sync-alt"></i></div>
                <h4 class="feature-title">Garanti</h4>
                <p class="feature-desc">Tüm paketlerde düşüş garantisi</p>
            </div>
        </div>
    </div>
</section>

<!-- Tüm Paketler -->
<section class="packages-section" id="packages">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <h2>Tüm Paketlerimiz</h2>
            <p>İhtiyacınıza uygun paketi seçin</p>
        </div>
        
        <div class="category-tabs" data-aos="fade-up">
            <div class="category-tab active" data-category="all">
                <i class="fas fa-th-large"></i> Tümü
            </div>
            <?php foreach ($categories as $cat): ?>
            <div class="category-tab" data-category="<?php echo $cat['slug']; ?>">
                <i class="<?php echo $cat['icon']; ?>"></i> <?php echo htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8'); ?>
            </div>
            <?php endforeach; ?>
        </div>
        
        <div class="row g-4" id="pkgGrid">
            <?php foreach ($packages as $i => $pkg): 
                $feats = json_decode($pkg['features'], true) ?: [];
                $filterCategory = !empty($pkg['parent_category_slug']) ? $pkg['parent_category_slug'] : $pkg['category_slug'];
                $hasOldPrice = !empty($pkg['old_price']) && $pkg['old_price'] > $pkg['price'];
                $discountPercent = $hasOldPrice ? round((($pkg['old_price'] - $pkg['price']) / $pkg['old_price']) * 100) : 0;
            ?>
            <div class="col-xl-3 col-lg-4 col-md-6 pkg-item" data-category="<?php echo $filterCategory; ?>" data-aos="fade-up" data-aos-delay="<?php echo ($i % 4) * 50; ?>">
                <div class="package-card <?php echo $pkg['is_popular'] ? 'popular' : ''; ?> <?php echo $pkg['is_featured'] ? 'featured' : ''; ?>">
                    <div class="package-header">
                        <div class="package-icon-wrap">
                            <div class="package-icon" style="background: <?php echo $pkg['main_category_color'] ?? $pkg['category_color']; ?>">
                                <i class="<?php echo $pkg['main_category_icon'] ?? $pkg['category_icon']; ?>"></i>
                            </div>
                            <?php if ($discountPercent > 0): ?>
                            <div class="package-badge discount">
                                <i class="fas fa-bolt"></i> %<?php echo $discountPercent; ?> İndirim
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="package-category"><?php echo htmlspecialchars($pkg['category_path'] ?? $pkg['category_name'], ENT_QUOTES, 'UTF-8'); ?></div>
                        <h3 class="package-name"><?php echo htmlspecialchars($pkg['name'], ENT_QUOTES, 'UTF-8'); ?></h3>
                        <?php if (!empty($pkg['description'])): ?>
                        <p class="package-desc"><?php echo htmlspecialchars(mb_substr($pkg['description'], 0, 80), ENT_QUOTES, 'UTF-8'); ?><?php echo mb_strlen($pkg['description']) > 80 ? '...' : ''; ?></p>
                        <?php endif; ?>
                    </div>
                    
                    <div class="package-body">
                        <ul class="package-features">
                            <?php foreach (array_slice($feats, 0, 4) as $f): ?>
                            <li><i class="fas fa-check"></i> <?php echo htmlspecialchars($f, ENT_QUOTES, 'UTF-8'); ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    
                    <div class="package-footer">
                        <div class="package-price-row">
                            <div class="package-price">
                                <span class="price-current"><?php echo formatMoney($pkg['price']); ?></span>
                                <?php if ($hasOldPrice): ?>
                                <span class="price-old"><?php echo formatMoney($pkg['old_price']); ?></span>
                                <?php endif; ?>
                            </div>
                            <?php if ($pkg['delivery_time']): ?>
                            <div class="package-delivery">
                                <i class="fas fa-clock"></i> <?php echo htmlspecialchars($pkg['delivery_time'], ENT_QUOTES, 'UTF-8'); ?>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <button class="btn-package" onclick="openPayment(<?php echo $pkg['id']; ?>, '<?php echo htmlspecialchars(addslashes($pkg['name']), ENT_QUOTES, 'UTF-8'); ?>', '<?php echo $pkg['price']; ?>', '<?php echo $pkg['main_category_icon'] ?? $pkg['category_icon']; ?>', '<?php echo $pkg['main_category_color'] ?? $pkg['category_color']; ?>')">
                            <i class="fas fa-shopping-cart"></i> Satın Al
                        </button>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Ödeme Modalı -->
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-credit-card"></i>
                    Ödeme Yöntemi Seçin
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="modal-package-box">
                    <div class="modal-package-inner">
                        <div class="modal-package-icon" id="mPkgIcon"></div>
                        <div class="modal-package-info">
                            <h4 id="mPkgName"></h4>
                            <span><i class="fas fa-check-circle"></i> Seçilen Paket</span>
                        </div>
                        <div class="modal-package-price">
                            <span class="amount" id="mPkgPrice"></span>
                            <span class="label">Toplam Tutar</span>
                        </div>
                    </div>
                </div>
                
                <div class="payment-title">
                    <i class="fas fa-wallet"></i> Ödeme Yöntemi Seçin
                </div>
                
                <div class="payment-list">
                    <?php foreach ($paymentMethods as $pm): ?>
                    <div class="payment-item" data-method="<?php echo $pm['code']; ?>" onclick="selectPay('<?php echo $pm['code']; ?>')">
                        <div class="payment-icon">
                            <i class="<?php echo $pm['icon']; ?>"></i>
                        </div>
                        <div class="payment-content">
                            <h5><?php echo htmlspecialchars($pm['name'], ENT_QUOTES, 'UTF-8'); ?></h5>
                            <p><?php echo htmlspecialchars($pm['description'] ?? 'Güvenli ödeme', ENT_QUOTES, 'UTF-8'); ?></p>
                        </div>
                        <div class="payment-check">
                            <i class="fas fa-check"></i>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                
                <input type="hidden" id="selPkgId">
                <input type="hidden" id="selPayMethod">
            </div>
            <div class="modal-footer">
                <button class="btn-modal-continue" id="btnContinue" onclick="goPay()" disabled>
                    <i class="fas fa-arrow-right"></i>
                    Devam Et
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Sipariş Sorgulama Modalı -->
<div class="modal fade" id="orderQueryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-search"></i>
                    Sipariş Sorgula
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="query-search-box" id="querySearchBox">
                    <h4>Siparişinizi Sorgulayın</h4>
                    <p>Sipariş numaranız veya e-posta adresiniz ile durumunuzu öğrenin</p>
                    
                    <div class="query-search-form">
                        <input type="text" class="query-search-input" id="queryInput" placeholder="Sipariş numarası veya e-posta">
                        <button type="button" class="query-search-btn" id="querySearchBtn" onclick="searchOrder()">
                            <i class="fas fa-search"></i>
                            <span>Sorgula</span>
                        </button>
                    </div>
                </div>
                
                <div class="query-result" id="queryResult"></div>
            </div>
        </div>
    </div>
</div>

<!-- Popup'lar -->
<?php foreach ($activePopups as $popup): ?>
<div class="popup-overlay position-<?php echo $popup['position']; ?>" 
     id="popup-<?php echo $popup['id']; ?>" 
     data-popup-id="<?php echo $popup['id']; ?>"
     data-frequency="<?php echo $popup['display_frequency']; ?>"
     data-delay="<?php echo $popup['show_delay']; ?>"
     data-close-overlay="<?php echo $popup['close_on_overlay']; ?>"
     <?php if ($popup['close_on_overlay']): ?>onclick="closePopupOverlay(event, <?php echo $popup['id']; ?>)"<?php endif; ?>>
    
    <div class="popup-container size-<?php echo $popup['size']; ?> anim-<?php echo $popup['animation']; ?> <?php echo empty($popup['image']) ? 'popup-no-image' : ''; ?>">
        
        <?php if ($popup['show_close_button']): ?>
        <button class="popup-close" onclick="closePopup(<?php echo $popup['id']; ?>)">
            <i class="fas fa-times"></i>
        </button>
        <?php endif; ?>
        
        <?php if (!empty($popup['image'])): ?>
        <div class="popup-image-wrap">
            <img src="<?php echo SITE_URL . '/uploads/popups/' . $popup['image']; ?>" alt="<?php echo htmlspecialchars($popup['title'], ENT_QUOTES, 'UTF-8'); ?>" class="popup-image">
        </div>
        <?php endif; ?>
        
        <div class="popup-content">
            <?php if (!empty($popup['title'])): ?>
            <h3 class="popup-title"><?php echo htmlspecialchars($popup['title'], ENT_QUOTES, 'UTF-8'); ?></h3>
            <?php endif; ?>
            
            <?php if (!empty($popup['content'])): ?>
            <div class="popup-text"><?php echo $popup['content']; ?></div>
            <?php endif; ?>
            
            <?php if (!empty($popup['button_text']) && !empty($popup['button_url'])): ?>
            <a href="<?php echo htmlspecialchars($popup['button_url'], ENT_QUOTES, 'UTF-8'); ?>" 
               class="popup-button" 
               style="background: <?php echo $popup['button_color'] ?? '#6366f1'; ?>"
               onclick="trackPopupClick(<?php echo $popup['id']; ?>)">
                <?php echo htmlspecialchars($popup['button_text'], ENT_QUOTES, 'UTF-8'); ?>
                <i class="fas fa-arrow-right"></i>
            </a>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endforeach; ?>
<script>
// Data
var pkgData = <?php echo json_encode($packages, JSON_UNESCAPED_UNICODE); ?>;
var catData = <?php echo json_encode($categories, JSON_UNESCAPED_UNICODE); ?>;
var subcatData = <?php echo json_encode($subcategoriesByParent, JSON_UNESCAPED_UNICODE); ?>;
var hasParentSupport = <?php echo $hasParentSupport ? 'true' : 'false'; ?>;
var statusConfig = <?php echo json_encode($statusConfig, JSON_UNESCAPED_UNICODE); ?>;

// Paketleri kategoriye göre grupla
var pkgByCat = {};
var pkgBySubcat = {};
pkgData.forEach(function(p) {
    var mainCatSlug = p.parent_category_slug || p.category_slug;
    if (!pkgByCat[mainCatSlug]) pkgByCat[mainCatSlug] = [];
    pkgByCat[mainCatSlug].push(p);
    
    if (p.is_subcategory) {
        if (!pkgBySubcat[p.category_slug]) pkgBySubcat[p.category_slug] = [];
        pkgBySubcat[p.category_slug].push(p);
    }
});

// ==================== CAROUSEL ====================
var catIdx = 0;
var catPerPage = 6;
var catTotal = catData.length;
var catPages = Math.ceil(catTotal / catPerPage);

function updateCat() {
    var track = document.getElementById('catTrack');
    if (!track) return;
    
    var items = track.querySelectorAll('.quick-cat-item');
    if (!items.length) return;
    
    var w = window.innerWidth;
    if (w <= 480) catPerPage = 2;
    else if (w <= 767) catPerPage = 2;
    else if (w <= 991) catPerPage = 3;
    else if (w <= 1199) catPerPage = 3;
    else catPerPage = 6;
    
    catPages = Math.ceil(catTotal / catPerPage);
    if (catIdx >= catPages) catIdx = catPages - 1;
    if (catIdx < 0) catIdx = 0;
    
    var gap = 12;
    var containerW = track.parentElement.offsetWidth;
    var itemW = (containerW - (gap * (catPerPage - 1))) / catPerPage;
    var offset = catIdx * catPerPage * (itemW + gap);
    
    track.style.transform = 'translateX(-' + offset + 'px)';
    
    var prev = document.getElementById('catPrev');
    var next = document.getElementById('catNext');
    if (prev) prev.disabled = catIdx === 0;
    if (next) next.disabled = catIdx >= catPages - 1;
    
    var pg = document.getElementById('catPage');
    if (pg) pg.innerHTML = '<strong>' + (catIdx + 1) + '</strong> / ' + catPages;
}

function catPrev() { if (catIdx > 0) { catIdx--; updateCat(); } }
function catNext() { if (catIdx < catPages - 1) { catIdx++; updateCat(); } }

window.addEventListener('load', function() { setTimeout(updateCat, 100); });
window.addEventListener('resize', updateCat);

// ==================== QUICK ORDER ====================
var qState = { 
    step: 1, 
    catId: null, 
    catSlug: null, 
    catName: null,
    catIcon: null,
    catColor: null,
    subcatSlug: null,
    subcatName: null,
    pkgId: null, 
    pkg: null 
};

function qSelectCat(id, slug, name, icon, color, subcatCount) {
    qState.catId = id;
    qState.catSlug = slug;
    qState.catName = name;
    qState.catIcon = icon;
    qState.catColor = color;
    
    document.querySelectorAll('.quick-cat-item').forEach(function(el) {
        el.classList.toggle('selected', el.dataset.id == id);
    });
    
    if (hasParentSupport && subcatData[id] && subcatData[id].length > 0) {
        qState.step = '1b';
        showSubcategories(id, icon, color);
    } else {
        qState.step = 2;
        showPackages(slug, null);
    }
    
    updateQSteps();
    document.getElementById('qBackBtn').classList.add('show');
}

function showSubcategories(parentId, parentIcon, parentColor) {
    var subs = subcatData[parentId] || [];
    var html = '';
    
    var allPkgCount = (pkgByCat[qState.catSlug] || []).length;
    html += '<div class="quick-subcat-item" onclick="qSelectSubcat(null, \'all\', \'Tümünü Göster\')">' +
        '<div class="quick-subcat-icon" style="background:' + parentColor + '">' +
            '<i class="' + parentIcon + '"></i>' +
        '</div>' +
        '<div class="quick-subcat-info">' +
            '<h5>Tümünü Göster</h5>' +
            '<span>' + allPkgCount + ' paket</span>' +
        '</div>' +
        '<div class="quick-subcat-arrow"><i class="fas fa-chevron-right"></i></div>' +
    '</div>';
    
    subs.forEach(function(sub) {
        var subPkgCount = (pkgBySubcat[sub.slug] || []).length;
        html += '<div class="quick-subcat-item" onclick="qSelectSubcat(\'' + sub.slug + '\', \'' + sub.slug + '\', \'' + escHtml(sub.name) + '\')" data-slug="' + sub.slug + '">' +
            '<div class="quick-subcat-icon" style="background:' + (sub.color || parentColor) + '">' +
                '<i class="' + (sub.icon || parentIcon) + '"></i>' +
            '</div>' +
            '<div class="quick-subcat-info">' +
                '<h5>' + escHtml(sub.name) + '</h5>' +
                '<span>' + subPkgCount + ' paket</span>' +
            '</div>' +
            '<div class="quick-subcat-arrow"><i class="fas fa-chevron-right"></i></div>' +
        '</div>';
    });
    
    document.getElementById('qStep1b').innerHTML = html;
    document.getElementById('qStep1').style.display = 'none';
    document.getElementById('qStep1b').classList.add('show');
    
    var btn = document.getElementById('qOrderBtn');
    btn.innerHTML = '<i class="fas fa-sitemap"></i><span>Alt Kategori Seçin</span>';
    btn.disabled = true;
}

function qSelectSubcat(slug, type, name) {
    qState.subcatSlug = slug;
    qState.subcatName = name;
    qState.step = 2;
    
    document.querySelectorAll('.quick-subcat-item').forEach(function(el) {
        el.classList.toggle('selected', el.dataset.slug === slug || (type === 'all' && !el.dataset.slug));
    });
    
    if (type === 'all') {
        showPackages(qState.catSlug, null);
    } else {
        showPackages(null, slug);
    }
    
    updateQSteps();
}

function showPackages(catSlug, subcatSlug) {
    var pkgs = [];
    
    if (subcatSlug) {
        pkgs = pkgBySubcat[subcatSlug] || [];
    } else if (catSlug) {
        pkgs = pkgByCat[catSlug] || [];
    }
    
    var html = '';
    if (!pkgs.length) {
        html = '<div style="text-align:center;padding:50px 20px;">' +
            '<i class="fas fa-box-open" style="font-size:50px;color:#64748b;opacity:0.3;display:block;margin-bottom:20px;"></i>' +
            '<h5 style="color:#fff;margin-bottom:8px;">Paket Bulunamadı</h5>' +
            '<p style="color:#94a3b8;font-size:14px;">Bu kategoride henüz paket yok.</p>' +
        '</div>';
    } else {
        pkgs.forEach(function(p) {
            var oldHtml = '';
            if (p.old_price && parseFloat(p.old_price) > 0) {
                oldHtml = '<span class="was">' + fmtPrice(p.old_price) + '</span>';
            }
            var iconColor = p.main_category_color || p.category_color;
            var icon = p.main_category_icon || p.category_icon;
            html += '<div class="quick-pkg-item" onclick="qSelectPkg(' + p.id + ')" data-id="' + p.id + '">' +
                '<div class="quick-pkg-icon" style="background:' + iconColor + '">' +
                    '<i class="' + icon + '"></i>' +
                '</div>' +
                '<div class="quick-pkg-info">' +
                    '<h5>' + escHtml(p.name) + '</h5>' +
                    '<span><i class="fas fa-clock"></i> ' + (p.delivery_time || 'Hızlı teslimat') + '</span>' +
                '</div>' +
                '<div class="quick-pkg-price">' +
                    '<span class="now">' + fmtPrice(p.price) + '</span>' +
                    oldHtml +
                '</div>' +
            '</div>';
        });
    }
    
    document.getElementById('qStep2').innerHTML = html;
    document.getElementById('qStep1').style.display = 'none';
    document.getElementById('qStep1b').classList.remove('show');
    document.getElementById('qStep2').classList.add('show');
    
    var btn = document.getElementById('qOrderBtn');
    btn.innerHTML = '<i class="fas fa-box"></i><span>Paket Seçin</span>';
    btn.disabled = true;
}

function qSelectPkg(id) {
    var p = pkgData.find(function(x) { return x.id == id; });
    if (!p) return;
    
    qState.pkgId = id;
    qState.pkg = p;
    qState.step = 3;
    
    document.querySelectorAll('.quick-pkg-item').forEach(function(el) {
        el.classList.toggle('selected', el.dataset.id == id);
    });
    
    var iconColor = p.main_category_color || p.category_color;
    var icon = p.main_category_icon || p.category_icon;
    
    var iconEl = document.getElementById('qDetailIcon');
    iconEl.innerHTML = '<i class="' + icon + '"></i>';
    iconEl.style.background = iconColor;
    
    document.getElementById('qDetailName').textContent = p.name;
    document.getElementById('qDetailCat').textContent = p.category_path || p.category_name;
    document.getElementById('qDetailPrice').textContent = fmtPrice(p.price);
    
    var oldEl = document.getElementById('qDetailOld');
    if (p.old_price && parseFloat(p.old_price) > 0) {
        oldEl.textContent = fmtPrice(p.old_price);
        oldEl.style.display = 'inline';
    } else {
        oldEl.style.display = 'none';
    }
    
    var feats = [];
    try {
        feats = typeof p.features === 'string' ? JSON.parse(p.features) : (p.features || []);
    } catch(e) { feats = []; }
    
    var fHtml = '';
    feats.slice(0, 4).forEach(function(f) {
        fHtml += '<span class="quick-detail-feat"><i class="fas fa-check"></i> ' + escHtml(f) + '</span>';
    });
    if (p.delivery_time) {
        fHtml += '<span class="quick-detail-feat"><i class="fas fa-clock"></i> ' + escHtml(p.delivery_time) + '</span>';
    }
    document.getElementById('qDetailFeats').innerHTML = fHtml;
    
    updateQSteps();
    
    document.getElementById('qStep2').classList.remove('show');
    document.getElementById('qStep3').classList.add('show');
    
    var btn = document.getElementById('qOrderBtn');
    btn.innerHTML = '<i class="fas fa-shopping-cart"></i><span>Sipariş Ver - ' + fmtPrice(p.price) + '</span>';
    btn.disabled = false;
}

function qBack() {
    if (qState.step === '1b') {
        qState.step = 1;
        qState.catId = null;
        qState.catSlug = null;
        
        document.getElementById('qStep1b').classList.remove('show');
        document.getElementById('qStep1').style.display = 'block';
        document.getElementById('qBackBtn').classList.remove('show');
        
        document.querySelectorAll('.quick-cat-item').forEach(function(el) {
            el.classList.remove('selected');
        });
        
        var btn = document.getElementById('qOrderBtn');
        btn.innerHTML = '<i class="fas fa-hand-pointer"></i><span>Kategori Seçin</span>';
        btn.disabled = true;
        
        setTimeout(updateCat, 50);
        
    } else if (qState.step === 2) {
        if (hasParentSupport && subcatData[qState.catId] && subcatData[qState.catId].length > 0) {
            qState.step = '1b';
            qState.subcatSlug = null;
            
            document.getElementById('qStep2').classList.remove('show');
            document.getElementById('qStep1b').classList.add('show');
            
            document.querySelectorAll('.quick-subcat-item').forEach(function(el) {
                el.classList.remove('selected');
            });
            
            var btn = document.getElementById('qOrderBtn');
            btn.innerHTML = '<i class="fas fa-sitemap"></i><span>Alt Kategori Seçin</span>';
            btn.disabled = true;
        } else {
            qState.step = 1;
            qState.catId = null;
            qState.catSlug = null;
            
            document.getElementById('qStep2').classList.remove('show');
            document.getElementById('qStep1').style.display = 'block';
            document.getElementById('qBackBtn').classList.remove('show');
            
            document.querySelectorAll('.quick-cat-item').forEach(function(el) {
                el.classList.remove('selected');
            });
            
            var btn = document.getElementById('qOrderBtn');
            btn.innerHTML = '<i class="fas fa-hand-pointer"></i><span>Kategori Seçin</span>';
            btn.disabled = true;
            
            setTimeout(updateCat, 50);
        }
        
    } else if (qState.step === 3) {
        qState.step = 2;
        qState.pkgId = null;
        qState.pkg = null;
        
        document.getElementById('qStep3').classList.remove('show');
        document.getElementById('qStep2').classList.add('show');
        
        document.querySelectorAll('.quick-pkg-item').forEach(function(el) {
            el.classList.remove('selected');
        });
        
        var btn = document.getElementById('qOrderBtn');
        btn.innerHTML = '<i class="fas fa-box"></i><span>Paket Seçin</span>';
        btn.disabled = true;
    }
    
    updateQSteps();
}

function qOrder() {
    if (!qState.pkgId || !qState.pkg) return;
    var p = qState.pkg;
    var iconColor = p.main_category_color || p.category_color;
    var icon = p.main_category_icon || p.category_icon;
    openPayment(p.id, p.name, p.price, icon, iconColor);
}

function updateQSteps() {
    var s1 = document.getElementById('qs1');
    var s2 = document.getElementById('qs2');
    var s3 = document.getElementById('qs3');
    var l1 = document.getElementById('ql1');
    var l2 = document.getElementById('ql2');
    
    s1.className = 'quick-step';
    s2.className = 'quick-step';
    s3.className = 'quick-step';
    l1.className = 'quick-step-line';
    l2.className = 'quick-step-line';
    
    if (qState.step === 1) {
        s1.classList.add('active');
    } else if (qState.step === '1b') {
        s1.classList.add('done');
        l1.classList.add('half');
    } else if (qState.step === 2) {
        s1.classList.add('done');
        l1.classList.add('done');
        s2.classList.add('active');
    } else if (qState.step === 3) {
        s1.classList.add('done');
        l1.classList.add('done');
        s2.classList.add('done');
        l2.classList.add('done');
        s3.classList.add('active');
    }
}

function fmtPrice(price) {
    return '<?php echo $settings->get("currency_symbol", "₺"); ?>' + parseFloat(price).toFixed(2).replace('.', ',');
}

function escHtml(str) {
    if (!str) return '';
    var d = document.createElement('div');
    d.textContent = str;
    return d.innerHTML;
}

// ==================== CATEGORY FILTER ====================
document.querySelectorAll('.category-tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
        document.querySelectorAll('.category-tab').forEach(function(t) {
            t.classList.remove('active');
        });
        this.classList.add('active');
        
        var cat = this.dataset.category;
        document.querySelectorAll('.pkg-item').forEach(function(item) {
            item.style.display = (cat === 'all' || item.dataset.category === cat) ? 'block' : 'none';
        });
        
        if (typeof AOS !== 'undefined') AOS.refresh();
    });
});

// ==================== PAYMENT MODAL ====================
var selPkgId = null;
var selPayMethod = null;

function openPayment(id, name, price, icon, color) {
    selPkgId = id;
    selPayMethod = null;
    
    document.getElementById('selPkgId').value = id;
    document.getElementById('mPkgName').textContent = name;
    document.getElementById('mPkgPrice').textContent = fmtPrice(price);
    
    var iconEl = document.getElementById('mPkgIcon');
    iconEl.innerHTML = '<i class="' + icon + '"></i>';
    iconEl.style.background = color;
    
    document.querySelectorAll('.payment-item').forEach(function(el) {
        el.classList.remove('active');
    });
    document.getElementById('btnContinue').disabled = true;
    
    new bootstrap.Modal(document.getElementById('paymentModal')).show();
}

function selectPay(method) {
    selPayMethod = method;
    document.getElementById('selPayMethod').value = method;
    
    document.querySelectorAll('.payment-item').forEach(function(el) {
        el.classList.toggle('active', el.dataset.method === method);
    });
    
    document.getElementById('btnContinue').disabled = false;
}

function goPay() {
    if (!selPkgId || !selPayMethod) return;
    window.location.href = SITE_URL + '/odeme.php?paket=' + selPkgId + '&yontem=' + selPayMethod;
}

// ==================== ORDER QUERY ====================
function openOrderQuery() {
    document.getElementById('querySearchBox').style.display = 'block';
    document.getElementById('queryResult').classList.remove('show');
    document.getElementById('queryResult').innerHTML = '';
    document.getElementById('queryInput').value = '';
    
    new bootstrap.Modal(document.getElementById('orderQueryModal')).show();
    
    setTimeout(function() {
        document.getElementById('queryInput').focus();
    }, 500);
}

function searchOrder() {
    var query = document.getElementById('queryInput').value.trim();
    if (!query) {
        document.getElementById('queryInput').focus();
        return;
    }
    
    var btn = document.getElementById('querySearchBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Sorgulanıyor...</span>';
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', window.location.href, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-search"></i><span>Sorgula</span>';
            
            if (xhr.status === 200) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success && data.order) {
                        showOrderResult(data.order);
                    } else {
                        showOrderError(data.message || 'Sipariş bulunamadı.');
                    }
                } catch (e) {
                    showOrderError('Bir hata oluştu. Lütfen tekrar deneyin.');
                }
            } else {
                showOrderError('Bir hata oluştu. Lütfen tekrar deneyin.');
            }
        }
    };
    
    xhr.send('ajax_order_query=1&query=' + encodeURIComponent(query));
}

function showOrderError(message) {
    var html = '<div class="query-error">' +
        '<i class="fas fa-exclamation-circle"></i>' +
        '<p>' + escHtml(message) + '</p>' +
    '</div>';
    
    document.getElementById('queryResult').innerHTML = html;
    document.getElementById('queryResult').classList.add('show');
}

function showOrderResult(order) {
    var status = statusConfig[order.status] || statusConfig['pending'];
    
    var html = '<div class="query-order-box">' +
        '<div class="query-order-header">' +
            '<div class="query-order-number">#' + escHtml(order.order_number) + '</div>' +
            '<div class="query-order-status" style="background:' + status.bg + ';color:' + status.color + '">' +
                '<i class="' + status.icon + '"></i> ' + status.text +
            '</div>' +
        '</div>' +
        '<div class="query-order-package">' +
            '<div class="query-order-pkg-icon" style="background:' + order.category_color + '">' +
                '<i class="' + order.category_icon + '"></i>' +
            '</div>' +
            '<div class="query-order-pkg-info">' +
                '<h5>' + escHtml(order.package_name) + '</h5>' +
                '<span>' + escHtml(order.category_name) + '</span>' +
            '</div>' +
        '</div>' +
        '<div class="query-order-details">' +
            '<div class="query-detail-item">' +
                '<div class="query-detail-label"><i class="fas fa-user"></i> Müşteri</div>' +
                '<div class="query-detail-value">' + escHtml(order.customer_name) + '</div>' +
            '</div>' +
            '<div class="query-detail-item">' +
                '<div class="query-detail-label"><i class="fas fa-envelope"></i> E-posta</div>' +
                '<div class="query-detail-value">' + escHtml(order.customer_email) + '</div>' +
            '</div>' +
            '<div class="query-detail-item">' +
                '<div class="query-detail-label"><i class="fas fa-link"></i> Sosyal Medya</div>' +
                '<div class="query-detail-value">' + escHtml(order.social_media_link || '-') + '</div>' +
            '</div>' +
            '<div class="query-detail-item">' +
                '<div class="query-detail-label"><i class="fas fa-calendar"></i> Tarih</div>' +
                '<div class="query-detail-value">' + escHtml(order.created_at_formatted) + '</div>' +
            '</div>' +
        '</div>' +
        '<div class="query-order-footer">' +
            '<div class="query-order-total">Toplam: <strong>' + escHtml(order.amount_formatted) + '</strong></div>' +
            '<button class="query-new-search" onclick="resetOrderQuery()">' +
                '<i class="fas fa-search"></i> Yeni Sorgulama' +
            '</button>' +
        '</div>' +
    '</div>';
    
    document.getElementById('querySearchBox').style.display = 'none';
    document.getElementById('queryResult').innerHTML = html;
    document.getElementById('queryResult').classList.add('show');
}

function resetOrderQuery() {
    document.getElementById('querySearchBox').style.display = 'block';
    document.getElementById('queryResult').classList.remove('show');
    document.getElementById('queryResult').innerHTML = '';
    document.getElementById('queryInput').value = '';
    document.getElementById('queryInput').focus();
}

// Enter tuşu ile sorgulama
document.addEventListener('DOMContentLoaded', function() {
    var queryInput = document.getElementById('queryInput');
    if (queryInput) {
        queryInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchOrder();
            }
        });
    }
});

// ==================== POPUP SİSTEMİ ====================
var shownPopups = [];

function initPopups() {
    var popups = document.querySelectorAll('.popup-overlay');
    
    popups.forEach(function(popup) {
        var popupId = popup.dataset.popupId;
        var frequency = popup.dataset.frequency;
        var delay = parseInt(popup.dataset.delay) || 0;
        
        // Gösterilecek mi kontrol et
        if (!shouldShowPopup(popupId, frequency)) {
            return;
        }
        
        // Gecikme ile göster
        setTimeout(function() {
            showPopup(popupId);
        }, delay * 1000);
    });
}

function shouldShowPopup(popupId, frequency) {
    var storageKey = 'popup_' + popupId;
    
    switch (frequency) {
        case 'always':
            return true;
            
        case 'once':
            return !localStorage.getItem(storageKey);
            
        case 'once_per_session':
            return !sessionStorage.getItem(storageKey);
            
        case 'once_per_day':
            var lastShown = localStorage.getItem(storageKey);
            if (!lastShown) return true;
            var lastDate = new Date(parseInt(lastShown));
            var today = new Date();
            return lastDate.toDateString() !== today.toDateString();
            
        default:
            return true;
    }
}

function markPopupShown(popupId, frequency) {
    var storageKey = 'popup_' + popupId;
    
    switch (frequency) {
        case 'once':
            localStorage.setItem(storageKey, '1');
            break;
            
        case 'once_per_session':
            sessionStorage.setItem(storageKey, '1');
            break;
            
        case 'once_per_day':
            localStorage.setItem(storageKey, Date.now().toString());
            break;
    }
}

function showPopup(popupId) {
    var popup = document.getElementById('popup-' + popupId);
    if (!popup || shownPopups.includes(popupId)) return;
    
    shownPopups.push(popupId);
    popup.classList.add('show');
    document.body.style.overflow = 'hidden';
    
    // Animasyon için küçük gecikme
    setTimeout(function() {
        popup.classList.add('visible');
    }, 10);
    
    // Görüntüleme istatistiği
    trackPopupView(popupId);
    
    // Gösterim kaydı
    var frequency = popup.dataset.frequency;
    markPopupShown(popupId, frequency);
}

function closePopup(popupId) {
    var popup = document.getElementById('popup-' + popupId);
    if (!popup) return;
    
    popup.classList.remove('visible');
    
    setTimeout(function() {
        popup.classList.remove('show');
        
        // Başka açık popup var mı kontrol et
        var openPopups = document.querySelectorAll('.popup-overlay.show');
        if (openPopups.length === 0) {
            document.body.style.overflow = '';
        }
    }, 400);
}

function closePopupOverlay(event, popupId) {
    if (event.target.classList.contains('popup-overlay')) {
        closePopup(popupId);
    }
}

function trackPopupView(popupId) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', window.location.href, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('ajax_popup_view=1&popup_id=' + popupId);
}

function trackPopupClick(popupId) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', window.location.href, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('ajax_popup_click=1&popup_id=' + popupId);
}

// ESC tuşu ile kapatma
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        var openPopups = document.querySelectorAll('.popup-overlay.show');
        openPopups.forEach(function(popup) {
            var popupId = popup.dataset.popupId;
            closePopup(popupId);
        });
    }
});

// ==================== SMOOTH SCROLL ====================
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
    a.addEventListener('click', function(e) {
        var target = this.getAttribute('href');
        if (target === '#') return;
        
        var el = document.querySelector(target);
        if (el) {
            e.preventDefault();
            var offset = document.querySelector('.navbar') ? document.querySelector('.navbar').offsetHeight : 80;
            var pos = el.getBoundingClientRect().top + window.pageYOffset - offset - 20;
            window.scrollTo({ top: pos, behavior: 'smooth' });
        }
    });
});

// Init
document.addEventListener('DOMContentLoaded', function() {
    updateQSteps();
    setTimeout(updateCat, 100);
    
    // Popup'ları başlat (sayfa yüklendikten 500ms sonra)
    setTimeout(initPopups, 500);
});
</script>

<?php require_once __DIR__ . '/footer.php'; ?>