/* Keep Leaflet's internal z-indexes (400-1000) inside the map boxes so the header dropdowns stay on top. */
.sr-map-wrap,
.s4-2,
.sr-map {
    isolation: isolate;
}

/* Showrooms section (list + Leaflet map + detail card), shared by the home and contact pages.
   Used by Views/Partial/_ShowroomsMap.cshtml. */

/* ---------- Showrooms (list + Leaflet map + detail card) ---------- */
.sr .section-title h2 {
    font-weight: 300;
}

.sr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: max(30px, 60rem);
    align-items: stretch;
}

/* List */
.sr-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sr-item {
    appearance: none;
    background: none;
    border: 0;
    border-top: var(--sl) solid var(--c3);
    margin: 0;
    padding: max(20px, 30rem) 0 max(20px, 30rem) max(14px, 22rem);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: max(26px, 40rem) 1fr auto;
    align-items: center;
    gap: max(10px, 16rem);
}

.sr-item:last-child {
    border-bottom: var(--sl) solid var(--c3);
}

/* Thin bar that grows on the active row */
.sr-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background-color: var(--c1);
    transform: scaleY(0);
    transition: transform .4s;
}

.sr-item.active::before {
    transform: scaleY(1);
}

.sr-item-num {
    font-size: var(--f-xxs);
    letter-spacing: .14em;
    opacity: .4;
}

.sr-item-text {
    display: flex;
    flex-direction: column;
    gap: max(4px, 6rem);
    min-width: 0;
}

.sr-item-name {
    font-size: var(--f-b);
    line-height: 1.1;
    color: var(--c2);
    transition: color .3s;
}

.sr-item-main {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    vertical-align: middle;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c0);
    background-color: rgb(137 137 128);
}

.sr-item-place {
    font-size: var(--f-xs);
    opacity: .55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-item-arrow {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s, transform .3s;
}

.sr-item:hover .sr-item-name,
.sr-item.active .sr-item-name {
    color: var(--c1);
}

.sr-item.active .sr-item-name {
    font-family: var(--altfontitalic);
}

.sr-item:hover .sr-item-arrow,
.sr-item.active .sr-item-arrow {
    opacity: 1;
    transform: none;
}

.sr-item:focus-visible {
    outline: var(--sl) solid var(--c1);
    outline-offset: 4px;
}

/* Map */
.sr-map-wrap {
    position: relative;
    min-height: max(420px, 680rem);
    overflow: hidden;
}

.sr-map {
    position: absolute;
    inset: 0;
    background-color: #d7d5d1;
}

/* Basemap colours come from the SVG colour matrix in Index.cshtml (#sr-map-tint): sea #D7D5D1, land #DFDEDC */
.sr-map .leaflet-tile-pane {
    filter: url(#sr-map-tint);
}

.sr-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Place names drawn as text in Jost (see renderLabels in Index.cshtml): districts 500 (medium), quarters and
   neighbourhoods 400. Hidden while a zoom animation runs, then redrawn without overlaps. */
.sr-label {
    background: none;
    border: 0;
}

.sr-label span {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: 'Jost', sans-serif;
    line-height: 1;
    pointer-events: none;
}

.sr-label--r1 span {
    font-weight: 500;
    font-size: 13px;
    color: rgb(100 100 93);
}

.sr-label--r2 span {
    font-weight: 400;
    font-size: 11px;
    color: rgb(120 120 112);
}

.sr-label--r3 span {
    font-weight: 400;
    font-size: 10.5px;
    color: rgb(140 140 132);
}

.sr-map.sr-zooming .leaflet-labels-pane {
    opacity: 0;
}

.sr-map-all {
    position: absolute;
    top: max(14px, 22rem);
    left: max(14px, 22rem);
    z-index: 900;
    appearance: none;
    border: 0;
    background-color: var(--c0);
    color: var(--c1);
    font: inherit;
    font-size: var(--f-xxs);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: max(10px, 12rem) max(14px, 18rem);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(22, 22, 1, .08);
    transition: background-color .3s, color .3s;
}

.sr-map-all:hover {
    background-color: var(--c1);
    color: var(--c0);
}

/* Showroom markers: dot with a soft ring; all four pulse gently, the selected one grows and pulses faster */
.sr-marker {
    background: none;
    border: 0;
}

.sr-marker span,
.sr-marker span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

.sr-marker span {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background-color: rgb(137 137 128);
    box-shadow: 0 0 0 4px rgba(229, 229, 226, .9), 0 0 0 5px rgba(22, 22, 1, .25);
    transition: transform .3s;
}

.sr-marker span::after {
    content: "";
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1px solid rgb(137 137 128);
    opacity: 0;
    animation: sr-pulse 2.6s ease-out infinite;
}

.sr-marker.active span {
    transform: scale(1.3);
}

.sr-marker.active span::after {
    animation-duration: 1.8s;
}

@keyframes sr-pulse {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(4.5); opacity: 0; }
}
.leaflet-tooltip.sr-tooltip {
    background-color: var(--c1);
    color: var(--c0);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 10px;
}

.leaflet-tooltip.sr-tooltip::before {
    border-top-color: var(--c1);
}

.sr-map .leaflet-bar {
    border: 0;
    box-shadow: 0 6px 20px rgba(22, 22, 1, .08);
}

.sr-map .leaflet-bar a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--c3);
    background-color: var(--c0);
    color: var(--c1);
    font-weight: 300;
}

