@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

:root {
--warna-bg: rgba(0, 0, 0, .4); 
--warna-teks: #fff;
--warna-bingkai: #fff;
--bingkai: 8px;
--bingkai-kiri: 2px solid var(--warna-bingkai);
--bingkai-kanan: 2px solid var(--warna-bingkai);
--gaya-font: 'Poppins', sans-serif;
--gaya-font2: 'Dancing Script', sans-serif;
}
@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:#000;font-family:var(--gaya-font);padding: 20px 25px;-webkit-user-select: none; -ms-user-select: none; user-select: none;} a{text-decoration:none;}
body::before{content:"\00A9  luwiy";color:white;opacity:.12;font-size:11px;position:fixed;bottom:25px;right:25px;z-index:2}
#bodyblur{opacity:.2;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%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, 
    #ffd1dc 0%,
    #ffb3d9 15%,
    #e6b8f0 30%,
    #d4c5f9 45%,
    #c5dff8 60%,
    #d4c5f9 75%,
    #ffb3d9 90%,
    #ffd1dc 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  transform: scale(2);
  transition:all 1.3s ease;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#beneranblur{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);transition:all 3s ease;}

@keyframes jj{0%  {transform: scale(1.1);} 50% {transform: scale(1.2);} 100% {transform: scale(1.1);}}
@keyframes rts{from {transform:scale(.1);} to {transform:scale(1);}}
@keyframes rto{from {transform:scale(1);} to {transform:scale(1.1);}}
@keyframes aniopa{0% {transform: scale(1);} 50% {transform: scale(.75);} 100% {transform: scale(1);}}
@keyframes rtf{from {transform: rotate(0deg);} to {transform: rotate(360deg);}} @keyframes rt{from {transform: scale(.9);/* transform: rotate(-5deg); */} to {transform: scale(1);/* transform: rotate(5deg); */}}
@keyframes kont{0%  {left:-1px; top:-3px;} 50% {left:1px; top:3px;} 100% {left:-1px; top:-3px;}}

/* Particle Effect */
.particle {
  position: fixed;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff69b4, #ff1493);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: particleFloat 1s ease-out forwards;
  box-shadow: 0 0 10px #ff69b4;
}

@keyframes particleFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
}

/* Ripple Effect */
.ripple {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 105, 180, 0.6), transparent);
  pointer-events: none;
  z-index: 9998;
  animation: rippleExpand 1s ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes rippleExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Sparkle Effect */
.sparkle {
  position: fixed;
  font-size: 20px;
  pointer-events: none;
  z-index: 9997;
  animation: sparkleFloat 2s ease-out forwards;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

@keyframes sparkleFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg) scale(1);
    opacity: 0;
  }
}

/* Confetti Effect */
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  pointer-events: none;
  z-index: 9996;
  animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Bounce In Animation */
@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Slide In Up Animation */
@keyframes slideInUp {
  0% {
    transform: translateY(50px) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  justify-content: center;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: typingDot 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Cursor Trail Effect */
.cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff69b4, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9995;
  animation: cursorFade 0.5s ease-out forwards;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
}

@keyframes cursorFade {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Float Up Animation for Mini Hearts */
@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150px) scale(1.5) rotate(360deg);
    opacity: 0;
  }
}

/* Shake Animation for Sticker */
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.1); }
}

