/* ============================================================================
   Donanım Akademi — CHROME / FOOTER
   Kaynak: "Donanim Akademi - Footer.dc.html"

   Yükleme sırası:  core/base.css → core/hover.css → core/shine.css → BU DOSYA.
   Tüm kurallar .da-footer altında; hiçbir global body/header seçicisi YOK
   (plugin expectations §5). DC helmet'indeki body{background:#6C0E12} bilerek
   taşınmadı — bordo zemin yalnız .da-footer elementinin kendi background'u.

   Özgüllük notu: kök element hem .da-app hem .da-footer taşır; .da-app'in
   kendi (0,1,0) kuralını (beyaz zemin, --da-heading:#18181B) yenmek için
   kök kuralları `.da-app.da-footer` (0,2,0) ile yazılır.
   ========================================================================== */

/* === 1. KÖK — bordo zemin + koyu panel token'ları ========================= */
.da-app.da-footer {
	position: relative;
	overflow: hidden;
	color: #fff;

	/* Bordo zemin: 160° gradient (görev şartı) + DC'deki radyal ışık üstte */
	background:
		radial-gradient(1100px 460px at 82% -8%, #8A171C 0%, rgba(138,23,28,0) 60%),
		linear-gradient(160deg, #7A1015 0%, #6C0E12 100%);

	/* Koyu panel: zırh :where(h1..h6) rengi serbest bıraktığı için
	   başlık rengini burada AÇIKÇA beyaz yapıyoruz (WCAG AA). */
	--da-heading: #fff;
	--da-fmuted:  rgba(255,255,255,.72);
	--da-fmuted-2: rgba(255,255,255,.60);
	--da-flink-c: rgba(255,255,255,.75);
	--da-fline:   rgba(255,255,255,.12);
	--da-fpanel:  rgba(255,255,255,.10);
	--da-frose:   #FF9B9B;
	--da-frose-2: #FFC9C9;
	--da-fmax:    1240px;   /* DC iç konteyner genişliği */
	--da-fpad:    40px;
}

/* Dekoratif halkalar — DC'deki iki absolute div yerine pseudo-element */
.da-app.da-footer::before,
.da-app.da-footer::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.da-app.da-footer::before {
	top: -120px;
	right: -90px;
	width: 420px;
	height: 420px;
	border: 60px solid rgba(255,255,255,.04);
}
.da-app.da-footer::after {
	bottom: -90px;
	left: -70px;
	width: 280px;
	height: 280px;
	background: rgba(255,255,255,.03);
}

/* İçerik daima dokuların üstünde */
.da-footer > * { position: relative; z-index: 1; }

.da-footer :where(h3, h4) { color: #fff; }


/* === 2. ÜST CTA BANDI ===================================================== */
.da-footer .da-footer__cta {
	max-width: var(--da-fmax);
	margin: 0 auto;
	padding: 44px var(--da-fpad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--da-fline);
}
.da-footer .da-footer__cta-text  { max-width: 620px; }
.da-footer .da-footer__cta-title {
	font-size: 27px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.032em;
	margin: 0;
	color: #fff;
}
.da-footer .da-footer__cta-sub {
	font-size: 15px;
	line-height: 1.6;
	color: var(--da-fmuted);
	margin: 10px 0 0;
}
.da-footer .da-footer__cta-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
}

/* CTA butonları — <a> oldukları için reset'in button kuralları isabet etmez,
   yine de hover'ı açıkça tanımlıyoruz (solid CTA kuralı). */
.da-footer .da-fbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 15px;
	border-radius: 12px;
	min-height: 44px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.da-footer .da-fbtn--light {
	background: #fff;
	color: #8F1218;
	font-weight: 800;
	padding: 14px 24px;
	box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.da-footer .da-fbtn--light:hover,
.da-footer .da-fbtn--light:focus {
	background: #FFF1F1;
	color: #8F1218;
}
.da-footer .da-fbtn--ghost {
	background: rgba(255,255,255,.12);
	color: #fff;
	font-weight: 700;
	padding: 14px 22px;
	border: 1px solid rgba(255,255,255,.28);
}
.da-footer .da-fbtn--ghost:hover,
.da-footer .da-fbtn--ghost:focus {
	background: rgba(255,255,255,.20);
	color: #fff;
}


/* === 3. ANA SÜTUNLAR ====================================================== */
.da-footer .da-footer__cols {
	max-width: var(--da-fmax);
	margin: 0 auto;
	padding: 56px var(--da-fpad) 0;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
	gap: 40px;
}
/* Grid item'ları track'e sığsın (klasik mobil taşma düzeltmesi) */
.da-footer .da-footer__cols > * { min-width: 0; }

/* --- 3.1 Marka kolonu ---------------------------------------------------- */
/* Bu öğe hem `da-logo` hem `da-footer__logo` taşır. header.css'teki
   `.da-app .da-logo{display:flex}` aynı özgüllükte (0,2,0) ve DAHA SONRA
   yüklendiği için eşitliği o kazanıyordu; plaka `display:flex` + `width:auto`
   ile blok gibi davranıp kolon genişliğine (343px) yayılıyordu.

   DİKKAT: `.da-app .da-footer ...` yazmayın — `da-app` ile `da-footer` AYNI
   element üzerinde, dolayısıyla soy-zinciri seçici hiç eşleşmez. Bunun yerine
   iki sınıfı birleştirip (0,3,0)'a çıkıyoruz; ölçüm: plaka 343px → 102px. */
.da-footer .da-logo.da-footer__logo {
	display: inline-flex;
	/* Marka kolonu column-flex; `inline-flex` tek başına yetmiyor çünkü
	   `align-items:stretch` öğeyi kolon genişliğine (343px) geriyordu ve
	   logo dev bir beyaz plakanın içinde kalıyordu. Tasarımda plaka
	   logoyu sarar (inline-flex). */
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	background: #fff;
	border-radius: 14px;
	padding: 12px 16px;
	box-shadow: 0 10px 28px rgba(0,0,0,.28);
	/* .da-app .da-logo img{height:var(--da-logo-h)} zırhı üzerinden */
	--da-logo-h: 50px;
}
.da-footer .da-footer__about {
	font-size: 14px;
	line-height: 1.65;
	color: var(--da-fmuted);
	margin: 20px 0 0;
	max-width: 290px;
}

/* Rozetler */
.da-footer .da-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 20px;
}
.da-footer .da-fbadge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--da-fpanel);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	padding: 6px 13px;
}
/* Bordo zeminde beyaz E-Devlet logosu (edevlet-white.png).
   `.elementor img{height:auto}` (0,1,1) → bu kural (0,2,0)+eleman = (0,2,1) ile yener. */
.da-footer .da-fbadge .da-fbadge__logo {
	height: 15px;
	width: auto;
	display: block;
	flex-shrink: 0;
}
.da-footer .da-fbadge__text {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

/* Sosyal ikonlar — DC 40px; dokunma hedefi için 44×44 */
.da-footer .da-footer__social {
	display: flex;
	gap: 11px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.da-footer .da-fsoc {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--da-fpanel);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background-color .18s ease, color .18s ease;
}
.da-footer .da-fsoc:hover,
.da-footer .da-fsoc:focus {
	background: #fff;
	color: #6C0E12;
}

/* --- 3.2 Menü kolonları -------------------------------------------------- */
.da-footer .da-footer__h {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: #fff;
	margin: 6px 0 18px;
}
.da-footer .da-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
/* .da-h-white (hover→#fff) + .da-h-gap (hover→gap:12px) core/hover.css'ten gelir */
.da-footer .da-flink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--da-flink-c);
}
.da-footer .da-flink__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--da-frose);
	flex-shrink: 0;
}

/* --- 3.3 İletişim kolonu ------------------------------------------------- */
.da-footer .da-fphone {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 14px;
	padding: 14px 16px;
	color: #fff;
	min-height: 44px;
	transition: background-color .2s ease;
}
.da-footer .da-fphone:hover,
.da-footer .da-fphone:focus {
	background: rgba(255,255,255,.14);
	color: #fff;
}
.da-footer .da-fphone__icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255,255,255,.14);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.da-footer .da-fphone__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--da-frose-2);
}
.da-footer .da-fphone__num {
	display: block;
	font-size: 16px;
	font-weight: 800;
	margin-top: 1px;
}

.da-footer .da-footer__meta {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.da-footer .da-fmeta {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}
.da-footer .da-fmeta__icon {
	flex-shrink: 0;
	margin-top: 1px;
}
.da-footer .da-fmeta__link {
	font-size: 14.5px;
	color: rgba(255,255,255,.82);
	font-weight: 600;
	word-break: break-word;
	overflow-wrap: anywhere;
	min-height: 24px;
}
.da-footer .da-fmeta__text {
	font-size: 14px;
	color: rgba(255,255,255,.82);
	line-height: 1.55;
}


/* === 4. ALT BAR =========================================================== */
.da-footer .da-footer__bottom {
	max-width: var(--da-fmax);
	margin: 48px auto 0;
	padding: 22px var(--da-fpad);
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.da-footer .da-footer__copy {
	font-size: 13px;
	color: var(--da-fmuted-2);
}
.da-footer .da-footer__legal {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
}
.da-footer .da-flegal {
	font-size: 13px;
	color: var(--da-fmuted-2);
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}


/* === 5. RESPONSIVE — 4 kolon → marka+3 → 1 kolon ========================== */
@media (max-width: 1023px) {
	.da-footer .da-footer__cols {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 28px;
		padding-top: 44px;
	}
	/* Marka kolonu tüm satırı kaplar, altında 3 kolon */
	.da-footer .da-footer__brand { grid-column: 1 / -1; }
	.da-footer .da-footer__about { max-width: 460px; }
}

@media (max-width: 767px) {
	.da-app.da-footer { --da-fpad: 20px; }

	.da-footer .da-footer__cta {
		padding-block: 34px;
		align-items: flex-start;
		gap: 22px;
	}
	.da-footer .da-footer__cta-title { font-size: 23px; }
	.da-footer .da-footer__cta-actions { width: 100%; }
	.da-footer .da-fbtn { flex: 1 1 auto; }

	.da-footer .da-footer__cols {
		grid-template-columns: 1fr;
		gap: 34px;
		padding-top: 36px;
	}
	.da-footer .da-footer__about { max-width: none; }

	/* Dokunma hedefi (handoff §6): dar ekranda liste linkleri 44px */
	.da-footer .da-footer__list { gap: 2px; }
	.da-footer .da-flink { min-height: 44px; padding-block: 6px; }
	.da-footer .da-flegal { min-height: 44px; }
	.da-footer .da-footer__legal { gap: 8px 20px; }

	.da-footer .da-footer__bottom {
		margin-top: 36px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* Dekoratif halkalar mobilde küçülür (yatay taşma riski yok) */
	.da-app.da-footer::before { width: 240px; height: 240px; border-width: 40px; top: -80px; right: -70px; }
	.da-app.da-footer::after  { width: 180px; height: 180px; }
}


/* === 6. REDUCED MOTION ==================================================== */
@media (prefers-reduced-motion: reduce) {
	.da-footer .da-fbtn,
	.da-footer .da-fsoc,
	.da-footer .da-fphone { transition: none; }
}