/* Menggunakan font Inter untuk seluruh halaman */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a; /* Warna dasar sangat gelap */
            overflow-x: hidden; /* Tambahan untuk mencegah scroll horizontal pada keseluruhan body */
        }

        /* Latar belakang untuk menampung animasi atom */
        .tech-bg {
            background-color: #111827;
        }

        /* Container untuk animasi atom di background Hero */
        .atom-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.5s ease-out; /* Transisi untuk paralaks */
        }

        .atom-svg-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            max-width: 900px;
            max-height: 900px;
            opacity: 0.3;
            filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.7));
            animation: rotate-cw 45s linear infinite;
        }

        /* Garis bawah judul seksi dengan gradasi */
        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6); /* Gradasi biru ke ungu */
            margin: 12px auto 0;
            border-radius: 2px;
        }

        .lg\:text-left.section-title::after {
            margin-left: 0;
        }

        /* Efek mengetik pada judul */
        .typing-cursor {
            display: inline-block;
            width: 3px;
            height: 1em; /* Menggunakan unit 'em' agar tinggi sesuai font */
            background-color: #3b82f6;
            animation: blink 0.8s infinite;
            vertical-align: bottom; /* Menjaga cursor sejajar dengan baseline teks */
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* CSS untuk menyembunyikan teks hero awalnya */
        #hero-line-1, #hero-line-2, #hero-line-3 {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* CSS untuk Logo Nashtagroup */
        .nashtagroup-logo {
            font-family: 'Poppins', sans-serif; /* Font baru */
            font-weight: 800; /* Disesuaikan agar lebih mirip referensi */
            font-size: 1.875rem;
            line-height: 2.25rem;
            /* Urutan warna gradien diubah sesuai referensi */
            background: linear-gradient(90deg, #F97316, #14B8A6, #F43F5E); 
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transition: opacity 0.8s ease-in;
        }

        /* Animasi Scroll */
        .animated-section {
            opacity: 0;
            transition: opacity 1s ease-out;
        }
        .animated-section.is-visible {
            opacity: 1;
        }

        .animated-section .slide-in-left {
            transform: translateX(-50px);
            opacity: 0;
            transition: opacity 0.8s 0.2s ease-out, transform 0.8s 0.2s ease-out;
        }
        .animated-section .slide-in-right {
            transform: translateX(50px);
            opacity: 0;
            transition: opacity 0.8s 0.2s ease-out, transform 0.8s 0.2s ease-out;
        }

        .animated-section.is-visible .slide-in-left,
        .animated-section.is-visible .slide-in-right {
             transform: translateX(0);
             opacity: 1;
        }


        /* Style untuk social icon */
        .social-icon {
            transition: transform 0.3s ease, color 0.3s ease;
        }
        .social-icon:hover {
            transform: translateY(-4px);
            color: #3b82f6;
        }

        /* Style untuk daftar skill dan animasi progress bar */
        @keyframes fill-bar {
            from { width: 0%; }
            to { width: var(--skill-level, 75%); }
        }

        .skill-list li {
            position: relative;
            padding-bottom: 8px;
            margin-bottom: 8px;
        }

        .skill-list li::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%; /* Mulai dari 0 */
            height: 4px;
            background: linear-gradient(90deg, var(--color-from, #3b82f6), var(--color-to, #8b5cf6));
            border-radius: 2px;
        }

        /* Kelas .animate-bars adalah pemicu animasi yang dikontrol oleh JS */
        .skill-list.animate-bars li::after {
            animation: fill-bar 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        .skill-list.animate-bars li:nth-child(1)::after { animation-delay: 0.1s; }
        .skill-list.animate-bars li:nth-child(2)::after { animation-delay: 0.2s; }
        .skill-list.animate-bars li:nth-child(3)::after { animation-delay: 0.3s; }
        .skill-list.animate-bars li:nth-child(4)::after { animation-delay: 0.4s; }
        .skill-list.animate-bars li:nth-child(5)::after { animation-delay: 0.5s; }
        .skill-list.animate-bars li:nth-child(6)::after { animation-delay: 0.6s; }

        /* Keyframes untuk animasi mengambang */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }

        /* Keyframes untuk animasi cahaya (glow) */
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 20px -5px var(--glow-color, rgba(59, 130, 246, 0.4)); }
            50% { box-shadow: 0 0 35px 5px var(--glow-color, rgba(59, 130, 246, 0.6)); }
            100% { box-shadow: 0 0 20px -5px var(--glow-color, rgba(59, 130, 246, 0.4)); }
        }

        /* Kelas untuk menerapkan animasi glow pada kartu */
        .animated-card {
             animation: pulse-glow 5s linear infinite;
        }

        .animated-card:hover {
            animation-play-state: paused;
        }

        /* CSS untuk Animasi Flip Card */
        .flip-card {
            background-color: transparent;
            width: 100%;
            height: 100%;
            perspective: 1000px;
            min-height: 420px; 
            animation: float 6s ease-in-out infinite, pulse-glow 5s linear infinite;
        }

        .skills-grid > .flip-card:nth-child(2) { animation-delay: -1.5s, -2.5s; }
        .skills-grid > .flip-card:nth-child(3) { animation-delay: -3s, -1s; }
        .skills-grid > .flip-card:nth-child(4) { animation-delay: -4.5s, -4s; }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        /* Kelas untuk memicu flip dengan JS atau saat di-hover */
        .flip-card:hover .flip-card-inner,
        .flip-card-inner.is-flipped {
            transform: rotateY(180deg);
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            padding: 1.5rem;
            border-radius: 1rem;
            background-color: rgba(31, 41, 55, 0.5);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(55, 65, 81, 0.6);
        }

        .flip-card-back {
            transform: rotateY(180deg);
            justify-content: center;
        }

        /* CSS untuk elemen visual atom & sirkuit */
        .tech-visual {
            position: relative;
            width: 280px;
            height: 280px;
            animation: rotate-cw 20s linear infinite;
        }

        .orbit-path {
            stroke: rgba(59, 130, 246, 0.8);
            stroke-width: 2;
            fill: none;
        }

        .electron {
            fill: #38bdf8;
        }

        .nucleus {
            fill: #60a5fa;
            animation: pulse-nucleus 2s ease-in-out infinite alternate;
        }

        @keyframes pulse-nucleus {
            from { r: 5; }
            to { r: 7; }
        }

        .circuit-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .circuit-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: draw-path 5s ease-in-out infinite alternate;
        }

        @keyframes draw-path {
            to {
                stroke-dashoffset: 0;
            }
        }

        .circuit-node {
            animation: pulse-node 2.5s ease-in-out infinite alternate;
        }

        @keyframes pulse-node {
            0% { r: 4; opacity: 0.5; }
            100% { r: 8; opacity: 1; }
        }

        .circuit-svg .node-1 { animation-delay: 0s; }
        .circuit-svg .node-2 { animation-delay: 0.2s; }
        .circuit-svg .node-3 { animation-delay: 0.4s; }
        .circuit-svg .node-4 { animation-delay: 0.6s; }
        .circuit-svg .node-5 { animation-delay: 0.8s; }
        .circuit-svg .node-6 { animation-delay: 1s; }

        @keyframes rotate-cw {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* CSS untuk foto profil dengan SVG mask */
        .home__blob {
            width: 288px; /* w-72 */
            filter: drop-shadow(0 0 25px rgba(99, 102, 241, 0.5));
            animation: float 6s ease-in-out infinite alternate;
            transition: transform 0.5s ease-out; /* Transisi untuk paralaks */
        }
        .home__blob-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* CSS untuk Mobile Menu & Hamburger */
        .hamburger-button span {
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        .hamburger-button.open span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger-button.open span:nth-child(2) {
            opacity: 0;
        }
        .hamburger-button.open span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        #mobile-menu-container.open .mobile-menu-overlay {
            opacity: 1;
            pointer-events: auto;
        }

        #mobile-menu-container.open .mobile-menu {
            transform: translateX(0);
        }

        /* CSS untuk Tombol CTA dengan Shimmer Effect */
        .shimmer-btn {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .shimmer-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                120deg,
                rgba(255, 255, 255, 0) 20%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 80%
            );
            transform: skewX(-20deg);
            transition: left 0.85s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .shimmer-btn:hover::before {
            left: 125%;
        }

        /* CSS untuk Tombol Scroll to Top */
        #scrollTopBtn {
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        #scrollTopBtn.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        @keyframes pulse-cyan-glow {
            0% { box-shadow: 0 0 15px -5px #22d3ee; }
            50% { box-shadow: 0 0 25px 0px #22d3ee; }
            100% { box-shadow: 0 0 15px -5px #22d3ee; }
        }
        #scrollTopBtn {
            animation: pulse-cyan-glow 3s linear infinite;
        }

        /* Efek Hover Baru untuk Navbar */
        .nav-link {
            position: relative;
            padding: 8px 0;
            transition: color 0.3s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0%;
            height: 2px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transition: width 0.3s ease-in-out;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        
        /* PERBAIKAN: Menambahkan overflow hidden pada section */
        #technologies {
            overflow-x: hidden;
        }

        /* CSS untuk Carousel Teknologi 3D - Default untuk Desktop */
        .carousel-scene {
            width: 100%;
            height: 150px;
            margin-top: 4rem;
            perspective: 1500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .carousel {
            width: 210px;
            height: 120px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate-carousel 109s linear infinite;
        }

        .carousel-cell {
            position: absolute;
            width: 190px;
            height: 110px;
            left: 10px;
            top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            -webkit-box-reflect: below 8px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.5));
        }

        /* Perbaikan khusus untuk Katalon logo di carousel */
        .carousel-cell:nth-child(16) {
            opacity: 1 !important; /* Pastikan cell bisa dilihat */
        }
        .carousel-cell:nth-child(16) img {
            padding: 6px; /* Tambahkan padding khusus untuk Katalon */
            max-width: 95%; /* Batasi ukuran maksimal, tapi tidak terlalu kecil */
            max-height: 95%;
            height: 85% !important; /* Pastikan tinggi cukup agar logo terlihat */
            opacity: 1 !important; /* Pastikan logo tidak tersembunyi */
            visibility: visible !important; /* Pastikan logo bisa ditemukan */
        }

        .carousel-cell img {
            width: auto;
            height: 80%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.5s ease, filter 0.5s ease;
            padding: 2px; /* Menambahkan sedikit padding default untuk semua logo */
        }

        .carousel-cell.is-in-front {
            z-index: 10;
        }

        .carousel-cell.is-in-front img {
            transform: scale(1.4);
        }
        
        /* Variabel CSS untuk radius carousel */
        :root {
            --carousel-radius: 520px;
        }
        
        .carousel-cell:nth-child(1) { transform: rotateY(  0.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(2) { transform: rotateY( 22.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(3) { transform: rotateY( 45.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(4) { transform: rotateY( 67.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(5) { transform: rotateY( 90.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(6) { transform: rotateY(112.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(7) { transform: rotateY(135.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(8) { transform: rotateY(157.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(9) { transform: rotateY(180.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(10){ transform: rotateY(202.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(11){ transform: rotateY(225.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(12){ transform: rotateY(247.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(13){ transform: rotateY(270.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(14){ transform: rotateY(292.5deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(15){ transform: rotateY(315.0deg) translateZ(var(--carousel-radius)); }
        .carousel-cell:nth-child(16){ transform: rotateY(337.5deg) translateZ(var(--carousel-radius)); }

        /* Filter warna default */
        .carousel-cell:nth-child(1) img { filter: invert(58%) sepia(58%) saturate(3474%) hue-rotate(338deg) brightness(98%) contrast(93%); }
        .carousel-cell:nth-child(2) img { filter: invert(41%) sepia(85%) saturate(1518%) hue-rotate(187deg) brightness(91%) contrast(92%); }
        .carousel-cell:nth-child(3) img { filter: invert(93%) sepia(35%) saturate(4787%) hue-rotate(349deg) brightness(101%) contrast(94%); }
        .carousel-cell:nth-child(4) img { filter: invert(44%) sepia(91%) saturate(2225%) hue-rotate(238deg) brightness(91%) contrast(85%); }
        .carousel-cell:nth-child(5) img { filter: invert(79%) sepia(61%) saturate(4529%) hue-rotate(134deg) brightness(98%) contrast(97%); }
        .carousel-cell:nth-child(6) img { filter: invert(71%) sepia(21%) saturate(1391%) hue-rotate(333deg) brightness(95%) contrast(96%); }
        .carousel-cell:nth-child(7) img { filter: invert(61%) sepia(54%) saturate(442%) hue-rotate(200deg) brightness(90%) contrast(86%); }
        .carousel-cell:nth-child(8) img { filter: invert(36%) sepia(91%) saturate(2035%) hue-rotate(357deg) brightness(98%) contrast(101%); }
        .carousel-cell:nth-child(9) img { filter: invert(43%) sepia(54%) saturate(3011%) hue-rotate(331deg) brightness(100%) contrast(96%); }
        .carousel-cell:nth-child(10) img { filter: invert(82%) sepia(26%) saturate(2465%) hue-rotate(143deg) brightness(94%) contrast(87%); }
        .carousel-cell:nth-child(11) img { filter: invert(56%) sepia(11%) saturate(1637%) hue-rotate(170deg) brightness(92%) contrast(88%); }
        .carousel-cell:nth-child(12) img { filter: invert(48%) sepia(91%) saturate(336%) hue-rotate(79deg) brightness(93%) contrast(92%); }
        .carousel-cell:nth-child(13) img { filter: invert(36%) sepia(91%) saturate(2035%) hue-rotate(357deg) brightness(98%) contrast(101%); }
        .carousel-cell:nth-child(14) img { filter: invert(66%) sepia(87%) saturate(357%) hue-rotate(80deg) brightness(92%) contrast(89%); }
        .carousel-cell:nth-child(16) img { filter: invert(49%) sepia(91%) saturate(405%) hue-rotate(85deg) brightness(94%) contrast(92%); }

        /* Filter saat logo di depan (menggabungkan filter warna + drop-shadow) */
        .carousel-cell.is-in-front:nth-child(1) img { filter: invert(58%) sepia(58%) saturate(3474%) hue-rotate(338deg) brightness(98%) contrast(93%) drop-shadow(0 0 15px #E34F26); }
        .carousel-cell.is-in-front:nth-child(2) img { filter: invert(41%) sepia(85%) saturate(1518%) hue-rotate(187deg) brightness(91%) contrast(92%) drop-shadow(0 0 15px #1572B6); }
        .carousel-cell.is-in-front:nth-child(3) img { filter: invert(93%) sepia(35%) saturate(4787%) hue-rotate(349deg) brightness(101%) contrast(94%) drop-shadow(0 0 15px #F7DF1E); }
        .carousel-cell.is-in-front:nth-child(4) img { filter: invert(44%) sepia(91%) saturate(2225%) hue-rotate(238deg) brightness(91%) contrast(85%) drop-shadow(0 0 15px #7952B3); }
        .carousel-cell.is-in-front:nth-child(5) img { filter: invert(79%) sepia(61%) saturate(4529%) hue-rotate(134deg) brightness(98%) contrast(97%) drop-shadow(0 0 15px #61DAFB); }
        .carousel-cell.is-in-front:nth-child(6) img { filter: invert(71%) sepia(21%) saturate(1391%) hue-rotate(333deg) brightness(95%) contrast(96%) drop-shadow(0 0 15px #f89820); }
        .carousel-cell.is-in-front:nth-child(7) img { filter: invert(61%) sepia(54%) saturate(442%) hue-rotate(200deg) brightness(90%) contrast(86%) drop-shadow(0 0 15px #777BB4); }
        .carousel-cell.is-in-front:nth-child(8) img { filter: invert(36%) sepia(91%) saturate(2035%) hue-rotate(357deg) brightness(98%) contrast(101%) drop-shadow(0 0 15px #EF4223); }
        .carousel-cell.is-in-front:nth-child(9) img { filter: invert(43%) sepia(54%) saturate(3011%) hue-rotate(331deg) brightness(100%) contrast(96%) drop-shadow(0 0 15px #FF2D20); }
        .carousel-cell.is-in-front:nth-child(10) img { filter: invert(82%) sepia(26%) saturate(2465%) hue-rotate(143deg) brightness(94%) contrast(87%) drop-shadow(0 0 15px #00ADD8); }
        .carousel-cell.is-in-front:nth-child(11) img { filter: invert(56%) sepia(11%) saturate(1637%) hue-rotate(170deg) brightness(92%) contrast(88%) drop-shadow(0 0 15px #4479A1); }
        .carousel-cell.is-in-front:nth-child(12) img { filter: invert(48%) sepia(91%) saturate(336%) hue-rotate(79deg) brightness(93%) contrast(92%) drop-shadow(0 0 15px #47A248); }
        .carousel-cell.is-in-front:nth-child(13) img { filter: invert(36%) sepia(91%) saturate(2035%) hue-rotate(357deg) brightness(98%) contrast(101%) drop-shadow(0 0 15px #FF9A00); }
        .carousel-cell.is-in-front:nth-child(14) img { filter: invert(66%) sepia(87%) saturate(357%) hue-rotate(80deg) brightness(92%) contrast(89%) drop-shadow(0 0 15px #28A128); }
        .carousel-cell.is-in-front:nth-child(15) img { filter: drop-shadow(0 0 15px #61DAFB); }
        .carousel-cell.is-in-front:nth-child(16) img { filter: invert(49%) sepia(91%) saturate(405%) hue-rotate(85deg) brightness(94%) contrast(92%) drop-shadow(0 0 15px #01a98f); }

        @keyframes rotate-carousel {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(-360deg); }
        }

        /* Style untuk bagian Sertifikasi */
        .certification-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.5rem;
        }

        .certification-card {
            background-color: rgba(31, 41, 55, 0.5);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(55, 65, 81, 0.6);
            border-radius: 1rem;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }
        .is-visible .certification-card {
            opacity: 1;
            transform: translateY(0);
        }

        .is-visible .certification-card:nth-child(2) { transition-delay: 0.1s; }
        .is-visible .certification-card:nth-child(3) { transition-delay: 0.2s; }
        .is-visible .certification-card:nth-child(4) { transition-delay: 0.3s; }
        .is-visible .certification-card:nth-child(5) { transition-delay: 0.4s; }
        .is-visible .certification-card:nth-child(6) { transition-delay: 0.5s; }
        .is-visible .certification-card:nth-child(7) { transition-delay: 0.6s; }
        .is-visible .certification-card:nth-child(8) { transition-delay: 0.7s; }
        .is-visible .certification-card:nth-child(9) { transition-delay: 0.8s; }


        .certification-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
        }

        .certification-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 0.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.75rem;
            color: #9ca3af;
        }

        #certifications {
            position: relative;
        }

        #particle-canvas-certs {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; /* Di belakang konten */
        }
        .certification-grid, .section-title {
            position: relative;
            z-index: 2; /* Di depan canvas */
        }

        /* Custom styles for Work Experience section (cleaner + modern) */
        .work-experience-item {
            display: flex;
            align-items: center;
            gap: 1.75rem;
            margin-bottom: 1.5rem;
            padding: 1.5rem 1.75rem;
            background: linear-gradient(180deg, rgba(17, 24, 39, 0.75), rgba(17, 24, 39, 0.6)) padding-box,
                       linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(168, 85, 247, 0.35)) border-box;
            border: 1px solid transparent;
            border-radius: 0.875rem;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
            overflow: hidden;
            backdrop-filter: blur(6px);
        }

        /* Remove the old ::before vertical line */
        .work-experience-item::before {
            content: none; 
        }

        /* Hover: elevate + subtle glow tied to --glow-color */
        .work-experience-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45), 0 0 30px -5px var(--glow-color, rgba(59, 130, 246, 0.45));
        }


        .work-experience-logo-container {
            flex-shrink: 0;
            width: 120px; /* Increased size for desktop */
            height: 120px; /* Increased size for desktop */
            background-color: rgba(255, 255, 255, 0.02);
            border-radius: 0.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            padding: 10px;
            border: 1px solid rgba(148, 163, 184, 0.15);
        }
        /* Make logo container larger for smaller screens too */
        @media (max-width: 768px) {
            .work-experience-logo-container {
                width: 100px; /* Increased size for mobile */
                height: 100px; /* Increased size for mobile */
            }
        }


        .work-experience-logo {
            width: 100%; /* Ensure it fills the container and is not limited by max-width */
            height: 100%; /* Ensure it fills the container and is not limited by max-height */
            object-fit: contain; /* Keep the aspect ratio */
            filter: brightness(0) invert(1); /* Ensure it's white/light if the original is dark */
        }

        .work-experience-details-grid {
            flex-grow: 1;
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two columns for info */
            gap: 0.75rem 1rem; /* Row gap, column gap */
            align-items: start; /* Align to the top of the grid cells */
        }

        .work-experience-details-grid .job-title {
            font-size: 1.375rem; /* ~text-[22px] */
            font-weight: 700; /* semibold/bold */
            color: #F9FAFB; /* near-white */
            letter-spacing: 0.2px;
            grid-column: 1 / 2; /* Span first column */
            margin-bottom: 0.125rem;
        }

        .work-experience-details-grid .company {
            font-size: 1.125rem;
            font-weight: 700;
            grid-column: 2 / 3; /* Span second column */
            text-align: right;
            margin-bottom: 0.125rem;
            background: linear-gradient(90deg, #fb923c, #f97316);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .work-experience-details-grid .duration {
            font-size: 0.875rem;
            color: #E5E7EB;
            grid-column: 1 / 2;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: rgba(59, 130, 246, 0.12);
            border: 1px solid rgba(59, 130, 246, 0.25);
            padding: 0.35rem 0.6rem;
            border-radius: 9999px;
            width: max-content;
        }

        .work-experience-details-grid .location {
            font-size: 0.875rem;
            color: #D1D5DB;
            grid-column: 2 / 3; /* Span second column */
            text-align: right;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.25);
            padding: 0.35rem 0.6rem;
            border-radius: 9999px;
            width: max-content;
        }

        .work-experience-details-grid .job-type {
            font-size: 0.875rem;
            font-weight: 600;
            color: #F3F4F6;
            grid-column: 2 / 3;
            justify-self: end;
            align-self: center;
            background-color: rgba(234, 88, 12, 0.12);
            border: 1px solid rgba(234, 88, 12, 0.3);
            padding: 0.35rem 0.6rem;
            border-radius: 9999px;
            width: max-content;
        }

        /* Adjusting for smaller screens */
        @media (max-width: 768px) {
            .work-experience-details-grid {
                grid-template-columns: 1fr; /* Stack columns on small screens */
                gap: 0.5rem;
            }
            .work-experience-details-grid .company {
                text-align: left;
                /* Allow long company names to wrap instead of being cut off */
                grid-column: 1 / -1;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                word-break: break-word;
                line-height: 1.25;
                font-size: 1rem;
            }
            .work-experience-details-grid .location,
            .work-experience-details-grid .job-type {
                justify-self: start;
            }
            .work-experience-logo-container {
                margin-bottom: 0.75rem; /* spacing below logo on small screens */
            }
        }
        /* Further adjust for very small screens if logo and details should stack more clearly */
        @media (max-width: 480px) {
            .work-experience-item {
                flex-direction: column; /* Stack logo and details vertically */
                align-items: center;
                text-align: center;
            }
            .work-experience-details-grid .job-type,
            .work-experience-details-grid .location,
            .work-experience-details-grid .company,
            .work-experience-details-grid .job-title,
            .work-experience-details-grid .duration {
                grid-column: 1 / -1; /* Make all items span full width */
                text-align: center;
                justify-self: center;
            }
        }
        
        /* === PENYEMPURNAAN: CSS Responsif untuk Carousel 3D === */

        /* Untuk Tablet (iPad, dll) */
        @media (max-width: 1024px) {
            :root {
                --carousel-radius: 360px;
            }
            .carousel-scene {
                perspective: 1200px;
                height: 140px;
            }
            .carousel-cell {
                width: 170px;
                height: 100px;
            }
            .carousel-cell img {
                height: 75%;
            }
            
            /* Perbaikan Katalon untuk Tablet */
            .carousel-cell:nth-child(16) img {
                padding: 8px !important;
                max-width: 90% !important;
                max-height: 90% !important;
            }
        }

        /* Untuk Mobile ukuran standar */
        @media (max-width: 768px) {
            :root {
                --carousel-radius: 240px;
            }
            .carousel-scene {
                perspective: 1000px;
                height: 120px;
                margin-top: 2rem;
            }
            .carousel {
                width: 180px;
                height: 100px;
            }
            .carousel-cell {
                width: 150px;
                height: 80px;
            }
            .carousel-cell img {
                height: 70%;
            }
            .carousel-cell.is-in-front img {
                transform: scale(1.3);
            }
            
            /* Perbaikan Katalon untuk Mobile Standar */
            .carousel-cell:nth-child(16) img {
                padding: 10px !important;
                max-width: 85% !important;
                max-height: 85% !important;
            }
        }
        
        /* Untuk Mobile ukuran kecil */
        @media (max-width: 480px) {
            :root {
                --carousel-radius: 180px;
            }
            .carousel-scene {
                perspective: 800px;
                height: 100px;
            }
            .carousel {
                width: 140px;
                height: 80px;
            }
            .carousel-cell {
                width: 120px;
                height: 70px;
            }
            .carousel-cell img {
                height: 65%;
            }
            .carousel-cell.is-in-front img {
                transform: scale(1.2);
            }
            
            /* Perbaikan Katalon untuk Mobile Kecil */
            .carousel-cell:nth-child(16) img {
                padding: 12px !important;
                max-width: 80% !important;
                max-height: 80% !important;
            }
        }

        /* === Animasi Logo Footer: mengambang + cahaya === */
        .footer-logo-container {
            display: inline-block;
            padding: 0.5rem;
            border-radius: 0.75rem;
            animation: float 6s ease-in-out infinite, footer-pulse 4.5s ease-in-out infinite;
            --footer-blue: 59, 130, 246;   /* #3b82f6 */
            --footer-purple: 139, 92, 246; /* #8b5cf6 */
        }

        .footer-logo-container img {
            display: block;
            filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.45));
            transition: transform 0.6s ease, filter 0.6s ease;
            will-change: transform, filter;
        }

        .footer-logo-container:hover img {
            transform: translateY(-2px) scale(1.03);
            filter: drop-shadow(0 0 24px rgba(99, 102, 241, 0.75));
        }

        @keyframes footer-pulse {
            0% {
                box-shadow:
                    0 0 18px -6px rgba(var(--footer-blue), 0.35),
                    0 0 0 0 rgba(var(--footer-purple), 0.0);
            }
            50% {
                box-shadow:
                    0 0 38px 6px rgba(var(--footer-blue), 0.55),
                    0 0 60px 10px rgba(var(--footer-purple), 0.22);
            }
            100% {
                box-shadow:
                    0 0 18px -6px rgba(var(--footer-blue), 0.35),
                    0 0 0 0 rgba(var(--footer-purple), 0.0);
            }
        }