/* Pencarian (/cari) — search form + section layout. Cards from tk-card/blog/experts CSS. */
/* Pil, ikut bahasa desain tombol (arahan Ega 5 Sep 2026: "tombol membulat"). Bentuknya
   sengaja dibuat sama dengan .thome-herosearch di hero beranda - kotak inilah yang
   dituju field itu, jadi kalau rupanya berubah drastis begitu halaman berpindah,
   pengunjung merasa mendarat di tempat lain. Tepi netral, biru disimpan untuk tombolnya. */
.tcari-form { display: flex; align-items: center; gap: 6px; max-width: 720px; margin: 4px auto 20px; padding: 4px 5px 4px 22px; background: #fff; border: 1.5px solid #e2e5ee; border-radius: 999px; transition: border-color .12s ease; }
.tcari-form:focus-within { border-color: #004aad; }
.tcari-form input { flex: 1 1 auto; min-width: 0; padding: 11px 0; font-size: 16px; border: 0; background: transparent; outline: none; font-family: inherit; }
.tcari-form input::placeholder { color: #9aa1b1; }
.tcari-form button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: #004aad; color: #fff; border: 0; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
.tcari-form button:hover { background: #00377f; }
.tcari-form button:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }
/* Di layar sempit tombolnya jadi lingkaran ikon saja; label "Cari" memakan lebar yang
   lebih berguna untuk kolom isiannya. */
@media (max-width: 520px) {
    .tcari-form { padding-left: 16px; }
    .tcari-form button { padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: 50%; }
    .tcari-form__teks { display: none; }
}
.tcari-hint, .tcari-empty { color: #667287; font-size: 1rem; padding: 8px 0 4px; text-align: center; }
.tcari-summary { color: #3d475c; margin: 0 0 18px; text-align: center; }
.tcari-sec { margin: 0 0 38px; }
.tcari-sec__title { font-size: 1.25rem; font-weight: 800; color: #004aad; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.tcari-sec__title span { color: #94a3b8; font-weight: 600; font-size: 1rem; }
.tcari-more { margin-top: 16px; }
.tcari-more a { color: #004aad; font-weight: 700; text-decoration: none; }
.tcari-more a:hover { text-decoration: underline; }

/* Rubrik Alat (5 Sep 2026). Bentuknya meniru kartu alat di beranda (.thome-tool), bukan
   kartu hub (.tt-card): yang di hub membawa tombol favorit dan beacon, dan tidak boleh
   ikut ke sini. Gayanya ditulis ulang di berkas ini supaya /cari tidak perlu memuat
   home-id.css hanya demi satu rubrik. */
.tcari-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcari-tool {
    display: flex; align-items: center; gap: 14px;
    background: #fff; color: inherit; text-decoration: none;
    border: 1px solid #eef2f7; border-radius: 14px; padding: 16px 18px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.tcari-tool:hover {
    color: inherit; border-color: #d8e2f3;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08); transform: translateY(-2px);
}
.tcari-tool:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }
.tcari-tool__ikon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: #eef3fc; color: #004aad; font-size: 22px; line-height: 1;
}
.tcari-tool__teks { min-width: 0; }
.tcari-tool__nama { display: block; font-weight: 700; font-size: .98rem; line-height: 1.35; color: #1f2937; }
.tcari-tool__cat { display: block; margin-top: 4px; font-size: .8rem; font-weight: 600; color: #64748b; }
@media (max-width: 991px) { .tcari-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tcari-tools { grid-template-columns: 1fr; } }

/* Navigasi lompat antar-rubrik. Enam rubrik membuat halaman ini panjang; pil-pil ini
   yang memberi tahu apa saja yang ketemu tanpa harus menggulir dulu. */
.tcari-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.tcari-nav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 999px;
    background: #fff; border: 1.5px solid #e2e5ee;
    color: #3d475c; font-size: .9rem; font-weight: 700; text-decoration: none;
    transition: border-color .12s ease, color .12s ease;
}
.tcari-nav a:hover { border-color: #004aad; color: #004aad; }
.tcari-nav a i { color: #94a3b8; font-size: .95em; }
.tcari-nav a:hover i { color: #004aad; }
.tcari-nav a span { color: #94a3b8; font-weight: 600; }
/* scroll-margin supaya judul rubrik tidak tertutup nav lengket saat dilompati */
.tcari-sec { scroll-margin-top: 88px; }

/* Keadaan kosong: beri jalan keluar, bukan cuma kabar buruk. */
.tcari-kosong { padding: 8px 0 6px; }
.tcari-kosong__judul { font-size: 1.05rem; color: #3d475c; margin: 0 0 4px; }
.tcari-kosong__saran { color: #667287; margin: 0 0 14px; }
.tcari-kosong__jalan { display: flex; flex-wrap: wrap; gap: 10px; }
.tcari-kosong__jalan a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; border-radius: 999px;
    background: #fff; border: 1.5px solid #e2e5ee;
    color: #004aad; font-weight: 700; text-decoration: none;
    transition: border-color .12s ease, background .12s ease;
}
.tcari-kosong__jalan a:hover { border-color: #004aad; background: #f5f8ff; }

/* Rubrik Halaman. Sebaris-sebaris, bukan kisi kartu: ini jawaban "ke mana harus pergi",
   bukan isi, jadi tidak boleh berebut berat dengan rubrik di atasnya. */
.tcari-halaman { display: flex; flex-direction: column; gap: 10px; }
.tcari-hal {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-radius: 14px;
    background: #fff; border: 1px solid #eef2f7; color: inherit; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tcari-hal:hover { color: inherit; border-color: #d8e2f3; box-shadow: 0 8px 22px rgba(0, 0, 0, .06); }
.tcari-hal:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }
.tcari-hal__ikon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: #eef3fc; color: #004aad; font-size: 19px;
}
.tcari-hal__teks { flex: 1 1 auto; min-width: 0; }
.tcari-hal__nama { display: block; font-weight: 700; color: #1f2937; }
.tcari-hal__ringkas { display: block; margin-top: 2px; font-size: .87rem; color: #64748b; line-height: 1.5; }
.tcari-hal__panah { flex: none; color: #b6bfd0; font-weight: 700; }
.tcari-hal:hover .tcari-hal__panah { color: #004aad; }

/* ---------- Blok kepala rata tengah + garis penutupnya ---------- */
/* Arahan Ega 5 Sep 2026, merujuk halaman index lain: kotak cari di tengah, lalu separator
   sesudah pil. Hero di atasnya (.tkls-hero) memang sudah text-align:center, jadi kotak cari
   yang rata kiri membuat halaman ini terlihat patah tepat di bawah judulnya. Yang ikut
   ditengahkan hanya BLOK KEPALA (kotak cari, ringkasan, pil, keadaan kosong); hasil di bawah
   garis tetap rata kiri karena isinya kisi kartu - menengahkan kisi membuat baris terakhir
   yang tidak penuh melayang di tengah dan kolomnya tidak lagi sejajar dengan halaman lain. */
.tcari-pisah {
    border: 0;
    border-top: 1px solid #e8ecf3;
    margin: 0 0 26px;
}
/* Hasil kembali rata kiri setelah garis. Ditulis eksplisit supaya tidak ada yang mewarisi
   perataan tengah dari blok kepala kalau nanti .tcari-band ikut ditengahkan. */
.tcari-hasil { text-align: left; }

/* Keadaan kosong ikut rata tengah: ia menggantikan posisi ringkasan + pil. */
.tcari-kosong { text-align: center; }
.tcari-kosong__jalan { justify-content: center; }