/* =========================
RENVOSTORE FULL STYLE.CSS
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
height:100%;
}

body{
font-family:Arial,sans-serif;
overflow:hidden;
background:#050505;
color:white;
cursor:none;
}

/* =========================
BACKGROUND
========================= */

body::after{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(rgba(184,77,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(184,77,255,.035) 1px, transparent 1px);
background-size:42px 42px;
animation:gridMove 14s linear infinite;
z-index:-5;
pointer-events:none;
}

body::before{
content:"";
position:fixed;
left:50%;
top:50%;
width:1100px;
height:1100px;
transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(184,77,255,.12), transparent 65%);
animation:pulseGlow 5s ease-in-out infinite;
z-index:-4;
pointer-events:none;
}

#particles-js{
position:fixed;
inset:0;
z-index:-3;
background:
radial-gradient(circle at center, rgba(140,0,255,.08), transparent 60%),
#050505;
}

.overlay{
position:fixed;
inset:0;
z-index:-2;
background:linear-gradient(
180deg,
rgba(0,0,0,.18),
rgba(0,0,0,.58)
);
pointer-events:none;
}

.bottom-glow{
position:fixed;
bottom:-180px;
left:50%;
transform:translateX(-50%);
width:1500px;
height:520px;
border-radius:50%;
background:radial-gradient(circle,
rgba(184,77,255,.14) 0%,
rgba(184,77,255,.08) 35%,
rgba(184,77,255,.03) 55%,
transparent 75%);
filter:blur(75px);
pointer-events:none;
z-index:-1;
animation:bottomPulse 5s ease-in-out infinite;
}

/* =========================
MAIN BOX
========================= */

.box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:430px;
padding:38px;
border-radius:24px;
background:rgba(15,15,20,.82);
backdrop-filter:blur(14px);
border:1px solid rgba(170,0,255,.25);
box-shadow:
0 0 25px rgba(140,0,255,.22),
0 0 80px rgba(140,0,255,.10);
text-align:center;
z-index:5;
animation:fadeUp .8s ease;
filter:blur(6px);
opacity:1;
}

body.loaded .box{
filter:none;
}

.verify-page .box{
width:620px;
max-width:94%;
filter:none !important;
opacity:1 !important;
}

.box::before{
content:"";
position:absolute;
inset:-45px;
background:radial-gradient(circle, rgba(184,77,255,.12), transparent 70%);
z-index:-1;
}

/* =========================
TEXT
========================= */

h1{
font-size:52px;
font-weight:900;
margin-bottom:16px;
letter-spacing:1px;
color:#b84dff;
text-shadow:
0 0 8px rgba(184,77,255,.55),
0 0 18px rgba(184,77,255,.35);
}

.store-badge{
margin-bottom:18px;
font-size:14px;
color:#d8b4fe;
opacity:.92;
}

.tagline{
margin-top:16px;
font-size:14px;
color:#c084fc;
opacity:.92;
}

/* =========================
AVATAR
========================= */

.avatar-wrap{
position:relative;
width:158px;
height:158px;
margin:-92px auto 18px auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
z-index:5;
}

.avatar-wrap::before{
content:"";
position:absolute;
inset:-3px;
border-radius:50%;
background:conic-gradient(
from 0deg,
#3b0764,
#6d28d9,
#a855f7,
#7e22ce,
#4c1d95,
#3b0764
);
animation:ringSpin 4s linear infinite;
filter:blur(1.5px);
opacity:.95;
z-index:1;
}

.avatar-wrap::after{
content:"";
position:absolute;
inset:4px;
border-radius:50%;
background:#111116;
z-index:2;
}

.profile-avatar{
position:relative;
width:148px;
height:148px;
border-radius:50%;
object-fit:cover;
z-index:3;
box-shadow:0 0 12px rgba(168,85,247,.18);
}

/* =========================
INPUT
========================= */

.input-wrap{
position:relative;
width:100%;
margin-bottom:16px;
}

.input-wrap input{
width:100%;
height:54px;
padding:0 16px;
border:none;
outline:none;
border-radius:12px;
font-size:16px;
background:#111116;
color:white;
border:1px solid rgba(160,80,255,.25);
position:relative;
z-index:2;
}

.input-wrap input:focus{
border:1px solid #a855f7;
box-shadow:0 0 12px rgba(168,85,247,.35);
}

#typingText{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
font-size:16px;
color:#777;
pointer-events:none;
z-index:3;
}

.cursor{
animation:blink .8s infinite;
}

/* =========================
BUTTONS
========================= */

button,
.btn{
width:100%;
height:54px;
border:none;
border-radius:12px;
font-size:17px;
font-weight:800;
cursor:pointer;
color:white;
background:linear-gradient(90deg,#6d28d9,#9333ea,#c026d3);
background-size:200%;
transition:.3s;
box-shadow:0 0 18px rgba(168,85,247,.30);
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
}

button:hover,
.btn:hover{
background-position:right center;
transform:translateY(-2px);
box-shadow:0 0 28px rgba(168,85,247,.50);
}

.store-btn,
.copy{
display:block;
width:100%;
height:54px;
line-height:54px;
margin-top:12px;
border-radius:12px;
text-decoration:none;
font-size:17px;
font-weight:800;
text-align:center;
color:white;
background:linear-gradient(90deg,#111,#222,#111);
border:1px solid rgba(184,77,255,.35);
transition:.3s;
box-shadow:none;
}

.store-btn:hover,
.copy:hover{
transform:translateY(-2px);
box-shadow:0 0 18px rgba(184,77,255,.25);
}

.btns{
display:flex;
gap:12px;
margin-top:18px;
flex-wrap:wrap;
}

/* =========================
VERIFY CARD
========================= */

.timer-box{
margin:14px 0 18px;
padding:16px 22px;
border-radius:14px;
background:#0d0d12;
border:1px solid rgba(184,77,255,.22);
font-size:18px;
font-weight:700;
color:#e9d5ff;
box-shadow:0 0 14px rgba(184,77,255,.10);
line-height:1.5;
white-space:normal;
word-break:keep-all;
}

.product{
text-align:left;
padding:22px;
border-radius:18px;
background:#0b0b10;
border:1px solid rgba(184,77,255,.18);
line-height:1.9;
font-size:18px;
white-space:pre-line;
min-height:280px;
}

/* =========================
INTRO
========================= */

#introScreen{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(3px);
display:flex;
justify-content:center;
align-items:center;
z-index:999;
cursor:none !important;
transition:.8s;
}

#introScreen h2{
font-size:34px;
color:#d8b4fe;
text-shadow:0 0 15px rgba(184,77,255,.45);
animation:pulseText 1.8s infinite;
}

.verify-page #introScreen{
display:none !important;
}

/* =========================
MUSIC BAR
========================= */

#musicBar{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%);
z-index:999;
display:flex;
align-items:center;
gap:12px;
padding:8px 14px;
height:58px;
border-radius:40px;
background:rgba(15,15,20,.82);
backdrop-filter:blur(12px);
border:1px solid rgba(184,77,255,.25);
box-shadow:0 0 20px rgba(184,77,255,.15);
}

#musicBar span{
font-size:14px;
font-weight:700;
color:#d8b4fe;
white-space:nowrap;
}

#musicBar button{
width:42px;
height:42px;
border:none;
border-radius:50%;
padding:0;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(90deg,#7c3aed,#9333ea);
}

#musicBar button span{
font-size:22px;
font-weight:900;
position:relative;
top:-1px;
}

/* =========================
CURSOR
========================= */

.cursor-dot{
position:fixed;
width:14px;
height:14px;
border-radius:50%;
background:#b84dff;
pointer-events:none;
z-index:9999;
transform:translate(-50%,-50%);
box-shadow:
0 0 12px rgba(184,77,255,.9),
0 0 25px rgba(184,77,255,.45);
}

.cursor-ring{
position:fixed;
width:34px;
height:34px;
border-radius:50%;
border:2px solid rgba(184,77,255,.55);
pointer-events:none;
z-index:9998;
transform:translate(-50%,-50%);
transition:.08s linear;
}

.trail,.spark,.boom,.confetti,.logo-spark{
pointer-events:none;
}

/* =========================
ANIMATIONS
========================= */

@keyframes blink{
0%,50%{opacity:1;}
51%,100%{opacity:0;}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translate(-50%,-50%) scale(.92);
}
to{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
}

@keyframes pulseText{
0%,100%{opacity:.65;}
50%{opacity:1;}
}

@keyframes pulseGlow{
0%,100%{
transform:translate(-50%,-50%) scale(1);
opacity:.65;
}
50%{
transform:translate(-50%,-50%) scale(1.15);
opacity:1;
}
}

@keyframes gridMove{
from{transform:translateY(0);}
to{transform:translateY(42px);}
}

@keyframes bottomPulse{
0%,100%{
opacity:.65;
transform:translateX(-50%) scale(1);
}
50%{
opacity:1;
transform:translateX(-50%) scale(1.08);
}
}

