/*==========================================
            RESET
==========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:
    radial-gradient(circle at top,#263247 0%,#111827 35%,#020617 100%);

    min-height:100vh;

    overflow-x:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

    position:relative;

}

/* نور متحرک */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle,#d4af3720 0%,transparent 60%),

    radial-gradient(circle at bottom right,#ffffff10 0%,transparent 45%),

    radial-gradient(circle at top left,#fbbf2415 0%,transparent 50%);

    animation:bgMove 14s ease-in-out infinite alternate;

    pointer-events:none;

}

@keyframes bgMove{

    from{

        transform:translate(-40px,-20px) scale(1);

    }

    to{

        transform:translate(40px,25px) scale(1.15);

    }

}

/*==========================================
           PRODUCT CARD
==========================================*/

.product-page{

    width:100%;

    max-width:1380px;

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:36px;

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

    backdrop-filter:blur(25px);

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

    box-shadow:

    0 35px 90px rgba(0,0,0,.45);

    animation:pageFade .8s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================
          IMAGE SIDE
==========================================*/


/*==========================================
         IMAGE SLIDER
==========================================*/

.image-slider{

    width:100%;

    max-width:650px;

    height:650px;

    position:relative;

    border-radius:30px;

    overflow:hidden;

    background:white;

    box-shadow:

    0 25px 70px rgba(0,0,0,.18);

}

/* عکس */

.image-slider img,
#product-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

    padding:18px;

    transition:

    transform .55s ease,

    opacity .35s ease;

}

/* زوم نرم */

.image-slider:hover img{

    transform:scale(1.05);

}

/* نور عبوری */

.image-slider::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

    transform:skewX(-20deg);

}

.image-slider:hover::after{

    animation:shine 1.1s linear;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:180%;

    }

}

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

.image-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#f5c542;

    color:#111827;

    font-size:26px;

    font-weight:900;

    cursor:pointer;

    z-index:50;

    transition:.35s;

    box-shadow:

    0 12px 25px rgba(0,0,0,.25);

}

.image-btn:hover{

    transform:

    translateY(-50%)

    scale(1.12)

    rotate(8deg);

}

#prev-image{

    right:18px;

}

#next-image{

    left:18px;

}

/*==========================================
         IMAGE DOTS
==========================================*/

#image-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:18px;

}

#image-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#a8a8a8;

    transition:.35s;

    cursor:pointer;

}

#image-dots span:hover{

    transform:scale(1.35);

}

#image-dots .active{

    background:#d4af37;

    transform:scale(1.5);

    box-shadow:

    0 0 15px rgba(212,175,55,.7);

}
/*==========================================
            PRODUCT INFO
==========================================*/

.product-info{

    padding:55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/*==========================================
              BADGE
==========================================*/

.product-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:40px;

    background:linear-gradient(135deg,#FFD54F,#F59E0B);

    color:#111827;

    font-size:15px;

    font-weight:900;

    box-shadow:
    0 12px 30px rgba(245,158,11,.35);

    animation:badgeFloat 2.8s ease-in-out infinite;

}

@keyframes badgeFloat{

    0%,100%{
        transform:translateY(0);
    }

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

}

/*==========================================
              PRODUCT NAME
==========================================*/

#product-name{

    font-size:48px;

    font-weight:900;

    line-height:1.4;

    margin-bottom:28px;

    background:
    linear-gradient(90deg,#fff7d1,#f5c542,#fff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:titleGlow 3s ease infinite alternate;

}

@keyframes titleGlow{

    from{

        filter:drop-shadow(0 0 6px rgba(212,175,55,.2));

    }

    to{

        filter:drop-shadow(0 0 18px rgba(212,175,55,.55));

    }

}

/*==========================================
              PRICE BOX
==========================================*/

.price-box{

    background:
    linear-gradient(145deg,#111827,#1f2937);

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

    border-radius:24px;

    padding:28px;

    margin-bottom:22px;

    transition:.35s;

}

.price-box:hover{

    transform:translateY(-5px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.28);

}

.price-label{

    color:#9CA3AF;

    margin-bottom:12px;

    font-size:16px;

}

#product-price{

    color:#22C55E;

    font-size:44px;

    font-weight:900;

    animation:pricePulse 1.8s infinite;

}

@keyframes pricePulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

}

