/* onze.css — token + kit ONZE Absensi. Token sama dengan onze-books (kasir) supaya crew mengenali rupanya. */
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("/fonts/dm-sans-latin-opsz-wght.woff2") format("woff2"); }
@font-face { font-family: "Atelier"; font-weight: 400; font-display: swap; src: url("/fonts/atelier.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("/fonts/dm-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Gochi Hand"; font-weight: 400; font-display: swap; src: url("/fonts/gochi-hand-latin-400.woff2") format("woff2"); }

:root {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  --krem: #f4eee6;
  --krem-deck: #f4eee2;
  --krem-terang: #fbf6ee;
  --hijau: #23493c;
  --hijau-gelap: #18362e;
  --tan: #cea380;
  --terracotta: #c4552d;
  --olive: #6e7b3a;
  --cokelat: #4a2f22;
  --charcoal: #24231f;
  --font-display: "Atelier", "DM Sans", sans-serif;
  --font-text: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;
  --font-hand: "Gochi Hand", cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pegas: cubic-bezier(0.34, 1.56, 0.64, 1);
  --potong: 34px 12px 28px 16px / 14px 30px 12px 28px;
  --potong-2: 48px 20px 40px 26px / 22px 2.8rem 20px 48px;
  --bayang: 8px 8px 0 var(--terracotta);
  --bayang-kecil: 5px 5px 0 var(--terracotta);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-text);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  font-variant-numeric: tabular-nums;
  background: var(--krem);
  color: var(--hijau-gelap);
  -webkit-tap-highlight-color: transparent;
}
body { min-height: 100dvh; overflow-x: hidden; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("/noise.svg"); opacity: 0.05;
}
button, input, textarea { font: inherit; color: inherit; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* huruf */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; }
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.tangan { font-family: var(--font-hand); }

/* logo: warna diatur lewat background-color */
.logo {
  display: block; aspect-ratio: 602 / 136; background: var(--krem);
  -webkit-mask: url("/logo/onze-lockup-horizontal.svg") center / contain no-repeat;
  mask: url("/logo/onze-lockup-horizontal.svg") center / contain no-repeat;
}

/* tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none;
  min-height: 56px; padding: 0.75rem 1.25rem;
  border: 3px solid var(--hijau-gelap); border-radius: var(--potong);
  background: var(--tan); color: var(--hijau-gelap);
  font-weight: 800; font-size: 1rem; letter-spacing: 0.01em;
  box-shadow: var(--bayang);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms;
}
.tombol:active { transform: translate(6px, 6px); box-shadow: 2px 2px 0 var(--terracotta); }
.tombol:disabled { opacity: 0.5; cursor: not-allowed; }
.tombol.penuh { width: 100%; }
.tombol.hijau { background: var(--hijau); color: var(--krem); }
.tombol.krem { background: var(--krem-terang); box-shadow: none; }
.tombol.krem:active { transform: translateY(2px); }
.tombol.tera { background: var(--terracotta); color: var(--krem); box-shadow: 8px 8px 0 var(--hijau-gelap); }
.tombol.kecil { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9rem; box-shadow: var(--bayang-kecil); }
.tombol.kecil.krem { box-shadow: none; }
.tombol.teks { min-height: 44px; border-color: transparent; background: transparent; box-shadow: none; text-decoration: none; padding-inline: 0.5rem; }

/* isian */
.isian { display: grid; gap: 0.5rem; }
.isian > span { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.isian input, .isian textarea {
  width: 100%; min-height: 56px; padding: 0.75rem 1rem;
  border: 3px solid var(--hijau-gelap); border-radius: 4px;
  background: var(--krem-terang); font-size: 1.15rem; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.isian textarea { min-height: 96px; font-size: 1rem; font-weight: 500; resize: vertical; }
.isian input:focus, .isian textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 4px 4px 0 var(--terracotta); }
.isian small { font-size: 0.85rem; color: var(--cokelat); }

/* ubin pilihan (pengganti kotak pilih dan centang bawaan peramban) */
.ubin { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ubin button {
  min-height: 48px; padding: 0.5rem 1rem;
  border: 3px solid var(--hijau-gelap); border-radius: 999px;
  background: var(--krem-terang); font-weight: 700; font-size: 0.95rem;
  transition: background 140ms, transform 140ms var(--pegas);
}
.ubin button[aria-pressed="true"] { background: var(--hijau); color: var(--krem); transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--terracotta); }

/* kertas: kartu potong tangan */
.kertas {
  position: relative; padding: 1.25rem;
  border: 3px solid var(--hijau-gelap); border-radius: var(--potong-2);
  background: var(--krem-terang); box-shadow: var(--bayang);
}
.kertas.hijau { background: var(--hijau); color: var(--krem); }
.kertas.datar { box-shadow: none; }

/* cap tinta */
.cap {
  display: inline-grid; place-items: center; padding: 0.35rem 0.9rem;
  border: 3px solid currentColor; border-radius: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-6deg); mix-blend-mode: multiply;
}
.cap.tera { color: var(--terracotta); }
.cap.hijau { color: var(--hijau); }
.cap.olive { color: var(--olive); }
.cap.cokelat { color: var(--cokelat); }

/* pil status */
.pil {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 28px; padding: 0.15rem 0.7rem;
  border: 2px solid var(--hijau-gelap); border-radius: 999px; background: var(--krem-terang);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.pil.hijau { background: var(--hijau); color: var(--krem); border-color: var(--hijau); }
.pil.tera { background: var(--terracotta); color: var(--krem); border-color: var(--terracotta); }
.pil.tan { background: var(--tan); }
.pil.olive { background: var(--olive); color: var(--krem); border-color: var(--olive); }
.pil.cokelat { background: var(--cokelat); color: var(--krem); border-color: var(--cokelat); }

/* lembar bawah */
.tirai { position: fixed; inset: 0; z-index: 40; background: rgb(24 54 46 / 0.62); opacity: 0; transition: opacity 220ms; }
.tirai.buka { opacity: 1; }
.lembar {
  position: fixed; left: 50%; bottom: 0; z-index: 41; width: min(100%, 34rem);
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  border: 3px solid var(--hijau-gelap); border-bottom: 0; border-radius: 40px 18px 0 0 / 26px 34px 0 0;
  background: var(--krem); transform: translate(-50%, 104%); transition: transform 380ms var(--ease);
}
.lembar.buka { transform: translate(-50%, 0); }
.lembar h2 { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; }
.lembar .susun { display: grid; gap: 1.1rem; }
.lembar .tutup { position: absolute; top: 0.9rem; right: 0.9rem; width: 44px; height: 44px; border: 3px solid var(--hijau-gelap); border-radius: 50%; background: var(--krem-terang); font-size: 1.3rem; line-height: 1; }

/* pesan */
.pesan { margin: 0; padding: 0.75rem 1rem; border: 2px solid var(--terracotta); border-radius: 6px; background: var(--krem-terang); color: var(--cokelat); font-weight: 600; }
.pesan.ok { border-color: var(--hijau); color: var(--hijau); }
.roti {
  position: fixed; left: 50%; bottom: calc(6.5rem + env(safe-area-inset-bottom)); z-index: 60; max-width: min(92vw, 28rem);
  padding: 0.85rem 1.1rem; border: 3px solid var(--hijau-gelap); border-radius: var(--potong);
  background: var(--hijau-gelap); color: var(--krem); font-weight: 700; box-shadow: var(--bayang-kecil);
  transform: translate(-50%, 40px) rotate(-1deg); opacity: 0; transition: transform 320ms var(--pegas), opacity 200ms;
}
.roti.muncul { transform: translate(-50%, 0) rotate(-1deg); opacity: 1; }

/* dock bawah */
.dock {
  position: fixed; left: 50%; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; width: min(calc(100% - 1.5rem), 30rem);
  padding: 0.35rem; border: 3px solid var(--hijau-gelap); border-radius: 26px 12px 24px 14px / 14px 24px 12px 26px;
  background: var(--hijau-gelap); box-shadow: var(--bayang-kecil); transform: translateX(-50%);
}
.dock button {
  position: relative; display: grid; place-items: center; gap: 0.1rem; min-height: 56px; padding: 0.35rem 0.2rem;
  border: 0; border-radius: 18px 8px 16px 10px; background: transparent; color: var(--krem);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.dock button svg { width: 24px; height: 24px; }
.dock button[aria-current="page"] { background: var(--tan); color: var(--hijau-gelap); }
.dock .titik { position: absolute; top: 6px; right: 18%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--terracotta); color: var(--krem); font-size: 0.65rem; line-height: 18px; }

/* kalender pilih tanggal */
.kal { display: grid; gap: 0.6rem; }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kal-kepala strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.kal-kepala button { width: 44px; height: 44px; border: 3px solid var(--hijau-gelap); border-radius: 50%; background: var(--krem-terang); font-weight: 800; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-grid span { text-align: center; font-family: var(--font-mono); font-size: 0.7rem; padding: 0.2rem 0; }
.kal-grid button { aspect-ratio: 1; min-height: 40px; border: 2px solid transparent; border-radius: 10px; background: transparent; font-weight: 700; }
.kal-grid button:disabled { opacity: 0.3; cursor: default; }
.kal-grid button.hari-ini { border-color: var(--hijau-gelap); }
.kal-grid button.pilih { background: var(--hijau); color: var(--krem); }
.kal-grid button.rentang { background: var(--tan); }

/* gerak masuk */
@keyframes naik { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ayun { from { translate: 0 -5px; rotate: -1deg; } to { translate: 0 5px; rotate: 1deg; } }
@keyframes cap-turun { 0% { opacity: 0; transform: scale(2.4) rotate(-18deg); } 60% { opacity: 1; transform: scale(0.92) rotate(-7deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes guncang { 0%, 100% { transform: none; } 30% { transform: translate(2px, 3px) rotate(0.6deg); } 60% { transform: translate(-1px, -1px); } }
.muncul-naik { animation: naik 520ms var(--ease) both; }
.stiker { position: absolute; pointer-events: none; height: auto; animation: ayun 6s ease-in-out infinite alternate; }