/* ==========================================================================
   Banten Prioritas - penyesuaian tampilan DelikWP
   ========================================================================== */

/* ---------- Navbar atas (frame) ---------- */
.frame .frame-widget {
    display: flex;
    align-items: center;
    height: 46px;
    max-width: 100%;
    box-sizing: border-box
}
.frame .frame-item.menu {
    float: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-right: 16px
}
.frame .menubar {
    float: none;
    flex: 0 0 auto;
    margin: 0 14px 0 12px   /* lingkaran latar keluar 7px dari ikon */
}
.frame .menubar-close,
.frame .menubar-title {
    margin: 0
}
.frame .frame-item.search {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 20px;
    box-sizing: border-box
}
.frame .frame-search {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: block
}
.frame-item.userbutton {
    float: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 46px;
    padding-left: 12px
}
.frame-item.userbutton .mode {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer
}
.frame-item.userbutton .mode:hover {
    background: rgba(0,0,0,.05)
}
.frame-item.userbutton ul {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0
}
.frame-item.userbutton a {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    height: 28px;
    border-width: 1.5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box
}
.darkmode .frame-item.userbutton .mode:hover {
    background: rgba(255,255,255,.08)
}

/* ---------- Brand header: logo + nama situs berdampingan ---------- */
.header .header-brand {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px
}
.header .header-brand .brand-link {
    display: block;
    flex: 0 0 auto
}
.header .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0
}
.header .brand-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em
}
.header .brand-title a {
    color: #0f1d4a;
    text-decoration: none
}
.header .brand-description {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #6b6b6b
}
.bp-desktop .header .header-brand img {
    height: 56px
}
.bp-mobile .header .header-brand {
    gap: 8px
}
.bp-mobile .header .header-brand img {
    max-height: 30px
}
.bp-mobile .header .brand-title {
    font-size: 18px;
    white-space: nowrap
}
.darkmode .header .brand-title a {
    color: #fff
}
.darkmode .header .brand-description {
    color: #a8a8a8
}

/* ---------- Navigasi utama ---------- */
.navigation .primary-menu li a,
.navigation .second-menu li a {
    white-space: nowrap
}

/* ---------- Footer ---------- */
footer.bp-footer {
    background: #fff;
    border-top: 1px solid #e5e5e5;
    margin-top: 48px;
    color: #4a4a4a
}
.bp-footer .footer-border {
    height: 3px
}
.bp-footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "brand social"
        "menu menu"
        "copy copy";
    align-items: center;
    column-gap: 32px;
    padding: 32px 0 0
}
.bp-footer .widget {
    margin: 0;
    text-align: left;
    font-size: 13px;
    color: inherit
}
.bp-footer-brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0
}
.bp-footer-brand .brand-link {
    display: block;
    flex: 0 0 auto
}
.bp-footer-brand img {
    display: block;
    height: 44px !important;
    width: auto;
    margin: 0
}
.bp-footer-text {
    padding-left: 16px;
    border-left: 1px solid #e5e5e5
}
.bp-footer-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    text-decoration: none
}
.bp-footer-desc {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b6b
}

/* Media sosial */
.bp-footer-inner > .widget:has(.social) {
    grid-area: social
}
.bp-footer .social-title {
    display: none
}
.bp-footer .social .social-box {
    justify-content: flex-end;
    gap: 8px
}

/* Menu footer */
.bp-footer-inner > .widget:has(.menu) {
    grid-area: menu;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #ededed
}
.bp-footer .widget .widget-header {
    display: none
}
.bp-footer .widget .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 24px;
    width: auto
}
.bp-footer .widget .menu li a {
    font-size: 13px;
    font-weight: 500;
    color: #4a4a4a;
    white-space: nowrap;
    padding: 0
}
.bp-footer .widget .menu li a:hover {
    color: var(--primary, var(--gradient1))
}

/* Copyright */
.bp-footer-inner > .widget:has(.textwidget) {
    grid-area: copy;
    margin-top: 20px;
    padding: 16px 0 20px;
    border-top: 1px solid #ededed;
    font-size: 12px;
    color: #8a8a8a
}
.bp-footer .textwidget p {
    margin: 0
}

