/* design-auth.css — Auth-Familie im Referenzdesign.
   ==================================================================
   ERSETZT die Auth-Flaechen aus product-public.css vollstaendig
   (Login, Registrierung, Passwort zuruecksetzen). Kein Wert aus dem
   alten Stylesheet wird uebernommen; alle Werte stammen aus der
   Referenz — dort inline gesetzt, hier als Klassen mit Tokens.

   BEFUND, DER DEN NEUBAU AUSGELOEST HAT
   Die Auth-Seiten waren lokal nicht nur „altes Design", sondern
   voellig UNGESTALTET: product-public.css wurde als
   `$base . '/assets/css/…'` geladen und lief in eine 404 (gemessen:
   /assets/css/product-public.css = 200, mit Basis = 404). Es ist
   derselbe geerbte Pfadfehler, der in Block A das Logo verschwinden
   liess. Der Neubau laedt Stylesheets von der Wurzel.

   REFERENZAUFBAU (docs/design-reference/v1, route=login|register|forgot)
     Zwei Spalten ueber die ganze Hoehe:
       repeat(auto-fit, minmax(min(360px,100%), 1fr))  min-height 100vh
     Links  dunkel #14182B, Polster clamp(28px,4vw,56px),
            Spalte mit space-between, Abstand 40px
     Rechts Creme, place-items center, dieselbe Polsterung,
            Formularspalte 100% / max 420px

   BEWUSST ANDERS ALS DIE REFERENZ
   1. Die zwei dunklen Minikarten der Referenz nennen „12 günlük seri"
      und „8 tekrar" — erfundene Nutzerwerte. Vor dem Login KANN es
      diese Zahlen nicht geben: niemand ist angemeldet. Sie werden
      durch zwei Produktaussagen ohne Zahl ersetzt (gleiche Karte,
      gleicher Aufbau, wahrer Inhalt).
   2. Der Knopf „↳ hata durumunu göster" ist ein Entwurfsschalter zum
      Vorfuehren des Fehlerzustands. Der Handoff verlangt ausdruecklich
      seine Entfernung. Der Fehlerzustand entsteht hier echt.
   3. „Google ile devam et" traegt in der Referenz OPSİYONEL. Es gibt
      keinen Google-Login und keine Absicht dazu — ein deaktivierter
      Knopf waere ein leeres Versprechen. Entfaellt. */

/* ── Rahmen ─────────────────────────────────────────────────────── */

/* Der Umgebungshinweis steht ueber dem Raster. Wuerde .ak-auth selbst
   100dvh hoch sein, ergaebe die Summe eine Seite hoeher als der
   Bildschirm — gemessen: 963px bei 900px Sichtfeld, mit Scrollbalken und
   einem Cremestreifen links neben der dunklen Flaeche. Deshalb traegt der
   BODY die Hoehe und das Raster nimmt sich den Rest. */
body.ak-auth-seite {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  margin: 0;
}

