<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 - الصفحة غير موجودة | {{ config('app.name') }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Cairo', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); color: #e2e8f0; overflow: hidden; }
        .container { text-align: center; padding: 2rem; position: relative; z-index: 1; }
        .error-code { font-size: 8rem; font-weight: 700; background: linear-gradient(135deg, #f59e0b, #ef4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 0.5rem; }
        .error-title { font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; color: #f1f5f9; }
        .error-desc { font-size: 1.1rem; color: #94a3b8; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
        .btn { display: inline-block; padding: 0.875rem 2.5rem; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.3s; }
        .btn-primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245,158,11,0.3); }
        .bg-circle { position: fixed; border-radius: 50%; opacity: 0.05; }
        .bg-circle:nth-child(1) { width: 400px; height: 400px; background: #f59e0b; top: -100px; right: -100px; }
        .bg-circle:nth-child(2) { width: 300px; height: 300px; background: #ef4444; bottom: -80px; left: -80px; }
    </style>
</head>
<body>
    <div class="bg-circle"></div>
    <div class="bg-circle"></div>
    <div class="container">
        <div class="error-code">404</div>
        <h1 class="error-title">الصفحة غير موجودة</h1>
        <p class="error-desc">عذراً، الصفحة التي تبحث عنها غير موجودة أو تم نقلها. تأكد من صحة الرابط أو عد إلى الصفحة الرئيسية.</p>
        <a href="{{ url('/') }}" class="btn btn-primary">العودة للصفحة الرئيسية</a>
    </div>
</body>
</html>
