body {
  margin: 0;
  font-family: "Inter", sans-serif;
  padding: 0;
  background-color: #ffffff;
  height: 100vh;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}
body.page-loaded {
  opacity: 1;
}
body.page-fade-out {
  opacity: 0;
}

/* Sisi Ilustrasi / Branding (kiri untuk login, kanan untuk register) */
.split-left,
.split-right-image {
  position: relative;
  background-size: cover;
  background-position: center;
  border: 10px solid #212529;
  box-sizing: border-box;
}
/* Sisi Kiri (Branding & Ilustrasi) — dipakai halaman LOGIN */
.split-left {
  background-image: url("../assets/akatsukigundam.png");
  background-size: cover;
  min-height: 100vh;
  padding: 3rem;
  overflow: hidden;
}
.split-left::before,
.split-right-image::before {
  content: "";
  position: absolute;
  inset: -20px; /* menutupi tepi yang blur agar tidak terlihat batas transparan */
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  z-index: 0;
}
/* Sisi Kanan (Ilustrasi) — dipakai halaman REGISTER */
.split-right-image {
  background-image: url("../assets/gundam.png");
}

/* Overlay gelap supaya teks branding tetap terbaca di atas gambar */
.auth-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 18, 0.88) 10%,
    rgba(10, 11, 18, 0.75) 45%,
    rgba(10, 11, 18, 0.9) 100%
  );
  z-index: 0;
}
.split-left > *,
.split-right-image > * {
  position: relative;
  z-index: 1;
}
.split-left .text-dark,
.split-right-image .text-dark {
  color: #ffffff !important;
}
.split-left .text-muted,
.split-right-image .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Sisi Form */
.split-right {
  min-height: 100vh;
}
.form-wrapper {
  width: 100%;
  max-width: 480px; /* Lebar form maksimal */
  padding: 2rem;
  animation: authFormIn 0.5s ease both;
}
@keyframes authFormIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modifikasi Input Group agar ikon ada di dalam (kanan) */
.form-label {
  font-weight: 500;
  color: #1f2937;
}
.form-control {
  padding: 0.75rem 1rem;
  border-right: none;
}
.form-control:focus {
  box-shadow: none;
  border-color: #3c50e0;
}
.input-group-text {
  background-color: transparent;
  color: #9ca3af;
  border-left: none;
}
.form-control:focus + .input-group-text {
  border-color: #3c50e0;
  color: #3c50e0;
}

/* Tombol Primary Khas TailAdmin */
.btn-primary-custom {
  background-color: #3c50e0;
  border-color: #3c50e0;
  padding: 0.75rem;
  font-weight: 500;
}
.btn-primary-custom:hover {
  background-color: #303fba;
  border-color: #303fba;
}

/* Garis Pemisah (Or sign in with) */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #6b7280;
  margin: 1.5rem 0;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e5e7eb;
}
.divider::before {
  margin-right: 1em;
}
.divider::after {
  margin-left: 1em;
}

.auth-brand-panel {
  position: relative;
  z-index: 1;
  background: rgba(10, 11, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(60, 80, 224, 0.4);
  border-radius: 1rem;
  padding: 2rem 3rem;
}
.auth-brand-logo {
  width: 100px;
  height: 100px;
  max-height: none; /* eksplisit lawan max-height:33px dari .brand-image AdminLTE */
  object-fit: cover; /* biar gambar tidak gepeng kalau rasio logo.png bukan 1:1 */
}