/* ===========================================================================
   READERP — giriş ekranları
   ---------------------------------------------------------------------------
   The sign-in page is the seam between the marketing site and the product,
   and it used to look like neither: a plain grey card with the panel's
   internal styling. Somebody who read the site and clicked through arrived
   somewhere that felt like a different company.

   So these pages carry the site's palette and type — deep navy, amber, the
   same three faces — while staying their own thing: no navigation, no
   marketing, nothing to click except the two doors that make sense here.

   Kept in its own file rather than folded into app.css because the panel and
   the door to the panel have different jobs, and a change to one should not
   be able to break the other.
   =========================================================================== */

:root {
  --a-navy:   #101b33;
  --a-navy-2: #1b2c4f;
  --a-navy-3: #2b3f68;
  --a-paper:  #fcfbf9;
  --a-white:  #ffffff;
  --a-ink:    #0d1526;
  --a-ink-2:  #4d5b74;
  --a-ink-3:  #7b879b;
  --a-line:   #e6e1d8;
  --a-line-2: #d5cec1;
  --a-amber:  #e8a33d;
  --a-amber-2:#c9832a;
  --a-amber-3:#f6d9a6;
  --a-amber-bg:#fdf3e2;
  --a-bad:    #c14a3f;
  --a-ok:     #1a8a5f;

  --a-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --a-disp: 'Bricolage Grotesque', var(--a-sans);
  --a-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

body.auth {
  margin: 0; min-height: 100vh; background: var(--a-paper);
  color: var(--a-ink); font-family: var(--a-sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.auth * { box-sizing: border-box; }

/* Two panes: what you are signing into on the left, the form on the right.
   On a phone the left pane collapses to a single line — a visitor on a phone
   is signing in, not being introduced. */
.au {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  min-height: 100vh;
}
@media (max-width: 900px) { .au { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- left */
.au-side {
  background: linear-gradient(165deg, var(--a-navy) 0%, var(--a-navy-2) 100%);
  color: #a8b6cd; padding: clamp(28px, 5vw, 56px);
  display: flex; flex-direction: column; gap: 26px;
}
@media (max-width: 900px) {
  .au-side { padding: 20px 22px; flex-direction: row; align-items: center; gap: 14px; }
  .au-side .au-pitch, .au-side .au-foot { display: none; }
}

.au-brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--a-disp); font-weight: 800; font-size: 21px;
  letter-spacing: -.03em; color: #fff; text-decoration: none;
}
.au-brand img { display: block; height: 32px; width: auto; }
.au-brand .mk {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); flex: none;
}
.au-brand .mk::after {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: var(--a-amber); box-shadow: 0 0 0 3px rgba(232, 163, 61, .25);
}

.au-pitch { margin-top: auto; max-width: 34ch; }
.au-pitch h2 {
  font-family: var(--a-disp); font-size: clamp(24px, 3vw, 33px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.022em; color: #fff; margin: 0 0 14px;
}
.au-pitch p { font-size: 15.5px; color: #a8b6cd; margin: 0; }

.au-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.au-list li {
  position: relative; padding-left: 25px; font-size: 14.5px; color: #a8b6cd;
}
.au-list li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 9px; height: 5px; border: 2px solid var(--a-amber);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

.au-foot { font-size: 13px; color: #6d7f9e; }
.au-foot a { color: #a8b6cd; text-decoration: none; }
.au-foot a:hover { color: var(--a-amber); }
.au-foot .by { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; opacity: .8; }
.au-foot .by img { height: 20px; width: auto; display: block; }

/* ------------------------------------------------------------------ right */
.au-main {
  background: var(--a-paper); padding: clamp(28px, 5vw, 56px);
  display: flex; align-items: center; justify-content: center;
}
.au-card { width: 100%; max-width: 380px; }

.au-card h1 {
  font-family: var(--a-disp); font-size: 27px; font-weight: 700;
  letter-spacing: -.022em; color: var(--a-ink); margin: 0 0 7px;
}
.au-card .sub { font-size: 14.5px; color: var(--a-ink-3); margin: 0 0 26px; }

.au-card form { display: grid; gap: 15px; }
.au-card label {
  display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--a-ink-2);
}
.au-card input {
  font-family: var(--a-sans); font-size: 16px; color: var(--a-ink);
  padding: 12px 14px; border: 1.5px solid var(--a-line-2); border-radius: 10px;
  background: var(--a-white); width: 100%;
}
.au-card input:focus {
  outline: none; border-color: var(--a-amber);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .18);
}
.au-card input[inputmode="numeric"] { max-width: 130px; font-family: var(--a-mono); }

.au-card button {
  margin-top: 6px; font-family: var(--a-sans); font-size: 15.5px; font-weight: 650;
  padding: 13px 20px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--a-amber); color: #2a1c05; box-shadow: 0 2px 0 var(--a-amber-2);
  transition: background .14s ease, transform .1s ease;
}
.au-card button:hover { background: #f0b258; }
.au-card button:active { transform: translateY(1px); }

.au-hint { font-size: 12.5px; color: var(--a-ink-3); margin: -4px 0 0; }

.au-err, .au-note, .au-ok {
  border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 0 0 18px;
  border: 1px solid transparent;
}
.au-err { background: rgba(193, 74, 63, .09); border-color: rgba(193, 74, 63, .3); color: #9a382f; }
.au-note { background: var(--a-amber-bg); border-color: var(--a-amber-3); color: #7a5312; }
.au-ok { background: rgba(26, 138, 95, .09); border-color: rgba(26, 138, 95, .3); color: #14684a; }
.au-err b, .au-note b, .au-ok b { font-weight: 700; }

/* The way out for somebody who is not a customer yet. There is no self-service
   sign-up and there cannot be one: the product needs an agent running inside
   the company's own network, so an account with nothing behind it would be an
   empty room. Saying that plainly beats a registration form that leads
   nowhere. */
.au-alt {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--a-line);
  font-size: 14px; color: var(--a-ink-2);
}
.au-alt b { color: var(--a-ink); }
.au-alt a { color: var(--a-amber-2); font-weight: 600; text-decoration: none; }
.au-alt a:hover { text-decoration: underline; }
.au-alt p { margin: 0 0 10px; }
.au-alt p:last-child { margin: 0; }

:focus-visible { outline: 2.5px solid var(--a-amber); outline-offset: 3px; border-radius: 4px; }

/* Amounts and codes stay monospaced wherever they appear here. */
.au-mono { font-family: var(--a-mono); }

/* the plain forward link used after a password is set */
.au-go {
  font-family: var(--a-sans); font-weight: 650; font-size: 15.5px;
  color: var(--a-amber-2); text-decoration: none;
}
.au-go:hover { text-decoration: underline; }

/* the .sub class is shared with the card heading block */
.au-card .sub b { color: var(--a-ink-2); }