/* ============================================================================ * KUYUM PLUS COMMERCE — TASARIM TOKEN'LARI (KATMAN ③) * FAZ 1 (2026-09-23) * * KATMAN SIRASI (base/app.html içindeki yükleme sırası budur): * ① commerce/css/vendor/kp-colors.css — Kuyum Plus HAM renk rampaları (DEVRALINDI) * ② commerce/css/vendor/kp-tokens.css — Kuyum Plus SEMANTİK token'ları (DEVRALINDI) * (FAZ 0'da `static/management/css/`ten taşındı — bkz. o dosyaların künyesi) * ③ commerce/css/tokens.css — BU DOSYA: Commerce katmanı * ④ commerce/css/app.css — kabuk (sidebar + topbar + düzen) * ⑤ commerce/css/components.css — kart, rozet, tablo, buton, form * ⑥ commerce/css/dashboard.css — yalnız ana sayfaya özel * * NEDEN ① ve ② DEVRALINIYOR * ------------------------- * Kuyum Plus'ın tasarım sistemi V1.0 zaten denetlenmiş bir nötr/durum/radius/ * gölge ölçeğine sahip ve bu iki dosya YALNIZ custom property tanımlar — * hiçbir seçiciyi boyamaz, `!important` yazmaz. Yani yüklenmeleri tek başına * hiçbir görsel etki üretemez, çakışma riski SIFIRDIR. İkinci bir nötr ölçek * yazmak iki ayrı gerçek kaynak doğururdu. * * NEDEN `kp-custom.css` / `style.bundle.css` (Metronic) YÜKLENMİYOR * ----------------------------------------------------------------- * Bunlar seçici boyayan, 146 KB ve 1,68 MB'lık eski panel katmanlarıdır. * Commerce kabuğu sıfırdan ve referans tasarıma göre kuruluyor; o dosyaları * bindirmek doğrudan çakışma üretir (Metronic `html, body { font-size: 13px * !important }` yazar ve bunu viewport'a göre değiştirir — Kuyum Plus * tokens.css başlığında ölçülerek belgelenmiş tuzak). Commerce bu tuzağa * hiç girmez; yine de ölçüler PX cinsindendir, çünkü iki panelin token * sözleşmesi aynı kalsın isteniyor. * * ADLANDIRMA * ---------- * Commerce'e ÖZEL token'lar `--kpc-*` önekini alır (Kuyum Plus Commerce). * Devralınan token'lar `--kp-*` olarak kalır ve YENİDEN TANIMLANMAZ — * tek istisna aşağıdaki altın rampasıdır ve gerekçesi orada yazılıdır. * ========================================================================== */ :root { /* ------------------------------------------------------------------------ * ALTIN — COMMERCE MARKA TONU * * ⚠ BİLİNÇLİ YENİDEN TANIMLAMA. Kuyum Plus'ın kanonik altını #C9A227'dir * (sarıya yakın). Commerce panelinin referans tasarımı ölçüldüğünde marka * altını #B5925E … #BB955B … #E2C087 ailesinde çıktı — daha sıcak, daha * düşük doygunlukta bir bronz-altın. İki ton yan yana kullanılamaz. * * Rampa, `--kp-gold` SSOT'una bağlanarak değil, DOĞRUDAN tanımlanarak * değiştirildi: `colors.css` içindeki `--kp-gold-500: var(--kp-gold, …)` * zinciri yalnız 500/600 basamağını taşır, 50–400 ve 700 sabittir; yarısı * yeni yarısı eski bir rampa tutarsız olurdu. Burada TAMAMI yeniden * tanımlanır, böylece devralınan `--kp-brand*` token'ları (tokens.css * ② katmanı) kendiliğinden Commerce tonuna döner. * * Kaynak: kullanıcı brief'i (#C69A43 / #D4AA5B) + referans görselden * ölçülen değerler. * ---------------------------------------------------------------------- */ --kp-gold-50: #FCF8EF; /* referans "hazırlık" kartı zemini (#FDF8EE) */ --kp-gold-100: #F6EDD9; --kp-gold-200: #EADCBA; /* açık zeminde ince altın kenarlık */ --kp-gold-300: #DFC78F; --kp-gold-400: #D4AA5B; /* brief: açık altın */ --kp-gold-500: #C69A43; /* brief: ANA marka altını */ --kp-gold-600: #AE8438; --kp-gold-700: #8A6A2E; /* açık zemin ÜSTÜNDE altın METİN (kontrast) */ /* Commerce'e özel altın yardımcıları. * * ⚠ KONTRAST NOTU: `--kpc-gold-cta` referans görseldeki açık bronzdan * (#B5925E) BİLİNÇLİ OLARAK daha koyudur. Ölçüldü: referansın tonu beyaz * metinle 2,4–2,6:1 kontrast verir; WCAG AA normal metin eşiği 4,5:1'dir. * Ana eylem düğmesinin okunaksız olması kabul edilebilir bir "referansa * sadakat" değildir. #96702D beyazla 4,51:1 verir ve aynı altın ailesinde * kalır. (Düğme metnini koyultmak da denenebilirdi ama o, altın CTA'nın * karakterini tamamen değiştirirdi.) */ --kpc-gold-cta: #96702D; --kpc-gold-cta-hover: #8A6A2E; /* 5,02:1 */ --kpc-gold-cta-press: #7A5D28; /* 6,13:1 */ --kpc-gold-badge-ink: #846328; /* --kp-gold-100 üstünde 4,75:1 */ --kpc-gold-ink: var(--kp-gold-700); --kpc-gold-surface: var(--kp-gold-50); --kpc-gold-border: var(--kp-gold-200); --kpc-gold-gradient: linear-gradient(90deg, #BB955B 0%, #D9B879 60%, #E2C087 100%); /* ------------------------------------------------------------------------ * YÜZEYLER * Değerler referans görselden ÖLÇÜLDÜ (sayfa zemini #F4F6FA, kart #FFFFFF). * ---------------------------------------------------------------------- */ --kpc-bg-page: #F5F7FA; --kpc-bg-card: #FFFFFF; --kpc-bg-subtle: #F4F6FA; /* tablo başlığı, arama kutusu, pasif alan */ --kpc-bg-hover: #F7F9FC; --kpc-border: #EDF0F4; /* kart kenarlığı — ölçülen #EFF1F3 */ --kpc-border-strong:#E2E8F0; /* tablo ayıracı, input kenarlığı */ /* ------------------------------------------------------------------------ * SIDEBAR (koyu yüzey) * ---------------------------------------------------------------------- */ --kpc-sidebar-bg: #182131; --kpc-sidebar-bg-deep: #151D2B; /* marka bandı ve alt bölüm */ --kpc-sidebar-border: rgba(255, 255, 255, .06); --kpc-sidebar-text: #C3CCDA; --kpc-sidebar-text-dim: #828FA2; /* bölüm başlıkları — 4,92:1 (ölçüldü) */ --kpc-sidebar-text-on: #FFFFFF; /* aktif öğe */ --kpc-sidebar-hover: rgba(255, 255, 255, .055); --kpc-sidebar-active: rgba(255, 255, 255, .10); /* ------------------------------------------------------------------------ * METİN — devralınan nötr ölçekten türetilir * ---------------------------------------------------------------------- */ --kpc-text-primary: #0F172A; --kpc-text-secondary: #5A6B85; /* #8A97AC ölçüldüğünde beyaz üstünde 2,96:1 çıktı (AA eşiği 4,5). Bu ton * "Dün: ₺610.250", "32 adet", "Son senkronizasyon: …" gibi GERÇEK bilgi * taşıyan satırlarda kullanılıyor; dekoratif değil. #61718C beyazda * 4,94:1, açık gri zeminde 4,57:1 verir. */ --kpc-text-muted: #61718C; --kpc-text-inverse: #FFFFFF; /* ------------------------------------------------------------------------ * DURUM — devralınan `--kp-*` durum token'larına REFERANS verir. * Yeni ham renk seçilmez; tek gerçek kaynak ① katmanıdır. * ---------------------------------------------------------------------- */ --kpc-success: var(--kp-green-500, #16A34A); --kpc-success-soft: #E7F7EE; --kpc-success-ink: #15803D; --kpc-danger: var(--kp-red-500, #DC2626); --kpc-danger-soft: #FDECEC; --kpc-danger-ink: #B91C1C; --kpc-warning: #E9A320; --kpc-warning-soft: #FEF5E4; /* referans KPI ikon kutusu */ --kpc-warning-ink: #B45309; --kpc-info: var(--kp-blue-500, #2563EB); --kpc-info-soft: #E7F0FF; /* referans "Kargoda" rozeti (#E2F0FF) */ --kpc-info-ink: #1D4ED8; --kpc-neutral-soft: #EFF2F7; --kpc-neutral-ink: #5A6B85; --kpc-violet: #8B5CF6; --kpc-violet-soft: #F1ECFE; --kpc-rose: #F26B4E; --kpc-rose-soft: #FDECE6; /* ------------------------------------------------------------------------ * YARIÇAP — devralınan ölçeğe REFERANS (px; bkz. dosya başlığı) * ---------------------------------------------------------------------- */ --kpc-radius-xs: var(--kp-radius-xs, 4px); --kpc-radius-sm: var(--kp-radius-sm, 6px); --kpc-radius-md: var(--kp-radius-md, 8px); --kpc-radius-lg: var(--kp-radius-lg, 10px); --kpc-radius-xl: var(--kp-radius-xl, 12px); --kpc-radius-card: var(--kp-radius-2xl, 14px); /* ölçülen kart yarıçapı */ --kpc-radius-pill: var(--kp-radius-pill, 999px); /* ------------------------------------------------------------------------ * GÖLGE * Referans kartlarda gölge neredeyse yok; derinlik ince kenarlıktan gelir. * ---------------------------------------------------------------------- */ --kpc-shadow-card: 0 1px 2px rgba(16, 24, 40, .04); --kpc-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 20px rgba(16, 24, 40, .06); --kpc-shadow-dropdown: 0 8px 28px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06); --kpc-shadow-drawer: 0 0 40px rgba(2, 8, 20, .45); /* ------------------------------------------------------------------------ * DÜZEN — hepsi referans görselden ÖLÇÜLDÜ (1536 px viewport) * sidebar genişliği 203 px · topbar yüksekliği 56 px * sayfa iç boşluğu 16 px · kart arası 14 px · sağ kolon 276 px * ---------------------------------------------------------------------- */ --kpc-sidebar-width: 204px; --kpc-sidebar-rail: 64px; /* tablet: yalnız ikon */ --kpc-header-height: 56px; --kpc-page-gutter: 16px; --kpc-gap: 14px; --kpc-rail-width: 276px; /* sağ kolon */ --kpc-card-padding: 16px; --kpc-nav-item-height: 30px; --kpc-content-max: 1760px; /* çok geniş ekranda satır uzunluğu sınırı */ /* ------------------------------------------------------------------------ * TİPOGRAFİ * * Metronic'in ilan ettiği yığın Inter'dir ama projede yerel bir Inter * webfont DOSYASI yok (Metronic onu Google Fonts'tan çeker). Dış CDN * bağımlılığı istenmediği için yığın Inter ile BAŞLAR (sistemde veya * ileride yerel olarak kuruluysa kullanılır) ve işletim sisteminin kendi * arayüz fontuna düşer. macOS'ta SF Pro, Windows'ta Segoe UI — referans * görseldeki harf karakterine ikisi de çok yakındır. * ---------------------------------------------------------------------- */ --kpc-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --kpc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --kpc-fs-xs: 11px; /* rozet, ikincil bilgi */ --kpc-fs-sm: 12px; /* tablo hücresi, KPI etiketi */ --kpc-fs-base: 13px; /* menü, gövde */ --kpc-fs-md: 14px; /* kart başlığı */ --kpc-fs-lg: 16px; --kpc-fs-xl: 21px; /* sayfa başlığı */ --kpc-fs-kpi: 24px; /* KPI ana sayısı */ --kpc-fs-hero: 32px; /* hazırlık oranı */ --kpc-transition: 140ms cubic-bezier(.4, 0, .2, 1); /* Z-katmanları — tek yerde, çakışma olmasın diye */ --kpc-z-sidebar: 60; --kpc-z-topbar: 50; --kpc-z-dropdown: 70; --kpc-z-backdrop: 55; } /* ============================================================================ * KOYU TEMA — BİLİNÇLİ OLARAK BU FAZDA YOK * * Devralınan `tokens.css` (② katmanı), projede ÜÇ ayrı tema attribute'u * bulunduğunu (`data-theme`, `data-kp-theme`, `data-bs-theme`) ve bunları * körlemesine birleştirmenin mevcut ekranları bozacağını belgeliyor. * Commerce o mirası taşımıyor; ama tema kararı Kuyum Plus tarafında * verilmeden burada üçüncü bir mekanizma AÇMAK, aynı hatayı bir kez daha * kurmak olurdu. * * Altyapı hazır: bu dosyadaki HER bileşen token üzerinden boyanır, hiçbir * bileşen kuralının içinde ham renk yoktur. Koyu tema eklemek, ileride * yalnız aşağıdaki bloğu doldurmaktır — bileşen CSS'ine dokunulmaz: * * :root[data-kpc-theme="dark"] { * --kpc-bg-page: #0F1620; * --kpc-bg-card: #151E2B; * --kpc-text-primary: #E7EDF5; * --kpc-border: #1F2A3A; * } * ========================================================================== */