@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');
    
    html {
      scroll-behavior: smooth;
    }

    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden !important;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: #0b0f19;
    }
    *, *::before, *::after {
      box-sizing: border-box;
    }

    /* Custom Smooth Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #090d16;
    }
    ::-webkit-scrollbar-thumb {
      background: #1f293d;
      border-radius: 9999px;
      border: 2px solid #090d16;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #374151;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    
    /* Mobile App Container Layout */
    .app-container {
      width: 100%;
      max-width: 100%;
      margin: 0;
      min-height: 100vh;
      background: radial-gradient(circle at 50% -20%, #1e1b4b 0%, #090d16 65%);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow-x: hidden !important;
    }

    /* Glassmorphism & Micro-Interactions */
    .glass-card {
      background: rgba(17, 24, 39, 0.65);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    }
    
    .glass-nav {
      background: rgba(9, 13, 22, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .glow-indigo {
      box-shadow: 0 0 35px -5px rgba(99, 102, 241, 0.35);
    }
    .glow-emerald {
      box-shadow: 0 0 35px -5px rgba(16, 185, 129, 0.35);
    }
    
    /* Hover Lift & Ripple Animations */
    .card-hover-effect {
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-hover-effect:hover {
      transform: translateY(-6px) scale(1.015);
      box-shadow: 0 20px 30px -10px rgba(99, 102, 241, 0.25);
      border-color: rgba(99, 102, 241, 0.4);
    }

    @keyframes floatAnimation {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    .animate-float {
      animation: floatAnimation 4s ease-in-out infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 1; filter: drop-shadow(0 0 18px rgba(99, 102, 241, 0.7)); }
      50% { opacity: 0.7; filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.3)); }
    }
    .animate-pulse-glow {
      animation: pulseGlow 3s infinite;
    }

    /* Shimmer Effect for Buttons & Highlights */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .btn-shimmer {
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
      background-size: 200% 100%;
      animation: shimmer 3s infinite;
    }

    /* Theme Light styles */
    html.light {
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }
    html.light body {
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }
    html.light .app-container {
      background: radial-gradient(circle at 50% -20%, #e0e7ff 0%, #f1f5f9 65%) !important;
    }
    html.light header {
      background-color: rgba(255, 255, 255, 0.95) !important;
      border-color: #e2e8f0 !important;
    }
    html.light header a, html.light header span, html.light header button {
      color: #0f172a !important;
    }
    html.light .bg-gray-950, html.light .bg-gray-900 {
      background-color: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #0f172a !important;
    }
    html.light .text-white {
      color: #0f172a !important;
    }
    html.light .text-gray-400, html.light .text-gray-300, html.light .text-gray-200 {
      color: #334155 !important;
    }
    html.light .glass-card {
      background: rgba(255, 255, 255, 0.95) !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08) !important;
    }
    html.light .bg-gray-900\/80 {
      background-color: rgba(255, 255, 255, 0.98) !important;
      border-color: #cbd5e1 !important;
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.06) !important;
    }
    html.light .bg-\[\#1e2638\] {
      background-color: #f1f5f9 !important;
    }
    html.light .bg-gradient-to-r.from-gray-900 {
      background: linear-gradient(to right, #ffffff, #f8fafc, #e0e7ff) !important;
      border-color: #cbd5e1 !important;
    }
    html.light .bg-gradient-to-r.from-gray-900 h1, html.light .bg-gradient-to-r.from-gray-900 p {
      color: #0f172a !important;
    }
    html.light .bg-gradient-to-r.from-gray-900 a {
      background-color: #0f172a !important;
      color: #ffffff !important;
    }
    html.light input, html.light select, html.light textarea {
      background-color: #ffffff !important;
      color: #0f172a !important;
      border-color: #cbd5e1 !important;
    }
    html.light footer {
      background-color: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #475569 !important;
    }
    html.light .bg-gray-800, html.light .bg-\[\#121826\], html.light .bg-\[\#151c2c\] {
      background-color: #f1f5f9 !important;
      color: #0f172a !important;
      border-color: #cbd5e1 !important;
    }
    html.light .bg-gray-800\/50, html.light .bg-gray-800\/40 {
      background-color: rgba(241, 245, 249, 0.95) !important;
      color: #0f172a !important;
    }
    html.light .text-indigo-300, html.light .text-indigo-400 {
      color: #4338ca !important;
    }
    /* Keep explicit dark button/badge backgrounds clearly visible with white text in light mode */
    html.light .bg-\[\#1e283d\], html.light .bg-\[\#1e283d\] *,
    html.light .bg-indigo-600, html.light .bg-indigo-600 *,
    html.light .bg-emerald-600, html.light .bg-emerald-600 * {
      color: #ffffff !important;
    }
    html.light .bg-indigo-950\/40 {
      background-color: #e0e7ff !important;
      border-color: #c7d2fe !important;
      color: #1e1b4b !important;
    }
    html.light .bg-indigo-950\/40 * {
      color: #1e1b4b !important;
    }

/* --- MODERN & PROFESSIONAL ENHANCEMENTS --- */
.glass-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

button, .card-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover {
  transform: translateY(-2px);
}

/* Kustomisasi input & select agar lebih mewah */
input, select, textarea {
  transition: all 0.25s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}