/*! SVG Türkiye Haritası | CSS | MIT Lisans | dnomak.com */

.svg-turkiye-haritasi {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.svg-turkiye-haritasi svg {
  width: 100%;
  height: auto;
}

.il-isimleri {
  position: absolute;
  z-index: 2;
}

.il-isimleri div {
  font-family: 'Open Sans';
  display: inline-block;
  background: #1094F6;
  color: #fff;
  padding: 8px 16px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#svg-turkiye-haritasi path {
  cursor: pointer;
  fill: #ccc;
}

#svg-turkiye-haritasi path:hover {
  fill: url(#diagonalHatched);
}

#guney-kibris {
  pointer-events: none;
}

#svg-turkiye-haritasi text{
  pointer-events: none;
  font-weight: 900;
  fill: #fff ;
  font-family: 'Palanquin', sans-serif !important;
  font-size:16px;
}

#svg-turkiye-haritasi text:not(.has-product){
  display: none;
}

#svg-turkiye-haritasi .has-product path{
  fill: #888;
  stroke: #F9E21B;
  stroke-width: 4px;
  stroke-dasharray: 75;
  animation: dash 11s linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#svg-turkiye-haritasi .has-product path:hover{
  fill: #1094F6;
  stroke: #1094F6;
  stroke-dasharray: 0;
}








@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}



    @keyframes colorchange
    {
      0%   {fill: #1094F6;}
      50% {fill: #59b9ff;}
      100% {fill: #1094F6;}
    }




@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}


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

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}