/* =============================================================================
   Platform4 login ekranı — modern kart tasarımı
   -----------------------------------------------------------------------------
   Bu dosya SADECE PLATFORM4 derlemesinde, LogonTemplateContent2.OnLoad içinden
   sayfa header'ına eklenir. Klasik ürün bu dosyayı hiç indirmez, dolayısıyla
   klasik login ekranı bit bit bugünkü haliyle kalır.

   Tüm kurallar .p4-login (kart) ve .p4-login-msg (hata alanı) altına
   scope'lanmıştır. XAF modeline (AuthenticationStandardLogonParameters_DetailView)
   ve 2FA akışına hiç dokunulmaz — değişiklik tamamen görsel katmandadır.

   DevExpress sınıf adlarının tema son eki vardır (ör. dxeEditArea_LogoCrmDefault).
   Bu yüzden hedefleme [class*="dxeEditArea"] gibi prefix seçicilerle yapılır;
   müşteri başka skin seçse de kurallar çalışmaya devam eder.
   ============================================================================= */

/* Marka kırmızısı #CC122D — Logo'dan gelen kurumsal kod. Önceki değer
   (#C8102E) ekrandan örneklenmiş bir yaklaşıklıktı; kod gelince birebir
   değerle değiştirildi. Türevler aynı renkten üretildi: HSL uzayında yalnızca
   parlaklık kaydırılıyor (43.5% taban), böylece ton ve doygunluk sabit kalıyor
   ve koyu/açık varyantlar aynı kırmızı olarak okunuyor. */
:root {
    --p4-red: #CC122D;
    --p4-red-dark: #9F0E23;
    --p4-red-soft: rgba(204, 18, 45, 0.12);
    --p4-ink: #1F2430;
    --p4-muted: #6B7280;
    --p4-border: #E3E6EC;
    --p4-card: #FFFFFF;
    --p4-radius: 20px;

    /* Gövde yazı tipi: ürünün geri kalanıyla aynı kalsın diye Source Sans Pro. */
    --p4-font: 'Source Sans Pro', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

    /* Kalın metinler için ayrı yığın.
       Neden: scripts/google/css/googleFont.css yalnızca 400 ağırlığını yüklüyor;
       600/700 dosyası yok. Bu yüzden etiket ve buton gibi kalın metinlerde
       tarayıcı "sahte kalın" üretiyor ve harfler bulanıklaşıyor. Sistem yığını
       (Windows'ta Segoe UI Semibold) gerçek 600 ağırlığına sahip olduğu için
       bu metinler net çıkar.

       Alternatif, Source Sans Pro'nun 600/700 woff2 dosyalarını repoya eklemekti;
       o çözüm googleFont.css'i değiştirdiği için KLASİK ürünün de her sayfasını
       etkiliyordu ve bilinçli olarak tercih edilmedi. Burada etki yalnızca
       Platform4 login ekranıyla sınırlı.

       Yazı tipi farkı pratikte görünmez: yalnızca büyük harfli, harf aralığı
       açılmış küçük metinlerde kullanılıyor. */
    --p4-font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   1) Sayfa zemini
   Arka plan görseli (gorselfonP4.jpg) html üzerinde, code-behind'daki --bg-image
   ile geliyor; ona dokunmuyoruz. Sadece kartın desenin üzerinde okunaklı durması
   için çok hafif bir vinyet ekliyoruz.
   -------------------------------------------------------------------------- */
/* Sarmalayıcı zincirinin boşlukları sıfırlanır. Login.aspx yapısı:
   body.Dialog > #PageContent > form#form1 > #Content > (kart)
   Buradaki herhangi bir varsayılan margin/padding, .p4-login'in 100vh'siyle
   toplanıp sayfada gereksiz kaydırma çubuğu çıkarır. Bu dosya yalnızca
   Platform4 login sayfasında yüklendiği için gövde seviyesi sıfırlama
   burada güvenlidir. */
html,
body,
body > #PageContent,
body > #PageContent > form,
body > #PageContent > form > #Content {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body {
    overflow-x: hidden;
}

.p4-login {
    position: relative;
    margin: 0 !important;
    /* Alt boşluk üstten fazla: kart matematiksel ortanın ~30px yukarısına oturur.
       Göz tam ortadaki bir nesneyi hep "biraz aşağıda" algılar; optik ortalama
       bu yanılsamayı düzeltir. */
    padding: 32px 16px 92px 16px;
    min-height: 100vh;
    /* dvh, mobil tarayıcılarda adres çubuğu yüzünden yanlış hesaplanan vh'yi
       düzeltir; desteklenmeyen tarayıcı üstteki vh satırında kalır. */
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: var(--p4-font);
    /* Kırmızı zemin üstündeki beyaz kartta metin kenarları daha net çıksın. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.p4-login::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.32) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Zeminde çok yavaş süzülen iki yumuşak ışık. Ters yönde ve farklı hızda
   hareket ettikleri için desen sabit dursa bile zemin "canlı" durur.
   İkisi de yalnızca transform animasyonu kullanır — GPU'da compose edilir,
   layout/paint tetiklemez, arka plan görselini hiç yeniden çizdirmez.
   İkinci ışık body::before üzerindedir: bu dosya yalnızca Platform4 login
   sayfasında yüklendiği için gövde seviyesi seçici burada güvenlidir. */
.p4-login::after {
    content: '';
    position: fixed;
    top: -30vh;
    left: -20vw;
    width: 70vw;
    height: 120vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
    z-index: 0;
    animation: p4-drift 26s ease-in-out infinite alternate;
}

body::before {
    content: '';
    position: fixed;
    top: 10vh;
    right: -30vw;
    width: 85vw;
    height: 110vh;
    background: radial-gradient(circle, rgba(255, 190, 190, 0.13) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: 0;
    animation: p4-drift-2 38s ease-in-out infinite alternate;
}

@keyframes p4-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(28vw, 8vh, 0) scale(1.18);
    }
}

@keyframes p4-drift-2 {
    from {
        transform: translate3d(0, 0, 0) scale(1.1);
    }

    to {
        transform: translate3d(-34vw, -12vh, 0) scale(1);
    }
}

/* -----------------------------------------------------------------------------
   2) Kart
   Soldaki 600px'lik stok fotoğraf hücresi gizlenir; kart tek kolona iner.
   Markup'a dokunmadan, sadece display:none ile.
   -------------------------------------------------------------------------- */
.p4-login .LogonImageContent {
    display: none !important;
}

.p4-login .LogonMainTable {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: 100%;
    /* Düz beyaz yerine çok hafif dikey degrade — kart yüzeyi yassı durmuyor. */
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
    border-radius: var(--p4-radius) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;

    /* Gölge siyah değil koyu bordo (rgba(45,0,9)) — kırmızı zeminde siyah gölge
       gri/çamurlu okunur, ortamın renginde bir gölge ise gerçek ışık gibi durur.
       Tek katman yerine yakından uzağa artan bulanıklıkta katmanlar: doğal
       yumuşama bundan geliyor. Son iki katman kenar işi — kılcal açık halka
       kartı sert bir border çizmeden zeminden ayırır, üstteki iç çizgi ise
       ışığın yukarıdan geldiğini söyler. */
    box-shadow:
        0 1px 2px rgba(60, 0, 12, 0.10),
        0 3px 6px rgba(60, 0, 12, 0.10),
        0 8px 16px rgba(60, 0, 12, 0.12),
        0 28px 56px rgba(45, 0, 9, 0.38),
        0 0 90px rgba(255, 205, 210, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    animation: p4-rise 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* NOT: Burada bir zamanlar backdrop-filter ile "cam" efekti vardı. İki sebeple
   kaldırıldı:
   1) Zemin çok doygun kırmızı olduğu için kart pembeye çalıyordu.
   2) backdrop-filter kartın arkasını sürekli anlık görüntüleyip bulanıklaştırır.
      Arkada animasyonlu katmanlar varken ve butona hover ile yeni bir boyama
      tetiklendiğinde bu anlık görüntü geçersizleşiyor; compositor toparlayana
      kadar kartın arkasında yanlış renkte dikdörtgen bir bölge kalıyordu.
   Kart artık tamamen opak — hem daha temiz beyaz hem de bu artefakt yok. */

/* .ascx'te <tr> üzerinde inline duran sert gölge (0 0 30px 3px #444) nötrlenir. */
.p4-login .LogonMainTable > tbody > tr,
.p4-login .LogonMainTable > tr {
    box-shadow: none !important;
}

.p4-login .LogonContentCell {
    position: relative;
    padding: 44px 40px 34px 40px !important;
    vertical-align: top;
}


@keyframes p4-rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.975);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   3) Logo (model'deki LogonLogo / Platform4'te LogoEdgeCrm görseli)
   -------------------------------------------------------------------------- */
.p4-login img[id*="LogonLogo"] {
    display: block;
    margin: 0 auto 30px auto;
    max-width: 210px;
    max-height: 64px;
    width: auto;
    height: auto;
    animation: p4-logo 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 180ms;
}

@keyframes p4-logo {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   4) XAF layout tablosunun sıkıştırılması
   DetailView layout'u iç içe tablolarla render edilir; hepsini tam genişliğe
   çekip dikey ritmi biz veriyoruz.
   -------------------------------------------------------------------------- */
/* Gerçek yapı (üründen alınan HTML ile doğrulandı):

     div.Layout.LayoutEditMode              <- TABLO DEĞİL, div
       table.GroupContent...CardGroupBase   cellpadding="1"
         td.CardGroupContent
           div.Item                         <- logo
           div.Item.LogonItemClassCSS       <- her alan bir Item
             table.topCL                    cellpadding="1"
               tr > td.Caption              <- etiket
               tr > td > table              <- editör
           table.GroupContent               <- "beni hatırla" | dil satırı
             td > div.firstEditorContainer  (%41, İÇİ BOŞ)
             td > div.lastEditorContainer   (%59, dil)

   Dikey ritim .Item üzerinden kurulur. DevExpress'in kendi boşluklarına ve
   cellpadding="1" değerlerine bağımlı kalmamak için hepsi sıfırlanıp ölçü
   buradan yeniden verilir — böylece DX tema CSS'i ne derse desin sonuç aynı. */
.p4-login .Layout {
    width: 100% !important;
}

.p4-login table.GroupContent,
.p4-login table.topCL,
.p4-login [class*="dxeTextBox"],
.p4-login [class*="dxeButtonEdit"] {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    padding: 0 !important;
}

/* cellpadding="1" hücrelere 1px ekliyor; ritmi tamamen biz belirleyelim. */
.p4-login table.GroupContent > tbody > tr > td,
.p4-login table.topCL > tbody > tr > td {
    padding: 0 !important;
}

/* Alanlar arası tek boşluk kaynağı. */
.p4-login .Item {
    margin: 0 !important;
    padding: 0 0 20px 0 !important;
}

