:root {
  --ink: #0B0E12;
  --ink-2: #141920;
  --horizon: #D9A441;
  --horizon-glow: rgba(217, 164, 65, 0.3);
  --rust: #C9602C;
  --slate: #3C4A5C;
  --paper: #EDEAE3;
  --paper-dim: #9ca3af;
}

html.light {
  --ink: #F8FAFC;
  --ink-2: #FFFFFF;
  --horizon: #0066FF;
  --horizon-glow: rgba(0, 102, 255, 0.15);
  --rust: #3B82F6;
  --slate: #94A3B8;
  --paper: #0F172A;
  --paper-dim: #475569;
}

html, body {
  background-color: var(--ink); 
  color: var(--paper); 
  font-family: 'Inter', sans-serif;
  overflow-x: clip; /* Memperbaiki isu rendering saat smooth-scroll */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.font-display { 
  font-family: 'Inter', sans-serif; 
  letter-spacing: -0.02em; 
}

.font-mono { 
  font-family: 'JetBrains Mono', monospace; 
}

.text-horizon { 
  color: var(--horizon); 
}

.bg-horizon { 
  background-color: var(--horizon); 
}

.border-horizon { 
  border-color: var(--horizon); 
}

.text-dim { 
  color: var(--paper-dim); 
}

.bg-ink2 { 
  background-color: var(--ink-2); 
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
  width: 10px; 
}

::-webkit-scrollbar-track { 
  background: var(--ink); 
}

::-webkit-scrollbar-thumb { 
  background: #2d3748; 
  border-radius: 5px; 
}

::-webkit-scrollbar-thumb:hover { 
  background: var(--slate); 
}

/* Animations */
.fade-up { 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}

.fade-up.in { 
  opacity: 1; 
  transform: translateY(0); 
}

/* UI Elements */
.drone-dot {
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: var(--horizon);
  box-shadow: 0 0 15px 3px var(--horizon-glow);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { 
    box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.7); 
  }
  70% { 
    box-shadow: 0 0 0 10px rgba(217, 164, 65, 0); 
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); 
  }
}

.nav-transition { 
  transition: all 0.3s ease; 
}

.nav-scrolled { 
  backdrop-filter: blur(12px); 
  background: rgba(11, 14, 18, 0.85); 
  border-bottom: 1px solid rgba(255,255,255,0.05); 
}

.card-hover { 
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

.card-hover:hover { 
  transform: translateY(-8px); 
  border-color: rgba(217, 164, 65, 0.5); 
  background: rgba(20, 25, 32, 0.8); 
}

/* Mobile Menu */
#mobile-menu { 
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

.menu-open { 
  transform: translateX(0) !important; 
}

/* Details/Summary cleanup */
details > summary { 
  list-style: none; 
}

details > summary::-webkit-details-marker { 
  display: none; 
}

/* Button Production Best Practices & Interactions */
button,
.tab-btn,
a[class*="rounded-full"],
button[class*="rounded-full"],
a[class*="px-"],
button[class*="px-"] {
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Precise active state compression */
button:active,
.tab-btn:active,
a[class*="rounded-full"]:active,
button[class*="rounded-full"]:active,
a[class*="px-"]:active,
button[class*="px-"]:active {
  transform: scale(0.96) !important;
}

/* Accessibility outline */
button:focus-visible,
.tab-btn:focus-visible,
a[class*="rounded-full"]:focus-visible,
button[class*="rounded-full"]:focus-visible,
a[class*="px-"]:focus-visible,
button[class*="px-"]:focus-visible {
  outline: 2px solid var(--horizon) !important;
  outline-offset: 2.5px !important;
}

/* Disabled state */
button:disabled,
a.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Light mode adjustments */
html.light .nav-scrolled {
  background: rgba(248, 250, 252, 0.85) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}

html.light .border-white\/5 {
  border-color: rgba(15, 23, 42, 0.05) !important;
}

html.light .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html.light .border-white\/20 {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

html.light .bg-white\/5 {
  background-color: rgba(15, 23, 42, 0.02) !important;
}

html.light .bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.04) !important;
}

html.light .text-white {
  color: var(--paper) !important;
}

html.light .text-white\/80 {
  color: var(--paper-dim) !important;
}

html.light .text-white\/70 {
  color: var(--paper-dim) !important;
}

/* Card styling in light mode */
html.light .card-hover,
html.light .bg-ink,
html.light .bg-ink2 {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 16px -6px rgba(15, 23, 42, 0.03) !important;
}

/* Card hover adaptation in light mode */
html.light .card-hover:hover {
  transform: translateY(-8px) !important;
  background: #FFFFFF !important;
  border-color: var(--horizon) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.15) !important;
}

/* Timeline overrides in light mode */
html.light .absolute.left-1\/2.w-px,
html.light .absolute.left-\[15px\].w-px {
  background-color: rgba(0, 102, 255, 0.25) !important; /* Premium blue line */
  width: 2px !important;
}

html.light .absolute.rounded-full.border-4.border-ink {
  border-color: #FFFFFF !important; /* Pure white border around the dot */
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15) !important; /* Beautiful blue glow halo */
  background-color: var(--horizon) !important; /* Royal Blue */
}

/* Tab button override for light mode active state */
html.light .tab-btn.bg-horizon {
  background-color: var(--horizon) !important;
  color: #FFFFFF !important;
  border-color: var(--horizon) !important;
}

/* CTA hover overrides for outlines in light mode */
html.light a[class*="border-white/20"]:hover,
html.light a[class*="border-white/10"]:hover {
  background-color: var(--horizon) !important;
  color: #FFFFFF !important;
  border-color: var(--horizon) !important;
}

/* Accent texts inside packages */
html.light .text-horizon\/80 {
  color: var(--horizon) !important;
}

/* Fix specific backgrounds/borders */
html.light .bg-horizon\/5 {
  background-color: rgba(0, 102, 255, 0.05) !important;
}

html.light .border-horizon\/20 {
  border-color: rgba(0, 102, 255, 0.15) !important;
}

html.light .bg-horizon\/10 {
  background-color: rgba(0, 102, 255, 0.08) !important;
}

html.light .shadow-\[0_0_30px_rgba\(217\,164\,65\,0\.3\)\] {
  box-shadow: 0 10px 30px rgba(0, 102, 255, 0.25) !important;
}

html.light .shadow-\[0_10px_40px_-10px_rgba\(217\,164\,65\,0\.3\)\] {
  box-shadow: 0 12px 40px -10px rgba(0, 102, 255, 0.2) !important;
}

html.light .border-horizon {
  border-color: var(--horizon) !important;
}

/* Custom scrollbar inside modal content */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--horizon);
}

/* Light mode adjustments for modal */
html.light #info-modal .bg-ink-2 {
  background-color: #FFFFFF !important;
}
html.light #info-modal .text-white {
  color: var(--paper) !important;
}
html.light #info-modal .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light #info-modal .bg-white\/5 {
  background-color: rgba(15, 23, 42, 0.04) !important;
}
html.light #info-modal .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.1);
}