/* SKS HUB · iOS PWA (v0.0.4-1) */
:root {
  --navy: #0B1B33;
  --navy-2: #132A4C;
  --utama: #2563EB;
  --teks: #E6ECF5;
  --teks-redup: #9FB0C8;
  --bahaya: #DC2626;
  --aman-atas: env(safe-area-inset-top, 0px);
  --aman-bawah: env(safe-area-inset-bottom, 0px);
  --aman-kiri: env(safe-area-inset-left, 0px);
  --aman-kanan: env(safe-area-inset-right, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--navy);
  color: var(--teks);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

/* Kanvas tidak masuk ke area Dynamic Island / notch / home indicator. Area aman diwarnai navy. */
#sks-wadah {
  position: fixed;
  top: var(--aman-atas);
  bottom: var(--aman-bawah);
  left: var(--aman-kiri);
  right: var(--aman-kanan);
  background: var(--navy);
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--navy);
  outline: none;
  touch-action: none;
}

/* ---------- Layar muat & pemberitahuan ---------- */
#sks-muat, #sks-bukan-ios {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--aman-atas)) calc(24px + var(--aman-kanan)) calc(24px + var(--aman-bawah)) calc(24px + var(--aman-kiri));
  background: radial-gradient(ellipse at top, var(--navy-2), var(--navy) 70%);
  z-index: 20;
  box-sizing: border-box;
}
#sks-bukan-ios { z-index: 30; }
#sks-muat.sks-pudar { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
[hidden] { display: none !important; }

.sks-kartu {
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.sks-logo { border-radius: 22%; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.sks-judul { font-size: 26px; font-weight: 700; margin-top: 16px; letter-spacing: .5px; }
.sks-sub { font-size: 14px; color: var(--teks-redup); margin-top: 4px; }
.sks-teks { font-size: 14px; color: var(--teks-redup); margin-top: 14px; line-height: 1.45; }
.sks-teks.sks-galat { color: #FCA5A5; }
.sks-versi { font-size: 12px; color: var(--teks-redup); margin-top: 22px; opacity: .8; }

.sks-bilah {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.12);
  margin: 26px auto 0;
  overflow: hidden;
  max-width: 240px;
}
#sks-bilah-isi { height: 100%; width: 0; background: var(--utama); border-radius: 3px; transition: width .2s ease; }

.sks-tombol {
  margin-top: 18px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--utama);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.sks-tombol-sekunder { background: rgba(255,255,255,.12); }

/* ---------- Petunjuk pasang (atas, di bawah status bar) ---------- */
#sks-petunjuk {
  position: fixed;
  left: calc(10px + var(--aman-kiri));
  right: calc(10px + var(--aman-kanan));
  bottom: calc(10px + var(--aman-bawah));
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: rgba(19, 42, 76, .97);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  font-size: 13px;
  line-height: 1.4;
}
.sks-petunjuk-isi { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sks-ikon-bagikan {
  display: inline-block; width: 12px; height: 14px; vertical-align: -2px;
  border: 1.6px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; position: relative; margin: 0 2px;
}
.sks-ikon-bagikan::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 1.6px; height: 11px; background: currentColor; transform: translateX(-50%);
}
.sks-tutup {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.1); color: var(--teks); font-size: 16px;
}

/* ---------- Status luring ---------- */
#sks-luring {
  position: fixed;
  top: calc(6px + var(--aman-atas));
  left: calc(10px + var(--aman-kiri));
  right: calc(10px + var(--aman-kanan));
  z-index: 40;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bahaya);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  pointer-events: none;
}
#sks-luring.sks-daring { background: #15803D; }