<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'PeGas') }}</title>
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('img/logo-pegas.png') }}">
    <link rel="apple-touch-icon" href="{{ asset('img/logo-pegas.png') }}">

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link href="{{ asset('konten-asset/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        .auth-header-bg {
            background: 
                linear-gradient(135deg, rgba(126, 188, 18, 0.7), rgba(106, 163, 15, 0.7)), 
                url("{{ asset('img/auth.png') }}");
            background-size: cover;
            background-position: center;
            filter: contrast(1.1); 
            border-bottom-left-radius: 50% 20%;
            border-bottom-right-radius: 50% 20%;
            z-index: 0;
        }
    </style>
</head>

<body class="font-sans text-gray-900 antialiased bg-gray-50">

    <div class="fixed top-0 left-0 w-full h-80 auth-header-bg"></div>

    <div class="min-h-screen flex flex-col justify-center items-center relative py-6">

        <div class="text-center mb-6 z-10">
            <h2 class="text-white text-3xl font-bold tracking-wider">PeGas</h2>
            <p class="text-white text-sm opacity-90">Prediksi ketersediaan stok Gas LPG</p>
        </div>

        <div class="w-full z-10 {{ request()->routeIs('register') ? 'max-w-4xl px-10 py-8' : 'max-w-md px-8 py-8' }} bg-white shadow-2xl rounded-3xl">
            
            {{ $slot }}

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('js/auth.js') }}"></script>

</body>
</html>