:root{
  --purple:#6f42f5;
  --purple-dark:#5728d7;
  --purple-hover:#7f55f7;
  --light:#ece8f6;
  --light-hover:#ddd5f3;
  --ink:#171721;
  --muted:#888397;
  --line:#ece8f3;
  --bg:#fbfaff;
}
*{box-sizing:border-box}

.inci-kargo-page{
  padding:28px 0 48px;
  background:
    radial-gradient(circle at 12% 10%,rgba(111,66,245,.07),transparent 30rem),
    radial-gradient(circle at 90% 18%,rgba(148,112,255,.07),transparent 32rem),
    #fbfaff;
}

.inci-kargo-page .map-card{
  margin:0 auto;
}

.map-card{
  width:min(1320px,100%);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(111,66,245,.10);
  border-radius:30px;
  box-shadow:0 28px 90px rgba(53,34,111,.13);
  overflow:hidden;
}

.map-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding:23px 28px;
  border-bottom:1px solid var(--line);
}

.head-copy{display:flex;gap:13px;align-items:center}
.head-icon{
  width:47px;height:47px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,#f5f1ff,#ebe4ff);color:var(--purple);
  border:1px solid rgba(111,66,245,.10)
}
.head-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map-head h1{font-size:20px;letter-spacing:-.03em;margin:0 0 4px}
.map-head p{font-size:11px;color:var(--muted);margin:0;line-height:1.5}

.legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.legend-item{display:flex;align-items:center;gap:7px;font-size:10px;color:#7e798c;font-weight:700}
.swatch{width:13px;height:13px;border-radius:4px;border:1px solid rgba(89,61,180,.08)}
.swatch.dark{background:var(--purple)}
.swatch.light{background:var(--light)}

.instruction{
  margin:18px 26px 0;
  padding:12px 15px;
  display:flex;
  gap:10px;
  align-items:center;
  border-radius:14px;
  background:#f5f1ff;
  border:1px solid rgba(111,66,245,.09);
  color:#665d7d;
  font-size:11px;
}
.instruction b{color:var(--purple-dark)}
.instruction-icon{
  width:27px;height:27px;display:grid;place-items:center;border-radius:9px;
  background:#fff;color:var(--purple);box-shadow:0 5px 14px rgba(70,42,155,.07)
}

.map-stage{
  min-height:620px;
  padding:16px 22px 26px;
  position:relative;
  overflow:hidden;
}
.map-stage:before{
  content:"";position:absolute;inset:3% 2%;border-radius:30px;
  background:
    radial-gradient(circle at 50% 42%,rgba(111,66,245,.055),transparent 30rem),
    linear-gradient(180deg,#fff,#fcfbff);
}

.view{position:relative;z-index:2;min-height:570px;display:none}
.view.active{display:block}
#turkeyMap,#detailMap{
  width:100%;
  min-height:550px;
  display:grid;
  place-items:center;
  position:relative;
}
#turkeyMap svg,#detailMap svg{
  width:min(1220px,100%);
  height:auto;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 20px 28px rgba(85,54,160,.08));
}
#turkeyMap #kktc,#turkeyMap #guney-kibris{display:none!important}

#turkeyMap g[data-iladi]{cursor:pointer}
#turkeyMap g[data-iladi] path,
#turkeyMap g[data-iladi] polygon{
  fill:var(--light)!important;
  stroke:#fff!important;
  stroke-width:1.7px!important;
  vector-effect:non-scaling-stroke;
  transition:fill .15s ease,filter .15s ease,transform .15s ease;
}
#turkeyMap g[data-iladi].vale path,
#turkeyMap g[data-iladi].vale polygon{fill:var(--purple)!important}
#turkeyMap g[data-iladi]:hover path,
#turkeyMap g[data-iladi]:hover polygon{
  fill:var(--light-hover)!important;
  filter:drop-shadow(0 4px 6px rgba(90,59,170,.16))
}
#turkeyMap g[data-iladi].vale:hover path,
#turkeyMap g[data-iladi].vale:hover polygon{
  fill:var(--purple-hover)!important;
  filter:drop-shadow(0 5px 8px rgba(111,66,245,.27))
}

