* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      min-height: 100vh;
      background-image: url('/images/login.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .main-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 20px;
    }

    /* LEFT SECTION */
    .left-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 40px 60px; /* Tambah padding kanan */
    }

    .logo-container {
      margin-bottom: 20px;
      padding-left: 90px; /* Geser logo ke kanan */
    }

    .logo-image {
      max-width: 500px;
      width: 100%;
      height: auto;
      display: block;
    }

    .tagline {
      white-space: nowrap;
      font-size: 17px;
      color: #1e3a8a;
      font-weight: 500;
      line-height: 1.5;
      max-width: 500px;
      padding-left: 100px; /* sejajar dengan logo */
    }

    /* RIGHT SECTION */
    .right-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-card {
      background: white;
      border-radius: 16px;
      padding: 40px 35px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 420px;
    }

    .login-title {
      font-size: 28px;
      font-weight: 700;
      color: #1e3a8a;
      text-align: center;
      margin-bottom: 30px;
    }

    .form-label {
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 8px;
    }

    .form-control {
      padding: 12px 14px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .password-wrapper {
      position: relative;
    }

    .password-wrapper .form-control {
      padding-right: 45px;
    }

    .toggle-password {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #64748b;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.3s ease;
      z-index: 10;
    }

    .toggle-password:hover {
      color: #1e3a8a;
    }

    .forgot-password {
      text-align: left;
      margin-bottom: 20px;
    }

    .forgot-password a {
      color: #1e3a8a;
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
    }

    .btn-custom {
      padding: 12px 16px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 100%;
    }

    .btn-primary-custom {
      background: #1e3a8a;
      color: white;
    }

    .btn-primary-custom:hover {
      background: #1e40af;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
    }

    .btn-secondary-custom {
      background: #f59e0b;
      color: #301E00;
    }

    .btn-secondary-custom:hover {
      background: #d97706;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    /* Responsive Tablet */
    @media (max-width: 991px) {
      .left-section {
        text-align: center;
        align-items: center;
        padding: 20px;
        margin-bottom: 20px;
      }

      .logo-container {
        padding-left: 0;
      }

      .logo-image {
        max-width: 320px;
      }

      .tagline {
        text-align: center;
        padding-left: 0;
        font-size: 15px;
      }

      .right-section {
        padding: 10px;
      }

      .login-card {
        max-width: 100%;
      }
    }

    /* Mobile */
    @media (max-width: 576px) {
      body {
        background-attachment: scroll;
      }

      .main-container {
        padding: 15px;
      }

      .left-section {
        padding: 15px;
        margin-bottom: 15px;
      }

      .logo-image {
        max-width: 240px;
      }

      .tagline {
        font-size: 13px;
      }

      .login-card {
        padding: 25px 20px;
        border-radius: 12px;
      }

      .login-title {
        font-size: 22px;
        margin-bottom: 20px;
      }

      .form-control {
        padding: 10px 12px;
        font-size: 13px;
      }

      /* Pusatkan tombol di mobile */
      .row.g-2 {
        justify-content: center;
        text-align: center;
      }

      .col-6 {
        flex: 0 0 80%;
        max-width: 80%;
      }

      .btn-custom {
        padding: 10px 14px;
        font-size: 13px;
      }
    }

    @media (max-width: 414px) {
      .logo-image {
        max-width: 200px;
      }

      .tagline {
        font-size: 12px;
        line-height: 1.4;
      }

      .login-card {
        padding: 20px 15px;
      }

      .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }