:root{--cream:#FBF7F1;--ink:#241E17;--ink-soft:#6E655A;--orange:#E8823C;--orange-deep:#D9631F;--purple:#7C5CFC;--purple-soft:#EFEAFF;--line:#EBE3D6;--tag-bg:#F5EFE3;}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter',sans-serif;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
.hero{padding:96px 32px 56px;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--purple-soft);color:var(--purple);font-weight:700;font-size:0.78rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:26px;}
h1{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.08;margin:0;}
h1 .accent{color:var(--purple);}
main{padding:20px 32px 80px;}
.post{display:grid;grid-template-columns:280px 1fr;gap:36px;padding:44px 0;border-bottom:1px solid var(--line);align-items:start;}
@media (max-width:720px){.post{grid-template-columns:1fr;}}
.post-thumb{width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--purple-soft);}
.post-thumb img{width:100%;height:100%;object-fit:cover;}
.post-body h3{font-family:'Baloo 2',sans-serif;font-weight:700;margin:0 0 12px;font-size:1.25rem;}
.post-body h3 a:hover{color:var(--orange-deep);}
.post-body p{margin:0 0 16px;color:var(--ink-soft);font-size:0.98rem;line-height:1.65;}
.post-meta{font-size:0.82rem;color:#9C927F;margin-bottom:14px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{background:var(--tag-bg);color:var(--ink-soft);font-size:0.76rem;font-weight:600;padding:5px 12px;border-radius:999px;}

/* detail artikel */
.wrap.detail{max-width:760px;}
article{padding:64px 0 40px;}
.art-meta-top{text-align:center;font-size:0.84rem;color:#9C927F;font-weight:600;margin-bottom:18px;}
h1.art-title{font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.18;text-align:center;margin:0 0 40px;}
.art-thumb{width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--purple-soft);margin-bottom:44px;}
.art-thumb img{width:100%;height:100%;object-fit:cover;}
.art-body p{font-size:1.06rem;line-height:1.85;color:#3B3529;margin:0 0 26px;}
.art-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);margin-top:36px;padding-top:28px;}
.load-more{margin-top:20px;}
.pagination{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;}
.pagination li{list-style:none;}
.pagination li a,
.pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;
  font-weight:600;font-size:0.92rem;color:var(--ink);
  transition:background .15s,border-color .15s,color .15s;
}
.pagination li a:hover{background:var(--purple-soft, #EFEAFF);border-color:var(--purple, #7C5CFC);color:var(--purple, #7C5CFC);}
.pagination li.active span,
.pagination li.current span{
  background:var(--purple, #7C5CFC);border-color:var(--purple, #7C5CFC);color:#fff;
}
.pagination li.disabled span{opacity:0.4;}
.art-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.share{display:flex;align-items:center;gap:10px;}
.share-label{font-size:0.82rem;font-weight:700;color:var(--ink-soft);margin-right:4px;}
.share a{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tag-bg);color:var(--ink-soft);
  transition:background .2s,color .2s;
}
.share a:hover{background:var(--orange);color:#fff;}