/* Membership / auth — warm premium, tokens from storefront-tokens.css */

.auth-page {
  position: relative;
  width: 100%;
  max-width: 28rem;
  min-width: 0;
  margin: var(--space-lg) auto var(--space-3xl);
  padding: 0;
  /* Contain decorative wash — never widen document past the viewport */
  overflow-x: clip;
}

.auth-page::before {
  content: "";
  position: absolute;
  /* Vertical bleed only — horizontal negative inset caused mobile sideways scroll */
  top: -2.5rem;
  left: 0;
  right: 0;
  height: 14rem;
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(208, 71, 62, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 30%, rgba(240, 228, 224, 0.9), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.auth-shell {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
}

.auth-intro {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.auth-eyebrow {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand);
}

.auth-title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, var(--text-2xl));
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.auth-lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

.auth-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  min-width: 0;
  max-width: 100%;
  /* No opacity/transform animation: compositor layers clip Turkish
     descenders (g/ş/y) into “q”-like glyphs and black speckles. */
}

/* Tabs — Giriş / Üye Ol */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-lg);
  padding: var(--space-2xs);
  background: var(--color-blush);
  border-radius: var(--radius-md);
}

.auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  text-decoration: none;
  transition:
    color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.auth-tab:hover {
  color: var(--color-ink);
  text-decoration: none;
}

.auth-tab.active {
  background: var(--color-surface);
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-xs);
}

.auth-tab:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Alerts */
.auth-alert {
  margin: 0 0 var(--space-md);
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.auth-alert--error {
  background: #fdf2f1;
  border: 1px solid #f0c4bf;
  color: #9a2e28;
}

.auth-alert--ok {
  background: #f1f6f3;
  border: 1px solid #c5d9cc;
  color: var(--color-success);
}

/* Forms */
.auth-form {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  max-width: 100%;
}

.auth-form + .auth-guest,
.auth-divider {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}

.auth-field {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.auth-label {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.auth-field input:not([type="checkbox"]):not([type="radio"]),
.auth-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  font: inherit;
  font-size: var(--text-base); /* keep ≥16px — avoids iOS focus zoom / sideways jump */
  color: var(--color-ink);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
}

.auth-field input:hover:not(:disabled):not([type="checkbox"]):not([type="radio"]),
.auth-field select:hover:not(:disabled) {
  border-color: #c4b4ad;
}

.auth-field input:focus:not([type="checkbox"]):not([type="radio"]),
.auth-field select:focus {
  outline: none;
  border-color: var(--color-brand);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.auth-field input:disabled,
.auth-field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-field input::placeholder {
  color: var(--color-ink-faint);
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  min-width: 0;
}

@media (max-width: 480px) {
  .auth-row {
    grid-template-columns: 1fr;
  }
}

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.auth-check > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.auth-check input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12rem;
  flex-shrink: 0;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.auth-row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.auth-link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-actions {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* Social OAuth — Google Identity-style button (top of auth options) */
.auth-social {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  max-width: 100%;
}

.auth-social--top {
  margin: 0 0 var(--space-md);
}

.auth-social-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.auth-social-label::before,
.auth-social-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

/* Official Google Sign-In visual guidelines (custom HTML button).
   Isolate from storefront Gantari + global `a { … }` / `a:hover { underline }`.
   Segoe UI first on Windows — Roboto Medium can speckled-rasterize Turkish
   descenders in Chromium; avoid opacity/transform on ancestors. */
a.auth-social-btn,
.auth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  height: auto;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
  font-family: "Segoe UI", "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-synthesis: none;
  line-height: 1.42857; /* 20/14 — room for g/ş/y descenders */
  letter-spacing: normal;
  word-spacing: normal;
  color: #1f1f1f !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: unset;
  text-shadow: none !important;
  text-transform: none;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: unset;
  opacity: 1;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
  list-style: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

a.auth-social-btn:hover,
a.auth-social-btn:focus,
a.auth-social-btn:active,
a.auth-social-btn:visited,
.auth-social-btn:hover,
.auth-social-btn:focus,
.auth-social-btn:active,
.auth-social-btn:visited {
  color: #1f1f1f !important;
  -webkit-text-fill-color: unset;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1;
}

.auth-social-btn:hover {
  background: #f8f9fa;
  border-color: #dadce0;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.auth-social-btn:active {
  background: #eee;
  box-shadow: none;
}

.auth-social-btn:focus-visible {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

.auth-social-btn--google .auth-google-g {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
  transform: none;
}

.auth-social-btn__label {
  display: inline-block;
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  font-synthesis: none;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap;
  overflow: visible;
  transform: none;
  -webkit-font-smoothing: inherit;
}

.auth-social-hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-ink-faint);
  text-align: center;
}


.auth-submit,
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) ease;
}

.auth-submit {
  background: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.auth-submit:hover {
  background: var(--color-brand-deep);
  text-decoration: none;
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  box-shadow: none;
}

.auth-btn--ghost:hover {
  background: var(--color-blush);
  border-color: var(--color-line-strong);
}

.auth-btn--soft {
  background: var(--color-blush);
  color: var(--color-ink);
  box-shadow: none;
}

.auth-btn--soft:hover {
  background: #e8d8d3;
}

/* Register type toggle */
.auth-reg-type {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.auth-reg-type legend {
  padding: 0;
  margin-bottom: var(--space-xs);
}

.auth-reg-type__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.auth-reg-type .auth-check {
  justify-content: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.auth-reg-type .auth-check:has(input:checked) {
  border-color: var(--color-brand);
  background: #fdf6f5;
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
}

.auth-submit--link {
  text-decoration: none;
  box-sizing: border-box;
}

.auth-section-label {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.auth-checks {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  min-width: 0;
  max-width: 100%;
  background: var(--color-canvas);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
}

.auth-guest-note {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

.auth-done {
  text-align: center;
  padding: var(--space-md) 0 var(--space-sm);
}

.auth-done p {
  margin: 0 0 var(--space-lg);
  color: var(--color-ink-muted);
}

.auth-back {
  display: inline-flex;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

/* Fields toggled by storefront.js */
.auth-page .bireysel-fields,
.auth-page .kurumsal-fields {
  display: grid;
  gap: var(--space-md);
}

.auth-page .kurumsal-fields {
  padding: var(--space-md);
  background: var(--color-canvas);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-sm);
}

/* Narrow phones (~390px): tighter panel, no sideways slide under fixed header */
@media (max-width: 480px) {
  .auth-page {
    margin-top: var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .auth-panel {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }

  .auth-tabs {
    margin-bottom: var(--space-md);
  }

  .auth-checks {
    padding: var(--space-sm);
  }

  .auth-reg-type__opts {
    gap: var(--space-2xs);
  }

  .auth-reg-type .auth-check {
    padding: 0.55rem 0.5rem;
  }

  .auth-row-between {
    gap: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit:active {
    transform: none;
  }
}