/* judul Terpopuler: tanpa garis abu-abu, hanya garis kuning */
#page .sk-cnn .sk-cnn__pop-title { border-bottom: 0 !important; }

@media (max-width: 600px) {
  #page .sk-cnn .sk-cnn__mini { grid-template-columns: 1fr; row-gap: 14px; }
  #page .sk-cnn .sk-cnn__mini.has-2 { background: none; }
}
/* ---------- SLIDER ---------- */
#page .sk-cnn__main { min-width: 0; }
#page .sk-cnn__slider {
  border: 1px solid var(--garis);
  background: var(--hero-bg);
}
#page .sk-cnn__track {
  display: flex;                     /* semua slide otomatis sama tinggi dengan slide yang teksnya paling panjang */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#page .sk-cnn__track::-webkit-scrollbar { display: none; }
#page .sk-cnn__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--kolom-teks) 1fr;
  scroll-snap-align: start;
  background: var(--hero-bg);
}

/* panel teks: judul, ringkasan, lalu penulis + tanggal di dasar panel */
#page .sk-cnn__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
}
#page .sk-cnn__tag {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 8px;
  background: var(--c-kuning);
  color: var(--c-hitam);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .4px;
  text-transform: uppercase;
}
#page .sk-cnn__title {
  margin-bottom: 10px !important;
  font-size: var(--judul-ukuran);
  font-weight: var(--judul-berat);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--judul-baris);
  overflow: hidden;
}
#page .sk-cnn__title a { color: var(--hero-teks) !important; }
#page .sk-cnn__title a:hover { color: var(--c-hover) !important; }
#page .sk-cnn__excerpt {
  margin-bottom: 14px !important;
  color: var(--hero-ringkasan);
  font-size: var(--ringkasan-ukuran);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ringkasan-baris);
  overflow: hidden;
}
#page .sk-cnn__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: auto;                  /* menempel di dasar panel */
  padding-top: 10px;
  border-top: 1px solid var(--garis);
  color: var(--hero-ringkasan);
  font-size: var(--meta-ukuran);
  line-height: 1.4;
}
#page .sk-cnn__by b { color: var(--hero-teks); font-weight: 700; }

/* foto: bentuk minimalnya dikunci --foto-rasio, kalau teks lebih tinggi foto ikut memanjang */
#page .sk-cnn__img {
  position: relative;
  display: block;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  background: #dddddd;
}
#page .sk-cnn__img::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: var(--foto-rasio);
}
#page .sk-cnn__img img,
#page .sk-cnn__noimg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 30%;
}

/* =====================================================
   [40] HEADER + MENU MOBILE ALA KOMPAS (layar < 960px)
   ===================================================== */
.sk-mbar,
.sk-mspacer { display: none; }

