/* Base — Template V3 (Quiet Luxury Fintech) */
.app * { box-sizing: border-box; }
.app {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}
.app img { max-width: 100%; display: block; }
.app a { color: inherit; text-decoration: none; }

.app h1, .app h2, .app h3, .app h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 var(--space-2);
    color: var(--text);
}
.app h1 { font-size: 26px; }
.app h2 { font-size: 20px; }
.app h3 { font-size: 16px; }
.app p { margin: 0; color: var(--text-dim); line-height: 1.6; font-size: 14px; }

.text-amber { color: var(--amber); }
.text-rose { color: var(--rose); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }

/* Angka besar (harga/nominal) — tabular, tebal, kontras tinggi */
.figure {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -.02em;
}

.app ::-webkit-scrollbar { width: 6px; height: 6px; }
.app ::-webkit-scrollbar-track { background: transparent; }
.app ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }

/* Layout shell */
.shell {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding-bottom: 76px; /* ruang utk dock bawah (full-width, menempel bottom:0) */
}
.content {
    flex: 1;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5);
}
@media (max-width: 768px) {
    .content { padding: var(--space-4); }
}
@media (max-width: 480px) {
    .content { padding: var(--space-3); }
}

/* Ruang aman supaya konten .content tidak ketiban .eko-topbar yg
   position:fixed height:72px + border 1px (lihat layout.css) — SEKARANG
   berlaku universal di SEMUA breakpoint (dulu cuma mobile, krn .eko-topbar
   dulu display:none di mobile; sekarang topbar selalu tampil di kedua
   breakpoint, sama pola dgn memberarea/.pg-topbar). */
.content { padding-top: calc(73px + var(--space-5)); }
@media (max-width: 768px) {
    .content { padding-top: calc(73px + var(--space-4)); }
}
@media (max-width: 480px) {
    .content { padding-top: calc(73px + var(--space-3)); }
}