@extends('layout.desktop.main')
@section('content')
    <style>
        .slot-showcase__grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .game-item__img {
            width: 100%;
            height: auto;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .game-item__wrapper:hover .game-item__img {
            transform: scale(1.05);
        }

        .game-item__name {
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            margin-top: 10px;
        }

        .carousel__container {
            display: flex;
            transition: transform 0.3s ease;
            /* Smooth transition for sliding */
            will-change: transform;
        }

        .carousel__item {
            flex: 0 0 auto;
            /* Prevent items from shrinking or growing */
        }

        .arcade-carousel__img-container img {
            width: 80px;
            height: auto;
            object-fit: cover;
            transition: transform 0.3s ease;
            margin: 0 15px;
        }

        .arcade-carousel__item span {
            display: block;
            margin-top: 5px;
            font-size: 0.9rem;
            font-weight: bold;
            text-align: center;
        }
    </style>
    <main>
        <div class="container">
            @include('layout.desktop.running_text')
            <section class="home home--d">
                <div class="home-carousel">
                    <div class="slick-slider">
                        @foreach ($banner as $banner)
                            <div class="xxx">
                                <a href="{{ $banner->link ?? '#' }}">
                                    <img src="{{ asset('storage/' . $banner->img) }}" loading="lazy" class="slide"
                                        alt="{{ $banner->title }}">
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const slides = document.querySelectorAll('.xxx'); // Get all the slide elements
                        let currentIndex = 0;
                        const totalSlides = slides.length;
                        const slideDuration = 5000; // Duration of each slide in milliseconds (3 seconds)

                        // Initially, show the first slide and hide others
                        slides.forEach((slide, index) => {
                            if (index !== 0) {
                                slide.style.display = 'none';
                            }
                        });

                        // Function to show the next slide
                        function showNextSlide() {
                            slides[currentIndex].style.display = 'none'; // Hide the current slide
                            currentIndex = (currentIndex + 1) % totalSlides; // Move to the next slide
                            slides[currentIndex].style.display = 'block'; // Show the new slide
                        }

                        // Set up the interval to automatically change slides
                        setInterval(showNextSlide, slideDuration);
                    });
                </script>
                <div class="idn-carousel home--columns-1">
                    <div dir="ltr" class="slick-slider slick-initialized" data-v-3d1a4f76>
                        <div class="slick-list" data-v-3d1a4f76>
                            <div class="slick-track" style="width:700%;left:-100%;" data-v-e4caeaf8 data-v-3d1a4f76>
                                <div tabIndex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned"
                                    style="width:14.285714285714286%;" data-v-e4caeaf8></div>
                                <div tabIndex="-1" data-index="0" aria-hidden="false"
                                    class="slick-slide slick-active slick-current"
                                    style="outline:none;width:14.285714285714286%;" data-v-e4caeaf8>
                                    <div data-v-e4caeaf8><a href="/poker" tabIndex="-1" class="idn-carousel__slide"
                                            style="width:100%;display:inline-block;"><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/default/idn/idn-poker.jpg"
                                                alt="IDN Poker"></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="idn-carousel__special"><img
                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgd2lkdGg9IjQ4MS40NzMxMW1tIgogICBoZWlnaHQ9Ijg2LjAzMDM4bW0iCiAgIHZpZXdCb3g9IjAgMCA0ODEuNDczMTEgODYuMDMwMzgxIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc4Ij4KICA8ZGVmcwogICAgIGlkPSJkZWZzMiIgLz4KICA8ZwogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY1LjQ3MTUxLC0xNi43OTI0MTYpIj4KICAgIDxwYXRoCiAgICAgICBpZD0icmVjdDg1OCIKICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZjE5MDIxO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvOyIKICAgICAgIGQ9Im0gLTEwMC4zNjAzNCwxNy4wNjc2NzcgLTY0LjU1ODM0LDg1LjQ3OTg2MyBIIDMxNS40NDg3NiBMIDI1MC44OTA0MiwxNy4wNjc2NzcgWiIgLz4KICA8L2c+Cjwvc3ZnPgo="
                            alt="IDN Special"> <span>Spesial</span></div>
                </div>
                <div class="home__teaser">
                    <a href="/promotion" class="btn btn--flex btn--accent-secondary" data-v-1272be00>
                        <i class="fas fa-gift" data-v-0e010622 data-v-1272be00></i>
                        Promosi
                    </a>
                    @if (Auth::check())
                        <a href="/activity" class="btn btn--flex btn--accent" data-v-1272be00>
                            <i class="fas fa-clock" data-v-0e010622 data-v-1272be00></i>
                            History
                        </a>
                        <a href="/deposit" class="btn btn--flex btn--success" data-v-1272be00>
                            <i class="fas fa-wallet " data-v-0e010622 data-v-1272be00></i>
                            Deposit
                        </a>
                    @else
                        <a href="/registerasi" class="btn btn--flex btn--brand" data-v-1272be00>
                            <i class="fas fa-user-plus " data-v-0e010622 data-v-1272be00></i>
                            Daftar
                        </a>
                        <button class="app-button btn btn--flex btn--accent" id="openModalBtn">
                            <i class="fas fa-sign-in-alt" data-v-0e010622></i>
                            <span>Masuk</span>
                        </button>
                    @endif

                </div>
                <nav class="app-breadcrumbs home--full-width app-breadcrumbs--d">
                    <ul>
                        <li data-pos="start" class="nav-observer"></li>
                        <li class="nav-item nav-item--home"><a href="/" aria-current="page" name="Beranda"
                                class="app-link--exact-active app-link--active app-link--exact-active">
                                Beranda
                            </a></li> <!---->
                        <li class="nav-item"><a href="/slot" name="Slots">
                                Slots
                            </a></li>
                        <li class="nav-item"><a href="/casino" name="Casino">
                                Casino
                            </a></li>
                        <li class="nav-item"><a href="/sports" name="Sports+">
                                Sports+
                            </a></li>
                        <li class="nav-item"><a href="/poker" name="Poker">
                                Poker
                            </a></li>
                        <li class="nav-item"><a href="/lottery" name="Lotto">
                                Lottery
                            </a></li>
                        <li class="nav-item"><a href="/fishing" name="Fishing">
                                Fishing
                            </a></li>
                        <li class="nav-item"><a href="/fishing" name="Arcade">
                                Arcade
                            </a></li>
                        <li class="nav-item"><a href="/promotion" name="Promosi">
                                Promosi
                            </a></li>
                        <li data-pos="end" class="nav-observer"></li>
                    </ul>
                </nav>

                <section class="slot-showcase home--full-width" data-v-3577ffb1>
                    <ul class="slot-showcase__grid" data-v-3577ffb1>
                        <li title="Almighty Athena Empire"
                            class="game-item__wrapper game--promo game--new game-item--normal-view" data-v-bb0c4606
                            data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/athena.jpg"
                                        alt="athena" class="game-item__img">

                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Almighty Athena Empire" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/microgaming.svg"
                                                alt="Microgaming" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Almighty Athena
                                    Empire</span>
                            </a> <!----> <!----></li>
                        <li title="Stockholm Syndrome"
                            class="game-item__wrapper game--promo game--new game-item--normal-view" data-v-bb0c4606
                            data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/stockholm.jpg"
                                        alt="stockholm" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Stockholm Syndrome" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/evolution-nlc.svg"
                                                alt="Nolimit City" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Stockholm
                                    Syndrome</span>
                            </a> <!----> <!----></li>
                        <li title="Spin Royal Queen"
                            class="game-item__wrapper game--promo game--new game-item--normal-view" data-v-bb0c4606
                            data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/spin royal.jpg"
                                        alt="spin royal" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="../../image/spin royal.jpg" alt="Spin Royal Queen" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/microgaming.svg"
                                                alt="Microgaming" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Spin Royal
                                    Queen</span>
                            </a> <!----> <!----></li>
                        <li title="Ufuk the Turk" class="game-item__wrapper game--promo game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/ufuk.jpg"
                                        alt="ufuk" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Ufuk the Turk" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/pragmaticplay.svg"
                                                alt="PragmaticPlay" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Ufuk the Turk</span>
                            </a> <!----> <!----></li>
                        <li title="Outsourced" class="game-item__wrapper game--promo game--new game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/sourced.jpg"
                                        alt="sourced" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Outsourced" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/evolution-nlc.svg"
                                                alt="Nolimit City" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Outsourced</span>
                            </a> <!----> <!----></li>
                        <li title="Tiger Cops" class="game-item__wrapper game--promo game--new game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/tiger.jpg"
                                        alt="tiger" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Tiger Cops" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/idnslot.svg"
                                                alt="IDNSLOT" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Tiger Cops</span>
                            </a> <!----> <!----></li>
                        <li title="Gem Elevator" class="game-item__wrapper game--promo game--new game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/gem.jpg"
                                        alt="gem" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Gem Elevator" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/pragmaticplay.svg"
                                                alt="PragmaticPlay" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Gem Elevator</span>
                            </a> <!----> <!----></li>
                        <li title="Lucky Lucky Level UP"
                            class="game-item__wrapper game--promo game--new game-item--normal-view" data-v-bb0c4606
                            data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/lucky.jpg"
                                        alt="lucky" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Lucky Lucky Level UP" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/habanero.svg"
                                                alt="Habanero" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Lucky Lucky Level
                                    UP</span>
                            </a> <!----> <!----></li>
                        <li title="Dragon Gold 88" class="game-item__wrapper game--promo game--new game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/dragon.jpg"
                                        alt="dragon" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Dragon Gold 88" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/pragmaticplay.svg"
                                                alt="PragmaticPlay" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Dragon Gold 88</span>
                            </a> <!----> <!----></li>
                        <li title="FOR THE HORDE" class="game-item__wrapper game--new game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/horde.jpg"
                                        alt="horde" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="FOR THE HORDE" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/playstar.svg"
                                                alt="PlayStar" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>FOR THE HORDE</span>
                            </a> <!----> <!----></li>
                        <li title="Power of Odin" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/odin.jpg"
                                        alt="odin" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Power of Odin" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/idnslot.svg"
                                                alt="IDNSLOT" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Power of Odin</span>
                            </a> <!----> <!----></li>
                        <li title="Gates of Olympus 1000" class="game-item__wrapper game--promo game-item--normal-view"
                            data-v-bb0c4606 data-v-3577ffb1><a href="/slot" target="_blank" data-v-bb0c4606>
                                <div class="game-item game-item--slot" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/zeus.jpg"
                                        alt="zeus" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Gates of Olympus 1000" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/slot/pragmaticplay.svg"
                                                alt="PragmaticPlay" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Gates of Olympus
                                    1000</span>
                            </a> <!----> <!----></li>
                    </ul>
                </section>
                <article class="card home--columns-2 card--d card--full card--light">
                    <header class="card__header">
                        <div class="card__title"><a href="/casino"><img alt="Casino" src="../../image/casino.svg"
                                    class="brand-icon brand-icon--md">
                                <span>Casino</span></a></div> <a href="/casino" class="btn--sm btn--flex card__see-all">
                            Lihat semua
                        </a>
                    </header>
                    <div class="card__body">
                        <div class="casino-home" data-v-ec98dc5a>
                            <ul data-v-ec98dc5a>
                                <li data-flag="" class="casino-home__item" data-v-ec98dc5a><a data-v-ec98dc5a
                                        href="/casino">
                                        <div data-v-ec98dc5a><img loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/evolution.png"
                                                alt="Evolution" data-v-ec98dc5a> <!----></div> <span
                                            class="casino-home__name" data-v-ec98dc5a>Evolution</span>
                                    </a></li>
                                <li data-flag="Spesial" class="casino-home__item casino-home__item--special"
                                    data-v-ec98dc5a><a data-v-ec98dc5a href="/casino">
                                        <div data-v-ec98dc5a><img loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/idnlive.png"
                                                alt="IDNLIVE" data-v-ec98dc5a> <!----></div> <span
                                            class="casino-home__name" data-v-ec98dc5a>IDNLIVE</span>
                                    </a></li>
                                <li data-flag="" class="casino-home__item" data-v-ec98dc5a><a data-v-ec98dc5a
                                        href="/casino">
                                        <div data-v-ec98dc5a><img loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/pragmaticplay.png"
                                                alt="PragmaticPlay" data-v-ec98dc5a> <!----></div> <span
                                            class="casino-home__name" data-v-ec98dc5a>PragmaticPlay</span>
                                    </a></li>
                                <li data-flag="New" class="casino-home__item casino-home__item--new" data-v-ec98dc5a><a
                                        data-v-ec98dc5a href="/casino">
                                        <div data-v-ec98dc5a><img loading="lazy"
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/casino/mg_live_grand.png"
                                                alt="MG Live Grand" data-v-ec98dc5a> <!----></div> <span
                                            class="casino-home__name" data-v-ec98dc5a>MG Live Grand</span>
                                    </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card__cta"><a href="/casino" class="btn btn--flex btn--brand">
                            Main Casino
                        </a></div> <!----> <!---->
                </article> <!----> <!---->
                <article class="card card--arcade-carousel card--d card--inline card--light home--full-width">
                    <div class="card__title"><a href="/slot"><img alt="Arcade" src="../../image/slot-mania.svg"
                                class="brand-icon brand-icon--md">
                            <span>Slots</span></a></div>
                    <div class="card__body">
                        <div class="carousel arcade-carousel carousel--d arcade-carousel--dark arcade-carousel--d"
                            data-v-4f72f8a2 data-v-d5c9b2f2>
                            <div class="carousel__control carousel__prev2 carousel__control--disabled" data-v-4f72f8a2> <i
                                    class="fas fa-chevron-left" data-v-0e010622 data-v-4f72f8a2></i></div>
                            <div class="carousel__inner" data-v-4f72f8a2>
                                <div class="carousel__container transition" style="transform:translateX(0px);"
                                    data-v-4f72f8a2>
                                    <a href="/slot/pragmaticplay" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container provider--promo" data-v-a03b2110>
                                            <img src="../../image/pragmatic.png" alt="PragmaticPlay" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>PragmaticPlay</span>
                                    </a>
                                    <a href="/slot/habanero" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container provider--promo" data-v-a03b2110>
                                            <img src="../../image/habanero.png" alt="Habanero" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>Habanero</span>
                                    </a>
                                    <a href="/slot/pgsoft" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container" data-v-a03b2110>
                                            <img src="../../image/pgsoft.png" alt="PG Soft" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>PG Soft</span>
                                    </a>
                                    <a href="/slot" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container" data-v-a03b2110>
                                            <img src="../../image/ttg.png" alt="PG Soft" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>Toptrend</span>
                                    </a>
                                    <a href="/slot" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container" data-v-a03b2110>
                                            <img src="../../image/evoplay.png" alt="PG Soft" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>Evoplay</span>
                                    </a>
                                    <a href="/slot" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container" data-v-a03b2110>
                                            <img src="../../image/booongo.png" alt="PG Soft" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>Booongo</span>
                                    </a>
                                    <a href="/slot" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container" data-v-a03b2110>
                                            <img src="../../image/playson.png" alt="PG Soft" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>Playson</span>
                                    </a>
                                    <a href="/slot" class="arcade-carousel__item" data-v-a03b2110>
                                        <div class="arcade-carousel__img-container" data-v-a03b2110>
                                            <img src="../../image/dreamgaming.png" alt="PG Soft" data-v-a03b2110>
                                        </div>
                                        <span data-v-a03b2110>Dreamtech</span>
                                    </a>
                                </div>
                            </div>
                            <div class="carousel__control carousel__next2" data-v-4f72f8a2> <i
                                    class="fas fa-chevron-right" data-v-0e010622 data-v-4f72f8a2></i>
                            </div>
                        </div>
                    </div> <a href="/slot" class="btn--flex btn--sm card__see-all">
                        Lihat semua
                    </a> <!---->
                </article>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const prevButton = document.querySelector('.carousel__prev2');
                        const nextButton = document.querySelector('.carousel__next2');
                        const container = document.querySelector('.carousel__container');
                        let scrollAmount = 0;
                        const scrollStep = 300; // Jarak yang digeser setiap klik

                        nextButton.addEventListener('click', function() {
                            if (scrollAmount < container.scrollWidth - container.clientWidth) {
                                scrollAmount += scrollStep;
                                container.style.transform = `translateX(-${scrollAmount}px)`;
                                prevButton.classList.remove('carousel__control--disabled');
                            }
                            if (scrollAmount >= container.scrollWidth - container.clientWidth) {
                                nextButton.classList.add('carousel__control--disabled');
                            }
                        });

                        prevButton.addEventListener('click', function() {
                            if (scrollAmount > 0) {
                                scrollAmount -= scrollStep;
                                container.style.transform = `translateX(-${scrollAmount}px)`;
                                nextButton.classList.remove('carousel__control--disabled');
                            }
                            if (scrollAmount <= 0) {
                                prevButton.classList.add('carousel__control--disabled');
                            }
                        });
                    });
                </script>

                <section class="arcade-showcase home--full-width" data-v-1686e7e2>
                    <ul class="arcade-showcase__grid" data-v-1686e7e2>
                        <li title="Spaceman™" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-1686e7e2><a data-v-bb0c4606 href="/casino">
                                <div class="game-item game-item--arcade" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/spaceman.jpg"
                                        alt="spaceman" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Spaceman™" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/arcade/pragmaticplay_arcade.svg"
                                                alt="PragmaticPlay" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Spaceman™</span>
                            </a> <!----> <!----></li>
                        <li title="Plinko" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-1686e7e2><a target="_blank" data-v-bb0c4606 href="/lottery">
                                <div class="game-item game-item--arcade" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/plinko.png"
                                        alt="plinko" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Plinko" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/arcade/originals.svg"
                                                alt="Kong Original" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Plinko</span>
                            </a> <!----> <!----></li>
                        <li title="Big Bass Crash" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-1686e7e2><a data-v-bb0c4606 href="/casino">
                                <div class="game-item game-item--arcade" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/bigbash.jpg"
                                        alt="bigbash" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Big Bass Crash" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/arcade/pragmaticplay_arcade.svg"
                                                alt="PragmaticPlay" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Big Bass Crash</span>
                            </a> <!----> <!----></li>
                        <li title="Monster Plinko" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-1686e7e2><a data-v-bb0c4606 href="/lottery">
                                <div class="game-item game-item--arcade" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/rock.png"
                                        alt="sourced" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Monster Plinko" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/arcade/originals.svg"
                                                alt="Kong Original" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Rock Plinko</span>
                            </a> <!----> <!----></li>
                        <li title="Limbo" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-1686e7e2><a data-v-bb0c4606 href="/lottery">
                                <div class="game-item game-item--arcade" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/limbo.png"
                                        alt="sourced" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="Limbo" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/arcade/originals.svg"
                                                alt="Kong Original" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>Limbo</span>
                            </a> <!----> <!----></li>
                        <li title="FlyX" class="game-item__wrapper game-item--normal-view" data-v-bb0c4606
                            data-v-1686e7e2><a data-v-bb0c4606 href="/fishing">
                                <div class="game-item game-item--arcade" data-v-bb0c4606>
                                    <div class="game-item__skeleton"></div> <!----> <img src="../../image/flyx.jpg"
                                        alt="flyx" class="game-item__img">
                                    <div class="game-item__placeholder" data-v-bb0c4606><img
                                            src="https://dmwl0ca1bvnm.cloudfront.net/89/logo/game-placeholder.svg"
                                            alt="FlyX" data-v-bb0c4606></div>
                                    <div class="game-item__provider" data-v-bb0c4606>
                                        <div data-v-bb0c4606><img
                                                src="https://dmwl0ca1bvnm.cloudfront.net/common/dark/arcade/microgaming_arcade.svg"
                                                alt="Microgaming" data-v-bb0c4606></div>
                                    </div>
                                </div> <span class="game-item__name" data-v-bb0c4606>FlyX</span>
                            </a> <!----> <!----></li>
                    </ul>
                </section>
                <article class="card home--columns-1 card--d card--full card--light">
                    <header class="card__header">
                        <div class="card__title"><a href="/sports"><img alt="Sports+" src="../../image/sports.svg"
                                    class="brand-icon brand-icon--md">
                                <span>Sports+</span></a></div> <a href="/sports" class="btn--sm btn--flex card__see-all">
                            Lihat semua
                        </a>
                    </header>
                    <div class="card__body"><a href="/sports"><img loading="lazy"
                                src="https://dmwl0ca1bvnm.cloudfront.net/common/default/sport.png" alt="Sports+"
                                class="card__image"></a></div>
                    <div class="card__cta"><a href="/sports" class="btn btn--flex btn--brand">
                            Main Sports+
                        </a></div> <!----> <!---->
                </article> <!---->
                <article class="card home--columns-1 card--d card--full card--light">
                    <header class="card__header">
                        <div class="card__title"><a href="/lottery"><img alt="Lotto" src="../../image/lottery.svg"
                                    class="brand-icon brand-icon--md">
                                <span>Lotto</span></a></div> <a href="/lotto" class="btn--sm btn--flex card__see-all">
                            Lihat semua
                        </a>
                    </header>
                    <div class="card__body"><a href="/lottery"><img
                                src="https://dmwl0ca1bvnm.cloudfront.net/common/default/lotto.png" alt="Lotto"
                                loading="lazy" class="card__image"></a></div>
                    <div class="card__cta"><a href="/lotto" class="btn btn--flex btn--brand">
                            Main Lotto
                        </a></div> <!----> <!---->
                </article>
                <article class="card home--columns-1 card--d card--full card--light">
                    <header class="card__header">
                        <div class="card__title"><a href="/poker"><img alt="Poker" src="../../image/poker.svg"
                                    class="brand-icon brand-icon--md">
                                <span>Poker</span></a></div> <a href="/poker" class="btn--sm btn--flex card__see-all">
                            Lihat semua
                        </a>
                    </header>
                    <div class="card__body"><a href="/poker"><img
                                src="https://dmwl0ca1bvnm.cloudfront.net/common/default/poker.png" alt="Poker"
                                loading="lazy" class="card__image"></a></div>
                    <div class="card__cta"><a href="/poker" class="btn btn--flex btn--brand">
                            Main Poker
                        </a></div> <!----> <!---->
                </article>
                <article class="card home--columns-1 card--d card--full card--light">
                    <header class="card__header">
                        <div class="card__title"><a href="/fishing"><img alt="Fishing" src="../../image/fishing.svg"
                                    class="brand-icon brand-icon--md">
                                <span>Fishing</span></a></div> <a href="/fishing" class="btn--sm btn--flex card__see-all">
                            Lihat semua
                        </a>
                    </header>
                    <div class="card__body"><a href="/fishing"><img
                                src="https://dmwl0ca1bvnm.cloudfront.net/common/default/fishing.png" alt="Fishing"
                                loading="lazy" class="card__image"></a></div>
                    <div class="card__cta"><a href="/fishing" class="btn btn--flex btn--brand">
                            Main Fishing
                        </a></div> <!----> <!---->
                </article>
            </section>
        </div>
    </main>


    <style>
        .login__extra {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin: 10px 0;

        }

        .login__extra a {
            color: black;
            text-decoration: none;
        }

        .login__extra a:hover {
            text-decoration: underline;
        }
    </style>


    <div data-v-5f889253="" class="modal" id="loginModal" style="display: none">
        <div data-v-5f889253="" class="modal__backdrop" id="modalBackdrop"></div>
        <div data-v-5f889253="" class="modal__root">
            <div data-v-5f889253="" class="modal__surface surface modal__surface--inverse">
                <header data-v-5f889253="" class="modal__header">
                    <h3 data-v-5f889253="">Masuk</h3>
                </header>
                <section data-v-5f889253="" class="modal__body">
                    <div data-v-5f889253="" class="login__container">
                        <form class="login__form" action="/login" method="post">
                            @csrf
                            <div class="input__container">
                                <div class="input__root">
                                    <input type="text" autocomplete="off" placeholder="Username"
                                        class="input input--inverse" name="username">
                                    <i class="input__icon fas fa-user fa-xs"></i>
                                </div>
                            </div>
                            <div class="input__container input__password">
                                <div class="input__root">
                                    <input type="password" autocomplete="off" placeholder="Password"
                                        class="input input--inverse" name="password">
                                    <button type="button" class="input__icon input__icon--pv btn--flex">
                                        <i class="input__icon fas fa-eye-slash fa-xs" style="margin-left: -25px;"></i>
                                    </button>
                                    <i class="input__icon fas fa-key fa-xs"></i>
                                </div>
                            </div>
                            <button type="submit" class="btn btn--accent btn--block">
                                <span>Masuk</span>
                            </button>
                        </form>
                        <div class="login__extra">
                            <a href="/forgot-password">Lupa Password?</a>
                            <a href="/registerasi">Buat Akun</a>
                        </div>
                    </div>
                </section>
            </div>

            <button data-v-5f889253="" type="button" class="btn--flex btn--round--sm modal__close modal__close--inverse"
                id="closeModalBtn">
                <i class="fas fa-times-circle"></i>
            </button>
        </div>
    </div>

    <script>
        const openModalBtn = document.getElementById('openModalBtn');
        const loginModal = document.getElementById('loginModal');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const modalBackdrop = document.getElementById('modalBackdrop');

        openModalBtn.addEventListener('click', function() {
            loginModal.style.display = '';
        });

        closeModalBtn.addEventListener('click', function() {
            loginModal.style.display = 'none';
        });

        modalBackdrop.addEventListener('click', function() {
            loginModal.style.display = 'none';
        });

        document.getElementById("togglePassword").addEventListener("click", function() {
            var passwordInput = document.getElementById("passwordInput");
            var toggleIcon = document.getElementById("toggleIcon");

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                toggleIcon.classList.remove("fa-eye-slash");
                toggleIcon.classList.add("fa-eye");
            } else {
                passwordInput.type = "password";
                toggleIcon.classList.remove("fa-eye");
                toggleIcon.classList.add("fa-eye-slash");
            }
        });
    </script>
@endsection