/* Halaman dokumen & publik (privasi, ketentuan, hapus akun, status servis, booking): tampilan modern,
   sama dengan dashboard dan halaman depan. Dimuat setelah app.css; hanya berlaku di body.modern. */

body.modern {
  --brand: #d4500a;
  --brand-tint: #fdeadd;
  --bg: #f5f4f1;
  --well: #f1efeb;
  --line: rgba(23, 25, 28, 0.08);
  --line-strong: rgba(23, 25, 28, 0.16);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(23, 25, 28, 0.04), 0 12px 32px -16px rgba(23, 25, 28, 0.18);
  --shadow-lift: 0 2px 4px rgba(23, 25, 28, 0.05), 0 24px 48px -20px rgba(23, 25, 28, 0.28);
  background: radial-gradient(900px 380px at 100% -80px, rgba(212, 80, 10, 0.07), transparent 70%), var(--bg);
  background-attachment: fixed;
  letter-spacing: -0.005em;
}

.modern .hazard { display: none; }
.modern .wrap { padding-top: 24px; }
.modern .display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
.modern .mono { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 700; }
.modern .plate { font-family: "JetBrains Mono", ui-monospace, monospace; border: 0; border-radius: 8px; }

/* Tautan kembali berbentuk pil */
.modern .wrap > p:first-child { margin: 0 0 14px; }
.modern .wrap > p:first-child a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.modern .wrap > p:first-child a:hover { transform: translateX(-3px); box-shadow: var(--shadow-lift); }

/* Kepala halaman */
.modern .panel-dark {
  border-radius: 28px;
  padding: 28px;
  background: radial-gradient(520px 240px at 100% 0%, rgba(255, 138, 61, 0.26), transparent 70%), linear-gradient(150deg, #24282d, #121417);
  box-shadow: var(--shadow-lift);
}
.modern .eyebrow { font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: none; color: #b4b9c1; }
.modern .panel-dark h1.display { font-size: clamp(30px, 6vw, 42px) !important; }

/* Isi */
.modern .card { border: 0; border-radius: 22px; padding: 22px 24px; box-shadow: var(--shadow); }
.modern .section-title { font-family: var(--font); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; text-transform: none; margin: 0 0 10px; }
.modern .section-title::before { width: 8px; height: 8px; border-radius: 50%; }
.modern .card p, .modern .card li { font-size: 15px; }
.modern .card ul, .modern .card ol { padding-left: 20px; }
.modern .card li + li { margin-top: 6px; }
.modern .card a, .modern .footer a { color: var(--brand); font-weight: 600; }
.modern .muted { color: var(--muted); }
.modern .footer { font-size: 13px; }

/* Formulir & tombol (hapus akun, booking) */
.modern .btn { border-radius: 999px; font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: -0.005em; min-height: 46px; padding: 0 22px; box-shadow: 0 10px 22px -12px rgba(212, 80, 10, 0.8); transition: transform 0.15s ease, filter 0.15s ease; }
.modern .btn.outline { box-shadow: none; border: 1px solid var(--line-strong); background: var(--surface); }
.modern .btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.modern .btn:active:not(:disabled) { transform: scale(0.97); }
.modern .field span { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.modern .field input, .modern .field select { border: 1px solid var(--line-strong); border-radius: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.modern .field input:focus, .modern .field select:focus { border: 1px solid var(--brand); box-shadow: 0 0 0 4px rgba(212, 80, 10, 0.15); }
.modern .notice { border-radius: 16px; }
.modern .pill { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12px; }
.modern .tag { border-radius: 999px; font-weight: 700; }

/* Gerak */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modern .wrap > *, .modern .stack > * { animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.modern .stack > :nth-child(2) { animation-delay: 0.05s; }
.modern .stack > :nth-child(3) { animation-delay: 0.1s; }
.modern .stack > :nth-child(4) { animation-delay: 0.14s; }
.modern .stack > :nth-child(n+5) { animation-delay: 0.18s; }
.modern .stack { animation: none; }

@media (prefers-reduced-motion: reduce) { .modern *, .modern *::before, .modern *::after { animation: none !important; transition: none !important; } }
@media (max-width: 560px) { .modern .panel-dark { padding: 22px; border-radius: 24px; } .modern .card { padding: 18px; } }