/* ============================================================
   KOBİTECHS — Form bileşenleri
   1) .cp   → şehir seçici (yazarak arama)
   2) .isec → ilgilenilen sektörler (çoklu seçim çipleri)
   3) .tsel → ilan tipi seçici (alım / satım)
   ============================================================ */

/* ── 1. ŞEHİR SEÇİCİ ───────────────────────────────────────── */
.cp-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cp-chip{font-family:inherit;font-size:12.5px;font-weight:500;color:var(--slate-600);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:30px;
  padding:5px 12px;cursor:pointer;transition:.15s;line-height:1.2}
.cp-chip:hover{border-color:var(--slate-400);color:var(--ink)}
.cp-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.cp-box{position:relative}
.cp-input{padding-right:34px}
.cp-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  border:none;background:var(--slate-100);color:var(--slate-500);border-radius:50%;
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cp-clear:hover{background:var(--slate-200);color:var(--ink)}

.cp-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 5px);
  max-height:248px;overflow-y:auto;list-style:none;margin:0;padding:5px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.cp-opt{padding:8px 11px;border-radius:var(--r-sm);font-size:14px;color:var(--slate-700);cursor:pointer}
.cp-opt:hover,.cp-opt.on{background:var(--blue-50);color:var(--ink)}
.cp-empty{padding:10px 11px;font-size:13.5px;color:var(--slate-400)}

.cp-bad .cp-input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(214,69,59,.09)}
.cp-bad .cp-hint::after{content:" Listede olmayan bir il yazdınız.";color:var(--danger);font-weight:500}

/* ── 2. İLGİLENİLEN SEKTÖRLER ──────────────────────────────── */
.isec{display:flex;flex-wrap:wrap;gap:7px}
.isec input{position:absolute;opacity:0;width:0;height:0}
.isec label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
  color:var(--slate-600);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:30px;padding:7px 13px;cursor:pointer;transition:.15s;user-select:none}
.isec label:hover{border-color:var(--slate-400);color:var(--ink)}
.isec label::before{content:"+";font-size:13px;font-weight:600;color:var(--slate-400);line-height:1}
.isec input:checked + label{background:var(--blue-50);border-color:var(--blue);color:var(--blue-700)}
.isec input:checked + label::before{content:"✓";color:var(--blue)}
.isec input:focus-visible + label{box-shadow:0 0 0 3px var(--blue-50)}
.isec-count{font-size:12px;color:var(--slate-400);margin-top:8px}

/* ── 3. İLAN TİPİ SEÇİCİ ───────────────────────────────────── */
.tsel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tsel input{position:absolute;opacity:0;width:0;height:0}
.tsel label{position:relative;display:flex;flex-direction:column;gap:4px;
  padding:18px 18px 17px;border:1.5px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface);cursor:pointer;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),border-color .18s,box-shadow .18s}
.tsel label::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .22s;
  background:radial-gradient(120% 90% at 12% 0%,var(--tsel-glow,transparent),transparent 62%)}
.tsel label:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow)}
.tsel .t-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;margin-bottom:8px;background:var(--slate-100);
  border:1px solid var(--line);transition:.2s}
.tsel .t-ic svg{width:19px;height:19px;stroke:var(--slate-500);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.tsel .t-n{font-family:var(--ff-display);font-weight:600;font-size:16px;letter-spacing:-.3px;
  color:var(--ink);display:flex;align-items:center;gap:8px}
.tsel .t-d{font-size:12.8px;color:var(--slate-500);line-height:1.45}
.tsel .t-chk{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.tsel .t-chk svg{width:11px;height:11px;stroke:#fff;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:.2s}

/* seçili — alım */
.tsel input:checked + label.t-buy{border-color:var(--buy);--tsel-glow:rgba(31,157,87,.14);
  box-shadow:0 0 0 3px rgba(31,157,87,.11),var(--shadow)}
.tsel input:checked + label.t-buy .t-ic{background:var(--buy-bg);border-color:var(--buy-line)}
.tsel input:checked + label.t-buy .t-ic svg{stroke:var(--buy-text)}
.tsel input:checked + label.t-buy .t-chk{background:var(--buy);border-color:var(--buy)}

/* seçili — satım */
.tsel input:checked + label.t-sell{border-color:var(--sell);--tsel-glow:rgba(201,132,18,.15);
  box-shadow:0 0 0 3px rgba(201,132,18,.12),var(--shadow)}
.tsel input:checked + label.t-sell .t-ic{background:var(--sell-bg);border-color:var(--sell-line)}
.tsel input:checked + label.t-sell .t-ic svg{stroke:var(--sell-text)}
.tsel input:checked + label.t-sell .t-chk{background:var(--sell);border-color:var(--sell)}

.tsel input:checked + label{transform:translateY(-2px)}
.tsel input:checked + label::before{opacity:1}
.tsel input:checked + label .t-chk svg{opacity:1;transform:scale(1)}
.tsel input:focus-visible + label{border-color:var(--blue)}

/* seçim anında kısa bir "nabız" — hangi kartın seçildiği net anlaşılsın */
@keyframes tsel-pop{0%{transform:translateY(-2px) scale(1)}
  45%{transform:translateY(-3px) scale(1.018)}
  100%{transform:translateY(-2px) scale(1)}}
.tsel input:checked + label.pop{animation:tsel-pop .34s cubic-bezier(.2,.9,.3,1.2)}

@media(prefers-reduced-motion:reduce){
  .tsel label,.tsel input:checked + label{transition:border-color .18s,box-shadow .18s;transform:none}
  .tsel input:checked + label.pop{animation:none}
}
@media(max-width:560px){ .tsel{grid-template-columns:1fr} }