html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    /* ZekiKod logosu: açık ve koyu temalarda okunur olması için beyaz rozet üzerinde renkli logo */
    background: #ffffff url('../images/zekikod-yatay.png?v=zk3') center / contain no-repeat;
    background-origin: content-box;
    padding: 3px 10px;
    border-radius: 8px;
    width: 170px;
    height: 36px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}


#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}
.dx-blazor-scrollable.dx-scrollable-horizontal .dx-scrollable-content {
    overflow-x: auto !important;
}


/* Popup / pencere / açılır listeler: temadan bağımsız opak zemin (saydam görünme sorunu) */
.dxbl-popup, .dxbl-window, .dxbl-dropdown, .dxbl-popup-body, .dxbl-window-body, .dxbl-dropdown-body,
.dxbl-popup-header, .dxbl-window-header, .dxbl-popup-footer, .dxbl-window-footer,
.dxbl-popup-portal .dxbl-popup-cell > .dxbl-popup, .dxbl-popup-portal .dxbl-popup-cell > .dxbl-window,
.xaf-popup-window, .xaf-dialog, .modal-content {
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #212529);
    opacity: 1;
}
.dxbl-popup, .dxbl-window, .dxbl-dropdown {
    border: 1px solid var(--bs-border-color, #cfd4da) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35) !important;
    backdrop-filter: none !important;
}
.dxbl-popup.dxbl-popup-hidden, .dxbl-window.dxbl-popup-hidden, .dxbl-dropdown.dxbl-popup-hidden { opacity: 0; }
.dxbl-modal-backdrop, .dxbl-popup-backdrop, .modal-backdrop { background-color: rgba(0, 0, 0, .5) !important; }
#components-reconnect-modal { background-color: rgba(0, 0, 0, .6) !important; color: #fff; }


/* Liste kolon başlıkları: dar kolonlarda "..." ile kırpılmak yerine 2-3 satıra bölünsün. */
.dxbl-grid .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-header-content .dxbl-text { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; word-break: normal; overflow-wrap: anywhere; }
.dxbl-grid .dxbl-grid-header { vertical-align: bottom; }
.dxbl-grid .dxbl-grid-header-cell { padding-top: 6px; padding-bottom: 6px; }


/* ============================================================================
   ZekiKod PDKS — giriş ekranı marka uyumu
   2026-09-05 (canlı DOM'a göre düzeltildi; önceki taslak .logon-left-image /
   .left-image gibi DOM'da karşılığı olmayan bir iki-sütun+arka plan görseli
   varsayıyordu — bu bölüm baştan, gerçek kapsayıcılara göre yazıldı)

   GERÇEK DOM (canlı sayfadan doğrulandı):
     .logon-template-header.card.card-header  — sayfa üstü marka şeridi
        .header-logo                          — (bu şeritte beyaz logo)
     .logon-template-body                     — .logon-template-header'ın KARDEŞİ
        .logon-main-container                 — flex (column) kutu
           .logon-main.card                   — beyaz giriş kartı
              .logon-viewsite                 — form: Kullanıcı Adı, Password, .logon-toolbar > "Oturum Aç"
           #zk-demo-giris                     — JS ile eklenen ikinci kart (bkz. zk-demo-giris.css)

   ÖNEMLİ TEKNİK NOT — neden iki katman gerekiyor:
   Aktif tema Bootswatch/Bootstrap **4.5.0**'dır, Bootstrap 5 değil. Dosyada
   #008cba **36 kez sabit yazılıdır**; `var(--primary)` ve `var(--bs-*)` ise
   **0 kez** geçer. Yani yalnız `--bs-primary` tanımlamak Bootstrap düğmelerini,
   bağlantılarını, onay kutusunu DEĞİŞTİRMEZ.
   Buna karşılık DevExpress'in `bootstrap-external.bs5.min.css` köprüsü
   `var(--bs-primary…)` zincirini **246 kez** okur.
   Bu yüzden:
     A KATMANI — :root değişkenleri  -> DevExpress bileşenlerini markaya çeker
     B KATMANI — açık seçici ezmeleri -> Bootstrap 4'ün sabit renklerini ezer
   B katmanındaki seçiciler tahminle değil, css/themes/yeti/bootstrap.min.css
   dosyasından çıkarılmıştır (#008cba geçen 27 kural taranmıştır). Üç kuralı
   (.bg-primary, .border-primary, .text-primary) tema dosyasında !important
   ile yazılıdır — ezen kural da !important TAŞIMAZSA etkisizdir; aşağıda
   üçü de !important ile yazılmıştır.
   ============================================================================ */

:root {
    /* --- Marka paleti: giriş görselinden ve logodan PİKSEL ÖRNEKLEMEYLE alındı --- */
    --zk-lacivert-900: #06224B;   /* degrade zemin — koyu uç      H216 */
    --zk-lacivert-700: #034074;   /* degrade zemin — orta         H208 */
    --zk-marka:        #004891;   /* MARKA MAVİSİ — logo harfleri  H210 */
    --zk-marka-koyu:   #003A75;   /* düğme :hover / :active   H210 */
    --zk-marka-vurgu:  #005B95;   /* logo slogan rengi        H203 */
    --zk-azur:         #0065A5;   /* degrade zemin — açık uç      H203 */

    /* --- Yüzeyler: nötr gri değil, lacivert tonlu (aynı aileden) --- */
    --zk-yuzey:        #FFFFFF;   /* kart gövdesi, ikon çipi */
    --zk-yuzey-2:      #F4F7FB;   /* demo paneli + kartlarının zemini  H214 */
    --zk-yuzey-3:      #E8F0FA;   /* demo kartı :hover              H213 */

    /* --- Metin --- */
    --zk-murekkep:     #0F2440;   /* ana metin — beyazda 15.59:1 */
    --zk-murekkep-2:   #4A5D75;   /* ikincil metin — beyazda 6.15:1 */

    /* --- Kenarlıklar: dekoratif olan ile etkileşimli olan AYRI --- */
    --zk-kenarlik:       #D6E0EC; /* dekoratif ayırıcı — 3:1 gerekmez */
    --zk-kenarlik-guclu: #6F86A6; /* metin alanı/onay kutusu — beyazda 3.73:1 ✓ */

    --zk-odak:         #0065A5;   /* tek tip odak halkası */

    /* --- Ölçek: 4/8/12/16/24/32 — rastgele değer yok --- */
    --zk-r:            16px;      /* kart ve panel köşesi (ORTAK) */
    --zk-r-kucuk:      12px;      /* demo kartı köşesi */
    --zk-genislik:     440px;     /* kart ve panelin ORTAK genişliği */
    --zk-golge-2: 0 2px  8px rgba(6,34,75,.10);
    --zk-golge-3: 0 6px 16px rgba(6,34,75,.16);
    --zk-golge-4: 0 12px 32px rgba(6,34,75,.28);

    /* === A KATMANI: DevExpress köprüsü ===
       bootstrap-external.bs5.min.css bu zinciri 246 kez okur. Bootstrap 4
       teması bunları tanımlamaz, dolayısıyla burada tanımlamak güvenlidir. */
    --bs-primary: #004891;
    --primary: #004891;
    --bs-primary-rgb: 0, 72, 145;

    /* --- GÖREV 1: bildirim (xaf-alert/toast) renkleri ---
       KESİN NEDEN: _content/DevExpress.ExpressApp.Blazor/styles.css içinde
       (~satır 7708) ".alert-info { background-color:
       var(--dxds-color-content-info-default-rest, var(--bs-info)); }" kuralı
       var (info/success/warning/danger'ın hepsi için aynı kalıp). Bu kural,
       _Host.cshtml'de Yeti'nin (Bootstrap 4.5) bootstrap.min.css'inden SONRA
       yüklendiğinden, Yeti'nin aynı özgüllükteki pastel ".alert-info"
       kuralını (background-color:#def2f8) ezer. Ne "--dxds-color-content-
       info-default-rest" ne de "--bs-info" hiçbir stil dosyasında (Yeti eski
       Bootstrap 4 olduğu, site.css da yalnız --bs-primary tanımladığı için)
       tanımlı olmadığından değişken zinciri çözülemez ve background-color
       başlangıç değeri "transparent"e (canlı DOM'da ölçülen rgba(0,0,0,0))
       düşer. Metin zaten DOM'daki "text-white" sınıfından (Yeti:
       .text-white{color:#fff !important}) beyaz gelir — sorun yalnız
       zemindedir. Eksik olan bu BS5 değişkenlerini burada tanımlıyoruz;
       aşağıdaki açık seçiciler ise yükleme sırasından bağımsız ikinci bir
       garanti katmanıdır. Renkler beyaz metinle ≥4.5:1 kontrast sağlar. */
    --bs-info: var(--zk-azur);      /* #0065A5 — beyazda 6.17:1 */
    --bs-info-rgb: 0, 101, 165;
    --bs-success: #146c43;          /* koyu yeşil — beyazda 6.45:1 */
    --bs-success-rgb: 20, 108, 67;
    --bs-warning: #b45309;          /* koyu amber (açık amber değil: beyaz yazı okunsun) — 5.02:1 */
    --bs-warning-rgb: 180, 83, 9;
    --bs-danger: #b91c1c;           /* beyazda 6.47:1 */
    --bs-danger-rgb: 185, 28, 28;
    --bs-bg-opacity: 1;
}

/* ============================================================================
   B KATMANI — Bootstrap 4'ün SABİT #008cba renklerini ezer
   (seçiciler yeti/bootstrap.min.css taranarak çıkarıldı)
   ============================================================================ */

/* B1 — GLOBAL: dolu marka zemini + beyaz metin, ya da kendi (beyaz) zemini
   üzerinde odak halkası/kenarlık. Her iki durumda da kontrast çevredeki
   temadan bağımsızdır — ürün genelinde marka birliği sağlar. */
.btn-primary,
.badge-primary,
.bg-primary,
.progress-bar,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--zk-marka) !important;
    border-color: var(--zk-marka);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--zk-marka-koyu);
    border-color: var(--zk-marka-koyu);
}
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--zk-marka);
    border-color: var(--zk-marka);
}
/* Onay kutusu ("Beni hatırla") — temada custom-control ile boyanıyor */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--zk-marka);
    border-color: var(--zk-marka);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(0, 72, 145, .25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--zk-marka);
}
.custom-range::-webkit-slider-thumb { background-color: var(--zk-marka); }
.custom-range::-moz-range-thumb     { background-color: var(--zk-marka); }
.custom-range::-ms-thumb            { background-color: var(--zk-marka); }
/* Metin alanları: kendi zemini her zaman beyaz (Bootstrap varsayılanı) —
   bu yüzden odak halkası da güvenle GLOBAL yapılabilir. */
