/* =========================================
   0. ANIMASI PELANGI (RAINBOW EFFECT)
   ========================================= */
/* Keyframes untuk membuat gradasi warna bergerak/animasi */
@keyframes rainbowBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================
   1. GENERAL STYLES & LAYOUT (DEFAULT LIGHT)
   ========================================= */
/* Panggil Font Abel dari Server Google */
@font-face {
    font-family: 'Abel';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BPQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { 
    font-family: 'Abel', sans-serif; 
    font-size: 16px; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #d1d5db; 
    color: #333333; 
    overflow-x: hidden; 
    position: relative !important;
}

/* Membesarkan Judul Video di Grid */
.am-grid a.truncate,
#links-grid a.truncate,
.grid a.truncate,
.grid .p-3 a.font-bold {
    font-size: 15.5px !important; 
    letter-spacing: normal !important; 
}

/* Membesarkan Teks Kategori dan Views */
.grid .text-\[11px\] {
    font-size: 13px !important; 
    letter-spacing: normal !important;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    border-radius: 6px; 
}

.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    border: none !important; 
}

/* MEMUNCULKAN KEMBALI SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* =========================================
   2. PAGINATION STYLING (EFEK PELANGI)
   ========================================= */
.am-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 2rem 0; padding: 0 15px; }
.am-pagination a, .am-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; border: 1px solid #d1d5db; background-color: #ffffff; color: #4b5563; text-decoration: none; transition: 0.2s; }

/* Hover & Current State beranimasi Pelangi */
.am-pagination a:hover,
.am-pagination .current { 
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
    color: #ffffff !important; 
    border-color: transparent !important; 
    box-shadow: 0 4px 10px rgba(157, 80, 187, 0.4);
}

/* =========================================
   3. STICKY BANNER & BACK TO TOP
   ========================================= */
