Remark Admin Dashboard

Pages / microsite

Edit Microsite

Kelola struktur HTML dan relasi halaman (Sub-Page).

← Kembali ke List

Judul Microsite:

Sub Halaman Dari (Opsional):

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WIKA Gedung - Beranda</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brandBlue: '#0095DA',
                        brandOrange: '#C68A12',
                    }
                }
            }
        }
    </script>
    <style>
        header#main-header-page {
    padding: 30px 100px;
}
.absolute.inset-0.bg-gradient-to-r.from-blue-700/80.via-blue-600/70.to-blue-800/80.mix-blend-multiply {
    background-color: #1483ac;
    --tw-gradient-to: none !important;
}
a.flex.items-center.space-x-1.5.text-blue-600.hover:text-brandOrange.transition-colors {}a.flex.items-center.space-x-1.5.text-blue-600.hover:text-brandOrange.transition-colors {
    font-weight: bold!important;
    color: #00aeef !important;
}
.w-full.pt-2.pb-1.border-t.border-slate-100.mt-1.flex.items-center.text-xs.text-slate-700.font-normal {
    padding-top: 14px;
    font-size: 12px;
    color: #000000;
}
.px-6.py-4.bg-slate-900.text-white.flex.items-center.justify-between {
    background-color: #00aeef;
}

button.px-5.py-2.bg-slate-900.text-white.text-xs.font-semibold.rounded-lg.hover:bg-slate-800.transition {
    background-color: #00aeef;
}

p.text-slate-600.group-hover:text-white/90.text-sm.leading-relaxed.transition-colors.duration-300 {
    font-size: 13px;
}
img.img-center {
    margin: auto;
}
div#bar-publik {
    background-color: #00aeef;
    border: none;
}

div#bar-wika {
    background-color: #f9a01b;
}
body.bg-brand-dark.text-gray-100.antialiased.min-h-screen.flex.flex-col.selection:bg-brand-red.selection:text-white {
    background-color: #ffffff!important;
}
section#pilar {
    background-color: #07b0ef;
}

h2.text-xs.font-bold.tracking-widest.text-slate-400.uppercase.mb-2 {
    color: #000000;
}
.absolute.top-full.left-1/2.-translate-x-1/2.w-screen.bg-white.text-slate-800.shadow-2xl.p-10.opacity-0.invisible.group-hover:opacity-100.group-hover:visible.transition-all.duration-300.transform.translate-y-2.group-hover:translate-y-0.border-t.border-slate-200.z-50 {
    margin-top: 30px!important;
}

h3.text-xl.md:text-2xl.font-bold.tracking-tight.mb-3.text-slate-900.group-hover:text-white.transition-colors.duration-300 {
    font-size: 18px;
}

.pt-6.mt-6.border-t.border-slate-100.group-hover:border-white/20.flex.items-center.justify-between.text-xs.font-semibold.tracking-wider.uppercase.text-brandBlue.group-hover:text-white.transition-colors.duration-300 {
    padding: 4px 0px;
}

.wg3-card.fade-in-section.group.bg-white.text-slate-800.hover:text-white.p-8.rounded-3xl.shadow-xl.flex.flex-col.justify-between.transition-all.duration-300.transform.hover:-translate-y-2.hover:shadow-2xl.hover:bg-[#C68A12].cursor-pointer.border.border-slate-100.is-visible {
    padding: 20px;
}

.w-14.h-14.rounded-2xl.bg-blue-50.group-hover:bg-white/20.flex.items-center.justify-center.mb-6.text-brandBlue.group-hover:text-white.text-2xl.transition-colors.duration-300 {}
        .circle-progress {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        .fade-in-section {
            opacity: 0;
            transform: translateY(30px);
            visibility: hidden;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: opacity, visibility, transform;
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: none;
            visibility: visible;
        }

p.text-xs.text-gray-500.font-light.leading-relaxed {
    font-size: 0.9em;
    font-weight: 400;
}
button#slide-right {
    background-color: #00aeef;
}
p.text-gray-500.font-light.text-sm.leading-relaxed.mb-6.group-hover:text-gray-700.transition-colors {
    font-size: 0.9em;
    font-weight: 400;
}
pan {
    font-weight: 400;
}
p.text-gray-500.font-light.text-sm.leading-relaxed.mb-6.group-hover:text-gray-700.transition-colors {
    font-weight: 400;
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: #00aeef;
    font-weight: 800;
}
.space-y-4.text-gray-600.font-light.leading-relaxed p {
    font-weight: 400!important;
}

span {
    font-weight: 400!important;
}

p.text-gray-500.font-light.text-sm.leading-relaxed.mb-6.group-hover:text-gray-700.transition-colors {
    font-weight: 400!important;
}

/* Styling Viewport Mobile (Layar di bawah 768px / Tablet ke bawah) */
@media screen and (max-width: 768px) {
    header#main-header {
        padding: 20px 16px; /* Padding lebih kecil agar pas di layar HP */
    }
}

