body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background-color: #f8fafc;
        color: #1e293b;
    }

    /* Animasi Dinamis */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-up { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
    
    /* Header Halaman (Versi Mini dari Hero Utama) */
    .page-header {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
        padding: 60px 0 80px;
        position: relative;
        overflow: hidden;
    }
    .page-header::before {
        content: ''; position: absolute; width: 300px; height: 300px;
        background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
        top: -100px; right: -50px; border-radius: 50%;
    }
    .text-gold { color: #fbbf24; }

    /* List Produk Hukum (Konsisten dengan index) */
    .law-item {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        margin-bottom: 0.4rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .law-item:hover {
        border-color: #cbd5e1;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        transform: scale(1.01);
    }
    .law-item::after {
        content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
        background: #2563eb; opacity: 0; transition: opacity 0.3s ease;
    }
    .law-item:hover::after { opacity: 1; }
    
    .law-badge { 
        font-weight: 600; letter-spacing: 0.5px;
        background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
    }
    .law-title { color: #0f172a; transition: color 0.2s; line-height: 1.4; }
    .law-item:hover .law-title { color: #2563eb; }
    
    .btn-detail {
        background: #f8fafc; color: #3b82f6; border: 1px solid #e2e8f0;
        border-radius: 50px; font-weight: 600; transition: all 0.3s ease;
    }
    .btn-detail:hover {
        background: #2563eb; color: #ffffff; border-color: #2563eb;
    }

    /* Paginasi Modern */
    .pagination-modern .page-link {
        border: none;
        color: #64748b;
        font-weight: 600;
        border-radius: 50%;
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 4px;
        transition: all 0.3s ease;
    }
    .pagination-modern .page-link:hover {
        background-color: #e2e8f0; color: #0f172a;
    }
    .pagination-modern .page-item.active .page-link {
        background-color: #2563eb; color: white;
        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4);
    }
    .pagination-modern .page-item.disabled .page-link { color: #cbd5e1; background: transparent; }