/*
 * İçerik sayfaları (Elementor) — bileşenler.
 *
 * Görünüm burada, sınıflarla; Elementor verisinde yalnız yerleşim (kap
 * genişliği, sıra, aralık) durur. Sınıflar widget'ın "CSS sınıfları" alanına
 * yazılır. Başlık bandı ve metin öğeleri (`dj-page-*`) base.css'tedir.
 */

/* ------------------------------------------------------------------ */
/* İçerik içi bölüm başlığı (Başlık widget'ı, H2)                       */
/* ------------------------------------------------------------------ */

.elementor-widget-heading.dj-page-heading .elementor-heading-title {
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

/* Küçük ara başlık (ör. "Bizi takip edin"). */
.elementor-widget-heading.dj-page-subheading .elementor-heading-title {
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

/* ------------------------------------------------------------------ */
/* Çağrı merkezi kutusu                                                */
/* ------------------------------------------------------------------ */

/* Kap (Elementor kapsayıcısı) sınıfı: yüzey ve köşe. İç boşluk kapsayıcının kendi ayarıdır. */
.dj-page-callout {
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
}

.dj-page-kicker {
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-normal);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dj-muted);
}

.dj-page-phone {
	font-size: var(--dj-fs-42);
	font-weight: var(--dj-fw-extrabold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

.dj-page-phone a {
	color: inherit;
	white-space: nowrap;
}

.dj-page-phone a:hover {
	color: var(--dj-muted);
}

.dj-page-hours {
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.dj-page-kicker p,
.dj-page-phone p,
.dj-page-hours p {
	margin: 0;
}

/* Metin içi bağlantı (ör. "Servis Talebi Oluştur"). */
.dj-page-text a,
.dj-page-hours a {
	color: var(--dj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ------------------------------------------------------------------ */
/* İkonlu bilgi listesi (`dijitsu-info-list`)                           */
/* ------------------------------------------------------------------ */

/*
 * Fynode iletişim bilgi kutuları: çizgi ikon + küçük gri etiket + kalın
 * değer. Sütun sayısı widget ayarıdır (`--dj-info-columns`).
 */
.dj-info-list {
	display: grid;
	grid-template-columns: repeat(var(--dj-info-columns, 2), minmax(0, 1fr));
	gap: var(--dj-space-30) var(--dj-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-info-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-16);
	min-width: 0;
}

.dj-info-list__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: max(44px, calc(52 * var(--dj-u)));
	height: max(44px, calc(52 * var(--dj-u)));
	border-radius: 50%;
	background: var(--dj-surface);
	color: var(--dj-ink);
}

.dj-info-list__icon svg {
	width: 46%;
	height: 46%;
}

.dj-info-list__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-block-start: 2px;
}

.dj-info-list__label {
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-snug);
	color: var(--dj-muted);
}

.dj-info-list__value {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
	overflow-wrap: anywhere;
}

a.dj-info-list__value:hover {
	color: var(--dj-muted);
}

/*
 * Adımlar ("Nasıl işliyor?"): beyaz zemin; her adımda büyük sıra numarası
 * (01, 02, 03 — başlık fontu, açık gri), altında ikon, başlık ve metin.
 * Adımları 1 px çizgi bağlar: masaüstünde numaraların ortasından yatay,
 * mobilde numara sütununun ortasından dikey. Numara `counter()` ile gelir;
 * sıra değişince kendiliğinden güncellenir.
 */
.dj-info-list--steps {
	--dj-step-num: max(56px, calc(64 * var(--dj-ut)));
	--dj-step-line: var(--dj-line-field);

	counter-reset: dj-step;
	gap: var(--dj-gutter);
}

.dj-info-list--steps .dj-info-list__item {
	position: relative;
	flex-direction: column;
	gap: var(--dj-space-20);
	counter-increment: dj-step;
}

.dj-info-list--steps .dj-info-list__item::before {
	content: counter(dj-step, decimal-leading-zero);
	position: relative;
	z-index: 1;
	padding-inline-end: var(--dj-space-16);
	background: var(--dj-white);
	font-family: var(--dj-font);
	font-size: var(--dj-step-num);
	font-weight: var(--dj-fw-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--dj-gray-400);
}

/* Bağlantı çizgisi: numaranın dikey ortasında, bir sonraki adımın numarasına kadar. */
.dj-info-list--steps .dj-info-list__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--dj-step-num) / 2);
	inset-inline: 0 calc(-1 * var(--dj-gutter));
	height: 1px;
	background: var(--dj-step-line);
}

/* İkon bir kademe büyük; zemin yok, ince çerçeve. */
.dj-info-list--steps .dj-info-list__icon {
	width: max(52px, calc(64 * var(--dj-u)));
	height: max(52px, calc(64 * var(--dj-u)));
	border: 1px solid var(--dj-line-field);
	background: var(--dj-white);
}

.dj-info-list__title {
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

.dj-info-list__text {
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

/*
 * Mobil: numara solda sabit genişlikli sütunda, ikon/başlık/metin sağda;
 * çizgi numara sütununun ortasından bir sonraki numaraya iner.
 */
@media (max-width: 767px) {
	.dj-info-list--steps {
		--dj-step-num: 56px;
		--dj-step-col: 80px;

		gap: var(--dj-space-30);
	}

	.dj-info-list--steps .dj-info-list__item {
		display: grid;
		grid-template-columns: var(--dj-step-col) minmax(0, 1fr);
		column-gap: var(--dj-space-16);
		row-gap: var(--dj-space-12);
		align-items: start;
	}

	.dj-info-list--steps .dj-info-list__item::before {
		grid-row: 1 / span 2;
		padding: 0 0 8px;
		text-align: center;
	}

	.dj-info-list--steps .dj-info-list__item:not(:last-child)::after {
		top: calc(var(--dj-step-num) + 8px);
		bottom: calc(-1 * var(--dj-space-30));
		inset-inline: calc(var(--dj-step-col) / 2) auto;
		width: 1px;
		height: auto;
	}

	.dj-info-list--steps .dj-info-list__icon,
	.dj-info-list--steps .dj-info-list__body {
		grid-column: 2;
	}
}

/*
 * Zaman çizelgesi (`dj-info-list--timeline`): adımlar alt alta; solda ikon
 * dairesi, daireler arasında dikey 1 px çizgi, sağda "Adım N", başlık
 * (sitenin H3'ü) ve metin. Daire 55 px: merkez 27,5 px, çizgi 27–28 px
 * arasını kaplar — çizgi dairenin tam ortasından geçer (masaüstü ve mobil).
 */
.dj-info-list--timeline {
	--dj-tl-size: 55px;
	--dj-tl-gap: var(--dj-space-40);

	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.dj-info-list--timeline .dj-info-list__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--dj-tl-size) minmax(0, 1fr);
	column-gap: var(--dj-space-24);
	align-items: start;
	padding-block-end: var(--dj-tl-gap);
}

.dj-info-list--timeline .dj-info-list__item:last-child {
	padding-block-end: 0;
}

.dj-info-list--timeline .dj-info-list__icon {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: var(--dj-tl-size);
	height: var(--dj-tl-size);
	border: 1px solid var(--dj-line-field);
	background: var(--dj-white);
}

.dj-info-list--timeline .dj-info-list__icon svg {
	width: 22px;
	height: 22px;
}

.dj-info-list--timeline .dj-info-list__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: var(--dj-tl-size);
	bottom: 0;
	inset-inline-start: calc(var(--dj-tl-size) / 2 - 0.5px);
	width: 1px;
	background: var(--dj-line-field);
}

.dj-info-list--timeline .dj-info-list__body {
	gap: 6px;
	padding-block-start: 4px;
}

.dj-info-list__step {
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-medium);
	line-height: var(--dj-lh-snug);
	letter-spacing: 0.02em;
	color: var(--dj-muted);
}

.dj-info-list--timeline .dj-info-list__title {
	margin: 0;
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

.dj-info-list--timeline .dj-info-list__text {
	margin: 0;
}

@media (max-width: 767px) {
	.dj-info-list--timeline {
		--dj-tl-gap: var(--dj-space-30);
	}

	.dj-info-list--timeline .dj-info-list__item {
		column-gap: var(--dj-space-16);
	}

	.dj-info-list--timeline .dj-info-list__title {
		font-size: var(--dj-fs-20);
	}
}

/* ------------------------------------------------------------------ */
/* Bilgi Kartları alt bilgi bloğu (`.dj-info-feature`)                  */
/* ------------------------------------------------------------------ */

/*
 * Kartların altında tam genişlik blok: solda başlık (H3) + açıklama, sağda
 * görsel. Zemin ve köşe kartlarla aynı; mobilde önce metin, sonra görsel.
 */
.dj-info-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: var(--dj-space-30);
	margin-block-start: var(--dj-gutter);
	padding: var(--dj-space-30);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
}

.dj-info-feature__text {
	display: flex;
	flex-direction: column;
	gap: var(--dj-space-12);
}

.dj-info-feature__title {
	margin: 0;
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

.dj-info-feature__desc {
	margin: 0;
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.dj-info-feature .dj-info-feature__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--dj-line-field);
	border-radius: var(--dj-radius-sm);
	background: var(--dj-white);
}

@media (max-width: 767px) {
	.dj-info-feature {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-20);
		padding: 20px;
	}

	.dj-info-feature__title {
		font-size: var(--dj-fs-20);
	}
}

/* ------------------------------------------------------------------ */
/* Sosyal ağlar (`dijitsu-social-links`)                               */
/* ------------------------------------------------------------------ */

.dj-page-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dj-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-page-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(40px, calc(44 * var(--dj-u)));
	height: max(40px, calc(44 * var(--dj-u)));
	border: 1px solid var(--dj-line-field);
	border-radius: 50%;
	color: var(--dj-ink);
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

.dj-page-social__link svg {
	display: block;
	width: auto;
	height: 18px;
}

.dj-page-social__link:hover,
.dj-page-social__link:focus-visible {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
}

/* ------------------------------------------------------------------ */
/* Çağrı merkezi kartı (`dijitsu-callcenter`)                          */
/* ------------------------------------------------------------------ */

.dj-callcenter {
	display: flex;
	flex-direction: column;
	gap: var(--dj-space-30);
	padding: var(--dj-space-40);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
	color: var(--dj-ink);
}

.dj-callcenter__main {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-24);
}

.dj-callcenter__icon {
	display: block;
	flex: 0 0 auto;
	width: calc(54.1 * var(--dj-u));
	min-width: 42px;
	aspect-ratio: 54.1 / 48.55;
}

.dj-callcenter__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dj-callcenter__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dj-space-12);
	min-width: 0;
}

.dj-callcenter__title {
	margin: 0;
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
}

.dj-callcenter__text {
	margin: 0;
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.dj-callcenter__phone {
	font-size: var(--dj-fs-42);
	font-weight: var(--dj-fw-extrabold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--dj-ink);
}

.dj-callcenter__phone:hover {
	color: var(--dj-muted);
}

.dj-callcenter__hours {
	display: inline-flex;
	align-items: center;
	gap: var(--dj-space-8);
	margin: 0;
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.dj-callcenter__hours svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Alt bağlantı ("Servis Noktaları"): ikincil CTA (`.dj-cta--secondary`). */
.dj-callcenter__link {
	margin-block-start: var(--dj-space-8);
}

.dj-callcenter__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dj-space-12);
}

/* Geniş kart: bilgi solda, düğmeler sağda ortalı. */
.dj-callcenter--wide {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: var(--dj-space-50) var(--dj-space-60);
}

/*
 * Koyu servis paneli (`dj-callcenter--dark`): ana sayfa servis bölümünün
 * paneli (`.dj-service__panel`), harita videosu (`.dj-service__video`) ve
 * karartması (`.dj-service__overlay`) — home.css / home.js. Burada yalnız
 * kart ölçüsüne uyarlanır: içerik solda, düğmeler sağda; metin beyaz,
 * ikincil metin koyu zemin tonu (`--dj-gray-300`).
 */
.dj-callcenter--dark.dj-service__panel {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-40);
	min-height: 0;
	padding: var(--dj-space-60);
	background: var(--dj-ink);
	color: var(--dj-white);
}

.dj-callcenter--dark > :is(.dj-callcenter__main, .dj-callcenter__actions) {
	position: relative;
	z-index: 2;
}

.dj-callcenter--dark .dj-callcenter__icon {
	color: var(--dj-white);
}

.dj-callcenter--dark :is(.dj-callcenter__text, .dj-callcenter__hours) {
	color: var(--dj-gray-300);
}

.dj-callcenter--dark .dj-callcenter__phone {
	color: var(--dj-white);
}

.dj-callcenter--dark .dj-callcenter__phone:hover {
	color: var(--dj-gray-300);
}

.dj-callcenter--dark .dj-callcenter__actions {
	flex-wrap: nowrap;
}

/* İki düğme aynı yükseklik ve yazı ölçüsünde; ana sayfa "Servis Bul"un üst boşluğu burada yok. */
.dj-callcenter--dark .dj-callcenter__actions > :is(.dj-service__cta, .dj-cta) {
	min-height: var(--dj-button-height-sm);
	margin: 0;
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
}

/*
 * Dikey koyu panel (`dj-callcenter--dark-stack`, yan sütun): ikon, metin,
 * numara, saat alt alta; düğmeler altta tam genişlik. Video ve karartma
 * yatay panelle aynı.
 */
.dj-callcenter--dark-stack.dj-service__panel {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--dj-space-30);
	padding: var(--dj-space-40);
}

.dj-callcenter--dark-stack .dj-callcenter__main {
	flex-direction: column;
	gap: var(--dj-space-20);
}

.dj-callcenter--dark-stack .dj-callcenter__actions {
	flex-direction: column;
	flex-wrap: nowrap;
}

.dj-callcenter--dark-stack .dj-callcenter__actions > :is(.dj-service__cta, .dj-cta) {
	justify-content: center;
	width: 100%;
}

/* Bilgi kartı: yan sütunda, masaüstünde header'ın altında yapışkan. */
@media (min-width: 1024px) {
	.elementor-widget.dj-callcenter-sticky-yes {
		position: sticky;
		/* Header yapışkan değil: kart ekranın üstünden --dj-space-24 boşlukla durur. */
		top: calc(var(--dj-adminbar-offset, 0px) + var(--dj-space-24));
		align-self: flex-start;
		width: 100%;
	}
}

@media (max-width: 1023px) {
	.dj-callcenter--wide {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--dj-space-40);
	}
}

/* "Hemen Ara": yalnız mobilde (masaüstünde numara yeterli). */
a.dj-cta.dj-callcenter__call {
	display: none;
}

@media (max-width: 767px) {
	.dj-callcenter,
	.dj-callcenter--wide {
		padding: 24px 20px;
	}

	a.dj-cta.dj-callcenter__call {
		display: inline-flex;
		align-self: stretch;
		width: 100%;
	}

	/* Bilgi kartında açıklama en fazla iki satır. */
	.dj-callcenter--card .dj-callcenter__text {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.dj-callcenter__main {
		flex-direction: column;
		gap: var(--dj-space-16);
	}

	.dj-callcenter__actions,
	.dj-callcenter__actions .dj-cta {
		width: 100%;
	}

	.dj-callcenter--dark.dj-service__panel {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dj-space-24);
		padding: 32px 20px;
	}

	.dj-callcenter--dark .dj-callcenter__actions {
		flex-direction: column;
	}

	.dj-callcenter--dark .dj-callcenter__actions > :is(.dj-service__cta, .dj-cta) {
		justify-content: center;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Konum haritası (`dijitsu-location-map`)                             */
/* ------------------------------------------------------------------ */

/* Renkli harita, kap genişliğinde; yükseklik widget ayarı (masaüstü 400 / mobil 280). */
.dj-location__map {
	overflow: hidden;
	height: var(--dj-map-h, 400px);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
}

.dj-location__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.dj-location__map {
		height: var(--dj-map-h, 280px);
	}
}

/* ------------------------------------------------------------------ */
/* Logo ızgarası (Satış Noktaları)                                     */
/* ------------------------------------------------------------------ */

/*
 * Fynode marka şeridi ölçüsü: logo ~144 × 72 alanda ortalı, kutu yüzey
 * zemininde. Masaüstünde 4 sütun; son satır (7 logoda 3) ortalanır — bu
 * yüzden ızgara değil, sabit genişlikli esnek satır kullanılır.
 */
.dj-logo-grid {
	--dj-logo-cols: 4;
	--dj-logo-gap: var(--dj-gutter);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dj-logo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-logo-grid__item {
	flex: 0 0 calc((100% - (var(--dj-logo-cols) - 1) * var(--dj-logo-gap)) / var(--dj-logo-cols));
	min-width: 0;
}

.dj-logo-grid__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dj-space-16);
	height: 100%;
	padding: var(--dj-space-40) var(--dj-space-24) var(--dj-space-30);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
	color: var(--dj-ink);
	text-align: center;
	transition: transform var(--dj-transition), box-shadow var(--dj-transition), background-color var(--dj-transition);
}

.dj-logo-grid__item:hover > a.dj-logo-grid__link,
a.dj-logo-grid__link:focus-visible {
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
	color: var(--dj-ink);
	transform: translateY(-4px);
}

/* Logo alanı 144 × 72: her logo kendi oranıyla bu kutuya sığar. */
.dj-logo-grid__logo,
.dj-logo-grid__name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	max-width: 100%;
	height: 72px;
}

/* Elementor'un `.elementor img { height: auto }` kuralının üstünde kalır. */
.dj-logo-grid img.dj-logo-grid__logo {
	width: 144px;
	max-width: 100%;
	height: 72px;
	object-fit: contain;
}

/* Logo gelene kadar mağaza adı logonun yerinde durur. */
.dj-logo-grid__name {
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
}

.dj-logo-grid__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--dj-space-8);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-muted);
}

.dj-logo-grid__cta svg {
	width: 5px;
	height: 9px;
	transition: transform var(--dj-transition);
}

.dj-logo-grid__item:hover > a.dj-logo-grid__link .dj-logo-grid__cta {
	color: var(--dj-ink);
}

.dj-logo-grid__item:hover > a.dj-logo-grid__link .dj-logo-grid__cta svg {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.dj-logo-grid__item:hover > a.dj-logo-grid__link,
	a.dj-logo-grid__link:focus-visible {
		transform: none;
	}
}

@media (max-width: 1023px) {
	.dj-logo-grid {
		--dj-logo-cols: 3;
	}
}

@media (max-width: 767px) {
	.dj-logo-grid {
		--dj-logo-cols: 2;
		--dj-logo-gap: 12px;
	}

	.dj-logo-grid__link {
		padding: 20px 12px;
	}

	.dj-logo-grid__name,
	.dj-logo-grid img.dj-logo-grid__logo {
		width: 120px;
		height: 60px;
	}

	.dj-logo-grid__name {
		font-size: var(--dj-fs-18);
	}
}

/* ------------------------------------------------------------------ */
/* Ürün katalogları                                                    */
/* ------------------------------------------------------------------ */

.dj-catalogs__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dj-space-12);
	margin: 0 0 var(--dj-space-40);
	padding: 0;
	list-style: none;
}

/* Hiza widget ayarıdır (sol / orta / sağ). */
.dj-catalogs__filters--center {
	justify-content: center;
}

.dj-catalogs__filters--end {
	justify-content: flex-end;
}

.dj-catalogs__filter {
	min-height: calc(44 * var(--dj-ut));
	padding: 0 calc(22 * var(--dj-ut));
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-white);
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-medium);
	transition: background-color var(--dj-transition), border-color var(--dj-transition), color var(--dj-transition);
}

.dj-catalogs__filter:hover {
	border-color: var(--dj-ink);
}

.dj-catalogs__filter[aria-pressed="true"] {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
}

/*
 * Kart ölçüsü kategori sayfasındaki ürün kartıyla aynı dilde: 3 sütunda
 * ürün kartı genişliği, 4 sütunda bir kademe küçük; kapak alanı ürün
 * kartının görsel alanı oranında (907 : 771), köşe/iç boşluk kart
 * tokenlarından.
 */
.dj-catalogs__grid {
	display: grid;
	grid-template-columns: repeat(var(--dj-catalog-cols, 4), minmax(0, 1fr));
	gap: var(--dj-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-catalogs--cols-3 {
	--dj-catalog-cols: 3;
}

.dj-catalogs__item[hidden],
.dj-catalog-feature[hidden] {
	display: none;
}

/*
 * Hover kartın yerinde duran kabından (`.dj-catalogs__item`) okunur: kart
 * yükselirken imleç alt kenarda kalsa bile hover düşmez (titreme olmaz).
 *
 * Katalog kartı: kapak kenardan kenara, dikey A4 oranında (1 : 1.414),
 * kartın köşesiyle birlikte kırpılır; hover'da hafif yükselme + gölge
 * (Satış Noktaları logo kutularıyla aynı dil). Genişlik ızgaradan gelir
 * (4 sütunda ürün kartından dar).
 */
.dj-catalog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--dj-card-radius);
	background: var(--dj-surface);
	transition: transform var(--dj-transition), box-shadow var(--dj-transition), background-color var(--dj-transition);
}

.dj-catalogs__item:hover > .dj-catalog-card,
.dj-catalog-card:focus-within {
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
	transform: translateY(-4px);
}

.dj-catalog-card__cover {
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	background: var(--dj-white);
}

.dj-catalog-card .dj-catalog-card__cover img,
.dj-catalog-feature .dj-catalog-feature__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dj-catalog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--dj-space-20) var(--dj-card-padding) var(--dj-card-padding);
}

.dj-catalog-card__meta {
	margin: 0 0 var(--dj-space-8);
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

/*
 * Ad tek satır: sığmazsa üç noktayla kesilir (tam ad `title` niteliğinde,
 * metin DOM'da tam durduğu için ekran okuyucu da tamamını okur). Böylece
 * tüm kartlar eşit yükseklikte, düğmeler aynı hizada kalır.
 */
.dj-catalog-card__title {
	overflow: hidden;
	margin: 0 0 var(--dj-space-8);
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-snug);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dj-catalog-card__size {
	margin: 0 0 var(--dj-space-20);
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-catalog-card__actions,
.dj-catalog-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dj-space-8);
	margin-top: auto;
}

/* Dar kartta iki CTA yan yana sığsın: yatay dolgu bir kademe küçük. */
.dj-catalog-card__actions .dj-cta {
	flex: 1 1 auto;
	padding-inline: calc(20 * var(--dj-u));
	font-size: var(--dj-fs-16);
}

/*
 * Öne çıkan katalog: ızgaranın üstünde tam genişlik; solda büyük kapak,
 * sağda grup · yıl, ad (H2), açıklama, PDF · boyut ve iki CTA.
 */
.dj-catalog-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
	gap: var(--dj-space-60);
	margin-block-end: var(--dj-space-40);
	padding: var(--dj-space-40);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
}

.dj-catalog-feature__cover {
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	border-radius: var(--dj-radius-sm);
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
}

.dj-catalog-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dj-space-12);
}

.dj-catalog-feature__meta {
	margin: 0;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dj-muted);
}

.dj-catalog-feature__title {
	margin: 0;
	font-size: var(--dj-fs-42);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

.dj-catalog-feature__text {
	margin: 0;
	max-width: 60ch;
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-ink);
}

.dj-catalog-feature__size {
	margin: 0;
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-catalog-feature__actions {
	margin-top: var(--dj-space-12);
	gap: var(--dj-space-12);
}

/*
 * Öne çıkan kartın düğmeleri standart CTA; ölçeklenen `--dj-fs-18` 1440'ta
 * 14 px'e iniyor ve ızgara kartlarının düğmelerinden (16 px) küçük kalıyordu.
 * Alt sınır: 16 px yazı, 44 px yükseklik; geniş ekranda standart ölçüyle büyür.
 */
.dj-catalog-feature__actions .dj-cta {
	min-height: max(44px, var(--dj-button-height-sm));
	padding-inline: max(22px, calc(30 * var(--dj-u)));
	font-size: max(16px, var(--dj-fs-18));
}

@media (prefers-reduced-motion: reduce) {
	.dj-catalogs__item:hover > .dj-catalog-card,
	.dj-catalog-card:focus-within {
		transform: none;
	}
}

.dj-catalogs__empty {
	font-size: var(--dj-fs-16);
	color: var(--dj-muted);
}

@media (max-width: 1023px) {
	.dj-catalogs__grid {
		--dj-catalog-cols: 2;
	}

	.dj-catalog-feature {
		gap: var(--dj-space-40);
		padding: var(--dj-space-30);
	}
}

@media (max-width: 767px) {
	/* Süzgeç sekmeleri tek satır, yatay kaydırılır (kaydırma çubuğu gizli). */
	.dj-catalogs__filters {
		flex-wrap: nowrap;
		margin-bottom: var(--dj-space-24);
		margin-inline: calc(-1 * var(--dj-page-padding, 20px));
		padding-inline: var(--dj-page-padding, 20px);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dj-catalogs__filters::-webkit-scrollbar {
		display: none;
	}

	.dj-catalogs__filters > li {
		flex: 0 0 auto;
	}

	.dj-catalogs__filter {
		white-space: nowrap;
	}

	/* Öne çıkan kart: kapak üstte, metin ve düğmeler altta. */
	.dj-catalog-feature {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-20);
		margin-block-end: var(--dj-space-24);
		padding: 20px;
	}

	.dj-catalog-feature__cover {
		width: min(60%, 220px);
		margin-inline: auto;
	}

	.dj-catalog-feature__title {
		font-size: var(--dj-fs-28);
	}

	.dj-catalog-feature__actions {
		width: 100%;
	}

	.dj-catalog-feature__actions .dj-cta {
		flex: 1 1 0;
		justify-content: center;
	}

	/*
	 * Izgara → liste satırları: solda 96 px dikey kapak, sağda grup · yıl,
	 * ad, PDF · boyut ve yan yana iki kısa düğme. Satırlar arası ince ayırıcı.
	 */
	.dj-catalogs__grid {
		--dj-catalog-cols: 1;

		gap: 0;
	}

	/*
	 * Süzgeç ve öne çıkan kart kapalıyken ilk satır doğrudan bandın altında:
	 * satırın üst iç boşluğu dengelenir, bant → içerik mesafesi diğer
	 * sayfalarla aynı kalır.
	 */
	.dj-catalogs__grid:first-child {
		margin-top: calc(-1 * var(--dj-space-16));
	}

	.dj-catalogs__item + .dj-catalogs__item {
		border-top: 1px solid var(--dj-line-field);
	}

	.dj-catalog-card {
		flex-direction: row;
		align-items: stretch;
		gap: var(--dj-space-16);
		padding-block: var(--dj-space-16);
		border-radius: 0;
		background: transparent;
	}

	.dj-catalogs__item:hover > .dj-catalog-card,
	.dj-catalog-card:focus-within {
		background: transparent;
		box-shadow: none;
		transform: none;
	}

	.dj-catalog-card__cover {
		flex: 0 0 96px;
		align-self: flex-start;
		border-radius: var(--dj-radius-sm);
		box-shadow: var(--dj-shadow-sm);
	}

	.dj-catalog-card__body {
		min-width: 0;
		padding: 0;
	}

	.dj-catalog-card__meta,
	.dj-catalog-card__title {
		margin-bottom: 4px;
	}

	/*
	 * Liste satırında ad en fazla iki satır, sonra üç nokta. Satır yüksekliği
	 * kapaktan gelir (136 px): iki satırlık ad sıkı satır aralığıyla ve PDF
	 * satırının daraltılmış alt boşluğuyla bu yüksekliğe sığar.
	 */
	.dj-catalog-card__title {
		display: -webkit-box;
		font-size: var(--dj-fs-16);
		line-height: var(--dj-lh-tight);
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.dj-catalog-card__size {
		margin-bottom: var(--dj-space-8);
		font-size: var(--dj-fs-14);
	}

	.dj-catalog-card__actions {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.dj-catalog-card__actions .dj-cta {
		flex: 1 1 0;
		min-width: 0;
		min-height: 38px;
		padding-inline: 10px;
		gap: 6px;
		font-size: var(--dj-fs-14);
	}
}

/* ------------------------------------------------------------------ */
/* Kullanım kılavuzları (`dijitsu-manuals`) — Ürün Katalogları kalıbı   */
/* ------------------------------------------------------------------ */

/* Süzgeç + arama tek satırda; hiza widget ayarıdır. */
.dj-manuals__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dj-space-16) var(--dj-space-24);
	margin-block-end: var(--dj-space-40);
}

.dj-manuals__bar .dj-catalogs__filters {
	margin: 0;
}

.dj-manuals__bar--center {
	justify-content: center;
}

.dj-manuals__bar--end {
	justify-content: flex-end;
}

.dj-manuals__search {
	position: relative;
	flex: 0 1 calc(360 * var(--dj-u));
	min-width: 260px;
	margin-inline-start: auto;
}

.dj-manuals__bar--center .dj-manuals__search,
.dj-manuals__bar--end .dj-manuals__search {
	margin-inline-start: 0;
}

.dj-manuals__search-icon {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--dj-form-field-x);
	display: inline-flex;
	align-items: center;
	color: var(--dj-muted);
	pointer-events: none;
}

.dj-manuals__search-icon svg {
	width: 18px;
	height: 18px;
}

.dj-manuals .dj-manuals__input {
	height: calc(44 * var(--dj-ut));
	min-height: 44px;
	padding-inline-start: calc(var(--dj-form-field-x) + 26px);
	border-radius: var(--dj-radius-pill);
}

/*
 * Izgara görünümü: ürün ızgarasının aralığı (`--dj-card-gap`), sütunlar
 * bu sayfanın — 1200 ve üstü 4, 1024–1199 3, 768–1023 2. Mobilde liste
 * satırları (katalog mobil listesi): tek sütun, aralıksız, ayırıcı çizgi
 * `.dj-catalogs__item + .dj-catalogs__item` kuralından.
 */
.dj-grid.dj-manuals__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
	.dj-grid.dj-manuals__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.dj-grid.dj-manuals__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.dj-grid.dj-manuals__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/*
 * Belge listesi (`layout: list`): satırlar tek bir ızgaranın alt ızgarası
 * (subgrid) olduğundan görsel / model-ürün / kategori / dosya / işlemler
 * sütunları başlık dahil tüm satırlarda hizalı kalır. Kategori ve dosya
 * sütunları sabit genişlikte: süzgeç / arama sonucu sütunları kaydırmaz.
 */
.dj-doclist {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) max(140px, calc(180 * var(--dj-u))) max(110px, calc(140 * var(--dj-u))) auto;
	column-gap: var(--dj-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-doclist__head,
.dj-doclist__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	padding-inline: var(--dj-space-16);
}

.dj-doclist__head {
	padding-block: 0 var(--dj-space-12);
	border-bottom: 1px solid var(--dj-line);
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-doclist__head[hidden] {
	display: none;
}

.dj-doclist__head-main {
	grid-column: 1 / 3;
}

.dj-doclist__head-actions {
	text-align: end;
}

.dj-doclist__row {
	padding-block: var(--dj-space-16);
	border-bottom: 1px solid var(--dj-line);
	transition: background-color var(--dj-transition);
}

.dj-doclist__row:hover {
	background: var(--dj-surface);
}

.dj-doclist__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 4px;
	overflow: hidden;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-sm);
	background: var(--dj-white);
}

.dj-doclist__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dj-doclist__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Model: gövde ölçüsünün bir kademe üstü (en az 18 px). */
.dj-doclist__model {
	margin: 0;
	font-size: max(1.125rem, var(--dj-fs-18));
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

.dj-manuals .dj-doclist__name {
	overflow: hidden;
	font-size: var(--dj-fs-15);
	line-height: var(--dj-lh-snug);
	color: var(--dj-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dj-manuals .dj-doclist__name:hover {
	color: var(--dj-ink);
}

.dj-doclist__cat {
	justify-self: start;
	padding: 4px 12px;
	border-radius: var(--dj-radius-pill);
	background: var(--dj-surface);
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-snug);
	color: var(--dj-muted);
	white-space: nowrap;
}

.dj-doclist__row:hover .dj-doclist__cat {
	background: var(--dj-white);
}

.dj-doclist__file {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
	white-space: nowrap;
}

.dj-doclist__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--dj-space-8);
}

@media (max-width: 767px) {
	.dj-manuals__search {
		flex: 1 1 100%;
		min-width: 0;
		margin-inline-start: 0;
	}

	.dj-manuals__bar {
		margin-block-end: var(--dj-space-30);
	}

	.dj-manuals .dj-catalogs__filters {
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dj-manuals .dj-catalogs__filter {
		flex: 0 0 auto;
	}

	/*
	 * Belge listesi, mobil: katalog listesiyle aynı aile — kartsız, ayırıcı
	 * çizgili satırlar; solda 56 px görsel, sağda model, ürün adı (en fazla
	 * iki satır), "Kategori · PDF boyutu" ve yan yana iki küçük düğme.
	 */
	.dj-doclist {
		display: block;
	}

	.dj-doclist__head {
		display: none;
	}

	.dj-doclist__row {
		grid-template-columns: calc(56px + var(--dj-space-16)) auto minmax(0, 1fr);
		grid-template-areas:
			"media text text"
			"media cat file"
			"media actions actions";
		column-gap: 0;
		align-items: start;
		padding-inline: 0;
	}

	.dj-doclist__row:hover {
		background: transparent;
	}

	/* Satır kendi alt çizgisini taşır; katalog listesinin üst çizgisi eklenmez. */
	.dj-doclist .dj-catalogs__item + .dj-catalogs__item {
		border-top: 0;
	}

	.dj-doclist__media {
		grid-area: media;
		width: 56px;
		height: 56px;
	}

	.dj-doclist__text {
		grid-area: text;
	}

	.dj-doclist__model {
		font-size: var(--dj-fs-16);
	}

	.dj-manuals .dj-doclist__name {
		display: -webkit-box;
		font-size: var(--dj-fs-14);
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.dj-doclist__cat,
	.dj-doclist__file {
		margin-top: 4px;
		font-size: var(--dj-fs-14);
		line-height: var(--dj-lh-snug);
	}

	.dj-doclist__cat {
		grid-area: cat;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.dj-doclist__row:hover .dj-doclist__cat {
		background: none;
	}

	.dj-doclist__file {
		grid-area: file;
	}

	.dj-doclist__file::before {
		content: "\00a0·\00a0";
	}

	.dj-doclist__actions {
		grid-area: actions;
		justify-content: stretch;
		margin-top: var(--dj-space-12);
	}

	.dj-doclist__actions .dj-cta {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Ortak form stili (`.dj-form`): iletişim formu ve FieldCo formu       */
/* ------------------------------------------------------------------ */

/*
 * Fynode iletişim formu dili: etiket kutunun üstünde (13 px), alan 52 px,
 * köşe 16 px, 1 px açık gri kenar. Ölçüler bu değişkenlerdedir; tema formu
 * (`.dj-contact-form`) ve FieldCo formu (`#FieldCoCustomerForms`) aynı
 * değişkenleri okur.
 */
.dj-form {
	--dj-form-label-fs: var(--dj-fs-14);
	--dj-form-label-gap: 8px;
	--dj-form-field-h: 52px;
	--dj-form-field-x: 16px;
	--dj-form-field-radius: 16px;
	--dj-form-field-border: var(--dj-line-field);
	--dj-form-gap: var(--dj-space-20);
}

.dj-contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dj-form-gap);
}

.dj-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--dj-form-label-gap);
}

.dj-contact-form__field--full,
.dj-contact-form__consent,
.dj-contact-form__actions {
	grid-column: 1 / -1;
}

.dj-contact-form__label {
	font-size: var(--dj-form-label-fs);
	font-weight: var(--dj-fw-medium);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

.dj-contact-form__input {
	width: 100%;
	height: var(--dj-form-field-h);
	padding: 0 var(--dj-form-field-x);
	border: 1px solid var(--dj-form-field-border);
	border-radius: var(--dj-form-field-radius);
	background: var(--dj-white);
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	transition: border-color var(--dj-transition), box-shadow var(--dj-transition);
}

textarea.dj-contact-form__input {
	height: auto;
	min-height: calc(3 * var(--dj-form-field-h));
	padding-block: 14px;
	line-height: var(--dj-lh-normal);
	resize: vertical;
}

.dj-contact-form__input:hover {
	border-color: var(--dj-gray-400);
}

.dj-contact-form__input:focus {
	border-color: var(--dj-ink);
	box-shadow: inset 0 0 0 1px var(--dj-ink);
	outline: none;
}

.dj-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-12);
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-relaxed);
	color: var(--dj-muted);
}

.dj-contact-form__consent input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--dj-ink);
}

/*
 * Onay metnindeki yasal bağlantı: footer'daki bağlantılarla aynı dil (net
 * alt çizgi, 1 px, 3 px aralık); yeni sekmede açılır. Seçici Elementor'un
 * `.elementor a { text-decoration: none }` kuralının üstünde kalır.
 */
.dj-contact-form .dj-contact-form__consent a {
	color: var(--dj-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.dj-contact-form .dj-contact-form__consent a:hover {
	color: var(--dj-muted);
}

/* ---- Contact Form 7 işaretlemesi (form şablonu `dj-contact-form`) ---- */

.dj-contact-form .wpcf7-form-control-wrap {
	display: block;
}

.dj-contact-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

.dj-contact-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-12);
	cursor: pointer;
}

.dj-contact-form .dj-contact-form__input.wpcf7-not-valid,
.dj-contact-form .dj-contact-form__input.wpcf7-not-valid:hover {
	border-color: var(--dj-red);
}

.dj-contact-form .wpcf7-not-valid-tip {
	margin-block-start: 6px;
	font-size: var(--dj-fs-14);
	color: var(--dj-red);
}

.dj-contact-form__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dj-space-12);
}

.dj-contact-form .wpcf7-spinner {
	margin: 0;
}

/* Sonuç mesajı: form alanlarıyla aynı köşe ve yazı ölçüsü, Türkçe metinler CF7 formunda. */
.wpcf7 form:has(> .dj-contact-form) .wpcf7-response-output {
	margin: var(--dj-space-20) 0 0;
	padding: var(--dj-space-16) var(--dj-space-20);
	border: 0;
	border-radius: var(--dj-form-field-radius, 16px);
	background: var(--dj-surface);
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
}

.wpcf7 form.sent:has(> .dj-contact-form) .wpcf7-response-output {
	background: color-mix(in srgb, var(--dj-green) 10%, var(--dj-white));
	color: var(--dj-green);
}

.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam):has(> .dj-contact-form) .wpcf7-response-output {
	background: color-mix(in srgb, var(--dj-red) 8%, var(--dj-white));
	color: var(--dj-red);
}

/* Gönderme düğmesi standart CTA'dır (`.dj-cta`). */
.dj-contact-form__actions .dj-cta {
	min-width: calc(220 * var(--dj-u));
}

@media (max-width: 767px) {
	.dj-contact-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.dj-contact-form__actions .dj-cta {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Yasal metinler (Fynode yasal sayfa düzeni)                          */
/* ------------------------------------------------------------------ */

/*
 * Bant yok: yol izi + sola hizalı sade H1 + düz metin, site kabının tam
 * genişliğinde. Üst boşluk ve yol izi → başlık aralığı sitenin yol izi
 * standardıyla aynıdır (base.css `.dj-breadcrumb`: 30 px üst, --dj-space-24 alt).
 */
.dj-legal-page {
	padding-block-start: 30px;
}

.elementor-widget-heading.dj-legal-page__title {
	margin-block-start: var(--dj-space-24);
}

/* Kategori sayfasındaki H1 ölçeği (.dj-rule-title h1). */
.elementor-widget-heading.dj-legal-page__title .elementor-heading-title {
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

/*
 * Ara başlık sitenin H3 ölçüsünde (`--dj-fs-24`, 700, sıkı satır aralığı);
 * başlık–paragraf ritmi haber içeriğindeki H3 ile aynı oranda: üstte
 * 1.3, altta 0.5 başlık yüksekliği (`--dj-legal-title-fs` üzerinden).
 */
.dj-legal-page {
	--dj-legal-title-fs: var(--dj-fs-24);
}

.elementor-widget-heading.dj-legal__title {
	margin-block-start: calc(1.3 * var(--dj-legal-title-fs));
}

.elementor-widget-heading.dj-legal__title .elementor-heading-title {
	font-size: var(--dj-legal-title-fs);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	color: var(--dj-ink);
}

/* Gövde metni: 1920'de 18, 16 px'in altına inmez (`--dj-fs-body`). */
.dj-legal__text {
	margin-block-start: calc(0.5 * var(--dj-legal-title-fs));
	font-size: var(--dj-fs-body);
	line-height: var(--dj-lh-normal);
	color: var(--dj-ink);
}

.dj-legal-page__intro {
	margin-block-start: var(--dj-space-30);
}

/*
 * Standart başlık bandı altındaki metin gövdesi: banttan içeriğe mesafe
 * diğer içerik sayfalarıyla aynıdır (içerik kabının kendi üst boşluğu);
 * gövdenin ilk öğesi ayrıca boşluk eklemez.
 */
.dj-legal-page.dj-legal-page--band {
	padding-block-start: 0;
}

.dj-legal-page--band > .elementor-element:first-child {
	margin-block-start: 0;
}

.dj-legal__text p,
.dj-legal__text ul,
.dj-legal__text ol,
.dj-legal__text table {
	margin: 0 0 var(--dj-space-16);
}

.dj-legal__text > :last-child {
	margin-bottom: 0;
}

.dj-legal__text ul,
.dj-legal__text ol {
	padding-inline-start: 1.25em;
}

.dj-legal__text ul {
	list-style: disc;
}

.dj-legal__text ol {
	list-style: decimal;
}

.dj-legal__text li + li {
	margin-top: 0.25em;
}

/* Elementor'un `.elementor a { text-decoration: none }` kuralının üstünde kalır. */
.dj-legal-page .dj-legal__text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dj-legal-page .dj-legal__text a:hover {
	color: var(--dj-muted);
}

.dj-legal__text table {
	width: 100%;
	font-size: var(--dj-fs-14);
}

.dj-legal__text th,
.dj-legal__text td {
	padding: var(--dj-space-8) var(--dj-space-12);
	border: 1px solid var(--dj-line);
	text-align: start;
	vertical-align: top;
}

.dj-legal__text th {
	background: var(--dj-surface);
	font-weight: var(--dj-fw-semibold);
}

@media (max-width: 767px) {
	.dj-legal-page {
		--dj-legal-title-fs: var(--dj-fs-20);
	}

	.dj-legal__text table {
		display: block;
		overflow-x: auto;
	}
}

/*
 * Bilgi notu (`.dj-info-note`): metnin başında küçük, açık gri kutu — ör.
 * sözleşme sayfası doğrudan açıldığında "Bu form, sipariş sırasında sizin
 * bilgilerinizle doldurulur." (Dijitsu Core, sözleşmeler).
 */
.dj-info-note {
	align-self: flex-start;
	margin: 0 0 var(--dj-space-24);
	padding: var(--dj-space-12) var(--dj-space-16);
	border-radius: var(--dj-radius-sm);
	background: var(--dj-surface);
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-normal);
}

/* ------------------------------------------------------------------ */
/* Servis başvurusu — FieldCo formu (MUI)                              */
/* ------------------------------------------------------------------ */

/*
 * Form sayfaya yerleşik (iframe değil) React/MUI uygulamasıdır. Kurallar
 * `#FieldCoCustomerForms` altına kapsanır ve yalnız `Mui*` durum/bileşen
 * sınıflarını hedefler; üretilmiş `css-…` sınıflarına bağlanılmaz. Kimlik
 * seçicisi MUI'nin kendi (tek sınıflı) kurallarından güçlüdür.
 */
#FieldCoCustomerForms {
	color: var(--dj-ink);
	font-family: var(--dj-font);
}

/* Form gelene kadar yer tutulur (sayfa zıplamasın); yüklendikten sonra yükseklik içerikten. */
#FieldCoCustomerForms:is(.is-intro, :empty) {
	min-height: calc(900 * var(--dj-ut));
}

/* Ara ekran (Hizmetler → Montaj Talebi → Oluştur) otomatik geçilirken gizli. */
#FieldCoCustomerForms.is-intro > * {
	visibility: hidden;
}

#FieldCoCustomerForms :is(.MuiTypography-root, .MuiInputBase-root, .MuiInputBase-input, .MuiFormLabel-root, .MuiInputLabel-root, .MuiButton-root, .MuiFormControlLabel-label, .MuiAutocomplete-input) {
	font-family: var(--dj-font);
	letter-spacing: normal;
}

/* Formun kendi başlığı ("Montaj Kaydı") bir h1'dir; sayfanın başlığı bantta olduğundan gizlenir. */
#FieldCoCustomerForms h1 {
	display: none;
}

#FieldCoCustomerForms :is(h2, h3, h4, h5, h6) {
	font-family: var(--dj-font);
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	color: var(--dj-ink);
}

/*
 * Form kabı: çerçevesiz, dış boşluksuz; ilk etiket satırı soldaki Çağrı
 * Merkezi kartının üst kenarıyla aynı hizadadır (FieldCo kabının kendi
 * üst boşluğu 20 + 30 px idi).
 */
#FieldCoCustomerForms .MuiBox-root:has(> .MuiPaper-root) {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* Kaydet satırı: düğme sola, form alanlarıyla aynı hizada; ek boşluk yok. */
#FieldCoCustomerForms .MuiBox-root:has(> .MuiButton-sizeLarge) {
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: start;
}

/* FieldCo imza satırı ("COPYRIGHT © … FieldCo …") gösterilmez. */
#FieldCoCustomerForms div:has(> a[href*="fieldco.com.tr"]) {
	display: none;
}

/* Yalnız formun kendi kabı (açılır liste kutusu da bir MuiPaper'dır; ona uymaz). */
#FieldCoCustomerForms .MuiBox-root > .MuiPaper-root {
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Etiket kutunun üstünde (MUI'nin kayan etiketi yerine), `.dj-form` ölçüleri. */
#FieldCoCustomerForms .MuiInputLabel-root {
	position: static;
	max-width: none;
	margin-bottom: var(--dj-form-label-gap);
	overflow: visible;
	transform: none;
	color: var(--dj-ink);
	font-size: var(--dj-form-label-fs);
	font-weight: var(--dj-fw-medium);
	line-height: var(--dj-lh-snug);
	white-space: normal;
}

#FieldCoCustomerForms .MuiInputLabel-root.Mui-focused {
	color: var(--dj-ink);
}

/* Zorunlu alan yıldızı sitenin formlarındaki gibi etiketle aynı renkte (ink). */
#FieldCoCustomerForms :is(.MuiFormLabel-asterisk, .MuiInputLabel-asterisk) {
	color: var(--dj-ink);
}

/*
 * FieldCo'nun etiket içindeki renkli yardımcı metni ("(herhangi bir model
 * seçimi yapabilirsiniz.)"): satır içi rengi pages.js kaldırır, sınıf ekler.
 */
#FieldCoCustomerForms .dj-fc-hint {
	color: var(--dj-muted);
	font-weight: var(--dj-fw-regular);
}

#FieldCoCustomerForms .MuiOutlinedInput-root {
	min-height: var(--dj-form-field-h);
	padding-block: 0;
	border-radius: var(--dj-form-field-radius);
	background: var(--dj-white);
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
}

#FieldCoCustomerForms .MuiOutlinedInput-root .MuiOutlinedInput-input {
	box-sizing: border-box;
	height: var(--dj-form-field-h);
	padding: 0 var(--dj-form-field-x);
}

/* Seçim kutuları (Autocomplete): aynı yükseklik, ok düğmesine yer bırakılır. */
#FieldCoCustomerForms .MuiAutocomplete-inputRoot {
	padding-inline: 0 calc(var(--dj-form-field-x) + 32px);
}

#FieldCoCustomerForms .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
	padding: 0 var(--dj-form-field-x);
}

#FieldCoCustomerForms .MuiAutocomplete-endAdornment {
	inset-inline-end: calc(var(--dj-form-field-x) - 6px);
}

/*
 * Çentikli kenar yerine düz 1 px çerçeve (etiket artık kutunun dışında).
 * Kenar açıkça yazılır: formun Bootstrap sıfırlaması (`fieldset { border: 0 }`)
 * kaba kapsandığı için MUI'nin sınıf kuralından güçlüdür.
 */
#FieldCoCustomerForms .MuiOutlinedInput-notchedOutline {
	top: 0;
	margin: 0;
	padding: 0 var(--dj-form-field-x);
	border: 1px solid var(--dj-form-field-border);
	border-color: var(--dj-form-field-border);
	border-radius: var(--dj-form-field-radius);
}

#FieldCoCustomerForms .MuiOutlinedInput-notchedOutline legend {
	display: none;
}

#FieldCoCustomerForms .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
	border-color: var(--dj-gray-400);
}

#FieldCoCustomerForms .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
	border-width: 2px;
	border-color: var(--dj-ink);
}

#FieldCoCustomerForms .MuiCheckbox-root {
	color: var(--dj-gray-400);
}

#FieldCoCustomerForms .MuiCheckbox-root.Mui-checked {
	color: var(--dj-ink);
}

#FieldCoCustomerForms .MuiFormControlLabel-label {
	font-size: var(--dj-fs-14);
	color: var(--dj-ink);
}

/*
 * Beyan düğmeleri ("Onay Beyanı", "KVKK Beyanı"): sitenin ikincil CTA'sı
 * (`.dj-cta--secondary`, ana sayfadaki "Ürünleri Görüntüle") — beyaz hap,
 * açık gri çerçeve, sağda ok; hover/odakta çerçeve siyah, ok 2 px ilerler.
 * Düğme FieldCo'nundur; ok CTA okunun maskesiyle `::after`.
 */
#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeSmall {
	display: inline-flex;
	gap: calc(9.4 * var(--dj-u));
	min-height: max(36px, calc(50 * var(--dj-u)));
	padding: 0 calc(22 * var(--dj-u));
	border: 1px solid var(--dj-line-field);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-white);
	box-shadow: none;
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	transition: border-color var(--dj-transition);
}

#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeSmall::after {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 9px;
	background: currentColor;
	-webkit-mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	transition: transform var(--dj-transition);
}

@media (hover: hover) {
	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeSmall:hover {
		border-color: var(--dj-ink);
		background: var(--dj-white);
	}

	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeSmall:hover::after {
		transform: translateX(2px);
	}
}

#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeSmall.Mui-focusVisible {
	border-color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/*
 * Kaydet: standart CTA (`.dj-cta`) — siyah pill, sağda ok, hover'da beyaz
 * zemin + siyah metin ve ok 2 px ilerler. Düğme FieldCo'nundur; ok, CTA
 * okunun maskesiyle `::after` olarak eklenir.
 */
#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge {
	display: inline-flex;
	gap: calc(12.8 * var(--dj-u));
	width: auto;
	min-width: calc(220 * var(--dj-u));
	min-height: var(--dj-button-height-sm);
	/* Onay satırlarından sonra sitenin standart form boşluğu. */
	margin-top: var(--dj-space-24);
	padding: 0 calc(30 * var(--dj-u));
	border: 1px solid var(--dj-ink);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	box-shadow: none;
	color: var(--dj-white);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	line-height: 1;
	text-transform: none;
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge::after {
	content: "";
	flex: 0 0 auto;
	width: calc(6.2 * var(--dj-u));
	min-width: 5px;
	height: calc(10.8 * var(--dj-u));
	min-height: 9px;
	background: currentColor;
	-webkit-mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	transition: transform var(--dj-transition);
}

@media (hover: hover) {
	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge:not(.Mui-disabled):hover {
		background: var(--dj-white);
		color: var(--dj-ink);
	}

	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge:not(.Mui-disabled):hover::after {
		transform: translateX(2px);
	}
}

#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge.Mui-focusVisible {
	background: var(--dj-white);
	color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Form eksikken pasif: aynı siyah düğmenin %40 opak hâli; hover çalışmaz. */
#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge.Mui-disabled {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeSmall::after,
	body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button::after,
	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge::after {
		transition: none;
		transform: none;
	}
}

/*
 * Açılır listeler (Cihaz, Marka, Model, İl, İlçe, Mahalle). FieldCo bunları
 * form kabının içine basıyor (`disablePortal`); portal'a taşınırsa da aynı
 * görünsün diye seçici gövde sınıfını (`.dj-fieldco-page`, yalnız bu sayfa)
 * da kapsar. Kimlik seçicisi, kapsanmış Bootstrap'ın `ul { padding-left:
 * 2rem }` kuralını ve MUI'nin sınıf kurallarını geçer.
 */
:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper .MuiAutocomplete-paper {
	overflow: hidden;
	margin-block-start: 4px;
	border: 1px solid var(--dj-line-field);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
	color: var(--dj-ink);
	font-family: var(--dj-font);
}

/* Altta yer yoksa MUI listeyi alanın üstüne çevirir; boşluk yine alan tarafında. */
:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper[data-popper-placement^="top"] .MuiAutocomplete-paper {
	margin-block: 0 4px;
}

:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper .MuiAutocomplete-listbox {
	max-height: min(320px, 40vh);
	margin: 0;
	padding: 6px 0;
	list-style: none;
	overflow-y: auto;
}

:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper .MuiAutocomplete-option {
	justify-content: flex-start;
	min-height: 44px;
	padding: 10px var(--dj-form-field-x, 16px);
	font-family: var(--dj-font);
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-snug);
	text-align: start;
	color: var(--dj-ink);
}

:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper .MuiAutocomplete-option:is(.Mui-focused, :hover, .Mui-focusVisible) {
	background: var(--dj-surface);
}

:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected="true"] {
	background: transparent;
	font-weight: var(--dj-fw-semibold);
}

:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected="true"]:is(.Mui-focused, :hover) {
	background: var(--dj-surface);
}

:is(#FieldCoCustomerForms, body.dj-fieldco-page) .MuiAutocomplete-popper :is(.MuiAutocomplete-noOptions, .MuiAutocomplete-loading) {
	padding: 12px var(--dj-form-field-x, 16px);
	font-family: var(--dj-font);
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-snug);
	color: var(--dj-muted);
}

/*
 * Beyan diyalogları ("Onay Beyanı", "KVKK Beyanı"): gövdeye basılır;
 * yalnız bu sayfada (`.dj-fieldco-page`). Karartma, beyaz kutu, sitenin
 * H3'ü ve gövde metni; metin kaydırılır, düğmeler sabit altta. "Onayla"
 * siyah CTA (`.dj-cta`), "İptal" ikincil CTA (`.dj-cta--secondary`).
 */
body.dj-fieldco-page .MuiDialog-root .MuiBackdrop-root {
	background: var(--dj-overlay);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialog-paper {
	display: flex;
	flex-direction: column;
	width: calc(100% - 32px);
	max-width: 640px;
	max-height: calc(100% - 64px);
	margin: 16px;
	padding: var(--dj-space-30);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-lg);
	color: var(--dj-ink);
	font-family: var(--dj-font);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialog-paper > form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogTitle-root {
	margin: 0 0 var(--dj-space-16);
	padding: 0;
	font-family: var(--dj-font);
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
	color: var(--dj-ink);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogContent-root {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 var(--dj-space-8) 0 0;
	overflow-y: auto;
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	color: var(--dj-ink);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogContent-root :is(h1, h2, h3, h4) {
	margin: 0 0 var(--dj-space-12);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogContent-root :is(p, ul, ol) {
	margin: 0 0 var(--dj-space-12);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogContent-root :is(ul, ol) {
	padding-inline-start: 1.25em;
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--dj-space-12);
	margin: 0;
	padding: var(--dj-space-20) 0 0;
	border-top: 1px solid var(--dj-line);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(12.8 * var(--dj-u));
	min-height: var(--dj-button-height-sm);
	margin: 0;
	padding: 0 calc(30 * var(--dj-u));
	border: 1px solid var(--dj-line-field);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-white);
	box-shadow: none;
	color: var(--dj-ink);
	font-family: var(--dj-font);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button::after {
	content: "";
	flex: 0 0 auto;
	width: calc(6.2 * var(--dj-u));
	min-width: 5px;
	height: calc(10.8 * var(--dj-u));
	min-height: 9px;
	background: currentColor;
	-webkit-mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	transition: transform var(--dj-transition);
}

/* "Onayla" (gönder): siyah CTA. */
body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button[type="submit"] {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
}

@media (hover: hover) {
	body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button:hover {
		border-color: var(--dj-ink);
		background: var(--dj-white);
		color: var(--dj-ink);
	}

	body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button:hover::after {
		transform: translateX(2px);
	}
}

body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button:focus-visible {
	border-color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	body.dj-fieldco-page .MuiDialog-root .MuiDialog-paper {
		max-height: calc(100% - 32px);
		padding: 20px;
	}

	body.dj-fieldco-page .MuiDialog-root .MuiDialogActions-root > button {
		flex: 1 1 0;
		padding-inline: 16px;
	}
}

/*
 * Masaüstü/tablet: alanlar iki sütunlu ızgarada (FieldCo'nun sm-6 düzeniyle
 * aynı); iki onay satırı kendi satırlarında yan yana başlar — tek sayıda
 * alan olduğunda ilk onay son alanın yanına düşmez. MUI'nin aralık
 * (padding + negatif kenar) sistemi olduğu gibi çalışır.
 */
@media (min-width: 768px) {
	#FieldCoCustomerForms .MuiPaper-root > .MuiGrid-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#FieldCoCustomerForms .MuiPaper-root > .MuiGrid-container > .MuiGrid-item {
		max-width: none;
	}

	#FieldCoCustomerForms .MuiGrid-item:has(> .MuiFormControlLabel-root):not(.MuiGrid-item:has(> .MuiFormControlLabel-root) ~ .MuiGrid-item) {
		grid-column-start: 1;
	}
}

@media (max-width: 767px) {
	#FieldCoCustomerForms .MuiButton-root.MuiButton-sizeLarge {
		width: 100%;
	}

	/*
	 * Kısa alanlar ikişer (Ad | Soyad, İl | İlçe, Apartman/Blok | Sokak,
	 * Kapı No | Daire No); uzun alanlar (Mahalle dahil) tam genişlik.
	 * Alanları pages.js etiket metninden `data-dj-field` ile işaretler
	 * ("İl Seçiniz" → `il-seciniz`). Apartman/Blok,
	 * Sokak'ın önüne alınır; sonraki alanlar sıralarını korur.
	 */
	#FieldCoCustomerForms .MuiGrid-item[data-dj-field] {
		flex-basis: 100%;
		max-width: 100%;
	}

	#FieldCoCustomerForms .MuiGrid-item:is([data-dj-field="ad"], [data-dj-field="soyad"], [data-dj-field="il-seciniz"], [data-dj-field="ilce-seciniz"], [data-dj-field="apartman-blok"], [data-dj-field="sokak"], [data-dj-field="kapi-no"], [data-dj-field="daire-no"]) {
		flex-basis: 50%;
		max-width: 50%;
	}

	/* Onay satırları: metin üstte, beyan düğmesi altında (iki satır aynı düzende). */
	#FieldCoCustomerForms .MuiGrid-item:has(> .MuiFormControlLabel-root) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	#FieldCoCustomerForms .MuiGrid-item[data-dj-field="apartman-blok"] {
		order: 1;
	}

	#FieldCoCustomerForms .MuiGrid-item[data-dj-field="sokak"] {
		order: 2;
	}

	#FieldCoCustomerForms .MuiGrid-item:is([data-dj-field="kapi-no"], [data-dj-field="daire-no"]),
	#FieldCoCustomerForms .MuiGrid-item:has(> .MuiFormControlLabel-root) {
		order: 3;
	}
}

/* ------------------------------------------------------------------ */
/* Alt Sayfa Kartları (`dijitsu-subpage-cards`; /destek/, /bilgilendirme/) */
/* ------------------------------------------------------------------ */

/* Destek kartları (açık zemin, home.css) ve sade kartlar alt alta. */
.dj-subpages > * + * {
	margin-block-start: var(--dj-space-30);
}

/* Sade kart: ana sayfa kartıyla eşleşmeyen alt sayfa. */
.dj-hub__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dj-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-hub__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-16);
	min-height: max(64px, calc(80 * var(--dj-u)));
	padding: var(--dj-space-20) var(--dj-space-24);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
	color: var(--dj-ink);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	transition: background-color var(--dj-transition);
}

.dj-hub__card svg {
	flex: 0 0 auto;
	width: 7px;
	height: 12px;
	transition: transform var(--dj-transition);
}

.dj-hub__card:hover,
.dj-hub__card:focus-visible {
	background: var(--dj-surface-tile);
	color: var(--dj-ink);
}

.dj-hub__card:hover svg {
	transform: translateX(2px);
}

@media (max-width: 1023px) {
	.dj-hub__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.dj-hub__list {
		grid-template-columns: minmax(0, 1fr);
	}
}