/* ═══════════════════════════════════════════════════════════════════════════════════════
   FORA TEMA — web'in görsel dili (2026-09-19)
   📖 docs/spec-web-altyapi-v1.md · karar: Serhat, 2026-09-19 ("önce tasarım dili, sonra ekranlar")

   🔑 NEREDEN GELDİ: değerlerin TAMAMI MAUI'nin ölçülmüş paletinden alındı —
   `Maui/ForaYazilim.Maui.ForaMobil/Resources/Styles/Colors.xaml`. O dosyadaki her ton
   WCAG kontrastı ÖLÇÜLEREK seçilmiş (bazıları üç turda ayarlanmış); burada yeniden
   "göze güzel gelen" bir renk türetmek o işi çöpe atardı.

   ⚠️ KURAL: buraya YENİ bir ton, kendi zemininde kontrastı ölçülmeden eklenmez
   (MAUI tarafındaki palet kuralının aynısı — docs/IKON_SISTEMI.md).

   ⚠️ KURAL 2: yön bağımlı CSS YASAK (`margin-left`, `text-align: right` …). Mantıksal
   karşılıklarını kullan: `margin-inline-start`, `text-align: end`. Kapı:
   `WebYerellestirmeKapilariTests.CSS_yon_BAGIMSIZ` — Arapça bugün metin olarak destekleniyor,
   RTL yerleşimi sonraya bırakıldı ve bu disiplin onu "bayrak meselesi" olarak tutuyor.

   Yükleme sırası (Components/App.razor): bootstrap → app.css → chat.css → erp.css →
   DevExpress teması → **bu dosya**. En sonda olması bilinçli: Bootstrap ve DevExpress'in
   kendi değerlerini bu dosya EZER. Değişken tanımları sıradan bağımsız çözülür, bu yüzden
   erp.css de bu token'ları kullanabilir.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Aksan (birincil eylem) — beyaz metinle 6,6:1 ── */
    --fora-aksan: #22628A;
    --fora-aksan-basili: #3D7FA8;
    --fora-aksan-acik: #7FB5D9;       /* koyu zeminlerdeki eşi */

    /* ── Nötr gövde ── */
    --fora-metin: #4a4a4a;            /* MAUI `Primary` — değer metni */
    --fora-metin-koyu: #3a3a3a;
    --fora-metin-acik: #fef9f5;       /* koyu zemin üstü metin */
    --fora-metin-ikincil: #374151;
    --fora-form-etiket: #6B625A;      /* sıcak nötr; değerden BASKIN OLMAMALI (hiyerarşi) */
    --fora-notr-cerceve: #7F8C97;     /* ikincil düğme sınırı — 3,4:1 (WCAG 1.4.11 ≈ 3:1) */

    /* ── Zeminler ── */
    --fora-sayfa: #fef9f5;            /* sıcak kırık beyaz */
    --fora-yuzey: #ffffff;            /* kart/tablo yüzeyi */
    --fora-yuzey-alt: #ede8e5;        /* MAUI popup zemini — yan panel/araç çubuğu */
    --fora-yuzey-ust: #d2cecc;
    --fora-baslik-zemin: #1f0e00;     /* sayfa/popup başlığı — çok koyu kahve */
    --fora-kart-cerceve: #E8DFD7;
    /* 🔑 Kart, sayfa zemininden ΔE 3,2 uzakta ⇒ tek başına "kart" hissi VERMEZ (MAUI'de
       ölçüldü). Ayıran şey fill değil KENAR: ince sıcak çerçeve + yumuşak gölge. */
    --fora-kart-golge: 0 1px 2px rgba(31, 14, 0, .06), 0 2px 8px rgba(31, 14, 0, .04);

    /* ── Bölüm şeridi (form bölüm başlıkları) ── */
    --fora-serit-zemin: #DED5CA;
    --fora-serit-metin: #3F3A36;
    --fora-serit-ust-isik: #FFFDFB;
    --fora-serit-alt-golge: #9A8F82;
    /* Vurgulu şerit = özet/TOPLAMLAR satırı; hiyerarşi: özet > bölüm başlığı > satır */
    --fora-serit-vurgu-zemin: #6B625A;
    --fora-serit-vurgu-aksan: #A8CFE6;

    /* ── Sekme çubuğu ── */
    --fora-sekme-serit: #D2C6B6;
    --fora-sekme-metin: #4A443E;
    --fora-sekme-metin-secili: #3F3A36;

    /* ── Ayraçlar ── */
    --fora-ayrac: #DDD4C9;            /* form satırı ayracı (zebranın YERİNE geçti) */
    --fora-ayrac-koyu: #C6BAAC;

    /* ── Satır durumları ──
       🔑 `aktif` (klavye imleci) ⟂ `isaretli` (çoklu seçimde onaylanacak) AYRI renklerdir:
       ikisi aynı olsaydı "imlecin durduğu satır" ile "seçtiğim satır" karışırdı (§7.25 kararı).
       Aktif zemin MAUI'nin `AksanCipZemin`'i (#DFECF5) — palette ZATEN ölçülmüş bir ton. */
    --fora-satir-hover: #f6efe9;
    --fora-satir-secili: #E7F0F6;
    --fora-aktif-zemin: #DFECF5;
    --fora-isaretli-zemin: #DDF2E7;
    --fora-isaretli-aktif-zemin: #C8EEDD;
    /* Karşılama modu: sepetten görsel olarak AYRIŞMALI (Serhat md.4) — ayrım yalnız renk
       değil, sol kenarda kalın şerit de var (renk körlüğü). */
    --fora-karsilama-zemin: #FFF6EC;

    /* ── Sayı renkleri (anlam taşır) ── */
    --fora-sayi-negatif: #9E4A28;     /* negatif HATA değil DURUM — iptal kırmızısı değil */
    --fora-sayi-pozitif: #0F7150;
    --fora-vurgu-para: #A85A00;       /* satır başına EN FAZLA İKİ vurgu: brüt fiyat + miktar */
    --fora-vurgu-miktar: #0F7150;

    /* ── Durum renkleri ── */
    --fora-yikici: #B3261E;           /* "geri alınamaz" — alarm kırmızısı DEĞİL */
    --fora-uyari-sari-zemin: #FFF3CD;
    --fora-uyari-sari-metin: #664D03; /* kendi zemininde 7,21:1 */
    --fora-uyari-kirmizi-zemin: #FFD5D1;
    --fora-uyari-kirmizi-metin: #8C1D18; /* 6,81:1 */
    --fora-basari-zemin: #C8EEDD;
    --fora-basari-metin: #0F7150;

    /* ── Cari ekstre borç/alacak dili ── */
    --fora-ekstre-borc-serit: #B3261E;
    --fora-ekstre-borc-zemin: #FFD5D1;
    --fora-ekstre-alacak-serit: #0F7150;
    --fora-ekstre-alacak-zemin: #C8EEDD;
    --fora-ekstre-karma-serit: #8A8078;
    --fora-ekstre-karma-zemin: #EFE7DF;

    /* ── Tipografi ──
       🔑 MASAÜSTÜ YOĞUNLUĞU: MAUI'nin etiket punto'su 16 (parmakla dokunulan telefon);
       web'de aynı punto ekranı boşaltır ve satır sayısını düşürür. Taban 14 px, etiket
       12,5 px. Karar: Serhat 2026-09-19 — "işlev birebir, yerleşim masaüstüne uyarlanır". */
    --fora-yazi-ailesi: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Naskh Arabic",
                        "Helvetica Neue", Arial, sans-serif;
    --fora-punto-taban: .875rem;
    --fora-punto-etiket: .78rem;
    --fora-punto-kucuk: .8rem;
    --fora-punto-baslik: 1.05rem;

    /* ── Ölçü/boşluk ── */
    --fora-radius: 6px;
    --fora-radius-kucuk: 4px;
    --fora-alan-yukseklik: 32px;
    --fora-bosluk: .5rem;
    --fora-bosluk-genis: .875rem;

    /* ── Bootstrap köprüsü ──
       🆕 2026-09-25 (Serhat toparlama 3 md.1: "cari kodu pembe renkte yazıyor … benzerlerini de"): kod/kimlik yazısı
       (`<code>` — cari/stok kodu, evrak no, fiyat listesi no …) Bootstrap'in PEMBESİYDİ (`--bs-code-color: #d63384`).
       Palette YENİ ton eklenmedi (kural): ikincil metin tonu (#374151, sayfa zemininde ≈ 10:1). Bağlantı içindeki kod
       bağlantı rengini alır (Bootstrap `a > code { color: inherit }`). YZ sohbetinin kod blokları kendi stilinde (chat.css). */
    --bs-code-color: var(--fora-metin-ikincil);
}

