/**
 * VitePress Custom Theme CSS
 * Applying brand color #652ed9 and its variants
 */

:root {
  /* Brand color #652ed9 */
  --vp-c-brand-1: #652ed9;
  --vp-c-brand-2: #804aea;
  --vp-c-brand-3: #9b6ff8;
  --vp-c-brand-soft: rgba(101, 46, 217, 0.16);

  /* Hover states */
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);

  /* Focus states */
  --vp-custom-block-brand-border: var(--vp-c-brand-1);
}

.dark {
  /* Slightly adjusted variants for dark mode, keeping the primary brand color consistent */
  --vp-c-brand-1: #8a57f3;
  --vp-c-brand-2: #7a42ec;
  --vp-c-brand-3: #652ed9;
  --vp-c-brand-soft: rgba(101, 46, 217, 0.25);
}

/* Sesuaikan ukuran logo di navbar */
/* .VPNavBar .logo {
  height: 32px;
}

.VPNavBar .VPNavBarTitle{
  
} */

/* ==========================================================================
   OPTIMASI NAVBAR TITLE & LOGO (ELEGANT ALIGNMENT)
   ========================================================================== */
.VPNavBar .VPNavBarTitle {
  display: flex;
  align-items: center; /* Memastikan logo & teks sejajar sempurna secara vertikal */
  gap: 12px;           /* Spasi yang lebih longgar dan elegan antara logo & teks */
  padding: 0 16px;     /* Memberikan ruang napas di dalam kontainer title */
}

/* ==========================================================================
   ELEGANT HARMONIOUS GRADIENT (Subtle Mode-Aware)
   ========================================================================== */
.VPNavBar .VPNavBarTitle .title {
  /* LIGHT MODE: Gradien dari warna Brand gelap ke warna Brand terang */
  /* Kita hindari hitam pekat, gunakan ungu yang lebih dalam */
  background: linear-gradient(135deg, #4b23a6 0%, var(--vp-c-brand-1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

/* DARK MODE: Gradien dari ungu sangat muda ke warna Brand */
.dark .VPNavBar .VPNavBarTitle .title {
  /* Kita kurangi dominasi putih dengan menggunakan ungu yang sangat terang */
  background: linear-gradient(135deg, #c5a8ff 30%, var(--vp-c-brand-1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Glow diperhalus agar tidak terlalu menyilaukan */
  filter: drop-shadow(0 0 8px rgba(101, 46, 217, 0.2));
}

/* Hover effect yang lebih kalem */
.VPNavBar .VPNavBarTitle .title:hover {
  filter: drop-shadow(0 0 12px rgba(101, 46, 217, 0.4));
}

.VPNavBar .logo {
  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;      
  }
}