/* Management giriş ekranı — AcenteAdios acente portalının tasarım dili (design projesi
 * "Fiesta Acente Portal") management tarafına taşındı.
 *
 * Kaynak: Orjinart.Adonis.UI.Web.B2C/Content/css/adios-portal.css — token'lar (--ap-*) ve
 * .ap-card / .ap-field / .ap-btn / .ap-note / .ap-header / .ap-auth-* sınıfları oradan birebir
 * alındı. Yalnızca giriş ekranının ihtiyacı olan alt küme burada; portalın tamamı taşınmadı.
 *
 * Bundle'a (BundleConfig.cs "~/Content/css/Bundle") BİLEREK eklenmedi: o bundle tenant klasörüne
 * göre (Content/css/<domain>/...) kuruluyor ve her management sayfasında yükleniyor. Bu dosyayı
 * yalnızca Areas/Management/Views/Welcome/Index.cshtml <link>liyor, dolayısıyla tek ekranı etkiler.
 *
 * İKİ KAPSAM VAR, karıştırma:
 *   .ap-scope — token'lar + bileşenler (kart, alan, buton, şerit). Tasarımın kullanılacağı HER
 *               kök elemana yazılır. Sayfa gövdesi ve şifremi-unuttum modali ayrı ayrı taşır,
 *               çünkü magnific-popup açılırken #modalAddNew'i body'ye TAŞIYOR — sayfa
 *               sarmalayıcısının altında kalan bir kural modal açıldığında düşer.
 *   .ap-login — yalnızca giriş SAYFASININ kabuğu (zemin, başlık şeridi, kart yerleşimi).
 *
 * Kapsam dışına kural YAZILMAZ — tenant teması (bootstrapMan/stylesMan/hippie-blue) ile
 * karışmaması için.
 *
 * ÖNBELLEK: Web.config'de `<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="10:00:00" />`
 * var — tarayıcı statik dosyaları 10 saat boyunca sunucuya sormadan kullanıyor. Bu dosyayı her
 * değiştirdiğinde <link>lerdeki `?v=` sürümünü de artır (view'lardaki ForgotPasswordCssVersion /
 * ilgili link etiketleri), yoksa değişiklik kullanıcıda 10 saat görünmez.
 */

.ap-scope {
    --ap-ink: #101a2c;
    --ap-ink-2: #0d2033;
    --ap-ink-3: #0b1b2c;
    --ap-muted: #6b7a90;
    --ap-muted-2: #8b9ab0;
    --ap-line: #e4e9f0;
    --ap-line-2: #eef1f6;
    --ap-field-line: #dce3ec;
    --ap-field-bg: #fbfcfe;
    --ap-page: #f4f6fa;
    --ap-zebra: #f7f9fc;
    --ap-accent: #14707f;
    --ap-accent-dark: #0f5b67;
    --ap-accent-soft: #eef6f7;
    --ap-ok: #1b7a4b;
    --ap-ok-soft: #e8f6ee;
    --ap-warn: #8a5a00;
    --ap-warn-soft: #fdf3e0;
    --ap-danger: #b3261e;
    --ap-danger-soft: #fdecec;
    --ap-shadow-card: 0 1px 2px rgba(16,26,44,.04);
    --ap-shadow-pop: 0 18px 40px rgba(9,20,36,.22);
    --ap-radius: 18px;
    --ap-radius-sm: 11px;
    /* Portalda 'Titillium Web' kullanılıyor; management BaseMaster2 zaten Roboto yüklüyor,
     * yeni bir font isteği açmamak için onunla devam ediliyor. */
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ap-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- giriş sayfası kabuğu */

/* Kolon akış: mobil sürümdeki footer kısa içerikte sayfanın ortasında kalmasın diye
 * .ap-auth büyüyen kutu. */
.ap-login {
    min-height: 100vh;
    background: var(--ap-page);
    display: flex;
    flex-direction: column;
}

.ap-login .ap-header {
    background: linear-gradient(180deg, var(--ap-ink-2), var(--ap-ink-3));
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(9,20,36,.12);
    color: #fff;
}

.ap-login .ap-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    flex-wrap: wrap;
}

