/* FORM TITLE AREA - BUKAN HEADER KEDUA */
.pf-banner {
  background: #f0f3f8;
  padding: 28px 0 0;
  position: relative;
  overflow: visible;
}

.pf-banner::after {
  display: none;
}

.pf-banner .container {
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 8px 24px rgba(13, 35, 71, 0.08);
}

.pf-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c47c10;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.pf-banner h1 {
  font-size: 22px;
  font-weight: 700;
  color: #0d2347;
  margin: 0 0 6px;
}

.pf-banner p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}
  /* Steps */
  .pf-steps {
    display: flex; background: #fff;
    border: 1px solid #e5e9f0; border-radius: 12px;
    overflow: hidden; margin-bottom: 24px;
  }
  .pf-step {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-right: 1px solid #e5e9f0;
    font-size: 13px; font-weight: 500; color: #8a94a6;
  }
  .pf-step:last-child { border-right: none; }
  .pf-step.active { background: #eef3fc; color: #0d2347; }
  .pf-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid #c8d0de;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; color: #8a94a6;
  }
  .pf-step.active .pf-step-num { background: #0d2347; border-color: #0d2347; color: #fff; }

  /* Card */
  .pf-card { background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
  .pf-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-bottom: 1px solid #f0f3f8; background: #fafbfd;
  }
  .pf-card-icon { width: 34px; height: 34px; border-radius: 8px; background: #eef3fc; display: flex; align-items: center; justify-content: center; color: #185FA5; font-size: 16px; flex-shrink: 0; }
  .pf-card-title { font-size: 14px; font-weight: 700; color: #1a2340; margin: 0; }
  .pf-card-sub   { font-size: 12px; color: #8a94a6; margin: 0; }
  .pf-card-body  { padding: 20px; }

  /* Fields */
  .form-row-2 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-bottom: 16px;
  }
  .form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
  .form-field:last-child { margin-bottom: 0; }
  .pf-label { font-size: 12px; font-weight: 600; color: #4a5568; letter-spacing: 0.02em; }
  .pf-label .req { color: #E24B4A; margin-left: 2px; }
  .form-control {
    height: 40px; border: 1px solid #dde2ec; border-radius: 8px;
    padding: 0 12px; font-size: 13.5px; color: #1a2340; background: #fff;
    width: 100%; box-sizing: border-box; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .form-control:focus { outline: none; border-color: #185FA5; box-shadow: 0 0 0 3px rgba(24,95,165,0.1); }
  textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; }
  select.form-control { cursor: pointer; }
  .form-control[readonly] { background: #f5f7fa; color: #8a94a6; cursor: not-allowed; }

  /* Validation states */
  .form-control.is-invalid { border-color: #e74c3c !important; background-color: #fff8f8 !important; background-image: none !important; }
  .form-control.is-valid   { border-color: #22a86e !important; background-color: #f0fdf8 !important; background-image: none !important; }
  .form-control:not(.is-invalid):not(.is-valid) { border-color: #dde2ec !important; background-color: #fff !important; background-image: none !important; }
  .form-control:not(.is-invalid):not(.is-valid):focus { border-color: #185FA5 !important; box-shadow: 0 0 0 3px rgba(24,95,165,0.1) !important; }

  .form-hint  { font-size: 11.5px; color: #8a94a6; margin: 2px 0 0; }
  .field-error { font-size: 12px; color: #c0392b; margin: 4px 0 0; display: flex; align-items: center; gap: 4px; }
  .text-danger { color: #E24B4A !important; }

  /* File Upload */
  .pf-file-wrap {
    display: flex; align-items: center; gap: 12px;
    border: 1.5px dashed #c8d0de; border-radius: 8px;
    padding: 12px 14px; background: #fafbfd; cursor: pointer;
    transition: border-color 0.15s;
  }
  .pf-file-wrap:hover { border-color: #185FA5; }
  .pf-file-wrap.has-file { border-color: #22a86e; background: #f0fdf8; }
  .pf-file-wrap.has-file .pf-file-icon { color: #22a86e; }
  .pf-file-wrap input[type="file"] { display: none; }
  .pf-file-icon  { color: #185FA5; font-size: 22px; flex-shrink: 0; }
  .pf-file-cta   { font-size: 13px; font-weight: 600; color: #185FA5; display: block; }
  .pf-file-info  { font-size: 11.5px; color: #8a94a6; display: block; }

  /* Alert */
  .alert-error-box {
    background: #fff8f7; border: 1px solid #fca5a5;
    border-left: 4px solid #e74c3c; border-radius: 10px;
    padding: 16px 20px; margin-bottom: 24px; font-size: 13.5px;
  }
  .alert-error-head { display: flex; align-items: center; gap: 8px; color: #c0392b; margin-bottom: 10px; font-weight: 600; }
  .alert-error-head .ti { font-size: 18px; }
  .alert-error-box ul { margin: 0; padding-left: 16px; color: #7f1d1d; }
  .alert-error-box li { margin-bottom: 4px; }
  .alert-error-box a  { color: #c0392b; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
  .alert-error-box a:hover { text-decoration: underline; }

  /* Actions */
  .pf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
  .btn-submit {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0d2347; color: #fff; border: none; border-radius: 8px;
    padding: 11px 24px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background 0.2s, transform 0.1s;
  }
  .btn-submit:hover { background: #0a1628; transform: translateY(-1px); }
  .btn-submit:active { transform: translateY(0); }
  .btn-link-secondary {
    font-size: 13.5px; color: #185FA5; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px; font-weight: 500;
  }
  .btn-link-secondary:hover { text-decoration: underline; }

  /* Email status */
  #email-feedback.status-ok    { color: #22a86e; }
  #email-feedback.status-error { color: #c0392b; }
  #email-feedback.status-check { color: #8a94a6; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .spin { display:inline-block; animation: spin 0.8s linear infinite; }

  @media (max-width: 575px) {
    .pf-steps { display: none; }
    .pf-card-body { padding: 16px; }
    .form-row-2 { grid-template-columns: 1fr; }
    .pf-banner { padding: 24px 0; }
    .pf-banner h1 { font-size: 18px; }
  }

/* CSP-safe utility and component classes */
.is-hidden {
    display: none !important;
}

.pf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 10px;
}

.pf-back-link:hover {
    color: #185fa5;
}

.pf-main-content {
    background: #f0f3f8;
    padding-top: 28px;
    padding-bottom: 48px;
}

.email-input-wrap {
    position: relative;
}

.email-input-wrap .form-control {
    padding-right: 42px;
}

.email-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.email-status.status-ok {
    color: #22a86e;
}

.email-status.status-error {
    color: #e74c3c;
}

.email-status.status-check {
    color: #8a94a6;
}

.form-hint-spaced {
    margin-top: 4px;
}

.form-field-password-confirm {
    max-width: 340px;
}

.form-field-request-number {
    max-width: 360px;
}

.file-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.file-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #dde2ec;
    flex-shrink: 0;
}

.file-name {
    word-break: break-all;
}

.file-change {
    margin-left: auto;
    font-size: 12px;
    color: #185fa5;
    white-space: nowrap;
    flex-shrink: 0;
}