/* ================================================================
   DuniaSayur — Single Post System (ds- components)
   Wide container 1160px | Reading container 780px
   ================================================================ */
:root{--ds-green:#166534;--ds-green-dark:#14532d;--ds-green-light:#ecfdf5;--ds-text:#263238;--ds-muted:#5f6b76;--ds-border:#e5e9ee;--ds-bg:#f7f8fa;--ds-radius-sm:10px;--ds-radius-md:16px;--ds-wide-width:1160px;--ds-content-width:780px}
.ds-wide{width:min(100% - 40px,var(--ds-wide-width));margin-inline:auto}
.ds-reading{width:min(100% - 40px,var(--ds-content-width));margin-inline:auto}
.ds-article{padding-top:8px;background:var(--ds-bg)}

/* Breadcrumb */
.ds-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:20px 0 0;font-size:13.5px;line-height:1.4}
.ds-breadcrumb a{color:var(--ds-muted);text-decoration:none;font-weight:600}
.ds-breadcrumb a:hover{color:var(--ds-green)}
.ds-breadcrumb span[aria-hidden]{color:#c3ccd4}
.ds-bc-title{color:var(--ds-text);font-weight:700;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Header */
.ds-art-head{margin:20px 0 22px}
.ds-cat{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ds-green);margin-bottom:10px}
.ds-art-head h1{margin:0;font-size:clamp(28px,4.5vw,46px);line-height:1.14;font-weight:800;letter-spacing:-.015em;color:#111827;max-width:1000px}
.ds-intro{font-size:19px;line-height:1.65;color:var(--ds-muted);margin:14px 0 12px;max-width:900px}
.ds-art-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:13.5px;color:var(--ds-muted)}
.ds-art-meta strong{color:var(--ds-text);font-weight:700}
.ds-art-meta [aria-hidden]{color:#c3ccd4}

/* Hero: LCP, eager, 16:9-ish, anti CLS */
.ds-hero{margin:0 0 30px;border-radius:18px;overflow:hidden;background:#eef2f5}
.ds-hero-img{width:100%;height:auto;aspect-ratio:16/8.4;object-fit:cover;display:block}
.ds-hero-empty{aspect-ratio:16/8.4;display:grid;place-items:center;font-size:64px}

/* TOC */
.ds-toc{background:var(--ds-green-light);border:1px solid #c7e8d2;border-radius:var(--ds-radius-md);padding:20px 24px;margin:0 0 34px}
.ds-toc-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:800;color:var(--ds-green-dark);cursor:pointer}
.ds-toc-chev{transition:transform .2s;font-size:13px}
.ds-toc-toggle[aria-expanded=false] .ds-toc-chev{transform:rotate(-90deg)}
.ds-toc-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ds-toc-list li a{display:flex;gap:12px;align-items:baseline;text-decoration:none;color:var(--ds-text);font-size:14.5px;font-weight:600;line-height:1.45}
.ds-toc-list li a:hover{color:var(--ds-green)}
.ds-toc-n{color:var(--ds-green);font-weight:800;font-size:12px;letter-spacing:.02em}
@media(max-width:760px){.ds-toc{padding:16px 18px}.ds-toc-list li a{font-size:14px}}

/* Article content: editorial, TANPA card pembungkus */
.ds-article-content{font-size:18px;line-height:1.78;color:var(--ds-text)}
.ds-article-content p{margin:0 0 1.35em}
.ds-article-content h2{font-size:clamp(24px,3vw,28px);line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:2.1em 0 .7em;color:#111827;scroll-margin-top:84px}
.ds-article-content h2:first-child{margin-top:.4em}
.ds-article-content h3{font-size:clamp(19px,2.4vw,22px);line-height:1.3;font-weight:700;margin:1.7em 0 .55em;color:#111827;scroll-margin-top:84px}
.ds-article-content a{color:var(--ds-green);font-weight:600;text-decoration:underline;text-decoration-color:#a7d7b9;text-underline-offset:3px}
.ds-article-content a:hover{text-decoration-color:var(--ds-green)}
.ds-article-content ul,.ds-article-content ol{margin:0 0 1.4em;padding-left:1.35em;display:grid;gap:.55em}
.ds-article-content li{line-height:1.7}
.ds-article-content li::marker{color:var(--ds-green);font-weight:700}
.ds-article-content img{max-width:100%;height:auto;border-radius:var(--ds-radius-sm);display:block;margin:1.6em auto}
.ds-article-content figure{margin:1.8em 0}
.ds-article-content figcaption{text-align:center;color:var(--ds-muted);font-size:13px;margin-top:8px}
.ds-article-content strong{color:#111827}

/* Tips DuniaSayur component */
.ds-article-content .oc-tips{background:var(--ds-green-light);border:1px solid #c7e8d2;border-radius:14px;padding:20px 22px;margin:1.8em 0;font-size:16.5px;line-height:1.7;color:#1f3d2a}
.ds-article-content .oc-tips strong{color:var(--ds-green-dark)}
/* Checklist component */
.ds-article-content ul.oc-checks{list-style:none;padding-left:0}
.ds-article-content ul.oc-checks li{padding-left:30px;position:relative}
.ds-article-content ul.oc-checks li::before{content:"✅";position:absolute;left:0;top:1px;font-size:15px}
/* Practical table: responsive, scroll hanya di container */
.ds-article-content .ds-table-wrap{margin:1.8em 0;overflow-x:auto;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);-webkit-overflow-scrolling:touch}
.ds-article-content table.ds-table{width:100%;border-collapse:collapse;font-size:15px;margin:0;min-width:560px}
.ds-article-content table.ds-table th{background:var(--ds-green-light);color:var(--ds-green-dark);text-align:left;font-weight:800;padding:12px 14px;border-bottom:1.5px solid #c7e8d2;white-space:nowrap}
.ds-article-content table.ds-table td{padding:11px 14px;border-bottom:1px solid var(--ds-border);vertical-align:top;line-height:1.55}
.ds-article-content table.ds-table tr:last-child td{border-bottom:0}

/* Share */
.ds-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 26px;padding-top:22px;border-top:1px solid var(--ds-border)}
.ds-share-label{font-weight:800;font-size:14px;color:var(--ds-text)}
.ds-share-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;background:#fff;border:1px solid var(--ds-border);color:var(--ds-text);font-weight:700;font-size:13px;border-radius:999px;padding:9px 15px;min-height:38px;cursor:pointer;font-family:inherit;transition:border-color .15s}
.ds-share-btn:hover{border-color:var(--ds-green);color:var(--ds-green)}
.ds-share-btn.ds-wa{background:#e8f9ee;border-color:#bfe8cd;color:#166534}

/* CTA */
.ds-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,var(--ds-green-dark),var(--ds-green));border-radius:18px;padding:26px 30px;margin:6px 0 30px}
.ds-cta-copy strong{display:block;color:#fff;font-size:17.5px;letter-spacing:-.01em;margin-bottom:5px}
.ds-cta-copy span{color:#bbf7d0;font-size:14px;line-height:1.55}
.ds-cta-btn{flex-shrink:0;background:#fff;color:var(--ds-green-dark);font-weight:800;font-size:14.5px;text-decoration:none;border-radius:12px;padding:14px 24px;min-height:44px;display:inline-flex;align-items:center}
.ds-cta-btn:hover{background:#dcfce7}

/* Author box: ringan */
.ds-author{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);padding:18px 20px;margin-bottom:34px}
.ds-author-avatar{width:48px;height:48px;border-radius:14px;background:var(--ds-green-light);display:grid;place-items:center;font-size:24px;flex-shrink:0}
.ds-author small{display:block;color:var(--ds-muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ds-author strong{display:block;font-size:15.5px;color:#111827;margin:2px 0 4px}
.ds-author p{margin:0;color:var(--ds-muted);font-size:13.5px;line-height:1.55}

/* Related posts */
.ds-related-wrap{margin-top:14px;margin-bottom:44px}
.ds-rel-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 16px;color:#111827}
.ds-related{display:grid;gap:16px}
.ds-related.ds-rel-three{grid-template-columns:repeat(3,minmax(0,1fr))}
s-related.ds-rel-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px}
.ds-rel-card{background:#fff;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s}
.ds-rel-card:hover{border-color:#9fd8ae}
.ds-rel-thumb{aspect-ratio:16/9;background:#eef2f5;overflow:hidden}
.ds-rel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ds-rel-empty{width:100%;height:100%;display:grid;place-items:center;font-size:32px}
.ds-rel-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.ds-rel-cat{color:var(--ds-green);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ds-rel-body strong{font-size:15px;line-height:1.4;color:#111827;font-weight:700}
.ds-rel-body small{color:var(--ds-muted);font-size:12px}

.ds-back{display:inline-block;text-decoration:none;color:var(--ds-muted);font-weight:700;font-size:14px}
.ds-back:hover{color:var(--ds-green)}

/* ===== Tablet ===== */
@media(max-width:1024px){
.ds-related.ds-rel-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ===== Mobile (360-430px) ===== */
@media(max-width:760px){
.ds-wide{width:calc(100% - 32px)}
.ds-reading{width:calc(100% - 32px)}
.ds-breadcrumb{font-size:13px;padding-top:16px}
.ds-bc-title{max-width:150px}
.ds-art-head h1{font-size:clamp(28px,7.6vw,34px)}
.ds-intro{font-size:17px}
.ds-hero{border-radius:14px;margin-bottom:24px}
.ds-hero-img{aspect-ratio:16/10}
.ds-article-content{font-size:17px}
.ds-article-content h2{margin-top:1.8em}
.ds-cta{flex-direction:column;align-items:flex-start;padding:22px 20px}
.ds-cta-btn{width:100%;justify-content:center}
.ds-related.ds-rel-three,.ds-related.ds-rel-two{grid-template-columns:1fr}
}
@media(max-width:360px){
.ds-wide,.ds-reading{width:calc(100% - 24px)}
}
.ds-related.ds-rel-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px}
.ds-rel-card{background:#fff;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s}
.ds-rel-card:hover{border-color:#9fd8ae}
.ds-rel-thumb{aspect-ratio:16/9;background:#eef2f5;overflow:hidden}
.ds-rel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ds-rel-empty{width:100%;height:100%;display:grid;place-items:center;font-size:32px}
.ds-rel-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.ds-rel-cat{color:var(--ds-green);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ds-rel-body strong{font-size:15px;line-height:1.4;color:#111827;font-weight:700}
.ds-rel-body small{color:var(--ds-muted);font-size:12px}

.ds-back{display:inline-block;text-decoration:none;color:var(--ds-muted);font-weight:700;font-size:14px}
.ds-back:hover{color:var(--ds-green)}

/* ===== Tablet ===== */
@media(max-width:1024px){
.ds-related.ds-rel-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ===== Mobile (360-430px) ===== */
@media(max-width:760px){
.ds-wide{width:calc(100% - 32px)}
.ds-reading{width:calc(100% - 32px)}
.ds-breadcrumb{font-size:13px;padding-top:16px}
.ds-bc-title{max-width:150px}
.ds-art-head h1{font-size:clamp(28px,7.6vw,34px)}
.ds-intro{font-size:17px}
.ds-hero{border-radius:14px;margin-bottom:24px}
.ds-hero-img{aspect-ratio:16/10}
.ds-article-content{font-size:17px}
.ds-article-content h2{margin-top:1.8em}
.ds-cta{flex-direction:column;align-items:flex-start;padding:22px 20px}
.ds-cta-btn{width:100%;justify-content:center}
.ds-related.ds-rel-three,.ds-related.ds-rel-two{grid-template-columns:1fr}
}
@media(max-width:360px){
.ds-wide,.ds-reading{width:calc(100% - 24px)}
}