/* ============================================================================
   public-modern.css
   Tema portal berita modern untuk situs publik Kwarda Jambi.
   Dominasi warna: MERAH & PUTIH.
   Aksen: cokelat tua + cokelat muda (identitas Gerakan Pramuka Indonesia)
   dan emas tipis sebagai detail. Override terisolasi; dimuat setelah
   style/dark/rtl. Tidak mengubah markup.
   ========================================================================== */

:root {
  /* Dominan: merah & putih */
  --pm-red-900: #7a1220;
  --pm-red-800: #9b1c2a;
  --pm-red-700: #b21f2f;
  --pm-red-600: #c62828;
  --pm-red-500: #dc3545;
  --pm-red-soft: #fdeceb;
  --pm-white: #ffffff;

  /* Aksen Pramuka */
  --pm-brown-900: #3b2620;
  --pm-brown-800: #4e342e;
  --pm-brown-700: #5d4037;
  --pm-brown-600: #6d4c41;
  --pm-brown-500: #8d6e63;
  --pm-tan: #d7ccc8;
  --pm-sand: #f5ede9;
  --pm-gold: #c9a227;
  --pm-gold-dark: #a8861d;

  /* Netral */
  --pm-ink: #221a1a;
  --pm-text: #2c2323;
  --pm-muted: #7c6c6c;
  --pm-surface: #ffffff;
  --pm-surface-soft: #faf7f7;
  --pm-border: #ece2e2;
  --pm-border-strong: #dcc9c9;

  /* Aksen dinamis dari admin (fallback merah) */
  --pm-accent: var(--pm-red-700);
  --pm-block: var(--pm-red-800);

  /* Bentuk & ruang */
  --pm-radius: 12px;
  --pm-radius-sm: 8px;
  --pm-radius-pill: 999px;
  --pm-shadow: 0 1px 2px rgba(122, 18, 32, 0.06), 0 6px 18px rgba(122, 18, 32, 0.07);
  --pm-shadow-hover: 0 4px 10px rgba(122, 18, 32, 0.10), 0 16px 32px rgba(122, 18, 32, 0.13);
  --pm-space-1: 6px;
  --pm-space-2: 10px;
  --pm-space-3: 14px;
  --pm-space-4: 20px;
  --pm-space-5: 28px;

  --pm-grad-red: linear-gradient(135deg, #9b1c2a 0%, #c62828 55%, #dc3545 100%);
  --pm-grad-brown: linear-gradient(135deg, #4e342e 0%, #6d4c41 55%, #8d6e63 100%);
  --pm-grad-gold: linear-gradient(135deg, #c9a227 0%, #a8861d 100%);
}

html.pm-dark {
  --pm-ink: #f6efef;
  --pm-text: #efe6e6;
  --pm-muted: #c0aeae;
  --pm-surface: #241a1a;
  --pm-surface-soft: #1b1313;
  --pm-border: #3d2c2c;
  --pm-border-strong: #503a3a;
  --pm-red-soft: #2a1618;
  --pm-shadow: none;
  --pm-shadow-hover: none;
}

/* ---------------------------------------------------------------- Dasar ---- */
body { color: var(--pm-text); background: var(--pm-surface-soft); }
#content { padding-top: 14px !important; }
.section { margin-bottom: 24px !important; }

a { color: var(--pm-accent); }
a:hover, a:focus { color: var(--pm-red-500); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pm-red-600) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- Header ---- */
#header { position: relative; background: var(--pm-surface); box-shadow: var(--pm-shadow); }

/* Top bar: merah tua + garis emas */
.top-bar {
  position: relative;
  border-bottom: 0 !important;
  background: linear-gradient(180deg, #7a1220 0%, #9b1c2a 100%) !important;
  font-size: 12.5px;
}
.top-bar, .top-bar a, .top-bar .top-menu li a, .top-bar .top-bar-right li a { color: #fdeeee !important; }
.top-bar a:hover, .top-bar li a:hover { color: #ffffff !important; }
.top-bar .top-menu li a, .top-bar .top-bar-right li a { padding: 8px 11px !important; }
.top-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
}

/* Baris logo: putih bersih + glow merah + pola cokelat */
.logo-banner {
  position: relative;
  padding: 16px 0 !important;
  overflow: hidden;
  background:
    radial-gradient(720px 240px at 88% -30%, rgba(198, 40, 40, 0.12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fdf9f9 100%);
  border-bottom: 1px solid var(--pm-border);
}
html.pm-dark .logo-banner { background: linear-gradient(180deg, #241a1a 0%, #1b1313 100%); }
.logo-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image: url(../img/pm-pattern.svg);
  background-size: 120px 120px;
  opacity: 0.05; pointer-events: none;
}
html.pm-dark .logo-banner::before { opacity: 0.09; }
.logo-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pm-red-600) 25%, var(--pm-brown-500) 50%, var(--pm-brown-600) 75%, transparent 100%);
}
.logo-banner .left, .logo-banner .right { position: relative; z-index: 2; }
.logo-banner .left { height: 74px; line-height: 74px; }
.logo-banner .right { height: 74px; line-height: 74px; }
.logo-banner .left .logo { max-height: 74px; }

/* Navigasi utama: merah dominan + kilau emas */
.navbar-default, .navbar-inverse {
  background: var(--pm-block) !important;
  background-image: var(--pm-grad-red) !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 48px;
}
.navbar-default::before, .navbar-inverse::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.navbar-nav > li > a {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px;
  padding: 15px 14px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > .active > a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 -3px 0 #ffffff;
}
.navbar-nav > li > a::after { border-color: #ffffff !important; }

/* Desktop navigation geometry: legacy line-height:50px plus newer vertical
   padding made links taller than their list, pushing the active state below it. */
@media (min-width: 992px) {
  #header .main-menu { --pm-nav-height: 46px; min-height: var(--pm-nav-height); }
  #header .main-menu .navbar-collapse { padding-inline: 0; }
  #header .main-menu .navbar-collapse > .row {
    display: flex; align-items: center; justify-content: space-between;
    min-height: var(--pm-nav-height); margin: 0; gap: 8px;
  }
  #header .main-menu .navbar-collapse > .row::before,
  #header .main-menu .navbar-collapse > .row::after { display: none; }
  #header .main-menu .navbar-nav {
    display: flex; align-items: stretch; flex-wrap: wrap;
    float: none !important; height: auto; margin: 0; padding: 0;
  }
  #header .main-menu .navbar-nav > li { float: none !important; }
  #header .main-menu .navbar-nav > li > a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; height: var(--pm-nav-height);
    padding: 0 13px !important; line-height: 20px;
    font-size: 14px !important; letter-spacing: 0; white-space: nowrap;
  }
  #header .main-menu .navbar-right {
    flex: 0 0 auto; margin-inline-start: auto; margin-inline-end: 0;
  }
  #header .main-menu .navbar-right > li > a { min-width: 44px; }
  #header .main-menu .navbar-nav > li.active > a,
  #header .main-menu .navbar-nav > li > a:hover,
  #header .main-menu .navbar-nav > li > a:focus { box-shadow: none !important; }
  #header .main-menu .navbar-nav > li.active > a::after,
  #header .main-menu .navbar-nav > li > a:hover::after,
  #header .main-menu .navbar-nav > li > a:focus-visible::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background-color: currentColor;
  }
  #header .main-menu .navbar-nav > li > .dropdown-menu,
  #header .main-menu .dropdown.megamenu-fw > .dropdown-menu,
  #header .main-menu .li-search > .search-form { top: 100%; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #header .main-menu .navbar-nav > li > a { padding-inline: 10px !important; font-size: 13px !important; }
}

