<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>@yield('title')</title>

        <!-- Fonts -->
        <!-- <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,600" rel="stylesheet" type="text/css"> -->
        
        <link rel="stylesheet" href="{{ asset('css/vendor.css') }}">
        <!-- Styles -->
        <style>
            html, body {
                min-height: 100vh;
                margin: 0;
                padding: 0;
            }

            body {
                position: relative;
                min-height: 100vh;
                color: #fff;
                overflow-x: hidden;
                background:
                        radial-gradient(circle at 18% 20%, rgba(67, 217, 255, 0.22), transparent 30%),
                        radial-gradient(circle at 82% 18%, rgba(26, 123, 249, 0.18), transparent 28%),
                        radial-gradient(circle at 50% 90%, rgba(0, 255, 200, 0.08), transparent 30%),
                        linear-gradient(135deg, #061527 0%, #0d2234 38%, #17384d 68%, #07111f 100%) !important;
            }

            body::before {
                content: "";
                position: fixed;
                inset: 0;
                pointer-events: none;
                opacity: 0.16;
                background-image:
                        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
                background-size: 44px 44px;
                z-index: 0;
            }

            body::after {
                content: "";
                position: fixed;
                right: -120px;
                bottom: -120px;
                width: 560px;
                height: 560px;
                pointer-events: none;
                border-radius: 50%;
                background:
                        radial-gradient(circle, rgba(67, 217, 255, 0.20), rgba(26, 123, 249, 0.08), transparent 68%);
                filter: blur(4px);
                z-index: 1;
            }

            .navbar,
            .container {
                position: relative;
                z-index: 3;
            }

            .navbar-default {
                background: rgba(3, 13, 28, 0.28) !important;
                border: none !important;
                box-shadow: none;
                backdrop-filter: blur(8px);
            }

            .navbar-static-top {
                margin-bottom: 0;
            }

            .navbar-default .navbar-brand {
                color: #ffffff !important;
                font-weight: 700;
                letter-spacing: 0.2px;
            }

            .navbar-default .navbar-nav > li > a {
                color: #ffffff !important;
                font-weight: 600;
                font-size: 15px;
                transition: color 0.2s ease-in-out;
            }

            .navbar-default .navbar-nav > li > a:hover {
                color: #43d9ff !important;
            }

            .sousait-bg-card {
                position: fixed;
                z-index: 2;
                pointer-events: none;
                border-radius: 22px;
                border: 1px solid rgba(255, 255, 255, 0.08);
                background: rgba(255, 255, 255, 0.045);
                box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
                backdrop-filter: blur(8px);
            }

            .sousait-bg-card.card-one {
                width: 250px;
                height: 140px;
                left: 8%;
                top: 25%;
                transform: rotate(-7deg);
            }

            .sousait-bg-card.card-two {
                width: 300px;
                height: 170px;
                right: 9%;
                top: 32%;
                transform: rotate(6deg);
            }

            .sousait-bg-card.card-three {
                width: 230px;
                height: 120px;
                left: 16%;
                bottom: 16%;
                transform: rotate(5deg);
            }

            .sousait-bg-card::before {
                content: "";
                position: absolute;
                left: 24px;
                top: 24px;
                width: 56px;
                height: 10px;
                border-radius: 999px;
                background: rgba(67, 217, 255, 0.45);
                box-shadow: 0 0 24px rgba(67, 217, 255, 0.35);
            }

            .sousait-bg-card::after {
                content: "";
                position: absolute;
                left: 24px;
                right: 24px;
                bottom: 26px;
                height: 48px;
                border-radius: 12px;
                background:
                        linear-gradient(90deg, rgba(67, 217, 255, 0.28) 10%, transparent 10% 18%, rgba(255,255,255,0.12) 18% 45%, transparent 45% 52%, rgba(255,255,255,0.10) 52% 100%);
                opacity: 0.85;
            }

            @media only screen and (max-width: 768px) {
                body {
                    overflow-y: auto;
                }

                .sousait-bg-card {
                    display: none;
                }

                .navbar-default {
                    background: rgba(3, 13, 28, 0.65) !important;
                }
            }
        </style>
    </head>

    <body>
    <div class="sousait-bg-card card-one"></div>
    <div class="sousait-bg-card card-two"></div>
    <div class="sousait-bg-card card-three"></div>

        @include('layouts.partials.home_header')
        <div class="container">
            <div class="content">
                @yield('content')
            </div>
        </div>
        @include('layouts.partials.javascripts')

    <!-- Scripts -->
    <script src="{{ asset('js/login.js?v=' . $asset_v) }}"></script>
    @yield('javascript')
    </body>
</html>