/* Tenant logosu (ServiceBase.GetCustomerInfo().Logo) management'ta bugün de koyu zeminde
 * (.header-top, #1c4c59) gösteriliyor — koyu başlık şeridi logoyu bozmaz. */
.ap-login .ap-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: #fff;
}

    .ap-login .ap-logo img {
        max-height: 40px;
        width: auto;
    }

.ap-login .ap-spacer {
    flex: 1 1 auto;
}

.ap-login .ap-header-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.ap-login .ap-auth {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 24px 80px;
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 767px) {
    .ap-login .ap-auth {
        padding: 24px 16px 40px;
    }
}

/* "Beni Hatırla" kartın alt şeridinde durduğu için form KARTI sarıyor (checkbox post edilmeli).
 * Genişlik sınırı bu yüzden form'da: .ap-auth'un flex çocuğu o. */
.ap-login .ap-auth-form {
    width: 100%;
    max-width: 420px;
}

.ap-login .ap-auth-card {
    width: 100%;
}

/* ---------------------------------------------------------------- kart */

.ap-scope .ap-card {
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-card);
    overflow: hidden;
}

.ap-scope .ap-card-head-tight {
    padding: 20px 22px 4px;
}

.ap-scope .ap-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ap-ink);
}

.ap-scope .ap-card-body {
    padding: 18px 22px 24px;
}

.ap-scope .ap-auth-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--ap-line-2);
    background: var(--ap-zebra);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

/* ---------------------------------------------------------------- alanlar */

.ap-scope .ap-field {
    display: grid;
    gap: 6px;
    margin: 0;
    font-weight: 400;
}

    .ap-scope .ap-field + .ap-field {
        margin-top: 14px;
    }

    .ap-scope .ap-field > span {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--ap-muted-2);
    }

    .ap-scope .ap-field input {
        width: 100%;
        height: 44px;
        padding: 0 14px;
        border: 1px solid var(--ap-field-line);
        border-radius: var(--ap-radius-sm);
        background: var(--ap-field-bg);
        font-size: 14px;
        color: var(--ap-ink);
        box-shadow: none;
    }

        .ap-scope .ap-field input:focus {
            border-color: var(--ap-accent);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(20,112,127,.12);
            outline: none;
        }

/* ---------------------------------------------------------------- buton / eylemler */

.ap-scope .ap-btn {
    height: 44px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .ap-scope .ap-btn:hover,
    .ap-scope .ap-btn:focus {
        background: var(--ap-accent-dark);
        color: #fff;
        text-decoration: none;
    }

/* Mobil giriş ekranında buton tam genişlik (eski `btn full` karşılığı). */
.ap-scope .ap-btn-block {
    width: 100%;
}

.ap-scope .ap-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-scope .ap-link-quiet {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ap-muted);
}

    .ap-scope .ap-link-quiet:hover,
    .ap-scope .ap-link-quiet:focus {
        color: var(--ap-accent);
        text-decoration: none;
    }

/* "Beni Hatırla" — portalda karşılığı yok, giriş kartının alt şeridinde aynı dille duruyor. */
.ap-scope .ap-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ap-muted);
    cursor: pointer;
}

    .ap-scope .ap-check input[type=checkbox] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--ap-accent);
    }

/* ---------------------------------------------------------------- mesaj şeritleri */

.ap-scope .ap-note {
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-zebra);
    font-size: 13px;
    font-weight: 400;
    color: var(--ap-ink);
}

.ap-scope .ap-note-info {
    border-color: #cfe6ea;
    background: var(--ap-accent-soft);
}

.ap-scope .ap-note-warn {
    border-color: #f0dcb4;
    background: var(--ap-warn-soft);
    color: var(--ap-warn);
}

.ap-scope .ap-note-danger {
    border-color: #f3c9c7;
    background: var(--ap-danger-soft);
    color: var(--ap-danger);
}

/* Portalda "başarılı" şeridi yok (--ap-ok token'ı var, .ap-note-ok yok). Şifremi-unuttum
 * modalindeki #resultDiv2 için aynı token'larla kuruldu. */
