/* 
 * MapboxGL Erişilebilirlik Düzeltmeleri
 * Bu CSS, MapboxGL popuplarında oluşan ARIA erişilebilirlik hatalarını gidermek için kullanılır
 */

/* 
 * Popup kapatma düğmesini erişilebilirlik için düzenle
 * Problem: "Blocked aria-hidden on an element because its descendant retained focus" hatası
 */
.mapboxgl-popup-close-button {
  /* aria-hidden="true" özelliği olan butonun odaklanabilir olma özelliğini kaldır */
  pointer-events: auto; /* Tıklanabilir kalması için */
  cursor: pointer;      /* Tıklanabilir görünmesi için */
  
  /* Klavye erişilebilirliği için tabindex'i -1 yaparak odaklanmayı engelliyoruz */
  /* Bu JavaScript ile eklenecek, ama CSS'te hatırlatalım */
}

/* Özel popuplar için stil tanımlamaları */
.custom-popup .mapboxgl-popup-content {
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.2), 0 2px 8px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.98);
}

/* Popup oku (tip) için stil */
.custom-popup .mapboxgl-popup-tip {
  border-top-color: rgba(255, 255, 255, 0.98);
  border-width: 12px; /* Oku biraz daha belirgin yap */
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.05));
}

/* Popup'ın özel kapatma butonu için stil */
.custom-popup .mapboxgl-popup-close-button {
  font-size: 1.25rem;
  padding: 0.25rem;
  right: 0.25rem;
  top: 0.25rem;
  color: #6b7280; /* text-gray-500 */
  border-radius: 0.25rem;
}

.custom-popup .mapboxgl-popup-close-button:hover {
  background-color: #f3f4f6; /* bg-gray-100 */
  color: #111827; /* text-gray-900 */
} 

/* Rota ok ikonu üzerindeki zaman tooltip'i için stiller */
.arrow-time-tooltip {
  pointer-events: none;
  z-index: 1000;
}

.arrow-time-tooltip .mapboxgl-popup-content {
  background-color: white;
  color: #333;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
}