/* ------------------------------------------------- 0. YAZI TIPI ----
   Inter, sunucudan servis edilir. Google Fonts'a baglanti yok:
   ziyaretci IP'si ucuncu tarafa gitmez (KVKK) ve iki DNS + TLS el
   sikismasi ortadan kalkar. Degisken font: 400-700 tek dosyada.
   -------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/varlik/font/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/varlik/font/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   BEYKENT GAYRIMENKUL — genel site stili
   Duz CSS, derleme adimi yok. Bolumler:
   1 Belirtecler · 2 Sifirlama · 3 Yerlesim · 4 Ust cubuk · 5 Kahraman
   6 Arama · 7 Kart destesi · 8 Ilan karti · 9 Liste + filtre · 10 Harita
   11 Ilan detayi · 12 Bolum kaliplari · 13 Form · 14 Alt bilgi
   15 Hareket · 16 Duyarli
   ===================================================================== */

/* ------------------------------------------------ 1. BELIRTECLER ---- */

:root {
    /* kagit ve yuzeyler — beyaza yakin zemin, krem ikincil yuzey olarak kaldi */
    --kagit:        #F8F7F4;   /* sayfa zemini — beyaza yakin */
    --kagit-2:      #EFEADF;   /* krem: ayrilan bolumler, vurgu seritleri */
    --yuzey:        #FFFFFF;   /* kartlar */
    --yuzey-2:      #F6F4EF;   /* kart ici ikincil alan */

    /* yazi */
    --murekkep:     #22211E;
    --murekkep-2:   #3A3833;
    --ikincil:      #6F695E;
    --soluk:        #A1998A;

    /* cizgi */
    --cizgi:        #E9E5DC;
    --cizgi-koyu:   #D6CFC1;

    /* marka koyusu — Midnight Indigo #212842
       Govde yazisi notr murekkep kalir; indigo yalnizca marka yuzeylerinde
       kullanilir: alt bilgi, guven blogu, koyu dugmeler, harita balonlari. */
    --gece:         #212842;
    --gece-2:       #2E3760;
    --gece-3:       #3C4676;
    --gece-yumusak: #E4E6EF;

    --vurgu:        var(--gece);
    --vurgu-yazi:   #F0E7D5;
    --altin:        #A9834A;

    /* durum */
    --yesil:        #35714F;
    --yesil-yumusak:#E2EDE5;
    --kirmizi:      #9E4028;
    --kirmizi-yumusak:#F6E2DC;
    --sari:         #A8792F;
    --sari-yumusak: #F4E9D5;

    /* cizim paleti — inc/cizim.php bu degiskenleri kullanir */
    --cz-zemin:     #F5F2EA;
    --cz-cizgi:     #262522;
    --cz-ikincil:   #7A7468;
    --cz-soluk:     #C9C0AC;
    --cz-dolgu:     #FFFFFF;
    --cz-vurgu:     #212842;
    --cz-vurguYazi: #F0E7D5;
    --cz-yol:       #8E8B84;
    --cz-salon:     #EDE7DA;
    --cz-oda:       #FFFFFF;
    --cz-islak:     #E1E5EC;
    --cz-gecis:     #F3EFE6;
    --cz-dis:       #E6EAE0;
    --cz-cam:       #D8DFE9;

    /* olcu */
    --r-s:   10px;
    --r-m:   14px;
    --r-l:   20px;
    --r-xl:  28px;
    --r-tam: 999px;

    --golge-s: 0 1px 2px rgba(33, 40, 66, .06);
    --golge-m: 0 4px 16px rgba(33, 40, 66, .09);
    --golge-l: 0 18px 44px rgba(33, 40, 66, .16);

    --kap:     1280px;
    --kap-dar: 840px;
    --ust-yukseklik: 74px;

    --gecis: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------- 2. SIFIRLAMA ---- */

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--gece); color: var(--vurgu-yazi); }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ust-yukseklik) + 16px);
}

body {
    margin: 0;
    background: var(--kagit);
    color: var(--murekkep);
    font: 400 16px/1.65 "Inter", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-feature-settings: "cv05" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    overflow-wrap: break-word;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.18;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gece);
    outline-offset: 2px;
    border-radius: 4px;
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

.gizli-erisim {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--vurgu); color: var(--vurgu-yazi);
    padding: 10px 18px; border-radius: var(--r-s);
    transition: top var(--gecis);
}
.atla:focus { top: 12px; }

/* --------------------------------------------------- 3. YERLESIM ---- */

.kap      { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: 20px; }
.kap-dar  { width: 100%; max-width: var(--kap-dar); margin-inline: auto; padding-inline: 20px; }

.bolum      { padding-block: clamp(48px, 6vw, 88px); }
.bolum-sik  { padding-block: clamp(32px, 4vw, 56px); }

.bolum-basi {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 16px 24px;
    margin-bottom: clamp(24px, 3vw, 40px);
}
.bolum-basi p { color: var(--ikincil); max-width: 56ch; margin: 8px 0 0; }

.ust-etiket {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ikincil); margin-bottom: 12px;
}
.ust-etiket::before {
    content: ""; width: 22px; height: 1px; background: var(--cizgi-koyu);
}

.izgara { display: grid; gap: clamp(16px, 2vw, 26px); }
/* min() olmadan dar ekranda minmax tabani kabi tasirir. */
.izgara-2 { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }

/* dugmeler */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border: 1px solid transparent; border-radius: var(--r-tam);
    font-size: .94rem; font-weight: 600; letter-spacing: -.01em;
    min-width: 0; max-width: 100%;
    transition: background var(--gecis), color var(--gecis),
                border-color var(--gecis), transform var(--gecis);
    white-space: nowrap;
}
.dugme:active { transform: translateY(1px); }
.dugme-koyu   { background: var(--vurgu); color: var(--vurgu-yazi); }
.dugme-koyu:hover { background: var(--gece-2); }
.dugme-acik   { background: var(--yuzey); color: var(--murekkep); border-color: var(--cizgi); }
.dugme-acik:hover { border-color: var(--gece); }
.dugme-bos    { background: transparent; border-color: var(--cizgi-koyu); color: var(--murekkep); }
.dugme-bos:hover { background: var(--yuzey); border-color: var(--gece); }
.dugme-kucuk  { padding: 9px 16px; font-size: .86rem; }
.dugme svg    { width: 17px; height: 17px; flex: none; }
.dugme > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* hap etiketler */
.hap {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%; overflow-wrap: anywhere;
    padding: 5px 12px; border-radius: var(--r-tam);
    background: var(--yuzey-2); border: 1px solid var(--cizgi);
    font-size: .8rem; font-weight: 500; color: var(--murekkep-2);
}
.hap svg { width: 14px; height: 14px; opacity: .6; flex: none; }
.hap-koyu   { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }
.hap-yesil  { background: var(--yesil-yumusak); color: var(--yesil); border-color: transparent; }
.hap-kirmizi{ background: var(--kirmizi-yumusak); color: var(--kirmizi); border-color: transparent; }
.hap-sari   { background: var(--sari-yumusak); color: var(--sari); border-color: transparent; }

/* ------------------------------------------------- 4. UST CUBUK ---- */

.ust {
    position: sticky; top: 0; z-index: 90;
    background: rgba(248, 247, 244, .86);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--gecis), background var(--gecis);
}
.ust.kaydi { border-bottom-color: var(--cizgi); }

.ust-ic {
    display: flex; align-items: center; gap: 20px;
    height: var(--ust-yukseklik);
}

.logo { display: flex; align-items: center; gap: 11px; flex: none; min-height: 44px; }
.logo-im { width: 34px; height: 34px; flex: none; color: var(--murekkep); }
.logo-yazi { display: flex; flex-direction: column; line-height: 1; }
.logo-ad {
    font-size: 1.14rem; font-weight: 650; letter-spacing: -.025em;
}
.logo-alt {
    font-size: .58rem; font-weight: 600; letter-spacing: .3em;
    color: var(--ikincil); margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.menu a {
    position: relative; padding: 9px 15px; border-radius: var(--r-tam);
    font-size: .93rem; font-weight: 500; color: var(--murekkep-2);
    transition: color var(--gecis), background var(--gecis);
}
.menu a:hover { background: var(--kagit-2); }
.menu a.etkin { color: var(--murekkep); font-weight: 600; }
.menu a.etkin::after {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px;
    height: 2px; background: var(--gece); border-radius: 2px;
}

.ust-sag { display: flex; align-items: center; gap: 10px; flex: none; }
.ust-tel {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .93rem; font-weight: 600; padding: 9px 4px;
}
.ust-tel svg { width: 16px; height: 16px; opacity: .55; }

/* --- kur serit: logonun sagindaki dolar / gram altin --- */
.kur-serit {
    display: flex; align-items: center; gap: 4px;
    flex: none; margin-left: 2px;
    padding: 4px 5px;
    border: 1px solid var(--cizgi); border-radius: var(--r-tam);
    background: var(--yuzey);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.kur-kalem {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 3px 8px; border-radius: var(--r-tam);
}
.kur-kalem + .kur-kalem { border-left: 1px solid var(--cizgi); border-radius: 0 var(--r-tam) var(--r-tam) 0; }
.kur-ad {
    font-size: .6rem; font-weight: 700; letter-spacing: .09em;
    color: var(--soluk);
}
.kur-deger {
    font-size: .8rem; font-weight: 650; color: var(--murekkep);
    /* deger degisince satir genisligi oynamasin */
    min-width: 5.4ch; text-align: right;
    transition: color var(--gecis);
}
.kur-kalem[data-kalem="gram"] .kur-deger { min-width: 6.2ch; }
.kur-degis {
    font-size: .62rem; font-weight: 650;
    min-width: 0; color: var(--soluk);
}
.kur-degis.yukselis { color: var(--yesil); }
.kur-degis.dusus    { color: var(--kirmizi); }
.kur-degis-bos      { display: none; }
.kur-bekle { color: var(--soluk); }
.kur-serit.kur-yenilendi .kur-deger { animation: kurParla .9s ease; }

@keyframes kurParla {
    0%   { color: var(--altin); }
    100% { color: var(--murekkep); }
}

/* altin degeri altin rengi ipucu alsin */
.kur-kalem:last-child .kur-ad { color: var(--altin); }

/* dil secici */
.dil-secici {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--yuzey-2); border: 1px solid var(--cizgi);
    border-radius: var(--r-tam); padding: 3px;
}
.dil-secici a {
    display: grid; place-items: center;
    min-width: 34px; height: 28px; padding: 0 9px;
    border-radius: var(--r-tam);
    font-size: .76rem; font-weight: 650; letter-spacing: .04em;
    color: var(--ikincil);
    transition: background var(--gecis), color var(--gecis);
}
.dil-secici a:hover { color: var(--murekkep); }
.dil-secici a[aria-current="true"] {
    background: var(--gece); color: var(--vurgu-yazi);
}

.hamburger {
    display: none; width: 42px; height: 42px; padding: 0;
    align-items: center; justify-content: center;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-s);
}
.hamburger span {
    display: block; width: 17px; height: 1.6px; background: var(--murekkep);
    border-radius: 2px; position: relative; transition: transform var(--gecis);
}
.hamburger span::before, .hamburger span::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 1.6px;
    background: var(--murekkep); border-radius: 2px; transition: transform var(--gecis), top var(--gecis);
}
.hamburger span::before { top: -5.5px; }
.hamburger span::after  { top: 5.5px; }
.hamburger[aria-expanded="true"] span { transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(-90deg); }
.hamburger[aria-expanded="true"] span::after  { top: 0; opacity: 0; }

.gezinti-katman {
    position: fixed; inset: var(--ust-yukseklik) 0 0; z-index: 89;
    background: var(--kagit); padding: 24px 20px 40px;
    overflow-y: auto; display: none;
}
.gezinti-katman.acik { display: block; }
.gezinti-katman a {
    display: block; padding: 15px 4px; font-size: 1.15rem; font-weight: 500;
    border-bottom: 1px solid var(--cizgi);
}
.gezinti-katman .dugme { width: 100%; margin-top: 22px; }

/* --------------------------------------------------- 5. KAHRAMAN ---- */

.kahraman {
    position: relative;
    min-height: min(78vh, 680px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-block: 40px clamp(28px, 4vw, 52px);
    overflow: hidden;
}

/* banner haritasi — kahramanin arkasini kaplar */
.kahraman-harita {
    position: absolute; inset: 0; z-index: 0;
    background: var(--kagit-2);
}
.kahraman-harita .leaflet-container { width: 100%; height: 100%; background: var(--kagit-2); }

/* haritanin uzerine yazinin okunmasi icin yumusak perde */
/* Perde yaziyi okunur tutar ama haritayi bogmaz:
   sol tarafta yogun, sagda neredeyse seffaf. */
.kahraman-perde {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(95deg,
            rgba(248,247,244,.97) 0%,
            rgba(248,247,244,.93) 30%,
            rgba(248,247,244,.55) 48%,
            rgba(248,247,244,.10) 68%,
            rgba(248,247,244,0) 100%),
        linear-gradient(180deg,
            rgba(248,247,244,.70) 0%,
            rgba(248,247,244,0) 16%,
            rgba(248,247,244,0) 58%,
            rgba(248,247,244,.86) 90%,
            var(--kagit) 100%);
}

.kahraman-ic { position: relative; z-index: 2; width: 100%; }

.kahraman h1 { max-width: 15ch; }
.kahraman h1 .satir {
    display: block; overflow: hidden;
    padding-bottom: .06em; margin-bottom: -.06em;   /* alt uzantilar kirpilmasin */
}
.kahraman h1 .satir > span {
    display: block;
    animation: satirGir .85s cubic-bezier(.16, 1, .3, 1) backwards;
}
.kahraman h1 .satir:nth-child(1) > span { animation-delay: .05s; }
.kahraman h1 .satir:nth-child(2) > span { animation-delay: .15s; }
.kahraman h1 .satir:nth-child(3) > span { animation-delay: .25s; }

.kahraman-alt {
    margin-top: 18px; max-width: 48ch; color: var(--murekkep-2);
    font-size: 1.04rem;
}

.kahraman-rozetler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kahraman-rozet {
    display: flex; align-items: center; gap: 11px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-m); padding: 11px 16px;
}
.kahraman-rozet svg { width: 19px; height: 19px; flex: none; color: var(--altin); }
.kahraman-rozet b { display: block; font-size: .92rem; font-weight: 650; }
.kahraman-rozet span { display: block; font-size: .78rem; color: var(--ikincil); }

/* harita uzerindeki kucuk not */
.harita-not {
    position: absolute; right: 20px; bottom: 16px; z-index: 2;
    font-size: .72rem; color: var(--ikincil);
    background: rgba(255,255,255,.8); padding: 5px 11px; border-radius: var(--r-tam);
    border: 1px solid var(--cizgi);
}

/* ----------------------------------------------------- 6. ARAMA ----- */

/* yatay arama cubugu — kahramanin ortasinda */
.arama-cubuk {
    position: relative; z-index: 3;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-l);
    box-shadow: var(--golge-l);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 4px;
    margin-top: clamp(28px, 4vw, 44px);
}

.arama-alan {
    position: relative; display: flex; flex-direction: column;
    padding: 10px 16px; border-radius: var(--r-m);
    transition: background var(--gecis);
    min-width: 0;
}
.arama-alan + .arama-alan::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 1px; background: var(--cizgi);
}
.arama-alan:hover { background: var(--yuzey-2); }
.arama-alan:hover::before,
.arama-alan:hover + .arama-alan::before { opacity: 0; }

