/* ===== Halaman Masuk / Registrasi: dua panel yang bergeser, latar navy dengan ombak biru ===== */
.mk-halaman { position:fixed; inset:0; overflow:auto; z-index:50; font-family:'Segoe UI',Arial,sans-serif; color:#fff;
	background:radial-gradient(1100px 600px at 70% 0%, #26379a 0%, rgba(38,55,154,0) 60%), linear-gradient(160deg, #0a1250 0%, #131f6e 55%, #0d1647 100%); }
.mk-halaman *, .mk-halaman *::before, .mk-halaman *::after { box-sizing:border-box; }
.mk-halaman input, .mk-halaman button, .mk-halaman a, .mk-halaman h1, .mk-halaman h2, .mk-halaman p, .mk-halaman small, .mk-halaman b { font-family:inherit; }
.mk-ombak { position:fixed; top:0; bottom:0; width:min(34vw,460px); pointer-events:none; z-index:0; }
.mk-ombak svg { width:100%; height:100%; display:block; }
.mk-kiri { left:0; } .mk-kanan { right:0; }
.mk-isi { position:relative; z-index:2; min-height:100%; display:flex; flex-direction:column; align-items:center; padding:26px 16px 14px; }
.mk-sudut { position:absolute; top:22px; z-index:3; display:flex; align-items:center; gap:10px; }
.mk-sudut.kiri { left:30px; } .mk-sudut.kanan { right:30px; }
.mk-lencana { width:56px; height:56px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.28); overflow:hidden; }
.mk-lencana i { font-size:24px; color:#1c2c7a; } .mk-lencana img { width:42px; height:42px; object-fit:contain; }
.mk-pil { color:#fff; text-decoration:none; font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:20px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); transition:background .2s; }
.mk-pil:hover { background:rgba(255,255,255,.26); }

.mk-kepala { width:min(1000px,100%); margin:0 auto 18px; padding:22px 28px; border-radius:26px; display:flex; align-items:center; gap:20px; position:relative; overflow:hidden;
	background:linear-gradient(120deg, rgba(60,72,112,.92), rgba(52,63,103,.88)); box-shadow:0 18px 40px rgba(2,6,40,.45); border:1px solid rgba(255,255,255,.1); }
.mk-kepala::after { content:''; position:absolute; right:-80px; top:-100px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.07); }
.mk-logo { width:84px; height:84px; border-radius:20px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 8px 20px rgba(0,0,0,.25); position:relative; z-index:1; }
.mk-logo i { font-size:38px; color:#1c2c7a; } .mk-logo img { width:62px; height:62px; object-fit:contain; }
.mk-judul { position:relative; z-index:1; }
.mk-judul h1 { margin:0; font-size:34px; letter-spacing:2px; font-weight:800; text-shadow:0 3px 10px rgba(0,0,0,.3); color:#fff; }
.mk-judul p { margin:5px 0 0; font-size:15px; font-weight:600; opacity:.96; } .mk-judul small { display:block; margin-top:4px; font-size:12.5px; opacity:.8; }

.mk-kartu { width:min(1000px,100%); height:540px; border-radius:26px; position:relative; overflow:hidden; box-shadow:0 22px 50px rgba(2,6,40,.5); background:#fff; }
.mk-panel { position:absolute; top:0; bottom:0; width:50%; transition:transform .65s cubic-bezier(.7,0,.2,1); }
.mk-putih { left:0; background:#fff; color:#1f2d3d; z-index:2; }
.mk-gelap { left:50%; z-index:3; color:#fff; background:linear-gradient(160deg, #3d4770 0%, #2e3862 60%, #283159 100%); }
.mk-gelap::before { content:''; position:absolute; left:-90px; top:-60px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.06); }
.mk-gelap::after { content:''; position:absolute; right:-70px; bottom:-100px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.05); }
.mk-kartu.mode-daftar .mk-putih { transform:translateX(100%); } .mk-kartu.mode-daftar .mk-gelap { transform:translateX(-100%); }

.mk-blok { position:absolute; inset:0; padding:26px 46px; display:flex; flex-direction:column; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s; z-index:1; }
.mk-blok.aktif { opacity:1; visibility:visible; transition-delay:.25s; }
.mk-blok h2 { margin:0 0 20px; text-align:center; font-size:29px; font-weight:800; }
.mk-putih h2 { color:#1c2750; } .mk-gelap h2 { color:#fff; margin-bottom:12px; }
.mk-gelap p { margin:0 0 22px; text-align:center; font-size:14.5px; line-height:1.55; opacity:.95; }
.mk-blok.tengah { align-items:center; }

.mk-input { position:relative; margin-bottom:12px; }
.mk-halaman .mk-input input { width:100%; margin:0; padding:14px 16px; border:2px solid transparent; border-radius:12px; background:#e9efff; font-size:15px; color:#1f2d3d; transition:border-color .2s, background .2s; }
.mk-halaman .mk-input input::placeholder { color:#7d89a8; }
.mk-halaman .mk-input input:focus { outline:none; border-color:#2f48c4; background:#fff; box-shadow:0 0 0 4px rgba(47,72,196,.12); }
.mk-halaman .mk-input.pw input { padding-right:84px; }
.mk-tampil { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:#26305c; color:#fff; font-size:11px; font-weight:800; letter-spacing:.6px; padding:8px 12px; border-radius:8px; cursor:pointer; }
.mk-tombol { display:inline-block; border:0; cursor:pointer; text-decoration:none; text-align:center; font-weight:800; letter-spacing:1px; font-size:14.5px; padding:14px 38px; border-radius:12px; transition:transform .15s, box-shadow .15s; }
.mk-tombol:hover { transform:translateY(-2px); }
.mk-gelapbtn { background:linear-gradient(135deg,#323d6b,#232c52); color:#fff; box-shadow:0 8px 20px rgba(35,44,82,.45); }
.mk-terang { background:#fff; color:#1c2750; box-shadow:0 8px 20px rgba(0,0,0,.28); }
.mk-aksi { text-align:center; margin-top:8px; }
.mk-galat { background:#fdecea; color:#a02323; border:1px solid #f4b9b3; border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px; line-height:1.45; }
.mk-info { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:12px 16px; font-size:13px; margin-bottom:16px; text-align:center; }

.mk-pilihan { display:grid; gap:12px; }
.mk-pilihan a { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; text-decoration:none; background:#eef2ff; color:#1c2750; border:2px solid transparent; transition:border-color .2s, transform .15s, background .2s; }
.mk-pilihan a:hover { border-color:#2f48c4; background:#fff; transform:translateX(3px); }
.mk-pilihan .ik { width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#2447b8,#1696b0); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; flex:none; }
.mk-pilihan b { display:block; font-size:15px; } .mk-pilihan small { color:#5b6786; font-size:12px; line-height:1.4; display:block; margin-top:2px; }
.mk-pilihan .pa { margin-left:auto; color:#2f48c4; }

.mk-kaki { margin-top:auto; padding:22px 10px 6px; text-align:center; font-size:13px; font-weight:600; opacity:.92; }
.mk-kaki a { color:#fff; }

@media (max-width:820px) {
	.mk-ombak { opacity:.55; width:44vw; } .mk-sudut { display:none; }
	.mk-kepala { padding:16px 18px; border-radius:20px; gap:14px; } .mk-logo { width:60px; height:60px; border-radius:16px; } .mk-logo i { font-size:28px; } .mk-logo img { width:44px; height:44px; }
	.mk-judul h1 { font-size:24px; } .mk-judul p { font-size:13px; } .mk-judul small { display:none; }
	.mk-kartu { height:auto; display:flex; flex-direction:column; border-radius:20px; }
	.mk-panel { position:relative; width:100%; left:0 !important; transform:none !important; }
	.mk-putih { order:1; min-height:0; } .mk-gelap { order:2; min-height:0; }
	.mk-blok { position:relative; inset:auto; padding:26px 22px; display:none; opacity:1; visibility:visible; }
	.mk-blok.aktif { display:flex; }
}

.mk-halaman .mk-input select { width:100%; margin:0; padding:15px 16px; border:2px solid transparent; border-radius:12px; background:#e9efff; font-size:15px; color:#1f2d3d; }
.mk-halaman .mk-input select:focus { outline:none; border-color:#2f48c4; background:#fff; }
.mk-catatan { background:#eef4ff; border:1px solid #cfdcf8; color:#2a4380; border-radius:10px; padding:9px 12px; font-size:12px; line-height:1.5; margin-bottom:12px; }
.mk-bawah { text-align:center; margin-top:12px; font-size:12.5px; } .mk-bawah a { color:#2f48c4; font-weight:700; text-decoration:none; }

/* tombol mata di dalam kolom password */
.mk-halaman .mk-tampil { right:6px; width:40px; height:40px; padding:0; background:transparent; color:#5b6786; font-size:17px; letter-spacing:0; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:color .15s, background .15s; }
.mk-halaman .mk-tampil:hover { color:#1c2c7a; background:rgba(47,72,196,.1); }
.mk-halaman .mk-input.pw input { padding-right:52px; }