/* Footer versi mobile: ditumpuk & rata tengah */
.bp-footer-mobile .bp-footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
        "brand"
        "social"
        "menu"
        "copy";
    text-align: center;
    padding-top: 24px
}
.bp-footer-mobile .bp-footer-brand {
    flex-direction: column;
    gap: 8px
}
.bp-footer-mobile .bp-footer-text {
    padding-left: 0;
    border-left: 0
}
.bp-footer-mobile .bp-footer-inner > .widget:has(.social) {
    margin-top: 16px
}
.bp-footer-mobile .social .social-box,
.bp-footer-mobile .widget .menu {
    justify-content: center
}
.bp-footer-mobile .widget .menu {
    gap: 8px 18px
}
.bp-footer-mobile .bp-footer-inner > .widget:has(.textwidget) {
    text-align: center
}

/* Footer mode gelap */
.darkmode footer.bp-footer {
    background: #161616;
    border-top-color: #2a2a2a;
    color: #c8c8c8
}
.darkmode .bp-footer-desc,
.darkmode .bp-footer .widget .menu li a {
    color: #c8c8c8
}
.darkmode .bp-footer-name {
    color: #fff
}
.darkmode .bp-footer-text,
.darkmode .bp-footer-inner > .widget:has(.menu),
.darkmode .bp-footer-inner > .widget:has(.textwidget) {
    border-color: #2a2a2a
}
.darkmode .bp-footer-inner > .widget:has(.textwidget) {
    color: #8a8a8a
}

/* ---------- Iklan samping (kiri/kanan) ---------- */
.sticky-ads-left,
.sticky-ads-right {
    will-change: transform
}

/* ---------- Bar admin WordPress: elemen fixed/sticky turun di bawahnya ---------- */
:root {
    --bp-adminbar: 0px;
    --bp-ad-gap: 16px      /* jarak navbar ke iklan paling atas */
}
body.admin-bar {
    --bp-adminbar: 32px
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --bp-adminbar: 46px
    }
}
@media screen and (max-width: 600px) {
    /* bawaan WP: bar admin ikut ter-scroll; dibuat tetap agar offset konsisten */
    body.admin-bar #wpadminbar {
        position: fixed
    }
}
/* desktop */
.bp-desktop .frame .frame-box {
    top: var(--bp-adminbar)
}
/* halaman artikel: navbar tidak fixed (ikut alur halaman yang sudah turun karena bar admin) */
.bp-desktop .frame.nofixed .frame-box {
    top: 0
}
.bp-desktop .frame-item.sidebarmenu {
    top: calc(46px + var(--bp-adminbar));
    height: calc(100% - 46px - var(--bp-adminbar))
}
.bp-desktop .nav.sticky {
    top: calc(46px + var(--bp-adminbar))
}
.bp-desktop .nav.sticky.sticky-top {
    top: var(--bp-adminbar)
}
.bp-desktop .menu-indeks-sticky,
.bp-desktop .sidebar-box .widget:last-child {
    top: calc(110px + var(--bp-adminbar))
}
.bp-desktop .article-detail .sticky-post,
.bp-desktop .sidebar-sticky {
    top: calc(46px + var(--bp-adminbar))
}
.bp-desktop .billboard.parallax .widget-parallax {
    top: calc(46px + var(--bp-ad-gap) + var(--bp-adminbar))
}
.bp-desktop .share-sticky {
    top: calc(44px + var(--bp-adminbar))
}
.bp-desktop .sticky-ads-left,
.bp-desktop .sticky-ads-right {
    /* sejajar dengan atas iklan parallax (banner di dalamnya punya margin-top 8px) */
    top: calc(46px + var(--bp-ad-gap) - 8px + var(--bp-adminbar))
}
.bp-desktop .sticky-ads-left.newtop,
.bp-desktop .sticky-ads-right.newtop {
    top: calc(115px + var(--bp-adminbar))
}
.bp-desktop .parallxads-box {
    top: calc(90px + var(--bp-adminbar))
}
/* mobile */
.bp-mobile header.header,
.bp-mobile header.header.fix,
.bp-mobile .popup-menu-transparent,
.bp-mobile .billboard.parallax .widget-parallax {
    top: var(--bp-adminbar)
}
.bp-mobile .popup-menu {
    top: calc(53px + var(--bp-adminbar))
}
.bp-mobile .article-detail .sticky-post,
.bp-mobile .sidebar-sticky {
    top: calc(46px + var(--bp-adminbar))
}
.bp-mobile .parallxads-box {
    top: calc(80px + var(--bp-adminbar))
}

