/* Reboot-inspired micro interactions: restrained, tactile and motion-safe. */
html.micro-ready{--scroll-progress:0;--scroll-lean:0deg}

.motion-progress{
  position:fixed;inset:0 0 auto;z-index:300;height:2px;
  background:#002664;transform:scaleX(var(--scroll-progress));transform-origin:left;
  pointer-events:none;opacity:.7
}

.motion-dot{
  position:fixed;left:0;top:0;z-index:290;width:10px;height:10px;border-radius:50%;
  background:#62d66d;box-shadow:0 5px 18px rgba(0,0,0,.14);
  translate:-50% -50%;scale:0;opacity:0;pointer-events:none;
  transition:scale .45s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,background .25s ease;
  will-change:translate,scale
}
.motion-dot.is-on{scale:1;opacity:1}

.micro-magnetic{will-change:translate;transition:translate .55s cubic-bezier(.22,1,.36,1)}
.micro-magnetic.is-pulled{transition-duration:.12s}
.micro-ripple{position:relative;isolation:isolate;overflow:hidden}
.micro-ripple > .micro-wave{
  position:absolute;z-index:-1;width:18px;height:18px;border-radius:50%;
  background:currentColor;opacity:.12;pointer-events:none;
  translate:-50% -50%;animation:microWave .65s cubic-bezier(.22,1,.36,1) forwards
}
@keyframes microWave{to{scale:12;opacity:0}}

html.micro-ready .micro-reveal{opacity:0;transform:translateY(24px);filter:blur(5px)}
html.micro-ready .micro-reveal.micro-in{
  opacity:1;transform:none;filter:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .7s ease
}

.is .kapak,.kare{transform-style:preserve-3d;will-change:transform}
.is .kapak::after,.kare::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.34) 48%,transparent 70%);
  transform:translateX(-130%);transition:transform .8s cubic-bezier(.22,1,.36,1)
}
.is:hover .kapak::after,.kare:hover::after{transform:translateX(130%)}
.is .kapak{position:relative}

.dip-hap,.dip{rotate:var(--scroll-lean)}
.kunye .yuzluk{will-change:translate,rotate}

@media (hover:none),(pointer:coarse){.motion-dot{display:none}.micro-magnetic{translate:none!important}}
@media (prefers-reduced-motion:reduce){
  .motion-progress,.motion-dot{display:none!important}
  .micro-magnetic{translate:none!important}
  html.micro-ready .micro-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .is .kapak::after,.kare::after{display:none}
}