:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --text: #292725;
  --muted: #716c65;
  --line: #e6e2dc;
  --accent: #315f72;
  --accent-hover: #264b5a;
  --max-width: 720px;
  --wide-width: 1120px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.7; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
.site-header { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.site-header-inner, .site-footer-inner { width: min(100% - 48px, var(--wide-width)); margin: 0 auto; }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:72px; }
.site-title { color:var(--text); text-decoration:none; font-weight:700; letter-spacing:-.03em; }
.site-nav a { color:var(--muted); font-size:.9rem; text-decoration:none; }
main { margin:0 auto; }
.home-main { width:min(100% - 48px, var(--wide-width)); padding:var(--space-5) 0 88px; }
.post-main { width:min(100% - 32px, var(--max-width)); padding:32px 0 72px; }
.home-intro { max-width:700px; margin-bottom:var(--space-5); }
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.home-intro h1 { margin:0 0 14px; font-size:clamp(2.5rem,7vw,4.8rem); line-height:1.03; letter-spacing:-.065em; }
.tagline { margin: 0 0 12px; color:var(--text); font-size:1.15rem; font-weight:600; letter-spacing:-.02em; }
.lead { color:var(--muted); max-width:620px; font-size:1.08rem; }
.section-heading { margin-bottom:var(--space-3); }
.section-heading h2 { margin:0; font-size:2rem; letter-spacing:-.045em; line-height:1.1; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.post-card { display:block; overflow:hidden; color:var(--text); text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 18px rgba(40,35,30,.04); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.post-card:hover { color:var(--text); transform:translateY(-4px); border-color:#cfc8bf; box-shadow:0 14px 30px rgba(40,35,30,.1); }
.post-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.post-card-body { padding:18px 18px 20px; }
.post-card h3 { margin:8px 0 10px; font-size:1.2rem; line-height:1.2; letter-spacing:-.03em; }
.post-card p { margin:0 0 14px; color:var(--muted); font-size:.88rem; line-height:1.5; }
.category-tag { display:inline-block; color:var(--accent); font-size:.73rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.read-more { color:var(--accent); font-size:.84rem; font-weight:650; }
.breadcrumb { display:flex; gap:10px; align-items:center; margin:0 0 24px; color:var(--muted); font-size:.85rem; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.post-article { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,5vw,52px); box-shadow:0 8px 28px rgba(40,35,30,.06); }
.post-article .hero-image { display:block; width:calc(100% + clamp(44px,10vw,104px)); max-width:none; margin:calc(clamp(22px,5vw,52px) * -1) calc(clamp(22px,5vw,52px) * -1) 36px; border-radius:16px 16px 0 0; }
.post-article h1 { margin:12px 0 30px; font-size:clamp(2rem,5vw,2.8rem); line-height:1.08; letter-spacing:-.05em; }
.post-article h2 { margin:2.2em 0 .7em; font-size:1.55rem; line-height:1.2; letter-spacing:-.035em; }
.post-article p { margin:0 0 1.3em; }
.post-article img:not(.hero-image) { display:block; width:100%; height:auto; margin:28px 0 12px; border-radius:12px; box-shadow:0 10px 26px rgba(40,35,30,.12); }
.post-article em { color:var(--muted); font-size:.9rem; }
.post-article a[href*="tk.tokopedia.com"] { display:inline-block; margin:8px 0 18px; padding:11px 18px; border-radius:9px; background:var(--accent); color:#fff; font-size:.95rem; font-weight:650; text-decoration:none; box-shadow:0 4px 10px rgba(49,95,114,.2); }
.post-article a[href*="tk.tokopedia.com"]:hover { background:var(--accent-hover); color:#fff; }
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.site-footer-inner { padding:24px 0 32px; }
@media (max-width:900px) { .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { body{font-size:17px}.site-header-inner,.site-footer-inner,.home-main{width:min(100% - 24px,var(--wide-width))}.post-main{width:min(100% - 24px,var(--max-width));padding-top:24px}.home-main{padding-top:40px}.post-grid{grid-template-columns:1fr}.home-intro h1{font-size:3rem}.post-article{border-radius:12px;padding:22px 18px}.post-article .hero-image{width:calc(100% + 36px);margin:-22px -18px 28px;border-radius:12px 12px 0 0}.post-article a[href*="tk.tokopedia.com"]{width:100%;text-align:center}}