@import url('https://cdn.jsdelivr.net/npm/@fontsource/plus-jakarta-sans@5.0.20/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/plus-jakarta-sans@5.0.20/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/plus-jakarta-sans@5.0.20/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/plus-jakarta-sans@5.0.20/800.css');

html { scroll-behavior: smooth; }
body { background: #080c19; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(129,140,248,.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(129,140,248,.6); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 30px rgba(99,102,241,.25); } 50% { box-shadow: 0 0 50px rgba(45,212,191,.35); } }
@keyframes pulseDot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes skeletonShimmer { 0% { opacity: 0.3; } 50% { opacity: 0.7; } 100% { opacity: 0.3; } }

.animate-fadeUp { animation: fadeUp .3s cubic-bezier(.22,.9,.35,1) both; }
.animate-popIn { animation: popIn .3s cubic-bezier(.22,.9,.35,1) both; }
.toast-item { animation: toastIn .3s ease both; }
.hero-glow { animation: glowPulse 6s ease-in-out infinite; }
.dot-typing { animation: pulseDot 1.4s infinite ease-in-out; }
.dot-2 { animation-delay: .2s; }
.dot-3 { animation-delay: .4s; }
.skeleton { animation: skeletonShimmer 1.5s infinite ease-in-out; background: rgba(255, 255, 255, 0.08); }

.card { 
  background: linear-gradient(145deg, rgba(20,27,53,0.85), rgba(11,16,32,0.95)); 
  border: 1px solid rgba(148,163,184,0.12); 
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

.btn-grad { 
  background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #14b8a6); 
  transition: filter .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.btn-grad:hover { filter: brightness(1.15); box-shadow: 0 6px 25px rgba(99,102,241,0.5); }
.btn-grad:active { transform: scale(.97); }

.nav-btn {
  position: relative;
  transition: all .2s ease;
}
.nav-btn.active { 
  background: linear-gradient(90deg, rgba(99,102,241,0.2), rgba(20,184,166,0.1)); 
  color: #fff; 
  border-color: rgba(129,140,248,0.35);
}
.nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #2dd4bf;
  border-radius: 0 4px 4px 0;
}

.task-check { transition: all .2s; }
input[type=range] { accent-color: #818cf8; }
.cal-day:hover { background: rgba(99,102,241,0.18); }
.ring-fg { transition: stroke-dashoffset .5s linear; }
.section { display: none; }
.section.active { display: block; }

.chat-content pre { background: rgba(0,0,0,0.5); padding: 8px 12px; border-radius: 8px; margin: 6px 0; overflow-x: auto; font-family: monospace; font-size: 12px; border: 1px solid rgba(255,255,255,0.1); }
.chat-content code { background: rgba(255,255,255,0.1); padding: 2px 4px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.chat-content p { margin-bottom: 4px; }
.chat-content p:last-child { margin-bottom: 0; }

/* Bento Grid Khusus Beranda */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}
.bento-col-span-8 { grid-column: span 12; }
.bento-col-span-4 { grid-column: span 12; }
@media (min-width: 1024px) {
  .bento-col-span-8 { grid-column: span 8; }
  .bento-col-span-4 { grid-column: span 4; }
}