/* ============================================================ NERVIA — TASARIM (TEK KAYNAK) ============================================================ Görünümle ilgili HER karar burada. Renk, ağırlık, yüzey, kart, etiket, durum, anasayfa kartları. Bir şeyi değiştirmek istiyorsan YALNIZCA bu dosyayı düzenle; her sayfa otomatik düzelir. Bu dosya index.html'de EN SON yüklenir, yani styles.css, mobile.css ve ui-premium.css'in (eski, dağınık) kurallarının üstüne biner. Onlar yapı/yerleşim (grid, boşluk, taşma) içindir; renk/yüzey/ağırlık kararı orada VERİLMEZ. Eski dosyalardaki renkleri ezmek için `html body …` öneki ve gerekince `!important` kullanılır. İÇİNDEKİLER 1 Ayarlar (tokenlar) tek yerden döner 2 Yazı: tek ağırlık 3 Yüzeyler: arka plan yok, ince çizgi, açık/hafif koyu 4 Kart başlığı: monogram, sayaçlar 5 Durum: nokta + yazı, etiket 6 Küçük düğmeler (kart içi) 7 Anasayfa kartları 8 Eski kuralların ezilmesi (beyaz levhalar) 9 DÜĞMELER: tek kaynak (.btn ailesi, .icon-btn, bağlam istisnaları) ============================================================ */ /* ---------- 1 · AYARLAR ---------- */ :root { /* Kart yüzeyi: arka plan YOK. Alt alta kartlarda çiftler bu tonda. */ --tz-zebra: rgba(20, 20, 15, .045); --tz-cizgi: var(--line); --tz-cizgi-ince: rgba(20, 20, 15, .08); --tz-cizgi-satir: rgba(20, 20, 15, .07); --tz-radius-kart: 28px; --tz-radius-ic: 20px; --tz-agirlik: 500; /* TEK yazı ağırlığı (kalın yazı yok) */ /* Düğme ayarları (bölüm 9) — her düğme buradan beslenir. Kaynak: Düğme Atölyesi, kullanıcının seçimi (2026-10-16): "Kayısı" ailesi, SOLUK DOLGU (yarı saydam renkli zemin), kenar yok, gölge yok, hap, 12px BÜYÜK HARF, 0.03em aralık, hover'da büyür. */ --btn-radius: 999px; --btn-bw: 0px; --btn-pad: 13px 25px; --btn-fs: 12px; --btn-ls: .03em; --btn-tt: uppercase; --btn-pad-big: 16px 30px; --btn-fs-big: 14px; --btn-pad-small: 8px 17px; --btn-fs-small: 10.5px; --btn-icon: 36px; --btn-icon-small: 32px; --btn-hover-scale: 1.04; --btn-a: .45; --btn-a-hover: .7; /* soluk dolgu şeffaflığı */ /* renk = ton(hue) + doygunluk; yazı aynı tonun koyusu */ --btn-primary-bg: hsla(24, 100%, 79%, var(--btn-a)); --btn-primary-bg-hover: hsla(24, 100%, 79%, var(--btn-a-hover)); --btn-primary-ink: hsl(24, 100%, 27%); --btn-secondary-bg: hsla(30, 19%, 83%, var(--btn-a)); --btn-secondary-bg-hover: hsla(30, 19%, 83%, var(--btn-a-hover)); --btn-secondary-ink: hsl(30, 23%, 31%); --btn-success-bg: hsla(140, 70%, 79%, var(--btn-a)); --btn-success-bg-hover: hsla(140, 70%, 79%, var(--btn-a-hover)); --btn-success-ink: hsl(140, 74%, 27%); --btn-warning-bg: hsla(42, 90%, 74%, var(--btn-a)); --btn-warning-bg-hover: hsla(42, 90%, 74%, var(--btn-a-hover)); --btn-warning-ink: hsl(36, 95%, 26%); --btn-danger-bg: hsla(8, 93%, 81%, var(--btn-a)); --btn-danger-bg-hover: hsla(8, 93%, 81%, var(--btn-a-hover)); --btn-danger-ink: hsl(8, 97%, 29%); --btn-info-bg: hsla(212, 86%, 79%, var(--btn-a)); --btn-info-bg-hover: hsla(212, 86%, 79%, var(--btn-a-hover)); --btn-info-ink: hsl(212, 90%, 27%); --btn-accent-bg: hsla(212, 86%, 66%, var(--btn-a)); --btn-accent-bg-hover: hsla(212, 86%, 66%, var(--btn-a-hover)); --btn-accent-ink: hsl(212, 92%, 22%); /* sayfanın TEK ana işlemi */ --btn-dark-bg: hsla(30, 19%, 66%, var(--btn-a)); --btn-dark-bg-hover: hsla(30, 19%, 66%, var(--btn-a-hover)); --btn-dark-ink: hsl(30, 25%, 22%); --btn-ghost-ink: #76767a; --btn-ghost-bg-hover: rgba(20, 20, 15, .06); /* Soluk palet (düşük kontrast, göz yormayan) */ --mk-ink: #2c2c2e; --mk-mid: #48484a; --mk-soft: #8a8a8e; --mk-faint: #a0a0a5; --mk-hover: #3a3a3c; --mk-kum: #ece7dd; --mk-kum-ink: #6b5f48; --mk-ok-bg: #dcebdf; --mk-ok-bg2: #cfe3d4; --mk-ok-btn: #386346; --mk-ok: #4f8a5f; --mk-ok-dot: #8fc19c; --mk-amb: #a8741e; --mk-amb-dot: #e0b36a; --mk-info: #6b6a72; --mk-info-dot: #b4b3ba; --mk-warn: #b0594a; --mk-warn-dot: #d58a7d; } /* ---------- 2 · YAZI: TEK AĞIRLIK ---------- "Bold yazı olmasın, çok göz yoruyor." Hiyerarşiyi boyut, renk ve boşluk kurar. Ağırlığı değiştirmek için yalnızca --tz-agirlik. */ html body, html body *, html body *::before, html body *::after { font-weight: var(--tz-agirlik) !important; } /* ---------- 3 · YÜZEYLER ---------- */ /* Kartlar (.blok) */ body .blok { border: 1px solid var(--tz-cizgi); border-radius: var(--tz-radius-kart); padding: 8px; overflow: visible; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #pending-body.pending-kartlar .blok { border: 1px solid var(--tz-cizgi); } /* Alt alta sıralı kartlar: açık / hafif koyu / açık / hafif koyu. İSTİSNA: Bekleyenler > Müşteri Bazlı (.mus-kart) hep açık — kullanıcı koyu tonu iptal etti (2026-10-16). */ body .blok-liste > :nth-child(even):not(.mus-kart) .blok, #pending-body.pending-kartlar .blok-liste > :nth-child(even):not(.mus-kart) .blok, /* styles.css'teki #id'li "background:none" kuralını geçer */ body .blok-liste > .blok:nth-child(even), body #supplier-orders > .blok:nth-child(even) { background: var(--tz-zebra); } .blok-tablo { background: none; border: 1px solid var(--tz-cizgi-ince); border-radius: var(--tz-radius-ic); overflow: hidden; } /* Diğer yüzeyler: form kartı, tablo kabı, genel kart… */ body .card, body .form-card, body .table-wrap, body .glass, body .label-preview-panel, body .hist-sum div { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--tz-cizgi); } /* ---------- 4 · KART BAŞLIĞI ---------- */ .blok-bas { border-bottom: none; padding: 12px 16px; } .blok-ad { color: var(--mk-ink); } .ini-kart .blok-bas { flex-wrap: nowrap; } .ini-kart .blok-ad { flex-wrap: nowrap; gap: 14px; } .ini-kart .blok-ad .bi-inline { display: none; } .ini-kart .blok-ad::before { content: var(--ini); flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--mk-kum); color: var(--mk-kum-ink); } .mus-kart .blok-eylem { flex-wrap: nowrap; gap: 22px; } .mk-stats { display: flex; gap: 22px; margin-right: 4px; } .mk-stats div { line-height: 1.15; text-align: left; } .mk-stats small { display: block; white-space: nowrap; font-size: 10.5px; letter-spacing: .1em; color: var(--mk-faint); text-transform: uppercase; } .mk-stats b { font-size: 18px; letter-spacing: -.02em; color: var(--mk-mid); font-variant-numeric: tabular-nums; } .mk-stats b.mk-hazir { color: var(--mk-ok); } .mus-kart .mus-satir { padding: 14px 20px; border-bottom: 1px solid var(--tz-cizgi-satir); } .mus-kart .mus-satir:last-child { border-bottom: none; } .mus-kart .mus-ad b { color: var(--mk-ink); } .mus-kart .mus-kalan b { color: var(--mk-mid); } /* ---------- 5 · DURUM ---------- */ .mus-nokta { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--mk-ok-dot); } .mus-dr { font-size: var(--fs-xs); letter-spacing: .04em; white-space: nowrap; display: inline-flex; align-items: center; } .mus-dr-ok { color: var(--mk-ok); } .mus-def-satir.is-ilgili { box-shadow: inset 3px 0 0 var(--mk-amb-dot); } .mus-def-satir.is-odeme .mus-def-od { color: var(--mk-ok); } .mus-def-satir.is-iade { color: var(--mk-amb); } .mus-dr-amber { color: var(--mk-amb); } .mus-dr-amber .mus-nokta { background: var(--mk-amb-dot); } .mus-dr-info { color: var(--mk-info); } .mus-dr-info .mus-nokta { background: var(--mk-info-dot); } .mus-dr-warn { color: var(--mk-warn); } .mus-dr-warn .mus-nokta { background: var(--mk-warn-dot); } /* Etiket (.tag): düz soluk zemin, çerçevesiz */ body .tag { background: rgba(20, 20, 15, .06); border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body .tag-new { background: rgba(79, 138, 95, .13); color: var(--mk-ok); } body .tag-upd { background: rgba(224, 179, 106, .22); color: var(--mk-amb); } body .tag-del { background: rgba(213, 138, 125, .2); color: var(--mk-warn); } /* ---------- 6 · KART İÇİ DÜĞMELER ---------- Kartlarda özel düğme stili YOK: standart .btn varyantları (bölüm 9) kullanılır. */ /* ---------- 7 · ANASAYFA KARTLARI ---------- Sarı/turuncu/gri degrade ve kırık-beyaz zemin yok; yan yana/alt alta kartlar açık / hafif koyu. */ html body #screen-dashboard .ak, html body #screen-dashboard .ana-kartlar .ak.ak-sari, html body #screen-dashboard .ana-kartlar .ak.ak-turuncu, html body #screen-dashboard .ana-kartlar .ak.ak-yayilan { background: none; background-image: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--tz-cizgi); } html body #screen-dashboard .ana-kartlar > :nth-child(even) .ak, html body #screen-dashboard .ana-kartlar > .ak:nth-child(even), html body #screen-dashboard .ana-listeler > .ak:nth-child(even), html body #screen-dashboard .ana-uclu > .ak:nth-child(even) { background: var(--tz-zebra); } /* ---------- 8 · ESKİ KURALLARIN EZİLMESİ ---------- styles.css / ui-premium.css bazı yerlerde opak beyaz basıyor ("şeffaflığı azalt", dokunmatik, %88 beyaz). İçerik kabı ve sayfa içi kartlar HİÇBİR durumda beyaz levha olmaz. */ html body .shell-body { background: none; } .form-card, .stat-card, .dashboard-card, .table-wrap, .list-card, #screen-products .table-wrap, #screen-cari .table-wrap, #screen-pending .table-wrap { background: none !important; border-color: color-mix(in srgb, #1d1d1f 10%, transparent) !important; } /* Telefonda yapışkan başlık: mavimsi beyaz yerine sayfa zemini. */ @media (max-width: 720px) { html body #screen-pending .screen-head, html body #screen-products .screen-head, html body #screen-cari .screen-head { background: rgba(247, 246, 242, .9); } } /* ============================================================ 9 · DÜĞMELER — TEK KAYNAK ============================================================ TÜM RENKLER AYNI REÇETE: soluk dolgu (yarı saydam renkli zemin) + aynı tonun koyu yazısı, kenar yok, gölge yok, hap, 12px BÜYÜK HARF. Reçete ve tonlar bölüm 1'deki --btn-* ayarlarında. Her düğme .btn + BİR RENK (btn-primary…) + İSTEĞE BAĞLI BOYUT (btn-big / btn-small / icon-only). Sayfaya özel düğme stili YAZILMAZ: yeni bir görünüm gerekiyorsa buraya yeni bir varyant eklenir. RENK (anlam) sınıf nerede birincil (kayısı) btn-primary ana eylem: Kaydet, Sevk Et, Ekle ana işlem (mavi) btn-accent sayfanın TEK işlemi: Çıkışı Onayla ve Tamamla ikincil btn-secondary yan eylem: Excel İndir taş (koyu ikincil) btn-dark vurgulu ikincil: ⚡ Geldi→Çıkış, Etiket Bas hayalet btn-ghost sessiz eylem: Sipariş Özeti, Vazgeç, ⋯ başarı btn-success Ödeme Al uyarı btn-warning dikkat isteyen eylem tehlike btn-danger Sil, İptal Et bilgi btn-info Ekstre Gönder (dosya/bilgi gönder) BOYUT btn-big (form sonu, giriş) · varsayılan · btn-small (satır içi) · icon-only (yuvarlak) DURUM :hover :active :focus-visible [disabled] .is-loading ============================================================ */ /* Temel */ .btn { font-family: inherit; font-size: var(--btn-fs); letter-spacing: var(--btn-ls); text-transform: var(--btn-tt); border: var(--btn-bw) solid transparent; border-radius: var(--btn-radius); padding: var(--btn-pad); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none; transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .2s ease-out, color .2s ease-out, filter .2s; } .btn:hover { transform: scale(var(--btn-hover-scale)); } .btn:active { transform: scale(.96); } .btn:focus-visible, .rail-btn:focus-visible, .nav-btn:focus-visible, .tab-btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } /* Renkler: hepsi AYNI reçete (soluk dolgu); yalnızca ton değişir */ .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); } .btn-primary:hover { background: var(--btn-primary-bg-hover); } .btn-accent { background: var(--btn-accent-bg); color: var(--btn-accent-ink); } .btn-accent:hover { background: var(--btn-accent-bg-hover); } .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-ink); } .btn-secondary:hover { background: var(--btn-secondary-bg-hover); } .btn-success { background: var(--btn-success-bg); color: var(--btn-success-ink); } .btn-success:hover { background: var(--btn-success-bg-hover); } .btn-warning { background: var(--btn-warning-bg); color: var(--btn-warning-ink); } .btn-warning:hover { background: var(--btn-warning-bg-hover); } .btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-ink); } .btn-danger:hover { background: var(--btn-danger-bg-hover); } .btn-info { background: var(--btn-info-bg); color: var(--btn-info-ink); } .btn-info:hover { background: var(--btn-info-bg-hover); } .btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); } .btn-dark:hover { background: var(--btn-dark-bg-hover); } .btn-ghost { background: transparent; color: var(--btn-ghost-ink); } .btn-ghost:hover { background: var(--btn-ghost-bg-hover); } /* Boyutlar */ .btn-big { font-size: var(--btn-fs-big); padding: var(--btn-pad-big); } .btn-big .bi { width: 20px; height: 20px; } .btn-small { font-size: var(--btn-fs-small); padding: var(--btn-pad-small); border-radius: var(--btn-radius); } .btn-small .bi { width: 15px; height: 15px; } .btn.icon-only { position: relative; padding: 0; width: var(--btn-icon); height: var(--btn-icon); flex: none; border-radius: 50%; } .btn.icon-only.btn-small { width: var(--btn-icon-small); height: var(--btn-icon-small); } .btn-badge { position: absolute; top: -6px; right: -6px; background: #fff; color: var(--ink); font-size: 10px; border-radius: 999px; padding: 1px 5px; line-height: 1.4; box-shadow: var(--sh-1); min-width: 15px; text-align: center; } @media (max-width: 420px) { .btn { padding: 11px 16px; font-size: 14px; } .btn-big { font-size: 15px; padding: 14px 18px; } } @media (max-width: 820px) { /* dokunmatik hedef: 44px (WCAG 2.5.5) */ .btn-small { min-height: 44px; padding-left: 16px; padding-right: 16px; } .btn.icon-only, .btn.icon-only.btn-small { width: 44px; height: 44px; } } /* Durumlar */ .btn[disabled], .btn[aria-disabled="true"] { /* PASİF: renk gider, tıklanamaz görünür */ cursor: not-allowed; background: var(--neutral-bg); background-image: none; color: var(--ink-soft); border-color: var(--line-strong); box-shadow: none; filter: none; opacity: 1; } .btn[disabled]:hover, .btn[aria-disabled="true"]:hover { transform: none; filter: none; } .btn.is-loading { cursor: progress; pointer-events: none; position: relative; color: transparent !important; } /* İŞLEM SÜRÜYOR: rengini korur */ .btn.is-loading:hover { transform: none; } .btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 999px; color: var(--accent-ink); animation: btnSpin .6s linear infinite; } .btn-ghost.is-loading::after { color: var(--ink); } @keyframes btnSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; border-top-color: currentColor; opacity: .5; } } /* Yuvarlak ikon düğmesi (.icon-btn) */ .icon-btn { border: 1px solid rgba(20, 20, 15, 0.12); background: linear-gradient(140deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .16s var(--ease); } .icon-btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); } .icon-btn.danger:hover { border-color: var(--warn); background: var(--warn-bg); } .icon-btn:active { transform: scale(.92); } .icon-btn + .icon-btn { margin-left: 4px; } /* BAĞLAM İSTİSNALARI — dağınık sayfa kurallarının tek yere toplanmış hâli. Yeni sayfa için BURAYA ekleme yapma; mevcut varyant/boyut sınıfını kullan. */ .manual-add-row .btn { padding-top: 12px; padding-bottom: 12px; white-space: nowrap; } /* satır içi ekleme */ .ra-flex .btn { box-shadow: none; } /* tablo aksiyonu: gölge yok */ .dash-tablo .dm-eylem .btn { padding: 5px 9px; font-size: 11px; } /* anasayfa mini tablo */ .urun-karti .uk-aksiyon .btn { background: rgba(255, 255, 255, .92); } /* ürün kartı üstü */ .urun-secim-cubugu .btn:disabled { opacity: .45; cursor: not-allowed; } .urun-secim-cubugu .btn-sil { color: var(--danger, var(--warn-ink)); } @media (max-width: 760px) { .urun-secim-cubugu .btn { padding: 8px 12px; font-size: 13px; } } /* Menü içi düğme: şeffaf, sola yaslı, hover'da hafif koyu (Diğer işlemler, Bekleyenler ⋯) */ .pending-menu-btn { width: 100%; justify-content: flex-start; gap: 10px; background: transparent; box-shadow: none; } .pending-menu-btn:hover, .head-more-menu .btn:hover { background: rgba(20, 20, 15, .06); transform: none; } .head-more-menu #btn-print-all-stock { color: var(--ink); background: transparent; } /* Tam gönderilebilir satır: saydam yeşil zemin */ .mus-kart .mus-satir.is-hazir { background: rgba(52, 199, 89, .12); } .pending-prod-row.is-hazir > td { background: rgba(52, 199, 89, .12); } .mus-kart .mus-satir.is-kismi { background: rgba(255, 204, 0, .16); } .pending-prod-row.is-kismi > td { background: rgba(255, 204, 0, .16); } /* Tarayıcının kendi sayı okları hiçbir yerde görünmez; sayaç gereken yerde −/+ düğmesi var. */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Bekleyenler > Müşteri Bazlı: kaydırırken müşteri başlığı (ad + sayaçlar + Sipariş Özeti) üstte sabit kalır. overflow:hidden sticky'yi öldürür → clip (köşe kırpma aynı, kaydırma kabı oluşmaz). */ .mus-kart .blok { overflow: clip; } .mus-kart .blok-bas { position: sticky; top: 70px; z-index: 5; background: var(--page-bg); border-radius: var(--tz-radius-ic); } @media (max-width: 640px) { .mus-kart .blok-bas { top: 62px; } } html body .shell-body { overflow: clip; } /* hidden → clip: sticky çocukları (müşteri başlığı) yapışabilsin */ /* shell-body artık kaydırma kabı değil (clip) → .topbar GERÇEKTEN yapışıyor (eskiden hiç yapışmıyordu). Zemini yoksa kaydırılan içerik menünün arkasından görünür: sayfa zeminiyle aynı, opak. */ html body .topbar { background: var(--page-bg); } /* Mobilde de aynı sebep: yapışan ekran başlığı (58px'lik üst barın ALTINDA durur) ve sayfa zemini renginde. */ @media (max-width: 720px) { html body #screen-products .screen-head, html body #screen-cari .screen-head, html body #screen-pending .screen-head { top: 58px; background: var(--page-bg); backdrop-filter: none; } }