:root {
                --primary: #061153;
                --primary-mid: #1a3a6b;
                --primary-light: #2563eb;
                --accent: #f59e0b;
                --accent-dark: #d97706;
                --light-bg: #f5f7fa;
                --border: #e2e8f0;
                --muted: #64748b;
                --dark: #0f172a;
                --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.07);
                --shadow-lg: 0 20px 56px rgba(6, 17, 83, 0.18);
                --radius: 14px;
            }

            body {
                font-family: 'Plus Jakarta Sans', sans-serif;
                color: var(--dark);
                background: #fff;
                overflow-x: hidden;
            }

            /* ── SCROLL REVEAL ── */
            .reveal {
                opacity: 0;
                transform: translateY(24px);
                transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .reveal.visible {
                opacity: 1;
                transform: none;
            }

            .reveal-d1 {
                transition-delay: 0.10s;
            }

            .reveal-d2 {
                transition-delay: 0.20s;
            }

            .reveal-d3 {
                transition-delay: 0.30s;
            }

            /* ── HERO SLIDER ── */
            .slider-wrapper {
                background: #fff;
            }

            .slider-inner {
                max-width: 1160px;
                margin: 0 auto;
                padding: 32px 24px 36px;
            }

            .hero-slider {
                position: relative;
                border-radius: var(--radius);
                overflow: hidden;
                background: #c8d0e0;
                height: 460px;
                box-shadow: var(--shadow-lg);
            }

            .hero-slide {
                position: absolute;
                inset: 0;
                opacity: 0;
                transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .hero-slide.active {
                opacity: 1;
            }

            .hero-slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 7s ease;
            }

            .hero-slide.active img {
                transform: scale(1.05);
            }

            .hero-slide-placeholder {
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #c8d0e0 0%, #a8bfd8 100%);
            }

            .hero-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg,
                        rgba(6, 17, 83, 0.0) 0%,
                        rgba(6, 17, 83, 0.35) 55%,
                        rgba(6, 17, 83, 0.85) 100%);
            }

            .hero-slide-link {
                position: absolute;
                inset: 0;
                z-index: 3;
                display: block;
            }

            .hero-content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 28px 32px 36px;
                z-index: 4;
                pointer-events: none;
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                background: var(--accent);
                color: #fff;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 1.2px;
                padding: 4px 12px;
                border-radius: 20px;
                text-transform: uppercase;
                margin-bottom: 10px;
                animation: badgePulse 2.8s ease infinite;
            }

            @keyframes badgePulse {

                0%,
                100% {
                    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
                }

                50% {
                    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
                }
            }

            .hero-title {
                color: #fff;
                font-size: clamp(17px, 2.4vw, 25px);
                font-weight: 800;
                line-height: 1.35;
                max-width: 640px;
                margin: 0 0 10px;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
                word-break: break-word;
            }

            .hero-meta {
                color: rgba(255, 255, 255, 0.82);
                font-size: 12px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            /* Arrow buttons */
            .hero-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 36px;
                height: 36px;
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.25);
                border-radius: 50%;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: background 0.25s;
                z-index: 10;
                font-size: 20px;
                user-select: none;
            }

            .hero-arrow:hover {
                background: rgba(245, 158, 11, 0.65);
            }

            .hero-arrow-left {
                left: 14px;
            }

            .hero-arrow-right {
                right: 14px;
            }

            /* Dots — bottom center */
            .hero-dots {
                position: absolute;
                bottom: 12px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: row;
                gap: 7px;
                z-index: 10;
            }

            .hero-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.40);
                cursor: pointer;
                transition: background 0.3s, transform 0.3s;
            }

            .hero-dot.active {
                background: var(--accent);
                transform: scale(1.45);
            }

            /* ── LAYOUT ── */
            .main-container {
                max-width: 1160px;
                margin: 0 auto;
                padding: 0 24px;
            }

            /* ── SECTION HEADER ── */
            .section-header {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                margin-bottom: 24px;
                padding-bottom: 14px;
                border-bottom: 1px solid var(--border);
                position: relative;
            }

            .section-header::before {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 48px;
                height: 3px;
                background: linear-gradient(90deg, var(--accent), var(--accent-dark));
                border-radius: 2px;
            }

            .section-title {
                font-size: 20px;
                font-weight: 800;
                color: var(--primary);
                letter-spacing: -0.3px;
            }

            .section-link {
                font-size: 13px;
                color: var(--primary);
                font-weight: 600;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 6px 14px;
                border-radius: 20px;
                border: 1.5px solid var(--primary);
                transition: background 0.22s, color 0.22s;
                white-space: nowrap;
            }

            .section-link:hover {
                background: var(--primary);
                color: #fff;
            }

            .section-link--light {
                color: #fff;
                border-color: rgba(255, 255, 255, 0.45);
            }

            .section-link--light:hover {
                background: #fff;
                color: var(--primary);
            }

            /* ── BERITA TERBARU ── */
            .berita-section {
                padding: 48px 0 32px;
            }

            /* Featured card */
            .featured-card {
                display: grid;
                grid-template-columns: 300px 1fr;
                height: 200px;
                background: #fff;
                border: 1px solid var(--border);
                border-radius: var(--radius);
                overflow: hidden;
                margin-bottom: 22px;
                box-shadow: var(--shadow-sm);
                text-decoration: none;
                color: inherit;
                transition: box-shadow 0.3s, transform 0.3s;
                position: relative;
            }

            .featured-card::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 4px;
                background: linear-gradient(180deg, var(--accent), var(--primary));
                opacity: 0;
                transition: opacity 0.3s;
                border-radius: 4px 0 0 4px;
            }

            .featured-card:hover {
                box-shadow: var(--shadow-lg);
                transform: translateY(-3px);
            }

            .featured-card:hover::after {
                opacity: 1;
            }

            .featured-img {
                overflow: hidden;
                background: var(--light-bg);
                position: relative;
                height: 100%;
            }

            .featured-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .featured-card:hover .featured-img img {
                transform: scale(1.07);
            }

            .featured-img-placeholder {
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #c8d0e0, #dde3ef);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 48px;
            }

            .featured-body {
                padding: 18px 22px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 7px;
                overflow: hidden;
                min-width: 0;
            }

            .card-meta-row {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .card-kategori {
                font-size: 10px;
                font-weight: 700;
                color: #fff;
                background: var(--accent);
                text-transform: uppercase;
                letter-spacing: 1px;
                padding: 3px 9px;
                border-radius: 20px;
                text-decoration: none;
                transition: background 0.2s;
            }

            .card-kategori:hover {
                background: var(--primary);
            }

            .card-date {
                font-size: 11.5px;
                color: var(--muted);
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .featured-title {
                font-size: 17px;
                font-weight: 800;
                line-height: 1.35;
                color: var(--dark);
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                transition: color 0.2s;
            }

            .featured-card:hover .featured-title {
                color: var(--primary-light);
            }

            .featured-excerpt {
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.6;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .read-more-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--primary-light);
                text-decoration: none;
                transition: gap 0.22s, color 0.2s;
            }

            .featured-card:hover .read-more-btn {
                gap: 10px;
                color: var(--accent-dark);
            }

            /* Grid 3 kartu */
            .cards-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            .news-card {
                background: #fff;
                border: 1px solid var(--border);
                border-radius: var(--radius);
                overflow: hidden;
                box-shadow: var(--shadow-sm);
                display: flex;
                flex-direction: column;
                text-decoration: none;
                color: inherit;
                transition: box-shadow 0.3s, transform 0.3s;
                content-visibility: auto;
                contain-intrinsic-size: 260px;
            }

            .news-card:hover {
                box-shadow: 0 16px 40px rgba(37, 99, 235, 0.13);
                transform: translateY(-4px);
            }

            .news-card-img {
                height: 170px;
                overflow: hidden;
                background: var(--light-bg);
                flex-shrink: 0;
            }

            .news-card-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .news-card:hover .news-card-img img {
                transform: scale(1.07);
            }

            .news-card-img-placeholder {
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #c8d0e0, #dde3ef);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
            }

            .news-card-body {
                padding: 14px 16px 16px;
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 7px;
            }

            .news-card-title {
                font-size: 13.5px;
                font-weight: 700;
                line-height: 1.5;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                transition: color 0.2s;
            }

            .news-card:hover .news-card-title {
                color: var(--primary-light);
            }

            .news-card-excerpt {
                font-size: 12px;
                color: var(--muted);
                line-height: 1.6;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                flex: 1;
            }

            /* ── KATEGORI SECTION ── */
            .kategori-section {
                background: var(--primary);
                padding: 32px 0 44px;
                position: relative;
                overflow: hidden;
            }

            .kategori-section::before {
                content: '';
                position: absolute;
                inset: 0;
                background:
                    radial-gradient(ellipse 60% 70% at 5% 50%, rgba(37, 99, 235, 0.18) 0%, transparent 60%),
                    radial-gradient(ellipse 40% 50% at 95% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 55%);
                pointer-events: none;
            }

            .kategori-section .section-title {
                color: #fff;
            }

            .kategori-section .section-header {
                border-bottom-color: rgba(255, 255, 255, 0.15);
            }

            .kategori-section .section-header::before {
                background: linear-gradient(90deg, var(--accent), var(--accent-dark));
            }

            .kategori-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }

            .kategori-card {
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: var(--radius);
                padding: 20px 22px;
                text-decoration: none;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                backdrop-filter: blur(6px);
                transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
                position: relative;
                overflow: hidden;
            }

            .kategori-card::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, var(--accent), var(--accent-dark));
                opacity: 0;
                transition: opacity 0.3s;
            }

            .kategori-card:hover {
                border-color: var(--accent);
                transform: translateY(-4px);
                box-shadow: 0 14px 36px rgba(245, 158, 11, 0.2);
            }

            .kategori-card:hover::before {
                opacity: 1;
            }

            .kat-info {
                position: relative;
                z-index: 1;
            }

            .kat-name {
                font-size: 13.5px;
                font-weight: 700;
                color: #fff;
                margin-bottom: 3px;
            }

            .kat-count {
                font-size: 11.5px;
                color: rgba(255, 255, 255, 0.58);
            }

            .kat-arrow {
                position: relative;
                z-index: 1;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.10);
                color: rgba(255, 255, 255, 0.70);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 17px;
                flex-shrink: 0;
                transition: background 0.3s;
            }

            .kategori-card:hover .kat-arrow {
                background: rgba(255, 255, 255, 0.22);
            }

            /* ── EMPTY STATE ── */
            .empty-state {
                text-align: center;
                padding: 52px 20px;
                color: var(--muted);
            }

            .empty-state-icon {
                font-size: 48px;
                display: block;
                margin-bottom: 12px;
                opacity: 0.35;
            }

            .empty-state p {
                font-size: 14px;
            }

            /* ── BACK TO TOP ── */
            .back-to-top {
                position: fixed;
                bottom: 22px;
                right: 22px;
                width: 44px;
                height: 44px;
                background: var(--primary);
                color: #fff;
                border: none;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 19px;
                cursor: pointer;
                box-shadow: 0 6px 20px rgba(6, 17, 83, 0.35);
                transition: background 0.3s, transform 0.3s, opacity 0.3s;
                opacity: 0;
                transform: translateY(14px);
                z-index: 999;
            }

            .back-to-top.visible {
                opacity: 1;
                transform: translateY(0);
            }

            .back-to-top:hover {
                background: var(--accent);
                transform: translateY(-3px);
            }

            /* ── RESPONSIVE ── */
            @media (max-width: 1024px) {
                .slider-inner {
                    padding: 24px 20px 28px;
                }
            }

            @media (max-width: 860px) {
                .hero-slider {
                    height: 360px;
                }

                .featured-card {
                    grid-template-columns: 1fr;
                    height: auto;
                }

                .featured-img {
                    height: 190px;
                }

                .featured-body {
                    padding: 16px 18px;
                }

                .cards-grid {
                    grid-template-columns: repeat(2, 1fr);
                }

                .kategori-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 600px) {
                .slider-inner {
                    padding: 14px 12px 18px;
                }

                .hero-slider {
                    height: 280px;
                }

                .hero-title {
                    font-size: 15px;
                }

                .hero-content {
                    padding: 14px 16px 22px;
                }

                .main-container {
                    padding: 0 14px;
                }

                .cards-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 12px;
                }

                .kategori-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 10px;
                }

                .news-card-img {
                    height: 110px;
                }

                .news-card-body {
                    padding: 10px 12px 12px;
                    gap: 5px;
                }

                .news-card-title {
                    font-size: 12.5px;
                }

                .news-card-excerpt {
                    display: none;
                }

                .kategori-card {
                    padding: 14px 14px;
                }

                .berita-section {
                    padding: 32px 0 24px;
                }
            }

            @media (max-width: 360px) {
                .cards-grid,
                .kategori-grid {
                    grid-template-columns: 1fr;
                }
            }

            @media (prefers-reduced-motion: reduce) {

                *,
                *::before,
                *::after {
                    animation-duration: 0.01ms !important;
                    transition-duration: 0.01ms !important;
                }
            }