*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;background:#1a1033;overflow-x:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(120deg,#ff6ec4,#7873f5,#34d399,#fbbf24);background-size:400% 400%;animation:grad 18s ease infinite}
.bg:after{content:"";position:absolute;inset:0;background:rgba(20,10,45,.45)}
.b{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;animation:drift 14s ease-in-out infinite alternate;z-index:1}
.b1{width:320px;height:320px;background:#ff4d8d;top:-80px;left:-60px}
.b2{width:380px;height:380px;background:#60a5fa;bottom:-100px;right:-80px;animation-duration:18s}
.b3{width:260px;height:260px;background:#fbbf24;top:40%;left:45%;animation-duration:22s}
@keyframes grad{50%{background-position:100% 50%}}
@keyframes drift{to{transform:translate(120px,140px) scale(1.3)}}
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
#fx span{position:absolute;top:-40px;animation:fall linear forwards}
#fx .fl{top:auto;bottom:-40px;opacity:.55;animation-name:rise}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@keyframes rise{to{transform:translateY(-115vh) rotate(40deg)}}
#app{position:relative;z-index:2;min-height:100vh;padding:24px 16px 60px;max-width:960px;margin:auto}
.in{animation:in .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes in{from{opacity:0;transform:translateY(30px) scale(.95)}}
.glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.hero{text-align:center;padding:40px 0 28px}
.logo{font-size:72px;display:inline-block;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(6deg)}}
h1{font-size:clamp(28px,6vw,44px);margin:6px 0;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.hero p{opacity:.85;margin:6px 0 20px}
.btn{position:relative;overflow:hidden;border:0;border-radius:999px;padding:14px 26px;font:600 16px inherit;font-family:inherit;color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff4d8d,#8b5cf6);box-shadow:0 8px 24px rgba(255,77,141,.45);transition:transform .2s,box-shadow .2s;text-decoration:none;display:inline-block}
.btn:hover{transform:translateY(-3px) scale(1.04)}.btn:active{transform:scale(.95)}
.btn:after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:sweep 3s infinite}
@keyframes sweep{60%,100%{left:140%}}
.btn.alt{background:rgba(255,255,255,.18);box-shadow:none;border:1px solid rgba(255,255,255,.35)}
.back{background:none;border:0;color:#fff;font-size:15px;cursor:pointer;opacity:.85;padding:8px 0;font-family:inherit}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.empty{text-align:center;opacity:.8;grid-column:1/-1}
.item{display:flex;align-items:center;gap:12px;padding:14px;animation:in .6s both;transition:transform .25s;border-left:6px solid var(--a)}
.item:hover{transform:translateY(-4px) rotate(-.6deg)}
.ie{font-size:34px;animation:bob 3s infinite}.it{flex:1;min-width:0}.it b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.it small{opacity:.7}
.ia{display:flex;gap:4px}.ia button{width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.15);cursor:pointer;font-size:17px;transition:transform .2s,background .2s}
.ia button:hover{transform:scale(1.25) rotate(-8deg);background:rgba(255,255,255,.3)}
.t-pink{--a:#ff6ec4;--b:#ff9a8b}.t-biru{--a:#38bdf8;--b:#6366f1}.t-emas{--a:#fbbf24;--b:#f97316}.t-hijau{--a:#34d399;--b:#0ea5e9}.t-ungu{--a:#a78bfa;--b:#ec4899}
.wrap{max-width:900px;margin:auto}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center}
.two{display:grid;gap:20px;grid-template-columns:1fr;margin-top:12px}
@media(min-width:800px){.two{grid-template-columns:1fr 1fr;align-items:start}}
.form{padding:20px;display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
input,textarea{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;padding:12px 14px;font:16px inherit;font-family:inherit;outline:0;transition:box-shadow .2s,transform .2s}
input:focus,textarea:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45);transform:scale(1.01)}
::placeholder{color:rgba(255,255,255,.55)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font-family:inherit;transition:transform .2s}
.chips button.on{background:#fff;color:#4c1d95;transform:scale(1.08);font-weight:700}
.chips .sw{width:36px;height:36px;padding:0;background:linear-gradient(135deg,var(--a),var(--b))}
.chips .sw.on{outline:3px solid #fff;outline-offset:2px;background:linear-gradient(135deg,var(--a),var(--b))}
.pv{position:sticky;top:16px;display:flex;justify-content:center;perspective:900px}
.card{position:relative;overflow:hidden;width:min(92vw,420px);padding:34px 26px;border-radius:26px;text-align:center;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .15s,background .5s;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.card .occ{font-size:60px;animation:bob 2.2s infinite}
.card h2{margin:8px 0 14px;font-size:24px}
.card .msg{font-family:"Segoe Script","Bradley Hand","Comic Sans MS",cursive;line-height:1.7;white-space:pre-wrap;word-break:break-word;min-height:60px}
.card .from{margin-top:18px;font-weight:700;opacity:.95}
.card .shine:after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(20deg);animation:sweep 4s infinite}
.card.rise{animation:rise2 1s cubic-bezier(.2,1.1,.3,1) both}
@keyframes rise2{from{opacity:0;transform:translateY(120px) scale(.5) rotate(-8deg)}}
.res{padding:30px 22px;max-width:460px;width:100%}.res p{opacity:.85;margin:8px 0 14px}.res input{text-align:center;margin-bottom:14px}.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.row .btn{padding:12px 16px;font-size:14px}
.load{font-size:80px;text-align:center;padding-top:30vh;animation:bob 1s infinite}
.mk{margin-top:26px}.hint{margin-top:22px;opacity:.9;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(1.05)}}
/* amplop */
.env{position:relative;width:min(80vw,320px);height:210px;cursor:pointer;perspective:800px;animation:bob 3s infinite;transition:transform .5s,opacity .5s}
.env.gone{opacity:0;transform:scale(.6) translateY(60px)}
.env .back-e,.env .front{position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,#fde68a,#f59e0b)}
.env .front{clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);background:linear-gradient(135deg,#fcd34d,#f59e0b);z-index:3}
.env .flap{position:absolute;left:0;right:0;top:0;height:60%;background:#f59e0b;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s;z-index:4;backface-visibility:visible}
.env.open .flap{transform:rotateX(180deg);z-index:1}
.env .seal{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:44px;z-index:5;transition:.4s}
.env.open .seal{opacity:0;transform:translate(-50%,-50%) scale(2)}
/* overlay animasi */
.ov{position:fixed;inset:0;z-index:100;background:rgba(15,8,35,.6);backdrop-filter:blur(6px);display:grid;place-items:center;animation:fadein .3s both}
.ov.out{animation:fadeout .3s both}
@keyframes fadein{from{opacity:0}}@keyframes fadeout{to{opacity:0}}
.pw{position:relative;width:300px;height:80px}
.pw svg{position:absolute;inset:0;overflow:visible}
.pw path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.5s linear .1s forwards}
.pen{position:absolute;left:0;top:0;font-size:34px;offset-rotate:0deg;animation:wr 1.5s linear .1s both;margin:-30px 0 0 0}
.pw p{position:absolute;top:100px;width:100%;text-align:center;opacity:.8}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes wr{from{offset-distance:0%}to{offset-distance:100%}}
.trash{position:fixed;left:calc(50% - 50px);bottom:9vh;width:100px;fill:#fff;animation:up .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes up{from{transform:translateY(200px)}}
.trash .lid{transform-origin:10px 19px;transition:transform .35s}
.trash.open .lid{transform:rotate(-38deg)}
.trash.shake{animation:shake .6s}
@keyframes shake{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.ghost{pointer-events:none}
.mail{font-size:90px;animation:fly 1.3s cubic-bezier(.5,0,.8,.5) both}
@keyframes fly{0%{transform:scale(.3) rotate(-20deg);opacity:0}25%{transform:scale(1.2) rotate(0);opacity:1}100%{transform:translate(40vw,-90vh) scale(.2) rotate(40deg);opacity:0}}
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);z-index:200;padding:12px 22px;border-radius:999px;background:rgba(255,255,255,.95);color:#4c1d95;font-weight:600;transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
#toast.show{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}