/*
 * Halaman berita & artikel (daftar, kategori, tag, pencarian, detail).
 * Melengkapi kelas tema Junastheme (bloggrid.html / blogdetail.html) di style.css.
 */

/* ---------- Toolbar daftar: kategori + pencarian ---------- */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--stoke-color);
  border-radius: 999px;
  background: #fff;
  color: var(--heading-color);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.blog-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.blog-chip.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.blog-search { position: relative; flex: 0 1 300px; min-width: 220px; }
.blog-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 48px 10px 16px;
  border: 1px solid var(--stoke-color);
  border-radius: 999px;
  background: #fff;
}
.blog-search input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.blog-search button {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--primary-color); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.blog-intro { margin: -12px 0 24px; color: var(--text-color); }
.blog-empty { padding: 56px 16px; text-align: center; border: 1px dashed var(--stoke-color); border-radius: 16px; }

/* ---------- Kartu artikel (flat-blog-item style-1) ---------- */
.blog-page .flat-blog-item { position: relative; }
.blog-page .flat-blog-item .img-style img { width: 100%; object-fit: cover; }
.blog-page .flat-blog-item .name { margin: 0; }
/* Seluruh kartu bisa diklik lewat tautan judul */
.blog-page .flat-blog-item .name .link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.blog-page .flat-blog-item:focus-within { outline: 3px solid var(--primary-color); outline-offset: 3px; border-radius: 16px; }
.blog-page .flat-blog-item .name .link:focus { outline: none; }

/* ---------- Paginasi ---------- */
.wd-navigation .nav-item.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Detail artikel ---------- */
/* style.css memaksa .row { margin: -20px !important } -> halaman bergeser 5px; pakai gutter 24px */
.blog-detail-row { margin-left: -12px !important; margin-right: -12px !important; row-gap: 0; }
.blog-detail-row > * { padding-left: 12px !important; padding-right: 12px !important; }
@media (min-width: 992px) { .blog-detail-row > .col-lg-8 { padding-right: 36px !important; } }
.blog-page .tf-btn-link { color: var(--primary-color); font-weight: 600; }
.blog-detail-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.blog-detail-cats .blog-chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.blog-detail-title { margin: 0 0 16px; line-height: 1.25; overflow-wrap: anywhere; }
.blog-detail-page .meta-blog { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.blog-detail-page .meta-blog .item { display: flex; align-items: center; gap: 6px; }
.blog-detail-page .meta-blog .icon { width: 16px; height: 16px; opacity: .7; }
.blog-detail-page .meta-blog a:hover { color: var(--primary-color) !important; }
.blog-detail-page .bb-1 { border-bottom: 1px solid var(--stoke-color); }
.blog-lead { font-size: 18px; line-height: 1.7; color: var(--heading-color); font-weight: 500; margin-bottom: 24px; }
.blog-cover { position: relative; margin: 0 0 32px; border-radius: 16px; overflow: hidden; background: #F4F1F2; }
.blog-cover img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
/* Poster portrait tidak dipotong; sisi kosong diisi latar lembut */
.blog-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--primary-color);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.blog-play svg { width: 30px; height: 30px; margin-left: 4px; }
.blog-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.blog-detail-page .blog-richtext { font-size: 16px; }
.blog-detail-page .blog-richtext p { margin-bottom: 0; }
.blog-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.blog-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #F4F1F2; }
.blog-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-gallery a:hover img { transform: scale(1.05); }

.blog-tag-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; border-bottom: 1px solid var(--stoke-color);
}
.blog-tags, .blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-tag-share .label { font-weight: 600; color: var(--heading-color); margin-right: 4px; }
.blog-tags .tag-item {
  display: inline-flex; padding: 6px 14px; border: 1px solid var(--stoke-color); border-radius: 999px;
  font-size: 14px; color: var(--heading-color);
}
.blog-tags .tag-item:hover { border-color: var(--primary-color); color: var(--primary-color); }
.blog-share a, .blog-share button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--stoke-color);
  background: #fff; color: var(--heading-color);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.blog-share svg { width: 18px; height: 18px; }
