/**
 * applytogo skin — atg-utilities.css
 *
 * KAPSAM (yalnız bu dosya stiller):
 *   1. Genel .badge / pill tabanı (bootstrap.min.css'ten gelen sahipsiz rozetler;
 *      Elastic hiç stillemez, koyu override'ı yoktur)
 *   2. Kişi fotoğrafları: img.contactphoto, #contactpic, .image-upload
 *      (SPEC 2.8 avatar diski; koyu temada brightness YALNIZ gerçek foto img'sine)
 *   3. Etiket/tag çipleri (jquery.tagedit DOM'u) — nötr çip: bg-inset pill + text-soft
 *      (SPEC 2.9; koyu temada Elastic'te orphan)
 *   4. Mikro bölüm başlıkları: .propform/.formcontent legend (SPEC 1.8:
 *      11px / 700 / uppercase / 1px letter-spacing)
 *   5. Taşan şerit mask solması: .table-widget > .content (Elastic'te mask yok)
 *   6. Koyu tema logo düzeltmesi (elastic FIXME'li html.dark-mode #logo geri alınır)
 *   7. Skin seçim widget'ı (.skinselection)
 *   8. About sahipsiz yüzeyler (h2.sysname, p.copyright, p.license, .readtext,
 *      #pluginlist.records-table — Elastic'te sıfır kural)
 *   9. PGP anahtar import diyaloğu (.pgpkeyimport)
 *  10. Dosya bırakma alanı (.file-upload + droptarget durumları)
 *
 * KAPSAM DIŞI (başka dosyaların sahipliği, burada stillenMEZ):
 *   - .recipient-input li.recipient çipleri  -> compose dosyası (burada yalnız desen referansı)
 *   - .folderlist .unreadcount rozeti        -> sidebar/list dosyası
 *   - .formcontent / .propform kapsayıcı geometrisi -> layout/forms dosyası
 *   - #messagebody iframe içeriği            -> embed.css
 *
 * Konvansiyon (ELASTIC-NOTES.md): her top-level kural `html:root` önekli;
 * token'lar html.dark-mode'da kendiliğinden değiştiği için bileşen kuralı TEK kez
 * yazılır. html.dark-mode öneki yalnız koyu-özel istisnalarda.
 */

/* ============================================================
   1. Badge / pill — bootstrap tabanının atg diline çevrilmesi
   (deps/bootstrap.min.css en önce yüklenir; html:root rahat kazanır.
   Bootstrap'in a.badge-*:hover koyulaştırma kuralları eşit özgüllükte
   kaldığı için sıra gereği bizim dolgular hover'da da geçerli kalır.) */

html:root .badge {
    border-radius: var(--atg-radius-pill);
    font-weight: 600;
    transition: color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease),
        border-color var(--atg-dur) var(--atg-ease),
        box-shadow var(--atg-dur) var(--atg-ease);
}

/* Focus halkası — bootstrap'in rgba(renk,.5) gölgeleri yerine tek atg halkası */
html:root a.badge:focus {
    box-shadow: var(--atg-focus-ring);
}

/* Dolu marka çifti (SPEC 2.5: ham --atg-primary DEĞİL, badge çifti) */
html:root .badge-primary {
    background-color: var(--atg-badge-bg);
    color: var(--atg-badge-fg);
}

/* Nötr rozetler = çökük zemin + yumuşak metin (SPEC 0: pasif = bg-inset).
   .badge-light koyu temadaki en görünür bootstrap sızıntısıydı — token'la kapanır. */
html:root .badge-secondary,
html:root .badge-light {
    background-color: var(--atg-bg-inset);
    color: var(--atg-text-soft);
}

/* Semantik rozetler — koyu dolgu + etiket ÇİFT olarak (SPEC 1.4 yasası) */
html:root .badge-success {
    background-color: var(--atg-success-strong);
    color: var(--atg-on-strong);
}

html:root .badge-info {
    background-color: var(--atg-info-strong);
    color: var(--atg-on-strong);
}

html:root .badge-warning {
    background-color: var(--atg-warning-strong);
    color: var(--atg-on-strong);
}

