/* Daftar Sertifikasi - form styles, matching this mirror site's own Elementor kit palette (post-6.css): accent #B2222B, secondary #F4801B, text #1D1D1D, font "Farro" (already loaded via Google Fonts in ). */ .dsert-hero { background: linear-gradient(135deg, #B2222B, #7d1820); color: #fff; padding: 60px 40px; margin: 0 0 40px; font-family: "Farro", sans-serif; } .dsert-hero .container { max-width: 1140px; margin: 0 auto; } .dsert-hero .eyebrow { text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; opacity: .85; } .dsert-hero h1 { font-family: "Farro", sans-serif; font-size: 2rem; margin: 8px 0 10px; color: #fff; } .dsert-hero p { max-width: 640px; opacity: .92; margin: 0; } .dsert-wrap { max-width: 900px; margin: 0 auto 60px; padding: 0 20px; font-family: "Farro", sans-serif; color: #1D1D1D; } .dsert-wrap h3.form-section-title { font-family: "Farro", sans-serif; color: #1D1D1D; margin: 28px 0 14px; font-size: 1.15rem; border-left: 4px solid #B2222B; padding-left: 10px; } .dsert-wrap h3.form-section-title:first-child { margin-top: 0; } .dsert-wrap .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin-bottom: 16px; } .dsert-wrap .form-group { display: flex; flex-direction: column; gap: 6px; } .dsert-wrap .form-group--full { grid-column: 1 / -1; } .dsert-wrap .form-group label { font-weight: 600; font-size: .88rem; color: #1D1D1D; } .dsert-wrap .form-group input, .dsert-wrap .form-group select, .dsert-wrap .form-group textarea { padding: 10px 14px; border-radius: 6px; border: 1px solid #dcdcdc; font-family: "Farro", sans-serif; font-size: .92rem; background: #fff; } .dsert-wrap .form-group input:focus, .dsert-wrap .form-group select:focus, .dsert-wrap .form-group textarea:focus { outline: none; border-color: #B2222B; } .dsert-wrap .form-hint { font-size: .78rem; color: #6b6b6b; margin: 2px 0 0; } .dsert-wrap .required-mark { color: #B2222B; } .dsert-wrap .radio-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } .dsert-wrap .radio-card { display: flex; align-items: center; gap: 10px; border: 1.5px solid #dcdcdc; border-radius: 10px; padding: 14px 16px; cursor: pointer; font-weight: 600; color: #1D1D1D; } .dsert-wrap .radio-card:has(input:checked) { border-color: #B2222B; background: rgba(178,34,43,.05); } .dsert-wrap .accordion { border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } .dsert-wrap .accordion-item + .accordion-item { border-top: 1px solid #e5e5e5; } .dsert-wrap .accordion-item__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #faf7f5; border: none; cursor: pointer; font-family: "Farro", sans-serif; font-weight: 700; font-size: .95rem; color: #1D1D1D; } .dsert-wrap .accordion-item__icon { color: #B2222B; font-weight: 700; } .dsert-wrap .accordion-item__panel { display: none; padding: 0 18px 16px; } .dsert-wrap .accordion-item.is-open .accordion-item__panel { display: block; } .dsert-wrap .accordion-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .dsert-wrap .accordion-table th, .dsert-wrap .accordion-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; } .dsert-wrap .accordion-table th { color: #6b6b6b; font-weight: 600; font-size: .78rem; text-transform: uppercase; } .dsert-wrap .data-table-wrap { overflow-x: auto; border: 1px solid #e5e5e5; border-radius: 10px; margin-bottom: 20px; } .dsert-wrap .data-table { width: 100%; border-collapse: collapse; background: #fff; } .dsert-wrap .data-table th, .dsert-wrap .data-table td { padding: 10px 14px; text-align: left; font-size: .88rem; border-bottom: 1px solid #eee; } .dsert-wrap .data-table th { background: #faf7f5; color: #1D1D1D; font-family: "Farro", sans-serif; font-size: .78rem; text-transform: uppercase; } .dsert-wrap .signature-box { position: relative; border: 1.5px dashed #dcdcdc; border-radius: 10px; padding: 24px; text-align: center; cursor: pointer; min-height: 90px; } .dsert-wrap .signature-box__placeholder { color: #6b6b6b; } .dsert-wrap .signature-box__preview { display: none; align-items: center; justify-content: center; gap: 10px; } .dsert-wrap .signature-box__preview img { height: 48px; border: 1px solid #dcdcdc; border-radius: 6px; background: #fff; } .dsert-wrap .signature-box__preview span { color: #1F8A55; font-weight: 600; font-size: .88rem; } .dsert-wrap .signature-box.is-signed .signature-box__placeholder { display: none; } .dsert-wrap .signature-box.is-signed .signature-box__preview { display: flex; } .dsert-wrap .form-row-between { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .dsert-wrap .form-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; } .dsert-wrap .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: .92rem; border: 2px solid transparent; cursor: pointer; font-family: "Farro", sans-serif; text-decoration: none; } .dsert-wrap .btn-primary { background: #B2222B; color: #fff; } .dsert-wrap .btn-primary:hover { background: #8e1b22; color: #fff; } .dsert-wrap .btn-outline { background: transparent; color: #1D1D1D; border-color: #1D1D1D; } .dsert-wrap .btn-outline:hover { background: #1D1D1D; color: #fff; } .dsert-wrap .btn-sm { padding: 7px 14px; font-size: .82rem; } .dsert-wrap .error-text { color: #B2222B; font-size: .8rem; } .hidden { display: none !important; } /* ---------- Signature modal ---------- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); align-items: center; justify-content: center; z-index: 1000; } .modal-overlay.is-open { display: flex; } .modal-box { background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 640px; font-family: "Farro", sans-serif; } .modal-box h3 { margin: 0 0 14px; color: #1D1D1D; } .signature-canvas { width: 100%; height: 260px; border: 1px solid #dcdcdc; border-radius: 8px; touch-action: none; background: #fff; } .modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; flex-wrap: wrap; gap: 10px; } .modal-actions__right { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 700px) { .dsert-wrap .form-grid { grid-template-columns: 1fr; } .dsert-wrap .radio-card-grid { grid-template-columns: 1fr; } }