/* Referans ortaklarının küresel dağılımını gösteren dünya haritası.
   index.html (#referanslarimiz altı) ve referanslar.html (carousel altı) tarafından paylaşılır.
   Önemli: eski sitede bu bileşenin ışık modu CSS'i ölü class isimlerini hedeflediği için hiç
   çalışmıyordu (bkz. DESIGN.md). Burada tek, canlı class seti kullanılıyor ve hem
   :root[data-theme="dark"] hem de light (varsayılan) için ayrı ayrı gerçek değerler tanımlanıyor. */

.world-map-section { margin-top: var(--space-8); }

.world-map-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  min-height: 360px;
  background:
    radial-gradient(circle at 32% 15%, rgba(254, 192, 26, .10), transparent 32%),
    radial-gradient(circle at 78% 60%, rgba(255, 122, 69, .10), transparent 36%),
    var(--color-surface-alt);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.world-map-header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6) var(--space-6) 0;
}
.world-map-header h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--color-ink);
}
.world-map-header p { margin: var(--space-2) 0 0; max-width: 56ch; color: var(--color-ink-soft); line-height: 1.6; }
.world-map-canvas {
  position: relative;
  aspect-ratio: 1000 / 480;
  width: calc(100% - 24px);
  margin: var(--space-5) auto var(--space-6);
}
.world-map-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 22px rgba(0,0,0,.14)); }
.world-map-water { fill: rgba(36, 22, 6, .05); }
.world-map-grid { stroke: rgba(36, 22, 6, .05); stroke-width: 1; }
.world-map-land { fill: rgba(36, 22, 6, .14); stroke: rgba(36, 22, 6, .18); stroke-width: 1.1; stroke-linejoin: round; }

:root[data-theme="dark"] .world-map-water { fill: rgba(5, 14, 30, .55); }
:root[data-theme="dark"] .world-map-grid { stroke: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .world-map-land { fill: rgba(220, 232, 246, .16); stroke: rgba(255, 255, 255, .16); }

/* Nokta konumlandırma (marka + dekoratif) */
.world-map-point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  z-index: 4;
}

.world-map-decor-point { width: 8px; height: 8px; pointer-events: none; opacity: .5; }
.world-map-decor-point::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: var(--color-brand-orange);
  box-shadow: 0 0 10px rgba(252, 176, 63, .35);
}

.world-map-brand-point {
  width: 44px;
  height: 44px;
  margin: -13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.world-map-brand-point::before {
  content: "";
  position: absolute; inset: 17px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand-yellow), var(--color-brand-coral));
  box-shadow: 0 0 0 3px var(--color-surface-alt), 0 0 14px rgba(255, 122, 69, .55);
}
.world-map-brand-point::after {
  content: "";
  position: absolute; inset: 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 69, .45);
  box-shadow: 0 0 0 8px rgba(255, 122, 69, .08);
  animation: worldMapPulse 2.6s ease-out infinite;
}
.world-map-brand-point:hover,
.world-map-brand-point:focus-visible {
  z-index: 12;
  outline: none;
}
.world-map-brand-point:hover::before,
.world-map-brand-point:focus-visible::before {
  box-shadow: 0 0 0 3px var(--color-surface-alt), 0 0 20px rgba(255, 122, 69, .75);
}
.world-map-brand-point:focus-visible::before { outline: 2px solid var(--color-brand-coral); outline-offset: 3px; }

@keyframes worldMapPulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.world-map-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  min-width: 148px;
  max-width: 190px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  z-index: 30;
}
.world-map-tooltip::after {
  content: "";
  position: absolute; left: 50%; top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--color-surface);
}
.world-map-tooltip img { display: block; max-width: 130px; max-height: 54px; width: auto; height: auto; margin: 0 auto; object-fit: contain; }
.world-map-tip-name { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 13px; color: var(--color-ink); line-height: 1.25; }
.world-map-tip-country { display: block; margin-top: 2px; color: var(--color-brand-coral); font-size: 11px; font-weight: 800; letter-spacing: .03em; }

@media (max-width: 760px) {
  .world-map-header { flex-direction: column; }
  .world-map-canvas { overflow: visible; }
  .world-map-tooltip { min-width: 120px; max-width: 152px; padding: 9px; }
  .world-map-tooltip img { max-width: 100px; max-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .world-map-brand-point::after { animation: none; }
}