Untitled

<div class="dropdownBtn">
                      <div class="formElementItem">
                        <!-- selectDropdown'a tıklandığında formElementItem__input--select__active classı eklenecek. -->
                        <div class="selectDropdown formElementItem__input formElementItem__input--padding formElementItem__input--select formElementItem__input--select__active bg:white radius:12 w-100 fs:15 ff:regular c:dark shadow:4 d-flex align-items-center" style="--inputPadding:0 3rem 0 1rem; --form-borderColor: #D8D8D8; --form-height: 3rem">
                            <p class="c:dark ff:bold fs:16">Adana</p>
                        </div>
                      </div>
                      <!-- selectDropdown'a tıklandığında d-none d-block -->
                      <div class="dropdownBtn__box dropdownBtn__box--height bg:white radius:12 shadow:8 d-nosne border:1">
                        <div class="dropdownBtn__search">
                          <form action="">
                            <div class="formElementItem">
                              <input class="formElementItem__input formElementItem__input--padding formElementItem__input--search bg:white radius:12 w-100 fs:16 pe ff:regular c:dark shadow:4" type="text" name="search" id="search" placeholder="Ara" style="--inputPadding:0 1rem 0 2.25rem; --form-borderColor: #D8D8D8; --form-height: 2.5rem">
                          </div>
                          </form>
                        </div>
                        <!-- <p class="px-3 py-4 text-center c:dark ff:regular fs:15">Sonuç bulunamadı.</p> -->
                        <!-- sonuç yoksa aşağıdaki ul gizlenir, üstteki p gösterilir. -->
                        <ul class="py-3">
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Adıyaman</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Afyonkarahisar</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Ağrı</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Amasya</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Ankara</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Antalya</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Artvin</p>
                            </button>
                          </li>
                          <li>
                            <button type="button" aria-label="select campaigns" class="px-3 w-100">
                              <p class="c:dark ff:bold fs:16">Aydın</p>
                            </button>
                          </li>
                        </ul>
                      </div>
                    </div>