:root {
      --bg-color: transparent;
      --text-color: #fff;
      --box-bg: rgba(0, 0, 0, 0.6);
      --box-shadow: 0 0 20px cyan;
      --btn-bg: black;
      --btn-text: cyan;
      --btn-border: cyan;
    }

    body {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
      margin: 0;
      padding: 0;
      background: url('fotoku.jpg') no-repeat center center fixed;
      background-size: cover;
      color: var(--text-color);
      overflow-x: hidden;
    }

#clock {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: cyan;
    font-size: 20px;
    font-family: 'Orbitron', sans-serif;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 0; /* padding dikurangi */
    z-index: 9999;
    letter-spacing: 2px;
    text-shadow: 0 0 5px cyan, 0 0 10px cyan;
    box-shadow: 0 0 10px cyan, inset 0 0 5px cyan;
    border-top: 1px solid cyan;
    border-bottom: 1px solid cyan;
    line-height: 1.2; /* biar teks tidak terlalu tinggi */
}

.floating-banner {
  position: fixed;
  bottom: -30px; /* geser ke bawah supaya tidak tumpang tindih dengan jam */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  padding: 6px 10px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: white;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

    .payment-box {
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 25px cyan;
      padding: 20px;
      border-radius: 10px;
      max-width: 400px;
      margin: 100px auto 40px;
      text-align: center;
    }

    .thumbnail {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 50%;
      margin-bottom: 10px;
      box-shadow: 0 0 15px white;
    }

    .neon-btn {
      background: var(--btn-bg);
      color: var(--btn-text);
      border: 2px solid var(--btn-border);
      padding: 10px 15px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0 0 10px var(--btn-border);
      transition: 0.3s;
      display: inline-block;
      margin: 20px auto;
    }

    .neon-btn:hover {
      background: var(--btn-text);
      color: var(--btn-bg);
      box-shadow: 0 0 20px var(--btn-border);
    }

    .copy-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border: 1px solid var(--btn-border);
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.15);
      margin: 10px auto;
      width: 90%;
      color: var(--btn-text);
    }

    .payment-logo {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 10px;
    }

    .copy-box span {
      flex-grow: 1;
      text-align: left;
    }

    .copy-box button {
      background: var(--btn-text);
      border: none;
      padding: 5px 10px;
      border-radius: 5px;
      font-weight: bold;
      cursor: pointer;
      color: var(--btn-bg);
    }

    .social-title {
      text-align: center;
      font-size: 18px;
      margin-top: 40px;
      font-weight: bold;
      color: cyan;
      text-shadow: 0 0 10px cyan;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 25px;
      margin: 10px 0 30px;
    }

    .social-icons a img {
      width: 40px;
      height: 40px;
      transition: transform 0.3s;
      filter: drop-shadow(0 0 6px cyan);
    }

    .social-icons a:hover img {
      transform: scale(1.2);
    }

    @keyframes snow {
      0% { transform: translateY(0); opacity: 1; }
      100% { transform: translateY(100vh); opacity: 0; }
    }

    .snowflake {
      position: fixed;
      top: -10px;
      z-index: 999;
      font-size: 1em;
      animation: snow 10s linear infinite;
      pointer-events: none;
    }

    .snowflake:nth-child(odd) {
      color: #00ffff;
    }

    .snowflake:nth-child(even) {
      color: #ff00ff;
    }

    @media (max-width: 600px) {
      .neon-btn {
        width: 80%;
        font-size: 14px;
      }
    }
    
.detail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  padding: 20px;
  z-index: 9999;
  display: none;
  box-shadow: 0 0 20px cyan;
  color: white;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

.detail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  padding: 20px;
  z-index: 9999;
  display: none;
  box-shadow: 0 0 20px cyan;
  color: white;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

.popup-header-btn {
  background: #000; /* hitam solid */
  color: cyan;
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 12px;
  border: 1.5px solid cyan;
  box-shadow: 0 0 12px cyan, 0 0 25px cyan inset;
  margin-bottom: 20px;
  font-size: 20px;
  cursor: default;
  text-align: center;
  text-shadow: 0 0 4px cyan;
}

