<?php

declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Bootstrap
|--------------------------------------------------------------------------
*/

$bootstrapFile = __DIR__ . '/bootstrap.php';

if (is_file($bootstrapFile)) {
    require_once $bootstrapFile;
}

/*
|--------------------------------------------------------------------------
| Pastikan koneksi database tersedia
|--------------------------------------------------------------------------
| bootstrap.php pada project ini tidak selalu meneruskan variabel koneksi.
| Karena halaman pengelola popular memakai config/database.php, file yang sama
| juga dimuat di halaman depan.
*/

$databaseFile = __DIR__ . '/config/database.php';

if (
    (
        !isset($pdo) ||
        !($pdo instanceof PDO)
    ) &&
    (
        !isset($conn) ||
        !($conn instanceof mysqli)
    ) &&
    is_file($databaseFile)
) {
    require_once $databaseFile;
}

if (session_status() === PHP_SESSION_NONE) {
    session_name('USERSESSID');
    session_start();
}

if (!function_exists('e')) {
    function e($value)
    {
        return htmlspecialchars(
            (string) $value,
            ENT_QUOTES,
            'UTF-8'
        );
    }
}

/*
|--------------------------------------------------------------------------
| Informasi halaman
|--------------------------------------------------------------------------
*/

$siteName = 'Platform Online';
$pageTitle = 'Pusat Game Online';
$activeMenu = 'home';

/*
|--------------------------------------------------------------------------
| Informasi pengguna
|--------------------------------------------------------------------------
*/

$isLoggedIn = !empty($_SESSION['user_id']);

$username = isset($_SESSION['username'])
    ? (string) $_SESSION['username']
    : 'Member';

$rawBalance = isset($_SESSION['balance'])
    ? (float) $_SESSION['balance']
    : 0;

$userBalance = number_format(
    $rawBalance,
    0,
    ',',
    '.'
);

$userInitialSource = preg_replace(
    '/[^A-Za-z0-9]/',
    '',
    $username
);

$userInitial = $userInitialSource !== ''
    ? strtoupper(substr($userInitialSource, 0, 1))
    : 'M';

/*
|--------------------------------------------------------------------------
| PENGATURAN BERANDA
|--------------------------------------------------------------------------
| Semua yang ingin diganti cukup edit dari bagian ini.
*/

$homeSettings = [
    'welcome_text' => 'SELAMAT DATANG',
    'headline' => 'DI AGEN TERBESAR',
    'headline_bottom' => 'DI ASIA',

    'trust_first' => 'AMAN',
    'trust_second' => 'CEPAT',
    'trust_third' => 'TERPERCAYA',

    'jackpot_title' => 'TOTAL JACKPOT',
   'jackpot_amount' => '35,000,000.00',

    'provider_label' => 'PILIHAN MEMBER',
    'provider_title' => 'Provider Populer',

    'payment_label' => 'TRANSAKSI',
    'payment_title' => 'Deposit Mudah & Aman',
];

/*
|--------------------------------------------------------------------------
| Menu kategori dengan ikon gambar
|--------------------------------------------------------------------------
|
| icon_url bisa menggunakan:
| - Lokal: assets/images/menu/populer.png
| - URL: https://domain.com/images/populer.png
*/

$menuCards = [
    [
        'title' => 'POPULER',
        'icon_url' => 'assets/images/menu/popular.png',
        'url' => 'popular.php',
    ],
    [
        'title' => 'SLOT',
        'icon_url' => 'assets/images/menu/slots.png',
        'url' => 'slot.php',
    ],
    [
        'title' => 'CASINO',
        'icon_url' => 'assets/images/menu/casino.png',
        'url' => 'live-casino.php',
    ],
    [
        'title' => 'SPORTS',
        'icon_url' => 'assets/images/menu/sports.png',
        'url' => 'sport.php',
    ],
    [
        'title' => 'ARCADE',
        'icon_url' => 'assets/images/menu/arcade.png',
        'url' => 'arcade.php',
    ],
    [
        'title' => 'SABUNG',
        'icon_url' => 'assets/images/menu/sabung.png',
        'url' => 'sambung-ayam.php',
    ],
];

/*
|--------------------------------------------------------------------------
| Provider populer
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Kategori beranda
|--------------------------------------------------------------------------
| Daftar game tidak ditulis manual.
| Game akan otomatis diambil dari games_sgx dan games_nexus.
*/

$popularProviders = [
    'popular' => [
        'title' => 'POPULER',
        'description' => 'Game paling banyak dimainkan',
        'image_url' => 'assets/images/menu/piala.png',
        'url' => 'popular.php',
        'theme' => 'gold',
        'speed' => 26,
        'limit' => 18,
        'games' => [],
    ],

    'slot' => [
        'title' => 'SLOTS',
        'description' => 'Ratusan game slot terbaik',
        'image_url' => 'assets/images/menu/mesinjackpot.png',
        'url' => 'slot.php',
        'theme' => 'purple',
        'speed' => 28,
        'limit' => 12,
        'games' => [],
    ],

    'casino' => [
        'title' => 'CASINO',
        'description' => 'Live casino & permainan kartu',
        'image_url' => 'assets/images/menu/casinoss.png',
        'url' => 'live-casino.php',
        'theme' => 'blue',
        'speed' => 26,
        'limit' => 12,
        'games' => [],
    ],

    'sports' => [
        'title' => 'SPORTS',
        'description' => 'Taruhan olahraga terbaik',
        'image_url' => 'assets/images/menu/sports (2).png',
        'url' => 'sport.php',
        'theme' => 'green',
        'speed' => 27,
        'limit' => 12,
        'games' => [],
    ],

    'arcade' => [
        'title' => 'ARCADE',
        'description' => 'Game seru & menghibur',
        'image_url' => 'assets/images/menu/arcades-removebg-preview.png',
        'url' => 'arcade.php',
        'theme' => 'orange',
        'speed' => 29,
        'limit' => 12,
        'games' => [],
    ],

    'sabung' => [
        'title' => 'SABUNG',
        'description' => 'Pertarungan ayam online',
        'image_url' => 'assets/images/menu/sabungs.png',
        'url' => 'sambung-ayam.php',
        'theme' => 'red',
        'speed' => 25,
        'limit' => 12,
        'games' => [],
    ],
];

/*
|--------------------------------------------------------------------------
| Mapping game_type SQL ke kategori beranda
|--------------------------------------------------------------------------
|
| Data yang ditemukan:
| SL = Slot
| LC = Live Casino
| SB = Sportsbook
| MN = Mini Game
| ES = E-Sports
| CB = Card
| FH = Fishing
| OT = Other / Sabung
*/

function homeGameCategoryFromType($gameType)
{
    $gameType = strtoupper(
        trim((string) $gameType)
    );

    $categoryMap = [
        'SL' => 'slot',
        'LC' => 'casino',
        'SB' => 'sports',

        'MN' => 'arcade',
        'ES' => 'arcade',
        'CB' => 'arcade',
        'FH' => 'arcade',

        'OT' => 'sabung',
    ];

    return isset($categoryMap[$gameType])
        ? $categoryMap[$gameType]
        : '';
}

/*
|--------------------------------------------------------------------------
| Buat URL game
|--------------------------------------------------------------------------
| Klik game diarahkan ke halaman kategori dengan parameter game.
*/

function buildHomePopularGameUrl(
    $baseUrl,
    $source,
    $providerCode,
    $gameCode,
    $gameType
) {
    return $baseUrl . '?' . http_build_query([
        'source' => $source,
        'provider_code' => $providerCode,
        'game_code' => $gameCode,
        'type' => $gameType,
    ]);
}

/*
|--------------------------------------------------------------------------
| Ambil semua game popular dari SQL
|--------------------------------------------------------------------------
*/

$homePopularGameRows = [];
$homePopularGameError = '';

$popularGameSql = "
    SELECT
        game_data.source,
        game_data.provider_code,
        game_data.game_code,
        game_data.game_name,
        game_data.game_type,
        game_data.game_image,
        game_data.popular_order
    FROM
    (
        SELECT
            'sgx' AS source,
            sgx.game_provider AS provider_code,
            sgx.game_code,
            sgx.game_name,
            UPPER(TRIM(sgx.game_type)) AS game_type,
            COALESCE(sgx.game_image, '') AS game_image,
            COALESCE(sgx.popular_order, 999) AS popular_order
        FROM games_sgx AS sgx
        WHERE sgx.game_status = 1
          AND sgx.is_active = 1
          AND sgx.is_popular = 1

        UNION ALL

        SELECT
            'nexus' AS source,
            nexus.provider_code,
            nexus.game_code,
            nexus.game_name,
            UPPER(TRIM(nexus.game_type)) AS game_type,
            COALESCE(nexus.game_image, '') AS game_image,
            COALESCE(nexus.popular_order, 999) AS popular_order
        FROM games_nexus AS nexus
        WHERE nexus.game_status = 1
          AND nexus.is_active = 1
          AND nexus.is_popular = 1
    ) AS game_data

    ORDER BY
        CASE
            WHEN game_data.popular_order > 0
            THEN 0
            ELSE 1
        END ASC,
        game_data.popular_order ASC,
        game_data.game_name ASC

    LIMIT 300
