body { 
    font-family: 'Inter', sans-serif; 
}

/* Sembunyikan Scrollbar tetapi masih boleh di-scroll */
.scrollbar-hide::-webkit-scrollbar { 
    display: none; 
}
.scrollbar-hide { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Alpine.js Cloak untuk elak kelipan semasa loading */
[x-cloak] { 
    display: none !important; 
}

/* Animasi Kustom */
.animate-slide-up { 
    animation: slideUp 0.3s ease-out forwards; 
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-zoom-in { 
    animation: zoomIn 0.2s ease-out forwards; 
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================
   Gaya Kustom untuk Paparan Editor HTML
   ========================================== */
.html-content p { 
    margin-bottom: 0.75rem; 
}
.html-content p:last-child { 
    margin-bottom: 0; 
}
.html-content strong, .html-content b { 
    font-weight: 900; 
    color: #0f172a; 
}
.html-content em, .html-content i { 
    font-style: italic; 
}
.html-content ul { 
    list-style-type: disc; 
    margin-left: 1.5rem; 
    margin-bottom: 0.75rem; 
}
.html-content ol { 
    list-style-type: decimal; 
    margin-left: 1.5rem; 
    margin-bottom: 0.75rem; 
}
.html-content li {
    margin-bottom: 0.25rem;
}
.html-content a { 
    color: #4f46e5; 
    text-decoration: underline; 
    text-underline-offset: 2px; 
    font-weight: 700;
}
.html-content a:hover {
    color: #3730a3;
}
.html-content h1, .html-content h2, .html-content h3, .html-content h4 { 
    font-weight: 900; 
    color: #0f172a; 
    margin-top: 1rem; 
    margin-bottom: 0.5rem; 
}
.html-content h3 { font-size: 1.2em; }
.html-content h4 { font-size: 1.1em; }