.ap-scope .ap-note-ok {
    border-color: #bfe3cd;
    background: var(--ap-ok-soft);
    color: var(--ap-ok);
}

/* reCAPTCHA (3. başarısız denemeden sonra) — iframe 304px sabit genişlikte, kart 420px'in
 * altına indiğinde taşmasın diye ölçekleniyor. */
.ap-login .ap-captcha {
    margin-top: 16px;
}

@media (max-width: 400px) {
    .ap-login .ap-captcha .g-recaptcha {
        transform: scale(.87);
        transform-origin: 0 0;
    }
}

/* ---------------------------------------------------------------- mobil footer (yardım masası)
 *
 * Index.Mobile.cshtml'deki footer. Portalın .ap-footer'ının sadeleştirilmiş hali — aynı koyu
 * zemin ve aynı ölçüler, tek sütun. */

.ap-login .ap-mobile-foot {
    background: var(--ap-ink-2);
    color: rgba(255,255,255,.62);
    padding: 28px 24px 32px;
}

.ap-login .ap-mobile-foot-inner {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
}

.ap-login .ap-mobile-foot a {
    color: rgba(255,255,255,.72);
    font-size: 13px;
}

    .ap-login .ap-mobile-foot a:hover {
        color: #fff;
        text-decoration: none;
    }

/* Dil çubuğu yeri (RenderAction yorumda) boş bir <ul>/<li> bırakıyor; temanın liste
 * çizgileri footer'da boş bir şerit gösteriyordu. */
.ap-login .ap-mobile-foot .top-user-area-list,
.ap-login .ap-mobile-foot .top-user-area-list > li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.ap-login .ap-mobile-foot-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 6px;
}

.ap-login .ap-mobile-foot-phone {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------- şifremi unuttum modali */

/* Views/Shared/ForgotPassword(.Mobile).cshtml PAYLAŞILAN bir partial ve düştüğü #modalAddNew
 * kapsayıcısı her sayfada aynı değil: Home/Index kendi div'ini `.mfp-dialog` (beyaz kutu) ile
 * kuruyor, BaseMaster / _Layout ise sınıfsız boş bir div bırakıyor (üstelik </html>'den sonra).
 * Bu yüzden KART İÇERİĞİN KENDİSİNDE — sınıfsız kapsayıcıda içerik magnific'in koyu perdesi
 * üstünde okunmaz kalırdı. */
/* İKİ seçici: partial'ın sarmalayıcısı `class="ap-scope ap-modal"` — iki sınıf AYNI elemanda,
 * alt-eleman seçicisi (.ap-scope .ap-modal) orada eşleşmez. Management'ta dıştaki #modalAddNew
 * de .ap-scope taşıdığı için alt-eleman biçimi yine gerekiyor. */
.ap-scope.ap-modal,
.ap-scope .ap-modal {
    max-width: 420px;
    margin: 0 auto;
    padding: 22px 24px 24px;
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-card);
}

.ap-scope .ap-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* #modalAddNew (management girişi): magnific-popup açılırken elemanı body'ye taşıdığı için
 * .ap-scope'u KENDİSİ taşır. Kartı içerik çizdiğinden buradaki iş temanın `.mfp-dialog`
 * kutusunu (beyaz zemin + 20px 30px padding) SIFIRLAMAK; yoksa kart beyaz kutu içinde
 * beyaz kutu olurdu. */
.ap-scope.ap-modal-shell {
    width: 100%;
    max-width: 468px;
    margin: 40px auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* Tema kuralı `.mfp-close`u beyaz (#fff) ve 44px'lik mutlak bir kutu yapıyor — beyaz kartta
 * görünmüyordu. Başlık satırındaki düğme akışta kalıyor. */
.ap-scope .ap-modal-head .mfp-close {
    position: static;
    width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ap-muted);
    font-size: 22px;
    opacity: 1;
    filter: none;
}

    .ap-scope .ap-modal-head .mfp-close:hover,
    .ap-scope .ap-modal-head .mfp-close:focus {
        background: var(--ap-line-2);
        color: var(--ap-ink);
    }