:root {
  --bg-dark: #050810;
  --card-bg: #0b1120;
  --primary-blue: #2563eb;
}

body {
  font-family: "Montserrat", sans-serif;
}

body.bg-dark-custom {
  background-color: var(--bg-dark);
}

.card-glass {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.feature-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-card {
  background: rgba(13, 110, 253, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-border {
  border: 1px solid var(--primary-blue);
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.2);
}

.dot {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Efek Floating untuk Gambar Server */
.floating {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.form-control:focus {
  background-color: #0d1425;
  border-color: var(--primary-blue);
  box-shadow: none;
  color: white;
}

/* Efek Glow pada Tombol Utama */
.shadow-glow {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
}

/* Animasi Floating Gambar Hero */
.floating {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Card Styling Update */
.feature-box {
  transition: all 0.3s ease;
  cursor: default;
}

.feature-box:hover {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-5px);
}

/* Custom Text Primary */
.text-primary {
  color: #3b82f6 !important; /* Biru yang lebih cerah untuk dark mode */
}

/* Menyamakan tinggi kolom kanan */
.col-lg-4 {
  display: flex;
  flex-direction: column;
}

/* Modal Styling agar menyatu dengan Tema Dark */
.modal-content.card-glass {
  background: #0b1120 !important;
  backdrop-filter: blur(10px);
}

.step-num-modal {
  width: 32px;
  height: 32px;
  background: #2563eb;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 30px !important; /* Logo lebih kecil di mobile */
    }
    .btn-primary {
        font-size: 0.8rem; /* Ukuran font tombol lebih kecil */
        padding: 8px 12px !important;
    }
}