/* =========================================================
   Jurnal Sehat BioProargi — stylesheet halaman artikel
   Dipakai oleh artikel/index.html dan semua halaman artikel.
   ========================================================= */
:root{
  /* Palet "Herbal Bersih" — sama dengan landing page utama */
  --paper:#FCFBF7;
  --paper-2:#EEF6F0;
  --paper-3:#DCEBE1;
  --ink:#12211A;
  --ink-soft:#33453D;
  --ink-mute:#56675F;
  --emerald:#0A6647;
  --emerald-2:#0B7A55;
  --emerald-soft:#DCEFE3;
  --teal:#0E4A57;
  --deep:linear-gradient(135deg,#0B5A42 0%,#0C4E4A 55%,#0E4A57 100%);
  --sage:#B6EBCD;
  --gold:#F4B942;
  --gold-2:#E9A722;
  --gold-soft:#FFF3D6;
  --gold-ink:#7A4F00;
  --clay:#7A4F00;
  --line:rgba(18,33,26,.12);
  --line-strong:rgba(18,33,26,.22);
  --shadow:0 1px 2px rgba(10,60,40,.05),0 14px 40px -12px rgba(10,60,40,.18);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --max:1180px;
  --read:68ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
em{font-style:normal;color:var(--emerald);background:linear-gradient(transparent 64%,var(--gold-soft) 64%,var(--gold-soft) 92%,transparent 92%);padding:0 .06em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:15px;font-weight:600;color:var(--emerald);background:var(--emerald-soft);padding:6px 16px 6px 12px;border-radius:999px;letter-spacing:.01em}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-2)}

/* Tombol */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:16.5px;transition:transform .25s,background .25s,border-color .25s,color .25s}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--emerald);color:var(--paper)}
.btn-primary:hover{background:var(--emerald-2);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--line-strong);background:var(--paper)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald)}

