/* ============================================================
   Commento — Kurumsal Renk Paleti (Mavi · Sarı · Lacivert)
   Palette: #4064c9 · #3550a7 · #e8cb73 · #393e4a · #ebecfe
   Strategy: header sade beyaz, footer koyu lacivert,
             içerik (hero / sections / cta / cards) kurumsal palette.
   Usage: Load AFTER commento.css.
   ============================================================ */

:root {
	--cmto-primary: #4064c9;
	--cmto-primary-dark: #3550a7;
	--cmto-secondary: #3550a7;
	--cmto-accent: #e8cb73;
	--cmto-accent-dark: #b8932f;
	--cmto-success: #10B981;
	--cmto-warning: #F59E0B;
	--cmto-dark: #393e4a;
	--cmto-dark-soft: #2e3340;
	--cmto-text: #393e4a;
	--cmto-text-light: #6b7280;
	--cmto-bg-light: #f5f7ff;
	--cmto-bg-subtle: #eef1fc;
	--cmto-brand-soft: #ebecfe;
	--cmto-surface-dark: #1a2547;
	--cmto-surface-dark-soft: #243056;
	--cmto-border: #dfe3f1;
	--cmto-brand-bg: #4064c9;
	--cmto-brand-bg-strong: #3550a7;
	--cmto-gradient: linear-gradient(135deg, #4064c9 0%, #3550a7 100%);
	--cmto-gradient-dark: linear-gradient(135deg, #3550a7 0%, #2a4189 100%);
	--themecolor: #4064c9;
}

body {
	background-color: #f5f7ff !important;
	color: var(--cmto-text);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--cmto-dark);
}

/* ----- HEADER (sade beyaz, kurumsal aksent) ----- */
#header.commento-header,
#header.commento-header .header-wrap-clone {
	background-color: #ffffff !important;
	border: none !important;
}

#header.commento-header:not(.sticky-header) #header-wrap {
	background-color: #ffffff !important;
	border-bottom: 1px solid var(--cmto-border) !important;
	box-shadow: 0 1px 0 rgba(57, 62, 74, 0.04);
	transition: background-color 0s !important;
}

#header.commento-header.sticky-header #header-wrap {
	background: rgba(255, 255, 255, 0.96) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 2px 12px rgba(57, 62, 74, 0.08) !important;
}

#header.commento-header #logo a {
	color: var(--cmto-dark) !important;
}

#header.commento-header .menu-container > .menu-item > .menu-link {
	color: var(--cmto-dark) !important;
}

#header.commento-header .menu-container > .menu-item:hover > .menu-link,
#header.commento-header .menu-container > .menu-item.current > .menu-link {
	color: var(--cmto-primary) !important;
}

#header.commento-header .cmto-btn-primary {
	background: var(--cmto-primary) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(64, 100, 201, 0.32) !important;
}

#header.commento-header .cmto-btn-primary:hover {
	background: var(--cmto-primary-dark) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(64, 100, 201, 0.42) !important;
}

#header.commento-header .cmto-btn-outline {
	background: transparent !important;
	color: var(--cmto-primary) !important;
	border: 1.5px solid var(--cmto-primary) !important;
}

#header.commento-header .cmto-btn-outline:hover {
	background: var(--cmto-primary) !important;
	color: #ffffff !important;
}

#header.commento-header .cmto-lang-btn {
	color: var(--cmto-dark) !important;
	background: var(--cmto-bg-light) !important;
	border: 1px solid var(--cmto-border) !important;
}

#header.commento-header .cmto-lang-btn:hover {
	background: var(--cmto-brand-soft) !important;
	border-color: var(--cmto-primary) !important;
	color: var(--cmto-primary) !important;
}

#header.commento-header #primary-menu-trigger .svg-trigger path {
	stroke: var(--cmto-dark) !important;
}

/* ----- HEADER LOGO -----
   1) commento.css'in brightness/invert filter'ını iptal et — logo zaten kurumsal mavi
   2) Tüm ekranlarda full logo (yazı dahil) göster — eski "mark-only" mobil
      varyantı (geniş viewBox'lı çift-C SVG) kötü görünüyordu, sadeleştirildi
   3) Mobilde logo yüksekliğini düşür ki header taşmasın */