#am-sticky-container { position: fixed; bottom: 10px; right: 10px; z-index: 99999; width: 300px; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); background: #ffffff; border-radius: 8px 0px 8px 8px; padding: 4px; display: block; border: 1px solid #e5e7eb; }
.am-sticky-ad-box { width: 300px; height: 250px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#am-close-btn { position: absolute; top: -24px; right: -1px; background: #ffffff; color: #374151; border: 1px solid #e5e7eb; border-bottom: none; padding: 2px 10px; font-size: 11px; font-weight: bold; cursor: pointer; border-radius: 5px 5px 0 0; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s ease; }
#am-close-btn:hover { background: #ef4444; color: #ffffff; border-color: #ef4444; }
@media (max-width: 340px) { #am-sticky-container { right: 5px; bottom: 5px; transform: scale(0.9); transform-origin: bottom right; } }

/* Back to Top dengan Pelangi */
.back-to-top { position: fixed; right: 20px; bottom: 80px; width: 40px; height: 40px; border-radius: 50%; color: #fff; border: none; font-size: 20px; font-weight: bold; cursor: pointer; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 99; box-shadow: 0 4px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; 
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 15px rgba(157, 80, 187, 0.5); }

/* =========================================
   4. ZOOM THUMBNAIL
   ========================================= */
a.aspect-\[16\/9\] img { transform: scale(1.06) !important; transform-origin: center center !important; transition: transform 0.4s ease !important; }
a.aspect-\[16\/9\].group:hover img { transform: scale(1.12) !important; }

/* =========================================
   5. GRID KONSISTEN
   ========================================= */
.am-grid, #links-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
@media (min-width: 768px) { .am-grid, #links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* =========================================
   6. TRADE SHOWCASE / OUR PARTNERS
   ========================================= */
.am-partners-section { background-color: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 5px !important; padding-bottom: 0px !important; margin-top: 40px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; clear: both; }
.am-partners-section .url-list-wrap { max-width: 900px; margin: 0 auto; width: 100%; background-color: transparent !important; }
.am-partners-section .ulsabell-head { display: none !important; }

.am-partners-section .url-list-wrap .url-list-header, .am-partners-section .url-list-wrap .ul-header, .am-partners-section .url-list-wrap h2, .am-partners-section .url-list-wrap h3 { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; font-weight: 600 !important; color: #333333 !important; margin-bottom: 16px !important; text-transform: uppercase; }
.am-partners-section .url-list-wrap > ul, .am-partners-section .url-list-wrap > div { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; }
@media (min-width: 768px) { .am-partners-section .url-list-wrap > ul, .am-partners-section .url-list-wrap > div { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1024px) { .am-partners-section .url-list-wrap > ul, .am-partners-section .url-list-wrap > div { grid-template-columns: repeat(5, 1fr) !important; } }
.am-partners-section .url-list-wrap li { margin: 0 !important; padding: 0 !important; list-style: none !important; }

.am-partners-section .url-list-wrap li a,
.am-partners-section .url-list-wrap a { background: #ffffff !important; border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; border: 1px solid #f3f4f6 !important; display: flex !important; align-items: center !important; padding: 10px 14px !important; height: 56px !important; width: 100% !important; box-sizing: border-box !important; text-decoration: none !important; color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; transition: all 0.2s ease !important; }

/* Teks berubah jadi gradasi pelangi saat di hover */
.am-partners-section .url-list-wrap li a:hover,
.am-partners-section .url-list-wrap a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(157, 80, 187, 0.3) !important;
    border-color: #9d50bb !important; 
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbowBG 3s linear infinite !important;
}

.am-partners-section .url-list-wrap a span, .am-partners-section .url-list-wrap a div, .am-partners-section .url-list-wrap a p { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; flex: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
.am-partners-section .url-list-wrap img { display: block !important; flex-shrink: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 6px !important; object-fit: cover !important; margin: 0 12px 0 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }

/* =========================================
   7. FOOTER STYLING
   ========================================= */
.am-footer { background: #ffffff !important; border-top: 1px solid #d1d5db !important; border-radius: 0 0 6px 6px; margin: 30px auto 40px auto !important; padding: 20px 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.am-footer .footer-container { max-width: 900px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap; gap: 15px; }
.am-footer .footer-left { font-size: 13px !important; color: #4b5563 !important; }
.am-footer .footer-right { display: flex !important; align-items: center !important; gap: 20px !important; }
.am-footer-menu { display: flex !important; gap: 16px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.am-footer-menu li a { color: #4b5563 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.2s; }

/* Menu Footer Teks Pelangi */
.am-footer-menu li a:hover { 
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbowBG 3s linear infinite !important;
}

@media (max-width: 768px) { .am-footer .footer-container { flex-direction: column !important; text-align: center !important; } .am-footer .footer-right { flex-direction: column !important; gap: 12px !important; } }

/* =========================================
   8. DARK MODE
   ========================================= */
html.dark-mode body { background-color: #121212 !important; color: #f3f4f6 !important; }
html.dark-mode header, html.dark-mode footer, html.dark-mode .am-footer, html.dark-mode .bg-white, html.dark-mode .video-card, html.dark-mode div[class*="bg-"], html.dark-mode section, html.dark-mode article { background-color: #18181b !important; color: #f3f4f6 !important; border-color: #27272a !important; }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode p, html.dark-mode span, html.dark-mode a, html.dark-mode li { color: #f3f4f6 !important; }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background-color: #27272a !important; color: #ffffff !important; border-color: #3f3f46 !important; }
html.dark-mode .am-partners-section { background-color: transparent !important; }
html.dark-mode .am-partners-section .url-list-wrap .url-list-header, html.dark-mode .am-partners-section .url-list-wrap h2, html.dark-mode .am-partners-section .url-list-wrap h3 { color: #f3f4f6 !important; }
html.dark-mode .am-partners-section .url-list-wrap li a, html.dark-mode .am-partners-section .url-list-wrap a { background: #1e1e24 !important; color: #ffffff !important; border: 1px solid #2d2d35 !important; box-shadow: none !important; }

/* Dark mode Partners hover */
html.dark-mode .am-partners-section .url-list-wrap li a:hover,
html.dark-mode .am-partners-section .url-list-wrap a:hover {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbowBG 3s linear infinite !important;
    border-color: #9d50bb !important;
}

html.dark-mode .am-pagination a, html.dark-mode .am-pagination span { background-color: #1e1e24 !important; color: #f3f4f6 !important; border-color: #2d2d35 !important; }

/* Dark Mode Pagination Pelangi */
html.dark-mode .am-pagination a:hover,
html.dark-mode .am-pagination .current {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
    color: #ffffff !important; 
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(157, 80, 187, 0.4) !important;
}

html.dark-mode span.text-green-600, html.dark-mode .text-green-600, html.dark-mode span.text-green-700, html.dark-mode .text-green-700 { color: #9d50bb !important; }
html.dark-mode span.bg-green-50, html.dark-mode .bg-green-50 { background-color: #3b0764 !important; border-color: #6b21a8 !important; }
html.dark-mode .prose, html.dark-mode .prose p { color: #d1d5db !important; }

/* =========================================
   9. DESKRIPSI AUTO BUKA-TUTUP (MURNI CSS)
   ========================================= */
.prose { position: relative; max-height: 90px; overflow: hidden; transition: max-height 0.4s ease; cursor: pointer; padding-bottom: 10px; }
.prose:hover, .prose:active { max-height: 2000px; }
.prose::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 45px; background: linear-gradient(to bottom, transparent, #ffffff); pointer-events: none; transition: opacity 0.3s ease; }
.prose:hover::after, .prose:active::after { opacity: 0; }
html.dark-mode .prose::after { background: linear-gradient(to bottom, transparent, #18181b); }

/* =========================================
   10. RESPONSIF SHOWCASE
   ========================================= */
@media (max-width: 768px) { .url-list-wrap li:nth-child(n+15), .url-list-wrap a:nth-child(n+15), .url-list-wrap div:nth-child(n+15) { display: none !important; } }

/* =========================================
   11. CLEAN ICONLESS SHOWCASE STYLING
   ========================================= */
.ulsabell-wrap { margin: 0 auto 5px auto !important; width: 100%; }
.ulsabell-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ulsabell-icon, .ulsabell-icon-img, .ulsabell-fav { display: none !important; }
.ulsabell-title { margin: 0; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: inherit; }
.ulsabell-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.ulsabell-col { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.ulsabell-li { margin: 0 !important; padding: 0 !important; list-style: none !important; display: block !important; }
.ulsabell-link { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 10px 12px !important; height: 48px !important; width: 100% !important; box-sizing: border-box !important; text-decoration: none !important; color: #333333 !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Teks Ulsabell berubah pelangi saat hover */
.ulsabell-link:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(157, 80, 187, 0.3) !important; 
    border-color: #9d50bb !important;
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbowBG 3s linear infinite !important;
}

@media (min-width: 768px) { .ulsabell-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
html.dark-mode .ulsabell-link { background: #1e1e24 !important; border-color: #2d2d35 !important; color: #ffffff !important; box-shadow: none !important; }
html.dark-mode .ulsabell-link:hover {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbowBG 3s linear infinite !important;
    border-color: #9d50bb !important;
}

/* =========================================
   12. TAGS AUTO-HIDE (BATASI 3 TAG)
   ========================================= */
div:has(> a.text-\[10px\]) { cursor: pointer; position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
div:has(> a.text-\[10px\]) > a.text-\[10px\]:nth-child(n+4) { display: none !important; }
div:has(> a.text-\[10px\]):::after, div:has(> a.text-\[10px\]):after { content: "+ Tag Lainnya"; font-size: 10px; font-weight: 600; color: #6b7280; border: 1px dashed #d1d5db; border-radius: 4px; padding: 2px 8px; display: inline-flex; align-items: center; }
div:has(> a.text-\[10px\]):hover > a.text-\[10px\]:nth-child(n+4) { display: inline-flex !important; }
div:has(> a.text-\[10px\]):hover::after { display: none !important; }
html.dark-mode div:has(> a.text-\[10px\]):after { color: #9ca3af; border-color: #374151; }

/* =========================================
   13. JUDUL UTAMA 1 BARIS + AUTO-HIDE
   ========================================= */
h1.text-xl, .single-video-title, .post-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; cursor: pointer !important; }
h1.text-xl:hover, .single-video-title:hover, .post-title:hover { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* =========================================
   14. JUDUL THUMBNAIL / GRID VIDEO: 1 BARIS
   ========================================= */
.am-grid a.truncate, #links-grid a.truncate, .grid a.truncate, .grid .p-3 a.font-bold { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; width: 100% !important; transition: all 0.2s ease; }

/* Judul Video Hover Teks Gradasi Pelangi */
.am-grid a.truncate:hover,
#links-grid a.truncate:hover,
.grid a.truncate:hover,
.grid .p-3 a.font-bold:hover {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rainbowBG 3s linear infinite !important;
}

/* =========================================
   HOVER TAG MENJADI BACKGROUND PELANGI
   ========================================= */
.flex-wrap.gap-2 a[href*="/tag/"]:hover, 
.flex-wrap.gap-2 a[href*="/studio/"]:hover, 
a[rel="tag"]:hover, 
.text-\[10px\]:hover, 
a.text-\[10px\]:hover,
a[class*="hover:bg-green-"]:hover {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(157, 80, 187, 0.4);
}

/* =========================================
   15. BADGE HD STYLE CUSTOM (FULL NEON RAINBOW)
   ========================================= */
html.dark-mode a.aspect-\[16\/9\] div.absolute.top-2.left-2,
a.aspect-\[16\/9\] div.absolute.top-2.left-2 {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
    color: #ffffff !important; 
    border: none !important; 
    border-radius: 6px !important; 
    font-weight: 900 !important; 
    padding: 4px 8px !important; 
    letter-spacing: 0.5px !important; 
    line-height: 1.2 !important; 
    box-shadow: 0 2px 10px rgba(157, 80, 187, 0.4) !important;
}

/* =========================================
   16. PAGINATION GAYA BADGE HD (RAINBOW)
   ========================================= */
.am-badge-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 30px 0; width: 100%; }
.am-badge-pagination .page-nav { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; border-radius: 6px !important; text-decoration: none !important; font-size: 16px; font-weight: 900 !important; font-family: 'Inter', sans-serif; background-color: #2a2a2a !important; color: #888888 !important; border: 2px solid #444444 !important; transition: all 0.2s ease !important; }

/* TAMPILAN HALAMAN AKTIF & SAAT DISENTUH MENJADI PELANGI */
html.dark-mode .am-badge-pagination .page-nav.current,
.am-badge-pagination .page-nav.current,
.am-badge-pagination .page-nav:not(.current):hover {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(157, 80, 187, 0.4);
}
.am-badge-pagination .page-nav:not(.current):hover { transform: translateY(-3px); }
.am-badge-pagination .page-nav.current { pointer-events: none; }

/* =========================================
   17. KOTAK ICON MATA (THUMBNAIL)
   ========================================= */
.am-custom-eye-box { background-color: rgba(107, 114, 128, 0.6) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border-radius: 8px !important; width: 44px !important; height: 32px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
a.group:hover .am-custom-eye-box { background-color: rgba(55, 65, 81, 0.85) !important; }
.am-custom-eye-box svg { width: 20px !important; height: 20px !important; color: #ffffff !important; stroke-width: 2.5px !important; }

/* =========================================
   STYLING OTOMATIS IKON DI DALAM DROPDOWN 
   ========================================= */
#site-navigation .sub-menu li a .dropdown-icon { display: flex; align-items: center; justify-content: center; }
#site-navigation .sub-menu li a .dropdown-icon svg {
    background: linear-gradient(90deg, #00c6ff, #0072ff, #9d50bb, #f12711, #f5af19, #00c6ff) !important;
    background-size: 200% auto !important;
    animation: rainbowBG 3s linear infinite !important;
    color: #ffffff !important;
    width: 38px !important;
    height: 38px !important;
    padding: 8px;
    border-radius: 8px; 
    display: block;
}

/* =========================================
   PERBESAR UKURAN LOGO HEADER
   ========================================= */
header .am-smart-logo div { height: auto !important; min-height: 60px !important; overflow: visible !important; }
header img, .custom-logo, .site-logo img, .site-logo-img, img.logo-light-mode, img.logo-dark-mode { height: 35px !important; width: auto !important; max-width: none !important; max-height: none !important; }

/* Paksa warna hover tag blok bawah menjadi Hitam/Putih default */
.flex.flex-wrap.gap-2.mt-4.pt-4 a:hover { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }
html.dark-mode .flex.flex-wrap.gap-2.mt-4.pt-4 a:hover { background-color: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; }