/* =========================================================
   Aranabilir kademeli seçim listesi (combobox)
   Ruhsat Başvuru Sistemi ile birebir aynı görünüm.
   ========================================================= */

/* ---- Aranabilir seçim listesi (combobox) ---- */
.combo{ position:relative }
.combo .form-control{ padding-right:46px; cursor:pointer }
.combo .form-control:focus{ cursor:text }

.combo-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; border-radius:9px;
  background:#eef2f3; color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:.22s; z-index:4;
}
.combo-toggle:hover{ background:var(--green-100); color:var(--green) }
.combo.is-open .combo-toggle{ background:var(--green); color:#fff }
.combo.is-open .combo-toggle i{ transform:rotate(180deg) }
.combo-toggle i{ transition:transform .25s }

.combo-panel{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 18px 40px rgba(51,73,92,.16);
  overflow:hidden;
}
.combo.is-open .combo-panel{ display:block; animation:comboIn .2s ease-out }
@keyframes comboIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

.combo-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:#fafcfb; border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--navy);
}
.combo-head i{ color:var(--green); margin-right:5px }
.combo-head span{ font-weight:600; color:var(--muted); letter-spacing:0; text-transform:none }
.combo-head .ttl{ font-weight:700; color:var(--navy); letter-spacing:.5px; text-transform:uppercase }

.combo-list{ max-height:290px; overflow-y:auto; padding:6px }
.combo-list::-webkit-scrollbar{ width:8px }
.combo-list::-webkit-scrollbar-thumb{ background:#d4dde1; border-radius:8px }
.combo-list::-webkit-scrollbar-thumb:hover{ background:#bcc9cf }

.combo-group{
  position:sticky; top:-6px; z-index:1;
  background:#fff; padding:9px 10px 5px;
  font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--green); display:flex; align-items:center; gap:7px;
}
.combo-group::after{ content:""; flex:1; height:1px; background:var(--line) }

.combo-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:none; background:transparent; border-radius:9px;
  padding:9px 11px; font-size:13.5px; color:var(--ink); line-height:1.4;
  transition:background .15s, color .15s;
}
.combo-item::before{
  content:"\f111"; font-family:"Font Awesome 6 Free"; font-weight:400;
  font-size:7px; color:#c6d0d4; flex:0 0 auto; transition:.15s;
}
.combo-item:hover,
.combo-item.is-active{ background:var(--green-050); color:var(--green-700) }
.combo-item:hover::before,
.combo-item.is-active::before{ content:"\f00c"; font-weight:900; font-size:10px; color:var(--green) }
.combo-item mark{
  background:var(--accent-100); color:#a5641b; padding:0 1px;
  border-radius:3px; font-weight:700;
}

.combo-empty{ padding:18px 16px; text-align:center; font-size:13px; color:var(--muted) }
.combo-empty i{ display:block; font-size:20px; color:#c6d0d4; margin-bottom:8px }
.combo-empty b{ color:var(--ink) }

.combo-foot{
  padding:9px 14px; background:#fafcfb; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px;
}
.combo-foot i{ color:var(--accent) }
.combo-foot kbd{
  background:#fff; border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; padding:1px 5px; font-size:10px; color:var(--body); font-family:inherit;
}