@media (max-width: 959px) {
  .sk-mbar,
  .sk-mspacer {
    /* --- UKURAN --- */
    --m-head: 56px;                  /* UBAH: tinggi header hitam */
    --m-menu: 46px;                  /* UBAH: tinggi bar menu */
    --m-padding-x: 20px;             /* UBAH: jarak logo dan ikon ke tepi layar (samakan dengan jarak konten, yaitu 20px) */
    --m-z: 99990;                    /* UBAH: urutan tumpukan (naikkan kalau tertutup elemen lain) */

    /* --- HEADER --- */
    --m-head-bg: #000000;            /* UBAH: warna latar header */
    --m-logo-tinggi: 28px;           /* UBAH: tinggi logo */
    --m-ikon: #ffffff;               /* UBAH: warna ikon search dan hamburger */
    --m-ikon-ukuran: 20px;           /* UBAH: ukuran ikon */

    /* --- BAR MENU --- */
    --m-menu-bg: #1c1c1c;            /* UBAH: warna latar bar menu */
    --m-menu-teks: #ffffff;          /* UBAH: warna tulisan menu */
    --m-menu-ukuran: 14px;           /* UBAH: ukuran huruf menu */
    --m-menu-berat: 700;             /* UBAH: ketebalan menu */
    --m-menu-huruf: uppercase;       /* UBAH: uppercase atau none */
    --m-menu-jarak: 14px;            /* UBAH: jarak kiri-kanan tiap item */
    --m-garis: #febc0f;              /* UBAH: warna garis di bawah menu aktif */
    --m-garis-tebal: 3px;            /* UBAH: tebal garis menu aktif */

    /* --- PANEL HAMBURGER DAN SEARCH --- */
    --m-panel-bg: #111111;           /* UBAH: warna latar panel */
    --m-panel-teks: #ffffff;         /* UBAH: warna tulisan panel */
    --m-panel-garis: #2b2b2b;        /* UBAH: warna garis pemisah panel */
    --m-search-bg: #1c1c1c;          /* UBAH: warna dalam kolom search */
    --m-search-border: #3a3a3a;      /* UBAH: warna garis kolom search */
    --m-search-teks: #ffffff;        /* UBAH: warna tulisan yang diketik */
    --m-search-placeholder: #9a9a9a; /* UBAH: warna "Masukkan kata kunci..." */
    --m-search-radius: 999px;        /* UBAH: kebulatan kolom search */
  }

  /* ganti header bawaan tema dan bar menu lama dengan yang baru */
  #page .penci-header-mobile,
  .mobile-scroll-menu { display: none !important; }

  .sk-mspacer { display: block; height: calc(var(--m-head) + var(--m-menu)); }
  .sk-mbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--m-z);
    background: var(--m-head-bg);
  }
  .sk-mbar *,
  .sk-mbar *::before,
  .sk-mbar *::after { box-sizing: border-box; }

  /* kalau lo sedang login (toolbar WordPress tampil) */
  body.admin-bar .sk-mbar { top: 46px; }
}
@media (min-width: 783px) and (max-width: 959px) {
  body.admin-bar .sk-mbar { top: 32px; }
}

