@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800;900&display=swap');


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{


    font-family:"Vazirmatn",sans-serif;


    color:white;


    background:


    linear-gradient(
    rgba(10,10,10,.85),
    rgba(10,10,10,.85)
    ),


    url("/static/Back.png");



    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


    background-attachment:fixed;


    overflow-x:hidden;

}





::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#111;

}



::-webkit-scrollbar-thumb{

    background:#ff8800;

    border-radius:50px;

}



::-webkit-scrollbar-thumb:hover{

    background:#ffa31a;

}






header{


    position:fixed;


    top:0;


    left:0;


    width:100%;



    padding:18px 60px;



    display:flex;


    justify-content:space-between;


    align-items:center;



    background:rgba(15,15,15,.75);



    backdrop-filter:blur(15px);



    border-bottom:

    1px solid rgba(255,255,255,.08);



    z-index:999;



}




.logo{


    font-size:32px;


    font-weight:900;


    color:#ff8800;


    letter-spacing:2px;



    text-shadow:

    0 0 20px rgba(255,136,0,.5);



}




nav{


    display:flex;


    gap:30px;



}




nav a{


    color:#ddd;


    text-decoration:none;


    font-size:17px;


    font-weight:600;


    transition:.3s;



}



nav a:hover{


    color:#ff8800;


}




.hero{


    height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;



    text-align:center;


    padding:20px;




    background:


    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.75)

    ),



    url("/static/hero.jpg");




    background-size:cover;



    background-position:center;



}




.hero h1{


    font-size:72px;


    font-weight:900;



    text-shadow:

    0 0 30px rgba(255,136,0,.5);



}




.hero p{


    margin-top:20px;


    font-size:24px;


    color:#ddd;



}





.btn{


    display:inline-block;



    margin-top:35px;



    padding:16px 45px;



    background:#ff8800;



    color:white;



    text-decoration:none;



    border-radius:10px;



    font-weight:700;



    transition:.3s;



}




.btn:hover{


    background:#ffa31a;


    transform:translateY(-5px);



}

#about{


    padding:120px 20px 40px;


    display:flex;


    justify-content:center;



}



.about-card{


    width:100%;


    max-width:850px;



    padding:45px;



    background:rgba(20,20,20,.82);



    backdrop-filter:blur(15px);



    border-radius:20px;



    border:1px solid rgba(255,255,255,.08);



    box-shadow:

    0 20px 60px rgba(0,0,0,.5);



    transition:.3s;



}




.about-card:hover{


    transform:translateY(-8px);


    border-color:#ff8800;



}




.about-tag{


    color:#ff8800;


    font-size:14px;


    font-weight:800;


    letter-spacing:3px;



}




.about-card h2{


    margin-top:15px;


    font-size:45px;



}




.about-card p{


    margin-top:20px;


    color:#ccc;


    line-height:2;


    font-size:18px;



}





.features{


    margin-top:30px;


    display:grid;


    gap:15px;



}





.feature{


    padding:20px;


    background:rgba(255,255,255,.04);


    border-left:4px solid #ff8800;


    border-radius:10px;



}





.feature h3{


    margin-bottom:8px;



}





.feature span{


    color:#aaa;


    line-height:1.8;



}






.items{


    width:90%;


    margin:80px auto;



    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:30px;



}





.card{


    background:rgba(20,20,20,.9);


    border-radius:18px;



    overflow:hidden;



    border:1px solid rgba(255,255,255,.08);



    text-align:center;



    transition:.35s;



}




.card:hover{


    transform:translateY(-10px);


    border-color:#ff8800;



    box-shadow:

    0 20px 45px rgba(255,136,0,.25);



}




.card img{


    width:100%;


    height:220px;


    object-fit:contain;


    padding:20px;


    background:#111;



}





.card h3{


    font-size:22px;


    margin:20px 10px 10px;



}




.card p{


    color:#ddd;


    font-size:16px;


    margin:10px;



}





