/* ===================== */
/* PRODUK CLEAN FINAL */
/* ===================== */

/* BACKGROUND */
body {
    background: linear-gradient(to bottom, #eef2ff, #ffffff);
}

/* CONTAINER */
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* HEADER */
.produk-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

/* JUDUL */
.produk-header h1 {
    font-size: 34px;
    font-weight: 700;
    color: #1a1a2e;
}

/* SUBTITLE */
.produk-header p {
    color: #666;
    margin-top: 10px;
}

/* HEADER FLEX */
.header-flex {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SEARCH */
.search-box {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* INPUT */
.search-box input {
    padding: 10px 15px;
    width: 250px;
    border-radius: 25px;
    border: 1px solid #d1d5db;
    outline: none;
    transition: 0.3s;
}

/* GRID */
.produk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    justify-content: center;
}

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

.produk-card {

    background: #fff;

    border-radius: 14px;

    padding: 18px;

    text-align: center;

    border: 1px solid #e5e7eb;

    box-shadow: 0 8px 20px rgba(0,0,0,0.06);

    min-height: 340px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    transition: 0.3s;

    position: relative;

    gap: 3px;
}

/* HOVER */

.produk-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0,0,0,0.1);
}

/* GAMBAR */

.produk-card img {

    width: 100%;

    height: 170px;

    object-fit: contain;

    background: #f9fafb;

    border-radius: 10px;

    padding: 10px;
}

/* NAMA */

.produk-grid .produk-card h3 {

    font-size: 16px;

    font-weight: 600;

    color: #111827 !important;

    margin-top: 10px;

    margin-bottom: 2px;

    line-height: 1.3;
}

/* TEXT */

.produk-grid .produk-card p:not(.harga) {

    font-size: 14px;

    color: #05338f !important;

    margin: 2px 0;
}

/* HARGA */

.produk-grid .produk-card .harga {

    font-size: 18px;

    font-weight: 700;

    color: #ec0f0f !important;

    margin-top: 4px;
}

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

.btn-beli {

    margin-top: auto;

    padding: 10px 0;

    width: 80%;

    border-radius: 10px;

    border: none;

    background: linear-gradient(135deg, #121212, #64777f);

    color: white;

    cursor: pointer;

    transition: 0.3s;

    font-size: 15px;

    font-weight: 500;
}

/* HOVER */

.btn-beli:hover {

    transform: scale(1.05);

    background: linear-gradient(135deg, #2a2a40, #3a3a5a);
}

/* DISABLED */

.btn-beli:disabled {

    background: #aaa;

    cursor: not-allowed;
}

/* ===================== */
/* CUSTOM WRAPPER */
/* ===================== */

.custom-wrapper{

    width:1200px;

    margin:40px auto 0;

    display:flex;

    justify-content:center;

}

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

.produk-card.custom {

    width:700px;

    height: 380px;

    background: linear-gradient(135deg, #f9fafb, #eef2ff);

    border: 1px solid #dbeafe;

    border-radius: 14px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    text-align: center;

    padding: 15px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.06);

    transition: 0.3s;
}

/* HOVER */

.produk-card.custom:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0,0,0,0.1);
}


/* LABEL */

.produk-card.custom label {

    font-size: 13px;

    display: block;

    margin-top: 6px;
}

/* INPUT */

.produk-card.custom input,
.produk-card.custom select {

    width: 100%;

    padding: 10px;

    margin-top: 4px;

    border-radius: 8px;

    border: 1px solid #d1d5db;

    outline: none;
}

/* BUTTON */

.produk-card.custom .btn-beli {

    width: 100%;

    margin-top: 10px;
}

/* ===================== */
/* OVERLAY FIX */
/* ===================== */

#cart-overlay {

    display: none;

    pointer-events: none;
}

/* ===================== */
/* SCROLL + HIGHLIGHT */
/* ===================== */

html {
    scroll-behavior: smooth;
}

.highlight-temp {
    animation: highlightFlash 5s ease;
}

@keyframes highlightFlash {

    0% {

        background: linear-gradient(
            135deg,
            #c7d2fe,
            #e0e7ff
        );

        transform: scale(1.05);
    }

    100% {

        background: transparent;

        transform: scale(1);
    }
}

/* ===================== */
/* AI REKOMENDASI */
/* ===================== */

.rekomendasi-section {

    width: 1200px;

    margin: 0 auto 45px auto;
}

.rekomendasi-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 22px;
}

.rekomendasi-header h2 {

    font-size: 28px;

    color: #111827;

    font-weight: 700;
}

.rekomendasi-header p {

    color: #6b7280;

    font-size: 14px;
}

/* GRID POPULER */

.produk-populer-grid {

    display: grid;

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

    gap: 28px;
}

/* CARD POPULER */

.produk-card.populer {

    border: 1px solid #dbeafe;

    background: linear-gradient(
        to bottom,
        #ffffff,
        #f8fafc
    );
}

