/* ============================================================
   ICM Indonesia — Blog stylesheet
   Shares the same design tokens as the main site (index.html)
   so every new post can reuse this file instead of re-writing CSS.
   ============================================================ */
:root{
  --blue:#0E4C92; --blue2:#1B6BC0; --blue-dk:#082B52; --blue-lt:#EAF2FB;
  --orange:#F7941D; --orange2:#FDB44B; --orange-m:rgba(247,148,29,0.14);
  --g1:#0B0F14; --g2:#1D242D; --g3:#3E4A57; --g4:#687583; --g5:#9AA6B2; --g6:#D4DBE2; --g7:#F3F6F9;
  --white:#FFFFFF; --wa:#25D366;
  --serif:'Instrument Serif',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--g1);overflow-x:hidden;}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;}
img{max-width:100%;display:block;}
a{color:inherit;}

/* NAV (identical to main site) */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:62px;background:rgba(255,255,255,0.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-brand img{width:36px;height:36px;}
.nav-brand b{font-size:1rem;font-weight:800;color:var(--blue-dk);letter-spacing:-0.02em;}
.nav-brand b span{color:var(--orange);}
.nav-brand small{display:block;font-size:0.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--g5);}
.nav-links{display:flex;gap:22px;align-items:center;}
.nav-links a{font-size:0.84rem;font-weight:500;color:var(--g3);text-decoration:none;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);}
.nav-cta{background:var(--orange)!important;color:#fff!important;padding:9px 22px;border-radius:100px;font-weight:700!important;box-shadow:0 4px 16px rgba(247,148,29,0.35);border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:0.83rem;text-decoration:none!important;transition:transform .2s;}
.nav-cta:hover{transform:translateY(-1px);}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none;}nav{padding:0 18px;}}

/* PAGE HERO (blog index + article header) */
.blog-hero{padding:150px 24px 64px;text-align:center;background:linear-gradient(to bottom,var(--g7),#fff);}
.blog-hero .eyebrow{font-size:0.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;display:inline-block;}
.blog-hero h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:850;letter-spacing:-0.03em;color:var(--blue-dk);max-width:760px;margin:0 auto 14px;line-height:1.14;}
.blog-hero p{font-size:0.98rem;color:var(--g4);max-width:560px;margin:0 auto;line-height:1.8;}
@media(max-width:600px){.blog-hero{padding:118px 18px 44px;}}

/* BLOG LISTING GRID */
.blog-list{padding:20px 24px 100px;}
.blog-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.post-card{background:#fff;border:1px solid var(--g6);border-radius:22px;overflow:hidden;text-decoration:none;display:block;transition:transform .3s,box-shadow .3s;}
.post-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(8,43,82,0.12);}
.post-card img{width:100%;height:220px;object-fit:cover;}
.post-card-body{padding:24px 26px 28px;}
.post-chip{display:inline-block;font-size:0.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:var(--blue-lt);border-radius:100px;padding:5px 13px;margin-bottom:14px;}
.post-card h2{font-size:1.15rem;font-weight:800;color:var(--blue-dk);letter-spacing:-0.015em;margin-bottom:9px;line-height:1.32;}
.post-card p{font-size:0.86rem;color:var(--g4);line-height:1.72;margin-bottom:14px;}
.post-date{font-size:0.76rem;color:var(--g5);font-weight:600;}
.post-more{display:inline-flex;align-items:center;gap:6px;font-size:0.83rem;font-weight:700;color:var(--orange);margin-top:12px;}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr;}}