#header.commento-header:not(.sticky-header) .cmto-logo-img,
#header.commento-header.sticky-header .cmto-logo-img,
#header.commento-header .cmto-logo-img {
	filter: none !important;
}

/* Mobile: logo yüksekliği daha küçük, gölge yumuşak */
@media (max-width: 575.98px) {
	#header.commento-header #logo a img.cmto-logo-img,
	#header.commento-header .cmto-logo-img,
	.header-size-md #header-wrap #logo img.cmto-logo-img {
		height: 32px !important;
		max-width: 160px;
	}
}

/* Çok dar ekranlar (eski telefonlar) için ekstra koruma */
@media (max-width: 360px) {
	#header.commento-header #logo a img.cmto-logo-img,
	#header.commento-header .cmto-logo-img,
	.header-size-md #header-wrap #logo img.cmto-logo-img {
		height: 28px !important;
		max-width: 140px;
	}
}

/* ----- HERO (mavi gradient) ----- */
.cmto-hero .slider-inner,
section.cmto-hero .slider-inner {
	background: linear-gradient(135deg, var(--cmto-brand-bg) 0%, var(--cmto-brand-bg-strong) 100%) !important;
	background-image: linear-gradient(135deg, var(--cmto-brand-bg) 0%, var(--cmto-brand-bg-strong) 100%),
		radial-gradient(ellipse at 80% 0%, rgba(232, 203, 115, 0.18) 0%, transparent 55%) !important;
}

.cmto-hero h1,
.cmto-hero h1 * {
	color: #ffffff !important;
}

