@import url('../textfont/stylesheet.css');
@import url('line-awesome.css');
@import url('all.min.css');
@import url('swiper-bundle.min.css');
@import url('animate.css');
@import url('bootstrap.min.css');
@import url('fancybox.css');
@import url('lity.min.css');
@import url('intlTelInput.css');
@import url('aos.css');


a {
	text-decoration:none;
	transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

ol,ul {
	padding:0px;
	margin:0px;
}
h1 {
	font-size:50px;
	font-weight:400;
	line-height:56px;
	margin-bottom:10px;
}
h2 {
	font-size:30px;
	font-weight:700;
	line-height:39px;
	margin-bottom:10px;
}
h3 {
	font-size:20px;
	font-weight:700;
	line-height:26px;
	margin-bottom:10px;
}
h4 {
	font-size:18px;
	font-weight:500;
	line-height:24px;
	margin-bottom:10px;
}
h5 {
	font-size:16px;
	font-weight:700;
	line-height:23px;
	margin-bottom:10px;
}
h6 {
	font-size:14px;
	font-weight:500;
	line-height:18px;
	margin-bottom:10px;
}
p {
	font-size:15px;
	font-weight:400;
	line-height:25px;
	margin-bottom:10px;
}
main {
	overflow:hidden;
	width:calc(100vw - 5px);
	min-height:100vh;
}

body {
	position:relative;
	font-family: "Poppins", sans-serif;
}


:root {
  --anarenk: #1f1f1f;
  --kirmizi: #ea0005;
  --gri: #9D9E9D;
  --siyah: #1f1f1f;
  --krem: #fcfcf9;
}

/* width */
.scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
.scrollbar::-webkit-scrollbar-track {
  background: #F6F5F0; 
}
 
/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
  background: var(--anarenk); 
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #FEDD06; 
}
.container-fluid {
	max-width:calc(100vw - 200px);	
}

.swiper {
	position:relative;
	overflow:hidden;
}

.dikeyortala {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:100%;
}

/*------------------cerezpolitikasi----------------------*/
.cerezpolitikasi {
	position:fixed;
	bottom:20px;
	left:20px;
	width:400px;
	max-width:calc(100% - 40px);
	padding:20px;
	border-radius:20px;
	background:rgba(0,0,0,0.5);
	font-size:14px;
	line-height:20px;
	color:#fff;
	z-index:100000;
}
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0px 30px;
	height:60px;
	border-radius:30px;
	font-weight: 400;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}


/*------------------header----------------------*/

.aciklama {
	margin-bottom:24px;
}
.aciklama h1 {
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	color: var(--yesil);
	margin-bottom:14px;
}
.aciklama ul,ol {
	list-style:none;
	margin-bottom:24px;
}
.aciklama ul li ,
.aciklama ol li 
{
	position:relative;
	padding-left:15px;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--yesil);
	opacity: 1;
}
.aciklama ul li:before ,
.aciklama ol li:before 
{
	position:absolute;
	content:"";
	top:11px;
	left:0px;
	width:7px;
	height:7px;
	border-radius:4px;
	background:var(--yesil);
	opacity: 1 !important;
}
.aciklama img {
	width:100% !important;
	border-radius:20px;
	max-height:300px;
	object-fit:cover;
	margin-bottom:25px;
}
.aciklama h2 ,
.aciklama h3 ,
.aciklama h4 ,
.aciklama h5 
{
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	color: var(--yesil);
	margin-bottom:20px;
}
.aciklama p 
{
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: var(--yesil);
	opacity: 1;
	margin-bottom:20px;
}
/*------------------header (YENİ TASARIM) ----------------------*/

/* Ana Header Kapsayıcısı */
#header {
    position: absolute;
	top:0px;
	left:0px;
	width:100%;
    z-index: 999;
    transition: all 0.3s ease;
}

/* Sabit Header (Scroll yapınca yapışan kısım için) */
#header.sabit {
    position: relative;
    width: 100%;
    z-index: 999;
}
/* Sabit Header (Scroll yapınca yapışan kısım için) */

#header.heading {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
}

/* İç Alan Hizalamaları */
#header .alan {
    display: flex;
    align-items: flex-end;
    justify-content: space-between; /* İçerikleri sağa ve sola yaslar */
    padding: 10px 0px; /* Üst alt boşlukları logoya göre artırıp azaltabilirsin */
}

/* Logo */
#header .alan .logo {
    margin-right: auto; /* Logoyu sola iter, diğerlerini sağa iter */
}

#header .alan .logo img {
    height: 70px; /* Görseldeki orana göre ayarlandı, gerekirse değiştir */
    width: auto;
}

/* --- MENÜ ALANI --- */
#header .menu {
    margin-right: 30px; /* Menü ile buton arasına mesafe koyar */
}

#header .menu ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px; /* Menü öğeleri arasındaki boşluk (görselde oldukça ferah) */
    margin: 0;
    padding: 0;
}

#header .menu .link-li {
    position: relative;
}

#header .menu .link-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 15px; /* Görseldeki ince ve okunaklı boyut */
    line-height: 40px;
    color: #111111; /* Siyah/Çok koyu gri */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Menü yanında aşağı ok ikonu için (Açılır menüler) */
/* HTML'de link-item içine <i class="las la-angle-down"></i> eklendiğini varsayarsak veya CSS ile yapabiliriz: */
#header .menu .link-li.has-dropdown .link-item::after {
    content: '\f107'; /* FontAwesome angle-down unicode'u */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    margin-left: 6px;
    color: #666;
}

#header .menu .link-item:hover {
    color: #e3b04b; /* Altın/Sarı tonuna döner */
}

/* Açılır Menü (Dropdown) */
#header .menu .acilan {
    position: absolute;
    display: none;
    top: 100%;
    left: 0px;
    width: 220px;
    padding: 10px 0px;
    border-radius: 8px; /* Daha modern yuvarlak köşeler */
    background: #ffffff;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
    border-top: 3px solid #e3b04b; /* Üstünde marka rengi ince çizgi */
    z-index: 100;
}

#header .menu .link-li:hover .acilan {
    display: block;
}

#header .menu .acilan ul {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

#header .menu .acilan .link-item {
    line-height: 24px;
    color: #333333;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    text-align: center;
}

#header .menu .acilan .link-item:hover {
    background-color: #f9f9f9;
    color: #e3b04b;
}


/* --- DOKTORLAR İÇİN BUTONU (Altın/Sarı Tonu) --- */
#header .butondoktorlar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3b04b 0%, #d19a3a 100%); /* Altın sarısı gradyan */
    color: #ffffff !important; /* Yazı rengi beyaz */
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 50px; /* Hap şeklinde yuvarlak */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(227, 176, 75, 0.4); /* Kendi renginde parlama/gölge */
    transition: all 0.3s ease;
    margin-right: 30px;
}

#header .butondoktorlar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 176, 75, 0.6);
}


/* --- SOSYAL MEDYA İKONLARI --- */
#header .sosyal {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 20px;
}

#header .sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: #111111; /* Siyah ikonlar */
    font-size: 16px;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#header .sosyal a:hover {
    color: #e3b04b; /* Hoverda altın rengi */
    background-color: #f5f5f5; /* Çok hafif gri zemin */
}


/* --- DİL SEÇENEĞİ (TR / EN) --- */
#header .dil {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 101;
    padding-left: 10px;
    border-left: 1px solid #eeeeee; /* Sosyal medyadan ayırmak için ince çizgi */
}

#header .dil .default {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
    cursor: pointer;
}

#header .dil .default:hover {
    color: #e3b04b;
}

#header .dil .acilan {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 60px;
    padding-top: 15px; /* Hover alanını korumak için boşluk */
    display: none;
}

#header .dil:hover .acilan {
    display: flex;
    flex-direction: column;
}

#header .dil .acilan a {
    background: #ffffff;
    color: #111111;
    padding: 8px 15px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 5px;
}

#header .dil .acilan a:hover {
    color: #ffffff;
    background-color: #e3b04b;
}



/*------------------mobilheader----------------------*/

#mobilheader {
	display:none;
	align-items:center;
	flex-wrap:wrap;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:1000;
	height:65px;
	padding:0px 5px;
	background:#fff;
}
#mobilheader.sabit {
	position:relative;
	top:auto;
	left:auto;
	width:100%;
	background:var(--krem);
}
#mobilheader.heading {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	background:var(--krem);
}

#mobilheader .alansol {
	width:35%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

#mobilheader .alanorta {
	width:30%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}

#mobilheader .alansag {
	width:35%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
#mobilheader .btn {
    padding: 0px 0px 0px 0px;
}
#mobilheader .btn i {
	font-size:40px;
}
#mobilheader .logo {
	display:flex;
	align-items:center;
	justify-content:center;
	padding:5px;
}
#mobilheader .logo img {
	max-width:100%;
	max-height:100%;
}

#mobilheader .dil {
	display:flex;
	align-items:center;
	position:relative;
	z-index:101;
	padding:0px 5px;
	height:100%;
}
#mobilheader .dil .default {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	border:1px solid rgba(0,0,0,0.4);
	text-transform:uppercase;
}
#mobilheader .dil .default img {
	height:15px;
	margin-right:5px;
}
#mobilheader .dil .default i {
	color:#fff;
	font-size:20px;
}

#mobilheader .dil .acilan {
	position:absolute;
	top:100%;
	right:calc(50% - 20px);
	width:40px;
	padding-top:10px;
	z-index:100;
	display:none;
	z-index:10000;
}
#mobilheader .dil .acilan .default {
	width:40px;
	height:40px;
	border-radius: 5px;
	margin-bottom:5px;
	background: #000;
	color:#fff;
	padding:10px;
	border:1px solid #fff;
}
#mobilheader .dil:hover .acilan {
	display:block;
}


/*------------------mobilmenu----------------------*/


