/* ══════════════════════════════════════════════════════════
   Form / teklif formu stilleri — koşullu yüklenir
   style.css'ten taşındı; seçiciler değiştirilmedi.
══════════════════════════════════════════════════════════ */


/* ── Teklif formu ─────────────────────────────────── */
.dxp-quote {
	background: var(--brand-charcoal);
	color     : #ffffff;
	padding   : var(--dxp-space-section) 0;
}
.dxp-quote-inner {
	width                 : 100%;
	max-width             : 1280px;
	margin                : 0 auto;
	padding               : 0 20px;
	display               : grid;
	grid-template-columns : 1fr;
	gap                   : 32px;
}
@media (min-width: 1024px) {
	.dxp-quote-inner { grid-template-columns: 1fr 1fr; gap: 48px; }}
.dxp-quote-copy {
	display       : flex;
	flex-direction: column;
	gap           : 20px;
}
.dxp-quote-title {
	margin     : 0;
	font-size  : var(--dxp-fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	color      : #ffffff;
}
@media (min-width: 640px) {
	.dxp-quote-title { font-size: var(--dxp-fs-3xl); }}
.dxp-quote-sub {
	margin    : 0;
	max-width : 28rem;
	font-size : 1rem;
	color     : rgba(255, 255, 255, .7);
}
.dxp-quote-benefits {
	list-style: none;
	margin    : 0;
	padding   : 8px 0 0;
	display   : flex;
	flex-direction: column;
	gap       : 8px;
	font-size : .875rem;
	color     : rgba(255, 255, 255, .8);
}
.dxp-quote-benefits li {
	display    : flex;
	align-items: center;
	gap        : 8px;
}
.dxp-quote-benefits .dxp-ic {
	width : 16px;
	height: 16px;
	color : var(--brand-green);
	flex-shrink: 0;
}
.dxp-quote-call {
	padding-top: 16px;
	font-size  : .875rem;
}
.dxp-quote-call a {
	color          : #ffffff;
	font-weight    : 600;
	text-decoration: underline;
}

/* Form kartı */
.dxp-quote-card {
	margin-top: 32px;
}
@media (min-width: 1024px) {
	.dxp-quote-card { margin-top: 0; }}
.dxp-quote-box {
	background   : #ffffff;
	color        : var(--brand-charcoal);
	border-radius: 16px;
	padding      : 24px;
	box-shadow   : var(--dxp-ring);
}
.dxp-quote-meta {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	gap            : 12px;
	margin-bottom  : 12px;
}
.dxp-quote-step {
	font-size     : .75rem;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--dxp-text-muted);
}
.dxp-quote-time {
	font-size  : .75rem;
	font-weight: 500;
	color      : var(--brand-green);
}
.dxp-quote-progress {
	height       : 6px;
	border-radius: 9999px;
	overflow     : hidden;
	background   : color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
	margin-bottom: 20px;
}
.dxp-quote-bar {
	height       : 100%;
	width        : 25%;
	border-radius: 9999px;
	background   : var(--brand-green);
	transition   : width var(--dxp-dur-slow) ease;
}

/*
 * Numaralı adım çubuğu (salt görsel; aria-hidden).
 * Durum, JS'in güncellediği aktif fieldset'ten (:has) okunur — JS değişmez.
 */
.dxp-qsteps {
	display    : flex;
	align-items: flex-start;
	gap        : 4px;
	list-style : none;
	margin     : 0 0 16px;
	padding    : 0;
}
.dxp-qstep-item {
	position      : relative;
	flex          : 1 1 0;
	min-width     : 0;
	display       : flex;
	flex-direction: column;
	align-items   : center;
	gap           : 6px;
	text-align    : center;
}
/* Adımları birleştiren ince çizgi (daire merkezleri arası). */
.dxp-qstep-item::before {
	content   : "";
	position  : absolute;
	top       : 13px;
	left      : -50%;
	right     : 50%;
	height    : 2px;
	background: var(--dxp-step-line, color-mix(in srgb, var(--brand-charcoal) 12%, transparent));
	z-index   : 0;
}
.dxp-qstep-item:first-child::before { display: none; }
.dxp-qstep-num {
	position       : relative;
	z-index        : 1;
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	width          : 28px;
	height         : 28px;
	border-radius  : 9999px;
	border         : 2px solid var(--dxp-step-fill, color-mix(in srgb, var(--brand-charcoal) 15%, transparent));
	background     : var(--dxp-step-fill, #ffffff);
	color          : var(--dxp-text-muted);
	font-size      : .75rem;
	font-weight    : 700;
	transition     : background var(--dxp-dur-fast), border-color var(--dxp-dur-fast), color var(--dxp-dur-fast);
}
.dxp-qstep-item { --dxp-step-fill: #ffffff; --dxp-step-line: color-mix(in srgb, var(--brand-charcoal) 12%, transparent); }
.dxp-qstep-check { display: none; }
.dxp-qstep-check .dxp-ic { width: 14px; height: 14px; }
.dxp-qstep-name {
	max-width    : 100%;
	overflow     : hidden;
	text-overflow: ellipsis;
	white-space  : nowrap;
	font-size    : .6875rem;
	font-weight  : 600;
	line-height  : 1.2;
	color        : var(--dxp-text-muted);
	transition   : color var(--dxp-dur-fast);
}

/* Ulaşılan adımlar (aktif + tamamlanan): dolu daire + yeşil çizgi. */
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="1"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 1),
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="2"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 2),
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="3"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 3),
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="4"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 4) {
	--dxp-step-fill: var(--brand-green);
	--dxp-step-line: var(--brand-green);
}
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="1"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 1) .dxp-qstep-num,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="2"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 2) .dxp-qstep-num,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="3"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 3) .dxp-qstep-num,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="4"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 4) .dxp-qstep-num {
	color: #ffffff;
}

