<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giriş — Animexe Admin</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#07071c;
    --surface:#0c0c26;
    --border:rgba(255,255,255,0.08);
    --accent:#7c3aed;
    --accent-lt:#a855f7;
    --accent-glow:rgba(124,58,237,0.3);
    --text:#e2e0f0;
    --text2:#8b87a8;
    --text3:#55527a;
    --danger:#ef4444;
    --danger-dim:rgba(239,68,68,0.1);
}
html,body{height:100%}
body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:20px;
    -webkit-font-smoothing:antialiased;
}

/* Animated background */
.bg-glow{
    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.bg-glow::before{
    content:'';
    position:absolute;
    top:-30%;left:-20%;
    width:60%;height:60%;
    background:radial-gradient(ellipse,rgba(124,58,237,0.12) 0%,transparent 70%);
    animation:gbg 8s ease-in-out infinite alternate;
}
.bg-glow::after{
    content:'';
    position:absolute;
    bottom:-20%;right:-15%;
    width:50%;height:50%;
    background:radial-gradient(ellipse,rgba(168,85,247,0.08) 0%,transparent 70%);
    animation:gbg 10s ease-in-out infinite alternate-reverse;
}
@keyframes gbg{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,4%) scale(1.05)}}

/* Login box */
.login-wrap{
    position:relative;z-index:1;
    width:100%;max-width:420px;
}
.login-box{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:44px 40px;
    box-shadow:0 24px 80px rgba(0,0,0,0.45);
}

/* Brand */
.login-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:8px;
}
.login-brand-icon{
    width:46px;height:46px;
    background:linear-gradient(135deg,var(--accent),var(--accent-lt));
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;color:#fff;
    box-shadow:0 0 30px var(--accent-glow);
}
.login-brand-name{
    font-size:22px;font-weight:800;
    color:var(--text);letter-spacing:0.5px;
}
.login-brand-name span{color:var(--accent-lt);}
.login-sub{
    text-align:center;
    font-size:13px;
    color:var(--text3);
    margin-bottom:32px;
    font-weight:500;
}

/* Form */
.f-group{margin-bottom:18px;}
.f-label{
    display:block;
    font-size:13px;font-weight:600;
    color:var(--text2);
    margin-bottom:7px;
}
.f-input{
    width:100%;
    background:var(--bg);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    padding:11px 14px;
    color:var(--text);
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:border-color 0.15s,box-shadow 0.15s;
}
.f-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-glow);
}
.f-input::placeholder{color:var(--text3);}

/* Password toggle */
.f-pass-wrap{position:relative;}
.f-pass-toggle{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--text3);
    cursor:pointer;font-size:15px;padding:2px;line-height:1;
    transition:color 0.12s;
}
.f-pass-toggle:hover{color:var(--text2);}

/* Remember */
.f-remember{
    display:flex;align-items:center;gap:8px;
    margin-bottom:22px;
}
.f-remember input[type=checkbox]{
    width:16px;height:16px;
    appearance:none;-webkit-appearance:none;
    background:var(--bg);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:4px;cursor:pointer;
    position:relative;flex-shrink:0;
    transition:all 0.12s;
}
.f-remember input:checked{background:var(--accent);border-color:var(--accent);}
.f-remember input:checked::after{
    content:'';position:absolute;
    top:2px;left:5px;width:4px;height:8px;
    border:2px solid #fff;border-top:none;border-left:none;
    transform:rotate(45deg);
}
.f-remember label{font-size:13px;color:var(--text2);cursor:pointer;}

/* Submit */
.f-submit{
    width:100%;
    padding:12px;
    background:linear-gradient(135deg,var(--accent),var(--accent-lt));
    border:none;border-radius:10px;
    color:#fff;
    font-size:14px;font-weight:700;font-family:inherit;
    cursor:pointer;
    box-shadow:0 4px 20px var(--accent-glow);
    transition:opacity 0.15s,transform 0.12s;
}
.f-submit:hover{opacity:0.9;}
.f-submit:active{transform:scale(0.99);}

/* Error */
.f-error{
    background:var(--danger-dim);
    border:1px solid rgba(239,68,68,0.25);
    border-radius:10px;
    padding:11px 14px;
    font-size:13px;
    color:#fca5a5;
    display:flex;align-items:center;gap:8px;
    margin-bottom:20px;
}

/* Footer */
.login-footer{
    text-align:center;
    margin-top:24px;
    font-size:12px;
    color:var(--text3);
}
</style>
</head>
<body>

<div class="bg-glow"></div>

<div class="login-wrap">
    <div class="login-box">
        <div class="login-brand">
            <div class="login-brand-icon"><i class="bi bi-play-fill"></i></div>
            <div class="login-brand-name">ANIME<span>XE</span></div>
        </div>
        <div class="login-sub">Yönetim Paneli</div>

        @if($errors->any())
        <div class="f-error">
            <i class="bi bi-exclamation-circle-fill"></i>
            <span>{{ $errors->first() }}</span>
        </div>
        @endif

        @if(session('error'))
        <div class="f-error">
            <i class="bi bi-exclamation-circle-fill"></i>
            <span>{{ session('error') }}</span>
        </div>
        @endif

        <form method="POST" action="{{ route('admin.login.post') }}">
            @csrf

            <div class="f-group">
                <label class="f-label" for="email">E-posta adresi</label>
                <input
                    id="email"
                    type="email"
                    name="email"
                    class="f-input"
                    placeholder="ornek@animexe.com"
                    value="{{ old('email') }}"
                    required
                    autofocus
                    autocomplete="email"
                >
            </div>

            <div class="f-group">
                <label class="f-label" for="password">Şifre</label>
                <div class="f-pass-wrap">
                    <input
                        id="password"
                        type="password"
                        name="password"
                        class="f-input"
                        placeholder="••••••••"
                        required
                        autocomplete="current-password"
                        style="padding-right:42px"
                    >
                    <button type="button" class="f-pass-toggle" onclick="togglePass()" tabindex="-1">
                        <i class="bi bi-eye" id="pass-eye"></i>
                    </button>
                </div>
            </div>

            <div class="f-remember">
                <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                <label for="remember">Beni hatırla</label>
            </div>

            <button type="submit" class="f-submit">
                <i class="bi bi-box-arrow-in-right" style="margin-right:6px"></i> Giriş Yap
            </button>
        </form>
    </div>

    <div class="login-footer">
        Animexe Admin &mdash; Yetkisiz erişim yasaktır.
    </div>
</div>

<script>
function togglePass() {
    const inp = document.getElementById('password');
    const eye = document.getElementById('pass-eye');
    if (inp.type === 'password') {
        inp.type = 'text';
        eye.className = 'bi bi-eye-slash';
    } else {
        inp.type = 'password';
        eye.className = 'bi bi-eye';
    }
}
</script>
</body>
</html>