.province-label{
  pointer-events:none;
  text-anchor:middle;
  dominant-baseline:middle;
  font-family:Inter,Arial,sans-serif;
  font-weight:850;
  letter-spacing:-.02em;
  fill:#6d657d;
  paint-order:stroke;
  stroke:rgba(255,255,255,.70);
  stroke-width:1.8px;
  stroke-linejoin:round;
}
g.vale .province-label{fill:#fff;stroke:rgba(80,38,191,.28)}

.tooltip{
  position:fixed;z-index:100;opacity:0;pointer-events:none;
  transform:translate(-50%,calc(-100% - 13px));
  background:#181620;color:#fff;border-radius:11px;padding:9px 11px;
  box-shadow:0 14px 35px rgba(0,0,0,.18);white-space:nowrap;
}
.tooltip strong{display:block;font-size:11px}
.tooltip span{display:block;font-size:9px;color:#c9c5d3;margin-top:3px}
.tooltip.vale span{color:#c9b8ff}

.loading{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;color:#817b8e;font-size:11px
}
.loader-box{display:flex;align-items:center;gap:10px}
.spinner{width:24px;height:24px;border:2px solid #e9e4f4;border-top-color:var(--purple);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.detail-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 6px 8px;
}
.back{
  border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 13px;
  cursor:pointer;color:#625d70;font-size:11px;font-weight:800;
  display:flex;align-items:center;gap:7px
}
.back:hover{border-color:rgba(111,66,245,.24);color:var(--purple)}
.detail-title{text-align:right}
.detail-title small{display:block;color:#8c8797;text-transform:uppercase;letter-spacing:.09em;font-size:8px;font-weight:900}
.detail-title h2{margin:4px 0 0;font-size:20px;letter-spacing:-.03em}

.district-path{
  stroke:#fff;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  cursor:pointer;
  transition:fill .15s ease,filter .15s ease;
}
.district-path.no-vale{fill:var(--light)}
.district-path.vale{fill:var(--purple)}
.district-group:hover .district-path.no-vale{fill:var(--light-hover)}
.district-group:hover .district-path.vale{fill:var(--purple-hover);filter:drop-shadow(0 5px 7px rgba(111,66,245,.22))}
.district-label{
  pointer-events:none;
  text-anchor:middle;
  dominant-baseline:middle;
  font-family:Inter,Arial,sans-serif;
  font-size:12px;
  font-weight:850;
  fill:#61596f;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:3px;
  stroke-linejoin:round;
}
.district-group.vale .district-label{fill:#fff;stroke:rgba(80,38,191,.30)}
.district-group.active .district-path{filter:drop-shadow(0 7px 10px rgba(111,66,245,.30));stroke:#35168f;stroke-width:2.4}
.district-group.active .district-label{font-weight:950}

.detail-note{
  position:absolute;left:12px;bottom:7px;
  display:flex;align-items:center;gap:8px;color:#918b9d;font-size:9px
}
.detail-note i{width:8px;height:8px;border-radius:50%;background:var(--purple)}

.empty-state{display:none;text-align:center;color:#807b8c}
.empty-state b{display:block;font-size:18px;margin-bottom:5px;color:#393542}

@media(max-width:850px){
  .inci-kargo-page{padding:20px 0 40px;background:radial-gradient(circle at 12% 10%,rgba(111,66,245,.07),transparent 30rem),radial-gradient(circle at 90% 18%,rgba(148,112,255,.07),transparent 32rem),#fbfaff;}
  .map-card{border-radius:22px}
  .map-head{padding:16px;align-items:flex-start}
  .legend{gap:8px}
  .instruction{margin:12px 14px 0}
  .map-stage{min-height:480px;padding:8px 10px 20px}
  .view,#turkeyMap,#detailMap{min-height:450px}
  #turkeyMap{overflow:auto;justify-content:start}
  #turkeyMap svg{width:900px;max-width:none}
  #detailMap svg{width:900px;max-width:none}
}
@media(max-width:560px){
  .map-head{display:block}
  .legend{justify-content:flex-start;margin-top:13px}
  .map-head h1{font-size:17px}
  .map-head p{display:none}
  .instruction{font-size:10px;line-height:1.45}
  .map-stage{min-height:430px}
  .detail-top{padding:8px 2px}
  .detail-title h2{font-size:17px}
  #turkeyMap,#detailMap{min-height:400px;overflow:auto;justify-content:start}
  #turkeyMap svg,#detailMap svg{width:820px;max-width:none}
}



#detailMap{
  position:relative;
  min-height:560px;
  padding:8px 6px 26px;
}
#detailMap > svg{
  width:min(1240px,100%)!important;
  max-height:545px;
}
#detailLoading{
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.55));
  position:absolute;
  z-index:20;
  inset:auto 18px 14px auto;
  width:auto;
  height:auto;
  padding:9px 12px;
  border:1px solid #eee9f7;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(70,45,140,.08)
}
#detailLoading .loader-box{font-size:9px}
#detailLoading .spinner{width:16px;height:16px}




/* İstanbul küçük bir il alanı olduğu için tıklama alanını görünümü bozmadan büyütür. */
.istanbul-click-boost{
  fill:transparent !important;
  stroke:transparent !important;
  pointer-events:all !important;
  cursor:pointer !important;
}
#turkeyMap g[data-iladi] path{
  pointer-events:all;
}

/* Gerçek GeoJSON herhangi bir nedenle yüklenemezse uydurma şekil yerine
   kullanıcının verdiği gerçek harita referansı gösterilir. */
.real-map-fallback{
  width:min(1080px,94%);
  min-height:480px;
  margin:auto;
  display:grid;
  place-items:center;
  position:relative;
}
.real-map-fallback img{
  display:block;
  max-width:100%;
  max-height:500px;
  object-fit:contain;
  border-radius:18px;
  filter:grayscale(.72) saturate(.45) brightness(1.08) contrast(.94);
  opacity:.94;
}
.real-map-fallback .fallback-badge{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:9px 13px;
  border-radius:999px;
  background:#efe9ff;
  color:#6337dd;
  border:1px solid rgba(111,66,245,.12);
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(67,40,145,.10);
}
@media(max-width:560px){
  .real-map-fallback{min-height:360px}
  .real-map-fallback img{max-height:330px}
  .real-map-fallback .fallback-badge{font-size:8px;bottom:8px}
}




/* V8: İstanbul ilçe etiketlerini gerçek kısa ilçe adlarıyla daha temiz göster. */
#detailMap .district-group .district-label{
  letter-spacing:-.035em;
}
#detailMap .district-group.vale .district-path{
  fill:#6f42f5 !important;
}
#detailMap .district-group.no-vale .district-path{
  fill:#ece8f5 !important;
}
#detailMap .district-group.vale:hover .district-path{
  fill:#8258fb !important;
}
#detailMap .district-group.no-vale:hover .district-path{
  fill:#ded7ed !important;
}
#detailMap .district-group.vale .district-label{
  fill:#fff !important;
  stroke:rgba(80,38,191,.28) !important;
}
#detailMap .district-group.no-vale .district-label{
  fill:#625b70 !important;
  stroke:#fff !important;
}




