@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root { --navy:#071f59; --navy-2:#102d6f; --blue:#1e7fc1; --yellow:#f7bd32; --cream:#fffaf0; --ink:#11223f; --muted:#61708a; --line:#e5e9f0; --green:#17845d; --red:#bc3a42; --paper:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:'Plus Jakarta Sans',Arial,sans-serif; background:#f5f7fb; }
a { color:var(--navy-2); text-decoration:none; font-weight:700; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
/* Atribut `hidden` bawaan HTML hanya diberi display:none oleh gaya bawaan
   peramban, sehingga SETIAP aturan penulis yang menyebut display
   mengalahkannya — .button{display:inline-flex} dan .photo-grid{display:grid}
   membuat elemen ber-`hidden` tetap terlihat sampai skripnya menyala. Tombol
   dan panel yang dirender `hidden` di proyek ini mengandalkan aturan ini. */
[hidden] { display:none!important; }
h1,h2,h3,p { margin-top:0; }
.public-body { min-height:100vh; position:relative; overflow-x:hidden; background:radial-gradient(600px 660px at 103% -3%,#ffe08a 0 16%,#f8c93f 38%,rgba(248,201,63,.40) 62%,rgba(248,201,63,0) 100%),linear-gradient(148deg,#1b3f95 0 17%,#0d2a68 17% 44%,#f2f4f8 44%); }
.menu-page { max-width:560px; margin:0 auto; padding:30px 16px 24px; position:relative; z-index:2; }
.public-hero { color:#fff; padding:14px 8px 28px; position:relative; z-index:2; }

.hero-topline,.eyebrow { color:#278ebf; font-size:.72rem; font-weight:900; letter-spacing:.09em; }
.hero-topline { color:#f9d470; position:relative; z-index:1; }
.spark { color:var(--yellow); font-size:1.1rem; }
.public-hero h1 { font-family:Nunito,sans-serif; position:relative; z-index:1; margin:12px 0 8px; font-size:2.15rem; line-height:1.14; letter-spacing:-.05em; font-weight:900; }
.public-hero mark { display:inline-block; background:var(--yellow); padding:1px 8px; color:var(--navy); border-radius:7px; line-height:1.02; }
.public-hero p { position:relative; z-index:1; margin:0; color:#dbe8ff; font-size:.86rem; max-width:260px; line-height:1.45; }
.menu-card { background:var(--paper); border-radius:24px; padding:21px; box-shadow:0 18px 40px rgb(9 27 73 / 19%); }
.card-header { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.card-header .eyebrow { margin-bottom:5px; color:#2499b8; }
.card-header h2 { margin:0; font-family:Nunito,sans-serif; font-size:1.45rem; line-height:1.1; }
.plate-icon { height:45px; width:45px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:var(--yellow); font-size:1.45rem; }
.context-pills { display:flex; flex-wrap:wrap; gap:7px; margin:15px 0; }
.context-pills span { font-size:.72rem; font-weight:800; padding:7px 9px; border-radius:8px; background:#eef7ff; color:#345477; }
.date-strip { display:grid; grid-template-columns:1fr; margin:18px 0; border:1px solid #dae1ec; border-radius:14px; overflow:hidden; }
.date-strip>div { align-items:center; display:flex; gap:10px; padding:11px 12px; }
.date-strip>div+div { border-top:1px solid #dae1ec; }
.date-strip>div>span { font-size:1rem; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--navy); }
.date-strip p { margin:0; font-size:.72rem; font-weight:800; line-height:1.15; }
.date-strip small { display:block; color:var(--navy); margin-top:3px; font-size:.78rem; }
.menu-name-block { background:#fffdf7; border:1px solid #f3e2b6; border-radius:14px; padding:15px; }
.menu-name-block .eyebrow { color:#a07104; margin-bottom:5px; }
.menu-name-block h3 { font-family:Nunito,sans-serif; font-size:1.25rem; line-height:1.15; margin:0 0 6px; }
.menu-name-block p:last-child { color:#57657c; font-size:.82rem; line-height:1.45; margin:0; }
.notice { background:#fff0c7; border-radius:13px; color:#5b471c; display:flex; gap:10px; padding:12px; margin:17px 0; font-size:.74rem; line-height:1.4; }
.notice span { font-weight:900; font-size:1.1rem; }
.notice p { margin:0; }
.section-title { display:flex; align-items:center; justify-content:space-between; font-family:Nunito,sans-serif; font-weight:900; font-size:1.03rem; margin:20px 0 10px; }
.section-title small { border-radius:99px; background:#eef2ff; color:#45609c; font-family:'Plus Jakarta Sans',sans-serif; font-size:.65rem; padding:5px 8px; }
.nutrition-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.nutrient { border:1px solid #e8ecf3; border-radius:13px; padding:10px; min-height:73px; display:flex; gap:8px; align-items:flex-start; background:#fff; }
.nutrient:first-child { grid-column:span 2; background:#fffaf0; border-color:#f7d477; }
.nutrient>span { height:26px; width:26px; flex:none; border-radius:50%; display:grid; place-items:center; background:#e8efff; color:var(--navy); font-weight:900; font-size:.8rem; }
.nutrient.energy>span { background:#f8c641; color:#60450a; }.nutrient.protein>span { background:#ffdde1; color:#bf3643; }.nutrient.fat>span { background:#ffe9ae; color:#aa7600; }.nutrient.carbs>span { background:#e0f0d3; color:#5c962f; }.nutrient.fiber>span { background:#d7f0dd; color:#318253; }
.nutrient p { margin:0; color:#596579; font-size:.68rem; font-weight:700; line-height:1.05; }
.nutrient strong { display:block; color:var(--ink); font-family:Nunito,sans-serif; font-size:1.22rem; line-height:1.1; margin-top:4px; }.nutrient strong small { font-family:'Plus Jakarta Sans',sans-serif; font-size:.62rem; }
.micronutrients { display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }.micronutrients span { background:#edf7f3; color:#2e6e53; border-radius:8px; font-size:.72rem; padding:8px 9px; }.micronutrients b { margin-left:5px; }
.allergen,.menu-notes { margin:13px 0 0; padding:11px 12px; background:#fff6f6; border-left:3px solid #dc5e61; color:#7a4249; font-size:.75rem; line-height:1.45; }.menu-notes { background:#f4f8fd; border-left-color:#72a5d5; color:#48617e; }
/* aspect-ratio memesan ruangnya sebelum berkas foto selesai diunduh, supaya
   halaman tidak melompat di tengah pembacaan saat sinyal lambat. */
/* ---- Geseran foto: scroll-snap, tanpa satu baris JavaScript ---- */
/* scrollbar disembunyikan supaya di desktop tidak muncul batang abu-abu di
   bawah foto; gerakannya sendiri tetap bekerja lewat jari maupun roda tetikus. */
.photo-slider { margin:0; }
.photo-track { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.photo-track::-webkit-scrollbar { display:none; }
.photo-slide { position:relative; flex:0 0 100%; margin:0; scroll-snap-align:center; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#eef1f6; }
.photo-open { display:block; position:relative; }
.photo-slide img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }

/* Panah geser. Tautan biasa ke id foto tetangga — peramban menggulirkan wadah
   ber-overflow terdekat, jadi ini benar-benar berpindah foto tanpa skrip.
   Ukurannya 36px: di bawah itu meleset terus saat diketuk ibu jari. */
.photo-arrow { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgb(7 31 89 / .58); color:#fff; }
.photo-arrow svg { width:19px; height:19px; }
.photo-arrow.prev { left:8px; }
.photo-arrow.next { right:8px; }
.photo-arrow:hover { background:rgb(7 31 89 / .82); }
.photo-arrow:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.photo-counter { position:absolute; top:9px; left:9px; border-radius:99px; background:rgb(7 31 89 / .58); color:#fff; font-size:.66rem; font-weight:800; padding:4px 9px; }
/* Lencana kaca pembesar: satu-satunya petunjuk bahwa foto bisa diketuk. Tanpa
   itu tidak ada yang menyangka gambar di halaman informasi bisa dibuka penuh. */
.photo-zoom { position:absolute; right:9px; top:9px; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:rgb(7 31 89 / .72); color:#fff; }
.photo-zoom svg { width:16px; height:16px; }
.photo-dots { display:flex; justify-content:center; gap:5px; margin-top:9px; }
.photo-dots span { width:6px; height:6px; border-radius:50%; background:#c8d2e2; }
.photo-hint { text-align:center; color:var(--muted); font-size:.7rem; margin:8px 0 0; }

/* ---- Penampil layar penuh lewat :target ---- */
/* Tersembunyi sampai alamatnya menunjuk ke sini, lalu menutupi seluruh layar.
   Elemen ini WAJIB hidup di luar panel porsi: :target di dalam elemen
   ber-display:none tidak akan pernah tampil. */
.photo-viewer { display:none; position:fixed; inset:0; z-index:60; background:rgb(4 12 34 / .95); padding:52px 12px 24px; }
.photo-viewer:target { display:block; }
.photo-viewer-sheet { display:grid; place-items:center; width:100%; height:100%; }
/* object-fit:contain — inilah "melihat gambar secara menyeluruh": tidak ada
   sisi yang terpotong, berbeda dengan pratinjau di geserannya. */
.photo-viewer-sheet img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.photo-viewer-close { position:absolute; top:12px; right:14px; color:#fff; background:rgb(255 255 255 / .16); border-radius:99px; padding:8px 14px; font-size:.78rem; }
/* Tab porsi. Radio disembunyikan lewat clip, bukan display:none, supaya tetap
   dapat difokus dari papan ketik. Aturan :nth-of-type di bawah hanya menjangkau
   delapan porsi; lihat komentar di public/menu.blade.php soal kelas `tabbed`. */
.portion-tabs { position:relative; }
.portion-radio { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
.portion-tablist { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:7px; margin:18px 0 3px; }
.portion-tablist label { cursor:pointer; text-align:center; line-height:1.2; border:1px solid #dce3ee; border-radius:11px; padding:10px 8px; background:#f7f9fd; color:#4a5b76; font-size:.73rem; font-weight:800; transition:background .12s,color .12s,border-color .12s; }
.portion-tablist label:hover { border-color:#b9c8e2; }
.portion-tabs.tabbed .portion-panel { display:none; }
.portion-panel+.portion-panel { margin-top:22px; padding-top:20px; border-top:1px dashed var(--line); }
.portion-tabs.tabbed .portion-panel+.portion-panel { margin-top:0; padding-top:0; border-top:0; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(1):checked~.portion-panels>.portion-panel:nth-child(1) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(1):checked~.portion-tablist>label:nth-child(1) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(1):focus-visible~.portion-tablist>label:nth-child(1) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(2):checked~.portion-panels>.portion-panel:nth-child(2) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(2):checked~.portion-tablist>label:nth-child(2) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(2):focus-visible~.portion-tablist>label:nth-child(2) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(3):checked~.portion-panels>.portion-panel:nth-child(3) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(3):checked~.portion-tablist>label:nth-child(3) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(3):focus-visible~.portion-tablist>label:nth-child(3) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(4):checked~.portion-panels>.portion-panel:nth-child(4) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(4):checked~.portion-tablist>label:nth-child(4) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(4):focus-visible~.portion-tablist>label:nth-child(4) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(5):checked~.portion-panels>.portion-panel:nth-child(5) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(5):checked~.portion-tablist>label:nth-child(5) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(5):focus-visible~.portion-tablist>label:nth-child(5) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(6):checked~.portion-panels>.portion-panel:nth-child(6) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(6):checked~.portion-tablist>label:nth-child(6) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(6):focus-visible~.portion-tablist>label:nth-child(6) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(7):checked~.portion-panels>.portion-panel:nth-child(7) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(7):checked~.portion-tablist>label:nth-child(7) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(7):focus-visible~.portion-tablist>label:nth-child(7) { outline:2px solid #316ab7; outline-offset:2px; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(8):checked~.portion-panels>.portion-panel:nth-child(8) { display:block; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(8):checked~.portion-tablist>label:nth-child(8) { background:var(--navy); border-color:var(--navy); color:#fff; }
.portion-tabs.tabbed>.portion-radio:nth-of-type(8):focus-visible~.portion-tablist>label:nth-child(8) { outline:2px solid #316ab7; outline-offset:2px; }
.empty-menu { padding:23px 8px 8px; text-align:center; }.empty-icon { color:var(--yellow); background:var(--navy); border-radius:50%; width:50px; height:50px; display:grid; place-items:center; margin:0 auto 11px; font-size:2rem; }.empty-menu h3 { font-family:Nunito,sans-serif; font-size:1.25rem; margin-bottom:5px; }.empty-menu p { color:var(--muted); font-size:.83rem; line-height:1.5; }
.public-footer { text-align:center; font-size:.75rem; color:#e8f0ff; margin:19px 0 0; line-height:1.5; }

.login-page { min-height:100vh; padding:24px; display:grid; place-items:center; background:linear-gradient(135deg,#071f59,#16458c); }.login-card { width:min(100%,420px); border-radius:24px; padding:30px; background:#fff; box-shadow:0 20px 55px rgb(0 0 0 / .22); }.login-badge { width:45px; height:45px; display:block; object-fit:contain; }.login-card .eyebrow { margin:18px 0 7px; }.login-card h1 { font-family:Nunito,sans-serif; font-size:2rem; line-height:1; letter-spacing:-.04em; margin-bottom:13px; }.muted { color:var(--muted); font-size:.84rem; line-height:1.5; }

.admin-body { background:#f4f6fb; min-height:100vh; }.admin-header { height:66px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }.brand { color:#fff; display:flex; gap:10px; align-items:center; }/* Logo BGN, dulu lambang ✦ di atas kotak kuning. Kotak kuningnya dibuang: logo
   ini sudah punya cincin emas sendiri, dan latar kuning di belakangnya membuat
   lingkaran itu tampak seperti tertempel di stiker. Ukurannya tetap 30px seperti
   lambang yang digantikannya, jadi tinggi header tidak bergeser. */
.brand-mark { width:30px; height:30px; flex:none; object-fit:contain; }.brand b { display:block; letter-spacing:.05em; font-size:.83rem; }.brand small { display:block; color:#b8c8ed; font-size:.6rem; margin-top:2px; }.account { display:flex; align-items:center; gap:9px; font-size:.76rem; }.account em { font-style:normal; padding:4px 7px; border-radius:99px; background:#284985; color:#dce8ff; font-size:.62rem; }.text-button { border:0; background:transparent; color:#fff; text-decoration:underline; font-weight:700; padding:4px; }.admin-shell { max-width:1450px; margin:auto; display:grid; grid-template-columns:210px minmax(0,1fr); min-height:calc(100vh - 66px); }.admin-nav { padding:25px 15px; border-right:1px solid #e1e5ef; background:#fbfcff; }.admin-nav a { display:block; padding:10px 12px; margin-bottom:3px; border-radius:9px; color:#52627c; font-size:.8rem; }.admin-nav a.active,.admin-nav a:hover { background:#e8efff; color:var(--navy); }.admin-nav p { color:#97a2b7; font-size:.63rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:23px 12px 6px; }.admin-main { width:min(100%,1120px); margin:0 auto; padding:34px 30px; }.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:25px; }.page-heading.compact { margin-bottom:18px; }.page-heading .eyebrow { margin-bottom:6px; }.page-heading h1 { margin-bottom:6px; font-family:Nunito,sans-serif; font-size:1.75rem; letter-spacing:-.04em; line-height:1.1; }.page-heading .muted { margin:0; }
.button { border:0; border-radius:9px; padding:10px 13px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.75rem; white-space:nowrap; }.button.primary { background:var(--navy); color:#fff; box-shadow:0 4px 8px rgb(7 31 89 / .15); }.button.primary:hover { background:#133574; }.button.secondary { border:1px solid #ced7e6; color:#3e5374; background:#fff; }.button.wide { width:100%; }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }.stat-card { display:flex; align-items:center; gap:11px; border-radius:14px; padding:15px; background:#eaf0ff; color:#264477; }.stat-card>span { width:34px; height:34px; display:grid; place-items:center; background:var(--navy); border-radius:10px; color:#fff; }.stat-card p { margin:0; font-size:.73rem; font-weight:700; }.stat-card strong { font-family:Nunito,sans-serif; font-size:1.5rem; line-height:1; display:block; color:var(--navy); }.stat-card.green { background:#e7f5ee; color:#296c55; }.stat-card.green>span { background:var(--green); }.stat-card.green strong { color:#176748; }.stat-card.yellow { background:#fff7dc; color:#80620b; }.stat-card.yellow>span { background:#d79b0c; }.stat-card.yellow strong { color:#876006; }
.panel { background:#fff; border:1px solid #e5e9f0; border-radius:15px; overflow:hidden; }.panel-heading { padding:17px 19px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1px solid #edf0f5; }.panel-heading h2,.form-panel h2 { margin:0 0 4px; font-family:Nunito,sans-serif; font-size:1.12rem; }.panel-heading p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.4; }.panel-heading>a { font-size:.75rem; white-space:nowrap; }.empty-state { padding:30px 20px; text-align:center; }.empty-state b { font-family:Nunito,sans-serif; font-size:1.05rem; }.empty-state p { margin:6px auto 0; color:var(--muted); font-size:.8rem; line-height:1.5; max-width:450px; }.table-wrap { overflow-x:auto; }.table-wrap table { width:100%; border-collapse:collapse; min-width:610px; }.table-wrap th { background:#fbfcff; color:#8190a9; text-align:left; font-size:.65rem; letter-spacing:.04em; text-transform:uppercase; padding:10px 15px; }.table-wrap td { border-top:1px solid #edf0f4; padding:12px 15px; color:#44536c; font-size:.77rem; }.table-wrap b { color:var(--ink); font-size:.78rem; }.table-wrap small,.plain-list small { color:var(--muted); display:block; font-size:.68rem; margin-top:3px; }.status,.role { display:inline-block; border-radius:99px; font-size:.65rem; font-weight:800; padding:4px 8px; }.status.published,.role.superadmin { background:#e5f5ec; color:#15714c; }.status.draft,.role.petugas { background:#fff4d4; color:#8c6508; }.actions { display:flex; gap:8px; align-items:center; }.link-button { border:0; padding:0; background:none; color:#194d92; font-size:.75rem; font-weight:800; }
.date-filter { display:flex; align-items:flex-end; gap:9px; margin-bottom:16px; }.date-filter label { display:grid; gap:5px; color:#53627b; font-size:.73rem; font-weight:700; }.editor-form { display:grid; gap:16px; }.form-panel { padding:20px; overflow:visible; }.form-panel>h2 { margin-bottom:17px; }/* align-items:start supaya tiap sel setinggi isinya sendiri. Tanpa itu sel
   yang pendek ikut meregang mengikuti sel tertinggi di barisnya — kolom
   tanggal jadi setinggi kolom sebelahnya yang punya tombol konfirmasi. */
.form-grid { display:grid; gap:14px; align-items:start; }.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-grid.nutrition-inputs { grid-template-columns:repeat(5,minmax(0,1fr)); }.form-panel>label,.form-grid label,.stack-form label { display:grid; gap:6px; color:#43536c; font-size:.74rem; font-weight:800; }.required { color:#b62639; } input,select,textarea { width:100%; background:#fff; color:var(--ink); border:1px solid #cfd7e4; border-radius:8px; padding:9px 10px; outline:none; font-size:.8rem; transition:border .15s,box-shadow .15s; } textarea { resize:vertical; line-height:1.4; } input:focus,select:focus,textarea:focus { border-color:#316ab7; box-shadow:0 0 0 3px rgb(49 106 183 / .13); }.form-panel>label { margin-top:14px; }.form-hint { color:var(--muted); font-size:.73rem; margin:13px 0 0; line-height:1.45; }.form-actions { display:flex; gap:10px; justify-content:flex-end; }.stack-form { display:grid; gap:13px; }.check { display:flex!important; align-items:center; gap:7px; font-size:.75rem!important; }.check input { width:auto; }.alert { border-radius:10px; padding:11px 13px; margin:0 0 17px; font-size:.76rem; line-height:1.45; }.alert.success { color:#146345; background:#e6f6ed; border:1px solid #c7ead6; }.alert.error { color:#8f343c; background:#fff0f1; border:1px solid #f0c8cc; }.alert ul { margin:6px 0 0; padding-left:18px; }.split-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; align-items:start; }.plain-list { padding:0; margin:20px -20px -20px; list-style:none; border-top:1px solid #edf0f5; }.plain-list li { padding:12px 20px; border-bottom:1px solid #edf0f5; color:#45556e; font-size:.78rem; }.users-layout { grid-template-columns:minmax(270px,.8fr) minmax(0,1.4fr); }.qr-list { display:grid; }.qr-row { display:grid; grid-template-columns:115px minmax(0,1fr) auto; gap:16px; align-items:center; padding:17px; border-top:1px solid #edf0f5; }.qr-row:first-child { border-top:0; }.qr-row.inactive { opacity:.6; background:#fbfcff; }.qr-row img { width:104px; height:104px; border:1px solid #e5e9f0; border-radius:6px; }.qr-info h2 { margin:0 0 5px; font-family:Nunito,sans-serif; font-size:1.1rem; }.qr-info p { margin:4px 0; font-size:.77rem; }.qr-info code { display:block; font-size:.63rem; margin-top:8px; color:#687793; overflow-wrap:anywhere; }.qr-actions { display:flex; align-items:flex-end; flex-direction:column; gap:7px; }.qr-actions form { margin:0; }
.portion-form { border-top:3px solid var(--navy); }
.portion-form-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.portion-form-head h2 { margin:0; font-family:Nunito,sans-serif; font-size:1.12rem; }
.portion-desc { margin-top:6px!important; }
.portion-jump { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:#7b88a0; font-size:.71rem; font-weight:800; }
.portion-jump a { background:#e8efff; color:var(--navy); border-radius:99px; padding:6px 11px; font-size:.71rem; }
.portion-jump a:hover { background:#d8e4ff; }
.portion-chip { display:inline-block; background:#eef4ff; color:#33507e; border-radius:7px; padding:4px 7px; margin:2px 3px 2px 0; font-size:.68rem; font-weight:800; }
@media (max-width:760px) { .admin-header { padding:0 16px; }.account>span { display:none; }.admin-shell { display:block; }.admin-nav { display:flex; overflow:auto; gap:5px; padding:10px 13px; border-right:0; border-bottom:1px solid #e1e5ef; white-space:nowrap; }.admin-nav a { display:inline-block; margin:0; }.admin-nav p { display:none; }.admin-main { padding:22px 15px; }.page-heading { align-items:flex-start; }.page-heading h1 { font-size:1.5rem; }.stat-grid { grid-template-columns:1fr; gap:9px; }.stat-card { padding:12px; }.form-grid.two,.split-panels,.users-layout { grid-template-columns:1fr; }.form-grid.nutrition-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }.panel-heading { padding:15px; }.form-panel { padding:16px; }.qr-row { grid-template-columns:88px minmax(0,1fr); gap:11px; }.qr-row img { width:80px; height:80px; }.qr-actions { grid-column:1/-1; align-items:flex-start; flex-direction:row; flex-wrap:wrap; }.public-body { background:linear-gradient(150deg,#071f59 0 300px,#f4f6fa 300px); }.menu-page { padding:23px 12px 20px; }.menu-card { padding:17px; border-radius:20px; }.public-hero { padding-bottom:23px; }.public-hero h1 { font-size:1.92rem; } }
@media (max-width:410px) { .page-heading { flex-direction:column; gap:10px; }.page-heading .button { align-self:stretch; }.form-actions { justify-content:stretch; }.form-actions .button { flex:1; padding:10px 6px; }.account em { display:none; }.brand small { display:none; }.nutrition-grid { gap:7px; }.nutrient { padding:8px; }.nutrient p { font-size:.63rem; }.nutrient strong { font-size:1.07rem; } }

/* ================= Identitas visual halaman publik ================= */
/* Logo BGN mendampingi judul, tingginya mengikuti dua baris judul. */
.hero-title { display:flex; align-items:center; gap:14px; margin:11px 0 10px; position:relative; z-index:1; }
.hero-logo { width:74px; height:74px; flex:none; object-fit:contain; filter:drop-shadow(0 4px 10px rgb(3 14 44 / .45)); }
.public-hero .hero-title h1 { margin:0; }

/* Ornamen dekoratif. pointer-events:none supaya tidak pernah menghalangi
   sentuhan pada kartu, dan seluruhnya di bawah konten (z-index 0). */
.page-decor { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ornament { position:absolute; display:block; }

/* Tiga ornamen putih di sisi kanan header. brightness(0) invert(1) mengubah
   PNG biru-emas menjadi siluet putih bersih tanpa perlu berkas kedua. */
.ornament-a, .ornament-b, .ornament-c { filter:brightness(0) invert(1); }
.ornament-a { width:56px;  top:34px; left:calc(50% + 73px);  opacity:.92; }
.ornament-b { width:71px;  top:30px; left:calc(50% + 148px); opacity:.95; }
.ornament-c { width:123px; top:4px;  left:calc(50% + 263px); opacity:1; }

/* Ornamen besar berwarna di sisi kanan, sejajar bagian atas kartu. */
.ornament-d { width:228px; top:332px; left:calc(50% + 287px); opacity:.97; }

@media (max-width:1180px) {
    .ornament-c { width:118px; left:calc(50% + 250px); }
    .ornament-d { width:210px; left:calc(50% + 300px); top:400px; }
}

/* Di ponsel — jalur utama pemakaian — ornamen dikecilkan dan digeser ke luar
   kolom teks supaya judul tetap terbaca jelas. */
@media (max-width:760px) {
    .hero-logo { width:58px; height:58px; }
    .hero-title { gap:11px; margin:9px 0 8px; }
    .ornament-a { display:none; }
    .ornament-b { width:58px; top:16px; left:auto; right:-14px; opacity:.5; }
    .ornament-c { width:92px; top:74px; left:auto; right:-40px; opacity:.32; }
    .ornament-d { display:none; }
}

/* ================= Ikon jam pada strip tanggal ================= */
/* Digambar, bukan emoji: emoji jam tampil berbeda-beda di tiap ponsel dan
   sebagian menjadi lingkaran kecil tanpa jarum yang tidak terbaca sebagai
   "waktu" sama sekali. SVG ini sama di semua perangkat. */
.date-strip .strip-icon { width:17px; height:17px; display:block; color:var(--yellow); }

/* ================= Penilaian bintang di halaman publik ================= */
/* Tanpa JavaScript, sama seperti tab porsi. Tiap bintang adalah tombol kirim
   tersendiri; urutannya di HTML terbalik (5 lebih dulu) lalu dibalik lagi oleh
   row-reverse. Itulah yang membuat efek "terisi sampai yang disentuh" mungkin:
   pemilih `~` hanya menjangkau saudara sesudahnya, dan dengan urutan terbalik
   "sesudahnya" berarti bintang bernilai lebih kecil. */
/* Kotaknya senada dengan kotak "terima kasih" yang menggantikannya setelah
   dinilai, jadi bagian halaman ini tidak berpindah tempat di mata pembaca.
   Bintang kosong dibuat kuning pucat, bukan abu-abu: di layar ponsel yang
   dilihat sambil makan, abu-abu terbaca sebagai hiasan yang mati, bukan
   sebagai sesuatu yang bisa diketuk. */
.rating-form { text-align:center; background:#fffdf7; border:1px solid #f3e2b6; border-radius:14px; padding:15px 12px; }
.rating-stars { display:flex; flex-direction:row-reverse; justify-content:center; gap:2px; }
.rating-stars button { border:0; background:transparent; padding:4px 6px; font-size:2.5rem; line-height:1; color:#e3cf95; transition:color .12s,transform .12s; }
.rating-stars button:hover, .rating-stars button:hover ~ button,
.rating-stars button:focus-visible, .rating-stars button:focus-visible ~ button { color:var(--yellow); }
.rating-stars button:hover { transform:scale(1.1); }
.rating-stars button:focus-visible { outline:2px solid #316ab7; outline-offset:2px; border-radius:6px; }
.rating-hint { color:#8a7a52; font-size:.72rem; margin:8px 0 0; }
.rating-done { text-align:center; background:#fffdf7; border:1px solid #f3e2b6; border-radius:14px; padding:16px; }
.rating-stars-static { font-size:1.75rem; line-height:1; color:#e4e9f1; letter-spacing:3px; }
.rating-stars-static .on { color:var(--yellow); }
.rating-done p { margin:9px 0 0; font-size:.84rem; }
.rating-done .rating-average { color:var(--muted); font-size:.75rem; margin-top:5px; }

/* ================= Rekap penilaian di admin ================= */
/* Diagram dibuat dari elemen biasa, bukan pustaka grafik: satu-satunya angka
   yang berubah adalah lebar dan tinggi dalam persen, dan halaman admin pun
   sampai sekarang tidak memuat satu berkas skrip. */
.bar-chart { display:grid; gap:9px; margin-top:8px; }
.bar-row { display:grid; grid-template-columns:38px minmax(0,1fr) 88px; align-items:center; gap:10px; }
.bar-label { font-size:.74rem; font-weight:800; color:#43536c; }
/* display:block wajib: elemennya <span>, dan pada span inline properti
   height diabaikan sama sekali — batangnya lalu meninggi mengikuti isi
   dan meluber keluar kartu. Di dalam .bar-row hal itu tidak terlihat
   karena grid mem-blockify anaknya sendiri. */
.bar-track { display:block; background:#eef1f7; border-radius:99px; height:16px; overflow:hidden; }
.bar-fill { display:block; height:100%; border-radius:99px; min-width:2px; background:var(--navy); }
.bar-fill.s5 { background:#17845d; }
.bar-fill.s4 { background:#57a06d; }
.bar-fill.s3 { background:#d79b0c; }
.bar-fill.s2 { background:#dd7a3a; }
.bar-fill.s1 { background:#bc3a42; }
.bar-value { text-align:right; font-size:.76rem; font-weight:800; color:var(--ink); }
.bar-value small { display:block; color:var(--muted); font-weight:700; font-size:.66rem; margin-top:2px; }

/* Perbandingan antar porsi — bagian yang paling sering dibaca kepala dapur,
   jadi diletakkan paling atas dan diberi ruang paling lega. */
.stat-grid-four { grid-template-columns:repeat(4,1fr); }
.portion-compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); gap:13px; margin-top:12px; }
.portion-score { border:1px solid var(--line); border-radius:13px; padding:14px; background:#fbfcff; }
.portion-score-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.portion-score-head b { font-size:.85rem; }
.portion-score-value { font-family:Nunito,sans-serif; font-size:1.5rem; font-weight:900; line-height:1; color:var(--navy); }
.portion-score-meta { margin:9px 0 0; color:var(--muted); font-size:.7rem; line-height:1.45; }
.mini-spread { display:flex; gap:3px; margin-top:9px; }

/* Rincian per hari sebagai daftar, bukan tabel: tiap hari memuat beberapa baris
   porsi, dan tabel bersarang di layar selebar 1120px selalu berakhir sempit. */
.day-list { display:grid; }
.day-entry { padding:16px 19px; border-top:1px solid #edf0f5; }
.day-entry:first-child { border-top:0; }
.day-entry-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:11px; }
.day-entry-head b { display:block; font-size:.82rem; }
.day-entry-head small { display:block; color:var(--muted); font-size:.72rem; margin-top:3px; }
.day-entry-stats { display:flex; gap:16px; text-align:right; white-space:nowrap; }
.day-entry-stats span { color:var(--muted); font-size:.66rem; line-height:1.3; }
.day-entry-stats em { display:block; font-style:normal; font-family:Nunito,sans-serif; font-size:1.05rem; font-weight:900; color:var(--navy); }
.day-portions { display:grid; gap:8px; }
.day-portion { display:grid; grid-template-columns:130px minmax(0,1fr) 74px auto; align-items:center; gap:11px; }
.day-portion-name { font-size:.74rem; font-weight:800; color:#43536c; }
.day-portion-name small { display:block; color:var(--muted); font-weight:700; font-size:.64rem; margin-top:2px; }
.day-portion-value { text-align:right; font-size:.8rem; font-weight:800; color:var(--ink); }
.day-portion-value small { display:block; color:var(--muted); font-weight:700; font-size:.63rem; margin-top:2px; }
.day-portion .mini-spread { margin-top:0; }

/* ---------------------------------------------------------------------------
   Pengelola foto di formulir menu harian.

   Tombol silang di pojok kartu TIDAK menghapus apa pun saat itu juga: ia hanya
   mengetuk centang "Hapus foto ini", dan berkasnya baru dibuang setelah
   formulir disimpan. Karena itu kartu yang ditandai tidak dilenyapkan,
   melainkan diredupkan dan ditimpa .photo-tanda beserta pembatalnya —
   alasannya lengkap di admin/menus/form.blade.php.

   Centang aslinya baru disembunyikan setelah admin.js memasang kelas `js-siap`
   pada .photo-manager. Tanpa skrip yang terlihat adalah centang biasa yang
   masih berfungsi, bukan tombol mati.
   --------------------------------------------------------------------------- */
.photo-manager { margin-top:19px; padding-top:16px; border-top:1px dashed #dee5f1; }
.photo-manager-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.photo-manager-head h3 { margin:0; font-family:Nunito,sans-serif; font-size:.97rem; }
.photo-count { border-radius:99px; padding:4px 9px; background:#eef4ff; color:#33507e; font-size:.65rem; font-weight:800; white-space:nowrap; }
.photo-kosong { margin-top:9px!important; }
.photo-manager.js-siap .photo-card .check { display:none!important; }

.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:11px; margin-top:11px; }
.photo-card { position:relative; margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fbfcff; }
.photo-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#eef1f6; transition:filter .15s,opacity .15s; }
.photo-card figcaption { padding:7px 9px; color:#7b88a0; font-size:.63rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo-card .check { padding:8px 10px; color:#43536c; font-weight:800; }
.photo-card .check input { margin:0; }

/* Foto yang baru dipilih berdiri berdampingan dengan yang sudah tersimpan di
   layar yang sama; tanpa lencana keduanya tidak bisa dibedakan sama sekali. */
.photo-badge { position:absolute; top:8px; left:8px; border-radius:99px; padding:3px 8px; background:var(--yellow); color:#5b471c; font-size:.59rem; font-weight:900; letter-spacing:.03em; }

.photo-x { position:absolute; top:7px; right:7px; width:29px; height:29px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:rgb(17 34 63 / .66); color:#fff; font-size:1.05rem; line-height:1; box-shadow:0 2px 7px rgb(7 31 89 / .34); transition:background .15s,transform .15s; }
.photo-x:hover,.photo-x:focus-visible { background:var(--red); transform:scale(1.09); }

.photo-card.ditandai { border-color:#f0c8cc; background:#fff5f6; }
.photo-card.ditandai img { filter:grayscale(1); opacity:.2; }
.photo-tanda { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:2px; padding:9px; text-align:center; }
.photo-tanda b { color:#8f343c; font-size:.73rem; }
.photo-tanda span { color:#a3646b; font-size:.63rem; font-weight:700; line-height:1.25; }
.photo-tanda .link-button { margin-top:5px; padding:5px 9px; color:#8f343c; font-size:.7rem; text-decoration:underline; }

/* Melebihi jatah porsi. Server memangkas kelebihannya diam-diam, jadi satu-
   satunya tempat petugas bisa tahu adalah di sini, sebelum menekan Simpan. */
.photo-card.kelebihan { border-color:#f0dfae; background:#fffaf0; }
.photo-card.kelebihan img { filter:grayscale(.9); opacity:.35; }
.photo-card.kelebihan .photo-badge { background:var(--red); color:#fff; }

/* Input berkasnya disembunyikan secara visual, bukan display:none, supaya tetap
   bisa dijangkau keyboard; cincin fokusnya lalu dipindahkan ke labelnya. */
.uploader { margin-top:14px; }
.uploader-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; white-space:nowrap; clip:rect(0 0 0 0); clip-path:inset(50%); }
.uploader-button { gap:9px; padding:13px 17px; border:1.5px dashed #b8c7e4; background:#f3f8ff; color:var(--navy); cursor:pointer; }
.uploader-button:hover { background:#e6f0ff; border-color:#7ea6dd; }
.uploader-button>span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--navy); color:#fff; font-size:.9rem; line-height:1; }
.uploader-input:focus-visible+.uploader-button { border-style:solid; border-color:#316ab7; box-shadow:0 0 0 3px rgb(49 106 183 / .22); }
.uploader-status { margin:12px 0 0; border-radius:8px; padding:8px 10px; font-size:.71rem; font-weight:700; line-height:1.45; }
.uploader-status.ok { color:#146345; background:#e6f6ed; border:1px solid #c7ead6; }
/* Amber, bukan hijau: menandai foto untuk dihapus belum menyelesaikan apa
   pun. Hijau di sini terbaca "sudah beres" dan justru mengundang petugas
   menutup halaman sebelum menekan Simpan. */
.uploader-status.tanda { color:#8a6206; background:#fff7dc; border:1px solid #f0dfae; }
.uploader-status.galat { color:#8f343c; background:#fff0f1; border:1px solid #f0c8cc; }
.uploader .form-hint { margin-top:11px; }

@media (max-width:760px) {
    .photo-grid { grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:9px; }
    .uploader-button { width:100%; }
    /* Diketuk dengan ibu jari, bukan penunjuk tetikus. */
    .photo-x { width:34px; height:34px; font-size:1.15rem; }
}

/* Jumlah penerima manfaat di Data dasar. */
.recipient-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.recipient-total { margin:2px 0 0; color:#43536c; font-size:.76rem; }
.recipient-total b { font-family:Nunito,sans-serif; font-size:1.05rem; color:var(--navy); }

/* .plain-list menjorok keluar panel lewat margin negatif supaya garis
   pemisahnya menyentuh tepi. Itu hanya benar kalau daftarnya elemen terakhir;
   begitu ada formulir sesudahnya, margin bawah -20px membuat keduanya
   bertumpuk. */
.form-panel .plain-list:not(:last-child) { margin-bottom:17px; }

/* Judul kolom dan tanda wajibnya satu elemen. Label di formulir ini
   ber-display:grid; teks telanjang dan <span> yang berdiri sendiri akan jadi dua
   baris grid, sehingga tanda bintang menggantung di bawah judul. */
.field-label { display:flex; align-items:center; gap:5px; }

/* Kolom tanggal & jam produksi berikut tombol konfirmasinya. */
.field-waktu { display:grid; gap:8px; align-content:start; }
.field-waktu>label { display:grid; gap:6px; }
.waktu-tombol { justify-self:start; }
.waktu-status { margin:0; border-radius:8px; padding:8px 10px; font-size:.72rem; font-weight:700; line-height:1.4; }
.waktu-status.ok { color:#146345; background:#e6f6ed; border:1px solid #c7ead6; }
.waktu-status.menunggu { color:#8a6206; background:#fff7dc; border:1px solid #f0dfae; }
.waktu-status.kosong { color:#53627b; background:#f3f6fb; border:1px solid #e0e6f0; }

.spread-cell { white-space:nowrap; }
.spread-pill { display:inline-block; min-width:27px; text-align:center; border-radius:6px; padding:3px 5px; margin-right:3px; font-size:.68rem; font-weight:800; background:#eef1f7; color:#4a5b76; }
.spread-pill.s5 { background:#e5f5ec; color:#15714c; }
.spread-pill.s4 { background:#edf6ee; color:#3d7a4c; }
.spread-pill.s3 { background:#fff4d4; color:#8c6508; }
.spread-pill.s2 { background:#ffeede; color:#95541f; }
.spread-pill.s1 { background:#fdecec; color:#98323a; }
.rating-caveat { background:#f7f9fd; border:1px solid var(--line); border-radius:12px; padding:14px 16px; line-height:1.6; margin-top:17px; }

/* ================= Hapus akun petugas ================= */
/* Konfirmasinya <details> yang mengembang di dalam barisnya sendiri, bukan
   lapisan melayang di atas tabel: .table-wrap ber-overflow-x:auto, jadi apa pun
   yang keluar dari kotak tabel akan terpotong — termasuk tombol "Ya, hapus". */
.user-actions { white-space:nowrap; }
.no-action { color:#97a2b7; font-size:.7rem; font-weight:700; }
/* display:inline-block sekaligus membuang segitiga penanda bawaan; Safari
   masih perlu ::-webkit-details-marker. */
.konfirmasi-hapus>summary { display:inline-block; cursor:pointer; color:#98323a; font-size:.75rem; font-weight:800; list-style:none; }
.konfirmasi-hapus>summary::-webkit-details-marker { display:none; }
.konfirmasi-hapus>summary:hover { text-decoration:underline; }
/* Lebarnya dipatok, bukan max-width: tabel ber-layout otomatis melebarkan
   kolom Tindakan mengikuti isi panel ini, dan kolom Nama yang terjepit
   ikut terpotong jadi dua baris begitu satu konfirmasi dibuka. */
.konfirmasi-isi { white-space:normal; width:152px; margin-top:9px; border:1px solid #f0c8cc; background:#fff5f6; border-radius:10px; padding:10px 11px; }
.konfirmasi-isi p { margin:0 0 9px; color:#7c4b50; font-size:.72rem; line-height:1.45; }
.konfirmasi-hapus>summary .hapus-tutup { display:none; }
.konfirmasi-hapus[open]>summary .hapus-buka { display:none; }
.konfirmasi-hapus[open]>summary .hapus-tutup { display:inline; }
.konfirmasi-hapus[open]>summary { color:#5b6a83; }
.button.danger { background:#a5303a; color:#fff; }
.button.danger:hover { background:#8c2831; }

/* ================= Sisa penyesuaian formulir ================= */
.single-panel { max-width:560px; }
.form-panel>.portion-toggle { margin-top:4px; }
.dashboard-menu-name { padding:15px 19px 0; margin:0; font-size:.82rem; }

@media (max-width:760px) {
    .rating-stars button { font-size:2rem; }
    .bar-row { grid-template-columns:34px minmax(0,1fr) 74px; gap:8px; }
    .stat-grid-four { grid-template-columns:1fr; }
    .day-entry { padding:14px 15px; }
    .day-entry-head { flex-direction:column; gap:9px; }
    .day-entry-stats { text-align:left; }
    .day-portion { grid-template-columns:minmax(0,1fr) auto; row-gap:6px; }
    .day-portion .bar-track { grid-column:1/-1; order:3; }
    .day-portion .mini-spread { grid-column:1/-1; order:4; }
    .day-portion-value { order:2; }
    .recipient-grid { grid-template-columns:1fr; }
}