blockquote{position:absolute;opacity:0;visibility:hidden;background:var(--warna-bg);border-radius:none;box-shadow: rgba(255,255,255, 0.3) 0px 7px 29px 0px;transform: scale(.1);transition:all 1s ease;margin-top:120px;margin-left:0;margin-right:0;color:var(--warna-teks);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
blockquote{width:400px;line-height:1.3em;padding:20px 15px 10px 15px;margin:0 15px;border: 1px solid #fff;border-radius:12px;cursor:pointer;user-select:none;}
blockquote:hover{
  transform: scale(1.02);
  box-shadow: rgba(255,255,255, 0.5) 0px 10px 35px 0px, 0 0 20px rgba(255, 105, 180, 0.3);
  border-color: rgba(255, 105, 180, 0.8);
}
blockquote:active{
  transform: scale(0.98);
}
blockquote p{font-size:14px;font-weight:500;line-height:1.45em;transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
#kalimat6ngetik, .kiri{text-align:left !important}
blockquote p i{font-style:normal;font-size:13px;font-weight:400;}
blockquote p b.merah{color:red;animation:textGlow 2s ease-in-out infinite;}
blockquote p b.merahmuda{color:pink;animation:textGlow 2s ease-in-out infinite alternate;}
blockquote p b.kuning{color:yellow;text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);}
blockquote p b.putih{padding-left:3px;padding-right:3px;background:white;color:#000;border-radius:4px;box-shadow:0 0 15px rgba(255, 255, 255, 0.6);}
blockquote p b.garismerah{font-weight:500;border-bottom:2px solid red;animation:underlineGlow 2s ease-in-out infinite;}
blockquote p b.gariskuning{font-weight:500;border-bottom:2px solid yellow;animation:underlineGlow 2s ease-in-out infinite;}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
  }
  50% {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

@keyframes underlineGlow {
  0%, 100% {
    border-bottom-width: 2px;
    filter: drop-shadow(0 0 3px currentColor);
  }
  50% {
    border-bottom-width: 3px;
    filter: drop-shadow(0 0 8px currentColor);
  }
}
blockquote p:not(#opsL, #kalimat){display:none;}
blockquote p:not(#kalimat6ngetik){text-align:center;}
blockquote > #opsL{margin-right:0px;text-align:right !important;font-size:10px;font-weight:600;line-height:0;margin-top:24px;color:white;opacity:0;transition:all .3s ease;padding:8px 15px;background:linear-gradient(135deg, #ff1493, #ff69b4);border-radius:20px;display:inline-block;cursor:pointer;}
blockquote > #opsL:hover{
  opacity:1 !important;
  transform: translateX(-5px);
  box-shadow: 0 5px 15px rgba(255, 20, 147, 0.5);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { transform: translateX(-5px) scale(1); }
  50% { transform: translateX(-5px) scale(1.05); }
}

@keyframes leaves {0% {transform: scale(1.0);} 100% {transform: scale(.85);}}
@keyframes glowing {
  0% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 20, 147, 0.4), inset 0 0 20px rgba(255, 182, 193, 0.3); }
  50% { box-shadow: 0 0 30px rgba(255, 105, 180, 0.9), 0 0 60px rgba(255, 20, 147, 0.6), inset 0 0 30px rgba(255, 182, 193, 0.5); }
  100% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 20, 147, 0.4), inset 0 0 20px rgba(255, 182, 193, 0.3); }
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
#loveIn{animation: leaves .7s ease-in-out infinite alternate;-webkit-animation: leaves 1s ease-in-out infinite alternate;} 
.lovein{
  background: linear-gradient(135deg, #ff6b9d 0%, #ffa5d8 25%, #ff1493 50%, #ff69b4 75%, #ff6b9d 100%);
  background-size: 300% 300%;
  animation: gradientMove 3s ease infinite, glowing 2s ease-in-out infinite;
  border-radius:50%;
  width:70px;
  height:70px;
  padding:15px;
  font-size:30px;
  display:flex;
  align-items:center;
  text-align:center;
  justify-content:center;
  transition:all .3s ease;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 20, 147, 0.4), inset 0 0 20px rgba(255, 182, 193, 0.3);
}
.lovein:hover{
  cursor:pointer;
  transform: scale(1.1);
  box-shadow: 0 0 40px rgba(255, 105, 180, 0.9), 0 0 80px rgba(255, 20, 147, 0.6), inset 0 0 30px rgba(255, 182, 193, 0.5);
}

#Tombol{position:relative;opacity:0;margin:0;display:flex;align-items:left;list-style:none;transform: scale(.1);transition:all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
#Tombol a{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  margin:12px 0 12px 0;
  transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  padding:15px 30px;
  outline:0;
  border:2px solid transparent;
  border-radius:50px;
  line-height:15px;
  background: linear-gradient(135deg, #ff1493, #ff69b4, #ffa5d8);
  background-size: 200% 200%;
  color:#fff;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(255, 20, 147, 0.4), 0 0 20px rgba(255, 105, 180, 0.3);
  z-index:1;
  animation: float 2s ease-in-out infinite, gradientMove 3s ease infinite;
  position:relative;
}
#Tombol a::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff1493, #ff69b4, #ffa5d8, #ff1493);
  background-size: 400%;
  border-radius: 50px;
  z-index: -1;
  animation: gradientMove 3s ease infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#Tombol a:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 40px rgba(255, 20, 147, 0.6), 0 0 30px rgba(255, 105, 180, 0.5);
}
#Tombol a:hover::before {
  opacity: 1;
}
#Tombol a:active {
  transform: translateY(-2px) scale(1.02);
} 
#Bn{margin:12px 0 12px 12px !important;}
#Bn2{position:absolute;opacity:0;width:0}

