:root { --bg:#f5f6fb; --bg2:#e9edff; --card:#fff; --text:#161a29; --muted:#6b7385; --accent:#4f6bff; --accent2:#8a5cff;
  --border:#e4e7f1; --soft:#f4f6fc; --shadow:0 1px 2px rgba(20,25,60,.04),0 10px 28px rgba(20,25,60,.07);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1017; --bg2:#1a1e36; --card:#171a24; --text:#eef0f7; --muted:#9aa3b8;
  --accent:#7b93ff; --accent2:#a98bff; --border:#262b3b; --soft:#1e2230; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.28); } }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; background:radial-gradient(900px 420px at 50% -140px,var(--bg2),transparent),var(--bg); }
a { color:var(--accent); }
.muted { color:var(--muted); font-size:.9rem; }

.site-header { max-width:1040px; margin:0 auto; padding:36px 18px 4px; }
.site-title { font-size:clamp(1.8rem,5vw,2.4rem); font-weight:800; letter-spacing:-.03em; text-decoration:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.site-header p { margin:4px 0 0; color:var(--muted); }

.layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:32px; max-width:1040px; margin:0 auto; padding:20px 18px 56px; align-items:start; }
@media (max-width:820px) { .layout { grid-template-columns:1fr; } }

.post { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; margin-bottom:22px; box-shadow:var(--shadow); }
.post time { font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.post h1, .post h2 { margin:6px 0 16px; font-size:clamp(1.5rem,4vw,1.95rem); line-height:1.2; letter-spacing:-.02em; }
.post h2 a { color:var(--text); text-decoration:none; }
.post h2 a:hover { color:var(--accent); }
.post .body { font-family:Georgia,"Times New Roman",serif; font-size:1.08rem; line-height:1.78; overflow-wrap:anywhere; }
.post .body p { margin:0 0 1.1em; }
.post .body p:last-child { margin-bottom:0; }

.pager { display:flex; justify-content:space-between; gap:12px; margin:6px 0 10px; }
.pager a { padding:8px 16px; border-radius:99px; border:1px solid var(--border); background:var(--card); text-decoration:none; font-weight:500; font-size:.9rem; }
.pager a:hover { border-color:var(--accent); }
.search-info { margin:0 0 14px; }

aside .block { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow); }
aside h3 { margin:0 0 10px; font-size:.95rem; }
.search { display:flex; gap:6px; }
.search input { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--soft); color:var(--text); font:inherit; font-size:.9rem; }
.search button { padding:8px 12px; border:0; border-radius:10px; background:var(--accent); color:#fff; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }

details.y > summary, details.m > summary { cursor:pointer; list-style:none; padding:3px 0; }
details > summary::-webkit-details-marker { display:none; }
details.y > summary { font-weight:700; }
details.m { margin-left:14px; }
details.m > summary { color:var(--muted); font-size:.92rem; }
details > summary::before { content:"▸"; display:inline-block; width:1.1em; color:var(--muted); transition:transform .15s; }
details[open] > summary::before { transform:rotate(90deg); }
summary span { color:var(--muted); font-weight:400; }
details.m ul { list-style:none; margin:2px 0 8px; padding-left:18px; }
details.m li { padding:3px 0; font-size:.9rem; line-height:1.35; }
details.m a { text-decoration:none; }
details.m a:hover, details.m a.cur { text-decoration:underline; }
details.m a.cur { font-weight:600; }

.site-footer { text-align:center; color:var(--muted); font-size:.85rem; padding:0 18px 40px; }

/* Isi post berformat HTML */
.post .body h2, .post .body h3, .post .body h4 { font-family:Inter,system-ui,sans-serif; line-height:1.25; letter-spacing:-.01em; margin:1.6em 0 .6em; }
.post .body h2 { font-size:1.4rem; } .post .body h3 { font-size:1.2rem; } .post .body h4 { font-size:1.05rem; }
.post .body ul, .post .body ol { margin:0 0 1.1em; padding-left:1.4em; }
.post .body blockquote { margin:0 0 1.1em; padding:.2em 1em; border-left:3px solid var(--accent); color:var(--muted); }
.post .body img { max-width:100%; height:auto; border-radius:12px; }
.post .body pre { overflow-x:auto; background:var(--soft); padding:12px 14px; border-radius:10px; font-size:.9rem; }
.post .body table { border-collapse:collapse; display:block; overflow-x:auto; margin-bottom:1.1em; }
.post .body th, .post .body td { border:1px solid var(--border); padding:6px 10px; }
.post .body hr { border:0; border-top:1px solid var(--border); margin:1.6em 0; }