/* ============================================================ WDS CUSTOM - HALAMAN MASUK / DAFTAR ------------------------------------------------------------ Pecahan dari wds-custom.css. File ini hanya dimuat di halaman auth (login, lupa sandi, verifikasi). Lihat wds-custom-loader.php bagian 3 untuk aturan pemuatan. ============================================================ */ /* ============================================================ BAGIAN 5 - HALAMAN LOGIN ------------------------------------------------------------ Ditulis ulang bersih pada v9. Tidak ada lapisan lama. Susunan layar besar : panel brand 46% | area form 54% Susunan ponsel : panel brand di atas, kartu form di bawah PENTING - GAMBAR BACKGROUND: Plugin punya pengaturan "Background untuk Mode Terang/Gelap" (Pengaturan WDS > Umum). Gambar itu dipasang plugin ke lewat properti background-image. Di bawah ini kita HANYA mengatur background-color, tidak pernah memakai properti "background" gabungan pada body. Jadi gambar Anda tidak akan tertimpa. Panel biru dan kartu form dibuat sedikit tembus pandang supaya gambar tetap terlihat kalau dipasang. ============================================================ */ /* ---------- Kerangka ---------- */ /* Warna dasar halaman. Sengaja background-color, BUKAN background, agar gambar dari pengaturan WDS tetap tampil. */ #kt_body.auth-bg { background-color: var(--wdsc-auth-surface); } #kt_body .wdsc-auth { min-height: 100vh; background: transparent; } #kt_body .wdsc-auth > .d-flex { min-height: 100vh; } /* ---------- Panel brand (kiri) ---------- */ #kt_body .wdsc-auth__brand { position: relative; display: flex; flex: 0 0 52%; max-width: 52%; overflow: hidden; /* Warna dasar = Default Color (Primary) dari Pengaturan WDS. Baris ini juga jadi cadangan untuk peramban lama. */ background-color: var(--bs-primary); /* Gradasi Default Color -> Default Active Color, sedikit tembus pandang agar gambar background tetap terlihat. */ background-image: linear-gradient(155deg, color-mix(in srgb, var(--bs-primary) 97%, transparent) 0%, color-mix(in srgb, var(--bs-primary-active, var(--bs-primary)) 90%, transparent) 100%); } /* Lingkaran hias tipis di pojok bawah */ #kt_body .wdsc-auth__brand::after { content: ""; position: absolute; right: -16%; bottom: -24%; width: 60%; padding-top: 60%; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; } /* Kunci perataan: isi panel harus setinggi panelnya, supaya logo di atas, tagline di tengah, copyright di bawah. */ #kt_body .wdsc-auth__brand-inner { position: relative; z-index: 2; flex: 1 1 auto; padding: 3.25rem 3.5rem !important; } #kt_body .wdsc-auth__logo-link { display: inline-flex; align-items: center; padding: .65rem 1.15rem; border-radius: var(--wdsc-radius); background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .12); } #kt_body .wdsc-auth__logo { max-height: 30px; width: auto; display: block; } #kt_body .wdsc-auth__wordmark { font-size: 1.05rem; font-weight: 700; color: var(--bs-primary); } /* Blok tengah: tagline + keunggulan, dipusatkan vertikal */ #kt_body .wdsc-auth__brand-mid { display: flex; flex-direction: column; justify-content: center; padding: 2rem 0 !important; } #kt_body .wdsc-auth__tagline { margin: 0 0 2.25rem; font-size: 2.15rem; line-height: 1.22; font-weight: 700; letter-spacing: -.5px; color: var(--bs-gray-900); max-width: 16ch; } #kt_body .wdsc-auth__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; } #kt_body .wdsc-auth__feature { display: flex; align-items: center; gap: .95rem; } #kt_body .wdsc-auth__feature-icon { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wdsc-radius-sm); background: rgba(255, 255, 255, .22); border: 1px solid color-mix(in srgb, var(--bs-primary) 18%, transparent); color: var(--wdsc-on-brand); } #kt_body .wdsc-auth__feature-text { font-size: .94rem; color: rgba(255, 255, 255, .95); } #kt_body .wdsc-auth__copyright { font-size: .8rem; color: rgba(255, 255, 255, .55); } /* ---------- Area form (kanan) ---------- */ /* Dibiarkan tembus pandang agar gambar background dari pengaturan WDS tetap terlihat kalau dipasang. */ #kt_body .wdsc-auth__form-side { position: relative; flex: 1 1 auto; background: transparent; } #kt_body .wdsc-auth__form-side > .d-flex { padding: 2.5rem !important; } /* Tombol terang/gelap: pojok kanan atas, di LUAR kartu */ /* Tombol terang/gelap ditempel ke pojok kanan atas KARTU, bukan ke area form. Ini membuat menu pilihannya muncul tepat di bawah ikonnya. */ #kt_body .wdsc-auth__mode { position: absolute; top: .9rem; right: 1rem; z-index: 20; } /* Plugin membungkus tombolnya dengan position-absolute bawaan. Kita netralkan supaya jadi titik acuan yang benar. */ #kt_body .wdsc-auth__mode > div { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; } /* Paksa menu pilihan muncul persis di bawah ikon */ #kt_body .wdsc-auth__mode .menu-sub-dropdown { position: absolute !important; top: calc(100% + .5rem) !important; right: 0 !important; left: auto !important; bottom: auto !important; transform: none !important; z-index: 30 !important; } /* ---------- Kartu form ---------- */ #kt_body .wdsc-auth__card { position: relative; width: 100%; max-width: 500px; padding: 2.75rem 2.9rem; border-radius: var(--wdsc-radius-lg); background: var(--wdsc-auth-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--wdsc-auth-line); box-shadow: 0 20px 55px rgba(20, 24, 40, .09); } /* ---------- Judul ---------- */ #kt_body .wdsc-login__head { margin-bottom: 1.9rem; text-align: center; } #kt_body .wdsc-login__title { margin: 0; font-size: 1.55rem; font-weight: 700; line-height: 1.3; letter-spacing: -.3px; color: var(--bs-gray-900); } /* ---------- Kolom isian ---------- */ #kt_body .wdsc-field { margin-bottom: .9rem; } /* Label disembunyikan secara visual, tetapi tetap terbaca oleh pembaca layar untuk pengguna tunanetra. */ #kt_body .wdsc-field__label { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } #kt_body .wdsc-field__wrap { position: relative; display: flex; align-items: center; height: 54px; border-radius: var(--wdsc-radius); background: var(--wdsc-auth-surface); border: 1px solid var(--wdsc-auth-line); transition: border-color var(--wdsc-speed) ease, box-shadow var(--wdsc-speed) ease, background-color var(--wdsc-speed) ease; } #kt_body .wdsc-field__wrap:focus-within { background: #fff; border-color: rgba(var(--bs-primary-rgb), .5); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .09); } #kt_body .wdsc-field__icon { position: absolute; left: 1.05rem; display: inline-flex; align-items: center; color: var(--bs-gray-500); pointer-events: none; transition: color var(--wdsc-speed) ease; } #kt_body .wdsc-field__wrap:focus-within .wdsc-field__icon { color: var(--bs-primary); } #kt_body .wdsc-input.form-control { height: 100%; border: 0; background: transparent !important; box-shadow: none; padding: 0 1.05rem 0 3rem; font-size: .95rem; color: var(--bs-gray-900); } #kt_body .wdsc-input.form-control:focus { box-shadow: none; } #kt_body .wdsc-input--pass.form-control { padding-right: 3.2rem; } #kt_body .wdsc-field__toggle.btn { position: absolute; right: .55rem; width: 36px; height: 36px; border: 0; background: transparent; color: var(--bs-gray-500); } #kt_body .wdsc-field__toggle.btn:hover { color: var(--bs-primary); } /* ---------- Ingat saya + lupa sandi ---------- */ #kt_body .wdsc-login__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 1.5rem; font-size: .875rem; } #kt_body .wdsc-login__meta .form-check-label { font-size: .875rem; color: var(--bs-gray-600); } #kt_body .wdsc-login__link { font-weight: 600; color: var(--bs-primary); text-decoration: none; } #kt_body .wdsc-login__link:hover { text-decoration: underline; } /* ---------- Tombol masuk ---------- */ #kt_body .wdsc-btn.btn { height: 54px; border-radius: var(--wdsc-radius); font-size: 1rem; font-weight: 600; border: 0; box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), .25); transition: transform var(--wdsc-speed) ease, box-shadow var(--wdsc-speed) ease; } #kt_body .wdsc-btn.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--bs-primary-rgb), .32); } /* ---------- Ajakan daftar ---------- */ #kt_body .wdsc-login__foot { margin-top: 1.4rem; text-align: center; font-size: .875rem; color: var(--bs-gray-600); } #kt_body .wdsc-auth__copyright-mobile { font-size: .8rem; color: var(--bs-gray-500); } /* ---------- Laptop kecil ---------- */ @media (max-width: 1399.98px) { #kt_body .wdsc-auth__brand-inner { padding: 2.5rem 2.75rem !important; } #kt_body .wdsc-auth__tagline { font-size: 1.85rem; } #kt_body .wdsc-auth__card { max-width: 460px; padding: 2.5rem 2.25rem; } } /* ---------- Ponsel & tablet ---------- */ @media (max-width: 991.98px) { /* Tinggi mengikuti isi, bukan dipaksa setinggi layar. Inilah sumber ruang kosong besar sebelumnya. */ #kt_body .wdsc-auth, #kt_body .wdsc-auth > .d-flex { min-height: 0; } /* Area form berhenti melar, jadi kartu naik menempel panel */ #kt_body .wdsc-auth__form-side > .d-flex { flex: 0 0 auto !important; padding: 0 1.25rem 2rem !important; } /* Panel brand jadi kepala halaman */ #kt_body .wdsc-auth__brand { flex: 0 0 auto; max-width: 100%; width: 100%; border-radius: 0 0 26px 26px; text-align: center; } #kt_body .wdsc-auth__brand::after { right: -32%; bottom: -48%; width: 78%; padding-top: 78%; } /* Ruang bawah dilebihkan sebagai tempat kartu menumpuk */ #kt_body .wdsc-auth__brand-inner { padding: 2.5rem 1.5rem 9rem !important; } #kt_body .wdsc-auth__brand-top { display: flex; justify-content: center; } #kt_body .wdsc-auth__brand-mid { padding: 1.75rem 0 0 !important; } #kt_body .wdsc-auth__tagline { margin: 0 auto 1.75rem; font-size: 1.6rem; max-width: 18ch; } /* Daftar keunggulan: bloknya di tengah, teksnya rata kiri supaya tetap nyaman dibaca. */ #kt_body .wdsc-auth__features { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; gap: .8rem; } #kt_body .wdsc-auth__feature-icon { flex: 0 0 38px; width: 38px; height: 38px; } #kt_body .wdsc-auth__feature-text { font-size: .88rem; } /* Area form diberi jarak, tidak menempel panel biru */ /* TUMPUK: kartu ditarik naik menimpa panel biru */ #kt_body .wdsc-auth__form-side { position: relative; z-index: 3; margin-top: -6rem; } #kt_body .wdsc-auth__card { max-width: 100%; padding: 2rem 1.5rem; /* Bayangan dipertegas supaya efek tumpuk terasa */ box-shadow: 0 16px 40px rgba(20, 24, 40, .16); } #kt_body .wdsc-login__head { margin-bottom: 1.5rem; } #kt_body .wdsc-login__title { font-size: 1.35rem; } #kt_body .wdsc-auth__mode { top: .75rem; right: .85rem; } } /* ---------- Ponsel kecil ---------- */ @media (max-width: 575.98px) { #kt_body .wdsc-auth__tagline { font-size: 1.4rem; } #kt_body .wdsc-field__wrap, #kt_body .wdsc-btn.btn { height: 50px; } #kt_body .wdsc-login__meta { font-size: .82rem; } } /* ---------- Mode gelap ---------- */ [data-bs-theme="dark"] #kt_body .wdsc-field__wrap:focus-within { background: rgba(255, 255, 255, .06); } [data-bs-theme="dark"] #kt_body .wdsc-login__title { color: var(--bs-gray-100); } [data-bs-theme="dark"] #kt_body .wdsc-auth__logo-link { background: rgba(255, 255, 255, .95); } /* ---------- Perbaikan ketampakan ikon keunggulan ---------- Ikon bawaan Metronic bertipe "duotone": lapisan keduanya sengaja dibuat samar (opacity .3). Di atas panel biru itu membuat ikon nyaris hilang. Di sini kita paksa penuh. */ #kt_body .wdsc-auth__feature-icon i { font-size: 1.15rem; line-height: 1; color: #fff; } #kt_body .wdsc-auth__feature-icon i span, #kt_body .wdsc-auth__feature-icon i [class*="path"]:before { color: #fff !important; opacity: 1 !important; } /* Lapisan dasar duotone dibuat separuh transparan lagi. Kalau semua lapisan dipaksa penuh, ikon berubah jadi gumpalan putih pejal dan detailnya hilang. */ #kt_body .wdsc-auth__feature-icon i span:first-child:before { opacity: .45 !important; } /* ============================================================ PERBAIKAN v20-8 - HALAMAN LOGIN ============================================================ */ /* 1. Tagline panel kiri: statis, putih, lebih besar (sebelumnya color: var(--bs-gray-900) = gelap) */ #kt_body .wdsc-auth__tagline { color: #fff !important; font-size: 2.55rem; max-width: 20ch; text-shadow: 0 2px 12px rgba(0, 0, 0, .15); } @media (max-width: 1399.98px) { #kt_body .wdsc-auth__tagline { font-size: 2.1rem; } } @media (max-width: 991.98px) { #kt_body .wdsc-auth__tagline { font-size: 1.7rem; } } @media (max-width: 575.98px) { #kt_body .wdsc-auth__tagline { font-size: 1.45rem; } } /* brand-top dikosongkan (logo dipindah ke kartu form). Agar tagline tetap di tengah vertical dengan pola space-between 3 item, brand-top dijadikan spacer flex:1 sehingga brand-mid tetap di tengah dan brand-bottom tetap di bawah. Copyright tidak hilang. */ #kt_body .wdsc-auth__brand-top { flex: 1; min-height: 0; } #kt_body .wdsc-auth__brand-inner { justify-content: flex-start !important; } #kt_body .wdsc-auth__brand-mid { flex: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 !important; } #kt_body .wdsc-auth__brand-bottom { flex: 0 0 auto; margin-top: auto; padding-top: 2rem; } @media (max-width: 991.98px) { /* Di ponsel brand-inner tidak pakai space-between, jadi brand-top cukup disembunyikan */ #kt_body .wdsc-auth__brand-top { display: none; } #kt_body .wdsc-auth__brand-mid { flex: 0 0 auto; padding: 1.5rem 0 0 !important; } #kt_body .wdsc-auth__brand-bottom { margin-top: 0; padding-top: 0; } } /* 2. Logo di dalam kartu form */ #kt_body .wdsc-login__logo-wrap { display: flex; justify-content: center; margin-bottom: 1.6rem; } #kt_body .wdsc-login__logo-wrap .wdsc-auth__logo-link { /* Mewarisi gaya kotak putih yang sudah ada di .wdsc-auth__logo-link (latar putih, sudut membulat, bayangan) -- tinggal pastikan ukurannya pas. */ padding: .65rem 1.4rem; } #kt_body .wdsc-login__logo-wrap .wdsc-auth__logo { max-height: 34px; } /* Jarak judul setelah logo lebih rapat karena sudah ada elemen di atasnya */ #kt_body .wdsc-login__logo-wrap + .wdsc-login__head { margin-bottom: 1.5rem; } /* ============================================================ PERBAIKAN v20-10 - POSISI TEKS KIRI & LOGO KARTU ============================================================ */ /* 1. Teks panel kiri (desktop): naikkan sedikit ke tengah Kurangi flex brand-top (spacer atas) agar brand-mid bergerak lebih ke atas tanpa keluar tengah. */ @media (min-width: 992px) { #kt_body .wdsc-auth__brand-top { flex: 0.45; } #kt_body .wdsc-auth__brand-mid { flex: 2; } } /* 2. Logo di dalam kartu form: hapus latar & bayangan, tambah jarak ke judul di bawahnya. */ #kt_body .wdsc-login__logo-wrap .wdsc-auth__logo-link { background: transparent !important; box-shadow: none !important; padding: 0 !important; } #kt_body .wdsc-login__logo-wrap { margin-bottom: 1.25rem; } #kt_body .wdsc-login__logo-wrap .wdsc-auth__logo { max-height: 38px; }