.p4-login .LogonItemClassCSS {
    padding-bottom: 20px !important;
}

/* Dil ve "beni hatırla" satırındaki etiket hücreleri boş; yer kaplamasınlar. */
.p4-login td.Caption:empty {
    display: none !important;
}

/* "BENİ HATIRLA" KABI: BOŞSA KALDIRILIR, DOLUYSA YERİNDE KALIR
   -----------------------------------------------------------------------------
   Satır iki kaptan oluşuyor: firstEditorContainer (%41, "beni hatırla") ve
   lastEditorContainer (%59, dil seçici).

   İlk yazımda "Platform4'te bu kap hiçbir zaman doldurulmuyor" varsayılmıştı
   (cnGlobals.IsOnlyIdmActive() → checkBox.Visible = false) ve buna güvenilip
   dil kabına koşulsuz width:100% verilmişti. Varsayım her kurulumda doğru
   değil: yalnız-IDM kapalıyken onay kutusu geliyor ve satır %41 + %100 oluyor;
   dil hapı kartın sağ kenarını aşıp kayık görünüyor. Test ortamında görülen
   buydu, geliştirme ortamında görülmemesinin sebebi de bu ayar farkı.

   Boşluk kararı artık VARSAYIMLA değil, ÖLÇÜMLE veriliyor: login-p4.js
   satırdaki gerçek durumu okuyup data-p4-remember="empty|filled" yazıyor.
   Aşağıdaki kurallar yalnızca o niteliğe bakar.

   Neden CSS :has() değil: kap boşken gizleme kuralı :has() ile yazılabilir ama
   dil kabının genişliği KARDEŞ kabın doluluğuna bağlı ve bu ilişki :has() ile
   de kurulabilse bile eski tarayıcıda kural tamamen düşerdi — düştüğü an
   görünüm yine bozuk olurdu. JS zaten bu ekranda çalışıyor (göz düğmesi) ve
   DevExpress yeniden çizdiğinde MutationObserver ile tekrar uyguluyor. */
.p4-login .firstEditorContainer[data-p4-remember="empty"] {
    display: none !important;
}

/* Boş kap gizlenince dil kabı kartın soluna kayıyor ve sağa yaslı hap tam
   ortaya düşüyordu; tam genişlikte hap yeniden kartın sağ kenarına oturur. */
.p4-login .lastEditorContainer[data-p4-remember="empty"] {
    width: 100% !important;
}

/* Onay kutusu gerçekten varken satır iki kaba bölünmüş durumda: dil kabı kendi
   payını (%59) korur, hap yine kendi kabının sağına yaslanır. */
.p4-login .lastEditorContainer[data-p4-remember="filled"] {
    width: auto !important;
}

/* Alan etiketleri: küçük, harf aralığı açık, üstte duran modern label. */
.p4-login td.Caption,
.p4-login .LayoutItemCaption {
    display: block !important;
    height: auto !important;
    padding: 0 0 7px 2px !important;
    text-align: left !important;
    white-space: nowrap;
    font-family: var(--p4-font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--p4-muted);
    transition: color 160ms ease;
}

/* Alan odaklandığında üstündeki etiket markaya döner.
   Etiket ve editör table.topCL içinde ardışık iki satırdadır; kural bu yüzden
   "editörü içeren satırın hemen öncesindeki satırın etiket hücresi" der.
   :has() desteklenmeyen tarayıcıda kural hiç eşleşmez — etiket gri kalır,
   başka hiçbir şey etkilenmez (kademeli iyileştirme). */
.p4-login tr:has(+ tr [class*="dxeEditArea"]:focus) > td.Caption,
.p4-login tr:has(+ tr table[class*="dxeButtonEdit"]:focus-within) > td.Caption {
    color: var(--p4-red);
}

/* Boşluk .Item üzerinden verildiği için editör hücresi tamamen sıfırlanır.
   (WebEditorCell yalnızca bazı alanlarda var — dil seçicide yok — bu yüzden
   ritim ona bağlanamaz.) */
.p4-login .WebEditorCell {
    padding: 0 !important;
}

/* -----------------------------------------------------------------------------
   5) Metin kutuları (kullanıcı adı / şifre)
   Mevcut inline stildeki width:300px !important ve height:10px burada ezilir.
   -------------------------------------------------------------------------- */
.p4-login table[class*="dxeTextBox"],
.p4-login table[class*="dxeButtonEdit"] {
    width: 100% !important;
    background: transparent !important;
}

.p4-login table[class*="dxeTextBox"] {
    border: 0 !important;
}

.p4-login table[class*="dxeTextBox"] td.dxic,
.p4-login table[class*="dxeButtonEdit"] td.dxic {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
}

.p4-login [class*="dxeEditArea"] {
    box-sizing: border-box;
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 1px solid var(--p4-border) !important;
    border-radius: 10px !important;
    background: #FBFCFD !important;
    font: 15px var(--p4-font) !important;
    color: var(--p4-ink) !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.p4-login [class*="dxeEditArea"]:hover {
    border-color: #CFD5DF !important;
}

.p4-login [class*="dxeEditArea"]:focus {
    outline: none !important;
    background: #FFFFFF !important;
    border-color: var(--p4-red) !important;
    box-shadow: 0 0 0 4px var(--p4-red-soft) !important;
}

.p4-login [class*="dxeEditArea"]::placeholder {
    color: #9AA1AC;
}

/* -----------------------------------------------------------------------------
   5b) Şifre göster/gizle düğmesi (login-p4.js tarafından eklenir)
   Düğme alanın içine, sağ kenara oturur; alanın sağ boşluğu buna göre açılır.
   Kurallar yalnızca JS düğmeyi gerçekten eklediyse devreye girer — script
   çalışmazsa alan normal görünümünde kalır.
   -------------------------------------------------------------------------- */
.p4-login td.dxic[data-p4-eye-cell] {
    position: relative;
}

.p4-login input[data-p4-eye="1"] {
    padding-right: 48px !important;
}

/*
    TARAYICININ KENDI GOZ DUGMESI KAPATILIYOR.

    Belirti (test ekibinde goruldu, gelistirme makinesinde degil):
    sifre alaninin saginda YAN YANA IKI goz duruyor.

    Sebep tarayici farki. Edge (ve IE) her <input type="password">
    alanina kendi "sifreyi goster" dugmesini ::-ms-reveal olarak
    ekliyor; Chrome eklemiyor. Bizim dugmemiz onun soluna oturunca iki
    tane goruluyor. Ayni ailedeki ::-ms-clear de (X dugmesi) kullanici
    adi alaninda ucuncu bir ikon cikariyordu.

    Yerlesik dugme yerine kendimizinki birakiliyor: gorunumu tema
    disinda, konumu bizim actigimiz sag boslugu bilmiyor ve tiklandiginda
    alanin type'i disaridan degisiyor - kendi durumumuzla (aria-pressed,
    ikon) tutarsiz kaliyordu.
*/
.p4-login input::-ms-reveal,
.p4-login input::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.p4-login .p4-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #98A0AC;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}

.p4-login .p4-eye:hover {
    background: #F0F2F5;
    color: var(--p4-red);
}

.p4-login .p4-eye:focus-visible {
    outline: none;
    background: #F0F2F5;
    color: var(--p4-red);
    box-shadow: 0 0 0 3px var(--p4-red-soft);
}

.p4-login .p4-eye[aria-pressed="true"] {
    color: var(--p4-red);
}

/* Şifre alanındaki tarayıcı otomatik doldurma sarısını bastır. */
.p4-login [class*="dxeEditArea"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #FBFCFD inset !important;
    -webkit-text-fill-color: var(--p4-ink) !important;
}

/* -----------------------------------------------------------------------------
   6) Dil seçici (ASPxComboBox)
   Metin kutusundan farklı olarak burada çerçeveyi <input> değil, editörün kendi
   <table>'ı taşır — yoksa ok butonu çerçevenin dışında kalır. Bu yüzden gövde
   table'a, şeffaf iç alan da input'a verilir.
   [class*="dxeButtonEdit"] aynı zamanda ok butonunun hücresiyle (dxeButtonEdit-
   Button...) de eşleştiği için seçiciler table[...] / td[...] ile daraltılmıştır.
   -------------------------------------------------------------------------- */
/* Dil seçici bilinçli olarak metin alanlarından daha hafif: nadiren dokunulan
   ikincil bir kontrol, kullanıcı adı/şifre ile aynı görsel ağırlıkta olmamalı.
   Bu yüzden daha kısa, daha dar ve şeffaf zeminli. Sağa yaslanır — böylece sağ
   kenarı üstteki alanların sağ kenarıyla hizalanır. */
/* Dil seçici bilinçli olarak metin alanlarından daha hafif: nadiren dokunulan
   ikincil bir kontrol, kullanıcı adı/şifre ile aynı görsel ağırlıkta olmamalı.
   Ayrım renkle kuruluyor — asıl alanlar beyaz + belirgin kenarlık, bu ise
   yumuşak gri bir hap. Sınırı yine de nettir; sadece daha sessizdir.
   Sağa yaslanır, böylece sağ kenarı üstteki alanlarla aynı hatta oturur. */
/* border-collapse MUTLAKA separate olmalı: collapse edilmiş tablolarda tarayıcı
   border-radius'u yok sayar. Yukarıdaki ritim kuralı tüm tablolara collapse
   veriyor, burada geri alınıyor — yoksa kutu köşeli çıkıyor. */
.p4-login table[class*="dxeButtonEdit"] {
    box-sizing: border-box;
    width: 92px !important;
    height: 28px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    border: 1px solid #E7EAEF !important;
    border-radius: 14px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    background: #F4F5F8 !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.p4-login table[class*="dxeButtonEdit"]:hover {
    border-color: #D9DEE6 !important;
    background: #EDEFF3 !important;
}

.p4-login table[class*="dxeButtonEdit"]:focus-within {
    background: #FFFFFF !important;
    border-color: var(--p4-red) !important;
    box-shadow: 0 0 0 4px var(--p4-red-soft) !important;
}

/* Gövde table'da olduğu için içteki metin alanı tamamen şeffaflaşır. */
.p4-login table[class*="dxeButtonEdit"] [class*="dxeEditArea"] {
    height: 26px !important;
    padding: 0 0 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    color: #4A5260 !important;
    cursor: pointer;
}

.p4-login table[class*="dxeButtonEdit"] [class*="dxeEditArea"]:focus {
    box-shadow: none !important;
}

/* Ok, gövdenin sağ kenarına yapışmasın diye içeri alınır. */
.p4-login td[class*="dxeButtonEditButton"] {
    width: 18px !important;
    padding: 0 6px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: right;
}

/* Ok görseli kutunun yüksekliğini zorlamasın — aksi hâlde 28px'lik hap,
   görselin doğal boyu kadar uzuyor. */
.p4-login td[class*="dxeButtonEditButton"] img {
    max-height: 14px;
    max-width: 14px;
    width: auto;
    height: auto;
    margin-right: 2px;
    vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   7) "Beni hatırla" + dil satırı
   -------------------------------------------------------------------------- */
.p4-login [class*="dxichLabel"],
.p4-login [class*="dxeBase"] label {
    font-size: 13px !important;
    color: var(--p4-muted) !important;
    cursor: pointer;
}

.p4-login [class*="dxichSys"] {
    vertical-align: middle;
}

/* Onay kutusu tarayıcı mavisi yerine marka kırmızısına boyanır. */
.p4-login input[type="checkbox"] {
    accent-color: var(--p4-red);
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   7b) Dil seçicinin AÇILIR LİSTESİ
   Bu popup DevExpress tarafından <body> altına, kartın DIŞINA render edilir;
   bu yüzden .p4-login ile scope'lanamaz. Dosya zaten yalnızca Platform4 login
   sayfasında yüklendiği için kapsam pratikte yine bu ekranla sınırlıdır.

   Neden gerekli: .ascx içindeki mevcut inline CSS açılır pencereyi
   41.08px x 20px'e, içindeki listeyi ise 100px x 80px'e sabitliyor — yani liste
   penceresinden taşıyor. Aşağıdaki kurallar bu sabit ölçüleri serbest bırakır.
   ("body " öneki specificity içindir: inline <style> body'de, bu dosya head'de
   olduğu için eşitlikte inline kazanırdı.)
   -------------------------------------------------------------------------- */
body [class*="dxpcDropDown"],
body [class*="dxeDropDownWindow"] {
    width: auto !important;
    min-width: 180px !important;
    height: auto !important;
    border: 1px solid var(--p4-border) !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
    text-align: left !important;
    overflow: hidden;
}

/* LİSTE PENCEREYİ DOLDURUR
   -----------------------------------------------------------------------------
   İlk yazımda buradaki her ölçü "auto" idi. Bu, .ascx'in sabitlediği ölçülerden
   kurtulmak için doğruydu ama yarım kaldı: pencerenin min-width'i 180px, listenin
   auto genişliği ise içeriğe göre 74px çıkıyor (tarayıcıdan ölçüldü). Sonuç,
   solda dar bir metin sütunu ve sağında ~106px boş beyaz alan olan bir kutu —
   ekranda "içi boş bir pencere" gibi duruyordu.

   İkinci belirti aynı kaynaktan: seçili satırın vurgusu da 74px'te bitiyordu,
   yani vurgu satırın tamamını değil bir parçasını boyuyordu.

   Zincirin tamamı %100'e alınıyor: pencere -> mainDiv -> listBox -> dxlbd ->
   DevExpress'in iç tablosu. Aradaki tek bir katman auto kalırsa alttakiler de
   onun daralmış genişliğine sıkışıyor.

   YÜKSEKLİK auto KALIYOR: pencere içeriğine göre uzasın, üç dil de görünsün. */
body [class*="dxpcDropDown"] .dxpc-mainDiv,
body [class*="dxpcDropDown"] .dxpc-contentWrapper {
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
    background: #FFFFFF !important;
}

body [class*="dxeListBox"],
body [class*="dxeListBox"] div.dxlbd,
body [class*="dxeListBox"] table {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
    border: 0 !important;
    border-radius: 0 !important;
}

body [class*="dxeListBoxItem"] {
    padding: 9px 14px !important;
    color: var(--p4-ink) !important;
    font: 14px var(--p4-font) !important;
    text-align: left !important;
    cursor: pointer;
}

body [class*="dxeListBoxItem"]:hover,
body [class*="dxeListBoxItemHover"] {
    background: #F5F6F8 !important;
}

body [class*="dxeListBoxItemSelected"] {
    background: var(--p4-red-soft) !important;
    color: var(--p4-red-dark) !important;
}

/* -----------------------------------------------------------------------------
   8) Birincil aksiyon: GİRİŞ butonu (PopupActions ActionContainerHolder)
   ASPxMenu <ul class="dx"><li class="dxm-item"><div class="dxm-content"> üretir.
   Menü tam genişliğe alınır, ilk aksiyon dolu kırmızı, varsa sonrakiler outline.
   (Login görünümünde Cancel gizli olduğu için tek aksiyon vardır; iki aksiyonlu
   "şifremi unuttum" görünümünde ikincisi outline düşer.)
   -------------------------------------------------------------------------- */
/* DevExpress menü elemanlarına kendi kenarlıklarını veriyor (ayraç çizgileri).
   Kartın içinde bunlar başıboş yatay çizgiler olarak görünüyordu — butonun
   altında ve "Şifremi unuttum"un yanında. Menü altındaki HER elemanda kenarlık
   sıfırlanır; istediğimiz tek çizgiyi (alt bilgi ayracı) aşağıda kendimiz
   yeniden veriyoruz. */
.p4-login [id$="PopupActions_Menu"],
.p4-login [id$="PopupActions_Menu"] *,
.p4-login [id$="ActionContainerHolder1_Menu"],
.p4-login [id$="ActionContainerHolder1_Menu"] * {
    border: 0 !important;
}

.p4-login [id$="PopupActions_Menu"] {
    width: 100% !important;
    margin-top: 12px;
    border: 0 !important;
    background: transparent !important;
}

.p4-login [id$="PopupActions_Menu"] ul.dx {
    display: flex !important;
    gap: 12px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item {
    flex: 1 1 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content,
.p4-login [id$="PopupActions_Menu"] li.dxm-item > a.dxm-content {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    padding: 13px 18px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #D6152F 0%, var(--p4-red) 55%, var(--p4-red-dark) 100%) !important;
    /* Gölge parlak kırmızı değil koyu bordo ve dar: beyaz kart üzerinde parlak
       kırmızı bir hale "leke" gibi okunuyordu. Koyu ton + az yayılım derinlik
       hissi verir, kirlilik değil. */
    box-shadow: 0 2px 5px rgba(120, 8, 26, 0.22), 0 6px 14px rgba(120, 8, 26, 0.13);
    color: #FFFFFF !important;
    font: 600 14px/1 var(--p4-font-ui) !important;
    letter-spacing: 0.8px;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content span,
.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content .dx-vam {
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* filter: brightness() yerine doğrudan daha açık bir degrade — filtre tüm
   katmanı yeniden boyatıp arkadaki animasyonlu katmanlarla artefakt üretiyordu. */
.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content:hover {
    background: linear-gradient(180deg, #E31432 0%, #CC122D 55%, #AD0F26 100%) !important;
    box-shadow: 0 3px 7px rgba(120, 8, 26, 0.26), 0 9px 20px rgba(120, 8, 26, 0.18);
    transform: translateY(-1px);
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(120, 8, 26, 0.24);
}

/* Butonun içindeki aksiyon ikonu (ve global img[class^="dx"] ok1.svg hack'i)
   düz bir buton için gereksiz — gizlenir. */
.p4-login [id$="PopupActions_Menu"] img {
    display: none !important;
}

/* İkinci ve sonraki aksiyonlar (ör. "Vazgeç") outline stil. */
.p4-login [id$="PopupActions_Menu"] li.dxm-item:not(:first-child) > .dxm-content {
    background: #FFFFFF !important;
    border-color: var(--p4-border) !important;
    box-shadow: none;
    color: var(--p4-muted) !important;
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item:not(:first-child) > .dxm-content span {
    color: var(--p4-muted) !important;
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item:not(:first-child) > .dxm-content:hover {
    filter: none;
    border-color: #CFD5DF !important;
    background: #F7F8FA !important;
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   9) Alt linkler: "Şifremi unuttum" (ActionContainerHolder1)
   -------------------------------------------------------------------------- */
.p4-login [id$="ActionContainerHolder1_Menu"] {
    width: 100% !important;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #EFF1F4 !important;
    background: transparent !important;
}

.p4-login [id$="ActionContainerHolder1_Menu"] ul.dx {
    display: flex !important;
    justify-content: center;
    gap: 18px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.p4-login [id$="ActionContainerHolder1_Menu"] li.dxm-item {
    flex: 0 0 auto;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    text-decoration: none !important;
}

.p4-login [id$="ActionContainerHolder1_Menu"] li.dxm-item > .dxm-content {
    padding: 0 !important;
    background: transparent !important;
    color: var(--p4-muted) !important;
    font: 400 13px/1.4 var(--p4-font) !important;
    text-decoration: none !important;
    transition: color 140ms ease;
}

.p4-login [id$="ActionContainerHolder1_Menu"] li.dxm-item > .dxm-content span {
    color: inherit !important;
    text-decoration: none !important;
}

.p4-login [id$="ActionContainerHolder1_Menu"] li.dxm-item > .dxm-content:hover,
.p4-login [id$="ActionContainerHolder1_Menu"] li.dxm-item > .dxm-content:hover span {
    color: var(--p4-red) !important;
    text-decoration: none !important;
}

.p4-login [id$="ActionContainerHolder1_Menu"] img {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   10) Hata mesajı (ErrorInfoControl) — karttan bağımsız, kartın üstünde durur.
   -------------------------------------------------------------------------- */
/* Akıştan çıkarılır: hata çıktığında kart aşağı kaymasın ve sayfa kaymasın diye
   baloncuk kartın üstünde serbest durur. Genişlik içeriğe göre (auto) — kısa
   mesajda dar, uzun mesajda genişleyen bir baloncuk oluşur. */
.p4-login-msg {
    position: absolute;
    /* Pencerenin üst kenarına değil, kartın hemen üstüne konumlanır.
       Kart optik ortalama nedeniyle merkezin 30px yukarısında ve ~556px
       yüksekliğinde; 380px bunun üstüne ~20px boşluk bırakacak şekilde seçildi.
       max() alçak pencerede baloncuğun ekran dışına taşmasını engeller.
       İlk satır, max() desteklemeyen tarayıcılar için yedektir. */
    top: 26px;
    top: max(24px, calc(50% - 380px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: auto;
    max-width: calc(100% - 32px);
    font-family: var(--p4-font);
}

.p4-login-msg .ErrorMessage {
    display: block;
    max-width: 520px;
    padding: 15px 26px 15px 50px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    box-shadow: 0 14px 34px rgba(120, 0, 20, 0.30),
                0 2px 6px rgba(0, 0, 0, 0.12),
                inset 0 0 0 1px rgba(200, 16, 46, 0.16);
    animation: p4-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Ünlem rozeti .p4-login-msg üzerinde durur (kesin <div>), .ErrorMessage
   üzerinde değil — XAF'ın ErrorInfoControl'ü tablo render ederse tablo
   üzerindeki ::before tarayıcılarda tutarsız davranıyor.
   :has() ile yalnızca gerçekten hata varken çizilir; desteklenmeyen tarayıcıda
   rozet çıkmaz, baloncuk yine düzgün görünür. */
/* Rozet bir metin karakteri ("!") olarak çiziliyordu; yazı tipine, satır
   yüksekliğine ve baseline'a bağlı olduğu için daire içinde kayıyor ve
   orantısız görünüyordu. Artık SVG: hiçbir font ölçüsüne bağlı değil,
   her sistemde birebir aynı çıkar. */
.p4-login-msg:has(.ErrorMessage)::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.40);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23CC122D'/%3E%3Crect x='10.7' y='5.4' width='2.6' height='8.6' rx='1.3' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='17.6' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Kendi keyframe'i var: rozet translateY(-50%) ile ortalandığı için
       p4-pop'un "transform: none" bitişi ortalamayı silerdi. */
    animation: p4-pop-badge 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 90ms;
}

@keyframes p4-pop-badge {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.p4-login-msg .ErrorLabel,
.p4-login-msg .ErrorMessage span {
    color: var(--p4-red-dark) !important;
    font-size: 13.5px !important;
    line-height: 1.45;
}

/* Hata metnindeki adresler (aday kullanıcı → paasadmin yönlendirmesi, XAFCRM-26345).
   Şablondaki script düz metin URL'yi <a>'ya çevirir; kırmızı metnin içinde ayırt
   edilebilsin diye mavi. :visited de aynı renkte kalır — kırmızı baloncuğun içinde
   mor bir link tutarsız görünüyor. */
.p4-login-msg .ErrorLabel a,
.p4-login-msg .ErrorLabel a:visited,
.p4-login-msg .ErrorMessage span a,
.p4-login-msg .ErrorMessage span a:visited {
    color: #1155CC !important;
    text-decoration: underline;
    word-break: break-word;
}

.p4-login-msg .ErrorLabel a:hover,
.p4-login-msg .ErrorMessage span a:hover {
    text-decoration: none;
}

/* Hafif "zıplayarak" belirme — baloncuk hissi buradan geliyor. */
@keyframes p4-pop {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.90);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   11) 2FA popup uyumlandırması (XAFCRM-25525'te eklenen modal)
   Yeni kartla aynı dili konuşsun diye: nötr kenarlık + kırmızı odak, kırmızı
   birincil buton. Davranışa (JS/postback) dokunulmaz.
   -------------------------------------------------------------------------- */
/* Bulanıklaştırma yerine biraz daha koyu bir perde: backdrop-filter burada tüm
   ekranı, üstelik zeminde animasyonlu katmanlar dururken bulanıklaştırıyordu —
   en pahalı hâli. Görsel sonuç neredeyse aynı, artefakt riski yok. */
#twoFactorOverlay {
    background: rgba(24, 8, 12, 0.55) !important;
}

#twoFactorOverlay .tfa-modal {
    border-radius: var(--p4-radius) !important;
    padding: 36px 40px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34) !important;
}

/* Kalın metinlerde sahte kalın oluşmasın diye burada da gerçek 600/700'lü yığın. */
#twoFactorOverlay .tfa-title,
#twoFactorOverlay .tfa-btn {
    font-family: var(--p4-font-ui) !important;
}

#twoFactorOverlay .tfa-box {
    border: 1px solid var(--p4-border) !important;
    border-radius: 10px !important;
    background: #FBFCFD;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

#twoFactorOverlay .tfa-box:focus {
    border-color: var(--p4-red) !important;
    box-shadow: 0 0 0 4px var(--p4-red-soft);
    background: #FFFFFF;
}

/* Birincil buton, kartın GİRİŞ butonuyla aynı davranışta: hover'da hafif
   yükselme + tek seferlik ışık geçişi. */
#twoFactorOverlay #tfaSubmit {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #D6152F 0%, var(--p4-red) 55%, var(--p4-red-dark) 100%) !important;
    box-shadow: 0 2px 5px rgba(120, 8, 26, 0.24), 0 6px 14px rgba(120, 8, 26, 0.15);
    border-radius: 10px !important;
    letter-spacing: 0.8px;
    transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#twoFactorOverlay #tfaSubmit::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.60) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-150%) skewX(-18deg);
    pointer-events: none;
}

#twoFactorOverlay #tfaSubmit:hover {
    background: linear-gradient(180deg, #E31432 0%, #CC122D 55%, #AD0F26 100%) !important;
    box-shadow: 0 3px 7px rgba(120, 8, 26, 0.30), 0 9px 20px rgba(120, 8, 26, 0.20);
    transform: translateY(-1px);
}

#twoFactorOverlay #tfaSubmit:hover::after {
    animation: p4-shine 720ms ease;
}

#twoFactorOverlay #tfaSubmit:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(120, 8, 26, 0.26);
}

/* Modal da baloncuk gibi zıplayarak gelsin. */
#twoFactorOverlay.tfa-visible .tfa-modal {
    animation: p4-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#twoFactorOverlay #tfaCancel {
    background: #FFFFFF !important;
    border: 1px solid var(--p4-border) !important;
    border-radius: 10px !important;
    color: var(--p4-muted) !important;
    letter-spacing: 0.8px;
}

#twoFactorOverlay #tfaCancel:hover {
    background: #F7F8FA !important;
}

/* -----------------------------------------------------------------------------
   12) Hareket
   Kart yükselirken içerik sırayla belirir; buton üzerine gelindiğinde tek seferlik
   ışık geçer. Satırlarda yalnızca opacity animasyonu var — <tr> üzerinde transform
   tarayıcılarda tutarsız davranabildiği için bilinçli olarak kullanılmadı.
   -------------------------------------------------------------------------- */
.p4-login .Item {
    animation: p4-fade 460ms ease both;
}

.p4-login .Item:nth-child(1) { animation-delay: 150ms; }
.p4-login .Item:nth-child(2) { animation-delay: 220ms; }
.p4-login .Item:nth-child(3) { animation-delay: 280ms; }
.p4-login .Item:nth-child(n+4) { animation-delay: 330ms; }

.p4-login [id$="PopupActions_Menu"] {
    animation: p4-rise-sm 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 430ms;
}

.p4-login [id$="ActionContainerHolder1_Menu"] {
    animation: p4-fade 460ms ease both;
    animation-delay: 520ms;
}

@keyframes p4-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes p4-rise-sm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Butonun üzerine gelindiğinde bir kez geçen ışık.
   Animasyon `left` ile değil `transform` ile yapılır: `left` bir yerleşim
   özelliğidir, her karede yeniden akış/boyama tetikler ve arkadaki animasyonlu
   katmanlarla birleşince görünür artefakt üretiyordu. transform ise doğrudan
   compositor'da işlenir. */
.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content {
    position: relative !important;
    overflow: hidden !important;
}

/* Genişlik ve opaklık bilinçli olarak yüksek: doygun kırmızı üzerinde %38'lik
   dar bir bant 720ms'de geçtiğinde gözle fark edilmiyordu. Hover'ı li üzerinden
   tetikliyoruz — DevExpress fare durumunu li üzerinde yönettiği için daha
   güvenilir. */
/* Işık geçişi `animation` ile değil `transition` ile yapılır.
   Neden: DevExpress menü öğesini fare olaylarında yeniden çizebiliyor; bu
   durumda keyframe animasyonu ya baştan başlıyor ya hiç tetiklenmiyordu.
   Kendi bilgisayarımdaki taklit önizlemede çalışan animasyonun üründe
   görünmemesinin sebebi buydu. Transition ise elemanın mevcut durumundan
   hedef duruma gider; yeniden çizim olsa bile hover durumu korunduğu sürece
   sonuç aynıdır. Hover kalkınca `transition: none` ile anında başa döner,
   böylece geri süzülme görünmez. */
.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.60) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-150%) skewX(-18deg);
    transition: none;
    pointer-events: none;
}

