/* ============================================================
   FIMAK — yetkili-servisler.css
   Yalnizca yetkili-servisler.php'de yuklenir; style.css'i tamamlar.
   Sayfa hero'su paylasilan css/page-hero.css dosyasindadir.

   Bolumler
   1. Ortak kapsayici ve baslik satiri
   2. Harita, igneler ve ipucu balonu
   3. Servis paneli (haritanin ustunde acilan buzlu cam)
   4. Sag panel (sekmeler, il listesi, hizmetler)
   5. Responsive (tum media query'ler burada)

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur; haritanin
   kara rengi sitede karsiligi olmadigi icin burada tanimlidir.
   ============================================================ */


/* ------------------------------------------------------------
   1. Ortak kapsayici ve baslik satiri
   ------------------------------------------------------------ */
.sv {
    --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Harita renkleri: sitenin paletinde karsiligi yok */
    --sv-land: #d5dce4;
    --sv-land-hover: #c3ccd7;
    --sv-land-on: #e10714;
    --sv-land-on-hover: #ec8f94;
    --sv-land-hq: #c9cdd3;

    max-width: 1920px;
    margin-inline: auto;
    padding: clamp(28px, 5.2vw, 100px) clamp(20px, 6.4vw, 124px);

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.sv-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 6vw, 120px);
    margin-bottom: clamp(40px, 1.7vw, 90px);
}

.sv-head h2 {
    font-size: clamp(28px, 3vw, 58px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
}

.sv-head h2 span {
    display: block;
    color: var(--brand);
}

.sv-head p {
    justify-self: center;
    max-width: 36ch;
    font-size: clamp(16px, 1.05vw, 19px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--text);
}

.sv-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: clamp(12px, 1vw, 20px) clamp(18px, 2vw, 40px);
    border: 1px solid var(--border);
    font-size: clamp(15px, 0.9vw, 17px);
    font-weight: 400;
    white-space: nowrap;
    /* style.css'te a { color: var(--brand-dark); } var */
    color: var(--text);
    transition: border-color 0.5s ease, color 0.5s ease;
}

.sv-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.5s var(--sv-ease);
}

.sv-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.sv-btn:hover svg { transform: rotate(45deg); }

.sv-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.sv-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 520px);
    align-items: center;
    gap: clamp(30px, 3.2vw, 60px);
}


/* ------------------------------------------------------------
   2. Harita, igneler ve ipucu balonu
   Iller inc/turkiye-map.svg icinde path olarak gelir; her path'te
   data-il niteligi bulunur ve js/yetkili-servisler.js boyamayi ve
   igne konumlarini bu nitelige gore yapar.
   ------------------------------------------------------------ */
.sv-map-col {
    position: relative;
    /* Panel haritanin ustunde acilacak; sutun kendi yigin baglamini kursun */
    z-index: 3;
}

.sv-map {
    position: relative;
    width: 100%;
}

.sv-map__svg {
    display: block;
    width: 100%;
    height: auto;
    /* Igne halkalari il sinirindan tasabilir */
    overflow: visible;
}

.sv-map__svg path {
    fill: var(--sv-land);
    stroke: var(--surface);
    stroke-width: 0.8;
    transition: fill 0.4s var(--sv-ease);
}

.sv-map__svg path:hover { fill: var(--sv-land-hover); }

.sv-map__svg path.has-service {
    fill: var(--sv-land-on);
    cursor: pointer;
}

.sv-map__svg path.has-service:hover { fill: var(--sv-land-on-hover); }
.sv-map__svg path.is-hq { fill: var(--sv-land-hq); }

/* is-active en sonda: secili il her durumda marka kirmizisi olsun */
.sv-map__svg path.is-active { fill: var(--brand); }

/* Harita dosyasi henuz eklenmediyse gorunen not */
.sv-map__missing {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    padding: 24px;
    border: 1px dashed var(--border);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    color: var(--text-secondary);
}

.sv-tip {
    position: absolute;
    z-index: 6;
    padding: 6px 12px;
    border-radius: 30px;
    background-color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    opacity: 0;
    /* Balon fareyi yakalamasin, altindaki il tiklanabilir kalsin */
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    transition: opacity 0.2s ease;
}

.sv-tip.is-on { opacity: 1; }

.sv-tip small {
    margin-left: 6px;
    font-weight: 400;
    opacity: 0.65;
}

.sv-pin {
    position: absolute;
    z-index: 2;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

/* Uc ic ice halka: disttaki nabiz gibi atar */
.sv-pin i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--brand);
    transition: transform 0.5s var(--sv-ease);
}

.sv-pin i:nth-child(1) {
    opacity: 0.2;
    animation: sv-pulse 2.8s ease-out infinite;
}

