/* ===========================
   SHIRRO STORE STYLE
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#070b14;
    color:#fff;
    overflow-x:hidden;
}

/* Background */

.bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
    radial-gradient(circle at top,#00aaff22,transparent 60%),
    radial-gradient(circle at bottom,#0066ff22,transparent 60%);
    z-index:-1;
}

/* Header */

header{
    text-align:center;
    padding:50px 20px 20px;
}

.logo{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #00bfff;
    box-shadow:
    0 0 15px #00bfff,
    0 0 35px #00bfff;
    animation:float 3s ease-in-out infinite;
}

header h1{
    margin-top:20px;
    font-size:38px;
    color:#fff;
    letter-spacing:2px;
    text-shadow:
    0 0 10px #00bfff,
    0 0 25px #00bfff;
}

header p{
    margin-top:10px;
    color:#9fdcff;
    font-size:16px;
}

/* Tombol */

.menu{
    width:90%;
    max-width:450px;
    margin:30px auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.btn{
    text-decoration:none;
    color:#fff;
    padding:16px;
    border-radius:15px;
    text-align:center;
    font-weight:bold;
    font-size:18px;
    transition:.3s;
}

.order{
    background:#008cff;
    box-shadow:0 0 20px #008cff;
}

.sell{
    background:#ff3b5b;
    box-shadow:0 0 20px #ff3b5b;
}

.btn:hover{
    transform:translateY(-4px);
}

/* Fitur */

.fitur{
    width:90%;
    max-width:500px;
    margin:30px auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.box{
    background:#111827;
    border:1px solid rgba(0,170,255,.3);
    border-radius:15px;
    padding:20px;
    text-align:center;
    transition:.3s;
}

.box:hover{
    transform:scale(1.03);
    box-shadow:0 0 20px #00bfff;
}

.box h3{
    margin:10px 0;
    color:#00d9ff;
}

.box p{
    color:#bbb;
    font-size:14px;
}

/* Footer */

footer{
    text-align:center;
    color:#888;
    margin:40px 0 20px;
    font-size:14px;
}

/* Animasi */

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

/* Responsive */

@media(max-width:480px){

header h1{
font-size:30px;
}

.logo{
width:110px;
height:110px;
}

.btn{
font-size:16px;
}

}/* ===========================
   BINTANG
=========================== */

.star{

position:fixed;

width:3px;
height:3px;

background:white;

border-radius:50%;

opacity:.8;

animation:blink infinite;

pointer-events:none;

z-index:-1;

}

@keyframes blink{

0%{
opacity:.2;
transform:scale(.5);
}

50%{
opacity:1;
transform:scale(1.5);
}

100%{
opacity:.2;
transform:scale(.5);
}

}.container{
width:90%;
max-width:500px;
margin:30px auto;
display:flex;
flex-direction:column;
gap:20px;
}

.card{
background:#111827;
border-radius:20px;
padding:20px;
border:1px solid rgba(0,170,255,.3);
box-shadow:0 0 20px rgba(0,170,255,.2);
position:relative;
transition:.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 0 30px #00bfff;
}

.card h2{
margin-bottom:10px;
}

.card h3{
color:#00d9ff;
margin-bottom:20px;
}

.buy{
display:block;
text-align:center;
padding:15px;
background:#00aaff;
color:white;
text-decoration:none;
border-radius:12px;
font-weight:bold;
}

.buy:hover{
background:#0090dd;
}

.badge{
position:absolute;
top:15px;
right:15px;
background:#ff9800;
padding:5px 10px;
border-radius:20px;
font-size:12px;
font-weight:bold;
}/* Splash Screen */

#splash{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#050b16;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:9999;
}

.splash-logo{
width:140px;
height:140px;
border-radius:50%;
border:4px solid #00bfff;
box-shadow:0 0 25px #00bfff;
animation:logoFloat 2s infinite ease-in-out;
}

#splash h1{
margin-top:20px;
font-size:32px;
color:white;
text-shadow:0 0 20px #00bfff;
}

.loading{
margin-top:25px;
width:220px;
height:8px;
background:#1d2939;
border-radius:10px;
overflow:hidden;
}

.loading-bar{
width:0%;
height:100%;
background:#00bfff;
animation:loading 3s forwards;
}

@keyframes loading{
0%{width:0%;}
100%{width:100%;}
}

@keyframes logoFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}/* Bottom Navigation */

.bottom-nav{
position:fixed;
bottom:15px;
left:50%;
transform:translateX(-50%);
width:95%;
max-width:500px;
height:70px;
background:rgba(17,24,39,.95);
backdrop-filter:blur(10px);
border-radius:20px;
display:flex;
justify-content:space-around;
align-items:center;
box-shadow:0 0 20px rgba(0,191,255,.3);
border:1px solid rgba(0,191,255,.2);
z-index:999;
}

