@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
#arac-kok{
* { box-sizing: border-box; margin: 0; padding: 0; }
& {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
      padding: 16px;
    }
#map {
      height: 600px;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 10px;
      overflow: hidden;
    }
.info-box {
      padding: 10px 14px;
      background: rgba(255,255,255,0.95);
      border-radius: 8px;
      border: 1px solid #ddd;
      font-size: 13px;
      line-height: 1.7;
      min-width: 180px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
.info-box h4 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #111;
    }
.info-box .hint {
      font-size: 11px;
      color: #999;
      margin-top: 4px;
    }
.legend {
      background: rgba(255,255,255,0.95);
      border-radius: 8px;
      border: 1px solid #ddd;
      padding: 10px 14px;
      font-size: 12px;
      line-height: 1.9;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
.legend-title {
      font-weight: 700;
      font-size: 12px;
      margin-bottom: 4px;
      color: #111;
    }
.legend i {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 2px;
      margin-right: 6px;
      vertical-align: middle;
      border: 1px solid rgba(0,0,0,0.1);
    }
.back-btn {
      background: white;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 7px 12px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #333;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
.back-btn:hover { background: #f4f4f4; }
#loading-bar {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 3px;
      background: #3a86ff;
      z-index: 9999;
      animation: pulse 1.2s ease-in-out infinite;
    }
.city-popup { font-size: 13px; line-height: 1.6; }
.city-popup strong { font-size: 14px; display: block; margin-bottom: 2px; }
}