html, body {
            height: 100%;          /* pastikan body setinggi viewport */
            margin: 0;             /* hilangkan margin default */
        }

        body {
            position: relative;
            background: url("/images/background.jpg") center/cover no-repeat;
         }

         body::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.2); /* lapisan semi transparan */
            backdrop-filter: blur(8px);           /* atur tingkat blur */
            -webkit-backdrop-filter: blur(8px);   /* untuk Safari */
            z-index: 1;
         }

         body > * {
            position: relative;
            z-index: 2; /* konten tetap tajam di atas blur */
         }

        body {
            color: #ff9900
        }

        /* Navbar dengan sudut halus dan bayangan */
        .navbar {
        background: linear-gradient(90deg, #ff9800, #ffb74d); /* gradasi oranye */
        border-radius: 16px 16px 16px 16px; /* sudut bawah melengkung */
        box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* bayangan lembut */
        margin-top: 16px;
        margin-left: 16px;
        margin-right: 16px;
        }

        /* Warna teks agar kontras */
        .navbar .navbar-brand,
        .navbar .nav-link {
        color: #fff !important;
        font-weight: 500;
        }

        .navbar .nav-link.active,
        .navbar .nav-link:hover {
        color: #000000 !important; /* oranye muda saat hover */
        }


         /* Hero */
         .hero {
            padding: 80px 0;
            text-align: center;
            background: transparent; /* hapus gradient */
        }

        .hero-section::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 1;
         }
        

         .hero-logo {
         /* width: 400px;
         height: 400px; */
         /* border-radius: 16px;
         background: #0d6efd; */
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 16px;
         position: relative;
         z-index: 2;
         }

         .hero-logo img {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
         }

         .hero-title {
         font-size: 36px;
         font-weight: 700;
         margin-bottom: 8px;
         }
         .hero-tagline {
         
         font-size: 18px;
         color: #0d6efd;
         margin-bottom: 24px;
         }
    
         .feature-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 20px rgba(0,0,0,0.06);
         }
         .feature-icon {
         width: 56px;
         height: 56px;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 26px;
         margin-bottom: 12px;
         }
         .icon-layanan { background: #e0f2fe; color: #0284c7; }
         .icon-kolaborasi { background: #fef3c7; color: #d97706; }
         .icon-informasi { background: #ede9fe; color: #7c3aed; }
         /* Footer */
         footer {
         /* border-top: 1px solid #e5e7eb; */
         background: linear-gradient(90deg, #ff9800, #ffb74d);
         padding: 20px 0;
         text-align: center;
         font-size: 14px;
         color: #ffffff;
         }
         /* Dropdown layanan */
         .layanan-list {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: #f9fafb;
         border: 1px solid #e5e7eb;
         border-radius: 12px;
         padding: 16px;
         margin-top: 8px;
         display: none;
         z-index: 10;
         }
         .feature-card:hover .layanan-list {
         display: block;
         }
         .layanan-item {
         display: flex;
         align-items: center;
         gap: 8px;
         padding: 6px 0;
         font-size: 15px;
         color: #050505;
         }
         .layanan-item i {
         color: #f97316; /* oranye */
         font-size: 18px;
         }
         .feature-card {
            position: relative;
            /* border: 1px solid #e5e7eb; */
            border-radius: 12px;
            background: #f9fafb; /* putih dengan 80% opacity */
            padding: 24px;
            transition: all 0.3s ease;
            min-height: 260px;
            overflow: hidden;
         }
         .feature-card:hover {
         box-shadow: 0 8px 20px rgba(0,0,0,0.08);
         }
         /* front & back */
         .card-front, .card-back {
         transition: opacity 0.3s ease;
         }
         .card-back {
         position: absolute;
         inset: 0;
         padding: 24px;
         background: transparent;
         opacity: 0;
         pointer-events: none;
         }
         .feature-card:hover .card-front {
         opacity: 0;
         }
         .feature-card:hover .card-back {
         opacity: 1;
         pointer-events: auto;
         }