/* Mengatur font dasar untuk seluruh body */
    body {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth; /* Mengaktifkan smooth scrolling untuk tautan anchor */
        min-height: 100vh; /* Memastikan body setidaknya setinggi viewport */
        display: flex; /* Mengaktifkan flexbox untuk tata letak kolom */
        flex-direction: column; /* Menyusun konten dalam kolom */
        /* Latar belakang gradasi terang untuk seluruh halaman */
        background: linear-gradient(to bottom, #f0f2f5, #e0e5ec);
        color: var(--color-black-main); /* Warna teks default untuk tema terang: HITAM */
    }
    /* Penyesuaian umum untuk paragraf agar jarak baris lebih nyaman */
    p {
        line-height: 1.6;
    }
    /* Definisi variabel CSS untuk warna kustom, memudahkan perubahan tema */
    :root {
        --color-gold-main: #DAA520; /* Warna emas utama */
        --color-gold-dark: #B8860B; /* Warna emas yang lebih gelap */
        --color-black-main: #1a1a1a; /* Warna hitam gelap untuk teks dan elemen */
        --color-dark-gray-bg: #e0e5ec; /* Warna abu-abu terang untuk latar belakang bagian */
        --color-dark-card-bg: #ffffff; /* Warna putih untuk kartu */
        --color-white-main: #FFFFFF; /* Warna putih (digunakan untuk teks emas atau di latar belakang gelap) */
        --color-light-gray: #F3F4F6; /* Warna abu-abu terang untuk latar belakang bagian */
        --color-product-section-bg: #F8F8F8; /* Latar belakang khusus untuk bagian produk */
        --color-success-green: #28a745; /* Warna hijau untuk notifikasi sukses */
    }
    /* Gaya kustom untuk elemen dengan sudut membulat dan bayangan */
    .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Bayangan lebih terang untuk tema terang */
    }
    /* Gaya untuk tombol utama (primary button) */
    .btn-primary {
        background-color: var(--color-gold-main);
        color: var(--color-white-main); /* Teks tombol utama tetap PUTIH untuk kontras dengan emas */
        padding: 0.75rem 1.5rem; /* px-6 py-3 */
        border-radius: 9999px; /* rounded-full */
        font-weight: 600; /* font-semibold */
        transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Tambah transisi untuk transform dan box-shadow */
    }
    .btn-primary:hover {
        background-color: var(--color-gold-dark);
        transform: translateY(-2px) scale(1.02); /* Sedikit naik dan membesar */
        box-shadow: 0 8px 15px rgba(218, 165, 32, 0.2); /* Bayangan lebih jelas */
    }
    /* Gaya untuk tombol sekunder (secondary button) */
    .btn-secondary {
        border: 2px solid var(--color-gold-main);
        color: var(--color-gold-main); /* Teks tombol sekunder tetap EMAS */
        padding: 0.75rem 1.5rem; /* px-6 py-3 */
        border-radius: 9999px; /* rounded-full */
        font-weight: 600; /* font-semibold */
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Tambah transisi */
    }
    .btn-secondary:hover {
        background-color: var(--color-gold-main);
        color: var(--color-white-main); /* Teks tombol sekunder berubah PUTIH saat hover */
        transform: translateY(-2px) scale(1.02); /* Sedikit naik dan membesar */
        box-shadow: 0 8px 15px rgba(218, 165, 32, 0.2); /* Bayangan lebih jelas */
    }
    /* Gaya khusus untuk kontainer video latar belakang hero section */
        .hero-video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        /* Gaya untuk video latar belakang agar menutupi seluruh area dan tetap responsif */
        .hero-video {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover; /* Memastikan video menutupi seluruh kontainer */
        }
        /* Overlay gelap di atas video untuk meningkatkan keterbacaan teks */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* Warna hitam transparan */
            z-index: 1;
            /* Animasi overlay baru */
            animation: pulseOverlay 8s infinite alternate ease-in-out;
            /* Menambahkan blur pada overlay untuk efek visual yang lebih baik */
            backdrop-filter: blur(2px); /* Efek blur */
            -webkit-backdrop-filter: blur(2px); /* Kompatibilitas browser */
        }
        /* Keyframes untuk animasi pulsating overlay */
        @keyframes pulseOverlay {
            0% { background: rgba(0, 0, 0, 0.6); }
            50% { background: rgba(0, 0, 0, 0.75); }
            100% { background: rgba(0, 0, 0, 0.6); }
        }
        /* Konten teks di hero section, di atas overlay */
        .hero-content {
            position: relative;
            z-index: 2;
        }
        /* Animasi fade-in dan slide-up untuk teks di header */
        @keyframes fadeInSlideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-text-header {
            animation: fadeInSlideUp 1s ease-out forwards;
        }
        /* Gaya teks dengan gradasi warna emas */
        .text-gradient-gold {
            background-image: linear-gradient(to right, var(--color-gold-main), var(--color-gold-dark));
            -webkit-background-clip: text; /* Memotong latar belakang sesuai bentuk teks */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Membuat warna teks transparan agar gradien terlihat */
            color: transparent; /* Fallback untuk browser yang tidak mendukung text-fill-color */
        }
        /* Gaya untuk stroke pada teks judul utama */
        .hero-title-stroke {
            -webkit-text-stroke: 1.5px #FFFFFF; /* Lebar 1.5px, warna putih */
            text-stroke: 1.5px #FFFFFF; /* Standard property for non-webkit browsers */
        }
        /* Gaya untuk shadow teks keemasan (untuk teks putih) */
        .text-shadow-gold {
            text-shadow: 0 0 10px rgba(218, 165, 32, 0.9), 0 0 20px rgba(218, 165, 32, 0.7), 0 0 30px rgba(218, 165, 32, 0.5); /* Gold glow effect, lebih tebal */
        }
        /* Gaya untuk shadow teks putih (untuk teks emas) */
        .text-shadow-white {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.4); /* White glow effect, lebih tipis */
        }
        /* Gaya khusus untuk slider gambar */
        .slider-container {
            position: relative;
            overflow: hidden; /* Menyembunyikan item slider yang tidak terlihat */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
            /* Make slider container wider for a more immersive feel */
            max-width: 100%; /* Full width on smaller screens */
            width: 100%; /* Ensure it takes full available width */
        }
        /* Adjust max-width for larger screens */
        @media (min-width: 1024px) { /* Equivalent to lg: */
            .slider-container {
                max-width: 1280px; /* Example: max-w-screen-xl */
            }
        }
    .slider-wrapper {
        display: flex; /* Menata item slider secara horizontal */
        transition: transform 0.5s ease-in-out; /* Animasi transisi saat slide berubah */
        scroll-snap-type: x mandatory; /* Mengaktifkan snapping scroll horizontal */
        /* Removed overflow-x: hidden; from here */
        -webkit-overflow-scrolling: touch; /* Memperlancar scrolling di iOS */
    }
    .slider-item {
        flex: 0 0 100%; /* Setiap item mengambil lebar penuh kontainer */
        scroll-snap-align: start; /* Menjepit ke awal setiap item */
        width: 100%; /* Memastikan lebar untuk perhitungan */
    }
    .slider-item img {
        width: 100%;
        height: 70vh; /* Set a consistent height, responsive to viewport height */
        object-fit: cover; /* Ensures images cover the area without distortion */
        border-radius: 0.75rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out; /* Add filter transition */
    }
    .slider-item img:hover {
        transform: scale(1.01); /* Slight scale on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
        filter: brightness(1.05); /* Subtle brightness increase on hover */
    }
    /* Gaya untuk tombol navigasi slider (panah) */
    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.9); /* Latar belakang panah lebih opak */
        color: var(--color-black-main); /* Warna panah HITAM */
        border: none;
        padding: 1rem 0.75rem; /* Larger padding */
        cursor: pointer;
        font-size: 2rem; /* Larger font size */
        border-radius: 0.75rem; /* More rounded corners */
        transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; /* Add opacity transition */
        z-index: 10; /* Ensure arrows are above images */
        opacity: 0.95; /* Panah lebih opaque secara default */
    }
    .slider-arrow:hover {
        background-color: rgba(255, 255, 255, 1); /* Lebih solid saat hover */
        transform: translateY(-50%) scale(1.1);
        opacity: 1; /* Fully opaque on hover */
    }
    .slider-prev {
        left: 10px;
    }
    .slider-next {
        right: 10px;
    }
    /* Gaya untuk indikator dot slider */
    .slider-dot {
        width: 12px; /* Slightly larger dots */
        height: 12px; /* Slightly larger dots */
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6); /* Warna dot lebih gelap dan jelas */
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease; /* Add transform transition */
    }
    .slider-dot.active {
        background-color: var(--color-gold-main);
        transform: scale(1.2); /* Active dot is slightly larger */
    }
    /* Gaya umum untuk judul section (misal: "Layanan Kami", "Tentang Kami", "Produk", dll.) */
    .section-title {
        color: var(--color-black-main); /* Judul section utama: HITAM */
        font-size: 2.75rem; /* Ukuran font yang lebih menonjol */
        font-weight: 800; /* Extra bold */
        text-align: center;
        margin-bottom: 2.5rem; /* Tambah margin */
        text-shadow: 3px 3px 8px rgba(0,0,0,0.4); /* Bayangan lebih jelas untuk judul section */
    }
    @media (min-width: 768px) { /* md: */
        .section-title {
            font-size: 3.5rem;
        }
    }
    @media (min-width: 1024px) { /* lg: */
        .section-title {
            font-size: 4rem;
        }
    }
    .section-subtitle {
        color: var(--color-gold-main); /* Subjudul section: EMAS */
        font-size: 1.3rem; /* Sedikit lebih besar */
        font-weight: 600; /* Lebih tebal */
        text-align: center;
        margin-bottom: 2rem; /* Tambah margin */
        text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Sedikit bayangan untuk subjudul emas */
    }
    /* Gaya umum untuk judul section (misal: "Layanan Kami", "Tentang Kami", "Produk", dll.) */
    .section-title-header {
        color: var(--color-white-main); /* Judul section utama: PUTIH */
        font-size: 2.75rem; /* Ukuran font yang lebih menonjol */
        font-weight: 800; /* Extra bold */
        text-align: center;
        margin-bottom: 2.5rem; /* Tambah margin */
        /* Efek shadow kemasan yang diperbarui */
        text-shadow: 2px 2px 8px rgba(0,0,0,0.7), 0 0 15px rgba(255,255,255,0.8), 0 0 25px var(--color-gold-main);
    }
    @media (min-width: 768px) { /* md: */
        .section-title {
            font-size: 3.5rem;
        }
    }
    @media (min-width: 1024px) { /* lg: */
        .section-title {
            font-size: 4rem;
        }
    }
    .section-subtitle {
        color: var(--color-gold-main); /* Subjudul section: EMAS */
        font-size: 1.3rem; /* Sedikit lebih besar */
        font-weight: 600; /* Lebih tebal */
        text-align: center;
        margin-bottom: 2rem; /* Tambah margin */
        text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Sedikit bayangan untuk subjudul emas */
    }
    /* --- Gaya Animasi untuk Kartu Layanan, Tentang Kami, Testimoni, dan Produk --- */
    .animated-card {
        opacity: 0; /* Awalnya tidak terlihat */
        transform: translateY(50px); /* Awalnya sedikit di bawah */
        transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transisi untuk animasi */
        background-color: var(--color-dark-card-bg); /* Latar belakang kartu: PUTIH */
        padding: 1.5rem;
        border-radius: 0.75rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Bayangan kartu sedikit lebih kuat */
    }
    .animated-card.is-visible {
        opacity: 1; /* Menjadi terlihat */
        transform: translateY(0); /* Kembali ke posisi asli */
    }
    .animated-card h3 { /* Judul di dalam kartu (misal: nama layanan, nama produk) */
        color: var(--color-gold-main); /* Judul kartu: EMAS */
        font-size: 1.6rem; /* Sedikit lebih besar */
        font-weight: 700; /* Lebih tebal */
        margin-bottom: 0.75rem; /* Tambah margin */
        text-shadow: 0 0 5px rgba(218, 165, 32, 0.5); /* Glow emas lebih menonjol pada judul kartu */
    }
    .animated-card p { /* Deskripsi di dalam kartu */
        color: var(--color-black-main); /* Teks deskripsi kartu: HITAM */
        font-size: 1rem;
        line-height: 1.7; /* Meningkatkan jarak antar baris */
    }
    /* Penundaan animasi untuk efek berurutan */
    .animated-card:nth-child(1) { transition-delay: 0s; }
    .animated-card:nth-child(2) { transition-delay: 0.2s; }
    .animated-card:nth-child(3) { transition-delay: 0.4s; }
    .animated-card:nth-child(4) { transition-delay: 0.6s; }
    .animated-card:nth-child(5) { transition-delay: 0.8s; }
    .animated-card:nth-child(6) { transition-delay: 1.0s; }
    /* --- Akhir Gaya Animasi Kartu --- */
    /* Gaya untuk Galeri Gambar */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsif */
        gap: 1.5rem;
    }
    .gallery-item {
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .gallery-item:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    .gallery-item img {
        width: 100%;
        height: 250px; /* Tinggi tetap untuk konsistensi */
        object-fit: cover;
        border-radius: 0.75rem; /* Sudut membulat pada gambar */
    }
    .gallery-item-caption {
        background-color: var(--color-dark-card-bg); /* Putih */
        color: var(--color-black-main); /* Hitam */
        padding: 1rem;
        font-weight: 900;
        text-align: center;
        border-top: 1px solid rgba(0,0,0,0.05);
    }
    /* --- Gaya Animasi Hover untuk Tautan Navigasi --- */
    header nav a {
        color: var(--color-white-main); /* Default tautan navigasi PUTIH karena latar header hitam */
        transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
        font-weight: 500; /* Sedikit lebih tebal */
    }
    header nav a:hover {
        transform: translateY(-3px); /* Mengangkat sedikit ke atas saat hover */
        color: var(--color-gold-main); /* Warna EMAS saat hover */
    }
    /* --- Akhir Gaya Animasi Hover --- */
    /* Animasi Pulse untuk Button di Header */
    @keyframes buttonPulse {
        0% { transform: scale(1); box-shadow: 0 0 0 rgba(218, 165, 32, 0.4); } /* Bayangan pulse lebih kuat */
        50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(218, 165, 32, 0.6); } /* Skala dan bayangan pulse lebih besar dan jelas */
        100% { transform: scale(1); box-shadow: 0 0 0 rgba(218, 165, 32, 0.4); }
    }
    .animate-button-pulse {
        animation: buttonPulse 2s infinite ease-in-out;
    }
    /* Gaya untuk menu mobile */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Overlay menu mobile lebih gelap untuk kontras */
        z-index: 40;
        display: none; /* Hidden by default */
    }
    .mobile-menu-content {
        position: fixed;
        top: 0;
        right: -300px; /* Start off-screen */
        width: 280px;
        height: 100%;
        background-color: var(--color-black-main); /* Latar belakang menu mobile HITAM */
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3); /* Bayangan menu mobile lebih kuat */
        z-index: 50;
        transition: right 0.3s ease-in-out;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .mobile-menu-content.open {
        right: 0; /* Slide in */
    }
    .mobile-menu-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 2rem;
        color: var(--color-white-main); /* Warna tombol close PUTIH */
        cursor: pointer;
    }
    .mobile-menu-content a {
        color: var(--color-white-main); /* Tautan di menu mobile PUTIH */
    }
    /* Gaya untuk Modal Customer Service */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Latar belakang modal lebih gelap untuk kontras */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Pastikan di atas semua elemen lain */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    .modal-overlay.open {
        opacity: 1;
        visibility: visible;
    }
    .modal-content {
        background-color: var(--color-dark-card-bg); /* Background modal menjadi PUTIH */
        color: var(--color-black-main); /* Teks di modal menjadi HITAM */
        padding: 2rem;
        border-radius: 0.75rem; /* rounded-lg */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); /* Bayangan modal lebih kuat */
        position: relative;
        max-width: 90%;
        width: 500px; /* Lebar maksimum modal */
        transform: translateY(-20px); /* Mulai sedikit di atas */
        transition: transform 0.3s ease-out;
        /* Penambahan untuk scrolling vertikal pada modal */
        max-height: 90vh; /* Maksimum 90% dari tinggi viewport */
        overflow-y: auto; /* Aktifkan scroll vertikal jika konten melebihi max-height */
    }
    .modal-overlay.open .modal-content {
        transform: translateY(0); /* Kembali ke posisi normal saat terbuka */
    }
    /* Gaya khusus untuk slider video */
    .video-slider-container {
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Bayangan video slider lebih kuat */
        max-width: 100%; /* Full width on smaller screens */
    }
    @media (min-width: 768px) { /* Equivalent to md: */
        .video-slider-container {
            max-width: 90vw; /* Adjust as needed */
        }
    }
    @media (min-width: 1024px) { /* Equivalent to lg: */
        .video-slider-container {
            max-width: 1000px; /* Example: max-w-screen-xl, adjusted for video */
        }
    }
    .video-slider-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .video-slider-item {
        flex: 0 0 100%;
        scroll-snap-align: start;
        width: 100%;
        /* Tailwind aspect ratio classes are used directly in HTML */
    }
    /* Gaya untuk Footer */
    footer {
        background-color: var(--color-black-main);
        color: var(--color-white-main);
    }
    footer a {
        color: var(--color-white-main);
        transition: color 0.3s ease-in-out;
    }
    footer a:hover {
        color: var(--color-gold-main);
    }

    /* Gaya untuk Product Detail Modal */
    .product-detail-modal-content {
        max-width: 700px; /* Lebar yang lebih besar untuk detail produk */
    }
    .product-detail-slider-item img {
        height: 300px; /* Tinggi gambar di modal produk */
    }
    /* Gaya untuk teks tambahan di slider detail produk */
    .product-slider-text {
        position: absolute;
        bottom: 0; /* Atur posisi ke bagian bawah slide */
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Latar belakang gelap transparan */
        color: #FFFFFF; /* Warna teks putih */
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        line-height: 1.4;
        border-bottom-left-radius: 0.75rem; /* Ikuti border radius gambar */
        border-bottom-right-radius: 0.75rem; /* Ikuti border radius gambar */
    }