.sv-pin i:nth-child(2) {
    inset: 4.3px;
    opacity: 0.32;
}

.sv-pin i:nth-child(3) { inset: 8.6px; }

@keyframes sv-pulse {
    0%        { transform: scale(1);   opacity: 0.35; }
    80%, 100% { transform: scale(2.3); opacity: 0; }
}

.sv-pin.is-hq i { background-color: var(--text); }
.sv-pin.is-active i:nth-child(3) { transform: scale(1.3); }

.sv-pin__count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--surface);
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    color: var(--brand);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
}

.sv-pin:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: 50%;
}

.sv-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-secondary);
}

.sv-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sv-legend b {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand);
}

.sv-legend span:first-child b { background-color: var(--text); }

.sv-legend span:last-child b {
    border-radius: 2px;
    background-color: var(--sv-land-on);
}


/* ------------------------------------------------------------
   3. Servis paneli
   Haritanin ustunde acilan buzlu cam katman. visibility ile
   kapatilir (display:none degil): gecisler calisir ve kapaliyken
   ic ogeler sekme sirasindan cikar.
   ------------------------------------------------------------ */
.sv-pop {
    position: absolute;
    z-index: 10;
    top: 6%;
    right: 4%;
    bottom: -4%;
    left: -2%;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
    padding: clamp(20px, 2.6vw, 48px) clamp(20px, 3vw, 60px)
             clamp(20px, 2.6vw, 48px) clamp(16px, 1.6vw, 28px);
    border: 1px solid rgb(255 255 255 / 0.55);
    background-color: rgb(176 188 206 / 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 40px 80px -30px rgb(20 24 40 / 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.98);
    transition: opacity 0.45s var(--sv-ease), transform 0.6s var(--sv-ease),
        visibility 0s linear 0.45s;
}

.sv-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s var(--sv-ease), transform 0.6s var(--sv-ease);
}

/* Il adi dikey: panelin solunda ince konturlu bir seritte durur */
.sv-pop__city {
    flex-shrink: 0;
    max-height: 100%;
    overflow: hidden;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(34px, 3vw, 58px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.2px rgb(255 255 255 / 0.9);
}

.sv-pop__close {
    position: absolute;
    top: clamp(14px, 1.4vw, 24px);
    right: clamp(14px, 1.4vw, 24px);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgb(255 255 255 / 0.85);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.35s ease, color 0.35s ease,
        transform 0.45s var(--sv-ease);
}

.sv-pop__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.sv-pop__close:hover {
    background-color: #fff;
    color: var(--text);
    transform: rotate(90deg);
}

.sv-pop__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.sv-pop__cards {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.6) transparent;
}

/* Oklar yalnizca kartlar tasiyorsa gorunur; sinifi JS olcup ekler */
.sv-pop__nav {
    position: absolute;
    right: clamp(14px, 1.4vw, 24px);
    bottom: clamp(14px, 1.4vw, 24px);
    display: none;
    gap: 8px;
}

.sv-pop.has-overflow .sv-pop__nav { display: flex; }

.sv-pop__nav button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(255 255 255 / 0.85);
    border-radius: 50%;
    background-color: rgb(28 30 36 / 0.5);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.sv-pop__nav button:hover {
    border-color: var(--brand);
    background-color: var(--brand);
}

.sv-pop__nav button:disabled {
    border-color: rgb(255 255 255 / 0.85);
    background-color: rgb(28 30 36 / 0.5);
    opacity: 0.35;
    cursor: default;
}

.sv-pop__nav button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.sv-pop__nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv-card {
    flex: 0 0 clamp(260px, 19vw, 370px);
    padding: clamp(22px, 2vw, 32px);
    border: 1px solid rgb(255 255 255 / 0.14);
    background-color: rgb(28 30 36 / 0.86);
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.5);
    color: #fff;
    scroll-snap-align: start;
    opacity: 0;
    transform: translateY(14px);
}

/* Kartlar sirayla girer; panel acilmadan animasyon baslamaz */
.sv-pop.is-open .sv-card {
    animation: sv-card 0.6s var(--sv-ease) forwards;
    animation-delay: calc(var(--i) * 90ms + 120ms);
}

@keyframes sv-card {
    to {
        opacity: 1;
        transform: none;
    }
}

.sv-card__city {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgb(255 255 255 / 0.8);
}

.sv-card__city::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand);
}

.sv-card h4 {
    margin-top: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 600;
    line-height: 1.35;
}

.sv-card ul {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    list-style: none;
}

.sv-card li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: clamp(14px, 0.9vw, 16px);
    line-height: 1.5;
}

