/* EVNET Əmlak — the search map (listings.html), Hemnet-style, 2026-11-09.
   The map is business-map.js createMarketMap with emlak-map.js as adapter, so
   the classes it writes (biz-map-pill, biz-map-popup, biz-map-ctrl,
   biz-map-fallback) are styled here, scoped to the emlak panel.

   From 1100 px the map view is a split: the result cards in two columns on
   the left, the map sticky on the right under the header; the filter sidebar
   steps out (.listings-layout.map-active in style.css). Below 1100 px the map
   takes the width, the cards wait behind the List button, and a tapped dot
   opens a sheet. Nothing here touches .container or the partner rails
   (partner-banner.css, html.partner-rails-on): the split lives inside the
   results column, whatever width the container has. */

.emlak-map-panel { position:relative;display:none;height:min(700px,calc(100vh - 150px));min-height:420px;overflow:hidden;border:1px solid rgba(18,58,56,.1);border-radius:20px;background:#eef3f2;box-shadow:0 14px 40px rgba(18,58,56,.08); }
:is(.emlak-map-panel.is-active, html.emlak-map-first .emlak-map-panel) { display:block; }
.emlak-map-canvas { position:absolute!important;inset:0;width:100%;height:100%; }

/* A /listings?view=map address is laid out as the map view from the first
   paint: an inline script in listings.html's <head> sets html.emlak-map-first,
   and setView (listings.js) takes over and removes it. Without it the page
   painted the list and then jumped to the split (CLS 0.14 at 1440 px). The
   two rules below are style.css's .listings-layout.map-active. */
html.emlak-map-first .listings-layout { grid-template-columns:1fr; }
html.emlak-map-first .filter-sidebar { display:none; }

/* Map view: the VIP strip steps out (VIP listings are the gold dots), and
   under 1100 px so do the cards. */
:is(.listings-results.is-map, html.emlak-map-first .listings-results) .premium-section { display:none!important; }
@media (max-width:1099px) {
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) #listings-container,
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) #infinite-scroll-trigger,
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) #infinite-scroll-spinner { display:none!important; }
}

@media (min-width:1100px) {
  /* Every block of the results column on the left; the map spans all rows
     on the right. The last row takes the slack, so a short list never
     stretches to the map's height. */
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-rows:repeat(8,auto) 1fr;column-gap:22px;align-items:start; }
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) > * { grid-column:1;min-width:0; }
  /* The toolbar (count, save search, sort, view buttons) keeps the full
     width above both and stays under the header, the map sticky under it —
     so the whole map is on screen while the cards scroll. The background is
     the page's (body, style.css), for the cards passing beneath. */
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) > .listings-toolbar { grid-column:1 / -1;position:sticky;top:var(--emlak-toolbar-top,64px);z-index:6;margin-bottom:0;padding:10px 0;background:rgb(245,246,245); }
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) > .emlak-map-panel { grid-column:2;grid-row:2 / -1;position:sticky;top:var(--emlak-map-top,84px);height:calc(100vh - var(--emlak-map-top,84px) - 16px);min-height:480px; }
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) #listings-container.listings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :is(.listings-results.is-map, html.emlak-map-first .listings-results) .listing-card { outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s ease; }
}

