/* Umpan balik Miles untuk HALAMAN STATIS: Career Map dan CV Auditor.
   Pasangan dari public/gk-miles.js.

   Kenapa file sendiri dan bukan CSS portal: menarik Tailwind portal ke dua
   halaman ini akan membuat preflight-nya me-reset seluruh styling mereka.
   Alasan yang sama dipakai untuk header di sana (lihat /api/cv-audit/session).

   Warnanya ditulis sebagai hex, bukan var(--gold), karena dua halaman itu
   punya nama variabel sendiri-sendiri dan tidak ada yang menjamin keduanya
   sama. Angka gerakannya disalin dari app/globals.css blok "Umpan balik Miles";
   kalau yang di sana diubah, ubah juga di sini. */

.gk-m-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px;
  border-radius: 999px;
  color: #7c561a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
/* Yang menyusut di layar sempit ANGKANYA, bukan pilnya.
   Versi sebelumnya menyembunyikan seluruh pil di bawah 375px. Niatnya benar
   (di 320px header sudah pas tanpa sisa, pil 63px mendorong isinya keluar
   50px), tapi akibatnya pil itu lenyap dari hampir semua HP Android yang
   lebarnya 360px, dan orang yang tidak pernah melihat pintunya tidak akan
   pernah tahu ada paspor di baliknya.

   Di bawah 375px yang tersisa cuma ikon pesawat, selebar 28px, dan itu muat.
   Dari 375px ke atas angkanya ikut, persis seperti dulu.

   ⚠ Batas yang diketahui: saldo LIMA angka (10.000 Miles ke atas) melebar jadi
   81px dan mulai mendorong header di 375px. Kalau saldo segitu jadi hal biasa,
   yang benar mengubah tampilannya, bukan menyembunyikan pilnya lagi. */
.gk-m-pill-n {
  display: none;
}
@media (min-width: 375px) {
  .gk-m-pill {
    padding: 0 8px;
  }
  .gk-m-pill-n {
    display: inline;
  }
}
@media (min-width: 480px) {
  .gk-m-pill {
    padding: 0 12px;
    font-size: 14px;
  }
}
/* "+N" melayang naik di dekat pil. Kembaran .gk-plus di app/globals.css pada
   portal; angka durasi dan jarak di kedua tempat harus sama. Warnanya sengaja
   BUKAN emas: kalau sama dengan angka saldo, dua angka bertumpuk jadi satu
   gumpalan dan tidak ada yang terbaca. */
.gk-m-plus {
  position: absolute;
  left: 50%;
  top: -2px;
  font-size: 13px;
  font-weight: 700;
  color: #1f7a6b;
  pointer-events: none;
  animation: gk-m-plus 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes gk-m-plus {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.9); }
  18%  { opacity: 1; transform: translate(-50%, -2px) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -12px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(0.96); }
}
.gk-m-pill:hover {
  background: #fbf3e2;
}
.gk-m-pill svg {
  flex-shrink: 0;
}

.gk-m-wrap {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
@media (min-width: 640px) {
  .gk-m-wrap {
    left: auto;
    right: 24px;
    bottom: 24px;
    justify-content: flex-end;
  }
}

.gk-m-toast {
  pointer-events: auto;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  border: 1px solid #eace8f;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(26, 23, 18, 0.16);
  font-family: inherit;
  animation: gk-m-in 0.34s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}
.gk-m-toast[data-tutup="1"] {
  animation: gk-m-out 0.22s ease-in both;
}

.gk-m-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}
.gk-m-stamp {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cba043;
  border-radius: 999px;
  color: #9c6f20;
  transform: rotate(-6deg);
}
.gk-m-stamp.is-baru {
  animation: gk-m-stamp 0.52s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.gk-m-stamp.is-baru::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #cba043;
  animation: gk-m-ring 0.62s ease-out 0.12s both;
  pointer-events: none;
}

.gk-m-body {
  min-width: 0;
  flex: 1;
}
.gk-m-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7c561a;
}
.gk-m-saldo {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #1a1712;
}
.gk-m-saldo span {
  font-size: 14px;
  font-weight: 600;
  color: #9c6f20;
}
.gk-m-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.gk-m-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #5f544a;
}
.gk-m-list li b {
  flex-shrink: 0;
  font-weight: 600;
  color: #7c561a;
}
.gk-m-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gk-m-sisa {
  color: #8b8175;
}

.gk-m-x {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #8b8175;
  cursor: pointer;
}
.gk-m-x:hover {
  background: #f4f0e9;
  color: #1a1712;
}

.gk-m-cta {
  display: block;
  padding: 10px 16px;
  border-top: 1px solid #f5e3bf;
  background: rgba(251, 243, 226, 0.6);
  color: #7c561a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.gk-m-cta:hover {
  background: #fbf3e2;
}

@keyframes gk-m-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gk-m-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes gk-m-stamp {
  0% {
    opacity: 0;
    transform: scale(1.85) rotate(-26deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.94) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-6deg);
  }
}
@keyframes gk-m-ring {
  from {
    opacity: 0.5;
    transform: scale(0.92);
  }
  to {
    opacity: 0;
    transform: scale(1.75);
  }
}

/* Isinya tidak berubah sedikit pun, cuma gerakannya yang dilepas. Angka yang
   merayap naik punya pemeriksaannya sendiri di gk-miles.js, karena dia
   dihitung di JS dan tidak bisa dijangkau media query. */
@media (prefers-reduced-motion: reduce) {
  .gk-m-toast,
  .gk-m-toast[data-tutup="1"],
  .gk-m-stamp.is-baru {
    animation: none;
  }
  .gk-m-stamp.is-baru::after {
    display: none;
  }
  /* Disembunyikan sepenuhnya, bukan cuma dimatikan animasinya: tanpa gerakan
     naik dia menempel diam di atas pil dan menutupi angkanya. */
  .gk-m-plus {
    display: none;
  }
}