/* ====== Design tokens ====== */
:root{
  --gg-bg: #ffffff;
  --gg-text: #111111;
  --gg-muted: #5b6570;
  --gg-border: #e6e8eb;
  --gg-primary: #0066cc;   /* heading */
  --gg-accent:  #f08519;   /* accent */
  --gg-radius: 16px;
  --gg-container: 1100px;
}

/* Global */
#gg-article-wrap.gg-container{
  max-width: var(--gg-container);
  margin: 0 auto;
  padding: 24px 16px 64px;
  background: var(--gg-bg);
  color: var(--gg-text);
  font-family: "Linotype Univers LT Pro", "Univers LT Pro", Arial, sans-serif;
  font-weight: 300; /* body */
  line-height: 1.7;
}

/* Breadcrumbs */
.gg-breadcrumbs { margin: 6px 0 10px; font-size: 14px; color: var(--gg-muted); }
.gg-breadcrumbs a { color: var(--gg-muted); text-decoration: none; }
.gg-breadcrumbs a:hover { color: var(--gg-accent); }

/* Hero */
.gg-hero { margin-top: 6px; margin-bottom: 8px; }
.gg-title{
  font-weight: 700; /* heading */
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.15;
  color: var(--gg-primary);
  letter-spacing: -.2px;
  margin: 4px 0 8px;
}
.gg-meta{ color: var(--gg-muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.gg-dot{ opacity: .6; }

/* Featured image */
.gg-featured{ margin: 18px 0 8px; }
.gg-featured img{ width:100%; height:auto; border-radius: var(--gg-radius); }
.gg-featured figcaption{ color: var(--gg-muted); font-size: 13px; margin-top:6px; }

/* Grid layout */
/**
.gg-grid{
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  margin-top: 10px;
}
@media (max-width: 1024px){
  .gg-grid{ grid-template-columns: 1fr; }
  .gg-aside{ order: -1; }
}
**/
.gg-content, #gg-article {
margin-top: 35px;    
}

/* Content typography */
#gg-article h2, #gg-article h3, #gg-article h4{
  color: var(--gg-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 28px 0 10px;
}
#gg-article h2{ font-size: clamp(22px, 2.4vw, 28px); }
#gg-article h3{ font-size: clamp(19px, 2vw, 22px); }
#gg-article h4{ font-size: 18px; }

#gg-article p{ margin: 0 0 16px; font-size: 17px; }
#gg-article a{ color: var(--gg-primary); text-decoration: underline; text-underline-offset: 2px; }
#gg-article a:hover{ color: var(--gg-accent); }
#gg-article ul, #gg-article ol{ padding-left: 22px; margin: 0 0 16px; }
#gg-article blockquote{
  border-left: 4px solid var(--gg-accent);
  padding: 10px 16px;
  background: #fff7ee;
  border-radius: 10px;
  color: #4a4a4a;
}
#gg-article pre, #gg-article code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
#gg-article pre{
  overflow:auto;
  background:#0f172a;
  color:#e5e7eb;
  padding:14px;
  border-radius:12px;
}
#gg-article table{
  width:100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
}
#gg-article th, #gg-article td{
  border:1px solid var(--gg-border);
  padding:10px 12px;
}
#gg-article th{ background:#f8fafc; }

/* TOC */
.gg-toc{
  position: sticky;
  top: 96px;
  border:1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  padding: 14px 14px 10px;
  background: #F2F3F4;
}
/* ---------- TOC numbering fallback via CSS counters ---------- */
/* Bersifat fallback: jalan walau tidak ada <span class="toc-num"> */
#gg-toc-list { counter-reset: tocH2; }                           /* reset level 1 */

#gg-toc-list > ul > li{
  counter-increment: tocH2;                                      /* 1,2,3,... */
  counter-reset: tocH3;                                          /* reset level 2 */
  position: relative;
  padding-left: 2.2em;                                           /* ruang nomor */
}
#gg-toc-list > ul > li::before{
  content: counter(tocH2) ".";
  position: absolute; left: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gg-accent);
}

