:root{
    --pink:#f6c1cc;
    --soft:#fafafa;
    --dark:#333;

    /* WhatsApp palette */
    --wa-green:#25d366;
    --wa-soft:#e9fdf1;
    --wa-border:#d9f5e4;
}

/* ===== RESET ===== */
*{
    box-sizing:border-box;
}

body{
    max-width:480px;
    margin:auto;
    background:var(--soft);
    font-family:system-ui,-apple-system,BlinkMacSystemFont;
    color:var(--dark);
}

/* ===== ANIMATION ===== */
.fade-up{
    opacity:0;
    transform:translateY(20px);
    animation:fadeUp .8s ease forwards;
}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.25s}
.delay-3{animation-delay:.4s}

@keyframes fadeUp{
    to{opacity:1;transform:none}
}

/* ===== HEADER ===== */
.ig-header{
    padding:16px;
    text-align:center;
    background:#fff;
    border-bottom:1px solid #eee;
}
.ig-header h1{
    font-size:1.15rem;
    font-weight:700;
}
.ig-header p{
    font-size:.85rem;
    opacity:.7;
}

/* ===== HERO ===== */
.hero{
    background:#fff;
    padding:16px;
    text-align:center;
}
.hero img{
    width:100%;
    height:300px;
    object-fit:cover;
    padding:10px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 14px 32px rgba(0,0,0,.1);
}
.hero h2{
    margin-top:14px;
    font-size:1.15rem;
    line-height:1.4;
}

/* ===== SECTION ===== */
section{
    background:#fff;
    margin-top:10px;
    padding:14px;
}
section h3{
    font-size:1rem;
    margin-bottom:12px;
}

/* ===== PRODUK GRID ===== */
.produk-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

/* CARD */
.produk-list .card{
    background:#fff;
    border-radius:18px;
    border:1px solid #eee;
    overflow:hidden;
    transition:.3s ease;
    display:flex;                 /* 🔥 BONUS */
    flex-direction:column;        /* 🔥 BONUS */
}

.produk-list .card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.08);
}

/* ===== FRAME FOTO PRODUK (FINAL FIX) ===== */
.produk-list img{
    width:100%;
    height:200px;                 /* 🔒 tinggi SAMA */
    object-fit:contain;           /* produk utuh */
    padding:14px;                 /* space estetik */
    background:#fff;
    border-bottom:1px solid #eee;
}

/* ===== ISI CARD ===== */
.card-content{
    padding:10px;
    display:flex;                 /* 🔥 BONUS */
    flex-direction:column;        /* 🔥 BONUS */
    height:100%;
}

.card-content h4{
    font-size:.85rem;
    margin-bottom:4px;
}

.card-content p{
    font-size:.75rem;
    opacity:.7;
}

.price{
    font-size:.85rem;
    font-weight:600;
    margin:6px 0 8px;
}

/* ===== TOMBOL ORDER (WA STYLE, BUKAN PINK) ===== */
.card-content button{
    margin-top:auto;              /* 🔥 tombol selalu di bawah */
    width:100%;
    border:none;
    padding:10px;
    border-radius:14px;
    background:linear-gradient(135deg,#2fe873,#25d366);
    color:#fff;
    font-size:.8rem;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(37,211,102,.35);
}

.card-content button:hover{
    opacity:.95;
}


/* ===== TESTIMONI WA (FINAL CHAT STYLE) ===== */
.testimoni-wa{
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* ===== BUBBLE DASAR ===== */
.wa-chat{
    max-width:78%;
    background:var(--wa-soft);
    border:1px solid var(--wa-border);
    padding:8px 10px;
    border-radius:14px;
    font-size:.78rem;
    line-height:1.35;

    /* 🔥 POSISI KIRI */
    align-self:flex-start;
}

/* ===== BUBBLE KANAN ===== */
.wa-chat.right{
    align-self:flex-end;
    background:#fff;
    border:1px solid #e5e5e5;
}

/* ===== NAMA ===== */
.wa-name{
    font-size:.72rem;
    font-weight:600;
    color:#222;
    margin-bottom:4px;
}

/* ===== FOTO SS WA (NATURAL & KONSISTEN) ===== */
.wa-chat img{
    margin-top:6px;
    max-width:160px;
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:10px;
    background:#f7f7f7;
    padding:4px;
    display:block;
}


/* ===== ABOUT ===== */
.about{
    font-size:.85rem;
    line-height:1.6;
}
.about p{opacity:.8}

/* ===== FOOTER ===== */
.footer{
    background:#fff;
    margin-top:10px;
    padding:20px 16px 90px;
    text-align:center;
    border-top:1px solid #eee;
}
.footer h4{font-size:1rem}
.footer p{font-size:.8rem;opacity:.7}

/* ===== FLOAT WA ===== */
.wa-float{
    position:fixed;
    bottom:16px;
    right:16px;
    background:linear-gradient(135deg,#2fe873,#25d366);
    color:#fff;
    padding:14px;
    font-size:22px;
    border-radius:50%;
    box-shadow:0 10px 24px rgba(37,211,102,.45);
    z-index:50;
}

/* ===== MODAL ORDER ===== */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    justify-content:center;
    align-items:center;
    z-index:100;
}

.modal-box{
    background:#fff;
    width:90%;
    max-width:360px;
    padding:16px;
    border-radius:16px;
}

.selected-produk{
    font-size:.8rem;
    background:#f3fdf7;
    border:1px solid var(--wa-border);
    padding:6px 8px;
    border-radius:8px;
    margin-bottom:8px;
}

.modal-box input,
.modal-box textarea{
    width:100%;
    margin-bottom:8px;
    padding:9px;
    font-size:.8rem;
    border-radius:10px;
    border:1px solid #ddd;
}

.btn-send{
    width:100%;
    padding:10px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#2fe873,#25d366);
    color:#fff;
    font-size:.85rem;
    font-weight:600;
}

.btn-cancel{
    width:100%;
    padding:8px;
    border:none;
    border-radius:10px;
    background:#eee;
    font-size:.8rem;
}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.lihat-semua{
    font-size:.75rem;
    color:var(--wa-green);
    text-decoration:none;
    font-weight:600;
}

.lihat-semua:hover{
    opacity:.7;
}
/* ===============================
   FILTER + SEARCH (COMPACT & RAPI)
================================ */
.filter-bar{
    position:sticky;
    top:0;
    z-index:20;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 12px;
    background:#fff;
    border-bottom:1px solid #eee;
}

/* SEARCH */
.filter-bar input{
    flex:1;
    height:38px;
    padding:0 14px;

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

    font-size:.75rem;
    background:#f7f7f7;
    color:#333;

    transition:.25s ease;
}

/* SEARCH FOCUS */
.filter-bar input:focus{
    outline:none;
    background:#fff;
    border-color:var(--wa-green);
}

/* SELECT */
.filter-bar select{
    height:38px;
    padding:0 12px;

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

    font-size:.7rem;
    background:#f7f7f7;
    color:#333;

    cursor:pointer;
}

/* FOCUS */
.filter-bar select:focus{
    outline:none;
    background:#fff;
    border-color:var(--wa-green);
}

/* PLACEHOLDER */
.filter-bar input::placeholder{
    color:#aaa;
}

/* MOBILE (TETEP SEJAJAR) */
@media(max-width:480px){
    .filter-bar{
        padding:8px 10px;
    }
}