/* == VARIASI WARNA & FONT == */
        :root {
            --primary-color: #ffc107;
            --dark-color: #1a1a1a;
            --secondary-dark: #2c2c2c;
            --light-color: #f8f9fa;
            --text-color: #dcdcdc;
            --text-muted: #888;
        }

        /* == RESET DASAR & FONT == */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 70px; /* Adjusted offset */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--dark-color);
            color: var(--text-color);
            line-height: 1.6;
            font-size: 16px; /* Base font size */
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        a {
            text-decoration: none;
            color: var(--primary-color);
            transition: color 0.3s ease;
        }

        a:hover {
            color: #fff;
        }

        ul {
            list-style: none;
        }

        img {
            max-width: 100%;
            height: auto; /* Ensure aspect ratio is maintained */
            display: block;
        }

        .section-padding {
            padding: 80px 0;
        }

        .section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 700;
            color: #fff;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto 50px auto;
        }

        /* == TOMBOL CTA == */
        .cta-button,
        .cta-button-primary,
        .cta-button-secondary {
            display: inline-flex; /* Use flex for icon alignment */
            align-items: center; /* Vertically center icon and text */
            justify-content: center; /* Center content horizontally */
            padding: 12px 28px;
            border-radius: 5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer; /* Ensure pointer cursor */
            text-align: center; /* Ensure text is centered if it wraps (though unlikely with nowrap) */
            white-space: nowrap; /* Prevent text wrapping */
        }
        .cta-button i,
        .cta-button-primary i,
        .cta-button-secondary i {
            margin-right: 8px; /* Consistent spacing for icons */
        }

        .cta-button { /* Navbar button */
            background-color: var(--primary-color);
            color: var(--dark-color);
            border-color: var(--primary-color);
        }
        .cta-button:hover {
            background-color: transparent;
            color: var(--primary-color);
        }

        .cta-button-primary { /* Main action button */
            background-color: var(--primary-color);
            color: var(--dark-color);
            border-color: var(--primary-color);
        }
        .cta-button-primary:hover {
            background-color: #ffda6a;
            border-color: #ffda6a;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.2);
        }

        .cta-button-secondary { /* Secondary action button */
            background-color: transparent;
            color: #fff;
            border-color: #fff;
            margin-left: 15px; /* Only applies when next to another button */
        }
        .cta-button-secondary:hover {
            background-color: #fff;
            color: var(--dark-color);
        }

        /* == HEADER & NAVIGASI == */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(26, 26, 26, 0.9);
            backdrop-filter: blur(10px);
            padding: 15px 0; /* Slightly reduced padding */
            z-index: 1000;
            border-bottom: 1px solid #333;
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-logo {
            font-size: 1.6rem; /* Slightly smaller logo */
            font-weight: 700;
            color: #fff;
            display: inline-flex; /* Align icons */
            align-items: center;
            gap: 5px; /* Space between icons and text */
        }
        .navbar-logo i {
            color: var(--primary-color);
        }
        .navbar-logo span {
            color: var(--primary-color);
        }

        .navbar-menu ul {
            display: flex;
        }
        .navbar-menu li {
            margin-left: 30px;
        }
        .navbar-menu a {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            padding-bottom: 5px;
            border-bottom: 2px solid transparent;
        }
        .navbar-menu a:hover,
        .navbar-menu a.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        
        /* == LAYANAN KAMI == */
        .layanan-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }
        .layanan-card {
            background-color: var(--secondary-dark);
            padding: 30px 25px; /* Adjusted padding */
            border-radius: 8px;
            border-bottom: 4px solid var(--secondary-dark);
            transition: all 0.3s ease;
            text-align: center;
            flex-basis: 280px; /* Slightly smaller base */
            flex-grow: 1;
            max-width: 350px; /* Slightly smaller max */
        }
        .layanan-card:hover {
            transform: translateY(-8px); /* Reduced hover effect */
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25); /* Softer shadow */
            border-bottom-color: var(--primary-color);
        }
        .card-icon {
            margin-bottom: 20px;
        }
        .layanan-card h3 {
            font-size: 1.4rem; /* Adjusted size */
            color: #fff;
            margin-bottom: 10px; /* Reduced margin */
        }
        .layanan-card p {
            color: var(--text-muted);
            font-size: 0.95rem; /* Adjusted size */
        }

        /* == GALERI (MODIFIKASI SLIDER) == */
        #galeri {
            background-color: var(--secondary-dark);
        }
        
        /* Hapus .galeri-grid */
        /*
        .galeri-grid { ... }
        */

        .galeri-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
            display: block; /* Pastikan <a> mengisi ruang */
        }
        .galeri-item img {
            width: 100%;
            height: 100%; /* Ubah tinggi agar mengisi slide */
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .galeri-item:hover img {
            transform: scale(1.1);
        }
        .galeri-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: #fff;
            padding: 20px 15px 15px; /* Adjusted padding */
            font-size: 1rem; /* Adjusted size */
            font-weight: 600;
            transform: translateY(100%);
            opacity: 0;
            transition: all 0.4s ease;
        }
        .galeri-item:hover .galeri-overlay {
            transform: translateY(0);
            opacity: 1;
        }

        /* == STYLING SLIDER GALERI (SWIPER) == */
        .galeri-slider {
            width: 100%;
            padding-top: 10px; /* Ruang untuk pagination */
            padding-bottom: 50px; /* Ruang untuk pagination */
            overflow: hidden; /* Pastikan overflow terkelola */
            position: relative;
        }

        /* Pastikan slide memiliki tinggi yang konsisten */
        .galeri-slider .swiper-slide {
            height: 220px; /* Tentukan tinggi slide yang konsisten */
            background-color: var(--secondary-dark); /* Latar belakang jika gambar lambat dimuat */
        }

        /* Kustomisasi Navigasi (Panah) */
        .galeri-slider .swiper-button-next,
        .galeri-slider .swiper-button-prev {
            color: var(--primary-color); /* Warna kuning primer */
            background-color: rgba(26, 26, 26, 0.7); /* Latar belakang semi-transparan */
            width: 44px;
            height: 44px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
            margin-top: -22px; /* Setengah dari tinggi, untuk center vertikal */
        }
        .galeri-slider .swiper-button-next:hover,
        .galeri-slider .swiper-button-prev:hover {
            background-color: rgba(0, 0, 0, 0.9);
        }
        .galeri-slider .swiper-button-next::after,
        .galeri-slider .swiper-button-prev::after {
            font-size: 1.2rem; /* Ukuran ikon panah */
            font-weight: 900;
        }

        /* Kustomisasi Pagination (Titik-titik) */
        .galeri-slider .swiper-pagination {
            bottom: 10px; /* Posisikan di bawah */
        }
        .galeri-slider .swiper-pagination-bullet {
            background-color: var(--text-muted);
            opacity: 0.7;
        }
        .galeri-slider .swiper-pagination-bullet-active {
            background-color: var(--primary-color);
            opacity: 1;
        }
        /* == AKHIR STYLE GALERI == */


        /* == TENTANG KAMI == */
        .tentang-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px; /* Reduced gap */
            align-items: center;
        }
        .tentang-gambar img {
            border-radius: 8px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Softer shadow */
        }
        .tentang-teks .section-title {
            text-align: left;
        }
        .tentang-teks p {
            margin-bottom: 20px; /* Reduced margin */
            font-size: 1.05rem; /* Adjusted size */
        }
        .keunggulan-list li {
            font-size: 1rem; /* Adjusted size */
            margin-bottom: 12px; /* Reduced margin */
            display: flex;
            align-items: center;
        }
        .keunggulan-list i {
            color: var(--primary-color);
            margin-right: 12px; /* Reduced margin */
            font-size: 1.1rem; /* Adjusted size */
        }

        /* == BOOKING FORM == */
        #booking {
            background-color: var(--secondary-dark);
        }
        .booking-form {
            max-width: 800px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px; /* Reduced gap */
        }

        .full-width {
            grid-column: 1 / -1;
        }

        .booking-form input,
        .booking-form textarea,
        .booking-form select {
            width: 100%;
            padding: 12px 15px; /* Adjusted padding */
            background-color: #3a3a3a;
            border: 1px solid #555;
            color: #fff;
            border-radius: 5px;
            font-size: 1rem;
            font-family: inherit;
        }
        .booking-form input::placeholder,
        .booking-form textarea::placeholder {
            color: #999;
        }
        .booking-form textarea {
            resize: vertical; /* Allow vertical resize only */
        }
        .booking-form button {
            padding: 12px 25px; /* Adjusted padding */
            font-size: 1rem; /* Adjusted size */
            cursor: pointer;
        }

        /* == FOOTER == */
        #kontak {
            background-color: #111;
            padding: 70px 0 0 0; /* Reduced padding */
            color: var(--text-muted);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1.5fr 1fr;
            gap: 40px; /* Reduced gap */
            margin-bottom: 50px; /* Reduced margin */
        }
        .footer-col h3 {
            font-size: 1.1rem; /* Adjusted size */
            color: #fff;
            margin-bottom: 10px; /* Reduced margin */
        }
        .footer-col h3 i {
            color: var(--primary-color);
        }
        .footer-col h3 span {
            color: var(--primary-color);
        }
        .social-media {
            margin-top: 15px; /* Reduced margin */
        }
        .social-media a {
            display: inline-flex;
            width: 38px; /* Slightly smaller */
            height: 38px;
            background-color: var(--secondary-dark);
            color: #fff;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 8px; /* Reduced margin */
            font-size: 1.1rem; /* Adjusted size */
            transition: all 0.3s ease;
        }
        .social-media a:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-3px);
        }

        .kontak-list li,
        .jam-buka li {
            margin-bottom: 12px; 
            display: flex; /* Menggunakan flexbox untuk alignment */
            align-items: baseline; /* Menjaga teks tetap lurus */
            font-size: 0.80rem; 
        }

        .jam-buka span {
            display: inline-block;
            flex-basis: 100px; /* Beri lebar dasar yang cukup */
            flex-shrink: 0; /* Mencegah teks hari menyusut */
            color: #fff;
            font-weight: 300;
        }

        .kontak-list i {
            width: 22px; /* Adjusted width */
            margin-right: 8px; /* Reduced margin */
            color: var(--primary-color);
            font-size: 1rem; /* Adjusted size */
            text-align: center;
            margin-top: 2px; /* Fine-tune alignment */
        }

        .footer-bottom {
            background-color: #000;
            padding: 20px 0; /* Reduced padding */
            text-align: center;
            font-size: 0.85rem; /* Adjusted size */
        }
        .footer-bottom i {
            color: var(--primary-color);
        }

        
        /* == TOMBOL WHATSAPP FLOAT (Dengan Teks - Default Desktop) == */
        .whatsapp-float {
            position: fixed;
            padding: 10px 18px; 
            bottom: 25px; 
            right: 25px;
            background-color: #25D366;
            color: #FFF;
            border-radius: 50px; /* Bentuk kapsul */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1001;
            transition: all 0.3s ease;
            text-decoration: none;
            white-space: nowrap; /* Teks tidak turun baris */
        }
        .whatsapp-float i {
            font-size: 1.5rem; 
            line-height: 1;
        }
        .whatsapp-float span {
            font-size: 0.95rem; 
            font-weight: 600;
            line-height: 1;
            display: inline-block; /* Pastikan span tampil */
        }
        .whatsapp-float:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
            color: #FFF;
        }
        

        /* == RESPONSIVE DESIGN == */

        /* Medium devices (tablets, less than 992px) */
        @media (max-width: 991.98px) {
            html {
                scroll-padding-top: 60px; /* Adjust for potentially smaller navbar */
            }
            .navbar {
                padding: 12px 0;
            }
            .section-padding {
                padding: 60px 0; /* Reduced section padding */
            }
            .section-title {
                font-size: 2.2rem;
            }
            .section-subtitle {
                font-size: 1rem;
                margin-bottom: 40px;
            }
            .hero-content h1 {
                font-size: 2.5rem;
            }
            .hero-content p {
                font-size: 1.1rem;
            }
            .tentang-wrapper {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .tentang-gambar {
                order: -1;
                margin-bottom: 30px;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
                text-align: center; /* Center footer content */
            }
            .kontak-list, {
                justify-content: center; /* Center list items */
            }
            .social-media {
                justify-content: center; /* Center social icons */
            }
            .booking-form {
                grid-template-columns: 1fr; /* Form 1 column earlier */
            }
            .booking-form input,
            .booking-form textarea,
            .booking-form select,
            .booking-form button,
            .full-width {
                grid-column: 1 / -1;
            }
        }

        /* Small devices (landscape phones, less than 768px) */
        @media (max-width: 767.98px) {
            .navbar-menu { display: none; }
            .navbar .cta-button-primary { display: none; } /* Hide booking button too */
            .navbar-logo { font-size: 1.4rem; } /* Smaller logo */

            .hero-content h1 {
                font-size: 2rem; /* Further reduce size */
            }
            .hero-content p {
                font-size: 1rem; /* Further reduce size */
            }

            .hero-features {
                flex-direction: column; /* Stack features vertically */
                gap: 10px;
                overflow-x: hidden;
                white-space: normal;
                padding: 10px 15px;
                max-width: 80%; /* Limit width on mobile */
            }
            .hero-features span {
                width: 100%; /* Make each feature full width */
                justify-content: center;
                font-size: 0.85rem;
            }

            .hero-buttons {
                display: flex;
                flex-direction: column; /* Stack buttons vertically */
                gap: 15px;
                align-items: center; /* Center buttons */
                width: 100%;
                margin-top: 30px; /* Reduced margin */
            }
            .hero-buttons a {
                width: 80%; /* Control button width */
                max-width: 300px;
                margin-left: 0;
            }
            .cta-button-secondary {
                margin-left: 0; /* Remove margin when stacked */
            }

            .layanan-card {
                flex-basis: 100%; /* Make cards full width */
                max-width: none;
            }

            /* Responsive galeri-grid (sudah tidak terpakai) */
            /*
            .galeri-grid { ... }
            .galeri-item img { ... }
            */

            /* == RESPONSIVE WHATSAPP FLOAT (HANYA IKON) == */
            .whatsapp-float {
                /* Kembalikan ke bentuk lingkaran */
                width: 50px; 
                height: 50px; 
                padding: 0; /* Hapus padding */
                border-radius: 50%; /* Jadi bulat */
                bottom: 20px; 
                right: 20px; 
                gap: 0; /* Hapus gap */
            }
            .whatsapp-float i {
                font-size: 1.8rem; /* Ukuran ikon normal lagi */
                margin: 0; /* Pastikan tidak ada margin sisa */
            }
            .whatsapp-float span {
                display: none; /* SEMBUNYIKAN TEKS di layar kecil */
            }
            .whatsapp-float:hover {
                transform: scale(1.1); /* Efek hover sedikit lebih besar saat bulat */
            }
        }

        /* Extra small devices (portrait phones, less than 576px) */
        @media (max-width: 575.98px) {
            .container {
                padding: 0 15px; /* Reduce container padding */
            }
            .section-padding {
                padding: 50px 0; /* Further reduce section padding */
            }
            .section-title {
                font-size: 1.8rem;
            }
            .hero-content h1 {
                font-size: 1.8rem;
            }
            .hero-content p {
                font-size: 0.95rem;
            }
            .tentang-teks p {
                font-size: 1rem;
            }
            .keunggulan-list li {
                font-size: 0.95rem;
            }
            .booking-form input,
            .booking-form textarea,
            .booking-form select {
                font-size: 0.9rem; /* Smaller form font */
            }
        }

        /* == CSS SECTION PROMO SPESIAL == */
        .promo-section {
            background-color: var(--primary-color); /* Latar kuning cerah */
            padding: 60px 0;
            color: var(--dark-color); /* Teks gelap agar kontras */
            position: relative;
            overflow: hidden;
        }

        /* Efek pattern background halus (opsional, agar tidak terlalu polos) */
        .promo-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0.05;
            background-image: radial-gradient(var(--dark-color) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
        }

        .promo-wrapper {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr; /* Teks lebih lebar dari gambar */
            gap: 40px;
            align-items: center;
            background: rgba(255,255,255,0.1); /* Sedikit efek kaca */
            padding: 30px;
            border-radius: 15px;
            border: 2px solid var(--dark-color);
            box-shadow: 10px 10px 0px var(--dark-color); /* Efek bayangan tegas modern */
        }

        .promo-badge {
            display: inline-block;
            background: var(--dark-color);
            color: var(--primary-color);
            font-weight: 700;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }

        .promo-content h2 {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 5px;
            text-transform: uppercase;
        }

        .promo-content h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .promo-price {
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .price-coret {
            font-size: 1.2rem;
            text-decoration: line-through;
            opacity: 0.7;
        }

        .price-deal {
            font-size: 2rem;
            font-weight: 800;
            color: #d00000; /* Merah cabe untuk harga promo agar mencolok */
            background: #fff;
            padding: 5px 15px;
            transform: rotate(-2deg); /* Efek miring sedikit agar dinamis */
            display: inline-block;
        }

        .promo-features {
            list-style: none;
            margin-bottom: 30px;
        }

        .promo-features li {
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .promo-features i {
            background: var(--dark-color);
            color: var(--primary-color);
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            margin-right: 10px;
        }

        .promo-image img {
            border-radius: 10px;
            border: 3px solid var(--dark-color);
            transform: rotate(3deg); /* Efek gambar miring agar playfull */
            transition: all 0.3s ease;
        }
        .promo-image img:hover {
            transform: rotate(0deg) scale(1.05); /* Efek interaktif saat hover */
        }

        /* Tombol Khusus warna Hitam untuk di background kuning */
        .cta-button-black {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 15px 35px;
            background-color: var(--dark-color);
            color: #fff !important; /* Paksa warna teks putih */
            border-radius: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .cta-button-black i {
            margin-right: 10px;
            font-size: 1.3rem;
        }
        .cta-button-black:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            background-color: #000; /* Lebih gelap saat hover */
        }

        /* RESPONSIVE PROMO */
        @media (max-width: 991.98px) {
            .promo-wrapper {
                grid-template-columns: 1fr; /* Jadi 1 kolom di tablet/HP */
                text-align: center;
                gap: 30px;
            }
            .promo-price, .promo-features li {
                justify-content: center;
            }
            .promo-image {
                order: -1; /* Gambar pindah ke atas di HP */
                margin: 0 auto;
                max-width: 80%;
            }
            .promo-content h2 {
                font-size: 2rem;
            }
        }

        /* Teks intro di atas badge */
        .promo-intro {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Tombol Promo Hijau WhatsApp */
        .cta-button-wa-promo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 15px 35px;
            background-color: #25D366; /* Warna Hijau WA */
            color: #fff !important;
            border-radius: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
        }
        .cta-button-wa-promo i {
            margin-right: 10px;
            font-size: 1.3rem;
        }
        .cta-button-wa-promo:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5);
            background-color: #1da851; /* Hijau lebih gelap saat hover */
        }

        .price-deal .big-num {
            font-size: 1.9em; /* 40% lebih besar dari teks di sekitarnya */
            font-weight: 900; /* Sangat tebal */
            vertical-align: bottom; /* Menjaga kerataan teks bawah */
            line-height: 0.9;
        }

        /* ========================================= */
				/* === CSS POP-UP FULL (2 KOLOM) =========== */
				/* ========================================= */

				.popup-overlay {
				    position: fixed;
				    top: 0;
				    left: 0;
				    width: 100%;
				    height: 100%;
				    background-color: rgba(0, 0, 0, 0.85);
				    z-index: 9999;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    padding: 20px;
				    opacity: 0;
				    visibility: hidden;
				    transition: all 0.4s ease-in-out;
				}

				.popup-overlay.show {
				    opacity: 1;
				    visibility: visible;
				}

				/* Kotak Utama Pop-up */
				.popup-content {
				    background-color: var(--secondary-dark);
				    border: 2px solid var(--primary-color);
				    border-radius: 15px;
				    width: 95%;
				    max-width: 850px; /* Lebih lebar untuk 2 kolom */
				    display: flex;    /* KUNCI: Flexbox untuk 2 kolom */
				    overflow: hidden;
				    position: relative;
				    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
				    transform: translateY(30px) scale(0.95);
				    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
				}

				.popup-overlay.show .popup-content {
				    transform: translateY(0) scale(1);
				}

				/* Tombol Close */
				.popup-close {
				    position: absolute;
				    top: 15px;
				    right: 15px;
				    width: 35px;
				    height: 35px;
				    background: rgba(0, 0, 0, 0.6);
				    color: #fff;
				    border: 2px solid #fff;
				    border-radius: 50%;
				    font-size: 20px;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    cursor: pointer;
				    z-index: 10;
				    transition: all 0.3s ease;
				}
				.popup-close:hover {
				    background-color: var(--primary-color);
				    color: var(--dark-color);
				    border-color: var(--primary-color);
				    transform: rotate(90deg);
				}

				/* === KOLOM 1: GAMBAR === */
				.popup-image {
				    flex: 1; /* Mengambil 50% ruang (atau menyesuaikan rasio) */
				    background-color: #000;
				    position: relative;
				    min-height: 300px; /* Tinggi minimal di desktop */
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    overflow: hidden;
				}

				.popup-image img {
				    width: 100%;
				    height: 100%;
				    /* Gunakan 'cover' agar gambar memenuhi area kolom tanpa celah.
				       Risiko: sedikit terpotong jika rasio tidak pas.
				       Jika ingin TIDAK TERPOTONG sama sekali, ganti jadi 'contain'.
				    */
				    object-fit: cover; 
				    display: block;
				}

				/* === KOLOM 2: TEKS === */
				.popup-text {
				    flex: 1; /* Mengambil 50% ruang sisanya */
				    padding: 40px;
				    display: flex;
				    flex-direction: column;
				    justify-content: center; /* Teks rata tengah secara vertikal */
				    text-align: left; /* Teks rata kiri agar rapi */
				    color: #fff;
				}

				.popup-text h3 {
				    font-size: 2rem;
				    color: var(--primary-color);
				    margin-bottom: 15px;
				    line-height: 1.2;
				    font-weight: 900;
				    text-transform: uppercase;
				}

				.popup-text p {
				    font-size: 1.1rem;
				    color: #e0e0e0;
				    margin-bottom: 30px;
				    line-height: 1.6;
				}

				.popup-text .cta-button-primary {
				    width: fit-content; /* Tombol menyesuaikan teks */
				    padding: 15px 30px;
				    font-size: 1.1rem;
				}

				/* ========================================= */
				/* === RESPONSIVE (MODE HP) ================ */
				/* ========================================= */
				@media (max-width: 768px) {
				    .popup-content {
				        flex-direction: column; /* Kembali ditumpuk vertikal */
				        max-width: 450px;
				        max-height: 90vh; /* Batasi tinggi di HP */
				        overflow-y: auto; /* Izinkan scroll di HP */
				    }
				    
				    .popup-image {
				        flex: none; /* Matikan flex 50% */
				        width: 100%;
				        min-height: 200px;
				        max-height: 250px; /* Batasi tinggi gambar di HP */
				    }
				    
				    .popup-text {
				        flex: none;
				        padding: 25px 20px;
				        text-align: center; /* Kembali rata tengah di HP */
				    }

				    .popup-text h3 {
				        font-size: 1.6rem;
				    }
				    .popup-text p {
				        font-size: 1rem;
				        margin-bottom: 20px;
				    }
				    .popup-text .cta-button-primary {
				        width: 100%; /* Tombol penuh di HP */
				        justify-content: center;
				    }
				}