/*==========================================
            STOCK BOX
==========================================*/

.stock-box{

    background:

    rgba(255,255,255,.05);

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

    border-radius:20px;

    padding:22px;

    margin-bottom:28px;

    transition:.35s;

}

.stock-box:hover{

    transform:translateY(-4px);

}

#product-stock{

    color:#E5E7EB;

    font-size:20px;

    font-weight:700;

}

/*==========================================
            FEATURES
==========================================*/

.product-features{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:35px;

}

.feature{

    background:

    rgba(255,255,255,.05);

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

    border-radius:18px;

    padding:16px 18px;

    color:#F3F4F6;

    font-size:16px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.feature::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.3),

    transparent

    );

    transform:skewX(-20deg);

}

.feature:hover::before{

    animation:featureLight .8s linear;

}

@keyframes featureLight{

    from{

        left:-120%;

    }

    to{

        left:180%;

    }

}

.feature:hover{

    transform:translateX(-8px);

    background:#253246;

}

/*==========================================
          ADD TO CART
==========================================*/

#add-to-cart{

    width:100%;

    height:72px;

    border:none;

    border-radius:20px;

    background:

    linear-gradient(135deg,#FFD54F,#D4AF37);

    color:#111827;

    font-size:22px;

    font-weight:900;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:.35s;

}

#add-to-cart::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );

    transform:skewX(-20deg);

}

#add-to-cart:hover::before{

    animation:btnLight .8s linear;

}

@keyframes btnLight{

    from{

        left:-120%;

    }

    to{

        left:180%;

    }

}

#add-to-cart:hover{

    transform:translateY(-6px);

    box-shadow:

    0 20px 40px rgba(212,175,55,.45);

}

/*==========================================
            QUANTITY BOX
==========================================*/

#qty-box{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    width:max-content;

    margin:18px auto 0;

    padding:10px 16px;

    border-radius:18px;

    background:white;

    box-shadow:

    0 15px 30px rgba(0,0,0,.15);

}

#qty{

    min-width:35px;

    text-align:center;

    font-size:22px;

    font-weight:900;

    color:#111827;

}

#qty-box button{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#D4AF37;

    color:white;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

#qty-box button:hover{

    transform:scale(1.12);

    box-shadow:

    0 10px 20px rgba(212,175,55,.45);

}
/*==========================================
        RESPONSIVE - TABLET
==========================================*/

@media (max-width:1100px){

.product-page{

    grid-template-columns:1fr;

    max-width:760px;

}

.product-image-box{

    padding:25px;

}

.image-slider{

    max-width:100%;

    height:560px;

}

.product-info{

    padding:40px;

}

#product-name{

    text-align:center;

    font-size:42px;

}

.price-box,
.stock-box{

    text-align:center;

}

.product-badge{

    margin:auto auto 25px;

}

}


/*==========================================
          MOBILE
==========================================*/

@media (max-width:768px){

body{

    padding:12px;

}

.product-page{

    border-radius:22px;

}

.product-image-box{

    padding:12px;

}

.image-slider{

    width:100%;

    height:340px;

    border-radius:20px;

}

.image-slider img,
#product-image{

    object-fit:contain;

    padding:10px;

}

.image-btn{

    width:46px;

    height:46px;

    font-size:20px;

}

#prev-image{

    right:8px;

}

#next-image{

    left:8px;

}

.product-info{

    padding:22px;

}

#product-name{

    font-size:31px;

    text-align:center;

}

.price-label{

    text-align:center;

}

#product-price{

    text-align:center;

    font-size:34px;

}

.stock-box{

    text-align:center;

}

.product-features{

    gap:10px;

}

.feature{

    font-size:15px;

    padding:14px;

}

#add-to-cart{

    height:60px;

    font-size:18px;

}

#qty-box{

    margin-top:15px;

}

}


/*==========================================
       VERY SMALL DEVICES
==========================================*/