</style>
</head>
<body class="bg-slate-900 text-white font-sans antialiased overflow-x-hidden">

<header id="main-header-page" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 px-6 md:px-12 bg-white text-slate-900 shadow-sm">
        <div class="max-w-[1440px] mx-auto flex flex-col justify-center relative">
            
            
            <div class="flex items-center justify-between w-full pb-3">
                
                
                <div class="flex items-center space-x-6">
                    
                    <a href="#" class="flex items-center">
                        <div class="flex items-center font-bold tracking-tight">
                            
                            <img src="https://www.wikagedung.co.id/images/ic_wika_gedung.svg" alt="WIKA Gedung" class="h-8 w-auto">
                        </div>
                    </a>
                    
                    
                    <div id="stock-widget" class="hidden md:flex items-center space-x-3 text-xs font-medium bg-slate-100 text-slate-800 backdrop-blur-md px-3 py-1 rounded border border-slate-200 transition-colors duration-300">
                        <span class="font-semibold tracking-wide">WEGE - <span id="stock-price" class="font-bold">IDR 53.00</span></span>
                        <span id="stock-change" class="text-rose-500 font-medium flex items-center"><i class="fa-solid fa-arrow-trend-down mr-1"></i> -1 %</span>
                        <span class="opacity-40">|</span>
                        <span id="stock-time" class="text-[11px] font-normal">30 Sep 2025 15:04 GMT+7</span>
                    </div>
                </div>

<div class="flex items-center space-x-6">
                    <div class="hidden xl:block text-xs font-normal">
                        <a href="#" class="hover:text-brandOrange transition-colors">Sitemap</a>
                    </div>
                    
                    <button id="mobile-menu-btn" class="xl:hidden text-2xl focus:outline-none cursor-pointer">
                        <i class="fa-solid fa-bars"></i>
                    </button>
                </div>
            </div>

<div class="flex items-center justify-between pt-1 border-t border-slate-200 transition-colors duration-300 relative">
                
                
                <nav class="hidden xl:flex items-center space-x-8 text-sm font-medium">
                    
                    
                    <div class="group py-1">
                        <a href="https://remark.co.id/micro" class="hover:text-brandOrange transition-colors">Home</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Home</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3">
                                        <a href="#" class="block text-slate-800 hover:text-brandBlue transition">Overview</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">About Us</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">About Us</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/about-us/" class="block text-slate-800 hover:text-brandBlue transition">About Us</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/Board-of-Commissioners/" class="block text-slate-800 hover:text-brandBlue transition">Board of Commissioners</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/Report-of-the-Board-of-Commissioners/" class="block text-slate-800 hover:text-brandBlue transition">Report of the Board of Commissioners</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/Directors/" class="block text-slate-800 hover:text-brandBlue transition">Directors</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/Report-of-the-Directors/" class="block text-slate-800 hover:text-brandBlue transition">Report of the Directors</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="https://remark.co.id/micro/Corporate-Secretary/" class="block text-slate-800 hover:text-brandBlue transition">Corporate Secretary</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Financials</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Financials</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Financial Results</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Financial Highlights</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Annual Reports</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Sustainability Reports</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Investor Presentations</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Shareholders</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Shareholders</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">General Meeting of Shareholders</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Dividends</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Shareholding Structure</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Downloads</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Governance</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Governance</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Audit Committee</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Nomination, Remuneration, and GCG Committee</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Risk Monitoring and Integrated Governance Committee</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">ASEAN Corporate Governance Scorecard</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Independence Statement</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">News & Events</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">News & Events</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Regulatory Filings</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">IR Events</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Stock Information</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Stock Information</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Interactive Chart</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Analyst Coverage</a></div>
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">Investor FAQ</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="group py-1">
                        <a href="#" class="hover:text-brandOrange transition-colors">Contact</a>
                        <div class="absolute top-full left-1/2 -translate-x-1/2 w-screen bg-white text-slate-800 shadow-2xl p-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 border-t border-slate-200 z-50">
                            <div class="max-w-[1440px] mx-auto grid grid-cols-12 gap-8 px-6 md:px-12">
                                <div class="col-span-4 border-r border-slate-100 pr-4 flex flex-col justify-start">
                                    <h3 class="text-3xl font-extrabold text-brandBlue tracking-tight">Contact</h3>
                                </div>
                                <div class="col-span-8 space-y-4 text-sm font-medium">
                                    <div class="border-b border-slate-100 pb-3"><a href="#" class="block text-slate-800 hover:text-brandBlue transition">IR Contact</a></div>
                                </div>
                            </div>
                        </div>
                    </div>

</nav>

