/* ===================================================================== PlutonSoft Stok & Yönetim Paneli - Premium Dark Glassmorphism ERP/SaaS Stil Sistemi Mobile-first. Framework kullanılmıyor. Tasarım dili: koyu navy/charcoal taban + ambient glow + 3 seviyeli glass yüzey sistemi (subtle/primary/elevated) + tek indigo accent. Okunabilirlik önceliklidir - glass efekti veri kontrastının önüne geçmez. ===================================================================== */ :root { /* ============ PlutonSoft Marka Paleti ============ plutonsoft.com'un canlı DOM'undan ölçülen gerçek değerler (computed style ile doğrulandı): body bg #04040a, CTA gradient mavi->mor->cyan, glow rgba(139,92,246,.45). Aşağıdaki --color-* / --bg-* token'ları bu paletten türetilir - rastgele renk uydurulmadı. */ --ps-blue: #3b82f6; --ps-purple: #8b5cf6; --ps-purple-dark: #6d28d9; --ps-cyan: #22d3ee; --ps-gradient: linear-gradient(135deg, var(--ps-blue) 0%, var(--ps-purple) 50%, var(--ps-cyan) 100%); --ps-glow: rgba(139, 92, 246, 0.45); /* ============ App Arka Planı (koyu taban, ambient glow bunun üstüne biner) ============ */ --bg-app: #05060d; --bg-app-2: #0a0e1f; /* Ambient blob renkleri (body arka planı) - light modda daha soluk/ hafif (bkz. [data-theme="light"]), PlutonSoft mavi/mor/cyan kimliği. */ --ambient-blob-1: rgba(59, 130, 246, 0.16); --ambient-blob-2: rgba(34, 211, 238, 0.10); --ambient-blob-3: rgba(139, 92, 246, 0.11); --ambient-blob-mobile: rgba(139, 92, 246, 0.13); --ambient-card-reflection: rgba(167, 139, 250, 0.16); /* ============ Glass Yüzey Sistemi (Apple Frosted Glass, 3 seviye) ============ Tek malzeme dili: rgba(255,255,255,alpha) NÖTR taban + blur+saturate backdrop-filter + ince üst-kenar beyaz highlight (inset box-shadow) + yumuşak dış gölge. Kartın KENDİSİ mor/mavi boyanmaz - marka rengi yalnızca ARKA PLANDAKİ ambient glow'lardan (body radial-gradient'leri) camın içinden süzülerek görünür. */ /* 1) Subtle Glass - sidebar/topbar/mobil menü: daha sakin, daha düşük opaklık */ --glass-subtle-bg: rgba(255, 255, 255, 0.045); --glass-subtle-border: rgba(255, 255, 255, 0.12); --glass-subtle-blur: 20px; --glass-subtle-saturate: 160%; --glass-subtle-filter: blur(var(--glass-subtle-blur)) saturate(var(--glass-subtle-saturate)); /* 2) Primary Glass - kart/form/tablo dış yüzeyleri (Apple glass referansı BİREBİR) */ --glass-bg: rgba(255, 255, 255, 0.08); --glass-bg-hover: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.18); --glass-border-strong: rgba(255, 255, 255, 0.28); --glass-blur: 20px; --glass-saturate: 190%; --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); --glass-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.30); --glass-shadow: var(--glass-highlight), 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* 3) Elevated Glass - modal/dropdown/floating panel: okunabilirlik için biraz daha opak */ --glass-elevated-bg: rgba(255, 255, 255, 0.12); --glass-elevated-border: rgba(255, 255, 255, 0.22); --glass-elevated-blur: 26px; --glass-elevated-saturate: 200%; --glass-elevated-filter: blur(var(--glass-elevated-blur)) saturate(var(--glass-elevated-saturate)); --glass-elevated-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.34); --glass-elevated-shadow: var(--glass-elevated-highlight), 0 24px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); /* ============ Marka / Aksiyon (tek accent: PlutonSoft mor) ============ */ --color-primary: var(--ps-purple); --color-primary-hover: #a78bfa; --color-primary-dark: var(--ps-purple-dark); --color-primary-light: rgba(139, 92, 246, 0.16); --color-primary-glow: var(--ps-glow); /* ============ Fonksiyonel Durum Renkleri (dark-uyumlu, restrained tint) ============ */ --color-danger: #f87171; --color-danger-light: rgba(248, 113, 113, 0.14); --color-danger-solid: #dc2626; --color-danger-solid-hover: #ef4444; --color-success: #34d399; --color-success-light: rgba(52, 211, 153, 0.14); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, 0.14); --color-info: #38bdf8; --color-info-light: rgba(56, 189, 248, 0.14); /* ============ Metin (light-on-dark, yüksek okunabilirlik) ============ */ --color-text: #f1f5f9; --color-text-secondary: #cbd5e1; --color-text-muted: #8b96ad; /* ============ Yüzeyler (semantik adlar glass seviyelerine eşlenir) ============ */ --color-border: var(--glass-border); --color-border-strong: var(--glass-border-strong); --color-bg: var(--bg-app); --color-surface: var(--glass-bg); --color-surface-muted: rgba(255, 255, 255, 0.03); --color-surface-elevated: var(--glass-elevated-bg); --color-input-bg: rgba(6, 9, 20, 0.45); --color-input-bg-focus: rgba(6, 9, 20, 0.6); --color-input-border: rgba(255, 255, 255, 0.14); --color-select-option-bg: #10152a; --color-sidebar-bg: var(--glass-subtle-bg); --color-sidebar-text: #93a0bd; --color-sidebar-active: rgba(139, 92, 246, 0.20); /* Marka yazısı + hover/aktif link metni - dark modda beyaz (değişmedi). */ --sidebar-text-strong: #fff; --modal-overlay-bg: rgba(4, 6, 14, 0.65); /* Radius (8-14px aralığı, aşırı yuvarlaklıktan kaçınılır) */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* Gölge */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: var(--glass-shadow); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-lg: var(--glass-elevated-shadow); /* Spacing ritmi (8px taban) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Layout */ --sidebar-width: 258px; --sidebar-width-collapsed: 76px; --topbar-height: 62px; --content-max-width: 1600px; /* Hareket */ --transition-fast: 150ms ease; --transition-normal: 220ms ease; /* Z-index ölçeği (rastgele değer YASAK - yalnızca bu token'lar kullanılır). Sıralama mevcut davranışla birebir korunur: topbar < overlay < sidebar < dropdown < fab < modal < toast. */ --z-topbar: 40; --z-sidebar-overlay: 50; --z-sidebar: 60; --z-dropdown: 70; --z-fab: 90; --z-modal: 100; --z-toast: 200; /* Tipografi */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* ============ Strong Animated Neon Hover System ============ 4 ana neon renk (semantic): CYAN (genel navigasyon/bilgi/görüntüle), MAGENTA (özel accent/seçili), GREEN (kaydet/oluştur/onayla/başarı), RED (sil/kalıcı sil/çöp kutusu/destructive). Normal durumda dark/ transparent + neon outline+text; HOVER'da neon FILL + belirgin outer glow (madde 6/34). Referans parlaklığa yakın ama dark-glass zemin üzerinde WCAG AA kontrastı doğrulanmış değerler (bkz. rapor). */ /* Theme-aware "outline" rgb - normal state border/text/tint bu üzerinden hesaplanır. Dark modda orijinal parlak değerlerle birebir aynı (görsel fark yok). Light modda aynı hue'nun daha koyu/derin tonu kullanılır (açık zeminde okunabilirlik için) - bkz. [data-theme="light"] bloğu. */ --neon-cyan-rgb: 0, 229, 255; --neon-magenta-rgb: 255, 47, 208; --neon-green-rgb: 0, 245, 160; --neon-red-rgb: 255, 59, 95; /* Theme-INDEPENDENT "bright" rgb - fill/glow bloom rengi her iki temada da aynı canlı tonda kalır (hover fill üzerindeki koyu metin kontrastı böylece iki temada da garanti edilir, bkz. --neon-fill-text). */ --neon-cyan-bright-rgb: 0, 229, 255; --neon-magenta-bright-rgb: 255, 47, 208; --neon-green-bright-rgb: 0, 245, 160; --neon-red-bright-rgb: 255, 59, 95; --neon-cyan: rgb(var(--neon-cyan-rgb)); --neon-cyan-dark: #0090a8; --neon-magenta: rgb(var(--neon-magenta-rgb)); --neon-magenta-dark: #a3008a; --neon-green: rgb(var(--neon-green-rgb)); --neon-green-dark: #009160; --neon-red: rgb(var(--neon-red-rgb)); --neon-red-dark: #a3122c; --neon-fill-cyan: linear-gradient(135deg, var(--neon-cyan-dark), rgb(var(--neon-cyan-bright-rgb))); --neon-fill-magenta: linear-gradient(135deg, var(--neon-magenta-dark), rgb(var(--neon-magenta-bright-rgb))); --neon-fill-green: linear-gradient(135deg, var(--neon-green-dark), rgb(var(--neon-green-bright-rgb))); --neon-fill-red: linear-gradient(135deg, var(--neon-red-dark), rgb(var(--neon-red-bright-rgb))); /* Outer glow/bloom - hover'da "gerçekten ışık yayıyor" hissi (2 katman: sıkı + yayılmış). Bright-rgb kullanır: glow rengi tema değişse de canlı kalır, yalnızca spread/blur [data-theme="light"] içinde daha kompakt hale getirilir. */ --neon-cyan-glow: 0 0 10px rgba(var(--neon-cyan-bright-rgb), 0.55), 0 0 28px rgba(var(--neon-cyan-bright-rgb), 0.35); --neon-magenta-glow: 0 0 10px rgba(var(--neon-magenta-bright-rgb), 0.5), 0 0 28px rgba(var(--neon-magenta-bright-rgb), 0.32); --neon-green-glow: 0 0 10px rgba(var(--neon-green-bright-rgb), 0.5), 0 0 28px rgba(var(--neon-green-bright-rgb), 0.32); --neon-red-glow: 0 0 10px rgba(var(--neon-red-bright-rgb), 0.5), 0 0 28px rgba(var(--neon-red-bright-rgb), 0.32); /* Küçük yüzeyler (icon-buton, chip) için tek katmanlı hafif glow */ --neon-cyan-glow-sm: 0 0 10px rgba(var(--neon-cyan-bright-rgb), 0.4); --neon-magenta-glow-sm: 0 0 10px rgba(var(--neon-magenta-bright-rgb), 0.38); --neon-green-glow-sm: 0 0 10px rgba(var(--neon-green-bright-rgb), 0.38); --neon-red-glow-sm: 0 0 10px rgba(var(--neon-red-bright-rgb), 0.38); /* Fill üzerindeki metin/ikon - hesaplanmış kontrast: cyan 13.5:1, green 14.6:1, magenta 6.5:1, red 5.9:1 (siyaha yakın metinle, dördünde de AA/AAA geçer) */ --neon-fill-text: #05060a; /* Nötr beyaz kenar aydınlatması (renk semantiğinden bağımsız, madde 36) */ --neon-white: rgba(255, 255, 255, 0.9); --neon-edge-white: rgba(255, 255, 255, 0.14); --neon-edge-white-strong: rgba(255, 255, 255, 0.28); /* İptal/Vazgeç gibi nötr butonların hover dolgusu - dark modda beyaz cam, light modda koyu/kömür tonlu (beyaz zemin üstünde görünmeyen beyaz bırakılmaz, bkz. [data-theme="light"]). */ --neutral-hover-bg: rgba(255, 255, 255, 0.14); --neutral-hover-ring: rgba(255, 255, 255, 0.22); --neon-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --neon-glow-transition: 240ms cubic-bezier(0.4, 0, 0.2, 1); --neon-border-transition: 380ms cubic-bezier(0.4, 0, 0.2, 1); --neon-sweep-duration: 350ms; /* Theme geçişi (Light/Dark) - yalnızca renk/arka plan token'ları için, layout/transform'a dokunmaz. prefers-reduced-motion altında global "transition-duration: 0.01ms !important" kuralı bunu da kapsar. */ --theme-transition: 200ms ease; } /* ===================================================================== [data-theme="light"] - Premium Light Glassmorphism :root yukarıdaki değerler DARK mod referansıdır ve değişmeden kalır. Light mod component CSS'ini DEĞİL, yalnızca token DEĞERLERİNİ değiştirir (aynı token adları - .light .card{} tarzı component override YOK). Soğuk off-white / açık lavanta-gri taban, hafif indigo ambient yansıma, translucent beyaz glass (düz beyaz DEĞİL), koyu lacivert/kömür metin. ===================================================================== */ [data-theme="light"] { /* ============ App Arka Planı ============ */ --bg-app: #eef1f8; --bg-app-2: #e3e8f5; --ambient-blob-1: rgba(59, 130, 246, 0.10); --ambient-blob-2: rgba(14, 165, 233, 0.08); --ambient-blob-3: rgba(139, 92, 246, 0.08); --ambient-blob-mobile: rgba(139, 92, 246, 0.08); --ambient-card-reflection: rgba(139, 92, 246, 0.10); /* ============ Glass Yüzey Sistemi (3 seviye) ============ */ --glass-subtle-bg: rgba(255, 255, 255, 0.66); --glass-subtle-border: rgba(30, 41, 59, 0.09); --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-hover: rgba(255, 255, 255, 0.78); --glass-border: rgba(30, 41, 59, 0.10); --glass-border-strong: rgba(30, 41, 59, 0.20); --glass-shadow: 0 8px 28px rgba(30, 41, 59, 0.12); --glass-elevated-bg: rgba(255, 255, 255, 0.86); --glass-elevated-border: rgba(30, 41, 59, 0.13); --glass-elevated-shadow: 0 20px 50px rgba(30, 41, 59, 0.16), 0 6px 16px rgba(30, 41, 59, 0.08); /* ============ Marka / Aksiyon (aynı PlutonSoft mor kimliği, light zeminde ayarlı tint) ============ */ --color-primary-light: rgba(139, 92, 246, 0.10); --color-primary-glow: rgba(139, 92, 246, 0.30); /* ============ Fonksiyonel Durum Renkleri ============ */ --color-danger-light: rgba(220, 38, 38, 0.10); /* Success/yeşil: dark moddaki açık mint (#34d399) beyaz zeminde yetersiz kontrast veriyordu (WCAG). "Aktif" rozeti, yüzde/kâr marjı rozetleri ve success alert/toast metni için koyu, doygun bir yeşile çekildi. */ --color-success: #047857; --color-success-light: rgba(16, 185, 129, 0.16); --color-warning-light: rgba(217, 119, 6, 0.12); --color-info-light: rgba(2, 132, 199, 0.10); /* ============ Metin (dark-on-light) ============ */ --color-text: #101828; --color-text-secondary: #47536b; --color-text-muted: #6b7690; /* ============ Yüzeyler ============ */ --color-surface-muted: rgba(30, 41, 59, 0.035); --color-input-bg: rgba(255, 255, 255, 0.62); --color-input-bg-focus: rgba(255, 255, 255, 0.85); --color-input-border: rgba(30, 41, 59, 0.16); --color-select-option-bg: #ffffff; --color-sidebar-text: #33405c; --color-sidebar-active: rgba(139, 92, 246, 0.14); /* Marka yazısı + hover/aktif link metni - açık zeminde okunması için koyu lacivert/kömür (madde: sidebar kontrast düzeltmesi). */ --sidebar-text-strong: #101828; --modal-overlay-bg: rgba(15, 23, 42, 0.42); /* Gölge */ --shadow-xs: 0 1px 2px rgba(30, 41, 59, 0.10); --shadow-md: 0 10px 26px rgba(30, 41, 59, 0.14); /* ============ Neon "outline" rgb - normal durum border/text/tint. Aynı hue'nun light zeminde okunaklı, daha koyu/derin tonu. Fill/glow bloom rengi (--neon-*-bright-rgb) DEĞİŞMEZ - hover'daki canlı dolgu ve --neon-fill-text kontrastı iki temada da korunur. ============ */ --neon-cyan-rgb: 0, 137, 168; --neon-magenta-rgb: 176, 0, 138; --neon-green-rgb: 0, 122, 84; --neon-red-rgb: 195, 26, 58; /* Glow/bloom - dark modda geniş/yayılmış, light modda daha keskin/kompakt (madde 12). Renk (bright-rgb) değişmez, yalnızca yayılma/blur küçülür. */ --neon-cyan-glow: 0 0 6px rgba(var(--neon-cyan-bright-rgb), 0.5), 0 0 16px rgba(var(--neon-cyan-bright-rgb), 0.28); --neon-magenta-glow: 0 0 6px rgba(var(--neon-magenta-bright-rgb), 0.45), 0 0 16px rgba(var(--neon-magenta-bright-rgb), 0.26); --neon-green-glow: 0 0 6px rgba(var(--neon-green-bright-rgb), 0.45), 0 0 16px rgba(var(--neon-green-bright-rgb), 0.26); --neon-red-glow: 0 0 6px rgba(var(--neon-red-bright-rgb), 0.45), 0 0 16px rgba(var(--neon-red-bright-rgb), 0.26); --neon-cyan-glow-sm: 0 0 6px rgba(var(--neon-cyan-bright-rgb), 0.32); --neon-magenta-glow-sm: 0 0 6px rgba(var(--neon-magenta-bright-rgb), 0.3); --neon-green-glow-sm: 0 0 6px rgba(var(--neon-green-bright-rgb), 0.3); --neon-red-glow-sm: 0 0 6px rgba(var(--neon-red-bright-rgb), 0.3); /* Nötr kenar aydınlatması - beyaz zemin üstünde görünmeyen beyaz border bırakılmaz; kömür/lacivert tonlu ince ayraç + hafif beyaz parlaklık. */ --neon-white: rgba(15, 23, 42, 0.55); --neon-edge-white: rgba(30, 41, 59, 0.10); --neon-edge-white-strong: rgba(30, 41, 59, 0.22); --neutral-hover-bg: rgba(15, 23, 42, 0.08); --neutral-hover-ring: rgba(15, 23, 42, 0.18); } @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; } /* Neon patch: light-sweep tamamen kapatılır, hover kaynaklı translateY "kalkış" hareketleri kaldırılır - yalnızca renk/glow değişimi kalır (madde 34). Glow'un kendisi hareket değildir, dokunulmaz. */ .btn--primary::after { display: none; } .card--interactive:hover, .stat-card--link:hover, .stat-card--link:focus-visible, .btn:hover, .fab:hover, .fab.is-open { transform: none !important; } } * { box-sizing: border-box; } /* --------------------------------------------------------------------- Global focus-visible - DIŞA TAŞAN HİÇBİR RENK YOK --------------------------------------------------------------------- Önceki sürüm burada box-shadow tabanlı bir "halka" ekliyordu (0 0 0 2px + 0 0 0 4px) - bu, ham tarayıcı outline'ının kare/köşeli görünme sorununu çözdü ama kullanıcı KESİN olarak butonun dışında HİÇBİR renkli alan istemediğini belirtti (glow/ring dahil). Bu yüzden taban davranış artık gerçekten "dışarıya sıfır renk": yalnızca ham tarayıcı outline'ı susturuluyor, YERİNE dışa taşan başka bir katman EKLENMİYOR. Focus görünürlüğü, aşağıdaki component-specific kurallarda (.btn--primary, .filter-chip vb.) butonun KENDİ sınırları İÇİNDE kalan background/ border-color değişimiyle sağlanıyor (madde 8 - accessibility notu). */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: none; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; } body { font-family: var(--font-sans); /* Ambient arka plan: yumuşak, düşük kontrastlı indigo/mavi/mor "blob"lar. Blur/backdrop-filter KULLANMAZ (maliyetli) - yalnızca yumuşak radial-gradient durakları ile "glow" hissi verir, performans etkisi ihmal edilebilir düzeydedir. */ background-color: var(--bg-app); background-image: radial-gradient(900px 620px at 10% -8%, var(--ambient-blob-1), transparent 60%), radial-gradient(760px 520px at 96% 8%, var(--ambient-blob-2), transparent 60%), radial-gradient(820px 700px at 45% 112%, var(--ambient-blob-3), transparent 60%), linear-gradient(180deg, var(--bg-app) 0%, var(--bg-app-2) 100%); background-repeat: no-repeat; background-attachment: scroll; color: var(--color-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color var(--theme-transition), color var(--theme-transition); } /* Light/Dark geçişinde temel yüzeylerin rengi yumuşak geçsin (madde 27) - bileşenlerin KENDİ transition tanımı varsa (btn/card hover vb.) o öncelikli kalır, bu yalnızca ek/örtüşmeyen yüzeyleri kapsar. Layout'a dokunmaz. */ .sidebar, .topbar, .card, .modal, .auth-card, .data-table-wrapper, .data-list__item, .form-input, .form-select, .form-textarea, .toast, .filter-chip { transition: background-color var(--theme-transition), border-color var(--theme-transition), color var(--theme-transition); } /* Masaüstünde ambient arka plan sabit kalır (scroll ile kaymaz) - mobilde performans için background-attachment: fixed KULLANILMAZ (bazı mobil tarayıcılarda repaint maliyeti yüksektir). */ @media (min-width: 992px) { body { background-attachment: fixed; } } /* Mobilde daha sade ambient (daha az katman, daha düşük opaklık). */ @media (max-width: 767px) { body { background-image: radial-gradient(600px 420px at 12% -10%, var(--ambient-blob-mobile), transparent 60%), linear-gradient(180deg, var(--bg-app) 0%, var(--bg-app-2) 100%); } /* Performans: mobilde blur radius'u küçültülür (backdrop-filter maliyetlidir, özellikle çok sayıda kart/satırda). Cam efekti korunur, sadece 20px -> ~12px düşürülür - görsel etki neredeyse aynı kalır. */ :root { --glass-subtle-blur: 14px; --glass-blur: 12px; --glass-elevated-blur: 18px; /* Mobilde neon glow yoğunluğu düşürülür (madde 36) - hover zaten mobilde birincil etkileşim değil, focus/active güçlü kalır. */ --neon-glow-sm: 0 0 6px rgba(129, 140, 248, 0.22), 0 0 0 1px rgba(167, 139, 250, 0.32); --neon-glow-md: 0 0 10px rgba(129, 140, 248, 0.24), 0 0 0 1px rgba(167, 139, 250, 0.35); } } a { color: var(--color-primary); text-decoration: none; } img { max-width: 100%; } h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 650; letter-spacing: -0.01em; } /* --------------------------------------------------------------------- İkon Sistemi (Lucide outline SVG - bkz. includes/icon_helpers.php) Tek stroke dili, tek ölçü sistemi. Emoji ikonların yerini alır. --------------------------------------------------------------------- */ .icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: -4px; } .icon--sm { width: 16px; height: 16px; vertical-align: -3px; } .icon--lg { width: 24px; height: 24px; vertical-align: -6px; } .icon--xl { width: 32px; height: 32px; } /* --------------------------------------------------------------------- Sayısal Hizalama (tablo/kart fiyat-adet sütunları) --------------------------------------------------------------------- */ .text-right { text-align: right; } .tabular-nums { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- Layout Kabuğu --------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--color-sidebar-bg); -webkit-backdrop-filter: var(--glass-subtle-filter); backdrop-filter: var(--glass-subtle-filter); border-right: 1px solid var(--glass-subtle-border); color: var(--color-sidebar-text); display: flex; flex-direction: column; z-index: var(--z-sidebar); transform: translateX(-100%); transition: transform var(--transition-normal); overflow-y: auto; } .sidebar.is-open { transform: translateX(0); } .sidebar__brand { display: flex; align-items: center; gap: 11px; padding: 18px 22px; border-bottom: 1px solid var(--glass-subtle-border); } .sidebar__brand-mark { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 4px 12px var(--color-primary-glow)); } .sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .sidebar__brand-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--sidebar-text-strong); white-space: nowrap; } .sidebar__brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-muted); white-space: nowrap; } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; } /* Sidebar kategori başlığı (GENEL/ADMIN) - yeni bir renk/glass sistemi icat etmez, mevcut muted metin + subtle divider token'larını kullanır. */ .sidebar__category { padding: 16px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .sidebar__category:first-child { padding-top: 4px; } .sidebar__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--color-sidebar-text); font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); border-left: 3px solid transparent; transition: background var(--neon-transition), color var(--neon-transition), border-color var(--neon-transition); } .sidebar__link:hover { background: rgba(139, 92, 246, 0.07); border-left-color: rgba(139, 92, 246, 0.5); color: var(--sidebar-text-strong); } /* Aktif sidebar öğesi - PlutonSoft marka kimliği (mor/mavi gradient), genel görüntüle/bilgi semantiği olan cyan ile KARIŞTIRILMAZ (madde 10). Dışa taşan glow/drop-shadow KALDIRILDI - yalnızca kendi arka planı/sol kenarlığı değişir (madde 1/3 - butonun/linkin dışında renk olmayacak). */ .sidebar__link.is-active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.14)); color: var(--sidebar-text-strong); font-weight: 600; border-left-color: rgba(139, 108, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.22); } /* Çöp Kutusu - özel destructive accent (madde 14/15). href üzerinden hedeflenir, ayrı bir CSS sınıfı için PHP şablonu değiştirilmedi. */ .sidebar__link[href*="trash.php"]:hover { background: rgba(var(--neon-red-rgb), 0.08); border-left-color: rgba(var(--neon-red-rgb), 0.55); color: var(--sidebar-text-strong); } .sidebar__link[href*="trash.php"].is-active { background: rgba(var(--neon-red-rgb), 0.12); color: var(--sidebar-text-strong); border-left-color: var(--neon-red); box-shadow: inset 0 0 0 1px rgba(var(--neon-red-rgb), 0.22); } .sidebar__icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.85; } .sidebar__link.is-active .sidebar__icon, .sidebar__link:hover .sidebar__icon { opacity: 1; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: var(--z-sidebar-overlay); } .sidebar-overlay.is-open { display: block; } .main { flex: 1; min-width: 0; width: 100%; } .topbar { position: sticky; top: 0; height: var(--topbar-height); background: var(--glass-subtle-bg); -webkit-backdrop-filter: var(--glass-subtle-filter); backdrop-filter: var(--glass-subtle-filter); border-bottom: 1px solid var(--glass-subtle-border); display: flex; align-items: center; gap: 14px; padding: 0 18px; z-index: var(--z-topbar); } .topbar__menu-btn { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-text); padding: 6px; } .topbar__title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Phase 2 - aktif şube rozeti (topbar başlığının yanında). Mobilde (< 992px) sayfa başlığıyla aynı satırda sıkışıp taşıyordu (uzun şube adları kesiliyordu) - bu yüzden mobilde GİZLENİR, yerine aynı bilgi sidebar mobil menüsünün üstünde (.sidebar__branch-info, aşağıda) tam okunabilir şekilde gösterilir. Masaüstü görünümü DEĞİŞMEDİ (bkz. min-width:992px media query - .topbar__profile-text ile AYNI görünür/gizli deseni). */ .topbar__branch-badge { display: none; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 600; white-space: nowrap; } /* Mobil sidebar menüsü - aktif şube bilgisi (madde 11/16). Marka bloğunun hemen altında, .topbar__branch-badge'in mobilde kaybettiği bilgiyi TAM okunabilir şekilde verir - ellipsis ile kesilmez, uzun isimlerde 2 satıra sarabilir (word-wrap). Yalnızca $activeBranch varsa render edilir (admin/includes/header.php) - MASTER_ADMIN zaten bu header'a hiç ulaşamadığı için (requireBranchContext() 403 verir) burada ayrıca bir rol kontrolüne gerek yok. */ .sidebar__branch-info { padding: 12px 22px 16px; border-bottom: 1px solid var(--glass-subtle-border); } .sidebar__branch-info__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 3px; } .sidebar__branch-info__name { font-size: 13.5px; font-weight: 700; color: var(--sidebar-text-strong); line-height: 1.35; overflow-wrap: break-word; word-wrap: break-word; } /* .topbar__branch-badge ile AYNI görsel stil, ama bilerek AYRI class - bu iki kullanım bu görevin kapsamı DIŞINDA (madde 21 - "yalnızca iki hedef"): admin/includes/master-header.php'deki "Master Admin" rozeti (kısa, hiç taşma sorunu yoktu) ve admin/branch-notes.php'deki sayfa başlığı rozeti (topbar değil, sayfa içeriği - farklı genişlik bağlamı). .topbar__branch-badge'i mobilde gizleyen yeni kural bunlara paylaşılan class adı yüzünden YANLIŞLIKLA sızmasın diye ayrıştırıldı - ikisi de HER zaman görünür kalmaya devam ediyor (öncekiyle bire bir aynı davranış). */ .topbar__role-badge, .list-toolbar__branch-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 600; white-space: nowrap; } .topbar__actions { display: flex; align-items: center; gap: 4px; } .topbar__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-text-secondary); flex-shrink: 0; position: relative; transition: background var(--transition-fast), color var(--transition-fast); } .topbar__icon-btn:hover, .topbar__icon-btn:focus-visible { background: rgba(var(--neon-cyan-rgb), 0.1); color: var(--neon-cyan); box-shadow: none; outline: none; } .topbar__icon-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* Tema geçiş butonu - aynı topbar__icon-btn geometrisi (44px, layout shift yok), sun/moon ikonları CSS ile [data-theme] üzerinden gizlenir/gösterilir (madde 39/40) - JS ikon değiştirmek için DOM'a dokunmaz, yalnızca data-theme attribute'unu değiştirir. */ .theme-toggle { background: none; border: none; cursor: pointer; font: inherit; } .theme-toggle__icon { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Koyu mod aktif -> güneş ikonu gösterilir (tıklayınca açık moda geçer). */ :root:not([data-theme="light"]) .theme-toggle__icon--sun, [data-theme="dark"] .theme-toggle__icon--sun { display: block; } /* Açık mod aktif -> ay ikonu gösterilir (tıklayınca koyu moda geçer). */ [data-theme="light"] .theme-toggle__icon--moon { display: block; } .topbar__profile { position: relative; } .topbar__profile-trigger { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 5px 6px; border-radius: var(--radius-md); color: var(--color-text); font-family: inherit; } .topbar__profile-trigger:hover { background: var(--glass-bg-hover); } .topbar__profile-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; } .topbar__profile-text { display: none; text-align: left; line-height: 1.25; } .topbar__profile-name { font-size: 13.5px; font-weight: 600; display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__profile-role { font-size: 11.5px; color: var(--color-text-muted); display: block; } .topbar__profile-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); /* KASITLI OLARAK glass sistemi (var(--color-surface-elevated), alpha ~0.12/0.86) KULLANILMIYOR: arkadaki sayfa içeriği (örn. "+ Yeni Müşteri" butonu) camın İÇİNDEN görünüyordu. Bu panel için okunabilirlik > Liquid Glass estetiği - --color-select-option-bg zaten projede solid/ opak (alpha=1) olması gereken yüzeyler için var olan tema-duyarlı token (dark: #10152a, light: #ffffff). backdrop-filter bilinçli olarak kaldırıldı çünkü tam opak bir yüzeyin arkasında hiçbir görsel etkisi kalmıyor. */ background: var(--color-select-option-bg); border: 1px solid var(--glass-elevated-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 180px; padding: 6px; z-index: var(--z-dropdown); } .topbar__profile-dropdown.is-open { display: block; } .topbar__profile-dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--color-text); } .topbar__profile-dropdown a:hover { background: var(--glass-bg-hover); } .topbar__profile-dropdown .topbar__profile-dropdown-role { padding: 4px 12px 8px; font-size: 12px; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); margin-bottom: 4px; } .content { padding: 16px; max-width: 100%; } @media (min-width: 992px) { .sidebar { transform: translateX(0); position: sticky; top: 0; /* Taban kuraldan gelen bottom:0 (mobil/fixed konumlama için) sticky'de top:0 ile birlikte yüksekliği 100vh'ye SABİTLERDİ (madde: içerik 100vh'den uzun olduğunda sidebar arka planı sayfanın sonuna kadar gitmiyordu). bottom'u iptal edip yüksekliği flex stretch'e (.app-shell varsayılan align-items: stretch) bırakıyoruz - sidebar artık .main ile birlikte doğal olarak büyüyor, menü içeriği yine sticky top:0 sayesinde scroll sırasında görünür kalıyor. */ bottom: auto; height: auto; align-self: stretch; } .sidebar-overlay { display: none !important; } .topbar__menu-btn { display: none; } .topbar__profile-text { display: block; } .topbar__branch-badge { display: inline-flex; } .sidebar__branch-info { display: none; } .content { padding: 28px 32px; } } @media (min-width: 1600px) { .content { max-width: var(--content-max-width); margin: 0 auto; } } /* --------------------------------------------------------------------- Butonlar --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 14px; font-weight: 600; letter-spacing: 0.003em; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); min-height: 42px; } /* ============ Global Button Interaction (Kalıcı Sil referansı) ============ Semantic renk hiyerarşisi (madde 13): BRAND -> ana CTA/kaydet/oluştur/gönder/bağla/onayla/geri yükle (.btn--primary) - PlutonSoft mor/mavi gradient (marka rengi, bkz. plutonsoft.com referansı) GREEN -> ikincil onay/success (.btn--success) CYAN -> görüntüle/detay/bilgi (.btn--secondary[href*="action=view"]) MAGENTA -> düzenle (.btn--secondary[href*="action=edit"]) RED -> sil/kalıcı sil/bağlantıyı kes (.btn--danger) NEUTRAL -> iptal/vazgeç/diğer (.btn--secondary varsayılan) .btn--primary DIŞINDAKİ varyantlar AYNI prensibi izler: NORMAL = koyu/ transparent + renkli outline + renkli text; HOVER = tam renk FILL + kalın metin (madde 7/8/9). DIŞA TAŞAN glow/box-shadow/outline KASITLI OLARAK KULLANILMIYOR (hedeflenmiş düzeltme) - renk yalnızca butonun kendi background/border alanının İÇİNDE kalır, dışında hiçbir katman render edilmez (focus dahil - bkz. dosya başındaki global focus-visible kuralı: outline:none; box-shadow:none;). */ .btn--primary { position: relative; overflow: hidden; background: var(--ps-gradient); color: #fff; border-color: transparent; box-shadow: none; transition: filter var(--transition-fast), background var(--neon-glow-transition), transform var(--neon-transition); } .btn--primary:hover, .btn--primary:focus-visible { filter: brightness(1.15); color: #fff; box-shadow: none; outline: none; } /* Light sweep: hover başına BİR KEZ, hızlı, düşük opaklık (madde 8/9). */ .btn--primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: skewX(-18deg); pointer-events: none; } .btn--primary:hover::after { animation: btn-sweep var(--neon-sweep-duration) ease forwards; } @keyframes btn-sweep { from { left: -60%; } to { left: 130%; } } /* Görüntüle/Düzenle/İptal/Vazgeç hepsi bu temel sınıfı paylaşıyor (mevcut şablon yapısı) - renk ayrımı aşağıda href örüntüsüyle yapılır, form action/name/id'ye dokunulmadan (madde 21). Eşleşmeyen (İptal/Vazgeç) NEUTRAL kalır: hafif beyaz cam dolgu + gümüş kenar + soft beyaz glow. */ .btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); transition: background var(--neon-transition), color var(--neon-transition), border-color var(--neon-border-transition), box-shadow var(--neon-glow-transition), transform var(--neon-transition); } .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--neutral-hover-bg); border-color: var(--neon-edge-white-strong); box-shadow: none; outline: none; } /* Görüntüle / Detay - CYAN (Borç Detayı için de aynı semantik, madde 21) */ .btn--secondary[href*="action=view"]:hover, .btn--secondary[href*="action=view"]:focus-visible, .btn--secondary[href*="action=debit_detail"]:hover, .btn--secondary[href*="action=debit_detail"]:focus-visible { background: var(--neon-fill-cyan); color: var(--neon-fill-text); font-weight: 700; border-color: var(--neon-cyan); box-shadow: none; outline: none; } /* Düzenle - MAGENTA */ .btn--secondary[href*="action=edit"]:hover, .btn--secondary[href*="action=edit"]:focus-visible { background: var(--neon-fill-magenta); color: var(--neon-fill-text); font-weight: 700; border-color: var(--neon-magenta); box-shadow: none; outline: none; } /* Geri Yükle - GREEN (madde 12). "Geri Yükle" submit butonu href taşımadığı için tek additive class eklendi (bkz. admin/includes/trash/list.php). */ .btn--success { background: rgba(var(--neon-green-rgb), 0.07); color: var(--neon-green); border-color: rgba(var(--neon-green-rgb), 0.55); box-shadow: none; } .btn--success:hover, .btn--success:focus-visible { background: var(--neon-fill-green); color: var(--neon-fill-text); font-weight: 700; border-color: var(--neon-green); box-shadow: none; outline: none; } /* Destructive aksiyonlar (Sil/Kalıcı Sil/Bağlantıyı Kes) - RED (madde 16). */ .btn--danger { background: rgba(var(--neon-red-rgb), 0.08); color: var(--neon-red); border-color: rgba(var(--neon-red-rgb), 0.55); box-shadow: none; transition: background var(--neon-transition), color var(--neon-transition), border-color var(--neon-border-transition); } .btn--danger:hover, .btn--danger:focus-visible { background: var(--neon-fill-red); color: var(--neon-fill-text); font-weight: 700; border-color: var(--neon-red); box-shadow: none; outline: none; } .btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--glass-bg-hover); color: var(--color-text); border-color: var(--neon-edge-white); } .btn--ghost.btn--danger-text { color: var(--color-danger); } .btn--ghost.btn--danger-text:hover { background: var(--color-danger-light); } .btn:active { transform: translateY(0.5px); } .btn--sm { padding: 7px 12px; font-size: 13px; min-height: 34px; } .btn--block { width: 100%; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* --------------------------------------------------------------------- Icon Button (yalnızca ikon içeren, min. 44x44px dokunma alanı) --------------------------------------------------------------------- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0; transition: background var(--neon-transition), color var(--neon-transition), border-color var(--neon-transition), box-shadow var(--neon-transition); } .icon-btn:hover .icon, .icon-btn:focus-visible .icon { transform: scale(1.1); } .icon-btn .icon { transition: transform var(--neon-transition); } .icon-btn:hover, .icon-btn:focus-visible { background: rgba(var(--neon-cyan-rgb), 0.09); color: var(--neon-cyan); border-color: rgba(var(--neon-cyan-rgb), 0.35); box-shadow: none; outline: none; } .icon-btn--sm { width: 36px; height: 36px; } .icon-btn--bordered { border-color: var(--color-border); background: var(--color-surface); } .icon-btn--bordered:hover { border-color: var(--color-border-strong); } .icon-btn--danger:hover { background: var(--color-danger-light); color: var(--color-danger); } /* --------------------------------------------------------------------- Formlar --------------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 16px; } /* --------------------------------------------------------------------- Form Bölümleri (yoğun formlarda mantıksal ayrım - field name/id/action DEĞİŞMEZ, yalnızca görsel gruplama) --------------------------------------------------------------------- */ .form-section { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--color-border); } .form-section:first-child { padding-top: 0; margin-top: 0; border-top: none; } .form-section__title { font-size: 13px; font-weight: 650; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .form-row { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .form-row { flex-direction: row; } .form-row > .form-group { flex: 1; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 13.5px; font-weight: 600; color: var(--color-text); } .form-input, .form-select, .form-textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); font-size: 15px; /* İnput arka planı BİLEREK diğer glass yüzeylerden daha opak (karanlık, "inner surface" hissi) - okunabilirlik/kontrast önceliklidir (bkz. Bölüm 8/18). */ background: var(--color-input-bg); color: var(--color-text); font-family: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); } .form-select option { background: var(--color-select-option-bg); color: var(--color-text); } .form-textarea { resize: vertical; min-height: 100px; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-input-bg-focus); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-hint { font-size: 12.5px; color: var(--color-text-muted); } .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 10px 0; } .checkbox-option { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); cursor: pointer; } .checkbox-option input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .search-input { position: relative; } /* Teklif oluşturma - Barkod Tara butonu (madde A). Önceki markup bu butonu .search-input'un İÇİNE, width:100% olan input'un satır-içi (inline) komşusu olarak koyuyordu; .search-input flex değil, bu yüzden buton input'un genişliği yüzünden zorunlu satır sonuna taşıyor ve aralarında hiçbir boşluk/gap olmadan üst üste biniyordu. Kök çözüm: buton artık .search-input'un DIŞINDA, .form-group'un (zaten flex column + gap:6px) bir sonraki kardeşi - bu yüzden ayrı bir CSS'e gerek kalmadan aradaki boşluk otomatik oluşuyor. Bu kural yalnızca genişliğin input kadar değil, kendi içeriği kadar olmasını sağlar (madde 11 - mobilde taşmasın). */ .offer-barcode-btn { align-self: flex-start; } /* Arama alanları odaklandığında diğer input'lardan biraz daha belirgin neon vurgu alır (madde 16 - Stoklar/Firmalar/Teklifler/Alış&Satış). */ .search-input:focus-within input { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light), 0 0 16px -4px var(--color-primary-glow); } .search-input input { padding-left: 38px; } .search-input::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background-color: var(--color-text-muted); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; } /* --------------------------------------------------------------------- Kart / Badge --------------------------------------------------------------------- */ .card { position: relative; background: var(--color-surface); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 18px; } /* Beyaz edge-lighting: cam kenarına ışık vurmuş hissi. z-index:-1 ile metnin ALTINDA, kartın kendi arka planının ÜSTÜNDE kalır - içerik hiçbir zaman kapanmaz. pointer-events:none, DOM'a ekstra eleman eklemez. */ .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--neon-edge-white) 0%, transparent 32%); } .card--flat { box-shadow: none; background: var(--color-surface-muted); } .card--interactive { cursor: pointer; transition: border-color var(--neon-transition), box-shadow var(--neon-transition), background var(--neon-transition), transform var(--neon-transition); } .card--interactive:hover, .card--interactive:focus-visible { border-color: rgba(var(--neon-cyan-rgb), 0.45); background: var(--glass-bg-hover); box-shadow: var(--shadow-md); outline: none; } .card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .card__title { font-size: 16px; font-weight: 650; letter-spacing: -0.005em; margin: 0; } .badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em; } .badge--success { background: var(--color-success-light); color: var(--color-success); } .badge--danger { background: var(--color-danger-light); color: var(--color-danger); } .badge--warning { background: var(--color-warning-light); color: var(--color-warning); } .badge--info { background: var(--color-info-light); color: var(--color-info); } .badge--neutral { background: var(--glass-bg-hover); color: var(--color-text-muted); } /* Phase 5 - Teklif "Satıldı" durumu için PlutonSoft mor marka rengi kullanılır (ACCEPTED'in yeşilinden bilinçli olarak ayrışsın diye) - yeni bir renk icat edilmedi, mevcut --ps-purple marka token'ı reuse edildi. */ .badge--sold { background: color-mix(in srgb, var(--ps-purple) 18%, transparent); color: var(--ps-purple-dark); } :root:not([data-theme="light"]) .badge--sold { color: var(--ps-purple); } /* --------------------------------------------------------------------- Alert --------------------------------------------------------------------- */ .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; } .alert--error { background: var(--color-danger-light); color: var(--color-danger); border-color: rgba(248, 113, 113, 0.3); } .alert--success { background: var(--color-success-light); color: var(--color-success); border-color: rgba(52, 211, 153, 0.3); } .alert--warning { background: var(--color-warning-light); color: var(--color-warning); border-color: rgba(251, 191, 36, 0.3); } .alert--info { background: var(--color-info-light); color: var(--color-info); border-color: rgba(56, 189, 248, 0.3); } /* --------------------------------------------------------------------- Dashboard --------------------------------------------------------------------- */ .dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; } @media (min-width: 640px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(5, 1fr); } } .stat-card { margin-bottom: 0; position: relative; overflow: hidden; } /* Üst kenarda çok hafif beyaz -> semantic neon geçişli luminous şerit (madde 5/11). Her KPI kartının kendi kimliği var: Son Girilen Stok/genel = cyan (varsayılan), Aktif = green, Kritik = amber, Tükenen = red, Firmalar = magenta. Tüm kartı sarmalayan gradient border DEĞİL. */ .stat-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--neon-white) 0%, var(--neon-cyan) 45%, transparent 85%); opacity: 0.6; pointer-events: none; } .stat-card--active::after { background: linear-gradient(90deg, var(--neon-white) 0%, var(--neon-green) 45%, transparent 85%); } .stat-card--critical::after { background: linear-gradient(90deg, var(--neon-white) 0%, #fbbf24 45%, transparent 85%); } .stat-card--out::after { background: linear-gradient(90deg, var(--neon-white) 0%, var(--neon-red) 45%, transparent 85%); } .stat-card--companies::after { background: linear-gradient(90deg, var(--neon-white) 0%, var(--neon-magenta) 45%, transparent 85%); } .stat-card__label { font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; } .stat-card__value { font-size: 28px; font-weight: 700; } .stat-card--link { display: block; color: inherit; cursor: pointer; transition: box-shadow var(--neon-transition), border-color var(--neon-transition), transform var(--neon-transition), background var(--neon-transition); } .stat-card--link:hover, .stat-card--link:focus-visible { box-shadow: var(--shadow-md); border-color: rgba(var(--neon-cyan-rgb), 0.45); background: rgba(var(--neon-cyan-rgb), 0.045); outline: none; } .stat-card--active:hover, .stat-card--active:focus-visible { box-shadow: var(--shadow-md); border-color: rgba(var(--neon-green-rgb), 0.45); background: rgba(var(--neon-green-rgb), 0.05); outline: none; } .stat-card--critical:hover, .stat-card--critical:focus-visible { box-shadow: var(--shadow-md); border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.05); outline: none; } .stat-card--out:hover, .stat-card--out:focus-visible { box-shadow: var(--shadow-md); border-color: rgba(var(--neon-red-rgb), 0.45); background: rgba(var(--neon-red-rgb), 0.05); outline: none; } .stat-card--companies:hover, .stat-card--companies:focus-visible { box-shadow: var(--shadow-md); border-color: rgba(var(--neon-magenta-rgb), 0.45); background: rgba(var(--neon-magenta-rgb), 0.05); outline: none; } .stat-card--stock { display: flex; flex-direction: column; gap: 4px; } .stat-card__stock-title { font-size: 17px; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-card__stock-meta { display: flex; gap: 6px; font-size: 13.5px; color: var(--color-text-muted); } .stat-card__stock-date { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } /* --------------------------------------------------------------------- Son İşlemler Listesi --------------------------------------------------------------------- */ .activity-list { display: flex; flex-direction: column; } .activity-list__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; } .activity-list__item:last-child { border-bottom: none; } .activity-list__actor { font-weight: 600; flex-shrink: 0; } .activity-list__desc { color: var(--color-text); flex: 1; min-width: 140px; } .activity-list__time { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; } /* --------------------------------------------------------------------- Bildirim Merkezi --------------------------------------------------------------------- */ .notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .notification-item:last-child { border-bottom: none; } .notification-item--unread { background: var(--color-primary-light); border-radius: var(--radius-md); padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; } .notification-item__icon { flex-shrink: 0; color: var(--color-text-muted); } .notification-item__body { flex: 1; min-width: 200px; } .notification-item__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .notification-item__message { color: var(--color-text-muted); font-size: 13px; } .notification-item__time { color: var(--color-text-muted); font-size: 12px; margin-top: 4px; } .notification-item__actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } /* --------------------------------------------------------------------- Boş / Yükleniyor Durumu --------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 40px 16px; color: var(--color-text-muted); } .empty-state__hint { display: block; font-size: 13px; margin-top: 6px; } .loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 16px; color: var(--color-text-muted); font-size: 14px; } .spinner { width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------------------- Liste / Tablo (mobilde kart, masaüstünde tablo) --------------------------------------------------------------------- */ .data-table-wrapper { display: none; overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th, .data-table td { padding: 13px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); white-space: nowrap; } .data-table th { color: var(--color-text-muted); font-weight: 650; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--glass-bg-hover); } .data-table tbody tr { position: relative; transition: background var(--neon-transition), box-shadow var(--neon-transition); } .data-table tbody tr:hover { background: var(--glass-bg-hover); /* Sol kenarda ince luminous gösterge - ağır box-shadow yerine tek taraflı inset (madde 21/35: performans için düşük maliyetli çözüm). */ box-shadow: inset 2px 0 0 var(--neon-cyan); } .data-list { display: flex; flex-direction: column; gap: 10px; } .data-list__item { position: relative; background: var(--color-surface); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 15px; box-shadow: var(--shadow-sm); transition: border-color var(--neon-transition), box-shadow var(--neon-transition); } .data-list__item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--neon-edge-white) 0%, transparent 32%); } /* Mouse/trackpad destekli cihazlarda hover; dokunmatik cihazlarda "stuck hover" oluşmasın diye yalnızca gerçek hover desteği olan ortamda (madde 23/30/36). focus-visible (klavye/erişilebilirlik) HER cihazda çalışır. */ @media (hover: hover) and (pointer: fine) { .data-list__item:hover { border-color: rgba(var(--neon-cyan-rgb), 0.4); box-shadow: var(--shadow-sm); } } .data-list__item:focus-visible { border-color: var(--neon-cyan); box-shadow: var(--shadow-sm); outline: none; } .data-list__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; } .data-list__label { color: var(--color-text-muted); font-size: 12.5px; } @media (min-width: 992px) { .data-table-wrapper { display: block; } .data-list { display: none; } } /* --------------------------------------------------------------------- Modal --------------------------------------------------------------------- */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-overlay-bg); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 16px; z-index: var(--z-modal); } .modal-overlay.is-open { display: flex; } .modal { position: relative; background: var(--color-surface-elevated); -webkit-backdrop-filter: var(--glass-elevated-filter); backdrop-filter: var(--glass-elevated-filter); border: 1px solid var(--glass-elevated-border); border-radius: var(--radius-lg); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px; box-shadow: var(--shadow-lg); } .modal::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--neon-edge-white-strong) 0%, transparent 28%); } .modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .modal__close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-text-muted); } /* Satış Gir POS Sonuç Modalı - .modal-overlay/.modal AYNEN reuse edilir (fixed + viewport-centered + backdrop-blur zaten mevcut), yalnızca içerik düzeni ve renk teması eklenir. */ .pos-result-modal { max-width: 380px; padding: 30px 24px 26px; text-align: center; } .pos-result-modal__close { position: absolute; top: 12px; right: 12px; } .pos-result-modal__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .pos-result-modal__icon .icon { width: 26px; height: 26px; stroke-width: 2.5; } .pos-result-modal__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; } .pos-result-modal__subtitle { color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; margin: 0; white-space: pre-line; } .pos-result-modal__sale-number { margin: 14px 0 0; font-size: 12.5px; color: var(--color-text-muted); } .pos-result-modal--success .pos-result-modal__icon { background: rgba(var(--neon-green-rgb), 0.15); color: var(--color-success); } .pos-result-modal--success .pos-result-modal__title { color: var(--color-success); } .pos-result-modal--error .pos-result-modal__icon { background: rgba(var(--neon-red-rgb), 0.15); color: var(--color-danger); } .pos-result-modal--error .pos-result-modal__title { color: var(--color-danger); } .pos-result-modal--warning .pos-result-modal__icon { background: rgba(251, 191, 36, 0.15); color: var(--color-warning); } .pos-result-modal--warning .pos-result-modal__title { color: var(--color-warning); } /* --------------------------------------------------------------------- Toast --------------------------------------------------------------------- */ .toast-container { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: var(--z-toast); width: calc(100% - 32px); max-width: 380px; } @media (min-width: 768px) { .toast-container { left: auto; right: 24px; bottom: 24px; transform: none; } } .toast { background: var(--color-surface-elevated); -webkit-backdrop-filter: var(--glass-elevated-filter); backdrop-filter: var(--glass-elevated-filter); border: 1px solid var(--glass-elevated-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 13px 16px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; border-left: 4px solid var(--color-primary); animation: toast-in var(--transition-normal); } .toast__icon { flex-shrink: 0; margin-top: 1px; } .toast__body { flex: 1; min-width: 0; line-height: 1.4; } .toast--success { border-left-color: var(--color-success); box-shadow: var(--shadow-lg), var(--neon-green-glow-sm); } .toast--success .toast__icon { color: var(--color-success); } .toast--error { border-left-color: var(--color-danger); box-shadow: var(--shadow-lg), var(--neon-red-glow-sm); } .toast--error .toast__icon { color: var(--color-danger); } .toast--warning { border-left-color: var(--color-warning); box-shadow: var(--shadow-lg), 0 0 12px rgba(251, 191, 36, 0.25); } .toast--warning .toast__icon { color: var(--color-warning); } .toast--info { border-left-color: var(--color-info); box-shadow: var(--shadow-lg), 0 0 12px rgba(56, 189, 248, 0.25); } .toast--info .toast__icon { color: var(--color-info); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- Floating Action Button (Mobil Hızlı İşlem) --------------------------------------------------------------------- */ .fab-container { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-fab); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } @media (min-width: 992px) { .fab-container { display: none; } } .fab { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform var(--neon-transition), box-shadow var(--neon-transition); } .fab:hover, .fab:focus-visible, .fab.is-open { box-shadow: var(--shadow-lg); outline: none; } .fab .icon { width: 24px; height: 24px; transition: transform var(--transition-fast); } .fab.is-open .icon { transform: rotate(45deg); } .fab-menu { display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast); } .fab-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .fab-menu__item { background: var(--color-surface-elevated); -webkit-backdrop-filter: var(--glass-elevated-filter); backdrop-filter: var(--glass-elevated-filter); color: var(--color-text); border: 1px solid var(--glass-elevated-border); padding: 11px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 10px; transition: border-color var(--neon-transition), box-shadow var(--neon-transition); } .fab-menu__item:hover, .fab-menu__item:focus-visible { border-color: rgba(var(--neon-cyan-rgb), 0.5); box-shadow: var(--shadow-lg); outline: none; } /* --------------------------------------------------------------------- Auth Sayfaları (login / setup) --------------------------------------------------------------------- */ .auth-body { /* Ana ambient arka plan body{} kuralından zaten geliyor - burada override EDİLMEZ (login de aynı glass tasarım dilini paylaşır). Ekstra: sabit (animasyonsuz) birkaç yıldız noktası - PlutonSoft.com'daki uzay hissine gönderme, performans maliyeti yok (statik radial-gradient). */ position: relative; overflow-x: hidden; background-image: radial-gradient(1.5px 1.5px at 15% 20%, rgba(255, 255, 255, 0.55), transparent 100%), radial-gradient(1.5px 1.5px at 85% 15%, rgba(255, 255, 255, 0.4), transparent 100%), radial-gradient(1px 1px at 70% 75%, rgba(255, 255, 255, 0.5), transparent 100%), radial-gradient(1px 1px at 25% 80%, rgba(255, 255, 255, 0.35), transparent 100%), radial-gradient(1.5px 1.5px at 92% 60%, rgba(255, 255, 255, 0.4), transparent 100%), radial-gradient(1px 1px at 45% 35%, rgba(255, 255, 255, 0.3), transparent 100%); background-repeat: no-repeat; } .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; } .auth-card { max-width: 420px; width: 100%; margin-bottom: 0; padding: 36px 30px; background: var(--color-surface-elevated); -webkit-backdrop-filter: var(--glass-elevated-filter); backdrop-filter: var(--glass-elevated-filter); border: 1px solid var(--glass-elevated-border); box-shadow: var(--shadow-lg); position: relative; } /* Alt-sağ köşede çok hafif violet/mavi yansıma - üst-sol beyaz highlight zaten .card::before'dan geliyor (madde 28, iki tonlu premium edge). */ .auth-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 88% 92%, var(--ambient-card-reflection), transparent 45%); } .auth-card__mark { width: 48px; height: 48px; margin: 0 auto 18px; display: block; object-fit: contain; filter: drop-shadow(0 6px 18px var(--color-primary-glow)); } .auth-card__brand { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text); text-align: center; margin-bottom: 8px; background: linear-gradient(135deg, #fff 30%, var(--color-primary-hover) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-card__subtitle { text-align: center; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 28px; } /* --------------------------------------------------------------------- Şube Seç Ekranı (Phase 2) --------------------------------------------------------------------- */ .branch-select-form { display: flex; flex-direction: column; gap: 10px; } .branch-select-form__option { justify-content: flex-start; text-align: left; gap: 10px; } /* --------------------------------------------------------------------- Placeholder Modül Sayfaları --------------------------------------------------------------------- */ .module-placeholder { text-align: center; padding: 60px 20px; } .module-placeholder__icon { margin-bottom: 12px; color: var(--color-text-muted); } .module-placeholder__icon .icon { width: 40px; height: 40px; } .module-placeholder__icon--danger { color: var(--color-danger); } .module-placeholder__title { font-size: 18px; margin-bottom: 6px; } .module-placeholder__text { color: var(--color-text-muted); font-size: 14px; max-width: 420px; margin: 0 auto; } /* --------------------------------------------------------------------- Stok Modülü - Liste Araç Çubuğu / Filtre Chip'leri --------------------------------------------------------------------- */ .list-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .list-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .list-toolbar__title { font-size: 20px; margin: 0; } .list-toolbar__search { width: 100%; } .filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .filter-chip { flex-shrink: 0; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .filter-chip:hover { border-color: rgba(var(--neon-cyan-rgb), 0.4); background: var(--glass-bg-hover); } .filter-chip.is-active { background: var(--neon-fill-cyan); border-color: var(--neon-cyan); color: var(--neon-fill-text); box-shadow: none; } .filter-chip:focus-visible { outline: none; box-shadow: none; border-color: var(--neon-cyan); } .filter-chip.is-active:hover { background: var(--color-primary-dark); } @media (min-width: 768px) { .list-toolbar__search { max-width: 360px; } } /* Tahsilat & Ödemeler - firma/yöntem/tarih filtre satırı. Yalnızca mevcut form-select/form-input token'larını (dark+light theme-aware) satır düzeninde diziyor, yeni renk/glass tanımı içermiyor. */ .finance-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .finance-filter-row .form-select, .finance-filter-row .form-input { width: auto; min-width: 160px; } @media (max-width: 480px) { .finance-filter-row .form-select, .finance-filter-row .form-input { width: 100%; } } /* --------------------------------------------------------------------- Stok Modülü - Favori Yıldızı --------------------------------------------------------------------- */ .favorite-form { display: inline-flex; } .favorite-btn { display: inline-flex; background: none; border: none; border-radius: var(--radius-xs); cursor: pointer; color: var(--color-text-muted); padding: 4px; transition: color var(--neon-transition), filter var(--neon-transition); } .favorite-btn:hover, .favorite-btn:focus-visible { color: var(--color-warning); outline: none; } .favorite-btn .icon { width: 20px; height: 20px; } .favorite-btn.is-active { color: var(--color-warning); } .favorite-btn.is-active .icon { fill: currentColor; } /* --------------------------------------------------------------------- Stok Modülü - Mobil Kart --------------------------------------------------------------------- */ .stock-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .stock-card__title { flex: 1; font-weight: 700; font-size: 15px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stock-card__sku { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; } .stock-card__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .stock-card__actions .btn { flex: 1; min-width: 90px; } /* Kök neden (madde 23): display:flex bir üzerinde varsayılan align-items:stretch ile çalışıyordu - satırdaki başka bir hücre (örn. iki satırlı Açıklama) satırı uzattığında buton da o tam yüksekliğe STRETCH ediliyor, bu da satırdan satıra buton boyutunun/hizasının tutarsız görünmesine yol açıyordu. align-items:center + sabit min-height ile buton her zaman kendi doğal boyutunda ve hücrenin dikey ortasında kalır (madde 24/26/27) - bu düzeltme uygulama genelindeki TÜM data-table__actions hücrelerine (Stok/Firma/Teklif/Admin/vb.) de olumlu şekilde yansır, hiçbir modülü bozmaz. */ .data-table__actions { display: flex; align-items: center; gap: 8px; min-height: 34px; white-space: nowrap; } /* Referanslar modülü - liste/form logo önizlemesi (madde: admin/references.php). */ .reference-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: var(--color-surface-muted); border: 1px solid var(--color-border); padding: 4px; } .reference-thumb--lg { width: 96px; height: 96px; padding: 8px; } /* --------------------------------------------------------------------- Stok Ürün Fotoğrafı - oluşturma/düzenleme formundaki önizleme, teklif ürün kartı/sepet satırındaki küçük thumbnail. --------------------------------------------------------------------- */ .product-image-thumb { width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-surface-muted); border: 1px solid var(--color-border); } .product-image-thumb--lg { width: 96px; height: 96px; } /* --------------------------------------------------------------------- Referanslar - Masaüstü Tablo İşlemler Hücresi Kök neden: global .data-table__actions class'ı display:flex'i doğrudan 'ye uyguluyor - bu, table-cell davranışını (satır yüksekliği/border hizası tarayıcının tablo motoruna bırakılmalı) bozup İşlemler hücresini diğer sütunlardan farklı hizalıyordu (madde: finance-table-actions ile aynı kök neden, aynı çözüm deseni). Bu tablo diğer modüllerin .data-table__actions kullanımını ETKİLEMEMESİ için AYRI, sayfaya özel class'larla çözülür - global .data-table__actions'a dokunulmadı. Flex, 'nin KENDİSİNE değil İÇİNDEKİ wrapper div'e uygulanır - normal table-cell olarak kalır (vertical-align:middle), satır yüksekliği/border hizası tutarlı kalır (firma adı 2 satıra düşse bile). --------------------------------------------------------------------- */ .references-table-actions-cell { vertical-align: middle; } .references-table-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .references-table-actions .btn { flex-shrink: 0; } /* --------------------------------------------------------------------- Tahsilat & Ödemeler - Masaüstü Tablo İşlemler Hücresi Yalnızca bu tabloya özel, diğer modüllerin .data-table__actions'ına dokunmaz. Flex, 'nin KENDİSİNE değil İÇİNDEKİ wrapper'a uygulanır - normal table-cell olarak kalır (vertical-align:middle ile), satır yüksekliği/border hizası tarayıcının tablo motoruna bırakılır. Bu sayede çok satırlı komşu hücreler (Açıklama/Referans) olsa bile İşlemler hücresi satırın dikey ortasında sabit kalır; hover transform (translateY/scale) yalnızca görsel olduğundan layout'u/satır çizgisini etkilemez. Mobil .stock-card__actions kart yapısına dokunulmadı. --------------------------------------------------------------------- */ .finance-table-actions-cell { vertical-align: middle; } .finance-table-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: nowrap; } .finance-table-actions .btn { flex-shrink: 0; } /* --------------------------------------------------------------------- Finans Belge / Dekont Eki - mevcut glass/card/badge token'larını reuse eder, ayrı bir tasarım sistemi yazılmadı (madde 33). Dosya adı uzunsa ellipsis ile kontrollü kısaltılır, taşan içerik satır içinde wrap eder (madde 49) - masaüstünde tek satır + ellipsis, mobilde/darda serbest wrap. --------------------------------------------------------------------- */ .attachment-list { display: flex; flex-direction: column; gap: 8px; } .attachment-list--compact { margin-top: 6px; gap: 6px; } .attachment-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); min-width: 0; } .attachment-row__icon { display: inline-flex; flex-shrink: 0; color: var(--neon-cyan); } .attachment-row__name { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .attachment-row__meta { flex-shrink: 0; color: var(--color-text-muted); font-size: 12.5px; white-space: nowrap; } .attachment-row__actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex-shrink: 0; } @media (max-width: 480px) { .attachment-row { flex-wrap: wrap; } .attachment-row__name { flex-basis: 100%; white-space: normal; word-break: break-word; } .attachment-row__actions { flex-wrap: wrap; } } /* --------------------------------------------------------------------- Alış & Satış Modülü - Mobil Kart + Marj Önizleme --------------------------------------------------------------------- */ .pricing-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .pricing-card__title { flex: 1; font-weight: 700; font-size: 15px; color: var(--color-text); } .pricing-card__sku { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; } .pricing-card__actions { display: flex; gap: 8px; margin-top: 12px; } .pricing-card__actions .btn { flex: 1; } .pricing-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; background: var(--color-surface-muted, rgba(0, 0, 0, 0.03)); border-radius: var(--radius-md, 10px); padding: 14px; margin: 4px 0 18px; } .pricing-preview__row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-text-muted); } .pricing-preview__row strong { font-size: 15px; color: var(--color-text); } /* --------------------------------------------------------------------- Stok Modülü - Form --------------------------------------------------------------------- */ .form-card { max-width: 640px; } .form-error { font-size: 12.5px; color: var(--color-danger); } .form-group--checkbox { flex-direction: row; } .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; } .input-prefix { position: relative; } .input-prefix__symbol { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 15px; pointer-events: none; } .input-prefix input { padding-left: 30px; } /* --------------------------------------------------------------------- Çoklu para birimi - tutar input'u yanında kompakt kod seçici (₺/$/€). Mevcut fiyat input tasarımını bozmadan tek satırda oturur; dar ekranlarda alt alta düşer. --------------------------------------------------------------------- */ .input-with-currency { display: flex; gap: 8px; align-items: stretch; } .input-with-currency .form-input { flex: 1 1 auto; min-width: 0; } .form-select--currency { flex: 0 0 auto; width: auto; min-width: 92px; padding: 11px 10px; } @media (max-width: 480px) { .input-with-currency { flex-wrap: wrap; } .form-select--currency { flex: 1 1 100%; } } /* --------------------------------------------------------------------- Stok Modülü - QR / Barkod Mevcut input/buton/modal tasarım dilini kullanır - yeni bir görsel dil İCAT EDİLMEDİ (madde 15). Kamera görüntüsü .form-input ile aynı border/radius/surface mantığını taşır. --------------------------------------------------------------------- */ .barcode-input-row { display: flex; gap: 8px; align-items: stretch; } .barcode-input-row .form-input { flex: 1; min-width: 0; } .barcode-input-row .btn { flex-shrink: 0; white-space: nowrap; } .barcode-scan-modal { max-width: 420px; } .barcode-scan__viewport { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); border: 1px solid var(--color-input-border); background: #000; overflow: hidden; } .barcode-scan__viewport video { width: 100%; height: 100%; object-fit: cover; } /* Dekoratif hedef çerçevesi - kullanıcıya kodu nereye tutacağını gösterir, herhangi bir kütüphane/ağır efekt gerektirmez (saf CSS). */ .barcode-scan__frame { position: absolute; inset: 14%; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius-sm); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.25); pointer-events: none; } .barcode-scan__status { text-align: center; color: var(--color-text-secondary); font-size: 13.5px; margin: 12px 0 0; } /* Çoklu tarama - başarılı/uyarı/hata geri bildirimi (madde 8), 1-2sn sonra otomatik gizlenir (bkz. barcode-scanner.js window.barcodeMultiScanNotify). */ .barcode-scan__multi-feedback { text-align: center; font-size: 13.5px; font-weight: 600; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-surface-muted); border: 1px solid var(--color-border); } .barcode-scan__multi-feedback--success { color: var(--color-success); border-color: rgba(var(--neon-green-rgb), 0.35); } .barcode-scan__multi-feedback--warning { color: var(--color-warning); } .barcode-scan__multi-feedback--error { color: var(--color-danger); } .barcode-scan__multi-feedback--info { color: var(--color-text-secondary); } /* Çoklu tarama - "Taranan ürün: N" sayacı (madde 22, opsiyonel/önerilir). */ .barcode-scan__counter { text-align: center; color: var(--color-text-muted); font-size: 12.5px; margin: 8px 0 0; } /* QR/Barkod Hızlı İşlem - "Taranan Ürünler" birikimli sonuç listesi (madde 5/20/21 - kamera modalı tüm ürünleri doldurmak zorunda değil, ana sayfadaki bu liste güncellenir). */ .scanned-products-list { display: flex; flex-direction: column; gap: 8px; } .scanned-product-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); } .scanned-product-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .scanned-product-card__title { font-weight: 600; } .scanned-product-card__meta { font-size: 12.5px; color: var(--color-text-muted); display: flex; gap: 8px; flex-wrap: wrap; } .scanned-product-card__actions { display: flex; gap: 8px; flex-wrap: wrap; } .barcode-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .barcode-status-row code { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-xs); padding: 3px 8px; font-size: 13px; color: var(--color-text); } /* --------------------------------------------------------------------- Stok Modülü - Detay Ekranı --------------------------------------------------------------------- */ .detail-card__actions { display: flex; gap: 8px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (min-width: 640px) { .detail-grid { grid-template-columns: repeat(3, 1fr); } } .detail-grid__item { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .detail-grid__item--full { grid-column: 1 / -1; } .detail-description { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); } .detail-description p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; } .detail-footer { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); } .detail-status-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); } .status-action-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } /* --------------------------------------------------------------------- Firma Modülü - Mobil Kart --------------------------------------------------------------------- */ .company-card__title { display: block; font-weight: 700; font-size: 15px; color: var(--color-text); margin-bottom: 8px; } .company-card__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .company-card__actions .btn { flex: 1; min-width: 90px; } /* --------------------------------------------------------------------- Firma Modülü - Form (Firma + İletişim Kişileri) --------------------------------------------------------------------- */ .form-card--wide { max-width: 760px; } .form-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; } .form-section-header h3 { font-size: 15px; } .contact-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; } .contact-row__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .contact-row__title { font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .hidden-form { display: none; } /* --------------------------------------------------------------------- Firma Modülü - Detay: İletişim Kişisi Kartları --------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } .contact-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; } .contact-card__name { font-weight: 700; font-size: 15px; } .contact-card__position { color: var(--color-text-muted); font-size: 13px; margin-bottom: 8px; } .contact-card__row { font-size: 13.5px; margin-top: 6px; display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); } .contact-card__row .icon { color: var(--color-text-muted); } .contact-card__note { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); } .contact-card__delete { margin-top: 10px; } /* --------------------------------------------------------------------- Teklif Modülü - Layout (mobilde tek kolon, masaüstünde 2 kolon) --------------------------------------------------------------------- */ .offer-layout { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; } .offer-layout__main { min-width: 0; } .offer-layout__side { display: flex; flex-direction: column; gap: 18px; } @media (min-width: 1200px) { .offer-layout { flex-direction: row; align-items: flex-start; } .offer-layout__main { flex: 2; } .offer-layout__side { flex: 1; position: sticky; top: 76px; } } .offer-section-title { font-size: 14px; margin: 18px 0 10px; } /* --------------------------------------------------------------------- Teklif Modülü - Stok Seçici Kartları --------------------------------------------------------------------- */ .offer-stock-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .offer-stock-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .offer-stock-grid { grid-template-columns: repeat(2, 1fr); } } .offer-stock-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--color-surface); } .offer-stock-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .offer-stock-card__title-group { display: flex; align-items: center; gap: 8px; min-width: 0; } .offer-stock-card__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm, 4px); border: 1px solid var(--color-border); flex-shrink: 0; } .offer-stock-card__title { font-weight: 600; font-size: 14px; } .offer-stock-card__sku { font-size: 12px; color: var(--color-text-muted); } /* Teklif SENT Stok görevi - "+ Ürün Ekle" modalı, mevcut .offer-stock-grid/ .offer-stock-card'ı AYNEN reuse eder (create.php ile birebir aynı kart görünümü); yalnızca modal genişliği ürün kartları için biraz artırılır ve uzun listelerde "Kapat" butonu ekran dışına taşmasın diye grid'e kendi scroll alanı verilir. */ .add-offer-item-modal { max-width: 640px; } .add-offer-item-grid { max-height: 50vh; overflow-y: auto; padding-right: 4px; } .offer-stock-card__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--color-text-muted); } .offer-stock-card__add { margin-top: 4px; width: 100%; } .offer-search-empty { padding: 20px 16px; } /* --------------------------------------------------------------------- Teklif Modülü - Seçili Ürünler (Sepet) --------------------------------------------------------------------- */ .offer-cart-card { margin-bottom: 0; } .offer-cart-empty { padding: 20px 12px; font-size: 13.5px; } .offer-item-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; } .offer-item-row:last-child { margin-bottom: 0; } .offer-item-row__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .offer-item-row__title-group { display: flex; align-items: center; gap: 8px; min-width: 0; } .offer-item-row__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm, 4px); border: 1px solid var(--color-border); flex-shrink: 0; } .offer-item-row__title { font-weight: 600; font-size: 14px; } .offer-item-row__sku { font-size: 12px; color: var(--color-text-muted); } .offer-item-row__warning { font-size: 12.5px; color: var(--color-warning); margin-top: 6px; } .offer-item-row__calc { font-size: 12.5px; color: var(--color-text-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } /* --------------------------------------------------------------------- Teklif Modülü - Özet / KDV Dağılımı --------------------------------------------------------------------- */ .offer-summary-card { margin-bottom: 0; position: relative; overflow: hidden; } /* Teklif özeti finansal odak yüzeyi (madde 19) - üst kenarda çok hafif beyaz->violet/mavi ambient yansıma. Rakamların okunabilirliği bozulmaz (yalnızca üst 2px şerit, içerik etkilenmez). */ .offer-summary-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--neon-white) 0%, var(--neon-cyan) 40%, var(--neon-magenta) 75%, transparent 95%); opacity: 0.5; pointer-events: none; } .offer-general-discount { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .offer-general-discount .form-row { gap: 8px; } .offer-summary { display: flex; flex-direction: column; gap: 8px; } .offer-summary__row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; } .offer-summary__row--total { font-size: 17px; font-weight: 700; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--color-border); } .vat-breakdown { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 6px; } .vat-breakdown__row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--color-text-muted); } /* --------------------------------------------------------------------- Yardımcı Sınıflar --------------------------------------------------------------------- */ .text-muted { color: var(--color-text-muted); } .mt-14 { margin-top: 14px; } .mb-14 { margin-bottom: 14px; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 8px; } /* --------------------------------------------------------------------- Çöp Kutusu --------------------------------------------------------------------- */ .inline-form { display: inline-block; } .bulk-actions-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .trash-select-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; } .trash-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .trash-cleanup-card { margin-bottom: 16px; } .trash-cleanup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } /* --------------------------------------------------------------------- Şube Notları --------------------------------------------------------------------- */ .branch-note-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .branch-note-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .branch-note-grid { grid-template-columns: repeat(3, 1fr); } } .branch-note-card { display: flex; flex-direction: column; gap: 10px; } .branch-note-card__text { white-space: pre-line; word-break: break-word; margin: 0; } /* Rapor Geçmişi - kompakt yatay kartlar (madde 8/46). */ .report-history-grid { display: flex; flex-direction: column; gap: 8px; } .report-history-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); flex-wrap: wrap; } .report-history-card__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; color: inherit; text-decoration: none; flex: 1 1 auto; min-width: 0; } .report-history-card__link:hover .report-history-card__title { text-decoration: underline; } .report-history-card__date { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; } .report-history-card__title { font-weight: 600; } .report-history-card__meta { font-size: 13px; color: var(--color-text-muted); width: 100%; } .branch-note-card__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--color-text-muted); } .branch-note-card__remaining { font-size: 13px; font-weight: 600; color: var(--color-text-muted); } .branch-note-card__completed-info { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } /* --------------------------------------------------------------------- Sevk İrsaliyesi modülü (admin/delivery-notes.php) --------------------------------------------------------------------- */ .dn-picker { margin-bottom: 14px; } .dn-picker__list { max-height: 280px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border, rgba(148, 163, 184, 0.25)); border-radius: 10px; } .dn-picker__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18)); } .dn-picker__item:last-child { border-bottom: 0; } .dn-picker__item[hidden] { display: none; } .dn-picker__info { flex: 1 1 auto; min-width: 0; } .dn-picker__title { font-weight: 600; overflow-wrap: anywhere; } .dn-picker__meta { font-size: 12px; opacity: 0.75; overflow-wrap: anywhere; } .dn-picker__empty { padding: 12px; opacity: 0.75; } .dn-picker__item .btn { flex: 0 0 auto; } .dn-items { margin-bottom: 14px; } .dn-form-actions { display: flex; flex-wrap: wrap; gap: 10px; } .dn-form-actions .btn { flex: 1 1 200px; } .dn-actions { display: flex; flex-wrap: wrap; gap: 8px; } .dn-pre { white-space: pre-wrap; overflow-wrap: anywhere; } .dn-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; } .dn-alloc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }