/* Halaman bermerek berdiri sendiri (tanpa Filament): galat 403/404 dan hasil tautan verifikasi email.
   Latar krem hangat, kepala espresso melengkung, kartu putih, aksen amber (selaras halaman masuk). Tanpa sumber luar. */
:root { --gl-espresso: #17110D; --gl-krem: #F4ECE1; --gl-amber: #F2A33A; --gl-tinta: #1C140E; --gl-redup: #6F5C4A; --gl-garis: #EADFCF; }
html { background: var(--gl-krem); color-scheme: light; }
.gl-body { margin: 0; background: var(--gl-krem); color: var(--gl-tinta); font: 400 16px/1.6 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.gl { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; }
.gl-kepala {
    width: 100%; box-sizing: border-box; padding: 28px 24px 84px; text-align: center; color: #F4E9DA;
    background: radial-gradient(circle 420px at 80% 100%, #2A1D13 0%, #17110D 60%, #120D09 100%);
    border-radius: 0 0 50% 50% / 0 0 56px 56px;
}
.gl-merek { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.gl-merek img { width: 40px; height: 40px; display: block; }
.gl-wm { font-family: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .18em; white-space: nowrap; line-height: 1; }
.gl-v { color: #F4E9DA; } .gl-y { color: var(--gl-amber); }
.gl-tagline { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: #C9B8A3; }
.gl-kartu {
    position: relative; z-index: 1; box-sizing: border-box; width: calc(100% - 32px); max-width: 520px; margin: -56px 16px 0; padding: 30px 26px 28px;
    background: #fff; border: 1px solid var(--gl-garis); border-radius: 18px; box-shadow: 0 14px 40px -18px rgba(23, 17, 13, .35); text-align: center;
}
.gl-kartu p.gl-kode { margin: 0 0 4px; font: 700 54px/1 'Sora', 'Inter', ui-sans-serif, sans-serif; letter-spacing: .04em; color: var(--gl-amber); }
.gl-ikon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFF3DC; color: #B26A12; }
.gl-ikon svg { width: 30px; height: 30px; }
.gl-kartu h1 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--gl-tinta); }
.gl-kartu p { margin: 0 0 12px; color: #3A2D22; }
.gl-kartu p.gl-redup { color: var(--gl-redup); font-size: 14px; }
.gl-aksi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.gl-tombol {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--gl-amber);
    background: var(--gl-amber); color: var(--gl-tinta); font: 700 16px/1 'Inter', ui-sans-serif, sans-serif; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.gl-tombol:hover { filter: brightness(1.05); }
.gl-tombol:focus-visible { outline: 3px solid #1C140E; outline-offset: 2px; }
.gl-tombol.gl-besar { min-height: 56px; padding: 0 32px; font-size: 18px; width: 100%; max-width: 360px; }
.gl-tombol.bahaya { background: #9B2C1F; border-color: #9B2C1F; color: #fff; }
.gl-tombol.bahaya:focus-visible { outline-color: #9B2C1F; }
.gl-tombol.sekunder { background: transparent; color: var(--gl-tinta); border-color: #CDBBA6; }
.gl-form { margin-top: 18px; text-align: left; }
.gl-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.gl-form input[type=email], .gl-form input[type=text] { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 1.5px solid #CDBBA6; border-radius: 12px; font: 400 16px 'Inter', sans-serif; color: var(--gl-tinta); background: #fff; }
.gl-form input[type=email]:focus, .gl-form input[type=text]:focus { outline: 3px solid rgba(242, 163, 58, .55); border-color: var(--gl-amber); }
.gl-form .gl-aksi { margin-top: 14px; }
.gl-form .gl-tombol { width: 100%; }
.gl-jebak { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gl-kaki { margin: auto 0 0; padding: 26px 16px 22px; font-size: 12px; color: #9A8670; text-align: center; }
@media (min-width: 640px) { .gl-kepala { padding-bottom: 96px; } .gl-kartu { padding: 36px 40px 32px; } .gl-kartu p.gl-kode { font-size: 64px; } }
@media (prefers-reduced-motion: no-preference) { .gl-kartu { animation: gl-masuk .45s cubic-bezier(.2, .7, .2, 1) both; } }
@keyframes gl-masuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gl-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 8px; }
.gl-nav a { color: #7A5A3A; font-weight: 600; text-decoration: none; padding: 8px 2px; min-height: 24px; }
.gl-nav a:hover { text-decoration: underline; }
.gl-kaki p { margin: 0; }
