/* ===========================
    İSTANBUL SVG HARİTASI
=========================== */

.map-svg-holder{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.map-svg-holder svg{
    width: 100%;
    height: auto;
    display: block;
    background: #1a1a1a;
    border-radius: 18px;
}

/* Tüm ilçeler için taban görünüm */
.map-svg-holder svg g#features path{
    fill: #3a3a3a;
    stroke: #1a1a1a;
    stroke-width: 1px;
    transition: fill .25s ease, transform .25s ease, filter .25s ease;
}

/* Hizmet vermediğimiz bölgeler: tıklanamaz, sade */
.map-svg-holder svg g#features > g{
    pointer-events: none;
    cursor: default;
}
.map-svg-holder svg g#features > g:hover{
    opacity: 1;
}

/* Hizmet verdiğimiz gerçek ilçeler */
.map-svg-holder svg g#features > g.serviceable{
    pointer-events: auto;
    cursor: pointer;
}
.map-svg-holder svg g#features > g.serviceable path{
    fill: #b5791f;
    transform-box: fill-box;
    transform-origin: center;
}
.map-svg-holder svg g#features > g.serviceable:hover path{
    fill: #f2b705;
    transform: translateY(-1.5px);
}
.map-svg-holder svg g#features > g.serviceable.active path{
    fill: #f2b705;
    transform: translateY(-3px) scale(1.015);
    filter: drop-shadow(0 3px 6px rgba(242,183,5,.5));
}

/* Aradaki ilçeler: sadece görsel doluluk için, tıklanamaz,
   hizmet bölgelerinden ayırt edilecek nötr bir tonda */
.map-svg-holder svg g#features > g.context path{
    fill: #5c5d52;
}

/* Kaynarca / Kurtköy: Pendik ilçesine bağlı mahalleler, harita bu ayrımı
   çizmediği için ayrı pin (nokta) olarak Pendik alanının üzerine ekleniyor */
.map-svg-holder svg .pin{
    fill: #f2b705;
    stroke: #1a1a1a;
    stroke-width: 1px;
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .25s ease, filter .25s ease;
}
.map-svg-holder svg .pin:hover{
    transform: scale(1.25);
}
.map-svg-holder svg .pin.active{
    transform: scale(1.4);
    filter: drop-shadow(0 3px 6px rgba(242,183,5,.6));
}

/* İlçe / mahalle isim etiketleri */
.map-svg-holder svg .district-label{
    font-family: "Inter", sans-serif;
    font-size: 3.6px;
    font-weight: 600;
    fill: #ffffff;
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 0.6px;
    stroke-opacity: .35;
}
.map-svg-holder svg .pin-label{
    font-family: "Inter", sans-serif;
    font-size: 3.2px;
    font-weight: 600;
    fill: #f2b705;
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 0.6px;
    stroke-opacity: .5;
}

/* ---------- FİYAT KARTI ---------- */
.district-info{
    margin-top:25px;
    background:#1d1d1d;
    border-radius:16px;
    padding:22px 26px;
    border-left:4px solid #f2b705;

    position: relative;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;

    opacity: 0;
    transform: translateY(10px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: opacity .3s ease, transform .3s ease, max-height .3s ease, padding .3s ease;
}

.district-info.visible{
    opacity: 1;
    transform: translateY(0);
    max-height: 260px;
    padding-top: 22px;
    padding-bottom: 22px;
    margin-top: 25px;
}

.district-info h3{
    color: #f2b705;
    margin-bottom: 12px;
}

.district-info p{
    color: #d4d4d4;
    margin-bottom: 6px;
}

.close-info{
    position: absolute;
    top: 14px;
    right: 18px;
    color: #888;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}
.close-info:hover{
    color: #f2b705;
}