/* ═══════════════════════════════════════════════════════════
   Main Plus — stylesheet tunggal
   Tailwind menangani utilitas; berkas ini hanya berisi hal
   yang tidak bisa diungkapkan dengan utility class.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #07080c;
  --surface: #101219;
  --card: #161922;
  --line: #232735;
  --muted: #8b90a0;
  --brand: #ef2b2b;
  --brand-light: #ff5a52;
  --brand-dark: #b80d16;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  background: #ece2dc;
}

/* ── kerangka: selalu selebar mobile, juga di desktop ────────────── */
#app {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  min-height: 100dvh;
  position: relative;
  background-color: var(--ink);
  background-image: url("../assets/bg-mobile.png");
  background-size: cover;
  background-position: top center;
  background-attachment: local;
}

@media (min-width: 461px) {
  body {
    background: #050508;
  }
  #app {
    box-shadow:
      0 0 0 1px #1b1e29,
      0 30px 90px rgba(0, 0, 0, 0.9);
  }
}

/* sembunyikan scrollbar pada rail horizontal */
.no-sb::-webkit-scrollbar {
  display: none;
}
.no-sb {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── loader ──────────────────────────────────────────────────────── */
#loader {
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
#loader.hide {
  opacity: 0;
  visibility: hidden;
}

/* ── animasi masuk ───────────────────────────────────────────────── */
.fade-up {
  animation: fadeUp 0.45s ease both;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-in {
  animation: pageIn 0.42s cubic-bezier(0.22, 1.2, 0.4, 1) both;
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.glow {
  box-shadow:
    0 0 0 1px rgba(239, 43, 43, 0.35),
    0 8px 26px -10px rgba(239, 43, 43, 0.8);
}

/* ── kartu kategori ──────────────────────────────────────────────── */
.tile {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
}
.tile:active {
  transform: scale(0.94);
}
/* Kartu aktif TIDAK digeser ke atas: wadahnya memakai overflow-x
   sehingga apa pun yang keluar dari kotak akan terpotong. */
.tile.is-on {
  box-shadow:
    0 0 0 2px var(--brand),
    0 10px 22px -12px rgba(239, 43, 43, 0.9);
}
.tile-label {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* ── carousel coverflow ──────────────────────────────────────────── */
.cv-stage {
  position: relative;
  height: 268px;
  perspective: 1100px;
  touch-action: pan-y;
  overflow: hidden;
}
.cv-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  height: 232px;
  margin: -116px 0 0 -84px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.85);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
/* pantulan elastis tiap kali kartu berpindah */
.cv-card.animate {
  transition:
    transform 0.72s cubic-bezier(0.18, 1.5, 0.42, 1),
    opacity 0.45s ease,
    filter 0.45s ease;
}
.cv-card.is-center {
  box-shadow: 0 14px 30px -16px rgba(239, 43, 43, 0.55);
}
.cv-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cv-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.28) 38%,
    transparent 66%
  );
}
.cv-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 14px 14px;
}

.cv-dot {
  height: 6px;
  width: 6px;
  border-radius: 999px;
  background: #ffffff33;
  transition:
    width 0.35s cubic-bezier(0.18, 1.5, 0.42, 1),
    background-color 0.35s ease;
}
.cv-dot.is-on {
  width: 20px;
  background: var(--brand);
}

/* ── navigasi bawah ──────────────────────────────────────────────── */
.nav-item {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
.nav-item.is-active {
  animation: navBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.nav-item .nav-label {
  animation: navFade 0.35s ease both;
}
@keyframes navBounce {
  0% {
    transform: scale(0.82);
    opacity: 0.35;
  }
  55% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes navFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── bottom sheet (slide up) ─────────────────────────────────────── */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet[hidden] {
  display: none;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.28s ease both;
}
.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 86dvh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  border-radius: 26px 26px 0 0;
  background: var(--surface);
  animation: slideUp 0.42s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.sheet.closing .sheet-backdrop {
  animation: fadeOut 0.26s ease both;
}
.sheet.closing .sheet-panel {
  animation: slideDown 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* ── modal konfirmasi ────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal[hidden] {
  display: none;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.24s ease both;
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  padding: 26px 22px 20px;
  text-align: center;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.modal.closing .modal-backdrop {
  animation: fadeOut 0.22s ease both;
}
.modal.closing .modal-panel {
  animation: popOut 0.22s ease both;
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes popOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ── input PIN ───────────────────────────────────────────────────── */
#pin {
  letter-spacing: 0.42em;
}
#pin::placeholder {
  letter-spacing: normal;
}
#pin::-webkit-outer-spin-button,
#pin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shake {
  animation: shake 0.45s ease;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}

/* ── cahaya merah di puncak layar (dipakai halaman login & profil) ─ */
.glow-top {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  background-image: none;
}
.glow-top::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -46%;
  width: 150%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 140, 120, 0.55) 0%,
    rgba(239, 43, 43, 0.42) 26%,
    rgba(120, 12, 20, 0.28) 48%,
    transparent 68%
  );
  pointer-events: none;
}
/* isi halaman harus berada di atas lapisan cahaya */
.glow-top > * {
  position: relative;
  z-index: 1;
}

/* #app punya gambar latar sendiri — selektor id ini yang mematikannya */
#app.glow-top {
  background-image: none;
}

