```php

<style>

/* =========================================================
   PRINCIPAL BRAND CARD
========================================================= */

.sup-principal-brand-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    min-height: 155px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all .3s ease;
    cursor: pointer;
}

.sup-principal-brand-card:hover {
    transform: translateY(-5px);
    border-color: #2563eb;
    box-shadow: 0 15px 35px rgba(15, 23, 42, .10);
}

.sup-principal-brand-logo {
    width: 100%;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.sup-principal-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.sup-principal-brand-card:hover
.sup-principal-brand-logo img {
    transform: scale(1.06);
}

.sup-principal-brand-name {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.3;
    transition: color .3s ease;
}

.sup-principal-brand-card:hover
.sup-principal-brand-name {
    color: #2563eb;
}


/* =========================================================
   SELECTED BRAND PRODUCT CARD
========================================================= */

.sup-brand-product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sup-brand-product-card:hover {
    transform: translateY(-5px);
    border-color: #2563eb;
    box-shadow: 0 15px 35px rgba(15, 23, 42, .10);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.sup-brand-product-image {
    position: relative;
    display: block;
    height: 250px;
    background: #fff;
    overflow: hidden;
}

.sup-brand-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 22px;
    transition: transform .4s ease;
}

.sup-brand-product-card:hover
.sup-brand-product-image img {
    transform: scale(1.05);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.sup-brand-product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}

.sup-brand-product-card:hover
.sup-brand-product-overlay {
    opacity: 1;
}

.sup-brand-product-overlay span {
    background: #fff;
    color: #1e293b;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   BRAND LABEL
========================================================= */

.sup-brand-product-label {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: #2563eb;
    color: #fff;
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.sup-brand-product-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.sup-brand-product-title {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
}

.sup-brand-product-title:hover {
    color: #2563eb;
}


/* =========================================================
   PRODUCT TAG
========================================================= */

.sup-brand-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 18px;
}

.sup-brand-product-tag {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    color: #475569;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   INQUIRY BUTTON
========================================================= */

.sup-brand-inquiry-button {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
    margin-top: auto;
}

.sup-brand-inquiry-button:hover {
    background: #b91c1c;
}


/* =========================================================
   DETAIL BUTTON
========================================================= */

.sup-brand-detail-button {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding: 9px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
    text-decoration: none;
}

.sup-brand-detail-button:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .sup-principal-brand-card {
        min-height: 140px;
        padding: 15px;
    }

    .sup-principal-brand-logo {
        height: 65px;
    }

    .sup-principal-brand-name {
        font-size: 10px;
    }

    .sup-brand-product-image {
        height: 220px;
    }

}

</style>


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="nafxNfK2zcTRu6NQO0Rp-f1xa0fJpRE5Q3WVkMHIkSk" />
    <meta name="csrf-token" content="OeeulFpFOnhw2TDDlxKUiT8oNhiAbvZ5jkMrf3Qc">
    <meta name="description" content="インドネシアで最高品質の溶接、切断、ロボット、産業オートメーション機器の総合ソリューションをご提供します。製造およびツーリングの信頼できるパートナーです。">
    <title>Sinar Unggul</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <link rel="icon" href="https://www.sinarunggul.com/images/favicon1.webp" type="image/webp">
    <link rel="shortcut icon" href="https://www.sinarunggul.com/images/favicon1.webp">
    <link rel="apple-touch-icon" href="https://www.sinarunggul.com/images/favicon1.webp">
    <link rel="manifest" href="https://www.sinarunggul.com/manifest.json">
    
    <link rel="preload" as="style" href="https://www.sinarunggul.com/build/assets/app-ZqYvRizg.css" /><link rel="preload" as="style" href="https://www.sinarunggul.com/build/assets/app-DvB2Xm2x.css" /><link rel="modulepreload" as="script" href="https://www.sinarunggul.com/build/assets/app-DmSD7Lqb.js" /><link rel="stylesheet" href="https://www.sinarunggul.com/build/assets/app-ZqYvRizg.css" /><link rel="stylesheet" href="https://www.sinarunggul.com/build/assets/app-DvB2Xm2x.css" /><script type="module" src="https://www.sinarunggul.com/build/assets/app-DmSD7Lqb.js"></script>        
</head>
<body>
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="インドネシアで最高品質の溶接、切断、ロボット、産業オートメーション機器の総合ソリューションをご提供します。製造およびツーリングの信頼できるパートナーです。">
    <title>Navigation Menu</title>

    <style>
    /* Transisi halus dan area aman hover untuk mega menu */
    .mega-menu {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        transform: translateY(10px);
        pointer-events: none;
    }

    .mega-menu-container:hover .mega-menu,
    .group:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* Memastikan mega menu melebar penuh mengikuti container utama tanpa merusak elemen lain */
    .mega-menu-container {
        position: static; 
    }

    .mega-menu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }

    /* Language dropdown */
    .language-dropdown {
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: all 0.2s ease;
        pointer-events: none;
    }

    .language-group:hover .language-dropdown,
    .language-group:focus-within .language-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .language-button {
        color: white;
        transition: color 0.3s ease;
    }
    
    #navbar.scrolled .language-button {
        color: #111827 !important;
    }
    
    #navbar.scrolled .language-button:hover {
        color: #dc2626 !important;
    }
    /* Fix desktop language dropdown position */
    @media (min-width: 768px) {
        .language-dropdown {
            top: calc(100% + 5px) !important;
            z-index: 9999 !important;
        }
    }
</style>
</head>

<body class="bg-gray-900">

<nav id="navbar"
     class="fixed top-0 left-0 w-full z-50 bg-black/10 border-gray-800 transition-all duration-300">

    <!-- MENU DESKTOP -->
    <div class="container mx-auto px-4 md:px-6">

        <div class="flex items-center justify-between h-20">

            <!-- LOGO -->
            <div class="flex-shrink-0">

                <a href="/"
                   class="text-white font-bold text-2xl uppercase tracking-tighter">

                    <img src="https://www.sinarunggul.com/images/logo-full.webp"
                         alt="sinar unggul"
                         class="h-12 md:h-16">

                </a>

            </div>


            <!-- DESKTOP MENU -->
            <div class="hidden md:flex items-center space-x-8 h-full">

                <!-- AUTOMATION MENU -->
                <div class="group mega-menu-container h-full flex items-center">
    
                    <a href="/automation" class="menu-link group-hover:text-red-500 font-medium flex items-center gap-1">
                        オートメーション
                        <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </a>


                    <div class="mega-menu mega-menu-wrapper bg-black/90 border-t border-gray-800 py-10 shadow-2xl">
                        <div class="container mx-auto px-10 grid grid-cols-3 gap-8">
                            <div>
                                <a href="/automation/robots"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">
                                    ロボット
                                </a>
                                <div class="space-y-3">
                                    <a href="/automation/robots/welding-robot/"
                                       class="block text-gray-400 hover:text-white transition">
                                        溶接ロボット
                                    </a>
                                    <a href="/automation/robots/handling-robot/"
                                       class="block text-gray-400 hover:text-white transition">

                                        ハンドリングロボット

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/automation/robot-accessories"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    ロボットアクセサリー

                                </a>

                                <div class="space-y-3">

                                    <a href="/automation/robot-accessories/positioner-1-axis/"
                                       class="block text-gray-400 hover:text-white transition">

                                        1軸ポジショナー

                                    </a>

                                    <a href="/automation/robot-accessories/positioner-2-axis/"
                                       class="block text-gray-400 hover:text-white transition">

                                        2軸ポジショナー

                                    </a>

                                    <a href="/automation/robot-accessories/slider/"
                                       class="block text-gray-400 hover:text-white transition">

                                        スライダー

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/automation/cobots"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    協働ロボット

                                </a>

                                <div class="space-y-3">

                                    <a href="/automation/cobots/otc-cobots/"
                                       class="block text-gray-400 hover:text-white transition">

                                        OTC協働ロボット

                                    </a>

                                    <a href="/automation/cobots/dobot/"
                                       class="block text-gray-400 hover:text-white transition">

                                        DOBOT

                                    </a>

                                    <a href="/automation/cobots/cobot-accessories/"
                                       class="block text-gray-400 hover:text-white transition">

                                       アクセサリー

                                    </a>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>


                <!-- CUTTING MENU -->
                <div class="group h-full flex items-center">

                    <button
                        onclick="window.location.href='/cutting/'"
                        class="menu-link group-hover:text-red-500 font-medium flex items-center gap-1">

                        切断

                        <svg
                            class="w-4 h-4 transition-transform group-hover:rotate-180"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24">

                            <path d="M19 9l-7 7-7-7"/>

                        </svg>

                    </button>


                    <div class="mega-menu absolute top-20 left-0 w-full
                                bg-black/90 border-gray-800 py-10 shadow-2xl">

                        <div class="container mx-auto px-10 grid grid-cols-2 gap-8">


                            <div>

                                <a href="/cutting/hypertherm"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    HYPERTHERM

                                </a>

                                <div class="space-y-3">

                                    <a href="/cutting/hypertherm/xpr-plasma/"
                                       class="block text-gray-400 hover:text-white transition">

                                        XPR Plasma

                                    </a>

                                    <a href="/cutting/hypertherm/maxpro/"
                                       class="block text-gray-400 hover:text-white transition">

                                        MAXPRO

                                    </a>

                                    <a href="/cutting/hypertherm/powermax/"
                                       class="block text-gray-400 hover:text-white transition">

                                        POWERMAX

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/cutting/ttmc-gantry"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    TTMC GANTRY

                                </a>

                                <div class="space-y-3">

                                    <a href="/cutting/ttmc-gantry/"
                                       class="block text-gray-400 hover:text-white transition">

                                        TT Series

                                    </a>

                                    <a href="/cutting/ttmc-gantry/"
                                       class="block text-gray-400 hover:text-white transition">

                                        TM Series

                                    </a>

                                </div>

                            </div>


                        </div>

                    </div>

                </div>


                <!-- WELDING MENU -->
                <div class="group h-full flex items-center">

                    <button
                        onclick="window.location.href='/welding'"
                        class="menu-link group-hover:text-red-500 font-medium flex items-center gap-1">

                        溶接

                        <svg
                            class="w-4 h-4 transition-transform group-hover:rotate-180"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24">

                            <path d="M19 9l-7 7-7-7"/>

                        </svg>

                    </button>


                    <div class="mega-menu absolute top-20 left-0 w-full
                                bg-black/90 border-gray-800 py-10 shadow-2xl">

                        <div class="container mx-auto px-10 grid grid-cols-3 gap-8">


                            <div>

                                <a href="/welding/otc-welbee"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    OTC WELBEE

                                </a>

                                <div class="space-y-3">

                                    <a href="/welding/otc-welbee/otc-welbee-mig-mag/"
                                       class="block text-gray-400 hover:text-white transition">

                                        MIG / MAG

                                    </a>

                                    <a href="/welding/otc-welbee/low-spatter/"
                                       class="block text-gray-400 hover:text-white transition">

                                        Low Spatter

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/welding/otc-welder"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    OTC WELDER

                                </a>

                                <div class="space-y-3">

                                    <a href="/welding/otc-welder/otc-mig-mag/"
                                       class="block text-gray-400 hover:text-white transition">

                                        MIG / MAG

                                    </a>

                                    <a href="/welding/otc-welder/otc-tig/"
                                       class="block text-gray-400 hover:text-white transition">

                                        TIG

                                    </a>

                                    <a href="/welding/otc-welder/otc-plasma/"
                                       class="block text-gray-400 hover:text-white transition">

                                        Plasma

                                    </a>

                                    <a href="/welding/otc-welder/otc-gouging/"
                                       class="block text-gray-400 hover:text-white transition">

                                        Gouging

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/welding/lorch-smart-welding"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    LORCH SMART 溶接

                                </a>

                                <div class="space-y-3">

                                    <a href="/welding/lorch-smart-welding/lorch-mig-mag/"
                                       class="block text-gray-400 hover:text-white transition">

                                        MIG / MAG

                                    </a>

                                    <a href="/welding/lorch-smart-welding/lorch-tig/"
                                       class="block text-gray-400 hover:text-white transition">

                                        TIG

                                    </a>

                                    <a href="/welding/lorch-smart-welding/lorch-mma/"
                                       class="block text-gray-400 hover:text-white transition">

                                        MMA

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/welding/blackbull-welder"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    BLACKBULL WELDER

                                </a>

                                <div class="space-y-3">

                                    <a href="/welding/blackbull-welder/blackbull-mig-mag/"
                                       class="block text-gray-400 hover:text-white transition">

                                        MIG / MAG

                                    </a>

                                    <a href="/welding/blackbull-welder/blackbull-tig/"
                                       class="block text-gray-400 hover:text-white transition">

                                        TIG

                                    </a>

                                    <a href="/welding/blackbull-welder/blackbull-mma"
                                       class="block text-gray-400 hover:text-white transition">

                                        MMA

                                    </a>

                                    <a href="/welding/blackbull-welder/blackbull-submerged-arc"
                                       class="block text-gray-400 hover:text-white transition">

                                        Submerged ARC

                                    </a>

                                </div>

                            </div>


                            <div>

                                <a href="/welding/abicor-binzel"
                                   class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                                    ABICOR BINZEL

                                </a>

                                <div class="space-y-3">

                                    <a href="/welding/abicor-binzel/abicor-binzel-fume-extraction-torches"
                                       class="block text-gray-400 hover:text-white transition">

                                        Fume Extraction Torches

                                    </a>

                                </div>

                            </div>


                        </div>

                    </div>

                </div>


                <!-- PRODUCTS MENU -->
                <div class="group h-full flex items-center">

                    <button
                        onclick="window.location.href='/products'"
                        class="menu-link group-hover:text-red-500 font-medium flex items-center gap-1">

                        製品

                        <svg
                            class="w-4 h-4 transition-transform group-hover:rotate-180"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24">

                            <path d="M19 9l-7 7-7-7"/>

                        </svg>

                    </button>


                    <div class="mega-menu absolute top-20 left-0 w-full
                                bg-black/90 border-gray-800 py-10 shadow-2xl">

                        <div class="container mx-auto px-10 grid grid-cols-3 gap-8">


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    溶接
                                </h3>

                                <div class="space-y-3">

                                    <a href="/brand/otc-daihen/"
                                       class="block text-gray-400 hover:text-white transition">
                                        OTC Daihen
                                    </a>

                                    <a href="/brand/lorch"
                                       class="block text-gray-400 hover:text-white transition">
                                        Lorch
                                    </a>

                                    <a href="/brand/nelson/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Nelson
                                    </a>

                                    <a href="/brand/abicor-binzel/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Abicor Binzel
                                    </a>

                                    <a href="/brand/blackbull/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Blackbull
                                    </a>

                                </div>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    切断
                                </h3>

                                <div class="space-y-3">

                                    <a href="/brand/hypertherm/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Hypertherm
                                    </a>

                                    <a href="/brand/kyocera/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Kyocera
                                    </a>

                                </div>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    CONSUMABLE
                                </h3>

                                <div class="space-y-3">

                                    <a href="/brand/kiswel/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Kiswel
                                    </a>

                                    <a href="/brand/antech/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Antech
                                    </a>

                                </div>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    POWER TOOLS
                                </h3>

                                <div class="space-y-3">

                                    <a href="/brand/ryobi/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Ryobi
                                    </a>

                                    <a href="/brand/dewalt/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Dewalt
                                    </a>

                                    <a href="/brand/stanley/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Stanley
                                    </a>

                                    <a href="/brand/bds/"
                                       class="block text-gray-400 hover:text-white transition">
                                        BDS
                                    </a>

                                    <a href="/brand/force-arc/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Force Arc
                                    </a>

                                </div>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    HAND TOOLS
                                </h3>

                                <div class="space-y-3">

                                    <a href="/brand/knipex/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Knipex
                                    </a>

                                    <a href="/brand/wera/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Wera
                                    </a>

                                    <a href="/brand/sata/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Sata
                                    </a>

                                    <a href="/brand/workpro/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Workpro
                                    </a>

                                </div>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    ABRASIVE
                                </h3>

                                <div class="space-y-3">

                                    <a href="/brand/pferd/"
                                       class="block text-gray-400 hover:text-white transition">
                                        Pferd
                                    </a>

                                </div>

                            </div>


                        </div>

                    </div>

                </div>


                <!-- COMPANY MENU -->
                <div class="group h-full flex items-center">

                    <button
                        onclick="window.location.href='/company'"
                        class="menu-link group-hover:text-red-500 font-medium flex items-center gap-1">

                        会社情報

                        <svg
                            class="w-4 h-4 transition-transform group-hover:rotate-180"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24">

                            <path d="M19 9l-7 7-7-7"/>

                        </svg>

                    </button>


                    <div class="mega-menu absolute top-20 left-0 w-full
                                bg-black/90 border-gray-800 py-10 shadow-2xl">

                        <div class="container mx-auto px-10 grid grid-cols-2 gap-8">


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    <a href="/company">会社概要</a>
                                </h3>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    <a href="/company/partner/">パートナー</a>
                                </h3>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    <a href="/company/news/">ニュース</a>
                                </h3>

                            </div>


                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">
                                    <a href="/company/jobs/">求人情報</a>
                                </h3>

                            </div>


                        </div>

                    </div>

                </div>


                <!-- CONTACT MENU -->
                <div class="group h-full flex items-center">

                    <button
                        onclick="window.location.href='/contact'"
                        class="menu-link group-hover:text-red-500 font-medium flex items-center gap-1">

                        お問い合わせ

                        <svg
                            class="w-4 h-4 transition-transform group-hover:rotate-180"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24">

                            <path d="M19 9l-7 7-7-7"/>

                        </svg>

                    </button>


                    <div class="mega-menu absolute top-20 left-0 w-full
                                bg-black/90 border-gray-800 py-10 shadow-2xl">

                        <div class="container mx-auto px-10 grid grid-cols-2 gap-8">

                            <div>

                                <h3 class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest">

                                    <a href="/contact/">
                                        お問い合わせ
                                    </a>

                                </h3>

                            </div>

                        </div>

                    </div>

                </div>
                
                <!-- LANGUAGE SWITCHER -->
                <div class="relative language-group h-full flex items-center">

                    <button
                        type="button"
                        id="language-button"
                        class="language-button text-white font-medium flex items-center gap-2
                               hover:text-red-500 transition cursor-pointer
                               focus:outline-none">
                    
                        🌐 JA
                    
                        <svg
                            class="w-4 h-4 transition-transform language-arrow"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24">
                    
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M19 9l-7 7-7-7"/>
                    
                        </svg>
                    
                    </button>


                    <!-- LANGUAGE DROPDOWN -->
                    <div
                        class="language-dropdown absolute right-0 top-full
                               w-44 bg-black border border-gray-700
                               rounded-lg shadow-2xl z-[9999] overflow-hidden">
                        <a href="https://www.sinarunggul.com/products?lang=en"
                           class="flex items-center gap-3 px-4 py-3
                                  text-white hover:bg-red-600 transition">
                            <span>🇬🇧</span>
                            <span>English</span>
                        </a>
                        <a href="https://www.sinarunggul.com/products?lang=id"
                           class="flex items-center gap-3 px-4 py-3
                                  text-white hover:bg-red-600 transition">
                            <span>🇮🇩</span>
                            <span>Indonesia</span>
                        </a>
                        <a href="https://www.sinarunggul.com/products?lang=ja"
                           class="flex items-center gap-3 px-4 py-3
                                  text-white hover:bg-red-600 transition">
                            <span>🇯🇵</span>
                            <span>日本語</span>
                        </a>
                        <a href="https://www.sinarunggul.com/products?lang=zh"
                           class="flex items-center gap-3 px-4 py-3
                                  text-white hover:bg-red-600 transition">
                            <span>🇨🇳</span>
                            <span>中文</span>
                        </a>
                    </div>
                </div>


            </div>


            <!-- MOBILE BUTTON -->
            <div class="md:hidden">

                <button
                    id="mobile-menu-button"
                    class="text-white focus:outline-none p-2">

                    <svg
                        id="hamburger-icon"
                        class="w-8 h-8"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">

                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M4 6h16M4 12h16m-7 6h7"/>

                    </svg>

                </button>

            </div>

        </div>

    </div>


    <!-- MOBILE MENU -->
    <div
        id="mobile-menu"
        class="hidden md:hidden bg-black w-full border-t border-gray-800
               overflow-y-auto max-h-screen pb-10">

        <div class="px-6 py-2">


            <!-- LANGUAGE MOBILE -->
            <div class="py-4 border-b border-gray-800">

                <div class="text-white font-bold mb-3">
                    言語
                </div>


                <div class="grid grid-cols-2 gap-2">

                    <a href="https://www.sinarunggul.com/products?lang=en"
                       class="px-3 py-2 bg-gray-800 text-white rounded hover:bg-red-600 transition">

                        🇬🇧 English

                    </a>


                    <a href="https://www.sinarunggul.com/products?lang=id"
                       class="px-3 py-2 bg-gray-800 text-white rounded hover:bg-red-600 transition">

                        🇮🇩 Indonesia

                    </a>


                    <a href="https://www.sinarunggul.com/products?lang=ja"
                       class="px-3 py-2 bg-gray-800 text-white rounded hover:bg-red-600 transition">

                        🇯🇵 日本語

                    </a>


                    <a href="https://www.sinarunggul.com/products?lang=zh"
                       class="px-3 py-2 bg-gray-800 text-white rounded hover:bg-red-600 transition">

                        🇨🇳 中文

                    </a>

                </div>

            </div>


            <!-- AUTOMATION MOBILE -->
            <div class="border-b border-gray-800">

                <button
                    onclick="toggleMobileSub('mob-automation')"
                    class="w-full flex justify-between items-center py-4
                           text-white font-bold text-left">

                    オートメーション

                    <svg
                        id="arrow-mob-automation"
                        class="w-4 h-4 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">

                        <path d="M19 9l-7 7-7-7"/>

                    </svg>

                </button>


                <div
                    id="mob-automation"
                    class="hidden pb-4 pl-4 space-y-4">

                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/automation/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            すべてのオートメーション

                        </a>

                    </div>


                    <a href="/automation/robots"
                       class="text-red-500 text-xs font-bold uppercase tracking-widest mt-2 inline-block">

                        ロボット

                    </a>

                    <a href="/automation/robots/welding-robot/"
                       class="block text-gray-400 py-1">

                        溶接

                    </a>

                    <a href="/automation/robots/handling-robot/"
                       class="block text-gray-400 py-1">

                        ハンドリングロボット

                    </a>


                    <a href="/automation/robot-accessories"
                       class="text-red-500 text-xs font-bold uppercase tracking-widest mt-2 inline-block">

                        ロボットアクセサリー

                    </a>

                    <a href="/automation/robot-accessories/positioner-1-axis/"
                       class="block text-gray-400 py-1">

                        1軸ポジショナー

                    </a>

                    <a href="/automation/robot-accessories/positioner-2-axis/"
                       class="block text-gray-400 py-1">

                        2軸ポジショナー

                    </a>

                    <a href="/automation/robot-accessories/slider/"
                       class="block text-gray-400 py-1">

                        スライダー

                    </a>


                    <a href="/automation/cobots"
                       class="text-red-500 text-xs font-bold uppercase tracking-widest mt-2 inline-block">

                        協働ロボット

                    </a>

                    <a href="/automation/cobots/otc-cobots/"
                       class="block text-gray-400 py-1">

                        OTC協働ロボット

                    </a>

                    <a href="/automation/cobots/dobot/"
                       class="block text-gray-400 py-1">

                        Dobot

                    </a>

                    <a href="/automation/cobots/cobot-accessories/"
                       class="block text-gray-400 py-1">

                        アクセサリー

                    </a>

                </div>

            </div>


            <!-- CUTTING MOBILE -->
            <div class="border-b border-gray-800">

                <button
                    onclick="toggleMobileSub('mob-cutting')"
                    class="w-full flex justify-between items-center py-4
                           text-white font-bold text-left">

                    切断

                    <svg
                        id="arrow-mob-cutting"
                        class="w-4 h-4 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">

                        <path d="M19 9l-7 7-7-7"/>

                    </svg>

                </button>


                <div
                    id="mob-cutting"
                    class="hidden pb-4 pl-4 space-y-3">

                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/cutting/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            すべての切断製品

                        </a>

                    </div>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/cutting/hypertherm/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            HYPERTHERM

                        </a>

                    </div>


                    <a href="/cutting/hypertherm/xpr-plasma"
                       class="block text-gray-400 py-1">

                        XPR Plasma

                    </a>

                    <a href="/cutting/hypertherm/maxpro"
                       class="block text-gray-400 py-1">

                        Maxpro

                    </a>

                    <a href="/cutting/hypertherm/powermax"
                       class="block text-gray-400 py-1">

                        Powermax

                    </a>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/cutting/ttmc-gantry/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            TTMC GANTRY

                        </a>

                    </div>


                    <a href="/cutting/ttmc-gantry/"
                       class="block text-gray-400 py-1">

                        TT Series

                    </a>

                    <a href="/cutting/ttmc-gantry/"
                       class="block text-gray-400 py-1">

                        TM Series

                    </a>

                </div>

            </div>


            <!-- WELDING MOBILE -->
            <div class="border-b border-gray-800">

                <button
                    onclick="toggleMobileSub('mob-welding')"
                    class="w-full flex justify-between items-center py-4
                           text-white font-bold text-left">

                    溶接

                    <svg
                        id="arrow-mob-welding"
                        class="w-4 h-4 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">

                        <path d="M19 9l-7 7-7-7"/>

                    </svg>

                </button>


                <div
                    id="mob-welding"
                    class="hidden pb-4 pl-4 space-y-3">


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/welding/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            すべての溶接製品

                        </a>

                    </div>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/welding/otc-welbee/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            OTC WELBEE

                        </a>

                    </div>


                    <a href="/welding/otc-welbee/otc-welbee-mig-mag/"
                       class="block text-gray-400 py-1">

                        MIG / MAG

                    </a>

                    <a href="/welding/otc-welbee/low-spatter/"
                       class="block text-gray-400 py-1">

                        Low Spatter

                    </a>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/welding/otc-welder/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            OTC WELDER

                        </a>

                    </div>


                    <a href="/welding/otc-welder/otc-mig-mag/"
                       class="block text-gray-400 py-1">

                        MIG / MAG

                    </a>

                    <a href="/welding/otc-welder/otc-tig/"
                       class="block text-gray-400 py-1">

                        TIG

                    </a>

                    <a href="/welding/otc-welder/otc-plasma/"
                       class="block text-gray-400 py-1">

                        PLASMA

                    </a>

                    <a href="/welding/otc-welder/otc-gouging/"
                       class="block text-gray-400 py-1">

                        GOUGING

                    </a>


                    <div>

                        <a href="/welding/lorch-smart-welding"
                           class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                            LORCH SMART WELDING

                        </a>

                        <div class="space-y-3">

                            <a href="/welding/lorch-smart-welding/lorch-mig-mag/"
                               class="block text-gray-400 hover:text-white transition">

                                MIG / MAG

                            </a>

                            <a href="/welding/lorch-smart-welding/lorch-tig/"
                               class="block text-gray-400 hover:text-white transition">

                                TIG

                            </a>

                            <a href="/welding/lorch-smart-welding/lorch-mma/"
                               class="block text-gray-400 hover:text-white transition">

                                MMA

                            </a>

                        </div>

                    </div>


                    <div>

                        <a href="/welding/blackbull-welder"
                           class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                            BLACKBULL WELDER

                        </a>

                        <div class="space-y-3">

                            <a href="/welding/blackbull-welder/blackbull-mig-mag/"
                               class="block text-gray-400 hover:text-white transition">

                                MIG / MAG

                            </a>

                            <a href="/welding/blackbull-welder/blackbull-tig/"
                               class="block text-gray-400 hover:text-white transition">

                                TIG

                            </a>

                            <a href="/welding/blackbull-welder/blackbull-mma"
                               class="block text-gray-400 hover:text-white transition">

                                MMA

                            </a>

                            <a href="/welding/blackbull-welder/blackbull-submerged-arc"
                               class="block text-gray-400 hover:text-white transition">

                                Submerged ARC

                            </a>

                        </div>

                    </div>


                    <div>

                        <a href="/welding/abicor-binzel"
                           class="text-red-600 font-bold mb-4 uppercase text-sm tracking-widest inline-block">

                            ABICOR BINZEL

                        </a>

                        <div class="space-y-3">

                            <a href="/welding/abicor-binzel/abicor-binzel-fume-extraction-torches"
                               class="block text-gray-400 hover:text-white transition">

                                Fume Extraction Torches

                            </a>

                        </div>

                    </div>


                </div>

            </div>


            <!-- PRODUCT MOBILE -->
            <div class="border-b border-gray-800">

                <button
                    onclick="toggleMobileSub('mob-product')"
                    class="w-full flex justify-between items-center py-4
                           text-white font-bold text-left">

                    製品

                    <svg
                        id="arrow-mob-product"
                        class="w-4 h-4 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">

                        <path d="M19 9l-7 7-7-7"/>

                    </svg>

                </button>


                <div
                    id="mob-product"
                    class="hidden pb-4 pl-4 space-y-3">


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/products/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            すべての製品

                        </a>

                    </div>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/welding/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            WELDING

                        </a>

                    </div>


                    <a href="/brand/otc-daihen/"
                       class="block text-gray-400 py-1">

                        OTC Daihen

                    </a>

                    <a href="/brand/lorch"
                       class="block text-gray-400 py-1">

                        LORCH

                    </a>

                    <a href="/brand/nelson/"
                       class="block text-gray-400 py-1">

                        NELSON

                    </a>

                    <a href="/brand/abicor-binzel/"
                       class="block text-gray-400 py-1">

                        Abicor-Binzel

                    </a>

                    <a href="/brand/blackbull/"
                       class="block text-gray-400 py-1">

                        Blackbull

                    </a>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="/cutting/"
                           class="block text-red-500 hover:text-red-700 py-1">

                            切断

                        </a>

                    </div>


                    <a href="/brand/hypertherm/"
                       class="block text-gray-400 py-1">

                        Hypertherm

                    </a>

                    <a href="/brand/kyocera/"
                       class="block text-gray-400 py-1">

                        Kyocera

                    </a>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="#"
                           class="block text-red-500 hover:text-red-700 py-1">

                            CONSUMABLE

                        </a>

                    </div>


                    <a href="/brand/kiswel/"
                       class="block text-gray-400 py-1">

                        Kiswel

                    </a>

                    <a href="/brand/Antech/"
                       class="block text-gray-400 py-1">

                        Antech

                    </a>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="#"
                           class="block text-red-500 hover:text-red-700 py-1">

                            POWER TOOLS

                        </a>

                    </div>


                    <a href="/brand/ryobi-tools/"
                       class="block text-gray-400 py-1">

                        Ryobi

                    </a>

                    <a href="/brand/dewalt/"
                       class="block text-gray-400 py-1">

                        Dewalt

                    </a>

                    <a href="/brand/stanley/"
                       class="block text-gray-400 py-1">

                        Stanley

                    </a>

                    <a href="/brand/bds/"
                       class="block text-gray-400 py-1">

                        BDS

                    </a>

                    <a href="/brand/force-arc/"
                       class="block text-gray-400 py-1">

                        Force Arc

                    </a>


                    <div class="text-xs font-bold uppercase tracking-widest mt-2">

                        <a href="#"
                           class="block text-red-500 hover:text-red-700 py-1">

                            HAND TOOLS

                        </a>

                    </div>


                    <a href="/brand/knipex/"
                       class="block text-gray-400 py-1">
                        Knipex
                    </a>
                    <a href="/brand/wera/"
                       class="block text-gray-400 py-1">
                        Wera
                    </a>
                    <a href="/brand/sata/"
                       class="block text-gray-400 py-1">
                        Sata
                    </a>
                    <a href="/brand/workpro/"
                       class="block text-gray-400 py-1">
                        Workpro
                    </a>
                    <a href="/brand/hans/"
                       class="block text-gray-400 py-1">
                        Hans
                    </a>
                    <div class="text-xs font-bold uppercase tracking-widest mt-2">
                        <a href="#"
                           class="block text-red-500 hover:text-red-700 py-1">
                            ABRASIVE
                        </a>
                    </div>
                    <a href="/brand/pferd/"
                       class="block text-gray-400 py-1">
                        Pferd
                    </a>
                </div>
            </div>
            <!-- COMPANY MOBILE -->
            <div class="border-b border-gray-800">

                <button
                    onclick="toggleMobileSub('mob-company')"
                    class="w-full flex justify-between items-center py-4
                           text-white font-bold text-left">

                    会社情報
                    <svg
                        id="arrow-mob-company"
                        class="w-4 h-4 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div
                    id="mob-company"
                    class="hidden pb-4 pl-4 space-y-3">
                    <div class="text-xs font-bold uppercase tracking-widest mt-2">
                        <a href="/company/"
                           class="block text-red-500 hover:text-red-700 py-1">
                            会社概要
                        </a>
                    </div>
                    <div class="text-xs font-bold uppercase tracking-widest mt-2">
                        <a href="/company/partner/"
                           class="block text-red-500 hover:text-red-700 py-1">
                            パートナー
                        </a>
                    </div>
                    <div class="text-xs font-bold uppercase tracking-widest mt-2">
                        <a href="/company/news/"
                           class="block text-red-500 hover:text-red-700 py-1">
                            ニュース
                        </a>
                    </div>
                    <div class="text-xs font-bold uppercase tracking-widest mt-2">
                        <a href="/company/jobs/"
                           class="block text-red-500 hover:text-red-700 py-1">
                            求人情報
                        </a>
                    </div>
                </div>
            </div>
            <!-- CONTACT MOBILE -->
            <a href="/contact/"
               class="block py-4 border-b border-gray-800 text-white font-bold">

                お問い合わせ

            </a>
        </div>
    </div>
</nav>

<!-- LANGUAGE DROPDOWN SCRIPT -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
    
        const languageGroup = document.querySelector('.language-group');
        const languageButton = languageGroup
            ? languageGroup.querySelector('button')
            : null;
    
        const languageDropdown = languageGroup
            ? languageGroup.querySelector('.language-dropdown')
            : null;
    
        if (languageButton && languageDropdown) {
    
            languageButton.addEventListener('click', function (e) {
    
                e.preventDefault();
    
                languageDropdown.classList.toggle('opacity-0');
                languageDropdown.classList.toggle('invisible');
                languageDropdown.classList.toggle('pointer-events-none');
    
            });
    
        }
    
    });
</script>

<!-- NAVBAR SCROLL SCRIPT -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
    
        const navbar = document.getElementById('navbar');
    
        if (!navbar) return;
    
        function handleNavbarScroll() {
    
            if (window.scrollY > 50) {
    
                navbar.classList.add('scrolled');
    
            } else {
    
                navbar.classList.remove('scrolled');
    
            }
    
        }
    
        window.addEventListener('scroll', handleNavbarScroll);
    
        handleNavbarScroll();
    
    });
</script>


</body>
</html>    <main class="pt-[20px] lg:pt-[10px]">
        



<section
    class="-mt-3 relative h-screen flex items-center justify-start overflow-hidden text-white">

    <div class="absolute inset-0">

        <img
            src="https://www.sinarunggul.com/images/desktop-products.webp"
            alt="製品"
            class="w-full h-full object-cover"
        >

    </div>


    <div class="absolute inset-0 bg-black/60"></div>


    <div class="relative z-10 w-full px-6 lg:px-24">

        <div class="max-w-3xl animate-fadeUp">

            <p
                class="text-sm md:text-lg tracking-[4px] uppercase text-gray-200 mb-3">

                Sinar Unggul Pratama

            </p>


            <h1
                class="text-5xl md:text-7xl font-black uppercase leading-none">

                製品

            </h1>


            <p
                class="mt-6 text-lg text-gray-200 leading-6 max-w-2xl">

                現代産業向けに、溶接、オートメーション、切断、ロボット、産業用工具、エンジニアリング機器の信頼性の高いソリューションを提供しています。

            </p>

        </div>

    </div>


    <div class="header-overlay"></div>
    <div class="header-overlay1"></div>

</section>





<section
    id="principal-brands"
    class="bg-white py-16 md:py-20">

    <div class="max-w-7xl mx-auto px-6">

        

        <div class="text-center mb-12">

            <p
                class="text-blue-600 font-semibold uppercase tracking-[3px] text-sm mb-3">

                正規取扱ブランド

            </p>

            <h2
                class="text-3xl md:text-5xl font-black text-slate-900">

                主要取扱ブランド

            </h2>

            <p
                class="mt-4 text-slate-500 max-w-2xl mx-auto">

                当社は、主要な産業ブランドの正規代理店およびパートナーとして、高品質な製品と信頼性の高い産業ソリューションを提供しています。

            </p>

        </div>


        

        <div
            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

            
                

                <button
                    type="button"
                    onclick="loadBrandProducts('OTC DAIHEN')"
                    class="sup-principal-brand-card group text-left">


                    

                    <div
                        class="sup-principal-brand-logo">

                        
                            <img
                                src="https://www.sinarunggul.com/uploads/brands/otc-daihen-1789183643.png"
                                alt="OTC DAIHEN"
                                loading="lazy"
                            >

                        
                    </div>



                    

                    <h3
                        class="text-lg font-black text-slate-900
                               group-hover:text-blue-600
                               transition">

                        OTC DAIHEN

                    </h3>



                    

                    <p
                        class="mt-2 text-sm text-slate-500 leading-relaxed
                               line-clamp-3">

                        welding solutions

                    </p>



                    

                    <div
                        class="mt-5 pt-4 border-t border-slate-100
                               flex items-center justify-between">

                        <span
                            class="text-xs uppercase tracking-wider
                                   font-semibold text-slate-400">

                            Products

                        </span>


                        <span
                            class="inline-flex items-center gap-2
                                   bg-blue-50
                                   text-blue-600
                                   px-3 py-1.5
                                   rounded-full
                                   text-sm
                                   font-bold">

                            <i class="fas fa-box"></i>

                            89

                        </span>

                    </div>


                    

                    <div
                        class="mt-4 text-sm font-bold
                               text-blue-600
                               group-hover:text-blue-700">

                        View Brand Products

                        <i
                            class="fas fa-arrow-right ml-1
                                   transition-transform
                                   group-hover:translate-x-1">
                        </i>

                    </div>

                </button>

            
                

                <button
                    type="button"
                    onclick="loadBrandProducts('LORCH')"
                    class="sup-principal-brand-card group text-left">


                    

                    <div
                        class="sup-principal-brand-logo">

                        
                            <img
                                src="https://www.sinarunggul.com/uploads/brands/lorch-1789183787.png"
                                alt="LORCH"
                                loading="lazy"
                            >

                        
                    </div>



                    

                    <h3
                        class="text-lg font-black text-slate-900
                               group-hover:text-blue-600
                               transition">

                        LORCH

                    </h3>



                    

                    <p
                        class="mt-2 text-sm text-slate-500 leading-relaxed
                               line-clamp-3">

                        Smart Welding

                    </p>



                    

                    <div
                        class="mt-5 pt-4 border-t border-slate-100
                               flex items-center justify-between">

                        <span
                            class="text-xs uppercase tracking-wider
                                   font-semibold text-slate-400">

                            Products

                        </span>


                        <span
                            class="inline-flex items-center gap-2
                                   bg-blue-50
                                   text-blue-600
                                   px-3 py-1.5
                                   rounded-full
                                   text-sm
                                   font-bold">

                            <i class="fas fa-box"></i>

                            20

                        </span>

                    </div>


                    

                    <div
                        class="mt-4 text-sm font-bold
                               text-blue-600
                               group-hover:text-blue-700">

                        View Brand Products

                        <i
                            class="fas fa-arrow-right ml-1
                                   transition-transform
                                   group-hover:translate-x-1">
                        </i>

                    </div>

                </button>

            
                

                <button
                    type="button"
                    onclick="loadBrandProducts('BDS')"
                    class="sup-principal-brand-card group text-left">


                    

                    <div
                        class="sup-principal-brand-logo">

                        
                            <img
                                src="https://www.sinarunggul.com/uploads/brands/bds-1789184114.webp"
                                alt="BDS"
                                loading="lazy"
                            >

                        
                    </div>



                    

                    <h3
                        class="text-lg font-black text-slate-900
                               group-hover:text-blue-600
                               transition">

                        BDS

                    </h3>



                    

                    <p
                        class="mt-2 text-sm text-slate-500 leading-relaxed
                               line-clamp-3">

                        Maschinen

                    </p>



                    

                    <div
                        class="mt-5 pt-4 border-t border-slate-100
                               flex items-center justify-between">

                        <span
                            class="text-xs uppercase tracking-wider
                                   font-semibold text-slate-400">

                            Products

                        </span>


                        <span
                            class="inline-flex items-center gap-2
                                   bg-blue-50
                                   text-blue-600
                                   px-3 py-1.5
                                   rounded-full
                                   text-sm
                                   font-bold">

                            <i class="fas fa-box"></i>

                            14

                        </span>

                    </div>


                    

                    <div
                        class="mt-4 text-sm font-bold
                               text-blue-600
                               group-hover:text-blue-700">

                        View Brand Products

                        <i
                            class="fas fa-arrow-right ml-1
                                   transition-transform
                                   group-hover:translate-x-1">
                        </i>

                    </div>

                </button>

            
                

                <button
                    type="button"
                    onclick="loadBrandProducts('HYPERTHERM')"
                    class="sup-principal-brand-card group text-left">


                    

                    <div
                        class="sup-principal-brand-logo">

                        
                            <img
                                src="https://www.sinarunggul.com/uploads/brands/hypertherm-1789188249.webp"
                                alt="HYPERTHERM"
                                loading="lazy"
                            >

                        
                    </div>



                    

                    <h3
                        class="text-lg font-black text-slate-900
                               group-hover:text-blue-600
                               transition">

                        HYPERTHERM

                    </h3>



                    

                    <p
                        class="mt-2 text-sm text-slate-500 leading-relaxed
                               line-clamp-3">

                        Industrial products and solutions from HYPERTHERM.

                    </p>



                    

                    <div
                        class="mt-5 pt-4 border-t border-slate-100
                               flex items-center justify-between">

                        <span
                            class="text-xs uppercase tracking-wider
                                   font-semibold text-slate-400">

                            Products

                        </span>


                        <span
                            class="inline-flex items-center gap-2
                                   bg-blue-50
                                   text-blue-600
                                   px-3 py-1.5
                                   rounded-full
                                   text-sm
                                   font-bold">

                            <i class="fas fa-box"></i>

                            10

                        </span>

                    </div>


                    

                    <div
                        class="mt-4 text-sm font-bold
                               text-blue-600
                               group-hover:text-blue-700">

                        View Brand Products

                        <i
                            class="fas fa-arrow-right ml-1
                                   transition-transform
                                   group-hover:translate-x-1">
                        </i>

                    </div>

                </button>

            
                

                <button
                    type="button"
                    onclick="loadBrandProducts('Abicor Binzel')"
                    class="sup-principal-brand-card group text-left">


                    

                    <div
                        class="sup-principal-brand-logo">

                        
                            <img
                                src="https://www.sinarunggul.com/uploads/brands/abicor-binzel-1789183820.webp"
                                alt="Abicor Binzel"
                                loading="lazy"
                            >

                        
                    </div>



                    

                    <h3
                        class="text-lg font-black text-slate-900
                               group-hover:text-blue-600
                               transition">

                        Abicor Binzel

                    </h3>



                    

                    <p
                        class="mt-2 text-sm text-slate-500 leading-relaxed
                               line-clamp-3">

                        Torch

                    </p>



                    

                    <div
                        class="mt-5 pt-4 border-t border-slate-100
                               flex items-center justify-between">

                        <span
                            class="text-xs uppercase tracking-wider
                                   font-semibold text-slate-400">

                            Products

                        </span>


                        <span
                            class="inline-flex items-center gap-2
                                   bg-blue-50
                                   text-blue-600
                                   px-3 py-1.5
                                   rounded-full
                                   text-sm
                                   font-bold">

                            <i class="fas fa-box"></i>

                            40

                        </span>

                    </div>


                    

                    <div
                        class="mt-4 text-sm font-bold
                               text-blue-600
                               group-hover:text-blue-700">

                        View Brand Products

                        <i
                            class="fas fa-arrow-right ml-1
                                   transition-transform
                                   group-hover:translate-x-1">
                        </i>

                    </div>

                </button>

            
        </div>

    </div>

</section>





<section
    id="brand-products-section"
    class="hidden bg-slate-50 border-t border-slate-200 py-16 md:py-20">

    <div class="max-w-7xl mx-auto px-6">


        

        <div
            class="flex items-start justify-between gap-4 mb-10">

            <div>

                <p
                    class="text-blue-600 font-semibold uppercase tracking-[3px] text-sm mb-3">

                    Brand Products

                </p>


                <h2
                    id="selected-brand-name"
                    class="text-white text-3xl md:text-4xl font-bold text-slate-900">
                </h2>


                <p
                    class="text-white text-slate-500 mt-2">

                    Explore products available from this brand.

                </p>

            </div>


            

            <button
                type="button"
                onclick="closeBrandProducts()"
                class="flex-shrink-0
                       w-10 h-10
                       rounded-full
                       bg-white
                       border border-slate-200
                       text-slate-500
                       hover:text-red-600
                       hover:border-red-300
                       transition">

                <i class="fas fa-times"></i>

            </button>

        </div>



        

        <div
            id="brand-products-loading"
            class="hidden text-center py-16">

            <div
                class="inline-flex
                       items-center
                       justify-center
                       w-14
                       h-14
                       rounded-full
                       bg-blue-50">

                <i
                    class="fas fa-spinner fa-spin text-2xl text-blue-600">
                </i>

            </div>


            <p
                class="mt-4 text-slate-500">

                Loading products...

            </p>

        </div>



        

        <div
            id="brand-products-grid"
            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        </div>



        

        <div
            id="brand-products-empty"
            class="hidden text-center py-16">

            <i
                class="fas fa-box-open text-5xl text-slate-300">
            </i>


            <p
                class="mt-4 text-slate-500">

                No products available for this brand.

            </p>

        </div>

    </div>

</section>





<script>

async function loadBrandProducts(brand)
{
    const section =
        document.getElementById('brand-products-section');

    const grid =
        document.getElementById('brand-products-grid');

    const loading =
        document.getElementById('brand-products-loading');

    const empty =
        document.getElementById('brand-products-empty');

    const title =
        document.getElementById('selected-brand-name');


    /* ---------------------------------------------
       SHOW SECTION
    --------------------------------------------- */

    section.classList.remove('hidden');

    title.textContent = brand;

    grid.innerHTML = '';

    empty.classList.add('hidden');

    loading.classList.remove('hidden');


    /* ---------------------------------------------
       SCROLL TO PRODUCTS
    --------------------------------------------- */

    setTimeout(() => {

        section.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });

    }, 100);


    try {

        /* -----------------------------------------
           AJAX REQUEST
        ----------------------------------------- */

        const response = await fetch(
            'https://www.sinarunggul.com/products/brand-products?brand='
            + encodeURIComponent(brand),
            {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }
        );


        if (!response.ok) {

            throw new Error(
                'Failed to load products'
            );

        }


        const products =
            await response.json();


        loading.classList.add('hidden');


        /* -----------------------------------------
           EMPTY
        ----------------------------------------- */

        if (!products.length) {

            empty.classList.remove('hidden');

            return;

        }


        /* -----------------------------------------
           PRODUCTS
        ----------------------------------------- */

        products.forEach(product => {


            /* IMAGE */

            const image = product.image

                ? `
                    <img
                        src="${escapeHtml(product.image)}"
                        alt="${escapeHtml(product.name)}"
                        loading="lazy">
                  `

                : `
                    <div
                        class="flex
                               items-center
                               justify-center
                               h-full">

                        <i
                            class="fas fa-image
                                   text-5xl
                                   text-slate-300">
                        </i>

                    </div>
                  `;



            /* CATEGORY */

            const category =
                product.category
                    ? product.category
                        .split(',')[0]
                        .trim()
                    : 'Industrial';



            /* PRODUCT CARD */

            grid.innerHTML += `

                <div class="sup-brand-product-card">


                    <!-- IMAGE -->

                    <a
                        href="${escapeHtml(product.url)}"
                        class="sup-brand-product-image">


                        ${image}


                        <div
                            class="sup-brand-product-overlay">

                            <span>

                                <i
                                    class="fas fa-arrow-right mr-1">
                                </i>

                                View Details

                            </span>

                        </div>


                        <span
                            class="sup-brand-product-label">

                            ${escapeHtml(
                                product.brand || brand
                            )}

                        </span>

                    </a>



                    <!-- CONTENT -->

                    <div
                        class="sup-brand-product-content">


                        <!-- TITLE -->

                        <a
                            href="${escapeHtml(product.url)}"
                            class="sup-brand-product-title"
                            title="${escapeHtml(product.name)}">

                            ${escapeHtml(product.name)}

                        </a>



                        <!-- TAG -->

                        <div
                            class="sup-brand-product-tags">

                            <span
                                class="sup-brand-product-tag">

                                ${escapeHtml(category)}

                            </span>

                        </div>



                        <!-- INQUIRY -->

                        <button
                            type="button"
                            class="sup-brand-inquiry-button"
                            onclick="addProductToInquiry(
                                ${product.id},
                                event
                            )">

                            <i
                                class="fas fa-shopping-cart mr-1">
                            </i>

                            Add to Inquiry

                        </button>



                        <!-- DETAIL -->
                        <!-- <a
                            href="${escapeHtml(product.url)}"
                            class="sup-brand-detail-button">
                            View Details →
                        </a> -->

                    </div>

                </div>

            `;

        });


    }
    catch (error) {


        loading.classList.add('hidden');


        grid.innerHTML = `

            <div
                class="col-span-full
                       text-center
                       py-16">

                <i
                    class="fas fa-exclamation-circle
                           text-5xl
                           text-red-300">
                </i>


                <p
                    class="mt-4
                           text-red-500">

                    Failed to load products.

                </p>

            </div>

        `;


        console.error(error);

    }

}



/* =========================================================
   CLOSE BRAND PRODUCTS
========================================================= */

function closeBrandProducts()
{
    const section =
        document.getElementById(
            'brand-products-section'
        );

    const grid =
        document.getElementById(
            'brand-products-grid'
        );

    const empty =
        document.getElementById(
            'brand-products-empty'
        );


    section.classList.add('hidden');

    grid.innerHTML = '';

    empty.classList.add('hidden');
}



/* =========================================================
   ADD PRODUCT TO INQUIRY
========================================================= */

function addProductToInquiry(productId, event)
{
    if (event) {

        event.preventDefault();

        event.stopPropagation();

    }


    /*
     * Trigger inquiry event.
     */

    window.dispatchEvent(
        new CustomEvent(
            'add-to-cart',
            {
                detail: {
                    productId: productId
                }
            }
        )
    );
}



/* =========================================================
   ESCAPE HTML
========================================================= */

function escapeHtml(value)
{
    if (
        value === null ||
        value === undefined
    ) {

        return '';

    }


    return String(value)

        .replace(
            /&/g,
            '&amp;'
        )

        .replace(
            /</g,
            '&lt;'
        )

        .replace(
            />/g,
            '&gt;'
        )

        .replace(
            /"/g,
            '&quot;'
        )

        .replace(
            /'/g,
            '&#039;'
        );
}

</script>


    </main>
</body>
<!-- 🔥 ENQUIRY BOX -->
<div id="enquiryBox" 
    style="
        position:fixed;
        bottom:30px;
        left:20px;
        background:#fff;
        padding:10px;
        border-radius:10px;
        width:120px;
        box-shadow:0 0 10px rgba(0,0,0,0.2);
        z-index:9;
    ">

    <!-- <h3 style="font-weight:bold; margin-bottom:10px;">messages.enquiry_list</h3> -->

    <ul id="enquiryList" style="font-size:10px; margin-bottom:10px;"></ul>

    <button onclick="openForm()" 
            style="background:red; color:white; width:100%; padding:5px; border-radius:10px;">
        お問い合わせ
    </button>

</div>

<!-- 🔥 POPUP -->
<div id="popup"
    style="
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.5);
        justify-content:center;
        align-items:center;
        z-index:9999;
    ">

    <div style="
        background:white;
        padding:20px;
        width:350px;
        border-radius:10px;
        position:relative;
    ">

        <button onclick="closePopup()" 
                style="position:absolute; right:10px; top:5px;">
            ✖
        </button>

        <h2 style="font-size:18px; font-weight:bold; margin-bottom:10px;">
            messages.form_enquiry
        </h2>


        <!-- LIST PRODUK -->
        <div style="
            background:#f3f3f3;
            padding:10px;
            border-radius:5px;
            margin-bottom:10px;
        ">

            <strong>messages.product_selected</strong>

            <ul id="popupProductList" style="font-size:13px; margin-top:5px;"></ul>

        </div>


        <input 
            type="text" 
            id="customer_name" 
            placeholder="お名前" 
            class="w-full mb-2 p-2 border rounded"
        >

        <input 
            type="text" 
            id="customer_phone" 
            placeholder="messages.phone_whatsapp" 
            class="w-full mb-2 p-2 border rounded"
        >

        <input 
            type="text" 
            id="customer_company" 
            placeholder="会社情報" 
            class="w-full mb-2 p-2 border rounded"
        >

        <textarea 
            id="customer_message" 
            placeholder="messages.message" 
            class="w-full mb-2 p-2 border rounded"
        ></textarea>


        <button onclick="sendWA()" class="bg-green-600 text-white w-full py-2 rounded">
            messages.send
        </button>

    </div>

</div>

<!-- FLOATING CONTACT -->
<div x-data="{ open: false }" class="fixed bottom-6 right-6 z-50">
    <!-- MENU ICON -->
    <div x-show="open" x-transition
        class="flex flex-col items-center space-y-3 mb-3">
        <!-- WHATSAPP -->
        <a href="https://wa.me/62811697178" target="_blank"
            class="w-12 h-12 flex items-center justify-center rounded-full bg-green-500 shadow-lg hover:scale-110 transition">
            <svg viewBox="0 0 24 24" class="w-6 h-6 fill-white">
                <path d="M20.52 3.48A11.78 11.78 0 0012.02 0C5.38 0 .02 5.36.02 12c0 2.11.55 4.17 1.6 5.98L0 24l6.2-1.62A11.94 11.94 0 0012.02 24c6.64 0 12-5.36 12-12 0-3.2-1.25-6.2-3.5-8.52zM12.02 21.8c-1.9 0-3.76-.5-5.38-1.44l-.38-.22-3.68.96.98-3.58-.24-.37A9.76 9.76 0 012.22 12c0-5.4 4.4-9.8 9.8-9.8 2.62 0 5.08 1.02 6.94 2.88A9.75 9.75 0 0121.82 12c0 5.4-4.4 9.8-9.8 9.8zm5.4-7.34c-.3-.15-1.78-.88-2.05-.98-.28-.1-.48-.15-.68.15s-.78.98-.96 1.18c-.18.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.46-.88-.78-1.46-1.74-1.63-2.04-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.64-.93-2.25-.24-.58-.5-.5-.68-.5h-.58c-.2 0-.52.07-.8.37s-1.05 1.02-1.05 2.5 1.07 2.9 1.22 3.1c.15.2 2.1 3.2 5.1 4.5.7.3 1.25.48 1.68.62.7.22 1.34.2 1.84.12.56-.08 1.78-.73 2.03-1.44.25-.7.25-1.3.18-1.44-.07-.15-.27-.22-.56-.37z"/>
            </svg>
        </a>

        <!-- PHONE -->
        <a href="tel:+627787368559"
            class="w-12 h-12 flex items-center justify-center rounded-full bg-emerald-400 shadow-lg hover:scale-110 transition">

            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-white">
                <path d="M6.6 10.8c1.4 2.7 3.6 4.9 6.3 6.3l2.1-2.1c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.9.6.6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.3 22 2 13.7 2 3c0-.6.4-1 1-1h3.8c.6 0 1 .4 1 1 0 1.4.2 2.7.6 3.9.1.4 0 .8-.3 1.1l-2.5 2.8z"/>
            </svg>
        </a>        <!-- EMAIL -->
        <a href="mailto:info@sinarunggul.com"
            class="w-12 h-12 flex items-center justify-center rounded-full bg-red-500 shadow-lg hover:scale-110 transition">

            <svg viewBox="0 0 24 24" class="w-6 h-6 fill-white">
                <path d="M20 4H4c-1.1 0-2 .9-2 2v.01l10 6.99 10-6.99V6c0-1.1-.9-2-2-2zm0 4.24l-8.55 5.98c-.28.2-.62.2-.9 0L2 8.24V18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8.24z"/>
            </svg>

        </a>

    </div>


    <!-- BUTTON OPEN -->
    <button @click="open = !open"
        class="w-14 h-14 bg-black text-white rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition">

        <!-- ICON -->
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6"
            fill="none" viewBox="0 0 24 24" stroke="currentColor">

            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4-.8L3 20l1.8-4.2A7.963 7.963 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />

        </svg>

    </button>

</div>


<footer class="bg-[#003a70] text-gray-300 pt-12 pb-6">
    <div class="max-w-7xl mx-auto px-2 grid grid-cols-1 md:grid-cols-4 gap-6">

        <!-- COMPANY -->
        <div>
            <img src="https://www.sinarunggul.com/images/logo-full.webp "alt="robot" 
     class="h-16 mb-4 drop-shadow-[0_0_1px_rgba(255,255,255,0.8)]">
            <p class="text-sm leading-relaxed text-white-400">
                PT. Sinar Unggul Pratama is your trusted partner in welding, cutting,
                robotic automation, and industrial tooling solutions.
            </p>
        </div>

        <!-- MENU -->
        <div>
            <h3 class="text-white font-semibold mb-4">Quick Links</h3>
            <ul class="space-y-2 text-sm">
                <li><a href="/" class="hover:text-white transition">Home</a></li>
                <li><a href="/company" class="hover:text-white transition">会社概要</a></li>
                <li><a href="/products" class="hover:text-white transition">製品</a></li>
                <li><a href="/company" class="hover:text-white transition">会社情報</a></li>
                <li><a href="/contact" class="hover:text-white transition">お問い合わせ</a></li>
            </ul>
        </div>

        <!-- SERVICES -->
        <div>
            <h3 class="text-white font-semibold mb-4">Our Solutions</h3>
            <ul class="space-y-2 text-sm">
                <li><a href="/welding/" class="hover:text-white transition">Welding Machine</a></li>
                <li><a href="/cutting/" class="hover:text-white transition">Cutting System</a></li>
                <li><a href="/automation/robots/" class="hover:text-white transition">Robotic Automation</a></li>
                <li><a href="/automation/robot-accessories/" class="hover:text-white transition">ロボットアクセサリー</a></li>
                <li><a href="/category/power-tools" class="hover:text-white transition">Industrial Tools</a></li>
            </ul>
        </div>

        <!-- CONTACT -->
        <div>
            <h3 class="text-white font-semibold mb-4">Contact Us</h3>
            <ul class="space-y-2 text-sm text-white-400">
                <li><a href="https://maps.google.com/?cid=16245431770319585855&g_mp=CiVnb29nbGUubWFwcy5wbGFjZXMudjEuUGxhY2VzLkdldFBsYWNlEAMYASAF&hl=en&gl=ID&source=embed">📍 Batam, Indonesia</li>
                <li><a href="tel:+62%20778%20736%208562">✆ +62 (778) 7368562-63</a></li>
                <li><a href="tel:+62811697178">📲 +62 811-697-178</a></li>
                <li><a href="tel:+628117005168">📲 +62 811-7005-168</li>
                <li>
                    <a href="mailto:info@sinarunggul.com" class="elementor-item">✉ info@sinarunggul.com</a>
                </li>
            </ul>

            <!-- SOCIAL -->
            <div class="flex space-x-3 mt-4">
                <a href="https://www.instagram.com/sinarunggulpratama/" class="w-9 h-9 flex items-center justify-center bg-gray-700 hover:bg-red-600 rounded-full transition">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.facebook.com/profile.php?id=61553608561875" class="w-9 h-9 flex items-center justify-center bg-gray-700 hover:bg-blue-600 rounded-full transition">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://id.linkedin.com/in/engineering-sinar-unggul-pratama-b94924366" class="w-9 h-9 flex items-center justify-center bg-gray-700 hover:bg-sky-500 rounded-full transition">
                    <i class="fab fa-linkedin-in"></i>
                </a>
            </div>
        </div>

    </div>

    <!-- BOTTOM -->
    <div class="border-t border-gray-700 mt-10 pt-6 text-center text-sm text-gray-500">
        © 2026 PT. Sinar Unggul Pratama. All Rights Reserved.
    </div>


    
</footer>
</html>