/* =====================================================
   SUPRAPRESS THEME — BLACK MAMBA (Solid, No-Gradient, No-'none')
   ===================================================== */
:root {
  /* ==== Rainbow helpers (dibuat terang & solid) ==== */
  --rb-conic: linear-gradient(0deg, #ffffff, #ffffff); /* efek border tipis */
  --rb-linear: linear-gradient(0deg, #ffffff, #ffffff); /* tampil solid putih */
  --rb-soft: #ffffff;                                  /* surface lembut */
  --rb-ring:   rgba(0,0,0,.08);                          /* focus ring halus */

  /* Tone terang (Dominan Putih) */
  --bg:   #ffffff;   /* background utama */
  --card: #ffffff;   /* panel/kartu */
  --text: #000000;   /* teks utama */
  --muted: #868686; /* teks sekunder */
  --muted2: #434343; /* sekunder lebih tegas */
  --muted3: #f2f2f2; /* sekunder lebih tegas */
  --line: #373737; /* garis lembut */

  /* Aksen brand (tetap biru elegan) */
  --brand:     #2f80ed;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --ring:      var(--rb-ring);

  /* Elevation ringan untuk tema terang */
  /*  --shadow-1: 0 6px 18px rgba(0,0,0,.08),
              0 0 0 1px rgba(0,0,0,.03) inset;
  --shadow-2: 0 14px 36px rgba(0,0,0,.12);*/

  /* Radius & container (tanpa perubahan) */
  --radius-sm: 10px;
  --radius:    12px;
  --radius-lg: 16px;
  --container: 1120px;

  /* Surface layering helper (versi terang) */
  --surface: color-mix(in oklab, #ffffff 92%, #f1f5f9);
}



/* =========================
   Base & Typography
   ========================= */
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-size:16px; letter-spacing:.1px;
}
@supports (font-variation-settings:normal){ body{ font-variation-settings:"wght" 460; } }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }
body.no-scroll{ overflow:hidden }
img{width:100%;height:auto}

/* Link → gradient text */
a{
  color: var(--accent);
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  text-decoration:none
}
a:hover{
  opacity:.95;
  text-decoration:underline
}
:focus-visible{ outline:none; box-shadow:0 0 0 .22rem var(--ring); border-radius:6px }

/* Util */
.container,.site-container{max-width:var(--container);margin:0 auto;}
.container2,.site-container2{max-width:var(--container);margin:0 auto;padding: 10px 10px 8px;}
.muted{/* color: var(--text); */}
.img-cover{ display:block; width:100%; height:100%; object-fit:cover; background:#0c0e14 }

/* ====== RAINBOW BORDERS (helper via layered backgrounds) ======
   Trik: 2 layer → padding-box utk isi, border-box utk pelangi di pinggir */
.rb-frame{
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rb-conic) border-box;
  border:1px solid transparent;
  border-radius:inherit;
}

/* Chip/Badge & Button & Card */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; line-height:1;
  color:#f1f5f9;
  background:
    linear-gradient(180deg, rgba(15,17,21,.95), rgba(15,17,21,.86)) padding-box,
    var(--rb-conic) border-box;
  border:1px solid transparent;
}
.btn{
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  /* font-weight:800; */
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 80%)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
  color: var(--text);
  transition:transform .06s, box-shadow .15s, filter .15s;
}
.btn:hover{ filter:saturate(1.2) brightness(1.02); box-shadow:var(--shadow-1) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ box-shadow:0 0 0 .22rem var(--ring) }

.card{
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rb-conic) border-box;
  border:1px solid transparent; border-radius:var(--radius); box-shadow:var(--shadow-1)
}

/* =========================
   Header (2 baris responsif)
   ========================= */
.site-header{
  position:relative;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  /* background: linear-gradient(27deg, rgb(255 255 255 / 92%), rgb(228 228 228 / 80%)) padding-box, var(--rb-conic) border-box; */
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom: 1px solid var(--muted3);
  /* margin-top: 10px; */
}
.head-inner{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  grid-template-rows:auto auto;
  /* min-height:64px; */
  padding:30px 6px 0;
  overflow:visible;
}
.brand{ display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none }
.brand-logo{height: clamp(24px,4.5vw,44px);width:auto;display:block}
.brand-name{
  font-weight:900;
  font-size: 28px;
  letter-spacing:.2px;
  font-family: serif;
  background-image: var(--rb-conic);
  -webkit-background-clip:text;
  background-clip:text;
  /* color:transparent; */
  padding-left: 10px;
}

/* Search (desktop) */
.header-search{
  display:flex;
  align-items:center;
  gap: 9px;
  justify-self:stretch;
  border-radius:10px;
  padding:4px;
  margin-left: 20px;
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  border: 1px solid var(--muted3);
}
.header-search .hs-input{
  flex:1 1 260px;
  min-width: 120px;
  height:36px;
  border:0;
  outline:0;
  padding:0 10px;
  background:transparent;
  font:inherit;
  color:var(--text);
}
.header-search .hs-submit{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
  border-radius:8px;
  cursor:pointer;
  /* color:#e6e7eb; */
}
.header-search .hs-submit:hover{ filter:saturate(1.15) }

/* =========================
   Nav kategori (baris kedua)
   ========================= */
.main-nav{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:visible;
  padding: 20px 6px;
  position:static;
  background:transparent;
}
.main-nav a{
  /* color:#e6e7eb; */
  opacity:.95;
  padding: 3px 10px;
  border-radius:10px;
  text-decoration:none;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border: 1px solid var(--muted3);
}
.main-nav a:hover{ opacity:1; filter:saturate(1.15) brightness(1.02) }

/* More (dropdown) */
.nav-more{ margin-left:auto; position:relative; flex:0 0 auto }
.nav-more-btn{
  height:32px;
  padding:0 10px;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border: 1px solid var(--muted3);
  border-radius:10px;
  cursor:pointer;
  font:inherit;
  color: var(--accent);
}
.nav-more-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  max-width:min(420px,90vw);
  padding:6px;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
  border-radius:12px;
  box-shadow:var(--shadow-2);
  display:none;
  z-index:3000;
}
.nav-more.open .nav-more-menu{ display:block }
.nav-more-menu a{display:block;padding: 8px 10px;border-radius:8px;margin-bottom: 6px;/* color:#e6e7eb; */}
.nav-more-menu a:hover{/* background:rgba(255,255,255,.03); */}

/* =========================
   Header – Mobile behaviours
   ========================= */
.search-toggle,.hamburger{
  display:none;
  height:36px;
  border-radius:10px;
  cursor:pointer;
  color: var(--muted);
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border: 1px solid var(--muted3);
}
.hamburger{ position:relative; width:40px }
.hamburger span{position:absolute;left:9px;right:9px;height:2px;background: var(--muted);border-radius:2px}
.hamburger span:nth-child(1){ top:11px } .hamburger span:nth-child(2){ top:17px } .hamburger span:nth-child(3){ top:23px }

.mobile-nav{ position:fixed; inset:0; display:none; z-index:60 }
.mobile-nav.open{ display:block }
.mobile-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.mobile-sheet{
  position:absolute;
  top:50px;
  right:0;
  height:100%;
  width:min(84vw,360px);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .22s ease;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border-left:1px solid transparent;
  box-shadow:var(--shadow-2);
}
.mobile-nav.open .mobile-sheet{ transform:translateX(0) }
.mobile-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:800; color:var(--text) }
.mobile-close{
  width:36px;
  height:32px;
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.mobile-menu{list-style:none;padding:0 11px 10px 10px;margin:0;overflow:auto;flex:1}
.mobile-menu li a{display:block;padding:10px 12px;border-radius:10px;color: var(--text);}
.mobile-menu li a:hover{ background:rgba(255,255,255,.03) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

@media (max-width:980px){
  .search-toggle{ display:block; grid-area:stgl; align-self:center; width:40px; margin:0 10px }
  .hamburger{ display:block; grid-area:burg; align-self:center }
  .header-search{ display:none }
  .header-search.is-open{
    display:flex; grid-column:1 / -1; grid-row:2; justify-self:stretch;
    padding:4px; margin-top:6px; border-radius:10px;
  }
  .header-search .hs-input{width:0;min-width:0;padding:0;opacity:0;/* pointer-events:none; */transition:width .18s, opacity .12s}
  .header-search.is-open .hs-input{ width:100%; padding:0 10px; opacity:1; pointer-events:auto }
  .header-search .hs-submit{/* display:none; */}
  .header-search.is-open .hs-submit{ display:grid }
  .main-nav{ display:none }

  .site-header{position:fixed;width:100%;padding:7px 7px 3px 0px;border-radius:0;/* z-index: 100000; */border-bottom: 1px solid var(--muted3);background: linear-gradient(27deg, rgb(255 255 255 / 92%), rgb(228 228 228 / 80%)) padding-box, var(--rb-conic) border-box;}
  body{padding-top: 52px;}

  .head-inner{
    display:grid;
    grid-template-areas:"brand spacer stgl burg";
    grid-template-columns:auto 1fr auto auto;
    grid-template-rows:auto auto; row-gap:0; min-height:40px; padding:0 6px 4px 6px;
  }
  .brand{padding:0}
  .brand img {height:24px}
}

/* =========================
   Auto-hide kategori (desktop)
   ========================= */
.site-header .main-nav{
  margin-top:20px;
  transition:max-height .22s ease, opacity .18s ease, margin .22s ease, border-color .22s ease;
}
.site-header.nav-hidden .main-nav{ max-height:0; opacity:0; margin-top:0; border-top-color:transparent }
.site-header.nav-hidden .container{ padding-bottom:4px }
.site-header.nav-hidden .head-inner{ row-gap:4px }

/* =========================
   Layout (grid-areas)
   ========================= */
.layout-2col{
  padding-top: 0px;
  padding-bottom: 18px;
  display:grid;
  gap:22px;
  border-radius:25px;
  grid-template-columns:1fr 320px;
  grid-template-areas:
    "main side";
  align-items:start;
  overflow:visible;
  /* background: var(--rb-soft); */
}
.col-main{ grid-area:main; min-width:0 }
.col-side{grid-area:side;min-width:0;position:sticky;top: 56px;align-self:start;height:max-content}

@media (min-width:981px){
  .layout-2col:has(> .col-side:first-child){
    grid-template-columns:320px 1fr;
    grid-template-areas:
      "side main";
  }
}
@media (max-width:980px){
  .layout-2col{ grid-template-columns:1fr; grid-template-areas:"main" "side" }
  .col-side{ position:static; top:auto }
}

/* =========================
   Post Card (list)
   ========================= */
.post-card{
  display:flex;
  gap:14px;
  padding: 10px 0;
  margin-bottom:14px;
  border-radius:var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rb-conic) border-box;
  border-bottom: 1px solid var(--muted3);
  /* box-shadow:var(--shadow-1); */
  transition:box-shadow .18s, filter .18s, transform .06s;
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
}
.post-card:hover{ filter:saturate(1.08) brightness(1.02); box-shadow:var(--shadow-1) }
.post-card:active{ transform:translateY(1px) }
.post-card .media{ flex:0 0 220px }
.post-card .media img{/* width:220px; *//* height:140px; */border-radius:12px;object-fit:cover;background:#0c0e14;display:block}
.post-card .content{min-width:0;box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;word-wrap:break-word}
.post-card .content .post-title{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.3;
  letter-spacing:.2px;
  /* background-image: var(--rb-linear); */
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--text);
}
.post-card .content .post-title a{background-image: var(--rb-linear);-webkit-background-clip:text;background-clip:text;/* color:transparent; */}
.post-card .meta{color:var(--muted);font-size: 11px;display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.post-card .excerpt{margin:0 0 8px;color: var(--muted2);text-align:left}
.post-card .readmore{
  font-weight:900;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--text);
}

@media (max-width:640px){
  .post-card{ flex-direction:column; overflow:hidden }
  .post-card .media{ flex:0 0 auto }
  .post-card .media img{ width:100%; height:auto }
  .post-card .content{padding:8px;/* min-height: 152px; */}
  .post-card .post-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.4;
  }
}

/* =========================
   Variants (grid helpers)
   ========================= */
.post--feature{ grid-column:span 8; display:grid; grid-template-columns:1.2fr 1fr; gap:14px }
.post--feature .media{ border-radius:12px; overflow:hidden }
.post--feature .content .post-title{
  font-size:28px; line-height:1.25; margin:0 0 6px;
  background-image: var(--rb-linear); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.post--wide{ grid-column:span 12; display:grid; grid-template-columns:1fr 3fr; gap:14px }
.post--wide .media{ border-radius:12px; overflow:hidden }
.post--wide .content .post-title{
  font-size:22px;
  margin:0 0 6px;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--accent);
}

.post--small{grid-column:span 4;display:block;/* padding:10px; */}
.post--small .media{ border-radius:10px; overflow:hidden; margin-bottom:8px }
.post--small .content .post-title{
  font-size:16px; line-height:1.3; margin:0 0 4px;
  background-image: var(--rb-linear); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.post--small .excerpt, .post--small .readmore{ display:none }

/* =========================
   Home: Random grid (layout="random")
   ========================= */
.home-random{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; grid-auto-flow:row dense;
}
.home-random > .post-card{display:block;grid-column:span 1;/* max-height: 316px; *//* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */}
.home-random .post--feature{grid-column:span 2;display:grid;grid-template-columns:1.2fr 1fr;gap:14px;/* max-height:236px; */}
.home-random .post--feature .content .post-title{ font-size:18px; line-height:1.25; margin:0 0 6px; }
.home-random .post--wide{ grid-column:span 3; display:grid; grid-template-columns:1fr 2fr; gap:14px }
.home-random .post--wide .content .post-title{ font-size:22px; margin:0 0 6px }

/* =========================
   Home: Inline-block grid (layout="grid")
   ========================= */
.home-grid{display:block;font-size:0;}
.home-grid .post-card{display:inline-block;vertical-align:top;width: calc(33.3% - 16px);margin:8px;font-size:16px;/* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */}
.home-grid .post-card .media{ flex:0 0 auto; width:100% }
.home-grid .post-card .media img{ width:100%; height:180px; object-fit:cover }

/* =========================
   Batasi tinggi judul (hanya home)
   ========================= */
.home-grid .post-card h2.post-title,
.home-random .post-card h2.post-title{max-height:63px;overflow:hidden;text-align:left;margin-top:10px;/* min-height: 64px; */}
.home-random .post--wide  h2.post-title{ max-height:72px }
.home-random .post--feature h2.post-title{ max-height:180px; overflow:hidden }

/* =========================
   Post Wide (desktop→mobile)
   ========================= */
.post-card.post--wide{display:flex !important;gap:14px;align-items:flex-start;grid-template-columns:none !important}
.post-card.post--wide .media{flex:0 0 180px;max-width:180px;}
.post-card.post--wide .media img{ width:100%; height:118px; object-fit:cover; border-radius:12px; display:block }
.post-card.post--wide .content{ min-width:0 }
.post-card.post--wide .post-title{ margin:0 0 6px; font-size:20px; line-height:1.35 }
.post-card.post--wide .excerpt{ margin:0 0 8px }

@media (max-width:640px){
  .post-card.post--wide{display:flex !important;flex-direction:row !important;align-items:stretch;gap:10px;}
  .post-card.post--wide .media{flex:0 0 110px;max-width:110px;align-self:center;display:flex;justify-content:center}
  .post-card.post--wide .media img{width:100%;object-fit:cover;border-radius:10px;display:block}
  .post-card.post--wide .post-title{
    font-size:16px; line-height:1.35; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .post-card.post--wide .meta{ font-size:12px; gap:6px }
  .post-card.post--wide .excerpt{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; font-size:13px; line-height:1.45;
  }
}

/* =========================
   Sidebar (widget)
   ========================= */
.widget{
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* box-shadow:var(--shadow-1); */
  margin-bottom: 14px;
}
.widget__head{
  padding: 14px 10px;
  background: linear-gradient(17deg, rgb(255 255 255 / 92%), rgb(234 234 234 / 80%)) padding-box, var(--rb-conic) border-box;
  /* border-bottom:1px solid rgba(255,255,255,.08); */
}
.widget__title{margin:0;font-size:15px;font-weight:900;letter-spacing:.2px;color: var(--text);}

.sidebar-list{list-style:none;margin:0;padding: 0px;}
.sidebar-item{ margin:0 }
.sidebar-link{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 6px;
  border-radius:12px;
  /* color:#e6e7eb; */
  transition:background .15s, box-shadow .15s, filter .15s;
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  /* border:1px solid transparent; */
  border-bottom: 1px solid var(--muted3);
}
.sidebar-link:hover{ filter:saturate(1.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) }
.sidebar-thumb{width:64px;height:64px;flex:0 0 64px;border-radius:12px;overflow:hidden;background:#0c0e14;border: 1px solid var(--muted3);}
.sidebar-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.sidebar-info{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.sidebar-cat--badge{font-size:11px;line-height:1;color: var(--text);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =========================
   Breadcrumb (auto accent → fallback gradient)
   ========================= */
.breadcrumb{
  background: linear-gradient(331deg, rgb(250 249 249 / 92%), rgb(255 255 255 / 80%)) padding-box, var(--rb-conic) border-box;
  /* border-top: 1px solid var(--muted3); */
  border-bottom: 1px solid var(--muted3);
  margin-top: -14px;
  margin-bottom: 14px;
}
.breadcrumb .container{ padding-block:8px }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.breadcrumb li{display:flex;align-items:center;gap:6px;color: var(--text);font-size:14px}

/* Separator: base (abu), lalu coba tint accent.
   Jika --accent invalid/kosong → baris kedua diabaikan (tetap abu) */
.breadcrumb li::after{ content:"/"; opacity:.6; color:#cdd4df }
.breadcrumb li+li::after{
  color: color-mix(in srgb, var(--accent) 60%, #cdd4df);
}
.breadcrumb li:last-child::after{ content:""; display:none }

/* BASE: gradient rainbow (default) */
.breadcrumb a{
  text-decoration:none;
  padding:4px 6px;
  border-radius:8px;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  /* color:transparent; */
}
.breadcrumb a:hover{
  /* background:#141a25; */
  color: var(--text);
  -webkit-background-clip:initial;
  background-clip:initial;
  text-decoration:underline;
}
.breadcrumb .current{
  font-weight:900;
  padding:4px 6px;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  /* color:transparent; */
}

/* UPGRADE (opsional): jika --accent valid → jadikan solid accent.
   Trik: solid gradient. Jika --accent kosong → deklarasi ini invalid & diabaikan,
   jadi fallback ke block BASE di atas. */
.breadcrumb a,
.breadcrumb .current{
  /* background-image: linear-gradient(var(--accent), var(--accent)) !important; */
}

/* Mobile hide */
@media (max-width:640px){
  .breadcrumb{ display:none !important }
}



/* =========================
   Footer & Pagination
   ========================= */
.site-footer{
  padding: 6px 0;
  color: var(--text);
  /* margin-top:20px; */
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  border-top: 1px solid var(--muted3);
}
.site-footer .foot-inner{ padding-top:8px; padding-bottom:16px; margin-bottom:60px }
.pagination{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap }
.pagination .page{
  padding:8px 12px; border-radius:10px; color:#e6e7eb;
  background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(18,22,34,.85)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.pagination .page:hover{ filter:saturate(1.1) }
.pagination .page.active{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) padding-box, var(--rb-conic) border-box;
  color:#0b0d12;
}

/* Footer grid: maps aware */
.site-footer .foot-grid{ display:block; gap:24px; align-items:stretch }
.site-footer .foot-grid.has-maps{ display:grid; grid-template-columns:1fr minmax(340px,560px); gap:24px; align-items:stretch }
.site-footer .foot-left{ display:flex; flex-direction:column; justify-content:space-between; min-height:100%; text-align:inherit }
.site-footer .foot-right .spm-wrap{ margin:0; height:100% }
.site-footer .foot-right .spm-card{ height:100% }
.site-footer .foot-right .spm-iframe{ height:100% }
@media (max-width:900px){ .site-footer .foot-grid.has-maps{ display:block } }
@media (max-width:640px){ .foot-right{ display:flex; flex-direction:column; align-items:center; text-align:center !important; margin-top:20px } }

/* =========================
   Tag chips
   ========================= */
.post-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.post-card .post-tags{ margin-top:6px }
.tag{
  display: inline-block;
  align-items:center;
  gap:6px;
  padding: 8px 9px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  /* color:#f1f5f9; */
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  max-width:100%;
  overflow: hidden;
  text-overflow:ellipsis;
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(242 242 242 / 80%)) padding-box, var(--rb-conic) border-box; */
  /* border:1px solid transparent; */
  transition:filter .15s;
}
.tag::before{ content:"#"; opacity:.75 }
.tag:hover{filter:saturate(1.15);text-decoration: underline;/* background: var(--line); */}
.tag:focus-visible{ outline:none; box-shadow:0 0 0 .18rem var(--ring) }
.tag--sm{ font-size:11px; padding:3px 8px }

/* =========================
   Related Posts
   ========================= */
.related-grid{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr) }
@media (max-width:640px){ .related-grid{ grid-template-columns:repeat(2,1fr) } }
.related-posts .related-title{
  font-weight:900;
  letter-spacing:.2px;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--text);
}
.related-posts .related-card{
  /* background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rb-conic) border-box; */
  border-bottom: 1px solid var(--muted3);
  transition:transform .16s, box-shadow .16s, filter .16s;
  margin-bottom:6px;
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
}
.related-posts .related-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-1); filter:saturate(1.06) }

/* =========================
   Comments (sp-comment)
   ========================= */
#spc-comments {
  --spc-bg: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(244 244 244 / 80%)) padding-box, var(--rb-conic) border-box;
  --spc-muted:#9aa1ab;
  --spc-text:#e6e7eb;
  --spc-border:transparent;
  --spc-soft:#0b0d12;
  --spc-accent:#ff6ad5;
  --spc-accent-2:#00d0ff;
  --spc-like:#ef4444;
  background: var(--spc-bg);
  border:1px solid transparent;
  border-radius:14px;
  padding:18px;
  box-shadow:var(--shadow-1);
  margin-top:14px;
}
#spc-comments .spc-title{margin:0 0 14px;font-size:1.1rem;font-weight:900;letter-spacing:.2px;color: var(--text);display:flex;align-items:center;gap:.5rem}
#spc-comments .spc-title::before{ content:"💬"; font-size:1.1rem; opacity:.9 }
#spc-comments .spc-empty{color:var(--spc-muted);background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;border:1px dashed rgba(255,255,255,.15);border-radius:12px}
#spc-comments .spc-list{ list-style:none; margin:0 0 12px; padding:0 }
#spc-comments .spc-item{
  border: 1px solid var(--muted3);
  border-radius:12px;
  padding:14px;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  transition:filter .2s, box-shadow .2s, transform .05s
}
#spc-comments .spc-item + .spc-item{ margin-top:10px }
#spc-comments .spc-item:hover{ filter:saturate(1.08); box-shadow:var(--shadow-1) }
#spc-comments .spc-head{font-weight:800;color: var(--muted);display:flex;align-items:center;gap:.5rem}
#spc-comments .spc-head::after{ content:"•"; color:var(--spc-muted); font-weight:400; margin-left:.25rem; opacity:.6 }
#spc-comments .spc-body{color: var(--text);margin:8px 0 10px;line-height:1.7;word-wrap:break-word;overflow-wrap:anywhere}
#spc-comments .spc-body a{ color:transparent; background-image: var(--rb-linear); -webkit-background-clip:text; background-clip:text; text-decoration:none; border-bottom:1px dotted currentColor }
#spc-comments .spc-body a:hover{ text-decoration:underline }
#spc-comments .spc-foot{ color:var(--spc-muted); font-size:.85rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
#spc-comments .spc-like,#spc-comments .spc-reply-toggle{
  appearance:none;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:.85rem;
  /* background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(18,22,34,.85)) padding-box, var(--rb-conic) border-box; */
  border:1px solid transparent;
  transition:transform .05s, box-shadow .15s, filter .2s;
  color: var(--muted);
}
#spc-comments .spc-like:hover,#spc-comments .spc-reply-toggle:hover{ transform:translateY(-1px); box-shadow:var(--shadow-1); filter:saturate(1.12) }
#spc-comments .spc-like .n{ margin-left:.25rem; font-variant-numeric:tabular-nums }
#spc-comments .spc-replies{ list-style:none; margin:10px 0 0; padding-left:16px; border-left:2px solid rgba(255,255,255,.1) }
#spc-comments .spc-replies > li{
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border: 1px solid var(--muted3);
  border-radius:10px;
  padding:10px;
  margin:0 0 8px
}
#spc-comments .spc-form{
  border:1px solid transparent;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border-radius:12px;
  padding:12px;
  margin-top:12px
}
#spc-comments .spc-form input[type="text"],#spc-comments .spc-form input[type="number"],#spc-comments .spc-form textarea{
  width:100%;
  border: 1px solid var(--muted3);
  border-radius:10px;
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  color:var(--spc-text);
  padding:10px 12px;
  outline:0;
  transition:border-color .2s, box-shadow .2s;
}
#spc-comments .spc-form input:focus,#spc-comments .spc-form textarea:focus{
  border-color:#ff6ad5; box-shadow:0 0 0 3px color-mix(in oklab,#ff6ad5,transparent 75%);
}
#spc-comments .spc-form .msg{ margin-left:8px; font-size:.85rem; color:var(--spc-muted) }
#spc-comments .spc-form button[type="submit"]{
  background: linear-gradient(180deg, rgb(48 48 48 / 92%), rgb(55 55 55 / 80%)) padding-box, var(--rb-conic) border-box;
  color:#0a0b0d;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  transition:transform .05s, box-shadow .15s, filter .2s;
}
#spc-comments .spc-form button[type="submit"]:hover{
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.35); filter:saturate(1.1)
}
#spc-comments .spc-form button[type="submit"]:active{ transform:none }
#spc-comments .is-hidden{ display:none !important }
#spc-comments .sep{ opacity:.4; margin:0 .35rem }

/* =========================
   Contact Form (sp-contact-form)
   ========================= */
.sp-contact-form{
  max-width:min(760px,100%); margin:0 auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:18px;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.sp-contact-form h1{
  margin:2px 0 12px;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.25;
  letter-spacing:.2px;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--text);
}
.sp-contact-form .mb-3{ margin-bottom:12px }
.sp-contact-form .form-label{ display:block; margin:0 0 6px; font-weight:900; font-size:14px; color:var(--text) }
.sp-contact-form .form-control{
  width: 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:10px 12px;
  outline:0;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.sp-contact-form textarea.form-control{min-height:140px;resize:vertical}
.sp-contact-form .form-control:hover{ border-color:rgba(255,255,255,.22) }
.sp-contact-form .form-control:focus{ border-color:#ff6ad5; box-shadow:0 0 0 .22rem var(--ring) }
#cfMsg{ font-size:14px; padding:8px 10px; border-radius:10px; border:1px solid transparent }
#cfMsg.is-ok{ color:#d1fae5; background:#064e3b; border-color:#065f46 }
#cfMsg.is-err{ color:#fecaca; background:#7f1d1d; border-color:#991b1b }
.sp-contact-form .d-flex.gap-2{ gap:10px }
.sp-contact-form .btn{ font-weight:900; box-shadow:none }

@media (max-width:640px){
  .sp-contact-form{ padding:14px; border-radius:var(--radius) }
  .sp-contact-form .d-flex{ flex-direction:column }
  .sp-contact-form .btn{ width:100% }
}
.sp-contact-form::before{
  content:""; display:block; height:4px; width:48px; border-radius:999px;
  background: var(--rb-conic); opacity:.45; margin:2px 0 10px;
}

/* =========================
   Sticky Category Bar (desktop only)
   ========================= */
.sticky-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;
  height: 48px;
  display:none;
  background: linear-gradient(15deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 80%)) padding-box, var(--rb-conic) border-box;
  /* box-shadow: 0 0px 3px rgba(0,0,0,.45); */
  border-bottom: 1px solid var(--muted3);
}
:root[style*="--accent"] .sticky-bar { border-bottom:2px solid color-mix(in srgb, var(--brand) 15%, transparent) }
.sticky-bar.is-show{ display:block }
.sticky-inner{
  height:58px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; width:100%; max-width:94%; padding:0 16px;
}
.sticky-bar .brand-logo{height:28px;width:auto;display:block}
.sticky-bar .brand-name{
  font-weight:900;
  font-size:20px;
  font-family:serif;
  background-image: var(--rb-conic);
  -webkit-background-clip:text;
  background-clip:text;
  /* color:transparent; */
}
.sticky-bar #desktopNav{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:thin;
  padding:6px 0;
  margin:0;
  box-sizing:border-box;
  max-width: 100%;
}
.sticky-bar #desktopNav a{
  display:inline-block;
  text-decoration:none;
  opacity:.95;
  font-size:small;
  /* color:#e6e7eb; */
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  /* border:1px solid transparent; */
  padding:4px 8px;
  border-radius:8px;
  margin:2px;
}
.sticky-bar #desktopNav a:hover{filter:saturate(1.15);/* background: var(--line); */text-decoration: underline;}
@media (max-width:991px){ .sticky-bar{ display:none !important } }
body.has-sticky{ padding-top:58px }

/* =========================
   Highlight Carousel
   ========================= */
.sp-highlight__carousel{ position:relative }
.sp-highlight__track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* padding:0 8px; */
  scroll-padding-left:8px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.sp-highlight__track::-webkit-scrollbar{ display:none }
.sp-highlight__card{
  flex:0 0 280px; scroll-snap-align:start; border-radius:12px; box-shadow:var(--shadow-1);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.sp-highlight__media{ aspect-ratio:16/9; overflow:hidden }
.sp-highlight__media img{ width:100%; height:100%; object-fit:cover; display:block }
.sp-highlight__body{padding:10px 10px 12px;color:#e6e7eb;background: var(--rb-soft);}
.sp-highlight__cat{font-size:11px;opacity:.9;margin-bottom:4px;color: var(--muted);}
.sp-highlight__title{
  font-size:14px; line-height:1.35; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.35em * 2);
  background-image: var(--rb-linear); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hl-prev,.hl-next{
  width:32px; height:32px; line-height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55); color:#fff; cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); z-index:10;
}
.hl-prev{ left:6px } .hl-next{ right:6px }
.hl-prev:hover,.hl-next:hover{ background:rgba(0,0,0,.7) }

/* =========================
   Gallery (single) & Attachment Gallery (thumbs)
   ========================= */
.attach-gallery{
  --ag-pad:42px;
  --ag-gap:10px;
  position:relative;
  border-radius:12px;
  padding:10px 0;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:980px;
  margin: 20px -1px 0px 0px;
  box-shadow:var(--shadow-1);
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.attach-gallery .ag-track{ display:flex; gap:var(--ag-gap); padding:0 var(--ag-pad); overflow:auto hidden; scroll-behavior:smooth; scroll-snap-type:x proximity; }
.attach-gallery .ag-track::-webkit-scrollbar{ display:none }
.attach-gallery .ag-track{ scrollbar-width:none; -ms-overflow-style:none }
.attach-gallery .ag-track::before, .attach-gallery .ag-track::after{ content:""; flex:0 0 var(--ag-pad) }
.attach-gallery .ag-item{
  flex:0 0 auto; scroll-snap-align:start; border-radius:10px; overflow:hidden;
  background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(18,22,34,.88)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.attach-gallery .ag-item img{ display:block; width:120px; height:80px; object-fit:cover; border-radius:6px; margin:0 auto }
.attach-gallery .ag-item.is-active{outline:2px solid #ff6ad5;outline-offset:2px;margin: 5px;}
.attach-gallery .ag-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; z-index:3;
}
.attach-gallery .ag-prev{ left:6px } .attach-gallery .ag-next{ right:6px }
.attach-gallery .ag-nav[disabled]{ opacity:.35; pointer-events:none }

@media (min-width:981px){
  .attach-gallery.is-centered{ display:flex; align-items:center; justify-content:center; gap:8px }
  .attach-gallery.is-centered .ag-track{ justify-content:center; overflow:hidden; padding:0 12px }
  .attach-gallery.is-centered .ag-track::before,
  .attach-gallery.is-centered .ag-track::after{ flex-basis:0 !important }
  .attach-gallery.is-centered .ag-nav{ display:none }
  .attach-gallery.is-centered .ag-item{ flex:0 0 auto }
  .attach-gallery.is-centered .ag-item img{ display:block; margin:0 auto }
}

/* --- Galeri (single selaras) --- */
.galeri{ max-width:980px; margin:20px auto 0 }
.galeri-head{color: var(--text);margin-bottom:8px;font-weight:900;}
.galeri-wrap{
  position:relative;
  border-radius:14px;
  padding:8px 44px;
  box-shadow:var(--shadow-1);
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent;
}
.galeri-track{
  position:relative; z-index:1; display:flex; gap:10px; overflow:hidden; scroll-behavior:smooth;
  scroll-padding-left:44px; scroll-padding-right:44px; -ms-overflow-style:none; scrollbar-width:none;
}
.galeri-track::-webkit-scrollbar{ display:none }
.galeri-item{
  flex:0 0 auto; display:block; border-radius:10px; overflow:hidden;
  background: linear-gradient(180deg, rgba(12,14,20,.98), rgba(12,14,20,.90)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent; box-shadow:0 1px 2px rgba(0,0,0,.35); transition:transform .15s, box-shadow .2s, filter .2s;
}
.galeri-item img{ display:block; width:120px; height:80px; object-fit:cover }
.galeri-item:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.4); filter:saturate(1.08) }
.galeri-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:var(--shadow-1);
  color: var(--accent);
  cursor:pointer;
  font-size: x-large;
  z-index:5;
  display:grid;
  place-items:center;
  pointer-events:auto;
  /* background: rgba(0,0,0,0.4); */
}
.galeri-nav.prev{ left:8px } .galeri-nav.next{ right:8px }
.galeri-nav:disabled{ opacity:.35; pointer-events:none }
.galeri.is-centered .galeri-wrap{ padding:8px 12px }
.galeri.is-centered .galeri-track{ justify-content:center; overflow:hidden }
.galeri.is-centered .galeri-nav{ display:none }

/* =========================
   Misc & Utilities (tak mengubah struktur)
   ========================= */
.site-footer .foot-inner p{margin:0;font-size:14px;/* color: var(--muted); */}
.ss-share--stack{ flex-direction:column; align-items:stretch }
.ss-share .ss-btn:hover{ background:#11141d }
@media print{ .ss-float{ display:none !important } }
@media (max-width:1099px){ .ss-float{ display:none !important } }
.content2{ text-align:center; font-size:small; color:#9aa1ab }
.post-card_attach{
  display:flex;
  gap:14px;
  padding: 0 14px;
  margin-bottom:0;
  /* border-radius:var(--radius); */
  transition:box-shadow .18s, transform .06s;
  /* background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rb-conic) border-box; */
  /* border:1px solid transparent; */
}

/* ===== Header: Quick Pages (pojok kanan atas) ===== */
.head-inner{position:relative;}
.header-pages{
  position:absolute;
  right: 4px;
  top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  white-space:nowrap;
  z-index:5;
  padding:2px 4px;
  max-width:min(58vw,640px);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100% );
  -webkit-mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100% );
}
.header-pages::-webkit-scrollbar{ display:none }
.header-pages .hp-link{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:13px; font-weight:900; letter-spacing:.1px;
  color:#e6e7eb; text-decoration:none;
  background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(18,22,34,.85)) padding-box, var(--rb-conic) border-box;
  border:1px solid transparent; transition:filter .18s, color .18s, box-shadow .18s;
}
.header-pages .hp-link:hover{ filter:saturate(1.12); color:#fff; text-decoration:none; }
.header-pages .hp-link:focus-visible{ outline:none; box-shadow:0 0 0 .18rem var(--ring) }
.header-pages .hp-link[aria-current="page"]{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) padding-box, var(--rb-conic) border-box;
  color:#0f1115;
}

/* Drawer subhead & icons */
.mobile-subhead{
  margin:8px 14px 4px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted2);
  opacity:.95;
}
.mobile-menu[aria-label="Kategori"] li a::before{ content:"📂"; font-size:14px; margin-right:8px; opacity:.9 }
.mobile-menu[aria-label="Pages"] li a::before{ content:"📄"; font-size:14px; margin-right:8px; opacity:.9 }

/* 1) Pastikan sticky bar & nav ga nge-clip anaknya */
.sticky-bar, .sticky-bar .sticky-inner, .sticky-bar .main-nav { overflow: visible !important; }

/* 2) Naikkan z-index sticky bar & dropdown */
.sticky-bar { position: sticky; top: 0; z-index: 9999; }
.main-nav .nav-more { position: relative; }
.main-nav .nav-more-menu{ position: absolute; right: 0; top: calc(100% + 8px); z-index: 10000; }

/* 3) Matikan fade saat sticky */
.sticky-bar .main-nav::after, .sticky-bar .main-nav::before { display: none !important; }

/* 4) Jaga container header tidak hidden */
.site-header, .head-inner, #stickyNavSlot {overflow: visible !important;/* margin-top: 10px; *//* padding-left: var(--hglight-lg) !important; *//* padding-right: var(--hglight-lg) !important; */}

li.sidebar-item {}
.sidebar-link { margin-bottom:10px; }
.rel_dt { font-size:12px; color: var(--muted); margin-top: 12px; }
i.sb-views { color: var(--muted); }
a.sidebar-cat.sidebar-cat--badge { font-style: italic; }

@media (max-width: 768px){ .header-pages{ display:none !important; } }

/* ==== Anti-geser kanan-kiri (mobile) ==== */
@media (max-width: 980px){
  html, body { overflow-x: hidden !important; }
  .site-header, .head-inner, .sticky-bar, .sticky-inner, .site-container, .container,
  .layout-2col, .col-main, .col-side, .post-single, .post-content, .related-grid, .related-posts,
  .attach-gallery, .galeri, .galeri-wrap, .galeri-track { max-width: 100vw !important; }
  .header-pages{ display:none !important; }
}

/* Box sizing global */
*, *::before, *::after { box-sizing: border-box; }

/* Konten artikel aman dari overflow url/kode panjang */
.post-content{ overflow-wrap:anywhere; word-wrap:break-word; }
.post-content img, .post-content video, .post-content iframe{max-width:100% !important;height:auto !important;display:block;border-radius: 12px;}
.post-content table{ width:100%; max-width:100%; overflow:auto; display:block; }
.post-content pre, .post-content code{ white-space:pre-wrap; word-break:break-word; max-width:100%; }

