/* ==========================================================
   Dapur Sehat — tema di atas Bootstrap 5
   ========================================================== */
:root {
  --ds-bg: #FBFAF7;
  --ds-bg-tint: #F1F6EF;
  --ds-text: #2E2A26;
  --ds-text-soft: #5C574F;
  --ds-green: #4C8C5B;
  --ds-green-dark: #3A6E47;
  --ds-orange: #E08A3C;
  --ds-orange-dark: #C9762F;
  --ds-border: #E5E1DA;
  --ds-radius: .85rem;
  --ds-shadow: 0 1px 2px rgba(46, 42, 38, .04), 0 8px 24px rgba(46, 42, 38, .05);

  --bs-body-bg: var(--ds-bg);
  --bs-body-color: var(--ds-text);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-link-color-rgb: 76, 140, 91;
  --bs-border-color: var(--ds-border);
  --bs-pagination-color: var(--ds-green-dark);
  --bs-pagination-active-bg: var(--ds-green);
  --bs-pagination-active-border-color: var(--ds-green);
}

h1, h2, h3, h4, .navbar-brand { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; }
body { -webkit-font-smoothing: antialiased; }

/* ---------- Navbar ---------- */
.ds-navbar { background: #fff; border-bottom: 1px solid var(--ds-border); }
.navbar-brand { color: var(--ds-green-dark); letter-spacing: -.01em; }
.navbar-brand:hover { color: var(--ds-green); }

.ds-navbar .nav-link {
  color: var(--ds-text); font-size: .95rem; padding: .7rem 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-navbar .nav-link.active { color: var(--ds-green-dark); font-weight: 600; }

.ds-navbar-akun { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 0 .5rem; }
.ds-navbar-nama { color: var(--ds-text-soft); font-size: .8125rem; }

@media (min-width: 992px) {
  .ds-navbar .nav-link { padding: .25rem .9rem; border-bottom: 0; border-radius: 999px; }
  .ds-navbar .nav-link.active { background: var(--ds-bg-tint); }
  .ds-navbar-akun { flex-direction: row; align-items: center; padding: 0; }
}

/* ---------- Tombol & form ---------- */
.btn { border-radius: .6rem; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--ds-green);
  --bs-btn-border-color: var(--ds-green);
  --bs-btn-hover-bg: var(--ds-green-dark);
  --bs-btn-hover-border-color: var(--ds-green-dark);
  --bs-btn-active-bg: var(--ds-green-dark);
  --bs-btn-active-border-color: var(--ds-green-dark);
  --bs-btn-disabled-bg: var(--ds-green);
  --bs-btn-disabled-border-color: var(--ds-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--ds-green-dark);
  --bs-btn-border-color: var(--ds-border);
  --bs-btn-hover-bg: var(--ds-green);
  --bs-btn-hover-border-color: var(--ds-green);
  --bs-btn-active-bg: var(--ds-green-dark);
  --bs-btn-active-border-color: var(--ds-green-dark);
}

.form-control { border-radius: .6rem; padding: .6rem .85rem; }
.form-control:focus { border-color: var(--ds-green); box-shadow: 0 0 0 .2rem rgba(76, 140, 91, .15); }
.form-check-input:checked { background-color: var(--ds-green); border-color: var(--ds-green); }

/* ---------- Elemen dasar ---------- */
.ds-card { background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); }
.ds-muted { color: var(--ds-text-soft); }
.ds-badge-vip { background: var(--ds-orange); color: #fff; }
.ds-badge-dasar { background: var(--ds-bg-tint); color: var(--ds-green-dark); border: 1px solid var(--ds-border); }
.ds-footer { border-top: 1px solid var(--ds-border); color: var(--ds-text-soft); font-size: .8125rem; }

.ds-notif {
  display: flex; align-items: center; gap: .6rem;
  background: var(--ds-bg-tint); border: 1px solid #cfe2cd; color: var(--ds-green-dark);
  border-radius: var(--ds-radius); padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1.25rem;
}

.ds-kembali { display: inline-flex; align-items: center; gap: .3rem; color: var(--ds-text-soft); text-decoration: none; font-size: .875rem; }
.ds-kembali:hover { color: var(--ds-green-dark); }

.ds-tag {
  display: inline-block; background: var(--ds-bg-tint); color: var(--ds-green-dark);
  border: 1px solid var(--ds-border); border-radius: 999px; font-size: .7rem; padding: .1rem .5rem;
}
.ds-tag-vip { background: var(--ds-orange); color: #fff; border-color: var(--ds-orange); }

/* ---------- Halaman error ---------- */
.ds-error-body { background: var(--ds-bg); margin: 0; }
.ds-error { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ds-error-kartu {
  width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); padding: 2rem 1.5rem; text-align: center; box-shadow: var(--ds-shadow);
}
.ds-error-brand { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--ds-green-dark); margin-bottom: 1.25rem; }
.ds-error-ikon { font-size: 2.5rem; line-height: 1; margin-bottom: .75rem; }

/* ---------- Chip beranda ---------- */
.ds-chip { display: inline-block; background: var(--ds-green); color: #fff; padding: .45rem 1rem; border-radius: 999px; font-size: .875rem; font-weight: 500; text-decoration: none; }
.ds-chip:hover { background: var(--ds-green-dark); color: #fff; }
.ds-chip-alt { background: var(--ds-orange); }
.ds-chip-alt:hover { background: var(--ds-orange-dark); }

/* ---------- Kartu resep ---------- */
.ds-kartu { background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; color: inherit; transition: box-shadow .15s ease; }
.ds-kartu:hover { box-shadow: var(--ds-shadow); }
.ds-kartu-foto { position: relative; aspect-ratio: 4 / 3; background: var(--ds-bg-tint); display: flex; align-items: center; justify-content: center; }
.ds-kartu-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-kartu-kosong { color: var(--ds-text-soft); font-size: .8125rem; }
.ds-terkunci img { filter: blur(3px) brightness(.8); }
.ds-terkunci::after { content: ""; position: absolute; inset: 0; background: rgba(46, 42, 38, .25); }
.ds-gembok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; z-index: 1; }
.ds-kalori { position: absolute; top: .5rem; right: .5rem; background: var(--ds-orange); color: #fff; font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; z-index: 1; }
.ds-kartu-nama { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; line-height: 1.35; }

/* ---------- Filter aktif ---------- */
.ds-filter-aktif { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-lepas { display: inline-flex; align-items: center; gap: .35rem; background: var(--ds-bg-tint); color: var(--ds-green-dark); border: 1px solid var(--ds-border); border-radius: 999px; padding: .3rem .75rem; font-size: .8125rem; text-decoration: none; }
.ds-lepas:hover { background: #e7f0e4; color: var(--ds-green-dark); }
.ds-lepas span[aria-hidden] { font-size: 1rem; line-height: 1; opacity: .7; }
.ds-lepas-alt { background: #FBEEE0; color: var(--ds-orange-dark); border-color: #F2DCC4; }
.ds-lepas-semua { background: transparent; border-style: dashed; color: var(--ds-text-soft); }

/* ---------- Tombol melayang ---------- */
.ds-tombol-filter, .ds-aksi-bawah {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1030;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--ds-green); color: #fff; border: 0; border-radius: 999px;
  padding: .7rem 1.35rem; font-weight: 600; font-size: .9rem; line-height: 1;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 8px 24px rgba(46, 42, 38, .25);
}
.ds-tombol-filter:active, .ds-aksi-bawah:active { background: var(--ds-green-dark); color: #fff; }
.ds-aksi-bawah:hover { color: #fff; }

.ds-hitung { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--ds-orange); color: #fff; font-size: .75rem; font-weight: 700; }

@media (max-width: 991.98px) { main { padding-bottom: 6rem !important; } }
@media (min-width: 992px) {
  .ds-aksi-bawah { position: static; transform: none; box-shadow: none; margin-top: 1.5rem; }
}

/* ---------- Panel filter HP ---------- */
.ds-panel { --bs-offcanvas-width: min(86vw, 400px); background: #fff; border-left: 1px solid var(--ds-border); }
.ds-panel-form { display: flex; flex-direction: column; height: 100%; }
.ds-panel-header { flex: 0 0 auto; display: flex; align-items: center; padding: 1rem 1.25rem; padding-top: calc(1rem + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--ds-border); }
.ds-laci-legend { font-size: .8125rem; font-weight: 600; color: var(--ds-text-soft); margin-bottom: .6rem; }
.ds-panel-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 1.25rem;
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(46, 42, 38, .14), rgba(46, 42, 38, 0)) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(46, 42, 38, .14), rgba(46, 42, 38, 0)) bottom / 100% 10px no-repeat scroll;
}
.ds-panel-footer { flex: 0 0 auto; display: flex; gap: .5rem; padding: .875rem 1.25rem calc(.875rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ds-border); background: #fff; }

.ds-pil-grup { display: flex; flex-wrap: wrap; gap: .5rem; }
.ds-pil-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ds-pil { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--ds-border); border-radius: 999px; background: #fff; color: var(--ds-text); font-size: .9375rem; line-height: 1.2; cursor: pointer; user-select: none; }
.ds-pil::before { content: ""; width: 0; margin-right: 0; }
.ds-pil-input:checked + .ds-pil { background: var(--ds-green); border-color: var(--ds-green); color: #fff; font-weight: 600; }
.ds-pil-input:checked + .ds-pil::before { content: "✓"; width: .85rem; margin-right: .4rem; font-size: .8rem; }
.ds-pil-input:checked + .ds-pil-alt { background: var(--ds-orange); border-color: var(--ds-orange); }
.ds-pil-input:focus-visible + .ds-pil { outline: 2px solid var(--ds-green-dark); outline-offset: 2px; }

/* ---------- Detail resep ---------- */
.ds-foto-detail { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ds-radius); }
.ds-daftar-bahan, .ds-daftar-langkah, .ds-daftar-fitur { padding-left: 1.25rem; }
.ds-daftar-bahan li, .ds-daftar-langkah li, .ds-daftar-fitur li { margin-bottom: .5rem; }
.ds-catatan { background: var(--ds-bg-tint); border-left: 3px solid var(--ds-orange); border-radius: .5rem; font-size: .9rem; color: var(--ds-text-soft); }

/* ==========================================================
   Meal planner
   ========================================================== */
.ds-vip-head { margin-bottom: 1.25rem; }

.ds-minggu { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--ds-border); border-radius: 999px; padding: .4rem; margin-bottom: .75rem; }
.ds-minggu-nav { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ds-green-dark); background: var(--ds-bg-tint); text-decoration: none; }
.ds-minggu-nav:hover { background: #e4efe2; color: var(--ds-green-dark); }
.ds-minggu-teks { flex: 1 1 auto; text-align: center; line-height: 1.25; }
.ds-minggu-judul { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; margin: 0; }
.ds-minggu-sub { font-size: .75rem; color: var(--ds-text-soft); margin: 0; }

.ds-progres { height: 6px; border-radius: 999px; background: var(--ds-border); overflow: hidden; margin-bottom: 1.5rem; }
.ds-progres span { display: block; height: 100%; background: var(--ds-green); border-radius: 999px; }

.ds-hari { height: 100%; background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: .35rem .9rem .9rem; }
.ds-hari-aktif { border-color: var(--ds-green); box-shadow: 0 0 0 3px rgba(76, 140, 91, .08); }
.ds-hari-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 0 .6rem; }
.ds-hari-tgl { flex: 0 0 auto; width: 44px; height: 44px; border-radius: .7rem; background: var(--ds-bg-tint); color: var(--ds-green-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ds-hari-aktif .ds-hari-tgl { background: var(--ds-green); color: #fff; }
.ds-hari-dd { font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.ds-hari-nn { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; }
.ds-hari-judul { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; }
.ds-hari-sub { font-size: .75rem; color: var(--ds-text-soft); }
.ds-hari-kalori { flex: 0 0 auto; font-size: .7rem; font-weight: 600; color: var(--ds-orange-dark); background: #FBEEE0; border-radius: 999px; padding: .2rem .55rem; }

.ds-slot { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; margin-top: .4rem; border-radius: .7rem; background: var(--ds-bg); border: 1px solid transparent; border-left: 3px solid var(--ds-border); text-decoration: none; color: inherit; }
.ds-slot-sarapan { border-left-color: #F0B775; }
.ds-slot-siang { border-left-color: var(--ds-green); }
.ds-slot-malam { border-left-color: var(--ds-green-dark); }
.ds-slot-isi { flex: 1 1 auto; min-width: 0; display: block; text-decoration: none; color: inherit; }
.ds-slot-label { display: block; font-size: .6875rem; font-weight: 600; color: var(--ds-text-soft); text-transform: uppercase; letter-spacing: .04em; }
.ds-slot-nama { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; color: var(--ds-text); margin-top: .1rem; }
.ds-slot-meta { display: block; font-size: .75rem; color: var(--ds-text-soft); margin-top: .1rem; }
.ds-slot-ajakan { display: block; font-size: .875rem; color: var(--ds-green-dark); margin-top: .15rem; }
.ds-slot-kosong { background: transparent; border: 1px dashed var(--ds-border); border-left: 3px solid var(--ds-border); }
.ds-slot-kosong:hover { background: var(--ds-bg-tint); }
.ds-slot-plus { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-bg-tint); color: var(--ds-green-dark); }
.ds-slot-hapus { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: .5rem; background: transparent; color: #B9B2A8; display: inline-flex; align-items: center; justify-content: center; }
.ds-slot-hapus:hover { background: #F7EDE6; color: var(--ds-orange-dark); }

/* ---------- Halaman pilih resep ---------- */
.ds-konteks { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: .75rem .9rem; }
.ds-konteks-slot { font-size: .75rem; font-weight: 700; color: var(--ds-green-dark); background: var(--ds-bg-tint); border-radius: 999px; padding: .25rem .7rem; }
.ds-konteks-tgl { font-size: .875rem; color: var(--ds-text-soft); }

.ds-pil-scroll { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ds-pil-scroll::-webkit-scrollbar { display: none; }
.ds-pil-tautan { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: .4rem .9rem; border: 1px solid var(--ds-border); border-radius: 999px; background: #fff; color: var(--ds-text); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.ds-pil-tautan.aktif { background: var(--ds-green); border-color: var(--ds-green); color: #fff; font-weight: 600; }

.ds-daftar-pilih { background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; }
.ds-pilih-form + .ds-pilih-form .ds-baris-pilih { border-top: 1px solid var(--ds-border); }

.ds-baris-pilih { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; }
.ds-baris-teks { flex: 1 1 auto; min-width: 0; }
.ds-baris-nama { color: var(--ds-text); font-weight: 600; font-size: .95rem; line-height: 1.3; margin: 0; }
.ds-baris-meta { font-size: .75rem; color: var(--ds-text-soft); margin: .15rem 0 0; }
.ds-baris-tag { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 0; }

.ds-baris-aksi {
  flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: 0;
  font-size: .8125rem; font-weight: 600; color: #fff; background: var(--ds-green);
  border-radius: 999px; padding: .5rem 1.1rem; min-height: 38px;
}
.ds-baris-aksi:hover { background: var(--ds-green-dark); }

/* ---------- Daftar belanja ---------- */
.ds-ringkas { display: flex; align-items: center; gap: 1.25rem; background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: .9rem 1.1rem; }
.ds-ringkas-angka { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1; margin: 0; color: var(--ds-green-dark); }
.ds-ringkas-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-text-soft); margin: .2rem 0 0; }
.ds-ringkas-tgl { margin-left: auto; text-align: right; font-size: .8125rem; }

.ds-belanja { list-style: none; margin: 0; padding: 0; }
.ds-belanja li { display: flex; align-items: flex-start; gap: .85rem; padding: .85rem 1rem; border-bottom: 1px solid var(--ds-border); }
.ds-belanja li:last-child { border-bottom: 0; }
.ds-belanja label { cursor: pointer; flex: 1 1 auto; min-width: 0; }

.ds-centang { flex: 0 0 auto; appearance: none; -webkit-appearance: none; margin-top: .15rem; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--ds-border); border-radius: 999px; background: #fff; cursor: pointer; position: relative; }
.ds-centang:checked { background: var(--ds-green); border-color: var(--ds-green); }
.ds-centang:checked::after { content: ""; position: absolute; left: .45rem; top: .2rem; width: .32rem; height: .62rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ds-centang:focus-visible { outline: 2px solid var(--ds-green-dark); outline-offset: 2px; }

.ds-belanja-baris { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.ds-belanja-jumlah { font-size: .75rem; font-weight: 700; color: var(--ds-green-dark); background: var(--ds-bg-tint); border-radius: .4rem; padding: .1rem .45rem; }
.ds-belanja-nama { font-weight: 600; font-size: .95rem; }
.ds-belanja-dari { display: block; font-size: .75rem; color: var(--ds-text-soft); margin-top: .2rem; }
.ds-centang:checked + label .ds-belanja-nama,
.ds-centang:checked + label .ds-belanja-jumlah { text-decoration: line-through; color: var(--ds-text-soft); }
.ds-centang:checked + label { opacity: .65; }

/* Asal-usul daftar belanja */
.ds-sumber { background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; }
.ds-sumber > summary { cursor: pointer; padding: .85rem 1rem; font-size: .875rem; font-weight: 600; color: var(--ds-green-dark); list-style: none; }
.ds-sumber > summary::-webkit-details-marker { display: none; }
.ds-sumber > summary::after { content: "▾"; float: right; opacity: .6; }
.ds-sumber[open] > summary { border-bottom: 1px solid var(--ds-border); }
.ds-sumber[open] > summary::after { content: "▴"; }
.ds-sumber-isi { padding: .5rem 1rem 1rem; }
.ds-sumber-hari { padding: .6rem 0; border-bottom: 1px dashed var(--ds-border); }
.ds-sumber-hari:last-child { border-bottom: 0; }
.ds-sumber-tgl { font-weight: 600; font-size: .8125rem; margin: 0 0 .3rem; }
.ds-sumber-baris { font-size: .8125rem; color: var(--ds-text); margin: 0 0 .2rem; }
.ds-sumber-slot { display: inline-block; min-width: 82px; color: var(--ds-text-soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ---------- Tracker 30 hari ---------- */
.ds-ringkas-per { font-size: .9rem; font-weight: 600; color: var(--ds-text-soft); }

.ds-tracker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}
@media (min-width: 576px) { .ds-tracker { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ds-tracker { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

.ds-hari-kotak {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--ds-border); border-radius: .7rem;
  background: #fff; color: var(--ds-text); line-height: 1;
}
.ds-hari-ke { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .95rem; }
.ds-hari-tanggal { font-size: .625rem; color: var(--ds-text-soft); }
.ds-hari-centang { font-size: .95rem; }

.ds-hari-selesai { background: var(--ds-green); border-color: var(--ds-green); color: #fff; }
.ds-hari-selesai .ds-hari-tanggal { color: rgba(255, 255, 255, .8); }
.ds-hari-sekarang { box-shadow: 0 0 0 2px rgba(224, 138, 60, .55); }
.ds-hari-terkunci { background: var(--ds-bg); border-style: dashed; opacity: .55; }

/* Tombol unduh PDF */
.ds-unduh {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--ds-border); border-radius: 999px;
  background: #fff; color: var(--ds-green-dark);
  padding: .45rem 1rem; font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.ds-unduh:hover { background: var(--ds-bg-tint); color: var(--ds-green-dark); }


/* ---------- Baris aksi (tombol sekunder berdampingan) ---------- */
.ds-aksi-baris { display: flex; gap: .5rem; }

.ds-aksi-tombol {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 42px; padding: 0 .9rem;
  border: 1px solid var(--ds-border); border-radius: .65rem;
  background: #fff; color: var(--ds-green-dark);
  font-size: .8125rem; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none;
}
.ds-aksi-tombol:hover { background: var(--ds-bg-tint); color: var(--ds-green-dark); }
.ds-aksi-tombol svg { flex: 0 0 auto; }

.ds-aksi-utama { background: var(--ds-green); border-color: var(--ds-green); color: #fff; }
.ds-aksi-utama:hover { background: var(--ds-green-dark); border-color: var(--ds-green-dark); color: #fff; }

@media (min-width: 576px) {
  .ds-aksi-baris { justify-content: flex-start; }
  .ds-aksi-tombol { flex: 0 0 auto; }
}

/* Ringkasan: tiga angka sejajar, tanpa tombol di dalamnya */
.ds-ringkas { gap: 1.75rem; }
.ds-ringkas > div { min-width: 0; }
.ds-ringkas-label { white-space: nowrap; }

/* Tombol unduh polos (dipakai di beranda) dibuat lebih ringkas */
.ds-unduh { padding: .4rem .9rem; font-size: .8125rem; white-space: nowrap; }


/* ---------- Meal planner ---------- */
.ds-hari-ini { border-color: var(--ds-green); box-shadow: 0 0 0 1px var(--ds-green) inset; }

.ds-slot { padding: .6rem 0; border-top: 1px dashed var(--ds-border); }
.ds-slot:first-of-type { border-top: 0; padding-top: 0; }
.ds-slot-label { font-size: .75rem; font-weight: 600; color: var(--ds-text-soft); }
.ds-slot-resep { font-weight: 500; color: var(--ds-text); }

.ds-slot-kosong {
  display: block;
  padding: .55rem .75rem;
  border: 1px dashed var(--ds-border);
  border-radius: .5rem;
  background: var(--ds-bg);
  color: var(--ds-green-dark);
  font-size: .875rem;
  text-decoration: none;
  text-align: center;
}
.ds-slot-kosong:hover { background: var(--ds-bg-tint); color: var(--ds-green-dark); }

.ds-slot-hapus {
  border: 0;
  background: transparent;
  color: var(--ds-text-soft);
  font-size: 1.25rem;
  line-height: 1;
  padding: .1rem .4rem;
  border-radius: .35rem;
}
.ds-slot-hapus:hover { background: var(--ds-bg-tint); color: var(--ds-orange-dark); }

/* Daftar resep saat memilih menu */
.ds-baris-resep {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ds-border);
}
.ds-baris-resep:last-child { border-bottom: 0; }

.ds-pil-tautan {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .9rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-text);
  font-size: .875rem;
  text-decoration: none;
}
.ds-pil-tautan.aktif { background: var(--ds-green); border-color: var(--ds-green); color: #fff; font-weight: 600; }

/* Daftar belanja */
.ds-belanja { list-style: none; margin: 0; padding: 0; }
.ds-belanja li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-belanja li:last-child { border-bottom: 0; }
.ds-belanja .form-check-input { margin-top: .25rem; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.ds-belanja label { cursor: pointer; }
.ds-belanja .form-check-input:checked + label .ds-belanja-nama {
  text-decoration: line-through;
  color: var(--ds-text-soft);
}


/* ---------- Info gizi di halaman detail resep ---------- */
.ds-gizi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.ds-gizi-item {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: .7rem;
  padding: .75rem .5rem;
  text-align: center;
}
.ds-gizi-angka {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  margin: 0;
  color: var(--ds-green-dark);
}
.ds-gizi-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ds-text-soft);
  margin: .3rem 0 0;
}


/* ---------- Ringkasan gizi di kartu resep ---------- */
.ds-kartu-isi { padding: .75rem .8rem .85rem; }

.ds-kartu-gizi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: .55rem;
  overflow: hidden;
  margin-bottom: .55rem;
}
.ds-kartu-gizi > div {
  padding: .35rem .1rem;
  text-align: center;
  border-left: 1px solid var(--ds-border);
  min-width: 0;
}
.ds-kartu-gizi > div:first-child { border-left: 0; }

.ds-gz-angka {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.1;
  color: var(--ds-green-dark);
}
.ds-gz-label {
  display: block;
  font-size: .5625rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  margin-top: .1rem;
}

.ds-kartu-tag { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Penanda VIP dipindah ke foto karena badge kalori sudah tidak dipakai */
.ds-label-vip {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  background: var(--ds-orange);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 999px;
}

@media (min-width: 992px) {
  .ds-gz-angka { font-size: .875rem; }
  .ds-gz-label { font-size: .625rem; }
}


/* ---------- Statistik di foto kartu resep ---------- */
.ds-stat {
  position: absolute;
  bottom: .45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: rgba(30, 27, 24, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  line-height: 1;
}
.ds-stat-kiri { left: .45rem; }
.ds-stat-kanan { right: .45rem; }
.ds-stat svg { opacity: .9; }

/* Label VIP dipindah ke atas supaya tidak bertabrakan dengan statistik */
.ds-label-vip {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  background: var(--ds-orange);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 999px;
}

/* Nomor peringkat di halaman Menu Favorit */
.ds-peringkat {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--ds-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .75rem;
  box-shadow: 0 2px 8px rgba(46, 42, 38, .25);
}

@media (min-width: 992px) {
  .ds-stat { font-size: .7rem; padding: .25rem .55rem; }
}


/* ---------- Mitos atau Fakta ---------- */
.ds-skor {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: .9rem 1.1rem;
}
.ds-skor-angka {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  margin: 0;
  color: var(--ds-green-dark);
}
.ds-skor-per { font-size: .9rem; font-weight: 600; color: var(--ds-text-soft); }
.ds-skor-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-soft);
  margin: .2rem 0 0;
}

.ds-mf {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 1rem 1.1rem;
  margin-bottom: .85rem;
  scroll-margin-top: 5rem;
}
.ds-mf-kategori {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-text-soft);
  background: var(--ds-bg);
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .6rem;
}
.ds-mf-klaim {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 0 .9rem;
}

.ds-mf-tombol { display: flex; gap: .5rem; }
.ds-mf-tombol form { flex: 1 1 0; }
.ds-mf-pilih {
  width: 100%;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ds-border);
  border-radius: .65rem;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-weight: 600;
  font-size: .9rem;
}
.ds-mf-pilih:hover { background: var(--ds-bg-tint); border-color: var(--ds-green); color: var(--ds-green-dark); }

.ds-mf-hasil { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ds-mf-status {
  font-size: .75rem;
  font-weight: 700;
  padding: .28rem .75rem;
  border-radius: 999px;
  color: #fff;
}
.ds-mf-mitos { background: #C0563F; }
.ds-mf-fakta { background: var(--ds-green); }
.ds-mf-setengah-benar { background: var(--ds-orange); }

.ds-mf-tebakan { font-size: .8rem; font-weight: 600; }
.ds-mf-tebakan.tepat { color: var(--ds-green-dark); }
.ds-mf-tebakan.meleset { color: var(--ds-text-soft); }

.ds-mf-penjelasan { font-size: .925rem; line-height: 1.6; margin: 0 0 .6rem; }

.ds-mf-detail { border-top: 1px dashed var(--ds-border); padding-top: .6rem; }
.ds-mf-detail > summary {
  cursor: pointer;
  list-style: none;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ds-green-dark);
}
.ds-mf-detail > summary::-webkit-details-marker { display: none; }
.ds-mf-detail > summary::after { content: " ▾"; opacity: .6; }
.ds-mf-detail[open] > summary::after { content: " ▴"; }
.ds-mf-detail-isi { padding-top: .6rem; font-size: .875rem; line-height: 1.6; }


/* ---------- Kalkulator TDEE ---------- */
.ds-tdee-hasil {
  background: #fff;
  border: 1px solid var(--ds-green);
  border-radius: var(--ds-radius);
  overflow: hidden;
}
.ds-tdee-utama {
  background: var(--ds-bg-tint);
  padding: 1.1rem 1rem;
  text-align: center;
}
.ds-tdee-angka {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  margin: 0;
  color: var(--ds-green-dark);
}
.ds-tdee-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-soft);
  margin: .35rem 0 0;
}
.ds-tdee-rincian { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-tdee-rincian > div {
  padding: .75rem .5rem;
  text-align: center;
  border-left: 1px solid var(--ds-border);
}
.ds-tdee-rincian > div:first-child { border-left: 0; }
.ds-tdee-kecil {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ds-text);
}
.ds-tdee-ket {
  display: block;
  font-size: .625rem;
  line-height: 1.3;
  color: var(--ds-text-soft);
  margin-top: .25rem;
}

/* ---------- Target kalori di meal planner ---------- */
.ds-target {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.ds-target-teks { flex: 1 1 auto; min-width: 0; font-size: .8125rem; color: var(--ds-text-soft); }
.ds-target-teks strong { color: var(--ds-text); }

.ds-hari-bar { height: 5px; border-radius: 999px; background: var(--ds-border); overflow: hidden; margin: .1rem 0 .25rem; }
.ds-hari-bar span { display: block; height: 100%; background: var(--ds-green); border-radius: 999px; }
.ds-hari-bar.lebih span { background: var(--ds-orange); }
.ds-hari-target { font-size: .65rem; color: var(--ds-text-soft); }

/* ---------- Pilihan urutan di halaman jelajah ---------- */
.ds-urut { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ds-urut-label { font-size: .75rem; color: var(--ds-text-soft); }
.ds-urut-tautan {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .75rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ds-text);
  font-size: .8125rem;
  text-decoration: none;
}
.ds-urut-tautan.aktif { background: var(--ds-green); border-color: var(--ds-green); color: #fff; font-weight: 600; }


/* ---------- Paket menu siap pakai ---------- */
.ds-paket {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.ds-paket:hover { box-shadow: var(--ds-shadow); color: inherit; }

.ds-paket-label {
  display: inline-block;
  background: var(--ds-bg-tint);
  color: var(--ds-green-dark);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .6rem;
  margin-bottom: .5rem;
}
.ds-paket-nama {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0 0 .35rem;
}
.ds-paket-desk { font-size: .8125rem; color: var(--ds-text-soft); margin: 0 0 .75rem; }

.ds-paket-angka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: .6rem;
  overflow: hidden;
}
.ds-paket-angka > div { padding: .45rem .2rem; text-align: center; border-left: 1px solid var(--ds-border); }
.ds-paket-angka > div:first-child { border-left: 0; }
.ds-paket-n {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ds-green-dark);
}
.ds-paket-l {
  display: block;
  font-size: .5625rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ds-text-soft);
  margin-top: .1rem;
}
.ds-paket-untuk { font-size: .75rem; color: var(--ds-text-soft); margin: .6rem 0 0; }


/* ---------- Akordeon hari di detail paket menu ---------- */
.ds-akor {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  margin-bottom: .6rem;
  overflow: hidden;
}
.ds-akor > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  cursor: pointer;
  list-style: none;
}
.ds-akor > summary::-webkit-details-marker { display: none; }
.ds-akor > summary:hover { background: var(--ds-bg); }

.ds-akor-hari {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: .65rem;
  background: var(--ds-bg-tint);
  color: var(--ds-green-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ds-akor-hari-ket { font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.ds-akor-hari-no { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; }

.ds-akor-teks { flex: 1 1 auto; min-width: 0; }
.ds-akor-nama {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
}
.ds-akor-ringkas { display: block; font-size: .75rem; color: var(--ds-text-soft); margin-top: .15rem; }

.ds-akor-panah {
  flex: 0 0 auto;
  color: var(--ds-text-soft);
  display: inline-flex;
  transition: transform .15s ease;
}
.ds-akor[open] > summary { border-bottom: 1px solid var(--ds-border); background: var(--ds-bg); }
.ds-akor[open] .ds-akor-panah { transform: rotate(180deg); }

.ds-akor-isi { padding: .5rem .85rem .85rem; }
.ds-akor-isi .ds-slot:first-child { margin-top: .5rem; }


/* ---------- Daftar fitur di halaman upgrade VIP ---------- */
.ds-fitur-vip { list-style: none; margin: 0; padding: 0; }
.ds-fitur-vip li {
  display: flex;
  gap: .85rem;
  padding: .9rem 0;
  border-bottom: 1px dashed var(--ds-border);
}
.ds-fitur-vip li:first-child { padding-top: 0; }
.ds-fitur-vip li:last-child { border-bottom: 0; padding-bottom: 0; }
.ds-fitur-no {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--ds-bg-tint);
  color: var(--ds-green-dark);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .75rem;
}
.ds-fitur-vip b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.ds-fitur-vip p { margin: 0; font-size: .875rem; color: var(--ds-text-soft); line-height: 1.6; }