#gg-toc-list > ul > li > ul > li{
  counter-increment: tocH3;                                      /* 1.1, 1.2, ... */
  position: relative;
  padding-left: 2.8em;                                           /* ruang nomor sub */
}
#gg-toc-list > ul > li > ul > li::before{
  /* tampilkan 1.1, 1.2: ambil nomor H2 dari parent + nomor H3 */
  content: counter(tocH2) "." counter(tocH3);
  position: absolute; left: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gg-accent);
}

/* Jika nanti <span class="toc-num"> ada (dari JS), pakai itu & nonaktifkan counter */
#gg-toc-list .toc-num { display: inline-block; }                 /* aktifkan nomor dari JS */
#gg-toc-list .toc-num + .toc-text { flex: 1 1 auto; }
#gg-toc-list li.has-jsnum { padding-left: 0; }                   /* hapus padding jika pakai .toc-num */
#gg-toc-list li.has-jsnum::before { content: none !important; }  /* matikan counter */

/* ---------- Perapian & hilangkan duplikasi yang tidak perlu ---------- */
/* Hapus salah satu blok duplikat ini jika ada ganda */
#gg-toc-list a{
  text-decoration: none;
  color: var(--gg-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 0;
  border-left: 0;
  font-size: 14px;
}
#gg-toc-list a:hover{ color: var(--gg-primary); }

/* .lvl-3 tidak dipakai oleh JS baru (pakai .toc-sub). Boleh dihapus. */
#gg-toc-list .lvl-3{ padding-left: 18px; font-size: 13px; }

/* Tetap pertahankan ini untuk struktur sublist */
#gg-toc-list .toc-sub{ margin-top: 4px; padding-left: 16px; }

/* Opsional: rapikan spacing antar item */
#gg-toc-list li{ margin: 6px 0; }

/* tombol toggle full-width, teks kiri — ikon di kanan */
.gg-toc .gg-toc-toggle{
  all: unset;
  display: flex;               /* <-- penting: bikin bisa dorong ikon ke kanan */
  align-items: center;
  width: 100%;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--gg-accent);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 10px 14px;          /* klik area lebih luas */
  box-sizing: border-box;
}

/* ikon ada di ujung kanan */
.gg-toc .gg-toc-toggle::after{
  content: "▾";                /* default: expanded = panah bawah */
  font-size: 20px;
  margin-left: auto;           /* dorong ke paling kanan */
  line-height: 1;
}

/* saat collapsed: pakai panah kanan */
.gg-toc.is-collapsed .gg-toc-toggle::after{
  content: "▸";
  transform: none;
}

/* sembunyikan daftar saat collapsed */
.gg-toc.is-collapsed #gg-toc-list{ display: none; }

/* Tags */
.gg-tags{ margin-top: 8px; color: var(--gg-muted); }

/* Share */
.gg-share{ display:flex; gap:10px; align-items:center; margin-top: 18px; flex-wrap: wrap;}
.gg-btn-share{
  border:1px solid var(--gg-border);
  border-radius: 999px;
  padding: 6px 10px;
  text-decoration:none;
  color: var(--gg-text);
}
.gg-btn-share:hover{ border-color: var(--gg-primary); color: var(--gg-primary); }

/* Author */
.gg-author{
  display:flex; gap:12px; align-items:flex-start;
  border-top:1px solid var(--gg-border);
  padding-top:16px; margin-top:18px;
}
.gg-author-name{ font-weight:700; color: var(--gg-text); }
.gg-author-bio{ color: var(--gg-muted); font-size: 14px; margin-top:4px; }

/* Pagination */
.gg-pages{ margin: 16px 0; }

/* Progress bar */
#gg-progress{
  position: fixed; left:0; top:0; height: 3px; width:0;
  background: linear-gradient(90deg, var(--gg-primary), var(--gg-accent));
  z-index: 9999;
  transition: width .15s ease-out;
}

