@extends('frontend.layouts.app')
@section('title', 'Ödeme | Animexe')

@push('styles')
<style>
.ck-pay-wrap{max-width:540px;margin:40px auto;padding:0 16px}
.ck-pay-head{text-align:center;margin-bottom:24px}
.ck-pay-head h1{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.ck-pay-head p{color:rgba(255,255,255,.45);font-size:.85rem}
.ck-iyzico-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;min-height:400px}
.ck-secure{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;font-size:.75rem;color:rgba(255,255,255,.3)}
</style>
@endpush

@section('content')
<div class="ck-pay-wrap">
    <div class="ck-pay-head">
        <h1><i class="bi bi-credit-card-fill me-2" style="color:#00f5ff"></i>Kart Bilgileri</h1>
        <p>{{ $plan->name }} — ₺{{ number_format($plan->price, 0) }} / {{ $plan->duration_days }} gün</p>
    </div>

    <div class="ck-iyzico-box">
        {!! $formContent !!}
    </div>

    <div class="ck-secure">
        <i class="bi bi-shield-check" style="color:#00f5ff"></i>
        Kart bilgileriniz iyzico'nun güvenli sunucularında işlenir
    </div>
</div>
@endsection