/* ==========================================

   1. GLOBAL STYLES & TYPOGRAPHY

=========================================== */

html { 

  scroll-behavior: smooth; 

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

}



body { 

  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 

  background-color: #f8fafc; /* Warna dasar slate-50 yang lembut */

  color: #0f172a; /* Warna teks slate-900 */

  overflow-x: hidden;

}



/* ==========================================

   2. CUSTOM SCROLLBAR (Elegan & Bersih)

=========================================== */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}

::-webkit-scrollbar-track {

  background: #f1f5f9; /* slate-100 */

}

::-webkit-scrollbar-thumb {

  background: #cbd5e1; /* slate-300 */

  border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

  background: #94a3b8; /* slate-400 */

}



/* ==========================================

   3. HERO SLIDER COMPONENTS

=========================================== */

.hero-slide { 

  display: none; 

  opacity: 0;

}

.hero-slide.is-active { 

  display: block; 

  opacity: 1;

  animation: elegantFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; 

}



.slider-dot { 

  width: 10px; 

  height: 10px; 

  border-radius: 9999px; 

  background: rgba(255, 255, 255, 0.3); 

  border: none; 

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 

  cursor: pointer; 

  backdrop-filter: blur(4px);

}

.slider-dot:hover {

  background: rgba(255, 255, 255, 0.8);

  transform: scale(1.1);

}

.slider-dot.is-active { 

  width: 32px; 

  background: #22d3ee; /* cyan-400 */

  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);

}



/* ==========================================

   4. NAVIGATION & WIDGET PANELS

=========================================== */

.nav-panel {

  display: none;

}

.nav-panel.is-open { 

  display: block; 

  animation: elegantFadeDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; 

}



.ai-panel {

  display: none;

}

.ai-panel.is-open, 

.ai-widget.is-open .ai-panel { 

  display: flex; 

  animation: elegantPopUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 

}



/* ==========================================

   5. NATIVE HTML ELEMENTS (Details & Summary)

=========================================== */

summary {

  cursor: pointer;

  outline: none;

}

summary::-webkit-details-marker { 

  display: none; /* Sembunyikan panah default bawaan browser */

}



/* ==========================================

   6. TYPOGRAPHY & PROSE (Rich Text Editor)

=========================================== */

.prose ul > li::marker, 

.prose ol > li::marker { 

  color: #2563eb; /* brand-600 */ 

  font-weight: 800; 

}

.prose a { 

  color: #2563eb; /* brand-600 */ 

  text-decoration: none; 

  font-weight: 700;

  border-bottom: 2px solid transparent;

  transition: all 0.3s ease;

}

.prose a:hover { 

  color: #1d4ed8; /* brand-700 */

  border-bottom-color: #93c5fd; /* brand-300 (Garis bawah halus saat dihover) */

}



/* ==========================================

   7. POPUPS & MODALS

=========================================== */

[data-popup] { 

  animation: elegantFadeIn 0.3s ease-out forwards; 

  backdrop-filter: blur(8px); /* Efek kaca (Glassmorphism) pada background overlay */

}



/* ==========================================

   8. KEYFRAME ANIMATIONS (Smooth & Elegant)

=========================================== */

@keyframes elegantFadeUp { 

  from { opacity: 0; transform: translateY(25px); } 

  to { opacity: 1; transform: translateY(0); } 

}



@keyframes elegantFadeDown { 

  from { opacity: 0; transform: translateY(-15px); } 

  to { opacity: 1; transform: translateY(0); } 

}



@keyframes elegantPopUp { 

  from { opacity: 0; transform: translateY(20px) scale(0.96); } 

  to { opacity: 1; transform: translateY(0) scale(1); } 

}



@keyframes elegantFadeIn { 

  from { opacity: 0; } 

  to { opacity: 1; } 

}



/* ==========================================

   9. UTILITIES

=========================================== */

.no-scrollbar::-webkit-scrollbar { display: none; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.bg-corporate { background: linear-gradient(135deg, #061637 0%, #0b2559 55%, #1246a8 100%); }

.font-heading { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }



.prose p { margin-bottom: 1rem; line-height: 1.9; }

.prose h2, .prose h3 { 

    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; 

    color: #0f172a; 

    margin-top: 1.4rem; 

    margin-bottom: 0.8rem; 

    font-weight: 800; 

}

.prose ul { padding-left: 1.2rem; list-style: disc; }

.prose li { margin-bottom: 0.45rem; }