/* SH-01 Utility bar — identity styles (specimen .sh1). Dimensions are defaults
   overridable via the controls. */
.breakdance .essma-utilbar {
  /* Section-ready: full-bleed band whether placed at the header root OR inside
     a (boxed) Breakdance Section. Breaks out to the viewport edges so the navy
     bar always spans full width regardless of its parent container; the inner
     stays centered at max-width 1280. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--navy-deep, #112C5C);
  color: #9eaecb;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}
.breakdance .essma-utilbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 9px 24px;
}
.breakdance .essma-utilbar__left { display: inline-flex; align-items: center; gap: 9px; }
/* Live "network online" status dot — gently pulsing green (from the old site). */
.breakdance .essma-utilbar__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green, #5DB04A);
  flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(93,176,74,.18);
  animation: essma-dot-pulse 2.4s ease-out infinite;
}
@keyframes essma-dot-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(93,176,74,.18), 0 0 0 0  rgba(93,176,74,.45); }
  70%  { box-shadow: 0 0 0 3px rgba(93,176,74,.18), 0 0 0 9px rgba(93,176,74,0); }
  100% { box-shadow: 0 0 0 3px rgba(93,176,74,.18), 0 0 0 0  rgba(93,176,74,0); }
}
@media (prefers-reduced-motion: reduce) {
  .breakdance .essma-utilbar__dot { animation: none; box-shadow: 0 0 0 4px rgba(93,176,74,.18); }
}
.breakdance .essma-utilbar__tagline { color: #7a8aa8; }
.breakdance .essma-utilbar__right { display: flex; gap: 18px; align-items: center; }
.breakdance .essma-utilbar__link { font-weight: 600; color: #cdd6e6; text-decoration: none; }
.breakdance .essma-utilbar__link:hover { color: #fff; }
.breakdance .essma-utilbar__lang { color: #9eaecb; }
.breakdance .essma-utilbar__socials { display: inline-flex; gap: 12px; }
.breakdance .essma-utilbar__socials a { color: #cdd6e6; text-decoration: none; transition: color .15s; }
.breakdance .essma-utilbar__socials a:hover { color: var(--green, #5DB04A); }

@media (max-width: 767px) {
  .breakdance .essma-utilbar__left { display: none; }
}