.ak-auth {
  display: grid;
  /* min() ist Pflicht: minmax(360px,1fr) allein schiebt auf einem
     360px-Telefon ueber den rechten Rand. Regel des Handoffs. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  flex: 1 1 auto;
  background: var(--ak-bg);
}

/* ── Linke Flaeche: Produktargument auf Dunkel ─────────────────── */

/* M6: Aufbau und Farbe kommen jetzt aus der gemeinsamen Ebene.
   .ak-auth-panel traegt display/flex-direction/justify-content, der
   on-dark-Kontext traegt die Textfarbe. Hier bleiben nur die beiden
   Werte, die dieser Spalte eigen sind: ihr Innenabstand und der Abstand
   zwischen den Bloecken. Die Flaeche wechselt von --ak-dark-surface
   (Bestand) auf --ak-dark (SSOT) — derselbe Farbwert, eine Quelle. */
.ak-auth-wert {
  gap: var(--ak-sp-7);
  padding: clamp(28px, 4vw, 56px);
  background: var(--ak-dark);
}

.ak-auth-marke {
  display: flex; align-items: center; gap: 10px;
  align-self: flex-start;
  text-decoration: none;
  color: var(--ak-ink-inverse);
}

.ak-auth-marke img { display: block; }

/* Kasten um die Wortmarke; sie ist ein Originalasset, keine Schrift. */
.ak-auth-marke-text { display: flex; align-items: center; }
.ak-auth-marke .ak-marke-wort { height: 15px; }

.ak-auth-wert h2,
.ak-auth-wert .ak-auth-h {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12; letter-spacing: -1px;
  margin: 0 0 var(--ak-sp-4);
  color: var(--ak-ink-inverse);
}

.ak-auth-wert p {
  font-size: var(--ak-fs-base-lg); line-height: var(--ak-lh-body);
  color: var(--ak-ink-inverse-2);
  margin: 0 0 var(--ak-sp-6);
  max-width: 340px;
}

.ak-auth-punkte { display: grid; gap: var(--ak-sp-3); max-width: 340px; }

.ak-auth-punkt {
  display: flex; align-items: center; gap: var(--ak-sp-3);
  background: var(--ak-dark-surface-3);
  border-radius: var(--ak-r-opt);
  padding: 14px var(--ak-sp-4);
}

.ak-auth-punkt-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--ak-r-btn);
  background: var(--ak-dark-surface-4);
}

/* Die Referenz gibt der ersten Karte Lila, der zweiten Teal. */
.ak-auth-punkt:nth-child(1) .ak-auth-punkt-ic { color: var(--ak-accent-on-dark); }

.ak-auth-punkt:nth-child(2) .ak-auth-punkt-ic { color: var(--ak-teal-on-dark); }

.ak-auth-punkt-titel { font-size: var(--ak-fs-sm); font-weight: 600; }

/* M6: --ak-ink-3 ist ein Ton fuer HELLE Flaechen. Dieser Unterpunkt
   steht auf der dunklen Saeule und kam damit auf 3,20:1. Auf dunklem
   Grund gilt der on-dark-Fliesstextton der SSOT (9,29:1). */
.ak-auth-punkt-sub   { font-size: var(--ak-fs-meta); color: var(--ak-on-dark-2); }

/* M6: #6B7089 war der alte Wert von --ak-on-dark-4. Die SSOT fuehrt
   diesen Ton seit v2.1 auf #7B8098, damit er auf Tinte AA haelt (4,50:1);
   der alte lag bei 3,60:1. Der Hinweis steht auf der dunklen Saeule, also
   gilt der on-dark-Ton der SSOT. */
.ak-auth-hilfe { font-size: var(--ak-fs-meta); color: var(--ak-on-dark-4); }

.ak-auth-hilfe a { color: var(--ak-accent-on-dark); }

/* ── Rechte Flaeche: Formular ──────────────────────────────────── */

.ak-auth-form {
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 56px);
}

.ak-auth-spalte { width: 100%; max-width: 420px; }

.ak-auth-spalte h1 {
  font-family: var(--ak-font-display);
  /* Rolle H1. --ak-fs-h1 ist clamp(24px,3vw,32px) — auf dem Telefon
     kleiner als die frueheren festen 30px, auf dem Schreibtisch groesser.
     Die Telefonregel weiter unten wird dadurch nicht ueberfluessig: sie
     setzt bewusst 26px statt der 24px des clamp. */
  font-weight: 700; font-size: var(--ak-fs-h1); letter-spacing: -.7px;
  margin: 0 0 var(--ak-sp-2);
  color: var(--ak-ink);
}

.ak-auth-sub {
  font-size: var(--ak-fs-body); color: var(--ak-ink-2);
  margin: 0 0 28px;
}

.ak-auth-felder { display: grid; gap: 18px; }

/* Beschriftungszeile: Text links, Nebenaktion rechts („Göster"). */
.ak-auth-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ak-sp-3);
  font-size: var(--ak-fs-body-sm); font-weight: 600; color: var(--ak-ink);
}

