/* =========================================================
   TAMINYAR — BACK TO TOP V2
   ========================================================= */

#ty-back-to-top {
    position: fixed;

    left: 24px;
    bottom: 24px;

    z-index: 9998;

    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    padding: 0;

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

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #123f53 0%,
            #0d3243 100%
        );

    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(8,49,67,.20),
        inset 0 1px 0
        rgba(255,255,255,.08);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(14px)
        scale(.92);

    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


/* نمایش */

#ty-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


/* Accent سبز */

#ty-back-to-top::before {
    content: "";

    position: absolute;

    top: 5px;

    width: 16px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #27b867,
            #54d285
        );
}


/* SVG */

#ty-back-to-top svg {
    display: block;

    width: 22px;
    height: 22px;

    margin-top: 3px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .2s ease;
}


#ty-back-to-top:hover {
    background:
        linear-gradient(
            145deg,
            #15985b 0%,
            #117d4b 100%
        );

    box-shadow:
        0 15px 34px
        rgba(18,128,76,.25);

    transform:
        translateY(-3px)
        scale(1);
}


#ty-back-to-top:hover svg {
    transform:
        translateY(-2px);
}


#ty-back-to-top:active {
    transform:
        translateY(0)
        scale(.96);
}


#ty-back-to-top:focus-visible {
    outline:
        3px solid
        rgba(56,199,111,.28);

    outline-offset: 3px;
}


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

@media (max-width: 680px) {

    #ty-back-to-top {
        left: 16px;

        bottom:
            calc(
                16px +
                env(safe-area-inset-bottom)
            );

        width: 46px;
        height: 46px;

        border-radius: 15px;
    }


    #ty-back-to-top svg {
        width: 20px;
        height: 20px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    #ty-back-to-top,
    #ty-back-to-top svg {
        transition: none !important;
    }

}