<?php

defined('APP_BOOTSTRAPPED') or exit('No direct access.');

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

/*
|--------------------------------------------------------------------------
| Setting header dari database
|--------------------------------------------------------------------------
*/

$siteName = 'MEGAN28';
$logoFileName = 'logo.webp';

/*
|--------------------------------------------------------------------------
| Marquee header
|--------------------------------------------------------------------------
*/

$headerMarqueeText =
    'Sistem Online • Aman • Transaksi Cepat';

$headerMarqueeSpeed = 18;

/*
 * Folder logo tetap ditentukan dari kode,
 * tidak berasal dari database.
 */
$logoFolder = 'assets/images/';

if (
    !isset($pdo) ||
    !($pdo instanceof PDO)
) {
    $databaseFile = dirname(__DIR__) .
        '/config/database.php';

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

if (
    isset($pdo) &&
    $pdo instanceof PDO
) {
    try {
        $stmtSetting = $pdo->query(
            "SELECT
                setting_key,
                setting_value
             FROM `setting`
             WHERE setting_key IN (
    'site_name',
    'logo_file',
    'header_marquee_text',
    'header_marquee_speed'
)
             AND is_active = 1"
        );

        $settingRows = $stmtSetting->fetchAll(
            PDO::FETCH_ASSOC
        );

        foreach ($settingRows as $settingRow) {
            if (
    $settingKey === 'header_marquee_text' &&
    $settingValue !== ''
) {
    $headerMarqueeText = $settingValue;
}

if (
    $settingKey === 'header_marquee_speed' &&
    is_numeric($settingValue)
) {
    $headerMarqueeSpeed = (int) $settingValue;
}
            $settingKey = isset(
                $settingRow['setting_key']
            )
                ? trim(
                    (string) $settingRow[
                        'setting_key'
                    ]
                )
                : '';

            $settingValue = isset(
                $settingRow['setting_value']
            )
                ? trim(
                    (string) $settingRow[
                        'setting_value'
                    ]
                )
                : '';

            if (
                $settingKey === 'site_name' &&
                $settingValue !== ''
            ) {
                $siteName = $settingValue;
            }

            if (
                $settingKey === 'logo_file' &&
                $settingValue !== ''
            ) {
                $logoFileName = $settingValue;
            }
        }
    } catch (Throwable $e) {
        error_log(
            'Gagal membaca setting header: ' .
            $e->getMessage()
        );
    }
}

/*
|--------------------------------------------------------------------------
| Amankan nama file logo
|--------------------------------------------------------------------------
| basename() membuang folder jika seseorang memasukkan:
| ../../config/database.php
*/

$logoFileName = basename(
    str_replace(
        '\\',
        '/',
        $logoFileName
    )
);

/*
 * Hanya izinkan nama file gambar lokal.
 */
if (
    preg_match(
        '/^[A-Za-z0-9][A-Za-z0-9._-]{0,120}\.(webp|png|jpg|jpeg|gif)$/i',
        $logoFileName
    ) !== 1
) {
    $logoFileName = 'logo.webp';
}

/*
|--------------------------------------------------------------------------
| Susun alamat logo
|--------------------------------------------------------------------------
*/

$logoRelativePath =
    $logoFolder . $logoFileName;

$logoDiskPath =
    dirname(__DIR__) . '/' . $logoRelativePath;

$logoUrl = $logoRelativePath;

$logoExists = is_file($logoDiskPath);

if ($logoExists) {
    $logoUrl .= '?v=' .
        filemtime($logoDiskPath);
}
?>
<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, viewport-fit=cover"
    >

    <meta
        name="theme-color"
        content="#020b1f"
    >

    <meta
        name="color-scheme"
        content="dark"
    >

    <title>
        <?= e($pageTitle); ?> — <?= e($siteName); ?>
    </title>

    <meta
        name="description"
        content="Platform hiburan mobile yang cepat, aman, dan nyaman."
    >

    <!-- CSS utama untuk konten website -->
    <link
        rel="stylesheet"
        href="assets/css/app.css?v=1.2.0"
    >

    <!-- CSS khusus header dan sidebar -->
 <style>
        /*
        |--------------------------------------------------------------------------
        | HEADER MANDIRI
        |--------------------------------------------------------------------------
        | Semua class menggunakan awalan mh- agar tidak bentrok dengan app.css.
        */

        :root {
            --mh-shell-width: 560px;
            --mh-gold: #ffc83d;
            --mh-gold-dark: #b56a00;
            --mh-blue: #008cff;
            --mh-dark: #020817;
            --mh-panel: #061735;
            --mh-border: rgba(255, 203, 62, 0.30);
        }

        .mh-header,
        .mh-header *,
        .mh-drawer,
        .mh-drawer * {
            box-sizing: border-box;
        }

        /*
        |--------------------------------------------------------------------------
        | Header utama
        |--------------------------------------------------------------------------
        */

        .mh-header {
            position: sticky;
            z-index: 800;
            top: 0;

            width: 100%;

            overflow: hidden;

            border-bottom: 1px solid var(--mh-border);

            background:
                radial-gradient(
                    circle at 50% -55px,
                    rgba(0, 126, 255, 0.38),
                    transparent 250px
                ),
                linear-gradient(
                    180deg,
                    rgba(3, 16, 42, 0.99),
                    rgba(1, 8, 24, 0.99)
                );

            box-shadow:
                0 10px 28px rgba(0, 0, 0, 0.48),
                inset 0 -1px 0 rgba(0, 153, 255, 0.15);

            backdrop-filter: blur(17px);
            -webkit-backdrop-filter: blur(17px);
        }

        .mh-header::before {
            position: absolute;

            top: -80px;
            left: 50%;

            width: 320px;
            height: 140px;

            transform: translateX(-50%);

            border-radius: 50%;

            background: rgba(0, 119, 255, 0.18);
            filter: blur(35px);

            content: "";
            pointer-events: none;
        }

        .mh-header-inner {
            position: relative;
            z-index: 2;

            display: grid;

            min-height: 76px;

            grid-template-columns:
                50px
                minmax(105px, 1fr)
                auto;

            align-items: center;

            padding: 7px 12px 6px;

            gap: 8px;
        }

        /*
        |--------------------------------------------------------------------------
        | Tombol menu
        |--------------------------------------------------------------------------
        */

        .mh-menu-button {
            display: grid;

            width: 46px;

            margin: 0;
            padding: 5px 5px 2px;

            place-items: center;

            gap: 4px;

            border: 0;
            border-radius: 12px;

            color: #ffffff;
            background: transparent;

            cursor: pointer;
        }

        .mh-menu-button:hover {
            background: rgba(255, 199, 46, 0.08);
        }

        .mh-menu-button > i {
            display: block;

            width: 29px;
            height: 4px;

            border-radius: 999px;

            background:
                linear-gradient(
                    90deg,
                    #fff093,
                    #ffc127,
                    #d77a00
                );

            box-shadow:
                0 0 9px rgba(255, 187, 28, 0.45);
        }

        .mh-menu-button small {
            margin-top: 1px;

            color: #dceaff;

            font-size: 9px;
            font-weight: 900;
            line-height: 1;
        }

        /*
        |--------------------------------------------------------------------------
        | Logo tengah
        |--------------------------------------------------------------------------
        */

        .mh-logo {
            position: relative;

            display: flex;

            width: 100%;
            min-width: 0;
            max-width: 190px;
            height: 59px;

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

            margin: 0 auto;
            padding: 2px 7px;

            overflow: hidden;
        }

        .mh-logo::after {
            position: absolute;

            right: 8%;
            bottom: 1px;
            left: 8%;

            height: 1px;

            content: "";

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 203, 62, 0.75),
                    transparent
                );

            box-shadow:
                0 0 8px rgba(255, 185, 30, 0.43);
        }

        .mh-logo-image {
            display: block;

            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 55px;

            object-fit: contain;

            filter:
                drop-shadow(0 3px 4px rgba(0, 0, 0, 0.60))
                drop-shadow(0 0 8px rgba(0, 127, 255, 0.25));
        }

        /*
        |--------------------------------------------------------------------------
        | Logo fallback
        |--------------------------------------------------------------------------
        */

        .mh-logo-fallback {
            display: flex;

            min-width: 0;

            align-items: center;

            gap: 8px;
        }

        .mh-logo-fallback-icon {
            display: grid;

            width: 38px;
            height: 38px;

            flex: 0 0 38px;

            place-items: center;

            border: 1px solid #ffe47a;
            border-radius: 12px;

            color: #211100;

            background:
                linear-gradient(
                    145deg,
                    #fff5aa,
                    #ffc52f 58%,
                    #b76800
                );

            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.70),
                0 0 13px rgba(255, 180, 14, 0.30);

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

        .mh-logo-fallback-copy {
            display: grid;

            min-width: 0;
        }

        .mh-logo-fallback-copy strong {
            overflow: hidden;

            color: #ffffff;

            font-size: 16px;
            font-weight: 1000;
            letter-spacing: 0.035em;

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

        .mh-logo-fallback-copy small {
            overflow: hidden;

            color: var(--mh-gold);

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

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

        /*
        |--------------------------------------------------------------------------
        | Login dan register
        |--------------------------------------------------------------------------
        */

     /*
|--------------------------------------------------------------------------
| Tombol akun kanan
|--------------------------------------------------------------------------
*/

.mh-account-actions {
    display: flex;

    min-width: 78px;

    align-items: center;
    justify-content: flex-end;
}

/*
|--------------------------------------------------------------------------
| Login dan Register bertumpuk
|--------------------------------------------------------------------------
*/

.mh-auth-stack {
    display: grid;

    width: 78px;

    grid-template-columns: 1fr;

    gap: 5px;
}

.mh-auth-stack a {
    display: flex;

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

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

    padding: 0 8px;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 1000;
    line-height: 1;

    text-align: center;

    transition:
        filter 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

/*
|--------------------------------------------------------------------------
| Login hijau RUTE28
|--------------------------------------------------------------------------
*/

.mh-login {
    border: 1px solid #d8ff76;

    color: #102600;

    background:
        linear-gradient(
            180deg,
            #d9ff85 0%,
            #a8f52c 22%,
            #85ee08 45%,
            #63cd0d 68%,
            #127303 88%,
            #063f02 100%
        );

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.72),
        inset 0 -2px 3px rgba(0, 54, 0, 0.38),
        0 3px 0 rgba(5, 61, 0, 0.90),
        0 5px 10px rgba(0, 0, 0, 0.34),
        0 0 12px rgba(133, 238, 8, 0.32);

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.42);
}

/*
|--------------------------------------------------------------------------
| Register emas
|--------------------------------------------------------------------------
*/

.mh-register {
    border: 1px solid #fff08d;

    color: #251200;

    background:
        linear-gradient(
            180deg,
            #fff5a2 0%,
            #ffd14b 38%,
            #ffb113 68%,
            #bd6900 100%
        );

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 3px rgba(121, 57, 0, 0.27),
        0 3px 0 rgba(105, 55, 0, 0.80),
        0 5px 10px rgba(0, 0, 0, 0.30),
        0 0 10px rgba(255, 178, 13, 0.18);
}

.mh-login:hover,
.mh-register:hover {
    filter: brightness(1.08);

    transform: translateY(-1px);
}

.mh-login:active,
.mh-register:active {
    transform: translateY(2px);

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

        /*
        |--------------------------------------------------------------------------
        | Akun ketika login
        |--------------------------------------------------------------------------
        */

        .mh-account-box {
            display: flex;

            min-width: 117px;

            align-items: center;

            padding: 5px 8px 5px 5px;

            gap: 7px;

            border: 1px solid rgba(255, 199, 47, 0.42);
            border-radius: 13px;

            background:
                linear-gradient(
                    145deg,
                    rgba(8, 37, 79, 0.96),
                    rgba(2, 15, 38, 0.98)
                );

            box-shadow:
                inset 0 0 13px rgba(0, 111, 255, 0.10),
                0 5px 13px rgba(0, 0, 0, 0.30);
        }

        .mh-account-avatar {
            display: grid;

            width: 32px;
            height: 32px;

            flex: 0 0 32px;

            place-items: center;

            border-radius: 10px;

            color: #211100;

            background:
                linear-gradient(
                    145deg,
                    #fff5a7,
                    #ffc22d 60%,
                    #b56700
                );

            font-weight: 1000;
        }

        .mh-account-copy {
            display: grid;

            min-width: 0;

            text-align: left;
        }

        .mh-account-copy small {
            overflow: hidden;

            max-width: 72px;

            color: #c5d6ee;

            font-size: 9px;

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

        .mh-account-copy strong {
            color: var(--mh-gold);

            font-size: 9px;
            white-space: nowrap;
        }

        /*
        |--------------------------------------------------------------------------
        | Status bar
        |--------------------------------------------------------------------------
        */

        .mh-status-bar {
            position: relative;
            z-index: 2;

            display: flex;

            min-height: 25px;

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

            padding: 4px 8px;

            gap: 15px;

            border-top: 1px solid rgba(255, 255, 255, 0.05);

            background:
                linear-gradient(
                    90deg,
                    rgba(0, 93, 194, 0.04),
                    rgba(0, 124, 255, 0.16),
                    rgba(0, 93, 194, 0.04)
                );
        }

        .mh-status-item {
            display: inline-flex;

            align-items: center;

            gap: 4px;

            color: #bdd0e9;

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

            white-space: nowrap;
        }

        .mh-status-icon {
            color: var(--mh-gold);

            font-style: normal;
        }

        .mh-online-dot {
            display: block;

            width: 6px;
            height: 6px;

            border-radius: 50%;

            background: #38e781;

            box-shadow:
                0 0 7px #38e781;
        }

        /*
        |--------------------------------------------------------------------------
        | Backdrop sidebar
        |--------------------------------------------------------------------------
        */

        .mh-backdrop {
            position: fixed;
            z-index: 1900;

            top: 0;
            bottom: 0;
            left: 50%;

            width: min(100%, var(--mh-shell-width));

            transform: translateX(-50%);

            background: rgba(0, 3, 12, 0.80);

            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .mh-backdrop[hidden] {
            display: none;
        }

        /*
        |--------------------------------------------------------------------------
        | Sidebar
        |--------------------------------------------------------------------------
        */

        .mh-drawer {
    position: fixed !important;
    z-index: 2000 !important;

    top: 0;
    bottom: 0;

    left: max(
        0px,
        calc(50% - (var(--mh-shell-width) / 2))
    );

    display: flex;
    width: min(84vw, 335px);
    height: 100vh;
    height: 100dvh;

    flex-direction: column;

    padding: 17px;

    overflow: hidden;

    transform: translate3d(
        calc(-100% - 20px),
        0,
        0
    );

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    isolation: isolate;
    perspective: 900px;

    border-right:
        1px solid rgba(255, 203, 62, 0.35);

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(0, 146, 255, 0.35),
            transparent 250px
        ),
        radial-gradient(
            circle at 110% 48%,
            rgba(255, 193, 35, 0.15),
            transparent 210px
        ),
        linear-gradient(
            155deg,
            #071d43 0%,
            #03132f 48%,
            #010817 100%
        );

    box-shadow:
        25px 0 60px rgba(0, 0, 0, 0.70);

    transition:
        transform 230ms ease,
        opacity 180ms ease,
        visibility 0s linear 230ms;
}

        .mh-drawer.mh-open {
    transform: translate3d(0, 0, 0) !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    transition:
        transform 230ms ease,
        opacity 180ms ease,
        visibility 0s !important;
}

        /*
        |--------------------------------------------------------------------------
        | Kepala sidebar
        |--------------------------------------------------------------------------
        */

        .mh-drawer-head {
    display: flex;

    min-height: 57px;

    flex: 0 0 auto;

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

    padding-bottom: 14px;

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

.mh-close-button {
    display: grid;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    place-items: center;

    margin: 0;
    padding: 0;

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

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(16, 53, 101, 0.96),
            rgba(3, 21, 49, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.28);

    font-family: Arial, sans-serif;
    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.mh-close-button:hover {
    border-color:
        rgba(255, 216, 92, 0.65);

    color: #221200;

    background:
        linear-gradient(
            180deg,
            #fff29b,
            #ffc12e
        );
}






/*
|--------------------------------------------------------------------------
| Ukuran logo sidebar
|--------------------------------------------------------------------------
*/

.mh-drawer-logo {
    display: flex;

    width: 160px;
    height: 52px;

    flex: 0 1 160px;

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

    padding: 5px 6px;

    overflow: hidden;
}

.mh-drawer-logo img {
    display: block;

    width: auto !important;
    max-width: 145px !important;

    height: auto !important;
    max-height: 35px !important;

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

.mh-drawer-logo-text {
    overflow: hidden;

    max-width: 145px;

    color: #ffffff;

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

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



/*
|--------------------------------------------------------------------------
| Kartu profil sidebar
|--------------------------------------------------------------------------
*/

.mh-profile-card {
    position: relative;

    flex: 0 0 auto;

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

    overflow: hidden;

    border: 1px solid rgba(0, 164, 255, 0.32);
    border-radius: 17px;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(0, 142, 255, 0.24),
            transparent 145px
        ),
        linear-gradient(
            145deg,
            rgba(8, 43, 91, 0.97),
            rgba(2, 18, 44, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 10px 24px rgba(0, 0, 0, 0.24);
}

.mh-profile-card::before {
    position: absolute;

    top: 0;
    right: 17px;
    left: 17px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(67, 187, 255, 0.75),
            transparent
        );
}

.mh-profile-main {
    position: relative;
    z-index: 2;

    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.mh-profile-avatar {
    position: relative;

    display: grid;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    place-items: center;

    padding: 3px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #fff3a1,
            #ffc22d 55%,
            #ab5c00
        );

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.70),
        0 5px 14px rgba(0, 0, 0, 0.38),
        0 0 15px rgba(255, 190, 35, 0.20);
}

.mh-profile-avatar > span {
    display: grid;

    width: 100%;
    height: 100%;

    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.42);

    border-radius: 12px;

    color: #211100;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 174, 0, 0.08)
        );

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

.mh-profile-status {
    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 13px;
    height: 13px;

    border: 3px solid #062047;
    border-radius: 50%;

    background: #42e993;

    box-shadow:
        0 0 8px rgba(66, 233, 147, 0.85);
}

.mh-profile-card.is-guest .mh-profile-status {
    background: #95a7bd;

    box-shadow: none;
}

/*
|--------------------------------------------------------------------------
| Informasi profil
|--------------------------------------------------------------------------
*/

.mh-profile-copy {
    display: grid;

    min-width: 0;
    flex: 1;

    gap: 2px;
}

.mh-profile-copy small {
    color: #91aac7;

    font-size: 8px;
    font-weight: 700;
}

.mh-profile-copy strong {
    overflow: hidden;

    color: #ffffff;

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

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

.mh-profile-copy > span {
    overflow: hidden;

    color: #a8bdd6;

    font-size: 8px;

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

.mh-profile-active {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #65efac !important;

    font-weight: 800;
}

.mh-profile-active > i {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #42e993;

    box-shadow:
        0 0 6px rgba(66, 233, 147, 0.85);
}

/*
|--------------------------------------------------------------------------
| Panah akun
|--------------------------------------------------------------------------
*/

.mh-profile-arrow {
    display: grid;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    color: #dceaff;
    background: rgba(255, 255, 255, 0.05);

    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.mh-profile-arrow:hover {
    color: #241300;

    border-color:
        rgba(255, 217, 92, 0.90);

    background:
        linear-gradient(
            145deg,
            #fff29a,
            #ffbd26
        );
}

/*
|--------------------------------------------------------------------------
| Saldo member
|--------------------------------------------------------------------------
*/

.mh-profile-balance {
    position: relative;
    z-index: 2;

    display: flex;

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

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

    gap: 9px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.mh-profile-balance > div {
    display: grid;

    min-width: 0;

    gap: 1px;
}

.mh-profile-balance small {
    color: #91aac7;

    font-size: 8px;
}

.mh-profile-balance strong {
    overflow: hidden;

    color: #ffd04e;

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

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

.mh-profile-balance > a {
    display: inline-flex;

    min-height: 31px;

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

    padding: 0 11px;

    border:
        1px solid rgba(255, 225, 121, 0.85);

    border-radius: 10px;

    color: #251200;

    background:
        linear-gradient(
            180deg,
            #fff09a,
            #ffc12d 62%,
            #b96600
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.28);

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

/*
|--------------------------------------------------------------------------
| Tombol guest
|--------------------------------------------------------------------------
*/

.mh-profile-actions {
    position: relative;
    z-index: 2;

    display: grid;

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

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.mh-profile-actions a {
    display: flex;

    min-height: 35px;

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

    border-radius: 10px;

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

.mh-profile-login {
    border:
        1px solid rgba(0, 165, 255, 0.45);

    color: #e7f4ff;

    background:
        linear-gradient(
            145deg,
            rgba(0, 123, 226, 0.25),
            rgba(0, 63, 138, 0.18)
        );
}

.mh-profile-register {
    border:
        1px solid rgba(255, 226, 116, 0.90);

    color: #251200;

    background:
        linear-gradient(
            180deg,
            #fff09a,
            #ffc12d 62%,
            #b96600
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.28);
}


        /*
        |--------------------------------------------------------------------------
        | Menu sidebar
        |--------------------------------------------------------------------------
        */

  /*
|--------------------------------------------------------------------------
| BACKGROUND 3D SIDEBAR
|--------------------------------------------------------------------------
*/

.mh-drawer::before {
    position: absolute;
    z-index: 0;

    inset: 0;

    content: "";

    background:
        linear-gradient(
            rgba(74, 168, 255, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(74, 168, 255, 0.07) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    opacity: 0.35;

    pointer-events: none;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.75),
            transparent 85%
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.75),
            transparent 85%
        );
}

.mh-drawer::after {
    position: absolute;
    z-index: 0;

    top: 115px;
    right: -115px;

    width: 230px;
    height: 230px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 147, 255, 0.24),
            transparent 68%
        );

    filter: blur(9px);

    pointer-events: none;
}

.mh-drawer > * {
    position: relative;
    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| AREA MENU
|--------------------------------------------------------------------------
*/

.mh-drawer-menu {
    display: block;

    min-height: 0;
    flex: 1;

    margin-top: 15px;
    padding: 2px 5px 18px 2px;

    overflow-x: hidden;
    overflow-y: auto;

    perspective: 800px;
    transform-style: preserve-3d;

    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 202, 61, 0.42)
        transparent;
}

.mh-drawer-menu::-webkit-scrollbar {
    width: 4px;
}

.mh-drawer-menu::-webkit-scrollbar-track {
    background: transparent;
}

.mh-drawer-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #ffd75d,
            #a45d00
        );
}


/*
|--------------------------------------------------------------------------
| BAGIAN MENU
|--------------------------------------------------------------------------
*/

.mh-menu-section {
    display: grid;

    gap: 8px;

    transform-style: preserve-3d;
}

.mh-menu-section-title {
    display: block;

    padding: 1px 13px 5px;

    color: #7f9aba;

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

    letter-spacing: 0.18em;
    text-transform: uppercase;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85);
}


/*
|--------------------------------------------------------------------------
| LIST MENU 3D
|--------------------------------------------------------------------------
*/

.mh-menu-link {
    position: relative;

    display: flex;

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

    align-items: center;

    padding: 0 15px;

    overflow: hidden;

    border:
        1px solid rgba(108, 176, 255, 0.14);

    border-radius: 13px;

    color: #cbdcf0;

    background:
        linear-gradient(
            180deg,
            rgba(17, 56, 105, 0.82) 0%,
            rgba(5, 30, 67, 0.88) 52%,
            rgba(2, 18, 43, 0.96) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.30),
        0 5px 0 rgba(0, 4, 14, 0.60),
        0 8px 15px rgba(0, 0, 0, 0.22);

    font-size: 12px;
    font-weight: 850;

    transform:
        translate3d(0, 0, 0);

    transform-style: preserve-3d;

    transition:
        color 170ms ease,
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease,
        transform 170ms ease;
}

/*
 * Cahaya pada permukaan menu
 */
.mh-menu-link::after {
    position: absolute;

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

    height: 45%;

    content: "";

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

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

    pointer-events: none;
}

/*
 * Garis aktif sebelah kiri
 */
.mh-menu-link::before {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 0;

    width: 4px;
    height: 0;

    content: "";

    transform:
        translateY(-50%);

    border-radius:
        0
        5px
        5px
        0;

    background:
        linear-gradient(
            180deg,
            #fff49c,
            #ffc126,
            #d77a00
        );

    box-shadow:
        0 0 10px rgba(255, 193, 38, 0.68);

    transition:
        height 170ms ease;
}

.mh-menu-text {
    position: relative;
    z-index: 3;

    display: block;

    min-width: 0;

    overflow: hidden;

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

.mh-menu-link:hover {
    border-color:
        rgba(255, 206, 72, 0.40);

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(24, 73, 132, 0.95),
            rgba(6, 39, 83, 0.97)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.24),
        0 7px 0 rgba(0, 4, 14, 0.66),
        0 13px 22px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(0, 133, 255, 0.12);

    transform:
        translate3d(0, -2px, 15px);
}

.mh-menu-link:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.32),
        0 2px 0 rgba(0, 4, 14, 0.65);

    transform:
        translate3d(0, 2px, 2px);
}

.mh-menu-link.mh-active {
    border-color:
        rgba(255, 210, 82, 0.68);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 0,
            rgba(255, 196, 36, 0.15),
            transparent 100px
        ),
        linear-gradient(
            180deg,
            rgba(27, 76, 137, 0.98),
            rgba(7, 39, 82, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -2px 0 rgba(91, 45, 0, 0.35),
        0 6px 0 rgba(89, 48, 0, 0.75),
        0 11px 19px rgba(0, 0, 0, 0.34),
        0 0 16px rgba(255, 187, 28, 0.12);

    transform:
        translate3d(0, -1px, 12px);
}

.mh-menu-link.mh-active::before {
    height: 27px;
}


/*
|--------------------------------------------------------------------------
| PEMISAH 3D
|--------------------------------------------------------------------------
*/

.mh-menu-divider {
    width: calc(100% - 22px);
    height: 2px;

    margin: 17px 11px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(82, 153, 223, 0.28),
            rgba(255, 205, 68, 0.42),
            rgba(82, 153, 223, 0.28),
            transparent
        );

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 3px 7px rgba(0, 0, 0, 0.30);
}


/*
|--------------------------------------------------------------------------
| GAME CATEGORY 3D
|--------------------------------------------------------------------------
*/

.mh-menu-group {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(104, 174, 255, 0.22);

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 90% -20%,
            rgba(0, 148, 255, 0.19),
            transparent 120px
        ),
        linear-gradient(
            155deg,
            rgba(13, 48, 96, 0.94),
            rgba(3, 23, 53, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.30),
        0 6px 0 rgba(0, 5, 17, 0.62),
        0 11px 20px rgba(0, 0, 0, 0.28);

    transform:
        translate3d(0, 0, 0);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.mh-menu-group[open],
.mh-menu-group.mh-group-active {
    border-color:
        rgba(255, 203, 62, 0.46);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.30),
        0 7px 0 rgba(75, 41, 0, 0.65),
        0 14px 24px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(255, 191, 32, 0.09);

    transform:
        translate3d(0, -1px, 10px);
}


/*
|--------------------------------------------------------------------------
| KEPALA GAME CATEGORY
|--------------------------------------------------------------------------
*/

.mh-menu-group summary {
    position: relative;
    z-index: 2;

    display: flex;

    min-height: 50px;

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

    padding: 0 14px;

    color: #ffffff;

    cursor: pointer;

    list-style: none;

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

    user-select: none;

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

.mh-menu-group summary::-webkit-details-marker {
    display: none;
}

.mh-menu-group summary::marker {
    display: none;

    content: "";
}

.mh-menu-group summary span {
    overflow: hidden;

    min-width: 0;

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

.mh-menu-group summary small {
    display: inline-flex;

    min-width: 42px;
    min-height: 22px;

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

    padding: 0 8px;

    border:
        1px solid rgba(255, 217, 93, 0.44);

    border-radius: 999px;

    color: #ffda66;

    background:
        linear-gradient(
            180deg,
            rgba(255, 215, 91, 0.13),
            rgba(135, 74, 0, 0.08)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 3px 6px rgba(0, 0, 0, 0.24);

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

.mh-group-open-text {
    display: none !important;
}

.mh-menu-group[open] .mh-group-closed-text {
    display: none !important;
}

.mh-menu-group[open] .mh-group-open-text {
    display: inline-flex !important;
}


/*
|--------------------------------------------------------------------------
| SUBMENU 3D
|--------------------------------------------------------------------------
*/

.mh-submenu {
    display: grid;

    padding:
        8px
        10px
        12px
        18px;

    gap: 6px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.11),
            rgba(0, 0, 0, 0.22)
        );
}

.mh-submenu a {
    position: relative;

    display: flex;

    min-height: 39px;

    align-items: center;

    padding: 0 12px 0 18px;

    border:
        1px solid rgba(98, 160, 224, 0.11);

    border-radius: 10px;

    color: #a9bfd8;

    background:
        linear-gradient(
            180deg,
            rgba(15, 47, 88, 0.70),
            rgba(4, 25, 56, 0.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 3px 0 rgba(0, 4, 14, 0.52),
        0 6px 10px rgba(0, 0, 0, 0.16);

    font-size: 11px;
    font-weight: 750;

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

.mh-submenu a::before {
    position: absolute;

    top: 50%;
    left: 7px;

    width: 5px;
    height: 2px;

    content: "";

    transform:
        translateY(-50%);

    border-radius: 999px;

    background: #526f90;
}

.mh-submenu a:hover {
    border-color:
        rgba(0, 168, 255, 0.36);

    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 5px 0 rgba(0, 4, 14, 0.58),
        0 9px 15px rgba(0, 0, 0, 0.23);

    transform:
        translate3d(0, -2px, 8px);
}

.mh-submenu a:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.30),
        0 1px 0 rgba(0, 4, 14, 0.58);

    transform:
        translate3d(0, 2px, 0);
}

.mh-submenu a.mh-active {
    border-color:
        rgba(255, 205, 65, 0.50);

    color: #ffda68;

    background:
        linear-gradient(
            180deg,
            rgba(86, 59, 13, 0.78),
            rgba(42, 29, 5, 0.80)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 0 rgba(75, 41, 0, 0.67),
        0 8px 13px rgba(0, 0, 0, 0.24);
}

.mh-submenu a.mh-active::before {
    width: 7px;

    background: #ffc62e;

    box-shadow:
        0 0 7px rgba(255, 198, 46, 0.68);
}


/*
|--------------------------------------------------------------------------
| MOBILE DAN AKSESIBILITAS
|--------------------------------------------------------------------------
*/

@media (hover: none) {
    .mh-menu-link:hover,
    .mh-submenu a:hover {
        transform: none;
    }

    .mh-menu-link:active,
    .mh-submenu a:active {
        transform:
            translate3d(0, 2px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-menu-link,
    .mh-menu-group,
    .mh-submenu a {
        transition: none;
    }
}

        /*
        |--------------------------------------------------------------------------
        | Keamanan sidebar
        |--------------------------------------------------------------------------
        */

        .mh-security {
    position: static;

    display: flex;
    width: 100%;

    flex: 0 0 auto;

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

    align-items: flex-start;

    gap: 9px;

    border: 1px solid rgba(0, 202, 255, 0.27);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(0, 102, 155, 0.17),
            rgba(0, 54, 98, 0.13)
        );
}

.mh-security-icon {
    display: grid;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    place-items: center;

    border-radius: 10px;

    color: #052219;
    background: #43e89a;

    font-weight: 1000;
}

.mh-security-copy {
    display: grid;

    min-width: 0;

    gap: 3px;
}

.mh-security-copy strong {
    color: #ffffff;

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

.mh-security-copy p {
    margin: 0;

    color: #a8bdd6;

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

        body.mh-drawer-open {
            overflow: hidden;
        }

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

        @media (max-width: 560px) {
            .mh-drawer {
                left: 0;

                width: min(86vw, 335px);
                max-width: calc(100vw - 22px);
            }

            .mh-backdrop {
                right: 0;
                left: 0;

                width: 100%;

                transform: none;
            }
        }

        @media (max-width: 390px) {
            .mh-header-inner {
                grid-template-columns:
                    46px
                    minmax(100px, 1fr)
                    auto;

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

                gap: 4px;
            }

            .mh-logo {
                max-width: 150px;
                height: 54px;
            }

            .mh-logo-image {
                max-height: 49px;
            }

            

            .mh-register {
                min-width: 71px;

                padding-right: 9px;
                padding-left: 9px;

                font-size: 11px;
            }

            .mh-status-bar {
                gap: 9px;
            }

            .mh-status-item {
                font-size: 7px;
            }
        }

        @media (max-width: 340px) {
            .mh-status-item:nth-child(2) {
                display: none;
            }

            .mh-logo {
                max-width: 128px;
            }

            .mh-register {
                min-width: 64px;
            }
        }
        
        @media (max-width: 390px) {
    .mh-account-actions {
        min-width: 70px;
    }

    .mh-auth-stack {
        width: 70px;

        gap: 4px;
    }

    .mh-auth-stack a {
        min-height: 27px;

        padding-right: 5px;
        padding-left: 5px;

        border-radius: 8px;

        font-size: 9px;
    }
}

@media (max-width: 340px) {
    .mh-account-actions {
        min-width: 64px;
    }

    .mh-auth-stack {
        width: 64px;
    }

    .mh-auth-stack a {
        font-size: 8px;
    }
}
    </style>
</head>

<?php
/*
|--------------------------------------------------------------------------
| Huruf awal website untuk fallback
|--------------------------------------------------------------------------
*/

$siteInitialSource = preg_replace(
    '/[^A-Za-z0-9]/',
    '',
    (string) $siteName
);

$siteInitial = $siteInitialSource !== ''
    ? strtoupper(substr($siteInitialSource, 0, 1))
    : 'M';
?>

<body>

<div class="site-shell">

    <!-- Latar gelap sidebar -->
    <div
        class="mh-backdrop"
        id="mhBackdrop"
        hidden
    ></div>

    <!-- Sidebar -->
    <aside
        class="mh-drawer"
        id="mhDrawer"
        aria-hidden="true"
        aria-label="Menu utama"
    >
        <!-- Kepala sidebar -->
        <div class="mh-drawer-head">

            <a
                class="mh-drawer-logo"
                href="/"
                aria-label="<?= e($siteName); ?>"
            >
                <?php if ($logoExists): ?>

                    <img
                        src="<?= e($logoUrl); ?>"
                        alt="<?= e($siteName); ?>"
                        decoding="async"
                    >

                <?php else: ?>

                    <span class="mh-drawer-logo-text">
                        <?= e($siteName); ?>
                    </span>

                <?php endif; ?>
            </a>

            <button
                type="button"
                class="mh-close-button"
                id="mhCloseDrawer"
                aria-label="Tutup menu"
            >
                ×
            </button>

        </div>

        <!-- Profil pengguna -->
<div
    class="mh-profile-card <?= $isLoggedIn ? 'is-member' : 'is-guest'; ?>"
>
    <div class="mh-profile-main">

        <div class="mh-profile-avatar">

            <span>
                <?= e(
                    $isLoggedIn
                        ? $userInitial
                        : $siteInitial
                ); ?>
            </span>

            <i
                class="mh-profile-status"
                title="<?= $isLoggedIn ? 'Online' : 'Guest'; ?>"
            ></i>

        </div>

        <div class="mh-profile-copy">

            <?php if ($isLoggedIn): ?>

                <small>Selamat datang kembali</small>

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

                <span class="mh-profile-active">
                    <i></i>
                    Akun aktif
                </span>

            <?php else: ?>

                <small>Selamat datang</small>

                <strong>Halo, Pengunjung</strong>

                <span>
                    Masuk untuk mengakses akun
                </span>

            <?php endif; ?>

        </div>

        <a
            class="mh-profile-arrow"
            href="<?= $isLoggedIn ? 'account.php' : 'login.php'; ?>"
            aria-label="<?= $isLoggedIn ? 'Buka akun' : 'Masuk'; ?>"
        >
            ›
        </a>

    </div>

    <?php if ($isLoggedIn): ?>

        <div class="mh-profile-balance">

            <div>
                <small>Saldo utama</small>

                <strong>
                    IDR <?= e($userBalance); ?>
                </strong>
            </div>

            <a href="deposit.php">
                + Deposit
            </a>

        </div>

    <?php else: ?>

        <div class="mh-profile-actions">

            <a
                class="mh-profile-login"
                href="login.php"
            >
                Login
            </a>

            <a
                class="mh-profile-register"
                href="register.php"
            >
                Register
            </a>

        </div>

    <?php endif; ?>

</div>

       <?php
/*
|--------------------------------------------------------------------------
| Menu game yang membuka submenu otomatis
|--------------------------------------------------------------------------
*/

$gameCategoryMenus = [
    'slot',
    'casino',
    'togel',
    'poker',
    'sport',
    'fishing',
    'interactive',
    'sabung-ayam',
];

$isGameCategoryActive = in_array(
    $activeMenu,
    $gameCategoryMenus,
    true
);
?>

<!-- Menu sidebar tetap hardcode -->
<nav
    class="mh-drawer-menu"
    aria-label="Navigasi utama"
>
    <div class="mh-menu-section">

        <span class="mh-menu-section-title">
            Menu Utama
        </span>

        <a
            class="mh-menu-link <?= $activeMenu === 'home' ? 'mh-active' : ''; ?>"
            href="/"
            <?= $activeMenu === 'home' ? 'aria-current="page"' : ''; ?>
        >
            <span class="mh-menu-text">
                Home
            </span>
        </a>

        <a
            class="mh-menu-link <?= $activeMenu === 'promo' ? 'mh-active' : ''; ?>"
            href="promo.php"
            <?= $activeMenu === 'promo' ? 'aria-current="page"' : ''; ?>
        >
            <span class="mh-menu-text">
                Promosi
            </span>
        </a>

        <a
            class="mh-menu-link <?= $activeMenu === 'event' ? 'mh-active' : ''; ?>"
            href="event.php"
            <?= $activeMenu === 'event' ? 'aria-current="page"' : ''; ?>
        >
            <span class="mh-menu-text">
                Event
            </span>
        </a>

    </div>

    <div class="mh-menu-divider"></div>

    <details
        class="mh-menu-group <?= $isGameCategoryActive ? 'mh-group-active' : ''; ?>"
        <?= $isGameCategoryActive ? 'open' : ''; ?>
    >
        <summary>
            <span>Game Category</span>

            <small class="mh-group-closed-text">
                Buka
            </small>

            <small class="mh-group-open-text">
                Tutup
            </small>
        </summary>

        <div class="mh-submenu">

            <a
                class="<?= $activeMenu === 'slot' ? 'mh-active' : ''; ?>"
                href="slot.php"
                <?= $activeMenu === 'slot' ? 'aria-current="page"' : ''; ?>
            >
                Slot
            </a>

            <a
                class="<?= $activeMenu === 'casino' ? 'mh-active' : ''; ?>"
                href="live-casino.php"
                <?= $activeMenu === 'casino' ? 'aria-current="page"' : ''; ?>
            >
                Casino
            </a>

            <a
                class="<?= $activeMenu === 'togel' ? 'mh-active' : ''; ?>"
                href="togel.php"
                <?= $activeMenu === 'togel' ? 'aria-current="page"' : ''; ?>
            >
                Togel
            </a>

            <a
                class="<?= $activeMenu === 'poker' ? 'mh-active' : ''; ?>"
                href="poker.php"
                <?= $activeMenu === 'poker' ? 'aria-current="page"' : ''; ?>
            >
                Poker
            </a>

            <a
                class="<?= $activeMenu === 'sport' ? 'mh-active' : ''; ?>"
                href="sport.php"
                <?= $activeMenu === 'sport' ? 'aria-current="page"' : ''; ?>
            >
                Sport
            </a>

            <a
                class="<?= $activeMenu === 'fishing' ? 'mh-active' : ''; ?>"
                href="fishing.php"
                <?= $activeMenu === 'fishing' ? 'aria-current="page"' : ''; ?>
            >
                Fishing
            </a>

            <a
                class="<?= $activeMenu === 'interactive' ? 'mh-active' : ''; ?>"
                href="interactive.php"
                <?= $activeMenu === 'interactive' ? 'aria-current="page"' : ''; ?>
            >
                Interactive
            </a>

            <a
                class="<?= $activeMenu === 'sabung-ayam' ? 'mh-active' : ''; ?>"
                href="sambung-ayam.php"
                <?= $activeMenu === 'sabung-ayam' ? 'aria-current="page"' : ''; ?>
            >
                Sabung Ayam
            </a>

        </div>

    </details>



<div class="mh-menu-divider"></div>

<div class="mh-menu-section">

    <span class="mh-menu-section-title">
        Informasi
    </span>

    <a
        class="mh-menu-link <?= $activeMenu === 'tentang-kami' ? 'mh-active' : ''; ?>"
        href="tentang-kami.php"
        <?= $activeMenu === 'tentang-kami' ? 'aria-current="page"' : ''; ?>
    >
        <span class="mh-menu-text">
            Tentang Kami
        </span>
    </a>

    <a
        class="mh-menu-link <?= $activeMenu === 'faq' ? 'mh-active' : ''; ?>"
        href="faq.php"
        <?= $activeMenu === 'faq' ? 'aria-current="page"' : ''; ?>
    >
        <span class="mh-menu-text">
            FAQ
        </span>
    </a>

    <a
        class="mh-menu-link <?= $activeMenu === 'peraturan' ? 'mh-active' : ''; ?>"
        href="peraturan.php"
        <?= $activeMenu === 'peraturan' ? 'aria-current="page"' : ''; ?>
    >
        <span class="mh-menu-text">
            Peraturan
        </span>
    </a>

    <a
        class="mh-menu-link <?= $activeMenu === 'bantuan' ? 'mh-active' : ''; ?>"
        href="bantuan.php"
        <?= $activeMenu === 'bantuan' ? 'aria-current="page"' : ''; ?>
    >
        <span class="mh-menu-text">
            Bantuan
        </span>
    </a>
   <?php if ($isLoggedIn): ?>

    <a
        class="mh-menu-link <?= $activeMenu === 'logout'
            ? 'mh-active'
            : ''; ?>"
        href="logout.php"
        <?= $activeMenu === 'logout'
            ? 'aria-current="page"'
            : ''; ?>
        onclick="
            return confirm(
                'Apakah Anda yakin ingin keluar dari akun?'
            );
        "
    >
        <span class="mh-menu-text">
            Logout
        </span>
    </a>

<?php endif; ?>

</div>






</nav>

        <!-- Informasi keamanan -->
        <div class="mh-security">

            <span class="mh-security-icon">
                ✓
            </span>

            <div class="mh-security-copy">

                <strong>
                    Keamanan akun
                </strong>

                <p>
                    Jangan pernah memberikan password atau
                    kode OTP kepada siapa pun.
                </p>

            </div>

        </div>

    </aside>
    
    
    
    
    
    

    <!-- Header utama -->
<header class="mh-header">

    <div class="mh-header-inner">

        <!-- Tombol menu kiri -->
        <button
            type="button"
            class="mh-menu-button"
            id="mhOpenDrawer"
            aria-label="Buka menu"
            aria-controls="mhDrawer"
            aria-expanded="false"
        >
            <i></i>
            <i></i>
            <i></i>

            <small>Menu</small>
        </button>

        <!-- Logo tengah -->
        <a
            class="mh-logo"
            href="/"
            aria-label="<?= e($siteName); ?>"
        >
            <?php if ($logoExists): ?>

                <img
                    class="mh-logo-image"
                    src="<?= e($logoUrl); ?>"
                    alt="<?= e($siteName); ?>"
                    loading="eager"
                    decoding="async"
                    fetchpriority="high"
                >

            <?php else: ?>

                <span class="mh-logo-fallback">

                    <span class="mh-logo-fallback-icon">
                        <?= e($siteInitial); ?>
                    </span>

                    <span class="mh-logo-fallback-copy">

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

                        <small>
                            Aman • Cepat • Terpercaya
                        </small>

                    </span>

                </span>

            <?php endif; ?>
        </a>

        <!-- Akun kanan -->
        <div class="mh-account-actions">

            <?php if ($isLoggedIn): ?>

                <a
                    class="mh-account-box"
                    href="account.php"
                    aria-label="Buka akun <?= e($username); ?>"
                >
                    <span class="mh-account-avatar">
                        <?= e($userInitial); ?>
                    </span>

                    <span class="mh-account-copy">

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

                        <strong>
                            IDR <?= e($userBalance); ?>
                        </strong>

                    </span>
                </a>

            <?php else: ?>

                <div class="mh-auth-stack">

                    <a
                        class="mh-login"
                        href="login.php"
                    >
                        Login
                    </a>

                    <a
                        class="mh-register"
                        href="register.php"
                    >
                        Register
                    </a>

                </div>

            <?php endif; ?>

        </div>

    </div>

   <!-- Informasi berjalan bawah header -->
<div
    class="mh-marquee"
    aria-label="Informasi sistem"
>
    <div class="mh-marquee-window">

        <span
            class="mh-marquee-text"
            style="animation-duration: <?= (int) $headerMarqueeSpeed; ?>s;"
        >
            <i class="mh-marquee-dot"></i>

            <?= e($headerMarqueeText); ?>

            <i class="mh-marquee-dot"></i>
        </span>

    </div>
</div>

</header>
    <main class="site-main">

    <!-- JavaScript khusus header/sidebar -->
    <script>
        (function () {
            'use strict';

            var drawer = document.getElementById(
                'mhDrawer'
            );

            var backdrop = document.getElementById(
                'mhBackdrop'
            );

            var openButton = document.getElementById(
                'mhOpenDrawer'
            );

            var closeButton = document.getElementById(
                'mhCloseDrawer'
            );

            function openDrawer() {
                if (
                    !drawer ||
                    !backdrop ||
                    !openButton
                ) {
                    return;
                }

                drawer.classList.add('mh-open');

                drawer.setAttribute(
                    'aria-hidden',
                    'false'
                );

                openButton.setAttribute(
                    'aria-expanded',
                    'true'
                );

                backdrop.hidden = false;

                document.body.classList.add(
                    'mh-drawer-open'
                );
            }

            function closeDrawer() {
                if (
                    !drawer ||
                    !backdrop ||
                    !openButton
                ) {
                    return;
                }

                drawer.classList.remove('mh-open');

                drawer.setAttribute(
                    'aria-hidden',
                    'true'
                );

                openButton.setAttribute(
                    'aria-expanded',
                    'false'
                );

                backdrop.hidden = true;

                document.body.classList.remove(
                    'mh-drawer-open'
                );
            }

            if (openButton) {
                openButton.addEventListener(
                    'click',
                    openDrawer
                );
            }

            if (closeButton) {
                closeButton.addEventListener(
                    'click',
                    closeDrawer
                );
            }

            if (backdrop) {
                backdrop.addEventListener(
                    'click',
                    closeDrawer
                );
            }

            document.addEventListener(
                'keydown',
                function (event) {
                    if (event.key === 'Escape') {
                        closeDrawer();
                    }
                }
            );
        }());
    </script>
<style>
    /*
|--------------------------------------------------------------------------
| Marquee bawah header
|--------------------------------------------------------------------------
*/

.mh-marquee {
    position: relative;
    z-index: 3;

    display: flex;

    width: 100%;
    height: 27px;

    align-items: center;

    overflow: hidden;

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

    border-bottom:
        1px solid rgba(0, 145, 255, 0.20);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 132, 255, 0.17),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            rgba(5, 24, 57, 0.98),
            rgba(1, 10, 28, 0.99)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mh-marquee-window {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.mh-marquee-text {
    position: absolute;

    top: 0;
    left: 0;

    display: inline-flex;

    min-width: max-content;
    height: 100%;

    align-items: center;

    padding-left: 100%;

    gap: 9px;

    color: #eaf5ff;

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

    letter-spacing: 0.035em;

    line-height: 27px;

    white-space: nowrap;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.90),
        0 0 6px rgba(0, 145, 255, 0.22);

    animation-name: mh-marquee-running;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mh-marquee-dot {
    display: block;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #d8ff87,
            #85ee08 48%,
            #127303 100%
        );

    box-shadow:
        0 0 5px rgba(133, 238, 8, 0.95),
        0 0 10px rgba(133, 238, 8, 0.45);
}

@keyframes mh-marquee-running {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/*
|--------------------------------------------------------------------------
| Berhenti sementara saat diarahkan mouse
|--------------------------------------------------------------------------
*/

.mh-marquee:hover .mh-marquee-text {
    animation-play-state: paused;
}

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

@media (max-width: 390px) {
    .mh-marquee {
        height: 25px;
    }

    .mh-marquee-text {
        font-size: 8px;
        line-height: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-marquee-text {
        position: static;

        width: 100%;
        min-width: 0;

        justify-content: center;

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

        overflow: hidden;

        text-overflow: ellipsis;

        animation: none;
    }
}
</style>
    <main class="site-main">