/* 24 px Mindestziel. „Şifremi unuttum" und „Göster" stehen ALLEIN in
   ihrer Zeile beziehungsweise am Rand der Beschriftung — sie sind keine
   Links im Fliesstext, also greift die Ausnahme von WCAG 2.5.8 nicht.
   Gemessen waren es 21 px. */
.ak-auth-link {
  display: inline-flex; align-items: center;
  min-height: 24px;
  background: none; border: 0; padding: 0 2px;
  font-family: inherit; font-size: var(--ak-fs-meta); font-weight: 600;
  color: var(--ak-accent); cursor: pointer; text-decoration: none;
}

.ak-auth-link:hover { color: var(--ak-accent-deep); text-decoration: underline; }

/* ── Passwort anzeigen / verbergen (12.09.2026) ───────────────────────
   Der Umschalter trug bisher nur ein Wort. Er traegt jetzt zusaetzlich
   ein Auge — beide Zeichen stehen fest im Markup, sichtbar ist immer
   genau eines. WELCHES, entscheidet `aria-pressed`: derselbe Zustand,
   den Vorleseprogramme hoeren. Damit gibt es eine Zustandsquelle statt
   zweier, und das Symbol stimmt auch, wenn das Skript nicht laedt.

   Die Beschriftung bleibt stehen. Ein reiner Symbolknopf waere an der
   heikelsten Stelle der Anmeldung eine Ratearbeit. */
.pw-toggle { gap: 5px; }
.pw-toggle-ic { display: block; flex: 0 0 auto; }
/* Die Beschriftung steht in einem eigenen Span, weil zwei Symbole im
   Knopf liegen — ein textContent auf den Knopf wuerde sie mitloeschen. */
.pw-toggle-text { line-height: 1; }
.pw-toggle[aria-pressed="false"] .pw-ic-verbergen { display: none; }
.pw-toggle[aria-pressed="true"]  .pw-ic-zeigen    { display: none; }
/* Sichtbarer Fokus: der Knopf liegt in der Feldbeschriftung und hat
   keinen eigenen Rahmen, der ihn sonst zeigen wuerde. */
.pw-toggle:focus-visible {
  outline: none; box-shadow: var(--ak-focus-ring);
  border-radius: var(--ak-r-tag);
}

/* Eingaben: die Referenz setzt hier 12px Radius und 14px/16px Polster —
   abweichend von .ak-input (14px Radius, 13px/16px). Der Unterschied
   ist sichtbar, also wird er gesetzt statt geerbt. Die Schriftgroesse
   bleibt bei 16px: darunter zoomt iOS beim Fokus ins Feld. */
/* STILLGELEGT MIT M6 — die Regel war wirkungslos.
   Sie setzte border-radius: var(--ak-r-12) (12px) und padding: 14px 16px.
   Genau das steht seit M3 in .ak-input der gemeinsamen Ebene: Radius
   --ak-r-input (ebenfalls 12px), Polster 14px 16px. Zwei Tokens mit
   demselben Wert nebeneinander sind eine zweite Wahrheit; die Regel ist
   deshalb entfernt statt angeglichen. Gemessen: kein Unterschied. */

.ak-auth-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ak-sp-3); flex-wrap: wrap;
}

.ak-auth-zeile--rechts { justify-content: flex-end; }

/* Passwortregeln. Live und echt — kein vorgemalter Zustand. */
.ak-auth-regeln {
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-12);
  padding: 14px var(--ak-sp-4);
}

.ak-auth-staerke { display: flex; gap: 5px; margin-bottom: var(--ak-sp-3); }

.ak-auth-staerke > span {
  flex: 1; height: 5px; border-radius: var(--ak-r-pill);
  background: var(--ak-surface-warm);
  transition: background-color var(--ak-t-toggle) var(--ak-ease);
}

.ak-auth-staerke > span.is-an { background: var(--ak-a2); }

.ak-auth-regel-liste { display: grid; gap: 7px; }

.ak-auth-regel {
  display: flex; align-items: center; gap: var(--ak-sp-2);
  font-size: var(--ak-fs-meta); font-weight: 600;
  color: var(--ak-ink-3);
}

