/* ===== Halaman legal (Terms & Privacy). Dasar tampilan: profile.css (header, menu, bottom-nav, footer, latar) ===== */
.legal-main{padding-top:150px;padding-bottom:120px;position:relative;z-index:1;max-width:820px;margin:0 auto}
.legal-card{position:relative;padding:40px 36px 34px;border:1px solid rgba(200,200,200,.18);border-radius:28px;
  background:radial-gradient(circle at 90% 0,rgba(200,200,200,.07),transparent 40%),
             linear-gradient(150deg,rgba(20,20,20,.97),rgba(10,10,10,.99));
  box-shadow:0 44px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.legal-kicker{margin:0 0 14px;font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.legal-card h1{margin:0 0 12px;font-size:clamp(26px,5vw,38px);line-height:1.08;letter-spacing:-.055em;overflow-wrap:anywhere}
.legal-updated{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid rgba(200,200,200,.12);font:600 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--faint)}
.legal-card p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.75}
.legal-card strong{color:#f2f2f2;font-weight:800}
.legal-card a{color:#f2f2f2;font-weight:700;text-decoration:underline;text-decoration-color:rgba(200,200,200,.4);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-card a:hover{text-decoration-color:#fff}

.legal-sec{margin-top:30px;padding-top:26px;border-top:1px solid rgba(200,200,200,.1)}
.legal-card h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:clamp(17px,3.4vw,21px);line-height:1.25;letter-spacing:-.035em}
.legal-num{flex:none;display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border:1px solid rgba(200,200,200,.22);border-radius:11px;
  background:rgba(255,255,255,.05);font:700 11px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.legal-card h3{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;font-size:14.5px;line-height:1.45;letter-spacing:-.02em;color:#e8e8e8}
.legal-card h3 span{flex:none;font:700 11px/1 var(--mono);color:var(--faint)}

.legal-card ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.legal-card li{position:relative;padding:12px 14px 12px 34px;border:1px solid rgba(200,200,200,.1);border-radius:14px;background:rgba(255,255,255,.025);
  color:var(--muted);font-size:13.5px;line-height:1.7;overflow-wrap:anywhere}
.legal-card li::before{content:"";position:absolute;left:15px;top:20px;width:6px;height:6px;border-radius:50%;background:rgba(220,220,220,.55)}

.legal-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(200,200,200,.12)}
.legal-card .legal-switch a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(200,200,200,.22);border-radius:14px;
  background:rgba(255,255,255,.04);text-decoration:none;font-size:12.5px;transition:background .2s ease,border-color .2s ease,transform .2s var(--ease)}
.legal-card .legal-switch a:hover{background:rgba(255,255,255,.09);border-color:rgba(200,200,200,.42);transform:translateY(-1px)}

@media(max-width:760px){
  .legal-main{padding-top:130px;padding-bottom:130px}
  .legal-card{padding:28px 20px 26px;border-radius:24px}
  .legal-card li{padding:11px 12px 11px 30px;font-size:13px}
  .legal-card li::before{left:12px;top:19px}
}