/**
 * narSolutions — front-end design.
 *
 * Everything is driven by three variables the plugin injects inline:
 *   --ee-brand       main accent (customer's brand colour)
 *   --ee-brand-2     gradient partner
 *   --ee-brand-soft  very light tint for backgrounds
 *
 * Goal: look like a real product, not a bare HTML form.
 */

.ee-wrap {
	--ee-brand: #4f46e5;
	--ee-brand-2: #7c3aed;
	--ee-brand-soft: #eef0ff;
	--ee-ink: #16181d;
	--ee-muted: #6b7280;
	--ee-line: #e6e8ef;
	--ee-radius: 18px;

	box-sizing: border-box;
	max-width: 620px;
	margin: 32px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ee-ink);
	position: relative;
}

.ee-wrap *,
.ee-wrap *::before,
.ee-wrap *::after {
	box-sizing: border-box;
}

/* ───────────────────────────  attention badge  ─────────────────────────── */
.ee-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 7px 16px 7px 12px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--ee-brand), var(--ee-brand-2));
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	box-shadow: 0 8px 20px -8px var(--ee-brand);
	animation: ee-badge-in .45s cubic-bezier(.2, .8, .3, 1) both;
}

.ee-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .9);
	animation: ee-pulse 1.8s infinite;
}

@keyframes ee-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); }
	70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes ee-badge-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────  the card  ─────────────────────────────── */
.ee-form {
	position: relative;
	background: #fff;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
	padding: 26px 26px 22px;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, .04),
		0 12px 32px -14px rgba(16, 24, 40, .18),
		0 40px 60px -50px rgba(16, 24, 40, .35);
	transition: box-shadow .3s ease;
}

.ee-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	border-radius: var(--ee-radius) var(--ee-radius) 0 0;
	background: linear-gradient(90deg, var(--ee-brand), var(--ee-brand-2));
}

/* ────────────────────────────  header / brand  ────────────────────────── */
.ee-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 6px 0 16px;
}

.ee-logo {
	max-height: 52px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}

.ee-head-text {
	min-width: 0;
}

.ee-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.3px;
	color: var(--ee-ink);
}

.ee-brand {
	margin: 3px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ee-brand);
}

/* ─────────────────────────  progress indicator  ───────────────────────── */
.ee-progress {
	height: 5px;
	border-radius: 999px;
	background: var(--ee-brand-soft);
	overflow: hidden;
	margin: 0 0 18px;
}

.ee-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ee-brand), var(--ee-brand-2));
	transition: width .45s cubic-bezier(.3, .9, .3, 1);
}

/* ─────────────────────────────  live price  ───────────────────────────── */
.ee-live-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--ee-brand-soft);
	border: 1px solid rgba(255, 255, 255, .6);
}

.ee-live-cap {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--ee-muted);
}

.ee-live {
	font-size: 30px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -1px;
	background: linear-gradient(120deg, var(--ee-brand), var(--ee-brand-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--ee-brand);
	transition: transform .18s ease;
}

.ee-live.ee-bump {
	transform: scale(1.06);
}

.ee-live-hint {
	font-size: 12px;
	color: var(--ee-muted);
}

/* ────────────────────────────  questions  ─────────────────────────────── */
.ee-field {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.ee-label {
	display: block;
	margin: 0 0 9px;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--ee-ink);
}

.ee-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 9px;
}

.ee-options-multi {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ee-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 12px 13px;
	border: 1.5px solid var(--ee-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	user-select: none;
	transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ee-option:hover {
	border-color: var(--ee-brand);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -10px var(--ee-brand);
}

.ee-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ee-tick {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1.5px solid #cfd4e0;
	border-radius: 6px;
	background: #fff;
	position: relative;
	transition: all .18s ease;
}

.ee-options:not(.ee-options-multi) .ee-tick {
	border-radius: 50%;
}

.ee-tick::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.2px 2.2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .18s ease;
}

.ee-option-label {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--ee-ink);
}

.ee-option-price {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ee-brand);
	white-space: nowrap;
}

