/* ============= SINGLE NEWS ARTICLE ============= */

.article{ background:var(--paper); }
.article__wrap{ max-width:1128px; padding-top:clamp(28px, 4vw, 48px); padding-bottom:clamp(48px, 6vw, 80px); }

/* --- headline --- */
.article__title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  font-variation-settings:"opsz" 144;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--ink-900);
  max-width:20ch;
  margin:18px 0 0;
  padding:0;
  text-wrap:balance;
}

/* --- meta: Masehi + Hijriah date is the signature of the page --- */
.article__meta{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  margin:clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 32px);
}
.article__meta p{ margin:0; padding:0; line-height:1.45; }
.article__date{
  border-left:3px solid var(--gold);
  padding-left:16px !important;
  font-weight:600; color:var(--ink-900); font-size:var(--t-base);
}
.article__hijri{
  display:block;
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:400;
  color:var(--green-800); font-size:var(--t-lg);
  margin-top:2px;
}
.article__byline{ text-align:right; font-size:var(--t-sm); color:var(--ink-500); }
.article__byline span{ color:var(--ink-400); }

/* --- cover --- */
.article__cover{ margin:0; }
.article__cover img{
  width:100%; height:auto; max-height:640px; object-fit:cover;
  border-radius:var(--radius-lg);
  background:var(--paper-2);
}
.article__cover figcaption{ margin-top:10px; font-size:var(--t-sm); color:var(--ink-500); }

/* --- body + rail --- */
.article__layout{
  display:grid; grid-template-columns:minmax(0, 680px) 220px; justify-content:space-between; gap:56px;
  margin-top:clamp(32px, 4vw, 56px);
}
.article__rail .share{ position:sticky; top:108px; display:grid; gap:8px; }
.share__title{ margin:0 0 6px; padding:0; font-size:var(--t-sm); font-weight:600; color:var(--ink-700); }
.dulido .share__btn{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 14px;
  border:1px solid var(--ink-100); border-radius:10px; background:var(--white);
  color:var(--ink-700); font-size:var(--t-sm); font-weight:500; line-height:1.2; text-align:left;
  transition:border-color .15s, color .15s;
}
.dulido .share__btn:hover{ border-color:var(--ink-300); color:var(--ink-900); }
.dulido .share__btn svg{ width:18px; height:18px; flex-shrink:0; }
.dulido .share__btn--wa{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.dulido .share__btn--wa:hover{ background:var(--green-800); border-color:var(--green-800); color:#fff; }

/* --- article typography (block content) --- */
/* Divi's customizer forces its body font on p/li; reclaim it inside the article */
.article__body, .article__body p, .article__body li, .article__body td, .article__body th{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}
.article__body{ font-size:1.0625rem; line-height:1.75; color:var(--ink-700); overflow-wrap:break-word; }
.article__body > *{ margin:0 0 1.25em; }
.article__body > p:first-child{ font-size:1.2rem; line-height:1.65; color:var(--ink-900); }
.article__body p{ padding:0; }
.dulido .article__body a:not(.wp-block-button__link){
  color:var(--green-700);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.dulido .article__body a:not(.wp-block-button__link):hover{ color:var(--green-900); }
.article__body strong, .article__body b{ color:var(--ink-900); font-weight:700; }

.article__body h2, .article__body h3, .article__body h4{
  font-family:'Fraunces', Georgia, serif; font-weight:600; color:var(--ink-900);
  letter-spacing:-.01em; line-height:1.2; padding:0;
  margin:1.8em 0 .6em;
}
.article__body h2{ font-size:1.75rem; }
.article__body h3{ font-size:1.375rem; }
.article__body h4{ font-size:1.125rem; }
.article__body h1{ font-family:'Fraunces', Georgia, serif; font-size:2rem; line-height:1.15; font-weight:500; padding:0; }

.article__body ul, .article__body ol{ padding-left:1.4em; }
.article__body ul{ list-style:disc; }
.article__body ol{ list-style:decimal; }
.article__body li{ margin:.35em 0; padding-left:.2em; }
.article__body li::marker{ color:var(--green-700); font-weight:600; }
.article__body li > ul, .article__body li > ol{ margin:.35em 0; }

.article__body blockquote,
.article__body .wp-block-quote{
  margin:1.8em 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--gold);
  font-family:'Fraunces', Georgia, serif; font-size:1.25rem; line-height:1.55; color:var(--ink-900);
}
.article__body blockquote > *:last-child{ margin-bottom:0; }
.article__body blockquote cite{ display:block; margin-top:8px; font-family:'Plus Jakarta Sans', sans-serif; font-size:var(--t-sm); font-style:normal; color:var(--ink-500); }

.article__body img{ height:auto; border-radius:var(--radius); }
.article__body figure{ margin-left:0; margin-right:0; }
.article__body figcaption,
.article__body .wp-element-caption{ margin-top:8px; font-size:var(--t-sm); color:var(--ink-500); text-align:left; }
.article__body .alignright{ float:right; margin:.3em 0 1em 1.5em; max-width:45%; }
.article__body .alignleft{ float:left; margin:.3em 1.5em 1em 0; max-width:45%; }
.article__body::after{ content:""; display:table; clear:both; }
.article__body .wp-block-image.aligncenter img,
.article__body .aligncenter{ margin-left:auto; margin-right:auto; }

.article__body hr,
.article__body .wp-block-separator{
  border:0; height:1px; background:var(--ink-200); width:100%; margin:2.4em 0;
}

.article__body table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); line-height:1.5; }
.article__body th, .article__body td{ border:1px solid var(--ink-200); padding:8px 10px; text-align:left; vertical-align:top; }
.article__body thead th, .article__body tr:first-child td strong{ color:var(--ink-900); }
.article__body .wp-block-table, .article__body figure:has(table){ overflow-x:auto; }

.article__body .wp-block-details{
  border:1px solid var(--ink-200); border-radius:var(--radius); padding:14px 18px; background:var(--white);
}
.article__body .wp-block-details summary{ cursor:pointer; font-weight:600; color:var(--ink-900); }
.article__body .wp-block-details[open] summary{ margin-bottom:.6em; }

.article__body .wp-block-embed__wrapper{ position:relative; }
.article__body .wp-has-aspect-ratio .wp-block-embed__wrapper{ aspect-ratio:16 / 9; }
.article__body .wp-has-aspect-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border-radius:var(--radius); }
.article__body video{ width:100%; border-radius:var(--radius); }

.article__body .wp-block-buttons{ display:flex; flex-wrap:wrap; gap:10px; }
.dulido .article__body .wp-block-button__link{
  display:inline-flex; padding:11px 20px; border-radius:var(--radius-pill);
  background:var(--primary); color:#fff; font-weight:600; font-size:.95rem; line-height:1.2; text-decoration:none;
}
.dulido .article__body .wp-block-button__link:hover{ background:var(--primary-dark); color:#fff; }

.article__body .wp-block-columns{ display:flex; gap:24px; }
.article__body .wp-block-column{ flex:1; min-width:0; }
.article__body .wp-block-column > *:last-child{ margin-bottom:0; }
.article__body .wp-block-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.article__body .wp-block-gallery figure{ margin:0; }

/* Divi's reset strips list bullets and paragraph spacing; tags sit back at the base */
.article__tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none !important; padding:0 !important; margin-top:2.4em !important; }
.article__tags li{ margin:0; padding:0; }
.article__tags li::marker{ content:none; }
.dulido .article__tags a{
  display:inline-block; padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--green-50); color:var(--green-800) !important; text-decoration:none !important; font-size:var(--t-sm);
}

/* --- pages: single column, wider than an article for tables/columns --- */
/* Page layouts follow Divi's per-page "Tata Letak Halaman" setting */
.article__layout--page{ grid-template-columns:minmax(0, 1fr); }
.is-sidebar-right .article__layout--page{ grid-template-columns:minmax(0, 720px) 300px; }
.is-sidebar-left .article__layout--page{ grid-template-columns:300px minmax(0, 720px); }
.is-sidebar-left .article__sidebar{ order:-1; }
/* no sidebar: one centred reading column, so nothing sits empty on the right */
.is-centered .article__wrap > *:not(.article__cover){ max-width:820px; margin-left:auto; margin-right:auto; }
.is-centered .article__title{ max-width:820px; }

.article__sidebar{ font-size:var(--t-sm); }
.article__sidebar h2, .article__sidebar .widgettitle{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.25rem; color:var(--ink-900); margin:0 0 12px; padding:0;
}
.article__sidebar .wp-block-latest-posts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-200); }
.article__sidebar .wp-block-latest-posts li{
  display:grid; grid-template-columns:72px minmax(0, 1fr); column-gap:14px; align-items:start;
  margin:0; padding:14px 0; border-bottom:1px solid var(--ink-200);
}
.article__sidebar .wp-block-latest-posts__featured-image{ grid-row:span 3; margin:0 !important; float:none !important; }
.article__sidebar .wp-block-latest-posts__featured-image img{
  width:72px !important; height:72px !important; max-width:none; object-fit:cover; border-radius:10px;
}
.dulido .article__sidebar .wp-block-latest-posts__post-title{
  font-family:'Fraunces', Georgia, serif; font-size:1rem; line-height:1.3; color:var(--ink-900);
}
.dulido .article__sidebar .wp-block-latest-posts__post-title:hover{ color:var(--green-700); }
.article__sidebar .wp-block-latest-posts__post-author,
.article__sidebar .wp-block-latest-posts__post-date{ display:block; margin-top:4px; font-size:.8rem; color:var(--ink-500); }
.article__sidebar .wp-block-latest-posts__post-excerpt{ display:none; }
/* page covers are often posters/screenshots: show them whole instead of cropping */
.article--page .article__cover img{ object-fit:contain; max-height:720px; }
.article__date-k{ display:block; font-size:var(--t-sm); font-weight:500; color:var(--ink-500); }
.article__children{
  max-width:760px; margin-top:clamp(40px, 5vw, 64px); padding-top:28px; border-top:1px solid var(--ink-100);
}
.article__children h2{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.5rem; color:var(--ink-900); margin:0 0 16px; padding:0;
}
.article__children ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.dulido .article__children a{
  display:block; padding:14px 16px; border:1px solid var(--ink-100); border-radius:10px; background:var(--white);
  color:var(--ink-900); font-weight:500; line-height:1.35;
}
.dulido .article__children a:hover{ border-color:var(--green-500); color:var(--green-700); }