.arama-alan label {
    font-size: .7rem; font-weight: 650; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ikincil); margin-bottom: 2px;
}
.arama-alan select {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent; padding: 0 20px 0 0;
    font: inherit; font-size: .96rem; font-weight: 500; color: var(--murekkep);
    width: 100%; cursor: pointer; text-overflow: ellipsis;
}
.arama-alan::after {
    content: ""; position: absolute; right: 16px; bottom: 17px;
    width: 8px; height: 8px; pointer-events: none;
    border-right: 1.6px solid var(--ikincil);
    border-bottom: 1.6px solid var(--ikincil);
    transform: rotate(45deg) translateY(-2px);
}
.arama-alan select:disabled { color: var(--soluk); cursor: not-allowed; }

.arama-dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 0 28px; margin: 0; border: 0; border-radius: var(--r-m);
    background: var(--vurgu); color: var(--vurgu-yazi);
    font-weight: 600; font-size: .95rem;
    transition: background var(--gecis);
}
.arama-dugme:hover { background: var(--gece-2); }
.arama-dugme svg { width: 18px; height: 18px; }

/* serbest metin arama */
.arama-kutu {
    display: flex; align-items: center; gap: 12px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-tam); padding: 6px 6px 6px 20px;
}
.arama-kutu input {
    flex: 1; border: 0; background: transparent; font: inherit;
    font-size: .98rem; color: inherit; padding: 10px 0; min-width: 0;
}
.arama-kutu input::placeholder { color: var(--soluk); }
.arama-kutu button {
    flex: none; width: 42px; height: 42px; border: 0; border-radius: var(--r-tam);
    background: var(--vurgu); color: var(--vurgu-yazi);
    display: grid; place-items: center;
}
.arama-kutu button svg { width: 18px; height: 18px; }

/* --------------------------------------------- 7. KART DESTESI ------ */

.deste {
    position: relative;
    /* Yelpazenin yan kartlari kabin disina tasar; yatayda kirp.
       overflow-x:clip dikeyi serbest birakir, golgeler ve oklar kesilmez. */
    overflow-x: clip;
    overflow-y: visible;
}
@supports not (overflow-x: clip) {
    .deste { overflow: hidden; padding-block: 8px 30px; margin-block: -8px -30px; }
}
.deste-sahne {
    position: relative;
    height: clamp(380px, 46vw, 470px);
    perspective: 1600px;
    touch-action: pan-y;
}
.deste-kart {
    position: absolute; top: 0; left: 50%;
    width: min(340px, 80vw);
    transform-origin: 50% 88%;
    transition: transform .55s cubic-bezier(.22, 1, .3, 1), opacity .4s ease;
    will-change: transform;
}
.deste-kart .ilan-kart { box-shadow: var(--golge-l); }
.deste-kart[data-etkin="0"] { z-index: 10; }
.deste-kart:not([data-etkin="1"]) .ilan-kart { pointer-events: none; }

.deste-ok {
    position: absolute; top: 50%; z-index: 20;
    width: 48px; height: 48px; border-radius: var(--r-tam);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    display: grid; place-items: center; box-shadow: var(--golge-m);
    transform: translateY(-50%); transition: all var(--gecis);
}
.deste-ok:hover { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }
.deste-ok svg { width: 18px; height: 18px; }
.deste-ok.geri { left: max(8px, calc(50% - min(560px, 44vw))); }
.deste-ok.ileri { right: max(8px, calc(50% - min(560px, 44vw))); }

.deste-sayac {
    display: flex; justify-content: center; gap: 7px; margin-top: 26px;
}
/* Görsel olarak 7px, dokunma alanı 40px: nokta ::after ile büyütülür. */
.deste-nokta {
    position: relative;
    width: 7px; height: 7px; border-radius: var(--r-tam); border: 0; padding: 0;
    background: var(--cizgi-koyu); transition: all var(--gecis);
}
.deste-nokta::after {
    content: ""; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px;
}
.deste-nokta[aria-current="true"] { background: var(--gece); width: 22px; }
.deste-sayac { padding-block: 4px; }

/* ------------------------------------------------ 8. ILAN KARTI ----- */

.ilan-kart {
    display: flex; flex-direction: column;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-l);
    overflow: hidden;
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
    height: 100%;
}
.ilan-kart:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-m);
    border-color: var(--cizgi-koyu);
}

.ilan-gorsel {
    position: relative; aspect-ratio: 7 / 5; background: var(--cz-zemin);
    overflow: hidden;
}
.ilan-gorsel > img,
.ilan-gorsel > .cizim { width: 100%; height: 100%; object-fit: cover; }

.ilan-rozet-sol, .ilan-rozet-sag {
    position: absolute; top: 12px; display: flex; gap: 6px; z-index: 2;
}
.ilan-rozet-sol { left: 12px; }
.ilan-rozet-sag { right: 12px; }
.ilan-rozet {
    padding: 5px 11px; border-radius: var(--r-tam);
    font-size: .72rem; font-weight: 650; letter-spacing: .04em;
    background: rgba(255, 255, 255, .93); color: var(--murekkep);
    backdrop-filter: blur(6px);
}
.ilan-rozet.koyu   { background: rgba(33, 40, 66, .92); color: var(--vurgu-yazi); }
.ilan-rozet.altin  { background: var(--altin); color: #fff; }

.ilan-govde { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 10px; }

.ilan-fiyat {
    font-size: 1.32rem; font-weight: 650; letter-spacing: -.025em;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ilan-fiyat .birim { font-size: .78rem; font-weight: 500; color: var(--ikincil); letter-spacing: 0; }

.ilan-baslik {
    overflow-wrap: break-word;
    font-size: .97rem; font-weight: 500; line-height: 1.45; color: var(--murekkep-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.ilan-konum {
    display: flex; align-items: center; gap: 7px;
    font-size: .86rem; color: var(--ikincil);
}
.ilan-konum svg { width: 15px; height: 15px; flex: none; opacity: .65; }

.ilan-ozet {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto;
    padding-top: 13px; border-top: 1px solid var(--cizgi);
    font-size: .84rem; color: var(--murekkep-2);
}
.ilan-ozet span { display: inline-flex; align-items: center; gap: 6px; }
.ilan-ozet svg { width: 15px; height: 15px; opacity: .5; flex: none; }

.ilan-kart.yatay { flex-direction: row; }
.ilan-kart.yatay .ilan-gorsel { width: 38%; aspect-ratio: auto; flex: none; }
.ilan-kart.yatay .ilan-govde { padding: 16px 18px; }

/* ----------------------------------------- 9. LISTE + FILTRE -------- */

.liste-duzen {
    display: grid; grid-template-columns: 286px minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px); align-items: start;
}

.filtre {
    position: sticky; top: calc(var(--ust-yukseklik) + 16px);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-l); padding: 20px;
    max-height: calc(100vh - var(--ust-yukseklik) - 32px);
    overflow-y: auto; scrollbar-width: thin;
}
.filtre-basi {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.filtre-basi h2 { font-size: 1rem; }
.filtre-temizle { font-size: .82rem; color: var(--ikincil); text-decoration: underline; background: none; border: 0; padding: 0; }
.filtre-temizle:hover { color: var(--kirmizi); }

.filtre-grup { border-top: 1px solid var(--cizgi); padding: 15px 0; }
.filtre-grup:first-of-type { border-top: 0; padding-top: 0; }
.filtre-grup > summary {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .88rem; font-weight: 600; cursor: pointer; list-style: none;
    padding: 2px 0;
}
.filtre-grup > summary::-webkit-details-marker { display: none; }
.filtre-grup > summary::after {
    content: ""; width: 7px; height: 7px;
    border-right: 1.6px solid var(--ikincil); border-bottom: 1.6px solid var(--ikincil);
    transform: rotate(45deg) translateY(-2px); transition: transform var(--gecis);
}
.filtre-grup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filtre-govde { padding-top: 13px; display: flex; flex-direction: column; gap: 9px; }

.alan-sira { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.giris, .secim {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--cizgi); border-radius: var(--r-s);
    background: var(--yuzey-2); font: inherit; font-size: .9rem; color: inherit;
}
.secim {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2379736A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}
.giris:focus, .secim:focus { background-color: var(--yuzey); border-color: var(--gece); }
.giris::placeholder { color: var(--soluk); }

.onay {
    display: flex; align-items: center; gap: 10px;
    font-size: .89rem; cursor: pointer; padding: 2px 0;
}
.onay input {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex: none; margin: 0;
    border: 1.5px solid var(--cizgi-koyu); border-radius: 5px;
    background: var(--yuzey-2); transition: all var(--gecis);
}
.onay input:checked {
    background: var(--vurgu) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3.2L11 1.5' fill='none' stroke='%23F6F2EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
    border-color: var(--vurgu);
}
.onay:hover input { border-color: var(--gece); }

/* liste ust cubugu */
.liste-ust {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 18px;
}
.liste-sayi { font-size: .95rem; color: var(--ikincil); }
.liste-sayi b { color: var(--murekkep); font-weight: 650; }
.liste-araclar { display: flex; align-items: center; gap: 10px; }

.sirala {
    display: flex; align-items: center; gap: 8px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-tam); padding: 3px 4px 3px 15px;
    font-size: .88rem;
}
.sirala select {
    appearance: none; -webkit-appearance: none; border: 0; background: transparent;
    font: inherit; font-size: .88rem; font-weight: 500; padding: 8px 26px 8px 0;
    cursor: pointer; color: inherit;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2379736A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 10px;
}

/* etkin filtre cipleri */
.cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 14px; border-radius: var(--r-tam);
    background: var(--yuzey); border: 1px solid var(--cizgi-koyu);
    font-size: .84rem; font-weight: 500;
}
.cip-sil {
    width: 19px; height: 19px; border: 0; border-radius: var(--r-tam); padding: 0;
    background: var(--kagit-2); display: grid; place-items: center;
    transition: background var(--gecis);
}
.cip-sil:hover { background: var(--kirmizi); color: #fff; }
.cip-sil svg { width: 9px; height: 9px; }

/* sayfalama */
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 44px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
    min-width: 40px; height: 40px; padding-inline: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-s); font-size: .9rem; font-weight: 500;
    border: 1px solid transparent;
}
.sayfalama a:hover { background: var(--yuzey); border-color: var(--cizgi); }
.sayfalama .simdiki { background: var(--vurgu); color: var(--vurgu-yazi); font-weight: 650; }
.sayfalama .bosluk { color: var(--soluk); min-width: 24px; padding-inline: 0; }