.price{


    display:block;


    color:#ff8800;


    font-size:26px;


    font-weight:800;


    margin:15px;



}





.card button{


    width:85%;


    margin:20px auto;


    padding:14px;


    background:#ff8800;


    border:none;


    color:white;


    border-radius:10px;


    cursor:pointer;


    font-size:16px;


    font-weight:700;


    transition:.3s;



}





.card button:hover{


    background:#ffa31a;


    transform:scale(1.05);



}






#contact{


    width:100%;


    padding:20px 20px 120px;


    display:flex;


    justify-content:center;



}



.contact-btn{


    display:inline-block;


    margin-top:25px;


    padding:14px 40px;


    background:#ff8800;


    color:white;


    text-decoration:none;


    border-radius:50px;


    font-size:17px;


    font-weight:800;


    transition:.3s;


    box-shadow:

    0 10px 30px rgba(255,136,0,.35);


}



.contact-btn:hover{


    background:#ffa31a;


    transform:translateY(-5px);


}



#contact .about-card{


    margin-top:0;



}





footer{


    padding:35px;


    text-align:center;


    color:#aaa;


    background:rgba(15,15,15,.85);



    border-top:1px solid rgba(255,255,255,.08);



}

.footer-content{

    width:90%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-right{

    flex:1;

    text-align:right;

}

.footer-center{

    flex:1;

    text-align:center;

}

.footer-left{

    flex:1;

    text-align:left;

}

.admin-sticker{


    display:inline-block;


    padding:12px 25px;



    background:#ff8800;



    color:white;



    text-decoration:none;



    border-radius:50px;



    font-weight:800;



    box-shadow:

    0 10px 35px rgba(255,136,0,.45);



    transition:.3s;



}





.admin-sticker:hover{


    background:#ffa31a;


    transform:translateY(-5px);



}


.footer-content{

    width:90%;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}


.footer-center{

    width:100%;

    text-align:center;

}


.footer-left{

    position:absolute;

    left:0;

    display:flex;

    align-items:center;

}


.footer-right{

    display:none;

}



.admin-container{


    display:flex;


    min-height:100vh;


    background:#111;



}





.sidebar{


    width:260px;


    background:#171717;


    padding:30px;


    border-right:2px solid #ff8800;



}





.sidebar h2{


    color:#ff8800;


    margin-bottom:40px;



}





.sidebar a{


    display:block;


    padding:15px;


    margin-bottom:12px;


    color:white;


    text-decoration:none;


    border-radius:8px;


    transition:.3s;



}





.sidebar a:hover{


    background:#ff8800;



}





.content{


    flex:1;


    padding:40px;



}





.content h1{


    color:#ff8800;


    margin-bottom:30px;



}





.dashboard{


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:20px;


    margin-bottom:40px;



}





.box{


    background:#1d1d1d;


    padding:30px;


    border-radius:15px;


    text-align:center;


    border:1px solid #333;



}





.box h2{


    color:#ff8800;


    font-size:35px;



}





.box p{


    color:#aaa;


    margin-top:10px;



}



table{


    width:100%;


    border-collapse:collapse;


    background:#1a1a1a;


    border-radius:12px;


    overflow:hidden;



}




th{


    background:#ff8800;


    padding:15px;



}




td{


    padding:15px;


    text-align:center;


    border-bottom:1px solid #333;



}




tr:hover{


    background:#222;



}



.edit-btn{


    padding:10px 18px;


    background:#2196f3;


    color:white;


    text-decoration:none;


    border-radius:7px;



}





.delete-btn{


    padding:10px 18px;


    background:#e53935;


    color:white;


    text-decoration:none;


    border-radius:7px;



}




.login-page{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;



    background:


    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.8)
    ),


    url("/static/Back.png");



    background-size:cover;


    background-position:center;



}