@keyframes ringSpin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:700px){

body{
cursor:auto !important;
}

.cursor-dot,
.cursor-ring{
pointer-events:none;
}

#musicBar{
width:92%;
justify-content:space-between;
}

#musicBar span{
font-size:12px;
max-width:70%;
overflow:hidden;
text-overflow:ellipsis;
}

.box{
width:94%;
padding:26px;
}

h1{
font-size:40px;
}

.timer-box{
font-size:17px;
}

.product{
font-size:16px;
}

.btns{
flex-direction:column;
}

}

.confetti{
position:fixed;
top:-20px;
z-index:99999;
pointer-events:none;
border-radius:2px;
animation:confettiFall 2.8s linear forwards;
}

@keyframes confettiFall{
0%{
transform:translateY(0) rotate(0deg);
opacity:1;
}
100%{
transform:translateY(110vh) rotate(720deg);
opacity:0;
}
}

body.verify-page{
cursor:auto !important;
}

.trail{
position:fixed;
width:8px;
height:8px;
border-radius:50%;
background:#b84dff;
pointer-events:none;
transform:translate(-50%,-50%);
opacity:.7;
z-index:9997;
animation:trailFade .35s linear forwards;
}

.spark{
position:fixed;
width:4px;
height:4px;
border-radius:50%;
background:#fff;
pointer-events:none;
transform:translate(-50%,-50%);
z-index:9998;
box-shadow:0 0 10px #fff;
animation:sparkFade .45s linear forwards;
}

.boom{
position:fixed;
width:8px;
height:8px;
border-radius:50%;
background:#c084fc;
pointer-events:none;
transform:translate(-50%,-50%);
z-index:9999;
animation:boomMove .6s ease-out forwards;
}

@keyframes boomMove{
to{
transform:translate(var(--x),var(--y));
opacity:0;
}
}

@keyframes trailFade{
to{
opacity:0;
transform:translate(-50%,-50%) scale(.2);
}
}

@keyframes sparkFade{
to{
opacity:0;
transform:translate(-50%,-50%) scale(.1);
}
}

body.verify-page,
body.verify-page *{
cursor:none !important;
}

body.verify-page .cursor-dot,
body.verify-page .cursor-ring{
display:block !important;
opacity:1 !important;
visibility:visible !important;
z-index:99999 !important;
}

body.verify-page .trail,
body.verify-page .spark,
body.verify-page .boom{
display:block !important;
}

/* VERIFY SAYFASI KÜÇÜLTME */
body.verify-page .box{
max-width: 430px !important;
width: 90% !important;
padding: 26px 24px !important;
border-radius: 24px !important;
}

body.verify-page h1{
font-size: 48px !important;
margin: 12px 0 16px !important;
}

body.verify-page .profile-avatar{
width: 96px !important;
height: 96px !important;
margin-bottom: 12px !important;
}

body.verify-page .timer-box{
padding: 12px 14px !important;
font-size: 16px !important;
margin-bottom: 16px !important;
border-radius: 16px !important;
}

body.verify-page .product-box{
min-height: 170px !important;
padding: 18px !important;
margin-bottom: 16px !important;
border-radius: 18px !important;
font-size: 15px !important;
line-height: 1.5 !important;
}

body.verify-page button,
body.verify-page .store-btn{
height: 50px !important;
font-size: 18px !important;
border-radius: 14px !important;
margin-top: 12px !important;
}

body.verify-page #musicBar{
top:18px !important;
left:50% !important;
transform:translateX(-50%) !important;
}

body.verify-page #musicBar button,
body.verify-page #musicToggle{
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
max-height: 42px !important;
position: relative !important;
top: -6px !important;

padding: 0 !important;
border-radius: 50% !important;

display: flex !important;
align-items: center !important;
justify-content: center !important;

flex-shrink: 0 !important;
line-height: 1 !important;
}

/* VERIFY BUTON DÜZGÜN FIX */
body.verify-page .btns{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
margin-top:18px !important;
align-items:center !important;
}

body.verify-page .btns .btn,
body.verify-page .btns a{
width:100% !important;
max-width:380px !important;
height:54px !important;
margin:0 !important;
padding:0 20px !important;
border-radius:16px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}

/* TÜM SAYFALAR FOOTER SABİT */
footer,
.footer,
.verify-footer{
position: fixed !important;
left: 0 !important;
bottom: 10px !important;
width: 100% !important;

text-align: center !important;
font-family: Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: .2px !important;
line-height: 1 !important;

color: #c084fc !important;
opacity: .82 !important;
text-shadow: 0 0 10px rgba(184,77,255,.20) !important;

margin: 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 999 !important;
pointer-events: none !important;
}