/* ==========================================================================
   MBG Marketplace - tata letak antarmuka (CodeIgniter 3)
   ========================================================================== */
:root{
  /* ---- Palet resmi Badan Gizi Nasional ---- */
  --bgn-biru:#071e49;    /* biru gelap    - kebijaksanaan, stabilitas, kepercayaan */
  --bgn-hijau:#92d05d;   /* hijau terang  - pertumbuhan, kesehatan, keseimbangan */
  --bgn-pastel:#b5e0ea;  /* biru pastel   - ketenangan, harapan, keterbukaan */
  --bgn-emas:#d1b06c;    /* emas          - kualitas dan kemuliaan */

  --utama:#071e49; --utama-tua:#041530; --utama-muda:#e8f0f8;
  --aksen:#92d05d; --aksen-tua:#4f8a1e; --aksen-muda:#eaf6dd;
  --pastel:#b5e0ea; --emas:#d1b06c;
  --teks:#1b2430; --teks-lembut:#5c6b7a; --garis:#d9e1ea; --latar:#f5f7fa;
  --kuning:#9a7226; --merah:#c0392b; --biru:#2b6cb0; --abu:#6b7280;
  --radius:12px; --bayang:0 1px 3px rgba(9,24,45,.08), 0 8px 24px rgba(9,24,45,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--teks); background:var(--latar); line-height:1.55; font-size:15px;
}
a{color:var(--utama); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5rem}
h1{font-size:2rem} h2{font-size:1.4rem} h3{font-size:1.1rem}
p{margin:0 0 .8rem}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 18px}

