/* Base */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Transisi halus saat pindah halaman (dipakai untuk animasi ganti bahasa ID/EN):
   body fade+slide in saat halaman baru dimuat, dan class .page-fade-out dipicu
   oleh JS sesaat sebelum navigasi supaya halaman lama fade out dulu. */
body {
  animation: pageFadeIn 0.35s ease-out;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

body.page-fade-out {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

/* Highlight singkat pada tombol bahasa yang baru dipilih */
@keyframes langPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.lang-switch-active {
  display: inline-block;
  animation: langPulse 0.35s ease-out;
}

/* ===== Sistem Dark Mode / Light Mode =====
   Token warna utama (bg, surface, textmain, textmuted, bordertone) didefinisikan
   sebagai CSS variable RGB, dipetakan ke Tailwind lewat tailwind.config di head.ejs.
   Elemen yang pakai warna Tailwind bawaan langsung (bg-white, border-slate-100,
   dst — bukan token custom) di-override terpisah di bawah supaya ikut berubah
   juga saat dark mode aktif. */
:root {
  --color-bg: 248 250 252;          /* slate-50 */
  --color-surface: 255 255 255;     /* white */
  --color-textmain: 15 23 42;       /* slate-900 */
  --color-textmuted: 100 116 139;   /* slate-500 */
  --color-bordertone: 226 232 240;  /* slate-200 */
}

[data-theme='dark'] {
  --color-bg: 8 11 20;              /* near-black slate */
  --color-surface: 17 22 35;        /* dark surface */
  --color-textmain: 241 245 249;    /* slate-100 */
  --color-textmuted: 148 163 184;   /* slate-400 */
  --color-bordertone: 40 48 66;     /* dark slate border */
}

[data-theme='dark'] body {
  background-color: rgb(var(--color-bg));
  color-scheme: dark;
}

/* Override kelas Tailwind bawaan (bukan token custom) yang dipakai luas di
   seluruh halaman, supaya kartu/border/teks ikut gelap tanpa perlu menambah
   prefix dark: di 500+ tempat. */
[data-theme='dark'] .bg-white { background-color: rgb(var(--color-surface)) !important; }
[data-theme='dark'] .bg-white\/80 { background-color: rgb(var(--color-surface) / 0.8) !important; }
[data-theme='dark'] .bg-slate-50 { background-color: rgb(23 29 46) !important; }
[data-theme='dark'] .bg-slate-100 { background-color: rgb(30 37 56) !important; }
[data-theme='dark'] .bg-indigo-50 { background-color: rgb(30 32 66) !important; }
[data-theme='dark'] .bg-indigo-50\/50 { background-color: rgb(30 32 66 / 0.5) !important; }
[data-theme='dark'] .bg-indigo-50\/60 { background-color: rgb(30 32 66 / 0.6) !important; }
[data-theme='dark'] .bg-indigo-50\/40 { background-color: rgb(30 32 66 / 0.4) !important; }
[data-theme='dark'] .bg-amber-50 { background-color: rgb(46 36 12) !important; }
[data-theme='dark'] .bg-amber-50\/70 { background-color: rgb(46 36 12 / 0.7) !important; }
[data-theme='dark'] .bg-emerald-50 { background-color: rgb(9 41 31) !important; }
[data-theme='dark'] .bg-rose-50 { background-color: rgb(46 16 22) !important; }

/* Kelas hover:bg-* (dipakai luas di dropdown, item sidebar, daftar notifikasi,
   dsb) juga perlu di-override, atau backgroundnya tetap putih terang saat
   dark mode dan bikin teks jadi nyaris tak terbaca. */
[data-theme='dark'] .hover\:bg-slate-50:hover { background-color: rgb(23 29 46) !important; }
[data-theme='dark'] .hover\:bg-slate-100:hover { background-color: rgb(30 37 56) !important; }
[data-theme='dark'] .hover\:bg-indigo-50:hover { background-color: rgb(30 32 66) !important; }
[data-theme='dark'] .hover\:bg-indigo-100:hover { background-color: rgb(40 42 90) !important; }
[data-theme='dark'] .hover\:bg-rose-50:hover { background-color: rgb(46 16 22) !important; }

[data-theme='dark'] .border-slate-100 { border-color: rgb(var(--color-bordertone)) !important; }
[data-theme='dark'] .border-slate-200 { border-color: rgb(var(--color-bordertone)) !important; }
[data-theme='dark'] .border-slate-300 { border-color: rgb(71 82 107) !important; }
[data-theme='dark'] .border-indigo-100 { border-color: rgb(49 46 105) !important; }
[data-theme='dark'] .border-indigo-200 { border-color: rgb(60 58 130) !important; }
[data-theme='dark'] .border-amber-200 { border-color: rgb(90 68 20) !important; }
[data-theme='dark'] .border-amber-100 { border-color: rgb(90 68 20) !important; }
[data-theme='dark'] .border-dashed { border-color: inherit; }

[data-theme='dark'] .text-slate-400 { color: rgb(100 116 139) !important; }
[data-theme='dark'] .text-slate-500 { color: rgb(148 163 184) !important; }
[data-theme='dark'] .text-slate-600 { color: rgb(203 213 225) !important; }
[data-theme='dark'] .text-slate-700 { color: rgb(226 232 240) !important; }
[data-theme='dark'] .text-textmain { color: rgb(var(--color-textmain)) !important; }
[data-theme='dark'] .text-amber-700 { color: rgb(251 191 36) !important; }
[data-theme='dark'] .text-amber-700\/90 { color: rgb(251 191 36 / 0.9) !important; }
[data-theme='dark'] .text-amber-800 { color: rgb(251 191 36) !important; }

[data-theme='dark'] .shadow-soft,
[data-theme='dark'] .shadow-softhover {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
}

/* Elemen form (input/select/textarea) pakai border-bordertone + bg-white secara
   default; override latar & placeholder supaya tetap terbaca di dark mode. */
[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-textmain));
}
[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: rgb(100 116 139);
}
[data-theme='dark'] input:disabled,
[data-theme='dark'] select:disabled {
  background-color: rgb(23 29 46);
}

/* Blur gradasi dekoratif di halaman login/register/landing terlalu terang di
   dark mode; redupkan supaya tidak mendominasi. */
[data-theme='dark'] .blur-3xl {
  opacity: 0.12 !important;
}

/* Toggle switch tema (ikon matahari/bulan) */
.theme-toggle-track {
  transition: background-color 0.25s ease;
}
.theme-toggle-thumb {
  transition: transform 0.25s ease;
}
[data-theme='dark'] .theme-toggle-thumb {
  transform: translateX(16px);
}
.theme-icon-sun,
.theme-icon-moon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-icon-moon {
  opacity: 0;
  transform: scale(0.5);
}
.theme-icon-sun {
  opacity: 1;
  transform: scale(1);
}
[data-theme='dark'] .theme-icon-sun {
  opacity: 0;
  transform: scale(0.5);
}
[data-theme='dark'] .theme-icon-moon {
  opacity: 1;
  transform: scale(1);
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Isometric hero panel card */
.hero-panel-card {
  transform: rotateX(5deg) rotateY(-12deg);
  transform-style: preserve-3d;
  transition: transform 0.4s ease-out;
}

.hero-panel-card:hover {
  transform: rotateX(2deg) rotateY(-8deg);
}

/* Feature cards get a very subtle alternating tilt on larger screens for the
   "dimensional depth" signature, settling flat on hover for legibility */
@media (min-width: 1024px) {
  .feature-card:nth-child(3n + 1) {
    transform: rotateY(2deg);
  }
  .feature-card:nth-child(3n + 3) {
    transform: rotateY(-2deg);
  }
  .feature-card:hover {
    transform: translateY(-4px) rotateY(0deg);
  }
}

/* Gentle floating badge animation */
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: floaty 4s ease-in-out infinite;
}

/* Slow floating for background blobs */
@keyframes floaty-slow {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -24px) scale(1.05);
  }
}

.animate-float-slow {
  animation: floaty-slow 9s ease-in-out infinite;
}

/* Scroll-reveal: elements fade (+ optionally move/scale) into place as they
   enter the viewport. Toggled by the IntersectionObserver in /js/script.js.

   FLEXIBLE USAGE:
   - Base class: .reveal (defaults to fade + slide up, like before)
   - Direction modifiers (pick one, optional): .reveal-up (default) .reveal-down
     .reveal-left .reveal-right .reveal-zoom .reveal-fade (opacity only, no movement)
   - Speed modifiers (optional): .reveal-fast .reveal-slow
   - Distance can be tuned per-element with an inline style, e.g. style="--reveal-distance: 48px"
   - Stagger delays (optional): .reveal-delay-1 through .reveal-delay-6
   Example: <div class="reveal reveal-left reveal-slow reveal-delay-2">...</div> */
.reveal {
  --reveal-distance: 28px;
  --reveal-duration: 0.7s;
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--reveal-duration) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Direction variants */
.reveal-up { transform: translateY(var(--reveal-distance)); }
.reveal-down { transform: translateY(calc(-1 * var(--reveal-distance))); }
.reveal-left { transform: translateX(calc(-1 * var(--reveal-distance))); }
.reveal-right { transform: translateX(var(--reveal-distance)); }
.reveal-zoom { transform: scale(0.92); }
.reveal-fade { transform: none; }

/* Speed variants */
.reveal-fast { --reveal-duration: 0.4s; }
.reveal-slow { --reveal-duration: 1.1s; }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* Toast notifikasi (pop-up sukses/gagal), lihat partials/toast.ejs + script.js */
.toast-popup {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 100;
  opacity: 0;
  transform: translateX(-50%) translateY(-16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.toast-popup.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Slider RAM/Disk/CPU di kartu "Server VIP" (halaman Produk) */
.vip-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: #e2e8f0;
  outline: none;
}

.vip-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
  cursor: pointer;
  border: 2px solid white;
}

.vip-slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
  cursor: pointer;
  border: 2px solid white;
}

/* Visible focus ring fallback for elements without Tailwind focus-visible utilities */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* Scrollbar tipis untuk kartu server yang bisa digeser kanan-kiri (Server Saya) */
.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: #c7d2fe transparent;
  -webkit-overflow-scrolling: touch;
}
.scroll-thin::-webkit-scrollbar {
  height: 6px;
}
.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background-color: #c7d2fe;
  border-radius: 9999px;
}