.cmto-hero .gradient-text {
	background: linear-gradient(135deg, #ffffff 0%, var(--cmto-accent) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.cmto-hero .hero-desc,
.cmto-hero p {
	color: rgba(255, 255, 255, 0.85) !important;
}

.cmto-hero-badge {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.cmto-hero-glow.glow-1 {
	background: var(--cmto-accent) !important;
	opacity: 0.32 !important;
}
.cmto-hero-glow.glow-2 {
	background: var(--cmto-primary-dark) !important;
	opacity: 0.4 !important;
}

/* ----- PAGE HEADER (mavi gradient) ----- */
.cmto-page-header {
	background: linear-gradient(135deg, var(--cmto-brand-bg) 0%, var(--cmto-brand-bg-strong) 100%) !important;
}

.cmto-page-header::before {
	background: radial-gradient(ellipse at 80% 50%, rgba(232, 203, 115, 0.18) 0%, transparent 55%) !important;
}

.cmto-page-header h1 {
	color: #ffffff !important;
}

.cmto-page-header p {
	color: rgba(255, 255, 255, 0.85) !important;
}

.cmto-page-header .breadcrumb a {
	color: rgba(255, 255, 255, 0.75) !important;
}

.cmto-page-header .breadcrumb span {
	color: rgba(255, 255, 255, 0.5) !important;
}

/* ----- BUTTONS ----- */
.cmto-btn-primary {
	background: var(--cmto-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(64, 100, 201, 0.32) !important;
}
.cmto-btn-primary:hover {
	background: var(--cmto-primary-dark) !important;
	box-shadow: 0 6px 20px rgba(64, 100, 201, 0.42) !important;
}

.cmto-btn-secondary {
	background: var(--cmto-brand-soft) !important;
	color: var(--cmto-primary-dark) !important;
	border: 1px solid var(--cmto-border) !important;
}
.cmto-btn-secondary:hover {
	background: var(--cmto-bg-subtle) !important;
	color: var(--cmto-primary-dark) !important;
}

.cmto-btn-gradient {
	background: var(--cmto-gradient) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(64, 100, 201, 0.32) !important;
}
.cmto-btn-gradient:hover {
	background: var(--cmto-gradient-dark) !important;
	box-shadow: 0 6px 20px rgba(64, 100, 201, 0.42) !important;
}

.cmto-btn-outline {
	background: transparent !important;
	color: var(--cmto-primary) !important;
	border: 1.5px solid var(--cmto-primary) !important;
}
.cmto-btn-outline:hover {
	background: var(--cmto-primary) !important;
	color: #ffffff !important;
}

.cmto-btn-lg {
	padding: 12px 26px !important;
	font-size: 14px !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}

/* ----- SECTIONS ----- */
.cmto-section {
	background-color: #ffffff;
}

.cmto-section.cmto-section-light,
.cmto-section.cmto-section-sm {
	background-color: var(--cmto-bg-light) !important;
}

/* Koyu bölüm — footer ile uyumlu kurumsal lacivert. Bu bölüm içindeki kartlar
   ve metinler beyaz tonlarla kontrast oluşturur. */
.cmto-section.cmto-section-dark {
	background: linear-gradient(160deg, var(--cmto-surface-dark) 0%, var(--cmto-surface-dark-soft) 100%) !important;
	background-color: var(--cmto-surface-dark) !important;
	color: rgba(255, 255, 255, 0.78) !important;
}

.cmto-section.cmto-section-dark .cmto-section-header h2,
.cmto-section.cmto-section-dark .cmto-section-header h2 * {
	color: #ffffff !important;
}
.cmto-section.cmto-section-dark .cmto-section-header p {
	color: rgba(255, 255, 255, 0.7) !important;
}
.cmto-section.cmto-section-dark .section-badge {
	background: rgba(255, 255, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.cmto-section-header h2 {
	color: var(--cmto-dark) !important;
}
.cmto-section-header p {
	color: var(--cmto-text-light) !important;
}

.section-badge {
	background: rgba(64, 100, 201, 0.1) !important;
	color: var(--cmto-primary) !important;
	border: 1px solid rgba(64, 100, 201, 0.18) !important;
}

/* ----- FEATURE CARDS ----- */
.cmto-feature-card {
	background: #ffffff !important;
	border: 1px solid var(--cmto-border) !important;
	box-shadow: 0 2px 8px rgba(57, 62, 74, 0.04) !important;
}

.cmto-feature-card:hover {
	border-color: var(--cmto-primary) !important;
	box-shadow: 0 8px 24px rgba(64, 100, 201, 0.12) !important;
}

.cmto-feature-card h3,
.cmto-feature-card h4 {
	color: var(--cmto-dark) !important;
}

.cmto-feature-card p {
	color: var(--cmto-text-light) !important;
}

/* Koyu bölüm içindeki feature kartları — yarı saydam beyaz cam efekt */
.cmto-section.cmto-section-dark .cmto-feature-card {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.cmto-section.cmto-section-dark .cmto-feature-card:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24) !important;
}
.cmto-section.cmto-section-dark .cmto-feature-card h3,
.cmto-section.cmto-section-dark .cmto-feature-card h4 {
	color: #ffffff !important;
}
.cmto-section.cmto-section-dark .cmto-feature-card p {
	color: rgba(255, 255, 255, 0.72) !important;
}
.cmto-section.cmto-section-dark .cmto-feature-card ul li,
.cmto-section.cmto-section-dark .cmto-feature-card ul li span {
	color: rgba(255, 255, 255, 0.78) !important;
}

.cmto-feature-card .feature-icon.icon-purple {
	background: rgba(53, 80, 167, 0.12) !important;
	color: var(--cmto-primary-dark) !important;
}
.cmto-feature-card .feature-icon.icon-cyan {
	background: rgba(64, 100, 201, 0.12) !important;
	color: var(--cmto-primary) !important;
}
.cmto-feature-card .feature-icon.icon-blue {
	background: rgba(64, 100, 201, 0.12) !important;
	color: var(--cmto-primary) !important;
}
.cmto-feature-card .feature-icon.icon-amber {
	background: rgba(232, 203, 115, 0.18) !important;
	color: var(--cmto-accent-dark) !important;
}
.cmto-feature-card .feature-icon.icon-pink {
	background: rgba(232, 203, 115, 0.18) !important;
	color: var(--cmto-accent-dark) !important;
}
.cmto-feature-card .feature-icon.icon-green {
	background: rgba(16, 185, 129, 0.12) !important;
	color: var(--cmto-success) !important;
}

/* ----- FEATURE VISUAL BOXES ----- */
.cmto-feature-visual-box {
	background: #ffffff !important;
	border: 1px solid var(--cmto-border) !important;
}

.cmto-feature-visual-box.dark-visual {
	background: linear-gradient(160deg, var(--cmto-surface-dark) 0%, var(--cmto-surface-dark-soft) 100%) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ----- INTEGRATIONS GRID ----- */
.cmto-integration-item {
	background: #ffffff !important;
	border: 1px solid var(--cmto-border) !important;
	color: var(--cmto-dark) !important;
}
.cmto-integration-item:hover {
	border-color: var(--cmto-primary) !important;
	background: rgba(64, 100, 201, 0.04) !important;
}

/* ----- CTA (mavi gradient + beyaz pill butonlar) ----- */
.cmto-cta {
	background: linear-gradient(135deg, var(--cmto-brand-bg) 0%, var(--cmto-brand-bg-strong) 100%) !important;
}

.cmto-cta::before {
	background: radial-gradient(ellipse at 50% 0%, rgba(232, 203, 115, 0.22) 0%, transparent 70%) !important;
}

.cmto-cta h2 {
	color: #ffffff !important;
}

.cmto-cta p {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 17px;
	margin-bottom: 28px;
}

.cmto-cta .cta-actions {
	gap: 12px !important;
}

.cmto-cta .cmto-btn-gradient,
.cmto-cta .cmto-btn-primary {
	background: #ffffff !important;
	background-image: none !important;
	color: var(--cmto-primary-dark) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
.cmto-cta .cmto-btn-gradient:hover,
.cmto-cta .cmto-btn-primary:hover {
	background: var(--cmto-accent) !important;
	color: var(--cmto-dark) !important;
	box-shadow: 0 6px 18px rgba(232, 203, 115, 0.45) !important;
}

.cmto-cta .cmto-btn-outline {
	background: transparent !important;
	color: #ffffff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
}
.cmto-cta .cmto-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
}

/* ----- ACCORDION (FAQ) ----- */
.accordion-title {
	color: var(--cmto-dark) !important;
}
.accordion-content {
	color: var(--cmto-text-light) !important;
}

/* ----- FOOTER (kurumsal koyu lacivert) ----- */
#footer.cmto-footer,
#footer {
	background: var(--cmto-surface-dark) !important;
	background-color: var(--cmto-surface-dark) !important;
	color: rgba(255, 255, 255, 0.65) !important;
	border: none !important;
	border-top: none !important;
}

#footer.cmto-footer h5,
#footer h5 {
	color: #ffffff !important;
}

#footer.cmto-footer a,
#footer a,
#footer.cmto-footer p,
#footer p,
#footer.cmto-footer li,
#footer li {
	color: rgba(255, 255, 255, 0.7) !important;
}

#footer.cmto-footer a:hover,
#footer a:hover {
	color: var(--cmto-accent) !important;
}

#footer .footer-social i {
	color: rgba(255, 255, 255, 0.6) !important;
}
#footer .footer-social i:hover {
	color: var(--cmto-accent) !important;
}

.cmto-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ----- DARK MOCKUP HELPERS (ticket box gibi inline kartlar) ----- */
[class*="dark-visual"] [style*="rgba(239,68,68"] {
	color: #FCA5A5 !important;
}
[class*="dark-visual"] [style*="rgba(245,158,11"] {
	color: #FCD34D !important;
}


/* ----- PREVIEW BANNER (üstte sabit) ----- */
.corporate-preview-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: linear-gradient(90deg, var(--cmto-primary), var(--cmto-primary-dark));
	color: #ffffff;
	text-align: center;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.corporate-preview-banner a {
	color: var(--cmto-accent);
	text-decoration: underline;
	margin-left: 12px;
}
body.preview-mode {
	padding-top: 34px;
}