/* ============================================================
   GÜVENLİ TEDARİKÇİ PORTALI — GİRİŞ KAPAĞI

   NE ANLATIR
     Sahnenin merkezinde tedarikçi düğümü ve onu saran GÜVEN YAYI var.
     Çevredeki düğümler hizmet verilen ana firmalar; içeri akan sinyaller
     belgeler/muayeneler/seferler (kanıt), dışarı çıkanlar onlara giden
     güvence. Yay yavaşça dolar — SAYI YOKTUR, giriş ekranında uydurma
     bir puan göstermek yanıltıcı olur.

   KAPSAM
     Yalnızca Views/SupplierPortal/Login.cshtml. Sınıf öneki `spa-`
     (supplier portal auth). supplier-portal.css'teki `.sp-*` kuralları
     olduğu gibi durur — Signup ve portalın içi onları kullanmaya devam
     eder. Bu dosya hiçbir şeyi ezmez, yeni isim alanı açar.

   GERİ ALMA
     Login.cshtml'i eski hâline döndür + _LayoutLogin.cshtml'deki tek
     <link> satırını sil + bu dosyayı sil.

   RENK
     Portalın kendi kehribar kimliği korundu: sıcak kahve zemin,
     turuncu vurgu, mevcut turuncu degrade düğme.
   ============================================================ */

.spa-login {
    /* Sahne — sıcak mürekkep */
    --spa-ink: #150F07;
    --spa-ink-2: #33240F;
    --spa-ink-3: #0A0703;

    /* Kehribar aile */
    --spa-amber: #F59E0B;
    --spa-amber-2: #EA7A0B;
    --spa-amber-lt: #FCD34D;

    /* Sahne üstü metin */
    --spa-on: #FFF8EE;
    --spa-on-dim: #B9A48A;

    /* Form paneli */
    --spa-pane: #FFFFFF;
    --spa-pane-2: #F8F6F3;
    --spa-pane-line: #E8E2DA;
    --spa-pane-tx: #1F1B16;
    --spa-pane-mu: #8A7F72;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 27rem;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--spa-pane);
}

/* ============================================================
   SOL — güven sahnesi
   ============================================================ */

.spa-scene {
    position: relative;
    overflow: hidden;
    background: radial-gradient(110% 88% at 68% 46%, var(--spa-ink-2) 0%, var(--spa-ink) 54%, var(--spa-ink-3) 100%);
}

.spa-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* Merkezdeki tedarikçi düğümü — konumu JS ile canvas merkezine bağlanır */
.spa-hub {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spa-hub-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.26) 0%, rgba(245, 158, 11, 0) 68%);
}

.spa-hub-disc {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 22px;
    background: linear-gradient(160deg, #3B2A12 0%, #1D1408 100%);
    border: 1px solid rgba(245, 158, 11, 0.34);
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), 0 16px 44px rgba(0, 0, 0, 0.60);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spa-hub-disc svg {
    width: 34px;
    height: 34px;
}

.spa-in {
    /* ALTIN ORAN — diğer giriş ekranlarıyla AYNI kural. Metin geniş
       sahnede sol kenara yapışmasın: artan boşluk 0.382 / 0.618 bölünür,
       blok merkezin biraz soluna oturur. Künye şeridi (.spa-legal-bar)
       bu kutuyu birebir taklit eder — biri değişirse diğeri de değişmeli.
       Canvas/sahne animasyonuna DOKUNMAZ. */
    margin-left: calc((100% - min(34rem, 100%)) * 0.382);

    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 52px;
    max-width: 34rem;
}

.spa-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 44px;
}

.spa-brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.spa-brand-word {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.19em;
    color: #ffffff;
    line-height: 1;
}

.spa-brand-tag {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--spa-amber);
}

.spa-claim {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: clamp(29px, 3.2vw, 44px);
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: var(--spa-on);
}

