/* Gaya bersama untuk halaman syarat, privasi, dan pengembalian dana.

   Dipisah dari halaman jualan yang sengaja dibuat satu berkas tanpa
   ketergantungan. Halaman hukum bukan halaman iklan: tidak ada kebutuhan
   memuat secepat mungkin, dan ketiganya berbagi tampilan yang sama —
   jadi satu berkas gaya lebih baik daripada tiga salinan yang bisa
   melenceng satu sama lain.

   Paletnya kembar dengan ninelingo.com dan aplikasinya. */

:root{
  --bg:#04101f; --bg-2:#061627; --surface:#0a1d33;
  --line:#ffffff1f; --line-kuat:#ffffff33;
  --teks:#e9eefb; --teks-lembut:#b9c6e0; --teks-samar:#8798b8;
  --pirus:#35cfae; --pirus-terang:#5ee8c9;
  --amber:#e2a95c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--teks);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.75; font-size:1.02rem; -webkit-font-smoothing:antialiased;
}
a{color:var(--pirus-terang)}
a:focus-visible{outline:3px solid var(--pirus-terang); outline-offset:3px; border-radius:4px}

.bungkus{width:100%; max-width:760px; margin-inline:auto; padding-inline:16px}

.atas{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.atas__isi{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem}
.merek{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--teks); font-weight:800; letter-spacing:-.02em}
.merek svg{width:32px; height:32px; border-radius:10px}
.atas a.kembali{color:var(--teks-lembut); text-decoration:none; font-size:.9rem; font-weight:600}
.atas a.kembali:hover{color:var(--teks)}

main{padding-block:clamp(2.5rem,6vw,4.5rem) 3rem}

h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem); font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:0}
.terbit{color:var(--teks-samar); font-size:.88rem; margin:.9rem 0 0}
.ringkas{
  margin-top:2rem; padding:1.15rem 1.3rem; border-radius:14px;
  background:#35cfae12; border:1px solid #35cfae3a; color:var(--teks-lembut); font-size:.96rem;
}
.ringkas b{color:var(--teks)}

h2{
  font-size:1.18rem; font-weight:700; letter-spacing:-.015em;
  margin:2.6rem 0 .7rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
h2:first-of-type{border-top:0; padding-top:0}
h3{font-size:1rem; font-weight:700; margin:1.5rem 0 .4rem}
p{margin:0 0 .9rem}
ul,ol{margin:0 0 1rem; padding-left:1.3rem}
li{margin-bottom:.45rem; color:var(--teks-lembut)}
p{color:var(--teks-lembut)}
strong{color:var(--teks)}

.isi-kunci{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:12px; padding:1rem 1.2rem; margin:1.2rem 0;
}
.isi-kunci p:last-child{margin-bottom:0}

table{border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.92rem}
th,td{padding:.7rem .85rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--bg-2); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--teks-lembut)}
tbody tr:last-child td{border-bottom:0}
td{color:var(--teks-lembut)}
td strong{color:var(--teks)}

.isian{
  background:#e2a95c1f; border:1px dashed var(--amber); border-radius:8px;
  padding:.1rem .45rem; color:var(--amber); font-weight:700; font-size:.92em;
}

footer{border-top:1px solid var(--line); padding-block:2.2rem; margin-top:3rem; color:var(--teks-samar); font-size:.87rem}
footer a{color:var(--teks-lembut)}
footer nav{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin-bottom:.8rem}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}