:root {
  --primary-color: #4e73df;
  --secondary-color: #858796;
  --success-color: #1cc88a;
  --danger-color: #e74a3b;
}

/* ========================================= */
/* === KAGENA LOGIN PAGE (3D v2) === */
/* ========================================= */


body {
  font-family: "Nunito", sans-serif;
  background-color: #f3f4f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  overflow: hidden;
  /* HAPUS perspective (3D) */
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* HAPUS transform 3D */
  transform: none !important;
  transform-style: flat !important;

  transition: box-shadow 0.4s ease;
}

.login-wrapper:hover .login-card {
  /* Hanya efek hover sederhana */
  transform: scale(1.03); /* efek aman */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.login-logo-container {
  position: absolute;
  top: -75px;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translateX(-50%); /* Hanya center horizontal */

  /* HAPUS translateZ */
  transform-style: flat !important;

  transition: transform 0.4s ease;
}

.login-wrapper:hover .login-logo-container {
  transform: translateX(-50%) scale(1.05);
}

.login-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff;
}

.login-form-body {
  padding: 90px 30px 30px 30px;

  /* HAPUS 3D MOVE */
  transform: none !important;
  transform-style: flat !important;
}

/* Styling input */
.login-input-group {
  border-radius: 0.5rem;
  background: #f3f4f6;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-input-group:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
}

.login-input-group .form-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.login-input-group .input-group-text {
  border: none !important;
  background: transparent !important;
  color: var(--secondary-color);
}


/* Efek Glassmorphism pada Navbar */
.glass-effect {
  background: rgba(78, 115, 223, 0.95) !important;
  backdrop-filter: blur(10px);
}

/* 3D Card Effect Wrapper */
.perspective-container {
  perspective: 1000px;
}

/* Kartu 3D Halus */
.card-3d {
  border: none;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.card-3d:hover {
  transform: translateY(-5px) rotateX(2deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Animasi Fade In Halaman */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

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

/* Utility untuk Dashboard nanti */
.saldo-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

#table-transaksi {
    position: relative;
    z-index: 10;
}

.table-responsive {
    position: relative;
    z-index: 10;
}