/* ============================================================
   EVDE SAĞLIK İSTANBUL - ANA TASARIM KODLARI
   ============================================================ */
:root {
	--lacivert: #0a1931;
	--mavi: #185adb;
	--yesil: #2ecc71;
	--beyaz: #ffffff;
	--gri: #f8fafc;
	--ins-renk: #E1306C;
	--pastel-somon: #ffe5d9;
	--pastel-krem: #fcf4dd;
	--pastel-mint: #d8e2dc;
	--pastel-lila: #ece4f3;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, sans-serif;
}

body {
	background: var(--beyaz);
	color: var(--lacivert);
	line-height: 1.6;
}

/* Navbar ve Üst Bar */
.ust-iletisim {
	display: flex;
	justify-content: flex-end;
	background: var(--lacivert);
	padding: 8px 10%;
	gap: 15px;
}

.iletisim-link {
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 13px;
	padding: 6px 15px;
	border-radius: 4px;
}

.wp-bg {
	background: var(--yesil);
}

.tel-bg {
	background: var(--mavi);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10%;
	background: white;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 20px rgba(0,0,0,0.05);
	min-height: 110px;
}

.logo-alani img {
	height: 100px;
	width: auto;
}

.nav-menü {
	display: flex;
	list-style: none;
}

	.nav-menü li {
		margin-left: 30px;
	}

		.nav-menü li a {
			text-decoration: none;
			color: var(--lacivert);
			font-weight: 700;
			font-size: 16px;
			position: relative;
			padding-bottom: 5px;
		}

			.nav-menü li a.aktif-link {
				color: var(--mavi);
			}

				.nav-menü li a.aktif-link::after {
					content: '';
					position: absolute;
					width: 100%;
					height: 3px;
					background: var(--mavi);
					bottom: 0;
					left: 0;
					border-radius: 2px;
				}

/* Sabit Sosyal Panel */
.sabit-iletisim-paneli {
	position: fixed;
	right: 25px;
	bottom: 25px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 9999;
}

.sabit-buton {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
	font-size: 24px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-wp {
	background: var(--yesil);
	animation: nabiz-efekti 2s infinite;
}

.btn-ins {
	background: var(--ins-renk);
}

.btn-mail {
	background: var(--mavi);
}

@keyframes nabiz-efekti {
	0% {
		box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
	}

	70% {
		box-shadow: 0 0 0 15px rgba(46, 204, 113, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
	}
}

/* Hero ve Form */
.ana-ekran {
	background: linear-gradient(rgba(10, 25, 49, 0.8), rgba(10, 25, 49, 0.8)), url('kapak.jpg');
	background-size: cover;
	background-position: center;
	padding: 80px 10%;
	color: white;
}

.ana-kapsayici {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.ana-yazi h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	line-height: 1.2;
}

	.ana-yazi h1 span {
		color: var(--yesil);
	}

.randevu-formu {
	background: white;
	padding: 30px;
	border-radius: 20px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	width: 100%;
	max-width: 380px;
}

	.randevu-formu h3 {
		color: var(--mavi);
		margin-bottom: 20px;
		text-align: center;
	}

	.randevu-formu input, .randevu-formu select, .randevu-formu textarea {
		width: 100%;
		padding: 12px;
		margin-bottom: 12px;
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		color: #333;
	}

	.randevu-formu button {
		width: 100%;
		background: var(--yesil);
		color: white;
		border: none;
		padding: 15px;
		border-radius: 8px;
		font-weight: bold;
		cursor: pointer;
	}

/* Hizmet Kartları */
.hizmetler-bolumu {
	padding: 80px 10%;
	background: var(--gri);
}

.bolum-basligi {
	text-align: center;
	font-size: 2.2rem;
	margin-bottom: 50px;
}

.hizmet-listesi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

.hizmet-kart {
	background: white;
	padding: 30px;
	border-radius: 24px;
	text-align: center;
}

	.hizmet-kart i {
		font-size: 40px;
		color: var(--mavi);
		margin-bottom: 15px;
	}

/* Asimetrik Rehber */
.premium-rehber-layout {
	padding: 100px 10%;
	background: #fff;
}

.premium-layout-grid {
	display: flex;
	align-items: center;
	gap: 60px;
}

.cift-gorsel-alani {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.gorsel-kutu img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 35px;
}

.pastel-kartlar-alani {
	flex: 1.2;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pastel-kart {
	display: flex;
	align-items: center;
	padding: 25px 35px;
	border-radius: 30px;
}

.p-kart-sol {
	width: 60px;
	height: 60px;
	background: rgba(255,255,255,0.6);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 25px;
	flex-shrink: 0;
}

.pastel-somon {
	background-color: var(--pastel-somon);
}

.pastel-krem {
	background-color: var(--pastel-krem);
}

.pastel-mint {
	background-color: var(--pastel-mint);
}

.pastel-lila {
	background-color: var(--pastel-lila);
}

/* Akademik Protokol */
.akademik-protokol {
	padding: 120px 10%;
	background: var(--gri);
}

.protokol-kapsayici {
	background: white;
	padding: 80px;
	border-radius: 8px;
	display: flex;
	gap: 80px;
	position: relative;
	overflow: hidden;
}

	.protokol-kapsayici::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 10px;
		background: var(--lacivert);
	}

.protokol-sol-serit h2 {
	font-size: 2.8rem;
	color: var(--lacivert);
}

.protokol-sag-icerik {
	flex: 1.8;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.akademik-paragraf {
	display: flex;
	gap: 30px;
}

.adim-no {
	width: 45px;
	height: 45px;
	background: var(--lacivert);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-weight: 800;
	flex-shrink: 0;
}

/* Kurumsal Footer */
.kurumsal-footer {
	background: #051020;
	padding: 80px 10% 30px;
	color: white;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
	gap: 50px;
	margin-bottom: 60px;
}

.f-sutun h4 {
	font-size: 1.2rem;
	margin-bottom: 25px;
	position: relative;
	padding-bottom: 10px;
}

	.f-sutun h4::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 40px;
		height: 3px;
		background: var(--mavi);
	}

.f-linkler {
	list-style: none;
}

	.f-linkler li {
		margin-bottom: 12px;
	}

		.f-linkler li a {
			text-decoration: none;
			color: white;
			opacity: 0.7;
		}

.f-iletisim-item {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

	.f-iletisim-item i {
		color: var(--yesil);
	}

.f-sosyal {
	display: flex;
	gap: 15px;
}

	.f-sosyal a {
		width: 40px;
		height: 40px;
		background: rgba(255,255,255,0.05);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-decoration: none;
	}

.footer-alt-telif {
	border-top: 1px solid rgba(255,255,255,0.05);
	padding-top: 30px;
	text-align: center;
	opacity: 0.5;
}

/* ============================================================
   AKILLI MOBİL VE SAYFA YAMASI (ÇAKIŞMAYI ÖNLER)
   ============================================================ */

/* Katalog, Blog, SSS için ortak konteyner ayarları */
.katalog-sayfasi, .blog-sayfasi, .sss-yeni-tasarim {
	padding: 60px 10%;
	background: var(--gri);
	min-height: 80vh;
}

.katalog-cerceve, .blog-icerik-kapsayici, .sss-merkez-kutu {
	max-width: 900px;
	margin: 0 auto;
	background: white;
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Kesin Mobil Uyumluluk */
@media (max-width: 992px) {
	.ana-kapsayici, .premium-layout-grid, .protokol-kapsayici, .footer-grid {
		flex-direction: column !important;
		grid-template-columns: 1fr !important;
		text-align: center;
	}

	.ust-iletisim {
		display: none;
	}

	.navbar {
		flex-direction: column !important;
		padding: 15px 5% !important;
		min-height: auto !important;
	}

	.logo-alani img {
		height: 70px !important;
		margin-bottom: 15px;
	}

	.nav-menü {
		width: 100%;
		justify-content: space-around;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #eee;
	}

		.nav-menü li {
			margin: 0 !important;
		}

			.nav-menü li a {
				font-size: 14px !important;
			}

	.ana-yazi h1 {
		font-size: 2rem !important;
	}

	.randevu-formu {
		margin: 20px auto 0;
		max-width: 100%;
	}

	.f-sutun h4::after {
		left: 50%;
		transform: translateX(-50%);
	}

	.f-iletisim-item {
		justify-content: center;
	}

	.f-sosyal {
		justify-content: center;
	}

	.katalog-sayfasi, .blog-sayfasi, .sss-yeni-tasarim {
		padding: 40px 5%;
	}
}
/* ============================================================
   BOZULAN RANDEVU BANNER DÜZELTME KODLARI
   ============================================================ */
.hizli-randevu-banner {
	background: linear-gradient(135deg, var(--lacivert) 0%, #1a3a6d 100%) !important;
	padding: 80px 10% !important;
	text-align: center !important;
	color: white !important;
	display: block !important;
	clear: both !important;
}

.banner-icerik h2 {
	font-size: 2.5rem !important;
	margin-bottom: 15px !important;
	color: white !important;
}

	.banner-icerik h2 span {
		color: var(--yesil) !important;
	}

.banner-icerik p {
	font-size: 1.1rem !important;
	opacity: 0.9 !important;
	margin-bottom: 40px !important;
	max-width: 700px !important;
	margin: 0 auto 40px auto !important;
	color: white !important;
}

.banner-butonlar {
	display: flex !important;
	justify-content: center !important;
	gap: 20px !important;
	flex-wrap: wrap !important;
}

.b-btn {
	text-decoration: none !important;
	padding: 18px 35px !important;
	border-radius: 50px !important;
	font-weight: 800 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	transition: 0.3s !important;
	font-size: 1.1rem !important;
}

.b-btn-beyaz {
	background: white !important;
	color: var(--lacivert) !important;
}

.b-btn-yesil {
	background: var(--yesil) !important;
	color: white !important;
}

/* Mobil için Banner Düzeltmesi */
@media (max-width: 768px) {
	.banner-icerik h2 {
		font-size: 1.8rem !important;
	}

	.banner-butonlar {
		flex-direction: column !important;
		align-items: center !important;
	}

	.b-btn {
		width: 100% !important;
		justify-content: center !important;
	}
}
/* ============================================================
   KATALOG VE NAVBAR KESİN DÜZELTME
   ============================================================ */

/* Katalog görselinin taşmasını engeller ve sayfaya sığdırır */
.katalog-cerceve img {
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 0 auto !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	border-radius: 15px;
}

/* Katalog konteynerını ortalar ve padding ayarını düzeltir */
.katalog-sayfasi {
	overflow-x: hidden !important; /* Sağa kaymayı engeller */
	padding: 40px 5% !important;
}

/* Navbar'daki logo ve menü hizalamasını jilet gibi yapar */
.navbar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 10px 10% !important;
}

.logo-alani img {
	max-height: 80px !important; /* Logoyu bir tık kibarlaştırır */
	width: auto !important;
}

/* Mobil cihazlarda görselin ve menünün tam uyumu */
@media (max-width: 768px) {
	.katalog-cerceve {
		padding: 15px !important;
	}

	.navbar {
		flex-direction: column !important;
		gap: 15px !important;
	}
}
/* ============================================================
   TELEFONDAKİ KOCAMAN GÖRÜNTÜYÜ VE KAYMAYI BİTİREN KESİN KOD
   ============================================================ */
@media only screen and (max-width: 600px) {
	/* 1. Tüm sayfa genişliğini telefon ekranına hapseder */
	html, body {
		overflow-x: hidden !important;
		width: 100% !important;
		position: relative !important;
	}

	/* 2. Menü (Navbar) karmaşasını alt alta dizerek çözer */
	.navbar {
		flex-direction: column !important;
		height: auto !important;
		padding: 10px 0 !important;
	}

	.nav-menü {
		display: flex !important;
		flex-direction: column !important; /* Yan yana dizilmeyi mobilde iptal eder */
		width: 100% !important;
		gap: 8px !important;
		margin-top: 15px !important;
		padding: 0 !important;
	}

		.nav-menü li {
			margin: 0 !important;
			width: 100% !important;
			text-align: center !important;
		}

			.nav-menü li a {
				font-size: 14px !important;
				display: block !important;
				padding: 5px 0 !important;
			}

	/* 3. Yan yana sıkışan her şeyi alt alta dizilmeye zorlar */
	.ana-kapsayici, .hizmet-listesi, .premium-layout-grid, .footer-grid, .protokol-kapsayici {
		display: flex !important;
		flex-direction: column !important;
		padding: 20px 5% !important;
		align-items: center !important;
		text-align: center !important;
		gap: 20px !important;
	}

	/* 4. Kutuların ve formun ekranı patlatmasını engeller */
	.randevu-formu, .hizmet-kart, .f-sutun {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 20px 0 !important;
	}

	/* 5. Resimleri telefon ekranına sığdırır */
	img, .katalog-cerceve img {
		max-width: 100% !important;
		height: auto !important;
	}
}
/* SADECE MOBİLDEKİ KUTULARI YAN YANA VE KİBAR YAPAR */
@media screen and (max-width: 600px) {
	/* 1. Pastel kartların (Avantajlar vb.) alt alta dizilmesini iptal eder */
	.pastel-kartlar-alani {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* Kartları 2'li yan yana dizer */
		gap: 10px !important;
	}

	.pastel-kart {
		flex-direction: column !important; /* İkon üste, yazı alta gelecek şekilde */
		padding: 15px 10px !important;
		text-align: center !important;
		min-height: 180px !important;
	}

	.p-kart-sol {
		margin: 0 0 10px 0 !important;
		width: 40px !important;
		height: 40px !important;
	}

	.p-kart-sag h4 {
		font-size: 0.9rem !important; /* Yazıları küçültür ki yan yana sığsın */
	}

	.p-kart-sag p {
		font-size: 0.75rem !important;
		line-height: 1.2 !important;
	}

	/* 2. Menü yazılarını (Ana Sayfa vb.) çok yer kaplamaması için 2'li sıraya sokar */
	.nav-menü {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important; /* Menüyü 3'lü yan yana dizer */
		text-align: center !important;
		gap: 5px !important;
	}
}
/* ============================================================
   TELEFONDA PC DÜZENİNE YAKIN HASSAS AYARLAR
   ============================================================ */
@media screen and (max-width: 600px) {
	/* 1. Hizmetlerin kocaman olmasını engeller, yan yana dizer */
	.hizmet-listesi {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* Hizmetleri 2'li yan yana yapar */
		gap: 10px !important;
		padding: 10px !important;
	}

	.hizmet-kart {
		padding: 15px !important;
		min-height: 160px !important;
	}

		.hizmet-kart i {
			font-size: 22px !important;
		}

		.hizmet-kart h3 {
			font-size: 0.9rem !important;
		}

		.hizmet-kart p {
			font-size: 0.75rem !important;
			line-height: 1.2 !important;
		}

	/* 2. Pastel Rehber Kartlarını 2'li yan yana dizerek PC havası verir */
	.premium-layout-grid {
		display: flex !important;
		flex-direction: column !important;
	}

	.pastel-kartlar-alani {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* Rehberi 2'li yan yana yapar */
		gap: 10px !important;
		margin-top: 15px !important;
	}

	.pastel-kart {
		flex-direction: column !important;
		text-align: center !important;
		padding: 15px 5px !important;
		min-height: 140px !important;
	}

	.p-kart-sol {
		margin: 0 0 8px 0 !important;
		transform: scale(0.8);
	}

	.p-kart-sag h4 {
		font-size: 0.85rem !important;
	}

	.p-kart-sag p {
		font-size: 0.7rem !important;
	}

	/* 3. Vizyonumuz kısmını sayfaya sığdırır, dev gibi yapmaz */
	.protokol-kapsayici {
		display: block !important;
		padding: 20px !important;
	}

	.protokol-sol-serit h2 {
		font-size: 1.4rem !important;
		text-align: center !important;
		margin-bottom: 20px !important;
	}

	.akademik-paragraf {
		margin-bottom: 15px !important;
	}

	.paragraf-detay p {
		font-size: 0.8rem !important;
	}

	/* 4. Footer'daki o "yayılmış" görüntüyü toplar */
	.footer-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* Footer linklerini 2'li dizer */
		gap: 20px !important;
		text-align: left !important;
	}

	.f-sutun h4 {
		font-size: 0.9rem !important;
		margin-bottom: 10px !important;
	}

	.f-linkler li a, .f-sutun p {
		font-size: 0.75rem !important;
	}

	/* 5. Sabit butonları küçültür ki içeriği kapatmasın */
	.sabit-iletisim-paneli {
		transform: scale(0.75);
		right: 5px !important;
		bottom: 5px !important;
	}
}
/* ============================================================
   KUSURSUZ MOBİL ÖLÇEKLENDİRME - PC DÜZENİNE SADIK KALIR
   ============================================================ */
@media screen and (max-width: 600px) {
	/* 1. Hizmet Kartlarını ve Pastel Rehberi Kibarlaştırır */
	.hizmet-listesi, .pastel-kartlar-alani {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* PC'deki yan yana duruşu simüle eder */
		gap: 12px !important;
		padding: 5px !important;
	}

	.hizmet-kart, .pastel-kart {
		padding: 12px 8px !important;
		min-height: 140px !important; /* Yüksekliği daraltarak kaba görüntüyü yok eder */
		text-align: center !important;
	}

	/* 2. Görsellerin Yan Yana Sığmasını Sağlar */
	.premium-layout-grid {
		display: flex !important;
		flex-direction: column !important;
	}

	.cift-gorsel-alani {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* Görselleri devasa boyuttan kurtarır */
		gap: 10px !important;
		margin-bottom: 15px !important;
	}

	/* 3. Vizyonumuz ve Paragrafları Ekran İçine Hapseder */
	.protokol-kapsayici {
		padding: 20px 10px !important;
	}

	.protokol-sol-serit h2 {
		font-size: 1.3rem !important; /* Başlık devasa olmaktan çıkar */
		margin-bottom: 15px !important;
	}

	.akademik-paragraf {
		padding: 10px !important;
	}

	.paragraf-detay p {
		font-size: 0.78rem !important; /* Yazıları kibarlaştırır */
		line-height: 1.3 !important;
	}

	/* 4. Footer (Lacivert Alan) Karmaşasını Bitirir */
	.footer-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important; /* Listeleri 2 sütuna bölerek PC havası verir */
		gap: 15px !important;
		text-align: left !important;
	}

	.f-sutun h4 {
		font-size: 0.85rem !important;
	}

	.f-linkler li a, .f-sutun p {
		font-size: 0.72rem !important;
	}
}