/* ══════════════════════════════════════════════════════
   CODE BLUE · register.codeblue.club
   Brand system: Navy #08093A · Code Blue #161798
   Active Blue #3A40E6 · Pulse Cyan #1FD3E0 (CTA only)
   Oswald (display) · Inter (body)
   ══════════════════════════════════════════════════════ */

:root {
  --navy: #08093A;
  --code-blue: #161798;
  --active-blue: #3A40E6;
  --pulse-cyan: #1FD3E0;
  --sky: #C9CBF4;
  --mist: #EEEFFB;
  --ink: #14152B;
  --slate: #6E7088;
  --white: #FFFFFF;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(8, 9, 58, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--mist);
  /* dot-grid racket face texture */
  background-image: radial-gradient(rgba(22, 23, 152, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 96px; }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: 0 20px 96px; }

/* ── Header ──────────────────────────────────────── */
.site-header {
  background: var(--navy);
  padding: 20px 0 0;
  margin-bottom: 56px;
}
.site-header .bar {
  max-width: 1100px; margin: 0 auto; padding: 0 20px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: 0.04em;
  color: var(--white); text-decoration: none; text-transform: uppercase;
}
.brand span { font-weight: 300; color: var(--sky); }
.header-tag {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pulse-cyan);
}

/* Pulse line — signature divider (single clean line, one ball node) */
.pulse-line { display: block; width: 100%; height: 28px; }
.pulse-line polyline { fill: none; stroke: var(--pulse-cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pulse-line circle { fill: var(--pulse-cyan); }

/* ── Typography ──────────────────────────────────── */
h1, h2, h3, .display {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.15;
}
h1 { font-weight: 700; font-size: clamp(30px, 5vw, 44px); letter-spacing: 0.01em; }
h2 { font-weight: 600; font-size: 22px; letter-spacing: 0.03em; }
.eyebrow {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--active-blue); margin-bottom: 10px;
}
.lede { color: var(--slate); font-size: 16px; max-width: 56ch; }

/* ── Cards & sections ────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid rgba(22, 23, 152, 0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-top: 28px;
}
.card > h2 { margin-bottom: 6px; }
.card .section-note { color: var(--slate); font-size: 13.5px; margin-bottom: 18px; }

.note-box {
  background: var(--mist);
  border-left: 3px solid var(--active-blue);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: 13.5px; color: var(--ink);
  margin: 14px 0 4px;
}

.fee-box {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--navy);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 16px;
}
.fee-box .label {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky);
}
.fee-box .amount {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px;
  color: var(--white); letter-spacing: 0.02em;
}
.fee-box .detail { font-size: 13px; color: var(--sky); flex-basis: 100%; }

/* ── Form elements ───────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }

.field { margin-top: 16px; }
.field label {
  display: block;
  font-weight: 600; font-size: 13.5px; color: var(--navy);
  margin-bottom: 6px;
}
.field label .req { color: var(--active-blue); }
.field .hint { font-weight: 400; color: var(--slate); font-size: 12.5px; margin-top: 4px; }

input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--sky);
  border-radius: 9px;
  background: var(--white);
  font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--active-blue);
  box-shadow: 0 0 0 3px rgba(58, 64, 230, 0.14);
}
input.invalid, select.invalid { border-color: #D14343; }

input[type="file"] { width: 100%; font-size: 13.5px; color: var(--slate); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13px;
  color: var(--code-blue); background: var(--mist);
  border: 1.5px solid var(--sky); border-radius: 8px;
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
}

.player-block {
  border: 1.5px solid var(--sky);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  background: #FBFBFE;
}
.player-block > h3 {
  font-size: 16px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--code-blue);
  display: flex; align-items: center; gap: 10px;
}
.player-block > h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--active-blue); flex: none;
}

.team-heading {
  margin-top: 34px;
  display: flex; align-items: center; gap: 14px;
}
.team-heading h2 { white-space: nowrap; }
.team-heading .rule { flex: 1; height: 1.5px; background: var(--sky); }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  border: none; border-radius: 10px; cursor: pointer;
  padding: 15px 34px;
  text-decoration: none; text-align: center;
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.btn:focus-visible { outline: 3px solid var(--active-blue); outline-offset: 2px; }

/* Cyan = conversion only (per brand system) */
.btn-cta {
  background: var(--pulse-cyan); color: var(--navy);
  box-shadow: 0 8px 22px rgba(31, 211, 224, 0.35);
  width: 100%; margin-top: 30px;
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(31, 211, 224, 0.45); }
.btn-cta:disabled { opacity: .55; cursor: wait; transform: none; }

.btn-ghost {
  background: transparent; color: var(--code-blue);
  border: 1.5px solid var(--sky);
}
.btn-ghost:hover { border-color: var(--active-blue); }

/* ── Landing choice cards ────────────────────────── */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
@media (max-width: 720px) { .choice-grid { grid-template-columns: 1fr; } }

.choice-card {
  display: block; text-decoration: none;
  background: var(--white);
  border: 1.5px solid rgba(22, 23, 152, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 28px 26px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.choice-card:hover {
  transform: translateY(-3px);
  border-color: var(--active-blue);
  box-shadow: 0 16px 40px rgba(8, 9, 58, 0.14);
}
.choice-card h2 { margin: 12px 0 8px; }
.choice-card p { color: var(--slate); font-size: 14px; }
.choice-card .price {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--code-blue); margin-top: 16px; letter-spacing: 0.04em;
}
.choice-card .go {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--active-blue); margin-top: 18px; display: inline-block;
}

/* ── Alerts / status ─────────────────────────────── */
.alert {
  border-radius: 10px; padding: 14px 18px; margin-top: 20px;
  font-size: 14px; display: none;
}
.alert.show { display: block; }
.alert-error { background: #FDECEC; color: #8C1D1D; border: 1px solid #F3C1C1; }

.success-card { text-align: center; padding: 48px 28px; }
.success-card .check {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--navy); color: var(--pulse-cyan);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 18px;
}
.success-card p { color: var(--slate); max-width: 48ch; margin: 10px auto 0; }
.success-card .reg-id {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px;
  color: var(--code-blue); letter-spacing: 0.08em; margin-top: 14px;
}

/* honeypot — jangan diberi display:none agar bot naif tetap mengisi */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Footer ──────────────────────────────────────── */
.site-footer {
  margin-top: 80px; padding: 34px 20px;
  background: var(--navy); text-align: center;
}
.site-footer p { color: var(--sky); font-size: 13px; }
.site-footer .tag {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--pulse-cyan); margin-top: 6px;
}

/* ── Admin ───────────────────────────────────────── */
.admin-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.admin-toolbar select, .admin-toolbar input { width: auto; }

table.admin {
  width: 100%; border-collapse: collapse; margin-top: 20px;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); font-size: 13.5px;
}
table.admin th {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--navy); color: var(--white);
  padding: 12px 14px; text-align: left;
}
table.admin td { padding: 11px 14px; border-bottom: 1px solid var(--mist); vertical-align: top; }
table.admin tr:hover td { background: #F7F8FE; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; letter-spacing: 0.04em;
}
.badge-mini { background: var(--mist); color: var(--code-blue); }
.badge-hcc { background: #DFFAFC; color: #0A7B85; }

.detail-panel {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; margin-top: 20px;
}
.detail-panel h3 { font-size: 16px; color: var(--code-blue); margin-top: 18px; }
.detail-panel dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 13.5px; margin-top: 10px; }
.detail-panel dt { color: var(--slate); }
.detail-panel dd { color: var(--ink); word-break: break-word; }
.detail-panel img.photo { max-width: 180px; border-radius: 10px; border: 1px solid var(--sky); margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}