663 lines
30 KiB
PHP
663 lines
30 KiB
PHP
@extends('frontend.layouts.app')
|
||
@section('title', 'Animexe Premium — Anime Deneyimini Zirveye Taşı')
|
||
@section('meta_description', 'Animexe Premium ile reklamsız izle, özel kozmotikler kazan, erken erişim fırsatlarından yararlan.')
|
||
@push('styles')
|
||
<style>
|
||
:root{--prm-cyan:#00f5ff;--prm-pink:#ff2d7d;--prm-purple:#b84dff;--prm-gold:#ffd60a;--prm-bg:#06060d}
|
||
|
||
/* ── Genel ── */
|
||
#pg{background:var(--prm-bg);min-height:100vh}
|
||
.prm-wrap{max-width:1160px;margin:0 auto;padding:0 20px 80px}
|
||
|
||
/* ── Hero ── */
|
||
.prm-hero{
|
||
position:relative;text-align:center;
|
||
padding:100px 20px 80px;overflow:hidden;
|
||
}
|
||
.prm-hero-bg{
|
||
position:absolute;inset:0;z-index:0;
|
||
background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,245,255,.09) 0%,transparent 70%),
|
||
radial-gradient(ellipse 50% 40% at 80% 30%,rgba(184,77,255,.07) 0%,transparent 60%),
|
||
radial-gradient(ellipse 40% 30% at 20% 60%,rgba(255,45,125,.06) 0%,transparent 60%);
|
||
}
|
||
/* Yıldız parçacıkları */
|
||
.prm-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
|
||
.prm-stars span{
|
||
position:absolute;width:2px;height:2px;border-radius:50%;
|
||
background:#fff;animation:twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
|
||
opacity:0;
|
||
}
|
||
@keyframes twinkle{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.7;transform:scale(1.4)}}
|
||
|
||
.prm-hero-inner{position:relative;z-index:1}
|
||
.prm-hero-badge{
|
||
display:inline-flex;align-items:center;gap:7px;
|
||
padding:6px 16px;border-radius:30px;
|
||
background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.25);
|
||
font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
|
||
color:var(--prm-cyan);margin-bottom:24px;
|
||
}
|
||
.prm-hero-badge i{font-size:.85rem}
|
||
.prm-hero-title{
|
||
font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;line-height:1.15;
|
||
margin-bottom:16px;letter-spacing:-.02em;
|
||
}
|
||
.prm-hero-title .grad{
|
||
background:linear-gradient(120deg,var(--prm-cyan) 0%,var(--prm-purple) 50%,var(--prm-pink) 100%);
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
}
|
||
.prm-hero-sub{font-size:1.08rem;color:rgba(255,255,255,.5);max-width:560px;margin:0 auto 40px;line-height:1.65}
|
||
.prm-hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
|
||
.prm-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
|
||
.prm-stat-val{font-size:1.5rem;font-weight:900;color:#fff;line-height:1}
|
||
.prm-stat-lbl{font-size:.7rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em}
|
||
|
||
/* ── Aktivasyon başarı banner ── */
|
||
.prm-success-banner{
|
||
display:flex;align-items:center;gap:14px;
|
||
padding:16px 22px;border-radius:14px;margin-bottom:32px;
|
||
background:rgba(50,220,100,.08);border:1px solid rgba(50,220,100,.3);
|
||
animation:slideDown .4s ease;
|
||
}
|
||
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
|
||
.prm-success-banner i{font-size:1.6rem;color:#32dc64;flex-shrink:0}
|
||
.prm-success-banner strong{color:#32dc64;font-size:.95rem;display:block;margin-bottom:2px}
|
||
.prm-success-banner span{font-size:.8rem;color:rgba(255,255,255,.5)}
|
||
|
||
/* ── Planlar grid ── */
|
||
.prm-section-lbl{
|
||
text-align:center;margin-bottom:48px;
|
||
}
|
||
.prm-section-lbl h2{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:8px}
|
||
.prm-section-lbl p{font-size:.9rem;color:rgba(255,255,255,.4)}
|
||
|
||
.prm-plans{
|
||
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
|
||
margin-bottom:72px;
|
||
}
|
||
@media(max-width:900px){.prm-plans{grid-template-columns:1fr}}
|
||
|
||
.prm-card{
|
||
position:relative;border-radius:20px;padding:32px 26px 28px;
|
||
background:rgba(255,255,255,.03);
|
||
border:1px solid rgba(255,255,255,.08);
|
||
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
|
||
display:flex;flex-direction:column;
|
||
}
|
||
.prm-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.15);box-shadow:0 20px 60px rgba(0,0,0,.4)}
|
||
.prm-card.featured{
|
||
background:linear-gradient(145deg,rgba(0,245,255,.06) 0%,rgba(184,77,255,.05) 60%,rgba(255,45,125,.05) 100%);
|
||
border-color:rgba(0,245,255,.3);
|
||
box-shadow:0 0 0 1px rgba(0,245,255,.1),0 20px 60px rgba(0,245,255,.08);
|
||
}
|
||
.prm-card.featured:hover{box-shadow:0 0 0 1px rgba(0,245,255,.2),0 28px 70px rgba(0,245,255,.14)}
|
||
|
||
/* Badge */
|
||
.prm-card-badge{
|
||
position:absolute;top:-13px;left:50%;transform:translateX(-50%);
|
||
padding:4px 18px;border-radius:20px;font-size:.7rem;font-weight:800;
|
||
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
|
||
background:linear-gradient(90deg,var(--prm-cyan),var(--prm-purple));
|
||
color:#06060d;box-shadow:0 0 20px rgba(0,245,255,.3);
|
||
}
|
||
.prm-card-badge.gold{background:linear-gradient(90deg,#ffd60a,#ff9f0a);box-shadow:0 0 20px rgba(255,214,10,.3)}
|
||
.prm-card-badge.pink{background:linear-gradient(90deg,var(--prm-pink),var(--prm-purple));box-shadow:0 0 20px rgba(255,45,125,.3)}
|
||
|
||
/* Plan içerik */
|
||
.prm-plan-name{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.4);margin-bottom:10px}
|
||
.prm-plan-price-wrap{margin-bottom:6px;line-height:1}
|
||
.prm-plan-price{font-size:2.8rem;font-weight:900;color:#fff;letter-spacing:-.04em}
|
||
.prm-plan-currency{font-size:1.2rem;font-weight:700;color:rgba(255,255,255,.6);vertical-align:top;margin-top:8px;display:inline-block}
|
||
.prm-plan-period{font-size:.8rem;color:rgba(255,255,255,.35);margin-top:4px}
|
||
.prm-plan-per-day{font-size:.72rem;color:rgba(255,255,255,.25);margin-bottom:4px}
|
||
.prm-plan-trial{
|
||
display:inline-flex;align-items:center;gap:5px;
|
||
padding:3px 10px;border-radius:10px;
|
||
background:rgba(255,214,10,.1);border:1px solid rgba(255,214,10,.25);
|
||
font-size:.7rem;font-weight:700;color:#ffd60a;margin-bottom:18px;
|
||
}
|
||
.prm-divider{height:1px;background:rgba(255,255,255,.07);margin:18px 0}
|
||
|
||
/* Feature list */
|
||
.prm-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;flex:1}
|
||
.prm-features li{display:flex;align-items:flex-start;gap:9px;font-size:.83rem;color:rgba(255,255,255,.65);line-height:1.4}
|
||
.prm-features li i.bi-check-circle-fill{color:var(--prm-cyan);font-size:.85rem;flex-shrink:0;margin-top:1px}
|
||
.prm-features li i.bi-x-circle{color:rgba(255,255,255,.15);font-size:.85rem;flex-shrink:0;margin-top:1px}
|
||
.prm-features li.dim{color:rgba(255,255,255,.2)}
|
||
|
||
/* CTA Buton */
|
||
.prm-btn-buy{
|
||
display:flex;align-items:center;justify-content:center;gap:8px;
|
||
width:100%;padding:13px;border-radius:12px;border:none;
|
||
font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;
|
||
text-decoration:none;letter-spacing:.02em;
|
||
transition:transform .15s,box-shadow .15s,opacity .15s;
|
||
margin-top:auto;
|
||
}
|
||
.prm-btn-buy:hover{transform:translateY(-2px)}
|
||
.prm-btn-buy.primary{
|
||
background:linear-gradient(135deg,var(--prm-cyan) 0%,#0080ff 60%,var(--prm-purple) 100%);
|
||
color:#06060d;box-shadow:0 0 30px rgba(0,245,255,.25),0 6px 20px rgba(0,0,0,.4);
|
||
}
|
||
.prm-btn-buy.primary:hover{box-shadow:0 0 40px rgba(0,245,255,.4),0 8px 28px rgba(0,0,0,.5)}
|
||
.prm-btn-buy.outline{
|
||
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
|
||
color:rgba(255,255,255,.75);
|
||
}
|
||
.prm-btn-buy.outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);color:#fff}
|
||
.prm-btn-buy.active-plan{
|
||
background:rgba(50,220,100,.08);border:1px solid rgba(50,220,100,.3);
|
||
color:#32dc64;cursor:default;
|
||
}
|
||
.prm-btn-buy.active-plan:hover{transform:none}
|
||
.prm-btn-buy.disabled{
|
||
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
|
||
color:rgba(255,255,255,.2);cursor:not-allowed;
|
||
}
|
||
.prm-btn-buy.disabled:hover{transform:none}
|
||
|
||
/* ── Nasıl Çalışır ── */
|
||
.prm-how{
|
||
display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
|
||
margin-bottom:72px;background:rgba(255,255,255,.04);
|
||
border:1px solid rgba(255,255,255,.07);border-radius:20px;overflow:hidden;
|
||
}
|
||
@media(max-width:700px){.prm-how{grid-template-columns:1fr}}
|
||
.prm-how-step{
|
||
padding:32px 28px;position:relative;
|
||
background:rgba(6,6,13,.6);
|
||
}
|
||
.prm-how-step:not(:last-child)::after{
|
||
content:'';position:absolute;right:0;top:20%;bottom:20%;
|
||
width:1px;background:rgba(255,255,255,.07);
|
||
}
|
||
@media(max-width:700px){.prm-how-step:not(:last-child)::after{display:none}}
|
||
.prm-how-num{
|
||
width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
|
||
font-size:1.1rem;font-weight:900;margin-bottom:16px;
|
||
}
|
||
.prm-how-num.c1{background:rgba(0,245,255,.12);color:var(--prm-cyan)}
|
||
.prm-how-num.c2{background:rgba(184,77,255,.12);color:var(--prm-purple)}
|
||
.prm-how-num.c3{background:rgba(50,220,100,.12);color:#32dc64}
|
||
.prm-how-step h3{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:8px}
|
||
.prm-how-step p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.6;margin:0}
|
||
|
||
/* ── Aktivasyon Kutusu ── */
|
||
.prm-activate-box{
|
||
border-radius:20px;padding:44px 36px;margin-bottom:72px;
|
||
background:linear-gradient(135deg,rgba(0,245,255,.04),rgba(184,77,255,.03));
|
||
border:1px solid rgba(0,245,255,.15);
|
||
text-align:center;position:relative;overflow:hidden;
|
||
}
|
||
.prm-activate-box::before{
|
||
content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
|
||
width:300px;height:200px;border-radius:50%;
|
||
background:radial-gradient(rgba(0,245,255,.08),transparent 70%);
|
||
pointer-events:none;
|
||
}
|
||
.prm-activate-box h2{font-size:1.45rem;font-weight:800;color:#fff;margin-bottom:8px}
|
||
.prm-activate-box p{font-size:.88rem;color:rgba(255,255,255,.4);margin-bottom:28px;line-height:1.6}
|
||
.prm-code-form{display:flex;gap:10px;max-width:500px;margin:0 auto;flex-wrap:wrap;justify-content:center}
|
||
.prm-code-input{
|
||
flex:1;min-width:220px;
|
||
background:rgba(255,255,255,.06);border:1px solid rgba(0,245,255,.25);
|
||
border-radius:12px;padding:14px 18px;color:#fff;font-size:1rem;font-weight:700;
|
||
letter-spacing:.12em;text-align:center;text-transform:uppercase;outline:none;
|
||
font-family:inherit;transition:border-color .2s,box-shadow .2s;
|
||
}
|
||
.prm-code-input::placeholder{letter-spacing:.05em;font-weight:400;text-transform:none;font-size:.88rem;color:rgba(255,255,255,.3)}
|
||
.prm-code-input:focus{border-color:var(--prm-cyan);box-shadow:0 0 0 3px rgba(0,245,255,.12)}
|
||
.prm-code-input.is-invalid{border-color:var(--prm-pink)!important;box-shadow:0 0 0 3px rgba(255,45,125,.1)!important}
|
||
.prm-code-btn{
|
||
padding:14px 28px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;
|
||
font-size:.9rem;font-weight:800;letter-spacing:.03em;
|
||
background:linear-gradient(135deg,var(--prm-cyan),var(--prm-purple));
|
||
color:#06060d;box-shadow:0 0 24px rgba(0,245,255,.2);
|
||
transition:transform .15s,box-shadow .15s;
|
||
}
|
||
.prm-code-btn:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(0,245,255,.35)}
|
||
.prm-code-error{
|
||
width:100%;text-align:center;font-size:.8rem;color:var(--prm-pink);
|
||
margin-top:8px;font-weight:600;
|
||
}
|
||
.prm-activate-login-note{
|
||
margin-top:14px;font-size:.78rem;color:rgba(255,255,255,.3);
|
||
}
|
||
.prm-activate-login-note a{color:var(--prm-cyan);text-decoration:none;font-weight:700}
|
||
.prm-activate-login-note a:hover{text-decoration:underline}
|
||
|
||
/* ── Özellik Showcase ── */
|
||
.prm-features-grid{
|
||
display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:72px;
|
||
}
|
||
@media(max-width:700px){.prm-features-grid{grid-template-columns:1fr}}
|
||
.prm-feat-cat{
|
||
background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
|
||
border-radius:16px;padding:24px;
|
||
}
|
||
.prm-feat-cat-hdr{
|
||
display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;
|
||
border-bottom:1px solid rgba(255,255,255,.06);
|
||
}
|
||
.prm-feat-cat-icon{
|
||
width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
|
||
font-size:1rem;flex-shrink:0;
|
||
}
|
||
.prm-feat-cat-hdr h3{font-size:.9rem;font-weight:800;color:#fff;margin:0}
|
||
.prm-feat-list{display:flex;flex-direction:column;gap:10px}
|
||
.prm-feat-item{display:flex;align-items:flex-start;gap:10px}
|
||
.prm-feat-item-icon{
|
||
width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
|
||
font-size:.75rem;flex-shrink:0;margin-top:1px;
|
||
}
|
||
.prm-feat-item-body{flex:1;min-width:0}
|
||
.prm-feat-item-name{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:2px}
|
||
.prm-feat-item-desc{font-size:.72rem;color:rgba(255,255,255,.35);line-height:1.45}
|
||
|
||
/* Kozmetik Preview */
|
||
.prm-cosmetics{
|
||
margin-bottom:72px;text-align:center;
|
||
}
|
||
.prm-cosmetics-title{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:8px}
|
||
.prm-cosmetics-sub{font-size:.85rem;color:rgba(255,255,255,.35);margin-bottom:36px}
|
||
.prm-cosmetics-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px}
|
||
|
||
/* Username color chips */
|
||
.uc-chip{
|
||
padding:5px 16px;border-radius:20px;font-size:.82rem;font-weight:700;
|
||
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
|
||
cursor:default;white-space:nowrap;
|
||
}
|
||
|
||
/* Frame badges */
|
||
.frame-badge{
|
||
width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
|
||
font-size:1.2rem;font-weight:800;color:#fff;position:relative;
|
||
}
|
||
.frame-badge::before{
|
||
content:'';position:absolute;inset:-3px;border-radius:50%;
|
||
animation:frame-spin 3s linear infinite;
|
||
}
|
||
@keyframes frame-spin{to{transform:rotate(360deg)}}
|
||
.frame-badge.fr-neon::before{background:conic-gradient(#00f5ff,#b84dff,#00f5ff)}
|
||
.frame-badge.fr-fire::before{background:conic-gradient(#ff6b35,#ff2d7d,#ff8c00,#ff6b35)}
|
||
.frame-badge.fr-galaxy::before{background:conic-gradient(#7c3aed,#b84dff,#4a1d96,#7c3aed)}
|
||
.frame-badge.fr-gold::before{background:conic-gradient(#ffd700,#ff8c00,#ffd700)}
|
||
.frame-badge.fr-sakura::before{background:conic-gradient(#ff9ec4,#ff2d7d,#ffd6e7,#ff9ec4)}
|
||
.frame-badge.fr-rainbow::before{background:conic-gradient(#f00,#ff8c00,#ffd700,#0c0,#08f,#8b00ff,#f08,#f00)}
|
||
.frame-badge.fr-ice::before{background:conic-gradient(#a8edff,#60cfff,#a8edff)}
|
||
.frame-badge-inner{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:#111;display:flex;align-items:center;justify-content:center;font-size:.65rem;text-align:center;padding:2px;color:rgba(255,255,255,.7)}
|
||
|
||
/* Comment bg preview */
|
||
.cb-preview{
|
||
padding:10px 16px;border-radius:10px;font-size:.8rem;color:#fff;font-weight:600;
|
||
white-space:nowrap;position:relative;overflow:hidden;
|
||
}
|
||
.cb-preview::before{content:'';position:absolute;inset:0;opacity:.7}
|
||
.cb-fire::before{background:linear-gradient(135deg,#ff6b35,#ff2d7d)}
|
||
.cb-aurora::before{background:linear-gradient(135deg,#00c8d4,#b84dff)}
|
||
.cb-stars::before{background:linear-gradient(135deg,#1a1a3a,#4a1d96)}
|
||
.cb-sakura::before{background:linear-gradient(135deg,#ff9ec4,#ff2d7d)}
|
||
.cb-neon::before{background:linear-gradient(135deg,#00f5ff,#0040ff)}
|
||
.cb-galaxy::before{background:linear-gradient(135deg,#0a0020,#7c3aed)}
|
||
.cb-ice::before{background:linear-gradient(135deg,#a8edff,#006fbf)}
|
||
.cb-preview span{position:relative;z-index:1}
|
||
|
||
/* ── FAQ ── */
|
||
.prm-faq{margin-bottom:48px}
|
||
.prm-faq h2{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:28px;text-align:center}
|
||
.prm-faq-item{
|
||
border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;
|
||
}
|
||
.prm-faq-q{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:16px 4px;cursor:pointer;font-size:.9rem;font-weight:700;color:rgba(255,255,255,.75);
|
||
transition:color .15s;user-select:none;
|
||
background:none;border:none;width:100%;text-align:left;font-family:inherit;
|
||
gap:12px;
|
||
}
|
||
.prm-faq-q:hover{color:#fff}
|
||
.prm-faq-q i{flex-shrink:0;transition:transform .25s ease;color:rgba(255,255,255,.3)}
|
||
.prm-faq-item.open .prm-faq-q i{transform:rotate(45deg);color:var(--prm-cyan)}
|
||
.prm-faq-a{
|
||
max-height:0;overflow:hidden;
|
||
transition:max-height .3s ease,padding .3s ease;
|
||
font-size:.84rem;color:rgba(255,255,255,.45);line-height:1.7;padding:0 4px;
|
||
}
|
||
.prm-faq-item.open .prm-faq-a{max-height:200px;padding-bottom:16px}
|
||
|
||
/* ── Mevcut Plan Banner ── */
|
||
.prm-active-banner{
|
||
display:flex;align-items:center;gap:16px;padding:18px 24px;border-radius:14px;
|
||
background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.2);margin-bottom:36px;
|
||
flex-wrap:wrap;
|
||
}
|
||
.prm-active-banner i{font-size:1.8rem;color:var(--prm-cyan);flex-shrink:0}
|
||
.prm-active-banner-body{flex:1;min-width:0}
|
||
.prm-active-banner-title{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:2px}
|
||
.prm-active-banner-sub{font-size:.78rem;color:rgba(255,255,255,.4)}
|
||
.prm-active-banner-action{flex-shrink:0}
|
||
.prm-active-banner-action a{
|
||
padding:9px 20px;border-radius:10px;border:1px solid rgba(0,245,255,.3);
|
||
background:rgba(0,245,255,.07);color:var(--prm-cyan);font-size:.8rem;font-weight:700;
|
||
text-decoration:none;transition:all .15s;white-space:nowrap;display:inline-block;
|
||
}
|
||
.prm-active-banner-action a:hover{background:rgba(0,245,255,.14);border-color:var(--prm-cyan)}
|
||
|
||
@media(max-width:600px){
|
||
.prm-hero{padding:72px 16px 56px}
|
||
.prm-activate-box{padding:32px 20px}
|
||
.prm-how-step{padding:24px 20px}
|
||
.prm-card{padding:26px 20px 22px}
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<div id="pg">
|
||
<div class="prm-hero">
|
||
<div class="prm-hero-bg"></div>
|
||
<div class="prm-stars" id="prm-stars"></div>
|
||
<div class="prm-hero-inner">
|
||
<div class="prm-hero-badge"><i class="bi bi-stars"></i> Animexe Premium</div>
|
||
<h1 class="prm-hero-title">
|
||
Anime deneyimini<br><span class="grad">zirveye taşı</span>
|
||
</h1>
|
||
<p class="prm-hero-sub">
|
||
Reklamsız izleme, özel profil kozmetikleri, erken bölüm erişimi ve daha fazlası — hepsi tek bir Premium üyelikte.
|
||
</p>
|
||
<div class="prm-hero-stats">
|
||
<div class="prm-stat"><span class="prm-stat-val">∞</span><span class="prm-stat-lbl">İçerik</span></div>
|
||
<div class="prm-stat"><span class="prm-stat-val">{{ count($featureGroups ?? []) > 0 ? array_sum(array_map(fn($g) => count($g['perks']), $featureGroups)) : '20+' }}</span><span class="prm-stat-lbl">Özel Özellik</span></div>
|
||
<div class="prm-stat"><span class="prm-stat-val">7/24</span><span class="prm-stat-lbl">Destek</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="prm-wrap">
|
||
|
||
{{-- Aktivasyon başarı mesajı --}}
|
||
@if(session('activation_success'))
|
||
<div class="prm-success-banner">
|
||
<i class="bi bi-patch-check-fill"></i>
|
||
<div>
|
||
<strong>Premium aktif! 🎉 {{ session('activation_success.plan') }} planına hoş geldin.</strong>
|
||
<span>Üyeliğin {{ session('activation_success.expires_at') }} tarihine kadar geçerli.</span>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Mevcut premium kullanıcı banner --}}
|
||
@auth
|
||
@if(auth()->user()->isPremium())
|
||
<div class="prm-active-banner">
|
||
<i class="bi bi-shield-fill-check"></i>
|
||
<div class="prm-active-banner-body">
|
||
<div class="prm-active-banner-title">Premium üyeliğin aktif 🎉</div>
|
||
<div class="prm-active-banner-sub">
|
||
Bitiş tarihi: {{ auth()->user()->premium_expires_at?->format('d MMMM Y') ?? auth()->user()->premium_expires_at?->format('d.m.Y') }}
|
||
· Süre uzatmak için aşağıdan yeni bir plan satın alabilirsin.
|
||
</div>
|
||
</div>
|
||
<div class="prm-active-banner-action">
|
||
<a href="{{ route('profile') }}"><i class="bi bi-person-circle me-1"></i>Profili Gör</a>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@endauth
|
||
|
||
{{-- Planlar --}}
|
||
@if(count($plans ?? []) > 0)
|
||
<div class="prm-section-lbl">
|
||
<h2>Planını Seç</h2>
|
||
<p>Tüm planlar aynı özellikleri içerir — süre ne kadar uzunsa o kadar tasarruf edersin.</p>
|
||
</div>
|
||
<div class="prm-plans">
|
||
@foreach($plans as $idx => $plan)
|
||
@php
|
||
$isFeatured = $plan->badge_label && $idx == 1 || ($plan->badge_label && str_contains(strtolower($plan->badge_label), 'popül'));
|
||
$isActive = auth()->check() && auth()->user()->subscriptions()->where('plan_id', $plan->id)->where('status','active')->exists();
|
||
$perDay = $plan->duration_days > 0 ? round($plan->price / $plan->duration_days, 2) : 0;
|
||
$accentCls = $isFeatured ? 'featured' : '';
|
||
@endphp
|
||
<div class="prm-card {{ $accentCls }}">
|
||
@if($plan->badge_label)
|
||
@php
|
||
$badgeCls = match(true) {
|
||
str_contains(strtolower($plan->badge_label), 'değer') => 'gold',
|
||
str_contains(strtolower($plan->badge_label), 'popül') => '',
|
||
default => 'pink',
|
||
};
|
||
@endphp
|
||
<div class="prm-card-badge {{ $badgeCls }}">{{ $plan->badge_label }}</div>
|
||
@endif
|
||
|
||
<div class="prm-plan-name">{{ $plan->name }}</div>
|
||
<div class="prm-plan-price-wrap">
|
||
<span class="prm-plan-currency">₺</span><span class="prm-plan-price">{{ number_format($plan->price, 0, ',', '.') }}</span>
|
||
</div>
|
||
<div class="prm-plan-period">
|
||
@if($plan->duration_days >= 365)
|
||
{{ intdiv($plan->duration_days, 365) }} yıl
|
||
@elseif($plan->duration_days >= 30)
|
||
{{ intdiv($plan->duration_days, 30) }} ay
|
||
@else
|
||
{{ $plan->duration_days }} gün
|
||
@endif
|
||
· Günde ≈ ₺{{ $perDay }}
|
||
</div>
|
||
|
||
@if($plan->trial_days)
|
||
<div class="prm-plan-trial"><i class="bi bi-gift-fill"></i> İlk {{ $plan->trial_days }} gün ücretsiz!</div>
|
||
@endif
|
||
|
||
<div class="prm-divider"></div>
|
||
|
||
@if(count($plan->features ?? []) > 0)
|
||
<ul class="prm-features">
|
||
@foreach($plan->features as $feat)
|
||
<li><i class="bi bi-check-circle-fill"></i> {{ $feat }}</li>
|
||
@endforeach
|
||
</ul>
|
||
@endif
|
||
|
||
@if($isActive)
|
||
<a class="prm-btn-buy active-plan"><i class="bi bi-check-circle-fill"></i> Mevcut Planın</a>
|
||
@elseif($plan->purchase_link)
|
||
<a href="{{ $plan->purchase_link }}" target="_blank" rel="noopener" class="prm-btn-buy {{ $isFeatured ? 'primary' : 'outline' }}">
|
||
<i class="bi bi-bag-fill"></i> Satın Al
|
||
</a>
|
||
@else
|
||
<span class="prm-btn-buy disabled"><i class="bi bi-clock"></i> Yakında</span>
|
||
@endif
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Nasıl Çalışır --}}
|
||
<div class="prm-section-lbl">
|
||
<h2>Nasıl Çalışır?</h2>
|
||
<p>Üç adımda premium üyeliğini aktifleştir.</p>
|
||
</div>
|
||
<div class="prm-how">
|
||
<div class="prm-how-step">
|
||
<div class="prm-how-num c1"><i class="bi bi-1-circle-fill"></i></div>
|
||
<h3>Paket Seç & Öde</h3>
|
||
<p>Yukarıdaki planlardan birini seç, "Satın Al" butonuna tıkla ve güvenli ödeme sayfasına yönlendir. Ödemeyi tamamla.</p>
|
||
</div>
|
||
<div class="prm-how-step">
|
||
<div class="prm-how-num c2"><i class="bi bi-2-circle-fill"></i></div>
|
||
<h3>Aktivasyon Kodunu Al</h3>
|
||
<p>Ödemen onaylandıktan sonra sana özel bir aktivasyon kodu gönderilir. Bu kodu saklaman yeterli.</p>
|
||
</div>
|
||
<div class="prm-how-step">
|
||
<div class="prm-how-num c3"><i class="bi bi-3-circle-fill"></i></div>
|
||
<h3>Kodu Gir, Keyfini Çıkar</h3>
|
||
<p>Aşağıdaki kutuya aktivasyon kodunu gir. Anında aktif olur, tüm premium ayrıcalıklar hesabına yüklenir!</p>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Aktivasyon Kutusu --}}
|
||
<div class="prm-activate-box" id="activate">
|
||
<h2>Aktivasyon Kodun Var mı?</h2>
|
||
<p>Satın alma sonrası aldığın kodu girerek Premium üyeliğini hemen aktifleştir.</p>
|
||
|
||
@auth
|
||
<form method="POST" action="{{ route('premium.activate.redeem') }}" class="prm-code-form">
|
||
@csrf
|
||
<input type="text" name="code" id="prm-code-inp" class="prm-code-input {{ $errors->has('code') ? 'is-invalid' : '' }}"
|
||
placeholder="XXXX-XXXX-XXXX" maxlength="32" autocomplete="off" autocapitalize="characters"
|
||
value="{{ old('code') }}" spellcheck="false">
|
||
<button type="submit" class="prm-code-btn"><i class="bi bi-lightning-fill me-1"></i>Aktifleştir</button>
|
||
@if($errors->has('code'))
|
||
<div class="prm-code-error"><i class="bi bi-exclamation-circle me-1"></i>{{ $errors->first('code') }}</div>
|
||
@endif
|
||
</form>
|
||
@else
|
||
<form class="prm-code-form">
|
||
<input type="text" class="prm-code-input" placeholder="XXXX-XXXX-XXXX" disabled>
|
||
<button type="button" onclick="window.location.href='{{ route('frontend.register') }}?next={{ urlencode(route('premium.activate')) }}'" class="prm-code-btn">
|
||
<i class="bi bi-person-plus-fill me-1"></i>Giriş Yap & Aktifleştir
|
||
</button>
|
||
</form>
|
||
<div class="prm-activate-login-note">
|
||
Aktivasyon kodu kullanmak için <a href="{{ route('frontend.register') }}">üye olman</a> veya <a href="{{ route('frontend.login') }}">giriş yapman</a> gerekiyor.
|
||
</div>
|
||
@endauth
|
||
</div>
|
||
|
||
{{-- Özellikler Showcase --}}
|
||
@if(count($featureGroups ?? []) > 0)
|
||
<div class="prm-section-lbl">
|
||
<h2>Premium Ayrıcalıklar</h2>
|
||
<p>Premium üyeliğinle birlikte gelen tüm özellikler.</p>
|
||
</div>
|
||
<div class="prm-features-grid">
|
||
@foreach($featureGroups as $group)
|
||
@php
|
||
$colors = [
|
||
'Profil' => ['bg'=>'rgba(184,77,255,.12)','color'=>'#b84dff','icon'=>'bi-person-circle'],
|
||
'İzleme' => ['bg'=>'rgba(0,245,255,.12)','color'=>'#00f5ff','icon'=>'bi-play-circle-fill'],
|
||
'Sosyal' => ['bg'=>'rgba(255,45,125,.12)','color'=>'#ff2d7d','icon'=>'bi-chat-heart-fill'],
|
||
'Hesap' => ['bg'=>'rgba(255,214,10,.12)','color'=>'#ffd60a','icon'=>'bi-shield-fill-check'],
|
||
];
|
||
$c = $colors[$group['label']] ?? ['bg'=>'rgba(255,255,255,.08)','color'=>'#fff','icon'=>'bi-star-fill'];
|
||
@endphp
|
||
<div class="prm-feat-cat">
|
||
<div class="prm-feat-cat-hdr">
|
||
<div class="prm-feat-cat-icon" style="background:{{ $c['bg'] }};color:{{ $c['color'] }}">
|
||
<i class="bi {{ $c['icon'] }}"></i>
|
||
</div>
|
||
<h3>{{ $group['label'] }}</h3>
|
||
</div>
|
||
<div class="prm-feat-list">
|
||
@foreach(array_slice($group['perks'], 0, 6) as $perk)
|
||
<div class="prm-feat-item">
|
||
<div class="prm-feat-item-icon" style="background:{{ $c['bg'] }};color:{{ $c['color'] }}">
|
||
<i class="bi {{ $perk['icon'] ?? 'bi-check' }}"></i>
|
||
</div>
|
||
<div class="prm-feat-item-body">
|
||
<div class="prm-feat-item-name">{{ $perk['name'] }}</div>
|
||
@if(!empty($perk['desc']))<div class="prm-feat-item-desc">{{ $perk['desc'] }}</div>@endif
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Kozmetik Preview --}}
|
||
<div class="prm-cosmetics">
|
||
<div class="prm-cosmetics-title">Profilini Kişiselleştir</div>
|
||
<div class="prm-cosmetics-sub">Premium üyeler için özel görsel özelleştirmeler</div>
|
||
|
||
<div style="display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-bottom:36px">
|
||
<div style="text-align:center">
|
||
<div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px">Profil Çerçeveleri</div>
|
||
<div style="display:flex;gap:14px;flex-wrap:wrap;justify-content:center">
|
||
@foreach(['neon','fire','galaxy','gold','sakura','rainbow','ice'] as $fr)
|
||
<div class="frame-badge fr-{{ $fr }}">
|
||
<div class="frame-badge-inner">{{ Str::upper(substr($fr,0,2)) }}</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center">
|
||
<div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px">Yorum Arka Planları</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
|
||
@foreach(['fire'=>'Ateş','aurora'=>'Aurora','stars'=>'Yıldız','sakura'=>'Sakura','neon'=>'Neon','galaxy'=>'Galaksi','ice'=>'Buz'] as $bg => $lbl)
|
||
<div class="cb-preview cb-{{ $bg }}"><span>{{ $lbl }}</span></div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center">
|
||
<div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:14px">Kullanıcı Adı Renkleri</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
|
||
@foreach([
|
||
['gradient'=>'linear-gradient(90deg,#00f5ff,#0080ff)','name'=>'Okyanus'],
|
||
['gradient'=>'linear-gradient(90deg,#ff2d7d,#b84dff)','name'=>'Galaksi'],
|
||
['gradient'=>'linear-gradient(90deg,#ffd700,#ff8c00)','name'=>'Altın'],
|
||
['gradient'=>'linear-gradient(90deg,#32dc64,#00c8d4)','name'=>'Orman'],
|
||
['gradient'=>'linear-gradient(90deg,#ff6b35,#ff2d7d)','name'=>'Ateş'],
|
||
['gradient'=>'linear-gradient(90deg,#a8edff,#006fbf)','name'=>'Buz'],
|
||
['gradient'=>'linear-gradient(90deg,#b84dff,#7c3aed)','name'=>'Mor'],
|
||
] as $uc)
|
||
<span class="uc-chip" style="background:{{ $uc['gradient'] }};-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;border-color:rgba(255,255,255,.12)">{{ $uc['name'] }}</span>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- FAQ --}}
|
||
<div class="prm-faq">
|
||
<h2>Sık Sorulan Sorular</h2>
|
||
@foreach([
|
||
['s'=>'Ödeme yaptıktan sonra nasıl aktifleştiririm?','c'=>'Ödemen onaylandıktan sonra sana aktivasyon kodu gönderilir. Bu sayfadaki "Aktivasyon Kodun Var mı?" kısmına kodu girip "Aktifleştir" butonuna tıklaman yeterli.'],
|
||
['s'=>'Mevcut Premium üyeliğim varken başka bir kod girebilir miyim?','c'=>'Evet! Mevcut üyelik süren bitmeden kod girersen süreler üst üste eklenir (stack). Hiç süre kaybetmezsin.'],
|
||
['s'=>'Aktivasyon kodum çalışmıyorsa ne yapmalıyım?','c'=>'Kodu büyük harflerle ve tire işaretleriyle birlikte girdiğinden emin ol (XXXX-XXXX-XXXX). Sorun devam ederse destek hattına başvur.'],
|
||
['s'=>'Premium üyeliğimi iptal edebilir miyim?','c'=>'Premium üyeliğin süre tabanlıdır; otomatik yenileme yoktur. Süre dolunca normal hesabına dönersin.'],
|
||
['s'=>'Premium özellikler hangi cihazlarda çalışır?','c'=>'Tüm cihazlarda (bilgisayar, tablet, telefon) çalışır. Hesabına giriş yaptığın her yerde premium ayrıcalıklarını kullanabilirsin.'],
|
||
] as $faq)
|
||
<div class="prm-faq-item">
|
||
<button class="prm-faq-q" onclick="this.closest('.prm-faq-item').classList.toggle('open')">
|
||
<span>{{ $faq['s'] }}</span>
|
||
<i class="bi bi-plus-lg"></i>
|
||
</button>
|
||
<div class="prm-faq-a">{{ $faq['c'] }}</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
</div>{{-- /prm-wrap --}}
|
||
</div>{{-- /pg --}}
|
||
|
||
<script>
|
||
// Yıldız parçacıkları
|
||
(function(){
|
||
const c = document.getElementById('prm-stars');
|
||
if(!c) return;
|
||
for(let i=0;i<60;i++){
|
||
const s = document.createElement('span');
|
||
s.style.cssText = `left:${Math.random()*100}%;top:${Math.random()*100}%;--d:${2+Math.random()*4}s;--delay:-${Math.random()*4}s`;
|
||
c.appendChild(s);
|
||
}
|
||
})();
|
||
|
||
// Kod input: otomatik büyük harf + tire formatı
|
||
(function(){
|
||
const inp = document.getElementById('prm-code-inp');
|
||
if(!inp) return;
|
||
inp.addEventListener('input', function(){
|
||
let v = this.value.replace(/[^A-Za-z0-9]/g,'').toUpperCase();
|
||
const parts = v.match(/.{1,4}/g) || [];
|
||
this.value = parts.join('-').slice(0, 14);
|
||
});
|
||
})();
|
||
</script>
|
||
@endsection
|