.bottom-nav a{
text-decoration:none;
color:#9fb3c8;
display:flex;
flex-direction:column;
align-items:center;
font-size:12px;
transition:.3s;
}

.bottom-nav a:hover,
.bottom-nav a.active{
color:#00bfff;
transform:translateY(-4px);
}

.bottom-nav span{
margin-top:4px;
}/* ===== Banner Slider ===== */

.slider{
width:90%;
max-width:600px;
margin:25px auto;
position:relative;
}

.slides{
display:none;
padding:25px;
background:linear-gradient(135deg,#111827,#1e3a5f);
border:1px solid #00bfff;
border-radius:20px;
text-align:center;
box-shadow:0 0 20px rgba(0,191,255,.3);
}

.slides h2{
color:#00d9ff;
margin-bottom:10px;
}

.slides p{
color:white;
}

.fade{
animation:fade 1s;
}

@keyframes fade{
from{opacity:.3;}
to{opacity:1;}
}/* Testimoni */

.testimoni{
width:90%;
max-width:600px;
margin:40px auto;
}

.testimoni h2{
text-align:center;
color:#00bfff;
margin-bottom:20px;
}

.review{
background:#111827;
border:1px solid rgba(0,191,255,.3);
border-radius:15px;
padding:20px;
margin-bottom:15px;
box-shadow:0 0 15px rgba(0,191,255,.2);
transition:.3s;
}

.review:hover{
transform:translateY(-5px);
box-shadow:0 0 25px rgba(0,191,255,.5);
}

.review p{
margin:10px 0;
}

.review span{
color:#00d9ff;
font-size:14px;
}/* FAQ */

.faq{
width:90%;
max-width:600px;
margin:40px auto;
}

.faq h2{
text-align:center;
color:#00bfff;
margin-bottom:20px;
}

.faq-item{
background:#111827;
border:1px solid rgba(0,191,255,.3);
border-radius:15px;
padding:20px;
margin-bottom:15px;
}

.faq-item h3{
color:#fff;
margin-bottom:10px;
}

.faq-item p{
color:#bfc7d5;
line-height:1.6;
}/* ===== Footer ===== */

.footer{
margin-top:60px;
padding:40px 20px 100px;
background:#0d1117;
border-top:1px solid rgba(0,191,255,.2);
text-align:center;
}

.footer-logo img{
width:70px;
height:70px;
border-radius:50%;
border:2px solid #00bfff;
box-shadow:0 0 15px #00bfff;
margin-bottom:10px;
}

.footer-logo h2{
color:#00d9ff;
margin-bottom:15px;
}

.footer-text{
color:#bfc7d5;
max-width:500px;
margin:0 auto 20px;
line-height:1.6;
}

.footer-menu{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
margin-bottom:20px;
}

.footer-menu a{
color:#fff;
text-decoration:none;
transition:.3s;
}

.footer-menu a:hover{
color:#00bfff;
}

.copyright{
font-size:13px;
color:#7b8aa0;
}.history{
background:#8e44ad;
box-shadow:0 0 20px #8e44ad;
}.status{
background:#16a34a;
box-shadow:0 0 20px #16a34a;
}.input{
width:100%;
padding:15px;
border:none;
border-radius:12px;
margin-bottom:20px;
background:#1f2937;
color:white;
font-size:16px;
}.admin{
background:#f59e0b;
box-shadow:0 0 20px #f59e0b;
}.notif{
width:90%;
max-width:500px;
margin:20px auto;
padding:15px;
background:linear-gradient(90deg,#00bfff,#0066ff);
border-radius:15px;
text-align:center;
font-weight:bold;
animation:slide 2s infinite alternate;
box-shadow:0 0 20px #00bfff;
}

@keyframes slide{

0%{
transform:translateX(-5px);
}

100%{
transform:translateX(5px);
}

}.popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.8);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.popup-box{

background:#111827;

padding:30px;

border-radius:20px;

text-align:center;

width:90%;

max-width:350px;

box-shadow:0 0 30px #00bfff;

}

.popup button{

margin-top:20px;

padding:12px 25px;

background:#00bfff;

border:none;

border-radius:10px;

color:white;

font-weight:bold;

cursor:pointer;

}/* CONTACT */

.contact{
width:90%;
max-width:600px;
margin:50px auto;
text-align:center;
}

.contact h2{
color:#00d9ff;
margin-bottom:20px;
}

.contact-card{
background:#111827;
padding:25px;
border-radius:20px;
border:1px solid rgba(0,191,255,.3);
box-shadow:0 0 20px rgba(0,191,255,.2);
}

.contact-btn{
display:block;
margin:15px 0;
padding:15px;
border-radius:12px;
background:#00bfff;
color:white;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.contact-btn:hover{
background:#0095e8;
transform:scale(1.03);
}