/* ==========================================================================
   Elosklinik "İçindekiler" (TOC) - marka rengi: #169B57
   Minimal, sticky, scroll ile aktif başlığı vurgulayan sidebar/panel.
   ========================================================================== */

:root {
	--elos-brand: #169B57;
	--elos-brand-dark: #10763F;
	--elos-brand-soft: rgba(22, 155, 87, 0.08);
	--elos-text: #1f2a24;
	--elos-text-muted: #6b7570;
	--elos-border: #e5e9e6;
	--elos-bg: #ffffff;
}

.elosklinik-toc {
	--toc-width: 260px;
	font-family: inherit;
	box-sizing: border-box;
}
.elosklinik-toc * {
	box-sizing: border-box;
}

/* ---- Masaüstü: sağda sabit (sticky/fixed), ince, minimal panel ---- */
.elosklinik-toc-panel {
	position: fixed;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	width: var(--toc-width);
	max-height: 70vh;
	background: var(--elos-bg);
	border: 1px solid var(--elos-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(16, 40, 26, 0.08);
	z-index: 99998;
	overflow: hidden;
	display: none;
	flex-direction: column;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.elosklinik-toc.is-ready .elosklinik-toc-panel {
	display: flex;
}

.elosklinik-toc-header {
	display: none; /* Masaüstünde başlık gizli, panel her zaman görünür halde minimal duruyor */
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--elos-border);
	flex: 0 0 auto; /* Header küçülmesin, kalan alanı nav (scroll bölgesi) kullansın */
}
.elosklinik-toc-header-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--elos-text);
}
.elosklinik-toc-close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: var(--elos-text-muted);
	cursor: pointer;
	padding: 2px 4px;
}
.elosklinik-toc-close:hover {
	color: var(--elos-brand);
}

.elosklinik-toc-nav {
	padding: 14px 6px 14px 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Kaydırma JS ile yönetiliyor (bkz. toc.js): tarayıcının kendi dokunmatik
	   kaydırma/jest yorumlamasının araya girmemesi için "none". */
	touch-action: none;
	flex: 1 1 auto;
	min-height: 0; /* flex kapsayıcı içinde gerçek scroll için gerekli */
	will-change: scroll-position;
}
.elosklinik-toc-nav::-webkit-scrollbar {
	width: 4px;
}
.elosklinik-toc-nav::-webkit-scrollbar-thumb {
	background: var(--elos-border);
	border-radius: 4px;
}

#elosklinik-toc-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--elos-border);
	touch-action: none;
}

.elosklinik-toc-item {
	margin: 0;
	touch-action: none;
}
.elosklinik-toc-item.level-3 .elosklinik-toc-link {
	padding-left: 26px;
	font-size: 12.5px;
}

.elosklinik-toc-link {
	position: relative;
	display: block;
	padding: 6px 12px;
	margin-left: -2px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--elos-text-muted);
	text-decoration: none;
	border-left: 2px solid transparent;
	/* Parmak bir başlığın ÜZERİNDEYKEN de dikey kaydırmanın çalışması için:
	   touch-action miras alınmadığından her link üzerinde ayrıca tanımlanır.
	   Kaydırma JS ile yönetildiği için "none" kullanılır (bkz. toc.js).
	   Aksi halde tarayıcı, dokunmayı link etkileşimi sanıp kaydırmayı
	   geciktiriyor/engelliyordu. */
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.elosklinik-toc-link:hover {
	color: var(--elos-brand-dark);
	background: var(--elos-brand-soft);
}
.elosklinik-toc-item.is-active > .elosklinik-toc-link {
	color: var(--elos-brand-dark);
	font-weight: 600;
	border-left-color: var(--elos-brand);
	background: var(--elos-brand-soft);
}

/* ---- Masaüstünde toggle butonu gizli; panel her zaman görünür ama minimal ---- */
.elosklinik-toc-toggle {
	display: none;
}

/* ==========================================================================
   Masaüstünde TOC paneli, sayfa açılır açılmaz ekranda görünüp banner/hero
   görselinin (örn. .page-banner-area) üzerine binmesin diye başlangıçta
   gizli tutulur; kullanıcı bu alanı geçecek şekilde scroll edince (JS ile
   IntersectionObserver kullanılarak) "elos-toc-scrolled" sınıfı eklenir ve
   panel yumuşak bir geçişle belirir. Banner alanı sayfada yoksa (örn. blog
   yazıları) JS başlangıçta bu sınıfı zaten ekler, panel normal şekilde
   görünür kalır.
   ========================================================================== */
@media screen and (min-width: 993px) {
	.elosklinik-toc-panel {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) translateX(14px);
	}
	.elosklinik-toc.elos-toc-scrolled .elosklinik-toc-panel {
		opacity: 0.92;
		pointer-events: auto;
		transform: translateY(-50%) translateX(0);
	}
	.elosklinik-toc.elos-toc-scrolled .elosklinik-toc-panel:hover,
	.elosklinik-toc.elos-toc-scrolled .elosklinik-toc-panel:focus-within {
		opacity: 1;
	}
}

/* ==========================================================================
   Tablet / dizüstü genişlik: yer kaplamasın diye panel biraz küçülür
   ========================================================================== */
@media screen and (max-width: 1400px) {
	.elosklinik-toc-panel {
		right: 16px;
		width: 220px;
	}
}

/* ==========================================================================
   İçerik/metin bölümü bittiğinde (yorumlar, footer, ilgili içerikler gibi
   alanlara gelindiğinde) TOC tamamen gizlenir — hem masaüstünde panel hem
   mobilde açma butonu. Yumuşak bir geçişle kaybolur.
   ========================================================================== */
.elosklinik-toc.elos-toc-hidden .elosklinik-toc-panel,
.elosklinik-toc.elos-toc-hidden .elosklinik-toc-toggle {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* ==========================================================================
   Uygunluk testi / tedavi bulucu modalı açıkken (Elos Uygunluk Testi eklentisi
   <body class="elos-ut-modal-open"> ekler), açma butonu modalın üzerinde
   dolaşmasın diye gizlenir. Panel zaten kendi kapatma butonuna sahip olduğu
   için işlevsellik kaybı olmaz.
   ========================================================================== */
body.elos-ut-modal-open .elosklinik-toc-toggle {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden;
}

/* ==========================================================================
   Mobil ve tablet (<= 992px)
   Yüzen "İçindekiler" düğmesi ve alttan açılan panel KALDIRILDI.
   Yerine: sabit başlığın hemen altında, o an okunan bölümün adını gösteren
   ince bir şerit. Şeride dokununca aynı şerit aşağı açılır ve tüm başlıkların
   listesi iner. Ekranda başka hiçbir yüzen öge kalmaz.
   Konum değerleri JS tarafından --elos-toc-top ve --elos-toc-bar-h
   değişkenlerine ölçülerek yazılır (bkz. toc.js).
   ========================================================================== */
@media screen and (max-width: 992px) {

	/* ---- Bölüm şeridi (eski "toggle" butonu) ---- */
	.elosklinik-toc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		position: fixed;
		top: var(--elos-toc-top, 0px);
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		height: auto;
		z-index: 99990;
		margin: 0;
		padding: 10px 14px;
		background: #E1F5EE;
		color: var(--elos-brand-dark);
		border: 0;
		border-bottom: 1px solid #9FE1CB;
		border-radius: 0;
		box-shadow: none;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
		overflow: visible;
		white-space: normal;
		animation: none;
		transform: translateY(-110%);
		pointer-events: none;
		transition: transform 0.22s ease, background 0.18s ease, color 0.18s ease;
	}

	/* Yazı akışına girildiğinde şerit aşağı iner (sınıfı JS ekler). */
	.elosklinik-toc.elos-toc-okumada .elosklinik-toc-toggle {
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Tam ekran bir katman (hamburger menü, test penceresi, lightbox)
	   açıldığında şerit ve liste tamamen çekilir. */
	.elosklinik-toc.elos-toc-katman-acik .elosklinik-toc-toggle {
		transform: translateY(-110%);
		pointer-events: none;
	}
	.elosklinik-toc.elos-toc-katman-acik .elosklinik-toc-panel {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* Liste açıkken şerit dolu yeşile döner. */
	.elosklinik-toc-toggle[aria-expanded="true"] {
		background: var(--elos-brand);
		color: #fff;
		border-bottom-color: var(--elos-brand-dark);
	}

	/* Eski üç çizgili ikon artık kullanılmıyor. */
	.elosklinik-toc-toggle-icon {
		display: none;
	}

	.elosklinik-toc-toggle-label {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.35;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Sağ taraf: "3 / 8" sayacı + ok işareti (JS tarafından eklenir). */
	.elosklinik-toc-meta {
		display: flex;
		align-items: center;
		gap: 6px;
		flex: 0 0 auto;
	}
	.elosklinik-toc-count {
		font-size: 11px;
		opacity: 0.85;
		white-space: nowrap;
	}
	.elosklinik-toc-caret {
		width: 16px;
		height: 16px;
		flex: 0 0 16px;
		stroke: currentColor;
		fill: none;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.2s ease;
	}
	.elosklinik-toc-toggle[aria-expanded="true"] .elosklinik-toc-caret {
		transform: rotate(180deg);
	}

	/* ---- Aşağı inen liste (eski "bottom sheet" paneli) ---- */
	.elosklinik-toc-panel {
		position: fixed;
		top: calc(var(--elos-toc-top, 0px) + var(--elos-toc-bar-h, 42px));
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		max-height: 58vh;
		z-index: 99989;
		display: flex;
		background: #E1F5EE;
		border: 0;
		border-bottom: 1px solid #9FE1CB;
		border-radius: 0;
		box-shadow: 0 10px 22px rgba(16, 40, 26, 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}
	.elosklinik-toc.is-open .elosklinik-toc-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	/* Panelin kendi başlık satırı gereksiz: şeridin kendisi başlık. */
	.elosklinik-toc-header {
		display: none;
	}

	.elosklinik-toc-nav {
		padding: 4px 14px 10px;
	}

	#elosklinik-toc-list {
		padding: 0;
		border-left: 0;
	}

	.elosklinik-toc-link {
		padding: 11px 0;
		margin-left: 0;
		font-size: 13px;
		color: var(--elos-brand-dark);
		border-left: 0;
		border-bottom: 1px solid rgba(15, 110, 86, 0.16);
	}
	.elosklinik-toc-item:last-child .elosklinik-toc-link {
		border-bottom: 0;
	}
	.elosklinik-toc-item.level-3 .elosklinik-toc-link {
		padding-left: 16px;
		font-size: 12.5px;
		opacity: 0.85;
	}
	.elosklinik-toc-item.is-active > .elosklinik-toc-link {
		color: #04342C;
		font-weight: 600;
		background: transparent;
		border-left: 0;
	}
}