.form-control:focus,
.custom-select:focus {
    border-color: var(--zk-marka);
    box-shadow: 0 0 0 .2rem rgba(0, 72, 145, .25);
}

/* B2 — YALNIZ GİRİŞ EKRANI: bilinmeyen zemin üzerinde renkli metin.
   Global ezilirse koyu Bootswatch temalarında (darkly, cyborg, slate…)
   #004891 bağlantılar okunmaz hale gelirdi; bu yüzden kapsam dar tutulur. */
.logon-viewsite a,
.logon-viewsite .btn-link,
.logon-viewsite .text-primary { color: var(--zk-marka) !important; }
.logon-viewsite a:hover,
.logon-viewsite .btn-link:hover { color: var(--zk-marka-koyu) !important; }
.logon-viewsite .border-primary { border-color: var(--zk-marka) !important; }
.logon-viewsite .btn-outline-primary {
    color: var(--zk-marka);
    border-color: var(--zk-marka);
}
.logon-viewsite .btn-outline-primary:hover,
.logon-viewsite .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--zk-marka);
    border-color: var(--zk-marka);
    color: #fff;
}

/* ============================================================================
   C KATMANI — giriş ekranı yüzey sistemi
   ============================================================================ */

/* Zemin: body arka planı temadan SAYDAM geliyor; işletim sistemi koyu
   moddayken sayfa simsiyah görünüyordu. html/body HER ZAMAN açık/markalı bir
   yüzeyde kalsın — bu kural prefers-color-scheme'e bakmaz, dark mod dahil
   hep aynı görünür. Oturum açıldıktan sonra uygulamanın kendi ekranları
   zaten tüm görünür alanı opak yüzeyleriyle kaplar. */