/* Header */
.j-nav{position:sticky;top:0;z-index:40;background:rgba(246,243,236,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.j-nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.j-brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:21px;letter-spacing:-.01em;white-space:nowrap}
.logo-mark{width:32px;height:32px;flex-shrink:0}
.logo b{font-weight:500}
.logo span{color:var(--emerald-2);font-style:italic}
.j-sep{width:1px;height:26px;background:var(--line)}
.j-name{font-family:var(--serif);font-style:normal;font-size:19px;color:var(--emerald);white-space:nowrap}
.j-actions{display:flex;align-items:center;gap:10px}
.j-actions .btn{padding:10px 18px;font-size:16px}

/* ---------- HUB ---------- */
.hub-hero{padding:72px 0 56px;background:radial-gradient(55% 70% at 90% 30%,#E3F3E8 0%,rgba(227,243,232,0) 70%),radial-gradient(40% 50% at 0% 100%,#FFF3D6 0%,rgba(255,243,214,0) 70%)}
.hub-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:end}
.hub-hero h1{font-size:clamp(46px,6.4vw,84px);margin:18px 0 20px;line-height:1.02}
.hub-hero p{color:var(--ink-soft);font-size:18px;max-width:460px}
.search{margin-top:30px;position:relative;max-width:460px}
.search svg{position:absolute;left:20px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--ink-mute);pointer-events:none}
.search input{width:100%;font:inherit;font-size:17px;padding:15px 20px 15px 50px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.search input:focus{border-color:var(--emerald);background:var(--paper);box-shadow:0 0 0 4px rgba(14,79,60,.1)}

.feature{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border:1px solid var(--line);border-radius:28px;overflow:hidden;transition:box-shadow .35s,transform .35s}
.feature:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.feature .cover{aspect-ratio:16/9}
.feature-body{padding:26px 30px 30px}
.feature-body h2{font-size:clamp(26px,2.6vw,34px);margin:12px 0 10px}
.feature-body p{color:var(--ink-soft)}
.tag-feature{position:absolute;top:18px;left:18px;z-index:2;background:var(--gold);color:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}

/* Filter */
.filters{position:sticky;top:72px;z-index:30;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters-in{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.filters-in::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-size:16px;font-weight:500;padding:9px 18px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);transition:.2s}
.chip:hover{border-color:var(--emerald);color:var(--emerald)}
.chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:var(--paper)}
.chip[aria-current="page"]{background:var(--emerald);border-color:var(--emerald);color:var(--paper)}
.chip .n{opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums}

/* Grid artikel */
.list{padding:48px 0 96px}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.list-head h2{font-size:30px}
.list-head span{font-size:16px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.card{display:grid;grid-template-rows:auto 1fr;gap:18px}
.card .cover{aspect-ratio:4/3;border-radius:20px;transition:transform .5s}
.card:hover .cover{transform:scale(1.015)}
.card h3{font-size:23px;margin:10px 0 8px;transition:color .2s}
.card:hover h3{color:var(--emerald)}
.card p{font-size:17px;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:15px;color:var(--ink-mute)}
.meta .cat{color:var(--emerald-2);font-weight:600;letter-spacing:.04em}
.meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.empty{grid-column:1/-1;text-align:center;padding:56px 20px;border:1px dashed var(--line);border-radius:24px;color:var(--ink-mute)}

/* Cover (gambar atau pola bawaan) */
.cover{position:relative;overflow:hidden;background:var(--emerald-soft);border-radius:inherit}
.cover img{width:100%;height:100%;object-fit:cover}
.cover-art{position:absolute;inset:0;display:flex;align-items:flex-end;padding:22px;color:var(--paper)}
.cover-art svg{position:absolute;width:62%;right:-8%;top:-10%;opacity:.22;rotate:-18deg}
.cover-art::after{content:"";position:absolute;left:22px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.cover-art .ca-label{position:relative;font-family:var(--serif);font-style:normal;font-size:clamp(18px,2vw,24px);line-height:1.15;max-width:70%}
.cv-jantung{background:linear-gradient(150deg,#0B6B4B,#0B4A3A)}
.cv-pencernaan{background:linear-gradient(150deg,#3E8E6A,#2A6E52)}
.cv-detoks{background:linear-gradient(150deg,#0F6B70,#0E4A57)}
.cv-nutrisi{background:linear-gradient(150deg,#B5761A,#8C5A10)}
.cv-gaya-hidup{background:linear-gradient(150deg,#2F7D8C,#1D5E6B)}

.more-links{margin-top:40px;font-size:17px;color:var(--ink-soft)}
.more-links a{color:var(--emerald);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cat-hero{padding:48px 0 40px}
.cat-hero h1{font-size:clamp(38px,5vw,60px);margin:14px 0 12px}
.cat-hero .crumb{margin-bottom:18px}
.author-box{max-width:var(--read);margin-top:28px;display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:18px;border:1.5px solid var(--line)}
.author-box .ab-ico .logo-mark{width:44px;height:44px}
.author-box b{display:block;font-size:17px;margin-bottom:4px}
.author-box p{font-size:16px;color:var(--ink-soft)}
.author-box a{color:var(--emerald);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Pilar */
.pillars{background:var(--paper-2);padding:96px 0}
.pillars-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.pillars-head h2{font-size:clamp(32px,4vw,48px);margin-top:14px}
.pillars-head p{color:var(--ink-soft)}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.pillar{background:var(--paper);padding:32px 26px;display:flex;flex-direction:column;gap:12px;transition:background .3s}
.pillar:hover{background:#FBF9F4}
.pillar-ico{width:52px;height:52px;border-radius:16px;background:var(--emerald-soft);display:grid;place-items:center;color:var(--emerald)}
.pillar-ico svg{width:24px;height:24px}
.pillar h3{font-size:21px;margin-top:8px}
.pillar p{font-size:16.5px;color:var(--ink-soft);flex:1}
.pillar .more{font-size:15.5px;font-weight:600;color:var(--emerald);display:inline-flex;align-items:center;gap:6px}
.pillar .more svg{width:15px;height:15px;transition:translate .2s}
.pillar:hover .more svg{translate:4px 0}

/* CTA produk & konsultasi */
.promo{padding:96px 0}
.promo-box{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:var(--deep);color:var(--paper);border-radius:32px;padding:56px;overflow:hidden;position:relative}
.promo-box h2{font-size:clamp(30px,3.6vw,44px);color:var(--paper);margin:14px 0 14px}
.promo-box em{color:var(--gold);background:none}
.promo-box .eyebrow{color:var(--sage);background:rgba(255,255,255,.12)}
.promo-box p{color:rgba(246,243,236,.78);max-width:460px}
.promo-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.promo-box .btn-primary{background:var(--gold);color:var(--ink)}
.promo-box .btn-primary:hover{background:var(--gold-2)}
.promo-box .btn-ghost{border-color:rgba(246,243,236,.35);color:var(--paper)}
.promo-box .btn-ghost:hover{border-color:var(--paper);color:var(--paper)}
.promo-shots{position:relative;height:300px}
.promo-shots::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:rgba(246,243,236,.08)}
.promo-shots picture{position:absolute;display:block}
.promo-shots img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.3))}
.promo-shots .s1{width:46%;left:6%;top:4%}
.promo-shots .s2{width:54%;right:0;top:26%}

/* ---------- ARTIKEL ---------- */
.a-head{padding-block:56px 36px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:15.5px;color:var(--ink-mute);margin-bottom:26px}
.crumb a:hover{color:var(--emerald)}
.a-head h1{font-size:clamp(36px,5vw,62px);max-width:18ch;margin:16px 0 20px;line-height:1.06}
.a-lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:60ch}
.a-meta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:16px;color:var(--ink-mute)}
.a-meta b{color:var(--ink);font-weight:600}
.a-cover{border-radius:28px;aspect-ratio:21/9;margin-bottom:56px}
.a-cover .cover-art .ca-label{font-size:clamp(22px,3vw,34px)}
.a-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:48px;align-items:start;padding-bottom:88px}
.toc{position:sticky;top:104px;font-size:16px}
.toc b{display:block;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px;font-weight:600}
.toc ol{list-style:none;display:grid;gap:10px;border-left:1px solid var(--line)}
.toc a{display:block;padding-left:16px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-soft);line-height:1.4;transition:.2s}
.toc a:hover,.toc a.on{color:var(--emerald);border-left-color:var(--emerald)}
.share{position:sticky;top:104px;display:grid;gap:10px;font-size:16px}
.share b{font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:4px}
.share a,.share button{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);transition:.2s;text-align:left}
.share a:hover,.share button:hover{border-color:var(--emerald);color:var(--emerald)}
.share svg{width:17px;height:17px;flex-shrink:0}

/* Isi artikel (tipografi) */
.prose{max-width:var(--read);font-size:19px;line-height:1.8;color:var(--ink)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.6vw,32px);margin-top:1.9em;color:var(--ink);line-height:1.2}
.prose h3{font-size:22px;margin-top:1.6em;color:var(--ink)}
.prose h2 + *,.prose h3 + *{margin-top:.6em}
.prose a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{font-weight:600;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--emerald-2)}
.prose blockquote{border-left:3px solid var(--emerald);padding:6px 0 6px 22px;font-family:var(--serif);font-style:normal;font-size:21px;line-height:1.5;color:var(--emerald)}
.prose hr{border:0;height:1px;background:var(--line);margin:2.2em 0}
.prose img{border-radius:18px;width:100%}
.prose figure figcaption{font-size:16px;color:var(--ink-mute);margin-top:10px;text-align:center}
.prose .tips{background:var(--emerald-soft);border-radius:18px;padding:20px 24px;font-size:17.5px}
.prose .tips b{display:block;color:var(--emerald);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.prose > p:first-of-type::first-letter{font-family:var(--serif);float:left;font-size:3.6em;line-height:.9;padding:.06em .12em 0 0;color:var(--emerald)}

.note{max-width:var(--read);margin-top:44px;display:flex;gap:12px;padding:18px 20px;border-radius:16px;background:var(--paper-2);font-size:16px;color:var(--ink-soft)}
.note svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--emerald)}
.sources{max-width:var(--read);margin-top:28px;font-size:16px;color:var(--ink-mute)}
.sources b{display:block;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.sources ol{padding-left:1.2em;display:grid;gap:6px}
.sources a{text-decoration:underline;text-underline-offset:2px}

.a-promo{max-width:var(--read);margin-top:44px;display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:center;padding:26px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,#FBF9F4,var(--paper-2))}
.a-promo img{filter:drop-shadow(0 14px 18px rgba(14,50,38,.2))}
.a-promo h3{font-size:22px;margin-bottom:6px}
.a-promo p{font-size:16.5px;color:var(--ink-soft);margin-bottom:14px}
.a-promo .btn{padding:10px 18px;font-size:16px}

.related{background:var(--paper-2);padding:80px 0}
.related h2{font-size:32px;margin-bottom:32px}

/* Footer */
.j-foot{border-top:1px solid var(--line);padding:44px 0 36px;font-size:16px;color:var(--ink-soft)}
.j-foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.j-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.j-foot nav a:hover{color:var(--emerald)}
.disclaimer{margin-top:28px;padding:18px 20px;border-radius:16px;background:var(--paper-2);font-size:14px;line-height:1.7;color:var(--ink-mute)}
.copy{margin-top:20px;font-size:14px;color:var(--ink-mute)}

/* WA melayang */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:12px;padding:8px 22px 8px 8px;border-radius:999px;background:var(--emerald);color:var(--paper);font-weight:600;font-size:16.5px;box-shadow:0 0 0 1px rgba(246,243,236,.45),0 16px 34px -12px rgba(10,40,30,.8);transition:transform .3s,background .3s}
.wa-float:hover{transform:translateY(-3px);background:var(--emerald-2)}
.wa-ico{position:relative;width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--emerald);display:grid;place-items:center;flex-shrink:0}
.wa-ico svg{width:24px;height:24px}

/* Progress baca */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--emerald);z-index:50}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

@media (max-width:1100px){
  .a-grid{grid-template-columns:minmax(0,1fr) 200px}
  .toc{display:none}
}
@media (max-width:960px){
  .hub-hero-grid,.pillars-head,.promo-box{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .pillar-grid{grid-template-columns:1fr 1fr}
  .promo-shots{height:240px;max-width:420px}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .j-sep,.j-actions .btn-ghost{display:none}
  .j-name{font-size:17px}
  .logo{font-size:19px}.logo-mark{width:28px;height:28px}
  .j-brand{gap:10px}
  .hub-hero{padding:44px 0 40px}
  .feature-body{padding:22px}
  .grid{grid-template-columns:1fr;gap:36px}
  .pillar-grid{grid-template-columns:1fr}
  .pillars,.promo{padding:72px 0}
  .promo-box{padding:36px 24px;border-radius:26px}
  .a-head{padding-block:36px 28px}
  .a-cover{aspect-ratio:16/10;border-radius:20px;margin-bottom:36px}
  .a-grid{grid-template-columns:1fr;gap:0}
  .share{position:static;grid-template-columns:1fr 1fr;margin-top:36px}
  .share b{grid-column:1/-1}
  .prose{font-size:18px}
  .a-promo{grid-template-columns:1fr;text-align:left}
  .a-promo img{max-width:140px}
  .wa-float{right:10px;bottom:12px;font-size:14px;gap:9px;padding:6px 14px 6px 6px;white-space:nowrap}
  .wa-ico{width:38px;height:38px}
  .j-foot{padding-bottom:96px}
}
@media (max-width:420px){
  .j-name{display:none}
}