@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* Styles from index.html */
.gradient-bg-landing {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2, #a5b4fc, #6366f1);
    background-size: 400% 400%;
    animation: moveGradient 20s ease infinite;
}

@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.float-animation { animation: float 6s ease-in-out infinite; }

.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#main-header.is-sticky {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding-top: 1rem;
    padding-bottom: 1rem;
    animation: slide-in-down 0.5s ease-out;
}

@keyframes slide-in-down {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Custom styles for details/summary accordion */
details > summary {
    list-style: none; /* Remove default marker */
}

details > summary::-webkit-details-marker {
    display: none; /* Remove default marker for Safari */
}

details[open] > summary .accordion-icon {
    transform: rotate(180deg);
}

#back-to-top {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* New styles for animated gradient button */
.animated-gradient-btn {
    background-size: 200% auto;
}

.animated-gradient-btn:hover {
    background-position: right center; /* Moves the gradient on hover */
}

/* Styles from app.html */
.sidebar-transition { transition: transform 0.3s ease-in-out; }
.fade-in { animation: fadeIn 0.5s ease-in; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.gradient-bg-app {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-slideIn { animation: slideIn 0.3s ease-out; }

.chart-bar { animation: growUp 1s ease-out forwards; }

@keyframes growUp {
    from { height: 0; }
    to { height: var(--bar-height); }
}

.pdf-export-mode button, .pdf-export-mode .hidden-on-export { display: none !important; }

.page-fade-in { animation: pageFadeIn 0.4s ease-out forwards; }
.page-fade-out { animation: pageFadeOut 0.3s ease-in forwards; }

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-15px); }
}

/* Animation for the word "Cerdas" */
@keyframes text-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.animated-text-breathe {
  display: inline-block; /* Necessary for transform to work correctly */
  animation: text-breathe 4s ease-in-out infinite;
}

/* Typing effect cursor */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.25em; /* Match the line height */
    background-color: #4f46e5; /* Indigo color */
    animation: blink 0.7s infinite;
    vertical-align: bottom;
}

/* Financial Status Card Animation */
.financial-status-card {
    animation: fadeIn 0.6s ease-out, slideUpStatus 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes slideUpStatus {
    from { transform: translateY(20px); }
    to { transform: translateY(0); }
}

/* Menghilangkan background putih pada logo */
.logo-transparent-bg {
    mix-blend-mode: multiply;
    /* Menambah kecerahan dan kontras agar logo lebih menonjol */
    filter: brightness(1.1) contrast(1.1);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Frixsave AI Chat Styles */
.chat-bubble-user {
    background-color: #4f46e5; /* theme-indigo-600 */
    color: white;
    border-radius: 1.5rem 1.5rem 0.25rem 1.5rem;
}

.chat-bubble-model {
    background-color: #eef2ff; /* indigo-50 */
    color: #374151; /* gray-700 */
    border-radius: 1.5rem 1.5rem 1.5rem 0.25rem;
}

.dark .chat-bubble-model {
    background-color: #374151; /* slate-700 */
    color: #d1d5db; /* gray-300 */
}

/* Typing indicator for AI */
@keyframes typing-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9ca3af; /* gray-400 */
    animation: typing-dot-bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }