/* Modern Social Media Icon Styling */
.social-media {
    display: flex;
    gap: 8px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-media li {
    list-style: none !important;
    display: inline-block !important;
    margin: 0 !important;
}

.social-media li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.social-media li a img {
    height: 16px !important;
    width: 16px !important;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1) !important; /* Keep it clean white by default */
}

/* Hover Interactions */
.social-media li a:hover {
    transform: translateY(-3px) scale(1.08);
}

.social-media li a:hover img {
    transform: rotate(8deg);
}

/* Brand Colors on Hover (using progressive CSS :has() with case-insensitive search) */
.social-media li a:has(img[alt="facebook" i]):hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4) !important;
}

.social-media li a:has(img[alt="instagram" i]):hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 15px rgba(220, 39, 67, 0.4) !important;
}

.social-media li a:has(img[alt="twitter" i]):hover {
    background: #1DA1F2 !important;
    border-color: #1DA1F2 !important;
    box-shadow: 0 6px 15px rgba(29, 161, 242, 0.4) !important;
}

.social-media li a:has(img[alt="youtube" i]):hover {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    box-shadow: 0 6px 15px rgba(255, 0, 0, 0.4) !important;
}

.social-media li a:has(img[alt="linkedin" i]):hover {
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
    box-shadow: 0 6px 15px rgba(10, 102, 194, 0.4) !important;
}

.social-media li a:has(img[alt="tokopedia" i]):hover {
    background: #42B549 !important;
    border-color: #42B549 !important;
    box-shadow: 0 6px 15px rgba(66, 181, 73, 0.4) !important;
}

.social-media li a:has(img[alt="shopee" i]):hover {
    background: #EE4D2D !important;
    border-color: #EE4D2D !important;
    box-shadow: 0 6px 15px rgba(238, 77, 45, 0.4) !important;
}

.social-media li a:has(img[alt="pinterest" i]):hover {
    background: #BD081C !important;
    border-color: #BD081C !important;
    box-shadow: 0 6px 15px rgba(189, 8, 28, 0.4) !important;
}

.social-media li a:has(img[alt="olx" i]):hover {
    background: #23E5DB !important;
    border-color: #23E5DB !important;
    box-shadow: 0 6px 15px rgba(35, 229, 219, 0.4) !important;
}

.social-media li a:has(img[alt="bukalapak" i]):hover {
    background: #E6004C !important;
    border-color: #E6004C !important;
    box-shadow: 0 6px 15px rgba(230, 0, 76, 0.4) !important;
}


/* Footer Social Media Styling */
.social-media-bawah {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0;
}

.social-media-bawah li {
    display: inline-block !important;
    margin: 0 !important;
}

.social-media-bawah li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.social-media-bawah li a img {
    height: 18px !important;
    width: 18px !important;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0) invert(0.8) !important;
}

/* Footer Hover Interactions */
.social-media-bawah li a:hover {
    transform: translateY(-3px) scale(1.08);
}

.social-media-bawah li a:hover img {
    filter: brightness(0) invert(1) !important;
    transform: rotate(8deg);
}

/* Brand Colors on Hover for Footer */
.social-media-bawah li a:has(img[alt="facebook" i]):hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="instagram" i]):hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 15px rgba(220, 39, 67, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="twitter" i]):hover {
    background: #1DA1F2 !important;
    border-color: #1DA1F2 !important;
    box-shadow: 0 6px 15px rgba(29, 161, 242, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="youtube" i]):hover {
    background: #FF0000 !important;
    border-color: #FF0000 !important;
    box-shadow: 0 6px 15px rgba(255, 0, 0, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="linkedin" i]):hover {
    background: #0A66C2 !important;
    border-color: #0A66C2 !important;
    box-shadow: 0 6px 15px rgba(10, 102, 194, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="tokopedia" i]):hover {
    background: #42B549 !important;
    border-color: #42B549 !important;
    box-shadow: 0 6px 15px rgba(66, 181, 73, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="shopee" i]):hover {
    background: #EE4D2D !important;
    border-color: #EE4D2D !important;
    box-shadow: 0 6px 15px rgba(238, 77, 45, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="pinterest" i]):hover {
    background: #BD081C !important;
    border-color: #BD081C !important;
    box-shadow: 0 6px 15px rgba(189, 8, 28, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="olx" i]):hover {
    background: #23E5DB !important;
    border-color: #23E5DB !important;
    box-shadow: 0 6px 15px rgba(35, 229, 219, 0.4) !important;
}

.social-media-bawah li a:has(img[alt="bukalapak" i]):hover {
    background: #E6004C !important;
    border-color: #E6004C !important;
    box-shadow: 0 6px 15px rgba(230, 0, 76, 0.4) !important;
}


/* Responsiveness */
@media (max-width: 740px) {
    .social-media {
        display: flex;
        justify-content: center;
        align-content: center;
        margin-top: 15px;
    }
}

@media (min-width: 741px) {
    .tempat-social-media {
        justify-content: flex-end;
        align-content: center;
        display: flex;
    }
}