/* bos sonuc */
.bos-sonuc {
    text-align: center; padding: clamp(48px, 7vw, 92px) 24px;
    background: var(--yuzey); border: 1px dashed var(--cizgi-koyu);
    border-radius: var(--r-l);
}
.bos-sonuc svg { width: 48px; height: 48px; margin: 0 auto 18px; color: var(--soluk); }
.bos-sonuc p { color: var(--ikincil); max-width: 44ch; margin-inline: auto; }

/* filtre acma dugmesi ve alt cubuk sadece mobilde */
.filtre-ac { display: none; }
.filtre-kapat-cubuk { display: none; }

/* ----------------------------------------------------- 10. HARITA --- */

.harita-bolum { position: relative; }

.harita-kutu {
    position: relative;
    border: 1px solid var(--cizgi); border-radius: var(--r-l);
    overflow: hidden; background: var(--kagit-2);
    height: clamp(420px, 62vh, 660px);
}
.harita-kutu.kapali { display: none; }

.harita-ac-cubuk {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.harita-anahtar {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-tam); padding: 9px 18px 9px 14px;
    font-size: .9rem; font-weight: 600;
    transition: all var(--gecis);
}
.harita-anahtar:hover { border-color: var(--gece); }
.harita-anahtar svg { width: 17px; height: 17px; }
.harita-anahtar[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }

/* liste + harita yan yana */
.harita-duzen {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(16px, 2vw, 24px); align-items: start;
}
.harita-duzen .harita-kutu {
    position: sticky; top: calc(var(--ust-yukseklik) + 16px);
    height: calc(100vh - var(--ust-yukseklik) - 32px);
}
/* Harita acikken kartlar tek sutun ve yatay: harita yaninda kompakt liste. */
.harita-duzen .harita-liste {
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
.harita-duzen .ilan-kart { flex-direction: row; }
.harita-duzen .ilan-gorsel {
    width: 38%; min-width: 130px; max-width: 200px;
    aspect-ratio: auto; flex: none;
}
.harita-duzen .ilan-govde { padding: 14px 16px; gap: 7px; }
.harita-duzen .ilan-fiyat { font-size: 1.12rem; }
.harita-duzen .ilan-baslik { -webkit-line-clamp: 2; font-size: .9rem; }
.harita-duzen .ilan-ozet { padding-top: 10px; font-size: .79rem; }
.harita-duzen .ilan-rozet-sag { display: none; }

@media (max-width: 1100px) {
    .harita-duzen .harita-liste {
        grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    }
    .harita-duzen .ilan-kart { flex-direction: column; }
    .harita-duzen .ilan-gorsel { width: 100%; max-width: none; aspect-ratio: 7 / 5; }
}

/* Leaflet gorunum uyarlamalari */
.leaflet-container {
    font: inherit;
    background: var(--kagit-2);
}
/* OpenStreetMap dosemeleri renkli gelir; site paletine cekiyoruz:
   doygunlugu dusur, hafif sicaklik ver, parlakligi biraz yukselt. */
.leaflet-tile {
    filter: saturate(.34) sepia(.32) brightness(1.05) contrast(.94);
}
.kahraman-harita .leaflet-tile {
    filter: saturate(.3) sepia(.34) brightness(1.06) contrast(.93);
}
.leaflet-control-attribution {
    background: rgba(255, 255, 255, .8) !important;
    font-size: 10px !important; color: var(--soluk) !important;
    padding: 2px 7px !important; border-radius: var(--r-tam) 0 0 0;
}
.leaflet-control-attribution a { color: var(--ikincil) !important; }
.leaflet-bar {
    border: 1px solid var(--cizgi) !important;
    border-radius: var(--r-m) !important; overflow: hidden;
    box-shadow: var(--golge-m) !important;
}
.leaflet-bar a {
    background: var(--yuzey) !important; color: var(--murekkep) !important;
    border-bottom-color: var(--cizgi) !important;
    width: 34px !important; height: 34px !important; line-height: 34px !important;
    font-size: 18px !important;
}
.leaflet-bar a:hover { background: var(--yuzey-2) !important; }

/* fiyat balonu */
.harita-balon {
    background: transparent; border: 0;
}
.balon {
    display: inline-flex; align-items: center; white-space: nowrap;
    background: var(--vurgu); color: var(--vurgu-yazi);
    padding: 6px 12px; border-radius: var(--r-s);
    font-size: .8rem; font-weight: 650; letter-spacing: -.01em;
    box-shadow: var(--golge-m);
    transform: translate(-50%, -100%);
    position: relative;
    transition: background var(--gecis), transform var(--gecis);
}
.balon::after {
    content: ""; position: absolute; left: 50%; bottom: -5px;
    width: 10px; height: 10px; background: inherit;
    transform: translateX(-50%) rotate(45deg); border-radius: 0 0 2px 0;
}
.balon:hover { background: var(--altin); }
.harita-balon.etkin .balon,
.balon.etkin {
    background: var(--altin); color: #fff;
    transform: translate(-50%, -100%) scale(1.08);
    z-index: 500;
}
.balon.yaklasik { background: var(--gece-3); opacity: .92; }

/* kume */
.kume {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: var(--r-tam);
    background: var(--vurgu); color: var(--vurgu-yazi);
    font-size: .92rem; font-weight: 650;
    box-shadow: var(--golge-m);
    border: 3px solid rgba(255, 255, 255, .7);
}
.kume.buyuk { width: 58px; height: 58px; font-size: 1rem; }

/* harita ustundeki ilan onizleme */
.harita-onizleme {
    position: absolute; z-index: 600; left: 50%; bottom: 20px;
    transform: translateX(-50%);
    width: min(330px, calc(100% - 32px));
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-m); box-shadow: var(--golge-l);
    overflow: hidden; display: none;
}
.harita-onizleme.acik { display: block; animation: yukariGir .28s cubic-bezier(.16,1,.3,1); }
.harita-onizleme-gorsel { aspect-ratio: 16 / 9; background: var(--cz-zemin); }
.harita-onizleme-gorsel > * { width: 100%; height: 100%; object-fit: cover; }
.harita-onizleme-govde { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; }
.harita-onizleme-govde .ilan-fiyat { font-size: 1.1rem; }
.harita-onizleme-alt { display: flex; gap: 8px; margin-top: 4px; }
.harita-onizleme-alt .dugme { flex: 1; padding: 9px 14px; font-size: .85rem; }
.onizleme-kapat {
    position: absolute; top: 9px; right: 9px; z-index: 2;
    width: 28px; height: 28px; border: 0; border-radius: var(--r-tam);
    background: rgba(255,255,255,.92); display: grid; place-items: center;
    box-shadow: var(--golge-s);
}
.onizleme-kapat svg { width: 11px; height: 11px; }

