/* Güven bandı ve site alt bilgisi. */

/*
 * Güven bandı — XD ölçüleri (Anasayfa artboard):
 *   ayırıcı  `Line 1` @105.5, 6232 · 1710 uzunluk · rgb(222,226,230) 1 px
 *   sütunlar 105 / 540 / 975 / 1410 (adım 435), metin sütun + 100
 *   ikonlar  68×78 · 82×82 · 83×82 · 75×80 (doğal ölçü, sola hizalı)
 *   başlık   SemiBold 24, taban 6356 · gövde Regular 16, satır adımı 20
 *
 * Ayırıcı bölümün kenarlığı değil listenin üst çizgisidir: bölüm kenarlığı
 * 1920 boyunca uzuyordu, tasarımda ise kap sınırlarına hizalı.
 */
/*
 * Üst boşluk global tek kaynaktan gelir (`--dj-content-trust-gap`): aynı
 * görünümde bütün sayfalarda aynı değer. Sayfa şablonları bu aralığa kendi
 * alt boşluklarını eklemez — eklendiği yerler tek tek sıfırlandı.
 */
.dj-trust {
	margin-block-start: var(--dj-content-trust-gap);
	padding-block: 0 var(--dj-space-100);
}

/* Nokta gezinmesi yalnız dar ekranda görünür (bkz. home.css ≤767). */
.dj-trust__dots {
	display: none;
}

.dj-trust__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dj-line);
	cursor: pointer;
	transition: background-color var(--dj-transition);
}

.dj-trust__dot.is-active {
	background: var(--dj-ink);
}

.dj-trust__dot:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dj-gutter);
	list-style: none;
	border-top: 1px solid var(--dj-line);
	/* XD: ayırıcıdan ikon satırının üstüne 99. */
	padding-block-start: calc(97 * var(--dj-u));
}

/*
 * Her öğe iki sütunlu sabit bir ızgaradır: ikon alanı 100, metin hemen
 * ardından başlar. Tasarımdaki sistem bu — ikonların doğal genişlikleri
 * farklı olsa da dört sütunda metin aynı noktada başlar.
 */
.dj-trust__item {
	display: grid;
	grid-template-columns: calc(100 * var(--dj-u)) minmax(0, 1fr);
	align-items: center;
}

.dj-trust__icon {
	width: calc(var(--dj-trust-icon-w, 80) * var(--dj-u));
	height: calc(var(--dj-trust-icon-h, 80) * var(--dj-u));
	flex: 0 0 auto;
	color: var(--dj-ink);
}

.dj-trust__title {
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
	/* XD: başlık mürekkebi 6337.5–6361, gövdenin ilk satırı 6375 → aralık 14. */
	margin-bottom: calc(9.7 * var(--dj-u));
}

/*
 * XD'de dört açıklama da iki satır; ölçü en uzun ilk satıra göre 230.
 * Sabit `--dj-fs-16` 1470'te 20.9 tasarım px'e çıkıyordu.
 * `min-height` iki satırlık yüksekliği ayırır: metni kısa olan sütunda da
 * başlıklar aynı hizada kalır ve ikonlar aynı optik eksende durur.
 */
.dj-trust__text {
	/* Kısa kart açıklaması: yardımcı metin tabanı 14 px (token). */
	font-size: var(--dj-fs-16-fluid);
	color: var(--dj-ink);
	line-height: 1.25;
	/* 14 px tabanda 1440'ta da iki satıra sığsın; 1920'de 230 px aynen. */
	max-width: max(calc(230 * var(--dj-u)), 13em);
	min-height: calc(40 * var(--dj-u));
	margin: 0;
}

/* ------------------------------------------------------------------ */

/*
 * Alt bilgi — XD ölçüleri (Anasayfa artboard, tasarım px):
 *   zemin        `Rectangle 576` @0, 6511 · 1920 × 774 · #101213
 *   kap          105 – 1815 (1710)
 *   logo         105, 6611 · 224 × 48
 *   tüketici     `Rectangle 194` 105, 6689 · 260 × 80 · r15 · 1 px beyaz kontur
 *   sütun başı x 508 / 720 / 952 / 1206 / 1436 → 403 · 212 · 232 · 254 · 230 · 379
 *   bülten       `Rectangle 596` 1436, 6781 · 380 × 60 · r16 · #27272A
 *                `Rectangle 602` 1705, 6791 · 100 × 40 · r8 · #101213
 *   sosyal çizgi `Line 3/4` 105.5–855.5 ve 1065.5–1815.5 @7065.5 · 1 px #27272A
 *   sosyal daire Ø48 · 1 px #EAEAEA · merkez x 858/926/994/1062 · merkez y 7131
 *   alt çizgi    `Line 2` 105.5–1815.5 @7185 · 1 px #27272A
 *   alt satır    taban 7241 · telif merkezi 960 · `arina-logo` 1722.57–1815.5 @7220
 *
 * Üç bölge ayrı kutulardır (`__main` · `__social` · `__bottom`); tek bir
 * büyük esnek kutuya sıkıştırılmaz.
 */
