:root {
  --arabic-font-size: 2.5rem;
  --translation-font-size: 1rem;
  --latin-visibility: block;
  --translation-visibility: block;
  --accent-color: #2563eb;
  --accent-color-hover: #1d4ed8;
  --accent-color-light: #60a5fa;
  --accent-color-dark: #1e3a8a;
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;
}

.theme-purple {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7e22ce;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  --primary-950: #3b0764;
}
.theme-green {
  --primary-50: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-200: #bbf7d0;
  --primary-300: #86efac;
  --primary-400: #4ade80;
  --primary-500: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
  --primary-800: #166534;
  --primary-900: #14532d;
  --primary-950: #052e16;
}
.theme-orange {
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;
  --primary-950: #431407;
}
.theme-indigo {
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  --primary-950: #1e1b4b;
}

/* Animasi dasar untuk elemen-elemen UI */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #a3a3a3;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #737373;
}

.dark ::-webkit-scrollbar-track {
  background: #171717;
}

.dark ::-webkit-scrollbar-thumb {
  background: #404040;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #525252;
}

.horizontal-scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; /* ruang untuk scrollbar */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

/* Sembunyikan scrollbar di container ini */
.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.horizontal-scroll-container.grabbing {
  cursor: grabbing;
}

.arabic-text {
  font-size: var(--arabic-font-size);
  font-family: var(--font-arabic), serif;
  line-height: 2.8;
}

.translation-text {
  font-size: var(--translation-font-size);
}

.latin-text {
  display: var(--latin-visibility);
}

.translation-container {
  display: var(--translation-visibility);
}

@media (max-width: 768px) {
  :root {
    --arabic-font-size: 2rem;
    --translation-font-size: 0.9rem;
  }
}

.glass-effect {
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dark .glass-effect {
  background: rgba(10, 10, 10, 0.8);
}

*,
*::before,
*::after {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

#donationFab.dragging {
  transition: none; /* Disable transition while dragging */
}

.loading-spinner {
  border: 3px solid rgba(var(--primary-500-rgb), 0.2);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.dark .shimmer {
  background: linear-gradient(
    90deg,
    rgba(30, 30, 30, 0) 0%,
    rgba(60, 60, 60, 0.6) 50%,
    rgba(30, 30, 30, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.modal-overlay {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
}

.ayat-card.playing {
  border-color: var(--primary-600);
  background-color: var(--primary-50);
}

.ayat-card.playing .ayat-header {
  background-color: var(--primary-100);
}

.dark .ayat-card.playing {
  border-color: var(--primary-400);
  background-color: var(--primary-900);
}

.dark .ayat-card.playing .ayat-header {
  background-color: var(--primary-950);
}

.bookmark-btn.bookmarked {
  color: #f59e0b;
}

.tab-btn.active,
.view-tab.active {
  background-image: linear-gradient(
    145deg,
    var(--primary-500),
    var(--primary-700)
  );
  color: #ffffff;
  box-shadow: 0 4px 15px -5px rgba(var(--primary-500-rgb), 0.6);
}

.dark .tab-btn.active,
.dark .view-tab.active {
  background-image: linear-gradient(
    145deg,
    var(--primary-400),
    var(--primary-600)
  );
}

.view-tab {
  transition: all 0.3s ease-in-out;
}

.bg-glass-blue {
  background-image: linear-gradient(
    145deg,
    var(--primary-500),
    var(--primary-700)
  );
  color: #ffffff;
  box-shadow: 0 8px 20px -8px rgba(var(--primary-500-rgb), 0.5);
  transition: all 0.3s ease;
}

.bg-glass-blue:hover {
  box-shadow: 0 10px 25px -5px rgba(var(--primary-500-rgb), 0.7);
  transform: translateY(-2px);
}

.hover\:bg-glass-blue-hover:hover {
  background-image: linear-gradient(
    145deg,
    var(--primary-400),
    var(--primary-600)
  );
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

/* Animasi untuk kartu surah */
#contentGrid .card {
  transition: all 0.3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#contentGrid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

/* Animasi untuk tombol-tombol */
button,
.view-tab {
  transition: all 0.3s ease;
}

button:active:not(.tab-btn.active):not(.view-tab.active) {
  transform: scale(0.95);
}

.text-glow-blue {
  color: var(--primary-100);
  text-shadow: 0 0 8px rgba(var(--primary-400-rgb), 0.5);
}

.dark .text-glow-blue {
  color: var(--primary-300);
  text-shadow: 0 0 10px rgba(var(--primary-300-rgb), 0.6);
}

#audio-progress-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--primary-100);
  border-radius: 5px;
  outline: none;
  transition: background 0.2s ease-in-out;
}

#audio-progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary-600);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.dark #audio-progress-bar {
  background: var(--primary-800);
}

.dark #audio-progress-bar::-webkit-slider-thumb {
  background: var(--primary-400);
}

/* --- [BARU] Kartu Header dengan Efek Aurora --- */
.dynamic-header-card {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.25rem; /* 20px */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dark .dynamic-header-card {
  background-color: rgba(23, 23, 23, 0.4); /* #171717 */
  border-color: rgba(255, 255, 255, 0.1);
}

.dynamic-header-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.15);
}

/* Efek Aurora */
.dynamic-header-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  z-index: -1;
  background-image: radial-gradient(
      circle at 20% 25%,
      var(--primary-400),
      transparent 30%
    ),
    radial-gradient(circle at 80% 30%, var(--primary-700), transparent 30%),
    radial-gradient(circle at 60% 85%, var(--primary-500), transparent 35%);
  filter: blur(100px);
  opacity: 0.5;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dark .dynamic-header-card::before {
  opacity: 0.3;
}

.dynamic-header-card:hover::before {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 0.7;
}

.dark .dynamic-header-card:hover::before {
  opacity: 0.5;
}

/* --- [BARU] Class Teks Adaptif untuk Header Aurora --- */
.header-text-themed {
  color: var(--primary-900); /* Warna teks gelap di mode terang */
}
.dark .header-text-themed {
  color: white; /* Warna teks terang di mode gelap */
}

.header-subtext-themed {
  color: var(--primary-800); /* Warna sub-teks di mode terang */
  opacity: 0.9;
}
.dark .header-subtext-themed {
  color: white; /* Warna sub-teks di mode gelap */
  opacity: 0.8;
}

.header-button-themed {
  background-color: var(--primary-500);
  color: white;
}
.header-button-themed:hover {
  background-color: var(--primary-600);
}
.dark .header-button-themed {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}
.dark .header-button-themed:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}