/* =========================================================
   CountryPicker — bayraklı ülke kodu seçici, tüm temalar için ortak taban.

   Açılır panel (.cp-dd) document.body'ye taşınır (bkz. country-picker.js
   _doOpen) — bu yüzden değişkenler .cp-wrap üzerinde DEĞİL, her kuralda
   `var(--cp-x, nötr-değer)` şeklinde satır içi düşen bir yedekle tanımlanır.
   .cp-wrap bir kapsayıcı scope olarak kullanılsaydı, panel body'ye
   taşındığı anda o scope'un DIŞINA çıkar ve değişkenler görünmez olurdu.

   TEMA UYARLAMASI: Bir tema kendi paletine uyarlamak isterse kendi
   theme.css'inde `:root { --cp-bg: ...; --cp-ink: ...; --cp-line: ...;
   --cp-hover: ...; --cp-radius: ...; }` tanımlar — :root HER ZAMAN bir
   üst küme olduğu için panel body'ye taşınsa bile geçerli kalır. Hiçbir
   şey tanımlamayan tema aşağıdaki nötr yedeklerle YİNE DE düzgün görünür.
   ========================================================= */
/* GERÇEK KÖK NEDEN (2026-08-28, iki yanlış denemeden sonra bulundu):
   .cp-btn'e önce `font: inherit` eklendi ("buton kendi font'unu miras
   almaz" varsayımıyla) — ama kosandra'nın (ve muhtemelen diğer temaların)
   KENDİ resetinde zaten `button { font: inherit; } input,select,textarea
   { font: inherit; }` VARDI (bkz. tema theme.css'i). Sorun miras almamak
   değildi: bu dosya (country-picker.css) her temanın kendi theme.css'İNDEN
   SONRA yüklendiği için (footer'daki countryPickerInject()), eşit
   özgüllükte (.cp-btn vs .ks-input, ikisi de 0,1,0) kaynak sırası
   kazanıyordu — `.cp-btn`'in `font:inherit` kuralı `.ks-input`'un
   `font-size:14px`'ini EZİYOR, buton sayfa geneli (daha büyük) font
   boyutunu miras alıyordu. Ardından denenen `.cp-wrap{display:flex}` +
   `.cp-btn{height:100%}` bunu DÜZELTMEDİ, üstüne .cp-wrap'ı olması
   gerekenden daha da uzatarak sorunu BÜYÜTTÜ (canlıda ölçüldü: buton
   68px'e çıktı, input hâlâ 52px'te kaldı). Doğru çözüm ortak-form.css'te
   uygulanan ile AYNI: .cp-wrap/.cp-btn'i :where() ile sıfır özgüllüğe
   çekip tema sınıfının (yükleme sırasından bağımsız) HER ZAMAN kazanmasını
   sağlamak — buton artık .ks-input'un padding'ini VE font-size'ını
   olduğu gibi devralıyor, ekstra height/width/font kuralı GEREKMİYOR. */
:where(.cp-wrap) { position: relative; }
:where(.cp-btn) {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.cp-dd {
  position: fixed;
  background: var(--cp-bg, #ffffff);
  border: 1px solid var(--cp-line, #e5e7eb);
  border-radius: var(--cp-radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  z-index: 9999;
  overflow: hidden;
  width: 220px;
}
.cp-search {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cp-line, #e5e7eb);
  padding: 8px 12px;
  font-size: 13.5px;
  background: transparent;
  box-sizing: border-box;
  outline: none;
  color: var(--cp-ink, #111827);
}
.cp-list { max-height: 220px; overflow-y: auto; }
.cp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--cp-ink, #111827);
}
.cp-item:hover { background: var(--cp-hover, #f3f4f6); }