.dj-footer {
	/* XD rgb(39,39,42) — ayırıcılar ve bülten kutusu aynı ton. */
	--dj-footer-line: var(--dj-ink-700);
	/* Sosyal daire konturu — XD rgb(234,234,234). */
	--dj-footer-ring: #eaeaea;

	background: var(--dj-ink);
	color: var(--dj-gray-300);
	/* Zeminin üstünden logo mürekkebine 100. */
	padding-block: calc(100 * var(--dj-u)) 0;
	font-size: var(--dj-fs-16-fluid);
	line-height: 1.25;
}

/*
 * Bağlantı durumu: tasarımdaki soluk beyaz → hover'da tam beyaz.
 * Hareket, ölçek ya da alt çizgi animasyonu yok; yalnız renk geçişi.
 */
.dj-footer a {
	color: var(--dj-gray-300);
	transition: color 180ms ease;
}

.dj-footer a:hover,
.dj-footer a:focus-visible {
	color: var(--dj-white);
}

/* --- A) Ana içerik --- */

.dj-footer__main {
	display: grid;
	grid-template-columns:
		calc(403 * var(--dj-u))
		calc(928 * var(--dj-u))
		minmax(0, calc(379 * var(--dj-u)));
	/* Son satırın (Mail) altından sosyal bandın çizgisine. */
	padding-block-end: calc(67 * var(--dj-u));
}

.dj-footer__brand {
	display: grid;
	justify-items: start;
	align-content: start;
}

.dj-footer__logo {
	width: calc(224 * var(--dj-u));
	line-height: 0;
}

.dj-footer__logo .dj-logo {
	display: block;
	width: 100%;
	height: auto;
	color: var(--dj-white);
}

/*
 * Çağrı merkezi kutusu. İkon XD'deki müşteri temsilcisi çizimidir
 * (`consumer-line`, 54.1 × 48.55) — genel telefon ikonu değil. Kutu tasarım
 * genişliğinden (260) başlar, uzun numarada içeriğe göre büyür; numara
 * tek satırdır.
 */
.dj-hotline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: calc(10 * var(--dj-u));
	box-sizing: border-box;
	width: max-content;
	min-width: calc(260 * var(--dj-u));
	max-width: 100%;
	height: calc(80 * var(--dj-u));
	/* İkon + metin grubu kutunun içinde yatay ve dikey ortalı. */
	grid-template-columns: auto auto;
	justify-content: center;
	align-content: center;
	padding-inline: calc(20 * var(--dj-u));
	/* Logo mürekkebinin altından kutunun üstüne 30. */
	margin-block-start: calc(30 * var(--dj-u));
	border: 1px solid var(--dj-white);
	border-radius: calc(15 * var(--dj-u));
	color: var(--dj-white);
	transition: background-color 180ms ease, color 180ms ease;
}

/* `.dj-footer a` kuralı aynı özgüllükte olduğu için kutu rengi burada yazılır. */
.dj-footer a.dj-hotline {
	color: var(--dj-white);
}

.dj-footer a.dj-hotline:hover,
.dj-footer a.dj-hotline:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
}

.dj-hotline__icon {
	display: block;
	width: calc(54.1 * var(--dj-u));
	height: calc(48.55 * var(--dj-u));
}

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

.dj-hotline__label {
	display: block;
	font-size: var(--dj-fs-14-fluid);
	font-weight: var(--dj-fw-bold);
	line-height: 1.2;
	color: inherit;
}

.dj-hotline__number {
	display: block;
	font-size: var(--dj-fs-26);
	font-weight: var(--dj-fw-extrabold);
	/* XD: etiket tabanı 6719 → numara tabanı 6747.55 (28.55). */
	line-height: calc(30 * var(--dj-ut));
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: inherit;
}

/*
 * Adres bloğu — XD satır adımı 28, gruplar arası 40 (yani 12 ek boşluk).
 * İçerik site ayarlarından gelir; şablonda ikinci bir sabit kopya yoktur.
 */
.dj-footer__address {
	font-style: normal;
	/* Kutunun altından ilk satırın tabanına 46. */
	margin-block-start: calc(25 * var(--dj-u));
	max-width: calc(330 * var(--dj-u));
}

.dj-footer__address p {
	margin: 0;
	line-height: calc(28 * var(--dj-ut));
}

.dj-footer__address p + p {
	margin-block-start: calc(12 * var(--dj-u));
}

.dj-footer__address strong {
	color: var(--dj-white);
	font-weight: var(--dj-fw-semibold);
}

