/*================================================================== main.css — komponen visual halaman Login ------------------------------------------------------------------ File ini HANYA dipakai application/views/login.php. Token & reset ada di util.css (dimuat lebih dulu). Tidak ada framework grid — layout murni flexbox. ==================================================================*/ /*================================================================== [ Kerangka split-screen ] ==================================================================*/ /* Latar terang halaman ditaruh di , BUKAN di .form-panel. Panel kanan sengaja dibiarkan transparan supaya lapisan merah dari panel kiri bisa benar-benar bocor melewatinya — kalau panel kanan punya background opaque, ia akan menimpa bleed itu dan seam-nya kembali jadi garis lurus. */ body { background-image: radial-gradient(88% 62% at 82% 4%, #ffffff 0%, transparent 56%), linear-gradient(168deg, var(--surface-tint) 0%, #f7f3f3 52%, var(--surface-sink) 100%); background-attachment: fixed; } .login-shell { position: relative; display: flex; min-height: 100vh; overflow: hidden; } /* Lapisan warna brand dipasang di level shell dan sengaja dibuat JAUH lebih lebar dari panel kirinya (58% vs 44%), lalu di-mask diagonal supaya warnanya sudah habis memudar jauh sebelum lapisannya benar-benar berhenti. Tidak ada tepi yang bisa ditangkap mata sebagai garis batas. */ .login-shell::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; /* Lebar layer (72%) sengaja dibuat jauh melebihi titik transparan mask (79%) — sisa ~21% terakhir sudah 0 opacity di SEMUA baris, termasuk baris atas/bawah yang tergeser karena mask-nya miring. Tanpa buffer ini, tepi elemen terpotong dan seam-nya kembali terbaca sebagai garis lurus. */ width: 72%; background-image: /* pattern titik halus, paling atas */ radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), /* sorot terang */ radial-gradient(105% 80% at 22% 18%, rgba(255, 96, 74, .62), transparent 58%), /* pekat kiri-bawah */ radial-gradient(85% 75% at 8% 96%, rgba(38, 4, 8, .95), transparent 62%), /* pekat kanan-atas */ radial-gradient(80% 70% at 92% 4%, rgba(74, 6, 14, .80), transparent 60%), /* dasar gradient */ linear-gradient(152deg, var(--ypt-ink) 0%, var(--ypt-maroon) 40%, var(--ypt-red) 78%, #f0242b 100%); background-size: 22px 22px, 200% 200%, 200% 200%, 200% 200%, 220% 220%; background-position: 0 0, 0% 0%, 100% 100%, 0% 100%, 0% 50%; animation: brandDrift 30s var(--ease) infinite alternate; -webkit-mask-image: linear-gradient(99deg, #000 0%, #000 44%, rgba(0, 0, 0, .80) 56%, rgba(0, 0, 0, .42) 66%, rgba(0, 0, 0, .12) 73%, transparent 79%); mask-image: linear-gradient(99deg, #000 0%, #000 44%, rgba(0, 0, 0, .80) 56%, rgba(0, 0, 0, .42) 66%, rgba(0, 0, 0, .12) 73%, transparent 79%); } /* Blob kabur yang sengaja melintasi daerah sambungan — pemecah garis lurus tambahan supaya mata tidak menangkap seam vertikal. */ .login-shell::after { content: ''; position: absolute; z-index: 0; top: 12%; left: 40%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 18, 26, .26) 0%, rgba(232, 18, 26, .10) 42%, transparent 70%); filter: blur(52px); pointer-events: none; } /*================================================================== [ Panel kiri — brand ] ==================================================================*/ .brand-panel { position: relative; z-index: 1; flex: 0 0 44%; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 60px; color: var(--text-onbrand); } /* Gradient bergerak sangat lambat. Posisi layer pattern (layer ke-1) sengaja dikunci di 0 0 supaya titik-titiknya tidak ikut menggeser. */ @keyframes brandDrift { from { background-position: 0 0, 0% 0%, 100% 100%, 0% 100%, 0% 50%; } to { background-position: 0 0, 34% 30%, 66% 70%, 24% 76%, 100% 50%; } } .brand-mark { display: flex; align-items: center; gap: 18px; } .brand-logo { width: 62px; height: 62px; padding: 9px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 6px rgba(26, 4, 7, .18), 0 10px 24px rgba(26, 4, 7, .22); } .brand-mark-text { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); } .brand-body { padding: 40px 0; } .brand-title { font-size: 42px; font-weight: 700; line-height: 1.14; letter-spacing: -.015em; color: #fff; text-shadow: 0 2px 18px rgba(26, 4, 7, .28); } .brand-rule { width: 74px; height: 4px; margin-top: 26px; border-radius: var(--radius-pill); background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .15)); } .brand-foot { font-size: 12.5px; color: rgba(255, 255, 255, .62); } /*================================================================== [ Panel kanan — form ] ==================================================================*/ .form-panel { position: relative; z-index: 1; /* di atas bleed panel kiri */ flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 48px 40px; /* sengaja TANPA background — gradient terangnya diambil dari supaya bleed merah panel kiri tidak tertimpa. */ } .login-card { width: 100%; max-width: 430px; padding: 44px 42px 38px; border-radius: var(--radius-card); background: var(--surface); /* shadow berlapis: beberapa langkah blur/opacity, bukan satu lapis flat */ box-shadow: 0 1px 1px rgba(29, 18, 22, .035), 0 2px 4px rgba(29, 18, 22, .040), 0 6px 12px rgba(29, 18, 22, .048), 0 14px 28px rgba(29, 18, 22, .055), 0 28px 56px rgba(29, 18, 22, .065); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .login-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(29, 18, 22, .045), 0 4px 8px rgba(29, 18, 22, .055), 0 10px 20px rgba(29, 18, 22, .065), 0 22px 44px rgba(29, 18, 22, .080), 0 40px 80px rgba(29, 18, 22, .095); } .card-head { margin-bottom: 30px; } .card-title { font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--text-strong); } .card-sub { margin-top: 6px; font-size: 14px; color: var(--text-muted); } /*================================================================== [ Field ] ==================================================================*/ .field { margin-bottom: 22px; } .field-label { display: block; margin-bottom: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .wrap-input100 { position: relative; border-radius: var(--radius-field); background: #fbf9f9; border: 1.5px solid var(--line); transition: border-color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease); } .wrap-input100:hover { border-color: var(--line-strong); } /* input100 = kelas yang dibaca assets/js/main.js untuk validasi */ .input100 { display: block; width: 100%; height: 52px; padding: 0 16px 0 46px; border: 0; border-radius: var(--radius-field); background: transparent; color: var(--text-strong); font-size: 15px; outline: none; } .input100::placeholder { color: #b4a6aa; } /* ruang untuk tombol mata di field password */ #pass.input100 { padding-right: 52px; } .input-icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); font-size: 15px; color: #b4a6aa; pointer-events: none; transition: color .22s var(--ease); } /* Garis aksen yang melebar dari tengah saat field aktif. Elemen span.focus-input100 dipertahankan dari markup lama. */ .focus-input100 { position: absolute; left: 50%; right: 50%; bottom: -1.5px; height: 2.5px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--ypt-red-deep), var(--ypt-red-bright)); opacity: 0; transition: left .28s var(--ease), right .28s var(--ease), opacity .28s var(--ease); } .wrap-input100:focus-within { background: var(--surface); border-color: rgba(232, 18, 26, .42); box-shadow: 0 0 0 4px rgba(232, 18, 26, .09); } .wrap-input100:focus-within .focus-input100 { left: 10px; right: 10px; opacity: 1; } .wrap-input100:focus-within .input-icon { color: var(--ypt-red); } /*================================================================== [ Tombol lihat/sembunyikan password ] Struktur DOM tidak diubah: span.btn-show-pass tetap sibling langsung SEBELUM input[name=pass] — assets/js/main.js memakai $(this).next('input') untuk menemukan input-nya. ==================================================================*/ .btn-show-pass { position: absolute; top: 50%; right: 6px; z-index: 2; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; color: #b4a6aa; font-size: 15px; cursor: pointer; user-select: none; transition: color .2s var(--ease), background-color .2s var(--ease); } .btn-show-pass:hover { color: var(--ypt-red); background: rgba(232, 18, 26, .08); } /* class yang ditambahkan main.js saat password ditampilkan */ .btn-show-pass.active { color: var(--ypt-red); } /*================================================================== [ Pesan validasi client-side ] main.js menambahkan .alert-validate ke .wrap-input100, teksnya dibaca dari atribut data-validate. ==================================================================*/ .wrap-input100.alert-validate { border-color: rgba(198, 40, 40, .55); background: #fffafa; } .wrap-input100.alert-validate::after { content: attr(data-validate); position: absolute; top: calc(100% + 7px); left: 2px; font-size: 12.5px; font-weight: 600; color: var(--danger); } .wrap-input100.alert-validate .input-icon { color: var(--danger); } /* beri ruang bawah supaya pesan tidak menabrak field berikutnya */ .field.has-error { margin-bottom: 40px; } /*================================================================== [ Tombol login ] ==================================================================*/ .login-actions { margin-top: 30px; } .login100-form-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; padding: 0 20px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--ypt-red-deep) 0%, var(--ypt-red) 55%, #f5262c 100%); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .03em; box-shadow: 0 1px 2px rgba(124, 10, 18, .20), 0 4px 10px rgba(124, 10, 18, .22), 0 10px 22px rgba(124, 10, 18, .20); transition: transform .24s var(--ease), box-shadow .24s var(--ease), filter .24s var(--ease); } .login100-form-btn:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 2px 4px rgba(124, 10, 18, .24), 0 8px 18px rgba(124, 10, 18, .30), 0 18px 38px rgba(124, 10, 18, .28); } .login100-form-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(124, 10, 18, .24), 0 3px 8px rgba(124, 10, 18, .22); } /* Loading state — dinyalakan main.js saat form benar-benar dikirim, dimatikan lagi saat halaman dipulihkan dari bfcache (jalur history.go(-1) setelah alert gagal login). Teks labelnya ada di HTML dan ditukar oleh main.js, bukan lewat CSS content, supaya tombol tetap berlabel kalau CSS gagal muat. */ .login100-form-btn.is-loading { cursor: progress; filter: saturate(.92); transform: none; } .login100-form-btn.is-loading:hover { transform: none; } .btn-spinner { display: none; width: 17px; height: 17px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: btnSpin .7s linear infinite; } .login100-form-btn.is-loading .btn-spinner { display: block; } @keyframes btnSpin { to { transform: rotate(360deg); } } .card-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; text-align: center; color: var(--text-muted); } /*================================================================== [ Responsive ] ==================================================================*/ @media (max-width: 1080px) { .brand-panel { flex-basis: 40%; padding: 44px 40px; } .brand-title { font-size: 34px; } } /* Layar sempit: panel brand jadi pita pendek yang ditumpuk di atas form. Mask diputar jadi vertikal supaya merahnya tetap larut ke bawah, bukan berhenti di garis lurus horizontal. */ @media (max-width: 820px) { .login-shell { flex-direction: column; min-height: 100vh; } .brand-panel { flex: 0 0 auto; justify-content: center; gap: 18px; padding: 34px 26px 54px; } /* Pita brand ditumpuk di atas: lapisan merah jadi selebar layar dengan tinggi tetap, mask diputar jadi vertikal supaya merahnya larut ke bawah — bukan berhenti di garis lurus horizontal. */ /* Sama seperti versi desktop: tinggi layer (400px) melebihi titik transparan mask (82%) supaya tepi bawahnya tidak ikut terpotong. */ .login-shell::before { width: 100%; height: 400px; bottom: auto; -webkit-mask-image: linear-gradient(183deg, #000 0%, #000 42%, rgba(0, 0, 0, .80) 56%, rgba(0, 0, 0, .42) 68%, rgba(0, 0, 0, .12) 76%, transparent 82%); mask-image: linear-gradient(183deg, #000 0%, #000 42%, rgba(0, 0, 0, .80) 56%, rgba(0, 0, 0, .42) 68%, rgba(0, 0, 0, .12) 76%, transparent 82%); } .login-shell::after { top: 130px; left: 50%; width: 340px; height: 340px; margin-left: -170px; } .brand-body { padding: 20px 0 0; } .brand-title { font-size: 27px; } .brand-rule { margin-top: 18px; } .brand-foot { display: none; /* dipindah ke kaki kartu supaya tidak dobel */ } .form-panel { padding: 10px 22px 40px; } .login-card { max-width: 460px; padding: 34px 26px 30px; } } @media (max-width: 420px) { .brand-panel { padding: 26px 20px 48px; } .brand-logo { width: 52px; height: 52px; } .brand-title { font-size: 23px; } .login-card { padding: 28px 20px 26px; } .card-title { font-size: 22px; } } /*================================================================== [ Aksesibilitas — hormati preferensi kurangi animasi ] ==================================================================*/ @media (prefers-reduced-motion: reduce) { .login-shell::before { animation: none; } .btn-spinner { animation-duration: 2s; } .login-card, .login100-form-btn { transition: none; } .login-card:hover, .login100-form-btn:hover { transform: none; } } /*================================================================== [ Banner error login ] Menggantikan alert() browser. Dirender di dalam kartu, di atas form, dari flashdata 'login_error' (lihat Login::_pesan_gagal()). ==================================================================*/ .login-alert { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; padding: 14px 16px; border: 1px solid rgba(198, 40, 40, .22); border-left: 4px solid var(--danger); border-radius: var(--radius-field); background: linear-gradient(180deg, #fff6f6 0%, #fff1f1 100%); box-shadow: 0 1px 2px rgba(198, 40, 40, .05), 0 4px 12px rgba(198, 40, 40, .07); animation: alertIn .32s var(--ease) both; } @keyframes alertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .login-alert-icon { flex: 0 0 auto; margin-top: 1px; font-size: 17px; line-height: 1.35; color: var(--danger); } .login-alert-body { flex: 1 1 auto; min-width: 0; } .login-alert-text { font-size: 14px; font-weight: 600; line-height: 1.45; color: #8e2020; } /* Tombol bantuan ke WhatsApp admin */ .login-alert-wa { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 14px; border-radius: var(--radius-pill); background: #ffffff; border: 1px solid rgba(198, 40, 40, .28); color: #8e2020; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .login-alert-wa .fa-whatsapp { font-size: 14px; } .login-alert-wa:hover { transform: translateY(-1px); background: #25d366; border-color: #25d366; color: #ffffff; box-shadow: 0 2px 6px rgba(37, 211, 102, .30), 0 6px 16px rgba(37, 211, 102, .24); } @media (prefers-reduced-motion: reduce) { .login-alert { animation: none; } .login-alert-wa { transition: none; } .login-alert-wa:hover { transform: none; } }