/* ========================================================================== sfmaps — modern tema (kırmızı / siyah / beyaz) · koyu + açık Kabuk: sabit koyu sol sidebar (hamburger) + yapışkan blur topbar + içerik. Tema, ile değişir. Dış font/CDN yok; ikonlar inline SVG. ========================================================================== */ /* ------------------------------------------------------------- Tokenlar --- */ :root { --accent: #e11d2a; --accent-600: #c8121f; --accent-700: #a50f1a; /* Sidebar her iki temada da koyu */ --side-bg: #17181c; --side-2: #23252d; --side-text: #c9cbd3; --side-muted: #83879a; --sidebar-w: 264px; --sidebar-w-min: 76px; --topbar-h: 64px; --radius: 16px; --bs-primary-rgb: 225, 29, 42; } :root[data-theme="dark"] { --bg: #111317; --card: #1e2023; --card-2: #282a2e; --elev: rgba(30, 32, 38, 0.72); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #e6e7eb; --muted: #9a9db0; --head-bg: #0f1013; --input-bg: #141619; --topbar-bg: rgba(17, 19, 23, 0.72); --accent-text: #ff6a72; --accent-soft: rgba(225, 29, 42, 0.15); --glow: 0 8px 24px rgba(225, 29, 42, 0.30); --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } :root[data-theme="light"] { --bg: #f3f4f6; --card: #ffffff; --card-2: #f7f8fa; --elev: #ffffff; --border: #e5e7eb; --border-strong: #d7dae0; --text: #1b1d21; --muted: #6b7280; --head-bg: #141417; --input-bg: #ffffff; --topbar-bg: rgba(255, 255, 255, 0.82); --accent-text: #c8121f; --accent-soft: #fff5f5; --glow: 0 6px 18px rgba(225, 29, 42, 0.28); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08); } html { font-size: 15px; } @media (min-width: 768px) { html { font-size: 16px; } } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: background .2s, color .2s; } .ikon { display: inline-block; vertical-align: -0.15em; flex: none; } /* --------------------------------------------------------- Kabuk düzeni --- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column; z-index: 1045; transition: width .2s ease, transform .2s ease; } .app-main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; transition: margin-left .2s ease; } body.nav-collapsed .sidebar { width: var(--sidebar-w-min); } body.nav-collapsed .app-main { margin-left: var(--sidebar-w-min); } body.nav-collapsed .side-link .label, body.nav-collapsed .side-group, body.nav-collapsed .brand .name { display: none; } body.nav-collapsed .side-link { justify-content: center; } /* ------------------------------------------------------------- Marka ------ */ .brand { display: flex; align-items: center; gap: .7rem; height: var(--topbar-h); padding: 0 1.1rem; color: #fff; text-decoration: none; flex: none; border-bottom: 1px solid rgba(255, 255, 255, .06); } .brand:hover { color: #fff; } .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-700)); color: #fff; font-weight: 800; box-shadow: var(--glow); flex: none; } /* Hatasız durumda boş kırmızı kutu görünmesin */ .validation-summary-valid { display: none; } .brand .name { line-height: 1; } .brand .name b { display: block; font-weight: 800; letter-spacing: .3px; font-size: 1.1rem; } .brand .name small { color: var(--side-muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; } /* ------------------------------------------------------- Kenar menüsü ------ */ .side-nav { flex: 1; overflow-y: auto; padding: .7rem .6rem 1rem; } .side-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--side-muted); padding: 1rem .85rem .35rem; } .side-link { display: flex; align-items: center; gap: .8rem; padding: .62rem .85rem; margin-bottom: 3px; border-radius: 11px; color: var(--side-text); text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap; transition: background .12s, color .12s, transform .12s; } .side-link:hover { background: var(--side-2); color: #fff; } .side-link:active { transform: translateX(2px); } .side-link.active { background: linear-gradient(90deg, var(--accent), var(--accent-600)); color: #fff; box-shadow: var(--glow); } .side-link .ikon { width: 20px; height: 20px; } /* ----------------------------------------------------------- Üst bar ------- */ .topbar { position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); background: var(--topbar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; } .hamburger, .icon-btn { border: 0; background: transparent; color: var(--text); cursor: pointer; padding: .45rem; border-radius: 10px; display: inline-grid; place-items: center; line-height: 0; position: relative; } .hamburger:hover, .icon-btn:hover { background: var(--card-2); } .page-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -.01em; } .topbar-spacer { flex: 1; } .topbar-user { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--muted); } .topbar-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-700)); color: #fff; font-weight: 700; font-size: .85rem; } /* --------------------------------------------------------- İçerik alanı ---- */ .content { flex: 1; padding: 1.6rem; } .app-footer { padding: .9rem 1.6rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; } /* -------------------------------------------------------- KPI kartları ----- */ .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .95rem; height: 100%; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; text-decoration: none; color: inherit; } a.stat:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; } .stat-top { display: flex; justify-content: space-between; align-items: flex-start; } .stat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); } .stat.amber .stat-ico { background: rgba(240, 165, 0, .14); color: #f0a500; } .stat.green .stat-ico { background: rgba(46, 176, 128, .14); color: #2eb080; } .stat.blue .stat-ico { background: rgba(88, 140, 255, .14); color: #6a9bff; } .stat.red .stat-ico { background: var(--accent-soft); color: var(--accent-text); } .stat-trend { font-size: .7rem; font-weight: 600; padding: .22rem .55rem; border-radius: 8px; background: var(--card-2); color: var(--muted); } .stat-trend.up { color: #2eb080; background: rgba(46, 176, 128, .12); } .stat-trend.warn { color: #f0a500; background: rgba(240, 165, 0, .12); } .stat-label { font-size: .74rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } .stat-value { font-size: 1.65rem; font-weight: 700; margin-top: .12rem; color: var(--text); line-height: 1.1; } /* ------------------------------------------------------- Cam paneller ------ */ .panel { background: var(--elev); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* --------------------------------------------------------- Dropzone -------- */ .dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; cursor: pointer; background: var(--card); transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); } .dropzone .ico-wrap { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin: 0 auto .9rem; transition: transform .15s; } .dropzone:hover .ico-wrap { transform: scale(1.08); } /* ----------------------------------------------------- Bootstrap ezmeleri -- */ .card { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; } .btn { border-radius: 10px; font-weight: 500; } /* Bootstrap 5.1 — buton renkleri doğrudan tanımlı; değişken değil, doğrudan ezilir. */ .btn-primary { color: #fff; background-color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); } .btn-primary:hover, .btn-primary:focus { color: #fff; background-color: var(--accent-600); border-color: var(--accent-600); } .btn-primary:active, .btn-primary:disabled, .btn-primary.disabled { color: #fff; background-color: var(--accent-700); border-color: var(--accent-700); } .btn-outline-primary { color: var(--accent-text); border-color: var(--accent); } .btn-outline-primary:hover, .btn-outline-primary:active { color: #fff; background-color: var(--accent); border-color: var(--accent); } .btn-outline-secondary { color: var(--text); border-color: var(--border-strong); } .btn-outline-secondary:hover, .btn-outline-secondary:active { color: var(--text); background-color: var(--card-2); border-color: var(--border-strong); } .text-primary { color: var(--accent-text) !important; } .bg-primary, .badge.bg-primary { background-color: var(--accent) !important; } .border-primary { border-color: var(--accent) !important; } .nav-pills { gap: .35rem; } .nav-pills .nav-link { color: var(--text); border-radius: 10px; } .nav-pills .nav-link:hover { background: var(--accent-soft); color: var(--accent-text); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--accent); color: #fff; box-shadow: var(--glow); } /* Tablolar */ .table-responsive { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .table { margin-bottom: 0; color: var(--text); --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-hover-color: var(--text); --bs-table-hover-bg: var(--accent-soft); } .table > thead th { background: var(--head-bg); color: #fff; border: 0; padding: .75rem .85rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .table > tbody td { padding: .68rem .85rem; border-color: var(--border); vertical-align: middle; } .table > tbody tr:last-child td { border-bottom: 0; } .card .table-responsive, .card > .table-responsive { border: 0; border-radius: 0; box-shadow: none; } /* Formlar */ .form-control, .form-select { background-color: var(--input-bg); color: var(--text); border-color: var(--border-strong); } .form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(225, 29, 42, .18); } /* Koyu temada select okunu görünür kıl */ :root[data-theme="dark"] .form-select { 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='%23e6e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-control::placeholder { color: var(--muted); opacity: .8; } .form-control:disabled, .form-select:disabled { background-color: var(--card-2); color: var(--muted); border-color: var(--border); opacity: 1; } .input-group-text { background: var(--card-2); color: var(--muted); border-color: var(--border-strong); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(225, 29, 42, .18); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-text { color: var(--muted); } .form-label { color: var(--text); } .btn:focus, .btn:active:focus { box-shadow: 0 0 0 .2rem rgba(225, 29, 42, .25); } .badge { font-weight: 600; } /* Açılır menü / liste / alert — koyu uyum */ .dropdown-menu { background: var(--card); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); } .dropdown-item { color: var(--text); } .dropdown-item:hover, .dropdown-item:focus { background: var(--card-2); color: var(--text); } .dropdown-item-text, .dropdown-header { color: var(--muted); } .list-group-item { background: var(--card); color: var(--text); border-color: var(--border); } .list-group-item-action:hover { background: var(--card-2); color: var(--text); } .list-group-item.active, .list-group-item-action.active { background: var(--accent); border-color: var(--accent); color: #fff; } :root[data-theme="dark"] .text-muted { color: var(--muted) !important; } :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom { border-color: var(--border) !important; } :root[data-theme="dark"] .list-group-item-light { background: var(--card-2); color: var(--text); } :root[data-theme="dark"] .alert-success { background: rgba(46, 176, 128, .12); color: #8ce0b4; border-color: rgba(46, 176, 128, .28); } :root[data-theme="dark"] .alert-info { background: rgba(88, 140, 255, .12); color: #a9c6ff; border-color: rgba(88, 140, 255, .28); } :root[data-theme="dark"] .alert-warning { background: rgba(240, 165, 0, .12); color: #ffd27a; border-color: rgba(240, 165, 0, .28); } :root[data-theme="dark"] .alert-danger { background: rgba(225, 29, 42, .12); color: #ff9a9f; border-color: rgba(225, 29, 42, .28); } :root[data-theme="dark"] .alert-secondary { background: var(--card-2); color: var(--text); border-color: var(--border); } .content a:not(.btn):not(.nav-link):not(.side-link):not(.list-group-item):not(.stat):not(.page-link) { color: var(--accent-text); } .content a:not(.btn):not(.nav-link):not(.side-link):not(.list-group-item):not(.stat):not(.page-link):hover { color: var(--accent-600); } /* ---------------------------------------------------- Mobil (off-canvas) --- */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1044; } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-w); } .app-main { margin-left: 0; } body.nav-open .sidebar { transform: translateX(0); } body.nav-open .sidebar-backdrop { display: block; } body.nav-collapsed .sidebar { width: var(--sidebar-w); } body.nav-collapsed .side-link .label, body.nav-collapsed .side-group, body.nav-collapsed .brand .name { display: initial; } }