/* ============================================================
   KOBİTECHS — Yoğunluk Haritası (lokal, tile'sız SVG)
   base.html token'larıyla uyumlu. Sıcak yoğunluk baloncukları,
   soğuk nötr harita zemini.
   ============================================================ */

.kbm-wrap{ position:relative; }

.kbm-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.kbm-head h2{
  font-family:var(--ff-display); font-weight:700; font-size:27px;
  letter-spacing:-.6px; color:var(--ink); margin:0;
}
.kbm-head p{ font-size:14.5px; color:var(--slate-500); margin:5px 0 0; max-width:520px; }
.kbm-active-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--blue-50); border:1px solid var(--blue-100);
  color:var(--blue-700); font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:30px; white-space:nowrap;
}
.kbm-active-pill .dot{ width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 3px var(--blue-100); }

.kbm-stage{
  position:relative;
  background:
    radial-gradient(120% 120% at 50% 0%, #fbfcfe 0%, var(--slate-50) 70%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:8px;
}

/* SVG haritası */
.kbm-svg{ display:block; width:100%; height:auto; }
.kbm-prov{
  fill:var(--slate-150);
  stroke:var(--surface);
  stroke-width:.9;
  stroke-linejoin:round;
  transition:fill .15s ease;
  cursor:pointer;
}
.kbm-prov:hover{ fill:var(--slate-200); }
.kbm-prov.kbm-has{ fill:#e9eef5; }
.kbm-prov.kbm-has:hover{ fill:#dde6f2; }
.kbm-prov.kbm-on{ fill:var(--blue-100); stroke:var(--blue); stroke-width:1.4; }

/* Baloncuklar */
.kbm-bub-halo{ opacity:.24; pointer-events:none; }
.kbm-bub{ cursor:pointer; transition:transform .15s ease; transform-box:fill-box; transform-origin:center; }
.kbm-bub:hover{ transform:scale(1.09); }
.kbm-bub-num{
  font-family:var(--ff-display); font-weight:600; fill:#fff;
  text-anchor:middle; dominant-baseline:central; pointer-events:none;
  paint-order:stroke; letter-spacing:-.3px;
}

/* Aktif il nabzı */
.kbm-pulse{
  fill:none; stroke:var(--blue); stroke-width:2;
  transform-box:fill-box; transform-origin:center;
  animation:kbmPulse 2.1s ease-out infinite;
  pointer-events:none;
}
@keyframes kbmPulse{
  0%{ transform:scale(.7); opacity:.9; }
  70%{ transform:scale(2.1); opacity:0; }
  100%{ opacity:0; }
}

/* İl etiketi (aktif) */
.kbm-lab{
  font-family:var(--ff-ui); font-weight:600; font-size:12px;
  fill:var(--ink); text-anchor:middle; pointer-events:none;
  paint-order:stroke; stroke:var(--surface); stroke-width:3px;
}

/* Lejant */
/* ===========================================================
   Lejant (Haritanın Altında - Yatay)
   =========================================================== */

.kbm-legend{
  position:static;
  width:100%;
  margin:18px auto 0;
  padding:14px 18px;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;

  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm);

  font-size:13px;
  color:var(--slate-600);
}

.kbm-legend .lt{
  font-family:var(--ff-display);
  font-weight:700;
  color:var(--ink);
  margin:0 8px 0 0;
  text-transform:none;
  letter-spacing:0;
  white-space:nowrap;
}

.kbm-legend .r{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  white-space:nowrap;
}

.kbm-legend .sw{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
  flex:none;
}

@media (max-width:768px){

  .kbm-legend{
    justify-content:flex-start;
    gap:12px;
    padding:12px;
  }

  .kbm-legend .lt{
    width:100%;
    margin-bottom:6px;
  }

}

/* Tooltip */
.kbm-tip{
  position:absolute; z-index:5; pointer-events:none;
  background:var(--ink); color:#fff; border-radius:10px;
  padding:9px 12px; font-size:12.5px; line-height:1.5;
  box-shadow:var(--shadow-lg); opacity:0; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease; white-space:nowrap;
  min-width:120px;
}
.kbm-tip.on{ opacity:1; transform:translateY(0); }
.kbm-tip .tname{ font-family:var(--ff-display); font-weight:600; font-size:13.5px; margin-bottom:4px; }
.kbm-tip .trow{ display:flex; justify-content:space-between; gap:16px; }
.kbm-tip .trow .k{ color:var(--slate-300); }
.kbm-tip .trow.buy .v{ color:#7ee6a6; font-weight:600; }
.kbm-tip .trow.sell .v{ color:#f3cf86; font-weight:600; }
.kbm-tip .thint{ margin-top:5px; color:var(--slate-400); font-size:11px; }

/* Boş durum (henüz aktif ilan yok) */
.kbm-empty{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  z-index:4; text-align:center; pointer-events:none;
  background:rgba(255,255,255,.86); backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; box-shadow:var(--shadow-sm); max-width:300px;
}
.kbm-empty .ic{
  width:34px;height:34px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--slate-100); color:var(--slate-500);
}
.kbm-empty .et{ font-family:var(--ff-display); font-weight:600; font-size:14.5px; color:var(--ink); }
.kbm-empty .es{ font-size:12.5px; color:var(--slate-500); margin-top:3px; line-height:1.45; }

/* Alt: en aktif iller */
.kbm-hubs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.kbm-hub{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:30px; padding:6px 13px 6px 8px; font-size:12.5px;
  color:var(--slate-700); text-decoration:none; transition:.15s;
  box-shadow:var(--shadow-sm);
}
.kbm-hub:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.kbm-hub .hb{ width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:600;font-size:10px;color:#fff; }
.kbm-hub .hn{ font-weight:500; }
.kbm-hub .hc{ color:var(--slate-400); }

@media (max-width:640px){
  .kbm-head h2{ font-size:22px; }
  .kbm-legend{ left:10px; bottom:10px; padding:9px 11px; }
  .kbm-bub-num{ font-size:10px; }
}