@font-face {
    font-family: 'tt_firs_neue_trlregular';
    src: url('../fonts/tt_firs_neue_trial_regular-webfont.woff2') format('woff2'),
         url('../fonts/tt_firs_neue_trial_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tt_firs_neue_trlblack';
    src: url('../fonts/tt_firs_neue_trial_black-webfont.woff2') format('woff2'),
         url('../fonts/tt_firs_neue_trial_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'tt_firs_neue_trlmedium';
    src: url('../fonts/tt_firs_neue_trial_medium-webfont.woff2') format('woff2'),
         url('../fonts/tt_firs_neue_trial_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tt_firs_neue_trlbold';
    src: url('../fonts/tt_firs_neue_trial_bold-webfont.woff2') format('woff2'),
         url('../fonts/tt_firs_neue_trial_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}



.font-reg{font-family: 'tt_firs_neue_trlregular' !important;}

.font-tebal{font-family: 'tt_firs_neue_trlblack' !important;}

.font-radal{font-family: 'tt_firs_neue_trlbold' !important;}

        /* Menghilangkan margin dan padding default */
        * {
            max-width: 100vw; /* Pastikan tidak ada elemen yang melebihi viewport */
        }
        
        html {
            overflow-x: hidden !important; /* Kunci scroll horizontal - SELALU */
            overflow-y: hidden; /* Kunci scroll vertikal awal */
            width: 100%;
            position: relative;
        }
        
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            max-width: 100vw; /* Pastikan body tidak melebihi viewport */
            height: 100%; /* Pastikan tinggi penuh */
            overflow-x: hidden !important; /* Kunci scroll horizontal - SELALU */
            overflow-y: hidden; /* Kunci scroll vertikal - akan di-unlock oleh JS setelah klik */
            position: relative;
            /* Latar belakang body tetap hitam pekat */
            background-color: #000000; 
            color: white;
            font-family: 'tt_firs_neue_trlmedium';
        }
        
        /* BARU: Class untuk unlock scroll setelah transisi */
        body.scroll-unlocked {
            overflow-x: hidden !important; /* Tetap kunci horizontal */
            overflow-y: auto !important; /* Hanya unlock vertikal */
        }
        
        html.scroll-unlocked {
            overflow-x: hidden; /* Tetap kunci horizontal */
            overflow-y: auto; /* Hanya unlock vertikal */
        }

        /* DIHAPUS: #horizon-bg dihapus */
        
        /* --- BARU: Custom Cursor --- */
        /* Sembunyikan kursor default */
        html, body {
            cursor: none;
        }

        /* Gaya untuk titik tengah kursor */
        #cursor-dot {
            position: fixed;
            top: 0;
            left: 0;
            width: 6px;
            height: 6px;
            background-color: white; /* Default putih */
            border-radius: 50%;
            z-index: 9999; /* Pastikan di atas segalanya */
            pointer-events: none; /* Biarkan klik "tembus" */
            transform: translate(-50%, -50%); /* Pusatkan di mouse */
            opacity: 1;
            transition: background-color 0.3s ease, opacity 0.3s ease;
        }

        /* Gaya untuk lingkaran luar kursor */
        #cursor-ring {
            position: fixed;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border: 2px solid white; /* Default putih */
            border-radius: 50%;
            z-index: 9999; /* Pastikan di atas segalanya */
            pointer-events: none; /* Biarkan klik "tembus" */
            transform: translate(-50%, -50%); /* Pusatkan di mouse */
            /* Transisi untuk animasi membesar/mengecil */
            transition: width 0.3s ease, height 0.3s ease, border-width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
        }
        
        /* BARU: Kelas untuk Kursor Emas (S5) */
        .cursor-gold #cursor-dot, .cursor-gold #cursor-ring {
            background-color: #FFBE00 !important;
            border-color: #FFBE00 !important;
        }

        /* BARU: Kelas untuk Kursor Hitam (S6/S7) */
        .cursor-black #cursor-dot {
            background-color: black !important;
        }
        .cursor-black #cursor-ring {
            border-color: black !important;
        }


        /* Status "grow" saat hover di elemen yang bisa diklik */
        #cursor-ring.cursor-grow {
            width: 60px; /* Membesar */
            height: 60px;
            border-width: 1px; /* Menipis */
            /* BARU: Ubah warna border dan tambahkan fill */
            border-color: #FFBE00; 
            background-color: rgba(255, 190, 0, 0.2); 
        }
        
        /* Kursor grow saat di S6 (hitam) */
        .cursor-black #cursor-ring.cursor-grow {
            border-color: black; 
            background-color: rgba(0, 0, 0, 0.2); 
        }

        /* --- PERBAIKAN BARU: Override Paksa Warna Emas pada Kursor --- */
        /* Digunakan khusus untuk Language Selector agar selalu emas (override hitam) */
        #cursor-ring.force-gold {
            border-color: #FFBE00 !important;
            background-color: rgba(255, 190, 0, 0.2) !important;
        }


        /* --- Akhir Custom Cursor --- */


        /* --- DIUBAH TOTAL: Header Bar (Penampung Logo dan Navbar) --- */
        #header-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* FEEDBACK 1: Kurangi padding vertikal */
            padding: 3vh 5%;
            box-sizing: border-box;
            z-index: 9998;
            transform: translateY(0);
            background-color: transparent; 
            backdrop-filter: none;
            opacity: 1; 

            transition: transform 0.3s ease-in-out, padding 0.3s ease; 
            pointer-events: none; 
        }

        /* BARU: Style Glassmorphism saat aktif (Diterapkan di JS via class) */
        #header-bar.glassmorphed-bg {
            
        }
        
        
        #header-bar.glassmorphed-black {
            /* Latar belakang Black */
        }
        
        /* BARU: Efek transisi untuk padding agar smooth */
        #header-bar {
             transition: transform 0.3s ease-in-out, background-color 0.3s ease, backdrop-filter 0.3s ease, border 0.3s ease, padding 0.3s ease;
        }
        
        /* BARU: Kelas untuk mengubah warna navbar (digunakan di S6) */
        .navbar-light-mode .nav-item,
        .navbar-light-mode #lang-selector-display, /* BARU: selector display */
        .navbar-light-mode .lang-arrow path,
        .navbar-light-mode .lang-option-item { /* BARU: option item */
            color: #FFBE00 !important;
            background-color: transparent !important;
            fill: transparent !important;
            stroke: #FFBE00 !important;
        }
        
        /* PERBAIKAN 1: Burger icon S6/S7 (Orange) */
        .navbar-light-mode #burger-menu span {
            background-color: #FFBE00 !important; /* Warna Orange */
        }


        /* BARU: Style untuk Logo (Dipindahkan ke dalam #header-bar) */
        #top-logo {
            position: relative; 
            top: 0; 
            left: 0; 
            width: 80px; 
            height: auto;
            z-index: 10; 
            pointer-events: auto; 
            opacity: 0; 
            filter: blur(10px);
            transform: translateY(20px);
        }

        /* --- BARU: Navbar Container (Menampung Links dan Controls) --- */
        #navbar-container {
            position: relative; 
            top: 0; 
            right: 0; 
            z-index: 10;
            display: flex;
            align-items: center;
            transform: none;
            transition: none;
        }

        #nav-links {
            display: flex;
            gap: 1.5rem; /* Jarak antar item */
            margin-right: 1.5rem; /* Jarak dari burger */
        }

        .nav-item {
            color: white;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 0.875rem;
            pointer-events: auto; /* Agar bisa di-hover */
            /* Status awal (diset GSAP) */
            opacity: 0;
            transform: translateX(20px);
            white-space: nowrap; /* Mencegah teks patah baris */
            transition: color 0.3s ease; /* Tambahkan transisi warna */
        }
        
        /* ========================================================================= */
        /* --- START: STYLES BARU UNTUK LANGUAGE SELECTOR MODERN --- */
        /* ========================================================================= */
        
        #lang-selector-container {
            pointer-events: auto;
            position: relative; 
            display: flex; 
            align-items: center; 
            padding: 0.25rem 0.5rem; 
            border-radius: 4px; 
            transition: background-color 0.3s ease;
            z-index: 1001; /* Pastikan di atas navbar lain */
        }
        
        /* Tampilan yang terlihat (Current Selection + Arrow) */
        #lang-selector-display {
            background-color: transparent;
            color: white;
            border: none;
            outline: none; 
            padding: 0; 
            border-radius: 4px;
            font-family: 'tt_firs_neue_trlmedium';
            font-size: 0.875rem; 
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: none; 
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        /* Panah Dropdown */
        .lang-arrow {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }
        .lang-arrow path {
            stroke: white; 
            transition: stroke 0.3s ease;
        }
        
        /* Kontainer Dropdown (Hidden by default) */
        #lang-dropdown {
            position: absolute;
            top: 100%; /* Di bawah kontainer utama */
            right: 0;
            min-width: 100%;
            margin-top: 5px;
            background-color: #000000; /* Background gelap */
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        }

        #lang-selector-container.open #lang-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        /* Item Opsi di Dropdown */
        .lang-option-item {
            padding: 0.5rem 1rem;
            color: white;
            font-size: 0.875rem; 
            text-transform: uppercase;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        
        /* Warna Emas untuk Opsi Aktif/Hover (TERMASUK HOVER) */
        .lang-option-item:hover,
        .lang-option-item.active {
            background-color: rgba(255, 190, 0, 0.15); 
            color: #FFBE00; /* Warna Teks Emas saat hover/aktif */
        }
        
        /* Hover pada Container Utama */
        #lang-selector-container:hover {
            background-color: rgba(255, 190, 0, 0.1); 
        }

        /* Panah Berputar saat terbuka */
        #lang-selector-container.open .lang-arrow {
            transform: rotate(180deg);
        }

        /* Warna Emas Saat Hover pada Display */
        #lang-selector-container:hover #lang-selector-display,
        .navbar-light-mode #lang-selector-container:hover #lang-selector-display {
            color: #FFBE00 !important;
        }
        #lang-selector-container:hover .lang-arrow path,
        .navbar-light-mode #lang-selector-container:hover .lang-arrow path {
            stroke: #FFBE00 !important;
        }
        
        /* ========================================================================= */
        /* --- END: STYLES BARU UNTUK LANGUAGE SELECTOR MODERN --- */
        /* ========================================================================= */


        /* DIHAPUS: Style untuk <select> lama */
        /* DIHAPUS: Style untuk <option> lama */
        /* DIHAPUS: Style untuk panah dropdown kustom lama */


        /* DIUBAH: Pisahkan properti animasi ke kelas baru */
        .nav-control-item {
            opacity: 0; /* Dimulai dari 0 */
            filter: blur(10px);
            transform: translateY(20px);
        }

        #burger-menu {
            width: 30px;
            height: 22px; /* Sedikit lebih pendek */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            pointer-events: auto;
            z-index: 10000;
            margin-right: 1.5rem; /* BARU: Jarak ke pemilih bahasa */
        }
        
        #burger-menu span {
            width: 100%;
            height: 2px;
            background-color: white;
            transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
            transform-origin: center; /* Untuk rotasi */
        }

        /* Animasi 'X' saat navbar-open */
        .navbar-open #burger-menu span:nth-child(1) {
            transform: translateY(10px) rotate(45deg);
        }
        .navbar-open #burger-menu span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .navbar-open #burger-menu span:nth-child(3) {
            transform: translateY(-10px) rotate(-45deg);
        }
        /* --- Akhir Navbar --- */


        /* DIHAPUS: Canvas dihapus total */
        /*
        canvas {
            position: fixed; 
            top: 0;           
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            z-index: 101; 
        }
        */

        /* Gaya dasar untuk Section */
        .section {
            width: 100vw;
            min-height: 100vh;
            box-sizing: border-box;
            padding: 15vh 5%;
            margin: 0; 
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative; 
            z-index: 102; /* LAPISAN ATAS: (Teks S2/S3) */
        }
        
        /* Section 1: DIUBAH total untuk video BG */
        #section1 {
            background-color: #000000;
            justify-content: center; /* Rata tengah vertikal */
            align-items: center; /* Rata tengah horizontal */
            z-index: 100; /* Di lapisan bawah, di atas video */
            
            /* Background image lama dihapus */
            background-image: none;
            
            transform-origin: center center; 
            opacity: 1; 
            transition: opacity 0.5s ease-in-out; 
            overflow: hidden; /* Penting untuk video */
        }

        /* BARU: Video Latar Belakang untuk S1 */
        #video-bg-s1 {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: 1; /* Di bawah overlay dan konten */
            transform: translate(-50%, -50%);
            object-fit: cover;
            /* BARU: Tambahkan overlay gelap di CSS agar teks terbaca di atas video */
            filter: brightness(0.6) grayscale(0.2); 
            transition: filter 0.5s ease-in-out;
        }

        /* BARU: Wrapper untuk memposisikan headline di atas segalanya */
        #headline-wrapper {
            position: absolute; /* Diposisikan di atas S1 */
            top: 0;
            left: 0;
            width: 100vw;
            min-height: 100vh;
            box-sizing: border-box;
            padding: 15vh 5%;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 102; /* Di atas video (1) */
            pointer-events: none; /* Biarkan klik "tembus" ke tombol click-discover */
        }

        #click-discover:hover {
            letter-spacing: 0.25em;
            transform: scale(1.05);
        }

        
        /* --- BARU DITAMBAHKAN: Class untuk hover horizon (DIUBAH UNTUK VIDEO) --- */
        body.horizon-visible #section1 #video-bg-s1 {
            filter: brightness(1) grayscale(0); /* Brightness penuh saat hover */
        }
        
        /* BARU: Gaya untuk Wrapper Teks DH */
        #dh-logo-text-wrapper {
            /* Menggantikan properti gambar dh-logo-image */
            width: 85vw; /* Lebar relatif terhadap viewport */    
            height: auto; /* Disesuaikan dengan konten teks */
            text-align: center;
            z-index: 200; 
            pointer-events: auto; 
            
            /* Animasi diatur via GSAP set/to */
        }

        /* BARU: Gaya untuk teks "DARMA HENWA" (lebih kecil) */
        #dh-logo-text-wrapper h3 {
            font-size: 3.5vw; /* Lebih kecil dari REVOLUTIONIZED */
            font-weight: 400; /* Medium/Regular */
            margin: 0;
            line-height: 1.2;
            text-transform: uppercase;
            
            /* Properti Awal untuk Animasi H3 */
            opacity: 0;
            filter: blur(5px);
            /* transform: scale(1.1); DIHAPUS agar tidak membesar sendiri setelah animasi */
        }
        
        /* BARU: Gaya untuk teks "REVOLUTIONIZED" (besar, tebal) */
        #dh-logo-text-wrapper h1 {
            
            margin: 1vw 0 0 0; /* Margin negatif untuk merapatkan ke atas */
            line-height: 1.0;
            text-transform: uppercase;
            color: white; /* Default warna putih */
            /* Properti Awal untuk Animasi H1 */
            opacity: 0;
            /* Transform scale akan diatur oleh GSAP dari 3 -> 1 */
        }
        
        /* Responsive adjustments for headline text */
        @media (max-width: 768px) {
            #dh-logo-text-wrapper {
                width: 90vw;
                max-width: 400px;
            }
            #dh-logo-text-wrapper h3 {
                font-size: 1.5rem;
                /* Reset transform default h3 di mobile */
                transform: scale(1);
            }
            #dh-logo-text-wrapper h1 {
                font-size: 2.5rem; /* Ukuran yang lebih wajar di mobile */
                margin-top: 0rem;
                /* Reset transform default h1 di mobile */
                transform: scale(1);
            }
            /* BARU: Sesuaikan padding header di mobile */
            #header-bar {
                padding: 3vh 5%;
            }
            #header-bar.glassmorphed-bg {
                padding-top: 1.5vh;
                padding-bottom: 1.5vh;
            }
        }

        /* Section 2: DIUBAH menjadi transparan */
        #section2 {
            background-color: transparent; /* DIUBAH */
            justify-content: center; 
            align-items: center; 
            text-align: center; 
            opacity: 0; 
        }
        
        /* Section 3: DIUBAH menjadi transparan */
        #section3 {
            background-color: transparent; 
            flex-direction: column; 
            justify-content: center; 
            align-items: flex-start; 
            gap: 3rem; 
            z-index: 103; 
        }

        /* BARU: Helper classes untuk kolom section 3 */
        .sec3-col-left {
            width: 58.333333%; /* DIUBAH: dari 66.66% (8/12 -> 7/12) */
            padding-right: 2rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .sec3-col-right {
            width: 41.666667%; /* DIUBAH: dari 33.33% (4/12 -> 5/12) */
            padding-left: 2rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center; /* DIUBAH: dari flex-start */
            justify-content: center; /* BARU: Ditambahkan justify-center */
        }
        
        .profile-card {
            position: relative;
            width: 100%;
            max-width: 400px; /* Batas maksimum agar tidak terlalu lebar */
            border-radius: 1rem; /* rounded-xl */
            overflow: hidden; /* Memastikan overlay mematuhi border radius */
            margin-top: 1.5rem;
            /* BARU: Pastikan pointer-events aktif untuk hover cursor */
            pointer-events: auto;
        }
        
        .profile-card img {
            width: 100%;
            display: block;
        }
        
        .profile-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 2rem 1.5rem 1.5rem 1.5rem;
            box-sizing: border-box;
            background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
        }

        /* --- BARU: Style untuk Section 3 (Versi Desain Ulang) --- */
        .sec3-new-top { /* DIUBAH: dari sec3-new-left */
            width: 100%; /* DIUBAH: dari 5/12 */
            padding-right: 0; /* DIUBAH: dari 2rem */
            box-sizing: border-box;
            display: flex;
            flex-direction: row; /* DIUBAH: dari column (desktop=row) */
            justify-content: space-between; /* DIUBAH: dari center (desktop=space-between) */
            align-items: center; /* BARU: (desktop=vertical center) */
            gap: 2rem; /* DIUBAH: Jarak antar grup teks and CTA */
        }
        
        .sec3-new-bottom { /* DIUBAH: dari sec3-new-right */
            width: 100%; /* DIUBAH: dari 7/12 */
            padding-left: 0; /* DIUBAH: dari 2rem */
            box-sizing: border-box;
            position: relative; /* Untuk overlay */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* PERBAIKAN 1: Tambahkan data-default-src pada logo untuk transisi */
        #top-logo {
            /* ... style lainnya ... */
        }

        .sec3-jumbotron-image {
            width: 100%; /* Lebar 100% dari container (col-right) */
            height: 70vh; /* Tinggi jumbotron */
            object-fit: cover;
            border-radius: 1rem;
            position: relative;
        }
        
        .sec3-image-overlay {
            position: absolute;
            top: 0;
            /* left: 0; (DIHAPUS) */
            right: 0; /* BARU: Pindahkan ke kanan */
            width: 30%; /* DIUBAH: dari 40% ke 50% */
            padding: 4rem 2rem 2rem 4rem;
            box-sizing: border-box;
            border-radius: 0 0 1rem 0; /* DIUBAH: Sesuaikan radius (hanya kanan-bawah) */
            z-index: 104; /* DIUBAH: Naikkan z-index agar di atas divider */
            text-align: left; /* BARU: Pastikan teks rata kiri */
            color: #000;
        }

        /* --- DIUBAH: Style untuk blur divider (sekarang sebagai pembatas section) --- */
        .sec3-blur-divider {
            position: absolute;
            bottom: -10rem; /* Posisi di paling bawah Section 3 */
            /* === PERUBAHAN DIMULAI === */
            /* 'left' dan 'width' diubah untuk full-bleed (mengabaikan padding) */
            left: 50%;
            width: 100vw; /* Lebar 100% dari viewport */
            /* === PERUBAHAN SELESAI === */
            height: auto; /* Menjaga rasio aspek gambar blur */
            z-index: -1; /* Di atas S3 (102) dan S4 (102) */
            pointer-events: none; /* Biarkan klik tembus */
            /* === PERUBAHAN DIMULAI === */
            /* Ditambahkan translateX(-50%) untuk memusatkan */
            transform: translateX(-50%) translateY(50%) scale(1.2);
            /* === PERUBAHAN SELESAI === */
            /* border-radius: 0 0 1rem 1rem; (DIHAPUS) */
        }


         /* --- DIUBAH: Style untuk blur divider (sekarang sebagai pembatas section) --- */
        .sec3-blur-divider2 {
            position: absolute;
            top:0%; /* Posisi di paling bawah Section 3 */
            /* === PERUBAHAN DIMULAI === */
            /* 'left' dan 'width' diubah untuk full-bleed (mengabaikan padding) */
            left: 50%;
            width: 100vw; /* Lebar 100% dari viewport */
            /* === PERUBAHAN SELESAI === */
            height: auto; /* Menjaga rasio aspek gambar blur */
            z-index: 1; /* Di atas S3 (102) dan S4 (102) */
            pointer-events: none; /* Biarkan klik tembus */
            /* === PERUBAHAN DIMULAI === */
            /* Ditambahkan translateX(-50%) untuk memusatkan */
            transform: translateX(-50%) translateY(-50%) scale(1.2);
            /* === PERUBAHAN SELESAI === */
            /* border-radius: 0 0 1rem 1rem; (DIHAPUS) */
        }

        /* --- BARU: Style untuk Section 3 (Versi Desain Ulang) --- */
        /* DIUBAH: Perbaikan total untuk CTA yang rusak */
        .double-ring-cta {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 160px; /* Ukuran lingkaran luar */
            height: 160px;
            flex-shrink: 0; /* BARU: Mencegah tombol 'gepeng' (squashed) di S4 (DITAMBAHKAN KEMBALI) */
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3); /* DIUBAH: CINCIN LUAR (Tipis) */
            text-decoration: none;
            color: white;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-align: center; /* Untuk 2 baris */
            transition: border-color 0.3s ease, color 0.3s ease;
            pointer-events: auto;
        }
        
        .double-ring-cta::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 14px;
            right: 14px;
            bottom: 14px;
            
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 1); /* DIUBAH: INI CINCIN DALAM (Tebal) */
            
            /* Transisi untuk hover */
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .double-ring-cta:hover {
            border-color: #FFBE00; /* Cincin luar berubah warna */
            color: #FFBE00; /* Teks berubah warna */
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        
        .double-ring-cta:hover::before {
            transform: scale(0.9); /* Cincin dalam mengecil */
            border-color: #FFBE00; /* Cincin dalam berubah warna */
            border: 3px solid rgb(255, 190, 0, 1);
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        /* --- Akhir Style Section 3 Baru --- */


        /* Teks Judul dan Subjudul - Z-INDEX NAIK DRASTIS (200) */
        
        /* CSS untuk Teks Emas (Tetap ada jika digunakan di tempat lain) */
        .text-gold {
            color: #FFBE00;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            /* DIHAPUS: #headline font-size karena sudah diganti gambar */
            /* #dh-logo-image sudah diganti dh-logo-text-wrapper di atas */
            #subheadline {
                width: 90%;
                font-size: 1.1rem;
            }
            
            /* DIUBAH: Aturan layout kolom mobile berlaku untuk S3 & S4 */
            #section3, #section4 {
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
            }
            
            /* BARU: Aturan mobile untuk layout S3 baru */
            .sec3-new-top {
                flex-direction: column; /* Tumpuk di mobile */
                align-items: flex-start; /* Ratakan kiri di mobile */
                gap: 3.5rem; /* Kembalikan gap mobile */
            }
            .sec3-image-overlay {
                width: 100%; /* Full-width di mobile */
                left: 0; /* Kembalikan ke kiri */
                border-radius: 0 0 1rem 1rem; /* Radius penuh di mobile */
                padding: 2rem 1.5rem; /* Padding mobile */
            }
            
            /* DIUBAH: Targetkan kelas baru dan kelas lama */
            .sec3-col-left, .sec3-col-right,
            .sec3-new-left, .sec3-new-right,
            .sec3-new-top, .sec3-new-bottom {
                width: 100%;
                padding-left: 0;
                padding-right: 0;
            }
            
            /* DIUBAH: Targetkan kelas baru dan kelas lama */
            .sec3-new-right,
            .sec3-new-bottom {
                margin-top: 3rem; /* Memberi jarak antar kolom saat ditumpuk */
            }

            /* BARU: Aturan mobile for S4 CTA wrapper */
            .s4-p-cta-wrapper {
               
            }
            .s4-p-cta-wrapper .double-ring-cta {
                
            }


            /* DIUBAH: Sembunyikan nav-links di mobile (hanya burger) */
            #nav-links {
                display: none;
            }

            /* BARU: Aturan S5 mobile (sudah default column) */
            .s5-layout-wrapper {
                display: flex; /* BARU: Ditambahkan */
                flex-direction: column; /* BARU: Ditambahkan */
                align-items: center; /* BARU: Ditambahkan untuk memusatkan */
                gap: 2.5rem; /* BARU: Jarak di mobile */
                text-align: center; /* Pusatkan teks di mobile */
                width: 100%; /* BARU: Pastikan lebar penuh */
            }
            .s5-col-text {
                text-align: center;
            }
            /* BARU: Tambahkan perataan teks untuk kolom 2 di mobile */
            .s5-col-description { /* DIUBAH: dari .s5-col-image */
                text-align: center;
            }
        }
        
        /* BARU: Sembunyikan elemen animasi section 2 awalnya */
        .sec2-anim-item {
            opacity: 0;
            visibility: hidden;
            transform: translateY(30px); /* Posisi awal Y dari bawah */
            filter: blur(5px); /* BARU: Tambahan blur awal */
        }
        
        /* BARU: Sembunyikan elemen animasi section 3 awalnya */
        .sec3-anim-item {
            opacity: 0;
            visibility: hidden;
            transform: translateY(30px); /* Posisi awal Y dari bawah */
            filter: blur(5px); /* BARU: Tambahan blur awal */
        }

        /* DIUBAH: Section 4 dilepas dari grup untuk layout unik */
        #section4 {
            /* BARU: Tambahan background image */
            background-image: url('/assets/images/managementbg2.jpg');
            background-size: cover;
            background-position: center;

            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            opacity: 0;
            
            /* BARU: Dibutuhkan untuk pseudo-element overlay */
            position: relative; 
        }

        /* BARU: Menambahkan overlay gelap agar teks di S4 terbaca */
        #section4::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background-color: rgba(0, 0, 0, 0.5); Overlay hitam 50% */
            z-index: 1; /* Di bawah konten, di atas BG */
        }

        /* BARU: Pastikan konten S4 di atas overlay */
        #section4 .sec3-col-left,
        #section4 .sec3-col-right {
            position: relative; /* Dibutuhkan untuk stacking context */
            z-index: 2; /* Di atas overlay (z-index: 1) */
        }

        /* BARU: Style untuk section 5, 6, 7 */
        /* DIUBAH: Aturan #section5 dipisah */
        #section5 {
            /* Background image dihapus, diganti video di HTML */
            
            min-height: 0; /* BARU: Override min-height 100vh dari .section */

            /* Override .section defaults untuk memusatkan wrapper */
            justify-content: center;
            align-items: center;
            
            /* BARU: Diperlukan untuk overlay */
            position: relative;
            z-index: 103; /* BARU: Dinaikkan agar di atas S6 */
        }

        /* BARU: Video Latar Belakang untuk S5 */
        #video-bg-s5 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1; /* Di belakang konten S5 */
        }
        
        #section6 {
            background-color: #ffffff; /* DIUBAH: dari #111111 */
            color: #000000; /* BARU: Teks hitam */
            justify-content: flex-start; /* DIUBAH: dari center (agar konten di atas) */
            align-items: center;
            text-align: center;
            padding-top: 15vh; /* BARU: Beri padding atas */
            min-height: 110vh; /* BARU: Tambah tinggi sedikit untuk konten tab */
        }

        /* BARU: Section 7 (ESG) */
        #section7 {
            background-image: url('https://ogilvyoneid.com/DH/bgsection7.jpg');
            background-size: cover;
            background-position: center;
            background-color: #000000; /* Fallback */
            /* === PERUBAHAN: Teks Hitam === */
            color: #000000; 
            /* ============================== */
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 100vh;
            position: relative;
            z-index: 102; 
        }

        /* BARU: Overlay gelap untuk Section 7 agar teks terbaca */
        #section7::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; /* Di bawah konten S7 */
        }

        /* BARU: Pastikan konten S7 di atas overlay */
        #section7 > div {
            position: relative;
            z-index: 2;
            width: 100%; /* agar max-width bisa diterapkan di dalamnya */
        }
        
        /* BARU: Aturan khusus untuk teks emas di S7 (sekarang hitam) */
        #section7 .text-gold {
            /* === PERUBAHAN: Teks Emas di S7 menjadi Hitam === */
            color: #000000; 
            /* ================================================= */
        }


        /* BARU: Sembunyikan elemen animasi section 4, 5, 6, 7 awalnya */
        .sec4-anim-item,
        .sec6-anim-item,
        .sec7-anim-item { /* BARU: Tambah .sec7-anim-item */
            opacity: 0;
            visibility: hidden;
            transform: translateY(30px);
            filter: blur(5px);
        }

        /* --- BARU: Style untuk Wrapper CTA Section 4 --- */
        .s4-p-cta-wrapper {  
        }
        .s5-col-text {
            text-align: left; /* Default rata kiri */
            width: 100%; /* BARU: Set 100% untuk mobile */
            overflow: hidden; /* BARU: Ditambahkan untuk "menahan" marquee agar tidak mendorong kolom lain */
            min-width: 0; /* <<< PERBAIKAN KUNCI: Mencegah flex item mendorong kolom lain */
        }
        .s5-col-description { /* DIUBAH: dari .s5-col-image */
            width: 30%; /* DIUBAH: dari 100% menjadi 80% */
        }
        /* --- Akhir Style S5 --- */


        /* --- BARU: Style Carousel Section 4 --- */
        .carousel-container {
            position: relative;
            max-width: 400px; /* Samakan dengan .profile-card max-width */
            border-radius: 1rem; /* Terapkan radius ke container */
            aspect-ratio: 4/5; /* BARU: Beri A/R agar container tidak collapse */
        }
        .carousel-track {
            position: relative; /* BARU: Untuk menampung slide absolute */
            width: 100%;
            height: 100%;
        }
        .carousel-slide {
            position: absolute;
            top: 0;
            left: 10%; /* (100% - 80%) / 2 */
            width: 80%; 
            height: 100%; 
            box-sizing: border-box;
            transform: scale(0.7) translateX(0); /* Mulai dari tengah, kecil */
            opacity: 0; /* Mulai dari transparan */
            transition: transform 0.5s ease, opacity 0.5s ease, z-index 0.5s ease;
            z-index: 1; /* Paling belakang */
        }
        
        .carousel-slide.slide-active {
            transform: scale(1) translateX(0); /* DIUBAH: Tambah translateX */
            opacity: 1;
            z-index: 10;
        }

        /* BARU: Style untuk slide .slide-prev (sebelumnya) */
        .carousel-slide.slide-prev {
            transform: scale(0.85) translateX(-20%); /* DIUBAH: dari -40% (lebih rapat) */
            opacity: 0.6;
            z-index: 5;
        }
        
        /* BARU: Style untuk slide .slide-next (berikutnya) */
        .carousel-slide.slide-next {
            transform: scale(0.85) translateX(20%); /* DIUBAH: dari 40% (lebih rapat) */
            opacity: 0.6;
            z-index: 5;
        }
        
        /* DIUBAH: Nama kelas dari .active menjadi .slide-active */
        .carousel-slide.slide-active .profile-overlay {
            /* Gradien dari #FF8710 (100% opacity) ke #FFBE00 (0% opacity) */
            background: linear-gradient(to right, #FF8710 0%, rgba(255, 190, 0, 0) 100%);
        }
        /* DIUBAH: Nama kelas dari .active menjadi .slide-active */
        .carousel-slide.slide-active .profile-overlay p:last-child {
            color: white; /* Judul (President Director) jadi putih */
        }
        
        /* Hapus style berlebih dari profile-card di dalam slide */
        .carousel-slide .profile-card {
            margin-top: 0;
            width: 100%;
            max-width: none;
            height: 100%; 
            box-sizing: border-box;

            /* --- BARU: Ditambahkan untuk menampung img --- */
            position: relative;
        }

        /* BARU: Style untuk latar belakang card yang lebih pendek */
        .card-bg {
            position: absolute;
            top: 18%; /* Mulai 15% dari atas, menyisakan 15% ruang di atas */
            left: 0;
            width: 99%;
            height: 85%; /* 100% - 15% */
            
            /* Style yang dipindahkan dari .profile-card */
            background: linear-gradient(to bottom, #1B192A 0%, #ffffff 61%);
            border: 1px solid white;
            border-radius: 1rem; 
            
            z-index: 1; /* Di belakang gambar dan overlay */
        }

        /* PERUBAHAN: Style untuk panah carousel Section 4 */
        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: transparent; /* DIUBAH */
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: none; /* Kursor kustom */
            pointer-events: auto;
            transition: opacity 0.3s ease, transform 0.3s ease; /* DIUBAH */
            display: block; 
            padding: 0; /* BARU */
        }
        .carousel-arrow img { /* BARU */
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .carousel-arrow.left {
            left: -2.5rem; /* DIUBAH: dari 0.5rem (keluar container) */
            transform: translateY(-50%) rotate(180deg); /* BARU: Putar panah kiri */
        }

        /* BARU: Tambahkan rule hover spesifik untuk panah kiri */
        .carousel-arrow.left:hover {
            transform: translateY(-50%) rotate(180deg) scale(1.1); /* BARU: Jaga putaran saat hover */
            opacity: 0.8; /* BARU: Samakan opacity hover */
        }
        .carousel-arrow.right {
            right: -2.5rem; /* DIUBAH: dari 0.5rem (keluar container) */
        }
        /* BARU: hover untuk .right */
        .carousel-arrow.right:hover {
            transform: translateY(-50%) scale(1.1);
            opacity: 0.8;
        }
        
        /* Fix umum untuk arrow hover */
        .carousel-arrow:hover {
             /* Aturan ini bisa ditimpa oleh left/right specific rules di atas */
        }

        /* --- Akhir Style Carousel --- */


        /* --- BARU: Style Kontrol Musik --- */
        #music-controls-container {
            
        }

        #play-pause-btn {
            background: transparent;
            border: 1px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: none; /* Gunakan kursor kustom */
            pointer-events: auto; /* Tombol bisa diklik */
            padding: 0;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        
        #play-pause-btn svg {
            fill: white;
            transition: fill 0.3s ease;
        }

        /* Ini akan dicocokkan oleh JS kursor kustom via classList.add('cursor-grow') */
        #play-pause-btn:hover { 
            border-color: #FFBE00;
        }
        #play-pause-btn:hover svg {
            fill: #FFBE00;
        }

        .sound-bars-wrapper {
            display: flex;
            align-items: flex-end;
            height: 24px;
            gap: 3px;
        }

        .sound-bars-wrapper span {
            width: 3px;
            height: 4px; /* Tinggi minimum */
            background-color: white;
            display: block;
            animation: sound-wave 1.2s infinite ease-in-out;
            animation-play-state: paused; /* Mulai dalam keadaan diam */
        }

        /* Animasi bar */
        @keyframes sound-wave {
            0%, 100% { height: 4px; opacity: 0.7; }
            50% { height: 24px; opacity: 1; }
        }

        /* Delay animasi untuk setiap bar */
        .sound-bars-wrapper span:nth-child(1) { animation-delay: 0s; }
        .sound-bars-wrapper span:nth-child(2) { animation-delay: -1.0s; }
        .sound-bars-wrapper span:nth-child(3) { animation-delay: -0.8s; }
        .sound-bars-wrapper span:nth-child(4) { animation-delay: -0.6s; }

        /* Style saat musik BERMAIN */
        #music-controls-container.playing .sound-bars-wrapper span {
            animation-play-state: running;
        }

        /* BARU: Atur visibilitas ikon default */
        .play-icon {
            display: block;
        }
        .pause-icon {
            display: none;
        }

        #music-controls-container.playing .play-icon {
            display: none;
        }
        
        #music-controls-container.playing .pause-icon {
            display: block;
        }
        /* --- Akhir Style Kontrol Musik --- */

        /* --- DIUBAH TOTAL: Style Footer Baru (2 Kolom Tumpuk) --- */
        #main-footer {
            width: 100vw;
            padding: 0; 
            box-sizing: border-box;
            background-color: #111111; /* Fallback */
            /* === PERUBAHAN: Warna teks utama di footer sekarang putih === */
            color: white; 
            /* ========================================================== */
            display: flex;
            /* === PERUBAHAN UTAMA: Ubah flex-direction menjadi column === */
            flex-direction: column; 
            /* ========================================================== */
            z-index: 102; 
            position: relative;
        }
        
        .footer-col-1 {
            background-color: #FDBB11; /* Kolom Kiri: Warna Emas */
            /* === PERUBAHAN: Warna teks di kolom 1 menjadi Putih === */
            color: #000000; 
            /* ======================================================= */
            padding: 4rem 5%;
            box-sizing: border-box;
            /* DIUBAH: Ganti flex basis agar full width di tumpukan */
            flex: 1; 
            width: 100%;
            /* Teks dan menu diatur dalam flex container row di desktop */
            display: flex;
            flex-direction: column; 
            gap: 1.5rem;
        }
        
        /* BARU: Container untuk konten dalam Kolom 1 (agar bisa horizontal di desktop) */
        .footer-content-wrapper {
            display: flex;
            /* === PERUBAHAN: Mulai dengan column (untuk Baris 1, 2, 3) === */
            flex-direction: column; 
            /* ============================================================ */
            gap: 2rem;
        }
        
        /* BARU: Styling untuk logo dan teks di dalam footer-content-wrapper */
        /* Dipisah dari menu links agar bisa diatur barisnya */
        .footer-logo, .footer-text {
             
            /* === PERUBAHAN: Logo dan Teks diubah menjadi Baris ke bawah (column) === */
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            flex: 1;
            /* ========================================================================= */
        }
        
        .footer-col-1 p {
            margin: 0;
            font-size: 0.875rem;
            line-height: 1.6;
            font-family: 'tt_firs_neue_trlregular';
            /* Warna teks diatur oleh .footer-col-1 (putih) */
        }
        
        .footer-logo {
            width: 220px; /* Ukuran logo di footer */
            height: auto;
        }

        .footer-links-group {
            display: flex;
            /* Mengubah Menu Kolom menjadi row (berdampingan) */
            flex-direction: row; 
            justify-content: flex-start;
            gap: 2rem; /* Jarak antar kolom menu */
            margin-top: 0; 
            font-size: 0.9rem;
            text-transform: uppercase;
        }
        
        .footer-link-col {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .footer-link-col a {
            /* === PERUBAHAN: Warna link menjadi Putih === */
            color: #000000; 
            /* =========================================== */
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .footer-link-col a:hover {
            /* Warna hover sedikit gelap (emas) */
            color: #ffffff; 
        }
        
        .footer-link-col h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            margin-top: 0;
            white-space: nowrap;
            /* Warna teks h4 diatur oleh .footer-col-1 (putih) */
        }

        .footer-col-2 {
            background-image: url('/assets/images/footerbg.png'); /* Kolom Kanan: Gambar Gradient */
            background-size: cover;
            background-position: center;
            flex: 1; /* Ambil sisa lebar */
            width: 100%; /* Pastikan full width */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 4rem 2%;
            box-sizing: border-box;
            overflow: hidden; /* Kunci marquee agar tidak menggeser */
            /* === BARU: Warna teks di kolom 2 menjadi PUTIH === */
            color: white; 
            /* ================================================== */
        }
        
        /* BARU: Style untuk teks Marquee itu sendiri */
        .footer-marquee-text {
            font-size: 8vw; /* Ukuran font yang besar */
            font-weight: 800; 
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            /* Warna teks sudah diatur di .footer-col-2 menjadi white */
            
            /* Animasi Marquee */
            display: inline-block;
            animation: footer-marquee-scroll 30s linear infinite; /* Durasi ditingkatkan agar lebih lambat */
        }

        /* BARU: Style Marquee Footer */
        .footer-marquee-container {
            width: 120%; /* Lebih lebar dari container untuk loop */
            overflow: hidden;
            white-space: nowrap;
        }

        /* BARU: Keyframes untuk marquee footer */
        @keyframes footer-marquee-scroll {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); } /* Geser separuh panjang konten */
        }
        
        /* Footer Responsive (Desktop - Kolom 1 dari kiri ke kanan) */
        @media (min-width: 768px) {
            /* === Perubahan untuk Desktop Footer Column 1 === */
            .footer-col-1 {
                padding: 4rem 5% 4rem 5%; /* Padding atas/bawah 4rem */
            }
            .footer-content-wrapper {
                flex-direction: row; /* Konten Baris Kiri ke Kanan */
                justify-content: space-between; /* Pisahkan Logo/Teks dan Menu */
                gap: 5%; /* Tambah gap agar lebih lapang */
                z-index: 104;
            }
            .footer-logo {
                flex: 0 0 20%; /* Ambil 50% ruang */
            }

            .footer-text {
                flex: 0 0 50%; /* Ambil 50% ruang */
            }
            .footer-links-group {
                flex-direction: row; 
                justify-content:flex-end;
                gap: 1rem;
            }
            .footer-col-1 p {
                text-align: left; /* Teks rata kiri di desktop */
            }
            .footer-link-col {
                align-items: flex-start;
            }
            
            /* Kolom 2 bawah full width, tidak perlu diubah */
            .footer-marquee-text {
                /* DIUBAH: Kurangi ukuran Marquee di desktop */
                font-size: 6vw; 
                letter-spacing: normal;
            }
        }
        
        /* Footer Responsive (Mobile Stack) */
        @media (max-width: 768px) {
            #main-footer {
                flex-direction: column; /* Tumpuk di mobile */
            }
            .footer-col-1 {
                flex-basis: auto;
                width: 100%;
                padding: 3rem 5%;
                /* Ganti alignment untuk mobile */
                align-items: flex-start; 
                text-align: left;
            }
            .footer-col-1 p {
                text-align: left;
            }
            .footer-content-wrapper {
                flex-direction: column;
                gap: 2rem;
                z-index: 104;
            }
            .footer-logo-and-text {
                 width: 100%;
                 /* Ganti alignment untuk mobile */
                 align-items: flex-start;
            }
            .footer-links-group {
                flex-direction: column; /* Tumpuk kolom menu di mobile */
                gap: 2rem;
                width: 100%;
                /* Hapus max-width dan margin agar full width di padding 5% */
                max-width: none;
                margin-left: 0;
                margin-right: 0;
            }
            .footer-link-col {
                align-items: flex-start;
            }
            .footer-col-2 {
                flex-basis: auto;
                width: 100%;
                padding: 3rem 0; /* Padding horizontal 0 agar marquee full width */
                min-height: 200px;
            }
            .footer-marquee-text {
                font-size: 12vw; /* Lebih besar di mobile */
            }
        }
        /* --- Akhir Style Footer Baru --- */

        /* --- BARU: Style Video Latar Belakang S2 --- */
        #video-bg-s2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1; /* Di belakang konten S2 */
        }
        
        /* BARU: Style Video Latar Belakang S3 */
        #video-bg-s3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1; /* Di belakang konten S3 */
        }

        /* Pastikan konten S2 tetap di atas video */
        #section2 > div {
            position: relative; /* Atau z-index: 2; */
            z-index: 2;
        }

        /* --- PERUBAHAN: Style untuk Marquee S5 --- */
        .s5-marquee-container {
            width: 95%;
            overflow-x: hidden;
            pointer-events: auto;
            position: relative;
            right: 10px;
            left: 0;
        }

        .s5-marquee-track {
            display: flex;
            align-items: center; /* DIUBAH: dari baseline */
            gap: 1rem; /* DIUBAH: dari 4rem menjadi 1rem (padding) */
            line-height: 1.1;
            font-weight: 800;
            color: #fff;
            white-space: nowrap; /* Mencegah wrap */
            
            /* Animasi */
            animation: marquee-scroll 15s linear infinite; /* DIUBAH: dari 13s ke 15s (lebih lambat 15%) */
        }
        
        /* BARU: Tambahkan jeda untuk hover (opsional tapi bagus) */
        .s5-marquee-container:hover .s5-marquee-track {
             animation-play-state: paused;
        }

        /* BARU: Keyframes untuk marquee */
        @keyframes marquee-scroll {
            0% {
                transform: translateX(0%); /* Mulai dari posisi 0 */
            }
            100% {
                transform: translateX(-50%); /* Geser ke kiri sejauh 1 set konten */
        }}
        /* --- Akhir Style Marquee S5 --- */

        /* BARU: Style untuk gambar marquee */
        .marquee-image {
            height: 10rem; /* Menyamai tinggi font sebelumnya */
            width: auto; /* Menjaga rasio aspek */
            flex-shrink: 0; /* Mencegah gambar terkompresi */
            margin:0 48px;
            object-fit: contain;
        }

        /* --- BARU: Style untuk Tab Section 6 --- */
        .tab-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 1rem;
            margin: 3rem 0 2.5rem 0;
            flex-wrap: wrap; /* BARU: Izinkan wrap di mobile */
        }

        .tab-button {
            padding: 0.75rem 1.75rem;
            border: 1px solid #000000;
            border-radius: 9999px; /* Style Kapsul */
            background-color: transparent;
            color: #000000;
            font-size: 0.875rem;
            font-weight: 300; /* DIUBAH: dari 600 ke 300 (light) */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: none; /* Kursor kustom akan mengambil alih */
            pointer-events: auto;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* BARU: Tambah border-color */
        }

        .tab-button:hover { /* DIUBAH: Aturan dipisah */
            background-color: #000000;
            color: #ffffff;
            border-color: #000000; /* BARU: Tambahan */
        }

        .tab-button.active { /* DIUBAH: Aturan dipisah */
            background-color: #ffbe00; /* DIUBAH: Sesuai permintaan */
            color: #000000; /* DIUBAH: Teks hitam agar kontras */
            border-color: #ffbe00; /* BARU: Samakan border */
        }
        
        /* Ganti warna hover kursor khusus untuk tombol tab */
        /* (JS kursor kustom akan menangani .cursor-grow) */
        .tab-button:hover ~ #cursor-ring {
             border-color: #000000; 
             background-color: rgba(0, 0, 0, 0.2); 
        }

        .tab-content-wrapper {
            position: relative;
            width: 100%;
            text-align: left; /* Override center align dari #section6 */
        }

        .tab-panel {
            width: 100%;
            opacity: 0;
            display: none;
            transition: opacity 0.4s ease;
            position: absolute; /* BARU: Buat panel tumpang tindih */
            top: 0;
            left: 0;
        }

        .tab-panel.active {
            opacity: 1;
            display: block;
            position: relative; /* BARU: Kembalikan ke alur dokumen */
        }

        .tab-panel-layout {
            display: flex;
            flex-direction: row;
            gap: 2rem;
            align-items: flex-start; /* BARU: Ratakan atas */
        }

        .tab-panel-left {
            flex: 0 0 33.33%; /* Kolom kiri 1/3 */
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.2;
            text-transform: uppercase;
            color: #000;
        }

        .tab-panel-right {
            flex: 1; /* Kolom kanan mengambil sisa ruang */
            font-size: 1.25rem;
            line-height: 1.6;
            font-weight: 400;
            color: #333; /* Sedikit lebih soft dari hitam pekat */
            padding-top: 0.5rem; /* Sejajarkan sedikit */
        }
        
        /* --- BARU: Styles untuk Grid & Image Overlay S6 (Panel 2 & 3) --- */
        .s6-grid-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 3rem; /* Jarak antara text/carousel dan elemen di bawahnya */
        }
        
        .s6-overlay-image {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            border-radius: 0.75rem;
            overflow: hidden;
            background-color: #ccc;
        }

        .s6-overlay-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .s6-overlay-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 2rem;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: white;
            text-align: left;
        }
        
        .s6-overlay-text h4 {
            font-family: 'tt_firs_neue_trlblack';
            font-size: 1.5rem;
            margin: 0 0 0.5rem 0;
            line-height: 1.2;
        }
        
        .s6-overlay-text p {
            font-size: 0.9rem;
            margin: 0;
            font-family: 'tt_firs_neue_trlregular';
        }
        
        /* --- Styles untuk Single Slide Carousel S6 (Panel 2, 3, 4) --- */
        
        /* Container untuk 1 slide per view */
        .s6-single-slide-carousel-container {
            position: relative;
            width: 100%; /* Default 100% untuk grid */
            overflow: hidden;
            border-radius: 0.75rem;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }
        
        /* Modifikasi untuk Panel 4 (80% viewport width) */
        .s6-vp-80-carousel {
            width: 80vw;
            /* Pusatkan container */
            margin-left: auto;
            margin-right: auto;
        }
        
        .s6-single-slide-carousel-track {
            position: relative;
            top: 0;
            left: 0;
            height: 100%;
            display: flex;
            transition: transform 0.5s ease-in-out;
            /* Lebar track akan di-set oleh JS */
        }
        
        .s6-single-slide-carousel-slide {
            position: absolute;
            inset: 0;
            flex: 0 0 100%; /* 1 slide per view */
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
        
        .s6-single-slide-carousel-slide img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 0.75rem;
        }
        
        /* Panah Navigasi Single Slide Carousel */
        .s6-carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.5); /* Latar belakang semi-transparan */
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: none; 
            pointer-events: auto;
            transition: background-color 0.3s ease;
            padding: 0;
        }
        
        .s6-carousel-arrow:hover {
            background-color: #ffbe00;
        }

        .s6-carousel-arrow img {
            width: 50%;
            height: 50%;
            object-fit: contain;
        }

        .s6-carousel-arrow.left {
            left: 1rem;
            transform: translateY(-50%) rotate(180deg);
        }

        .s6-carousel-arrow.right {
            right: 1rem;
        }


        /* Responsive untuk Tab S6 */
        @media (max-width: 768px) {
            #section6 {
                padding-top: 10vh; /* Kurangi padding atas di mobile */
            }
            .tab-container {
                gap: 0.5rem;
            }
            .tab-button {
                font-size: 0.75rem;
                padding: 0.5rem 1rem;
            }
            .tab-panel-layout {
                flex-direction: column;
                gap: 1.5rem;
            }
            .tab-panel-left,
            .tab-panel-right {
                width: 100%;
                flex-basis: auto; /* Reset flex-basis */
                text-align: center; /* Pusatkan di mobile */
            }
            .tab-panel-left {
                font-size: 2rem; /* Kecilkan font judul */
            }
            .tab-panel-right {
                font-size: 1rem; /* Kecilkan font paragraf */
                padding-top: 0;
            }
            
            /* Responsive untuk Grid S6 */
            .s6-grid-panel {
                grid-template-columns: 1fr; /* 1 kolom di mobile */
                gap: 1.5rem;
            }
            .s6-vp-80-carousel {
                width: 100vw; /* Full width di mobile */
                margin-left: calc(-50vw + 50%); /* Dorong ke kiri agar full width */
                margin-right: 0;
                border-radius: 0;
                padding-top: 66.66%; /* 3:2 Aspect Ratio di mobile */
            }
        }
        /* --- Akhir Style Tab Section 6 --- */


        /* --- BARU: Style Carousel Section 6 (Multi-slide) --- */
        .s6-carousel-container {
            position: relative;
            /* DIUBAH: Lebar dan margin diatur sesuai permintaan */
            width: 90vw;
            margin-left: -1vw;
            margin-right: 0;
            overflow: hidden; /* Kunci utama carousel */
            margin-top: 3rem; /* Jarak dari konten tab di atas */
            border-radius: 1rem; /* Samakan dengan style lain */
            box-sizing: border-box;
        }

        .s6-carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
            /* Lebar track akan di-set oleh JS */
        }

        .s6-carousel-slide {
            /* DIUBAH: Tampilkan 3.5 gambar sekaligus (100% / 3.5) */
            flex: 0 0 28.5714%; 
            width: 28.5714%;
            box-sizing: border-box;
            padding: 0 0.5rem; /* Sedikit jarak antar gambar */
        }

        .s6-carousel-slide img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0.5rem;
            object-fit: cover;
            aspect-ratio: 16/9; /* Jaga rasio gambar */
        }

        /* PERUBAHAN: Style untuk panah carousel Section 6 */
        /* DIHAPUS: Style arrow s6-carousel-arrow karena elemen dihapus */

        /* Responsive untuk Carousel S6 */
        @media (max-width: 768px) {
            /* BARU: Reset container di tablet */
            .s6-carousel-container {
                width: 100%;
                margin-left: 0;
            }
            .s6-carousel-slide {
                flex: 0 0 50%; /* Tampilkan 2 gambar di tablet */
                width: 50%;
            }
        }

        @media (max-width: 480px) {
            /* Container sudah 100% dari rule tablet */
            .s6-carousel-slide {
                flex: 0 0 100%; /* Tampilkan 1 gambar di mobile */
                width: 100%;
                padding: 0; /* Full-width di mobile */
            }
            .s6-carousel-slide img {
                border-radius: 0;
            }
        }
        /* --- Akhir Style Carousel Section 6 (Multi-slide) --- */

        /* optional polish */
        .profile-card:hover .profile-overlay {
        padding-bottom: 2rem;
        }