/**
 * Blog yazilarinda sol altta sabit "Table of Contents" butonu ve cekmecesi.
 *
 * Yalnizca <=991px'de gorunur. Bu kirilimin ustunde .toc-container-sticky
 * zaten yapisik (sticky) duruyor ve ekranda kaliyor; altinda ise sidebar
 * icerigin ustune yigiliyor (order:1) ve kullanici asagi indiginde TOC
 * gorus alanindan cikiyor — buton tam olarak o bosluğu kapatir.
 *
 * Sag alt kose site sohbet widget'ina ait; bu yuzden sol alt kullanilir.
 */

.toc-fab,
.toc-fab-backdrop,
.toc-drawer { display: none; }

@media (max-width: 991px) {

	/* --- acma butonu --- */
	.toc-fab {
		position: fixed;
		left: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		z-index: 9990;
		display: inline-flex;
		align-items: center;
		gap: 9px;
		margin: 0;
		padding: 12px 18px;
		border: 0;
		border-radius: 50px;
		background: #1e3a8a;
		color: #fff;
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 8px 24px rgba(30, 58, 138, .32);
		opacity: 0;
		visibility: hidden;
		transform: translateY(14px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}

	.toc-fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
	.toc-fab:hover     { background: #e31e24; }
	.toc-fab:focus-visible { outline: 3px solid #e31e24; outline-offset: 3px; }
	.toc-fab svg { width: 18px; height: 18px; flex: none; }

	/* cekmece acikken butonu gizle */
	.toc-open .toc-fab { opacity: 0; visibility: hidden; }

	/* --- arka plan perdesi --- */
	.toc-fab-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9991;
		background: rgba(20, 32, 90, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
	}
	.toc-open .toc-fab-backdrop { opacity: 1; visibility: visible; }

	/* --- cekmece --- */
	.toc-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 9992;
		max-height: min(70vh, 560px);
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 18px 50px rgba(20, 32, 90, .3);
		opacity: 0;
		visibility: hidden;
		transform: translateY(24px);
		transition: opacity .28s ease, transform .28s ease, visibility .28s;
	}
	.toc-open .toc-drawer { opacity: 1; visibility: visible; transform: translateY(0); }

	.toc-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 20px 14px;
		border-bottom: 2px solid #f1f1f1;
	}
	.toc-drawer-head h3 {
		margin: 0;
		font-size: 17px;
		font-weight: 700;
		color: #32386d;
	}
	.toc-drawer-close {
		flex: none;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #f4f7ff;
		color: #32386d;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}
	.toc-drawer-close:hover { background: #e31e24; color: #fff; }
	.toc-drawer-close:focus-visible { outline: 3px solid #e31e24; outline-offset: 2px; }

	.toc-drawer nav {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 12px 16px;
	}
	.toc-fab-list { margin: 0; padding: 0; list-style: none; }
	.toc-fab-list li { margin: 0; }
	.toc-fab-list a {
		display: block;
		padding: 11px 12px;
		border-radius: 10px;
		color: #32386d;
		font-size: 15px;
		line-height: 1.45;
		text-decoration: none;
	}
	.toc-fab-list a:hover { background: #f4f7ff; }
	.toc-fab-list .toc-depth-3 a { padding-left: 28px; font-size: 14px; color: #5a6088; }
	.toc-fab-list li.active > a { background: #f4f7ff; color: #1e3a8a; font-weight: 700; }

	/* cekmece acikken sayfa kaymasin */
	body.toc-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.toc-fab, .toc-fab-backdrop, .toc-drawer { transition: none; }
}