/* Tombol WhatsApp melayang "Pengait Gelang": dua garis emas tipis bertemu dan terkunci. */
.ddwa{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:950;width:68px;height:68px;display:block;text-decoration:none;
  --g1:var(--wa-gold-a,#e9cf93);--g2:var(--wa-gold-b,#b98a45);-webkit-tap-highlight-color:transparent}
.ddwa-svg{width:68px;height:68px;overflow:visible;transition:transform .25s cubic-bezier(.3,.9,.3,1)}
.ddwa:active .ddwa-svg{transform:scale(.94)}
.ddwa-core{fill:var(--wa-core,#1b1220);stroke:var(--wa-core-line,rgba(233,207,147,.35));stroke-width:.8}
.ddwa-glyph{fill:none;stroke:var(--wa-ink,#e9cf93);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ddwa-arc{fill:none;stroke:url(#ddwa-grad);stroke-width:2;stroke-linecap:round;transform-box:view-box;transform-origin:48px 48px}
.ddwa-clasp{fill:url(#ddwa-grad);transform-box:fill-box;transform-origin:center}
.ddwa-spark{stroke:var(--g1);stroke-width:1.4;stroke-linecap:round;opacity:0}
.ddwa-glint{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:10 241.3;stroke-dashoffset:0;opacity:0;transform-box:view-box;transform-origin:48px 48px;transform:rotate(-90deg)}
.ddwa-label{position:absolute;right:62px;top:50%;margin-top:-17px;height:34px;padding:0 22px 0 16px;display:flex;align-items:center;white-space:nowrap;border-radius:18px 0 0 18px;
  font:500 13px/1 var(--wa-font,system-ui,sans-serif);letter-spacing:.04em;color:var(--wa-label-fg,#f1e6cf);background:var(--wa-label-bg,#1b1220);border:1px solid var(--wa-core-line,rgba(233,207,147,.35));border-right:0;
  opacity:0;transform:translateX(18px);clip-path:inset(0 0 0 100%);transition:opacity .45s,transform .6s cubic-bezier(.22,.8,.24,1),clip-path .6s cubic-bezier(.22,.8,.24,1);pointer-events:none}
.ddwa.show .ddwa-label{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
/* kunci pertama kali: dua garis datang dari kiri dan kanan */
.ddwa.go .arc-l{animation:ddwaL 1.15s cubic-bezier(.3,.9,.3,1) both}
.ddwa.go .arc-r{animation:ddwaR 1.15s cubic-bezier(.3,.9,.3,1) both}
.ddwa.go .ddwa-clasp{animation:ddwaClasp .6s 1s cubic-bezier(.3,1.6,.4,1) both}
.ddwa.go .ddwa-spark{animation:ddwaSpark .5s 1.05s ease-out both}
.ddwa.go .ddwa-glint{animation:ddwaGlint 1.4s 1.25s ease-in-out both}
/* ulang saat diam: garis membuka sedikit lalu mengunci lagi */
.ddwa.idle .arc-l{animation:ddwaIdleL 1s cubic-bezier(.3,.9,.3,1) both}
.ddwa.idle .arc-r{animation:ddwaIdleR 1s cubic-bezier(.3,.9,.3,1) both}
.ddwa.idle .ddwa-clasp{animation:ddwaClasp .55s .8s cubic-bezier(.3,1.6,.4,1) both}
.ddwa.idle .ddwa-spark{animation:ddwaSpark .5s .85s ease-out both}
.ddwa.idle .ddwa-glint{animation:ddwaGlint 1.3s 1s ease-in-out both}
/* ditekan: garis mengencang */
.ddwa.press .ddwa-arc{animation:ddwaPress .28s ease-out both}
@keyframes ddwaL{0%{transform:translate(-36px,0) rotate(-22deg);opacity:0}45%{opacity:1}74%{transform:translate(2.5px,0) rotate(0)}88%{transform:translate(-1px,0)}100%{transform:none;opacity:1}}
@keyframes ddwaR{0%{transform:translate(36px,0) rotate(22deg);opacity:0}45%{opacity:1}74%{transform:translate(-2.5px,0) rotate(0)}88%{transform:translate(1px,0)}100%{transform:none;opacity:1}}
@keyframes ddwaIdleL{0%{transform:none}28%{transform:translate(-7px,-1px) rotate(-9deg)}72%{transform:translate(1.6px,0)}100%{transform:none}}
@keyframes ddwaIdleR{0%{transform:none}28%{transform:translate(7px,-1px) rotate(9deg)}72%{transform:translate(-1.6px,0)}100%{transform:none}}
@keyframes ddwaClasp{0%{transform:scale(0)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes ddwaSpark{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@keyframes ddwaGlint{0%{opacity:0;stroke-dashoffset:0}10%{opacity:.95}90%{opacity:.95}100%{opacity:0;stroke-dashoffset:-251.3}}
@keyframes ddwaPress{0%{stroke-width:2}50%{stroke-width:3.6;transform:scale(.93)}100%{stroke-width:2;transform:none}}
@media (max-width:520px){.ddwa-label{font-size:12.5px;padding:0 20px 0 14px}}
@media (prefers-reduced-motion:reduce){.ddwa-label{transition:none}.ddwa.go *,.ddwa.idle *{animation:none!important}}
