/* ============================================================
   OMERTA · REGISTER — ŞEHİR ARAMA (yalnızca register.html)
   page-social.css'in mevcut register kurallarına DOKUNMAZ;
   burada yalnızca 2. adım arama/filtre/rozet/boş-durum EKLERİ.
   Tasarım token'ları tokens.css'ten gelir.
   ============================================================ */

/* ---- Adım 1: dikey ortalama + atmosferik sahne ----------
   Form artık devasa boşlukta yalnız durmaz; sahne dikey ortalanır
   ve stepDone ile aynı arka plan dokusuyla atmosfer kazanır.
   (page-social.css .register-shell kuralı override edilir; kısa
   içerik ortalanır, uzun içerik — adım 2 — kırpılmadan akar.) */
.register-shell { justify-content: center; }

.reg-card--scene {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(16, 13, 8, .90), rgba(11, 9, 6, .96)),
    url(../img/generated/background/bg_family_hq_v1@orig.webp);
  background-size: cover, cover;
  background-position: center, center;
  border-color: var(--gold-a30);
}
.reg-hero-line {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--gold);
  text-align: center;
  letter-spacing: .01em;
  margin-bottom: 12px;
}

/* ---- Arama satırı --------------------------------------- */
.city-search {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.city-search__field {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
.city-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--gold-a45);
  pointer-events: none;
}
.city-search__input {
  width: 100%;
  padding: 13px 14px 13px 38px;
  font: 500 var(--fs-xl) var(--font-ui);
  letter-spacing: .02em;
}
.city-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.city-search__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.city-search__filter-label {
  font: 600 var(--fs-2xs) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-700);
}
.city-search__select {
  min-width: 170px;
  max-width: 220px;
  padding: 11px 30px 11px 12px;
  font: 500 var(--fs-md) var(--font-ui);
  color: var(--text-300);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-a45) 50%),
    linear-gradient(135deg, var(--gold-a45) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---- Sonuç başlığı -------------------------------------- */
.city-results {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 12px;
  border-bottom: 1px solid var(--gold-a10);
  padding-bottom: 8px;
}
.city-results__label {
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-bright);
}
.city-results__count {
  font: 500 var(--fs-sm) var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-700);
}

/* ---- Kart eklentileri (page-social city-card tabanı) ---- */
.city-card__state {
  font: 500 var(--fs-2xs) var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-600);
  margin-top: 3px;
}
.city-card__tier {
  padding: 2px 7px;
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
}
.city-card__players { display: inline-flex; align-items: baseline; gap: 4px; }

/* Ülke etiketi — tek casing standardı (ince uppercase) */
.city-card__country { text-transform: uppercase; }

/* Sahipsiz şehir — kırmızı blok yerine tek ince köşe çipi.
   Kart çerçevesi nötr kalır; kırmızı yalnız çipte yaşar. */
.city-card--contested { border-color: var(--gold-a16); }
.city-card--contested:hover { border-color: var(--gold-a35); }
.city-card--contested.is-selected {
  border-color: var(--blood);
  box-shadow: 0 0 18px -4px rgba(200, 50, 74, .55);
}
/* Sahipsiz kartın davet satırı — sessiz, nötr (gürültü yok) */
.city-card__fam--open {
  color: var(--text-600) !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}

/* Köşe çipi — ince blood-outline rozet */
.city-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font: 700 var(--fs-2xs) var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.city-chip--blood {
  color: var(--blood-soft);
  border: 1px solid var(--blood-a20);
  background: rgba(200, 50, 74, .05);
}

/* ---- Boş durum ------------------------------------------ */
.city-empty {
  text-align: center;
  padding: 34px 20px 26px;
  border: 1px dashed var(--gold-a16);
  border-radius: var(--r-md);
  margin-bottom: 22px;
}
.city-empty__glyph {
  font-size: 34px;
  line-height: 1;
  color: var(--gold-a45);
  margin-bottom: 12px;
}
.city-empty__title {
  font: 700 var(--fs-2xl) var(--font-display);
  color: var(--text-200);
  letter-spacing: var(--ls-tight);
}
.city-empty__sub {
  font: 500 var(--fs-md) var(--font-ui);
  color: var(--text-600);
  margin-top: 6px;
}

/* ---- Başarı ekranı · görsel süsleme (yalnız katman) -------
   page-register.js mantığına DOKUNULMAZ. url() bu CSS
   dosyasına (assets/css/) göre çözülür → ../img kullanılır. */
#stepDone.reg-card {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(16, 13, 8, .86), rgba(11, 9, 6, .95)),
    url(../img/generated/background/bg_family_hq_v1@orig.webp);
  background-size: cover, cover;
  background-position: center, center;
  border-color: var(--gold-a30);
}
/* Arma etrafına ui_decor çerçevesi (crest 100% -> iç alana sığar) */
.reg-success__crest {
  box-sizing: border-box;
  padding: 16px;
  background: url(../img/generated/ui_decor/ui_frame_profile_v1@256.webp) center / contain no-repeat;
}

/* ---- Duyarlı -------------------------------------------- */
@media (max-width: 560px) {
  .city-search { flex-direction: column; align-items: stretch; }
  .city-search__filter { width: 100%; }
  .city-search__select { max-width: none; width: 100%; }
}