@import url('https://fonts.googleapis.com/css2?family=Inter&family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

:root {
--warna-bg: rgba(0, 0, 0, .3); 
--tombol-teks: #fff;
--tombol-bingkai: #fff;
--bingkai: 18px;
--bingkai-kiri: 1.3px solid var(--tombol-bingkai);
--bingkai-kanan: 1.3px solid var(--tombol-bingkai);
--gaya-font: 'Itim', cursive;
--gaya-font2: 'Caveat', cursive;
--heart: #ff2b4f; /* Ditambahkan untuk warna hati */
--shadow: rgba(255, 43, 79, 0.6); /* Ditambahkan untuk bayangan hati */
}
@keyframes fanim {0% {background-position: 0% 0%;}25% {background-position: 100% 100%;} 50% {background-position: 0% 100%;} 75% {background-position: 50% 50%;} 100% {background-position: 0% 0%;}}
body{background-color:#fff;font-family:var(--gaya-font);padding: 20px 25px;-webkit-user-select: none; -ms-user-select: none; user-select: none;overflow:hidden} a{text-decoration:none;} ::-webkit-scrollbar{display:none;width:0}
#bodyblur{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);transition:all 1s ease;} 
#wallpaper{width:100%;height:100%;transform: scale(1);transition:all 1.7s ease;}

blockquote{position:absolute;opacity:0;visibility:hidden;/*background:var(--warna-bg);border: 1px solid rgba(255, 255, 255, 0.5);border-radius:var(--bingkai);box-shadow: rgba(255,255,255, 0.3) 0px 7px 29px 0px;*/transform: scale(.1);transition:all .7s ease;margin-left:0;margin-right:0;color:#333;}
blockquote{width:400px;text-align:center;line-height:1.3em;padding:0}
blockquote p{font-size:18px;font-weight:400;line-height:1.5em;transition:all .5s ease;margin-left:15px;margin-right:15px}
blockquote p:not(#kalimat, #teksnim){display:none;}
#teksnim, blockquote p span.ft{font-family:var(--gaya-font2);font-size:20px;font-weight:700}
#teksnim{font-size:22px;position:absolute;opacity:0;transform:scale(0);transition:all .8s ease}

#pergeseran{margin-top:40px;position:absolute;opacity:0;transform:scale(0);transition:all 1s ease;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;max-width:500px;padding:0 20px; overflow-y:hidden;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch}
#pergeseran p{background:rgba(0, 0, 0, 0);border:2px solid maroon;border-radius:30px;padding:10px;padding-top:24px;display:flex;flex-wrap:nowrap;text-align:center;line-height:1.4em;align-items:center;justify-content:center;flex-shrink:0; width:90%;height:150px;margin:0 15px 0 0; scroll-snap-align:center}
#pergeseran p, #psn{color:#333;min-height:150px;}
#pergeseran > *:last-child{margin-right:0} #pergeseran:after{content:'';display:block;flex-shrink:0; align-self:stretch;padding-left:20px}
#pergeseran p b{display:block;}
#pergeseran p b span{font-size:20px;font-weight:500;}
#pergeseran p b span.ft{font-family:var(--gaya-font2);font-weight:700;font-size:20px}
#pergeseran p b img{background:rgba(0,0,0, .1);box-shadow: 0 4px 30px rgba(0,0,0, 0.2);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 2px solid maroon;border-radius: 50%;padding:10px;width:70px;height:70px;margin-bottom:20px;}
#fotolove{border-radius:50%;transition:all .3s ease;} #fotolove:hover{transform: scale(.8);}
#pesanAkhir{margin-top:30px;font-family:var(--gaya-font3);font-size:22px !important;font-weight:400;text-align:center;position: absolute;opacity:0;}
#keterangan{position:relative;bottom:-100px;color:#333;font-size:15px;opacity:0;transition:all .7s ease;}

#Tombol{position:relative;opacity:0;margin-top:20px !important;display:flex;align-items:left;list-style:none;transform: scale(.1);transition:all .7s ease;}
#Tombol a{display:inline-flex;align-items:center; margin:0;margin:12px 0 12px 0;transition:all .2s ease;padding:10px;outline:0;border:1px dashed #fff;border-radius:14px;line-height:15px;background:rgba(0,0,0,.5);color:#333;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;z-index:1} 

#Content{animation-name:none;animation-duration: 3s;animation-iteration-count: infinite;position:relative;opacity:0;margin-top:50px;width:100%;height:180px;transition:all .7s ease;}
#Content > *{display:flex;align-items:center;text-align:center;justify-content:center;margin-top:1px;}
.kumpulanstiker > img{display:none;background:rgba(0,0,0, .1);box-shadow: 0 4px 30px rgba(0,0,0, 0.2);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 2px solid maroon;border-radius: 50%;padding:10px;width:85px;height:85px;}
#ftAwal > img{width:130px;height:130px;margin-bottom:30px;}
#fotostiker{margin-bottom:18px;opacity:.1;transition:all .7s ease;transform: scale(.1);}
#imglewat{margin:30px 0;opacity:0;max-width:520px;height:100px;position:absolute;transition:all 1s ease;}

.halo{text-align:center;font-size:17px !important;position:relative;margin-bottom:20px} 
.halo.gaya2{font-family:var(--gaya-font2);font-size:24px !important;margin-top:20px !important;}
.halo.sty3{position:absolute !important;font-size:14px !important;font-weight:400 !important;margin:30px 20px !important;}

#fotolove img{transition:all .5s ease;width:75px;height:75px;padding:0;background:none}
#loveIn img{display:inline-flex;background:none;width:130px;height:130px;transition:all .3s ease;} 
#ket, #ketgeser, .halo{font-size:17px;font-weight:700;color:#333}
#ket{margin-top:20px !important;font-size:16px;font-weight:400;opacity:.8}
#ketgeser{position:absolute;margin-top:30px;font-size:10px;font-weight:400;transform:scale(0);opacity:0;transition:all .7s ease;}

@keyframes leaves {0% {transform: scale(1.0);} 100% {transform: scale(.85);}}
#loveIn{animation: leaves .7s ease-in-out infinite alternate;-webkit-animation: leaves 1s ease-in-out infinite alternate;} 
.lovein{background:#fff;border: 2px solid maroon;border-radius:50%;width:40px;height:40px;padding:10px;font-size:30px;display:flex;align-items:center;text-align:center;justify-content:center;transition:all .3s ease;}
.lovein:hover{cursor:pointer}
.lovein svg{stroke:#ff0000;stroke-width:1.3;fill:none;width:35px;height:35px}
#link{color:#FFF600;font-size:15px;position:relative;top:20px}

.swal2-modal > *{font-size:16px;color:#333}
.swal2-title{line-height:1.3em;font-size:20px;text-align:center;padding:15px 30px 0 30px;}
.swal2-timer-progress-bar-container > *{opacity:.7;background:#00B6FF;margin:0 2px}
.swal2-modal{background: rgba(0,0,0, .4);backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);box-shadow: 0 4px 30px rgba(255,255,255, 0.3);border: 2.5px solid #fff;border-radius:30px;max-width:310px;top:-60px;}
.swal2-image{background: rgba(255, 255, 255, 0.5);box-shadow: 0 4px 30px rgba(255,255,255, 0.3);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 50%;padding:10px;}
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel{position: relative;background-color: #EB39C2;color: #fff;border: 2.5px solid #fff;border-radius:30px;z-index: 1;transition: all 0.2s;}
.swal2-input,.swal2-textarea,.swal2-select {border-radius: 30px !important;border: 2.5px solid #fff;width:80%}
.swal2-input:focus,.swal2-textarea:focus,.swal2-select:focus {outline: none;box-shadow: none;border: 2.5px solid #fff;}

.sembunyi{display:none !important}

.dots{position:relative;bottom:-150px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;width:100%;z-index:2;opacity:0;transition:all .8s ease;}
.dot{height:8px;width:8px;border-radius:50%;margin:0 5px;background-color:#aaa;cursor:pointer;opacity:.7;}
.dot.active{background-color:maroon;opacity:1;}

/* GIFTS */
#teksgift{color:#333;font-family:var(--gaya-font2);font-size:18px;font-weight:700;top:45%;left:50%;transform:translate(-50%,-55%) scale(0)}
.textanimate{animation:textappear .5s ease-out forwards,drop 1s ease-in-out forwards 1.5s}
@keyframes textappear{from{transform:translate(-50%,-55%) scale(0)}to{transform:translate(-50%,-55%) scale(1.2)}}
#teksgift, #gift{position:fixed;margin:0;padding:0;}
#gift{width:120px;height:100px;top:25%;left:50%;transform:translate(-50%,-30%) scale(0);z-index:1000;opacity:1;}
.animate{animation:appear .5s ease-out forwards,shake-rotate .6s infinite alternate ease-in-out .4s,drop 1s ease-in-out forwards 1.5s}
@keyframes appear{from{transform:translate(-50%,-30%) scale(0)}to{transform:translate(-50%,-30%) scale(1.5)}}
@keyframes shake-rotate{0%{transform:translate(-50%,-30%) scale(1.5) rotate(0deg)}50%{transform:translate(-50%,-30%) scale(1.5) rotate(-5deg)}100%{transform:translate(-50%,-30%) scale(1.5) rotate(5deg)}}
@keyframes drop{to{transform:translate(-50%,calc(100vh - 30%))}}
/* Ditambahkan untuk gaya hati */
#gift.heart-container {display: flex; align-items: center; justify-content: center;}
.heart-btn {display: grid; place-items: center; width: 100%; height: 100%; border: none; background: transparent;}
.heart {width: 100%; height: 100%; display: block; transform-origin: center center;}
.heart svg {width: 100%; height: 100%; display: block; overflow: visible;}
.heart svg .core {fill: var(--heart); filter: drop-shadow(0 0 20px var(--shadow));}
.heart svg .shine {fill: rgba(255,255,255,.35); mix-blend-mode: screen;}

/* Berjatuhan */
.vheart{position:fixed;width:22px;height:22px;opacity:.8;animation:float 7s ease-in-out forwards;left:0;bottom:0;top:0;z-index:999}
@keyframes float{0%{transform:translateY(100vh);opacity:.65}10%{opacity:.65}90%{opacity:.65}100%{transform:translateY(-100vh);opacity:0}}
.vheart svg{width:100%;height:100%;fill:none;stroke:maroon}
.vfoto{position:fixed;width:64px;height:64px;opacity:.8;animation:float 15s ease-in-out forwards;left:0;bottom:0;top:0;z-index:999}
.vfoto img{width:100%;height:100%;fill:none;stroke:maroon;border-radius:50%;object-fit:cover;}

#scontainer, #fcontainer{width:80%;margin:20px auto;min-height:650px;margin-top:150px;color:maroon}@media screen and (max-width:400px){#scontainer, #fcontainer{width:100%;margin:50% auto;min-height:800px}}.wrapper{position:fixed}.box div{position:fixed;width:60px;height:60px;background-color:transparent;border:6px solid rgba(128,0,0,.15);border-radius:50%;z-index:-10}.box div:nth-child(1){top:12%;left:42%;animation:animate 10s linear infinite}.box div:nth-child(2){top:70%;left:50%;animation:animate 7s linear infinite}.box div:nth-child(3){top:17%;left:6%;animation:animate 9s linear infinite}.box div:nth-child(4){top:20%;left:60%;animation:animate 10s linear infinite}.box div:nth-child(5){top:67%;left:10%;animation:animate 6s linear infinite}.box div:nth-child(6){top:80%;left:70%;animation:animate 12s linear infinite}.box div:nth-child(7){top:60%;left:80%;animation:animate 15s linear infinite}.box div:nth-child(8){top:32%;left:25%;animation:animate 16s linear infinite}.box div:nth-child(9){top:90%;left:25%;animation:animate 9s linear infinite}.box 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}}

#not-found{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}