/* Related grid safe */
.related-grid{width:100%;margin:0;line-height: normal;}

/* Galeri safe padding */
.attach-gallery{ width:100%; box-sizing:border-box; }
.attach-gallery .ag-track{ max-width:100%; }
.galeri, .galeri-wrap, .galeri-track{ width:100%; box-sizing:border-box; }

@media (max-width: 991px){ .sticky-bar{ display:none !important; } }

/* ==== Home grids: 2 kolom mobile (tetap) ==== */
@media (max-width: 980px){
  .home-random{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-random .post--feature, .home-random .post--wide{
    grid-column: span 2 !important; grid-template-columns: 1fr !important;
  }
  .home-random .post--feature .media, .home-random .post--wide .media{ border-radius:12px; overflow:hidden; }
  .home-random .post--feature .media img, .home-random .post--wide .media img{ width:100% !important; height:auto !important; object-fit:cover; }

  .home-grid .post-card{width: calc(49% - 16px) !important;margin: 8px !important;}
}

/* Home list → 2 kolom di mobile */
@media (max-width: 980px){
  #home-list.home-grid{ display:block; font-size:0; margin:-8px; }
  #home-list.home-grid .post-card{display:inline-block;vertical-align:top;width: calc(49% - 16px) !important;margin:8px !important;font-size:16px;}
  #home-list.home-grid .post-card .media{ flex:0 0 auto; width:100% }
  #home-list.home-grid .post-card .media img{ width:100%; height:auto; object-fit:cover }
  #home-list.home-grid .post-card h2.post-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.35; margin:8px 0 6px;
  }
  #home-list #lm-wrap{ display:block !important; width:100% !important; margin:12px 0 4px !important; text-align:center !important; }
}
@media (max-width: 480px){
  #home-list.home-grid .post-card{/* width: 100% !important; */margin: 8px 0 !important;}
}
@media (max-width: 420px){
  #home-list.home-grid .post-card{width: 47% !important;margin: 8px 5px !important;}
}

/* Center gambar vertikal di feature/wide */
@media (min-width: 641px){
  .post-card.post--wide {align-items: stretch;/* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */}
  .post-card.post--wide .media{/* display:flex; */align-items:center;justify-content:center;align-self:center;overflow:hidden;}
  .post-card.post--wide .media img{width:100%;height:118px;object-fit:cover;display:block}
}

/* MOBILE: meta layout tetap */
@media (max-width: 640px){
  .post-single .meta{/* display:flex; *//* align-items:center; */flex-wrap:wrap;gap:8px;text-align: center;margin: 8px 8px;line-height: 39px;}
  .post-single .meta > span:nth-of-type(1){order:0;flex:0 0 auto;}
  .post-single .meta .lb-like{ order:1; margin-left:auto !important; display:inline-flex !important; align-items:center; gap:6px; margin:0 !important; }
  .post-single .meta::after{ content:""; order:5; flex-basis:100%; }
  .post-single .meta > span:nth-of-type(2){ order:10; flex:0 0 auto; }
  .post-single .meta > .muted{ order:11; flex:0 0 auto; }
}
@media (min-width: 641px){
  .post-single .meta{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; margin-bottom: 10px;}
  .post-single .meta .lb-like{ margin-left:auto !important; display:inline-flex !important; align-items:center; gap:6px; }
}

a.sidebar-title { line-height: normal; }

/* ===== Utility links (Pages) header kanan ===== */
.site-header .head-inner{position:relative;}
.header-pages{
  position:absolute;
  /* right:20px; */
  top: 6px;
  display:flex;
  gap: 20px;
  align-items:center;
  font-size:12px;
  line-height:1;
  opacity:.95;
}
.header-pages .util-link{
  text-decoration:none;
  padding:2px 0;
  margin:0;
  /* color: var(--text); */
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
}
.header-pages .util-link:hover{/* color:#fff; *//* -webkit-background-clip:initial; *//* background-clip:initial; */text-decoration:underline;}
.header-pages .util-link + .util-link{
  border-left:1px solid color-mix(in srgb, var(--text) 30%, transparent); padding-left:12px;
}
@media (prefers-color-scheme: dark){
  .header-pages .util-link + .util-link{ border-left:1px solid color-mix(in srgb, #fff 40%, transparent); }
}
@media (max-width:980px){ .header-pages{ display:none; } }

/* Gutters */
:root{--gutter-sm:12px;--gutter-md:16px;--gutter-lg:20px;--hglight-sm:12px;--hglight-md:16px;--hglight-lg: 10px;}
.container,.site-container{margin:0 auto;/* padding-left:var(--gutter-sm); *//* padding-right:var(--gutter-sm); */}
@media (min-width:640px){ .container,.site-container{/* padding-left:var(--gutter-md); *//* padding-right:var(--gutter-md); */} }
@media (min-width:1024px){ .container,.site-container{/* padding-left:var(--gutter-lg); *//* padding-right:var(--gutter-lg); *//* padding-top: 22px; *//* background: #FFF; */} }
.site-main{
    padding-top: 14px;
    background: var(--rb-soft);
    padding-bottom: 4px;
}
.breadcrumb .container{ padding-left:var(--gutter-sm); padding-right:var(--gutter-sm); }
.site-footer .foot-inner{ padding-left:var(--gutter-sm); padding-right:var(--gutter-sm); }
@media (min-width:640px){
  .breadcrumb .container, .site-footer .foot-inner{ padding-left:var(--gutter-md); padding-right:var(--gutter-md); }
}
@media (min-width:1024px){
  .breadcrumb .container, .site-footer .foot-inner{ padding-left:var(--gutter-lg); padding-right:var(--gutter-lg); }
}

/* Rel h3 clamp */
.relh3 h3{
  margin:0;
  font-size:16px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--accent);
}
@supports not (-webkit-line-clamp: 2){
  .relh3 h3{ max-height: calc(1.35em * 2); overflow:hidden; }
}

/* Sidebar titles clamp */
.sidebar-info{ min-width:0; }
.sidebar-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.35;
  font-size:14px;
  margin:2px 0 4px;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  /* color:transparent; */
  text-decoration:none;
}
.sidebar-title:hover{ text-decoration:underline; }
@supports not (-webkit-line-clamp: 2){
  .sidebar-title{ max-height:calc(1.35em * 2); overflow:hidden; }
}
.sidebar-cat--badge{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; line-height:1; opacity:.98; }
.sb-views{ font-size:12px; font-style:italic; color:var(--muted); }
.sidebar-link{ display:flex; gap:12px; align-items:flex-start; }
.sidebar-thumb{flex:0 0 64px;width: 70px;he;height: 70px;rder-radius:12px;overflow:hidden;}
.sidebar-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* Feature card center */
.post-card.post--feature{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:14px;
  /* max-height: 270px; */
  align-items:center;
}
.post-card.post--feature .media{ height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; }
.post-card.post--feature .media > a{ display:block; height:100%; width:100%; }
.post-card.post--feature .media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center center; }
.post-card.post--feature .content{ min-height:0; display:flex; flex-direction:column; justify-content:center; }
.post-card.post--feature .post-title{
  margin:0 0 6px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  background-image: var(--rb-linear); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:640px){
  .post-card.post--feature{ grid-template-columns:1fr; max-height:none; }
  .post-card.post--feature .media{ height:auto; }
  .post-card.post--feature .media > a{ height:auto; }
  .post-card.post--feature .media img{ height:auto; }
  .post-card.post--feature .content{ justify-content:flex-start; }
}

h1.post-title{margin:0;background-image: var(--rb-linear);-webkit-background-clip:text;background-clip:text;color: var(--text);/* text-align: center; */line-height: normal;}

/* Related card title clamp */
.related-card .rc-title{
  margin:0 0 6px;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  background-image: var(--rb-linear);
  -webkit-background-clip:text;
  background-clip:text;
  color: var(--accent);
}
@supports not (-webkit-line-clamp: 2){
  .related-card .rc-title{ max-height: calc(1.35em * 2); overflow: hidden; }
}