/* Tombol kategori navbar lebih terbaca di mode gelap */
.darkmode .frame-item.userbutton a {
    color: #9db8ff;
    border-color: #4a66c9
}
.darkmode .frame-item.userbutton a:hover,
.darkmode .frame-item.userbutton ul li.active a {
    background: #4a66c9;
    color: #fff
}

/* Sub menu = Topik Pilihan (tag) */
.navigation .second-menu {
    align-items: center
}
.navigation .second-menu:before {
    content: "Topik Pilihan";
    flex: 0 0 auto;
    margin-right: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--primary, var(--gradient1));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}
.navigation .second-menu li a .menu-image-title:before {
    content: "#";
    margin-right: 3px;
    color: #9a9a9a;
    font-weight: 500
}

/* ---------- Sidebar menu (tombol Menu) ---------- */
.frame-item.sidebarmenu {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-sizing: border-box;
    padding-bottom: 24px
}
.sidebarmenu .widget {
    padding: 18px 24px
}
.sidebarmenu .widget .widget-header {
    margin: 0;
    padding-bottom: 10px
}
.sidebarmenu .widget .widget-header .widget-title {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a8a8a
}
.sidebarmenu .widget .menu.col2 {
    margin: 0 -6px
}
.sidebarmenu .widget .menu.col2 li {
    width: 50%;
    box-sizing: border-box;
    padding: 0 6px
}
.sidebarmenu .widget li a {
    padding: 7px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f1f1f;
    text-decoration: none
}
.sidebarmenu .widget li a:hover,
.sidebarmenu .widget li.current-menu-item a {
    color: var(--primary, var(--gradient1))
}
.sidebarmenu .widget .widget.social {
    padding: 0;
    border: 0
}
.sidebarmenu .social .social-title h3 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a8a8a
}
.sidebarmenu .social .social-box {
    justify-content: flex-start;
    gap: 8px
}
.darkmode .sidebarmenu .widget li a {
    color: #e6e6e6
}
.darkmode .sidebarmenu .widget li a:hover,
.darkmode .sidebarmenu .widget li.current-menu-item a {
    color: #9db8ff
}

/* Jendela desktop sempit: tombol kategori disembunyikan agar search tetap muat */
@media screen and (max-width: 1100px) {
    .bp-desktop .frame-item.userbutton ul {
        display: none
    }
}
@media screen and (max-width: 560px) {
    .bp-desktop .frame .menubar-title,
    .bp-desktop .frame .menubar-close {
        display: none
    }
}

/* ---------- Widget Iklan Gambar ---------- */
.bp-ad {
    display: block;
    margin: 0 auto;
    max-width: 100%
}
.bp-ad a {
    display: block
}
.bp-ad img {
    display: block;
    width: 100%;
    height: auto
}
.bp-ad.ads160600 {
    margin-top: 8px
}
.banner.ads300250 {
    width: 300px;
    max-width: 100%;
    height: 250px
}

/* Jarak antara navbar dan iklan parallax paling atas */
.bp-desktop .billboard.parallax {
    margin-top: var(--bp-ad-gap)
}

