@font-face {
        font-family: 'Pirulen';
        src: url('assets/fonts/pirulen.ttf') format('truetype'),
            url('assets/fonts/pirulen.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --bg-dark: #08061a;
        --card-bg: rgba(255, 255, 255, 0.03);
        --card-border: rgba(255, 255, 255, 0.08);
        --accent-purple: #6d28d9;
        --accent-purple-light: #8b5cf6;
        --badge-bg: rgba(139, 92, 246, 0.15);
        --badge-border: rgba(139, 92, 246, 0.3);
    }

    * {
        font-family: 'Pirulen', 'Orbitron', sans-serif !important;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: #060518;
        color: #ffffff;
        overflow-x: hidden;
        min-height: 100vh;
    }

    @media (max-width: 767.98px) {
        body {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

        section:last-of-type,
        footer {
            margin-bottom: 0 !important;
            padding-bottom: 30px !important;
        }
    }

    /* .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        overflow: hidden;
        background: 3060518;
    }

    .video-background video {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        opacity: 0.45;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: -1;
    } */

    /* Atur video-background agar absolut terhadap .hero-section */
    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Buat video menutupi seluruh area hero secara responsif */
    #bgVideo {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Mencegah video terdistorsi/gepeng */
    }

    /* Lapisan overlay di atas video (opsional untuk efek gelap/gradasi) */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* Sesuaikan tingkat kegelapan */
        z-index: 1;
    }

    /* NAVBAR STYLES */
    /* .navbar {
        background: rgba(6, 5, 24, 0.6) !important;
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        z-index: 1000;
    } */
    .navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* background: rgba(6, 5, 24, 0.6) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px); */
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
        z-index: 1000;
    }

    .logo-text {
      font-size: 1.8rem;
      letter-spacing: 1.5px;
      color: #ffffff !important;
      text-transform: lowercase;
      font-weight: 900;
    }

    .nav-link {
        font-size: 16px;
        font-weight: 700 !important;
        letter-spacing: 1px;
        color: #b0b4d0 !important;
        text-transform: capitalize;
        transition: all 0.3s ease;
        padding: 0.5rem 1.1rem !important;
    }

    .nav-link:hover, .nav-link.active, .nav-link:focus {
        color: #ffffff !important;
        text-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
    }

    /* .dropdown-arrow {
      font-size: 0.7rem;
      margin-left: 4px;
    } */
    
    .dropdown-toggle::after {
        display: none !important;
    }

    .dropdown-arrow {
        font-size: 0.7rem;
        margin-left: 4px;
        vertical-align: middle;
    }

    .dropdown-menu-dark-custom {
        background: rgba(12, 10, 36, 0.95);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        padding: 0.5rem 0;
        margin-top: 0.5rem;
    }

    .dropdown-menu-dark-custom .dropdown-item {
        color: #b0b4d0;
        font-size: 0.8rem;
        font-weight: 700;
        padding: 0.6rem 1.4rem;
        transition: all 0.25s ease;
    }

    .dropdown-menu-dark-custom .dropdown-item:hover {
        background: rgba(168, 85, 247, 0.2);
        color: #ffffff;
        padding-left: 1.7rem;
    }

    .btn-search {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        transition: all 0.3s ease;
    }

    .btn-search:hover {
        background: rgba(168, 85, 247, 0.3);
        border-color: #a855f7;
        color: #ffffff;
        transform: scale(1.05);
    }

    .btn-join {
        background: #6c2bd9;
        color: #ffffff;
        font-size: 0.7rem;
        letter-spacing: 1px;
        border: none;
        padding: 0.6rem 1.6rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(108, 43, 217, 0.4);
        text-transform: uppercase;
        text-decoration: none;
    }

    .btn-join:hover {
        background: #7c3aed;
        color: #ffffff;
        box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
        transform: translateY(-2px);
    }

    /* .hero-section {
        padding-top: 100px;
        padding-bottom: 60px;
        min-height: 100vh;
    } */

    .hero-section {
        position: relative;
        padding: 0;
        margin: 0;
        overflow: hidden; /* Memotong video agar tidak keluar dari hero */
        min-height: 100vh; /* Atau sesuaikan dengan tinggi hero Anda */
    }

    .overlay-hero-section {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(
            to bottom,
            rgba(6, 5, 24, 0) 0%,
            rgba(6, 5, 24, 0.4) 35%,
            rgba(6, 5, 24, 0.85) 70%,
            #060518 100%
        );
        pointer-events: none;
        z-index: 1;
    }

    .overlay-hero-section::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        pointer-events: none;
    }

    /* .hero-title {
        font-size: 45px;
        line-height: 1.25;
        letter-spacing: 1px;
        font-weight: 800;
        width: 600px;
        color: #ffffff;
        text-transform: uppercase;
    } */
    .hero-title {
        font-size: 45px;
        line-height: 1.25;
        letter-spacing: 1px;
        font-weight: 100;
        width: 100%;        /* Menggantikan width: 600px */
        max-width: 600px;  /* Batas maksimal di desktop */
        color: #ffffff;
        text-transform: uppercase;
    }

    .highlight-nfts {
        color: #b162ff;
        position: relative;
        display: inline-block;
        font-weight: 700;
        text-shadow: 0 0 20px rgba(177, 98, 255, 0.4);
    }

    .arc-vector {
        position: absolute;
        bottom: -18px;
        left: 0;
        width: 110%;
        height: 25px;
        pointer-events: none;
    }

    .hero-subtitle {
        font-size: 18px;
        line-height: 1.8;
        color: #FFFFFF !important;
        max-width: 480px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0.5px;
    }

    .btn-gradient-connected {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
        color: #ffffff;
        font-size: 14px;
        letter-spacing: 1px;
        border: none;
        /* padding: 0.85rem 2.2rem; */
        padding: 10px 30px;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
        transition: all 0.3s ease;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;
    }

    .btn-gradient-connected:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(168, 85, 247, 0.6);
    }

    .subfooter-title {
        font-size: 14px;
        color: #a855f7;
        letter-spacing: 1px;
    }

    .accept-label {
        font-size: 12px;
        color: #8288ad;
        letter-spacing: 0.5px;
    }

    .accept-logos {
        gap: 1.25rem;
        color: #8288ad;
    }

    .accept-logos i {
        font-size: 1.2rem;
        transition: color 0.3s ease;
    }

    .accept-logos i:hover {
        color: #a855f7;
    }

    .brand-3m {
        font-size: 0.85rem;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .brand-stripe {
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: -0.5px;
        text-transform: lowercase;
    }

    .nft-stage-container {
        position: relative;
        width: 100%;
        max-width: 460px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nft-glow-aura {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        height: 90%;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(99, 102, 241, 0.15) 50%, transparent 70%);
        filter: blur(40px);
        z-index: 1;
    }

    .nft-capsule-card {
        position: relative;
        width: 100%;
        height: 520px;
        background: linear-gradient(165deg, #e2e8f0 0%, #cbd5e1 35%, #94a3b8 70%, #64748b 100%);
        border-radius: 160px 160px 50px 50px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.8);
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .nft-character-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        filter: contrast(1.08) brightness(1.02);
    }

    .character-svg-art {
        width: 100%;
        height: 100%;
        display: block;
    }

    .glass-badge {
        position: absolute;
        /* background: rgba(255, 255, 255, 0.92); */
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        /* border: 1px solid rgba(255, 255, 255, 0.8); */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
        border-radius: 18px;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .glass-badge:hover {
        transform: translateY(-4px);
    }

    /* Top Right Badge: Current Bid */
    .badge-top-right {
        top: 12%;
        right: -20px;
        padding: 0.75rem 1.25rem 0.75rem 0.9rem;
    }

    .eth-circle-icon {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    }

    .bid-title {
        font-size: 0.52rem;
        /* color: #64748b; */
        color: #FFFFFF;
        text-transform: none;
        letter-spacing: 0.2px;
        margin-bottom: 2px;
    }

    .bid-amount {
        font-size: 0.8rem;
        color: #0f172a;
        font-weight: 800;
        letter-spacing: 0.5px;
    }

    .badge-bottom-left {
        bottom: 12%;
        left: -20px;
        padding: 0.6rem 1.4rem 0.6rem 0.6rem;
    }

    .creator-avatar-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .creator-fullname {
        font-size: 0.68rem;
        color: #0f172a;
        font-weight: 800;
        margin-bottom: 2px;
        text-transform: none;
    }

    .creator-handle-name {
        font-size: 0.55rem;
        /* color: #64748b; */
        color: #FFFFFF;
        text-transform: none;
    }

    @media (max-width: 991.98px) {
        .hero-section {
            text-align: center;
            padding-top: 110px;
            margin-top: -30px;
        }

        .hero-subtitle {
            margin-left: auto;
            margin-right: auto;
        }

        .arc-vector {
            left: -5%;
            width: 110%;
        }

        .nft-stage-container {
            margin-top: 40px;
            max-width: 380px;
        }

        .nft-capsule-card {
            height: 440px;
            border-radius: 130px 130px 40px 40px;
        }

        .badge-top-right {
            right: -10px;
            top: 8%;
        }

        .badge-bottom-left {
            left: -10px;
            bottom: 8%;
        }

        .accept-logos {
            justify-content: center;
        }
    }

    @media (max-width: 575.98px) {
        .hero-title {
            font-size: 1.8rem;
        }

        .badge-top-right {
            right: 0px !important;
            padding: 0.5rem 0.9rem;
        }

        .badge-bottom-left {
            left: 0px !important;
            padding: 0.5rem 0.9rem;
        }

        .nft-capsule-card {
            height: 380px;
            border-radius: 110px 110px 30px 30px;
        }

        .eth-circle-icon, .creator-avatar-img {
            width: 36px;
            height: 36px;
        }

        .bid-amount, 
        .creator-fullname {
            font-size: 0.68rem;
        }
    }


    


    




    /* ==========================================
    ABOUT About us
    ========================================== */
    .about-nft-section {
        position: relative;
        padding: 50px 0;
        margin: 0;
        padding: 0;
        background-color: #060518;
        overflow: hidden;
        color: #ffffff;
    }

    .about-nft-gallery {
        position: relative;
        width: 100%;
        max-width: 520px;
        height: 520px;
        margin: 0 auto;
    }

    .gallery-glow {
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translate(-30%, -70%);
        width: 80%;
        height: 80%;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(99, 102, 241, 0.15) 20%, transparent 70%);
        filter: blur(50px);
        z-index: 1;
    }

    .nft-box {
        position: absolute;
        overflow: hidden;
        /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); */
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(18, 16, 42, 0.6);
        backdrop-filter: blur(10px);
        z-index: 2;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .nft-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .nft-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
    }

    .box-main-center {
        width: 260px;
        height: 380px;
        top: 50px;
        left: 110px;
        /* border-radius: 120px 120px 40px 40px; */
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
        z-index: 3;
    }

    .box-top-left {
        width: 75px;
        height: 75px;
        top: 100px;
        left: 15px;
        border-radius: 18px;
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
    }

    .box-bottom-left {
        width: 135px;
        height: 135px;
        bottom: 30px;
        left: 45px;
        border-radius: 28px;
        z-index: 4;
        box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
    }

    .box-bottom-mid {
        width: 45px;
        height: 45px;
        bottom: 50px;
        left: 195px;
        border-radius: 12px;
        z-index: 4;
    }

    .box-bottom-right {
        width: 130px;
        height: 130px;
        bottom: 1;
        right: 10px;
        border-radius: 35px;
        /* z-index: 4; */
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
    }

    .badge-pill-tag {
        display: inline-block;
        background: rgba(168, 85, 247, 0.12);
        border: 1px solid rgba(168, 85, 247, 0.35);
        border-radius: 30px;
        padding: 6px 20px;
    }

    .badge-pill-tag span {
        font-size: 0.8rem;
        color: #a855f7;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .about-title {
        font-size: 24px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 1px;
        color: #ffffff;
        text-transform: capitalize;
    }

    .about-description {
        font-size: 14px;
        line-height: 1.3;
        color: #a3a8c3;
        letter-spacing: normal;
        font-weight: 100;
    }

    .about-description-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        margin-top: -10px;
        margin-bottom: 10px;
        flex-direction: column; 
        gap: 2px;
        align-items: flex-start;
    }

    .about-description-list li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        line-height: 1.2;
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: #a3a8c3;
        transition: color 0.2s ease;
    }

    .about-description-list li i {
        color: #a855f7;
        font-size: 14px;
        line-height: 1.2;
        transition: transform 0.2s ease;
    }

    @media (max-width: 768px) {
        .about-description-list {
            gap: 2px;
            align-items: center;
            text-align: center;
        }

        .about-description-list li {
            font-size: 14px;
            justify-content: center;
            width: 100%;
        }
    }

    .highlight-desc {
        color: #a855f7;
        font-weight: 600;
    }

    .btn-purple-gradient {
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        color: #ffffff !important;
        font-size: 0.85rem;
        font-weight: 700;
        padding: 14px 32px;
        border-radius: 12px;
        border: none;
        display: inline-block;
        text-decoration: none;
        box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
        transition: all 0.3s ease;
    }

    .btn-purple-gradient:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(168, 85, 247, 0.6);
        color: #ffffff;
    }

    @media (max-width: 991.98px) {
        .about-nft-section {
            padding: 40px 0;
            margin: 0;
            padding: 0;
        }

        .about-title {
            font-size: 2.2rem;
        }

        .about-content {
            text-align: center;
            margin-top: 20px;
        }

        .badge-pill-tag {
            margin: 0 auto 15px auto;
        }
        }

        @media (max-width: 575.98px) {
        .about-nft-gallery {
            max-width: 320px;
            height: 380px;
        }

        .box-main-center {
            width: 170px;
            height: 260px;
            left: 70px;
            border-radius: 20px;
        }

        .box-top-left {
            width: 50px;
            height: 50px;
            top: 70px;
            left: 10px;
        }

        .box-bottom-left {
            width: 90px;
            height: 90px;
            bottom: 20px;
            left: 30px;
        }

        .box-bottom-mid {
            width: 30px;
            height: 30px;
            bottom: 35px;
            left: 130px;
        }

        .box-bottom-right {
            width: 100px;
            height: 100px;
            right: 0px;
            bottom: 10;
        }

        .about-title {
            font-size: 1.7rem;
        }
    }












    /* ==========================================
    Visi Misi
    ========================================== */
    .orbit-lines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        opacity: 0.15;

        /* BAGIAN INI YANG MEMBUAT TITIK-TITIK: */
        background-image: radial-gradient(circle at 20% 40%, #ffffff 1px, transparent 1px),
                            radial-gradient(circle at 80% 60%, #ffffff 1px, transparent 1px);
        background-size: 80px 80px;
    }

    .orbit-lines::before {
        content: '';
        position: absolute;
        width: 450px;
        height: 450px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, #1a0f3d 0%, transparent 70%);
        opacity: 0.6;
        z-index: 0;
        pointer-events: none;
    }

    .cyfonii-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 50px 20px;
        position: relative;
        background-color: #060518;
        z-index: 1;
        width: 100%;
    }

    /* Badge Pill Style */
    .badge-pill {
        display: inline-block;
        font-size: clamp(0.75rem, 2vw, 0.85rem);
        font-weight: 500;
        color: #b5b9db;
        background: rgba(60, 40, 110, 0.45);
        border: 1px solid rgba(157, 78, 221, 0.3);
        padding: 6px 18px;
        border-radius: 30px;
        margin-bottom: 12px;
        backdrop-filter: blur(8px);
        letter-spacing: 0.5px;
    }

    /* Heading Title Style */
    .cyfonii-heading {
        font-size: 20px;
        font-weight: 800;
        color: #7c3aed;
        margin-bottom: 10px;
        line-height: 1.1;
    }

    /* Description Text Style */
    .cyfonii-text {
        font-size: 14px;
        line-height: 1.3;
        color: #a3a8c3;
        margin: 0;
        max-width: 520px;
    }

    /* Content Box Container */
    .content-box {
        padding: 24px;
        border-radius: 20px;
        transition: all 0.4s ease;
        background: rgba(255, 255, 255, 0.015);
        border-color: rgba(157, 78, 221, 0.2);
        box-shadow: 0 0 30px rgba(157, 78, 221, 0.15);
    }

    .content-box:hover {
        background: rgba(157, 78, 221, 0.05);
        border-color: rgba(157, 78, 221, 0.2);
        box-shadow: 0 0 30px rgba(157, 78, 221, 0.15);
        transform: translateY(-6px) scale(1.01);
    }

    /* Vision Block (Kiri Atas) */
    .vision-block {
        margin-bottom: 15px;
    }

    .vision-box {
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Mission Block (Kanan Bawah - Tetap Float Right di Desktop & Mobile) */
    .mission-block {
        margin-top: -15px;
    }

    .mission-box {
        text-align: right !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end !important;
    }

    /* Responsive Adjustments untuk Mobile */
    @media (max-width: 991.98px) {
        body {
            padding: 30px 0;
        }

        .content-box {
            padding: 18px 14px;
        }

        .vision-block {
            margin-bottom: 20px;
        }

        .mission-block {
            margin-top: 0;
        }

        /* Memastikan teks Mission tetap rata kanan di layar mobile */
        .mission-box {
            text-align: right !important;
            align-items: flex-end !important;
        }
    }

















    /* ==========================================
    Nilai Lebih Kami
    ========================================== */
    /* .speciality-section {
        position: relative;
        padding: 10px 0;
        background-color: #060518;
        overflow: hidden;
        color: #ffffff;
        padding-bottom: 50px;
    } */

    .speciality-section {
        position: relative;
        padding: 10px 0;
        padding-bottom: 50px;
        background-color: #060518;
        color: #ffffff;
        overflow: hidden;
        background-image: url('../images/background/bach2.jfif');
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .speciality-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(6, 5, 24, 0.85);
        z-index: 1;
        pointer-events: none;
    }

    .speciality-glow-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 70%;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(99, 102, 241, 0.08) 50%, transparent 80%);
        filter: blur(80px);
        pointer-events: none;
        z-index: 1;
    }

    .badge-pill-tag {
        display: inline-block;
        background: rgba(168, 85, 247, 0.12);
        border: 1px solid rgba(168, 85, 247, 0.35);
        border-radius: 30px;
        padding: 6px 20px;
    }

    .badge-pill-tag span {
        font-size: 0.8rem;
        color: #a855f7;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .speciality-title {
        font-size: 35px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0.5px;
        color: #ffffff;
    }

    .speciality-subtitle {
        font-size: 16px;
        color: #FFFFFF;
        font-weight: 400;
        line-height: 1.3;
    }

    /* .speciality-card {
        position: relative;
        margin-top: 20px;
        text-align: center;
        transition: transform 0.3s ease;
    } */

    .speciality-card {
        position: relative;
        margin-top: 20px;
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        height: calc(100% - 20px);
    }

    .speciality-card:hover {
        transform: translateY(-8px);
    }

    .speciality-icon-circle i {
        font-size: 1.8rem;
        color: #ffffff;
    }

    .speciality-icon-wrapper {
        position: relative;
        z-index: 3;
        margin-bottom: -35px;
    }

    .speciality-icon-circle {
        width: 75px;
        height: 75px;
        margin: 0 auto;
        border-radius: 50%;
        background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    .speciality-card:hover .speciality-icon-circle {
        box-shadow: 0 15px 35px rgba(168, 85, 247, 0.7);
        transform: scale(1.05);
    }

    /* .speciality-card-body {
        position: relative;
        z-index: 2;
        background: rgba(18, 16, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 20px;
        padding: 55px 20px 25px 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    } */

    .speciality-card-body {
        position: relative;
        z-index: 2;
        background: rgba(18, 16, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 20px;
        padding: 55px 20px 25px 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
    }

    .speciality-card:hover .speciality-card-body {
        border-color: rgba(168, 85, 247, 0.35);
        background: rgba(24, 20, 56, 0.75);
    }

    .card-item-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 12px;
    }

    .card-item-desc {
        font-size: 14px;
        color:#94a3b8;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .card-number {
        display: block;
        font-size: 1.6rem;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.15);
        letter-spacing: 2px;
        transition: color 0.3s ease;
    }

    .speciality-card:hover .card-number {
        color: rgba(168, 85, 247, 0.6);
    }

    @media (max-width: 991.98px) {
        .speciality-section {
            padding: 80px 0;
        }
        
        .speciality-title {
            font-size: 2.2rem;
        }
    }

    /* ==========================================
    OPTIMASI TAMPILAN MOBILE (2 GRID)
    ========================================== */
    @media (max-width: 575.98px) {
        .speciality-title {
            font-size: 1.7rem;
        }

        .speciality-icon-circle {
            width: 55px;
            height: 55px;
        }

        .speciality-icon-circle i {
            font-size: 1.3rem;
        }

        .speciality-icon-wrapper {
            margin-bottom: -28px;
        }

        .speciality-card-body {
            padding: 40px 12px 18px 12px;
            border-radius: 16px;
        }

        .card-item-title {
            font-size: 0.95rem;
            margin-bottom: 8px;
        }

        .card-item-desc {
            font-size: 12px;
            line-height: 1.4;
            margin-bottom: 15px;
        }

        .card-number {
            font-size: 1.2rem;
        }
    }








    /* Product Us Maxindoled */
    .bg-orbs {
        position: absolute;
        border-radius: 50%;
        filter: blur(130px);
        pointer-events: none;
        z-index: 0;
        opacity: 0.45;
    }

    .orb-1s {
        width: clamp(300px, 45vw, 600px);
        height: clamp(300px, 45vw, 600px);
        top: 5%;
        left: -10%;
        background: radial-gradient(circle, #9d4edd 0%, transparent 70%);
    }

    .orb-2s {
        width: clamp(300px, 45vw, 600px);
        height: clamp(300px, 45vw, 600px);
        bottom: 5%;
        right: -10%;
        background: radial-gradient(circle, #9d4edd 0%, transparent 70%);
    }

    .productus {
        width: 100%;
        padding: 50px 0;
        overflow-x: hidden;
        /* background: radial-gradient(circle at 50% 20%, #1e1b4b 0%, #060518 70%); */
    }
    /* .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        z-index: 1;
        overflow: hidden;
    } */

    .text-center {
        text-align: center;
    }

    /* .mb-3 { margin-bottom: 1rem; }
    .mb-4 { margin-bottom: 1.5rem; }
    .mb-5 { margin-bottom: 3rem; } */

    /* .badge-pill-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        background: rgba(0, 242, 254, 0.1);
        border: 1px solid rgba(0, 242, 254, 0.25);
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        color: #9d4edd;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
    }

    .speciality-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(2rem, 5vw, 3.2rem);
        font-weight: 800;
        line-height: 1.2;
        background: linear-gradient(135deg, #ffffff 50%, #9d4edd 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    } */

    .product-select-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 5px;
    }

    .product-select-containers {
        position: relative;
        max-width: 100%;
        padding: 0;
        overflow: hidden;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid #9d4edd;
        /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
    }

    .custom-product-tabsui {
        display: flex;
        list-style: none;
        padding: 6px;
        gap: 6px;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
    }

    .custom-product-tabsui::-webkit-scrollbar {
        display: none;
    }

    .custom-product-tabsui .nav-items {
        flex: 0 0 auto;
    }

    .custom-product-tabsui .nav-linksok {
        background: transparent;
        border: none;
        color: #94a3b8;
        padding: 10px 24px;
        border-radius: 40px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        white-space: nowrap;
        display: inline-block;
    }

    .custom-product-tabsui .nav-linksok:hover {
        color: #ffffff;
        border: 1px solid #6c2bd9;
    }

    .custom-product-tabsui .nav-linksok.active {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
        color: #ffffff;
        /* box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4); */
    }

    .category-title-lefts {
        font-size: 18px;
        font-weight: 700;
        /* margin-bottom: 20px; */
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .category-title-lefts::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 22px;
        background: #9d4edd;
        border-radius: 2px;
    }

    .tab-product-content {
        display: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        width: 100%;
    }

    .tab-product-content.active {
        display: block;
        opacity: 1;
    }

    .carousel-container {
        width: 100%;
        height: 480px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: grab;
        touch-action: pan-y;
        user-select: none;
    }

    .carousel-container:active {
        cursor: grabbing;
    }

    .swiper {
        width: 100%;
        max-width: 1400px;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.1s linear;
    }

    .swiper-slide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        width: auto;
        height: auto;
        pointer-events: auto;
    }

    .product-carousel-card {
        width: 280px;
        height: 380px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid #9d4edd;
        border-radius: 24px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        opacity: 0.25;
        filter: brightness(0.4);
        transform: scale(0.85);
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .card-img-holder {
        width: 100%;
        height: 78%;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* padding: 16px; */
        border: 1px solid rgba(255, 255, 255, 0.05);
        position: relative;
        overflow: hidden;
    }

    .card-img-holder img {
        max-width: 100%;
        max-height: 100%;
        padding: 10px;
        object-fit: contain;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
        transition: transform 0.4s ease;
    }

    .card-footer-info {
        padding: 10px 4px 0;
        display: flex;
        /* width: 150px; */
        justify-content: space-between;
        align-items: center;
    }

    .product-name {
        font-size: 14px;
        font-weight: 600;
        color: #e2e8f0;
        line-height: 1.2;
        /* white-space: nowrap;
        overflow: hidden; */
        /* width: 150px;
        text-overflow: ellipsis; */
        transition: color 0.3s ease;
    }

    /* 3D Slide Transformations */
    .swiper-slide.prev-2 {
        left: calc(50% - 480px);
        z-index: 1;
    }
    .swiper-slide.prev-2 .product-carousel-card {
        opacity: 0.15;
        transform: scale(0.78);
    }

    .swiper-slide.prev {
        left: calc(50% - 260px);
        z-index: 5;
    }
    .swiper-slide.prev .product-carousel-card {
        opacity: 0.5;
        filter: brightness(0.6);
        transform: scale(0.88);
    }

    .swiper-slide.active {
        left: 50%;
        z-index: 10;
    }
    .swiper-slide.active .product-carousel-card {
        width: 320px;
        height: 430px;
        opacity: 1;
        filter: brightness(1);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
        border: 1px solid #9d4edd;
        box-shadow: 0 10px 10px #9d4edd, 0 0 10px rgba(0, 0, 0, 0.8);
        transform: scale(1);
    }
    .swiper-slide.active .product-name {
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
    }
    .swiper-slide.active .card-img-holder img {
        transform: scale(1.05);
    }

    .swiper-slide.next {
        left: calc(50% + 260px);
        z-index: 5;
    }
    .swiper-slide.next .product-carousel-card {
        opacity: 0.5;
        filter: brightness(0.6);
        transform: scale(0.88);
    }

    .swiper-slide.next-2 {
        left: calc(50% + 480px);
        z-index: 1;
    }
    .swiper-slide.next-2 .product-carousel-card {
        opacity: 0.15;
        transform: scale(0.78);
    }

    /* Control Buttons */
    .custom-swiper-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(15, 12, 35, 0.6);
        color: #ffffff;
        border-radius: 50%;
        cursor: pointer;
        z-index: 30;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    .custom-swiper-btn:hover {
        background: #9d4edd;
        border-color: #9d4edd;
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
    }

    .btn-prev-custom { left: 24px; }
    .btn-next-custom { right: 24px; }

    /* Responsive Breakpoints */
    @media (max-width: 991px) {
        .swiper-slide.prev-2 { left: calc(50% - 380px); }
        .swiper-slide.prev { left: calc(50% - 200px); }
        .swiper-slide.next { left: calc(50% + 200px); }
        .swiper-slide.next-2 { left: calc(50% + 380px); }
    }

        @media (max-width: 768px) {

        .orb-1 { left: 0; }
        .orb-2 { right: 0; }

        /* Mobile Adjustments for Tabs */
        .product-select-container {
            border-radius: 30px;
            width: 100%;
        }

        .custom-product-tabs {
            padding: 4px;
            gap: 4px;
        }

        .custom-product-tabs .nav-linksok {
            padding: 8px 18px;
            font-size: 13px;
        }

        .product-carousel-card {
            width: 210px;
            height: 310px;
            border-radius: 18px;
        }

        .swiper-slide.active .product-carousel-card {
            width: 250px;
            height: 370px;
        }

        .swiper-slide.prev-2 { left: calc(50% - 220px); opacity: 0; }
        .swiper-slide.prev { left: calc(50% - 130px); }
        .swiper-slide.next { left: calc(50% + 130px); }
        .swiper-slide.next-2 { left: calc(50% + 220px); opacity: 0; }

        .custom-swiper-btn {
            width: 40px;
            height: 40px;
            font-size: 15px;
        }
        .btn-prev-custom { left: 10px; }
        .btn-next-custom { right: 10px; }
    }

    @media (max-width: 576px) {
        .carousel-container {
            height: 400px;
        }

        .product-carousel-card {
            width: 180px;
            height: 270px;
        }

        .swiper-slide.active .product-carousel-card {
            width: 220px;
            height: 330px;
        }

        .swiper-slide.prev-2 { left: calc(50% - 160px); opacity: 0; }
        .swiper-slide.prev { left: calc(50% - 90px); }
        .swiper-slide.next { left: calc(50% + 90px); }
        .swiper-slide.next-2 { left: calc(50% + 160px); opacity: 0; }

        .custom-swiper-btn {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }
        .btn-prev-custom { left: 5px; }
        .btn-next-custom { right: 5px; }
    }











    /* Whatsapp Floating */
    #button {
        opacity: 0;
        z-index:99;
        width: 50px;
        height: 50px;
        bottom: 30px;
        right: 30px;
        position: fixed;
        cursor: pointer;
        text-align: center;
        border-radius: 50%;
        visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: spineer 2s infinite;
        background-color: #128c7e;
        -webkit-animation: spineer 2s infinite;
        transition: background-color .3s, opacity .5s, visibility .5s;
    }
    #button::after {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        /* content: "\f062"; */
        line-height: 50px;
        /* font-family: "Font Awesome 5 free"; */
    }
    #button.show {
        opacity: 1;
        visibility: visible;
    }

    #button.show i{
        font-size: 22px;
    }











    /* b2b aman */
    .escalator-section {
        position: relative;
        padding: 50px 0;
        padding-bottom: 50px;
        background-color: #060518;
        color: #ffffff;
        overflow: hidden;
        background-image: url('../images/background/okray.png');
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .escalator-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(6, 5, 24, 0.85);
        /* z-index: 1;
        pointer-events: none; */
    }
    
    /* Escalator Header Typography */
    .escalator-section-title {
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.5px;
    }

    .escalator-section-subtitle {
        color: #94a3b8;
        font-size: 0.95rem;
        max-width: 650px;
        margin: 0 auto 50px auto;
    }

    /* Escalator Card Components */
    .escalator-card {
        background: rgba(18, 16, 42, 0.6);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 30px 22px;
        height: 100%;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .escalator-icon-circle {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
        color: #FFFFFF ;
        /* border: 1px solid rgba(0, 150, 199, 0.3); */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 20px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .escalator-title {
        color: #ffffff;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .escalator-desc {
        color:#94a3b8;
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }

    @media (min-width: 992px) {
        .escalator-card:hover {
            transform: translateY(-8px);
            background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
            /* border-color: #0096C7; */
            /* box-shadow: 0 15px 30px rgba(0, 150, 199, 0.25); */
        }

        .escalator-card:hover .escalator-icon-circle {
            background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
            color: #ffffff;
            box-shadow: 0 0 15px rgba(0, 190, 699, 0.5);
        }
    }

    @media (max-width: 767.98px) {
        .escalator-section {
            padding: 40px 0;
        }

        .escalator-section-subtitle {
            margin-bottom: 25px;
            font-size: 0.85rem;
        }

        .escalator-card {
            padding: 16px 12px;
            border-radius: 12px;
        }

        .escalator-icon-circle {
            width: 42px;
            height: 42px;
            font-size: 18px;
            margin-bottom: 10px;
            border-radius: 10px;
        }

        .escalator-title {
            font-size: 0.875rem;
            margin-bottom: 6px;
        }

        .escalator-desc {
            font-size: 12px;
            line-height: 1.35;
        }
    }











    /* Our Gallery */
    .robotics-collection-section {
        width: 100%;
        padding: 60px 0;
        position: relative;
        background-color: #060518;
        /* background: radial-gradient(circle at 50% 20%, #1e1b4b 0%, #060518 70%); */
    }

    .header-container {
        text-align: center;
        margin-bottom: 40px;
    }

    /* BADGE KAPSUL TOP */
    .speciality-badge {
        display: inline-block;
        padding: 6px 20px;
        border-radius: 50px;
        background: var(--badge-bg);
        border: 1px solid var(--badge-border);
        color: var(--accent-purple-light);
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 16px;
        letter-spacing: 0.5px;
    }

    .main-title {
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: 1px;
        color: #ffffff;
        text-transform: uppercase;
    }

    .marquee-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 20px 0;
        mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }

    .marquee-tracks {
        display: flex;
        gap: 24px;
        width: max-content;
        will-change: transform;
    }

    .marquee-slide {
        width: 320px;
        flex-shrink: 0;
    }

    .robotic-card {
        position: relative;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 12px;
        overflow: hidden;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .robotic-card:hover {
        border-color: rgba(139, 92, 246, 0.4);
        box-shadow: 0 10px 30px rgba(109, 40, 217, 0.2);
    }

    .card-image-box {
        width: 300px;
        height: 300px;
        border-radius: 14px;
        overflow: hidden;
        justify-content: center;
        position: relative;
    }

    .card-image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .card-title-overlay {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        padding: 5px;
        text-align: center;
    }

    .card-title-overlay span {
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.3px;
    }

    @media (max-width: 768px) {
        .main-title { 
            font-size: 1.8rem; 
        }
        
        .marquee-slide { 
            width: 200px; 
        }
        
        .card-image-box {
            width: 180px; 
            height: 180px; 
        }

        .card-title-overlay span {
            font-size: 10px;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: 0.3px;
        }
    }








    /* Our Concepts */
    .showroom-header-conts {
        margin-bottom: 35px;
    }

    .showroom-title-conts {
        font-size: 2.6rem;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: 2px;
        margin-bottom: 8px;
        text-transform: uppercase;
        text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    }

    .showroom-subtitle-conts {
        font-size: 1.1rem;
        color: #b0b0b0;
    }

    .showroom-brand-highlight-conts {
        color: #9d4edd;
        font-weight: 600;
    }

    /* Full Viewport Carousel Container */
    .showroom-full-wrapper-conts {
        width: 100vw;
        padding: 50px 0px;
        position: relative;
        /* left: 50%;
        right: 50%; */
        /* margin-left: -50vw;
        margin-right: -50vw; */
        overflow: hidden;
        /* padding: 20px 0 40px 0; */
    }

    /* Custom Swiper Main Class */
    .showroom-carousel-main {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
        position: relative;
        overflow: hidden;
    }

    /* Custom Swiper Track Class */
    .showroom-carousel-track {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 50px;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
    }

    /* Custom Swiper Slide Class */
    .showroom-carousel-item {
        flex-shrink: 0;
        position: relative;
        width: 620px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        user-select: none;
        transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
        opacity: 0.55;
        filter: brightness(0.4) blur(3px);
    }

    /* Active Slide Distinct Visual Highlight (Larger Size & Brightness) */
    .showroom-carousel-item.swiper-slide-active {
        opacity: 1 !important;
        filter: brightness(1.1) blur(0px) !important;
        z-index: 10 !important;
    }

    /* Image Box Styling with Glow Effect */
    .showroom-car-image-box-conts {
        width: 100%;
        height: 390px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
        position: relative;
        border: 1px solid #2a2a2a;
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .swiper-slide-active .showroom-car-image-box-conts {
        border-color: #9d4edd;
        box-shadow: 0 5px 30px #9d4edd, 0 15px 35px rgba(0, 0, 0, 0.9);
    }

    .showroom-car-image-box-conts img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .swiper-slide-active .showroom-car-image-box-conts img {
        transform: scale(1.03);
    }

    /* Info Text Below Image */
    .showroom-car-info-conts {
        padding-top: 22px;
        text-align: center;
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: translateY(5px);
        opacity: 0.7;
    }

    .swiper-slide-active .showroom-car-info-conts {
        transform: translateY(0);
        opacity: 1;
    }

    .showroom-car-title-conts {
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        margin: 0;
        letter-spacing: 0.8px;
    }

    .swiper-slide-active .showroom-car-title-conts {
        color: #ffffff;
        text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
    }

    .showroom-car-specs-conts {
        font-size: 0.98rem;
        color: #9d4edd;
        margin-top: 6px;
        margin-bottom: 0;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Navigation & Pagination Bottom Row */
    .showroom-controls-wrapper-conts {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 25px;
        margin-top: 20px;
    }

    .showroom-nav-btn-conts {
        position: static !important;
        margin: 0 !important;
        width: 45px !important;
        height: 45px !important;
        /* background-color: #9d4edd; */
        border: 1px solid #333333;
        border-radius: 50%;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
        transition: all 0.3s ease;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .showroom-nav-btn-conts:hover {
        background-color: #9d4edd;
        border-color: #9d4edd;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px #9d4edd;
    }

    .showroom-nav-btn-conts::after {
        font-size: 16px !important;
        font-weight: bold;
        color: #ffffff;
        transition: color 0.3s ease;
    }

    .showroom-nav-btn-conts:hover::after {
        color: #121212;
    }

    .showroom-pagination-conts {
        position: static !important;
        width: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: transparent;
        border: 1.5px solid #ffffff;
        opacity: 0.4;
        margin: 0 6px !important;
        transition: all 0.3s ease;
        border-radius: 50%;
    }

    .swiper-pagination-bullet-active {
        background-color: #9d4edd !important;
        border-color: #9d4edd !important;
        opacity: 1 !important;
        width: 12px;
        height: 12px;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
    }

    /* Responsive Adjustments for Mobile & Tablet */
    @media (max-width: 768px) {
        body {
            padding: 30px 0;
        }

        .showroom-title-conts {
            font-size: 1.8rem;
        }

        .showroom-subtitle-conts {
            font-size: 0.95rem;
            padding: 0 20px;
        }

        .showroom-carousel-item {
            width: 80vw;
        }

        .showroom-car-image-box-conts {
            height: 240px;
        }

        .showroom-car-title-conts {
            font-size: 1.2rem;
        }

        .showroom-car-specs-conts {
            font-size: 0.85rem;
        }

        .showroom-controls-wrapper-conts {
            gap: 15px;
            margin-top: 15px;
        }

        .showroom-nav-btn-conts {
            width: 42px !important;
            height: 42px !important;
        }

        .showroom-nav-btn-conts::after {
            font-size: 14px !important;
        }
    }










    
    /* Client partner */
    .client-carousel-section {
        width: 100%;
        display: flex;
        background: radial-gradient(circle at 50% 20%, #1e1b4b 0%, #060518 30%);
        flex-direction: column;
        gap: 20px; /* Jarak antar baris */
        padding: 50px 0;
    }

    /* BARIS / ROW CAROUSEL MARQUEE */
    .marquee-row {
        width: 100%;
        overflow: hidden;
        display: flex;
        position: relative;
        /* Gradient mask di sisi kiri & kanan agar visual menyatu halus */
        mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    /* TRACK ANIMASI (Di-handle via JavaScript) */
    .marquee-track {
        display: flex;
        gap: 20px; /* Jarak antar kartu */
        width: max-content;
        padding: 5px;
        will-change: transform;
    }

    .client-card {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 24px;
        border-radius: 16px;
        /* background: rgba(255, 255, 255, 0.05); */
        background: #FFFFFF;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        
        cursor: pointer;
        user-select: none;
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .client-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.4);
        /* background: rgba(255, 255, 255, 0.1); */
        background: #FFFFFF;
        box-shadow: 0 0 10px #a855f7;
    }

    /* GAMBAR LOGO UNTUK DESKTOP */
    .client-card img {
        width: 110px;        /* Ukuran lebar logo desktop */
        height: 50px;        /* Ukuran tinggi logo desktop */
        object-fit: contain;  /* Gambar pas tanpa terdistorsi */
        display: block;
    }

    /* RESPONSIF MOBILE */
    @media (max-width: 768px) {
        .client-carousel-section {
            gap: 12px; /* Jarak antar baris lebih rapat di mobile */
        }
        
        .marquee-track {
            gap: 12px; /* Jarak antar kartu lebih rapat di mobile */
        }

        .client-card {
            padding: 8px 16px; /* Padding kartu disesuaikan untuk layar kecil */
            border-radius: 10px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        /* GAMBAR LOGO UNTUK MOBILE */
        .client-card img {
            width: 75px;        /* Ukuran lebar logo khusus mobile */
            height: 35px;       /* Ukuran tinggi logo khusus mobile */
        }
    }







    /* brands partners */
    .brand-partners {
        width: 100%;
        padding: 50px 0px;
        /* background-color: #060518; */
        background: radial-gradient(circle at 50% 100%, #1e1b4b 0%, #060518 27%);
    }

    /* .brand-partners .domp{
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 15px;
        margin: 0px 50px 0px 50px;
    } */

    .full-centered-img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Agar rasio gambar tetap terjaga dan tidak tertarik/gepeng */
        display: block;
        margin: 0 auto; /* Memastikan posisi horizontal tepat di tengah */
    }

    @media (max-width: 768px) {
        .brand-partners .domp{
            margin: 0px 10px 0px 10px;
        }
    }















    /* Footer */
    .cyfonii-footer {
      /* background: linear-gradient(90deg, #180a4b 0%, #08061a 50%, #03020c 100%); */
      background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #060518 33%);
      /* background-color: #060518; */
      color: #ffffff;
      padding: 30px 5%;
      /* border-top: 1px solid rgba(255, 255, 255, 0.05); */
      position: relative;
      width: 100%;
    }

    .footer-content {
        max-width: 1300px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* LOGO (cyfonii) */
    .footer-logo {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: 1px;
        color: #ffffff;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .footer-logo span {
        color: #ffffff;
    }

    /* NAVIGASI & COPYRIGHT (Tengah) */
    .footer-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .footer-nav {
        display: flex;
        align-items: center;
        gap: 28px;
        list-style: none;
    }

    .footer-nav a {
        color: #ffffff;
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .footer-nav a:hover {
        color: #a78bfa;
    }

    .footer-copyright {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 2px;
        text-align: center;
    }

    /* MEDIA SOSIAL ICONS (Kanan) */
    .footer-socials {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .social-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    .social-icon:hover {
        background: #6d28d9;
        border-color: #8b5cf6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4);
    }

    /* RESPONSIF MOBILE (< 992px) */
    @media (max-width: 992px) {
        .cyfonii-footer {
            background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #060518 19%);
        }
        .footer-content {
            flex-direction: column;
            justify-content: center;
            text-align: center;
            gap: 24px;
        }

        .footer-nav {
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px 24px;
        }

        .footer-center {
            order: 2;
        }

        .footer-logo {
            order: 1;
        }

        .footer-socials {
            order: 3;
        }
    }

    /* RESPONSIF HP KECIL (< 480px) */
    @media (max-width: 480px) {
        .footer-nav {
            gap: 12px 18px;
            font-size: 0.85rem;
        }

        .footer-logo {
            font-size: 1.5rem;
        }

        .social-icon {
            width: 34px;
            height: 34px;
            font-size: 0.85rem;
        }
    }



































    /* ========================================================= */
    /* --- LAYOUT PAGE GALLERY --- */
    /* ========================================================= */
    .ambient-glow {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 350px;
        /* background: linear-gradient(90deg, #7c3aed 0%, #a855f7 45%, #c084fc 15%); */
        background: radial-gradient(circle, #7c3aed 0%, #a855f7 45%, #c084fc 75%);
        filter: blur(55px);
        z-index: 1;
        pointer-events: none;
    }
    /* .dinos {
        position: relative;
        padding: 150px 0px 50px 0px;
        background-image: url('../images/background/bgproduct.jfif');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        overflow: hidden;
    } */

    .krypton-bg-layers {
        position: absolute;
        padding: 50px 0px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/background/bach2.jfif');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.2;
        z-index: 1;
    }

    .dinos::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #060518;
        opacity: 0.9; 
        z-index: 1;
    }

    .dinos > * {
        position: relative;
        z-index: 2;
    }

    .hero-titlev {
        font-size: clamp(2rem, 4.5vw, 3.6rem);
        font-weight: 500;
        letter-spacing: -0.03em;
        color: #ffffff;
        line-height: 1.15;
        /* margin-bottom: 0.8rem; */
    }

    .hero-subtitlev {
        color: #9ca3af;
        font-size: clamp(0.85rem, 1.8vw, 1.1rem);
        font-weight: 300;
        max-width: 600px;
        margin: 0 auto 1.8rem auto;
        line-height: 1.5;
    }

    /* Pill CTA Button */
    .btn-cta {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
        color: #ffffff;
        border: 1px solid #27272a;
        padding: 0.6rem 1.5rem;
        border-radius: 9999px;
        font-size: 0.9rem;
        font-weight: 400;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 15px #7c3aed, inset 0 1px 1px #7c3aed;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        position: relative;
        z-index: 10;
    }

    .btn-cta:hover {
        color: #FFFFFF;
        border-color: #7c3aed;
        box-shadow: 0 0 25px #7c3aed, inset 0 1px 1px rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

    .btn-cta .arrow {
        transition: transform 0.3s ease;
    }

    .btn-cta:hover .arrow {
        transform: translateX(4px);
    }

    /* Carousel Container and Concave 3D Stage */
    .carousel-viewport {
        position: relative;
        width: 100%;
        padding: 25px 0 40px 0;
        perspective: 1000px;
        overflow: hidden;
        z-index: 2;
        mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    }

    .carousel-trackings {
        display: flex;
        align-items: center;
        /* Tighter gap between cards as requested */
        gap: 10px;
        width: max-content;
        will-change: transform;
        padding: 20px 0;
    }

    /* Card Frame & Image Design */
    .card-itemklo {
        width: 250px;
        height: 350px;
        flex-shrink: 0;
        border-radius: 15px;
        overflow: hidden;
        background-color: #121212;
        border: 1px solid #222224;
        /* box-shadow: 0 12px 30px #7c3aed; */
        position: relative;
        transition: border-color 0.3s ease;
        /* transform-style: preserve-3d; */
        cursor: pointer;
    }

    .card-itemklo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        background: linear-gradient(to top, rgba(0,0,0,.45), transparent 50%);
        /* filter: contrast(1.05) brightness(0.95); */
    }

    .card-itemklo::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 16px;
        /* box-shadow: inset 0 0 0 1px #7c3aed; */
        pointer-events: none;
    }

    .card-itemklo:hover {
        border-color: #7c3aed;
        box-shadow: 0 0 15px #7c3aed, inset 0 1px 1px #7c3aed;
    }

    /* Features Section - Strictly 3 Columns on Mobile & Desktop */
    .features-containerklop {
        margin-top: 0.5rem;
        position: relative;
        z-index: 5;
    }

    .feature-titleklop {
        color: #ffffff;
        font-size: clamp(0.75rem, 2.5vw, 1.1rem);
        font-weight: 500;
        margin-bottom: 0.4rem;
        height: 60px;
        letter-spacing: normal;
        line-height: 1.25;
    }

    .feature-descklop {
        color: #71717a;
        font-size: clamp(0.65rem, 1.8vw, 0.85rem);
        line-height: 1.35;
        max-width: 280px;
        letter-spacing: 1px;
        margin: 0 auto;
        font-weight: 300;
    }

    @media (max-width: 768px) {
        body{
            padding: 0;
            margin: 0;
        }
        .carousel-viewport {
            padding: 10px 0 25px 0;
            perspective: 700px;
        }
        
        .card-itemklo {
            width: 140px;
            height: 220px;
            border-radius: 12px;
        }

        .carousel-trackings {
            gap: 8px; /* Even tighter gap on smaller screens */
        }

        .ambient-glow {
            width: 280px;
            height: 200px;
        }
    }

    @media (max-width: 480px) {
        .card-itemklo {
            width: 125px;
            height: 190px;
        }
        
        .feature-titleklop {
            font-size: 12px;
        }

        .feature-descklop {
            font-size: 10px;
        }
    }














    .cyfonii-wrapper {
      width: 100%;
      /* max-width: 1360px; */
      margin: 0 auto;
      padding: 150px 50px;
    }
 
    .exact-grid-container {
      display: grid;
      grid-template-columns: 2fr 1.6fr 1.5fr 1.4fr 1.5fr;
      gap: 16px;
      width: 100%;
    }
 
    .img-box {
      position: relative;
      width: 100%;
      border-radius: 18px;
      overflow: hidden;
      background: #060518;
      border: 1px solid #9d4edd;
      backdrop-filter: blur(8px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
      transition: all 0.3s ease;
    }
 
    .img-box:hover {
      border-color: #9d4edd;
      box-shadow: 0 0 15px #9d4edd;
      transform: translateY(-2px);
    }
 
    .img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }
 
    .img-box:hover img {
      transform: scale(1.03);
    }
 
    .col-layout-1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
 
    .hero-titles {
      font-size: 35px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
      color: #ffffff;
      /* background: linear-gradient(135deg, #ffffff 40%, #9d4edd); */
      /* -webkit-background-clip: text; */
      /* -webkit-text-fill-color: transparent; */
    }
 
    .hero-desc {
      font-size: 16px;
      color: #94a3b8;
      max-width: 280px;
      margin-bottom: 20px;
      line-height: 1.2;
    }
 
    .btn-cyfonii {
      background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
      color: #ffffff;
      padding: 10px 24px;
      border-radius: 30px;
      font-size: 0.85rem;
      font-weight: 600;
      text-decoration: none;
      display: inline-block;
      /* box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25); */
      border: none;
      margin-bottom: 20px;
    }
 
    .col-layout-1 .img-box {
      height: 250px;
    }
 
    .col-layout-2 {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
 
    .col-layout-2 .img-1 { height: 230px; }
    .col-layout-2 .img-2 { height: 260px; }
 
    .col-layout-3 {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
 
    .col-layout-3 .img-1 { height: 270px; }
    .col-layout-3 .img-2 { height: 220px; }
 
    .col-layout-4 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
 
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 10px 0 20px 0;
    }
 
    .feature-list li {
      font-size: 0.95rem;
      font-weight: 600;
      color: #e2e8f0;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
 
    .feature-list i {
      color: #a855f7;
      font-size: 0.85rem;
    }
 
    .col-layout-4 .img-box {
      height: 280px;
    }
 
    .col-layout-5 {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
 
    .col-layout-5 .img-1 { height: 120px; }
    .col-layout-5 .img-2 { height: 250px; }
    .col-layout-5 .img-3 { height: 120px; }
 
    @media (max-width: 991px) {
      .cyfonii-wrapper {
        padding: 100px 10px;
      }

      .exact-grid-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .col-layout-1 { order: 1; text-align: center; }
      .hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
      .hero-title { font-size: 2.2rem; }
      .col-layout-1 .img-box { height: 220px; }

      .col-layout-2 { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .col-layout-2 .img-1, .col-layout-2 .img-2 { height: 180px; }

      .col-layout-3 { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .col-layout-3 .img-1, .col-layout-3 .img-2 { height: 180px; }

      .col-layout-5 { order: 4; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
      .col-layout-5 .img-1, .col-layout-5 .img-2, .col-layout-5 .img-3 { height: 130px; }

      .col-layout-4 { order: 5; }
      .feature-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        background: #060518;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid #9d4edd;
      }
      .feature-list li { margin-bottom: 0; font-size: 0.85rem; }
      .col-layout-4 .img-box { height: 200px; }
    }


    /* Gallery section 2 */
    .modern-gallery {
        padding: 50px 30px;
        /* margin-top: -50px; */
    }

    .gallery-container {
        width: 100%;
        margin: auto;
    }

    .gallery-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 35px;
    }

    .gallery-heading {
        margin: 0;
        /* font-size: clamp(45px, 6vw, 82px); */
        font-size: 35px;
        font-weight: 700;
        /* line-height: .88;
        letter-spacing: -5px; */
        color: #FFFFFF;
    }

    .gallery-heading span {
        display: block;
        color: #FFFFFF;
    }

    .gallery-info {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 250px;
        margin-bottom: 4px;
    }

    .gallery-info-line {
        width: 35px;
        height: 1px;
        background: #666666;
    }

    .gallery-info-text {
        font-size: 11px;
        line-height: 1.5;
        color: #666;
        margin: 0;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: 300px
            300px
            210px;
        gap: 7px;
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: #eee;
        border: 1px solid rgba(255, 255, 255, 0.08);
        /* box-shadow: 0 5px 10px #9d4edd; */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
    }

    .gallery-item:hover{
        border: 1px solid #9d4edd;
        box-shadow: 0 10px 20px #9d4edd;
    }

    .gallery-item:hover img {
        transform: scale(1.07);
        filter: brightness(.72) saturate(1.08);
    }

    .gallery-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 18px;
        background: linear-gradient(
                to top,
                rgba(0,0,0,.55),
                transparent 45%
            );
        opacity: 0;
        transition: .4s ease;
    }

    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-number {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #fff;
    }

    .gallery-view {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.95);
        color: #111;
        font-size: 15px;
        transform: translateY(10px);
        transition: .4s ease;
    }

    .gallery-item:hover .gallery-view {
        transform: translateY(0);
    }


    .gallery-item-1 {
        grid-column: span 8;
        grid-row: 1;
    }

    .gallery-item-2 {
        grid-column: span 4;
        grid-row: 1;
    }

    .gallery-item-3 {
        grid-column: span 4;
        grid-row: 2;
    }

    .gallery-item-4 {
        grid-column: span 4;
        grid-row: 2;
    }

    .gallery-item-5 {
        grid-column: span 4;
        grid-row: 2;
    }

    .gallery-item-6 {
        grid-column: span 4;
        grid-row: 3;
    }

    .gallery-item-7 {
        grid-column: span 8;
        grid-row: 3;
    }

    .gallery-item-1 img {
        object-position: center;
    }

    .gallery-item-2 img {
        object-position: center;
    }

    .gallery-item-3 img {
        object-position: center;
    }

    .gallery-item-4 img {
        object-position: center;
    }

    .gallery-item-5 img {
        object-position: center;
    }

    .gallery-lightbox {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: rgba(0,0,0,.92);
        opacity: 0;
        visibility: hidden;
        transition: .35s ease;
    }

    .gallery-lightbox.active {
        opacity: 1;
        visibility: visible;
    }

    .gallery-lightbox img {
        max-width: 92vw;
        max-height: 88vh;
        object-fit: contain;
        border-radius: 10px;
        transform: scale(.94);
        transition: .4s ease;
    }

    .gallery-lightbox.active img {
        transform: scale(1);
    }

    .gallery-close {
        position: absolute;
        top: 25px;
        right: 30px;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(255,255,255,.1);
        color: #fff;
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: .3s ease;
    }

    .gallery-close:hover {
        background: #fff;
        color: #111;
        transform: rotate(90deg);
    }

    @media (max-width: 991px) {
        .modern-gallery {
            /* margin-top: 50px; */
            padding: 50px 0px;
        }

        .gallery-grid {
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-template-rows:
                240px
                240px
                170px;
            gap: 6px;
        }

        .gallery-heading {
            font-size: 38px;
            /* letter-spacing: -4px; */
        }

    }

    @media (max-width: 600px) {
        .modern-gallery {
            padding: 50px 0;
        }

        .gallery-container {
            width: calc(100% - 20px);
        }

        .gallery-header {
            margin-bottom: 20px;
            align-items: flex-end;
        }

        .gallery-heading {
            font-size: 36px;
            /* letter-spacing: -3px;
            line-height: .9; */
        }

        .gallery-heading span {
            display: inline;
        }


        .gallery-info {
            max-width: 135px;
            gap: 7px;
            margin-bottom: 2px;
        }

        .gallery-info-line {
            width: 18px;
        }

        .gallery-info-text {
            font-size: 8px;
            line-height: 1.35;
        }

        .gallery-grid {
            grid-template-columns:
                repeat(12, minmax(0, 1fr));

            grid-template-rows:
                175px
                175px
                120px;

            gap: 4px;
        }

        .gallery-item-1 {
            grid-column: span 8;
            grid-row: 1;
        }

        .gallery-item-2 {
            grid-column: span 4;
            grid-row: 1;
        }

        .gallery-item-3 {
            grid-column: span 4;
            grid-row: 2;
        }

        .gallery-item-4 {
            grid-column: span 4;
            grid-row: 2;
        }

        .gallery-item-5 {
            grid-column: span 4;
            grid-row: 2;
        }

        .gallery-item-6 {
            grid-column: span 4;
            grid-row: 3;
        }

        .gallery-item-7 {
            grid-column: span 8;
            grid-row: 3;
        }

        .gallery-item {
            border-radius: 7px;
        }

        .gallery-overlay {
            opacity: 1;
            padding: 8px;
            background: linear-gradient(to top, rgba(0,0,0,.45), transparent 50%);
        }

        .gallery-number {
            font-size: 8px;
        }

        .gallery-view {
            width: 27px;
            height: 27px;
            font-size: 11px;
            transform: none;
        }

    }

    @media (max-width: 400px) {
        .gallery-heading {
            font-size: 28px;
            /* letter-spacing: -2.5px; */
        }

        .gallery-info {
            max-width: 115px;
        }

        .gallery-grid {
            grid-template-rows:
                145px
                145px
                100px;
        }

    }




















    /* ========================================================= */
    /* --- LAYOUT PAGE PRODUCT --- */
    /* ========================================================= */
    #fortress-hero-section {
        position: relative;
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .krypton-bg-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('..//images/background/bgproduct1.jfif');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.2;
        z-index: 1;
    }

    .krypton-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, rgba(14, 11, 38, 0.3) 0%, rgba(7, 6, 20, 0.95) 100%);
        z-index: 2;
    }

    .man-of-steel-content {
        position: relative;
        z-index: 3;
        max-width: 800px;
    }

    .superman-main-title {
        font-size: 3.2rem;
        font-weight: 800;
        letter-spacing: normal;
        line-height: 1.2;
        color: #ffffff;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
    }

    .superman-main-title-kui {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .krypton-description {
        font-size: 1.05rem;
        color: #a0a5c0;
        max-width: 620px;
        margin: 0 auto;
        line-height: 1.3;
        font-weight: 400;
    }

    .superman-action-group {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .btn-superman-outline {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        padding: 10px 24px;
        border-radius: 30px;
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        text-decoration: none;
        backdrop-filter: blur(5px);
    }

    .btn-superman-outline:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.4);
    }

    .btn-superman-primary {
        background-color: #5846f6;
        border: none;
        color: #ffffff;
        padding: 10px 28px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(88, 70, 246, 0.5);
        text-decoration: none;
    }

    .btn-superman-primary:hover {
        background-color: #4332d1;
        box-shadow: 0 6px 25px rgba(88, 70, 246, 0.7);
        color: #ffffff;
    }

    @media (max-width: 768px) {
        .superman-main-title {
            font-size: 2.2rem;
        }
    }

    .hero-monster-ui {
            padding: 50px 10px;
        }
    
        .monster-tabs-wrapper {
            width: 100%;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 8px;
        }
    
        .monster-tabs-wrapper::-webkit-scrollbar {
            display: none;
        }
    
        .monster-tabs {
            display: flex;
            gap: 8px;
            width: max-content;
            margin: 0 auto;    
            justify-content: flex-start;  
        }

        @media (min-width: 768px) {
            .monster-tabs {
                justify-content: center;
            }
        }
    
        .monster-tab-btn {
            color: #8e95a5;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            transition: all 0.3s ease;
            cursor: pointer;
        }
    
        .monster-tab-btn.active {
            background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
            color: #fff !important;
            border: none !important;
            /* box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3); */
        }
    
        .monster-card {
            background: linear-gradient(180deg, rgba(21, 24, 40, 0.95) 0%, rgba(13, 15, 26, 0.98) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 10px;
            /* height: 100%; */
            height: auto;
            display: flex;
            flex-direction: column;
            /* justify-content: space-between; */
            transition: all 0.35s ease;
            /* position: relative; */
        }
    
        .monster-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(168, 85, 247, 0.18);
            border-color: rgba(168, 85, 247, 0.4);
        }
    
        .hero-profile {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 8px;
            gap: 4px;
        }
    
        .hero-info {
            line-height: 1.2;
        }
    
        .hero-names {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            margin: 0;
            line-height: 1.2;
        }
    
        .hero-titles {
            font-size: 10px;
            color: #8e95a5;
            font-weight: 500;
            display: block;
            margin-top: 1px;
        }
    
        .hero-action-btn {
            color: #8e95a5;
            cursor: pointer;
            font-size: 14px;
        }
    
        .monster-img-box {
            background: radial-gradient(circle at center, rgba(168, 85, 247, 0.08) 0%, rgba(11, 13, 23, 0.8) 100%);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            /* margin-bottom: 8px; */
        }
    
        .monster-img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
        }
    
        .product-details-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .product-meta-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
            gap: 4px;
        }

        .product-brand {
            font-size: 9px;
            font-weight: 800;
            color: #a855f7;
            text-transform: uppercase;
            background: rgba(168, 85, 247, 0.12);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(168, 85, 247, 0.25);
        }

        .product-status {
            font-size: 9px;
            font-weight: 600;
            color: #10b981;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .status-dot {
            width: 4px;
            height: 4px;
            background-color: #10b981;
            border-radius: 50%;
        }

        .product-title {
            font-size: 13px;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
            line-height: 1.25;
        }

        .spec-list-container {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 6px 8px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .spec-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 10px;
            line-height: 1.2;
        }

        .spec-label-group {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: #8e95a5;
            font-weight: 500;
        }

        .spec-label-group i {
            font-size: 10px;
            color: #c084fc;
        }

        .spec-val-text {
            font-weight: 700;
            color: #f1f5f9;
            font-size: 10px;
            text-align: right;
        }

        .card-actions {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 2px;
        }

        .btn-detail, .btn-attack {
            flex: 1;
            min-height: 32px;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 6px;
            border-radius: 6px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        .btn-detail {
            background: rgba(255, 255, 255, 0.04);
            color: #cbd5e1;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .btn-attack {
            background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
            border: none;
            color: #fff;
        }

        /* Media Query Layar Besar (Desktop) */
        @media (min-width: 992px) {
            .monster-card {
                padding: 14px;
            }
            .monster-img-box {
                height: 140px;
            }
            .product-title {
                font-size: 15px;
            }
            .spec-row {
                font-size: 11px;
            }
            .btn-detail, .btn-attack {
                min-height: 36px;
                font-size: 11px;
            }
        }











        /* ========================================================= */
        /* --- LAYOUT PAGE CONTACT --- */
        /* ========================================================= */

        .main-wrappers {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 50px 0px;
            min-height: 100vh;
        }

        .ambient-glow-main {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 1000px;
            height: 550px;
            background: radial-gradient(circle, rgba(99, 44, 210, 0.2) 0%, rgba(6, 4, 15, 0) 70%);
            /* background: radial-gradient(circle, rgba(142, 81, 255, 0.35) 0%, rgba(217, 70, 239, 0.18) 40%, rgba(6, 4, 15, 0) 70%); */
            filter: blur(70px);
            z-index: 0;
            pointer-events: none;
        }

        .ambient-glow-secondary {
            position: absolute;
            bottom: 5%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(99, 44, 210, 0.2) 0%, rgba(6, 4, 15, 0) 70%);
            filter: blur(80px);
            z-index: 0;
            pointer-events: none;
        }

        .relative-content {
            position: relative;
            z-index: 1;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            transition: border-color 0.3s ease, transform 0.3s ease;
        }

        .glass-card:hover {
            border-color: rgba(142, 81, 255, 0.3);
        }

        .badge-decorator {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
            border: 1px solid rgba(255, 59, 97, 0.2);
            padding: 6px 14px;
            border-radius: 30px;
        }

        .badge-dot {
            width: 8px;
            height: 8px;
            background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
            border-radius: 50%;
            box-shadow: 0 0 10px #7c3aed;
            animation: pulse-dot 2s infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.85); }
        }

        .badge-text {
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        .left-title {
            font-size: 38px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 30px;
            letter-spacing: -0.5px;
        }

        .btn-touch {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #632cd2 0%, #d946ef 100%);
            color: #ffffff;
            border-radius: 50px;
            padding: 14px 34px;
            font-weight: 700;
            font-size: 0.95rem;
            border: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 30px rgba(99, 44, 210, 0.4);
            text-decoration: none;
        }

        .btn-touch:hover {
            color: #ffffff;
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 18px 38px rgba(217, 70, 239, 0.5);
        }

        .description-text {
            color: #FFFFFF;
            font-size: 16px;
            line-height: 1.3;
            font-weight: 700;
            margin-bottom: 35px;
        }

        .info-label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #8e51ff;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .info-value {
            font-size: 14px;
            font-weight: 100;
            color: #ffffff;
            line-height: 1.3;
            letter-spacing: 1.2px;
            word-break: break-word;
        }

        .info-flex-column {
            display: flex;
            gap: 6px;
        }

        .circle-shortcuts-section {
            margin-bottom: 40px;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .circle-shortcuts-title {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #FFFFFF;
            font-weight: 700;
            margin-bottom: 18px;
            text-align: center;
        }

        .circle-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            justify-items: center;
        }

        .ikutin-circle{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .ikutin-circle:hover .ikutin-circle::before {
            opacity: 1;
        }

        .ikutin-circle:hover {
            border-color: transparent;
            box-shadow: 0 10px 25px rgba(217, 70, 239, 0.5);
        }

        .ikutin-circle:hover i {
            transform: scale(1.15);
        }

        .circle-shortcut-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #ffffff;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            width: 100%;
        }

        .circle-shortcut-item:hover {
            transform: translateY(-6px);
            color: #ffffff;
        }

        .circle-btn {
            width: clamp(50px, 13vw, 70px);
            height: clamp(50px, 13vw, 70px);
            border-radius: 50%;
            background: #128c7e;
            border: 1px solid rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(1.1rem, 3.5vw, 1.4rem);
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .circle-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            /* background: linear-gradient(135deg, #8e51ff, #d946ef); */
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 0;
        }

        .circle-btn i {
            /* font-size: 30px; */
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }

        .circle-shortcut-item:hover .circle-btn::before {
            opacity: 1;
        }

        .circle-shortcut-item:hover .circle-btn {
            border-color: transparent;
            box-shadow: 0 10px 25px #a855f7;
        }

        .circle-shortcut-item:hover .circle-btn i {
            transform: scale(1.15);
        }

        .circle-label {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            color: #FFFFFF;
            transition: color 0.3s ease;
        }

        .circle-shortcut-item:hover .circle-label {
            color: #ffffff;
        }

        iframe{
            border-radius: 10px;
        }

        @media (max-width: 991px) {
            .glass-card {
                padding: 24px 18px;
            }
            iframe{
                width: 100%;
                height: 200px;
            }

            .hero-sections {
                padding-top: 40px;
                padding-bottom: 35px;
            }

            .info-value{
                text-align: center;
            }

            .left-title {
                margin-bottom: 20px;
            }

            .circle-grid {
                gap: 8px;
            }
        }