/* Tamamlanan adımlar: numara yerine onay işareti. */
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="2"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 1) .dxp-qstep-check,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="3"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 2) .dxp-qstep-check,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="4"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 3) .dxp-qstep-check { display: inline-flex; }
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="2"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 1) .dxp-qstep-n,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="3"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 2) .dxp-qstep-n,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="4"]) .dxp-qsteps .dxp-qstep-item:nth-child(-n + 3) .dxp-qstep-n { display: none; }

/* Aktif adım: halka + koyu etiket. */
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="1"]) .dxp-qsteps .dxp-qstep-item:nth-child(1) .dxp-qstep-name,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="2"]) .dxp-qsteps .dxp-qstep-item:nth-child(2) .dxp-qstep-name,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="3"]) .dxp-qsteps .dxp-qstep-item:nth-child(3) .dxp-qstep-name,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="4"]) .dxp-qsteps .dxp-qstep-item:nth-child(4) .dxp-qstep-name {
	color: var(--brand-charcoal);
}
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="1"]) .dxp-qsteps .dxp-qstep-item:nth-child(1) .dxp-qstep-num,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="2"]) .dxp-qsteps .dxp-qstep-item:nth-child(2) .dxp-qstep-num,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="3"]) .dxp-qsteps .dxp-qstep-item:nth-child(3) .dxp-qstep-num,
.dxp-quote-box:has(.dxp-qstep.is-active[data-step="4"]) .dxp-qsteps .dxp-qstep-item:nth-child(4) .dxp-qstep-num {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 16%, transparent);
}

/* Gönderim sonrası form gizlenince çubuğu da gizle. */
.dxp-quote-box:has(.dxp-quote-form[hidden]) .dxp-qsteps { display: none; }

@media (max-width: 480px) {
	.dxp-qstep-name { display: none; }}