/* ARTICLE PAGE */
.article-wrap{max-width:760px;margin:0 auto;padding:0 24px 100px;}
.article-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--g5);font-size:0.82rem;font-weight:600;margin-bottom:36px;}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--g6);}
.article-cover{border-radius:22px;overflow:hidden;margin-bottom:44px;box-shadow:0 24px 60px rgba(8,43,82,0.14);}
.article-cover img{width:100%;max-height:440px;object-fit:cover;}
.article-body{font-size:1.02rem;line-height:1.9;color:var(--g2);}
.article-body p{margin-bottom:22px;}
.article-body h2{font-size:1.5rem;font-weight:800;color:var(--blue-dk);letter-spacing:-0.02em;margin:48px 0 10px;line-height:1.28;}
.article-body h3{font-size:1.1rem;font-weight:800;color:var(--blue);letter-spacing:-0.01em;margin:28px 0 8px;}
.article-body .kicker{display:block;font-size:0.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:44px 0 6px;}
.article-body ul{margin:0 0 22px 20px;}
.article-body li{margin-bottom:9px;line-height:1.75;}
.article-body blockquote{margin:28px 0;padding:22px 28px;border-left:4px solid var(--orange);background:var(--g7);border-radius:0 16px 16px 0;font-style:italic;color:var(--g3);}
.article-body figure{margin:32px 0;}
.article-body figure img{border-radius:18px;width:100%;}
.article-body figcaption{font-size:0.8rem;color:var(--g5);text-align:center;margin-top:10px;}
.fig-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:32px 0;}
.fig-row figure{margin:0;}
@media(max-width:600px){.fig-row{grid-template-columns:1fr;}}

/* STAT GRID (ringkasan buah pelayanan) */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 36px;}
.stat-card{background:var(--g7);border-radius:16px;padding:20px 18px;text-align:center;}
.stat-num{font-size:1.7rem;font-weight:850;color:var(--blue-dk);letter-spacing:-0.02em;}
.stat-num span{color:var(--orange);}
.stat-label{font-size:0.76rem;color:var(--g4);margin-top:4px;line-height:1.5;}
@media(max-width:600px){.stat-grid{grid-template-columns:repeat(2,1fr);}}

/* INFO CARD (jadwal/lokasi dsb, gaya sama seperti strip section utama) */
.info-card{background:var(--blue-dk);border-radius:18px;padding:26px 28px;margin:28px 0;color:#fff;}
.info-card .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.1);font-size:0.9rem;}
.info-card .row:last-child{border-bottom:none;}
.info-card .row b{color:var(--orange2);font-weight:700;}

/* CTA back / share */
.article-cta{margin-top:56px;padding:32px 30px;background:linear-gradient(120deg,rgba(247,148,29,0.12),rgba(247,148,29,0.03));border:1px solid rgba(247,148,29,0.25);border-radius:18px;text-align:center;}
.article-cta p{font-size:0.94rem;color:var(--g3);margin-bottom:16px;}
.btn-hero{background:var(--orange);color:#fff;font-size:0.95rem;font-weight:700;padding:15px 32px;border-radius:100px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;box-shadow:0 10px 30px rgba(247,148,29,0.35);transition:transform .2s;text-decoration:none;}
.btn-hero:hover{transform:translateY(-2px);}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:700;color:var(--blue);text-decoration:none;margin-bottom:28px;}
.back-link:hover{color:var(--orange);}

/* SHARE BAR */
.share-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 36px;padding-bottom:28px;border-bottom:1px solid var(--g6);}
.share-label{font-size:0.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g5);margin-right:2px;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--g7);border:1px solid var(--g6);cursor:pointer;transition:transform .2s,background .2s;text-decoration:none;flex-shrink:0;}
.share-btn:hover{transform:translateY(-2px);background:var(--blue-lt);}
.share-btn svg{width:17px;height:17px;fill:var(--g3);}
.share-btn.share-wa:hover svg{fill:#25D366;}
.share-btn.share-fb:hover svg{fill:#1877F2;}
.share-btn.share-x:hover svg{fill:#0B0F14;}
.share-btn.share-copy{width:auto;padding:0 16px;gap:7px;font-size:0.78rem;font-weight:700;color:var(--g3);}
.share-btn.share-copy svg{width:14px;height:14px;}
.share-bar.share-bar-bottom{border-bottom:none;border-top:1px solid var(--g6);padding-top:28px;padding-bottom:0;margin:44px 0 0;}

/* FOOTER + WA FLOAT (shared) */
footer{background:#061A33;padding:34px 24px;text-align:center;}
footer p{font-size:0.78rem;color:rgba(255,255,255,0.4);line-height:1.8;}
footer a{color:rgba(255,255,255,0.6);text-decoration:none;}
footer a:hover{color:var(--orange);}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:250;width:58px;height:58px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,0.45);transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px;height:30px;fill:#fff;}