.p4-login [id$="PopupActions_Menu"] li.dxm-item:hover > .dxm-content::after,
.p4-login [id$="PopupActions_Menu"] li.dxm-item.dxm-hovered > .dxm-content::after,
.p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content:hover::after {
    transform: translateX(230%) skewX(-18deg);
    transition: transform 850ms cubic-bezier(0.25, 0.6, 0.35, 1);
}

/* Kullanıcı sistem düzeyinde hareket azaltma istediyse tüm animasyonlar kapanır. */
@media (prefers-reduced-motion: reduce) {
    .p4-login::after,
    body::before,
    .p4-login .LogonMainTable,
    .p4-login img[id*="LogonLogo"],
    .p4-login .Item,
    .p4-login [id$="PopupActions_Menu"],
    .p4-login [id$="ActionContainerHolder1_Menu"],
    .p4-login-msg .ErrorMessage {
        animation: none !important;
    }

    /* Rozette animasyon kapatılırken ortalama transform'u korunmalı. */
    .p4-login-msg:has(.ErrorMessage)::before {
        animation: none !important;
        opacity: 1;
        transform: translateY(-50%);
    }

    #twoFactorOverlay.tfa-visible .tfa-modal {
        animation: none !important;
    }

    .p4-login [id$="PopupActions_Menu"] li.dxm-item > .dxm-content::after,
    #twoFactorOverlay #tfaSubmit::after {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   13) Küçük ekranlar
   -------------------------------------------------------------------------- */