";

try {
    /*
    |--------------------------------------------------------------------------
    | PDO
    |--------------------------------------------------------------------------
    */

    if (isset($pdo) && $pdo instanceof PDO) {
        $pdo->setAttribute(
            PDO::ATTR_ERRMODE,
            PDO::ERRMODE_EXCEPTION
        );

        $popularGameStatement = $pdo->query(
            $popularGameSql
        );

        if ($popularGameStatement) {
            $homePopularGameRows =
                $popularGameStatement->fetchAll(
                    PDO::FETCH_ASSOC
                );
        }

    /*
    |--------------------------------------------------------------------------
    | MySQLi
    |--------------------------------------------------------------------------
    */

    } elseif (
        isset($conn) &&
        $conn instanceof mysqli
    ) {
        $popularGameResult = $conn->query(
            $popularGameSql
        );

        if (!$popularGameResult) {
            throw new RuntimeException(
                'Query popular gagal: ' .
                $conn->error
            );
        }

        while (
            $popularGameRow =
                $popularGameResult->fetch_assoc()
        ) {
            $homePopularGameRows[] =
                $popularGameRow;
        }

        $popularGameResult->free();
    } else {
        throw new RuntimeException(
            'Koneksi database tidak tersedia. ' .
            'Periksa config/database.php.'
        );
    }
} catch (Throwable $exception) {
    $homePopularGameRows = [];

    $homePopularGameError =
        $exception->getMessage();

    error_log(
        'HOME POPULAR ERROR: ' .
        $homePopularGameError
    );
}

/*
|--------------------------------------------------------------------------
| Susun game berdasarkan kategori
|--------------------------------------------------------------------------
*/

$homeGameSeen = [
    'popular' => [],
    'slot' => [],
    'casino' => [],
    'sports' => [],
    'arcade' => [],
    'sabung' => [],
];

foreach ($homePopularGameRows as $gameRow) {
    $source = isset($gameRow['source'])
        ? trim((string) $gameRow['source'])
        : '';

    $providerCode = isset($gameRow['provider_code'])
        ? trim((string) $gameRow['provider_code'])
        : '';

    $gameCode = isset($gameRow['game_code'])
        ? trim((string) $gameRow['game_code'])
        : '';

    $gameName = isset($gameRow['game_name'])
        ? trim((string) $gameRow['game_name'])
        : 'Game';

    $gameType = isset($gameRow['game_type'])
        ? strtoupper(trim((string) $gameRow['game_type']))
        : '';

    $gameImage = isset($gameRow['game_image'])
        ? trim((string) $gameRow['game_image'])
        : '';

    if ($gameImage === '') {
        $gameImage =
            'assets/images/game-default.png';
    }

    if (
        $source === '' ||
        $providerCode === '' ||
        $gameCode === ''
    ) {
        continue;
    }

    $categoryKey = homeGameCategoryFromType(
        $gameType
    );

    $gameUniqueKey =
        $source . '|' .
        $providerCode . '|' .
        $gameCode;

    /*
    |--------------------------------------------------------------------------
    | Tentukan halaman tujuan game
    |--------------------------------------------------------------------------
    */

    $targetCategory = $categoryKey !== ''
        ? $categoryKey
        : 'popular';

    $targetBaseUrl =
        $popularProviders[$targetCategory]['url'];

    $gameData = [
        'source' => $source,
        'provider_code' => $providerCode,
        'game_code' => $gameCode,
        'game_type' => $gameType,
        'title' => $gameName,
        'image_url' => $gameImage,

        'url' => buildHomePopularGameUrl(
            $targetBaseUrl,
            $source,
            $providerCode,
            $gameCode,
            $gameType
        ),
    ];

    /*
    |--------------------------------------------------------------------------
    | Semua jenis game masuk ke POPULER
    |--------------------------------------------------------------------------
    */

    if (
        !isset(
            $homeGameSeen['popular'][$gameUniqueKey]
        ) &&
        count(
            $popularProviders['popular']['games']
        ) < $popularProviders['popular']['limit']
    ) {
        $popularProviders['popular']['games'][] =
            $gameData;

        $homeGameSeen['popular'][$gameUniqueKey] =
            true;
    }

    /*
    |--------------------------------------------------------------------------
    | Masukkan ke kategori masing-masing
    |--------------------------------------------------------------------------
    */

    if (
        $categoryKey !== '' &&
        isset($popularProviders[$categoryKey]) &&
        !isset(
            $homeGameSeen[$categoryKey][$gameUniqueKey]
        ) &&
        count(
            $popularProviders[$categoryKey]['games']
        ) < $popularProviders[$categoryKey]['limit']
    ) {
        $popularProviders[$categoryKey]['games'][] =
            $gameData;

        $homeGameSeen[$categoryKey][$gameUniqueKey] =
            true;
    }
}
/*
|--------------------------------------------------------------------------
| Metode pembayaran
|--------------------------------------------------------------------------
| Simpan icon di:
| public_html/assets/images/bank/
*/

$paymentMethods = [
    [
        'name' => 'QRIS',
        'icon' => 'assets/images/bank/QRIS.jpg',
        'type' => 'qris',
    ],
    [
        'name' => 'BCA',
        'icon' => 'assets/images/bank/BCA.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'BRI',
        'icon' => 'assets/images/bank/BRI.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'BNI',
        'icon' => 'assets/images/bank/BNI.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'SEABANK',
        'icon' => 'assets/images/bank/SEABANK.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'MANDIRI',
        'icon' => 'assets/images/bank/MANDIRIVA.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'CIMB',
        'icon' => 'assets/images/bank/cimb.png',
        'type' => 'bank',
    ],
    [
        'name' => 'SINARMAS',
        'icon' => 'assets/images/bank/sinarmas.png',
        'type' => 'bank',
    ],
    [
        'name' => 'BTN',
        'icon' => 'assets/images/bank/btn.png',
        'type' => 'bank',
    ],
    [
        'name' => 'DANAMON',
        'icon' => 'assets/images/bank/danamon.png',
        'type' => 'bank',
    ],
    [
        'name' => 'OCBC',
        'icon' => 'assets/images/bank/ocbc.png',
        'type' => 'bank',
    ],
    [
        'name' => 'KROM BANK',
        'icon' => 'assets/images/bank/krom-bank.png',
        'type' => 'bank',
    ],
    [
        'name' => 'BANK JAGO',
        'icon' => 'assets/images/bank/JAGO.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'MAYBANK',
        'icon' => 'assets/images/bank/maybank.png',
        'type' => 'bank',
    ],
    [
        'name' => 'PERMATA',
        'icon' => 'assets/images/bank/PERMATAVA.jpg',
        'type' => 'bank',
    ],
    [
        'name' => 'JENIUS',
        'icon' => 'assets/images/bank/jenius.png',
        'type' => 'bank',
    ],
    [
        'name' => 'MEGA',
        'icon' => 'assets/images/bank/mega.png',
        'type' => 'bank',
    ],
    [
        'name' => 'BJB',
        'icon' => 'assets/images/bank/bjb.png',
        'type' => 'bank',
    ],
    [
        'name' => 'NOBU BANK',
        'icon' => 'assets/images/bank/nobu-bank.png',
        'type' => 'bank',
    ],
    [
        'name' => 'ALLOBANK',
        'icon' => 'assets/images/bank/allobank.png',
        'type' => 'bank',
    ],
    [
        'name' => 'DANA',
        'icon' => 'assets/images/bank/DANA.jpg',
        'type' => 'ewallet',
    ],
    [
        'name' => 'GOPAY',
        'icon' => 'assets/images/bank/GOPAY.jpg',
        'type' => 'ewallet',
    ],
    [
        'name' => 'OVO',
        'icon' => 'assets/images/bank/OVO.jpg',
        'type' => 'ewallet',
    ],
    [
        'name' => 'SHOPEEPAY',
        'icon' => 'assets/images/bank/SHOPEEPAY.jpg',
        'type' => 'ewallet',
    ],
    [
        'name' => 'SAKUKU',
        'icon' => 'assets/images/bank/sakuku.png',
        'type' => 'ewallet',
    ],
    [
        'name' => 'LINKAJA',
        'icon' => 'assets/images/bank/LINKAJA.jpg',
        'type' => 'ewallet',
    ],
    [
        'name' => 'DOKU',
        'icon' => 'assets/images/bank/doku.png',
        'type' => 'ewallet',
    ],
];