.blog-share a:hover, .blog-share button:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.blog-share .blog-copy.is-done { background: #1F7A3D; border-color: #1F7A3D; color: #fff; }

.blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--stoke-color); }
.blog-prevnext a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--stoke-color); border-radius: 12px; }
.blog-prevnext a:hover { border-color: var(--primary-color); }
.blog-prevnext .next { text-align: right; }
.blog-prevnext .dir { font-size: 13px; font-weight: 600; color: var(--primary-color); }
.blog-prevnext .t { font-weight: 600; color: var(--heading-color); line-height: 1.4; }

.blog-locked { padding: 40px 24px; text-align: center; border: 1px dashed var(--stoke-color); border-radius: 16px; }

/* ---------- Komentar ---------- */
.blog-comments { padding-top: 32px; }
.blog-comments h2 { margin-bottom: 20px; }
.blog-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.blog-comments .comment-list > li { padding: 16px 0; border-bottom: 1px solid var(--stoke-color); }
.blog-comments .comment-list > li.has-children { padding-left: 56px; }
.blog-comments .single-comment-wrap { display: flex; gap: 16px; }
.blog-comments .single-comment-wrap .thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #F4F1F2; }
.blog-comments .single-comment-wrap .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-comments .single-comment-wrap .content { flex: 1; min-width: 0; }
.blog-comments .content-top { display: flex; justify-content: space-between; gap: 12px; }
.blog-comments .content-top .title { font-size: 16px; margin: 0; }
.blog-comments .post-meta { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; color: var(--text-color); }
.blog-comments .post-meta a { color: inherit; pointer-events: none; }
.blog-comments .comment { margin: 8px 0 0; color: var(--text-color); overflow-wrap: anywhere; }
.blog-comments .reply-btn { font-size: 14px; font-weight: 600; color: var(--primary-color); white-space: nowrap; }
.blog-comment-form { margin-top: 24px; }
.blog-comment-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--stoke-color); border-radius: 12px; resize: vertical; }
.blog-comment-form textarea:focus { outline: none; border-color: var(--primary-color); }
.blog-comment-login {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 24px; padding: 20px; border-radius: 12px; background: var(--secondary-color);
}

/* ---------- Sidebar ---------- */
.blog-sidebar-sticky { position: sticky; top: 110px; }
.sidebar-blog > * + * { margin-top: 32px; }
.sidebar-blog .search-box { position: relative; }
.sidebar-blog .search-field { width: 100%; min-height: 44px; padding: 10px 16px 10px 44px; border: 1px solid var(--stoke-color); border-radius: 999px; }
.sidebar-blog .search-field:focus { outline: none; border-color: var(--primary-color); }
/* Ikon cari di kiri seperti tema (pos-1); tombol jangan ikut melebar */
.sidebar-blog .search-box button { position: absolute; top: 50%; left: 16px; right: auto; width: auto; height: auto; transform: translateY(-50%); border: 0; background: none; color: var(--text-color); padding: 0; }
.sidebar-blog .search-field { text-align: left; }
.sidebar-blog .categories ul, .sidebar-blog .recent ul, .sidebar-blog .tag ul { list-style: none; margin: 12px 0 0; padding: 0; }
.sidebar-blog .categories-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--stoke-color); color: var(--heading-color); font-weight: 500; }
.sidebar-blog .categories-item span:last-child { color: var(--text-color); font-weight: 400; }
.sidebar-blog .categories-item:hover span:first-child { color: var(--primary-color); }
.sidebar-blog .recent-post-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stoke-color); }
.sidebar-blog .recent-post-item .img-style { flex-shrink: 0; width: 88px; height: 64px; border-radius: 10px; overflow: hidden; }
.sidebar-blog .recent-post-item .img-style img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-blog .recent-post-item .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--heading-color); }
.sidebar-blog .recent-post-item .subtitle { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text-color); }
.sidebar-blog .recent-post-item .subtitle .icon { width: 14px; height: 14px; opacity: .7; }
.sidebar-blog .tag ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-blog .tag-item { display: inline-flex; padding: 6px 14px; border: 1px solid var(--stoke-color); border-radius: 999px; font-size: 14px; color: var(--heading-color); }
.sidebar-blog .tag-item:hover { border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 991px) {
  .blog-sidebar-sticky { position: static; margin-top: 48px; }
}
@media (max-width: 767px) {
  .blog-search { flex: 1 1 100%; }
  .blog-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-prevnext { grid-template-columns: 1fr; }
  .blog-prevnext .next { text-align: left; }
  .blog-lead { font-size: 16px; }
  .blog-comments .comment-list > li.has-children { padding-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-gallery img, .blog-play, .blog-chip { transition: none; }
}

/* ---------- Widget sidebar dari admin (render_frontend_sidebar 'blog', markup tema lama) ---------- */
.blog-widgets .widget { margin: 0; }
.blog-widgets > .widget + .widget { margin-top: 32px; }
.blog-widgets .wow { visibility: visible !important; animation: none !important; }
.blog-widgets .widget-title { margin: 0 0 12px; font-size: 18px; line-height: 1.3; color: var(--heading-color); }

/* Cari */
.blog-widgets .search-form { position: relative; display: flex; }
.blog-widgets .search-form .form-group { flex: 1; margin: 0; }
.blog-widgets .search-form .form-control {
  width: 100%; min-height: 44px; padding: 10px 48px 10px 16px;
  border: 1px solid var(--stoke-color); border-radius: 999px; background: #fff; box-shadow: none;
}
.blog-widgets .search-form .form-control:focus { outline: none; border-color: var(--primary-color); }
.blog-widgets .search-form .form-btn-1 {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--primary-color); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}

