/* NEFES Data CRM — ButikHizmeti'nin 6 haneli OTP yörünge animasyonu.
   Yalnız /datacrm/ SMS kodu ekranında, kimlik doğrulamadan bağımsız görsel katman. */
#authCodeForm .crm-otp-stage {
  --otp-mint: #5ee0b2;
  --otp-aqua: #a7ffdc;
  position: relative;
  isolation: isolate;
  width: min(82vw, 34dvh, 305px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 5px auto 14px;
  transform: translate(var(--cx,0%),var(--cy,0%)) rotate(var(--cr,0deg)) scale(var(--cs,1));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color: transparent;
}
#crmOtpStage .crm-orbit-track {
  position: absolute;
  top: 11%; left: 19%;
  width: 62%; height: 62%;
  border-radius: 50%;
  border: 1px solid rgba(118,238,194,.40);
  background: radial-gradient(circle,rgba(94,224,178,.14) 0%,transparent 68%);
  box-shadow: 0 0 0 18px rgba(94,224,178,.042), inset 0 0 48px rgba(94,224,178,.08);
  opacity: .92;
  transition: opacity .5s,transform .65s;
  pointer-events: none;
}
#crmOtpStage .crm-otp-rotor {position:absolute;inset:0;transform-origin:50% 42%;pointer-events:none}
#crmOtpStage .crm-otp-slot {
  position:absolute;
  top:85%;left:calc(50% + var(--entry-x));
  width:clamp(36px,10vw,45px);height:clamp(47px,12vw,56px);
  transform:translate(-50%,-50%);
  transition:left .85s cubic-bezier(.22,1,.36,1),top .85s cubic-bezier(.22,1,.36,1),opacity .3s;
}
#crmOtpStage .crm-otp-slot.filled {left:calc(50% + var(--orbit-x));top:calc(42% + var(--orbit-y))}
#crmOtpStage .crm-otp-tile {
  display:grid;place-items:center;
  width:100%;height:100%;
  border:1px solid rgba(131,243,205,.29);border-radius:14px;
  background:linear-gradient(145deg,#23443d,#102b2b);
  color:#f4fffa;font:750 24px/1 Manrope,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  box-shadow:0 8px 18px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.07);
  transition:background .35s,box-shadow .35s,border-color .35s;
}
#crmOtpStage .crm-otp-slot.filled .crm-otp-tile {
  background:linear-gradient(145deg,#b8ffe5,#55daa9);
  border-color:#bbffe5;color:#10302a;
  box-shadow:0 10px 24px rgba(94,224,178,.22),inset 0 1px rgba(255,255,255,.64);
}
#crmOtpStage .crm-otp-slot.active .crm-otp-tile {outline:2px solid var(--otp-mint);outline-offset:4px}
#crmOtpStage .crm-orbit-center {
  position:absolute;left:50%;top:42%;
  transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;transition:opacity .4s;
}
#crmOtpStage .crm-orbit-spark {
  display:block;color:var(--otp-mint);font-size:30px;line-height:1;margin-bottom:10px;
  text-shadow:0 0 18px rgba(94,224,178,.6);
}
#crmOtpStage #crmOrbitCaption {
  display:block;color:#a2d5c4;
  font:750 8.4px/1.8 Manrope,Arial,sans-serif;
  letter-spacing:.15em;
  white-space:nowrap;
}
#authCodeForm #crmOtpStage.crm-orbit-ready #crmOtp {
  position:absolute!important;
  inset:auto 0 5%!important;
  width:100%!important;height:18%!important;
  margin:0!important;padding:0!important;
  border:0!important;outline:0!important;background:transparent!important;
  font-size:16px!important;letter-spacing:0!important;
  opacity:.012!important;caret-color:transparent;
  cursor:text;z-index:3;
}
#crmOtpStage:focus-within .crm-orbit-track {border-color:rgba(167,255,220,.78)}
#crmOtpStage[data-phase="spinning"] .crm-otp-rotor {animation:crm-orbit-revolve 5.6s cubic-bezier(.4,0,.2,1) both}
#crmOtpStage[data-phase="spinning"] .crm-otp-tile {animation:crm-tile-revolve 1.85s ease-in-out 3}
#crmOtpStage[data-phase="spinning"] .crm-orbit-spark {animation:crm-gentle-glow 1.4s ease-in-out 4}
#crmOtpStage[data-phase="merging"] .crm-otp-slot {
  left:50%;top:42%;opacity:0;
  transition:left .65s cubic-bezier(.65,0,.35,1),top .65s cubic-bezier(.65,0,.35,1),opacity .25s .4s;
}
#crmOtpStage[data-phase="merging"] .crm-orbit-track {transform:scale(.05);opacity:0}
#crmOtpStage[data-phase="merging"] .crm-orbit-center,
#crmOtpStage[data-phase="success"] .crm-orbit-center,
#crmOtpStage[data-phase="success"] .crm-orbit-track,
#crmOtpStage[data-phase="success"] .crm-otp-rotor {opacity:0}
#crmOtpStage .crm-phone-success {
  position:absolute;top:17%;left:0;right:0;
  text-align:center;
  animation:crm-success-reveal .5s ease-out both;
}
#crmOtpStage .crm-success-mark {
  display:grid;place-items:center;
  width:76px;height:76px;margin:0 auto 18px;
  border-radius:50%;
  color:#12352a;background:linear-gradient(135deg,#c8ffeb,#5cdeb3);
  box-shadow:0 0 0 12px rgba(94,224,178,.11),0 0 55px rgba(94,224,178,.27);
  font:850 36px/1 Manrope,Arial,sans-serif;
}
#crmOtpStage .crm-phone-success h3 {margin:0 0 7px;color:#edfff6;font-size:21px;font-weight:750}
#crmOtpStage .crm-phone-success p {margin:0;color:#b5d5c8;font-size:12px}
#crmOtpStage[data-phase="error"] {animation:crm-error-nudge .3s ease-out}
#crmOtpStage[data-phase="error"] .crm-otp-tile {border-color:#e68f8a}
#crmOtpStage:not(.crm-orbit-ready) {
  width:100%;height:auto;aspect-ratio:auto;transform:none;
  margin:0 auto 14px;
}
#crmOtpStage:not(.crm-orbit-ready) .crm-orbit-track,
#crmOtpStage:not(.crm-orbit-ready) .crm-orbit-center,
#crmOtpStage:not(.crm-orbit-ready) .crm-otp-rotor {display:none}
#authCodeForm #crmOtpStage:not(.crm-orbit-ready) #crmOtp {opacity:1}
@keyframes crm-orbit-revolve {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes crm-tile-revolve {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes crm-gentle-glow {50%{opacity:.35;transform:scale(.85)}}
@keyframes crm-success-reveal {from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes crm-error-nudge {25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:560px) {
  #authCodeForm .crm-otp-stage{width:min(78vw,34dvh,290px);margin-block:7px 13px}
  #crmOtpStage .crm-otp-slot{width:clamp(34px,10vw,42px);height:clamp(44px,12vw,52px)}
}
@media (prefers-reduced-motion:reduce) {
  #crmOtpStage,#crmOtpStage * {animation:none!important;transition:none!important}
  #crmOtpStage .crm-otp-slot.filled{left:calc(50% + var(--orbit-x));top:calc(42% + var(--orbit-y))}
  #crmOtpStage[data-phase="merging"] .crm-otp-slot{left:50%;top:42%}
}