.serti-search-wrap {
max-width: 900px;
margin: 3em auto;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
padding: 3em 2em;
position: relative;
border: 1px solid rgba(37,99,235,0.1);
}
.serti-search-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #2563eb, #1e40af);
border-radius: 24px 24px 0 0;
}
.serti-search-header {
text-align: center;
margin-bottom: 3em;
padding: 0 1em;
}
.serti-search-header h2 {
color: #1e3a8a;
font-size: 2.2em;
margin-bottom: 0.8em;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
.serti-search-header p {
color: #475569;
font-size: 1.2em;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
font-weight: 400;
}
.serti-search-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
max-width: 600px;
margin: 0 auto 2em auto;
}
.search-input-container {
position: relative;
width: 100%;
max-width: 500px;
}
.serti-search-form input[type="text"] {
width: 100%;
padding: 0.8em 1.2em;
border: 1px solid #ddd;
border-radius: 24px;
font-size: 1em;
background: #ffffff;
transition: all 0.2s ease;
box-shadow: 0 2px 5px 1px rgba(64,60,67,.16);
box-sizing: border-box;
}
.serti-search-form input[type="text"]:hover {
box-shadow: 0 2px 8px 1px rgba(64,60,67,.24);
}
.serti-search-form input[type="text"]:focus {
border: 1px solid #4285f4;
outline: none;
box-shadow: 0 2px 8px 1px rgba(64,60,67,.24);
}
.serti-search-form input[type="text"]::placeholder {
color: #9aa0a6;
font-size: 1em;
}
.search-buttons-container {
display: flex;
gap: 1em;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 500px;
margin: 1.5em auto 0;
}
.serti-search-form button {
background: linear-gradient(135deg, #4285f4 0%, #3367d6 100%);
color: #ffffff;
border: none;
border-radius: 50px;
padding: 0.1em 1em;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(66, 133, 244, 0.25);
position: relative;
overflow: hidden;
min-height: 52px;
text-align: center;
width: auto;
min-width: 200px;
max-width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8em;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}
.serti-search-form button:hover:not(:disabled) {
background: linear-gradient(135deg, #3367d6 0%, #2c5aa0 100%);
box-shadow: 0 6px 20px rgba(66, 133, 244, 0.35);
transform: translateY(-2px) scale(1.02);
}
.serti-search-form button:focus:not(:disabled) {
outline: none;
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3), 0 4px 16px rgba(66, 133, 244, 0.25);
}
.serti-search-form button:active:not(:disabled) {
background: linear-gradient(135deg, #2c5aa0 0%, #1e3c8a 100%);
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}
.search-icon {
font-size: 1.2em;
margin-right: 0.5em;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.serti-search-form button .search-text {
font-weight: 600;
letter-spacing: 0.3px;
}
.serti-search-form button:disabled {
opacity: 0.7;
cursor: not-allowed;
background: linear-gradient(135deg, #dadce0 0%, #f1f3f4 100%);
color: #80868b;
transform: none;
box-shadow: none;
}
.serti-search-form button:hover:not(:disabled) .search-icon {
transform: scale(1.1);
}
.loading-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.search-text {
font-size: 1em;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.3px;
}
.serti-error-message, .serti-no-results {
animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.serti-hasil-box {
margin: 3em auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
border-radius: 20px;
background: #ffffff;
padding: 2.5em;
max-width: 800px;
border: 1px solid rgba(37,99,235,0.1);
animation: slideInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.serti-hasil-box:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
border-color: rgba(37,99,235,0.2);
}
.serti-hasil-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2563eb, #1e40af);
opacity: 0;
transition: opacity 0.3s ease;
}
.serti-hasil-box:hover::before {
opacity: 1;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.serti-hasil-title {
text-align: center;
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 2px dashed rgba(37,99,235,0.1);
}
.serti-hasil-title h3 {
color: #1e40af;
font-size: 1.5em;
margin-bottom: 0.5em;
}
.serti-hasil-title .status-badge {
display: inline-block;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 1em;
margin-top: 10px;
}
.status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.6em 1.2em;
border-radius: 30px;
font-weight: 600;
font-size: 1.1em;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.aktif {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #166534;
border: 2px solid #166534;
box-shadow: 0 2px 8px rgba(22,101,52,0.1);
}
.status-badge.tidak-aktif {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #991b1b;
border: 2px solid #991b1b;
box-shadow: 0 2px 8px rgba(153,27,27,0.1);
}
.status-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.serti-hasil-box table {
width: 100%;
margin-bottom: 2em;
border-collapse: separate;
border-spacing: 0;
border: 1px solid rgba(37,99,235,0.1);
border-radius: 16px;
overflow: hidden;
background: #f8fafc;
box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.serti-hasil-box th {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
padding: 16px 20px;
text-align: left;
font-weight: 600;
color: #ffffff;
font-size: 1.15em;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.serti-hasil-box td {
padding: 16px 20px;
border-bottom: 1px solid rgba(37,99,235,0.1);
line-height: 1.6;
transition: background-color 0.2s ease;
}
.serti-hasil-box tr:hover td {
background-color: rgba(37,99,235,0.02);
}
.serti-hasil-box tr:last-child td {
border-bottom: none;
}
.serti-hasil-box td:first-child {
width: 220px;
color: #4b5563;
font-weight: 500;
}
.serti-sertifikat-info {
margin-top: 1.5em;
padding: 20px;
background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
border-radius: 12px;
border: 1px solid rgba(37,99,235,0.2);
text-align: center;
}
.serti-sertifikat-info h4 {
color: #1e40af;
margin-bottom: 1em;
font-size: 1.2em;
}
.serti-sertifikat-info a {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
text-decoration: none;
padding: 12px 24px;
border-radius: 30px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}
.serti-sertifikat-info a:hover {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37,99,235,0.3);
text-decoration: none;
}
.serti-sertifikat-info .no-cert {
color: #991b1b;
background: #fee2e2;
padding: 12px;
border-radius: 8px;
display: inline-block;
}
@media (max-width: 768px) {
.serti-search-wrap {
padding: 1.5em 1em;
margin: 1em;
}
.serti-search-header h2 {
font-size: 1.5em;
}
.serti-search-form {
gap: 1.5em;
}
.search-input-container {
max-width: 100%;
margin: 0 10px;
}
.serti-search-form input[type="text"] {
font-size: 1.1em;
padding: 1em 1.2em;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.search-buttons-container {
gap: 1em;
max-width: 100%;
margin: 1.5em auto 0;
padding: 0 10px;
}
.serti-search-form button {
width: 100%;
max-width: none;
font-size: 1.1em;
padding: 0.1em 1em;
}
.serti-hasil-box {
padding: 1.5em 1em;
margin: 1em;
}
.serti-hasil-box table {
font-size: 0.9em;
margin-bottom: 1em;
}
.serti-hasil-box td:first-child {
width: auto;
min-width: 120px;
}
.serti-hasil-box td {
padding: 10px 8px;
display: block;
border-bottom: 1px solid #f3f4f6;
}
.serti-hasil-box tr {
display: block;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 2px solid #e5e7eb;
}
.serti-hasil-box th {
display: block;
text-align: center;
padding: 12px;
}
}
@media (max-width: 480px) {
.serti-search-header h2 {
font-size: 1.3em;
}
.serti-search-header p {
font-size: 1em;
}
}

document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector(".serti-search-form");
const button = document.getElementById("search-btn");
const searchIcon = button.querySelector(".search-icon");
const searchText = button.querySelector(".search-text");
const loadingSpinner = button.querySelector(".loading-spinner");
const searchInput = document.getElementById("search-input");

// Form submission handling with smooth loading animation
form.addEventListener("submit", function(e) {
// Validate input before submitting
const query = searchInput.value.trim();
if (query.length {
searchInput.style.borderColor = "#e5e7eb";
}, 2000);
return;
}

// Show loading state
button.disabled = true;
searchIcon.style.display = "none";
searchText.style.display = "none";
loadingSpinner.style.display = "inline-flex";

// Add subtle loading effect to form
form.style.opacity = "0.8";
form.style.pointerEvents = "none";
});

// Enhanced input interactions
searchInput.addEventListener("focus", function() {
this.parentElement.style.transform = "scale(1.02)";
});

searchInput.addEventListener("blur", function() {
this.parentElement.style.transform = "scale(1)";
});

// Real-time character counter (optional)
searchInput.addEventListener("input", function() {
const length = this.value.length;
if (length > 200) {
this.style.borderColor = "#f59e0b";
} else {
this.style.borderColor = "#e5e7eb";
}
});

// Lazy load QR codes for better performance
const qrImages = document.querySelectorAll("img[src*=\"qrserver.com\"]");
if ("IntersectionObserver" in window) {
const qrObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.removeAttribute("data-src");
qrObserver.unobserve(img);
}
}
});
});

qrImages.forEach(function(img) {
qrObserver.observe(img);
});
}

// Add smooth scroll to results
if (window.location.hash === "#results") {
setTimeout(() => {
const resultsSection = document.querySelector(".serti-hasil-box");
if (resultsSection) {
resultsSection.scrollIntoView({ behavior: "smooth" });
}
}, 100);
}
});