/* ============================================================ 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(46,14,19,.22)); } /* Ini wordmark yang berdiri sendiri, jadi ikut sans seperti logo — bukan judul. Ukurannya turun dari 54px: pada bobot 700 sans memenuhi ruang jauh lebih penuh daripada serif 400. */ /* Di sini wordmark BOLEH dua baris — ini layar splash, namanya berdiri sendiri di tengah, dan lockup dua baris memang bentuk yang dipakai papan mood. Yang dijaga cuma jangan sampai TIGA baris: text-wrap balance membagi rata, max-width mengunci titik pecahnya, dan line-height turun ke .95 supaya dua baris tetap terbaca satu blok dan bukan dua kalimat. Ukurannya turun dari 48px karena nama 16 huruf pada 48px memaksa pecah jadi tiga di layar 360px. */ .splash-word { font-family: var(--font); font-weight: 700; font-size: clamp(30px, 8.6vw, 40px); line-height: .95; letter-spacing: -.035em; margin: 0; max-width: 9ch; text-wrap: balance; 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-masuk { margin-top: 10px; } /* ── 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; } /* Baris navigasi sheet: kembali kiri, toggle kanan (pola iOS). */ .sheet-head { padding: 0 18px; } @media (max-width: 480px) { .sheet-head { padding: 0 16px; } } .sheet-nav { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 12px; padding: 8px 0; } /* Tombol kembali bulat — sheet, header halaman, admin, dll. */ .sheet-back, .btn-back { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: var(--grad-card); box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1); color: var(--ink); text-decoration: none; cursor: pointer; flex: none; transition: box-shadow .18s ease, transform .14s ease; } /* Area sentuh 44px tanpa membesarkan lingkarannya. padding tidak bisa dipakai: tombol ini punya latar, jadi padding ikut menggambar. Kotak transparan lewat ::after menangkap sentuhan tanpa menggambar apa pun — 38px masih di bawah ambang jari, dan meleset di tombol kembali berarti orang terjebak di halaman. */ .sheet-back, .btn-back { position: relative; } .sheet-back::after, .btn-back::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; } .sheet-back svg, .btn-back svg { width: 20px; height: 20px; } .sheet-back:hover, .btn-back:hover { box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2); } .sheet-back:active, .btn-back:active { transform: translateY(1px); } .sheet-back:focus-visible, .btn-back:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .sheet-back[hidden], .btn-back[hidden] { display: none; } /* Pola header halaman — safe-area + kolom samping 44px untuk tombol 38px */ .app-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; } .app-head--flex { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; } /* Pill ghost — compact, kanan atas */ .sheet-toggle { margin-left: auto; padding: 0 16px; border: 0; border-radius: 999px; background: var(--grad-card); box-shadow: var(--rim-dark), var(--spec-soft), inset 0 -1px 0 rgba(22,25,26,.05), var(--lift-1); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); white-space: nowrap; min-height: 38px; cursor: pointer; flex: none; transition: box-shadow .18s ease, transform .14s ease; } .sheet-toggle:hover { box-shadow: var(--rim-dark), var(--spec-soft), inset 0 -1px 0 rgba(22,25,26,.05), var(--lift-2); } .sheet-toggle:active { transform: translateY(1px); } .sheet-toggle:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .sheet-toggle[hidden] { display: none; } /* ── 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: var(--wt-display); 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; } /* `display: inline-flex` di atas punya spesifisitas kelas dan MENGALAHKAN `display: none` yang diberikan browser untuk [hidden]. Tanpa baris ini, tombol yang di-`hidden` dari JS tetap terlihat — persis seperti .formsg[hidden] beberapa baris di bawah. Berlaku untuk setiap aturan display di berkas ini. */ .btn[hidden] { display: none; } .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, .field-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, .field-select:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; } .auth-input[aria-invalid="true"], .auth-select[aria-invalid="true"], .field-select[aria-invalid="true"] { box-shadow: 0 0 0 1.5px #C0392B, inset 0 1px 2px rgba(21,22,30,.05); } .auth-check[aria-invalid="true"] input { outline: 2px solid #C0392B; outline-offset: 1px; } .auth-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); } /* Galat per kolom — muncul tepat di bawah field yang salah. */ .auth-galat { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: #922B21; } .auth-galat[hidden] { display: none; } .auth-check .auth-galat { margin-top: 8px; } /* appearance:none menghapus panah bawaan, jadi digambar sendiri. */ .auth-select, .field-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; } .field-select:disabled { opacity: .55; cursor: not-allowed; } /* ── Tanggal lahir ──────────────────────────────────────────── TIGA kolom angka, bukan dan bukan