/* ============================================================================
   auth.css — Giriş ve Kayıt sayfalarının ORTAK tasarımı
   ----------------------------------------------------------------------------
   NEDEN TEK DOSYA: Bu değerler önceden login.html ve register.html içinde ayrı
   ayrı, elle yazılıydı ve zamanla birbirinden kaymışlardı:
       başlık 1.5rem / 1.65rem · kart gölgesi 13px / 20px
       alan yüksekliği sabit 42px / dolgu tabanlı · buton .95rem / 1rem
       alan anatomisi ikon+placeholder / üst etiket
       Poppins login'de tanımlı, register'da HİÇ tanımlı değildi
   Kullanıcı bir sayfadan diğerine geçtiğinde "iki ayrı site" hissi veriyordu.
   Yeni bir kural eklerken BURAYA ekle; sayfa içine <style> yazma.

   KULLANIM: <body class="auth"> + .auth-shell > (.auth-brand + .auth-form)
   ========================================================================== */

:root {
    --c-lacivert: #052c65;
    --c-lacivert-koyu: #041e47;
    --c-turuncu: #fd7e14;
    --c-zemin: #f6f9ff;
    --c-alan: #f3f6fa;
    --c-alan-kenar: #e4eaf2;
    --c-metin: #1f2937;
    --c-metin-soluk: #6b7280;
    --r-kart: 26px;
    --r-alan: 10px;
    --h-kontrol: 46px;
    --golge-kart: 0 8px 30px rgba(5, 44, 101, .08);
}

body.auth {
    background-color: var(--c-zemin);
    font-family: 'Poppins', sans-serif;
}

.auth-shell,
.auth-shell input,
.auth-shell button,
.auth-shell select {
    font-family: 'Poppins', sans-serif;
}

/* ── Kabuk ─────────────────────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.auth-shell {
    width: 100%;
    max-width: 980px;
    background: #fff;
    border-radius: var(--r-kart);
    box-shadow: var(--golge-kart);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    animation: authIn .35s ease-out both;
}

/* Giriş formu kayıttan kısa; kabuk gereksiz genişlemesin */
.auth-shell--dar { max-width: 880px; }

@keyframes authIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell { animation: none; }
}

@media (min-width: 992px) {
    .auth-shell { grid-template-columns: 42% 58%; }
}

/* ── Sol marka paneli (yalnız masaüstü) ────────────────────────────────── */
.auth-brand {
    display: none;
    position: relative;
    padding: 2.75rem 2.25rem;
    color: #fff;
    background:
        radial-gradient(120% 90% at 0% 0%, #0b3f8f 0%, transparent 60%),
        linear-gradient(160deg, var(--c-lacivert) 0%, var(--c-lacivert-koyu) 100%);
}

@media (min-width: 992px) {
    .auth-brand { display: flex; flex-direction: column; }
}

.auth-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    margin-bottom: 2.25rem;
}

/* Ayrı bir beyaz logo dosyası yok; mevcut logo filtreyle beyazlatılıyor */
.auth-brand__logo img {
    height: 40px;
    filter: brightness(0) invert(1);
}

.auth-brand__logo span {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .2px;
}

.auth-brand__title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .85rem;
}

.auth-brand__lead {
    font-size: .93rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 1.75rem;
}

.auth-brand__list {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    display: grid;
    gap: .7rem;
}

.auth-brand__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .92);
}

.auth-brand__list i {
    color: #6fd08c;
    font-size: 1.05rem;
    line-height: 1.35;
    flex-shrink: 0;
}

.auth-brand__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.auth-brand__chips span {
    font-size: .74rem;
    font-weight: 500;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .88);
}

/* ── Sağ form paneli ───────────────────────────────────────────────────── */
.auth-form { padding: 2.25rem 1.5rem 1.25rem; }

@media (min-width: 992px) {
    .auth-form { padding: 2.75rem 3rem 1.5rem; }
}

/* Mobilde sol panel gizli olduğu için logo formun üstünde gösterilir */
.auth-form__logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }

@media (min-width: 992px) {
    .auth-form__logo { display: none; }
}

.auth-title {
    color: var(--c-lacivert);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -.01em;
    margin-bottom: .3rem;
}

.auth-subtitle {
    color: var(--c-metin-soluk);
    font-size: .92rem;
    margin-bottom: 1.5rem;
}

/* ── Form alanları ─────────────────────────────────────────────────────── */
.auth .form-control {
    background-color: var(--c-alan);
    border: 1.5px solid var(--c-alan-kenar);
    border-radius: var(--r-alan);
    min-height: var(--h-kontrol);
    font-size: .92rem;
    color: var(--c-metin);
    padding: .6rem .9rem;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.auth .form-control::placeholder {
    color: #9aa4b2;
    font-size: .9rem;
}

.auth .form-control:hover:not(:focus) { border-color: #d5dfeb; }

.auth .form-control:focus {
    background-color: #fff;
    border-color: var(--c-lacivert);
    box-shadow: 0 0 0 3px rgba(5, 44, 101, .12);
}

/* Otomatik doldurmanın sarı/mavi vurgusu bastırılır: dolu ve boş alanlar aynı
   görünsün, ayrım YALNIZ odakta olsun. */
.auth .form-control:-webkit-autofill,
.auth .form-control:-webkit-autofill:hover,
.auth .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--c-alan) inset;
    box-shadow: 0 0 0 1000px var(--c-alan) inset;
    -webkit-text-fill-color: var(--c-metin);
    animation-name: onAutoFillStart;   /* JS 'animationstart' ile yakalar */
}

