/* ===== Token ===== */
:root {
  --bg: #0a1511;
  --ink: #eef3ec;
  --muted: #8ba296;
  --line: rgba(200, 235, 215, .10);
  --accent: #e8b04a;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "DM Sans", "Segoe UI", system-ui, sans-serif;
}

/* ===== Dasar ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: var(--bg); }
body {
  min-height: 100%;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(520px 360px at 50% 100%, rgba(232, 176, 74, .13), transparent 70%),
    var(--bg);
  display: flex;
  justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== Tautan ===== */
.links { width: 100%; display: flex; flex-direction: column; gap: 18px; list-style: none; }

.link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 22px 26px 20px;
  border-radius: 26px;
  background: rgba(15, 28, 22, .88);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
}
.link:hover { background: rgba(20, 39, 32, .94); border-color: rgba(232, 176, 74, .35); }
.link:active { transform: scale(.985); }
.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.ico {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 19px;
  display: grid; place-items: center;
  background: #07100c;
  border: 1px solid var(--line);
  color: var(--accent);
}
.ico svg { width: 30px; height: 30px; }

.txt { flex: 1; min-width: 0; }
.txt b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.45rem; letter-spacing: -.015em; }
.txt span { display: block; margin-top: 4px; font-size: 1rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.go { flex: none; width: 24px; height: 24px; color: var(--muted); transition: transform .2s, color .2s; }
.link:hover .go { transform: translate(2px, -2px); color: var(--ink); }

footer { margin-top: 36px; font-size: .82rem; color: #566b60; }
.nojs { color: var(--muted); text-align: center; }

/* ===== Dadu 3D ===== */
.dice { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.die {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--s); height: var(--s);
  perspective: 520px;
  opacity: 0;
  filter: blur(var(--b));
  animation: rise var(--d) linear var(--delay) infinite;
}
.cube {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: spin var(--sd) linear var(--delay) infinite;
}
.face {
  position: absolute;
  inset: 0;
  border-radius: 20%;
  border: 1px solid rgba(232, 176, 74, .55);
  box-shadow: inset 0 0 calc(var(--s) * .22) rgba(232, 176, 74, .18);
  backface-visibility: hidden;
}
.face i {
  position: absolute;
  width: 17%; height: 17%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #ffe2a6, #e8b04a 55%, #b9822a);
}
.f1 { background: linear-gradient(145deg, #27402e, #14261c); transform: translateZ(calc(var(--s) / 2)); }
.f6 { background: linear-gradient(145deg, #1b3023, #0e1a14); transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f3 { background: linear-gradient(145deg, #223a2a, #112019); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f4 { background: linear-gradient(145deg, #1e3426, #0f1d16); transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f2 { background: linear-gradient(145deg, #2e4a34, #183024); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.f5 { background: linear-gradient(145deg, #182c20, #0c1812); transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

@keyframes rise {
  0%   { transform: translate3d(0, 60px, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  85%  { opacity: var(--o); }
  100% { transform: translate3d(var(--dx), calc(-100vh - 90px), 0); opacity: 0; }
}
@keyframes spin {
  from { transform: rotateX(var(--ax)) rotateY(var(--ay)) rotateZ(var(--az)); }
  to   { transform: rotateX(calc(var(--ax) + var(--sx))) rotateY(calc(var(--ay) + var(--sy))) rotateZ(calc(var(--az) + var(--sz))); }
}

/* ===== Animasi masuk ===== */
@media (prefers-reduced-motion: no-preference) {
  .link { animation: in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .links li:nth-child(1) .link { animation-delay: .1s; }
  .links li:nth-child(2) .link { animation-delay: .18s; }
  .links li:nth-child(3) .link { animation-delay: .26s; }
  @keyframes in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .die  { animation: none; opacity: calc(var(--o) * .7); bottom: auto; top: var(--y); }
  .cube { animation: none; transform: rotateX(var(--ax)) rotateY(var(--ay)); }
}