/* Vexel — ziyaretçi sitesi (açık / koyu) */
html { color-scheme: light dark; }

.mesh-bg {
	background-color: #070d22;
	background-image:
		radial-gradient(at 20% 20%, rgba(20, 106, 253, 0.30) 0, transparent 50%),
		radial-gradient(at 80% 10%, rgba(108, 51, 244, 0.25) 0, transparent 45%),
		radial-gradient(at 50% 80%, rgba(34, 211, 238, 0.10) 0, transparent 50%);
}
.glass {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
/* İç sayfa başlığı — sabit header altında, kompakt */
.front-page-head {
	padding-top: 4rem; /* h-16 header */
	background: transparent;
}
html.dark .front-page-head {
	background: linear-gradient(180deg, rgba(21, 94, 232, 0.06) 0%, transparent 100%);
}
html:not(.dark) .front-page-head {
	background: linear-gradient(180deg, rgba(21, 94, 232, 0.04) 0%, transparent 70%);
}
.faq-item[open] summary { color: #8fb5fe; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

/* Koyu (varsayılan) */
html.dark body.front-site {
	--front-bg: #070d22;
	--front-surface: rgba(255, 255, 255, 0.04);
	--front-border: rgba(255, 255, 255, 0.08);
	--front-header-border: rgba(255, 255, 255, 0.05);
}
html.dark body.front-site {
	background-color: var(--front-bg);
	color: #cbd5e1;
}

/* Açık — yumuşak lavanta-gri palet */
html:not(.dark) body.front-site {
	--front-bg: #f1f4fa;
	--front-bg-section: #eaeff8;
	--front-surface: rgba(255, 255, 255, 0.72);
	--front-surface-solid: #f8fafd;
	--front-border: rgba(80, 110, 180, 0.14);
	--front-header-border: rgba(80, 110, 180, 0.12);
	--front-text: #414b66;
	--front-text-strong: #2c3552;
	--front-muted: #68748f;
	background-color: var(--front-bg);
	color: var(--front-muted);
}
html:not(.dark) .mesh-bg {
	background-color: #f3f6fc;
	background-image:
		radial-gradient(at 18% 22%, rgba(20, 106, 253, 0.07) 0, transparent 55%),
		radial-gradient(at 82% 12%, rgba(108, 51, 244, 0.05) 0, transparent 50%),
		radial-gradient(at 48% 88%, rgba(99, 102, 241, 0.04) 0, transparent 52%);
}
html:not(.dark) .glass {
	background: var(--front-surface) !important;
	border: 1px solid var(--front-border) !important;
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 16px -4px rgba(40, 65, 130, 0.07);
}

html:not(.dark) body.front-site .text-white {
	color: var(--front-text-strong) !important;
}
html:not(.dark) body.front-site .text-slate-200 {
	color: var(--front-text) !important;
}
html:not(.dark) body.front-site .text-slate-300 {
	color: var(--front-text) !important;
}
html:not(.dark) body.front-site .text-slate-400,
html:not(.dark) body.front-site .text-slate-500,
html:not(.dark) body.front-site .text-slate-600 {
	color: var(--front-muted) !important;
}
html:not(.dark) body.front-site .text-vexel-300,
html:not(.dark) body.front-site .text-vexel-400 {
	color: #3f63d6 !important;
}
html:not(.dark) body.front-site .text-emerald-300,
html:not(.dark) body.front-site .text-emerald-400 {
	color: #3d9a7a !important;
}
html:not(.dark) body.front-site .text-pink-300 {
	color: #c45d8a !important;
}
html:not(.dark) body.front-site .text-purple-300 {
	color: #7e6fd0 !important;
}

html:not(.dark) body.front-site [class*="bg-white/"] {
	background-color: rgba(255, 255, 255, 0.45) !important;
}
html:not(.dark) body.front-site [class*="border-white/"] {
	border-color: var(--front-border) !important;
}
html:not(.dark) body.front-site .hover\:bg-white\/5:hover,
html:not(.dark) body.front-site .hover\:text-white:hover {
	background-color: rgba(255, 255, 255, 0.55) !important;
	color: var(--front-text-strong) !important;
}
html:not(.dark) body.front-site .bg-slate-950,
html:not(.dark) body.front-site .bg-slate-950\/80,
html:not(.dark) body.front-site .bg-slate-950\/90 {
	background-color: var(--front-bg-section) !important;
}
html:not(.dark) body.front-site .border-white\/5,
html:not(.dark) body.front-site .border-white\/10 {
	border-color: var(--front-border) !important;
}
html:not(.dark) body.front-site .bg-black\/20 {
	background-color: rgba(255, 255, 255, 0.35) !important;
}
html:not(.dark) body.front-site .divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
	border-color: var(--front-border) !important;
}

html:not(.dark) body.front-site header.glass,
html:not(.dark) body.front-site #front-mobile-menu {
	background: rgba(243, 246, 252, 0.8) !important;
	border-color: var(--front-header-border) !important;
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(80, 110, 180, 0.06);
}

