*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; overflow: hidden; }
    body {
      font-family: 'Roboto', sans-serif;
      display: flex;
      height: 100vh;
      background: #fff;
    }

    /* ── Panel kiri: form ───────────────────────────────────────── */
    .form-panel {
      width: 100%;
      max-width: 560px;
      flex-shrink: 0;
      height: 100%;
      overflow-y: auto;
    }
    .form-inner {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(20px, 5vh, 56px) clamp(24px, 6vw, 72px);
    }
    .logo { margin-bottom: 36px; }
    .logo img { height: 34px; width: auto; display: block; }

    .heading { font-size: clamp(22px, 3vh, 28px); font-weight: 900; color: #111; margin-bottom: 6px; letter-spacing: -0.01em; }
    .subheading { font-size: 14px; color: #777; margin-bottom: clamp(16px, 3vh, 28px); }

    .field { margin-bottom: clamp(10px, 2vh, 16px); }
    .field label { display: block; font-size: 12px; font-weight: 600; color: #444; margin-bottom: 6px; }
    .field-wrap { position: relative; }
    .field-wrap svg.field-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      width: 17px; height: 17px; stroke: #9aa0a6; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
    }
    .field input {
      width: 100%; font-family: 'Roboto', sans-serif; font-size: 14px;
      border: 1.5px solid #e6e6e6; border-radius: 10px; padding: 12px 14px 12px 42px;
      outline: none; color: #111; background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field input:focus { border-color: #16b8c4; box-shadow: 0 0 0 3px rgba(22,184,196,0.12); }
    .field.has-toggle input { padding-right: 42px; }
    .pw-toggle {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; padding: 4px; color: #9aa0a6;
      display: flex; align-items: center;
    }
    .pw-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .pw-toggle:hover { color: #555; }

    .field-meta { display: flex; justify-content: flex-end; margin-top: 6px; }
    .field-meta a { font-size: 12px; color: #16b8c4; text-decoration: none; font-weight: 600; }
    .field-meta a:hover { text-decoration: underline; }

    .btn-primary {
      width: 100%; background: #e6392f; color: #fff;
      border: none; border-radius: 10px; padding: 13px;
      font-size: 15px; font-weight: 700; font-family: 'Roboto', sans-serif;
      cursor: pointer; margin-top: 8px; transition: background 0.15s, transform 0.1s;
    }
    .btn-primary:hover { background: #cc2f26; }
    .btn-primary:active { transform: scale(0.99); }
    .btn-primary:disabled { background: #f0a8a3; cursor: not-allowed; }

    .alert { border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: none; line-height: 1.5; }
    .alert.error { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
    .alert.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
    .alert.show { display: block; }
    .spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .divider-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #aaa; font-size: 12px; }
    .divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: #ececec; }

    .btn-google {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
      background: #fff; color: #3c4043; border: 1.5px solid #e6e6e6; border-radius: 10px;
      padding: 12px; font-size: 14px; font-weight: 500; font-family: 'Roboto', sans-serif;
      cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s;
    }
    .btn-google:hover { background: #fafafa; border-color: #d8d8d8; }

    .link-text { text-align: center; font-size: 13px; color: #888; margin-top: 22px; }
    .link-text a { color: #16b8c4; text-decoration: none; font-weight: 600; }
    .link-text a:hover { text-decoration: underline; }

    .forgot { margin-top: 20px; display: flex; justify-content: center; gap: 16px; }
    .forgot a { font-size: 11px; color: #bbb; text-decoration: none; }
    .forgot a:hover { color: #888; text-decoration: underline; }
    
    .info-links { margin-top: 20px; display: flex; justify-content: center; gap: 16px; }
    .info-links a { font-size: 11px; color: #bbb; text-decoration: none; }
    .info-links a:hover { color: #888; text-decoration: underline; }

    /* ── Panel kanan: hero visual ───────────────────────────────── */
    .hero-panel {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #2c3654 0%, #4a4165 32%, #a15a56 62%, #d98a52 82%, #e8a262 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-panel svg.skyline { position: absolute; inset: 0; width: 100%; height: 100%; }
    .hero-copy {
      position: relative; z-index: 2;
      color: #fff;
      text-align: center;
      max-width: 480px;
      padding: 0 32px;
    }
    .hero-copy h1 {
      font-size: 40px; font-weight: 900; line-height: 1.12; letter-spacing: -0.01em;
      text-shadow: 0 2px 18px rgba(0,0,0,0.35);
    }
    .hero-rule { width: 64px; height: 4px; background: #e6392f; border-radius: 2px; margin: 18px auto; }
    .hero-copy p {
      font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.88); max-width: 380px; line-height: 1.6;
      margin: 0 auto;
    }

    @media (max-width: 900px) {
      .hero-panel { display: none; }
      .form-panel { max-width: 100%; }
      .form-inner { padding: clamp(20px, 5vh, 40px) 24px; }
    }

    @media (max-height: 700px) {
      .logo { margin-bottom: 16px; }
      .field { margin-bottom: 10px; }
      .divider-or { margin: 12px 0; }
      .link-text, .info-links { margin-top: 12px; }
    }