.payment-motion{width:100%;min-width:0;margin:0;position:relative;container-type:inline-size}.motion-scene{--pointer-x:0px;--pointer-y:0px;aspect-ratio:1;isolation:isolate;width:100%;position:relative}.motion-backdrop{color:#fff;background:#ed2b31;border-radius:14px;position:absolute;inset:5% 4% 8% 9%;overflow:hidden;transform:rotate(-7deg)}.motion-backdrop:after{content:"";background:#bf141c;width:75%;height:150%;position:absolute;top:-20%;right:-40%;transform:rotate(24deg)}.motion-backdrop-lines{opacity:.16;background-image:repeating-linear-gradient(0deg,#0000,#0000 39px,#fff 40px);position:absolute;inset:0}.motion-parallax{transform:translate3d(var(--pointer-x), var(--pointer-y), 0);transition:transform .3s ease-out;position:absolute;inset:0}.motion-checkout-position{perspective:1000px;z-index:2;width:61%;position:absolute;top:15%;left:21%}.motion-checkout{transform-origin:50% 70%;background:#fff;border:1px solid #e7ddd8;border-radius:11px;overflow:hidden;transform:rotate(-6deg)rotateY(-9deg)rotateX(5deg);box-shadow:1px 2px #ded5ce,3px 5px #ddd1c7,0 25px 45px -15px #3d0b1b66}.motion-browser-bar{color:#74756e;background:#f8f7f4;border-bottom:1px solid #ece8e1;align-items:center;gap:4px;height:5.5cqw;min-height:18px;padding-inline:5%;display:flex}.motion-browser-bar>span{background:#cdcfc8;border-radius:50%;width:4px;height:4px}.motion-browser-bar>svg{margin-left:auto}.motion-browser-bar small{margin-left:2px;font-size:1.35cqw}.motion-checkout-content{padding:6% 7% 3%}.motion-merchant{justify-content:space-between;align-items:center;gap:8px;display:flex}.motion-merchant .brand-image{width:41%;height:auto}.motion-total-label{color:#697064;margin-top:7%;font-size:1.65cqw}.motion-total{letter-spacing:-.05em;color:#282b25;margin-top:2%;font-size:5.2cqw;font-weight:600;line-height:1.25;display:block}.motion-total>span{color:#a4a69f;font-size:3.2cqw;font-weight:400}.motion-order-divider{color:#777d70;border-top:1px dashed #dce0d7;justify-content:space-between;margin-top:5%;padding-block:6% 3%;font-size:1.4cqw;display:flex}.motion-method{border:1px solid #e7e9e1;border-radius:5px;justify-content:space-between;align-items:center;gap:8px;height:6.2cqw;margin-top:3%;padding:2% 4%;display:flex}.motion-method .channel-logo{width:14cqw;height:5cqw}.motion-method .channel-logo[data-channel=qris]{width:11cqw}.motion-bank-options{align-items:center;gap:2cqw;display:flex}.motion-bank-options .channel-logo{width:10cqw;height:4.3cqw}.motion-radio{border:1px solid #c8ccc0;border-radius:50%;flex:none;place-items:center;width:2.2cqw;height:2.2cqw;display:grid}.motion-radio svg{width:1.5cqw;height:1.5cqw}.motion-method-qris{background:#fff6f4;border-color:#ecaaa2}.motion-method-qris .motion-radio{background:var(--red);border-color:var(--red);color:#fff}.motion-pay-button{color:#fff;background:#252a24;border-radius:5px;justify-content:space-between;align-items:center;margin-top:5%;padding:4% 5%;font-size:1.8cqw;display:flex}.motion-pay-button>svg{width:2.4cqw;height:2.4cqw}.motion-link-position{z-index:4;width:48%;position:absolute;top:9%;left:0}.motion-link-card{background:#fffdf8;border:1px solid #efdfd4;border-radius:9px;align-items:center;gap:4%;padding:5% 6%;display:flex;transform:rotate(-4deg);box-shadow:0 10px 24px #541c2114}.motion-link-icon{color:#b82d25;background:#ffe8df;border-radius:7px;flex:none;place-items:center;width:7cqw;height:7cqw;display:grid}.motion-link-icon svg{width:3.3cqw;height:3.3cqw}.motion-link-card small{color:#807468;margin-bottom:4px;font-size:1.4cqw;display:block}.motion-link-card strong{align-items:center;gap:6px;font-size:1.85cqw;font-weight:600;display:flex}.motion-link-card strong svg{width:2cqw;height:2cqw}.motion-link-check{color:#38764c;margin-left:auto}.motion-link-check svg{width:2.2cqw;height:2.2cqw}.motion-reel-position{z-index:3;width:20%;position:absolute;top:31%;right:0;transform:rotate(8deg)}.motion-reel{height:32cqw;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 10% 90%,#0000);mask-image:linear-gradient(#0000,#000 10% 90%,#0000)}.motion-reel-track{transform:translateY(0)}.motion-reel-set{flex-direction:column;gap:2cqw;padding-bottom:2cqw;display:flex}.motion-reel-item{background:#fff;border:1px solid #ebe7df;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;height:8.5cqw;display:flex;box-shadow:0 4px 12px #661b1c14}.motion-reel-item .channel-logo{width:16cqw;height:7cqw}.motion-success-position{z-index:5;width:61%;position:absolute;top:73%;left:2%}.motion-success-card{background:#f7ffe9;border:1px solid #c8dfae;border-radius:9px;align-items:center;gap:5%;padding:5%;display:flex;transform:rotate(3deg);box-shadow:0 16px 35px -15px #27381759}.motion-success-icon{color:#ddf6b9;background:#294830;border-radius:50%;flex-shrink:0;place-items:center;width:8cqw;height:8cqw;display:grid}.motion-success-icon svg{width:4cqw;height:4cqw}.motion-success-card strong{color:#2c4327;font-size:2.1cqw;font-weight:600;line-height:1.3;display:block}.motion-success-card div>span{color:#526643;margin-top:5px;font-size:1.6cqw;display:block}.motion-success-card div>span>span{margin-inline:4px}.motion-success-card>svg{color:#4f6f38;width:3cqw;height:3cqw;margin-left:auto}.motion-toggle{width:44px;height:44px;color:var(--muted);border-radius:50%;padding:12px;position:absolute;bottom:0;right:0}.motion-toggle:hover{background:var(--secondary);color:var(--red)}.motion-toggle:focus-visible{outline:2px solid var(--red);outline-offset:3px}@media (prefers-reduced-motion:no-preference){.motion-checkout{animation:8s ease-in-out infinite payment-checkout-float}.motion-link-card{animation:8s cubic-bezier(.22,.7,.25,1) infinite payment-link-arrive}.motion-method-qris{animation:8s ease-in-out infinite payment-method-select}.motion-pay-button{animation:8s ease-in-out infinite payment-button-confirm}.motion-success-card{animation:8s cubic-bezier(.22,.7,.25,1) infinite payment-success-arrive}.motion-success-icon svg{animation:8s ease-in-out infinite payment-checkmark}.motion-reel-track{animation:16s linear infinite payment-channel-reel}.motion-scene[data-running=false] *{animation-play-state:paused!important}}@keyframes payment-checkout-float{0%,to{transform:translateY(5px)rotate(-6deg)rotateY(-9deg)rotateX(5deg)}45%{transform:translate(-5px,-11px)rotate(-3deg)rotateY(-4deg)rotateX(2deg)}75%{transform:translate(3px,-4px)rotate(-5deg)rotateY(-7deg)rotateX(4deg)}}@keyframes payment-link-arrive{0%,to{opacity:1;transform:translate(-5px)rotate(-4deg)}15%,35%{opacity:1;transform:translate(8px,8px)rotate(-2deg)}55%,83%{opacity:1;transform:translate(2px,-8px)rotate(-5deg)}90%{opacity:0;transform:translate(13px,-12px)rotate(-5deg)}91%{opacity:0;transform:translate(-20px)rotate(-4deg)}}@keyframes payment-method-select{0%,20%,94%,to{background:#fff;border-color:#e7e9e1}28%,83%{background:#fff1ec;border-color:#dc7266}}@keyframes payment-button-confirm{0%,35%,95%,to{background:#252a24;transform:scale(1)}40%{background:#d52329;transform:scale(.97)}45%,80%{background:#d52329;transform:scale(1)}}@keyframes payment-success-arrive{0%,40%,to{opacity:0;transform:translate(-18px,22px)rotate(0)scale(.95)}49%,80%{opacity:1;transform:translate(0,0)rotate(3deg)scale(1)}88%,95%{opacity:0;transform:translate(8px,-15px)rotate(4deg)scale(.98)}}@keyframes payment-checkmark{0%,46%,to{opacity:0;transform:scale(.5)}54%,88%{opacity:1;transform:scale(1)}}@keyframes payment-channel-reel{to{transform:translateY(-50%)}}@media (max-width:800px){.payment-motion{justify-self:center;width:min(540px,100%)}.motion-scene{margin-top:4px}}@media (prefers-reduced-motion:reduce){.motion-parallax{transition:none;transform:none}}