/* harita ust araclari */
.harita-araclar {
    position: absolute; top: 14px; left: 14px; right: 14px; z-index: 550;
    display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none;
}
.harita-araclar > * { pointer-events: auto; }
.harita-arac {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
    border: 1px solid var(--cizgi); border-radius: var(--r-tam);
    padding: 8px 15px; font-size: .84rem; font-weight: 600;
    box-shadow: var(--golge-s); transition: all var(--gecis);
}
.harita-arac:hover { border-color: var(--gece); }
.harita-arac[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }
.harita-arac svg { width: 14px; height: 14px; }

.harita-yukleniyor {
    position: absolute; inset: 0; z-index: 400; display: grid; place-items: center;
    background: var(--kagit-2); color: var(--ikincil); font-size: .88rem;
}
.harita-yukleniyor[hidden] { display: none; }

/* ----------------------------------------------- 11. ILAN DETAYI ---- */

.detay-duzen {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(24px, 3vw, 44px); align-items: start;
}

.galeri {
    border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--cizgi);
    background: var(--cz-zemin);
}
.galeri-ana { aspect-ratio: 16 / 10; position: relative; }
/* Kroki gosterilen ilanlarda SVG'nin kendi orani kullanilir, kirpilma olmaz. */
.galeri-ana.kroki { aspect-ratio: 7 / 5; }
.galeri-ana > img, .galeri-ana > .cizim { width: 100%; height: 100%; object-fit: cover; }
.galeri-serit {
    display: flex; gap: 8px; padding: 8px; overflow-x: auto;
    background: var(--yuzey); scrollbar-width: thin;
}
.galeri-serit button {
    flex: none; width: 88px; aspect-ratio: 4 / 3; padding: 0;
    border: 2px solid transparent; border-radius: var(--r-s); overflow: hidden;
    background: var(--cz-zemin);
}
.galeri-serit button[aria-current="true"] { border-color: var(--gece); }
.galeri-serit img { width: 100%; height: 100%; object-fit: cover; }

.detay-baslik { margin-block: 26px 10px; }
.detay-fiyat {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px;
    margin-bottom: 14px;
}
.detay-fiyat .tutar { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 650; letter-spacing: -.03em; }
.detay-fiyat .m2 { font-size: .92rem; color: var(--ikincil); }

.detay-haplar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }

.detay-metin { font-size: 1.02rem; color: var(--murekkep-2); line-height: 1.72; }
.detay-metin p { margin-bottom: 1.1em; }

.ozellik-grup { margin-top: 30px; }
.ozellik-grup h3 {
    font-size: .8rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ikincil); margin-bottom: 12px;
}
.ozellik-tablo {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-m); overflow: hidden;
}
.ozellik-tablo div {
    display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
    gap: 10px 16px; padding: 12px 18px; font-size: .92rem;
    border-bottom: 1px solid var(--cizgi);
    align-items: start;
}
/* Uzun e-posta ve adresler kartin disina tasmasin. */
.ozellik-tablo dd, .ozellik-tablo dt { min-width: 0; overflow-wrap: anywhere; }
.ozellik-tablo dd a { overflow-wrap: anywhere; }

/* Dar kolonda (yan sutun) etiket ve deger alt alta gecsin. */
.yan-kart .ozellik-tablo div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.yan-kart .ozellik-tablo dt { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.ozellik-tablo div:last-child { border-bottom: 0; }
.ozellik-tablo div:nth-child(odd) { background: var(--yuzey-2); }
.ozellik-tablo dt { color: var(--ikincil); }
.ozellik-tablo dd { margin: 0; font-weight: 500; }
.ozellik-tablo .var { color: var(--yesil); font-weight: 600; }
.ozellik-tablo .yok { color: var(--soluk); }

/* yan sutun */
.yan-kart {
    position: sticky; top: calc(var(--ust-yukseklik) + 16px);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-l); padding: 22px;
}
.yan-kart + .yan-kart { margin-top: 16px; }
.yan-kart h3 { margin-bottom: 6px; }
.yan-kart > p { font-size: .9rem; color: var(--ikincil); margin-bottom: 16px; }

.danisman {
    display: flex; align-items: center; gap: 13px;
    padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--cizgi);
}
.danisman-im {
    width: 46px; height: 46px; border-radius: var(--r-tam); flex: none;
    background: var(--vurgu); color: var(--vurgu-yazi);
    display: grid; place-items: center; font-weight: 650; font-size: 1rem;
}
.danisman > span:last-child { min-width: 0; }
.danisman b { display: block; font-size: .96rem; overflow-wrap: anywhere; }
.danisman span { display: block; font-size: .82rem; color: var(--ikincil); }

.detay-harita { height: 240px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--cizgi); }
.harita-kesinlik { font-size: .78rem; color: var(--ikincil); margin-top: 9px; display: flex; align-items: center; gap: 6px; }
.harita-kesinlik svg { width: 13px; height: 13px; flex: none; }

/* ------------------------------------------ 12. BOLUM KALIPLARI ----- */

/* ---------------------------------------------- surec seridi ------- */

.surec-basi {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 64px); align-items: start;
    margin-bottom: clamp(38px, 5vw, 64px);
}
.surec-baslik {
    font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
    line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
}
/* Basligin ikinci yarisi soluk: iki tonlu baslik */
.surec-baslik .soluk { color: var(--soluk); }
.surec-lead { color: var(--ikincil); font-size: 1.02rem; padding-top: .5em; }

.surec-serit {
    --adim-g: clamp(132px, 14vw, 182px);
    --kutu-g: 62px;
    display: flex; align-items: flex-start; gap: 0;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.surec-adim {
    flex: 0 0 auto; width: var(--adim-g);
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* ikon kutusu + numara rozeti */
.surec-kutu {
    position: relative; width: 62px; height: 62px; flex: none;
    display: grid; place-items: center;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: 16px; box-shadow: var(--golge-s);
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.surec-kutu svg { width: 24px; height: 24px; color: var(--murekkep-2); }
.surec-no {
    position: absolute; top: -10px; right: -12px;
    min-width: 26px; height: 22px; padding: 0 7px;
    display: grid; place-items: center; border-radius: 7px;
    background: var(--gece); color: var(--vurgu-yazi);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}

/* son adim dolu: varis noktasi */
.surec-adim.varis .surec-kutu {
    background: var(--gece); border-color: var(--gece);
}
.surec-adim.varis .surec-kutu svg { color: var(--vurgu-yazi); }
.surec-adim.varis .surec-no { background: var(--altin); color: #fff; }

.surec-ad {
    margin-top: 20px; font-size: .98rem; font-weight: 650; letter-spacing: -.01em;
}
.surec-not { margin-top: 6px; font-size: .84rem; color: var(--ikincil); max-width: 20ch; }

/* Baglanti cizgisi. Adim sutunu ikondan genis oldugu icin cizgi
   negatif kenar bosluguyla kutulara kadar uzatilir. */
.surec-cizgi {
    flex: 1 1 auto; height: 2px; margin-top: 30px;
    margin-inline: calc((var(--kutu-g) - var(--adim-g)) / 2 + 12px);
    background: var(--cizgi); border-radius: 2px;
    position: relative; overflow: hidden;
}
.surec-cizgi::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--gece), var(--gece-3));
    transform: scaleX(0); transform-origin: left center;
}

/* alt bilgi satiri */
.surec-alt {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--cizgi);
    font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
.surec-alt .sol { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.surec-alt .sol::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gece);
}
.surec-alt .sag { color: var(--soluk); }

