.thw-map-root{
      --visited:#E83459;
      --planned:#17919C;
      --unplanned:#111111;
      --bg:#0b0f14;
      --card:#0f1720;
      --text:#e9f0f6;
      --muted:#aab6c2;
      --shadow: 0 16px 50px rgba(0,0,0,.35);
      --radius: 18px;
    }

    .thw-map-wrap, .thw-map-wrap *, .thw-city-modal, .thw-city-modal * { box-sizing: border-box; }
    .thw-map-wrap, .thw-city-modal { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

    /* Elementor için: harita alanı */
    .thw-map-wrap{
      position: relative;
      width: 100%;
      height: 93vh;
      min-height: 650px;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden;
    }

    .thw-map{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .leaflet-container{ border-radius: 12px; }
    .leaflet-popup-content-wrapper { border-radius: 8px; }

    /* Marker animasyonu */
    @keyframes markerBounce {
      0%   { opacity: 0; transform: translateY(-30px) scale(0.25); filter: blur(1px); }
      55%  { opacity: 1; transform: translateY(10px) scale(1.08); filter: blur(0); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .custom-marker { background: transparent; border: none; }

    .custom-marker .marker-img {
      width: 32px;
      height: 32px;
      display: block;
      opacity: 0;
      transform: translateY(-30px) scale(0.25);
      animation: markerBounce 0.6s ease-out forwards;
      will-change: transform, opacity;
      pointer-events: none;
    }

    /* Tooltip */
    .leaflet-tooltip{
      font-size: 13px;
      padding: 6px 8px;
      border-radius: 10px;
      box-shadow: 0 8px 25px rgba(0,0,0,.25);
    }

    /* =========================
       ✅ Legend (Bilgi Notu)
       ========================= */
    .legend{
      position: absolute;
      right: 14px;
      bottom: auto;
      top: 14px;
      left: auto;
      z-index: 99999;
      width: min(360px, calc(100% - 28px));
      border-radius: 16px;
      background: rgba(15,23,32,.84);
      color: var(--text);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
    }

    .legend__head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .legend__title{
      font-weight: 700;
      letter-spacing: .2px;
      font-size: 14px;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .legend__badge{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--planned), var(--visited));
      box-shadow: 0 0 0 4px rgba(23,145,156,.15);
    }

    .legend__toggle{
      border: 0;
      background: rgba(255,255,255,.08);
      color: var(--text);
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 12px;
      cursor: pointer;
    }

    .legend__body{
      padding: 12px 14px 14px 14px;
      display: grid;
      gap: 10px;
    }

    .legend__row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }

    .legend__left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 0;
    }

    .legend__dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    .legend__label{
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .legend__desc{
      font-size: 12px;
      color: var(--muted);
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 220px;
    }

    .legend__icon{
      width: 26px;
      height: 26px;
      display:block;
      filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
    }

    .legend.is-collapsed .legend__body{
      display:none;
    }

    /* ✅ SAĞ SÜTUN: “Gidilmiş” satırındaki bilgilendirme yazısı */
    .legend__right{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 0;
    }

    .legend__hint{
      font-size: 11px;
      line-height: 1.2;
      color: rgba(233,240,246,.78);
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      padding-left: 10px;
    }

    @media (max-width: 600px){
      .legend{
        top: 10px;
        left: 10px;
        width: min(340px, calc(100% - 20px));
      }

      .legend__desc{ max-width: 170px; }
      .legend__hint{ max-width: 160px; }
    }

    /* =========================
       ✅ Modern Modal
       ========================= */
    .modal {
      display: none;
      position: fixed;
      z-index: 100000000;
      inset: 0;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(8px);
      animation: fadeIn 0.22s ease-out;
    }

    .modal-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(1100px, calc(100% - 24px));
      max-height: min(96vh, 1200px);
      background: #0d141c;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
    }

    .modal-header {
      padding: 16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      background: linear-gradient(135deg, rgba(23,145,156,.35), rgba(232,52,89,.18));
      border-bottom: 1px solid rgba(255,255,255,.10);
      flex-shrink: 0;
    }

    .modal-titlewrap{
      display:flex;
      flex-direction:column;
      gap: 4px;
      min-width:0;
      flex: 1;
    }

    .modal-header h2 {
      margin: 0;
      color: var(--text);
      font-size: clamp(18px, 2.2vw, 24px);
      letter-spacing: .2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100% - 60px);
    }

    .modal-subtitle{
      font-size: 12px;
      color: rgba(233,240,246,.78);
    }

    .close-btn{
      border: 0;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      cursor: pointer;
      background: rgba(255,255,255,.10);
      color: var(--text);
      display:grid;
      place-items:center;
      transition: transform .15s ease, background .15s ease;
    }

    .close-btn:hover{
      background: rgba(255,255,255,.16);
      transform: scale(1.03);
    }

    .close-btn:active{
      transform: scale(.98);
    }

    .modal-body {
      flex: 1;
      background: #000;
      position: relative;
      overflow: hidden;
    }

    /* =========================
       ✅ Slider (FIX: foto TAMAMI görünsün)
       ========================= */
    .image-slider-container{
      position: relative;
      width: 100%;
      height: 800px;
      max-height: calc(96vh - 100px);
      overflow: hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .image-slider{
      display:flex;
      height: 100%;
      width: 100%;
      transition: transform .25s ease;
      will-change: transform;
    }

    .slider-slide{
      flex: 0 0 100%;
      height: 100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background: #000;
    }

    /* Tema/Elementor img kuralları ezmesin diye modal içinde netliyoruz */
    .thw-city-modal .slider-slide img.slider-image{
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      display:block;
    }

    .slider-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      cursor: pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.10);
      color: var(--text);
      z-index: 10;
      transition: transform .15s ease, background .15s ease;
      backdrop-filter: blur(8px);
    }

    .slider-nav:hover{
      background: rgba(255,255,255,.16);
      transform: translateY(-50%) scale(1.05);
    }

    .slider-nav.prev { left: 12px; }
    .slider-nav.next { right: 12px; }

    .slider-nav span{
      font-size: 22px;
      line-height: 1;
    }

    .slider-dots {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display:flex;
      gap: 8px;
      z-index: 10;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.10);
    }

    .slider-dot{
      width: 10px;
      height: 10px;
      border-radius: 99px;
      border: 0;
      cursor: pointer;
      background: rgba(255,255,255,.45);
      transition: width .18s ease, background .18s ease;
    }

    .slider-dot.active{
      width: 28px;
      background: rgba(23,145,156, 1);
    }

    .slider-counter{
      position:absolute;
      top: 12px;
      right: 12px;
      z-index: 10;
      font-size: 12px;
      color: rgba(233,240,246,.92);
      background: rgba(0,0,0,.38);
      border: 1px solid rgba(255,255,255,.10);
      padding: 7px 10px;
      border-radius: 999px;
      backdrop-filter: blur(8px);
    }

    /* Mobilde bottom sheet */
    @media (max-width: 768px){
      .modal-content{
        left: 0;
        bottom: 0;
        top: auto;
        transform: none;
        width: 100%;
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
        margin: 0;
      }

      .modal-header {
        padding: 14px 16px;
        gap: 10px;
      }

        .modal-header h2 {
          font-size: 18px;
          max-width: 100%;
        }

      .modal-subtitle {
        font-size: 11px;
      }

      .close-btn {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        flex-shrink: 0;
      }

      .image-slider-container {
        height: auto;
        min-height: 300px;
        max-height: calc(95vh - 80px);
        flex: 1;
      }

      .slider-nav {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 18px;
      }

      .slider-nav.prev { left: 8px; }
      .slider-nav.next { right: 8px; }

      .slider-dots {
        bottom: 8px;
        padding: 6px 8px;
        gap: 6px;
      }

      .slider-dot {
        width: 8px;
        height: 8px;
      }

      .slider-dot.active {
        width: 24px;
      }

      .slider-counter {
        top: 8px;
        right: 8px;
        font-size: 11px;
        padding: 6px 8px;
      }
    }

    @media (max-width: 480px) {
      .modal-content {
        max-height: 98vh;
        border-radius: 16px 16px 0 0;
      }

      .modal-header {
        padding: 12px 14px;
      }

      .modal-header h2 {
        font-size: 16px;
      }

      .image-slider-container {
        max-height: calc(98vh - 70px);
        min-height: 250px;
      }

      .slider-nav {
        width: 36px;
        height: 36px;
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }