@extends('frontend.layouts.app')
@section('title','Giriş Yap — Animexe')
@push('styles')
<style>
/* ═══════════════════════════════════════════════════
   AUTH PAGE PREMIUM
   ═══════════════════════════════════════════════════ */
.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),
    radial-gradient(ellipse 40% 35% at 0% 100%,rgba(255,45,125,.08),transparent);
}
/* Animated grid lines in background */
.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),0 0 80px rgba(255,45,125,.05);
  position:relative;overflow:hidden;
  animation:auth-box-in .55s cubic-bezier(.22,1,.36,1) .1s both;
}
/* Top accent line */
.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 0%,var(--accent2) 40%,var(--accent) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;
  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}
.auth-title{font-size:1.18rem;font-weight:800;margin-bottom:22px;color:#fff}
.f-group{margin-bottom:16px;position:relative}
.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,background .18s;
}
.f-group input:focus{
  border-color:var(--accent2);
  box-shadow:0 0 0 2px rgba(0,245,255,.12),0 0 24px rgba(0,245,255,.06);
  background:rgba(0,245,255,.04);
}
.f-group input::placeholder{color:rgba(255,255,255,.2)}
.f-err{font-size:.78rem;color:#fca5a5;margin-top:5px;display:flex;align-items:center;gap:4px}
.f-check{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.f-check input{width:16px;height:16px;accent-color:var(--accent);border-radius:4px}
.f-check label{font-size:.84rem;color:rgba(255,255,255,.45);cursor:pointer}
.auth-btn{
  width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent3) 100%);
  color:#fff;font-size:.93rem;font-weight:800;letter-spacing:.03em;
  transition:transform .14s,box-shadow .18s;
  box-shadow:0 0 32px rgba(255,45,125,.35),0 4px 20px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(255,45,125,.5),0 6px 24px rgba(0,0,0,.35)}
.auth-btn:active{transform:translateY(0)}
.auth-sep{text-align:center;margin:18px 0;color:rgba(255,255,255,.2);font-size:.8rem;position:relative}
.auth-sep::before,.auth-sep::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:rgba(255,255,255,.08)}
.auth-sep::before{left:0}
.auth-sep::after{right:0}
.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}
.auth-switch a:hover{text-decoration:underline;text-shadow:0 0 12px rgba(0,245,255,.5)}
.social-btns{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);
  font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s;
  text-decoration:none;
}
.social-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.social-btn svg{width:18px;height:18px;flex-shrink:0}
</style>
@endpush
@section('content')
<div class="auth-page">
  <div class="auth-box">
    <div class="auth-logo">
      <div class="name">ANIMEXE</div>
      <p>Hesabına giriş yap</p>
    </div>

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

    <form action="{{ route('frontend.login') }}" method="POST">
      @csrf
      <div class="f-group">
        <label>E-posta</label>
        <input type="email" name="email" value="{{ old('email') }}" placeholder="ornek@email.com" required autofocus>
      </div>
      <div class="f-group">
        <label>Şifre</label>
        <input type="password" name="password" placeholder="••••••••" required>
      </div>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
        <div class="f-check" style="margin-bottom:0">
          <input type="checkbox" id="rem" name="remember">
          <label for="rem">Beni hatırla</label>
        </div>
        <a href="{{ route('password.request') }}" style="font-size:.82rem;color:rgba(255,255,255,.4);transition:color .15s" onmouseover="this.style.color='var(--accent2)'" onmouseout="this.style.color='rgba(255,255,255,.4)'">Şifremi unuttum</a>
      </div>
      <button type="submit" class="auth-btn">Giriş Yap</button>
    </form>

    <div class="auth-sep" style="margin-top:22px">veya şununla devam et</div>

    <div class="social-btns">
      <a href="{{ route('social.redirect', 'google') }}" class="social-btn">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
        Google ile devam et
      </a>
      <a href="{{ route('social.redirect', 'discord') }}" class="social-btn">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
        Discord ile devam et
      </a>
    </div>

    <div class="auth-switch">
      Hesabın yok mu? <a href="{{ route('frontend.register') }}">Üye ol</a>
    </div>
  </div>
</div>
@endsection