/* Google Material 3 (M3) tema: renk rolleri, şekil ve yazı ölçeği */
:root {
  --md-primary: #6750a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #eaddff;
  --md-on-primary-container: #21005d;
  --md-surface: #fef7ff;
  --md-surface-container: #f3edf7;
  --md-surface-container-high: #ece6f0;
  --md-on-surface: #1d1b20;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-error: #b3261e;
  --md-shape-lg: 28px;
  --md-shape-md: 16px;
  --md-shape-full: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #d0bcff;
    --md-on-primary: #381e72;
    --md-primary-container: #4f378b;
    --md-on-primary-container: #eaddff;
    --md-surface: #141218;
    --md-surface-container: #211f26;
    --md-surface-container-high: #2b2930;
    --md-on-surface: #e6e0e9;
    --md-on-surface-variant: #cac4d0;
    --md-outline: #938f99;
    --md-outline-variant: #49454f;
    --md-error: #f2b8b5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }

.m3-card {
  width: 100%;
  max-width: 420px;
  padding: 32px 28px;
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container);
}

.m3-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 20px;
  border-radius: var(--md-shape-md);
}

.m3-headline {
  margin: 0 0 6px;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 400;
}

.m3-body {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.5rem;
  color: var(--md-on-surface-variant);
}

.m3-alert {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--md-shape-md);
  background: color-mix(in srgb, var(--md-error) 14%, transparent);
  color: var(--md-error);
  font-size: 0.9rem;
}

/* Dolgulu metin alanı (etiket yukarı kayar) */
.m3-field {
  position: relative;
  margin-bottom: 16px;
}

.m3-field input,
.m3-field select {
  display: block;
  width: 100%;
  height: 56px;
  padding: 22px 16px 8px;
  border: 0;
  border-bottom: 1px solid var(--md-outline);
  border-radius: 4px 4px 0 0;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 1rem;
  outline: none;
}

.m3-field label {
  position: absolute;
  left: 16px;
  top: 18px;
  font-size: 1rem;
  color: var(--md-on-surface-variant);
  pointer-events: none;
  transition: transform .15s, font-size .15s, color .15s;
  transform-origin: left top;
}

.m3-field input:focus + label,
.m3-field input:not(:placeholder-shown) + label {
  transform: translateY(-10px) scale(.75);
  color: var(--md-primary);
}

.m3-field input:focus {
  border-bottom: 2px solid var(--md-primary);
}

.m3-helper {
  margin: 6px 16px 0;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

/* Düğmeler */
.m3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}

.m3-button:hover { box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.m3-button:active { transform: scale(.98); }
.m3-button:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* Adım göstergesi */
.m3-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.m3-steps span {
  flex: 1;
  height: 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-outline-variant);
}

.m3-steps span.on { background: var(--md-primary); }

.m3-address {
  margin: 0 0 20px;
  padding: 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 1.05rem;
  word-break: break-all;
  text-align: center;
}

.m3-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 0.875rem;
}

.m3-foot a { color: var(--md-primary); }