.ak-auth-regel.is-erfuellt { color: var(--ak-ok-text); }

/* Erfuellt und offen unterscheiden sich nicht nur farblich: Haken
   gegen leeren Kreis, plus ein Textzusatz fuer Screenreader. Regel des
   Handoffs — Farbe traegt nie allein die Bedeutung. */
.ak-auth-regel .ak-auth-regel-offen,
.ak-auth-regel .ak-auth-regel-ok { flex: none; }

.ak-auth-regel .ak-auth-regel-ok   { display: none; }

.ak-auth-regel.is-erfuellt .ak-auth-regel-ok   { display: block; }

.ak-auth-regel.is-erfuellt .ak-auth-regel-offen { display: none; }

/* Trenner „veya" */
.ak-auth-trenner {
  display: flex; align-items: center; gap: 14px;
  color: var(--ak-ink-2); font-size: var(--ak-fs-meta);
  margin: 2px 0;
}

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

/* Künye und Gizlilik unter den Zustimmungskaesten (07.09.2026).
   Beide Rechtstexte stehen bereits in den Kaesten selbst — hier liegen
   sie noch einmal als schlichte Zeile, weil ein Link IM Satz leicht
   uebersehen wird und die Anbieterangabe vor dem Abschluss erreichbar
   sein muss. Bewusst leise: sie ist Nachschlagewerk, nicht Aufforderung. */
.ak-auth-rechtsfuss {
  margin: 2px 0 0;
  font-size: var(--ak-fs-meta); line-height: 1.6; color: var(--ak-ink-3);
}
.ak-auth-rechtsfuss a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; }
.ak-auth-rechtsfuss a:hover { color: var(--ak-ink); }

.ak-auth-wechsel {
  font-size: var(--ak-fs-sm); color: var(--ak-ink-2); text-align: center;
  margin: 6px 0 0;
}

.ak-auth-wechsel a {
  font-weight: 700; color: var(--ak-accent); text-decoration: none;
}

.ak-auth-wechsel a:hover { text-decoration: underline; }

/* Zurueck-Zeile („Girişe dön") */
.ak-auth-zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: var(--ak-fs-body-sm); font-weight: 600;
  color: var(--ak-ink-2); text-decoration: none;
  margin-bottom: 22px; cursor: pointer;
}

.ak-auth-zurueck:hover { color: var(--ak-ink); }

/* Bestaetigung nach dem Versand: Teal-Kreis mit Symbol, akPop. */
.ak-auth-fertig { text-align: center; }

.ak-auth-fertig-ic {
  display: grid; place-items: center;
  width: 66px; height: 66px; margin: 0 auto 20px;
  border-radius: var(--ak-r-pill);
  background: var(--ak-ok-surface); color: var(--ak-ok-text);
  animation: akPop .45s var(--ak-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .ak-auth-fertig-ic { animation: none; }
}

/* ── Meldungen ────────────────────────────────────────────────────
   #msg wird von product-auth.js gefuellt und bekommt dabei die Klasse
   `ok` oder `err`. Beide Namen sind JS-Vertrag und bleiben; nur ihr
   Aussehen ist neu. Leer heisst unsichtbar — sonst stand hier vorher
   ein leerer Kasten. */

.ak-auth-msg {
  margin-top: var(--ak-sp-4);
  border-radius: var(--ak-r-12);
  font-size: var(--ak-fs-body-sm); line-height: 1.5; font-weight: 500;
}

.ak-auth-msg:empty { display: none; }

.ak-auth-msg.ok,
.ak-auth-msg.err {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px var(--ak-sp-4);
  border: 1px solid transparent;
}

.ak-auth-msg.err {
  background: var(--ak-err-surface);
  border-color: var(--ak-err-border);
  color: var(--ak-err-text);
}

.ak-auth-msg.ok {
  background: var(--ak-ok-surface);
  border-color: var(--ak-ok-border);
  color: var(--ak-ok-text);
}

/* ── HINWEISZUSTAND (20.09.2026) ──────────────────────────────────
   Ein dritter Zustand neben `ok` und `err`: die Handlung hat
   funktioniert, aber etwas daran ist offen. Genau der Fall der
   Registrierung, deren Verifizierungsmail nicht rausging — „Fehler"
   waere falsch (das Konto steht), „Erfolg" waere eine Luege. */
.ak-auth-msg.warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px var(--ak-sp-4);
  border: 1px solid var(--ak-warn-border);
  background: var(--ak-warn-surface);
  color: var(--ak-warn-text);
}