.sr-map .leaflet-bar a:last-child {
    border-bottom: 0;
}

.sr-map .leaflet-bar a:hover {
    background-color: var(--c1);
    color: var(--c0);
}

.sr-map .leaflet-control-attribution {
    background-color: rgba(229, 229, 226, .75);
    color: var(--c2);
    font-size: 10px;
}

.sr-map .leaflet-control-attribution a {
    color: inherit;
}

/* Detail card */
.sr-card {
    position: absolute;
    top: max(14px, 22rem);
    right: max(14px, 22rem);
    z-index: 1100;
    max-height: calc(100% - 2 * max(14px, 22rem));
    width: min(380px, calc(100% - 28px));
    display: flex;
    flex-direction: column;
    padding: max(26px, 40rem) max(24px, 36rem);
    background-color: var(--c0);
    box-shadow: 0 24px 60px rgba(22, 22, 1, .18);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    transition: opacity .35s, transform .35s, visibility 0s .35s;
}

.sr-card.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s, transform .35s;
}

.sr-card-close {
    position: absolute;
    top: max(12px, 16rem);
    right: max(12px, 16rem);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    background: none;
    color: var(--c1);
    cursor: pointer;
    opacity: .6;
    transition: opacity .3s, transform .3s;
}

.sr-card-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.sr-card-num {
    font-size: var(--f-xxs);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .5;
}

.sr-card-name {
    margin-top: max(10px, 14rem);
    font-size: max(32px, 50rem);
    line-height: 1;
}

.sr-card-place {
    margin-top: max(8px, 10rem);
    font-size: var(--f-xs);
    opacity: .6;
}

.sr-card-place:empty {
    display: none;
}

.sr-card-info {
    margin: max(22px, 32rem) 0 0;
    padding-top: max(18px, 24rem);
    border-top: var(--sl) solid var(--c3);
    display: grid;
    gap: max(4px, 6rem);
}

.sr-card-info:empty {
    display: none;
}

.sr-card-info dt {
    font-size: var(--f-xxs);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .45;
}

.sr-card-info dt:not(:first-child) {
    margin-top: max(12px, 16rem);
}

.sr-card-info dd {
    margin: 0;
    font-size: var(--f-s);
    line-height: 1.45;
}

.sr-card-info a {
    border-bottom: var(--sl) solid var(--c3);
    transition: border-color .3s;
}

.sr-card-info a:hover {
    border-color: var(--c1);
}

.sr-card-actions {
    margin-top: auto;
    padding-top: max(24px, 32rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: max(14px, 18rem);
}

.sr-card-btn {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, 18rem) max(18px, 22rem);
    background-color: var(--c1);
    color: var(--c0);
    font-size: var(--f-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background-color .3s;
}

.sr-card-btn svg {
    transition: transform .3s;
}

.sr-card-btn:hover {
    background-color: #2d2d1c;
}

.sr-card-btn:hover svg {
    transform: translateX(4px);
}

.sr-card-link {
    font-size: var(--f-xs);
}

@media screen and (max-width: 1023.98px) {
    .sr-grid {
        grid-template-columns: 1fr;
    }

    .sr-map-wrap {
        order: -1;
    }

    /* On phones the card opens as a panel under the map instead of covering it */
    .sr-map-wrap {
        min-height: 0;
        overflow: visible;
    }

    .sr-map {
        position: relative;
        inset: auto;
        height: 360px;
    }

    .sr-card {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: auto;
        display: none;
        padding: 24px 20px;
        transform: none;
        box-shadow: none;
        border-bottom: var(--sl) solid var(--c3);
        overflow: visible;
    }

    .sr-card.open {
        display: flex;
    }

    .sr-card-name {
        font-size: 32px;
    }
}

/* ---------- Showrooms page (Views/Showroomlar): map in the s4-2 photo area, then one s4-1 row per showroom ---------- */
/* Map section, then the page title, then the showroom rows: no double section spacing around the title */
.vs-top {
    padding-bottom: 0;
}

.vs-list {
    padding-top: max(50px, 90rem);
}

.vs-list .vs-showroom:first-child {
    margin-top: 0;
}

.s4-2 .vs-map {
    position: absolute;
    inset: 0;
}

.vs-showroom {
    margin-top: max(50px, 80rem);
}

/* Thin divider between showrooms, inset from the wrapper edges */
.vs-showroom + .vs-showroom {
    position: relative;
    padding-top: max(50px, 80rem);
}

.vs-showroom + .vs-showroom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sl);
    background: linear-gradient(to right, transparent, var(--c3) 12%, var(--c3) 88%, transparent);
}

/* The italic line under the showroom name (\"Merkez Showroom\" / \"Showroom\") is a small subtitle */
.vs-showroom .s4-3 i {
    display: block;
    margin-top: max(4px, 6rem);
    font-size: .45em;
    line-height: 1.2;
    transition: opacity .3s;
}

.vs-showroom:not(.active) .s4-3 i {
    opacity: .55;
}

/* Two equal buttons under each showroom: outlined "Randevu alın" + filled "Yol tarifi al" */
.vs-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: max(10px, 14rem);
    margin-top: max(30px, 40rem);
}

.vs-button-outline {
    background-color: transparent;
    color: var(--c1);
}

.vs-button-outline:hover {
    background-color: var(--c1);
    color: var(--c0);
}

@media screen and (max-width: 1023.98px) {
    .vs-actions {
        grid-template-columns: 1fr;
    }
}