@media (max-width:420px){

.image-slider{

    height:290px;

}

#product-name{

    font-size:26px;

}

#product-price{

    font-size:28px;

}

.feature{

    font-size:14px;

}

#add-to-cart{

    height:56px;

    font-size:17px;

}

.image-btn{

    width:40px;

    height:40px;

    font-size:18px;

}

}


/*==========================================
         LARGE SCREENS
==========================================*/

@media (min-width:1600px){

.product-page{

    max-width:1500px;

}

.image-slider{

    height:720px;

}

#product-name{

    font-size:56px;

}

#product-price{

    font-size:25px;

}

}


/*==========================================
          SCROLLBAR
==========================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#0f172a;

}

::-webkit-scrollbar-thumb{

    background:#d4af37;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#f5c542;

}


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

button,
.feature,
.price-box,
.stock-box,
.image-slider{

    transition:

    .35s ease;

}

button:active{

    transform:scale(.96);

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

button{

    -webkit-tap-highlight-color:transparent;

}


/*==========================================
        PERFORMANCE
==========================================*/

.product-page,
.image-slider,
.feature,
.price-box,
.stock-box,
#add-to-cart{

    will-change:transform;

}


/*==========================================
         FADE IN
==========================================*/

.product-info>*{

    animation:fadeUp .7s ease both;

}

.product-info>*:nth-child(1){animation-delay:.1s;}
.product-info>*:nth-child(2){animation-delay:.2s;}
.product-info>*:nth-child(3){animation-delay:.3s;}
.product-info>*:nth-child(4){animation-delay:.4s;}
.product-info>*:nth-child(5){animation-delay:.5s;}
.product-info>*:nth-child(6){animation-delay:.6s;}

@keyframes fadeUp{

from{

    opacity:0;

    transform:translateY(25px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}


/*==========================================
      REDUCE MOTION
==========================================*/

@media (prefers-reduced-motion: reduce){

*{

    animation:none !important;

    transition:none !important;

}

}
.product-header{

position:fixed;

top:15px;

right:15px;

left:15px;

display:flex;

justify-content:space-between;

align-items:center;

z-index:9999;

}

.hamburger,
.cart-btn{

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

cursor:pointer;

box-shadow:0 8px 25px rgba(0,0,0,.25);

text-decoration:none;

color:#111;

position:relative;

}

#cart-count{

position:absolute;

top:-6px;

right:-6px;

width:22px;

height:22px;

border-radius:50%;

background:red;

color:#fff;

font-size:12px;

display:flex;

justify-content:center;

align-items:center;

font-weight:bold;

}
/*==========================
HEADER
==========================*/

.product-header{

position:fixed;

top:0;
left:0;
right:0;

height:72px;

background:#111827;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 18px;

z-index:9999;

box-shadow:0 6px 18px rgba(0,0,0,.2);

}

.header-right,
.header-center,
.header-left{

display:flex;

align-items:center;

gap:15px;

}

.header-center{

position:absolute;

left:50%;

transform:translateX(-50%);

}

.header-logo{

width:65px;

height:66px;

border-radius:50%;

object-fit:cover;

}

.logo-title{

color:#fff;

font-size:22px;

font-weight:800;

}

.hamburger{

width:48px;

height:48px;

border:none;

border-radius:12px;

background:#d4af37;

color:#fff;

font-size:22px;

cursor:pointer;

}

.cart-btn{

position:relative;

width:48px;

height:48px;

background:#d4af37;

border-radius:12px;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

text-decoration:none;

}

#cart-count{

position:absolute;

top:-6px;

right:-6px;

width:22px;

height:22px;

background:red;

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:bold;

}

/*==========================
BODY
==========================*/

body{

padding-top:90px;

}

/*==========================
MENU
==========================*/

.mobile-menu{

position:fixed;

top:0;

right:-310px;

width:300px;

height:100%;

background:#111827;

transition:.35s;

z-index:99999;

overflow-y:auto;

padding:20px;

}

.mobile-menu.active{

right:0;

}

#menu-overlay{

position:fixed;

inset:0;

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

opacity:0;

visibility:hidden;

transition:.3s;

