/* ==== Palette (istədiyin kimi dəyiş) ==== */
:root{
  --gc-green-900:#0b5d3b;
  --gc-green-700:#1f7a4a;
  --gc-green-500:#2e8b57;
  --gc-green-100:#cfe9d8;
  --gc-cream-50:#faf8f2;
  --gc-cream-100:#f5f1e6;
  --gc-cream-200:#eee6d6;
  --gc-ink-900:#1f2937;   /* əsas mətn */
  --gc-ink-600:#4b5563;   /* ikincil mətn */
  --gc-shadow:0 8px 24px rgba(16,59,34,.15);
    --img-w: 2000; /* şəkil eni px */
    --img-h: 1500; /* şəkil hündürlüyü px */
}

.map-wrap{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--img-w) / var(--img-h); /* nisbəti saxla */
    /* İstəsən maksimum eni limitlə:
       max-width: 1200px;  */
}

#map{
    position: absolute;
    inset: 0; /* tam doldursun */
}

/* ==== Marker (DivIcon) badge/ring ilə ==== */
.custom-pin-wrap{
  position: relative;
  width: 18px; height: 18px;
  transform: translateZ(0);
}
.custom-pin{
  position:absolute; inset:0;
  border-radius:50%;
  background: var(--gc-green-700);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(47,125,82,.25);
}
.custom-pin-ring{
  position:absolute; inset:-8px;
  border-radius:50%;
  border: 2px solid rgba(47,125,82,.25);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(.65); opacity:.85; }
  70%{ transform: scale(1.15); opacity:.15; }
  100%{ transform: scale(1.35); opacity:0; }
}

/* ==== Tooltip (krem fon, yaşıl haşiyə) ==== */
.place-tooltip {
  font: 600 12px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; /* ağ mətn */
  padding: 6px 10px;
  background: linear-gradient(145deg, var(--gc-green-700), var(--gc-green-500));
  border: 1px solid var(--gc-green-500);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Tooltip oxunu da yaşıl et */
.leaflet-tooltip-top.place-tooltip::before {
  border-top-color: var(--gc-green-700);
}
.leaflet-tooltip-bottom.place-tooltip::before {
  border-bottom-color: var(--gc-green-700);
}
.leaflet-tooltip-left.place-tooltip::before {
  border-left-color: var(--gc-green-700);
}
.leaflet-tooltip-right.place-tooltip::before {
  border-right-color: var(--gc-green-700);
}

/* ==== Popup (başlıq zolağı + krem bədən) ==== */
.leaflet-popup-content-wrapper{
  background: var(--gc-cream-50);
  border: 1px solid var(--gc-cream-200);
  border-radius: 14px;
  box-shadow: var(--gc-shadow);
}
.leaflet-popup-tip{
  background: var(--gc-cream-50);
  border: 1px solid var(--gc-cream-200);
}
.popup-title{
  margin:-6px -6px 8px -6px;
  padding:10px 12px;
  background: linear-gradient(0deg, var(--gc-green-700), var(--gc-green-500));
  color:#fff; font-weight:700; font-size:15px; border-radius:12px 12px 0 0;
}
.popup-body{ color: var(--gc-ink-600); font-size:14px; line-height:1.45; }
.popup-body a{ color: var(--gc-green-700); text-decoration: none; }
.popup-body a:hover{ text-decoration: underline; }

/* ==== Toggle Control (Labels) ==== */
.leaflet-bar.tooltip-toggle .toggle-btn{
  display: flex;
  padding:6px 10px;
  font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /*background: transparent;*/
    background-color: var(--color-accent-1) !important;
    opacity: 0.9!important;
  color: #eeeeee;
  border-radius: 8px;
  box-shadow: var(--gc-shadow);
  cursor: pointer;
  width: fit-content;
  justify-content: center;
  align-items: center;
}
.leaflet-bar.tooltip-toggle .toggle-btn:hover{
  background: var(--gc-cream-50);
}
.leaflet-bar.tooltip-toggle .toggle-btn.off{
  opacity:.6;
  background: #fff;
}

/* Zoom səviyyəsində tooltip ölçüsünü bir az adaptiv etmək (opsional) */
@media (min-width: 1024px){
  .place-tooltip{ font-size: 13px; padding: 7px 10px; }
}

/* Image layer-i GPU-ya “itiraf et” ki, transform animasiyası səlis olsun */
.leaflet-zoom-animated .gc-image,
.leaflet-zoom-animated img.leaflet-image-layer {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Ümumi pan/zoom üçün pane-lərə də hint verə bilərsən */
.leaflet-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane {
  will-change: transform;
}

/* (Opsional) Şəkil kəskinliyi: piksel artanda “blok” görüntünü azaldır */
.gc-image,
.leaflet-image-layer {
  image-rendering: auto; /* istersen: -webkit-optimize-contrast; */
}