/**
 * MERİVA Explore Premium V2
 * Hub + city editorial polish. Tokens from meriva-tokens.css.
 * Does not change map geometry, routes, or backend.
 */

.mx-explore-v2,
.mx-city-v2 {
    --ex-ink: #0a0a0e;
    --ex-graphite: #14141a;
    --ex-panel: #121218;
    --ex-panel-2: #18181f;
    --ex-line: rgba(247, 243, 236, 0.1);
    --ex-gold: var(--meriva-gold, #D4AF37);
    --ex-gold-light: var(--meriva-gold-light, #E5C45A);
    --ex-cream: var(--meriva-cream, #F7F3EC);
    --ex-muted: rgba(247, 243, 236, 0.68);
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    overflow-x: clip;
    min-width: 0;
}

.mx-explore-v2 {
    display: flex;
    flex-direction: column;
    gap: clamp(1.35rem, 2.8vw, 2.25rem);
}

/* —— Compact page hero (not Home clone) —— */
.mx-explore-v2 .mx-explore-hero {
    padding: clamp(0.9rem, 2vw, 1.35rem) clamp(0.95rem, 2vw, 1.5rem);
    background:
        linear-gradient(165deg, #16161c 0%, #0c0c10 72%);
    border: 1px solid var(--ex-line);
}

.mx-explore-v2 .mx-explore-hero h1 {
    font-size: clamp(1.45rem, 3.4vw, 2.15rem);
    letter-spacing: -0.03em;
    max-width: 22ch;
}

.mx-explore-v2 .mx-explore-kicker {
    color: var(--ex-gold-light);
}

.mx-explore-v2 .mx-explore-lead {
    max-width: 36rem;
    font-size: 0.95rem;
}

.mx-explore-v2 .mx-explore-search {
    margin-top: 1rem;
    max-width: 34rem;
}

.mx-explore-v2 .mx-explore-search-input {
    min-height: 48px;
    padding: 0.75rem 1rem 0.75rem 2.65rem;
    font-size: 1rem;
    border-color: rgba(247, 243, 236, 0.12);
    background-color: #0d0d12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23C8C4BC' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.9rem 50%;
    background-size: 1rem;
}

.mx-explore-v2 .mx-explore-search-input:focus,
.mx-explore-v2 .mx-explore-search-input:focus-visible,
.mx-city-v2 .mx-city-search .m-input:focus,
.mx-city-v2 .mx-city-search .m-input:focus-visible {
    outline: 2px solid var(--ex-gold);
    outline-offset: 2px;
    border-color: rgba(212, 175, 55, 0.55);
}

.mx-explore-v2 .mx-explore-search-btn,
.mx-city-v2 .mx-city-search .m-btn,
.mx-explore-v2 .mx-explore-city-cta {
    min-height: 48px;
}

/* —— Turkey map stage —— */
.mx-explore-v2 .mx-explore-map-block {
    min-width: 0;
}

.mx-explore-v2 .m-explore-map-shell,
.mx-explore-v2 .mx-explore-map {
    padding: 0.75rem 0.65rem;
    border-radius: var(--meriva-radius-large, 16px);
    border: 1px solid rgba(247, 243, 236, 0.08);
    background: #101014;
    overflow: hidden;
    max-width: 100%;
}

.mx-explore-v2 .m-turkey-map-wrapper {
    overflow: hidden;
    max-width: 100%;
    padding-block: 0.15rem;
}

.mx-explore-v2 .m-tr-map {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-height: min(58vw, 260px) !important;
}

@media (min-width: 768px) {
    .mx-explore-v2 .m-tr-map {
        max-height: min(46vh, 360px) !important;
    }
}

@media (min-width: 1280px) {
    .mx-explore-v2 .m-tr-map {
        max-height: min(48vh, 440px) !important;
    }
}

@media (min-width: 1920px) {
    .mx-explore-v2 .m-tr-map {
        max-height: 460px !important;
    }
}

.mx-explore-v2 .m-tr-map path {
    fill: #1c1c24 !important;
    stroke: #2a2a34 !important;
    stroke-width: 1px !important;
    filter: none !important;
    transition: fill 0.15s ease, stroke 0.15s ease, opacity 0.15s ease;
}

.mx-explore-v2 .m-tr-map g:not(.m-city-active) > path,
.mx-explore-v2 .m-tr-map g:not(.m-city-active) g path {
    opacity: 0.55;
}

.mx-explore-v2 .m-tr-map g:hover:not(.m-city-active) > path,
.mx-explore-v2 .m-tr-map g:hover:not(.m-city-active) g path {
    fill: #2a2a34 !important;
    stroke: #3a3a46 !important;
    opacity: 0.9;
}

.mx-explore-v2 .m-tr-map g.m-city-active > path,
.mx-explore-v2 .m-tr-map g.m-city-active g path {
    fill: #c9a227 !important;
    stroke: #e5c45a !important;
    stroke-width: 1.6px !important;
    filter: none !important;
    opacity: 1;
}

.mx-explore-v2 .m-tr-map g.m-city-active:hover > path,
.mx-explore-v2 .m-tr-map g.m-city-active:hover g path {
    fill: #d4af37 !important;
    stroke: #f7f3ec !important;
}

.mx-explore-v2 .m-tr-map g[data-plakakodu]:focus,
.mx-explore-v2 .m-tr-map g[data-plakakodu]:focus-visible {
    outline: 2px solid var(--ex-gold);
    outline-offset: 2px;
}

.mx-explore-v2 .m-malatya-pin {
    animation: none !important;
    transform: translate(656px, 205px);
}

.mx-explore-v2 .mx-explore-active-flag {
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.08);
}

/* —— Active city panel —— */
.mx-explore-v2 .mx-explore-city-grid {
    grid-template-columns: 1fr;
}

.mx-explore-v2 .mx-explore-city.is-spotlight {
    grid-column: auto;
    border-color: rgba(212, 175, 55, 0.32);
    background: #141418;
}

.mx-explore-v2 .mx-explore-city {
    border: 1px solid var(--ex-line);
    background: var(--ex-panel);
}

.mx-explore-v2 .mx-explore-city h3 {
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
}

.mx-explore-v2 .mx-explore-city-cta {
    display: inline-flex;
    align-items: center;
    color: var(--ex-gold-light);
    font-weight: 700;
}

.mx-explore-v2 .mx-explore-city:focus-visible,
.mx-explore-v2 .mx-explore-hit:focus-visible,
.mx-city-v2 .mx-city-card:focus-visible,
.mx-city-v2 .mx-city-rail-item:focus-visible,
.mx-city-v2 .mx-city-chip:focus-visible {
    outline: 2px solid var(--ex-gold);
    outline-offset: 2px;
}

/* —— Guide: 3 compact steps, not a card wall —— */
.mx-explore-v2 .mx-explore-flow {
    opacity: 0.96;
}

.mx-explore-v2 .mx-explore-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-explore-v2 .mx-explore-steps li {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--ex-line);
    background: transparent;
}

.mx-explore-v2 .mx-explore-steps h3 {
    font-size: 0.98rem;
}

.mx-explore-v2 .mx-explore-steps p {
    font-size: 0.88rem;
}

@media (min-width: 768px) {
    .mx-explore-v2 .mx-explore-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mx-explore-v2 .mx-explore-hits {
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .mx-explore-v2 .mx-explore-hits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .mx-explore-v2 .mx-explore-hits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mx-explore-v2 .mx-explore-hit {
    min-height: 0;
    border: 1px solid var(--ex-line);
    background: var(--ex-panel);
}

.mx-explore-v2 .mx-explore-hit.is-esnaf { border-left: 3px solid rgba(247, 243, 236, 0.28); }
.mx-explore-v2 .mx-explore-hit.is-gift { border-left: 3px solid rgba(212, 175, 55, 0.65); }
.mx-explore-v2 .mx-explore-hit.is-content { border-left: 3px solid rgba(126, 200, 154, 0.4); }
.mx-explore-v2 .mx-explore-hit.is-market { border-left: 3px solid rgba(200, 196, 188, 0.35); }
.mx-explore-v2 .mx-explore-hit.is-swap { border-left: 3px solid rgba(184, 169, 255, 0.4); }

.mx-explore-v2 .mx-explore-empty,
.mx-city-v2 .mx-city-empty {
    border-style: dashed;
    border-color: rgba(247, 243, 236, 0.16);
    background: var(--ex-panel);
}

/* —— City editorial page —— */
.mx-city-v2 {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.2vw, 1.55rem);
}

.mx-city-v2 .mx-city-hero {
    padding: clamp(0.85rem, 1.8vw, 1.25rem) clamp(0.95rem, 1.8vw, 1.4rem);
    background: linear-gradient(165deg, #16161c 0%, #0c0c10 74%);
    border: 1px solid var(--ex-line);
}

.mx-city-v2 .mx-city-hero h1 {
    font-size: clamp(1.85rem, 5vw, 2.75rem);
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

.mx-city-v2 .mx-city-lead {
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
}

.mx-city-v2 .mx-city-kicker {
    margin-bottom: 0.35rem;
}

.mx-city-v2 .mx-city-rail {
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.35rem;
}

.mx-city-v2 .mx-city-rail-item {
    background: var(--ex-panel);
    border-color: rgba(247, 243, 236, 0.08);
    color: var(--ex-muted);
}

.mx-city-v2 .mx-city-rail-item.is-active {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.1);
    color: var(--ex-cream);
}

.mx-city-v2 .mx-city-today h2 {
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-muted);
    margin-bottom: 0.55rem;
}

.mx-city-v2 .mx-city-today-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    grid-template-columns: none;
}

.mx-city-v2 .mx-city-today-list li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--ex-line);
    background: var(--ex-panel);
}