<div class="hidden xl:flex items-center space-x-6 text-xs font-normal">
                    <div class="flex items-center space-x-2">
                        <a href="#" class="hover:text-brandOrange transition-colors">Indonesia</a>
                        <span class="opacity-40">|</span>
                        <a href="#" class="text-[#C68A12] font-semibold">English</a>
                    </div>
                    <button class="hover:text-brandOrange transition-colors pl-2 focus:outline-none cursor-pointer">
                        <i class="fa-solid fa-magnifying-glass text-sm"></i>
                    </button>
                </div>

</div>

<div class="w-full pt-2 pb-1 border-t border-slate-100 mt-1 flex items-center text-xs text-slate-700 font-normal">
                <nav class="flex items-center space-x-3" aria-label="Breadcrumb">
                    <a href="https://remark.co.id/micro/demo/" class="hover:text-brandOrange transition-colors">Home</a>
                    <i class="fa-solid fa-chevron-right text-[10px] text-slate-400"></i>
                    <a href="#" class="hover:text-brandOrange transition-colors">About</a>
                    <i class="fa-solid fa-chevron-right text-[10px] text-slate-400"></i>
                    <a href="#" class="text-slate-900 border-b border-slate-900 pb-0.5" aria-current="page">About Us</a>
                </nav>
            </div>

</div>

<div id="mobile-backdrop" class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-40 opacity-0 pointer-events-none transition-opacity duration-300 xl:hidden"></div>

<div id="mobile-menu" class="fixed inset-y-0 right-0 w-4/5 max-w-sm bg-slate-900 text-white shadow-2xl z-50 translate-x-full transition-transform duration-300 ease-in-out flex flex-col p-6 xl:hidden overflow-y-auto">
            <div class="flex items-center justify-between pb-6 border-b border-slate-800">
                <span class="text-xl font-black tracking-tight">WIKA Gedung</span>
                <button id="mobile-close-btn" class="text-xl text-slate-400 hover:text-white transition-colors cursor-pointer">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            
            <div class="flex-1 py-6 space-y-2 text-sm">
                
                <div class="border-b border-slate-800">
                    <button type="button" class="mobile-sub-toggle w-full flex items-center justify-between py-3 text-left hover:text-brandOrange transition-colors cursor-pointer">
                        <span>Home</span>
                        <i class="fa-solid fa-chevron-down text-xs transition-transform duration-300"></i>
                    </button>
                    <div class="mobile-sub-menu max-h-0 overflow-hidden transition-all duration-300 ease-in-out pl-4 space-y-2 bg-slate-950/40 rounded">
                        <a href="https://remark.co.id/micro/demo/" class="block py-2 text-slate-300 hover:text-white text-xs">Overview</a>
                    </div>
                </div>
            </div>
        </div>
</header>

<section class="relative w-full h-[280px] md:h-[340px] mt-[120px] bg-slate-900 overflow-hidden flex items-center justify-center">
    
    <div class="absolute inset-0 z-0">
        <img src="https://www.wikagedung.co.id/_next/image?url=https%3A%2F%2Fadmin-web.wikagedung.id%2Fimages%2Finformation%2F6a9791a4e9e5217883181165426fc8466f8d6591ba9ea5f7e8b65a40f8.jpg&w=3840&q=75" alt="Our Purpose Banner" class="w-full h-full object-cover object-center opacity-40">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-700/80 via-blue-600/70 to-blue-800/80 mix-blend-multiply"></div>
    </div>

<div class="relative z-10 max-w-[1440px] mx-auto px-6 md:px-12 text-center">
        <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight drop-shadow-md">
            Financial Result
        </h1>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileCloseBtn = document.getElementById('mobile-close-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileBackdrop = document.getElementById('mobile-backdrop');

function openMobileMenu() {
            if (mobileMenu && mobileBackdrop) {
                mobileMenu.classList.remove('translate-x-full');
                mobileBackdrop.classList.remove('opacity-0', 'pointer-events-none');
                document.body.style.overflow = 'hidden';
            }
        }

function closeMobileMenu() {
            if (mobileMenu && mobileBackdrop) {
                mobileMenu.classList.add('translate-x-full');
                mobileBackdrop.classList.add('opacity-0', 'pointer-events-none');
                document.body.style.overflow = '';
            }
        }

if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', openMobileMenu);
        if (mobileCloseBtn) mobileCloseBtn.addEventListener('click', closeMobileMenu);
        if (mobileBackdrop) mobileBackdrop.addEventListener('click', closeMobileMenu);

// Accordion Submenu Handler
        const subToggles = document.querySelectorAll('.mobile-sub-toggle');
        subToggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                const submenu = this.nextElementSibling;
                const icon = this.querySelector('i');

if (submenu.style.maxHeight && submenu.style.maxHeight !== "0px") {
                    submenu.style.maxHeight = "0px";
                    if (icon) icon.style.transform = "rotate(0deg)";
                } else {
                    subToggles.forEach(otherToggle => {
                        const otherSub = otherToggle.nextElementSibling;
                        const otherIcon = otherToggle.querySelector('i');
                        if (otherSub !== submenu) {
                            otherSub.style.maxHeight = "0px";
                            if (otherIcon) otherIcon.style.transform = "rotate(0deg)";
                        }
                    });

submenu.style.maxHeight = submenu.scrollHeight + "px";
                    if (icon) icon.style.transform = "rotate(180deg)";
                }
            });
        });
    });
