/* ==========================
   PASAR GEDONGOMBO v1.2
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

html,
body{
width:100%;
overflow-x:hidden;
background:#f4f4f4;
padding-bottom:85px;
}

/* HEADER */

header{
background:#198754;
color:white;
padding:18px;
text-align:center;
}

header h1{
font-size:28px;
}

header p{
margin-top:5px;
font-size:15px;
}

/* SEARCH */

.search{

padding:15px;

}

.search-box{

display:flex;

align-items:center;

background:white;

border-radius:12px;

overflow:hidden;

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

}

.search-box input{

flex:1;

padding:14px;

border:none;

outline:none;

font-size:16px;

background:transparent;

}

.search-box button{

width:55px;

height:50px;

border:none;

background:#198754;

color:white;

font-size:20px;

cursor:pointer;

transition:.2s;

}

.search-box button:hover{

background:#146c43;

}

/* MENU */

.menu{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
padding:15px;
}

.menu div{
background:white;
padding:15px;
border-radius:12px;
text-align:center;
font-size:14px;
font-weight:bold;
cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.08);
transition:.2s;
}

.menu div:hover{

background:#198754;

color:white;

transform:translateY(-2px);

}

/* PRODUK */

.produk{

padding:15px;

}

.card{

background:white;

border-radius:15px;

padding:12px;

margin-bottom:18px;

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

}

.card img{

width:100%;

border-radius:10px;

display:block;

}

.card h3{

margin-top:10px;

font-size:18px;

}

.harga{

color:#dc3545;

font-size:22px;

font-weight:bold;

margin:8px 0;

}

.stok{

color:#198754;

font-weight:bold;

margin-bottom:8px;

}

.wa{

display:block;

margin-top:12px;

background:#25D366;

color:white;

text-align:center;

padding:12px;

border-radius:10px;

text-decoration:none;

font-weight:bold;

transition:.2s;

}

.wa:hover{

background:#1fb85a;

}

/* BOTTOM NAV */

.bottom-nav{

position:fixed;

left:0;

right:0;

bottom:0;

height:70px;

background:#ffffff;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:0 -2px 10px rgba(0,0,0,.15);

z-index:9999;

padding-bottom:env(safe-area-inset-bottom);

}

.bottom-nav a{

flex:1;

text-align:center;

text-decoration:none;

color:#198754;

font-size:13px;

font-weight:bold;

padding-top:6px;

}

.bottom-nav a:hover{

color:#146c43;

}

/* INSTALL */

#installBtn{

position:fixed;

right:20px;

bottom:90px;

background:#198754;

color:white;

border:none;

padding:14px 18px;

border-radius:30px;

font-size:14px;

font-weight:bold;

cursor:pointer;

box-shadow:0 4px 10px rgba(0,0,0,.25);

z-index:99999;

display:none;

}

/* RESPONSIVE */

@media(max-width:480px){

header h1{

font-size:24px;

}

.menu{

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

}

.menu div{

font-size:13px;

padding:12px;

}

.card h3{

font-size:17px;

}

.harga{

font-size:20px;

}

}

/* Tombol Hapus Produk */
.hapusProduk{
    width:100%;
    margin-top:10px;
    padding:12px;
    background:#dc3545;
    color:#fff;
    border:none;
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

.hapusProduk:hover{
    background:#bb2d3b;
}

/* ==========================
   Framework v2
========================== */

.bottom-nav a.active{

color:#0d6efd;

font-weight:bold;

}

.bottom-nav a{

transition:.2s;

}

.bottom-nav a:hover{

transform:translateY(-2px);

}

/* ==========================
PRODUK PALING DIMINATI
========================== */

.produk-populer{

display:flex;

gap:12px;

padding:15px;

overflow-x:auto;

}



.populer-card{

min-width:220px;

background:white;

border-radius:12px;

padding:10px;

display:flex;

align-items:center;

gap:12px;

box-shadow:0 2px 8px rgba(0,0,0,.1);

}



.populer-card img{

width:60px;

height:60px;

object-fit:cover;

border-radius:10px;

}



.populer-info h4{

margin:0;

font-size:16px;

color:#198754;

}



.populer-info p{

margin-top:5px;

font-size:14px;

font-weight:bold;

color:#666;

}