:root {
    --primary: #1abc9c;
    --primary-dark: #16a085;
    --bg: #f5f7fa;
    --card: #fff;
    --shadow: 0 2px 24px rgba(44,62,80,0.11);
    --border: #e2e8f0;
    --radius: 20px;
    --radius-s: 10px;
    --modal-bg: rgba(23,31,42,0.12);
}
html,body { height:100%; }
body { font-family:'Inter',sans-serif; background:var(--bg); margin:0;}
header {
    background: linear-gradient(90deg,var(--primary),var(--primary-dark));
    color: #fff;
    padding: 30px 0 24px 0;
    text-align: center;
    box-shadow:0 2px 16px rgba(26,188,156,0.11);
    position: relative;
}
header h1 { margin:0;font-weight:800; font-size:2.2em; letter-spacing:.01em;}
.header-sub {font-size:1.02em; opacity:.94; margin-top:7px;}
.cart-btn {
    position: absolute; right: 32px; top: 32px;
    background: #fff; color: var(--primary-dark);
    border: none; border-radius: 50%;
    width: 56px; height: 56px; box-shadow: 0 2px 18px rgba(44,62,80,0.13);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.82em; cursor: pointer;
    transition: box-shadow .16s, transform .13s;
}
.cart-btn:hover { box-shadow:0 4px 28px rgba(44,62,80,0.18); transform:scale(1.06); }
.cart-badge {
    position: absolute; top: 10px; right: 9px;
    background: #e74242; color: #fff;
    font-size: .95em; font-weight: 700;
    border-radius: 11px; padding: 2.5px 9px;
    min-width: 20px; text-align:center;
    box-shadow:0 1px 7px rgba(231,66,66,.08);
}
.cart-icon { font-family:system-ui,Segoe UI,Arial;font-size:1.24em;}
main { max-width:1140px; margin:38px auto; padding:0 18px;}
.section-title {font-size:1.32em;font-weight:600;letter-spacing:.01em;margin-bottom:18px;}
.product-list { display:flex; flex-wrap:wrap; gap:32px;}
.produk {
    background:var(--card);
    border-radius:var(--radius-s);
    box-shadow:var(--shadow);
    width:310px; min-width:210px;
    display:flex; flex-direction:column;
    transition:box-shadow .13s, transform .13s;
    position:relative;
    overflow: hidden;
}
.produk:hover { transform:translateY(-6px) scale(1.018); box-shadow:0 8px 32px rgba(26,188,156,0.10);}
.produk img {
    border-top-left-radius:var(--radius-s);
    border-top-right-radius:var(--radius-s);
    width:100%; height:190px; object-fit:cover;
    filter:brightness(0.98) contrast(1.02);
    transition:filter .13s;
}
.produk:hover img { filter:brightness(1) contrast(1.06);}
.produk .product-body { flex:1; padding:20px 24px 14px 24px;}
.produk h4 { margin:0 0 10px 0;font-weight:700;font-size:1.09em; letter-spacing:.01em;}
.harga { color:var(--primary); font-weight:800; font-size:1.13em; margin-bottom:12px;}
.produk form { display:flex; align-items:center; gap:8px;}
.produk input[type="number"] {
    width:54px; border:1px solid var(--border); border-radius:8px;
    padding:7px 8px; font-size:1em;
    background: #f7faf9; transition:border .15s;
}
.produk input[type="number"]:focus { border:1.5px solid var(--primary);}
.produk button {
    background:var(--primary); color:#fff;
    border:none; border-radius:7px; padding:10px 19px;
    font-weight:700; cursor:pointer; transition:background .13s;
    font-size:1em; box-shadow:0 2px 7px rgba(26,188,156,0.09);
}
.produk button:hover { background:var(--primary-dark);}
.notif-success {
    background: #e9fbe8; color: #299c26;
    font-weight:600; margin:20px auto; padding:18px 30px;
    border-radius:12px; max-width:400px; text-align:center;
    box-shadow: 0 2px 10px rgba(41,156,38,0.05);
}
/* MODAL CART */
.modal-bg {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--modal-bg);
    z-index:20; display:none; opacity:0;
    transition:opacity .23s;
}
.modal-bg.active { display:block; opacity:1; }
.modal-cart {
    position: fixed; right:0; top:0; bottom:0;
    width:400px; max-width:99vw;
    background: #fff;
    box-shadow: -14px 0 32px rgba(44,62,80,0.11);
    z-index:30;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    padding:0;
    transform: translateX(110%);
    transition:transform .36s cubic-bezier(.56,.08,.17,1.12);
    overflow-y: auto; min-height:100vh;
}
.modal-cart.active { transform:translateX(0); }
.modal-cart-content {
    padding:44px 28px 32px 28px;
    min-height:100vh;
}
.modal-cart h2 { margin-top:0; font-size:1.2em; letter-spacing:.01em; text-align:center;}
.close-modal {
    position: absolute; right:18px; top:15px;
    font-size:2em; background:transparent; border:none; color:#444; cursor:pointer;
    transition:color .13s;
}
.close-modal:hover { color:var(--primary);}
.cart-items-list {margin-bottom:22px;}
.cart-item {
    display:flex; align-items:center; gap:16px; margin-bottom:17px;
    background:#f7fcfa; border-radius:12px; box-shadow:0 2px 10px rgba(26,188,156,0.06);
    padding:8px 13px 8px 8px;
}
.cart-thumb img {
    width:54px; height:54px; border-radius:8px; object-fit:cover;
    box-shadow:0 2px 7px rgba(26,188,156,0.08);
}
.cart-info { flex:1; }
.cart-name { font-weight:600; font-size:1.06em;}
.cart-price { color:#1abc9c; font-weight:600; font-size:.99em;}
.cart-subtotal { font-size:.96em; color:#555; margin-top:-2px;}
.cart-subtotal span { font-weight:700; color:#1abc9c;}
.cart-remove {
    color:#e74242; font-weight:bold; text-decoration:none;
    font-size:1.7em; padding:0 6px; border-radius:5px;
    transition:background .12s;
    line-height:1;
}
.cart-remove:hover { background:#fee0e0;}
.cart-total-row {
    display:flex; align-items:center; justify-content:space-between;
    font-size:1.11em; font-weight:600; color:#222;
    border-top:1.5px solid #e7e7e7; padding:9px 0 17px 0; margin-bottom:10px;
}
.cart-checkout-form {margin-top:8px;}
.checkout-fields {
    display:flex; flex-direction:column; gap:13px; margin-bottom:18px;
}
.checkout-fields label span {display:block; font-size:.97em; margin-bottom:3px; color:#333;}
.cart-checkout-form input[type="text"], .cart-checkout-form input[type="email"] {
    width:100%; padding:11px; box-sizing:border-box;
    border:1.5px solid var(--border); border-radius:8px; font-size:1.08em;
    background:#f6fafd; transition:border-color .16s;
}
.cart-checkout-form input:focus { border-color:var(--primary);}
.checkout-btn {
    background:linear-gradient(90deg,#1abc9c,#16a085);
    color:#fff; border:none; border-radius:8px;
    padding:15px 0; width:100%; font-size:1.13em;
    font-weight:700; cursor:pointer; transition:background .13s;
    box-shadow:0 2px 8px rgba(26,188,156,0.07);
    letter-spacing:.01em;
}
.checkout-btn:hover { background:linear-gradient(90deg,#16a085,#1abc9c);}
.cart-empty { color:#aaa;font-size:1.07em; text-align:center; margin:38px 0;}
@media (max-width:1200px) {
    .product-list {gap:18px;}
    .produk {width: 47vw; min-width: 160px;}
}
@media (max-width:800px) {
    main {max-width:98vw;}
    .produk {width: 86vw;}
    .modal-cart {width:99vw; border-radius:0;}
}
@media (max-width:600px) {
    header h1 {font-size:1.18em;}
    .produk {width:99vw; min-width:100px;}
    .modal-cart-content {padding:22px 4vw;}
}