/* Post engagement: views and moderated comments. */
.comments-section{margin-top:72px;padding-top:42px;border-top:1px solid var(--line)}
.comments-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.comments-heading h2{margin:3px 0 0;font:700 clamp(32.5px,4vw,43.5px)/1.08 var(--serif);letter-spacing:-.035em}
.comment-total{font-size:13.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--card)}
.comments-list{display:grid;gap:14px}
.comment-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.comment-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#dff2e2,#dceff5);color:#3f7950;font-weight:800;text-transform:uppercase}
.comment-avatar svg,.comment-avatar img{display:block;width:100%;height:100%}
.comment-content{min-width:0}.comment-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:7px}.comment-meta strong{font-size:16px}.comment-meta span{font-size:12.5px;color:var(--muted)}
.comment-content p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);font:17.5px/1.72 var(--serif)}
.comments-empty,.comments-disabled{padding:20px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);background:color-mix(in srgb,var(--card) 72%,transparent);font-size:16px}
.comment-form{margin-top:28px;padding:24px;border:1px solid rgba(79,148,98,.16);border-radius:18px;background:linear-gradient(145deg,rgba(239,247,239,.72),rgba(220,239,245,.42))}
html[data-theme="dark"] .comment-form{background:var(--paper-2)}
.comment-form-head h3{margin:0;font:700 26px var(--serif)}.comment-form-head p{margin:7px 0 20px;color:var(--muted);font-size:15px;line-height:1.6}
.comment-form-grid{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:14px}.comment-field{display:grid;gap:7px}.comment-field-wide{grid-column:1/-1}.comment-field span{font-size:13.5px;font-weight:800}
.comment-field input,.comment-field textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);padding:11px 12px;outline:none;font:16px/1.6 var(--sans)}
.comment-field textarea{resize:vertical;min-height:130px}.comment-field input:focus,.comment-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.comment-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.comment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}.comment-form-footer p{margin:0;color:var(--muted);font-size:12.5px}.comment-form-footer button:disabled{opacity:.55;cursor:wait}
.comment-form-status{min-height:18px;margin-top:12px;font-size:15px;color:var(--muted)}.comment-form-status.success{color:#2f7250}.comment-form-status.error{color:#a13f37}
.article-meta b{font-weight:700;color:var(--ink)}

/* ---------------------------------------------------------------------------
 * CAPTCHA bergambar pada formulir komentar
 *
 * SVG-nya disisipkan sebagai elemen, bukan lewat <img src="data:...">, supaya
 * goresannya memakai stroke="currentColor" dan ikut warna tema. Lewat <img>,
 * SVG terisolasi dari CSS halaman dan akan hitam di atas latar gelap.
 * ------------------------------------------------------------------------- */
.comment-captcha { margin-top: 16px; display: grid; gap: 8px; }
.comment-field-label { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
.cap-baris { display: flex; align-items: center; gap: 9px; }
.cap-kotak {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  padding: 4px 8px;
  display: grid;
  place-items: center;
  color: var(--ink);
  /* Menyulitkan penyalinan gambar dengan seret-lepas. Bukan penghalang nyata,
     tetapi membuang kemudahan yang tidak perlu ada. */
  user-select: none;
  -webkit-user-select: none;
}
/* viewBox-nya 210x74. Batas tinggi dinaikkan agar gambarnya memenuhi kotak dan
   goresannya cukup tebal untuk dibaca — pada ukuran aslinya, huruf yang mirip
   jadi sulit dibedakan. */
.cap-kotak svg { display: block; width: 100%; height: auto; max-height: 118px; }
.cap-memuat { font-size: 13.5px; color: var(--muted); padding: 22px 0; }
.cap-ulang {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 19.5px;
  line-height: 1;
}
.cap-ulang:hover { border-color: var(--accent); color: var(--accent); }
.cap-isian {
  max-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font: 700 18.5px/1 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-align: center;
}
.cap-isian::placeholder {
  letter-spacing: normal; text-transform: none; font-weight: 400; font-size: 16px;
}

@media(max-width:620px){
  .cap-kotak { max-width: none; }
  .cap-isian { max-width: none; }
}

@media(max-width:620px){
  .comments-section{margin-top:52px;padding-top:32px}.comments-heading{align-items:start}.comment-total{white-space:nowrap}.comment-card{grid-template-columns:34px minmax(0,1fr);padding:14px}.comment-avatar{width:34px;height:34px}.comment-form{padding:18px}.comment-form-grid{grid-template-columns:1fr}.comment-form-footer{align-items:flex-start;flex-direction:column}.comment-form-footer button{width:100%}
}


/* ---------------------------------------------------------------------------
 * Balasan berjenjang
 *
 * Menjorok lewat margin kiri pada wadah balasan, bukan lewat grid bersarang:
 * setiap tingkat memakai potongan HTML yang sama persis, jadi tampilannya
 * tidak berubah bentuk saat kedalamannya bertambah.
 *
 * Kedalaman dibatasi tiga tingkat di sisi server. Batas itu bukan soal gaya —
 * pada layar 360px, tingkat keempat menyisakan kurang dari dua puluh karakter
 * per baris.
 * ------------------------------------------------------------------------- */
.comment-replies { display: grid; gap: 14px; margin: 14px 0 0 34px; padding-left: 18px; border-left: 2px solid var(--line); }
.comment-replies .comment-card { background: color-mix(in srgb, var(--card) 72%, transparent); }

.comment-badge {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font: 700 12.5px/1.5 var(--sans);
  text-transform: uppercase; letter-spacing: .08em;
}
.comment-replyto { margin: 0 0 6px !important; font: 13.5px/1.4 var(--sans) !important; color: var(--muted) !important; }
.comment-tools { margin-top: 9px; }
.comment-reply-btn {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font: 700 13px/1.6 var(--sans);
  cursor: pointer; letter-spacing: .04em;
}
.comment-reply-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Formulir yang sedang dipakai membalas. Warnanya dibedakan supaya jelas
   bahwa kiriman berikutnya masuk ke rangkaian ini, bukan menjadi komentar
   baru di paling bawah. */
.comment-form.is-reply { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.comment-replying {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 9px 13px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 11px; font: 15px/1.5 var(--sans); color: var(--muted);
}
.comment-replying b { color: var(--ink); }
.comment-replying button {
  margin-left: auto; border: 0; background: transparent; color: var(--accent);
  font: 700 13.5px var(--sans); cursor: pointer; text-decoration: underline;
}
.comment-field span i { font-style: normal; font-weight: 400; color: var(--muted); }

@media(max-width:620px){
  /* Di ponsel jorokannya dipangkas: yang penting garis rangkaiannya terlihat,
     bukan seberapa jauh ia bergeser. */
  .comment-replies { margin-left: 12px; padding-left: 12px; gap: 10px; }
}