/* bassnations — tema editorial
   Identitas warna dipertahankan dari snapshot Blogger lama (aksen #2675A6),
   tapi tipografi, ritme spasi, dan interaction state-nya digarap ulang buat
   keterbacaan artikel panjang. Nol framework, nol JS buat layout. */

/* Font di-host sendiri: CDN pihak ketiga bikin 2 koneksi eksternal + CSS
   render-blocking sebelum teks pertama muncul. Dua-duanya variable font
   subset latin, lisensi di static/fonts/LICENSE.md. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- warna semantik --- */
  --bg: #eef1f3;
  --card: #ffffff;
  --text: #4a4a4a;
  --heading: #1c1f22;
  --muted: #666d73;
  --accent: #2675a6;
  --accent-hover: #1b5680;
  --accent-strong: #1b5680;
  --accent-2: #a8542f;
  --line: #dde3e6;
  --line-soft: #e9eef0;
  --soft: #f6f8f9;
  --footer-bg: #26292c;
  --footer-text: #c3c9cd;
  --footer-muted: #9aa2a8;
  --focus: #b1500a;

  /* --- tipografi --- */
  --f-ui: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-read: Newsreader, Georgia, "Times New Roman", serif;

  /* skala modular */
  --t-xs: .75rem;      /* 12 */
  --t-sm: .8125rem;    /* 13 */
  --t-base: .9375rem;  /* 15 */
  --t-md: 1rem;        /* 16 */
  --t-lg: 1.125rem;    /* 18 */
  --t-xl: 1.375rem;    /* 22 */
  --t-2xl: 1.625rem;   /* 26 */
  --t-3xl: 2rem;       /* 32 */

  /* --- ritme spasi 4/8 --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05);
  --shadow-lift: 0 4px 12px rgba(16, 32, 48, .09), 0 2px 4px rgba(16, 32, 48, .05);
  --wrap: 1140px;
  --measure: 68ch;          /* panjang baris ideal buat teks panjang */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 180ms;
}

[data-theme="dark"] {
  --bg: #15181b;
  --card: #1e2226;
  --text: #c2c9cf;
  --heading: #eef1f3;
  --muted: #939ba2;
  --accent: #6cb6e2;
  --accent-hover: #91cbef;
  --accent-strong: #91cbef;
  --accent-2: #d99167;
  --line: #2f353b;
  --line-soft: #272c31;
  --soft: #23282d;
  --footer-bg: #0f1214;
  --footer-text: #b6bec4;
  --footer-muted: #8b939a;
  --focus: #ffb066;
  --nav-bg: #1b4c6b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lift: 0 4px 14px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-base)/1.65 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

/* fokus keyboard — sebelumnya gak ada sama sekali */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--heading);
  font-family: var(--f-read);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.011em;
  margin: 0 0 var(--s-3);
}

/* lewati navigasi — buat pengguna keyboard & screen reader */
.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  background: var(--card); color: var(--accent); font-weight: 500;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

/* ---------- header ---------- */
.header-outer { background: var(--card); border-bottom: 1px solid var(--line); }
.header-content { max-width: var(--wrap); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-5); text-align: center; }
.blog-title {
  font-family: var(--f-read); font-size: var(--t-3xl); font-weight: 700;
  letter-spacing: -.028em; margin: 0; line-height: 1.1;
}
.blog-title a { color: var(--heading); }
.blog-title a:hover { color: var(--accent); text-decoration: none; }
.blog-tagline {
  margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--muted);
  letter-spacing: .01em;
}

/* ---------- nav ---------- */
.navmenu-wrap {
  background: var(--nav-bg, var(--accent));
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 4px rgba(16, 32, 48, .16);
}
.nav-outer {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.navmenu-content { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.navmenu-content li a {
  display: flex; align-items: center; min-height: 46px;   /* target sentuh */
  padding: 0 var(--s-3); color: #fff;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .045em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.navmenu-content li a:hover { background: rgba(0, 0, 0, .17); text-decoration: none; color: #fff; }
.navmenu-content li a.is-active { background: rgba(0, 0, 0, .2); border-bottom-color: rgba(255, 255, 255, .85); color: #fff; }
.navmenu-content li a:focus-visible { outline-color: #fff; outline-offset: -3px; }

.nav-secondary { display: flex; align-items: center; gap: var(--s-2); }
.searchbox { display: flex; }
.searchbox input {
  border: 1px solid transparent; border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: var(--s-2) var(--s-3); font: inherit; font-size: var(--t-sm);
  width: 158px; background: #fff; color: #24292e; min-height: 34px;
}
.searchbox input::placeholder { color: #7b848c; }
.searchbox button {
  border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-2); color: #fff; padding: 0 var(--s-3);
  cursor: pointer; font-size: var(--t-sm); min-height: 34px; min-width: 38px;
  transition: filter var(--dur) var(--ease);
}
.searchbox button:hover { filter: brightness(1.1); }
.darkmode-switch {
  background: rgba(255, 255, 255, .16); border: 0; color: #fff;
  width: 38px; height: 34px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: background var(--dur) var(--ease);
}
.darkmode-switch:hover { background: rgba(255, 255, 255, .28); }
.nav-toggle {
  display: none; background: none; border: 0; color: #fff;
  font-size: 21px; cursor: pointer; min-width: 44px; min-height: 46px;
}

/* ---------- layout ---------- */
.wrapper {
  max-width: var(--wrap); margin: var(--s-6) auto var(--s-7); padding: 0 var(--s-4);
  display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: var(--s-6); align-items: start;
}
.latestposts-title, .widget-title {
  font-family: var(--f-ui);
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin: 0 0 var(--s-4); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.latestposts-title { color: var(--heading); border-bottom: 2px solid var(--accent); }

/* ---------- kartu artikel ---------- */
.post-outer {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: var(--s-4); overflow: hidden; display: flex;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post-outer:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.post-thumb { flex: 0 0 248px; background: var(--soft); }
.post-thumb a { display: block; height: 100%; }
.post-thumb img { width: 100%; height: 100%; min-height: 168px; object-fit: cover; }
.post-thumb .ph {
  height: 100%; min-height: 168px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff; font-family: var(--f-read); font-size: 34px; font-weight: 700;
}
.post-content { padding: var(--s-4) var(--s-5); flex: 1 1 auto; min-width: 0; }
.post-title {
  font-size: var(--t-xl); margin: 0 0 var(--s-2); line-height: 1.3;
}
.post-title a { color: var(--heading); }
.post-title a:hover { color: var(--accent); text-decoration: none; }
.post-meta {
  font-family: var(--f-ui);
  font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-3);
  letter-spacing: .015em;
}
.post-meta a { color: var(--accent-2); font-weight: 500; }
.post-snippet { font-size: var(--t-base); margin: 0; color: var(--text); line-height: 1.65; }
.readmore {
  display: inline-block; margin-top: var(--s-3);
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .075em;
  color: var(--accent);
}

/* ---------- artikel ---------- */
.single {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s-6) var(--s-7) var(--s-7);
}
.single h1 {
  font-size: var(--t-3xl); line-height: 1.16; letter-spacing: -.022em;
  margin-bottom: var(--s-3); max-width: 22ch;
}
.single .post-meta {
  margin-bottom: var(--s-5); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}

/* badan teks: serif, lebih besar, measure dibatasi — ini inti keterbacaannya */
.single p,
.single ul,
.single ol,
.single blockquote {
  font-family: var(--f-read);
  font-size: var(--t-lg);
  line-height: 1.75;
  max-width: var(--measure);
}
.single p { margin: 0 0 var(--s-5); }
.single ul, .single ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); }
.single li { margin-bottom: var(--s-2); }
.single li::marker { color: var(--accent); }
.single strong { color: var(--heading); font-weight: 600; }

.single h2 {
  font-size: var(--t-2xl); margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
}
.single h3 { font-size: var(--t-xl); margin: var(--s-6) 0 var(--s-3); }
.single h4 { font-size: var(--t-md); margin: var(--s-5) 0 var(--s-2); }

.single a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.single a:hover { text-decoration-thickness: 2px; }

.single table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--s-5);
  font-family: var(--f-ui); font-size: var(--t-base);
  font-variant-numeric: tabular-nums;   /* angka rupiah rata */
}
.single th, .single td { border: 1px solid var(--line); padding: var(--s-3) var(--s-3); text-align: left; }
.single th { background: var(--soft); color: var(--heading); font-weight: 600; }
.single tbody tr:nth-child(even) { background: color-mix(in srgb, var(--soft) 55%, transparent); }
.table-scroll { overflow-x: auto; margin: 0 0 var(--s-5); }

.single blockquote {
  margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--soft); border-left: 3px solid var(--accent-2);
  color: var(--heading); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.single blockquote p { margin: 0; font-size: var(--t-md); }

.single code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; background: var(--soft); padding: .1em .35em;
  border-radius: 3px; border: 1px solid var(--line-soft);
}

/* daftar isi */
.toc {
  background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6); max-width: var(--measure);
}
.toc-title {
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin-bottom: var(--s-2);
}
.toc ol { margin: 0; padding-left: var(--s-5); font-size: var(--t-base); font-family: var(--f-ui); }
.toc li { margin: var(--s-1) 0; }

.post-hero { margin: 0 0 var(--s-6); }
.post-hero img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); background: var(--soft);
}

.post-labels {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line); font-size: var(--t-sm);
}
.label-chip {
  display: inline-flex; align-items: center; min-height: 30px;
  background: var(--soft); border: 1px solid var(--line);
  border-radius: 40px; padding: 0 var(--s-3); margin: 0 var(--s-1) var(--s-2) 0;
  font-size: var(--t-xs); color: var(--muted); letter-spacing: .01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
a.label-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }

.related { margin-top: var(--s-6); }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-md); }
.related li:last-child { border-bottom: 0; }
.related a { color: var(--heading); }
.related a:hover { color: var(--accent); }

/* ---------- sidebar ---------- */
.sidebar-wrap { display: flex; flex-direction: column; gap: var(--s-4); }
.widget {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s-4) var(--s-5);
}
.cloud-label-widget-content { display: flex; flex-wrap: wrap; }
.popular-post-content {
  display: flex; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-base);
}
.popular-post-content:last-child { border-bottom: 0; }
.pp-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: var(--soft); color: var(--accent); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 700;
}
.pp-title { line-height: 1.45; }
.pp-title a { color: var(--heading); }
.pp-title a:hover { color: var(--accent); }
.pp-date { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-1); }
.about-widget p { font-size: var(--t-base); margin: 0; line-height: 1.65; }

/* ---------- paginasi ---------- */
.blog-pager { display: flex; justify-content: center; gap: var(--s-2); margin: var(--s-5) 0 0; flex-wrap: wrap; }
.blog-pager a, .blog-pager span {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 var(--s-3); font-size: var(--t-base); font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog-pager a:hover { background: var(--soft); border-color: var(--accent); text-decoration: none; }
.blog-pager .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- footer ---------- */
.footer-outer { background: var(--footer-bg); color: var(--footer-text); margin-top: var(--s-7); }
.footer-content { max-width: var(--wrap); margin: 0 auto; padding: var(--s-6) var(--s-4); text-align: center; }
.page-navmenu ul {
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-5);
}
.page-navmenu a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--footer-text); font-size: var(--t-sm);
}
.page-navmenu a:hover { color: #fff; }
.footer-text { font-size: var(--t-sm); color: var(--footer-muted); line-height: 1.7; }
.footer-text a { color: var(--footer-text); }

/* ---------- pencarian ---------- */
.searchpage-empty {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s-5); font-size: var(--t-md);
}

/* ---------- responsif ---------- */
@media (max-width: 1024px) {
  .wrapper { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-5); }
  .single { padding: var(--s-5) var(--s-6) var(--s-6); }
}

@media (max-width: 900px) {
  .wrapper { grid-template-columns: 1fr; }
  .single { --measure: none; }
}

@media (max-width: 680px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .navmenu-content {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--nav-bg, var(--accent-strong)); flex-direction: column;
    padding: var(--s-1) 0; box-shadow: var(--shadow-lift);
  }
  .navmenu-content.open { display: flex; }
  .navmenu-content li a { min-height: 48px; padding: 0 var(--s-4); border-bottom: 0; }
  .nav-outer { position: relative; padding: 0 var(--s-2); }
  .searchbox input { width: 116px; }

  .header-content { padding: var(--s-5) var(--s-4) var(--s-4); }
  .blog-title { font-size: var(--t-2xl); }
  .wrapper { margin: var(--s-4) auto var(--s-6); padding: 0 var(--s-3); gap: var(--s-4); }

  .post-outer { flex-direction: column; }
  .post-thumb { flex: none; }
  .post-thumb img, .post-thumb .ph { min-height: 176px; }
  .post-content { padding: var(--s-4); }
  .post-title { font-size: var(--t-lg); }

  .single { padding: var(--s-5) var(--s-4) var(--s-6); }
  /* 16px+ di HP biar iOS gak auto-zoom, dan tetep enak dibaca */
  .single p, .single ul, .single ol, .single blockquote { font-size: var(--t-md); line-height: 1.72; }
  .single h1 { font-size: var(--t-2xl); max-width: none; }
  .single h2 { font-size: var(--t-xl); margin-top: var(--s-6); }
  .single h3 { font-size: var(--t-md); }
  .single table { font-size: var(--t-sm); }
  .single th, .single td { padding: var(--s-2); }
}

/* hormati preferensi kurangi-gerak */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .post-outer:hover { transform: none; }
}

@media print {
  .navmenu-wrap, .sidebar-wrap, .footer-outer, .skip-link, .toc { display: none; }
  .wrapper { display: block; max-width: none; }
  .single { box-shadow: none; border: 0; padding: 0; }
  body { background: #fff; }
}