.dropdown-menu {
  border: 1px solid var(--pm-border) !important;
  border-top: 3px solid var(--pm-red-600) !important;
  border-radius: 0 0 var(--pm-radius) var(--pm-radius) !important;
  box-shadow: var(--pm-shadow-hover) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a { border-radius: 7px; padding: 9px 13px !important; color: var(--pm-text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background: var(--pm-red-soft) !important; color: var(--pm-red-800) !important;
}

.search-form button, .navbar .search-form button { background: var(--pm-red-600) !important; color: #ffffff !important; }
.navbar .search-form input.form-input { background: rgba(255, 255, 255, 0.95); color: var(--pm-ink); }

/* Navigasi sticky di desktop */
@media (min-width: 992px) {
  .navbar-default, .navbar-inverse {
    position: sticky; top: 0; z-index: 1040;
    box-shadow: 0 4px 14px rgba(122, 18, 32, 0.22);
  }
  .container { width: 1210px; }
}
@media (min-width: 1300px) { .container { width: 1250px; } }

/* -------------------------------------------------- Breaking news bar ---- */
.news-ticker {
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-left: 4px solid var(--pm-red-600);
  border-radius: var(--pm-radius-sm);
  box-shadow: var(--pm-shadow);
  overflow: hidden;
}
.news-ticker-title {
  background: var(--pm-grad-red) !important; color: #ffffff !important;
  font-weight: 800 !important; font-size: 12.5px !important;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.news-ticker a { color: var(--pm-brown-700) !important; }
.news-ticker a:hover { color: var(--pm-red-600) !important; }

/* ------------------------------------------------------ Section header ---- */
.section .section-head {
  border-bottom: 2px solid var(--pm-border-strong) !important;
  padding-bottom: 9px !important; margin-bottom: 14px !important;
}
.section .section-head .title,
.section-mid-title .title {
  /* Legacy height:30px + border-box made the new padding overflow the box, so the
     label text sat off-centre. Flex centring with an auto height fixes it. */
  display: inline-flex; align-items: center; justify-content: center;
  height: auto !important; line-height: 1.25 !important;
  background: var(--pm-red-800) !important;
  background-image: var(--pm-grad-red) !important;
  color: #ffffff !important;
  border-radius: var(--pm-radius-sm) !important;
  padding: 9px 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  position: relative;
}
.section .section-head .title::after,
.section-mid-title .title::after {
  content: ""; position: absolute; left: 16px; bottom: -9px;
  width: 44px; height: 3px; background: var(--pm-brown-500); border-radius: 2px;
}
.section .section-head .title a { color: #fff !important; }

.block-subcategories a, .sub-category-tabs a {
  border-radius: var(--pm-radius-pill) !important;
  padding: 6px 14px !important; font-weight: 600; font-size: 12.5px;
  border: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important; color: var(--pm-red-800) !important;
  transition: all 0.15s ease;
}
.block-subcategories a:hover, .block-subcategories a.active,
.sub-category-tabs a:hover, .sub-category-tabs a.active {
  background: var(--pm-red-700) !important; color: #fff !important; border-color: var(--pm-red-700) !important;
}

/* -------------------------------------------------------------- Cards ---- */
.post-item, .post-item-horizontal, .post-item-mid, .post-item-small,
.f-random-list li, .sidebar-widget, .widget-newsletter, .poll, .post-content {
  border-radius: var(--pm-radius);
}

.post-item {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border) !important;
  border-top: 3px solid var(--pm-red-600) !important;
  box-shadow: var(--pm-shadow);
  overflow: hidden;
  margin-bottom: 18px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.post-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-shadow-hover);
  border-color: var(--pm-border-strong) !important;
  border-top-color: var(--pm-brown-600) !important;
}
.post-item .post-image, .post-item-horizontal .post-image {
  position: relative; overflow: hidden;
  border-radius: var(--pm-radius) var(--pm-radius) 0 0;
}
.post-item .post-image img, .post-item-horizontal .post-image img {
  width: 100%; display: block; object-fit: cover;
  transition: transform 0.35s ease;
}
.post-item:hover .post-image img { transform: scale(1.04); }

/* Jarak dalam kartu: proporsional, tidak rapat ke border */
.post-item .post-content { padding: 18px 20px 20px !important; }
.post-item-horizontal .post-content { padding: 16px 20px !important; }

.post-item .title, .post-item-horizontal .title,
.post-item-mid .title, .post-item-small .title {
  color: var(--pm-ink) !important;
  font-size: 16.5px !important; line-height: 1.4 !important;
  font-weight: 700 !important; margin: 10px 0 8px !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-item .title a, .post-item-horizontal .title a { color: inherit !important; }
.post-item .title a:hover, .post-item-horizontal .title a:hover { color: var(--pm-red-700) !important; }

.post-item .post-summary, .post-item-horizontal .post-summary {
  font-size: 13.5px !important; color: var(--pm-muted) !important; line-height: 1.65 !important;
  margin: 0 0 10px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta { font-size: 12px !important; color: var(--pm-muted) !important; margin-top: 8px !important; }
.post-meta a { color: var(--pm-brown-500) !important; }
.post-meta a:hover { color: var(--pm-red-600) !important; }

/* Label kategori: aksen cokelat tua */
/* Legacy .category-label set a fixed height:1.8em with line-height:1.8 while
   Bootstrap's border-box made padding eat the content box, so text sat off-centre.
   Flex centring with auto height keeps the label's text vertically centred. */
.post-label, .category-label, .post-category-label, .label-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 5px 12px !important;
  background: var(--pm-brown-700) !important;
  color: #ffffff !important;
  border-radius: var(--pm-radius-pill) !important;
  font-size: 11px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 0.5px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(78, 52, 46, 0.35);
}

/* Kartu horizontal (daftar berita) */
.post-item-horizontal {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border) !important;
  box-shadow: var(--pm-shadow);
  margin-bottom: 16px !important; overflow: hidden;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.post-item-horizontal:hover { box-shadow: var(--pm-shadow-hover); transform: translateY(-2px); }
.post-item-horizontal .post-image { border-radius: var(--pm-radius) 0 0 var(--pm-radius); }
html[dir="rtl"] .post-item-horizontal .post-image { border-radius: 0 var(--pm-radius) var(--pm-radius) 0; }

/* -------------------------------------------------------- Featured/hero ---- */
.featured-slider .post-item, .featured-posts .post-item,
.featured-slider .post-item-horizontal, .featured-posts .post-item-horizontal {
  border: 0 !important; box-shadow: none !important;
}
.featured-slider .post-image, .featured-posts .post-image { border-radius: var(--pm-radius) !important; }
.featured-slider .caption, .post-overlay .caption, .slider-caption,
.featured-posts .caption {
  background: linear-gradient(180deg, rgba(24, 14, 16, 0) 0%, rgba(24, 14, 16, 0.55) 45%, rgba(24, 14, 16, 0.9) 100%) !important;
  border-radius: 0 0 var(--pm-radius) var(--pm-radius);
  padding: 46px 20px 18px !important;
}
.featured-slider .caption .title, .featured-posts .caption .title,
.post-overlay .caption .title, .slider-caption .title {
  color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  font-weight: 800 !important;
}
.slick-prev, .slick-next, .slick-prev:before, .slick-next:before { color: #ffffff !important; }
ul.slick-dots li.slick-active button { background: var(--pm-red-600) !important; }
ul.slick-dots li button { background: rgba(255,255,255,0.55) !important; }

/* --------------------------------------------------- Widget Instagram ---- */
.widget-instagram .widget-body { padding: 0; }
.widget-instagram .ig-carousel { position: relative; background: var(--pm-surface-soft); }
.widget-instagram .ig-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.widget-instagram .ig-track::-webkit-scrollbar { display: none; }
.widget-instagram .ig-item {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; display: block;
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--pm-border);
}
.widget-instagram .ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.widget-instagram .ig-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 12, 12, 0) 45%, rgba(20, 12, 12, 0.72) 100%);
}
.widget-instagram .ig-item__type {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(20, 12, 12, 0.62); color: #fff; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px;
}
.widget-instagram .ig-item__caption {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  color: #fff; font-size: 12px; line-height: 1.5; text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.widget-instagram .ig-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(20, 12, 12, .5); color: #fff; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.widget-instagram .ig-arrow:hover:not(:disabled) { background: var(--pm-red-600); border-color: var(--pm-red-600); }
.widget-instagram .ig-arrow:disabled { opacity: .35; cursor: default; }
.widget-instagram .ig-arrow--prev { left: 8px; }
.widget-instagram .ig-arrow--next { right: 8px; }
.widget-instagram .ig-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
.widget-instagram .ig-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pm-border-strong); cursor: pointer;
}
.widget-instagram .ig-dots button.is-active { background: var(--pm-red-600); width: 20px; border-radius: 999px; }
.widget-instagram .ig-empty { padding: 16px 18px; margin: 0; color: var(--pm-muted); font-size: 12.5px; line-height: 1.6; }
.widget-instagram .ig-follow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 18px 4px; padding: 10px 14px; min-height: 42px;
  background: var(--pm-red-700); color: #fff !important; border-radius: var(--pm-radius-sm);
  font-size: 12.5px; font-weight: 700;
}
.widget-instagram .ig-follow:hover { background: var(--pm-red-900); color: #fff !important; }
.widget-instagram .ig-follow i { font-size: 15px; }
.widget-instagram .ig-status { margin: 6px 18px 14px; color: var(--pm-muted); font-size: 11px; }
.widget-instagram .ig-status:empty { display: none; }
.widget-instagram[aria-busy="true"] { opacity: .85; }
html.pm-dark .widget-instagram .ig-dots button { background: #4a3939; }
html.pm-dark .widget-instagram .ig-dots button.is-active { background: var(--pm-red-500); }

/* ------------------------------------------- Widget Random Posts (sidebar) ----
   The sidebar slider reused the large global .post-item card, so its title and
   excerpt sat flush against the widget edge. Scoped rules give the slide proper
   inner padding, a proportional cover and compact typography. */
.sidebar-widget.widget-random-slider .widget-body { padding: 0 !important; }
.sidebar-widget.widget-random-slider .random-slider-container {
  float: none !important; overflow: hidden; max-height: none !important;
}
/* NB: Slick adds .slick-slide to each .post-item and relies on its float/width
   for the horizontal track, so float and width must NOT be overridden here. */
.sidebar-widget.widget-random-slider .post-item {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  margin: 0 !important; background: transparent !important;
}
.sidebar-widget.widget-random-slider .post-item:hover { transform: none !important; box-shadow: none !important; }
.sidebar-widget.widget-random-slider .post-item-image {
  height: 190px !important; border-radius: var(--pm-radius-sm);
  overflow: hidden; background: var(--pm-border);
}
.sidebar-widget.widget-random-slider .post-item-image .img-cover { width: 100%; height: 100%; object-fit: cover; }
.sidebar-widget.widget-random-slider .category-label-random-slider { top: 10px !important; left: 10px !important; margin: 0 !important; }
.sidebar-widget.widget-random-slider .title-random-slider {
  float: none !important; margin: 0 !important; padding: 13px 16px 6px !important;
  font-size: 15.5px !important; line-height: 1.45 !important; font-weight: 700 !important;
}
.sidebar-widget.widget-random-slider .title-random-slider a { color: var(--pm-ink) !important; }
.sidebar-widget.widget-random-slider .title-random-slider a:hover { color: var(--pm-red-700) !important; }
.sidebar-widget.widget-random-slider .post-meta {
  float: none !important; margin: 0 !important; padding: 0 16px !important;
  font-size: 11.5px !important; color: var(--pm-muted) !important;
}
.sidebar-widget.widget-random-slider .post-meta a { color: var(--pm-brown-500) !important; }
.sidebar-widget.widget-random-slider .description {
  float: none !important; width: auto !important; margin: 0 !important;
  padding: 8px 16px 18px !important;
  font-size: 12.5px !important; line-height: 1.65 !important; color: var(--pm-muted) !important;
}
.sidebar-widget.widget-random-slider .description:empty { display: none; }
/* Slides without a cover image keep the same inner spacing. */
.sidebar-widget.widget-random-slider .post-item-no-image { padding: 16px !important; }
.sidebar-widget.widget-random-slider .post-item-no-image .category-label-random-slider {
  position: static !important; display: inline-flex; margin: 0 0 10px !important;
}
.sidebar-widget.widget-random-slider .post-item-no-image .title-random-slider { padding: 0 !important; }
.sidebar-widget.widget-random-slider .post-item-no-image .post-meta { padding: 0 !important; }
.sidebar-widget.widget-random-slider .post-item-no-image .description { padding: 8px 0 0 !important; }
/* Slider arrows */
.sidebar-widget.widget-random-slider .slider-nav { top: 10px; right: 10px; height: auto; }
.sidebar-widget.widget-random-slider .slider-nav .prev,
.sidebar-widget.widget-random-slider .slider-nav .next {
  width: 34px !important; height: 34px !important; line-height: 34px !important; padding: 0 !important;
}
.sidebar-widget.widget-random-slider .slider-nav .prev i,
.sidebar-widget.widget-random-slider .slider-nav .next i {
  width: 34px; height: 34px; line-height: 34px; font-size: 14px;
  background-color: rgba(20, 12, 12, .55) !important; opacity: 1 !important;
  border-radius: 50%; color: #fff;
}
.sidebar-widget.widget-random-slider .slider-nav .prev i:hover,
.sidebar-widget.widget-random-slider .slider-nav .next i:hover { background-color: var(--pm-red-600) !important; }

/* ---------------------------------------------------------- Widget/side ---- */
.sidebar-widget {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  box-shadow: var(--pm-shadow);
  padding: 0 !important; margin-bottom: 18px !important; overflow: hidden;
}
.sidebar-widget .widget-head {
  background: var(--pm-grad-brown) !important;
  border-radius: 0 !important; margin-bottom: 0 !important;
}
.sidebar-widget .widget-head .title {
  color: #fff !important; font-size: 14px !important; padding: 11px 18px !important;
  font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.4px;
  position: relative;
}
.sidebar-widget .widget-head .title::after {
  content: ""; position: absolute; left: 18px; bottom: 0; width: 36px; height: 3px; background: var(--pm-brown-500);
}
.sidebar-widget .widget-content, .sidebar-widget > ul, .sidebar-widget > .row { padding: 16px 18px !important; }
.sidebar-widget .title a { color: var(--pm-ink) !important; }
.sidebar-widget .title a:hover { color: var(--pm-red-700) !important; }

.sidebar-widget .tag-list li a, .tag-list li a {
  display: inline-block; border-radius: var(--pm-radius-pill) !important;
  padding: 6px 14px !important; font-size: 12px; font-weight: 600;
  border: 1px solid var(--pm-border) !important; background: var(--pm-surface-soft) !important;
  color: var(--pm-brown-700) !important; margin: 0 5px 7px 0;
}
.sidebar-widget .tag-list li a:hover, .tag-list li a:hover {
  background: var(--pm-red-700) !important; color: #fff !important; border-color: var(--pm-red-700) !important;
}

.poll { padding: 4px 2px; }
.poll .result { margin-bottom: 12px; }
.poll .result .progress { height: 10px !important; border-radius: var(--pm-radius-pill) !important; background: var(--pm-red-soft) !important; }
.poll .result .progress .progress-bar { background: var(--pm-grad-red) !important; border-radius: var(--pm-radius-pill) !important; }
.poll .result .option { color: var(--pm-brown-700) !important; font-weight: 600; }
.poll .btn-custom { background: var(--pm-red-700) !important; border-color: var(--pm-red-700) !important; }

.f-random-list li, .popular-posts li { border-bottom: 1px dashed var(--pm-border) !important; padding: 10px 0 !important; }
.f-random-list li:last-child, .popular-posts li:last-child { border-bottom: 0 !important; }

.ad-space, .ad-container, .banner-ad { max-width: 100%; overflow: hidden; border-radius: var(--pm-radius); }
.ad-space iframe, .ad-container iframe, .banner-ad iframe { max-width: 100% !important; }

/* ------------------------------------------------------ Tombol & form ---- */
.btn, .btn-custom, .newsletter-button, .btn-load-more {
  border-radius: var(--pm-radius-sm) !important; font-weight: 700 !important;
  letter-spacing: 0.3px; transition: all 0.15s ease;
}
.btn-custom, .btn.btn-custom {
  background: var(--pm-red-700) !important; border-color: var(--pm-red-700) !important; color: #fff !important;
}
.btn-custom:hover, .btn-custom:focus {
  background: var(--pm-red-900) !important; border-color: var(--pm-red-900) !important;
  box-shadow: 0 6px 16px rgba(122, 18, 32, 0.3); color: #fff !important;
}
.btn-load-more { border: 1px solid var(--pm-border-strong) !important; background: var(--pm-surface) !important; color: var(--pm-red-800) !important; }
.btn-load-more:hover { background: var(--pm-red-soft) !important; color: var(--pm-red-900) !important; }

.form-control { border-radius: var(--pm-radius-sm) !important; border-color: var(--pm-border) !important; box-shadow: none !important; height: auto; }
.form-control:focus { border-color: var(--pm-red-500) !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important; }
.form-control, textarea.form-control { padding: 10px 14px !important; }

.modal-content {
  border-radius: var(--pm-radius) !important; border: 0 !important;
  box-shadow: var(--pm-shadow-hover) !important; overflow: hidden;
}
.modal-header { background: var(--pm-grad-red) !important; border-bottom: 0 !important; padding: 14px 18px !important; }
.modal-header .modal-title { color: #fff !important; font-weight: 800; }
.modal-header .close { color: #fff !important; opacity: 0.9; }
.modal-body { padding: 20px !important; }
#modal-login #result-login:not(:empty) {
  padding: 10px 12px; margin-bottom: 14px; border: 1px solid #f0c2c7;
  border-radius: 6px; background: #fff1f2; color: #9b1c2a;
  font-size: 13px; line-height: 1.5;
}
#modal-login form[aria-busy='true'] button[type='submit'] { opacity: .7; cursor: progress; }
.modal-newsletter .btn { background: var(--pm-red-600) !important; color: #fff !important; }
.alert { border-radius: var(--pm-radius-sm) !important; padding: 12px 16px !important; }

/* ----------------------------------------------------------- Komentar ---- */
.comment-lists li {
  background: var(--pm-surface); border: 1px solid var(--pm-border);
  border-left: 3px solid var(--pm-brown-500);
  border-radius: var(--pm-radius); padding: 14px 16px !important; margin-bottom: 12px !important;
}
.comment-lists li .btn-comment-reply, .comment-lists li .btn-comment-like { min-height: 38px; min-width: 46px; border-radius: var(--pm-radius-sm) !important; }
.btn-comment-reply, .btn-comment-like { color: var(--pm-red-600) !important; }

.reaction-item label, .emoji-reactions label { border-radius: var(--pm-radius-sm); }
.reaction-item, .emoji-reactions li { min-width: 54px; min-height: 54px; }
.reaction-num-votes { background: var(--pm-red-700) !important; }

/* --------------------------------------------------------- Konten CMS ---- */
/* Jarak proporsional pada isi artikel / halaman statis */
.post-content { padding: 20px 22px !important; }
.post-text, .page-content { line-height: 1.8 !important; }
.post-text p, .page-content p { margin: 0 0 16px !important; }
.post-text h1, .post-text h2, .post-text h3, .post-text h4,
.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
  color: var(--pm-ink); font-weight: 800; line-height: 1.35 !important; margin: 22px 0 12px !important;
}
.post-text ul, .post-text ol, .page-content ul, .page-content ol { margin: 0 0 16px 22px !important; }
.post-text li, .page-content li { margin-bottom: 8px !important; line-height: 1.75 !important; }
.post-text img, .page-content img, .post-content img { max-width: 100% !important; height: auto !important; border-radius: var(--pm-radius-sm); margin: 6px 0; }
.post-text table, .page-content table {
  width: 100% !important; display: block; overflow-x: auto; margin: 16px 0 !important;
  border: 1px solid var(--pm-border); border-radius: var(--pm-radius-sm);
}
.post-text table th, .post-text table td, .page-content table th, .page-content table td { padding: 10px 12px !important; }
.post-text iframe, .page-content iframe { max-width: 100% !important; }
.post-text blockquote, .page-content blockquote {
  border-left: 4px solid var(--pm-red-600); background: var(--pm-red-soft);
  padding: 14px 18px !important; border-radius: 0 var(--pm-radius-sm) var(--pm-radius-sm) 0; margin: 18px 0 !important;
}
.embed-responsive { border-radius: var(--pm-radius); overflow: hidden; }

/* Post meta dan judul di halaman detail */
.post-detail .post-title { padding: 0 2px !important; }
.post-detail .post-meta { padding: 4px 2px !important; }

.gallery-item, .album-item { border-radius: var(--pm-radius); overflow: hidden; box-shadow: var(--pm-shadow); }

/* ---------------------------------------------------------- Pagination ---- */
.pagination > li > a, .pagination > li > span {
  border-radius: var(--pm-radius-sm) !important; margin: 0 3px; color: var(--pm-red-800);
  border-color: var(--pm-border) !important; padding: 8px 13px !important;
}
.pagination > .active > a, .pagination > .active > span {
  background: var(--pm-red-700) !important; border-color: var(--pm-red-700) !important; color: #fff !important;
}
.pagination > li > a:hover { background: var(--pm-red-soft) !important; }

.pm-empty {
  border: 1px dashed var(--pm-border-strong); border-radius: var(--pm-radius);
  padding: 22px; text-align: center; color: var(--pm-muted); background: var(--pm-surface-soft);
}
.pm-loading[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ------------------------------------------------------------ Footer ---- */
#footer {
  background: var(--pm-brown-900) !important;
  color: #e8dcd6 !important;
  margin-top: 30px; padding-top: 30px !important;
  border-top: 4px solid var(--pm-red-600);
}
#footer h4.title, #footer .title { color: #ffffff !important; font-weight: 800; letter-spacing: 0.3px; }
#footer p, #footer a { color: #d9cbc4 !important; }
#footer a:hover { color: #ff9a9a !important; }
.footer-widgets { margin-bottom: 12px !important; }
.footer-bottom { border-top: 1px solid rgba(215, 204, 200, 0.18); padding: 14px 0 !important; }
.nav-footer li a { color: #d9cbc4 !important; }
.mobile-menu-social li a:hover, .mobile-menu-social li a:focus { color: #ff9a9a !important; }

.widget-newsletter .newsletter { display: flex; gap: 8px; }
.widget-newsletter .newsletter-input { flex: 1; border-radius: var(--pm-radius-sm) !important; border: 1px solid rgba(215,204,200,0.25) !important; background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.widget-newsletter .newsletter-input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-button { background: var(--pm-red-600) !important; color: #fff !important; border: 0 !important; }

.cookies-warning { background: var(--pm-red-900) !important; color: #fdeeee !important; border-radius: var(--pm-radius) var(--pm-radius) 0 0; box-shadow: var(--pm-shadow-hover); padding: 12px 16px !important; }
.cookies-warning a { color: #ffffff !important; }

.scrollup { background: var(--pm-red-700) !important; color: #fff !important; border-radius: var(--pm-radius-sm); }
.scrollup:hover { background: var(--pm-red-500) !important; color: #fff !important; }

/* -------------------------------------------------- Mobile navigation ---- */
@media (max-width: 991px) {
  .logo-banner { display: none !important; }
  .mobile-nav-container .nav-mobile-header {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #7a1220 0%, #9b1c2a 58%, #b21f2f 100%) !important;
    box-shadow: 0 2px 10px rgba(122, 18, 32, 0.28);
  }
  .mobile-nav-container .nav-mobile-header::before {
    content: ""; position: absolute; inset: 0;
    background-image: url(../img/pm-pattern.svg);
    background-size: 90px 90px; opacity: 0.10; pointer-events: none;
  }
  .mobile-nav-container .nav-mobile-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--pm-brown-500) 30%, rgba(255,255,255,0.85) 50%, var(--pm-brown-500) 70%, transparent 100%);
  }
  .mobile-nav-container .nav-mobile-header-container { position: relative; z-index: 2; }
  .mobile-nav-container .nav-mobile-header a, .mobile-nav-container .nav-mobile-header i { color: #ffffff !important; }
  .btn-open-mobile-nav, .mobile-search .search-icon {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pm-radius-sm); background: rgba(255, 255, 255, 0.16);
  }
  #navMobile {
    background: var(--pm-surface) !important;
    border-radius: 0 16px 16px 0; box-shadow: var(--pm-shadow-hover);
  }
  html[dir="rtl"] #navMobile { border-radius: 16px 0 0 16px; }
  #navMobile .mobile-menu-header, #navMobile .nav-menu-header { background: var(--pm-grad-red) !important; color: #fff !important; }
  #navMobile a { color: var(--pm-text); }
  #navMobile a:hover { color: var(--pm-red-700) !important; }
  .mobile-nav-search { padding: 10px 12px; background: var(--pm-surface); border-bottom: 1px solid var(--pm-border); }
  .pm-drawer-close {
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.14); border-radius: var(--pm-radius-sm);
    font-size: 20px; line-height: 1; cursor: pointer; color: #ffffff;
  }
  #content { padding-top: 12px !important; }
}

/* --------------------------------------------------------- Responsif ---- */
@media (max-width: 767px) {
  .post-item-horizontal .row > div { width: 100% !important; }
  .post-item-horizontal .post-image { border-radius: var(--pm-radius) var(--pm-radius) 0 0 !important; }
  .post-item-horizontal .post-content { padding: 15px 16px !important; }
  .section .section-head .title { font-size: 14.5px !important; padding: 8px 13px !important; }
  .post-item .title, .post-item-horizontal .title { font-size: 15.5px !important; }
  .post-content { padding: 16px !important; }
}
@media (max-width: 576px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .post-item .post-content { padding: 15px 16px !important; }
  .modal-dialog { margin: 10px !important; }
  .featured-slider .caption, .featured-posts .caption { padding: 32px 15px 14px !important; }
}

/* ============================================================================
   HERO ELEGAN (merah dominan + aksen cokelat/emas)
   ========================================================================== */
.section-featured {
  position: relative;
  width: 100%;
  padding: 30px 0 34px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 28px;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% -25%, rgba(141, 110, 99, 0.32), transparent 60%),
    radial-gradient(760px 380px at 100% -10%, rgba(141, 110, 99, 0.40), transparent 62%),
    linear-gradient(135deg, #7a1220 0%, #9b1c2a 52%, #6d4c41 100%);
}
.section-featured::before {
  content: ""; position: absolute; inset: 0;
  background-image: url(../img/pm-pattern.svg);
  background-size: 150px 150px;
  opacity: 0.10; pointer-events: none;
}
.section-featured::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--pm-brown-500) 25%, rgba(255,255,255,0.8) 50%, var(--pm-brown-500) 75%, transparent 100%);
}
.section-featured > .row { margin-left: 0 !important; margin-right: 0 !important; position: relative; z-index: 2; }
.section-featured .container { position: relative; z-index: 2; }
.section-featured #featured { margin-top: 0 !important; }

.section-featured .featured-slider,
.section-featured .featured-slider-item,
.section-featured .featured-slider-item img { border-radius: 14px; overflow: hidden; }
.section-featured .featured-slider-item { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42); }
.section-featured .featured-slider .featured-slider-item .img-link::after {
  background: linear-gradient(180deg, rgba(24, 14, 16, 0) 0%, rgba(24, 14, 16, 0.45) 48%, rgba(24, 14, 16, 0.90) 100%) !important;
  height: 62% !important;
}
.section-featured .featured-slider .caption { padding: 60px 22px 18px !important; }
.section-featured .featured-slider .caption .title {
  color: #ffffff !important; font-weight: 800 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); line-height: 1.35 !important;
}
.section-featured .featured-slider .post-meta span,
.section-featured .featured-slider .post-meta a { color: #f3e2e2 !important; }
.section-featured .featured-slider .post-meta a:hover { color: #ffffff !important; }

.section-featured #featured .featured-box .box-inner {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: -1px;
}
.section-featured #featured .featured-box .overlay {
  background: linear-gradient(180deg, rgba(24, 14, 16, 0) 0%, rgba(24, 14, 16, 0.42) 50%, rgba(24, 14, 16, 0.86) 100%) !important;
}
.section-featured .featured-box .caption { padding: 0 16px 14px 16px !important; }
.section-featured .featured-box .caption .title { color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); line-height: 1.35 !important; }
.section-featured .featured-box .post-meta span,
.section-featured .featured-box .post-meta a { color: #f0dede !important; }

.section-featured .category-label {
  border-radius: var(--pm-radius-pill) !important;
  background: var(--pm-brown-700) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(78, 52, 46, 0.5);
  padding: 5px 13px !important;
}

.section-featured .featured-slider-nav .prev,
.section-featured .featured-slider-nav .next {
  width: 46px !important; height: 46px !important; line-height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  opacity: 0.92 !important;
  pointer-events: auto !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: all 0.18s ease;
}
.section-featured .featured-slider-nav .prev:hover,
.section-featured .featured-slider-nav .next:hover {
  background: var(--pm-grad-brown) !important;
  color: #ffffff !important;
  border-color: var(--pm-brown-500) !important;
  transform: scale(1.06);
}

@media (max-width: 991px) {
  .section-featured { padding: 20px 0 22px !important; }
  .section-featured #featured { margin-top: 0 !important; }
}
@media (max-width: 576px) {
  .section-featured .featured-slider .caption { padding: 42px 16px 14px !important; }
  .section-featured .featured-box .caption { padding: 0 12px 12px 12px !important; }
}

/* ============================================================================
   PERBAIKAN JARAK (SPACING PROPORSIONAL)
   Teks tidak lagi menempel ke border pada kartu, artikel, dan page statis.
   ========================================================================== */

/* Kartu berita: pastikan ada napas dari border */
.post-item .post-content { padding: 18px 20px 20px !important; }
.post-item-horizontal .post-content { padding: 16px 20px !important; }
.post-item-mid .post-content { padding: 14px 16px 16px !important; }
.post-item-small .post-content { padding: 12px 14px !important; }
.post-item .title { margin: 10px 0 8px !important; }
.post-item .post-summary { margin: 0 0 10px !important; }
.post-item .post-meta { margin-top: 8px !important; }

/* Widget sidebar: isi tidak menempel ke border */
.sidebar-widget .widget-content,
.sidebar-widget > ul,
.sidebar-widget > .row,
.sidebar-widget .row { padding: 16px 18px !important; }
.sidebar-widget .widget-content > *:last-child,
.sidebar-widget > ul > *:last-child { margin-bottom: 0 !important; }

/* Artikel detail */
.post-content { padding: 24px 26px 26px !important; }
.post-content > .post-text { padding: 0 !important; }
.post-content .title { margin: 12px 0 10px !important; }
.post-content .post-summary { margin: 0 0 16px !important; }
.post-content .post-meta { margin: 14px 0 18px !important; }
.post-content .post-meta > span,
.post-content .post-meta > div { margin-bottom: 6px !important; }
.post-content .post-share { margin: 0 0 18px !important; }
.post-content .post-image,
.post-content .post-player,
.post-content .video-player,
.post-content .post-gallery { margin: 0 0 18px !important; border-radius: var(--pm-radius) !important; overflow: hidden; }
.post-content .post-text p { margin: 0 0 16px !important; }
.post-content .post-text table th,
.post-content .post-text table td { padding: 10px 14px !important; }
.post-content .post-text a { color: var(--pm-red-700) !important; }
.post-content .post-text a:hover { color: var(--pm-red-900) !important; text-decoration: underline; }
.post-content .post-files { margin: 18px 0 !important; }
.post-content .post-files .file button { padding: 10px 14px !important; border-radius: var(--pm-radius-sm); }
.post-content .post-tags { margin: 18px 0 !important; }
.post-content .post-tags .tags-title { margin: 0 0 12px !important; }
.optional-url-cnt { margin: 18px 0 !important; }

/* Navigasi antar artikel, reaksi, related, komentar */
.post-next-prev { margin: 22px 0 !important; }
.reactions { padding: 16px 4px !important; }
.section-related-posts { margin-top: 22px !important; }
#comments .comment-section { padding-top: 6px !important; }
.comment-lists { padding: 0 !important; }

/* Page statis: jadikan kartu agar teks punya margin dari border.
   Dibatasi ke .font-text agar tidak memengaruhi grid galeri. */
.page-content.font-text {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-top: 3px solid var(--pm-red-600);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  padding: 24px 26px 28px !important;
  line-height: 1.8 !important;
}
.page-content p { margin: 0 0 16px !important; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4 { margin: 22px 0 12px !important; line-height: 1.35 !important; }
.page-content ul, .page-content ol { margin: 0 0 16px 22px !important; }
.page-content li { margin-bottom: 8px !important; }
.page-content table th, .page-content table td { padding: 10px 14px !important; }
.page-content img { border-radius: var(--pm-radius-sm); margin: 6px 0; }

@media (max-width: 767px) {
  .post-content { padding: 16px !important; }
  .post-item .post-content { padding: 15px 16px !important; }
  .post-item-horizontal .post-content { padding: 15px 16px !important; }
  .page-content { padding: 16px !important; }
}

/* ============================================================================
   TATA LETAK HALAMAN STATIS & DETAIL ARTIKEL
   ========================================================================== */

/* Static pages and article bodies: uploaded images are 750px wide while the
   content column is wider, which left a large empty area on the right.
   Let the body images fill the column instead. */
.page-content img,
.post-text img { width: 100% !important; height: auto !important; }

/* Author / date / counter row under the article title. The legacy markup floats
   the avatar, date and counters independently, so they never lined up. */
.post-content .post-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; margin: 14px 0 18px !important;
}
.post-content .post-meta > span,
.post-content .post-meta > div { float: none !important; margin: 0 !important; }
.post-content .post-meta .post-author-meta a {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--pm-ink) !important;
}
.post-content .post-meta .post-author-meta img {
  float: none !important; margin: 0 !important;
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--pm-border);
}
.post-content .post-meta .post-details-meta-date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.post-content .post-meta .post-details-meta-date span { float: none !important; margin: 0 !important; }
.post-content .post-meta .post-comment-pageviews {
  display: inline-flex; align-items: center; gap: 14px; margin-inline-start: auto !important;
}
.post-content .post-meta .post-comment-pageviews span { display: inline-flex; align-items: center; gap: 5px; }
.post-content .post-meta span,
.post-content .post-meta a { color: var(--pm-muted) !important; font-size: 12px !important; }
.post-content .post-meta i { color: var(--pm-brown-500); }

