/* ─────────────────────────────────────────────────────────
   LOGIN — Liquid Glass + Neobrutalism (campuran, khusus halaman ini)
   Prinsip: navbar, canvas mesh, form login (.login-card) TETAP liquid
   glass murni seperti sebelumnya. Yang dapat sentuhan neobrutalism:
     - background dekor (blob + dot mengambang, sama pola dgn api-docs)
     - pricing-card: border tebal + hard-shadow + tilt miring + jadi
       link langsung ke WhatsApp (beli paket)
───────────────────────────────────────────────────────── */

:root {
  --ln-ink:     #0B0B0D;
  --ln-lime:    #D6FF5C;
  --ln-violet:  #B7A6FF;
  --ln-amber:   #FFC857;
  --ln-shadow:  #FAFAFA;
  --ln-border:  3px solid var(--ln-ink);
}

/* ── Background dekor Neo — blob mengambang di belakang konten ── */
.login-page::before,
.login-page::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 3px solid var(--ln-ink);
  opacity: 0.4;
}
.login-page::before {
  top: 10%;
  right: -46px;
  width: 140px;
  height: 140px;
  border-radius: 34% 66% 62% 38% / 44% 40% 60% 56%;
  background: var(--ln-violet);
  transform: rotate(-10deg);
  animation: lnFloat1 9s ease-in-out infinite;
}
.login-page::after {
  bottom: 8%;
  left: -54px;
  width: 170px;
  height: 170px;
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  background: var(--ln-lime);
  transform: rotate(9deg);
  animation: lnFloat2 11s ease-in-out infinite;
}

.login-page .container { position: relative; z-index: 1; }

.pricing-grid {
  position: relative;
  z-index: 2;
}

.brut-bg-dot {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 2.5px solid var(--ln-ink);
  border-radius: 999px;
  opacity: 0.5;
}
.brut-bg-dot--1 { top: 20%;  left: 6%;  width: 14px; height: 14px; background: var(--ln-amber);  animation: lnFloat1 7s ease-in-out infinite; }
.brut-bg-dot--2 { top: 48%;  right: 7%; width: 20px; height: 20px; background: #FF8FD6;          animation: lnFloat2 8.5s ease-in-out infinite; }
.brut-bg-dot--3 { bottom: 22%; right: 12%; width: 12px; height: 12px; background: #7BE0D6;        animation: lnFloat1 6s ease-in-out infinite; }

@keyframes lnFloat1 {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50%      { transform: translateY(-14px) rotate(-3deg); }
}
@keyframes lnFloat2 {
  0%, 100% { transform: translateY(0) rotate(9deg); }
  50%      { transform: translateY(12px) rotate(2deg); }
}

@media (max-width: 480px) {
  .login-page::before, .login-page::after { opacity: 0.22; }
}

/* ── Pricing grid — kartu neobrutalism, jadi link WA, miring bergantian ── */
.pricing-card {
  position: relative;
  z-index: 3;
  display: block;
  background: var(--ln-lime);
  border: var(--ln-border);
  border-radius: var(--r-md);
  padding: 16px 14px;
  text-align: center;
  text-decoration: none;
  color: var(--ln-ink);
  box-shadow: 5px 5px 0 0 var(--ln-shadow);
  transform: rotate(var(--pc-tilt, -1deg));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0.15);
}

.pricing-grid .pricing-card:nth-child(5n+1) { --pc-tilt: -1.4deg; background: var(--ln-lime); }
.pricing-grid .pricing-card:nth-child(5n+2) { --pc-tilt: 1deg;    background: var(--ln-amber); }
.pricing-grid .pricing-card:nth-child(5n+3) { --pc-tilt: -0.8deg; background: var(--ln-violet); }
.pricing-grid .pricing-card:nth-child(5n+4) { --pc-tilt: 1.3deg;  background: var(--ln-lime); }
.pricing-grid .pricing-card:nth-child(5n+5) { --pc-tilt: -1deg;   background: var(--ln-amber); }

.pricing-card:hover {
  transform: rotate(var(--pc-tilt, -1deg)) translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--ln-shadow);
}

.pricing-card:active {
  transform: rotate(var(--pc-tilt, -1deg)) translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ln-shadow);
}

.pricing-card.highlight {
  border-color: var(--ln-ink);
  box-shadow: 6px 6px 0 0 var(--ln-shadow);
  transform: rotate(0deg) scale(1.02);
}

.pricing-card.highlight:hover {
  transform: rotate(0deg) scale(1.02) translate(-2px, -2px);
}

.pricing-card.highlight::before {
  content: 'POPULER';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ln-ink);
  background: #FF8FD6;
  border: 2px solid var(--ln-ink);
  padding: 3px 10px;
  border-radius: 999px;
}

.pricing-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ln-ink);
  margin-bottom: 6px;
}

.pricing-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ln-ink);
}

.pricing-price.free {
  color: rgba(11,11,13,0.6);
  font-style: italic;
}

/* ── Kotak widget Cloudflare Turnstile — center & sedikit sentuhan neo ── */
.field-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.field-captcha #captchaBox {
  transform: scale(0.94);
  transform-origin: center;
}

/* Kecil, taruh di bawah grid: penjelasan bahwa kartu = link beli via WA */
.pricing-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  text-align: center;
}


/* ── Cara dapat akses lewat bot Telegram ── */
.bot-steps {
  margin: 16px 0 20px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.bot-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.bot-cta[aria-disabled="true"] { opacity: .6; pointer-events: none; }