/* ── FELDBEZOGENE FEHLER ──────────────────────────────────────────
   Der Satz steht UNTER seinem Feld, nicht unter dem Formular. Die
   rote Linie am Eingabefeld allein reicht nicht: Farbe ist keine
   Information fuer jemanden, der sie nicht unterscheiden kann. */
.ak-feldfehler {
  display: block;
  margin-top: 5px;
  font-size: var(--ak-fs-meta);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ak-err-text);
}

.ak-field.is-fehler .ak-input,
.ak-field.is-fehler .ak-select {
  border-color: var(--ak-err);
  background: var(--ak-err-surface);
}

/* Die beiden Einwilligungskaestchen tragen keine Eingabeflaeche, an
   der eine Randfarbe sichtbar waere — dort markiert der Text. */
.ak-check.is-fehler { color: var(--ak-err-text); }
.ak-check.is-fehler input[type="checkbox"] { outline: 2px solid var(--ak-err); outline-offset: 2px; }

.ak-auth-msg .msg-extra { display: block; margin-top: 6px; font-weight: 400; }
/* V-4: der Haken in „E-posta adresin doğrulandı" ist seit dem
   19.09.2026 gezeichnet statt getippt. */
.ak-auth-msg svg { vertical-align: -0.2em; }

.ak-auth-msg a { color: inherit; font-weight: 700; }

/* ── Telefon ──────────────────────────────────────────────────────
   Unter 760px liegt die dunkle Flaeche als kompakter Kopf ueber dem
   Formular. Die beiden Punktkarten entfallen dort: sie sind Argument,
   nicht Funktion, und wuerden das Formular unter die Falz schieben.
   Der Handoff verlangt „primaere Aktion in der Daumenzone". */

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

  /* Auf dem Telefon soll die Seite scrollen, nicht in die Hoehe gepresst
     werden: der dunkle Kopf und das Formular stehen untereinander. */
  body.ak-auth-seite { min-height: 0; }

  .ak-auth-wert {
    gap: var(--ak-sp-5);
    padding: var(--ak-sp-5) var(--ak-gutter) var(--ak-sp-6);
  }

  .ak-auth-wert h2,
  .ak-auth-wert .ak-auth-h { font-size: var(--ak-fs-4xl); margin-bottom: var(--ak-sp-3); }

  .ak-auth-wert p { margin-bottom: 0; font-size: var(--ak-fs-body); }

  .ak-auth-punkte,
  .ak-auth-hilfe { display: none; }

  .ak-auth-form { padding: var(--ak-sp-6) var(--ak-gutter) var(--ak-sp-8); }

  .ak-auth-spalte h1 { font-size: var(--ak-fs-4xl); }
}

/* ── Rechtszeile auf dem anonymen Einstieg (08.09.2026) ─────────────
   Sie kommt aus demselben Partial wie die Rechtszeile der angemeldeten
   App (`_recht_links.php`), aber design-app.css ist hier nicht geladen —
   dort steht sie `position: fixed` am Fuss der Seitenleiste. Diese
   Variante ist eine einfache, umbrechende Zeile im Textfluss. */
.ak-app-recht--einstieg {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: var(--ak-sp-5);
  font-size: var(--ak-fs-tiny);
}
.ak-auth-spalte .ak-app-recht--einstieg a {
  color: var(--ak-ink-2); text-decoration: none; font-size: var(--ak-fs-tiny);
}
.ak-auth-spalte .ak-app-recht--einstieg a:hover,
.ak-auth-spalte .ak-app-recht--einstieg a:focus-visible { text-decoration: underline; }