/* ==========================================================
   APINDO Kota Magelang — member pages (wizard, login, dashboard)
   Builds on style.css tokens.
   ========================================================== */

.app { min-height: 100svh; }
/* elements with their own display value must still honour [hidden] */
.app [hidden]:not([data-prev]) { display: none !important; }
.app::after { opacity: 0.04; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost::before { background: var(--paper-2); }
.btn--small { --h: 2.4rem; font-size: 0.88rem; padding: 0 1rem; }
.note { background: rgba(4, 123, 194, 0.08); border-left: 3px solid var(--blue); padding: 0.75rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); font-size: 0.95rem; margin: 0; }
.brand--inv .brand__text strong { color: var(--white); }
.brand--inv .brand__text em { color: rgba(242, 240, 235, 0.7); }
.brand--inv .brand__mark { border-radius: 2px; }

/* ---------- form fields (boxed: long forms read better than underline fields) ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
.fld { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld--full { grid-column: 1 / -1; }
.grid .chips { grid-column: auto; }
.grid .chips.fld--full { grid-column: 1 / -1; }
.fld > label, .fld > legend { font-weight: 600; font-size: 0.95rem; padding: 0; }
.fld > legend { margin-bottom: 0.6rem; }
.fld i { font-style: normal; font-weight: 500; font-size: 0.78rem; color: var(--muted); margin-left: 0.35rem; }
.fld input:not([type=radio]):not([type=checkbox]), .fld select, .fld textarea {
  font: 400 1rem var(--f-display);
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(10, 31, 51, 0.22);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}
.fld textarea { resize: vertical; }
.fld input:not([type=radio]):not([type=checkbox])::placeholder, .fld textarea::placeholder { color: #8b9097; }
.fld input:not([type=radio]):not([type=checkbox]):focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(4, 123, 194, 0.18); }
.fld.is-invalid input:not([type=radio]):not([type=checkbox]), .fld.is-invalid textarea, .fld.is-invalid select { border-color: #b3261e; }
.fld.is-invalid.chips span { border-color: #b3261e; }
.fld__err { color: #b3261e; font-size: 0.86rem; font-weight: 500; }
.chips { gap: 0.5rem; }
.fld.chips { flex-direction: row; flex-wrap: wrap; }
.fld.chips .fld__err { flex-basis: 100%; }
.chips span { background: var(--white); }

/* ---------- WIZARD ---------- */
.wiz { display: grid; grid-template-columns: minmax(18rem, 30rem) minmax(0, 1fr); min-height: 100svh; }
.wiz__aside {
  position: sticky;
  top: 0;
  height: 100svh;
  background: var(--ink);
  color: var(--paper);
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
}

/* the 3D render travels to a different landmark per step */
.wiz__view {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #cfe0ee, #e9eff3);
  flex: none;
}
.wiz__view-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(var(--z, 1));
  transition: transform 1.4s var(--ease), transform-origin 1.4s var(--ease);
}
.wiz__view-label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  background: rgba(10, 31, 51, 0.82);
  color: var(--paper);
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
}

.wiz__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.wiz__steps li {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.6rem 0.5rem;
  border-radius: var(--r-sm);
  color: rgba(242, 240, 235, 0.55);
  transition: color var(--dur-base), background-color var(--dur-base);
}
.wiz__steps li.is-done { color: rgba(242, 240, 235, 0.85); cursor: pointer; }
.wiz__steps li.is-done:hover { background: rgba(242, 240, 235, 0.06); }
.wiz__steps li.is-current { color: var(--white); background: rgba(4, 123, 194, 0.22); }
.wiz__steps .n {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  font-weight: 600;
  font-size: 0.9rem;
  flex: none;
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.wiz__steps li.is-current .n { background: var(--blue); border-color: var(--blue); }
.wiz__steps li.is-done .n { background: var(--paper); color: var(--ink); border-color: var(--paper); font-size: 0; }
.wiz__steps li.is-done .n::after { content: "✓"; font-size: 0.9rem; }
.wiz__steps b { display: block; font-weight: 600; }
.wiz__steps small { font-size: 0.82rem; opacity: 0.8; }
.wiz__help { margin: auto 0 0; font-size: 0.85rem; color: rgba(242, 240, 235, 0.6); }

.wiz__main { padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 5rem) 4rem; max-width: 56rem; width: 100%; }
.wiz__top { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2.5rem; }
.wiz__bar { flex: 1; height: 4px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.wiz__bar span { display: block; height: 100%; width: 20%; background: var(--blue); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
.wiz__save { color: var(--muted); white-space: nowrap; }
.wiz__resume { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; background: var(--paper-2); padding: 0.75rem 1rem; border-radius: var(--r-sm); margin-bottom: 2rem; }

.step__count { color: var(--blue); font-weight: 600; }
.step__title { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -0.045em; line-height: 0.95; margin: 0.6rem 0 0.75rem; font-weight: 600; }
.step__title em { color: var(--blue); letter-spacing: -0.02em; }
.step__title:focus { outline: none; }
.step__lede { color: var(--muted); margin: 0 0 2.25rem; max-width: 52ch; }

/* step enter animation (direction aware) */
.step.is-entering { animation: step-in 0.6s var(--ease) both; }
.step.is-entering.from-left { animation-name: step-in-left; }
@keyframes step-in { from { opacity: 0; transform: translateX(40px); filter: blur(6px); } }
@keyframes step-in-left { from { opacity: 0; transform: translateX(-40px); filter: blur(6px); } }

.total { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 1rem 1.1rem; background: var(--paper-2); border-radius: var(--r-sm); }
.total output { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.person { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-bottom: 2rem; }
.person__title { font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 600; }

.toggle { display: flex; align-items: center; gap: 0.8rem; font-weight: 500; cursor: pointer; margin: 0 0 1.5rem; min-height: 44px; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 44px; height: 26px; border-radius: 26px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); position: relative; flex: none; transition: background-color var(--dur-base); }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(10, 31, 51, 0.3); transition: transform var(--dur-base) var(--ease); }
.toggle input:checked + span { background: var(--blue); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.plans { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.plan { cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  height: 100%;
  transition: box-shadow var(--dur-quick), transform var(--dur-base) var(--ease);
}
.plan__body b { font-size: 1.6rem; letter-spacing: -0.03em; }
.plan__price { font-weight: 600; color: var(--blue); min-height: 1.4em; }
.plan__body small { color: var(--muted); }
.plan:hover .plan__body { transform: translateY(-3px); }
.plan input:checked + .plan__body { box-shadow: inset 0 0 0 2px var(--blue); background: rgba(4, 123, 194, 0.05); }
.plan input:focus-visible + .plan__body { outline: 2px solid var(--blue); outline-offset: 3px; }
.plans.is-invalid .plan__body { box-shadow: inset 0 0 0 1px #b3261e; }

.consents { display: grid; gap: 0.75rem; margin-top: 2rem; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.check input { position: absolute; opacity: 0; }
.check span { width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(10, 31, 51, 0.4); background: var(--white); flex: none; margin-top: 1px; display: grid; place-items: center; transition: background-color var(--dur-quick); }
.check input:checked + span { background: var(--blue); box-shadow: none; }
.check input:checked + span::after { content: "✓"; color: var(--white); font-size: 0.85rem; font-weight: 700; }
.check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.check.is-invalid span { box-shadow: inset 0 0 0 1.5px #b3261e; }
.check a { color: var(--blue); border-bottom: 1px solid currentColor; }

.review { display: grid; gap: 1rem; }
.review__block { background: var(--white); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); padding: 1.25rem 1.4rem; }
.review__block header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.review__block h2 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.review dl { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.95rem; }
.review dt { color: var(--muted); }
.review dd { margin: 0; overflow-wrap: anywhere; }
.review dd.is-empty { color: #8b9097; }

.wiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.wiz__nav [data-prev][hidden] { display: inline-flex; visibility: hidden; }
.wiz__err { color: #b3261e; font-weight: 500; min-height: 1.5em; margin: 1rem 0 0; }

.done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; margin-bottom: 2.5rem; }
.done__next { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 1rem; }
.done__next li { counter-increment: n; display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.75rem; }
.done__next li::before { content: counter(n); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-weight: 600; }
.done__next span { color: var(--muted); font-size: 0.95rem; }

.sheet { border: 0; border-radius: var(--r-md); padding: 2rem; max-width: 34rem; background: var(--paper); color: var(--ink); }
.sheet::backdrop { background: rgba(10, 31, 51, 0.6); }
.sheet h2 { margin-top: 0; letter-spacing: -0.02em; }

/* ---------- KTA (ID-1 card, 3D tilt + flip) ---------- */
.kta-wrap { perspective: 1200px; width: 100%; max-width: 30rem; }
.kta {
  position: relative;
  aspect-ratio: 85.6 / 54;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform 0.9s var(--ease);
}
.kta.is-tilting { transition: transform 0.15s linear; }
.kta.is-flipped { --flip: 180deg; }
.kta__face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 6% 6.5%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -28px rgba(10, 31, 51, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.kta__front {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(140, 203, 239, 0.45), transparent 55%),
    linear-gradient(135deg, #047bc2 0%, #035c92 55%, #0a1f33 100%);
  color: var(--white);
}
.kta__front::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='white'%3E%3Cellipse cx='24' cy='12' rx='7' ry='11'/%3E%3Cellipse cx='24' cy='36' rx='7' ry='11'/%3E%3Cellipse cx='12' cy='24' rx='11' ry='7'/%3E%3Cellipse cx='36' cy='24' rx='11' ry='7'/%3E%3C/svg%3E");
  background-size: 36px;
}
/* moving sheen follows the pointer */
.kta__front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 60% at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.28), transparent 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.kta__back { background: var(--paper); color: var(--ink); transform: rotateY(180deg); box-shadow: 0 30px 60px -28px rgba(10, 31, 51, 0.45), 0 0 0 1px var(--line) inset; }
.kta__row { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.kta__logo { width: 13%; min-width: 34px; border-radius: 3px; }
.kta__type { text-align: right; font-size: clamp(0.55rem, 1.6vw, 0.72rem); font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; }
.kta__type span { display: block; font-weight: 500; opacity: 0.8; letter-spacing: 0; }
.kta__name { margin-top: auto; position: relative; z-index: 1; font-size: clamp(1.05rem, 3.4vw, 1.55rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; max-width: 70%; }
.kta__meta { display: flex; gap: 1.25rem; margin-top: 0.6rem; position: relative; z-index: 1; font-size: clamp(0.6rem, 1.7vw, 0.78rem); }
.kta__meta b { display: block; font-size: 1.15em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.kta__meta span { opacity: 0.75; }
.kta__status { position: absolute; z-index: 1; right: 6.5%; bottom: 7%; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.kta__code { width: clamp(46px, 14vw, 66px); background: var(--white); padding: 4px; border-radius: 4px; }
.kta__code svg { display: block; width: 100%; height: auto; }
.kta__pill { font-size: clamp(0.55rem, 1.5vw, 0.7rem); font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.kta__pill--pending { background: rgba(242, 177, 52, 0.25); }
.kta__back h4 { margin: 0 0 0.5rem; font-size: clamp(0.8rem, 2vw, 0.95rem); }
.kta__back p { margin: 0 0 0.4rem; font-size: clamp(0.58rem, 1.6vw, 0.74rem); color: var(--muted); line-height: 1.45; }
.kta__sign { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font-size: clamp(0.58rem, 1.6vw, 0.74rem); }
.kta__sign span { border-top: 1px solid var(--ink); padding-top: 0.25rem; min-width: 40%; text-align: center; }
.kta__demo { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.16); pointer-events: none; }

/* ---------- LOGIN ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 34rem); min-height: 100svh; }
.auth__visual { position: relative; background: linear-gradient(180deg, #cfe0ee, #e9eff3 50%, var(--paper)); overflow: hidden; }
.auth__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; transform: scale(1.06); animation: slow-pan 18s var(--ease) both; }
@keyframes slow-pan { to { transform: scale(1); } }
.auth__panel { padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 3rem; }
.auth__body { margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.auth__form { display: grid; gap: 1.25rem; width: 100%; }
.auth__form .btn { justify-self: start; }
.auth__alt { color: var(--muted); margin-top: 1.5rem; }
.auth__alt a { color: var(--ink); font-weight: 600; border-bottom: 1px solid currentColor; }
.auth__mail svg { width: 64px; fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.auth__body .note { margin: 0.5rem 0 1rem; }
.auth__body .link-btn { margin-top: 1rem; }

/* ---------- DASHBOARD ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--pad); border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 10; }
.dash-head__user { display: flex; gap: 1.25rem; align-items: center; font-weight: 500; }
.dash { padding: 2rem var(--pad) 5rem; max-width: 84rem; margin: 0 auto; }
.dash__demo { margin-bottom: 2rem; }
.dash__hello { margin-bottom: 2rem; }
.dash__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
.card { background: var(--white); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(1.25rem, 2.5vw, 2rem); }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.card__head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.02em; font-weight: 600; }
.card__actions { display: flex; gap: 1rem; align-items: center; }
.card__sub { font-size: 1rem; margin: 2rem 0 0.75rem; }
.card--kta { background: var(--paper-2); box-shadow: none; display: flex; flex-direction: column; }
.card--kta .kta-wrap { max-width: 34rem; margin: auto; }
.dues { display: grid; gap: 0.25rem; margin-bottom: 1.25rem; }
.dues__state { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.dues__state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #1c6b44; }
.dues__state.is-due::before { background: #c27c0e; }
.dues__big { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.dues__sub { color: var(--muted); }
.card--dues .note { margin-top: 1rem; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th { text-align: left; font-weight: 500; color: var(--muted); padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.table td { padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.mini-list li:first-child { border-top: 0; }
.mini-list b { font-weight: 600; display: block; }
.mini-list small { color: var(--muted); }
.mini-list .tag { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--r-sm); background: var(--paper-2); white-space: nowrap; }
.mini-list .tag--soon { background: var(--blue); color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz__aside { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem var(--pad); }
  .wiz__view, .wiz__help { display: none; }
  .wiz__steps { display: flex; gap: 0.35rem; margin-left: auto; }
  .wiz__steps li { padding: 0; }
  .wiz__steps li > span:last-child { display: none; }
  .wiz__steps .n { width: 1.8rem; height: 1.8rem; }
  .auth { grid-template-columns: 1fr; }
  .auth__visual { height: 34vh; }
  .dash__grid { grid-template-columns: 1fr; }
  .done { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .grid .chips { grid-column: 1 / -1; }
  .plans { grid-template-columns: 1fr; }
  .review dl { grid-template-columns: 1fr; }
  .review dt { margin-top: 0.4rem; }
  .wiz__top { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .wiz__steps { margin-left: 0; }
  .dash-head__user span { display: none; }
}

/* ---------- print: KTA only ---------- */
@media print {
  body * { visibility: hidden; }
  .kta, .kta * { visibility: visible; }
  .kta { position: absolute; left: 0; top: 0; width: 85.6mm; transform: none !important; }
  .kta__back { position: absolute; top: 60mm; transform: none; }
  .kta__face { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::after, .proto-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wiz__view-img, .kta { transition: none; }
  .auth__visual img { animation: none; transform: none; }
}

/* visually hidden native controls behind custom chips / plans / checks */
.chips input, .plan input, .check input, .toggle input { width: 1px; height: 1px; margin: 0; }