/* =========================================================================
   Maestro Otomotiv - Ozel Stiller (custom.css)
   Tum tasarim ayarlarini buradan yonetiyoruz. Elementor'e gerek yok.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) Marka renkleri ve degiskenler
   NOT: Asagidaki renkler ornek/placeholder. Maestro'nun gercek renklerini
   netlestirince burayi guncelleyecegiz; tum site otomatik uyum saglar.
   ------------------------------------------------------------------------- */
:root {
	--maestro-primary:   #0a2540; /* koyu lacivert - kurumsal */
	--maestro-accent:    #e63946; /* vurgu / buton kirmizisi */
	--maestro-dark:      #111827;
	--maestro-light:     #f5f7fa;
	--maestro-text:      #1f2937;
	--maestro-muted:     #6b7280;
	--maestro-radius:    10px;
	--maestro-max-width: 1200px;
}

/* -------------------------------------------------------------------------
   2) Genel iyilestirmeler (guvenli, tasarimi bozmaz)
   ------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth; /* sayfa ici baglantilarda yumusak kaydirma */
}

/* Klavyeyle gezenler icin gorunur odak cercevesi (erisilebilirlik) */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--maestro-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   3) Yardimci siniflar (sayfalari kodlarken kullanacagiz)
   ------------------------------------------------------------------------- */
.maestro-container {
	max-width: var(--maestro-max-width);
	margin-inline: auto;
	padding-inline: 20px;
}

.maestro-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--maestro-radius);
	background: var(--maestro-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, opacity .15s ease;
}
.maestro-btn:hover {
	opacity: .92;
	transform: translateY(-1px);
}

/* =========================================================================
   4) MOBIL / TABLET UYUMU
   Elementor'un urettigi post-11.css'teki hatali degerleri duzeltir.
   Elementor'u kaldirip sayfalari kodladikca bu bolum kucultulecek.
   ========================================================================= */

/* -- 4.1 Yatay tasmayi kokten engelle ------------------------------------ */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Gorsel, video ve gomulu icerikler kabina sigsin */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Elementor kapsayicilari ekrandan tasmasin */
.e-con,
.e-con-inner,
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
	max-width: 100%;
}

/* Uzun kelime/URL'ler tasmayi tetiklemesin */
p, h1, h2, h3, h4, h5, h6, li, a {
	overflow-wrap: break-word;
}

/* -- 4.2 Baslik satir yuksekligi hatasi ----------------------------------
   Elementor'da 'line-height: 1.1px' yazilmis (birim yanlis) -> satirlar
   ust uste biniyordu. Dogrusu birimsiz 1.1'dir. */
.elementor-11 .elementor-element.elementor-element-4f312b5 .elementor-heading-title {
	line-height: 1.15 !important;
}

/* -- 4.3 TABLET (768px - 1024px) -----------------------------------------
   Konteynira sabit 862px verilmis; 768px'lik tablette bu tasma yaratiyor. */
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-11 .elementor-element.elementor-element-6bea747 {
		--width: 100% !important;
		max-width: 100% !important;
	}

	/* Genis masaustu banner'i (1717x916) kirpilmadan tam gorunsun diye
	   kutu oranini gorselin oranina esitleyip 'contain' kullaniyoruz. */
	.elementor-11 .elementor-element.elementor-element-9118949 {
		--width: 100% !important;
		--min-height: 0 !important;
		min-height: 0 !important;
		aspect-ratio: 1717 / 916;
		height: auto !important;
	}

	.elementor-11 .elementor-element.elementor-element-9118949:not(.elementor-motion-effects-element-type-background),
	.elementor-11 .elementor-element.elementor-element-9118949 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-size: contain !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
}

/* -- 4.4 TELEFON (767px ve alti) -----------------------------------------
   Iki ana hata: hero %83 genislikte kaliyor ve arka plan 'contain' oldugu
   icin ust/altta buyuk beyaz bosluk olusuyordu. */
