.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  margin-left: -4px;
  margin-top: -4px;
}

.cursor__dot {
  width: 8px;
  height: 8px;
  background: var(--color-red);
}

.cursor__ring {
  width: 38px;
  height: 38px;
  margin-left: -19px;
  margin-top: -19px;
  border: 1.5px solid rgba(47, 122, 59, 0.5);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.cursor__ring--active {
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border-color: var(--color-green);
  background: rgba(111, 191, 115, 0.1);
}

/* Dokunmatik / kaba işaretçi cihazlarda gizle */
@media (pointer: coarse) {
  .cursor__dot,
  .cursor__ring {
    display: none;
  }
}