/* General */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #0a0a0a;
  color: #fff;
  scroll-behavior: smooth;
}

/* Navigation */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #111;
  z-index: 300;
  padding: 10px 0;
}

#navbar ul {
  display: flex;
  justify-content: center;
  gap: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navbar ul li a {
  color: #ff0000;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

#navbar ul li a:hover {
  color: #ffdd00;
}

/* Sections */
section {
  padding: 100px 50px;
  text-align: center;
  min-height: 100vh;
}

.internal-section { 
  padding: 40px 20px; 
  margin: 20px auto; 
  border:1px solid #ff0000; 
  border-radius:10px; 
  max-width:600px; 
  background:#111; 
  box-shadow:0 0 15px #ff0000; 
}

.official {
  text-align:center;
  color:#ff0000;
  font-weight:bold;
  font-family:monospace;
  text-shadow:0 0 5px #ff0000, 0 0 10px #ff0000;
  margin:10px 0;
}

.script-links {
  list-style-type:none; /* Hapus bullet default */
  padding:0;
  text-align:center;
}

.script-links li {
  margin:5px 0;
}

.script-links a {
  color:#ff0000;
  text-decoration:none;
  font-weight:bold;
  text-shadow:0 0 5px #ff0000, 0 0 10px #ff0000;
  transition:0.3s;
}

.script-links a:hover {
  color:#fff;
  text-shadow:0 0 15px #ff0000, 0 0 30px #ff0000;
}

.hub-title {
  text-align:center;
  color:#ff0000;
  font-weight:bold;
  font-family:monospace;
  text-shadow:0 0 7px #ff0000, 0 0 20px #ff0000;
  margin-top:10px;
}

.hub-sub {
  text-align:center;
  color:#fff;
  font-style:italic;
  margin-bottom:20px;
}

.hub-list,
.hub-faq {
  margin-left:15px;
}

.hub-discord {
  color:#ff0000;
  font-weight:bold;
  text-shadow:0 0 7px #ff0000;
}

.hub-discord:hover {
  color:#fff;
  text-shadow:0 0 15px #ff0000;
}


/* Hero Section */
#main-title {
  font-size: 3rem;
  color: #ff0000;
  text-shadow: 0 0 15px #ff0000;
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn { to { opacity: 1; } }

.privacy-buttons { margin: 20px 0; display: flex; gap: 20px; }

.privacy-btn {
  padding: 10px 20px;
  border: 1px solid #ff0000;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.privacy-btn:hover { background: #ff0000; color: #0a0a0a; box-shadow: 0 0 10px #ffdd00; }

/* Privacy Popups */
.popup, .detail-popup {
  display: none;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background:#111;
  padding:30px;
  border:2px solid #ff0000;
  border-radius:10px;
  max-width:450px;
  z-index:200;
  text-align:center;
}

.popup-title { color:#ff0000; text-shadow:0 0 10px #ff0000; margin-bottom:15px; }

.popup-text, .detail-popup p { color:#fff; line-height:1.5; }

.highlight { color:#ffdd00; font-weight:bold; }

.close-popup, .close-detail {
  margin-top: 20px;
  padding:8px 20px;
  border:1px solid #ff0000;
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:0.3s;
}

.close-popup:hover, .close-detail:hover { background:#ff0000; color:#0a0a0a; box-shadow:0 0 10px #ffdd00; }

.agree-section { margin:20px 0; font-size:1rem; }

#continueBtn {
  padding:10px 25px;
  border:1px solid #ff0000;
  background:transparent;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

#continueBtn:disabled { opacity:0.4; cursor:not-allowed; }
#continueBtn:hover:not(:disabled) { background:#ff0000; color:#0a0a0a; box-shadow:0 0 10px #ffdd00; }

/* Cards */
.cards { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.card { background-color:#111; padding:20px; border:1px solid #ff0000; border-radius:10px; width:220px; transition:0.3s; cursor:pointer; }
.card:hover { border-color:#ffdd00; box-shadow:0 0 20px #ff0000; }

/* Links */
a { color:#ffdd00; text-decoration:none; }

.search-box {
  width: 350px;
  padding: 10px;
  border: 2px solid red;
  background: #111;
  color: white;
  border-radius: 10px;
  outline: none;
  box-shadow: 0 0 12px red;
  margin-top: 20px;
}

.result-box {
  margin-top: 20px;
  padding: 20px;
  border: 2px solid red;
  background: #000;
  color: white;
  width: 350px;
  border-radius: 12px;
  box-shadow: 0 0 12px red;
  text-align: left;
}

.result-box img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  border: 2px solid red;
  border-radius: 10px;
  text-decoration: none;
  color: red;
  font-weight: bold;
  box-shadow: 0 0 10px red;
}