/* ═══ 1. ERP kabuğu: gövde zemini + tipografi ═══
   Kapsam `.erp-*` altına DEĞİL gövdeye veriliyor: YZ sohbeti ve yönetim ekranları da aynı
   uygulamanın parçası, iki farklı kâğıt rengi ikinci bir tasarım dili demek olurdu. */
body {
    font-family: var(--fora-yazi-ailesi);
    font-size: var(--fora-punto-taban);
    color: var(--fora-metin);
    /* 🔑 GÖVDE DE kâğıt rengi olmalı — ölçüldü: `article.content` yalnız kendi içeriği
       kadar yüksek, altında kalan alan gövdenin beyazını gösteriyordu (görüntü 1101'de
       içerik warm, alt şerit beyaz → görünür dikiş). */
    background: var(--fora-sayfa);
}

/* Kâğıt rengi: MAUI'nin `SayfaBack`'i (#fef9f5). Kenar çubuğu zaten sıcak (#ede8e5) idi;
   içerik alanı kar beyazı kaldığı için uygulama iki farklı kâğıt kullanıyordu. */
.page .content {
    background: var(--fora-sayfa);
    color: var(--fora-metin);
}

/* ERP yüzeylerinin görsel kapsamı (`ErpKabuk` sarmalı).
   🔑 `:not([class])` ŞART: sınıfsız (= henüz temaya geçmemiş, satır içi style'lı eski)
   öğeler dili konuşsun, ama `.btn-sil` · `.secim-dugme` gibi KENDİ kuralı olanlar
   ezilmesin. Bu ayrım olmadan tema, özel anlam taşıyan düğmeleri de aksana boyuyordu. */
