/* ================================================================
   FODMAP.ID.com — Stylesheet v3
   Light mode only. 5-tier scoring system.
   ================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --c-bg:       #f7f6f2;
  --c-surface:  #f9f8f5;
  --c-surf2:    #fbfbf9;
  --c-surfoff:  #f3f0ec;
  --c-border:   rgba(40,37,29,.12);
  --c-divider:  #dcd9d5;

  --c-text:     #111110;
  --c-muted:    #363530;
  --c-faint:    #6b6a63;

  --c-primary:  #1B5E37;
  --c-link-hover: #2A7A50;
  --c-phover:   #134A2B;
  --c-phi:      #D4E8DC;

  /* 5 tier score colours */
  --c-t1:       #1e6b2e;   /* aman         — hijau pekat  */
  --c-t1-bg:    #e4f1e8;
  --c-t2:       #4a8c28;   /* relatif aman — hijau terang */
  --c-t2-bg:    #eef6e7;
  --c-t3:       #b8860b;   /* hati-hati    — kuning       */
  --c-t3-bg:    #fdf6e3;
  --c-t4:       #c0392b;   /* berisiko     — merah cerah  */
  --c-t4-bg:    #fdf0ee;
  --c-t5:       #7b1a0f;   /* hindari      — merah pekat  */
  --c-t5-bg:    #f7e9e7;

  --f-display: 'Fraunces', Georgia, serif;
  --f-score:   'Roboto', 'Inter', sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', sans-serif;
  --f-db:      'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', sans-serif;
                 /* Plus Jakarta Sans untuk semua elemen database:
                    angka skor, label kategori, nama makanan, metadata, tags */

  --tx-xs:  clamp(.8125rem, .76rem + .28vw, .9375rem);
  --tx-sm:  clamp(.9375rem, .88rem + .30vw, 1.0625rem);
  --tx-base:clamp(1.0625rem, 1.00rem + .35vw, 1.1875rem);
  --tx-lg:  clamp(1.1875rem, 1.05rem + .80vw, 1.5rem);
  --tx-xl:  clamp(1.5rem,    1.20rem + 1.30vw, 2.125rem);
  --tx-2xl: clamp(2rem,      1.30rem + 2.50vw, 3.25rem);

  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;
  --sp5:1.25rem;--sp6:1.5rem;--sp8:2rem;--sp10:2.5rem;--sp16:4rem;

  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;

  --sh-sm:0 1px 2px rgba(28,25,18,.06);
  --sh-md:0 4px 12px rgba(28,25,18,.09);
  --sh-lg:0 12px 32px rgba(28,25,18,.13);

  --tr:180ms cubic-bezier(.16,1,.3,1);
  --w-wide:1120px;
  --w-narrow:760px;
}

/* ── BASE ── */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100dvh;font-family:var(--f-body);font-size:var(--tx-base);color:var(--c-text);background:var(--c-bg);line-height:1.78}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{text-wrap:balance;line-height:1.2;font-family:var(--f-display);color:var(--c-text);margin:0}
p,li{text-wrap:pretty;margin:0}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a,button,[role="button"],input,select{transition:color var(--tr),background var(--tr),border-color var(--tr),box-shadow var(--tr)}
a{color:inherit}
a:hover{color:var(--c-link-hover)}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================================================================
   HEADER & NAV
   ================================================================ */
.site-header{
  background:rgba(249,248,245,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-border);padding:var(--sp4);
  position:sticky;top:0;z-index:100;
}
.header-inner{
  max-width:var(--w-wide);margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--sp4);
}
.logo{
  display:flex;align-items:center;gap:var(--sp2);text-decoration:none;
  color:var(--c-text);font-family:var(--f-display);
  font-size:clamp(1.4rem, 1.1rem + .8vw, 1.75rem);
  font-weight:700;letter-spacing:-.02em;flex-shrink:0;justify-self:start;
}
.logo:hover{color:var(--c-primary)}
.logo svg{width:40px;height:40px}

/* ── LOGO PNG — nav dan footer ── */
.site-logo-img{
  height:44px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  display:block;
}
.site-logo-footer{
  height:32px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  display:block;
  opacity:.75;
}
@media(max-width:640px){
  .site-logo-img{height:36px;}
  .site-logo-footer{height:28px;}
}
.header-nav{
  justify-self:center;
  display:flex;align-items:center;gap:var(--sp2);
}
.nav-item{position:relative}
.nav-link{
  font-size:var(--tx-sm);color:var(--c-muted);text-decoration:none;
  padding:var(--sp2) var(--sp3);border-radius:var(--r-md);font-weight:500;
  display:inline-flex;align-items:center;gap:2px;white-space:nowrap;
}
.nav-link:hover{color:var(--c-text);background:var(--c-surfoff)}
.nav-link.active{color:var(--c-primary);font-weight:600}

/* Dropdown */
.has-dropdown{position:relative}
.nav-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);left:0;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);min-width:180px;padding:var(--sp2);
  box-shadow:var(--sh-lg);z-index:200;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{display:flex;flex-direction:column;gap:2px}
.dropdown-item{
  font-size:var(--tx-sm);color:var(--c-muted);text-decoration:none;
  padding:var(--sp2) var(--sp3);border-radius:var(--r-md);
}
.dropdown-item:hover{background:var(--c-surfoff);color:var(--c-text)}

