/* The sign-up form drawn from the brand's registration policy, quick sign-up's credentials and the "complete your
   registration" step (docs/REGISTRATION-POLICY.md). Inputs are the auth form's own; touch targets are 44px. */
.reg-methods, .reg-consents { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
/* The boxes are compact rows (owner, 2026-10-23: "daha az olsun, daha küçük"): small text and checkbox, little space
   between them; each row's label stays a 30px target. */
.reg-consents { gap: 0; }
.reg-methods legend { margin-bottom: 6px; padding: 0; color: var(--text); font-size: 0.9231rem; font-weight: 700; }
.reg-method-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); background: var(--bg-deep);
}
.reg-method-options label { position: relative; display: grid; min-height: 44px; place-items: center; border-radius: var(--radius); cursor: pointer; }
.reg-method-options input { position: absolute; opacity: 0; pointer-events: none; }
.reg-method-options span { padding: 6px 8px; color: var(--muted-light); font-size: .8462rem; font-weight: 800; text-align: center; }
.reg-method-options input:checked + span { color: var(--on-action); }
.reg-method-options label.is-checked { background: var(--odd); box-shadow: 0 5px 14px #0003; }
.reg-method-options input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; border-radius: var(--radius); }
.reg-national-id { display: grid; gap: 14px; }
.auth-field select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-deep); color: var(--text); font: inherit;
}
.auth-form .kyc-picker-list [role="option"] { min-height: 44px; }
.reg-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.reg-consent label { display: flex; align-items: center; gap: 8px; min-height: 30px; color: var(--muted-light); font-size: 0.8462rem; line-height: 1.3; cursor: pointer; }
.reg-consent input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--accent); }
.reg-terms-link { display: inline-flex; align-items: center; min-height: 30px; color: var(--accent); font-size: 0.8462rem; font-weight: 700; }
.reg-step-actions { display: grid; gap: 8px; }
/* The one-click account's welcome screen (owner, 2026-10-23 ~16:45): the username and the password large and legible,
   each with Copy, the note to keep them, and "Oynamaya başla". The close button waits for that button. */
#auth-dialog:has([data-reg-credentials]) .auth-close { display: none; }
.reg-greeting { display: grid; gap: 14px; }
.reg-greeting h2 { margin: 0; }
.reg-greeting .auth-description { margin: -8px 0 0; }
.reg-greeting-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); background: var(--bg-deep); }
.reg-greeting-row { display: grid; gap: 6px; }
.reg-greeting-row label { color: var(--muted-light); font-size: 0.7692rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.reg-greeting-value { display: flex; align-items: center; gap: 10px; }
.reg-greeting-value input {
  min-width: 0; flex: 1; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.385rem; font-weight: 700; letter-spacing: 1.5px;
}
.reg-greeting-value input:focus { border-color: var(--accent); outline: 0; }
.reg-copy {
  min-width: 44px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit; font-weight: 800; cursor: pointer;
}
.reg-copy:hover { border-color: var(--accent); }
.reg-copy:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.reg-copy.is-copied { border-color: var(--accent); color: var(--accent); }
.reg-greeting-note { margin: 0; color: var(--text); font-size: 0.9231rem; font-weight: 700; }
.reg-greeting-promo { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-size: 0.8462rem; font-weight: 700; }
.reg-greeting-promo[data-state="error"] { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.reg-greeting-start { width: 100%; min-height: 52px; border-radius: 999px; font-size: 1.077rem; font-weight: 900; }

/* ── "Tek tıkla": the one-click sign-up (owner, 2026-10-23, after a competitor's phone modal) ─────────────────────
   The brand's welcome offer on top, then compact rows: the country, the currency, the promo code with its check, one box
   for the age and the site rules, and a big "Kaydol"; the drawn pair is shown after it (the welcome screen). */
/* The offer is the dialog's top band, edge to edge, the close button inside its corner. */
.reg-welcome {
  position: relative; display: grid; justify-items: center; gap: 2px; margin: -29px -29px 16px; padding: 22px 58px 18px; overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bar1), var(--bar2));
  color: var(--on-bar);
}
.reg-welcome-kicker { color: color-mix(in srgb, var(--on-bar) 78%, transparent); font-size: 0.7692rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.reg-welcome-amount {
  color: var(--odd); font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.5px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--odd) 55%, transparent);
}
.reg-welcome-detail { margin: 2px 0 0; color: var(--on-bar); font-size: 0.8462rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.reg-quick-form { gap: 10px; }
.reg-quick-form .kyc-field-label, .reg-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.reg-quick-form .kyc-picker-trigger { min-height: 48px; }
.reg-currency, .reg-promo {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-deep); color: var(--text);
}
.reg-currency:focus-within, .reg-promo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.reg-currency-code {
  min-width: 34px; height: 24px; display: grid; place-items: center; padding: 0 5px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.6923rem; font-weight: 900;
}
.reg-currency select { min-width: 0; flex: 1; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.reg-currency select:disabled { cursor: default; opacity: 1; }
.reg-row-icon { display: inline-grid; flex: none; place-items: center; color: var(--muted); }
.reg-promo input { min-width: 0; flex: 1; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.reg-promo input::placeholder { color: var(--muted); }
.reg-promo-check { min-height: 40px; padding: 0 6px; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.reg-promo-check:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.reg-promo-note { margin: -4px 2px 0; color: var(--muted-light); font-size: 0.7692rem; }
.reg-promo-note[data-state="error"] { color: var(--danger); }
.reg-consent-combined { padding: 6px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.reg-consent-combined label { align-items: flex-start; color: var(--text); font-size: 0.8462rem; line-height: 1.4; }
.reg-consent-combined input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; }
.reg-consent-combined .reg-terms-link { display: inline; min-height: 0; }
.reg-quick-submit { width: 100%; min-height: 52px; border-radius: 999px; font-size: 1.077rem; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
/* The site rules over the sign-up (owner, 2026-10-23 16:55): the brand's published page in a popup above the dialog,
   its title, a body that scrolls, a close button; the sign-up stays underneath as it was. */
.rules-layer { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; background: #020705b8; }
.rules-dialog {
  display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(640px, 100%); max-height: min(720px, calc(100dvh - 48px));
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: var(--shadow); outline: 0;
}
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); }
.rules-head h2 { margin: 0; font-size: 1.231rem; line-height: 1.25; }
.rules-close {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel3); color: var(--text); cursor: pointer;
}
.rules-close .ui-icon { width: 20px; height: 20px; }
.rules-close:focus-visible, .rules-body:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rules-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; }
.rules-body .cms-player-page { max-width: none; margin: 0; padding: 0; }
.rules-body .cms-player-page-header { display: none; }
.rules-body .cms-player-content { padding: 0; border: 0; background: none; }
.rules-body .cms-player-content h2 { margin: 18px 0 8px; font-size: 1.077rem; }
.rules-body .cms-player-content h2:first-child { margin-top: 0; }
.rules-body .cms-player-content p, .rules-body .cms-player-content li { font-size: 0.9231rem; line-height: 1.6; }
.rules-state { margin: 0; color: var(--muted-light); font-size: 0.9231rem; }
/* The dialog's padding is 24px 20px up to 720px wide (styles.css); the band follows it. */
@media (max-width: 720px) {
  .reg-welcome { margin: -24px -20px 14px; padding: 18px 54px 14px; }
  .rules-layer { padding: 12px; }
  .rules-dialog { max-height: calc(100dvh - 24px); }
}
/* On a phone the copy buttons keep their icon, the values their width. */
@media (max-width: 479px) {
  .reg-copy [data-copy-label] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}