/*
|--------------------------------------------------------------------------
| Header dan navbar
|--------------------------------------------------------------------------
*/

require __DIR__ . '/includes/header.php';

/*
 * Navbar terpisah tidak digunakan karena menu
 * sudah tersedia di header/sidebar.
 */
// require __DIR__ . '/includes/navbar.php';

?>

<style>
/*
|--------------------------------------------------------------------------
| CSS khusus halaman beranda
|--------------------------------------------------------------------------
*/

.home-onepage {
    position: relative;

    width: 100%;

    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.home-showcase {
    position: relative;

    min-height: 285px;

    padding-top: 0 !important;

    overflow: hidden;

    border-bottom:
        1px solid rgba(255, 194, 38, 0.42);

    background:
        radial-gradient(
            ellipse at 50% 10%,
            rgba(0, 114, 255, 0.33),
            transparent 48%
        ),
        radial-gradient(
            circle at -5% 72%,
            rgba(0, 138, 255, 0.32),
            transparent 32%
        ),
        radial-gradient(
            circle at 105% 72%,
            rgba(0, 138, 255, 0.32),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #03112e 0%,
            #061c48 52%,
            #01091c 100%
        );

    box-shadow:
        inset 0 -25px 40px rgba(0, 0, 0, 0.34),
        0 8px 24px rgba(0, 0, 0, 0.38);
}

.home-showcase::before,
.home-showcase::after {
    position: absolute;
    z-index: 1;

    top: 67px;

    width: 220px;
    height: 150px;

    content: "";

    opacity: 0.80;

    pointer-events: none;

    background:
        linear-gradient(
            105deg,
            transparent 20%,
            rgba(0, 111, 255, 0.12) 33%,
            rgba(40, 183, 255, 0.90) 49%,
            rgba(218, 250, 255, 0.95) 51%,
            rgba(0, 95, 255, 0.24) 55%,
            transparent 69%
        );

    filter:
        drop-shadow(0 0 9px #007cff);
}

.home-showcase::before {
    left: -115px;

    transform: rotate(-13deg);
}

.home-showcase::after {
    right: -115px;

    transform:
        rotate(13deg)
        scaleX(-1);
}

/*
|--------------------------------------------------------------------------
| Judul hero
|--------------------------------------------------------------------------
*/

.home-showcase-copy {
    position: relative;
    z-index: 5;

    display: grid;

    justify-items: center;

    text-align: center;
}

.home-showcase-welcome {
    margin: 0;

    color: #ffffff;

    font-size: clamp(18px, 5vw, 27px);
    font-weight: 1000;
    font-style: italic;

    letter-spacing: -0.03em;

    line-height: 1;

    text-shadow:
        0 2px 0 #8c9baa,
        0 4px 0 #384658,
        0 6px 8px rgba(0, 0, 0, 0.86);
}

.home-showcase h1 {
    display: grid;

    margin: 5px 0 0;

    line-height: 0.90;
}

.home-showcase h1 > span {
    background:
        linear-gradient(
            180deg,
            #fff7a1 0%,
            #ffd84b 23%,
            #f0a500 52%,
            #ffcc34 72%,
            #8c4b00 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: #ffd13e;

    font-size: clamp(27px, 7.8vw, 43px);
    font-weight: 1000;
    font-style: italic;

    letter-spacing: -0.04em;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 2px 0 #704000)
        drop-shadow(0 4px 0 #351d00)
        drop-shadow(0 6px 6px rgba(0, 0, 0, 0.72));
}

.home-showcase h1 > small {
    margin-top: 9px;

    color: #ffffff;

    font-size: clamp(22px, 6vw, 34px);
    font-weight: 1000;
    font-style: italic;

    letter-spacing: -0.035em;

    text-shadow:
        0 2px 0 #8b98a8,
        0 4px 0 #344154,
        0 6px 7px rgba(0, 0, 0, 0.82);
}

/*
|--------------------------------------------------------------------------
| Aman Cepat Terpercaya
|--------------------------------------------------------------------------
*/

.home-trust {
    display: flex;

    width: 100%;

    align-items: center;
    justify-content: center;

    margin-top: 13px;
}

.home-trust-line {
    position: relative;

    display: block;

    width: 42px;
    height: 13px;

    flex: 0 1 42px;
}

.home-trust-line::before {
    position: absolute;

    top: 50%;

    width: 38px;
    height: 2px;

    content: "";

    transform: translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #a85f00,
            #ffd652
        );

    box-shadow:
        0 0 5px rgba(255, 192, 29, 0.52);
}

.home-trust-line::after {
    position: absolute;

    top: 50%;

    width: 7px;
    height: 7px;

    content: "";

    transform:
        translateY(-50%)
        rotate(45deg);

    border:
        1px solid #ffdc68;

    background:
        linear-gradient(
            145deg,
            #fff4a5,
            #b96b00
        );
}

.home-trust-line--left::before,
.home-trust-line--left::after {
    right: 0;
}

.home-trust-line--right::before,
.home-trust-line--right::after {
    left: 0;
}

.home-trust-line--right::before {
    transform:
        translateY(-50%)
        scaleX(-1);
}

.home-trust-panel {
    position: relative;

    display: flex;

    min-width: 224px;
    min-height: 26px;

    align-items: center;
    justify-content: center;

    padding: 0 13px;

    gap: 7px;

    overflow: hidden;

    border:
        1px solid #4cc8ff;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #174f96 0%,
            #0a326e 48%,
            #051d48 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 4px rgba(0, 0, 0, 0.38),
        0 0 5px #009cff,
        0 0 13px rgba(0, 127, 255, 0.57),
        0 4px 8px rgba(0, 0, 0, 0.48);
}

.home-trust-panel strong {
    position: relative;
    z-index: 3;

    color: #ffffff;

    font-size: 8px;
    font-weight: 1000;

    letter-spacing: 0.04em;

    white-space: nowrap;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.90);
}

.home-trust-panel > i {
    position: relative;
    z-index: 3;

    display: block;

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff9b1,
            #ffca2e 45%,
            #9d5600
        );

    box-shadow:
        0 0 5px rgba(255, 190, 26, 0.90);
}

/*
|--------------------------------------------------------------------------
| Efek listrik
|--------------------------------------------------------------------------
*/

.home-electric {
    position: absolute;
    z-index: 5;

    top: -7px;
    left: -55px;

    width: 34px;
    height: calc(100% + 14px);

    opacity: 0;

    pointer-events: none;

    animation:
        home-electric-pass 3.2s ease-in-out infinite;
}

.home-electric::before {
    position: absolute;

    inset: 0;

    content: "";

    background:
        linear-gradient(
            180deg,
            transparent,
            #c8f8ff 12%,
            #ffffff 38%,
            #00c8ff 62%,
            #a5f5ff 82%,
            transparent
        );

    clip-path:
        polygon(
            48% 0%,
            72% 16%,
            51% 17%,
            76% 37%,
            48% 39%,
            73% 58%,
            46% 60%,
            69% 80%,
            45% 81%,
            58% 100%,
            28% 79%,
            48% 77%,
            25% 57%,
            49% 56%,
            26% 36%,
            48% 35%,
            30% 16%,
            51% 15%
        );

    filter:
        drop-shadow(0 0 2px #ffffff)
        drop-shadow(0 0 5px #00d7ff)
        drop-shadow(0 0 10px #0077ff);
}

@keyframes home-electric-pass {
    0%,
    12% {
        left: -55px;

        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    48% {
        opacity: 1;
    }

    58% {
        left: calc(100% + 25px);

        opacity: 0;
    }

    100% {
        left: calc(100% + 25px);

        opacity: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Menu kategori
|--------------------------------------------------------------------------
*/

.home-category-grid {
    position: relative;
    z-index: 8;

    display: grid;

    margin-top: 14px;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 6px;
}

.home-category-card {
    position: relative;

    display: grid;

    min-width: 0;
    min-height: 71px;

    align-content: center;
    justify-items: center;

    padding: 6px 2px 5px;

    overflow: hidden;

    border:
        1px solid rgba(31, 158, 255, 0.97);

    border-radius: 9px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(0, 142, 255, 0.25),
            transparent 45px
        ),
        linear-gradient(
            180deg,
            #09285c 0%,
            #041b42 57%,
            #020c22 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.40),
        0 0 5px rgba(0, 145, 255, 0.80),
        0 4px 0 rgba(0, 5, 18, 0.80),
        0 7px 10px rgba(0, 0, 0, 0.34);

    text-decoration: none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        filter 160ms ease;
}

.home-category-card::before {
    position: absolute;

    top: 0;
    right: 8px;
    left: 8px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(178, 234, 255, 0.85),
            transparent
        );
}

/*
|--------------------------------------------------------------------------
| Ikon gambar kategori
|--------------------------------------------------------------------------
*/

.home-category-icon {
    display: flex;

    width: 39px;
    height: 39px;

    align-items: center;
    justify-content: center;

    margin-bottom: 2px;

    overflow: visible;
}

.home-category-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(0 2px 0 rgba(120, 65, 0, 0.80))
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.68))
        drop-shadow(0 0 7px rgba(255, 183, 16, 0.30));
}

.home-category-icon-fallback {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius: 10px;

    color: #542700;

    background:
        linear-gradient(
            180deg,
            #fff18a,
            #ffc126 65%,
            #bc6800
        );

    font-size: 18px;
    font-weight: 1000;
}

@media (max-width: 390px) {
    .home-category-icon {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 340px) {
    .home-category-icon {
        width: 30px;
        height: 30px;
    }
}
.home-category-card strong {
    display: block;

    width: 100%;

    overflow: hidden;

    color: #ffffff;

    font-size: 8px;
    font-weight: 1000;

    letter-spacing: 0.02em;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.92);
}

.home-category-card:hover {
    border-color: #ffd756;

    filter: brightness(1.12);

    transform: translateY(-2px);
}

.home-category-card:active {
    transform: translateY(2px);
}

/*
|--------------------------------------------------------------------------
| Bagian konten
|--------------------------------------------------------------------------
*/

.home-content-section {
    padding: 15px 13px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        linear-gradient(
            180deg,
            #03122e,
            #020b1d
        );
}

.home-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 12px;
}

.home-section-heading small {
    display: block;

    color: #7f99b9;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.home-section-heading h2 {
    margin: 2px 0 0;

    color: #ffffff;

    font-size: 17px;
}

.home-section-heading a {
    color: #ffc83d;

    font-size: 10px;
    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| Jackpot
|--------------------------------------------------------------------------
*/

.home-jackpot {
    position: relative;

    margin: 15px 13px;
    padding: 17px 12px;

    overflow: hidden;

    border:
        1px solid rgba(255, 205, 67, 0.55);

    border-radius: 16px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255, 190, 22, 0.18),
            transparent 130px
        ),
        linear-gradient(
            145deg,
            #092654,
            #03142f
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 8px 18px rgba(0, 0, 0, 0.34);
}

.home-jackpot small {
    display: block;

    color: #9fb3cc;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.16em;
}

.home-jackpot strong {
    display: block;

    margin-top: 5px;

    color: #ffd34c;

    font-size: clamp(20px, 6vw, 29px);
    font-weight: 1000;

    text-shadow:
        0 2px 0 #845000,
        0 0 12px rgba(255, 195, 31, 0.25);
}



/*
|--------------------------------------------------------------------------
| Pembayaran
|--------------------------------------------------------------------------
*/

.home-payment-grid {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;

    gap: 7px;
}

.home-payment-chip {
    display: inline-flex;

    min-height: 31px;

    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border:
        1px solid rgba(255, 203, 61, 0.30);

    border-radius: 999px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0a2b59,
            #03142e
        );

    font-size: 9px;
    font-weight: 900;
}

.home-security-note {
    display: flex;

    margin-top: 14px;
    padding: 12px;

    align-items: center;

    gap: 10px;

    border:
        1px solid rgba(49, 226, 149, 0.25);

    border-radius: 12px;

    background:
        rgba(23, 142, 91, 0.09);
}

.home-security-note > span {
    display: grid;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    place-items: center;

    border-radius: 10px;

    color: #052219;
    background: #42e897;

    font-weight: 1000;
}

.home-security-note div {
    display: grid;

    gap: 2px;
}

.home-security-note strong {
    color: #ffffff;

    font-size: 11px;
}

.home-security-note small {
    color: #9fb4cd;

    font-size: 8px;
    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .home-showcase {
       

        padding-right: 7px;
        padding-left: 7px;
    }

    .home-category-grid {
        gap: 4px;
    }

    .home-category-card {
        min-height: 66px;
    }

    .home-category-icon {
        width: 31px;
        height: 31px;

        font-size: 20px;
    }

    .home-category-card strong {
        font-size: 6.8px;
    }

    .home-trust-panel {
        min-width: 203px;

        padding-right: 8px;
        padding-left: 8px;

        gap: 5px;
    }

    .home-trust-line {
        width: 27px;

        flex-basis: 27px;
    }

    .home-trust-line::before {
        width: 24px;
    }
}

@media (max-width: 340px) {
    .home-category-grid {
        gap: 3px;
    }

    .home-category-card {
        min-height: 62px;
    }

    .home-category-icon {
        font-size: 18px;
    }

    .home-category-card strong {
        font-size: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-electric {
        display: none;

        animation: none;
    }
}

/*
|--------------------------------------------------------------------------
| Hilangkan seluruh jarak antara header dan hero
|--------------------------------------------------------------------------
*/

.site-main {
    margin: 0 !important;
    padding: 0 !important;
}

.home-onepage {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}

.home-showcase {
    width: 100%;

    margin: 0 !important;
    padding-top: 0 !important;

    border-top: 0 !important;
}

/*
 * Hilangkan margin bawaan elemen pertama dalam hero
 */

.home-showcase-welcome {
    margin-top: 0 !important;
}
.home-showcase-copy {
    padding-top: 5px;
}

</style>

<div class="home-onepage">

    <!-- HERO -->
    <section
        class="home-showcase"
        aria-label="Selamat datang"
    >
        <div class="home-showcase-copy">

            <p class="home-showcase-welcome">
                <?= e($homeSettings['welcome_text']); ?>
            </p>

            <h1>
                <span>
                    <?= e($homeSettings['headline']); ?>
                </span>

                <small>
                    <?= e($homeSettings['headline_bottom']); ?>
                </small>
            </h1>

            <div class="home-trust">

                <span
                    class="home-trust-line home-trust-line--left"
                    aria-hidden="true"
                ></span>

                <div class="home-trust-panel">

                    <span
                        class="home-electric"
                        aria-hidden="true"
                    ></span>

                    <strong>
                        <?= e($homeSettings['trust_first']); ?>
                    </strong>

                    <i></i>

                    <strong>
                        <?= e($homeSettings['trust_second']); ?>
                    </strong>

                    <i></i>

                    <strong>
                        <?= e($homeSettings['trust_third']); ?>
                    </strong>

                </div>

                <span
                    class="home-trust-line home-trust-line--right"
                    aria-hidden="true"
                ></span>

            </div>

        </div>

        <!-- KATEGORI -->
        <div
            class="home-category-grid"
            aria-label="Kategori permainan"
        >
            <?php foreach ($menuCards as $card): ?>

                <a
                    class="home-category-card"
                    href="<?= e($card['url']); ?>"
                    aria-label="Buka <?= e($card['title']); ?>"
                >
                   <span class="home-category-icon">

    <?php if (!empty($card['icon_url'])): ?>

        <img
            src="<?= e($card['icon_url']); ?>"
            alt="<?= e($card['title']); ?>"
            loading="lazy"
            decoding="async"
        >

    <?php else: ?>

        <span class="home-category-icon-fallback">
            <?= e(substr($card['title'], 0, 1)); ?>
        </span>

    <?php endif; ?>

</span>

                    <strong>
                        <?= e($card['title']); ?>
                    </strong>
                </a>

            <?php endforeach; ?>
        </div>

    </section>

   <?php

$jackpotTarget = preg_replace(
    '/[^0-9.]/',
    '',
    (string) $homeSettings['jackpot_amount']
);

if (
    $jackpotTarget === '' ||
    !is_numeric($jackpotTarget)
) {
    $jackpotTarget = '0.00';
}

$jackpotFormatted = number_format(
    (float) $jackpotTarget,
    2,
    '.',
    ','
);

?>

<!-- JACKPOT -->
<section
    class="jackpot-dragon"
    aria-label="Total jackpot"
>
    <div class="jackpot-dragon-copy">

        <small class="jackpot-dragon-title">
            <?= e($homeSettings['jackpot_title']); ?>
        </small>

        <div
            class="jackpot-dragon-value"
            id="jackpotDragonValue"
        >
            <span class="jackpot-dragon-currency">
                IDR
            </span>

            <strong
                id="jackpotDragonNumber"
                data-target="<?= e($jackpotTarget); ?>"
            >
                <?= e($jackpotFormatted); ?>
            </strong>
        </div>

    </div>
</section>
<style>
    /*
|--------------------------------------------------------------------------
| Jackpot naga Mahjong
|--------------------------------------------------------------------------
*/

.jackpot-dragon {
    position: relative;

    width: calc(100% - 12px);
    max-width: 548px;

    aspect-ratio: 866 / 274;

    margin: 10px auto 14px;

    overflow: hidden;

    background-image:
        url('/assets/images/jackpot/logojackpots.png');

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*
|--------------------------------------------------------------------------
| Area tulisan tengah
|--------------------------------------------------------------------------
*/

.jackpot-dragon-copy {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;

    display: grid;

    width: 59%;
    max-width: 330px;

    justify-items: center;

    transform:
        translate(-50%, -47%);

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Judul TOTAL JACKPOT
|--------------------------------------------------------------------------
*/

.jackpot-dragon-title {
    display: block;

    width: 100%;

    margin: 0 0 4px;

    color: #ffe66c;

    font-size: clamp(10px, 3.2vw, 18px);
    font-weight: 1000;

    letter-spacing: 0.035em;
    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;

    text-shadow:
        0 1px 0 #fff4a6,
        0 2px 0 #a84000,
        0 3px 4px rgba(42, 0, 0, 0.90),
        0 0 8px rgba(255, 194, 37, 0.45);
}

/*
|--------------------------------------------------------------------------
| Nominal jackpot
|--------------------------------------------------------------------------
*/

.jackpot-dragon-value {
    display: flex;

    width: 100%;
    min-width: 0;

    align-items: baseline;
    justify-content: center;

    gap: 5px;

    overflow: hidden;

    color: #fff7c2;

    font-size: clamp(14px, 4.35vw, 24px);
    font-weight: 1000;

    letter-spacing: -0.035em;
    line-height: 1;

    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}

.jackpot-dragon-currency {
    flex: 0 0 auto;

    color: #ffd755;

    font-size: 0.70em;
    font-weight: 1000;

    letter-spacing: 0;

    text-shadow:
        0 1px 0 #fff1a0,
        0 2px 0 #8f2800,
        0 3px 4px rgba(35, 0, 0, 0.88);
}

.jackpot-dragon-value strong {
    display: block;

    min-width: 0;

    margin: 0;

    color: #fff7c2;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff9cf 34%,
            #ffd85e 62%,
            #e5a515 82%,
            #fff1a0 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    font: inherit;

    letter-spacing: inherit;
    line-height: inherit;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 2px 0 #9c2c00)
        drop-shadow(0 4px 3px rgba(36, 0, 0, 0.80))
        drop-shadow(0 0 5px rgba(255, 190, 31, 0.34));
}

/*
|--------------------------------------------------------------------------
| Kilau nominal
|--------------------------------------------------------------------------
*/

.jackpot-dragon-value::after {
    position: absolute;

    right: 18%;
    bottom: -5px;
    left: 18%;

    height: 5px;

    content: "";

    border-radius: 50%;

    background:
        rgba(255, 196, 40, 0.32);

    filter: blur(5px);

    pointer-events: none;
}

.jackpot-dragon-number-live {
    animation:
        jackpot-dragon-glow
        2.4s
        ease-in-out
        infinite;
}

@keyframes jackpot-dragon-glow {
    0%,
    100% {
        filter:
            drop-shadow(0 1px 0 #ffffff)
            drop-shadow(0 2px 0 #9c2c00)
            drop-shadow(0 4px 3px rgba(36, 0, 0, 0.80))
            drop-shadow(0 0 4px rgba(255, 190, 31, 0.28));
    }

    50% {
        filter:
            drop-shadow(0 1px 0 #ffffff)
            drop-shadow(0 2px 0 #9c2c00)
            drop-shadow(0 4px 3px rgba(36, 0, 0, 0.80))
            drop-shadow(0 0 10px rgba(255, 217, 76, 0.68));
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .jackpot-dragon {
        width: calc(100% - 6px);

        margin-top: 8px;
        margin-bottom: 11px;
    }

    .jackpot-dragon-copy {
        width: 58%;

        transform:
            translate(-50%, -45%);
    }

    .jackpot-dragon-title {
        margin-bottom: 3px;

        font-size: clamp(9px, 3.1vw, 12px);
    }

    .jackpot-dragon-value {
        gap: 3px;

        font-size: clamp(13px, 4.3vw, 17px);
    }
}

@media (max-width: 340px) {
    .jackpot-dragon-copy {
        width: 57%;
    }

    .jackpot-dragon-title {
        font-size: 9px;
    }

    .jackpot-dragon-value {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jackpot-dragon-number-live {
        animation: none;
    }
}
</style>


<?php if ($homePopularGameError !== ''): ?>

    <div
        style="
            margin:8px 11px;
            padding:9px 10px;
            border:1px solid #ff4b4b;
            border-radius:8px;
            color:#ffffff;
            background:#5b0808;
            font-size:11px;
            line-height:1.45;
            word-break:break-word;
        "
    >
        <strong>Popular game gagal dimuat:</strong><br>
        <?= e($homePopularGameError); ?>
    </div>

<?php endif; ?>

<!-- KATEGORI DAN GAME POPULAR DARI SQL -->
<section class="home-game-list-section">

    <div
        class="home-game-list"
        aria-label="Daftar permainan"
    >

        <?php foreach ($popularProviders as $categoryKey => $provider): ?>

            <?php
            $providerTitle =
                (string) $provider['title'];

            $providerDescription =
                (string) $provider['description'];

            $providerImage =
                (string) $provider['image_url'];

            $providerUrl =
                (string) $provider['url'];

            $providerTheme = preg_replace(
                '/[^a-zA-Z0-9_-]/',
                '',
                (string) $provider['theme']
            );

            $providerSpeed =
                (int) $provider['speed'];

            $providerGames =
                isset($provider['games']) &&
                is_array($provider['games'])
                    ? $provider['games']
                    : [];
            ?>

            <div
                class="home-game-block home-game-row--<?= e($providerTheme); ?>"
            >
                <!-- Kepala kategori -->
                <a
                    class="home-game-row"
                    href="<?= e($providerUrl); ?>"
                    aria-label="Buka <?= e($providerTitle); ?>"
                >
                    <span
                        class="home-game-row-glow"
                        aria-hidden="true"
                    ></span>

                    <span class="home-game-row-image">

                        <img
                            src="<?= e($providerImage); ?>"
                            alt="<?= e($providerTitle); ?>"
                            loading="lazy"
                            decoding="async"
                        >

                    </span>

                    <span class="home-game-row-copy">

                        <strong>
                            <?= e($providerTitle); ?>
                        </strong>

                        <small>
                            <?= e($providerDescription); ?>
                        </small>

                    </span>

                    <span
                        class="home-game-row-arrow"
                        aria-hidden="true"
                    >
                        ›
                    </span>
                </a>

                <?php if (!empty($providerGames)): ?>

    <?php
    /*
    |--------------------------------------------------------------------------
    | Cegah game terlihat ganda
    |--------------------------------------------------------------------------
    |
    | Game hanya diduplikasi ketika jumlahnya cukup banyak
    | untuk menjalankan marquee tanpa putus.
    */

    $providerGameCount = count($providerGames);

    $enableGameMarquee =
        $providerGameCount >= 6;

    $gameCopyTotal =
        $enableGameMarquee ? 2 : 1;

    $marqueeStateClass =
        $enableGameMarquee
            ? 'is-running'
            : 'is-static';
    ?>

    <!-- Gambar game berjalan -->
    <div
        class="home-popular-marquee <?= e($marqueeStateClass); ?>"
        aria-label="Game popular <?= e($providerTitle); ?>"
    >
        <div
            class="home-popular-track"
            <?php if ($enableGameMarquee): ?>
                style="animation-duration: <?= $providerSpeed; ?>s;"
            <?php endif; ?>
        >

            <?php for ($copy = 0; $copy < $gameCopyTotal; $copy++): ?>

                                <div
                                    class="home-popular-group"
                                    <?= $copy === 1
                                        ? 'aria-hidden="true"'
                                        : ''; ?>
                                >

                                    <?php foreach ($providerGames as $game): ?>

                                        <a
                                            class="home-popular-game"
                                            href="<?= e($game['url']); ?>"
                                            title="<?= e($game['title']); ?>"
                                        >
                                            <span class="home-popular-image">

                                                <img
                                                    src="<?= e($game['image_url']); ?>"
                                                    alt="<?= e($game['title']); ?>"
                                                    loading="lazy"
                                                    decoding="async"
                                                    onerror="
                                                        this.onerror = null;
                                                        this.src =
                                                            'assets/images/game-default.png';
                                                    "
                                                >

                                               

                                            </span>

                                            <strong>
                                                <?= e($game['title']); ?>
                                            </strong>

                                        </a>

                                    <?php endforeach; ?>

                                </div>

                            <?php endfor; ?>

                        </div>
                    </div>

                <?php else: ?>

                    <div class="home-popular-empty">
                        Belum ada game popular pada kategori ini.
                    </div>

                <?php endif; ?>

            </div>

        <?php endforeach; ?>

    </div>

</section>

<style>
    /*
|--------------------------------------------------------------------------
| Daftar game horizontal neon
|--------------------------------------------------------------------------
*/

.home-game-list-section {
    width: 100%;

    padding: 9px 11px 13px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(0, 116, 255, 0.12),
            transparent 230px
        ),
        linear-gradient(
            180deg,
            #020b1c,
            #010714
        );
}

.home-game-list {
    display: grid;

    width: 100%;

    gap: 5px;
}

/*
|--------------------------------------------------------------------------
| Bentuk dasar list
|--------------------------------------------------------------------------
*/

.home-game-row {
    position: relative;

    display: grid;

    width: 100%;
    min-height: 48px;

    grid-template-columns:
        79px
        minmax(0, 1fr)
        30px;

    align-items: center;

    padding: 2px 5px 2px 3px;

    overflow: hidden;

    border: 1px solid var(--game-color);
    border-radius: 11px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 50%,
            var(--game-glow),
            transparent 90px
        ),
        linear-gradient(
            90deg,
            var(--game-bg-start),
            var(--game-bg-end)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.48),
        0 0 5px var(--game-shadow),
        0 3px 0 rgba(0, 0, 0, 0.75),
        0 6px 10px rgba(0, 0, 0, 0.27);

    text-decoration: none;

    transition:
        transform 150ms ease,
        filter 150ms ease,
        border-color 150ms ease;
}

.home-game-row::before {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 14px;
    left: 14px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.74),
            transparent
        );

    opacity: 0.65;

    pointer-events: none;
}

.home-game-row::after {
    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;
    left: 0;

    height: 42%;

    content: "";

    border-radius: 10px 10px 50% 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.10),
            transparent
        );

    pointer-events: none;
}

.home-game-row:hover {
    filter: brightness(1.15);

    transform: translateY(-1px);
}

.home-game-row:active {
    transform: translateY(2px);

    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(0, 0, 0, 0.75);
}

/*
|--------------------------------------------------------------------------
| Cahaya belakang gambar
|--------------------------------------------------------------------------
*/

.home-game-row-glow {
    position: absolute;
    z-index: 0;

    top: 50%;
    left: 15px;

    width: 75px;
    height: 55px;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            var(--game-glow),
            transparent 68%
        );

    filter: blur(5px);

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Gambar kiri
|--------------------------------------------------------------------------
*/

.home-game-row-image {
    position: relative;
    z-index: 3;

    display: flex;

    width: 76px;
    height: 43px;

    align-items: center;
    justify-content: center;

    overflow: visible;
}

.home-game-row-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.48))
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 6px var(--game-shadow));
}