html:not(.dark) body.front-site .bg-vexel-600,
html:not(.dark) body.front-site .bg-vexel-600\/10,
html:not(.dark) body.front-site .bg-vexel-600\/20,
html:not(.dark) body.front-site .bg-vexel-600\/30,
html:not(.dark) body.front-site .from-vexel-600,
html:not(.dark) body.front-site .to-fuchsia-600 {
	color: #fff !important;
}
html:not(.dark) body.front-site a.bg-white.text-vexel-950,
html:not(.dark) body.front-site .bg-white.text-vexel-950 {
	color: #3a4460 !important;
	background-color: rgba(255, 255, 255, 0.85) !important;
	border: 1px solid var(--front-border);
	box-shadow: 0 2px 12px -4px rgba(40, 65, 130, 0.1);
}
html:not(.dark) body.front-site button.border-white\/15,
html:not(.dark) body.front-site a.border-white\/15,
html:not(.dark) body.front-site .border-white\/15 {
	border-color: var(--front-border) !important;
	background-color: rgba(255, 255, 255, 0.35) !important;
	color: var(--front-text) !important;
}
html:not(.dark) body.front-site .bg-white\/10 {
	background-color: rgba(255, 255, 255, 0.5) !important;
	color: var(--front-text) !important;
}

html:not(.dark) body.front-site .text-vexel-600\/40 {
	color: rgba(63, 99, 214, 0.35) !important;
}

/* Vexel mor vurgular — açık modda daha pastel */
html:not(.dark) body.front-site .bg-vexel-600\/10 {
	background-color: rgba(21, 94, 232, 0.07) !important;
}
html:not(.dark) body.front-site .bg-vexel-600\/20 {
	background-color: rgba(21, 94, 232, 0.1) !important;
}
html:not(.dark) body.front-site .bg-vexel-600\/30,
html:not(.dark) body.front-site .border-vexel-500\/30 {
	border-color: rgba(21, 94, 232, 0.18) !important;
}
html:not(.dark) body.front-site .border-vexel-500\/20,
html:not(.dark) body.front-site .border-vexel-500\/40 {
	border-color: rgba(21, 94, 232, 0.15) !important;
}
html:not(.dark) body.front-site .ring-vexel-500\/30 {
	--tw-ring-color: rgba(21, 94, 232, 0.2) !important;
}
html:not(.dark) body.front-site .faq-item[open] summary {
	color: #3f63d6 !important;
}

/* Header — navigasyon & hover */
.front-nav-link {
	transition: color 0.15s ease, background-color 0.15s ease;
}
html.dark .front-site header .front-nav-link:hover,
html.dark .front-site header .front-nav-link:focus-visible {
	color: #f1f5f9;
	background: rgba(255, 255, 255, 0.08);
}
html:not(.dark) .front-site header .front-nav-link {
	color: var(--front-muted);
}
html:not(.dark) .front-site header .front-nav-link:hover,
html:not(.dark) .front-site header .front-nav-link:focus-visible {
	color: var(--front-text-strong);
	background: rgba(255, 255, 255, 0.55);
}
html:not(.dark) .front-site header .front-header-brand:hover span:last-child {
	color: #1149c2 !important;
}
html.dark .front-site header .front-header-brand:hover span:last-child {
	color: #8fb5fe !important;
}
html:not(.dark) .front-site header .front-icon-btn:hover {
	background: rgba(255, 255, 255, 0.5);
	color: var(--front-text-strong);
}
html.dark .front-site header .front-icon-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #f1f5f9;
}
html:not(.dark) .front-site #front-mobile-menu .front-nav-link:hover {
	background: rgba(255, 255, 255, 0.6);
	color: var(--front-text-strong);
}

/* Tema düğmesi */
.front-theme-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	color: #94a3b8;
	transition: background 0.2s, color 0.2s;
}
.front-theme-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #f1f5f9;
}
html:not(.dark) body.front-site .front-theme-btn {
	color: var(--front-muted);
}
html:not(.dark) body.front-site .front-theme-btn:hover {
	background: rgba(255, 255, 255, 0.5);
	color: var(--front-text-strong);
}

