/* Sayfa ve harita alanı için temel stiller */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: aliceblue;
    background-size: contain; /* Fotoğrafı tam ekran sığacak şekilde ayarlar */
    background-repeat: no-repeat; /* Fotoğrafın tekrar etmesini engeller */
    background-position: center; /* Fotoğrafı ortalar */
}


/* Header'ı sabit üst kısma yerleştiriyoruz */
header {
    position: fixed;
    z-index: 1000;  /* Başlık kısmı diğer öğelerin üzerinde olsun */
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    width: 100%;
}

#home-button {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
}

/* Flipbox CSS */

.flip-box {
    width: 100%;
    max-width: 350px; /* Popup genişliğini sınırlayabilirsiniz */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .flip-inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .flip-front, .flip-back {
    padding: 10px;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .flip-front {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  
  .flip-back {
    background: #f8f8f8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: none;
  }
  
  .flip-box:hover .flip-front {
    display: none;
  }
  
  .flip-box:hover .flip-back {
    display: block;
  }
  
  .flip-button {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .flip-button:hover {
    background-color: #45a049;
  }
  
  .popup-content {
    max-width: 300px; /* Popup içeriği için maksimum genişlik */
    overflow-y: auto; /* İçerik çok uzunsa kaydırma çubuğu ekler */
    height: 300px; /* Popup'ın yüksekliği */
    padding: 10px;
    word-wrap: break-word; /* Uzun kelimelerin satır başına geçmesini sağlar */
    background-color: #ffffff; /* Kahverengi arka plan */
    border-radius: 8px; /* Köşeleri yuvarlat */
  }


.description-text {
  color: rgb(0, 0, 0);
  word-wrap: break-word;
  margin-bottom: 10px;
}

.full-description {
  color: rgb(0, 0, 0);
  margin-top: 10px;
  display: none;
}

.toggle-description {
  background-color: #282828;
  border: none;
  color: rgb(255, 255, 255);
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.toggle-description:hover {
  background-color: #4a3f2e;
}

.hazine-polygon {
  
  transition: all 0.3s ease-in-out;  /* Tüm stil değişikliklerine animasyon ekleyin */
}

.hazine-polygon:hover {
  fill: #5a5a5a;
  fill-opacity: 0.4;
}