@extends('frontend.layouts.app')
@section('title','Üye Ol — Animexe')
@push('styles')
<style>
/* ═══════════════════════════════════════════════���═══
   REGISTER PAGE PREMIUM (shared with login styles)
   ═══════════════════════════════════════════════════ */
.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);
}
.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(24px,5vw,40px);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;
}
.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:24px}
.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;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:14px;position:relative}
.f-group label{display:block;font-size:.79rem;font-weight:700;color:rgba(255,255,255,.4);margin-bottom:6px;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}
.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;letter-spacing:.03em;transition:transform .14s,box-shadow .18s;margin-top:4px;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-terms{font-size:.78rem;color:rgba(255,255,255,.25);text-align:center;margin-top:12px}
.auth-terms a{color:rgba(255,255,255,.45)}
.auth-switch{text-align:center;font-size:.85rem;color:rgba(255,255,255,.35);margin-top:16px}
.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)}
.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}
.social-btns{display:flex;flex-direction:column;gap:10px}
.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>Ücretsiz hesap oluştur</p>
    </div>

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

    <form action="{{ route('frontend.register') }}" method="POST">
      @csrf
      <div class="f-group">
        <label>Adın</label>
        <input type="text" name="name" value="{{ old('name') }}" placeholder="Adın Soyadın" required autofocus>
      </div>
      <div class="f-group">
        <label>E-posta</label>
        <input type="email" name="email" value="{{ old('email') }}" placeholder="ornek@email.com" required>
      </div>
      <div class="f-group">
        <label>Şifre</label>
        <input type="password" name="password" placeholder="En az 6 karakter" required>
      </div>
      <div class="f-group">
        <label>Şifre Tekrar</label>
        <input type="password" name="password_confirmation" placeholder="Şifreni tekrarla" required>
      </div>
      <button type="submit" class="auth-btn">Üye Ol — Ücretsiz</button>
      <p class="auth-terms">Üye olarak <a href="#" style="color:var(--accent)">Kullanım Koşulları</a>'nı kabul etmiş olursunuz.</p>
    </form>

    <div class="auth-sep">veya şununla kayıt ol</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 kayıt ol
      </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 kayıt ol
      </a>
    </div>

    <div class="auth-switch">
      Zaten üye misin? <a href="{{ route('frontend.login') }}">Giriş yap</a>
    </div>
  </div>
</div>
@endsection