.mx-city-v2 .mx-city-today-list strong {
    display: inline;
    font-size: 0.95rem;
    color: var(--ex-cream);
}

.mx-city-v2 .mx-city-today-list span {
    font-size: 0.78rem;
}

.mx-city-v2 .mx-city-districts h2 {
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ex-muted);
}

.mx-city-v2 .mx-city-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.3rem;
}

.mx-city-v2 .mx-city-chip {
    flex: 0 0 auto;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(247, 243, 236, 0.1);
    background: #101014;
    color: var(--ex-cream);
}

.mx-city-v2 .mx-city-chip span {
    color: var(--ex-muted);
}

.mx-city-v2 .mx-city-chip.is-selected {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.08);
}

.mx-city-v2 .mx-city-chip.is-selected span {
    color: var(--ex-gold-light);
}

.mx-city-v2 .mx-city-body {
    gap: 1.25rem;
}

@media (min-width: 1100px) {
    .mx-city-v2 .mx-city-body {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

.mx-city-v2 .mx-city-panel {
    border: 1px solid var(--ex-line);
    background: var(--ex-panel);
}

.mx-city-v2 .mx-city-dl {
    grid-template-columns: 1fr;
}

.mx-city-v2 .mx-city-dl div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border: 0;
    border-bottom: 1px solid var(--ex-line);
    background: transparent;
    border-radius: 0;
}

.mx-city-v2 .mx-city-dl dd {
    font-size: 0.95rem;
}

.mx-city-v2 .mx-city-card {
    border: 1px solid var(--ex-line);
    background: var(--ex-panel);
}

.mx-city-v2 .mx-city-card.is-esnaf { border-left: 3px solid rgba(247, 243, 236, 0.28); }
.mx-city-v2 .mx-city-card.is-gift { border-left: 3px solid rgba(212, 175, 55, 0.65); }
.mx-city-v2 .mx-city-card.is-content { border-left: 3px solid rgba(126, 200, 154, 0.4); }
.mx-city-v2 .mx-city-card.is-market { border-left: 3px solid rgba(200, 196, 188, 0.35); }
.mx-city-v2 .mx-city-card.is-swap { border-left: 3px solid rgba(184, 169, 255, 0.4); }

.mx-city-v2 .mx-city-cards > a:first-child {
    background: #16161c;
}

.mx-city-v2 .m-btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .mx-explore-v2 .mx-explore-search,
    .mx-explore-v2 .mx-explore-search-input,
    .mx-explore-v2 .mx-explore-search-btn {
        width: 100%;
    }

    .mx-explore-v2 .mx-explore-hero h1,
    .mx-city-v2 .mx-city-hero h1 {
        overflow-wrap: anywhere;
    }

    .mx-city-v2 .mx-city-search,
    .mx-city-v2 .mx-city-search .m-input,
    .mx-city-v2 .mx-city-search .m-btn {
        width: 100%;
    }
}

@media (min-width: 1920px) {
    .mx-explore-v2,
    .mx-city-v2 {
        max-width: 76rem;
    }
}

body.m-ui-v4 .v4-explore,
body.m-ui-v4 .mx-explore-v2,
body.m-ui-v4 .mx-city-v2,
body.m-ui-v4 .v4-city {
    max-width: none;
    width: 100%;
    min-width: 0;
}

body.m-ui-v4 .v4-content,
body.m-ui-v4 .v4-content-feed,
body.m-ui-v4 .v4-post {
    width: 100%;
    max-width: min(56rem, 100%);
    min-width: 0;
}

body.m-ui-v4 .v4-content-feed,
body.m-ui-v4 .v4-post {
    max-width: none;
}

@media (prefers-reduced-motion: reduce) {
    .mx-explore-v2 .m-tr-map path,
    .mx-explore-v2 .mx-explore-city,
    .mx-city-v2 .mx-city-card,
    .mx-city-v2 .mx-city-rail-item,
    .mx-city-v2 .mx-city-chip {
        transition: none;
    }

    .mx-explore-v2 .m-malatya-pin {
        animation: none !important;
        transform: translate(656px, 205px);
    }
}