.ee-option-free {
	color: #9aa1b1;
	font-weight: 500;
}

/* selected state — JS adds .is-on, :has() covers no-JS browsers */
.ee-option.is-on,
.ee-option:has(input:checked) {
	border-color: var(--ee-brand);
	background: var(--ee-brand-soft);
	box-shadow: 0 8px 20px -14px var(--ee-brand);
}

.ee-option.is-on .ee-tick,
.ee-option:has(input:checked) .ee-tick {
	background: linear-gradient(120deg, var(--ee-brand), var(--ee-brand-2));
	border-color: transparent;
}

.ee-option.is-on .ee-tick::after,
.ee-option:has(input:checked) .ee-tick::after {
	transform: rotate(45deg) scale(1);
}

/* ───────────────────────────  contact block  ──────────────────────────── */
.ee-contact {
	margin: 22px 0 0;
	padding: 18px;
	border-radius: 14px;
	background: #fafbff;
	border: 1px dashed var(--ee-line);
}

.ee-contact-title {
	margin: 0 0 12px;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--ee-ink);
}

.ee-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-bottom: 9px;
}

.ee-contact input[type="text"],
.ee-contact input[type="email"],
.ee-contact input[type="tel"] {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	font-size: 14.5px;
	color: var(--ee-ink);
	background: #fff;
	border: 1.5px solid var(--ee-line);
	border-radius: 11px;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
	appearance: none;
}

.ee-contact input::placeholder {
	color: #a2a8b8;
}

.ee-contact input:focus {
	border-color: var(--ee-brand);
	box-shadow: 0 0 0 4px var(--ee-brand-soft);
}

/* ────────────────────────────  honeypot  ──────────────────────────────── */
.ee-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ────────────────────────────  submit CTA  ────────────────────────────── */
.ee-actions {
	margin: 18px 0 0;
}

.ee-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 22px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .2px;
	color: #fff;
	background: linear-gradient(120deg, var(--ee-brand), var(--ee-brand-2));
	border: 0;
	border-radius: 13px;
	cursor: pointer;
	box-shadow: 0 14px 28px -14px var(--ee-brand);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ee-submit:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 20px 34px -14px var(--ee-brand);
}

.ee-submit:active {
	transform: translateY(0);
}

.ee-submit[disabled] {
	opacity: .65;
	cursor: progress;
	transform: none;
}

.ee-submit-arrow {
	transition: transform .18s ease;
}

.ee-submit:hover .ee-submit-arrow {
	transform: translateX(4px);
}

.ee-trust {
	margin: 12px 0 0;
	font-size: 12.5px;
	text-align: center;
	color: var(--ee-muted);
}

/* ───────────────────────────  result panel  ───────────────────────────── */
.ee-result {
	margin: 20px 0 0;
	padding: 20px;
	border-radius: 14px;
	background: linear-gradient(180deg, var(--ee-brand-soft), #fff);
	border: 1.5px solid var(--ee-brand);
	animation: ee-pop .45s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes ee-pop {
	from { opacity: 0; transform: translateY(10px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.ee-result-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ee-line);
}

.ee-result-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--ee-muted);
}

.ee-result-total {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--ee-brand);
}

.ee-result-lines {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ee-result-lines li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px dashed var(--ee-line);
	color: var(--ee-ink);
}

.ee-result-lines li:last-child {
	border-bottom: 0;
}

.ee-result-note {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--ee-muted);
}

/* ──────────────────────────────  errors  ──────────────────────────────── */
.ee-error-msg {
	margin: 14px 0 0;
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: #8a1f1f;
	background: #fdf0f0;
	border: 1px solid #f3c9c9;
	border-radius: 11px;
}

.ee-error {
	padding: 12px 14px;
	background: #fdf0f0;
	border: 1px solid #f3c9c9;
	border-radius: 10px;
	color: #8a1f1f;
}

/* ───────────────────────────  footer / trust  ─────────────────────────── */
.ee-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0 4px;
}