html, body {
    background-color: var(--zk-yuzey-2);
}

/* Giriş ekranı: body, XAF'ın giriş şablonunu (.logon-template-header)
   barındırırken tam sayfa marka degradesi alır + çok hafif diyagonal doku.
   :has() sayesinde yalnız oturum açma ekranında devrededir; oturum
   açıldığında bu eleman DOM'dan kalkınca body yukarıdaki açık yüzeye döner. */
body:has(.logon-template-header) {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 64px),
        linear-gradient(160deg, var(--zk-lacivert-900) 0%, var(--zk-lacivert-700) 55%, var(--zk-azur) 100%);
    background-attachment: fixed;
    min-height: 100%;
}

/* Sayfa üstü marka şeridi: kendi zemini yok, sayfa degradesi doğrudan
   arkasından görünür. */
.logon-template-header.card.card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 32px 24px 8px;
}
/* Beyaz rozet KALDIRILDI: giriş ekranında logo doğrudan degrade üstünde,
   beyaz varyantla görünür. Uygulama içi üst çubuktaki .header-logo (rozet +
   renkli logo) yukarıdaki temel kuraldan etkilenmeye devam eder — ayrım bu
   seçicinin ".logon-template-header" ile sınırlı olmasından gelir. */
.logon-template-header .header-logo {
    background-image: url('../images/zekikod-yatay-beyaz.png?v=zk1');
    background-color: transparent;
    background-origin: content-box;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    width: 196px;
    height: 40px;
}