.home-game-row-fallback {
    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 11px;

    color: #241100;

    background:
        linear-gradient(
            180deg,
            #fff4a2,
            #ffc126 65%,
            #a95a00
        );

    font-size: 18px;
    font-weight: 1000;
}

/*
|--------------------------------------------------------------------------
| Judul dan deskripsi
|--------------------------------------------------------------------------
*/

.home-game-row-copy {
    position: relative;
    z-index: 3;

    display: grid;

    min-width: 0;

    align-content: center;

    padding-left: 5px;

    gap: 1px;
}

.home-game-row-copy strong {
    overflow: hidden;

    color: var(--game-title);

    font-size: 15px;
    font-weight: 1000;

    letter-spacing: -0.025em;
    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30),
        0 2px 2px rgba(0, 0, 0, 0.90),
        0 0 7px var(--game-shadow);
}

.home-game-row-copy small {
    overflow: hidden;

    color: rgba(255, 255, 255, 0.92);

    font-size: 8px;
    font-weight: 650;

    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.90);
}

/*
|--------------------------------------------------------------------------
| Panah kanan
|--------------------------------------------------------------------------
*/

.home-game-row-arrow {
    position: relative;
    z-index: 3;

    display: grid;

    width: 27px;
    height: 37px;

    place-items: center;

    color: #ffffff;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    text-shadow:
        0 0 5px var(--game-shadow),
        0 2px 3px rgba(0, 0, 0, 0.85);
}

