/* Nubikit PDF Tools Premium CSS v1.0 */
.pdf-tool-wrapper{display:flex;flex-direction:column;gap:24px;margin:30px 0}.pdf-tool-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:28px;box-shadow:0 10px 25px rgba(15,23,42,.05)}.tool-header{display:flex;align-items:center;gap:18px}.tool-icon-large{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#16A34A,#22C55E);display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff}.tool-title{font-size:30px;font-weight:700;color:#0F172A;margin:0 0 8px}.tool-desc{color:#64748B;line-height:1.8}.tool-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.tool-badge{background:#ECFDF5;color:#16A34A;border:1px solid #BBF7D0;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-actions{display:flex;gap:10px;align-items:center}.file-count{background:#F1F5F9;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600}.btn-clear{background:#FEF2F2;color:#DC2626;border:none;padding:8px 14px;border-radius:10px;cursor:pointer}.btn-clear:hover{background:#FEE2E2}.pdf-drop-zone{border:2px dashed #22C55E;background:#F0FDF4;border-radius:22px;padding:55px 30px;text-align:center;cursor:pointer;transition:.3s}.pdf-drop-zone:hover{background:#ECFDF5;border-color:#16A34A}.pdf-drop-zone.dragover{background:#DCFCE7;border-color:#15803D;transform:scale(1.01)}.drop-icon{width:90px;height:90px;margin:0 auto 20px;border-radius:50%;background:#16A34A;display:flex;align-items:center;justify-content:center;font-size:42px;color:#fff}.choose-btn{padding:15px 28px;border-radius:14px;font-size:16px}.upload-info{display:block;margin-top:15px;color:#64748B;font-size:13px}.empty-files{text-align:center;padding:40px 20px;color:#94A3B8}.empty-icon{font-size:46px;margin-bottom:10px}.pdf-file-list{display:flex;flex-direction:column;gap:14px}.pdf-file-item{display:flex;justify-content:space-between;align-items:center;border:1px solid #E5E7EB;border-radius:18px;padding:16px;background:#fff;transition:.25s}.pdf-file-item:hover{border-color:#BBF7D0;box-shadow:0 8px 20px rgba(22,163,74,.08)}.pdf-file-info{display:flex;align-items:center;gap:15px}.pdf-file-thumb{width:58px;height:74px;border-radius:12px;background:#F1F5F9;overflow:hidden}.pdf-file-icon{width:52px;height:52px;border-radius:14px;background:#DCFCE7;display:flex;align-items:center;justify-content:center;font-size:24px}.pdf-file-name{font-weight:600;color:#0F172A}.pdf-file-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#64748B}.pdf-file-actions{display:flex;gap:8px}.pdf-action-icon{width:38px;height:38px;border:none;border-radius:10px;background:#F1F5F9;cursor:pointer}.pdf-action-icon:hover{background:#DCFCE7;color:#16A34A}.drag-handle{cursor:grab}.pdf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pdf-stat{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:20px;padding:22px;text-align:center}.stat-icon{width:52px;height:52px;border-radius:50%;background:#DCFCE7;color:#16A34A;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px}.pdf-stat h3{font-size:30px;color:#16A34A;margin:6px 0}.pdf-stat p{margin:0;color:#64748B}.tool-input{width:100%;padding:15px 18px;border:1px solid #CBD5E1;border-radius:14px;font-size:15px}.tool-input:focus{outline:none;border-color:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.1)}.progress-bar{width:100%;height:12px;background:#E2E8F0;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#16A34A,#22C55E);transition:width .25s}.pdf-action-btn{width:100%;padding:18px;border:none;border-radius:16px;background:linear-gradient(90deg,#16A34A,#22C55E);color:#fff;font-size:17px;font-weight:700;cursor:pointer}.pdf-action-btn:disabled{background:#CBD5E1;cursor:not-allowed}.action-note{text-align:center;color:#64748B;font-size:14px;margin-top:12px}.download-card{background:#F0FDF4;border:2px solid #BBF7D0}.download-success{text-align:center;margin-bottom:24px}.success-icon{width:88px;height:88px;border-radius:50%;background:#16A34A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:42px;margin:0 auto 18px}.download-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}.download-meta div{background:#fff;border:1px solid #D1FAE5;border-radius:16px;padding:16px;text-align:center}.download-btn{display:block;width:100%;text-align:center;padding:16px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-card,.feature-item,.faq-item{background:#F8FAFC;border:1px solid #E5E7EB;border-radius:18px;padding:22px}.step-number{width:42px;height:42px;border-radius:50%;background:#16A34A;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-weight:700}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-icon{font-size:30px;margin-bottom:10px}.faq-list{display:flex;flex-direction:column;gap:16px}.loading-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);display:none;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(4px)}.loading-box{background:#fff;border-radius:24px;padding:32px;width:300px;text-align:center}.loading-spinner{width:60px;height:60px;border:5px solid #DCFCE7;border-top-color:#16A34A;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 18px}@keyframes spin{to{transform:rotate(360deg)}}.nubikit-toast{position:fixed;right:20px;bottom:20px;padding:14px 18px;border-radius:14px;color:#fff;font-weight:600;opacity:0;transform:translateY(80px);transition:.3s;z-index:99999}.nubikit-toast.show{opacity:1;transform:translateY(0)}.sortable-ghost{opacity:.45;background:#DCFCE7}.sortable-chosen{transform:scale(1.02)}@media(max-width:992px){.steps-grid,.feature-grid{grid-template-columns:1fr}}@media(max-width:768px){.pdf-tool-card{padding:20px;border-radius:18px}.tool-header{flex-direction:column;align-items:flex-start}.tool-title{font-size:24px}.pdf-drop-zone{padding:35px 20px}.section-head{flex-direction:column;align-items:flex-start;gap:12px}.pdf-file-item{flex-direction:column;align-items:flex-start;gap:16px}.pdf-file-actions{width:100%;justify-content:flex-end}.pdf-stats,.download-meta{grid-template-columns:1fr}.loading-box{width:90%}}body.dark .pdf-tool-card{background:#1E293B;border-color:#334155}body.dark .tool-title,body.dark .section-head h3{color:#F8FAFC}body.dark .tool-desc,body.dark .faq-item p,body.dark .feature-item p{color:#CBD5E1}body.dark .pdf-drop-zone{background:#0F172A}body.dark .pdf-file-item,body.dark .step-card,body.dark .feature-item,body.dark .faq-item,body.dark .download-meta div{background:#0F172A;border-color:#334155}body.dark .pdf-stat{background:#0F172A;border-color:#334155}body.dark .tool-input{background:#0F172A;color:#fff;border-color:#334155}body.dark .loading-box{background:#1E293B}


/* ==========================================
   SPLIT PDF OPTION
========================================== */

.split-option-card{
    margin-top:30px;
    background:#fff;
    border-radius:24px;
    padding:30px;
    border:1px solid #E5E7EB;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.split-option-card h2{
    margin:0 0 8px;
    font-size:28px;
    color:#104d65;
}

.option-desc{
    color:#6B7280;
    margin-bottom:25px;
    font-size:15px;
    line-height:1.6;
}

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

.split-mode-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:25px;
}

.split-mode{
    position:relative;
    cursor:pointer;
    display:block;
}

.split-mode input{
    display:none;
}

.mode-card{
    border:2px solid #E5E7EB;
    border-radius:20px;
    padding:22px 18px;
    text-align:center;
    transition:.25s;
    background:#fff;
    height:100%;
}

.mode-card:hover{
    transform:translateY(-4px);
    border-color:#16A34A;
    box-shadow:0 10px 25px rgba(22,163,74,.12);
}

.mode-icon{
    font-size:42px;
    margin-bottom:12px;
}

.mode-card strong{
    display:block;
    font-size:18px;
    color:#104d65;
    margin-bottom:8px;
}

.mode-card small{
    display:block;
    color:#6B7280;
    line-height:1.5;
    font-size:14px;
}

/* Selected */

.split-mode input:checked + .mode-card{
    border-color:#16A34A;
    background:#ECFDF5;
    box-shadow:0 0 0 4px rgba(22,163,74,.12);
}

.split-mode input:checked + .mode-card .mode-icon{
    transform:scale(1.08);
}

/* ===========================
   SETTING BOX
=========================== */

.split-setting{
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    border-radius:18px;
    padding:20px;
    margin:20px 0;
}

.split-setting label{
    display:block;
    font-weight:600;
    color:#104d65;
    margin-bottom:10px;
}

