:root{
  --bg:#0d0f10;--ink:#17191b;--muted:#6f6b64;--card:#fff;--soft:#f7f3ea;
  --border:#ddd4c5;--gold:#c9a35b;--gold-dark:#8d682f;--danger:#8e2c2c;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(145deg,#090b0c,#191b1d);line-height:1.65}
a{color:var(--gold-dark)}a:hover{text-decoration-thickness:2px}.barba-legal-body{min-height:100vh}
.legal-site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px clamp(16px,4vw,44px);background:rgba(13,15,16,.96);border-bottom:1px solid rgba(201,163,91,.28);backdrop-filter:blur(14px)}
.legal-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}.legal-brand img{width:38px;height:38px;object-fit:contain}.legal-brand span{display:flex;flex-direction:column}.legal-brand strong{font-family:Montserrat,sans-serif;letter-spacing:.05em;font-size:.86rem}.legal-brand small{font-size:.54rem;letter-spacing:.14em;color:#9d998f;margin-top:2px}.legal-top-nav{display:flex;gap:18px;flex-wrap:wrap}.legal-top-nav a{color:#e8e2d7;text-decoration:none;font-size:.8rem;font-weight:700}.legal-top-nav a:hover{color:#d6b36d}
.legal-shell{width:min(1180px,calc(100% - 28px));margin:32px auto 54px}.legal-hero{background:linear-gradient(135deg,#fff,#faf6ed);border:1px solid rgba(201,163,91,.45);border-radius:20px;padding:clamp(24px,5vw,54px);box-shadow:0 24px 70px rgba(0,0,0,.24)}
.legal-kicker{font-size:.7rem;letter-spacing:.16em;font-weight:800;color:var(--gold-dark);text-transform:uppercase}.legal-hero h1{font-family:Montserrat,sans-serif;font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:10px 0 12px;letter-spacing:-.035em}.legal-hero .lead{font-size:1rem;color:#504c46;max-width:850px}.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.legal-meta span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 11px;font-size:.76rem;color:#59554e}
.legal-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}.legal-toc{position:sticky;top:82px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 15px 40px rgba(0,0,0,.12)}.legal-toc h2{font-family:Montserrat,sans-serif;font-size:.9rem;margin:0 0 10px}.legal-toc ol{margin:0;padding-left:20px}.legal-toc li{margin:5px 0}.legal-toc a{color:#4f4b44;text-decoration:none;font-size:.78rem}.legal-toc a:hover{color:var(--gold-dark)}
.legal-document{background:#fff;border:1px solid var(--border);border-radius:16px;padding:clamp(22px,4vw,42px);box-shadow:0 15px 40px rgba(0,0,0,.12)}.legal-section{scroll-margin-top:94px;border-bottom:1px solid #eee9df;padding-bottom:26px;margin-bottom:28px}.legal-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.legal-section h2{font-family:Montserrat,sans-serif;font-size:clamp(1.15rem,2.8vw,1.55rem);line-height:1.3;margin:0 0 12px}.legal-section h3{font-size:1rem;margin:20px 0 8px}.legal-section p{margin:8px 0;color:#3f3b36}.legal-section ul,.legal-section ol{padding-left:22px;margin:10px 0}.legal-section li{margin:7px 0;color:#3f3b36}.legal-section strong{color:#1c1d1f}
.role-block{border:1px solid #e4d6bd;border-left:4px solid var(--gold);background:#fcf8ef;border-radius:12px;padding:16px 18px;margin:14px 0}.role-block h3{margin:0 0 8px;display:flex;align-items:center;gap:8px}.role-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#17191b;color:#fff;padding:5px 9px;font-size:.7rem;font-weight:800;letter-spacing:.03em}.notice{border-radius:12px;background:#f4efe4;border:1px solid #e2d1ad;padding:15px 17px;margin:14px 0;color:#5a4a2d}.notice.warning{background:#fff4f2;border-color:#efc8c4;color:#73332c}.legal-table-wrap{overflow:auto;margin:14px 0}.legal-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.84rem}.legal-table th,.legal-table td{border:1px solid #e2dbcf;text-align:left;vertical-align:top;padding:10px 12px}.legal-table th{background:#f7f3ea;font-weight:800}.legal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.legal-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;border-radius:10px;text-decoration:none;font-weight:800;font-size:.82rem}.legal-btn.primary{background:#17191b;color:#fff;border:1px solid #17191b}.legal-btn.secondary{background:#fff;color:#6f5225;border:1px solid #d9c49d}
.legal-site-footer{width:min(1180px,calc(100% - 28px));margin:0 auto 30px;color:#aaa49a;font-size:.76rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.legal-footer-links{display:flex;gap:14px;flex-wrap:wrap}.legal-footer-links a{color:#d6b36d;text-decoration:none}
@media(max-width:860px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}.legal-top-nav{display:none}.legal-shell{margin-top:18px}.legal-site-header{padding:10px 14px}.legal-hero{border-radius:15px}.legal-document,.legal-toc{border-radius:14px}.legal-site-footer{padding-bottom:env(safe-area-inset-bottom)}}
@media print{body{background:#fff}.legal-site-header,.legal-toc,.legal-actions,.legal-site-footer{display:none}.legal-shell{width:100%;margin:0}.legal-grid{display:block}.legal-hero,.legal-document{box-shadow:none;border:0}.legal-document{padding:0}.legal-section{break-inside:avoid}.legal-hero{padding:0 0 20px}}

/* Mobile-first hardening: prevent horizontal page scrolling and make legal tables readable */
html, body { max-width: 100%; overflow-x: hidden; }
.barba-legal-body, .legal-site-header, .legal-shell, .legal-hero, .legal-grid, .legal-toc, .legal-document, .legal-section, .role-block, .notice, .legal-site-footer { min-width: 0; max-width: 100%; }
.legal-section, .legal-document, .role-block, .notice, .legal-meta span, .legal-site-footer, .legal-top-nav a, .legal-brand, .legal-brand span, .legal-brand strong, .legal-brand small, .legal-section p, .legal-section li, .legal-section td, .legal-section th { overflow-wrap: anywhere; word-break: normal; }

@media (max-width: 640px) {
  .legal-site-header { padding: 9px 12px; }
  .legal-brand { min-width: 0; }
  .legal-brand img { width: 34px; height: 34px; flex: 0 0 auto; }
  .legal-brand strong { font-size: .78rem; }
  .legal-brand small { font-size: .49rem; }

  .legal-shell { width: calc(100% - 20px); margin: 12px auto 30px; }
  .legal-hero { padding: 20px 16px; border-radius: 14px; }
  .legal-hero h1 { font-size: clamp(1.65rem, 9vw, 2.2rem); }
  .legal-hero .lead { font-size: .94rem; }

  .legal-toc, .legal-document { padding: 16px; border-radius: 12px; }
  .legal-section { padding-bottom: 22px; margin-bottom: 24px; }
  .legal-section h2 { font-size: 1.15rem; }
  .legal-section h3 { font-size: .98rem; }
  .legal-section p, .legal-section li { font-size: .94rem; }
  .legal-section ul, .legal-section ol { padding-left: 19px; }

  .role-block { padding: 14px; }
  .role-block h3 { align-items: flex-start; flex-wrap: wrap; }
  .role-chip { flex: 0 0 auto; }

  .legal-meta { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .legal-meta span { width: 100%; }

  .legal-table-wrap { overflow: visible; margin: 12px 0; }
  .legal-table { min-width: 0; width: 100%; display: block; border: 0; font-size: .9rem; }
  .legal-table thead { display: none; }
  .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { margin: 0 0 12px; border: 1px solid #e2dbcf; border-radius: 10px; overflow: hidden; background: #fff; }
  .legal-table td { border: 0; border-bottom: 1px solid #eee8dd; padding: 10px 12px; }
  .legal-table td:last-child { border-bottom: 0; }
  .legal-table td::before { display: block; margin-bottom: 3px; color: #7b6a4d; font-size: .72rem; line-height: 1.25; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .legal-table td:nth-child(1)::before { content: 'Kategori'; }
  .legal-table td:nth-child(2)::before { content: 'Contoh data'; }
  .legal-table td:nth-child(3)::before { content: 'Kegunaan umum'; }

  .legal-actions { flex-direction: column; }
  .legal-btn { width: 100%; justify-content: center; }

  .legal-site-footer { width: calc(100% - 24px); margin-bottom: 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); flex-direction: column; }
  .legal-footer-links { gap: 10px 14px; }
}