@media (max-width: 767px) {

	/* Hero tam genislik + gorsel kutuyu doldursun */
	.elementor-11 .elementor-element.elementor-element-9118949 {
		--width: 100% !important;
		width: 100% !important;
		--min-height: 68vh !important;
	}

	.elementor-11 .elementor-element.elementor-element-9118949:not(.elementor-motion-effects-element-type-background),
	.elementor-11 .elementor-element.elementor-element-9118949 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-size: cover !important;
		background-position: center center !important;
	}

	/* Ust kapsayici da tam genislik */
	.elementor-11 .elementor-element.elementor-element-6bea747 {
		--width: 100% !important;
		max-width: 100% !important;
		--align-items: stretch !important;
	}

	/* Kolonlar alt alta dizilsin */
	.elementor-11 .elementor-element.elementor-element-bcb3fe6,
	.elementor-11 .elementor-element.elementor-element-a66e1e0,
	.elementor-11 .elementor-element.elementor-element-936e1f0,
	.elementor-11 .elementor-element.elementor-element-58ca8e1 {
		--width: 100% !important;
	}

	/* Satir kapsayicilari sarmalasin */
	.elementor-11 .elementor-element.elementor-element-12f047a,
	.elementor-11 .elementor-element.elementor-element-ff9f5cb {
		--flex-wrap: wrap !important;
		flex-wrap: wrap !important;
	}

	/* Gorsel karusel telefonda tek gostersin (3 yerine 1) */
	.elementor-11 .elementor-element.elementor-element-e1c3fe9 {
		--e-image-carousel-slides-to-show: 1 !important;
	}

	/* Baslik telefonda tasmayacak boyuta insin */
	.elementor-11 .elementor-element.elementor-element-4f312b5 .elementor-heading-title {
		font-size: 28px !important;
		letter-spacing: 0 !important;
	}

	/* Kenar bosluklari */
	.e-con > .e-con-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* -- 4.5 TELEFON: genel kapsayici sifirlama -------------------------------
   Elementor'un tek tek ID'lerini kovalamak yerine, telefonda TUM kapsayici
   ve kolonlari tam genislige zorlar. Saga/sola tasip kesilmeyi bitirir. */
