/* ============================================================================
   mt-auth.css — Giris ekrani (/LoginPage): Metronic 9 "Branded Sign-in" gorunumu
   ----------------------------------------------------------------------------
   Referans: scratchpad/metronic-ref/dist/html/demo1/authentication/branded/sign-in.html
   Sol yarim: ortalanmis giris karti. Sag yarim: logo + baslik + aciklama +
   ozellik listesi olan markali panel (js/mt-auth.js DOM'a #mt-auth-aside olarak ekler).

   KAPSAM: her kural #logon-template-component altinda (veya onunla ilgili
   body:has() secicisinde). mt-controls.css .dxbl-btn / .dxbl-text-edit'i genel
   olarak Metronic'lestirir (ozgullugu <= 0,3,0); burada YALNIZ giris ekranina
   ozgu boyut/aralik farklarini (38px girdi, 40px dugme, kart duzeni) o genel
   kurallardan daha ozgul (ID kapsamli) secicilerle eziyoruz.
   Yalniz --mt-* token'lari kullanilir; degrade icindeki #FFFFFF disinda yeni
   hex yok (o da --mt-bg token'iyla degistirildi).
   ============================================================================ */

/* --- 0) Zemin: sayfa ve bilesen beyaz (Metronic --background) --- */
body:has(#logon-template-component) {
    background: var(--mt-page-bg);
}

/* ============================================================================
   1) IZGARA DUZENI — sol sutun (baslik + form), sag sutun (marka paneli)
   ============================================================================ */
#logon-template-component {
    display: grid;                 /* XAF'in .app{display:flex} kuralini ID ozgulugu ile ezer */
    grid-template-columns: 1fr;    /* mobil-ilk: tek sutun, aside gizli */
    min-height: 100vh;
    background: var(--mt-page-bg);
}

@media (min-width: 992px) {
    #logon-template-component {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }
    #logon-template-component > .logon-template-header {
        grid-column: 1;
        grid-row: 1;
    }
    #logon-template-component > .logon-template-body {
        grid-column: 1;
        grid-row: 2;
    }
    #logon-template-component > #mt-auth-aside {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* ============================================================================
   2) UST BASLIK (logo satiri)
   ============================================================================ */
#logon-template-component .logon-template-header {
    /* XAF sablonu bu ozelligi !important ile veriyor (xaf-template-rules.txt);
       ayni ozgullukte (ID kapsamli) + !important ile eziyoruz. */
    background: transparent !important; /* XAF'in .logon-template-header !important arka planini ezer */
    border: none;
    border-bottom: none;
    box-shadow: none;
    border-radius: 0;
    justify-content: center;
    padding: 40px 16px 8px;
}

#logon-template-component .logon-template-header .header-logo {
    background-image: url('../../images/sentez-yatay.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 168px;
    height: 36px;
}

/* ============================================================================
   3) GOVDE — ortalanmis form karti + demo/APK kartlari
   ============================================================================ */
#logon-template-component .logon-template-body {
    display: flex;
    flex-direction: column;
    align-items: center;    /* karti yatayda ortala (duzen artik burada; zk-demo-giris.css'teki eski !important kurali kaldirildi) */
    justify-content: flex-start;
    padding: 16px 16px 40px;
    background: transparent;
}

#logon-template-component .logon-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Kapsayicidaki her "kart" (giris karti, demo girisi, APK karti) tam genislikte
   ve sabit kalsin (kucuk yukseklikte sikismasin). */
#logon-template-component .logon-main-container > * {
    flex: none;
    width: 100%;
    margin: 0; /* zk-demo-giris.css / zk-mobil-indir.css kendi dis-bosluklarini artik burada birlestirilmis "gap" ile alir */
}

/* --- Giris karti (Metronic kt-card) --- */
#logon-template-component .logon-main.card {
    max-width: none;             /* XAF'in sabit 410px genisligini kaldirir; genislik kapsayicidan gelir */
    width: 100%;
    background: var(--mt-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
    overflow: visible;           /* acilir/ipucu icerikleri kirpilmasin */
}

#logon-template-component .logon-main.card .card-header {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mt-fg);
    text-align: center;
    padding: 32px 32px 4px;
}

#logon-template-component .logon-main.card .card-body {
    padding: 8px 32px 32px;
}

/* Aciklama metni: "Kullanıcı adınızı ve şifrenizi aşağıya girin." DevExpress'in
   ayri bir "static text" sinifi yok (bs-external.css grep edildi, bulunamadi);
   form duzenindeki ilk ogeyi (baslik/caption'siz statik metin) hedefliyoruz +
   genel ".dxbl-text" yedegi. EMIN DEGILIZ — canli ekranda dogrulanmali. */
#logon-template-component .logon-viewsite .dxbl-fl-item:first-child,
#logon-template-component .logon-viewsite .dxbl-fl-item:first-child .dxbl-text {
    font-size: 13px;
    color: var(--mt-fg-muted);
    text-align: center;
}
#logon-template-component .logon-viewsite .dxbl-fl-item:first-child {
    margin-bottom: 8px;
}

