/* ===================================================================
   GRANAT88 — page.css
   Gaya untuk halaman statis (Privacy, Terms, Panduan, Bantuan).
   Mewarisi variabel warna dari desktop.css (dimuat lebih dulu).
   Responsif desktop & mobile.
   =================================================================== */

.page-main{padding-top:90px;padding-bottom:60px;min-height:70vh}
.page-wrap{max-width:820px}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted);margin-bottom:26px;flex-wrap:wrap}
.breadcrumb a{color:var(--gold);transition:opacity .2s}
.breadcrumb a:hover{opacity:.8}
.breadcrumb .current{color:var(--muted)}

/* Konten */
.page-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:38px 34px}
.page-content h1{font-size:clamp(1.7rem,4.5vw,2.4rem);margin-bottom:8px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.page-updated{color:var(--muted);font-size:.84rem;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.page-content h2{font-family:var(--font-head);font-size:1.18rem;color:var(--gold);margin:28px 0 10px}
.page-content h2:first-of-type{margin-top:0}
.page-content p{color:var(--text);opacity:.92;margin-bottom:14px;font-size:.98rem;line-height:1.75}
.page-content a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
.page-content a:hover{opacity:.8}
.page-content strong{color:var(--gold-3)}

/* Tombol kembali */
.page-back{margin-top:28px;display:inline-flex}

/* Responsif mobile */
@media(max-width:600px){
    .page-main{padding-top:78px}
    .page-content{padding:26px 20px}
    .page-content p{font-size:.95rem}
}