/* Konektor Public Styles */
.konektor-form-wrap {
    max-width: 500px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.konektor-form-header { margin-bottom: 20px; }
.konektor-store { font-size: 13px; color: #6b7280; margin-bottom: 4px; }
.konektor-product { font-size: 22px; font-weight: 700; color: #111; }

/* === MODERN === */
.konektor-tpl-modern .konektor-form { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.08); padding: 28px; }
.konektor-tpl-modern .konektor-field { margin-bottom: 16px; }
.konektor-tpl-modern label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.konektor-tpl-modern input, .konektor-tpl-modern textarea, .konektor-tpl-modern select {
    width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 15px; transition: border .2s;
}
.konektor-tpl-modern input:focus, .konektor-tpl-modern textarea:focus, .konektor-tpl-modern select:focus {
    outline: none; border-color: #2563eb;
}
.konektor-tpl-modern .konektor-btn-submit {
    width: 100%; padding: 13px; background: #2563eb; color: #fff; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s;
}
.konektor-tpl-modern .konektor-btn-submit:hover { background: #1d4ed8; }

/* === CLASSIC === */
.konektor-tpl-classic .konektor-form { border: 1px solid #ddd; padding: 24px; border-radius: 4px; }
.konektor-tpl-classic .konektor-field { margin-bottom: 14px; }
.konektor-tpl-classic label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 5px; }
.konektor-tpl-classic input, .konektor-tpl-classic textarea, .konektor-tpl-classic select {
    width: 100%; padding: 8px 12px; border: 1px solid #ccc; font-size: 14px;
}
.konektor-tpl-classic .konektor-btn-submit {
    width: 100%; padding: 12px; background: #dc2626; color: #fff; border: none; font-size: 16px; font-weight: bold; cursor: pointer;
}

/* === MINIMAL === */
.konektor-tpl-minimal .konektor-form { padding: 12px 0; }
.konektor-tpl-minimal .konektor-field { margin-bottom: 12px; }
.konektor-tpl-minimal label { font-size: 12px; color: #9ca3af; display: block; margin-bottom: 3px; }
.konektor-tpl-minimal input, .konektor-tpl-minimal textarea, .konektor-tpl-minimal select {
    width: 100%; padding: 8px 0; border: none; border-bottom: 2px solid #e5e7eb; font-size: 15px; background: transparent;
}
.konektor-tpl-minimal input:focus, .konektor-tpl-minimal textarea:focus { border-bottom-color: #2563eb; outline: none; }
.konektor-tpl-minimal .konektor-btn-submit {
    margin-top: 16px; width: 100%; padding: 12px; background: #111; color: #fff; border: none; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .5px;
}

/* === CARD === */
.konektor-tpl-card .konektor-form { background: #f8fafc; border-radius: 16px; padding: 32px; }
.konektor-tpl-card .konektor-field { margin-bottom: 18px; }
.konektor-tpl-card label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: .6px; display: block; margin-bottom: 6px; }
.konektor-tpl-card input, .konektor-tpl-card textarea, .konektor-tpl-card select {
    width: 100%; padding: 12px 16px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 15px;
}
.konektor-tpl-card .konektor-btn-submit {
    width: 100%; padding: 14px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer;
}

/* === GRADIENT === */
.konektor-tpl-gradient .konektor-form {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    padding: 32px; border-radius: 16px;
}
.konektor-tpl-gradient .konektor-form-header .konektor-product { color: #fff; }
.konektor-tpl-gradient .konektor-form-header .konektor-store { color: rgba(255,255,255,.7); }
.konektor-tpl-gradient label { color: rgba(255,255,255,.85); font-size: 13px; display: block; margin-bottom: 5px; }
.konektor-tpl-gradient .konektor-field { margin-bottom: 16px; }
.konektor-tpl-gradient input, .konektor-tpl-gradient textarea, .konektor-tpl-gradient select {
    width: 100%; padding: 11px 16px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 8px; font-size: 15px; color: #fff;
}
.konektor-tpl-gradient input::placeholder { color: rgba(255,255,255,.6); }
.konektor-tpl-gradient .konektor-btn-submit {
    width: 100%; padding: 14px; background: #fff; color: #2563eb; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 700; cursor: pointer;
}

/* === Common === */
.konektor-field label .req { color: #ef4444; margin-left: 3px; }
.konektor-radio, .konektor-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; cursor: pointer; font-size: 14px; }
.konektor-hidden { display: none !important; }
.konektor-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.konektor-alert-success { background: #dcfce7; color: #166534; }
.konektor-alert-error   { background: #fee2e2; color: #991b1b; }
.konektor-alert-warning { background: #fef9c3; color: #854d0e; }

.konektor-thanks { padding: 24px; text-align: center; font-size: 18px; font-weight: 600; }
.konektor-blocked { padding: 16px; background: #fee2e2; color: #991b1b; border-radius: 8px; text-align: center; }

.konektor-wa-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: #25d366; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.konektor-wa-btn:hover { background: #1da851; }