/* =====================================
   Variables
===================================== */

:root{

    /* =====================================
       Cube Geometry
    ===================================== */

    --cube-front-width:260px;
    --cube-front-height:380px;

    --cube-side-width:210px;

    /* فضای رزرو شده */

    --cube-wrapper-width:340px;
    --cube-wrapper-height:460px;
    /* =====================================
       Shape
    ===================================== */

    --cube-radius:28px;

    --arta-cube-transition:1.35s;

}

/* =====================================
   Widget
===================================== */

.arta-service-cube-widget{
    width:100%;
    overflow:hidden;
}

/* =====================================
   Carousel
===================================== */

.arta-service-carousel{
    min-height:clamp(360px,55vw,550px);

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* =====================================
   Track
===================================== */

.arta-service-track{

    padding:140px 180px;

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

    gap:80px;

    overflow-x:auto;
    overflow-y:visible;

    scrollbar-width:none;
}

.arta-service-track::-webkit-scrollbar{
    display:none;
}

/* =====================================
   Item
===================================== */

.arta-service-item{

    flex:0 0 auto;
    min-width:0;

    transition:
        transform var(--arta-motion)
        cubic-bezier(.16,1,.3,1);

}

/* =====================================
   Card Wrapper
===================================== */

.arta-service-card{

    position:relative;

    width:var(--cube-wrapper-width);
    height:var(--cube-wrapper-height);

    overflow:visible;

}

/* =====================================
   Cube
===================================== */

.arta-cube{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    transform-style:preserve-3d;
    transform-origin:center center;

    z-index:2;

    transition:
        transform
        var(--arta-cube-transition)
        cubic-bezier(.18,.9,.18,1);

}

/* =====================================
   Faces
===================================== */

.arta-face{

    position:absolute;

    left:50%;
    top:50%;

    box-sizing:border-box;

    backface-visibility:hidden;
    transform-style:preserve-3d;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.03)
        ),

        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,.05),
            transparent 60%
        ),

        radial-gradient(
            circle at 50% 65%,
            rgba(0,0,0,.12),
            transparent 80%
        );

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

    color:#fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -18px 40px rgba(0,0,0,.12),
        0 10px var(--arta-card-shadow-size,30px)
        var(--arta-card-shadow-color,rgba(0,0,0,.15));

    overflow:hidden;

}

/* =====================================
   Edge Light
===================================== */

.arta-face::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    opacity:0;

    transition:opacity .45s ease;

    background:

        /* Top */
        linear-gradient(
            90deg,
            rgba(190,140,255,.55) 0%,
            rgba(165,90,255,1) 18%,
            rgba(225,185,255,.92) 50%,
            rgba(165,90,255,1) 82%,
            rgba(190,140,255,.55) 100%
        ) top/100% 2px no-repeat,

        /* Bottom */
        linear-gradient(
            90deg,
            rgba(190,140,255,.55) 0%,
            rgba(165,90,255,1) 18%,
            rgba(225,185,255,.92) 50%,
            rgba(165,90,255,1) 82%,
            rgba(190,140,255,.55) 100%
        ) bottom/100% 2px no-repeat,

        /* Left */
        linear-gradient(
            180deg,
            rgba(190,140,255,.55) 0%,
            rgba(165,90,255,1) 18%,
            rgba(225,185,255,.92) 50%,
            rgba(165,90,255,1) 82%,
            rgba(190,140,255,.55) 100%
        ) left/2px 100% no-repeat,

        /* Right */
        linear-gradient(
            180deg,
            rgba(190,140,255,.55) 0%,
            rgba(165,90,255,1) 18%,
            rgba(225,185,255,.92) 50%,
            rgba(165,90,255,1) 82%,
            rgba(190,140,255,.55) 100%
        ) right/2px 100% no-repeat;

}

.arta-service-item.is-active .arta-face::after{

    opacity:1;

}

.arta-face::before{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:inherit;

    pointer-events:none;

    opacity:.95;

    transition:
        opacity .45s ease,
        filter .45s ease;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(165,90,255,.55),
            transparent
        ),

        linear-gradient(
            180deg,
            transparent,
            rgba(185,120,255,.45),
            transparent
        );

    filter:blur(18px);

    transform:translateZ(-1px);


}

.arta-service-item.is-active .arta-face::before{

    opacity:1;

    filter:blur(22px);

    box-shadow:

        0 0 10px rgba(165,90,255,.22),

        0 0 24px rgba(165,90,255,.18),

        0 0 42px rgba(165,90,255,.12);

}


/* =====================================
   Glass Reflection
===================================== */

.arta-face::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:
        transparent;

    opacity:.45;

    animation:
        artaGlassBreath 7s ease-in-out infinite;

}

@keyframes artaGlassBreath{

    0%,100%{

        opacity:.38;

    }

    50%{

        opacity:.55;

    }

}

