/* ══════════════════════════════════════════════
                       CSS VARIABLES — selaras home.blade
                    ══════════════════════════════════════════════ */
        :root {
            --blue-primary: #1a3a8f;
            --blue-mid: #1e4ec8;
            --blue-light: #3b82f6;
            --gold: #e9b945;
            --gold-light: #fcd96a;
            --white: #ffffff;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-400: #94a3b8;
            --gray-600: #475569;
            --text-dark: #0f172a;
            /* Easing selaras home.blade */
            --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* ══════════════════════════════════════════════
           PAGE TRANSITION — native View Transition API.
           Cross-fade singkat (0.22s) antar-halaman, murni CSS/zero JS.
           Browser yang belum mendukung otomatis abai.
        ══════════════════════════════════════════════ */
        @view-transition {
            navigation: auto;
        }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 0.22s;
            animation-timing-function: var(--ease-out-expo);
        }

        .vm-page * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .vm-page {
            font-family: var(--body-font);
            background: var(--gray-50);
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* ══════════════════════════════════════════════
                       HERO
                    ══════════════════════════════════════════════ */
        .page-hero {
            position: relative;
            background-color: var(--blue-primary);
            background-image: url('/images/hero2.png');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            min-height: 220px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 24px 52px;
            overflow: hidden;
            text-align: center;
        }

        .page-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(26, 58, 143, 0.75) 0%, rgba(15, 23, 42, 0.55) 100%);
        }

        /* Floating orbs */
        .pf-hero__border {
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            z-index: 4;
            pointer-events: none;
            height: 40px;
        }

        @media (min-width: 768px) {
            .pf-hero__border {
                height: 65px;
            }
        }

        .pf-hero__border .pf-parallax>use {
            animation: pf-wave 25s cubic-bezier(.55, .5, .45, .5) infinite;
        }

        .pf-hero__border .pf-parallax>use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
            fill: rgba(255, 255, 255, .20);
        }

        .pf-hero__border .pf-parallax>use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
            fill: rgba(255, 255, 255, .40);
        }

        .pf-hero__border .pf-parallax>use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
            fill: rgba(255, 255, 255, .60);
        }

        .pf-hero__border .pf-parallax>use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
            fill: #ffffff;
        }

        @keyframes pf-wave {
            0% {
                transform: translate3d(-90px, 0, 0);
            }

            100% {
                transform: translate3d(85px, 0, 0);
            }
        }

        .hero-orb {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.055);
            animation: vm-float-orb 8s ease-in-out infinite;
            z-index: 1;
            /* will-change agar orb dipromosikan ke GPU layer sendiri,
               menghindari repaint elemen lain saat animasi berjalan */
            will-change: transform;
        }

        .hero-orb:nth-child(1) {
            width: 320px;
            height: 320px;
            top: -90px;
            left: -70px;
            animation-delay: 0s;
        }

        .hero-orb:nth-child(2) {
            width: 200px;
            height: 200px;
            top: 10px;
            right: -50px;
            animation-delay: -3s;
        }

        .hero-orb:nth-child(3) {
            width: 140px;
            height: 140px;
            bottom: 0;
            left: 32%;
            animation-delay: -5.5s;
        }

        @keyframes vm-float-orb {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-18px) scale(1.04);
            }
        }

        /* Garis kiri dekoratif — mengacu hp-hero__garis di home */
        .hero-garis {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, transparent, var(--gold), transparent);
            opacity: 0;
            transform-origin: top;
            animation: vm-garisIn 1.1s var(--ease-out-expo) 0.3s both;
            z-index: 2;
        }

        @keyframes vm-garisIn {
            from {
                opacity: 0;
                transform: scaleY(0);
            }

            to {
                opacity: 0.6;
                transform: scaleY(1);
            }
        }

        .page-hero-content {
            position: relative;
            z-index: 2;
        }

        /* Animasi hero — selaras hp-fade-up / hp-slideLeft di home */
        .page-hero h1 {
            font-family: var(--title-font);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--white);
            letter-spacing: -0.5px;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
            opacity: 0;
            animation: vm-slideUp 0.75s var(--ease-out-expo) 0.05s both;
        }

        .hero-subtitle {
            margin-top: 10px;
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.78);
            opacity: 0;
            animation: vm-slideUp 0.75s var(--ease-out-expo) 0.18s both;
        }

        .breadcrumb-nav {
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.75);
            opacity: 0;
            animation: vm-slideUp 0.75s var(--ease-out-expo) 0.28s both;
        }

        .breadcrumb-nav a {
            color: var(--gold-light);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb-nav a:hover {
            color: var(--white);
        }

        .breadcrumb-nav .sep {
            opacity: 0.45;
        }

        @keyframes vm-slideUp {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ══════════════════════════════════════════════
                       SCROLL REVEAL — animasi CSS murni (autoplay saat paint).
                       Sebelumnya opacity:0 hanya dimunculkan lewat class
                       .vm-visible dari IntersectionObserver di visi-misi.js.
                       Karena file JS itu dimuat di akhir halaman, jika telat
                       di-download (mis. antre di belakang aset lain), seluruh
                       konten (Visi, Misi, Pilar) tetap tak terlihat sampai
                       beberapa detik walau HTML-nya sudah ada. Sekarang tidak
                       lagi bergantung pada JS untuk tampil.
                    ══════════════════════════════════════════════ */
        .vm-reveal {
            animation: vm-revealIn 0.6s var(--ease-out-expo) both;
        }

        @keyframes vm-revealIn {
            from {
                opacity: 0;
                transform: translateY(28px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Card reveal — stagger individual via nth-child (animation-delay) */
        .misi-card {
            animation: vm-revealIn 0.6s var(--ease-out-expo) both;
            transition: box-shadow 0.40s var(--ease-out-expo),
                border-color 0.3s ease;
        }

        .misi-card:nth-child(1) {
            animation-delay: 0.06s;
        }

        .misi-card:nth-child(2) {
            animation-delay: 0.14s;
        }

        .misi-card:nth-child(3) {
            animation-delay: 0.22s;
        }

        .misi-card:nth-child(4) {
            animation-delay: 0.30s;
        }

        .misi-card:nth-child(5) {
            animation-delay: 0.38s;
        }

        .misi-card:nth-child(6) {
            animation-delay: 0.46s;
        }

        /* ══════════════════════════════════════════════
                       CONTAINER & MAIN
                    ══════════════════════════════════════════════ */
        .vm-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .vm-main {
            padding: 80px 0 110px;
        }

        /* ══════════════════════════════════════════════
                       VISI BLOCK
                    ══════════════════════════════════════════════ */
        .visi-block {
            margin-bottom: 88px;
        }

        .visi-inner {
            background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-mid) 60%, #2563eb 100%);
            border-radius: 28px;
            padding: 60px 64px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 28px 80px rgba(26, 58, 143, 0.30);
            /* Transisi hover ringan — transform+shadow saja, tanpa will-change
               karena hanya 1 elemen ini di halaman (bukan elemen berulang). */
            transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
        }

        @media (hover: hover) {
            .visi-inner:hover {
                transform: translateY(-4px);
                box-shadow: 0 34px 90px rgba(26, 58, 143, 0.38);
            }
        }

        .visi-inner::before {
            content: '';
            position: absolute;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.045);
            top: -130px;
            right: -90px;
            pointer-events: none;
        }

        .visi-inner::after {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.035);
            bottom: -90px;
            left: 30px;
            pointer-events: none;
        }

        /* Garis aksen kiri dalam card visi */
        .visi-accent-line {
            position: absolute;
            left: 0;
            top: 18%;
            bottom: 18%;
            width: 3px;
            background: linear-gradient(to bottom, transparent, var(--gold), transparent);
            border-radius: 2px;
        }

        .visi-icon {
            width: 68px;
            height: 68px;
            background: rgba(255, 255, 255, 0.11);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 22px;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            position: relative;
            z-index: 1;
            /* Spring entry — selaras hp-feature__icon hover di home */
            animation: vm-iconIn 0.55s var(--ease-spring) 0.5s both;
        }

        @keyframes vm-iconIn {
            from {
                opacity: 0;
                transform: scale(0.7) rotate(-8deg);
            }

            to {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        .visi-icon svg {
            width: 34px;
            height: 34px;
            color: var(--gold);
        }

        .visi-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(233, 185, 69, 0.18);
            border: 1px solid rgba(233, 185, 69, 0.38);
            color: var(--gold-light);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 6px 18px;
            border-radius: 50px;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .visi-badge .dot,
        .section-badge .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            display: inline-block;
            animation: vm-pulse-dot 2s ease infinite;
            will-change: transform;
        }

        @keyframes vm-pulse-dot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.5;
                transform: scale(1.4);
            }
        }

        .visi-title {
            font-family: var(--title-font);
            font-size: clamp(1.35rem, 2.4vw, 1.95rem);
            font-weight: 700;
            color: var(--white);
            line-height: 1.5;
            margin-bottom: 22px;
            position: relative;
            z-index: 1;
        }

        .visi-title span {
            color: var(--gold-light);
        }

        .visi-desc {
            font-size: 0.94rem;
            color: rgba(255, 255, 255, 0.78);
            line-height: 1.82;
            max-width: 680px;
            position: relative;
            z-index: 1;
        }

        .visi-quote-mark {
            position: absolute;
            top: 16px;
            right: 44px;
            font-size: 200px;
            font-family: var(--title-font);
            color: rgba(255, 255, 255, 0.035);
            line-height: 1;
            pointer-events: none;
            z-index: 0;
            user-select: none;
        }

        /* ══════════════════════════════════════════════
                       MISI BLOCK
                    ══════════════════════════════════════════════ */
        .misi-header {
            text-align: center;
            margin-bottom: 56px;
        }

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--blue-primary), var(--blue-mid));
            color: var(--white);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 10px 28px;
            border-radius: 50px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(26, 58, 143, 0.25);
            position: relative;
            overflow: hidden;
        }

        .section-badge::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
            transform: translateX(-100%);
            animation: vm-shimmer 3s ease infinite;
            will-change: transform;
        }

        @keyframes vm-shimmer {
            to {
                transform: translateX(200%);
            }
        }

        .misi-header h2 {
            font-family: var(--title-font);
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            color: var(--blue-primary);
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }

        .title-underline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 10px;
        }

        .title-underline::before,
        .title-underline::after {
            content: '';
            display: block;
            height: 2px;
            width: 64px;
            background: linear-gradient(90deg, transparent, var(--blue-light));
            border-radius: 2px;
        }

        .title-underline::after {
            background: linear-gradient(90deg, var(--blue-light), transparent);
        }

        .title-underline .diamond {
            width: 8px;
            height: 8px;
            background: var(--gold);
            transform: rotate(45deg);
        }

        /* ══════════════════════════════════════════════
                       MISI GRID & CARDS
                    ══════════════════════════════════════════════ */
        .misi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 64px;
        }

        .misi-card {
            background: var(--white);
            border-radius: 22px;
            padding: 34px 28px;
            border: 1.5px solid var(--gray-200);
            box-shadow: 0 4px 24px rgba(26, 58, 143, 0.07);
            position: relative;
            overflow: hidden;
            cursor: default;
        }

        /* Hover — selaras hp-berita__card:hover di home.
           Dibungkus @media(hover:hover) agar tidak nyangkut di layar sentuh. */
        @media (hover: hover) {
            .misi-card:hover {
                transform: translateY(-7px) !important;
                box-shadow: 0 20px 60px rgba(26, 58, 143, 0.17);
                border-color: var(--blue-light);
            }
        }

        .misi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue-primary), var(--gold));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.45s var(--ease-out-expo);
        }

        .misi-card:hover::before {
            transform: scaleX(1);
        }

        .misi-bg-num {
            position: absolute;
            top: -12px;
            right: 14px;
            font-size: 100px;
            font-family: var(--title-font);
            font-weight: 700;
            color: rgba(26, 58, 143, 0.045);
            line-height: 1;
            pointer-events: none;
            user-select: none;
            transition: color 0.3s ease;
        }

        @media (hover: hover) {
            .misi-card:hover .misi-bg-num {
                color: rgba(26, 58, 143, 0.08);
            }
        }

        /* Badge nomor — spring selaras hp-feature__icon hover di home */
        .misi-num-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--blue-primary), var(--blue-mid));
            color: var(--white);
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 16px;
            box-shadow: 0 6px 20px rgba(26, 58, 143, 0.28);
            transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
        }

        @media (hover: hover) {
            .misi-card:hover .misi-num-badge {
                transform: scale(1.12) rotate(-5deg);
                box-shadow: 0 12px 28px rgba(26, 58, 143, 0.38);
            }
        }

        .misi-card-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--blue-primary);
            margin-bottom: 10px;
            line-height: 1.4;
            transition: color 0.3s ease;
        }

        @media (hover: hover) {
            .misi-card:hover .misi-card-title {
                color: var(--blue-mid);
            }
        }

        .misi-card-desc {
            font-size: 0.86rem;
            color: var(--gray-600);
            line-height: 1.76;
        }

        /* ══════════════════════════════════════════════
                       PILLARS STRIP
                    ══════════════════════════════════════════════ */
        .pillars-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 12px 48px rgba(26, 58, 143, 0.18);
        }

        .pillar-item {
            padding: 40px 28px;
            text-align: center;
            position: relative;
            transition: filter 0.3s ease;
        }

        .pillar-item:nth-child(1) {
            background: var(--blue-primary);
        }

        .pillar-item:nth-child(2) {
            background: var(--blue-mid);
        }

        .pillar-item:nth-child(3) {
            background: #2563eb;
        }

        @media (hover: hover) {
            .pillar-item:hover {
                filter: brightness(1.1);
            }
        }

        .pillar-item+.pillar-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 18%;
            bottom: 18%;
            width: 1px;
            background: rgba(255, 255, 255, 0.14);
        }

        /* Float — selaras hp-float di home */
        .pillar-icon {
            font-size: 2.2rem;
            margin-bottom: 14px;
            display: block;
            animation: vm-pillar-float 5s ease-in-out infinite;
            will-change: transform;
        }

        .pillar-item:nth-child(2) .pillar-icon {
            animation-delay: 0.6s;
        }

        .pillar-item:nth-child(3) .pillar-icon {
            animation-delay: 1.2s;
        }

        @keyframes vm-pillar-float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-7px);
            }
        }

        .pillar-label {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.65);
            margin-bottom: 6px;
        }

        .pillar-value {
            font-family: var(--title-font);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--white);
        }

        /* ══════════════════════════════════════════════
                       BG PARTICLES
                    ══════════════════════════════════════════════ */
        /* position:absolute (bukan fixed) — supaya browser tidak membentuk
           compositing layer setinggi viewport yang harus terus di-track
           sepanjang halaman terbuka. Tampilan visual tetap sama karena
           parent-nya (.vm-page) sudah membungkus seluruh halaman. */
        .bg-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(26, 58, 143, 0.06), transparent);
            animation: vm-drift linear infinite;
            will-change: transform;
        }

        @keyframes vm-drift {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* ══════════════════════════════════════════════
                       BACK TO TOP
                    ══════════════════════════════════════════════ */
        .back-to-top {
            position: fixed;
            bottom: 32px;
            right: 32px;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--blue-primary), var(--blue-mid));
            color: var(--white);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(26, 58, 143, 0.35);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s var(--ease-out-expo),
                transform 0.4s var(--ease-out-expo),
                box-shadow 0.3s ease;
            z-index: 999;
        }

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

        @media (hover: hover) {
            .back-to-top:hover {
                transform: translateY(-4px);
                box-shadow: 0 10px 32px rgba(26, 58, 143, 0.42);
            }
        }

        /* ══════════════════════════════════════════════
                       PREFERS REDUCED MOTION — selaras home
                    ══════════════════════════════════════════════ */
        @media (prefers-reduced-motion: reduce) {

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

            .vm-reveal,
            .misi-card {
                opacity: 1;
                transform: none;
            }

            ::view-transition-group(*) {
                animation-duration: 0.01ms !important;
            }
        }

        /* ══════════════════════════════════════════════
                       RESPONSIVE
                    ══════════════════════════════════════════════ */
        @media (max-width: 900px) {
            .misi-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .pillars-strip {
                grid-template-columns: 1fr;
                border-radius: 18px;
            }

            .pillar-item+.pillar-item::before {
                display: none;
            }

            .visi-inner {
                padding: 40px 32px;
            }
        }

        @media (max-width: 580px) {
            .misi-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .visi-inner {
                padding: 30px 22px;
            }

            .vm-main {
                padding: 52px 0 88px;
            }
        }