<!DOCTYPE html>
<html class="light" lang="tk">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>OTP Tassyklamak</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @yield('styles')
</head>
<body class="bg-background text-on-background font-body-md min-h-screen flex flex-col items-center overflow-x-hidden">
    <!-- TopAppBar Section -->
    <header class="flex items-center justify-between px-container-padding h-16 w-full z-50 fixed top-0 bg-background">
        @yield('header-back')
        <h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-primary">Tassyklamak</h1>
        <div class="w-10"></div> <!-- Spacer for center alignment -->
    </header>

    @yield('content')

    <!-- Subtle atmospheric background elements -->
    <div class="fixed top-0 right-0 -z-10 w-64 h-64 bg-primary/5 rounded-full blur-[80px] pointer-events-none"></div>
    <div class="fixed bottom-0 left-0 -z-10 w-96 h-96 bg-secondary-container/10 rounded-full blur-[100px] pointer-events-none"></div>

    @yield('scripts')
</body>
</html>