/*
|--------------------------------------------------------------------------
| Tema warna
|--------------------------------------------------------------------------
*/

.home-game-row--gold {
    --game-color: #ffbf19;
    --game-title: #ffd84f;
    --game-glow: rgba(255, 175, 0, 0.34);
    --game-shadow: rgba(255, 175, 0, 0.80);
    --game-bg-start: #251700;
    --game-bg-end: #080500;
}

.home-game-row--purple {
    --game-color: #ff21ee;
    --game-title: #ff49ef;
    --game-glow: rgba(211, 0, 255, 0.34);
    --game-shadow: rgba(239, 0, 255, 0.78);
    --game-bg-start: #28002d;
    --game-bg-end: #08000d;
}

.home-game-row--blue {
    --game-color: #00adff;
    --game-title: #38d3ff;
    --game-glow: rgba(0, 145, 255, 0.37);
    --game-shadow: rgba(0, 166, 255, 0.83);
    --game-bg-start: #002846;
    --game-bg-end: #000b18;
}

.home-game-row--green {
    --game-color: #33e257;
    --game-title: #4af16c;
    --game-glow: rgba(0, 217, 82, 0.32);
    --game-shadow: rgba(0, 221, 82, 0.78);
    --game-bg-start: #063719;
    --game-bg-end: #011008;
}