.split-setting input{
    width:100%;
    height:52px;
    border:1px solid #D1D5DB;
    border-radius:14px;
    padding:0 16px;
    font-size:16px;
    outline:none;
    transition:.2s;
    box-sizing:border-box;
}

.split-setting input:focus{
    border-color:#16A34A;
    box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

.split-setting small{
    display:block;
    margin-top:8px;
    color:#6B7280;
    line-height:1.5;
}

/* ===========================
   PREVIEW
=========================== */

.split-preview{
    background:linear-gradient(135deg,#16A34A,#22C55E);
    color:#fff;
    border-radius:18px;
    padding:18px 22px;
    margin:25px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.split-preview span{
    font-size:15px;
    opacity:.9;
}

.split-preview strong{
    font-size:22px;
    font-weight:700;
}

/* ===========================
   BUTTON SPLIT
=========================== */

.btn-large{
    width:100%;
    height:58px;
    font-size:18px;
    font-weight:700;
    border-radius:16px;
    background:#16A34A;
    color:#fff;
    border:none;
    cursor:pointer;
    transition:.25s;
}

.btn-large:hover{
    background:#15803D;
    transform:translateY(-2px);
}

.btn-large:disabled{
    background:#9CA3AF;
    cursor:not-allowed;
    transform:none;
}

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

@media (max-width:768px){

    .split-option-card{
        padding:20px;
        border-radius:20px;
    }

    .split-option-card h2{
        font-size:22px;
    }

    .split-mode-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .mode-card{
        text-align:left;
        display:flex;
        align-items:center;
        gap:15px;
        padding:18px;
    }

    .mode-icon{
        font-size:34px;
        margin:0;
        min-width:40px;
    }

    .split-preview{
        flex-direction:column;
        align-items:flex-start;
    }

    .split-preview strong{
        font-size:20px;
    }

    .btn-large{
        height:54px;
        font-size:17px;
    }
}

/* ==========================================
   PDF INFO CARD
========================================== */

.pdf-info-card{
    margin-top:30px;
    background:#FFFFFF;
    border:1px solid #E5E7EB;
    border-radius:24px;
    padding:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Header */

.pdf-info-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
}

.pdf-icon-big{
    width:72px;
    height:72px;
    border-radius:18px;
    background:#DCFCE7;
    color:#16A34A;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    flex-shrink:0;
}

.pdf-info-top h3{
    margin:0;
    color:#104d65;
    font-size:22px;
    font-weight:700;
    word-break:break-word;
}

.pdf-info-top p{
    margin:6px 0 0;
    color:#6B7280;
    font-size:14px;
}

/* Statistik */

.pdf-stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.stat-box{
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    border-radius:18px;
    padding:18px;
    text-align:center;
    transition:.25s;
}

.stat-box:hover{
    border-color:#16A34A;
    background:#ECFDF5;
    transform:translateY(-2px);
}

.stat-box span{
    display:block;
    color:#6B7280;
    font-size:13px;
    margin-bottom:8px;
}

.stat-box strong{
    display:block;
    color:#104d65;
    font-size:22px;
    font-weight:700;
}

/* Badge Ready */

.stat-box:last-child{
    background:#ECFDF5;
    border-color:#16A34A;
}

.stat-box:last-child strong{
    color:#16A34A;
}

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

@media (max-width:768px){

    .pdf-info-card{
        padding:18px;
        border-radius:20px;
    }

    .pdf-info-top{
        align-items:flex-start;
        gap:14px;
    }

    .pdf-icon-big{
        width:58px;
        height:58px;
        font-size:28px;
        border-radius:16px;
    }

    .pdf-info-top h3{
        font-size:18px;
        line-height:1.4;
    }

    .pdf-stats-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .stat-box{
        display:flex;
        justify-content:space-between;
        align-items:center;
        text-align:left;
        padding:16px 18px;
    }

    .stat-box span{
        margin:0;
        font-size:14px;
    }

    .stat-box strong{
        font-size:18px;
    }

}

/* ==========================================
   HOW TO USE / TOOL GUIDE
========================================== */

.tool-guide{
    margin-top:50px;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:24px;
    padding:35px 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.tool-guide h2{
    margin:0 0 30px;
    text-align:center;
    color:#104d65;
    font-size:30px;
    font-weight:700;
}

.guide-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.guide-item{
    position:relative;
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    border-radius:20px;
    padding:24px 18px;
    text-align:center;
    transition:all .3s ease;
}

.guide-item:hover{
    transform:translateY(-6px);
    border-color:#16A34A;
    background:#ECFDF5;
    box-shadow:0 15px 30px rgba(22,163,74,.12);
}

.guide-number{
    width:55px;
    height:55px;
    margin:0 auto 18px;
    border-radius:50%;
    background:linear-gradient(135deg,#16A34A,#22C55E);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    box-shadow:0 8px 18px rgba(22,163,74,.25);
}

.guide-item h4{
    margin:0 0 10px;
    font-size:18px;
    color:#104d65;
    font-weight:700;
}

.guide-item p{
    margin:0;
    color:#6B7280;
    font-size:14px;
    line-height:1.6;
}

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

@media (max-width:991px){

    .guide-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .tool-guide{
        padding:24px 20px;
        border-radius:20px;
    }

    .tool-guide h2{
        font-size:24px;
        margin-bottom:20px;
    }

    .guide-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .guide-item{
        display:flex;
        align-items:flex-start;
        text-align:left;
        gap:16px;
        padding:18px;
    }

    .guide-number{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
        margin:0;
    }

    .guide-item h4{
        font-size:17px;
        margin-bottom:6px;
    }

    .guide-item p{
        font-size:14px;
    }

}

/* ==========================================
   DOWNLOAD RESULT CARD
========================================== */

.download-card{
    margin-top:35px;
    background:#FFFFFF;
    border:1px solid #DCFCE7;
    border-radius:24px;
    padding:30px;
    box-shadow:0 12px 35px rgba(22,163,74,.08);
}

/* Success Header */

.download-success{
    text-align:center;
    margin-bottom:28px;
}

.success-icon{
    width:80px;
    height:80px;
    margin:0 auto 18px;
    border-radius:50%;
    background:linear-gradient(135deg,#16A34A,#22C55E);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    box-shadow:0 10px 25px rgba(22,163,74,.25);
}

.download-success h2{
    margin:0 0 10px;
    font-size:28px;
    color:#104d65;
    font-weight:700;
}

.download-success p{
    margin:0;
    color:#6B7280;
    font-size:15px;
    line-height:1.6;
}

/* Info Grid */

.download-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:30px;
}

.download-info-item{
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    border-radius:18px;
    padding:18px;
    text-align:center;
    transition:.25s;
}

.download-info-item:hover{
    background:#ECFDF5;
    border-color:#16A34A;
    transform:translateY(-2px);
}

.download-info-item span{
    display:block;
    font-size:13px;
    color:#6B7280;
    margin-bottom:8px;
}

.download-info-item strong{
    display:block;
    color:#104d65;
    font-size:18px;
    font-weight:700;
    word-break:break-word;
}

/* Download Button */

.btn-download{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    height:58px;
    border-radius:16px;
    background:linear-gradient(135deg,#16A34A,#22C55E);
    color:#FFFFFF;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    transition:.25s;
    box-shadow:0 12px 24px rgba(22,163,74,.18);
}

.btn-download:hover{
    background:linear-gradient(135deg,#15803D,#16A34A);
    transform:translateY(-2px);
    box-shadow:0 16px 28px rgba(22,163,74,.25);
}

.btn-download:active{
    transform:scale(.98);
}

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

@media (max-width:768px){

    .download-card{
        padding:20px;
        border-radius:20px;
    }

    .success-icon{
        width:68px;
        height:68px;
        font-size:34px;
    }

    .download-success h2{
        font-size:22px;
    }

    .download-info-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .download-info-item{
        display:flex;
        justify-content:space-between;
        align-items:center;
        text-align:left;
        padding:16px;
    }

    .download-info-item span{
        margin:0;
        font-size:14px;
    }

    .download-info-item strong{
        font-size:16px;
        text-align:right;
    }

    .btn-download{
        height:54px;
        font-size:17px;
    }

}

/* ==========================================
   FAQ SECTION
========================================== */

.tool-faq{
    margin-top:60px;      /* Jarak dari section sebelumnya */
    padding-top:10px;
}

.tool-faq h2{
    margin-bottom:24px;
    color:#104d65;
    font-size:28px;
    font-weight:700;
}

.faq-item{
    background:#fff;
    border:1px solid #e5edf1;
    border-radius:16px;
    padding:20px;
    margin-bottom:16px;
    box-shadow:0 4px 12px rgba(16,77,101,.04);
}

.faq-item h4{
    margin:0 0 10px;
    color:#104d65;
    font-size:17px;
    font-weight:600;
}

.faq-item p{
    margin:0;
    color:#64748b;
    line-height:1.7;
    font-size:15px;
}

@media (max-width:768px){
    .tool-faq{
        margin-top:40px;
    }

    .tool-faq h2{
        font-size:24px;
        margin-bottom:20px;
    }
}

/* ======================================================
   NUBIKIT PDF TOOLS
   FORM OPTION (JPG TO PDF / COMPRESS / SPLIT)
====================================================== */

.option-group{
    margin-bottom:22px;
}

.option-group label{
    display:block;
    margin-bottom:8px;
    font-weight:700;
    font-size:15px;
    color:#104d65;
}

/* ==========================
   SELECT
========================== */

.pdf-select,
.pdf-input{

    width:100%;
    height:52px;

    padding:0 16px;

    border:1px solid #d7e3ea;
    border-radius:14px;

    background:#fff;

    font-size:15px;
    color:#104d65;

    outline:none;

    transition:.25s;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23104d65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
    background-size:18px;

}

.pdf-input{

    background-image:none;

}

.pdf-select:hover,
.pdf-input:hover{

    border-color:#8ad3a8;

}

.pdf-select:focus,
.pdf-input:focus{

    border-color:#3cb371;

    box-shadow:0 0 0 4px rgba(60,179,113,.15);

}

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

.split-option-card{

    margin-top:28px;

    padding:24px;

    background:#fff;

    border-radius:20px;

    border:1px solid #e7eef2;

    box-shadow:0 10px 25px rgba(16,77,101,.05);

}

.option-desc{

    margin-top:6px;
    margin-bottom:20px;

    color:#6b7280;
    font-size:14px;

}

/* ==========================
   GRID RADIO CARD
========================== */

.split-mode-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:15px;

    margin-top:10px;
    margin-bottom:22px;

}

.split-mode{

    position:relative;
    cursor:pointer;

}

.split-mode input{

    display:none;

}

.mode-card{

    padding:20px 15px;

    border:2px solid #e5edf1;

    border-radius:16px;

    background:#fff;

    text-align:center;

    transition:.25s;

    height:100%;

}

.mode-icon{

    font-size:32px;

    margin-bottom:10px;

}

.mode-card strong{

    display:block;

    font-size:15px;

    color:#104d65;

    margin-bottom:6px;

}

.mode-card small{

    display:block;

    color:#64748b;

    font-size:13px;

    line-height:1.4;

}

.mode-card:hover{

    border-color:#39b36d;

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(57,179,109,.12);

}

.split-mode input:checked + .mode-card{

    border-color:#16a34a;

    background:#f0fff4;

    box-shadow:0 0 0 4px rgba(22,163,74,.12);

}

/* ==========================
   ESTIMATE BOX
========================== */

.compress-estimate{

    margin:24px 0;

    background:#f8fbfc;

    border:1px solid #dbe9ef;

    border-radius:18px;

    padding:20px;

}

.estimate-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    gap:15px;

}

.estimate-box{

    background:#fff;

    border:1px solid #e5edf1;

    border-radius:14px;

    padding:16px;

    text-align:center;

}

.estimate-box span{

    display:block;

    font-size:13px;

    color:#64748b;

    margin-bottom:6px;

}

.estimate-box strong{

    font-size:18px;

    color:#16a34a;

}

/* ==========================
   IMAGE LIST (JPG TO PDF)
========================== */

.image-list-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-top:18px;

}

.image-item{

    background:#fff;

    border:1px solid #e5edf1;

    border-radius:16px;

    overflow:hidden;

    transition:.25s;

}

.image-item:hover{

    box-shadow:0 10px 25px rgba(16,77,101,.08);

}

.image-thumb{

    aspect-ratio:4/5;

    overflow:hidden;

    background:#eef5f8;

}

.image-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.image-info{

    padding:14px;

}

.image-info strong{

    display:block;

    font-size:14px;

    color:#104d65;

    margin-bottom:6px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

}

.image-info small{

    display:block;

    color:#64748b;

    font-size:12px;

    margin-top:3px;

}

.image-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 14px 14px;

}

.drag-handle{

    width:36px;
    height:36px;

    border:none;

    border-radius:10px;

    background:#eef5f8;

    color:#104d65;

    cursor:grab;

    font-size:18px;

}

.remove-image{

    width:36px;
    height:36px;

    border:none;

    border-radius:10px;

    background:#fee2e2;

    color:#dc2626;

    cursor:pointer;

    font-size:18px;

    transition:.2s;

}

.remove-image:hover{

    background:#dc2626;
    color:#fff;

}

/* ==========================
   BUTTON CONVERT
========================== */

.btn-large{

    width:100%;

    height:56px;

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

    border-radius:16px;

    margin-top:10px;

}

.btn-primary{

    background:#16a34a;
    color:#fff;

    border:none;

    cursor:pointer;

    transition:.25s;

}

.btn-primary:hover{

    background:#12803a;

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(22,163,74,.25);

}

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

@media (max-width:768px){

    .split-mode-grid{

        grid-template-columns:1fr;

    }

    .estimate-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .image-list-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

    .mode-card{

        padding:16px;

    }

    .mode-icon{

        font-size:28px;

    }

}

@media (max-width:480px){

    .estimate-grid{

        grid-template-columns:1fr;

    }

    .image-list-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   JPG TO PDF - IMAGE LIST STYLES
   Compatible with: jpg-to-pdf.js & SortableJS
========================================== */

/* Kontainer Utama Grid Gambar */
#imageList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  padding: 8px 0;
}

/* Item Kartu Gambar */
.image-list-item {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: grab;
  user-select: none;
}

.image-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.image-list-item:active {
  cursor: grabbing;
}

/* Area Pratinjau Gambar */
.image-preview {
  position: relative;
  width: 100%;
  height: 120px;
  background-color: #f8fafc;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tombol Hapus per Gambar (Floating Top-Right) */
.btn-remove-img {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background-color: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
  backdrop-filter: blur(2px);
  z-index: 2;
}

.btn-remove-img:hover {
  background-color: #ef4444;
  transform: scale(1.1);
}

/* Informasi Gambar (Nama & Ukuran) */
.image-info {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.image-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.image-size {
  font-size: 0.75rem;
  color: #64748b;
}

/* ------------------------------------------
   STYLE DRAG & DROP (SORTABLEJS)
------------------------------------------ */
/* Efek bayangan saat item diseret */
.sortable-ghost {
  opacity: 0.4;
  background-color: #f1f5f9;
  border: 2px dashed #3b82f6;
}