/* ============================================================
   blog.css — tambahan khusus halaman Blog & Artikel
   (dipakai bareng assets/style.css, pakai variabel yang sama)
   ============================================================ */

/* ---------- hero blog ---------- */
.blog-hero{ padding:64px 0 40px; }
.blog-hero h1{ font-size:clamp(2.1rem, 4.5vw, 3.1rem); margin-bottom:14px; }
.blog-hero .lead{ max-width:620px; color:var(--text-soft); font-size:1.05rem; }

/* ---------- filter kategori ---------- */
.blog-filters{ display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 8px; }
.blog-filter{
  font-family:var(--body); font-weight:700; font-size:0.84rem;
  padding:8px 16px; border-radius:999px; border:2px solid var(--ink);
  background:var(--card); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.blog-filter:hover{ transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
.blog-filter.active{ background:var(--teal); color:#fff; }

/* ---------- featured post ---------- */
.blog-featured{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border:2.5px solid var(--ink); border-radius:var(--radius); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-ink-lg); margin:32px 0 56px;
}
.blog-featured .cover{
  background:linear-gradient(135deg, var(--amber), var(--teal));
  display:flex; align-items:center; justify-content:center; padding:40px;
  position:relative; min-height:260px;
}
.blog-featured .cover .big-mark{
  font-family:var(--disp); font-weight:900; font-size:5rem; color:var(--ink);
  opacity:0.85; transform:rotate(-6deg);
}
.blog-featured .body{ padding:36px 38px; display:flex; flex-direction:column; gap:14px; }
.blog-featured .tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
.blog-featured h2{ font-size:1.7rem; }
.blog-featured p{ color:var(--text-soft); }
.blog-featured .meta{ display:flex; gap:16px; align-items:center; font-size:0.82rem; color:var(--text-soft); font-family:var(--mono); margin-top:auto; }
@media (max-width:840px){ .blog-featured{ grid-template-columns:1fr; } .blog-featured .cover{ min-height:180px; } }

/* ---------- kategori tag kecil ---------- */
.cat-tag{
  font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:0.02em;
  padding:4px 11px; border-radius:999px; border:2px solid var(--ink); background:var(--paper-2);
  display:inline-block; color:var(--teal-deep);
}
.cat-tag.c-coding{ background:#DDEBFF; }
.cat-tag.c-marketing{ background:#FFE0EC; }
.cat-tag.c-karier{ background:#E4F7E9; }
.cat-tag.c-tips{ background:var(--amber); }

/* ---------- grid artikel ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-bottom:60px; }
@media (max-width:960px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
  background:var(--card); border:2px solid var(--ink); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.blog-card .thumb{
  height:150px; display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:900; font-size:2.6rem; color:var(--ink); opacity:0.8;
}
.blog-card .thumb.t1{ background:linear-gradient(135deg,#8FD3FF,#3DDC97); }
.blog-card .thumb.t2{ background:linear-gradient(135deg,#FFC93C,#FF9C8A); }
.blog-card .thumb.t3{ background:linear-gradient(135deg,#C9A7FF,#8FD3FF); }
.blog-card .thumb.t4{ background:linear-gradient(135deg,#3DDC97,#FFC93C); }
.blog-card .thumb.t5{ background:linear-gradient(135deg,#FF9C8A,#C9A7FF); }
.blog-card .thumb.t6{ background:linear-gradient(135deg,#FFC93C,#8FD3FF); }
.blog-card .body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-card h3{ font-family:var(--disp); font-size:1.12rem; line-height:1.25; }
.blog-card p{ color:var(--text-soft); font-size:0.87rem; flex:1; }
.blog-card .meta{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:0.72rem; color:var(--text-soft); border-top:1.5px dashed var(--line); padding-top:10px; margin-top:2px; }
.blog-card .read-more{ font-weight:700; color:var(--teal-deep); font-size:0.82rem; }

/* ---------- newsletter strip ---------- */
.blog-newsletter{
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom:20px;
}
.blog-newsletter h3{ font-size:1.4rem; margin-bottom:6px; }
.blog-newsletter p{ color:var(--text-soft-dark); font-size:0.92rem; max-width:420px; }

/* ============================================================
   halaman artikel tunggal
   ============================================================ */

.article-hero{ padding:44px 0 0; }
.article-hero .wrap{ max-width:900px; }
.article-hero .tag-row{ display:flex; gap:8px; margin-bottom:18px; }
.article-hero h1{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin-bottom:18px; }
.article-meta{
  display:flex; align-items:center; gap:14px; padding:16px 0 28px;
  border-bottom:2px solid var(--ink); margin-bottom:8px; flex-wrap:wrap;
}
.article-meta .avatar{
  width:40px; height:40px; border-radius:50%; background:var(--amber); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800;
}
.article-meta .who b{ display:block; font-size:0.9rem; }
.article-meta .who span{ font-size:0.78rem; color:var(--text-soft); font-family:var(--mono); }
.article-meta .stats{ margin-left:auto; display:flex; gap:14px; font-size:0.8rem; color:var(--text-soft); font-family:var(--mono); }

.article-cover{
  height:280px; border-radius:var(--radius); border:2.5px solid var(--ink); margin:24px 0 8px;
  background:linear-gradient(135deg, var(--amber), var(--teal)); box-shadow:var(--shadow-ink-lg);
  display:flex; align-items:center; justify-content:center;
}
.article-cover .big-mark{ font-family:var(--disp); font-weight:900; font-size:4.5rem; color:var(--ink); opacity:0.85; transform:rotate(-4deg); }

/* ---------- layout: konten + daftar isi (TOC) ---------- */
.article-layout{
  max-width:1180px; margin:0 auto; padding:56px 28px 100px;
  display:grid; grid-template-columns:250px 1fr; gap:56px; align-items:start;
}
@media (max-width:960px){ .article-layout{ grid-template-columns:1fr; padding-top:32px; } }

/* daftar isi (desktop: sticky sidebar) */
.toc{
  position:sticky; top:96px; align-self:start;
  border:2px solid var(--ink); border-radius:14px; background:var(--card);
  padding:20px 20px 22px; box-shadow:4px 4px 0 var(--ink);
}
.toc-title{
  font-family:var(--mono); font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.toc-list{ list-style:none; display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--line); }
.toc-list li a{
  display:block; font-size:0.86rem; color:var(--text-soft); padding:6px 0 6px 16px;
  border-left:2px solid transparent; margin-left:-2px; transition:color .15s ease, border-color .15s ease;
  font-weight:600;
}
.toc-list li a:hover{ color:var(--ink); }
.toc-list li a.active{ color:var(--teal-deep); border-left-color:var(--teal); }
.toc-list li.sub a{ padding-left:28px; font-size:0.8rem; font-weight:500; }
.toc-progress{ margin-top:16px; height:5px; border-radius:99px; background:var(--paper-2); border:1.5px solid var(--ink); overflow:hidden; }
.toc-progress-bar{ height:100%; width:0%; background:var(--teal); transition:width .1s linear; }

/* daftar isi versi mobile: dropdown di atas artikel */
.toc-mobile{ display:none; }
@media (max-width:960px){
  .toc{ display:none; }
  .toc-mobile{
    display:block; border:2px solid var(--ink); border-radius:14px; background:var(--paper-2);
    margin-bottom:36px; overflow:hidden;
  }
  .toc-mobile summary{
    cursor:pointer; padding:14px 18px; font-weight:700; font-family:var(--body); font-size:0.9rem;
    display:flex; align-items:center; gap:8px; list-style:none;
  }
  .toc-mobile summary::-webkit-details-marker{ display:none; }
  .toc-mobile .toc-list{ padding:0 18px 16px; border-left:none; }
  .toc-mobile .toc-list li a{ border-left:2px solid var(--line); }
}

/* konten artikel */
.article-content{ max-width:700px; }
.article-content h2{
  font-size:1.5rem; margin:44px 0 14px; padding-top:8px; scroll-margin-top:96px;
}
.article-content h3{ font-size:1.15rem; margin:28px 0 10px; scroll-margin-top:96px; }
.article-content p{ color:var(--ink-2); font-size:1rem; line-height:1.75; margin-bottom:16px; }
.article-content ul, .article-content ol{ margin:0 0 18px 22px; color:var(--ink-2); line-height:1.7; }
.article-content li{ margin-bottom:6px; }
.article-content strong{ color:var(--ink); }

.callout{
  background:var(--paper-2); border:2px solid var(--ink); border-left:6px solid var(--teal);
  border-radius:12px; padding:18px 22px; margin:24px 0; font-size:0.95rem; color:var(--ink-2);
}
.callout b{ display:flex; align-items:center; gap:6px; color:var(--teal-deep); margin-bottom:4px; font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; }

.article-share{ display:flex; align-items:center; gap:10px; margin:40px 0; padding:18px 0; border-top:1.5px dashed var(--line); border-bottom:1.5px dashed var(--line); }
.article-share span{ font-size:0.82rem; font-weight:700; color:var(--text-soft); }

.article-cta{
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:32px 34px; margin:40px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.article-cta h4{ font-family:var(--disp); font-size:1.25rem; margin-bottom:4px; }
.article-cta p{ color:var(--text-soft-dark); font-size:0.88rem; }

/* related articles */
.related-section{ background:var(--paper-2); padding:64px 0; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:840px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{
  background:var(--card); border:2px solid var(--ink); border-radius:14px; padding:18px 20px;
  box-shadow:4px 4px 0 var(--ink); transition:transform .15s ease, box-shadow .15s ease;
}
.related-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.related-card h4{ font-family:var(--disp); font-size:1.02rem; margin:10px 0 6px; }
.related-card p{ font-size:0.82rem; color:var(--text-soft); }