/* Bağlantı sütunları: XD başlangıçları 508 / 720 / 952 / 1206. */
.dj-footer__columns {
	display: grid;
	grid-template-columns:
		calc(212 * var(--dj-u))
		calc(232 * var(--dj-u))
		calc(254 * var(--dj-u))
		minmax(0, 1fr);
	align-content: start;
}

/*
 * Başlık tabanı 6654; logo mürekkebi 6611'de başladığı için sütunlar ve
 * bülten bu farkı üst boşlukla kapatır.
 */
.dj-footer__columns,
.dj-footer__newsletter {
	padding-block-start: calc(24 * var(--dj-u));
}

.dj-footer__heading {
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-white);
	line-height: 1.2;
	margin: 0;
}

.dj-footer__links {
	list-style: none;
	/* Başlık tabanından ilk satırın tabanına 51. */
	margin-block-start: calc(24.4 * var(--dj-u));
}

.dj-footer__links li {
	line-height: calc(32 * var(--dj-ut));
}

/* --- Bülten sütunu --- */

.dj-footer__newsletter {
	display: block;
}

.dj-footer__text {
	/* Başlık tabanından gövdenin ilk tabanına 51; satır adımı 26. */
	margin-block: calc(27 * var(--dj-u)) 0;
	margin-inline: calc(3 * var(--dj-u)) 0;
	/* XD metin çerçevesi 1439 – 1815; satır sonları tasarımdakiyle aynı. */
	max-width: calc(376 * var(--dj-u));
	line-height: calc(26 * var(--dj-ut));
}

/* XD: 380 × 60 alan, #27272A zemin, 16 köşe; iç düğme 100 × 40, köşe 8. */
.dj-newsletter {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: calc(380 * var(--dj-u));
	max-width: 100%;
	height: calc(60 * var(--dj-u));
	/* Gövdenin son tabanından kutunun üstüne 40. */
	margin-block-start: calc(17 * var(--dj-u));
	background: var(--dj-footer-line);
	border: 0;
	border-radius: calc(16 * var(--dj-u));
	padding: calc(10 * var(--dj-u));
	padding-inline-start: calc(15 * var(--dj-u));
}

.dj-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--dj-white);
	font-size: var(--dj-fs-14-fluid);
	height: calc(40 * var(--dj-u));
}

.dj-newsletter__input::placeholder {
	color: var(--dj-gray-300);
	opacity: 1;
}

.dj-newsletter__input:focus {
	outline: none;
}

.dj-newsletter:has(.dj-newsletter__input:focus-visible) {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-newsletter__submit {
	flex: 0 0 auto;
	width: calc(100 * var(--dj-u));
	height: calc(40 * var(--dj-u));
	border-radius: calc(8 * var(--dj-u));
	background: var(--dj-ink);
	color: var(--dj-gray-300);
	font-size: var(--dj-fs-14-fluid);
	font-weight: var(--dj-fw-bold);
	transition: background-color var(--dj-transition), color var(--dj-transition);
}

/*
 * Ters çevirme yalnız renktir; kutu, dolgu ve yazı kalınlığı sabit kalır.
 * Ok `currentColor` ile metinle birlikte döner, kayması base.css'tedir.
 * Dokunmatikte yapışık hover olmasın diye hover işaretçi cihazına bağlı.
 */
@media (hover: hover) {
	.dj-newsletter__submit:hover {
		background: var(--dj-white);
		color: var(--dj-ink);
	}
}

.dj-newsletter__submit:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
}

/* ---- Contact Form 7 (form şablonu `.dj-newsletter` kutusu) ---- */

.dj-newsletter .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.dj-newsletter .dj-newsletter__input {
	width: 100%;
}

/*
 * Alan altı hata metni 60 px'lik kutuyu bozar: kutu kırmızı çerçeveyle
 * işaretlenir, açıklama aşağıdaki sonuç satırında (ekran okuyucu için
 * CF7'nin kendi `screen-reader-response` alanında) verilir. Gönderim
 * sırasında düğme pasifleşir; ayrı dönen çark gösterilmez.
 */
.dj-newsletter .wpcf7-not-valid-tip,
.dj-newsletter .wpcf7-spinner {
	display: none;
}

.dj-newsletter:has(.wpcf7-not-valid) {
	outline: 2px solid var(--dj-red-bright);
	outline-offset: 2px;
}

.dj-newsletter .dj-newsletter__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.wpcf7 form:has(> .dj-newsletter) .wpcf7-response-output {
	margin: var(--dj-space-12) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--dj-fs-14-fluid);
	line-height: 1.4;
	color: var(--dj-gray-300);
}

.wpcf7 form.sent:has(> .dj-newsletter) .wpcf7-response-output {
	color: var(--dj-white);
}

.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam):has(> .dj-newsletter) .wpcf7-response-output {
	color: var(--dj-red-bright);
}

