.hero{

    height:520px;

    border-radius:30px;

    overflow:hidden;

    margin:30px auto;

    position:relative;

    background:
    linear-gradient(
        135deg,
        #090909,
        #151515,
        #1e1e1e
    );

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    border:1px solid rgba(212,175,55,.15);
}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(212,175,55,.12),
        transparent 60%
    );
}

.hero-content{

    position:relative;

    z-index:2;

    max-width:800px;
}



.hero p{

    font-size:22px;

    color:#bbb;

    margin-bottom:35px;
}

.hero-btn{

    display:inline-block;

    padding:16px 36px;

    border-radius:14px;

    background:var(--gold);

    color:black;

    text-decoration:none;

    font-weight:700;
}

/* HERO */

.hero{

    height:550px;

    border-radius:28px;

    margin:30px 0;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        #080808,
       var(--card2)111,
        #1a1a1a
    );

    border:1px solid rgba(212,175,55,.15);

    position:relative;

    overflow:hidden;
}

.hero::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    rgba(212,175,55,.08);

    filter:blur(100px);
}

.hero-content{
    position:relative;
    z-index:2;
}



.hero p{

    color:#bdbdbd;

    font-size:22px;

    margin-bottom:30px;
}

.hero-btn{

    display:inline-block;

    padding:16px 35px;

    background:var(--gold);

    color:black;

    border-radius:14px;

    text-decoration:none;

    font-weight:bold;
}



/* CATEGORIES */

.home-categories{

    display:grid;

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

    gap:0px;

    margin:60px 0;
}

.category-card{

    position:relative;

    height:320px;

    overflow:hidden;

    border-radius:24px;

    background:#111;

    border:1px solid rgba(212,175,55,.15);

    transition:.4s;
}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.category-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
}

.category-card:hover .category-image{

    transform:scale(1.08);
}

.category-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.9),
        transparent
    );

    display:flex;

    align-items:flex-end;

    padding:25px;
}

.category-overlay h3{

    color:white;

    font-size:28px;

    font-weight:800;
}


.section-title{

    margin:60px 0 25px;
}

.section-title h2{

    color:white;

    font-size:32px;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    }
    
    .product-home-card{
    background:#111;
    border-radius:20px;
    padding:18px;
    border:1px solid rgba(212,175,55,.12);
    transition:.3s;
    }
    
    .product-home-image{
    width:100%;
    height:180px;
    object-fit:contain;
    background:#0f0f0f;
    padding:10px;
    border-radius:16px;
    margin-bottom:15px;
    }
    
    @media(max-width:1200px){
    .products-grid{
    grid-template-columns:repeat(3,1fr);
    }
    }
    
    @media(max-width:768px){
    .products-grid{
    grid-template-columns:repeat(2,1fr);
    }
    }
    
    @media(max-width:480px){
    .products-grid{
    grid-template-columns:1fr;
    }
    }

    .product-home-card{

        background:#111;
        border:1px solid rgba(212,175,55,.12);
        
        border-radius:18px;
        
        padding:15px;
        
        display:flex;
        flex-direction:column;
        
        justify-content:space-between;
        
        transition:.3s;
        }
        
        .product-home-card:hover{
        
        transform:translateY(-5px);
        border-color:var(--gold);
        
        }
        
        .product-home-image{
        
        width:100%;
        height:170px;
        
        object-fit:contain;
        
        background:#0f0f0f;
        
        border-radius:12px;
        
        padding:10px;
        
        margin-bottom:12px;
        }
        
        .product-home-card h3{
        
        font-size:15px;
        line-height:1.8;
        
        height:55px;
        
        overflow:hidden;
        }
        
        .product-home-price{
        
        font-size:18px;
        font-weight:700;
        
        color:var(--gold);
        
        margin-top:10px;
        }



.product-home-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    direction:rtl;
    font-family:'Vazirmatn',sans-serif;
    background:#0b0b0b;
    color:var(--text);
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

.section{
    margin-top:60px;
    margin-bottom:60px;
}
:root{

    --gold:#D4AF37;
    
    --bg:#0B0B0B;
    
    --card:#171717;
    --card2:#202020;
    
    --border:#2A2A2A;
    
    --text:#FFFFFF;
    --text2:#AAAAAA;
    
    }
.glass{

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

    backdrop-filter:blur(14px);

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

    border-radius:20px;
}
.btn{

    background:var(--gold);

    color:black;

    padding:12px 22px;

    border-radius:12px;

    font-weight:700;

    display:inline-block;

    transition:.3s;
}

.btn:hover{

    transform:translateY(-2px);
}

.header{

    position:sticky;

    top:0;

    z-index:9999;

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

    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--border);
}

.navbar{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}



.container{
    max-width:1400px;
    margin:0 auto;
    padding:0 25px;
}


.home-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin:25px 0 40px;
}

.home-logo img{

    height:80px;
}

.home-search{

    flex:1;

    max-width:800px;
}

.home-search input{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:#151515;

    color:white;

    padding:0 25px;

    font-size:18px;
}

.theme-switch{

    width:55px;

    height:55px;

    border-radius:15px;

    background:#151515;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;
}

.hero-slider{

    position:relative;
    
    width:100vw;
    

    
    margin-right:calc(50% - 50vw);
    
    margin-left:calc(50% - 50vw);
    
    overflow:hidden;
    }
    
    .hero-slide{

        position:relative;
        
        width:100%;
        height:100%;
        }

    .hero-bg{
    
    width:100%;
    height:100%;
    
    object-fit:cover;
    
    transition:1s;
    }
    
    .hero-slide:hover .hero-bg{
    
    transform:scale(1.08);
    }
    
.hero-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
rgba(0,0,0,.85) 0%,
rgba(0,0,0,.45) 40%,
rgba(0,0,0,.2) 100%
);

z-index:2;
}
    
    .hero-slider:hover .hero-overlay{
    
        opacity:1;
    }
    
    .hero-content{

        position:absolute;
        
        top:50%;
        
        right:8%;
        
        transform:translateY(-50%);
        
        width:650px;
        
        display:flex;
        
        flex-direction:column;
        
        align-items:flex-start;
        
        z-index:10;
        }
    
    .hero-badge{
    
    display:inline-block;
    
    padding:8px 18px;
    
    background:rgba(212,175,55,.15);
    
    border:1px solid rgba(212,175,55,.3);
    
    border-radius:999px;
    
    color:var(--gold);
    
    margin-bottom:20px;
    }
    
    .hero-content h1{

        transform:translateY(80px);
    
        opacity:0;
    
        transition:.8s;
    }
    
    .hero-content p{
    
        transform:translateY(100px);
    
        opacity:0;
    
        transition:1s;
    }
    
    .hero-btn{
    
        transform:translateY(120px);
    
        opacity:0;
    
        transition:1.2s;
    }
    
    .hero-slider:hover h1,
    .hero-slider:hover p,
    .hero-slider:hover .hero-btn{
    
        transform:translateY(0);
    
        opacity:1;
    }
    
    .hero-title{
        font-size:72px;
        line-height:1.1;
        margin-bottom:20px;
    }
    
    .hero-text{
        font-size:22px;
        line-height:1.8;
        margin-bottom:35px;
        max-width:550px;
    }
    
    .hero-btn{
        display:inline-block;
    }


    
    .hero-title{
        opacity:0;
        transform:translateY(100px);
        transition:.8s;
    }
    
    .hero-text{
        opacity:0;
        transform:translateY(120px);
        transition:1s;
    }
    
    .hero-btn{
        opacity:0;
        transform:translateY(140px);
        transition:1.2s;
    }

    .hero-slider:hover .hero-badge{
        opacity:1;
        transform:translateY(0);
    }
    
    .hero-slider:hover .hero-title{
        opacity:1;
        transform:translateY(0);
    }
    
    .hero-slider:hover .hero-text{
        opacity:1;
        transform:translateY(0);
    }
    
    .hero-slider:hover .hero-btn{
        opacity:1;
        transform:translateY(0);
    }

    .hero-title{
        text-shadow:
        0 0 20px rgba(255,255,255,.2),
        0 0 40px rgba(212,175,55,.15);
    }

    .featured-build{

        display:flex;
        
        align-items:center;
        
        justify-content:space-between;
        
        gap:60px;
        
        padding:70px;
        
        margin:100px 0;
        
        background:#111;
        
        border-radius:35px;
        
        border:1px solid rgba(212,175,55,.12);
        
        overflow:hidden;
        
        position:relative;
        }
        
        .featured-build::before{
        
        content:"";
        
        position:absolute;
        
        width:500px;
        height:500px;
        
        left:-150px;
        top:-150px;
        
        background:
        rgba(212,175,55,.06);
        
        border-radius:50%;
        
        filter:blur(80px);
        }
        
        .build-content{
        
        position:relative;
        
        z-index:2;
        }
        
        .build-badge{
        
        background:rgba(212,175,55,.15);
        
        padding:10px 18px;
        
        border-radius:999px;
        
        color:var(--gold);
        }
        
        .build-content h2{
        
        font-size:58px;
        
        margin:25px 0;
        }
        
        .build-content p{
        
        font-size:22px;
        
        color:var(--text2);
        
        margin-bottom:30px;
        }
        
        .build-btn{
        
        padding:16px 30px;
        
        background:var(--gold);
        
        border-radius:14px;
        
        color:black;
        
        font-weight:bold;
        }
        
        .build-image img{
        
        width:550px;
        
        filter:
        drop-shadow(0 0 50px rgba(212,175,55,.2));
        }

        .product-slider-section{

            margin:120px 0;
            }
            
            .slider-title{
            
            font-size:42px;
            
            margin-bottom:40px;
            }
            
            .product-slider-wrapper{
            
            position:relative;
            }
            
            .product-slider{
            
            display:flex;
            
            gap:25px;
            
            overflow-x:auto;
            
            scroll-behavior:smooth;
            
            padding-bottom:15px;
            
            scrollbar-width:none;
            }
            
            .product-slider::-webkit-scrollbar{
            
            display:none;
            }
            
            .slider-card{
            
            min-width:320px;
            
            background:var(--card);
            
            border-radius:25px;
            
            padding:20px;
            
            border:1px solid rgba(212,175,55,.08);
            
            transition:.4s;
            }
            
            .slider-card:hover{
            
            transform:translateY(-12px);
            
            border-color:var(--gold);
            
            box-shadow:
            0 25px 60px rgba(0,0,0,.45);
            }
            
            .slider-card img{
            
            width:100%;
            
            height:220px;
            
            object-fit:cover;
            
            border-radius:18px;
            
            margin-bottom:20px;
            }
            
            .slider-arrow{
            
            position:absolute;
            
            top:40%;
            
            width:55px;
            
            height:55px;
            
            border:none;
            
            border-radius:50%;
            
            background:var(--gold);
            
            color:black;
            
            font-size:24px;
            
            cursor:pointer;
            
            z-index:5;
            }
            
            .prev{
            
            right:-20px;
            }
            
            .next{
            
            left:-20px;
            }

            .gaming-zone{

                margin:80px 0;
                
                display:flex;
                
                align-items:center;
                
                justify-content:space-between;
                
                gap:60px;
                
                background:
                linear-gradient(
                135deg,
               var(--card2),
                #181818,
                #222
                );
                
                border-radius:30px;
                
                padding:60px;
                
                overflow:hidden;
                
                position:relative;
                
                border:1px solid rgba(212,175,55,.15);
                
                }
                
                .gaming-zone::before{
                
                content:"";
                
                position:absolute;
                
                width:500px;
                height:500px;
                
                background:
                rgba(212,175,55,.08);
                
                border-radius:50%;
                
                filter:blur(120px);
                
                left:-150px;
                top:-150px;
                
                }
                
                .gaming-content{
                
                position:relative;
                z-index:2;
                
                max-width:550px;
                
                }
                
                .gaming-tag{
                
                color:var(--gold);
                
                font-weight:700;
                
                letter-spacing:2px;
                
                }
                
                .gaming-content h2{
                
                font-size:52px;
                
                margin:20px 0;
                
                color:white;
                
                }
                
                .gaming-content p{
                
                font-size:18px;
                
                line-height:2;
                
                color:#bbb;
                
                margin-bottom:30px;
                
                }
                
                .gaming-btn{
                
                background:var(--gold);
                
                color:black;
                
                padding:15px 30px;
                
                border-radius:14px;
                
                font-weight:700;
                
                display:inline-block;
                
                }
                
                .gaming-image img{
                
                width:550px;
                
                transition:.5s;
                
                }

                .banner-grid{

                    display:grid;
                    
                    grid-template-columns:
                    2fr 1fr 1fr;
                    
                    grid-template-rows:
                    260px 260px;
                    
                    gap:20px;
                    
                    margin:80px 0;
                    
                    }
                    
                    .banner-item{
                    
                    position:relative;
                    
                    overflow:hidden;
                    
                    border-radius:28px;
                    
                    display:block;
                    
                    }
                    
                    .banner-item.large{
                    
                    grid-row:span 2;
                    
                    }
                    
                    .banner-item img{
                    
                    width:100%;
                    
                    height:100%;
                    
                    object-fit:cover;
                    
                    transition:.7s;
                    
                    }
                    
                    .banner-item:hover img{
                    
                    transform:scale(1.08);
                    
                    }
                    
                    .banner-content{
                    
                    position:absolute;
                    
                    inset:0;
                    
                    background:
                    linear-gradient(
                    to top,
                    rgba(0,0,0,.8),
                    transparent
                    );
                    
                    display:flex;
                    
                    flex-direction:column;
                    
                    justify-content:flex-end;
                    
                    padding:30px;
                    
                    }
                    
                    .banner-content span{
                    
                    color:var(--gold);
                    
                    font-size:15px;
                    
                    }
                    
                    .banner-content h2{
                    
                    font-size:42px;
                    
                    color:white;
                    
                    }
                    
                    .banner-content h3{
                    
                    font-size:28px;
                    
                    color:white;
                    
                    }

                    .trending-section{

                        margin:90px 0;
                        
                        }
                        
                        .trending-grid{
                        
                        display:grid;
                        
                        grid-template-columns:
                        repeat(4,1fr);
                        
                        gap:25px;
                        
                        }
                        
                        .trending-card{
                        
                        background:#151515;
                        
                        border-radius:24px;
                        
                        padding:20px;
                        
                        position:relative;
                        
                        overflow:hidden;
                        
                        transition:.4s;
                        
                        }
                        
                        .trending-card:hover{
                        
                        transform:translateY(-10px);
                        
                        border:1px solid var(--gold);
                        
                        }
                        
                        .hot-badge{
                        
                        position:absolute;
                        
                        top:15px;
                        left:15px;
                        
                        background:#ff4d4d;
                        
                        color:white;
                        
                        padding:6px 12px;
                        
                        border-radius:999px;
                        
                        font-size:12px;
                        
                        font-weight:bold;
                        
                        }
                        
                        .views-count{
                        
                        color:var(--gold);
                        
                        margin-top:10px;
                        
                        font-size:14px;
                        
                        }

                        .trending-section{
                            max-width:1400px;
                            margin:auto;
                            }
                            
                            .trending-track{
                            gap:15px;
                            }
                            
                            .trending-track{
                            
                            display:flex;
                            
                            gap:30px;
                            
                            width:max-content;
                            
                            animation:
                            trendingMove 45s linear infinite;
                            
                            }
                            
                            .trending-slider:hover .trending-track{
                            
                            animation-play-state:paused;
                            
                            }
                            
                            @keyframes trendingMove{
                            
                            from{
                            transform:translateX(0);
                            }
                            
                            to{
                            transform:translateX(-50%);
                            }
                            
                            }

                            .trending-group{
                                display:grid;
                                grid-template-columns:1fr 1fr;
                                gap:15px;
                                min-width:520px;
                                }

                                .trending-card{

                                    background:#151515;
                                    
                                    border-radius:24px;
                                    
                                    padding:12px;
                                    
                                    position:relative;
                                    
                                    overflow:hidden;
                                    
                                    transition:.4s;
                                    
                                    border:1px solid rgba(212,175,55,.08);
                                    
                                    }
                                    
                                    .trending-card:hover{
                                    
                                    transform:
                                    translateY(-10px)
                                    scale(1.03);
                                    
                                    border-color:var(--gold);
                                    
                                    box-shadow:
                                    0 20px 50px rgba(0,0,0,.4);
                                    
                                    }

                                    .trending-card img{

                                        width:100%;
                                        
                                        height:150px;
                                        
                                        object-fit:cover;
                                        
                                        border-radius:18px;
                                        
                                        margin-bottom:15px;
                                        
                                        }
                                                
                                        .hot-badge{

                                            position:absolute;
                                            
                                            top:15px;
                                            left:15px;
                                            
                                            background:#ff4d4d;
                                            
                                            color:white;
                                            
                                            padding:8px 14px;
                                            
                                            border-radius:999px;
                                            
                                            font-size:12px;
                                            
                                            font-weight:700;
                                            
                                            z-index:5;
                                            
                                            }

                                            .trending-slider::before,
                                            .trending-slider::after{
                                            
                                            content:"";
                                            
                                            position:absolute;
                                            
                                            top:0;
                                            
                                            width:180px;
                                            
                                            height:100%;
                                            
                                            z-index:10;
                                            
                                            pointer-events:none;
                                            
                                            }

                                            .trending-slider::before{

                                                right:0;
                                                
                                                background:
                                                linear-gradient(
                                                to left,
                                                #0b0b0b,
                                                transparent
                                                );
                                                
                                                }

                                                .trending-slider::after{

                                                    left:0;
                                                    
                                                    background:
                                                    linear-gradient(
                                                    to right,
                                                    #0b0b0b,
                                                    transparent
                                                    );
                                                    
                                                    }

                                                    .special-offer{

                                                        margin:120px 0;
                                                        
                                                        background:
                                                        linear-gradient(
                                                        135deg,
                                                       var(--card2),
                                                        #1a1a1a,
                                                       var(--card2)
                                                        );
                                                        
                                                        border-radius:32px;
                                                        
                                                        overflow:hidden;
                                                        
                                                        display:grid;
                                                        
                                                        grid-template-columns:
                                                        1.2fr 1fr;
                                                        
                                                        align-items:center;
                                                        
                                                        padding:70px;
                                                        
                                                        position:relative;
                                                        
                                                        border:1px solid rgba(212,175,55,.15);
                                                        
                                                        }
                                                        
                                                        .special-offer::before{
                                                        
                                                        content:"";
                                                        
                                                        position:absolute;
                                                        
                                                        width:500px;
                                                        height:500px;
                                                        
                                                        left:-100px;
                                                        top:-100px;
                                                        
                                                        background:
                                                        rgba(212,175,55,.08);
                                                        
                                                        border-radius:50%;
                                                        
                                                        filter:blur(100px);
                                                        
                                                        }

                                                        .offer-content{

                                                            position:relative;
                                                            
                                                            z-index:2;
                                                            
                                                            }
                                                            
                                                            .offer-tag{
                                                            
                                                            display:inline-block;
                                                            
                                                            padding:10px 18px;
                                                            
                                                            background:
                                                            rgba(212,175,55,.12);
                                                            
                                                            border-radius:999px;
                                                            
                                                            color:var(--gold);
                                                            
                                                            margin-bottom:25px;
                                                            
                                                            }
                                                            
                                                            .offer-content h2{
                                                            
                                                            font-size:56px;
                                                            
                                                            margin-bottom:20px;
                                                            
                                                            }
                                                            
                                                            .offer-content p{
                                                            
                                                            font-size:20px;
                                                            
                                                            color:#bdbdbd;
                                                            
                                                            line-height:2;
                                                            
                                                            margin-bottom:35px;
                                                            
                                                            }

                                                            .offer-buttons{

                                                                display:flex;
                                                                
                                                                gap:15px;
                                                                
                                                                }
                                                                
                                                                .offer-btn{
                                                                
                                                                padding:16px 28px;
                                                                
                                                                background:var(--gold);
                                                                
                                                                color:black;
                                                                
                                                                font-weight:700;
                                                                
                                                                border-radius:14px;
                                                                
                                                                }
                                                                
                                                                .offer-btn.outline{
                                                                
                                                                background:transparent;
                                                                
                                                                color:white;
                                                                
                                                                border:1px solid var(--gold);
                                                                
                                                                }

                                                                .offer-image{

                                                                    display:flex;
                                                                    
                                                                    justify-content:center;
                                                                    
                                                                    }
                                                                    
                                                                    .offer-image img{
                                                                    
                                                                    max-width:100%;
                                                                    
                                                                    transition:.5s;
                                                                    
                                                                    }
                                                                    
                                                                    .special-offer:hover img{
                                                                    
                                                                    transform:scale(1.08);
                                                                    
                                                                    }

                                                                    .offer-content{

                                                                        transform:translateY(30px);
                                                                        
                                                                        opacity:.7;
                                                                        
                                                                        transition:.7s;
                                                                        
                                                                        }
                                                                        
                                                                        .special-offer:hover .offer-content{
                                                                        
                                                                        transform:translateY(0);
                                                                        
                                                                        opacity:1;
                                                                        
                                                                        }

                                                                        .banner-slider-section{

                                                                            max-width:1400px;
                                                                            
                                                                            margin:80px auto;
                                                                            
                                                                            padding:0 20px;
                                                                            
                                                                            }
                                                                            
                                                                            #bannerSlider{
                                                                            
                                                                            border-radius:28px;
                                                                            
                                                                            overflow:hidden;
                                                                            
                                                                            }
                                                                            
                                                                            #bannerSlider img{
                                                                            
                                                                            width:100%;
                                                                            
                                                                            height:450px;
                                                                            
                                                                            display:block;
                                                                            
                                                                            object-fit:cover;
                                                                            
                                                                            }
                                                                            
                                                                            .splide__pagination__page{
                                                                            
                                                                            background:#fff;
                                                                            
                                                                            opacity:.4;
                                                                            
                                                                            }
                                                                            
                                                                            .splide__pagination__page.is-active{
                                                                            
                                                                            background:var(--gold);
                                                                            
                                                                            transform:scale(1.3);
                                                                            
                                                                            }
                                                                            
                                                                            .splide__arrow{
                                                                            
                                                                            background:rgba(0,0,0,.6);
                                                                            
                                                                            width:45px;
                                                                            
                                                                            height:45px;
                                                                            
                                                                            }
                                                                            
                                                                            .splide__arrow svg{
                                                                            
                                                                            fill:var(--gold);
                                                                            
                                                                            }

                                                                            .banner-test{
                                                                                display:flex;
                                                                                gap:20px;
                                                                                }
                                                                                
                                                                                .banner-test img{
                                                                                width:300px;
                                                                                height:180px;
                                                                                object-fit:cover;
                                                                                }


                                                                            
                                                                                .banner-slider{

                                                                                    position:relative;
                                                                                    
                                                                                    width:100%;
                                                                                    
                                                                                    height:500px;
                                                                                    
                                                                                    overflow:hidden;
                                                                                    
                                                                                    border-radius:24px;
                                                                                    
                                                                                    margin:50px auto;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .slide{
                                                                                    
                                                                                    position:absolute;
                                                                                    
                                                                                    top:0;
                                                                                    left:0;
                                                                                    
                                                                                    width:100%;
                                                                                    height:100%;
                                                                                    
                                                                                    object-fit:cover;
                                                                                    
                                                                                    opacity:0;
                                                                                    
                                                                                    transition:opacity .6s ease;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .slide.active{
                                                                                    
                                                                                    opacity:1;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .slider-btn{
                                                                                    
                                                                                    position:absolute;
                                                                                    
                                                                                    top:50%;
                                                                                    
                                                                                    transform:translateY(-50%);
                                                                                    
                                                                                    width:50px;
                                                                                    height:50px;
                                                                                    
                                                                                    border:none;
                                                                                    
                                                                                    border-radius:50%;
                                                                                    
                                                                                    background:rgba(0,0,0,.5);
                                                                                    
                                                                                    color:var(--text);
                                                                                    
                                                                                    font-size:22px;
                                                                                    
                                                                                    cursor:pointer;
                                                                                    
                                                                                    z-index:5;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .prev{
                                                                                    
                                                                                    right:20px;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .next{
                                                                                    
                                                                                    left:20px;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .slider-btn:hover{
                                                                                    
                                                                                    background:var(--gold);
                                                                                    
                                                                                    color:#000;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .slider-dots{
                                                                                    
                                                                                    position:absolute;
                                                                                    
                                                                                    bottom:20px;
                                                                                    
                                                                                    left:50%;
                                                                                    
                                                                                    transform:translateX(-50%);
                                                                                    
                                                                                    display:flex;
                                                                                    
                                                                                    gap:10px;
                                                                                    
                                                                                    z-index:5;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .dot{
                                                                                    
                                                                                    width:12px;
                                                                                    height:12px;
                                                                                    
                                                                                    border-radius:50%;
                                                                                    
                                                                                    background:#777;
                                                                                    
                                                                                    cursor:pointer;
                                                                                    
                                                                                    transition:.3s;
                                                                                    
                                                                                    }
                                                                                    
                                                                                    .dot.active{
                                                                                    
                                                                                    background:var(--gold);
                                                                                    
                                                                                    transform:scale(1.2);
                                                                                    
                                                                                    }


                                                                                    .services-home{

                                                                                        display:grid;
                                                                                        
                                                                                        grid-template-columns:repeat(2,1fr);
                                                                                        
                                                                                        gap:25px;
                                                                                        
                                                                                        margin:70px auto;
                                                                                        
                                                                                        max-width:1400px;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-card{
                                                                                        
                                                                                        position:relative;
                                                                                        
                                                                                        height:320px;
                                                                                        
                                                                                        border-radius:24px;
                                                                                        
                                                                                        overflow:hidden;
                                                                                        
                                                                                        text-decoration:none;
                                                                                        
                                                                                        background:var(--card);
                                                                                        
                                                                                        border:1px solid var(--border);
                                                                                        
                                                                                        transition:.4s;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-card:hover{
                                                                                        
                                                                                        transform:translateY(-8px);
                                                                                        
                                                                                        border-color:var(--gold);
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .assembly{
                                                                                        
                                                                                        background:url('/rayansetak/assets/images/assembly-banner.jpg')
                                                                                        center/cover;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .overhaul{
                                                                                        
                                                                                        background:url('/rayansetak/assets/images/overhaul-banner.jpg')
                                                                                        center/cover;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-overlay{
                                                                                        
                                                                                        position:absolute;
                                                                                        
                                                                                        inset:0;
                                                                                        
                                                                                        background:linear-gradient(
                                                                                        180deg,
                                                                                        rgba(0,0,0,.15),
                                                                                        rgba(0,0,0,.85)
                                                                                        );
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-content{
                                                                                        
                                                                                        position:absolute;
                                                                                        
                                                                                        bottom:30px;
                                                                                        
                                                                                        right:30px;
                                                                                        
                                                                                        z-index:2;
                                                                                        
                                                                                        color:var(--text);
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-content span{
                                                                                        
                                                                                        color:var(--gold);
                                                                                        
                                                                                        font-weight:700;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-content h2{
                                                                                        
                                                                                        margin:15px 0;
                                                                                        
                                                                                        font-size:32px;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-content p{
                                                                                        
                                                                                        color:#c8c8c8;
                                                                                        
                                                                                        margin-bottom:20px;
                                                                                        
                                                                                        }
                                                                                        
                                                                                        .service-btn{
                                                                                        
                                                                                        display:inline-block;
                                                                                        
                                                                                        padding:12px 28px;
                                                                                        
                                                                                        background:var(--gold);
                                                                                        
                                                                                        color:#111;
                                                                                        
                                                                                        border-radius:12px;
                                                                                        
                                                                                        font-weight:700;
                                                                                        
                                                                                        }

                                                                                        .assembly{

                                                                                            background-image:url("/rayansetak/assets/images/p1.jpg");
                                                                                            background-size:cover;
                                                                                            background-position:center;
                                                                                            
                                                                                            }
                                                                                            
                                                                                            .overhaul{
                                                                                            
                                                                                            background-image:url("/rayansetak/assets/images/p1.jpg");
                                                                                            background-size:cover;
                                                                                            background-position:center;
                                                                                            
                                                                                            }

                                                                                            .home-blog{
                                                                                                margin:60px 0;
                                                                                            }
                                                                                            
                                                                                            .section-header{
                                                                                                display:flex;
                                                                                                justify-content:space-between;
                                                                                                align-items:center;
                                                                                                margin-bottom:25px;
                                                                                            }
                                                                                            
                                                                                            .blog-grid{
                                                                                                display:grid;
                                                                                                grid-template-columns:repeat(3,1fr);
                                                                                                gap:20px;
                                                                                            }
                                                                                            
                                                                                            .blog-card{
                                                                                                background:var(--text2);
                                                                                                border-radius:12px;
                                                                                                overflow:hidden;
                                                                                                text-decoration:none;
                                                                                                color:var(--card);
                                                                                                box-shadow:0 2px 10px rgba(0,0,0,.08);
                                                                                                transition:.3s;
                                                                                            }
                                                                                            
                                                                                            .blog-card:hover{
                                                                                                transform:translateY(-5px);
                                                                                            }
                                                                                            
                                                                                            .blog-card img{
                                                                                                width:100%;
                                                                                                height:220px;
                                                                                                object-fit:cover;
                                                                                            }
                                                                                            
                                                                                            .blog-content{
                                                                                                padding:15px;
                                                                                            }
                                                                                            
                                                                                            .blog-content h3{
                                                                                                font-size:18px;
                                                                                                margin-bottom:10px;
                                                                                            }
                                                                                            
                                                                                            .blog-content p{
                                                                                                font-size:14px;
                                                                                                color:#666;
                                                                                                line-height:1.8;
                                                                                            }

                                                                                            .home-blog-section{
                                                                                                margin:80px auto;
                                                                                                max-width:1400px;
                                                                                            }
                                                                                            
                                                                                            .home-blog-section .section-header{
                                                                                                display:flex;
                                                                                                justify-content:space-between;
                                                                                                align-items:center;
                                                                                                margin-bottom:30px;
                                                                                            }
                                                                                            
                                                                                            .home-blog-section .section-header h2{
                                                                                                color:var(--gold);
                                                                                                font-size:28px;
                                                                                            }
                                                                                            
                                                                                            .home-blog-section .section-header a{
                                                                                                color:var(--gold);
                                                                                                text-decoration:none;
                                                                                            }
                                                                                            
                                                                                            .blog-grid{
                                                                                                display:grid;
                                                                                                grid-template-columns:repeat(3,1fr);
                                                                                                gap:25px;
                                                                                            }
                                                                                            
                                                                                            .blog-card{
                                                                                                background:var(--card);
                                                                                                border:1px solid var(--gold);
                                                                                                border-radius:12px;
                                                                                                overflow:hidden;
                                                                                                text-align:center;
                                                                                            }
                                                                                            
                                                                                            .blog-card img{
                                                                                                width:100%;
                                                                                                height:220px;
                                                                                                object-fit:cover;
                                                                                            }
                                                                                            
                                                                                            .blog-card h3{
                                                                                                color:var(--text);
                                                                                                padding:15px;
                                                                                                min-height:70px;
                                                                                            }
                                                                                            
                                                                                            .blog-card a{
                                                                                                display:block;
                                                                                                padding:15px;
                                                                                                background:var(--gold);
                                                                                                color:var(--card2);
                                                                                                text-decoration:none;
                                                                                                font-weight:bold;
                                                                                            }


                                                                                            .latest-products-wrapper{

                                                                                                position:relative;
                                                                                                
                                                                                                margin:60px 0;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-products-slider{
                                                                                                
                                                                                                display:flex;
                                                                                                
                                                                                                gap:20px;
                                                                                                
                                                                                                overflow-x:auto;
                                                                                                
                                                                                                scroll-behavior:smooth;
                                                                                                
                                                                                                padding:10px;
                                                                                                
                                                                                                scrollbar-width:none;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-products-slider::-webkit-scrollbar{
                                                                                                
                                                                                                display:none;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-card{
                                                                                                
                                                                                                min-width:280px;
                                                                                                
                                                                                                background:var(--card);;
                                                                                                
                                                                                                border:1px solid rgba(212,175,55,.12);
                                                                                                
                                                                                                border-radius:20px;
                                                                                                
                                                                                                padding:18px;
                                                                                                
                                                                                                transition:.3s;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-card:hover{
                                                                                                
                                                                                                transform:translateY(-6px);
                                                                                                
                                                                                                border-color:var(--gold);
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-image{
                                                                                                
                                                                                                width:100%;
                                                                                                
                                                                                                height:220px;
                                                                                                
                                                                                                object-fit:contain;
                                                                                                
                                                                                                background:var(--card);
                                                                                                
                                                                                                border-radius:14px;
                                                                                                
                                                                                                padding:10px;
                                                                                                
                                                                                                margin-bottom:15px;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-card h3{
                                                                                                
                                                                                                font-size:16px;
                                                                                                
                                                                                                height:55px;
                                                                                                
                                                                                                overflow:hidden;
                                                                                                
                                                                                                margin-bottom:15px;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-price{
                                                                                                
                                                                                                font-size:20px;
                                                                                                
                                                                                                font-weight:700;
                                                                                                
                                                                                                color:var(--gold);
                                                                                                
                                                                                                margin-bottom:15px;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-btn{
                                                                                                
                                                                                                display:block;
                                                                                                
                                                                                                text-align:center;
                                                                                                
                                                                                                padding:12px;
                                                                                                
                                                                                                background:var(--gold);
                                                                                                
                                                                                                color:#111;
                                                                                                
                                                                                                border-radius:12px;
                                                                                                
                                                                                                font-weight:700;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-arrow{
                                                                                                
                                                                                                position:absolute;
                                                                                                
                                                                                                top:50%;
                                                                                                
                                                                                                transform:translateY(-50%);
                                                                                                
                                                                                                width:45px;
                                                                                                
                                                                                                height:45px;
                                                                                                
                                                                                                border:none;
                                                                                                
                                                                                                border-radius:50%;
                                                                                                
                                                                                                background:var(--gold);
                                                                                                
                                                                                                color:#111;
                                                                                                
                                                                                                font-size:22px;
                                                                                                
                                                                                                cursor:pointer;
                                                                                                
                                                                                                z-index:5;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-prev{
                                                                                                
                                                                                                right:-20px;
                                                                                                
                                                                                                }
                                                                                                
                                                                                                .latest-next{
                                                                                                
                                                                                                left:-20px;
                                                                                                
                                                                                                }



/* =========================
TABLET
========================= */

@media (max-width:1024px){

    .hero{
    height:450px;
    }
    
    .hero-content{
    width:90%;
    right:5%;
    }
    
    .hero-title{
    font-size:48px;
    }
    
    .hero-text{
    font-size:18px;
    }
    
    .featured-build{
    flex-direction:column;
    text-align:center;
    padding:40px;
    }
    
    .build-image img{
    width:100%;
    max-width:450px;
    }
    
    .gaming-zone{
    flex-direction:column;
    padding:40px;
    text-align:center;
    }
    
    .gaming-image img{
    width:100%;
    max-width:450px;
    }
    
    .special-offer{
    grid-template-columns:1fr;
    text-align:center;
    padding:40px;
    }
    
    .offer-buttons{
    justify-content:center;
    }
    
    .trending-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .blog-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .banner-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    }
    
    .banner-item.large{
    grid-row:auto;
    }
    
    .services-home{
    grid-template-columns:1fr;
    }
    
    }

/* ===== Mobile ===== */
@media (max-width:768px){

    .hero-slider{
        height:320px;
    }

    .hero-title{
        font-size:32px;
    }

    .hero-text{
        font-size:14px;
    }

    .hero-content{
        width:90%;
        right:5%;
    }

    /* دسته بندی ها دو تایی */
    .home-categories{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .category-card{
        height:180px;
    }

    .category-overlay h3{
        font-size:18px;
    }

    /* خدمات دو تایی */
    .services-home{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .service-card{
        height:180px;
    }

    .service-content h2{
        font-size:18px;
    }

    .service-content p{
        display:none;
    }

    /* جدیدترین محصولات */
    .products-grid{

        display:grid;
        
        grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));
        
        gap:15px;
        
        }

        .trending-grid{

            display:grid;
            
            grid-template-columns:repeat(4,1fr);
            
            gap:10px;
            
            }
            
            .trending-card{
            
            padding:10px;
            
            }
            
            .trending-card img{
            
            height:120px;
            
            object-fit:cover;
            
            }
            
            .trending-card h3{
            
            font-size:13px;
            
            line-height:1.6;
            
            }
            
            .views-count{
            
            font-size:11px;
            
            }

    .hot-badge{
        font-size:9px;
        padding:3px 6px;
    }

    /* بلاگ = 3 ستون */
    .blog-grid{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .blog-card img{
        height:90px;
    }

    .blog-card h3{
        font-size:11px;
        padding:8px;
        min-height:auto;
    }

    .blog-card a{
        padding:8px;
        font-size:11px;
    }

    /* بنرها */
    .banner-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }

    .banner-item.large{
        grid-column:span 2;
    }

    /* اسمبل و اورهال */
    .featured-build,
    .gaming-zone,
    .special-offer{
        display:block;
        padding:25px;
    }

    .build-image,
    .gaming-image,
    .offer-image{
        text-align:center;
        margin-top:20px;
    }

    .build-image img,
    .gaming-image img,
    .offer-image img{
        width:100%;
        max-width:280px;
        margin:auto;
    }

}