/* --- animasyon: gorununce sirayla gir --- */
.surec-adim { opacity: 0; transform: translateY(14px); }
.surec.oynat .surec-adim {
    animation: surecGir .5s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(var(--sira) * .13s);
}
.surec.oynat .surec-cizgi::after {
    animation: surecCizgi .5s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: calc(var(--sira) * .13s + .18s);
}
@keyframes surecGir  { to { opacity: 1; transform: translateY(0); } }
@keyframes surecCizgi { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .surec-adim { opacity: 1; transform: none; }
    .surec .surec-cizgi::after { transform: scaleX(1); }
}

/* dar ekran: dikey zaman cizgisi */
@media (max-width: 900px) {
    .surec-basi { grid-template-columns: 1fr; gap: 16px; }
    .surec-lead { padding-top: 0; }

    .surec-serit { flex-direction: column; align-items: stretch; gap: 0; }
    .surec-adim {
        width: auto; flex-direction: row; align-items: flex-start;
        text-align: left; gap: 18px;
    }
    .surec-kutu { width: 52px; height: 52px; border-radius: 14px; }
    .surec-kutu svg { width: 21px; height: 21px; }
    .surec-no { top: -8px; right: -10px; height: 20px; font-size: .64rem; }
    .surec-ad { margin-top: 2px; }
    .surec-not { max-width: none; }
    .surec-adim > div { padding-bottom: 4px; }

    .surec-cizgi {
        flex: none; width: 2px; height: 26px;
        margin: 0 0 0 25px; margin-inline: 25px 0;
    }
    .surec-cizgi::after { transform: scaleY(0); transform-origin: top center; }
    .surec.oynat .surec-cizgi::after { animation-name: surecCizgiDikey; }
    @keyframes surecCizgiDikey { to { transform: scaleY(1); } }
}

@media (max-width: 420px) {
    .surec-adim { gap: 14px; }
    .surec-cizgi { margin-left: 21px; height: 22px; }
}

/* nasil calisir (eski kart duzeni — baska yerlerde kullaniliyor) */
.adimlar { counter-reset: adim; }
.adim {
    position: relative; background: var(--yuzey);
    border: 1px solid var(--cizgi); border-radius: var(--r-l);
    padding: 26px 24px 24px;
}
.adim::before {
    counter-increment: adim; content: "0" counter(adim);
    display: block; font-size: .78rem; font-weight: 650; letter-spacing: .14em;
    color: var(--altin); margin-bottom: 14px;
}
.adim h3 { margin-bottom: 8px; }
.adim p { font-size: .93rem; color: var(--ikincil); }

/* ilce karti */
.ilce-kart {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 168px; padding: 20px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-l); overflow: hidden;
    transition: all var(--gecis);
}
.ilce-kart:hover { border-color: var(--gece); transform: translateY(-3px); }
.ilce-kart .harita-siluet {
    position: absolute; inset: 0; opacity: .1; pointer-events: none;
}
.ilce-kart b { position: relative; font-size: 1.1rem; font-weight: 650; }
.ilce-kart span { position: relative; font-size: .84rem; color: var(--ikincil); margin-top: 3px; }

/* cip bulutu */
.cip-bulut { display: flex; flex-wrap: wrap; gap: 9px; }
.cip-bulut a {
    padding: 9px 17px; border-radius: var(--r-tam);
    background: var(--yuzey); border: 1px solid var(--cizgi);
    font-size: .89rem; font-weight: 500;
    transition: all var(--gecis);
}
.cip-bulut a:hover { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }

/* guven blogu */
.guven {
    background: var(--vurgu); color: var(--vurgu-yazi);
    border-radius: var(--r-xl); padding: clamp(32px, 4vw, 56px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px); align-items: center;
}
.guven h2 { color: var(--vurgu-yazi); }
.guven p { color: rgba(248, 247, 244, .78); margin-top: 14px; }
.guven-liste { display: flex; flex-direction: column; gap: 14px; }
.guven-liste li {
    display: flex; gap: 13px; align-items: flex-start;
    padding-bottom: 14px; border-bottom: 1px solid rgba(248, 247, 244, .14);
}
.guven-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.guven-liste svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--altin); }
.guven-liste b { display: block; font-size: .96rem; }
.guven-liste span { display: block; font-size: .87rem; color: rgba(248, 247, 244, .68); margin-top: 3px; }

/* SSS */
.sss-liste { border-top: 1px solid var(--cizgi); }
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 4px; cursor: pointer; list-style: none;
    font-size: 1.02rem; font-weight: 550;
}
.sss-oge > summary::-webkit-details-marker { display: none; }
.sss-oge > summary::after {
    content: ""; flex: none; width: 13px; height: 13px; position: relative;
    background:
        linear-gradient(var(--ikincil), var(--ikincil)) center / 13px 1.6px no-repeat,
        linear-gradient(var(--ikincil), var(--ikincil)) center / 1.6px 13px no-repeat;
    transition: transform var(--gecis);
}
.sss-oge[open] > summary::after { transform: rotate(45deg); }
.sss-cevap { padding: 0 4px 22px; color: var(--ikincil); max-width: 72ch; }

/* firma karti */
.firma-kart {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-l); padding: 26px;
}
.firma-im {
    width: 62px; height: 62px; border-radius: var(--r-m);
    background: var(--vurgu); color: var(--vurgu-yazi);
    display: grid; place-items: center;
}
.firma-im svg { width: 30px; height: 30px; }
.firma-bilgi { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; font-size: .9rem; }
.firma-bilgi span { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--ikincil);
    overflow-wrap: anywhere; }
.firma-bilgi svg { width: 15px; height: 15px; opacity: .6; flex: none; margin-top: 3px; }

/* bolge sayfasi metni */
.bolge-metin { max-width: 74ch; color: var(--murekkep-2); }
.bolge-metin h2 { margin-block: 30px 12px; }
.bolge-metin h2:first-child { margin-top: 0; }
.bolge-metin ul { margin: 0 0 1.1em; padding-left: 4px; }
.bolge-metin li {
    position: relative; padding-left: 20px; margin-bottom: 7px; color: var(--ikincil);
}
.bolge-metin li::before {
    content: ""; position: absolute; left: 2px; top: .68em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--altin);
}

/* komsu bolge baglantilari */
.komsu-liste { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------- kurumsal (hakkimizda) -------- */

.kurumsal-acilis {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 56px); align-items: end;
    margin-block: 26px clamp(32px, 4vw, 52px);
}
.kurumsal-lead p { color: var(--ikincil); font-size: 1.02rem; }
.kurumsal-lead p + p { margin-top: 14px; }

.kurumsal-sayilar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1px; background: var(--cizgi);
    border: 1px solid var(--cizgi); border-radius: var(--r-l); overflow: hidden;
}
.kurumsal-sayilar > div { background: var(--yuzey); padding: 22px 24px; }
.kurumsal-sayilar b {
    display: block; font-size: 1.9rem; font-weight: 650; letter-spacing: -.03em;
    line-height: 1.1;
}
.kurumsal-sayilar span {
    display: block; font-size: .84rem; color: var(--ikincil); margin-top: 6px;
}

/* ilke kartlari */
.ilke-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-l); padding: 28px 26px;
}
.ilke-no {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
    color: var(--altin); margin-bottom: 14px;
}
.ilke-kart h3 { font-size: 1.12rem; margin-bottom: 10px; }
.ilke-kart p { color: var(--ikincil); font-size: .93rem; }