/* pada profil cahayanya sedikit lebih rapat agar mengisi area identitas */
#app.glow-top::before {
  top: -40%;
  width: 135%;
}

/* ── halaman login ───────────────────────────────────────────────── */
#login-shell {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  min-height: 100dvh;
}
@media (min-width: 461px) {
  #login-shell {
    box-shadow:
      0 0 0 1px #1b1e29,
      0 30px 90px rgba(0, 0, 0, 0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-card.animate {
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
  .sheet-panel,
  .modal-panel,
  .page-in,
  .fade-up {
    animation-duration: 0.01s;
  }
}

/* ═══════════════════════════════════════════════════════════
   TEMA TERANG
   Aktif hanya pada halaman dengan <body data-theme="light">,
   sehingga halaman bertema gelap tidak ikut terpengaruh.
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --paper: #f4ece7;
  --panel: #ffffff;
  --navy: #2c3049;
  --slate: #8d90a1;
  --hair: #efe6e0;
  --sun: #f79a1f;
  color-scheme: light;
}

body[data-theme="light"] {
  background: #ece2dc;
}

/* selektor id agar mengalahkan gambar latar bawaan #app */
body[data-theme="light"] #app {
  background-color: var(--panel);
  background-image: none;
  box-shadow: none;
  color: var(--navy);
}

/* ── loader terang ── */
body[data-theme="light"] #loader {
  background: var(--panel);
}
body[data-theme="light"] #loader .loader-glow {
  background: radial-gradient(
    circle at 50% 38%,
    rgba(247, 154, 31, 0.18) 0%,
    transparent 62%
  );
}

/* ── kartu kategori pastel ── */
body[data-theme="light"] .tile {
  box-shadow: 0 6px 16px -8px rgba(44, 48, 73, 0.3);
}
body[data-theme="light"] .tile.is-on {
  box-shadow:
    0 0 0 2px var(--sun),
    0 10px 20px -12px rgba(247, 154, 31, 0.75);
}
body[data-theme="light"] .tile-label {
  text-shadow: none;
}

/* ── kartu carousel: gambar di atas, keterangan di kaki putih ── */
body[data-theme="light"] .cv-card {
  background: var(--panel);
  box-shadow: 0 16px 34px -16px rgba(44, 48, 73, 0.45);
}
body[data-theme="light"] .cv-card.is-center {
  box-shadow: 0 22px 40px -18px rgba(44, 48, 73, 0.55);
}
/* Kartu tema terang dibuat lebih besar. Jarak antar kartu disetel
   tepat setengah lebar kartu (GAP = 208/2 = 104 di app.js), sehingga
   kartu kiri-kanan menyembul persis separuh dari balik kartu aktif. */
body[data-theme="light"] .cv-stage {
  height: 272px; /* 240px kartu + ruang bayangan; sisanya jadi jarak vertikal */
}
body[data-theme="light"] .cv-card {
  width: 240px;
  height: 240px; /* rasio 1:1 — hanya cover, keterangan menumpang di atasnya */
  margin: -120px 0 0 -120px;
  border-radius: 28px;
}


/* ── titik indikator ── */
body[data-theme="light"] .cv-dot {
  background: #d9cfc9;
}
body[data-theme="light"] .cv-dot.is-on {
  background: var(--sun);
}

/* ── navigasi bawah mengambang ── */
body[data-theme="light"] .nav-item.is-active {
  animation: navBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── font judul (halaman bertema terang) ── */
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3 {
  font-family: "Fredoka", "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

/* ── bottom sheet & modal pada tema terang ── */
body[data-theme="light"] .sheet-panel {
  background: var(--panel);
  border-top-color: var(--hair);
}
body[data-theme="light"] .sheet-backdrop,
body[data-theme="light"] .modal-backdrop {
  background: rgba(44, 48, 73, 0.42);
}
body[data-theme="light"] .modal-panel {
  background: var(--panel);
  border-color: var(--hair);
}

/* ── kepala halaman profil: pita gradasi dengan sudut bawah membulat ── */
.profile-hero {
  border-radius: 0 0 34px 34px;
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 52%, #6d5ae6 100%);
}

/* ── halaman login pada tema terang ── */
body[data-theme="light"] #login-shell {
  background-color: var(--panel);
  box-shadow: none;
}
/* cahaya pastel lembut menggantikan sorot merah versi gelap */
body[data-theme="light"] #login-shell::before {
  top: -38%;
  width: 140%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(139, 92, 246, 0.2) 0%,
    rgba(247, 154, 31, 0.13) 30%,
    rgba(247, 154, 31, 0.05) 46%,
    transparent 62%
  );
}
@media (min-width: 461px) {
  body[data-theme="light"] #login-shell {
    box-shadow: none;
  }
}

/* judul memakai Fredoka, sama seperti halaman lain */
body[data-theme="light"] #login-shell h1 {
  font-family: "Fredoka", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

/* ── halaman onboarding ──
   #app perlu tinggi DEFINIT, bukan sekadar min-height: tanpa itu
   flex-1 tidak punya ruang untuk dibagi dan cover memakai tinggi
   intrinsiknya sehingga panel CTA terdorong keluar layar.
   min-height menjaga panel tetap utuh di layar yang sangat pendek. */
body[data-page="onboarding"] #app {
  height: 100dvh;
  min-height: 520px;
}
body[data-page="onboarding"] .onb-cover {
  min-height: 180px;
}