.erp-alan {
    color: var(--fora-metin);
}

/* Sayfa başlığı — MAUI'nin koyu başlık şeridinin masaüstü karşılığı: tam genişlik bant
   yerine ince üst başlık + aksan alt çizgi (geniş ekranda kapkara bant çok ağır kalıyor). */
.erp-baslik {
    display: flex;
    align-items: center;
    gap: var(--fora-bosluk);
    font-size: var(--fora-punto-baslik);
    font-weight: 600;
    color: var(--fora-metin-koyu);
    padding-block: .35rem .4rem;
    border-block-end: 2px solid var(--fora-aksan);
    margin-block-end: var(--fora-bosluk-genis);
}

/* ═══ 2. Düğme hiyerarşisi (IKON_SISTEMI §4 ile aynı dil) ═══
   birincil = dolu aksan · ikincil = çerçeveli nötr · yıkıcı = çerçeveli kırmızı */
.fora-btn,
.erp-alan .btn-primary,
.erp-alan button:not([class]),
button.btn-getir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: var(--fora-alan-yukseklik);
    padding-inline: .9rem;
    padding-block: .3rem;
    border: 1px solid transparent;
    border-radius: var(--fora-radius-kucuk);
    background: var(--fora-aksan);
    color: var(--fora-metin-acik);
    font-weight: 600;
    font-size: var(--fora-punto-taban);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.fora-btn:hover,
