*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#8B0000;--gold:#D4AF37;--dark:#111;--light:#f5f5f5}
body{font-family:Georgia,serif;background:#f4f4f4;color:#222;line-height:1.8;overflow-x:hidden}
header{position:relative;overflow:hidden;text-align:center;padding:90px 20px;background:linear-gradient(rgba(139,0,0,.78),rgba(139,0,0,.78)),url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1800&q=80");background-size:cover;background-position:center;color:#fff}
.logo{display:block;width:180px;max-width:40vw;height:auto;margin:0 auto 25px;filter:drop-shadow(0 12px 25px rgba(0,0,0,.35));animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
header h1{font-size:3rem;margin-bottom:15px}
header p{max-width:850px;margin:auto;font-size:1.15rem}
.container{max-width:1200px;margin:auto;padding:60px 20px}
.intro{max-width:950px;margin:auto auto 50px;text-align:center;font-size:1.1rem}
.hero-image,.section-image{width:100%;border-radius:18px;box-shadow:0 25px 60px rgba(0,0,0,.18);transition:.5s}
.hero-image{margin:50px 0}
.section-image{margin:70px 0 20px}
.hero-image:hover,.section-image:hover{transform:scale(1.02)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.card{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:30px;border-radius:16px;border-top:5px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.1);transition:.35s}
.card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.card h3{color:var(--red);margin-bottom:15px}
.card p{margin-bottom:22px}
.card a{display:inline-block;padding:12px 24px;background:var(--red);color:#fff;text-decoration:none;border-radius:8px;font-weight:bold;transition:.3s}
.card a:hover{background:var(--gold);color:#111}
footer{margin-top:80px;padding:70px 20px 40px;background:linear-gradient(180deg,#1b1b1b,#090909);text-align:center;color:#ddd;border-top:4px solid var(--gold);box-shadow:0 -10px 40px rgba(0,0,0,.3)}
footer::before{content:"";display:block;width:180px;height:2px;margin:0 auto 25px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
footer strong{display:block;font-size:1.8rem;margin-bottom:15px;color:var(--gold);letter-spacing:2px}
footer p{margin:10px 0}
@media(max-width:768px){.logo{width:140px}header h1{font-size:2.1rem}.grid{grid-template-columns:1fr}.container{padding:40px 18px}}
/* =======================================
   QUIZ PAGE
=======================================*/

.quiz-container,
.container{
max-width:900px;
margin:50px auto;
background:#fff;
padding:40px;
border-radius:18px;
box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.question{
padding-bottom:25px;
margin-bottom:30px;
border-bottom:1px solid #e8e8e8;
}

.question:last-child{
border-bottom:none;
}

.question h3{
color:var(--red);
margin-bottom:18px;
font-size:1.25rem;
}

.question label{
display:block;
padding:12px 15px;
margin-bottom:8px;
border-radius:8px;
cursor:pointer;
transition:.3s;
}

.question label:hover{
background:#fff7df;
}

.question input{
margin-right:10px;
}

button{
background:var(--red);
color:#fff;
border:none;
padding:14px 34px;
border-radius:10px;
font-size:1rem;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

button:hover{
background:var(--gold);
color:#111;
transform:translateY(-3px);
}

#result{
display:none;
margin-top:45px;
padding:30px;
border-left:6px solid var(--gold);
border-radius:10px;
background:#fafafa;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.correct{
color:#14843f;
font-weight:bold;
}

.wrong{
color:#b00020;
font-weight:bold;
}

.more-quizzes{
margin:70px auto;
max-width:1200px;
padding:40px;
background:#fff;
border-radius:18px;
border-top:5px solid var(--gold);
box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.more-quizzes h2{
text-align:center;
color:var(--red);
margin-bottom:15px;
}

.more-quizzes p{
text-align:center;
margin-bottom:35px;
}

.quiz-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:18px;
}

.quiz-grid a{
display:block;
padding:15px;
background:var(--red);
color:#fff;
text-decoration:none;
text-align:center;
border-radius:10px;
font-weight:bold;
transition:.3s;
}

.quiz-grid a:hover{
background:var(--gold);
color:#111;
transform:translateY(-4px);
}

/* =======================================
   PARTICIPANT
=======================================*/

#participant{
text-align:center;
padding:45px 30px;
background:#fff;
border-top:5px solid var(--gold);
border-radius:18px;
box-shadow:0 18px 45px rgba(0,0,0,.10);
}

#participant h2{
color:var(--red);
margin-bottom:15px;
}

#participant p{
max-width:650px;
margin:0 auto 30px;
}

#participant input{
width:100%;
max-width:550px;
padding:15px;
font-size:1rem;
border:2px solid #ddd;
border-radius:10px;
outline:none;
transition:.3s;
}

#participant input:focus{
border-color:var(--gold);
box-shadow:0 0 15px rgba(212,175,55,.25);
}


/* ======================================================
   PREMIUM CERTIFICATE
======================================================*/

.certificate{

background:linear-gradient(
180deg,
#fffefc 0%,
#fffcf6 35%,
#fff8e8 70%,
#fffefb 100%);

padding:42px 48px;

border:10px solid #D4AF37;

border-radius:18px;

box-shadow:
0 0 0 3px #8B0000 inset,
0 0 0 10px rgba(212,175,55,.20) inset,
0 18px 45px rgba(0,0,0,.15);

position:relative;


overflow:visible;

text-align:center;

}

/* watermark logo */

.certificate-watermark{

position:absolute;

width:420px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

opacity:.045;

pointer-events:none;

user-select:none;

z-index:0;

}

.certificate>*{

position:relative;

z-index:2;

}

.certificate-logo{

width:150px;

margin-bottom:18px;

filter:drop-shadow(0 6px 15px rgba(0,0,0,.2));

}

.certificate h1{

font-size:3rem;

color:#8B0000;

letter-spacing:4px;

margin-bottom:10px;

line-height:1.2;

}

.certificate h2{

font-size:1.6rem;

margin:18px 0;

line-height:1.4;

color:#555;

}

.certificate h3{

margin:15px 0;

line-height:1.45;

}

.certificate h4{

margin:12px 0;

line-height:1.35;

}

.certificate p{

margin:10px 0;

line-height:1.45;

font-size:1.08rem;

}

#certificateName{

font-size:2.4rem;

font-weight:bold;

letter-spacing:1px;

color:#A07A00;

margin:18px 0;

}

#certificateScore{

font-size:1.8rem;

font-weight:bold;

color:#8B0000;

margin:25px 0 12px;

}

.signature-image{

width:210px;

margin-bottom:-15px;

}

.signature-line{

margin-bottom:10px;

}

/* PRINT */

/* ==========================================
   PERCANTIK SERTIFIKAT (WEB & PRINT)
========================================== */

/* Watermark Pola Berulang (Kecil, Indah, dan Estetik di Seluruh Sertifikat) */
.certificate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%2280%22%20viewBox%3D%220%200%20160%2080%22%3E%0A%20%20%3Ctext%20x%3D%2210%22%20y%3D%2245%22%20font-family%3D%22Georgia%2C%20%27Times%20New%20Roman%27%2C%20serif%22%20font-size%3D%2212%22%20font-style%3D%22italic%22%20font-weight%3D%22bold%22%20fill%3D%22rgba%28160%2C%20122%2C%200%2C%200.11%29%22%20transform%3D%22rotate%28-22%2010%2045%29%22%3EINKRAH.com%20%E2%9C%A6%3C/text%3E%0A%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Bingkai Dalam Tambahan (List Merah Marun & Emas) */
.certificate::after {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
    border: 2px solid #8B0000;
    outline: 2px dashed #D4AF37;
    outline-offset: -6px;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* Garis Ornamen Estetik di Bawah Judul CERTIFICATE */
.certificate h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    background: linear-gradient(to right, transparent, #8B0000, #D4AF37, #8B0000, transparent);
    margin: 15px auto 5px;
}

/* RESPONSIVE CERTIFICATE UNTUK LAYAR KECIL */
@media (max-width: 768px) {
    .certificate { padding: 30px 18px; }
    .certificate h1 { font-size: 1.8rem; letter-spacing: 2px; }
    #certificateName { font-size: 1.5rem; }
    #certificateScore { font-size: 1.2rem; }
    .certificate::after { top: 10px; bottom: 10px; left: 10px; right: 10px; }
}

/* ==========================================
   PRINT OUT ESTETIK & RESOLUSI TINGGI
========================================== */
@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    html, body {
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 0;
        background: #fff !important;
    }

    header, footer, #participant, #quiz, #result, .more-quizzes, .certificate-buttons {
        display: none !important;
    }

    .container {
        padding: 0;
        margin: 0;
        background: none;
        box-shadow: none;
        max-width: none;
    }

    #certificate {
        display: block !important;
        margin: 0;
        padding: 8mm;
        width: 210mm;
        height: 297mm;
        box-sizing: border-box;
    }

    .certificate {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 15mm 12mm;
        background: linear-gradient(180deg, #fffefc 0%, #fffcf6 35%, #fff8e8 70%, #fffefb 100%) !important;
        border: 8px solid #D4AF37 !important;
        box-shadow: inset 0 0 0 3px #8B0000 !important;
        border-radius: 0;
        page-break-inside: avoid;
        break-inside: avoid;
        position: relative;
        overflow: hidden;
    }

    .certificate::after {
        top: 12mm;
        bottom: 12mm;
        left: 12mm;
        right: 12mm;
        border-color: #8B0000 !important;
        outline-color: #D4AF37 !important;
    }

    .certificate-logo { width: 130px; margin-bottom: 10px; }
    .certificate h1 { font-size: 2.8rem; margin-bottom: 5px; }
    .certificate h2 { font-size: 1.4rem; margin: 10px 0; }
    .certificate h3 { font-size: 1.2rem; margin: 10px 0; }
    #certificateName { font-size: 2.2rem; margin: 15px auto; }
    #certificateScore { font-size: 1.5rem; margin: 15px auto 8px; }
    .signature-box { margin-top: 15px; }
    .signature-image { width: 180px; margin-bottom: -20px; }
}

/* Memberi jarak pada tombol di bawah sertifikat (tampilan web) */
.certificate-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Memberi jarak horizontal antar tombol */
    margin-top: 25px; /* Memberi jarak antara tombol dan bingkai bawah sertifikat */
    flex-wrap: wrap; /* Tombol otomatis turun ke bawah jika layar HP sangat kecil */
}