/* Kotak pencarian header Tour Travel 1 — perbaikan yang tidak boleh masuk
 * `main.css`. (ARA-134)
 *
 * Berkas ini TERPISAH dengan sengaja. `main.css` dan `tourtravel1-shell.css`
 * adalah salinan tema dari sumbernya; tiap baris yang disisipkan ke sana
 * menjadi utang merge saat tema disegarkan, dan tidak ada satu pun tanda di
 * berkas itu yang memberi tahu baris mana yang bukan milik sumbernya.
 *
 * Dimuat `base.html`, jadi berlaku untuk kotak di header maupun yang di
 * offcanvas. Keduanya memakai kelas `.tp-header-search` yang sama.
 */

/* Teks animasi "Labuan Bajo / Komodo / Sumba / Raja Ampat" menumpang di ATAS
 * input (`position: absolute; left: 115px`). Sumbernya hanya menyembunyikannya
 * saat kotak DI-FOKUS:
 *
 *     .tp-header-search:has(.tp-input:focus) .tp-header-typing-wrap { ... }
 *     ^ main.css:2445
 *
 * Selama kotaknya selalu kosong, itu cukup. Sejak ARA-134 kotak ini terisi
 * kembali dengan kata kunci yang sedang berlaku — dan kotak terisi yang tidak
 * sedang difokus membuat animasinya menimpa kata yang diketik pengunjung:
 * "yukai" terbaca bersama "Raja A..." di gambar yang dikirim pemilik repo,
 * 22 Sep 2026.
 *
 * `:placeholder-shown` benar untuk keduanya: ia palsu begitu input punya nilai,
 * apa pun asalnya — diketik pengunjung maupun dikirim server. Ditulis sebagai
 * aturan terpisah dari yang `:focus`, bukan digabung dengan koma, supaya
 * peramban yang tidak mengenal satu selektor tidak ikut membuang yang lain.
 */
.tp-header-search:has(.tp-input:not(:placeholder-shown)) .tp-header-typing-wrap {
  opacity: 0;
  transform: translateY(-5px);
  visibility: hidden;
}

/* Kotak yang isinya panjang tidak boleh menabrak tombol kacanya. Tombolnya
 * `position: absolute; left: 20px` di sumbernya, jadi yang dijaga sisi kiri. */
.tp-header-search .tp-input {
  text-overflow: ellipsis;
}