/* ==============================================================
roxcrm — Teknorox ecosystem
Foundation: dark-first operational CRM
Inspired by teknorox-web's design DNA (deep navy + neon lime accent)
============================================================== */
/* Fonts are loaded via in each HTML for speed & Turkish charset support.
If CSS is used standalone, this @import is a fallback: */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap&subset=latin,latin-ext');
/* ───────────────────────────── DARK MODE (primary) ───────────────────────────── */
:root,
[data-theme="dark"] {
/* Surfaces — teknorox navy scale */
--bg: #070b14;
--bg-2: #0b1120;
--surface: #0d1426;
--surface-2: #142035;
--surface-3: #1a2944;
--surface-hi: #1f3050;
/* Ink — cool white to muted */
--ink: #ebebeb;
--ink-2: #c9ccd4;
--ink-3: #9ca3af;
--ink-4: #6b7280;
--ink-5: #4b5563;
--ink-6: #374151;
/* Borders — subtle transparency */
--border: rgba(255, 255, 255, 0.06);
--border-2: rgba(255, 255, 255, 0.10);
--border-3: rgba(255, 255, 255, 0.16);
--border-hover: rgba(153, 213, 26, 0.35);
/* Brand — teknorox neon lime (signature) */
--brand: #99d51a;
--brand-2: #a3e635;
--brand-3: #84cc0e;
--brand-ink: #040404;
--brand-wash: rgba(153, 213, 26, 0.08);
--brand-wash-2: rgba(153, 213, 26, 0.14);
--brand-ring: rgba(153, 213, 26, 0.22);
--brand-glow: rgba(153, 213, 26, 0.45);
/* Module color-coding (teknorox convention) */
--mod-crm: #5b9cff; /* blue — CRM */
--mod-crm-wash: rgba(91, 156, 255, 0.12);
--mod-ec: #99d51a; /* neon — E-commerce */
--mod-ec-wash: rgba(153, 213, 26, 0.12);
--mod-qr: #c084fc; /* purple — QR menu */
--mod-qr-wash: rgba(192, 132, 252, 0.12);
/* Semantic — operational data colors */
--success: #4ade80;
--success-wash: rgba(74, 222, 128, 0.12);
--warn: #facc15;
--warn-wash: rgba(250, 204, 21, 0.12);
--danger: #f87171;
--danger-wash: rgba(248, 113, 113, 0.12);
--info: #60a5fa;
--info-wash: rgba(96, 165, 250, 0.12);
--purple: #c084fc;
--purple-wash: rgba(192, 132, 252, 0.12);
/* Priority — operational colors */
--p-critical: #b91c1c;
--p-urgent: #ef4444;
--p-high: #f97316;
--p-medium: #60a5fa;
--p-low: #6b7280;
/* Legacy aliases */
--paper: var(--bg);
--paper-2: var(--bg-2);
--paper-3: var(--surface-2);
--surface-alt: var(--surface-2);
--line: var(--border);
--line-2: var(--border-2);
--line-3: var(--border-3);
--forest: var(--brand);
--forest-2: var(--brand-2);
--forest-wash: var(--brand-wash);
--forest-ring: var(--brand-ring);
--coral: var(--warn);
--coral-wash: var(--warn-wash);
--accent: var(--brand);
--accent-2: var(--brand-2);
--accent-wash: var(--brand-wash);
--accent-ring: var(--brand-ring);
--amber: var(--warn);
--amber-wash: var(--warn-wash);
--rose: var(--danger);
--rose-wash: var(--danger-wash);
--sage: var(--success);
--sage-wash: var(--success-wash);
--ok: var(--success);
--ok-wash: var(--success-wash);
--sky: var(--info);
--sky-wash: var(--info-wash);
--plum: var(--purple);
--plum-wash: var(--purple-wash);
/* Typography */
--f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--f-mono: var(--f-sans); /* Unified: all UI uses Inter. Real mono only for . */
--f-display: var(--f-sans);
--f-kbd: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--fs-micro: 11px;
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 17px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
--fs-4xl: 38px;
--fs-5xl: 48px;
--fs-6xl: 64px;
--lh-tight: 1.1;
--lh-snug: 1.3;
--lh-normal: 1.5;
/* Radii — soft modern */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 12px;
--r-xl: 16px;
--r-2xl: 20px;
--r-pill: 999px;
/* Shadows — dark-mode tuned with neon option */
--sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-2: 0 4px 10px rgba(0, 0, 0, 0.4),
0 2px 4px rgba(0, 0, 0, 0.25);
--sh-3: 0 12px 28px rgba(0, 0, 0, 0.5),
0 6px 12px rgba(0, 0, 0, 0.3);
--sh-lift: 0 20px 48px rgba(0, 0, 0, 0.6),
0 8px 18px rgba(0, 0, 0, 0.4);
--sh-neon: 0 0 0 1px var(--brand-ring),
0 0 32px rgba(153, 213, 26, 0.15),
0 16px 48px rgba(0, 0, 0, 0.55);
--sh-focus: 0 0 0 3px var(--brand-ring);
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--t-fast: 160ms;
--t-md: 240ms;
--t-slow: 380ms;
/* Spacing */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
--s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;
}
/* ───────────────────────────── LIGHT MODE ───────────────────────────── */
[data-theme="light"] {
--bg: #f5f7fa;
--bg-2: #eef2f7;
--surface: #ffffff;
--surface-2: #f8fafc;
--surface-3: #f1f5f9;
--surface-hi: #ffffff;
--ink: #0f172a;
--ink-2: #1e293b;
--ink-3: #475569;
--ink-4: #64748b;
--ink-5: #94a3b8;
--ink-6: #cbd5e1;
--border: rgba(15, 23, 42, 0.07);
--border-2: rgba(15, 23, 42, 0.12);
--border-3: rgba(15, 23, 42, 0.20);
--border-hover: rgba(132, 204, 22, 0.55);
--brand: #78ba14;
--brand-2: #84cc16;
--brand-3: #65a30d;
--brand-ink: #ffffff; /* white text on green (light mode, user preference) */
--brand-wash: rgba(120, 186, 20, 0.10);
--brand-wash-2: rgba(120, 186, 20, 0.16);
--brand-ring: rgba(120, 186, 20, 0.28);
--brand-glow: rgba(120, 186, 20, 0.55);
--mod-crm: #2563eb;
--mod-crm-wash: rgba(37, 99, 235, 0.10);
--mod-ec: #78ba14;
--mod-ec-wash: rgba(120, 186, 20, 0.10);
--mod-qr: #9333ea;
--mod-qr-wash: rgba(147, 51, 234, 0.10);
--success: #16a34a;
--success-wash: rgba(22, 163, 74, 0.10);
--warn: #f59e0b;
--warn-wash: rgba(245, 158, 11, 0.12);
--danger: #dc2626;
--danger-wash: rgba(220, 38, 38, 0.10);
--info: #2563eb;
--info-wash: rgba(37, 99, 235, 0.10);
--purple: #9333ea;
--purple-wash: rgba(147, 51, 234, 0.10);
--p-critical: #991b1b;
--p-urgent: #dc2626;
--p-high: #f97316;
--p-medium: #2563eb;
--p-low: #64748b;
--sh-1: 0 1px 2px rgba(15, 23, 42, 0.05);
--sh-2: 0 2px 6px rgba(15, 23, 42, 0.06),
0 8px 20px -8px rgba(15, 23, 42, 0.10);
--sh-3: 0 6px 14px rgba(15, 23, 42, 0.07),
0 18px 38px -12px rgba(15, 23, 42, 0.15);
--sh-lift: 0 10px 24px rgba(15, 23, 42, 0.08),
0 28px 56px -16px rgba(15, 23, 42, 0.22);
--sh-neon: 0 0 0 1px var(--brand-ring),
0 0 24px rgba(120, 186, 20, 0.20),
0 14px 40px rgba(15, 23, 42, 0.10);
}
/* ───────────────────────────── RESET ───────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
font-family: var(--f-sans);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--ink-2);
background: var(--bg);
font-weight: 400;
font-feature-settings: "cv11" 1, "ss01" 1;
min-height: 100vh;
transition: background var(--t-md), color var(--t-md);
}
/* Drag sırasında sayfa scroll kilidi — tüm sayfalarda ortak */
body.dnd-active { overflow: hidden !important; touch-action: none !important; }
/* Ambient background — subtle teknorox aura */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(153, 213, 26, 0.05), transparent 55%),
radial-gradient(ellipse 50% 50% at 90% 95%, rgba(91, 156, 255, 0.04), transparent 55%);
}
[data-theme="light"] body::before {
background:
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(120, 186, 20, 0.07), transparent 55%),
radial-gradient(ellipse 50% 50% at 90% 95%, rgba(37, 99, 235, 0.05), transparent 55%);
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; border: none; background: none; outline: none; }
ul, ol { list-style: none; }
hr { border: none; height: 1px; background: var(--border); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-3);
border-radius: var(--r-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--brand);
background-clip: padding-box;
}
::selection { background: var(--brand); color: var(--brand-ink); }
/* ───────────────────────────── TYPOGRAPHY ───────────────────────────── */
.t-5xl { font-size: var(--fs-5xl); line-height: 1.05; letter-spacing: -0.032em; font-weight: 800; color: var(--ink); }
.t-4xl { font-size: var(--fs-4xl); line-height: 1.08; letter-spacing: -0.026em; font-weight: 800; color: var(--ink); }
.t-3xl { font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.022em; font-weight: 700; color: var(--ink); }
.t-2xl { font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.016em; font-weight: 700; color: var(--ink); }
.t-xl { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.012em; font-weight: 700; color: var(--ink); }
.t-lg { font-size: var(--fs-lg); line-height: 1.35; font-weight: 600; color: var(--ink-2); }
.t-md { font-size: var(--fs-md); line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.t-sm { font-size: var(--fs-sm); line-height: 1.45; font-weight: 400; color: var(--ink-2); }
.t-xs { font-size: var(--fs-xs); line-height: 1.4; font-weight: 400; color: var(--ink-3); }
.t-micro { font-size: var(--fs-micro); line-height: 1.4; font-weight: 500; color: var(--ink-3); }
/* Teknorox-style all-caps micro-label */
.eyebrow,
.sect-lbl {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-3);
}
.mono {
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.num-tab { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-4); }
.muted-3 { color: var(--ink-5); }
.text-ink { color: var(--ink); }
.text-brand { color: var(--brand); }
.text-success { color: var(--success); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }
/* Neon text effect — used sparingly */
.neon-text {
color: var(--brand);
text-shadow: 0 0 24px rgba(153, 213, 26, 0.45);
}
/* ───────────────────────────── UTILITIES ───────────────────────────── */
.flex { display: flex; } .inline-flex { display: inline-flex; }
.grid { display: grid; } .block { display: block; } .hidden { display: none; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
.w-full { width: 100%; } .h-full { height: 100%; }
.rule { height: 1px; background: var(--border); width: 100%; }
.rule-2 { height: 1px; background: var(--border-2); }
.rule-v { width: 1px; background: var(--border); align-self: stretch; }
/* Keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes neonPulse {
0%,100% { box-shadow: 0 0 0 0 var(--brand-ring), 0 0 0 0 rgba(153,213,26,0); }
50% { box-shadow: 0 0 0 6px rgba(153,213,26,0), 0 0 24px rgba(153,213,26,0.25); }
}
@keyframes particleRise {
0% { transform: translateY(0) scale(1); opacity: 0; }
20% { opacity: 0.8; }
100% { transform: translateY(-120vh) scale(0.4); opacity: 0; }
}
@keyframes blobDrift {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(40px,-30px) scale(1.1); }
66% { transform: translate(-30px,20px) scale(0.95); }
}
/* ───────────────────────────── Checkbox & Radio (global) ───────────────────────
Yumuşak, brand-renk vurgulu modern tasarım. Visually-hidden switch input'ları
(.rox-toggle input, .switch input) kendi pseudo-element'leriyle çalışır — bu
kurallar onları etkilemez, çünkü onlar opacity:0 + position:absolute ile gizli.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin: 0;
flex-shrink: 0;
display: inline-grid;
place-content: center;
background: var(--surface-2);
border: 1.5px solid var(--border-3);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
color: var(--brand-ink);
vertical-align: middle;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
border-color: var(--brand);
background: var(--surface-3);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(153,213,26,0.25);
border-color: var(--brand);
}
/* Checked state */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--brand);
border-color: var(--brand);
}
/* Checkbox tick — svg tabanlı çizim */
input[type="checkbox"]:checked::before {
content: "";
width: 10px;
height: 10px;
background: no-repeat center / contain
url("data:image/svg+xml;utf8,");
}
/* Radio dot */
input[type="radio"]:checked::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-ink);
}
/* Disabled */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
cursor: not-allowed;
opacity: .5;
}
/* Mevcut switch/toggle bileşenleri pseudo-element ile çalışıyor — bu
kurallar onların gizli input'larını bozmasın diye explicit reset: */
.rox-toggle input[type="checkbox"],
.switch input[type="checkbox"],
.sw input[type="checkbox"] {
-webkit-appearance: auto;
appearance: auto;
width: 0; height: 0;
position: absolute;
opacity: 0;
pointer-events: none;
border: 0;
background: transparent;
}
.rox-toggle input[type="checkbox"]::before,
.switch input[type="checkbox"]::before,
.sw input[type="checkbox"]::before { content: none; }