/* ---------- App-style page: dark menu, equal gap, then the map ---------- */
html, body{height:100%}
html{scrollbar-gutter:stable}                  /* reserve the scrollbar space so the
                                                  menu sits EXACTLY where it sits on
                                                  every other (scrollable) page */
body{overflow:hidden;background:var(--hero)}   /* dark canvas, like the homepage */
body > .site-header{margin-top:14px}           /* gap above the menu... */

@media(max-width:980px){
  body{overflow:auto}                       /* mobile scrolls normally */
}

/* Site menu & mobile drawer must sit ABOVE the Leaflet map (its controls go up to z-1000) */
.site-header{z-index:1100}
.drawer{z-index:12000}

/* No "Leaflet | Google Maps" credit in the corner */
.leaflet-control-attribution{display:none !important}

/* ---------- ZIP search — top of the dealer list ---------- */
.side-search{
  padding:18px 20px;border-bottom:1px solid var(--line);
  background:#fff;z-index:3;
}
.side-search form{
  display:flex;gap:8px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:4px;
}
.side-search input{
  flex:1;min-width:0;border:none;background:transparent;
  padding:9px 12px;font-size:13.5px;color:var(--ink);
}
.side-search input:focus{outline:none}
.side-search button[type=submit]{
  background:var(--ink);color:#fff;border-radius:9px;
  padding:0 18px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .2s var(--ease);
}
.side-search button[type=submit]:hover{background:var(--gold)}
.side-search .hint{margin-top:7px;font-size:11px;color:var(--muted)}
.side-search .geo-btn{
  background:transparent;color:var(--gold);border:0;padding:0;
  font-size:11px;font-weight:600;cursor:pointer;
}
.side-search .geo-btn:hover{color:var(--ink);text-decoration:underline}

/* Segment filters — Retail / Contractor / Commercial */
.seg-filters{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:12px 14px 13px;border-bottom:1px solid var(--line);background:#fff;
}
.seg-filters .seg-note{
  font-size:11.5px;color:var(--muted);text-align:center;line-height:1.55;
  max-width:340px;
}
.seg-filters .seg-note strong{color:var(--ink);font-weight:700}
.seg-filters .seg-row{display:flex;gap:7px;align-items:center;justify-content:center}
.seg-filters .lbl{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-right:4px;flex-shrink:0}
.seg-btn{
  padding:7px 14px;border-radius:99px;
  border:1px solid var(--line);background:#fff;
  font-size:12px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:all .18s var(--ease);
}
.seg-btn:hover{border-color:var(--ink)}
.seg-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Layout: list (left) + map (right) ---------- */
/* Full-bleed locator: sticks to the left, right and bottom edges.
   Only a 14px gap between the menu and this section (same as above the menu). */
.dealer-layout{
  display:grid;grid-template-columns:400px 1fr;gap:0;
  margin-top:14px;
  height:calc(100vh - (var(--nav-h) + 30px));
  min-height:480px;
  background:#fff;
}


/* List */
.dealer-list{
  border-right:1px solid var(--line);
  padding:0;background:#fff;
  display:flex;flex-direction:column;min-height:0;
}
#dealers{flex:1;min-height:0;overflow:hidden;padding-bottom:4px}

/* Mobile: map on top, list below */
@media (max-width:980px){
  .dealer-layout{display:flex;flex-direction:column;height:auto;min-height:0}
  .dealer-map{order:1;height:46vh;min-height:340px}
  .dealer-list{order:2;border-right:none;border-top:1px solid var(--line)}
  #dealers{overflow:visible}
}

.dealer-list .head{
  padding:10px 20px 2px;
  font-size:12px;color:var(--muted);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.dealer-list .head strong{color:var(--ink);font-weight:700}
.dealer-list .head .sort{
  font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
}
.dealer-list .head .sort .dot{
  width:6px;height:6px;border-radius:99px;background:var(--gold);
}

.dealer{
  margin:8px 12px;padding:11px 14px 10px;
  background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--ink);            /* vertical black line */
  border-radius:0 10px 10px 0;
  cursor:pointer;position:relative;
  transition:box-shadow .22s var(--ease), border-left-color .22s var(--ease);
}
.dealer:hover{box-shadow:0 12px 26px -18px rgba(0,0,0,.28)}
.dealer.active{border-left-color:var(--gold);box-shadow:0 12px 26px -18px rgba(0,0,0,.28)}