.dj-footer__fineprint {
	/* Kutunun altından ilk satırın tabanına 36; satır adımı 26. */
	margin-block: calc(17.3 * var(--dj-u)) 0;
	margin-inline: calc(3 * var(--dj-u)) 0;
	max-width: calc(372 * var(--dj-u));
	font-size: var(--dj-fs-16-fluid);
	line-height: calc(26 * var(--dj-ut));
	color: var(--dj-gray-300);
}

/*
 * Onay satırındaki üç yasal bağlantı tek ailedir: gövdeyle aynı punto ve renk,
 * net alt çizgi, hover/odakta beyaza açılır. Hedefi yayımlanmamış olan öğe
 * bağlantı değil düz metin basıldığı için bu biçimi almaz — böylece tıklanabilir
 * olan ile olmayan görsel olarak da ayrışır.
 */
/*
 * `.dj-footer` ile nitelendirilir: alt bilgi Elementor şablonundan basıldığında
 * Elementor'un `.elementor a { text-decoration: none }` sıfırlaması (0,1,1)
 * eşit özgüllükte ve sonra yükleniyordu, alt çizgi kayboluyordu.
 */
.dj-footer .dj-footer__fineprint a {
	color: var(--dj-gray-300);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 180ms ease;
}

.dj-footer__fineprint a:focus-visible {
	color: var(--dj-white);
}

@media (hover: hover) {
	.dj-footer__fineprint a:hover {
		color: var(--dj-white);
	}
}

/* --- B) Sosyal medya bandı --- */

/*
 * Başlık iki yatay çizginin arasında durur: çizgiler kap sınırına bağlıdır
 * (105.5 → 855.5 ve 1065.5 → 1815.5), viewport genişliğinde değil. Izgara
 * `1fr auto 1fr` olduğu için başlık her zaman kabın merkezinde kalır ve
 * çeviriyle uzunluğu değişse de çizgiler kendiliğinden ayarlanır.
 */
.dj-footer__social {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	/* XD: çizgi 7065.5, başlık gövdesi bunun üstünde ortalı. */
	column-gap: calc(39 * var(--dj-u));
}

.dj-footer__social::before,
.dj-footer__social::after {
	content: "";
	height: 1px;
	background: var(--dj-footer-line);
}

.dj-footer__social::before {
	grid-column: 1;
	grid-row: 1;
}

.dj-footer__social::after {
	grid-column: 3;
	grid-row: 1;
}

.dj-footer__social-title {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.2;
	color: var(--dj-white);
	margin: 0;
	white-space: nowrap;
	/*
	 * Çizgiler satırın dikey ortasına oturur; XD'de çizgi başlık tabanının
	 * 5.9 üstünde. Fark akışı etkilemeyecek biçimde kapatılır.
	 */
	position: relative;
	inset-block-start: calc(-1.4 * var(--dj-u));
}

.dj-social {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	justify-content: center;
	/* Merkez adımı 68, çap 48 → aradaki boşluk 20. */
	gap: calc(20 * var(--dj-u));
	list-style: none;
	/* Çizgiden dairenin üstüne 41.5. */
	margin-block-start: calc(29.2 * var(--dj-u));
}

.dj-social__item {
	display: flex;
}

.dj-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(48 * var(--dj-u));
	height: calc(48 * var(--dj-u));
	border-radius: 50%;
	border: 1px solid var(--dj-footer-ring);
	color: var(--dj-white);
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.dj-footer a.dj-social__link {
	color: var(--dj-white);
}

/*
 * Hover dili tüketici hattı kutusuyla aynı: beyaz zemin + koyu ikon, kontur
 * beyaza döner. Geometri (çap, kontur kalınlığı, ikon ölçüsü) değişmez.
 *
 * Seçici bilerek öğe adı içermez: `.dj-social__link` hangi etikette olursa
 * olsun görsel durum çalışır. Özgüllük (0,3,0) — temel renk kuralı
 * `.dj-footer a.dj-social__link` (0,2,1) ve genel `.dj-footer a:hover` (0,1,1)
 * bunun altında kalır; aksi hâlde beyaz zemin üzerinde ikon beyaz kalıyordu.
 * Dokunmatikte yapışık hover olmaması için `hover: hover` ile sınırlı; klavye
 * odağı aynı görünümü medya sorgusundan bağımsız alır.
 */
.dj-footer .dj-social__link:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
	border-color: var(--dj-white);
}

@media (hover: hover) {
	.dj-footer .dj-social__link:hover {
		background: var(--dj-white);
		color: var(--dj-ink);
		border-color: var(--dj-white);
	}
}

/* Her ikon XD'deki doğal ölçüsünde; daire içinde optik olarak ortalı. */
.dj-social__link svg {
	display: block;
	height: calc(22 * var(--dj-u));
	width: auto;
}

.dj-social__link[data-network="facebook"] svg {
	width: calc(12.38 * var(--dj-u));
}

