/* =========================================
   1. GENERAL STYLES & LAYOUT (DEFAULT LIGHT)
   ========================================= */
@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');
}

body { 
    font-family: 'Abel', sans-serif; 
    font-size: 16px; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f4f4f5; /* Abu-abu sangat terang agar kotak putih menonjol */
    color: #111111; 
    overflow-x: hidden; 
    position: relative !important;
}

.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; 
}

.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: 4px; /* Lengkungan halus */
    /* Hapus border jika sebelumnya ada */
    border: none !important; 
}

.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; /* Memastikan iframe di dalam tidak memiliki border bawaan */
    outline: none !important; /* Menghilangkan garis fokus jika diklik */
}

/* SCROLLBAR SLEEK */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* =========================================
   2. PAGINATION STYLING (DEFAULT)
   ========================================= */
.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: 4px; font-size: 0.875rem; font-weight: 600; border: 1px solid #e4e4e7; background-color: #ffffff; color: #52525b; text-decoration: none; transition: all 0.2s ease; }
.am-pagination a:hover { background-color: #111111; color: #ffffff; border-color: #111111; }
.am-pagination .current { background-color: #111111; color: #ffffff; border-color: #111111; }

/* =========================================
   3. STICKY BANNER & BACK TO TOP
   ========================================= */
#am-sticky-container { position: fixed; bottom: 10px; right: 10px; z-index: 99999; width: 300px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); background: #ffffff; border-radius: 8px 0px 8px 8px; padding: 4px; display: block; border: 1px solid #e4e4e7; }
.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: #71717a; border: 1px solid #e4e4e7; border-bottom: none; padding: 2px 10px; font-size: 11px; font-weight: bold; cursor: pointer; border-radius: 6px 6px 0 0; text-transform: uppercase; transition: all 0.2s ease; }
#am-close-btn:hover { background: #111111; color: #ffffff; border-color: #111111; }
@media (max-width: 340px) { #am-sticky-container { right: 5px; bottom: 5px; transform: scale(0.9); transform-origin: bottom right; } }

.back-to-top { position: fixed; right: 20px; bottom: 80px; width: 40px; height: 40px; border-radius: 50%; background: #111111; color: #ffffff; border: none; font-size: 20px; font-weight: bold; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); background: #3f3f46; }

/* =========================================
   4. ZOOM THUMBNAIL
   ========================================= */
a.aspect-\[16\/9\] img { transform: scale(1.04) !important; transform-origin: center center !important; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; }
a.aspect-\[16\/9\].group:hover img { transform: scale(1.1) !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 (CLEAN)
   ========================================= */
.am-partners-section { background-color: transparent !important; padding: 30px 20px; margin-top: 40px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; clear: both; border: none !important; box-shadow: none !important; margin-bottom: 5px !important; padding-bottom: 0px !important; }
.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 h2,
.am-partners-section .url-list-wrap h3 { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; font-weight: 700 !important; color: #111111 !important; margin-bottom: 16px !important; text-transform: uppercase; letter-spacing: 0.5px; }

.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: 10px !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; border: 1px solid #e4e4e7 !important; display: flex !important; align-items: center !important; padding: 10px 14px !important; height: 50px !important; width: 100% !important; box-sizing: border-box !important; text-decoration: none !important; color: #3f3f46 !important; font-size: 14px !important; font-weight: 600 !important; transition: all 0.2s ease !important;
}
.am-partners-section .url-list-wrap li a:hover,
.am-partners-section .url-list-wrap a:hover { background: #111111 !important; color: #ffffff !important; border-color: #111111 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }

.am-partners-section .url-list-wrap a span, .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; margin: 0 !important; padding: 0 !important; }
.am-partners-section .url-list-wrap img { display: none !important; }

/* =========================================
   7. FOOTER STYLING
   ========================================= */
.am-footer { background: #ffffff !important; border-top: 1px solid #e4e4e7 !important; margin: 30px auto 40px auto !important; padding: 24px 0 !important; }
.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: #71717a !important; font-weight: 500; }
.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: #52525b !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: color 0.2s; }
.am-footer-menu li a:hover { color: #111111 !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 (PURE CONTRAST)
   ========================================= */
html.dark-mode body { background-color: #09090b !important; color: #f4f4f5 !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 section,
html.dark-mode article { background-color: #18181b !important; color: #f4f4f5 !important; border-color: #27272a !important; }

html.dark-mode .am-footer { border-top: 1px solid #27272a !important; }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode p, html.dark-mode span, html.dark-mode a, html.dark-mode li { color: #f4f4f5 !important; }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background-color: #09090b !important; color: #ffffff !important; border: 1px solid #3f3f46 !important; }

/* Dark Mode - Partners */
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: #ffffff !important; }
html.dark-mode .am-partners-section .url-list-wrap li a,
html.dark-mode .am-partners-section .url-list-wrap a { background: #18181b !important; color: #a1a1aa !important; border: 1px solid #27272a !important; }
html.dark-mode .am-partners-section .url-list-wrap li a:hover,
html.dark-mode .am-partners-section .url-list-wrap a:hover { background: #ffffff !important; border-color: #ffffff !important; color: #09090b !important; }

/* Dark Mode - Pagination */
html.dark-mode .am-pagination a, 
html.dark-mode .am-pagination span { background-color: #18181b !important; color: #a1a1aa !important; border: 1px solid #27272a !important; }
html.dark-mode .am-pagination a:hover { background-color: #ffffff !important; color: #09090b !important; border-color: #ffffff !important; }
html.dark-mode .am-pagination .current { background-color: #ffffff !important; color: #09090b !important; border-color: #ffffff !important; }

html.dark-mode span.text-green-600, html.dark-mode .text-green-600 { color: #ffffff !important; }
html.dark-mode span.bg-green-50, html.dark-mode .bg-green-50 { background-color: #27272a !important; border-color: #3f3f46 !important; }
html.dark-mode span.text-green-700, html.dark-mode .text-green-700 { color: #ffffff !important; }
html.dark-mode .prose, html.dark-mode .prose p { color: #a1a1aa !important; }

/* =========================================
   9. DESKRIPSI AUTO BUKA-TUTUP
   ========================================= */
.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, #f4f4f5); 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, #09090b); }

/* =========================================
   10. RESPONSIF SHOWCASE (14 item mobile)
   ========================================= */
@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 (Gaya Shortcode Lama)
   ========================================= */
.ulsabell-wrap { margin-top: 0px !important; margin-bottom: 5px !important; width: 100%; }
.ulsabell-head { display: none !important; } /* Sembunyikan header bawaan plugin yg jelek */
.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 #e4e4e7 !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: 50px !important; width: 100% !important; box-sizing: border-box !important; text-decoration: none !important; color: #3f3f46 !important; font-size: 13px !important; font-weight: 600 !important; transition: all 0.2s ease !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ulsabell-link:hover { background: #111111 !important; border-color: #111111 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@media (min-width: 768px) { .ulsabell-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }

html.dark-mode .ulsabell-link { background: #18181b !important; border: 1px solid #27272a !important; color: #a1a1aa !important; }
html.dark-mode .ulsabell-link:hover { background: #ffffff !important; border-color: #ffffff !important; color: #09090b !important; }

/* =========================================
   12. TAGS AUTO-HIDE
   ========================================= */
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: #71717a; background: #f4f4f5; border-radius: 4px; padding: 4px 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: #a1a1aa; background: #27272a; }

/* =========================================
   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; font-weight: 800 !important; letter-spacing: -0.5px; }
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
   ========================================= */
.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: color 0.2s ease; font-weight: 700 !important; }
.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; color: #71717a !important; }

/* HOVER TAG MONOKROM ELEGAN */
.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,
.flex.flex-wrap.gap-2.mt-4.pt-4 a:hover { background-color: #111111 !important; color: #ffffff !important; border-color: #111111 !important; }

html.dark-mode .flex.flex-wrap.gap-2.mt-4.pt-4 a:hover,
html.dark-mode .flex-wrap.gap-2 a[href*="/tag/"]:hover, 
html.dark-mode a[rel="tag"]:hover, 
html.dark-mode .text-\[10px\]:hover { background-color: #ffffff !important; color: #09090b !important; border-color: #ffffff !important; }

/* =========================================
   15. BADGE HD STYLE (TANPA BORDER, FILL SOLID)
   ========================================= */
a.aspect-\[16\/9\] div.absolute.top-2.left-2 {
    background-color: #111111 !important; /* Hitam pekat */
    color: #ffffff !important; 
    border: none !important; /* Border dihilangkan agar tidak lebay */
    border-radius: 4px !important; /* Lengkungan halus */
    font-weight: 800 !important; 
    padding: 4px 8px !important; 
    font-size: 11px !important;
    letter-spacing: 0.5px !important; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; 
}
html.dark-mode a.aspect-\[16\/9\] div.absolute.top-2.left-2 {
    background-color: #ffffff !important;
    color: #111111 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* =========================================
   16. PAGINATION GAYA BADGE HD (SLEEK)
   ========================================= */
.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: 40px; height: 40px; border-radius: 6px !important; text-decoration: none !important; font-size: 15px; font-weight: 700 !important; font-family: 'Inter', sans-serif;
    background-color: #ffffff !important; color: #52525b !important; border: 1px solid #e4e4e7 !important; transition: all 0.2s ease !important;
}
.am-badge-pagination .page-nav.current,
.am-badge-pagination .page-nav:not(.current):hover { background-color: #111111 !important; color: #ffffff !important; border-color: #111111 !important; }
.am-badge-pagination .page-nav:not(.current):hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.am-badge-pagination .page-nav.current { pointer-events: none; }

/* DARK MODE Pagination Badge */
html.dark-mode .am-badge-pagination .page-nav { background-color: #18181b !important; color: #a1a1aa !important; border: 1px solid #27272a !important; }
html.dark-mode .am-badge-pagination .page-nav.current,
html.dark-mode .am-badge-pagination .page-nav:not(.current):hover { background-color: #ffffff !important; color: #09090b !important; border-color: #ffffff !important; }

/* =========================================
   17. KOTAK ICON MATA (THUMBNAIL)
   ========================================= */
.am-custom-eye-box {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Hitam transparan yang elegan */
    backdrop-filter: blur(4px) !important; 
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: 4px !important; 
    border: none !important; /* Dihilangkan agar tidak kaku */
    width: 40px !important; height: 30px !important; 
    transition: all 0.2s ease !important;
}
a.group:hover .am-custom-eye-box { background-color: rgba(255, 255, 255, 0.95) !important; }
.am-custom-eye-box svg { width: 18px !important; height: 18px !important; color: #ffffff !important; stroke-width: 2px !important; transition: color 0.2s ease !important; }
a.group:hover .am-custom-eye-box svg { color: #111111 !important; }

/* =========================================
   PERBESAR UKURAN LOGO HEADER
   ========================================= */
header .am-smart-logo div { height: auto !important; min-height: 75px !important; overflow: visible !important; display: flex; align-items: center; }
header img, .custom-logo, .site-logo img, .site-logo-img, img.logo-light-mode, img.logo-dark-mode {
    height: 70px !important; /* Ukuran pas agar tajam namun tidak pecah */
    width: auto !important; max-width: none !important; max-height: none !important;
}