/* =====================================================================
   BORDER LIGHT — dönen kenar ışığı efekti
   Kartta class="border-light" ve içinde .border-light__ring olur.
   Halka sabit kalır, içindeki gradient döner. Böylece geniş kartta
   kenar şekli bozulmaz ve ışık sürekli hareket eder.
   ===================================================================== */

.border-light {
  --bl-speed: 3s;
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--c) 42%, transparent);
}

.border-light__ring {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 1.6px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.border-light__rotor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 250deg,
    color-mix(in srgb, var(--c, #33d017) 22%, transparent) 296deg,
    var(--c, #33d017) 334deg,
    #ffffff 352deg,
    var(--c, #33d017) 360deg
  );
  transform: translate(-50%, -50%);
  animation: bl-spin var(--bl-speed) linear infinite;
  will-change: transform;
}

@keyframes bl-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .border-light__rotor { animation: none; }
}