/* =======================================================
   Coky Store — storefront & admin styles
   Save as: assets/style.css
   ======================================================= */

:root{
  --bg:#f3f8ff;
  --header:#cfe9fb;
  --title:#2b7cc6;
  --nav:#1f77c8;
  --text:#14223a;
  --muted:#5c6f86;

  --card:#ffffff;
  --radius:22px;
  --shadow:0 10px 28px rgba(17,46,110,.09);

  --pill:#1d7ac7;
  --pillText:#ffffff;

  --green:#128941;          /* harga */
  --btnBg:#f1f7ff;          /* tombol beli */
  --btnBorder:#d9e6f5;
  --btnText:#0b61c2;

  --focus:#92c5ff;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.container{max-width:1080px;margin:0 auto;padding:0 16px}

/* Header */
.header{
  position:sticky; top:0; z-index:20;
  background:var(--header); border-bottom:1px solid #e1efff;
  backdrop-filter:blur(6px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-size:26px;font-weight:900;letter-spacing:.2px}
.menu-btn{background:transparent;border:0;padding:6px 2px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.menu-btn span{width:24px;height:2px;background:#173a67;border-radius:2px}

/* Title */
.section-title{
  font-size:28px;line-height:1.1;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--title);font-weight:900;margin:20px 0 10px 4px;
}

/* ===== GRID: 2 kolom mobile/tablet, 3 kolom desktop ===== */
.grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px; padding-bottom:96px;
}
@media (max-width:430px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Card */
.card{
  position:relative; background:var(--card);
  border-radius:var(--radius); border:1px solid #e7effa;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
  min-width:0; width:100%;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(17,46,110,.12)}

/* Badge */
.card-badge{
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; background:var(--pill); color:var(--pillText);
  border-radius:999px; font-weight:800; font-size:14px;
  box-shadow:0 6px 16px rgba(29,122,199,.25);
}
.card-badge .cloud{
  display:grid; place-items:center; width:22px; height:22px; border-radius:999px;
  background:#fff; color:#1b6fb6; font-weight:900; font-size:12px;
}

/* Media */
.card-media{
  height:220px;
  background:linear-gradient(180deg,#eef6ff,#eaf3ff);
  display:flex; align-items:center; justify-content:center;
}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Body (centered & equal height) */
.card-body{
  padding:14px 16px 8px 16px;
  text-align:center;
  flex:1; /* dorong tombol ke bawah agar tinggi kartu sejajar */
}
.card-title{
  font-size:18px; line-height:1.3; margin:0 0 6px 0; font-weight:800; color:#1d2b44;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-price{
  font-weight:900; color:var(--green); font-size:20px; margin:8px 0 12px; text-align:center;
}

/* Actions */
.card-actions{padding:0 16px 16px; text-align:center}
.btn-buy{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btnBg); border:2px solid var(--btnBorder); color:var(--btnText);
  padding:10px 16px; border-radius:14px; font-weight:900;
  transition:background .15s ease, transform .05s ease;
}
.btn-buy::before{content:"🛒";font-size:18px;line-height:1}
.btn-buy:hover{filter:brightness(.98)}
.btn-buy:active{transform:translateY(1px)}

/* Bottom nav */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--nav); color:#fff; padding:12px 24px;
  display:flex; justify-content:space-around; align-items:center; gap:20px;
  border-top-left-radius:14px; border-top-right-radius:14px;
  box-shadow:0 -8px 22px rgba(20,60,120,.22);
}
.nav-item{display:flex;flex-direction:column;align-items:center;font-weight:800;opacity:.9;transition:opacity .15s ease, transform .15s ease}
.nav-item span{font-size:14px;margin-top:4px}
.nav-item.active,.nav-item:hover{opacity:1;transform:translateY(-1px)}

/* Footer */
.footer{padding:18px 0 100px;color:#6c7a8a}
.footer .container{display:flex;gap:14px;justify-content:space-between}

/* ===== Admin ===== */
.admin-body{background:#f4f7fb}
.admin-topbar{background:#fff;border-bottom:1px solid #e7eef7;padding:10px 16px;display:flex;align-items:center}
.admin-topbar .spacer{flex:1}
.admin-wrap{max-width:980px;margin:16px auto;padding:0 16px;display:grid;gap:16px}
.admin-card{background:#fff;border:1px solid #e7eef7;border-radius:14px;box-shadow:var(--shadow);padding:16px}
label{display:block;margin-bottom:12px;font-weight:700}
input[type=text],input[type=number],input[type=password],input[type=file]{width:100%;padding:10px;border:1px solid #cfe0f3;border-radius:10px;background:#f8fbff}
.btn{background:#0e6efd;color:#fff;padding:10px 14px;border-radius:10px;border:none;display:inline-block;font-weight:800;cursor:pointer}
.btn.small{padding:6px 10px;font-size:13px}
.btn.danger{background:#dc3545}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eef2f8;padding:8px;text-align:left}
.alert{background:#fff3cd;border:1px solid #ffe69c;color:#664d03;padding:8px;border-radius:8px;margin-bottom:10px}
.admin-card h1,.admin-card h2{margin-top:0}
.alert.success { background:#d1e7dd; border-color:#badbcc; color:#0f5132; }
/* Small devices polish */
@media (max-width:420px){
  .section-title{font-size:24px}
  .brand{font-size:22px}
  .card-media{height:200px}
}