/* Author box: keep it compact instead of a tall, mostly empty panel. */
.about-author { padding-top: 18px !important; padding-bottom: 18px !important; margin-bottom: 22px !important; }
.about-author-left { width: 96px; }
.about-author-left, .about-author-right { vertical-align: middle; }
.about-author-right .author-link { float: none !important; display: inline-block; margin-bottom: 6px; }
.about-author-row { float: none !important; }
.img-author { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.about-author-right .author-social-cnt { margin-top: 8px !important; }

/* Previous / next article navigation. */
.post-next-prev { margin: 18px 0 !important; padding: 18px 0 0 !important; }

/* Reaction bar: legacy margin-bottom was 45px. */
.reactions { margin-bottom: 20px !important; padding: 12px 0 !important; }
.reactions .title-reactions { margin: 0 0 10px !important; }

/* Related posts: uniform card heights and a dense grid. row-gap keeps every
   card the same height; per-card bottom margins made the last one taller. */
.section-related-posts { margin: 0 0 20px !important; }
.section-related-posts .section-content > .row { display: flex; flex-wrap: wrap; row-gap: 20px; }
.section-related-posts .section-content > .row > .col-sm-12:empty { display: none; }
.section-related-posts .section-content > .row > [class*="col-"] { display: flex; }
.section-related-posts .post-item-mid {
  display: flex; flex-direction: column; width: 100%; margin-bottom: 0 !important;
}
.section-related-posts .post-item-mid .post-item-image { height: 170px; flex: 0 0 auto; overflow: hidden; border-radius: var(--pm-radius-sm); }
.section-related-posts .post-item-mid .post-image,
.section-related-posts .post-item-mid .img-cover { height: 100%; }
.section-related-posts .post-item-mid .title {
  flex: 1 1 auto; margin: 10px 0 6px !important;
  font-size: 15px !important; line-height: 1.45 !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.section-related-posts .post-item-mid .title a { color: var(--pm-ink) !important; }
.section-related-posts .post-item-mid .title a:hover { color: var(--pm-red-700) !important; }
.section-related-posts .post-item-mid .post-meta { margin: 0 !important; }

/* Missing uploads: hide the broken-image icon and keep a neutral placeholder. */
img.pm-img-broken { visibility: hidden !important; }
.post-item-image, .post-item-mid .post-item-image, .nr-card__image { background: linear-gradient(135deg, #efe7e4, #e0d6d2); }

/* Comment area sits directly after the related posts. */
#comments { margin-bottom: 0 !important; }
#comments .comment-section .nav-tabs { margin-bottom: 16px; }

@media (max-width: 767px) {
  .post-content .post-meta .post-comment-pageviews { margin-inline-start: 0 !important; width: 100%; }
  .about-author-left { width: 76px; }
  .img-author { width: 64px; height: 64px; }
  .section-related-posts .post-item-mid .post-item-image { height: 190px; }
}

/* ---------------------------------------------------------- Anti-bot ---- */
.antibot-field { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.antibot-field input { width: 1px !important; height: 1px !important; }
#form_newsletter_footer input[name="url"], #form_newsletter_modal input[name="url"] {
  position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}
.g-recaptcha { max-width: 100%; overflow-x: auto; }
.g-recaptcha > div { margin: 8px 0; }

/* --------------------------------------------------- Aksesibilitas ---- */
html[dir="rtl"] .pm-flip { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}