/* VegaReportAgent Web Application Stylesheet */ /* Design: Teklif Takip ile aynı aile (Inter/Space Grotesk, sıcak-gri nötrler, aynı anlam renkleri), tek fark marka rengi: koyu indigo-mor ("Gece Moru"). Sidebar her zaman koyu (light modda da). */ /* ============ İKİ EKSEN: skin × mod ============ body iki bağımsız class taşır: `skin-*` (tasarım) ve `theme-*` (açık/koyu mod). Örnek: - `:root` = skin-classic'in AÇIK modu, aynı zamanda tüm skinler için taban. Bir skin bir token'ı tanımlamazsa buradaki değere düşer; böylece eksik token stilsiz değil, yalnızca classic görünümünde kalır. - Koyu mod skin'e KAPSANIR: `body.skin-.theme-dark { ... }`. Kapsamsız `body.theme-dark` YAZMA — o blok diğer skinlerin koyu moduna da sızar ve sessizce karışık palet üretir. - Yeni skin eklerken `body.skin-` (açık) + `body.skin-.theme-dark` (koyu) bloklarının İKİSİ de yazılır. Yalnız biri yazılırsa diğer modda classic'e düşer. body'nin class'ları JS'te asla `className = ...` ile atanmaz — bu diğer ekseni siler. Yalnızca `classList` kullanılır (bkz. _Layout.cshtml). SKIN LİSTESİNİN TEK KAYDI: _Layout.cshtml'de 'nin hemen içindeki script'teki `SKINS` dizisi. Buraya bir `body.skin-` bloğu yazmak yetmez — o dizide kaydı olmayan skin seçicide çıkmaz, kayıtlı olup CSS'i olmayan skin ise seçilince classic'e düşer. İkisi birlikte eklenir. Seçim localStorage'da: "vega-ares-skin" (tasarım) · "vega-ares-theme" (mod). */ /* ============ Design Tokens — skin-classic / açık mod ============ */ :root { --font-primary: 'Inter', sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; /* Light Mode Tokens (Teklif Takip'ten birebir taşınan nötrler) */ --bg-app: #f7f7f5; --bg-card: #ffffff; --bg-subtle: #f2f2ef; --bg-hover: rgba(28, 25, 23, 0.04); --border-card: #e7e5e0; --border-color: #e7e5e0; --text-main: #23201c; --text-muted: #78766f; --text-light: #a7a49b; --primary: #4c3a8c; --primary-light: #eeebf9; --primary-hover: #3a2c6e; --success: #17845c; --success-light: #e6f6ee; --warning: #b4680a; --warning-light: #fdf1de; --danger: #d13c3c; --danger-light: #fdecec; --info: #0e7dad; --info-light: #e6f4fa; --secondary-light: #f0efec; --secondary-text: #6b6960; /* Sidebar sabit koyu (mor-siyah) — light/dark moddan bağımsız */ --sidebar-bg: #1b1530; --sidebar-border: #2a2140; --sidebar-text: #c9c2e6; --sidebar-text-muted: #8b81b3; --sidebar-active-bg: rgba(255, 255, 255, 0.08); --sidebar-active-text: #ffffff; /* Sidebar'da eskiden #ffffff ve rgba(255,255,255,…) SABİT yazılıydı; sidebar her zaman koyu olduğu için sorun çıkmıyordu. Mizan'ın açık sidebar'ında beyaz üstüne beyaz kalıyor. Değerler Klasik'inkiyle birebir aynı — token'a taşımak Klasik'te tek piksel değiştirmez, sonraki skinleri kurtarır. */ --sidebar-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-ctrl-hover: rgba(255, 255, 255, 0.06); --sidebar-raised-bg: rgba(255, 255, 255, 0.04); /* --primary ve --danger ZEMİNİNİN üstündeki metnin rengi. Sabit #fff yazılıydı; açık birincil renge sahip skinlerde (Saha koyu amber, Defter koyu adaçayı) beyaz yazı okunmuyordu — ölçüldü: 1,80:1 ve 2,25:1. Her skin kendi bildirir. Klasik için #ffffff, yani Klasik değişmez. */ --on-primary: #ffffff; --on-danger: #ffffff; /* Çıkış düğmesinin kırmızısı KOYU sidebar için seçilmişti; Mizan ve Defter'in açık sidebar'ında soluyordu (2,75:1 / 2,71:1). */ --sidebar-danger: #e8676b; --sidebar-danger-bg: rgba(232, 103, 107, 0.12); /* Grafik paleti: Home/Index.cshtml'de gömülüydü, her skinde mor çıkıyordu. */ --chart-1: #4c3a8c; --chart-2: #7a68b8; --chart-3: #a597d6; --chart-4: #0e7dad; --chart-5: #17845c; --chart-6: #b4680a; --chart-7: #8b81b3; --sidebar-accent: #a597d6; /* Köşe yarıçapı da skin ekseninin parçası: "bu uygulama ne kadar yuvarlak" sorusunun cevabı. Sabit yazıldığında her skin uzun bir "köşeyi sıfırla" listesi tutmak zorunda kalıyor ve biri atlandığında (ör. .filter-run) panel yuvarlak, gerisi keskin kalıyordu. Değerler Klasik'in mevcut değerleri — token'a taşımak Klasik'te hiçbir şeyi değiştirmez. */ --radius-card: 10px; --radius-control: 7px; --radius-chip: 8px; --radius-pill: 100px; --backdrop-blur: none; --card-shadow: 0 1px 2px rgba(23, 20, 15, 0.04); --card-shadow-hover: 0 4px 16px rgba(23, 20, 15, 0.08); --focus-ring: 0 0 0 3px var(--primary-light); --bs-body-color: var(--text-main); --bs-body-color-rgb: 35, 32, 28; --bs-body-bg: var(--bg-app); --bs-body-bg-rgb: 247, 247, 245; --bs-emphasis-color: var(--text-main); --bs-emphasis-color-rgb: 35, 32, 28; --bs-secondary-color: var(--text-muted); --bs-secondary-bg: var(--bg-subtle); --bs-tertiary-color: var(--text-muted); --bs-tertiary-bg: var(--bg-subtle); --bs-border-color: var(--border-color); --bs-border-color-translucent: var(--border-color); --bs-link-color: var(--primary); --bs-link-color-rgb: 76, 58, 140; --bs-link-hover-color: var(--primary-hover); --bs-heading-color: var(--text-main); --bs-primary: var(--primary); --bs-primary-rgb: 76, 58, 140; } /* skin-classic / koyu mod */ body.skin-classic.theme-dark { --bg-app: #0f1011; --bg-card: #17181a; --bg-subtle: #1c1d1f; --bg-hover: rgba(255, 255, 255, 0.05); --border-card: #2a2b2e; --border-color: #2a2b2e; --text-main: #edecea; --text-muted: #96958f; --text-light: #66655f; --primary: #8a7bc7; --primary-light: rgba(138, 123, 199, 0.16); --primary-hover: #a397d6; --success: #3ecf8e; --success-light: rgba(62, 207, 142, 0.13); --warning: #f0a63a; --warning-light: rgba(240, 166, 58, 0.13); --danger: #f2635e; --danger-light: rgba(242, 99, 94, 0.13); --info: #4fc3e8; --info-light: rgba(79, 195, 232, 0.13); --secondary-light: rgba(255, 255, 255, 0.06); --secondary-text: #96958f; --sidebar-bg: #0d0a17; --sidebar-border: #1f1a30; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35); --bs-body-color: var(--text-main); --bs-body-color-rgb: 237, 236, 234; --bs-body-bg: var(--bg-app); --bs-body-bg-rgb: 15, 16, 17; --bs-emphasis-color: var(--text-main); --bs-emphasis-color-rgb: 237, 236, 234; --bs-secondary-color: var(--text-muted); --bs-secondary-bg: var(--bg-subtle); --bs-tertiary-color: var(--text-muted); --bs-tertiary-bg: var(--bg-subtle); --bs-border-color: var(--border-color); --bs-border-color-translucent: var(--border-color); --bs-link-color: var(--primary); --bs-link-color-rgb: 138, 123, 199; --bs-link-hover-color: var(--primary-hover); --bs-heading-color: var(--text-main); --bs-primary: var(--primary); --bs-primary-rgb: 138, 123, 199; } /* ============ Global Reset & Base ============ */ * { box-sizing: border-box; } body { font-family: var(--font-primary); font-size: 14px; background-color: var(--bg-app); color: var(--text-main); margin: 0; padding: 0; transition: background-color 0.2s ease, color 0.2s ease; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; } a { color: var(--primary); } /* ============ App Layout ============ */ .app-container { display: flex; min-height: 100vh; } .app-sidebar { width: 252px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; padding: 20px 16px; position: fixed; height: 100vh; z-index: 100; } .app-main { flex-grow: 1; margin-left: 252px; display: flex; flex-direction: column; min-width: 0; } .app-header { background: transparent; padding: 20px 32px 16px 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); } .app-body { padding: 24px 32px 32px 32px; flex-grow: 1; } /* ============ Sidebar Branding & Info ============ */ .sidebar-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 4px 8px; } .brand-icon { font-size: 18px; color: var(--sidebar-accent); } .brand-text { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--sidebar-active-text); letter-spacing: -0.01em; } .brand-text span { color: var(--sidebar-accent); } /* Aktif firma seçici — markanın hemen altında, menüden çizgiyle ayrılır. Kullanıcının hangi firmanın verisine baktığı her sayfada görünmek zorunda. */ .sidebar-firma { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: -12px 0 18px; border: 1px solid var(--sidebar-border); border-radius: var(--radius-chip); background: var(--sidebar-raised-bg); min-width: 0; } .sidebar-firma-icon { font-size: 14px; color: var(--sidebar-accent); flex-shrink: 0; } .sidebar-firma-form { display: flex; align-items: center; flex-grow: 1; min-width: 0; position: relative; } .sidebar-firma-select { appearance: none; background: transparent; border: 0; padding: 0 16px 0 0; width: 100%; font-size: 12.5px; font-weight: 600; color: var(--sidebar-active-text); cursor: pointer; text-overflow: ellipsis; } .sidebar-firma-select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } /* Açılır listenin kendisi işletim sisteminin çizdiği bir katman; koyu kenar çubuğunun rengini almadığı için seçenekler ayrıca boyanır, yoksa beyaz üstüne beyaz kalıyor. */ .sidebar-firma-select option { background: var(--sidebar-bg); color: var(--sidebar-active-text); } .sidebar-firma-caret { position: absolute; right: 0; font-size: 11px; color: var(--sidebar-text-muted); pointer-events: none; } .sidebar-firma-adi { font-size: 12.5px; font-weight: 600; color: var(--sidebar-active-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-chip); margin-bottom: 20px; } .avatar { width: 32px; height: 32px; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 13px; flex-shrink: 0; } .user-info { display: flex; flex-direction: column; min-width: 0; } .user-name { font-size: 13px; font-weight: 600; color: var(--sidebar-active-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--sidebar-text-muted); } /* ============ Sidebar Menu Navigation ============ */ .sidebar-menu { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; } .menu-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sidebar-text-muted); padding: 12px 12px 4px 12px; } .menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; color: var(--sidebar-text); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background 0.12s ease, color 0.12s ease; } .menu-item i { font-size: 15px; width: 16px; text-align: center; } .menu-item:hover { color: var(--sidebar-active-text); background: var(--sidebar-hover-bg); } .menu-item.active { color: var(--sidebar-active-text); background: var(--sidebar-active-bg); font-weight: 600; } /* ============ Sidebar Footer & Theme Toggle ============ */ .sidebar-footer { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sidebar-border); } .theme-toggle-btn { background: transparent; border: 1px solid var(--sidebar-border); padding: 8px; border-radius: 6px; color: var(--sidebar-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.15s ease; } .theme-toggle-btn:hover { background: var(--sidebar-ctrl-hover); } /* ---- Mod + tasarım düğmeleri (yan yana) ve tasarım menüsü ---- Ortak parça: her skin kendi sidebar token'larını tanımlayarak bunu da yeniden renklendirir; buradaki hiçbir renk sabit değildir. */ .sidebar-footer-row { display: flex; gap: 8px; } .sidebar-footer-row .theme-toggle-btn { flex: 1; min-width: 0; } .skin-picker { flex: 1; min-width: 0; display: flex; } /* Menü .skin-picker'a DEĞİL .sidebar-footer'a hizalanır (konumlandırma bağlamı orada) — böylece yarım düğme genişliğinde değil, altbilginin tamamı kadar geniş açılır ve kenar boşluğuna taşmaz. */ .sidebar-footer { position: relative; } .skin-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 10; padding: 6px; border-radius: var(--radius-chip); background: var(--sidebar-bg); border: 1px solid var(--sidebar-border); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } .skin-menu[hidden] { display: none; } .skin-menu-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-text-muted); padding: 4px 8px 6px; } .skin-menu-item { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 8px; width: 100%; padding: 7px 8px; border: none; border-radius: 6px; background: transparent; color: var(--sidebar-text); text-align: left; cursor: pointer; transition: background 0.15s ease; } .skin-menu-item:hover { background: var(--sidebar-ctrl-hover); } .skin-menu-item.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); } /* Onay işareti yer TUTAR (visibility), gizlenmez — display:none olsaydı seçili satır kayar ve liste zıplar. */ .skin-menu-check { font-size: 13px; color: var(--sidebar-accent); visibility: hidden; } .skin-menu-item.is-active .skin-menu-check { visibility: visible; } .skin-menu-label { font-size: 12.5px; font-weight: 600; } .skin-menu-note { grid-column: 2; font-size: 11px; color: var(--sidebar-text-muted); margin-top: 1px; } .skin-menu-note:empty { display: none; } .logout-btn { background: transparent; border: 1px solid var(--sidebar-border); padding: 8px; border-radius: 6px; color: var(--sidebar-danger); font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s ease; } .logout-btn:hover { background: var(--sidebar-danger-bg); border-color: transparent; } /* ============ Header Elements ============ */ .header-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0; color: var(--text-main); letter-spacing: -0.01em; } .header-subtitle { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0 0; } .header-date { display: flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-card); padding: 7px 14px; border-radius: var(--radius-control); font-size: 12.5px; color: var(--text-muted); } /* ============ Card Panels ============ */ .glass-card { background: var(--bg-card); border: 1px solid var(--border-card) !important; border-radius: var(--radius-card) !important; box-shadow: var(--card-shadow) !important; } /* ============ Summary Statistics ============ */ .stat-card-icon { width: 40px; height: 40px; border-radius: var(--radius-chip); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .bg-primary-light { background-color: var(--primary-light); } .bg-success-light { background-color: var(--success-light); } .bg-warning-light { background-color: var(--warning-light); } .bg-danger-light { background-color: var(--danger-light); } .bg-info-light { background-color: var(--info-light); } .bg-secondary-light { background-color: var(--secondary-light); } .text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-info { color: var(--info) !important; } .text-secondary { color: var(--secondary-text) !important; } .text-muted { color: var(--text-muted) !important; } /* ============ Buttons ============ */ .btn-primary-custom { background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--radius-control); padding: 8px 16px; font-size: 13.5px; font-weight: 600; transition: background 0.15s ease; } .btn-primary-custom:hover { background: var(--primary-hover); color: var(--on-primary); } .btn-outline-custom { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); border-radius: var(--radius-control); font-size: 12px; font-weight: 500; padding: 6px 12px; transition: all 0.15s ease; } .btn-outline-custom:hover { background: var(--bg-hover); color: var(--text-main); border-color: var(--text-light); } /* ============ Form Inputs ============ */ .form-group-custom { } .form-label-custom { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; display: block; } .form-control-custom { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 9px 12px; font-size: 13px; color: var(--text-main); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control-custom:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .form-control-custom::placeholder { color: var(--text-light); } .form-control, .form-select { background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); border-radius: var(--radius-control); font-size: 13px; } .form-control:focus, .form-select:focus { background-color: var(--bg-card); color: var(--text-main); border-color: var(--primary); box-shadow: var(--focus-ring); } /* ============ Alerts ============ */ .custom-alert { border: 1px solid transparent; border-radius: var(--radius-chip); } .alert-danger.custom-alert { background: var(--danger-light); color: var(--danger); } .alert-success.custom-alert { background: var(--success-light); color: var(--success); } /* ============ Auth Pages ============ */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-app); padding: 20px; } body.skin-classic.theme-dark .auth-wrapper { background: radial-gradient(circle at 30% 20%, #1a1530 0%, #0f1011 60%); } .login-card { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 36px; color: var(--text-main); box-shadow: var(--card-shadow-hover); } .login-logo { font-size: 26px; color: var(--primary); margin-bottom: 12px; } .login-header h3 { font-weight: 700; margin: 0; color: var(--text-main); } .login-header h3 span { color: var(--primary); } .login-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; margin-bottom: 28px; } .login-form .form-label-custom { color: var(--text-muted); } .login-form .form-control-custom { background: var(--bg-subtle); border-color: var(--border-color); color: var(--text-main); padding-left: 38px; } .login-form .form-control-custom::placeholder { color: var(--text-light); } .login-form .form-control-custom:focus { border-color: var(--primary); box-shadow: var(--focus-ring); background: var(--bg-card); } .input-icon-wrapper { position: relative; } .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 15px; } /* ============ Tables ============ */ .custom-table { margin: 0; } .custom-table th { border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 10px; background: transparent; } .custom-table td { padding: 12px 10px; font-size: 13px; border-bottom: 1px solid var(--border-color); background: transparent; color: var(--text-main); vertical-align: middle; } .custom-table tbody tr:hover { background: var(--bg-hover); } .custom-table tbody tr:last-child td { border-bottom: none; } /* ============ Badges ============ */ .badge-custom { padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600; font-size: 10.5px; letter-spacing: 0.01em; display: inline-block; } .badge-role-admin { background: var(--primary-light); color: var(--primary); } .badge-role-user { background: var(--secondary-light); color: var(--secondary-text); } .badge-status-aktif { background: var(--success-light); color: var(--success); } .badge-status-pasif { background: var(--danger-light); color: var(--danger); } /* ============ Select & small buttons ============ */ .form-select-custom { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 9px 12px; font-size: 13px; color: var(--text-main); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378766f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; } .form-select-custom:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .btn-action { background: var(--bg-subtle); border: 1px solid transparent; color: var(--text-muted); border-radius: 6px; padding: 5px 9px; font-size: 13px; transition: all 0.12s ease; } .btn-action:hover { background: var(--bg-hover); color: var(--text-main); border-color: var(--border-color); } .btn-action.danger:hover { background: var(--danger-light); color: var(--danger); } .btn-xs { font-size: 11px; padding: 4px 10px; border-radius: 6px; } /* ============ Permission checklist ============ */ .permission-group { margin-bottom: 16px; } .permission-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 8px; } .permission-check { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-control); border: 1px solid var(--border-color); background: var(--bg-subtle); font-size: 12.5px; margin-bottom: 6px; } .empty-hint { font-size: 12.5px; color: var(--text-light); background: var(--bg-subtle); border: 1px dashed var(--border-color); border-radius: var(--radius-chip); padding: 12px 14px; } /* ============ Logo önizlemesi (Ayarlar + Firmalar) ============ Kutu SABİT ve çıktıdaki kutuyla aynı orandadır (200×60). Yüklenen görselin çözünürlüğü bilinmez — object-fit:contain hem devasa hem minicik görseli aynı alana oturtur, böylece ekrandaki görünüm PDF/Excel'dekiyle aynı olur. Zemin bilinçli olarak BEYAZ: logo çıktıda beyaz kâğıda basılıyor, koyu temada kart zeminine konsaydı şeffaf zeminli koyu logolar görünmez olurdu. */ .logo-onizleme { width: 200px; height: 60px; background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 4px; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } .logo-onizleme img { width: 100%; height: 100%; object-fit: contain; object-position: left center; } .logo-onizleme.logo-devralinan { opacity: 0.55; border-style: dashed; } .logo-not { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } .logo-sil { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; cursor: pointer; } .logo-secici { margin-top: 6px; padding: 5px 8px; font-size: 11.5px; max-width: 220px; } /* Sol üstteki marka logosu. Kutu SABİT YÜKSEKLİKTE: yükseklik serbest bırakılsaydı yüksek çözünürlüklü bir yükleme sidebar başlığını aşağı iter, menüyü kaydırırdı. Genişlik sidebar'a uyar — Ray tasarımında ray 56px'e indiğinde logo da onunla küçülür. */ .brand-logo { width: 100%; height: 45.5px; /* 36px tabanının %26 üstü (önce %15, sonra %10 daha) — kullanıcı isteği */ min-width: 0; display: flex; align-items: center; overflow: hidden; } .brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: left center; } /* Ray daraltılmışken marka da ortalanır (sidebar-brand justify-content'i devralır). */ body.skin-ray .brand-logo img { object-position: center; } body.skin-ray .app-sidebar:hover .brand-logo img { object-position: left center; } /* Logo varken uygulama adı logonun ALTINDA küçük yazıyla durur (12.08.2026 düzeltmesi: logo markayı tamamen siliyordu). Yazı .brand-text'in renk/iki-ton kurallarını devralır, yalnızca boyutu küçülür — marka alanı menüyü belirgin aşağı itmesin diye. Ray'de .brand-text kuralları (daraltılmışken gizle, hover'da göster) kendiliğinden işler. */ .brand-stack { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Yazı logonun altında ORTALI, okunur boyda ve üstünde ayırıcı çizgi (kullanıcı düzeltmeleri 12.08: 11.5px de 14px de küçük kaldı → 16px; çizgi logodan ayrıştırır). */ .brand-text-alt { width: 100%; text-align: center; font-size: 16px; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; border-top: 1px solid var(--sidebar-border); padding-top: 6px; } /* Şeritte marka yatay şeride oturur: yazı logonun altında değil SAĞINDA — dikey istif üst şeridi gereksiz yükseltirdi. */ body.skin-serit .brand-stack { flex-direction: row; align-items: center; gap: 8px; width: auto; } body.skin-serit .brand-stack .brand-logo { width: auto; } body.skin-serit .brand-stack .brand-text-alt { width: auto; border-top: none; padding-top: 0; } /* ============ Nav Pills (Settings + Log sekmeleri) ============ */ .pill-tabs .nav-link { color: var(--text-muted); border-radius: var(--radius-control); transition: all 0.15s ease; border: 1px solid transparent; font-size: 13px; font-weight: 500; padding: 7px 14px; } .pill-tabs .nav-link:hover { background: var(--bg-hover); color: var(--text-main); } .pill-tabs .nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; border-color: transparent; } .settings-data-table { max-height: 220px; overflow-y: auto; /* Dar ekranda geniş sonuç tablosu kart içinde yatay kayar, sayfayı taşırmaz. */ overflow-x: auto; } .connection-result { font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-control); margin-top: 10px; display: none; } .connection-result.ok { background: var(--success-light); color: var(--success); display: block; } .connection-result.fail { background: var(--danger-light); color: var(--danger); display: block; } /* ============ Report scope picker (Reports/Run) ============ */ .scope-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary); } .chip-select { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px 0; } .chip-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 11px; border-radius: var(--radius-control); border: 1px solid var(--border-color); background: var(--bg-subtle); color: var(--text-muted); cursor: pointer; user-select: none; } .chip-opt input { margin: 0; } .chip-opt.on { background: var(--primary-light); color: var(--primary); border-color: var(--primary); font-weight: 600; } .chip-remove { background: transparent; border: none; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; padding: 0 0 0 2px; cursor: pointer; } .chip-remove:hover { opacity: 1; } .scope-note { font-size: 12px; color: var(--text-muted); background: var(--bg-subtle); border: 1px dashed var(--border-color); border-radius: var(--radius-chip); padding: 8px 10px; margin-top: 10px; } .scope-note b { color: var(--primary); } /* ============ Agent Test Chat ============ */ /* Kart görünür alana oturur: sabit 60vh dar pencerede sayfayı taşırıyor, yüksek pencerede altta ölü boşluk bırakıyordu. Yükseklik görünümdeki fitChat() ile ölçülür (başlık yüksekliği skinden skine değişir, CSS sabiti tutmaz); içeride yalnızca mesaj listesi kayar, öneriler ve giriş satırı hep görünür kalır. */ .chat-shell { display: flex; flex-direction: column; min-height: 300px; } .chat-window { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; } .chat-bubble { /* 820px genişlik tavanı kalktı; çok geniş ekranda satır uzunluğu okunur kalsın. */ max-width: min(70%, 760px); padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .chat-bubble.user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 3px; } .chat-bubble.agent { align-self: flex-start; background: var(--bg-subtle); border: 1px solid var(--border-color); color: var(--text-main); border-bottom-left-radius: 3px; /* Cevaplar veri satırı taşıdığı için kullanıcı baloncuğundan geniştir; %70'te "• 1.500.000 TL — Urantaş · Çek 0444633 · QNB · vade 24.04.2025" iki satıra kayıyordu. */ max-width: 88%; } .chat-bubble.pending { color: var(--text-light); font-style: italic; } /* Faz 33 kalanı D — açılışta çizilen önceki konuşma. Ayraç ortalı ince bir etikettir; zaman damgası balonun içinde küçük ve soluk durur. Renkler token'dan (skin uyumu). */ .chat-divider { align-self: center; display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 2px; color: var(--text-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .chat-divider::before, .chat-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-color); } .chat-zaman { margin-top: 4px; font-size: 10px; opacity: .65; text-align: right; } /* Asistanın cevabına SİSTEMİN eklediği rapor merkezi bağlantısı (Faz 29). Metnin içinde kaybolmasın diye çip görünümünde; adres uzun olduğu için etiketin kendisi linktir (URL yalnız WhatsApp'ta çıplak görünür). */ .chat-rapor-linki { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 10px; border-radius: var(--radius-pill, 999px); background: var(--primary-light); color: var(--primary); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: normal; } .chat-rapor-linki:hover { text-decoration: underline; } /* Cevap içindeki tablo: baloncuk pre-wrap olduğu için tablo kendi bloğunda normal akışa döner, dar ekranda yatay kaydırılır (baloncuk taşmaz). */ .chat-table-wrap { white-space: normal; overflow-x: auto; margin: 8px 0; } .chat-table { border-collapse: collapse; font-size: 12px; width: 100%; } .chat-table th, .chat-table td { border: 1px solid var(--border-color); padding: 5px 9px; text-align: left; white-space: nowrap; } .chat-table th { background: var(--bg-card); font-weight: 600; } /* Sayı kolonları sağa yaslanır — tutarlar alt alta okunabilsin. */ .chat-table td:not(:first-child) { text-align: right; } .chat-bubble.denied { background: var(--danger-light); border-color: var(--danger); color: var(--danger); } .chat-file { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 12px; background: var(--bg-card); border: 1px solid var(--primary); border-radius: var(--radius-chip); color: var(--primary); font-size: 12.5px; font-weight: 600; text-decoration: none; } .chat-file:hover { background: var(--primary-light); color: var(--primary); } .chat-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 4px 0; } .sugg-chip { background: var(--bg-subtle); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 999px; padding: 6px 13px; font-size: 12px; font-family: var(--font-primary); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .sugg-chip:hover { border-color: var(--primary); color: var(--primary); } .chat-input-row { display: flex; gap: 8px; border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 6px; } /* ============ Dashboard ============ */ /* Panel filtre çubuğu — şube, hazır dönem şablonu ve özel aralık. */ /* MOBİLDE KATLANAN FİLTRE ÇUBUĞU (21.08.2026, kullanıcı isteği) .filter-govde masaüstünde `display: contents` ile KUTU ÜRETMEZ; çocukları doğrudan .filter-bar'ın flex öğesi olmaya devam eder, yani masaüstü yerleşimi piksel piksel aynı kalır. Katlama düğmesi de masaüstünde gizlidir. */ .filter-govde { display: contents; } .filtre-katla { display: none; } .filter-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; padding: 14px 16px; margin-bottom: 14px; } .filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .filter-field > label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .filter-input { height: 34px; padding: 0 10px; font-size: 13px; color: var(--text-main); background: var(--bg-app); border: 1px solid var(--border-color); border-radius: var(--radius-control); max-width: 240px; } .filter-input:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .filter-date-pair { display: flex; align-items: center; gap: 6px; } .filter-dash { color: var(--text-muted); font-size: 12px; } /* Hazır şablon seçiliyken tarihler yalnızca hesaplanan aralığı gösterir; düzenlenebilir görünüp düzenlenememeleri kafa karıştırırdı, o yüzden soluklaştırılıyor. */ .filter-dates.is-readonly .filter-input { opacity: 0.6; cursor: default; } .filter-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .filter-stamp { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; margin-right: 2px; } .filter-run { height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--on-primary); background: var(--primary); border: 0; border-radius: var(--radius-control); cursor: pointer; } .filter-run:hover { filter: brightness(1.08); } .filter-refresh { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-muted); background: var(--bg-app); border: 1px solid var(--border-color); border-radius: var(--radius-control); cursor: pointer; } .filter-refresh:hover { color: var(--primary); border-color: var(--primary); } /* Kullanıcının kendi kart görünümünü kıstığı panel. */ .card-picker { padding: 16px; margin-bottom: 14px; } .card-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .card-picker-head h3 { font-size: 14px; font-weight: 600; margin: 0; } /* MODAL KAPATMA DÜĞMESİ — kullanıcı 19.08.2026'da "x kapatma tuşu yok, arkaya tıklayınca kapanıyor, kullanıcı bunu anlamayabilir" dedi. Düğme VARDI (üç modalın üçünde de) ama düğme GİBİ GÖRÜNMÜYORDU: 14px, zeminsiz, kenarlıksız ve soluk bir ikon — kalabalık bir tablonun üstünde fark edilmiyor. Tek bir sınıfta çözülüyor ki üç modal da aynı görünsün: 34px'lik dokunma hedefi (mobil için WCAG asgarisi), kendi zemini + kenarlığı, hover'da kırmızı. */ .card-picker-close { background: var(--bg-subtle); border: 1px solid var(--border-card); border-radius: var(--radius-control); color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background-color .15s, color .15s, border-color .15s; } .card-picker-close:hover, .card-picker-close:focus-visible { background: var(--danger); border-color: var(--danger); color: var(--on-danger); } .card-picker-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; margin-bottom: 14px; } .card-picker-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 4px 0; min-width: 0; } .card-picker-item > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-picker-type { margin-left: auto; font-size: 10.5px; color: var(--text-light); flex-shrink: 0; } /* Raporu tarih aralığı kabul etmeyen kartlarda: rakamın filtreden etkilenmediğini söyler. */ .stale-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 999px; vertical-align: middle; } /* ---- Panel iskeleti: veri PanelIcerik fetch'iyle gelene dek görünen kutular. Renkler token'dan (iki temada da çalışır); parıltı yerine nabız — yeni renk tanımlamadan her skinde doğru görünür. ---- */ .skel { background: var(--bg-subtle); border-radius: var(--radius-chip); animation: skel-nabiz 1.1s ease-in-out infinite alternate; } .skel-line { height: 12px; margin: 6px 0; } .skel-value { height: 26px; width: 80%; margin: 10px 0 8px; } .skel-chart { height: 220px; margin-top: 14px; border-radius: var(--radius-card); } .skel-card { pointer-events: none; } @keyframes skel-nabiz { from { opacity: 0.45; } to { opacity: 1; } } /* Açık bekleme mesajı: iskelet tek başına "yükleniyor" demiyordu. İçerik fetch'le gelince şerit innerHTML ile birlikte kaybolur — ayrıca gizlemek gerekmez. BİLEREK gösterişli (12.08 ikinci geri bildirim: "hiç dikkat çekmiyor"): marka renginde, iri puntolu, nabız atan bir bant — göz kaçırmasın. */ .panel-yukleniyor { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; margin-bottom: 18px; font-size: 14.5px; font-weight: 600; color: var(--primary); background: var(--primary-light); border: 1.5px solid var(--primary); border-radius: var(--radius-card); animation: panel-nefes 1.6s ease-in-out infinite; } .panel-spinner { width: 19px; height: 19px; flex-shrink: 0; border: 3px solid var(--primary-light); border-top-color: var(--primary); border-radius: 50%; animation: panel-don 0.8s linear infinite; } @keyframes panel-nefes { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } /* Filtre çubuğundaki damga da yüklenirken döner (ikon içerik gelince değişir). */ .filter-stamp .bi-arrow-repeat { display: inline-block; animation: panel-don 1s linear infinite; } @keyframes panel-don { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: 0.6; } .panel-spinner, .filter-stamp .bi-arrow-repeat, .panel-yukleniyor { animation: none; } } .kpi-row { display: grid; /* min(): dar kapta hücre kapla sınırlanır (bkz. .admin-hub) — masaüstünde no-op. Taban 14.08'de 230 → 300px: kart AÇILINCA ayrıntı/kırılım satırları (uzun cari ünvanları, "Firma · Kalem" etiketleri) sığmıyor, ad ile tutar birbirine giriyordu. Kapalı kart zaten kısa; ölçüyü belirleyen açık hâlidir. */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; } .kpi-card { padding: 16px; } .kpi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .kpi-name { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); } .kpi-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; } .kpi-sub { font-size: 11.5px; color: var(--text-light); margin-top: 3px; } .kpi-error { font-size: 11.5px; color: var(--danger); line-height: 1.4; } /* --- Tıklayınca açılan KPI kırılımı --- */ .kpi-card.expandable { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; } .kpi-card.expandable:hover, .kpi-card.expandable:focus-visible { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); outline: none; } .kpi-toggle { margin-left: 6px; color: var(--primary); font-weight: 600; white-space: nowrap; } .kpi-toggle i { font-size: 9px; transition: transform .15s ease; display: inline-block; } .kpi-card.open .kpi-toggle i { transform: rotate(180deg); } /* Kapalıyken yer kaplamaz; açılınca uzun listeler kart içinde kaydırılır. */ .kpi-details { display: none; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); max-height: 240px; overflow-y: auto; } .kpi-card.open .kpi-details { display: block; } .kpi-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--border-color); } .kpi-detail-row:last-child { border-bottom: none; } .kpi-detail-label { color: var(--text-muted); /* 14.08: ünvan tek satıra sığmayınca üç noktayla KESİLİYORDU ve hangi cari olduğu okunmuyordu. Artık en fazla iki satıra sarılır; tutar sağda hizalı kalır. flex: 1 + min-width: 0 olmadan sarma çalışmaz (flex öğesi taşar). */ flex: 1; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kpi-detail-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-main); white-space: nowrap; } .kpi-detail-value.neg { color: var(--danger); } .dash-panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; } @media (max-width: 900px) { .dash-panels { grid-template-columns: 1fr; } } /* ============ Panel sekmeleri (Faz 30) ============ */ /* Dört sekme: Genel Bakış · Finans · Cari · Satış. Şerit filtre çubuğunun ÜSTÜNDE durur — filtreler sekmeler arasında taşınır ve kullanıcı önce "neye baktığını", sonra "hangi kapsamda baktığını" okur. Renkler token'lardan; sabit renk yazmak her skinde tek tek ezmeyi gerektirirdi (Faz 25 dersi). */ .panel-sekmeleri { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .panel-sekme { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill, 999px); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .panel-sekme:hover { color: var(--text-main); border-color: var(--primary); } .panel-sekme.aktif { background: var(--primary); border-color: var(--primary); color: #fff; } .panel-sekme-adet { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill, 999px); background: var(--bg-hover, rgba(0,0,0,.06)); color: inherit; } .panel-sekme.aktif .panel-sekme-adet { background: rgba(255, 255, 255, .22); } /* Grafik başlığındaki araçlar: seri (kırılım) çipleri + admin huni düğmesi. */ .chart-head-araclar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .seri-cipleri { display: flex; flex-wrap: wrap; gap: 4px; } .seri-cip { padding: 3px 9px; border-radius: var(--radius-pill, 999px); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; } .seri-cip:hover { color: var(--text-main); border-color: var(--primary); } .seri-cip.aktif { background: var(--primary); border-color: var(--primary); color: #fff; } /* Yönetim > Panel Kartları: sekme çoklu seçimi (dar sütunda alt alta sığsın). */ .panel-secim { display: flex; flex-direction: column; gap: 2px; } .panel-secim-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* Panel içi bölüm başlığı: kullanıcı DÖRT sekme seçti, Finans sekmesi 20'ye yakın kart taşıyor ve başlıksız okunmuyordu. */ .panel-bolum-baslik { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 22px 0 10px; } .panel-bolum-baslik::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } /* ============ Dashboard grafikleri ============ */ .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Çok serili grafik (yığın çubuk, vade dağılımı) tam genişlik ister: 7 seriyle yarım sütunda göstergesi çubuğu eziyordu. */ .chart-genis { grid-column: 1 / -1; } /* Çok serili grafiğin göstergesi alta gelir ve 8 seride birkaç satır tutar; 260px'lik ortak yükseklikte çubuklara yer kalmıyordu (375px'te ölçüldü: çubuklar 20px'e inmişti). Gösterge kaldırmak yerine kart uzatılır — hangi rengin hangi banka olduğunu okumadan yığın çubuk hiçbir şey anlatmaz. */ .chart-genis .chart-body { height: 330px; } @media (max-width: 768px) { .chart-genis .chart-body { height: 400px; } } /* Gauge tek bir orandır; yarım halka alçak durur, kart da öyle olmalı. */ .chart-gauge .chart-body { height: 200px; } @media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } } /* Tek kalan son grafik satırı doldursun — yarım sütunda uzun hesap adları kırpılıyordu. */ .chart-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .chart-card { overflow: hidden; } .chart-subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .chart-body { padding: 14px 16px 16px; height: 260px; position: relative; } .chart-body canvas { max-height: 100%; } /* .report-shortcuts / .report-shortcut kuralları KALDIRILDI (14.08.2026): panelin altındaki rapor kısayolu şeridi kullanıcı isteğiyle silindi, kuralları da başka hiçbir ekranda kullanılmıyordu (tarandı). Ölü CSS bırakmak, sonradan gelenin "burada bir şey vardı" diye aramasına yol açar. */ .panel-head { padding: 13px 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .panel-head h3 { font-family: var(--font-display); font-size: 14px; margin: 0; color: var(--text-main); } .panel-head .count { font-size: 12px; color: var(--text-muted); } .panel-body { padding: 6px 8px; } .dash-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--radius-chip); text-decoration: none; color: inherit; } .dash-row:hover { background: var(--bg-hover); color: inherit; } .dash-row-title { font-size: 13px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-row-sub { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; } .q-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .q-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; } .chip-in { background: var(--info-light); color: var(--info); } .chip-out { background: var(--success-light); color: var(--success); } .chip-time { background: var(--bg-subtle); color: var(--text-muted); font-weight: 600; } /* ============ Agent yönlendirme kutusu (Rapor Sihirbazı) ============ */ .ai-routing-box { border: 1px solid var(--primary); border-left-width: 3px; background: var(--primary-light); border-radius: 9px; padding: 14px 16px; } .ai-routing-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--primary); } .ai-routing-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } .ai-routing-box .form-control-custom { background: var(--bg-card); } /* ============ Yönetim merkezi ============ */ .admin-hub { display: grid; /* min(330px, 100%): kap 330px'ten darsa (375px telefon) hücre kapla sınırlanır, yoksa auto-fit taşırırdı. Masaüstünde min() daima 330px'e çözülür — değişiklik yok. */ grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 14px; } .admin-card { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 10px; padding: 16px; box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .admin-card:hover { color: inherit; border-color: var(--primary); box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } .admin-card .stat-card-icon { width: 42px; height: 42px; font-size: 18px; flex-shrink: 0; } .admin-card-body { min-width: 0; flex: 1; } .admin-card-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--text-main); } .admin-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 3px; } .admin-card-meta { font-size: 11px; color: var(--text-light); margin-top: 6px; } .admin-card-arrow { color: var(--text-light); font-size: 14px; flex-shrink: 0; } .breadcrumb-back { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; margin-bottom: 4px; } .breadcrumb-back:hover { color: var(--primary); } /* ============ Rapor Sihirbazı (adım adım) ============ */ .wizard-shell { max-width: 820px; } .wizard-steps { display: flex; list-style: none; margin: 0 0 16px; padding: 0; gap: 4px; overflow-x: auto; } .wizard-step { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--radius-chip); cursor: pointer; white-space: nowrap; /* --text-light DEĞİL: henüz gelinmemiş sihirbaz adımları beyaz kart üstünde 2,32:1 kontrasta düşüyordu (WCAG AA normal metin için 4,5 ister). --text-muted ~4,55:1 veriyor ve altı skinde birden geçerli. Klasik'in bilinçli olarak değiştirildiği tek yer burasıdır — kullanıcı kararı, 09.08.2026. */ color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; } .wizard-step:hover { background: var(--bg-hover); } .wizard-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-subtle); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .wizard-step-label { font-size: 12.5px; font-weight: 600; } .wizard-step.active { color: var(--primary); } .wizard-step.active .wizard-step-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .wizard-step.done { color: var(--success); } .wizard-step.done .wizard-step-num { background: var(--success-light); border-color: var(--success); color: var(--success); } .wizard-body { padding: 24px; } .wizard-pane { display: none; } .wizard-pane.active { display: block; animation: fadeIn 0.2s ease-out; } .wizard-pane-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--text-main); } .wizard-pane-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 20px; max-width: 62ch; } .wizard-pane-desc code, .empty-hint code { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; } .code-area { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12.5px; line-height: 1.5; } .wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-color); flex-wrap: wrap; } .wizard-progress { font-size: 12px; color: var(--text-light); font-variant-numeric: tabular-nums; } .wizard-summary { border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; } .summary-row { display: flex; gap: 14px; padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--border-color); } .summary-row:last-child { border-bottom: none; } .summary-row:nth-child(odd) { background: var(--bg-subtle); } .summary-label { color: var(--text-muted); min-width: 160px; font-weight: 600; } .summary-value { color: var(--text-main); word-break: break-word; } /* ============ Rapor listesi — SQL önizleme ============ */ .sql-preview { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-chip); padding: 12px 14px; margin: 4px 0 10px; } .sql-preview pre { margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; line-height: 1.55; color: var(--text-main); white-space: pre-wrap; word-break: break-word; } .sql-toggle { background: transparent; border: none; color: var(--text-muted); font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; } .sql-toggle:hover { color: var(--primary); } /* ============ Animation ============ */ .animate-fade-in { animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============ Log ekranı (Faz 11) ============ */ .log-alt { font-size: 11.5px; color: var(--text-light); } .log-uyari { font-size: 12.5px; padding: 10px 14px; border-radius: var(--radius-chip); background: var(--warning-light); color: var(--text-main); border: 1px solid var(--border-color); } .badge-flag-dikkat { background: var(--warning-light); color: var(--warning); } /* Tur satırı tamamen tıklanabilir — asıl iş detay sayfasında yapılıyor. */ .log-tur-satir { cursor: pointer; } .log-tur-tablo td { vertical-align: top; } /* Sıralanabilir kolon başlığı: bağlantı ama başlık gibi görünür; ▲▼ yönü gösterir. */ .log-sirala { color: inherit; text-decoration: none; } .log-sirala:hover { color: var(--primary); } /* Uzun sorular satırı şişirmesin; tamamı detay sayfasında okunur. */ .log-soru { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .log-rapor { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11.5px; color: var(--text-muted); word-break: break-word; } .log-tur-tablo .badge-custom { margin: 0 3px 3px 0; } .log-sayfalama { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; } .log-sayfalama > div { display: flex; gap: 8px; } /* --- Tur detayı --- */ .log-etiket { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .log-soru-buyuk { font-size: 15px; font-weight: 600; color: var(--text-main); line-height: 1.4; } .log-cevap { font-size: 13px; line-height: 1.55; color: var(--text-main); white-space: pre-wrap; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-chip); padding: 10px 12px; max-height: 320px; overflow-y: auto; } .log-ozet-satir { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-color); } .log-ozet-satir:last-child { border-bottom: none; } .log-ozet-satir > span:first-child { color: var(--text-muted); white-space: nowrap; } .log-ozet-satir > strong { text-align: right; font-weight: 600; } .log-bayrak-liste { display: flex; flex-direction: column; gap: 6px; } .log-bayrak { border-radius: var(--radius-control); padding: 7px 10px; font-size: 12px; border: 1px solid var(--border-color); } .log-bayrak > strong { display: block; font-size: 12.5px; } .log-bayrak > span { color: var(--text-muted); font-size: 11.5px; } .log-bayrak.sorunlu { background: var(--danger-light); } .log-bayrak.dikkat { background: var(--warning-light); } .log-bolum-baslik { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 20px 0 10px; } /* --- Zaman çizelgesi --- */ .log-zaman-cizelgesi { padding: 4px 0; } .log-olay { border-bottom: 1px solid var(--border-color); } .log-olay:last-child { border-bottom: none; } .log-olay > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 12.5px; list-style: none; } .log-olay > summary::-webkit-details-marker { display: none; } .log-olay > summary:hover { background: var(--bg-hover); } .log-olay-ikon { width: 16px; text-align: center; flex: none; } .log-olay-saat { font-variant-numeric: tabular-nums; color: var(--text-light); font-size: 11.5px; flex: none; } .log-olay-ozet { flex: 1; min-width: 0; word-break: break-word; } .log-olay-sure { flex: none; } .log-olay-primary .log-olay-ikon { color: var(--primary); } .log-olay-success .log-olay-ikon { color: var(--success); } .log-olay-danger .log-olay-ikon { color: var(--danger); } .log-olay-warning .log-olay-ikon { color: var(--warning); } .log-olay-info .log-olay-ikon { color: var(--info); } .log-olay-danger > summary { background: var(--danger-light); } .log-olay-govde { padding: 4px 14px 14px 40px; } .log-ic-detay { margin-top: 8px; } .log-ic-detay > summary { cursor: pointer; font-size: 11.5px; color: var(--text-muted); padding: 4px 0; } .log-kod { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 10px 12px; margin: 0 0 8px; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .log-kopyala { background: none; border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-muted); font-size: 10.5px; padding: 2px 7px; cursor: pointer; text-transform: none; letter-spacing: 0; } .log-kopyala:hover { background: var(--bg-hover); color: var(--text-main); } /* Sabit yerleşim: kolon genişlikleri aynen uygulanır ve artan yer Soru kolonuna gider. Otomatik yerleşimde rozetler Durum kolonunu şişirip soruyu 100 px'e sıkıştırıyordu. */ .log-tur-tablo { table-layout: fixed; width: 100%; } .log-satir-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; } /* Teknik sekmelerde olayın kimliği: tip, kullanıcı, ait olduğu tura bağlantı. */ .log-olay-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; } .log-olay-meta code { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; font-size: 11px; } .log-olay > summary .badge-custom { flex: none; } /* Menüdeki incelenmemiş sorunlu tur sayacı */ .menu-sayac { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-size: 10.5px; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.6; } .menu-sayac:hover { color: #fff; opacity: 0.85; } /* Triyaj paneli */ .log-triyaj-satir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* İnceleme Kuyruğu — "rapor gerekli" birikim grupları */ .log-kuyruk-grup { padding: 10px 0; border-bottom: 1px solid var(--border-color); } .log-kuyruk-grup:last-child { border-bottom: none; } .log-kuyruk-baslik { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 2px; } .log-kuyruk-not { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); background: var(--bg-subtle); border-left: 2px solid var(--primary); border-radius: 0 5px 5px 0; padding: 5px 8px; } .log-tur-arac-cubugu { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Canlı mod anahtarı ve yeni tur vurgusu */ .log-canli-anahtar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; user-select: none; padding: 0 4px; } .log-canli-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--border-color); } .log-canli-acik .log-canli-nokta { background: var(--success); animation: log-nabiz 2s ease-in-out infinite; } @keyframes log-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* Canlı modda gelen yeni satır birkaç saniye vurgulanır, sonra söner. */ .log-tur-satir.log-yeni { animation: log-yeni-satir 4s ease-out 1; } @keyframes log-yeni-satir { 0% { background: var(--success-light); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .log-canli-acik .log-canli-nokta { animation: none; } .log-tur-satir.log-yeni { animation: none; background: var(--success-light); } } /* Soru & Cevap görünümü — turları tek tek tıklamadan okumak için */ .log-gun-ayraci { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .log-gun-ayraci::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } .log-sohbet-tur { padding: 12px 0 14px; border-bottom: 1px solid var(--border-color); } .log-sohbet-tur:last-child { border-bottom: none; } .log-sohbet-tur.sorunlu { border-left: 2px solid var(--danger); padding-left: 12px; } .log-sohbet-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-light); margin-bottom: 3px; font-variant-numeric: tabular-nums; } .log-sohbet-soru .log-sohbet-metin { font-size: 14px; font-weight: 600; color: var(--text-main); line-height: 1.4; } .log-sohbet-cevap { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--primary-light); } .log-sohbet-cevap .log-sohbet-metin { font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--text-main); } .log-sohbet-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; } /* ========================================================================= ============================ SKIN: MIZAN ================================ Yeni skinler DOSYANIN SONUNA, kendi bölümüne yazılır — dosyanın ortasına dokunmadan skin eklenebilsin. Token blokları `:root`'tan sonra geldiği, bileşen ezmeleri de `body.skin-*` ön ekiyle daha yüksek özgüllükte olduğu için sıralama sorun çıkarmaz. Tez: finans çalışanı günde yüzlerce satır tarar — ekrana en çok satır, en az gürültü. Kart kutusu ve gölge yok; ayıran tek şey 1px cetvel. İmza: SAYI RAYI — tüm rakamlar tek monospace ızgarasında, ilgisiz kartlardaki tutarlar bile alt alta hizalanır. Klasik'ten biçimsel farklar (yalnızca palet değil): köşe 10px→2px · gölge var→yok · tablo satırı 12px→5px dolgu · rozet hap→kare · sidebar DAİMA KOYU→açık modda açık · rakamlar mono. ========================================================================= */ body.skin-mizan { --font-primary: 'Archivo', system-ui, sans-serif; --font-display: 'Archivo', system-ui, sans-serif; --font-mono: 'Azeret Mono', ui-monospace, 'Cascadia Mono', monospace; --bg-app: #f4f4f1; --bg-card: #ffffff; --bg-subtle: #ececea; --bg-hover: rgba(15, 20, 25, 0.045); --border-card: #d7d6d0; --border-color: #d7d6d0; --text-main: #16181a; --text-muted: #6b6f72; --text-light: #9a9d9f; --primary: #0b6b5c; --primary-light: #e2f0ed; --primary-hover: #095449; --success: #1c6b45; --success-light: #e4f1ea; --warning: #8a5a00; --warning-light: #f7efdb; --danger: #a41e17; --danger-light: #fbeae8; --info: #14607a; --info-light: #e3eef3; --secondary-light: #ececea; --secondary-text: #6b6f72; /* Klasik'te sidebar açık modda da koyudur. Mizan'da gövdeyle aynı aile: ekranın tamamı tek yüzey, sol sütun yalnızca 1px cetvelle ayrılır. */ --sidebar-bg: #eeeeec; --sidebar-border: #d7d6d0; --sidebar-text: #4a4e51; --sidebar-text-muted: #8a8e91; --sidebar-active-bg: #ffffff; /* Açık sidebar'da "aktif metin" beyaz OLAMAZ — marka, firma seçici ve kullanıcı adı bu token'dan besleniyor. */ --sidebar-active-text: #16181a; --sidebar-accent: #0b6b5c; --sidebar-hover-bg: rgba(15, 20, 25, 0.05); --sidebar-ctrl-hover: rgba(15, 20, 25, 0.06); --sidebar-raised-bg: #ffffff; /* Grafik: mor aile yerine teal→grafit. Kategorik ayrım tonla değil değerle korunsun diye açıklık basamakları eşit aralıklı. */ --chart-1: #0b6b5c; --chart-2: #2f8f7d; --chart-3: #7fb3a8; --chart-4: #4a5a63; --chart-5: #8a5a00; --chart-6: #a41e17; --chart-7: #9a9d9f; --radius-card: 2px; --radius-control: 2px; --radius-chip: 2px; --radius-pill: 2px; --card-shadow: none; --card-shadow-hover: none; --focus-ring: 0 0 0 2px var(--primary-light); /* Bootstrap köprüsü: var()'a bakanlar kendiliğinden takip eder, yalnızca sabit sayı tutan *-rgb'ler elle güncellenir. */ --bs-body-color-rgb: 22, 24, 26; --bs-body-bg-rgb: 244, 244, 241; --bs-link-color-rgb: 11, 107, 92; --bs-primary-rgb: 11, 107, 92; /* Sidebar bu skinde ACIK; koyu sidebar icin secilen mercan kirmizisi burada soluyor. Kendi --danger'i kullanilir. */ --sidebar-danger: #a41e17; --sidebar-danger-bg: rgba(164, 30, 23, 0.10); } body.skin-mizan.theme-dark { --bg-app: #101214; --bg-card: #16191c; --bg-subtle: #1b1f22; --bg-hover: rgba(255, 255, 255, 0.05); --border-card: #272b2f; --border-color: #272b2f; --text-main: #e6e8ea; --text-muted: #8d9398; --text-light: #61676b; --primary: #3fb59d; --primary-light: rgba(63, 181, 157, 0.14); --primary-hover: #5cc9b3; --success: #4cbd8a; --success-light: rgba(76, 189, 138, 0.13); --warning: #e0a340; --warning-light: rgba(224, 163, 64, 0.13); --danger: #e8635b; --danger-light: rgba(232, 99, 91, 0.13); --info: #52b6d6; --info-light: rgba(82, 182, 214, 0.13); --secondary-light: rgba(255, 255, 255, 0.06); --secondary-text: #8d9398; --sidebar-bg: #0c0e10; --sidebar-border: #272b2f; --sidebar-text: #9aa1a6; --sidebar-text-muted: #5f666a; --sidebar-active-bg: #16191c; --sidebar-active-text: #e6e8ea; --sidebar-accent: #3fb59d; --sidebar-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-ctrl-hover: rgba(255, 255, 255, 0.06); --sidebar-raised-bg: rgba(255, 255, 255, 0.04); --chart-1: #3fb59d; --chart-2: #6fcbb8; --chart-3: #9fdccf; --chart-4: #7d8b93; --chart-5: #e0a340; --chart-6: #e8635b; --chart-7: #61676b; --bs-body-color-rgb: 230, 232, 234; --bs-body-bg-rgb: 16, 18, 20; --bs-link-color-rgb: 63, 181, 157; --bs-primary-rgb: 63, 181, 157; /* Bu skinin koyu modunda --primary ACIK bir renk; ustune beyaz yazi okunmuyordu. Zemin olarak kendi en koyu yuzeyi kullanilir. */ --on-primary: var(--bg-app); --on-danger: var(--bg-app); /* Sidebar koyu moda dondu; acik-sidebar icin koyulastirilan kirmizi burada soluyor. Tabandaki mercan degerine GERI DONULUR — acik blok iki modu birden kapsadigi icin bu geri alma sart. */ --sidebar-danger: #e8676b; --sidebar-danger-bg: rgba(232, 103, 107, 0.14); } /* ---- Sayı rayı: rakamlar her yerde eşit genişlikte ---- */ body.skin-mizan { font-variant-numeric: tabular-nums; } /* Köşeler yukarıdaki --radius-* token'larından geliyor; burada yalnızca token'la ifade edilemeyen (menü işareti gibi) farklar var. */ /* ---- Sidebar menüsü: yuvarlak hap değil, sol kenarda 2px işaret ---- */ body.skin-mizan .menu-item { border-radius: 0; border-left: 2px solid transparent; padding-left: 10px; } body.skin-mizan .menu-item.active { border-left-color: var(--primary); } body.skin-mizan .theme-toggle-btn, body.skin-mizan .logout-btn, body.skin-mizan .skin-menu, body.skin-mizan .skin-menu-item { border-radius: 2px; } /* ---- Etiketler: mono, büyük harf, aralıklı — mizan sütun başlığı gibi ---- */ body.skin-mizan .custom-table th, body.skin-mizan .kpi-name, body.skin-mizan .form-label-custom, body.skin-mizan .menu-section-label, body.skin-mizan .skin-menu-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; } /* ---- Tablo: 26px satır. Klasik 12px dolgu kullanıyor, burada 5px. ---- */ body.skin-mizan .custom-table td { padding: 5px 10px; height: 26px; } body.skin-mizan .custom-table th { padding: 7px 10px; } /* ---- Rakamlar mono: hizalanmaları imzanın kendisi ---- */ body.skin-mizan .kpi-value, body.skin-mizan .kpi-detail-value { font-family: var(--font-mono); letter-spacing: -0.03em; } body.skin-mizan .kpi-value { font-size: 19px; font-weight: 600; } body.skin-mizan .kpi-card { padding: 12px 13px; } body.skin-mizan .kpi-row { gap: 8px; } /* ---- Rozet: hap (100px) değil kare ---- */ body.skin-mizan .badge-custom { border-radius: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; } /* ---- Sohbet balonu: Asistan ekranının class sözleşmesi korunur, yalnızca köşe yumuşaklığı Mizan'a uydurulur. ---- */ body.skin-mizan .chat-bubble { border-radius: 3px; } /* ========================================================================= ============================ SKIN: DEFTER =============================== Tez: muhasebe defteri. Kutu ve gölge yok; içerik CETVELLİ BANTLAR halinde akar, göz satırı yatay takip eder. Girdi de kutu değil — doldurulacak boşluk gibi yalnızca alt cetvelli. İmza: bant + cetvel. Tablo satırları dönüşümlü tonlanır, başlıkların altı 2px cetveldir. Mizan'dan ayrışma: Mizan SIKI (26px satır), Defter FERAH (40px). Klasik'ten ayrışma: köşe 0, gölge yok, sidebar açık modda açık kâğıt, başlıklar serif (Faustina). ========================================================================= */ body.skin-defter { --font-primary: 'Hanken Grotesk', system-ui, sans-serif; --font-display: 'Faustina', Georgia, serif; --bg-app: #f6f5ec; --bg-card: #fffef8; --bg-subtle: #eaeee0; --bg-hover: rgba(51, 85, 58, 0.07); --border-card: #c9c8b6; --border-color: #c9c8b6; --border-strong: #8f8f7c; --text-main: #22241d; --text-muted: #6c6d5e; --text-light: #9b9c8b; --primary: #33553a; --primary-light: #e2eadf; --primary-hover: #25412b; --success: #33553a; --success-light: #e2eadf; --warning: #8a6216; --warning-light: #f5ecd8; --danger: #9c2a20; --danger-light: #f5e6e3; --info: #2f5f6b; --info-light: #e2edef; --secondary-light: #eaeee0; --secondary-text: #6c6d5e; /* Sidebar açık kâğıt — Klasik'in daima koyu sidebar'ının tersi. */ --sidebar-bg: #eeede1; --sidebar-border: #c9c8b6; --sidebar-text: #4c4e42; --sidebar-text-muted: #8b8c7c; --sidebar-active-bg: #fffef8; --sidebar-active-text: #22241d; --sidebar-accent: #33553a; --sidebar-hover-bg: rgba(34, 36, 29, 0.05); --sidebar-ctrl-hover: rgba(34, 36, 29, 0.06); --sidebar-raised-bg: #fffef8; --chart-1: #33553a; --chart-2: #5a7d55; --chart-3: #8aa87f; --chart-4: #7a6a45; --chart-5: #8a6216; --chart-6: #9c2a20; --chart-7: #9b9c8b; --radius-card: 0; --radius-control: 0; --radius-chip: 0; --radius-pill: 0; --card-shadow: none; --card-shadow-hover: none; --focus-ring: 0 2px 0 var(--primary); --bs-body-color-rgb: 34, 36, 29; --bs-body-bg-rgb: 246, 245, 236; --bs-link-color-rgb: 51, 85, 58; --bs-primary-rgb: 51, 85, 58; /* Sidebar bu skinde acik kagit; kirmizi koyulastirilir. */ --sidebar-danger: #9c2a20; --sidebar-danger-bg: rgba(156, 42, 32, 0.10); } body.skin-defter.theme-dark { /* "Lamba ışığındaki masa" — kâğıt değil ama aynı sıcak eksende. */ --bg-app: #1a1a17; --bg-card: #20211c; --bg-subtle: #25261f; --bg-hover: rgba(138, 184, 140, 0.09); --border-card: #34352c; --border-color: #34352c; --border-strong: #575848; --text-main: #e8e6da; --text-muted: #9a9a8b; --text-light: #6e6f61; --primary: #8ab88c; --primary-light: rgba(138, 184, 140, 0.14); --primary-hover: #a8cfa9; --success: #8ab88c; --success-light: rgba(138, 184, 140, 0.14); --warning: #d3a862; --warning-light: rgba(211, 168, 98, 0.14); --danger: #e08279; --danger-light: rgba(224, 130, 121, 0.14); --info: #7fb3bd; --info-light: rgba(127, 179, 189, 0.14); --secondary-light: rgba(255, 255, 255, 0.06); --secondary-text: #9a9a8b; --sidebar-bg: #161613; --sidebar-border: #34352c; --sidebar-text: #a9a99a; --sidebar-text-muted: #6b6c5e; --sidebar-active-bg: #20211c; --sidebar-active-text: #e8e6da; --sidebar-accent: #8ab88c; --sidebar-hover-bg: rgba(255, 255, 255, 0.05); --sidebar-ctrl-hover: rgba(255, 255, 255, 0.06); --sidebar-raised-bg: rgba(255, 255, 255, 0.04); --chart-1: #8ab88c; --chart-2: #a8cfa9; --chart-3: #c3ddb9; --chart-4: #b39a6a; --chart-5: #d3a862; --chart-6: #e08279; --chart-7: #6e6f61; --bs-body-color-rgb: 232, 230, 218; --bs-body-bg-rgb: 26, 26, 23; --bs-link-color-rgb: 138, 184, 140; --bs-primary-rgb: 138, 184, 140; /* Bu skinin koyu modunda --primary ACIK bir renk; ustune beyaz yazi okunmuyordu. Zemin olarak kendi en koyu yuzeyi kullanilir. */ --on-primary: var(--bg-app); --on-danger: var(--bg-app); /* Sidebar koyu moda dondu; acik-sidebar icin koyulastirilan kirmizi burada soluyor. Tabandaki mercan degerine GERI DONULUR — acik blok iki modu birden kapsadigi icin bu geri alma sart. */ --sidebar-danger: #e8676b; --sidebar-danger-bg: rgba(232, 103, 107, 0.14); } /* Köşeler --radius-* token'larından (hepsi 0). Menü/sidebar'ın 6px'lik kendi kuralları token'a taşınmadığı için onlar aşağıda ayrıca sıfırlanır. */ body.skin-defter .menu-item, body.skin-defter .skin-menu, body.skin-defter .skin-menu-item, body.skin-defter .theme-toggle-btn, body.skin-defter .logout-btn, body.skin-defter .sidebar-firma, body.skin-defter .sidebar-user { border-radius: 0; } /* ---- FERAH: tablo satırı 40px, dönüşümlü bant ---- */ body.skin-defter .custom-table td { padding: 11px 10px; } body.skin-defter .custom-table th { padding: 10px; border-bottom: 2px solid var(--border-strong); letter-spacing: 0.13em; } /* Bant: defterin çizgili kâğıdı. Hover bandın üstüne biner. */ body.skin-defter .custom-table tbody tr:nth-child(even) { background: var(--bg-subtle); } /* ---- Girdi kutu değil, doldurulacak boşluk: yalnızca alt cetvel ---- */ body.skin-defter .form-control-custom, body.skin-defter .form-control, body.skin-defter .form-select, body.skin-defter .form-select-custom { background: transparent; border: none; border-bottom: 1.5px solid var(--border-strong); border-radius: 0; } body.skin-defter .form-control-custom:focus, body.skin-defter .form-control:focus, body.skin-defter .form-select:focus { border-bottom-color: var(--primary); box-shadow: 0 1.5px 0 var(--primary); } /* ---- Rozet hap değil, altı çizili etiket ---- */ body.skin-defter .badge-custom { background: transparent !important; border-bottom: 2px solid currentColor; padding: 1px 0 2px; font-size: 11px; letter-spacing: 0.04em; } /* ---- Menü öğesi: defter satırı — aktif olanın altı cetvelli ---- */ body.skin-defter .menu-item { border-radius: 0; border-bottom: 1px solid transparent; padding: 9px 12px; } body.skin-defter .menu-item.active { border-bottom-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); } /* ---- Rakamlar serif DEĞİL: başlıklar Faustina, tutarlar Hanken tabular. Serif rakam bu boyutlarda hizalamayı bozuyordu. ---- */ body.skin-defter .kpi-value { font-family: var(--font-primary); font-weight: 700; font-variant-numeric: tabular-nums; } body.skin-defter .kpi-card { padding: 18px; } body.skin-defter .chat-bubble { border-radius: 2px; } /* ========================================================================= ============================= SKIN: SAHA ================================ Tez: beton tesisinin görsel dili — tabela, pano, ekipman etiketi. Ağır, yüksek kontrastlı, yuvarlaksız. Ayıran şey cetvel değil 2px BLOK. İmza: kalın kenar + kondens büyük harf başlık. Sarı yalnızca İŞARET: aktif menü çubuğu, odak halkası, marka çizgisi. Metinde kullanılmaz — süs olsa gürültü olurdu. Bu yüzden --primary bronz (#7a5400): sarı bağlantı metni beton zeminde okunmuyor (kontrast 2,5), bronz 5,1 veriyor. Düğme ise mockup'taki gibi siyah, sarı hover'lı. ========================================================================= */ body.skin-saha { --font-primary: 'Chivo', system-ui, sans-serif; --font-display: 'Saira Condensed', 'Chivo', sans-serif; --bg-app: #e4e2dd; --bg-card: #ffffff; --bg-subtle: #d5d3cd; --bg-hover: rgba(232, 168, 12, 0.15); --border-card: #1b1b19; --border-color: #b3b1aa; --border-strong: #1b1b19; --text-main: #14140f; --text-muted: #5e5d55; --text-light: #8d8c83; --primary: #7a5400; --primary-light: #f7edd2; --primary-hover: #5c3f00; --success: #276b33; --success-light: #dbeade; --warning: #8a5f00; --warning-light: #f7edd2; --danger: #b4241c; --danger-light: #f7dedc; --info: #1f5b6b; --info-light: #dfebee; --secondary-light: #d5d3cd; --secondary-text: #5e5d55; /* Sidebar iki modda da siyah slab — Saha'nın tabela dili. */ --sidebar-bg: #1b1b19; --sidebar-border: #33332f; --sidebar-text: #c9c7bf; --sidebar-text-muted: #807e75; --sidebar-active-bg: rgba(255, 255, 255, 0.09); --sidebar-active-text: #ffffff; --sidebar-accent: #e8a80c; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-ctrl-hover: rgba(255, 255, 255, 0.08); --sidebar-raised-bg: rgba(255, 255, 255, 0.05); --chart-1: #2f2e2a; --chart-2: #c07a00; --chart-3: #6b6a63; --chart-4: #276b33; --chart-5: #b4241c; /* Açıldı (#8a7a52 -> #9c8b60): üstüne yazılan etiket 4,39:1'de kalıyordu, şimdi 5,5:1. Seri renkleri etiket taşır, kontrast tesadüfe bırakılamaz. */ --chart-6: #9c8b60; --chart-7: #a8a69e; --radius-card: 0; --radius-control: 0; --radius-chip: 0; --radius-pill: 0; --card-shadow: none; --card-shadow-hover: none; --focus-ring: 0 0 0 3px #e8a80c; --bs-body-color-rgb: 20, 20, 15; --bs-body-bg-rgb: 228, 226, 221; --bs-link-color-rgb: 122, 84, 0; --bs-primary-rgb: 122, 84, 0; } body.skin-saha.theme-dark { --bg-app: #17171a; --bg-card: #1f1f23; --bg-subtle: #27272c; --bg-hover: rgba(245, 183, 25, 0.13); --border-card: #4c4c53; --border-color: #33333a; --border-strong: #4c4c53; --text-main: #f0efe9; --text-muted: #9b9a94; --text-light: #6d6c67; --primary: #f5b719; --primary-light: rgba(245, 183, 25, 0.15); --primary-hover: #ffca4a; --success: #5cbb6c; --success-light: rgba(92, 187, 108, 0.14); --warning: #f5b719; --warning-light: rgba(245, 183, 25, 0.14); --danger: #ef6b62; --danger-light: rgba(239, 107, 98, 0.14); --info: #6fb4c8; --info-light: rgba(111, 180, 200, 0.14); --secondary-light: rgba(255, 255, 255, 0.07); --secondary-text: #9b9a94; --sidebar-bg: #0e0e10; --sidebar-border: #2b2b30; --sidebar-text: #b4b3ac; --sidebar-text-muted: #6d6c67; --sidebar-active-bg: rgba(255, 255, 255, 0.09); --sidebar-active-text: #ffffff; --sidebar-accent: #f5b719; --chart-1: #d8d6cf; --chart-2: #f5b719; --chart-3: #8d8c85; --chart-4: #5cbb6c; --chart-5: #ef6b62; --chart-6: #b39a5e; --chart-7: #575652; --bs-body-color-rgb: 240, 239, 233; --bs-body-bg-rgb: 23, 23, 26; --bs-link-color-rgb: 245, 183, 25; --bs-primary-rgb: 245, 183, 25; /* Bu skinin koyu modunda --primary ACIK bir renk; ustune beyaz yazi okunmuyordu. Zemin olarak kendi en koyu yuzeyi kullanilir. */ --on-primary: var(--bg-app); --on-danger: var(--bg-app); } /* Köşeler --radius-* token'larından (hepsi 0); menü/sidebar'ın kendi 6px'lik kuralları token'a taşınmadığı için burada sıfırlanır. */ body.skin-saha .menu-item, body.skin-saha .skin-menu, body.skin-saha .skin-menu-item, body.skin-saha .theme-toggle-btn, body.skin-saha .logout-btn, body.skin-saha .sidebar-firma, body.skin-saha .sidebar-user { border-radius: 0; } /* ---- 2px blok: Klasik'in 1px hairline'ının yerine ---- */ body.skin-saha .glass-card { border-width: 2px !important; } body.skin-saha .form-control-custom, body.skin-saha .form-control, body.skin-saha .form-select { border: 2px solid var(--border-strong); } /* ---- Başlıklar kondens büyük harf — tabeladaki gibi ---- */ body.skin-saha .header-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.015em; font-size: 24px; } body.skin-saha .kpi-value { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; } body.skin-saha .kpi-name, body.skin-saha .custom-table th, body.skin-saha .menu-section-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; } /* ---- Tablo başlığı dolu şerit, altı 2px ---- */ body.skin-saha .custom-table th { background: var(--bg-subtle); color: var(--text-main); border-bottom: 2px solid var(--border-strong); padding: 9px 13px; } body.skin-saha .custom-table td { padding: 9px 13px; } /* ---- Menü: kondens büyük harf, aktif olan sarı çubukla işaretli ---- */ body.skin-saha .menu-item { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; font-weight: 600; border-left: 4px solid transparent; padding-left: 12px; } body.skin-saha .menu-item.active { border-left-color: var(--sidebar-accent); } /* ---- Birincil düğme siyah, sarı hover (mockup'taki gibi) ---- */ /* Birincil düğme SİYAH DEĞİL --primary (bronz). Mockup'ta siyahtı ama uygulamada iki ayrı birincil düğme sınıfı var (.btn-primary-custom ve .filter-run); yalnızca birine yazınca panel bronz, giriş ekranı siyah kalıyordu. Zemini token'a bırakmak ikisini de aynı yapar — sınıf kovalamaktan güvenli. Kalan tek fark tipografi, o skinin sesi. */ body.skin-saha .btn-primary-custom, body.skin-saha .filter-run { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; } /* ---- Rozet: keskin köşe, 1.5px kenar ---- */ body.skin-saha .badge-custom { border: 1.5px solid currentColor; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; padding: 2px 7px; } body.skin-saha .chat-bubble { border-radius: 0; } /* ========================================================================= ============================ SKIN: ŞERİT ================================ Bu skin YERLEŞİMİ değiştirir: sidebar yatay bir üst şeride iner, sol sütun tamamen kalkar, içerik ekranın tüm genişliğini alır (~220px kazanç). Ana içeriği geniş tablolar olan ekranlar için: Reports/Run, Log, cari listeleri. Sadece CSS — DOM aynı. Sidebar'ın içindekiler yatayda sığsın diye kullanıcı rolü, bölüm başlığı ve çıkış yazısı gizlenir; ikonlar ve menü kalır. ========================================================================= */ body.skin-serit { --font-primary: 'Red Hat Text', system-ui, sans-serif; --font-display: 'Red Hat Text', system-ui, sans-serif; --font-mono: 'Red Hat Mono', ui-monospace, monospace; --bg-app: #f4f6f7; --bg-card: #ffffff; --bg-subtle: #e9edef; --bg-hover: rgba(22, 32, 42, 0.05); --border-card: #dce1e4; --border-color: #dce1e4; --text-main: #16202a; --text-muted: #5b6a75; --text-light: #8b98a2; --primary: #1d5f7a; --primary-light: #e0edf2; --primary-hover: #164a5f; --success: #1a6b52; --success-light: #e0f0ea; --warning: #8a5a10; --warning-light: #f6eede; --danger: #a8322a; --danger-light: #f8e6e4; --info: #1d5f7a; --info-light: #e0edf2; --secondary-light: #e9edef; --secondary-text: #5b6a75; /* Üst şerit iki modda da koyu — tabela gibi, içerikten net ayrılsın. */ --sidebar-bg: #1f2933; --sidebar-border: #33414d; --sidebar-text: #adbcc7; --sidebar-text-muted: #7c8b97; --sidebar-active-bg: rgba(255, 255, 255, 0.12); --sidebar-active-text: #ffffff; --sidebar-accent: #6bb6d4; --sidebar-hover-bg: rgba(255, 255, 255, 0.07); --sidebar-ctrl-hover: rgba(255, 255, 255, 0.09); --sidebar-raised-bg: rgba(255, 255, 255, 0.06); --chart-1: #1d5f7a; --chart-2: #3f8ba8; --chart-3: #7fb6cb; --chart-4: #4a6270; --chart-5: #8a5a10; --chart-6: #a8322a; --chart-7: #9aa8b1; --radius-card: 4px; --radius-control: 4px; --radius-chip: 4px; --radius-pill: 100px; --card-shadow: 0 1px 2px rgba(22, 32, 42, 0.05); --card-shadow-hover: 0 4px 14px rgba(22, 32, 42, 0.09); --focus-ring: 0 0 0 3px var(--primary-light); --bs-body-color-rgb: 22, 32, 42; --bs-body-bg-rgb: 244, 246, 247; --bs-link-color-rgb: 29, 95, 122; --bs-primary-rgb: 29, 95, 122; } body.skin-serit.theme-dark { --bg-app: #0f1519; --bg-card: #161e24; --bg-subtle: #1c262d; --bg-hover: rgba(255, 255, 255, 0.05); --border-card: #25313a; --border-color: #25313a; --text-main: #e6edf2; --text-muted: #8ba0ad; --text-light: #5f707c; --primary: #4aa3c4; --primary-light: rgba(74, 163, 196, 0.15); --primary-hover: #6bb6d4; --success: #45b98f; --success-light: rgba(69, 185, 143, 0.14); --warning: #d99b3f; --warning-light: rgba(217, 155, 63, 0.14); --danger: #e0716a; --danger-light: rgba(224, 113, 106, 0.14); --info: #4aa3c4; --info-light: rgba(74, 163, 196, 0.14); --secondary-light: rgba(255, 255, 255, 0.06); --secondary-text: #8ba0ad; --sidebar-bg: #0a1014; --sidebar-border: #1e2a32; --sidebar-text: #9db0bc; --sidebar-text-muted: #647680; --sidebar-active-bg: rgba(255, 255, 255, 0.1); --sidebar-active-text: #ffffff; --sidebar-accent: #4aa3c4; --chart-1: #4aa3c4; --chart-2: #7fc3db; --chart-3: #a9d9ea; --chart-4: #7d919e; --chart-5: #d99b3f; --chart-6: #e0716a; --chart-7: #5f707c; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --card-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.4); --bs-body-color-rgb: 230, 237, 242; --bs-body-bg-rgb: 15, 21, 25; --bs-link-color-rgb: 74, 163, 196; --bs-primary-rgb: 74, 163, 196; /* Bu skinin koyu modunda --primary ACIK bir renk; ustune beyaz yazi okunmuyordu. Zemin olarak kendi en koyu yuzeyi kullanilir. */ --on-primary: var(--bg-app); --on-danger: var(--bg-app); } /* ---- YERLEŞİM: dikey sütun -> yatay şerit ---- */ body.skin-serit .app-container { flex-direction: column; } body.skin-serit .app-sidebar { position: sticky; top: 0; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 14px; padding: 0 18px; border-right: none; border-bottom: 1px solid var(--sidebar-border); } body.skin-serit .app-main { margin-left: 0; } /* Şeritte dikey boşluklar anlamsız; her parça satıra oturur. */ body.skin-serit .sidebar-brand, body.skin-serit .sidebar-user { margin-bottom: 0; flex-shrink: 0; } body.skin-serit .sidebar-firma { margin: 0; flex-shrink: 0; max-width: 215px; } body.skin-serit .sidebar-menu { flex-direction: row; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; } body.skin-serit .menu-item { padding: 8px 12px; white-space: nowrap; } /* Yatayda sığmayanlar: bölüm başlığı ve kullanıcı rolü. Rol zaten avatarın yanında iki satır istiyordu. */ body.skin-serit .menu-section-label, body.skin-serit .user-info { display: none; } body.skin-serit .sidebar-user { order: 8; padding: 0; } body.skin-serit .sidebar-footer { order: 9; flex-direction: row; align-items: center; gap: 8px; width: auto; flex-shrink: 0; padding-top: 0; border-top: none; } /* Çıkış formu ve düğmesi .w-100 taşıyor (Bootstrap); şeritte satırı yerdi. */ body.skin-serit #logoutForm, body.skin-serit .logout-btn { width: auto !important; } body.skin-serit .logout-btn { padding: 8px 10px; } body.skin-serit .logout-btn span { display: none; } /* Tasarım menüsü YUKARI değil AŞAĞI açılmalı — şerit ekranın tepesinde. */ body.skin-serit .skin-menu { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; width: 250px; } /* ========================================================================= ============================= SKIN: RAY ================================= Bu skin de YERLEŞİMİ değiştirir: sidebar 56px'lik bir ikon rayına iner, fareyle üstüne gelince açılır. Navigasyon her an görünür ama yer kaplamaz. Gün boyu aynı ekranda çalışan, menüye seyrek dokunan kullanıcı için. Etiketler `display:none` ile gizlenir, sidebar'a `overflow:hidden` VERİLMEZ: verilseydi tasarım menüsü de kırpılırdı (ray 56px, menü 240px). ========================================================================= */ body.skin-ray { --font-primary: 'Public Sans', system-ui, sans-serif; --font-display: 'Public Sans', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, monospace; --bg-app: #f2f1ef; --bg-card: #ffffff; --bg-subtle: #e8e6e2; --bg-hover: rgba(28, 26, 24, 0.05); --border-card: #dad7d2; --border-color: #dad7d2; --text-main: #1c1a18; --text-muted: #67635d; --text-light: #98938c; --primary: #a13d2d; --primary-light: #f7e8e4; --primary-hover: #832f21; --success: #2c6b4a; --success-light: #e2efe8; --warning: #8a6012; --warning-light: #f6efdc; --danger: #a13d2d; --danger-light: #f7e8e4; --info: #3c5f6b; --info-light: #e6eef0; --secondary-light: #e8e6e2; --secondary-text: #67635d; --sidebar-bg: #26241f; --sidebar-border: #3b3831; --sidebar-text: #b6b1a8; --sidebar-text-muted: #807b72; --sidebar-active-bg: rgba(255, 255, 255, 0.12); --sidebar-active-text: #ffffff; --sidebar-accent: #d4826d; --sidebar-hover-bg: rgba(255, 255, 255, 0.07); --sidebar-ctrl-hover: rgba(255, 255, 255, 0.09); --sidebar-raised-bg: rgba(255, 255, 255, 0.06); --chart-1: #a13d2d; --chart-2: #c9705c; --chart-3: #e0a795; --chart-4: #5c5750; --chart-5: #2c6b4a; --chart-6: #8a6012; --chart-7: #a8a29a; --radius-card: 3px; --radius-control: 3px; --radius-chip: 3px; --radius-pill: 100px; --card-shadow: none; --card-shadow-hover: 0 2px 10px rgba(28, 26, 24, 0.08); --focus-ring: 0 0 0 3px var(--primary-light); --bs-body-color-rgb: 28, 26, 24; --bs-body-bg-rgb: 242, 241, 239; --bs-link-color-rgb: 161, 61, 45; --bs-primary-rgb: 161, 61, 45; } body.skin-ray.theme-dark { --bg-app: #131211; --bg-card: #1b1a18; --bg-subtle: #232120; --bg-hover: rgba(255, 255, 255, 0.05); --border-card: #2c2a27; --border-color: #2c2a27; --text-main: #eae7e2; --text-muted: #948e86; --text-light: #66615b; --primary: #e0745e; --primary-light: rgba(224, 116, 94, 0.15); --primary-hover: #ec8f7b; --success: #5cb98a; --success-light: rgba(92, 185, 138, 0.14); --warning: #d5a544; --warning-light: rgba(213, 165, 68, 0.14); --danger: #e0745e; --danger-light: rgba(224, 116, 94, 0.14); --info: #6fa3b3; --info-light: rgba(111, 163, 179, 0.14); --secondary-light: rgba(255, 255, 255, 0.06); --secondary-text: #948e86; --sidebar-bg: #0d0c0b; --sidebar-border: #232120; --sidebar-text: #a8a29a; --sidebar-text-muted: #6b665f; --sidebar-active-bg: rgba(255, 255, 255, 0.1); --sidebar-active-text: #ffffff; --sidebar-accent: #e0745e; --chart-1: #e0745e; --chart-2: #ec9c8a; --chart-3: #f3c0b3; --chart-4: #8e877f; --chart-5: #5cb98a; --chart-6: #d5a544; --chart-7: #5f5a54; --bs-body-color-rgb: 234, 231, 226; --bs-body-bg-rgb: 19, 18, 17; --bs-link-color-rgb: 224, 116, 94; --bs-primary-rgb: 224, 116, 94; /* Bu skinin koyu modunda --primary ACIK bir renk; ustune beyaz yazi okunmuyordu. Zemin olarak kendi en koyu yuzeyi kullanilir. */ --on-primary: var(--bg-app); --on-danger: var(--bg-app); } /* ---- YERLEŞİM: 56px ray, hover'da açılır ---- */ body.skin-ray .app-sidebar { width: 56px; padding: 16px 8px; transition: width 0.16s ease; } body.skin-ray .app-sidebar:hover { width: 236px; } body.skin-ray .app-main { margin-left: 56px; } /* Etiketler daraltılmışken gizli. display:none — opacity DEĞİL: şeffaf etiket hâlâ yer kaplar ve rayı içeriden genişletir. */ body.skin-ray .brand-text, body.skin-ray .user-info, body.skin-ray .menu-section-label, body.skin-ray .menu-item > span, body.skin-ray .logout-btn span, body.skin-ray .sidebar-firma-form, body.skin-ray .sidebar-firma-adi { display: none; } body.skin-ray .app-sidebar:hover .brand-text, body.skin-ray .app-sidebar:hover .user-info, body.skin-ray .app-sidebar:hover .menu-section-label, body.skin-ray .app-sidebar:hover .menu-item > span, body.skin-ray .app-sidebar:hover .logout-btn span, body.skin-ray .app-sidebar:hover .sidebar-firma-adi { display: inline; } body.skin-ray .app-sidebar:hover .sidebar-firma-form { display: flex; } /* Daraltılmışken her şey ortalanır, açılınca sola yaslanır. */ body.skin-ray .sidebar-brand, body.skin-ray .sidebar-firma, body.skin-ray .sidebar-user, body.skin-ray .menu-item, body.skin-ray .logout-btn { justify-content: center; } body.skin-ray .app-sidebar:hover .sidebar-brand, body.skin-ray .app-sidebar:hover .sidebar-firma, body.skin-ray .app-sidebar:hover .sidebar-user, body.skin-ray .app-sidebar:hover .menu-item { justify-content: flex-start; } body.skin-ray .sidebar-footer-row { flex-direction: column; } body.skin-ray .app-sidebar:hover .sidebar-footer-row { flex-direction: row; } body.skin-ray .sidebar-firma { padding: 7px 6px; } /* Sayaç rozeti: dar rayda `margin-left:auto` ile ikonu itiyordu. Daraltılmışken ikonun köşesine oturur, açılınca eski yerine döner. */ body.skin-ray .menu-item { position: relative; } body.skin-ray .menu-sayac { position: absolute; top: 2px; right: 4px; margin-left: 0; min-width: 16px; padding: 0 4px; font-size: 9.5px; line-height: 1.7; } body.skin-ray .app-sidebar:hover .menu-sayac { position: static; margin-left: auto; min-width: 20px; padding: 1px 7px; font-size: 10.5px; line-height: 1.6; } /* Tasarım menüsü ray genişliğinde açılmasın (56px'lik menü okunmaz). */ body.skin-ray .skin-menu { width: 240px; left: 0; right: auto; } /* ========================================================================= Kart filtre kurucusu (Faz 26) — kart üstündeki huni düğmesi (yalnız admin'e çizilir) + kural modalı. Renk ve köşe TOKEN'lardan gelir (skin sözleşmesi); modal genişliği min() ile 375px'te de taşmaz. ========================================================================= */ .kart-filtre-ac { border: none; background: transparent; color: var(--text-muted); padding: 2px 6px; cursor: pointer; border-radius: var(--radius-control); line-height: 1; font-size: 13px; } .kart-filtre-ac:hover { color: var(--primary); background: var(--sidebar-hover-bg); } .kart-filtre-ac.aktif { color: var(--primary); } /* kpi-top üç çocuklu flex'e dönüyor: ad solda kalsın, huni ikonun yanına yaslansın. */ .kpi-top .kart-filtre-ac { margin-left: auto; margin-right: 6px; } .kart-filtre-modal { position: fixed; inset: 0; background: rgba(20, 20, 15, 0.45); z-index: 1200; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px 12px; overflow-y: auto; } .kart-filtre-kutu { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 16px; } .kart-filtre-govde { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .kf-bolum-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 4px; } .kf-durum { font-size: 12.5px; color: var(--text-muted); } .kf-hata { color: var(--danger); } .kf-kural { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 12.5px; border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 7px 10px; color: var(--text-main); } .kf-kural-sil { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 2px; line-height: 1; } .kf-kural-sil:hover { color: var(--danger); } .kf-yeni { display: flex; flex-direction: column; gap: 8px; } .kf-satir { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .kf-satir > label { width: 42px; flex: none; color: var(--text-muted); font-size: 11.5px; } .kf-satir .filter-input { flex: 1; min-width: 0; } .kf-modlar { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-main); } .kf-modlar label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .kf-degerler { max-height: 240px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 4px; display: flex; flex-direction: column; } .kf-deger { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12.5px; color: var(--text-main); border-radius: var(--radius-control); cursor: pointer; } .kf-deger:hover { background: var(--sidebar-hover-bg); } .kf-deger span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; } .kf-adet { flex: none; font-size: 11px; color: var(--text-muted); } .kf-alt { display: flex; align-items: center; gap: 10px; margin-top: 4px; } /* ====================== Faz 27: çoklu firma + grup içi ====================== Firma çoklu seçici details/summary'dir: JS'siz de açılır kapanır, kapalıyken de içindeki checkbox'lar form'la gider. Mobil blok .filter-field'ı zaten tam genişliğe çektiği için burada ayrı mobil kuralı gerekmez; liste paneli max-width'ini viewport'tan alır, 375px'te taşmaz. */ .firma-secici { position: relative; } .firma-secici > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; } .firma-secici > summary::-webkit-details-marker { display: none; } /* Summary içindeki başlık .filter-field > label ile aynı görünür — summary'nin kendisi label olamıyor (details'in tetikleyicisi), o yüzden kopya. */ .filter-label-line { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .firma-secici-ozet { display: block; position: relative; height: 34px; line-height: 32px; padding: 0 26px 0 10px; font-size: 13px; color: var(--text-main); background: var(--bg-app); border: 1px solid var(--border-color); border-radius: var(--radius-control); min-width: 170px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .firma-secici-ozet::after { content: ""; position: absolute; right: 10px; top: 50%; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-muted); } .firma-secici[open] .firma-secici-ozet { border-color: var(--primary); } .firma-secici-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-width: min(320px, calc(100vw - 48px)); max-height: 260px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .firma-secici-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; font-size: 13px; color: var(--text-main); border-radius: var(--radius-control); cursor: pointer; } /* Uzun resmi ünvan ("AUREL MARBLE MADENCİLİK TİC.SAN.LTD.ŞTİ.") panelde yatay kaydırma yaratmasın — satır içinde sarılır. */ .firma-secici-item > span { min-width: 0; overflow-wrap: anywhere; } .firma-secici-item:hover { background: var(--sidebar-hover-bg); } /* Çekmecede sınıf başlıkları (Grup / Dış Ortaklı / Diğer). */ .firma-grup-baslik { padding: 6px 9px 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } /* Grup şirketine ait işaretli cari — KPI kırılımında ve yönetim ekranında. */ .grup-ici-rozet { display: inline-block; margin-left: 6px; padding: 0 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--primary); border: 1px solid currentColor; border-radius: var(--radius-pill); vertical-align: middle; } /* Çok firmalı toplama katılamayan firma uyarısı: veri dürüstlüğü rozeti, dikkat çekmeli — eksik toplamı tam sanmak en tehlikeli hata. */ .stale-badge.kapsam-eksik { color: var(--danger); border-color: currentColor; } /* Kurucu modalında kural bölümlerinin kapsam etiketi: hangi listenin yalnız paneli, hangisinin asistanı da etkilediği başlıkta görünür olmak zorunda. */ .kf-kapsam-not { font-size: 10.5px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: 6px; } .kf-kapsam-rapor { color: var(--primary); font-weight: 600; } /* Ayarlar > Canlı Firma/Dönem: seçilebilir firma satırı (14.08). */ .firma-satiri { cursor: pointer; } .firma-satiri:hover { background: var(--sidebar-hover-bg); } .firma-satiri.secili { background: var(--sidebar-hover-bg); font-weight: 600; color: var(--text-main); } /* Bilgi ikonu (14.08): her kartta duran uzun metin rozetlerinin yerini alır — "aralık vadeyi süzer" gibi SÜREKLİ doğru ama nadiren okunan bilgiler. Açıklama title'da; tabindex sayesinde klavyeyle de odaklanılır (dokunmatikte fokus = tooltip). */ .bilgi-ikon { display: inline-flex; align-items: center; color: var(--text-light, var(--text-muted)); font-size: 12px; cursor: help; margin-left: 2px; } .bilgi-ikon:hover, .bilgi-ikon:focus { color: var(--primary); outline: none; } /* Kural satırındaki kapsam rozeti: kuralın NEREYE işlediği (14.08). Kural listesinde kolon/kip kadar önemli — bakan kişi "bu asistanı da süzüyor mu" sorusunu görmeli. */ .kf-kapsam-rozet { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-pill, 10px); border: 1px solid var(--border-color); background: var(--sidebar-hover-bg); color: var(--text-muted); font-size: 10.5px; white-space: nowrap; } /* Seçilen kapsamın ne yaptığını anlatan satır — kurucu içinde, seçicinin altında. */ .kf-kapsam-aciklama { font-size: 11.5px; color: var(--text-muted); margin: -2px 0 2px 52px; line-height: 1.35; } /* ---- Çok firmalı kırılım ağacı: Firma → Bölge → Şube → kalem ---- Her düzey

— JS'siz açılır kapanır. İç içe düzeyler soldan girinti + ince kılavuz çizgisiyle ayrılır; kalem yapraktır. */ .kd-agac { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .kd-dugum > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-control); color: var(--text-main); } .kd-dugum > summary::-webkit-details-marker { display: none; } .kd-dugum > summary::before { content: ""; flex: none; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--text-muted); transition: transform 0.12s ease; } .kd-dugum[open] > summary::before { transform: rotate(90deg); } .kd-dugum > summary:hover { background: var(--sidebar-hover-bg); } /* Firma düzeyi (en dış) kalın; içeri girdikçe normal ağırlık ve girinti. */ .kd-agac > .kd-dugum > summary { font-weight: 700; } .kd-dugum .kd-dugum, .kd-dugum .kd-kalem, .kd-dugum .kd-not { margin-left: 14px; border-left: 1px solid var(--border-color); padding-left: 8px; } .kd-kalem { display: flex; align-items: center; gap: 8px; padding: 3px 6px; color: var(--text-muted); } .kd-ad { flex: 1; min-width: 0; /* Kırılım ağacında da ad kesilmek yerine iki satıra sarılır (14.08) — derin düzeylerde girinti payı azaldıkça tek satır iyice yetersiz kalıyordu. */ overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kd-deger { flex: none; font-variant-numeric: tabular-nums; color: var(--text-main); } .kd-deger.neg { color: var(--danger); } .kd-not { padding: 3px 6px; font-size: 10.5px; color: var(--text-muted); font-style: italic; } /* Kırılım çipleri (deneme): açış sırası = kırılım sırası; aktif çipte sıra numarası. */ .kirilim-cipleri { display: flex; align-items: center; gap: 6px; height: 34px; } .kirilim-cip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-app); border: 1px dashed var(--border-color); border-radius: var(--radius-pill); cursor: pointer; } .kirilim-cip.aktif { color: var(--primary); border-style: solid; border-color: currentColor; } .kirilim-cip .cip-sira { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 9.5px; font-weight: 700; color: var(--on-primary); background: var(--primary); border-radius: 50%; } /* ---- Grup içi cari eşleme matrisi (Yönetim ekranı) ---- */ .gic-matris .gic-sutun-alt { font-size: 10px; font-weight: 500; color: var(--text-muted); text-transform: none; } .gic-satir-baslik { font-weight: 700; } .gic-diyagonal { color: var(--text-muted); text-align: center; } .gic-onayli { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 0; } .gic-onayli .gic-bakiye { font-variant-numeric: tabular-nums; font-weight: 600; } .gic-onayli .gic-bakiye.neg { color: var(--danger); } .gic-onayli .gic-unvan { flex-basis: 100%; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } .gic-sil { display: inline; } .gic-sil-btn { border: 0; background: none; color: var(--text-muted); padding: 2px 4px; cursor: pointer; } .gic-sil-btn:hover { color: var(--danger); } .gic-oneri { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .gic-oneri .form-select { max-width: 300px; } .gic-bos { font-size: 12px; color: var(--warning, #b58900); } .stale-badge.gic-birebir { color: var(--success, #2e7d32); border-color: currentColor; } /* Bizim Cariler: şirket bölümündeki cari arama satırı. */ .gic-arama { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Grafik altındaki kırılım bölümü: kapalı başlarken yalnızca ince bir başlık şeridi. */ .chart-kirilim { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; } .chart-kirilim > summary { list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; padding: 3px 2px; } .chart-kirilim > summary::-webkit-details-marker { display: none; } .chart-kirilim > summary:hover { color: var(--text-main); } .chart-kirilim > .kd-agac { margin-top: 6px; max-height: 280px; overflow-y: auto; } /* ---- Drill-down + kalem modalı (Faz 28) ---- */ /* Breadcrumb: grafikte inilen yol. Kök düzeydeyken hidden — yer kaplamaz. */ .drill-yolu { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; margin-bottom: 6px; color: var(--text-muted); } .drill-kirinti { border: 1px solid var(--border-color); background: transparent; color: var(--text-main); border-radius: var(--radius-chip, var(--radius-control)); padding: 2px 8px; font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .drill-kirinti:hover { background: var(--sidebar-hover-bg); } .drill-ayrac { color: var(--text-light, var(--text-muted)); } .drill-simdiki { color: var(--text-main); font-weight: 600; } /* Tıklanabilir ayrıntı satırı / ağaç kalemi: raporu detaylı kartlarda kalem modalı, ciro kartında (sube-satis-tiklanir) şube satış detayı sayfası açılır. */ .kalem-tiklanir, .sube-satis-tiklanir { cursor: pointer; } .kpi-detail-row.kalem-tiklanir:hover, .kd-kalem.kalem-tiklanir:hover, .kpi-detail-row.sube-satis-tiklanir:hover, .kd-kalem.sube-satis-tiklanir:hover { background: var(--sidebar-hover-bg); border-radius: var(--radius-control); } /* Kalem modalı: kart filtre kurucusunun kabuğunu (overlay + kutu) paylaşır, kutusu daha geniştir — kalem listesi tablo taşır. */ .kalem-kutu { width: min(880px, 100%); position: relative; } .kalem-kutu .kalem-kapat { position: absolute; top: 12px; right: 12px; /* Kutunun İÇİNDE yüzdüğü için gövde kaydırılınca altındaki tablo geçmesin. */ z-index: 3; box-shadow: var(--card-shadow); } .kalem-govde { display: flex; flex-direction: column; gap: 10px; } .kalem-baslik-blok { /* Kapat düğmesi 34px + 12px sağ boşluk + nefes payı. Düğme büyüdüğünde bu değer de büyümek ZORUNDA, yoksa uzun kart adı düğmenin ALTINA girer. */ padding-right: 54px; } .kalem-baslik-blok h3 { font-size: 15px; margin: 0 0 2px; } .kalem-not { font-size: 12px; color: var(--warning, #b07d00); border: 1px solid var(--border-color); border-radius: var(--radius-control); padding: 6px 10px; } .kalem-ozet { font-size: 12.5px; color: var(--text-main); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Uzun liste modal içinde kendi alanında kayar; sayfa gövdesi kaymaz. */ .kalem-tablo-kaydir { max-height: 52vh; overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-control); } .kalem-tablo { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; /* mobilde %100'e sıkışıp kolonları ezmesin, kaydırıcıda aksın */ } .kalem-tablo th, .kalem-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--border-color); text-align: left; white-space: nowrap; color: var(--text-main); } .kalem-tablo th { position: sticky; top: 0; background: var(--bg-card); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); z-index: 1; } .kalem-tablo .num { text-align: right; font-variant-numeric: tabular-nums; } .kalem-tablo .neg { color: var(--danger); } /* KPI kartının altındaki "Tüm listeyi aç" satırı (14.08): kart yalnızca ilk N kalemi gösterir, bu düğme kalanına açılan kapıdır. Satır tıklamalarından ayrışsın diye üstten çizgiyle ayrılır ve vurgu rengindedir. */ .kpi-tumu { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-color); font-size: 11.5px; font-weight: 600; color: var(--primary); } .kpi-tumu:hover { text-decoration: underline; } .kpi-tumu-adet { margin-left: auto; font-weight: 500; color: var(--text-muted); } /* Modaldaki kırılım çubuğu (14.08): panel filtre çubuğundaki çiplerin aynısı. */ .kalem-kirilim-cubugu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kalem-kirilim-etiket { font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; } /* Modal kırılım ağacı: her düzey ara toplamlı, açılır kapanır. */ .kalem-agac { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; } .kalem-grup { border: 1px solid var(--border-color); border-radius: var(--radius-control); } /* Grup başlığı KAPALI durumun tek görünen satırıdır (14.08): açılabilir olduğu okunmalı — zemin, ok işareti ve hover birlikte bunu söyler. Zeminsiz/oksuz hâlde kullanıcı başlığı tablo başlığı sanıp tıklamayı denemiyordu. */ .kalem-grup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; /* --bg-subtle: kartın üstünde YÜKSELMİŞ yüzey token'ı (.log-olay/.summary-row ile aynı). Buraya önce --sidebar-raised-bg yazılmıştı; o token rgba(255,255,255,0.04) ve AÇIK temada beyaz kart üstünde görünmez — başlık düz metin gibi duruyordu. */ background: var(--bg-subtle); border-radius: var(--radius-control); user-select: none; } .kalem-grup > summary::-webkit-details-marker { display: none; } .kalem-grup > summary:hover { background: var(--bg-hover); } .kalem-grup > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* Açık grubun başlığı alttaki tabloya bitişik durur, "bunun içi" okunsun. */ .kalem-grup[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .kalem-grup-ok { flex: none; font-size: 10px; color: var(--text-muted); transition: transform 0.12s ease; } .kalem-grup[open] > summary .kalem-grup-ok { transform: rotate(90deg); } /* Toplu aç/kapat — çiplerin sağ ucunda, satırı yemesin diye margin-left:auto. */ .kalem-agac-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border-color); border-radius: var(--radius-chip); padding: 3px 10px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; } .kalem-agac-toggle:hover { background: var(--bg-hover); color: var(--text-main); } .kalem-grup-ad { flex: 1; min-width: 0; font-weight: 600; color: var(--text-main); overflow-wrap: anywhere; } .kalem-grup-adet { flex: none; font-size: 11px; color: var(--text-muted); } .kalem-grup-deger { flex: none; font-variant-numeric: tabular-nums; color: var(--text-main); } .kalem-grup-deger.neg { color: var(--danger); } /* İç içe grup: soldan girinti + kılavuz çizgisi (panel ağacının dili). */ .kalem-grup .kalem-grup { margin: 4px 6px 4px 14px; border-left: 2px solid var(--border-color); } /* Grubun kendi (alt kırılıma girmeyen) satırlarının başlığı — alt grup satırlarıyla karışmasın diye onlarla aynı girintide ama sönük ve küçük. */ .kalem-artik-etiket { margin: 6px 6px 0 14px; font-size: 11px; color: var(--text-muted); } /* Açılan grubun tablosu KENDİ İÇİNDE kayar: 507 kalemlik bir grup açıldığında sonraki grupların ara toplamı ekrandan kaçmasın (kapalı doğma kararının ikinci yarısı — yoksa tek tıklama eski karmaşayı geri getirirdi). */ .kalem-grup .kalem-tablo-kaydir { margin: 0 6px 6px; max-height: 34vh; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } /* Etiketli (artık satır) tablo başlığa bitişik değildir — kendi çerçevesini geri alır. */ .kalem-artik-etiket + .kalem-tablo-kaydir { margin: 4px 6px 6px 14px; border-top: 1px solid var(--border-color); border-radius: var(--radius-control); } .kalem-alt { display: flex; justify-content: flex-end; } .kalem-alt .filter-run { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } /* ---- Şube satış detayı sayfası (Faz 28) ---- */ .ss-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; } .ss-sube { font-size: 18px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; } .ss-don { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; flex: none; } .ss-cari-tablo { min-width: 520px; } .ss-urun-tablo { min-width: 480px; } .ss-cari-ad { max-width: 260px; overflow: hidden; text-overflow: ellipsis; } /* Pay çubuğu: hücre içinde arka şerit + yüzde yazısı. Genişlik yüzde olarak inline gelir. */ .ss-pay-hucre { position: relative; min-width: 110px; } .ss-pay-bar { position: absolute; left: 4px; top: 6px; bottom: 6px; max-width: calc(100% - 8px); background: var(--chart-1, var(--primary)); opacity: 0.28; border-radius: var(--radius-chip, 3px); } .ss-pay-yazi { position: relative; font-size: 11px; color: var(--text-main); padding-left: 6px; } /* ========================================================================= ====================== RAPOR MERKEZİ — Faz 29 =========================== Süzgeç şeridi + sıralanabilir/filtrelenebilir ızgara. Renk ve köşe SABİT YAZILMAZ, token kullanılır — yoksa her yeni skin bunları tek tek ezmek zorunda kalır (Faz "skin" dersi). ========================================================================= */ .rm-serit { padding: 14px 16px; margin-bottom: 14px; } .rm-serit-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .rm-alan { display: flex; flex-direction: column; gap: 4px; min-width: min(190px, 100%); flex: 1 1 190px; } .rm-alan-not { flex: 0 0 auto; min-width: 0; } .rm-alan-dugme { flex: 0 0 auto; min-width: 0; margin-left: auto; } .rm-etiket { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rm-rozet { font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; background: var(--info-light); color: var(--info); cursor: help; white-space: nowrap; } .rm-rozet-anlik { background: var(--warning-light); color: var(--warning); } .rm-tarih-ikili { display: flex; gap: 6px; } .rm-tarih-ikili input { min-width: 0; } .rm-anahtar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-main); padding: 8px 0; cursor: pointer; white-space: nowrap; } .rm-miras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-color); } .rm-miras-etiket { font-size: 11px; font-weight: 600; color: var(--text-muted); } .rm-miras-cip { cursor: default; } .rm-iskelet { padding: 18px; display: flex; flex-direction: column; gap: 10px; } .rm-sonuc { padding: 16px; } .rm-sonuc-ust { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .rm-sonuc-baslik { font-size: 15px; margin: 0 0 2px; color: var(--text-main); } .rm-arac-kutusu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rm-arac-kutusu form { display: flex; gap: 8px; margin: 0; } .rm-arama { min-width: min(220px, 100%); } .rm-ozet { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rm-tablo-kaydir { max-height: 62vh; overflow: auto; } .rm-tablo { width: 100%; } /* Başlık ve filtre satırı kaydırmada üstte kalır — 250 satırlık sayfada hangi sütuna baktığını kaybetmemek için. */ .rm-tablo thead th { position: sticky; z-index: 2; background: var(--bg-subtle); } .rm-tablo thead tr:first-child th { top: 0; } .rm-tablo thead tr.rm-filtre-satiri th { top: 30px; padding: 3px 6px; } .rm-sirala { cursor: pointer; user-select: none; white-space: nowrap; } .rm-sirala:hover { color: var(--primary); } .rm-sutun-filtre { width: 100%; min-width: 70px; font-size: 11px; padding: 3px 6px; border: 1px solid var(--border-color); border-radius: var(--radius-chip); background: var(--card-bg, transparent); color: var(--text-main); } .rm-sutun-filtre.num { text-align: right; } .rm-sutun-filtre:focus { outline: none; border-color: var(--primary); } .rm-toplam td { position: sticky; bottom: 0; background: var(--bg-subtle); font-weight: 700; border-top: 2px solid var(--border-color); } /* Süzgeçsiz toplam SOLUK: ekrandaki rakamla yarışmasın ama görünsün — süzülmüş ara toplamı bütün sanmak bu projenin en pahalı hatası. */ .rm-toplam-soluk td { font-weight: 500; opacity: 0.62; border-top: none; bottom: 0; } .rm-daha { margin-top: 10px; text-align: center; } /* ---- kolon düzenleyici ---- */ /* Sonuç kartı, panelin konumlandırma çerçevesi olur: mobilde sarmalayıcı `static`e çekilip panel kartın kenarlarına oturuyor (bkz. mobil blok). */ .rm-sonuc { position: relative; } .rm-kolon-sarmal { position: relative; } .rm-kolon-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(320px, 90vw); max-height: 60vh; overflow-y: auto; padding: 10px; background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); } .rm-kolon-baslik { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; } .rm-kolon-sifirla { background: none; border: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: underline; } .rm-kolon-liste { display: flex; flex-direction: column; gap: 2px; } .rm-kolon-satir { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid transparent; border-radius: var(--radius-chip); font-size: 12.5px; color: var(--text-main); cursor: grab; background: var(--bg-subtle); } .rm-kolon-satir label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; flex: 1; } .rm-kolon-satir.suruklenen { opacity: 0.45; } .rm-kolon-satir.uzerinde { border-color: var(--primary); } .rm-kolon-tut { color: var(--text-light); display: flex; } .rm-kolon-not { margin-top: 8px; font-size: 11px; color: var(--text-muted); line-height: 1.45; } /* ---- cari seçici ---- */ .rm-alan-cari { flex: 1 1 260px; } .rm-cari-sarmal { position: relative; } .rm-cari-sonuc { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 300px; overflow-y: auto; background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); } .rm-cari-secenek { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border-color); padding: 7px 10px; cursor: pointer; } .rm-cari-secenek:last-child { border-bottom: none; } .rm-cari-secenek:hover { background: var(--primary-light); } .rm-cari-unvan { display: block; font-size: 12.5px; color: var(--text-main); } .rm-cari-kod { display: block; font-size: 11px; color: var(--text-muted); } .rm-cari-bos { padding: 8px 10px; font-size: 11.5px; color: var(--text-muted); } /* ---- çok eşleşme: aday listesi ---- */ .rm-aday-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .rm-aday { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-align: left; padding: 9px 12px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-control); cursor: pointer; } .rm-aday:hover { border-color: var(--primary); background: var(--primary-light); } .rm-aday-unvan { font-size: 13px; font-weight: 600; color: var(--text-main); flex: 1 1 auto; } .rm-aday-kod { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .rm-aday-bolge { font-size: 11px; color: var(--text-light); } /* ========================================================================= ===================== SATIŞ PİVOT — Faz 34 eki ========================== Kullanıcının etabloda kurduğu pivotun karşılığı: solda açılır-kapanır satır grupları, sağda filtre paneli. Renk/köşe SABİT YAZILMAZ — token kullanılır ki altı skin × iki modun hepsinde kendiliğinden doğru görünsün. Blok MOBİL bloğunun ÖNÜNDE durmalı (mobil blok dosyanın sonunda kalmak zorunda, yukarıdaki nota bak). ========================================================================= */ /* PANEL SOLDA — Nakit Likit ile aynı (kullanıcı isteği 19.08.2026: *"satış raporunda filtreler sağda, nakit likitte solda, kullanıcı kafası karışacak"*). Sütun sırasını çevirmek TEK BAŞINA YETMEZ: ızgara çocukları DOM sırasını izler, bu yüzden view'da

içeriğin ÖNÜNE alındı. Genişlik 290px — .nl-duzen ile birebir. */ .pv-duzen { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; } /* Panel hamburger gibi kapanır (kullanıcı isteği): kapalıyken sütun tamamen kalkar ve tablo tam genişliği alır. Durum localStorage'da yaşar — kullanıcı her açılışta yeniden kapatmak zorunda kalmasın. */ .pv-duzen.pv-kapali { grid-template-columns: minmax(0, 1fr); } .pv-duzen.pv-kapali .pv-panel { display: none; } /* ---- "Sütunlar" açılır menüsü (araç çubuğunda) ---- */ .pv-sutun-sarmal { position: relative; display: inline-block; } .pv-sutun-sayi { font-variant-numeric: tabular-nums; opacity: .75; } .pv-sutun-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 250px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); } .pv-sutun-baslik { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 5px; display: flex; flex-direction: column; gap: 1px; } .pv-sutun-baslik:first-child { margin-top: 0; } .pv-sutun-not { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border-color); font-size: 11px; color: var(--text-light); line-height: 1.5; } .pv-bilgi-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 5px; } .pv-bilgi-cip { cursor: default; } /* Bilgi hücresi ikincil bilgidir: rakamlarla yarışmasın. */ .pv-tablo td.pv-bilgi-hucre { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .pv-mini.pv-aktif { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } /* Pivot ekranının kapatma düğmeleri (filtre paneli + satır detayı modalı) modal kapatma düğmesiyle AYNI görünür — iki ayrı kapatma estetiği kullanıcıya iki ayrı şey gibi okunuyordu. */ .pv-panel-kapat { position: absolute; top: 6px; right: 8px; z-index: 3; border: 1px solid var(--border-card); background: var(--bg-subtle); border-radius: var(--radius-control); color: var(--text-muted); font-size: 18px; line-height: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .pv-panel-kapat:hover, .pv-panel-kapat:focus-visible { background: var(--danger); border-color: var(--danger); color: var(--on-danger); } /* Satır detayı modalının kapat düğmesi başlık şeridinin İÇİNDE akar (absolute değil): üstteki "Excel" düğmesiyle çakışmasın. */ .pv-detay-ust .pv-panel-kapat { position: static; margin-left: 2px; } .pv-sol { min-width: 0; } .pv-arac { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; margin-bottom: 12px; } .pv-arac-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Hızlı şerit: en sık dokunulan üç filtre panelden bağımsız, HER ZAMAN açık. */ .pv-hizli-serit { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border-color); } .pv-hizli { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pv-hizli > span { font-size: 11px; color: var(--text-muted); } .pv-hizli select, .pv-hizli input { font-size: 12.5px; padding: 5px 8px; min-width: 150px; } .pv-hizli.pv-tarih-cift { flex-direction: row; align-items: flex-end; } .pv-hizli.pv-tarih-cift input { min-width: 130px; } .pv-hizli-arama { flex: 1 1 220px; } .pv-hizli-arama input { min-width: 200px; width: 100%; } .pv-ipucu-satir { font-size: 10.5px; color: var(--text-light); } /* Arama etkinken eşleşenlerin toplamı GENEL toplamın üstünde ayrı satırda durur — ikisi birlikte yazılmazsa süzülmüş ara toplam "bütün" sanılır. */ .pv-tablo tfoot tr.pv-arama-toplam td { font-weight: 600; color: var(--primary); border-top: 1px dashed var(--border-color); } .pv-bos { padding: 18px 12px; color: var(--text-muted); text-align: center; } /* ---- satır detayı (drill-through) ---- */ .pv-tablo td.pv-detay-hucre { width: 1%; padding: 0 6px; text-align: center; } .pv-detay-ac { border: none; background: transparent; color: var(--text-light); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; opacity: 0; /* hover'da belirir; sürekli görünse tabloyu kirletir */ transition: opacity .12s; } .pv-tablo tbody tr:hover .pv-detay-ac { opacity: 1; } .pv-detay-ac:hover { color: var(--primary); } .pv-detay-ac:focus-visible { opacity: 1; outline: 2px solid var(--primary); } .pv-detay-kutu { width: min(1200px, 96vw); max-height: 88vh; display: flex; flex-direction: column; padding: 0; } .pv-detay-ust { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-color); } .pv-detay-baslik-sarmal { flex: 1 1 auto; min-width: 0; } .pv-detay-baslik { font-size: 14px; font-weight: 700; color: var(--text-main); word-break: break-word; } .pv-detay-alt { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .pv-detay-govde { overflow: auto; padding: 0 4px 10px; } .pv-detay-tablo { width: 100%; border-collapse: collapse; font-size: 12px; } .pv-detay-tablo thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); padding: 7px 8px; border-bottom: 1px solid var(--border-color); white-space: nowrap; } .pv-detay-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-main); white-space: nowrap; } .pv-detay-tablo td.sag, .pv-detay-tablo th.sag { text-align: right; font-variant-numeric: tabular-nums; } .pv-mini { padding: 5px 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } .pv-kapsam { font-size: 12.5px; font-weight: 600; color: var(--text-main); flex: 1 1 auto; min-width: 0; } .pv-sayac { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ---- aktif filtre çipleri ---- */ .pv-aktif-filtreler { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .pv-filtre-baslik { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); } .pv-filtre-cip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 9px; font-size: 12px; color: var(--text-main); background: var(--primary-light); border: 1px solid var(--primary); border-radius: var(--radius-pill); max-width: 320px; } .pv-filtre-cip b { font-weight: 600; color: var(--text-muted); } .pv-filtre-sil { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; } .pv-filtre-sil:hover { color: var(--danger); } .pv-filtre-temizle { border: none; background: transparent; color: var(--text-muted); font-size: 11.5px; text-decoration: underline; cursor: pointer; padding: 2px 4px; } .pv-filtre-temizle:hover { color: var(--danger); } .pv-filtre-yok { font-size: 12px; color: var(--text-light); } /* Süzgeç kurulamayan sütunun açıklaması (tavanı aşan değer sayısı ya da boş kolon). Boş yer bırakmak "filtre yok" değil "filtre bozuk" gibi okunurdu. */ .pv-suzgec-not { font-size: 12px; line-height: 1.35; color: var(--text-muted); background: var(--bg-subtle); border: 1px dashed var(--border-color); border-radius: var(--radius-control); padding: 6px 8px; } .pv-durum { padding: 12px 14px; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-card); } .pv-durum.pv-hata { color: var(--danger); border-color: var(--danger); } .pv-tablo-kap { max-height: calc(100vh - 250px); overflow: auto; } .pv-tablo { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13px; } /* Sayı kolonları İÇERİĞE göre daralır, ad kolonu kalanı alır (width:1% klasik tablo hilesi). Ölçüldü: bu olmadan 1015px'lik pencerede rakam kolonları görünen alanın dışında kalıyor ve kullanıcı yatay kaydırmadan tutar göremiyordu. */ .pv-tablo th.sag, .pv-tablo td.sag { width: 1%; } .pv-tablo thead th:first-child { width: 99%; } .pv-tablo thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-card); text-align: left; font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-color); white-space: nowrap; } .pv-tablo td { padding: 6px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-main); } /* Sayı hücresi KIRILMAZ (jenerik PDF dersi: tutar ortasından bölünüyordu), başlık kırılabilir kalır. */ .pv-tablo td.sag, .pv-tablo tfoot td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pv-tablo tr.pv-grup > td { font-weight: 600; background: var(--bg-subtle); } .pv-tablo tr.pv-grup[data-yol]:not([data-yol*="."]) > td { background: var(--primary-light); } .pv-tablo tr.pv-yaprak > td { color: var(--text-muted); } .pv-tablo tbody tr:hover > td { background: var(--sidebar-hover-bg); } .pv-tablo tfoot td { position: sticky; bottom: 0; background: var(--bg-card); border-top: 2px solid var(--border-color); font-weight: 700; } .pv-tablo tfoot td:first-child { text-align: left; } .pv-ac { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 6px 0 0; font-size: 12px; line-height: 1; } .pv-ac:hover { color: var(--primary); } .pv-bosluk { display: inline-block; width: 14px; } .pv-adet { font-size: 11px; color: var(--text-light); } .pv-notlar { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .pv-not { font-size: 12px; color: var(--text-muted); background: var(--bg-subtle); border-left: 3px solid var(--primary); border-radius: var(--radius-chip); padding: 7px 10px; } /* ---- filtre paneli ---- */ .pv-panel { padding: 12px 14px; position: sticky; top: 12px; max-height: calc(100vh - 100px); overflow-y: auto; } /* Kapatma düğmesi sağ üste oturur; ilk bölüm başlığı onun altına girmesin. */ .pv-panel > .pv-bolum-baslik:first-of-type { padding-right: 26px; } .pv-bolum-baslik { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-color); } .pv-bolum-baslik:first-child { margin-top: 0; } .pv-alan { min-width: 0; } /* ---- kırılım boyutu çipleri (sürüklenerek sıralanır) ---- */ .pv-boyut-liste { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; } .pv-boyut-cip { display: flex; align-items: center; gap: 5px; padding: 5px 7px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-chip); cursor: grab; font-size: 12px; } .pv-boyut-cip:active { cursor: grabbing; } .pv-boyut-cip.pv-suruklenen { opacity: .45; } .pv-boyut-cip.pv-hedef { border-color: var(--primary); background: var(--primary-light); } .pv-boyut-sira { flex: none; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; } .pv-boyut-ad { flex: 1 1 auto; min-width: 0; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-boyut-dugme { flex: none; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0 3px; font-size: 13px; line-height: 1; } .pv-boyut-dugme:hover:not(:disabled) { color: var(--primary); } .pv-boyut-dugme:disabled { opacity: .25; cursor: default; } .pv-boyut-sil:hover:not(:disabled) { color: var(--danger); } .pv-etiket { display: block; font-size: 11.5px; color: var(--text-muted); margin: 8px 0 3px; } .pv-onay { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-main); margin: 4px 0; cursor: pointer; } .pv-panel .form-select, .pv-panel .form-control-custom { width: 100%; font-size: 12.5px; } .pv-tarih-cift { display: flex; gap: 6px; margin-top: 4px; } .pv-tarih-cift input { flex: 1 1 0; min-width: 0; } .pv-uygula { width: 100%; margin-top: 14px; justify-content: center; } .pv-ipucu { font-size: 11px; color: var(--text-light); margin-top: 8px; line-height: 1.5; } /* Panelin Satış Analizi sekmesindeki giriş düğmesi. */ .pv-giris { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pv-giris .btn-primary-custom { text-decoration: none; } /* SATIŞ RAPORU GİRİŞİ — Satış Analizi sekmesinin en üstündeki tam genişlikte şerit. Küçük bir düğme değil BİLİNÇLİ olarak: kullanıcının bu sekmedeki asıl işi bu ekran, kartlar onun özeti (19.08.2026 isteği "daha belirgin koyalım"). Tokenlerle kurulu, yani altı skinde de kendiliğinden doğru görünür. */ .satis-rapor-girisi { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; background: var(--bg-card); border: 1px solid var(--border-card); border-left: 4px solid var(--primary); border-radius: var(--radius-card); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; } .satis-rapor-girisi:hover { box-shadow: var(--card-shadow-hover); border-color: var(--primary); border-left-color: var(--primary); color: inherit; text-decoration: none; } .satis-rapor-girisi .srg-ikon { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-control); background: var(--primary-light); color: var(--primary); font-size: 19px; } .satis-rapor-girisi .srg-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .satis-rapor-girisi .srg-baslik { font-size: 16px; font-weight: 650; color: var(--text-main); } .satis-rapor-girisi .srg-alt { font-size: 12.5px; color: var(--text-muted); } .satis-rapor-girisi .srg-ok { margin-left: auto; flex: 0 0 auto; color: var(--primary); font-size: 18px; } /* Dar ekranda ok satırı yer yemesin, alt yazı iki satıra insin. */ @media (max-width: 576px) { .satis-rapor-girisi { padding: 12px 14px; gap: 10px; } .satis-rapor-girisi .srg-ok { display: none; } } /* Eşik 1200px, 992 DEĞİL (ölçüldü): 1015px'lik pencerede yan yana düzen sol sütuna yalnız 378px bırakıyor ve rakamlar görünmüyordu. Panel üste akınca tablo tam genişliği alır. Faz 25 kuralı: 375px'te yatay taşma yok. */ @media (max-width: 1200px) { .pv-duzen { grid-template-columns: minmax(0, 1fr); } .pv-tablo-kap { max-height: none; } /* Panel üste akınca TEK SÜTUN KALMAZ: 14 filtre alanı alt alta dizilince tablo ekranın çok altına iniyordu (ölçüldü — ilk görünümde tablo hiç görünmüyordu). Izgara alanları yan yana serer, panel birkaç satıra sığar. */ .pv-panel { /* relative (static DEĞİL): kapatma düğmesi absolute ve panele göre konumlanmak zorunda — static olsaydı sayfaya göre kayardı. */ position: relative; /* Panel KENDİ İÇİNDE kayar: ızgara sıkıştırmasından sonra bile 14 filtre alanı ekranın yarısını yiyor ve tablo ilk görünümde kalmıyordu. */ max-height: 42vh; overflow-y: auto; /* `order: -1` GEREKMİYOR: panel artık DOM'da da içerikten önce (soldaki sütuna taşınırken alındı), dar ekranda kendiliğinden üste akıyor. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 2px 14px; align-items: start; } .pv-panel > .pv-bolum-baslik, .pv-panel > .pv-uygula, .pv-panel > .pv-ipucu { grid-column: 1 / -1; } .pv-deger-kutusu { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; } .pv-uygula { width: auto; justify-self: start; padding-inline: 22px; } } /* ========================================================================= ================= NAKİT LİKİT RAPORU — Faz 35 =========================== PowerBI "Finansal Durum" sayfasının portu: SOLDA filtre paneli (PowerBI'da da solda), üstte altı KPI kartı, tıklanan kartın kalemleri hemen ALTINDA. Satış Raporu'nun paneli 19.08.2026'ya kadar SAĞDAYDI; kullanıcı iki ekranı yan yana görünce *"kullanıcı kafası karışacak"* deyip o da sola alındı — ikisi artık aynı yapıda (290px sütun, aside DOM'da içerikten önce). Yerleşim eşiği 1200px — Satış Raporu'nda ÖLÇÜLDÜ: 1015px'lik pencerede yan yana düzen sol sütuna 378px bırakıyor ve rakam kolonları görünmüyordu. Altında panel tablonun üstüne akar ve kendi içinde kayar. Sabit renk/köşe YOK — hepsi token (yeni bir skin eklendiğinde bu ekran kendiliğinden doğru çalışsın). TOKEN ADINI UYDURMA — ÖLÇÜLDÜ (19.08.2026): `--primary-color` ve `--card-bg` diye iki ad yazılmıştı, ikisi de YOK (doğrusu `--primary` ve `--bg-card`). CSS geçersiz bir `var()`i HATA VERMEDEN düşürüyor ve özellik başlangıç değerine iniyor: zeminler ŞEFFAF kaldı. Belirtiler dağınık ve sebebi gizliydi — seçili tarih-tipi düğmesi beyaz yazıyla okunmaz oldu, sütun menüsü ve YAPIŞKAN TABLO BAŞLIĞI saydam kalınca altındaki satırlar başlıkların üstüne binmiş gibi göründü. Primary zemininin üstündeki metin de `#fff` değil `--on-primary`dir. `--sidebar-hover-bg` bir İÇERİK yüzeyinde kullanılmaz (koyu kenar çubuğu için tanımlı, açık temada neredeyse saydam): yüzey `--bg-subtle`, hover `--bg-hover`. Blok MOBİL bloğunun ÖNÜNDE durmak zorunda. ========================================================================= */ .nl-duzen { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; } .nl-duzen.nl-panel-kapali { grid-template-columns: minmax(0, 1fr); } .nl-duzen.nl-panel-kapali .nl-panel { display: none; } .nl-panel { padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow-y: auto; } .nl-panel-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .nl-panel-baslik { font-weight: 600; font-size: .95rem; } .nl-bolum { margin-bottom: 14px; } .nl-bolum-baslik { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; border-bottom: 1px solid var(--border-color); padding-bottom: 3px; } .nl-etiket { display: block; font-size: .78rem; color: var(--text-muted); margin: 6px 0 2px; } .nl-radyo { display: block; font-size: .86rem; margin: 2px 0; cursor: pointer; } .nl-tarih-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .nl-panel-dip { display: flex; gap: 8px; align-items: center; } .nl-mini { padding: 4px 10px; font-size: .82rem; border-radius: var(--radius-chip); } /* HIZLI ŞERİT: tarih tipi + aralık panelde DEĞİL burada (kullanıcı isteği) — panel kapalıyken de erişilebilir olmalı. Aynı alan iki yerde çizilmez. */ .nl-arac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .nl-sablon-kutu { width: auto; min-width: 150px; } .nl-arac .nl-tarih-cift { display: flex; gap: 6px; margin: 0; } .nl-arac .nl-tarih-cift input { width: 145px; } /* Tarih tipi: üç radyo yerine tek parçalı segment — şeritte az yer kaplasın. */ .nl-segment { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-pill); overflow: hidden; } .nl-segment label { margin: 0; cursor: pointer; } .nl-segment input { position: absolute; opacity: 0; width: 0; height: 0; } .nl-segment span { display: block; padding: 4px 12px; font-size: .82rem; white-space: nowrap; color: var(--text-muted); transition: background .12s, color .12s; } .nl-segment label + label span { border-left: 1px solid var(--border-color); } .nl-segment input:checked + span { background: var(--primary); color: var(--on-primary); font-weight: 600; } .nl-segment input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; } /* Seçili sayısı etiketin yanında — panel açıldığında seçimin GÖRÜNMESİ için (kullanıcı isteği): çoklu kutuda seçili öğe listenin altında kalıp "hiçbiri seçili değil" izlenimi veriyordu. Rozet + seçiliye kaydırma birlikte çalışır. */ .nl-etiket-secili { color: var(--text-main); font-weight: 600; } .nl-sayi { display: inline-block; margin-left: 6px; padding: 0 6px; background: var(--primary); color: var(--on-primary); border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; } .nl-kapsam { font-size: .86rem; color: var(--text-muted); } .nl-durum { font-size: .82rem; color: var(--text-muted); margin-left: auto; } .nl-durum.nl-hata { color: var(--danger); font-weight: 600; } .nl-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .nl-cip { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 2px 10px; font-size: .78rem; } .nl-cip-bos { color: var(--text-muted); font-style: italic; } /* ALTI KART FULL HD'DE TEK SIRADA (kullanıcı isteği 19.08.2026: "kartlar büyük olmuş"). ÖLÇÜLDÜ: 1920px pencerede kart alanı 1283px; eski 230px'lik minimum 5 sütun veriyor ve altıncı kart alta düşüyordu. 6 sütun → (1283 − 5×10) / 6 ≈ 205px, rahat sığıyor. Kart yüksekliği de 156px'ten ~100px'e indi: açıklama metni karttan çıkıp "i" ikonunun ipucuna taşındı. Eşikler ÖLÇÜMLE kondu, tahminle değil — kart alanı = pencere − 637px (panel açık), panel kapalıyken +306px. 6 kartın makul kalabilmesi için kart başına ≥170px gerekli: · panel AÇIK → pencere ≥ 1700 · panel KAPALI → pencere ≥ 1400 Aradaki genişliklerde 3'lü iki sıra (5+1 gibi çirkin bir kırılma olmasın). */ .nl-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; margin-bottom: 12px; } @media (min-width: 1200px) { .nl-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1700px) { .nl-kartlar { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1400px) { .nl-duzen.nl-panel-kapali .nl-kartlar { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .nl-kart { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; } .nl-kart:hover { border-color: var(--primary); transform: translateY(-1px); } /* İskelet kart: gerçek kartla AYNI kutu ölçüsünde olmalı, yoksa veri gelince yerleşim sıçrar ve "sayfa zıpladı" hissi verir. Tıklanamaz (button değil, div). */ .nl-kart-iskelet { cursor: default; gap: 6px; } .nl-kart-iskelet:hover { border-color: var(--border-color); transform: none; } .nl-kart-iskelet .skel-line { height: 10px; } .nl-kart-iskelet .skel-value { height: 20px; width: 85%; } .nl-kart.secili { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; } .nl-kart-ust { display: flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); } .nl-kart-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nl-kart-deger { font-size: 1.2rem; font-weight: 700; line-height: 1.25; } .nl-kart-adet { font-size: .72rem; color: var(--text-muted); } /* "i" ipucu: açıklama kartta metin olarak yer kaplamasın ama kaybolmasın da. `title` KULLANILMADI — CSS ipucuyla ikisi birden çift ipucu çıkarırdı. */ .nl-bilgi { margin-left: auto; flex: none; position: relative; width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; font-style: italic; text-transform: none; background: var(--bg-subtle); border: 1px solid var(--border-color); color: var(--text-muted); } .nl-bilgi::after { content: attr(data-bilgi); position: absolute; bottom: calc(100% + 7px); right: -4px; z-index: 30; width: 230px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-control); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); color: var(--text-main); font-size: .74rem; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; } .nl-bilgi:hover::after, .nl-kart:focus-visible .nl-bilgi::after { opacity: 1; visibility: visible; } .nl-detay { padding: 14px; } .nl-detay-ust { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .nl-detay-baslik { font-weight: 700; font-size: 1rem; } .nl-detay-alt { font-size: .8rem; color: var(--text-muted); } .nl-detay-ust > a { margin-left: auto; } /* Detay gövdesi HEM dikey HEM yatay kayar. YATAY ÇUBUK GÖRÜNÜR OLMAK ZORUNDA: kullanıcı "yana doğru alanlar var ama kaydırma barı yok" dedi — Chrome'un kaplama (overlay) çubuğu kaydırılana kadar saklanıyor ve tablonun devamı olduğu anlaşılmıyordu. Çubuklar açıkça boyanıyor ve yer kaplıyor (`scrollbar-gutter`), yani hep görünür. */ .nl-detay-govde { max-height: 60vh; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; } .nl-detay-govde::-webkit-scrollbar { width: 12px; height: 12px; } .nl-detay-govde::-webkit-scrollbar-track { background: var(--bg-subtle); border-radius: 6px; } .nl-detay-govde::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 6px; border: 3px solid var(--bg-card); } .nl-detay-govde::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Font BİR TIK KÜÇÜK ve hücre dolgusu dar (kullanıcı isteği): amaç ekrana daha çok sütun sığdırmak. Ölçüldü: .84rem + 8px dolguda 15 kolonun 11i sığıyordu. NOT: kayıtlı kolon genişlikleri ESKİ fontla ölçülmüş olabilir — kullanıcı Sütunlar menüsündeki "Varsayılana dön" ile yeniden ölçtürebilir. */ .nl-tablo { font-size: .78rem; margin-bottom: 0; } .nl-tablo > :not(caption) > * > * { padding: .3rem .45rem; } /* ZEBRA: satırlar karışmasın (kullanıcı isteği). Bootstrap .table hücre zeminini kendi değişkeniyle boyadığı için renk TD üzerine yazılır; tr üzerine yazmak görünmezdi. Üstüne satır vurgusu (hover) gelir. */ .nl-tablo tbody tr:nth-child(even) > td { background-color: var(--bg-subtle); } .nl-tablo tbody tr:hover > td { background-color: var(--bg-hover); } /* Genişlik ayarı ancak sabit yerleşimde öngörülebilir. İlk çizim AUTO yapılır (doğal genişlikler ölçülsün diye), ölçüm bitince bu sınıf eklenir. */ /* SABİT YERLEŞİMDE TABLO GENİŞLİĞİ KOLON TOPLAMINDAN VERİLİR (JS yazar). `width: max-content` ile denendi ve ÇALIŞMADI: max-content İÇERİKTEN hesaplanıyor, çıkan fazlalık sabit yerleşimde sütunlara geri dağıtılıyordu — kolonu daraltıyordun, genişlik anında geri açılıyordu (ölçüldü: col 261px, çizilen 411px). */ .nl-tablo-sabit { table-layout: fixed; min-width: 100%; } .nl-tablo th { position: sticky; top: 0; background: var(--bg-card); z-index: 2; white-space: nowrap; user-select: none; cursor: grab; padding-right: 14px; } .nl-tablo th .nl-th-ad { display: block; overflow: hidden; text-overflow: ellipsis; } .nl-tablo td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nl-tablo td.sag { text-align: right; } /* Genişletme tutamağı — başlığın sağ kenarı. Sürükle-bırak ile çakışmasın diye kendi imleci ve kendi mousedown'ı var. */ .nl-th-tut { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 3; } .nl-th-tut::before { content: ''; position: absolute; top: 20%; right: 3px; height: 60%; border-right: 1px solid var(--border-color); } .nl-th-surukleniyor { opacity: .45; } .nl-th-hedef { box-shadow: inset 3px 0 0 var(--primary); } body.nl-genisletiliyor { cursor: col-resize; user-select: none; } /* Sütun menüsü — Satış Raporu'ndaki `pv-sutun-menu` kalıbı. */ .nl-sutun-sarmal { position: relative; margin-left: auto; } .nl-sutun-sayi { opacity: .7; font-size: .78rem; } .nl-sutun-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 270px; max-height: 60vh; overflow: auto; padding: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); } .nl-sutun-baslik { font-size: .72rem; color: var(--text-muted); line-height: 1.35; padding: 0 4px 6px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px; } .nl-sutun-satir { display: flex; align-items: center; gap: 8px; padding: 2px 4px; } .nl-sutun-satir:hover { background: var(--bg-hover); border-radius: var(--radius-chip); } .nl-sutun-satir .nl-onay { flex: 1; margin: 0; font-size: .84rem; cursor: pointer; } .nl-sutun-oklar { display: flex; gap: 2px; } .nl-sutun-oklar button { width: 22px; height: 22px; line-height: 1; padding: 0; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-chip); color: var(--text-muted); cursor: pointer; } .nl-sutun-oklar button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .nl-sutun-oklar button:disabled { opacity: .3; cursor: default; } .nl-sutun-dip { border-top: 1px solid var(--border-color); margin-top: 6px; padding-top: 6px; } .nl-sutun-dip button { background: transparent; border: 0; padding: 2px 4px; color: var(--primary); font-size: .8rem; cursor: pointer; } .nl-bos { padding: 26px; text-align: center; color: var(--text-muted); font-size: .9rem; border: 1px dashed var(--border-color); border-radius: var(--radius-card); } @media (max-width: 1200px) { .nl-duzen { grid-template-columns: minmax(0, 1fr); } .nl-panel { position: static; max-height: 42vh; } /* Panel üste akınca 14 filtre alt alta dizilir ve tablo ilk görünümden çıkardı. */ .nl-panel .nl-bolum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 4px 12px; } .nl-panel .nl-bolum-baslik { grid-column: 1 / -1; } } /* ========================================================================= ============================ MOBİL — Faz 25 ============================= ≤768px'te BÜTÜN skinler tek yerleşime iner: sidebar soldan açılan bir ÇEKMECE olur (hamburger `_Layout`'ta, durum body.nav-acik'te), içerik tam genişlik. Skin'lerin YÜZEYİ (renk, font, köşe token'ları) aynen işler; yalnızca YERLEŞİM birleştirilir — telefonun tek sütununda Şerit'in yatay şeridi de Ray'ın 56px rayı da kullanılamıyor. BU BLOK DOSYANIN SONUNDA DURMAK ZORUNDA ve `body[class][class]` öneki BİLİNÇLİ: skin yerleşim kuralları (`body.skin-serit .app-sidebar` (0,2,1), `body.skin-ray .app-sidebar:hover` (0,3,1)) ancak eşit özgüllük + sonra gelme ile ezilebiliyor. [class][class] önek (0,3,1) verir; blok en sonda olduğu için beraberlikleri de kazanır. Öneki kısaltma, bloğu yukarı taşıma. Yeni skin eklerken: yerleşimi değiştiriyorsa bu bloğun onu da çekmeceye indirdiğini 375px'te DOĞRULA — kural buradaki genel seçicilerle kendiliğinden işlemeli, skin başına mobil kuralı yazılmamalı. ========================================================================= */ /* Hamburger ve karartma masaüstünde YOK — medya bloğu dışında güvenceye alınır (skin farkı yok, o yüzden önek gerekmez). */ .mobile-nav-toggle { display: none; } .mobile-backdrop { display: none; } @media (max-width: 768px) { /* ---- çekmece ---- */ body[class][class] .app-container { flex-direction: column; } body[class][class] .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); height: 100vh; height: 100dvh; /* adres çubuğu açılıp kapanınca zıplamasın */ flex-direction: column; align-items: stretch; gap: 0; padding: 20px 16px; border-right: 1px solid var(--sidebar-border); border-bottom: none; overflow-y: auto; z-index: 1000; transform: translateX(-105%); transition: transform 0.2s ease; } body[class].nav-acik .app-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); } /* Ray'ın hover genişlemesi mobilde anlamsız (dokunmatikte hover tıklamayla tetiklenip genişliği oynatıyordu) — çekmece genişliği sabit kalır. */ body[class][class] .app-sidebar:hover { width: min(300px, 84vw); } body[class][class] .app-main { margin-left: 0; } body.nav-acik { overflow: hidden; /* çekmece açıkken arka sayfa kaymasın */ } body.nav-acik .mobile-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; } /* ---- çekmece İÇİ: skin'lerin gizlediği/döndürdüğü parçalar geri gelir ---- */ /* Şerit yatayda gizliyordu / sıraya diziyordu: */ body[class][class] .sidebar-menu { flex-direction: column; align-items: stretch; gap: 2px; overflow: visible; flex-grow: 1; } body[class][class] .menu-item { padding: 10px 12px; /* dokunma hedefi: 13.5px yazı + 10px dolgu ≈ 40px */ justify-content: flex-start; } body[class][class] .menu-section-label { display: block; } body[class][class] .user-info { display: flex; } body[class][class] .sidebar-user { order: 0; padding: 8px; margin-bottom: 20px; justify-content: flex-start; } body[class][class] .sidebar-brand { margin-bottom: 24px; justify-content: flex-start; flex-shrink: 0; } /* Şerit markayı yan yana dizmişti; çekmecede logo üstte, ad altında. */ body[class][class] .brand-stack { flex-direction: column; align-items: center; gap: 4px; width: 100%; } body[class][class] .brand-stack .brand-logo { width: 100%; } body[class][class] .brand-stack .brand-text-alt { width: 100%; border-top: 1px solid var(--sidebar-border); padding-top: 6px; } body[class][class] .brand-logo img { object-position: left center; } body[class][class] .sidebar-firma { margin: -12px 0 18px; max-width: none; padding: 8px 10px; } /* Ray gizliyordu (etiketler yalnız hover'da açılıyordu): */ body[class][class] .brand-text, body[class][class] .menu-item > span, body[class][class] .logout-btn span, body[class][class] .sidebar-firma-adi { display: inline; } body[class][class] .sidebar-firma-form { display: flex; } body[class][class] .menu-sayac { position: static; margin-left: auto; min-width: 20px; padding: 1px 7px; font-size: 10.5px; line-height: 1.6; } /* ---- çekmece altbilgisi ---- */ body[class][class] .sidebar-footer { order: 0; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sidebar-border); } body[class][class] .sidebar-footer-row { flex-direction: row; } /* Şerit width:auto !important yazıyor (Bootstrap w-100'e karşı); mobilde geri tam genişlik. ID'li seçici şeridinkinden (#logoutForm (1,1,1)) yüksek: (1,2,1). */ body[class][class] #logoutForm, body[class][class] .logout-btn { width: 100% !important; } body[class][class] .logout-btn { padding: 8px; justify-content: center; } /* Tasarım menüsü çekmecede daima YUKARI açılır (altbilgi en altta) — Şerit top'a, Ray 240px'e sabitliyordu. */ body[class][class] .skin-menu { bottom: calc(100% + 8px); top: auto; left: 0; right: 0; width: auto; } /* ---- üst bar ---- */ .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; font-size: 20px; color: var(--text-main); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-control); cursor: pointer; } body[class][class] .app-header { padding: 12px 16px; gap: 10px; } .header-left { flex: 1; min-width: 0; /* uzun başlık hamburger'i itmesin, kendi içinde sarsın */ } .header-date { display: none; /* dekoratif; dar ekranda başlığa yer açar */ } .header-title { font-size: 16px; } .header-subtitle { display: none; } body[class][class] .app-body { padding: 14px 12px 24px; } /* ---- filtre çubuğu: KATLANIR, VARSAYILAN KAPALI (21.08.2026) ---- Kullanıcı: "üstteki filtreler ekranın yarısını kaplıyor ve kpi kartları görseller altta kalıyor". Katlanınca NE SEÇİLİ OLDUĞU görünmek zorunda — Satış Raporu dersi: "aktif seçili filtreleri göremiyorum, hiçbiri seçili değil gibi geliyor". Özet metni sunucuda kurulur, düğmenin içinde durur. */ .filtre-katla { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 2px 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 40px; } .filtre-katla-ad { font-weight: 600; white-space: nowrap; } .filtre-katla-ozet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .82rem; } .filtre-katla-ok { transition: transform .15s; flex: 0 0 auto; } /* KAPALI DOĞAR: durum FORMUN sınıfında ve varsayılan kapalı olduğu için JS gecikse ya da hiç çalışmasa bile çubuk ekranın yarısını yemez (Faz 24.6 panel dersi: görünürlük JS'e bağlı bırakılmaz). */ .filter-bar .filter-govde { display: none; } .filter-bar.filtre-acik .filter-govde { display: flex; flex-direction: column; gap: 14px; width: 100%; padding-top: 12px; } .filter-bar.filtre-acik .filtre-katla-ok { transform: rotate(180deg); } /* ---- filtre çubuğu: alanlar alt alta, tam genişlik ---- */ .filter-bar { align-items: stretch; flex-direction: column; gap: 0; } .filter-field { width: 100%; } .filter-input { max-width: none; width: 100%; } .filter-date-pair .filter-input { min-width: 0; flex: 1; } .filter-actions { width: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; } /* ---- dokunmatik giriş alanları ---- iOS Safari 16px altındaki input'a odaklanınca sayfayı ZOOM'lar; kontroller mobilde 16px'e çekilir (yalnızca burada — masaüstü boyutları değişmez). */ .filter-input, .form-control-custom, .form-select-custom, .form-control, .form-select { font-size: 16px; } /* ---- grafik kartı: dar ekranda biraz kısalır, lejant sığar ---- */ .chart-body { height: 230px; } /* Sabit düzenli tur tablosu (log listesi): table-layout:fixed %100'e sıkışıp kolonları ezerdi — sarmalayıcı içinde gerçek genişliğini korur, yatay kayar. Seçici bilinçli olarak .table-responsive'a kapsanır: Kuyruk'taki 2 kolonlu log-tur-tablo sarmalayıcısızdır ve 375px'e zaten sığar. */ .table-responsive .log-tur-tablo { min-width: 660px; } /* ---- sohbet: dar ekranda baloncuklar neredeyse tam genişlik ---- %70 tavanı geniş ekran satır uzunluğu içindi; 375px'te 246px'lik baloncuk veri satırını ("• 1.500.000 TL — Urantaş · Çek ...") gereksiz katlıyor. */ .chat-bubble { max-width: 94%; } .chat-bubble.agent { max-width: 100%; } /* ---- rapor merkezi (Faz 29) ---- Şerit tek sütuna iner; "Çalıştır" sağa yaslı kalmasın diye tam genişlik. Izgara sarmalayıcı içinde min-width ile yatay kayar (kalıcı kural: sabit düzenli tablo %100'e sıkışırsa kolonları ezer). */ .rm-alan { flex: 1 1 100%; min-width: 0; } .rm-alan-dugme { flex: 1 1 100%; margin-left: 0; } .rm-alan-dugme .filter-run { width: 100%; justify-content: center; } .rm-arac-kutusu, .rm-arac-kutusu form { width: 100%; } .rm-arac-kutusu .btn-outline-custom { flex: 1 1 0; justify-content: center; } .table-responsive .rm-tablo { min-width: 620px; } .rm-tablo-kaydir { max-height: 70vh; } /* Kolon paneli masaüstünde düğmeye göre SAĞA yaslıdır; dar ekranda düğme sola kaydığı için panelin sol kenarı ekran dışında kalıyordu. Mobilde sabit konumlandırılır ve kart genişliğine oturur. */ .rm-kolon-sarmal { position: static; } .rm-kolon-panel { left: 12px; right: 12px; width: auto; max-height: 55vh; } } /* CANLIYA ALMA UYARISI (19.08.2026 güvenlik denetimi) — yalnız Admin görür ve sorun düzelince kendiliğinden kaybolur. Kapatma düğmesi bilinçli YOK: kapatılan uyarı, unutulan uyarıdır. Tokenlerle kurulu, altı skinde de doğru görünür. */ .guvenlik-uyarisi { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 18px; border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius-card); background: var(--danger-light); color: var(--text-main); font-size: 13px; } .guvenlik-uyarisi > i { color: var(--danger); font-size: 18px; line-height: 1.2; } .guvenlik-uyarisi b { display: block; margin-bottom: 4px; color: var(--danger); } .guvenlik-uyarisi ul { margin: 0; padding-left: 18px; } .guvenlik-uyarisi li + li { margin-top: 3px; } /* CANLI VERİTABANI BANDI (20.08.2026) Geliştirme makinesi canlı veritabanına bağlıyken ekrandaki her rakam GERÇEK veridir. Güvenlik uyarısıyla AYNI KALIP ama farklı renk: o "bir açık var" der, bu "nereye baktığını bil" der — ikisini aynı renge boyamak ikisini de görünmez yapardı. Token adı uydurulmaz (bkz. Nakit Likit dersi): --warning / --warning-light site.css'te tanımlı; olmayan bir ada düşen var() sessizce şeffaf bırakırdı. */ .canli-bant { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; margin-bottom: 18px; border: 1px solid var(--warning); border-left-width: 4px; border-radius: var(--radius-card); background: var(--warning-light); color: var(--text-main); font-size: 13px; } .canli-bant > i { color: var(--warning); font-size: 18px; line-height: 1.2; } .canli-bant b { color: var(--warning); letter-spacing: .3px; } .canli-bant span { display: block; margin-top: 2px; color: var(--text-muted); }