:root {
      --page-bg: #dce8f2;
      --page-bg-top: #f2f6fb;
      --page-bg-mid: #e5edf6;
      --surface: #ffffff;
      --border: #cfd8e6;
      --text: #1e293b;
      --muted: #64748b;
      --accent: #0f4c81;
      --accent-hover: #0c3d68;
      --accent-soft: rgba(15, 76, 129, 0.1);
      --radius: 12px;
      --radius-sm: 8px;
      --shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
      --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.1);
      --form-input-bg: color-mix(in srgb, var(--page-bg) 42%, var(--surface));
      --form-input-bg-focus: var(--surface);
      --form-input-bg-disabled: color-mix(in srgb, var(--page-bg) 62%, var(--surface));
      --form-input-border-hover: color-mix(in srgb, var(--border) 52%, var(--text));
      --form-input-border-disabled: color-mix(in srgb, var(--border) 78%, var(--surface));
      --form-input-placeholder: var(--muted);
      --form-input-icon: var(--muted);
      --form-input-icon-disabled: color-mix(in srgb, var(--muted) 55%, var(--surface));

      /* Giriş tipografi — web (portal tablo/form ile uyumlu) */
      --login-font-body: 0.8125rem;
      --login-font-label: 0.8125rem;
      --login-font-input: 0.8125rem;
      --login-font-placeholder: 0.8125rem;
      --login-font-heading: 1.125rem;
      --login-font-sub: 0.8125rem;
      --login-font-hint: 0.8125rem;
      --login-font-button: 0.8125rem;
      --login-font-link: 0.8125rem;
      --login-font-message: 0.8125rem;
      --login-font-brand: 2rem;
      --login-font-footer: 0.6875rem;
      --login-font-preview-head: 1.125rem;
      --login-font-preview-sub: 0.8125rem;
      --login-font-slide-slogan: 1.2rem;
      --login-font-slide-caption: 0.8125rem;
      --login-slide-poster-bg: linear-gradient(165deg, #ffffff 0%, #f0f5fb 50%, #e6eef8 100%);
      --login-slide-poster-bg-edefter: linear-gradient(165deg, #ffffff 0%, #f5f8fc 55%, #ebf2fa 100%);
      --login-slide-poster-bg-banka: linear-gradient(165deg, #ffffff 0%, #f3f7fb 50%, #e8f1f9 100%);
      --login-slide-heading: #0f172a;
      --login-slide-em-gradient: linear-gradient(115deg, #082f4f 0%, var(--accent) 45%, #1e6ba8 100%);
      --login-input-padding-y: 0.42rem;
      --login-input-padding-x: 0.55rem;
      --login-button-padding-y: 0.45rem;
      --login-button-padding-x: 0.85rem;
      --login-form-field-gap: 1rem;
      --login-form-message-gap: 0.75rem;
      --login-form-message-min-h: 1.35em;
      --login-form-submit-gap: 0.65rem;
      /* Giriş alanı odağı — varsayılan (açık temalar) */
      --login-input-focus-border: var(--accent);
      --login-input-focus-shadow: 0 0 0 3px var(--accent-soft);
      /* Parola → Giriş yap ile aynı dikey ritim (alan + mesaj + düğme) */
      --login-form-action-stack: calc(
        var(--login-form-field-gap) + var(--login-form-message-gap) +
          var(--login-form-message-min-h) + var(--login-form-submit-gap)
      );
    }

    @media (max-width: 640px) {
      :root {
        /* Giriş tipografi — mobil (portal kompakt form ile uyumlu) */
        --login-font-body: 0.6875rem;
        --login-font-label: 0.6875rem;
        --login-font-input: 16px;
        --login-font-placeholder: 0.6875rem;
        --login-font-heading: 0.975rem;
        --login-font-sub: 0.6875rem;
        --login-font-hint: 0.6875rem;
        --login-font-button: 0.78rem;
        --login-font-link: 0.6875rem;
        --login-font-message: 0.6875rem;
        --login-font-brand: 1.65rem;
        --login-font-footer: 0.625rem;
        --login-font-preview-head: 0.9375rem;
        --login-font-preview-sub: 0.6875rem;
        --login-font-slide-slogan: 0.9375rem;
        --login-font-slide-caption: 0.6875rem;
        --login-input-padding-y: 0.35rem;
        --login-input-padding-x: 0.45rem;
        --login-button-padding-y: 0.4rem;
        --login-button-padding-x: 0.65rem;
      }
    }