/* Arisan Tjhang — brand: docs/brand.md (family orange/green, NOT PT IR) */
:root {
  --oranye: #EE6C2D;
  --oranye-tua: #D85A1E;
  --hijau: #1E4438;
  --hijau-tua: #14302A;
  --krem: #F7F5F0;
  --putih: #FFFFFF;
  --tinta: #1C1B1A;
  --abu: #6B6862;
  --garis: #E2DDD4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--tinta);
  background: var(--krem);
  min-height: 100vh;
}

h1, h2, h3, .kicker, .btn, nav a {
  font-family: 'Oswald', 'Inter', sans-serif;
  letter-spacing: 0.03em;
}

.kicker {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--oranye);
}

/* chrome */
header.site {
  background: var(--hijau);
  color: var(--krem);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
header.site .brand {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--krem);
  text-decoration: none;
}
header.site .brand span { color: var(--oranye); }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a {
  color: var(--krem);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
}
nav a:hover { background: var(--hijau-tua); }
nav a.aktif { background: var(--oranye); color: var(--putih); }

main { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }

/* cards */
.card {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 20px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.stat .angka {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--hijau);
  margin-top: 4px;
}
.stat .sub { color: var(--abu); font-size: 13px; margin-top: 4px; }

/* buttons */
.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--hijau);
  color: var(--krem);
}
.btn:hover { background: var(--hijau-tua); }
.btn.utama { background: var(--oranye); color: var(--putih); }
.btn.utama:hover { background: var(--oranye-tua); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.kecil { padding: 6px 12px; font-size: 12px; }

/* forms */
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  font: inherit;
  background: var(--putih);
}
input:focus, select:focus { outline: 2px solid var(--oranye); border-color: var(--oranye); }

/* tables */
table { width: 100%; border-collapse: collapse; background: var(--putih); }
th {
  background: var(--hijau);
  color: var(--krem);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 10px 12px;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--garis); }
tr:last-child td { border-bottom: none; }
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: 12px; }

/* badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge.tunai { background: #E7F0E9; color: var(--hijau); }
.badge.transfer { background: #FDEBDF; color: var(--oranye-tua); }
.badge.belum { background: #EFEDE8; color: var(--abu); }
.badge.menang { background: var(--oranye); color: var(--putih); }

.pesan-error { color: #B3261E; font-size: 14px; margin-top: 12px; min-height: 20px; }

/* login */
.masuk-bungkus {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--hijau);
}
.masuk-kartu { width: 100%; max-width: 380px; padding: 32px 28px; }
.masuk-kartu h1 {
  font-size: 26px;
  text-transform: uppercase;
  color: var(--hijau);
  letter-spacing: 0.06em;
}

/* wheel */
.roda-bungkus { display: flex; flex-direction: column; align-items: center; gap: 18px; }
#roda-canvas { max-width: 100%; height: auto; }
.penunjuk {
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid var(--oranye);
  margin-bottom: -6px;
  z-index: 2;
}
.kartu-menang {
  text-align: center;
  border: 2px solid var(--oranye);
  background: var(--putih);
}
.kartu-menang .nama {
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--oranye);
  text-transform: uppercase;
  margin: 6px 0;
}