/* ============================================================
   16. SKELETON LOADERS & MICRO-INTERACTIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.admin-section:not(.hidden), 
.guru-section:not(.hidden), 
.siswa-section:not(.hidden) {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.item-card-saas { opacity: 0; animation: fadeInUp 0.4s ease-out forwards; }
.item-card-saas:nth-child(1) { animation-delay: 0.05s; }
.item-card-saas:nth-child(2) { animation-delay: 0.1s; }
.item-card-saas:nth-child(3) { animation-delay: 0.15s; }
.item-card-saas:nth-child(4) { animation-delay: 0.2s; }
.item-card-saas:nth-child(5) { animation-delay: 0.25s; }
.item-card-saas:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.skeleton-card {
    background: #fff; border-radius: 18px; padding: 22px; border: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box;
}
body.dark-mode .skeleton-card { background: #1e293b; border-color: #334155; }

.skeleton-item {
    background: #f1f5f9; background-image: linear-gradient(to right, #f1f5f9 0%, #e2e8f0 20%, #f1f5f9 40%, #f1f5f9 100%);
    background-repeat: no-repeat; background-size: 800px 104px; animation: shimmer 1.5s infinite linear backwards; border-radius: 8px;
}
body.dark-mode .skeleton-item { background: #334155; background-image: linear-gradient(to right, #334155 0%, #475569 20%, #334155 40%, #334155 100%); }

.skel-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.skel-title { height: 16px; width: 70%; margin-bottom: 8px; }
.skel-subtitle { height: 12px; width: 40%; }
.skel-btn { height: 35px; width: 100px; border-radius: 8px; margin-top: 10px; }