/* BADGE */

.badge-populer {

    position: absolute;

    top: 14px;

    left: 14px;

    background: linear-gradient(
        135deg,
        #f59e0b,
        #f97316
    );

    color: white;

    font-size: 12px;

    font-weight: 600;

    padding: 6px 12px;

    border-radius: 30px;

    box-shadow: 0 4px 12px rgba(249,115,22,0.25);
}

/* TERJUAL */

.terjual {

    font-size: 13px;

    color: #2563eb !important;

    font-weight: 600;
}

/* BERAT */

.berat {

    font-size: 13px;

    color: #7c3aed !important;

    font-weight: 600;

    margin-top: 2px;
}

/* HOVER */

.produk-card.populer:hover {

    transform: translateY(-10px);

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

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media(max-width:1200px){

    .rekomendasi-section,
    .container,
    .custom-wrapper{

        width: 95%;
    }
}

@media(max-width:992px){

    .produk-populer-grid,
    .produk-grid,
    .custom-wrapper{

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

@media(max-width:600px){

    .produk-populer-grid,
    .produk-grid,
    .custom-wrapper{

        grid-template-columns: 1fr;
    }

    .rekomendasi-header{

        flex-direction: column;

        align-items: start;

        gap: 8px;
    }
}

#searchInfo{

    display:none;

    position:absolute;

    top:205px;

    right: 45px;
    
    width:220px;

    padding:10px 15px;

    border-radius:12px;

    background:#ffffff;

    border:1px solid #2563eb;

    color:#2563eb;

    font-size:14px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    z-index:999;

}

#notFound{

    display:none;

    position:absolute;

    top:255px;

    right:45px;

    width:220px;

    padding:10px 15px;

    border-radius:12px;

    background:#fff5f5;

    border:1px solid #ef4444;

    color:#ef4444;

    font-size:14px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    z-index:999;

}

/* ========================= */
/* MODAL CUSTOM CAT */
/* ========================= */

.custom-modal{

    display:none;

    position:fixed;

    inset:0;

    background:
    rgba(15,23,42,.55);

    backdrop-filter:
    blur(4px);

    z-index:9999;

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

    padding:20px;

}

.custom-modal.show{

    display:flex;

}

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

.custom-modal-content{

    width:540px;

    max-width:95%;

    background:#ffffff;

    border-radius:24px;

    padding:32px;

    position:relative;

    box-shadow:
    0 25px 80px
    rgba(0,0,0,.18);

    animation:
    modalFade .25s ease;

}

/* ========================= */
/* TITLE */
/* ========================= */

.custom-modal-content h2{

    text-align:center;

    font-size:28px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:28px;

}

/* ========================= */
/* CLOSE BUTTON */
/* ========================= */

.modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#f3f4f6;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    cursor:pointer;

    transition:.2s;

}

.modal-close:hover{

    background:#e5e7eb;

    transform:scale(1.05);

}

/* ========================= */
/* FIELD */
/* ========================= */

.custom-info{

    margin-bottom:18px;

}

.custom-info label{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#374151;

    margin-bottom:8px;

}

/* ========================= */
/* INPUT & SELECT */
/* ========================= */

.custom-info input,
.custom-info select{

    width:100%;

    height:50px;

    padding:0 14px;

    border:1px solid #dbe3ea;

    border-radius:14px;

    background:#f8fafc;

    font-size:15px;

    transition:.2s;

    box-sizing:border-box;

}

.custom-info input:focus,
.custom-info select:focus{

    outline:none;

    border-color:#2563eb;

    background:#ffffff;

    box-shadow:
    0 0 0 4px
    rgba(37,99,235,.12);

}

/* ========================= */
/* HARGA */
/* ========================= */

#modalHarga{

    font-weight:700;

    color:#16a34a;

    font-size:17px;

}

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

#modalStatus{

    font-weight:600;

}

/* ========================= */
/* BUTTON BELI */
/* ========================= */

#btnBeliCustom{

    display:block;

    width:240px;

    height:52px;

    margin:30px auto 0;

    border:none;

    border-radius:14px;

    font-size:16px;

    font-weight:600;

    color:#fff;

    cursor:pointer;

    transition:.25s;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

}

#btnBeliCustom:hover:not(:disabled){

    transform:
    translateY(-2px);

    box-shadow:
    0 12px 24px
    rgba(37,99,235,.25);

}

#btnBeliCustom:disabled{

    opacity:.5;

    cursor:not-allowed;

    box-shadow:none;

}

/* ========================= */
/* ANIMATION */
/* ========================= */

@keyframes modalFade{

    from{

        opacity:0;

        transform:
        translateY(25px)
        scale(.97);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

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

@media(max-width:600px){

    .custom-modal-content{

        padding:24px;

        border-radius:20px;

    }

    .custom-modal-content h2{

        font-size:22px;

    }

    #btnBeliCustom{

        width:100%;

    }

}