/**
 * Çerez onay bandı.
 *
 * Mobile-first: küçük ekranda ekranın altına tam genişlik yapışır, masaüstünde
 * ayardan seçilen köşeye kart olarak oturur. Bant sayfayı kilitlemez.
 */

.cldss-consent {
	--cldss-consent-accent: #2d8086;
	--cldss-consent-accent-dark: #256a6f;
	--cldss-consent-radius: 12px;
	--cldss-consent-ink: #12262a;

	position: fixed;
	z-index: 100000;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 85vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	color: var(--cldss-consent-ink);
	box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.18);
	font-size: 14px;
	line-height: 1.55;
	animation: cldss-consent-in 0.2s ease both;
}

.cldss-consent[hidden] {
	display: none;
}

.cldss-consent__inner {
	position: relative;
	padding: 18px 16px 16px;
}

.cldss-consent__x {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	opacity: 0.55;
	cursor: pointer;
}

.cldss-consent__x:hover,
.cldss-consent__x:focus-visible {
	opacity: 1;
}

.cldss-consent__title {
	margin: 0 34px 6px 0;
	font-size: 17px;
	line-height: 1.3;
	color: var(--cldss-consent-accent);
	/* Yönetim panelinde küçük harfle yazılsa da başlık biçiminde görünür.
	   Büyütme sayfanın dilini (lang="tr") kullanır, yani "istatistik" →
	   "İstatistik". */
	text-transform: capitalize;
}

.cldss-consent__text {
	margin: 0 0 10px;
}

.cldss-consent__links {
	margin: 0 0 12px;
	font-size: 13px;
}

.cldss-consent__links a {
	color: var(--cldss-consent-accent);
	text-decoration: underline;
}

/* ------------------------------------------------------ kategori paneli */
.cldss-consent__panel {
	margin: 0 0 12px;
	border-top: 1px solid rgba(18, 38, 42, 0.12);
	padding-top: 10px;
}

.cldss-consent__panel[hidden] {
	display: none;
}

.cldss-consent__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 8px 0;
	font-size: 13px;
	cursor: pointer;
}

.cldss-consent__row input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--cldss-consent-accent);
}

.cldss-consent__row input:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.cldss-consent__row strong {
	display: block;
	text-transform: capitalize;
}

/* ------------------------------------------------------------- butonlar */
.cldss-consent__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cldss-consent__btn {
	display: block;
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--cldss-consent-accent);
	border-radius: 4px;
	background: #fff;
	color: var(--cldss-consent-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: capitalize;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Kabul ve reddet aynı biçim: koyu desen (dark pattern) sayılmaması için
   reddet butonu soluk bırakılmaz, ikisi de --solid sınıfını taşır. */
.cldss-consent__btn--solid {
	background: var(--cldss-consent-accent);
	color: #fff;
}

.cldss-consent__btn--solid:hover,
.cldss-consent__btn--solid:focus-visible {
	background: var(--cldss-consent-accent-dark);
	border-color: var(--cldss-consent-accent-dark);
}

.cldss-consent__btn--ghost:hover,
.cldss-consent__btn--ghost:focus-visible {
	background: rgba(45, 128, 134, 0.08);
}

.cldss-consent__btn[hidden] {
	display: none;
}

/* --------------------------------------------------- harita yer tutucusu */
.cldss-maps-hold {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 220px;
	height: 100%;
	padding: 24px 16px;
	background: #f2efe9;
	color: #12262a;
	text-align: center;
	font-size: 14px;
}

.cldss-maps-hold strong {
	font-size: 15px;
}

.cldss-maps-hold button {
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: var(--cldss-consent-accent, #2d8086);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------------------------------------ masaüstü */
@media (min-width: 850px) {
	.cldss-consent {
		left: auto;
		right: 20px;
		bottom: 20px;
		width: 380px;
		max-width: calc(100vw - 40px);
		border-radius: var(--cldss-consent-radius);
		box-shadow: 0 6px 32px rgba(0, 0, 0, 0.22);
	}

	.cldss-consent--bottom-left {
		right: auto;
		left: 20px;
	}

	.cldss-consent--bottom-center {
		right: 50%;
		transform: translateX(50%);
	}

	.cldss-consent__inner {
		padding: 20px 20px 18px;
	}

	.cldss-consent__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.cldss-consent__btn {
		flex: 1 1 45%;
		width: auto;
	}
}

@keyframes cldss-consent-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cldss-consent {
		animation: none;
	}

	.cldss-consent__btn {
		transition: none;
	}
}

/* Alt orta konumda giriş animasyonu, ortalamayı yapan translateX'i ezmesin:
   ayrı bir keyframe iki dönüşümü birlikte yazar. */
@media (min-width: 850px) {
	.cldss-consent--bottom-center {
		animation-name: cldss-consent-in-center;
	}
}

@keyframes cldss-consent-in-center {
	from {
		opacity: 0;
		transform: translateX(50%) translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateX(50%) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cldss-consent--bottom-center {
		animation: none;
	}
}