/* components.css — class reusable yang dipakai semua section. Di-load setelah tokens.css. */

/* ── Glass card (Glassmorphism 2.0, Flag #288) ── */
.glass-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-card);
}

/* ── Tombol ── */
.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-primary {
  background: var(--color-gold);
  color: var(--color-bg);
  border: 1px solid var(--color-gold);
}
.btn-outline {
  background: transparent;
  color: inherit;
  border: 1px solid var(--color-border);
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.btn-primary[disabled], .btn-outline[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary:focus-visible, .btn-outline:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ── Micro card (kartu kecil statistik/ikon) ── */
.micro-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* ── Magnetic button (MouseMagneticEngine, pointer:fine) ── */
.magnetic-btn { will-change: transform; }

/* ── Social floating buttons (hero.html: #btn-social-twitter/discord/youtube) ── */
.social-float-wrapper {
  position: fixed;
  bottom: var(--social-float-bottom);
  inset-inline-end: var(--social-float-right); /* B133: logis — floating ikut bercermin saat RTL */
  inset-inline-end: var(--social-float-right); /* RTL: pindah ke sisi kiri */
  display: flex;
  flex-direction: column;
  gap: var(--social-btn-gap);
  z-index: var(--z-float);
}
.social-float-btn {
  width: var(--social-btn-size);
  height: var(--social-btn-size);
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.social-float-btn[hidden] { display: none; } /* display:flex di atas mengalahkan atribut hidden bawaan */
.social-float-btn:hover, .social-float-btn:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.5);
}
.social-float-btn img,
.social-float-btn svg {
  width: 20px;
  height: 20px;
  /* filter gold: ikon monokrom hitam menjadi emas #c9a227 */
  filter: invert(66%) sepia(56%) saturate(548%) hue-rotate(6deg) brightness(92%) contrast(88%);
}

/* ── Social requirements (allowlist) ── */
.social-requirements {
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--blur-glass));
  padding: 20px;
  margin-bottom: 16px;
}
.social-requirements-item { display: flex; gap: 12px; margin: 8px 0; }
.social-check-link { color: var(--color-gold); text-decoration: underline; }
.social-check-link:hover, .social-check-link:focus-visible { color: var(--color-gold-bright); }
.btn-submit-wl[disabled] { opacity: 0.4; }
.btn-submit-wl:not([disabled]) { background: var(--color-gold); color: var(--color-bg); }

/* ── Honeypot: tersembunyi dari manusia, terlihat oleh bot scraper ── */
.honeypot-field {
  position: absolute;
  inset-inline-start: -9999px; /* B133: logis (RTL) */
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ── Toast (HolderBroadcastToast.js memakai class ini agar konsisten) ── */
.pe-toast {
  position: fixed;
  inset-block-end: calc(var(--social-float-bottom) + var(--social-btn-size) * 3 + var(--social-btn-gap) * 3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 480px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(var(--blur-glass));
  z-index: var(--z-toast);
  font-size: var(--text-sm);
}
.pe-toast--success { border-color: var(--color-success); }
.pe-toast--error { border-color: var(--color-error); }
.pe-toast--neutral { border-color: var(--color-border-gold); }

/* ── Badge / pill ── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Aksesibilitas ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }