html.has-custom-cursor, body.has-custom-cursor {
  cursor: none !important;
}

/* Hide default cursor on all elements when custom cursor is active */
html.has-custom-cursor *, body.has-custom-cursor * {
  cursor: none !important;
}

/* Custom cursor element */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;            /* base size - değiştirilebilir */
  height: 48px;
  pointer-events: none;   /* fare etkileşimlerini engellemez */
  transform: translate(-50%, -50%);
  transition: transform 50ms linear; /* mouse hareketi için hızlı */
  z-index: 99999;
  mix-blend-mode: normal;
  will-change: transform;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
  transform-origin: center center;
  /* Hardware acceleration */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* centralize the SVG inside */
.custom-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

/* Crosshair lines - ensure they're visible */
.custom-cursor svg line {
  stroke: #2c3e50 !important;
  stroke-width: 2 !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}

/* default state */
.custom-cursor .ring {
  stroke: #2c3e50;
  stroke-width: 2.5;
  fill: none;
  opacity: 0.95;
  transition: stroke 160ms ease, transform 160ms ease, opacity 160ms ease;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
  transform-origin: center center;
  will-change: transform, stroke, opacity;
}
.custom-cursor .dot {
  fill: #e74c3c; /* daha koyu kırmızı */
  transition: transform 160ms ease, opacity 160ms ease, fill 160ms ease;
  transform-origin: center center;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
  will-change: transform, fill, opacity;
}

/* locked state (when hovering a .lock-target) */
.custom-cursor.locked {
  transform: scale(0.86);
  transform-origin: center center;
  will-change: transform;
}
.custom-cursor.locked .ring {
  stroke: #f39c12;
  stroke-width: 3;
  opacity: 1;
  transform: scale(0.9);
  filter: drop-shadow(0 0 3px rgba(243, 156, 18, 0.4));
  transform-origin: center center;
  will-change: transform, stroke, opacity;
}
.custom-cursor.locked .dot {
  transform: scale(0.85);
  fill: #f39c12;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(243, 156, 18, 0.4));
  transform-origin: center center;
  will-change: transform, fill, opacity;
}
.custom-cursor.locked svg line {
  stroke: #f39c12 !important;
  filter: drop-shadow(0 0 2px rgba(243, 156, 18, 0.3));
}

/* click state - locking mechanism */
.custom-cursor.clicking {
  transform: scale(0.75);
  transform-origin: center center;
  will-change: transform;
}
.custom-cursor.clicking .ring {
  stroke: #c0392b;
  stroke-width: 3.5;
  opacity: 1;
  transform: scale(0.8);
  animation: lockPulse 0.3s ease-out;
  filter: drop-shadow(0 0 4px rgba(192, 57, 43, 0.5));
  transform-origin: center center;
  will-change: transform, stroke, opacity;
}
.custom-cursor.clicking .dot {
  transform: scale(0.7);
  fill: #c0392b;
  opacity: 1;
  animation: lockDot 0.3s ease-out;
  filter: drop-shadow(0 0 4px rgba(192, 57, 43, 0.5));
  transform-origin: center center;
  will-change: transform, fill, opacity;
}
.custom-cursor.clicking svg line {
  stroke: #c0392b !important;
  filter: drop-shadow(0 0 2px rgba(192, 57, 43, 0.4));
}

/* pulse effect while locked */
.custom-cursor.locked .pulse {
  opacity: 0.6;
  animation: pulse 1s infinite;
  filter: drop-shadow(0 0 3px rgba(243, 156, 18, 0.3));
  transform-origin: center center;
  will-change: transform, opacity;
}



/* lock animation keyframes */
@keyframes lockPulse {
  0% { 
    transform: scale(0.8); 
    stroke-width: 3.5;
    opacity: 1;
  }
  50% { 
    transform: scale(1.2); 
    stroke-width: 4.5;
    opacity: 0.9;
  }
  100% { 
    transform: scale(0.8); 
    stroke-width: 3.5;
    opacity: 1;
  }
}

@keyframes lockDot {
  0% { 
    transform: scale(0.7); 
    opacity: 1;
  }
  50% { 
    transform: scale(1.3); 
    opacity: 0.95;
  }
  100% { 
    transform: scale(0.7); 
    opacity: 1;
  }
}

@keyframes pulse {
  0% { 
    transform: scale(0.9); 
    opacity: 0.6; 
    transform-origin: center center;
  }
  50% { 
    transform: scale(1.25); 
    opacity: 0.2; 
    transform-origin: center center;
  }
  100% { 
    transform: scale(0.9); 
    opacity: 0.6; 
    transform-origin: center center;
  }
}

/* optional: smaller cursor on mobile / hide on touch devices */
@media (hover: none) and (pointer: coarse) {
  html.has-custom-cursor, body.has-custom-cursor { cursor: default !important; }
  html.has-custom-cursor *, body.has-custom-cursor * { cursor: default !important; }
  .custom-cursor { display: none !important; }
}

/* Accessibility: if user prefers reduced motion, reduce animations */
@media (prefers-reduced-motion: reduce) {
  .custom-cursor, .custom-cursor .pulse { animation: none !important; transition: none !important; }
}