<?php
ob_start();
session_start();
date_default_timezone_set('Asia/Jakarta');
require __DIR__ . '/config/koneksi.php';

function e($str) {
    return htmlspecialchars($str ?? '', ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML5, 'UTF-8');
}

$sql_0 = mysqli_query($conn, "SELECT * FROM `tb_seo` WHERE cuid = 1 LIMIT 1");
$s0 = $sql_0 ? mysqli_fetch_assoc($sql_0) : [];
$urlweb  = e($s0['urlweb'] ?? '');
$instansi= e($s0['instansi'] ?? 'KESITOTO');
$logos   = e($s0['image'] ?? '');
$pengumuman = e($s0['pengumuman'] ?? '');

if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf_token = $_SESSION['csrf_token'];

if (!empty($_SESSION['user'])) {
    header('Location: /m/');
    exit;
}

$flash = $_SESSION['register'] ?? null;
unset($_SESSION['register']);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daftar - <?php echo $instansi; ?></title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
:root {
    --gold: #FFD700;
    --gold-dim: #b8860b;
    --gold-glow: rgba(255, 215, 0, 0.35);
    --dark: #0a0a0a;
    --card-bg: rgba(18, 18, 18, 0.88);
    --border-gold: 1px solid rgba(255, 215, 0, 0.45);
    --input-bg: rgba(255,255,255,0.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background-color: var(--dark);
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

body {
    background: var(--dark) url('/kesitoto-assets/icons/bg.jpg') repeat-y center top;
    background-size: 100%;
    display: flex;
    flex-direction: column;
}

/* HEADER */
.reg-header {
    background: #111;
    border-bottom: 1px solid var(--gold);
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(255,215,0,0.15);
    flex-wrap: nowrap;
}
.reg-header .logo-wrap {
    flex-shrink: 1;
    min-width: 0;
}
.reg-header .logo-wrap img {
    max-height: 38px;
    max-width: 170px;
    height: auto;
    display: block;
}
.reg-header nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.reg-header nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    border: 1px solid #555;
    background: rgba(255,255,255,0.06);
    transition: all 0.25s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.reg-header nav a:hover {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 12px var(--gold-glow);
}

/* FLASH MESSAGE */
.flash {
    max-width: 540px;
    margin: 1rem auto;
    padding: 0.75rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--gold);
    background: rgba(20,20,20,0.85);
    color: var(--gold);
    font-weight: 600;
    text-align: center;
}

/* MAIN LAYOUT */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem 1rem 2.5rem;
}

/* FORM CARD */
.form-card {
    width: 100%;
    max-width: 500px;
    background: var(--card-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    overflow: hidden;
    border: var(--border-gold);
    box-shadow: 0 8px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,215,0,0.1);
}
.form-banner {
    background: linear-gradient(135deg, #1a1a00 0%, #3a2c00 50%, #1a1a00 100%);
    border-bottom: 1px solid rgba(255,215,0,0.4);
    padding: 1.1rem 1.5rem;
    text-align: center;
}
.form-banner h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 0 18px rgba(255,215,0,0.5);
}
.form-banner h2 i { margin: 0 0.4rem; }

.form-body { padding: 1.4rem 1.5rem; }

/* SECTION DIVIDER */
.section-title {
    margin: 1.2rem 0 0.85rem;
    border-bottom: 1px solid rgba(255,215,0,0.25);
    padding-bottom: 0.4rem;
}
.section-title:first-child { margin-top: 0; }
.section-title h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.section-title h3 i { margin-right: 0.4rem; }

/* FORM GROUP */
.form-group {
    margin-bottom: 0.85rem;
}
.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 0.32rem;
}
.form-group label .required { color: #ff4d4d; margin-left: 2px; }
.form-group .hint {
    font-size: 0.72rem;
    color: #888;
    margin-top: 0.25rem;
}

/* INPUTS */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group select {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 10px;
    padding: 0.6rem 2.4rem 0.6rem 0.9rem;
    color: #fff;
    font-size: 0.88rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255,215,0,0.12);
}
/* Valid / Invalid state */
.form-group input.is-valid  { border-color: #00e676 !important; box-shadow: 0 0 0 2px rgba(0,230,118,0.15) !important; }
.form-group input.is-invalid,
.form-group select.is-invalid { border-color: #ff4d4d !important; box-shadow: 0 0 0 2px rgba(255,77,77,0.15) !important; }

/* Field wrapper — untuk posisi ikon ceklis */
.field-wrap {
    position: relative;
}
.field-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    pointer-events: none;
    display: none;
    font-weight: 700;
}
.field-icon.valid   { display: block; color: #00e676; }
.field-icon.invalid { display: block; color: #ff4d4d; }

/* Untuk phone input (+62 prepend), ikon geser */
.input-group .field-wrap { flex: 1; }
.input-group .field-wrap input { border-radius: 0 10px 10px 0 !important; padding-right: 2.4rem; }

.form-group .field-error {
    color: #ff6b6b;
    font-size: 0.73rem;
    margin-top: 0.25rem;
    display: none;
}
.form-group .field-error.show { display: block; }

/* PHONE INPUT GROUP */
.input-group {
    display: flex;
    align-items: center;
    gap: 0;
}
.input-group-prepend span {
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.3);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--gold);
    white-space: nowrap;
    font-weight: 600;
}
.input-group input {
    border-radius: 0 10px 10px 0 !important;
    flex: 1;
}

/* SELECT BANK */
.form-group select {
    cursor: pointer;
}
.form-group select option { background: #1a1a1a; color: #fff; }
.form-group select optgroup { background: #111; color: var(--gold); }
</style>
</head>
<body>

<header class="reg-header">
    <div class="logo-wrap">
        <a href="/">
            <img src="<?php echo $urlweb; ?>/upload/<?php echo $logos; ?>"
                 alt="<?php echo $instansi; ?>"
                 onerror="this.style.display='none'">
        </a>
    </div>
    <nav>
        <a href="/"><i class="fas fa-home"></i> Beranda</a>
        <a href="/"><i class="fas fa-sign-in-alt"></i> Masuk</a>
    </nav>
</header>

<?php if ($flash): ?>
<div class="flash"><?php echo e($flash['message'] ?? ''); ?></div>
<?php endif; ?>

<main>
<div class="form-card">
    <div class="form-banner">
        <h2><i class="fas fa-crown"></i> <?php echo $instansi; ?> <i class="fas fa-crown"></i></h2>
    </div>
    <div class="form-body">

    <form id="registerForm" method="POST"
          action="<?php echo $urlweb; ?>/function/step-1.php"
          autocomplete="off" novalidate>
        <input type="hidden" name="csrf_token" value="<?php echo $csrf_token; ?>">
        <div class="section-title">
            <h3><i class="fas fa-user-edit"></i> Informasi Akun</h3>
        </div>

        <div class="form-group">
            <label>Username <span class="required">*</span></label>
            <div class="field-wrap">
                <input type="text" name="user" id="user" placeholder="Username (huruf & angka)" maxlength="12"
                       pattern="^[a-zA-Z0-9]{4,12}$" title="4-12 karakter, huruf dan angka saja" required autocomplete="off">
                <span class="field-icon" id="ico-user"></span>
            </div>
            <div class="hint">4–12 karakter, huruf dan angka. Tidak case-sensitive.</div>
            <div class="field-error" id="err-user"></div>
        </div>

        <div class="form-group">
            <label>Password <span class="required">*</span></label>
            <div class="field-wrap">
                <input type="password" name="pass" id="pass" placeholder="Minimal 6 karakter" minlength="6" maxlength="50" required>
                <span class="field-icon" id="ico-pass"></span>
            </div>
            <div class="hint">Minimal 6 karakter, kombinasi huruf & angka.</div>
        </div>

        <div class="form-group">
            <label>Konfirmasi Password <span class="required">*</span></label>
            <div class="field-wrap">
                <input type="password" name="confirm-password" id="confirm-password" placeholder="Ulangi password" minlength="6" maxlength="50" required>
                <span class="field-icon" id="ico-confirm"></span>
            </div>
            <div class="field-error" id="err-confirm"></div>
        </div>

        <div class="form-group">
            <label>Email <span class="required">*</span></label>
            <div class="field-wrap">
                <input type="email" name="email" id="email" placeholder="Alamat email aktif" maxlength="100" required autocomplete="off">
                <span class="field-icon" id="ico-email"></span>
            </div>
            <div class="field-error" id="err-email"></div>
        </div>

        <div class="form-group">
            <label>No. HP / WhatsApp <span class="required">*</span></label>
            <div class="input-group">
                <div class="input-group-prepend"><span>+62</span></div>
                <div class="field-wrap">
                    <input type="tel" name="no_hp" id="no_hp" placeholder="81234567890" maxlength="15"
                           pattern="^[0-9]{8,15}$" title="8-15 digit angka" required autocomplete="off">
                    <span class="field-icon" id="ico-phone"></span>
                </div>
            </div>
            <div class="field-error" id="err-phone"></div>
        </div>

        <div class="form-group">
            <label>Referral (opsional)</label>
            <input type="text" name="sponsor" placeholder="Kode referral jika ada" maxlength="20">
        </div>

        <div class="section-title">
            <h3><i class="fas fa-university"></i> Informasi Bank / E-Wallet</h3>
        </div>

        <div class="form-group">
            <label>Nama Bank <span class="required">*</span></label>
            <select name="akun" id="bank-name" required>
                <optgroup label="🏦 Bank">
                    <?php
                    $banks = ['BCA','BNI','BRI','CIMB','MANDIRI','MAYBANK','OCBC','PANIN','PERMATA','BSI','BANK JAGO','SEABANK','SINARMAS','DANAMON'];
                    foreach ($banks as $b) { echo '<option value="'.e($b).'">'.e($b).'</option>'; }
                    ?>
                </optgroup>
                <optgroup label="💳 E-Wallet">
                    <?php
                    $ew = ['OVO','GOPAY','DANA','LINKAJA','SHOPEEPAY'];
                    foreach ($ew as $w) { echo '<option value="'.e($w).'">'.e($w).'</option>'; }
                    ?>
                </optgroup>
            </select>
        </div>

        <div class="form-group">
            <label>Nama Rekening <span class="required">*</span></label>
            <div class="field-wrap">
                <input type="text" name="full_name_bank" id="full_name_bank" placeholder="Nama sesuai rekening" required maxlength="100"
                       pattern="^[a-zA-Z\s]{3,100}$" title="Hanya huruf dan spasi, minimal 3 karakter">
                <span class="field-icon" id="ico-bank-name"></span>
            </div>
            <div class="field-error" id="err-bank-name"></div>
        </div>

        <div class="form-group">
            <label>Nomor Rekening <span class="required">*</span></label>
            <div class="field-wrap">
                <input type="text" name="no_rek" id="no_rek" placeholder="Nomor rekening / e-wallet" required maxlength="30"
                       pattern="^[0-9]{8,30}$" title="Hanya angka, 8-30 digit">
                <span class="field-icon" id="ico-rek"></span>
            </div>
            <div class="field-error" id="err-rek"></div>
        </div>

        <!-- CAPTCHA -->
        <div class="form-group">
            <label>Captcha <span class="required">*</span></label>
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
                <div id="captcha_box" style="background:#fff;color:#000;font-family:'Courier New';font-size:22px;
                     font-weight:bold;padding:5px 14px;border-radius:6px;letter-spacing:4px;user-select:none;
                     text-decoration:line-through;min-width:80px;text-align:center;">8888</div>
                <button type="button" id="btn_refresh" style="background:rgba(255,215,0,0.15);border:1px solid rgba(255,215,0,0.4);
                        border-radius:8px;color:var(--gold);padding:6px 10px;cursor:pointer;font-size:1rem;">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
            <div class="field-wrap" style="width:170px;">
                <input type="text" name="captcha" id="captcha_input" placeholder="Kode captcha" required autocomplete="off"
                       maxlength="4" style="width:100%;letter-spacing:3px;text-align:center;font-weight:bold;">
                <span class="field-icon" id="ico-captcha"></span>
            </div>
            <div class="field-error" id="err-captcha"></div>
        </div>

        <div style="margin:1rem 0 0.6rem;font-size:0.78rem;color:#aaa;line-height:1.6;">
            <label style="display:flex;align-items:flex-start;gap:6px;cursor:pointer;margin-bottom:6px;">
                <input type="checkbox" name="agree1" checked style="margin-top:3px;accent-color:var(--gold);">
                <span>Saya bersedia menerima informasi promosi dari <?php echo $instansi; ?></span>
            </label>
            <label style="display:flex;align-items:flex-start;gap:6px;cursor:pointer;">
                <input type="checkbox" name="agree2" id="agree2" checked style="margin-top:3px;accent-color:var(--gold);">
                <span>Saya setuju dengan syarat & ketentuan yang berlaku</span>
            </label>
        </div>

        <button type="submit" id="btnSubmit" style="width:100%;padding:0.75rem;border:none;border-radius:12px;
                background:linear-gradient(135deg,#b8860b,#ffd700,#b8860b);color:#000;font-size:1rem;
                font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:all 0.3s;margin-top:0.5rem;
                box-shadow:0 4px 16px rgba(255,215,0,0.3);">
            <i class="fas fa-user-plus"></i> DAFTAR
        </button>
    </form>

    <p style="text-align:center;margin-top:1rem;color:#666;font-size:0.75rem;">
        <i class="fas fa-shield-alt"></i> Data dilindungi enkripsi & token CSRF
    </p>
    <p style="text-align:center;margin-top:0.5rem;font-size:0.82rem;color:#ccc;">
        Sudah punya akun? <a href="/" style="color:var(--gold);font-weight:600;">Masuk di sini</a>
    </p>
    </div>
</div>
</main>

<footer style="text-align:center;padding:1.2rem;color:#555;font-size:0.75rem;border-top:1px solid rgba(255,215,0,0.15);">
    &copy; <?php echo date('Y'); ?> <?php echo $instansi; ?>. All Rights Reserved.
</footer>

<script>
document.addEventListener('DOMContentLoaded', function() {

    // ====== HELPERS ======
    function setIcon(id, state) { // state: 'valid' | 'invalid' | ''
        var el = document.getElementById(id);
        if (!el) return;
        el.className = 'field-icon' + (state ? ' ' + state : '');
        el.textContent = state === 'valid' ? '✔' : (state === 'invalid' ? '✗' : '');
    }
    function setInputState(inp, valid) {
        inp.classList.remove('is-valid', 'is-invalid');
        inp.classList.add(valid ? 'is-valid' : 'is-invalid');
    }
    function showErr(errId, msg) {
        var el = document.getElementById(errId);
        if (!el) return;
        el.textContent = msg; el.classList.add('show');
    }
    function clearErr(errId) {
        var el = document.getElementById(errId);
        if (!el) return;
        el.textContent = ''; el.classList.remove('show');
    }

    // ====== CAPTCHA ======
    var captchaBox = document.getElementById('captcha_box');
    function genCaptcha() {
        var c = '';
        for (var i = 0; i < 4; i++) c += Math.floor(Math.random() * 10);
        captchaBox.textContent = c;
        // Reset icon captcha saat refresh
        setIcon('ico-captcha', '');
        var ci = document.getElementById('captcha_input');
        ci.classList.remove('is-valid','is-invalid');
    }
    genCaptcha();
    document.getElementById('btn_refresh').addEventListener('click', function(e) {
        e.preventDefault(); genCaptcha();
        document.getElementById('captcha_input').value = '';
        clearErr('err-captcha');
    });

    // ====== USERNAME — realtime + AJAX double-check ======
    var userInput = document.getElementById('user');
    var userTimer = null;
    userInput.addEventListener('input', function() {
        this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
        clearTimeout(userTimer);
        var v = this.value;
        if (v.length === 0) { setIcon('ico-user',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-user'); return; }
        if (v.length < 4 || v.length > 12) {
            setIcon('ico-user','invalid'); setInputState(this,false);
            showErr('err-user','Username harus 4-12 karakter.'); return;
        }
        // Tampil pending sementara sebelum AJAX
        setIcon('ico-user',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-user');
        userTimer = setTimeout(function() {
            fetch('/function/cek-user.php?user=' + encodeURIComponent(v))
                .then(function(r){ return r.json(); })
                .then(function(d){
                    if (d.available) {
                        setIcon('ico-user','valid'); setInputState(userInput,true); clearErr('err-user');
                    } else {
                        setIcon('ico-user','invalid'); setInputState(userInput,false);
                        showErr('err-user','Username sudah digunakan, coba yang lain.');
                    }
                })
                .catch(function(){ // fallback jika AJAX gagal — lolos saja (server akan recheck)
                    setIcon('ico-user','valid'); setInputState(userInput,true); clearErr('err-user');
                });
        }, 600);
    });

    // ====== PASSWORD ======
    var passInput = document.getElementById('pass');
    passInput.addEventListener('input', function() {
        var v = this.value;
        if (v.length === 0) { setIcon('ico-pass',''); this.classList.remove('is-valid','is-invalid'); return; }
        if (v.length >= 6) { setIcon('ico-pass','valid'); setInputState(this,true); }
        else               { setIcon('ico-pass','invalid'); setInputState(this,false); }
        // Trigger revalidasi confirm juga
        confirmInput.dispatchEvent(new Event('input'));
    });

    // ====== KONFIRMASI PASSWORD ======
    var confirmInput = document.getElementById('confirm-password');
    confirmInput.addEventListener('input', function() {
        var v = this.value;
        if (v.length === 0) { setIcon('ico-confirm',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-confirm'); return; }
        if (v === passInput.value && v.length >= 6) {
            setIcon('ico-confirm','valid'); setInputState(this,true); clearErr('err-confirm');
        } else {
            setIcon('ico-confirm','invalid'); setInputState(this,false);
            showErr('err-confirm', v !== passInput.value ? 'Password tidak cocok.' : 'Minimal 6 karakter.');
        }
    });

    // ====== EMAIL ======
    var emailInput = document.getElementById('email');
    emailInput.addEventListener('input', function() {
        var v = this.value.trim();
        if (v.length === 0) { setIcon('ico-email',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-email'); return; }
        if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
            setIcon('ico-email','valid'); setInputState(this,true); clearErr('err-email');
        } else {
            setIcon('ico-email','invalid'); setInputState(this,false);
            showErr('err-email','Format email tidak valid.');
        }
    });

    // ====== NO HP ======
    var phoneInput = document.getElementById('no_hp');
    phoneInput.addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '');
        if (this.value.startsWith('0')) this.value = this.value.substring(1);
        var v = this.value;
        if (v.length === 0) { setIcon('ico-phone',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-phone'); return; }
        if (v.length >= 8) {
            setIcon('ico-phone','valid'); setInputState(this,true); clearErr('err-phone');
        } else {
            setIcon('ico-phone','invalid'); setInputState(this,false);
            showErr('err-phone','Nomor HP minimal 8 digit.');
        }
    });

    // ====== NAMA REKENING ======
    var bankNameInput = document.getElementById('full_name_bank');
    if (bankNameInput) {
        bankNameInput.addEventListener('input', function() {
            var v = this.value.trim();
            if (v.length === 0) { setIcon('ico-bank-name',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-bank-name'); return; }
            if (/^[a-zA-Z\s]{3,}$/.test(v)) {
                setIcon('ico-bank-name','valid'); setInputState(this,true); clearErr('err-bank-name');
            } else {
                setIcon('ico-bank-name','invalid'); setInputState(this,false);
                showErr('err-bank-name','Hanya huruf dan spasi, minimal 3 karakter.');
            }
        });
    }

    // ====== NOMOR REKENING ======
    var rekInput = document.getElementById('no_rek');
    rekInput.addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '');
        var v = this.value;
        if (v.length === 0) { setIcon('ico-rek',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-rek'); return; }
        if (v.length >= 8) {
            setIcon('ico-rek','valid'); setInputState(this,true); clearErr('err-rek');
        } else {
            setIcon('ico-rek','invalid'); setInputState(this,false);
            showErr('err-rek','Nomor rekening minimal 8 digit.');
        }
    });

    // ====== CAPTCHA INPUT ======
    var capInput = document.getElementById('captcha_input');
    capInput.addEventListener('input', function() {
        var v = this.value.trim();
        if (v.length === 0) { setIcon('ico-captcha',''); this.classList.remove('is-valid','is-invalid'); clearErr('err-captcha'); return; }
        if (v === captchaBox.textContent.trim()) {
            setIcon('ico-captcha','valid'); setInputState(this,true); clearErr('err-captcha');
        } else {
            setIcon('ico-captcha','invalid'); setInputState(this,false);
        }
    });

    // ====== FORM SUBMIT ======
    var form = document.getElementById('registerForm');
    form.addEventListener('submit', function(e) {
        var hasErr = false;

        function blockErr(errId, inputId, msg) {
            showErr(errId, msg);
            var inp = document.getElementById(inputId);
            if (inp) { setInputState(inp, false); setIcon('ico-' + inputId, 'invalid'); }
            hasErr = true;
        }

        // 1. Username
        var u = userInput.value.trim();
        if (u.length < 4 || u.length > 12)       blockErr('err-user','user','Username harus 4-12 karakter.');
        else if (!/^[a-zA-Z0-9]+$/.test(u))       blockErr('err-user','user','Hanya huruf dan angka.');
        else if (userInput.classList.contains('is-invalid')) blockErr('err-user','user','Username sudah digunakan.');

        // 2. Password
        var p = passInput.value;
        if (p.length < 6) { blockErr('err-confirm','pass','Password minimal 6 karakter.'); }

        // 3. Confirm password
        var cp = confirmInput.value;
        if (p !== cp) blockErr('err-confirm','confirm-password','Konfirmasi password tidak cocok.');

        // 4. Email
        var em = emailInput.value.trim();
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)) blockErr('err-email','email','Format email tidak valid.');

        // 5. Phone
        var ph = phoneInput.value.trim();
        if (ph.length < 8) blockErr('err-phone','no_hp','Nomor HP minimal 8 digit.');

        // 6. Captcha
        var capIn = capInput.value.trim();
        if (capIn !== captchaBox.textContent.trim()) {
            blockErr('err-captcha','captcha_input','Kode captcha salah!');
            setIcon('ico-captcha','invalid');
            genCaptcha(); capInput.value = '';
        }

        // 7. Agree
        if (!document.getElementById('agree2').checked) {
            alert('Anda harus menyetujui syarat & ketentuan.'); hasErr = true;
        }

        if (hasErr) { e.preventDefault(); return false; }
    });
});
</script>
</body>
</html>