/* MOBILE: perbesar logo tanpa ganggu tombol kanan */
@media (max-width:980px){
  a.brand{ display:flex; align-items:center; max-width: calc(100vw - 108px); overflow:hidden; }
  .brand img,.brand .brand-logo{ height: clamp(23px, 6vw, 44px); width:auto; display:block; }
  .head-inner{ grid-template-columns: 1fr auto auto; }
  .search-toggle, .hamburger{ width:40px; height:36px; flex:0 0 auto; }
}


.site-container.attach-2col {
    /* background: #FFF; */
    /* padding-top: 18px; */
    /* padding-bottom: 18px; */
    padding: 11px;
    /* display: grid; */
    /* gap: 22px; */
    border-radius: 25px;
    grid-template-columns: 1fr;
    align-items: start;
    overflow: visible;
    /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
    /* margin-bottom: 20px; */
    border: 1px solid transparent;
}

.rc-body {
    /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
}


/* === FIX: jangan collapse search di sidebar/halaman === */
@media (max-width:980px){
h1.post-title{margin:0;background-image: var(--rb-linear);-webkit-background-clip:text;background-clip:text;/* color:transparent; */text-align: center;line-height: normal;}
 
 h2 {
    line-height: normal;
}

h3 {
    line-height: normal;
}
 
  /* Hanya header yang boleh di-toggle */
  .site-header .header-search{ display:none }
  .site-header .header-search.is-open{
    display:flex; grid-column:1 / -1; grid-row:2; justify-self:stretch;
    padding:4px; margin-top:6px; border-radius:10px;
  }
  .site-header .header-search .hs-input{
    width:0; min-width:0; padding:0; opacity:0; pointer-events:none; transition:width .18s, opacity .12s;
  }
  .site-header .header-search.is-open .hs-input{
    width:100%; padding:0 10px; opacity:1; pointer-events:auto;
  }
  .site-header .header-search .hs-submit{ display:none }
  .site-header .header-search.is-open .hs-submit{ display:grid }
  
  /* Sidebar / konten (termasuk 404) jangan di-collapse */
  .col-side .header-search,
  .layout-2col .col-main .header-search{
    display:flex !important;
  }
  .col-side .header-search .hs-input,
  .layout-2col .col-main .header-search .hs-input{
    min-width: 120px !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:0 10px !important;
  }
}

/* === Placeholder tetap terlihat di dark mode === */
.header-search .hs-input::placeholder{
  color: color-mix(in srgb, var(--text) 55%, transparent);
  opacity:.9;
}

/* (opsional) biar jelas saat fokus */
.header-search .hs-input:focus{
  box-shadow: 0 0 0 .18rem var(--ring);
  border-radius:8px;
}

p.spm-phone a {
    color: #333;
}


/* ====== FIX iPhone: 2 kolom stabil untuk home-grid ====== */
@media (max-width:980px){

  /* Paksa kontainer jadi CSS Grid */
  #home-list.home-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    font-size: initial !important;      /* matikan trik font-size:0 lama */
    width: 100% !important;
  }

  /* Hapus warisan inline-block + width calc */
  #home-list.home-grid > .post-card{
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: 100% !important;
  }

  /* Media jangan 220px lagi; penuh lebar + tinggi seragam */
  #home-list.home-grid > .post-card .media{
    flex: none !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;   /* ubah ke 16/9 kalau mau */
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  #home-list.home-grid > .post-card .media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Judul 2 baris → tinggi kartu konsisten */
  #home-list.home-grid > .post-card h2.post-title{
    margin: 8px 0 6px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: calc(1.35em * 2) !important;
  }

  /* Meta nempel di bawah */
  #home-list.home-grid > .post-card .meta{
    margin-top: auto !important;
    font-size: 12px !important;
  }

  /* Tombol Load more span 2 kolom */
  #home-list #lm-wrap{
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
}


/* ===== Sticky: selaraskan dengan .container + .head-inner ===== */
.sticky-bar { left:0; right:0; } /* sudah ada, biar aman */

.sticky-head{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items:center;
  /* min-height:58px; */
  padding:0;               /* biar ikut gutters dari .container */
}

/* Buang batasan 94% dari rule lama dan samakan lebar container */
.sticky-inner, .sticky-head{
  width:100% !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
}

/* Pakai gutter yang sama seperti .container global */
.sticky-bar .container{
  /* padding-left: var(--gutter-sm); */
  /* padding-right: var(--gutter-sm); */
}
@media (min-width:640px){
  .sticky-bar .container{
    /* padding-left: var(--gutter-md); */
    /* padding-right: var(--gutter-md); */
  }
}
@media (min-width:1024px){
  .sticky-bar .container{
    /* padding-left: var(--gutter-lg); */
    /* padding-right: var(--gutter-lg); */
  }
}

/* ===== Sticky "More" dropdown: buka KE BAWAH, bukan menyamping ===== */
.sticky-bar .main-nav .nav-more{ position:relative; z-index: 20000; }
.sticky-bar .main-nav .nav-more-menu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;              /* default hidden */
  white-space: normal !important; /* jangan ikut nowrap dari nav */
  min-width: 220px;
  max-width: min(420px, 90vw);
  max-height: 70vh;           /* biar bisa scroll kalau panjang */
  overflow-y: auto;
  z-index: 20001;
}

/* Saat terbuka */
.sticky-bar .main-nav .nav-more.open .nav-more-menu{ display:block; }

/* Item di dalam menu: vertikal */
.sticky-bar .main-nav .nav-more-menu a{
  display:block !important;
  margin: 6px 0;
}

/* ==== Dropdown "More" global: buka ke bawah & vertikal ==== */
.main-nav { overflow: visible !important; }           /* jangan kepotong */
.main-nav .nav-more{ position: relative; z-index: 20000; }
.main-nav .nav-more-btn{ position: relative; }        /* anchor posisi */

.main-nav .nav-more-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;                                      /* default hidden */
  white-space: normal !important;                     /* putus pewarisan nowrap */
  min-width: 220px;
  max-width: min(420px, 90vw);
  max-height: 70vh;                                   /* scroll kalau panjang */
  overflow-y: auto;
  word-break: break-word;
  z-index: 20001;
}

/* saat tombol More aktif */
.main-nav .nav-more.open .nav-more-menu{ display: block; }

/* item di menu: satu kolom */
.main-nav .nav-more-menu a{
  display: block !important;
  margin: 6px 0;
  /* border: 1px solid transparent; */
}

/* ==== LATEST (2 kolom di mobile) ==== */
#latest-list.home-grid{
  display:block !important;
  font-size:0;             /* biar inline-block rapi */
  margin:-8px;
}

/* kartu 2-up */
#latest-list.home-grid .post-card{
  display:inline-block !important;
  vertical-align:top;
  /* width:calc(50% - 16px) !important; */  /* 2 kolom */
  margin:8px !important;
  font-size:16px;                      /* reset font-size 0 dari parent */
}

/* layar sangat kecil, kasih sedikit kelonggaran */
@media (max-width:420px){
  #latest-list.home-grid .post-card{/* width:47% !important; */}
}

/* biar tinggi kartu konsisten */
#latest-list .post-card{ height:100%; }
#latest-list .post-card .media{ aspect-ratio:16/9; overflow:hidden; }
#latest-list .post-card .media img{ width:100%; height:100%; object-fit:cover; display:block; }
#latest-list .post-card .content{ display:flex; flex-direction:column; }
#latest-list .post-card .post-title{
  margin:8px 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#latest-list .post-card .excerpt{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:6px;
  display: none;
  /* height: 262px; */
}

.sp-contact-form {
    background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box;
}

/* === Container Ads: mobile pakai gutters, desktop tanpa padding === */
.container_ads{
  max-width: var(--container);
  margin: 0 auto;
  /* padding-left: var(--gutter-sm); */
  /* padding-right: var(--gutter-sm); */
}

/* tablet: pakai gutters medium */
@media (min-width: 640px){
  .container_ads{
    padding-left: var(--gutter-md);
    padding-right: var(--gutter-md);
  }

  
}

/* desktop: hanya margin auto (tanpa padding) */
@media (min-width: 1024px){
  .container_ads{
    /* padding-left: 0 !important; */
    /* padding-right: 0 !important; */
  }
}

/* Selaraskan .container_ads dengan .container di semua breakpoint */
.container_ads.container_ads{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter-sm) !important;
  padding-right: var(--gutter-sm) !important;
}
@media (min-width:640px){
  .container_ads.container_ads{
    padding-left: var(--gutter-md) !important;
    padding-right: var(--gutter-md) !important;
  }
}
@media (min-width:1024px){
  .container_ads.container_ads{
    padding-left: var(--gutter-lg) !important;  /* tadinya 0 → bikin offside */
    padding-right: var(--gutter-lg) !important;
  }
}

  @media (max-width: 1024px){

    @media (min-width: 640px) {
    .container, .site-container {
        /* padding-left: var(--gutter-md); */
        /* padding-right: var(--gutter-md); */
    }
}


    .hl-hide-mobile { display:none !important; }
  }

  .sp-highlight__inner {
    max-width: 1100px;
    margin: 0 auto;
    /* padding: 0 16px; */
    padding-left: var(--hglight-lg) !important;
    padding-right: var(--hglight-lg) !important;
}

nav.footer-pages a {
    margin: 0 6px;
}


/* Khusus layar <= iPhone 14 Pro Max (430px) */
@media screen and (max-width: 430px) {
  .brand-name {
    font-size: 22px;       /* lebih kecil biar pas */
    letter-spacing: .1px;  /* rapatkan sedikit */
  }
}



/* === ALIGN SECTION PUTIH DENGAN HEADER (FIX OFFSIDE) === */

/* Kontainer putih ikut gutters yang sama dengan .container/.site-container */
.site-container.layout-2col{
  /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */                      /* atau var(--card) */
  /* border:1px solid var(--line); */
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);

  /* PENTING: pakai gutters, bukan 0 */
  padding-left: var(--gutter-sm) !important;
  padding-right: var(--gutter-sm) !important;
  /* padding-top:14px; */
  padding-bottom:14px;
  max-width: var(--container);
  margin: 0 auto;                       /* tetap center */
  box-sizing: border-box;
}

/* Skala gutters sama seperti header */
@media (min-width:640px){
  .site-container.layout-2col{
    /* padding-left: var(--gutter-md) !important; */
    /* padding-right: var(--gutter-md) !important; */
    /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  }
}
@media (min-width:1024px){
  .site-container.layout-2col{
    /* padding-left: var(--gutter-lg) !important; */
    /* padding-right: var(--gutter-lg) !important; */
    /* background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(248 248 248 / 80%)) padding-box, var(--rb-conic) border-box; */
  }
}

/* Nolkan padding kolom biar tidak dobel gutters */
.site-container.layout-2col > .col-main,
.site-container.layout-2col > .col-side{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* === Samakan lebar & gutter konten dengan header === */
:root{
  --container-w: 1100px;   /* samakan dengan header */
  --gutter-x: 16px;        /* mobile */
}
@media (min-width: 640px){ :root{ --gutter-x: 20px; } }
@media (min-width: 1024px){ :root{ --gutter-x: 24px; } }

.site-main > .site-container.layout-2col{
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container-w) + var(--gutter-x)*2);
  margin: 0 auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
  background: #fff;               /* blok putih */
  border-radius: 12px;
}

/* Hindari dobel padding di kolom */
.site-container.layout-2col > .col-main,
.site-container.layout-2col > .col-side{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kalau punya bar iklan di atas konten, samakan juga align-nya */
.container_ads{
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container-w) + var(--gutter-x)*2);
  margin: 0 auto 14px;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}


.post-card .readmore:hover {
    color: var(--muted2);
text-decoration: underline;
}













/* ===== Table: clean, rounded, mobile-friendly (NO JS) ===== */
.post-content table{
  display: block;              /* biar bisa overflow */
  max-width: 100%;
  overflow: auto;              /* horizontal scroll kalau kepanjangan */
  -webkit-overflow-scrolling: touch;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e2e8f0;   /* pakai var(--line) kalau ada */
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

/* scrollbar tipis */
.post-content table::-webkit-scrollbar{ height: 8px; }
.post-content table::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 25%, #cbd5e1);
  border-radius: 999px;
}

.post-content thead th{
  position: sticky; top: 0;    /* header tetap terlihat saat di-scroll */
  text-align: left;
  font-weight: 600;
  letter-spacing: .01em;
  background: color-mix(in srgb, var(--accent) 6%, #f8fafc);
  color: #0f172a;              /* var(--text) kalau ada */
  border-bottom: 1px solid #e2e8f0;
}

.post-content th,
.post-content td{
  padding: 10px 12px;
  vertical-align: middle;
  border-right: 1px solid #eef2f7;
  white-space: nowrap;         /* rapi, pakai scroll kalau sempit */
}
.post-content th:last-child,
.post-content td:last-child{ border-right: 0; }

.post-content tbody tr:nth-child(even){ background:#fbfdff; }
.post-content tbody tr:hover{
  background: color-mix(in srgb, var(--accent) 8%, #f8fafc);
}

/* code kecil dalam sel */
.post-content td code, .post-content th code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
}

/* kecilkan font di layar sempit */
@media (max-width:560px){
  .post-content table{ font-size:14px; }
  .post-content th,.post-content td{ padding:9px 10px; }
}

/* ===== Blockquote: rapi & selaras accent ===== */
.post-content blockquote{
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #f8fafc);
  color: #0f172a;              /* var(--text) kalau ada */
  border-radius: 10px;
}
.post-content blockquote p{ margin: 0.35em 0; }
.post-content blockquote strong{ color: var(--accent); }

/* === FIX: samakan rasio thumb di list card === */
.post-card .media{
  flex: 0 0 220px;            /* tetap */
  aspect-ratio: 16 / 9;       /* kunci proporsi */
  overflow: hidden;           /* crop rapi */
  border-radius: 12px;        /* sesuai style kamu */
}

.post-card .media img{
  /* width: 82%; */
  height: 100%;
  object-fit: cover;          /* isi penuh, tanpa melar */
  display: block;
}

/* (opsional) kalau punya varian small grid */
.post--small .media{
  aspect-ratio: 16 / 9;
}
.post--small .media img{
  width:100%; height:100%; object-fit:cover;
}

/* (opsional) sidebar item biar konsisten kotak */
.sidebar-thumb{
  width:64px; height:64px; overflow:hidden; border-radius:12px;
}
.sidebar-thumb img{
  width:100%; height:100%; object-fit:cover;
}

/* Fallback tanpa aspect-ratio */
.post-card .media{ position:relative; width:220px; height:auto; }
.post-card .media::before{
  content:"";
  display:block;
  padding-top: 56.25%; /* 16:9 */
}
.post-card .media > a, 
.post-card .media > img{
  position:absolute;
  inset:0;
  width: 100%;
  height:100%;
  object-fit:cover;
}


.post-card.post--feature{
  /*display: flex;*/
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  padding: 10px;
}
.post-card.post--feature .media{
  width: 100%;
  aspect-ratio: 16 / 9;       /* kunci proporsi */
  overflow: hidden;
}
.post-card.post--feature .media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card.post--feature .content{
  padding: 12px 12px 14px;
}

figure.easyimage.easyimage-full {
    padding: 0;
    margin: 10px 0;

}

figure.figure {
    padding: 0;
    margin: 10px 0;
}

figcaption {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-style: oblique;
        padding: 4px;
}