/* ---- topbar ---- */
.topbar{background:#fff; border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:30}
.topbar-dalam{display:flex; align-items:center; gap:18px; min-height:64px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.merek{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--teks)}
.merek:hover{text-decoration:none}
.merek-tanda{background:var(--utama); color:#fff; padding:4px 9px; border-radius:8px; letter-spacing:.5px}
.merek-teks{color:var(--teks-lembut); font-weight:600}
.navigasi{display:flex; gap:4px; flex-wrap:wrap; flex:1}
.navigasi a{color:var(--teks-lembut); padding:7px 11px; border-radius:8px; font-weight:500; font-size:.92rem}
.navigasi a:hover{background:var(--utama-muda); color:var(--utama-tua); text-decoration:none}
.navigasi a.aktif{background:var(--utama-muda); color:var(--utama-tua)}
.akun{display:flex; gap:8px; align-items:center}

/* ---- tombol ---- */
.tombol{
  display:inline-block; background:var(--utama); color:#fff; border:1px solid var(--utama);
  padding:9px 16px; border-radius:9px; font-weight:600; font-size:.92rem; cursor:pointer;
  text-align:center; transition:.15s;
}
.tombol:hover{background:var(--utama-tua); border-color:var(--utama-tua); color:#fff; text-decoration:none}
.tombol-garis{background:#fff; color:var(--utama-tua); border-color:var(--garis)}
.tombol-garis:hover{background:var(--utama-muda); color:var(--utama-tua)}
.tombol-kecil{padding:6px 12px; font-size:.85rem}
.tombol-bahaya{background:var(--merah); border-color:var(--merah)}
.tombol-bahaya:hover{background:#96291f; border-color:#96291f}
.tombol-abu{background:#fff; color:var(--teks); border-color:var(--garis)}
.tombol-abu:hover{background:#eff2f6; color:var(--teks)}
.tombol-lebar{width:100%}
.tombol[disabled],.tombol.disabled{opacity:.5; cursor:not-allowed}

/* ---- utama ---- */
.utama{padding:26px 18px 60px; min-height:60vh}
.halaman-kepala{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.halaman-kepala p{margin:0; color:var(--teks-lembut)}
.kepala-aksi{display:flex; gap:8px; flex-wrap:wrap}

/* ---- kartu ---- */
.kartu{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:20px; box-shadow:var(--bayang)}
.kartu + .kartu{margin-top:18px}
.kartu-judul{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.kartu-judul h2,.kartu-judul h3{margin:0}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---- statistik ---- */
.stat{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:16px 18px}
.stat small{display:block; color:var(--teks-lembut); font-size:.82rem; text-transform:uppercase; letter-spacing:.4px}
.stat strong{font-size:1.5rem; display:block; margin-top:4px}
.stat .satuan{font-size:.85rem; color:var(--teks-lembut)}

/* ---- badge ---- */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.76rem; font-weight:600; white-space:nowrap}
.badge-hijau{background:var(--aksen-muda); color:var(--aksen-tua)}
.badge-kuning{background:#f7edd8; color:#7d5a10}
.badge-merah{background:#fde3e0; color:#a0261a}
.badge-biru{background:#e2eefb; color:#20528c}
.badge-abu{background:#eef1f5; color:#66707c}

/* ---- peringatan ---- */
.peringatan{padding:12px 16px; border-radius:10px; margin-bottom:16px; border:1px solid transparent; font-size:.93rem}
.peringatan-hijau{background:var(--aksen-muda); border-color:#cbe8ae; color:var(--aksen-tua)}
.peringatan-merah{background:#fdeceb; border-color:#f3c3bd; color:#9c2a1e}
.peringatan-kuning{background:#faf3e3; border-color:#e8d9b0; color:#7d5a10}
.peringatan-biru{background:#eaf2fb; border-color:#c3d8f0; color:#20528c}

/* ---- tabel ---- */
.tabel-bungkus{overflow-x:auto}
table.tabel{width:100%; border-collapse:collapse; background:#fff; font-size:.92rem}
table.tabel th,table.tabel td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--garis); vertical-align:middle}
table.tabel th{background:#f4f7fb; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--teks-lembut)}
table.tabel tbody tr:hover{background:#fafbfd}
table.tabel td.angka,table.tabel th.angka{text-align:right}
.kosong{padding:30px; text-align:center; color:var(--teks-lembut)}

/* ---- formulir ---- */
.form-baris{margin-bottom:15px}
.form-baris label{display:block; font-weight:600; margin-bottom:5px; font-size:.9rem}
.form-baris .petunjuk{font-size:.82rem; color:var(--teks-lembut); margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],input[type=url],select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--garis); border-radius:9px;
  font-size:.95rem; font-family:inherit; background:#fff; color:var(--teks);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--utama); box-shadow:0 0 0 3px rgba(7,30,73,.16)}
.form-petunjuk-bawah{font-size:.82rem; color:var(--teks-lembut)}
.galat-kecil{color:var(--merah); font-size:.85rem; margin-top:4px}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}
.form-aksi{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}
fieldset{border:1px solid var(--garis); border-radius:var(--radius); padding:16px; margin:0 0 18px}
legend{font-weight:700; padding:0 8px; color:var(--utama-tua)}

/* ---- filter ---- */
.filter{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px}
.filter .form-baris{margin:0; min-width:150px; flex:0 0 auto}
.filter .filter-cari{flex:1 1 240px}

/* ---- katalog ---- */
.produk-kartu{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--bayang)}
.produk-gambar{aspect-ratio:4/3; background:var(--utama-muda); display:block; overflow:hidden}
.produk-gambar img{width:100%; height:100%; object-fit:cover; display:block}
.produk-isi{padding:14px; display:flex; flex-direction:column; gap:6px; flex:1}
.produk-nama{font-weight:600; line-height:1.3; color:var(--teks)}
.produk-penyedia{font-size:.82rem; color:var(--teks-lembut)}
.produk-harga{font-size:1.1rem; font-weight:700; color:var(--utama-tua); margin-top:auto}
.produk-meta{display:flex; justify-content:space-between; gap:8px; font-size:.82rem; color:var(--teks-lembut); flex-wrap:wrap}
.plafon-lewat{color:var(--merah); font-weight:600}

/* ---- keranjang ---- */
.ringkasan-baris{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--garis)}
.ringkasan-baris:last-child{border-bottom:none}
.ringkasan-total{font-size:1.25rem; font-weight:700; color:var(--utama-tua)}
.jumlah-mini{width:90px; display:inline-block}

/* ---- timeline ---- */
.timeline{list-style:none; padding:0; margin:0}
.timeline li{position:relative; padding:0 0 16px 24px; border-left:2px solid var(--garis)}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--utama); border:2px solid #fff}
.timeline .waktu{font-size:.8rem; color:var(--teks-lembut)}

/* ---- langkah escrow ---- */
.alur{list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; font-size:.85rem}
.alur li{background:#fff; border:1px solid var(--garis); border-radius:999px; padding:5px 12px; color:var(--teks-lembut)}
.alur li.aktif{background:var(--utama); border-color:var(--utama); color:#fff; font-weight:600}

/* ---- paginasi ---- */
.paginasi ul{list-style:none; display:flex; gap:6px; padding:0; margin:22px 0 0; flex-wrap:wrap}
.paginasi li a,.paginasi li span{display:block; padding:7px 12px; border:1px solid var(--garis); border-radius:8px; background:#fff; color:var(--teks-lembut)}
.paginasi li a:hover{background:var(--utama-muda); text-decoration:none}
.paginasi li.aktif span{background:var(--utama); border-color:var(--utama); color:#fff; font-weight:600}

/* ---- landing ---- */
.hero{background:linear-gradient(150deg,#041530,#071e49 55%,#123a6b); color:#fff; padding:64px 0 72px; border-radius:0 0 26px 26px}
.hero h1{font-size:2.6rem; max-width:760px; color:#fff}
.hero p{font-size:1.1rem; max-width:640px; color:#dbe6f4}
.hero-aksi{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero .tombol{background:#fff; color:var(--utama-tua); border-color:#fff}
.hero .tombol:hover{background:#ecf2fa}
.hero .tombol-garis{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.hero .tombol-garis:hover{background:rgba(255,255,255,.14); color:#fff}
.hero-angka{display:flex; gap:34px; flex-wrap:wrap; margin-top:34px}
.hero-angka div strong{display:block; font-size:1.7rem}
.hero-angka div small{color:#c9dcf0}
.bagian{padding:56px 0}
.bagian-abu{background:#fff; border-top:1px solid var(--garis); border-bottom:1px solid var(--garis)}
.pilar{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:22px}
.pilar .ikon{width:42px; height:42px; border-radius:11px; background:var(--utama-muda); color:var(--utama-tua); display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; margin-bottom:12px}
.peran{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.peran{grid-template-columns:1fr}}
.peran .kartu h3{color:var(--utama-tua)}
.daftar-fitur{list-style:none; padding:0; margin:0}
.daftar-fitur li{padding:6px 0 6px 26px; position:relative}
.daftar-fitur li::before{content:"\2713"; position:absolute; left:0; color:var(--utama); font-weight:700}
.faq{border-bottom:1px solid var(--garis); padding:14px 0}
.faq summary{cursor:pointer; font-weight:600}

/* ---- footer ---- */
.kaki{background:#061634; color:#c8dccE; margin-top:40px; padding:34px 0 18px}
.kaki strong{color:#fff}
.kaki p{color:#a9bcd2; margin:6px 0 0; max-width:460px}
.kaki-dalam{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.kaki-tautan{display:flex; gap:18px; align-items:flex-start}
.kaki-tautan a{color:#d3e0ee}
.kaki-bawah{border-top:1px solid rgba(255,255,255,.12); margin-top:22px; padding-top:14px; font-size:.82rem; color:#8ba0b8}

/* ---- lain ---- */
.teks-kanan{text-align:right}
.teks-tengah{text-align:center}
.teks-lembut{color:var(--teks-lembut)}
.teks-kecil{font-size:.85rem}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.pemisah{border-top:1px solid var(--garis); margin:18px 0}
.kolom-sempit{max-width:460px; margin:40px auto}
.avatar-lingkar{width:38px;height:38px;border-radius:50%;background:var(--utama-muda);color:var(--utama-tua);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.daftar-dokumen{list-style:none; padding:0; margin:0}
.daftar-dokumen li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--garis); flex-wrap:wrap}

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */
.hero-baru{padding:56px 0 64px; background:linear-gradient(150deg,#041530,#0b2c57 48%,#071e49); color:#fff; border-radius:0 0 30px 30px}
.hero-bagi{display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center}
@media(max-width:900px){.hero-bagi{grid-template-columns:1fr; gap:34px}}
.hero-lencana{display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#e9f0f9; padding:5px 13px; border-radius:999px; font-size:.8rem; margin-bottom:16px}
.hero-kiri h1{font-size:2.7rem; color:#fff; max-width:640px; letter-spacing:-.4px}
.hero-kiri h1 em{font-style:normal; color:#b6e39a}
.hero-kiri p{color:#d6e1f0; font-size:1.08rem; max-width:560px}
.hero-baru .hero-aksi{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero-baru .tombol{background:#fff; color:var(--utama-tua); border-color:#fff}
.hero-baru .tombol:hover{background:#ecf2fa; color:var(--utama-tua)}
.hero-baru .tombol-garis{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.hero-baru .tombol-garis:hover{background:rgba(255,255,255,.14); color:#fff}
.hero-poin{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:8px}
.hero-poin li{position:relative; padding-left:26px; color:#d6e1f0; font-size:.95rem}
.hero-poin li::before{content:'\2713'; position:absolute; left:0; color:#a9de7f; font-weight:700}
.hero-kanan{position:relative}
.hero-catatan{color:#a9bcd2; font-size:.8rem; text-align:right; margin:12px 0 0}
@media(max-width:900px){.hero-catatan{text-align:left}}
.mock-kartu{background:#fff; color:var(--teks); border-radius:18px; padding:18px; box-shadow:0 26px 60px rgba(0,0,0,.3); max-width:430px; margin-left:auto}
@media(max-width:900px){.mock-kartu{margin-left:0}}
.mock-kepala{display:flex; align-items:center; gap:6px; padding-bottom:12px; border-bottom:1px solid var(--garis); margin-bottom:14px}
.mock-dot{width:9px; height:9px; border-radius:50%; background:#d9e1ea}
.mock-judul{margin-left:8px; font-size:.78rem; color:var(--teks-lembut); font-weight:600}
.mock-baris{display:flex; align-items:center; gap:12px}
.mock-baris img{width:54px; height:54px; border-radius:10px; object-fit:cover; background:var(--utama-muda)}
.mock-baris strong{display:block; font-size:.95rem}
.mock-baris span{font-size:.78rem; color:var(--teks-lembut)}
.mock-baris b{margin-left:auto; color:var(--utama-tua); white-space:nowrap}
.mock-lencana{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0}
.mock-alur{list-style:none; padding:0; margin:0; font-size:.86rem}
.mock-alur li{position:relative; padding:6px 0 6px 26px; color:var(--teks-lembut); margin-left:9px; border-left:2px solid var(--garis)}
.mock-alur li:last-child{border-left-color:transparent}
.mock-alur li::before{content:''; position:absolute; left:-7px; top:12px; width:10px; height:10px; border-radius:50%; background:#d9e1ea; border:2px solid #fff}
.mock-alur li.selesai{color:var(--teks)}
.mock-alur li.selesai::before{background:var(--utama)}
.mock-kaki{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--garis); margin-top:14px; padding-top:12px; font-size:.85rem; color:var(--teks-lembut)}
.mock-kaki strong{font-size:1.15rem; color:var(--utama-tua)}
.pita-angka{background:#fff; border-bottom:1px solid var(--garis)}
.pita-angka-dalam{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:24px 18px; text-align:center}
@media(max-width:820px){.pita-angka-dalam{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pita-angka-dalam strong{display:block; font-size:1.55rem; color:var(--utama-tua)}
.pita-angka-dalam small{color:var(--teks-lembut); font-size:.78rem}
.kepala-bagian{max-width:760px; margin-bottom:26px}
.kepala-bagian.teks-tengah{margin-left:auto; margin-right:auto}
.kepala-bagian h2{font-size:1.75rem}
.kepala-bagian.mb-0{margin-bottom:0}
.ikon-pilar{width:46px; height:46px; border-radius:12px; background:var(--utama-muda); color:var(--utama-tua); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; margin-bottom:12px; letter-spacing:.5px}
.langkah{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; counter-reset:langkah}
@media(max-width:820px){.langkah{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.langkah{grid-template-columns:1fr}}
.langkah-kartu{background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:20px; box-shadow:var(--bayang)}
.langkah-kartu::before{counter-increment:langkah; content:counter(langkah); display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--utama); color:#fff; font-weight:700; margin-bottom:10px}
.langkah-kartu h3{margin-bottom:6px}
.kendali-harga{align-items:start}
.angka-plafon{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:center}
.angka-plafon strong{display:block; font-size:1.4rem; color:var(--utama-tua)}
.angka-plafon small{color:var(--teks-lembut); font-size:.78rem}
.kategori-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media(max-width:900px){.kategori-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kategori-kartu{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:12px; color:var(--teks); box-shadow:var(--bayang)}
.kategori-kartu:hover{text-decoration:none; border-color:var(--utama)}
.kategori-kartu img{width:54px; height:54px; border-radius:10px; object-fit:cover; background:var(--utama-muda); flex:0 0 auto}
.kategori-kartu strong{display:block; font-size:.95rem; line-height:1.3}
.kategori-kartu span span{font-size:.8rem; color:var(--teks-lembut)}
.kategori-kosong{width:54px; height:54px; border-radius:10px; background:var(--utama-muda); color:var(--utama-tua); display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto}
.penyedia-kartu{display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:16px; box-shadow:var(--bayang)}
.penyedia-kartu img{width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--utama-muda); flex:0 0 auto}
.cta-pita{background:linear-gradient(135deg,#041530,#071e49); border-radius:20px; padding:34px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; box-shadow:var(--bayang)}
.cta-pita h2{color:#fff; margin:0 0 6px}
.cta-pita p{color:#d6e1f0; margin:0; max-width:620px}
.cta-pita .tombol{background:#fff; color:var(--utama-tua); border-color:#fff}
.cta-pita .tombol:hover{background:#ecf2fa; color:var(--utama-tua)}