/* ==========================================================================
   Yuto Glass · sayfa — kimlik ekranları (giriş, şifremi unuttum, yeni şifre)
   --------------------------------------------------------------------------
   Üç ekran aynı kabuğu paylaşıyor: ortalanmış tek cam kart, üstte marka,
   altında form. Eski `login.css` (401 satır) bu dosyayla değiştirildi ve
   silindi — parçacık animasyonu, kendi form/düğme/alert stilleri ve kendi
   token seti dahil hepsi gitti. Arka plan artık dilin ortak arka ışığı.
   ========================================================================== */

.yg-auth {
    /* .yg-bare bir flex kolon; `margin:auto` dikeyde de ortalıyor. */
    margin: auto;
    width: 100%;
    max-width: 460px;
}

.yg-auth__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--yg-gap-sm);
    padding: 30px 28px 22px;
    border-bottom: 1px solid var(--yg-hair);
    text-align: center;
}

.yg-auth__brand {
    width: 124px;
    height: 42px;
    background: url('../../../image/yutomat-wordmark-white.png') center / contain no-repeat;
    font-size: 0;
}

.yg-auth__title {
    margin: 0;
    font: 600 21px / 1.25 var(--yg-display);
    letter-spacing: -0.02em;
    color: var(--yg-text);
}

.yg-auth__subtitle {
    margin: 0;
    font: 300 var(--yg-text-sm) / 1.5 var(--yg-sans);
    color: var(--yg-text-3);
    text-wrap: pretty;
}

.yg-auth__body {
    padding: 24px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: var(--yg-gap);
}

/* Şifre alanı — göster/gizle düğmesi oyuğun içinde durur. */
.yg-auth__password {
    position: relative;
}

.yg-auth__password .form-control {
    padding-right: 46px;
}

.yg-auth__reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--yg-radius-xs);
    background: transparent;
    color: var(--yg-text-3);
    cursor: pointer;
    transition: color var(--yg-dur-color) ease, background var(--yg-dur-color) ease;
}

.yg-auth__reveal:hover {
    background: var(--yg-hover);
    color: var(--yg-text);
}

.yg-auth__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yg-gap-sm);
    flex-wrap: wrap;
}

.yg-auth__link {
    font: 400 var(--yg-text-sm) / 1 var(--yg-sans);
    color: var(--yg-text-2);
}

.yg-auth__link:hover {
    color: var(--yg-text);
}

/* reCAPTCHA kendi iframe'ini getiriyor; teması bize ait değil. Kutuyu
   ortalamak ve etrafına nefes payı vermekle yetiniyoruz. */
.yg-auth__recaptcha {
    display: flex;
    justify-content: center;
}

.yg-auth__recaptcha-error {
    margin-top: 8px;
    font: 400 var(--yg-text-xs) / 1.45 var(--yg-sans);
    color: var(--yg-danger-soft);
    text-align: center;
}

.yg-auth__back {
    text-align: center;
}

.yg-auth__foot {
    padding: 14px 28px 18px;
    border-top: 1px solid var(--yg-hair);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 400 var(--yg-text-xs) / 1.5 var(--yg-sans);
    color: var(--yg-text-3);
}

/* Gönderim sırasında düğme meşgul: metin gizlenir, halka görünür.
   `.is-busy` sınıfını sayfanın kendi scripti ekliyor. */
.yg-auth__submit .yg-auth__submit-busy {
    display: none;
}

.yg-auth__submit.is-busy .yg-auth__submit-idle {
    display: none;
}

.yg-auth__submit.is-busy .yg-auth__submit-busy {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

@media (max-width: 480px) {
    .yg-auth__head {
        padding: 24px 20px 18px;
    }

    .yg-auth__body {
        padding: 20px 20px 22px;
    }

    .yg-auth__foot {
        padding: 12px 20px 16px;
    }
}