/* ==========================================================
   DPT PILKADES
   /assets/css/dpt.css
========================================================== */

/* ==========================================================
   VARIABLE
========================================================== */

:root {
    --dpt-primary: #0f766e;
    --dpt-primary-dark: #115e59;
    --dpt-primary-light: #ccfbf1;

    --dpt-blue: #2563eb;
    --dpt-blue-dark: #1d4ed8;

    --dpt-danger: #dc2626;
    --dpt-danger-dark: #b91c1c;

    --dpt-text: #102a43;
    --dpt-text-dark: #111827;
    --dpt-text-muted: #627d98;

    --dpt-border: #d9e2ec;
    --dpt-border-light: #e5e7eb;
    --dpt-background: #f8fafc;
    --dpt-white: #ffffff;

    --dpt-radius-sm: 12px;
    --dpt-radius-md: 16px;
    --dpt-radius-lg: 22px;

    --dpt-shadow-card:
        0 24px 60px rgba(15, 23, 42, 0.12),
        0 6px 18px rgba(15, 118, 110, 0.08);

    --dpt-shadow-modal:
        0 25px 70px rgba(0, 0, 0, 0.28);
}

/* ==========================================================
   RESET
========================================================== */

#dpt-checker *,
.dpt-modal *,
.hasil-modern * {
    box-sizing: border-box;
}

/* ==========================================================
   FORM CEK DPT
========================================================== */

#dpt-checker{

    width:100%;
    max-width:700px;

    margin:0 auto;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}

/* ==========================================================
   CARD
========================================================== */

#dpt-checker .dpt-card{

    width:100%;
    max-width:520px;

    margin:0 auto;

    padding:28px;

    background:var(--white);

    border:
        1px solid rgba(0,0,0,.06);

    border-radius:20px;

    box-shadow:var(--shadow);

    animation:
        dptCardAppear .4s ease both;

}

/* ==========================================================
   HEADER
========================================================== */

#dpt-checker .dpt-header{

    margin-bottom:24px;

    text-align:center;

}

#dpt-checker .dpt-header h3{

    margin:0 0 10px;

    color:var(--text);

    font-size:28px;

    font-weight:700;

    line-height:1.3;

}

#dpt-checker .dpt-header p{

    max-width:420px;

    margin:0 auto;

    color:var(--muted);

    font-size:14px;

    line-height:1.6;

}

/* ==========================================================
   INPUT FORM
========================================================== */

#dpt-checker .form-group{

    margin-bottom:20px;

}

#dpt-checker .form-group label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-size:14px;

    font-weight:600;

}

#dpt-checker .form-group input{

    width:100%;

    height:48px;

    padding:0 16px;

    background:var(--white);

    color:var(--text);

    border:1px solid rgba(0,0,0,.12);

    border-radius:12px;

    outline:none;

    font-size:14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}

#dpt-checker .form-group input::placeholder{

    color:var(--muted);

}

#dpt-checker .form-group input:hover{

    border-color:rgba(15,118,110,.35);

}

#dpt-checker .form-group input:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px rgba(15,118,110,.12);

}

/* ==========================================================
   BUTTON FORM DAN OTP
========================================================== */

#btn-kirim-otp,
#btn-verifikasi{

    width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(15,118,110,.18);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}

#btn-kirim-otp:hover,
#btn-verifikasi:hover{

    transform:translateY(-1px);

    box-shadow:
        0 10px 22px rgba(15,118,110,.22);

}

#btn-kirim-otp:active,
#btn-verifikasi:active{

    transform:none;

}

#btn-kirim-otp:disabled,
#btn-verifikasi:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* ==========================================================
   TOMBOL TUTUP MODAL
========================================================== */

#btn-tutup-otp,
#btn-tutup-hasil{

    width:100%;

    height:48px;

    border:none;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}

#btn-tutup-otp{

    margin-top:10px;

    background:#e5e7eb;

    color:var(--text);

}

#btn-tutup-otp:hover{

    background:#d1d5db;

}

#btn-tutup-hasil{

    background:#dc2626;

    color:#ffffff;

}

#btn-tutup-hasil:hover{

    background:#b91c1c;

    transform:translateY(-1px);

}

/* ==========================================================
   MESSAGE
========================================================== */

#dpt-message {
    margin-top: 20px;
    padding: 14px 15px;

    border-radius: var(--dpt-radius-sm);

    font-size: 14px;
    line-height: 1.6;
}

.dpt-success {
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.dpt-error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* ==========================================================
   MODAL / POPUP GLOBAL
========================================================== */

.dpt-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(15, 23, 42, 0.68);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.dpt-modal.active {
    display: flex;
}

.dpt-modal-box {
    position: relative;

    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);

    padding: 30px;

    overflow-y: auto;

    background: var(--dpt-white);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--dpt-radius-lg);

    box-shadow: var(--dpt-shadow-modal);

    animation: dptModalAppear 0.3s ease both;
}

