/* =====================================================================
   ARARAT MOBILE UX LAYER
   Mobil (≤767px) UX iyileştirmeleri. Elementor/Impreza verisine dokunmaz,
   yalnızca stil katmanı. Marka: #EC6800, radius 10px, Titillium.
   ===================================================================== */

@media (max-width: 767px) {

	/* ---------- 1) HEADER: siyah üst barı gizle (CTA'lar alt bara taşındı) ---------- */
	.l-header .l-subheader.at_top {
		display: none !important;
	}
	/* Hamburger menü dokunma alanı */
	.l-header .w-nav-control {
		padding: 10px !important;
	}

	/* ---------- 2) BOŞLUK DİSİPLİNİ ---------- */
	/* Elementor spacer'larını mobilde 24px ile sınırla */
	.elementor-widget-spacer .elementor-spacer-inner {
		height: min(var(--spacer-size), 24px) !important;
	}
	/* Footer'daki Impreza ayraçlarını sıkılaştır */
	.l-footer .w-separator {
		height: 12px !important;
	}

	/* ---------- 3) HERO (tüm Elementor sayfalarında geçerli) ---------- */
	/* Sabit header artık tek satır (~50px): ilk bölümün 134px üst boşluğunu düşür */
	[data-elementor-type="wp-page"] > .e-con:first-child > .e-con-inner,
	[data-elementor-type="wp-page"] > .elementor-section:first-child > .elementor-container {
		padding-top: 84px !important;
	}
	/* Ön başlık: kicker'a dönüştür (25px → 13px uppercase) */
	.elementor-element-8ee99c3 {
		font-size: 13px !important;
		line-height: 1.5 !important;
		letter-spacing: .14em;
		text-transform: uppercase;
		font-weight: 700;
	}
	.l-main h1 {
		font-size: 30px !important;
		line-height: 1.22 !important;
	}
	/* Alt başlık: kicker değil, destek cümlesi */
	.elementor-element-fc75265 {
		font-size: 18px !important;
		line-height: 1.45 !important;
		font-weight: 600;
	}
	/* Turuncu süs çizgisini küçült */
	.elementor-element-76e4e8c img {
		max-width: 140px;
	}
	/* Ana CTA: ghost → solid (her sayfanın hero bölümünde) */
	[data-elementor-type="wp-page"] > :first-child .elementor-widget-button .elementor-button {
		background: #EC6800 !important;
		color: #fff !important;
		border-color: #EC6800 !important;
		padding: 15px 30px !important;
		font-size: 16px !important;
		font-weight: 700;
		box-shadow: 0 6px 16px rgba(236, 104, 0, .28);
	}
	/* Görsel altındaki telefon kartı: dokunma hedefini büyüt */
	.elementor-element-d0ca83a a {
		font-size: 18px !important;
		display: inline-block;
		padding: 6px 0;
	}

	/* ---------- 4) BÖLÜM ÖN BAŞLIKLARI (kicker) ---------- */
	/* "Was wir tun", "Dienstleistungen", "Kundenbewertung"… hepsi .yellow-text */
	.elementor-widget-text-editor.yellow-text,
	.elementor-widget-text-editor.yellow-text p {
		font-size: 13px !important;
		line-height: 1.5 !important;
		letter-spacing: .14em;
		text-transform: uppercase;
		font-weight: 700;
	}

	/* ---------- 5) BAŞLIK ÖLÇEĞİ ---------- */
	.l-main h2 {
		font-size: 25px !important;
		line-height: 1.25 !important;
	}
	.l-main h3 {
		font-size: 19px !important;
		line-height: 1.35 !important;
	}

	/* ---------- 6) "WIR SIND ÜBERALL AKTIV": 6 dev kart → 2'li grid ----------
	   .cities-column sınıfı tüm sayfalarda aynı — genel kural. */
	/* Üçlü sınıf: Impreza'nın gövde-içi <style> kurallarını özgüllükle geç */
	.g-cols.g-cols.g-cols:has(> .cities-column) {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}
	.cities-column {
		width: 100% !important;
		min-width: 0;
	}
	.cities-img img {
		height: 96px;
		object-fit: cover;
		width: 100%;
	}

	/* ---------- 7) "UNSERE REFERENZEN": logo yığını → 3'lü grid ----------
	   .ararat-logogrid sınıfını JS ekler ("Referenzen" başlıklı bölümdeki
	   çok-hücreli logo listesini bulur) — sayfa bağımsız çalışır. */
	.ararat-logogrid {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 22px 14px !important;
		align-items: center;
		justify-items: center;
	}
	.ararat-logogrid > .e-con {
		width: 100% !important;
		min-width: 0;
		align-items: center;
	}
	.ararat-logogrid .elementor-widget-spacer {
		display: none !important;
	}
	.ararat-logogrid img {
		max-height: 36px;
		width: auto;
		max-width: 100%;
	}

	/* ---------- 8) TRUSTINDEX YORUMLARI: kesilmeyi düzelt + font tabanı ---------- */
	/* Kartlar (358px) 342px'lik kolona sığmıyor: tam genişliğe aç */
	.ti-widget {
		margin-left: -24px;
		margin-right: -24px;
	}
	.ti-widget .ti-review-content {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
	.ti-widget .ti-name {
		font-size: 15px !important;
	}
	.ti-widget .ti-read-more span {
		display: inline-block;
		padding: 10px 0;
		font-size: 14px !important;
	}

	/* ---------- 9) FORM (Gravity Forms) ---------- */
	.gform_wrapper input[type="text"],
	.gform_wrapper input[type="tel"],
	.gform_wrapper input[type="email"],
	.gform_wrapper select,
	.gform_wrapper textarea {
		padding: 13px 14px !important;
		font-size: 16px !important; /* iOS odak zoom'unu da engeller */
		border-radius: 10px;
	}
	.gform_wrapper .gform_button {
		width: 100%;
		background: #EC6800 !important;
		color: #fff !important;
		border: 0;
		border-radius: 10px;
		padding: 16px !important;
		font-size: 16px !important;
		font-weight: 700;
	}
	.gform_wrapper .gchoice {
		padding: 7px 0;
	}
	.gform_wrapper .gchoice input[type="checkbox"] {
		width: 22px !important;
		height: 22px !important;
	}
	.gform_wrapper .gchoice label {
		font-size: 16px !important;
		padding-left: 6px;
	}

	/* ---------- 10) UZUN METİNLER: akordeon (SEO bölümü + metin duvarları) ---------- */
	.ararat-collapse.ararat-collapsed {
		max-height: var(--ararat-clamp, 360px);
		overflow: hidden;
		position: relative;
	}
	.ararat-collapse.ararat-collapsed::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 90px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 80%);
		pointer-events: none;
	}
	.ararat-readmore {
		display: block;
		width: calc(100% - 48px);
		margin: 4px auto 16px;
		padding: 14px;
		text-align: center;
		border: 1.5px solid #EC6800;
		color: #EC6800;
		background: #fff;
		border-radius: 10px;
		font-weight: 700;
		font-size: 15px;
		cursor: pointer;
	}

	/* ---------- 11) FOOTER: font tabanı ---------- */
	.l-footer {
		font-size: 14px;
	}

	/* ---------- 11b) MAVİ KUTU FAZLALIĞI: 4 → 2 ----------
	   "Rufen Sie uns an" (CTA) ve "Mit über 20 Jahren" (güven) kalıyor;
	   FAQ sonrası "Erfahren Sie alles" ve "Wir garantieren Ihnen" dolgu
	   kutuları mobilde gizli. (-row-mobile satırları zaten yalnız mobilde.) */
	.elementor-element-6cf1a32,
	.elementor-element-c03a898 {
		display: none !important;
	}

	/* ---------- 12) STICKY ALT AKSİYON BARI ---------- */
	.ararat-bottombar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		display: flex;
		gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-top: 1px solid rgba(0, 0, 0, .08);
	}
	.ararat-bottombar a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		border-radius: 12px;
		font-weight: 700;
		font-size: 15px;
		text-decoration: none;
	}
	.ararat-bottombar a svg {
		width: 18px;
		height: 18px;
		flex: none;
	}
	.ararat-bottombar .ab-call {
		color: #EC6800;
		border: 1.5px solid #EC6800;
		background: #fff;
	}
	.ararat-bottombar .ab-offer {
		background: #EC6800;
		color: #fff;
		box-shadow: 0 4px 14px rgba(236, 104, 0, .3);
	}
	body.ararat-has-bottombar {
		padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
	}
	/* Alt bar ile çakışan sabit öğeleri yukarı al */
	.w-toplink {
		bottom: 84px !important;
	}
	.grecaptcha-badge {
		bottom: calc(82px + env(safe-area-inset-bottom)) !important;
	}
	/* Form ankraj hedefi sabit header altında kalmasın */
	#offerte-einholen {
		scroll-margin-top: 70px;
	}
}

/* Alt bar yalnızca mobilde */
@media (min-width: 768px) {
	.ararat-bottombar {
		display: none !important;
	}
}