/* * KalDataV2 arayüz stili. * * Bootstrap 5.3 üzerine kuruludur. Açık ve koyu tema aynı değişkenlerle tanımlanır; * tema ile seçilir (public/js/theme.js). * Satır içi stil kullanılmaz; içerik güvenlik politikası buna izin vermez. */ /* ---- Tema değişkenleri ---- */ /* * Görsel dil (B.41): ölçüm defteri ve kalibrasyon etiketi. Zemin kâğıt tonundadır, * yüzeyler ince çizgiyle ayrılır; gölge ve yuvarlaklık azdır. Kod, tarih ve sayılar * eşit genişlikli yazı tipiyle yazılır. Renk yalnızca durum bildirir. */ :root { --kt-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --kt-font-heading: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --kt-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --kt-accent: #0a5cad; --kt-accent-strong: #07437f; --kt-accent-soft: rgba(10, 92, 173, 0.08); --kt-accent-softer: rgba(10, 92, 173, 0.14); --kt-accent-contrast: #ffffff; --kt-focus-ring: rgba(10, 92, 173, 0.28); --kt-background: #f1f0eb; --kt-grid-line: rgba(28, 35, 48, 0.035); --kt-surface: #fcfcfa; --kt-surface-muted: #f3f2ed; --kt-text: #1d2530; --kt-heading: #0d141e; --kt-text-muted: #5b6471; --kt-border: #dcd9d0; --kt-border-strong: #bdb9ad; --kt-rule: #0d141e; --kt-header-bg: #fcfcfa; --kt-sidebar-bg: #111923; --kt-sidebar-text: #cbd4de; --kt-sidebar-muted: #7a8796; --kt-sidebar-line: rgba(255, 255, 255, 0.08); --kt-sidebar-hover: rgba(255, 255, 255, 0.05); --kt-sidebar-active: rgba(92, 164, 240, 0.14); --kt-sidebar-accent: #5ca4f0; --kt-icon-chip-bg: rgba(255, 255, 255, 0.06); --kt-input-bg: #ffffff; --kt-table-head-bg: transparent; --kt-table-hover-bg: #f5f4ef; --kt-success: #1b7f45; --kt-success-soft: #e3f1e8; --kt-warning: #a55a06; --kt-warning-soft: #fbeedb; --kt-danger: #c42b1c; --kt-danger-soft: #f8e3e0; --kt-info: #0a5cad; --kt-info-soft: #e2ecf7; --kt-radius: 0.375rem; --kt-radius-sm: 0.25rem; --kt-shadow: 0 1px 0 rgba(13, 20, 30, 0.04); --kt-shadow-pop: 0 12px 32px -12px rgba(13, 20, 30, 0.28); --kt-header-height: 3.75rem; --kt-sidebar-width: 16.5rem; --kt-auth-gradient: linear-gradient(135deg, #0d141e 0%, #13263d 55%, #07437f 100%); } :root[data-theme="dark"] { --kt-accent: #5ca4f0; --kt-accent-strong: #8cc0f6; --kt-accent-soft: rgba(92, 164, 240, 0.1); --kt-accent-softer: rgba(92, 164, 240, 0.18); --kt-accent-contrast: #06111d; --kt-focus-ring: rgba(92, 164, 240, 0.32); --kt-background: #0a0e13; --kt-grid-line: rgba(255, 255, 255, 0.025); --kt-surface: #11171f; --kt-surface-muted: #0d1218; --kt-text: #cfd6de; --kt-heading: #f1f4f7; --kt-text-muted: #8a95a3; --kt-border: #222b36; --kt-border-strong: #364252; --kt-rule: #cfd6de; --kt-header-bg: #0d1218; --kt-sidebar-bg: #070a0e; --kt-sidebar-text: #bcc6d1; --kt-sidebar-muted: #6e7a88; --kt-sidebar-line: rgba(255, 255, 255, 0.06); --kt-sidebar-hover: rgba(255, 255, 255, 0.04); --kt-sidebar-active: rgba(92, 164, 240, 0.14); --kt-sidebar-accent: #5ca4f0; --kt-icon-chip-bg: rgba(255, 255, 255, 0.05); --kt-input-bg: #0d1218; --kt-table-head-bg: transparent; --kt-table-hover-bg: #151c25; --kt-success: #5cc28a; --kt-success-soft: rgba(92, 194, 138, 0.13); --kt-warning: #f0ad4e; --kt-warning-soft: rgba(240, 173, 78, 0.13); --kt-danger: #f2766b; --kt-danger-soft: rgba(242, 118, 107, 0.13); --kt-info: #5ca4f0; --kt-info-soft: rgba(92, 164, 240, 0.13); --kt-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); --kt-shadow-pop: 0 16px 36px -14px rgba(0, 0, 0, 0.8); --kt-auth-gradient: linear-gradient(135deg, #04070a 0%, #0c1827 55%, #0b3563 100%); color-scheme: dark; } /* ---- Bootstrap ile eşleme ---- */ :root, :root[data-theme="dark"] { --bs-body-font-family: var(--kt-font-body); --bs-body-font-size: 0.9375rem; --bs-body-color: var(--kt-text); --bs-body-bg: var(--kt-background); --bs-heading-color: var(--kt-heading); --bs-secondary-color: var(--kt-text-muted); --bs-border-color: var(--kt-border); --bs-border-radius: var(--kt-radius-sm); --bs-primary: var(--kt-accent); --bs-link-color: var(--kt-accent); --bs-link-color-rgb: 10, 92, 173; --bs-font-monospace: var(--kt-font-mono); --bs-link-hover-color: var(--kt-accent-strong); --bs-code-color: var(--kt-accent); --bs-emphasis-color: var(--kt-heading); --bs-tertiary-bg: var(--kt-surface-muted); } body { min-height: 100vh; font-family: var(--kt-font-body); font-feature-settings: "tnum" 1; color: var(--kt-text); background: var(--kt-background); -webkit-font-smoothing: antialiased; } h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { font-family: var(--kt-font-heading); color: var(--kt-heading); letter-spacing: -0.01em; } a { color: var(--kt-accent); } a:hover { color: var(--kt-accent-strong); } code { padding: 0.125rem 0.375rem; border-radius: 0.375rem; background: var(--kt-accent-soft); color: var(--kt-accent); font-size: 0.8125rem; } .text-muted { color: var(--kt-text-muted) !important; } :focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 2px; } /* ---- Düğmeler ---- */ .btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--kt-radius-sm); --bs-btn-padding-x: 1rem; --bs-btn-focus-shadow-rgb: 11, 112, 208; } .btn-sm { --bs-btn-border-radius: 0.5rem; --bs-btn-padding-x: 0.75rem; } .btn-primary { --bs-btn-color: var(--kt-accent-contrast); --bs-btn-bg: var(--kt-accent); --bs-btn-border-color: var(--kt-accent); --bs-btn-hover-color: var(--kt-accent-contrast); --bs-btn-hover-bg: var(--kt-accent-strong); --bs-btn-hover-border-color: var(--kt-accent-strong); --bs-btn-active-color: var(--kt-accent-contrast); --bs-btn-active-bg: var(--kt-accent-strong); --bs-btn-active-border-color: var(--kt-accent-strong); --bs-btn-disabled-color: var(--kt-accent-contrast); --bs-btn-disabled-bg: var(--kt-accent); --bs-btn-disabled-border-color: var(--kt-accent); } .btn-outline-primary { --bs-btn-color: var(--kt-accent); --bs-btn-border-color: var(--kt-accent); --bs-btn-hover-color: var(--kt-accent-contrast); --bs-btn-hover-bg: var(--kt-accent); --bs-btn-hover-border-color: var(--kt-accent); --bs-btn-active-color: var(--kt-accent-contrast); --bs-btn-active-bg: var(--kt-accent); --bs-btn-active-border-color: var(--kt-accent); } .btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--kt-text); --bs-btn-border-color: var(--kt-border-strong); --bs-btn-hover-color: var(--kt-heading); --bs-btn-hover-bg: var(--kt-surface-muted); --bs-btn-hover-border-color: var(--kt-border-strong); --bs-btn-active-color: var(--kt-heading); --bs-btn-active-bg: var(--kt-surface-muted); --bs-btn-active-border-color: var(--kt-border-strong); } .btn-outline-danger { --bs-btn-color: var(--kt-danger); --bs-btn-border-color: var(--kt-danger); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; } .btn-outline-success { --bs-btn-color: var(--kt-success); --bs-btn-border-color: var(--kt-success); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a; } /* ---- Form ---- */ .form-label, legend.form-label { margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--kt-heading); } .form-control, .form-select { padding: 0.5625rem 0.875rem; border-color: var(--kt-border); border-radius: var(--kt-radius-sm); background-color: var(--kt-input-bg); color: var(--kt-text); } .form-control::placeholder { color: var(--kt-text-muted); opacity: 0.8; } .form-control:focus, .form-select:focus { border-color: var(--kt-accent); background-color: var(--kt-input-bg); color: var(--kt-text); box-shadow: 0 0 0 0.2rem var(--kt-focus-ring); } .form-control:disabled, .form-select:disabled, fieldset:disabled .form-control, fieldset:disabled .form-select { background-color: var(--kt-surface-muted); color: var(--kt-text-muted); } .form-select-sm { padding-top: 0.3125rem; padding-bottom: 0.3125rem; } .form-check-input { border-color: var(--kt-border-strong); background-color: var(--kt-input-bg); } .form-check-input:checked { border-color: var(--kt-accent); background-color: var(--kt-accent); } .form-check-input:focus { border-color: var(--kt-accent); box-shadow: 0 0 0 0.2rem var(--kt-focus-ring); } .form-text { color: var(--kt-text-muted); font-size: 0.8125rem; } /* ---- Uyarılar ve rozetler ---- */ .alert { border-radius: var(--kt-radius-sm); border-width: 1px; border-left-width: 4px; } .alert-success { color: var(--kt-text); background: var(--kt-success-soft); border-color: var(--kt-success); } .alert-warning { color: var(--kt-text); background: var(--kt-warning-soft); border-color: var(--kt-warning); } .alert-danger { color: var(--kt-text); background: var(--kt-danger-soft); border-color: var(--kt-danger); } .alert-info { color: var(--kt-text); background: var(--kt-info-soft); border-color: var(--kt-info); } .badge { padding: 0.3125rem 0.5625rem; border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; } .badge.text-bg-success { color: var(--kt-success) !important; background: var(--kt-success-soft) !important; } .badge.text-bg-secondary, .badge.text-bg-light { color: var(--kt-text-muted) !important; background: var(--kt-surface-muted) !important; border: 1px solid var(--kt-border); } .badge.text-bg-primary { color: var(--kt-accent) !important; background: var(--kt-accent-softer) !important; } .badge.text-bg-warning { color: var(--kt-warning) !important; background: var(--kt-warning-soft) !important; } /* ---- Açılır menü ve yan panel ---- */ .dropdown-menu { --bs-dropdown-bg: var(--kt-surface); --bs-dropdown-color: var(--kt-text); --bs-dropdown-border-color: var(--kt-border); --bs-dropdown-border-radius: var(--kt-radius-sm); --bs-dropdown-link-color: var(--kt-text); --bs-dropdown-link-hover-color: var(--kt-heading); --bs-dropdown-link-hover-bg: var(--kt-accent-soft); --bs-dropdown-link-active-color: var(--kt-accent); --bs-dropdown-link-active-bg: var(--kt-accent-softer); padding: 0.375rem; box-shadow: var(--kt-shadow); } .dropdown-item { display: flex; align-items: center; gap: 0.625rem; border-radius: 0.5rem; font-weight: 500; } .offcanvas { --bs-offcanvas-bg: var(--kt-surface); --bs-offcanvas-color: var(--kt-text); --bs-offcanvas-border-color: var(--kt-border); } .pagination { --bs-pagination-bg: var(--kt-surface); --bs-pagination-color: var(--kt-text); --bs-pagination-border-color: var(--kt-border); --bs-pagination-hover-bg: var(--kt-accent-soft); --bs-pagination-hover-color: var(--kt-accent); --bs-pagination-hover-border-color: var(--kt-border); --bs-pagination-active-bg: var(--kt-accent); --bs-pagination-active-border-color: var(--kt-accent); --bs-pagination-active-color: var(--kt-accent-contrast); --bs-pagination-disabled-bg: var(--kt-surface-muted); --bs-pagination-disabled-color: var(--kt-text-muted); --bs-pagination-disabled-border-color: var(--kt-border); } /* ---- Marka ---- */ .kt-brand { display: inline-flex; align-items: center; text-decoration: none; } .kt-brand img { display: block; height: 2.25rem; width: auto; } .kt-brand img.kt-logo-on-dark, :root[data-theme="dark"] .kt-brand img.kt-logo-on-light { display: none; } :root[data-theme="dark"] .kt-brand img.kt-logo-on-dark { display: block; } /* ---- Üst bölüm ---- */ .kt-header { position: fixed; inset: 0 0 auto 0; z-index: 1030; display: flex; align-items: center; gap: 1rem; height: var(--kt-header-height); padding: 0 1.25rem; background: var(--kt-header-bg); border-bottom: 1px solid var(--kt-border); backdrop-filter: blur(10px); } .kt-header-left { display: flex; align-items: center; gap: 1rem; width: calc(var(--kt-sidebar-width) - 1.25rem); flex-shrink: 0; } .kt-header-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .kt-header-divider { width: 1px; height: 1.75rem; background: var(--kt-border); } .kt-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 2.5rem; height: 2.5rem; padding: 0 0.625rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface); color: var(--kt-text); font-size: 0.8125rem; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .kt-icon-button .bi { font-size: 1.0625rem; } .kt-icon-button:hover, .kt-icon-button[aria-expanded="true"] { border-color: var(--kt-accent); background: var(--kt-accent-soft); color: var(--kt-accent); } .kt-theme-icon-dark, :root[data-theme="dark"] .kt-theme-icon-light { display: none; } :root[data-theme="dark"] .kt-theme-icon-dark { display: inline-block; } .kt-user-trigger { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--kt-text); text-align: left; } .kt-user-trigger:hover, .kt-user-trigger[aria-expanded="true"] { border-color: var(--kt-border); background: var(--kt-surface); } .kt-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--kt-accent-softer); color: var(--kt-accent); font-family: var(--kt-font-heading); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; } .kt-user-brief { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .kt-user-name { overflow: hidden; max-width: 12rem; color: var(--kt-heading); font-size: 0.8125rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .kt-user-role { overflow: hidden; max-width: 12rem; color: var(--kt-text-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; } .kt-user-menu { min-width: 16rem; } .kt-user-menu-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem 0.75rem; margin-bottom: 0.375rem; border-bottom: 1px solid var(--kt-border); } .kt-user-menu form { margin: 0; } .kt-user-menu .dropdown-item.kt-danger { color: var(--kt-danger); } /* ---- Yan menü ---- */ .kt-sidebar { position: fixed; inset: var(--kt-header-height) auto 0 0; z-index: 1020; display: flex; flex-direction: column; width: var(--kt-sidebar-width); background: var(--kt-sidebar-bg); border-right: 1px solid var(--kt-border); transition: transform 0.2s ease; } .kt-sidebar-body { flex: 1; overflow-y: auto; padding: 0.75rem 0.75rem 1rem; } /* Menü ağacı: her grup açılır kapanır bir daldır. */ .kt-tree-menu, .kt-tree-children { margin: 0; padding: 0; list-style: none; } .kt-tree-menu > li + li { margin-top: 0.125rem; } .kt-tree-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.4375rem 0.625rem; border-radius: var(--kt-radius-sm); color: var(--kt-sidebar-text); font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .kt-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kt-tree-branch > summary { list-style: none; user-select: none; } .kt-tree-branch > summary::-webkit-details-marker { display: none; } .kt-tree-chevron { color: var(--kt-sidebar-muted); font-size: 0.75rem; transition: transform 0.15s ease; } .kt-tree-branch[open] > summary .kt-tree-chevron { transform: rotate(90deg); } .kt-nav-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--kt-icon-chip-bg); color: var(--kt-accent); font-size: 1rem; } .kt-tree-link:hover, .kt-tree-link:focus-visible { background: var(--kt-accent-soft); color: var(--kt-heading); } .kt-tree-link:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: -2px; } .kt-tree-parent { color: var(--kt-heading); } .kt-tree-link.active { background: var(--kt-accent-softer); color: var(--kt-heading); } .kt-tree-parent .kt-nav-icon, .kt-tree-link.active .kt-nav-icon { background: var(--kt-accent); color: var(--kt-accent-contrast); } /* Dalın öğeleri girintilidir ve bir kılavuz çizgisiyle dala bağlanır. */ .kt-tree-children { margin: 0.125rem 0 0.375rem 1.5625rem; padding-left: 0.625rem; border-left: 1px solid var(--kt-border); } .kt-tree-leaf { gap: 0.625rem; padding: 0.375rem 0.625rem; font-size: 0.84375rem; font-weight: 500; } .kt-tree-leaf-icon { flex-shrink: 0; width: 1.125rem; color: var(--kt-sidebar-muted); font-size: 0.9375rem; text-align: center; } .kt-tree-leaf.active { font-weight: 700; } .kt-tree-leaf.active .kt-tree-leaf-icon { color: var(--kt-accent); } .kt-sidebar-foot { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--kt-border); } .kt-sidebar-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface-muted); min-width: 0; } .kt-sidebar-card-dashed { border-style: dashed; background: transparent; } .kt-sidebar-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } .kt-sidebar-card-title { overflow: hidden; color: var(--kt-heading); font-size: 0.8125rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .kt-sidebar-card-note { overflow: hidden; color: var(--kt-sidebar-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .kt-sidebar-card a { color: var(--kt-sidebar-muted); font-size: 1.0625rem; } .kt-sidebar-card a:hover { color: var(--kt-accent); } /* ---- İçerik ---- */ .kt-main { min-height: 100vh; margin-left: var(--kt-sidebar-width); padding: calc(var(--kt-header-height) + 1.75rem) 2rem 2.5rem; transition: margin-left 0.2s ease; } .kt-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .kt-page-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; } .kt-sidebar-collapsed .kt-sidebar { transform: translateX(-100%); } .kt-sidebar-collapsed .kt-main { margin-left: 0; } .kt-sidebar-backdrop { display: none; } /* ---- Doküman penceresi ---- */ .kt-viewer-body { padding: 0; background: var(--kt-background); } .kt-viewer-frame { display: block; width: 100%; height: calc(100vh - 13rem); min-height: 24rem; border: 0; } .kt-viewer-image { display: block; max-width: 100%; max-height: calc(100vh - 13rem); margin: 0 auto; } /* ---- Kartlar ---- */ .kt-card { height: 100%; padding: 1.5rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); box-shadow: var(--kt-shadow); } .kt-card h2 { margin-bottom: 0.25rem; font-size: 1.0625rem; font-weight: 600; } .kt-card-lead { margin-bottom: 1.25rem; color: var(--kt-text-muted); } .kt-card-flush { padding: 0; overflow: hidden; } .kt-card-flush > .kt-card-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--kt-border); } .kt-section-title { margin: 1.5rem 0 0.5rem; font-size: 1rem; font-weight: 600; } .kt-definition { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.625rem 1rem; margin: 0; } .kt-definition dt { color: var(--kt-text-muted); font-weight: 500; } .kt-definition dd { margin: 0; color: var(--kt-heading); font-weight: 600; overflow-wrap: anywhere; } .kt-stat { font-family: var(--kt-font-heading); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--kt-heading); } .kt-stat-label { color: var(--kt-text-muted); font-size: 0.8125rem; font-weight: 600; } .kt-empty { padding: 2.5rem 1.5rem; color: var(--kt-text-muted); text-align: center; } .kt-plain-list { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; } .kt-inline-form { display: inline; } .kt-qr { width: 236px; height: 236px; padding: 0.5rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: #ffffff; } .kt-secret { font-family: var(--bs-font-monospace); letter-spacing: 0.08em; word-break: break-all; } .kt-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; margin: 0; padding: 0; font-family: var(--bs-font-monospace); list-style: none; } .kt-steps { margin: 0; padding: 0; list-style: none; } .kt-steps li { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid var(--kt-border); } .kt-steps li:last-child { border-bottom: 0; } /* ---- Tablo ---- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--kt-text); --bs-table-border-color: var(--kt-border); } .kt-table { width: 100%; margin: 0; } .kt-table th { border-bottom: 1px solid var(--kt-border); background: var(--kt-table-head-bg); color: var(--kt-text-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .kt-table td, .kt-table th { padding: 0.75rem 1rem; vertical-align: middle; } .kt-table td { border-bottom: 0; } .kt-table tbody tr + tr td, .kt-table tbody tr + tr th { border-top: 1px solid var(--kt-border); } .kt-table tbody tr:hover td { background: var(--kt-table-hover-bg); } .kt-table tbody th[scope="row"] { background: transparent; color: var(--kt-text); font-size: 0.875rem; letter-spacing: 0; text-transform: none; white-space: normal; } .kt-row-muted td { color: var(--kt-text-muted); } /* ---- Ağaç ve girinti ---- */ .kt-depth { display: block; } .kt-depth-1 { padding-left: 1.5rem; } .kt-depth-2 { padding-left: 3rem; } .kt-depth-3 { padding-left: 4.5rem; } .kt-depth-4 { padding-left: 6rem; } .kt-depth-5 { padding-left: 7.5rem; } .kt-depth-6 { padding-left: 9rem; } .kt-depth-7 { padding-left: 10.5rem; } .kt-depth-8 { padding-left: 12rem; } .kt-depth-9 { padding-left: 13.5rem; } .kt-depth-10 { padding-left: 15rem; } .kt-depth-11 { padding-left: 16.5rem; } .kt-depth-12 { padding-left: 18rem; } .form-check.kt-depth-1 { margin-left: 1.5rem; padding-left: 1.5em; } .form-check.kt-depth-2 { margin-left: 3rem; padding-left: 1.5em; } .form-check.kt-depth-3 { margin-left: 4.5rem; padding-left: 1.5em; } .form-check.kt-depth-4 { margin-left: 6rem; padding-left: 1.5em; } .form-check.kt-depth-5 { margin-left: 7.5rem; padding-left: 1.5em; } .form-check.kt-depth-6 { margin-left: 9rem; padding-left: 1.5em; } .form-check.kt-depth-7 { margin-left: 10.5rem; padding-left: 1.5em; } .form-check.kt-depth-8 { margin-left: 12rem; padding-left: 1.5em; } .form-check.kt-depth-9 { margin-left: 13.5rem; padding-left: 1.5em; } .form-check.kt-depth-10 { margin-left: 15rem; padding-left: 1.5em; } .form-check.kt-depth-11 { margin-left: 16.5rem; padding-left: 1.5em; } .form-check.kt-depth-12 { margin-left: 18rem; padding-left: 1.5em; } .kt-tree .kt-depth { font-weight: 600; color: var(--kt-heading); } .kt-tree .kt-depth:not(.kt-depth-0)::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.5rem; border-bottom: 1px solid var(--kt-border-strong); border-left: 1px solid var(--kt-border-strong); vertical-align: middle; } /* ---- Yetki ağacı ---- */ .kt-permission-module { margin-bottom: 1rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface); } .kt-permission-module-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm) var(--kt-radius-sm) 0 0; background: var(--kt-table-head-bg); } .kt-permission-module-head h3 { margin: 0 auto 0 0; font-size: 0.9375rem; font-weight: 600; } .kt-permission-screen { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 0.5rem 1rem; padding: 0.625rem 1rem; } .kt-permission-screen + .kt-permission-screen { border-top: 1px solid var(--kt-border); } .kt-permission-screen-name { color: var(--kt-heading); font-weight: 600; } .kt-permission-table td { width: 7rem; text-align: center; } .kt-permission-table th[scope="row"].kt-permission-action { padding-left: 2rem; } /* ---- Yardım paneli ---- */ .kt-help h3 { margin: 1.5rem 0 0.5rem; color: var(--kt-text-muted); font-family: var(--kt-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .kt-help h3:first-child { margin-top: 0; } .kt-help ol, .kt-help ul { margin: 0; padding-left: 1.25rem; } .kt-help li { margin-bottom: 0.5rem; } /* ---- Giriş ekranları ---- */ .kt-auth { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 1.5rem; background: var(--kt-auth-gradient); overflow: hidden; } .kt-auth::before, .kt-auth::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 2.5rem; transform: rotate(45deg); pointer-events: none; } .kt-auth::before { top: -14rem; right: -10rem; width: 38rem; height: 38rem; background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 3.5rem rgba(255, 255, 255, 0.03), 0 0 0 7rem rgba(255, 255, 255, 0.02); } .kt-auth::after { bottom: -16rem; left: -12rem; width: 34rem; height: 34rem; background: rgba(51, 153, 240, 0.12); box-shadow: 0 0 0 3rem rgba(51, 153, 240, 0.06); } .kt-auth-toolbar { position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; } .kt-auth-body { position: relative; z-index: 1; display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.5rem 0; } .kt-auth-side { padding: 1.5rem; background: var(--kt-surface); } .kt-auth-side .kt-demo { padding: 0; border: 0; background: transparent; } .kt-auth-card { width: 100%; max-width: 27rem; padding: 2rem; border: 1px solid var(--kt-border); border-radius: 1.125rem; background: var(--kt-surface); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); } .kt-auth-card-wide { max-width: 34rem; } .kt-auth-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; } .kt-auth-logo img { height: 3rem; } .kt-auth-tagline { margin: 0 0 1.5rem; color: var(--kt-text-muted); font-size: 0.875rem; text-align: center; } .kt-auth-card h2 { font-size: 1.375rem; font-weight: 700; text-align: center; } .kt-auth-foot { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.7); font-size: 0.8125rem; text-align: center; } .kt-demo { padding: 1rem; border: 1px dashed var(--kt-border-strong); border-radius: var(--kt-radius-sm); background: var(--kt-surface-muted); } .kt-demo .kt-definition { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } .kt-demo-companies { display: block; color: var(--kt-text-muted); font-size: 0.8125rem; font-weight: 500; } /* ---- Hata ekranları ---- */ .kt-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 100vh; padding: 2rem; background: var(--kt-background); text-align: center; } .kt-error-code { font-family: var(--kt-font-heading); font-size: 4rem; font-weight: 700; line-height: 1; color: var(--kt-accent); } .kt-error p { max-width: 32rem; color: var(--kt-text-muted); } /* ---- Dar ekranlar ---- */ @media (max-width: 991.98px) { .kt-header-left { width: auto; } .kt-sidebar { transform: translateX(-100%); box-shadow: var(--kt-shadow); } .kt-main { margin-left: 0; padding-right: 1rem; padding-left: 1rem; } .kt-sidebar-open .kt-sidebar { transform: translateX(0); } .kt-sidebar-open .kt-sidebar-backdrop { position: fixed; inset: var(--kt-header-height) 0 0 0; z-index: 1010; display: block; background: rgba(8, 18, 28, 0.55); } .kt-user-brief, .kt-button-label { display: none; } } @media (max-width: 767.98px) { .kt-permission-screen, .kt-definition, .kt-demo .kt-definition { grid-template-columns: 1fr; } .kt-definition dd { margin-bottom: 0.375rem; } .kt-card-flush { overflow-x: auto; } .kt-auth-card { padding: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .kt-sidebar, .kt-main, .kt-icon-button { transition: none; } } /* ---- Denetim kaydı ---- */ .kt-number { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kt-heading); } .kt-value { display: block; max-width: 38rem; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 0.875rem; } /* ---- Özet kutuları: listelerin üstündeki sayılar; her kutu bir süzgeçtir ---- */ .kt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .kt-tile { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 1rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); color: var(--kt-text); text-decoration: none; box-shadow: var(--kt-shadow); transition: border-color 0.15s ease, transform 0.15s ease; } .kt-tile:hover, .kt-tile:focus-visible { border-color: var(--kt-accent); color: var(--kt-text); transform: translateY(-1px); } .kt-tile.active { border-color: var(--kt-accent); background: var(--kt-accent-soft); } .kt-tile-value { font-family: var(--kt-font-heading); font-size: 1.625rem; font-weight: 700; line-height: 1.1; color: var(--kt-heading); font-variant-numeric: tabular-nums; } .kt-tile-label { font-size: 0.8125rem; color: var(--kt-text-muted); } .kt-tile-danger .kt-tile-value { color: var(--kt-danger); } .kt-tile-warning .kt-tile-value { color: var(--kt-warning); } .kt-tile-info .kt-tile-value { color: var(--kt-info); } /* ---- Durum rozetleri ---- */ .kt-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; background: var(--kt-surface-muted); color: var(--kt-text-muted); } .kt-badge-success { background: var(--kt-success-soft); color: var(--kt-success); } .kt-badge-warning { background: var(--kt-warning-soft); color: var(--kt-warning); } .kt-badge-danger { background: var(--kt-danger-soft); color: var(--kt-danger); } .kt-badge-info { background: var(--kt-info-soft); color: var(--kt-info); } .kt-due { display: flex; flex-direction: column; gap: 0.125rem; font-variant-numeric: tabular-nums; } .kt-due-date { font-weight: 600; color: var(--kt-heading); } /* ---- Cihaz kartının başlığı ---- */ .kt-hero { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; } .kt-hero-main { flex: 1 1 22rem; min-width: 0; } .kt-hero-code { font-family: var(--kt-font-heading); font-size: 0.9375rem; font-weight: 700; color: var(--kt-accent-strong); letter-spacing: 0.02em; } .kt-hero-name { margin: 0.125rem 0 0.5rem; font-size: 1.375rem; } .kt-hero-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; } .kt-hero-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem 1.25rem; margin-top: 1rem; } .kt-fact-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--kt-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .kt-fact-value { font-weight: 600; color: var(--kt-heading); overflow-wrap: anywhere; } .kt-qr img { display: block; width: 7.5rem; height: 7.5rem; padding: 0.375rem; border-radius: var(--kt-radius-sm); background: #ffffff; } /* ---- Adımlar: kalibrasyon kaydının ilerleyişi ---- */ .kt-stepper { display: flex; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; } .kt-stepper li { display: flex; flex: 1 1 0; align-items: center; gap: 0.5rem; min-width: 9rem; padding: 0.625rem 0.75rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface); font-size: 0.8125rem; font-weight: 600; color: var(--kt-text-muted); } .kt-stepper-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--kt-surface-muted); font-size: 0.8125rem; } .kt-stepper li.done { color: var(--kt-success); } .kt-stepper li.done .kt-stepper-mark { background: var(--kt-success-soft); } .kt-stepper li.current { border-color: var(--kt-accent); background: var(--kt-accent-soft); color: var(--kt-heading); } .kt-stepper li.current .kt-stepper-mark { background: var(--kt-accent); color: var(--kt-accent-contrast); } /* ---- Dosya kutuları: fotoğraflar ve belgeler; tıklanınca pencerede açılır ---- */ .kt-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.625rem; } .kt-file { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface-muted); color: var(--kt-text); font-size: 0.8125rem; text-decoration: none; min-width: 0; } .kt-file:hover { border-color: var(--kt-accent); color: var(--kt-heading); } .kt-file i { flex-shrink: 0; font-size: 1.25rem; color: var(--kt-accent); } .kt-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Zaman çizelgesi: cihazın işlem tarihçesi ---- */ .kt-timeline { margin: 0; padding: 0; list-style: none; } .kt-timeline li { position: relative; padding: 0 0 1rem 1.5rem; border-left: 2px solid var(--kt-border); margin-left: 0.4rem; } .kt-timeline li:last-child { padding-bottom: 0; } .kt-timeline li::before { content: ""; position: absolute; top: 0.3rem; left: -0.45rem; width: 0.8rem; height: 0.8rem; border: 2px solid var(--kt-accent); border-radius: 50%; background: var(--kt-surface); } .kt-timeline-time { font-size: 0.75rem; color: var(--kt-text-muted); } .kt-timeline-title { font-weight: 600; color: var(--kt-heading); } /* ---- Satır satır giriş: ölçüm yetenekleri ---- */ .kt-rows { display: flex; flex-direction: column; gap: 0.625rem; } .kt-row { display: grid; grid-template-columns: minmax(10rem, 1.6fr) minmax(8rem, 1.1fr) repeat(3, minmax(5.5rem, 0.8fr)) minmax(9rem, 1.2fr) auto; gap: 0.5rem; align-items: end; padding: 0.75rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface-muted); } .kt-row .form-label { font-size: 0.75rem; margin-bottom: 0.25rem; } .kt-row .mb-3 { margin-bottom: 0 !important; } @media (max-width: 991.98px) { .kt-row { grid-template-columns: 1fr 1fr; } } /* ---- Seçenek kartları: kalibrasyonun biçimi ---- */ .kt-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; } .kt-choice { position: relative; display: flex; gap: 0.75rem; padding: 1rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); cursor: pointer; } .kt-choice input { margin-top: 0.2rem; } .kt-choice:has(input:checked) { border-color: var(--kt-accent); background: var(--kt-accent-soft); } .kt-choice-title { display: block; font-weight: 700; color: var(--kt-heading); } .kt-choice-text { display: block; font-size: 0.8125rem; color: var(--kt-text-muted); } /* ---- Etiket ---- */ .kt-label { display: flex; gap: 0.75rem; align-items: center; width: 90mm; padding: 4mm; border: 1px dashed var(--kt-border-strong); background: #ffffff; color: #000000; font-size: 9pt; } .kt-label img { width: 26mm; height: 26mm; } .kt-label-code { font-size: 12pt; font-weight: 700; } @media print { .kt-sidebar, .kt-header, .kt-page-head, .kt-no-print, .kt-sidebar-backdrop { display: none !important; } .kt-main { margin: 0 !important; padding: 0 !important; } .kt-label { border: 0; } } /* ---- Aranabilir seçim ---- */ .kt-combobox { position: relative; } .kt-combobox-list { position: absolute; z-index: 30; top: calc(100% + 0.25rem); right: 0; left: 0; max-height: 22rem; margin: 0; padding: 0.25rem; overflow-y: auto; list-style: none; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface); box-shadow: 0 12px 28px rgb(15 23 42 / 0.16); } .kt-combobox-list li { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; border-radius: calc(var(--kt-radius-sm) - 2px); cursor: pointer; } .kt-combobox-list li.active { background: var(--kt-accent-soft); } .kt-combobox-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--kt-heading); } .kt-combobox-meta { font-size: 0.8125rem; color: var(--kt-text-muted); } .kt-combobox-list .kt-combobox-empty { color: var(--kt-text-muted); cursor: default; } /* ---- Form düğmeleri: sağa dayalı; birincil işlem en sağda, vazgeç hemen solunda ---- */ .kt-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 1rem; } /* ===================================================================== * Görsel dil katmanı (B.41). Yukarıdaki temel bileşenlerin üzerine yazar. * ===================================================================== */ /* ---- Zemin: silik teknik çizim ızgarası ---- */ body { background-color: var(--kt-background); background-image: linear-gradient(var(--kt-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--kt-grid-line) 1px, transparent 1px); background-size: 24px 24px; font-feature-settings: "tnum" 1, "ss02" 1; letter-spacing: -0.003em; } h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { letter-spacing: -0.015em; } .kt-mono, .kt-number, .kt-code, .kt-hero-code, .kt-due-date, .kt-tile-value, .kt-stepper-mark, code { font-family: var(--kt-font-mono); font-feature-settings: "zero" 1; } .kt-code { font-weight: 600; letter-spacing: 0.01em; } /* ---- Düğmeler: köşeli, sade ---- */ .btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: 0.4375rem; --bs-btn-padding-x: 0.9375rem; --bs-btn-font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; letter-spacing: 0.005em; } .btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.625rem; --bs-btn-font-size: 0.8125rem; } .btn-primary { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); } /* ---- Form ---- */ .form-label, legend.form-label { color: var(--kt-text-muted); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.01em; } .form-control, .form-select { padding: 0.5rem 0.75rem; border-color: var(--kt-border-strong); font-size: 0.9375rem; } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px var(--kt-focus-ring); } /* ---- Üst bölüm ---- */ .kt-header { background: var(--kt-header-bg); backdrop-filter: none; border-bottom: 1px solid var(--kt-border); } .kt-header-left { width: calc(var(--kt-sidebar-width) - 1.25rem); } .kt-icon-button { border-radius: var(--kt-radius-sm); background: transparent; } .kt-avatar { border-radius: var(--kt-radius-sm); background: var(--kt-heading); color: var(--kt-surface); font-family: var(--kt-font-mono); font-weight: 600; } .kt-user-trigger { border-radius: var(--kt-radius); } /* ---- Yan menü: mürekkep rengi panel ---- */ .kt-sidebar { background: var(--kt-sidebar-bg); border-right: 0; } .kt-sidebar-body { padding: 1rem 0.625rem; } .kt-tree-link { position: relative; gap: 0.75rem; padding: 0.5rem 0.625rem; border-radius: var(--kt-radius-sm); color: var(--kt-sidebar-text); font-size: 0.875rem; font-weight: 500; } .kt-tree-link:hover, .kt-tree-link:focus-visible { background: var(--kt-sidebar-hover); color: #ffffff; } .kt-tree-parent { color: #ffffff; } .kt-nav-icon { width: 1.75rem; height: 1.75rem; border-radius: var(--kt-radius-sm); background: var(--kt-icon-chip-bg); color: var(--kt-sidebar-text); font-size: 0.9375rem; } .kt-tree-parent .kt-nav-icon, .kt-tree-link.active .kt-nav-icon { background: var(--kt-sidebar-active); color: var(--kt-sidebar-accent); } .kt-tree-link.active { background: var(--kt-sidebar-active); color: #ffffff; } .kt-tree-link.active::before { content: ""; position: absolute; top: 0.375rem; bottom: 0.375rem; left: -0.625rem; width: 3px; border-radius: 0 2px 2px 0; background: var(--kt-sidebar-accent); } .kt-tree-children { margin-left: 1.4375rem; border-left: 1px solid var(--kt-sidebar-line); } .kt-tree-leaf { font-size: 0.84375rem; font-weight: 400; } .kt-tree-leaf.active { font-weight: 600; } .kt-tree-leaf-icon, .kt-tree-chevron { color: var(--kt-sidebar-muted); } .kt-tree-leaf.active .kt-tree-leaf-icon { color: var(--kt-sidebar-accent); } .kt-sidebar-foot { border-top: 1px solid var(--kt-sidebar-line); } .kt-sidebar-card { border: 1px solid var(--kt-sidebar-line); border-radius: var(--kt-radius); background: rgba(255, 255, 255, 0.03); } .kt-sidebar-card-dashed { background: transparent; } .kt-sidebar-card-title { color: #ffffff; } .kt-sidebar-card .kt-avatar { background: var(--kt-sidebar-active); color: var(--kt-sidebar-accent); } /* ---- Sayfa başlığı: başlık solda, işlemler sağda; altında ölçek çizgisi ---- */ .kt-main { padding: calc(var(--kt-header-height) + 1.5rem) 2rem 3rem; } .kt-page-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; padding-bottom: 0.875rem; } .kt-page-head::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 7px; border-bottom: 1px solid var(--kt-rule); background-image: repeating-linear-gradient(90deg, var(--kt-rule) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, var(--kt-border-strong) 0 1px, transparent 1px 8px); background-size: 100% 7px, 100% 3px; background-position: left bottom, left bottom; background-repeat: no-repeat; opacity: 0.55; } .kt-page-head h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; } .kt-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } /* ---- Kartlar: düz panel, ince çizgi ---- */ .kt-card { padding: 1.25rem 1.5rem 1.5rem; border-color: var(--kt-border); border-radius: var(--kt-radius); box-shadow: var(--kt-shadow); } .kt-card.kt-card-flush { padding: 0; } .kt-card h2 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 1rem; font-weight: 600; } .kt-card h2 > .bi { color: var(--kt-text-muted); } .kt-card-lead { margin-bottom: 1.125rem; font-size: 0.875rem; } .kt-card-flush > .kt-card-head { padding: 1rem 1.5rem; } /* Formun bölümleri sırayla numaralanır: 01 Kimlik, 02 Sorumlu birim ... */ form { counter-reset: kt-section; } form > .kt-card > h2::before, form > details.kt-card > summary::before { counter-increment: kt-section; content: counter(kt-section, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; min-width: 1.875rem; padding: 0.0625rem 0.3125rem; border: 1px solid var(--kt-border-strong); border-radius: var(--kt-radius-sm); color: var(--kt-text-muted); font-family: var(--kt-font-mono); font-size: 0.75rem; font-weight: 600; } form > details.kt-card > summary { display: flex; align-items: center; gap: 0.5rem; list-style: none; font-size: 1rem; } form > details.kt-card > summary::-webkit-details-marker { display: none; } .kt-section-title { display: flex; align-items: center; gap: 0.625rem; margin: 1.5rem 0 0.75rem; color: var(--kt-text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .kt-section-title::after { content: ""; flex: 1; height: 1px; background: var(--kt-border); } .kt-definition dt { font-size: 0.8125rem; } .kt-definition dd { font-weight: 500; } /* ---- Tablo: mürekkep çizgili başlık ---- */ .kt-table th { border-bottom: 1px solid var(--kt-rule); background: var(--kt-table-head-bg); color: var(--kt-heading); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; } .kt-table td, .kt-table th { padding: 0.6875rem 1rem; } .kt-table tbody tr:hover td { background: var(--kt-table-hover-bg); } .kt-table td > a.fw-bold, .kt-table td > a.kt-code { font-family: var(--kt-font-mono); font-weight: 600; text-decoration: none; } .kt-table td > a.fw-bold:hover { text-decoration: underline; } /* ---- Özet şeridi: eşit genişlikte bölmeler, tek çerçeve ---- */ .kt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0; margin-bottom: 1.25rem; overflow: hidden; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); } .kt-tile { position: relative; gap: 0.25rem; padding: 0.875rem 1rem 1rem; border: 0; border-right: 1px solid var(--kt-border); border-radius: 0; background: transparent; box-shadow: none; } .kt-tile:last-child { border-right: 0; } .kt-tile:hover, .kt-tile:focus-visible { background: var(--kt-surface-muted); transform: none; } .kt-tile.active { background: var(--kt-accent-soft); } .kt-tile::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: transparent; } .kt-tile.active::after { background: var(--kt-accent); } .kt-tile-value { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; } .kt-tile-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* ---- Rozetler: kalibrasyon etiketi görünümü ---- */ .kt-badge { gap: 0.3125rem; padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: var(--kt-radius-sm); box-shadow: inset 3px 0 0 currentColor; font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.02em; } .kt-badge:not([class*="kt-badge-"]) { color: var(--kt-text-muted); } /* ---- Kalan süre: tarih ve periyot ölçeği ---- */ .kt-due { gap: 0.25rem; min-width: 9rem; } .kt-due-date { font-size: 0.875rem; font-weight: 500; } .kt-scale { position: relative; display: block; width: 100%; max-width: 11rem; height: 6px; margin-top: 0.125rem; background-image: repeating-linear-gradient(90deg, var(--kt-border-strong) 0 1px, transparent 1px 10%); background-size: 100% 3px; background-position: left bottom; background-repeat: no-repeat; border-bottom: 1px solid var(--kt-border-strong); } .kt-scale-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--kt-success); opacity: 0.85; } .kt-scale-warning .kt-scale-fill { background: var(--kt-warning); } .kt-scale-danger .kt-scale-fill { width: 100%; background: var(--kt-danger); } .kt-scale-fill.kt-w-0 { width: 0%; } .kt-scale-fill.kt-w-5 { width: 5%; } .kt-scale-fill.kt-w-10 { width: 10%; } .kt-scale-fill.kt-w-15 { width: 15%; } .kt-scale-fill.kt-w-20 { width: 20%; } .kt-scale-fill.kt-w-25 { width: 25%; } .kt-scale-fill.kt-w-30 { width: 30%; } .kt-scale-fill.kt-w-35 { width: 35%; } .kt-scale-fill.kt-w-40 { width: 40%; } .kt-scale-fill.kt-w-45 { width: 45%; } .kt-scale-fill.kt-w-50 { width: 50%; } .kt-scale-fill.kt-w-55 { width: 55%; } .kt-scale-fill.kt-w-60 { width: 60%; } .kt-scale-fill.kt-w-65 { width: 65%; } .kt-scale-fill.kt-w-70 { width: 70%; } .kt-scale-fill.kt-w-75 { width: 75%; } .kt-scale-fill.kt-w-80 { width: 80%; } .kt-scale-fill.kt-w-85 { width: 85%; } .kt-scale-fill.kt-w-90 { width: 90%; } .kt-scale-fill.kt-w-95 { width: 95%; } .kt-scale-fill.kt-w-100 { width: 100%; } /* ---- Adımlar: tek hat üzerinde numaralı duraklar ---- */ .kt-stepper { gap: 0; padding: 0; overflow-x: auto; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); } .kt-stepper li { position: relative; border: 0; border-right: 1px solid var(--kt-border); border-radius: 0; background: transparent; padding: 0.75rem 1rem; } .kt-stepper li:last-child { border-right: 0; } .kt-stepper-mark { width: auto; min-width: 1.75rem; height: 1.5rem; padding: 0 0.3125rem; border: 1px solid var(--kt-border-strong); border-radius: var(--kt-radius-sm); background: transparent; font-size: 0.75rem; font-weight: 600; } .kt-stepper li.done { color: var(--kt-text); } .kt-stepper li.done .kt-stepper-mark { border-color: var(--kt-success); background: var(--kt-success); color: #ffffff; } .kt-stepper li.current { background: var(--kt-accent-soft); border-color: var(--kt-border); } .kt-stepper li.current::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--kt-accent); } .kt-stepper li.current .kt-stepper-mark { border-color: var(--kt-accent); background: var(--kt-accent); } /* ---- Seçenek kartları ---- */ .kt-choice { border-radius: var(--kt-radius); } /* ---- Cihaz başlığı ---- */ .kt-hero-code { color: var(--kt-accent); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; } .kt-hero-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; } .kt-hero-facts { gap: 0; margin-top: 1.25rem; border-top: 1px solid var(--kt-border); } .kt-hero-facts > div { padding: 0.75rem 1rem 0 0; } .kt-fact-label { font-size: 0.6875rem; letter-spacing: 0.07em; } .kt-fact-value { font-weight: 500; } .kt-combobox-list { border-radius: var(--kt-radius); box-shadow: var(--kt-shadow-pop); } .dropdown-menu { --bs-dropdown-border-radius: var(--kt-radius); box-shadow: var(--kt-shadow-pop); } .kt-due-date { font-family: var(--kt-font-body); font-variant-numeric: tabular-nums; } .kt-due .kt-badge { align-self: flex-start; } /* Özet şeridi simetrik bölünür: geniş ekranda tek satır, ortada 4'lü iki satır. */ @media (min-width: 1200px) { .kt-tiles { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-template-columns: none; } } @media (min-width: 576px) and (max-width: 1199.98px) { .kt-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kt-tile:nth-child(4n) { border-right: 0; } .kt-tile:nth-child(n + 5) { border-top: 1px solid var(--kt-border); } } .kt-tile-label { font-size: 0.6875rem; letter-spacing: 0.05em; line-height: 1.35; } /* ---- Simge menüsü (B.45): daraltılınca yalnızca simgeler kalır; alt menü yanda açılır ---- */ :root { --kt-rail-width: 4.25rem; } .kt-tree-flyout-title { display: none; } @media (min-width: 992px) { .kt-sidebar-collapsed .kt-sidebar { width: var(--kt-rail-width); transform: none; } .kt-sidebar-collapsed .kt-main { margin-left: var(--kt-rail-width); } .kt-sidebar-collapsed .kt-sidebar-body { overflow: visible; padding: 0.75rem 0.5rem; } .kt-sidebar-collapsed .kt-tree-menu > li { position: relative; } .kt-sidebar-collapsed .kt-tree-menu > li > a, .kt-sidebar-collapsed .kt-tree-menu > li > details > summary { justify-content: center; padding: 0.5rem 0; } .kt-sidebar-collapsed .kt-tree-menu > li > a > .kt-tree-label, .kt-sidebar-collapsed .kt-tree-menu > li > details > summary > .kt-tree-label, .kt-sidebar-collapsed .kt-tree-chevron, .kt-sidebar-collapsed .kt-sidebar-card-text, .kt-sidebar-collapsed .kt-sidebar-card > a { display: none; } .kt-sidebar-collapsed .kt-tree-link.active::before { left: -0.5rem; } .kt-sidebar-collapsed .kt-nav-icon { width: 2.25rem; height: 2.25rem; font-size: 1.0625rem; } /* Tek bağlantılı öğede ad, simgenin yanında küçük bir etiket olarak görünür. */ .kt-sidebar-collapsed .kt-tree-menu > li:hover > a > .kt-tree-label, .kt-sidebar-collapsed .kt-tree-menu > li > a:focus-visible > .kt-tree-label { position: absolute; top: 50%; left: calc(100% + 0.5rem); z-index: 1040; display: block; padding: 0.375rem 0.625rem; border-radius: var(--kt-radius-sm); background: var(--kt-sidebar-bg); color: #ffffff; font-size: 0.8125rem; white-space: nowrap; box-shadow: var(--kt-shadow-pop); transform: translateY(-50%); } /* Dalın alt menüsü yanda açılır: üzerine gelince, klavyeyle odaklanınca ya da dokununca. */ .kt-sidebar-collapsed .kt-tree-children { position: absolute; top: 0; left: calc(100% + 0.5rem); z-index: 1040; display: none; min-width: 15rem; margin: 0; padding: 0.375rem; border: 1px solid var(--kt-sidebar-line); border-left: 0; border-radius: var(--kt-radius); background: var(--kt-sidebar-bg); box-shadow: var(--kt-shadow-pop); } .kt-sidebar-collapsed .kt-tree-menu > li:hover > details > .kt-tree-children, .kt-sidebar-collapsed .kt-tree-menu > li:focus-within > details > .kt-tree-children, .kt-sidebar-collapsed .kt-tree-menu > li.kt-flyout-open > details > .kt-tree-children { display: block; } /* Menü ile alt menü arasındaki boşlukta fare kaybolmasın. */ .kt-sidebar-collapsed .kt-tree-children::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.75rem; width: 0.75rem; } .kt-sidebar-collapsed .kt-tree-flyout-title { display: block; padding: 0.5rem 0.625rem 0.375rem; color: var(--kt-sidebar-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } .kt-sidebar-collapsed .kt-sidebar-foot { align-items: center; padding: 0.625rem 0.5rem; } .kt-sidebar-collapsed .kt-sidebar-card { justify-content: center; padding: 0.375rem; border: 0; background: transparent; } } .kt-card h2.kt-hero-name, .kt-hero-name { display: block; margin: 0 0 0.625rem; font-size: 1.25rem; font-weight: 600; } .kt-hero-badges + .kt-hero-facts { margin-top: 1rem; } .kt-table td > a.fw-bold, .kt-table td > a.kt-code, .kt-number { white-space: nowrap; } /* Alt alta dizilen kartlar içeriği kadar uzar; yan yana kartlar eşit boyda kalır. */ .kt-card.mb-3, section.kt-card + section.kt-card { height: auto; } /* ---- Giriş ekranı: solda laboratuvar paneli, sağda giriş kartı ---- */ .kt-auth { display: grid; grid-template-columns: minmax(22rem, 38%) 1fr; flex-direction: initial; min-height: 100vh; padding: 0; background: var(--kt-background); background-image: linear-gradient(var(--kt-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--kt-grid-line) 1px, transparent 1px); background-size: 24px 24px; } .kt-auth::before, .kt-auth::after { display: none; } .kt-auth-hero { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem 2.5rem; overflow: hidden; background: #0d141e; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 24px 24px; color: #cbd4de; } .kt-auth-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 9px; background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 40px), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 8px); background-size: 9px 100%, 4px 100%; background-position: right top, right top; background-repeat: no-repeat; border-right: 1px solid rgba(255, 255, 255, 0.3); } .kt-auth-hero-brand img { display: block; height: 2.25rem; width: auto; } .kt-auth-hero-body { display: flex; flex: 1; flex-direction: column; justify-content: center; max-width: 30rem; } .kt-auth-kicker { align-self: flex-start; margin-bottom: 1rem; padding: 0.25rem 0.625rem 0.25rem 0.5rem; border: 1px solid rgba(92, 164, 240, 0.4); border-radius: var(--kt-radius-sm); box-shadow: inset 3px 0 0 #5ca4f0; color: #8cc0f6; font-family: var(--kt-font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .kt-auth-hero-title { margin: 0 0 0.75rem; color: #ffffff; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; } .kt-auth-hero-lead { margin: 0; color: #9aa7b6; font-size: 0.9375rem; line-height: 1.6; } .kt-auth-instrument { display: block; width: 100%; max-width: 21rem; margin: 1.75rem 0 1.25rem; color: #cbd4de; } .kt-auth-instrument-number { fill: #cbd4de; font-family: var(--kt-font-mono); font-size: 15px; font-weight: 500; } .kt-auth-instrument-unit { fill: #7a8796; font-family: var(--kt-font-mono); font-size: 14px; letter-spacing: 0.1em; } .kt-auth-label-code { fill: #0d141e; font-family: var(--kt-font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; } .kt-auth-label-date { fill: #1b7f45; font-family: var(--kt-font-mono); font-size: 14px; font-weight: 600; } .kt-auth-points { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; } .kt-auth-points li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; } .kt-auth-points .bi { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.875rem; height: 1.875rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--kt-radius-sm); color: #5ca4f0; } .kt-auth-hero-foot { color: #6e7a88; font-family: var(--kt-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; } .kt-auth-main { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; } .kt-auth-card { max-width: 26rem; padding: 2rem; border-radius: var(--kt-radius); box-shadow: var(--kt-shadow-pop); } .kt-auth-card h2 { font-size: 1.25rem; font-weight: 600; } .kt-auth-side { max-width: 26rem; } @media (max-width: 991.98px) { .kt-auth { grid-template-columns: 1fr; } .kt-auth-hero { padding: 1.25rem 1.5rem; } .kt-auth-hero-lead, .kt-auth-instrument, .kt-auth-points, .kt-auth-hero-foot, .kt-auth-hero::after { display: none; } .kt-auth-hero-title { font-size: 1.25rem; } } .kt-auth-instrument { max-width: 15rem; margin: 1.25rem 0 1rem; } @media (max-height: 820px) { .kt-auth-instrument { max-width: 11rem; } } /* ---- Destek talebi yazışması ---- */ .kt-thread { display: grid; gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; } .kt-thread-item { max-width: 52rem; padding: 1rem 1.25rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); } .kt-thread-staff { justify-self: end; border-color: color-mix(in srgb, var(--kt-accent) 35%, var(--kt-border)); background: var(--kt-accent-soft); } .kt-thread-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; } .kt-thread-body { white-space: pre-line; overflow-wrap: anywhere; } /* ---- İzlenebilirlik halkası ---- */ .kt-trace { padding: 0.75rem 0; border-top: 1px solid var(--kt-border); } .kt-trace:first-of-type { border-top: 0; padding-top: 0; } .kt-trace-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-weight: 500; } .kt-trace-facts { display: grid; gap: 0.375rem; margin: 0; font-size: 0.875rem; } .kt-trace-facts > div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 0.5rem; } .kt-trace-facts dt { color: var(--kt-text-muted); font-weight: 500; } .kt-trace-facts dd { margin: 0; overflow-wrap: anywhere; } /* ---- Kontrol listesiyle inceleme ---- */ .kt-review-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .kt-review-result { padding: 0.75rem 1rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface-muted); } .kt-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); } .kt-checklist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; padding: 0.625rem 0.875rem; border-top: 1px solid var(--kt-border); } .kt-checklist-item:first-child { border-top: 0; } .kt-checklist-item.is-invalid { background: var(--kt-danger-soft); } .kt-checklist-text { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .kt-checklist-answers { display: inline-flex; overflow: hidden; border: 1px solid var(--kt-border-strong); border-radius: var(--kt-radius-sm); } .kt-answer { position: relative; margin: 0; cursor: pointer; } .kt-answer input { position: absolute; opacity: 0; pointer-events: none; } .kt-answer span { display: block; padding: 0.3125rem 0.75rem; border-left: 1px solid var(--kt-border-strong); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .kt-answer:first-child span { border-left: 0; } .kt-answer input:focus-visible + span { outline: 2px solid var(--kt-accent); outline-offset: -2px; } .kt-answer-ok input:checked + span { background: var(--kt-success); color: #ffffff; } .kt-answer-bad input:checked + span { background: var(--kt-danger); color: #ffffff; } .kt-answer-na input:checked + span { background: var(--kt-text-muted); color: #ffffff; } .kt-checklist-note { grid-column: 1 / -1; } @media (max-width: 767.98px) { .kt-checklist-item { grid-template-columns: 1fr; } } /* ---- Tedarikçi göstergeleri ---- */ .kt-indicators { display: grid; gap: 0.25rem; margin: 0; } .kt-indicators > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3125rem 0; border-bottom: 1px dashed var(--kt-border); font-size: 0.875rem; } .kt-indicators dt { color: var(--kt-text-muted); font-weight: 500; } .kt-indicators dd { margin: 0; font-weight: 600; } /* ---- Teklif karşılaştırma ---- */ .kt-compare th[scope="row"] { width: 12rem; color: var(--kt-text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .kt-compare thead th { text-transform: none; letter-spacing: 0; font-size: 0.875rem; } .kt-decision-row { display: grid; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--kt-border); } .kt-decision-row.is-invalid { background: var(--kt-danger-soft); } .kt-decision-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; } .kt-decision-row .kt-checklist-answers { justify-self: start; } .kt-check-list { max-height: 22rem; overflow-y: auto; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); } .kt-check-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--kt-border); cursor: pointer; } .kt-check-row:first-child { border-top: 0; } .kt-check-row[hidden] { display: none; } .kt-compare tbody th[scope="row"] { border-bottom: 0; border-top: 1px solid var(--kt-border); } .kt-compare tbody tr:first-child th[scope="row"] { border-top: 0; } /* ---- Etiketler (B.48): SVG milimetre ölçüsünde çizilir ---- */ .kt-label-preview { display: flex; justify-content: center; padding: 1rem; border: 1px dashed var(--kt-border-strong); border-radius: var(--kt-radius); background: repeating-conic-gradient(var(--kt-surface-muted) 0% 25%, var(--kt-surface) 0% 50%) 50% / 12px 12px; overflow: auto; } .kt-label-preview svg { max-width: 100%; height: auto; box-shadow: var(--kt-shadow-pop); } .kt-label-preview-card { position: sticky; top: calc(var(--kt-header-height) + 1rem); } .kt-label-row { padding: 0.75rem 0; border-top: 1px solid var(--kt-border); } .kt-label-sheet { display: grid; grid-template-columns: repeat(2, max-content); gap: 2mm; } .kt-label-columns-1 { grid-template-columns: repeat(1, max-content); } .kt-label-columns-3 { grid-template-columns: repeat(3, max-content); } .kt-label-columns-4 { grid-template-columns: repeat(4, max-content); } .kt-label-columns-5 { grid-template-columns: repeat(5, max-content); } .kt-label-columns-6 { grid-template-columns: repeat(6, max-content); } .kt-label-cell svg { display: block; } @media print { @page { margin: 5mm; } body { background: #ffffff; } .kt-main { margin: 0; padding: 0; } .kt-label-sheet { gap: 0; } .kt-label-cell { break-inside: avoid; } } /* ===================================================================== * Ana sayfa panosu, grafikler ve takvim (B.33) * ===================================================================== */ .kt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .kt-card-flush > .kt-card-head { margin-bottom: 0; } .kt-card-head h2 { margin-bottom: 0; } .kt-card-subtitle { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kt-text-muted); } .kt-home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: 1rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--kt-border); } .kt-home-greeting { margin: 0; font-size: 1.375rem; font-weight: 500; color: var(--kt-heading); } .kt-home-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; } .kt-home-meta dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kt-text-muted); } .kt-home-meta dd { margin: 0; font-weight: 600; color: var(--kt-heading); } .kt-home-clear { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; color: var(--kt-success); font-weight: 600; } /* ---- Yapılacaklar ---- */ .kt-task-list { margin: 0.5rem 0 0; padding: 0; list-style: none; } .kt-task-list li + li { border-top: 1px solid var(--kt-border); } .kt-task { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.625rem 0.25rem; color: var(--kt-text); text-decoration: none; } .kt-task:hover, .kt-task:focus-visible { background: var(--kt-surface-muted); } .kt-task > .bi { font-size: 1.0625rem; } .kt-task-count { min-width: 2.25rem; padding: 0.0625rem 0.5rem; border: 1px solid currentColor; border-radius: var(--kt-radius-sm); font-family: var(--kt-font-mono); font-weight: 600; text-align: center; } .kt-task-danger > .bi, .kt-task-danger .kt-task-count { color: var(--kt-danger); } .kt-task-warning > .bi, .kt-task-warning .kt-task-count { color: var(--kt-warning); } .kt-task-info > .bi, .kt-task-info .kt-task-count, .kt-task-accent > .bi, .kt-task-accent .kt-task-count { color: var(--kt-accent); } /* ---- Grafikler: SVG, renkler sınıfla ---- */ .kt-chart { margin: 0; } .kt-chart-svg { display: block; width: 100%; height: auto; } .kt-chart-axis { stroke: var(--kt-border-strong); stroke-width: 1; } .kt-chart-bar { fill: var(--kt-accent); } .kt-chart-group:hover .kt-chart-bar { opacity: 0.8; } .kt-chart-accent { fill: var(--kt-accent); background: var(--kt-accent); } .kt-chart-success { fill: var(--kt-success); background: var(--kt-success); } .kt-chart-warning { fill: var(--kt-warning); background: var(--kt-warning); } .kt-chart-danger { fill: var(--kt-danger); background: var(--kt-danger); } .kt-chart-info { fill: #5ca4f0; background: #5ca4f0; } .kt-chart-muted { fill: var(--kt-border-strong); background: var(--kt-border-strong); } .kt-chart-neutral { fill: var(--kt-surface-muted); background: var(--kt-surface-muted); stroke: var(--kt-border-strong); } .kt-chart-value, .kt-chart-label { font-family: var(--kt-font-mono); font-size: 12px; fill: var(--kt-text-muted); } .kt-chart-value { font-weight: 600; fill: var(--kt-heading); } .kt-chart-strip { display: block; width: 100%; height: 1.25rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); } .kt-chart-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0.625rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; } .kt-chart-legend li { display: inline-flex; align-items: center; gap: 0.375rem; } .kt-chart-swatch { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; } /* ---- Ajanda ---- */ .kt-agenda { margin: 0; padding: 0; list-style: none; } .kt-agenda-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--kt-border); } .kt-agenda-item:first-child { border-top: 0; } .kt-agenda-date { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0; border: 1px solid var(--kt-border-strong); border-top: 3px solid var(--kt-event, var(--kt-accent)); border-radius: var(--kt-radius-sm); line-height: 1.1; } .kt-agenda-day { font-family: var(--kt-font-mono); font-size: 1.125rem; font-weight: 600; } .kt-agenda-month { font-size: 0.6875rem; text-transform: uppercase; color: var(--kt-text-muted); } .kt-agenda-body { display: flex; flex-direction: column; min-width: 0; } .kt-agenda-kind { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kt-event, var(--kt-text-muted)); } .kt-agenda-title { font-weight: 600; overflow-wrap: anywhere; } .kt-agenda-detail { font-size: 0.8125rem; color: var(--kt-text-muted); } .kt-done { text-decoration: line-through; color: var(--kt-text-muted); } .kt-event-calibration { --kt-event: var(--kt-accent); } .kt-event-verification { --kt-event: #6b4fbb; } .kt-event-intermediate { --kt-event: #0f7b7b; } .kt-event-return { --kt-event: var(--kt-warning); } .kt-event-quotation { --kt-event: #8a6d1d; } .kt-event-supplier { --kt-event: #5b6471; } .kt-event-reminder { --kt-event: var(--kt-success); } .kt-event-plan { --kt-event: #0a5cad; } /* ---- Ay görünümü ---- */ .kt-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; } .kt-calendar th { padding: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kt-text-muted); border-bottom: 1px solid var(--kt-border-strong); } .kt-calendar td { height: 7.25rem; padding: 0; vertical-align: top; border: 1px solid var(--kt-border); } .kt-calendar-cell { display: flex; flex-direction: column; gap: 0.1875rem; height: 100%; min-height: 7.25rem; padding: 0.375rem; color: inherit; text-decoration: none; } .kt-calendar-cell:hover, .kt-calendar-cell:focus-visible { background: var(--kt-surface-muted); } .kt-calendar-outside .kt-calendar-cell { opacity: 0.45; } .kt-calendar-selected .kt-calendar-cell { background: var(--kt-accent-soft); } .kt-calendar-number { align-self: flex-start; min-width: 1.75rem; padding: 0 0.25rem; font-family: var(--kt-font-mono); font-weight: 600; text-align: center; } .kt-calendar-today .kt-calendar-number { border-radius: var(--kt-radius-sm); background: var(--kt-accent); color: var(--kt-accent-contrast); } .kt-calendar-chip { display: block; overflow: hidden; padding: 0 0.3125rem; border-left: 3px solid var(--kt-event, var(--kt-accent)); background: var(--kt-surface-muted); font-size: 0.71875rem; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; } .kt-calendar-more { font-size: 0.6875rem; color: var(--kt-text-muted); } .kt-calendar-nav { display: flex; align-items: center; gap: 0.5rem; } .kt-calendar-nav h2 { min-width: 11rem; margin: 0; text-align: center; } .kt-kind-filter { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; } .kt-kind-filter .form-check-label::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.375rem; border-radius: 2px; background: var(--kt-event, var(--kt-accent)); } @media (max-width: 767.98px) { .kt-calendar td { height: 3.25rem; } .kt-calendar-cell { min-height: 3.25rem; } .kt-calendar-chip { width: 0.5rem; height: 0.5rem; padding: 0; border-left: 0; border-radius: 50%; background: var(--kt-event, var(--kt-accent)); font-size: 0; } .kt-calendar-cell { flex-flow: row wrap; align-content: flex-start; } .kt-calendar-number { flex-basis: 100%; } } .kt-calendar-nav h2 { justify-content: center; } /* ---- Yıllık plan: ay şeridi ---- */ .kt-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); } .kt-month { position: relative; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; padding: 0.625rem 0.625rem 0.75rem; border-right: 1px solid var(--kt-border); color: var(--kt-text); text-decoration: none; } .kt-month:last-child { border-right: 0; } .kt-month:hover, .kt-month:focus-visible { background: var(--kt-surface-muted); } .kt-month.active { background: var(--kt-accent-soft); box-shadow: inset 0 -3px 0 var(--kt-accent); } .kt-month-now .kt-month-name { color: var(--kt-accent); } .kt-month-name { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kt-text-muted); } .kt-month-count { font-family: var(--kt-font-mono); font-size: 1.375rem; font-weight: 500; color: var(--kt-heading); } .kt-month-done, .kt-month-cost { overflow: hidden; font-size: 0.6875rem; color: var(--kt-text-muted); white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 991.98px) { .kt-months { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kt-month:nth-child(6) { border-right: 0; } .kt-month:nth-child(-n + 6) { border-bottom: 1px solid var(--kt-border); } } @media (max-width: 575.98px) { .kt-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kt-month:nth-child(3n) { border-right: 0; } .kt-month:nth-child(-n + 9) { border-bottom: 1px solid var(--kt-border); } } /* ---- Raporlar ---- */ .kt-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; } .kt-report-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.75rem; row-gap: 0.25rem; padding: 1rem 1.125rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius); background: var(--kt-surface); color: var(--kt-text); text-decoration: none; } .kt-report-card:hover, .kt-report-card:focus-visible { border-color: var(--kt-accent); background: var(--kt-accent-soft); } .kt-report-card > .bi { grid-row: 1 / span 2; font-size: 1.375rem; color: var(--kt-accent); } .kt-report-name { font-weight: 600; color: var(--kt-heading); } .kt-report-lead { font-size: 0.8125rem; color: var(--kt-text-muted); } .kt-report-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0 1.5rem 0.75rem; list-style: none; font-size: 0.8125rem; color: var(--kt-text-muted); } .kt-event-task { --kt-event: #b4531a; } /* ---- Toplu işlem çubuğu ---- */ .kt-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--kt-border); background: var(--kt-surface-muted); } .kt-bulk-count { font-size: 0.8125rem; font-weight: 600; color: var(--kt-text-muted); margin-right: 0.5rem; } .kt-select-cell { width: 2.5rem; } .kt-col-answer { width: 12rem; } .kt-chip-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } .kt-chip-list li { padding: 0.125rem 0.5rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-surface-muted); font-size: 0.8125rem; } /* ---- Genel arama ---- */ .kt-header-search { position: relative; display: flex; align-items: center; flex: 1 1 18rem; max-width: 26rem; margin: 0 1rem; } .kt-header-search > .bi { position: absolute; left: 0.75rem; color: var(--kt-text-muted); pointer-events: none; } .kt-header-search input { width: 100%; height: 2.375rem; padding: 0 0.75rem 0 2.25rem; border: 1px solid var(--kt-border); border-radius: var(--kt-radius-sm); background: var(--kt-input-bg); color: var(--kt-text); } .kt-header-search input:focus { outline: 0; border-color: var(--kt-accent); box-shadow: 0 0 0 3px var(--kt-focus-ring); } @media (max-width: 767.98px) { .kt-header-search { display: none; } } .kt-search-results { margin: 0.5rem 0 0; padding: 0; list-style: none; } .kt-search-results li { padding: 0.5rem 0; border-top: 1px solid var(--kt-border); } .kt-search-results li:first-child { border-top: 0; } /* ---- Aşama göstergesi (kalite kayıtları) ---- */ .kt-stages { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: kt-stage; } .kt-stages li { position: relative; flex: 1 1 8rem; padding: 0.5rem 0.75rem 0.5rem 2.25rem; border: 1px solid var(--kt-border); border-left-width: 0; background: var(--kt-surface); font-size: 0.8125rem; font-weight: 600; color: var(--kt-text-muted); } .kt-stages li:first-child { border-left-width: 1px; border-radius: var(--kt-radius) 0 0 var(--kt-radius); } .kt-stages li:last-child { border-radius: 0 var(--kt-radius) var(--kt-radius) 0; } .kt-stages li::before { counter-increment: kt-stage; content: counter(kt-stage); position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); font-family: var(--kt-font-mono); color: var(--kt-text-muted); } .kt-stages li.active { background: var(--kt-accent-soft); color: var(--kt-accent); box-shadow: inset 0 -3px 0 var(--kt-accent); } /* ---- Risk ısı haritası ---- */ .kt-heatmap { border-collapse: separate; border-spacing: 3px; } .kt-heatmap th { width: 2.25rem; font-family: var(--kt-font-mono); font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--kt-text-muted); } .kt-heatmap td { width: 2.75rem; height: 2.25rem; border-radius: var(--kt-radius-sm); font-family: var(--kt-font-mono); font-weight: 700; text-align: center; } .kt-heat-low { background: var(--kt-success-soft); color: var(--kt-success); } .kt-heat-medium { background: var(--kt-warning-soft); color: var(--kt-warning); } .kt-heat-high { background: var(--kt-danger-soft); color: var(--kt-danger); } /* ---- Herkese açık anket ---- */ .kt-public { min-height: 100vh; } .kt-public-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--kt-border); background: var(--kt-header-bg); } .kt-public-body { max-width: 46rem; margin: 2rem auto; padding: 0 1rem; } .kt-public-icon { display: block; margin-bottom: 0.5rem; font-size: 2.5rem; color: var(--kt-accent); } .kt-survey { margin: 1rem 0 0; padding-left: 1.25rem; } .kt-survey-question { padding: 1rem 0; border-top: 1px solid var(--kt-border); } .kt-scale-choice { display: flex; gap: 0.5rem; } .kt-scale-choice label { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border: 1px solid var(--kt-border-strong); border-radius: var(--kt-radius-sm); cursor: pointer; } .kt-survey-result { padding: 0.875rem 0; border-top: 1px solid var(--kt-border); } .kt-survey-result:first-of-type { border-top: 0; } .kt-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.25rem 1rem; }