.dj-social__link[data-network="instagram"] svg {
	width: calc(22 * var(--dj-u));
}

.dj-social__link[data-network="x"] svg {
	width: calc(21.53 * var(--dj-u));
}

/*
 * TikTok ve LinkedIn tasarımda yok; çizimleri WordPress çekirdeğinden geliyor.
 * Optik ölçü aileye eşitlendi: TikTok ailedeki dik harflerle aynı 22 yükseklik,
 * LinkedIn dolu bir kare olduğu için Instagram'ın 22'lik konturlu karesine
 * göre bir tık küçültüldü (20.5) — aksi hâlde yanındakilerden ağır görünüyor.
 */
.dj-social__link[data-network="tiktok"] svg {
	width: calc(19.07 * var(--dj-u));
	height: calc(22 * var(--dj-u));
}

.dj-social__link[data-network="linkedin"] svg {
	width: calc(20.5 * var(--dj-u));
	height: calc(20.5 * var(--dj-u));
}

/* --- C) Alt şerit --- */

.dj-footer__bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--dj-space-20);
	/* XD: daire altı 7155 → çizgi 7185 (30); çizgiden zemin sonuna 100. */
	margin-block-start: calc(30 * var(--dj-u));
	border-top: 1px solid var(--dj-footer-line);
	min-height: calc(100 * var(--dj-u));
	font-size: var(--dj-fs-14-fluid);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-white);
}

.dj-footer__bottom a {
	color: var(--dj-white);
	text-decoration: none;
}

.dj-footer__bottom a:hover,
.dj-footer__bottom a:focus-visible {
	color: var(--dj-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Yasal bağlantılar. Ayraç tasarımdaki dikey çizgidir; XD'de metin sonu ile
 * çizgi arası 17.5 — ayraç işaretleme değil sunum olduğu için ::before ile
 * basılır, çeviri dizgesine karışmaz.
 */
.dj-legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
}

.dj-legal-links li + li::before {
	content: "|";
	display: inline-block;
	margin-inline: calc(14.6 * var(--dj-u));
	color: var(--dj-white);
}

.dj-footer__copyright {
	grid-column: 2;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	font-weight: var(--dj-fw-regular);
}

.dj-footer__credit {
	grid-column: 3;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* XD: “Powered by” mürekkebi 1713.75'te biter, amblem 1722.57'de başlar. */
	gap: calc(8.8 * var(--dj-u));
	font-size: var(--dj-fs-12-fluid);
}

/*
 * Yazı ile amblem normalde aynı parlaklıkta durur; yazı hover'dan etkilenmez,
 * yalnız amblem tam beyaza çıkar.
 */
.dj-footer__credit-label {
	font-weight: var(--dj-fw-medium);
	color: var(--dj-white);
	opacity: 0.8;
}

/*
 * Tıklama hedefi yalnız amblemdir; “Powered by” düz metin kalır ve hover'dan
 * etkilenmez. XD: “Powered by” mürekkebi 1713.75'te biter, amblem 1722.57'de
 * başlar → aradaki 8.8 birim paragrafın `gap` değeriyle korunur.
 */
.dj-footer__credit-link {
	display: block;
	line-height: 0;
	color: var(--dj-white);
	text-decoration: none;
	/* Normalde bir tık geri planda, hover/odakta tam beyaz — fark gözle seçilir. */
	opacity: 0.8;
	transition: opacity 180ms ease;
}

/* XD `arina-logo` grubu: amblem + kelime markası, çizim 92.93 × 29.03. */
.dj-arina {
	display: block;
	width: calc(92.93 * var(--dj-u));
	height: calc(29.03 * var(--dj-u));
}

/*
 * Sakin vurgu: imza normalde bir tık geri planda durur, hover/odakta tam
 * parlaklığa çıkar. Ölçek, öteleme, gölge ya da ek alt çizgi yok — marka
 * kilidinin geometrisi sabit.
 */
.dj-footer__bottom a.dj-footer__credit-link:hover,
.dj-footer__bottom a.dj-footer__credit-link:focus-visible {
	text-decoration: none;
}

.dj-footer__credit-link:focus-visible {
	opacity: 1;
}

@media (hover: hover) {
	.dj-footer__credit-link:hover {
		opacity: 1;
	}
}

/* --- Duyarlı --- */

/*
 * 1440'ın altında tipografi birimi (`--dj-ut`) 0.75'te tabanlanırken geometri
 * birimi (`--dj-u`) küçülmeye devam eder; sabit tasarım genişlikleri bu
 * aralıkta metni taşırır. Sabit kutular burada içeriklerine göre ölçülür —
 * 1440 ve üzerinde tasarım ölçüleri aynen geçerlidir.
 */
@media (max-width: 1439px) {
	.dj-hotline {
		width: max-content;
		max-width: 100%;
		height: auto;
		min-height: calc(80 * var(--dj-u));
		padding-block: calc(14 * var(--dj-u));
		padding-inline: calc(20 * var(--dj-u));
		column-gap: calc(12 * var(--dj-u));
	}

	.dj-footer__address,
	.dj-footer__text,
	.dj-footer__fineprint {
		max-width: none;
	}

	.dj-newsletter {
		width: 100%;
	}
}

@media (max-width: 1279px) {
	.dj-footer__main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--dj-space-40);
	}

	/* Bağlantı sütunları tam genişliğe iner; dört sütun dar kalmasın. */
	.dj-footer__columns {
		grid-column: 1 / -1;
		order: 3;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-block-start: 0;
	}

	.dj-footer__newsletter {
		padding-block-start: 0;
	}

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