/* =====================================
   Front
===================================== */

.arta-face-front{

    width:var(--cube-front-width);
    height:var(--cube-front-height);

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;

    padding:28px 28px 22px;

    border-radius:var(--cube-radius);

    transform:
        translate(-50%,-50%)
        translateZ(calc(var(--cube-side-width)/2));

}

/* =====================================
   Right
===================================== */

.arta-face-right{

    width:var(--cube-side-width);
    height:var(--cube-front-height);


    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;

    padding:32px;

    border-radius:var(--cube-radius);

    transform:
        translate(-50%,-50%)
        rotateY(90deg)
        translateZ(calc(var(--cube-front-width)/2));

    filter:

        brightness(.82)

        saturate(.92);

    box-shadow:

        inset -18px 0 30px rgba(0,0,0,.18);

}

/* =====================================
   Top
===================================== */

.arta-face-top{

    width:var(--cube-front-width);
    height:var(--cube-side-width);

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

    border-radius:var(--cube-radius);

    background:

        linear-gradient(
            to bottom,
            rgba(190,140,255,.82),
            rgba(165,110,255,.40) 60%,
            rgba(150,95,255,.12)
        );

    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    transform:
        translate(-50%,-50%)
        rotateX(90deg)
        translateZ(calc(var(--cube-front-height)/2));

    opacity:0;

    transition:
        opacity .6s ease;

    filter:

        brightness(1.15)

        saturate(1.05);

    box-shadow:

        inset -18px 0 30px rgba(0,0,0,.18);


}

/* =====================================
   Typography
===================================== */

.arta-card-title{

    width:100%;

    margin:18px 0 22px;

    text-align:center;

    font-size:clamp(18px,2vw,22px);

    font-weight:600;

    line-height:1.45;

    letter-spacing:-.3px;

    color:rgba(255,255,255,.92);

}


.arta-card-price{

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    width:100%;

    flex:1;

    margin:0;

    gap:4px;

    text-align:center;

}

.arta-price-value{

    font-size:64px;

    font-size:clamp(46px,8vw,64px);

    line-height:.88;

    letter-spacing:-2px;

    color:#fff;

    text-shadow:

        0 0 2px rgba(255,255,255,.95),

        0 0 12px rgba(255,255,255,.55);

}

.arta-price-unit{

    font-size:clamp(14px,3vw,18px);

    font-weight:500;

    opacity:.78;

    letter-spacing:.5px;

}

.arta-feature-item{

    position:relative;

    width:100%;

    text-align:center;

    padding:7px 0;

    color:#fff;

    font-weight:600;
    opacity:.78;

    transition:

        color .35s,
        opacity .35s,
        text-shadow .35s;

    text-shadow:
        0 0 8px rgba(255,255,255,.8),
        0 0 20px rgba(180,120,255,.35);

}

.arta-feature-item:not(:last-child)::after{

    content:"";

    position:absolute;

    left:18%;
    right:18%;
    bottom:0;

    height:1px;

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

}

.arta-service-item.is-active .arta-feature-item{

    opacity:1;

    text-shadow:

        0 0 10px rgba(255,255,255,.95),
        0 0 24px rgba(180,120,255,.45);

}

.arta-service-item.is-active
.arta-feature-item:not(:last-child)::after{

    background:

        rgba(255,255,255,.22);

}

.arta-card-badge{

    font-size:20px;
    font-weight:800;

    text-shadow:
        0 0 12px rgba(255,255,255,1),
        0 0 25px rgba(180,120,255,.9),
        0 0 50px rgba(180,120,255,.5);

}

/* =====================================
   Active
===================================== */

.arta-service-item.is-active{

    opacity:1;

    transform:scale(var(--arta-active-scale,1.05));

    z-index:20;
}

.arta-service-item.is-active .arta-cube{

    transform:
        rotateX(var(--arta-active-rotate-x,-22deg))
        rotateY(var(--arta-active-rotate-y,-42deg));

}

.arta-service-item:hover .arta-cube{

    transform:

        translateY(-8px)

        rotateX(-12deg)

        rotateY(-35deg);

}

.arta-service-item:hover .arta-price-value{

    text-shadow:

        0 0 2px rgba(255,255,255,1),

        0 0 12px rgba(255,255,255,.9),

        0 0 26px rgba(255,255,255,.45);

}


.arta-service-item.is-active .arta-face-right{

    opacity:1;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.08)
        );

}


.arta-service-item.is-active .arta-face-top{

    opacity:1;

}

/* =====================================
   Inactive
===================================== */

.arta-service-item:not(.is-active){

    opacity:var(--arta-inactive-opacity,.55);
    transform:scale(.9);
}

.arta-service-item:not(.is-active):hover .arta-cube{

    transform:

        rotateX(-12deg)
        rotateY(-35deg);

}