html:root .badge-danger {
    background-color: var(--atg-danger-strong);
    color: var(--atg-on-strong);
}

/* Kontrast rozeti — iki temada da metin hiyerarşisi çifti üzerinden ters yüz */
html:root .badge-dark {
    background-color: var(--atg-text-strong);
    color: var(--atg-text-invert);
}

/* ============================================================
   2. Kişi fotoğrafları / avatar diski (SPEC 2.8)
   Elastic'te monogram yok; foto yoksa AYNI img'nin src'i contactpic.svg
   siluetine döner (inline onerror), sınıf değişmez. Yuvarlak avatar
   zemini = --atg-primary-soft disk; silüet bu diskin üstünde oturur. */

html:root img.contactphoto {
    /* elastic !important eziliyor: html.dark-mode #contactpic, html.dark-mode
       img.contactphoto { background-color:#374549 !important } (dark.less:1119-1122) */
    background-color: var(--atg-primary-soft) !important;
}

/* Adres defteri foto kutusu (contact/contactedit/contactprint) —
   dikdörtgen çerçeve: çökük zemin + çip radius'u */
html:root #contactpic {
    /* elastic !important eziliyor: html.dark-mode #contactpic, html.dark-mode
       img.contactphoto { background-color:#374549 !important } (dark.less:1119-1122) */
    background-color: var(--atg-bg-inset) !important;
    border-radius: var(--atg-radius-chip);
}

/* Foto yükleme widget'i (contactedit'te #contactpic.image-upload) */
html:root .image-upload {
    background-color: var(--atg-bg-inset);
}

/* Foto sil butonu kaplaması — koyu perde + tema-bağımsız beyaz ikon
   (dolu zemin + etiket çifti; iki temada da okunur) */
html:root .image-upload a.button {
    background-color: var(--atg-scrim);
    color: var(--atg-on-strong);
    border-radius: var(--atg-radius-control);
}

/* SPEC 2.8: fotoğraflar koyu temada brightness(90%).
   .changed sınıfı ui.js'in GERÇEK foto sinyalidir (img.src != placeholder);
   img.contactphoto / okunur #contactpic img'de placeholder aynı img'nin svg
   src'i olduğundan filtre oralara BİLİNÇLİ olarak uygulanmadı — silüet de
   kararırdı (keşif hazard notu). */
html.dark-mode .image-upload.changed img {
    filter: brightness(90%);
}

/* ============================================================
   3. Etiket/tag çipleri — jquery.tagedit DOM'u (SPEC 2.9)
   Koyu temada Elastic'te sıfır kural vardı (orphan): açık #f1f3f4 zemin
   sızıyordu. Nötr çip = bg-inset pill + text-soft; token'lar koyuyu kapatır.
   NOT: Elastic'te renkli/hue-tint tag sistemi yok; renk yalnız eklentiden
   inline style gelebilir ve inline ezilemez — hue-tint deseni bu yüzden
   burada uygulanmadı (token çifti --atg-tint-bg/-fg hazır bekler). */

html:root .tagedit-list li.tagedit-listelement-old {
    background-color: var(--atg-bg-inset);
    border-color: var(--atg-border-strong);
    color: var(--atg-text-soft);
    border-radius: var(--atg-radius-pill);
}

/* Çip metni ve kapatma ikonu rengi miras alır; kapatma hover'ı = silme anlamı */
html:root .tagedit-list li.tagedit-listelement-old a {
    color: inherit;
    transition: color var(--atg-dur) var(--atg-ease);
}

html:root .tagedit-list li.tagedit-listelement-old a:hover {
    color: var(--atg-danger-text);
}

/* Yazma inputu — koyu temada gövde rengiyle görünür kalsın
   (elastic'in background:transparent !important geometri kuralına dokunulmaz) */
html:root .tagedit-list li.tagedit-listelement-new input {
    color: var(--atg-text);
}

/* Konteyner odak halkası (SPEC 2.6 form focus deseni) */
html:root .tagedit-list[tabindex="-1"] {
    border-color: var(--atg-primary);
    box-shadow: var(--atg-focus-ring);
}

