/* PeTaLite — aranabilir açılır liste (kütüphane stili) */

/*
 * ara-secim.js ile birlikte kullanılır. Uygulamanın renk token'larına bağlıdır:
 * --kart, --kenar, --soluk, --birincil, --metin. Panelin gizlenmesi .gizli
 * sınıfıyla olur; kütüphane kendi kuralını da tanımlar ki tek başına çalışsın.
 */

.ara-secim-panel.gizli { display: none; }

.ara-secim { position: relative; width: 100%; min-width: 0; }

/*
 * Asıl <select> DOM'da kalır ama görünmez olur. display:none KULLANILMAZ:
 * required bir alan gizlenirse tarayıcı doğrulaması "odaklanılamıyor" diye
 * gönderimi kilitler. Konum çıpası şart — çıpasız absolute öğe akıştaki
 * yerinde durur ve <select>'in asgari genişliği kabı taşırır.
 */
.ara-secim-gizli {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  appearance: none;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.ara-secim-dugme {
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 9px 30px 9px 11px;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  background: var(--kart);
  color: var(--metin);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ara-secim-dugme::after {
  content: "▾";
  position: absolute;
  right: 11px;
  color: var(--soluk);
  pointer-events: none;
}

.ara-secim-dugme.bos { color: var(--soluk); }
.ara-secim-dugme:hover { border-color: var(--birincil); }

.ara-secim-dugme[aria-expanded="true"] {
  border-color: var(--birincil);
  outline: 2px solid color-mix(in srgb, var(--birincil) 35%, transparent);
  outline-offset: 1px;
}

/* Gövdeye eklenir ve fixed konumlanır: tablo kaydırması veya modal sınırı kırpmasın. */
.ara-secim-panel {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  padding: 8px;
  min-width: 200px;
}

.ara-secim-giris { margin-bottom: 6px; flex: none; }
/* Panel yüksekliği JS tarafından boşluğa göre sınırlanır; liste kalanı doldurur. */
.ara-secim-liste { flex: 1 1 auto; max-height: 240px; overflow-y: auto; min-height: 0; }

.ara-secim-oge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.ara-secim-oge .isaret {
  flex: none;
  width: 16px;
  color: var(--birincil);
  font-weight: 700;
}

.ara-secim-oge .oge-metin { display: grid; min-width: 0; }
.ara-secim-oge .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ara-secim-oge .alt {
  color: var(--soluk);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Şablon gibi kısa işaretler sağa dayalı, marka renginde ve küçük. */
.ara-secim-oge .oge-rozet {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--birincil);
}

.ara-secim-oge.vurgulu { background: color-mix(in srgb, var(--birincil) 14%, transparent); }
.ara-secim-oge.secili .ad { font-weight: 700; color: var(--birincil); }

/* Çok seçimli listede seçilenler kaldırılabilir etiket olarak görünür. */
.ara-secim-dugme:has(.ara-chip) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 30px 5px 6px;
  min-height: 40px;
}

.ara-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--birincil) 14%, transparent);
  color: var(--birincil);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ara-chip .sil {
  cursor: pointer;
  opacity: .65;
  font-size: 11px;
  padding: 0 2px;
}

.ara-chip .sil:hover { opacity: 1; }
.ara-secim-bos { padding: 10px; color: var(--soluk); font-size: 14px; text-align: center; }

.ara-secim-ekle {
  margin-top: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--kenar);
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--birincil);
}

.ara-secim-ekle:hover { background: color-mix(in srgb, var(--birincil) 12%, transparent); }