.ee-foot-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	font-size: 13.5px;
	font-weight: 650;
	text-decoration: none;
	color: var(--ee-ink);
	background: #fff;
	border: 1.5px solid var(--ee-line);
	border-radius: 999px;
	transition: border-color .18s ease, transform .18s ease;
}

.ee-foot-item:hover {
	border-color: var(--ee-brand);
	transform: translateY(-1px);
}

.ee-foot-ico {
	font-size: 15px;
	line-height: 1;
}

.ee-wa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(120deg, #25d366, #12a850);
	border-radius: 999px;
	box-shadow: 0 10px 22px -12px #128c42;
	transition: transform .18s ease, filter .18s ease;
}

.ee-wa:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
}

/* ────────────────────────────  responsive  ────────────────────────────── */
@media (max-width: 560px) {
	.ee-wrap {
		margin: 18px auto;
	}

	.ee-form {
		padding: 20px 16px 18px;
		border-radius: 16px;
	}

	.ee-title {
		font-size: 19px;
	}

	.ee-live {
		font-size: 25px;
	}

	.ee-row {
		grid-template-columns: 1fr;
	}

	.ee-options,
	.ee-options-multi {
		grid-template-columns: 1fr;
	}

	.ee-option {
		padding: 13px 14px;
	}

	.ee-submit {
		font-size: 15.5px;
		padding: 15px 18px;
	}
}

/* ─────────────────────  accessibility & print safety  ─────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ee-wrap *,
	.ee-wrap *::before,
	.ee-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}

.ee-option:focus-within {
	outline: 2px solid var(--ee-brand);
	outline-offset: 2px;
}

/* ─────────────────────  locked (PRO) fields in the free build  ─────────── */
.ee-field-locked .ee-label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ee-pro-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: linear-gradient(120deg, #f59e0b, #ef4444);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.6;
	text-transform: uppercase;
}

.ee-option-locked {
	cursor: not-allowed;
	border-style: dashed;
	background: #f7f7fa;
	opacity: .6;
}

.ee-option-locked:hover {
	border-color: var(--ee-line);
	transform: none;
	box-shadow: none;
}

.ee-locked-input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px dashed var(--ee-line);
	border-radius: 11px;
	background: #f7f7fa;
	color: var(--ee-muted);
	cursor: not-allowed;
	opacity: .75;
}


/* ---- Etiketli alanlar + alan-bazlı hata (inceleme geri bildirimi) ---- */
.ee-field-input{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;min-width:0}
.ee-field-label{font-size:13px;font-weight:600;letter-spacing:.01em;opacity:.85}
.ee-req{color:#C8102E;font-weight:700}
.ee-opt{font-weight:400;opacity:.6;font-size:12px}
.ee-field-error{margin:0;font-size:13px;line-height:1.4;color:#B00020;background:#FDECEE;
  border:1px solid #F5C2C7;border-radius:8px;padding:6px 9px}
.ee-invalid{border-color:#B00020 !important;box-shadow:0 0 0 3px rgba(176,0,32,.10)}
.ee-invalid-field{border-color:#B00020 !important;border-radius:12px;box-shadow:0 0 0 3px rgba(176,0,32,.10)}
.ee-options{display:flex;flex-wrap:wrap;gap:10px}
.ee-option{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;
  border-radius:10px;cursor:pointer;line-height:1.35;min-height:44px}
.ee-option input{flex:0 0 auto}
.ee-option-label{white-space:normal;overflow-wrap:anywhere}
/* canlı tutar: daha güçlü görsel hiyerarşi */
.ee-live,.ee-live-wrap .ee-live{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ee-live-cap{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.65}
.ee-result-total{font-size:34px;font-weight:800;letter-spacing:-.02em}
.ee-submit{min-height:48px;font-weight:700;font-size:16px;border-radius:12px}
@media (max-width:600px){
  .ee-row{flex-direction:column;gap:14px}
  .ee-field-input{flex:1 1 100%}
  .ee-option{width:100%}
  .ee-live,.ee-live-wrap .ee-live{font-size:26px}
  .ee-result-total{font-size:28px}
}