.login-card{


    width:420px;


    padding:45px;


    background:rgba(20,20,20,.9);


    border:1px solid #ff8800;


    border-radius:18px;


    text-align:center;



}





.login-card h1{


    color:#ff8800;


    font-size:42px;


    margin-bottom:30px;



}





.login-card input,
.login-card select{


    width:100%;


    padding:15px;


    margin-bottom:20px;


    background:#222;


    color:white;


    border:none;


    border-radius:8px;



}




.login-card button{


    width:100%;


    padding:15px;


    background:#ff8800;


    border:none;


    color:white;


    border-radius:8px;


    cursor:pointer;


    font-weight:700;



}





.login-card button:hover{


    background:#ffa31a;



}




@media(max-width:1100px){



.items{


    grid-template-columns:repeat(2,1fr);



}



.dashboard{


    grid-template-columns:repeat(2,1fr);



}


}






@media(max-width:800px){



header{


    padding:15px 20px;


    flex-direction:column;


    gap:15px;



}




nav{


    flex-wrap:wrap;


    justify-content:center;



}




.hero h1{


    font-size:45px;



}




.items{


    grid-template-columns:1fr;



}




.admin-container{


    flex-direction:column;



}





.sidebar{


    width:100%;


    border-right:none;


    border-bottom:2px solid #ff8800;



}




.content{


    padding:20px;



}





.dashboard{


    grid-template-columns:1fr;



}




table{


    display:block;


    overflow-x:auto;



}



.footer-content{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:15px;

}


.footer-center{

    order:1;

    width:100%;

    text-align:center;

}


.footer-left{

    order:2;

    position:static;

    width:100%;

    display:flex;

    justify-content:center;

}


.footer-right{

    display:none;

}

}



@media(max-width:500px){



.about-card{


    padding:25px;



}





.about-card h2{


    font-size:32px;



}




.login-card{


    width:90%;


    padding:30px;



}





.admin-sticker{


    padding:10px 18px;



}



}

.login-page *, .admin-container * { font-family:"Vazirmatn",sans-serif !important; color:white; }

.buy-btn{


    display:inline-block;


    width:85%;


    margin:20px auto;


    padding:14px;


    background:#ff8800;


    color:white;


    text-decoration:none;


    border-radius:10px;


    font-size:16px;


    font-weight:700;


    transition:.3s;


}


.buy-btn:hover{


    background:#ffa31a;


    transform:scale(1.05);


}

.sell-banner{

    display:flex;

    justify-content:center;

    padding:30px 20px 10px;

}

.sell-banner-card{

    width:100%;

    max-width:900px;

    padding:45px;

    text-align:center;

    background:rgba(20,20,20,.82);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    transition:.3s;

}

.sell-banner-card:hover{

    border-color:#ff8800;

    transform:translateY(-8px);

}

.sell-tag{

    color:#ff8800;

    font-size:14px;

    font-weight:800;

    letter-spacing:4px;

}

.sell-banner-card h2{

    margin-top:15px;

    font-size:45px;

}

.sell-banner-card p{

    margin:20px auto 30px;

    max-width:700px;

    color:#ccc;

    font-size:18px;

    line-height:2;

}

.sell-btn{

    display:inline-block;

    padding:15px 45px;

    background:#ff8800;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:700;

    transition:.3s;

}

.steam-services{

    width:100%;

    display:flex;

    justify-content:center;

    padding:30px 20px;

}

.steam-card{

    width:100%;

    max-width:900px;

    background:rgba(20,20,20,.82);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    backdrop-filter:blur(15px);

    overflow:hidden;

    transition:.3s;

}

.steam-card[open]{

    border-color:#1b7fcc;

    box-shadow:0 20px 50px rgba(27,127,204,.25);

}

.steam-card summary{

    list-style:none;

    cursor:pointer;

    padding:25px 35px;

    font-size:28px;

    font-weight:800;

    color:#1b7fcc;

    user-select:none;

}