.erp-alan .btn-primary:hover,
.erp-alan button:not([class]):hover,
button.btn-getir:hover {
    background: var(--fora-aksan-basili);
    color: var(--fora-metin-acik);
}

.fora-btn:disabled,
.erp-alan .btn-primary:disabled,
.erp-alan button:not([class]):disabled,
button.btn-getir:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.fora-btn-ikincil {
    background: transparent;
    border-color: var(--fora-notr-cerceve);
    color: var(--fora-metin-ikincil);
}

.fora-btn-ikincil:hover {
    background: var(--fora-yuzey-alt);
    color: var(--fora-metin-ikincil);
}

.fora-btn-yikici {
    background: transparent;
    border-color: var(--fora-yikici);
    color: var(--fora-yikici);
}

.fora-btn-yikici:hover {
    background: var(--fora-uyari-kirmizi-zemin);
    color: var(--fora-uyari-kirmizi-metin);
}

.fora-btn-kucuk {
    min-height: 26px;
    padding-inline: .55rem;
    font-size: var(--fora-punto-kucuk);
}

/* Odak halkası — klavye öncelikli seçicilerin (§7.25) şartı: odağın NEREDE olduğu
   her zaman görünmeli. `:focus-visible` fare tıklamasında halka çizmez. */
.fora-btn:focus-visible,
.erp-alan button:focus-visible,
.erp-alan input:focus-visible,
.erp-alan select:focus-visible,
.erp-alan textarea:focus-visible {
    outline: 2px solid var(--fora-aksan);
    outline-offset: 1px;
}

/* ═══ 3. Form alanları — MAUI'nin "Outlined + üstte etiket" dili ═══
   🔑 Odak geri bildirimi RENKLE gelir (etiket + çerçeve aksan olur), MAUI'deki gibi. */
.fora-alan {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.fora-alan > label,
.fora-etiket {
    font-size: var(--fora-punto-etiket);
    font-weight: 500;
    color: var(--fora-form-etiket);
    letter-spacing: .01em;
}

.fora-alan > input,
.fora-alan > select,
.fora-alan > textarea,
.erp-alan input:not([class]),
.erp-alan select:not([class]),
.erp-alan textarea:not([class]) {
    min-height: var(--fora-alan-yukseklik);
    padding-inline: .5rem;
    padding-block: .25rem;
    border: 1px solid var(--fora-metin);
    border-radius: var(--fora-radius-kucuk);
    background: var(--fora-yuzey);
    color: var(--fora-metin);
    font-family: inherit;
    font-size: var(--fora-punto-taban);
    font-weight: 600;   /* MAUI'de değer metni Bold — etiketten baskın kalmalı */
}

.fora-alan > input:focus,
.fora-alan > select:focus,
.fora-alan > textarea:focus,
.erp-alan input:focus,
.erp-alan select:focus,
.erp-alan textarea:focus {
    border-color: var(--fora-aksan);
    box-shadow: inset 0 0 0 1px var(--fora-aksan);  /* MAUI: odakta çerçeve 1 → 2 px */
    outline: none;
}

.fora-alan:focus-within > label {
    color: var(--fora-aksan);
}

/* Salt-okunur alan: MAUI'de "değiştirilemez" alan SÖNÜK DEĞİL — değeri okunur kalır,
   yalnız klavye reddedilir. `disabled`'ın soluk grisi o davranışı YANLIŞ anlatır. */
.fora-alan > input[readonly],
.erp-alan input[readonly] {
    background: var(--fora-yuzey-alt);
    border-color: var(--fora-notr-cerceve);
}

/* Zorunlu alan işareti */
.fora-alan.zorunlu > label::after {
    content: " *";
    color: var(--fora-yikici);
}

/* Form ızgarası — masaüstü uyarlaması: MAUI tek sütun, web esnek çok sütun. */
.fora-form-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--fora-bosluk) var(--fora-bosluk-genis);
    align-items: start;
}

.fora-form-izgara .genis {
    grid-column: 1 / -1;
}

/* ═══ 4. Bölüm şeridi — MAUI `BolumSeridi.cs`'in web karşılığı ═══
   Sol aksan şeridi SÜS DEĞİL: salt-açık bir bant popup zemininde 1,19:1'e düşüyor
   (yani kayboluyor). Şerit, zemine bağımlı olmayan işarettir. */
.fora-serit {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--fora-serit-zemin);
    color: var(--fora-serit-metin);
    font-weight: 600;
    font-size: var(--fora-punto-kucuk);
    text-transform: none;
    padding-block: .25rem;
    padding-inline: .6rem;
    border-inline-start: 4px solid var(--fora-aksan);
    border-block-start: 1px solid var(--fora-serit-ust-isik);
    border-block-end: 1px solid var(--fora-serit-alt-golge);
    border-radius: 2px;
    margin-block: var(--fora-bosluk-genis) var(--fora-bosluk);
}

.fora-serit.vurgulu {
    background: var(--fora-serit-vurgu-zemin);
    color: var(--fora-metin-acik);
    border-inline-start-color: var(--fora-serit-vurgu-aksan);  /* koyu bantta aksan kaybolur */
}

/* ═══ 5. Kart ═══ */
.fora-kart {
    background: var(--fora-yuzey);
    border: 1px solid var(--fora-kart-cerceve);
    border-radius: var(--fora-radius);
    box-shadow: var(--fora-kart-golge);
    padding: var(--fora-bosluk-genis);
}

/* ═══ 6. Tablo — erp.css'teki iskeletin RENKLENDİRİLMESİ (yapısı orada kalır) ═══ */
.erp-tablo thead tr {
    background: var(--fora-yuzey-alt);
    border-block-end: 2px solid var(--fora-ayrac-koyu);
    color: var(--fora-serit-metin);
}

.erp-tablo tbody tr {
    border-block-end: 1px solid var(--fora-ayrac);
}

.erp-tablo tbody tr:hover {
    background: #f6efe9;   /* sayfa zemininin bir tık altı — seçilebilirlik işareti */
}

.erp-tablo tfoot tr {
    border-block-start: 2px solid var(--fora-ayrac-koyu);
    font-weight: 600;
}

/* Sınıfsız tablolar (temaya henüz geçmemiş eski ekranlar) da aynı dili konuşur.
   ⚠️ Satır içi `style` yalnız kendi yazdığı özellikleri ezer (genişlik, punto);
   renk/ayraç buradan gelir. */
.erp-alan table:not([class]) > thead > tr {
    background: var(--fora-yuzey-alt);
    border-block-end: 2px solid var(--fora-ayrac-koyu);
    color: var(--fora-serit-metin);
    text-align: start;
}

.erp-alan table:not([class]) > tbody > tr {
    border-block-end: 1px solid var(--fora-ayrac);
}

.erp-alan table:not([class]) > tbody > tr:hover {
    background: var(--fora-satir-hover);
}

.erp-alan table:not([class]) th,
.erp-alan table:not([class]) td {
    padding-block: .32rem;
    padding-inline: .5rem;
}

/* Ekran başlığı: sayfalar bugün düz `<h3>` yazıyor; `.erp-baslik`e geçtikçe bu kural
   gereksizleşir ama ikisi aynı görünür. */
.erp-alan > h3,
.erp-alan > div > h3 {
    font-size: var(--fora-punto-baslik);
    font-weight: 600;
    color: var(--fora-metin-koyu);
    padding-block-end: .3rem;
    border-block-end: 2px solid var(--fora-aksan);
    margin-block-end: var(--fora-bosluk-genis);
}

/* ═══ 7. Sayı renkleri — anlam taşıyan, dekoratif OLMAYAN renkler ═══ */
.sayi-negatif { color: var(--fora-sayi-negatif); font-weight: 600; }
.sayi-pozitif { color: var(--fora-sayi-pozitif); font-weight: 600; }
.vurgu-para   { color: var(--fora-vurgu-para);   font-weight: 700; }
.vurgu-miktar { color: var(--fora-vurgu-miktar); font-weight: 700; }

