/* ============================================================
   GİRİŞ / KAYIT / ŞİFREMİ UNUTTUM MODALI — GÖRSEL YERLEŞİMİ
   ------------------------------------------------------------
   Backoffice > Ayarlar > Genel > "Giriş / Kayıt Modalı Görselleri"
   > Yerleşim seçeneği (login_bg_layout). includes/header.php her modala
   .am-layout-left ya da .am-layout-top sınıfını ekler ve görselin kendi
   en-boy oranını :root değişkenleri olarak yazar:

     --am-top-ratio   masaüstü üst bandın genişlik/yükseklik oranı
     --am-mob-ratio   mobil üst bandın genişlik/yükseklik oranı

   .am-layout-left  → HİÇBİR kural eklenmez: eski (sol dikey panel) görünüm
                      theme.css'teki kurallarla aynen çalışır.
   .am-layout-top   → masaüstünde görsel modalın ÜSTÜNDE tam genişlikte band;
                      yüksekliği görselin oranından türetilir (esnemez, kırpılmaz;
                      aşırı dikey/dar görsellerde yükseklik güvenli sınırda tutulur).
   Mobil (≤640px)   → görsel zaten formun üstünde bantta; yalnızca bant yüksekliği
                      sabit 150px yerine görselin oranına göre hesaplanır.

   Bu dosya theme.css / theme.purple.css / theme.red.css'ten SONRA yüklenir; tüm
   tasarımlarda (Gold / Purple / Red) ortak çalışır, yalnızca CSS değişkenlerini kullanır.
   ============================================================ */

/* ── MOBİL: bant yüksekliği görsel oranına göre ──
   (theme.css'teki sabit 150px ve kayıt modalındaki sabit 100px yerine; görsel kırpılmaz/esnemez) */
@media (max-width: 640px) {
    html body .auth-modal .am-mob-banner,
    html body #loginModal .am-mob-banner,
    html body #forgotModal .am-mob-banner,
    html body #registerModal .am-mob-banner {
        height: auto !important;
        aspect-ratio: var(--am-mob-ratio, 2.6) !important;
        max-height: 240px !important;
    }
    html body .auth-modal .am-mob-banner img {
        object-position: center center !important;
    }
}

/* ── MASAÜSTÜ: ÜSTTE YERLEŞİM ── */
@media (min-width: 641px) {
    /* Daha dar kart; yükseklik içeriğe göre (theme.css login/kayıt için sabit 620px, şifremi unuttum için 430px verir).
       Seçici özgüllüğü: theme.css'teki "html body #loginModal" kurallarını ezmek için */
    html body #loginModal.am-layout-top,
    html body #forgotModal.am-layout-top,
    html body #registerModal.am-layout-top {
        width: min(460px, 94vw) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(92vh, 880px) !important;
        flex-direction: column !important;
    }
    html body #registerModal.am-layout-top {
        width: min(560px, 94vw) !important;
    }

    /* Üst görsel bandı — oran görselden gelir, esnetme yok */
    .auth-modal.am-layout-top .am-img {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        aspect-ratio: var(--am-top-ratio, 3) !important;
        border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    }
    .auth-modal.am-layout-top .am-img::before,
    .auth-modal.am-layout-top .am-img::after {
        display: none !important;
        content: none !important;
    }
    .auth-modal.am-layout-top .am-img img {
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Form alanı bandın altında kalan yüksekliği doldurur; sığmazsa yalnızca form kayar */
    .auth-modal.am-layout-top .am-form {
        position: static !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }
    html body .auth-modal.am-layout-top .am-form {
        height: auto !important;
    }
    .auth-modal.am-layout-top .am-head {
        position: static !important;   /* kapat butonu modala (görselin köşesine) göre konumlansın */
        padding-top: 22px !important;
    }
    /* Giriş / şifremi unuttum formu: başlıkla aynı hizada, kart genişliğini kullansın */
    html body #loginModal.am-layout-top .am-body,
    html body #forgotModal.am-layout-top .am-body {
        max-width: none !important;
        margin: 0 !important;
        justify-content: flex-start !important;
        padding-top: 18px !important;
        padding-bottom: 22px !important;
    }

    /* Kapat butonu: görselin sağ üst köşesinde, her görselde okunur yuvarlak düğme */
    .auth-modal.am-layout-top .am-close {
        top: 10px !important;
        right: 10px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,0.55) !important;
        color: #fff !important;
        font-size: 14px !important;
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
        transition: background 0.15s !important;
    }
    .auth-modal.am-layout-top .am-close:hover {
        background: rgba(0,0,0,0.8) !important;
        color: #fff !important;
    }
}