z-index:99998;

}

#menu-overlay.active{

opacity:1;

visibility:visible;

}

.close-menu{

background:none;

border:none;

color:#fff;

font-size:30px;

cursor:pointer;

margin-bottom:15px;

}

.mobile-menu-top{

text-align:center;

margin-bottom:25px;

}

.menu-logo{

width:85px;

height:105px;

border-radius:50%;

object-fit:cover;

margin-bottom:10px;

}

.mobile-menu h2{

color:#fff;

}

.mobile-phone{

background:#1f2937;

padding:12px;

border-radius:10px;

color:#fff;

margin-bottom:18px;

display:flex;

gap:10px;

align-items:center;

}

.mobile-menu a{

display:block;

padding:14px;

margin:8px 0;

border-radius:10px;

background:#1f2937;

color:#fff;

text-decoration:none;

transition:.3s;

}

.mobile-menu a:hover{

background:#d4af37;

}

.logout-btn{

width:100%;

margin-top:20px;

height:48px;

border:none;

border-radius:10px;

background:#dc2626;

color:#fff;

font-size:16px;

cursor:pointer;

}
.description-box{

    margin-top:20px;

    padding:20px;

    border-radius:18px;

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

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

}

.description-box h3{

    color:#f5c542;

    margin-bottom:12px;

    font-size:20px;

}

#product-description{

    color:#eee;

    line-height:2;

    white-space:pre-wrap;

    font-size:16px;

}
.buy-row{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
    flex-wrap:wrap;
}

.stock-box{
    background:#f6f6f6;
    border:1px solid #ddd;
    border-radius:10px;
    padding:8px 14px;
    font-size:14px;
    color:#555;
    font-weight:700;
}

.stock-box span{
    font-size:14px;
}
.description-box{

    margin-top:30px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:20px;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

    line-height:2.2;

}

.description-box h3{

    color:#c89b2d;

    margin-bottom:15px;

    font-size:22px;

}

#product-description{

    white-space:pre-line;

    font-size:16px;

    color:#444;

}
@media(max-width:768px){

.product-header{

    padding:12px;

}

.header-center{

    flex:1;

    justify-content:center;

}

.header-logo{

    width:42px;

    height:42px;

}

.logo-title{

    font-size:20px;

}

.header-right{

    width:90px;

}

.cart-btn{

    margin-left:8px;

}

}
@media(max-width:768px){

.product-page{

    display:flex;

    flex-direction:column;

    padding:18px;

}

.product-info{

    margin-top:20px;

}

.price-box{

    margin-top:15px;

}

#add-to-cart{

    width:100%;

}

.buy-row{

    flex-direction:column;

    align-items:stretch;

}

.stock-box{

    text-align:center;

}

}
.description-box{

margin-top:25px;

background:#fff;

border:1px solid #eee;

border-radius:16px;

padding:18px;

line-height:2.2;

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

}

.description-box h3{

margin-bottom:12px;

color:#c59b2d;

font-size:20px;

}

#product-description{

white-space:pre-line;

font-size:15px;

color:#444;

}
#product-image{

transition:.3s;

touch-action:pan-y;

user-select:none;

}
.buy-row{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
}

.buy-row #add-to-cart{
    flex:1;
}

.buy-row .stock-box{

    min-width:135px;

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

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

    color:#fff;

    border-radius:18px;

    padding:18px 15px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

    font-weight:700;
}

#product-stock{
    color:#fff;
    font-size:14px;
}
.description-box{

    margin-top:-10px;
margin-bottom: 20px;
    background:rgba(255,255,255,.05);

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

    border-radius:18px;

    padding:22px;

}

.description-box h3{

    color:#f5c542;

    margin-bottom:14px;

    font-size:22px;

}

#product-description{

    color:#e5e7eb;

    line-height:2.2;

    white-space:pre-line;

    font-size:16px;

}
@media(max-width:768px){

.buy-row{

    flex-direction:row;

    align-items:center;

    gap:10px;

}

.buy-row .stock-box{

    min-width:100px;

    padding:15px 10px;

}

#add-to-cart{

    flex:1;

}

}