/* ================================================================
   HERO — Healthline-style minimalist
   ================================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 75% 0%, rgba(1,105,111,.08) 0%, transparent 55%),
    linear-gradient(180deg, #e6f1ed 0%, #eef4e8 30%, #f7f1e3 65%, var(--c-bg) 100%);
  padding:clamp(2.75rem, 6vw, 4rem) var(--sp4) var(--sp10);
}
.hero-inner{
  max-width:820px;margin:0 auto;text-align:center;
}

.hero-eyebrow{
  display:inline-block;
  padding:6px 14px;
  background:rgba(1,105,111,.08);
  color:var(--c-primary);
  border-radius:999px;
  font-size:var(--tx-xs);font-weight:600;letter-spacing:.04em;
  margin-bottom:var(--sp5);
}

.hero-title{
  font-family:var(--f-display);
  font-size:var(--tx-2xl);
  font-weight:600;
  font-style:normal;
  color:var(--c-text);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 auto var(--sp5);
  max-width:18ch;
  text-wrap:balance;
}

.hero-lead{
  font-size:var(--tx-base);
  color:var(--c-muted);
  line-height:1.6;
  max-width:60ch;
  margin:0 auto var(--sp10);
  text-wrap:pretty;
}

/* Hero cards (Healthline-style) */
.hero-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp5);
  max-width:740px;
  margin:0 auto var(--sp10);
  text-align:left;
}
.hero-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:18px;
  padding:var(--sp6);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.025);
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s;
  display:flex;flex-direction:column;
}
.hero-card:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 14px 36px rgba(0,0,0,.07);
  border-color:rgba(1,105,111,.12);
}
.hero-card-1{background:linear-gradient(140deg, #f0faf3 0%, #fff 65%);}
.hero-card-2{background:linear-gradient(140deg, #fbf6e9 0%, #fff 65%);}

.hero-card-mini{
  display:flex;align-items:center;gap:8px;
  position:absolute;top:var(--sp4);right:var(--sp5);
}
.hero-card-mini-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;padding:4px 9px;
  font-weight:700;font-size:var(--tx-xs);
  border-radius:6px;
  font-variant-numeric:tabular-nums;
  font-family:var(--f-body);
}
.hero-card-mini-pill.s-aman{background:#dff5e8;color:#066e3a}
.hero-card-mini-pill.s-mixed{background:linear-gradient(90deg,#fde2dc 0%,#fff3d6 50%,#dff5e8 100%);color:#475569}
.hero-card-mini-bar{
  width:50px;height:5px;background:rgba(0,0,0,.06);
  border-radius:999px;overflow:hidden;
}
.hero-card-mini-bar-fill{height:100%;border-radius:inherit}
.hero-card-mini-bar-fill.s-aman{width:85%;background:#19a361}
.hero-card-mini-bar-fill.s-rainbow{width:100%;background:linear-gradient(90deg,#dc2626 0%,#eab308 50%,#16a34a 100%)}

.hero-card-title{
  font-family:var(--f-display);
  font-size:var(--tx-lg);font-weight:600;
  color:var(--c-text);line-height:1.2;
  letter-spacing:-.01em;
  margin:var(--sp5) 0 var(--sp2);
  padding-right:90px; /* leave room for mini-score */
}
.hero-card-desc{
  font-size:var(--tx-sm);color:var(--c-muted);
  line-height:1.55;flex:1;
  margin-bottom:var(--sp5);
}
.hero-card-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  font-size:var(--tx-xs);font-weight:600;letter-spacing:.01em;
  text-decoration:none;
  align-self:flex-start;
  background:var(--c-primary);color:#fff;
  border:1.5px solid var(--c-primary);
}
.hero-card-btn:hover{background:#015056;color:#fff;transform:translateX(2px)}
.hero-card-btn .arrow{transition:transform .2s}
.hero-card-btn:hover .arrow{transform:translateX(2px)}
.hero-card-2 .hero-card-btn{background:#fff;color:var(--c-primary)}
.hero-card-2 .hero-card-btn:hover{background:rgba(1,105,111,.06);color:var(--c-primary)}

/* Legend pills (horizontal) */
.hero-legend-pills{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp2);max-width:720px;margin:0 auto;
}
.hero-legend-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.hero-legend-pill::before{
  content:'';width:8px;height:8px;border-radius:50%;display:inline-block;
}
.hero-legend-pill.lp-aman::before{background:var(--c-t1)}
.hero-legend-pill.lp-relatif::before{background:var(--c-t2)}
.hero-legend-pill.lp-hati::before{background:var(--c-t3)}
.hero-legend-pill.lp-berisiko::before{background:var(--c-t4)}
.hero-legend-pill.lp-hindari::before{background:var(--c-t5)}
.hero-legend-pill.lp-aman{color:#066e3a}
.hero-legend-pill.lp-relatif{color:#1d6f3a}
.hero-legend-pill.lp-hati{color:#92560a}
.hero-legend-pill.lp-berisiko{color:#a8261a}
.hero-legend-pill.lp-hindari{color:#7a1311}

@media(max-width:700px){
  .hero-cards{grid-template-columns:1fr}
  .hero-card-title{padding-right:0;margin-top:var(--sp5)}
  .hero-card-mini{position:static;margin-bottom:var(--sp3)}
}


/* ================================================================
   CTA BANNER
   ================================================================ */
.cta-banner{max-width:var(--w-wide);margin:0 auto var(--sp6);padding:0 var(--sp4)}
.cta-banner-inner{
  display:flex;align-items:center;gap:var(--sp4);flex-wrap:wrap;
  background:linear-gradient(135deg,color-mix(in oklab,var(--c-primary) 10%,var(--c-surface)),var(--c-surface));
  border:1px solid color-mix(in oklab,var(--c-primary) 22%,var(--c-border));
  border-radius:var(--r-xl);padding:var(--sp4) var(--sp5);position:relative;
}
.cta-icon{font-size:1.6rem;flex-shrink:0;line-height:1}
.cta-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:2px}
.cta-text strong{display:block;font-size:var(--tx-sm);font-weight:600;color:var(--c-text);line-height:1.4}
.cta-text span{font-size:var(--tx-xs);color:var(--c-muted);line-height:1.5}
.cta-btn{
  display:inline-flex;align-items:center;gap:var(--sp2);background:var(--c-primary);
  color:#fff;text-decoration:none;padding:var(--sp2) var(--sp4);border-radius:var(--r-md);
  font-size:var(--tx-sm);font-weight:600;white-space:nowrap;flex-shrink:0;
}
.cta-btn:hover{background:var(--c-phover)}
.cta-close{
  position:absolute;top:8px;right:10px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-faint);font-size:14px;border-radius:var(--r-full);
}
.cta-close:hover{background:var(--c-surfoff);color:var(--c-text)}

/* ================================================================
   FILTER BAR
   ================================================================ */
.filter-bar{
  background:rgba(249,248,245,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
  padding:var(--sp4);position:sticky;top:65px;z-index:90;
}
.filter-inner{max-width:var(--w-wide);margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp3)}
.search-wrap{position:relative}
.search-icon{position:absolute;left:var(--sp4);top:50%;transform:translateY(-50%);color:var(--c-faint);pointer-events:none;display:flex}
.search-input{
  width:100%;padding:var(--sp3) var(--sp4) var(--sp3) calc(var(--sp4)*2.5);
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-lg);
  font-size:var(--tx-sm);color:var(--c-text);outline:none;font-family:inherit;
}
.search-input::placeholder{color:var(--c-faint)}
.search-input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--c-primary) 12%,transparent)}
.filter-chips{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center}
.filter-label{font-size:var(--tx-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);margin-right:var(--sp1)}
.chip{
  display:inline-flex;align-items:center;padding:var(--sp1) var(--sp3);border-radius:var(--r-full);
  border:1px solid var(--c-border);font-size:var(--tx-xs);font-weight:500;color:var(--c-muted);
  background:var(--c-bg);cursor:pointer;white-space:nowrap;font-family:inherit;
}
.chip:hover{border-color:var(--c-primary);color:var(--c-primary)}
.chip.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.chip-sep{width:1px;height:16px;background:var(--c-border);margin:0 var(--sp1);flex-shrink:0}
.results-header{
  max-width:var(--w-wide);margin-inline:auto;padding:var(--sp6) var(--sp4) var(--sp4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;
}
.results-count{font-size:var(--tx-sm);color:var(--c-muted)}
.results-count strong{color:var(--c-text)}
.sort-select{
  font-size:var(--tx-xs);color:var(--c-muted);background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:var(--sp1) var(--sp3);cursor:pointer;font-family:inherit;
}

/* ================================================================
   FOOD GRID & CARDS
   ================================================================ */
.food-grid-wrap{max-width:var(--w-wide);margin-inline:auto;padding:0 var(--sp4) var(--sp16)}
.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--sp4)}
/* ── SCORE COLOR CODING PER KATEGORI ── */

/* Card score number — warna bold sesuai kategori */
.food-card[data-status="aman"]         .card-score { color: var(--c-t1); font-weight: 700; }
.food-card[data-status="relatif-aman"] .card-score { color: var(--c-t2); font-weight: 700; }
.food-card[data-status="hati-hati"]    .card-score { color: var(--c-t3); font-weight: 700; }
.food-card[data-status="berisiko"]     .card-score { color: var(--c-t4); font-weight: 700; }
.food-card[data-status="hindari"]      .card-score { color: var(--c-t5); font-weight: 700; }

/* Card bar — sudah ada, diperkuat */
/* card-bar colors: use .bar-aman/.bar-relatif etc. via CSS vars below */

.food-card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);
  overflow:hidden;text-decoration:none;color:var(--c-text);
  display:flex;flex-direction:column;
  transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr);
}
/* Soft status-based tint at top of each card */
.food-card[data-status="aman"]        {background:linear-gradient(180deg,#f3faf5 0%,#fff 70%)}
.food-card[data-status="relatif-aman"]{background:linear-gradient(180deg,#f5fbf3 0%,#fff 70%)}
.food-card[data-status="hati-hati"]   {background:linear-gradient(180deg,#fdf9ee 0%,#fff 70%)}
.food-card[data-status="berisiko"]    {background:linear-gradient(180deg,#fdf3f0 0%,#fff 70%)}
.food-card[data-status="hindari"]     {background:linear-gradient(180deg,#fcf0ee 0%,#fff 70%)}
.food-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:color-mix(in oklab,var(--c-primary) 30%,var(--c-border))}
.card-top{padding:var(--sp5) var(--sp5) var(--sp4);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp3)}
.card-emoji{font-size:2rem;line-height:1;flex-shrink:0}
.card-score-wrap{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp1)}
.card-score{font-family:var(--f-db);font-size:clamp(1.8rem,1rem + 2vw,2.5rem);font-weight:700;font-style:normal;line-height:1;letter-spacing:-.02em}
.card-score-denom{font-family:var(--f-db);font-size:var(--tx-xs);font-weight:500;color:var(--c-faint);letter-spacing:.02em}
.card-bar-wrap{width:60px;height:4px;background:var(--c-surfoff);border-radius:var(--r-full);overflow:hidden}
.card-bar{height:100%;border-radius:var(--r-full);width:0%;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.card-body{padding:0 var(--sp5) var(--sp5);flex:1;display:flex;flex-direction:column;gap:var(--sp2)}
.card-name{font-family:var(--f-db);font-size:var(--tx-lg);font-weight:600;font-style:normal;color:var(--c-text);line-height:1.25;letter-spacing:-.01em}
.card-reason{font-family:var(--f-db);font-size:var(--tx-xs);font-weight:400;color:var(--c-muted);line-height:1.6;flex:1}
.card-footer{padding:var(--sp3) var(--sp5);border-top:1px solid var(--c-border);display:flex;align-items:center;gap:var(--sp2)}
.card-tags{display:flex;gap:var(--sp2);flex-wrap:wrap;flex:1;min-width:0}
.tag{font-family:var(--f-db);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px var(--sp2);border-radius:var(--r-full);border:1px solid var(--c-border);color:var(--c-muted);white-space:nowrap;background:#fff}
/* Tag warna per kategori — pastel soft */
.food-card[data-cat*="buah"]    .tag:first-child{background:#fdf2e9;color:#9a4307;border-color:#fde4cc}
.food-card[data-cat*="sayur"]   .tag:first-child{background:#ecfdf5;color:#066e3a;border-color:#bbf3d4}
.food-card[data-cat*="minum"]   .tag:first-child{background:#eff6ff;color:#1e40af;border-color:#c7dafa}
.food-card[data-cat*="lemak"]   .tag:first-child{background:#fef3c7;color:#854d0e;border-color:#fde68a}
.food-card[data-cat*="bumbu"]   .tag:first-child{background:#fef2f2;color:#9b1c1c;border-color:#fbcaca}
.food-card[data-cat*="ferment"] .tag:first-child{background:#faf5ff;color:#6b21a8;border-color:#e9d5ff}
.food-card[data-cat*="herbal"]  .tag:first-child{background:#f0fdfa;color:#0f5e57;border-color:#b8e8e1}
.food-card[data-cat*="karbo"]   .tag:first-child{background:#fffbeb;color:#854d0e;border-color:#fde68a}
.food-card[data-cat*="susu"]    .tag:first-child{background:#f0f9ff;color:#075985;border-color:#bae6fd}
.food-card[data-cat*="snack"]   .tag:first-child{background:#fdf4ff;color:#86198f;border-color:#f5d0fe}
.food-card[data-cat*="protein"] .tag:first-child{background:#fef3f2;color:#991b1b;border-color:#fecaca}
.food-card[data-cat*="kacang"]  .tag:first-child{background:#fffbeb;color:#7c2d12;border-color:#fde68a}
.card-arrow{color:var(--c-faint);flex-shrink:0}

/* ── BADGE (kartu) ── */
.badge{display:inline-flex;align-items:center;font-family:var(--f-db);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px var(--sp2);border-radius:var(--r-full);white-space:nowrap;border:1px solid transparent}
.badge-aman    {background:var(--c-t1-bg);color:var(--c-t1);border-color:color-mix(in oklab,var(--c-t1) 20%,transparent)}
.badge-relatif {background:var(--c-t2-bg);color:var(--c-t2);border-color:color-mix(in oklab,var(--c-t2) 20%,transparent)}
.badge-hati    {background:var(--c-t3-bg);color:var(--c-t3);border-color:color-mix(in oklab,var(--c-t3) 20%,transparent)}
.badge-berisiko{background:var(--c-t4-bg);color:var(--c-t4);border-color:color-mix(in oklab,var(--c-t4) 20%,transparent)}
.badge-hindari {background:var(--c-t5-bg);color:var(--c-t5);border-color:color-mix(in oklab,var(--c-t5) 20%,transparent)}

/* ── SCORE COLOURS (angka besar) ── */
.score-aman    {color:var(--c-t1)}
.score-relatif {color:var(--c-t2)}
.score-hati    {color:var(--c-t3)}
.score-berisiko{color:var(--c-t4)}
.score-hindari {color:var(--c-t5)}

/* ── BAR COLOURS ── */
.bar-aman    {background:var(--c-t1)}
.bar-relatif {background:var(--c-t2)}
.bar-hati    {background:var(--c-t3)}
.bar-berisiko{background:var(--c-t4)}
.bar-hindari {background:var(--c-t5)}

.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp16) var(--sp8);color:var(--c-muted)}
.empty-state svg{color:var(--c-faint);margin-bottom:var(--sp4)}
.empty-state h3{font-family:var(--f-display);font-style:normal;font-weight:600;font-size:var(--tx-lg);color:var(--c-text);margin-bottom:var(--sp2)}
.hidden{display:none!important}

/* ================================================================
   SINGLE PAGE
   ================================================================ */


/* Top indicator bar — warna sesuai kategori */
main[data-category="aman"]         { border-top: 6px solid var(--c-t1); }
main[data-category="relatif-aman"] { border-top: 6px solid var(--c-t2); }
main[data-category="hati-hati"]    { border-top: 6px solid var(--c-t3); }
main[data-category="berisiko"]     { border-top: 6px solid var(--c-t4); }
main[data-category="hindari"]      { border-top: 6px solid var(--c-t5); }

main{max-width:var(--w-narrow);margin-inline:auto;padding:var(--sp10) var(--sp4) var(--sp16)}
.page-header{margin-bottom:var(--sp10)}
.breadcrumb{font-size:var(--tx-xs);color:var(--c-muted);margin-bottom:var(--sp4);display:flex;gap:var(--sp2);align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--c-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--c-primary)}
.breadcrumb-sep{color:var(--c-faint)}

/* Verdict badge pojok kiri atas */
.verdict-badge{
  display:inline-flex;align-items:center;gap:var(--sp2);
  border-radius:var(--r-full);padding:var(--sp2) var(--sp4);
  font-size:var(--tx-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:var(--sp4);border:2px solid transparent;
}
.verdict-avg{font-weight:500;opacity:.75;font-size:.7rem;letter-spacing:.02em}
.verdict-badge.aman        {background:var(--c-t1-bg);color:var(--c-t1);border-color:color-mix(in oklab,var(--c-t1) 25%,transparent)}
.verdict-badge.relatif-aman{background:var(--c-t2-bg);color:var(--c-t2);border-color:color-mix(in oklab,var(--c-t2) 25%,transparent)}
.verdict-badge.hati-hati   {background:var(--c-t3-bg);color:var(--c-t3);border-color:color-mix(in oklab,var(--c-t3) 25%,transparent)}
.verdict-badge.berisiko    {background:var(--c-t4-bg);color:var(--c-t4);border-color:color-mix(in oklab,var(--c-t4) 25%,transparent)}
.verdict-badge.hindari     {background:var(--c-t5-bg);color:var(--c-t5);border-color:color-mix(in oklab,var(--c-t5) 25%,transparent)}

.page-title{font-size:var(--tx-2xl);font-weight:600;margin-bottom:var(--sp4);color:var(--c-text);font-style:normal;letter-spacing:-.015em;line-height:1.1}
.page-title em{font-style:normal;font-weight:inherit;color:var(--c-primary)}
.lead{font-size:var(--tx-base);color:var(--c-muted);max-width:60ch;line-height:1.7}
.lead strong{color:var(--c-text);font-weight:600}

/* Score table */


/* Score section background tint per kategori */
.score-section[data-category="aman"]         { background-color: color-mix(in oklab, var(--c-t1) 6%, transparent); }
.score-section[data-category="relatif-aman"] { background-color: color-mix(in oklab, var(--c-t2) 6%, transparent); }
.score-section[data-category="hati-hati"]    { background-color: color-mix(in oklab, var(--c-t3) 6%, transparent); }
.score-section[data-category="berisiko"]     { background-color: color-mix(in oklab, var(--c-t4) 6%, transparent); }
.score-section[data-category="hindari"]      { background-color: color-mix(in oklab, var(--c-t5) 6%, transparent); }

.score-section{margin-bottom:var(--sp10)}
.score-section-label{font-size:var(--tx-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--sp4)}
.score-table-wrapper{border:1px solid var(--c-border);border-radius:var(--r-xl);overflow:hidden;background:var(--c-surface)}
.score-table{width:100%;border-collapse:collapse}
.score-table thead tr{background:var(--c-surf2)}
.score-table th{padding:var(--sp4) var(--sp5);text-align:center;font-size:var(--tx-sm);font-weight:600;color:var(--c-muted);border-bottom:1px solid var(--c-border)}
.score-table th:first-child{text-align:left}
.score-table td{padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--c-border);text-align:center;font-size:var(--tx-sm);vertical-align:middle;color:var(--c-text)}
.score-table td:first-child{text-align:left;font-weight:500;color:var(--c-muted);font-size:var(--tx-xs);text-transform:uppercase;letter-spacing:.05em}
.score-table tr:last-child td{border-bottom:none}
.score-display{display:flex;flex-direction:column;align-items:center;gap:var(--sp1)}
.score-number{font-family:var(--f-db);font-size:clamp(2.5rem,1rem + 4vw,4.5rem);font-weight:800;line-height:1;font-style:normal;letter-spacing:-.025em}
/* Score number colors — single page dan card */
/* score-number colors handled by .score-aman/.score-relatif etc. via CSS vars */

.score-number.aman        {color:var(--c-t1)}
.score-number.relatif-aman{color:var(--c-t2)}
.score-number.hati-hati   {color:var(--c-t3)}
.score-number.berisiko    {color:var(--c-t4)}
.score-number.hindari     {color:var(--c-t5)}
.score-denom{font-family:var(--f-db);font-size:var(--tx-xs);font-weight:500;color:var(--c-faint);letter-spacing:.05em}
.score-bar-wrap{width:100%;max-width:120px;height:6px;background:var(--c-surfoff);border-radius:var(--r-full);overflow:hidden;margin-top:var(--sp1)}
.score-bar{height:100%;border-radius:var(--r-full);transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.score-bar.aman        {background:var(--c-t1)}
.score-bar.relatif-aman{background:var(--c-t2)}
.score-bar.hati-hati   {background:var(--c-t3)}
.score-bar.berisiko    {background:var(--c-t4)}
.score-bar.hindari     {background:var(--c-t5)}

.cat-badge{display:inline-flex;align-items:center;border-radius:var(--r-full);padding:var(--sp1) var(--sp3);font-family:var(--f-db);font-size:var(--tx-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent}
.cat-badge.aman        {background:var(--c-t1-bg);color:var(--c-t1);border-color:color-mix(in oklab,var(--c-t1) 20%,transparent)}
.cat-badge.relatif-aman{background:var(--c-t2-bg);color:var(--c-t2);border-color:color-mix(in oklab,var(--c-t2) 20%,transparent)}
.cat-badge.hati-hati   {background:var(--c-t3-bg);color:var(--c-t3);border-color:color-mix(in oklab,var(--c-t3) 20%,transparent)}
.cat-badge.berisiko    {background:var(--c-t4-bg);color:var(--c-t4);border-color:color-mix(in oklab,var(--c-t4) 20%,transparent)}
.cat-badge.hindari     {background:var(--c-t5-bg);color:var(--c-t5);border-color:color-mix(in oklab,var(--c-t5) 20%,transparent)}

.score-legend{margin-top:var(--sp4);padding:var(--sp3) var(--sp4);background:var(--c-surfoff);border-radius:var(--r-lg);font-size:var(--tx-xs);color:var(--c-muted);display:flex;gap:var(--sp3);align-items:center;flex-wrap:wrap}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-dot.aman        {background:var(--c-t1)}
.legend-dot.relatif-aman{background:var(--c-t2)}
.legend-dot.hati-hati   {background:var(--c-t3)}
.legend-dot.berisiko    {background:var(--c-t4)}
.legend-dot.hindari     {background:var(--c-t5)}

.fodmap-callout{margin-top:var(--sp3);padding:var(--sp3) var(--sp4);background:var(--c-phi);border-radius:var(--r-md);font-size:var(--tx-xs);color:var(--c-muted);display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.fodmap-callout a{color:var(--c-primary);font-weight:500;text-decoration:none;white-space:nowrap}
.fodmap-callout a:hover{text-decoration:underline}

.content-section{margin-bottom:var(--sp8)}
.section-title{font-size:var(--tx-lg);font-weight:700;margin-bottom:var(--sp5);color:var(--c-text);font-style:normal;letter-spacing:-.01em}
.factors-grid{display:grid;gap:var(--sp3)}
.factor-card{display:grid;grid-template-columns:auto 1fr;gap:var(--sp3) var(--sp4);padding:var(--sp4);border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface)}
.factor-card.negative{background:color-mix(in oklab,var(--c-t4) 4%,var(--c-surface))}
.factor-card.positive{background:color-mix(in oklab,var(--c-t1) 4%,var(--c-surface))}
.factor-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);font-size:1.1rem;flex-shrink:0;align-self:start;margin-top:var(--sp1)}
.factor-icon.neg{background:var(--c-t4-bg)}
.factor-icon.pos{background:var(--c-t1-bg)}
.factor-title{font-size:var(--tx-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--sp1)}
.factor-text{font-size:var(--tx-sm);color:var(--c-muted);line-height:1.6}
.factor-tag{display:inline-block;font-size:var(--tx-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--sp2)}
.factor-tag.neg{color:var(--c-t4)}
.factor-tag.pos{color:var(--c-t1)}
.faq-list{display:grid;gap:var(--sp3)}
details{border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);overflow:hidden}
summary{padding:var(--sp4) var(--sp5);font-size:var(--tx-sm);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp4);list-style:none;color:var(--c-text)}
summary::-webkit-details-marker{display:none}
summary::after{content:'';width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9994' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;flex-shrink:0;transition:transform var(--tr)}
details[open] summary::after{transform:rotate(180deg)}
.faq-body{padding:0 var(--sp5) var(--sp4);font-size:var(--tx-sm);color:var(--c-muted);line-height:1.7;border-top:1px solid var(--c-border)}
.faq-body p{margin-top:var(--sp3)}
.divider{height:1px;background:var(--c-divider);margin:var(--sp8) 0}

/* ================================================================
   PROSE (legal pages, contact, about)
   ================================================================ */
.prose{color:var(--c-text);font-size:var(--tx-base);line-height:1.85}
.prose p{margin-bottom:var(--sp5)}
.prose p strong{color:var(--c-text);font-weight:700}
.prose h3{
  font-family:var(--f-display);font-size:var(--tx-lg);font-style:normal;
  font-weight:400;color:var(--c-text);
  margin-top:var(--sp8);margin-bottom:var(--sp4);line-height:1.3;
}
.prose h3:first-child{margin-top:0}
.prose h4{
  font-family:var(--f-body);font-size:var(--tx-base);font-weight:600;
  color:var(--c-text);margin-top:var(--sp5);margin-bottom:var(--sp2);
}
.prose ul,.prose ol{margin-left:var(--sp5);margin-bottom:var(--sp4)}
.prose li{margin-bottom:var(--sp2)}
.prose a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--c-phover)}

.last-updated{
  font-size:var(--tx-xs);color:var(--c-faint);font-style:normal;
  margin-bottom:var(--sp6);padding-bottom:var(--sp4);
  border-bottom:1px solid var(--c-border);
}
.legal-toc{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--sp4) var(--sp5);
  margin-bottom:var(--sp6);font-size:var(--tx-xs);
}
.legal-toc-title{
  display:block;text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-muted);margin-bottom:var(--sp2);font-weight:700;
}
.legal-toc ol{margin:0;padding-left:var(--sp5)}
@media(min-width:560px){.legal-toc ol{columns:2;column-gap:var(--sp5)}}
.legal-toc a{color:var(--c-text);text-decoration:none}
.legal-toc a:hover{color:var(--c-primary);text-decoration:underline}

.callout{
  background:var(--c-surfoff);border-left:3px solid var(--c-primary);
  border-radius:var(--r-md);padding:var(--sp4) var(--sp5);
  margin:var(--sp5) 0;font-size:var(--tx-sm);
}
.callout-title{
  display:block;font-size:var(--tx-xs);text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-primary);
  margin-bottom:var(--sp2);font-weight:700;
}
.callout.warning{border-left-color:var(--c-t4);background:var(--c-t4-bg)}
.callout.warning .callout-title{color:var(--c-t4)}

.contact-card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-xl);padding:var(--sp6);
  margin-top:var(--sp5);text-align:center;
}
.contact-card-label{
  display:block;font-size:var(--tx-xs);text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-muted);margin-bottom:var(--sp2);font-weight:600;
}
.contact-card-email{
  display:inline-block;font-family:var(--f-display);font-style:normal;
  font-size:var(--tx-lg);color:var(--c-primary);text-decoration:none;
}
.contact-card-email:hover{color:var(--c-phover);text-decoration:underline}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{border-top:1px solid var(--c-border);padding:var(--sp8) var(--sp4);background:var(--c-surface)}
.footer-inner{max-width:var(--w-wide);margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--sp6);justify-content:space-between;align-items:center}
.footer-logo{font-family:var(--f-display);font-style:normal;font-weight:700;font-size:var(--tx-lg);color:var(--c-muted)}
.footer-links{display:flex;gap:var(--sp4);flex-wrap:wrap}
.footer-links a{font-size:var(--tx-xs);color:var(--c-muted);text-decoration:none}
.footer-links a:hover{color:var(--c-text)}
.footer-note{font-size:var(--tx-xs);color:var(--c-faint);max-width:50ch;line-height:1.6}
.footer-copy{font-size:var(--tx-xs);color:var(--c-faint);width:100%;text-align:center;padding-top:var(--sp4);border-top:1px solid var(--c-border);margin-top:var(--sp2)}

/* ── BYLINE (database + blog) ── */
.byline{font-size:var(--tx-xs);color:var(--c-muted);margin-top:var(--sp3);margin-bottom:var(--sp4);line-height:1.5}
.byline a{color:var(--c-primary);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--c-primary) 30%,transparent)}
.byline a:hover{color:var(--c-primary);opacity:.75;border-color:var(--c-primary)}
.byline strong{font-weight:600;color:var(--c-primary)}

/* ================================================================
   ABOUT PAGE (Tentang Kami)
   ================================================================ */
.about-sections{display:grid;gap:var(--sp16)}
.about-section-title{
  font-family:var(--f-display);font-size:var(--tx-xl);font-style:normal;font-weight:600;
  font-weight:400;color:var(--c-text);margin-bottom:var(--sp8);line-height:1.2;
}
.about-section-title em{font-style:normal;color:var(--c-primary)}
/* FODMAP.ID section */
.about-dietmu-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp6)}
.about-dietmu-full{grid-column:1/-1}
.about-feature{padding:var(--sp5);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.about-feature-icon{font-size:1.5rem;margin-bottom:var(--sp3)}
.about-feature-title{font-size:var(--tx-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--sp2)}
.about-feature-text{font-size:var(--tx-xs);color:var(--c-muted);line-height:1.65}
/* Founder section */
.founder-card{display:grid;grid-template-columns:auto 1fr;gap:var(--sp8);align-items:start;margin-bottom:var(--sp8)}
.founder-avatar{width:96px;height:96px;border-radius:50%;background:var(--c-phi);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:2.5rem;border:3px solid var(--c-border)}
.founder-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--c-border);display:block}
.founder-name{font-family:var(--f-display);font-size:var(--tx-xl);font-style:normal;font-weight:700;color:var(--c-text);margin-bottom:var(--sp1)}
.founder-title{font-size:var(--tx-xs);color:var(--c-muted);letter-spacing:.04em;margin-bottom:var(--sp3)}
.founder-creds{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.founder-cred{display:inline-flex;align-items:center;gap:var(--sp2);padding:var(--sp1) var(--sp3);background:var(--c-phi);border-radius:var(--r-full);font-size:var(--tx-xs);color:var(--c-primary);font-weight:500}
.founder-bio{font-size:var(--tx-sm);color:var(--c-muted);line-height:1.8}
.founder-bio p{margin-bottom:var(--sp4)}
.founder-bio p:last-child{margin-bottom:0}
/* Skor section */
.skor-steps{display:grid;gap:var(--sp4);margin:var(--sp6) 0}
.skor-step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp4);align-items:start;padding:var(--sp4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.skor-step-num{width:32px;height:32px;border-radius:50%;background:var(--c-primary);color:#fff;font-size:var(--tx-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.skor-step-label{font-size:var(--tx-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--sp1)}
.skor-step-text{font-size:var(--tx-xs);color:var(--c-muted);line-height:1.6}
.tier-pills{display:flex;flex-wrap:wrap;gap:var(--sp2);margin:var(--sp6) 0}
.tier-pill{padding:var(--sp2) var(--sp4);border-radius:var(--r-full);font-size:var(--tx-xs);font-weight:600;border:1px solid transparent}
@media(max-width:640px){
  .about-dietmu-grid{grid-template-columns:1fr}
  .founder-card{grid-template-columns:1fr}
  .founder-avatar{display:none}
}

/* ================================================================
   METHODOLOGY PAGE
   ================================================================ */
.metode-intro{font-size:var(--tx-base);color:var(--c-muted);line-height:1.75;max-width:65ch;margin-bottom:var(--sp10)}
.metode-intro strong{color:var(--c-text);font-weight:600}
.metode-sections{display:grid;gap:var(--sp8)}
.metode-section{display:grid;grid-template-columns:auto 1fr;gap:var(--sp5) var(--sp6);align-items:start}
.metode-num{width:44px;height:44px;border-radius:50%;background:var(--c-phi);color:var(--c-primary);font-family:var(--f-display);font-style:normal;font-weight:700;font-size:var(--tx-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:var(--sp1)}
.metode-icon-wrap{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:18px;
  background:color-mix(in oklab,var(--c-primary) 8%,var(--c-surface));
  flex-shrink:0;margin-bottom:var(--sp5);
  border:1.5px solid color-mix(in oklab,var(--c-primary) 15%,transparent);
}
.metode-icon-wrap svg{width:36px;height:36px}
.metode-body{}
.metode-title{font-family:var(--f-display);font-size:var(--tx-lg);font-style:normal;font-weight:600;color:var(--c-text);margin-bottom:var(--sp3);line-height:1.2}
.metode-text{font-size:var(--tx-sm);color:var(--c-muted);line-height:1.75}
.metode-text p{margin-bottom:var(--sp3)}
.metode-text p:last-child{margin-bottom:0}
.metode-text ul{margin-left:var(--sp5);margin-bottom:var(--sp3)}
.metode-text li{margin-bottom:var(--sp2)}
.metode-text strong{color:var(--c-text);font-weight:600}
.zona-pills{display:flex;flex-wrap:wrap;gap:var(--sp2);margin:var(--sp3) 0}
.zona-pill{display:inline-flex;align-items:center;gap:var(--sp2);padding:var(--sp2) var(--sp4);border-radius:var(--r-full);font-size:var(--tx-xs);font-weight:600}
.zona-pill-a{background:var(--c-t1-bg);color:var(--c-t1)}
.zona-pill-b{background:var(--c-t3-bg);color:var(--c-t3)}
.zona-pill-c{background:var(--c-t5-bg);color:var(--c-t5)}
.tier-table{width:100%;border-collapse:collapse;margin-top:var(--sp4);font-size:var(--tx-sm)}
.tier-table th{padding:var(--sp3) var(--sp4);text-align:left;font-size:var(--tx-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);font-weight:600;border-bottom:1px solid var(--c-border)}
.tier-table td{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--c-border);vertical-align:middle}
.tier-table tr:last-child td{border-bottom:none}
@media(max-width:560px){
  .metode-section{grid-template-columns:1fr}
  .metode-num{display:none}
}

/* ================================================================
   RESPONSIVE + MOBILE MENU
   ================================================================ */

/* ── Mobile hamburger button ── */
.mob-menu-btn{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-md);
  justify-self:end;color:var(--c-text);padding:0;
  transition:background var(--tr);
}
.mob-menu-btn:hover{background:var(--c-surfoff)}
.mob-menu-btn svg{pointer-events:none}

/* ── Mobile nav drawer ── */
.mob-nav{
  display:none;flex-direction:column;gap:var(--sp1);
  padding:var(--sp3) var(--sp4) var(--sp4);
  background:rgba(249,248,245,.98);
  border-top:1px solid var(--c-border);
}
.mob-nav a{
  display:block;padding:var(--sp3) var(--sp4);
  border-radius:var(--r-md);
  color:var(--c-text);text-decoration:none;
  font-size:var(--tx-sm);font-weight:500;
  transition:background var(--tr),color var(--tr);
}
.mob-nav a:hover,.mob-nav a.active{background:var(--c-surfoff);color:var(--c-primary)}
.mob-nav-sep{height:1px;background:var(--c-border);margin:var(--sp2) 0}
.mob-nav-cats{display:flex;flex-wrap:wrap;gap:var(--sp2);padding:0 var(--sp4) var(--sp2)}
.mob-nav-cats a{
  font-size:var(--tx-xs);color:var(--c-muted);text-decoration:none;
  padding:var(--sp1) var(--sp3);border-radius:var(--r-full);
  border:1px solid var(--c-border);background:var(--c-surface);
  transition:border-color var(--tr),color var(--tr);
}
.mob-nav-cats a:hover{color:var(--c-primary);border-color:var(--c-primary)}

@media(max-width:700px){
  .hero-inner{grid-template-columns:1fr}
  .hero-legend{display:none}
  .header-inner{grid-template-columns:1fr auto}
  .header-nav{display:none}
  .mob-menu-btn{display:flex}
  .mob-nav.open{display:flex}
  .hero-stats{gap:var(--sp4)}
  .filter-bar{top:auto;position:static}
  .score-table th,.score-table td{padding:var(--sp3)}
}

/* =========================================================
   CARA BACA SKOR (page-cara-baca-skor.php) — v2.14.0
   ========================================================= */

.cbs-sections{display:flex;flex-direction:column;gap:var(--sp10);max-width:780px;margin:0 auto}

.cbs-section{display:grid;grid-template-columns:auto 1fr;gap:var(--sp5) var(--sp6);align-items:start}
.cbs-num{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--c-primary);color:#fff;border-radius:var(--r-full);
  font-family:var(--f-db);font-weight:700;font-size:var(--tx-base);
  flex-shrink:0;
}
.cbs-body{min-width:0}
.cbs-title{
  font-family:var(--f-display);font-size:var(--tx-xl);font-weight:600;
  color:var(--c-text);margin:0 0 var(--sp4);line-height:1.2;letter-spacing:-.015em;
}
.cbs-body p{font-size:var(--tx-base);color:var(--c-muted);line-height:1.8;margin:0 0 var(--sp4)}
.cbs-body p:last-child{margin-bottom:0}

/* ── Section 1: Analogy table ────────────────────────────── */
.cbs-analogy{
  display:flex;flex-direction:column;gap:var(--sp2);
  margin-top:var(--sp5);padding:var(--sp5);
  background:var(--c-surfoff);border-radius:var(--r-lg);
}
.cbs-analogy-row{
  display:grid;grid-template-columns:110px 1fr;gap:var(--sp4);
  align-items:center;padding:var(--sp2) 0;
  border-bottom:1px solid var(--c-border);
}
.cbs-analogy-row:last-child{border-bottom:none}
.cbs-analogy-num{
  font-family:var(--f-db);font-weight:800;font-size:var(--tx-lg);
  letter-spacing:-.02em;text-align:left;
}
.cbs-analogy-text{font-family:var(--f-db);font-size:var(--tx-sm);color:var(--c-text);font-weight:500;line-height:1.4}
.cbs-color-aman    {color:var(--c-t1)}
.cbs-color-relatif {color:var(--c-t2)}
.cbs-color-hati    {color:var(--c-t3)}
.cbs-color-berisiko{color:var(--c-t4)}
.cbs-color-hindari {color:var(--c-t5)}

/* ── Section 2: Five-tier cards ──────────────────────────── */
.cbs-tiers{display:flex;flex-direction:column;gap:var(--sp3);margin-top:var(--sp5)}
.cbs-tier{
  padding:var(--sp5);border:1px solid var(--c-border);
  border-left:4px solid var(--c-border);border-radius:var(--r-lg);
  background:var(--c-surface);
}
.cbs-tier[data-tier="aman"]        {border-left-color:var(--c-t1);background:color-mix(in oklab,var(--c-t1) 3%,var(--c-surface))}
.cbs-tier[data-tier="relatif-aman"]{border-left-color:var(--c-t2);background:color-mix(in oklab,var(--c-t2) 3%,var(--c-surface))}
.cbs-tier[data-tier="hati-hati"]   {border-left-color:var(--c-t3);background:color-mix(in oklab,var(--c-t3) 3%,var(--c-surface))}
.cbs-tier[data-tier="berisiko"]    {border-left-color:var(--c-t4);background:color-mix(in oklab,var(--c-t4) 3%,var(--c-surface))}
.cbs-tier[data-tier="hindari"]     {border-left-color:var(--c-t5);background:color-mix(in oklab,var(--c-t5) 3%,var(--c-surface))}
.cbs-tier-head{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp3);flex-wrap:wrap}
.cbs-tier-range{
  font-family:var(--f-db);font-weight:700;font-size:var(--tx-lg);
  letter-spacing:-.01em;color:var(--c-text);
}
.cbs-tier-text{font-size:var(--tx-sm);color:var(--c-muted);line-height:1.7;margin:0}

/* ── Section 3: Anatomy list ─────────────────────────────── */
.cbs-anatomy{
  margin-top:var(--sp5);padding:var(--sp5) var(--sp5) var(--sp5) var(--sp8);
  background:var(--c-surfoff);border-radius:var(--r-lg);
  list-style:decimal;
}
.cbs-anatomy li{
  font-size:var(--tx-sm);color:var(--c-muted);line-height:1.8;
  margin-bottom:var(--sp3);padding-left:var(--sp2);
}
.cbs-anatomy li:last-child{margin-bottom:0}
.cbs-anatomy strong{color:var(--c-text);font-weight:600}

/* ── Section 4: Reminder cards ──────────────────────────── */
.cbs-reminders{display:flex;flex-direction:column;gap:var(--sp4);margin-top:var(--sp5)}
.cbs-reminder{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp4);
  padding:var(--sp5);background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--r-lg);
}
.cbs-reminder-icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--c-primary) 10%,transparent);
  border-radius:var(--r-md);
}
.cbs-reminder-icon svg{width:24px;height:24px}
.cbs-reminder-title{
  font-family:var(--f-display);font-size:var(--tx-base);font-weight:600;
  color:var(--c-text);margin:0 0 var(--sp2);line-height:1.3;
}
.cbs-reminder-text{font-size:var(--tx-sm);color:var(--c-muted);line-height:1.7;margin:0}

/* ── Section 5: FAQ accordion ───────────────────────────── */
.cbs-faq{display:flex;flex-direction:column;gap:var(--sp2);margin-top:var(--sp5)}
.cbs-faq-item{
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  background:var(--c-surface);overflow:hidden;
}
.cbs-faq-item[open]{border-color:color-mix(in oklab,var(--c-primary) 30%,var(--c-border))}
.cbs-faq-q{
  cursor:pointer;padding:var(--sp4) var(--sp5);
  font-family:var(--f-db);font-size:var(--tx-sm);font-weight:600;
  color:var(--c-text);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
  transition:background var(--tr);
}
.cbs-faq-q::-webkit-details-marker{display:none}
.cbs-faq-q::after{
  content:'+';font-size:1.5rem;font-weight:400;color:var(--c-muted);
  flex-shrink:0;transition:transform var(--tr);
}
.cbs-faq-item[open] .cbs-faq-q::after{content:'\2212';transform:rotate(0)}
.cbs-faq-q:hover{background:var(--c-surfoff)}
.cbs-faq-a{
  padding:0 var(--sp5) var(--sp4);
  font-size:var(--tx-sm);color:var(--c-muted);line-height:1.7;
}
.cbs-faq-a a{color:var(--c-primary);text-decoration:none;font-weight:500}
.cbs-faq-a a:hover{text-decoration:underline}

/* ── CTA final ───────────────────────────────────────────── */
.cbs-cta{
  text-align:center;padding:var(--sp10) var(--sp5);
  background:linear-gradient(180deg,color-mix(in oklab,var(--c-primary) 4%,var(--c-surface)) 0%,var(--c-surface) 100%);
  border-radius:var(--r-xl);margin-top:var(--sp10);
  border:1px solid color-mix(in oklab,var(--c-primary) 12%,var(--c-border));
}
.cbs-cta-title{
  font-family:var(--f-display);font-size:var(--tx-xl);font-weight:600;
  color:var(--c-text);margin:0 0 var(--sp3);letter-spacing:-.015em;
}
.cbs-cta-text{font-size:var(--tx-base);color:var(--c-muted);line-height:1.7;margin:0 0 var(--sp6);max-width:520px;margin-inline:auto}
.cbs-cta-buttons{display:flex;gap:var(--sp3);justify-content:center;flex-wrap:wrap}
.cbs-cta-btn{
  display:inline-flex;align-items:center;gap:var(--sp2);
  padding:var(--sp3) var(--sp5);
  font-family:var(--f-db);font-size:var(--tx-sm);font-weight:600;
  border-radius:var(--r-full);text-decoration:none;
  transition:transform var(--tr),box-shadow var(--tr);
}
.cbs-cta-btn-primary{background:var(--c-primary);color:#fff}
.cbs-cta-btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.cbs-cta-btn-ghost{background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border)}
.cbs-cta-btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary)}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:700px){
  .cbs-section{grid-template-columns:1fr;gap:var(--sp4)}
  .cbs-num{margin-bottom:0}
  .cbs-analogy-row{grid-template-columns:90px 1fr;gap:var(--sp3)}
  .cbs-anatomy{padding-left:var(--sp6)}
}

