/*
  Laksamana Muda. Office design system.
  Satu sumber token, tipografi, animasi, dan komponen dasar untuk semua modul
  office (landing, ordering, konten, reservasi). Modul cukup me-link file ini
  lalu memakai class yang sama, sehingga desain seragam lintas modul.

  Aturan copy: jangan pakai em dash atau separator middle dot. Pakai koma atau
  titik.
*/

/* ---------- Tokens ---------- */
:root{
    --ink:#2A2620; --ink-2:#3A3428; --ink-3:#4A4234;
    --gold:#A9791F; --gold-2:#C8961F; --gold-dim:#7A560F; --gold-soft:#F2E9D3;
    --paper:#F7F6F4; --surface:#FFFFFF; --line:#E7E1D3;
    --text:#2A2620; --muted:#5C574D; --muted-2:#928C80;
    --ok:#1F9D5F; --ok-bg:#E4F5EC;
    --warn:#B5831A; --warn-bg:#F7EFDB;
    --danger:#C9432B; --danger-bg:#F8E4DF;
    --info:#2F7FC4; --info-bg:#E4EFF8;
    --radius:16px; --radius-sm:10px;
    --shadow:0 4px 18px rgba(50,42,28,.06);
    --shadow-lg:0 18px 48px rgba(50,42,28,.12);
    --ring:0 0 0 3px rgba(227,160,8,.18);
    --ease:cubic-bezier(.16,1,.3,1);
    --serif:'Plus Jakarta Sans',system-ui,sans-serif;
    --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    font-family:var(--sans);
    background:
        radial-gradient(900px 480px at 50% -12%, rgba(227,160,8,.09), transparent 60%),
        var(--paper);
    color:var(--text); font-size:14px; line-height:1.55;
    -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; letter-spacing:-.02em; line-height:1.18; color:var(--ink)}
a{color:var(--info)}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.hidden{display:none !important}

/* ---------- Animations ----------
   Semua gerak dimatikan oleh blok prefers-reduced-motion di bawah. */
@keyframes lm-rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
@keyframes lm-pulse{ 0%,100%{box-shadow:0 0 0 3px var(--ok-bg)} 50%{box-shadow:0 0 0 6px rgba(31,157,95,.05)} }
.rise{ animation:lm-rise .6s var(--ease) both }

/* ---------- Buttons ---------- */
.btn{border:none;border-radius:var(--radius-sm);padding:12px 18px;font-weight:600;font-size:15px;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s var(--ease), transform .1s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--gold-2),var(--gold-dim));color:#fff;box-shadow:0 3px 12px rgba(122,86,15,.28)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold-2);background:var(--gold-soft)}

/* ---------- Pills and badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-2);background:var(--gold-soft);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.badge-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ok)}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);animation:lm-pulse 2.4s ease-in-out infinite}
.badge-soon{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);border-radius:20px;padding:3px 9px}

/* ---------- Form fields ---------- */
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:15px;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--ring)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    *{animation:none !important}
    .btn:active{transform:none}
}