@media (max-width: 959px) {
  /* header: logo kiri, ikon kanan */
  .sk-mbar .sk-mhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--m-head);
    padding: 0 var(--m-padding-x);
    background: var(--m-head-bg);
  }
  .sk-mbar .sk-mlogo { display: flex; align-items: center; }
  .sk-mbar .sk-mlogo img {
    display: block;
    width: auto;
    max-width: none;
    height: var(--m-logo-tinggi);
  }
  .sk-mbar .sk-mact { display: flex; align-items: center; margin-right: -10px; }
  .sk-mbar .sk-mbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--m-ikon) !important;
    font-size: var(--m-ikon-ukuran);
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
  }

  /* bar menu: geser horizontal */
  .sk-mbar .sk-mnav {
    position: relative;
    height: var(--m-menu);
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--m-menu-bg);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sk-mbar .sk-mnav::-webkit-scrollbar { display: none; }
  .sk-mbar .sk-mnav__list {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    margin: 0;
    padding: 0 max(0px, calc(var(--m-padding-x) - var(--m-menu-jarak)));
    list-style: none;
    white-space: nowrap;
  }
  .sk-mbar .sk-mnav__list > li { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
  .sk-mbar .sk-mnav__list > li > a {
    display: block;
    margin: 0 !important;
    padding: 0 var(--m-menu-jarak) !important;
    color: var(--m-menu-teks) !important;
    font-size: var(--m-menu-ukuran) !important;
    font-weight: var(--m-menu-berat) !important;
    line-height: var(--m-menu) !important;
    letter-spacing: 0;
    text-transform: var(--m-menu-huruf) !important;
    text-decoration: none !important;
    background: none !important;
    box-shadow: inset 0 calc(var(--m-garis-tebal) * -1) 0 transparent;
  }
  .sk-mbar .sk-mnav__list > li.current-menu-item > a,
  .sk-mbar .sk-mnav__list > li.current-menu-ancestor > a,
  .sk-mbar .sk-mnav__list > li.current-menu-parent > a,
  .sk-mbar .sk-mnav__list > li.current-category-ancestor > a,
  .sk-mbar .sk-mnav__list > li.current-post-ancestor > a {
    box-shadow: inset 0 calc(var(--m-garis-tebal) * -1) 0 var(--m-garis);
  }
  .sk-mbar .sk-mnav__list > li > a > i,
  .sk-mbar .sk-mnav__list > li > a > .fa { display: none; }

  /* panel hamburger */
  .sk-mbar .sk-mpanel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--m-head) - var(--m-menu) - 16px);
    max-height: calc(100dvh - var(--m-head) - var(--m-menu) - 16px);
    overflow-y: auto;
    background: var(--m-panel-bg);
    border-top: 1px solid var(--m-panel-garis);
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
    -webkit-overflow-scrolling: touch;
  }
  .sk-mbar.is-menu .sk-mpanel { display: block; }
  .sk-mbar .sk-mpanel__list { margin: 0; padding: 6px 0; list-style: none; }
  .sk-mbar .sk-mpanel__list li { display: block; margin: 0; padding: 0; list-style: none; }
  .sk-mbar .sk-mpanel__list li > a {
    display: block;
    margin: 0 !important;
    padding: 13px var(--m-padding-x) !important;
    border-bottom: 1px solid var(--m-panel-garis);
    color: var(--m-panel-teks) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    background: none !important;
    box-shadow: none;
  }
  .sk-mbar .sk-mpanel__list li > a > i,
  .sk-mbar .sk-mpanel__list li > a > .fa { display: none; }
  .sk-mbar .sk-mpanel__list .sub-menu {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .sk-mbar .sk-mpanel__list .sub-menu li > a {
    padding-left: calc(var(--m-padding-x) + 16px) !important;
    font-weight: 500 !important;
    text-transform: none;
  }

  /* kolom search */
  .sk-mbar .sk-msearch {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px var(--m-padding-x) 14px;
    background: var(--m-panel-bg);
    border-top: 1px solid var(--m-panel-garis);
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
  }
  .sk-mbar.is-search .sk-msearch { display: block; }
  body .sk-mbar .sk-msearch input[type="search"] {
    display: block;
    width: 100%;
    height: 44px !important;
    margin: 0;
    padding: 0 48px 0 18px !important;
    border: 1px solid var(--m-search-border) !important;
    border-radius: var(--m-search-radius) !important;
    background: var(--m-search-bg) !important;
    color: var(--m-search-teks) !important;
    font-size: 16px !important;        /* 16px supaya iPhone tidak zoom otomatis */
    line-height: normal;
    box-shadow: none !important;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  body .sk-mbar .sk-msearch input[type="search"]::placeholder { color: var(--m-search-placeholder); opacity: 1; }
  body .sk-mbar .sk-msearch input[type="search"]:focus { border-color: var(--m-garis) !important; }
  .sk-mbar .sk-msearch input[type="search"]::-webkit-search-cancel-button { display: none; }
  .sk-mbar .sk-msearch button {
    position: absolute;
    top: 50%;
    right: calc(var(--m-padding-x) + 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    color: var(--m-ikon) !important;
    font-size: 16px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
  }
}


/* =====================================================
   [41] HERO DI MOBILE: lurus dengan container, satu jarak saja
   ===================================================== */
@media (max-width: 959px) {
  #page .sk-cnn {
    --box-padding: 12px;             /* UBAH: jarak isi hero ke garis border di mobile */
    padding-left: 0 !important;      /* jarak ke tepi layar sudah dipegang .site-main (20px), jangan ditambah lagi */
    padding-right: 0 !important;
  }
  #page .sk-cnn .sk-cnn__text { padding: 14px 0 0 !important; }
  #page .sk-cnn .sk-cnn__meta { margin-top: 12px; }
}

/* layar sentuh: warna "hover" tidak boleh nyangkut setelah ditap */
@media (hover: none) {
  #page .sk-cnn__title a:hover { color: var(--hero-teks) !important; }
  #page .sk-cnn__mini-item:hover .sk-cnn__mini-title { color: inherit; }
  #page .sk-cnn__pop-body a:hover { color: var(--c-hitam) !important; }
}

/* ---------- BERITA BERIKUTNYA ---------- */
#page .sk-cnn__mini {
  display: flex;
  margin-top: 16px;
  border-top: 1px solid var(--garis);
}
#page .sk-cnn__mini-item {
  display: none;                     /* hanya yang "is-show" yang tampil (diatur JS) */
  flex: 1 1 0;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 0 0;
  color: var(--c-hitam) !important;
}
#page .sk-cnn__mini-item.is-show { display: flex; }
#page .sk-cnn__mini-item.is-second {
  padding: 14px 0 0 14px;
  border-left: 1px solid var(--garis);
}
#page .sk-cnn__mini-title {
  font-size: var(--mini-ukuran);
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#page .sk-cnn__mini-item:hover .sk-cnn__mini-title { color: var(--c-hover); }
#page .sk-cnn__mini-img {
  position: relative;
  flex: 0 0 var(--mini-foto);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dddddd;
}
#page .sk-cnn__mini-img img,
#page .sk-cnn__mini-img .sk-cnn__noimg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