/* Images in content */
#gg-article img{ max-width:100%; height:auto; border-radius: 12px; }
#gg-article figure{ margin: 0 0 16px; }
#gg-article figcaption{ font-size: 13px; color: var(--gg-muted); margin-top:6px; }

/* Small helpers */
.gg-cats{ color: var(--gg-muted); }

/* Related posts */
.gg-related{ margin-top:28px; padding-top:18px; border-top:1px solid var(--gg-border); }
.gg-related h2{ color:var(--gg-primary); font-weight:700; font-size:22px!important; margin:0 0 12px; }

/* container: default 1 kolom, >=900px jadi 2 kolom */
.gg-rel-list{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
}
@media (min-width:900px){
  .gg-rel-list{ grid-template-columns: repeat(2, 1fr); }
}

/* item: pakai grid agar gambar selalu di kiri/kanan */
.gg-rel-item{
  display:grid !important;
  grid-template-columns: 120px 1fr;
  gap:14px; align-items:center;
  border:1px solid var(--gg-border);
  border-radius:14px; background:#fff;
  padding:12px; transition:border-color .2s ease;
}
.gg-rel-item:hover{ border-color: var(--gg-primary); }

.gg-rel-media{ width:120px; }
.gg-rel-media img{
  display:block; width:100%; height:90px; object-fit:cover; border-radius:12px;
}

/* kalau mau gambar di kanan: class .gg-side-right di wrapper */
.gg-side-right .gg-rel-item{ grid-template-columns: 1fr 120px; }
.gg-side-right .gg-rel-media{ order:2; }
.gg-side-right .gg-rel-body{ order:1; }

.gg-rel-body{ min-width:0; }
.gg-rel-title{ font-weight:700; font-size:16px!important; line-height:1.3; margin:0 0 6px; }
.gg-rel-title a{ text-decoration:none; color:var(--gg-text); }
.gg-rel-title a:hover{ color:var(--gg-primary); }
.gg-rel-meta{ color:var(--gg-muted); font-size:12px!important; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* === Lists inside article === */
#gg-article ul { 
  list-style: disc outside !important;
  margin: 0 0 16px 1.25rem !important;
  padding-left: 0 !important;
}
#gg-article ol { 
  list-style: decimal outside !important;
  margin: 0 0 16px 1.25rem !important;
  padding-left: 0 !important;
}
#gg-article li { margin: 6px 0; }

/* nested lists */
#gg-article ul ul { list-style: circle outside !important; margin-left: 1.25rem; }
#gg-article ul ul ul { list-style: square outside !important; }

/* warna marker */
#gg-article ul li::marker { color: var(--gg-accent); }    /* bullet */
#gg-article ol li::marker { color: var(--gg-accent); font-weight: 700; }

/* list di dalam blockquote */
#gg-article blockquote ul,
#gg-article blockquote ol {
  margin-left: 1rem !important;
}
#gg-article blockquote li::marker { color: var(--gg-accent); }

/* --- Non-sticky ketika TOC sudah inline di bawah .gg-featured --- */
body .gg-toc.gg-toc-inline{
  position: static !important;   /* override sticky */
  top: auto !important;
  bottom: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* === [FIX] Random gambar melebar di mobile === */

/* 1) Izinkan konten menyusut dalam grid (tanpa overflow) */
.gg-grid > * { min-width: 0; }          /* penting untuk Grid */
.gg-content, #gg-article { min-width: 0; }

/* 2) Jamin semua media responsif di area artikel & featured */
#gg-article img,
#gg-article video,
#gg-article iframe,
.gg-featured img {
  max-width: 100% !important;
  height: auto !important;
}

/* 3) Tundukkan inline width/height yang kadang disisipkan plugin/editor */
#gg-article img[style*="width"],
#gg-article img[width]  { width: auto !important; }
#gg-article img[style*="height"],
#gg-article img[height] { height: auto !important; }

/* 4) Rapikan figure & alignment bawaan WP */
#gg-article figure { width: 100%; }
#gg-article img { display: block; }                /* hindari celah baseline */
#gg-article img.aligncenter { margin: 0 auto; }    /* pusatkan jika ada class */