.map {
  position: relative;
  max-width: 100%;
  margin: auto;
  margin-top: 50px;
}

.cerrahi-map{
  position: relative;
  width: 100%;
  margin: auto;
  margin-top: 50px;
}

.map h3 {
  font-size: 24px;
  font-weight: 700;
  color: red;
}

.cerrahi-map h3 {
  font-size: 24px;
  font-weight: 700;
  color: red;
}

.map img {
  width: 100%;
  height: auto;
  display: block;
}

.cerrahi-map img {
  width: 100%;
  height: auto;
  display: block;
}

.map-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 99;
  width: 80%;
  padding: 2rem;
  background-color: #fff;
  transition: all 30ms ease-in;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.map-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.marker {
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 36px;
  height: 36px;
  color: #fff;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  border-radius: 50%;
  background-color: red;
  transition: all 300ms;
}

.marker:hover {
  color: red;
  background-color: white;
  text-decoration: none;
}


.marker1 {
  top: 2%;
  left: 30%;
}

.marker2 {
  top: 15%;
  left: 15%;
}

.marker3 {
  top: 57%;
  left: 11%;
}

.marker4 {
  bottom: 0%;
  left: 40%;
}

.marker5 {
  top: -2%;
  right: 15%;
}

.marker6 {
  top: 10%;
  right: 15%;
}

.marker7 {
  top: 25%;
  right: 40%;
}

.marker8 {
  top: 50%;
  left: 45%;
}

.marker9 {
  bottom: 20%;
  left: 15%;
}

.marker10 {
  bottom: 10%;
  right: 20%;
}

/*----Compact----*/

.compact-map1 {
    top: 42%;
    left: 23.5%;
}

.compact-map2 {
  top: 42%;
  left: 28.5%;
}

.compact-map3 {
  top: 42%;
  left: 33.5%;
}

.compact-map4 {
  top: 42%;
  left: 38.5%;
}

.compact-map5 {
  top: 42%;
  left: 43.5%;
}

.compact-map6 {
  top: 42%;
  left: 48.5%;
}

.compact-map7 {
  top: 26%;
  right: 24%;
}

.compact-map8 {
  top: 35%;
  left: 12%;
}

.compact-map9 {
  bottom: 30%;
  left: 15%;
}

.compact-map10 {
  top: 35%;
  left: 19%;
}


/*----Complete----*/
.complete-map1 {
  top: 24%;
  left: 18%;
}

.complete-map2 {
top: 24%;
left: 23%;
}

.complete-map3 {
top: 24%;
left: 28%;
}

.complete-map4 {
top: 24%;
left: 34%;
}

.complete-map5 {
top: 24%;
left: 40%;
}

.complete-map6 {
top: 24%;
left: 45%;
}

.complete-map7 {
top: 10%;
right: 20%;
}

.complete-map8 {
top: 27%;
left: 10%;
}

.complete-map9 {
bottom: 15%;
left: 45%;
}

.complete-map10 {
top: 24%;
right: 20%;
}

.complete-map11 {
top: 24%;
right: 38%;
}

.complete-map12 {
bottom: 35%;
right: 35%;
}

.complete-map13 {
bottom: 35%;
right: 20%;
}

.complete-map14 {
bottom: 17%;
right: 20%;
}

.complete-map15 {
bottom: 50%;
right: 5%;
}

/*----Guided----*/

.guided-map1 {
  top: 45%;
  left: 27%;
}

.guided-map2 {
  top: 45%;
  left: 42%;
}

.guided-map3 {
top: 35%;
left: 45%;
}

.guided-map4 {
top: 25%;
left: 48%;
}

.guided-map5 {
  top: 5%;
  left: 40%;
}

.guided-map6 {
  bottom: 13%;
  left: 13%;
}

.guided-map7 {
  bottom: 13%;
  left: 27%;
}

.guided-map8 {
  bottom: 13%;
  left: 41%;
}

.guided-map9 {
  bottom: 13%;
  right: 40%;
}

.guided-map10 {
  bottom: 13%;
  right: 20%;
}

.guided-map11 {
  top: 13%;
  right: 25%;
}

.guided-map12 {
  top: 15%;
  right: 35%;
}

.guided-map13 {
  top: 15%;
  right: 3%;
}

/*----Protez----*/

.protez-map1 {
  top: 33%;
  left: 15%;
}

.protez-map2 {
  top: 33%;
  left: 37%;
}

.protez-map3 {
top: 33%;
right: 35%;
}

.protez-map4 {
bottom: 25%;
right: 25%;
}


@media only screen and (min-width: 48em) {
  .map-item {
    position: absolute;
    width: 36px;
    height: 36px;
  }

  .map-item .marker {
    top: auto;
    left: auto;
  }

  .map-item1 {
    top: 2%;
    left: 30%;
  }

  .map-item2 {
    top: 15%;
    left: 15%;
  }

  .map-item3 {
    top: 57%;
    left: 11%;
  }

  .map-item4 {
    bottom: 0%;
    left: 40%;
  }

  .map-item5 {
    top: -2%;
    right: 15%;
  }

  .map-item6 {
    top: 10%;
    right: 15%;
  }

  .map-item7 {
    top: 25%;
    right: 40%;
  }

  .map-item8 {
    top: 50%;
    left: 45%;
  }

  .map-item9 {
    bottom: 20%;
    left: 15%;
  }

  .map-item10 {
    bottom: 10%;
    right: 20%;
  }


  

  .map-popup {
    position: absolute;
    width: 280px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Sol taraftaki noktalar için popup sağda açılacak */
  .map-item1 .map-popup,
  .map-item2 .map-popup,
  .map-item3 .map-popup,
  .map-item8 .map-popup,
  .map-item9 .map-popup {
    left: calc(100% + 60px);
    right: auto;
  }

  /* Sağ taraftaki noktalar için popup solda açılacak */
  .map-item5 .map-popup,
  .map-item6 .map-popup,
  .map-item7 .map-popup,
  .map-item10 .map-popup,
  .map-item4 .map-popup {
    right: calc(100% + 30px);
    left: auto;
  }

  /* Ok işareti için genel stil */
  .map-popup:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -16px;
    width: 0;
    height: 0;
    border-style: solid;
  }

  /* Sol taraftaki noktalar için ok işareti */
  .map-item1 .map-popup:before,
  .map-item2 .map-popup:before,
  .map-item3 .map-popup:before,
  .map-item8 .map-popup:before,
  .map-item9 .map-popup:before {
    left: -16px;
    border-width: 16px 16px 16px 0;
    border-color: transparent #fff transparent transparent;
  }

  /* Sağ taraftaki noktalar için ok işareti */
  .map-item5 .map-popup:before,
  .map-item6 .map-popup:before,
  .map-item7 .map-popup:before,
  .map-item10 .map-popup:before,
  .map-item4 .map-popup:before {
    right: -16px;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #fff;
  }
}

@media only screen and (max-width: 47.9em) {
  .map {
    max-width: 280px;
  }
  
  .map-popup {
    width: 200px;
    padding: 1rem;
  }
  
  .map h3 {
    font-size: 18px;
  }
  
  .marker {
    width: 16px;
    height: 16px;
    line-height: 18px;
    font-size: 16px;
  }

  .map-item {
    position: absolute;
    width: 36px;
    height: 36px;
  }

  .map-item .marker {
    top: auto;
    left: auto;
  }
}

@media only screen and (min-width: 48em) and (max-width: 64em) {
  .map {
    max-width: 400px;
  }
  
}

@media only screen and (min-width: 64.1em) {
  .map {
    max-width: 500px;
  }

}