/* =========================================================================
   Derslik — auth slice (slice 2): landing · onboarding · KVKK consent · error.

   Structure lives in `src/views/auth.js`; this file only dresses it.
   Loaded after `dk/base.css`, so every `dk-*` primitive it uses is already
   defined — only the three things base.css has no opinion about are declared
   here: the split shell, the white SSO button and the error pane.

   Design refs: `Derslik v5.dc.html:51-98`, visual-system §2.14 / §4.4,
   spec §4.1.
   ========================================================================= */

/* --- escaping the centred card ------------------------------------------
   `layout({app:false})` wraps every pre-auth body in
   `.dk-workspace--centered > .dk-pane--auth`, which is a 760px card floating
   in the middle of the viewport. The v5 login is the opposite: two halves
   bleeding to all four edges. `views/shell.js` belongs to the shell slice and
   is not edited here, so the pane is neutralised from the outside with
   `:has()` (Baseline 2023) whenever it holds an `.auth-split`. Every other
   pre-auth surface — the error page — keeps the card.
   ------------------------------------------------------------------------ */
body.dk-app--plain:has(.auth-split) {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
.dk-workspace--centered:has(> .dk-pane--auth > .auth-split) {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
}
.dk-pane--auth:has(> .auth-split) {
  flex: 1;
  margin: 0;
  max-width: none;
  width: 100%;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

/* --- the split (v5:52) --------------------------------------------------- */
.auth-split {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* v5:53 — the hero keeps the literal brand gradient on all eight themes.
   It is the pre-auth brand moment and the white logo masters plus the
   white tagline are contrast-tuned against these three stops (phase-5 item 11:
   the light stop is the app accent #6664E5, white on it 4.65:1, and the tagline is
   white; it was #D9D8FF on #6C6AF2 = 3.05-4.38:1); deriving it
   from `--acc` would re-open that contrast question per theme for no product
   gain (visual-system §2.14 flags the theme-blindness; the fix it asks for is
   the *right* panel, which does follow `--bg`). */
.auth-hero {
  flex: 5;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-10);
  padding: 60px;
  background: linear-gradient(160deg, #6664e5 0%, #4a48b8 70%, #37357f 100%);
}

/* v5:54-55 — two translucent circles, sized off the hero, never clipped in. */
.auth-hero__blob {
  position: absolute;
  border-radius: var(--r-full);
  pointer-events: none;
}
.auth-hero__blob--tr {
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  background: rgba(255, 255, 255, 0.07);
}
.auth-hero__blob--br {
  right: 40px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  background: rgba(255, 255, 255, 0.05);
}

/* v5:56-57 — 76px mark over a 210px wordmark, both the white masters. */
.auth-hero__mark,
.auth-hero__word {
  position: relative;
  display: block;
  height: auto;
}
.auth-hero__mark { width: 76px; }
.auth-hero__word { width: 210px; }

/* v5:58 */
.auth-hero__tagline {
  position: relative;
  margin: 0;
  max-width: 380px;
  color: #fff;
  font: 400 var(--fs-xl) / var(--lh-loose) var(--font);
  text-wrap: pretty;
}

/* v5:60-61 — the form side follows the theme (`--bg`) and scrolls on its own
   so a long consent text never grows the document. */
.auth-panel {
  flex: 4;
  display: flex;
  min-width: 0;
  padding: 40px;
  overflow-y: auto;
  background: var(--bg);
}
.auth-card {
  width: 380px;
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  /* `styles.css` centres the text of the old `.card`/`.dk-pane--auth` this
     sits in; v5's right column is left-aligned prose and form labels, and the
     KVKK bullets are unreadable centred. The two deliberately centred bits
     (`.auth-fine`, `.auth-foot`) re-centre themselves below. */
  text-align: left;
}
/* The KVKK page is a page of prose, not a four-field form. */
.auth-card--wide { width: 560px; }

.auth-title {
  margin: 0;
  font: 800 var(--fs-3xl) / var(--lh-tight) var(--font);
  color: var(--ink);
}
.auth-title--icon { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-2xl); }
.auth-sub {
  margin: calc(var(--sp-7) * -1 + var(--sp-2)) 0 0;
  font: 400 var(--fs-md) / var(--lh-body) var(--font);
  color: var(--mut);
}
.auth-notice { margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-7); margin: 0; }
.auth-form .dk-field,
.auth-form .field { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.auth-hint { font: 400 var(--fs-xs) / 1.4 var(--font); color: var(--mut); }
.auth-card .optional { font-weight: 400; color: var(--mut); }

/* v5:86-88 — the SSO control. The face stays white on every theme so the
   full-colour bryekosis mark never sits on a tinted surface
   (visual-system §4.4 rule 3); the hover border is the `--tur` accent.
   candidate for base.css */
.dk-btn--sso {
  gap: var(--sp-6);
  padding: 15px;
  border-radius: 13px;
  border: var(--bw) solid var(--line);
  background: #fff;
  color: #26263e;
  font: 800 var(--fs-xl) / 1.2 var(--font);
  box-shadow: 0 4px 16px rgba(40, 40, 90, 0.08);
}
.dk-btn--sso:hover {
  background: #fff;
  color: #26263e;
  border-color: var(--tur);
  box-shadow: 0 6px 20px rgba(40, 40, 90, 0.14);
}
.dk-btn--sso img { display: block; height: 22px; width: auto; }

/* v5:89 */
.auth-fine {
  margin: 0;
  text-align: center;
  font: 400 var(--fs-xs) / var(--lh-body) var(--font);
  color: var(--mut);
}
/* v5:90-94 — legal attribution, not branding (visual-system §4.4 rule 2).
   The black master is inverted on the three dark themes (`bryFiltre`,
   v5:1366): there is no white bryekosis file, and the colour one hides its
   own wordmark against a dark surface. */
.auth-foot { margin: var(--sp-9) 0 0; color: var(--mut); }
[data-theme="koyu"] .auth-foot__mark,
[data-theme="tahta"] .auth-foot__mark,
[data-theme="gece"] .auth-foot__mark { filter: invert(1); }

/* --- KVKK consent --------------------------------------------------------
   `styles.css:3180` still sizes `.consent-card` for the old centred layout
   (640px, 3rem auto); inside the split it is the column, so it owns neither
   its width nor its margin.
   ------------------------------------------------------------------------- */
.auth-consent {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
}
.auth-consent h1 { font-size: var(--fs-2xl); }
/* The body scrolls inside the card so the accept button is always reachable
   without hunting for the end of the text. */
.auth-scroll {
  margin: 0; /* `.consent-text` still carries the old `1rem 0` */
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding: var(--sp-8);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  font: 400 var(--fs-md) / var(--lh-body) var(--font);
  color: var(--ink);
}
.auth-scroll:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.auth-scroll p { margin: 0 0 var(--sp-6); }
.auth-scroll ul { margin: 0 0 var(--sp-6); padding-left: var(--sp-10); }
.auth-scroll li { margin-bottom: var(--sp-5); }
.auth-actions { display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-actions form { margin: 0; }

/* --- error page ---------------------------------------------------------- */
.auth-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}
.auth-error__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--warnSoft);
  color: var(--warn);
}
.auth-error__title { margin: 0; font: 800 var(--fs-2xl) / var(--lh-tight) var(--font); color: var(--ink); }
.auth-error__detail {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--mut);
  font-size: var(--fs-sm);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
/* The same slot when the BFF hands it a sentence instead of machine output
   (`errorPage(..., { prose: true })` — the 404 and 500 middleware). A code
   block around Turkish prose reads like a stack trace, so the panel, the
   monospace and the left rag all come off and it becomes body copy. */
.auth-error__detail--prose {
  max-width: 44ch;
  padding: 0;
  background: none;
  text-align: center;
  white-space: normal;
  word-break: normal;
  font: 400 var(--fs-lg) / var(--lh-body) var(--font);
  color: var(--mut);
}

/* --- narrow viewports ----------------------------------------------------
   Responsive is out of scope for v1 (decision D10), but the split collapses
   badly under ~820px, so the hero folds into a banner rather than squeezing
   the form to nothing. One query, no layout rewrite.
   ------------------------------------------------------------------------ */
@media (max-width: 820px) {
  .auth-split { flex-direction: column; overflow-y: auto; }
  .auth-hero { flex: none; gap: var(--sp-7); padding: var(--sp-12) var(--sp-10); }
  .auth-hero__mark { width: 48px; }
  .auth-hero__word { width: 140px; }
  .auth-hero__tagline { font-size: var(--fs-md); }
  .auth-panel { flex: none; padding: var(--sp-10); }
  .auth-card,
  .auth-card--wide { width: 100%; }
}

/* QUEDU_IDP=birey: first-login help, "Şifremi unuttum" and the shared-PC note
   under the sign-in button and on /erisim-yok (views/auth.js). */
.auth-help {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}
.auth-help p { margin: 0; }

/* --- contrast on the form side (S-SPEC finding 5, S-23) ---------------------------------------------------------
   `.auth-panel` paints --bg, and the tokens were tuned against --panel / --panel2 (visual-system §6.11): muted text
   (--mut: .auth-sub, .auth-fine, .auth-hint, .auth-help p, .muted) and the accent link ("Şifremi unuttum", links in
   the KVKK text) land under 4.5:1 on --bg in a few light themes. Only THESE themes get a darker value, and only on
   this surface, so every other page and every theme that already passes keeps its colours. Measured on --bg
   (WCAG 2.x, small text): açık --mut 4.41 -> 4.61, açık link 4.01 -> 4.65, pano link 4.20 -> 4.61, gül link
   4.29 -> 4.60; the rest were already >= 4.9 (--mut) and >= 5.4 (link, kampüs/kağıt/dark themes).
   `--muted` / `--text-muted` are aliases computed on :root, so they are overridden together with --mut.
   `:root:not([data-theme])` is açık before the theme script has run (it is the default palette). */
:root:not([data-theme]) .auth-panel,
[data-theme="acik"] .auth-panel {
  --mut: #696887;
  --muted: #696887;
  --text-muted: #696887;
  --auth-link: #5d5bd2;
}
[data-theme="pano"] .auth-panel { --auth-link: #b74c2c; }
[data-theme="gul"] .auth-panel { --auth-link: #ba4175; }
/* Links on this surface use --auth-link where a theme defines one, else --acc as before. The hover keeps the colour
   (the global `a:hover` swaps to the lighter --acc2, which is worse on --bg) and shows the underline instead. */
.auth-panel a:not(.dk-btn) { color: var(--auth-link, var(--acc)); }
.auth-panel a:not(.dk-btn):hover { color: var(--auth-link, var(--acc)); text-decoration: underline; }

/* /indir - the desktop download page (views/download.js). Tokens only, so all eight themes apply. */
.dl-page { display: flex; flex-direction: column; gap: var(--sp-5, 16px); max-width: 880px; margin: 0 auto; }
.dl-grid { display: grid; gap: var(--sp-5, 16px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dl-card {
  display: flex; flex-direction: column; gap: var(--sp-4, 12px);
  padding: var(--sp-6, 20px); border-radius: var(--r-xl); background: var(--panel2);
  border: var(--bw) solid var(--line);
}
.dl-card.is-current { border-color: var(--acc); background: var(--accSoft); }
.dl-card__title { margin: 0; font: 800 var(--fs-xl) / 1.2 var(--font); color: var(--ink); display: flex; gap: var(--sp-3, 8px); align-items: center; flex-wrap: wrap; }
.dl-card__note { margin: 0; font: 400 var(--fs-sm) / 1.5 var(--font); color: var(--ink); flex: 1; }
.dl-card__btns { display: flex; flex-direction: column; gap: var(--sp-3, 8px); }
.dl-badge { font: 700 var(--fs-xs) / 1 var(--font); padding: 4px 8px; border-radius: 999px; background: var(--acc); color: var(--accInk); }
.dl-fine { margin: 0; font: 400 var(--fs-sm) / 1.5 var(--font); color: var(--mut); }
.dl-fine a { color: var(--accText); }
.dl-notice { margin: 0; }