/* ================= GLOBAL ================= */
body {
    margin:0;
    font-family: 'Segoe UI', sans-serif;
    background:#f4f6f9;
}

/* ================= HEADER ================= */
.header {
    background:#0f172a;
    padding:12px;
    text-align:center;
    position:sticky;
    top:0;
    z-index:10;
}

.header h1 {
    color:white;
    margin:0;
    font-size:18px;
}

.header input {
    margin-top:8px;
    width:90%;
    max-width:400px;
    padding:10px;
    border-radius:8px;
    border:none;
}

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

/* ================= CARD ================= */
.card {
    background:white;
    border-radius:12px;
    padding:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

/* GAMBAR PROPORSIONAL */
.card img {
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:10px;
}

/* NAMA */
.name {
    font-size:13px;
    margin-top:6px;
    height:36px;
    overflow:hidden;
}

/* HARGA */
.price {
    color:#16a34a;
    font-weight:bold;
    margin-top:4px;
}

/* ================= BUTTON WA ================= */
.btn-wa {
    display:block;
    margin-top:8px;
    text-align:center;
    background:#25D366;
    color:white;
    padding:10px;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}

/* HOVER */
.btn-wa:hover {
    background:#1ebe5d;
}

/* ================= RESPONSIVE ================= */
@media (min-width:768px){
    .grid {
        grid-template-columns: repeat(4,1fr);
    }

    .card img {
        height:160px;
    }
}