.kutu .card-header{

  position: relative;
padding: 50px 60px;
overflow: hidden;
background-color: #ffffff;
border-radius:10px;
box-shadow: 0 0 15px rgba(6,15,154,.26);
cursor: pointer;
}

.kutu .card-header .icon-img{width: 40px; height: 40px; display: inline-block;    position: relative;}

.kutu .card-header .h3{    position: relative;
    font-weight: 700;display: inline-block;
    line-height: 1.3em;
    margin-top: 7px;
    margin-left: 20px; font-size: 21px !important}

    .kutu .k-yazi{    position: relative;
    color: #687693;
    font-size: 16px;
    line-height: 1.7em;
    margin-top: 15px;
    display: block;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease; font-weight: 600}

.kutu .card-header::after{    background-image: url(/images/toz-parent-1.png);
 content: '';display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 102px;
  height: 102px;
  transform: translateX(176px);
  background-repeat: no-repeat;
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
      z-index: 9;
}

.kutu:hover .card-header::after,.kutu .card-header:not(.collapsed)::after{transform: translateX(0px);
    transition-delay: 400ms;
}

.card-body{display: block; position: relative;}

.kutu .kapat{
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #08bae4;
  top: 10px;
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
      z-index: 99;
}

.kutu .card-header:not(.collapsed) .kapat{ transform: rotate(135deg)  scale(1.2)}


.kutu .card-header::before{    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    width: 0px;
    height: 100%;
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
    background-image: -ms-linear-gradient(top, #efefef  0%, #f4f4f4  100%);
    background-image: -moz-linear-gradient(top, #efefef  0%, #f4f4f4  100%);
    background-image: -o-linear-gradient(top, #efefef  0%, #f4f4f4  100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef ), color-stop(100, #f4f4f4 ));
    background-image: -webkit-linear-gradient(top, #efefef  0%, #f4f4f4  100%);
    background-image: linear-gradient(to bottom, #efefef  0%, #f4f4f4  100%);}

    .kutu:hover .card-header::before, .kutu .card-header:not(.collapsed)::before{transform: translateX(0px);
    width: 100%;
    }



.pattern-bir{
  position: absolute;
left: 0px;
top: 150px;
width: 493px;
height: 938px;
background-repeat: no-repeat;
    animation-name: float_left_right;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

  -webkit-animation-name: float_left_right;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

  -moz-animation-name: float_left_right;
    -moz-animation-duration: 30s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

  -ms-animation-name: float_left_right;
    -ms-animation-duration: 30s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

  -o-animation-name: float_left_right;
    -o-animation-duration: 30s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

/* Bob */
@-webkit-keyframes float_left_right {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0.40;
  }

  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 1;
  }
}

@keyframes float_left_right {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0.40;
  }

  100% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 1;
  }
}


.pattern-iki{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 493px;
  height: 938px;
  background-repeat: no-repeat;
  animation-name: float_up_down;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: float_up_down;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: float_up_down;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float_up_down;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float_left_right;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;}

    /* Bob Up Down*/
@-webkit-keyframes float_up_down {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes float_up_down {
  0% {
    transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }

  50% {
    transform: translateY(30px);
    transform: translateY(30px);
    opacity: 1;
  }

  100% {
    transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}


@media (max-width:992px) {
  .kutu .card-header { padding: 35px 25px;}
  .kutu .card-header .h3 { font-size: 18px !important;}
  .kutu .k-yazi { font-size: 14px; margin-top: 11px;}
}


@media (max-width:768px) {
  .kutu .card-header { padding: 20px;}
  .kutu .card-header .h3 { font-size: 18px !important;}
  .kutu .k-yazi { font-size: 12px; margin-top: 11px;}
  .kutu .card-header::after { right: -16px; top: -14px;}
}
