<?php
/*
|--------------------------------------------------------------------------
| RadyoHost.BiZ / Profesyonel Radyo Hosting ve Web Tasarım Hizmetleri
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| PAKETLER SAYFASI
|--------------------------------------------------------------------------
| packages.php
| RadyoHost Okey Premium Gold / Premium / VIP Üyelik Merkezi
| Developed By VoLKaN75
|--------------------------------------------------------------------------
*/

declare(strict_types=1);

require_once __DIR__ . '/config/db.php';

function site_e($value): string
{
    return htmlspecialchars((string)$value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

function site_short($text, int $limit = 150): string
{
    $text = trim(strip_tags((string)$text));

    if ($text === '') {
        return 'Premium okey deneyimi için özel hazırlanmış üyelik paketi.';
    }

    if (mb_strlen($text, 'UTF-8') <= $limit) {
        return $text;
    }

    return mb_substr($text, 0, $limit, 'UTF-8') . '...';
}

function package_emoji(string $type): string
{
    return match ($type) {
        'gold' => '🥇',
        'premium' => '👑',
        'vip' => '💎',
        default => '🎮',
    };
}

function package_label(string $type): string
{
    return match ($type) {
        'gold' => 'Gold Üyelik',
        'premium' => 'Premium Üyelik',
        'vip' => 'VIP Üyelik',
        default => 'Okey Paketi',
    };
}

function package_slogan(string $type): string
{
    return match ($type) {
        'gold' => 'Oyuna güçlü başlangıç yap.',
        'premium' => 'Masada farkını göster.',
        'vip' => 'Elit oyuncu seviyesine yüksel.',
        default => 'Premium oyun deneyimi.',
    };
}

function package_class(string $type): string
{
    return match ($type) {
        'gold' => 'tier-gold',
        'premium' => 'tier-premium',
        'vip' => 'tier-vip',
        default => 'tier-gold',
    };
}

function money_tr($value): string
{
    return number_format((float)$value, 2, ',', '.') . ' ₺';
}

$logoImage = 'uploads/site/logo.png';
$heroBgImage = 'uploads/site/packages-hero.webp';

$packages = [
    'gold' => [],
    'premium' => [],
    'vip' => [],
];

$allPackages = [];

try {
    if (isset($pdo) && $pdo instanceof PDO) {
        $stmt = $pdo->query("
            SELECT *
            FROM packages
            WHERE status IN ('active','aktif','1')
            ORDER BY FIELD(package_type,'gold','premium','vip'), price ASC, id DESC
        ");

        $allPackages = $stmt->fetchAll(PDO::FETCH_ASSOC) ?: [];

        foreach ($allPackages as $item) {
            $type = strtolower((string)($item['package_type'] ?? 'gold'));

            if (!isset($packages[$type])) {
                $type = 'gold';
            }

            $packages[$type][] = $item;
        }
    }
} catch (Throwable $e) {
    $allPackages = [];
}

$totalPackages = count($allPackages);
$goldCount = count($packages['gold']);
$premiumCount = count($packages['premium']);
$vipCount = count($packages['vip']);
?>
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Paketler | RadyoHost Okey</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="101 Batman Okey Gold, Premium ve VIP üyelik paketleri. Premium okey ve sohbet deneyimi.">

<style>
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#070911;color:#fff}
a{text-decoration:none;color:inherit}
.site-wrap{min-height:100vh;background:radial-gradient(circle at top left,rgba(245,182,66,.22),transparent 34%),radial-gradient(circle at top right,rgba(185,0,0,.25),transparent 36%),linear-gradient(180deg,#070911,#10131f 48%,#070911)}
.container{width:min(1180px,92%);margin:auto}

.topbar{position:sticky;top:0;z-index:999;backdrop-filter:blur(22px);background:linear-gradient(135deg,rgba(7,9,17,.94),rgba(16,19,31,.88));border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 18px 60px rgba(0,0,0,.25)}
.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:22px;position:relative}
.logo{display:flex;align-items:center;min-width:240px;position:relative;z-index:1001}
.logo-img{max-width:250px;max-height:76px;object-fit:contain;display:block;filter:drop-shadow(0 10px 22px rgba(245,182,66,.18))}
.menu{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;padding:8px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.menu a{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 15px;border-radius:17px;color:#dce3ef;font-size:14px;font-weight:900;transition:.25s;white-space:nowrap}
.menu a:hover{color:#fff;background:rgba(245,182,66,.12);transform:translateY(-2px)}
.menu a.active{color:#111;background:linear-gradient(135deg,#f5b642,#ffcf6a);box-shadow:0 12px 28px rgba(245,182,66,.22)}
.actions{display:flex;gap:10px}
.btn{min-height:48px;padding:0 20px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:1000;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;transition:.25s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{color:#111;background:linear-gradient(135deg,#f5b642,#ffcf6a);box-shadow:0 15px 34px rgba(245,182,66,.22)}

.mobile-menu-btn{display:none;width:52px;height:52px;border:none;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;z-index:1001}
.mobile-menu-btn span{width:25px;height:3px;background:#fff;border-radius:20px;transition:.3s}
.mobile-menu-btn.active{background:linear-gradient(135deg,#f5b642,#ffcf6a)}
.mobile-menu-btn.active span{background:#111}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.page-hero{
    position:relative;
    overflow:hidden;
    padding:74px 0 54px;
    border-bottom:1px solid rgba(245,182,66,.18);
    background:
        linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.70) 44%,rgba(0,0,0,.48) 100%),
        url('<?= site_e($heroBgImage) ?>') center center/cover no-repeat;
}
.page-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 28%,rgba(245,182,66,.18),transparent 30%),
        linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.08));
}
.page-hero .container{position:relative;z-index:2}
.kicker{display:inline-flex;padding:10px 16px;border-radius:999px;background:rgba(245,182,66,.13);border:1px solid rgba(245,182,66,.35);color:#f5b642;font-weight:1000;margin-bottom:18px}
.page-hero h1{margin:0;font-size:clamp(42px,6vw,74px);line-height:1.02;text-transform:uppercase;letter-spacing:-1.7px}
.page-hero h1 span{color:#f5b642;text-shadow:0 0 35px rgba(245,182,66,.35)}
.page-hero p{margin:18px 0 0;max-width:720px;color:#dce3ef;font-size:18px;font-weight:800;line-height:1.7}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-32px;position:relative;z-index:5}
.stat{padding:23px 22px;border-radius:22px;background:rgba(10,10,10,.92);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.stat strong{display:block;color:#f5b642;font-size:31px;margin-bottom:6px}
.stat span{color:#cfd6e3;font-size:13px;font-weight:900}

.section{padding:62px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.section-head h2{margin:0;font-size:38px}
.section-head p{margin:8px 0 0;color:#9aa3b2;font-weight:800;line-height:1.6}

.tier-section{position:relative;margin-bottom:54px;padding:34px;border-radius:42px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 30px 90px rgba(0,0,0,.24);overflow:hidden}
.tier-section:before{content:"";position:absolute;width:360px;height:360px;border-radius:999px;right:-170px;top:-170px;background:rgba(245,182,66,.14)}
.tier-section.premium-zone:before{background:rgba(233,21,21,.18)}
.tier-section.vip-zone:before{background:rgba(170,74,255,.22)}
.tier-title{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}
.tier-title h2{margin:0;font-size:36px;text-transform:uppercase}
.tier-title p{margin:8px 0 0;color:#aeb7c7;font-weight:800}
.tier-tag{padding:10px 15px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(245,182,66,.25);color:#f5b642;font-weight:1000;font-size:12px;text-transform:uppercase}

.package-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.package-card{position:relative;overflow:hidden;min-height:465px;padding:28px;border-radius:34px;background:radial-gradient(circle at top right,rgba(245,182,66,.18),transparent 38%),linear-gradient(145deg,#0b0d15,#15110a 70%,#080911);border:1px solid rgba(245,182,66,.32);box-shadow:0 28px 90px rgba(0,0,0,.42);transition:.25s}
.package-card:hover{transform:translateY(-9px);border-color:rgba(245,182,66,.72);box-shadow:0 40px 120px rgba(0,0,0,.62)}
.package-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-130%);transition:.55s}
.package-card:hover:before{transform:translateX(130%)}
.package-card.tier-premium{background:radial-gradient(circle at top right,rgba(233,21,21,.24),transparent 38%),linear-gradient(145deg,#0b0d15,#210505 70%,#080911);border-color:rgba(255,80,80,.38)}
.package-card.tier-vip{background:radial-gradient(circle at top right,rgba(170,74,255,.30),transparent 38%),linear-gradient(145deg,#0b0d15,#1d0828 70%,#080911);border-color:rgba(190,100,255,.42)}
.package-icon{position:relative;z-index:2;width:84px;height:84px;border-radius:28px;display:grid;place-items:center;font-size:42px;background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 30px rgba(245,182,66,.12);margin-bottom:18px}
.package-badge{position:relative;z-index:2;display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(245,182,66,.13);border:1px solid rgba(245,182,66,.28);color:#ffd47d;font-size:12px;font-weight:1000;text-transform:uppercase;margin-bottom:16px}
.package-card h3{position:relative;z-index:2;margin:0;color:#fff;font-size:28px;line-height:1.15;text-transform:uppercase}
.package-slogan{position:relative;z-index:2;margin:10px 0 18px;color:#f5b642;font-size:13px;font-weight:1000;text-transform:uppercase}
.package-desc{position:relative;z-index:2;min-height:78px;margin:0 0 20px;color:#aeb7c7;font-size:14px;font-weight:760;line-height:1.7}
.price{position:relative;z-index:2;display:flex;align-items:flex-end;gap:8px;margin:22px 0 22px}
.price strong{font-size:46px;line-height:1;color:#f5b642;text-shadow:0 0 24px rgba(245,182,66,.20)}
.price span{color:#dce3ef;font-weight:900;margin-bottom:7px}
.package-meta{position:relative;z-index:2;display:grid;gap:10px;margin-bottom:22px}
.package-meta span{padding:13px 14px;border-radius:17px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.08);color:#dce3ef;font-size:13px;font-weight:900}
.package-actions{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.buy-btn{min-height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:1000;text-transform:uppercase;color:#111;background:linear-gradient(135deg,#f5b642,#ffcf6a);box-shadow:0 16px 38px rgba(245,182,66,.24)}
.info-btn{min-height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:1000;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
.empty-box{position:relative;z-index:2;grid-column:1 / -1;padding:34px;border-radius:30px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);color:#aeb7c7;font-weight:900;text-align:center}

.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{position:relative;overflow:hidden;padding:26px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(245,182,66,.16);box-shadow:0 24px 72px rgba(0,0,0,.24)}
.feature-card:before{content:"";position:absolute;width:170px;height:170px;border-radius:999px;right:-80px;top:-80px;background:rgba(245,182,66,.11)}
.feature-card strong{position:relative;display:block;color:#f5b642;font-size:22px;margin-bottom:10px}
.feature-card span{position:relative;color:#aeb7c7;line-height:1.7;font-weight:760}

.compare{overflow:auto;border-radius:34px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 72px rgba(0,0,0,.24)}
.compare table{width:100%;border-collapse:collapse;min-width:780px}
.compare th,.compare td{padding:18px;border-bottom:1px solid rgba(255,255,255,.07);text-align:center;color:#dce3ef;font-weight:900}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare th{color:#f5b642;background:rgba(0,0,0,.18)}
.compare tr:hover td{background:rgba(245,182,66,.045)}

.cta-box{position:relative;overflow:hidden;padding:40px;border-radius:40px;background:radial-gradient(circle at top right,rgba(245,182,66,.25),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.10);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:0 30px 90px rgba(0,0,0,.32)}
.cta-box h2{margin:0;color:#fff;font-size:36px}
.cta-box p{margin:10px 0 0;color:#aeb7c7;font-weight:800;line-height:1.7}

.footer{margin-top:40px;padding:22px 30px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;color:#9aa3b2;font-size:13px;font-weight:900}
.footer a{color:#f5b642}
.footer-center{color:#f5b642}
.footer-right{display:flex;justify-content:flex-end;align-items:center;color:#ff5db1}
.footer-right img{width:52px;height:52px;object-fit:contain;margin-left:-2px;filter:drop-shadow(0 0 10px rgba(37,211,102,.8))}

@media(max-width:1100px){
    .nav{padding:14px 0}
    .actions{gap:8px}
    .btn{padding:0 15px;font-size:13px}
    .menu a{padding:0 12px;font-size:13px}
}

@media(max-width:980px){
    .stats,.package-grid,.features-grid{grid-template-columns:repeat(2,1fr)}
    .cta-box{grid-template-columns:1fr}
}

@media(max-width:768px){
    .topbar{overflow:visible}
    .nav{min-height:82px;padding:12px 0;gap:12px;flex-wrap:nowrap}
    .logo{min-width:auto;flex:1}
    .logo-img{max-width:210px;max-height:68px}
    .mobile-menu-btn{display:flex}
    .menu{position:absolute;top:100%;left:0;right:0;width:100%;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:8px;padding:16px;border-radius:0 0 24px 24px;background:linear-gradient(180deg,rgba(7,9,17,.99),rgba(16,19,31,.98));border:1px solid rgba(245,182,66,.20);border-top:none;box-shadow:0 28px 70px rgba(0,0,0,.55);display:none;z-index:1000}
    .menu.active{display:flex}
    .menu a{width:100%;height:54px;justify-content:flex-start;padding:0 18px;font-size:15px;border-radius:16px}
    .actions{display:none}
    .section-head,.tier-title{display:block}
    .footer{grid-template-columns:1fr;text-align:center}
    .footer-right{justify-content:center}
    .page-hero{padding:54px 0 46px}
}

@media(max-width:560px){
    .stats,.package-grid,.features-grid{grid-template-columns:1fr}
    .package-actions{grid-template-columns:1fr}
}

@media(max-width:480px){
    .container{width:min(100% - 24px,1180px)}
    .logo-img{max-width:185px;max-height:62px}
    .mobile-menu-btn{width:48px;height:48px;border-radius:14px}
    .page-hero h1{font-size:40px}
    .hero-buttons .btn{width:100%}
    .tier-section{padding:24px}
    .section-head h2,.tier-title h2{font-size:30px}
}
</style>
</head>

<body>
<div class="site-wrap">

<header class="topbar">
    <div class="container nav">
        <a href="index.php" class="logo">
            <img src="<?= site_e($logoImage) ?>" alt="101 Batman Okey" class="logo-img">
        </a>

        <button class="mobile-menu-btn" id="mobileMenuBtn" type="button" aria-label="Menüyü Aç / Kapat" aria-expanded="false">
            <span></span><span></span><span></span>
        </button>

        <nav class="menu" id="mainMenu">
            <a href="index.php">🏠 Ana Sayfa</a>
            <a href="announcements.php">📢 Duyurular</a>
            <a href="downloads.php">⬇️ İndir</a>
            <a href="packages.php" class="active">👑 Paketler</a>
            <a href="contact.php">☎️ İletişim</a>
        </nav>

        <div class="actions">
            <a href="login.php" class="btn">Giriş Yap</a>
            <a href="register.php" class="btn btn-gold">Kayıt Ol</a>
        </div>
    </div>
</header>

<main>

<section class="page-hero">
    <div class="container">
        <div class="kicker">👑 101 Batman Okey Üyelik Paketlerimiz</div>

        <h1>Oyunda farkını <span>paketinle</span> göster.</h1>

        <p>Gold, Premium ve VIP üyeliklerle profilini güçlendir, özel rozetini al, masada farkını göster ve premium okey deneyimini yaşa.</p>

        <div class="hero-buttons">
            <a href="#packages" class="btn btn-gold">Paketleri İncele</a>
            <a href="register.php" class="btn">Hemen Üye Ol</a>
        </div>
    </div>
</section>

<section>
    <div class="container">
        <div class="stats">
            <div class="stat"><strong><?= site_e((string)$totalPackages) ?></strong><span>Aktif Paket</span></div>
            <div class="stat"><strong><?= site_e((string)$goldCount) ?></strong><span>Gold</span></div>
            <div class="stat"><strong><?= site_e((string)$premiumCount) ?></strong><span>Premium</span></div>
            <div class="stat"><strong><?= site_e((string)$vipCount) ?></strong><span>VIP</span></div>
        </div>
    </div>
</section>

<section class="section" id="packages">
    <div class="container">
        <div class="section-head">
            <div>
                <h2>🎖️ Üyelik Paketlerimiz</h2>
                <p>Gold, Premium ve VIP paketler admin panelden yönetilir ve burada canlı olarak listelenir.</p>
            </div>
        </div>

        <?php foreach (['gold', 'premium', 'vip'] as $type): ?>
            <?php
            $zoneClass = $type === 'premium' ? 'premium-zone' : ($type === 'vip' ? 'vip-zone' : '');
            ?>
            <section class="tier-section <?= site_e($zoneClass) ?>">
                <div class="tier-title">
                    <div>
                        <h2><?= site_e(package_emoji($type) . ' ' . package_label($type)) ?></h2>
                        <p><?= site_e(package_slogan($type)) ?></p>
                    </div>
                    <span class="tier-tag"><?= site_e(strtoupper($type)) ?> SEVİYESİ</span>
                </div>

                <div class="package-grid">
                    <?php if (!empty($packages[$type])): ?>
                        <?php foreach ($packages[$type] as $item): ?>
                            <article class="package-card <?= site_e(package_class($type)) ?>">
                                <div class="package-icon"><?= site_e(package_emoji($type)) ?></div>

                                <span class="package-badge"><?= site_e(package_label($type)) ?></span>

                                <h3><?= site_e($item['title'] ?? 'Paket') ?></h3>

                                <div class="package-slogan"><?= site_e(package_slogan($type)) ?></div>

                                <p class="package-desc">
                                    <?= site_e(site_short($item['description'] ?? '', 145)) ?>
                                </p>

                                <div class="price">
                                    <strong><?= site_e(money_tr($item['price'] ?? 0)) ?></strong>
                                    <span><?= site_e($item['duration'] ?? '') ?></span>
                                </div>

                                <div class="package-meta">
                                    <span>🎁 Miktar: <?= site_e($item['amount'] ?? 'Belirtilmedi') ?></span>
                                    <span>⏳ Süre: <?= site_e($item['duration'] ?? 'Süresiz') ?></span>
                                    <span>🛡️ Durum: Aktif</span>
                                </div>

                                <div class="package-actions">
                                    <a href="register.php" class="buy-btn">Paketi Al</a>
                                    <a href="contact.php" class="info-btn">Bilgi Al</a>
                                </div>
                            </article>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="empty-box">
                            <?= site_e(package_label($type)) ?> için henüz aktif paket oluşturulmadı.
                        </div>
                    <?php endif; ?>
                </div>
            </section>
        <?php endforeach; ?>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <h2>✨ Paket Avantajları</h2>
                <p>Oyuncu profilini güçlendiren premium ayrıcalıklar.</p>
            </div>
        </div>

        <div class="features-grid">
            <div class="feature-card"><strong>🎖️ Özel Rozet</strong><span>Gold, Premium ve VIP seviyene göre profilinde özel rozet görünümü kazanırsın.</span></div>
            <div class="feature-card"><strong>💬 Sohbet Ayrıcalığı</strong><span>Topluluk içinde daha güçlü, daha dikkat çekici ve özel oyuncu görünümü.</span></div>
            <div class="feature-card"><strong>🎮 Oyun Hissiyatı</strong><span>Premium paket yapısı ile oyunda daha kaliteli ve güçlü bir atmosfer yaşarsın.</span></div>
            <div class="feature-card"><strong>💎 VIP Havası</strong><span>En üst seviye paketlerle masada farkını hissettiren özel oyuncu deneyimi.</span></div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <h2>📊 Paket Karşılaştırması</h2>
                <p>Gold, Premium ve VIP seviyeleri arasındaki genel farklar.</p>
            </div>
        </div>

        <div class="compare">
            <table>
                <thead>
                    <tr>
                        <th>Özellik</th>
                        <th>🥇 Gold</th>
                        <th>👑 Premium</th>
                        <th>💎 VIP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>Profil Rozeti</td><td>✅</td><td>✅</td><td>✅</td></tr>
                    <tr><td>Özel Görünüm</td><td>Standart+</td><td>Gelişmiş</td><td>En Üst</td></tr>
                    <tr><td>Sohbet Ayrıcalığı</td><td>Orta</td><td>Yüksek</td><td>VIP</td></tr>
                    <tr><td>Oyuncu Havası</td><td>Başlangıç</td><td>Premium</td><td>Elit</td></tr>
                    <tr><td>Önerilen Kullanım</td><td>Yeni Oyuncu</td><td>Aktif Oyuncu</td><td>Kaliteli Oyuncu</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="cta-box">
            <div>
                <h2>Premium oyuncu olmaya hazır mısın?</h2>
                <p>Hesabını oluştur, sana uygun paketi seç ve 101 Batman Okey masalarında farkını göster.</p>
            </div>

            <a href="register.php" class="btn btn-gold">Hemen Üye Ol</a>
        </div>
    </div>
</section>

<footer class="footer">
    <div>Powered By <?= date('Y') ?> <a href="https://www.radyohost.biz" target="_blank">🌐RadyoHost.BiZ</a><span> Web Teknolojileri</span></div>
    <div class="footer-center">Premium Okey ve Sohbet Platformu</div>
    <div class="footer-right">
        Developed By VoLKaN75
        <a href="https://wa.me/905415917536" target="_blank">
            <img src="uploads/footer/whatsapp.png" alt="WhatsApp">
        </a>
    </div>
</footer>

</main>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mainMenu = document.getElementById('mainMenu');

    if (mobileMenuBtn && mainMenu) {
        mobileMenuBtn.addEventListener('click', function () {
            const isOpen = mainMenu.classList.toggle('active');
            mobileMenuBtn.classList.toggle('active', isOpen);
            mobileMenuBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        });

        mainMenu.querySelectorAll('a').forEach(function (link) {
            link.addEventListener('click', function () {
                mainMenu.classList.remove('active');
                mobileMenuBtn.classList.remove('active');
                mobileMenuBtn.setAttribute('aria-expanded', 'false');
            });
        });

        window.addEventListener('resize', function () {
            if (window.innerWidth > 768) {
                mainMenu.classList.remove('active');
                mobileMenuBtn.classList.remove('active');
                mobileMenuBtn.setAttribute('aria-expanded', 'false');
            }
        });
    }
});
</script>

</body>
</html>