/* İkinci satır — kehribar degrade */
.spa-claim-g {
    display: block;
    background: linear-gradient(96deg, #FCD34D 0%, #F59E0B 40%, #EA7A0B 72%, #E8446B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.spa-sub {
    margin: 0 0 30px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--spa-on-dim);
    max-width: 42ch;
}

/* Yönetilen alanlar */
.spa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spa-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: default;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #C6B49C;
    font-size: 12px;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.spa-chip-d {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #6B573C;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.spa-chip:hover {
    color: #FFF3E0;
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08);
}

.spa-chip.is-on {
    color: #FFE9C4;
    border-color: rgba(245, 158, 11, 0.52);
    background: rgba(245, 158, 11, 0.10);
}

.spa-chip.is-on .spa-chip-d {
    background: var(--spa-amber);
    box-shadow: 0 0 9px rgba(245, 158, 11, 0.90);
}

/* ============================================================
   SAĞ — form paneli
   ============================================================ */

.spa-pane {
    background: var(--spa-pane);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 34px;
}

.spa-form-wrap {
    width: 100%;
    max-width: 19.5rem;
}

.spa-logo {
    width: 38px;
    height: 38px;
    margin: 0 auto 18px;
    display: block;
}

.spa-h {
    font-size: 24px;
    font-weight: 700;
    color: var(--spa-pane-tx);
    margin: 0 0 4px;
    letter-spacing: -0.4px;
    text-align: center;
}

.spa-s {
    font-size: 12.5px;
    color: var(--spa-pane-mu);
    margin: 0 0 24px;
    text-align: center;
}

.spa-lb {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--spa-pane-tx);
    margin-bottom: 6px;
}

.spa-iw {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 13px;
}

.spa-lead {
    position: absolute;
    left: 13px;
    width: 15px;
    height: 15px;
    color: var(--spa-pane-mu);
    pointer-events: none;
    transition: color 0.18s ease;
}

.spa-iw input {
    width: 100%;
    height: 44px;
    padding: 0 13px 0 38px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--spa-pane-tx);
    background: var(--spa-pane-2);
    border: 1px solid var(--spa-pane-line);
    border-radius: 9px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.spa-iw input::placeholder { color: var(--spa-pane-mu); }

.spa-iw input:focus {
    outline: none;
    border-color: var(--spa-amber);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
    background: var(--spa-pane);
}

.spa-iw:focus-within .spa-lead { color: var(--spa-amber-2); }

.spa-eye {
    position: absolute;
    right: 6px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--spa-pane-mu);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.spa-eye:hover {
    color: var(--spa-amber-2);
    background: rgba(245, 158, 11, 0.10);
}

.spa-eye svg { width: 16px; height: 16px; }

/* Beni hatırla */
.spa-rem {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 6px 0 18px;
    cursor: pointer;
    user-select: none;
}

.spa-rem input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.spa-box {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--spa-pane-line);
    background: var(--spa-pane-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.spa-box svg {
    width: 11px;
    height: 11px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.spa-rem input:checked + .spa-box {
    background: linear-gradient(135deg, var(--spa-amber), var(--spa-amber-2));
    border-color: var(--spa-amber-2);
}

.spa-rem input:checked + .spa-box svg { opacity: 1; }
.spa-rem:hover .spa-box { border-color: var(--spa-amber); }
.spa-rem input:focus-visible + .spa-box { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }

.spa-rem-t {
    font-size: 12.5px;
    color: var(--spa-pane-mu);
}

/* Giriş düğmesi */
.spa-btn {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--spa-amber) 0%, var(--spa-amber-2) 100%);
    box-shadow: 0 10px 24px rgba(234, 122, 11, 0.30);
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.spa-btn svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.spa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(234, 122, 11, 0.40);
}

.spa-btn:hover svg { transform: translateX(3px); }
.spa-btn:active { transform: translateY(0); }

/* login.js gönderim sırasında butonu disabled yapar */
.spa-btn:disabled {
    cursor: default;
    opacity: 0.72;
    transform: none;
    box-shadow: 0 6px 16px rgba(234, 122, 11, 0.20);
}