/* ---------- Ikon media sosial: satu gaya untuk footer, sidebar menu & tombol bagikan ---------- */
.social .social-box a,
.share-box ul li a,
.comment-share .share-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    background: #999;
    box-sizing: border-box;
    transition: transform .2s, opacity .2s
}
.social .social-box a:hover,
.share-box ul li a:hover,
.comment-share .share-box a:hover {
    color: #fff;
    opacity: .88;
    transform: translateY(-2px)
}
.social .social-box a svg,
.share-box ul li a svg,
.comment-share .share-box a svg {
    width: 16px;
    height: 16px
}
.social .social-box a.facebook,
.share-box ul li a.facebook,
.comment-share .share-box a.facebook {
    background: #3b5998
}
.social .social-box a.twitter,
.share-box ul li a.twitter,
.comment-share .share-box a.twitter,
.social .social-box a.tiktok {
    background: #000
}
.social .social-box a.whatsapp,
.share-box ul li a.whatsapp,
.comment-share .share-box a.whatsapp {
    background: #25d366
}
.social .social-box a.telegram,
.share-box ul li a.telegram,
.comment-share .share-box a.telegram {
    background: #0088cc
}
.social .social-box a.instagram {
    background: radial-gradient(ellipse at left bottom, #ffdc80 15%, #e1306c 55%, #5851db 100%)
}
.social .social-box a.youtube {
    background: #ff0000
}
/* X & TikTok (hitam) tetap terlihat di mode gelap */
.darkmode .social .social-box a.twitter,
.darkmode .social .social-box a.tiktok,
.darkmode .share-box ul li a.twitter,
.darkmode .comment-share .share-box a.twitter {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28)
}

/* ---------- Empty state: berita tidak ada ---------- */
.bp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;        /* tengah vertikal */
    text-align: center;             /* tengah horizontal */
    min-height: clamp(380px, 62vh, 620px);
    box-sizing: border-box;
    padding: 40px 24px;
    margin: 0 auto;
    max-width: 560px
}
.bp-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #eef2fb;
    color: var(--primary, var(--gradient1))
}
.bp-empty-icon svg {
    width: 42px;
    height: 42px
}
.bp-empty-label {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a8a
}
.bp-empty .bp-empty-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a
}
.bp-empty-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #6b6b6b
}
.bp-empty-desc strong {
    color: #1a1a1a
}
.bp-empty-search {
    display: flex;
    width: 100%;
    max-width: 420px;
    margin-top: 22px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    overflow: hidden;
    background: #fff
}
.bp-empty-search:focus-within {
    border-color: var(--primary, var(--gradient1))
}
.bp-empty-search input[type=search] {
    flex: 1;
    min-width: 0;
    padding: 11px 18px;
    border: 0;
    outline: 0;
    background: transparent;
    font: 500 14px Montserrat, sans-serif;
    color: #1a1a1a
}
.bp-empty-search button {
    padding: 0 22px;
    border: 0;
    background: var(--primary, var(--gradient1));
    color: #fff;
    font: 700 13px Montserrat, sans-serif;
    cursor: pointer
}
.bp-empty-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 13px
}
.bp-empty-topics span {
    color: #8a8a8a;
    font-weight: 500
}
.bp-empty-topics a {
    padding: 5px 12px;
    border-radius: 999px;
    background: #f2f3f5;
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none
}
.bp-empty-topics a:hover {
    background: var(--primary, var(--gradient1));
    color: #fff
}
.bp-empty-actions {
    margin-top: 24px
}
.bp-empty-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border: 1.5px solid var(--primary, var(--gradient1));
    border-radius: 999px;
    color: var(--primary, var(--gradient1));
    font-size: 13px;
    font-weight: 700;
    text-decoration: none
}
.bp-empty-btn:hover {
    background: var(--primary, var(--gradient1));
    color: #fff
}
.bp-mobile .bp-empty {
    min-height: clamp(340px, 60vh, 520px);
    padding: 32px 16px
}
.bp-mobile .bp-empty .bp-empty-title {
    font-size: 19px
}
.darkmode .bp-empty-icon {
    background: #1f2638;
    color: #9db8ff
}
.darkmode .bp-empty .bp-empty-title,
.darkmode .bp-empty-desc strong {
    color: #fff
}
.darkmode .bp-empty-desc,
.darkmode .bp-empty-label {
    color: #a8a8a8
}
.darkmode .bp-empty-search {
    background: #1e1e1e;
    border-color: #3a3a3a
}
.darkmode .bp-empty-search input[type=search] {
    color: #fff
}
.darkmode .bp-empty-topics a {
    background: #262626;
    color: #e6e6e6
}
.darkmode .bp-empty-btn {
    border-color: #4a66c9;
    color: #9db8ff
}
.darkmode .bp-empty-btn:hover {
    background: #4a66c9;
    color: #fff
}