/* ==========================================================================
   Blog listing + article detail.
   Sebelumnya halaman blog memakai markup/CSS ".team_section" (dirancang
   untuk kartu anggota tim: foto bundar 220px + ikon sosial di latar navy),
   jadi thumbnail artikel tampil terpotong bundar di atas kartu gelap yang
   tidak konsisten dengan tema terang di halaman lain. File ini menggantinya
   dengan tampilan kartu blog & tipografi artikel yang sesuai.
   ========================================================================== */

:root {
  --blog-accent: #00bbf0;
  --blog-navy: #00204a;
  --blog-text: #3b3b3b;
  --blog-muted: #767676;
  --blog-border: #ececec;
  --blog-card-bg: #ffffff;
}

/* ---- Listing section ---- */
.blog_section {
  background-color: #ffffff;
}

.blog_section .heading_container p {
  color: var(--blog-muted);
}

/* ---- Article title header (halaman detail) ---- */
.article-header {
  padding: 55px 0 15px;
}

.article-header h2 span {
  color: var(--blog-navy);
}

.blog-grid {
  margin-top: 10px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 30px;
  box-shadow: 0 2px 10px rgba(0, 32, 74, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 32, 74, 0.12);
}

.blog-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #f1f5f9;
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.blog-card:hover .blog-card__thumb img {
  transform: scale(1.05);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
  text-align: left;
}

.blog-card__meta {
  font-size: 13px;
  color: var(--blog-muted);
  margin-bottom: 8px;
}

.blog-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--blog-navy);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--blog-accent);
}

.blog-card__excerpt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--blog-text);
  margin-bottom: 16px;
  flex: 1;
}

.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blog-accent);
  text-decoration: none;
  margin-top: auto;
}

.blog-card__cta:hover {
  color: var(--blog-navy);
}

.blog-card__cta i {
  transition: transform 0.2s ease;
}

.blog-card__cta:hover i {
  transform: translateX(3px);
}

.blog-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--blog-muted);
}

/* ---- Pagination ---- */
.blog-pagination {
  margin-top: 40px;
}

.blog-pagination .page-link {
  color: var(--blog-navy);
  border-color: var(--blog-border);
}

.blog-pagination .page-item.active .page-link {
  background-color: var(--blog-accent);
  border-color: var(--blog-accent);
  color: #ffffff;
}

.blog-pagination .page-link:hover {
  color: var(--blog-accent);
}

/* ---- Article detail ---- */
.article-hero {
  max-width: 900px;
  margin: 0 auto 10px;
  padding: 0 15px;
}

.article-hero img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.article-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--blog-muted);
  font-size: 14px;
  margin-top: 10px;
}

.article-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.article-meta-row i {
  color: var(--blog-accent);
}

.contents {
  padding: 40px 0 10px;
}

.article-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
  color: var(--blog-text);
  font-size: 16.5px;
  line-height: 1.85;
  word-break: break-word;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5 {
  color: var(--blog-navy);
  font-weight: 700;
  margin-top: 36px;
  margin-bottom: 14px;
  line-height: 1.35;
}

.article-content h2 { font-size: 26px; }
.article-content h3 {
  font-size: 21px;
  padding-left: 14px;
  border-left: 4px solid var(--blog-accent);
}
.article-content h4 { font-size: 18px; }

.article-content p {
  margin-bottom: 18px;
}

.article-content a {
  color: var(--blog-accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 187, 240, 0.4);
}

.article-content a:hover {
  color: var(--blog-navy);
}

.article-content ul,
.article-content ol {
  margin-bottom: 18px;
  padding-left: 24px;
}

.article-content li {
  margin-bottom: 8px;
}

.article-content ul li::marker {
  color: var(--blog-accent);
}

.article-content blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  background: #f8fbff;
  border-left: 4px solid var(--blog-accent);
  color: var(--blog-navy);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 0;
}

.article-content table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.article-content table td,
.article-content table th {
  border: 1px solid var(--blog-border);
  padding: 8px 12px;
}

.article-content .adsbygoogle {
  margin: 28px auto !important;
}

/* ---- Prev / next pager ---- */
.article-pager {
  max-width: 900px;
  margin: 10px auto 0;
  padding: 0 15px 50px;
}

.article-pager .flexBox {
  display: flex;
  gap: 16px;
  background: none;
  padding: 0;
  list-style: none;
  margin: 0;
}

.article-pager .xbg-pager-bottom {
  flex: 1;
  background: #f8f9fb;
  border: 1px solid var(--blog-border);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: var(--blog-navy);
  box-sizing: border-box;
}

.article-pager .xbg-pager-home {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-pager .textPageTitle {
  color: var(--blog-navy);
  text-decoration: none;
  font-weight: 600;
  display: block;
}

.article-pager .textPageTitle:hover {
  color: var(--blog-accent);
}

.article-pager .newPageSubTitle,
.article-pager .oldPageSubTitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blog-muted);
  margin: 0 0 6px;
}

.article-pager .newPageTitle {
  font-size: 15px;
  margin: 0;
  line-height: 1.4;
}

.article-pager .xbg-pager-home .textPageTitle {
  background: var(--blog-navy);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  white-space: nowrap;
}

.article-pager .xbg-pager-home .textPageTitle:hover {
  background: var(--blog-accent);
}

@media (max-width: 768px) {
  .article-pager .flexBox {
    flex-direction: column;
  }
}

/* ---- Sel iklan In-feed di dalam grid daftar blog ----
   Unit fluid/in-feed runtuh jadi tinggi 0 kalau AdSense tidak punya iklan
   yang cocok (data-ad-status="unfilled"). Tanpa aturan di bawah, selnya
   tetap diregangkan setinggi kartu lain dan menyisakan kotak kosong di
   tengah grid. */
.blog-card--ad {
  justify-content: center;
  padding: 10px;
  box-shadow: none;
}

.blog-card--ad:hover {
  transform: none;
  box-shadow: none;
}

.blog-card--ad .adsbygoogle {
  width: 100%;
}