@extends('frontend.layouts.app')

@section('content')

    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content" style="display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 70vh; text-align: center; padding: 20px;">
            <h1 style="font-size: 100px; color: #ffcc00; margin: 0; font-weight: 900; text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;">404</h1>
            <h3 style="color: #fff; margin-top: 10px; font-weight: bold;">Oops! Nyasar Bosku?</h3>
            <p style="color: #a8a8a8; font-size: 13px; margin-top: 10px; margin-bottom: 30px;">Halaman yang Anda cari mungkin sudah dihapus, dipindahkan, atau URL-nya salah ketik.</p>
            <a href="/" class="button button--yellow" style="padding: 12px 30px; border-radius: 25px; font-weight: 800; color: #111; text-transform: uppercase;">
                <i class="fas fa-home" style="margin-right: 5px;"></i> Kembali ke Beranda
            </a>
        </div>

        @include('frontend.partials.mobile.bottom-nav')
    </div>

    <div id="showD">
        @include('frontend.partials.desktop.header')

        <div class="content" style="display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 65vh; text-align: center; padding: 50px; background-color: #050505;">
            <h1 style="font-size: 150px; color: #ffcc00; margin: 0; font-weight: 900; letter-spacing: 5px; text-shadow: 4px 4px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;">404</h1>
            <h2 style="color: #fff; margin-top: 10px; font-size: 28px; font-weight: 800;">Halaman Tidak Ditemukan!</h2>
            <p style="color: #a8a8a8; font-size: 16px; margin-top: 15px; margin-bottom: 40px; max-width: 500px; line-height: 1.6;">
                Jalur yang Anda tuju sedang tidak tersedia atau mungkin salah alamat. Mari kembali ke halaman utama dan raih kemenangan Anda hari ini!
            </p>
            <a href="/" class="button button--yellow" style="padding: 15px 40px; border-radius: 30px; font-weight: 800; font-size: 16px; color: #111; text-transform: uppercase; transition: 0.3s;">
                <i class="fas fa-home" style="margin-right: 8px;"></i> Kembali ke Beranda
            </a>
        </div>

        <section class="sidebar s-sidebar"></section>
        @include('frontend.partials.desktop.footer')
    </div>

@endsection