@media (max-width: 1023px) {
	/*
	 * 1024'ün altında akışkan birim devre dışı kalır ve alt satırdaki üç blok
	 * yan yana sığmaz; yasal bağlantılar satır içinde kırılıyordu. Bu genişlikten
	 * itibaren üçlü ızgara alt alta yığılır.
	 */
	.dj-footer__bottom {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		row-gap: var(--dj-space-16);
		padding-block: var(--dj-space-30);
		min-height: 0;
	}

	.dj-footer__copyright,
	.dj-footer__credit {
		grid-column: 1;
	}

	.dj-footer__copyright {
		white-space: normal;
	}

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

	.dj-legal-links {
		justify-content: center;
	}

	.dj-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dj-space-30);
		padding-block-start: var(--dj-space-50);
	}
}

@media (max-width: 767px) {
	/*
	 * Güven bandı dar ekranda tek öğelik kaydırmalı şerittir: ikon, başlık ve
	 * açıklama ortalı, altında nokta gezinmesi. Bu davranış sayfaya göre
	 * değişmez — anasayfa, kategori arşivi ve diğer sayfalar aynı bileşeni
	 * aynı biçimde çizer. Şerit ve noktalar site genelindeki karusel
	 * sisteminden sürülür (`data-dj-carousel`, assets/js/product.js).
	 */
	/*
	 * Üst aralığın tek sahibi `--dj-content-trust-gap`tır (anasayfadaki
	 * kuralın aynısı, artık tüm sayfalarda): üst iç boşluk eklenince çizgi
	 * içerikten iki kat uzaklaşıyordu.
	 */
	.dj-trust {
		padding-block: 0 var(--dj-space-40);
	}

	.dj-trust__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	/* Dar ekranda ikon küçülür ama kendi oranını korur. */
	.dj-trust__icon {
		width: calc(var(--dj-trust-icon-w, 80) * 0.62px);
		height: calc(var(--dj-trust-icon-h, 80) * 0.62px);
	}

	.dj-trust__item {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		align-content: start;
		gap: 12px;
		padding-inline: 8px;
		text-align: center;
		scroll-snap-align: start;
	}

	.dj-trust__title {
		margin-bottom: 6px;
	}

	.dj-trust__text {
		max-width: 30ch;
		min-height: 0;
		color: var(--dj-muted);
	}

	.dj-trust__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-block-start: var(--dj-space-24);
	}

	.dj-footer {
		padding-block-start: var(--dj-space-50);
	}

	.dj-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-40);
		padding-block-end: var(--dj-space-40);
	}

	.dj-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dj-space-30);
	}

	/*
	 * Marka/iletişim bloğu dar kadrajda tek merkezî grup olarak okunur:
	 * logo, tüketici hattı ve adres aynı eksende ortalanır. Gezinme sütunları
	 * (Kurumsal, Ürünler, Destek Merkezi, İletişim) sola hizalı kalır —
	 * alt bilginin tamamı ortalanmaz.
	 */
	.dj-footer__brand {
		justify-items: center;
		text-align: center;
		row-gap: var(--dj-space-24);
	}

	.dj-footer__logo,
	.dj-footer__brand .dj-hotline {
		justify-self: center;
	}

	/*
	 * İletişim bilgileri tek bir blok: kutu markanın altında ortalanır ama
	 * metin sola hizalıdır. Böylece Adres / Telefon / Fax / Mail satırları
	 * aynı sol eksenden başlar ve adres ikinci satıra kırıldığında ortada
	 * asılı kalmaz.
	 */
	.dj-footer__address {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		text-align: start;
	}

	/* Bağlantı sütunları sola hizalı: marka bloğunun hizası devralınmaz. */
	.dj-footer__columns,
	.dj-footer__column {
		text-align: start;
	}

	/*
	 * Başlık iki eşit çizginin ortasında (masaüstü yapısının aynısı):
	 * `1fr auto 1fr` → çizgiler her zaman eşit uzunlukta, başlık tam
	 * ortada; çizgi metnin arkasından geçmez, metinle arasında 16 px kalır.
	 * Dikey hiza ortak kuraldan (`align-items: center` + başlığın optik
	 * kaydırması). İkonlar alt satırda tam genişlikte ortalı.
	 */
	.dj-footer__social {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		column-gap: var(--dj-space-16);
		row-gap: var(--dj-space-20);
	}

	.dj-footer__social::before {
		grid-column: 1;
		grid-row: 1;
	}

	.dj-footer__social-title {
		grid-column: 2;
		grid-row: 1;
	}

	.dj-footer__social::after {
		grid-column: 3;
		grid-row: 1;
	}

	.dj-social {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.dj-social {
		flex-wrap: wrap;
		justify-content: center;
		margin-block-start: 0;
	}

	/*
	 * Üst boşluk `--dj-content-trust-gap` tokenından gelir; kırılım başına
	 * değeri tokens.css yönetir. Şeridin dar ekran dizilimi yukarıdaki tek
	 * öğelik karusel kuralıdır; ikon başlığın üstünde ortalanır.
	 */

	/*
	 * Sıra: marka/iletişim → bağlantılar → bülten. Bağlantılar akordeon
	 * olduğunda kısa bir blok kalır; bülten formu altta tam genişlikte.
	 */
	.dj-footer__columns {
		order: 1;
	}

	.dj-footer__newsletter {
		order: 2;
	}

	.dj-footer__text,
	.dj-footer__fineprint {
		margin-inline: 0;
	}

	/*
	 * Akordeon — `assets/js/main.js` yalnız bu genişlikte `is-accordion`
	 * verir ve başlığı düğmeye çevirir. Betik yoksa sütunlar iki kolonlu
	 * açık liste olarak kalır (yukarıdaki kural).
	 */
	.dj-footer.is-accordion .dj-footer__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-top: 1px solid var(--dj-footer-line);
	}

	.dj-footer.is-accordion .dj-footer__column {
		border-bottom: 1px solid var(--dj-footer-line);
	}

	.dj-footer__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dj-space-16);
		width: 100%;
		min-height: 56px;
		padding: 0;
		color: inherit;
		font: inherit;
		text-align: start;
	}

	.dj-footer__toggle::after {
		content: "";
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-inline-end: 4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform var(--dj-transition);
	}

	.dj-footer__toggle[aria-expanded="true"]::after {
		transform: translateY(2px) rotate(-135deg);
	}

	.dj-footer.is-accordion .dj-footer__links {
		margin-block-start: 0;
		padding-block-end: var(--dj-space-12);
	}

	/* Bağlantı satırı 42 px dokunma yüksekliği. */
	.dj-footer.is-accordion .dj-footer__links li {
		line-height: 1.4;
	}

	.dj-footer.is-accordion .dj-footer__links a {
		display: block;
		padding-block: 10px;
	}

	.dj-footer__bottom {
		row-gap: var(--dj-space-8);
		padding-block: var(--dj-space-24) var(--dj-space-30);
	}

	.dj-legal-links a {
		display: inline-block;
		padding-block: 8px;
	}

	/*
	 * Dört yasal bağlantı (Çerez Tercihleri eklendi) dar ekranda iki satıra
	 * kırılıyor ve ikinci satır "|" ayracıyla başlıyordu. Burada ayraç
	 * yerine boşluk kullanılır: satırlar düzgün ortalanır.
	 */
	.dj-legal-links {
		column-gap: var(--dj-space-24);
	}

	.dj-legal-links li + li::before {
		content: none;
	}

	/*
	 * Alt şerit bir kademe küçük; hiyerarşi: ana içerik (13) > sosyal
	 * başlık (16, bölüm başlığı) > yasal bağlantılar / telif (11) >
	 * "Powered by" (10). Önceki: 14 / 14 / 12. Satır aralığı okunur (1.5).
	 */
	.dj-footer__bottom {
		font-size: var(--dj-fs-14);
		line-height: 1.5;
	}

	.dj-footer__credit {
		font-size: var(--dj-fs-14);
	}

	/*
	 * Tipografi: mobil semantik ölçek (tokens.css). Ölçülen önceki hâl (390):
	 * güven başlığı 20 / gövde 16, alt bilgi başlığı 20 / gövde ve
	 * bağlantılar 16 — masaüstünün 1 px birimle birebir kopyası.
	 */
	.dj-trust__title {
		font-size: var(--dj-m-fs-card);
	}

	/* Güven bandı ikincil gövdesi: 14 (alt bilgi gövdesinden bir kademe iri). */
	.dj-trust__text {
		font-size: var(--dj-fs-14);
		line-height: var(--dj-m-lh-small);
	}

	.dj-footer__heading {
		font-size: var(--dj-m-fs-card);
	}

	/*
	 * Marka ölçeği. Logo, tüketici hattı kutusu ve sosyal daireler bütün
	 * ölçülerini akışkan tasarım biriminden (`--dj-u` / `--dj-ut`) alır;
	 * 1023 altında birim 1 px'e döndüğü için masaüstü px'leri mobilde
	 * birebir kalıyordu (logo 224, kutu 241 × 80, daire 48). Birim yalnız bu
	 * bileşenlerin kapsamında küçültülür (tablet katmanındaki başlık ölçeğiyle
	 * aynı yöntem): her ölçü gerçek CSS değeri olarak orantılı hesaplanır,
	 * `transform` yok. Yerleşim (ortalı marka, sola hizalı adres) değişmez.
	 *   logo / kutu : 0.875 → logo 196, kutu ~211 × 70, numara 22.75
	 *   sosyal      : 0.667 → daire 32, glif 14.7, aralık 13.3
	 */
	.dj-footer__logo,
	.dj-footer__brand .dj-hotline {
		--dj-u: 0.875px;
		--dj-ut: 0.875px;
	}

	/*
	 * Logo → kutu aralığı 50 px'ti (marka ızgarasının satır aralığı 24 +
	 * kutunun masaüstünden gelen üst boşluğu 26). Aralık yalnız ızgaradan
	 * gelir: 24. İkisi de merkez eksende, dikey yığın korunur.
	 */
	.dj-footer__brand .dj-hotline {
		margin-block-start: 0;
	}

	/*
	 * Metin tokenları (`--dj-fs-14-fluid`, `--dj-fs-26`) kökte çözülür ve
	 * kapsamlı birimi izlemez; kutu metinleri aynı tasarım değerlerinden
	 * doğrudan birimle hesaplanır (14 → 12.25, 26 → 22.75).
	 */
	.dj-footer__brand .dj-hotline__label {
		font-size: max(0.875rem, calc(14 * var(--dj-ut)));
	}

	.dj-footer__brand .dj-hotline__number {
		font-size: calc(26 * var(--dj-ut));
	}

	.dj-social {
		--dj-u: 0.667px;
	}

	/*
	 * Adres satır adımı masaüstünden 28 px sabit geliyordu; 13 px metinde
	 * satırlar kopuk okunuyordu. Gruplar arası 12 px ayrım korunur.
	 */
	.dj-footer__address p {
		line-height: var(--dj-lh-relaxed);
	}

	/* Sosyal başlık alt bilgi bölüm başlıklarıyla aynı kademede. */
	.dj-footer__social-title {
		font-size: var(--dj-m-fs-card);
	}

	.dj-footer__text,
	.dj-footer__address,
	.dj-footer__fineprint,
	.dj-footer__links li {
		font-size: var(--dj-m-fs-small);
		line-height: var(--dj-m-lh-small);
	}
}