/* ============================================================
   4. Mikro bölüm başlıkları (SPEC 1.8) — ayarlar/kimlik/klasör formları.
   İki katman ezilir: bootstrap legend{font-size:1.5rem} + elastic
   .formcontent legend,.propform legend{font-weight:700;font-size:1.2em}.
   Değerler SPEC 1.8 literalleridir (token karşılığı yok). */

html:root .propform legend,
html:root .formcontent legend {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--atg-text-muted);
}

/* fieldset.advanced ok ikonu (\f106/\f107) 11px'e küçülmesin;
   cursor/float/toggle davranışı elastic + ui.js'te aynen kalır */
html:root .propform fieldset.advanced > legend:after,
html:root .formcontent fieldset.advanced > legend:after {
    font-size: 1rem;
    letter-spacing: 0;
}

/* Koyu-özel istisna: Elastic'in tek koyu legend kuralı (compose görsel ek
   fieldset'i, dark.less:857-859, özgüllüğü mikro başlık kuralımızı geçer) —
   token diline çekilir ki koyu temada eski renkler sızmasın */
html.dark-mode fieldset.image-attachment legend {
    color: var(--atg-text-muted);
    border-color: var(--atg-border);
}

/* ============================================================
   5. Taşan şerit mask solması (SPEC 2.2 deseni, kanıtlı overflow şeridi)
   Elastic'te hiçbir dosyada mask-image yok — çakışma yaratmaz.
   Gradyan mask'te yalnız alfa kanalı okunur: currentColor=1, transparent=0.
   Salt-CSS sınırı: solma sağ kenarda sabittir (scroll konumunu bilemez). */

html:root .table-widget > .content {
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, currentColor calc(100% - 2rem), transparent);
}

/* Şeridin çerçevesi koyu temada elastic #4d6066 sızdırıyordu — token'a çekilir */
html:root .table-widget {
    border-color: var(--atg-border);
}

/* ============================================================
   6. Koyu tema logo düzeltmesi → atg-brand.css'e taşındı
   (#logo'nun tek sahibi o dosyadır; burada kural bırakılmaz). */

/* ============================================================
   7. Skin seçim widget'ı (ayarlar > arayüz) */

html:root .skinselection .skinthumbnail {
    border: 1px solid var(--atg-border);
    background: var(--atg-bg-card);
    border-radius: var(--atg-radius-control);
}

html:root .skinselection .skinlicense,
html:root .skinselection .skinauthor {
    color: var(--atg-text-muted);
}

/* ============================================================
   8. About sahipsiz yüzeyler (templates/about.html — Elastic'te sıfır kural;
   #pluginlist tablosunda bootstrap .table sınıfı da yok; sıfırdan stillenir) */

html:root .frame-content h2.sysname {
    color: var(--atg-text-strong);
}

html:root .frame-content p.copyright,
html:root .frame-content p.license {
    color: var(--atg-text-muted);
}

html:root .frame-content .readtext {
    color: var(--atg-text);
}

/* Eklenti listesi — kart dili (SPEC 2 kart deseni: bg-card + 1px border +
   radius-card; başlık şeridi bg-inset). Yapı kanıtı: html_table add_header
   ile thead/th üretir (program/actions/settings/about.php:102-109). */
html:root #pluginlist {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--atg-gap);
    background-color: var(--atg-bg-card);
    border: 1px solid var(--atg-border);
    border-radius: var(--atg-radius-card);
    overflow: hidden;
}

html:root #pluginlist th,
html:root #pluginlist td {
    padding: var(--atg-row-pad-y) var(--atg-row-pad-x);
    text-align: left;
    vertical-align: top;
}

/* Başlık satırı = mikro başlık dili + çökük şerit */
html:root #pluginlist thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--atg-text-muted);
    background-color: var(--atg-bg-inset);
}

html:root #pluginlist tbody td {
    border-top: 1px solid var(--atg-border);
}

/* ============================================================
   9. PGP anahtar import diyaloğu (.pgpkeyimport)
   Elastic açıkta #737677, koyuda #637e82 kullanıyordu; tek token kuralı
   iki temayı da kapatır. */

