<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>403 - Akses Ditolak | SIMA</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #4c1d95 100%);
        }

        /* Fade in animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .error-card {
            animation: fadeIn 0.4s ease-out;
        }

        /* Simple pulse on icon */
        @keyframes softPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.03);
            }
        }

        .icon-wrapper {
            transition: all 0.3s ease;
            animation: softPulse 2s ease infinite;
        }

        /* Glow text */
        .error-code {
            text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
        }

        /* Simple float on hover */
        .btn-back, .btn-dashboard {
            transition: all 0.2s ease;
        }

        .btn-back:hover, .btn-dashboard:hover {
            transform: translateY(-2px);
        }

        .btn-back:active, .btn-dashboard:active {
            transform: translateY(0px);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="max-w-sm w-full mx-auto">
        <div class="error-card bg-[#0f172a] rounded-2xl shadow-2xl p-6 text-center border border-white/10">
            <!-- Icon -->
            <div class="icon-wrapper w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-red-500/10 to-rose-600/10 flex items-center justify-center">
                <i data-lucide="lock" class="w-10 h-10 text-red-500"></i>
            </div>

            <!-- Error Code -->
            <div class="error-code text-7xl font-black tracking-tight mb-2">
                <span class="bg-gradient-to-r from-red-500 to-rose-500 bg-clip-text text-transparent">
                    403
                </span>
            </div>

            <!-- Title -->
            <h1 class="text-xl font-bold text-white mb-2">
                Akses Ditolak
            </h1>

            <!-- Message -->
            <div class="text-slate-400 mb-6 text-sm">
                <p>Maaf, Anda tidak memiliki izin untuk mengakses halaman ini.</p>
            </div>

            <!-- Actions -->
            <div class="flex gap-2 justify-center">
                <a href="javascript:history.back()"
                   class="btn-back px-4 py-2 bg-slate-800 text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-700 transition-all flex items-center gap-1.5">
                    <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                    Kembali
                </a>
                <a href="/dashboard"
                   class="btn-dashboard px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-lg text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-1.5">
                    <i data-lucide="home" class="w-3.5 h-3.5"></i>
                    Dashboard
                </a>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        });
    </script>
</body>
</html>
<?php /**PATH C:\Users\User\Documents\K2-PROJECTS\k2-sipema\resources\views/errors/403.blade.php ENDPATH**/ ?>