#mobilmenu {
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow-y:scroll;
	z-index:1000;
	background: #fff;
	transform: translateX(-100%);
	transition:all 0.3s ease;
}

#mobilmenu .ust {
	display:flex;
	align-items:center;
	width:100%;
	height:65px;
	padding:10px;
}
#mobilmenu .ust .logo {
	max-height:100%;
	max-width:70%;
	margin-right:auto;
}
#mobilmenu .ust .kapat {
	font-size:40px;
	color:#000;
}
#mobilmenu .menu {
    border-top: 1px solid hsla(0,0%,60%,.2);
	padding:20px 0px;
}
#mobilmenu .menu ul {
	display: flex!important;
    flex-direction: column;
    align-items: center;
    list-style-type: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 15px;
}
#mobilmenu .menu .link-li {
	position:relative;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
	border-bottom:1px solid rgba(51, 51, 51, 0.1);
	padding:5px 40px 5px 5px;
}
#mobilmenu .menu .link-li:last-child {
	border-bottom:0px solid rgba(51, 51, 51, 0.1);
}
#mobilmenu .menu .link-li.hover:before {
    position:absolute;
	content:"\f105";
	top:5px;
	right:0px;
	width:30px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	color:#000;
    font-family: 'Line Awesome Free';
    font-weight: 900;
}
#mobilmenu .menu .link-item {
	font-size:14px;
	line-height:32px;
	font-weight:500;
	color:rgb(0, 0, 0);
	letter-spacing:1.8px;
}
#mobilmenu .menu .acilan {
	display:none;
	width: 100%;
}
#mobilmenu .menu .link-li:hover .acilan {
	display:block;
}
#mobilmenu .menu .acilan ul {
	width: 100%;
}

#mobilmenu .menu .acilan ul .link-li {
    min-height: 32px;
}
#mobilmenu .menu .acilan ul .link-item {
	font-size:14px;
	line-height:32px;
	color:rgb(51, 51, 51, 0.6);
}

#mobilmenu .arama {
	position:relative;
}
#mobilmenu .arama .form-control {
	border:1px solid var(--anarenk);
}
#mobilmenu .arama .btn {
	position:absolute;
	top:0px;
	right:0px;
	width:46px;
	height:46px;
	font-size:20px;
	color:#000;
	border-radius:9px;
	padding:0px;
	justify-content:center;
}

#mobilmenu .butonlar {
    border-top: 1px solid hsla(0,0%,60%,.2);
	padding:20px 15px;
}
#mobilmenu .butonlar a {
	display:block;
	font-size:12px;
	font-weight:400;
	line-height:32px;
	color:rgb(0, 0, 0);
	letter-spacing:1.2px;
}

#mobilmenu .sosyal {
	display:flex;
	align-items:center;
	justify-content:center;
    border-top: 1px solid hsla(0,0%,60%,.2);
	padding:20px 15px;
}
#mobilmenu .sosyal a {
	display:flex;
	align-items:center;
	justify-content:center;
	width: 40px;
	height: 40px;
	font-size:28px;
	color:rgb(0, 0, 0);
	margin-right:5px;
}
#mobilmenu .sosyal a:hover {
	color: var(--krem);
}


/* ==========================================================================
   ANA SLIDER (#slider) STYLES
   ========================================================================== */

#slider {
    position: relative;
    width: 100%;
    height: 100vh; /* Tam ekran yüksekliği */
    min-height: 700px; /* Çok basık ekranlarda bozulmayı önler */
    background-color: #ffffff;
    overflow: hidden;
}

#slider .main-slider,
#slider .swiper-wrapper,
#slider .swiper-slide {
    width: 100%;
    height: 100%;
}

#slider .swiper-slide {
    background-size: cover; /* Resmi ekrana sığdırır */
    background-position: center center;
    background-repeat: no-repeat;
}

/* --- Sağdaki Dev İleri Oku --- */
#slider .slider-next-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 70px; /* Okun sağ kenara yapışıp yarım durması için genişlik ayarı */
    height: 100px;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#slider .slider-next-btn svg {
    width: 100%;
    height: 100%;
}

#slider .slider-next-btn:hover {
    transform: translateY(-50%) translateX(10px);
}

/* --- Alt Bilgi Çubuğu (Bottom Bar) --- */
#slider .slider-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding-bottom: 20px;
}

/* Sol Kısım: Sosyal Medya Çizgisi */
#slider .sb-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 280px; /* Alt çizginin uzunluğu */
    border-bottom: 1px solid #111111; /* Görseldeki altı çizili yapı */
    padding-bottom: 8px;
}

#slider .sb-text {
    font-size: 13px;
    color: #111111;
    font-weight: 500;
}

#slider .sb-icons {
    display: flex;
    gap: 15px;
}

#slider .sb-icons a {
    color: #111111;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

#slider .sb-icons a:hover {
    color: #e3b04b; /* Header'da kullandığımız altın sarısı hover */
}

/* Orta Kısım: Aşağı Ok Animasyonu */
#slider .sb-scroll-down {
    display: inline-block;
    animation: floatDown 2s infinite ease-in-out;
}

@keyframes floatDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Sağ Kısım: Doktor Bilgileri */
#slider .sb-name {
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 3px;
}

#slider .sb-title {
    font-size: 11px;
    color: #555555;
    margin: 0;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
    #slider .slider-next-btn {
        width: 50px;
        height: 70px;
    }
}

@media (max-width: 767px) {
    /* Mobilde alt barı alt alta diz */
    #slider .slider-bottom-bar .row {
        flex-direction: column;
        align-items: center !important;
    }
    
    #slider .sb-social {
        max-width: 100%;
        margin: 0 auto;
        justify-content: center;
        gap: 30px;
    }
}
/* ==========================================================================
   RANDEVU OLUŞTUR FORMU (#randevuform) STYLES
   ========================================================================== */

#randevuform {
    /* Tasarımdaki çok hafif mavimsi/beyaz ferah arka plan */
    background: radial-gradient(circle at right center, #e8f4f8 0%, #ffffff 70%);
    padding: 120px 0;
    overflow: hidden;
	position:relative;
    z-index: 20;
}

/* --- Sol Kolon (Ok ve Başlık) --- */
#randevuform .rf-left-col {
    padding-left: 50px; /* Ok için boşluk */
}

/* Ok Görseli */
#randevuform .rf-arrow {
    position: absolute;
    left: 0px; /* Ekrandan sola doğru biraz dışarı taşar */
    top: 40%;
    transform: translateY(-50%);
    width: 80px; /* Görselinin boyutuna göre burayı ayarlayabilirsin */
    height: auto;
    z-index: -2;
}

#randevuform .rf-title {
    font-size: clamp(3rem, 5vw, 4.5rem); /* Ekran küçüldükçe otomatik küçülür */
    color: #000000;
    line-height: 1.1;
    font-weight: 400;
    margin: 0;
    letter-spacing: -1px;
}

#randevuform .rf-title strong {
    font-weight: 800;
    font-style: italic;
    display: block;
    letter-spacing: -2px;
}

/* --- Sağ Kolon (Minimal Form) --- */
#randevuform .rf-form {
    width: 100%;
    position: relative;
    z-index: 2;
}

#randevuform .rf-input-group {
    position: relative;
    margin-bottom: 25px; /* Inputlar arası dikey boşluk */
}

/* Standart Inputlar (Altı çizili tasarım) */
#randevuform .rf-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #111111; /* Siyah, keskin alt çizgi */
    padding: 10px 0;
    color: #000000;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    border-radius: 0;
    appearance: none; /* Tarayıcı varsayılan stillerini ezer */
}

#randevuform .rf-input:focus {
    border-bottom: 2px solid #000000;
}

/* Placeholder Rengi (Siyah ve net) */
#randevuform .rf-input::placeholder,
#randevuform .rf-textarea::placeholder {
    color: #111111;
    opacity: 1;
}

/* Select Alanı (Konu Seçiniz) */
#randevuform .rf-select-group {
    position: relative;
}

#randevuform .rf-select {
    cursor: pointer;
    padding-right: 25px;
}

#randevuform .rf-select-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #111111;
    pointer-events: none; /* Tıklamaları engellemez */
}

/* --- ÇİZGİLİ MESAJ ALANI (Textarea) --- */
/* Tasarımdaki o 4 çizgili defter görünümünü veren özel kod */
#randevuform .rf-textarea {
	width: 100%;
    height: 249px;
    background-color: transparent;
    border: none;
    color: #000000;
    font-size: 14px;
    outline: none;
    resize: none;
    padding: 10px 0;
    line-height: 22px;
    background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 39px, #111111 39px, #111111 40px);
    /* Çizgilerin yazı hizasıyla tam oturması için */
    background-attachment: local;
}

/* --- Gönder Butonu (Hap Tasarım) --- */
#randevuform .rf-submit-btn {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

#randevuform .rf-submit-btn:hover {
    background-color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}


/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #randevuform .rf-left-col {
        padding-left: 0;
        text-align: center;
    }
    #randevuform .rf-arrow {
        display:none;
    }
}

@media (max-width: 767px) {
    #randevuform { padding: 80px 0; }
    #randevuform .rf-title { font-size: 42px; }
    #randevuform .rf-textarea {
        height: 150px; /* Mobilde mesaj alanını kısaltırız */
    }
}

/* ==========================================================================
   HAKKIMDA ALANI (#hakkimda) STYLES
   ========================================================================== */

#hakkimda {
    background-color: #ffffff; /* Tamamen temiz beyaz arka plan */
    padding: 300px 0;
    overflow: hidden;
}

/* --- Sol Kolon: Görsel --- */
#hakkimda .hk-doctor-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Sağ Kolon: İçerik Yapısı --- */
#hakkimda .hk-content-wrapper {
    padding-left: 40px; /* Görsel ile metin arasına nefes aldıracak boşluk */
}

/* Hap Tasarımlı Rozet (Badge) */
#hakkimda .hk-badge {
    display: inline-flex;
    align-items: center;
    background-color: #e6e6e6; /* Görseldeki hafif gri ton */
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 25px;
    color: #333333;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    gap: 8px;
}

#hakkimda .hk-badge i {
    font-size: 14px;
    color: #555555;
}

/* İsim / Başlık */
#hakkimda .hk-title {
    font-size: 34px;
    font-weight: 400; /* Görselde çok kalın (bold) bir font kullanılmamış */
    color: #000000;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* Paragraf */
#hakkimda .hk-desc {
    font-size: 13px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 50px;
    text-align: justify; /* Görseldeki gibi bloğu iki yana yaslı gösterir */
}

/* --- İstatistikler Alanı --- */
#hakkimda .hk-stats-container {
    display: flex;
    align-items: center;
    gap: 30px; /* Her bir blok ve çizgi arasındaki boşluk */
}

#hakkimda .hk-stat-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hakkimda .hk-stat-number {
    font-size: 46px; /* Rakamlar oldukça büyük */
    font-weight: 900; /* Ekstra kalın siyah */
    color: #000000;
    line-height: 1;
    letter-spacing: -2px; /* Rakamları görseldeki gibi birbirine yakınlaştırır */
    margin-bottom: 5px;
}

#hakkimda .hk-stat-text {
    font-size: 11px;
    color: #666666;
    font-weight: 400;
    text-transform: capitalize;
}

/* İstatistikleri ayıran dikey ince çizgiler */
#hakkimda .hk-stat-divider {
    width: 1px;
    height: 55px; /* Çizginin boyu */
    background-color: #cccccc; /* İnce gri çizgi */
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #hakkimda .hk-content-wrapper {
        padding-left: 0;
        margin-top: 40px;
        text-align: center;
    }
    #hakkimda .hk-desc {
        text-align: center; /* Mobilde ortalanmış metin daha iyi durur */
    }
    #hakkimda .hk-stats-container {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 575px) {
    #hakkimda .hk-stat-number { font-size: 36px; }
    #hakkimda .hk-stat-divider { display: none; } /* Dar ekranlarda çizgiyi gizleyip alt alta alabiliriz */
    #hakkimda .hk-stat-box { 
        width: 100%; 
        margin-bottom: 15px; 
    }
}


/* ==========================================================================
   TEDAVİLER ALAN 1 (#tedavileralan1) STYLES
   ========================================================================== */

#tedavileralan1 {
    /* Görseldeki gibi soldan sağa doğru açılan hafif krem/bej geçişi */
    background: linear-gradient(135deg, #fdf8eb 0%, #ffffff 100%);
    padding: 100px 0;
    overflow: hidden;
}

/* --- Sol Kolon: Metinler --- */
#tedavileralan1 .ta1-left-col {
    padding-right: 40px; /* Slider ile arasına mesafe koymak için */
}

#tedavileralan1 .ta1-subtitle {
    font-size: 28px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

#tedavileralan1 .ta1-title {
    font-size: 36px;
    font-weight: 800;
    font-style: italic; /* Görseldeki eğik yapı */
    color: #000000;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

#tedavileralan1 .ta1-desc {
    font-size: 14px;
    color: #333333;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Link ve Yanındaki İnce Çizgi */
#tedavileralan1 .ta1-link-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#tedavileralan1 .ta1-line {
    flex-grow: 1;
    max-width: 120px;
    height: 1px;
    background-color: #bbbbbb; /* İnce gri çizgi */
}

#tedavileralan1 .ta1-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    transition: color 0.3s ease;
}

#tedavileralan1 .ta1-link:hover {
    color: #e3b04b; /* Hover'da altın rengi dokunuş */
}

/* --- Sağ Kolon: Kartlar ve Slider --- */
#tedavileralan1 .ta1-swiper {
    padding: 15px 0; /* Gölgelerin kesilmemesi için */
}

#tedavileralan1 .ta1-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5; /* Kartların yüksekliğini ve oranını ayarlar */
    overflow: hidden;
    background-color: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#tedavileralan1 .ta1-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#tedavileralan1 .ta1-card:hover .ta1-card-img {
    transform: scale(1.05); /* Hover'da resim hafifçe yakınlaşır */
}

/* Kartın altındaki siyah degrade alan */
#tedavileralan1 .ta1-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 25px 25px 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    color: #ffffff;
}

#tedavileralan1 .ta1-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}

#tedavileralan1 .ta1-card-text {
    font-size: 11.5px;
    font-style: italic;
    color: #dddddd;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Metni 3 satırla sınırlar, sonuna ... koyar */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Slider Okları (Görseldeki İnce Yuvarlak Tasarım) --- */
#tedavileralan1 .ta1-prev-btn,
#tedavileralan1 .ta1-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

#tedavileralan1 .ta1-prev-btn:hover,
#tedavileralan1 .ta1-next-btn:hover {
    background-color: #111111;
    border-color: #111111;
}

#tedavileralan1 .ta1-prev-btn:hover svg stroke,
#tedavileralan1 .ta1-next-btn:hover svg stroke {
    stroke: #ffffff;
}

#tedavileralan1 .ta1-prev-btn {
    left: -22px; /* Kartların dışına doğru hafifçe taşır */
}

#tedavileralan1 .ta1-next-btn {
    right: -22px; /* Kartların dışına doğru hafifçe taşır */
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavileralan1 .ta1-left-col {
        padding-right: 15px;
        text-align: center;
    }
    #tedavileralan1 .ta1-link-wrapper {
        justify-content: center;
    }
    #tedavileralan1 .ta1-line {
        display: none; /* Mobilde çizgiyi gizleyebiliriz */
    }
    #tedavileralan1 .ta1-prev-btn { left: 0px; }
    #tedavileralan1 .ta1-next-btn { right: 0px; }
}

@media (max-width: 767px) {
    #tedavileralan1 { padding: 70px 0; }
    #tedavileralan1 .ta1-subtitle { font-size: 24px; }
    #tedavileralan1 .ta1-title { font-size: 28px; }
}

/* ==========================================================================
   TEDAVİLER ALAN 2 (#tedavialan2) STYLES
   ========================================================================== */

#tedavialan2 {
    background-color: #f7f7f7; /* Görseldeki hafif kırık beyaz/gri ton */
    padding: 120px 0;
    overflow: hidden;
}

/* --- Metin Bloğu ve Özel Çizgiler --- */
#tedavialan2 .ta2-text-wrapper {
    position: relative;
    padding-left: 25px;
    margin-top: 120px;
    margin-bottom: 45px;
}

/* Sol taraftaki, yukarıya doğru uzayan ince uzun çizgi (Sadece masaüstünde) */
@media (min-width: 992px) {
    #tedavialan2 .ta2-text-wrapper::before {
        content: '';
        position: absolute;
        left: 0;
        top: -120px; /* Çizgiyi yukarıya uzatır */
        bottom: 0;
        width: 1px;
        background-color: #222222;
    }
}

#tedavialan2 .ta2-title {
    font-size: 32px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

#tedavialan2 .ta2-title strong {
    font-weight: 800;
    font-style: italic; /* "Cerrahi" yazısı görseldeki gibi italik ve kalın */
}

#tedavialan2 .ta2-desc {
    font-size: 14px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Tüm Tedavileri Görüntüle ve Yanındaki Çizgi */
#tedavialan2 .ta2-link-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

#tedavialan2 .ta2-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

#tedavialan2 .ta2-link:hover {
    color: #e3b04b;
}

/* Linkin sağındaki yatay çizgi */
#tedavialan2 .ta2-link-box::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #222222;
}

/* --- Resim Kartları (Grid Yapısı) --- */
#tedavialan2 .ta2-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000000;
    border-radius: 2px; /* Keskin köşeler modern durur */
}

#tedavialan2 .ta2-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

#tedavialan2 .ta2-card:hover img {
    transform: scale(1.05); /* Üzerine gelince zarifçe yaklaşır */
}

/* En-Boy Oranları (Resimlerin tam ölçüde durması için) */
#tedavialan2 .ta2-tall { aspect-ratio: 3 / 2; } /* Büyük Karemsi */
#tedavialan2 .ta2-small { aspect-ratio: 4 / 3; } /* Küçük Dikdörtgenler */
#tedavialan2 .ta2-wide { aspect-ratio: 180 / 94; } /* Alt Geniş Dikdörtgen */

/* Kart Üzerindeki Siyah Degrade (Gradient) Overlay */
#tedavialan2 .ta2-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    color: #ffffff;
}

/* Küçük kartlarda paddingi daraltıyoruz */
#tedavialan2 .ta2-overlay-small {
    padding: 15px 20px;
}

/* Kart Tipografisi */
#tedavialan2 .ta2-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

#tedavialan2 .ta2-card-title-sm {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

#tedavialan2 .ta2-card-desc {
    font-size: 12px;
    font-style: italic;
    color: #cccccc;
    line-height: 1.5;
    margin: 0;
    /* Metni 3 satır ile sınırla */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavialan2 .ta2-text-wrapper {
        padding-left: 0;
        margin-top: 30px;
        border-left: none; /* Mobilde sol çizgiyi kaldırıyoruz */
    }
}

@media (max-width: 767px) {
    #tedavialan2 { padding: 70px 0; }
    #tedavialan2 .ta2-tall { aspect-ratio: 4 / 3; } /* Mobilde çok kare olmasın */
    #tedavialan2 .ta2-overlay { padding: 20px; }
}

/* ==========================================================================
   TEDAVİLER ALAN 3 - ROBOTİK CERRAHİ (#tedavialan3) STYLES
   ========================================================================== */

#tedavialan3 {
    /* Görseldeki gibi soldan hafif mavimsi, sağa doğru beyaza giden ferah zemin */
    background: radial-gradient(circle at left center, #e6f2f7 0%, #ffffff 60%);
    padding: 120px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metinler --- */
#tedavialan3 .ta3-title {
    font-size: 36px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#tedavialan3 .ta3-title strong {
    font-weight: 800;
    font-style: italic; /* Cerrahi kelimesi görseldeki gibi italik ve kalın */
}

#tedavialan3 .ta3-desc {
    font-size: 14px;
    color: #444444;
    line-height: 1.6;
    max-width: 500px; /* Metnin sağa çok uzamasını engeller */
    margin-bottom: 30px;
}

/* Çizgili Link Yapısı */
#tedavialan3 .ta3-link-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#tedavialan3 .ta3-line {
    width: 100px;
    height: 1px;
    background-color: #555555;
}

#tedavialan3 .ta3-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    transition: color 0.3s ease;
}

#tedavialan3 .ta3-link:hover {
    color: #e3b04b;
}

/* --- Sağ Üst: Yuvarlak Navigasyon Okları --- */
#tedavialan3 .ta3-nav-buttons {
    display: inline-flex;
    gap: 15px;
}

#tedavialan3 .ta3-prev-btn,
#tedavialan3 .ta3-next-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #bbbbbb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.3s ease;
}

#tedavialan3 .ta3-prev-btn:hover,
#tedavialan3 .ta3-next-btn:hover {
    background-color: #111111;
    border-color: #111111;
}

#tedavialan3 .ta3-prev-btn:hover svg stroke,
#tedavialan3 .ta3-next-btn:hover svg stroke {
    stroke: #ffffff; /* Hoverda ikon rengi beyaza döner */
}

/* --- Alt Kısım: Swiper Kartları --- */
#tedavialan3 .ta3-swiper {
    padding: 30px 0; /* Büyüme efektinde resimlerin kesilmemesi için */
}

/* Swiper Slayt Büyüme/Küçülme Efekti */
#tedavialan3 .swiper-slide {
    transition: all 0.5s ease;
    transform: scale(0.85); /* Normal (kenardaki) slaytlar küçük */
    opacity: 0.6; /* Ve hafif soluk */
}

#tedavialan3 .swiper-slide-active {
    transform: scale(1); /* Ortadaki (aktif) slayt tam boyutta */
    opacity: 1; /* Ve tam net */
    z-index: 2;
}

/* Kartın Kendisi */
#tedavialan3 .ta3-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Kareye yakın ölçü (resimdeki gibi) */
    background-color: #000000;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#tedavialan3 .ta3-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Siyah Degrade (Gradient) Alt Katman */
#tedavialan3 .ta3-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px 25px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#tedavialan3 .ta3-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}

#tedavialan3 .ta3-card-desc {
    font-size: 12px;
    font-style: italic;
    color: #cccccc;
    line-height: 1.5;
    margin: 0;
    display: none; /* Sadece aktif slaytta görünsün diye varsayılan gizli */
}

/* Sadece aktif olan ortadaki kartın açıklamasını gösterir */
#tedavialan3 .swiper-slide-active .ta3-card-desc {
    display: block;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavialan3 .ta3-line { display: none; } /* Mobilde yan çizgiyi gizle */
    #tedavialan3 .ta3-desc { max-width: 100%; }
}

@media (max-width: 767px) {
    #tedavialan3 { padding: 70px 0; }
    #tedavialan3 .ta3-title { font-size: 28px; }
    /* Mobilde coverflow efekti iptal edilip normal dizilim yapılabilir */
    #tedavialan3 .swiper-slide { transform: scale(1); opacity: 1; }
    #tedavialan3 .ta3-card-desc { display: block; } /* Mobilde hepsini göster */
}

/* ==========================================================================
   TEDAVİLER ALAN 4 - MYOM TEDAVİSİ (#tedavialan4) STYLES
   ========================================================================== */

#tedavialan4 {
    background-color: #fbfbfb; /* Görseldeki kırık beyaz/çok açık gri zemin */
    padding: 100px 0;
    overflow: hidden;
}

/* --- Genel Kart Yapısı --- */
#tedavialan4 .ta4-card {
    position: relative;
    width: 100%;
    background-color: #000000;
    border-radius: 2px; /* Köşeler çok hafif yumuşatılmış */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

#tedavialan4 .ta4-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

#tedavialan4 .ta4-card:hover img {
    transform: scale(1.05); /* Fare üzerine gelince resmi hafifçe büyütür */
}

/* Resim Oranları (Aspect Ratio) */
#tedavialan4 .ta4-large-card {
    aspect-ratio: 16 / 10; /* Üstteki geniş resim */
}

#tedavialan4 .ta4-small-card {
    aspect-ratio: 4 / 3; /* Alttaki 3'lü karemsi resimler */
}

/* Siyah Degrade (Gradient) Overlay */
#tedavialan4 .ta4-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    color: #ffffff;
    padding: 30px 25px 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#tedavialan4 .ta4-overlay-sm {
    padding: 20px 15px 15px 15px; /* Küçük kartların iç boşluğu daha az */
}

/* Kart Tipografisi */
#tedavialan4 .ta4-card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
}

#tedavialan4 .ta4-card-desc {
    font-size: 11px;
    font-style: italic;
    color: #dddddd;
    line-height: 1.6;
    margin: 0;
}

#tedavialan4 .ta4-card-title-sm {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    line-height: 1.4;
}

/* --- Sağ Kolon: Metin Bloğu --- */
#tedavialan4 .ta4-text-wrapper {
    max-width: 90%; /* Metnin sağa çok yaslanmasını engeller */
}

#tedavialan4 .ta4-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#tedavialan4 .ta4-title strong {
    font-weight: 800;
    font-style: italic; /* Görseldeki gibi "Tedavisi" kelimesi yatık ve kalın */
}

#tedavialan4 .ta4-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Tüm Tedavileri Görüntüle & Sağa Uzayan Çizgi */
#tedavialan4 .ta4-link-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#tedavialan4 .ta4-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    white-space: nowrap; /* Yazının alt satıra düşmesini engeller */
    transition: color 0.3s ease;
}

#tedavialan4 .ta4-link:hover {
    color: #e3b04b;
}

#tedavialan4 .ta4-line {
    flex-grow: 1; /* Çizginin kalan tüm boşluğu doldurmasını sağlar */
    height: 1px;
    background-color: #333333;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavialan4 .ta4-text-wrapper {
        max-width: 100%;
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    #tedavialan4 { padding: 70px 0; }
    #tedavialan4 .ta4-title { font-size: 28px; }
    #tedavialan4 .ta4-line { display: none; } /* Mobilde yan çizgiyi gizle */
}

/* ==========================================================================
   TEDAVİLER ALAN 5 - ÇİKOLATA KİSTİ (#tedavialan5) STYLES
   ========================================================================== */

#tedavialan5 {
    /* Görseldeki soldan ve sağdan gelen hafif sıcak krem geçişi */
    background: radial-gradient(ellipse at center, #ffffff 40%, #fdf9f1 100%);
    padding: 110px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#tedavialan5 .ta5-title {
    font-size: 38px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#tedavialan5 .ta5-title strong {
    font-weight: 800;
    font-style: italic; /* "Kisti" kelimesi görseldeki gibi italik ve kalın */
}

#tedavialan5 .ta5-desc {
    font-size: 14.5px;
    color: #444444;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Link ve Çizgi Yapısı */
#tedavialan5 .ta5-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
}

#tedavialan5 .ta5-line-left {
    height: 1px;
    background-color: #555555;
    flex-grow: 1; /* Çizgiyi ekranın soluna doğru uzatır */
    max-width: 300px; /* Çok fazla uzamasını engeller */
}

/* Görselde tam belli olmuyor ama eğer sağda da çizgi istenirse:
#tedavialan5 .ta5-line-right {
    height: 1px;
    background-color: #555555;
    flex-grow: 1;
    max-width: 300px;
}
*/

#tedavialan5 .ta5-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

#tedavialan5 .ta5-link:hover {
    color: #e3b04b;
}

/* --- Alt Kısım: 2'li Kart Yapısı --- */
#tedavialan5 .ta5-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#tedavialan5 .ta5-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Görseldeki gibi yatay geniş dikdörtgen */
    overflow: hidden;
    margin-bottom: 20px;
}

#tedavialan5 .ta5-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

#tedavialan5 .ta5-card:hover .ta5-img-wrapper img {
    transform: scale(1.05); /* Zarif büyüme efekti */
}

/* Kart Altı Metinleri (Bu sefer resmin üstünde değil, altında) */
#tedavialan5 .ta5-card-body {
    padding-right: 15px; /* Metnin resim sınırını geçmemesi için hafif boşluk */
}

#tedavialan5 .ta5-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

#tedavialan5 .ta5-card-text {
    font-size: 12.5px;
    font-style: italic;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavialan5 .ta5-line-left { display: none; } /* Mobilde çizgiyi gizle */
    #tedavialan5 .ta5-link-wrapper { justify-content: center; }
}

@media (max-width: 767px) {
    #tedavialan5 { padding: 80px 0; }
    #tedavialan5 .ta5-title { font-size: 32px; }
    #tedavialan5 .ta5-img-wrapper { margin-bottom: 15px; }
}

/* ==========================================================================
   TEDAVİLER ALAN 6 - YUMURTALIK KİSTLERİ (#tedavialan6) STYLES
   ========================================================================== */

#tedavialan6 {
    background-color: #fbfbfb; /* Görseldeki çok açık, kırık beyaz zemin */
    padding: 100px 0;
    overflow: hidden;
}

/* --- Metin Bloğu --- */
#tedavialan6 .ta6-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#tedavialan6 .ta6-title strong {
    font-weight: 800;
    font-style: italic; /* "Kistleri" kelimesi kalın ve yatık */
}

#tedavialan6 .ta6-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Soldan Gelen Çizgi ve Link */
#tedavialan6 .ta6-link-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#tedavialan6 .ta6-line {
    width: 80px; /* Görseldeki çizgi uzunluğu */
    height: 1px;
    background-color: #333333;
}

#tedavialan6 .ta6-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    transition: color 0.3s ease;
}

#tedavialan6 .ta6-link:hover {
    color: #e3b04b;
}

/* --- Resim Kartları --- */
#tedavialan6 .ta6-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Görseldeki hafif dikdörtgen, kareye yakın oran */
    background-color: #000000;
    overflow: hidden;
    border-radius: 2px;
}

#tedavialan6 .ta6-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

#tedavialan6 .ta6-card:hover img {
    transform: scale(1.05); /* Zarif bir yakınlaşma efekti */
}

/* Siyah Degrade (Gradient) Overlay */
#tedavialan6 .ta6-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    padding: 20px 20px 15px 20px;
    display: flex;
    align-items: flex-end;
}

#tedavialan6 .ta6-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavialan6 .ta6-text-wrapper {
        margin-bottom: 20px;
    }
    #tedavialan6 .ta6-line {
        display: none; /* Mobilde çizgiyi gizleyip daha temiz bir görünüm sağlayabiliriz */
    }
}

@media (max-width: 767px) {
    #tedavialan6 { padding: 70px 0; }
    #tedavialan6 .ta6-title { font-size: 28px; }
}

/* ==========================================================================
   EĞİTİCİ VİDEOLARIMIZ (#videolar) STYLES
   ========================================================================== */

#videolar {
    /* Görseldeki sol üst uçuk mavi, sağ alt krem ferah geçiş */
    background: linear-gradient(135deg, #eef5fc 0%, #ffffff 50%, #fcf7ef 100%);
    padding: 110px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Açıklama --- */
#videolar .vd-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

#videolar .vd-title strong {
    font-weight: 800;
    font-style: italic; /* "Videolarımız" kelimesi italik ve kalın */
}

#videolar .vd-desc {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto; /* Ortalamak için */
}

/* --- Video Kartları --- */
#videolar .vd-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

#videolar .vd-thumbnail {
    position: relative;
    width: 100%;
    background-color: #000;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 2px;
}

#videolar .vd-thumbnail img {
    width: 100%;
    object-fit: cover;
    opacity: 0.85; /* Videoların hafif o kapalı/filtreli duruşu için */
    transition: all 0.4s ease;
}
#videolar .vd-thumbnail img.buyuk {
	aspect-ratio:674/327;
}

#videolar .vd-card:hover .vd-thumbnail img {
    transform: scale(1.05); /* Hover olunca hafifçe yaklaşır */
    opacity: 1;
}

/* Play Butonu Overlay */
#videolar .vd-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.6); /* Yarı saydam beyaz/gri daire */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px); /* Arkasını çok hafif buğulandırır */
    transition: all 0.3s ease;
}

#videolar .vd-play-btn svg {
    width: 20px;
    height: 20px;
    color: #333333;
    margin-left: 3px; /* Play üçgenini optik olarak merkeze oturtmak için */
}

#videolar .vd-card:hover .vd-play-btn {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Video Metinleri */
#videolar .vd-info {
    padding-right: 10px;
}

#videolar .vd-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

#videolar .vd-card:hover .vd-card-title {
    color: #e3b04b; /* Hoverda altın sarısı */
}

#videolar .vd-card-meta {
    font-size: 11px;
    color: #888888;
    margin: 0;
}

/* --- Alt Kısım: CTA ve YouTube Butonu --- */
#videolar .vd-cta-text {
    font-size: 13px;
    color: #444444;
    margin-bottom: 20px;
}

#videolar .vd-btn-youtube {
    display: inline-block;
    background-color: #ff0000; /* YouTube Kırmızısı */
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 30px;
    border-radius: 50px; /* Hap tasarım */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2); /* Hafif kırmızı parlama */
}

#videolar .vd-btn-youtube:hover {
    background-color: #cc0000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3);
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #videolar .vd-play-btn {
        width: 40px;
        height: 40px;
    }
    #videolar .vd-play-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 767px) {
    #videolar { padding: 70px 0; }
    #videolar .vd-title { font-size: 28px; }
}

/* ==========================================================================
   BLOGLAR / HAKKINDA YAZILAR (#bloglar) STYLES
   ========================================================================== */

#bloglar {
    /* Görseldeki sol üstten krem, sağ alttan beyaza giden hafif degrade */
    background: linear-gradient(135deg, #fdf6ec 0%, #ffffff 60%);
    padding: 110px 0;
    overflow: hidden;
}

/* --- Genel Kart Yapısı --- */
#bloglar .bl-card {
    position: relative;
    width: 100%;
    background-color: #000000;
    border-radius: 2px; /* Keskin, modern köşeler */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#bloglar .bl-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

#bloglar .bl-card:hover img {
    transform: scale(1.05); /* Zarif yaklaşma efekti */
}

/* Resim Oranları (Aspect Ratio) */
#bloglar .bl-large-card {
    aspect-ratio: 16 / 10; /* Üstteki dev resim */
}

#bloglar .bl-wide-card {
    aspect-ratio: 16 / 9; /* Alttaki sol geniş resim */
}

#bloglar .bl-square-card {
    aspect-ratio: 40/46; /* Alttaki sağdaki 2 dikey resim */
    height: 100%; /* Kartların aynı hizada durmasını sağlar */
}

/* Siyah Degrade (Gradient) Overlay */
#bloglar .bl-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    color: #ffffff;
    padding: 30px 25px 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#bloglar .bl-overlay-sm {
    padding: 20px 15px 15px 15px; /* Küçük kartlar için daha dar boşluk */
}

/* Kart Tipografisi */
#bloglar .bl-card-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}

#bloglar .bl-card-desc {
    font-size: 11px;
    font-style: italic;
    color: #dddddd;
    line-height: 1.6;
    margin: 0;
}

#bloglar .bl-card-title-sm {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 5px; /* Küçük açıklama metni için boşluk */
}

#bloglar .bl-card-desc-sm {
    font-size: 10px;
    font-style: italic;
    color: #dddddd;
    line-height: 1.5;
    margin: 0;
    /* Metni 3 satır ile sınırla (Mobil ve küçük ekranlar için) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Sağ Kolon: Metin Bloğu --- */
#bloglar .bl-text-wrapper {
    max-width: 90%;
}

#bloglar .bl-title {
    font-size: 36px;
    font-weight: 400;
    color: #111111;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#bloglar .bl-title strong {
    font-weight: 800;
    font-style: italic; /* Görseldeki gibi "Hakkında Yazılar" kısmı italik/kalın */
}

#bloglar .bl-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Tüm Blog Yazılarını Görüntüle & Sağa Uzayan Çizgi */
#bloglar .bl-link-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

#bloglar .bl-link {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

#bloglar .bl-link:hover {
    color: #e3b04b; /* Altın rengi hover */
}

#bloglar .bl-line {
    flex-grow: 1;
    height: 1px;
    background-color: #333333;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #bloglar .bl-text-wrapper {
        max-width: 100%;
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    #bloglar { padding: 70px 0; }
    #bloglar .bl-title { font-size: 30px; }
    #bloglar .bl-line { display: none; } /* Mobilde yan çizgiyi gizle */
    #bloglar .bl-square-card { aspect-ratio: 4 / 3; height: auto; } /* Mobilde dikey resimleri yataya çevir */
}

/* ==========================================================================
   FOOTER (#footer) STYLES
   ========================================================================== */

#footer {
    background-color: #1c2635; /* Tasarımdaki derin lacivert/gece mavisi zemin */
    color: #ffffff;
    padding: 80px 0 30px 0;
}

/* --- Genel Metin ve Başlık Ayarları --- */
#footer .ft-widget-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 25px;
}

#footer p, 
#footer a, 
#footer span {
    font-size: 13px;
    color: #cbd5e1; /* Açık grimsi beyaz / okunabilirliği artırır */
    line-height: 1.6;
}

#footer a {
    text-decoration: none;
    transition: color 0.3s ease;
}

#footer a:hover {
    color: #ffffff;
}

/* --- 1. Kolon: Doktor Bilgileri --- */
#footer .ft-brand-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

#footer .ft-desc {
    margin-bottom: 25px;
}

#footer .ft-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

#footer .ft-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

#footer .ft-contact-list li i {
    font-size: 18px;
    color: #ffffff;
    margin-top: 2px;
}

/* Sosyal Medya */
#footer .ft-social-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

#footer .ft-social-icons {
    display: flex;
    gap: 15px;
}

#footer .ft-social-icons a {
    color: #ffffff;
    font-size: 18px;
}

#footer .ft-social-icons a:hover {
    color: #e3b04b; /* Altın sarısı hover detayı */
}

/* --- 2, 3 ve 4. Kolon: Link Listeleri --- */
#footer .ft-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .ft-links li {
    margin-bottom: 12px;
}

/* --- 5. Kolon: Randevu Formu --- */
#footer .ft-form {
    width: 100%;
}

#footer .ft-input-group {
    margin-bottom: 15px;
}

/* Tek Satırlık Inputlar */
#footer .ft-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Yarı saydam beyaz çizgi */
    color: #ffffff;
    font-size: 13px;
    padding: 8px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

#footer .ft-input:focus {
    border-bottom-color: #ffffff;
}

#footer .ft-input::placeholder,
#footer .ft-textarea::placeholder {
    color: #cbd5e1;
    opacity: 1;
}

/* Çizgili Mesaj Alanı (Textarea Trick) */
#footer .ft-textarea {
    width: 100%;
    height: 120px; /* 3 satırlık yükseklik */
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    resize: none;
    padding: 8px 0;
    
    /* Her 40px'de bir yarı saydam beyaz alt çizgi çizer */
    line-height: 40px;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 39px,
        rgba(255, 255, 255, 0.3) 39px,
        rgba(255, 255, 255, 0.3) 40px
    );
    background-attachment: local;
}

/* Gönder Butonu */
#footer .ft-submit-btn {
    width: 100%;
    background-color: #ffffff;
    color: #1c2635; /* Zemin renginin aynısı (Koyu Lacivert) */
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 50px; /* Hap şeklinde yuvarlak */
    padding: 12px 0;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#footer .ft-submit-btn:hover {
    background-color: #e3b04b;
    color: #ffffff;
}

/* --- Alt Bilgi (Bottom Bar) --- */
#footer .ft-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Çok ince üst çizgi */
    padding-top: 30px;
    margin-top: 20px;
}

#footer .ft-copyright {
    margin: 0;
}

#footer .ft-legal-links {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

#footer .ft-legal-links a {
    font-size: 12px;
}

#footer .ft-signature {
    font-size: 12px;
    color: #8892a0;
    margin: 0;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #footer .ft-legal-links {
        justify-content: center; /* Mobilde ortala */
    }
}

/* ==========================================================================
   AKADEMİK EĞİTİM (#akademikegitim) STYLES
   ========================================================================== */

#akademikegitim {
    background-color: #ffffff; /* Tamamen temiz beyaz zemin */
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#akademikegitim .ae-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#akademikegitim .ae-title strong {
    font-weight: 800;
    font-style: italic; /* "Eğitim" kelimesi italik ve kalın */
}

#akademikegitim .ae-desc {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Alt Kısım: Sütunlar ve Dikey Çizgiler --- */
#akademikegitim .ae-timeline-row {
    align-items: stretch; /* Sütunların aynı yükseklikte olmasını sağlar */
}

#akademikegitim .ae-col {
    position: relative;
}

/* Sadece geniş ekranlarda aralara dikey ince çizgi ekliyoruz (Son kolon hariç) */
@media (min-width: 992px) {
    #akademikegitim .ae-col:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 20px; /* Üstten hafif boşluk */
        right: 0;
        width: 1px;
        height: calc(100% - 40px); /* Alttan da boşluk bırakarak çizgiyi ortalar */
        background-color: #333333; /* Tasarımdaki ince siyah/koyu gri çizgi */
    }
}

/* Kartın Kendisi ve İç Boşlukları */
#akademikegitim .ae-card {
    padding: 10px 25px 10px 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* İkon Ayarları */
#akademikegitim .ae-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 25px;
}

#akademikegitim .ae-icon svg {
    width: 100%;
    height: 100%;
}

/* Sütun İçi Metinler */
#akademikegitim .ae-subtitle {
    display: block;
    font-size: 11.5px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 15px;
}

#akademikegitim .ae-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    line-height: 1.5;
    margin-bottom: 25px;
    /* Metnin dikeyde düzgün hizalanması için kalan boşluğu iter */
    flex-grow: 1; 
}

#akademikegitim .ae-year {
    display: block;
    font-size: 11px;
    color: #555555;
    font-weight: 500;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    /* Tablet ve mobilde padding'i daraltıyoruz */
    #akademikegitim .ae-card {
        padding: 15px 10px;
        border-bottom: 1px solid #eeeeee; /* Alt alta bindiklerinde ayırmak için alt çizgi */
    }
    #akademikegitim .ae-col:last-child .ae-card {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    #akademikegitim { padding: 70px 0; }
    #akademikegitim .ae-title { font-size: 28px; }
}

/* ==========================================================================
   PROFESYONEL YOLCULUK (#yolculuk) STYLES
   ========================================================================== */

#yolculuk {
    /* Görselin alt kısmındaki çok hafif mavimsi derinliği sağlamak için linear-gradient */
    background: linear-gradient(180deg, #ffffff 60%, #f4f8fb 100%);
    padding: 110px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#yolculuk .yo-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#yolculuk .yo-title strong {
    font-weight: 800;
    font-style: italic; /* "Yolculuk" kelimesi italik ve kalın */
}

#yolculuk .yo-desc {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Liste Tasarımı (Flexbox) --- */
#yolculuk .yo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#yolculuk .yo-item {
    display: flex;
    align-items: center; /* Öğeleri dikeyde ortalar */
    padding: 25px 0;
    border-bottom: 1px solid #d1d1d1; /* Tasarımdaki ince gri çizgi */
    gap: 25px; /* Sütunlar arası boşluk */
    transition: background-color 0.3s ease;
}

#yolculuk .yo-item:last-child {
    border-bottom: none; /* En son elemanın altında çizgi olmasın */
}

/* Hover efekti eklendi (Görselde yok ama UX açısından listelerde şık durur, istersen silebilirsin) */
#yolculuk .yo-item:hover {
    background-color: rgba(0, 0, 0, 0.015);
}

/* 1. Sütun: Unvan */
#yolculuk .yo-role {
    flex: 0 0 20%; /* Sabit %20 genişlik */
    font-size: 14px;
    color: #444444;
    font-weight: 400;
    line-height: 1.5;
}

/* 2. Sütun: Kurum */
#yolculuk .yo-institution {
    flex: 1; /* Ortadaki alan kalan tüm boşluğu kaplar */
    font-size: 15px;
    color: #111111;
    font-weight: 600;
    line-height: 1.5;
}

/* 3. Sütun: Yıl */
#yolculuk .yo-year {
    flex: 0 0 15%; /* Sabit %15 genişlik */
    font-size: 13.5px;
    color: #444444;
    text-align: right; /* Sağa yaslı */
    font-weight: 400;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #yolculuk .yo-role { flex: 0 0 25%; }
    #yolculuk .yo-year { flex: 0 0 20%; }
}

@media (max-width: 767px) {
    #yolculuk { padding: 70px 0; }
    #yolculuk .yo-title { font-size: 28px; }
    
    /* Mobilde yatay dizilimi iptal edip dikey (alt alta) düzene geçiyoruz */
    #yolculuk .yo-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 0;
    }
    
    #yolculuk .yo-role {
        font-weight: 600;
        color: #e3b04b; /* Mobilde ayırt edilsin diye unvan rengini altın sarısı yapabiliriz */
        font-size: 13px;
    }
    
    #yolculuk .yo-institution {
        font-size: 14px;
    }
    
    #yolculuk .yo-year {
        text-align: left; /* Mobilde sola yasla */
        font-size: 12px;
        color: #777777;
        margin-top: 5px;
    }
}

/* ==========================================================================
   KONGRELER & TOPLANTILAR (#kongreler) STYLES
   ========================================================================== */

#kongreler {
    /* Görselin en altındaki hafif açık mavi/cyan derinliğini sağlar */
    background: linear-gradient(180deg, #ffffff 75%, #eaf4fb 100%);
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#kongreler .ko-title {
    font-size: 36px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#kongreler .ko-title strong {
    font-weight: 800;
    font-style: italic; /* "Toplantılar" kelimesi italik ve kalın */
}

#kongreler .ko-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

/* --- Kart Yapısı ve Overlap Buton --- */
#kongreler .ko-card {
    position: relative; /* Butonun dışarı taşmasını referans almak için kritik */
    margin-bottom: 30px; /* Buton dışarı taştığı için alt elemanlarla ezilmesin diye boşluk */
}

#kongreler .ko-card-inner {
    background-color: #f6f6f6; /* Görseldeki açık gri kart zemini */
    padding: 50px 30px 60px 30px; /* Buton alanına yer bırakmak için alt boşluk fazla tutuldu */
    text-align: center;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

#kongreler .ko-logo {
    max-width: 130px;
    height: auto;
    margin-bottom: 25px;
    display: inline-block;
}

#kongreler .ko-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
    line-height: 1.6;
    margin: 0;
}

/* Karta hover olunca iç zemin hafif koyulaşır (Kullanıcı deneyimi için ekstra) */
#kongreler .ko-card:hover .ko-card-inner {
    background-color: #f0f0f0;
}

/* Kartın altından taşan "Detaylı Bilgi" butonu */
#kongreler .ko-btn-detail {
    position: absolute;
    bottom: -18px; /* Butonun tam yarısını kartın dışına atar */
    left: 50%;
    transform: translateX(-50%); /* Butonu tam merkeze (ortaya) hizalar */
    background-color: #348bba; /* Tasarımdaki medikal mavi tonu */
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 45px;
    border-radius: 50px; /* Hap tasarım */
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(52, 139, 186, 0.2);
    transition: all 0.3s ease;
}

#kongreler .ko-btn-detail:hover {
    background-color: #276f96;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 20px rgba(52, 139, 186, 0.3);
}

/* --- Alt Kısım: CTA ve Tümünü Gör Butonu --- */
#kongreler .ko-cta-text {
    font-size: 13px;
    font-weight: 800; /* Görseldeki metin siyah/kalın */
    color: #111111;
    margin-bottom: 20px;
}

#kongreler .ko-btn-all {
    display: inline-block;
    background-color: #348bba;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(52, 139, 186, 0.2);
}

#kongreler .ko-btn-all:hover {
    background-color: #276f96;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(52, 139, 186, 0.3);
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 767px) {
    #kongreler { padding: 70px 0; }
    #kongreler .ko-title { font-size: 28px; }
    #kongreler .ko-card-inner { padding: 40px 20px 50px 20px; }
    #kongreler .ko-btn-detail { padding: 10px 30px; }
}

/* ==========================================================================
   KADIN KANSERLERİ SAYFASI (#tedavilerpage) STYLES
   ========================================================================== */

#tedavilerpage {
    background-color: #ffffff; /* Tamamen temiz beyaz arka plan */
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#tedavilerpage .tp-title {
    font-size: 38px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#tedavilerpage .tp-title strong {
    font-weight: 800;
    font-style: italic; /* "Kanserleri" kelimesi görseldeki gibi italik ve kalın */
}

#tedavilerpage .tp-desc {
    font-size: 14.5px;
    color: #333333;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- Alt Kısım: Kart Yapısı --- */
#tedavilerpage .tp-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
}

#tedavilerpage .tp-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Görseldeki gibi yatay ve geniş oran */
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 2px;
}

#tedavilerpage .tp-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Resim Hover Efekti */
#tedavilerpage .tp-card:hover .tp-img-wrapper img {
    transform: scale(1.05); /* Fare ile üzerine gelince zarif bir yakınlaşma */
}

/* Kart Altı Metinler */
#tedavilerpage .tp-card-body {
    padding-right: 15px; /* Metnin sağ sınıra çok yapışmaması için */
}

#tedavilerpage .tp-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

#tedavilerpage .tp-card:hover .tp-card-title {
    color: #e3b04b; /* Hover durumunda bütünlük sağlaması için altın sarısı dokunuş */
}

#tedavilerpage .tp-card-text {
    font-size: 12.5px;
    font-style: italic; /* Açıklamalar görseldeki gibi yatık */
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavilerpage .tp-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    #tedavilerpage { padding: 70px 0; }
    #tedavilerpage .tp-title { font-size: 32px; }
    #tedavilerpage .tp-img-wrapper { margin-bottom: 15px; }
}

/* ==========================================================================
   TEDAVİ DETAY (#tedavidetay) STYLES
   ========================================================================== */

#tedavidetay {
    background-color: #ffffff;
    padding: 80px 0 100px 0;
}

/* ================= SOL KOLON (İçerik) ================= */
#tedavidetay .td-main-title {
    font-size: 38px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#tedavidetay .td-main-title strong {
    font-weight: 800;
    font-style: italic;
}

#tedavidetay .td-intro {
    font-size: 14px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 35px;
}

#tedavidetay .td-main-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 35px;
}

/* Makale İçerik Tipografisi */
#tedavidetay .td-sub-title {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
    margin-top: 25px;
}

#tedavidetay .td-content-col p {
    font-size: 13.5px;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify; /* Metinleri iki yana yaslar */
}

/* Madde İşaretli Liste */
#tedavidetay .td-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

#tedavidetay .td-list li {
    position: relative;
    padding-left: 20px;
    font-size: 13.5px;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 8px;
}

/* Özel Bullet (Nokta) Tasarımı */
#tedavidetay .td-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background-color: #111111;
    border-radius: 50%;
}


/* ================= SAĞ KOLON (Sidebar) ================= */
/* Sidebar'ın sayfayla birlikte aşağı kaymasını sağlayan Sticky özelliği */
#tedavidetay .td-sidebar {
    position: sticky;
    top: 100px; /* Header yüksekliğine göre ayarlanabilir */
}

#tedavidetay .td-widget-title {
    font-size: 26px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

#tedavidetay .td-widget-title strong {
    font-weight: 800;
    font-style: italic;
}

/* --- 1. Akordeon Menü (Sağa Yaslı) --- */
#tedavidetay .td-accordion-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#tedavidetay .td-menu-head {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end; /* İçeriği sağa yaslar */
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse; /* İkonu sola, yazıyı sağa alır */
}

#tedavidetay .td-menu-head i {
    font-size: 14px;
    color: #888888;
}

#tedavidetay .td-accordion-menu li.active > .td-menu-head {
    border-bottom-color: #111111;
}

/* Alt Menü */
#tedavidetay .td-submenu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: none; /* Varsayılan olarak kapalı, JS ile açılacak (Aktif olanda açık bırakabilirsin) */
}

#tedavidetay .td-accordion-menu li.active .td-submenu {
    display: block; /* Sadece aktif olan açık */
}

#tedavidetay .td-submenu a {
    display: block;
    font-size: 12px;
    color: #555555;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.3s ease;
}

#tedavidetay .td-submenu a.active,
#tedavidetay .td-submenu a:hover {
    color: #111111;
    font-weight: 600;
}

/* --- 2. Randevu Formu (Altı Çizgili / Sağa Yaslı Metinler) --- */
#tedavidetay .td-form {
    width: 100%;
}

#tedavidetay .td-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #111111;
    color: #111111;
    font-size: 13px;
    padding: 10px 0;
    outline: none;
    margin-bottom: 15px;
    text-align: right; /* Placeholderlar sağa yaslı */
}

#tedavidetay .td-input::placeholder,
#tedavidetay .td-textarea::placeholder {
    color: #111111;
    font-weight: 500;
}

/* Select kutusu için ikon ayarı */
#tedavidetay .td-select-wrapper {
    position: relative;
}

#tedavidetay .td-select-wrapper select {
    appearance: none; /* Tarayıcının varsayılan okunu gizler */
    cursor: pointer;
}

#tedavidetay .td-select-wrapper i {
    position: absolute;
    left: 0; /* İkonu sola alırız çünkü metin sağa yaslı */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #111111;
    font-size: 14px;
}

/* Çizgili Mesaj Alanı */
#tedavidetay .td-textarea {
    width: 100%;
    height: 150px; /* Yaklaşık 4 satır çizgisi için */
    background-color: transparent;
    border: none;
    color: #111111;
    font-size: 13px;
    outline: none;
    resize: none;
    padding: 10px 0;
    text-align: right;
    
    /* Her 35px'de bir siyah alt çizgi çizer */
    line-height: 35px;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 34px,
        #111111 34px,
        #111111 35px
    );
    background-attachment: local;
}

#tedavidetay .td-submit-btn {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 50px; /* Hap tasarım */
    padding: 12px 0;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#tedavidetay .td-submit-btn:hover {
    background-color: #333333;
}

/* --- 3. Sidebar Blog Kartı --- */
#tedavidetay .td-sidebar-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* Dikey dikdörtgen */
    background-color: #000;
    border-radius: 2px;
    overflow: hidden;
}

#tedavidetay .td-sidebar-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#tedavidetay .td-sidebar-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    color: #ffffff;
    text-align: center;
}

#tedavidetay .td-sidebar-card-overlay h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Slider Noktaları (Dots) */
#tedavidetay .td-slider-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
}

#tedavidetay .td-slider-dots span {
    width: 20px;
    height: 3px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 2px;
}

#tedavidetay .td-slider-dots span.active {
    background-color: #ffffff;
}


/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #tedavidetay .td-sidebar-col {
        margin-top: 60px; /* Mobilde sidebar alt kısma düştüğünde araya boşluk koyar */
    }
    #tedavidetay .td-sidebar {
        position: static; /* Mobilde yapışkan (sticky) özelliği iptal et */
    }
    #tedavidetay .td-widget-title,
    #tedavidetay .td-accordion-menu,
    #tedavidetay .td-input,
    #tedavidetay .td-textarea {
        text-align: left; /* Mobilde form ve menüleri sola yaslamak okunabilirliği artırır */
    }
    #tedavidetay .td-menu-head {
        flex-direction: row; /* İkonu tekrar sağa al */
        justify-content: space-between;
    }
    #tedavidetay .td-select-wrapper i {
        left: auto;
        right: 0;
    }
}

/* ==========================================================================
   GÖRÜNTÜLÜ BİLGİLENDİRME SAYFASI (#videolarpage) STYLES
   ========================================================================== */

#videolarpage {
    background-color: #ffffff; /* Tamamen beyaz arka plan */
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#videolarpage .vp-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#videolarpage .vp-title strong {
    font-weight: 800;
    font-style: italic; /* "& Rehberlik" kısmı italik ve kalın */
}

#videolarpage .vp-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 850px;
}

/* --- Video Kartları (Genel Yapı) --- */
#videolarpage .vp-card {
    position: relative;
    width: 100%;
    background-color: #000000;
    overflow: hidden;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#videolarpage .vp-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9; /* Görseldeki o hafif koyuluk (sinematik) hissi için */
    transition: transform 0.6s ease, opacity 0.3s ease;
}

#videolarpage .vp-card:hover img {
    transform: scale(1.05); /* Hoverda yavaşça yaklaşır */
    opacity: 1;
}

/* Resim Oranları (Aspect Ratio) */
#videolarpage .vp-large-card {
    aspect-ratio: 21 / 9; /* Geniş sinema oranı (En üstteki büyük kart) */
}

#videolarpage .vp-small-card {
    aspect-ratio: 16 / 9; /* Standart video oranı (Alttaki küçük kartlar) */
}

/* --- Play Butonu Overlay --- */
#videolarpage .vp-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background-color: rgba(255, 255, 255, 0.5); /* Yarı saydam beyaz */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* Arkasını çok hafif buğulandırır */
    transition: all 0.3s ease;
    z-index: 2;
}

#videolarpage .vp-play-btn-sm {
    width: 50px; /* Küçük kartlardaki play butonu biraz daha ufak */
    height: 50px;
}

#videolarpage .vp-play-btn svg {
    width: 24px;
    height: 24px;
    color: #111111;
    margin-left: 4px; /* Üçgeni merkeze optik olarak oturtmak için */
}

#videolarpage .vp-play-btn-sm svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}

#videolarpage .vp-card:hover .vp-play-btn {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.1); /* Hoverda buton büyür ve netleşir */
}

/* --- Kart Altı Karartma (Overlay) ve Metinler --- */
#videolarpage .vp-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    padding: 40px 30px 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    z-index: 2;
}

#videolarpage .vp-overlay-sm {
    padding: 30px 25px 20px 25px; /* Küçük kartların boşlukları daha dar */
}

#videolarpage .vp-meta {
    font-size: 11px;
    color: #dddddd;
    margin-bottom: 8px;
    font-weight: 400;
}

#videolarpage .vp-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

#videolarpage .vp-card-title-sm {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #videolarpage .vp-large-card {
        aspect-ratio: 16 / 9; /* Tablette büyük video çok ince uzun kalmasın diye oranı düzeltiyoruz */
    }
}

@media (max-width: 767px) {
    #videolarpage { padding: 70px 0; }
    #videolarpage .vp-title { font-size: 28px; }
    #videolarpage .vp-card-title { font-size: 20px; }
    #videolarpage .vp-overlay { padding: 30px 20px 20px 20px; }
}

/* ==========================================================================
   BİLİMSEL GÜNCEL & SAĞLIK REHBERİ (#bloglarpage) STYLES
   ========================================================================== */

#bloglarpage {
    background-color: #ffffff; /* Temiz beyaz zemin */
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#bloglarpage .bp-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#bloglarpage .bp-title strong {
    font-weight: 800;
    font-style: italic; /* "& Sağlık Rehberi" kelimesi italik ve kalın */
}

#bloglarpage .bp-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

/* ================= ÖNE ÇIKAN MAKALE (Featured) ================= */
#bloglarpage .bp-featured-row {
    border-bottom: 1px solid #eeeeee; /* Altındaki 3'lü yapıdan ayırmak için hafif bir çizgi */
}

#bloglarpage .bp-featured-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Geniş kareye yakın, görseldeki gibi ferah bir oran */
    overflow: hidden;
    border-radius: 2px;
}

#bloglarpage .bp-featured-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#bloglarpage .bp-featured-img-wrapper:hover img {
    transform: scale(1.03); /* Çok hafif yaklaşma efekti */
}

/* Öne Çıkan Metin İçeriği */
#bloglarpage .bp-featured-title {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#bloglarpage .bp-featured-content p {
    font-size: 13px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

#bloglarpage .bp-featured-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Öne Çıkan Meta (Tarih/Okuma Süresi) */
#bloglarpage .bp-featured-meta {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #cccccc; /* Üstünde ince bir çizgi */
}

#bloglarpage .bp-featured-meta span {
    font-size: 11px;
    color: #666666;
    font-weight: 500;
}


/* ================= 3'LÜ MAKALE KARTLARI (Grid) ================= */
#bloglarpage .bp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

#bloglarpage .bp-card-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10; /* Yatay dikdörtgen */
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 2px;
}

#bloglarpage .bp-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

#bloglarpage .bp-card:hover .bp-card-img-wrapper img {
    transform: scale(1.05);
}

#bloglarpage .bp-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Metin alanının tüm yüksekliği kaplamasını sağlar */
}

#bloglarpage .bp-card-meta {
    font-size: 10px;
    color: #777777;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 500;
}

#bloglarpage .bp-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

#bloglarpage .bp-card:hover .bp-card-title {
    color: #e3b04b; /* Hoverda başlık altın rengine döner */
}

#bloglarpage .bp-card-desc {
    font-size: 12.5px;
    color: #555555;
    line-height: 1.5;
    margin: 0;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #bloglarpage .bp-featured-content {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    #bloglarpage { padding: 70px 0; }
    #bloglarpage .bp-title { font-size: 28px; }
    #bloglarpage .bp-featured-title { font-size: 20px; }
}

/* ==========================================================================
   BASINDA BİZ (#basindabiz) STYLES
   ========================================================================== */

#basindabiz {
    background-color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
}

/* --- Üst Başlık ve Metin Alanı --- */
#basindabiz .bb-title {
    font-size: 34px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#basindabiz .bb-title strong {
    font-weight: 800;
    font-style: italic; /* "Dr. Çağatay Taşkıran" kısmı italik/kalın */
}

#basindabiz .bb-desc {
    font-size: 13.5px;
    color: #444444;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

/* ================= ANA HABER KARTI ================= */
#basindabiz .bb-main-article {
    /* İsteğe bağlı alt çizgi eklenebilir ama görselde çok temiz bir geçiş var */
}

#basindabiz .bb-main-img-wrapper {
    width: 100%;
    background-color: #f2f5f8; /* Görseldeki Olivia uygulamasının arka plan rengi */
    padding: 40px; /* Görselin etrafında bol boşluk */
    border-radius: 4px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#basindabiz .bb-main-img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Uygulama ekranına hafif derinlik */
}

#basindabiz .bb-main-content {
    padding-left: 20px;
}

#basindabiz .bb-main-title {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.3;
}

#basindabiz .bb-highlight-text {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 20px;
    line-height: 1.5;
}

#basindabiz .bb-main-content p {
    font-size: 13px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: justify;
}

/* "Devamı için tıklayın" Linki */
#basindabiz .bb-read-more {
    display: inline-block;
    font-size: 12.5px;
    color: #111111;
    text-decoration: underline; /* Altı çizgili */
    font-weight: 500;
    margin-top: 5px;
    transition: color 0.3s ease;
}

#basindabiz .bb-read-more:hover {
    color: #e3b04b; /* Hoverda altın sarısı */
}

/* Medya Logosu ve Yazar Bölümü */
#basindabiz .bb-media-logo {
    max-width: 90px;
    height: auto;
    display: block;
}

#basindabiz .bb-author-date {
    font-size: 12px;
    color: #777777;
    margin: 0;
}


/* ================= ALT HABER KARTLARI ================= */
#basindabiz .bb-card {
    background-color: #ffffff;
    height: 100%;
}

#basindabiz .bb-card-img-wrapper {
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    border-radius: 2px;
}

#basindabiz .bb-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#basindabiz .bb-card:hover .bb-card-img-wrapper img {
    transform: scale(1.05);
}

#basindabiz .bb-card-body {
    padding: 10px 15px 10px 25px; /* Metin ile resim arası boşluk */
    display: flex;
    flex-direction: column;
    height: 100%;
}

#basindabiz .bb-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
    line-height: 1.4;
}

#basindabiz .bb-card-text {
    font-size: 12px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 1199px) {
    /* XL altı ekranlarda resim ve metni alt alta almak daha iyi durur */
    #basindabiz .bb-card-body {
        padding: 20px 0 0 0;
    }
    #basindabiz .bb-card-img-wrapper {
        aspect-ratio: 16 / 9;
        min-height: auto;
    }
}

@media (max-width: 991px) {
    #basindabiz .bb-main-content {
        padding-left: 0;
        margin-top: 30px;
    }
    #basindabiz .bb-main-img-wrapper {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    #basindabiz { padding: 70px 0; }
    #basindabiz .bb-title { font-size: 28px; }
}

/* ==========================================================================
   İLETİŞİM SAYFASI (#iletisimpage) STYLES
   ========================================================================== */

#iletisimpage {
    background-color: #ffffff;
    padding-top: 100px; /* Sadece üstten padding, harita en alta yapışacak */
    overflow: hidden;
}

/* --- Üst Başlık ve Metin --- */
#iletisimpage .ip-title {
    font-size: 36px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

#iletisimpage .ip-title strong {
    font-weight: 800;
    font-style: italic; /* "İletişimde Kalalım" italik ve kalın */
}

#iletisimpage .ip-desc {
    font-size: 14px;
    color: #444444;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Form Alanı --- */
#iletisimpage .ip-form-title {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 35px;
}

#iletisimpage .ip-form-title u {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

#iletisimpage .ip-input-group {
    margin-bottom: 20px;
}

#iletisimpage .ip-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #cccccc; /* İnce gri alt çizgi */
    color: #111111;
    font-size: 13.5px;
    padding: 12px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

#iletisimpage .ip-input:focus {
    border-bottom-color: #111111; /* Odaklanınca siyah olur */
}

#iletisimpage .ip-input::placeholder,
#iletisimpage .ip-textarea::placeholder {
    color: #555555;
    font-weight: 400;
}

/* Konu Seçiniz (Select) Özel Ayarı */
#iletisimpage .ip-select-wrapper {
    position: relative;
}

#iletisimpage .ip-select-wrapper select {
    appearance: none; /* Varsayılan tarayıcı okunu gizler */
    cursor: pointer;
    color: #555555;
}

#iletisimpage .ip-select-wrapper select:valid {
    color: #111111;
}

#iletisimpage .ip-select-wrapper i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #555555;
    font-size: 14px;
}

/* Çizgili Mesaj Alanı (Textarea Trick) */
#iletisimpage .ip-textarea {
    width: 100%;
    height: 160px; /* Yaklaşık 4 satır için */
    background-color: transparent;
    border: none;
    color: #111111;
    font-size: 13.5px;
    outline: none;
    resize: none;
    padding: 12px 0;
    
    /* Her 40px'de bir ince gri alt çizgi çizer */
    line-height: 40px;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 39px,
        #cccccc 39px,
        #cccccc 40px
    );
    background-attachment: local;
}

/* Gönder Butonu */
#iletisimpage .ip-submit-btn {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 50px; /* Hap (Pill) Şekli */
    padding: 14px 0;
    margin-top: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#iletisimpage .ip-submit-btn:hover {
    background-color: #e3b04b; /* Hoverda altın sarısı */
}

/* --- Gri İletişim Bilgileri Çubuğu --- */
#iletisimpage .ip-info-bar {
    background-color: #f6f6f6; /* Görseldeki açık gri zemin */
    padding: 25px 0;
}

#iletisimpage .ip-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#iletisimpage .ip-info-item i {
    font-size: 18px;
    color: #111111;
}

#iletisimpage .ip-info-item span,
#iletisimpage .ip-info-item a {
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

#iletisimpage .ip-info-item a:hover {
    color: #e3b04b;
}

/* --- En Alt Harita Alanı --- */
#iletisimpage .ip-map-container {
    width: 100%;
    height: auto;
    display: block;
}

#iletisimpage .ip-map-container iframe {
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
}

/* ================= RESPONSIVE AYARLAR ================= */
@media (max-width: 991px) {
    #iletisimpage .ip-info-item {
        justify-content: center !important; /* Tablet ve mobilde tüm bilgileri ortala */
    }
}

@media (max-width: 767px) {
    #iletisimpage { padding-top: 70px; }
    #iletisimpage .ip-title { font-size: 28px; }
}