</script>

<div class="financial-wg w-full bg-white text-slate-800 min-h-screen font-sans">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20">

<header class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12 pb-8 border-b border-slate-100">
            <div>
                <div class="flex items-center gap-3 mb-3">
                    <div class="px-3.5 py-1.5 rounded-full bg-amber-50 text-amber-700 text-xs font-semibold tracking-wider uppercase border border-amber-200/60 shadow-2xs">
                        WEGE Investor Relations
                    </div>
                    <span class="text-xs text-emerald-700 font-medium flex items-center gap-1.5 bg-emerald-50/80 px-3 py-1.5 rounded-full border border-emerald-200/60">
                        <i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-600"></i> Resmi & Terverifikasi OJK
                    </span>
                </div>
                <h1 class="text-3xl sm:text-5xl font-extrabold tracking-tight text-slate-900 flex items-center gap-3">
                    Laporan Keuangan <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-yellow-600 to-amber-700">WEGE</span>
                </h1>
                <p class="text-slate-500 mt-3 max-w-2xl text-base sm:text-lg leading-relaxed">
                    Akses transparan laporan keuangan triwulanan, tahunan, serta dokumen XBRL resmi PT Wijaya Karya Bangunan Gedung Tbk.
                </p>
            </div>

<div class="flex items-center gap-3 self-start md:self-auto">
                <a href="#quick-summary" class="inline-flex items-center gap-2.5 px-6 py-3.5 rounded-xl bg-gradient-to-r from-amber-500 to-yellow-600 text-white font-medium text-sm shadow-md shadow-amber-500/15 hover:shadow-lg hover:shadow-amber-500/25 transition-all duration-300 transform hover:-translate-y-0.5">
                    <i data-lucide="download-cloud" class="w-4 h-4"></i> Unduh Ringkasan
                </a>
            </div>
        </header>

<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12" id="quick-summary">
            
            <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-xs hover:shadow-md hover:border-amber-300 transition-all duration-300 relative overflow-hidden group">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Total Dokumen Arsip</span>
                    <div class="p-2.5 rounded-xl bg-amber-50 text-amber-600 border border-amber-100">
                        <i data-lucide="file-stack" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="text-3xl font-extrabold text-slate-900" id="statTotalDocs">24 File</div>
                <div class="text-xs text-emerald-600 mt-2.5 flex items-center gap-1.5 font-semibold bg-emerald-50/50 py-1 px-2 rounded-md w-fit">
                    <i data-lucide="trending-up" class="w-3.5 h-3.5"></i> Tahun 2021 - 2026 Lengkap
                </div>
            </div>

<div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-xs hover:shadow-md hover:border-blue-300 transition-all duration-300 relative overflow-hidden group">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Periode Aktif</span>
                    <div class="p-2.5 rounded-xl bg-blue-50 text-blue-600 border border-blue-100">
                        <i data-lucide="calendar-range" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="text-3xl font-extrabold text-slate-900">6M 2026</div>
                <div class="text-xs text-slate-500 mt-2.5 flex items-center gap-1.5 font-medium">
                    <i data-lucide="clock" class="w-3.5 h-3.5 text-slate-400"></i> Pembaruan: 31 Jul 2026
                </div>
            </div>

<div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-xs hover:shadow-md hover:border-purple-300 transition-all duration-300 relative overflow-hidden group">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Format Dokumen</span>
                    <div class="p-2.5 rounded-xl bg-purple-50 text-purple-600 border border-purple-100">
                        <i data-lucide="file-badge" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="text-3xl font-extrabold text-slate-900">PDF & XBRL</div>
                <div class="text-xs text-slate-500 mt-2.5 flex items-center gap-1.5 font-medium">
                    <i data-lucide="check" class="w-3.5 h-3.5 text-purple-500"></i> Standar pelaporan BEI / IDX
                </div>
            </div>

<div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-xs hover:shadow-md hover:border-emerald-300 transition-all duration-300 relative overflow-hidden group">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Status Audit</span>
                    <div class="p-2.5 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100">
                        <i data-lucide="award" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="text-lg font-extrabold text-slate-900 mt-1 leading-snug">Wajar Tanpa Pengecualian</div>
                <div class="text-xs text-emerald-600 mt-1.5 font-semibold">
                    Opini Auditor Independen
                </div>
            </div>
        </section>