/* hizmet kartlari */
.hizmet-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--r-l); padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
}
.hizmet-im {
    width: 44px; height: 44px; border-radius: var(--r-m); flex: none;
    background: var(--kagit-2); color: var(--gece);
    display: grid; place-items: center; margin-bottom: 6px;
}
.hizmet-im svg { width: 21px; height: 21px; }
.hizmet-kart h3 { font-size: 1.04rem; }
.hizmet-kart p { color: var(--ikincil); font-size: .91rem; }
.hizmet-bag {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px;
    font-size: .86rem; font-weight: 600; color: var(--gece);
}
.hizmet-bag svg { width: 15px; height: 15px; transition: transform var(--gecis); }
.hizmet-bag:hover svg { transform: translateX(3px); }

@media (max-width: 860px) {
    .kurumsal-acilis { grid-template-columns: 1fr; gap: 18px; align-items: start; }
}

/* ------------------------------------------- kesif sayfasi ---------- */

.kesif-adim {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--cizgi);
}
.kesif-adim h3 { font-size: 1.02rem; }
.kesif-no {
    width: 26px; height: 26px; flex: none; border-radius: 8px;
    background: var(--gece); color: var(--vurgu-yazi);
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700;
}

.kesif-liste { counter-reset: kesif; display: flex; flex-direction: column; gap: 16px; }
.kesif-liste li { position: relative; padding-left: 34px; }
.kesif-liste li::before {
    counter-increment: kesif; content: counter(kesif);
    position: absolute; left: 0; top: 1px;
    width: 23px; height: 23px; border-radius: 50%;
    background: var(--kagit-2); color: var(--murekkep-2);
    display: grid; place-items: center;
    font-size: .74rem; font-weight: 700;
}
.kesif-liste b { display: block; font-size: .93rem; font-weight: 600; }
.kesif-liste span { display: block; font-size: .84rem; color: var(--ikincil); margin-top: 3px; }

.kesif-bakim { display: flex; flex-direction: column; gap: 11px; }
.kesif-bakim li { display: flex; align-items: flex-start; gap: 11px; font-size: .89rem; }
.kesif-bakim svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--altin); }

