.asagiSabit {
    position: fixed;
    bottom: 10px;
    /* right:0px; */
    z-index: 1039;
    /* right: 0px; */
}

.whatsappBlock a {
    outline: none;
    position: relative;
    display: inline-block;
    height: 100px;
    width: 120px;
    background: none;
    padding: 32px;
    text-align: center;
}

.whatsappBlock a img {
    position: relative;
    z-index: 8;
    height: 55px;
    border: 1px solid #fff0;
    width: 55px;
    max-width: 65px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    max-height: fit-content;
}

.whatsappBlock a:after {
    content: "";
    width: 13.610px;
    height: 13.610px;
    background: green;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    right: 29px;
    border: 2px solid #fff;
    z-index: 9;
}

.message {
    position: absolute;
    left: 82px;
    padding: 0px;
    text-align: center;
    background: #00a8e2;
    color: #fff;
    width: 87px;
    top: 48px;
    opacity: 1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: opacity .3s, right .4s;
    -moz-transition: opacity .3s, right .4s;
    -ms-transition: opacity .3s, right .4s;
    -o-transition: opacity .3s, right .4s;
    transition: opacity .3s, right .4s;
    display: none;
}

.message:after {
    content: "";
    position: absolute;
    left: 19px;
    top: 17px;
    background: #65BC54;
    width: 14px;
    height: 14px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    display: none;
}

.asagiSabit:hover .message {
    right: -90px;
    opacity: 1;
}


/*** Online ***/

.whatsappBlock a.online .kutucuk {
    background: rgba(26, 183, 68, 0.25);
}

.whatsappBlock a.online:after {
    background: green
}

a.online .message,
a.online .message:after {
    background: #65BC54
}


/*** Offline ***/

.whatsappBlock a.offline .kutucuk {
    background: rgba(153, 153, 153, 0.25);
}

.whatsappBlock a.offline:after {
    background: #999
}

a.offline .message,
a.offline .message:after {
    background: #999
}


/*** Busy ***/

.whatsappBlock a.busy .kutucuk {
    background: rgba(255, 165, 0, 0.25);
}

.whatsappBlock a.busy:after {
    background: orange
}

a.busy .message,
a.busy .message:after {
    background: orange
}

.kutucuklar {
    position: absolute;
    left: 34px;
    top: 34px;
}

.kutucuk {
    background: rgba(0, 168, 226, 0.15);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    z-index: 4;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@keyframes zoomOut {
    from {
        opacity: 0
    }
    50% {
        opacity: 1;
        -webkit-transform: scale3d(0.33, 0.33, 0.33);
        transform: scale3d(0.33, 0.33, 0.33)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(0.33, 0.33, 0.33);
        transform: scale3d(0.33, 0.33, 0.33)
    }
}

.animated .k1 {
    animation: 3000ms kutucukBir infinite alternate ease-in-out;
}

.animated .k2 {
    animation: 6500ms kutucukIki infinite alternate ease-in-out;
}

.animated .k3 {
    animation: 9000ms kutucukUc infinite alternate ease-in-out;
}

@keyframes kutucukBir {
    0 {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    50% {
        transform: scale(2);
        -webkit-transform: scale(2)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes kutucukIki {
    0 {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    25% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    75% {
        transform: scale(2);
        -webkit-transform: scale(2)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes kutucukUc {
    0 {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    33% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    66% {
        transform: scale(2);
        -webkit-transform: scale(2)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}


/***** play animasyon başlangıçı **/


/*** Offline ***/

.playBlock a.offline .kutucukk {
    background: rgba(153, 153, 153, 0.25);
}

.playBlock a.offline:after {
    background: #999
}

.playBlock a.busy .kutucukk {
    background: rgba(255, 165, 0, 0.25);
}

.playBlock a.busy:after {
    background: orange
}

.kutucuklarr {
    position: absolute;
    left: 25px;
    top: 25px
}

.kutucukk {
    background: rgba(255, 255, 255, 0.25);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    position: absolute;
    z-index: 4;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.animatedplay {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.playBlock a {
    outline: none;
    position: relative;
    display: inline-block;
    height: 100px;
    width: 115px;
    background: none;
    padding: 25px;
    text-align: center;
}

.playBlock a img {
    position: relative;
    z-index: 8;
    height: 65px;
    border: 1px solid #666;
    width: 65px;
    max-width: 65px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}


/*.playBlock a:after {
    content: "";
    width: 13.610px;
    height: 13.610px;
    background: green;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    right: 20px;
    border: 2px solid #fff;
    z-index: 9
} */

.animatedplay .p1 {
    animation: 3000ms kutucukBirr infinite alternate ease-in-out;
}

.animatedplay .p2 {
    animation: 6500ms kutucukIkii infinite alternate ease-in-out;
}

.animatedplay .p3 {
    animation: 9000ms kutucukUcc infinite alternate ease-in-out;
}

@keyframes kutucukBirr {
    0 {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    50% {
        transform: scale(2);
        -webkit-transform: scale(2)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes kutucukIkii {
    0 {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    25% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    75% {
        transform: scale(2);
        -webkit-transform: scale(2)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@keyframes kutucukUcc {
    0 {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    33% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
    66% {
        transform: scale(2);
        -webkit-transform: scale(2)
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}