/* Basliklar (Kullanıcı Adı / Şifre) girdilerin USTUNDE, dikey istif: XAF
   >=992px genislikte captioni yana alabiliyor (dxbl-fl-item-horizontal); ID
   ozgulugu (mt-controls / bs-external'daki 0,3,0'i asar) ile sutunda tutuyoruz
   — yalniz gorsel, davranis/degerler degismiyor. */
#logon-template-component .logon-viewsite .dxbl-fl-item {
    flex-direction: column;
    align-items: stretch;
}

#logon-template-component .logon-viewsite label.dxbl-fl-cpt {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-fg-secondary);
    padding: 0 0 4px;
    margin: 0;
    text-align: left;
}

/* Girdiler: giris ekraninda uygulama varsayilanindan (34px) biraz daha buyuk. */
#logon-template-component .logon-viewsite .dxbl-text-edit {
    --dxbl-text-edit-border-radius: var(--mt-radius-sm); /* ayni ozellik, ozgul secici ile deger degistirilir */
    min-height: 38px; /* align-items:stretch sayesinde ic girdi/dugmeler de bu yuksekligi alir */
}

/* ============================================================================
   4) ALT ARAC CUBUGU (Oturum Aç düğmesi)
   ============================================================================ */
#logon-template-component .logon-toolbar {
    border-top: none;
    padding-top: 8px;
}

/* Tam genislik zaten XAF'in kendi kurali ile geliyor (xaf-template-rules.txt:
   .logon-toolbar .dxbl-btn-toolbar/.dxbl-btn-group/.dxbl-toolbar-item/.dxbl-btn{width:100%});
   burada yalniz boyut/tipografiyi Metronic'e cekiyoruz, guvenlik icin genislik
   kuralini da tekrarliyoruz. */
#logon-template-component .logon-toolbar .dxbl-btn-toolbar,
#logon-template-component .logon-toolbar .dxbl-btn-toolbar > .dxbl-btn-group,
#logon-template-component .logon-toolbar .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item {
    width: 100%;
}

#logon-template-component .logon-toolbar .dxbl-btn {
    --dxbl-btn-border-radius: var(--mt-radius-sm);
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================================================
   5) DEMO GIRIS / MOBIL APK KARTLARI — Metronic kt-card kabugu
      (icerik detaylari zk-demo-giris.css / zk-mobil-indir.css icinde token'landi)
   ============================================================================ */
#logon-template-component #zk-demo-giris,
#logon-template-component #zk-mobil-apk-card {
    background: var(--mt-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
    padding: 20px;
}

/* ============================================================================
   6) SAG PANEL — #mt-auth-aside (js/mt-auth.js tarafindan eklenir)
   ============================================================================ */
#mt-auth-aside {
    margin: 20px;
    border-radius: var(--mt-radius-lg);
    border: 1px solid var(--mt-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
    box-sizing: border-box;
    /* Hafif Metronic-vari nokta deseni + kose acisi degrade; hex yok (#FFFFFF
       yerine --mt-bg, sabit mavi yerine --mt-primary-rgb kullanildi). */
    background:
        radial-gradient(circle at 1px 1px, rgba(var(--mt-primary-rgb), .10) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(135deg, rgba(var(--mt-primary-rgb), .08), var(--mt-bg) 60%); /* saydam ton: koyu temada lacivert blok olmasın */
}

#mt-auth-aside .mt-auth-aside-emblem {
    width: 48px;
    height: 48px;
    display: block;
    flex: none;
    margin-top: auto; /* altbilginin auto boslugunu paylasir: icerik grubu dikeyde ortada kalir */
}

#mt-auth-aside .mt-auth-aside-baslik {
    font-size: 24px;
    font-weight: 600;
    color: var(--mt-fg);
    letter-spacing: -0.01em;
    margin: 20px 0 8px;
}

#mt-auth-aside .mt-auth-aside-metin {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mt-fg-muted);
    max-width: 420px;
    margin: 0;
}

#mt-auth-aside .mt-auth-aside-ozellikler {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#mt-auth-aside .mt-auth-aside-ozellikler li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--mt-fg-secondary);
}

#mt-auth-aside .mt-auth-aside-ozellikler li::before {
    content: "\2713"; /* onay isareti */
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mt-primary);
    color: var(--mt-primary-fg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mt-auth-aside .mt-auth-aside-altbilgi {
    margin-top: auto;  /* kalan bosluk amblemin ustuyle esit bolunur: grup ortada, altbilgi en altta (tek auto marj justify-content:center'i etkisiz birakiyordu) */
    padding-top: 32px;
    font-size: 12px;
    color: var(--mt-fg-muted);
}

/* Kucuk ekranda marka paneli gizlenir, form tam genislikte kalir. Bu kural 6)
   bolumundeki display:flex'ten SONRA gelmeli: 1) bolumdeyken eziliyordu ve
   panel 992px altinda formun alt yarisini ortuyordu (900px'de olculdu). */
@media (max-width: 991.98px) {
    #mt-auth-aside {
        display: none;
    }
}

/* ============================================================================
   7) KUCUK EKRAN (<576px)
   ============================================================================ */
@media (max-width: 575.98px) {
    #logon-template-component .logon-template-header {
        padding: 24px 16px 4px;
    }
    #logon-template-component .logon-main.card .card-header {
        padding: 20px 20px 4px;
    }
    #logon-template-component .logon-main.card .card-body {
        padding: 8px 20px 20px;
    }
}