/* Burger Bangor — Giveaway iPhone Duo landing page.
   Global base, Button component (direplikasi dari _ds Button.jsx),
   interaksi & responsif. Token warna/tipografi/spacing ada di tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-body);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

input, select, textarea { font-family: var(--font-body); }
input:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(151,204,0,.35);
  border-color: var(--primary-500) !important;
}

img { max-width: 100%; }

/* CTA pulse (dipakai di final CTA, verbatim dari desain) */
@keyframes bbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151,204,0,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(151,204,0,0); }
}

/* ── Button — port 1:1 dari design system Button.jsx ─────────────────
   Base + variant (primary/secondary/outline) + size (medium/large).
   Sizes/paddings/warna sama persis dengan Figma Button component set. */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 80ms ease;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.bb-btn:hover { text-decoration: none; }
.bb-btn:active { transform: translateY(1px); }

/* sizes */
.bb-btn--medium { min-height: 40px; padding: 10px 20px; font-size: 16px; }
.bb-btn--large  { min-height: 48px; padding: 20px 32px; font-size: 16px; }

/* variants */
.bb-btn--primary   { background: var(--primary-500); color: #fff; border: 1px solid transparent; }
.bb-btn--primary:hover   { background: var(--primary-600); color: #fff; }
.bb-btn--secondary { background: var(--dark-500); color: #fff; border: 1px solid transparent; }
.bb-btn--secondary:hover { background: var(--dark-600); color: #fff; }
.bb-btn--outline   { background: var(--white-50); color: var(--primary-700); border: 1px solid var(--border); }
.bb-btn--outline:hover   { background: var(--white-100); color: var(--primary-800); }

.bb-btn--block { width: 100%; }

.bb-btn:disabled, .bb-btn[aria-disabled="true"] {
  background: var(--white-300);
  color: #fff;
  border: 1px solid transparent;
  cursor: not-allowed;
}

/* ── Nav / header link hover ─────────────────────────────────────── */
.bb-nav a, .bb-nav button { transition: color 140ms ease; }
.bb-nav a:hover, .bb-nav button:hover { color: var(--primary-700); }

/* ── Footer social buttons hover ─────────────────────────────────── */
.bb-social:hover { background: var(--primary-500) !important; color: #fff !important; }

/* ── Upload dropzone hover ───────────────────────────────────────── */
.bb-dropzone { transition: border-color 140ms ease, background 140ms ease; }
.bb-dropzone:hover { border-color: var(--primary-500); background: #f7fbec; }
/* !important: border dropzone di-set via inline style di index.html, yang selalu menang atas class. */
.bb-dropzone--error, .bb-dropzone--error:hover { border-color: var(--error-600) !important; background: #fff1f1 !important; }

/* ── Legal modal close hover ─────────────────────────────────────── */
.bb-modal-close:hover { background: var(--white-100); }

/* ── Utility: hidden state toggled by JS ─────────────────────────── */
[hidden] { display: none !important; }

/* Anchor targets stay clear of the header. */
section[id] { scroll-margin-top: 80px; }
.bb-form-grid > *, .bb-contact-grid > * { min-width: 0; }

/* ── Responsive — desain aslinya fixed-desktop; breakpoint ditambah
   agar tidak overflow di tablet/mobile. Surface: penambahan sadar. ── */
@media (max-width: 960px) {
  .bb-nav > a { flex-shrink: 0; }
  .bb-nav-links > a:not(.bb-btn), .bb-nav-links > button { display: none; }
  .bb-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 56px 20px 64px !important; }
  .bb-hero-media { margin: 0 !important; }
  .bb-hero-art { margin: 0 !important; }
  .bb-hero-media img { width: 100% !important; margin: 0 !important; }
  .bb-h1, h1.bb-hero-title { font-size: 40px !important; }
  .bb-3col { grid-template-columns: 1fr !important; }
  .bb-4col { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .bb-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

@media (max-width: 640px) {
  .bb-nav { gap: 14px !important; }
  .bb-nav .bb-nav-links { display: none !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
  .bb-form-section { padding: 56px 18px !important; }
  .bb-4col { grid-template-columns: 1fr !important; }
  .bb-h3, .bb-h4 { font-size: 28px !important; }
  h1.bb-hero-title { font-size: 34px !important; }
  .bb-hero-grid { padding-left: 0 !important; padding-right: 0 !important; }
  .bb-form-card { padding: 24px !important; }
  .bb-form-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .bb-contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .bb-receipt-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .bb-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  #bb-legal { padding: 16px !important; }
  #bb-legal > div > div { padding: 20px !important; }
}