/* ==========================================================
   NAKLİYAT İL HARİTASI - STİL DOSYASI
   ========================================================== */

#nf-il-harita-wrap {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
#nf-il-harita-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Kıbrıs bu modülde kullanılmıyor, gizle */
#nf-il-harita-wrap #kibris {
  display: none;
}

/* Normal durum: il içi lacivert, iller arası çerçeve altın */
#nf-il-harita-wrap svg path {
  fill: #09182f;
  stroke: #bb8638;
  stroke-width: 0.6;
  transition: fill .15s ease, stroke .15s ease;
}

/* Notu OLAN iller: tıklanabilir */
#nf-il-harita-wrap svg g.nf-il-aktif path {
  cursor: pointer;
}
/* Notu OLMAYAN iller: tıklanamaz, imleç normal */
#nf-il-harita-wrap svg g.nf-il-pasif path {
  cursor: default;
}

/* Üzerine gelince (hover): arkaplan altın, çerçeve koyu lacivert */
#nf-il-harita-wrap svg g.nf-il-hover path {
  fill: #bb8638;
  stroke: #0a1930;
  stroke-width: 0.9;
}

/* İl isimleri - haritanın üzerine JS ile yerleştirilen yazılar */
#nf-il-harita-wrap svg text.nf-il-yazi {
  fill: #ffffff;
  font-size: 7px;
  font-family: Arial, sans-serif;
  text-anchor: middle;
  pointer-events: none;
  transition: fill .15s ease;
}
#nf-il-harita-wrap svg g.nf-il-hover text.nf-il-yazi {
  fill: #000000;
  font-weight: 700;
}

/* Fare imlecini takip eden küçük il adı etiketi (opsiyonel, ekstra okunabilirlik için) */
#nf-il-tooltip {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  background: #09182f;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  display: none;
}
#nf-il-tooltip.nf-goster {
  display: block;
}

/* ---- Popup (not gösterimi) ---- */
.nf-il-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 24, 47, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: nf-fade-in .18s ease;
}
.nf-il-popup-box {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(9,24,47,.35);
  animation: nf-pop-in .2s cubic-bezier(.2,.9,.3,1.2);
}

/* Üst çerçeve: başlık + kapatma butonu bu şeritte, köşede kalmaz */
.nf-il-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #ececec;
  flex-shrink: 0;
}
.nf-il-popup-box h3 {
  margin: 0;
  color: #09182f;
  font-size: 17px;
  font-weight: 700;
}

/* Metin alanı: kaydırma çubuğu görsel olarak gizli, gerekirse kaydırma çalışmaya devam eder */
.nf-il-popup-body {
  padding: 18px 20px;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.nf-il-popup-body::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}
.nf-il-popup-box p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.7;
  font-size: 14.5px;
  color: #2b2b2b;
}

/* Popup içi resim grid'i: kaç resim varsa ona göre sütun sayısı (1/2/3),
   4-6 resimde 3 sütun otomatik ikinci satıra sarar. Hepsi kare, aynı boyut kutu. */
.nf-il-popup-resimler {
  --nf-yol-sutun: 3;
  display: grid;
  grid-template-columns: repeat(var(--nf-yol-sutun), 1fr);
  gap: 8px;
  margin-top: 14px;
}
.nf-il-popup-resim-kutu {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  background: #f2f2f2;
}
.nf-il-popup-resim-kutu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.nf-il-popup-resim-kutu:hover img {
  transform: scale(1.06);
}

/* Alt boşluk: içerik tam köşede bitmesin diye ince bir taban payı */
.nf-il-popup-body {
  padding-bottom: 22px;
}

/* Kapatma çarpısı: siyah daire, beyaz ikon, üzerine gelince kırmızı */
.nf-il-popup-close {
  position: static;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .1s ease;
}
.nf-il-popup-close:hover {
  background: #d32f2f;
}
.nf-il-popup-close:active {
  transform: scale(.92);
}

@keyframes nf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nf-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Yol Güzergahı: turkuaz, yanıp sönen (glow) çizgi ---- */
.nf-yol-katman {
  pointer-events: none;
}
#nf-il-harita-wrap svg .nf-yol-cizgisi {
  fill: none;
  stroke: #33f5e6;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#nf-yol-glow-filtresi);
  animation: nf-yol-parla 1.7s ease-in-out infinite alternate;
}
@keyframes nf-yol-parla {
  from {
    opacity: 0.45;
    stroke-width: 2;
  }
  to {
    opacity: 1;
    stroke-width: 3.4;
  }
}

/* ---- Yol Güzergahı: haritanın altındaki kamyon şeritleri ---- */
#nf-yol-seritleri {
  max-width: 900px;
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nf-yol-serit-baslik {
  font-size: 13px;
  font-weight: 700;
  color: #09182f;
  margin-bottom: 6px;
}
.nf-yol-serit-cubugu {
  position: relative;
  height: 22px;
  border-radius: 11px;
  background: repeating-linear-gradient(
    to right,
    #e3e3e3 0px,
    #e3e3e3 14px,
    #cfcfcf 14px,
    #cfcfcf 22px
  );
  border: 1px solid #bbb;
  overflow: hidden;
}
.nf-yol-kamyon {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 34px;
  height: 17px;
  transform: translateY(-50%);
  animation-name: nf-kamyon-hareket;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}
@keyframes nf-kamyon-hareket {
  0%   { left: 3px;                      transform: translateY(-50%) scaleX(1); }
  48%  { left: calc(100% - 37px);        transform: translateY(-50%) scaleX(1); }
  50%  { left: calc(100% - 37px);        transform: translateY(-50%) scaleX(-1); }
  98%  { left: 3px;                      transform: translateY(-50%) scaleX(-1); }
  100% { left: 3px;                      transform: translateY(-50%) scaleX(1); }
}

/* Mobilde: ortada, okunaklı büyüklükte, çarpı her zaman görünür */
@media (max-width: 640px) {
  #nf-il-harita-wrap svg text.nf-il-yazi { font-size: 9px; }
  .nf-il-popup-overlay { padding: 16px; align-items: center; justify-content: center; }
  .nf-il-popup-box { max-height: min(85vh, 640px); border-radius: 14px; }
  .nf-il-popup-header { padding: 14px 16px; }
  .nf-il-popup-box h3 { font-size: 16px; }
  .nf-il-popup-body { padding: 14px 16px; padding-bottom: 20px; }
  .nf-il-popup-box p { font-size: 15px; line-height: 1.75; }
}