/* ==========================================================================
   legal.css: gaya bersama untuk halaman dokumen (privasi, faq, syarat)
   Dimuat SETELAH base.css agar bisa memakai token desain di :root
   (--bg, --ink, --line, --muted, --font-body, --font-display, --max).

   Catatan: halaman-halaman ini TIDAK memuat main.js, jadi sengaja tidak memakai
   .nav bawaan (yang tombol menunya butuh JavaScript). Navigasinya hanya logo dan
   tautan kembali, sehingga tetap berfungsi walau JavaScript mati.
   ========================================================================== */

.legal-nav{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(100% - 40px,var(--max));margin:0 auto;padding:16px 0;
  background:rgba(246,246,243,.82);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.legal-nav .logo{font-size:16px}
.legal-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:#55565a;
  padding:9px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.7);transition:color .25s ease,border-color .25s ease;
}
.legal-back:hover{color:#111;border-color:rgba(17,18,20,.2)}
.legal-back i{font-size:10px}

/* Kolom baca sengaja dipersempit (760px) supaya baris teks tidak terlalu
   panjang, karena dokumen dibaca berurutan, bukan dipindai seperti landing page. */
.legal-wrap{width:min(100% - 40px,760px);margin:0 auto;padding:64px 0 0}

.legal-hero{margin-bottom:36px}
.legal-kicker{
  display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:#7b7b82;margin-bottom:14px;
}
.legal-hero h1{
  font-family:var(--font-display);font-size:clamp(30px,4.4vw,46px);
  line-height:1.05;letter-spacing:-.045em;margin-bottom:16px;
}
.legal-hero p{color:#74757a;line-height:1.7;font-size:15px}
.legal-meta{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:#96979b;
}

.legal-card{
  padding:30px 32px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:22px;
  background:rgba(255,255,255,.62);
}
.legal-card h2{
  font-family:var(--font-display);font-size:21px;letter-spacing:-.035em;
  margin-bottom:14px;color:var(--ink);
}
.legal-card h2 .legal-no{
  display:inline-block;min-width:26px;margin-right:8px;
  font-size:12px;color:#b0b0b5;letter-spacing:.08em;
}
.legal-card h3{font-size:14px;font-weight:700;margin:22px 0 8px;color:#2c2d31}
.legal-card p{color:#5f6066;line-height:1.75;font-size:14px;margin-bottom:12px}
.legal-card p:last-child{margin-bottom:0}
.legal-card a{color:#111;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(17,18,20,.25)}
.legal-card a:hover{text-decoration-color:#111}

.legal-card ul{list-style:none;margin:0 0 12px}
.legal-card ul li{
  position:relative;padding-left:22px;margin-bottom:9px;
  color:#5f6066;line-height:1.7;font-size:14px;
}
.legal-card ul li:before{
  content:"";position:absolute;left:4px;top:9px;
  width:5px;height:5px;border-radius:50%;background:rgba(17,18,20,.22);
}
.legal-card ul li:last-child{margin-bottom:0}

/* Daftar isi: tautan bantu di awal dokumen panjang. */
.legal-toc{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;
}
.legal-toc a{
  font-size:12px;color:#5f6066;padding:8px 13px;
  border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.62);
  transition:color .25s ease,border-color .25s ease;
}
.legal-toc a:hover{color:#111;border-color:rgba(17,18,20,.2)}

/* Sorotan untuk catatan penting yang perlu cepat terlihat pembaca. */
.legal-note{
  padding:18px 20px;margin-bottom:16px;
  border:1px solid var(--line);border-left:3px solid #111214;border-radius:14px;
  background:rgba(255,255,255,.75);
  color:#5f6066;line-height:1.7;font-size:13px;
}
.legal-note b{color:#111}

/* FAQ memakai <details>/<summary> supaya bisa dibuka-tutup tanpa JavaScript,
   sekaligus tetap terbaca pembaca layar sebagai kontrol bawaan browser. */
.faq-item{
  border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.62);margin-bottom:10px;overflow:hidden;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{
  content:"+";flex:0 0 auto;font-size:17px;font-weight:400;
  color:#9a9aa0;transition:transform .3s ease;
}
.faq-item[open] summary:after{content:"\2013";color:#111}
.faq-item summary:hover{background:rgba(0,0,0,.025)}
.faq-body{padding:0 22px 22px;color:#5f6066;line-height:1.75;font-size:14px}
.faq-body ul{margin-top:10px}

.legal-foot{
  margin-top:56px;padding:26px 0 40px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:#96979b;
}
.legal-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.legal-foot a{transition:color .25s ease}
.legal-foot a:hover{color:#111}

@media(max-width:700px){
  .legal-wrap{padding:40px 0 0}
  .legal-card{padding:24px 20px;border-radius:18px}
  .legal-card h2{font-size:19px}
  .faq-item summary{padding:16px 18px;font-size:13px}
  .faq-body{padding:0 18px 18px}
  .legal-foot{flex-direction:column;align-items:flex-start;gap:14px}
}