/* Genel yerleşim */
.ist-wrap{padding:0 16px}

/* Harita kutusu – arka plan/çerçeve yok, taşma yok */
.ist-mapbox{position:relative;margin-bottom:42px;overflow:visible}
#istanbul-svg{width:100%;height:auto;display:block;margin-left: -80px;}

/* İlçeler ve kenarlıklar */
.ist-ilce{fill:#f3f4f6;stroke:#000;stroke-width:1.3;cursor:pointer;transition:fill .15s, stroke-width .15s}
.ist-ilce--avrupa{fill:#fff7db}
.ist-ilce--anadolu{fill:#e9ffef}
.ist-ilce:hover{fill:#dbeafe}
.ist-ilce--active{stroke:#000;stroke-width:2.2}

/* İlçe etiketleri: küçük, okunaklı, taşma minimum */
.ist-label{
  font: 8px/1.05 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  fill:#fff;          /* beyaz kontur */
  stroke-width:2.2px;
  paint-order: stroke fill;
  pointer-events:none;
  user-select:none;
}

/* Tooltip – kart görünümü */
.ist-tip{
  position:absolute; display:none; z-index:20;
  padding:0; background:#fff; border:1px solid #e5e7eb;
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.10);
  min-width:260px; max-width:380px; overflow:hidden;
}

/* ok */
.ist-tip:after{
  content:""; position:absolute; bottom:-7px; left:18px;
  width:12px; height:12px; background:#fff;
  border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
  transform:rotate(45deg);
}

/* başlık */
.tip-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-bottom:1px solid #eef2f7;
}
.tip-district{font-weight:700; font-size:14px; color:#111827}
.tip-badge{
  font-size:11px; padding:3px 8px; border-radius:999px; white-space:nowrap;
  border:1px solid transparent;
}
/* yakaya göre rozet rengi */
.side--avrupa .tip-badge{ background:#FFF7DB; color:#92400e; border-color:#fde68a }
.side--anadolu .tip-badge{ background:#E9FFEF; color:#166534; border-color:#86efac }

/* içerik */
.tip-body{ padding:10px 12px }
.tip-count{ font-size:12px; color:#6b7280; margin-bottom:6px }
.tip-empty{ font-size:12px; color:#6b7280 }

/* isim listesi */
.tip-list{ margin:0; padding:0; list-style:none; max-height:180px; overflow:auto }
.tip-list li{
  display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.35;
  padding:4px 0;
}
.tip-dot{ width:6px; height:6px; border-radius:50%; background:#9ca3af; flex:0 0 6px }
.tip-name{ color:#111827 }
.tip-list li.more{ color:#6b7280; font-style:italic }

.pill{margin-left:8px;font-size:11px;border:1px solid #c7d2fe;background:#eef2ff;border-radius:999px;padding:2px 6px}

/* Alt panel */
.ist-panel{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-top:4px; margin: auto; max-width: 1100px;}
@media (max-width: 980px){ .ist-panel{grid-template-columns:1fr} #istanbul-svg{margin-left:0;} }
.ist-panel-left,.ist-panel-right{
  background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:14px
}
.ist-empty{color:#6b7280}
.panel-title{font-weight:700;margin-bottom:10px}

/* Form/select */
.ist-form-label{display:block;margin:4px 0 8px;font-weight:600}
.ist-select{position:relative}
.ist-select select{
  -webkit-appearance:none;appearance:none;width:100%;
  padding:10px 40px 10px 12px;border:1px solid #e5e7eb;border-radius:12px;
  background:#fff;font:14px/1.4 inherit;color:#111;outline:0
}
.ist-select select:focus{border-color:#cbd5e1;box-shadow:0 0 0 4px rgba(59,130,246,.08)}
.ist-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#475569;pointer-events:none}
.ist-counter{margin-top:8px;color:#6b7280;font-size:12px}

/* Modal */
.ist-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(17,24,39,.55);z-index:50}
.ist-modal.is-open{display:flex}
.ist-modal__dialog{background:#fff;border-radius:16px;max-width:720px;width:calc(100% - 32px);max-height:80vh;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.25);animation:pop .15s ease}
@keyframes pop{from{transform:scale(.98);opacity:.6}to{transform:scale(1);opacity:1}}
.ist-modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f1f5f9}
.ist-modal__title{margin:0;font-size:18px;font-weight:700}
.ist-modal__close{border:0;background:#f1f5f9;width:36px;height:36px;border-radius:999px;cursor:pointer}
.ist-modal__body{padding:14px 18px}
.dealer{border:1px solid #eef2f7;border-radius:12px;padding:10px 12px;margin:10px 0}
.dealer strong{display:block;margin-bottom:4px}
.mt10{margin-top:10px}