/* ============================================================ Dark Mode - Ortak tema (tüm layoutlarda kullanılır) Yalnızca renk/arka plan/kenarlık değiştirir; hiçbir düzen (layout) özelliğine dokunmaz. Aktifleşmesi için etiketine "dark-mode" sınıfı eklenir (darkmode.js). ============================================================ */ html.dark-mode { --dm-bg: #12151c; /* sayfa zemini */ --dm-surface: #1b1f2a; /* kart / panel yüzeyi */ --dm-surface-2: #232838; /* input / hover yüzeyi */ --dm-border: #2c3242; /* kenarlıklar */ --dm-text: #e4e6eb; /* ana metin */ --dm-muted: #9aa3b2; /* soluk metin */ --dm-primary: #6d8bff; /* vurgu (mavi) */ } /* --- Genel zemin & metin --- */ html.dark-mode body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } html.dark-mode a { color: var(--dm-primary); } /* Bootstrap koyu/siyah metin yardımcıları -> açık renk */ html.dark-mode .text-dark, html.dark-mode .text-black, html.dark-mode .text-body, html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: var(--dm-text) !important; } html.dark-mode .text-muted, html.dark-mode .text-secondary, html.dark-mode .text-gray-300 { color: var(--dm-muted) !important; } /* --- Header (üst bar) --- */ html.dark-mode .header { background: var(--dm-surface) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.4) !important; border-bottom: 1px solid var(--dm-border); } html.dark-mode .logo span { color: var(--dm-primary) !important; } html.dark-mode .toggle-sidebar-btn { color: var(--dm-text) !important; } /* Header'daki nav-link/profil şeffaf kalsın (bazı sayfalar bare .nav-link{background:#fff} tanımlayıp header profiline sızdırıyor) */ html.dark-mode .header .nav-link, html.dark-mode .header-nav .nav-link, html.dark-mode .header-nav .nav-profile { background: transparent !important; box-shadow: none !important; color: var(--dm-text) !important; } html.dark-mode .header-nav .nav-profile span { color: var(--dm-text) !important; } /* Arama kutusu */ html.dark-mode .search-bar .search-form input { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .search-bar .search-form input:focus { background: var(--dm-surface-2) !important; } html.dark-mode .search-bar .search-form input::placeholder { color: var(--dm-muted) !important; } /* --- Sidebar --- */ html.dark-mode .sidebar { background-color: var(--dm-surface) !important; border-right: 1px solid var(--dm-border) !important; box-shadow: 0 0 20px rgba(0,0,0,0.4) !important; } html.dark-mode .sidebar-nav .nav-link { color: var(--dm-text) !important; background: transparent !important; } html.dark-mode .sidebar-nav .nav-link:hover { background: var(--dm-surface-2) !important; color: var(--dm-primary) !important; } html.dark-mode .sidebar-nav .nav-link:not(.collapsed) { background: rgba(109,139,255,0.12) !important; color: var(--dm-primary) !important; } html.dark-mode .sidebar-nav .nav-heading { color: var(--dm-muted) !important; } html.dark-mode .sidebar-nav .nav-content { border-left-color: var(--dm-border) !important; } html.dark-mode .sidebar-nav .nav-content a { color: var(--dm-muted) !important; } html.dark-mode .sidebar-nav .nav-content a:hover, html.dark-mode .sidebar-nav .nav-content a.active { color: var(--dm-primary) !important; background: var(--dm-surface-2) !important; } /* --- Kartlar / paneller --- */ html.dark-mode .card { background-color: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 0 20px rgba(0,0,0,0.3) !important; color: var(--dm-text) !important; } /* Bootstrap kartı içindeki düz metin/paragraflar açık renk olsun */ html.dark-mode .card-body, html.dark-mode .card-body p, html.dark-mode .card-body .small, html.dark-mode .card-text { color: var(--dm-text) !important; } html.dark-mode .card-title { color: var(--dm-text) !important; } html.dark-mode .card-title span, html.dark-mode .pagetitle h1 { color: var(--dm-muted) !important; } /* --- Tablolar --- */ html.dark-mode .table { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .table > :not(caption) > * > * { background-color: transparent !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .table thead th { color: var(--dm-muted) !important; border-color: var(--dm-border) !important; } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03) !important; color: var(--dm-text) !important; } html.dark-mode .table-hover > tbody > tr:hover > * { background-color: rgba(109,139,255,0.10) !important; color: var(--dm-text) !important; } /* --- Form elemanları --- */ html.dark-mode .form-control, html.dark-mode .form-select, html.dark-mode input[type="text"], html.dark-mode input[type="number"], html.dark-mode input[type="password"], html.dark-mode input[type="email"], html.dark-mode input[type="date"], html.dark-mode textarea { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .form-control::placeholder, html.dark-mode textarea::placeholder { color: var(--dm-muted) !important; } html.dark-mode .form-control:focus, html.dark-mode .form-select:focus { background-color: var(--dm-surface-2) !important; border-color: var(--dm-primary) !important; box-shadow: 0 0 0 3px rgba(109,139,255,0.15) !important; color: var(--dm-text) !important; } html.dark-mode .form-label, html.dark-mode label { color: var(--dm-text) !important; } html.dark-mode .input-group-text { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; } /* --- Dropdown menü --- */ html.dark-mode .dropdown-menu { background-color: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 5px 30px rgba(0,0,0,0.5) !important; } html.dark-mode .dropdown-item { color: var(--dm-text) !important; } html.dark-mode .dropdown-item:hover { background-color: var(--dm-surface-2) !important; color: var(--dm-primary) !important; } html.dark-mode .dropdown-divider { border-color: var(--dm-border) !important; } html.dark-mode .dropdown-header span { color: var(--dm-muted) !important; } /* --- Modal --- */ html.dark-mode .modal-content { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; } html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: var(--dm-border) !important; } html.dark-mode .btn-close { filter: invert(1) grayscale(1) brightness(1.5); } /* --- Genel yüzey yardımcıları --- */ html.dark-mode .bg-white, html.dark-mode .bg-light { background-color: var(--dm-surface) !important; } html.dark-mode hr { border-color: var(--dm-border) !important; } html.dark-mode .border, html.dark-mode .border-top, html.dark-mode .border-bottom, html.dark-mode .border-start, html.dark-mode .border-end { border-color: var(--dm-border) !important; } html.dark-mode .list-group-item { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Pasif sekmeler koyu; aktif sekmenin kendi tasarımı (ör. mor) korunur */ html.dark-mode .nav-tabs .nav-link:not(.active) { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; } html.dark-mode .nav-tabs .nav-link:not(.active):hover { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } /* --- Footer --- */ html.dark-mode .footer { background: var(--dm-surface) !important; color: var(--dm-muted) !important; border-top: 1px solid var(--dm-border); } html.dark-mode .footer .copyright { color: var(--dm-muted) !important; } /* --- _Layout özel bileşenleri --- */ /* Lisans batarya kutusu */ html.dark-mode .phone-battery-wrapper { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } html.dark-mode .battery-shell { border-color: var(--dm-muted) !important; } html.dark-mode .battery-shell::after { background: var(--dm-muted) !important; } /* Select2 (koyu) */ html.dark-mode .select2-container--default .select2-selection--single, html.dark-mode .select2-dropdown, html.dark-mode .select2-search__field { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text) !important; } html.dark-mode .select2-results__option { color: var(--dm-text) !important; background-color: var(--dm-surface) !important; } html.dark-mode .select2-results__option--highlighted { background-color: var(--dm-primary) !important; color: #fff !important; } /* --- Dark mode toggle butonu --- */ .dm-toggle-btn { background: transparent; border: 0; font-size: 1.4rem; line-height: 1; color: #6c757d; cursor: pointer; padding: 6px 10px; } html.dark-mode .dm-toggle-btn { color: #f6c453; } .dm-toggle-btn .bi-sun-fill { display: none; } html.dark-mode .dm-toggle-btn .bi-sun-fill { display: inline; } html.dark-mode .dm-toggle-btn .bi-moon-stars-fill { display: none; } /* ============================================================ SAYFA İÇİ ÖZEL BİLEŞENLER (tüm sayfalarda ortak) Her .cshtml kendi