/* ---------------------------------------------------------------------
   Top Surgery Istanbul — tema ek stilleri
   style.css'e dokunulmaz; tum ozellestirmeler bu dosyada toplanir.
   --------------------------------------------------------------------- */

/* Footer arka plani.
   footer-bg.svg 1720x800 sabit olculu ve dikey gradyanli. Varsayilan
   background-repeat:repeat ile footer 800px'i astiginda dosemenin ikinci
   siniri gorunuyor: koyu biten kutucugun altina acik baslayan yenisi
   geliyor ve renk yarida kesilmis gibi duruyor. Tek kopya olarak tum
   alani kaplamasini sagliyoruz (SVG zaten xMidYMid slice ile hazir). */
.site-footer.style-1 {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Ic sayfa banner alt basligi.
   style.css'teki ".dz-bnr-inr p" kurali margin-left/right:auto verdigi icin
   560px'lik blok ortada kaliyor, baslik ve breadcrumb ise sola dayali.
   Blogu sola cekiyoruz; okunabilirlik icin max-width korunuyor. */
.dz-bnr-inr.style-1 .dz-bnr-inr-entry p {
	margin-left: 0;
	margin-right: auto;
}

/* Iyilesme zaman cizelgesi: rozetin altindaki aciklama satiri.
   max-width kaldirildi ki metin kutusu rozetle ayni genislikte olsun ve
   text-align:center rozetin tam altina hizalasin. */
.dummy-box .timeline-caption {
	margin: 10px 25px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--bs-secondary);
	opacity: .8;
	max-width: none;
	text-align: center;
}

.dummy-swiper .swiper-slide:last-child .timeline-caption {
	margin-right: 0;
}

/* Kesikli cizgi style.css'te bottom:20px ile sabitlenmis; slaytlar en uzun
   olana gore esit yukseklikte oldugundan uc satira tasan aciklamalarin
   uzerinden geciyordu. Cizgiyi kabin en altina alip metne yer aciyoruz. */
.dummy-swiper {
	padding-bottom: 26px;
}

.dummy-swiper::after {
	bottom: 0;
}

@media only screen and (max-width: 767px) {
	.dummy-box .timeline-caption {
		margin-right: 15px;
		font-size: 12px;
	}
}

/* "Who We Care For" sekmelerindeki madde listesi:
   icerik panelden <ul><li> olarak geliyor, tema tik isaretini .list-check ile veriyor */
.care-tab-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.care-tab-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	line-height: 1.5;
}

.care-tab-list li::before {
	content: "\e92b";
	font-family: 'feather' !important;
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--bs-primary);
	font-size: 16px;
	font-weight: 700;
}

/* Bulten aciklamasi */
.dzSubscribe .subscribe-desc {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 14px;
}

/* Footer iletisim listesi */
.footer-contact-list li {
	line-height: 1.6;
}

.footer-contact-list a {
	color: inherit;
}

.footer-contact-list a:hover {
	color: var(--bs-primary);
}

/* Iletisim sayfasi bilgi listesi */
.contact-info-list h6 {
	color: var(--bs-primary);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------------------------------------------------------------
   Resmi belgeler
   --------------------------------------------------------------- */

/* Hakkimizda sayfasindaki kartlar */
.cert-card {
	height: 100%;
	background-color: #fff;
	border: 1px solid rgba(var(--bs-secondary-rgb), .12);
	border-radius: var(--radius-md, 15px);
	overflow: hidden;
}

.cert-card .cert-media {
	position: relative;
	background-color: #F7F3EE;
	display: block;
}

.cert-card .cert-media a,
.cert-card .cert-media .cert-placeholder {
	display: block;
	position: relative;
}

.cert-card .cert-media img {
	width: 100%;
	height: auto;
	display: block;
}

.cert-card .cert-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--bs-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	opacity: 0;
	transition: opacity .25s ease;
}

.cert-card .cert-media a:hover .cert-zoom {
	opacity: 1;
}

.cert-card .cert-info {
	padding: 22px 24px 24px;
}

.cert-card .cert-title {
	font-size: 19px;
	line-height: 1.35;
	margin-bottom: 6px;
}

.cert-card .cert-meta {
	font-size: 13px;
	color: var(--bs-primary);
	font-weight: 600;
	margin-bottom: 12px;
}

.cert-card .cert-text p {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Kart hover/active durumunda baslik gorunurlugu

   Sablon sunlari tanimliyor:
     h1 a, h2 a, h3 a ... { color: var(--bs-heading-color); }   -> koyu
     .icon-bx-wraper.style-1:hover .icon-content > * { color:#fff }

   Ikinci kural yalnizca DOGRUDAN cocuklari beyaza cevirir. Baslik
   metnini <a> icine aldigimiz icin (kart basligi tiklanabilir olsun
   diye) "h3 a" kurali baglantiyi koyu tutuyor ve koyu zeminde
   kayboluyordu. Asagidaki kurallar bunu duzeltir.
   --------------------------------------------------------------- */
.icon-bx-wraper.style-1:hover .icon-content a,
.icon-bx-wraper.style-1.active .icon-content a,
.icon-bx-wraper.style-1:hover .icon-content .dz-title a,
.icon-bx-wraper.style-1.active .icon-content .dz-title a {
	color: #fff;
}

.icon-bx-wraper.style-2:hover .dz-title a,
.icon-bx-wraper.style-2.active .dz-title a,
.icon-bx-wraper.style-2:hover .icon-content a,
.icon-bx-wraper.style-2.active .icon-content a {
	color: #fff;
}

/* Ayni sorun style-3/4/5 kartlarinda da olusabilir */
.icon-bx-wraper.style-3:hover .icon-content a,
.icon-bx-wraper.style-3.active .icon-content a,
.icon-bx-wraper.style-4:hover .icon-content a,
.icon-bx-wraper.style-4.active .icon-content a,
.icon-bx-wraper.style-5:hover .icon-content a,
.icon-bx-wraper.style-5.active .icon-content a {
	color: #fff;
}

/* Baglanti uzerine gelindiginde de beyaz kalsin (birincil renge donmesin) */
.icon-bx-wraper:hover .icon-content a:hover,
.icon-bx-wraper.active .icon-content a:hover {
	color: #fff;
	opacity: .85;
}

/* Paket karti: ozellik listesi panelden <ul><li> olarak geliyor */
.pricingtable-features ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pricingtable-features li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	line-height: 1.5;
}

.pricingtable-features li::before {
	content: "\e92b";
	font-family: 'feather' !important;
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--bs-primary);
	font-size: 15px;
	font-weight: 700;
}

/* Footer lisans seridi: footer-top ile footer-middle arasinda, tam genislik */
.footer-licence {
	padding: 28px 0 4px;
}

.footer-licence-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 26px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-licence-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bs-primary);
	font-weight: 700;
	flex: 0 0 auto;
}

.footer-licence-inner ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
}

.footer-licence-inner li {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 330px;
}

.footer-licence-inner li img {
	width: 74px;
	height: auto;
	border-radius: 6px;
	background-color: #fff;
	padding: 3px;
	display: block;
	flex: 0 0 auto;
	transition: transform .25s ease;
}

.footer-licence-inner li a:hover img {
	transform: translateY(-2px);
}

.footer-licence-meta {
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .7);
}

@media only screen and (max-width: 991px) {
	.footer-licence-inner {
		justify-content: center;
		text-align: center;
	}
	.footer-licence-inner li {
		justify-content: center;
	}
}

/* WhatsApp yuzen buton */
.whatsapp-float {
	position: fixed;
	left: 20px;
	bottom: 20px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background-color: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	z-index: 99999;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

.whatsapp-float:hover {
	color: #fff;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   Before / After
   app/Views/site/in/inBeforeAfter.php tarafından kullanılır.
   Her kayıt, önce ve sonrayı birlikte gösteren tek birleşik görseldir.
   --------------------------------------------------------------------- */
.ba-item {
	margin: 0;
}

.ba-item .ba-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #f2f0ee;
}

.ba-caption {
	padding-top: 12px;
}

.ba-caption__title {
	margin: 0 0 4px;
	font-size: 17px;
}

.ba-caption__text {
	margin: 0;
	font-size: 14px;
	opacity: .85;
}

/* ---------------------------------------------------------------------
   Telefon alani (ulke kodu + numara)
   app/Views/site/in/formPhoneField.php tarafindan kullanilir.
   Ulke listesi dar kalir, numara kalan genisligi alir.
   --------------------------------------------------------------------- */
.phone-field {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
}

.phone-field__cc {
	flex: 0 0 40%;
	max-width: 190px;
	min-width: 0;
	text-overflow: ellipsis;
}

.phone-field__number {
	flex: 1 1 auto;
	min-width: 0;
}

/* Cerceve/alt cizgi stilini korumak icin: tema bazi formlarda
   input'lara sinif vermiyor, o durumda temel gorunumu biz veriyoruz. */
.phone-field select:not(.form-control),
.phone-field input:not(.form-control) {
	width: 100%;
	height: 48px;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	background-color: #fff;
	color: inherit;
	font-size: 15px;
}

.phone-field select:invalid {
	color: #7a7a7a;
}

/* Sayfa formlarindaki alt cizgi stili.
   Diger girisler gibi solda ikon, altta tek bir cizgi: cizgi iki
   kontrolun ayri ayri degil, alanin tamaminin altina cizilir; ulke
   kodu ile numarayi ince bir dikey ayrac ayirir. */
.phone-field.floating-underline {
	gap: 0;
	border-bottom: 1px solid var(--bs-secondary);
}

.phone-field.floating-underline .form-control {
	height: 60px;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0;
	background-color: transparent;
	color: var(--bs-body-color);
}

.phone-field.floating-underline .phone-field__cc {
	flex: 0 0 46%;
	max-width: 210px;
	border-left: 0 !important;
	padding: 15px 10px 15px 40px !important;
	font-size: 16px;
}

.phone-field.floating-underline .phone-field__number {
	border-left: 1px solid rgba(var(--bs-secondary-rgb), .25) !important;
	padding: 15px 0 15px 14px !important;
	font-size: 18px;
}

@media only screen and (max-width: 575px) {
	.phone-field {
		flex-wrap: wrap;
	}
	.phone-field__cc,
	.phone-field__number {
		flex: 1 1 100%;
		max-width: none;
	}

	/* Alt alta dustugunde numara da ikon hizasinda kalsin */
	.phone-field.floating-underline .phone-field__cc {
		flex: 1 1 100%;
		max-width: none;
	}
	.phone-field.floating-underline .phone-field__number {
		border-left: 0 !important;
		border-top: 1px solid rgba(var(--bs-secondary-rgb), .18) !important;
		padding-left: 40px !important;
	}
}