/* ============================================================ panel-luxury.css — Design System Refresh Layer Loads LAST in ; intentional cascade winner. Hibrit dil: Modern SaaS (Linear/Vercel) + Enterprise (Atlassian) - Minimal, ince border, restrained shadow - Yoğun bilgi yoğunluğu, kompakt padding - 5 palet × dark/light ile uyumlu (yalnızca --ui-* token'ları kullanır) - Bootstrap 5 sınıflarını üzerine yazar, HTML değişikliği gerekmez ============================================================ */ /* ---------- 1. Design Tokens (palette-agnostic) ---------- */ :root { /* Typography stack — already-loaded Google Fonts */ --ds-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ds-font-display: 'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, sans-serif; --ds-font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (modular, 1.125 ratio centered on 14px body) */ --ds-fs-2xs: 10px; --ds-fs-xs: 11px; --ds-fs-sm: 12px; --ds-fs-md: 13px; --ds-fs-base:14px; --ds-fs-lg: 15px; --ds-fs-xl: 16px; --ds-fs-2xl: 18px; --ds-fs-3xl: 20px; --ds-fs-4xl: 24px; --ds-fs-5xl: 30px; --ds-fs-6xl: 36px; /* Weights */ --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold:600; --ds-fw-bold: 700; /* Line heights */ --ds-lh-tight: 1.2; --ds-lh-normal: 1.45; --ds-lh-relaxed: 1.65; /* Letter-spacing */ --ds-ls-tight: -0.011em; --ds-ls-normal: 0; --ds-ls-wide: 0.04em; --ds-ls-caps: 0.08em; /* Spacing scale (4px base) */ --ds-sp-0: 0; --ds-sp-1: 2px; --ds-sp-2: 4px; --ds-sp-3: 6px; --ds-sp-4: 8px; --ds-sp-5: 10px; --ds-sp-6: 12px; --ds-sp-8: 16px; --ds-sp-10: 20px; --ds-sp-12: 24px; --ds-sp-16: 32px; --ds-sp-20: 40px; --ds-sp-24: 48px; --ds-sp-32: 64px; /* Radius */ --ds-radius-xs: 4px; --ds-radius-sm: 6px; --ds-radius-md: 8px; --ds-radius-lg: 10px; --ds-radius-xl: 14px; --ds-radius-pill: 999px; /* Shadow scale — Linear-grade subtle */ --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04); --ds-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 8px rgba(15, 23, 42, 0.04); --ds-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 12px 24px rgba(15, 23, 42, 0.06); --ds-shadow-xl: 0 8px 12px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08); --ds-shadow-focus: 0 0 0 3px rgba(var(--ui-primary-rgb, 59, 130, 246), 0.22); /* Motion */ --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ds-dur-fast: 120ms; --ds-dur-base: 180ms; --ds-dur-slow: 260ms; /* Sizing — compact for enterprise density */ --ds-h-xs: 24px; --ds-h-sm: 28px; --ds-h-md: 32px; --ds-h-lg: 36px; --ds-h-xl: 40px; } /* Dark mode shadow tweaks */ html[data-theme="dark"] { --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.28); --ds-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.28); --ds-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.38), 0 12px 24px rgba(0, 0, 0, 0.32); --ds-shadow-xl: 0 8px 12px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.36); } /* ---------- 2. Global typographic baseline ---------- */ html, body { font-family: var(--ds-font-sans) !important; font-size: var(--ds-fs-base) !important; line-height: var(--ds-lh-normal) !important; letter-spacing: var(--ds-ls-tight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01', 'ss03'; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-semibold) !important; letter-spacing: var(--ds-ls-tight); line-height: var(--ds-lh-tight); color: var(--ui-text); } h1, .h1 { font-size: var(--ds-fs-5xl) !important; font-weight: var(--ds-fw-bold) !important; } h2, .h2 { font-size: var(--ds-fs-4xl) !important; } h3, .h3 { font-size: var(--ds-fs-3xl) !important; } h4, .h4 { font-size: var(--ds-fs-2xl) !important; } h5, .h5 { font-size: var(--ds-fs-xl) !important; } h6, .h6 { font-size: var(--ds-fs-lg) !important; } small, .small, .text-muted { font-size: var(--ds-fs-sm) !important; } code, kbd, pre, samp, .font-monospace { font-family: var(--ds-font-mono) !important; font-size: 0.92em; font-feature-settings: 'zero', 'ss01'; } /* Tabular numerics for tables/dashboards */ .table, .metric-card, .stat-value, .badge, .invoice-amount, [data-tabular] { font-variant-numeric: tabular-nums; } /* ---------- 3. Base body / layout chrome ---------- */ body { background: var(--ui-bg); color: var(--ui-text); -webkit-text-size-adjust: 100%; } ::selection { background: rgba(var(--ui-primary-rgb, 59, 130, 246), 0.20); color: var(--ui-text); } /* M3: Sadece blob tanımlanmış paletlerde subdue et (boş ::before reflow'unu önle) */ html[data-palette="slate"] body::before, html[data-palette="midnight"] body::before, html[data-palette="ocean"] body::before, html[data-palette="ember"] body::before, html[data-palette="luminescent"] body::before, html[data-palette="verdant"] body::before { opacity: 0.55 !important; filter: saturate(0.85); will-change: opacity; } html[data-theme="dark"][data-palette] body::before { opacity: 0.45 !important; } /* Scrollbar — minimal, modern */ * { scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: var(--ds-radius-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ui-muted); background-clip: padding-box; border: 2px solid transparent; } /* ---------- 4. Buttons ---------- */ /* :not(.btn-close) Bootstrap'ın modal X butonunu (kare, SVG bg) korumak için */ .btn:not(.btn-close) { font-family: var(--ds-font-sans) !important; font-weight: var(--ds-fw-medium) !important; font-size: var(--ds-fs-md) !important; letter-spacing: 0; border-radius: var(--ds-radius-md) !important; padding: 0 var(--ds-sp-6) !important; height: var(--ds-h-md); display: inline-flex !important; align-items: center; justify-content: center; gap: var(--ds-sp-3); border-width: 1px !important; transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease) !important; white-space: nowrap; } .btn:focus-visible { outline: none !important; box-shadow: var(--ds-shadow-focus) !important; } .btn:not(.btn-close):active { transform: translateY(0.5px); } /* Input-group içinde butonlar form-control yüksekliğine hizalanır (M1) */ .input-group .btn:not(.btn-close) { height: var(--ds-h-lg); } .btn-sm { font-size: var(--ds-fs-sm) !important; height: var(--ds-h-sm); padding: 0 var(--ds-sp-5) !important; border-radius: var(--ds-radius-sm) !important; gap: var(--ds-sp-2); } .btn-lg { font-size: var(--ds-fs-lg) !important; height: var(--ds-h-xl); padding: 0 var(--ds-sp-8) !important; border-radius: var(--ds-radius-md) !important; } /* Primary — solid, subtle elevation */ .btn-primary, .btn-primary:focus { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; box-shadow: var(--ds-shadow-xs); } .btn-primary:hover { background: rgba(var(--ui-primary-rgb), 0.92) !important; border-color: rgba(var(--ui-primary-rgb), 0.92) !important; box-shadow: var(--ds-shadow-sm); } /* Secondary / outline */ .btn-secondary, .btn-outline-secondary { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border-strong) !important; } .btn-secondary:hover, .btn-outline-secondary:hover { background: var(--ui-surface-2) !important; border-color: var(--ui-muted-soft) !important; color: var(--ui-text) !important; } .btn-outline-primary { background: transparent !important; color: var(--ui-primary) !important; border-color: rgba(var(--ui-primary-rgb), 0.35) !important; } .btn-outline-primary:hover { background: rgba(var(--ui-primary-rgb), 0.08) !important; border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; } .btn-outline-danger { color: var(--ui-danger) !important; border-color: rgba(239, 68, 68, 0.35) !important; background: transparent !important; } .btn-outline-danger:hover { background: rgba(239, 68, 68, 0.10) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } .btn-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; } .btn-warning { background: var(--ui-warning) !important; border-color: var(--ui-warning) !important; color: #1a1206 !important; } .btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; } /* Ghost / link buttons */ .btn-link { color: var(--ui-primary) !important; text-decoration: none !important; height: auto; padding: var(--ds-sp-1) var(--ds-sp-3) !important; } .btn-link:hover { background: rgba(var(--ui-primary-rgb), 0.08) !important; } /* Icon-only buttons */ .btn .bi { font-size: 1em; line-height: 1; } .btn-sm .bi { font-size: 0.95em; } /* ---------- 5. Cards ---------- */ .card, .glass-card { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ds-radius-lg) !important; box-shadow: var(--ds-shadow-xs) !important; transition: box-shadow var(--ds-dur-base) var(--ds-ease), border-color var(--ds-dur-base) var(--ds-ease), transform var(--ds-dur-base) var(--ds-ease); } /* M2: hover lift sadece tıklanabilir kartlarda — statik bilgi kartlarında değil */ a.card:hover, .card[role="button"]:hover, .card.clickable:hover, .card.is-link:hover, .metric-card:hover, .stat-card:hover, .selector-card:hover, .customer-link-card:hover { box-shadow: var(--ds-shadow-sm) !important; border-color: var(--ui-border-strong) !important; } .card-header { background: transparent !important; border-bottom: 1px solid var(--ui-border) !important; padding: var(--ds-sp-6) var(--ds-sp-8) !important; font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-md); letter-spacing: 0.04em; /* m5: kompakt yazıda 0.08em fazlaydı */ text-transform: uppercase; color: var(--ui-muted); } .card-body { padding: var(--ds-sp-8) !important; } .card-footer { background: var(--ui-surface-2) !important; border-top: 1px solid var(--ui-border) !important; padding: var(--ds-sp-6) var(--ds-sp-8) !important; } .card-title { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-semibold) !important; font-size: var(--ds-fs-2xl) !important; margin-bottom: var(--ds-sp-2); color: var(--ui-text); } .card-subtitle, .card-text + .text-muted { font-size: var(--ds-fs-sm); color: var(--ui-muted); } /* ---------- 6. Tables (Atlassian-style dense) ---------- */ .table { font-size: var(--ds-fs-md) !important; color: var(--ui-text) !important; margin-bottom: 0; } .table > :not(caption) > * > * { padding: var(--ds-sp-4) var(--ds-sp-6) !important; vertical-align: middle; border-bottom-color: var(--ui-border) !important; } .table thead th, .table-modern thead th { background: var(--ui-surface-2) !important; color: var(--ui-muted) !important; font-weight: var(--ds-fw-semibold) !important; font-size: var(--ds-fs-xs) !important; letter-spacing: var(--ds-ls-caps); text-transform: uppercase; border-bottom: 1px solid var(--ui-border-strong) !important; padding: var(--ds-sp-5) var(--ds-sp-6) !important; white-space: nowrap; } .table tbody tr { transition: background-color var(--ds-dur-fast) var(--ds-ease); } .table tbody tr:hover { background: rgba(var(--ui-primary-rgb), 0.045) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--ui-surface-2) !important; color: inherit; } /* M6: Tablo köşe yuvarlaması — .table-responsive sarımı dahil */ .card > .table:first-child thead th:first-child, .card > .table-responsive:first-child > .table thead th:first-child { border-top-left-radius: var(--ds-radius-lg); } .card > .table:first-child thead th:last-child, .card > .table-responsive:first-child > .table thead th:last-child { border-top-right-radius: var(--ds-radius-lg); } .card > .table-responsive { border-radius: var(--ds-radius-lg); overflow: hidden; } /* ---------- 7. Forms ---------- */ .form-control, .form-select, .input-group-text { font-family: var(--ds-font-sans) !important; font-size: var(--ds-fs-md) !important; height: var(--ds-h-lg); padding: 0 var(--ds-sp-5) !important; background: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ds-radius-md) !important; box-shadow: none !important; transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease); } textarea.form-control { height: auto; padding: var(--ds-sp-4) var(--ds-sp-5) !important; min-height: 80px; line-height: var(--ds-lh-normal); } .form-control:focus, .form-select:focus { border-color: var(--ui-primary) !important; box-shadow: var(--ds-shadow-focus) !important; outline: none !important; } .form-control::placeholder { color: var(--ui-muted-soft); opacity: 1; } .form-control:disabled, .form-select:disabled { background: var(--ui-surface-2) !important; color: var(--ui-muted); cursor: not-allowed; } .form-control-sm, .form-select-sm { height: var(--ds-h-sm); font-size: var(--ds-fs-sm) !important; padding: 0 var(--ds-sp-4) !important; border-radius: var(--ds-radius-sm) !important; } .form-control-lg, .form-select-lg { height: var(--ds-h-xl); font-size: var(--ds-fs-lg) !important; } .form-label { font-size: var(--ds-fs-sm) !important; font-weight: var(--ds-fw-medium) !important; color: var(--ui-text); margin-bottom: var(--ds-sp-2); } .form-text { font-size: var(--ds-fs-xs); color: var(--ui-muted-soft); } .input-group-text { background: var(--ui-surface-2) !important; color: var(--ui-muted); border-color: var(--ui-border-strong) !important; } .form-check-input { border-color: var(--ui-border-strong); cursor: pointer; } .form-check-input:checked { background-color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; } .form-check-input:focus { box-shadow: var(--ds-shadow-focus) !important; } .form-check-label { font-size: var(--ds-fs-md); color: var(--ui-text); } /* ---------- 8. Modals ---------- */ .modal-content { border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ds-radius-xl) !important; background: var(--ui-surface) !important; box-shadow: var(--ds-shadow-xl) !important; overflow: hidden; } .modal-header { padding: var(--ds-sp-8) var(--ds-sp-10) !important; border-bottom: 1px solid var(--ui-border) !important; background: var(--ui-surface) !important; } .modal-title { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-semibold) !important; font-size: var(--ds-fs-2xl) !important; letter-spacing: var(--ds-ls-tight); color: var(--ui-text); } .modal-body { padding: var(--ds-sp-10) !important; font-size: var(--ds-fs-md); } .modal-footer { padding: var(--ds-sp-6) var(--ds-sp-10) !important; border-top: 1px solid var(--ui-border) !important; background: var(--ui-surface-2) !important; gap: var(--ds-sp-3); } .modal-backdrop.show { opacity: 0.55; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ---------- 9. Badges ---------- */ .badge { font-family: var(--ds-font-sans) !important; font-weight: var(--ds-fw-medium) !important; font-size: var(--ds-fs-xs) !important; letter-spacing: 0.02em; padding: 3px var(--ds-sp-4) !important; border-radius: var(--ds-radius-sm) !important; display: inline-flex; align-items: center; gap: var(--ds-sp-2); line-height: 1.4; vertical-align: middle; } .badge.rounded-pill { border-radius: var(--ds-radius-pill) !important; padding: 3px var(--ds-sp-5) !important; } .badge.bg-primary, .badge.text-bg-primary { background: rgba(var(--ui-primary-rgb), 0.12) !important; color: var(--ui-primary) !important; border: 1px solid rgba(var(--ui-primary-rgb), 0.22); } .badge.bg-secondary, .badge.text-bg-secondary { background: var(--ui-surface-2) !important; color: var(--ui-muted) !important; border: 1px solid var(--ui-border); } .badge.bg-success, .badge.text-bg-success { background: rgba(34, 197, 94, 0.12) !important; color: #15803d !important; border: 1px solid rgba(34, 197, 94, 0.22); } html[data-theme="dark"] .badge.bg-success, html[data-theme="dark"] .badge.text-bg-success { color: #4ade80 !important; } .badge.bg-danger, .badge.text-bg-danger { background: rgba(239, 68, 68, 0.12) !important; color: #b91c1c !important; border: 1px solid rgba(239, 68, 68, 0.22); } html[data-theme="dark"] .badge.bg-danger, html[data-theme="dark"] .badge.text-bg-danger { color: #f87171 !important; } .badge.bg-warning, .badge.text-bg-warning { background: rgba(245, 158, 11, 0.14) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.26); } html[data-theme="dark"] .badge.bg-warning, html[data-theme="dark"] .badge.text-bg-warning { color: #fbbf24 !important; } .badge.bg-info, .badge.text-bg-info { background: rgba(6, 182, 212, 0.12) !important; color: #0e7490 !important; border: 1px solid rgba(6, 182, 212, 0.22); } html[data-theme="dark"] .badge.bg-info, html[data-theme="dark"] .badge.text-bg-info { color: #67e8f9 !important; } /* ---------- 10. Alerts ---------- */ .alert { border-radius: var(--ds-radius-md) !important; border: 1px solid transparent !important; padding: var(--ds-sp-5) var(--ds-sp-6) !important; font-size: var(--ds-fs-md) !important; display: flex; align-items: flex-start; gap: var(--ds-sp-4); border-left-width: 3px !important; } .alert-primary { background: rgba(var(--ui-primary-rgb), 0.06) !important; border-color: rgba(var(--ui-primary-rgb), 0.18) !important; border-left-color: var(--ui-primary) !important; color: var(--ui-text) !important; } .alert-success { background: rgba(34, 197, 94, 0.06) !important; border-color: rgba(34, 197, 94, 0.18) !important; border-left-color: #22c55e !important; color: var(--ui-text) !important; } .alert-danger { background: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.18) !important; border-left-color: #ef4444 !important; color: var(--ui-text) !important; } .alert-warning { background: rgba(245, 158, 11, 0.07) !important; border-color: rgba(245, 158, 11, 0.20) !important; border-left-color: #f59e0b !important; color: var(--ui-text) !important; } .alert-info { background: rgba(6, 182, 212, 0.06) !important; border-color: rgba(6, 182, 212, 0.18) !important; border-left-color: #06b6d4 !important; color: var(--ui-text) !important; } .alert-secondary { background: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; border-left-color: var(--ui-muted-soft) !important; color: var(--ui-text) !important; } /* ---------- 11. Dropdowns ---------- */ .dropdown-menu { background: var(--ui-surface) !important; border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ds-radius-md) !important; box-shadow: var(--ds-shadow-lg) !important; padding: var(--ds-sp-2) !important; font-size: var(--ds-fs-md); min-width: 180px; } .dropdown-item { color: var(--ui-text) !important; padding: var(--ds-sp-3) var(--ds-sp-5) !important; border-radius: var(--ds-radius-sm) !important; font-size: var(--ds-fs-md); display: flex; align-items: center; gap: var(--ds-sp-3); transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--ui-primary-rgb), 0.08) !important; color: var(--ui-primary) !important; } /* C3: .active (seçili) ile :active (klik anı) ayrımı — ani solid mavi sıçraması yok */ .dropdown-item.active { background: rgba(var(--ui-primary-rgb), 0.12) !important; color: var(--ui-primary) !important; font-weight: var(--ds-fw-semibold); } .dropdown-item:active { background: rgba(var(--ui-primary-rgb), 0.18) !important; color: var(--ui-primary) !important; } .dropdown-divider { border-color: var(--ui-border) !important; margin: var(--ds-sp-2) 0; } .dropdown-header { font-size: var(--ds-fs-2xs) !important; letter-spacing: var(--ds-ls-caps); text-transform: uppercase; color: var(--ui-muted-soft); padding: var(--ds-sp-3) var(--ds-sp-5); } /* ---------- 12. Sidebar refinement ---------- */ .sidebar, #panelSidebar, .panel-sidebar { border-right: 1px solid var(--sidebar-border, rgba(255,255,255,0.06)); } .sidebar-link, .panel-sidebar a, .nav-sidebar .nav-link { font-family: var(--ds-font-sans) !important; font-size: var(--ds-fs-md) !important; font-weight: var(--ds-fw-medium) !important; border-radius: var(--ds-radius-md) !important; padding: var(--ds-sp-4) var(--ds-sp-5) !important; letter-spacing: 0; position: relative; transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); } /* C2: Aktif sidebar öğesi — palette dolu gradient'i bastır + soldan ince çubuk indicator */ .sidebar-link.active, .nav-sidebar .nav-link.active { position: relative; background: rgba(var(--ui-primary-rgb), 0.14) !important; background-image: none !important; color: var(--ui-primary) !important; box-shadow: none !important; padding-left: calc(var(--ds-sp-5) + 6px) !important; } html[data-theme="dark"] .sidebar-link.active, html[data-theme="dark"] .nav-sidebar .nav-link.active { background: rgba(var(--ui-primary-rgb), 0.18) !important; color: #fff !important; } .sidebar-link.active::before, .nav-sidebar .nav-link.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--ui-primary); border-radius: 0 3px 3px 0; } .sidebar-group-title { font-size: var(--ds-fs-2xs) !important; letter-spacing: var(--ds-ls-caps) !important; text-transform: uppercase; font-weight: var(--ds-fw-semibold) !important; padding: var(--ds-sp-5) var(--ds-sp-5) var(--ds-sp-2) !important; margin-top: var(--ds-sp-3); } .sidebar-brand-wrap { padding: var(--ds-sp-6) var(--ds-sp-5) !important; border-bottom: 1px solid var(--sidebar-border) !important; } .sidebar-user-card { border-radius: var(--ds-radius-md) !important; padding: var(--ds-sp-4) !important; font-size: var(--ds-fs-sm); } /* ---------- 13. Top menu bar ---------- */ .top-menu-card { border-radius: var(--ds-radius-xl) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--ds-shadow-xs) !important; padding: var(--ds-sp-5) var(--ds-sp-8) !important; } .top-menu-tool-btn, .top-menu-links .btn, .top-menu-actions .btn { height: var(--ds-h-md); font-size: var(--ds-fs-md) !important; border-radius: var(--ds-radius-md) !important; } /* ---------- 14. Hero / panel-hero — light/dark aware ---------- */ /* .panel-hero (admin sayfa başlığı) — surface tabanlı, light/dark uyumlu. Not: dashboard hero'su .hero + .panel-hero birlikte taşır; .hero'nun primary-gradient + beyaz text stilini buradan bastırıyoruz. */ .panel-hero { border-radius: var(--ds-radius-xl) !important; padding: var(--ds-sp-12) var(--ds-sp-16) !important; box-shadow: var(--ds-shadow-xs) !important; position: relative; overflow: hidden; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } /* Light mode: temiz beyaz surface + sol-üstte yumuşak primary glow */ html[data-theme="light"] .panel-hero { background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(var(--ui-primary-rgb), 0.10), transparent 55%), radial-gradient(ellipse 40% 60% at 100% 100%, rgba(var(--ui-primary-rgb), 0.06), transparent 60%), var(--ui-surface) !important; } html[data-theme="light"] .panel-hero h1, html[data-theme="light"] .panel-hero h2, html[data-theme="light"] .panel-hero h3, html[data-theme="light"] .panel-hero .hero-title { color: var(--ui-text) !important; } html[data-theme="light"] .panel-hero p, html[data-theme="light"] .panel-hero .hero-sub, html[data-theme="light"] .panel-hero .page-summary { color: var(--ui-muted) !important; } html[data-theme="light"] .panel-hero .page-kicker { color: var(--ui-primary) !important; } /* Dark mode: yükseltilmiş yüzey + ince primary aksent */ html[data-theme="dark"] .panel-hero { background: radial-gradient(ellipse 60% 80% at 0% 0%, rgba(var(--ui-primary-rgb), 0.18), transparent 55%), radial-gradient(ellipse 50% 70% at 100% 100%, rgba(var(--ui-primary-rgb), 0.10), transparent 60%), var(--ui-surface-2) !important; border-color: var(--ui-border-strong) !important; } html[data-theme="dark"] .panel-hero h1, html[data-theme="dark"] .panel-hero h2, html[data-theme="dark"] .panel-hero h3, html[data-theme="dark"] .panel-hero .hero-title { color: var(--ui-text) !important; } html[data-theme="dark"] .panel-hero p, html[data-theme="dark"] .panel-hero .hero-sub, html[data-theme="dark"] .panel-hero .page-summary { color: var(--ui-muted) !important; } html[data-theme="dark"] .panel-hero .page-kicker { color: var(--ui-primary) !important; } /* Tipografi */ .panel-hero h1, .panel-hero h2, .panel-hero h3, .panel-hero .hero-title { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-bold) !important; letter-spacing: -0.02em; margin-bottom: var(--ds-sp-2); line-height: 1.2; } .panel-hero h1, .panel-hero .hero-title { font-size: var(--ds-fs-5xl) !important; } .panel-hero h2 { font-size: var(--ds-fs-4xl) !important; } .panel-hero h3 { font-size: var(--ds-fs-3xl) !important; } .panel-hero p, .panel-hero .hero-sub, .panel-hero .page-summary { font-size: var(--ds-fs-md) !important; font-weight: var(--ds-fw-regular); margin-bottom: 0; } .panel-hero .page-kicker { font-family: var(--ds-font-sans) !important; font-size: var(--ds-fs-xs) !important; font-weight: var(--ds-fw-semibold) !important; letter-spacing: var(--ds-ls-caps) !important; text-transform: uppercase !important; } /* Compact varyant — dashboard ana sayfa */ .panel-hero.dashboard-hero-compact, .panel-hero.ds-hero { padding: var(--ds-sp-8) var(--ds-sp-10) !important; } .panel-hero.dashboard-hero-compact h1, .panel-hero.dashboard-hero-compact h2, .panel-hero.dashboard-hero-compact h3 { font-size: var(--ds-fs-3xl) !important; } /* Hero mini stats (yan göstergeler) — surface tonu */ html[data-theme="light"] .panel-hero .hero-mini-stat, html[data-theme="light"] .panel-hero .hero-mini-pill { background: var(--ui-surface-2) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; box-shadow: none !important; } html[data-theme="light"] .panel-hero .hero-mini-value { color: var(--ui-text) !important; } html[data-theme="light"] .panel-hero .hero-mini-label { color: var(--ui-muted) !important; } html[data-theme="dark"] .panel-hero .hero-mini-stat, html[data-theme="dark"] .panel-hero .hero-mini-pill { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } /* Visual orbs (panel-visual.css'teki ::before/::after) light mode'da daha hafif */ html[data-theme="light"] .panel-hero::before { background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.10) 0%, transparent 70%) !important; } html[data-theme="light"] .panel-hero::after { background: radial-gradient(circle, rgba(var(--ui-primary-rgb), 0.08) 0%, transparent 70%) !important; } /* .hero (renkli alt-sayfa banner) — sadece .panel-hero olmadığında primary gradient kalsın */ .hero:not(.panel-hero) { border-radius: var(--ds-radius-xl) !important; padding: var(--ds-sp-12) var(--ds-sp-16) !important; box-shadow: var(--ds-shadow-sm); position: relative; overflow: hidden; } .hero:not(.panel-hero) h1, .hero:not(.panel-hero) h2 { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-bold) !important; letter-spacing: -0.02em; color: #fff; } .hero:not(.panel-hero) p { color: rgba(255, 255, 255, 0.85); } /* ---------- 15. Breadcrumb ---------- */ .panel-breadcrumb .breadcrumb { font-size: var(--ds-fs-sm) !important; background: transparent; padding: 0; margin-bottom: 0; } .panel-breadcrumb .breadcrumb-item { color: var(--ui-muted); } .panel-breadcrumb .breadcrumb-item a { color: var(--ui-muted); text-decoration: none; transition: color var(--ds-dur-fast) var(--ds-ease); } .panel-breadcrumb .breadcrumb-item a:hover { color: var(--ui-primary); } .panel-breadcrumb .breadcrumb-item.active { color: var(--ui-text); font-weight: var(--ds-fw-medium); } .panel-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--ui-muted-soft); padding: 0 var(--ds-sp-3); } /* ---------- 16. Tabs / Nav-pills ---------- */ .nav-tabs { border-bottom: 1px solid var(--ui-border) !important; gap: var(--ds-sp-1); } .nav-tabs .nav-link { border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--ui-muted) !important; font-weight: var(--ds-fw-medium) !important; font-size: var(--ds-fs-md); padding: var(--ds-sp-4) var(--ds-sp-6) !important; margin-bottom: -1px; transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease); } .nav-tabs .nav-link:hover { color: var(--ui-text) !important; border-bottom-color: var(--ui-border-strong) !important; background: transparent !important; } .nav-tabs .nav-link.active { color: var(--ui-primary) !important; background: transparent !important; border-bottom-color: var(--ui-primary) !important; } .nav-pills .nav-link { border-radius: var(--ds-radius-md) !important; font-weight: var(--ds-fw-medium) !important; font-size: var(--ds-fs-md); padding: var(--ds-sp-3) var(--ds-sp-5) !important; color: var(--ui-muted) !important; } .nav-pills .nav-link:hover { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; } .nav-pills .nav-link.active { background: var(--ui-primary) !important; color: #fff !important; } /* ---------- 17. Pagination ---------- */ .pagination { gap: var(--ds-sp-1); } .page-link { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; font-size: var(--ds-fs-md) !important; font-weight: var(--ds-fw-medium); border-radius: var(--ds-radius-sm) !important; padding: var(--ds-sp-3) var(--ds-sp-5) !important; margin: 0 1px; transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease); } .page-link:hover { background: var(--ui-surface-2) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; } .page-item.active .page-link { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; } .page-item.disabled .page-link { color: var(--ui-muted-soft) !important; background: var(--ui-surface) !important; } /* ---------- 18. Tooltip / Popover ---------- */ .tooltip-inner { background: #18181b !important; color: #fafafa !important; font-size: var(--ds-fs-sm) !important; font-weight: var(--ds-fw-medium); padding: var(--ds-sp-3) var(--ds-sp-5); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); } .tooltip .tooltip-arrow::before { border-top-color: #18181b !important; border-bottom-color: #18181b !important; } .popover { background: var(--ui-surface) !important; border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg); font-size: var(--ds-fs-md); } .popover-header { background: var(--ui-surface-2) !important; border-bottom: 1px solid var(--ui-border) !important; font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-md); } .popover-body { color: var(--ui-text); padding: var(--ds-sp-5); } /* ---------- 19. Progress ---------- */ .progress { background: var(--ui-surface-2) !important; border-radius: var(--ds-radius-pill); height: 6px; overflow: hidden; } .progress-bar { background: var(--ui-primary) !important; border-radius: var(--ds-radius-pill); } /* ---------- 20. List groups ---------- */ .list-group-item { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; padding: var(--ds-sp-5) var(--ds-sp-6) !important; font-size: var(--ds-fs-md); } .list-group-item:hover { background: var(--ui-surface-2) !important; } .list-group-item.active { background: rgba(var(--ui-primary-rgb), 0.10) !important; color: var(--ui-text) !important; border-color: rgba(var(--ui-primary-rgb), 0.25) !important; } /* ---------- 21. Off-canvas ---------- */ .offcanvas { background: var(--ui-surface) !important; border-color: var(--ui-border-strong) !important; } .offcanvas-header { border-bottom: 1px solid var(--ui-border); padding: var(--ds-sp-6) var(--ds-sp-8); } .offcanvas-title { font-family: var(--ds-font-display); font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-2xl); } .offcanvas-body { padding: var(--ds-sp-8); } /* ---------- 22. Toasts ---------- */ .toast { background: var(--ui-surface) !important; border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ds-radius-md) !important; box-shadow: var(--ds-shadow-lg) !important; font-size: var(--ds-fs-md); } .toast-header { background: var(--ui-surface-2) !important; border-bottom: 1px solid var(--ui-border) !important; color: var(--ui-text); font-weight: var(--ds-fw-semibold); } .toast-body { padding: var(--ds-sp-5) var(--ds-sp-6); color: var(--ui-text); } /* ---------- 23. Spinners ---------- */ .spinner-border, .spinner-grow { color: var(--ui-primary); } /* ---------- 24. Code blocks / kbd ---------- */ pre { background: var(--ui-surface-2) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ds-radius-md) !important; padding: var(--ds-sp-6) var(--ds-sp-8) !important; font-size: var(--ds-fs-sm); line-height: 1.55; overflow-x: auto; } /* M5: Code rengi olarak ui-text kullan — tüm paletlerde WCAG AA garanti */ code:not(pre code) { background: var(--ui-surface-2); color: var(--ui-text); border: 1px solid var(--ui-border); padding: 1px 6px; border-radius: var(--ds-radius-xs); font-size: 0.88em; } kbd { background: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border-strong) !important; border-bottom-width: 2px !important; border-radius: var(--ds-radius-xs); padding: 1px 6px; font-family: var(--ds-font-mono); font-size: 0.85em; box-shadow: var(--ds-shadow-xs); } /* ---------- 25. Metric / stat cards (dashboard) ---------- */ .metric-card, .stat-card { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ds-radius-lg) !important; padding: var(--ds-sp-8) !important; box-shadow: var(--ds-shadow-xs); transition: box-shadow var(--ds-dur-base) var(--ds-ease), transform var(--ds-dur-base) var(--ds-ease); position: relative; overflow: hidden; } .metric-card, .stat-card { will-change: transform; } .metric-card:hover, .stat-card:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); } .metric-label, .stat-label { font-size: var(--ds-fs-xs) !important; font-weight: var(--ds-fw-semibold) !important; letter-spacing: var(--ds-ls-caps); text-transform: uppercase; color: var(--ui-muted) !important; margin-bottom: var(--ds-sp-3); } .metric-value, .stat-value { font-family: var(--ds-font-display) !important; font-size: var(--ds-fs-5xl) !important; font-weight: var(--ds-fw-bold) !important; line-height: 1.1; letter-spacing: -0.02em; color: var(--ui-text); font-variant-numeric: tabular-nums; } .metric-delta, .stat-delta { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); margin-top: var(--ds-sp-3); display: inline-flex; align-items: center; gap: var(--ds-sp-2); } .metric-delta.up { color: #16a34a; } .metric-delta.down { color: #dc2626; } /* ---------- 26. Selector cards ---------- */ .selector-card { border-radius: var(--ds-radius-xl) !important; border: 1px solid var(--ui-border-strong) !important; box-shadow: var(--ds-shadow-sm) !important; padding: var(--ds-sp-8) !important; } .selector-title { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-semibold) !important; font-size: var(--ds-fs-2xl) !important; letter-spacing: var(--ds-ls-tight); } .selector-sub { font-size: var(--ds-fs-md); color: var(--ui-muted); } /* ---------- 27. Detail modals (custom) ---------- */ .detail-modal, .detail-modal .modal-content { border-radius: var(--ds-radius-xl) !important; border: 1px solid var(--ui-border-strong) !important; box-shadow: var(--ds-shadow-xl) !important; } /* ---------- 28. Search inputs / icons ---------- */ .search-input, input[type="search"].form-control { padding-left: var(--ds-sp-12) !important; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 12px center; background-size: 16px; } /* ---------- 29. Avatar ---------- */ .avatar, .user-avatar, .sidebar-user-avatar { border-radius: var(--ds-radius-pill) !important; border: 1px solid var(--ui-border); background: var(--ui-surface-2); object-fit: cover; } /* ---------- 30. Focus ring (universal accessibility) ---------- */ *:focus-visible:not(.btn):not(.form-control):not(.form-select):not(.form-check-input) { outline: 2px solid var(--ui-primary) !important; outline-offset: 2px; border-radius: var(--ds-radius-xs); } /* ---------- 31. Reduced motion ---------- */ @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; } } /* ---------- 32. Print-friendly ---------- */ @media print { body { background: #fff !important; color: #000 !important; } .sidebar, .top-menu-card, .panel-hero, .btn, .panel-breadcrumb { display: none !important; } .card { border: 1px solid #ccc !important; box-shadow: none !important; } } /* ---------- 33. Splash overlay refinement ---------- */ #td-splash { background: var(--ui-bg) !important; } .td-splash-title { font-family: var(--ds-font-display) !important; font-weight: var(--ds-fw-bold) !important; letter-spacing: var(--ds-ls-tight); } .td-splash-sub { font-family: var(--ds-font-sans) !important; font-size: var(--ds-fs-md); color: var(--ui-muted); letter-spacing: var(--ds-ls-wide); text-transform: uppercase; } /* ---------- 34. Container density utilities ---------- */ .container, .container-fluid, .container-xl, .container-lg { padding-left: var(--ds-sp-8); padding-right: var(--ds-sp-8); } /* Section spacing — quieter rhythms */ section, .section { margin-bottom: var(--ds-sp-12); } /* ---------- 35. Mobile refinements ---------- */ @media (max-width: 768px) { :root { --ds-fs-base: 13px; } .card-body, .modal-body { padding: var(--ds-sp-6) !important; } .panel-hero { padding: var(--ds-sp-8) !important; } .panel-hero h1, .panel-hero h2, .panel-hero .hero-title { font-size: var(--ds-fs-3xl) !important; } .panel-hero h3 { font-size: var(--ds-fs-2xl) !important; } .table > :not(caption) > * > * { padding: var(--ds-sp-3) var(--ds-sp-4) !important; } }