#detailMap[data-province="istanbul"] .district-group .district-path{
  fill:#6f42f5 !important;
}
#detailMap[data-province="istanbul"] .district-group .district-label{
  fill:#fff !important;
  stroke:rgba(80,38,191,.28) !important;
}




/* =========================================================
   V10 — AGGRESSIVE MOBILE RESPONSIVE
   Amaç:
   - 320px dahil küçük ekranlarda taşma yok
   - Harita yatay kaydırılmıyor, ekrana fit oluyor
   - Başlık / legend / bilgi alanları kompaktlaşıyor
   - Detay haritası mobilde maksimum kullanılabilir alanı kaplıyor
   - Dokunmatik hedefler büyüyor
   ========================================================= */

@media (max-width: 900px){

  .inci-kargo-page{padding:20px 0 40px;background:radial-gradient(circle at 12% 10%,rgba(111,66,245,.07),transparent 30rem),radial-gradient(circle at 90% 18%,rgba(148,112,255,.07),transparent 32rem),#fbfaff;}

  .map-card,
  .card{
    width:100%;
    max-width:none;
    min-height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }

  .map-head,
  .head{
    padding:14px 14px 12px;
    gap:10px;
    align-items:center;
  }

  .head-copy,
  .head-left,
  .title-wrap{
    min-width:0;
    gap:10px;
  }

  .head-icon,
  .title-icon,
  .icon{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:12px;
  }

  .map-head h1,
  .head h1{
    font-size:16px;
    margin-bottom:2px;
    line-height:1.15;
  }

  .map-head p,
  .head p{
    font-size:9px;
    line-height:1.35;
    max-width:220px;
  }

  .legend{
    gap:8px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .legend-item,
  .legend div{
    font-size:8px;
    gap:5px;
  }

  .swatch,
  .sw{
    width:10px;
    height:10px;
  }

  .instruction,
  .info{
    margin:10px 10px 0;
    padding:10px 11px;
    border-radius:12px;
    font-size:9px;
    line-height:1.45;
    align-items:flex-start;
  }

  .instruction-icon,
  .info i{
    width:22px;
    height:22px;
    min-width:22px;
    font-size:10px;
    border-radius:7px;
  }

  .map-stage,
  .stage{
    min-height:0;
    padding:8px 8px 12px;
    overflow:visible;
  }

  .view{
    min-height:0;
  }

  #turkeyView,
  #detailView{
    width:100%;
  }

  /* Türkiye ana haritası */
  #turkeyMap{
    width:100%;
    min-height:0;
    display:block;
    overflow:visible;
  }

  #turkeyMap svg{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    transform:none !important;
    display:block;
  }

  .province-label{
    font-size:4px !important;
    stroke-width:1.1px !important;
  }

  /* İstanbul/Kocaeli küçük olduğu için tıklama alanını mobilde daha da büyüt */
  .istanbul-click-boost{
    pointer-events:all !important;
  }

  /* Detay başlığı */
  .detail-top,
  .detail-head{
    padding:8px 2px 6px;
    align-items:center;
    gap:8px;
  }

  .back{
    min-height:40px;
    padding:9px 10px;
    font-size:9px;
    border-radius:10px;
    flex:0 0 auto;
  }

  .detail-title,
  .detail-copy{
    min-width:0;
    text-align:right;
  }

  .detail-title small,
  .detail-copy small{
    font-size:7px;
  }

  .detail-title h2,
  .detail-copy h2{
    font-size:15px;
    line-height:1.15;
    margin-top:3px;
  }

  #detailSubtitle,
  .detail-title p,
  .detail-copy p{
    font-size:8px !important;
    line-height:1.3;
  }

  /* Kritik: detay haritası hiçbir zaman 900px yapılmayacak */
  #detailMap{
    width:100%;
    min-height:0 !important;
    padding:4px 0 30px !important;
    overflow:visible !important;
    display:block;
  }

  #detailMap > svg,
  #detailMap svg{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
    display:block;
    overflow:visible;
  }

  /* İstanbul Anadolu tarafında isimler okunaklı ama taşmayacak */
  #detailMap .district-label{
    font-size:5.2px !important;
    stroke-width:1.5px !important;
    letter-spacing:-0.05em !important;
  }

  #detailMap .district-path{
    stroke-width:1.35px !important;
  }

  /* Mobilde tooltip yerine hafif dokunma hissi; hover görseli yine çalışır */
  .tooltip{
    max-width:78vw;
    white-space:normal;
    text-align:center;
    font-size:9px;
  }

  .tooltip strong{
    font-size:10px;
  }

  .tooltip span{
    font-size:8px;
  }

  .detail-note,
  .map-note,
  .note{
    position:static !important;
    margin:8px 4px 0 !important;
    font-size:8px !important;
    line-height:1.35;
    flex-wrap:wrap;
  }

  /* loading alanı ekranı kaplamasın */
  #detailLoading{
    inset:auto 8px 8px auto !important;
    padding:7px 9px !important;
  }

  #detailLoading .loader-box{
    font-size:8px !important;
  }

  /* Eğer gerçek görsel fallback açılırsa */
  .real-map-fallback{
    width:100%;
    min-height:0;
    padding:0;
  }

  .real-map-fallback img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
  }

  .real-map-fallback .fallback-badge{
    position:static;
    transform:none;
    display:inline-block;
    margin-top:8px;
    font-size:8px;
  }
}

/* Telefon optimizasyonu */
@media (max-width: 600px){

  .map-head,
  .head{
    display:grid;
    grid-template-columns:1fr auto;
    padding:12px 10px 10px;
  }

  .head-copy,
  .head-left,
  .title-wrap{
    gap:8px;
  }

  .head-icon,
  .title-icon,
  .icon{
    width:36px;
    height:36px;
    min-width:36px;
  }

  .map-head h1,
  .head h1{
    font-size:14px;
  }

  .map-head p,
  .head p{
    display:none;
  }

  .legend{
    max-width:90px;
    justify-content:flex-end;
    gap:4px 6px;
  }

  .legend-item,
  .legend div{
    font-size:7px;
  }

  .instruction,
  .info{
    margin:8px 8px 0;
    padding:9px;
    font-size:8.5px;
    border-radius:10px;
  }

  .map-stage,
  .stage{
    padding:6px 5px 10px;
  }

  .detail-top,
  .detail-head{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    padding:7px 2px 5px;
  }

  .back{
    min-height:38px;
    padding:8px 9px;
    font-size:8.5px;
  }

  .detail-title h2,
  .detail-copy h2{
    font-size:13.5px;
  }

  #detailSubtitle{
    font-size:7.5px !important;
  }

  #detailMap .district-label{
    font-size:4.7px !important;
    stroke-width:1.25px !important;
  }

  #detailMap .district-path{
    stroke-width:1.1px !important;
  }

  .detail-note,
  .map-note,
  .note{
    font-size:7.5px !important;
    margin-top:6px !important;
  }
}

/* Çok küçük telefonlar: 320–390px */
@media (max-width: 390px){

  .map-head,
  .head{
    grid-template-columns:1fr;
    gap:7px;
  }

  .legend{
    max-width:none;
    justify-content:flex-start;
  }

  .instruction,
  .info{
    font-size:8px;
    line-height:1.35;
  }

  .detail-top,
  .detail-head{
    grid-template-columns:1fr;
    gap:6px;
  }

  .back{
    width:max-content;
    min-height:36px;
  }

  .detail-title,
  .detail-copy{
    text-align:left;
  }

  .detail-title h2,
  .detail-copy h2{
    font-size:13px;
  }

  #detailMap .district-label{
    font-size:4.15px !important;
    stroke-width:1px !important;
  }

  #detailMap .district-path{
    stroke-width:.95px !important;
  }
}

/* Landscape telefon */
@media (max-height: 520px) and (orientation: landscape){

  .inci-kargo-page{padding:20px 0 40px;background:radial-gradient(circle at 12% 10%,rgba(111,66,245,.07),transparent 30rem),radial-gradient(circle at 90% 18%,rgba(148,112,255,.07),transparent 32rem),#fbfaff;}

  .map-head,
  .head{
    padding:8px 10px;
  }

  .instruction,
  .info{
    margin-top:6px;
    padding:7px 9px;
  }

  .map-stage,
  .stage{
    padding-top:4px;
  }

  .detail-top,
  .detail-head{
    padding-top:3px;
  }

  #detailMap > svg,
  #detailMap svg{
    max-height:62vh !important;
    width:auto !important;
    max-width:100% !important;
    margin:auto;
  }

  #turkeyMap svg{
    max-height:68vh !important;
    width:auto !important;
    max-width:100% !important;
    margin:auto;
  }
}

/* Dokunmatik cihazlarda hover kaynaklı yanlış davranışları azalt */
@media (hover:none) and (pointer:coarse){
  .district-group:hover .district-path,
  #turkeyMap g[data-iladi]:hover path{
    filter:none !important;
  }

  .back,
  .province,
  #turkeyMap g[data-iladi],
  .district-group{
    -webkit-tap-highlight-color:transparent;
  }

  .back{
    touch-action:manipulation;
  }
}