.sv-card li svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: rgb(255 255 255 / 0.85);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv-card a {
    color: #fff;
    transition: color 0.3s ease;
}

.sv-card a:hover { color: #ffb3b6; }

.sv-card a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sv-card__regions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 0.12);
}

.sv-card__regions p {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.55);
}

.sv-card__regions div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.sv-card__regions span {
    padding: 4px 10px;
    border-radius: 20px;
    background-color: rgb(255 255 255 / 0.1);
    font-size: 12px;
}

.sv-card__route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgb(255 255 255 / 0.4);
    font-size: 13px;
    font-weight: 500;
}

.sv-card__route svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.sv-card__route:hover { border-color: var(--brand); }


/* ------------------------------------------------------------
   4. Sag panel
   ------------------------------------------------------------ */
.sv-panel h3 {
    font-size: clamp(24px, 1.9vw, 36px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: var(--brand);
}

.sv-tabs {
    display: flex;
    gap: clamp(18px, 1.6vw, 32px);
    margin-top: clamp(28px, 2.8vw, 54px);
}

.sv-tab {
    position: relative;
    padding-bottom: 6px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: clamp(18px, 1.35vw, 26px);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.4s ease;
}

/* Etkin sekmenin altindaki cizgi soldan dolar */
.sv-tab::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--sv-ease);
}

.sv-tab:hover,
.sv-tab.is-active { color: var(--text); }

.sv-tab.is-active::after { transform: scaleX(1); }

.sv-tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

.sv-pane { margin-top: clamp(26px, 3vw, 56px); }
.sv-pane[hidden] { display: none; }

.sv-pane.is-in { animation: sv-fade 0.5s var(--sv-ease); }

@keyframes sv-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.sv-search {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.sv-search input {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--border);
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    outline: none;
    transition: border-color 0.3s ease;
}

.sv-search input:focus { border-color: var(--brand); }

.sv-search svg {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 1.8;
    transform: translateY(-50%);
}

.sv-cities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    max-height: 330px;
    overflow: auto;
    scrollbar-width: thin;
}

.sv-city {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    font-family: inherit;
    font-size: clamp(15px, 0.9vw, 17px);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.sv-city small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    transition: color 0.35s ease;
}

.sv-city:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.sv-city.is-active {
    border-color: var(--brand);
    background-color: var(--brand);
    color: #fff;
}

.sv-city.is-active small { color: rgb(255 255 255 / 0.75); }
.sv-city[hidden] { display: none; }

.sv-city:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.sv-hint {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.sv-hint a {
    font-weight: 500;
    color: var(--brand);
    text-decoration: underline;
}

.sv-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.sv-service {
    padding: 18px 18px 20px;
    border: 1px solid var(--border);
    transition: border-color 0.35s ease;
}

.sv-service:hover { border-color: var(--brand); }

.sv-service svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv-service h4 {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.sv-service p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}


/* ------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .sv-head { grid-template-columns: 1fr auto; }

    .sv-head p {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        max-width: none;
    }

    .sv-body { grid-template-columns: 1fr; }

    .sv-pop {
        top: -10%;
        right: 0;
        bottom: -14%;
        left: 0;
    }
}

@media (max-width: 640px) {
    .sv-head { grid-template-columns: 1fr; }
    .sv-head .sv-btn { justify-self: start; }

    .sv-pin {
        width: 18px;
        height: 18px;
    }

    .sv-pin i:nth-child(2) { inset: 3px; }
    .sv-pin i:nth-child(3) { inset: 6px; }

    .sv-services { grid-template-columns: 1fr; }

    /* Dar ekranda panel alttan acilan bir tabaka olur */
    .sv-pop {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        max-height: 82vh;
        padding: 64px 16px 20px;
        transform: translateY(40px);
    }

    .sv-pop__city {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 30px;
    }

    .sv-pop__cards {
        flex-direction: column;
        overflow: auto;
    }

    .sv-card { flex: none; }

    /* Dikey listede yatay oklarin anlami kalmaz */
    .sv-pop.has-overflow .sv-pop__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {

    .sv-btn,
    .sv-btn svg,
    .sv-map__svg path,
    .sv-tip,
    .sv-pin i,
    .sv-pop,
    .sv-pop__close,
    .sv-pop__nav button,
    .sv-card a,
    .sv-tab,
    .sv-tab::after,
    .sv-search input,
    .sv-city,
    .sv-city small,
    .sv-service { transition: none; }

    .sv-pin i:nth-child(1) { animation: none; }
    .sv-pane.is-in { animation: none; }

    /* Kartlar animasyonsuz da gorunur kalmali */
    .sv-card {
        opacity: 1;
        transform: none;
    }

    .sv-pop.is-open .sv-card { animation: none; }
}