/*
 * Metronom — tema geliştirmeleri (EK KATMAN).
 * Mevcut Framer markup/CSS/animasyonlarına dokunmaz. Kendi `mtr-` prefix'li class'ları.
 * Kapsam: yukarı-çık butonu (#3), sayfa geçişi (#4), dokunma hedefi/a11y (#5), reduced-motion (#9).
 */

/* ---------- #3  Yukarı çık butonu — SOL ALT sabit ---------- */
.mtr-totop {
	position: fixed;
	left: 20px;
	bottom: 24px;
	z-index: 1090;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 100px;
	background: var(--color-primary, #5b7a12);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.mtr-totop.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.mtr-totop:hover { background: var(--color-primary-dark, #49630b); }
.mtr-totop:focus-visible { outline: 2px solid var(--color-primary-dark, #49630b); outline-offset: 3px; }
.mtr-totop svg { width: 20px; height: 20px; display: block; }
@media (max-width: 480px) {
	.mtr-totop { left: 16px; bottom: 16px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.mtr-totop { transition: opacity .15s linear; transform: none; }
}

/* ---------- #4  Sayfa geçişi — JS/CSS opacity fade KALDIRILDI ----------
   Geçiş tarayıcıya bırakıldı: Chrome `@view-transition` (inc/perf.php) + prerender;
   diğerleri normal (anında) navigasyon. Dolu arka plan beyaz flash'ı önlüyor. */

/* ---------- #5  Dokunma hedefi genişletme (GÖRÜNMEZ — boyut değişmez) ---------- */
.subheader-social a,
.qc-close,
.faq-quicknav-chip,
.ba-filter-chip,
.svc-filter-chip { position: relative; }
.subheader-social a::after,
.qc-close::after {
	content: "";
	position: absolute;
	inset: -9px;
}
.faq-quicknav-chip::after,
.ba-filter-chip::after,
.svc-filter-chip::after {
	content: "";
	position: absolute;
	inset: -6px;
}
/* (Mobil form alanı min-height'ı yalnız form sayfalarında yükleniyor: mtr-forms-mobile.css) */

/* ---------- Framer düzeltmesi: footer link ok ikonu ---------- */
/* Footer link'lerine (HİZMETLERİMİZ / HIZLI LİNKLER) hover'da beliren ok, Framer'ın `.hover`
   kuralı `top:10px` verdiği için 20px'lik `overflow:clip` kutusunda alt kısmı kırpılıyordu.
   Dikey merkezle (18px ikon / 20px kutu -> 1px). Yalnız hover'da; rest'te ok gizli kalır. */
.el-14il4f1 a.hover [data-name="Icon Wrapper"] svg {
	top: 1px !important;
}

/* ---------- Ekip carousel'i: 2 hekim varsa carousel yerine 2'li grid ---------- */
/* Framer bileşeni 3-up (≈%33) ayarlı; yalnız 2 kart olunca sağda büyük boşluk + işlevsiz
   Prev/Next okları (JS'i yok) + mobilde "carousel çalışmıyor" hissi. `:has()` ile: `.el--carousel`
   altında 3. `<li>` YOKSA → iki eşit kart yan yana (%50, mobilde stack), scroll-snap kapalı, oklar gizli.
   3+ `<li>` gelirse kural uygulanmaz, carousel aynen kalır.
   Hedef: hem hekim-detay/our-clinic "Team Member Section" hem anasayfa "Team Section". */
[data-name="Team Member Section"] .el--carousel:not(:has(> li:nth-child(3))),
[data-name="Team Section"] .el--carousel:not(:has(> li:nth-child(3))) {
	overflow-x: visible !important;
	scroll-snap-type: none !important;
	justify-content: center !important;
}
[data-name="Team Member Section"] .el--carousel:not(:has(> li:nth-child(3))) > li,
[data-name="Team Section"] .el--carousel:not(:has(> li:nth-child(3))) > li {
	width: calc(50% - 6px) !important;
	scroll-snap-align: none !important;
	scroll-snap-stop: unset !important;
}
[data-name="Team Member Section"] section[aria-roledescription="carousel"]:not(:has(li:nth-child(3))) .el--carousel-controls,
[data-name="Team Section"] section[aria-roledescription="carousel"]:not(:has(li:nth-child(3))) .el--carousel-controls {
	display: none !important;
}
/* Telefon genişliğinde 2 kart çok dar (isim 3 satıra kırılıyor) — tek sütun stack. */
@media (max-width: 520px) {
	[data-name="Team Member Section"] .el--carousel:not(:has(> li:nth-child(3))),
	[data-name="Team Section"] .el--carousel:not(:has(> li:nth-child(3))) {
		flex-direction: column !important;
	}
	[data-name="Team Member Section"] .el--carousel:not(:has(> li:nth-child(3))) > li,
	[data-name="Team Section"] .el--carousel:not(:has(> li:nth-child(3))) > li {
		width: 100% !important;
	}
}

/* /dentists/ ızgarası: 2 hekim varsa 3'lü grid yerine 2'li (sağdaki boş sütun kalmasın).
   3+ hekimde kural uygulanmaz — 3'lü grid aynen. Mobilde flex/stack olduğu için etkilenmez. */
.el-iodf7e:has(> .el-12v3znq:nth-child(2)):not(:has(> .el-12v3znq:nth-child(3))) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ---------- #M1  Mobil header — burger'ın soluna "Geri Bildirim" butonu ---------- */
/* Görsel: "Randevu Al" (Primary- L) butonuyla aynı — dolu yeşil hap, beyaz metin+ikon. */
.mtr-mobile-feedback {
	display: none;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	margin-right: 12px;
	padding: 8px 15px;
	border: 1px solid var(--color-primary-dark, #49630b);
	border-radius: 100px;
	background: var(--color-primary, #5b7a12);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15),
		inset 0 1px 1px 1px rgba(255, 255, 255, .25),
		inset 0 -1px 1px 1px rgba(0, 0, 0, .25);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-white-alt, #fff);
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}
.mtr-mobile-feedback svg {
	width: 15px;
	height: 15px;
	flex: none;
	--1m973uw: var(--color-white-alt, #fff); /* Framer ikon stroke rengi */
}
.mtr-mobile-feedback:active { background: var(--color-primary-dark, #49630b); }
@media (max-width: 809.98px) {
	.mtr-mobile-feedback { display: inline-flex; }
}
@media (max-width: 359.98px) {
	.mtr-mobile-feedback span { display: none; }
	.mtr-mobile-feedback { padding: 8px; margin-right: 10px; }
}

/* ---------- Mobil header — sağ/sol 5px dış boşluk (kenardan ayrık yuvarlak bar) ---------- */
/* Header'ın açık bir width'i var (left+right yetmiyor) → width'i de daralt. */
@media (max-width: 809.98px) {
	header.el-98w9h2 {
		left: 5px !important;
		right: auto !important;
		width: calc(100% - 10px) !important;
	}
}

/* ---------- #M2  Mobil "Hizmetler" + "Kurumsal" akordeon ---------- */
@media (max-width: 809.98px) {
	[data-mobile-nav-clone] .services-mega-wrapper.mtr-mnav-open .services-mega-panel,
	[data-mobile-nav-clone] .corporate-nav-wrapper.mtr-mnav-open .corporate-nav-dropdown {
		display: block !important;
		position: static !important;
		inset: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 8px 0 0 !important;
		max-height: 60vh;
		overflow-y: auto;
		box-shadow: none !important;
		background: var(--color-gray-50, #f9fafb);
		border-radius: 14px;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-body { flex-direction: column !important; }
	[data-mobile-nav-clone] .services-mega-toggle .corporate-nav-caret,
	[data-mobile-nav-clone] .corporate-nav-toggle .corporate-nav-caret { transition: transform .2s ease; }
	[data-mobile-nav-clone] .mtr-mnav-open .corporate-nav-caret { transform: rotate(180deg); }

	/* --- Hizmetler: iç içe akordeon (kategori başlığı + hemen altında hizmet listesi) --- */
	/* JS her .services-mega-list-panel'i kendi .services-mega-cat düğmesinin altına taşır;
	   .services-mega-list konteyneri artık boş. */
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-cats {
		width: 100% !important;
		padding: 4px !important;
		display: block !important;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-list { display: none !important; }

	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-cat {
		width: 100%;
		border-radius: 10px;
		padding: 13px 12px !important;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-cat-chevron {
		opacity: 1 !important;
		transition: transform .2s ease;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-cat.is-active {
		background: var(--color-primary-tint, #f0f5e4) !important;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-cat.is-active .services-mega-cat-chevron {
		transform: rotate(90deg);
	}

	/* Kategori paneli — başlığın hemen altında, girintili */
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-list-panel {
		display: none !important;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-list-panel.is-active {
		display: block !important;
		margin: 2px 4px 8px;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-list-grid {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-list-grid a {
		padding: 10px 14px !important;
		border-bottom: 1px solid var(--color-border, #f3f4f6);
	}
	[data-mobile-nav-clone] .mtr-mnav-open .services-mega-list-grid a:last-child { border-bottom: 0; }
}

/* ---------- #M3  Hero düzeltmeleri ---------- */
/* Hero sağ blok: masaüstü yüksekliği 900px → 1000px (family-7c4f32bf.css override). */
.el-VpQLA .el-c27bx1 {
	max-height: 1000px;
}

/* ---------- Hekim detay — buton grubu yerleşimi ----------
   Masaüstü: "Randevu Al" + "Klinik Bilgileri" + LinkedIn ikonu TEK SATIRDA yan yana
   (kaynak Framer tasarımı — .el-m8bpo5 zaten flex-row).
   Telefon (≤809.98px): "Randevu Al" tam genişlik kendi satırında, altında
   "Klinik Bilgileri" (büyür) + LinkedIn ikonu (56px kare) yan yana. */
[data-name="Dentist Info Section"] [data-name="Button Group"] {
	flex-flow: row wrap;
	align-items: center;
}
[data-name="Dentist Info Section"] [data-name="Button Group"] .mtr-clinic-btn {
	flex: 1 1 auto;
}
/* LinkedIn/sosyal ikon: family CSS'te zaten flex:none;56x56 — dokunma.
   .el-mqa52y-container: family CSS'te flex:1 0 0 (satırda büyür) — masaüstünde dokunma. */

/* Hekim fotoğrafı: konteynerde border-radius:20px var ama overflow yok -> görsel
   köşelerden taşıyor. overflow:hidden ile 20px köşelere kırp. */
[data-name="Dentist Info Section"] [data-name="Banner"] {
	overflow: hidden;
	border-radius: 20px;
}

@media (max-width: 809.98px) {
	/* Hero görseli: geniş foto dar ekranda ortadan kırpılınca özne (yüz, solda) kayboluyor
	   -> sola hizala. Inline style object-position:center'ı ez. */
	.el-z1c74q [data-background-image-wrapper] img,
	[data-name="Hero section"] [data-background-image-wrapper] img {
		object-position: left !important;
	}

	/* Hero yüksekliği: tam-ekran (100vh) YATAY hero görselini dikey mobil alanda aşırı
	   kırpıp ~3x büyütüyor -> bulanık. Yüksekliği düşür: görsel daha az kırpılır/büyütülür,
	   aynı kaynak dosya belirgin şekilde daha net görünür. */
	.el-VpQLA [data-name="Hero section"] {
		height: auto !important;
		max-height: none !important;
	}
	.el-VpQLA [data-name="Hero section"] .el-z1c74q {
		height: auto !important;
		min-height: 60vh;
	}

	/* Hero metin/CTA bloğu: mobilde görselin ALTINA al + alt boşluk. */
	.el-VpQLA .el-vakknm {
		align-self: unset;
		order: 2;
		padding-bottom: 9px;
	}

	/* Buton grubu: "Randevu Al" kendi satırında tam genişlik (altında Klinik + LinkedIn). */
	[data-name="Dentist Info Section"] [data-name="Button Group"] .el-mqa52y-container {
		flex: 1 1 100%;
		width: 100%;
	}

	/* ---------- /oncesi-sonrasi/ — mobil "uygulama" deneyimi ---------- */
	[data-name="Öncesi-Sonrası Section"] .page-wrap { padding: 0 !important; gap: 18px; }
	[data-name="Öncesi-Sonrası Section"] .page-warning {
		margin: 0 16px;
		font-size: 12.5px;
		padding: 13px 15px;
		line-height: 1.5;
	}

	/* Filtre çubuğu: yatay kaydırma şeridi (sekme barı hissi) */
	.ba-filters {
		top: 58px;
		z-index: 1;
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		margin: 0;
		padding: 10px 16px;
		background: rgba(255, 255, 255, .9);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--color-border, #f3f4f6);
		border-radius: 20px;
	}
	.ba-filters::-webkit-scrollbar { display: none; }
	.ba-filter-chip {
		flex: 0 0 auto;
		scroll-snap-align: start;
		font-size: 14px;
		padding: 9px 16px;
		-webkit-tap-highlight-color: transparent;
	}

	/* Izgara: tek sütun, kart = "ekran kartı" */
	.ba-grid {
		grid-template-columns: 1fr !important;
		gap: 26px;
		padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	.ba-card { -webkit-tap-highlight-color: transparent; }
	.ba-card .el-before-after-slider {
		border-radius: 20px !important;
		box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
		touch-action: pan-y;                    /* dikey kaydırma tarayıcıda kalır */
		user-select: none;
		-webkit-user-select: none;
	}
	.ba-card.is-ba-dragging .el-before-after-slider {
		touch-action: none;                     /* sürükleme anında sayfa sabit */
	}

	/* Tutamaç: 44px+ dokunma hedefi (görsel boyut aynı) */
	.el-ba-handle > div { width: 40px !important; height: 40px !important; }
	.el-ba-handle > div::after { content: ""; position: absolute; inset: -14px; }

	/* Önce/Sonra rozetleri */
	.el-before-after-slider > span {
		font-size: 12px !important;
		padding: 4px 11px !important;
		bottom: 12px !important;
	}

	/* Tipografi */
	.ba-quote {
		font-size: 17px !important;
		margin-top: 18px !important;
		margin-bottom: 12px !important;
	}
	.ba-name { font-size: 15px; }
}

/* ---------- #9  prefers-reduced-motion — Framer reveal-on-scroll güvenlik ağı ---------- */
/* JS düşse bile reveal öğeleri görünür kalsın. `:not([style*="%"])` — interactions.js'in
   `isHoverOnlyTransform`'u ile aynı ayrım: yüzde-tabanlı transform ile KONUMLANAN hover-only
   öğeler (ok-daireleri, "Learn More" etiketi vb.) HARİÇ; onlar kalıcı görünmemeli/kaymamalı. */
@media (prefers-reduced-motion: reduce) {
	[style*="opacity:0"]:not([style*="%"]),
	[style*="opacity: 0"]:not([style*="%"]) {
		opacity: 1 !important;
		transform: none !important;
	}
	html { scroll-behavior: auto !important; }
}

/* ---------- #A11y  Skip link ---------- */
.mtr-skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--color-primary, #5b7a12);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform .15s ease;
}
.mtr-skip-link:focus {
	transform: none;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- #A11y  Özel kontrollerde görünür klavye odağı ---------- */
.qc-close:focus-visible,
.qc-branch-tab:focus-visible,
.qc-action:focus-visible,
.services-mega-cat:focus-visible,
.services-mega-toggle:focus-visible,
.corporate-nav-toggle:focus-visible,
.branch-status-item:focus-visible,
.subheader-status:focus-visible,
.cf-service-toggle:focus-visible,
.cf-service-option:focus-visible,
.cf-branch-btn:focus-visible,
.gal-toggle-btn:focus-visible,
.gal-lightbox button:focus-visible,
[data-name="Burger Menu"]:focus-visible {
	outline: 2px solid var(--color-primary, #5b7a12);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- #A11y  Dokunma hedefi genişletme (görünmez) ---------- */
.qc-branch-tab,
.cf-branch-btn {
	position: relative;
}
.qc-branch-tab::after,
.cf-branch-btn::after {
	content: "";
	position: absolute;
	inset: -8px;
}