/* =============================================================================
   Halaman hukum publik: /privacy-policy, /terms-of-service, /data-deletion
   -----------------------------------------------------------------------------
   Berkas TERPISAH dari main.css, bukan ditempel di belakangnya, karena tiga
   halaman ini adalah satu-satunya halaman yang dibuka orang luar (reviewer
   Meta, mitra yang belum login). main.css sudah 2.500+ baris dan seluruhnya
   untuk dashboard — tidak ada gunanya diunduh demi membaca kebijakan privasi.

   Variabel warna/radius/bayangan diambil dari :root milik main.css supaya
   halaman ini tetap terasa satu produk dengan dashboard.
   ============================================================================= */

.legal-body{
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topbar ---------- */
.legal-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px;
  background: var(--surface);
  border-bottom:1px solid var(--border);
}
.legal-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.legal-logo{ height:30px; width:auto; }
.legal-brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.legal-brand-text b{ font-family:var(--font-display); font-size:.95rem; font-weight:650; }
.legal-brand-text i{ font-style:normal; font-size:.78rem; color:var(--text-muted); }

/* Pemilih bahasa — segmented control kecil */
.legal-lang{ display:flex; gap:2px; padding:3px; background:var(--surface-sunken); border-radius:var(--radius-pill); }
.legal-lang a{
  display:block; padding:5px 14px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--text-secondary); text-decoration:none;
  border-radius:var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.legal-lang a:hover{ color:var(--text-primary); }
.legal-lang a.is-active{ background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }

/* ---------- Tab antar dokumen ---------- */
.legal-tabs{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.legal-tabs-inner{
  max-width:860px; margin:0 auto; padding:0 24px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.legal-tabs-inner::-webkit-scrollbar{ display:none; }
.legal-tab{
  flex:0 0 auto;
  padding:13px 12px;
  font-size:.86rem; font-weight:550;
  color:var(--text-secondary); text-decoration:none;
  border-bottom:2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.legal-tab:hover{ color:var(--text-primary); }
.legal-tab.is-active{ color:var(--brand-blue); border-bottom-color:var(--brand-blue); }

/* ---------- Badan dokumen ---------- */
.legal-main{ max-width:860px; margin:0 auto; padding:40px 24px 64px; }

.legal-header{ margin-bottom:34px; }
.legal-eyebrow{
  font-size:.72rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-blue); margin-bottom:10px;
}
.legal-header h1{
  font-family:var(--font-display);
  font-size:clamp(1.65rem, 4vw, 2.3rem); font-weight:680; line-height:1.15;
  letter-spacing:-.02em; margin:0 0 12px;
}
.legal-meta{ font-size:.84rem; color:var(--text-muted); }
.legal-meta b{ color:var(--text-secondary); font-weight:600; }

/* Ringkasan di puncak halaman. Bukan hiasan: reviewer Meta dan mitra
   sama-sama perlu tahu inti dokumen tanpa membaca 20 pasal lebih dulu. */
.legal-summary{
  margin:26px 0 34px; padding:20px 22px;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--brand-blue);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}
.legal-summary h2{ font-size:.95rem; font-weight:650; margin:0 0 12px; font-family:var(--font-display); }
/* list-style DITULIS ULANG di sini karena main.css baris 102 mereset
   `ul{ list-style:none }` untuk seluruh aplikasi. Tanpa baris ini, daftar
   di dokumen hukum kehilangan butirnya dan berubah jadi paragraf menjorok
   yang sulit dibaca. */
.legal-summary ul{ margin:0; padding-left:20px; list-style:disc; }
.legal-summary li{ font-size:.9rem; line-height:1.65; color:var(--text-secondary); margin-bottom:7px; }
.legal-summary li:last-child{ margin-bottom:0; }
.legal-summary li b{ color:var(--text-primary); font-weight:600; }

.legal-section{ margin-bottom:34px; scroll-margin-top:64px; }
.legal-section h2{
  font-family:var(--font-display);
  font-size:1.12rem; font-weight:650; letter-spacing:-.01em;
  margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid var(--border-soft);
}
.legal-section h3{
  font-family:var(--font-display);
  font-size:.96rem; font-weight:620; margin:22px 0 8px;
}
.legal-section p{ font-size:.925rem; line-height:1.75; color:var(--text-secondary); margin:0 0 13px; }
.legal-section p:last-child{ margin-bottom:0; }
.legal-section ul{ margin:0 0 13px; padding-left:22px; list-style:disc; }
.legal-section ol{ margin:0 0 13px; padding-left:22px; list-style:decimal; }
.legal-section li::marker{ color:var(--text-muted); }
.legal-section li{ font-size:.925rem; line-height:1.72; color:var(--text-secondary); margin-bottom:7px; }
.legal-section b, .legal-section strong{ color:var(--text-primary); font-weight:600; }
.legal-section a{ color:var(--brand-blue); text-decoration:underline; text-underline-offset:2px; }
.legal-section code{
  font-family:var(--font-mono); font-size:.845em;
  background:var(--surface-sunken); border:1px solid var(--border-soft);
  padding:1px 5px; border-radius:var(--radius-sm); color:var(--text-primary);
}

/* ---------- Tabel data ---------- */
.legal-table-wrap{ overflow-x:auto; margin:0 0 13px; }
.legal-table{
  width:100%; min-width:520px; border-collapse:collapse;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden;
  font-size:.86rem;
}
.legal-table th, .legal-table td{
  text-align:left; padding:10px 13px; vertical-align:top;
  border-bottom:1px solid var(--border-soft); line-height:1.6;
}
.legal-table thead th{
  background:var(--surface-alt); font-weight:620; color:var(--text-primary);
  font-size:.79rem; letter-spacing:.02em; text-transform:uppercase;
}
.legal-table tbody td{ color:var(--text-secondary); }
.legal-table tbody tr:last-child td{ border-bottom:none; }
.legal-table td b{ color:var(--text-primary); }

/* ---------- Kotak penekanan ---------- */
.legal-callout{
  margin:16px 0; padding:15px 17px;
  border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface); font-size:.9rem; line-height:1.68;
  color:var(--text-secondary);
}
.legal-callout b{ color:var(--text-primary); }
.legal-callout--warn{ border-color:rgba(217,119,6,.32); background:rgba(217,119,6,.055); }
.legal-callout--good{ border-color:rgba(14,159,140,.32); background:rgba(14,159,140,.055); }
.legal-callout--info{ border-color:rgba(26,111,205,.28); background:rgba(26,111,205,.05); }

