/* ==========================================================================
   HızlıYaz - Hayalet Yarışçı, Ambiyans Sesleri ve Ergonomi Stilleri
   ========================================================================== */

/* 1. Hayalet Yarışçı İmleci (Ghost Caret) */
.ghost-caret-element {
  position: absolute;
  pointer-events: none;
  z-index: 8;
  width: 2.5px;
  height: 24px;
  background-color: rgba(236, 72, 153, 0.7);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
  transition: left 0.1s linear, top 0.12s ease;
  display: none;
}

.ghost-icon-tag {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(236, 72, 153, 0.85);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  font-family: var(--font-mono);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 2. Ergonomi ve El Dengesi Göstergesi */
.hand-balance-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 1rem;
}

.hand-balance-bar {
  height: 8px;
  width: 100%;
  display: flex;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.hand-left-fill {
  background: #3b82f6;
  transition: width 0.3s ease;
}

.hand-right-fill {
  background: #ec4899;
  transition: width 0.3s ease;
}

.hand-balance-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
}