.toc-hafif,
.toc-hafif * {
	box-sizing: border-box;
}

.toc-hafif {
	--toc-blue: #1c5b8f;
	--toc-blue-dark: #163f63;
	--toc-teal: #20a995;
	--toc-line: rgba(28, 91, 143, .16);

	position: relative;
	width: 100%;
	margin: 0;
	padding: 3px 0 3px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Dış kutu yok; yalnızca sitenin renklerine uyan ince bir TOC vurgusu. */
.toc-hafif::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--toc-blue), var(--toc-teal));
}

.toc-hafif-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px 14px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.toc-hafif-grid li {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.toc-hafif-grid li::before,
.toc-hafif-grid li::marker {
	content: none !important;
	display: none !important;
}

.toc-hafif-grid a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-height: 100%;
	padding: 8px 7px;
	border: 0;
	border-bottom: 1px solid var(--toc-line);
	border-radius: 0;
	background: transparent;
	color: var(--toc-blue);
	font-size: .96em;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none !important;
	word-break: normal;
	overflow-wrap: anywhere;
	transition: color .15s ease, border-color .15s ease;
}

/* Harita/konum pini: tema CSS'i SVG'yi siyaha çevirmesin diye renk doğrudan zorlanır. */
.toc-hafif-pin {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin-top: .17em;
	color: var(--toc-blue) !important;
	fill: none !important;
	stroke: var(--toc-blue) !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.toc-hafif-pin path,
.toc-hafif-pin circle {
	fill: none !important;
	stroke: var(--toc-blue) !important;
	stroke-width: 2 !important;
}

/* Hover'da hiçbir konum/ölçü değişmez. */
.toc-hafif-grid a:hover {
	background: transparent;
	color: var(--toc-teal);
	border-bottom-color: rgba(32, 169, 149, .55);
}

.toc-hafif-grid a:hover .toc-hafif-pin,
.toc-hafif-grid a:hover .toc-hafif-pin path,
.toc-hafif-grid a:hover .toc-hafif-pin circle {
	color: var(--toc-teal) !important;
	stroke: var(--toc-teal) !important;
}

.toc-hafif-grid a:focus-visible {
	outline: 2px solid var(--toc-teal);
	outline-offset: 2px;
	color: var(--toc-blue-dark);
}

/* İlk 9 başlık tam görünür. 10-12. başlıklar dördüncü satırda "devamı var" ipucu olarak yukarıdan aşağı silikleşir. */
.toc-hafif-grid .toc-hafif-extra {
	display: none;
}

.toc-hafif:not(.is-expanded) .toc-hafif-grid > .toc-hafif-extra:nth-child(-n+12) {
	display: block;
	max-height: 36px;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	opacity: .72;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 38%, rgba(0, 0, 0, .25) 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .78) 38%, rgba(0, 0, 0, .25) 72%, transparent 100%);
}

.toc-hafif.is-expanded .toc-hafif-grid .toc-hafif-extra {
	display: block;
	max-height: none;
	overflow: visible;
	pointer-events: auto;
	user-select: auto;
	opacity: 1;
	-webkit-mask-image: none;
	mask-image: none;
}

/* Çizgi ve ikon tek bir birimdir; liste uzadıkça ikisi beraber aşağı iner. */
.toc-hafif-toggle-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	margin: 1px 0 0;
}

.toc-hafif-toggle-wrap::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--toc-line);
	transform: translateY(-.5px);
}

/* Metinsiz aç/kapat kontrolü. Çizgi ikonun tam arkasından geçer. */
.toc-hafif-toggle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(28, 91, 143, .24);
	border-radius: 999px;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--toc-blue) !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color .15s ease, border-color .15s ease;
}

.toc-hafif-toggle:hover {
	color: var(--toc-blue-dark) !important;
	border-color: rgba(28, 91, 143, .5);
	background: transparent !important;
}

.toc-hafif-toggle:focus-visible {
	outline: 2px solid var(--toc-teal);
	outline-offset: 3px;
}

.toc-hafif-toggle-icon {
	width: 29px;
	height: 29px;
	fill: none !important;
	stroke: var(--toc-blue) !important;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

.toc-hafif-toggle-icon path {
	fill: none !important;
	stroke: var(--toc-blue) !important;
	stroke-width: 2.2 !important;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Açıkken ok yukarı bakar. Wrapper listenin sonrasında olduğundan çizgiyle birlikte en alta taşınır. */
.toc-hafif.is-expanded .toc-hafif-toggle-icon {
	transform: rotate(180deg);
}

.toc-target {
	scroll-margin-top: 88px;
}