/* usttab resim (sabit banner) kaldirilip yerine breadcrumb_wrap
       eklendigi icin (kullanicinin istegi: "/Urunler sayfasında alabilirsin")
       eskiden banner'in altina bosluk birakan sabit margin-top ARTIK
       GEREKSIZ — .altsayfa/breadcrumb_wrap kendi paddingini zaten sagliyor. */

/* Hover'da beliren "mavi çizgiler", MarkerCluster.Default.css'in
   renklerinden DEGIL — Leaflet marker/cluster elementleri erisilebilirlik
   icin tabindex alip TARAYICININ VARSAYILAN mavi :focus/:hover anahat
   (outline) cizgisini gosteriyordu (kok sebep buydu, DevTools'ta computed
   stilde "outline" olarak gorunur). Kendi box-shadow/transform hover
   efektimiz zaten yeterli gorsel geri bildirim sagladigi icin native
   outline burada kapatilir. */
.satis-noktalari {
    /*    max-width: 1600px;*/
    width: 96%;
    margin: 0 auto
}

    .satis-noktalari .leaflet-marker-icon,
    .satis-noktalari .leaflet-interactive {
        outline: none;
    }

.leaflet-bottom.leaflet-right {
    display: none
}

.satis-noktalari .sn-wrapper {
    display: flex;
    align-items: stretch;
    gap: 24px;
    min-height: 620px;
}

.satis-noktalari .sn-sidebar {
    width: 340px;
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
}

.satis-noktalari .sn-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.satis-noktalari .sn-select,
.satis-noktalari .sn-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    font-size: 14px;
    color: #2b2e34;
    background: #fff;
    box-sizing: border-box;
}

    .satis-noktalari .sn-select:disabled {
        background: #f2f2f2;
        color: #999;
    }

.satis-noktalari .sn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 560px;
    border-top: 1px solid #eee;
}

.satis-noktalari .sn-list-item {
    padding: 12px 8px 12px 14px;
    border-bottom: 1px solid #eee;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-left-color .15s ease;
}

    .satis-noktalari .sn-list-item:hover {
        background: #fafafa;
    }

    /* Tiklanan bayi "aktif" kalir (satis-noktalari.js click handler'i
       ekler) — marka rengiyle (kirmizi sol cizgi + hafif zemin) tiklamanin
       ANLASILMASI icin belirgin bir gorsel fark (kullanicinin istegi). */
    .satis-noktalari .sn-list-item.aktif {
        background: #f7f5f4;
        border-left-color: #ff2d16;
    }

        .satis-noktalari .sn-list-item.aktif h4 {
            /* color: #ff2d16; */
        }

    .satis-noktalari .sn-list-item h4 {
        margin: 0 0 4px;
        font-size: 12px;
        font-weight: 700;
        color: #2b2e34;
        letter-spacing: 0;
        transition: color .15s ease;
    }

    .satis-noktalari .sn-list-item p {
        margin: 0 0 2px;
        font-size: 12px;
        color: #666;
        letter-spacing: 0;
    }

/* "Ara" (tel:) + "Yol Tarifi" (Google Maps, yeni sekme) — her sn-list-item
   satirinin en altinda, ikonlu modern buton cifti. */
.satis-noktalari .sn-list-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.satis-noktalari .sn-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #2b2e34;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .satis-noktalari .sn-action-btn svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    .satis-noktalari .sn-action-btn:hover {
        border-color: #ff2d16;
        color: #ff2d16;
    }

    .satis-noktalari .sn-action-btn span {
        font-size: 13px
    }

    .satis-noktalari .sn-action-btn:hover span {
        color: #ff2d16;
    }

.satis-noktalari .sn-action-tarif {
    background: #cc1413;
    border-color: #cc1413;
    color: #fff;
}

    .satis-noktalari .sn-action-tarif span {
        font-size: 13px;
        color: #fff;
        font-weight: 500;
    }

    .satis-noktalari .sn-action-tarif:hover {
        background: #ff2d16;
        border-color: #ff2d16;
        color: #fff;
    }

        .satis-noktalari .sn-action-tarif:hover span {
            color: #fff;
        }


.satis-noktalari .sn-empty {
    padding: 16px 8px;
    font-size: 13px;
    color: #999;
}

.satis-noktalari .sn-map-container {
    flex: 1 1 auto;
    min-width: 0;
    z-index: 1;
}

.satis-noktalari #satisNoktalariMap {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* Graniser marka rengi - marker pin */
.sn-marker-icon {
    background: transparent;
    border: none;
}

.sn-marker-pin {
    width: 32px;
    height: 32px;
    background-image: url(/img/harita_renk1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

/* Cluster badge'leri — MODERN tasarim: yumusak golge, ince beyaz halka,
   hover'da hafif buyume. NOT: Leaflet.markercluster kutuphanesi HER
   cluster ikonuna kendi "marker-cluster" / "marker-cluster-small/medium/
   large" class'ini da OTOMATIK ekler (bizim className, EK bir class'tir,
   YERINE GECMEZ) — MarkerCluster.Default.css'in (Index.cshtml'de bizden
   ONCE yuklenen) varsayilan MAVI arka plan/border'i, hover'da tam da
   "mavi cizgiler" olarak tarif edilen o halkayi (.marker-cluster-small
   div, .marker-cluster-medium div vb. spesifik selector'lari) ureten
   sebepti. Asagida hem kendi class'larimiz hem kutuphanenin class'lari
   ACIKCA sifirlanip UZERINE yeniden yazilir. */
.sn-cluster-icon,
.marker-cluster {
    background: transparent;
    border: none;
}

    .sn-cluster-icon div,
    .marker-cluster div,
    .marker-cluster span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        background: #cc1413;
        color: #fff;
        font-weight: 600;
        font-family: inherit;
        font-size: 13px;
        letter-spacing: .2px;
        border-radius: 50%;
        border: 2px solid #ff2d16;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
        transition: transform .15s ease, box-shadow .15s ease;
    }


        .sn-cluster-icon div * {
            color: #fff;
            font-size: 13px;
            font-weight: 500;
        }

    .sn-cluster-icon:hover div,
    .marker-cluster:hover div {
        transform: scale(1.08);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    }

.sn-cluster-small div {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.sn-cluster-medium div {
    width: 42px;
    height: 42px;
    font-size: 13px;
}

.sn-cluster-large div {
    width: 50px;
    height: 50px;
    font-size: 14px;
    background: #2b2e34;
}

.sn-popup h4 {
    margin: 0 0 6px;
    color: #2b2e34;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:0;
}

.sn-popup p {
    margin: 0 0 4px;
    font-size: 11px;
    color: #444;
    letter-spacing: 0;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    bottom: 12px !important;
    max-width:280px
}

.sn-popup p * {
    font-size: 11px;
    color: #444;
}

@media (max-width: 900px) {
    .satis-noktalari .sn-wrapper {
        flex-direction: column;
    }

    .satis-noktalari .sn-sidebar {
        width: 100%;
        flex: 1 1 auto;
    }

    .satis-noktalari .sn-list {
        max-height: 320px;
    }

    .satis-noktalari #satisNoktalariMap {
        height: 420px;
    }
}