/* layout.css - header, footer, grid halaman, breadcrumb */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.1rem; }

.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1.5rem; padding-top: .8rem; padding-bottom: .8rem;
}
.brand {
  font-family: var(--font-head); font-weight: 700; font-size: 1.35rem;
  color: var(--c-ink); text-decoration: none;
}
.brand span { color: var(--c-primary); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.4rem; }
.nav a { color: var(--c-ink); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--c-primary); }
.nav a i, .nav-drop-toggle i.fa-chevron-down { font-size: .75em; }
.nav-toggle {
  display: none; font: inherit; background: none; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: .4rem .8rem; cursor: pointer;
}
.nav-drop { position: relative; }
.nav-drop-toggle {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: none;
  color: var(--c-ink); font: inherit; padding: .35rem 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.nav-drop:hover .nav-drop-toggle, .nav-drop-toggle:focus { border-bottom-color: var(--c-primary); }
.nav-drop-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20; margin-top: .5rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(15,76,129,.12); padding: .5rem; min-width: 220px;
}
.nav-drop:hover .nav-drop-menu, .nav-drop.is-open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 4px;
  border-bottom: none; color: var(--c-ink); white-space: nowrap;
}
.nav-drop-menu a:hover { background: var(--c-tint); }
.nav-drop-menu a i { color: var(--c-primary); width: 1.1em; text-align: center; }
@media (max-width: 640px) {
  .js .nav-toggle { display: inline-block; }
  .js .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-top: .4rem; }
  .js .nav.is-open { display: flex; }
  .nav-drop-menu { position: static; box-shadow: none; margin-top: .2rem; display: none; }
  .nav-drop.is-open .nav-drop-menu { display: block; }
}
@media (min-width: 641px) {
  .header-inner { flex-wrap: nowrap; }
  .nav { justify-content: flex-end; min-width: 0; }
}

.breadcrumb { font-size: .9rem; padding: 1rem 0 .2rem; color: var(--c-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--c-line); }
.breadcrumb li + li { margin-top: 0; }

.page { padding: 1rem 0 3rem; }
.page-grid { display: grid; gap: 2.2rem; grid-template-columns: minmax(0, 1fr); }
.page-main { min-width: 0; max-width: var(--measure); }
.page-main--wide { max-width: none; }
.prose { max-width: var(--measure); }
.page-side { min-width: 0; }
@media (min-width: 980px) {
  .page-grid--side { grid-template-columns: minmax(0, 1fr) 300px; }
  .side-sticky { position: sticky; top: 1rem; }
}

.site-footer { background: #101a24; color: #cfd8e1; margin-top: 3rem; padding: 2.4rem 0 1.6rem; font-size: .95rem; }
.site-footer a { color: #e6edf4; }
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; margin: 0 0 .6rem; color: #fff; font-family: var(--font-body); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.footer-note { border-top: 1px solid #2a3947; margin-top: 1.8rem; padding-top: 1rem; color: #97a6b5; font-size: .88rem; }