.dxp-qstep {
	border : 0;
	margin : 0;
	padding: 0;
}
.dxp-qstep legend {
	padding    : 0;
	margin-bottom: 16px;
	font-size  : 1rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-qgroup + .dxp-qgroup { margin-top: 20px; }
.dxp-qgroup-title {
	margin-bottom : 8px;
	font-size     : 11px;
	font-weight   : 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color         : var(--dxp-text-muted);
}
.dxp-qoptions {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 8px;
}
@media (min-width: 640px) {
	.dxp-qoptions { grid-template-columns: repeat(2, 1fr); }}
:is(.dxp-qopt, .dxp-qgrp-opt) {
	position      : relative;
	min-height    : 56px;
	padding       : 12px 36px 12px 12px;
	text-align    : left;
	font-size     : .875rem;
	font-weight   : 500;
	color         : var(--brand-charcoal);
	background    : #ffffff;
	border         : 1px solid rgba(0, 0, 0, .1);
	border-radius : 12px;
	cursor        : pointer;
	overflow-wrap : anywhere;
	transition    : border-color var(--dxp-dur-fast), background var(--dxp-dur-fast), box-shadow var(--dxp-dur-fast);
}
:is(.dxp-qopt, .dxp-qgrp-opt):hover { border-color: color-mix(in srgb, var(--brand-green) 40%, transparent); }
:is(.dxp-qopt, .dxp-qgrp-opt):focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
:is(.dxp-qopt, .dxp-qgrp-opt).is-on {
	border-color: var(--brand-green);
	background  : var(--dxp-accent);
	color       : var(--dxp-accent-fg);
	font-weight : 600;
}
:is(.dxp-qopt, .dxp-qgrp-opt).is-on::after {
	content      : "\2713";
	position     : absolute;
	top          : 50%;
	right        : 14px;
	transform    : translateY(-50%);
	font-size    : .875rem;
	font-weight  : 700;
	line-height  : 1;
	color        : var(--brand-green);
}
.dxp-qnote {
	margin    : 16px 0 0;
	font-size : .75rem;
	color     : var(--dxp-text-muted);
}

.dxp-qfield {
	display       : flex;
	flex-direction: column;
	gap           : 8px;
	margin-bottom : 16px;
}
.dxp-qfield span {
	font-size  : .75rem;
	font-weight: 600;
	color      : var(--dxp-text-muted);
}
.dxp-qfield input,
.dxp-qfield select,
.dxp-qfield textarea {
	width        : 100%;
	min-height   : 44px;
	padding      : 10px 12px;
	font-size    : .9375rem;
	color        : var(--brand-charcoal);
	background   : #ffffff;
	border       : 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
	box-sizing   : border-box;
}
.dxp-qfield textarea { min-height: 96px; resize: vertical; }
.dxp-qfield input:focus,
.dxp-qfield select:focus,
.dxp-qfield textarea:focus {
	outline     : none;
	border-color: var(--brand-green);
	box-shadow  : 0 0 0 3px color-mix(in srgb, var(--brand-green) 20%, transparent);
}

/* Alan altı açıklama (panelden gelir) */
.dxp-qhint {
	display    : block;
	font-size  : .75rem;
	line-height: 1.5;
	color      : var(--dxp-text-muted);
}

/* Adım içi alan ızgarası: tam genişliktekiler tek satır, yarım genişliktekiler yan yana. */
.dxp-qgrid { display: grid; grid-template-columns: 1fr; }
.dxp-qgrid .dxp-qfield { grid-column: 1 / -1; }
@media (min-width: 560px) {
	.dxp-qgrid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.dxp-qgrid .dxp-qfield--half { grid-column: span 1; }}

.dxp-qsummary {
	margin               : 0;
	display              : grid;
	grid-template-columns: minmax(96px, auto) 1fr;
	font-size            : .875rem;
	border               : 1px solid var(--dxp-border);
	border-radius        : var(--dxp-radius);
	overflow             : hidden;
	background           : #ffffff;
}
.dxp-qsummary dt,
.dxp-qsummary dd {
	padding  : 10px 14px;
	border-top: 1px solid var(--dxp-border);
}
.dxp-qsummary dt:nth-child(-n + 2),
.dxp-qsummary dd:nth-child(-n + 2) { border-top: 0; }
.dxp-qsummary dt {
	background : var(--dxp-muted);
	color      : var(--dxp-text-muted);
	font-weight: 500;
}
.dxp-qsummary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.dxp-qnav {
	display      : flex;
	align-items  : center;
	gap          : 8px;
	min-height   : 48px;
	margin-top   : 8px;
	padding-top  : 20px;
	border-top   : 1px solid var(--dxp-border);
}
.dxp-qnav .dxp-qnext,
.dxp-qnav .dxp-qsubmit { margin-left: auto; }
.dxp-qback {
	height        : 48px;
	padding       : 0 20px;
	border        : 1px solid rgba(0, 0, 0, .12);
	border-radius : 9999px;
	background    : #ffffff;
	color         : var(--brand-charcoal);
	font-size     : .875rem;
	font-weight   : 600;
	cursor        : pointer;
}
.dxp-qback:hover { background: var(--dxp-muted); }
.dxp-qback:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.dxp-qnav .dxp-btn:disabled { opacity: .5; pointer-events: none; }

.dxp-qhoneypot {
	position: absolute !important;
	left    : -9999px !important;
	width   : 1px;
	height  : 1px;
	opacity : 0;
}

.dxp-quote-result {
	padding    : 16px;
	font-size  : .9375rem;
	font-weight: 600;
	color      : var(--brand-green);
}

/* Detay sayfası kompakt teklif formu (sağ sticky kolon) */
.dxp-quote-mini {
	background   : var(--brand-charcoal);
	color        : #ffffff;
	border-radius: 20px;
	padding      : 32px 28px;
}
.dxp-quote-mini-title {
	margin     : 0;
	font-size  : 1.125rem;
	font-weight: 600;
	color      : #ffffff;
}
.dxp-quote-mini-sub {
	margin   : 4px 0 0;
	font-size: .875rem;
	color    : rgba(255, 255, 255, .7);
}
.dxp-quote-mini-box { margin-top: 16px; }

/* Kompakt form: iç beyaz kutu (rounded-xl + p-4) */
.dxp-quote-mini-box .dxp-quote-box {
	border-radius: 12px;
	padding      : 16px;
}
.dxp-contact-form .dxp-quote-box { box-shadow: var(--dxp-ring); }

/* ══════════════════════════════════════════════════════════
   Basit iletişim formu ([devxpe_contact_form] / İletişim sayfası)
══════════════════════════════════════════════════════════ */
.dxp-cform {
	background   : #ffffff;
	border-radius: 16px;
	padding      : 24px;
	box-shadow   : var(--dxp-ring);
}
.dxp-cform-grid {
	display              : grid;
	grid-template-columns: 1fr;
	gap                  : 16px;
}
@media (min-width: 640px) {
	.dxp-cform-grid { grid-template-columns: 1fr 1fr; }}
.dxp-cform .dxp-field {
	display       : flex;
	flex-direction: column;
	gap           : 6px;
	margin-bottom : 16px;
}
.dxp-cform-grid .dxp-field { margin-bottom: 0; }
.dxp-cform .dxp-field label {
	font-size  : .8125rem;
	font-weight: 600;
	color      : var(--brand-charcoal);
}
.dxp-cform .dxp-field label span { color: var(--brand-green); }
.dxp-cform .dxp-field input[type=text],
.dxp-cform .dxp-field input[type=email],
.dxp-cform .dxp-field input[type=tel],
.dxp-cform .dxp-field textarea {
	width        : 100%;
	border       : 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
	padding      : 11px 13px;
	font-size    : .9375rem;
	font-family  : inherit;
	color        : var(--brand-charcoal);
	background   : #ffffff;
	outline      : none;
	transition   : border-color var(--dxp-dur-fast), box-shadow var(--dxp-dur-fast);
}
.dxp-cform .dxp-field input:focus,
.dxp-cform .dxp-field textarea:focus {
	border-color: var(--brand-green);
	box-shadow  : 0 0 0 3px color-mix(in srgb, var(--brand-green) 15%, transparent);
}
.dxp-cform .dxp-field-hint {
	font-size: .75rem;
	color    : var(--dxp-text-muted);
}
.dxp-cform input[type=file] { font-size: .875rem; }
.dxp-consent {
	display    : flex;
	flex-wrap  : wrap;
	align-items: flex-start;
	gap        : 10px;
	margin     : 4px 0 16px;
	font-size  : .8125rem;
	line-height: 1.5;
	color      : color-mix(in srgb, var(--brand-charcoal) 70%, transparent);
	cursor     : pointer;
}
.dxp-consent input { margin-top: 2px; flex-shrink: 0; }

/* Onay metni içindeki gizlilik politikası bağlantısı. */
.dxp-consent-link {
	color                     : inherit;
	text-decoration           : underline;
	text-underline-offset    : 2px;
	font-weight               : 600;
}
.dxp-consent-link:hover,
.dxp-consent-link:focus {
	color: var(--brand-green);
}
.dxp-cform-submit { width: 100%; }
@media (min-width: 640px) {
	.dxp-cform-submit { width: auto; }}
.dxp-cform-msg { margin: 12px 0 0; font-size: .875rem; min-height: 1.2em; }
.dxp-cform-msg.is-ok { color: var(--brand-green); font-weight: 600; }
.dxp-cform-msg.is-error { color: #dc2626; font-weight: 600; }

/* ── Alan doğrulama notu (tüm formlar ortak) ──────────────── */.dxp-field-error {
	display    : block;
	margin-top : 6px;
	font-size  : .75rem;
	line-height: 1.4;
	color      : #dc2626;
}
.dxp-consent .dxp-field-error {
	flex-basis : 100%;
	margin-top : 0;
}
.dxp-cform .dxp-field.is-invalid input,
.dxp-cform .dxp-field.is-invalid select,
.dxp-cform .dxp-field.is-invalid textarea,
.dxp-quote-form .dxp-qfield.is-invalid input,
.dxp-quote-form .dxp-qfield.is-invalid textarea {
	border-color: #dc2626;
}
.dxp-qfield.is-invalid > span { color: #dc2626; }

/* Uzun metin sayacı (panelden ayarlanan karakter sınırı) */
.dxp-count {
	display    : block;
	margin-top : 4px;
	font-size  : .75rem;
	line-height: 1.3;
	text-align : right;
	color      : var(--dxp-text-muted);
}
.dxp-count.is-full { color: #dc2626; font-weight: 600; }

/* ── Telefon ülke kodu seçicisi (panelden açılır) ─────────── */
.dxp-tel-wrap {
	display    : flex;
	align-items: center;
	gap        : 8px;
}
.dxp-tel-wrap .dxp-cc {
	flex         : 0 0 auto;
	max-width    : 42%;
	width        : auto;
	min-height   : 44px;
	padding      : 10px 8px;
	border       : 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
	background   : #ffffff;
	color        : var(--brand-charcoal);
	font-size    : .875rem;
}
.dxp-tel-wrap input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
	.dxp-tel-wrap { flex-wrap: wrap; }
	.dxp-tel-wrap .dxp-cc { max-width: 100%; width: 100%; }}

/* Contact form: full-width field */
.dxp-cform-grid .dxp-field--full,
.dxp-cform-grid .dxp-consent.dxp-field--full { grid-column: 1 / -1; }