/* Yerleşim (flex yönü/hizalama/padding) zk-demo-giris.css içinde yönetiliyor
   (.logon-main-container'ı ve #zk-demo-giris'i ORTALAR, .logon-template-body
   için de kenar boşluğunu belirler — o dosya bu CSS'ten SONRA yüklenir);
   burada yalnız zemini şeffaf bırakıyoruz ki sayfa degradesi görünsün. */
.logon-template-body {
    background: transparent;
}

.logon-main.card {
    width: 100%;
    max-width: var(--zk-genislik);
    border: 1px solid var(--zk-kenarlik);
    border-radius: var(--zk-r);
    box-shadow: var(--zk-golge-4);
    background: var(--zk-yuzey);
    overflow: hidden;
    flex: 0 0 auto;            /* sütun flex'te büzülmesin (overflow:hidden min-height'ı sıfırlar) */
}
/* Kart başlığı (varsa) mürekkep renginde — form yalnız alan + düğme
   içeriyorsa bu kural etkisizdir, zararsızdır. */
.logon-main.card .card-title,
.logon-main.card h1, .logon-main.card h2, .logon-main.card h3,
.logon-main.card h4, .logon-main.card h5 { color: var(--zk-murekkep); }

.logon-viewsite {
    padding: 28px 24px 24px;
    color: var(--zk-murekkep);
}
.logon-viewsite .form-control,
.logon-viewsite .dxbl-text-edit {
    min-height: 44px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid var(--zk-kenarlik-guclu);
    color: var(--zk-murekkep);
}
.logon-viewsite .form-control:focus,
.logon-viewsite .dxbl-text-edit:focus-within {
    border-color: var(--zk-marka);
    box-shadow: 0 0 0 3px rgba(0,101,165,.28);
    outline: none;
}
.logon-viewsite .form-label,
.logon-viewsite label { color: var(--zk-murekkep-2); font-weight: 600; font-size: 13px; }