<section class="mb-10">
            <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 bg-slate-50/80 p-4 sm:p-5 rounded-2xl border border-slate-200/80 backdrop-blur-sm">
                
                
                <div class="relative flex items-center gap-1.5 overflow-x-auto pb-2 lg:pb-0 no-scrollbar bg-slate-200/60 p-1.5 rounded-xl">
                    <button onclick="filterYear('2026')" class="year-tab px-5 py-2.5 rounded-lg text-sm font-bold transition-all duration-300 ease-out shrink-0 text-slate-700 hover:text-slate-900 relative z-10" data-year="2026">2026</button>
                    <button onclick="filterYear('2025')" class="year-tab px-5 py-2.5 rounded-lg text-sm font-bold transition-all duration-300 ease-out shrink-0 text-slate-700 hover:text-slate-900 relative z-10" data-year="2025">2025</button>
                    <button onclick="filterYear('2024')" class="year-tab px-5 py-2.5 rounded-lg text-sm font-bold transition-all duration-300 ease-out shrink-0 text-slate-700 hover:text-slate-900 relative z-10" data-year="2024">2024</button>
                    <button onclick="filterYear('2023')" class="year-tab px-5 py-2.5 rounded-lg text-sm font-bold transition-all duration-300 ease-out shrink-0 text-slate-700 hover:text-slate-900 relative z-10" data-year="2023">2023</button>
                    <button onclick="filterYear('2022')" class="year-tab px-5 py-2.5 rounded-lg text-sm font-bold transition-all duration-300 ease-out shrink-0 text-slate-700 hover:text-slate-900 relative z-10" data-year="2022">2022</button>
                    <button onclick="filterYear('2021')" class="year-tab px-5 py-2.5 rounded-lg text-sm font-bold transition-all duration-300 ease-out shrink-0 text-slate-700 hover:text-slate-900 relative z-10" data-year="2021">2021</button>
                </div>

<div class="relative w-full lg:w-80">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-slate-400">
                        <i data-lucide="search" class="w-4 h-4"></i>
                    </span>
                    <input type="text" id="searchInput" oninput="handleSearch()" placeholder="Cari laporan, XBRL, 3M, 6M..." class="w-full pl-11 pr-10 py-3 rounded-xl bg-white border border-slate-300 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 shadow-2xs transition-all duration-200">
                    <button id="clearSearch" onclick="resetSearch()" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-slate-600 hidden transition-colors">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
        </section>

<main class="space-y-4" id="financialContainer">
            
        </main>

<div id="emptyState" class="hidden text-center py-20 bg-slate-50/50 border border-slate-200/80 rounded-2xl mt-4">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 flex items-center justify-center text-slate-400 border border-slate-200">
                <i data-lucide="file-search" class="w-8 h-8"></i>
            </div>
            <h3 class="text-lg font-bold text-slate-800">Tidak ada dokumen ditemukan</h3>
            <p class="text-sm text-slate-500 mt-1 max-w-sm mx-auto">Coba sesuaikan kata kunci pencarian atau pilih tahun laporan keuangan yang berbeda.</p>
            <button onclick="resetSearch()" class="mt-5 px-5 py-2.5 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-xl text-sm shadow-sm transition-all duration-200">Reset Pencarian</button>
        </div>

<div id="toastNotification" class="fixed bottom-6 right-6 z-50 transform translate-y-24 opacity-0 transition-all duration-300 bg-slate-900 text-white px-5 py-3.5 rounded-2xl shadow-xl border border-slate-800 flex items-center gap-3.5">
            <div class="p-2.5 rounded-xl bg-amber-500 text-slate-950 shadow-sm">
                <i data-lucide="arrow-down-to-line" class="w-4 h-4"></i>
            </div>
            <div>
                <p class="text-xs font-semibold text-amber-400">Mengunduh Dokumen...</p>
                <p id="toastFilename" class="text-sm font-medium text-slate-100">Laporan_Keuangan.pdf</p>
            </div>
        </div>

<footer class="mt-20 text-center text-xs text-slate-400 border-t border-slate-100 pt-8">
            <p>&copy; 2026 PT Wijaya Karya Bangunan Gedung Tbk. All rights reserved. Professional Investor Relations Portal.</p>
        </footer>

</div>
</div>

let currentActiveYear = "2026";
    let searchQuery = "";

document.addEventListener("DOMContentLoaded", () => {
        filterYear(currentActiveYear);
        lucide.createIcons();
    });

function resetSearch() {
        document.getElementById("searchInput").value = "";
        searchQuery = "";
        document.getElementById("clearSearch").classList.add("hidden");
        renderFinancialData(currentActiveYear);
    }