.home-game-row--orange {
    --game-color: #ff860f;
    --game-title: #ff9b21;
    --game-glow: rgba(255, 103, 0, 0.34);
    --game-shadow: rgba(255, 113, 0, 0.80);
    --game-bg-start: #3b1600;
    --game-bg-end: #120600;
}

.home-game-row--red {
    --game-color: #ff2424;
    --game-title: #ff4141;
    --game-glow: rgba(255, 0, 0, 0.33);
    --game-shadow: rgba(255, 20, 20, 0.78);
    --game-bg-start: #3b0505;
    --game-bg-end: #120101;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .home-game-list-section {
        padding-right: 8px;
        padding-left: 8px;
    }

    .home-game-row {
        min-height: 45px;

        grid-template-columns:
            69px
            minmax(0, 1fr)
            25px;

        border-radius: 9px;
    }

    .home-game-row-image {
        width: 66px;
        height: 40px;
    }

    .home-game-row-copy strong {
        font-size: 13px;
    }

    .home-game-row-copy small {
        font-size: 7px;
    }

    .home-game-row-arrow {
        width: 23px;

        font-size: 23px;
    }
}

@media (max-width: 340px) {
    .home-game-row {
        grid-template-columns:
            60px
            minmax(0, 1fr)
            22px;
    }

    .home-game-row-image {
        width: 57px;
        height: 36px;
    }

    .home-game-row-copy strong {
        font-size: 12px;
    }
}


.home-game-source {
    position: absolute;

    top: 4px;
    left: 4px;

    display: block;

    padding: 2px 4px;

    border-radius: 4px;

    color: #ffffff;
    background: rgba(0, 0, 0, 0.72);

    font-size: 5px;
    font-weight: 900;

    line-height: 1;
}
</style>

    <!-- PEMBAYARAN -->
