/* ============================================================ AUTH — cangkang "aplikasi" Satu halaman untuk semua pintu masuk: /masuk. Splash adalah HUB, bukan sekadar layar sambutan — Google, buat akun, dan masuk semuanya ada di situ. Sheet bawah cuma memuat formulir (daftar / masuk / lupa). Kenapa hub-nya di splash: versi sebelumnya menyembunyikan tombol Google di balik satu ketukan "Lanjut". Cara masuk tercepat justru jadi yang paling tersembunyi. Sekarang tidak ada yang disembunyikan. Kenapa satu halaman: tiap pindah halaman di web itu layar putih + muat ulang font. Di HP itulah yang paling membedakan "situs" dari "aplikasi". Langkah yang berpindah di tempat tidak pernah memutus layar. ── Progressive enhancement ──────────────────────────────── Aturan proyek: konten tidak boleh bergantung pada JS untuk TAMPIL. CSS dasar di bawah ini adalah halaman biasa — sheet menyatu di aliran dokumen dan SEMUA langkah terlihat sekaligus. Tombol Google tetap jadi selalu jalan. Yang disembunyikan tanpa JS cuma tombol pembuka sheet, karena formulirnya memang sudah terpampang. Perilaku aplikasi menyala lewat `.js-app` yang dipasang di . Menumpang tokens.css. Sengaja TIDAK meng-import landing.css. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100svh; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } /* Latar sama persis dengan landing supaya perpindahan dari / ke /masuk tidak terasa seperti pindah situs. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(58vw 48vw at 80% -10%, rgba(253,221,134,.30), transparent 62%), radial-gradient(50vw 44vw at 4% 24%, rgba(193,118,27,.08), transparent 60%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("../assets/paper-grain.svg") repeat; background-size: 220px 220px; opacity: .5; mix-blend-mode: multiply; } /* ── Kerangka ───────────────────────────────────────────────── Padding bawah pakai env(safe-area-inset-*): di iPhone tanpa ini tombol utama duduk persis di atas home indicator dan separuh ketukan mendarat di gesture sistem, bukan di tombol. */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ── Splash ───────────────────────────────────────────────── */ .splash { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 24px 24px; text-align: center; } .splash-mid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } /* ── Wajah-wajah di latar ───────────────────────────────────── Produknya tentang menemani orang; layar pertama yang cuma logo di atas krem kosong tidak menyampaikan itu sama sekali. Foto ditaruh sebagai latar, BUKAN konten: aria-hidden, dan sengaja diredupkan supaya tidak pernah menyaingi tombol. Catatan: ini masih foto placeholder yang sama dengan landing (assets/talent/). Begitu diganti foto talent sungguhan, izin tertulisnya harus mencakup pemakaian di layar masuk juga. */ .splash-orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .splash-av { position: absolute; border-radius: 50%; object-fit: cover; width: 56px; height: 56px; box-shadow: 0 0 0 3px rgba(255,253,249,.9), var(--lift-2); opacity: .85; } /* Sebaran sengaja tidak simetris — grid rapi terbaca sebagai katalog, bukan orang. Semuanya menjauh dari sumbu tengah supaya tidak pernah menabrak logo & tombol. */ .splash-av:nth-child(1) { top: 7%; left: 6%; width: 50px; height: 50px; } .splash-av:nth-child(2) { top: 3%; right: 12%; width: 62px; height: 62px; } .splash-av:nth-child(3) { top: 20%; right: 3%; width: 44px; height: 44px; opacity: .7; } .splash-av:nth-child(4) { top: 17%; left: 14%; width: 40px; height: 40px; opacity: .65; } .splash-av:nth-child(5) { top: 31%; left: 2%; width: 52px; height: 52px; opacity: .75; } .splash-av:nth-child(6) { top: 33%; right: 8%; width: 46px; height: 46px; opacity: .6; } .splash-logo { width: 88px; height: 88px; margin-bottom: 18px; filter: drop-shadow(0 6px 18px rgba(10,145,66,.22)); } .splash-word { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 12vw, 54px); line-height: 1; letter-spacing: -.05em; margin: 0; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .splash-tag { margin: 12px 0 0; max-width: 19ch; font-size: 15px; color: var(--ink-2); } /* Kaki splash — di sinilah semua pintu masuk berada. */ .splash-foot { position: relative; z-index: 1; width: 100%; max-width: 400px; margin-top: auto; padding-top: 30px; } .splash-fine { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); } .splash-fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } .splash-alt { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-2); } /* ── Scrim ────────────────────────────────────────────────── */ .scrim { display: none; } /* ── Sheet ──────────────────────────────────────────────────── Dasar = kartu biasa di aliran dokumen (mode tanpa JS). */ .sheet { width: 100%; max-width: 424px; margin: 0 auto 40px; background: var(--grad-card); border-radius: var(--radius-card); box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2); } .sheet-body { padding: 30px 26px 26px; } @media (max-width: 480px) { .sheet-body { padding: 26px 20px 22px; } } .sheet-grip { display: none; } .sheet-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 8px 12px 8px 8px; background: none; border: 0; border-radius: var(--radius-pill); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; } .sheet-back:hover { color: var(--ink); background: rgba(21,22,30,.04); } .sheet-back:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } /* ── Langkah ────────────────────────────────────────────────── Tanpa JS semuanya tampil berurutan, dipisah garis supaya tetap terbaca sebagai bagian yang berbeda. */ .step + .step { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); } .auth-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 7vw, 34px); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 8px; } .auth-lede { font-size: 14.5px; color: var(--ink-2); margin: 0 0 22px; } /* ── Tombol ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 22px; border-radius: var(--radius-btn); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.012em; text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; /* 44px minimum area sentuh — di bawah itu meleset terus di HP. */ min-height: 48px; transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .btn-lg { padding: 16px 24px; font-size: 16px; min-height: 54px; } .btn-primary { background: var(--grad-accent); color: var(--accent-ink); box-shadow: 0 0 0 1.5px var(--accent-ring), var(--spec), 0 3px 0 var(--accent-lo), 0 4px 4px rgba(0,0,0,.12), 0 10px 22px var(--accent-glow); } .btn-primary:hover:not(:disabled) { filter: brightness(1.04); } .btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 1.5px var(--accent-ring), 0 1px 0 var(--accent-lo), 0 1px 2px rgba(0,0,0,.14); } .btn-ghost { background: var(--grad-card); color: var(--ink); box-shadow: var(--rim-dark), var(--spec-soft), inset 0 -1px 0 rgba(22,25,26,.05), var(--lift-1); } .btn-ghost:hover:not(:disabled) { box-shadow: var(--rim-dark), var(--spec-soft), inset 0 -1px 0 rgba(22,25,26,.05), var(--lift-2); } .btn-ghost:active:not(:disabled) { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn + .btn { margin-top: 10px; } /* Tombol teks — untuk pindah langkah, bukan aksi utama. */ .btn-plain { display: inline; width: auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; font: inherit; font-size: inherit; font-weight: 600; color: var(--brand-2); cursor: pointer; text-decoration: none; } .btn-plain:hover { text-decoration: underline; } .btn-plain:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 4px; } /* Tombol yang tugasnya cuma membuka sheet tidak berarti apa-apa tanpa JS — formulirnya sudah terpampang di bawah. Harus dideklarasikan SESUDAH .btn: specificity-nya sama (0,1,0), jadi yang menang adalah yang belakangan. Waktu aturan ini masih di atas, `display:none`-nya kalah oleh `.btn { display:inline-flex }` dan tombolnya tetap muncul di mode tanpa JS. */ .btn-sheet { display: none; } /* ── Pemisah ──────────────────────────────────────────────── */ .auth-or { display: flex; align-items: center; gap: 14px; margin: 16px 0; font-size: 12px; color: var(--ink-3); } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ── Field ────────────────────────────────────────────────── */ .auth-field { margin-bottom: 15px; } .auth-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; } .auth-input, .auth-select { width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); font: inherit; /* 16px WAJIB: di bawah itu Safari iOS auto-zoom begitu field difokus, dan halaman langsung terlihat rusak di HP. */ font-size: 16px; /* min-height eksplisit: kolom yang masih kosong pernah mengempis jadi setinggi nol di Safari iOS dan terlihat seperti tidak ada kolomnya sama sekali. */ min-height: 50px; color: var(--ink); background: var(--bg-card); border: 0; -webkit-appearance: none; appearance: none; box-shadow: var(--rim-dark), inset 0 1px 2px rgba(21,22,30,.05); } .auth-input::placeholder { color: var(--ink-3); } .auth-input:focus, .auth-select:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; } .auth-input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px #C0392B, inset 0 1px 2px rgba(21,22,30,.05); } .auth-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); } /* appearance:none menghapus panah bawaan, jadi digambar sendiri. */ .auth-select { padding-right: 42px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2369655F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } /* ── Tanggal lahir ──────────────────────────────────────────── TIGA kolom angka, bukan dan bukan