function renderFinancialData(year, query = "") {
        const container = document.getElementById("financialContainer");
        const emptyState = document.getElementById("emptyState");
        container.innerHTML = "";

let categories = financialData[year] || [];

if (query) {
            let matchedCategories = [];
            Object.keys(financialData).forEach(y => {
                financialData[y].forEach(cat => {
                    const matchedItems = cat.items.filter(item => 
                        item.title.toLowerCase().includes(query) || 
                        cat.category.toLowerCase().includes(query) ||
                        y.includes(query)
                    );
                    if (matchedItems.length > 0) {
                        matchedCategories.push({
                            ...cat,
                            category: `${cat.category} (${y})`,
                            items: matchedItems
                        });
                    }
                });
            });
            categories = matchedCategories;
        }

if (categories.length === 0) {
            emptyState.classList.remove("hidden");
            return;
        } else {
            emptyState.classList.add("hidden");
        }

categories.forEach((cat, index) => {
            const isOpen = index === 0;
            const cardId = `accordion-${year}-${index}`;
            
            let itemsHtml = "";
            cat.items.forEach(item => {
                const isXbrl = item.type === "XBRL";
                const badgeColor = isXbrl ? "bg-purple-50 text-purple-700 border-purple-200/80" : "bg-red-50 text-red-700 border-red-200/80";
                const iconName = isXbrl ? "file-code" : "file-text";

itemsHtml += `
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-4.5 rounded-xl bg-slate-50/60 hover:bg-slate-100/80 transition-all duration-200 gap-4 border border-slate-200/60">
                        <div class="flex items-start sm:items-center gap-4">
                            <div class="p-3 rounded-xl ${badgeColor} border shrink-0 shadow-2xs">
                                <i data-lucide="${iconName}" class="w-5 h-5"></i>
                            </div>
                            <div>
                                <h4 class="text-sm sm:text-base font-semibold text-slate-900">${item.title}</h4>
                                <div class="flex items-center gap-3 mt-1 text-xs text-slate-500">
                                    <span class="flex items-center gap-1 font-medium"><i data-lucide="calendar" class="w-3.5 h-3.5 text-slate-400"></i> Rilis: ${item.date}</span>
                                    <span class="inline-block w-1 h-1 rounded-full bg-slate-300"></span>
                                    <span class="font-semibold text-slate-700">${item.size}</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2.5 self-end sm:self-auto">
                            <button onclick="previewDocument('${item.title}')" class="px-4 py-2 rounded-xl bg-white border border-slate-200/80 hover:bg-slate-100 text-slate-700 text-xs font-semibold transition-all duration-200 flex items-center gap-1.5 shadow-2xs">
                                <i data-lucide="eye" class="w-3.5 h-3.5 text-slate-500"></i> Pratinjau
                            </button>
                            <button onclick="downloadDocument('${item.title}', '${item.size}')" class="px-4.5 py-2 rounded-xl bg-gradient-to-r from-amber-500 to-yellow-600 hover:opacity-95 text-white text-xs font-semibold shadow-sm transition-all duration-200 flex items-center gap-1.5">
                                <i data-lucide="download" class="w-3.5 h-3.5"></i> Unduh ${item.type}
                            </button>
                        </div>
                    </div>
                `;
            });

lucide.createIcons();
    }

function renderAllYearsSearch(query) {
        renderFinancialData(currentActiveYear, query);
    }

function downloadDocument(title, size) {
        const toast = document.getElementById("toastNotification");
        const filenameEl = document.getElementById("toastFilename");
        filenameEl.textContent = `${title} (${size})`;
        
        toast.classList.remove("translate-y-24", "opacity-0");
        toast.classList.add("translate-y-0", "opacity-100");

setTimeout(() => {
            toast.classList.remove("translate-y-0", "opacity-100");
            toast.classList.add("translate-y-24", "opacity-0");
        }, 3500);
    }

function previewDocument(title) {
        alert(`Membuka mode pratinjau dokumen:nn"${title}"nnDokumen akan ditampilkan dalam viewer aman.`);
    }
</script>

<footer class="footer-wg relative bg-[#0085CA] text-white font-sans antialiased overflow-hidden pt-16 pb-8 px-6 md:px-12 lg:px-20">
    
    
    <div class="absolute inset-0 opacity-10 pointer-events-none overflow-hidden">
        <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 500" preserveAspectRatio="none">
            <path fill="none" stroke="#ffffff" stroke-width="2" d="M0,160 C320,300 420,50 740,250 C1060,450 1220,100 1440,200"></path>
            <path fill="none" stroke="#ffffff" stroke-width="1.5" d="M0,260 C320,400 420,150 740,350 C1060,550 1220,200 1440,300"></path>
            <path fill="none" stroke="#ffffff" stroke-width="1" d="M0,60 C320,200 420,-50 740,150 C1060,350 1220,0 1440,100"></path>
        </svg>
    </div>

<p class="text-sm text-sky-100 leading-relaxed pr-4">
                    PT Wijaya Karya Bangunan Gedung Tbk.<br>
                    WIKA Tower II, Lt. 14–15<br>
                    Jl. DI. Panjaitan Kav. 10, Jakarta Timur 13340
                </p>

<div class="space-y-3 text-sm text-sky-100">
                    <a href="mailto:corsec@wikagedung.id" class="flex items-center gap-3 hover:text-white transition-colors">
                        <i class="fa-solid fa-envelope text-base w-5"></i>
                        <span>Email: corsec@wikagedung.id</span>
                    </a>
                    <a href="tel:+622185909003" class="flex items-center gap-3 hover:text-white transition-colors">
                        <i class="fa-solid fa-phone text-base w-5"></i>
                        <span>Phone: +6221-8590-9003</span>
                    </a>
                    <a href="#" class="flex items-center gap-3 hover:text-white transition-colors">
                        <i class="fa-solid fa-comment-dots text-base w-5"></i>
                        <span>Chatbot GIVA</span>
                    </a>
                </div>
            </div>

<div class="lg:col-span-2 space-y-4">
                <h4 class="text-xs font-bold tracking-widest uppercase text-white">Company Info</h4>
                <ul class="space-y-2.5 text-sm text-sky-100">
                    <li><a href="#" class="hover:text-white hover:underline transition-all">About Us</a></li>
                    <li><a href="#" class="hover:text-white hover:underline transition-all">Awards & Certificates</a></li>
                    <li><a href="#" class="hover:text-white hover:underline transition-all">Vission & Mission</a></li>
                </ul>
            </div>

<div class="lg:col-span-2 space-y-4">
                <h4 class="text-xs font-bold tracking-widest uppercase text-white">Sustainability</h4>
                <ul class="space-y-2.5 text-sm text-sky-100">
                    <li><a href="#" class="hover:text-white hover:underline transition-all">Corporate Social Responsibility</a></li>
                </ul>
            </div>

<div class="lg:col-span-2 space-y-4">
                <h4 class="text-xs font-bold tracking-widest uppercase text-white">Media</h4>
                <ul class="space-y-2.5 text-sm text-sky-100">
                    <li><a href="#" class="hover:text-white hover:underline transition-all">Press Activities</a></li>
                    <li><a href="#" class="hover:text-white hover:underline transition-all">News</a></li>
                    <li><a href="#" class="hover:text-white hover:underline transition-all">Press Release</a></li>
                    <li><a href="#" class="hover:text-white hover:underline transition-all">Ebook</a></li>
                </ul>
            </div>

<div class="lg:col-span-2 space-y-6">
                
                 <div class="space-y-3">
                    <h4 class="text-xs font-bold tracking-widest uppercase text-white">Certificate</h4>
                    <div class="flex items-center gap-3">
                        
                       <div class="bg-white p-1.5 rounded-lg shadow-sm w-24 h-14 flex items-center justify-center overflow-hidden">
    <img src="https://www.wikagedung.co.id/_next/image?url=%2Fimages%2Fbsi-verified%2Fbim-verified-iso-19650-012019.png&w=384&q=75" alt="BSI ISO 19650-1 & 2" class="max-w-full max-h-full object-contain" />
</div>
                        
                       <div class="bg-white p-1.5 rounded-lg shadow-sm w-20 h-14 flex items-center justify-center overflow-hidden">
    <img src="https://www.wikagedung.co.id/_next/image?url=%2Fimages%2Fbsi-verified%2Fiso-iec-27001-tuv-nord.png&w=256&q=75" alt="TÜV NORD ISO/IEC 27001" class="max-w-full max-h-full object-contain" />
</div>
                    </div>
                </div>

<div class="space-y-3">
                    <h4 class="text-xs font-bold tracking-widest uppercase text-white">Social Media</h4>
                    <div class="flex flex-wrap gap-2.5">
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-linkedin-in text-sm"></i>
                        </a>
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-facebook-f text-sm"></i>
                        </a>
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-youtube text-sm"></i>
                        </a>
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-x-twitter text-sm"></i>
                        </a>
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-instagram text-sm"></i>
                        </a>
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-tiktok text-sm"></i>
                        </a>
                        <a href="#" class="w-9 h-9 rounded-full bg-white/10 hover:bg-white hover:text-[#0085CA] text-white flex items-center justify-center transition-all duration-300">
                            <i class="fa-brands fa-spotify text-sm"></i>
                        </a>
                    </div>
                </div>
            </div>

</div>

<div class="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-sky-100">
            <p>Copyright © 2026 - All rights reserved by PT Wijaya Karya Bangunan Gedung Tbk.</p>
            <div class="flex items-center gap-6">
                <a href="#" class="hover:text-white transition-colors">Terms Conditions</a>
                <a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
            </div>
        </div>

</div>

<button id="footerWgScrollTopBtn" aria-label="Scroll to top" class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-slate-900 text-white shadow-2xl flex items-center justify-center opacity-0 invisible translate-y-4 hover:bg-white hover:text-[#0085CA] hover:scale-110 transition-all duration-300 border border-white/20 cursor-pointer">
        <i class="fa-solid fa-arrow-up text-base"></i>
    </button>
</footer>

if (scrollTopBtn) {
            // Munculkan tombol saat halaman di-scroll ke bawah sejauh 300px
            window.addEventListener("scroll", function () {
                if (window.scrollY > 300) {
                    scrollTopBtn.classList.remove("opacity-0", "invisible", "translate-y-4");
                    scrollTopBtn.classList.add("opacity-100", "visible", "translate-y-0");
                } else {
                    scrollTopBtn.classList.remove("opacity-100", "visible", "translate-y-0");
                    scrollTopBtn.classList.add("opacity-0", "invisible", "translate-y-4");
                }
            });

// Aksi klik untuk kembali smooth scroll ke atas halaman
            scrollTopBtn.addEventListener("click", function () {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
            });
        }
    });
</script>

<script>
        // 1. Header Scroll Shrink & Background Change Effect
        const header = document.getElementById('main-header');
        const stockWidget = document.getElementById('stock-widget');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 40) {
                header.classList.remove('bg-transparent', 'py-3', 'text-white');
                header.classList.add('bg-white/95', 'backdrop-blur-md', 'py-2', 'text-slate-800', 'shadow-md', 'border-b', 'border-slate-200');
                stockWidget.classList.remove('bg-white/10', 'border-white/20');
                stockWidget.classList.add('bg-slate-100', 'border-slate-200', 'text-slate-800');
            } else {
                header.classList.remove('bg-white/95', 'backdrop-blur-md', 'py-2', 'text-slate-800', 'shadow-md', 'border-b', 'border-slate-200');
                header.classList.add('bg-transparent', 'py-3', 'text-white');
                stockWidget.classList.remove('bg-slate-100', 'border-slate-200', 'text-slate-800');
                stockWidget.classList.add('bg-white/10', 'border-white/20');
            }
        });

