/* ============================================================
   SUNDAF TRIP — dark-mode.css
   Token overrides only. No layout changes.
   ============================================================ */

[data-theme="dark"] {
  --color-bg:         #111110;
  --color-surface:    #1c1917;
  --color-surface-2:  #28251f;
  --color-text:       #faf9f7;
  --color-text-muted: #a8a29e;
  --color-text-light: #78716c;
  --color-primary:    #ea580c;
  --color-primary-dk: #c2410c;
  --color-accent:     #f59e0b;
  --color-border:     #2c2826;
  --color-card-bg:    #1c1917;

  --shadow-card:  0 4px 24px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
  --shadow-hover: 0 12px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
}

/* Header: darker glass in dark mode */
[data-theme="dark"] .site-header {
  background: rgba(17,17,16,.88);
}

/* Hero orbs: slightly toned down in dark mode */
[data-theme="dark"] .hero-orb { opacity: 0.18; }

/* Footer: even darker */
[data-theme="dark"] .site-footer {
  background: #0a0908;
}

/* Scrollbar (Webkit) */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-light);
}

/* Toast in dark mode */
[data-theme="dark"] .toast {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

/* ── Logo di dark mode: tetap terang & terbaca ───────── */
[data-theme="dark"] .logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ── Logo pulse di dark mode: BERSINAR, bukan gelap ─────
   Override animasi dari style.css khusus saat dark mode.
   Efek: kilau emas-putih memancar dari logo.
────────────────────────────────────────────────────── */
[data-theme="dark"] .logo-img.logo-pulse {
  animation: logoPulseDark 0.55s ease forwards;
}

@keyframes logoPulseDark {
  0% {
    transform: scale(1);
    filter: brightness(0) invert(1);
  }
  35% {
    transform: scale(1.1);
    filter: brightness(0) invert(1)
            drop-shadow(0 0 8px rgba(251,191,36,1))
            drop-shadow(0 0 20px rgba(251,191,36,0.7))
            drop-shadow(0 0 40px rgba(234,88,12,0.5));
  }
  100% {
    transform: scale(1);
    filter: brightness(0) invert(1)
            drop-shadow(0 0 0px rgba(251,191,36,0));
  }
}

/* Smooth theme transition on everything except images */
*:not(img) {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.15s ease,
    box-shadow 0.3s ease;
}
/* Reset transition for interactive elements so hover feels instant */
a, button, .btn, .filter-tab, .pkg-card, .why-card {
  transition:
    background-color 0.25s cubic-bezier(0.4,0,0.2,1),
    border-color 0.25s cubic-bezier(0.4,0,0.2,1),
    color 0.15s cubic-bezier(0.4,0,0.2,1),
    transform 0.25s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),
    opacity 0.25s cubic-bezier(0.4,0,0.2,1);
}