/* List ↔ map: the card under the cursor's dot, and the card of a clicked dot. */
.listing-card.is-map-hover { outline:2px solid rgba(55,145,138,.55)!important;outline-offset:2px; }
.listing-card.is-map-selected { outline:2px solid #37918a!important;outline-offset:2px;animation:emlakCardFlash 1.4s ease; }
@keyframes emlakCardFlash { 0%{box-shadow:0 0 0 0 rgba(55,145,138,.45)} 35%{box-shadow:0 0 0 10px rgba(55,145,138,.12)} 100%{box-shadow:none} }
.emlak-map-area-empty { grid-column:1 / -1;padding:34px 22px;border:1px dashed rgba(55,145,138,.3);border-radius:18px;background:#f6fbfa;color:#5f7a78;font-size:.85rem;text-align:center; }

/* Controls: "search as the map moves" top-left with the count under it,
   fullscreen top-right, layers + zoom bottom-right. */
.emlak-map-overlay { position:absolute;z-index:8;left:14px;top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 90px);pointer-events:none; }
.emlak-map-overlay > * { pointer-events:auto; }
.emlak-map-area-toggle { display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 15px 0 12px;border:1px solid rgba(18,58,56,.1);border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(18,58,56,.12);color:#123a38;font-size:.78rem;font-weight:700;cursor:pointer;user-select:none;transition:box-shadow .2s ease; }
.emlak-map-area-toggle:hover { box-shadow:0 8px 24px rgba(18,58,56,.18); }
.emlak-map-area-toggle input { width:18px;height:18px;margin:0;accent-color:#37918a;cursor:pointer; }
.emlak-map-count { display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(18,58,56,.1);color:#3d6462;font-size:.7rem;font-weight:750;white-space:nowrap; }
.emlak-map-count:empty { display:none; }
.emlak-map-panel .maplibregl-ctrl-top-right .maplibregl-ctrl { margin:14px 14px 0 0; }
.emlak-map-panel .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin:0 14px 10px 0; }
.emlak-map-panel .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { margin:0; }
/* The attribution fills in (and wraps) after the tiles answer; out of the
   control stack, it no longer lifts the zoom and layer buttons when it does. */
.emlak-map-panel .maplibregl-ctrl-bottom-right { padding-bottom:26px; }
.emlak-map-panel .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { position:absolute;right:0;bottom:0;white-space:nowrap; }
.emlak-map-panel .maplibregl-ctrl-group { overflow:hidden;border:1px solid rgba(18,58,56,.1)!important;border-radius:12px!important;box-shadow:0 6px 20px rgba(18,58,56,.12)!important; }
.emlak-map-panel .maplibregl-ctrl-group button { width:40px!important;height:40px!important;color:#123a38; }
.emlak-map-panel .maplibregl-ctrl-attrib { border-radius:8px 0 0 0;background:rgba(255,255,255,.76)!important; }
.emlak-map-panel .biz-map-ctrl button { display:grid;place-items:center; }
.emlak-map-panel .biz-map-ctrl button svg { width:19px;height:19px; }
.emlak-map-panel .biz-map-ctrl button[aria-pressed="true"] { background:#e3f4f2;color:#1f5f5a; }
.emlak-map-panel.is-fullscreen { position:fixed!important;inset:0!important;z-index:2000;width:auto!important;height:auto!important;min-height:0!important;border:0;border-radius:0; }
.emlak-map-panel:fullscreen { width:100%;height:100%;border:0;border-radius:0; }

/* Hover: a price pill above the dot. */
.emlak-map-panel .biz-map-pill { pointer-events:none; }
.emlak-map-panel .biz-map-pill .maplibregl-popup-content { padding:5px 10px;border-radius:999px;background:#123a38;color:#fff;font-size:.74rem;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 6px 16px rgba(18,58,56,.25);animation:emlakMapFade .15s ease-out; }
.emlak-map-panel .biz-map-pill.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color:#123a38; }

/* Click (from 1100 px): a small card on the map. */
.emlak-map-panel .biz-map-popup .maplibregl-popup-content { overflow:hidden;width:264px;padding:0;border:0;border-radius:16px;box-shadow:0 18px 44px rgba(18,58,56,.24);animation:emlakMapPop .2s cubic-bezier(.22,1,.36,1); }
.emlak-map-panel .biz-map-popup .maplibregl-popup-close-button { z-index:3;right:8px;top:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.94);color:#123a38;font-size:18px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.12); }
.emlak-map-panel .biz-map-popup-card { display:block;color:inherit;text-decoration:none; }
.emlak-map-panel .biz-map-popup-media { position:relative;display:block;height:138px;background:linear-gradient(135deg,#fff,#d5f5f2,#81d8d0); }
.emlak-map-panel .biz-map-popup-media img { display:block;width:100%;height:100%;object-fit:cover; }
.emlak-map-panel .biz-map-popup-art { display:grid;place-items:center;height:100%;color:#2a706a;font-size:.68rem;font-weight:900;letter-spacing:.12em; }
.emlak-map-panel .biz-map-popup-vip { position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:999px;background:#d9a63a;color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.06em; }
.emlak-map-panel .biz-map-popup-body { display:flex;flex-direction:column;gap:3px;padding:12px 14px 13px; }
.emlak-map-panel .biz-map-popup-kicker { color:#37918a;font-size:.58rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em; }
.emlak-map-panel .biz-map-popup-price { color:#123a38;font-size:1.02rem;font-weight:850;letter-spacing:-.01em; }
.emlak-map-panel .biz-map-popup-title { color:#123a38;font-size:.8rem;font-weight:650;line-height:1.35; }
.emlak-map-panel .biz-map-popup-place { color:#718a88;font-size:.68rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.emlak-map-panel .biz-map-popup-link { margin-top:5px;color:#37918a;font-size:.72rem;font-weight:850; }
.emlak-map-panel .biz-map-popup-card:hover .biz-map-popup-link { text-decoration:underline; }

/* Tap (under 1100 px): a sheet at the bottom of the map. */
.emlak-map-sheet { position:absolute;z-index:9;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center;max-width:460px;margin:0 auto;padding:10px 40px 10px 10px;border:1px solid rgba(18,58,56,.08);border-radius:18px;background:#fff;box-shadow:0 16px 44px rgba(18,58,56,.2);transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease; }
.emlak-map-sheet.is-visible { transform:none;opacity:1;pointer-events:auto; }
.emlak-map-sheet-media { display:grid;place-items:center;width:92px;height:92px;overflow:hidden;border-radius:13px;background:linear-gradient(135deg,#fff,#d5f5f2,#81d8d0);color:#2a706a;font-size:.6rem;font-weight:900;letter-spacing:.1em;text-decoration:none; }
.emlak-map-sheet-media img { width:100%;height:100%;object-fit:cover; }
.emlak-map-sheet-body { min-width:0; }
.emlak-map-sheet small { display:block;color:#37918a;font-size:.6rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em; }
.emlak-map-sheet-price { display:block;margin-top:3px;color:#123a38;font-size:1rem;font-weight:850; }
.emlak-map-sheet-vip { display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#d9a63a;color:#fff;font-size:.58rem;font-weight:900;letter-spacing:.06em;vertical-align:2px; }
.emlak-map-sheet h3 { margin:2px 0;font-size:.84rem;line-height:1.3; }
.emlak-map-sheet h3 a { color:#123a38;text-decoration:none; }
.emlak-map-sheet p { margin:0;color:#5f7a78;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.emlak-map-sheet-close { position:absolute;right:8px;top:8px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#f0f5f4;color:#123a38;font-size:1.05rem;cursor:pointer; }

/* The map could not load (business-map.js fallback). */
.emlak-map-panel .biz-map-fallback { position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:9px;padding:30px;background:linear-gradient(145deg,#fff,#d5f5f2);text-align:center; }
.emlak-map-panel .biz-map-fallback svg { width:92px;height:92px; }
.emlak-map-panel .biz-map-fallback strong { font-size:.9rem; }
.emlak-map-panel .biz-map-fallback span { max-width:360px;color:#718a88;font-size:.72rem;line-height:1.5; }

@keyframes emlakMapFade { from{opacity:0} to{opacity:1} }
@keyframes emlakMapPop { from{opacity:0;transform:translateY(6px) scale(.98)} to{opacity:1;transform:none} }

/* Phones and small tablets: the map fills the screen under the header; the
   floating "Siyahı" button (style.css .mobile-map-float-btn, z 1000) stays
   on top of it. */
@media (max-width:900px) {
  :is(.emlak-map-panel.is-active, html.emlak-map-first .emlak-map-panel) { position:fixed;z-index:950;inset:var(--emlak-map-top,111px) 0 0;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none; }
  .emlak-map-overlay { left:12px;top:12px; }
  .emlak-map-sheet { bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
  /* The sheet takes the floating List button's place while it is open. */
  body.emlak-map-sheet-open .mobile-map-float-btn { opacity:0;pointer-events:none; }
  body:has(.emlak-map-panel.is-active), html.emlak-map-first body { overflow:hidden; }
}
@media (max-width:380px) {
  .emlak-map-area-toggle { font-size:.72rem;padding:0 12px 0 10px; }
}

@media (prefers-reduced-motion:reduce) {
  .emlak-map-sheet { transition:none; }
  .emlak-map-panel .biz-map-pill .maplibregl-popup-content,
  .emlak-map-panel .biz-map-popup .maplibregl-popup-content,
  .listing-card.is-map-selected { animation:none; }
}