/* --- prev / next --- */
.article__adjacent{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:clamp(48px, 6vw, 72px); padding-top:28px; border-top:1px solid var(--ink-100);
}
.dulido .adj{ display:block; padding:4px 0; color:var(--ink-900); }
.adj--next{ grid-column:2; text-align:right; }
.adj__dir{ display:block; font-size:var(--t-sm); color:var(--ink-500); margin-bottom:6px; }
.adj__title{
  display:block; font-family:'Fraunces', Georgia, serif; font-size:1.15rem; line-height:1.3; font-weight:500;
  text-wrap:balance; transition:color .15s;
}
.dulido .adj:hover .adj__title{ color:var(--primary); }

/* --- comments (core html5 markup from comments.php) --- */
.article__comments{ max-width:680px; margin-top:clamp(40px, 5vw, 64px); }
.article__comments .comments-title,
.article__comments .comment-reply-title{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.5rem; line-height:1.2;
  color:var(--ink-900); padding:0; margin:0 0 20px;
}
.article__comments .comment-reply-title small{ margin-left:10px; font-family:'Plus Jakarta Sans', sans-serif; font-size:var(--t-sm); }
.article__comments .commentlist{ list-style:none; margin:0; padding:0; }
.article__comments .commentlist .children{ list-style:none; margin:0; padding:0 0 0 28px; border-left:2px solid var(--green-100); }
.article__comments .comment-body{ padding:18px 0; border-bottom:1px solid var(--ink-100); }
.article__comments .comment-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:var(--t-sm); line-height:1.4; color:var(--ink-500); }
.article__comments .comment-author{ display:flex; align-items:center; gap:12px; }
.article__comments .comment-author .avatar{ width:40px; height:40px; border-radius:50%; display:block; }
.article__comments .comment-author .fn{ font-weight:600; color:var(--ink-900); }
.article__comments .says{ display:none; }
.article__comments .comment-metadata a{ color:inherit; }
.article__comments .comment-awaiting-moderation{ flex-basis:100%; font-style:italic; }
.article__comments .comment-content,
.article__comments .reply{ margin-left:52px; }
.article__comments .comment-content{ font-size:.95rem; line-height:1.6; color:var(--ink-700); }
.article__comments .comment-content p{ margin:6px 0 0; text-align:start; }
.article__comments .reply{ margin-top:6px; }
.article__comments .comment-reply-link{ font-size:var(--t-sm); font-weight:600; color:var(--green-700); }
.article__comments .comment-reply-link:hover{ color:var(--green-900); }

.article__comments .comment-respond{ margin-top:36px; }
.article__comments .comment-form{ display:grid; gap:14px; }
.article__comments .comment-form p{ margin:0; }
.article__comments .comment-notes{ font-size:var(--t-sm); color:var(--ink-500); }
.article__comments .comment-form label{ display:block; margin-bottom:6px; font-size:var(--t-sm); font-weight:600; color:var(--ink-700); }
.article__comments .comment-form input[type="text"],
.article__comments .comment-form input[type="email"],
.article__comments .comment-form input[type="url"],
.article__comments .comment-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--ink-200); border-radius:10px;
  background:var(--white); color:var(--ink-900); font:inherit; font-size:1rem;
}
.article__comments .comment-form-cookies-consent{ display:flex; gap:8px; align-items:flex-start; font-size:var(--t-sm); }
.article__comments .comment-form-cookies-consent label{ font-weight:400; margin:0; }
.article__comments .form-submit .submit{
  padding:12px 24px; border:0; border-radius:var(--radius-pill);
  background:var(--primary); color:#fff; font:inherit; font-weight:600; line-height:1.2; cursor:pointer;
}
.article__comments .form-submit .submit:hover{ background:var(--primary-dark); }

/* --- related --- */
.article__related{ padding:clamp(56px, 7vw, 96px) 0; background:var(--paper-2); }
.article__related .section-title{ margin-bottom:clamp(24px, 3vw, 36px); }

@media (max-width: 960px){
  .article__layout,
  .article--page .article__layout--page{ grid-template-columns:minmax(0, 1fr); gap:32px; }
  .is-sidebar-left .article__sidebar{ order:0; }
  .article__rail .share{ position:static; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .share__title{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .article__byline{ text-align:left; }
  /* justified text on a narrow column opens big gaps between words */
  .article__body [style*="justify"],
  .article__body .has-text-align-justify{ text-align:left !important; }
  .article__body .wp-block-columns{ flex-direction:column; }
  .article__rail .share{ grid-template-columns:1fr; }
  .article__adjacent{ grid-template-columns:1fr; }
  .adj--next{ grid-column:auto; text-align:left; }
}