// 2. Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileCloseBtn = document.getElementById('mobile-close-btn');
        const mobileMenu = document.getElementById('mobile-menu');

mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.remove('translate-x-full');
        });
        mobileCloseBtn.addEventListener('click', () => {
            mobileMenu.classList.add('translate-x-full');
        });

// 3. Stock Widget Real-Time Simulation
        function updateStockWidget() {
            const priceEl = document.getElementById('stock-price');
            let basePrice = 5300;
            let randomFluctuation = Math.floor(Math.random() * 20) - 10;
            let currentPrice = (basePrice + randomFluctuation) / 100;
            priceEl.innerText = `IDR ${currentPrice.toFixed(2)}`;
        }
        setInterval(updateStockWidget, 5000);

// 4. Hero Slider with Auto Slide, Circle Progress, and Controls
        const slides = document.querySelectorAll('.slider-item');
        const nextBtn = document.getElementById('next-btn');
        const prevBtn = document.getElementById('prev-btn');
        const slideCounter = document.getElementById('slide-counter');
        const progressRingPath = document.getElementById('progress-ring-path');

let currentIndex = 0;
        const totalSlides = slides.length;
        const slideIntervalTime = 6000;
        let timer;
        let progressInterval;
        let startTime;

function setProgressCircle(duration) {
            clearInterval(progressInterval);
            startTime = Date.now();
            
            progressInterval = setInterval(() => {
                let elapsed = Date.now() - startTime;
                let progress = (elapsed / duration) * 100;
                
                if (progress >= 100) {
                    progress = 100;
                }
                
                let strokeVal = 100 - progress;
                progressRingPath.style.strokeDasharray = `${strokeVal}, 100`;

if (progress >= 100) {
                    clearInterval(progressInterval);
                }
            }, 50);
        }

