.nav-top.nav-top-custom {
    background-color: transparent;
    padding-right:0;
    padding-left:0;
    position: sticky;
    top:79px;
    display:none;
}
.nav-top.nav-top-custom > .nav-top-container {
    background-color: var(--primary-color, #cb4857);
}

.loop-wrap .entry-title {
    /* width: 100%; */
}
/*.loop-wrap article .entry-thumbnail {*/
/*    max-width: 200px;*/
/*    height: auto;*/
/*    float: left;*/
/*    margin-right: 1em;*/
/*}*/

.in-widget-view .widget-post-meta, 
.sidebar-entry .widget-post-meta,
.sidebar-entry .related-meta,
.sidebar-entry .recent-meta,
.sidebar-entry .popular-meta {
    font-style: normal;
}
.sidebar-entry .related-post-title,
.sidebar-entry .recent-post-title,
.sidebar-entry .popular-post-title,
.sidebar-entry a.related-post-title,
.sidebar-entry a.recent-post-title,
.sidebar-entry a.popular-post-title {
    font-weight: 400;
}
.related-post-items .related-post-content {
    align-content: flex-start;
}

.slider-wide-home-feature {
    margin-top: 1em;
    background: #ddd;
    padding: 15px 10px;
    /* max-width: 100%; */
}
.slider-wide-home-container:not(.owl-carousel) {
    overflow-x: hidden;
    white-space: nowrap;
}


.slider-wide-home-feature .slider-wide-home-container > .feature-item {
    display:inline-block;
    margin-left: -4px;

    /*     padding: 0 calc(5px / 2); */
}
.slider-wide-home-feature .slider-wide-home-container > .feature-item:first-child {
    margin-left:0;
}
/* .slider-wide-home-feature .slider-wide-home-container > .feature-item:first-child,
.slider-wide-home-feature .slider-wide-home-container .owl-stage > .owl-item:first-child {
    padding-left:0;
} */
.slider-wide-home-feature .owl-nav {
    display: block;
    text-align: left;
    margin-top: .5em;
    font-size: 1.2em;
}
.slider-wide-home-feature .owl-carousel .owl-nav button.owl-next,
.slider-wide-home-feature .owl-carousel .owl-nav button.owl-prev {
    text-align: center;
    display: inline-block;
    margin: 0 5px;
    border-radius: 3px;
    background: var(--primary-color);
    width: 30px;
    color: #fff;
}
.slider-wide-home-container > .feature-item {
    width: calc(100% / 4);
    position: relative;
}
.slider-wide-home-container .feature-item {
    display:block;
}
.slider-wide-home-container .feature-item a {
    position:relative;
    margin: 0 5px;
    display:flex;
    align-content: flex-start;
    align-items: center;
    padding:0;
    border-radius: 5px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    text-decoration:none;
    color: #000;
    letter-spacing: 1px;
    font-weight: 400;
}
.slider-wide-home-container .feature-item img {
    border-radius: 5px;
    aspect-ratio: 4/3;
    width: 300px;
}

.slider-wide-home-container .feature-item a::after {
    border-radius: 5px;
    position: absolute;
    top:0;
    left: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    content:'';
    display: block;
    background: rgba(0,0,0, .5);
    opacity: 1;
    transition: opacity ease .3s;
}
.slider-wide-home-container .feature-item a:hover::after {
    opacity: .7;
}
.slider-wide-home-feature {
    margin-bottom: 1em;
}
.slider-wide-home-container .feature-item .feature-title {
    position: absolute;
    display: block;
    padding: 1em;
    left:0;
    bottom:0;
    text-align: left;
    color: #fff;
    z-index: 1001;
    font-weight: bold;
    letter-spacing: inherit;
    white-space: normal;
}
.slider-wide-home-feature .owl-carousel .owl-stage-outer {
    /* margin-right: 1em; */
    /* margin-left: 1em; */
}

.content-wrap-area {
    display: flex;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    column-gap: 1em;
    margin: 1em 0 0;
    width: 100%;
    align-content: flex-start;
}
.site-content .content-wrap-area .widget-news-tray {
    margin-bottom: 0;
}
.content-wrap-left {
    /* flex: 1 1 auto; */
    width: calc(100% - 300px - 1em);
}
.content-wrap-left .slider-home-feature,
.content-wrap-left .archive-feature {
    margin-top: 0;
}
.content-wrap-right {
    position: sticky;
    flex: 1 1 300px;
    /* margin-top: 1em; */
    top: 1em;
    width: 300px;
}
.content-area .sidebar-entry h2.widget-title {
    border-bottom: 2px solid var(--primary-color, #cb4857);
    margin-bottom: 10px;
    /*     font-size: 1.4em; */
}
.content-wrap-area .content-wrap-right .sidebar-entry .widget-post-list:last-child {
    margin-bottom:0;
}
.content-wrap-area .sidebar-entry h2.widget-title {
    font-size: 1.3em;
}
.filter-section-home {
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    flex-direction: row-reverse;
    border-bottom: 2px solid var(--primary-color, #cb4857);
    margin-bottom: 1em;
    width: 100%;
}

.section-title {
    flex: 1 1 100%;
    display: block;
    width: 100%;
    font-size: 1.5em;
    padding: 10px 0;
}
.related-post-section > .related-post-title {
    font-size: 1.4em;
    font-weight: 300;
    border-bottom: 2px solid var(--primary-color, #cb4857);
    padding: .5em 0;
    margin-bottom: .8em;
}

@media only screen and (max-width: 779px) {
    .singular .feature-image {
        margin-left: -.75rem;
        margin-right: -.75rem;
    }
    body .nav-top.nav-top-custom {
        display: block;
        top: 53px;
    }
    .admin-bar body .nav-top.nav-top-custom {
        top: 99px;
    }
    .content-wrap-area {
        column-gap:0;
        flex-direction: column;
    }
}
@media only screen and (max-width: 600px) {
    body .nav-top.nav-top-custom {
        display: block;
        top: 53px;
    }
    
    .entry-content > .code-block > ins.adsbygoogle.parallax {
        position: relative;
        overflow: visible;
        width: calc(100% + 1.5em) !important;
    }

    .entry-content > .code-block > ins.adsbygoogle.parallax > ins {
        overflow: hidden;
        margin-top: 0!important;
        position: absolute!important;
        top: 0;
        left: 0;
        right:0;
        clip: rect(auto auto auto auto);
    }
    .entry-content > .code-block > ins.adsbygoogle.parallax > ins  > ins {
        position: fixed!important;
        top: 90px;
        margin: 0;
        transform: translateZ(0);
    }
}
@media only screen and (min-width: 780px) {
    body .loop-wrap article .article-wrapper .entry-thumbnail {
        width: 200px;
        height: 150px;
        max-width: 200px;
        aspect-ratio: 4/3;
        /*height: auto;*/
    }
    .loop-wrap article .entry-header, .loop-wrap article .entry-content {
        /* flex-direction: row; */
        /* width: calc(100% - 200px - 1em); */
        /* margin-left: calc(200px + 1em); */
    }

    .loop-wrap article .entry-content {
        display: none;
    }
}
@media only screen and (max-width: 779px) {
    .content-wrap-area {
        margin-top:0;
    }
    .content-wrap-left {
        margin-bottom: 1em;
    }
    body.home-mobile-no-sidebar #primary .sidebar-section {
        display: block;
    }
    .content-wrap-right,
    .content-wrap-left {
        width: 100%;
        flex-basis: 100%;
        position: relative;
        top:0;
    }
    .slider-wide-home-feature {
        margin-left: -.75rem;
        margin-right: -.75rem;
        background: #f1f1f1;
        width: calc(100% + 1.5rem);
    }

    .filter-section-home .section-title {
        display: flex;
        width: calc(100% - 80px);
        flex: 1 1 calc(100% - 80px);
    }
    .filter-section-home .loop-filter {
        display: flex;
        flex: 1 1 80px;
        width: 80px;
        margin-left:0;
        margin-right: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    .filter-section-home .loop-filter {
        margin: 0;
    }
}


/* ============================================================
   CK (25 Agustus 2026, rev 2): Tampilan logo — kunci TINGGI saja.
   Berkas logo bebas ukurannya (rasio asli, tanpa ruang kosong);
   lebar tampil mengikuti rasio berkas. Jangan kunci lebar.
   - Header: logo tinggi 45px di dalam area stabil 60px
     (geometri bar header tidak berubah).
   - Sidebar ponsel: tinggi 38px (bar 54px), lebar bebas.
   ============================================================ */
.header-logo a {
    display: flex;
    align-items: center;
    height: 60px;
}
.header-logo a img {
    width: auto;
    height: 45px;
    max-width: 100%;
}
.mobile-section-sidebar-top-area .mobile-section-logo img {
    width: auto;
    height: 38px;
    max-width: 100%;
}


/* ============================================================
   CK (25 Agustus 2026): Ikon kategori menu.
   Ikon diset per item menu (Tampilan > Menu, kolom Icon —
   meta news_tray_menu_item_icon). Menu "Mobile Navigation"
   (id 9053) dipakai BERSAMA oleh nav desktop dan sidebar
   ponsel, maka ikon hanya ditampilkan di sidebar ponsel.
   ============================================================ */
.navigation-container .menu-item-icon {
    display: none;
}
.mobile-navigation-container .menu-item-icon {
    display: inline-block;
    width: 1.6em;
    text-align: center;
    padding: 0 .35em 0 0;
}


/* ============================================================
   CK (25 Agustus 2026): Footer sidebar navigasi ponsel.
   Wrapper dijadikan kolom flex supaya footer menambat ke dasar
   layar saat menu pendek (margin-top:auto), dan mengalir normal
   saat menu panjang. Tautan 2 kolom, hak cipta di bawah.
   ============================================================ */
.mobile-navigation-wrapper {
    display: flex;
    flex-direction: column;
}
.mobile-navigation-wrapper .mobile-navigation-container {
    flex: 0 0 auto;
}
.mobile-sidebar-footer {
    margin-top: auto;
    padding: 1.25em var(--bs-gutter-x, .75rem) 1.5em;
    border-top: 1px solid var(--bs-gray-300, #dee2e6);
    background-color: var(--bs-gray-100, #f8f9fa);
}
.mobile-sidebar-footer .msf-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .1em 1.25em;
    margin-bottom: 1em;
}
.mobile-sidebar-footer .msf-links a {
    color: var(--bs-gray-600, #6c757d);
    font-size: .8125rem;
    line-height: 1.4;
    padding: .4em 0;
    text-decoration: none;
}
.mobile-sidebar-footer .msf-links a:hover,
.mobile-sidebar-footer .msf-links a:focus {
    color: var(--bs-gray-900, #212529);
}
.mobile-sidebar-footer .msf-copy {
    color: var(--bs-gray-500, #adb5bd);
    font-size: .75rem;
    text-align: center;
    border-top: 1px solid var(--bs-gray-200, #e9ecef);
    padding-top: 1em;
}


/* ============================================================
   CK (25 Agustus 2026): Tata letak kepala sidebar ponsel.
   Pembaca Indonesia mayoritas memegang HP dengan tangan kanan,
   maka kendali (tombol tutup) dipindah ke KANAN agar terjangkau
   ibu jari, dan logo ke KIRI sebagai penanda identitas.
   Markup tema tidak diubah; urutan dibalik dengan flex order.
   Ikon caret-left diganti glyph "close" (\e881) — panel ini
   overlay layar penuh, jadi tanda silang lebih tepat daripada
   panah kembali.
   ============================================================ */
.mobile-section-sidebar-top-area .mobile-section-logo {
    order: 1;
    justify-content: flex-start;
    text-align: left;
    float: none;
}
.mobile-section-sidebar-top-area .mobile-section-logo a {
    text-align: left;
}
.mobile-section-sidebar-top-area .mobile-section-toggle {
    order: 2;
    justify-content: center;
}
.mobile-section-sidebar-top-area .mobile-section-toggle .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-600, #6c757d);
    transition: background-color .2s ease, color .2s ease;
}
.mobile-section-sidebar-top-area .mobile-section-toggle .btn:hover,
.mobile-section-sidebar-top-area .mobile-section-toggle .btn:focus,
.mobile-section-sidebar-top-area .mobile-section-toggle .btn:active {
    background-color: var(--bs-gray-200, #e9ecef);
    color: var(--bs-gray-900, #212529);
    outline: none;
}
.mobile-section-sidebar-top-area .mobile-section-toggle .btn i {
    font-size: 1.125rem;
    line-height: 1;
    margin: 0;
    width: auto;
}
.mobile-section-sidebar-top-area .mobile-section-toggle .btn i.ic-caret-left:before {
    content: '\e881';
}


/* ============================================================
   CK (25 Agustus 2026): Header ponsel satu baris.
   Semula bertumpuk tiga baris (logo / pencarian+hamburger /
   bar kategori). Digabung menjadi: [logo | pencarian | hamburger]
   lalu bar kategori oranye — lebih ringkas dan elegan,
   menghemat ~76px ruang layar pertama.

   Caranya: #page dijadikan flex-wrap; .main-header dan .nav-header
   (dua saudara sekandung) dipaksa berbagi satu baris, sisanya
   tetap 100%. Markup tema induk TIDAK diubah.
   Keduanya dibuat sticky dengan top yang sama agar saat digulir
   logo ikut menempel bersama baris pencarian (kalau tidak,
   logo tertinggal dan menyisakan celah kosong).
   ============================================================ */
@media only screen and (max-width: 779px) {
    #page {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    #page > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #page > .main-header {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
        position: sticky;
        top: -1px;
        z-index: 1090;
        background-color: var(--bs-white, #fff);
    }
    #page > .nav-header {
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
    }
    .main-header .main-header-container {
        padding: 0 0 0 .875rem;
        height: 100%;
        align-items: center;
    }
    .main-header .header-logo {
        flex: 0 0 auto;
        width: auto;
    }
    .main-header .header-logo a {
        height: auto;
        width: auto;
    }
    .main-header .header-logo a img {
        height: 31px;
        width: auto;
    }
    .nav-header .nav-header-container {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        flex-wrap: nowrap;
        min-height: 54px;
        height: 100%;
        align-items: center;
        padding: 0 .5rem 0 .5rem;
        column-gap: .375rem;
    }
    .nav-header .search-bar {
        padding: 0;
        flex: 1 1 0;
        min-width: 0;
    }
    .nav-header .search-bar .form-control {
        height: 34px;
        font-size: .75rem;
        padding-left: .35em;
    }
    .nav-header .search-bar .input-group-text .btn {
        width: 30px;
    }
    .nav-header .menu-toggle {
        flex: 0 0 auto;
    }
    /* Tombol "kembali ke beranda" kini mubazir: logo di sebelahnya
       sudah menuju beranda, dan ruangnya dipakai kotak pencarian. */
    .nav-header .nav-header-container > .mobile-home-button {
        display: none;
    }
}
@media only screen and (max-width: 400px) {
    .main-header .header-logo a img {
        height: 28px;
    }
    .main-header .main-header-container {
        padding-left: .625rem;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Polesan header ponsel satu baris.
   1) Garis pembatas antara blok logo (.main-header) dan blok
      cari (.nav-header) berasal dari box-shadow bawaan
      .nav-header yang bocor ke kiri. Bayangan dipindah ke
      .nav-top (bar oranye) sehingga kedalaman tetap ada,
      persis di dasar kepala halaman.
   2) Ruang kiri kotak cari dilapangkan lewat padding container
      (CATATAN: margin pada #navigation-form-search dinetralkan
      sesuatu di halaman — bahkan inline !important kalah;
      jangan buang waktu lewat margin, pakai padding container).
   ============================================================ */
@media only screen and (max-width: 779px) {
    .nav-header {
        box-shadow: none;
    }
    .nav-top {
        box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    }
    .nav-header .nav-header-container {
        padding-left: 1.375rem;
        column-gap: .5rem;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Headline tunggal (pengganti carousel).
   Markup dari ck_cetak_headline_tunggal() di functions.php.
   Desktop: kartu berbingkai — gambar kiri (57%), kanan pil
   "Headline", judul besar, garis ganda, nama rubrik.
   Ponsel: kartu membulat — badge oranye menimpa gambar,
   judul di bawahnya (pola aplikasi berita).
   ============================================================ */
.ck-headline {
    background: var(--bs-white, #fff);
}
.ck-headline .ck-headline-media {
    display: block;
    position: relative;
    overflow: hidden;
}
.ck-headline .ck-headline-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ck-headline .ck-headline-badge {
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    letter-spacing: .01em;
}
.ck-headline .ck-headline-title {
    margin: 0;
}
.ck-headline .ck-headline-title a {
    color: var(--bs-gray-900, #212529);
    text-decoration: none;
}
.ck-headline .ck-headline-title a:hover {
    color: var(--primary-color, #fd7e14);
}

@media only screen and (min-width: 780px) {
    .ck-headline {
        display: flex;
        align-items: stretch;
        border: 1px solid var(--bs-gray-300, #dee2e6);
        margin-bottom: 1.25rem;
    }
    .ck-headline .ck-headline-media {
        flex: 0 0 57%;
        min-height: 392px;
    }
    .ck-headline .ck-headline-badge--media {
        display: none;
    }
    .ck-headline .ck-headline-body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.75rem 1.5rem 1.5rem;
    }
    .ck-headline .ck-headline-badge--body {
        border: 2px solid var(--bs-gray-900, #212529);
        padding: .3em 1.1em .35em;
        font-size: .9375rem;
        color: var(--bs-gray-900, #212529);
    }
    .ck-headline .ck-headline-title {
        margin-top: 1em;
        font-size: 1.75rem;
        line-height: 1.22;
        font-weight: 800;
        overflow-wrap: break-word;
    }
    .ck-headline .ck-headline-divider {
        margin-top: auto;
        width: 100%;
        height: 5px;
        border-top: 1px solid var(--bs-gray-500, #adb5bd);
        border-bottom: 1px solid var(--bs-gray-500, #adb5bd);
    }
    .ck-headline .ck-headline-cat {
        margin-top: 1.1em;
        font-weight: 700;
        font-size: 1.0625rem;
        color: var(--bs-gray-900, #212529);
        text-decoration: none;
    }
    .ck-headline .ck-headline-cat:hover {
        color: var(--primary-color, #fd7e14);
    }
}

@media only screen and (max-width: 779px) {
    .ck-headline {
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 10px rgba(0, 0, 0, .15);
        margin: .25rem 0 1.25rem; /* rata dengan judul Pilihan Editor */
    }
    .ck-headline .ck-headline-media img {
        height: auto;
    }
    .ck-headline .ck-headline-badge--media {
        position: absolute;
        bottom: 14px; /* kiri-bawah: kiri-atas menyaingi logo Cekricek di header */
        left: 14px;
        z-index: 2;
        background: var(--primary-color, #fd7e14);
        color: #fff;
        padding: .45em 1.2em .5em;
        font-size: .9375rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    }
    .ck-headline .ck-headline-badge--body,
    .ck-headline .ck-headline-divider,
    .ck-headline .ck-headline-cat {
        display: none;
    }
    .ck-headline .ck-headline-body {
        padding: .95rem 1rem 1.15rem;
    }
    .ck-headline .ck-headline-title {
        font-size: 1.3125rem;
        line-height: 1.35;
        font-weight: 700;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Header desktop — bar menu membulat +
   kotak cari pill "Cari" selalu tampak (sesuai mockup user).
   Menu utama dibungkus bar berbingkai membulat; kotak cari
   menjadi pill di ujung kanan bar (menggantikan ikon kaca
   pembesar yang menyembunyikan kolom cari). Scoped >=780px,
   header ponsel satu-baris tidak tersentuh.
   ============================================================ */
@media only screen and (min-width: 780px) {
    .nav-header {
        border-bottom: 0;
        box-shadow: none;
    }
    .nav-header .nav-header-container {
        border: 1px solid var(--bs-gray-400, #ced4da);
        border-radius: 18px;
        align-items: center;
        padding: .3rem .45rem .3rem 1.4rem;
        column-gap: 1rem;
    }
    .nav-header-container > .toggle-search-btn {
        display: none;
    }
    .nav-header .main-navigation-wrapper {
        flex: 1 1 auto;
    }
    .nav-header .search-bar {
        display: block;
        position: static;
        opacity: 1;
        visibility: visible;
        flex: 0 0 auto;
        width: 230px;
        padding: 0;
        border-top: 0;
        margin-left: auto;
    }
    .nav-header .search-bar .input-group {
        position: relative;
    }
    .nav-header .search-bar .form-control,
    .nav-header .search-bar input[type="search"].form-control {
        border: 1px solid var(--bs-gray-400, #ced4da);
        border-radius: 999px;
        text-align: center;
        padding: .3rem 2.1em .3rem 1em;
        font-size: .875em;
    }
    /* aturan input-group tema mematahkan sudut kanan pill -> timpa tegas */
    .nav-header .search-bar .input-group > .form-control,
    .nav-header .search-bar .input-group > input[type="search"].form-control {
        border-radius: 999px !important;
    }
    .nav-header .search-bar .input-group-text {
        position: absolute;
        right: .35em;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        padding: 0;
        z-index: 2;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Bar menu desktop dirampingkan +
   tipografi kategori Merriweather (permintaan user; bar
   sebelumnya terlalu tinggi karena li{min-height:3.9em} dan
   a{padding:1.2em} bawaan tema). Hover disesuaikan dengan mode
   bar membulat: pill lembut + warna primer, garis bawah
   animasi (::after) bawaan tema dimatikan karena tidak cocok
   dengan bar berbingkai membulat.
   ============================================================ */
@media only screen and (min-width: 780px) {
    .nav-header .nav-header-container {
        padding: .25rem .4rem .25rem .9rem;
    }
    .nav-header .main-navigation > ul > li {
        min-height: 0;
    }
    .nav-header .main-navigation > ul > li > a {
        padding: .42em .85em;
        font-family: "Merriweather", Georgia, "Times New Roman", serif;
        font-size: 1.125rem;
        font-weight: 700;
        border-radius: 999px;
        transition: background-color .15s ease, color .15s ease;
    }
    .nav-header .main-navigation > ul > li > a::after {
        display: none;
    }
    .nav-header .main-navigation > ul > li > a:hover,
    .nav-header .main-navigation > ul > li > a:focus {
        background-color: var(--bs-gray-100, #f8f9fa);
        color: var(--primary-color, #fd7e14);
    }
}


/* ============================================================
   CK (25 Agustus 2026): Bar menu desktop — model final pencarian.
   Pill "Cari" statis (blok sebelumnya) membuat bar terlalu tinggi.
   Model final: bar hanya berisi menu + IKON cari bundar; klik ikon
   -> panel melayang membulat muncul di bawah-kanan bar berisi
   kolom cari pill (mekanisme toggle bawaan tema dipakai kembali).
   Blok ini MENIMPA blok "pill statis" di atasnya (muat belakangan).
   CATATAN SPESIFISITAS: aturan tema
   body:not(.layout-mobile-device) .search-bar.shown {top:-1px}
   berspesifisitas (0,3,1) — penimpa .shown di sini harus
   body .nav-header .nav-header-container > .search-bar.shown.
   ============================================================ */
@media only screen and (min-width: 780px) {
    .nav-header .nav-header-container {
        padding: .2rem .5rem .2rem .9rem;
    }
    .nav-header .main-navigation > ul > li > a {
        padding: .32em .85em;
    }
    .nav-header-container > .toggle-search-btn {
        display: flex;
    }
    .nav-header-container > .toggle-search-btn .btn {
        font-size: 1.15em;
        width: 38px;
        height: 38px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--bs-gray-700, #495057);
        transition: background-color .15s ease, color .15s ease;
    }
    .nav-header-container > .toggle-search-btn .btn:hover,
    .nav-header-container > .toggle-search-btn .btn:focus {
        background-color: var(--bs-gray-100, #f8f9fa);
        color: var(--primary-color, #fd7e14);
    }
    .nav-header .search-bar {
        display: block;
        position: absolute;
        left: auto;
        right: 0;
        top: calc(100% + 8px);
        width: 300px;
        margin: 0;
        padding: .55rem;
        opacity: 0;
        visibility: hidden;
        background: var(--bs-white, #fff);
        border: 1px solid var(--bs-gray-300, #dee2e6);
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
        z-index: 1095;
        transition: opacity .15s ease;
    }
    body .nav-header .nav-header-container > .search-bar.shown {
        opacity: 1;
        visibility: visible;
        top: calc(100% + 8px);
        margin-top: 0;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Logo kecil di bar menu saat sticky
   (desktop). Elemen a.ck-nav-logo disuntik JS di wp_footer
   (functions.php); tampil hanya saat .nav-header.ck-stuck.
   order:99 = paling kiri (kontainer row-reverse).
   ============================================================ */
.ck-nav-logo {
    display: none;
}
@media only screen and (min-width: 780px) {
    .nav-header .ck-nav-logo {
        display: none; /* keluar dari flow: elemen w0 pun menyumbang gap+margin di kiri menu */
        align-items: center;
        order: 99;
        margin-right: .35rem;
        opacity: 0;
        width: 0;
        overflow: hidden;
        transition: opacity .2s ease;
    }
    .nav-header .ck-nav-logo img {
        height: 26px;
        width: auto;
        max-width: none;
    }
    .nav-header.ck-stuck .ck-nav-logo {
        display: flex;
        opacity: 1;
        width: auto;
        overflow: visible;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Tipografi judul situs-wide Merriweather.
   Semua heading (h1-h6) dan kelas judul tema — judul artikel di
   home/arsip (.entry-title), judul halaman, judul widget, judul
   item widget (tautan artikel di Pilihan Editor dll.), dan judul
   headline — memakai Merriweather serif, satu keluarga dengan
   isi artikel dan menu. + Bar menu desktop diperamping lagi
   (~40px): padding container & tautan menu dikecilkan, ikon cari
   34px.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .page-title,
.widget-post-content-link,
.related-post-title,
.recent-post-title,
.popular-post-title,
.ck-headline-title {
    font-family: "Merriweather", Georgia, "Times New Roman", serif;
}

@media only screen and (min-width: 780px) {
    .nav-header .nav-header-container {
        padding: .12rem .5rem .12rem .9rem;
    }
    .nav-header .main-navigation > ul > li > a {
        padding: .22em .85em;
    }
    .nav-header-container > .toggle-search-btn .btn {
        width: 34px;
        height: 34px;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Geser kategori ke tepi kiri bar +
   judul section/widget bold. "Berita" kini mulai ~20px dari
   tepi bar (permintaan user, penanda garis merah). Wrapper menu
   flex-basis 0 agar menyerap seluruh ruang sisa; padding item
   pertama dipulihkan (tema menolkannya) dengan margin negatif
   supaya teks rata kiri tetapi pill hover tetap utuh.
   ============================================================ */
@media only screen and (min-width: 780px) {
    .nav-header .main-navigation-wrapper {
        flex: 1 1 0;
        min-width: 0;
    }
    .nav-header .main-navigation > ul > li:first-child > a {
        padding: .22em .85em;
        margin-left: -.6em;
    }
}
.widget-title,
.section-title,
.bottom-section-title,
.related-post-section > .related-post-title {
    font-weight: 700;
}


/* ============================================================
   CK (25 Agustus 2026, rev 2): Zona akhir artikel — pilihan user:
   panel lembut (Opsi B) + ikon outline mono 32px (Opsi A), label
   Topik/Bagikan sans-serif. Struktur: akhir isi -> panel dua lajur
   (Topik+tag / Bagikan+ikon) -> Baca Juga.
   ============================================================ */
.singular .tags-list {
    margin: 1.8rem 0 0;
    padding: 1rem 1.15rem .95rem;
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
}
.singular .tags-list::before {
    content: 'Topik';
    display: block;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #adb5bd;
    margin-bottom: .6rem;
}
.singular .tag-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.singular .tags-list a {
    font-size: .76rem;
    line-height: 1;
    padding: .42em .85em;
    background: #fff !important;
    border: 1px solid #fdb374;
    color: #e8590c !important;
    border-radius: 6px;
    text-decoration: none;
}
.singular .tags-list a:hover,
.singular .tags-list a:focus {
    background: #fd7e14 !important;
    border-color: #fd7e14;
    color: #fff !important;
}
.ck-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 0 0 1.3rem;
    padding: .85rem 1.15rem 1rem;
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: inset 0 1px 0 #e9ecef;
}
.ck-share-title {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #adb5bd;
}
.ck-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}
.ck-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #ced4da;
    color: #6c757d;
    padding: 0;
    cursor: pointer;
}
.ck-share-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
}
.ck-share-btn:hover,
.ck-share-btn:focus {
    border-color: #fd7e14;
    color: #fd7e14;
    background: transparent;
}
.ck-share-copy .ck-ic-link,
.ck-share-copy .ck-ic-check { display: flex; }
.ck-share-copy .ck-ic-check { display: none; }
.ck-share-copy.tersalin { border-color: #16a34a; color: #16a34a; }
.ck-share-copy.tersalin .ck-ic-link { display: none; }
.ck-share-copy.tersalin .ck-ic-check { display: flex; }
.ck-share-feedback {
    font-size: .8125rem;
    color: var(--bs-gray-600, #6c757d);
}

/* ============================================================
   CK (25 Agustus 2026): Footer "Minimal & Clean" (Opsi 1 pilihan
   user). Markup isi footer tetap dari Customizer (Aneka Ragam >
   Footer Copyright — kelas ck-foot-*); ikon sosial tetap dirender
   tema dari URL Customizer. Trik urutan: .footer-copyright-copy
   diberi display:contents sehingga anak-anaknya menjadi flex item
   langsung .footer-container dan bisa di-order melewati blok
   sosial (logo -> nav -> garis -> SOSIAL -> copyright).
   Ikon kotak warna-warni (social-colors.css) ditimpa jadi
   lingkaran outline ghost; glyph burung twitter diganti logo X
   lewat CSS mask SVG (fontello tema tidak punya glyph X).
   ============================================================ */
#footer .footer-copyright {
    padding: 2.5rem 1rem 2.25rem;
}
.footer-copyright.footer-copyright-mode-center .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-copyright .footer-copyright-copy {
    display: contents;
}
.ck-foot-logo { order: 1; }
.ck-foot-nav { order: 2; }
.ck-foot-garis { order: 3; }
.footer-copyright .footer-social-content {
    order: 4;
    margin: 0 0 1.35rem;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    column-gap: .7rem;
}
.ck-foot-cp {
    order: 5;
    font-size: .78rem;
    color: var(--bs-gray-500, #adb5bd);
}
.ck-foot-logo img {
    height: 34px;
    width: auto;
}
.ck-foot-nav {
    max-width: 100%; /* item flex align-center diukur dari konten -> wajib dibatasi agar membungkus */
    margin: 1.35rem 0 .3rem;
    font-size: .875rem;
    line-height: 2.05;
    text-align: center;
}
.ck-foot-nav a {
    color: var(--bs-gray-700, #495057);
    text-decoration: none;
    margin: 0 .7em;
}
.ck-foot-nav a:hover {
    color: var(--primary-color, #fd7e14);
}
.ck-sep {
    color: var(--bs-gray-400, #ced4da);
}
.ck-foot-garis {
    width: 56px;
    height: 1px;
    background: var(--bs-gray-400, #ced4da);
    margin: 1.25rem auto 1.35rem;
}
#footer .footer-social-content a.social-icon-footer {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--bs-gray-400, #ced4da);
    color: var(--bs-gray-600, #6c757d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin: 0;
    transition: border-color .15s ease, color .15s ease;
}
#footer .footer-social-content a.social-icon-footer:hover,
#footer .footer-social-content a.social-icon-footer:focus {
    border-color: var(--primary-color, #fd7e14);
    color: var(--primary-color, #fd7e14);
    background: transparent;
}
#footer .footer-social-content a.social-icon-footer i,
#footer .footer-social-content a.social-icon-footer i::before {
    color: inherit;
}
/* burung twitter -> logo X (mask SVG, warna ikut currentColor) */
#footer .footer-social-content a.c-twitter i {
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#footer .footer-social-content a.c-twitter i::before {
    content: none;
}
@media only screen and (max-width: 779px) {
    .ck-foot-logo img { height: 28px; }
    .ck-foot-nav { font-size: .83rem; }
    #footer .footer-copyright { padding: 2rem 1rem 1.9rem; }
}


/* ============================================================
   CK (25 Agustus 2026): Kategori sidebar ponsel rata kiri
   (permintaan user; semula terpusat karena
   .mobile-navigation-container ber-margin auto dengan lebar
   fit-content).
   ============================================================ */
@media only screen and (max-width: 779px) {
    .mobile-navigation-wrapper .mobile-navigation-container {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .mobile-navigation-wrapper .mobile-navigation-menu {
        padding-left: 0; /* container sudah ber-gutter 12px; rata dengan tautan footer sidebar */
        padding-right: 0;
    }
}


/* CK (25 Agustus 2026): meta waktu + penulis di bawah judul headline */
.ck-headline .ck-headline-meta {
    font-size: .8125rem;
    color: var(--bs-gray-600, #6c757d);
    margin-top: .7em;
}
.ck-headline .ck-headline-meta .ck-headline-meta-pisah {
    color: var(--bs-gray-400, #ced4da);
    margin: 0 .15em;
}
.ck-headline .ck-headline-penulis {
    font-weight: 600;
}


/* ============================================================
   CK (25 Agustus 2026): Breadcrumb halaman artikel diberi bar
   berbingkai membulat seperti bar menu; margin-top disamakan
   dengan padding-top .sidebar-section.sidebar-single (8px)
   sehingga sejajar dengan judul "Pilihan Editor".
   ============================================================ */
.singular .breadcrumbs {
    margin-top: 15px;
    margin-bottom: 1.1rem;
    border: 1px solid var(--bs-gray-400, #ced4da);
    border-radius: 18px;
    padding: .3rem .95rem; /* lebih ramping */
    width: fit-content; /* panjang mengikuti isi */
    max-width: 100%;
}
.singular .content-article-wrapper .sidebar-section.sidebar-single {
    margin-top: 15px; /* disamakan dengan margin-top breadcrumb */
}


/* ============================================================
   CK (25 Agustus 2026): Jarak breadcrumb -> judul artikel = 15px
   (desktop). Kontributor jarak lama (52px): margin-bottom
   breadcrumb 17.6px + blok Ad Inserter KOSONG (code-block-1,
   tinggi 0 tapi margin 8+8 ber-!important) + padding-top
   .header-entry-wrap 26px. Penyelesaian: mb breadcrumb 0,
   padding-top header 15px, margin blok iklan kosong yang persis
   setelah breadcrumb dinetralkan (butuh !important untuk
   mengalahkan CSS Ad Inserter). Bila kelak slot iklan itu diisi,
   pertimbangkan mengembalikan marginnya.
   ============================================================ */
@media only screen and (min-width: 780px) {
    .singular .breadcrumbs {
        margin-bottom: 0;
    }
    .singular .header-entry-wrap {
        padding-top: 15px;
    }
    .singular .breadcrumbs + .code-block,
    .singular .breadcrumbs + [class*="code-block"] {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Bar kategori ponsel gaya chip (Opsi C
   pilihan user). Semula teks 13px/400 putih di oranye #ff9701
   (kontras lemah). Kini bar abu terang, tiap kategori jadi chip
   putih ber-border, lima item disebar rata selebar bar. Warna
   oranye lama menempel di .nav-top-container (bukan .nav-top).
   Scoped ponsel; desktop tidak tersentuh.
   ============================================================ */
@media (max-width: 779px) {
    .nav-top,
    .nav-top-custom,
    .nav-top-container,
    .top-navigation { background: #f8f9fa !important; }
    .nav-top { border-bottom: 1px solid #e9ecef; }
    .top-navigation-menu {
        height: 46px;
        align-items: center;
        justify-content: space-between;
    }
    .top-navigation-menu li { margin: 0; padding: 0; }
    .top-navigation-menu li a {
        display: inline-block;
        color: #343a40 !important;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        padding: .5em .8em;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 999px;
    }
    .top-navigation-menu li a:hover,
    .top-navigation-menu li a:active {
        background: #fd7e14;
        border-color: #fd7e14;
        color: #fff !important;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Pil "View All" di kanan judul blok
   kategori (pengganti tombol "Lihat Semua" yang dihapus user
   dari dasar blok). Anchor dicetak filter widget_title di
   functions.php, menempel di dalam h2 judul widget.
   ============================================================ */
.category-tag-post-widget-title { position: relative; }
.ck-view-all {
    position: absolute;
    right: 0;
    top: 42%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff !important;
    background: #212529;
    padding: .55em .95em;
    border-radius: 999px;
    text-decoration: none;
}
.ck-view-all svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.ck-view-all:hover,
.ck-view-all:focus { background: #fd7e14; color: #fff !important; }


/* ============================================================
   CK (25 Agustus 2026): Garis bawah GANDA pada judul blok, semua
   halaman (visual rujukan user, gaya "Terbaru"). Menimpa garis
   tunggal 1px bawaan tema pada .widget-title. Selector
   .related-post-section > .related-post-title hanya mengenai
   heading "Baca Juga" (anak langsung) — .related-post-title juga
   dipakai tema untuk <a> judul item di dalamnya, jangan diperluas.
   ============================================================ */
.widget-title,
.bottom-section-title,
.related-post-section > .related-post-title {
    border-bottom: 6px double #d0d0d0 !important;
    padding-bottom: .55rem !important;
}
/* "Terbaru": judul ada di dalam baris .filter-section-home (bersama
   tombol grid/list) yang sudah punya border 1px sendiri — garis ganda
   di .section-title membuat garis tampak dobel. Koreksi user: garis
   ganda dipasang di .filter-section-home, judulnya dibiarkan polos. */
.section-title { border-bottom: 0 !important; }
.filter-section-home {
    border-bottom: 6px double #d0d0d0 !important;
    padding-bottom: .55rem !important;
}


/* ============================================================
   CK (25 Agustus 2026): Desktop — baris judul "Terbaru" disejajar-
   kan dengan judul sidebar "Nuansa" (permintaan user). Kalibrasi
   terukur: glyph judul 573=573, dasar garis ganda 617=617. Judul
   Terbaru dinolkan margin/padding-nya (bawaan: pad 13px atas/3px
   bawah + mb 8px + mt -5px) supaya geometrinya identik dengan
   .widget-title sidebar; sisa selisih 6px ditutup margin-top
   kontainer. Ponsel tidak disentuh.
   ============================================================ */
@media (min-width: 780px) {
    .filter-section-home { margin-top: 6px !important; }
    .filter-section-home .section-title { margin: 0 !important; padding: 0 !important; }
}


/* ============================================================
   CK (25 Agustus 2026, rev 3): Bingkai konten desktop (mockup
   user). Koreksi lanjutan: (a) garis horizontal tadinya menembus
   pill bar menu — latar putih ternyata milik .nav-header (yang
   kini transparan), pill .nav-header-container sendiri transparan;
   pill kini diberi latar putih sehingga garis berhenti tepat di
   lengkung tepinya (garis di tengah tinggi pill = titik singgung
   lengkung). (b) Dibatasi ke layar >=1025px — tablet (>=780) tidak
   mendapat bingkai (permintaan user: cukup desktop).
   ============================================================ */
@media (min-width: 1025px) {
    .nav-header { background: transparent !important; }
    .nav-header .nav-header-container { background: #fff; }
    .site-content { position: relative; }
    .site-content::before {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 0;
        top: -20px;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 124px);
        max-width: 1440px;
        border: 1px solid #e0e0e0;
        border-bottom: 0;
    }
}


/* ============================================================
   CK (25 Agustus 2026): Indeks berita ala detik. (1) Tautan pil
   "Indeks Berita" di kanan judul blok Terbaru (beranda) — gaya
   sama dengan .ck-view-all; di ponsel disembunyikan karena posisi
   itu dipakai tombol toggle grid/list. (2) Gaya halaman /indeks/:
   bar filter abu, daftar artikel ber-thumbnail, navigasi halaman.
   ============================================================ */
.filter-section-home .section-title { position: relative; }
@media (max-width: 779px) {
    .ck-indeks-link { display: none; }
}
.ck-indeks-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .9rem 1.2rem;
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin: .5rem 0 1.4rem;
}
.ck-indeks-filter label { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.ck-indeks-filter label > span {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #adb5bd;
}
.ck-indeks-filter input[type="date"],
.ck-indeks-filter select {
    height: 40px;
    padding: 0 .75rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    font-size: .9rem;
    color: #343a40;
}
.ck-if-cari {
    height: 40px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 8px;
    background: #fd7e14;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}
.ck-if-cari:hover { background: #e8590c; }
.ck-indeks-list { display: flex; flex-direction: column; }
.ck-indeks-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #ececec;
}
.ck-indeks-thumb { flex: 0 0 110px; }
.ck-indeks-thumb img {
    width: 110px;
    height: 78px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.ck-indeks-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ck-indeks-kat {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fd7e14;
}
.ck-indeks-judul {
    font-family: "Merriweather", Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: #212529 !important;
    text-decoration: none;
}
.ck-indeks-judul:hover { color: #fd7e14 !important; }
.ck-indeks-waktu { font-size: .8rem; color: #868e96; }
.ck-indeks-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.4rem 0 .6rem;
}
.ck-indeks-nav a {
    font-size: .85rem;
    font-weight: 600;
    color: #fd7e14 !important;
    text-decoration: none;
    border: 1px solid #fd7e14;
    border-radius: 999px;
    padding: .5em 1.1em;
}
.ck-indeks-nav a:hover { background: #fd7e14; color: #fff !important; }
.ck-in-status { font-size: .82rem; color: #868e96; }
.ck-indeks-kosong { color: #868e96; }
@media (max-width: 480px) {
    .ck-indeks-thumb { flex-basis: 92px; }
    .ck-indeks-thumb img { width: 92px; height: 66px; }
    .ck-indeks-judul { font-size: .95rem; }
}


/* CK (25 Agustus 2026): jarak blok bawah beranda (Rona/Sains dkk.)
   dari seksi Terbaru — permintaan user: margin 20px. */
.home-bottom-wide { margin-top: 20px; }


/* ============================================================
   CK (25 Agustus 2026): Judul halaman statis (Tentang, Indeks,
   dst.) — keluhan user: terlalu rapat ke bar menu di atas dan
   terlalu jauh dari garis bawahnya (ponsel terparah). Scoped
   body.page agar halaman ARTIKEL (kalibrasi 15px breadcrumb->
   judul) tidak tersentuh. Semula: wrap pt 15 / judul mb 13.6 +
   wrap pb 16 (~30px ke garis).
   ============================================================ */
.page .header-entry-wrap {
    padding-top: 28px !important;
    padding-bottom: 10px !important;
}
.page .header-entry-wrap .entry-title { margin-bottom: 4px !important; }
@media (max-width: 779px) {
    .page .header-entry-wrap { padding-top: 20px !important; }
}


/* ============================================================
   CK (25 Agustus 2026): Header arsip KATEGORI & TAG disembunyikan
   dari pembaca TANPA dihapus dari HTML (permintaan user). Judul H1
   + deskripsi rubrik memakai pola screen-reader-only (tetap di DOM,
   tetap terbaca crawler & pembaca layar — bukan cloaking: HTML yang
   dikirim sama untuk semua). Breadcrumb visual display:none (data
   terstruktur breadcrumb JSON-LD plugin SEO tidak terpengaruh).
   Arsip lain (penulis, tanggal, pencarian) tidak disentuh.
   ============================================================ */
.category .archive-header .page-title,
.tag .archive-header .page-title,
.category .archive-description,
.tag .archive-description {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
.category .content-article > .breadcrumbs,
.tag .content-article > .breadcrumbs { display: none; }
.category .archive-header,
.tag .archive-header {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* ============================================================
   CK (25 Agustus 2026, rev 2): PONSEL — feature arsip kategori &
   tag = SALINAN PERSIS kartu headline beranda (.ck-headline).
   Nilai diukur dari beranda 390px: badge bg #ff9701 15px/700 pad
   7px 18px radius 999, 14px dari kiri & dasar gambar (tinggi badge
   29 -> margin-top -43); judul Merriweather 21px/700 lh 1.35,
   15px di bawah gambar (margin 29 = -43+29+... dikompensasi flow),
   inset samping 16px; meta 13px #6c757d margin-top 9px + PENULIS
   (span.entry-author sudah ada di markup, semula tersembunyi;
   separator "/" via ::before). Desktop tidak disentuh.
   ============================================================ */
@media (max-width: 779px) {
    .category .archive-feature .entry-header,
    .tag .archive-feature .entry-header {
        position: static !important;
        width: auto !important;
        padding: 0 16px !important;
        background: none !important;
    }
    .category .archive-feature .entry-thumbnail::before,
    .category .archive-feature .entry-thumbnail::after,
    .category .archive-feature .link-thumbnail::before,
    .category .archive-feature .link-thumbnail::after,
    .tag .archive-feature .entry-thumbnail::before,
    .tag .archive-feature .entry-thumbnail::after,
    .tag .archive-feature .link-thumbnail::before,
    .tag .archive-feature .link-thumbnail::after { display: none !important; }
    .category .archive-feature .entry-category,
    .tag .archive-feature .entry-category {
        position: relative;
        z-index: 2;
        width: max-content;
        margin: -43px 0 0 -2px !important;
    }
    .category .archive-feature .entry-category a,
    .tag .archive-feature .entry-category a {
        display: inline-block;
        background: #ff9701 !important;
        color: #fff !important;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        padding: 7px 18px;
        border-radius: 999px;
        text-transform: none;
    }
    .category .archive-feature .entry-title,
    .tag .archive-feature .entry-title {
        margin: 29px 0 0 !important;
        font-family: "Merriweather", Georgia, "Times New Roman", serif !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }
    .category .archive-feature .entry-title a,
    .tag .archive-feature .entry-title a { color: #212529 !important; text-shadow: none !important; }
    .category .archive-feature .entry-meta-data,
    .tag .archive-feature .entry-meta-data {
        display: block !important;
        margin-top: 9px;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: #6c757d;
    }
    .category .archive-feature .entry-meta-data a,
    .tag .archive-feature .entry-meta-data a { color: #6c757d !important; }
    .category .archive-feature .entry-meta-data .entry-author,
    .tag .archive-feature .entry-meta-data .entry-author { display: inline !important; }
    .category .archive-feature .entry-meta-data .entry-author::before,
    .tag .archive-feature .entry-meta-data .entry-author::before { content: '/ '; }
}


/* ============================================================
   CK (25 Agustus 2026): Desktop — puncak kolom kiri & judul
   sidebar diratakan 15px dari bar menu di kategori/tag/single
   (permintaan user). Kalibrasi terukur: feature arsip mt 16->15;
   judul sidebar arsip semula 6px (pt 8 + h2 mt -10) -> pt 17;
   sidebar single semula box mt 15 tapi GLYPH judul di 21 -> mt 9
   agar glyph judul = 15, sejajar puncak pil breadcrumb (15).
   ============================================================ */
@media (min-width: 780px) {
    .category .archive-feature,
    .tag .archive-feature { margin-top: 15px !important; }
    .category .sidebar-section.sidebar-archive,
    .tag .sidebar-section.sidebar-archive { padding-top: 17px !important; }
    .single .sidebar-section.sidebar-single { margin-top: 9px !important; }
}


/* ============================================================
   CK (25 Agustus 2026): Kotak Daftar Isi milik tema (.ck-toc) —
   details/summary native tanpa JS, gaya panel situs (abu lembut
   seperti panel Topik/Bagikan). Chevron berputar saat terbuka.
   scroll-margin-top pada H2 ber-anchor agar tak tertutup bar
   sticky; scroll halus.
   ============================================================ */
html { scroll-behavior: smooth; }
.ck-toc {
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: .85rem 1.15rem;
    margin: 1.6rem 0;
}
.ck-toc summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: #212529;
}
.ck-toc summary::-webkit-details-marker { display: none; }
.ck-toc summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #adb5bd;
    border-bottom: 2px solid #adb5bd;
    transform: rotate(45deg);
    transition: transform .2s;
    margin-top: -4px;
}
.ck-toc[open] summary::after { transform: rotate(225deg); margin-top: 2px; }
.ck-toc ol {
    margin: .8rem 0 .2rem 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ck-toc ol li { font-size: .9rem; }
.ck-toc ol a { color: #495057 !important; text-decoration: none; }
.ck-toc ol a:hover { color: #fd7e14 !important; text-decoration: underline; }
.entry-content h2[id] { scroll-margin-top: 70px; }