/* Workshop Palantara — design system bersama.
 *
 * SATU bahasa visual untuk toko, halaman masuk, dan admin: token warna,
 * tipografi, dan komponen (tombol, kartu, modal, badge, tabel, formulir,
 * toast) semuanya di sini. Berkas gaya lain hanya mengatur TATA LETAK
 * halamannya — kalau sebuah rupa dipakai dua halaman, tempatnya di sini.
 *
 * Emas adalah aksen utama karena inti situs ini memang koin; pirus untuk
 * fokus dan status hidup; merah hanya untuk bahaya. Segala yang lain diredam
 * supaya aksen tidak berebut perhatian dengan dirinya sendiri.
 */

:root {
  --dasar:      #0c1116;
  --dasar-2:    #111922;
  --kartu:      #16212c;
  --kartu-naik: #1d2b38;
  --garis:      #24333f;
  --garis-samar:#1a2733;

  --teks:       #e7eff6;
  --redup:      #93a7b8;
  --samar:      #61758a;

  --emas:       #f0b429;
  --emas-tua:   #c98a10;
  --emas-tinta: #17110a;
  --pirus:      #2dd4bf;
  --merah:      #f0616d;
  --merah-muda: #ffb3b9;

  --sudut:      14px;
  --sudut-kecil:9px;
  --bayang:     0 10px 34px rgba(0,0,0,.45);
  --huruf:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --huruf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--huruf);
  color: var(--teks);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(240,180,41,.10), transparent 62%),
    radial-gradient(760px 420px at -6% 8%, rgba(45,212,191,.08), transparent 58%),
    var(--dasar);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--pirus); }

.lewati {
  position: absolute; left: -9999px;
  background: var(--emas); color: var(--emas-tinta); padding: .7rem 1rem;
  border-radius: var(--sudut-kecil); font-weight: 700; z-index: 100;
}
.lewati:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--emas); outline-offset: 3px; border-radius: 6px; }

.mono { font-family: var(--huruf-mono); font-size: .8rem; color: var(--redup); }
.angka { font-variant-numeric: tabular-nums; }
.kosong { grid-column: 1/-1; color: var(--samar); font-style: italic; }

/* ============ Merek ============ */
.merek { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.merek-tanda {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: linear-gradient(145deg, var(--emas), var(--emas-tua));
  box-shadow: 0 0 0 1px rgba(240,180,41,.35), 0 6px 16px rgba(240,180,41,.22);
  position: relative;
}
.merek-tanda::after {
  content: ""; position: absolute; inset: 9px;
  border: 2.5px solid rgba(23,17,10,.75); border-radius: 50%;
}
.merek-teks { display: flex; flex-direction: column; line-height: 1.1; }
.merek-teks strong { font-size: 1.02rem; letter-spacing: -.015em; }
.merek-teks small { color: var(--samar); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.merek-tengah { justify-content: center; margin-right: 0; }

/* ============ Tombol ============ */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1rem; border-radius: var(--sudut-kecil);
  border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
a.tombol { text-decoration: none; }
.tombol:active { transform: translateY(1px); }
.tombol-utama { background: var(--emas); color: var(--emas-tinta); }
.tombol-utama:hover:not(:disabled) { background: #ffc84a; }
.tombol-utama:disabled { background: var(--garis); color: var(--samar); cursor: not-allowed; }
.tombol-hantu { background: transparent; border-color: var(--garis); color: var(--teks); }
.tombol-hantu:hover { background: var(--kartu); }
.lebar { width: 100%; }

.tombol-ikon {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--redup); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.tombol-ikon:hover { background: var(--kartu-naik); color: var(--teks); }

.mini {
  padding: .32rem .6rem; border-radius: 7px;
  background: var(--kartu-naik); border: 1px solid var(--garis);
  color: var(--teks); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.mini:hover { background: var(--garis); }
.mini.bahaya:hover { background: rgba(240,97,109,.16); border-color: rgba(240,97,109,.5); color: var(--merah-muda); }
.mini:disabled { opacity: .5; cursor: not-allowed; }

.lencana {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--emas); color: var(--emas-tinta);
  font-size: .7rem; font-weight: 800; display: grid; place-items: center;
}

.cip {
  padding: .45rem .9rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--garis);
  color: var(--redup); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cip:hover { color: var(--teks); }
.cip.aktif { background: rgba(240,180,41,.13); border-color: rgba(240,180,41,.5); color: var(--emas); }

/* ============ Badge status pesanan ============
   Satu warna per status, sama di halaman pemain dan admin. */
.badge {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.badge-menunggu    { background: rgba(240,180,41,.14); color: var(--emas);  border: 1px solid rgba(240,180,41,.4); }
.badge-ditebus     { background: rgba(45,212,191,.12); color: var(--pirus); border: 1px solid rgba(45,212,191,.35); }
.badge-hangus      { background: rgba(97,117,138,.14); color: var(--samar); border: 1px solid rgba(97,117,138,.4); }
.badge-gagal_kirim { background: rgba(240,97,109,.14); color: var(--merah-muda); border: 1px solid rgba(240,97,109,.45); }
.badge-beres       { background: rgba(147,167,184,.12); color: var(--redup); border: 1px solid rgba(147,167,184,.35); }

/* ============ Formulir ============ */
input, select, textarea {
  padding: .55rem .7rem; border-radius: var(--sudut-kecil);
  background: var(--kartu); border: 1px solid var(--garis);
  color: var(--teks); font: inherit; font-size: .88rem;
}
input::placeholder { color: var(--samar); }

.sakelar {
  flex-direction: row !important; align-items: center; gap: .6rem !important;
  padding: .6rem .75rem; border-radius: var(--sudut-kecil);
  background: var(--kartu); border: 1px solid var(--garis-samar);
  color: var(--teks) !important; font-size: .88rem; cursor: pointer;
}
.sakelar input { width: 17px; height: 17px; accent-color: var(--emas); }

.form-aksi { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .4rem; }

/* ============ Modal ============ */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(4,8,11,.72); backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal-kartu {
  width: min(430px, 100%);
  background: var(--dasar-2); border: 1px solid var(--garis); border-radius: var(--sudut);
  padding: 1.6rem; box-shadow: var(--bayang);
  display: flex; flex-direction: column; gap: .85rem;
  max-height: 92dvh; overflow-y: auto;
}
.modal-kartu h2 { font-size: 1.2rem; }
.modal-kartu > p { margin: 0; color: var(--redup); font-size: .9rem; line-height: 1.6; }

.kode {
  padding: .95rem 1rem; border-radius: var(--sudut-kecil);
  background: #0a0f14; border: 1px dashed rgba(240,180,41,.5);
  color: var(--emas); font-family: var(--huruf-mono);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .04em;
  text-align: center; user-select: all; word-break: break-all;
}
.modal-catatan { margin: 0; color: var(--samar); font-size: .78rem; line-height: 1.6; }
.modal-langkah { margin: 0; color: var(--redup); font-size: .85rem; }
.modal-langkah b { color: var(--pirus); }

/* ============ Toast ============ */
.roti {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: .5rem; align-items: center;
  pointer-events: none;
}
.roti div {
  padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--kartu-naik); border: 1px solid var(--garis);
  font-size: .86rem; box-shadow: var(--bayang);
  animation: naik .22s ease;
}
.roti div.salah { border-color: rgba(240,97,109,.5); color: var(--merah-muda); }
@keyframes naik { from { opacity: 0; transform: translateY(8px); } }

/* ============ Profil ============ */
.profil { display: flex; align-items: center; gap: .55rem; }
.profil-foto { border-radius: 50%; background: var(--kartu-naik); }
.profil-teks { display: flex; flex-direction: column; line-height: 1.15; }
.profil-teks strong { font-size: .86rem; }
.profil-teks small { color: var(--samar); font-size: .72rem; }

/* ============ Halaman tunggal (masuk, 404) ============ */
.tengah-penuh {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.kartu-tunggal {
  width: min(420px, 100%);
  background: var(--dasar-2);
  border: 1px solid var(--garis); border-radius: var(--sudut);
  padding: 2.2rem 2rem; box-shadow: var(--bayang);
  display: flex; flex-direction: column; gap: 1rem;
  text-align: center; align-items: center;
}
.kartu-tunggal h1 { font-size: 1.35rem; }
.kartu-tunggal p { margin: 0; color: var(--redup); font-size: .9rem; line-height: 1.65; }
.ikon-discord { flex: none; }
.catatan-masuk { color: var(--samar) !important; font-size: .76rem !important; }
.tautan-samar { color: var(--samar); font-size: .82rem; text-decoration: none; }
.tautan-samar:hover { color: var(--redup); }

/* ============ Atribut hidden harus selalu menang ============
   Beberapa komponen menyetel display sendiri (grid/flex), dan aturan author
   mengalahkan gaya bawaan browser untuk [hidden] — tanpa baris ini SEMUA
   modal tampil sekaligus saat halaman dibuka. */
[hidden] { display: none !important; }