@extends('frontend.layouts.app')
@section('title','Şifremi Unuttum — Animexe')
@push('styles')
<style>
.auth-page{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding:40px 16px;position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(184,77,255,.2),transparent 55%),radial-gradient(ellipse 50% 40% at 100% 100%,rgba(0,245,255,.1),transparent)}
.auth-page::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,245,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,255,.03) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent)}
@keyframes auth-box-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.auth-box{background:linear-gradient(160deg,rgba(14,14,28,.97),rgba(8,8,18,.99));border:1px solid rgba(0,245,255,.22);border-radius:20px;padding:clamp(28px,5vw,44px);width:100%;max-width:440px;box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 60px rgba(0,245,255,.08);position:relative;overflow:hidden;animation:auth-box-in .55s cubic-bezier(.22,1,.36,1) .1s both}
.auth-box::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);opacity:.7}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo .name{font-family:var(--font-display);font-size:1.4rem;font-weight:900;letter-spacing:.22em;background:linear-gradient(105deg,#fff,var(--accent2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(0,245,255,.3))}
.auth-logo p{color:rgba(255,255,255,.35);font-size:.85rem;margin-top:5px}
.f-group{margin-bottom:16px}
.f-group label{display:block;font-size:.79rem;font-weight:700;color:rgba(255,255,255,.45);margin-bottom:7px;letter-spacing:.05em;text-transform:uppercase}
.f-group input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 16px;color:var(--text);font-size:.9rem;outline:none;transition:border .18s,box-shadow .18s}
.f-group input:focus{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(0,245,255,.12);background:rgba(0,245,255,.04)}
.f-group input::placeholder{color:rgba(255,255,255,.2)}
.auth-btn{width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;font-size:.93rem;font-weight:800;transition:transform .14s,box-shadow .18s;box-shadow:0 0 32px rgba(255,45,125,.35),0 4px 20px rgba(0,0,0,.35)}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(255,45,125,.5)}
.auth-switch{text-align:center;font-size:.85rem;color:rgba(255,255,255,.35);margin-top:20px}
.auth-switch a{color:var(--accent2);font-weight:700}
.status-box{background:rgba(0,245,255,.07);border:1px solid rgba(0,245,255,.2);border-radius:10px;padding:14px 16px;font-size:.87rem;color:var(--accent2);margin-bottom:20px}
</style>
@endpush
@section('content')
<div class="auth-page">
  <div class="auth-box">
    <div class="auth-logo">
      <div class="name">ANIMEXE</div>
      <p>Şifre sıfırlama</p>
    </div>

    @if(session('status'))
      <div class="status-box"><i class="bi bi-check-circle-fill"></i> {{ session('status') }}</div>
    @endif

    @if($errors->any())
      <div class="alert alert-err">{{ $errors->first() }}</div>
    @endif

    <p style="font-size:.87rem;color:rgba(255,255,255,.4);margin-bottom:20px">Kayıtlı e-posta adresini gir, sana şifre sıfırlama bağlantısı gönderelim.</p>

    <form action="{{ route('password.request') }}" method="POST">
      @csrf
      <div class="f-group">
        <label>E-posta Adresi</label>
        <input type="email" name="email" value="{{ old('email') }}" placeholder="ornek@email.com" required autofocus>
      </div>
      <button type="submit" class="auth-btn">Sıfırlama Bağlantısı Gönder</button>
    </form>

    <div class="auth-switch">
      <a href="{{ route('frontend.login') }}"><i class="bi bi-arrow-left"></i> Girişe dön</a>
    </div>
  </div>
</div>
@endsection