.steam-card summary::-webkit-details-marker{

    display:none;

}

.steam-card summary::after{

    content:"+";

    float:left;

    font-size:30px;

    transition:.3s;

}

.steam-card[open] summary::after{

    content:"−";

}

.steam-content{

    padding:0 35px 35px;

}

.steam-item{

    padding:25px 0;

    border-top:1px solid rgba(255,255,255,.08);

}

.steam-item h3{

    color:#fff;

    margin-bottom:12px;

    font-size:24px;

}

.steam-item p{

    color:#bdbdbd;

    line-height:2;

    margin-bottom:20px;

}

.steam-btn{

    display:inline-block;

    padding:12px 35px;

    background:#1b7fcc;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:700;

    transition:.3s;

}

.steam-btn:hover{

    background:#2797eb;

    transform:translateY(-4px);

}

.steam-btn.disabled{

    background:#444;

    color:#bbb;

    cursor:not-allowed;

    pointer-events:none;

}

@media(max-width:800px){

.steam-card summary{

    font-size:22px;

    padding:20px;

}

.steam-content{

    padding:0 20px 25px;

}

.steam-item h3{

    font-size:20px;

}

}

.sell-btn:hover{

    background:#ffa31a;

    transform:translateY(-5px);

}

@media(max-width:800px){

.sell-banner-card{

    padding:30px;

}

.sell-banner-card h2{

    font-size:32px;

}

.sell-banner-card p{

    font-size:16px;

}


}

.updates{

    width:100%;

    display:flex;

    justify-content:center;

    padding:30px 20px 100px;

}

.updates-card{

    width:100%;

    max-width:850px;

    background:rgba(20,20,20,.82);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    backdrop-filter:blur(15px);

    overflow:hidden;

    transition:.3s;

}

.updates-card[open]{

    border-color:#ff8800;

    box-shadow:0 20px 50px rgba(255,136,0,.25);

}

.updates-card summary{

    list-style:none;

    cursor:pointer;

    padding:25px 35px;

    font-size:28px;

    font-weight:800;

    color:#ff8800;

    user-select:none;

}

.updates-card summary::-webkit-details-marker{

    display:none;

}

.updates-card summary::after{

    content:"+";

    float:left;

    font-size:30px;

    transition:.3s;

}

.updates-card[open] summary::after{

    content:"−";

}

.updates-content{

    padding:0 35px 35px;

}

.update-item{

    padding:18px 0;

    border-top:1px solid rgba(255,255,255,.08);

}

.update-item h3{

    color:#fff;

    margin-bottom:10px;

}

.update-item p{

    color:#bbb;

    line-height:2;

}

@media(max-width:800px){

.updates-card summary{

    font-size:22px;

    padding:20px;

}

.updates-content{

    padding:0 20px 25px;

}

}
.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:32px;

    font-weight:900;

    color:#ff8800;

}

.logo img{

    width:50px;

    height:50px;

    object-fit:contain;

}

.rules-card{

width:90%;
max-width:900px;

margin:80px auto;

background:rgba(20,20,20,.85);

backdrop-filter:blur(10px);

border-radius:25px;

padding:40px;

color:white;

box-shadow:0 0 30px rgba(0,0,0,.4);

}

.rules-card h1{

text-align:center;

margin-bottom:30px;

}

.rules-card p{

line-height:2;

font-size:18px;

margin-bottom:15px;

}

.back-btn{

display:inline-block;

margin-top:30px;

padding:12px 30px;

background:#ff8800;

color:white;

text-decoration:none;

border-radius:12px;

transition:.3s;

}

.back-btn:hover{

background:#ff8800;

}

.rules-link {

    color: orange;

    font-weight: bold;

    text-decoration: none;

}

.rules-link:hover {

    color: #ffb347;

}

#steam{

    display: flex;

    justify-content: center;

    width: 100%;

    scroll-margin-top: 100px;
}

.steam-card{

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;

}