*{
      box-sizing:border-box;
      font-family:'Inter', sans-serif;
    }

    body {
      min-height: 100vh;
      margin: 0;
      background: radial-gradient(circle at top, #1a1a1a, #0b0b0b);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .login-card{
      width:100%;
      max-width:380px;
      background:white;
      padding:38px 34px;
      border-radius:22px;
      box-shadow:0 30px 70px rgba(0,0,0,.25);
      animation:fade .4s ease;
    }

    @keyframes fade{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    .brand {
      display: flex;
      align-items: center;     /* tengah vertikal */
      justify-content: center; /* tengah horizontal */
      gap: 12px;
    }

    .logo {
      width: 40px;
      height: 40px;
      border-radius: 8px; /* ganti 50% kalau mau bulat */
      text-align:center;
      overflow: hidden;
    }

    .logo img {
      width: 100%;
      height: 100%;
      text-align:center;
      object-fit: contain;
    }

    .brand h1{
      margin:0;
      font-size:20px;
      font-weight:800;
      color:#111827;
    }

    h2{
      margin:0 0 8px;
      text-align:center;
      font-size:22px;
      font-weight:800;
      color:#111827;
    }

    .subtitle{
      text-align:center;
      font-size:14px;
      color:#6b7280;
      margin-bottom:26px;
    }

    form{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    input{
      padding:14px 16px;
      border-radius:14px;
      border:2px solid #e5e7eb;
      font-size:14px;
    }

    input:focus{
      outline:none;
      border-color:#6366f1;
      box-shadow:0 0 0 3px rgba(99,102,241,.15);
    }

    button{
      margin-top:6px;
      padding:14px;
      border-radius:14px;
      border:none;
      background:#6366f1;
      color:white;
      font-size:15px;
      font-weight:800;
      cursor:pointer;
      transition:.2s ease;
    }

    button:hover{
      opacity:.9;
      transform:translateY(-1px);
    }

    .footer {
      margin-top: 24px;
      text-align: center;
      font-size: 14px;
      color: #6b7280;
    }

    .footer a {
      color: #6366f1;
      font-weight: 600;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    .reset-link {
      display: inline-block;
      margin-bottom: 12px;
    }

    .divider {
      height: 1px;
      width: 100%;
      max-width: 260px;
      background: #e5e7eb;
      margin: 10px auto;
    }

    .error-box{
      background:rgba(255,0,0,.1);
      border:1px solid rgba(255,0,0,.25);
      color:#dc2626;
      padding:10px 12px;
      border-radius:12px;
      font-size:13px;
      margin-bottom:14px;
      text-align:center;
    }

    .input-group{
      position:relative;
      display:flex;
      align-items:center;
    }

    .input-group input{
      width:100%;
      padding-left:44px;
    }

    .icon{
      position:absolute;
      left:14px;
      font-size:16px;
      opacity:.6;
    }

    .toggle{
      position:absolute;
      right:14px;
      cursor:pointer;
      opacity:.6;
    }

    .toggle:hover{opacity:1}

    button{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }

    button:disabled{
      opacity:.7;
      cursor:not-allowed;
    }

    .spinner{
      width:16px;
      height:16px;
      border:2px solid rgba(255,255,255,.4);
      border-top:2px solid white;
      border-radius:50%;
      animation:spin 1s linear infinite;
      display:none;
    }

    button.loading .spinner{display:block}
    button.loading .btn-text{display:none}

    @keyframes spin{
      to{transform:rotate(360deg)}
    }