/* ---------- Langkah bernomor (halaman penghapusan data) ---------- */
.legal-steps{ list-style:none !important; margin:0 0 18px; padding:0; counter-reset:legalstep; }
.legal-steps ul{ list-style:disc; }
.legal-steps > li{
  position:relative; counter-increment:legalstep;
  padding:0 0 22px 46px; margin:0;
}
.legal-steps > li::before{
  content:counter(legalstep);
  position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-blue); color:var(--text-on-brand);
  font-family:var(--font-display); font-size:.86rem; font-weight:650;
}
/* Garis penghubung antar langkah */
.legal-steps > li:not(:last-child)::after{
  content:''; position:absolute; left:14px; top:34px; bottom:6px;
  width:2px; background:var(--border);
}
.legal-steps h3{ margin:4px 0 7px; font-size:.98rem; font-weight:620; font-family:var(--font-display); }
.legal-steps p{ font-size:.92rem; line-height:1.72; color:var(--text-secondary); margin:0 0 10px; }
.legal-steps ul{ padding-left:19px; margin:0 0 10px; }

/* Template email siap salin */
.legal-template{
  background:var(--brand-navy); color:#e4e4e7;
  border-radius:var(--radius-md); padding:17px 19px;
  font-family:var(--font-mono); font-size:.82rem; line-height:1.72;
  white-space:pre-wrap; word-break:break-word; margin:12px 0;
}
.legal-template .k{ color:#a1a1aa; }

/* Selektornya ditulis `.legal-section a.legal-mailto`, BUKAN `.legal-mailto`
   saja: aturan `.legal-section a` di atas punya specificity lebih tinggi
   (0-1-1 lawan 0-1-0), sehingga tombol ini sempat mewarisi warna biru merek
   di atas latar biru merek — teksnya ada di HTML tapi tidak terlihat sama
   sekali. */
.legal-mailto,
.legal-section a.legal-mailto{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; margin-top:4px;
  background:var(--brand-blue); color:var(--text-on-brand);
  font-size:.88rem; font-weight:600;
  text-decoration:none; text-underline-offset:0;
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.legal-mailto:hover,
.legal-section a.legal-mailto:hover{
  background:var(--brand-blue-dark); color:var(--text-on-brand);
  transform:translateY(-1px);
}

/* ---------- Kartu kontak & footer ---------- */
.legal-contact-card{
  margin-top:42px; padding:24px 26px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.legal-contact-card h2{ font-family:var(--font-display); font-size:1.06rem; font-weight:650; margin:0 0 6px; }
.legal-contact-lead{ font-size:.9rem; color:var(--text-secondary); margin:0 0 18px; line-height:1.65; }
.legal-dl{ margin:0; display:grid; gap:14px; }
.legal-dl > div{ display:grid; grid-template-columns:170px 1fr; gap:14px; }
.legal-dl dt{ font-size:.82rem; font-weight:620; color:var(--text-primary); }
.legal-dl dd{ margin:0; font-size:.88rem; color:var(--text-secondary); line-height:1.6; }
.legal-dl dd a{ color:var(--brand-blue); }
.legal-muted{ color:var(--text-muted); }

.legal-footer{ border-top:1px solid var(--border); background:var(--surface); margin-top:8px; }
.legal-footer-inner{
  max-width:860px; margin:0 auto; padding:22px 24px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.83rem; color:var(--text-secondary); line-height:1.65;
}
.legal-footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.legal-footer-links a{ color:var(--text-secondary); text-decoration:none; }
.legal-footer-links a:hover{ color:var(--brand-blue); text-decoration:underline; }

/* ---------- Layar kecil ---------- */
@media (max-width: 640px){
  .legal-topbar{ padding:12px 16px; }
  .legal-tabs-inner{ padding:0 16px; }
  .legal-main{ padding:28px 16px 48px; }
  .legal-contact-card{ padding:20px 18px; }
  .legal-dl > div{ grid-template-columns:1fr; gap:3px; }
  .legal-footer-inner{ padding:20px 16px; flex-direction:column; gap:14px; }
}

/* ---------- Cetak / simpan sebagai PDF ----------
   Mitra kadang diminta menyimpan salinan dokumen yang mereka setujui, dan
   reviewer Meta kadang melampirkan tangkapan halaman. Navigasi tidak perlu
   ikut tercetak. */
@media print{
  .legal-topbar, .legal-tabs, .legal-lang, .legal-mailto{ display:none !important; }
  .legal-body{ background:#fff; }
  .legal-main{ max-width:none; padding:0; }
  .legal-section{ break-inside:avoid; }
  .legal-section a{ text-decoration:none; color:inherit; }
  .legal-template{ background:#f4f4f5; color:#09090b; border:1px solid #d4d4d8; }
}