.hero-aliran{background:radial-gradient(1200px 600px at 80% 20%, #14508f 0, transparent 60%), var(--deep)}.hero-masuk{animation:.9s cubic-bezier(.2,.7,.2,1) both naik}.hero-masuk-2{animation:.9s cubic-bezier(.2,.7,.2,1) .15s both naik}@keyframes naik{0%{transform:translateY(36px)}}.tetes-wadah{aspect-ratio:520/600;position:relative}.tetes{background:linear-gradient(160deg, var(--air) 0%, var(--lapis) 55%, var(--navy) 100%);--mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M50 0C50 0 0 58 0 85a50 45 0 0 0 100 0C100 58 50 0 50 0z'/%3E%3C/svg%3E");-webkit-mask:var(--mask) center / 100% 100% no-repeat;-webkit-mask:var(--mask) center / 100% 100% no-repeat;mask:var(--mask) center / 100% 100% no-repeat;animation:6s ease-in-out infinite melayang;position:absolute;overflow:hidden}.tetes img{object-fit:cover;width:100%;height:100%}.tetes-1{width:51.9%;height:58.3%;animation-delay:-2s;top:0;left:44.2%}.tetes-2{width:44.2%;height:50%;top:15%;left:3.8%}.tetes-3{opacity:.92;width:38.5%;height:43.3%;animation-delay:-4s;top:53.3%;left:57.7%}.tetes-4{opacity:.85;width:28.8%;height:32.5%;animation-delay:-1s;top:65%;left:11.5%}@keyframes melayang{50%{transform:translateY(-14px)}}.gelembung{background:var(--air);opacity:0;border-radius:50%;animation:9s linear infinite gelembung;position:absolute;bottom:0}@keyframes gelembung{0%{opacity:0;transform:translateY(0)}15%{opacity:.6}to{opacity:0;transform:translateY(-500px)}}.gelombang{pointer-events:none;line-height:0;position:absolute;inset:auto 0 -2px;overflow:hidden}.gelombang svg{width:200%;height:120px;animation:14s linear infinite geser}.gelombang.belakang svg{opacity:.5;animation-duration:22s}@keyframes geser{to{transform:translate(-50%)}}.skema .bagian{transition:opacity .6s}.skema [data-gerak=siap] .bagian:not(.aktif){opacity:.4}.skema .bagian .riak{opacity:0}.skema .bagian.aktif .riak{transform-box:fill-box;transform-origin:50%;animation:2.4s ease-out infinite riak}.skema .komponen{transition:opacity .6s}.skema [data-gerak=siap] .komponen:not(.aktif){opacity:.45}.skema .komponen .nomor{transition:background-color .6s,color .6s}.skema [data-gerak=siap] .komponen:not(.aktif) .nomor{background:var(--navy);color:#fff}.skema .pipa-isi{stroke-dasharray:1;stroke-dashoffset:0}.skema .pipa-tegak{height:100%;transform:scaleY(var(--p,1));transform-origin:top}.peta-kotak[data-gerak=siap] .pin{opacity:0}.peta-kotak.on .pin{animation:muncul-pin .6s var(--d) forwards}.peta-kotak.on .pin .riak{animation:riak 2.4s calc(var(--d) + .6s) infinite;transform-box:fill-box;transform-origin:50%}.pin .riak{opacity:0}@keyframes muncul-pin{0%{opacity:0}to{opacity:1}}.pin{cursor:pointer;outline:none}.pin .cincin-fokus{opacity:0}.pin:focus-visible .cincin-fokus{opacity:1}@keyframes riak{0%{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(2.4)}}.tetes-jatuh{animation:1.6s ease-in infinite jatuh}@keyframes jatuh{80%{opacity:1}to{opacity:0;transform:translateY(46px)}}.kartu-angkat{transition:transform .3s}.kartu-angkat:hover{transform:translateY(-6px)}@media (prefers-reduced-motion:reduce){.peta-kotak[data-gerak=siap] .pin{opacity:1}.gelembung{display:none}}