.spa-btn:disabled svg { transform: none; }

/* Hata — görünürlüğü login.js yönetir (.show()/.hide()) */
.spa-error {
    margin-bottom: 13px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.26);
    color: #DC2626;
}

/* Hata kutusu içi aksiyon linki — "Onay e-postasını tekrar gönder" */
.spa-error-link {
    display: inline-block;
    margin-top: 4px;
    color: #B91C1C;
    font-weight: 600;
    text-decoration: underline;
}

.spa-error-link:hover { color: #991B1B; }

/* Başarı kutusu — Şifremi Unuttum / Yeni Şifre ekranları */
.spa-ok {
    margin-bottom: 13px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.55;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #15803D;
}

.spa-links {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 1.85;
    color: var(--spa-pane-mu);
}

.spa-links p { margin: 0; }

.spa-links a {
    color: var(--spa-amber-2);
    font-weight: 600;
    text-decoration: none;
}

.spa-links a:hover { text-decoration: underline; }

.spa-links .spa-q { font-size: 11.5px; }

/* ============================================================
   Dar ekran — sahne üstte, form altta
   ============================================================ */

@media (max-width: 940px) {
    .spa-login {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .spa-scene { min-height: 22rem; }
    .spa-in { padding: 32px 28px; max-width: none; margin-left: 0; }
    .spa-brand { margin-bottom: 26px; }
    .spa-claim { font-size: 28px; }
    .spa-sub { margin-bottom: 22px; }
    .spa-pane { padding: 34px 24px; }
}

@media (max-width: 560px) {
    .spa-scene { min-height: 17rem; }
    .spa-brand { margin-bottom: 18px; }
    .spa-claim { font-size: 24px; }
    .spa-sub { display: none; }
}

/* Hareketi azalt tercihi — canvas döngüsü de JS tarafında durur */
@media (prefers-reduced-motion: reduce) {
    .spa-chip,
    .spa-btn,
    .spa-btn svg,
    .spa-box {
        transition: none;
    }
}


/* ============================================================
   GÖNDERİM İLERLEME MODALI  (.spa-pm-*)

   Şifremi Unuttum ekranında "Bağlantı Gönder" basıldığında açılır.
   Sahnedeki yörünge motifini tekrar eder: merkezde marka işareti,
   çevresinde dönen kehribar halka.

   NOT: Değişkenler .spa-login üzerinde tanımlı, bu yüzden modal
   markup'ı .spa-login İÇİNDE durmalıdır — body'ye taşınırsa
   renkler kaybolur.

   Üç durum, gövdedeki sınıfla seçilir:
     is-sending · is-sent · is-error
   ============================================================ */

.spa-pm {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 7, 3, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.spa-pm.is-open {
    opacity: 1;
    visibility: visible;
}

.spa-pm-card {
    width: 100%;
    max-width: 366px;
    padding: 30px 28px 24px;
    border-radius: 16px;
    background: var(--spa-pane);
    border: 1px solid var(--spa-pane-line);
    box-shadow: 0 30px 70px -20px rgba(10, 7, 3, 0.55);
    text-align: center;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.spa-pm.is-open .spa-pm-card { transform: none; }

/* ---------- Yörünge ---------- */

.spa-pm-orbit {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
}

.spa-pm-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(245, 158, 11, 0.16);
    border-top-color: var(--spa-amber);
    border-right-color: var(--spa-amber-lt);
    animation: spa-pm-spin 0.95s linear infinite;
}

.spa-pm-disc {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--spa-pane-2);
    border: 1px solid var(--spa-pane-line);
}

.spa-pm-disc img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Bitiş ikonları — normalde gizli, duruma göre açılır */
.spa-pm-mark {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.spa-pm-mark svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.6;
}

/* ---------- Metin ---------- */

.spa-pm-h {
    margin: 0 0 6px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--spa-pane-tx);
}

.spa-pm-s {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--spa-pane-mu);
}

.spa-pm-mail {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--spa-pane-tx);
    background: var(--spa-pane-2);
    border: 1px solid var(--spa-pane-line);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Adımlar ---------- */

.spa-pm-steps {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--spa-pane-line);
    text-align: left;
}

.spa-pm-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--spa-pane-mu);
    transition: color 0.2s ease;
}

.spa-pm-steps li::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--spa-pane-line);
    background: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* çalışan adım — kehribar nabız */
.spa-pm-steps li.is-active {
    color: var(--spa-pane-tx);
    font-weight: 600;
}

.spa-pm-steps li.is-active::before {
    border-color: var(--spa-amber);
    animation: spa-pm-pulse 1.15s ease-in-out infinite;
}

/* biten adım — dolu kehribar + tik */
.spa-pm-steps li.is-done { color: var(--spa-pane-tx); }

.spa-pm-steps li.is-done::before {
    border-color: var(--spa-amber);
    background: var(--spa-amber);
    animation: none;
}

/* ---------- Alt butonlar ---------- */

.spa-pm-foot {
    margin-top: 20px;
    display: none;
    flex-direction: column;
    gap: 9px;
}

.spa-pm-ghost {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--spa-pane-mu);
    background: transparent;
    border: 1px solid var(--spa-pane-line);
    transition: color 0.16s ease, border-color 0.16s ease;
}

.spa-pm-ghost:hover {
    color: var(--spa-pane-tx);
    border-color: var(--spa-pane-mu);
}

/* ============================================================
   DURUMLAR
   ============================================================ */

/* — gönderiliyor: yalnızca halka döner, buton yok */
.spa-pm.is-sending .spa-pm-foot { display: none; }

/* — gönderildi */
.spa-pm.is-sent .spa-pm-ring {
    animation: none;
    border-color: rgba(34, 197, 94, 0.30);
}

.spa-pm.is-sent .spa-pm-disc { display: none; }

.spa-pm.is-sent .spa-pm-ok {
    display: flex;
    background: #16A34A;
}

.spa-pm.is-sent .spa-pm-foot { display: flex; }

/* — hata */
.spa-pm.is-error .spa-pm-ring {
    animation: none;
    border-color: rgba(220, 38, 38, 0.30);
}

.spa-pm.is-error .spa-pm-disc { display: none; }

.spa-pm.is-error .spa-pm-fail {
    display: flex;
    background: #DC2626;
}

.spa-pm.is-error .spa-pm-steps { display: none; }
.spa-pm.is-error .spa-pm-foot { display: flex; }

/* Hata durumunda birincil buton kehribar kalır — spa-btn yeniden kullanılır */
.spa-pm-foot .spa-btn { height: 42px; }

/* ============================================================
   HAREKETLER
   ============================================================ */

@keyframes spa-pm-spin {
    to { transform: rotate(360deg); }
}

@keyframes spa-pm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.34); }
    50%      { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .spa-pm,
    .spa-pm-card,
    .spa-pm-steps li,
    .spa-pm-steps li::before,
    .spa-pm-ghost {
        transition: none;
    }

    .spa-pm-ring,
    .spa-pm-steps li.is-active::before {
        animation: none;
    }

    /* Halka dönmeyince "çalışıyor" bilgisi kaybolmasın diye üst kenar belirgin kalır */
    .spa-pm-ring { border-top-color: var(--spa-amber); }
}

/* Dar ekran */
@media (max-width: 420px) {
    .spa-pm-card { padding: 26px 20px 20px; }
}


/* ============================================================
   ŞİFRE STANDARDI GÖSTERGESİ  (.spa-pw-*)

   Logitera şifre standardını kullanıcıya YAZARKEN hissettirir:
   ince güç çubuğu + beş küçük ölçüt rozeti. Toplam ~34px —
   formu uzatmadan kuralı görünür kılar.

   Kural TEK KAYNAK: ValidationHelper.ValidatePassword (C#) ve
   logitera-password-policy.js (istemci). İkisi birebir aynı.
   ============================================================ */

