/* ═══════════════════════════════════════════════════════════════════ BK-ŞANTİYE ERP — Design System (Master CSS) TUR85 · 2026-05-02 ─────────────────────────────────────────────────────────────────── Bu dosya projenin TEK renk + form + ölçü kaynağıdır. Hardcoded hex/px değerler kullanılmaz, hep var(--...) referansı. YÜKLENME SIRASI: içinde EN BAŞTA olmalı. Yoksa diğer dosyalardaki var(--color-...) referansları çalışmaz. Kapsamı: 1. Renk paleti (semantic isimlerle) 2. Boyut/ölçü değişkenleri 3. Tipografi 4. Form sistemi (.qtr-input, .qtr-required-mark, .qtr-field-error) 5. Buton sistemi (.qtr-btn ve varyantları) 6. Banner sistemi (.qtr-banner) 7. Eski değişkenlere alias (geriye dönük uyumluluk) ═══════════════════════════════════════════════════════════════════ */ /* ───────────── Tema 1: Tanımlar Mavisi (varsayılan) ───────────── */ /* 🆕 TUR24_34 — Default renkler Renk Tanımları ekranındaki onaylı manuel palete alındı: - bg-primary: #ddd9d2 - bg-surface-alt: #e9e4dd - action-primary: #8b7d68 */ :root { /* === ZEMIN === */ --color-bg-primary: #ddd9d2; /* Sayfa ana zemini */ --color-bg-surface: #ffffff; /* Kart/panel yüzeyi */ --color-bg-surface-alt: #e9e4dd; /* İkincil panel, tablo başlığı */ --color-bg-elevated: #ffffff; /* Modal/popup */ --color-bg-overlay: rgba(15,23,42,.45); /* Modal arka karartma */ /* === FORM/INPUT === */ --color-input-bg: #ffffff; --color-input-bg-required: #FFF9E6; /* TÜRK ERP STANDARDI - sarı zorunlu */ --color-input-bg-error: #FEE2E2; /* Açık kırmızı hata */ --color-input-bg-disabled: #f1f5f9; --color-input-border: #cbd5e1; --color-input-border-focus:#3b6cb4; --color-input-border-error:#dc2626; --color-input-text: #233042; --color-input-placeholder: #94a3b8; /* === YAZI === */ --color-text-primary: #233042; --color-text-secondary: #5f6f82; --color-text-muted: #8b97a8; --color-text-on-action: #ffffff; --color-text-link: #3b6cb4; /* === AKSIYON (BUTON) === */ --color-action-primary: #8b7d68; --color-action-primary-hover: #6d614f; --color-action-secondary: #a99b86; --color-action-secondary-hover: #8f806b; --color-action-danger: #dc2626; --color-action-danger-hover: #b91c1c; --color-action-ghost-bg: transparent; --color-action-ghost-text: #8b7d68; /* === DURUM === */ --color-status-success: #2f9e6c; --color-status-success-bg: #d1fae5; --color-status-warning: #d49a3a; --color-status-warning-bg: #fef3c7; --color-status-error: #dc2626; --color-status-error-bg: #fee2e2; --color-status-info: #3b6cb4; --color-status-info-bg: #dbeafe; /* === KENARLIK === */ --color-border-default: #cbd5e1; --color-border-strong: #94a3b8; --color-border-subtle: #e2e8f0; /* === ÖLÇÜLER === */ --size-input-height: 40px; --size-input-height-sm: 32px; --size-input-padding-x: 12px; --size-input-padding-y: 8px; --size-input-radius: 6px; --size-btn-height: 40px; --size-btn-height-sm: 30px; --size-btn-padding-x: 16px; --size-btn-radius: 6px; --size-gap-tight: 8px; --size-gap-default: 12px; --size-gap-loose: 20px; --size-font-default: 14px; --size-font-small: 12px; --size-font-large: 16px; /* === EFEKT === */ --shadow-sm: 0 1px 2px rgba(15,23,42,.05); --shadow-md: 0 4px 8px rgba(15,23,42,.08); --shadow-lg: 0 10px 24px rgba(15,23,42,.12); /* === TYPOGRAPHY === */ --font-mono: 'IBM Plex Mono', 'Consolas', monospace; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ───────────── Tema 2: Soft Slate ───────────── */ [data-theme="soft_slate"] { --color-bg-primary: #d7dde6; --color-bg-surface-alt: #e2e7ee; --color-action-primary: #6e8aa3; --color-action-primary-hover: #6d614f; } /* ───────────── Tema 3: Warm Stone ───────────── */ [data-theme="warm_stone"] { --color-bg-primary: #ddd9d2; --color-bg-surface-alt: #e9e4dd; --color-action-primary: #8b7d68; --color-action-primary-hover: #6d614f; } /* ───────────── Tema 4: Sage Night ───────────── */ [data-theme="sage_night"] { --color-bg-primary: #ccd5d1; --color-bg-surface-alt: #d8e0dc; --color-action-primary: #5d7d6f; --color-action-primary-hover: #486154; } /* ───────────── Tema 5: Graphite ───────────── */ [data-theme="graphite"] { --color-bg-primary: #bfc6d0; --color-bg-surface-alt: #cbd3dc; --color-action-primary: #4a5d70; --color-action-primary-hover: #364453; } /* ═══════════════════════════════════════════════════════════════════ FORM SİSTEMİ ═══════════════════════════════════════════════════════════════════ */ /* Standart input */ .qtr-input { display: block; width: 100%; height: var(--size-input-height); padding: var(--size-input-padding-y) var(--size-input-padding-x); font-family: var(--font-sans); font-size: var(--size-font-default); color: var(--color-input-text); background-color: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: var(--size-input-radius); outline: none; transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; box-sizing: border-box; } .qtr-input:hover:not([disabled]):not(.is-error) { border-color: var(--color-border-strong); } .qtr-input:focus { border-color: var(--color-input-border-focus); box-shadow: 0 0 0 3px rgba(59,108,180,.15); } .qtr-input::placeholder { color: var(--color-input-placeholder); } /* Textarea overrides */ textarea.qtr-input { height: auto; min-height: calc(var(--size-input-height) * 2); resize: vertical; font-family: inherit; } /* Select overrides */ select.qtr-input { cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%2364748b' d='M6 9L1 4h10z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; appearance: none; } /* === DURUM VARYANTLARI === */ /* Zorunlu alan — SARI (TÜRK ERP STANDARDI) */ .qtr-input.is-required, .qtr-input[data-required] { background-color: var(--color-input-bg-required); } .qtr-input.is-required:focus, .qtr-input[data-required]:focus { background-color: var(--color-input-bg); /* Yazmaya başlayınca beyaza döner */ } /* Zorunlu alan ama dolu (kullanıcı yazmış) — beyaza dön */ .qtr-input.is-required.is-filled, .qtr-input[data-required].is-filled { background-color: var(--color-input-bg); } /* Hata durumu */ .qtr-input.is-error { background-color: var(--color-input-bg-error); border-color: var(--color-input-border-error); } .qtr-input.is-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); } /* Devre dışı */ .qtr-input[disabled], .qtr-input.is-disabled { background-color: var(--color-input-bg-disabled); color: var(--color-text-muted); cursor: not-allowed; } /* === ZORUNLU YIDIZ === */ .qtr-required-mark { color: var(--color-status-error); font-weight: 700; margin-left: 2px; } /* === HATA MESAJI (alanın altında, sol kenar 4px kırmızı şerit) === */ .qtr-field-error { display: block; margin-top: 4px; padding: 6px 10px; border-left: 4px solid var(--color-status-error); background-color: var(--color-status-error-bg); color: var(--color-status-error); font-size: var(--size-font-small); font-weight: 500; border-radius: 0 4px 4px 0; animation: qtr-error-slide 180ms ease-out; } @keyframes qtr-error-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* === LABEL === */ .qtr-label { display: block; margin-bottom: 4px; font-size: var(--size-font-small); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .03em; } /* ═══════════════════════════════════════════════════════════════════ BUTON SİSTEMİ ═══════════════════════════════════════════════════════════════════ */ .qtr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--size-btn-height); padding: 0 var(--size-btn-padding-x); font-family: var(--font-sans); font-size: var(--size-font-default); font-weight: 600; color: var(--color-text-on-action); background-color: var(--color-action-primary); border: 1px solid transparent; border-radius: var(--size-btn-radius); cursor: pointer; transition: background-color 120ms ease, transform 80ms ease; box-sizing: border-box; white-space: nowrap; } .qtr-btn:hover:not([disabled]) { background-color: var(--color-action-primary-hover); } .qtr-btn:active:not([disabled]) { transform: translateY(1px); } .qtr-btn[disabled], .qtr-btn.is-disabled { background-color: var(--color-input-bg-disabled); color: var(--color-text-muted); cursor: not-allowed; opacity: .7; } /* Varyantlar */ .qtr-btn.is-primary { background-color: var(--color-action-primary); } .qtr-btn.is-primary:hover:not([disabled]) { background-color: var(--color-action-primary-hover); } .qtr-btn.is-secondary { background-color: var(--color-action-secondary); } .qtr-btn.is-secondary:hover:not([disabled]) { background-color: var(--color-action-secondary-hover); } .qtr-btn.is-danger { background-color: var(--color-action-danger); } .qtr-btn.is-danger:hover:not([disabled]) { background-color: var(--color-action-danger-hover); } .qtr-btn.is-ghost { background-color: transparent; color: var(--color-action-ghost-text); border-color: var(--color-input-border); } .qtr-btn.is-ghost:hover:not([disabled]) { background-color: var(--color-bg-surface-alt); } .qtr-btn.is-small { height: var(--size-btn-height-sm); padding: 0 12px; font-size: var(--size-font-small); } /* ═══════════════════════════════════════════════════════════════════ BANNER SİSTEMİ (sayfa üstü kalıcı uyarı) ═══════════════════════════════════════════════════════════════════ */ .qtr-banner { display: block; padding: 10px 14px; margin-bottom: 12px; border-left: 4px solid; border-radius: 0 6px 6px 0; font-size: var(--size-font-default); } .qtr-banner.is-error { border-left-color: var(--color-status-error); background-color: var(--color-status-error-bg); color: var(--color-status-error); } .qtr-banner.is-warning { border-left-color: var(--color-status-warning); background-color: var(--color-status-warning-bg); color: var(--color-status-warning); } .qtr-banner.is-success { border-left-color: var(--color-status-success); background-color: var(--color-status-success-bg); color: var(--color-status-success); } .qtr-banner.is-info { border-left-color: var(--color-status-info); background-color: var(--color-status-info-bg); color: var(--color-status-info); } /* ═══════════════════════════════════════════════════════════════════ ESKİ DEĞİŞKEN ALİAS'LARI ─────────────────────────────────────────────────────────────────── Geriye dönük uyumluluk için. 1069 referans hâlâ çalışıyor. Yeni kod bunları kullanmaz; ileride toplu sed ile temizlenebilir. ═══════════════════════════════════════════════════════════════════ */ :root { --bg: var(--color-bg-primary); --bg2: var(--color-bg-surface-alt); --bg3: var(--color-bg-surface); --border: var(--color-border-default); --acc: var(--color-action-primary); --acc2: var(--color-action-secondary); --t: var(--color-text-primary); --t2: var(--color-text-secondary); --t3: var(--color-text-muted); --er: var(--color-status-error); --ok: var(--color-status-success); --wr: var(--color-status-warning); --pur: #a99cc8; /* Az kullanılan, renk paletine girmedi */ --mono: var(--font-mono); --sans: var(--font-sans); /* Eski sürümlerde "yarısı yapılmış" sürface, panel, line, pri değişkenleri */ --surface: var(--color-bg-surface-alt); --surface2: var(--color-bg-surface); --surface3: var(--color-bg-primary); --panel: var(--color-bg-surface); --panel2: var(--color-bg-surface-alt); --line: var(--color-border-subtle); --pri: var(--color-action-primary); --pri2: var(--color-action-secondary); --shadow: var(--shadow-md); --panel-accent: linear-gradient(180deg, var(--color-action-secondary), var(--color-action-primary)); --panel-accent-soft: linear-gradient(180deg, var(--color-bg-surface), var(--color-bg-surface-alt)); }