body { font-family: 'Segoe UI', sans-serif; margin: 0; background-color: #ffffff; color: #333; }

    /* 🔹 Üst bilgilendirme barı (krem tonlu) */
    .topbar {
		background-color: #faf8f4; /* soğuk krem ton */
		color: #444;
		font-size: 14px;
		padding: 6px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		border-bottom: 1px solid #eceae6;
	}	
    .topbar a {
      color: #444;
      text-decoration: none;
      margin-left: 10px;
      display: inline-flex;
      align-items: center;
      transition: 0.3s;
    }
    .topbar a:hover { opacity: 0.7; }
    .topbar a img {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }

    /* 🔹 Logo + Menü */
    header {
      background-color: white;
      padding: 10px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      border-bottom: 1px solid #e0e0e0;
    }
    .logo-section {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #0077b6;
      font-weight: bold;
      font-size: 24px;
    }
    .logo-section img {
      height: 55px;
      margin-right: 10px;
    }
    nav {
      display: flex;
      gap: 25px;
      flex-wrap: wrap;
    }
    nav a {
      color: #0077b6;
      text-decoration: none;
      font-weight: 500;
      position: relative;
      transition: 0.3s;
    }
    nav a::after {
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      background: #0077b6;
      left: 0;
      bottom: -4px;
      transition: 0.3s;
    }
    nav a:hover::after { width: 100%; }
	
	/* 🔹 FLAG  */
	.lang-switch img {
	width: 26px;
	height: auto;
	vertical-align: middle;
	margin-left: 10px;
	cursor: pointer;
	transition: transform 0.2s ease;
	}

	.lang-switch img:hover {
	transform: scale(1.1);
	}

	
    /* 🔹 HERO Slider */
	.hero {
	position: relative;
	height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	background-color: #1a3a4a;
	overflow: hidden;
	}

	.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.8s ease-in-out;
	}
	
	/* karartma overlay (yazı okunurluğu için) */
	.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	}
	
	/* içerik ön planda */
	.hero-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 20px;
	}
	
	.hero h1 {
	font-size: 40px;
	margin-bottom: 15px;
	}

	.hero p {
	font-size: 18px;
	line-height: 1.6;
	}


    /* 🔹 Genel bölümler */
    .section { padding: 40px 20px; max-width: 1200px; margin: auto; }
    .section h2 { text-align: center; color: #0077b6; margin-bottom: 30px; }

    /* 🔹 Tedaviler */
    .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
    .service-item {
      text-align: center; background: #f9f9f9; padding: 20px;
      border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: 0.3s;
    }
    .service-item:hover { transform: translateY(-5px); }
    .service-item img { height: 60px; margin-bottom: 15px; }

    /* 🔹 Hekimler */
    .doctors { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; text-align: center; }
    .doctor { width: 250px; }
    .doctor img { width: 100%; border-radius: 10px; margin-bottom: 10px; background: #eee; height: 250px; object-fit: cover; object-position: center 20%; }

    /* 🔹 Form alanı */
    .form-section { background: #f5fbff; padding: 40px 20px; text-align: center; }
    form { max-width: 500px; margin: auto; display: flex; flex-direction: column; gap: 10px; }
    input, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
    button { background-color: #0077b6; color: white; border: none; padding: 12px; border-radius: 5px; cursor: pointer; }
    button:hover { background-color: #005f8a; }

    /* 🔹 Harita */
    iframe { width: 100%; height: 400px; border: none; border-radius: 10px; margin-top: 30px; }

    /* 🔹 Footer */
    footer { text-align: center; padding: 20px; font-size: 14px; color: #555; background-color: #f1faff; margin-top: 40px; }
	
	/* 🔹 Floating WhatsApp */
	.whatsapp-float {
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 40px;
	height: 40px;
	background-color: #25d366;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	
	.whatsapp-float img {
	width: 40px;
	height: 40px;
	}
	
	.whatsapp-float:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	}
	
	.service-item {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	}
	
	/* 🔹 Dropdown Menü */
	.dropdown {
	position: relative;
	}
	
	.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	min-width: 230px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	border-radius: 6px;
	padding: 10px 0;
	z-index: 999;
	}
	
	.dropdown-menu a {
	display: block;
	padding: 10px 20px;
	color: #0077b6;
	text-decoration: none;
	font-size: 14px;
	}
	
	.dropdown-menu a:hover {
	background-color: #f1faff;
	}
	
	/* Desktop hover */
	@media (min-width: 769px) {
	.dropdown:hover .dropdown-menu {
		display: block;
	}
	}
	
	/* Desktop - Hamburger gizle */
	@media (min-width: 769px) {
		.menu-toggle {
			display: none;
		}
	}

	/* =========================
	   MOBİL RESPONSIVE
	========================= */
	@media (max-width: 768px) {
		/* Topbar mobil düzeni */
		.topbar {
			flex-direction: column;
			text-align: center;
			gap: 8px;
			padding: 10px 15px;
		}
		
		.topbar > div:last-child {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 8px;
		}
		
		.topbar a {
			margin-left: 0;
			font-size: 12px;
		}

		/* Header mobil */
		header {
			padding: 10px 15px;
			position: relative;
		}

		.logo-section {
			font-size: 18px;
		}

		.logo-section img {
			height: 40px;
		}

		/* Hamburger Menü Butonu */
		.menu-toggle {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 44px;
			height: 44px;
			background: none;
			border: none;
			cursor: pointer;
			z-index: 1001;
			gap: 6px;
			border-radius: 8px;
			transition: background-color 0.3s ease;
		}

		.menu-toggle:hover {
			background-color: #e6f4fa;
		}

		.menu-toggle.active {
			background-color: #d0ebf7;
		}

		.menu-toggle span {
			display: block;
			width: 28px;
			height: 4px;
			background-color: #0077b6;
			border-radius: 3px;
			transition: all 0.3s ease;
		}

		/* Hamburger animasyonu - açık durumda */
		.menu-toggle.active span:nth-child(1) {
			transform: rotate(45deg) translate(6px, 6px);
		}

		.menu-toggle.active span:nth-child(2) {
			opacity: 0;
		}

		.menu-toggle.active span:nth-child(3) {
			transform: rotate(-45deg) translate(6px, -6px);
		}

		/* Navigasyon - mobil */
		nav {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: #fff;
			flex-direction: column;
			gap: 0;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			z-index: 1000;
			padding: 10px 0;
		}

		nav.active {
			display: flex;
		}

		nav a {
			padding: 15px 20px;
			border-bottom: 1px solid #eee;
			width: 100%;
			box-sizing: border-box;
		}

		nav a::after {
			display: none;
		}

		/* Dropdown mobil */
		.dropdown {
			width: 100%;
		}

		.dropdown > a {
			width: 100%;
			display: block;
		}

		.dropdown-menu {
			position: static;
			box-shadow: none;
			border-radius: 0;
			display: none;
			padding-left: 20px;
			background: #f9f9f9;
		}

		.dropdown.open .dropdown-menu {
			display: block;
		}

		.dropdown-menu a {
			border-bottom: 1px solid #eee;
		}

		/* Dil değiştirme */
		.lang-switch {
			padding: 15px 20px !important;
			border-bottom: none !important;
		}

		/* Hero mobil */
		.hero {
			height: 300px;
		}

		.hero h1 {
			font-size: 24px;
			padding: 0 15px;
		}

		.hero p {
			font-size: 14px;
			padding: 0 15px;
		}

		/* Servisler mobil */
		.services {
			grid-template-columns: 1fr;
		}

		/* Section mobil */
		.section {
			padding: 30px 15px;
		}

		.section h2 {
			font-size: 22px;
		}

		/* Hekimler mobil */
		.doctor {
			width: 100%;
			max-width: 300px;
		}

		/* Form mobil */
		.form-section {
			padding: 30px 15px;
		}

		form {
			width: 100%;
		}

		/* Harita mobil */
		iframe {
			height: 300px;
		}

		/* Footer mobil */
		footer {
			padding: 15px;
			font-size: 12px;
		}

		/* WhatsApp butonu mobil */
		.whatsapp-float {
			bottom: 15px;
			right: 15px;
			width: 50px;
			height: 50px;
		}

		.whatsapp-float img {
			width: 50px;
			height: 50px;
		}

		/* Treatment container mobil */
		.treatment-container {
			flex-direction: column;
			gap: 20px;
		}

		.treatment-image img {
			margin-top: 20px;
			max-width: 100%;
		}

		/* FAQ mobil */
		.faq-section {
			padding: 0 15px;
			margin: 40px auto;
		}

		/* Hekimler sayfası mobil */
		.doctor-profile {
			flex-direction: column;
			gap: 20px;
		}

		.doctor-profile img {
			width: 100%;
			max-width: 250px;
			margin: 0 auto;
		}
	}

/* =========================
   TEDAVİ SAYFALARI
========================= */
.treatment-section {
	padding: 60px 20px;
}

.treatment-container {
	max-width: 1200px;
	margin: auto;
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.treatment-text {
	flex: 2;
	line-height: 1.7;
}

.treatment-text h1 {
	color: #0077b6;
	margin-bottom: 20px;
	text-align: left;
}

.treatment-text p {
	line-height: 1.8;
	margin-bottom: 15px;
	font-size: 16px;
}

.treatment-text p:first-of-type {
	margin-top: 0;
}

.treatment-image {
	flex: 1;
}

.treatment-image img {
	width: 100%;
	max-width: 350px;
	border-radius: 12px;
	display: block;
	margin-top: 40px;
}

.treatment-title {
	color: #0077b6;
}

/* =========================
   SSS / ACCORDION
========================= */
.faq-section {
	max-width: 700px;
	margin: 60px auto;
	padding: 0 20px;
}

.faq-section h2 {
	color: #0077b6;
	text-align: center;
	margin-bottom: 30px;
}

.accordion {
	margin-top: 20px;
}

.accordion-item {
	border-bottom: 1px solid #ddd;
}

.accordion-header {
	width: 100%;
	background: none;
	border: none;
	padding: 18px 15px;
	font-size: 16px;
	font-weight: 600;
	color: #0077b6;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	transition: background-color 0.3s ease;
}

.accordion-header:hover {
	background-color: #e6f4fa;
}

.accordion-item.active .accordion-header {
	background-color: #d0ebf7;
	color: #005f8a;
}

.accordion-item.active .accordion-header:hover {
	background-color: #c0e3f2;
}

.accordion-content {
	display: none;
	padding-bottom: 15px;
	line-height: 1.6;
}

.accordion-item.active .accordion-content {
	display: block;
}

.accordion-header span {
	font-size: 22px;
	transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header span {
	transform: rotate(45deg);
}

/* =========================
   HEKİMLER SAYFASI
========================= */
.doctors-page {
	padding: 40px 20px;
	max-width: 1000px;
	margin: auto;
}

.doctor-profile {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 50px;
	align-items: flex-start;
}

.doctor-profile img {
	width: 250px;
	border-radius: 10px;
	background: #eee;
}

.bio {
	flex: 1;
}

.bio h2 {
	color: #0077b6;
}

.bio p {
	line-height: 1.6;
}

/* =========================
   BLOG SAYFASI
========================= */
.blog-content {
	max-width: 900px;
	margin: 80px auto;
	text-align: center;
	padding: 0 20px;
}

.blog-content h1 {
	color: #0077b6;
}

.blog-content p {
	margin-top: 20px;
	color: #555;
}

/* =========================
   DOKTOR LİNKLERİ
========================= */
.doctor h3 a {
	color: #0077b6;
	text-decoration: none;
}

.doctor h3 a:hover {
	text-decoration: underline;
}