/* ==========================================================================
   Giriş / kayıt / şifre sayfaları: Tasarım Dili v3 (Sürüm 3, 2026-09-23)
   auth-app.css'ten SONRA, dm-forms.css'ten ÖNCE yüklenir (layouts/auth-app).
   Genel sitenin dili: fildişi zemin, serif karşılama başlığı + italik vurgu,
   yumuşak kart, hap düğmeler; geniş ekranda marka panelinde demo menünün
   gerçek ekranı (admin → Site İçeriği → "Giriş ve kayıt" görseli).
   Sosyal girişler formun üstünde (auth/includes/socials).
   ========================================================================== */

html { background: #FBF8F4; }
html[data-theme="dark"] { background: #12100E; }

body.auth-app {
    --av-bg: #FBF8F4;
    --av-bg-2: #F3EDE4;
    --av-surface: #FFFFFF;
    --av-line: #E7DED2;
    --av-ink: #1E1A17;
    --av-muted: #5F5851;
    --av-red: var(--dm-primary, #d7193f);
    --av-shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 18px 48px rgba(60, 40, 20, .09);
    --av-serif: 'Playfair Display', 'Noto Serif Display', Georgia, 'Times New Roman', serif;

    /* auth-app.css ve dm-forms.css bu belirteçleri kullanır */
    --auth-bg: var(--av-bg);
    --auth-card: var(--av-surface);
    --auth-text: var(--av-ink);
    --auth-muted: var(--av-muted);
    --auth-border: var(--av-line);
    --auth-radius: 26px;
    --dm-bg: var(--av-bg);
    --dm-bg-2: var(--av-bg-2);
    --dm-surface: var(--av-surface);
    --dm-surface-2: #EFE8DE;
    --dm-border: var(--av-line);
    --dm-text: var(--av-ink);
    --dm-text-muted: var(--av-muted);

    background: var(--av-bg);
    color: var(--av-ink);
}
html[data-theme="dark"] body.auth-app {
    --av-bg: #12100E;
    --av-bg-2: #19160F;
    --av-surface: #1E1B17;
    --av-line: rgba(255, 255, 255, .10);
    --av-ink: #F4EEE7;
    --av-muted: #B9B0A5;
    --av-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .4);
    --dm-surface-2: #26221D;
}
html:lang(ru) body.auth-app { font-family: 'Onest', system-ui, sans-serif; }
html:lang(ar) body.auth-app {
    --av-serif: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', serif;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* Zemin: fildişi + iki yumuşak ışık (çizgili desen kalktı) */
body.auth-app .auth-app-bg {
    background:
        radial-gradient(46% 42% at 88% 0%, rgba(215, 25, 63, .08), transparent 70%),
        radial-gradient(40% 40% at 0% 100%, rgba(230, 150, 80, .08), transparent 70%),
        var(--av-bg);
}
html[data-theme="dark"] body.auth-app .auth-app-bg {
    background:
        radial-gradient(46% 42% at 88% 0%, rgba(232, 60, 95, .12), transparent 70%),
        var(--av-bg);
}

/* Kart */
body.auth-app .auth-app-card {
    padding: 28px 24px;
    border: 1px solid var(--av-line);
    border-radius: 26px;
    background: var(--av-surface);
    box-shadow: var(--av-shadow);
}
html[data-theme="dark"] body.auth-app .auth-app-card { border-color: var(--av-line); box-shadow: var(--av-shadow); }

/* Sekmeler: hap anahtar */
body.auth-app .auth-tabs {
    margin-bottom: 22px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--av-bg-2);
}
body.auth-app .auth-tab {
    padding: 11px 12px;
    border-radius: 999px;
    color: var(--av-muted);
    font-size: 14.5px;
    font-weight: 700;
}
body.auth-app .auth-tab.is-active,
html[data-theme="dark"] body.auth-app .auth-tab.is-active {
    background: var(--av-surface);
    color: var(--av-ink);
    box-shadow: 0 1px 2px rgba(60, 40, 20, .08), 0 4px 12px rgba(60, 40, 20, .06);
}
/* Koyu modda kart ile ray aynı tonda kalıyordu: etkin sekme bir ton açık */
html[data-theme="dark"] body.auth-app .auth-tab.is-active { background: var(--dm-surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* Karşılama: serif başlık */
body.auth-app .auth-welcome { margin-bottom: 20px; min-height: 0; }
body.auth-app .auth-welcome h1 {
    margin: 0 0 6px;
    font: 600 clamp(26px, 6.4vw, 30px)/1.2 var(--av-serif);
    letter-spacing: -.01em;
    color: var(--av-ink);
    text-wrap: balance;
}
body.auth-app .auth-welcome h1 em { font-style: italic; color: var(--av-red); }
body.auth-app .auth-welcome p { font-size: 15px; line-height: 1.5; color: var(--av-muted); }

/* Sosyal girişler: üstte, tam genişlik, alt alta */
body.auth-app .auth-socials { flex-direction: column; gap: 10px; }
/* site-refinements.css body.auth-app :is(.auth-btn, .auth-social-btn) 10px köşe + 14px/500
   yazıyı !important ile dayatıyor; buradaki daha özgül seçiciler onu aşar. */
body.auth-app .auth-socials > .auth-social-btn {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 18px !important;
    border-color: var(--av-line);
    border-radius: 999px !important;
    background: var(--av-surface);
    color: var(--av-ink);
    font-size: 15px !important;
    font-weight: 600 !important;
}
body.auth-app .auth-socials > .auth-social-btn:hover { border-color: var(--av-ink); background: var(--av-surface); color: var(--av-ink); }
html[data-theme="dark"] body.auth-app .auth-socials > .auth-social-btn { background: var(--dm-surface-2); border-color: rgba(255, 255, 255, .16); color: var(--av-ink); }
html[data-theme="dark"] body.auth-app .auth-socials > .auth-social-btn:hover { border-color: var(--av-ink); background: var(--dm-surface-2); color: #fff; }
body.auth-app .auth-divider { margin: 18px 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; }

/* Alanlar: 50px kutu, yumuşak köşe (etiket/ikon konumu --auth-input-h'den hesaplanır) */
body.auth-app .auth-field { --auth-input-h: 50px; }
body.auth-app .auth-field .auth-field-input { border-radius: 14px; }
body.auth-app .auth-form { gap: 14px; }

/* Birincil düğme: hap */
body.auth-app .auth-form .auth-btn {
    height: 52px;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 12px 26px rgba(215, 25, 63, .24) !important;
}
body.auth-app .auth-form .auth-btn:hover { filter: none; background: var(--dm-primary-hover, #b91435); }
body.auth-app .auth-link { font-weight: 600; }
body.auth-app .auth-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--av-muted);
}
body.auth-app .auth-note i { margin-inline-end: 6px; color: var(--av-red); }
body.auth-app .auth-back { margin: 6px 0 0; text-align: center; }

/* Mobil başlık logosu */
body.auth-app .auth-app-header { margin-bottom: 18px; }

/* ---------- Geniş ekran: marka paneli ---------- */
@media (min-width: 900px) {
    body.auth-app .auth-app-container { max-width: 1060px; }
    body.auth-app .auth-app-grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; }
    body.auth-app .auth-app-card { padding: 32px 34px; }

    body.auth-app .auth-brand-panel,
    html[data-theme="dark"] body.auth-app .auth-brand-panel {
        position: relative;
        justify-content: flex-start;
        min-height: 0;
        padding: 40px 40px 0;
        overflow: hidden;
        border: 1px solid var(--av-line) !important;
        border-radius: 28px;
        background:
            radial-gradient(70% 55% at 100% 100%, rgba(215, 25, 63, .10), transparent 70%),
            var(--av-bg-2) !important;
        box-shadow: none !important;
    }
    body.auth-app .auth-brand-logo { margin-bottom: 28px; }
    body.auth-app .auth-brand-logo img { height: 44px; }
    body.auth-app .auth-brand-panel h2,
    html[data-theme="dark"] body.auth-app .auth-brand-panel h2 {
        max-width: 20ch;
        margin: 0 0 14px;
        font: 600 38px/1.12 var(--av-serif);
        letter-spacing: -.015em;
        color: var(--av-ink);
        text-wrap: balance;
    }
    body.auth-app .auth-brand-panel h2 em { font-style: italic; color: var(--av-red); }
    body.auth-app .auth-brand-panel p { max-width: 42ch; margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--av-muted); }
    body.auth-app .auth-brand-features { gap: 10px; }
    body.auth-app .auth-brand-features li,
    html[data-theme="dark"] body.auth-app .auth-brand-features span { color: var(--av-ink); font-size: 15px; font-weight: 600; }
    body.auth-app .auth-brand-features i { border-radius: 12px; background: rgba(215, 25, 63, .10); }

    /* Demo menünün gerçek ekranı: panelin altından yükselen telefon */
    body.auth-app .auth-brand-stage {
        position: relative;
        flex: 1 0 250px;
        margin: 26px 0 0;
    }
    body.auth-app .auth-brand-phone {
        position: absolute;
        top: 0;
        left: 58%;
        width: 236px;
        aspect-ratio: 390 / 844;
        padding: 9px;
        border-radius: 40px;
        background: #15110F;
        box-shadow: 0 30px 70px rgba(60, 40, 20, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .10);
        transform: translateX(-50%) rotate(4deg);
    }
    body.auth-app .auth-brand-phone::before {
        content: '';
        position: absolute;
        top: 17px;
        left: 50%;
        z-index: 2;
        width: 30%;
        height: 20px;
        border-radius: 999px;
        background: #15110F;
        transform: translateX(-50%);
    }
    body.auth-app .auth-brand-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: #0d0b0a; }
    body.auth-app .auth-brand-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    body.auth-app .auth-brand-chip {
        position: absolute;
        top: 64px;
        left: 4%;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px 10px 10px;
        border: 1px solid var(--av-line);
        border-radius: 18px;
        background: var(--av-surface);
        box-shadow: 0 12px 32px rgba(60, 40, 20, .12);
        color: var(--av-ink);
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
    }
    body.auth-app .auth-brand-chip i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: rgba(215, 25, 63, .10);
        color: var(--av-red);
        font-size: 16px;
    }
    body.auth-app .auth-brand-chip b { display: block; font-size: 14px; }
    body.auth-app .auth-brand-chip small { color: var(--av-muted); font-size: 12.5px; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    body.auth-app .auth-brand-phone { animation: avRise .9s .1s cubic-bezier(.16, 1, .3, 1) both; }
    body.auth-app .auth-brand-chip { animation: avPop .55s .9s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes avRise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes avPop { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }

@media (max-width: 360px) {
    body.auth-app .auth-app-card { padding: 22px 16px; }
}