/**
 * [cepdeposu_cihaz_secici] kademeli (marka -> model) cihaz secici + serbest
 * metin model arama widget stili.
 *
 * Tema (wp-content/themes/cepdeposu) mockup'larindaki "Parcani bul" (.finder /
 * .finder-selects / .fs-field / .popular) tasarimiyla ayni gorsel dile
 * oturur: ayni token'lar (--surface, --border, --accent, --muted, --radius-sm,
 * --sp-*, --font-mono) kullanilir. Bu degiskenler tema aktifken :root'tan
 * gelir; tema yoksa (ör. baska bir tema veya klasik admin select2 ekrani)
 * her token icin makul bir fallback verilmistir, bu yuzden widget her
 * kosulda okunur kalir (ozellikle karanlik temada beyaz-uzeri-beyaz sonuc
 * listesi hatasi bu dosyanin eski surumundeydi).
 */

.cepdeposu-cihaz-secici {
	--cs-surface: var(--surface, #fff);
	--cs-bg: var(--bg, #f6f7f9);
	--cs-fg: var(--fg, #1e2430);
	--cs-muted: var(--muted, #6b7280);
	--cs-border: var(--border, #d9dde3);
	--cs-accent: var(--accent, #e8622c);
	--cs-accent-soft: var(--accent-soft, rgba(232, 98, 44, 0.12));
	--cs-blue: var(--blue, #1f5fcc);
	--cs-blue-soft: var(--blue-soft, rgba(31, 95, 204, 0.12));
	--cs-radius: var(--radius-sm, 6px);
	--cs-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);

	display: flex;
	flex-direction: column;
	gap: var(--sp-3, 12px);
	color: var(--cs-fg);
}

/* ── serbest metin model arama (ustte) + populer chip'ler ─────────── */
.cepdeposu-cihaz-secici__arama {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cepdeposu-cihaz-secici__arama > label,
.cepdeposu-cihaz-secici__field > label {
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-muted);
	font-weight: 600;
}

.cepdeposu-cihaz-secici input[type="text"],
.cepdeposu-cihaz-secici select {
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	background: var(--cs-bg);
	color: var(--cs-fg);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
}

.cepdeposu-cihaz-secici input[type="text"]:focus,
.cepdeposu-cihaz-secici select:focus {
	outline: 2px solid var(--cs-accent-soft);
	border-color: var(--cs-accent);
}

.cepdeposu-cihaz-secici input[type="text"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── ac/ipucu satirlari (arama kutusu + grid) ─────────────────────── */
.cepdeposu-cihaz-secici__ipucu {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--cs-muted);
}

.cepdeposu-cihaz-secici__ipucu--grid {
	margin: 0 0 2px;
}

/* ── "detayli arama" acilir/kapanir baglantisi ───────────────────── */
.cepdeposu-cihaz-secici__detay-tetik {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--cs-blue);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.cepdeposu-cihaz-secici__detay-tetik:hover {
	text-decoration: underline;
}

.cepdeposu-cihaz-secici__detay-ok {
	font-size: 10px;
	transition: transform 0.15s ease;
}

.cepdeposu-cihaz-secici__detay-tetik[aria-expanded="true"] .cepdeposu-cihaz-secici__detay-ok {
	transform: rotate(180deg);
}

.cepdeposu-cihaz-secici__detay {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3, 12px);
	padding-top: var(--sp-3, 12px);
	border-top: 1px solid var(--cs-border);
}

.cepdeposu-cihaz-secici__detay[hidden] {
	display: none;
}

/* ── isteğe bağlı filtreler alt grubu — zorunlu Marka/Model'den
 * gorsel olarak daha soluk, ince ust cizgiyle ayrilir ──────────────── */
.cepdeposu-cihaz-secici__opsiyonel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.cepdeposu-cihaz-secici__opsiyonel-baslik {
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-muted);
}

.cepdeposu-cihaz-secici__grid--opsiyonel {
	opacity: 0.85;
}

.cepdeposu-cihaz-secici__ipucu--git {
	margin-top: -6px;
	text-align: center;
}

/* ── marka / model / parca tipi — mockup'taki 3'lu grid ──────────── */
.cepdeposu-cihaz-secici__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--sp-3, 12px);
}

.cepdeposu-cihaz-secici__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

/* ── autocomplete/oneri listesi (hem arama hem model alani) ──────── */

/* Oneri listesi SADECE input'un altina hizalansin diye input + <ul>
 * ayri bir konumlandirma kutusuna sarilir. Yoksa `top: 100%` degeri
 * label + input + "Populer" chip satirini da kapsayan dis kabin
 * yuksekligine gore hesaplanip liste asagi kayiyordu. */
.cepdeposu-cihaz-secici__ac {
	position: relative;
}

/* Sonuc listesi, basliktaki (.hsearch__panel) arama onerileriyle ayni
 * gorsel dile oturur: yuvarlak panel + yumusak golge, gruplu baslik,
 * her satirda ikon kutusu (.th) + kalin ad (.tx b), mavi hover. */
.cepdeposu-cihaz-secici__sonuclar {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: min(320px, 90vw);
	z-index: 30;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: 12px;
	max-height: min(60vh, 380px);
	overflow-y: auto;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.cepdeposu-cihaz-secici__sonuclar[hidden] {
	display: none;
}

.cepdeposu-cihaz-secici__sonuclar li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.3;
	color: var(--cs-fg);
}

.cepdeposu-cihaz-secici__sonuclar li .th {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 7px;
	border: 1px solid var(--cs-border);
	background: var(--cs-blue-soft);
	color: var(--cs-blue);
	display: grid;
	place-items: center;
}

.cepdeposu-cihaz-secici__sonuclar li .th svg {
	width: 16px;
	height: 16px;
}

.cepdeposu-cihaz-secici__sonuclar li .tx {
	min-width: 0;
	flex: 1;
}

.cepdeposu-cihaz-secici__sonuclar li .tx b {
	font-weight: 600;
	display: block;
	overflow-wrap: break-word;
	white-space: normal;
	line-height: 1.25;
}

.cepdeposu-cihaz-secici__sonuclar li:hover,
.cepdeposu-cihaz-secici__sonuclar li.is-active {
	background: var(--cs-blue-soft);
}

.cepdeposu-cihaz-secici__sonuclar li.is-label {
	display: block;
	padding: 8px 10px 4px;
	font-family: var(--cs-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-muted);
	cursor: default;
}

.cepdeposu-cihaz-secici__sonuclar li.is-label:hover {
	background: transparent;
}

.cepdeposu-cihaz-secici__sonuclar li.is-empty {
	display: block;
	padding: 14px 12px;
	text-align: center;
	cursor: default;
	color: var(--cs-muted);
	font-size: 12px;
}

.cepdeposu-cihaz-secici__sonuclar li.is-empty:hover {
	background: transparent;
	color: var(--cs-muted);
}

/* ── "Tum modeller" — model listesinin sabit ust satiri ──────────── */
.cepdeposu-cihaz-secici__sonuclar li.is-all {
	font-weight: 700;
	color: var(--cs-blue);
	margin-bottom: 4px;
	border-bottom: 1px dashed var(--cs-border);
	border-radius: 8px 8px 0 0;
}

.cepdeposu-cihaz-secici__sonuclar li.is-all .th {
	background: var(--cs-blue-soft);
	color: var(--cs-blue);
}

/* ── git butonu — mavi tam-genislik CTA ─────────────────────────── */
#cepdeposu-cihaz-secici-git {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 16px;
	border: 1px solid var(--blue, #1f5fcc);
	border-radius: var(--cs-radius);
	background: var(--blue, #1f5fcc);
	color: #fff;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
}

#cepdeposu-cihaz-secici-git:hover:not(:disabled) {
	background: var(--blue-strong, #1a4fa8);
	border-color: var(--blue-strong, #1a4fa8);
}

/* model secilmeden de mavi kalir — sadece hafif soluk */
#cepdeposu-cihaz-secici-git:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* ── populer chip'ler ──────────────────────────────────────────── */
.cepdeposu-cihaz-secici__populer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px dashed var(--cs-border);
	font-size: 12px;
	color: var(--cs-muted);
}

.cepdeposu-cihaz-secici__populer-baslik {
	font-size: 12px;
	color: var(--cs-muted);
}

.cepdeposu-cihaz-secici__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border: 1px solid var(--cs-border);
	border-radius: 999px;
	background: var(--cs-surface);
	color: var(--cs-fg);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.cepdeposu-cihaz-secici__chip:hover {
	border-color: var(--cs-fg);
}

@media (max-width: 640px) {
	.cepdeposu-cihaz-secici__grid {
		grid-template-columns: 1fr;
	}
}