.popup-content {
  text-align: center;
}

.popup-content h3 {
  color: cyan;
  text-shadow: 0 0 8px cyan;
  margin-bottom: 10px;
}

.popup-content button {
  background: cyan;
  color: black;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  margin-top: 10px;
  cursor: pointer;
}

.popup-content p {
  text-align: left;
  margin: 6px 0;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
}

.popup-content p span {
  margin-left: 5px;
  color: cyan;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(6px);
}

.loading-text {
  font-size: 30px;
  font-weight: bold;
  color: cyan;
  font-family: 'Orbitron', sans-serif;
  animation: pulse 1.5s infinite;
  text-shadow: 0 0 10px cyan, 0 0 20px cyan;
}

@keyframes pulse {
  0% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.2; transform: scale(1); }
}

.transparent-btn {
  background: transparent;
  border: 2px solid cyan;
  color: cyan;
  cursor: pointer;
  padding: 4px 10px;       /* padding kecil supaya tombol lebih kecil */
  font-size: 16px;         /* tetap ukuran teks */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;        /* font tipis */
  overflow: hidden;
}

#detail-popup-qr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#detail-popup-qr .popup-content {
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 0 25px cyan;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 15px cyan;
  margin-bottom: 16px;
}

#detail-popup-qr .popup-content h3 {
  color: cyan;
  font-size: 20px;
  text-shadow: 0 0 8px cyan;
  margin-bottom: 12px;
}

#detail-popup-qr .popup-content button {
  background: cyan;
  color: black;
  font-weight: bold;
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

#loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99999;
}
.loader {
  width: 60px;
  height: 60px;
  border: 4px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear;
  box-shadow: 0 0 12px #00ffff, 0 0 24px #00ffff;
}
.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid;
  border-color: #00ffff transparent;
  box-shadow: 0 0 12px #00ffff, 0 0 24px #00ffff;
}
@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader-text {
  margin-top: 20px;
  font-size: 22px;
  font-weight: bold;
}

canvas#particles, canvas#snow {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      pointer-events: none;
    }
    .shine {
      position: absolute;
      top: -100%;
      left: -100%;
      width: 300%;
      height: 300%;
      background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
      transform: rotate(45deg);
      animation: shine 4s infinite linear;
      z-index: 0;
    }
    @keyframes shine {
      0% { transform: translate(-100%, -100%) rotate(45deg); }
      100% { transform: translate(100%, 100%) rotate(45deg); }
    }
    
    @keyframes zoomEffect {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

.portal-circle {
  width: 100px;
  height: 100px;
  border: 5px solid cyan;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  box-shadow: 0 0 20px cyan, 0 0 50px cyan;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

@keyframes nutZoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.3);
  }
  80% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

#nut-effect {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, #00ffff, #000);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
}

    #snake-container {
      position: absolute;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none;
    }

    .segment {
      position: absolute;
      font-size: 32px;
      transition: transform 0.1s linear;
    }

    #target {
      position: absolute;
      width: 14px; height: 14px;
      background: cyan;
      border-radius: 50%;
      box-shadow: 0 0 10px cyan;
      display: none;
    }

    #house {
      position: absolute;
      left: 50%;
      top: 80%;
      transform: translateX(-50%);
      font-size: 32px;
      z-index: 2;
    }

    #message-box {
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px 30px;
      background: rgba(0, 0, 0, 0.8);
      border: 2px solid cyan;
      border-radius: 10px;
      color: cyan;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      display: none;
      z-index: 99999;
    }

    .emoji-hujan {
      position: fixed;
      top: -40px;
      font-size: 26px;
      pointer-events: none;
      animation: turun 5s linear forwards;
      z-index: 10000;
    }

    @keyframes turun {
      100% {
        transform: translateY(110vh);
        opacity: 0;
      }
    }

    .firework {
      position: fixed;
      width: 8px;
      height: 8px;
      background: yellow;
      border-radius: 50%;
      animation: ledak 0.8s ease-out;
      z-index: 10000;
    }

    @keyframes ledak {
      0% { transform: scale(0); opacity: 1; }
      100% { transform: scale(4); opacity: 0; }
    }