/* Birincil düğme: tam genişlik */
.logon-toolbar { border-top: 1px solid var(--zk-kenarlik); padding-top: 16px; margin-top: 4px; }
.logon-viewsite .logon-toolbar .btn-primary,
.logon-viewsite .btn-primary {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;                   /* #004891 üzerinde beyaz: 8.99:1 (AAA) */
}

/* Tek tip odak halkası — klavye kullanıcısı her yerde aynı göstergeyi görür */
.logon-viewsite :focus-visible {
    outline: 3px solid var(--zk-odak);
    outline-offset: 2px;
}

/* Duyarlı: 480px altında kart iç boşluğu daralır, degrade dolu kalır.
   (Dış kenar boşluğu zk-demo-giris.css'teki .logon-template-body kuralından
   gelir — 16px, tüm genişliklerde sabit.) */
@media (max-width: 480px) {
    .logon-viewsite { padding: 20px 16px; }
}

/* ============================================================================
   GÖREV 1 — XAF bildirimleri (ShowViewStrategy.ShowMessage / .xaf-alert):
   yukarıdaki :root değişkenleri (--bs-info/-success/-warning/-danger) çoğu
   durumda zemini zaten düzeltir; burada AYRICA açık seçicilerle ikinci bir
   garanti katmanı ekleniyor — DevExpress ileride yükleme sırasını veya
   değişken adını değiştirirse bile zemin/köşe/gölge sabit kalsın.
   Konum (.xaf-alerts-stack: position/bottom) buraya DOKUNULMADI — yalnız
   okunabilirlik hedeflendi. Koyu Bootswatch temalarında da zararsızdır:
   renkler dolu ve sabittir, çevredeki temaya bağımlı değildir.
   ============================================================================ */
.xaf-alert.alert-info,
.xaf-alert.alert-success,
.xaf-alert.alert-warning,
.xaf-alert.alert-danger {
    border: 0;
    border-radius: 10px;
    box-shadow: var(--zk-golge-4);
    color: #fff !important;
}
.xaf-alert.alert-info    { background-color: var(--bs-info) !important; }
.xaf-alert.alert-success { background-color: var(--bs-success) !important; }
.xaf-alert.alert-warning { background-color: var(--bs-warning) !important; }
.xaf-alert.alert-danger  { background-color: var(--bs-danger) !important; }

.xaf-alert .xaf-alert-message,
.xaf-alert .xaf-alert-title,
.xaf-alert .xaf-alert-button {
    color: #fff !important;
}

/* ============================================================================
   GÖREV 2 — DevExpress'in hazır şablonundaki tema/boyut seçici paneli
   ("Settings" düğmesi + açılan Size Mode / DevExpress Themes / Bootswatch
   Themes paneli) kaldırıldı.
   ARAŞTIRMA: DevExpress.ExpressApp.Blazor.v26.1.dll içinde belgelenmemiş
   (XML doc'ta yok), dahili bir "ThemeSwitcher" bileşeni bulundu — bu,
   "theme-settings" / "theme-button" / "settings-bar" / "themes-menu" CSS
   sınıflarını koşulsuz üretiyor. IModelOptionsBlazor (Application Model >
   Options) incelendi: FormStyle, RefreshViewOnTabFocus,
   RestoreTabbedMdiLayout, ShowTabImage, UIType, VirtualScrollingEnabled —
   hiçbiri bununla ilgili değil; ShowThemeSwitcher / EnableThemeSwitcher /
   ThemeSwitcherVisible gibi bir toggle DLL'de yok. Program.cs / Startup.cs /
   BlazorApplication.cs içinde de bu bileşeni açan/kapatan bir çağrı yok —
   proje kodunda hiç referans edilmiyor, doğrudan DevExpress'in hazır
   şablonundan geliyor. Desteklenen bir API/Model seçeneği BULUNAMADI; ürün
   tek tema (Yeti) kullandığından panel CSS ile gizleniyor. Giriş sayfasında
   da aynı düğme çıkarsa bu genel seçici onu da kapsar. */
.theme-settings,
.settings-bar {
    display: none !important;
}