From 293069a5946051cf80d010d0995fd4a1f7eac672 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Wed, 24 Jun 2026 18:09:52 +0700
Subject: [PATCH] style: adjust navigation search bar positioning and button
 styling for improved aesthetics

---
 apps/docs-dev/src/.vitepress/theme/custom.css | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/apps/docs-dev/src/.vitepress/theme/custom.css b/apps/docs-dev/src/.vitepress/theme/custom.css
index 5746fe5..7c09ed2 100644
--- a/apps/docs-dev/src/.vitepress/theme/custom.css
+++ b/apps/docs-dev/src/.vitepress/theme/custom.css
@@ -77,4 +77,40 @@
   height: 28px;            /* Menyeimbangkan ukuran logo dengan tinggi teks */
   width: 28px;
   margin-right: 0;         /* Margin sudah digantikan oleh 'gap' pada parent */
+}
+
+/* ==========================================================================
+   ADJUSTING SEARCH BAR POSITION & SPACING
+   ========================================================================== */
+
+/* Menggeser Search agar lebih dekat ke Logo */
+.VPNavBarSearch {
+  margin-left: 0px;   
+  margin-right: auto;  
+}
+
+/* Memperbaiki tampilan tombol Search agar lebih kompak */
+.VPNavBarSearch .DocSearch-Button {
+  border-radius: 8px;
+  height: 32px;        
+  padding: 0 12px;
+}
+
+/* Kustomisasi warna background & border (Light Mode) */
+:not(.dark) .VPNavBarSearch .DocSearch-Button {
+  background-color: #f3f4f6; 
+  border-color: #e5e7eb;     /* Border abu-abu tipis untuk light mode */
+}
+
+/* Kustomisasi warna background & border (Dark Mode) */
+.dark .VPNavBarSearch .DocSearch-Button {
+  background-color: var(--vp-c-bg-soft); 
+  border-color: #374151;     /* Border gelap yang elegan untuk dark mode */
+}
+
+/* Opsional: Jika ingin Search tetap di tengah namun punya batasan */
+@media (min-width: 768px) {
+  .VPNavBar .VPNavBarSearch {
+    flex-grow: 0;      
+  }
 }
\ No newline at end of file