function nextSlide() {
            currentIndex = (currentIndex + 1) % totalSlides;
            showSlide(currentIndex);
            resetTimer();
        }

function prevSlide() {
            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
            showSlide(currentIndex);
            resetTimer();
        }

function resetTimer() {
            clearInterval(timer);
            clearInterval(progressInterval);
            setProgressCircle(slideIntervalTime);
            timer = setInterval(nextSlide, slideIntervalTime);
        }

nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);

resetTimer();

// 5. WG2 Section Photo Slider & Auto Slide
        let wg2CurrentSlide = 0;
        const wg2TotalSlides = 2;
        const wg2SliderTrack = document.getElementById('wg2SliderTrack');
        const wg2Dots = document.querySelectorAll('.wg2-slider-dot');

setInterval(() => {
            wg2CurrentSlide = (wg2CurrentSlide + 1) % wg2TotalSlides;
            goToWg2Slide(wg2CurrentSlide);
        }, 5000);

// 6. Fade-In Section Animation on Scroll (Intersection Observer)
        document.addEventListener("DOMContentLoaded", function () {
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.15
            };

document.querySelectorAll('.fade-in-section').forEach(section => {
                observer.observe(section);
            });
        });
    </script>
</body>
</html>

URL Publik: https://remark.co.id/micro/demo/financial-results/