.spa-pw {
    margin: -3px 0 13px;
}

/* Güç çubuğu — dört dilim */
.spa-pw-bar {
    display: flex;
    gap: 3px;
    height: 3px;
    margin-bottom: 7px;
}

.spa-pw-seg {
    flex: 1;
    border-radius: 2px;
    background: var(--spa-pane-line);
    transition: background-color 0.22s ease;
}

.spa-pw.is-weak   .spa-pw-seg.is-on { background: #DC2626; }
.spa-pw.is-medium .spa-pw-seg.is-on { background: var(--spa-amber); }
.spa-pw.is-strong .spa-pw-seg.is-on { background: #16A34A; }

/* Ölçüt satırı */
.spa-pw-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.spa-pw-chip {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    padding: 1px 6px;
    border-radius: 5px;
    border: 1px solid var(--spa-pane-line);
    background: var(--spa-pane-2);
    color: var(--spa-pane-mu);
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.spa-pw-chip.is-ok {
    color: #15803D;
    border-color: rgba(34, 197, 94, 0.42);
    background: rgba(34, 197, 94, 0.10);
}

/* Sağa yaslı durum etiketi */
.spa-pw-label {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--spa-pane-mu);
    transition: color 0.18s ease;
}

.spa-pw.is-weak   .spa-pw-label { color: #DC2626; }
.spa-pw.is-medium .spa-pw-label { color: var(--spa-amber-2); }
.spa-pw.is-strong .spa-pw-label { color: #15803D; }

/* Boş alanda gösterge sessiz durur */
.spa-pw.is-empty .spa-pw-label { color: var(--spa-pane-mu); }

/* Tekrar alanı eşleşme satırı */
.spa-pw-match {
    margin: -3px 0 13px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    min-height: 16px;
    color: var(--spa-pane-mu);
}

.spa-pw-match.is-ok   { color: #15803D; }
.spa-pw-match.is-bad  { color: #DC2626; }

@media (prefers-reduced-motion: reduce) {
    .spa-pw-seg,
    .spa-pw-chip,
    .spa-pw-label { transition: none; }
}

/* ============================================================
   KÜNYE  (.spa-legal-bar > .spa-legal)

   DİPNOTTUR: sahnenin dibinde durur. Metin bloğunun peşine
   takılınca dikey ortalamanın içinde kalıp ortada asılı kalıyor,
   ayrıca .spa-in'in dar kutusuna sıkışıp üç satıra bölünüyordu.

   Şerit artık sahnenin doğrudan çocuğu ve kutusu .spa-in ile
   BİREBİR aynı: aynı max-width, aynı dolgu, aynı altın oran
   kaydırması → künye sloganla tam aynı dikey omurgada durur.
   Bu üçlü birlikte değişmeli; biri unutulursa hiza kayar.
   ============================================================ */
.spa-legal-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 34rem;
    padding: 0 52px 26px;
    margin-left: calc((100% - min(34rem, 100%)) * 0.382);
    z-index: 3;
    pointer-events: none;
}

/* Künye — tek satır, sahnenin en sönük öğesi. */
.spa-legal {
    font-size: 11.5px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: rgba(226, 232, 255, 0.42);
    white-space: nowrap;
}

/* Şerit tıklamayı geçirir; yalnızca bağlantılar tıklanabilir kalsın */
.spa-legal a {
    pointer-events: auto;
    color: rgba(226, 232, 255, 0.62);
    text-decoration: none;
    transition: color 0.2s ease;
}

.spa-legal a:hover { color: #ffffff; }
.spa-legal-sep { margin: 0 3px; opacity: 0.6; }

/* Dar ekranda sahne dolgusu 28px'e iner — şerit de onunla hizalanır. */
@media (max-width: 1023px) {
    .spa-legal-bar { max-width: none; padding: 0 28px 18px; margin-left: 0; }
    .spa-legal { white-space: normal; }
}