/* Animasi modal */
@keyframes dptModalAppear {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dptCardAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================
   MODAL OTP
========================================================== */

.otp-header {
    text-align: center;
}

.otp-icon {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    color: var(--dpt-primary);
    background: var(--dpt-primary-light);
    border-radius: 50%;

    font-size: 34px;
}

.dpt-modal-box h4 {
    margin: 0 0 12px;

    color: var(--dpt-text-dark);
    text-align: center;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

#otp-info {
    margin: 0 0 20px;

    color: var(--dpt-text-muted);
    text-align: center;

    font-size: 14px;
    line-height: 1.7;
}

#otp {
    width: 100%;
    height: 60px;

    margin-bottom: 15px;
    padding: 0 15px;

    color: var(--dpt-text);
    background: #f8fafc;

    border: 1.5px solid var(--dpt-border);
    border-radius: 14px;
    outline: none;

    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 6px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

#otp:focus {
    background: var(--dpt-white);
    border-color: var(--dpt-blue);

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.12);
}

.otp-note {
    margin: 0 0 20px;

    color: var(--dpt-text-muted);
    text-align: center;

    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================
   MODAL HASIL
========================================================== */

.hasil-modern {
    width: 100%;
    max-width: 850px;

    padding: 0;
    overflow: hidden;

    position: relative;
}

/* Bagian atas hasil */
.hasil-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px 24px;

    color: var(--dpt-white);
    background:
        linear-gradient(
            135deg,
            var(--dpt-primary),
            var(--dpt-primary-dark)
        );

    text-align: center;
}

.hasil-logo {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 16px;

    color: var(--dpt-white);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    font-size: 32px;
    font-weight: 700;
}

.hasil-sambutan {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;
}

.hasil-keterangan {
    margin: 0;

    opacity: 0.9;

    font-size: 14px;
    font-weight: 600;
}

.hasil-top h2 {
    margin: 0;

    color: var(--dpt-white);

    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;

    word-break: break-word;
}

.hasil-top p {
    max-width: 600px;
    margin: 0;

    opacity: 0.95;

    font-size: 14px;
    line-height: 1.7;
}

/* Isi hasil */
.hasil-content {
    padding: 20px;
    background: var(--dpt-background);
}

/* ==========================================================
   DETAIL PEMILIH
========================================================== */

.hasil-detail-card {
    margin-bottom: 15px;

    overflow: hidden;

    background: var(--dpt-white);
    border: 1px solid var(--dpt-border-light);
    border-radius: var(--dpt-radius-md);
}

.hasil-detail-card .detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
    padding: 14px 16px;

    border-bottom: 1px solid var(--dpt-border-light);
}

.hasil-detail-card .detail-row:last-child {
    border-bottom: none;
}

