:root{
    --aisin-blue:#0d6efd;
    --aisin-gold:#c9a13a;
  }

  body{
    min-height:100vh;
    background: url("../img/bg.png") center / cover no-repeat fixed;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  }

  .btn-primary{
    background-color: #0d6efd;
    border:1px solid #0d6efd;
  }

  /* wrapper */
  .profile-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
  }

  /* card utama */
  .profile-card{
    max-width:560px;
    width:100%;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(6px);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 20px 45px rgba(0,0,0,.15);
  }

  /* title */
  .profile-title{
    text-align:center;
    font-weight:800;
    letter-spacing:.15em;
    color:var(--aisin-blue);
    border-bottom:3px solid var(--aisin-gold);
    padding-bottom:12px;
    margin-bottom:20px;
    text-transform:uppercase;
  }

  .welcome-text{
    font-size:1.4rem;
    font-weight:600;
    color:#1a1a1a;
    margin-bottom:18px;
  }

  .info-row{
    font-size:1.1rem;
    line-height:1.6;
    color:#222;
  }

  .info-row span{
    display:block;
  }

  .question{
    margin-top:22px;
    font-weight:700;
    font-size:1.2rem;
    color:var(--aisin-blue);
  }

  /* tombol */
  .btn-answer{
    font-weight:800;
    letter-spacing:.18em;
    padding:14px 0;
    border-radius:12px;
    text-transform:uppercase;
    transition:.2s ease;
  }

  .btn-yes{
    background:var(--aisin-blue);
    color:#fff;
    border:none;
  }

  .btn-yes:hover{
    background:#0d6efd;
  }

  .btn-no{
    background:#fff;
    color:var(--aisin-gold);
    border:2px solid var(--aisin-gold);
  }

  .btn-no:hover{
    background:var(--aisin-gold);
    color:#fff;
  }

  .info-table{
  width:100%;
  font-size:1.05rem;
}

.info-table td{
  padding:6px 4px;
  color:#1a1a1a;
}

.info-table .label{
  width:110px;
  font-weight:600;
  color:#0b4ea2; /* AISIN Blue */
}

.info-table .sep{
  width:10px;
  text-align:center;
  font-weight:600;
}

.info-table .value{
  font-weight:500;
}

/* mobile adjustment */
@media (max-width:576px){
  .info-table{
    font-size:1rem;
  }
  .info-table .label{
    width:90px;
  }
}


.bg-overlay{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,.25) 0%,
        rgba(0,0,0,.20) 40%,
        rgba(0,0,0,.30) 100%
      );
    }

    .login-card{
      width:100%;
      max-width: 440px;
      background: rgba(255,255,255,.90);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 18px;
      box-shadow: 0 22px 60px rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.45);
      overflow:hidden;
    }

    .login-header{
      padding: 18px 22px;
      background: linear-gradient(135deg, rgba(11,78,162,.10), rgba(201,161,58,.12));
      border-bottom: 1px solid rgba(0,0,0,.06);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .brand-badge{
      width:40px; height:40px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: var(--aisin-blue);
      color:#fff;
      box-shadow: 0 10px 20px rgba(11,78,162,.25);
      font-weight:800;
      letter-spacing:.06em;
    }

    .brand-title{
      margin:0;
      font-weight:800;
      letter-spacing:.08em;
      color: var(--aisin-blue);
      text-transform: uppercase;
      font-size: 1rem;
      line-height: 1.1;
    }

    .brand-sub{
      margin:0;
      color: rgba(0,0,0,.60);
      font-size: .9rem;
    }

    .login-body{
      padding: 22px;
    }

    .divider-gold{
      height:3px;
      width: 120px;
      background: var(--aisin-gold);
      border-radius: 999px;
      margin: 10px 0 16px;
    }

    .form-label{
      font-weight:700;
      color: rgba(0,0,0,.75);
    }

    .form-control{
      border-radius: 12px;
      padding: .75rem .95rem;
      border: 1px solid rgba(0,0,0,.12);
    }
    .form-control:focus{
      border-color: rgba(11,78,162,.45);
      box-shadow: 0 0 0 .25rem rgba(11,78,162,.12);
    }

    .input-group-text{
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(11,78,162,.05);
      color: var(--aisin-blue);
    }

    /* Tombol biru + text putih */
    .btn-login{
      border-radius: 12px;
      padding: .85rem 1rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: var(--aisin-blue);
      color: #fff;
      border: none;
      box-shadow: 0 14px 26px rgba(11,78,162,.25);
    }
    .btn-login:hover{
      background: #093f85;
      color: #fff;
    }
    .btn-login:focus{
      box-shadow: 0 0 0 .25rem rgba(11,78,162,.25);
    }

    .footer-note{
      padding: 14px 22px;
      border-top: 1px solid rgba(0,0,0,.06);
      color: rgba(0,0,0,.55);
      font-size: .85rem;
      text-align:center;
    }