/* ==========================================================================
   Bolu Yönetim – "Hizmet verdiğimiz binalar" (buildings we serve) map module
   Standalone stylesheet: uses site-d's variables if present, otherwise
   works with its own values. All classes are "bh-" prefixed (no collisions).
   Colours: brand guide (kurumsal-kimlik/marka-kilavuzu.html).
   - Parlak Altın (bright gold) #E9C25A only for text on dark backgrounds
   - Antik Altın (antique gold) #B8862B only for lines/icons (not text)
   - Gold gradient only in icons and thin lines
   ========================================================================== */

.bh, .bh-kart {
  --bh-zemin: var(--d-bg, #141414);
  --bh-yuzey: var(--d-yuzey, #191817);
  --bh-altin: var(--d-altin, #e9c25a);
  --bh-antik: var(--d-antik, #b8862b);
  --bh-isik: #fbe58e;
  --bh-beyaz: var(--d-beyaz, #ffffff);
  --bh-metin: var(--d-metin, #d9d4c9);
  --bh-soluk: var(--d-soluk, #a39d91);
  --bh-kil: var(--d-kil, rgba(184, 134, 43, 0.34));
  --bh-kil-gri: var(--d-kil-gri, rgba(255, 255, 255, 0.09));
  --bh-gradyan: var(--d-gradyan, linear-gradient(90deg, #9c6a16 0%, #e9c25a 28%, #fbe58e 50%, #d2a13a 72%, #8e5c10 100%));
  --bh-display: var(--d-display, "Barlow Semi Condensed", "Barlow", system-ui, sans-serif);
  --bh-govde: var(--d-govde, "Barlow", system-ui, sans-serif);
}
.bh {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, var(--bh-zemin), #121110 55%, var(--bh-zemin));
  color: var(--bh-metin);
  font-family: var(--bh-govde);
}

/* ---------------------------------------------------------------- heading */
.bh__bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1rem 4rem;
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.bh__bas p { margin: 0; color: var(--bh-soluk); max-width: 48ch; line-height: 1.6; }
@media (max-width: 860px) { .bh__bas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- counters */
.bh-sayac {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--bh-kil);
  border-bottom: 1px solid var(--bh-kil-gri);
}
.bh-sayac[hidden] { display: none; }
.bh-sayac li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem 0.85rem;
  border-left: 1px solid var(--bh-kil-gri);
  min-width: 0;
}
.bh-sayac li:first-child { border-left: 0; padding-left: 0; }
.bh-sayac__sayi {
  font-family: var(--bh-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--bh-altin);
  font-variant-numeric: tabular-nums;
}
.bh-sayac__ad {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--bh-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bh-soluk);
}
.bh-sayac__ad svg { flex: none; width: 18px; height: 18px; }
.bh-sayac__toplam .bh-sayac__sayi { color: var(--bh-beyaz); }
@media (max-width: 640px) {
  .bh-sayac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-sayac li { border-left: 0; padding-left: 0; border-top: 1px solid var(--bh-kil-gri); }
  .bh-sayac li:nth-child(-n+2) { border-top: 0; }
  .bh-sayac li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--bh-kil-gri); }
  .bh-sayac__toplam { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
}

/* ---------------------------------------------------------------- map card */
.bh-kart {
  position: relative;
  overflow: hidden;
  background: #141414;
  border: 1px solid var(--bh-kil);
  aspect-ratio: 16 / 9;
  max-height: 680px;
  min-height: 380px;
  width: 100%;
  isolation: isolate;
}
.bh-kart::after {          /* edge vignette (depth); does not block clicks */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 10, 10, 0.55) 100%);
  z-index: 1;
}
.bh-kart::before {         /* thin gold line on the top edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--bh-gradyan);
  opacity: 0.6;
  z-index: 3;
}
@media (max-width: 640px) { .bh-kart { aspect-ratio: 4 / 5; min-height: 0; max-height: 78vh; } }
.bh-kart--kucuk { aspect-ratio: 16 / 10; max-height: 460px; min-height: 300px; }
@media (max-width: 640px) { .bh-kart--kucuk { aspect-ratio: 1 / 1; } }

.bh-sahne {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;          /* one finger scrolls the page; two fingers move the map */
  outline: none;
}
.bh-sahne.bh--surukle { cursor: grabbing; }
.bh-sahne:focus-visible { box-shadow: inset 0 0 0 2px var(--bh-altin); }
.bh-sahne > svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.7s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.bh--yuklendi .bh-sahne > svg { opacity: 1; transform: none; }

/* OSM base-map layers (the <style> inside the SVG is removed on the site; the rules live here) */
.bh-osm .bh-z { fill: #141414; }
.bh-osm .bh-yesil { fill: #1f2a1c; fill-opacity: 0.55; }
.bh-osm .bh-su { fill: #1a2630; fill-opacity: 0.8; }
.bh-osm .bh-bina { fill: #2a2622; fill-opacity: 0.9; }
.bh-osm .bh-dere { fill: none; stroke: #2b4252; stroke-width: 1.6; stroke-linecap: round; }
.bh-osm .bh-ray { fill: none; stroke: #5a5146; stroke-width: 1; stroke-dasharray: 4 4; }
.bh-osm .bh-y3 { fill: none; stroke: #5e4a2a; stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.75; }
.bh-osm .bh-y2 { fill: none; stroke: #84652d; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.bh-osm .bh-y1 { fill: none; stroke: #b8862b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.8; }
.bh-osm .bh-dere, .bh-osm .bh-ray, .bh-osm .bh-y1, .bh-osm .bh-y2, .bh-osm .bh-y3 { vector-effect: non-scaling-stroke; }
.bh-osm .bh-etiket {
  font: 600 30px var(--bh-display);
  fill: #8f877a;
  letter-spacing: 0.06em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #141414;
  stroke-width: 6px;
  stroke-linejoin: round;
  pointer-events: none;
}
.bh-osm .bh-etiket.bh--gizli { display: none; }

/* ---------------------------------------------------------------- building markers */
.bh-i { cursor: pointer; }
.bh-i__hale { fill: var(--bh-altin); opacity: 0.2; }
.bh-i__daire { fill: #141414; stroke-width: 2; }
.bh-i__ikon { fill: none; stroke: var(--bh-isik); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.bh-i__parlama { fill: var(--bh-isik); opacity: 0; }
.bh-i__ic, .bh-i__parlama { transform-box: fill-box; transform-origin: center; }
.bh-i:hover .bh-i__hale, .bh-i.bh--secili .bh-i__hale { opacity: 0.4 !important; }

/* "Light-up reveal": if motion is allowed, JS adds .bh--anim to the card; once visible it
   adds .bh--yandi to the markers one by one (the delay comes from JS). */
.bh--anim .bh-i .bh-i__ic { opacity: 0; transform: scale(0.2); }
.bh--anim .bh-i .bh-i__hale { opacity: 0; }
.bh--anim .bh-i.bh--yandi .bh-i__ic { animation: bh-yan 0.7s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay: inherit; }
.bh--anim .bh-i.bh--yandi .bh-i__hale { animation: bh-hale 0.9s ease forwards; animation-delay: inherit; }
.bh--anim .bh-i.bh--yandi .bh-i__parlama { animation: bh-parla 1.1s ease-out forwards; animation-delay: inherit; }
@keyframes bh-yan { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes bh-hale { from { opacity: 0; } to { opacity: 0.2; } }
@keyframes bh-parla { 0% { opacity: 0.85; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.6); } }

/* ---------------------------------------------------------------- office marker */
.bh-ofis { cursor: pointer; outline: none; }
.bh-ofis__nabiz { fill: none; stroke: var(--bh-altin); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bh--anim .bh-ofis__nabiz { animation: bh-nabiz 2.6s ease-out infinite; }
.bh--anim .bh-ofis__nabiz--2 { animation-delay: 1.3s; }
@keyframes bh-nabiz { 0% { opacity: 0.75; transform: scale(0.55); } 100% { opacity: 0; transform: scale(2.1); } }
.bh-ofis__odak { fill: none; stroke: var(--bh-beyaz); stroke-width: 2; stroke-dasharray: 3 3; opacity: 0; }
.bh-ofis:focus-visible .bh-ofis__odak { opacity: 1; }
.bh-ofis__yazi {
  font: 700 12px var(--bh-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--bh-altin);
  text-anchor: middle;
  paint-order: stroke;
  stroke: #141414;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.bh-secim__ic { fill: var(--bh-beyaz); stroke: #141414; stroke-width: 2; }
.bh-secim__hat { fill: none; stroke: var(--bh-beyaz); stroke-width: 1.5; }

/* ---------------------------------------------------------------- controls */
.bh-kontrol {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--bh-kil);
  background: rgba(20, 20, 20, 0.88);
}
.bh-kontrol button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bh-kil-gri);
  color: var(--bh-altin);
  cursor: pointer;
  font: 600 1.35rem/1 var(--bh-display);
}
.bh-kontrol button:first-child { border-top: 0; }
.bh-kontrol button:hover { background: rgba(233, 194, 90, 0.1); color: var(--bh-beyaz); }
.bh-kontrol button:focus-visible { outline: 2px solid var(--bh-altin); outline-offset: -2px; }
.bh-kontrol button:disabled { color: #5d574d; cursor: default; background: transparent; }
.bh-kontrol svg { width: 18px; height: 18px; }

.bh-atif {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #bdb6a9;
  background: rgba(20, 20, 20, 0.85);
}
.bh-atif a { color: #d9d4c9; text-decoration: underline; text-underline-offset: 2px; }
.bh-atif a:hover, .bh-atif a:focus-visible { color: var(--bh-altin); }

.bh-yakin {                   /* bottom left: "Konumlar yaklaşıktır" (locations are approximate) note */
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  color: #bdb6a9;
  background: rgba(20, 20, 20, 0.85);
  max-width: 55%;
}
@media (max-width: 480px) {
  .bh-yakin { bottom: 1.5rem; max-width: 70%; }
}

.bh-ipucu {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  padding: 0.6rem 0.9rem;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid var(--bh-kil);
  color: var(--bh-beyaz);
  font-size: 0.9rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  max-width: calc(100% - 2rem);
}
.bh-ipucu.bh--goster { opacity: 1; }

.bh-bos {
  position: absolute;
  left: 50%;
  top: 1rem;
  z-index: 4;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.55rem 1rem;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid var(--bh-kil);
  color: var(--bh-metin);
  font-size: 0.95rem;
  text-align: center;
  width: max-content;
  max-width: calc(100% - 7rem);
}
.bh-ornek-rozet {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 4;
  padding: 0.25rem 0.6rem;
  background: #7a1f1f;
  color: #fff;
  font: 700 0.75rem/1.2 var(--bh-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bh-hata { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; color: var(--bh-soluk); text-align: center; }

/* ---------------------------------------------------------------- info popup */
.bh-balon {
  position: absolute;
  z-index: 6;
  width: min(300px, calc(100% - 1.5rem));
  padding: 1rem 1.1rem 1.05rem;
  background: #1b1a18;
  border: 1px solid var(--bh-kil);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: var(--bh-metin);
  font-size: 0.92rem;
  line-height: 1.5;
}
.bh-balon[hidden] { display: none; }
.bh-balon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bh-gradyan); }
.bh-balon__baslik { margin: 0 2rem 0.35rem 0; font: 600 1.05rem/1.25 var(--bh-display); color: var(--bh-beyaz); }
.bh-balon address { font-style: normal; margin: 0 0 0.6rem; }
.bh-balon p { margin: 0 0 0.5rem; }
.bh-balon a { color: var(--bh-altin); text-decoration: underline; text-underline-offset: 2px; }
.bh-balon a:hover, .bh-balon a:focus-visible { color: var(--bh-beyaz); }
.bh-balon__satir { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; }
.bh-balon__tarif {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--bh-antik);
  text-decoration: none !important;
  font: 600 0.82rem/1 var(--bh-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bh-balon__kapat {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--bh-soluk);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}
.bh-balon__kapat:hover, .bh-balon__kapat:focus-visible { color: var(--bh-beyaz); outline: 1px solid var(--bh-kil); }
.bh-balon--kucuk { width: auto; max-width: min(260px, calc(100% - 1.5rem)); padding: 0.6rem 2.4rem 0.6rem 0.8rem; font-size: 0.88rem; }
.bh-balon--kucuk .bh-balon__kapat { width: 32px; height: 32px; top: 0.15rem; right: 0.15rem; }

/* ---------------------------------------------------------------- text list (screen readers + everyone) */
.bh-liste { margin-top: 1rem; border-top: 1px solid var(--bh-kil-gri); }
.bh-liste summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font: 600 0.9rem var(--bh-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bh-metin);
}
.bh-liste summary:hover, .bh-liste summary:focus-visible { color: var(--bh-altin); }
.bh-liste__ic { padding: 0 0 1rem; color: var(--bh-soluk); font-size: 0.95rem; line-height: 1.6; }
.bh-liste__ic p { margin: 0 0 0.6rem; }
.bh-liste__ic ul { margin: 0; padding: 0; list-style: none; columns: 2 16rem; column-gap: 2rem; }
.bh-liste__ic li { break-inside: avoid; padding: 0.25rem 0; border-bottom: 1px solid var(--bh-kil-gri); }
.bh-liste__ic strong { color: var(--bh-metin); font-weight: 600; }
.bh-yardim { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--bh-soluk); }

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

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bh-sahne > svg { transition: none; transform: none; }
  .bh--anim .bh-i .bh-i__ic, .bh--anim .bh-i .bh-i__hale { opacity: 1; transform: none; animation: none !important; }
  .bh-i .bh-i__parlama, .bh-ofis__nabiz { animation: none !important; opacity: 0 !important; }
  .bh-ipucu { transition: none; }
}