@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --pkl-font:         'Plus Jakarta Sans', sans-serif;
    --pkl-r:            20px;
    --pkl-rs:           12px;
    --pkl-blue:         #2563eb;
    --pkl-blue-dark:    #1d4ed8;
    --pkl-green:        #059669;
    --pkl-green-light:  #ecfdf5;
    --pkl-green-mid:    #a7f3d0;
    --pkl-green-dark:   #064e3b;
    --pkl-amber:        #d97706;
    --pkl-amber-light:  #fffbeb;
    --pkl-amber-mid:    #fde68a;
    --pkl-amber-dark:   #78350f;
    --pkl-red:          #dc2626;
    --pkl-red-light:    #fef2f2;
    --pkl-red-mid:      #fecaca;
    --pkl-s50:          #f8fafc;
    --pkl-s100:         #f1f5f9;
    --pkl-s200:         #e2e8f0;
    --pkl-s400:         #94a3b8;
    --pkl-s500:         #64748b;
    --pkl-s700:         #334155;
    --pkl-s900:         #0f172a;
}

/* ---- Wrapper ---- */
.pkl-wrap {
    font-family:    var(--pkl-font);
    max-width:      480px;
    margin:         20px auto;
    background:     #fff;
    border-radius:  var(--pkl-r);
    box-shadow:     0 2px 8px rgba(0,0,0,0.07), 0 8px 32px rgba(0,0,0,0.09);
    overflow:       hidden;
    border:         1px solid var(--pkl-s200);
}

/* ---- Header ---- */
.pkl-hdr {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        20px 22px;
    background:     linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.pkl-hdr-icon {
    width:          46px;
    height:         46px;
    background:     rgba(255,255,255,0.15);
    border-radius:  13px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
}

.pkl-hdr h2 {
    font-size:      15px;
    font-weight:    700;
    color:          #fff;
    margin:         0 0 3px;
    padding:        0;
    border:         none;
    line-height:    1.3;
}

.pkl-hdr p {
    font-size:      12px;
    color:          rgba(255,255,255,0.72);
    margin:         0;
}

/* ---- Statistik ---- */
.pkl-statistik {
    display:        flex;
    align-items:    center;
    justify-content: space-around;
    padding:        14px 22px;
    background:     var(--pkl-s50);
    border-bottom:  1px solid var(--pkl-s200);
}

.pkl-stat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
    flex:           1;
}

.pkl-stat-num {
    font-size:      22px;
    font-weight:    700;
    color:          var(--pkl-s900);
    line-height:    1;
}

.pkl-num-green { color: var(--pkl-green); }
.pkl-num-blue  { color: var(--pkl-blue); }

.pkl-stat-label {
    font-size:      11px;
    color:          var(--pkl-s400);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space:    nowrap;
}

.pkl-stat-div {
    width:          1px;
    height:         30px;
    background:     var(--pkl-s200);
    flex-shrink:    0;
}

/* ---- Form ---- */
.pkl-body {
    padding:        22px 22px 18px;
    border-bottom:  1px solid var(--pkl-s200);
}

.pkl-label {
    display:        block;
    font-size:      12px;
    font-weight:    700;
    color:          var(--pkl-s500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom:  10px;
}

.pkl-input-big {
    width:          100%;
    padding:        15px 18px;
    font-size:      26px;
    font-weight:    700;
    letter-spacing: 5px;
    color:          var(--pkl-s900);
    background:     var(--pkl-s50);
    border:         2.5px solid var(--pkl-s200);
    border-radius:  14px;
    outline:        none;
    text-align:     center;
    font-family:    var(--pkl-font);
    transition:     border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-appearance: none;
    box-sizing:     border-box;
}

.pkl-input-big:focus {
    border-color:   var(--pkl-blue);
    background:     #fff;
    box-shadow:     0 0 0 4px rgba(37,99,235,0.12);
}

.pkl-input-big::placeholder {
    color:          var(--pkl-s200);
    letter-spacing: 3px;
    font-weight:    400;
    font-size:      20px;
}

.pkl-counter {
    text-align:     right;
    font-size:      12px;
    color:          var(--pkl-s400);
    margin-top:     7px;
    font-weight:    500;
}

/* ---- Tombol ---- */
.pkl-btn {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    width:          100%;
    padding:        15px;
    margin-top:     14px;
    font-family:    var(--pkl-font);
    font-size:      15px;
    font-weight:    700;
    border:         none;
    border-radius:  14px;
    cursor:         pointer;
    transition:     all 0.2s;
}

.pkl-btn-primary {
    background:     var(--pkl-blue);
    color:          #fff;
}

.pkl-btn-primary:hover:not(:disabled) {
    background:     var(--pkl-blue-dark);
    transform:      translateY(-1px);
    box-shadow:     0 4px 14px rgba(37,99,235,0.35);
}

.pkl-btn-primary:disabled {
    opacity:        0.65;
    cursor:         not-allowed;
}

/* Tombol reset (Cek NISN Lain) */
.pkl-btn-reset-main {
    background:     var(--pkl-s100);
    color:          var(--pkl-s700);
    border:         2px solid var(--pkl-s200);
}

.pkl-btn-reset-main:hover {
    background:     var(--pkl-s200);
}

.pkl-hint {
    text-align:     center;
    font-size:      12px;
    color:          var(--pkl-s400);
    margin-top:     10px;
}

/* ---- Output ---- */
.pkl-output {
    padding:        0 22px 22px;
}

/* ---- Animasi ---- */
@keyframes pklFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pkl-animate { animation: pklFadeUp 0.4s cubic-bezier(0.16,1,0.3,1) both; }

/* ---- Kartu Hasil ---- */
.pkl-result-card {
    margin-top:     18px;
    border-radius:  16px;
    overflow:       hidden;
    border:         1.5px solid transparent;
}

.pkl-lulus { border-color: var(--pkl-green-mid); }
.pkl-tidak { border-color: var(--pkl-amber-mid); }

/* ---- Banner (foto besar + status) ---- */
.pkl-banner {
    display:        flex;
    align-items:    center;
    gap:            18px;
    padding:        20px;
}

.pkl-lulus .pkl-banner { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.pkl-tidak .pkl-banner { background: linear-gradient(135deg, #fef3c7, #fde68a); }

/* Foto besar seperti v3 */
.pkl-foto-frame {
    width:          96px;
    height:         116px;
    border-radius:  12px;
    overflow:       hidden;
    flex-shrink:    0;
    border:         3px solid rgba(255,255,255,0.95);
    box-shadow:     0 3px 10px rgba(0,0,0,0.15);
    background:     rgba(255,255,255,0.5);
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.pkl-foto {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: center top;
    display:        block;
}

.pkl-foto-empty {
    background:     rgba(255,255,255,0.45);
}

.pkl-banner-right {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    justify-content: center;   /* ← tambahkan ini */
    min-width:      0;         /* ← tambahkan ini */
}

.pkl-status-icon {
    width:          48px;
    height:         48px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.pkl-lulus .pkl-status-icon { background: #6ee7b7; color: #065f46; }
.pkl-tidak .pkl-status-icon { background: #fcd34d; color: #92400e; }

.pkl-status-text {
    font-size:      15px;
    font-weight:    700;
    line-height:    1.3;
    word-break:     keep-all;
    overflow-wrap:  break-word;
}

.pkl-lulus .pkl-status-text { color: #064e3b; }
.pkl-tidak .pkl-status-text { color: #78350f; }

/* ---- Pesan personal ---- */
.pkl-pesan {
    font-size:      13px;
    line-height:    1.65;
    padding:        13px 20px;
    border-bottom:  1px solid rgba(0,0,0,0.06);
}

.pkl-lulus .pkl-pesan { background: #f0fdf4; color: #166534; }
.pkl-tidak .pkl-pesan { background: #fffbeb; color: #92400e; }

/* ---- Info ---- */
.pkl-info-body {
    padding:        4px 20px 0;
    background:     #fff;
}

.pkl-info-row {
    display:        flex;
    align-items:    baseline;
    padding:        10px 0;
    border-bottom:  1px solid var(--pkl-s100);
}

.pkl-info-row.pkl-last { border-bottom: none; }

.pkl-info-key {
    font-size:      11px;
    font-weight:    700;
    color:          var(--pkl-s400);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    width:          46px;
    flex-shrink:    0;
}

.pkl-info-val {
    font-size:      14px;
    color:          var(--pkl-s700);
    flex:           1;
}

/* ---- Catatan ---- */
.pkl-note {
    margin:         4px 20px 16px;
    background:     var(--pkl-s50);
    border-radius:  10px;
    padding:        13px 16px;
}

.pkl-note-label {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    color:          var(--pkl-s400);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom:  6px;
}

.pkl-note p {
    margin:         0;
    font-size:      13px;
    color:          var(--pkl-s500);
    line-height:    1.65;
}

/* ---- Tombol Cetak ---- */
.pkl-btn-cetak-wrap {
    padding:        0 20px 20px;
    background:     #fff;
}

.pkl-btn-cetak {
    width:          100%;
    padding:        12px;
    background:     #fff;
    color:          var(--pkl-s700);
    border:         1.5px solid var(--pkl-s200);
    border-radius:  12px;
    font-family:    var(--pkl-font);
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            7px;
    transition:     background 0.2s;
    margin-top:     0;
}

.pkl-btn-cetak:hover { background: var(--pkl-s50); }

/* ---- Error ---- */
.pkl-error {
    display:        flex;
    align-items:    flex-start;
    gap:            10px;
    margin-top:     18px;
    background:     var(--pkl-red-light);
    border:         1.5px solid var(--pkl-red-mid);
    border-radius:  12px;
    padding:        14px 16px;
    font-size:      14px;
    color:          var(--pkl-red);
    line-height:    1.5;
}

.pkl-error svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Spinner ---- */
.pkl-spinner {
    display:        inline-block;
    width:          16px;
    height:         16px;
    border:         2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius:  50%;
    animation:      pklSpin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes pklSpin { to { transform: rotate(360deg); } }

/* ---- Shake ---- */
@keyframes pklShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-7px); }
    40%     { transform: translateX(7px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}

.pkl-shake {
    animation:      pklShake 0.4s ease !important;
    border-color:   #ef4444 !important;
    box-shadow:     0 0 0 4px rgba(239,68,68,0.12) !important;
}

/* ---- Print ---- */
@media print {
    .pkl-wrap { display: none; }
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
    .pkl-wrap       { margin: 12px; border-radius: 18px; }
    .pkl-hdr        { padding: 18px 18px; }
    .pkl-body       { padding: 20px 18px 16px; }
    .pkl-output     { padding: 0 18px 20px; }
    .pkl-statistik  { padding: 13px 18px; }
    .pkl-hdr h2     { font-size: 14px; }
    .pkl-input-big  { font-size: 22px; letter-spacing: 4px; }
    .pkl-stat-label { font-size: 10px; }
    .pkl-stat-num   { font-size: 20px; }
    .pkl-foto-frame { width: 88px; height: 106px; }
    .pkl-status-text { font-size: 14px; }
}