/* Design Style 16 — Fresh. Desktop: header bernavigasi, banner intip, sidebar kategori + Cek Pesanan, grid 4 kolom (hover: Top up).
   Mobile: cari di bawah header, kategori bersegmen, grid 3 kolom. Mode terang (bawaan) & gelap. */
:root {
  --s-bg: #ffffff; --s-surface: #ffffff; --s-surface-2: #f4f5f7; --s-ink: #111318; --s-muted: #6b7079; --s-line: #eaecef;
  --s-accent: #7b4dff; --s-accent-rgb: 123, 77, 255; --s-accent-ink: #ffffff;
  --s-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --s-r: 12px; --s-r-lg: 18px; --s-foot-bg: var(--s-surface-2);
}
[data-mode="dark"] { --s-bg: #0f1014; --s-surface: #16171c; --s-surface-2: #1f2128; --s-ink: #f2f3f5; --s-muted: #9a9ca6; --s-line: rgba(255, 255, 255, 0.08); }
.s-btn { --bs-btn-border-radius: 999px; --bs-btn-font-weight: 500; }
.s-btn.btn-sm { min-height: 38px; --bs-btn-padding-x: 1.1rem; }

.s16-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--s-bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--s-line); }
.s16-head-row { display: flex; align-items: center; gap: 1.75rem; height: 68px; }
.s16-logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--s-ink); text-decoration: none; font-weight: 600; font-size: 1.05rem; flex-shrink: 0; }
.s16-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--s-accent); color: var(--s-accent-ink); font-size: 0.78rem; font-weight: 600; }
.s16-nav { gap: 0.25rem; }
.s16-nav-link { color: var(--s-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: 999px; }
.s16-nav-link:hover, .s16-nav-link.active { color: var(--s-ink); background: var(--s-surface-2); }
.s16-search { position: relative; display: flex; align-items: center; flex: 1; max-width: 520px; }
.s16-search i { position: absolute; left: 1rem; color: var(--s-muted); font-size: 0.95rem; }
.s16-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid transparent; background: var(--s-surface-2); color: var(--s-ink); padding: 0 1rem 0 2.6rem; font-size: 0.9rem; outline: none; font-family: inherit; }
.s16-search input::placeholder { color: var(--s-muted); }
.s16-search input:focus { border-color: var(--s-accent); box-shadow: 0 0 0 3px rgba(var(--s-accent-rgb), 0.14); }
.s16-actions { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; margin-left: auto; }
.s16-link { align-items: center; gap: 0.4rem; color: var(--s-ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.s16-link:hover { color: var(--s-accent); }
.s16-peek { padding-top: 1.75rem; --peek-w: min(72%, 1060px); --peek-r: 18px; }

.s16-body { padding-block: 2.25rem 3.5rem; scroll-margin-top: 80px; }
.s16-segs { display: flex; gap: 0.25rem; padding: 4px; margin: 0 auto 1.25rem; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--s-surface-2); border-radius: 999px; }
.s16-seg { flex-shrink: 0; border: 0; background: none; border-radius: 999px; padding: 0.5rem 1rem; font: 500 0.85rem/1 var(--s-font); color: var(--s-muted); }
.s16-seg.active { background: var(--s-surface); color: var(--s-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.s16-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.s16-tile { display: block; color: var(--s-ink); text-decoration: none; }
.s16-tile-img { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--s-surface-2); }
.s16-tile-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 0.25s; }
.s16-tile-name { display: block; margin-top: 0.45rem; font-size: 0.78rem; font-weight: 500; line-height: 1.3; text-align: center; }
.s16-tag { position: absolute; top: 8px; right: 8px; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font-size: 0.625rem; font-weight: 600; }
.s16-go { display: none; }
.s16-more { border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); border-radius: 999px; padding: 0.6rem 1.5rem; font: 500 0.875rem/1 var(--s-font); }
.s16-more:hover { border-color: var(--s-accent); color: var(--s-accent); }
.s16-order { padding: 1rem; border-radius: var(--s-r-lg); background: var(--s-surface-2); }
.s-help { border-radius: 999px; }
.s-bottom a.active { color: var(--s-accent); }

@media (min-width: 768px) { .s16-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; } .s16-tile-name { font-size: 0.875rem; margin-top: 0.6rem; } .s16-tile-img { border-radius: var(--s-r-lg); } }
@media (min-width: 992px) {
  .s16-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-top: 2.75rem; }
  .s16-side { position: sticky; top: 92px; flex-direction: column; gap: 1rem; }
  .s16-side-cats { display: flex; flex-direction: column; gap: 2px; }
  .s16-side-cat { display: flex; align-items: center; gap: 0.75rem; border: 0; background: none; padding: 0.55rem 0.7rem; border-radius: 12px; color: var(--s-muted); font: 500 0.92rem/1 var(--s-font); text-align: left; }
  .s16-side-cat i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--s-surface-2); color: var(--s-ink); font-size: 1rem; }
  .s16-side-cat em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--s-muted); }
  .s16-side-cat:hover { color: var(--s-ink); background: var(--s-surface-2); }
  .s16-side-cat.active { color: var(--s-ink); background: var(--s-surface-2); }
  .s16-side-cat.active i { background: var(--s-accent); color: var(--s-accent-ink); }
  .s16-tile:hover .s16-tile-img img { transform: scale(1.05); }
  .s16-tile:hover .s16-tile-name { color: var(--s-accent); }
  .s16-go { display: block; position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); opacity: 0; padding: 0.4rem 1rem; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font-size: 0.8rem; font-weight: 600; white-space: nowrap; transition: opacity 0.2s, transform 0.2s; }
  .s16-tile:hover .s16-go, .s16-tile:focus-visible .s16-go { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 767.98px) { .s16-head-row { height: 58px; } .s16-peek { padding-top: 0.75rem; --peek-w: 88%; --peek-r: 14px; } .s16-body { padding-top: 1.5rem; } }
/* Kotak Cek Pesanan di sidebar: kolom & tombol bertumpuk supaya tidak terpotong */
.s16-order .s-of-row { flex-direction: column; }
.s16-order .s-of-row .s-btn { width: 100%; }