body {
     background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%);
     min-height: 100vh;
     display: flex;
     align-items: center;
     font-family: 'Segoe UI', sans-serif;
     position: relative;
     overflow-x: hidden;
 }

 /* FIX #1:
           Sebelumnya .container di-override dengan margin-left/right: 15px,
           yang merusak auto-centering bawaan Bootstrap (margin: 0 auto).
           Sekarang kita HANYA tambahkan padding kiri-kanan yang SAMA BESAR,
           tanpa mengganggu max-width & centering per breakpoint Bootstrap.
           Ini yang membuat jarak kiri-kanan selalu simetris di semua ukuran layar. */
 .container {
     padding-left: 15px;
     padding-right: 15px;
 }

 /* ==============================================
           WADAH DEKORASI - SIAP DIISI GAMBAR
           Ganti nilai url("") dengan nama file gambar kamu
           ============================================== */
 .dekorasi {
     position: absolute;
     background-repeat: no-repeat;
     z-index: 0;
     pointer-events: none;
     /* Agar tidak mengganggu klik tombol/form */
     margin: 0;
     padding: 0;
     border: none;
 }

 /* 1. Kiri Atas */
 .dekorasi-kiri-atas {
     top: 0 !important;
     left: 0 !important;
     width: 260px;
     height: auto;
     min-height: 100vh;
     background-image: url("/assets/images/kiri-atas.png");
     background-position: left top !important;
     background-repeat: no-repeat;
     background-size: contain;
 }

 /* 2. Kanan Atas */
 .dekorasi-kanan-atas {
     top: 0 !important;
     right: 0 !important;
     width: 280px;
     height: 50%;
     background-image: url("/assets/images/kanan-atas.png");
     background-position: right top !important;
     background-size: contain;
 }

 /* 3. Kiri Bawah */
 .dekorasi-kiri-bawah {
     bottom: 0 !important;
     left: 0 !important;
     width: 250px;
     height: 200px;
     background-image: url("");
     background-position: left bottom !important;
     background-size: contain;
 }

 /* 4. Kanan Bawah */
 .dekorasi-kanan-bawah {
     bottom: 0 !important;
     right: 0 !important;
     width: 400px;
     height: 220px;
     background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 50%), url("/assets/images/kanan-bawah.png") center/cover no-repeat;
     background-position: right bottom !important;
     background-size: contain;
 }

 /* 5. Tengah */
 .dekorasi-tengah {
     top: 55%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 550px;
     height: 400px;
     opacity: 0.6;
     background-image: url("/assets/images/center.png");
     background-position: center center;
     background-size: contain;
 }

 /* Titik-titik dekorasi */
 .bg-dots {
     position: absolute;
     top: 50px;
     left: 50%;
     transform: translateX(-50%);
     display: grid;
     grid-template-columns: repeat(6, 8px);
     gap: 8px;
     opacity: 0.3;
     z-index: 1;
 }

 .bg-dots span {
     width: 8px;
     height: 8px;
     background-color: #0056b3;
     border-radius: 50%;
 }

 /* Bagian Kiri - Konten */
 .left-section {
     position: relative;
     z-index: 2;
     color: #003366;
     padding-left: 100px;
 }

 /* FIX #2:
           Sebelumnya padding-left: 50px ditulis sebagai inline style
           di <div class="col-lg-12" style="padding-left:50px">.
           Inline style TIDAK BISA di-override oleh media query biasa,
           jadi walau .left-section di-reset di mobile, div ini tetap
           punya jarak 50px hanya di kiri -> teks jadi tidak center di HP.
           Sekarang dipindah ke class .intro-wrapper agar bisa direset. */
 .intro-wrapper {
     padding-left: 50px;
 }

 .left-section h1 {
     font-weight: 700;
     font-size: 2.8rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .divider-line {
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #0056b3, #ffc107);
     margin-bottom: 1.5rem;
 }

 .left-section p {
     font-size: 1.1rem;
     line-height: 1.6;
     margin-bottom: 2.5rem;
     font-weight: 500;
 }

 .feature-item {
     text-align: center;
     margin-bottom: 1rem;
 }

 .feature-title {
     font-weight: 700;
     font-size: 1rem;
     margin-bottom: 0.5rem;
 }

 .feature-desc {
     font-size: 0.85rem;
     line-height: 1.4;
     color: #333;
 }

 /* FIX #3:
           Kolom kanan sebelumnya col-lg-5 offset-lg-1, yang membuat
           lebar kolom kiri (6) dan kanan (5) TIDAK SAMA, plus jarak
           antar kolom "dimakan" habis oleh offset.
           Sekarang kolom kanan jadi col-lg-6 (seimbang dengan kiri),
           dan login-card di-center di dalam kolom pakai flexbox,
           supaya proporsi kiri-kanan benar-benar simetris. */
 .login-col {
     display: flex;
     justify-content: center;
     align-items: center;
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 100px;
 }

 /* Bagian Kanan - Form Login */
 .login-card {
     background: #ffffff;
     border-radius: 16px;
     box-shadow: 0 8px 32px rgba(0, 86, 179, 0.1);
     padding: 1rem 1.2rem;
     position: relative;
     z-index: 2;
     border: 1px solid rgba(0, 86, 179, 0.1);
     width: 100%;
     max-width: 420px;
     text-align: center;
 }

 .logo-container {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .logo-lsp {
     color: white;
     padding: 8px 12px;
     font-weight: 700;
     font-size: 0.85rem;
     text-align: center;
 }

 .logo-bnsp {
     font-weight: 800;
     font-size: 2rem;
     color: #000000;
 }

 .login-card h2 {
     color: #003366;
     font-weight: 700;
     text-align: center;
     margin-bottom: 0.3rem;
 }

 .login-subtitle {
     text-align: center;
     color: #666;
     font-size: 0.95rem;
 }

 .login-welcome {
     text-align: center;
     color: #143b82;
     font-size: 24px;
     font-weight: bold;
 }

 .form-control {
     /* height: 45px; */
     padding-left: 20px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0
 }

 .form-control:focus {
     border-color: #0056b3;
     box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
 }

 .input-group {
     position: relative;
     margin-bottom: 1rem;
 }

 .input-icon {
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #6c757d;
 }

 .password-toggle {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #6c757d;
     cursor: pointer;
 }

 .custom-control-label::before {
     border-radius: 4px;
 }

 .btn-login {
     background-color: #0056b3;
     color: white;
     font-weight: 600;
     border-radius: 8px;
     height: 45px;
     font-size: 1rem;
     margin: 1rem 0 0.8rem;
 }

 .btn-login:hover {
     background-color: #004494;
     color: white;
 }

 .divider-text {
     text-align: center;
     color: #999;
     margin: 1rem 0;
     position: relative;
 }

 .divider-text::before,
 .divider-text::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 45%;
     height: 1px;
     background-color: #ddd;
 }

 .divider-text::before {
     left: 0;
 }

 .divider-text::after {
     right: 0;
 }

 .btn-assessor {
     border: 1px solid #0056b3;
     color: #0056b3;
     font-weight: 500;
     border-radius: 8px;
     height: 45px;
     width: 100%;
     margin-bottom: 0.5rem;
 }

 .btn-assessor:hover {
     background-color: #f0f7ff;
     color: #004494;
 }

 .forgot-link {
     color: #0056b3;
     font-size: 0.9rem;
     text-decoration: none;
 }

 .forgot-link:hover {
     color: #003366;
     text-decoration: underline;
 }

 .copyright {
     text-align: center;
     font-size: 0.8rem;
     color: #6c757d;
     margin-top: 1.2rem;
 }

 /* ==============================================
           PENGATURAN RESPONSIF - DEKORASI OTOMATIS HILANG DI HP
           ============================================== */
 @media (max-width: 768px) {
     .dekorasi {
         display: none;
     }

     .bg-dots {
         display: none;
     }

     .left-section {
         padding: 2rem;
         text-align: center;
     }

     /* FIX #2 (lanjutan): reset padding-left 50px di mobile,
               sekarang BISA karena sudah pakai class, bukan inline style */
     .intro-wrapper {
         padding-left: 0;
         padding-right: 0;
     }

     .left-section h1 {
         font-size: 2rem;
     }

     .feature-item {
         margin-bottom: 1.5rem;
     }

     .login-card {
         margin: 0 1rem;
         padding: 2rem;
         max-width: 100%;
     }

     .divider-line {
         margin-left: 45%;
         margin-right: auto;
     }

     .login-col {
         padding: 0;
     }
 }

 .bg-dots-bottom-left {
     position: absolute;
     bottom: 50px;
     left: 50px;
     display: grid;
     grid-template-columns: repeat(6, 8px);
     gap: 8px;
     opacity: 0.3;
     z-index: 1;
 }

 .bg-dots-bottom-left span {
     width: 8px;
     height: 8px;
     background-color: #0056b3;
     border-radius: 50%;
 }

 .feature-icon {
     width: 110px;
     height: 90px;
     background-image: url('/assets/icons/feature-icon.png');
     /* satu file gambar berisi semua ikon */
     background-repeat: no-repeat;
     background-size: 300px 90px;
     margin-left: 0.8rem;
     /* total lebar & tinggi sprite */
 }

 /* posisi masing-masing ikon */
 .feature-icon.shield {
     background-position: 0 0;
     margin-left: 65px;
     /* ikon pertama (kiri) */
 }

 .feature-icon.medal {
     background-position: -100px 0;
     margin-left: 50px;
     /* ikon kedua (tengah) */
 }

 .feature-icon.handshake {
     background-position: -200px 0;
     margin-left: 50px;
     /* ikon ketiga (kanan) */
 }

 @media (max-width: 767px) {
     .feature-item {
         display: grid;
         grid-template-columns: auto 1fr;
         /* kolom icon auto, kolom teks sisanya */
         grid-template-areas:
             "icon title"
             "icon desc";
         column-gap: 12px;
         align-items: center;
         /* opsional, biar icon center secara vertikal */
     }

     .feature-icon {
         grid-area: icon;
     }

     .feature-title {
         grid-area: title;
     }

     .feature-desc {
         grid-area: desc;
     }
 }

 .d-block {
     text-align: left;
 }