.dealer .row1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dealer h2{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dealer .badge{
  flex-shrink:0;
  font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;
  background:var(--bg-2);color:var(--muted);border:1px solid var(--line);
  white-space:nowrap;
}
.dealer .badge.stocking{background:rgba(138,142,146,.14);color:#565b60;border-color:rgba(138,142,146,.5)}

.dealer .addr{
  font-size:14px;color:#26272b;font-weight:500;line-height:1.4;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;   /* address on one line */
}
.dealer .meta{
  display:flex;gap:9px;align-items:center;flex-wrap:nowrap;margin-top:6px;
  font-size:12px;color:var(--muted);min-width:0;
}
.dealer .dist{
  flex-shrink:0;background:var(--ink);color:#fff;padding:3px 9px;border-radius:99px;
  font-weight:700;letter-spacing:.04em;font-size:11px;
}
.dealer.active .dist{background:var(--gold)}
.dealer .meta .hrs{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dealer .meta .hrs svg{flex-shrink:0}
.dealer .meta .phone{color:var(--ink);font-weight:600;white-space:nowrap}

.dealer .actions{display:flex;gap:6px;margin-top:8px}
.dealer .act{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 13px;border-radius:9px;
  border:1px solid var(--ink);color:var(--ink);background:#fff;
  cursor:pointer;transition:all .2s var(--ease);
}
.dealer .act:hover{background:var(--ink);color:#fff}
.dealer .act.icon{padding:7px 10px}
.dealer .act.primary{background:var(--ink);color:#fff}
.dealer .act.primary:hover{background:var(--gold);border-color:var(--gold)}

/* Empty state */
.dealer-empty{
  padding:60px 26px;text-align:center;color:var(--muted);
}
.dealer-empty h3{font-family:var(--serif);color:var(--ink);font-size:22px;margin-bottom:8px}
.dealer-empty p{font-size:14px;line-height:1.6}

/* ---------- Real Leaflet map ---------- */
.dealer-map{
  position:relative;
  background:#eef0ee;
  min-height:0;
}

.dealer-map .lf-map{
  width:100%;height:100%;
  position:absolute;inset:0;

}

/* Custom teardrop markers (concept style) */
.vita-pin{background:transparent;border:none}
.vita-pin svg{
  transform-origin:50% 100%;
  transition:transform .2s var(--ease);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));
}
.vita-pin.active svg{transform:scale(1.18)}

/* Search-origin marker (where the user searched from) */
.search-origin{
  width:18px;height:18px;border-radius:99px;
  background:#3aa763;border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(58,167,99,.3),0 4px 12px rgba(0,0,0,.3);
  position:relative;
}
.search-origin::after{
  content:"";position:absolute;inset:-10px;border-radius:99px;
  background:rgba(58,167,99,.25);
  animation:soPulse 2s infinite;
  z-index:-1;
}
@keyframes soPulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(2.4);opacity:0}
}

/* Map info badge — "X results within Y miles" */


/* Leaflet popup customization */
.leaflet-popup-content-wrapper{
  border-radius:10px;padding:6px;
}
.leaflet-popup-content{margin:10px 14px;font-family:var(--sans)}
.leaflet-popup-content .pname{
  font-family:var(--serif);font-size:16px;font-weight:500;
  color:var(--ink);margin-bottom:4px;
}
.leaflet-popup-content .paddr{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:6px}
.leaflet-popup-content .pphone{font-size:12px;color:var(--ink);font-weight:600}
.leaflet-popup-content .pdir{
  display:inline-block;margin-top:8px;font-size:11px;
  color:var(--gold);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.leaflet-popup-content .pdir:hover{color:var(--ink)}

/* Map legend — dealer types */
.map-legend{
  position:absolute;left:16px;bottom:16px;z-index:500;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  padding:13px 16px;border-radius:12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.03em;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.35);
}
.map-legend span{display:inline-flex;align-items:center;gap:9px}
.map-legend svg{flex-shrink:0}
.map-legend .dot{width:10px;height:10px;border-radius:99px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.map-legend .dot.stk{background:#8a8e92}
.map-legend .dot.reg{background:var(--ink)}

/* Popup — photo on top, info below (concept style) */
.leaflet-popup-content-wrapper{border-radius:12px;overflow:hidden;padding:0;box-shadow:0 10px 30px -8px rgba(0,0,0,.25)}
.leaflet-popup-content{margin:0;width:248px !important;font-family:var(--sans)}
.pp-img{width:100%;height:112px;object-fit:cover;display:block;background:#f0ece2}
.pp-info{padding:13px 15px 15px}
.pp-title{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.2;color:var(--ink)}
.pp-media{position:relative}
.pp-dir{
  position:absolute;right:10px;bottom:10px;
  width:34px;height:34px;border-radius:10px;
  background:#fff;color:var(--ink);
  display:grid;place-items:center;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 5px 14px rgba(0,0,0,.28);
  transition:all .2s var(--ease);
}
.pp-dir:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pp-addr{font-size:13px;color:#26272b;font-weight:500;line-height:1.5;margin-top:7px}
.pop-actions{display:flex;gap:7px;margin-top:11px}
.pop-actions .pact{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 8px;border-radius:9px;border:1px solid var(--ink);
  color:var(--ink);background:#fff;cursor:pointer;white-space:nowrap;
  transition:all .2s var(--ease);
}
.pop-actions .pact:hover{background:var(--ink);color:#fff}
.pop-actions .pact.dark{background:var(--ink);color:#fff}
.pop-actions .pact.dark:hover{background:var(--gold);border-color:var(--gold)}
.leaflet-popup-close-button{color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* "Search this area" — appears after the user pans the map */
.search-area-btn{
  display:none;white-space:nowrap;
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  z-index:600;
  background:#fff;color:var(--ink);
  border:1px solid rgba(14,14,16,.25);
  padding:13px 24px;border-radius:99px;
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.4);
  cursor:pointer;transition:all .2s var(--ease);
}
.search-area-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.search-area-btn.show{display:block}

/* ---------- Contact dealer modal ---------- */
.contact-modal{position:fixed;inset:0;z-index:4000;display:none}
.contact-modal.open{display:block}
.contact-modal .cm-backdrop{
  position:absolute;inset:0;background:rgba(10,13,18,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:cmFade .25s var(--ease);
}
@keyframes cmFade{from{opacity:0}to{opacity:1}}
.contact-modal .cm-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 32px));max-height:min(92vh, 860px);overflow-y:auto;
  background:#fff;border-radius:18px;padding:36px 38px 34px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:cmUp .3s var(--ease-out);
}
@keyframes cmUp{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(max-width:560px){.contact-modal .cm-card{padding:28px 22px 24px}}
.contact-modal .cm-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border-radius:99px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);background:#fff;
  transition:all .2s var(--ease);
}
.contact-modal .cm-close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.contact-modal h2{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:400;margin:10px 0 4px;line-height:1.15}
.contact-modal h2 em{font-style:italic;color:var(--muted)}
.contact-modal .cm-sub{font-size:13px;color:var(--muted);margin-bottom:24px}
.contact-modal .cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-modal .cm-grid .full{grid-column:1/-1}
@media(max-width:520px){.contact-modal .cm-grid{grid-template-columns:1fr}}
.cm-field{display:flex;flex-direction:column;gap:6px}
.cm-field > span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cm-field input,.cm-field textarea{
  border:1px solid var(--line);border-radius:10px;background:var(--bg-2);
  padding:12px 14px;font-size:14px;color:var(--ink);width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cm-field input:focus,.cm-field textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.cm-field textarea{resize:vertical;min-height:90px}
.cm-group{margin-top:16px}
.cm-group .cm-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.cm-chips{display:flex;gap:8px;flex-wrap:wrap}
.cm-chips label{position:relative;cursor:pointer}
.cm-chips input{position:absolute;opacity:0;pointer-events:none}
.cm-chips label span{
  display:inline-block;padding:8px 15px;border-radius:99px;
  border:1px solid var(--line);background:#fff;
  font-size:12px;font-weight:600;color:var(--ink-2);
  transition:all .18s var(--ease);
}
.cm-chips label:hover span{border-color:var(--ink)}
.cm-chips input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.cm-notes{margin-top:16px}
.cm-submit{width:100%;justify-content:center;margin-top:22px}

/* Mobile: compact "Search this area" + smaller legend (must come after base rules) */
@media(max-width:980px){
  .search-area-btn{font-size:11px;padding:9px 15px;top:12px}
  .map-legend{left:12px;bottom:12px;padding:10px 13px;font-size:11.5px;gap:8px}
  .map-legend svg{height:17px !important}
}

/* Sunucudan basılan bayi dizini — JS kartları basana kadarki ilk kare + JS'siz ziyaretçiler.
   JS yüklendiğinde #dealers içeriği kartlarla değiştirilir; bu blok görünmez olur. */
.dealer-directory{overflow-y:auto;max-height:100%;padding:4px 2px 12px;font-size:12.5px;line-height:1.7}
.dealer-directory .dir-state h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px;font-weight:700}
.dealer-directory ul{list-style:none;margin:0;padding:0}
.dealer-directory a{color:inherit;text-decoration:none}
.dealer-directory a:hover{text-decoration:underline}