/**
 * applytogo skin — marka varlıkları katmanı (#logo'nun TEK sahibi)
 *
 * Elastic tek bir <img id="logo"> elemanını dört farklı bağlamda gösterir ve
 * kutuları birbirinden çok farklıdır (styles.min.css'ten doğrulanmış):
 *
 *   bağlam                         kutu                              elastic kuralı
 *   ---------------------------    -------------------------------   ------------------------
 *   görev rayı ≥1025px             58px yükseklik, img max-w 78px    .popover-header img
 *   görev rayı 481–1024px          img max-w 35.1px                  @media 481–1024
 *   telefon çekmecesi (.layout-phone) img max-w 222px, flex/center   html.layout-phone
 *   login                          top:16vh, max-h 100px, max-w YOK  .task-login #logo
 *
 * Tek varlık bu dört kutuya sığmaz: 364×82 wordmark 78px'e sıkıştığında
 * okunmaz hale gelir, login'de ise genişlik sınırı olmadığı için 320px'lik
 * form sütununu taşırırdı. Çözüm iki katmanlı:
 *   1) VARLIK SEÇİMİ config'te (`skin_logo`): dar kutularda kare ayıcık markı,
 *      geniş kutularda wordmark. Elastic'in ui.js `screen_logo()` fonksiyonu
 *      varyantları ekran moduna göre zaten takas eder (small = telefon,
 *      dark = koyu tema); biz yalnız doğru dosyaları eşleriz.
 *   2) YERLEŞİM burada: her bağlamda açık genişlik/yükseklik + object-fit,
 *      elastic'in max-width sınırlarının yerine.
 *
 * Ölçüler --atg-logo-* token'larından gelir (atg-tokens.css).
 */

/* =====================================================================
   1) Ortak: logo hiçbir bağlamda esnemez/bozulmaz
   ===================================================================== */

html:root #logo {
    object-fit: contain;
    /* elastic max-height/max-width sınırları bağlam kurallarıyla değiştirilir */
    max-width: none;
    max-height: none;
}

/* Koyu temada logo söndürülmez: elastic dark.less:32-36 tüm #logo'lara
   opacity:.8 uygular (kaynakta FIXME yorumlu geçici çözüm). Bizde koyu tema
   için AYRI varyant dosyaları var (atg-bear-dark / atg-logo-white), o yüzden
   söndürmeye gerek yok — halbuki söndürme kontrastı da düşürürdü. */
html.dark-mode #logo {
    opacity: 1;
}

/* =====================================================================
   2) Görev rayı — masaüstü (≥1025px): kare ayıcık markı
   Elastic kutusu 78px genişlik / 58px yükseklik. Markı 34px'te tutuyoruz:
   58px'lik şeritte üstten-alttan ~12px nefes kalır, ray genişliğine yapışmaz.
   ===================================================================== */

html:root #layout-menu .popover-header {
    /* elastic yalnız text-align:center veriyor; dikey ortalama yok (line-height
       58px ile yapıyor, ama img'de bu güvenilmez) */
    display: flex;
    align-items: center;
    justify-content: center;
}

html:root #layout-menu .popover-header img#logo {
    width: var(--atg-logo-rail);
    height: var(--atg-logo-rail);
    padding: 0;
}

/* =====================================================================
   3) Görev rayı — orta ekran (481–1024px): ray 42px'e daralır
   Elastic aynı kırılımda img'yi 35.1px'e indirir; biz markı 26px'te tutup
   dar rayda da kenar boşluğu bırakıyoruz. Yeni breakpoint YOK — elastic'in
   kendi 481/1024 sınırları (styles.min.css'te mevcut).
   ===================================================================== */

@media screen and (min-width: 481px) and (max-width: 1024px) {
    html:root #layout-menu .popover-header img#logo {
        width: var(--atg-logo-rail-sm);
        height: var(--atg-logo-rail-sm);
    }
}

/* =====================================================================
   4) Telefon çekmecesi (html.layout-phone): geniş kutu → wordmark
   Elastic burada max-width:222px verir ve ui.js `small` varyantını yükler.
   Wordmark 364×82 (oran 4.44) → 30px yükseklikte ~133px genişlik: 222px
   sınırının rahat içinde, çekmece başlığında nefes alır.
   ===================================================================== */

html:root.layout-phone #layout-menu .popover-header img#logo {
    width: auto;
    height: var(--atg-logo-drawer-h);
    max-width: var(--atg-logo-drawer-max);
    padding: 0;
}

/* =====================================================================
   5) Login sayfası: wordmark + taşmayan, kısa ekranda çökmeyen yerleşim
   Elastic ikisini de `position:relative` + `top` ile iter (logo 16vh,
   form 20vh). Bu YALNIZ boyama ofsetidir, akış yüksekliğini değiştirmez —
   iki ofset arasındaki fark aralarındaki görsel boşluğu belirler ve ters
   çevrilirse form logonun üstüne biner. O yüzden `top` hilesini hiç
   kullanmıyoruz: boşluk AKIŞTAN (margin) geliyor, böylece örtüşme
   matematiksel olarak imkânsız ve her ekran yüksekliğinde sabit.
   Ayrıca logoda genişlik sınırı olmadığı için stok wordmark 320px'lik
   form sütununu aşıyordu; max-height ana kısıt, max-width dar telefonda
   (≲360px) devreye giren emniyet kemeri.
   ===================================================================== */

html:root .task-login #logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(var(--atg-logo-login-max), 72vw);
    max-height: var(--atg-logo-login-h);
    /* üst boşluk akışta: kısa ekranda 24px'e iner, uzun ekranda 96px'te durur */
    margin: clamp(24px, 10vh, 96px) auto 0;
    top: 0;
}

html:root .task-login #login-form {
    /* logo ile form arasındaki tek nefes kaynağı (her yükseklikte sabit) */
    margin-top: var(--atg-gap);
    top: 0;
}

/* =====================================================================
   6) Watermark (boş içerik çerçevesi) — ayıcık markı, soluk
   watermark.html kendi <style>'ını taşır; buradaki kural yalnız çerçeveyi
   saran ana belgede etkili olur (iframe zemin rengi).
   ===================================================================== */

html:root #messagecontframe[src*="watermark"],
html:root iframe.contentframe[src*="watermark"] {
    background-color: var(--atg-bg-ground);
}