.bg-primary-400 {
    background-color: var(--warna_3);
}

.rounded-\[9999px\], .rounded-full {
    border-radius: 9999px;
}

.w-1\/4 {
    width: 25%;
}

.h-1 {
    height: .25rem;
}

.bg-murky-9000 {
    --tw-bg-opacity: 1;
    background-color: #28282A;
}

.hover\:animate-bounce:hover {
    animation: bounce 1s;
}

.to-secondary {
    --tw-gradient-to: #3f3f3f;
}

.from-70\% {
    --tw-gradient-from-position: 70%;
}

.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-b {
    position: relative;
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-b::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(0px);
    z-index: 1;
}

.mt-12 {
    margin-top: 3rem;
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    color: white;
    font-size: 2rem;
}

.text-followus-foreground {
    color: #fffdfd;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.bg-followus-background {
    background-color: #737373;
}

.rounded-full {
    border-radius: 9999px;
}

.display-flex {
    display: flex;
}

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

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

.w-11 {
    width: 2.75rem;
}

.h-11 {
    height: 2.75rem;
}

.mb-mp {
    margin-bottom: 4rem;
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-section {
    transition: all 0.3s ease;
}

.footer-section:hover .section-header h3 {
    color: var(--warna_3);
}

.footer-link {
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: all 0.2s ease;
}

.footer-link:hover {
    color: var(--warna_3);
    transform: translateX(4px);
}

.section-header h3 {
    transition: color 0.2s ease;
}

/* Utility Classes */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

.bg-murky-9000 {
    background-color: #28282A;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.border-gray-800 {
    border-color: #1f2937;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

/* Hover Effects */
.hover\:text-primary-200:hover {
    color: var(--warna_3);
}

.font-arial {
    font-family: Arial, sans-serif;
}

/* Footer Base Styles */
.footer-wrapper {
    background-color: #28282A;
    color: #ffffff;
    font-family: Arial, sans-serif;
    padding: 3rem 0;
}

.footer-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header Section */
.footer-header {
    text-align: center;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.logo-container {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo-image {
    height: 4rem;
    width: auto;
    object-fit: contain;
}

.description {
    /* Gaya Dasar: Berlaku untuk semua ukuran layar */
    font-size: 0.95rem;
    line-height: 1.8;
    color: #d1d5db;
    margin: 0 auto; /* Pusatkan secara horizontal jika lebarnya kurang dari 100% */
    text-align: center; /* Pusatkan teks di dalam elemen */
    padding: 0 20px; /* Padding sisi kiri-kanan untuk semua layar */
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */

    /* Default lebar untuk mobile: Ambil 100% lebar yang tersedia */
    width: 100%;
    /* Di mobile, kita tidak ingin max-width membatasi terlalu dini */
    max-width: 100%;
}

/* Media Query untuk Layar Desktop (min-width 769px) */
@media (min-width: 769px) {
    .description {
        font-size: 1rem; /* Ukuran font lebih besar untuk desktop */
        line-height: 1.8;
        padding: 0 50px; /* Padding lebih besar di desktop */

        /* PENTING: Atur max-width yang lebih besar untuk desktop */
        /* Anda bisa pilih salah satu dari ini, atau coba nilai lain: */
        max-width: 900px; /* Lebar maksimum dalam piksel */
        /* max-width: 70rem; */ /* Lebar maksimum dalam rem (sekitar 1120px jika 1rem=16px) */
        /* max-width: 80%; */ /* 80% dari lebar parent-nya */

        /* Jika ingin teks rata kiri di desktop, bukan di tengah */
        /* text-align: left; */
    }
}

/* Media Query untuk Layar Desktop Sangat Lebar (Opsional, min-width 1200px) */
@media (min-width: 1200px) {
    .description {
        font-size: 1.05rem;
        line-height: 1.9;
        padding: 0 100px;
        /* Lebih lebarkan lagi untuk layar super besar */
        max-width: 1100px; /* Contoh: lebih lebar lagi */
        /* max-width: 80rem; */
        /* max-width: 75%; */
    }
}

.main-section {
    max-width: 1200px; /* Contoh: Beri batas yang lebih besar pada parent */
    margin: 0 auto; /* Pusatkan parent */
    padding: 0 20px; /* Padding untuk parent agar konten tidak menempel tepi */
    box-sizing: border-box;
}
/* Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }
}

/* Icon Spacing */
.fa-fw {
    width: 1.25em;
    text-align: center;
    display: inline-block;
    margin-right: 0.75rem;
}

@media (max-width: 639px) {
    .fa-fw {
        margin-right: 0.5rem;
    }
}

/* Mobile Adjustments */
@media (max-width: 639px) {
    .footer-grid {
        gap: 1.5rem;
        padding: 0 0.5rem;
    }

    .footer-section {
        padding: 0.5rem;
    }

    .section-title {
        font-size: 0.95rem;
    }

    .footer-link {
        font-size: 0.85rem;
    }

    .footer-link i,
    .section-title i,
    .address-title i,
    .address-text i {
        margin-right: 0.5rem;
        width: 16px;
        text-align: center;
    }

    .section-divider {
        margin-bottom: 1rem;
    }

    .footer-links {
        gap: 0.75rem;
    }
}

/* Section Styles */
.footer-section {
    transition: transform 0.3s ease;
}

.footer-section:hover {
    transform: translateY(-5px);
}

.section-header {
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-divider {
    height: 2px;
    width: 3rem;
    background-color: var(--warna_3);
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.section-divider.centered {
    margin: 1rem auto;
}

/* Links */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    color: #d1d5db;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    line-height: 1.5;
}

.footer-link:hover {
    color: var(--warna_3);
    transform: translateX(8px);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 3rem;
    text-align: center;
}

.address-section {
    margin-bottom: 2rem;
}

.address-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.address-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 0.95rem;
    gap: 0.5rem;
}

.copyright {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-top: 2rem;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

/* CSS Umum dan Reset untuk HTML dan Body */
        /* Pastikan html dan body mengisi seluruh tinggi viewport dan tanpa margin/padding default */
        .htmldmca, .bodydmca {
            margin: 0;
            padding: 0;
            height: 100%; /* Penting agar kontainer flexbox bisa mengisi tinggi penuh */
            overflow: hidden; /* Mencegah scrollbar yang tidak diinginkan */
            box-sizing: border-box;
        }

        /* Kelas khusus untuk body yang menampung DMCA badge dan informasi alamat */
        .bodydmca {
            display: flex; /* Aktifkan Flexbox pada body ini */
            justify-content: center; /* Pusatkan item secara horizontal */
            align-items: center; /* Pusatkan item secara vertikal */
            min-height: 100vh; /* Pastikan body mengisi seluruh tinggi viewport */
            flex-direction: column; /* PENTING: Susun item secara vertikal */
            background-color: #282c34; /* Contoh background gelap sesuai gambar Anda */
            color: #f0f0f0; /* Warna teks terang */
            font-family: Arial, sans-serif;
            text-align: center; /* Memusatkan semua teks di dalamnya */
        }

        /* Kontainer untuk DMCA badge itu sendiri */
        .dmca-badge-wrapper { /* Mengubah nama kelas agar lebih spesifik untuk badge */
            /* Pastikan kontainer badge transparan dan tanpa efek visual tambahan */
            background-color: transparent;
            box-shadow: none;
            border: none;
            text-align: center;
            margin-bottom: 15px; /* Jarak antara badge dan teks di bawahnya */
        }

        /* Styling untuk gambar DMCA agar responsif */
        .dmca-badge img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }