/* Global Styling for modern feel */
 body {
   font-family: 'Inter', sans-serif;
   background-color: #f8f7fa;
   /* Light background behind the main container */
 }

 .login-container-wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   padding: 2rem;
   box-sizing: border-box;
   /* Include padding in element's total width and height */
 }

 .auth-single-card {
   position: relative;
   display: flex;
   /* Default to column for smaller screens, will be row for large */
   flex-direction: column;
   width: 100%;
   max-width: 1200px;
   /* Max width for the entire card */
   min-height: 600px;
   /* Minimum height for the card, adjust as needed */
   border-radius: 1.5rem;
   overflow: hidden;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
   /* Stronger shadow for the combined card */
   background-color: #ffffff;
   /* Fallback background for card */
 }

 /* Ini adalah container untuk gambar dan teks overlay */
 .auth-image-content-container {
   position: relative;
   flex: 1;
   /* Di desktop akan mengisi sisa ruang */
   /* d-none d-lg-block akan menyembunyikannya di mobile (<lg) */
 }

 .auth-image-content {
   position: absolute;
   /* Tetap absolute untuk mengisi parent */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 1.5rem;
   /* Match parent radius */
 }

 .auth-image-content img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   /* Ensures image is centered in its container */
   display: block;
   animation: zoomIn 15s infinite alternate ease-in-out;
   will-change: transform;
 }

 @keyframes zoomIn {
   0% {
     transform: scale(1);
   }

   100% {
     transform: scale(1.08);
   }
 }

 .auth-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   border-radius: 1.5rem;
   z-index: 1;
 }

 .auth-text-overlay {
   position: relative;
   z-index: 2;
   padding: 3rem;
   text-align: left;
   color: #FFFFFF;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   height: 100%;
   /* Memastikan ini mengisi tinggi parent (auth-image-content-container) */
 }

 .auth-app-brand {
   margin-bottom: 2rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }

 .auth-logo-responsive {
   height: 60px !important;
   width: auto;
 }

 .auth-text-overlay h2 {
   font-size: 3rem;
   font-weight: 800;
   color: #FFFFFF;
   text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
   margin-bottom: 1.2rem;
   line-height: 1.2;
   position: relative;
 }

 .auth-text-overlay h2::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -0.75rem;
   width: 150px;
   height: 5px;
   background-color: #8600a8;
   border-radius: 5px;
 }

 .auth-text-overlay p {
   font-size: 1.4rem;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.9);
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: 0;
 }

 .auth-text-overlay .university-name {
   display: block;
   font-size: 2rem;
   font-weight: 700;
   margin-top: 0.6rem;
   color: #A300C9;
 }

 /* Form Login Styling */
 .auth-login-form-wrap {
   position: relative;
   z-index: 2;
   flex: 0 0 450px;
   /* Fixed width for form on larger screens */
   background-color: rgba(255, 255, 255, 0.9);
   padding: 3rem 4rem;
   border-radius: 0 1.5rem 1.5rem 0;
   /* Only right side rounded corners for desktop form */
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .auth-login-form-wrap h3 {
   font-size: 1.8rem;
   font-weight: 700;
   color: #333333;
   margin-bottom: 1.5rem;
   text-align: center;
 }

 .auth-divider {
   margin: 2.5rem 0;
 }

 .auth-divider-text {
   font-size: 0.9rem;
   color: #888888;
 }

  .btn:hover {
    transform: translateY(-4px) scale(1.02);
  }

 /* Custom Button Styles */
 .btn-login-custom {
   background: linear-gradient(45deg, #8600a8, #c700d8) !important;
   border: 3px solid #ff00ff !important;
   color: #ffffff !important;
   font-weight: 700;
   font-size: 1rem;
   padding: 1rem 2.5rem;
   /* border-radius: 50px !important; */
   box-shadow: 0 8px 20px rgba(134, 0, 168, 0.4);
   letter-spacing: 0.5px;
   text-transform: uppercase;
   transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   cursor: pointer;
   max-width: 350px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   width: 100%;
 }

 .btn-login-custom:hover {
   background: linear-gradient(45deg, #c700d8, #8600a8) !important;
   box-shadow: 0 12px 25px rgba(134, 0, 168, 0.6);
 }

 .btn-secondary-outline {
   background-color: transparent;
   border: 2px solid #8600a8;
   color: #8600a8;
   font-weight: 600;
   font-size: 0.95rem;
   padding: 0.85rem 1.5rem;
   border-radius: 0.75rem;
   transition: all 0.3s ease;
   text-transform: uppercase;
   cursor: pointer;
   max-width: 350px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   width: 100%;
 }

 .btn-secondary-outline:hover {
   background-color: #8600a8;
   color: #ffffff;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(134, 0, 168, 0.3);
 }

 /* Responsive adjustments */
 @media (min-width: 992px) {
   .auth-single-card {
     flex-direction: row;
   }

   .auth-image-content-container {
     flex: 1;
     /* Mengisi sisa ruang */
     margin-right: -450px;
     /* Overlap dengan form section */
   }

   .auth-login-form-wrap {
     border-radius: 0 1.5rem 1.5rem 0;
     /* Pastikan hanya sisi kanan yang bulat di desktop */
   }
 }

 @media (max-width: 991.98px) {
   .auth-single-card {
     flex-direction: column;
     min-height: auto;
     max-width: 400px;
     /* Batasi lebar kartu di mobile */
     border-radius: 1.5rem;
     /* Pastikan seluruh kartu bulat di mobile */
   }

   /* Sembunyikan kontainer gambar di mobile */
   .auth-image-content-container {
     display: none;
   }

   /* Form login akan mengambil lebar penuh dan terpusat */
   .auth-login-form-wrap {
     flex: none;
     width: 100%;
     padding: 2.5rem 2rem;
     /* Sesuaikan padding form di mobile */
     border-radius: 1.5rem;
     /* Pastikan seluruh form bulat di mobile */
     background-color: #ffffff;
     /* Pastikan latar belakang solid putih di mobile */
     box-shadow: none;
     /* Hapus shadow yang mungkin mengganggu jika ada */
   }

   .auth-login-form-wrap h3 {
     font-size: 1.8rem;
     /* Ukuran font tetap konsisten di mobile */
   }

   .auth-divider {
     margin: 2rem 0;
     /* Kurangi margin divider */
   }

   .auth-divider-text {
     font-size: 0.9rem;
   }

   .btn-login-custom,
   .btn-secondary-outline {
     padding: 0.8rem 1.5rem;
     font-size: 0.95rem;
     /* Sedikit lebih besar dari sebelumnya di mobile */
     max-width: 100%;
     /* Tombol ambil lebar penuh di mobile */
   }
 }

 @media (max-width: 575.98px) {
   .login-container-wrap {
     padding: 0.75rem;
   }

   .auth-single-card {
     max-width: 320px;
     /* Lebih kecil lagi untuk ponsel sangat kecil */
   }

   .auth-login-form-wrap {
     padding: 2rem 1.5rem;
     /* Padding lebih kecil lagi */
   }

   .auth-login-form-wrap h3 {
     font-size: 1.6rem;
   }

   .btn-login-custom,
   .btn-secondary-outline {
     padding: 0.7rem 1.2rem;
     font-size: 0.9rem;
   }
 }