/* ═══ 8. Ekstre satırı (borç/alacak) ═══
   Ayrım renge BAĞLI DEĞİL: satır zaten "Evrak tipi : Borç/Alacak" yazar (renk körlüğü). */
.ekstre-borc   { background: var(--fora-ekstre-borc-zemin);   border-inline-start: 6px solid var(--fora-ekstre-borc-serit); }
.ekstre-alacak { background: var(--fora-ekstre-alacak-zemin); border-inline-start: 6px solid var(--fora-ekstre-alacak-serit); }
.ekstre-karma  { background: var(--fora-ekstre-karma-zemin);  border-inline-start: 6px solid var(--fora-ekstre-karma-serit); }

/* ═══ 9. Uyarı şeritleri ═══
   🔄 2026-10-13 (dalga 143): `.fora-bilgi` (başarı şeridi) KALKTI — son üç kullanıcısı dalga 92'de toast'a geçmişti (0 kullanım).
   Renk belirteçleri (`--fora-basari-*`) başka kurallarda kullanılıyor, duruyor. */
.fora-uyari,
.fora-uyari-sari,
.fora-uyari-kirmizi {
    padding-block: .4rem;
    padding-inline: .65rem;
    border-radius: var(--fora-radius-kucuk);
    font-size: var(--fora-punto-kucuk);
    border-inline-start: 4px solid transparent;
}

.fora-uyari-sari {
    background: var(--fora-uyari-sari-zemin);
    color: var(--fora-uyari-sari-metin);
    border-inline-start-color: var(--fora-vurgu-para);
}

.fora-uyari-kirmizi {
    background: var(--fora-uyari-kirmizi-zemin);
    color: var(--fora-uyari-kirmizi-metin);
    border-inline-start-color: var(--fora-yikici);
}

/* ═══ 10. Sekme çubuğu (SekmeCubugu.razor) ═══
   MAUI'nin "açık şerit + sayfa renginde klasör kutusu" tasarımı (desen B′). */
.fora-sekme-cubugu {
    background: var(--fora-sekme-serit);
}

.fora-sekme {
    color: var(--fora-sekme-metin);
    border-block-end: 3px solid transparent;
}

.fora-sekme.secili {
    background: var(--fora-sayfa);
    color: var(--fora-sekme-metin-secili);
    border-block-end-color: var(--fora-aksan);
    font-weight: 600;
}

/* ═══ 11. DevExpress ızgarası — uygulamanın diline uydurma ═══
   🔑 Tema `bootstrap-external` olduğu için DX zaten Bootstrap değişkenlerini okuyor;
   burada yalnız ızgaranın kendi vurgu yüzeyleri aksana çekiliyor. Yeni bir tema paketi
   GETİRİLMEZ (ikinci tasarım dili riski — §7.14 kararı). */
.dxbl-grid {
    --dxbl-grid-header-bg: var(--fora-yuzey-alt);
    --dxbl-grid-header-color: var(--fora-serit-metin);
    --dxbl-grid-border-color: var(--fora-ayrac);
    --dxbl-grid-selected-bg: #e3eef5;
    --dxbl-grid-hover-bg: #f6efe9;
    font-size: var(--fora-punto-taban);
}

.dxbl-grid .dxbl-grid-footer,
.dxbl-grid .dxbl-grid-total-summary {
    font-weight: 600;
}

/* ═══ 12. Yükleniyor göstergesi ═══ */
.fora-mesgul {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    border: 2px solid var(--fora-aksan-acik);
    border-block-start-color: var(--fora-aksan);
    border-radius: 50%;
    animation: fora-don .7s linear infinite;
    vertical-align: -.15em;
}

@keyframes fora-don {
    to { transform: rotate(360deg); }
}

/* Hareket duyarlılığı: sistemi "azalt" diyene animasyon zorlanmaz. */
@media (prefers-reduced-motion: reduce) {
    .fora-mesgul { animation-duration: 3s; }
    .fora-btn { transition: none; }
}