/*! TazminGO Core · liste kutusu (listbox.js · WAI-ARIA APG "Select-Only Combobox")
    Tek bileşen, tek stil dosyası: ön yüz (site.css ile birlikte) ve yönetim (admin.css bağımlılığı) aynı kuralları yükler.
    Yerel <select> ASLA görünmez: değeri taşır, ekran dışındadır. Görünen denetim role="combobox" olan bir <div>.
    JS kapalıyken sayfanın <noscript> stili bunu tersine çevirir (yerel alan geri gelir, kabuk gizlenir).

    Ölçü ve renkler .tzg-lb üzerindeki değişkenlerden gelir; başka bir bağlam (ör. wp-admin) yalnızca onları
    yeniden tanımlar, kuralları kopyalamaz:
      .tzg .tzg-lb { --tzg-lb-h: 34px; --tzg-lb-radius: 6px; --tzg-lb-accent: #007D91; }
    Varsayılanlar ön yüzün Impreza Field Style 1 ölçüleridir (52 px, radius 8, teal odak). Uzunluklar px. */

.tzg-lb {
	--tzg-lb-h: calc(var(--inputs-height, 52px) + var(--inputs-border-width, 1px) * 2);
	--tzg-lb-radius: var(--inputs-border-radius, 8px);
	--tzg-lb-pad-x: 16px;
	--tzg-lb-opt-h: 44px; /* dokunma hedefi (WCAG 2.5.8); masaüstü-only bağlamlar düşürebilir */
	--tzg-lb-font: 16px;
	--tzg-lb-bg: var(--color-content-bg, #FFFFFF);
	--tzg-lb-ink: var(--color-content-heading, #141323);
	--tzg-lb-muted: var(--color-tg-faded, #667085);
	--tzg-lb-line: var(--color-tg-line, #E4E8F0);
	--tzg-lb-accent: var(--color-content-link, #007D91);
	--tzg-lb-hover: var(--color-tg-ice, #EFFBFC);
	--tzg-lb-error: #B42318;
	position: relative;
	min-width: 0;
}

/* Ekran dışı ama formda (display:none değil: bazı tarayıcılarda gönderilmeyebilir). */
.tzg-lb__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.tzg-lb__button {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--tzg-lb-h);
	padding: 8px var(--tzg-lb-pad-x);
	font-size: var(--tzg-lb-font);
	line-height: 1.4;
	text-align: start;
	color: var(--tzg-lb-ink);
	background: var(--tzg-lb-bg);
	border: var(--inputs-border-width, 1px) solid var(--tzg-lb-line);
	border-radius: var(--tzg-lb-radius);
	cursor: pointer;
	transition: border-color .15s;
}

/* Seçilmemişken metin yer tutucu tonunda (alanlardaki ::placeholder ile aynı). */
.tzg-lb.is-empty .tzg-lb__value {
	color: var(--tzg-lb-muted);
}

.tzg-lb__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tzg-lb__chev {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border-inline-end: 2px solid var(--tzg-lb-muted);
	border-block-end: 2px solid var(--tzg-lb-muted);
	transform: rotate(45deg);
	transition: transform .15s;
}

.tzg-lb.is-open .tzg-lb__chev {
	margin-top: 4px;
	transform: rotate(225deg);
}

/* Odak halkası sayfanın kendi kuralından gelir; çerçeve de alanlardaki gibi vurgulanır (aynı aile okunsun). */
.tzg-lb__button:focus-visible {
	border-color: var(--tzg-lb-accent);
}

.tzg-lb__button[aria-invalid="true"] {
	border-color: var(--tzg-lb-error);
}

.tzg-lb__button[aria-disabled="true"] {
	color: var(--tzg-lb-muted);
	cursor: not-allowed;
}

/* Açılır liste: widget'ın öneri listesiyle (.tzg-fc__list) aynı görünüm. */
.tzg-lb__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	inset-inline: 0;
	max-height: min(320px, 50vh); /* yatay telefonda ekranı doldurmasın */
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
	background: var(--tzg-lb-bg);
	border: 1px solid var(--tzg-lb-line);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(20, 19, 35, .12);
}

.tzg-lb.is-up .tzg-lb__list {
	top: auto;
	bottom: calc(100% + 4px);
}

.tzg-lb__opt {
	display: flex;
	align-items: center;
	min-height: var(--tzg-lb-opt-h);
	margin: 0;
	padding: 10px 12px;
	line-height: 1.3;
	color: var(--tzg-lb-ink);
	border-radius: 6px;
	cursor: pointer;
}

.tzg-lb__opt[aria-selected="true"],
.tzg-lb__opt.is-active {
	background: var(--tzg-lb-hover);
}

.tzg-lb__opt.is-active {
	box-shadow: inset 0 0 0 1px var(--tzg-lb-accent);
}

@media (hover: hover) {
	.tzg-lb__button:hover {
		border-color: var(--tzg-lb-accent);
	}

	.tzg-lb__opt:hover {
		background: var(--tzg-lb-hover);
	}
}

/* Yüksek kontrast: renk yerine çerçeve ile işaretle. */
@media (forced-colors: active) {
	.tzg-lb__opt.is-active {
		outline: 2px solid;
		outline-offset: -2px;
	}
}