/* =========================================================
   SENSITIVITY SECTION (page-cara-baca-skor.php) — v2.16.0
   ========================================================= */

.cbs-sensitivity-example{
  margin-top:var(--sp5);padding:var(--sp5);
  background:var(--c-surfoff);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:var(--sp4);
}
.cbs-sensitivity-label{
  font-family:var(--f-db);font-size:var(--tx-xs);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted);
  margin-bottom:calc(-1 * var(--sp2));
}
.cbs-sensitivity-row{
  display:grid;grid-template-columns:160px 1fr;gap:var(--sp4);
  align-items:start;padding:var(--sp4) 0;
  border-top:1px solid var(--c-border);
}
.cbs-sensitivity-row:first-of-type{border-top:none}
.cbs-sensitivity-food{
  display:flex;flex-direction:column;gap:var(--sp2);
}
.cbs-sensitivity-food strong{
  font-family:var(--f-db);font-size:var(--tx-sm);font-weight:600;
  color:var(--c-text);
}
.cbs-sensitivity-reason{
  font-size:var(--tx-sm);color:var(--c-muted);line-height:1.7;
}
.cbs-sensitivity-note{
  display:flex;align-items:flex-start;gap:var(--sp3);
  margin-top:var(--sp4);padding:var(--sp4) var(--sp5);
  background:color-mix(in oklab,var(--c-primary) 6%,var(--c-surface));
  border-radius:var(--r-lg);
  border:1px solid color-mix(in oklab,var(--c-primary) 15%,var(--c-border));
}
.cbs-sensitivity-note svg{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  color:var(--c-primary);
}
.cbs-sensitivity-note span{
  font-size:var(--tx-sm);color:var(--c-muted);line-height:1.7;
}
@media(max-width:600px){
  .cbs-sensitivity-row{grid-template-columns:1fr;gap:var(--sp2)}
}