/* Chrome autofill'i JS'e duyurmak için isimli (görünmez) animasyon */
@keyframes onAutoFillStart { from {} to {} }

.auth .form-label {
    font-size: .8rem;
    font-weight: 500;
    color: #4b5563;
    letter-spacing: .01em;
    margin-bottom: .35rem;
}

.auth .form-label.zorunlu::after {
    content: " *";
    color: var(--c-turuncu);
    font-weight: 600;
}

/* Alan altı ipucu (şifre eşleşmesi vb.) */
.alan-ipucu {
    font-size: .76rem;
    margin: .3rem 0 0;
    min-height: 1.05rem;
    line-height: 1.05rem;
}

.alan-ipucu.iyi  { color: #28a745; }
.alan-ipucu.kotu { color: #dc3545; }

.auth .form-control.alan-hatali { border-color: #dc3545; }
.auth .form-control.alan-hatali:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, .14); }
.auth .form-control.alan-gecerli { border-color: #28a745; }

/* ══ E-POSTA DOĞRULAMA KATMANI ═══════════════════════════════════════════════
   Kayıt sonrası açılan ekran. Pencere kütüphanesi (SweetAlert) yerine sayfa içi
   katman: geri sayım, durum satırı ve adres düzeltme formu barındırması gerekiyor
   — bunlar hazır bir uyarı penceresine sığmıyordu. */
.dgr-katman {
    position: fixed;
    inset: 0;
    background: rgba(19, 26, 38, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 1080;
    overflow-y: auto;
}

.dgr-katman[hidden] { display: none; }

.dgr-kart {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(19,26,38,.05), 0 18px 50px rgba(19,26,38,.22);
    padding: 2rem 1.9rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.dgr-tik {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #e9f6f0;
    color: #0b7a55;
    font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.1rem;
}

.dgr-kart h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: .6rem; }
.dgr-metin { font-size: .88rem; color: var(--c-metin-soluk, #68727F); line-height: 1.65; margin: 0; }
.dgr-mail { color: var(--c-metin, #131A26); font-weight: 700; }

.dgr-spam {
    background: #fff6e0;
    border: 1px solid #ead9a8;
    border-radius: 10px;
    padding: .65rem .9rem;
    font-size: .8rem;
    color: #6b4e00;
    margin: 1rem 0 .25rem;
    text-align: left;
    line-height: 1.5;
}

.dgr-durum { font-size: .8rem; color: #0b7a55; margin: .75rem 0 0; font-weight: 600; }
.dgr-durum.kotu { color: #c93b4c; }
.dgr-durum[hidden] { display: none; }

.dgr-butonlar { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }
.dgr-butonlar .btn-auth.dgr-birincil { width: auto; padding-inline: 1.4rem; margin: 0; }

.dgr-duzelt-ac {
    background: none; border: 0; padding: 0;
    margin-top: .9rem;
    font-size: .78rem; font-weight: 600;
    color: var(--c-mavi, #2B59C3);
    cursor: pointer;
    font-family: inherit;
}

.dgr-duzelt-ac[hidden] { display: none; }

.dgr-duzelt { margin-top: 1rem; text-align: left; }
.dgr-duzelt[hidden] { display: none; }
.dgr-duzelt .form-label { font-size: .78rem; }

/* Nötr düğme (DESIGN_RULES: yeşil düğme yok, ikincil aksiyon nötr durur) */
.btn-notr {
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    border-radius: 10px;
    padding: .6rem 1.1rem;
    border: 1px solid var(--c-alan-kenar, #e4eaf2);
    background: #fff;
    color: var(--c-metin, #131A26);
    cursor: pointer;
}

.btn-notr:hover:not(:disabled) { background: #f7f9fc; }
.btn-notr:disabled { opacity: .55; cursor: not-allowed; }

/* Şifre gücü — CEZA satırı. Kriter satırlarından ayrılsın diye sarı: bunlar
   "eksik" değil, "riskli" anlamına gelir (DESIGN_RULES: sarı = uyarı). */
.strength-item.uyari { color: var(--c-uyari, #B27B00); }
.strength-item.uyari i { color: inherit; }

/* Etiket içi açıklama: "(isteğe bağlı — destek için)" */
.etiket-not {
    font-weight: 500;
    color: var(--c-metin-soluk, #98A1AD);
    font-size: .92em;
}

/* ── Form geneli hata satırı ───────────────────────────────────────────────
   Giriş hatası eskiden SweetAlert penceresiyle veriliyordu: kullanıcı formdan
   kopuyor, pencereyi kapatınca hata kayboluyor ve hangi alana döneceği
   belirsiz kalıyordu. Satır formun içinde, butonun hemen üstünde durur. */
.auth-hata {
    font-size: .82rem;
    font-weight: 600;
    color: #b3253a;
    background: #fbeced;
    border: 1px solid #f2cdd2;
    border-radius: 9px;
    padding: .6rem .8rem;
    margin: 0 0 .85rem;
    line-height: 1.45;
}

.auth-hata[hidden] { display: none; }

/* ── "Robot doğrulaması" notu ──────────────────────────────────────────────
   Görünür reCAPTCHA kutusunun yerini alır: kullanıcıya doğrulamanın
   kaybolmadığını, yalnız şüpheli durumda sorulacağını söyler. */
.auth-captcha-not {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--c-metin-soluk, #98A1AD);
    margin: 0 0 1rem;
}

.auth-captcha-not i { font-size: .95rem; }

/* ── Şifre göster/gizle ────────────────────────────────────────────────── */
.password-wrapper { position: relative; }

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #606168;
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
}

.password-toggle:focus-visible {
    outline: 2px solid rgba(5, 44, 101, .35);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Buton ─────────────────────────────────────────────────────────────── */
.btn-auth {
    background-color: var(--c-lacivert);
    border: none;
    color: #fff;
    border-radius: var(--r-alan);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    height: var(--h-kontrol);
    width: 100%;
    transition: background-color .18s, transform .18s, box-shadow .18s;
}

.btn-auth:hover:not(:disabled) {
    background-color: var(--c-lacivert-koyu);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 44, 101, .25);
}

.btn-auth:active:not(:disabled) { transform: none; box-shadow: none; }

.btn-auth:focus-visible {
    outline: 3px solid rgba(5, 44, 101, .35);
    outline-offset: 2px;
}

.btn-auth:disabled {
    background-color: #6c8cbf;
    cursor: not-allowed;
    opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
    .btn-auth { transition: background-color .18s; }
    .btn-auth:hover:not(:disabled) { transform: none; }
}

/* ── Onay kutuları / bağlantılar ───────────────────────────────────────── */
.auth .form-check-input {
    background-color: var(--c-alan);
    border-color: #8d8e93;
}

.auth .form-check-input:checked {
    background-color: var(--c-lacivert);
    border-color: var(--c-lacivert);
}

.auth .form-check-label {
    font-size: .84rem;
    color: #4b5563;
}

.auth .terms-link {
    color: var(--c-lacivert);
    text-decoration: none;
    font-weight: 500;
}

.auth .terms-link:hover { text-decoration: underline; }

.auth .login-link {
    color: var(--c-turuncu);
    font-weight: 500;
    text-decoration: none;
}

.auth .login-link:hover { color: #e96b00; }

.forgot-link {
    font-size: .8rem;
    color: var(--c-lacivert);
    text-decoration: none;
    font-weight: 500;
}

.forgot-link:hover { text-decoration: underline; color: var(--c-lacivert); }

/* Tek öğe kaldı ("Şifremi unuttum"): space-between iki öğe varken hizalıyordu,
   "Beni hatırla" kaldırılınca link sola kaçıyordu → sağa yaslanır. */
.remember-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── Güvenlik doğrulaması ──────────────────────────────────────────────── */
.recaptcha-wrapper {
    display: flex;
    justify-content: center;
    transform: scale(.85);
    transform-origin: center top;
    margin-bottom: -.5rem;
}

@media (max-width: 400px) {
    .recaptcha-wrapper { transform: scale(.78); }
}

/* Widget yüklenemezse kullanıcı boş gri kutuyla baş başa kalıyordu */
.captcha-fallback {
    display: none;
    font-size: .82rem;
    line-height: 1.5;
    color: #8a5300;
    background: #fff8e6;
    border: 1px solid #ffe1a3;
    border-radius: var(--r-alan);
    padding: .7rem .85rem;
}

/* ── Kart alt alanı ────────────────────────────────────────────────────── */
.card-footer-custom {
    background-color: #f7f8fb;
    border-top: 1px solid #eef1f6;
    margin: 1.25rem -1.5rem 0;
    padding: 1rem;
    text-align: center;
}

@media (min-width: 992px) {
    .card-footer-custom { margin: 1.5rem -3rem 0; }
}

/* ── Şifre gücü (yalnız kayıt) ─────────────────────────────────────────── */
.strength-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: .35rem 0 .5rem;
}

.strength-bar span {
    height: 5px;
    border-radius: 999px;
    background: #e3e7ee;
    transition: background-color .2s;
}

.strength-bar[data-level="1"] span:nth-child(-n+1) { background: #dc3545; }
.strength-bar[data-level="2"] span:nth-child(-n+2) { background: #ffc107; }
.strength-bar[data-level="3"] span                 { background: #28a745; }

.strength-item {
    font-size: .78rem;
    color: var(--c-metin-soluk);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.strength-item.valid { color: #28a745; }

/* ── Telefon alanı (intl-tel-input, yalnız kayıt) ──────────────────────── */
.iti { display: flex !important; width: 100%; }
.pad { padding-left: 90px !important; }