#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;justify-content:center;margin-top:1px;}
.kumpulanstiker > img{display:none;background:rgba(255,255,255, .7);box-shadow: 0 4px 30px rgba(255,255,255, 0.2);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 1);border-radius: 50%;padding:10px;width:92px;height:92px;margin:8px 0;transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);cursor:pointer;}
.kumpulanstiker > img:hover{
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 8px 40px rgba(255,105,180, 0.5), 0 0 20px rgba(255, 255, 255, 0.4);
  filter: brightness(1.1);
}
.kumpulanstiker > img:active{
  transform: scale(0.95) rotate(-5deg);
}
#fotostiker{opacity:.1;transition:all 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);transform: scale(.1);}
.halo{font-size:17px !important;position:relative;margin:15px 0 0 0} 
.halo.sty2{align-items:center !important;text-align:left !important;font-size:14px !important;font-weight:400;}
.halo.sty3{position:absolute !important;font-size:14px !important;font-weight:400 !important;margin:30px 20px !important;}
#kalbawah{position: absolute;opacity:0;transform: scale(.3);margin:8px 0;font-family:var(--gaya-font2);font-size:20px;font-weight:700;color:white;text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);transition:all .5s ease;}
#tanggal{position: absolute;opacity:0;transform: scale(.3);transition:all .5s ease;}

#fotolove img{transition:all .5s ease;width:75px;height:75px;padding:0;background:none}
#ket, #kot, #ketgeser, .halo{text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);font-size:17px;font-weight:700;color:white}
#ket, #kot{transition:all .7s ease;margin-top:20px !important;font-size:14px;font-weight:400;opacity:.9}
#ket{
  background: linear-gradient(90deg, #ff69b4, #ffa5d8, #ff1493, #ff69b4);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientText 3s ease infinite;
  font-weight: 600;
  letter-spacing: 1px;
}
@keyframes gradientText {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
#kot a{font-weight:700;color:yellow}

.swal2-modal > *{color:white}
.swal2-title{line-height:1.3em;font-size:18px;text-align:center;padding:15px 30px 0 30px;}
.swal2-container.swal2-backdrop-show{background: rgba(0,0,0,.5);}
.swal2-timer-progress-bar-container > *{opacity:.7;background:#00B6FF;margin:0 2px}
.swal2-modal{box-shadow: rgba(255,255,255, 0.3) 0px 7px 29px 0px;background:rgba(0,0,0,.9);max-width:320px;border-right:var(--bingkai-kanan);border-left:var(--bingkai-kiri);border-radius:4px;top:-50px;}

.fa-heart {opacity:.2;color:white;font-size: 20px;position: absolute;animation:  heartMove linear 1;top: -10vh;z-index: 0;}
@keyframes heartMove {0%{transform: translateY(-10vh) ;} 100%{transform: translateY(100vh) ;}}
.sembunyi, #kado2, #kado3{display:none !important}

svg{vertical-align: middle;width: 22px;height: 22px;fill: #fff}
.lovein svg{
  stroke:#ffffff !important;
  stroke-width:1.8;
  fill:none !important;
  width:45px;
  height:45px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  animation: heartPulse 1.5s ease-in-out infinite;
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.heart-icon {z-index:100;width: 30px;height: 30px;position: fixed;animation:  heartMove linear 1;top: -10vh;}
@keyframes heartMove {
    0% {transform: translateY(-10vh);}
    100% {transform: translateY(100vh);}
  }
      svg.line{fill: none;stroke: #fff;stroke-width: 2;animation: moving .7s linear infinite alternate;}
      .spin{animation: spin 3s linear infinite alternate;}
  @keyframes spin {
    from {
      transform: rotate(20deg);
    }
    to {
      transform: rotate(-20deg);
    }
            }