/* ========================================================================== Teklif — Arayüz Tasarım Sistemi ========================================================================== TEZ: Bu bir dashboard değil. Kağıt asıl içeriktir; arayüz ona hizmet eden alet panelidir. Müşteri paneli hiç görmez — yalnızca PDF'i görür. Buradan çıkan iki ilke: 1. Arayüz geri çekilir (deference). Kroma yok, gürültü yok, sessiz gri. 2. Fizik tutarlıdır. Yükselti hiyerarşi anlatır, süs değildir. KAPSAM: Bu dosya yalnızca UYGULAMA KABUĞUNU biçimlendirir. Fatura kağıdı invoice.css'tedir ve oraya DOKUNULMAZ — o dosya Dompdf kısıtlarına göre ölçülerek yazıldı (flex/grid yok, table-layout: fixed, genişlikler ilk satır hücrelerinde). Burada modern CSS serbesttir, çünkü bu ekranlar PDF'e girmez. ========================================================================== */ /* ========================================================================== 1. TASARIM BELİRTEÇLERİ (tokens) ========================================================================== */ :root { /* ---------------------------------------------------------------------- Mürekkep — sıcak siyah rampası Saf #000 değil: ekranda sert ve mavimsi durur. Hafif sıcak siyah kağıt mürekkebine daha yakın okunur. ---------------------------------------------------------------------- */ --ink-900: #14161a; /* birincil metin */ --ink-700: #363a42; /* gövde */ --ink-500: #5c6069; /* ikincil */ --ink-300: #8e9199; /* üçüncül, yer tutucu */ /* ---------------------------------------------------------------------- Yüzeyler — SICAK nötr griler Bu bilinçli bir seçim. Varsayılan refleks soğuk gri (Tailwind slate) olurdu; ama soğuk gri + soğuk mavi yan yana gelince marka mavisi SÖNER. Grileri ~%2 sıcağa kaydırmak #1538AE'yi sayfadaki tek renk olayı yapar. ---------------------------------------------------------------------- */ --desk: #f4f3f0; /* uygulama zemini — "masa" */ --raised: #ffffff; /* paneller, kağıt */ --sunken: #edece8; /* gömük alanlar, tablo başlığı */ --line: #e3e1dc; /* saç teli çizgi */ --line-strong: #cfccc6; /* ---------------------------------------------------------------------- Marka — sayfadaki TEK renk olayı ---------------------------------------------------------------------- */ --brand: #1538ae; --brand-hi: #1d48d4; --brand-lo: #0f2a82; --brand-wash: #ecf0fc; --brand-ring: rgba(21, 56, 174, 0.16); /* ---------------------------------------------------------------------- BAĞLAYICILIK RAMPASI Rozet renkleri anlam taşır, dekorasyon değildir. Üç belge tipinin hukuki ağırlığı FARKLIDIR: Teklif → bir mektup, bağlayıcı değil → nötr Proforma → niyet beyanı → kehribar Fatura → hukuki belge, bağlayıcı → marka mavisi Yanlış tip kesme hatasını görsel olarak zorlaştırır. ---------------------------------------------------------------------- */ --commit-none: #6b6f78; --commit-none-wash: #f0efec; --commit-intent: #a45a12; --commit-intent-wash: #fbf2e7; --commit-bound: #1538ae; --commit-bound-wash: #ecf0fc; /* ---------------------------------------------------------------------- Durum ---------------------------------------------------------------------- */ --positive: #16704a; --positive-wash: #e8f3ee; --caution: #a45a12; --caution-wash: #fbf2e7; --critical: #a32020; --critical-wash: #fbeded; /* ---------------------------------------------------------------------- Yükselti — tutarlı fizik Üç kademe yeter. Her kademe bir anlam taşır: 1 = yüzeye oturmuş (kart) 2 = kaldırılmış (menü, açılır) 3 = havada (kip pencere) paper = kağıdın masadan yükselmesi, ayrı bir fizik ---------------------------------------------------------------------- */ --lift-1: 0 1px 2px rgba(20, 22, 26, 0.05), 0 1px 1px rgba(20, 22, 26, 0.04); --lift-2: 0 2px 4px rgba(20, 22, 26, 0.06), 0 6px 16px rgba(20, 22, 26, 0.06); --lift-3: 0 8px 16px rgba(20, 22, 26, 0.08), 0 20px 48px rgba(20, 22, 26, 0.10); --lift-paper: 0 1px 2px rgba(20, 22, 26, 0.07), 0 14px 36px rgba(20, 22, 26, 0.11); --lift-paper-draft: 0 1px 2px rgba(20, 22, 26, 0.05), 0 4px 12px rgba(20, 22, 26, 0.06); /* ---------------------------------------------------------------------- Köşe yarıçapı ---------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px; /* ---------------------------------------------------------------------- Hareket Süreler kısa: bu bir iş aleti, gösteri değil. Uzun animasyon günde yüzlerce kez tekrarlandığında yavaşlık hissi yaratır. ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 120ms; /* durum değişimi */ --dur-2: 200ms; /* giriş */ --dur-3: 320ms; /* panel */ /* ---------------------------------------------------------------------- Tipografi ---------------------------------------------------------------------- */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------------------------------------------------------------------- Ölçüler ---------------------------------------------------------------------- */ /* --------------------------------------------------------------------- DİKEY RİTİM — tek ölçek Önceki hâlde her bileşen kendi boşluğunu taşıyordu ve değerler 8 / 10 / 12 / 14 / 16 / 18 / 20 arasında dağılmıştı. Sonuç: iki kart arasındaki mesafe hangi bileşenler olduğuna göre değişiyordu. Artık dört değer var ve hepsi buradan gelir. Duyarlı davranış da bileşen bileşen değil, TOKEN düzeyinde ayarlanır (bkz. 620px bloğu): tek yerde küçültünce sayfanın tamamı orantılı küçülür. --------------------------------------------------------------------- */ --flow: 20px; /* üst düzey bloklar arası — sayfanın nefesi */ --gap-grid: 16px; /* ızgara kardeşleri arası */ --pad-card: 18px; /* kart içi YATAY hiza — her şey buna dayanır */ --pad-band: 14px; /* başlık / altlık / sayfalama şeritleri, dikey */ --rail: 248px; /* kenar çubuğu */ --console: 400px; /* editör kontrol paneli */ --topbar-h: 56px; } /* ========================================================================== 2. SIFIRLAMA ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* * html'e de zemin rengi verilir. * * body'nin arka planı normalde tuvale yayılır; ancak kabuk herhangi bir * sebeple viewport'tan kısa kalırsa altta kalan alanın hangi renkte * olacağı tarayıcıya kalır. Burada açıkça tanımlamak, hiçbir koşulda * beyaz bir şerit görünmemesini garanti eder. */ html { -webkit-text-size-adjust: 100%; min-height: 100%; background-color: var(--desk); } body { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--ink-700); background-color: var(--desk); /* dvh: mobil tarayıcılarda adres çubuğu açılıp kapandığında 100vh yanlış hesaplanır ve altta boşluk/taşma oluşur */ min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Metin içinde rakamlar da hizalı olsun */ font-variant-numeric: tabular-nums; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand); text-decoration: none; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 2px; } button, input, select, textarea { font: inherit; color: inherit; } /* Klavye ile gezinenler için görünür odak halkası. :focus-visible — fare tıklamasında halka çıkmaz, Tab ile çıkar. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background-color: var(--brand-wash); color: var(--brand-lo); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 3. TİPOGRAFİ ROLLERİ ========================================================================== */ /* Kimlik dizeleri: belge no, VKN, IBAN, IP, zaman damgası. Karakter karakter doğrulanan her şey. */ .data, .doc-number, code { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.9285em; /* 13px @ 14px taban — mono optik olarak büyük durur */ letter-spacing: -0.01em; } .doc-number { font-weight: 500; color: var(--ink-900); } /* Para birimi — HER ZAMAN tablo rakamları. Canlı önizlemede yazarken orantılı rakamlar genişlik değiştirir ve toplamlar blok halinde titrer. Finansal veride kabul edilemez. */ .money, .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-300); } /* ========================================================================== 4. FORMLAR ========================================================================== */ .form-group { margin-bottom: 14px; } .form-group label, .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-700); margin-bottom: 5px; letter-spacing: 0.005em; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="file"], select, textarea { width: 100%; padding: 8px 11px; background-color: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 14px; color: var(--ink-900); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } /* Sayısal alanlar hizalı okunsun */ input[type="number"], input[inputmode="numeric"] { font-variant-numeric: tabular-nums; } input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--ink-300); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } input.has-error, select.has-error, textarea.has-error { border-color: var(--critical); } input.has-error:focus { box-shadow: 0 0 0 3px rgba(163, 32, 32, 0.14); } input::placeholder, textarea::placeholder { color: var(--ink-300); } input:read-only { background-color: var(--sunken); color: var(--ink-500); cursor: default; } textarea { resize: vertical; min-height: 68px; line-height: 1.6; } select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6069' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px; padding-right: 30px; } .field-error { margin-top: 5px; font-size: 12px; color: var(--critical); display: flex; align-items: flex-start; gap: 5px; } .field-error::before { content: ""; flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; background-color: currentColor; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.4a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.4a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E") center / contain no-repeat; } .field-hint { margin-top: 5px; font-size: 12px; color: var(--ink-300); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid .full-width { grid-column: 1 / -1; } /* Parola göster/gizle */ .password-wrap { position: relative; } .password-wrap input { padding-right: 68px; } .password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ink-500); font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 8px; border-radius: var(--r-xs); transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .password-toggle:hover { color: var(--brand); background-color: var(--brand-wash); } /* Parola gücü göstergesi */ .strength-meter { margin-top: 8px; } .strength-bar { height: 3px; background-color: var(--line); border-radius: var(--r-pill); overflow: hidden; } .strength-bar span { display: block; height: 100%; width: 0; background-color: var(--critical); border-radius: var(--r-pill); transition: width var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .strength-label { display: block; margin-top: 5px; font-size: 11px; color: var(--ink-300); } .policy-note { background-color: var(--brand-wash); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--brand-lo); margin-bottom: 18px; } /* ========================================================================== 5. BUTONLAR ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .btn:hover { text-decoration: none; } /* Bastırma geri bildirimi — dokunsal his, çok kısa */ .btn:active:not(:disabled) { transform: translateY(0.5px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background-color: var(--brand); color: #fff; box-shadow: var(--lift-1); } .btn-primary:hover:not(:disabled) { background-color: var(--brand-hi); box-shadow: var(--lift-2); } .btn-secondary { background-color: var(--raised); border-color: var(--line-strong); color: var(--ink-900); } .btn-secondary:hover:not(:disabled) { border-color: var(--ink-300); background-color: var(--desk); } .btn-danger { background-color: var(--critical); color: #fff; } .btn-danger:hover:not(:disabled) { background-color: #8c1a1a; } .btn-ghost { background: none; color: var(--ink-500); } .btn-ghost:hover:not(:disabled) { background-color: var(--sunken); color: var(--ink-900); } .btn-block { width: 100%; } .btn-sm { padding: 5px 10px; font-size: 12.5px; } .btn-lg { padding: 11px 20px; font-size: 14.5px; } /* ========================================================================== 6. FLASH BİLDİRİMLERİ ========================================================================== */ .flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .flash { padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.5; display: flex; align-items: flex-start; gap: 9px; animation: flash-in var(--dur-2) var(--ease-out); } .flash::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } @keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .flash-success { background-color: var(--positive-wash); color: #0f5537; } .flash-success::before { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm3.3 5.2l-4 4.2a.8.8 0 01-1.15 0L4.7 8.9a.8.8 0 111.15-1.1l.88.92 3.42-3.6a.8.8 0 111.15 1.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm3.3 5.2l-4 4.2a.8.8 0 01-1.15 0L4.7 8.9a.8.8 0 111.15-1.1l.88.92 3.42-3.6a.8.8 0 111.15 1.1z'/%3E%3C/svg%3E"); } .flash-error { background-color: var(--critical-wash); color: #831b1b; } .flash-error::before, .flash-warning::before, .flash-info::before { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.4a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.4a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E"); } .flash-warning { background-color: var(--caution-wash); color: #7d4310; } .flash-info { background-color: var(--brand-wash); color: var(--brand-lo); } /* ========================================================================== 7. KİMLİK DOĞRULAMA EKRANLARI ========================================================================== Gradyan yok. Bu bir kurumsal iç sistem — giriş ekranı sakin ve kesin olmalı, pazarlama sayfası gibi değil. Masa yüzeyi üzerinde tek bir kaldırılmış panel; markanın kendisi tek renk olayı. ========================================================================== */ /* Doku yok, gradyan yok, süs yok. Bu ekran günde üç kez görülür — sessiz ve kesin olmalı, gösterişli değil. Denenip ÇIKARILDI: ölçüm kağıdı çağrışımlı çizgi ızgarası. Alana anlam katmıyordu, yalnızca gürültüydü. Sıcak masa rengi zaten işi yapıyor. */ .auth-body { min-height: 100vh; background-color: var(--desk); display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-shell { width: 100%; max-width: 400px; /* Optik merkez geometrik merkezin biraz üstündedir. Kart tam ortada durunca "aşağı kaymış" hissi verir; bu kaydırma görünmez ama hissedilir. */ margin-bottom: 4vh; animation: auth-rise var(--dur-3) var(--ease-out); } @keyframes auth-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .auth-card { background-color: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift-3); padding: 32px; } .auth-brand { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .auth-logo { max-height: 34px; width: auto; margin: 0 auto 12px; } .auth-brand-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.015em; } .auth-brand-sub { font-size: 12px; color: var(--ink-300); margin-top: 2px; } .auth-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.02em; margin-bottom: 5px; } .auth-subtitle { font-size: 13.5px; color: var(--ink-500); line-height: 1.55; margin-bottom: 22px; } .auth-form .btn-block { margin-top: 6px; padding: 11px; } .auth-link-row { margin-top: 18px; text-align: center; font-size: 13px; } .auth-lang { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; } .auth-footer { margin-top: 20px; text-align: center; font-size: 11.5px; color: var(--ink-300); } /* Hata sayfası */ .error-page { text-align: center; } .error-code { font-family: var(--font-data); font-size: 44px; font-weight: 500; color: var(--brand); line-height: 1; margin-bottom: 14px; letter-spacing: -0.02em; } /* ========================================================================== 8. UYGULAMA KABUĞU ========================================================================== */ .app-shell { display: flex; align-items: stretch; min-height: 100vh; min-height: 100dvh; } /* ========================================================================== TAM EKRAN KİPİ — ========================================================================== NEDEN BÖYLE? Önceki iki deneme de "çocukların toplamı tam olarak viewport eder" varsayımına dayanıyordu: 1) height: calc(100vh - var(--topbar-h)) → üst çubuk 56px değilse bozulur 2) flex: 1 → beklenmedik bir kardeş öge (gizli form, metin düğümü) toplamı kaydırır Her ikisinde de fark, sayfanın altında boşluk olarak kalıyordu. Bu kip varsayımı tamamen ortadan kaldırır: gövdenin yüksekliği viewport'a SABİTLENİR ve taşma KIRPILIR. Belge viewport'tan uzun OLAMAZ; sayfa kaydırılamaz. İçerideki paneller kendi overflow-y:auto alanlarında kayar. Hesaplama yok, kardeş ögelere bağımlılık yok, üst çubuğun yüksekliği önemsiz. Yapısal olarak boşluk oluşması imkânsız. Yalnızca editör sayfasında açılır (DocumentController create/edit). Diğer sayfalar normal belge akışında kalır ve içerik kadar uzar. ========================================================================== */ body.is-fullscreen { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } body.is-fullscreen .app-shell { height: 100%; min-height: 0; overflow: hidden; } /* -------------------------------------------------------------------------- Kenar çubuğu Koyu ama SICAK koyu — mavi-siyah değil. Marka mavisi burada tek vurgu olarak kalsın diye zemin nötr tutuluyor. -------------------------------------------------------------------------- */ .sidebar { width: var(--rail); flex-shrink: 0; background-color: #1c1e22; color: #a9aab0; display: flex; flex-direction: column; position: sticky; top: 0; /* Uzun sayfalarda yapışık kalır; height sabit olduğu için altında boşluk oluşmaz — yapışkanlık onu her zaman görünür tutar. */ height: 100vh; height: 100dvh; } /* Tam ekran kipinde sayfa kaymadığı için yapışkanlığa gerek yok; kabuğun yüksekliğini birebir alır. */ body.is-fullscreen .sidebar { position: relative; height: 100%; } .sidebar-brand { padding: 18px 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .sidebar-brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .sidebar-brand-sub { font-size: 10.5px; color: #6c6e75; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; } .nav-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #5b5d64; padding: 14px 8px 6px; font-weight: 600; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: #a9aab0; font-size: 13.5px; font-weight: 500; margin-bottom: 1px; position: relative; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .nav-link:hover { background-color: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; } .nav-link.is-active { background-color: rgba(255, 255, 255, 0.09); color: #fff; } /* Etkin sayfa işareti — dolu blok yerine ince kenar çubuğu. Daha sessiz, daha kesin. */ .nav-link.is-active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background-color: var(--brand-hi); border-radius: 0 var(--r-pill) var(--r-pill) 0; } .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; } .nav-link.is-active .nav-icon { opacity: 1; } .sidebar-footer { padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm); transition: background-color var(--dur-1) var(--ease-out); } .user-chip:hover { background-color: rgba(255, 255, 255, 0.06); text-decoration: none; } .user-avatar { width: 30px; height: 30px; border-radius: var(--r-sm); background-color: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.01em; } .user-meta { min-width: 0; flex: 1; } .user-name { font-size: 12.5px; font-weight: 600; color: #e8e8ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-mail { font-size: 10.5px; color: #6c6e75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logout-form { margin-top: 6px; } .logout-btn { width: 100%; background: none; border: 1px solid rgba(255, 255, 255, 0.1); color: #8b8d94; padding: 6px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .logout-btn:hover { background-color: rgba(163, 32, 32, 0.16); border-color: rgba(163, 32, 32, 0.4); color: #e79a9a; } /* -------------------------------------------------------------------------- Ana alan + üst çubuk -------------------------------------------------------------------------- */ .main-area { flex: 1; min-width: 0; /* min-height: 0 — flex çocuğunun varsayılan min-height:auto değeri taşmayı engeller ve iç kaydırmayı bozardı */ min-height: 0; display: flex; flex-direction: column; } .topbar { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); height: var(--topbar-h); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 20; } .topbar-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.015em; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .page-content { padding: var(--flow); flex: 1; } /* * AKIŞ BOŞLUĞU — kartlar arası mesafenin TEK kaynağı. * * Önceden her bileşen kendi `margin-bottom`'ını taşıyordu. `.card`'ın * ise hiç yoktu; ardışık iki kart bir ızgara içinde değilse birbirine * yapışıyordu. Yeni bir bileşen eklerken boşluğunu yazmayı unutmak * sessizce bozuk bir sayfa üretiyordu. * * Bu kural o sınıfı tamamen ortadan kaldırır: page-content'in doğrudan * çocukları arasındaki mesafe, ne oldukları önemsiz, her zaman aynı. */ .page-content > * + *, .form-page > * + * { margin-top: var(--flow); } /* Mobil menü butonu */ .menu-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 6px 7px; cursor: pointer; color: var(--ink-700); transition: background-color var(--dur-1) var(--ease-out); } .menu-toggle:hover { background-color: var(--sunken); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background-color: rgba(20, 22, 26, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 90; } .sidebar-backdrop.is-visible { display: block; animation: fade-in var(--dur-2) var(--ease-out); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== 9. KARTLAR, İSTATİSTİKLER, TABLOLAR ========================================================================== */ .card { background-color: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--lift-1); } /* * Kart şeritleri (başlık / altlık / filtre / sayfalama) AYNI yatay * hizayı paylaşır. Önceden 14/16/12px dikey ve hepsi 18px yataydı; * dikey nefes şeritten şerite değişince kartlar farklı yükseklikte * başlıyordu. * * min-height: düğmesi olan başlıkla olmayan başlık aynı boyda kalsın — * yan yana iki kartın başlık çizgisi hizalanmalı. */ .card-header { padding: var(--pad-band) var(--pad-card); min-height: 52px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .card-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; } .card-body { padding: var(--pad-card); } .card-body.is-flush { padding: 0; } /* -------------------------------------------------------------------------- Eylem çubuğu — panelin asıl işi Üç kişi buraya günde defalarca aynı iş için geliyor: belge kesmek. En sık yapılan iş en görünür yerde durur; istatistikler bağlamdır. Marka mavisi burada tek kez kullanılır — asıl eylemin işareti. -------------------------------------------------------------------------- */ .action-bar { background-color: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--lift-1); padding: var(--pad-card) 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .action-bar-lead { min-width: 0; } .action-bar-hint { font-size: 13.5px; color: var(--ink-500); margin-top: 3px; } .action-bar-buttons { display: flex; gap: 8px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- İstatistik kartları Sayı öne çıkar, etiket geri çekilir. Display yüzü ve sıkı harf aralığı büyük rakamlara optik denge verir. -------------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap-grid); } .stat-card { background-color: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--lift-1); transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .stat-card:hover { box-shadow: var(--lift-2); border-color: var(--line-strong); } .stat-label { font-size: 11px; font-weight: 600; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.07em; } .stat-value { font-family: var(--font-display); font-size: 27px; font-weight: 700; color: var(--ink-900); margin-top: 4px; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat-sub { font-size: 12px; color: var(--ink-300); margin-top: 3px; } /* -------------------------------------------------------------------------- Veri tablosu -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } /* * Yatay padding kart içiyle AYNI token: tablo sütun başlığı 16px, * kart başlığı 18px içerideydi — aynı kartın içinde 2 piksel kayıktılar. * Gözle fark edilmesi zor ama sayfaya "hizasız" hissini veren şey buydu. */ .data-table th { text-align: left; padding: 10px var(--pad-card); background-color: var(--sunken); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .data-table td { padding: 12px var(--pad-card); border-bottom: 1px solid var(--line); color: var(--ink-700); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background-color var(--dur-1) var(--ease-out); } .data-table tbody tr:hover { background-color: var(--desk); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0.55; transition: opacity var(--dur-1) var(--ease-out); } /* Eylemler satır üzerine gelince belirginleşir — tablo sakin kalır, ama eylemler her zaman DOM'da ve klavyeyle erişilebilir. */ .data-table tbody tr:hover .row-actions, .row-actions:focus-within { opacity: 1; } /* -------------------------------------------------------------------------- Rozetler — BAĞLAYICILIK RAMPASI Renk anlam taşır: belge tipinin hukuki ağırlığı. -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } /* Nokta işareti — rampayı renk körlüğünde de okunur kılar (konum ve doluluk farkı, yalnızca renk değil) */ .badge::before { content: ""; width: 5px; height: 5px; border-radius: var(--r-pill); background-color: currentColor; flex-shrink: 0; } .badge-teklif { background-color: var(--commit-none-wash); color: var(--commit-none); } .badge-proforma { background-color: var(--commit-intent-wash); color: var(--commit-intent); } .badge-fatura { background-color: var(--commit-bound-wash); color: var(--commit-bound); } .badge-draft { background-color: var(--sunken); color: var(--ink-500); } .badge-draft::before { background-color: transparent; border: 1.5px solid currentColor; width: 6px; height: 6px; } .badge-final { background-color: var(--positive-wash); color: var(--positive); } /* -------------------------------------------------------------------------- Boş durum — davet, özür değil -------------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 48px 24px; } .empty-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-900); margin-bottom: 5px; letter-spacing: -0.01em; } .empty-text { font-size: 13.5px; color: var(--ink-500); margin-bottom: 18px; max-width: 42ch; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- Filtre çubuğu -------------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--line); background-color: var(--raised); border-radius: var(--r-md) var(--r-md) 0 0; } .filter-bar .form-group { margin-bottom: 0; } .filter-bar .filter-search { flex: 1; min-width: 190px; } /* -------------------------------------------------------------------------- Sayfalama -------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-grid); padding: var(--pad-band) var(--pad-card); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-500); } .pagination-links { display: flex; gap: 3px; } .pagination-links a, .pagination-links span { padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--ink-700); font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } .pagination-links a:hover { background-color: var(--sunken); border-color: var(--line-strong); text-decoration: none; } .pagination-links .is-current { background-color: var(--brand); border-color: var(--brand); color: #fff; } .pagination-links .is-disabled { opacity: 0.4; cursor: not-allowed; } /* ========================================================================== 10. BELGE EDİTÖRÜ — İMZA BÖLÜM ========================================================================== TEZ BURADA GÖRÜNÜR HALE GELİR: kağıt asıl içeriktir. Sol taraf bir "konsol" — alet paneli, sessiz, gri. Sağ taraf bir "masa" — üzerinde A4 kağıt, gerçek oranında, yükseltisiyle. Kağıdın yükseltisi DURUMU kodlar: taslak → düz, tereddütlü (lift-paper-draft) kesinleşmiş → oturmuş, ağırlığı olan (lift-paper) Çoğu sistem tüm belgeleri aynı gösterir. Bu ayrım, kesinleşmiş bir belgenin geri alınamazlığını fiziksel bir his olarak verir. ========================================================================== */ /* * SABİT YÜKSEKLİK YOK. * * Önceki hâli: height: calc(100vh - var(--topbar-h)) * Bu, editör panelini üst çubuğun yüksekliğine SABİT BİR SAYIYLA bağlıyordu. * Üst çubuk herhangi bir sebeple 56 px'ten farklı olduğunda (dil seçicinin * sarması, uzun belge başlığı, farklı font metriği, tarayıcı yakınlaştırması) * toplam artık tam ekran etmiyor ve SAYFANIN ALTINDA BOŞLUK kalıyordu. * * flex: 1 ile panel kalan alanı hesaplamadan doldurur — üst çubuk ne kadar * uzarsa uzasın toplam her zaman tam olarak viewport kadar olur. * * min-height: 0 zorunlu: flex çocuklarının varsayılan min-height:auto * değeri, içerideki overflow-y:auto kaydırmasını devre dışı bırakır. */ .editor-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* -------------------------------------------------------------------------- Konsol (kontrol paneli) -------------------------------------------------------------------------- */ .editor-panel { width: var(--console); flex-shrink: 0; background-color: var(--raised); border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; } .editor-sections { flex: 1; padding: 18px; } .form-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .form-section:last-child { border-bottom: none; margin-bottom: 0; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .section-heading h2 { font-size: 11px; font-weight: 600; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.08em; } /* Kalem satırı */ .item-row { background-color: var(--desk); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin-bottom: 8px; transition: border-color var(--dur-1) var(--ease-out); } .item-row:focus-within { border-color: var(--line-strong); } .item-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .item-row-label { font-size: 11px; font-weight: 600; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .btn-remove { background: none; border: none; color: var(--ink-300); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 3px 6px; border-radius: var(--r-xs); transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .btn-remove:hover { background-color: var(--critical-wash); color: var(--critical); } /* Kalem satırı ölçü ızgarası: miktar | birim | birim fiyat | KDV KDV sütunu dar tutulur — içeriği yalnızca "%20 · Genel oran" gibi kısa. */ .item-grid { grid-template-columns: 0.9fr 0.85fr 1.15fr 1.1fr; gap: 8px; } /* KDV dökümü — türetilmiş, salt okunur. Manuel vergi satırları kaldırıldı: oran artık kalemin özelliği. */ .tax-breakdown { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .tax-breakdown-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; font-size: 12.5px; background-color: var(--desk); border-bottom: 1px solid var(--line); } .tax-breakdown-row:last-child { border-bottom: none; } .tax-breakdown-rate { font-weight: 600; color: var(--ink-900); white-space: nowrap; } .tax-breakdown-base { flex: 1; color: var(--ink-300); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tax-breakdown-amount { font-weight: 600; color: var(--ink-900); white-space: nowrap; } /* -------------------------------------------------------------------------- Konsol alt çubuğu -------------------------------------------------------------------------- */ .editor-footer { position: sticky; bottom: 0; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--line); padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .editor-footer .btn { flex: 1 1 auto; } /* Kaydetme durumu — tüm genişliği alır, butonların altına iner */ .save-status { flex: 1 0 100%; font-size: 11.5px; color: var(--ink-300); display: flex; align-items: center; gap: 6px; min-height: 15px; font-variant-numeric: tabular-nums; transition: color var(--dur-1) var(--ease-out); } .save-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background-color: currentColor; flex-shrink: 0; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); } .save-status.is-saving, .save-status.is-saved, .save-status.is-error { /* Nokta yalnızca gerçek bir durum varken görünür */ } .save-status.is-saving::before, .save-status.is-saved::before, .save-status.is-error::before { opacity: 1; } .save-status.is-saving { color: var(--caution); } .save-status.is-saving::before { animation: pulse 1.2s var(--ease-std) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .save-status.is-saved { color: var(--positive); } .save-status.is-error { color: var(--critical); } /* -------------------------------------------------------------------------- Masa + kağıt — İMZA -------------------------------------------------------------------------- */ .preview-panel { flex: 1; min-width: 0; overflow-y: auto; background-color: var(--desk); padding: 28px 24px 40px; /* Masa dokusu: çok hafif, kağıdın yüzdüğünü hissettirir */ background-image: radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 0); background-size: 22px 22px; } .preview-scaler { max-width: 210mm; margin: 0 auto; background-color: var(--raised); box-shadow: var(--lift-paper); border-radius: 2px; transition: box-shadow var(--dur-3) var(--ease-out); } /* Taslak kağıt daha düz durur — henüz "oturmamış" */ .preview-scaler.is-draft { box-shadow: var(--lift-paper-draft); } /* ========================================================================== 11. DİL DEĞİŞTİRİCİ ========================================================================== */ .lang-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .lang-select { width: auto; min-width: 112px; padding: 5px 26px 5px 9px; font-size: 12.5px; background-position: right 7px center; background-size: 14px; border-color: var(--line); } .auth-lang .lang-select { min-width: 136px; } /* ========================================================================== 12. TOAST BİLDİRİMLERİ ========================================================================== Yığın halinde, sağ altta. Beyaz zemin + renkli sol şerit tercih edildi: tümüyle renkli zemin (yeşil/kırmızı blok) bu sakin arayüzde çok bağırır ve uzun metinlerde okunurluğu düşürür. Hata toast'ları KENDİLİĞİNDEN KAPANMAZ (bkz. toast.js). Okunmadan kaybolan hata mesajı hiç gösterilmemiş sayılır. ========================================================================== */ .toast-stack { position: fixed; bottom: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; /* Kapsayıcı tıklamaları geçirir; yalnızca toast'ların kendisi yakalar */ pointer-events: none; max-width: min(380px, calc(100vw - 36px)); } .toast { pointer-events: auto; position: relative; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; background-color: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--ink-300); border-radius: var(--r-md); box-shadow: var(--lift-3); font-size: 13.5px; line-height: 1.5; color: var(--ink-700); overflow: hidden; opacity: 0; transform: translateX(12px) scale(0.98); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } .toast.is-visible { opacity: 1; transform: none; } .toast.is-leaving { opacity: 0; transform: translateX(12px) scale(0.98); } /* --- İkon --- */ .toast-icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .toast-body { flex: 1; min-width: 0; /* Uzun müşteri adları ve belge numaraları taşmasın */ overflow-wrap: break-word; } /* --- Kapatma --- */ .toast-close { flex-shrink: 0; width: 22px; height: 22px; margin: -2px -2px 0 0; background: none; border: none; border-radius: var(--r-xs); cursor: pointer; color: var(--ink-300); position: relative; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .toast-close::before { content: ""; position: absolute; inset: 5px; background-color: currentColor; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.4.3 6 4.9 10.6.3 11.7 1.4 7.1 6l4.6 4.6-1.1 1.1L6 7.1l-4.6 4.6-1.1-1.1L4.9 6 .3 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.4.3 6 4.9 10.6.3 11.7 1.4 7.1 6l4.6 4.6-1.1 1.1L6 7.1l-4.6 4.6-1.1-1.1L4.9 6 .3 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .toast-close:hover { color: var(--ink-900); background-color: var(--sunken); } /* --- Kalan süre şeridi --- */ .toast-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background-color: currentColor; opacity: 0.25; transform-origin: left center; } /* --- Tipler --- */ .toast.is-success { border-left-color: var(--positive); color: var(--positive); } .toast.is-error { border-left-color: var(--critical); color: var(--critical); } .toast.is-warning { border-left-color: var(--caution); color: var(--caution); } .toast.is-info { border-left-color: var(--brand); color: var(--brand); } /* Gövde metni her zaman okunaklı mürekkep rengi — renk yalnızca ikon, şerit ve kenarda taşınır */ .toast .toast-body { color: var(--ink-700); } .toast.is-success .toast-icon { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm3.3 5.2l-4 4.2a.8.8 0 01-1.15 0L4.7 8.9a.8.8 0 111.15-1.1l.88.92 3.42-3.6a.8.8 0 111.15 1.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm3.3 5.2l-4 4.2a.8.8 0 01-1.15 0L4.7 8.9a.8.8 0 111.15-1.1l.88.92 3.42-3.6a.8.8 0 111.15 1.1z'/%3E%3C/svg%3E"); } .toast.is-error .toast-icon, .toast.is-warning .toast-icon, .toast.is-info .toast-icon { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.4a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3.2a.8.8 0 01.8.8v3.4a.8.8 0 01-1.6 0V5a.8.8 0 01.8-.8zm0 6a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E"); } /* ========================================================================== 13. YARDIMCI SINIFLAR ========================================================================== */ .text-muted { color: var(--ink-300); } .text-right { text-align: right; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .flex-row { display: flex; gap: 8px; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .nowrap { white-space: nowrap; } /* ========================================================================== 14. DUYARLI DÜZEN ========================================================================== v2'nin mobil kırılımı .editor-panel'i ekran dışına atıyor, geri getirecek .open sınıfını ise hiçbir kod eklemiyordu — uygulama mobilde tamamen kullanılamazdı. Aşağıdaki kurallar app.js'teki hamburger mantığıyla çalışır. ========================================================================== */ @media (max-width: 1180px) { :root { --console: 356px; } } @media (max-width: 920px) { .menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .sidebar { position: fixed; top: 0; left: 0; z-index: 100; transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-out); } .sidebar.is-open { transform: none; box-shadow: var(--lift-3); } /* Mobilde iki panel alt alta gelir ve sayfa NORMAL kayar. Dar ekranda tam ekran kilidi işe yaramaz: editör formu zaten viewport'tan uzun olur ve kırpılırsa erişilemez hale gelirdi. */ body.is-fullscreen, body.is-fullscreen .app-shell { height: auto; min-height: 100dvh; overflow: visible; } .editor-layout { flex-direction: column; flex: 0 1 auto; min-height: 0; overflow: visible; } .editor-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--line); overflow-y: visible; } .preview-panel { padding: 20px 12px 32px; overflow-y: visible; } .editor-footer { position: sticky; bottom: 0; } } @media (max-width: 620px) { /* Ölçeği tek yerden küçült — sayfanın tamamı orantılı daralır. Bileşen bileşen override etmek, birini atlamaya davetiyeydi. */ :root { --flow: 14px; --gap-grid: 12px; --pad-card: 14px; --pad-band: 12px; } .action-bar { flex-direction: column; align-items: stretch; } .action-bar-buttons .btn { flex: 1 1 calc(50% - 4px); } .topbar { padding: 0 14px; } .form-grid { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: 1fr 1fr; } .stat-value { font-size: 22px; } .editor-footer .btn { flex: 1 1 calc(50% - 4px); } /* Mobilde toast'lar tam genişlikte ve ALTTA — başparmak erişiminde, ama alt işlem çubuğunu kapatmayacak kadar yukarıda */ .toast-stack { left: 12px; right: 12px; bottom: 12px; max-width: none; align-items: stretch; } .auth-card { padding: 24px; } .filter-bar { flex-direction: column; align-items: stretch; } .pagination { flex-direction: column; } /* Satır eylemleri dokunmatikte her zaman görünür — hover diye bir şey yok */ .row-actions { opacity: 1; } } /* ========================================================================== 15. YAZDIRMA — uygulama kabuğunu tamamen gizle ========================================================================== */ @media print { .sidebar, .topbar, .editor-panel, .editor-footer, .toast, .menu-toggle, .sidebar-backdrop, .flash-stack { display: none !important; } .app-shell, .editor-layout, .main-area { display: block; height: auto; overflow: visible; } .preview-panel { padding: 0; background: #fff; background-image: none; overflow: visible; } .preview-scaler { max-width: none; box-shadow: none; margin: 0; border-radius: 0; } } /* ========================================================================== 16. ERİŞİLEBİLİRLİK — hareket tercihi ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 17. ROLLER VE YÖNETİM ========================================================================== Rol, sistemde tek bir yeni ayrım getiriyor: "bu kayıt kimin?" Bu ayrımın görsel maliyeti düşük tutuldu — yeni bir renk ailesi eklenmedi, mevcut taahhüt rampası (commit ramp) yeniden kullanıldı. Marka mavisi hâlâ tek renk olayı olarak kalıyor. ========================================================================== */ /* -------------------------------------------------------------------------- 17.1 Rol rozeti -------------------------------------------------------------------------- Üç rol üç farklı YETKİ AĞIRLIĞI taşıyor; rozet bunu renkle kodluyor: admin = bağlayıcı (marka), manager = niyet (kehribar), user = nötr. Aynı kodlama belgelerin taslak/kesin ayrımında da kullanılıyor, yani kullanıcı bu dili zaten biliyor. -------------------------------------------------------------------------- */ .role-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; white-space: nowrap; vertical-align: middle; } .role-chip.role-admin { background-color: var(--commit-bound-wash); color: var(--commit-bound); box-shadow: inset 0 0 0 1px var(--brand-ring); } .role-chip.role-manager { background-color: var(--commit-intent-wash); color: var(--commit-intent); box-shadow: inset 0 0 0 1px rgba(164, 90, 18, 0.18); } .role-chip.role-user { background-color: var(--commit-none-wash); color: var(--commit-none); box-shadow: inset 0 0 0 1px var(--line-strong); } .role-chip.role-inactive { background-color: var(--critical-wash); color: var(--critical); box-shadow: inset 0 0 0 1px rgba(163, 32, 32, 0.18); } /* Kenar çubuğundaki rol satırı — e-postanın yerini aldı */ .user-role { font-size: 11.5px; color: var(--ink-300); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "siz" işareti — yönetici listesinde kendi satırını bulmak için */ .owner-self { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: var(--r-pill); background-color: var(--brand-wash); color: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; } /* -------------------------------------------------------------------------- 17.2 Kapsam bandı -------------------------------------------------------------------------- Yönetici ve admin, başkalarının verisine bakıyor. Bunun sürekli görünür olması bir güvenlik alışkanlığıdır: "kendi listeme bakıyorum" sanarak başkasının belgesini silmek, tek bir satırlık uyarıyla önlenebilir. -------------------------------------------------------------------------- */ .scope-banner { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); background-color: var(--brand-wash); color: var(--brand-lo); border: 1px solid var(--brand-ring); font-size: 12.5px; line-height: 1.45; } .scope-banner svg { flex-shrink: 0; opacity: 0.75; } /* Vurgulu istatistik kartı — panelin ana sayısı */ .stat-card.is-accent { border-color: var(--brand-ring); background-image: linear-gradient(180deg, var(--brand-wash) 0%, var(--raised) 46%); } /* -------------------------------------------------------------------------- 17.3 İki sütunlu yerleşim -------------------------------------------------------------------------- */ .split-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--gap-grid); /* stretch: yan yana iki kart aynı boyda bitsin. `start` iken alt kenarları farklı yerlerde kalıyor, sayfa tırtıklı görünüyordu. */ align-items: stretch; } /* Kart içi dikey akış: gövde boşluğu doldursun ki altlıklar hizalansın */ .split-grid > .card, .split-grid > .stack { display: flex; flex-direction: column; } .split-grid > .card > .card-body:last-child { flex: 1; } /* Not: ızgara içindeki kartlar için margin sıfırlaması GEREKMEZ — akış boşluğu yalnızca page-content'in doğrudan çocuklarına uygulanır. */ .stack { display: flex; flex-direction: column; gap: var(--gap-grid); } @media (max-width: 1080px) { .split-grid { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- 17.4 Eğilim grafiği (saf CSS) -------------------------------------------------------------------------- Altı veri noktası için grafik kütüphanesi eklemek gereksiz bir bağımlılık olurdu; ayrıca projede CDN kullanılmıyor ve her şey yerelden servis ediliyor. Çubuklar yükseklik yüzdesiyle ölçekleniyor. -------------------------------------------------------------------------- */ .spark { display: flex; align-items: flex-end; gap: 10px; height: 132px; } .spark-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; } .spark-bar { width: 100%; max-width: 34px; border-radius: var(--r-xs) var(--r-xs) 0 0; background-color: var(--brand); opacity: 0.82; transition: opacity var(--dur-1) var(--ease-out); } .spark-col:hover .spark-bar { opacity: 1; } .spark-value { margin-top: 6px; font-family: var(--font-data); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-700); } .spark-label { font-size: 11px; color: var(--ink-300); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 17.5 Etkinlik listesi -------------------------------------------------------------------------- */ .event-list { list-style: none; margin: 0; padding: 0; } .event-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13px; } .event-item:last-child { border-bottom: 0; } .event-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .event-action { color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-actor { color: var(--ink-500); font-size: 12px; white-space: nowrap; } .event-meta { display: flex; gap: 10px; flex-shrink: 0; font-size: 11.5px; color: var(--ink-300); font-variant-numeric: tabular-nums; } /* Güvenlik kutusu — sol kenarda uyarı şeridi */ .card-alert { border-color: rgba(164, 90, 18, 0.28); } .card-alert > .card-header { background-color: var(--caution-wash); border-bottom-color: rgba(164, 90, 18, 0.20); } .card-alert > .card-header .card-title { color: var(--caution); } .pad-body { padding: 18px; margin: 0; } /* -------------------------------------------------------------------------- 17.6 Tablo yardımcıları -------------------------------------------------------------------------- */ .cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cell-title { font-weight: 550; color: var(--ink-900); text-decoration: none; } .cell-title:hover { color: var(--brand); } .cell-sub { font-size: 11.5px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-warn { color: var(--caution); } /* Pasif kullanıcı satırı — silinmiş değil, yalnızca sönük */ tr.is-muted { opacity: 0.55; } tr.is-muted:hover { opacity: 0.85; } /* Denetim kaydında güvenlik satırı */ tr.row-alert td:first-child { box-shadow: inset 3px 0 0 var(--caution); } .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.94em; } /* -------------------------------------------------------------------------- 17.7 Rol açıklama listesi -------------------------------------------------------------------------- */ .role-legend { margin: 0; display: flex; flex-direction: column; gap: 10px; } .role-legend-row { display: flex; align-items: baseline; gap: 12px; } .role-legend-row dt { flex-shrink: 0; min-width: 132px; margin: 0; } .role-legend-row dd { margin: 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; } .role-legend-inline { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; } .role-legend-inline .role-legend-row { align-items: center; } .role-legend-inline .role-chip { min-width: 132px; justify-content: center; } @media (max-width: 640px) { .role-legend-row { flex-direction: column; gap: 4px; } .role-legend-row dt, .role-legend-inline .role-chip { min-width: 0; } } /* -------------------------------------------------------------------------- 17.8 Yönetim formları -------------------------------------------------------------------------- Form sayfası dar tutuldu (720px): uzun satırlar okumayı zorlaştırır ve etiket ile alanın gözle bağlanmasını güçleştirir. -------------------------------------------------------------------------- */ .form-page { max-width: 760px; } .form-group-wide { grid-column: 1 / -1; } /* .has-error mevcut CSS'te input üzerinde tanımlı; burada .form-group sarmalayıcısına konduğunda da çalışsın diye köprü kuruluyor. */ .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--critical); } .form-group.has-error input:focus, .form-group.has-error select:focus, .form-group.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(163, 32, 32, 0.14); } .card-footer { padding: var(--pad-band) var(--pad-card); border-top: 1px solid var(--line); background-color: var(--sunken); display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-radius: 0 0 var(--r-md) var(--r-md); } /* Kart içindeki ikinci bölüm başlığı */ .card-header-inner { border-top: 1px solid var(--line); } .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-700); white-space: nowrap; } .checkbox-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--brand); } .color-row { display: flex; align-items: center; gap: 8px; } .color-row input[type="color"] { flex-shrink: 0; width: 40px; height: 36px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background-color: var(--raised); cursor: pointer; } .page-note { margin: 4px 2px 0; font-size: 12px; color: var(--ink-300); } /* -------------------------------------------------------------------------- 17.9 Logo yükleme -------------------------------------------------------------------------- Önizleme, damalı bir zemin üzerinde gösteriliyor: saydam PNG'lerin nerede bittiği ancak böyle görülebilir. Beyaz zeminde saydam bir logo "kenar boşluğu var mı yok mu" sorusunu cevapsız bırakır. -------------------------------------------------------------------------- */ .logo-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .logo-preview { flex-shrink: 0; width: 208px; height: 108px; display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background-color: var(--raised); background-image: linear-gradient(45deg, var(--sunken) 25%, transparent 25%), linear-gradient(-45deg, var(--sunken) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sunken) 75%), linear-gradient(-45deg, transparent 75%, var(--sunken) 75%); background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; font-size: 12px; } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-controls { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .logo-controls input[type="file"] { font-size: 12.5px; } /* ========================================================================== 18. TAHSİLAT ========================================================================== Para durumunun tek bir görsel dili var ve o dil ZATEN tanımlı: taahhüt rampası. Yeni bir renk ailesi eklenmedi. ödenmedi → nötr (henüz bir şey olmadı) kısmen → kehribar (başladı, bitmedi) ödendi → yeşil (kapandı) fazla → kırmızı (incelenmeli — bu bir hata sinyali) Marka mavisi bilinçli olarak KULLANILMADI: mavi bu sistemde "eylem" demek. Bir durum rozetinin mavi olması, tıklanabilir sanılmasına yol açardı. ========================================================================== */ /* -------------------------------------------------------------------------- 18.1 Ödeme durumu rozetleri -------------------------------------------------------------------------- */ .badge.pay-unpaid { background-color: var(--commit-none-wash); color: var(--commit-none); box-shadow: inset 0 0 0 1px var(--line-strong); } .badge.pay-partial { background-color: var(--caution-wash); color: var(--caution); box-shadow: inset 0 0 0 1px rgba(164, 90, 18, 0.20); } .badge.pay-paid { background-color: var(--positive-wash); color: var(--positive); box-shadow: inset 0 0 0 1px rgba(22, 112, 74, 0.20); } .badge.pay-overpaid { background-color: var(--critical-wash); color: var(--critical); box-shadow: inset 0 0 0 1px rgba(163, 32, 32, 0.20); } /* -------------------------------------------------------------------------- 18.2 Para rakamlarının anlamı -------------------------------------------------------------------------- Renk BURADA anlam taşır: bir bakiye rakamına bakan kişi, okumadan önce iyi mi kötü mü olduğunu görmelidir. Yine de renk TEK işaret değildir — yanında her zaman bir etiket veya rozet bulunur, çünkü renk körlüğü tek başına renge güvenmeyi güvenilmez kılar. -------------------------------------------------------------------------- */ .money.is-positive { color: var(--positive); } .money.is-due { color: var(--caution); } .money.is-over { color: var(--critical); } .money.is-clear { color: var(--ink-300); } .stat-value.is-secondary { font-size: 0.62em; color: var(--ink-500); margin-top: 2px; } .stat-card.is-alert { border-color: rgba(163, 32, 32, 0.26); background-image: linear-gradient(180deg, var(--critical-wash) 0%, var(--raised) 52%); } /* -------------------------------------------------------------------------- 18.3 Belge tahsilat özeti -------------------------------------------------------------------------- */ .pay-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .pay-summary-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .pay-doc-number { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); margin-top: 2px; } .pay-customer { font-size: 13px; color: var(--ink-500); margin-top: 3px; } .pay-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pay-figure-value { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .pay-figures { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pay-figure-value { font-size: 19px; } } /* Vade satırı */ .pay-due { margin-top: 14px; padding: 9px 12px; border-radius: var(--r-sm); background-color: var(--sunken); font-size: 12.5px; color: var(--ink-500); } .pay-due.is-overdue { background-color: var(--critical-wash); color: var(--critical); box-shadow: inset 0 0 0 1px rgba(163, 32, 32, 0.16); } /* -------------------------------------------------------------------------- 18.5 Tahsilat formu -------------------------------------------------------------------------- */ .pay-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .pay-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .pay-form-grid { grid-template-columns: minmax(0, 1fr); } } /* * "Kalan bakiyeyi doldur" kısayolu. * * Bir