<section class="home-payment-section">

    <div class="home-section-heading">
        <div>
            <small>
                <?= e($homeSettings['payment_label']); ?>
            </small>

            <h2>
                <?= e($homeSettings['payment_title']); ?>
            </h2>
        </div>
    </div>

    <div class="home-payment-wrap">

        <div class="home-payment-highlight">
            <span class="home-payment-highlight-badge">
                Metode Lengkap
            </span>

            <strong>
                Deposit & E-Wallet Tersedia
            </strong>

            <small>
                Mendukung transfer bank, QRIS, dan dompet digital
                dengan tampilan cepat dan aman.
            </small>
        </div>

        <div class="home-payment-grid">

            <?php foreach ($paymentMethods as $method): ?>

                <?php
                $methodName = isset($method['name'])
                    ? (string) $method['name']
                    : 'PAYMENT';

                $methodIcon = isset($method['icon'])
                    ? (string) $method['icon']
                    : '';

                $methodType = isset($method['type'])
                    ? strtolower((string) $method['type'])
                    : 'bank';

                $methodTypeClass = 'bank';

                if ($methodType === 'ewallet') {
                    $methodTypeClass = 'ewallet';
                } elseif ($methodType === 'qris') {
                    $methodTypeClass = 'qris';
                }
                ?>

                <div
                    class="home-payment-card home-payment-card--<?= e($methodTypeClass); ?>"
                    aria-label="<?= e($methodName); ?>"
                >
                    <span class="home-payment-logo">
                        <img
                            src="<?= e($methodIcon); ?>"
                            alt="<?= e($methodName); ?>"
                            loading="lazy"
                            decoding="async"
                            onerror="
                                this.onerror = null;
                                this.src = 'assets/images/bank/payment-default.png';
                            "
                        >
                    </span>

                    <span class="home-payment-name">
                        <?= e($methodName); ?>
                    </span>
                </div>

            <?php endforeach; ?>

        </div>

        <div class="home-security-note">
            <span>✓</span>

            <div>
                <strong>
                    Transaksi terverifikasi
                </strong>

                <small>
                    Pastikan tujuan pembayaran sesuai informasi
                    resmi pada halaman deposit.
                </small>
            </div>
        </div>

    </div>

</section>
<style>
    /*
|--------------------------------------------------------------------------
| Section pembayaran baru
|--------------------------------------------------------------------------
*/

.home-payment-section {
    padding: 10px 10px 16px;
}

.home-payment-wrap {
    padding: 10px;

    border: 1px solid rgba(255, 191, 32, 0.22);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at top center,
            rgba(0, 145, 255, 0.13),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #03142f 0%,
            #020d22 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 12px rgba(0, 97, 255, 0.10),
        0 6px 16px rgba(0, 0, 0, 0.28);
}

/*
|--------------------------------------------------------------------------
| Highlight atas
|--------------------------------------------------------------------------
*/

.home-payment-highlight {
    display: grid;
    gap: 4px;

    margin-bottom: 12px;
    padding: 11px 12px;

    border: 1px solid rgba(255, 196, 49, 0.30);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 187, 0, 0.16),
            rgba(0, 136, 255, 0.10)
        );
}

