<style>
/* BK Hero â€” gÃ¶rsel iyileÅŸtirme (paste inside mu-plugin before output) */

/* Root / container */
.bk-hero-new-root { margin: 22px 0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:#0f172a; }

/* Overall layout */
.bk-hero-new { display:flex; gap:28px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }

/* LEFT (avatar) */
.bk-hero-left { flex:0 0 300px; }
.bk-avatar-column {
  display:flex; gap:14px; align-items:center;
  background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border-radius:14px; padding:18px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.06), 0 4px 16px rgba(2,6,23,0.04);
  border: 1px solid rgba(15,23,42,0.03);
}
.bk-avatar-new { width:110px; height:110px; object-fit:cover; border-radius:12px; box-shadow: 0 12px 30px rgba(2,6,23,0.06); transition: transform .18s ease; }
.bk-avatar-link:hover .bk-avatar-new { transform: translateY(-4px) scale(1.02); }

/* Mayor details */
.bk-mayor-details { min-width:0; display:flex;flex-direction:column; gap:6px; }
.bk-mayor-name { font-weight:800; font-size:18px; color:#071127; }
.bk-mayor-sub { display:flex; gap:8px; align-items:center; color:#475569; font-size:13px; }
.bk-mayor-website a { color:#0ea5e9; text-decoration:none; font-size:10px; }
.bk-mayor-website a:hover { text-decoration:underline; }

/* CENTER (KPIs) container */
.bk-hero-center { flex:1 1 560px; display:flex; flex-direction:column; gap:14px; }

/* Card around KPI rows */
.bk-kpi-top-row {
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-radius:14px; padding:18px;
  box-shadow: 0 20px 60px rgba(2,6,23,0.06);
  border: 1px solid rgba(15,23,42,0.03);
  display:flex; flex-direction:column; gap:14px;
}

/* Top row (numbers) */
.bk-kpi-row-top { display:flex; gap:14px; align-items:stretch; justify-content:flex-start; flex-wrap:wrap; }

/* Main row (solved/unresolved/avg) */
.bk-kpi-row-main { display:flex; gap:14px; align-items:stretch; justify-content:flex-start; flex-wrap:wrap; }

/* KPI boxes â€” simplified visuals, less inner clutter */
.bk-kpi-box {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:128px; padding:16px 12px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,251,255,0.98));
  border: 1px solid rgba(15,23,42,0.03);
  box-shadow: 0 10px 30px rgba(2,6,23,0.04);
  transition: transform .16s ease, box-shadow .16s ease;
  text-align:center;
}
.bk-kpi-box.small { min-width:120px; padding:12px 10px; }
.bk-kpi-box:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(2,6,23,0.08); }

/* Make numbers more prominent, labels subtle */
.bk-kpi-box .bk-num { font-weight:800; font-size:20px; color:#071127; line-height:1; }
.bk-kpi-box .bk-lbl { font-size:13px; color:#64748b; margin-top:6px; }

/* Solved / Unresolved states â€” softer fills */
.bk-kpi-solved {
  background: linear-gradient(180deg,#f0fff6,#f7fffb);
  border: 1px solid rgba(16,185,129,0.12);
  color:#065f46;
}
.bk-kpi-unresolved {
  background: linear-gradient(180deg,#fff6f7,#fff9fa);
  border: 1px solid rgba(239,68,68,0.08);
  color:#7f1d1d;
}

/* Avg box */
.bk-kpi-avg { background: linear-gradient(180deg,#fbfdff,#ffffff); color:#0f172a; }

/* Remove double inner shadows/boxes by ensuring uniform spacing */
.bk-kpi-row-top .bk-kpi-box, .bk-kpi-row-main .bk-kpi-box { flex: 1 1 140px; }

/* RIGHT (score) */
.bk-hero-right { flex:0 0 240px; }
.bk-score-card {
  border-radius:14px; padding:18px; text-align:center;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border: 1px solid rgba(15,23,42,0.03);
  box-shadow: 0 24px 80px rgba(2,6,23,0.08);
}
.bk-score-big { font-weight:900; font-size:34px; color:#071127; margin-bottom:8px; }
.bk-stars { font-size:16px; color:#f59e0b; margin-bottom:8px; }
.bk-star.off { color:#e6eaf2; }

/* Score bar â€” smoother gradient and rounded corners */
.bk-score-bar { height:10px; border-radius:999px; background: linear-gradient(90deg,#feeded,#fef9ec); overflow:hidden; margin:12px 0; }
.bk-score-bar-fill { height:100%; background: linear-gradient(90deg,#ef4444,#10b981); transition: width .6s cubic-bezier(.2,.9,.2,1); }

/* Buttons */
.bk-actions { display:flex; gap:10px; justify-content:center; margin-top:12px; }
.bk-actions .primary, .bk-actions .secondary { padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none; }
.bk-actions .primary { background:#071127; color:#fff; box-shadow: 0 12px 40px rgba(7,17,39,0.08); }
.bk-actions .secondary { background:transparent; color:#071127; border:1px solid rgba(15,23,42,0.06); }

/* Responsive tweaks */
@media (max-width:980px) {
  .bk-hero-new { gap:18px; }
  .bk-hero-left { flex:0 0 220px; }
  .bk-hero-right { flex:0 0 220px; order:3; }
  .bk-hero-center { order:2; width:100%; }
}
@media (max-width:660px) {
  .bk-hero-new { flex-direction:column; }
  .bk-avatar-new { width:86px; height:86px; }
  .bk-kpi-row-top, .bk-kpi-row-main { flex-direction:row; overflow:auto; gap:10px; padding-bottom:6px; }
  .bk-kpi-box { min-width:120px; flex:0 0 auto; }
}

/* small polish */
.bk-mayor-name { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; max-width:200px; }
</style>