.hasil-detail-card .detail-row span {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

.hasil-detail-card .detail-row strong {
    color: var(--dpt-text-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
}

/* ==========================================================
   STATUS PEMILIH
========================================================== */

.hasil-content .status-card {
    margin-bottom: 15px;
    padding: 16px;

    background: var(--dpt-white);
    border: 1px solid var(--dpt-border-light);
    border-radius: var(--dpt-radius-md);

    text-align: center;
}

.hasil-content .status-title {
    margin-bottom: 10px;

    color: #6b7280;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.hasil-content .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
}

.status-hijau {
    color: #15803d;
    background: #dcfce7;
}

.status-biru {
    color: #2563eb;
    background: #dbeafe;
}

.status-merah {
    color: #dc2626;
    background: #fee2e2;
}

/* ==========================================================
   INFO GRID
========================================================== */

.hasil-content .info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
    margin-bottom: 15px;
}

.hasil-content .info-box {
    padding: 16px;

    background: var(--dpt-white);
    border: 1px solid var(--dpt-border-light);
    border-radius: var(--dpt-radius-md);
}

.hasil-content .info-title {
    margin-bottom: 6px;

    color: #6b7280;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.hasil-content .info-value {
    color: var(--dpt-text-dark);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

/* ==========================================================
   INFORMASI
========================================================== */

.hasil-informasi {
    margin-bottom: 15px;
    padding: 14px;

    color: #4b5563;
    background: #f9fafb;
    border: 1px solid var(--dpt-border-light);
    border-radius: var(--dpt-radius-md);

    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================
   ACTION HASIL
========================================================== */

.hasil-actions {
    display: flex;
    flex-direction: column;
}

.btn-lapor {
    display: block;

    width: 100%;
    margin-bottom: 10px;
    padding: 14px;

    color: var(--dpt-white);
    background: var(--dpt-danger);
    border-radius: 13px;

    text-align: center;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.btn-lapor:hover {
    color: var(--dpt-white);
    background: var(--dpt-danger-dark);
    transform: translateY(-1px);
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 768px) {
    #dpt-checker {
        min-height: calc(100vh - 205px);
        padding: 18px 10px;
    }

    #dpt-checker .dpt-card {
        padding: 30px 24px;
        border-radius: 20px;
    }

    #dpt-checker .dpt-header {
        margin-bottom: 24px;
    }

    #dpt-checker .dpt-header h3 {
        font-size: 25px;
    }

    .hasil-top {
        padding: 26px 20px;
    }

    .hasil-top h2 {
        font-size: 24px;
    }

    .hasil-content {
        padding: 16px;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {
    #dpt-checker {
        min-height: calc(100vh - 195px);
        padding: 14px 8px;
    }

    #dpt-checker .dpt-card {
        padding: 25px 18px;
        border-radius: 18px;
    }

    #dpt-checker .dpt-header {
        margin-bottom: 22px;
    }

    #dpt-checker .dpt-header h3 {
        font-size: 22px;
        line-height: 1.3;
    }

    #dpt-checker .dpt-header p {
        font-size: 13px;
    }

    #dpt-checker .form-group {
        margin-bottom: 17px;
    }

    #dpt-checker .form-group input,
    #btn-kirim-otp,
    #btn-verifikasi {
        height: 50px;
        font-size: 14px;
    }

    /* Modal */
    .dpt-modal {
        align-items: center;
        padding: 12px;
    }

    .dpt-modal-box {
        max-width: 100%;
        max-height: calc(100vh - 24px);

        padding: 24px 18px;
        border-radius: 18px;
    }

    /* Modal OTP */
    .otp-icon {
        width: 56px;
        height: 56px;
        font-size: 27px;
    }

    .dpt-modal-box h4 {
        font-size: 21px;
    }

    #otp-info {
        font-size: 13px;
    }

    #otp {
        height: 54px;
        font-size: 24px;
        letter-spacing: 5px;
    }

    .otp-note {
        font-size: 12px;
    }

    /* Modal hasil */
    .hasil-modern {
        width: 100%;
        max-height: 90vh;
        padding: 0;

        overflow-y: auto;
    }

    .hasil-top {
        padding: 24px 18px;
    }

    .hasil-logo {
        width: 54px;
        height: 54px;
        margin-bottom: 13px;
        font-size: 25px;
    }

    .hasil-keterangan {
        font-size: 13px;
    }

    .hasil-top h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .hasil-top p {
        font-size: 13px;
        line-height: 1.7;
    }

    .hasil-content {
        padding: 14px;
    }

    /* Detail */
    .hasil-detail-card {
        margin-bottom: 12px;
    }

    .hasil-detail-card .detail-row {
        flex-direction: column;
        align-items: flex-start;

        gap: 4px;
        padding: 13px 14px;
    }

    .hasil-detail-card .detail-row span {
        font-size: 12px;
    }

    .hasil-detail-card .detail-row strong {
        font-size: 14px;
        text-align: left;
    }

    /* Status */
    .hasil-content .status-card {
        margin-bottom: 12px;
        padding: 14px;
    }

    .hasil-content .status-title {
        font-size: 11px;
    }

    .hasil-content .status-badge {
        padding: 9px 16px;
        font-size: 13px;
    }

    /* Info */
    .hasil-content .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .hasil-content .info-box {
        padding: 14px;
    }

    .hasil-content .info-title {
        font-size: 10px;
    }

    .hasil-content .info-value {
        font-size: 14px;
    }

    /* Informasi */
    .hasil-informasi {
        margin-bottom: 12px;
        padding: 12px;

        text-align: center;
        font-size: 12px;
        line-height: 1.7;
    }

    /* Tombol */
    .btn-lapor {
        margin-bottom: 10px;
        padding: 14px;
        font-size: 14px;
    }

    #btn-tutup-otp,
    #btn-tutup-hasil {
        height: 48px;
        font-size: 14px;
    }
}

/* ==========================================================
   MOBILE SANGAT KECIL
========================================================== */

@media (max-width: 360px) {
    #dpt-checker .dpt-card {
        padding: 22px 15px;
    }

    #dpt-checker .dpt-header h3 {
        font-size: 20px;
    }

    .hasil-top h2 {
        font-size: 18px;
    }

    .hasil-content {
        padding: 12px;
    }
}

/* ==========================================================
   AKSESIBILITAS
========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}