.btn-group-toggle .btn { padding: 10px 15px; font-size: 14px; transition: all 0.3s ease-in-out; } .btn-group-toggle input[type="radio"]:checked + .btn { background-color: #0d6efd; /* Warna Bootstrap Primary */ color: #fff; border-color: #0d6efd; } .btn-group-toggle input[type="radio"]:checked + .btn.btn-outline-success { background-color: #198754; /* Warna hijau untuk opsi "Bersedia kapan saja" */ border-color: #198754; } .custom-radio { cursor: pointer; font-size: 15px; } .custom-radio i { font-size: 15px; /* Ukuran ikon */ transition: color 0.3s, transform 0.2s; color: #6c757d; /* Warna default */ } .custom-radio i.selected { color: #198754; /* Warna saat dipilih */ transform: scale(1.15); /* Efek zoom */ } /* ===================== TAMPILAN MODERN ===================== */ .applicant-form { max-width: 860px; background: #ffffff; border-radius: 20px; padding: 30px 34px 38px; box-shadow: 0 18px 50px rgba(16, 60, 32, 0.10); margin-top: 26px; margin-bottom: 46px; border: 1px solid #eef3f0; } /* Header banner */ .applicant-form .text-center.py-5 { background: linear-gradient(135deg, #eafaf0 0%, #f4fcf7 100%); border: 1px solid #d8efe2; border-radius: 16px; box-shadow: inset 0 1px 0 #fff; } /* Accordion */ .applicant-form .accordion-item { border: 1px solid #e7edea !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 6px 18px rgba(16, 60, 32, 0.05); margin-bottom: 18px !important; } .applicant-form .accordion-button { font-weight: 700; letter-spacing: .2px; background: #ffffff; color: #14794a; padding: 16px 20px; font-size: 15px; } .applicant-form .accordion-button:not(.collapsed) { background: linear-gradient(90deg, #198754, #1faa5e); color: #fff; box-shadow: none; } .applicant-form .accordion-button:focus { box-shadow: none; border-color: #198754; } .applicant-form .accordion-button::after { filter: none; } .applicant-form .accordion-body { padding: 22px 20px 8px; } /* Labels */ .applicant-form label.form-label, .applicant-form .form-group > label { font-weight: 600; color: #334155; font-size: 13.5px; margin-bottom: 6px; } .applicant-form .text-danger { color: #e23b3b !important; } /* Inputs with icon */ .applicant-form .input-with-icon { margin-bottom: 2px; } .applicant-form .input-with-icon .form-control, .applicant-form .input-with-icon .form-select { border-radius: 11px; border: 1px solid #d6e0db; background: #fbfdfc; height: 46px; padding-left: 42px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; box-shadow: none; color: #1f2d3d; } .applicant-form textarea.form-control { height: auto; padding-left: 14px; } .applicant-form .input-with-icon .form-control:focus, .applicant-form .input-with-icon .form-select:focus { border: 1px solid #198754 !important; box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12) !important; background: #ffffff; } .applicant-form .input-with-icon .form-control:hover, .applicant-form .input-with-icon .form-select:hover { border-color: #198754; background: #ffffff; } .applicant-form .input-with-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #198754; font-size: 16px; pointer-events: none; } /* Select2 - samakan tampilan dengan form-control */ .applicant-form .select2-container--default .select2-selection--single { height: 46px; min-height: 46px; border: 1px solid #d6e0db !important; border-radius: 11px !important; background: #fbfdfc !important; box-shadow: none; } .applicant-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-right: 28px !important; color: #1f2d3d !important; border: none !important; background: transparent !important; font-size: 14px; font-weight: 400; text-align: left; } .applicant-form .input-with-icon .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 42px !important; } .applicant-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; right: 10px; } .applicant-form .select2-container--default.select2-container--open .select2-selection--single, .applicant-form .select2-container--default.select2-container--focus .select2-selection--single, .applicant-form .select2-container--default .select2-selection--single:hover { border: 1px solid #198754 !important; box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12) !important; background: #fff !important; } .applicant-form .select2-dropdown { border: 1px solid #d6e0db !important; border-radius: 11px; overflow: hidden; } .applicant-form .select2-results__option { color: #334155; transition: background .15s ease, color .15s ease; } /* Item yang sedang di-hover / dipilih dengan keyboard -> hijau tema */ .applicant-form .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #198754; color: #ffffff; } /* Opsi yang sudah terpilih -> hijau muda */ .applicant-form .select2-results__option[aria-selected="true"] { background: #ecfaf1; color: #14794a; font-weight: 600; } /* Notice period - kartu pilihan */ .applicant-form .notice-options { gap: 12px; } .applicant-form .custom-radio { flex: 1 1 200px; display: flex !important; align-items: center; gap: 10px; border: 1.5px solid #e2e8e4; border-radius: 13px; padding: 14px 16px; cursor: pointer; background: #fbfdfc; transition: all .2s ease; margin: 0; font-size: 14px; font-weight: 600; color: #475569; } .applicant-form .custom-radio:hover { border-color: #9fd3b6; background: #f3fbf6; } .applicant-form .custom-radio.selected { border-color: #198754; background: #ecfaf1; box-shadow: 0 6px 16px rgba(25, 135, 84, 0.14); color: #14794a; } .applicant-form .custom-radio i { font-size: 20px; color: #94a3b8; transition: color .2s ease, transform .2s ease; flex-shrink: 0; } .applicant-form .custom-radio.selected i { color: #198754; } /* Foto profil */ .applicant-form .photo-frame { width: 150px; height: 150px; max-width: none; border-radius: 50%; border: 4px solid #ffffff; box-shadow: 0 0 0 2px #198754, 0 10px 26px rgba(25, 135, 84, 0.18); background: #eef6f0; overflow: hidden; transition: transform .2s ease; } .applicant-form .photo-frame:hover { transform: scale(1.02); } .applicant-form .photo-img { border-radius: 50%; width: 100% !important; height: 100% !important; } .applicant-form .avatar-edit { background: #198754; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); border: 2px solid #fff; } .applicant-form .avatar-edit i { color: #fff; font-size: 15px; } /* Tombol simpan */ .applicant-form .btn-success { background: linear-gradient(90deg, #198754, #1faa5e) !important; border: none !important; border-radius: 13px !important; font-weight: 700; letter-spacing: .3px; box-shadow: 0 10px 24px rgba(25, 135, 84, 0.28); transition: transform .15s ease, box-shadow .15s ease; } .applicant-form .btn-success:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(25, 135, 84, 0.36); } /* Alert */ .applicant-form .alert { border-radius: 13px; border: none; } /* Divider antar anggota keluarga */ .applicant-form hr { border: 1px solid #e9efec !important; opacity: 1; } /* ===== Identity bar premium (pengganti alert-success polos) ===== */ .applicant-form .identity-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid #bfe6cd; background: linear-gradient(100deg, #0f5132 0%, #198754 55%, #1faa5e 100%); color: #fff; box-shadow: 0 10px 26px rgba(15, 81, 50, 0.28); position: relative; overflow: hidden; } .applicant-form .identity-bar::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-20deg); animation: identityShine 4.5s ease-in-out infinite; } @keyframes identityShine { 0%, 55% { left: -70%; } 100% { left: 135%; } } .applicant-form .identity-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.16); border: 2px solid rgba(255,255,255,0.55); color: #fff; font-size: 18px; backdrop-filter: blur(2px); } .applicant-form .identity-mail { font-size: 13px; line-height: 1.35; min-width: 0; } .applicant-form .identity-mail small { display: block; opacity: 0.8; font-size: 11px; } .applicant-form .identity-mail strong { word-break: break-all; } .applicant-form .identity-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; font-weight: 700; color: #d3f9e3; } /* Tombol Ganti Akun modern (pengganti btn-outline-secondary jadul) */ .applicant-form .btn-switch-account { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #0f5132; background: #ffffff; border: none; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); transition: transform .15s ease, box-shadow .15s ease; position: relative; z-index: 1; } .applicant-form .btn-switch-account:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); color: #0b3d24; } .applicant-form .btn-switch-account i { font-size: 13px; } /* ===== Kartu login Google premium ===== */ .applicant-form .gate-card { border: none; border-radius: 20px; background: linear-gradient(160deg, #ffffff 0%, #f2faf5 100%); box-shadow: 0 18px 44px rgba(15, 81, 50, 0.14); position: relative; overflow: hidden; } .applicant-form .gate-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853); } .applicant-form .gate-icon-wrap { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 10px 26px rgba(20, 60, 40, 0.16); border: 1px solid #e7edea; font-size: 30px; font-weight: 900; font-family: Arial, sans-serif; background: linear-gradient(180deg, #4285F4 0%, #4285F4 25%, #EA4335 25%, #EA4335 50%, #FBBC05 50%, #FBBC05 75%, #34A853 75%, #34A853 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .applicant-form .gate-title { font-weight: 800; color: #0f3b22; letter-spacing: .2px; } .applicant-form .gate-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #47624f; background: #eef7f1; border: 1px solid #d3e8da; border-radius: 999px; padding: 5px 13px; margin: 2px 3px; } .applicant-form .gate-check i { color: #198754; } /* ===== Nomor langkah otomatis di accordion ===== */ .applicant-form #accordionExample { counter-reset: appStep; } .applicant-form #accordionExample .accordion-button { gap: 12px; } .applicant-form #accordionExample .accordion-button::before { counter-increment: appStep; content: counter(appStep); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: #e7f3ec; color: #14794a; transition: all .2s ease; } .applicant-form #accordionExample .accordion-button:not(.collapsed)::before { background: rgba(255,255,255,0.22); color: #fff; } /* ===== Kilau pada tombol simpan ===== */ .applicant-form .btn-success.btn-lg { position: relative; overflow: hidden; } .applicant-form .btn-success.btn-lg::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); animation: identityShine 4s ease-in-out infinite; } /* ===== Kartu hak privasi premium ===== */ .applicant-form .rights-card { border: 1px solid #bfe3cc; border-radius: 18px; background: linear-gradient(150deg, #ffffff 0%, #eef8f1 100%); padding: 18px 20px; box-shadow: 0 12px 30px rgba(15, 81, 50, 0.10); position: relative; overflow: hidden; } .applicant-form .rights-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #198754, #34d17b, #198754); } .applicant-form .rights-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .applicant-form .rights-icon { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; background: linear-gradient(135deg, #198754, #0f5132); box-shadow: 0 6px 16px rgba(25, 135, 84, 0.32); } .applicant-form .rights-head strong { font-size: 14.5px; color: #0f3b22; } .applicant-form .rights-head small { display: block; font-size: 11.5px; color: #6b8571; } .applicant-form .rights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; } .applicant-form .right-chip { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #d9e9de; border-radius: 12px; padding: 9px 11px; transition: transform .15s ease, box-shadow .15s ease; } .applicant-form .right-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(25, 135, 84, 0.14); } .applicant-form .right-chip i { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: linear-gradient(135deg, #1faa5e, #14794a); } .applicant-form .right-chip span strong { display: block; font-size: 12.5px; color: #143d26; line-height: 1.2; } .applicant-form .right-chip span small { font-size: 10.5px; color: #7a9182; } .applicant-form .rights-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .applicant-form .btn-rights-delete { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #e55353, #c23333); text-decoration: none; box-shadow: 0 6px 16px rgba(220, 53, 69, 0.30); transition: transform .15s ease, box-shadow .15s ease; } .applicant-form .btn-rights-delete:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(220, 53, 69, 0.38); color: #fff; } .applicant-form .btn-rights-mail { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #0f5132; background: #fff; border: 1.5px solid #198754; text-decoration: none; transition: all .15s ease; } .applicant-form .btn-rights-mail:hover { background: #198754; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(25, 135, 84, 0.30); } .applicant-form .rights-note { margin-top: 10px; font-size: 11.5px; color: #6b8571; background: #f2f8f4; border: 1px dashed #bfe0c9; border-radius: 10px; padding: 7px 12px; }
Lewati ke persetujuan & kirim
PTKFormulir Lamaran PTK Data Terlindungi UU PDP
Logo

FORMULIR LAMARAN KERJA

Anda diminta mengisi formulir ini secara lengkap dan jelas.

tanda *) Wajib Diisi

G
Masuk dengan Akun Google

Untuk melindungi data pelamar, formulir hanya bisa diisi setelah masuk dengan akun Google.

Data terlindungi 1 akun = 1 pelamar