:root {
  --auth-cyan: #78e4e5;
  --auth-blue: #86a8ff;
  --auth-gold: #edc77b;
  --auth-panel: rgba(11, 23, 36, .9);
  --auth-line: rgba(151, 187, 220, .17);
  --auth-ease: cubic-bezier(.2, .82, .22, 1);
}

.auth-nav-actions { display: flex; align-items: center; gap: 8px; }
.auth-nav-login {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 13px;
  background: transparent;
  color: var(--muted);
  font-weight: 560;
  white-space: nowrap;
}
.auth-nav-login:hover { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.035); }

body:has(.auth-screen.active) { background: #061019; }
body:has(.auth-screen.active) .feedback-fab { display: none; }
.auth-screen { min-height: calc(100dvh - 80px); overflow: hidden; background: #07111b; }
.auth-screen.active { display: block; }
.auth-shell { min-height: calc(100dvh - 80px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); }

.auth-story {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: calc(100dvh - 80px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(46px, 6.5vw, 104px);
  border-right: 1px solid var(--auth-line);
  background:
    radial-gradient(circle at 16% 16%, rgba(120,228,229,.13), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(134,168,255,.15), transparent 34%),
    linear-gradient(145deg, #07131e 0%, #091827 52%, #07111b 100%);
}
.auth-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .24;
  background-image: linear-gradient(rgba(151,187,220,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(151,187,220,.08) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.auth-story::after {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border: 1px solid rgba(151,187,220,.08);
  border-radius: 28px;
  pointer-events: none;
}
.auth-aurora {
  position: absolute;
  inset: -30% -20%;
  z-index: -2;
  opacity: .46;
  filter: blur(50px);
  background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(120,228,229,.16), transparent 34%, rgba(237,199,123,.09), transparent 68%, rgba(134,168,255,.17), transparent);
  animation: auth-aurora-drift 17s ease-in-out infinite alternate;
}
.auth-story-copy { position: relative; z-index: 2; max-width: 720px; animation: auth-copy-in .72s var(--auth-ease) both; }
.auth-edition { display: inline-flex; align-items: center; gap: 9px; color: var(--auth-cyan); font-size: 10px; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; }
.auth-edition::before { content: ""; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 16px currentColor; }
.auth-story h1 { max-width: 780px; margin: 24px 0 24px; font-size: clamp(40px, 4.6vw, 68px); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.auth-story-copy > p { max-width: 620px; margin: 0; color: #b5c2cf; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.68; }

.auth-constellation { position: absolute; z-index: 0; top: 35%; right: 5%; width: min(31vw, 360px); aspect-ratio: 1; margin: 0; }
.auth-constellation::before, .auth-constellation::after { content: ""; position: absolute; inset: 21%; border: 1px dashed rgba(120,228,229,.22); transform: rotate(19deg); }
.auth-constellation::after { inset: 34%; border-style: solid; border-color: rgba(237,199,123,.2); border-radius: 50%; transform: none; }
.auth-constellation > strong { position: absolute; inset: 41%; display: grid; place-items: center; border: 1px solid rgba(134,168,255,.65); border-radius: 50%; background: radial-gradient(circle, rgba(134,168,255,.28), rgba(7,17,27,.94) 68%); color: #b9caff; font-size: 25px; box-shadow: 0 0 44px rgba(134,168,255,.24); animation: auth-core-pulse 3.8s ease-in-out infinite; }
.auth-orbit { position: absolute; border: 1px solid rgba(151,187,220,.16); border-radius: 50%; }
.auth-orbit-one { inset: 4%; animation: auth-orbit-spin 18s linear infinite; }
.auth-orbit-two { inset: 19%; border-style: dashed; animation: auth-orbit-spin 13s linear infinite reverse; }
.auth-star { position: absolute; width: 9px; height: 9px; border: 1px solid var(--auth-cyan); border-radius: 50%; background: #07111b; box-shadow: 0 0 18px rgba(120,228,229,.55); animation: auth-star-float 4.8s ease-in-out infinite; }
.star-a { left: 9%; top: 43%; }.star-b { right: 17%; top: 14%; animation-delay: -.9s; }.star-c { right: 3%; bottom: 25%; animation-delay: -1.7s; }.star-d { left: 27%; bottom: 7%; animation-delay: -2.5s; }

.auth-assurances { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.auth-assurances > div { min-width: 0; padding: 15px 16px; border-top: 1px solid var(--auth-line); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); animation: auth-step-in .5s var(--auth-ease) both; }
.auth-assurances > div:nth-child(2) { animation-delay: .08s; }.auth-assurances > div:nth-child(3) { animation-delay: .16s; }
.auth-assurances span { color: var(--auth-gold); font-size: 10px; letter-spacing: .12em; }
.auth-assurances p { margin: 7px 0 0; color: #9eacbb; font-size: 12px; line-height: 1.5; }

.auth-panel-wrap { min-width: 0; display: grid; place-items: center; padding: clamp(14px, 1.5vw, 22px); background: radial-gradient(circle at 50% 10%, rgba(134,168,255,.08), transparent 34%), #061019; }
.auth-panel { width: min(100%, 560px); padding: clamp(28px, 3vw, 40px); border: 1px solid var(--auth-line); border-radius: 24px; background: linear-gradient(160deg, rgba(16,31,47,.96), rgba(8,19,30,.97)); box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035); animation: auth-panel-in .65s var(--auth-ease) both; }
.auth-panel-head { display: grid; justify-items: start; }
/* Pil status ini dulunya berbunyi "CLOUD BELUM AKTIF" dalam huruf kapital emas.
 * Bagi orang yang membangunnya kalimat itu jelas; bagi pengunjung ia hanya
 * peringatan tanpa arti — tidak ada yang bisa dilakukan dengan informasi itu.
 * Sekarang isinya kalimat biasa yang menjawab satu pertanyaan yang benar-benar
 * dipikirkan pengunjung: bisa tidak saya bikin akun di sini sekarang. Huruf
 * kapital dan spasi lebarnya dilepas supaya terbaca sebagai keterangan, bukan
 * sebagai alarm. */
.auth-runtime-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; max-width: 100%; border: 1px solid rgba(237,199,123,.22); border-radius: 999px; padding: 6px 13px 6px 11px; background: rgba(237,199,123,.06); color: var(--auth-gold); font-size: 11.5px; font-weight: 560; letter-spacing: 0; text-transform: none; line-height: 1.45; text-align: left; }
.auth-runtime-chip::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.auth-runtime-chip.is-ready { border-color: rgba(157,204,143,.28); background: rgba(157,204,143,.08); color: #9dcc8f; }
.auth-panel h2 { margin: 2px 0 12px; font-size: clamp(33px, 4vw, 48px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.auth-panel-head > p:last-child { max-width: 500px; margin: 0 0 26px; color: #9eacbb; line-height: 1.65; }

.auth-form { display: grid; gap: 15px; }
.auth-form label:not(.auth-check) { display: grid; gap: 7px; color: #dbe3e9; font-size: 12px; font-weight: 560; }
.auth-form input:not([type="checkbox"]) { width: 100%; min-height: 50px; border: 1px solid var(--auth-line); border-radius: 10px; padding: 12px 14px; background: rgba(3,11,19,.64); color: var(--ink); outline: none; transition: border-color .18s, background .18s, box-shadow .18s; }
.auth-form input:not([type="checkbox"]):focus { border-color: rgba(120,228,229,.55); background: rgba(5,15,24,.9); box-shadow: 0 0 0 4px rgba(120,228,229,.08); }
.auth-password-field { position: relative; display: block; }
.auth-password-field input { padding-right: 92px !important; }
.auth-password-field button { position: absolute; top: 50%; right: 7px; min-height: 36px; transform: translateY(-50%); border: 0; border-radius: 7px; padding: 5px 9px; background: rgba(134,168,255,.08); color: #adbad0; font-size: 10px; }
.auth-password-field button:hover { background: rgba(134,168,255,.14); color: var(--ink); }
.auth-form-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.auth-check { display: grid; grid-template-columns: 17px minmax(0,1fr); align-items: start; gap: 9px; color: #9eacbb; font-size: 11px; line-height: 1.5; }
.auth-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--auth-blue); }
.auth-inline-link, .auth-switch button { border: 0; padding: 0; background: transparent; color: var(--auth-cyan); font: inherit; text-decoration: none; }
.auth-inline-link:hover, .auth-switch button:hover { text-decoration: underline; text-underline-offset: 4px; }
.auth-submit { width: 100%; min-height: 52px; display: flex; justify-content: space-between; align-items: center; margin-top: 3px; border-radius: 10px; padding-inline: 17px; }
.auth-submit span { font-size: 18px; transition: transform .18s; }.auth-submit:hover span { transform: translateX(3px); }
.auth-message { min-height: 21px; margin: -3px 0 0; color: #aab7c4; font-size: 11px; line-height: 1.55; }
.auth-message.is-error { color: #ff9a87; }.auth-message.is-success { color: #9dcc8f; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 23px 0 15px; color: #708091; font-size: 10px; text-align: center; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--auth-line); }
.auth-preview-card { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--auth-line); border-radius: 12px; padding: 13px 14px; background: rgba(255,255,255,.018); color: var(--ink); text-align: left; transition: transform .18s var(--auth-ease), border-color .18s, background .18s; }
.auth-preview-card:hover { transform: translateY(-2px); border-color: rgba(120,228,229,.3); background: rgba(120,228,229,.035); }
.auth-preview-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(134,168,255,.34); border-radius: 50%; color: var(--auth-blue); }
.auth-preview-card strong, .auth-preview-card small { display: block; }.auth-preview-card small { margin-top: 2px; color: #8e9cab; font-size: 10px; line-height: 1.4; }.auth-preview-card b { color: var(--auth-cyan); }
.auth-switch { margin: 22px 0 0; color: #8493a3; font-size: 12px; text-align: center; }
.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-password-note { margin: -4px 0 0; color: #7f8e9e; font-size: 10px; line-height: 1.5; }
.auth-terms { margin: 2px 0; padding: 12px; border: 1px solid var(--auth-line); border-radius: 10px; background: rgba(255,255,255,.018); }

.auth-story-signup { background: radial-gradient(circle at 20% 20%, rgba(237,199,123,.11), transparent 30%), radial-gradient(circle at 80% 72%, rgba(120,228,229,.11), transparent 32%), linear-gradient(145deg,#0a1520,#0a1927 52%,#07111b); }
.auth-steps { align-self: end; position: relative; z-index: 2; display: grid; gap: 8px; max-width: 720px; perspective: 900px; }
.auth-steps > div {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  column-gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  background: rgba(5,16,25,.46);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(10px);
  transform-origin: center;
  transition: transform .42s var(--auth-ease), border-color .32s ease, background .32s ease, box-shadow .42s var(--auth-ease), opacity .3s ease, filter .3s ease;
  animation: auth-step-in .55s var(--auth-ease) backwards;
  will-change: transform;
}
.auth-steps > div::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -38%;
  z-index: -1;
  width: 32%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120,228,229,.13), rgba(237,199,123,.11), transparent);
  filter: blur(3px);
  transform: translateX(-110%) skewX(-18deg);
  transition: transform .78s var(--auth-ease);
}
.auth-steps > div::after {
  content: "";
  position: absolute;
  inset: 16px auto 16px 0;
  width: 2px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(var(--auth-cyan), var(--auth-gold));
  box-shadow: 0 0 18px rgba(120,228,229,.5);
  transform: scaleY(.18);
  transform-origin: center;
  opacity: .45;
  transition: transform .38s var(--auth-ease), opacity .3s ease;
}
.auth-steps > div:nth-child(2) { margin-left: 6%; animation-delay: .08s; }.auth-steps > div:nth-child(3) { margin-left: 12%; animation-delay: .16s; }
.auth-steps span, .auth-steps strong, .auth-steps small { position: relative; z-index: 1; transition: transform .36s var(--auth-ease), color .28s ease, text-shadow .28s ease; }
.auth-steps span { grid-row: 1 / 3; color: var(--auth-gold); font-size: 10px; letter-spacing: .12em; }.auth-steps strong { font-size: 14px; }.auth-steps small { color: #8f9eae; }
.auth-panel-signup { width: min(100%, 620px); }
.auth-shell-signup { grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr); }

@media (hover: hover) and (pointer: fine) {
  .auth-steps:hover > div:not(:hover) { opacity: .7; filter: saturate(.72); }
  .auth-steps > div:hover {
    z-index: 3;
    border-color: rgba(120,228,229,.38);
    background: linear-gradient(105deg, rgba(8,27,40,.86), rgba(11,28,42,.68));
    box-shadow: 0 18px 48px rgba(0,0,0,.27), 0 0 34px rgba(120,228,229,.07), inset 0 1px rgba(255,255,255,.055);
    transform: translate3d(10px,-4px,0) rotateX(1.2deg) scale(1.015);
  }
  .auth-steps > div:nth-child(2):hover { transform: translate3d(12px,-4px,0) rotateX(1.2deg) rotateZ(-.18deg) scale(1.015); }
  .auth-steps > div:nth-child(3):hover { transform: translate3d(14px,-4px,0) rotateX(1.2deg) rotateZ(.18deg) scale(1.015); }
  .auth-steps > div:hover::before { transform: translateX(470%) skewX(-18deg); }
  .auth-steps > div:hover::after { opacity: 1; transform: scaleY(1); }
  .auth-steps > div:hover span { color: #fff0c7; text-shadow: 0 0 16px rgba(237,199,123,.42); transform: translateX(2px) scale(1.06); }
  .auth-steps > div:hover strong { color: #f4fbff; transform: translateX(3px); }
  .auth-steps > div:hover small { color: #b4c4d2; transform: translateX(4px); }
}

.auth-story-recovery { grid-template-rows: auto 1fr; background: radial-gradient(circle at 22% 22%, rgba(134,168,255,.15), transparent 32%), linear-gradient(145deg,#07131e,#091827 58%,#07111b); }
.auth-recovery-mark { align-self: center; justify-self: center; position: relative; width: min(34vw, 350px); aspect-ratio: 1; display: grid; place-items: center; }
.auth-recovery-mark span, .auth-recovery-mark i { position: absolute; inset: 8%; border: 1px solid rgba(134,168,255,.18); border-radius: 50%; animation: auth-orbit-spin 22s linear infinite; }
.auth-recovery-mark i { inset: 24%; border-style: dashed; animation-direction: reverse; animation-duration: 15s; }
.auth-recovery-mark strong { width: 92px; height: 92px; display: grid; place-items: center; border: 1px solid rgba(120,228,229,.42); border-radius: 50%; background: rgba(7,17,27,.82); color: var(--auth-cyan); font-size: 36px; box-shadow: 0 0 64px rgba(120,228,229,.12); animation: auth-core-pulse 3.6s ease-in-out infinite; }
.auth-panel-recovery { width: min(100%, 530px); }
.auth-boundary-note { padding: 13px 14px; border: 1px solid rgba(157,204,143,.22); border-radius: 10px; background: rgba(157,204,143,.055); }
.auth-boundary-note strong { color: #b9dcae; font-size: 12px; }.auth-boundary-note p { margin: 4px 0 0; color: #8fa18e; font-size: 10px; line-height: 1.5; }

@keyframes auth-copy-in { from { opacity: 0; transform: translate3d(-24px,18px,0); } to { opacity: 1; transform: none; } }
@keyframes auth-panel-in { from { opacity: 0; transform: translate3d(28px,12px,0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes auth-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes auth-aurora-drift { from { transform: rotate(-5deg) translate3d(-2%,0,0) scale(1); } to { transform: rotate(9deg) translate3d(4%,2%,0) scale(1.08); } }
@keyframes auth-orbit-spin { to { transform: rotate(360deg); } }
@keyframes auth-core-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 74px rgba(134,168,255,.26); } }
@keyframes auth-star-float { 50% { transform: translate3d(0,-9px,0) scale(1.18); opacity: .72; } }

@media (max-width: 1120px) {
  .auth-shell, .auth-shell-signup { grid-template-columns: minmax(0,.9fr) minmax(430px,1.1fr); }
  .auth-story { padding: 48px 38px; }
  .auth-assurances { grid-template-columns: 1fr; }
  .auth-assurances > div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; padding-block: 10px; }
  .auth-assurances p { margin: 0; }
}

@media (max-width: 900px) {
  .auth-nav-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; }
  .auth-nav-login, .auth-nav-actions .primary.small { width: 100%; justify-content: center; }
  .auth-shell, .auth-shell-signup { grid-template-columns: 1fr; }
  .auth-story { min-height: auto; grid-template-rows: auto auto; padding: 50px 28px 34px; border-right: 0; border-bottom: 1px solid var(--auth-line); }
  .auth-story h1 { max-width: 720px; font-size: clamp(42px,8vw,68px); }
  .auth-constellation, .auth-recovery-mark { display: none; }
  .auth-assurances { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 40px; }
  .auth-assurances > div { display: block; }
  .auth-assurances p { margin-top: 6px; }
  .auth-steps { margin-top: 36px; }
  .auth-panel-wrap { padding: 38px 20px 60px; }
}

@media (max-width: 620px) {
  .auth-screen { min-height: calc(100dvh - 68px); }
  .auth-story { padding: 36px 18px 26px; }
  .auth-story::after { inset: 9px; border-radius: 18px; }
  .auth-story h1 { margin-block: 18px; font-size: clamp(37px,12vw,52px); line-height: 1.02; }
  .auth-story-copy > p { font-size: 15px; }
  .auth-assurances { grid-template-columns: 1fr; gap: 4px; margin-top: 30px; }
  .auth-assurances > div { display: grid; grid-template-columns: 30px 1fr; align-items: center; padding: 9px 4px; background: transparent; }
  .auth-assurances p { margin: 0; }
  .auth-steps > div, .auth-steps > div:nth-child(2), .auth-steps > div:nth-child(3) { margin-left: 0; padding: 12px 13px; }
  .auth-panel-wrap { padding: 22px 10px 48px; }
  .auth-panel { border-radius: 17px; padding: 25px 17px; }
  .auth-runtime-chip { margin-bottom: 22px; }
  .auth-form-grid { grid-template-columns: 1fr; }
  .auth-form-row { align-items: flex-start; }
  .auth-preview-card { grid-template-columns: 36px minmax(0,1fr); }
  .auth-preview-card > b { display: none; }
}

@media (max-width: 420px) {
  .auth-nav-login, .auth-nav-actions .primary.small { min-height: 40px; padding-inline: 8px; font-size: 11px; }
  .auth-form-row { display: grid; }
  .auth-inline-link { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-aurora, .auth-constellation *, .auth-recovery-mark *, .auth-story-copy, .auth-panel, .auth-assurances > div, .auth-steps > div { animation: none !important; }
  .auth-preview-card, .auth-submit span, .auth-steps > div, .auth-steps > div::before, .auth-steps > div::after, .auth-steps span, .auth-steps strong, .auth-steps small { transition: none !important; }
  .auth-steps > div::before { display: none; }
  .auth-steps:hover > div:not(:hover) { opacity: 1; filter: none; }
  .auth-steps > div:hover, .auth-steps > div:nth-child(2):hover, .auth-steps > div:nth-child(3):hover { transform: none; }
}

/* ==========================================================================
   Masuk dengan Google
   ==========================================================================
   Tidak ada skrip Google yang dimuat di halaman ini. Tombolnya hanya tombol
   biasa yang memindahkan halaman ke Supabase, dan lambangnya digambar dari
   data URL di dalam berkas ini — sehingga `script-src 'self'` tidak perlu
   dilonggarkan sedikit pun dan tidak ada permintaan ke domain Google sebelum
   pengguna benar-benar menekannya. */

.auth-oauth { display: grid; gap: 12px; margin-bottom: 6px; }

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  border: 1px solid rgba(226, 232, 240, .34);
  border-radius: 13px;
  background: #ffffff;
  color: #1f2431;
  font: inherit;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-google:hover:not(:disabled) { box-shadow: 0 10px 30px rgba(0, 0, 0, .26); transform: translateY(-1px); }
.auth-google:disabled { cursor: progress; opacity: .62; }
.auth-google:focus-visible { outline: 3px solid var(--auth-cyan, #7de3dc); outline-offset: 3px; }

.auth-google-mark {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.1 24.5c0-1.6-.1-3.2-.4-4.7H24v8.9h11.8c-.5 2.7-2 5.1-4.4 6.7v5.5h7.1c4.2-3.8 6.6-9.5 6.6-16.4z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.9-2 14.5-5.3l-7.1-5.5c-2 1.3-4.5 2.1-7.4 2.1-5.7 0-10.6-3.9-12.3-9.1H4.3v5.7C7.9 41.1 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.7 28.2c-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2v-5.7H4.3C2.8 17.1 2 20.5 2 24s.8 6.9 2.3 9.9l7.4-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.7c3.2 0 6.1 1.1 8.4 3.3l6.3-6.3C34.9 4.1 29.9 2 24 2 15.4 2 7.9 6.9 4.3 14.1l7.4 5.7c1.7-5.2 6.6-9.1 12.3-9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.auth-oauth-note { margin: 0; color: #93a2b4; font-size: 12px; line-height: 1.6; }
.auth-oauth .auth-message { margin: 0; }
.auth-oauth .auth-message:empty { display: none; }

/* Pembatas "atau pakai email". Garisnya digambar dengan dua ruas yang tumbuh
   ke kiri dan kanan, sehingga panjangnya mengikuti lebar panel tanpa perlu
   angka tetap yang akan salah pada bahasa dengan kata lebih panjang. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0;
  color: #7f8d9e;
  font-size: 12px;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--auth-line, rgba(168, 197, 236, .16));
}

@media (prefers-reduced-motion: reduce) {
  .auth-google { transition: none; }
  .auth-google:hover:not(:disabled) { transform: none; }
}
@media (forced-colors: active) {
  .auth-google { border: 1px solid ButtonText; }
  .auth-or::before, .auth-or::after { background: CanvasText; }
}