/*
  Purpose:      Layout and component styles for the sign-in screen.
  Reason:       §30 forbids literal visual values in screens; everything here reads
                from tokens.css. §15.1 raises the floors for field use: 56px touch
                targets for gloved hands and high contrast for sunlight.
  Dependencies: tokens.css must be loaded first.
  Input:        None.
  Output:       Styles.
  Risks:        Adding a hex colour here forks the palette and silently breaks dark
                mode for that element only.

  Amaç:         Giriş ekranının yerleşim ve bileşen stilleri.
  Gerekçe:      §30 ekranlarda sabit görsel değeri yasaklar; buradaki her şey
                tokens.css'ten okur. §15.1 saha kullanımı için tabanı yükseltir:
                eldivenli el için 56px hedef, güneş için yüksek kontrast.
  Bağımlılıklar: Önce tokens.css yüklenmelidir.
  Girdi:        Yok.
  Çıktı:        Stiller.
  Riskler:      Buraya hex renk yazmak paleti çatallar ve karanlık temayı yalnızca
                o öğede sessizce bozar.
*/

* { box-sizing: border-box; }

/* HTML'in `hidden` özniteliği, `display` veren HER kuraldan güçlü olmalıdır.
   Aksi hâlde `.btn { display:flex }` gizlemeyi ezer ve yapılandırılmamış
   sağlayıcının düğmesi görünür — §4'ün yasakladığı kırık düğme.
   (2026-08-15'te emülatörde yakalandı: üç sağlayıcı düğmesi "bu cihazda
   kullanılamıyor" mesajıyla yan yana görünüyordu.) */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Üst çubuk --- */
.topbar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
}

.lang select {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: 16px; /* iOS Safari odaklanınca yakınlaştırmasın */
}

/* --- Ekran --- */
.screen {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-8);
  padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
}

/* --- Marka --- */
.brand { text-align: center; margin-bottom: var(--space-6); }

.logo-placeholder {
  width: 76px; height: 76px;
  margin: 0 auto var(--space-3);
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-compliant-bg);
  color: var(--color-primary);
}

.brand h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  letter-spacing: 0.06em;
}

.tagline {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  text-wrap: pretty;
}

/* --- Düğmeler: §15.1 eldivenli el için 56px --- */
.actions { display: grid; gap: var(--space-3); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}

.btn:hover { box-shadow: var(--shadow-raised); }
/* Dokunmaya 100 ms içinde görsel tepki (§15.1) */
.btn:active { transform: scale(0.985); }

.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}

.btn-secondary { background: transparent; }

.btn-passkey {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

.provider-icon { width: 24px; height: 24px; flex: none; }

.provider-empty {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-unknown-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* --- Ayraç --- */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --- E-posta formu --- */
.email-form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.email-form label { font-weight: 600; }

.email-form input[type="email"],
.email-form input[type="password"],
.email-form input[type="text"] {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: 16px; /* iOS otomatik yakınlaştırma önlemi — bilinçli sabit */
}

.email-form input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

.password-wrap { position: relative; }

.password-wrap input { padding-right: 6.5rem; }

/* Tarayıcının kendi göz ikonu bizimkinin yanında çıkmasın */
input[type="password"]::-ms-reveal { display: none; }

.reveal {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.remember {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
}

.remember input { width: 24px; height: 24px; margin-top: 2px; flex: none; }
.remember span { font-weight: 600; }
.remember small {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.forgot {
  justify-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary-strong);
  font-weight: 600;
}

.legal {
  margin: var(--space-6) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.legal a, .forgot { color: var(--color-primary-strong); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* --- Uygulama çubuğu (giriş sonrası ekranlar) --- */
.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.appbar .back {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-lg);
}

.appbar-title { display: grid; gap: 2px; flex: 1; min-width: 0; }
.appbar-title strong { font-size: var(--font-size-base); }
.appbar-title span { font-size: var(--font-size-sm); opacity: 0.9; }

.appbar .sync { background: rgba(255,255,255,0.16); color: inherit; }

.optional { font-weight: 400; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* --- Form modu (giriş ↔ kayıt) --- */
.form-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
}

.field-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.mode-switch {
  margin: var(--space-4) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.link-button {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--color-primary-strong);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Çalışmadığı anlaşılan sağlayıcı düğmesi: gizlenmez, DEVRE DIŞI gösterilir.
   Gizlemek "bu cihaz desteklemiyor" der; oysa desteklenmeyen şey sunucudur. */
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn[disabled]:active { transform: none; }

.form-error {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-non-compliant-bg);
  color: var(--color-non-compliant);
  font-weight: 600;
}

/* --- Menü (drawer) --- */
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: min(84vw, 20rem);
  padding: var(--space-4) var(--space-3);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-raised);
  display: grid;
  align-content: start;
  gap: var(--space-1);
  overflow-y: auto;
}

.drawer-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,0.45); }

.drawer-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.drawer-item[aria-current="page"] {
  background: var(--color-compliant-bg);
  color: var(--color-compliant);
}
.drawer-item--soon { color: var(--color-text-muted); cursor: default; }
.drawer-item--soon em {
  margin-left: auto;
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 400;
}
.drawer-item--danger { color: var(--color-non-compliant); }
.drawer-icon { width: 1.6rem; text-align: center; }
.drawer-divider { height: 1px; background: var(--color-border); margin: var(--space-2) 0; }

.page-title { margin: 0 0 var(--space-4); font-size: var(--font-size-xl); }

.notice { margin-bottom: var(--space-5); }
.notice h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.notice p { margin: 0 0 var(--space-3); }

.code-row { display: flex; gap: var(--space-2); }
.code-row input {
  flex: 1;
  min-height: var(--touch-target-min);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-numeric);
  font-size: var(--font-size-lg);
  letter-spacing: 0.3em;
  text-align: center;
}
.code-row .btn { width: auto; flex: none; padding-inline: var(--space-5); }

/* --- Arazi ekleme --- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.page-head .page-title { margin: 0; }
.btn-compact { width: auto; min-height: 44px; padding: 0 var(--space-4); font-size: var(--font-size-base); }

.optional-block {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-2);
}
.optional-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.area-row { display: flex; gap: var(--space-2); }
.area-row input { flex: 1; }
.area-row select { flex: none; width: 8.5rem; }

.email-form select {
  min-height: var(--touch-target-min);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}