@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Kanit:wght@400;600;800&display=swap");

:root {
  /* Warna Dasar Neumorphism */
  --neu-bg: #EFEEEE;
  --neu-text: #44476A;
  --neu-primary: #5E29F9; /* Ungu Branding Anda */
  
  /* Shadow Logic: Light source from Top-Left */
  --shadow-light: -6px -6px 12px rgba(255, 255, 255, 0.9);
  --shadow-dark: 6px 6px 12px rgba(163, 177, 198, 0.4);
  
  /* Pressed/Inset Shadows */
  --inner-light: inset -4px -4px 8px rgba(255, 255, 255, 0.9);
  --inner-dark: inset 4px 4px 8px rgba(163, 177, 198, 0.4);
}

body {
  background-color: var(--neu-bg);
  color: var(--neu-text);
  font-family: "Inter", sans-serif;
}

h1, h2, h3, .btn {
  font-family: "Kanit", sans-serif;
  color: #31344b;
}

/* --- OVERRIDES & UTILITIES --- */

/* Menimpa bg-white bawaan Tailwind agar menyatu dengan background neumorphism */
.bg-white, .bg-card, section {
  background-color: var(--neu-bg) !important;
  border: none !important; /* Neumorphism tidak menggunakan border garis */
}

/* Navbar */
.navbar {
  background-color: var(--neu-bg) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Soft shadow untuk navbar */
  backdrop-filter: none !important;
}

/* Efek Timbul (Card, Button, Section) */
.neu-box, 
.bg-card, 
.btn, 
.nav-order-button,
#navBottom .bg-white {
  background: var(--neu-bg);
  box-shadow: var(--shadow-dark), var(--shadow-light);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2); /* Sedikit highlight border */
}

/* Efek Tenggelam (Input Form, Active State) */
input, select, textarea, .neu-pressed {
  background-color: var(--neu-bg) !important;
  box-shadow: var(--inner-dark), var(--inner-light) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 15px !important;
  color: var(--neu-text);
}

input:focus, textarea:focus {
  outline: none;
  color: var(--neu-primary);
  box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 1) !important;
}

/* Button Styling */
.btn {
  color: var(--neu-primary);
  font-weight: bold;
  transition: all 0.3s ease;
  background: var(--neu-bg) !important; /* Pastikan background sama dengan body */
}

.btn:hover {
  transform: translateY(-2px);
  color: #3d14b3;
}

.btn:active, .btn.active {
  box-shadow: var(--inner-dark), var(--inner-light);
  transform: translateY(0);
}

.btn-primary-neu {
  color: var(--neu-primary);
}

/* Khusus Tombol Pesan/Submit yang ingin tetap menonjol */
button[type="submit"], .bg-primary {
  background: var(--neu-primary) !important;
  color: #fff !important;
  box-shadow: 6px 6px 12px rgba(94, 41, 249, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.8);
}
button[type="submit"]:hover {
  box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2);
}

/* Icon & Text Styling */
.text-gradient {
  background: linear-gradient(145deg, #5E29F9, #ff5eff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

i, svg {
  color: var(--neu-primary);
  filter: drop-shadow(1px 1px 2px rgba(255,255,255,0.8));
}

/* Pricing Card Special */
.bg-card ul li {
  color: var(--neu-text);
  opacity: 0.8;
}

/* Loader Override */
#preloader {
  background: var(--neu-bg);
}
.loader-wrapper {
  color: var(--neu-text);
}
.loader-bar {
  background: #d1d9e6;
  box-shadow: var(--inner-dark), var(--inner-light);
}
.loader-bar span {
  background: var(--neu-primary);
}
.neu-box:hover {
  transform: translateY(-2px); /* Tombol seolah sedikit terangkat */
  box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.5), 
              -8px -8px 16px rgba(255, 255, 255, 1); /* Shadow jadi lebih tebal */
}
#preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #5e29f9, #7742c6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-wrapper {
  text-align: center;
  color: #fff;
  animation: fadeIn 0.8s ease forwards;
}

.loader-logo {
  width: 90px;
  height: auto;
  margin: 0 auto 20px;
  animation: float 2.5s ease-in-out infinite;
}

.loader-text {
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0.9;
  margin-top: 14px;
}

/* Progress Bar */
.loader-bar {
  width: 220px;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
}

.loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 999px;
  animation: loading 2.2s ease-in-out infinite;
}

/* Animations */
@keyframes loading {
  0% { width: 0%; }
  50% { width: 80%; }
  100% { width: 100%; }
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}