html:root .pgpkeyimport div.key.revoked,
html:root .pgpkeyimport div.key.disabled {
    color: var(--atg-text-muted);
}

/* uid kullanıcı ikonu: elastic açıkta opacity:.25, koyuda 1'e çekiyordu —
   opaklık oyunu yerine tek muted renk (SPEC 0: gri filtre değil, renk adımı) */
html:root .pgpkeyimport li.uid:before {
    color: var(--atg-text-muted);
    opacity: 1;
}

/* ============================================================
   10. Dosya bırakma alanı (.file-upload — import diyalogları + contactedit)
   Kesikli çerçeve token'a, durumlar marka vurgusuna çekilir. */

html:root .file-upload {
    border-color: var(--atg-border-strong);
    border-radius: var(--atg-radius-card);
    transition: border-color var(--atg-dur) var(--atg-ease),
        background-color var(--atg-dur) var(--atg-ease);
}

html:root .file-upload .hint {
    color: var(--atg-text-muted);
}

/* İndirme oku: elastic content:url(data-svg) içine SABİT #d4dbde fill gömer,
   CSS ile renklenemez (koyu çözümü mix-blend-mode idi). Token bazlı renk için
   mask-image + background-color desenine geçilir (hazard notundaki izinli yol);
   data-URI elastic'in kendi download.svg path'idir, fill kaldırıldı — mask'te
   yalnız alfa kanalı okunur. aspect-ratio = viewBox 960/560. */
html:root .file-upload.droptarget:after {
    content: "";
    display: block;
    width: 10rem;
    aspect-ratio: 960 / 560;
    margin: 5rem auto 0 auto;
    background-color: var(--atg-border-strong);
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20560%22%3E%3Cpath%20d%3D%22M690%20245c0%209.2-3.5%2017.9-10.1%2024.9l-175%20175c-6.6%206.6-15.3%2010.1-24.9%2010.1-9.2%200-18.4-3.5-24.9-10.1l-175-175c-6.6-7-10.1-15.8-10.1-24.9%200-4.4.9-9.2%202.6-13.6C277.9%20218.3%20291%20210%20305%20210h87.5V35c0-19.2%2015.8-35%2035-35h105c19.2%200%2035%2015.8%2035%2035v175H655c14%200%2027.1%208.3%2032.4%2021.4%201.7%204.4%202.6%209.2%202.6%2013.6zm0%20245H270V350h-70v140c0%2038.5%2031.5%2070%2070%2070h420c38.5%200%2070-31.5%2070-70V350h-70v140z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20560%22%3E%3Cpath%20d%3D%22M690%20245c0%209.2-3.5%2017.9-10.1%2024.9l-175%20175c-6.6%206.6-15.3%2010.1-24.9%2010.1-9.2%200-18.4-3.5-24.9-10.1l-175-175c-6.6-7-10.1-15.8-10.1-24.9%200-4.4.9-9.2%202.6-13.6C277.9%20218.3%20291%20210%20305%20210h87.5V35c0-19.2%2015.8-35%2035-35h105c19.2%200%2035%2015.8%2035%2035v175H655c14%200%2027.1%208.3%2032.4%2021.4%201.7%204.4%202.6%209.2%202.6%2013.6zm0%20245H270V350h-70v140c0%2038.5%2031.5%2070%2070%2070h420c38.5%200%2070-31.5%2070-70V350h-70v140z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    /* elastic'in koyu mix-blend-mode:soft-light kuralı (dark.less:522-524)
       artık gereksiz — token rengi soldurmasın diye nötrlenir */
    mix-blend-mode: normal;
}

/* Bırakma durumları: belge üzerinde sürükleme = .active, alan üzerinde = .hover
   (app.js:10094/10100) — marka vurgusu, hover yıkaması primary-soft */
html:root .file-upload.droptarget.active,
html:root .file-upload.droptarget.hover {
    border-color: var(--atg-primary);
}

html:root .file-upload.droptarget.hover {
    background-color: var(--atg-primary-soft);
}

html:root .file-upload.droptarget.hover:after {
    background-color: var(--atg-primary);
}