.home-payment-highlight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 3px 8px;

    border-radius: 999px;

    color: #3a2100;
    background:
        linear-gradient(
            180deg,
            #ffe17e 0%,
            #ffc12c 100%
        );

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.home-payment-highlight strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 900;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-payment-highlight small {
    color: rgba(255, 255, 255, 0.80);

    font-size: 11px;
    line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| Grid metode pembayaran
|--------------------------------------------------------------------------
*/

.home-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/*
|--------------------------------------------------------------------------
| Card pembayaran
|--------------------------------------------------------------------------
*/

.home-payment-card {
    position: relative;

    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;

    min-height: 86px;
    padding: 10px 6px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(9, 31, 66, 0.96),
            rgba(2, 12, 30, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 3px 0 rgba(0, 0, 0, 0.55),
        0 5px 12px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.home-payment-card:hover {
    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 5px 0 rgba(0, 0, 0, 0.50),
        0 8px 16px rgba(0, 0, 0, 0.28);
}

/*
|--------------------------------------------------------------------------
| Variasi warna card
|--------------------------------------------------------------------------
*/

.home-payment-card--bank {
    border-color: rgba(0, 169, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 8px rgba(0, 157, 255, 0.12),
        0 3px 0 rgba(0, 0, 0, 0.55),
        0 5px 12px rgba(0, 0, 0, 0.20);
}

.home-payment-card--ewallet {
    border-color: rgba(181, 58, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 8px rgba(181, 58, 255, 0.12),
        0 3px 0 rgba(0, 0, 0, 0.55),
        0 5px 12px rgba(0, 0, 0, 0.20);
}

.home-payment-card--qris {
    border-color: rgba(255, 183, 0, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 8px rgba(255, 183, 0, 0.14),
        0 3px 0 rgba(0, 0, 0, 0.55),
        0 5px 12px rgba(0, 0, 0, 0.20);
}

/*
|--------------------------------------------------------------------------
| Logo pembayaran
|--------------------------------------------------------------------------
*/

.home-payment-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 32px;
}

.home-payment-logo img {
    display: block;

    max-width: 76px;
    max-height: 30px;
    width: auto;
    height: auto;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/*
|--------------------------------------------------------------------------
| Nama pembayaran
|--------------------------------------------------------------------------
*/

.home-payment-name {
    display: block;

    width: 100%;

    overflow: hidden;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.70);
}

/*
|--------------------------------------------------------------------------
| Security note
|--------------------------------------------------------------------------
*/

.home-security-note {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;

    margin-top: 12px;
    padding: 10px 12px;

    border: 1px solid rgba(63, 214, 146, 0.22);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 44, 31, 0.90),
            rgba(3, 26, 18, 0.96)
        );
}

.home-security-note > span {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    color: #042b16;
    background:
        linear-gradient(
            180deg,
            #7df7b4 0%,
            #3ddb8e 100%
        );

    font-weight: 900;
}

.home-security-note strong {
    display: block;

    margin-bottom: 2px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
}

.home-security-note small {
    color: rgba(255, 255, 255, 0.78);

    font-size: 10px;
    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Responsive mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .home-payment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .home-payment-card {
        min-height: 80px;
        padding: 9px 5px;
    }

    .home-payment-logo {
        height: 28px;
    }

    .home-payment-logo img {
        max-width: 68px;
        max-height: 26px;
    }

    .home-payment-name {
        font-size: 9px;
    }
}

@media (max-width: 340px) {
    .home-payment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
</style>
<style>
    /*
|--------------------------------------------------------------------------
| Pembayaran versi compact
|--------------------------------------------------------------------------
*/

.home-payment-section {
    padding: 7px 8px 11px !important;
}

.home-payment-wrap {
    padding: 7px !important;
    border-radius: 11px !important;
}

/*
|--------------------------------------------------------------------------
| Bagian informasi atas diperkecil
|--------------------------------------------------------------------------
*/

.home-payment-highlight {
    display: flex !important;
    min-height: 36px;

    align-items: center;

    margin-bottom: 7px !important;
    padding: 6px 8px !important;

    gap: 7px;

    border-radius: 8px !important;
}

.home-payment-highlight-badge {
    flex: 0 0 auto;

    padding: 3px 6px !important;

    font-size: 7px !important;
}

.home-payment-highlight strong {
    font-size: 9px !important;
    line-height: 1.1;
}

.home-payment-highlight small {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Grid dibuat 4 kolom
|--------------------------------------------------------------------------
*/

.home-payment-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 5px !important;
}

/*
|--------------------------------------------------------------------------
| Kotak pembayaran kecil
|--------------------------------------------------------------------------
*/

.home-payment-card {
    min-width: 0;
    min-height: 53px !important;

    padding: 5px 3px !important;

    align-content: center;

    gap: 3px !important;

    border-radius: 8px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 2px 0 rgba(0,0,0,.55),
        0 3px 6px rgba(0,0,0,.18) !important;
}

.home-payment-card:hover {
    transform: translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Logo diperkecil
|--------------------------------------------------------------------------
*/

.home-payment-logo {
    width: 100% !important;
    height: 23px !important;
}

.home-payment-logo img {
    width: auto !important;
    height: auto !important;

    max-width: 55px !important;
    max-height: 21px !important;

    object-fit: contain !important;
}

/*
|--------------------------------------------------------------------------
| Nama pembayaran kecil
|--------------------------------------------------------------------------
*/

.home-payment-name {
    font-size: 7px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: -0.01em;
}

/*
|--------------------------------------------------------------------------
| Catatan keamanan diperkecil
|--------------------------------------------------------------------------
*/

.home-security-note {
    grid-template-columns:
        25px
        minmax(0, 1fr) !important;

    margin-top: 7px !important;
    padding: 7px 8px !important;

    gap: 7px !important;

    border-radius: 8px !important;
}

.home-security-note > span {
    width: 25px !important;
    height: 25px !important;

    font-size: 11px;
}

.home-security-note strong {
    margin: 0 !important;

    font-size: 9px !important;
}

.home-security-note small {
    font-size: 7px !important;
    line-height: 1.3 !important;
}

/*
|--------------------------------------------------------------------------
| Layar sangat kecil
|--------------------------------------------------------------------------
*/

@media (max-width: 340px) {
    .home-payment-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    .home-payment-card {
        min-height: 52px !important;
    }
}
</style>
</div>
<script>
(function () {
    'use strict';

    var numberElement = document.getElementById(
        'jackpotDragonNumber'
    );

    var valueElement = document.getElementById(
        'jackpotDragonValue'
    );

    if (!numberElement || !valueElement) {
        return;
    }

    /*
    |--------------------------------------------------------------------------
    | Pengaturan jackpot
    |--------------------------------------------------------------------------
    */

    var START_AMOUNT = 35000000;
    var RESET_AMOUNT = 100000000;
    var STORAGE_KEY = 'rute28_jackpot_value';
    var STORAGE_TIME_KEY = 'rute28_jackpot_time';

    /*
    |--------------------------------------------------------------------------
    | Ambil nominal terakhir dari browser
    |--------------------------------------------------------------------------
    */

    var savedAmount = parseFloat(
        localStorage.getItem(STORAGE_KEY) || ''
    );

    var savedTime = parseInt(
        localStorage.getItem(STORAGE_TIME_KEY) || '0',
        10
    );

    var current = isFinite(savedAmount)
        ? savedAmount
        : START_AMOUNT;

    /*
    |--------------------------------------------------------------------------
    | Tambahkan kenaikan selama halaman tidak dibuka
    |--------------------------------------------------------------------------
    */

    if (savedTime > 0) {
        var now = Date.now();
        var elapsedSeconds = Math.floor(
            (now - savedTime) / 1000
        );

        /*
         * Bertambah sekitar Rp0,75 per detik
         * selama halaman ditutup.
         */
        current += elapsedSeconds * 0.75;
    }

    /*
    |--------------------------------------------------------------------------
    | Reset saat mencapai batas
    |--------------------------------------------------------------------------
    */

    if (
        current >= RESET_AMOUNT ||
        current < START_AMOUNT
    ) {
        current = START_AMOUNT;
    }

    /*
    |--------------------------------------------------------------------------
    | Format nominal
    |--------------------------------------------------------------------------
    */

    function formatJackpot(value) {
        return Number(value).toLocaleString(
            'en-US',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );
    }

    /*
    |--------------------------------------------------------------------------
    | Simpan nilai terakhir
    |--------------------------------------------------------------------------
    */

    function saveJackpot() {
        localStorage.setItem(
            STORAGE_KEY,
            current.toFixed(2)
        );

        localStorage.setItem(
            STORAGE_TIME_KEY,
            String(Date.now())
        );
    }

    /*
    |--------------------------------------------------------------------------
    | Sesuaikan ukuran agar tidak keluar dari bingkai
    |--------------------------------------------------------------------------
    */

    function fitJackpotNumber() {
        valueElement.style.fontSize = '';

        var computedStyle = window.getComputedStyle(
            valueElement
        );

        var fontSize = parseFloat(
            computedStyle.fontSize
        );

        while (
            valueElement.scrollWidth >
                valueElement.clientWidth &&
            fontSize > 11
        ) {
            fontSize -= 0.5;

            valueElement.style.fontSize =
                fontSize + 'px';
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Tampilkan jackpot
    |--------------------------------------------------------------------------
    */

    function renderJackpot() {
        numberElement.textContent =
            formatJackpot(current);

        window.requestAnimationFrame(
            fitJackpotNumber
        );
    }

    numberElement.classList.add(
        'jackpot-dragon-number-live'
    );

    renderJackpot();
    saveJackpot();

    /*
    |--------------------------------------------------------------------------
    | Jackpot terus bertambah
    |--------------------------------------------------------------------------
    */

    window.setInterval(function () {
        /*
         * Bertambah Rp0,20 sampai Rp2,20
         * setiap dua detik.
         */
        var addition =
            Math.random() * 2 + 0.2;

        current += addition;

        /*
         * Setelah mencapai 100 juta,
         * kembali ke 35 juta.
         */
        if (current >= RESET_AMOUNT) {
            current = START_AMOUNT;
        }

        renderJackpot();
        saveJackpot();
    }, 2000);

    window.addEventListener(
        'resize',
        fitJackpotNumber
    );
}());
</script>
<style>
    /*
|--------------------------------------------------------------------------
| Hilangkan garis pembatas hero
|--------------------------------------------------------------------------
*/

.mh-marquee {
    border-bottom: 0 !important;
}

.home-showcase {
    border-top: 0 !important;
    border-bottom: 0 !important;

    box-shadow:
        inset 0 -25px 40px rgba(0, 0, 0, 0.34) !important;
}
</style>
<style>
    /*
|--------------------------------------------------------------------------
| Rapikan jarak kategori ke jackpot
|--------------------------------------------------------------------------
*/

.home-showcase {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 7px !important;
}

.home-category-grid {
    margin-bottom: 0 !important;
}

.jackpot-dragon,
.home-jackpot-frame,
.home-jackpot {
    margin-top: 3px !important;
}
</style>
<style>
    /*
|--------------------------------------------------------------------------
| Perbaikan ukuran game popular berjalan
|--------------------------------------------------------------------------
*/

.home-game-block {
    display: grid;
    width: 100%;
    min-width: 0;
    margin-bottom: 7px;
}

/*
|--------------------------------------------------------------------------
| Wadah gambar berjalan
|--------------------------------------------------------------------------
*/

.home-popular-marquee {
    position: relative;

    width: calc(100% - 10px);
    height: 94px;

    margin:
        -1px
        5px
        0;

    overflow: hidden;

    border-right: 1px solid var(--game-color);
    border-bottom: 1px solid var(--game-color);
    border-left: 1px solid var(--game-color);

    border-radius:
        0
        0
        10px
        10px;

    background:
        radial-gradient(
            ellipse at 50% 0,
            var(--game-glow),
            transparent 75%
        ),
        linear-gradient(
            180deg,
            #03152e,
            #010817
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 6px var(--game-shadow);
}

/*
|--------------------------------------------------------------------------
| Track animasi
|--------------------------------------------------------------------------
*/

.home-popular-track {
    display: flex;

    width: max-content;
    height: 100%;

    align-items: center;

    animation:
        home-popular-running
        linear
        infinite;

    will-change: transform;
}

.home-popular-group {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    padding: 7px;

    gap: 7px;
}

@keyframes home-popular-running {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.home-popular-marquee:hover .home-popular-track {
    animation-play-state: paused;
}

/*
|--------------------------------------------------------------------------
| Kartu game kecil
|--------------------------------------------------------------------------
*/

.home-popular-game {
    display: grid;

    width: 68px;
    min-width: 68px;

    justify-items: center;

    gap: 4px;

    color: #ffffff;

    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Ukuran gambar game
|--------------------------------------------------------------------------
*/

.home-popular-image {
    position: relative;

    display: block;

    width: 62px;
    height: 62px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 9px;

    background: #06152b;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 3px 0 rgba(0,0,0,.70),
        0 0 7px var(--game-shadow);
}

.home-popular-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;
}

/*
|--------------------------------------------------------------------------
| Nama game
|--------------------------------------------------------------------------
*/

.home-popular-game > strong {
    display: block;

    width: 100%;

    overflow: hidden;

    color: #ffffff;

    font-size: 7px;
    font-weight: 900;

    line-height: 1.15;

    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 1px 2px rgba(0,0,0,.95);
}

/*
|--------------------------------------------------------------------------
| Bayangan sisi kiri dan kanan
|--------------------------------------------------------------------------
*/

.home-popular-marquee::before,
.home-popular-marquee::after {
    position: absolute;
    z-index: 5;

    top: 0;
    bottom: 0;

    width: 22px;

    content: "";

    pointer-events: none;
}

.home-popular-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #010817,
            transparent
        );
}

.home-popular-marquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #010817,
            transparent
        );
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .home-popular-marquee {
        height: 84px;
    }

    .home-popular-group {
        padding: 6px 5px;

        gap: 5px;
    }

    .home-popular-game {
        width: 59px;
        min-width: 59px;
    }

    .home-popular-image {
        width: 54px;
        height: 54px;

        border-radius: 8px;
    }

    .home-popular-game > strong {
        font-size: 6px;
    }
}
</style>
<style>
    /*
|--------------------------------------------------------------------------
| Game sedikit: jangan berjalan dan jangan diduplikasi
|--------------------------------------------------------------------------
*/

.home-popular-marquee.is-static {
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
}

.home-popular-marquee.is-static::-webkit-scrollbar {
    display: none;
}

.home-popular-marquee.is-static .home-popular-track {
    width: max-content;

    animation: none !important;
    transform: none !important;
}

.home-popular-marquee.is-static .home-popular-group {
    justify-content: flex-start;
}

/*
|--------------------------------------------------------------------------
| Game banyak: marquee berjalan
|--------------------------------------------------------------------------
*/

.home-popular-marquee.is-running .home-popular-track {
    animation-name: home-popular-running;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
</style>
<?php

require __DIR__ . '/includes/footer.php';