/* kesif cagri seridi (ana sayfa) */
.kesif-serit {
    display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
    gap: clamp(20px, 3vw, 44px); align-items: center;
    background: var(--gece); color: var(--vurgu-yazi);
    border-radius: var(--r-xl); padding: clamp(28px, 4vw, 52px);
}
.kesif-serit h2 { color: var(--vurgu-yazi); }
.kesif-serit p { color: rgba(240, 231, 213, .78); margin-top: 12px; max-width: 54ch; }
.kesif-serit .ust-etiket { color: rgba(240, 231, 213, .55); }
.kesif-serit .ust-etiket::before { background: rgba(240, 231, 213, .3); }
.kesif-serit-alt { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.kesif-serit .dugme-acik {
    background: var(--vurgu-yazi); color: var(--gece); border-color: transparent;
}
.kesif-serit .dugme-acik:hover { background: #fff; border-color: transparent; }
.kesif-serit .dugme-bos {
    border-color: rgba(240, 231, 213, .3); color: var(--vurgu-yazi);
}
.kesif-serit .dugme-bos:hover { background: rgba(240, 231, 213, .1); border-color: var(--vurgu-yazi); }

.kesif-rozet {
    display: flex; flex-direction: column; gap: 14px;
    border-left: 1px solid rgba(240, 231, 213, .16); padding-left: clamp(20px, 3vw, 40px);
}
.kesif-rozet div { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.kesif-rozet svg { width: 19px; height: 19px; flex: none; color: var(--altin); }
.kesif-rozet b { display: block; font-size: .92rem; }
.kesif-rozet span { display: block; font-size: .8rem; color: rgba(240, 231, 213, .62); }

@media (max-width: 860px) {
    .kesif-serit { grid-template-columns: 1fr; }
    .kesif-rozet { border-left: 0; padding-left: 0; border-top: 1px solid rgba(240,231,213,.16); padding-top: 22px; }
}

/* ------------------------------------------------------ 13. FORM ---- */

.form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-alan { display: flex; flex-direction: column; gap: 6px; }
.form-alan.genis { grid-column: 1 / -1; }
.form-alan label { font-size: .84rem; font-weight: 600; }
.form-alan .ipucu { font-size: .78rem; color: var(--ikincil); }
.form-alan .hata { font-size: .8rem; color: var(--kirmizi); font-weight: 500; }
.form-alan .giris[aria-invalid="true"] { border-color: var(--kirmizi); }
textarea.giris { resize: vertical; min-height: 104px; font-family: inherit; }

.form-onay {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .84rem; color: var(--ikincil); margin-top: 4px;
}
.form-onay input { margin-top: 2px; }
.form-onay a { text-decoration: underline; }

.bildirim {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-radius: var(--r-m);
    font-size: .92rem; margin-bottom: 20px;
}
.bildirim svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.bildirim-basarili { background: var(--yesil-yumusak); color: var(--yesil); }
.bildirim-hata     { background: var(--kirmizi-yumusak); color: var(--kirmizi); }
.bildirim-bilgi    { background: var(--kagit-2); color: var(--murekkep-2); }

/* serit bildirim */
.serit {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: 120; max-width: calc(100% - 32px);
    box-shadow: var(--golge-l); margin: 0;
    animation: yukariGir .3s cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------- 14. ALT BILGI ---- */

.alt {
    background: var(--vurgu); color: rgba(248, 247, 244, .72);
    padding-block: clamp(44px, 5vw, 72px) 28px; margin-top: clamp(48px, 6vw, 88px);
}
.alt-izgara {
    display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px); padding-bottom: 36px;
}
.alt-marka .logo-ad, .alt-marka .logo-alt { color: var(--vurgu-yazi); }
.alt-marka .logo-im { color: var(--vurgu-yazi); }
.alt-aciklama { font-size: .9rem; margin-top: 16px; max-width: 40ch; }
.alt h4 {
    font-size: .76rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
    color: var(--vurgu-yazi); margin-bottom: 16px;
}
.alt li { margin-bottom: 9px; }
.alt a { font-size: .91rem; transition: color var(--gecis); }
.alt a:hover { color: var(--vurgu-yazi); }
.alt-iletisim li { display: flex; gap: 10px; align-items: flex-start; font-size: .91rem;
    overflow-wrap: anywhere; }
.alt-iletisim svg { width: 15px; height: 15px; flex: none; margin-top: 4px; opacity: .6; }

.sosyal { display: flex; gap: 9px; margin-top: 20px; }
.sosyal a {
    width: 38px; height: 38px; border-radius: var(--r-tam);
    border: 1px solid rgba(248, 247, 244, .2);
    display: grid; place-items: center; transition: all var(--gecis);
}
.sosyal a:hover { background: var(--vurgu-yazi); color: var(--vurgu); border-color: var(--vurgu-yazi); }
.sosyal svg { width: 16px; height: 16px; }

.alt-son {
    display: flex; flex-wrap: wrap; gap: 12px 26px;
    justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid rgba(248, 247, 244, .14);
    font-size: .84rem;
}
.alt-son nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* yuzen whatsapp */
.wa {
    position: fixed; right: 20px; bottom: 20px; z-index: 100;
    width: 56px; height: 56px; border-radius: var(--r-tam);
    background: #25D366; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .36);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.wa:hover { transform: scale(1.06); box-shadow: 0 12px 30px rgba(37, 211, 102, .46); }
.wa svg { width: 28px; height: 28px; }
.wa::after {
    content: attr(data-etiket);
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--vurgu); color: var(--vurgu-yazi);
    padding: 8px 14px; border-radius: var(--r-s); font-size: .84rem; font-weight: 500;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--gecis);
}
.wa:hover::after { opacity: 1; }


/* kirinti yolu */
.kirinti {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .84rem; color: var(--ikincil);
}
.kirinti a:hover { color: var(--murekkep); text-decoration: underline; }
.kirinti-ayrac { color: var(--soluk); }
.kirinti [aria-current] { color: var(--murekkep-2); font-weight: 500; }

/* haritada secili kart */
.ilan-kart.vurgulu {
    border-color: var(--altin);
    box-shadow: 0 0 0 2px rgba(169, 131, 74, .25), var(--golge-m);
}

/* metin ici kucuk ikon */
.satir-ikon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; opacity: .6; }

/* iletisim sayfasindaki gomulu harita */
.detay-harita iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------- 15. HAREKET --- */

@keyframes satirGir {
    from { transform: translateY(105%); }
    to   { transform: translateY(0); }
}
@keyframes yukariGir {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes belir {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* gorunurluk animasyonu — JS .gor sinifini ekler */
.gir { opacity: 0; }
.gir.gor { animation: belir .6s cubic-bezier(.16, 1, .3, 1) forwards; }
.gir.gor:nth-child(2) { animation-delay: .06s; }
.gir.gor:nth-child(3) { animation-delay: .12s; }
.gir.gor:nth-child(4) { animation-delay: .18s; }
.gir.gor:nth-child(5) { animation-delay: .24s; }
.gir.gor:nth-child(6) { animation-delay: .3s; }

/* cizim animasyonu — cizgiler soldan saga cizilir */
.cizim .cizgi {
    opacity: 0;
    animation: cizgiBelir .5s ease forwards;
    animation-delay: var(--gecikme, 0s);
}
.cizim .nokta, .cizim .yazi {
    opacity: 0;
    animation: cizgiBelir .4s ease forwards;
    animation-delay: var(--gecikme, 0s);
}
@keyframes cizgiBelir { to { opacity: 1; } }

.cizim.cizildi .cizgi,
.cizim.cizildi .nokta,
.cizim.cizildi .yazi { opacity: 1; animation: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .gir { opacity: 1; }
    .cizim .cizgi, .cizim .nokta, .cizim .yazi { opacity: 1; }
    .deste-kart { transition: none; }
}

/* --------------------------------------------------- 16. DUYARLI ---- */

/* Kur serit daraldikca sadelesir. Ust satir tasmasin diye her esikte
   yalniz sigan kadari gosterilir:
     >1240      tam (yuzde + iki kalem)
     1221-1240  yuzdesiz, menu daha dar
     981-1220   gizli — acik menu satiri tamamen doldurur
     701-980    tam (menu gizlendi, yer acildi)
     361-700    yalniz dolar, etiketsiz; "Bize Ulasin" mobil menude
     <=360      gizli */
@media (max-width: 1240px) {
    .kur-degis { display: none; }
    .kur-kalem { padding: 3px 6px; }
    .menu a { padding: 9px 11px; }
    .menu { gap: 2px; }
    .menu a.etkin::after { left: 11px; right: 11px; }
}

@media (max-width: 1220px) and (min-width: 981px) {
    .kur-serit { display: none; }
}

@media (max-width: 980px) {
    .kur-degis { display: none; }
}

@media (max-width: 700px) {
    .kur-kalem + .kur-kalem { display: none; }
    .kur-ad { display: none; }
    .kur-serit { margin-left: 0; padding: 3px 2px; }
    .kur-kalem { padding: 3px 6px; }
    .kur-deger { font-size: .76rem; min-width: 5ch; }
    /* Bu genislikte ust satirda yer kalmiyor; dugme mobil menude duruyor. */
    .ust-sag .dugme-koyu { display: none; }
}

@media (max-width: 430px) {
    /* Dokunma hedefi buyutuldu: 28 px yukseklik parmakla isabet icin dardi.
       Genislik dar telefonlarda yer sikintisi yarattigi icin oldugu gibi kaldi;
       380 px altindaki blok min-width'i zaten daha da kisiyor. */
    .dil-secici a { min-width: 34px; height: 38px; padding: 0 7px; font-size: .72rem; }
}

@media (max-width: 360px) {
    .kur-serit { display: none; }
}

@media (max-width: 1100px) {
    .liste-duzen { grid-template-columns: 1fr; }
    .filtre {
        position: fixed; inset: 0; z-index: 130; border-radius: 0;
        max-height: none; display: none; padding: 20px 20px 96px;
    }
    .filtre.acik { display: block; }
    .filtre-ac { display: inline-flex; }
    .filtre-kapat-cubuk {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 131;
        display: none; gap: 10px; padding: 14px 20px;
        background: var(--yuzey); border-top: 1px solid var(--cizgi);
    }
    .filtre.acik ~ .filtre-kapat-cubuk { display: flex; }
    .filtre-kapat-cubuk .dugme { flex: 1; }

    .detay-duzen { grid-template-columns: 1fr; }
    .yan-kart { position: static; }
    .harita-duzen { grid-template-columns: 1fr; }
    .harita-duzen .harita-kutu { position: static; height: 460px; }
}

@media (max-width: 980px) {
    .menu, .ust-tel { display: none; }
    .dil-secici { order: -1; }
    .hamburger { display: inline-flex; }
    .ust-ic { justify-content: space-between; }
    .arama-cubuk { grid-template-columns: 1fr 1fr; }
    .arama-alan::before { display: none; }
    .arama-dugme { grid-column: 1 / -1; padding: 15px; }
    .guven { grid-template-columns: 1fr; }
    .alt-izgara { grid-template-columns: 1fr 1fr; }
    .ilan-kart.yatay { flex-direction: column; }
    .ilan-kart.yatay .ilan-gorsel { width: 100%; aspect-ratio: 7 / 5; }
}

/* Tablet ve telefon: metin haritanin uzerine binmez.
   Harita ustte bir bant, yazi altinda temiz krem zeminde durur. */
@media (max-width: 900px) {
    .kahraman { min-height: 0; padding-block: 36vh 32px; }
    .kahraman-harita { height: 40vh; inset: 0 0 auto; }
    .kahraman-perde {
        inset: 0 0 auto;
        height: 44vh;
        background: linear-gradient(180deg,
            rgba(248,247,244,.30) 0%,
            rgba(248,247,244,0) 26%,
            rgba(248,247,244,0) 60%,
            rgba(248,247,244,.92) 88%,
            var(--kagit) 100%);
    }
    .harita-not { display: none; }   /* dar ekranda yer yok, harita zaten belli */
    .kahraman h1 { max-width: none; }
}

@media (max-width: 620px) {
    :root { --ust-yukseklik: 64px; }
    .kap, .kap-dar { padding-inline: 16px; }
    .arama-cubuk { grid-template-columns: 1fr; padding: 6px; }
    .arama-alan { padding: 11px 14px; }
    .form-izgara { grid-template-columns: 1fr; }
    .alt-izgara { grid-template-columns: 1fr; gap: 28px; }
    .alt-son { flex-direction: column; align-items: flex-start; }
    .deste-ok { display: none; }
    .deste-sahne { height: 440px; }
    .ozellik-tablo div { grid-template-columns: 1fr; gap: 3px; padding: 11px 15px; }
    .wa { right: 14px; bottom: 14px; width: 52px; height: 52px; }
    .wa::after { display: none; }
    .harita-duzen .harita-kutu { height: 380px; }
}

/* Çok dar telefonlar (320–380 px) */
@media (max-width: 380px) {
    .kap, .kap-dar { padding-inline: 14px; }

    /* "Bize Ulaşın" mobil menüde zaten var; üst çubukta yer kaplamasın. */
    .ust-sag > .dugme { display: none; }
    .dil-secici a { min-width: 30px; padding: 0 7px; font-size: .72rem; }

    .logo-im { width: 30px; height: 30px; }
    .logo-ad { font-size: 1.05rem; }
    .logo-alt { font-size: .52rem; letter-spacing: .2em; }

    h1 { font-size: 1.95rem; }
    .deste-sahne { height: 400px; }
    .ilan-fiyat { font-size: 1.18rem; }
    .detay-fiyat .tutar { font-size: 1.6rem; }
    .ozellik-tablo div { padding: 10px 13px; }
    .sayfalama a, .sayfalama span { min-width: 36px; height: 36px; padding-inline: 9px; }
}

@media print {
    .ust, .alt, .wa, .filtre, .harita-kutu, .deste-ok, .sayfalama { display: none !important; }
    body { background: #fff; }
    .ilan-kart, .ozellik-tablo, .yan-kart { border-color: #ccc; box-shadow: none; }
}