/* StokMe Dark Mode Override */
/* html.dark class applied to toggles dark mode */
/* ===== ROOT VARIABLES ===== */
:root {
--sm-bg: #f9fafb;
--sm-bg-alt: #ffffff;
--sm-bg-soft: #f1f5f9;
--sm-text: #0f172a;
--sm-text-soft: #64748b;
--sm-border: #e2e8f0;
--sm-nav-bg: rgba(255,255,255,0.8);
--sm-card-bg: #ffffff;
--sm-input-bg: #f8fafc;
--sm-input-border: #e2e8f0;
}
html.dark {
--sm-bg: #0b1120;
--sm-bg-alt: #1e293b;
--sm-bg-soft: #1e293b;
--sm-text: #e2e8f0;
--sm-text-soft: #94a3b8;
--sm-border: #334155;
--sm-nav-bg: rgba(15,23,42,0.85);
--sm-card-bg: #1e293b;
--sm-input-bg: #0f172a;
--sm-input-border: #334155;
}
/* ===== BODY ===== */
html.dark body {
background-color: var(--sm-bg) !important;
color: var(--sm-text) !important;
}
/* ===== NAVBAR ===== */
html.dark nav.sticky,
html.dark nav[class*="sticky"] {
background: var(--sm-nav-bg) !important;
border-bottom-color: var(--sm-border) !important;
}
html.dark nav a.text-slate-600,
html.dark nav a.text-slate-700 {
color: #cbd5e1 !important;
}
html.dark nav a.text-slate-600:hover,
html.dark nav a.text-slate-700:hover {
color: var(--sm-text) !important;
}
html.dark nav button[class*="text-slate"] {
color: #cbd5e1 !important;
}
html.dark nav button[class*="hover:text-slate-900"]:hover {
color: #fff !important;
}
html.dark nav button[class*="hover:bg-slate-100"]:hover {
background: rgba(51,65,85,0.5) !important;
}
html.dark nav .bg-white\/80,
html.dark nav [class*="bg-white\/"] {
background: rgba(30,41,59,0.8) !important;
border-color: var(--sm-border) !important;
color: #cbd5e1 !important;
}
/* ===== MOBILE MENU ===== */
html.dark #mobile-menu {
background: var(--sm-bg-alt) !important;
border-top-color: var(--sm-border) !important;
}
html.dark #mobile-menu a.text-slate-600,
html.dark #mobile-menu span.text-slate-900,
html.dark #mobile-menu span.text-slate-500 {
color: #cbd5e1 !important;
}
html.dark #mobile-menu .bg-slate-50,
html.dark #mobile-menu [class*="bg-slate-50"] {
background: var(--sm-bg-soft) !important;
}
html.dark #mobile-menu .bg-white {
background: var(--sm-bg-alt) !important;
border-color: var(--sm-border) !important;
}
/* ===== PROFILE DROPDOWN ===== */
html.dark .group:hover .absolute.right-0,
html.dark nav .absolute.right-0.w-64 {
background: var(--sm-bg-alt) !important;
border-color: var(--sm-border) !important;
}
html.dark nav .bg-slate-50\/50 {
background: rgba(30,41,59,0.5) !important;
border-bottom-color: var(--sm-border) !important;
}
html.dark nav .absolute.right-0 a.text-slate-600 {
color: #cbd5e1 !important;
}
html.dark nav .absolute.right-0 .bg-slate-100 {
background: rgba(51,65,85,0.5) !important;
}
html.dark nav .absolute.right-0 h4,
html.dark nav .absolute.right-0 span {
color: #e2e8f0 !important;
}
/* ===== CARDS / CONTAINERS ===== */
html.dark .bg-white:not(nav *):not(.absolute *):not(.group *) {
background: var(--sm-card-bg) !important;
}
html.dark main .bg-white,
html.dark main [class*="bg-white "] {
background: var(--sm-card-bg) !important;
border-color: var(--sm-border) !important;
}
html.dark main .border-slate-200,
html.dark main .border-slate-100 {
border-color: var(--sm-border) !important;
}
html.dark main .bg-slate-50,
html.dark main [class*="bg-slate-50"] {
background: var(--sm-bg-soft) !important;
}
html.dark main .bg-slate-100 {
background: #334155 !important;
}
/* ===== TEXT COLORS ===== */
html.dark main h1,
html.dark main h2,
html.dark main h3,
html.dark main h4,
html.dark main h5,
html.dark main h6,
html.dark main .text-slate-900 {
color: #f1f5f9 !important;
}
html.dark main .text-slate-800,
html.dark main .text-slate-700 {
color: #e2e8f0 !important;
}
html.dark main .text-slate-600,
html.dark main .text-slate-500 {
color: #94a3b8 !important;
}
html.dark main .text-slate-400 {
color: #64748b !important;
}
/* ===== INPUTS / FORMS ===== */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark textarea,
html.dark select {
background: var(--sm-input-bg) !important;
border-color: var(--sm-input-border) !important;
color: var(--sm-text) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #64748b !important;
}
html.dark input[class*="bg-slate-50"],
html.dark textarea[class*="bg-slate-50"] {
background: var(--sm-input-bg) !important;
border-color: var(--sm-input-border) !important;
}
html.dark input[class*="border-slate-200"],
html.dark textarea[class*="border-slate-200"] {
border-color: var(--sm-input-border) !important;
}
html.dark input[class*="focus:border-blue-500"]:focus,
html.dark textarea[class*="focus:border-blue-500"]:focus {
border-color: #3b82f6 !important;
}
/* ===== LANDING / GUEST PAGES ===== */
html.dark main .bg-slate-200 {
background: #334155 !important;
}
/* ===== DASHBOARD STAT CARDS ===== */
html.dark main [class*="bg-white rounded-2xl"] [class*="bg-blue-50"],
html.dark main [class*="bg-white rounded-2xl"] [class*="bg-green-50"],
html.dark main [class*="bg-white rounded-2xl"] [class*="bg-orange-50"],
html.dark main [class*="bg-white rounded-2xl"] [class*="bg-purple-50"] {
opacity: 0.8;
}
/* ===== TABLES ===== */
html.dark table thead th {
background: var(--sm-bg-soft) !important;
color: #94a3b8 !important;
}
html.dark table tbody td {
border-color: var(--sm-border) !important;
}
html.dark table tbody tr {
background: var(--sm-card-bg) !important;
}
html.dark table tbody tr:hover {
background: var(--sm-bg-soft) !important;
}
/* ===== DATA TABLES OVERRIDE ===== */
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
color: #94a3b8 !important;
background: var(--sm-bg-soft) !important;
border-color: var(--sm-border) !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
color: #fff !important;
background: #2563eb !important;
border-color: #2563eb !important;
}
/* ===== MODALS / POPUPS ===== */
html.dark .fixed [class*="bg-white"] {
background: var(--sm-bg-alt) !important;
border-color: var(--sm-border) !important;
}
html.dark #lang-modal .bg-white {
background: var(--sm-bg-alt) !important;
}
/* ===== DISCOUNT POPUP (Özel Teklif) ===== */
html.dark #discount-popup .bg-white {
background: var(--sm-bg-alt) !important;
}
html.dark #discount-popup h3.text-slate-900,
html.dark #discount-popup h3 {
color: #f1f5f9 !important;
}
html.dark #discount-popup p.text-slate-600,
html.dark #discount-popup p {
color: #cbd5e1 !important;
}
html.dark #discount-popup button.text-slate-400 {
color: #64748b !important;
}
html.dark #discount-popup button.text-slate-400:hover {
color: #94a3b8 !important;
}
html.dark #discount-popup .bg-orange-100 {
background: rgba(249,115,22,0.15) !important;
}
html.dark #discount-popup .text-orange-500 {
color: #fb923c !important;
}
html.dark #discount-popup .text-orange-400 {
color: #fdba74 !important;
}
html.dark #discount-popup a.text-orange-500 {
color: #fb923c !important;
}
html.dark #discount-popup a.text-orange-500:hover {
color: #fdba74 !important;
}
/* ===== LANGUAGE MODAL TEXT ===== */
html.dark #lang-modal h3 {
color: #f1f5f9 !important;
}
html.dark #lang-modal button.text-slate-400 {
color: #64748b !important;
}
html.dark #lang-modal button.lang-option {
border-color: var(--sm-border) !important;
}
html.dark #lang-modal button.lang-option:hover {
background: var(--sm-bg-soft) !important;
}
html.dark #lang-modal .text-slate-400 {
color: #64748b !important;
}
/* ===== ALL REMAINING TEXT IN DARK MODE ===== */
html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }
html.dark .text-slate-300 { color: #cbd5e1 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #64748b !important; }
/* ===== ALL BG-WHITE ELEMENTS IN DARK MODE ===== */
html.dark .bg-white:not(nav):not(footer *) {
background: var(--sm-card-bg) !important;
}
/* ===== BORDER COLORS IN DARK MODE ===== */
html.dark .border-slate-200 { border-color: var(--sm-border) !important; }
html.dark .border-slate-100 { border-color: #334155 !important; }
html.dark .border-slate-300 { border-color: #475569 !important; }
/* ===== FOOTER ===== */
html.dark footer {
background: #020617 !important;
}
html.dark footer h4,
html.dark footer span,
html.dark footer p,
html.dark footer a {
color: #94a3b8 !important;
}
html.dark footer a:hover {
color: #3b82f6 !important;
}
html.dark footer .bg-slate-800 {
background: #1e293b !important;
}
/* ===== SCROLLBAR ===== */
html.dark {
scrollbar-color: #334155 #0b1120;
}
html.dark ::-webkit-scrollbar {
width: 10px;
}
html.dark ::-webkit-scrollbar-track {
background: #0b1120;
}
html.dark ::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 5px;
}
/* ===== THEME TOGGLE BUTTON ===== */
.sm-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid var(--sm-border);
background: var(--sm-bg-alt);
color: var(--sm-text);
cursor: pointer;
transition: all 0.25s ease;
flex-shrink: 0;
}
.sm-theme-toggle:hover {
border-color: #2563eb;
color: #2563eb;
}
.sm-theme-toggle svg {
width: 18px;
height: 18px;
}
html:not(.dark) .sm-theme-toggle .sm-sun { display: none; }
html.dark .sm-theme-toggle .sm-moon { display: none; }
/* ===== WHATSAPP BUTTON ===== */
html.dark a[href*="wa.me"] span.bg-slate-900 {
background: #1e293b !important;
color: #e2e8f0 !important;
}
/* ===== FAQ SECTION ===== */
html.dark section#faq,
html.dark .bg-slate-50.section,
html.dark section[class*="bg-slate-50"] {
background: var(--sm-bg) !important;
}
html.dark section#faq .bg-white,
html.dark section[class*="bg-slate-50"] .bg-white {
background: var(--sm-card-bg) !important;
border-color: var(--sm-border) !important;
}