/* ============================================================
   Karadeniz Emlak — Custom dropdown (mobile-first bottom-sheet
   + desktop popover). Native <select> form submit'i için kalır.
   ============================================================ */

/* trigger görünümü — .select kapsayıcısının üstüne biner */
.select.kx-on{
  position: relative;
  cursor: pointer;
}
.select.kx-on select{
  opacity: 0;
  pointer-events: none;
  /* native picker tetiklemesin */
}
.select.kx-on .kx-label{
  position: absolute;
  left: 14px;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1f1f1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.select.kx-on .kx-label.kx-ph{
  color: #7a7260;
  font-weight: 550;
}
.select.kx-on.kx-open{
  border-color: var(--gold, #c5a55a);
  box-shadow: 0 0 0 4px rgba(197,165,90,.18);
}
.select.kx-on.kx-open > [data-ic="chevD"] svg{
  transform: rotate(180deg);
}

/* ============================================================
   Panel ortak
   ============================================================ */
.kx-panel{
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 30px 80px -20px rgba(20,15,5,.35),
    0 4px 12px rgba(0,0,0,.06);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft, #ece7da);
}

.kx-search{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft, #ece7da);
  background: #fff;
  flex: 0 0 auto;
}
.kx-search svg{
  width: 18px; height: 18px;
  color: #8a8270;
  flex: 0 0 auto;
}
.kx-search input{
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  padding: 4px 0;
  color: var(--text, #1f1f1f);
  min-width: 0;
}
.kx-close{
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 10px;
  color: #8a8270;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-size: 24px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.kx-close:hover{ background: var(--cream-2, #f5f1e8); color: var(--text); }

.kx-list{
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  padding: 6px 0;
}
.kx-list::-webkit-scrollbar{ width: 8px; }
.kx-list::-webkit-scrollbar-thumb{ background: #d6d0bf; border-radius: 8px; }

.kx-row{
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text, #1f1f1f);
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.kx-row:hover,
.kx-row:focus-visible{
  background: var(--cream-2, #f5f1e8);
  outline: none;
}
.kx-row.kx-cur{
  background: rgba(197,165,90,.14);
  color: var(--gold-deep, #b18b3a);
  font-weight: 600;
}
.kx-row .kx-check{
  margin-left: auto;
  width: 18px; height: 18px;
  color: var(--gold-deep, #b18b3a);
  opacity: 0;
  transition: opacity .15s;
  flex: 0 0 auto;
}
.kx-row.kx-cur .kx-check{ opacity: 1; }

.kx-empty{
  padding: 28px 16px;
  text-align: center;
  color: #8a8270;
  font-size: 14px;
}

/* ============================================================
   DESKTOP — popover anchored to trigger
   ============================================================ */
.kx-panel.kx-drop{
  position: absolute;
  max-height: min(380px, 70vh);
  animation: kxFade .14s ease;
}
@keyframes kxFade{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: none; }
}
.kx-panel.kx-drop .kx-list{ max-height: 320px; }

/* ============================================================
   MOBILE — bottom sheet
   ============================================================ */
.kx-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 0, .45);
  z-index: 9998;
  animation: kxFade .18s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.kx-panel.kx-sheet{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-height: 82vh;
  border-radius: 22px 22px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: kxSlide .26s cubic-bezier(.16,1,.3,1);
}
@keyframes kxSlide{
  from{ transform: translateY(100%); }
  to{ transform: none; }
}
.kx-panel.kx-sheet::before{
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: #d6d0bf;
  border-radius: 4px;
  margin: 10px auto 4px;
  flex: 0 0 auto;
}
.kx-panel.kx-sheet .kx-search{
  padding-top: 4px;
  border-bottom: 1px solid var(--line-soft, #ece7da);
}
.kx-panel.kx-sheet .kx-row{
  padding: 16px 18px;
  font-size: 16px;
}
.kx-panel.kx-sheet .kx-list{
  max-height: calc(82vh - 70px);
}

/* iOS rubber-band engelle */
body.kx-locked{ overflow: hidden; touch-action: none; }

/* Köyler / başlık separator — tıklanamaz */
.kx-list .kx-sep{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #b1853e;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  background: #faf7ef;
  border-top: 1px solid rgba(197,165,90,.25);
  border-bottom: 1px solid rgba(197,165,90,.25);
  margin: 4px 0 2px;
}
.kx-list .kx-sep::before,
.kx-list .kx-sep::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(197,165,90,.4));
}
.kx-list .kx-sep::before{
  background: linear-gradient(to left, rgba(197,165,90,.4), transparent);
}