/*
 * HARITA SAYFALARI - AIRBNB DUZENI (5 Ekim 2026, sahibi secti: "Haritadan
 * parsel sec" taslagi).
 *
 * Yalnizca harita sayfalarinda yuklenir (/harita ve /parsel/..., layouts/
 * main.php $isMap). Butun kurallar .mapp altinda; app.css'teki ayni adli
 * siniflari (video sayfasindaki .vready dugmesi gibi) etkilemez. Dosya
 * kaldirilinca sayfalar eski haline doner.
 *
 * Dil: ustte beyaz yuvarlak dugmeler ve iki satirli beyaz hap, secili parsel
 * pembe (app.js parselCiz), uzerinde siyah "ada / parsel" hapi; altta 24 px
 * yuvarlak koseli beyaz sayfa, kalin baslik, gri yer satiri, hap satiri ve
 * pembe dugme.
 */
.mapp {
    --ab-ink: #222222;
    --ab-muted: #6A6A6A;
    --ab-line: #DDDDDD;
    --ab-grad: linear-gradient(90deg, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
    --ab-golge: 0 2px 10px rgba(0, 0, 0, .2);
    font-family: Figtree, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Ust cubuk --- */
.mapp .mapp-top { top: calc(14px + var(--sat)); left: 16px; right: 16px; gap: 10px; }
.mapp .mapp-back, .mapp .mapp-ico {
    width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; color: var(--ab-ink);
    box-shadow: var(--ab-golge);
}
.mapp .mapp-back svg, .mapp .mapp-ico svg { width: 19px; height: 19px; }
.mapp .mapp-hint {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-width: 0; height: 56px; padding: 0 16px; border-radius: 999px;
    background: #fff; color: var(--ab-ink); box-shadow: var(--ab-golge);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.mapp .mapp-hint b { max-width: 100%; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapp .mapp-hint small { max-width: 100%; font-size: 12px; font-weight: 400; color: var(--ab-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Harita / Uydu: beyaz hap, secili siyah */
.mapp .mapp-layers { padding: 4px; box-shadow: var(--ab-golge); }
.mapp .mapp-layers button { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ab-ink); }
.mapp .mapp-layers button.on { background: var(--ab-ink); color: #fff; }

/* Sag kontroller: beyaz yuvarlaklar */
.mapp .mapp-ctrl { gap: 10px; }
.mapp .mapp-ctrl button { width: 44px; height: 44px; color: var(--ab-ink); box-shadow: var(--ab-golge); }
.mapp .mapp-ctrl svg { width: 18px; height: 18px; }
.mapp .mapp-zoom { border-radius: 22px; box-shadow: var(--ab-golge); }
.mapp .mapp-zoom button { box-shadow: none; font-size: 20px; }
.mapp .mapp-zoom button:first-child { border-bottom-color: #EBEBEB; }

/* Secili parselin uzerindeki siyah hap (Airbnb'nin secili fiyat isareti). */
.parsel-hap { background: transparent; border: 0; }
.parsel-hap span {
    display: inline-block; transform: translate(-50%, -50%); white-space: nowrap;
    padding: 7px 12px; border-radius: 999px; background: #222; color: #fff;
    font-family: Figtree, "Plus Jakarta Sans", system-ui, sans-serif; font-size: 13px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* --- Alt sayfa --- */
.mapp .sheet {
    border-radius: 24px 24px 0 0; padding: 4px 24px calc(20px + var(--sab));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .16); color: var(--ab-ink);
}
.mapp .sheet-grip { width: 40px; background: var(--ab-line); margin: 8px auto 14px; }
.mapp .sheet-ident { display: flex; flex-direction: column-reverse; }
.mapp .sheet-head h1, .mapp .sheet-head h2 {
    font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ab-ink);
}
.mapp .sheet-kicker { margin: 4px 0 0; font-size: 14px; font-weight: 400; color: var(--ab-muted); }
.mapp .sheet-status {
    margin-top: 2px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ab-line);
    font-size: 12px; font-weight: 600; color: var(--ab-ink);
}
.mapp .sheet-status.is-ready { color: #008A05; }
.mapp .sheet-status.is-warn { color: #C13515; }
.mapp .sheet-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--ab-muted); }

/* /harita: alan + tapu hap satiri */
.mapp .pick-hap { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.mapp .pick-hap:not(:has(> :not([hidden]))) { display: none; }
.mapp .pick-sheet .sheet-badge,
.mapp .pick-tapu {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px;
    border: 1px solid var(--ab-line); background: #fff; color: var(--ab-ink); font-size: 13px; font-weight: 600;
}
.mapp .pick-sheet .sheet-badge[hidden], .mapp .pick-tapu[hidden] { display: none; }
.mapp .pick-tapu svg { width: 15px; height: 15px; color: #008A05; }
.mapp .pick-sheet .sheet-hint { margin-top: 10px; }

/* /parsel: bilgi kutusu */
.mapp .facts { margin: 16px 0; border-color: var(--ab-line); border-radius: 12px; }
.mapp .facts > div { padding: 11px 14px; }
.mapp .facts > div:nth-child(odd) { border-right-color: #EBEBEB; }
.mapp .facts > div:nth-child(-n+2) { border-bottom-color: #EBEBEB; }
.mapp .facts span { font-size: 12px; color: var(--ab-muted); }
.mapp .facts strong { font-size: 15px; font-weight: 600; color: var(--ab-ink); }

/* Pembe dugme */
.mapp .sheet .btn-primary.sheet-cta {
    min-height: 52px; margin-top: 16px; border-radius: 8px; background: var(--ab-grad);
    font-size: 16px; font-weight: 600; color: #fff;
}
.mapp .sheet .facts + .form-error + .btn-primary.sheet-cta,
.mapp .sheet .facts + .form-error[hidden] + .btn-primary.sheet-cta { margin-top: 0; }
.mapp .sheet .btn-primary.sheet-cta:hover { background: var(--ab-grad); filter: brightness(1.05); }
.mapp .sheet .btn-primary.sheet-cta:disabled { background: var(--ab-line); color: #fff; filter: none; opacity: 1; cursor: default; }
.mapp .sheet-sub, .mapp .linkish { color: var(--ab-ink); font-weight: 600; text-decoration: underline; }

/* Telefonda: app.css kontrolleri 32 px'e kucultuyor; parmakla rahat
   basilsin diye Airbnb olcusune geri buyutuluyor. */
@media (max-width: 859px) {
    .mapp .mapp-top { top: calc(12px + var(--sat)); left: 12px; right: 12px; gap: 8px; }
    .mapp .mapp-back { width: 44px; height: 44px; box-shadow: var(--ab-golge); }
    .mapp .mapp-back svg { width: 17px; height: 17px; }
    .mapp .mapp-layers button { padding: 7px 12px; font-size: 12px; }
    .mapp .mapp-ctrl { top: calc(12px + var(--sat)); right: 12px; gap: 8px; }
    .mapp .mapp-ctrl button, .mapp .mapp-zoom button { width: 40px; height: 40px; }
    .mapp .mapp-zoom { border-radius: 20px; }
    .mapp .mapp-zoom button { font-size: 18px; }
}
/* Masaustu: sagdaki panel; kose 24 px, golge yumusak. */
@media (min-width: 860px) {
    .mapp .sheet { border-radius: 24px; padding: 24px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
}

/* Masaustundeki parsel ozet karti (arama penceresini acar) */
.mapp .mapp-chip { border-radius: 16px; box-shadow: var(--ab-golge); }
.mapp .mapp-chip-ico { background: #F7F7F7; color: var(--ab-ink); }
.mapp .mapp-chip-text small { color: var(--ab-muted); font-weight: 500; }
.mapp .mapp-chip-text strong { font-weight: 800; color: var(--ab-ink); }
.mapp .mapp-chip-arr { color: #B0B0B0; }