/* ================================================================== */
/* Alt bilgi — tablet (768–1024)                                       */
/*                                                                     */
/* Masaüstü üç sütunlu ızgarası bu genişlikte sıkışıyordu (768'de       */
/* bağlantı sütunları 172 px'e iniyor, bülten formu üçüncü sütuna       */
/* eziliyordu). Tablet kendi düzenini kullanır; mobil akordeon ve       */
/* masaüstü ızgarası değişmez.                                          */
/* ================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
	/*
	 * Üst alan iki eşit blok: solda marka + iletişim, sağda bülten.
	 * Gezinme sütunları altta tam genişlikte 2 × 2 olur.
	 */
	.dj-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--dj-space-40);
		row-gap: var(--dj-space-50);
		padding-block-end: var(--dj-space-50);
	}

	.dj-footer__brand {
		grid-column: 1;
		grid-row: 1;
	}

	.dj-footer__newsletter {
		grid-column: 2;
		grid-row: 1;
	}

	.dj-footer__columns {
		grid-column: 1 / -1;
		grid-row: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dj-space-30) var(--dj-space-40);
	}

	.dj-footer__address {
		max-width: none;
	}

	/* Sosyal bant tam genişlikte, başlık ve ikonlar ortada. */
	.dj-footer__social {
		column-gap: var(--dj-space-24);
	}

	/* Alt yasal satır tabletde rahat okunur: iki satıra yayılır. */
	.dj-footer__bottom {
		row-gap: var(--dj-space-16);
	}
}

/*
 * Bağlantılı güven maddesi: maddenin tamamı tıklanır. Başlıktaki bağlantının
 * alanı maddeyi kaplar; hover, sitenin genel bağlantı hover'ıdır (`a:hover`).
 */
.dj-trust__item:has(.dj-trust__title a) {
	position: relative;
}

/* Sayfaya gömülen üçüncü taraf stilleri (ör. servis formu) genel `a` rengini değiştirse de başlık aynı kalır. */
.dj-trust__title a {
	color: inherit;
	text-decoration: none;
}

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

.dj-trust__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}