/* Platform temel stili: giriş, durum ve sade ekranlar.
   - Varsayılan AÇIK tema (K-046); koyu tema yalnız kullanıcı seçerse (<html data-theme="dark">).
   - Telefon öncelikli, uygulama havası (K-040); sağdan sola dillerde mantıksal özellikler (margin-inline vb.).
   - Kurulum rengi --brand ile değişir (markalama). */

:root {
  --brand: #2563eb;
  --brand-ink: #ffffff;
  --bg: #eef2f8;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #5f6b7a;
  --border: #dde2e8;
  --danger-bg: #fdecec; --danger-ink: #8a1c1c;
  --warning-bg: #fff4dc; --warning-ink: #7a5300;
  --success-bg: #e6f5ec; --success-ink: #1d6b3a;
  --radius: 10px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #15181c; --surface: #1f2328; --text: #e4e7eb; --muted: #9aa5b1; --border: #333a42;
  --danger-bg: #3a1f1f; --danger-ink: #f5b3b3;
  --warning-bg: #3a3020; --warning-ink: #f3d491;
  --success-bg: #1d3326; --success-ink: #a6e3bb;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* "hidden" özniteliği, display veren sınıflardan her zaman üstün olsun */
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, "Noto Sans Arabic", sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--brand); }
.muted { color: var(--muted); }

/* Giriş */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 20px;
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: .95rem; color: var(--muted); margin-block-end: 14px; }
/* Logo yokken firma adının baş harfleri */
.auth-mark {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  color: var(--brand-ink); background: var(--brand); background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #0b1020));
}
/* Kurulum logosu: yükseklik sabit, genişlik orana göre (yatay ve kare logolar birlikte düzgün durur); logo ve form başlığı ortalı */
.auth-logo { display: flex; justify-content: center; margin-block-end: 18px; }
.auth-logo img { display: block; max-height: 56px; max-width: min(240px, 100%); width: auto; height: auto; }
.auth-title { font-size: 1.2rem; margin: 0 0 16px; text-align: center; }
.auth-lead { text-align: center; }
.auth-form { display: grid; gap: 12px; }
.field { display: grid; gap: 5px; }
.field-label { font-size: .85rem; color: var(--muted); }
.field input {
  width: 100%; min-height: 44px; padding: 8px 12px; font-size: 1rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.field input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: var(--radius); font-size: .95rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: filter .15s ease, transform .05s ease, background-color .15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-block { width: 100%; }
/* Giriş kodu ekranı (K-117) */
.auth-note { margin: 0 0 14px; color: var(--muted, #5f6b7a); font-size: .9rem; text-align: center; line-height: 1.5; }
.auth-note a { color: inherit; }
.btn-ghost { background: transparent; color: var(--muted, #5f6b7a); border: 1.5px solid var(--border, #d9dee5); }
.btn-ghost:hover { color: var(--text, #1f2933); filter: none; }
.alert { padding: 9px 12px; border-radius: var(--radius); margin-block-end: 12px; font-size: .9rem; }
.alert-error { background: var(--danger-bg); color: var(--danger-ink); }
.alert-warning { background: var(--warning-bg); color: var(--warning-ink); }
.alert-success { background: var(--success-bg); color: var(--success-ink); }
.alert-info { background: var(--bg); color: var(--text); }
.auth-languages { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-block-start: 18px; font-size: .85rem; }
.auth-languages span { font-weight: 600; }
.auth-footer { display: grid; gap: 2px; margin-block-start: 18px; text-align: center; font-size: .75rem; color: var(--muted); }
.auth-product { margin-block-start: 6px; opacity: .8; }

/* Telefonda giriş: kart çerçevesiz, tam ekran uygulama görünümü */
@media (max-width: 599px) {
  body:has(.auth) { background: var(--surface); }
  .auth { align-items: flex-start; padding: calc(48px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); }
  .auth-card { border: none; border-radius: 0; padding: 0; max-width: none; }
}