/* Canlı demo talep modalı — front-site uyumlu */
#demo-request-modal .modal-panel {
	max-width: 26rem;
	color: #e2e8f0;
}
#demo-request-modal .front-demo-form label {
	display: block;
}
#demo-request-modal .vexel-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
html:not(.dark) #demo-request-modal .modal-panel {
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid var(--front-border) !important;
	color: var(--front-text-strong);
	backdrop-filter: blur(14px);
}
html:not(.dark) #demo-request-modal .modal-panel .text-white {
	color: var(--front-text-strong) !important;
}
html:not(.dark) #demo-request-modal .modal-panel .text-slate-400,
html:not(.dark) #demo-request-modal .modal-panel .text-slate-500,
html:not(.dark) #demo-request-modal .modal-panel .text-slate-600 {
	color: var(--front-muted) !important;
}
html:not(.dark) #demo-request-modal .modal-panel .vexel-input {
	background: rgba(255, 255, 255, 0.85) !important;
	border-color: var(--front-border) !important;
	color: var(--front-text-strong) !important;
}
html:not(.dark) #demo-request-modal .modal-panel button[data-demo-close] {
	border-color: var(--front-border) !important;
	background: rgba(255, 255, 255, 0.5) !important;
	color: var(--front-muted) !important;
}

/* Auth — giriş / kayıt formları */
body.front-site .vexel-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: #f1f5f9;
	transition: border-color 0.15s, box-shadow 0.15s;
}
body.front-site .vexel-input::placeholder {
	color: #64748b;
}
body.front-site .vexel-input:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(21, 94, 232, 0.35);
	border-color: rgba(21, 94, 232, 0.45);
}
html:not(.dark) body.front-site .vexel-input {
	background: rgba(255, 255, 255, 0.72);
	border-color: var(--front-border);
	color: var(--front-text-strong);
}
html:not(.dark) body.front-site .vexel-input::placeholder {
	color: #a2abc0;
}
html:not(.dark) body.front-site .front-auth-check {
	border-color: var(--front-border);
	background: rgba(255, 255, 255, 0.5);
}
html:not(.dark) body.front-site .step-pending {
	background: rgba(255, 255, 255, 0.5);
	color: var(--front-muted);
	border-color: var(--front-border);
}
html:not(.dark) body.front-site .step-active {
	background: #155ee8;
	color: #fff;
	border-color: #2e72f8;
}
html:not(.dark) body.front-site .step-done {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
	border-color: rgba(16, 185, 129, 0.25);
}
html.dark body.front-site .step-pending {
	background: rgba(255, 255, 255, 0.05);
	color: #64748b;
	border-color: rgba(255, 255, 255, 0.1);
}
html.dark body.front-site .step-active {
	background: #155ee8;
	color: #fff;
	border-color: #2e72f8;
}
html.dark body.front-site .step-done {
	background: rgba(16, 185, 129, 0.15);
	color: #6ee7b7;
	border-color: rgba(16, 185, 129, 0.3);
}
html:not(.dark) body.front-site .front-header-brand:hover span:last-child {
	color: #1149c2 !important;
}
html:not(.dark) body.front-site #btn-prev {
	border-color: var(--front-border) !important;
	color: var(--front-muted) !important;
}
html:not(.dark) body.front-site #btn-prev:hover {
	background: rgba(255, 255, 255, 0.55) !important;
	color: var(--front-text-strong) !important;
}

/* Kayıt (onboarding) — açık mod */
html:not(.dark) body.front-site .front-step-line {
	background-color: var(--front-border) !important;
}
html:not(.dark) body.front-site .front-dropzone {
	border-color: var(--front-border) !important;
	background: rgba(255, 255, 255, 0.35);
}
html:not(.dark) body.front-site .front-dropzone:hover {
	border-color: rgba(21, 94, 232, 0.35) !important;
	background: rgba(255, 255, 255, 0.55);
}
html:not(.dark) body.front-site .front-onboarding a.text-vexel-400:hover {
	color: #1149c2 !important;
}
html:not(.dark) body.front-site #analyze-tasks .text-slate-600 {
	color: #b3bccd !important;
}

/* Yasal metin modalları */
.legal-modal .modal-panel {
	max-width: 42rem;
	width: 100%;
}
.legal-modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(21, 94, 232, 0.35) transparent;
}
.legal-modal-body::-webkit-scrollbar {
	width: 6px;
}
.legal-modal-body::-webkit-scrollbar-thumb {
	background: rgba(21, 94, 232, 0.35);
	border-radius: 3px;
}
html:not(.dark) .legal-modal .modal-panel {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--front-border);
}
html:not(.dark) .legal-modal .modal-panel h2,
html:not(.dark) .legal-modal .modal-panel h3 {
	color: var(--front-text-strong);
}
html:not(.dark) .legal-modal .modal-panel .legal-modal-body {
	color: var(--front-muted);
}
html:not(.dark) .legal-modal .modal-panel .legal-modal-body strong {
	color: var(--front-text-strong);
}