.arta-service-item:not(.is-active) .arta-face-front{

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        );

    border-color:rgba(255,255,255,.06);
}

.arta-service-item:not(.is-active)
.arta-card-title,

.arta-service-item:not(.is-active)
.arta-card-price{

    opacity:.65;
}

/* =====================================
   Navigation
===================================== */

.arta-service-nav{

    width:52px;
    height:52px;

    position:absolute;
    top:50%;
    transform:translateY(-50%);

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

    padding:0;

    line-height:1;

    border:none;
    border-radius:50%;

    cursor:pointer;

    color:#fff;

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

    backdrop-filter:blur(12px);

    z-index:50;

    box-shadow:
        0 0 var(--arta-nav-glow-size,0px)
        var(--arta-nav-glow-color,transparent);
}

.arta-service-prev{
    right:var(--arta-nav-offset,20px);
    left:auto;
}

.arta-service-next{
    left:var(--arta-nav-offset,20px);
    right:auto;
}


/* =====================================
   Button
===================================== */

.arta-card-button{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    width:100%;

    height:52px;

    border-radius:16px;

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

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.08),

            rgba(255,255,255,.02)

        );

    color:#fff;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:

        .35s;

}

.arta-card-button:hover{

    transform:

        translateY(-2px);

    border-color:

        rgba(255,255,255,.25);

    background:

        rgba(255,255,255,.10);

}


/* =====================================
   Cube Glow
===================================== */



/* =====================================
   Tablet
===================================== */

@media (max-width:1024px){


    :root{

        --cube-front-width:210px;
        --cube-front-height:300px;

        --cube-side-width:180px;

        --cube-wrapper-width:285px;
        --cube-wrapper-height:380px;

    }

    .arta-service-carousel{

        min-height:430px;

    }

    .arta-service-track{

        gap:34px;
        padding:70px 45px;

    }

    .arta-face-front{

        padding:22px 20px 18px;

    }

    .arta-face-right{

        padding:18px;

        gap:12px;

    }

    .arta-card-title{

        font-size:20px;

        margin:14px 0 18px;

    }

    .arta-price-value{

        font-size:54px;

    }

    .arta-price-unit{

        font-size:15px;

    }

    .arta-feature-item{

        font-size:14px;

        line-height:1.35;

    }

    .arta-card-button{

        height:46px;

        font-size:15px;

    }

}

/* =====================================
   Mobile
===================================== */

@media (max-width:767px){

    :root{

        --arta-active-rotate-x:-16deg;
        --arta-active-rotate-y:-26deg;

        --cube-front-width:185px;
        --cube-front-height:320px;

        --cube-side-width:175px;

        --cube-wrapper-width:285px;
        --cube-wrapper-height:390px;

    }

    /* ---------------------------------
       Carousel
    --------------------------------- */

    .arta-service-carousel{

        min-height:430px;

    }

    .arta-service-track{

        gap:22px;
        padding:50px 16px 90px;

    }

    .arta-service-card{

        width:var(--cube-wrapper-width);
        height:var(--cube-wrapper-height);

    }

    /* ---------------------------------
       Faces
    --------------------------------- */

    .arta-face-front{

        padding:18px 14px 16px;

    }

    .arta-face-right{

        padding:18px 12px;
        gap:12px;

    }

    .arta-face-top{

        border-radius:18px;

    }

    /* ---------------------------------
       Typography
    --------------------------------- */

    .arta-card-title{

        font-size:17px;
        line-height:1.4;
        margin:12px 0 16px;

    }

    .arta-price-value{

        font-size:48px;

    }

    .arta-price-unit{

        font-size:13px;

    }

    .arta-feature-item{

        font-size:14px;
        line-height:1.45;

    }

    .arta-card-button{

        height:44px;
        font-size:14px;

    }

    /* =====================================
    Mobile Navigation
    ===================================== */

    .arta-service-nav{

        width:46px;
        height:46px;

        top:auto;
        bottom:10px;

        transform:none;

    }

    .arta-service-prev{

        left:calc(50% + 14px);
        right:auto;

    }

    .arta-service-next{

        left:calc(50% - 60px);
        right:auto;

    }

    /* ---------------------------------
       Cube
    --------------------------------- */

    .arta-service-item.is-active .arta-cube{

        transform:
            rotateX(var(--arta-active-rotate-x))
            rotateY(var(--arta-active-rotate-y));

    }

    .arta-service-item:hover .arta-cube{

        transform:
            translateY(-4px)
            rotateX(-12deg)
            rotateY(-22deg);

    }

    .arta-service-item:not(.is-active):hover .arta-cube{

        transform:
            rotateX(-12deg)
            rotateY(-22deg);

    }

    /* ---------------------------------
       Mobile Glow
    --------------------------------- */


}