@media (max-width: 767px) {

	.elementor .e-con,
	.elementor .e-con-inner,
	.elementor .elementor-widget-wrap,
	.elementor .elementor-column,
	.elementor .elementor-row {
		--width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/* Yan yana duran her satir alt alta insin */
	.elementor .e-con.e-flex,
	.elementor .elementor-row,
	.elementor .elementor-container {
		flex-wrap: wrap !important;
	}

	/* Yatayda kaydirilan kutular ekrana sigsin */
	.elementor .e-con > .e-con-inner {
		max-width: 100% !important;
	}
}

/* -- 4.6 TELEFON: hero banner'i orani koruyarak tam gostermek -------------
   Mobil banner 1024x1536 (2:3 dikey). Kutuya ayni orani verince gorsel
   ne kirpilir ne de bosluk birakir. */
@media (max-width: 767px) {
	.elementor-11 .elementor-element.elementor-element-9118949 {
		--min-height: 0 !important;
		min-height: 0 !important;
		aspect-ratio: 1024 / 1536;
		height: auto !important;
	}

	.elementor-11 .elementor-element.elementor-element-9118949:not(.elementor-motion-effects-element-type-background),
	.elementor-11 .elementor-element.elementor-element-9118949 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-size: contain !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
}

/* -- 4.7 TELEFON: son rotuslar -------------------------------------------- */
@media (max-width: 767px) {

	/* Her sey kutu modeline dahil olsun (padding tasma yaratmasin) */
	.elementor *,
	.elementor *::before,
	.elementor *::after {
		box-sizing: border-box;
	}

	/* Hero'nun kendi ic boslugu olmasin; gorsel tam otursun */
	.elementor-11 .elementor-element.elementor-element-9118949 {
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Astra sayfa basligi ve icerik kabi soldan kesilmesin */
	.site,
	.site-content,
	.ast-container,
	.entry-header,
	.ast-page-title,
	.entry-title {
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	.entry-header,
	.ast-page-title {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Baslik boyutu telefona uysun */
	.entry-title,
	.ast-page-title h1 {
		font-size: 24px !important;
		line-height: 1.25 !important;
	}
}

/* -- 4.8 TELEFON: hero banner'i kesin cozum -------------------------------
   Gorseli kutu genisligine birebir sabitler (100% auto) ve kutu yuksekligini
   gorselin oranina esitler (1024x1536 -> yukseklik = genislik * 1.5).
   Boylece yatayda ne kirpma ne tasma olur. */
@media (max-width: 767px) {
	.elementor-11 .elementor-element.elementor-element-9118949 {
		--width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		aspect-ratio: auto !important;
		height: auto !important;
		--min-height: calc(100vw * 1.5) !important;
		min-height: calc(100vw * 1.5) !important;
	}

	.elementor-11 .elementor-element.elementor-element-9118949:not(.elementor-motion-effects-element-type-background),
	.elementor-11 .elementor-element.elementor-element-9118949 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-size: 100% auto !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
	}
}

/* -- 4.9 TABLET + TELEFON: sayfa basligi kenar boslugu -------------------- */
@media (max-width: 1024px) {
	.entry-header,
	.ast-page-title {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}
}

/* =========================================================================
   5) MODERN TASARIM: font + lacivert baslik + tipografi
   Local ile canliyi ESITLER ve gorunumu modernlestirir.
   Font degistirmek istersen sadece asagidaki iki degiskeni degistir.
   ========================================================================= */
:root {
	/* Basliklar: Poppins | Govde: Inter  (functions.php'de yuklendi) */
	--maestro-font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
	--maestro-font-body:    "Inter", "Segoe UI", Arial, sans-serif;

	/* Canlidaki lacivert baslik tonu */
	--maestro-navy: #1f2f4a;
	--maestro-ink:  #2b2f38; /* govde metni: saf siyah yerine yumusak koyu */
}

/* -- 5.1 Govde fontu ve okunabilirlik -------------------------------------
   NOT: Ikon fontlarini (Font Awesome / eicon) BOZMAMAK icin genel span/i
   hedeflenmez; sadece metin kaplari hedeflenir. */
body,
.ast-container,
.entry-content,
.entry-content p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-container p,
.elementor-widget-container li,
.menu-item a,
.ast-container li {
	font-family: var(--maestro-font-body) !important;
}

body {
	color: var(--maestro-ink);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* -- 5.2 Baslik fontu (her arka planda guvenli) --------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title, .ast-page-title,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--maestro-font-heading) !important;
	letter-spacing: -0.01em;
}

h1, h2,
.entry-title,
.ast-page-title,
.site-title {
	font-weight: 700;
	line-height: 1.2;
}
h3, h4 { font-weight: 600; line-height: 1.3; }

/* -- 5.3 Lacivert baslik rengi -------------------------------------------
   Yalnizca icerik alani. Footer ve koyu bolumler etkilenmez ki beyaz
   basliklar kaybolmasin. */
.entry-title,
.ast-page-title,
.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content .elementor-widget-heading .elementor-heading-title {
	color: var(--maestro-navy) !important;
}

/* -- 5.4 Baglantilar ------------------------------------------------------ */
.site-content a {
	color: var(--maestro-navy);
	transition: color .15s ease;
}
.site-content a:hover {
	color: var(--maestro-accent);
}

/* -- 5.5 Modern dokunuslar ------------------------------------------------ */
/* Icerik metni biraz daha ferah */
.entry-content p,
.elementor-widget-text-editor {
	line-height: 1.75;
}

/* Butonlar: modern, yumusak gecisli */
.wp-block-button__link,
.elementor-button,
.ast-button,
button.menu-toggle {
	border-radius: 8px !important;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.elementor-button:hover,
.ast-button:hover {
	transform: translateY(-1px);
}

/* -- 5.6 ICERIK ORTALAMA -------------------------------------------------
   Astra icerik kabina 'max-width:100%' dayatiyordu; sayfa basligi ve icerik
   sola yapisiyordu. !important + guclu seciciyle ortali 1240px kaba aliyoruz.
   Header menu kabi etkilenmez (sadece .site-content).
   Ayrica bazi Elementor bolumlerinin ic kabi (e-con-inner) tam genislikteydi;
   hepsini ayni genislige hizalayip ortaliyoruz. */
.site-content > .ast-container,
.ast-separate-container .site-content > .ast-container,
.ast-page-builder-template .site-content > .ast-container,
body .site-content .ast-container {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(16px, 4vw, 32px);
	padding-right: clamp(16px, 4vw, 32px);
	box-sizing: border-box;
}

/* Elementor bolumlerinin ic icerigi de ayni hatta hizalansin */
.entry-content .e-con > .e-con-inner {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* -- 5.7 UST MENU FONTU --------------------------------------------------
   Menu yazilari cok kucuk kaliyordu; buyuttuk. 8 oge tasmasin diye
   ogeler arasi bosluk biraz daraltildi. */
.main-header-menu .menu-link,
.ast-nav-menu .menu-link,
.main-navigation .menu-link {
	font-size: 16px !important;
	font-weight: 500;
	letter-spacing: 0.2px;
}
.main-header-menu > .menu-item > .menu-link,
.ast-nav-menu > .menu-item > .menu-link {
	padding-left: 11px !important;
	padding-right: 11px !important;
}

/* =========================================================================
   5.8) MODERN DOKUNUSLAR (genisletilmis)
   ========================================================================= */

/* -- Ust menu: hover/aktif sayfa icin kayan kirmizi alt cizgi ------------- */
.main-header-menu .menu-item > .menu-link { position: relative; }
.main-header-menu .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 2px;
	height: 2px;
	background: var(--maestro-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s ease;
}
.main-header-menu .menu-item > .menu-link:hover::after,
.main-header-menu .current-menu-item > .menu-link::after,
.main-header-menu .current_page_item > .menu-link::after {
	transform: scaleX(1);
}

/* -- KURUMSAL metin duzeltmesi -------------------------------------------
   Govde metni yanlislikla <h2> (42px) olarak yapistirilmis; ic span 19px.
   h2'nin 42px strut'i her satira 71px yukseklik verip devasa bosluk yaratiyor.
   Ic'inde kucuk-punto span olan h2'leri (=govde metni) paragraf gibi
   davranmaya zorluyoruz; gercek baslik (span'siz) 42px kaliyor. */
.elementor-widget-text-editor h2:has(span[style*="font-size"]) {
	font-size: 1.05rem !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	margin: 0 0 1em !important;
	font-family: var(--maestro-font-body) !important;
	letter-spacing: 0 !important;
}

/* -- Marka logolari: uzerine gelince hafif buyume ------------------------ */
.elementor-image-carousel img,
.elementor-widget-image img {
	transition: transform .2s ease;
}
.elementor-image-carousel .swiper-slide:hover img,
.elementor-widget-image:hover img {
	transform: scale(1.05);
}

/* -- Iletisim: adres/telefon satirlarini modern kart gorunumu ------------ */
.page-id-490 .elementor-widget-text-editor p:has(a[href^="tel"]),
.page-id-490 .elementor-icon-list-items .elementor-icon-list-item {
	line-height: 1.9;
}

/* =========================================================================
   6) KODLU SAYFALAR (Elementor'suz) - ortak tasarim sistemi
   'mst-' onekli siniflar yalnizca elle kodladigimiz sablonlarda kullanilir.
   ========================================================================= */

.mst-page { display: block; }

.mst-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
}

/* -- Baslik bandi (hero) -------------------------------------------------- */
.mst-hero {
	background: linear-gradient(135deg, #16233d 0%, var(--maestro-navy) 55%, #24406e 100%);
	border-radius: 18px;
	padding: clamp(28px, 5vw, 56px);
	margin-top: 24px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.mst-hero .mst-eyebrow {
	display: inline-block;
	color: #ff6b76;
	font-family: var(--maestro-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.mst-hero .mst-hero-title,
.site-content .mst-hero .mst-hero-title {
	color: #fff !important;
	font-family: var(--maestro-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.1;
	margin: 0 0 12px;
}
.mst-hero-sub {
	color: rgba(255, 255, 255, .85);
	max-width: 640px;
	line-height: 1.7;
	margin: 0;
	font-size: 16px;
}

/* -- Bolum bosluklari ---------------------------------------------------- */
.mst-section {
	padding-block: clamp(28px, 5vw, 56px);
}

/* -- Iletisim: kart izgarasi + harita ------------------------------------ */
.mst-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 28px;
	align-items: stretch;
}
.mst-contact-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mst-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid #e8ecf3;
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 2px 10px rgba(16, 33, 64, .05);
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.mst-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(16, 33, 64, .12);
	border-color: #d4dcea;
}
.mst-card-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--maestro-navy);
	color: #fff;
	display: grid;
	place-items: center;
}
.mst-card-icon--wa { background: #25D366; }
.mst-card-body { display: flex; flex-direction: column; }
.mst-card-title {
	font-family: var(--maestro-font-heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--maestro-navy);
	margin-bottom: 3px;
}
.mst-card-text {
	color: #55617a;
	font-size: 15px;
	line-height: 1.6;
}

.mst-contact-map {
	min-height: 420px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(16, 33, 64, .08);
	border: 1px solid #e8ecf3;
}
.mst-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
}

/* -- Mobil/tablet ---------------------------------------------------------- */
@media (max-width: 900px) {
	.mst-contact-grid { grid-template-columns: 1fr; }
	.mst-contact-map, .mst-contact-map iframe { min-height: 320px; }
}

/* =========================================================================
   6.9) KODLU ANA SAYFA (front-page.php)
   ========================================================================= */

/* -- Site geneli modern arka fon (banner'in acik-gri estetigine uyumlu) --- */
body {
	background-color: #eef2f7 !important;
	background-image:
		radial-gradient(55% 45% at 100% 0%, rgba(31, 47, 74, .055) 0%, rgba(31, 47, 74, 0) 60%),
		radial-gradient(45% 40% at 0% 12%, rgba(230, 57, 70, .04) 0%, rgba(230, 57, 70, 0) 60%);
	background-attachment: fixed;
}
.site-content { background: transparent; }

/* -- SEO icin gorunmez baslik -------------------------------------------- */
.mst-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -- Hero: marka banner gorseli ------------------------------------------ */
.mst-home-banner {
	margin-top: 24px;
}
.mst-home-banner img.mst-banner-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 10px 34px rgba(16, 33, 64, .14);
}

/* -- Ortak butonlar ------------------------------------------------------- */
.mst-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 10px;
	font-family: var(--maestro-font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mst-btn--primary { background: var(--maestro-accent); color: #fff; }
.mst-btn--wa { background: #25D366; color: #fff; }
.mst-btn--light { background: #fff; color: var(--maestro-navy); }
.mst-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }

/* -- Hero (kapsayici icinde, telifsiz degrade + hafif nokta deseni) -------
   Onceki tam-genislik (100vw) mobilde saga tasip 'sag kesik' yaratiyordu;
   kapsayici icine alinip yuvarlatildi. Telifli foto yerine marka renkli
   degrade + CSS nokta deseni (harici gorsel yok). */
.mst-home-hero {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	border-radius: 20px;
	margin-top: 24px;
	min-height: clamp(380px, 52vh, 520px);
	display: flex;
	align-items: center;
	color: #fff;
	background:
		radial-gradient(120% 140% at 85% 12%, rgba(230, 57, 70, .30) 0%, rgba(230, 57, 70, 0) 46%),
		radial-gradient(100% 130% at 0% 100%, rgba(36, 64, 110, .70) 0%, rgba(36, 64, 110, 0) 55%),
		linear-gradient(120deg, #0d1736 0%, var(--maestro-navy) 55%, #1c3560 100%);
}
.mst-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity: .5;
	pointer-events: none;
}
.mst-home-hero-inner { position: relative; z-index: 1; padding-block: 48px; }
.mst-brands-inline b { color: #ff6b76; font-weight: 400; margin: 0 4px; }

/* Hero araba cizimi (telifsiz SVG, dekoratif) */
.mst-home-hero-car {
	position: absolute;
	right: 2.5%;
	bottom: 9%;
	width: min(52%, 580px);
	z-index: 0;
	opacity: .92;
	pointer-events: none;
}
.mst-home-hero-car svg { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
	.mst-home-hero-car { width: 94%; right: -8%; bottom: 3%; opacity: .2; }
}
.mst-home-hero .mst-eyebrow { color: #ff6b76; }
.mst-home-hero .mst-home-hero-title {
	color: #fff !important;
	font-family: var(--maestro-font-heading);
	font-weight: 700;
	font-size: clamp(32px, 5.4vw, 56px);
	line-height: 1.08;
	letter-spacing: -.5px;
	margin: 0 0 16px;
}
.mst-home-hero-title span { color: #ff4d5a; }
.mst-home-hero-sub {
	max-width: 620px;
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
	margin: 0 0 18px;
}
.mst-brands-inline {
	font-family: var(--maestro-font-heading);
	font-weight: 600;
	letter-spacing: 1px;
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
	margin-bottom: 26px;
}
.mst-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* -- Bolum basligi -------------------------------------------------------- */
.mst-section-head { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.mst-eyebrow--dark { color: var(--maestro-accent); }
.mst-section-title {
	font-family: var(--maestro-font-heading);
	font-weight: 700;
	font-size: clamp(26px, 3.5vw, 38px);
	color: var(--maestro-navy);
	line-height: 1.15;
	margin: 8px 0 0;
}

/* -- Hizmet kartlari ------------------------------------------------------ */
.mst-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mst-service-card {
	background: #fff;
	border: 1px solid #e8ecf3;
	border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 2px 12px rgba(16, 33, 64, .05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mst-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(16, 33, 64, .12);
	border-color: #d4dcea;
}
.mst-service-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--maestro-navy), #24406e);
	color: #fff;
	margin-bottom: 16px;
}
.mst-service-card h3 {
	font-family: var(--maestro-font-heading);
	font-weight: 600;
	font-size: 19px;
	color: var(--maestro-navy);
	margin: 0 0 8px;
}
.mst-service-card p { color: #55617a; font-size: 15px; line-height: 1.6; margin: 0; }

/* -- Hakkimizda + Neden Maestro ------------------------------------------ */
.mst-about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.mst-about-text .mst-section-title { text-align: left; }
.mst-about-text p { color: #4a5468; line-height: 1.8; margin: 14px 0 0; }
.mst-why {
	background: linear-gradient(160deg, #16233d, var(--maestro-navy));
	color: #fff;
	border-radius: 18px;
	padding: 32px 30px;
}
.mst-why h3 {
	color: #fff !important;
	font-family: var(--maestro-font-heading);
	font-size: 20px;
	margin: 0 0 18px;
}
.mst-check-list { list-style: none; margin: 0; padding: 0; }
.mst-check-list li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 14px;
	color: rgba(255, 255, 255, .92);
	line-height: 1.4;
}
.mst-check-list li:last-child { margin-bottom: 0; }
.mst-check-list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--maestro-accent);
}
.mst-check-list li::after {
	content: "";
	position: absolute;
	left: 7px; top: 4px;
	width: 5px; height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* -- Misyon / Vizyon ------------------------------------------------------ */
.mst-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mst-mv-card {
	background: #fff;
	border: 1px solid #e8ecf3;
	border-radius: 18px;
	padding: 32px 30px;
	box-shadow: 0 2px 12px rgba(16, 33, 64, .05);
}
.mst-mv-icon {
	display: inline-grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: rgba(230, 57, 70, .1);
	color: var(--maestro-accent);
	margin-bottom: 16px;
}
.mst-mv-card h3 {
	font-family: var(--maestro-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--maestro-navy);
	margin: 0 0 12px;
}
.mst-mv-card p { color: #55617a; line-height: 1.75; margin: 0; }

/* -- Markalar ------------------------------------------------------------- */
.mst-brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; }
.mst-brand {
	background: #fff;
	border: 1px solid #eef1f6;
	border-radius: 16px;
	padding: 26px;
	display: grid;
	place-items: center;
	min-height: 130px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.mst-brand:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 33, 64, .1); }
.mst-brand img {
	max-height: 74px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .2s ease, opacity .2s ease;
}
.mst-brand:hover img { filter: grayscale(0); opacity: 1; }

/* -- CTA bandi (kapsayici icinde, yuvarlatilmis) -------------------------- */
.mst-cta-band {
	max-width: 100%;
	border-radius: 20px;
	background: linear-gradient(120deg, #16233d, var(--maestro-navy) 60%, #24406e);
	color: #fff;
	padding: clamp(30px, 5vw, 48px) clamp(24px, 4vw, 44px);
	margin-top: 28px;
}
.mst-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.mst-cta-text h2 {
	color: #fff !important;
	font-family: var(--maestro-font-heading);
	font-size: clamp(24px, 3vw, 32px);
	margin: 0 0 6px;
}
.mst-cta-text p { color: rgba(255, 255, 255, .85); margin: 0; }
.mst-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* -- Ana sayfa responsive ------------------------------------------------- */
@media (max-width: 1024px) {
	.mst-services-grid { grid-template-columns: repeat(2, 1fr); }
	.mst-about-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
	.mst-services-grid { grid-template-columns: 1fr; }
	.mst-mv-grid { grid-template-columns: 1fr; }
	.mst-brands-grid { grid-template-columns: repeat(2, 1fr); }
	.mst-cta-inner { flex-direction: column; align-items: flex-start; }
	.mst-home-hero-inner { padding-block: 36px; }
}

/* -------------------------------------------------------------------------
   7) Sayfaya ozel ek ince ayarlar buraya
   ------------------------------------------------------------------------- */