@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sriracha&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{--color-flap:#d46a84;--color-env:#f8e1e9;--color-env2:#D4AFB8;--color-heart:#ff6f91;--color-sparkle:#ffd1dc}

body {color:#fff;overflow-x:hidden;position:relative;font-family:'Montserrat',sans-serif;/*background: linear-gradient(180deg,#1e3a8a,#3b0764);*/background:rgba(0,0,0,1);z-index: 1;}
.background-overlay {animation: jj 8s infinite alternate;position: fixed;top: 0;left: 0;width: 100%;height: 100%;/*background: url('https://htmlku.com/0/wp2.jpg') no-repeat center center fixed;*/background-size: cover;opacity: 0.6;z-index: 0;}
@keyframes jj{0%  {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);}}
.kotak{margin:0 auto;margin-top:130px;transform:scale(0);transition:all .7s ease;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);border-radius:18px 33px 18px 33px;box-shadow:0 8px 32px rgba(0,0,0,0.3);border:2.5px solid white;padding:0;text-align:center;max-width:100%;width:300px;min-height:200px;position:relative;z-index:1}
.decor{position:absolute;width:12px;height:12px;border:3.3px solid #ff80ab;border-radius:3px;z-index:3}
.decor-tl{top:10px;left:10px;border-right:none;border-bottom:none}
.decor-br{bottom:10px;right:10px;border-left:none;border-top:none}

#envelope{margin:0 auto;margin-top:150px;position:relative;width:160px;height:110px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;top:160px;background-color:var(--color-flap);box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.front{position:absolute;width:0;height:0;z-index:3}
.flap{border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:55px solid transparent;border-top:55px solid var(--color-flap);transform-origin:top;pointer-events:none}
.pocket{border-left:80px solid var(--color-env);border-right:8px solid var(--color-env);border-bottom:55px solid var(--color-env2);border-top:55px solid transparent;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.letter{position:relative;background-color:#e0d9dd;width:90%;margin:0 auto;height:100%;top:0%;border-radius:6px;box-shadow:0 2px 26px rgba(0,0,0,0.08);padding:15px;box-sizing:border-box}
.letter:after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background-image:linear-gradient(180deg,rgba(255,255,255,0) 25%,rgba(255,231,236,0.7) 55%,rgba(255,231,236,1) 100%)}
.message{position:relative;z-index:2;font-family:'Handlee',cursive;color:#d46a84;text-align:center;line-height:1;padding-top:0}
.message p{margin:10px 0;font-size:1.4em;text-shadow:0 2px 3px rgba(0,0,0,0.1)}
.envlope-wrapper{height:210px;margin-top:0px;/*animation:float 3s ease-in-out infinite*/}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.open .flap{transform:rotateX(180deg);transition:transform 0.4s ease,z-index 0.6s;z-index:1}
.close .flap{transform:rotateX(0deg);transition:transform 0.4s 0.6s ease,z-index 1s;z-index:5}
.close .letter{transform:translateY(0);transition:transform 0.4s ease,z-index 1s;z-index:1}
.open .letter{transform:translateY(-40px) rotate(-2.5deg);transition:transform 0.4s 0.2s ease,z-index 0.6s;z-index:2}
.letter-corner{position:absolute;width:10px;height:10px;border:1px solid #ffd1dc;border-radius:2.5px;z-index:3}
.corner-tl{top:5px;left:5px;border-right:none;border-bottom:none}
.corner-br{bottom:5px;right:5px;border-left:none;border-top:none}
.hearts,.sparkles{position:absolute;top:55px;left:0;right:0;z-index:2}
.heart,.sparkle{position:absolute;bottom:0;pointer-events:none}
.heart:before,.heart:after{content:"";position:absolute;left:12.5px;top:0;width:12.5px;height:25px;background:var(--color-heart);border-radius:12.5px 12.5px 0 0;transform:rotate(-45deg);transform-origin:0 100%}
.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
.sparkle{width:4px;height:4px;background:var(--color-sparkle);border-radius:50%;animation:sparkleTwinkle 1s infinite}
.close .heart,.close .sparkle{opacity:0;animation:none}
.a1{left:20%;transform:scale(0.6);animation:slideUp 4s linear infinite,sideSway 2s ease-in-out infinite alternate}
.a2{left:55%;animation:slideUp 5s linear infinite,sideSway 4s ease-in-out infinite alternate}
.a3{left:10%;transform:scale(0.8);animation:slideUp 7s linear infinite,sideSway 2s ease-in-out infinite alternate}
.s1{left:30%;animation:sparkleUp 3s linear infinite}
.s2{left:60%;animation:sparkleUp 4s linear infinite}
.s3{left:45%;animation:sparkleUp 5s linear infinite}
@keyframes slideUp{0%{top:0}100%{top:-600px}}
@keyframes sideSway{0%{margin-left:0}50%{margin-left:50px}100%{margin-left:0}}
@keyframes sparkleUp{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-500px) rotate(360deg);opacity:0}}
@keyframes sparkleTwinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.reset, .tombol{position:relative;text-align:center;margin-top:100px}
.reset button, .tombol button{font-family:'Sriracha',serif;font-weight:600;transition:all 0.3s ease;background-color:#B4425E;border:3px solid white;border-radius:18px 33px 18px 33px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,0.5);padding:6px 14px;margin:10px;font-size:16px;box-shadow:0 5px 20px rgba(0,0,0,0.15)}
.reset button:hover, .tombol button:hover{background-color:#B4838F;transform:translateY(-3px) scale(1.05);box-shadow:0 7px 25px rgba(0,0,0,0.2)}
.tombol{transform:scale(0);opacity:0;transition:all .7s ease;z-index:99}
canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
.pic{font-size:3rem;margin-bottom:1rem}
h1,h2{font-size:1rem;margin-bottom:1rem;font-weight:700}

/* Pesan Akhir */
#containerPesan{padding:0;display:block;width:100%;overflow:auto;min-height:100px;max-height:250px;justify-content:left;text-align:left;}
#teksCinta{font-size:13.5px;color:#fff;font-weight:500}
#teksLucu{font-size:13.5px;color:#fff;margin-top:1rem;font-weight:500}
#teksCinta, #teksLucu, #pesanAkhir{font-size:14.3px;text-align:left;text-shadow:0 2px 3px rgba(0,0,0,0.5)}
p{font-size:13.5px;margin-bottom:1rem;font-weight:500}
button{font-family:'Montserrat',sans-serif;background:#f43f5e;color:#fff;border:2px solid white;padding:0.3rem 1.2rem;border-radius:999px;font-size:1rem;transition:background 0.3s;font-weight:700}
button:hover{background:#e11d48;opacity:.8}
.tombolCadangan{background:#6b7280}
.tombolCadangan:hover{background:#4b5563}
.papanGame{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,auto);gap:0.5rem;justify-items:center;width:90%;max-width:600px;margin:auto;margin-top:30px}
.kartu{width:50px;height:50px}
.dalemKartu{position:relative;width:100%;height:100%;transition:transform 0.6s;transform-style:preserve-3d}
.kartu.balik .dalemKartu{transform:rotateY(180deg)}
.depanKartu,.belakangKartu{position:absolute;width:100%;height:100%;border:2px solid white;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:18px}
.depanKartu{background:rgba(255,255,255,0.2);}
.belakangKartu{background:rgba(255,255,255,0.5);transform:rotateY(180deg);font-size:1.5rem}
.sembunyi, #linkmp3{display:none}
.stiker{display:flex;justify-content:center;align-items:center;gap:20px;margin-left:auto;margin-right:auto;margin-bottom:20px;transform:scale(0);transition:all .7s ease}
.stiker img{width:100px;height:100px;box-shadow: 0 4px 30px rgba(255,255,255, 0.3);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);background: rgba(255, 255, 255, 0.7);border: 3px solid rgba(255, 255, 255, 1);border-radius: 50%;padding:6px;}
.hati{position:fixed;width:22px;height:22px;opacity:0.7;animation:ngelayang 5s ease-in-out forwards;z-index:0}
@keyframes ngelayang{0%{transform:translateY(15vh);opacity:0}20%{opacity:0.7}80%{opacity:0.7}100%{transform:translateY(-100vh);opacity:0}}
.hati svg{width:100%;height:100%;fill:#FFB700;stroke:none;filter:drop-shadow(0 0 8px #FFB700);}
	
.wrapper{position:fixed}.circ div{position:fixed;width:60px;height:60px;background-color:transparent;border:6px solid rgba(255,255,255,0.35);border-radius:50%}.circ div:nth-child(1){top:12%;left:42%;animation:animate 10s linear infinite}.circ div:nth-child(2){top:70%;left:50%;animation:animate 7s linear infinite}.circ div:nth-child(3){top:17%;left:6%;animation:animate 9s linear infinite}.circ div:nth-child(4){top:20%;left:60%;animation:animate 10s linear infinite}.circ div:nth-child(5){top:67%;left:10%;animation:animate 6s linear infinite}.circ div:nth-child(6){top:80%;left:70%;animation:animate 12s linear infinite}.circ div:nth-child(7){top:60%;left:80%;animation:animate 15s linear infinite}.circ div:nth-child(8){top:32%;left:25%;animation:animate 16s linear infinite}.circ div:nth-child(9){top:90%;left:25%;animation:animate 9s linear infinite}.circ div:nth-child(10){top:20%;left:80%;animation:animate 5s linear infinite}@keyframes animate{0%{transform:scale(0) translateY(0) rotate(0);opacity:.8}100%{transform:scale(1.3) translateY(-90px) rotate(360deg);opacity:0}}
	
@media (max-width:600px){.reset, .tombol{margin-top:20px}.kotak{width:85%;padding:1rem}#envelope{width:120px;height:82.5px;top:100px}.flap,.pocket{border-left-width:60px;border-right-width:60px;border-bottom-width:41.25px;border-top-width:41.25px}.letter{padding:10px}.message p{font-size:1.2em}.papanGame{grid-template-columns:repeat(4,1fr);gap:1rem 0.2rem}}

.gift-container{position:relative;width:180px;height:200px;margin:30px auto;overflow:hidden;transition:all 1s ease}
.gift{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:120px;height:140px;background:linear-gradient(to bottom,#ff99cc,#ff6699);border:3px solid #fff;border-radius:10px;z-index:1;transition:all 1s ease 0.25s}
.lid{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:126px;height:30px;background:linear-gradient(to bottom,#ffb3d9,#ff80bf);border:3px solid #fff;border-radius:10px 10px 0 0;transform-origin:center bottom;transition:all 1.2s cubic-bezier(0.25,0.1,0.25,1);z-index:3}
.ribbon-horizontal{position:absolute;top:50%;left:0;width:100%;height:10px;background:#ffccdd;box-shadow:inset 0 0 5px rgba(0,0,0,.1);z-index:2;transition:opacity 0.8s ease}
.ribbon-vertical{position:absolute;top:0;left:50%;width:10px;height:100%;background:#ffccdd;transform:translateX(-50%);box-shadow:inset 0 0 5px rgba(0,0,0,.1);z-index:2;transition:opacity 0.8s ease}
.bow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:40px;height:40px;z-index:4;transition:all 1s ease}
.bow:before,.bow:after{content:'';position:absolute;width:20px;height:20px;background:#ffd1dc;border:2px solid white;border-bottom:none;border-right: none;border-radius:50% 50% 0 50%;}
.bow:before{left:0;transform:rotate(-45deg)}
.bow:after{right:0;transform:rotate(135deg);}
.heart-inside{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%) scale(0);width:80px;height:80px;opacity:0;z-index:5;transition:all 1.2s ease 0.3s}
/* .gift.open .lid{transform:translateX(-50%) translateY(-100px) rotate(45deg);opacity:1} */
.gift-container.open{height: 140px;}
.gift.open .lid{transform:translateX(-35%) translateY(-35px) rotate(35deg);opacity:0}
.gift.open .ribbon-horizontal,.gift.open .ribbon-vertical{opacity:0}
.gift.open .bow{transform:translateX(-50%) translateY(-80px) rotate(45deg);opacity:0}
.gift.open .heart-inside{transform:translate(-50%,-50%) scale(1.4);opacity:1}
.gift.open{border-radius:50%;transform:translateX(-50%) scale(1.25);margin-bottom: 20px;margin-top: 10px;transition-delay:0s}
@media (max-width:600px){.gift-container{height:130px;margin:10px auto}.gift{width:100px;height:90px;margin-bottom: 10px;}.lid{width:102px;top:-12px}.bow{top:-18px;width:35px;height:35px}.bow:before,.bow:after{width:17px;height:17px}.heart-inside{width:50px;height:50px}}

.heart-with-text{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.heart-with-text svg{width:100%;height:100%;color:#e11d48;filter:drop-shadow(0 0 12px rgba(255,111,145,.9))}
.love-text{position:absolute;font-family:'Sriracha',cursive;color:#fff;font-size:1.1rem;font-weight:400;text-shadow:0 0 8px rgba(0,0,0,.6),0 0 15px rgba(255,105,180,.7);pointer-events:none;user-select:none;letter-spacing:1px}
@media (max-width:600px){.love-text{font-size:8px;top:8px}.heart-inside{width:60px;height:60px}}

/* Infinite Carousel Gambar */
.carousel-wrapper{position:absolute;width:100%;max-width:600px;margin:25px auto 15px;overflow:hidden;height:150px;opacity:0;transform:scale(0);transition:all .8s ease}
.carousel-track{display:flex;/*animation:slideLeft 3s infinite alternate;*/animation: slideBackForth 50s infinite ease-in-out;will-change:transform}
.carousel-track img{width:150px;height:150px;object-fit:cover;border-radius:14px;flex-shrink:0;margin-right:14px;border:2px solid white;background:#fff}
.carousel-track img:last-child{margin-right:0}
.carousel-track img:first-child{margin-left:20px}
@keyframes slideLeft{0%{transform:translateX(0)}100%{transform:translateX(-450%)}}
@keyframes slideBackForth {0%   { transform: translateX(0) }50%  { transform: translateX(-315%) } 100% { transform: translateX(0) }}
.carousel-track.paused{animation-play-state:paused}
.carousel-wrapper{--anim-state:paused}
.carousel-wrapper.visible .carousel-track{animation-play-state:running}
@media (max-width:600px){
  .kotak{width:400px;}
  #containerPesan{max-height:190px;}
  .carousel-wrapper{max-width:358px;height:90px;margin:0 auto 10px}
  .carousel-track img{width:90px;height:90px;border-radius: 50%;}
  @keyframes slideBackForth {0%   { transform: translateX(0) }50%  { transform: translateX(-445%) } 100% { transform: translateX(0) }}
}