/* Profil / tentang */
.blog-widgets .about-author { padding: 20px; border: 1px solid var(--stoke-color); border-radius: 16px; text-align: center; }
.blog-widgets .about-author .single-img img { display: block; max-width: 140px; max-height: 160px; width: auto; height: auto; margin: 4px auto 16px; object-fit: contain; }
.blog-widgets .about-author .content .title { margin: 0 0 6px; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.blog-widgets .about-author .content .title a { color: var(--heading-color); }
.blog-widgets .about-author .info { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-color); }
.blog-widgets .social-link-list { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.blog-widgets .social-link-list a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--stoke-color);
  display: flex; align-items: center; justify-content: center; color: var(--heading-color); font-size: 18px;
}
.blog-widgets .social-link-list a:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
/* Tautan sosial yang belum diisi admin (href="#") disembunyikan agar tidak menipu pengunjung */
.blog-widgets .social-link-list li:has(a[href="#"]) { display: none; }

/* Kategori */
.blog-widgets .widget-category .list { margin: 0; padding: 0; list-style: none; }
.blog-widgets .widget-category .list a {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--stoke-color); color: var(--heading-color); font-weight: 500;
}
.blog-widgets .widget-category .list a .number { color: var(--text-color); font-weight: 400; }
.blog-widgets .widget-category .list a:hover .name { color: var(--primary-color); }

/* Banner */
.blog-widgets .add-banner-y a, .blog-widgets .add-banner-y img { display: block; width: 100%; }
.blog-widgets .add-banner-y { padding: 16px; border: 1px solid var(--stoke-color); border-radius: 16px; }
.blog-widgets .add-banner-y img { width: auto; max-width: 100%; max-height: 220px; margin: 0 auto; object-fit: contain; }

/* Voting */
.blog-widgets .widget-poll { padding: 20px; border: 1px solid var(--stoke-color); border-radius: 16px; }
.blog-widgets .widget-poll .list { margin: 0; padding: 0; list-style: none; }
.blog-widgets .widget-poll #qs { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--heading-color); }
.blog-widgets .widget-poll #total_vote { font-size: 13px; color: var(--text-color) !important; margin: 0 0 8px; }
.blog-widgets .widget-poll .vote_item label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0; cursor: pointer; color: var(--heading-color); }
.blog-widgets .widget-poll .poll_radio { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-color); }
.blog-widgets .widget-poll .progress { height: auto; min-height: 30px; margin-top: 8px !important; border-radius: 8px; background: #F4F1F2; overflow: hidden; }
.blog-widgets .widget-poll .progress-bar { justify-content: center; padding: 6px 10px; text-align: left; white-space: nowrap; color: #24272C; font-size: 13px; }
.blog-widgets .widget-poll .form-group { margin-top: 10px; }
.blog-widgets .widget-poll .form-control { width: 100%; min-height: 42px; padding: 8px 14px; border: 1px solid var(--stoke-color); border-radius: 10px; }
.blog-widgets .vote-button-content { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.blog-widgets .vote-button-content .btn {
  min-height: 40px; padding: 8px 18px; border: 0; border-radius: 10px;
  background: var(--primary-color); color: #fff; font-weight: 600;
}
.blog-widgets .vote-button-content a { font-size: 14px; font-weight: 600; color: var(--primary-color); }