/* Tambahan CSS Khusus untuk Halaman Landing */
        .hover-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            overflow: hidden;
        }

        .hover-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        }

        .custom-block-image {
            object-fit: cover;
            height: 200px;
            width: 100%;
        }

        .badge-custom {
            font-size: 0.8rem;
            padding: 0.5em 1em;
        }

        .hero-section {
            background-size: cover;
            background-position: center;
            position: relative;
        }


        :root {
                --brand-blue: #003366;
                /* Biru Tua Unima */
                --brand-blue-dark: #002244;
                /* Biru Lebih Gelap */
                --brand-orange: #FF6600;
                /* Oranye Kontras */
                --brand-orange-hover: #e65c00;
                --text-grey: #6c757d;
                --bg-light: #f8f9fa;
            }

            /* Global Styles */
            body {
                font-family: 'Outfit', sans-serif;
            }

            a {
                text-decoration: none;
                transition: all 0.3s ease;
            }

            /* Navbar Custom */
            .navbar-custom {
                background-color: #ffffff;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
                padding: 15px 0;
            }

            .navbar-brand span {
                color: var(--brand-blue);
                font-weight: 800;
                letter-spacing: 0.5px;
            }

            .nav-link {
                color: var(--brand-blue) !important;
                font-weight: 600;
                margin: 0 10px;
            }

            .nav-link:hover,
            .nav-link.active {
                color: var(--brand-orange) !important;
            }

            /* Buttons */
            .btn-orange {
                background-color: var(--brand-orange);
                color: white;
                border-radius: 50px;
                padding: 10px 30px;
                font-weight: 600;
                border: 2px solid var(--brand-orange);
                transition: all 0.3s;
            }

            .btn-orange:hover {
                background-color: var(--brand-orange-hover);
                border-color: var(--brand-orange-hover);
                color: white;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
            }

            .btn-outline-blue {
                color: var(--brand-blue);
                border: 2px solid var(--brand-blue);
                border-radius: 50px;
                padding: 8px 25px;
                font-weight: 600;
            }

            .btn-outline-blue:hover {
                background-color: var(--brand-blue);
                color: white;
            }

            /* Hero Section */
            .hero-section {
                background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
                position: relative;
                min-height: 85vh;
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            .hero-overlay-shape {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                line-height: 0;
            }

            /* Search Box */
            .search-box {
                background: white;
                padding: 8px;
                border-radius: 50px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            }

            .search-input {
                border: none;
                outline: none;
                box-shadow: none !important;
            }

            /* Cards */
            .topic-card {
                background: white;
                border-radius: 15px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                transition: all 0.3s ease;
                height: 100%;
                overflow: hidden;
            }

            .topic-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 15px 30px rgba(0, 51, 102, 0.15);
                border-bottom: 5px solid var(--brand-orange);
            }

            .icon-box {
                width: 60px;
                height: 60px;
                background-color: rgba(0, 51, 102, 0.1);
                color: var(--brand-blue);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }

            .topic-card:hover .icon-box {
                background-color: var(--brand-orange);
                color: white;
            }

            /* Tabs */
            .nav-pills .nav-link {
                background: white;
                border: 1px solid #dee2e6;
                color: var(--brand-blue);
                margin: 0 5px;
                border-radius: 50px;
            }

            .nav-pills .nav-link.active {
                background-color: var(--brand-blue);
                color: white !important;
                border-color: var(--brand-blue);
            }

            /* Badges & Text */
            .text-orange {
                color: var(--brand-orange) !important;
            }

            .bg-orange {
                background-color: var(--brand-orange) !important;
            }

            .badge-custom {
                padding: 6px 12px;
                border-radius: 8px;
                font-weight: 500;
                font-size: 0.8rem;
            }