/* ===========================================
   AYITI NETWORK BUTTON
   Prefix: kesyon-repons-
=========================================== */

.kesyon-repons-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.kesyon-repons-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    padding:18px 38px;

    background:linear-gradient(135deg,#087f5b,#0aa06d);
    color:#ffffff;

    text-decoration:none;
    font-size:18px;
    font-weight:700;
    font-family:Arial,Helvetica,sans-serif;

    border-radius:60px;
    overflow:hidden;

    transition:all .35s ease;

    box-shadow:
        0 10px 30px rgba(8,127,91,.35),
        inset 0 1px 0 rgba(255,255,255,.25);
}

/* Shine Effect */

.kesyon-repons-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-20deg);

    transition:left .8s ease;

}

.kesyon-repons-btn:hover::before{

    left:150%;

}

/* Hover */

.kesyon-repons-btn:hover{

    transform:translateY(-6px);

    box-shadow:
        0 18px 45px rgba(8,127,91,.45);

}

/* Click */

.kesyon-repons-btn:active{

    transform:scale(.96);

}

/* Text */

.kesyon-repons-text{

    position:relative;
    z-index:5;

}

/* Arrow */

.kesyon-repons-arrow{

    position:relative;
    z-index:5;

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

    width:36px;
    height:36px;

    border-radius:50%;

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

    transition:all .35s ease;

    font-size:18px;

}

.kesyon-repons-btn:hover .kesyon-repons-arrow{

    transform:translateX(8px);

    background:#ffffff;

    color:#087f5b;

}

/* Ripple */

.kesyon-repons-btn::after{

    content:"";

    position:absolute;

    width:25px;
    height:25px;

    border-radius:50%;

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

    transform:scale(0);

    opacity:0;

}

.kesyon-repons-btn:active::after{

    animation:kesyon-repons-ripple .55s ease;

}

@keyframes kesyon-repons-ripple{

    from{

        transform:scale(0);

        opacity:.8;

    }

    to{

        transform:scale(18);

        opacity:0;

    }

}

/* Focus */

.kesyon-repons-btn:focus{

    outline:none;

}

.kesyon-repons-btn:focus-visible{

    outline:3px solid rgba(8,127,91,.35);

    outline-offset:4px;

}

/* Mobile */

@media(max-width:768px){

.kesyon-repons-wrapper{

    padding:30px 15px;

}

.kesyon-repons-btn{

    width:100%;
    max-width:360px;

    padding:16px 20px;

    font-size:17px;

}

.kesyon-repons-arrow{

    width:32px;
    height:32px;

    font-size:16px;

}

}