/* Define CSS Variables for Light Mode (Default) */
:root {
  --color-primary: #9648b5; /* Ungu (Aksen Merek) */
  --color-bg-main: #c8cdd2; /* Latar Belakang Off-White Lembut */
  --color-bg-card: #3c3c3c; /* Latar Belakang Kartu/Panel */
  --color-text-main: #000000; /* Teks Utama (Hitam) */
  --color-text-secondary: #000000; /* Teks Sekunder (Hitam) */
  --color-border: #DCE4EC; /* Garis Pembatas/Bayangan Halus */
  --color-code-bg: #E2E8F0; /* Mirip slate-200 */
  --color-code-border: #CBD5E1; /* Mirip slate-300 */
  --color-hr: #E2E8F0; /* Mirip slate-200 */
  --color-table-header: #F1F5F9; /* Mirip slate-100 */
}

/* Override CSS Variables for Dark Mode */
.dark {
  --color-primary: #7C3AED; /* Ungu yang lebih gelap untuk aksen dark mode */
  --color-bg-main: #111827; /* gray-900 */
  --color-bg-card: #1F2937; /* gray-800 */
  --color-text-main: #F9FAFB; /* white */
  --color-text-secondary: #D1D5DB; /* gray-300 */
  --color-border: #374151; /* gray-600 */
  --color-code-bg: #374151; /* gray-700 */
  --color-code-border: #4B5563; /* gray-600 */
  --color-hr: #374151; /* gray-700 */
  --color-table-header: #374151; /* gray-700 */
}

html {
  scroll-behavior: smooth;
}
/* Initial state for scroll animations */
.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* 3D Flip Card styles */
.flip-card {
  perspective: 1000px; /* 3D space */
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Gabungkan kedua transisi di sini */
  transition: transform 0.8s, box-shadow 0.3s ease-in-out; 
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
/* Hapus semua transform default Tailwind */
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  /* Terapkan transform khusus */
  transform: rotateY(180deg);
}

/* This class will be toggled by JS for tap on mobile */
.is-flipped {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* Active state for floating navigation */
.nav-active { /* Menggunakan variabel CSS untuk warna */
  background-color: var(--color-primary);
  color: white;
}
.dark .nav-active {
  background-color: var(--color-primary);
}

/* Card shadow for light mode */
.themed-card-shadow {
  box-shadow: 0 4px 12px 0 rgba(220, 228, 236, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  /* Properti transisi dihapus dari sini */
}

/* Add a subtle text shadow for better readability in light mode */
h1, h2 {
  text-shadow: 1px 1px 3px rgba(44, 62, 80, 0.15);
}

.dark h1, .dark h2 {
  text-shadow: none;
}

/* Active state for language switcher */
.lang-active {
  background-color: var(--color-primary);
  color: white !important; /* Use !important to override potential specificity issues */
}

body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard */
}

img {
  pointer-events: none;
}

/* Fade-in on page load */
.fade-in-on-load {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}