/* ============================================================
   Halaman Whistleblower (WBS)
   ============================================================ */

.wbs-hero .wbs-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.wbs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(142, 216, 255, .24);
  border-radius: 999px;
  background: rgba(142, 216, 255, .07);
  color: #cfe9fb;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

.wbs-badge svg {
  width: 13px;
  height: 13px;
  color: var(--brand-light);
}

.wbs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.wbs-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 134, 190, .12), transparent 60%),
    linear-gradient(180deg, rgba(10, 43, 75, .45), rgba(5, 24, 44, .32));
}

.wbs-card .icon-box {
  margin-bottom: 14px;
}

.wbs-card h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.wbs-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

/* Steps */

.wbs-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wbs;
}

.wbs-step {
  position: relative;
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 24, 44, .4);
}

.wbs-step::before {
  counter-increment: wbs;
  content: "0" counter(wbs);
  display: block;
  margin-bottom: 10px;
  color: var(--brand-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.wbs-step h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.wbs-step p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

/* Categories */

.wbs-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wbs-cats li {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: var(--text-soft);
  font-size: 11.5px;
}

/* Layout form + aside */

.wbs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 24px;
  align-items: start;
}

.wbs-form-panel,
.wbs-aside-card,
.wbs-status-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 134, 190, .16), transparent 55%),
    linear-gradient(180deg, rgba(10, 43, 75, .52), rgba(5, 24, 44, .4));
}

.wbs-form-panel { padding: 26px; }

.wbs-panel-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.wbs-panel-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.wbs-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.wbs-form .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wbs-form .field { display: flex; flex-direction: column; gap: 6px; }
.wbs-form .field--full { grid-column: 1 / -1; }

.wbs-form label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wbs-form label .req { color: #ff9d9d; }

.wbs-form label .opt {
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.wbs-form input[type="text"],
.wbs-form input[type="email"],
.wbs-form input[type="tel"],
.wbs-form input[type="date"],
.wbs-form select,
.wbs-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(158, 207, 241, .22);
  border-radius: 10px;
  background: rgba(2, 12, 24, .55);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wbs-form select { cursor: pointer; }

.wbs-form input:focus,
.wbs-form select:focus,
.wbs-form textarea:focus {
  outline: none;
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(142, 216, 255, .14);
}

.wbs-form input::placeholder,
.wbs-form textarea::placeholder { color: #6f92a9; }

.wbs-form textarea { min-height: 150px; resize: vertical; }

.wbs-form input[type="file"] {
  width: 100%;
  padding: 9px;
  border: 1px dashed rgba(158, 207, 241, .3);
  border-radius: 10px;
  background: rgba(2, 12, 24, .35);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.wbs-form input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(142, 216, 255, .1);
  color: var(--brand-light);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.wbs-hint {
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.5;
}

.wbs-counter {
  align-self: flex-end;
  color: var(--muted-2);
  font-size: 9.5px;
}

/* Anonymous toggle */

.wbs-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(142, 216, 255, .22);
  border-radius: 12px;
  background: rgba(142, 216, 255, .06);
  cursor: pointer;
}

.wbs-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wbs-switch {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(158, 207, 241, .25);
  transition: background .2s ease;
}

.wbs-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}

.wbs-toggle input:checked + .wbs-switch { background: var(--brand); }
.wbs-toggle input:checked + .wbs-switch::after { transform: translateX(16px); }
.wbs-toggle input:focus-visible + .wbs-switch { box-shadow: 0 0 0 3px rgba(142, 216, 255, .25); }

.wbs-toggle-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.wbs-toggle-copy span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}

/* Checkbox consent */

.wbs-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}

.wbs-check input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--brand);
}

.wbs-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.wbs-actions .btn { flex: 1 1 220px; justify-content: center; }

.wbs-form-status {
  display: block;
  min-height: 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.wbs-form-status.is-error { color: #ffb3b3; }

/* Hidden honeypot */

.wbs-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aside */

.wbs-aside { display: grid; gap: 16px; }

.wbs-aside-card { padding: 20px; }

.wbs-aside-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
}

.wbs-aside-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wbs-aside-card li {
  display: flex;
  gap: 9px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.wbs-aside-card li svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--brand-light);
}

.wbs-aside-card a { color: var(--brand-light); }

.wbs-contact-line {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.wbs-contact-line span {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Success / status result */

.wbs-result {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(126, 231, 178, .34);
  border-radius: 14px;
  background: rgba(39, 132, 88, .14);
}

.wbs-result[hidden] { display: none; }

.wbs-result h3 {
  margin: 0 0 6px;
  color: #b9f4d6;
  font-size: 14px;
}

.wbs-result p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.wbs-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wbs-ref {
  padding: 11px 13px;
  border: 1px solid rgba(158, 207, 241, .2);
  border-radius: 10px;
  background: rgba(2, 12, 24, .5);
}

.wbs-ref span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wbs-ref strong {
  display: block;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 16px;
  letter-spacing: .06em;
}

.wbs-ref button {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-light);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.wbs-status-panel { margin-top: 24px; padding: 24px; }

.wbs-status-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.wbs-status-form .field { flex: 1 1 180px; }

.wbs-status-result {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 12, 24, .4);
}

.wbs-status-result[hidden] { display: none; }

.wbs-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.wbs-status-line strong { color: var(--text); font-size: 13px; }

.wbs-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(142, 216, 255, .12);
  color: var(--brand-light);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wbs-status-result p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

/* FAQ spacing */

.wbs-faq .faq-item { scroll-margin-top: 110px; }

/* Responsive */

@media (max-width: 1000px) {
  .wbs-layout { grid-template-columns: 1fr; }
  .wbs-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wbs-grid-3,
  .wbs-steps { grid-template-columns: 1fr; }
  .wbs-form .field-grid { grid-template-columns: 1fr; }
  .wbs-aside { grid-template-columns: 1fr; }
  .wbs-ref-grid { grid-template-columns: 1fr; }
  .wbs-form-panel { padding: 20px; }
  .wbs-status-panel { padding: 20px; }
  .wbs-actions .btn { flex: 1 1 100%; }
}