/* ---------- TERPOPULER (scroll) ---------- */
#page .sk-cnn__pop {
  position: relative;                /* tidak ikut menentukan tinggi: otomatis sama dengan kolom kiri */
  min-width: 0;
  height: var(--pop-tinggi);
}
#page .sk-cnn__pop-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
#page .sk-cnn__pop-title {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--garis);
  color: var(--c-hitam);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
#page .sk-cnn__pop-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 3px;
  background: var(--c-kuning);
}
#page .sk-cnn__pop-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-kuning) transparent;
}
#page .sk-cnn__pop-scroll::-webkit-scrollbar { width: 5px; }
#page .sk-cnn__pop-scroll::-webkit-scrollbar-thumb { background: var(--c-kuning); border-radius: 3px; }
#page .sk-cnn__pop-scroll::-webkit-scrollbar-track { background: transparent; }

#page .sk-cnn__pop-item {
  display: flex;
  gap: 14px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--garis);
}
#page .sk-cnn__num {
  flex: 0 0 34px;
  color: var(--c-kuning);
  font-size: var(--pop-nomor-ukuran);
  font-weight: 800;
  line-height: 1.1;
}
#page .sk-cnn__pop-body { min-width: 0; }
#page .sk-cnn__pop-body a {
  display: block;
  color: var(--c-hitam) !important;
  font-size: var(--pop-judul-ukuran);
  font-weight: 700;
  line-height: 1.4;
}
#page .sk-cnn__pop-body a:hover { color: var(--c-hover) !important; }
#page .sk-cnn__pop-cat {
  display: inline-block;
  margin-top: 6px;
  padding-bottom: 1px;
  border-bottom: 2px solid var(--c-kuning);
  color: var(--c-hitam);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* efek pudar + tombol scroll di bawah daftar */
#page .sk-cnn__pop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--pop-pudar) 85%);
  pointer-events: none;
  z-index: 1;
  transition: opacity .2s ease, visibility .2s ease;
}
#page .sk-cnn__pop-more {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;                       /* UBAH: ukuran tombol scroll */
  height: 34px;
  border-radius: 50% !important;
  background: var(--c-hitam) !important;
  color: #ffffff !important;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background .2s ease, color .2s ease, opacity .2s ease, visibility .2s ease;
}
#page .sk-cnn__pop-more:hover { background: var(--c-kuning) !important; color: var(--c-hitam) !important; }
#page .sk-cnn__pop.is-end::after,
#page .sk-cnn__pop.is-end .sk-cnn__pop-more { opacity: 0; visibility: hidden; }

/* ---------- TABLET & HP ---------- */
@media (max-width: 1100px) {
  #page .sk-cnn { padding-left: 20px; padding-right: 20px; }   /* UBAH: jarak ke tepi layar */
}
@media (max-width: 900px) {
  #page .sk-cnn {
    --foto-rasio: 16 / 9;            /* UBAH: bentuk foto slider di HP */
    grid-template-columns: 1fr;
  }
  #page .sk-cnn__slide { grid-template-columns: 1fr; }
  #page .sk-cnn__img { order: -1; }
  #page .sk-cnn__text { padding: 16px; }
  #page .sk-cnn__pop { height: var(--pop-tinggi-hp); }
}
@media (max-width: 600px) {
  #page .sk-cnn__mini { flex-direction: column; }
  #page .sk-cnn__mini-item.is-second {
    padding: 14px 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--garis);
    margin-top: 14px;
  }
}
/* =====================================================
   [36] STICKY MENU ALA KOMPAS (latar hitam)
   Logo kiri | menu selebar container (sejajar tepi kiri-kanan artikel) | search kanan
   Yang perlu diubah cuma variabel di bagian paling atas (--bar-...)
   ===================================================== */
.sk-bar { display: none; }

@media (min-width: 960px) {
  .sk-bar {
    /* --- WARNA --- */
    --bar-bg: #000000;               /* UBAH: warna latar bar */
    --bar-teks: #ffffff;             /* UBAH: warna tulisan menu */
    --bar-aksen: #febc0f;            /* UBAH: garis menu aktif/hover dan garis fokus kolom search */
    --bar-hover-teks: #febc0f;       /* UBAH: warna tulisan menu saat disorot */
    --bar-garis: #2b2b2b;            /* UBAH: warna garis kecil */
    --bar-bayangan: 0 2px 10px rgba(0,0,0,.35);   /* UBAH: bayangan di bawah bar */

    /* --- UKURAN BAR --- */
    --bar-tinggi: 64px;              /* UBAH: tinggi bar */
    --bar-lebar-total: 1600px;       /* UBAH: lebar wadah logo + menu + search (makin lebar, logo dan search makin ke pinggir) */
    --bar-lebar-menu: 1080px;        /* UBAH: lebar menu = lebar container artikel */
    --bar-padding-x: 20px;           /* UBAH: jarak wadah ke tepi layar kalau layar sempit */
    --bar-gap: 16px;                 /* UBAH: jarak minimal antara logo/search dan menu */
    --bar-z: 99990;                  /* UBAH: urutan tumpukan (naikkan kalau tertutup elemen lain) */

    /* --- LOGO --- */
    --bar-logo-tinggi: 30px;         /* UBAH: tinggi logo */
    --bar-logo-filter: none;         /* UBAH: none = warna logo asli */

    /* --- MENU --- */
    --bar-menu-rata: space-between;  /* UBAH: space-between = item merata dari tepi kiri sampai kanan container | center = rapat di tengah | flex-start = rata kiri */
    --bar-menu-ukuran: 13px;         /* UBAH: ukuran huruf menu */
    --bar-menu-berat: 700;           /* UBAH: ketebalan menu */
    --bar-menu-huruf: uppercase;     /* UBAH: uppercase atau none */
    --bar-menu-jarak: 9px;           /* UBAH: jarak kiri-kanan tiap item (juga jarak minimum antar item) */
    --bar-garis-tebal: 3px;          /* UBAH: tebal garis kuning di bawah menu aktif/hover */

    /* --- HAMBURGER --- */
    --bar-burger: 44px;              /* UBAH: lebar tombol hamburger */
    --bar-burger-ukuran: 20px;       /* UBAH: ukuran ikon hamburger */

    /* --- DROPDOWN (sub-menu dan hamburger) --- */
    --bar-drop-bg: #111111;          /* UBAH: warna latar dropdown */
    --bar-drop-teks: #ffffff;        /* UBAH: warna tulisan dropdown */

    /* --- KOLOM SEARCH --- */
    --bar-search-lebar: 170px;       /* UBAH: lebar kolom search */
    --bar-search-tinggi: 40px;       /* UBAH: tinggi kolom search */
    --bar-search-radius: 999px;      /* UBAH: kebulatan (999px = bulat penuh, 6px = sedikit membulat) */
    --bar-search-bg: #1c1c1c;        /* UBAH: warna dalam kolom */
    --bar-search-border: #3a3a3a;    /* UBAH: warna garis kolom */
    --bar-search-teks: #ffffff;      /* UBAH: warna tulisan yang diketik */
    --bar-search-placeholder: #9a9a9a;   /* UBAH: warna "Masukkan kata kunci..." */
    --bar-search-ukuran: 14px;       /* UBAH: ukuran huruf kolom */

    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--bar-z);
    width: 100%;
    background: var(--bar-bg);
    box-shadow: var(--bar-bayangan);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .sk-bar.is-on {
    transform: translateY(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
  }
  body.admin-bar .sk-bar { top: 32px; }   /* geser di bawah toolbar WordPress saat lo login */

  .sk-bar *,
  .sk-bar *::before,
  .sk-bar *::after { box-sizing: border-box; }

  /* wadah di tengah layar: 3 kolom. Kolom tengah dikunci selebar container */
  .sk-bar .sk-bar__in {
    display: grid;
    grid-template-columns: minmax(var(--sk-side, 0px), 1fr) minmax(0, var(--bar-lebar-menu)) minmax(var(--sk-side, 0px), 1fr);
    align-items: center;
    column-gap: var(--bar-gap);
    height: var(--bar-tinggi);
    width: 100%;
    max-width: calc(var(--bar-lebar-total) + var(--bar-padding-x) * 2);
    margin: 0 auto;
    padding: 0 var(--bar-padding-x);
  }

  /* logo di kolom kiri, search di kolom kanan (di luar lebar container) */
  .sk-bar .sk-bar__logo { display: flex; align-items: center; justify-self: start; }
  .sk-bar .sk-bar__logo img {
    display: block;
    width: auto;
    max-width: none;
    height: var(--bar-logo-tinggi);
    filter: var(--bar-logo-filter);
  }
  .sk-bar .sk-bar__right { display: flex; align-items: center; justify-self: end; }

  /* menu: selebar kolom tengah. Margin minus membuat TEKS item paling kiri/kanan tepat di tepi container */
  .sk-bar .sk-bar__menu {
    display: flex;
    align-items: center;
    justify-content: var(--bar-menu-rata);
    min-width: 0;
    margin: 0 calc(var(--bar-menu-jarak) * -1);
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }
  .sk-bar .sk-bar__menu > li {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sk-bar .sk-bar__menu > li.sk-hide { display: none !important; }
  .sk-bar .sk-bar__menu > li > a {
    display: block;
    margin: 0 !important;
    padding: 0 var(--bar-menu-jarak) !important;
    color: var(--bar-teks) !important;
    font-size: var(--bar-menu-ukuran) !important;
    font-weight: var(--bar-menu-berat) !important;
    line-height: var(--bar-tinggi) !important;
    letter-spacing: 0;
    text-transform: var(--bar-menu-huruf) !important;
    text-decoration: none !important;
    background: none !important;
    box-shadow: inset 0 calc(var(--bar-garis-tebal) * -1) 0 transparent;
    transition: box-shadow .2s ease, color .2s ease;
  }
  .sk-bar .sk-bar__menu > li > a:hover,
  .sk-bar .sk-bar__menu > li.current-menu-item > a,
  .sk-bar .sk-bar__menu > li.current-menu-ancestor > a,
  .sk-bar .sk-bar__menu > li.current_page_item > a {
    color: var(--bar-hover-teks) !important;
    box-shadow: inset 0 calc(var(--bar-garis-tebal) * -1) 0 var(--bar-aksen);
  }
  .sk-bar .sk-bar__menu > li > a > i,
  .sk-bar .sk-bar__menu > li > a > .fa { display: none; }   /* sembunyikan ikon panah bawaan tema */

  /* sub-menu (dropdown saat disorot) */
  .sk-bar .sk-bar__menu > li > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: none !important;
    min-width: 220px;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: var(--bar-drop-bg);
    border: 1px solid var(--bar-garis);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    list-style: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .sk-bar .sk-bar__menu > li:hover > .sub-menu { display: block !important; }
  .sk-bar .sk-bar__menu .sub-menu li { display: block; margin: 0; padding: 0; list-style: none; }
  .sk-bar .sk-bar__menu .sub-menu a {
    display: block;
    padding: 10px 18px !important;
    color: var(--bar-drop-teks) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: normal;
  }
  .sk-bar .sk-bar__menu .sub-menu a:hover { background: var(--bar-aksen); color: #000000 !important; }

  /* hamburger: menempel di belakang item terakhir */
  .sk-bar .sk-more { display: none; position: relative; flex: 0 0 var(--bar-burger); width: var(--bar-burger); margin: 0; padding: 0; list-style: none; }
  .sk-bar .sk-more.is-on { display: block; }
  .sk-bar .sk-more > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bar-burger);
    height: var(--bar-tinggi);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--bar-teks) !important;
    font-size: var(--bar-burger-ukuran);
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
  }
  .sk-bar .sk-more > button:hover { color: var(--bar-hover-teks) !important; }
  .sk-bar .sk-more__list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    display: none;
    min-width: 240px;
    max-height: 70vh;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    background: var(--bar-drop-bg);
    border: 1px solid var(--bar-garis);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    list-style: none;
    text-align: left;
  }
  .sk-bar .sk-more.is-open .sk-more__list { display: block; }
  .sk-bar .sk-more__list li { display: block; margin: 0; padding: 0; list-style: none; }
  .sk-bar .sk-more__list li > a {
    display: block;
    margin: 0 !important;
    padding: 10px 18px !important;
    color: var(--bar-drop-teks) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none;
  }
  .sk-bar .sk-more__list li > a:hover { background: var(--bar-aksen); color: #000000 !important; }
  .sk-bar .sk-more__list li > a > i { display: none; }
  .sk-bar .sk-more__list .sub-menu {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 0 14px !important;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* kolom search */
  .sk-bar .sk-bar__search { position: relative; flex: 0 0 auto; width: var(--bar-search-lebar); margin: 0; padding: 0; }
  body .sk-bar .sk-bar__search input[type="search"] {
    display: block;
    width: 100%;
    height: var(--bar-search-tinggi) !important;
    margin: 0;
    padding: 0 44px 0 18px !important;
    border: 1px solid var(--bar-search-border) !important;
    border-radius: var(--bar-search-radius) !important;
    background: var(--bar-search-bg) !important;
    color: var(--bar-search-teks) !important;
    font-size: var(--bar-search-ukuran) !important;
    line-height: normal;
    box-shadow: none !important;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  body .sk-bar .sk-bar__search input[type="search"]::placeholder { color: var(--bar-search-placeholder); opacity: 1; }
  body .sk-bar .sk-bar__search input[type="search"]:focus { border-color: var(--bar-aksen) !important; }
  .sk-bar .sk-bar__search input[type="search"]::-webkit-search-cancel-button { display: none; }
  .sk-bar .sk-bar__search button {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    color: var(--bar-teks) !important;
    font-size: 15px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
  }
  .sk-bar .sk-bar__search button:hover { color: var(--bar-aksen) !important; }
}


/* =====================================================
   [37] MENU HEADER: selebar container, satu baris, sisanya masuk hamburger (layar >= 960px)
   ===================================================== */
@media (min-width: 960px) {
  #page .site-header #site-navigation.sk-hnav {
    --hn-lebar: 1080px;              /* UBAH: lebar menu header = lebar container artikel */
    --hn-rata: flex-start;           /* UBAH: flex-start = rata kiri | center = di tengah container */
    --hn-teks: #ffffff;              /* UBAH: warna ikon hamburger */
    --hn-aksen: #febc0f;             /* UBAH: warna hover ikon dan item dropdown */
    --hn-drop-bg: #111111;           /* UBAH: warna latar dropdown */
    --hn-drop-teks: #ffffff;         /* UBAH: warna tulisan dropdown */
    --hn-garis: #2b2b2b;             /* UBAH: warna garis dropdown */
    --hn-burger: 44px;               /* UBAH: lebar tombol hamburger */
    --hn-burger-tinggi: 52px;        /* UBAH: tinggi tombol (samakan dengan tinggi baris menu) */
    --hn-burger-ukuran: 20px;        /* UBAH: ukuran ikon hamburger */

    /* kunci lebar: tidak boleh melebihi container, dan boleh mengecil di dalam wadah flex */
    float: none !important;
    flex: 0 1 var(--hn-lebar) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--hn-lebar) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* paksa satu baris */
  #page .site-header #site-navigation.sk-hnav > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: var(--hn-rata);
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap;
  }
  #page .site-header #site-navigation.sk-hnav > ul > li { float: none !important; flex: 0 0 auto; }
  #page .site-header #site-navigation.sk-hnav > ul > li.sk-hide { display: none !important; }
  #page .site-header #site-navigation.sk-hnav > ul > li.menu-search { margin-left: auto !important; }   /* ikon search tetap di ujung kanan container */

  /* hamburger: menempel di belakang item terakhir yang tampil */
  #page .sk-hmore { display: none; position: relative; flex: 0 0 var(--hn-burger); width: var(--hn-burger); margin: 0; padding: 0; list-style: none; }
  #page .sk-hmore.is-on { display: block; }
  #page .sk-hmore > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hn-burger);
    height: var(--hn-burger-tinggi);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--hn-teks) !important;
    font-size: var(--hn-burger-ukuran);
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
  }
  #page .sk-hmore > button:hover { color: var(--hn-aksen) !important; }

  #page .sk-hmore__list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 99999;
    display: none;
    min-width: 240px;
    max-height: 70vh;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    background: var(--hn-drop-bg);
    border: 1px solid var(--hn-garis);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    list-style: none;
    text-align: left;
  }
  #page .sk-hmore.is-open .sk-hmore__list { display: block; }
  #page .sk-hmore__list li { display: block; float: none; margin: 0; padding: 0; list-style: none; }
  #page .sk-hmore__list li > a {
    display: block;
    margin: 0 !important;
    padding: 10px 18px !important;
    color: var(--hn-drop-teks) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none;
  }
  #page .sk-hmore__list li > a:hover { background: var(--hn-aksen); color: #000000 !important; }
  #page .sk-hmore__list li > a > i,
  #page .sk-hmore__list li > a > .fa { display: none; }
  #page .sk-hmore__list .sub-menu {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 0 14px !important;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* =====================================================
   [34] IKLAN
   ===================================================== */
.sk-iklan { margin: 20px auto; text-align: center; }
.sk-iklan__label {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sk-iklan img { display: inline-block; max-width: 100%; height: auto; }
.sk-iklan--kosong {
  padding: 28px 10px;
  border: 2px dashed #cccccc;
  color: #888888;
  font-size: 12px;
  line-height: 1.5;
}
.sk-iklan-rail { display: none; }
@media (min-width: 1480px) {
  .sk-iklan-rail {
    --lebar-konten: 1080px;          /* UBAH: samakan dengan lebar konten situs */
    --rail-atas: 140px;              /* UBAH: jarak dari atas layar */
    display: block;
    position: fixed;
    top: var(--rail-atas);
    left: calc(50% - (var(--lebar-konten) / 2) - 180px);
    width: 160px;
    z-index: 5;
  }
  .sk-iklan-rail .sk-iklan { margin: 0; }
}