/* Alçak pencereler (dizüstü, yarım ekran, tarayıcı araç çubukları açıkken):
   kart yine de sığsın diye boşluklar ve alan yükseklikleri kısılır. */
@media (max-height: 760px) {
    .p4-login {
        padding: 20px 16px 48px 16px;
    }

    .p4-login .LogonContentCell {
        padding: 32px 40px 26px 40px !important;
    }

    .p4-login img[id*="LogonLogo"] {
        margin-bottom: 22px;
        max-height: 54px;
    }

    .p4-login .WebEditorCell {
        padding-bottom: 16px !important;
    }

    .p4-login [class*="dxeEditArea"] {
        height: 46px !important;
    }

    .p4-login table[class*="dxeButtonEdit"] {
        height: 30px !important;
    }

    .p4-login table[class*="dxeButtonEdit"] [class*="dxeEditArea"] {
        height: 28px !important;
    }

    .p4-login [id$="ActionContainerHolder1_Menu"] {
        margin-top: 16px;
        padding-top: 14px;
    }
}

@media (max-width: 520px) {
    .p4-login {
        padding: 24px 14px;
        align-items: flex-start;
    }

    .p4-login .LogonMainTable {
        width: 100%;
    }

    .p4-login .LogonContentCell {
        padding: 32px 24px 26px 24px !important;
    }

    #twoFactorOverlay .tfa-modal {
        padding: 28px 20px !important;
    }

    #twoFactorOverlay .tfa-boxes {
        gap: 8px;
    }

    #twoFactorOverlay .tfa-box {
        width: 40px;
        height: 54px;
        font-size: 24px;
    }
}