:root{--primary:#18b8e8;--dark:#111827;--muted:#6b7280;--bg:#f6f8fc}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--dark)}a{text-decoration:none;color:inherit}
.container{width:min(1120px,calc(100% - 32px));margin:auto}.site-header{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 8px 24px rgba(15,23,42,.07)}.nav{height:76px;display:flex;align-items:center;gap:18px}.brand{font-size:23px;font-weight:900;letter-spacing:-.8px}.brand span{color:var(--primary)}.search{position:relative;flex:1;max-width:720px;margin-left:auto}.search input{width:100%;border:0;background:#f1f3f6;border-radius:999px;padding:15px 20px 15px 46px;outline:0;font-weight:700}.search i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#9ca3af}.hamb{width:44px;height:44px;border:0;background:transparent;font-size:25px}
.hero{padding:86px 0 68px;background:linear-gradient(180deg,#fff,#f6f8fc)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}.badge{display:inline-flex;background:#e8f9ff;color:#0796c4;border-radius:999px;padding:9px 18px;font-weight:900;margin-bottom:16px}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1;letter-spacing:-2px;margin:0}.hero p{color:var(--muted);font-size:18px;line-height:1.75;max-width:560px}.btn{display:inline-flex;align-items:center;gap:9px;background:var(--primary);color:#fff;border-radius:999px;padding:13px 22px;font-weight:900;box-shadow:0 12px 24px rgba(24,184,232,.28)}
.featured-card,.post-card,.article-card{background:#fff;border-radius:22px;box-shadow:0 16px 38px rgba(15,23,42,.09);overflow:hidden}.featured-thumb{height:255px;background:linear-gradient(135deg,#0f172a,#25344d);display:flex;align-items:center;justify-content:center;color:#fff;font-size:60px;font-weight:900}.featured-thumb img,.thumb img{width:100%;height:100%;object-fit:cover}.featured-body{padding:24px}.featured-body span,.post-body span{color:var(--primary);font-weight:900;font-size:14px}.featured-body h2{font-size:25px;margin:10px 0}.featured-body p,.post-body p{color:var(--muted);line-height:1.6}
.section{padding:54px 0}.section-title{margin-bottom:28px}.section-title small{color:var(--primary);font-weight:900}.section-title h2{font-size:34px;margin:4px 0 0;letter-spacing:-1px}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.post-card{transition:.2s}.post-card:hover{transform:translateY(-4px)}.thumb{height:165px;background:linear-gradient(135deg,#111827,#25344d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}.post-body{padding:18px}.post-body h3{font-size:18px;line-height:1.35;margin:8px 0 10px}.meta{font-size:13px;color:#8a91a0;font-weight:700}
.article-page{padding:58px 0 90px}.article-container{max-width:930px}.article-card{padding:44px}.article-card h1{font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-1.5px;margin:10px 0 14px}.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:#7b8190;font-weight:700;margin-bottom:24px}.article-image{width:100%;border-radius:20px;margin:14px 0 24px}.lead{font-size:20px;line-height:1.8;color:#667085}.content{font-size:18px;line-height:1.9;color:#374151}.content img{max-width:100%;border-radius:16px}.related{margin-top:34px}.mini{grid-template-columns:repeat(3,1fr)}.footer{background:#0f172a;color:#d8dee9;padding:44px 0;margin-top:20px}
@media(max-width:900px){.container{width:min(100% - 30px,1120px)}.hero{padding:54px 0 44px}.hero-grid{grid-template-columns:1fr}.post-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.container{width:calc(100% - 30px)}.nav{height:auto;min-height:76px;flex-wrap:wrap;padding:12px 0}.brand{width:100%}.search{order:2;width:calc(100% - 58px);margin:0}.hamb{order:3}.hero h1{font-size:42px}.featured-thumb{height:190px}.section{padding:38px 0}.post-grid,.mini{grid-template-columns:1fr;gap:22px}.post-card{border-radius:18px}.thumb{height:178px}.article-card{padding:26px 22px;border-radius:22px}.article-page{padding:34px 0 70px}}

/* SHARE CODE + NOTIFICATIONS */
.site-header{z-index:100}.nav{position:relative;justify-content:space-between}.front-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.icon-btn{width:42px;height:42px;border:0;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#1f2937;position:relative;cursor:pointer}.icon-btn:hover{background:#f3f4f6}.notif-dot{position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;font-size:10px;border-radius:99px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;font-weight:900}.front-dropdown,.notif-dropdown{position:absolute;right:0;top:68px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 18px 45px rgba(15,23,42,.14);z-index:200;display:none;overflow:hidden}.front-dropdown.show,.notif-dropdown.show{display:block}.front-dropdown{width:220px;padding:10px}.front-dropdown a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:#374151;font-weight:700}.front-dropdown a:hover{background:#f3f4f6}.notif-dropdown{width:min(380px,calc(100vw - 30px))}.notif-head{padding:16px 18px;font-weight:900;border-bottom:1px solid #eef1f5}.notif-list{max-height:330px;overflow:auto}.notif-item{padding:14px 18px;border-bottom:1px solid #f1f3f6}.notif-item b{display:block;color:#111827;margin-bottom:5px}.notif-item p{margin:0;color:#6b7280;line-height:1.5}.notif-item small{color:#9ca3af}.notif-empty{padding:34px;text-align:center;color:#9ca3af}.notif-empty i{display:block;font-size:44px;margin-bottom:10px}.notif-all{display:flex;gap:8px;align-items:center;justify-content:center;padding:14px;font-weight:800;border-top:1px solid #eef1f5}.share-page{padding:54px 0 80px}.share-title{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px}.share-title h1{font-size:44px;line-height:1;margin:0 0 8px;font-weight:900;letter-spacing:-1.5px}.share-title p{color:#6b7280;font-size:18px;margin:0}.share-icon{width:54px;height:54px;border-radius:16px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:24px;color:#111827}.share-search{position:relative;margin-bottom:28px}.share-search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af}.share-search input{width:100%;border:1px solid #e5e7eb;border-radius:16px;padding:16px 18px 16px 48px;font-size:16px;outline:0;background:#fff}.code-list{display:grid;gap:22px}.code-card{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;box-shadow:0 8px 25px rgba(15,23,42,.05)}.code-window{background:#0f172a;color:#cbd5e1;padding:16px 18px 0;max-height:150px;overflow:hidden}.dots{display:flex;gap:8px;margin-bottom:12px}.dots span{width:13px;height:13px;border-radius:50%;display:block}.dots span:nth-child(1){background:#ff5f56}.dots span:nth-child(2){background:#ffbd2e}.dots span:nth-child(3){background:#27c93f}.code-window pre,.code-big-window pre{margin:0;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.65;white-space:pre;overflow:auto}.code-card-body{padding:18px 20px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.code-card-body h2{font-size:22px;margin:0 0 10px;font-weight:900;color:#111827}.lang-badge{display:inline-flex;background:#f3f4f6;border-radius:999px;padding:7px 12px;font-weight:900;color:#374151;font-size:13px}.code-meta{display:flex;gap:16px;color:#6b7280;font-weight:700}.back-link{display:inline-flex;gap:8px;align-items:center;color:#6b7280;font-weight:800;margin-bottom:24px}.code-detail-head h1{font-size:38px;font-weight:900;letter-spacing:-1px;margin:0 0 12px}.code-detail-head p{color:#6b7280;font-size:17px;line-height:1.7}.code-detail-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#6b7280;font-weight:800;margin-bottom:14px}.code-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 26px}.code-btn{border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:12px 16px;font-weight:900;color:#374151;cursor:pointer}.code-big-window{background:#0f172a;color:#cbd5e1;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(15,23,42,.18)}.code-titlebar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-family:'JetBrains Mono',monospace;color:#94a3b8}.code-titlebar .dots{margin:0}.code-big-window pre{padding:22px;max-height:70vh}.notif-page-list{display:grid;gap:14px}.notif-page-item{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(15,23,42,.04)}.notif-page-item h2{font-size:20px;margin:0 0 8px;font-weight:900}.notif-page-item p{color:#6b7280;line-height:1.7}.empty-state{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:45px;text-align:center;color:#9ca3af}.empty-state i{font-size:42px;display:block;margin-bottom:12px}@media(max-width:560px){.share-page{padding:42px 0 70px}.share-title h1{font-size:36px}.share-title p{font-size:16px}.code-card-body{padding:16px}.code-card-body h2{font-size:20px}.code-window pre,.code-big-window pre{font-size:12px}}


/* SHARE CODE SEARCH + SYNTAX UPDATE */
.header-search{display:block}
.front-actions{display:flex;align-items:center;gap:10px;margin-left:12px}
@media(max-width:560px){
  .header-search{order:3;width:100%;max-width:none;margin:4px 0 0}
  .front-actions{margin-left:auto}
  .nav{gap:10px}
}
.code-window code,.code-big-window code{color:#d6deff}
.code-window pre,.code-big-window pre{overflow:auto}
.code-textarea{
  font-family:"JetBrains Mono","Courier New",monospace!important;
  background:#0f172a!important;
  color:#e5e7eb!important;
  line-height:1.7;
  border-radius:16px!important;
}
.lang-badge{text-transform:lowercase}


/* PROFESSIONAL HEADER + STICKY FOOTER UPDATE */
html,body{min-height:100%}
body{display:flex;flex-direction:column}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.footer{flex-shrink:0}
.professional-nav{display:grid!important;grid-template-columns:auto minmax(260px,680px) auto;gap:18px;align-items:center;height:78px;position:relative}
.professional-nav .brand{white-space:nowrap;font-weight:900;letter-spacing:-.8px}
.header-search-pro{position:relative;width:100%;margin:0 auto}
.header-search-pro i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#9ca3af}
.header-search-pro input{width:100%;border:1px solid #edf0f5;background:#f7f8fb;border-radius:999px;padding:14px 18px 14px 48px;outline:0;font-weight:700;color:#374151}
.header-search-pro input:focus{background:#fff;border-color:#18b8e8;box-shadow:0 0 0 4px rgba(24,184,232,.12)}
.professional-nav .front-actions{margin-left:0;justify-self:end}
.icon-btn{border:1px solid #edf0f5;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.icon-btn:hover{background:#111827;color:#fff}
.front-dropdown,.notif-dropdown{top:66px}
.professional-footer{background:#0f172a;color:#d8dee9;padding:46px 0;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .7fr;gap:28px}
.footer-grid h3{font-size:24px;font-weight:900;margin:0 0 12px;color:#fff}
.footer-grid h4{font-size:15px;text-transform:uppercase;letter-spacing:.8px;color:#fff;margin:0 0 14px}
.footer-grid p{max-width:520px;color:#aeb7c7;line-height:1.7}
.footer-grid a{display:block;color:#cbd5e1;margin:9px 0;font-weight:700}
.footer-grid a:hover{color:#18b8e8}
.footer-muted{color:#64748b}
@media(max-width:760px){
  .professional-nav{height:auto;min-height:76px;grid-template-columns:auto auto;gap:12px;padding:12px 0}
  .professional-nav .brand{grid-column:1/2}
  .professional-nav .front-actions{grid-column:2/3}
  .header-search-pro{grid-column:1/3;grid-row:2}
  .footer-grid{grid-template-columns:1fr;gap:22px}
}

html[data-theme="dark"]{--dark:#f8fafc;--muted:#94a3b8;--bg:#0b1120}
html[data-theme="dark"] body{background:#0b1120;color:#e5e7eb}
html[data-theme="dark"] .site-header,html[data-theme="dark"] .post-card,html[data-theme="dark"] .featured-card,html[data-theme="dark"] .article-card,html[data-theme="dark"] .code-card,html[data-theme="dark"] .front-dropdown,html[data-theme="dark"] .notif-dropdown,html[data-theme="dark"] .header-search-pro input,html[data-theme="dark"] .share-search input{background:#111827;color:#e5e7eb;border-color:#1f2937}
html[data-theme="dark"] .hero{background:linear-gradient(180deg,#111827,#0b1120)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3{color:#f8fafc}
html[data-theme="dark"] p{color:#94a3b8}
.brand-logo{display:flex;align-items:center;gap:10px}.brand-logo img{height:34px;max-width:140px;object-fit:contain}
.theme-dropdown button{display:flex;width:100%;align-items:center;gap:12px;padding:12px;border:0;background:transparent;border-radius:12px;color:#374151;font-weight:800;text-align:left;cursor:pointer}
.theme-dropdown button:hover{background:#f3f4f6}
html[data-theme="dark"] .theme-dropdown button{color:#e5e7eb} html[data-theme="dark"] .theme-dropdown button:hover{background:#1f2937}
html[data-theme-choice="light"] [data-theme-set="light"],html[data-theme-choice="dark"] [data-theme-set="dark"],html[data-theme-choice="system"] [data-theme-set="system"]{background:rgba(24,184,232,.12);color:var(--primary)}
.site-shell{min-height:100vh;display:flex;flex-direction:column}.site-main{flex:1 0 auto}.footer{flex-shrink:0}
.professional-nav{display:grid!important;grid-template-columns:auto minmax(240px,680px) auto;gap:18px;align-items:center;height:78px;position:relative}
.header-search-pro{position:relative;width:100%;margin:0 auto}.header-search-pro i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#9ca3af}.header-search-pro input{width:100%;border:1px solid #edf0f5;background:#f7f8fb;border-radius:999px;padding:14px 18px 14px 48px;outline:0;font-weight:700}
@media(max-width:760px){.professional-nav{height:auto;min-height:76px;grid-template-columns:auto auto;gap:12px;padding:12px 0}.header-search-pro{grid-column:1/3;grid-row:2}.brand-logo span{font-size:20px}}

html[data-theme="dark"]{--dark:#f8fafc;--muted:#94a3b8;--bg:#0b1120}html[data-theme="dark"] body{background:#0b1120;color:#e5e7eb}html[data-theme="dark"] .site-header,html[data-theme="dark"] .post-card,html[data-theme="dark"] .featured-card,html[data-theme="dark"] .article-card,html[data-theme="dark"] .code-card,html[data-theme="dark"] .front-dropdown,html[data-theme="dark"] .notif-dropdown,html[data-theme="dark"] .header-search-pro input,html[data-theme="dark"] .share-search input{background:#111827;color:#e5e7eb;border-color:#1f2937}html[data-theme="dark"] .hero{background:linear-gradient(180deg,#111827,#0b1120)}html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3{color:#f8fafc}html[data-theme="dark"] p{color:#94a3b8}.brand-logo{display:flex;align-items:center;gap:10px}.brand-logo img{height:34px;max-width:140px;object-fit:contain}.theme-dropdown button{display:flex;width:100%;align-items:center;gap:12px;padding:12px;border:0;background:transparent;border-radius:12px;color:#374151;font-weight:800;text-align:left;cursor:pointer}.theme-dropdown button:hover{background:#f3f4f6}html[data-theme="dark"] .theme-dropdown button{color:#e5e7eb}html[data-theme="dark"] .theme-dropdown button:hover{background:#1f2937}html[data-theme-choice="light"] [data-theme-set="light"],html[data-theme-choice="dark"] [data-theme-set="dark"],html[data-theme-choice="system"] [data-theme-set="system"]{background:rgba(24,184,232,.12);color:var(--primary)}.site-shell{min-height:100vh;display:flex;flex-direction:column}.site-main{flex:1 0 auto}.footer{flex-shrink:0}.professional-nav{display:grid!important;grid-template-columns:auto minmax(240px,680px) auto;gap:18px;align-items:center;height:78px;position:relative}.header-search-pro{position:relative;width:100%;margin:0 auto}.header-search-pro i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#9ca3af}.header-search-pro input{width:100%;border:1px solid #edf0f5;background:#f7f8fb;border-radius:999px;padding:14px 18px 14px 48px;outline:0;font-weight:700}@media(max-width:760px){.professional-nav{height:auto;min-height:76px;grid-template-columns:auto auto;gap:12px;padding:12px 0}.header-search-pro{grid-column:1/3;grid-row:2}.brand-logo span{font-size:20px}}

.page-hero-card{background:#fff;border:1px solid #edf0f5;border-radius:28px;padding:34px;margin-bottom:28px;box-shadow:0 14px 34px rgba(15,23,42,.06)}
.page-hero-card h1{font-size:42px;line-height:1.08;margin:14px 0;color:#0f172a}
.page-hero-card p{font-size:18px;color:#667085;line-height:1.8}
.donation-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.donation-card,.faq-item{background:#fff;border:1px solid #edf0f5;border-radius:24px;padding:28px;box-shadow:0 12px 30px rgba(15,23,42,.05);margin-bottom:18px}
.qris-img{width:100%;max-width:360px;border-radius:20px;border:1px solid #edf0f5}
.neo-input{width:100%;border:1px solid #e5e7eb;border-radius:14px;padding:14px 16px;margin-bottom:12px;font-weight:700}
@media(max-width:760px){.donation-grid{grid-template-columns:1fr}.page-hero-card h1{font-size:32px}}
html[data-theme="dark"] .page-hero-card,html[data-theme="dark"] .donation-card,html[data-theme="dark"] .faq-item{background:#111827;border-color:#1f2937;color:#e5e7eb}
html[data-theme="dark"] .page-hero-card h1{color:#f8fafc}

/* Frontend Polish Fix */
.post-card .thumb,
.featured-thumb{
  overflow:hidden;
}
.post-card .thumb img,
.featured-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.qris-public-wrap{
  width:100%;
  max-width:380px;
  aspect-ratio:1/1;
  border:1px solid #edf0f5;
  border-radius:24px;
  padding:16px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qris-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
}
.donation-method-card .thumb{
  height:190px;
}
.faq-accordion{
  display:grid;
  gap:16px;
}
.faq-accordion-item{
  background:#fff;
  border:1px solid #edf0f5;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.faq-question{
  width:100%;
  border:0;
  background:transparent;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-weight:900;
  font-size:18px;
  color:#0f172a;
  text-align:left;
  cursor:pointer;
}
.faq-question i{
  transition:.2s;
  color:var(--primary);
}
.faq-question[aria-expanded="true"] i{
  transform:rotate(180deg);
}
.faq-answer{
  display:none;
  padding:0 24px 24px;
  color:#667085;
  line-height:1.8;
}
.faq-answer.show{
  display:block;
}
.terms-section{
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid #edf0f5;
}
.terms-section:last-child{
  border-bottom:0;
  margin-bottom:0;
}
html[data-theme="dark"] .faq-accordion-item,
html[data-theme="dark"] .qris-public-wrap{
  background:#111827;
  border-color:#1f2937;
}
html[data-theme="dark"] .faq-question{
  color:#f8fafc;
}
html[data-theme="dark"] .faq-answer{
  color:#94a3b8;
}
/* Midtrans Snap Donation UI */
.midtrans-donation-card{position:relative;overflow:hidden}.midtrans-donation-card:before{content:"";position:absolute;top:-80px;right:-80px;width:180px;height:180px;border-radius:50%;background:rgba(24,184,232,.12)}.payment-status-box{margin-top:14px}.payment-alert{border-radius:14px;padding:12px 14px;font-weight:700;font-size:14px;line-height:1.5}.payment-alert-info{background:#eef6ff;color:#1d4ed8;border:1px solid #bfdbfe}.payment-alert-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.payment-alert-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}html[data-theme="dark"] .payment-alert-info{background:#0f1b2d;color:#93c5fd;border-color:#1e3a8a}html[data-theme="dark"] .payment-alert-success{background:#052e1a;color:#6ee7b7;border-color:#065f46}html[data-theme="dark"] .payment-alert-danger{background:#3b0a0a;color:#fca5a5;border-color:#7f1d1d}

/* Midtrans Only Donation Polish */
.donation-hero{
  position:relative;
  overflow:hidden;
}
.donation-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:start;
}
.donation-info-panel{
  display:grid;
  gap:16px;
}
.info-item{
  display:flex;
  gap:16px;
  background:#fff;
  border:1px solid #edf0f5;
  border-radius:22px;
  padding:22px;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.info-item i{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#18b8e8,#5865f2);
  flex-shrink:0;
}
.info-item h3{
  margin:0 0 6px;
  color:#0f172a;
}
.info-item p{
  margin:0;
  color:#667085;
  line-height:1.7;
}
.donation-method-card{
  border:0;
  text-align:left;
  cursor:pointer;
  width:100%;
}
.donation-method-card:hover{
  transform:translateY(-3px);
}
@media(max-width:850px){
  .donation-layout{grid-template-columns:1fr}
}
html[data-theme="dark"] .info-item{
  background:#111827;
  border-color:#1f2937;
}
html[data-theme="dark"] .info-item h3{
  color:#f8fafc;
}
html[data-theme="dark"] .info-item p{
  color:#94a3b8;
}


/* Bootstrap 5 + Soft Public Cards Update */
body.neo-soft-public-cards .featured-card,
body.neo-soft-public-cards .post-card,
body.neo-soft-public-cards .article-card,
body.neo-soft-public-cards .page-hero-card,
body.neo-soft-public-cards .donation-card,
body.neo-soft-public-cards .info-item,
body.neo-soft-public-cards .faq-accordion-item,
body.neo-soft-public-cards .qris-public-wrap,
body.neo-soft-public-cards .soft-public-card{
  border:0!important;
  box-shadow:0 18px 46px rgba(15,23,42,.075)!important;
}

body.neo-soft-public-cards .post-card,
body.neo-soft-public-cards .featured-card,
body.neo-soft-public-cards .article-card,
body.neo-soft-public-cards .page-hero-card,
body.neo-soft-public-cards .donation-card,
body.neo-soft-public-cards .info-item{
  background:rgba(255,255,255,.96);
}

.donation-section{
  background:
    radial-gradient(circle at 15% 10%, rgba(24,184,232,.10), transparent 28%),
    radial-gradient(circle at 85% 5%, rgba(88,101,242,.09), transparent 30%);
}

.donation-hero{
  padding:42px;
}

.payment-card{
  position:relative;
  overflow:hidden;
}

.payment-card:after{
  content:"";
  position:absolute;
  top:-100px;
  right:-90px;
  width:210px;
  height:210px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(24,184,232,.16),rgba(88,101,242,.10));
  pointer-events:none;
}

.donation-form-pro{
  position:relative;
  z-index:1;
}

.donation-form-pro label{
  display:block;
  color:#334155;
  font-weight:900;
  margin:14px 0 8px;
}

.donation-main-btn{
  width:100%;
  justify-content:center;
  border:0;
  margin-top:8px;
}

.donation-info-panel .soft-public-card{
  transition:.2s ease;
}

.donation-info-panel .soft-public-card:hover{
  transform:translateY(-2px);
}

.donation-preset-grid .donation-method-card{
  border:0!important;
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  background:#fff;
}

.donation-preset-grid .donation-method-card span{
  color:var(--primary);
}

@media(max-width:560px){
  .donation-hero{
    padding:28px 22px;
  }
  .donation-layout{
    gap:18px;
  }
}


/* =========================================================
   NEOBLOX PUBLIC UI CONSOLIDATION
   Minimalis, soft, professional, Bootstrap 5 safe.
   ========================================================= */
:root{
  --neo-bg:#f7f9fd;
  --neo-card:#ffffff;
  --neo-text:#0f172a;
  --neo-muted:#667085;
  --neo-shadow:0 18px 48px rgba(15,23,42,.075);
  --neo-shadow-hover:0 24px 58px rgba(15,23,42,.11);
  --neo-radius:28px;
}

body{
  background:var(--neo-bg);
}

.site-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.section{
  position:relative;
  padding-top:34px;
  padding-bottom:54px;
}

.site-header{
  z-index:50;
}

body.neo-soft-public-cards .page-hero-card,
body.neo-soft-public-cards .featured-card,
body.neo-soft-public-cards .post-card,
body.neo-soft-public-cards .article-card,
body.neo-soft-public-cards .donation-card,
body.neo-soft-public-cards .info-item,
body.neo-soft-public-cards .faq-accordion-item,
body.neo-soft-public-cards .soft-public-card,
body.neo-soft-public-cards .notification-card{
  border:0!important;
  box-shadow:var(--neo-shadow)!important;
  background:rgba(255,255,255,.98)!important;
}

.page-hero-card,
.donation-card,
.info-item,
.post-card,
.article-card,
.faq-accordion-item{
  border-radius:var(--neo-radius)!important;
}

.btn,
.neo-btn,
.donation-main-btn{
  border-radius:999px!important;
  font-weight:900!important;
  letter-spacing:-.01em;
}

.badge,
.neo-badge{
  border-radius:999px!important;
  padding:.55rem .9rem;
  font-weight:900;
  border:0!important;
}

.neo-input,
input.neo-input,
textarea.neo-input,
select.neo-input{
  border:0!important;
  box-shadow:inset 0 0 0 1px rgba(226,232,240,.95);
  border-radius:20px!important;
  background:#fff;
  outline:none;
  transition:.18s ease;
}

.neo-input:focus{
  box-shadow:inset 0 0 0 2px var(--primary), 0 10px 26px rgba(24,184,232,.12)!important;
}

.donation-section{
  padding-top:40px;
}

.donation-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:26px;
  align-items:start;
}

.payment-card,
.donation-card{
  padding:32px;
}

.donation-info-panel{
  display:grid;
  gap:18px;
}

.info-item{
  display:flex!important;
  align-items:flex-start;
  gap:18px;
  padding:24px;
}

.info-item i{
  width:54px!important;
  height:54px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#18b8e8,#4e73df)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0;
  font-size:20px!important;
}

.info-item h3{
  font-size:22px;
  font-weight:900;
  margin:0 0 8px;
  color:var(--neo-text);
}

.info-item p{
  margin:0;
  color:var(--neo-muted);
  line-height:1.75;
  font-weight:650;
}

.donation-preset-grid .post-card{
  overflow:hidden;
  text-align:left;
  padding:0;
  appearance:none;
  border:0!important;
  background:#fff;
  transition:.22s ease;
}

.donation-preset-grid .post-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--neo-shadow-hover)!important;
}

.donation-preset-grid .thumb{
  overflow:hidden;
}

.donation-preset-grid .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.site-footer{
  margin-top:auto;
}

@media(max-width:900px){
  .donation-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .section{
    padding-top:26px;
  }
  .payment-card,
  .donation-card,
  .page-hero-card{
    padding:26px 22px;
  }
  .info-item{
    padding:22px;
  }
  .info-item h3{
    font-size:20px;
  }
}

html[data-theme="dark"]{
  --neo-bg:#060b14;
  --neo-card:#111827;
  --neo-text:#f8fafc;
  --neo-muted:#94a3b8;
  --neo-shadow:0 18px 48px rgba(0,0,0,.25);
}
html[data-theme="dark"] body.neo-soft-public-cards .page-hero-card,
html[data-theme="dark"] body.neo-soft-public-cards .featured-card,
html[data-theme="dark"] body.neo-soft-public-cards .post-card,
html[data-theme="dark"] body.neo-soft-public-cards .article-card,
html[data-theme="dark"] body.neo-soft-public-cards .donation-card,
html[data-theme="dark"] body.neo-soft-public-cards .info-item,
html[data-theme="dark"] body.neo-soft-public-cards .faq-accordion-item,
html[data-theme="dark"] body.neo-soft-public-cards .soft-public-card{
  background:#111827!important;
}


/* =========================================================
   NEOBLOX TYPOGRAPHY POLISH
   Fokus: keterbacaan teks tanpa merombak UI/layout utama.
   ========================================================= */

:root{
  --neo-font-main: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --neo-text-main: #101828;
  --neo-text-soft: #475467;
  --neo-text-muted: #667085;
  --neo-heading-tight: -0.035em;
  --neo-line-body: 1.78;
}

/* Base text lebih stabil walaupun Bootstrap 5 aktif */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.site-shell{
  font-family: var(--neo-font-main) !important;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--neo-text-main);
  font-weight: 500;
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Jangan biarkan Bootstrap membuat teks terasa terlalu bulky */
.site-shell p,
.site-shell li,
.site-shell input,
.site-shell textarea,
.site-shell select,
.site-shell button{
  font-family: var(--neo-font-main) !important;
}

/* Header / navigation */
.site-header,
.site-header a,
.site-header button,
.site-header input,
.search-box,
.search-box input{
  font-size: 14.5px;
  font-weight: 700;
}

.search-box input::placeholder,
.site-shell input::placeholder,
.site-shell textarea::placeholder{
  color: #8b95a7;
  font-weight: 700;
}

/* Hero typography */
.page-hero-card h1,
.hero h1,
.hero-title{
  font-size: clamp(32px, 7vw, 54px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.055em;
  color: var(--neo-text-main);
  margin-bottom: 18px;
}

.page-hero-card p,
.hero p,
.hero-description{
  font-size: clamp(15.5px, 3.8vw, 18px);
  line-height: 1.82;
  color: var(--neo-text-muted);
  font-weight: 600;
  max-width: 720px;
}

/* Section title */
.section-title small,
.post-body span,
.featured-body span,
.article-category,
.badge{
  font-size: 12px !important;
  line-height: 1.3;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}

.section-title h2{
  font-size: clamp(26px, 5.8vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--neo-text-main);
}

/* Card list artikel */
.post-card h3,
.featured-card h3,
.post-body h3,
.featured-body h3{
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.34;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--neo-text-main);
  margin-bottom: 10px;
}

.post-card p,
.featured-card p,
.post-body p,
.featured-body p{
  font-size: 15.2px;
  line-height: 1.76;
  color: var(--neo-text-muted);
  font-weight: 600;
  margin-bottom: 0;
}

.meta,
.post-meta,
.article-meta,
.post-card .meta,
.featured-card .meta{
  font-size: 13.5px;
  line-height: 1.5;
  color: #7b8794;
  font-weight: 700;
}

/* Detail artikel: fokus keterbacaan */
.article-card{
  color: var(--neo-text-main);
}

.article-title,
.article-card > h1,
.article-card h1:first-child,
.article-header h1{
  font-size: clamp(28px, 6.6vw, 44px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--neo-text-main);
  margin-bottom: 22px;
}

.article-content{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: var(--neo-line-body);
  color: var(--neo-text-soft);
  font-weight: 500;
}

.article-content p{
  font-size: 16px;
  line-height: 1.86;
  color: var(--neo-text-soft);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 22px;
}

.article-content strong,
.article-content b{
  color: var(--neo-text-main);
  font-weight: 850;
}

.article-content h2{
  font-size: clamp(23px, 5vw, 31px);
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--neo-text-main);
  margin-top: 38px;
  margin-bottom: 15px;
}

.article-content h3{
  font-size: clamp(20px, 4.2vw, 25px);
  line-height: 1.36;
  font-weight: 850;
  letter-spacing: -0.025em;
  color: var(--neo-text-main);
  margin-top: 30px;
  margin-bottom: 12px;
}

.article-content h4{
  font-size: 18px;
  line-height: 1.4;
  font-weight: 850;
  color: var(--neo-text-main);
  margin-top: 26px;
  margin-bottom: 10px;
}

.article-content ul,
.article-content ol{
  padding-left: 22px;
  margin-top: 0;
  margin-bottom: 24px;
}

.article-content li{
  margin-bottom: 9px;
  padding-left: 2px;
  line-height: 1.8;
  color: var(--neo-text-soft);
}

.article-content blockquote{
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--primary, #18b8e8);
  background: rgba(24,184,232,.07);
  border-radius: 16px;
  color: var(--neo-text-main);
  font-weight: 700;
  line-height: 1.75;
}

.article-content img{
  margin: 18px 0 26px;
  border-radius: 20px;
}

.article-content a{
  color: var(--primary, #18b8e8);
  font-weight: 800;
  text-decoration: none;
}

.article-content a:hover{
  text-decoration: underline;
}

/* Meta detail artikel */
.article-author,
.article-info,
.article-meta-row,
.article-card .meta-row{
  font-size: 14px;
  line-height: 1.6;
  color: #7b8794;
  font-weight: 700;
}

/* Donation typography: UI tetap, teks dibikin halus */
.donation-card h2,
.payment-card h2{
  font-size: clamp(25px, 5.2vw, 36px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--neo-text-main);
  margin-bottom: 14px;
}

.donation-card p,
.payment-card p{
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--neo-text-muted);
  font-weight: 600;
}

.donation-form-pro label{
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 850;
  color: var(--neo-text-main);
}

.neo-input,
input.neo-input,
textarea.neo-input,
select.neo-input{
  font-size: 15px !important;
  line-height: 1.55;
  font-weight: 650;
}

.donation-main-btn,
.btn{
  font-size: 15px;
  line-height: 1.45;
}

.info-item h3{
  font-size: clamp(20px, 4.6vw, 25px) !important;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.info-item p{
  font-size: 15.3px !important;
  line-height: 1.78 !important;
  font-weight: 600 !important;
  color: var(--neo-text-muted) !important;
}

/* FAQ readability */
.faq-question{
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.faq-answer{
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--neo-text-soft);
  font-weight: 550;
}

/* Share Code readability */
.code-title,
.share-code-title{
  font-weight: 900;
  letter-spacing: -0.035em;
}

pre,
code,
.code-block,
.prism-code{
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13.5px;
  line-height: 1.72;
}

/* Footer */
.site-footer,
.site-footer p,
.site-footer a{
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

/* Mobile refinement */
@media(max-width: 560px){
  body,
  .site-shell{
    font-size: 15px;
    line-height: 1.68;
  }

  .page-hero-card h1,
  .hero h1,
  .hero-title{
    font-size: clamp(31px, 10vw, 42px);
    line-height: 1.09;
    letter-spacing: -0.052em;
  }

  .page-hero-card p,
  .hero p,
  .hero-description{
    font-size: 15.5px;
    line-height: 1.78;
  }

  .article-title,
  .article-card > h1,
  .article-card h1:first-child,
  .article-header h1{
    font-size: clamp(27px, 8.4vw, 36px);
    line-height: 1.18;
  }

  .article-content{
    max-width: 100%;
    font-size: 15.6px;
    line-height: 1.82;
  }

  .article-content p{
    font-size: 15.6px;
    line-height: 1.84;
    margin-bottom: 21px;
  }

  .article-content h2{
    font-size: clamp(22px, 6.7vw, 29px);
    margin-top: 34px;
  }

  .article-content h3{
    font-size: clamp(19px, 5.7vw, 24px);
  }

  .post-card h3,
  .featured-card h3,
  .post-body h3,
  .featured-body h3{
    font-size: 20px;
    line-height: 1.34;
  }

  .post-card p,
  .featured-card p,
  .post-body p,
  .featured-body p{
    font-size: 15px;
    line-height: 1.72;
  }

  .info-item h3{
    font-size: 21px !important;
  }

  .info-item p{
    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  pre,
  code,
  .code-block,
  .prism-code{
    font-size: 12.8px;
    line-height: 1.68;
  }
}

/* Dark mode typography */
html[data-theme="dark"]{
  --neo-text-main:#f8fafc;
  --neo-text-soft:#cbd5e1;
  --neo-text-muted:#94a3b8;
}

html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-content li{
  color:#cbd5e1;
}

html[data-theme="dark"] .post-card p,
html[data-theme="dark"] .featured-card p,
html[data-theme="dark"] .donation-card p,
html[data-theme="dark"] .payment-card p,
html[data-theme="dark"] .info-item p{
  color:#94a3b8 !important;
}


/* =========================================================
   NEOBLOX MOBILE READABILITY FIX
   Fokus: detail artikel dan semua halaman mobile agar teks tidak kebesaran.
   UI/card/header tetap dipertahankan.
   ========================================================= */

/* Desktop tetap nyaman, tapi tidak terlalu bulky */
.site-shell{
  font-size: 15px;
  line-height: 1.68;
}

/* Batasi lebar area baca artikel supaya paragraf tidak terlalu melebar di tablet/desktop */
.article-card,
.article-detail,
.article-wrapper{
  overflow-wrap: break-word;
}

.article-content{
  max-width: 720px;
}

/* Detail artikel desktop/tablet */
.article-content p{
  font-size: 15.5px !important;
  line-height: 1.78 !important;
  margin-bottom: 18px !important;
  font-weight: 500 !important;
}

.article-content li{
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 7px !important;
}

.article-content h2{
  font-size: clamp(22px, 4.3vw, 29px) !important;
  line-height: 1.28 !important;
  margin-top: 30px !important;
  margin-bottom: 12px !important;
  font-weight: 850 !important;
  letter-spacing: -0.032em !important;
}

.article-content h3{
  font-size: clamp(19px, 3.8vw, 24px) !important;
  line-height: 1.32 !important;
  margin-top: 24px !important;
  margin-bottom: 10px !important;
  font-weight: 820 !important;
}

.article-title,
.article-card > h1,
.article-card h1:first-child,
.article-header h1{
  font-size: clamp(26px, 5.8vw, 40px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 18px !important;
}

/* Homepage/card tetap readable tapi lebih compact */
.post-card h3,
.featured-card h3,
.post-body h3,
.featured-body h3{
  font-size: clamp(18px, 4.2vw, 22px) !important;
  line-height: 1.32 !important;
}

.post-card p,
.featured-card p,
.post-body p,
.featured-body p{
  font-size: 14.7px !important;
  line-height: 1.66 !important;
}

/* Page umum seperti FAQ, Donasi, S&K tidak ikut membesar */
.page-hero-card h1,
.hero h1,
.hero-title{
  font-size: clamp(29px, 6.2vw, 48px) !important;
  line-height: 1.1 !important;
}

.page-hero-card p,
.hero p,
.hero-description{
  font-size: clamp(14.8px, 3.4vw, 17px) !important;
  line-height: 1.72 !important;
}

.donation-card p,
.payment-card p,
.info-item p,
.faq-answer,
.terms-card p,
.terms-section p{
  font-size: 14.8px !important;
  line-height: 1.72 !important;
}

.donation-card h2,
.payment-card h2{
  font-size: clamp(23px, 4.8vw, 34px) !important;
  line-height: 1.18 !important;
}

.info-item h3{
  font-size: clamp(18px, 4.2vw, 23px) !important;
  line-height: 1.25 !important;
}

/* Mobile compact typography */
@media(max-width: 640px){
  .site-shell,
  body{
    font-size: 14.5px !important;
    line-height: 1.62 !important;
  }

  .container,
  .site-shell .container{
    width: min(100% - 32px, 980px);
  }

  .section{
    padding-top: 22px !important;
    padding-bottom: 40px !important;
  }

  /* Header/search tetap enak tapi tidak makan ruang terlalu besar */
  .site-header a,
  .site-header button,
  .search-box,
  .search-box input{
    font-size: 13.5px !important;
  }

  .search-box input{
    min-height: 46px;
  }

  /* Card artikel/detail jangan terlalu sempit/mepet */
  .article-card,
  .page-hero-card,
  .donation-card,
  .soft-public-card{
    padding: 22px 20px !important;
    border-radius: 24px !important;
  }

  /* Judul detail artikel */
  .article-title,
  .article-card > h1,
  .article-card h1:first-child,
  .article-header h1{
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.17 !important;
    letter-spacing: -0.042em !important;
    margin-bottom: 16px !important;
  }

  /* INI YANG PALING PENTING: isi artikel mobile */
  .article-content{
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  .article-content p{
    font-size: 15px !important;
    line-height: 1.72 !important;
    margin-bottom: 17px !important;
    font-weight: 500 !important;
    color: #475467 !important;
  }

  .article-content h2{
    font-size: clamp(21px, 6vw, 27px) !important;
    line-height: 1.25 !important;
    margin-top: 26px !important;
    margin-bottom: 10px !important;
    font-weight: 840 !important;
    letter-spacing: -0.034em !important;
  }

  .article-content h3{
    font-size: clamp(18.5px, 5.2vw, 23px) !important;
    line-height: 1.3 !important;
    margin-top: 22px !important;
    margin-bottom: 9px !important;
    font-weight: 820 !important;
  }

  .article-content h4{
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
  }

  .article-content ul,
  .article-content ol{
    padding-left: 20px !important;
    margin-bottom: 18px !important;
  }

  .article-content li{
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 6px !important;
  }

  .article-content blockquote{
    font-size: 14.8px !important;
    line-height: 1.68 !important;
    padding: 15px 17px !important;
    margin: 22px 0 !important;
  }

  .article-content img{
    margin: 14px 0 20px !important;
    border-radius: 16px !important;
  }

  /* List/card artikel */
  .post-card h3,
  .featured-card h3,
  .post-body h3,
  .featured-body h3{
    font-size: 18.5px !important;
    line-height: 1.32 !important;
    letter-spacing: -0.026em !important;
  }

  .post-card p,
  .featured-card p,
  .post-body p,
  .featured-body p{
    font-size: 14.4px !important;
    line-height: 1.62 !important;
  }

  .meta,
  .post-meta,
  .article-meta,
  .post-card .meta,
  .featured-card .meta{
    font-size: 12.8px !important;
    line-height: 1.45 !important;
  }

  /* Donasi/FAQ/S&K mobile */
  .page-hero-card h1,
  .hero h1,
  .hero-title{
    font-size: clamp(27px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }

  .page-hero-card p,
  .hero p,
  .hero-description{
    font-size: 14.5px !important;
    line-height: 1.68 !important;
  }

  .donation-card h2,
  .payment-card h2{
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.18 !important;
  }

  .donation-card p,
  .payment-card p,
  .info-item p,
  .faq-answer,
  .terms-card p,
  .terms-section p{
    font-size: 14.5px !important;
    line-height: 1.68 !important;
  }

  .info-item{
    gap: 14px !important;
    padding: 20px !important;
  }

  .info-item i{
    width: 46px !important;
    height: 46px !important;
    font-size: 17px !important;
  }

  .info-item h3{
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .neo-input,
  input.neo-input,
  textarea.neo-input,
  select.neo-input{
    font-size: 14.3px !important;
    line-height: 1.5 !important;
  }

  .btn,
  .neo-btn,
  .donation-main-btn{
    font-size: 14.3px !important;
  }

  pre,
  code,
  .code-block,
  .prism-code{
    font-size: 12.4px !important;
    line-height: 1.62 !important;
  }
}

/* Extra small phone */
@media(max-width: 390px){
  .article-content p,
  .article-content li{
    font-size: 14.6px !important;
    line-height: 1.68 !important;
  }

  .article-content h2{
    font-size: 20.5px !important;
  }

  .article-title,
  .article-card > h1,
  .article-card h1:first-child,
  .article-header h1{
    font-size: 24px !important;
  }
}

/* Dark mode readability */
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-content li{
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-title{
  color: #f8fafc !important;
}


/* =========================================================
   NEOBLOX ARTICLE TEXT HIERARCHY FIX
   Masalah yang diperbaiki:
   - Paragraf terlalu mirip heading.
   - Body text terlalu berat/tebal.
   - Heading kurang kontras sebagai pemisah section.
   ========================================================= */

/* Kunci paragraf artikel agar terasa seperti body text, bukan heading */
.article-content p,
.article-card .article-content p,
.article-detail .article-content p,
.post-detail .article-content p,
.single-post .article-content p,
.article-card p:not(.meta):not(.post-meta):not(.article-meta):not(.badge),
.article-detail p:not(.meta):not(.post-meta):not(.article-meta):not(.badge){
  font-size: 15px !important;
  line-height: 1.74 !important;
  font-weight: 420 !important;
  letter-spacing: -0.004em !important;
  color: #566273 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* Heading artikel dibuat jelas berbeda dari paragraf */
.article-content h2,
.article-card .article-content h2,
.article-detail .article-content h2,
.post-detail .article-content h2,
.single-post .article-content h2,
.article-card h2:not(.section-title):not(.card-title):not(.post-title),
.article-detail h2:not(.section-title):not(.card-title):not(.post-title){
  font-size: clamp(22px, 4.8vw, 29px) !important;
  line-height: 1.22 !important;
  font-weight: 880 !important;
  letter-spacing: -0.042em !important;
  color: #101828 !important;
  margin-top: 34px !important;
  margin-bottom: 12px !important;
}

/* Beri pembeda halus pada H2 agar mata langsung tahu ini heading */
.article-content h2::before,
.article-card .article-content h2::before,
.article-detail .article-content h2::before{
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #18b8e8, #4e73df);
  margin-bottom: 14px;
}

/* H3 tetap heading, tapi levelnya di bawah H2 */
.article-content h3,
.article-card .article-content h3,
.article-detail .article-content h3,
.post-detail .article-content h3,
.single-post .article-content h3,
.article-card h3:not(.post-title):not(.card-title),
.article-detail h3:not(.post-title):not(.card-title){
  font-size: clamp(19px, 4.1vw, 24px) !important;
  line-height: 1.28 !important;
  font-weight: 850 !important;
  letter-spacing: -0.032em !important;
  color: #182230 !important;
  margin-top: 26px !important;
  margin-bottom: 10px !important;
}

/* H4 kecil tapi tetap beda dari paragraf */
.article-content h4,
.article-card .article-content h4,
.article-detail .article-content h4{
  font-size: 17.5px !important;
  line-height: 1.34 !important;
  font-weight: 820 !important;
  color: #1d2939 !important;
  margin-top: 22px !important;
  margin-bottom: 8px !important;
}

/* Strong dalam paragraf jangan membuat paragraf terasa full heading */
.article-content p strong,
.article-content p b,
.article-card p strong,
.article-card p b{
  font-weight: 780 !important;
  color: #263344 !important;
}

/* List mengikuti body text, bukan heading */
.article-content li,
.article-card .article-content li,
.article-detail .article-content li{
  font-size: 15px !important;
  line-height: 1.72 !important;
  font-weight: 420 !important;
  color: #566273 !important;
  margin-bottom: 7px !important;
}

/* Judul utama artikel tetap paling kuat */
.article-title,
.article-card > h1,
.article-card h1:first-child,
.article-header h1,
.post-detail h1,
.single-post h1{
  font-size: clamp(27px, 6vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.052em !important;
  color: #0f172a !important;
  margin-bottom: 18px !important;
}

/* Mobile: perbedaan dibuat lebih jelas lagi */
@media(max-width: 640px){
  .article-content p,
  .article-card .article-content p,
  .article-detail .article-content p,
  .post-detail .article-content p,
  .single-post .article-content p,
  .article-card p:not(.meta):not(.post-meta):not(.article-meta):not(.badge),
  .article-detail p:not(.meta):not(.post-meta):not(.article-meta):not(.badge){
    font-size: 14.35px !important;
    line-height: 1.66 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #5f6b7a !important;
    margin-bottom: 16px !important;
  }

  .article-content h2,
  .article-card .article-content h2,
  .article-detail .article-content h2,
  .post-detail .article-content h2,
  .single-post .article-content h2,
  .article-card h2:not(.section-title):not(.card-title):not(.post-title),
  .article-detail h2:not(.section-title):not(.card-title):not(.post-title){
    font-size: clamp(21px, 6.1vw, 26px) !important;
    line-height: 1.22 !important;
    font-weight: 880 !important;
    letter-spacing: -0.04em !important;
    color: #101828 !important;
    margin-top: 30px !important;
    margin-bottom: 10px !important;
  }

  .article-content h2::before,
  .article-card .article-content h2::before,
  .article-detail .article-content h2::before{
    width: 34px;
    height: 3px;
    margin-bottom: 12px;
  }

  .article-content h3,
  .article-card .article-content h3,
  .article-detail .article-content h3,
  .post-detail .article-content h3,
  .single-post .article-content h3,
  .article-card h3:not(.post-title):not(.card-title),
  .article-detail h3:not(.post-title):not(.card-title){
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.28 !important;
    font-weight: 840 !important;
    color: #182230 !important;
    margin-top: 23px !important;
    margin-bottom: 8px !important;
  }

  .article-content h4,
  .article-card .article-content h4,
  .article-detail .article-content h4{
    font-size: 16.5px !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
  }

  .article-content li,
  .article-card .article-content li,
  .article-detail .article-content li{
    font-size: 14.35px !important;
    line-height: 1.66 !important;
    font-weight: 400 !important;
    color: #5f6b7a !important;
  }

  .article-title,
  .article-card > h1,
  .article-card h1:first-child,
  .article-header h1,
  .post-detail h1,
  .single-post h1{
    font-size: clamp(24px, 7.4vw, 33px) !important;
    line-height: 1.14 !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
  }
}

/* Extra small phone */
@media(max-width: 390px){
  .article-content p,
  .article-card .article-content p,
  .article-detail .article-content p{
    font-size: 14px !important;
    line-height: 1.64 !important;
  }

  .article-content h2,
  .article-card .article-content h2,
  .article-detail .article-content h2{
    font-size: 20.5px !important;
  }

  .article-content h3,
  .article-card .article-content h3,
  .article-detail .article-content h3{
    font-size: 18px !important;
  }
}

/* Dark mode hierarchy */
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-card .article-content p,
html[data-theme="dark"] .article-detail .article-content p,
html[data-theme="dark"] .article-content li{
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-content h4,
html[data-theme="dark"] .article-title{
  color: #f8fafc !important;
}

html[data-theme="dark"] .article-content p strong,
html[data-theme="dark"] .article-content p b{
  color: #f1f5f9 !important;
}


/* =========================================================
   NEOBLOX ARTICLE CONSISTENCY FINAL
   Fix final untuk detail artikel:
   - Paragraf jelas sebagai body text.
   - Heading tidak semua terlihat sama besar.
   - Numbered heading dari TinyMCE otomatis dibuat seperti subheading.
   - List tidak lebih dominan dari paragraf.
   ========================================================= */

/* Container detail artikel */
.article-card,
.article-detail,
.post-detail,
.single-post{
  color:#101828;
}

/* Body text final: ringan, abu, nyaman dibaca */
.article-content p,
.article-card .article-content p,
.article-detail .article-content p,
.post-detail .article-content p,
.single-post .article-content p,
.article-card > p,
.article-detail > p,
.post-detail > p,
.single-post > p{
  font-size:15px!important;
  line-height:1.70!important;
  font-weight:400!important;
  color:#5d6675!important;
  letter-spacing:0!important;
  margin:0 0 16px!important;
}

/* Heading section utama di dalam artikel */
.article-content h2,
.article-card .article-content h2,
.article-detail .article-content h2,
.post-detail .article-content h2,
.single-post .article-content h2,
.article-card > h2,
.article-detail > h2,
.post-detail > h2,
.single-post > h2{
  font-size:24px!important;
  line-height:1.24!important;
  font-weight:860!important;
  color:#111827!important;
  letter-spacing:-0.038em!important;
  margin:30px 0 12px!important;
}

/* Subheading normal */
.article-content h3,
.article-card .article-content h3,
.article-detail .article-content h3,
.post-detail .article-content h3,
.single-post .article-content h3,
.article-card > h3,
.article-detail > h3,
.post-detail > h3,
.single-post > h3{
  font-size:20px!important;
  line-height:1.30!important;
  font-weight:800!important;
  color:#1f2937!important;
  letter-spacing:-0.028em!important;
  margin:24px 0 9px!important;
}

/* Heading angka dari TinyMCE: 1. Developer, 2. Kreator, dst. Jangan sebesar section utama */
.article-content .neo-numbered-subheading,
.article-card .neo-numbered-subheading,
.article-detail .neo-numbered-subheading,
.post-detail .neo-numbered-subheading,
.single-post .neo-numbered-subheading{
  font-size:19px!important;
  line-height:1.32!important;
  font-weight:780!important;
  color:#1f2937!important;
  letter-spacing:-0.024em!important;
  margin:22px 0 8px!important;
}

/* Jika JavaScript belum load, tetap kecilkan heading yang umum dipakai setelah h2 pertama */
.article-content h2 + p + h2,
.article-content p + h2,
.article-card .article-content p + h2,
.article-detail .article-content p + h2{
  font-size:22px!important;
}

/* List adalah isi, bukan heading */
.article-content ul,
.article-content ol,
.article-card .article-content ul,
.article-card .article-content ol,
.article-detail .article-content ul,
.article-detail .article-content ol,
.post-detail .article-content ul,
.post-detail .article-content ol,
.single-post .article-content ul,
.single-post .article-content ol{
  margin:10px 0 18px!important;
  padding-left:20px!important;
}

.article-content li,
.article-card .article-content li,
.article-detail .article-content li,
.post-detail .article-content li,
.single-post .article-content li{
  font-size:15px!important;
  line-height:1.70!important;
  font-weight:400!important;
  color:#5d6675!important;
  margin:0 0 7px!important;
  padding-left:2px!important;
}

/* Bold dalam paragraf cukup tegas, tidak membuat semua paragraf terasa seperti judul */
.article-content p strong,
.article-content p b,
.article-card .article-content p strong,
.article-card .article-content p b,
.article-detail .article-content p strong,
.article-detail .article-content p b{
  font-weight:720!important;
  color:#2f3947!important;
}

/* Judul utama artikel tetap paling kuat */
.article-title,
.article-card > h1,
.article-card h1:first-child,
.article-header h1,
.post-detail h1,
.single-post h1{
  font-size:clamp(26px,5.8vw,40px)!important;
  line-height:1.14!important;
  font-weight:900!important;
  color:#0f172a!important;
  letter-spacing:-0.052em!important;
  margin:0 0 18px!important;
}

/* Mobile final override */
@media(max-width:640px){
  .article-content p,
  .article-card .article-content p,
  .article-detail .article-content p,
  .post-detail .article-content p,
  .single-post .article-content p,
  .article-card > p,
  .article-detail > p,
  .post-detail > p,
  .single-post > p{
    font-size:14.1px!important;
    line-height:1.62!important;
    font-weight:400!important;
    color:#606b7b!important;
    margin-bottom:15px!important;
  }

  .article-content h2,
  .article-card .article-content h2,
  .article-detail .article-content h2,
  .post-detail .article-content h2,
  .single-post .article-content h2,
  .article-card > h2,
  .article-detail > h2,
  .post-detail > h2,
  .single-post > h2{
    font-size:21.5px!important;
    line-height:1.22!important;
    font-weight:850!important;
    color:#111827!important;
    letter-spacing:-0.04em!important;
    margin:28px 0 10px!important;
  }

  .article-content h3,
  .article-card .article-content h3,
  .article-detail .article-content h3,
  .post-detail .article-content h3,
  .single-post .article-content h3,
  .article-card > h3,
  .article-detail > h3,
  .post-detail > h3,
  .single-post > h3{
    font-size:18px!important;
    line-height:1.28!important;
    font-weight:780!important;
    color:#1f2937!important;
    letter-spacing:-0.026em!important;
    margin:22px 0 8px!important;
  }

  .article-content .neo-numbered-subheading,
  .article-card .neo-numbered-subheading,
  .article-detail .neo-numbered-subheading,
  .post-detail .neo-numbered-subheading,
  .single-post .neo-numbered-subheading{
    font-size:17.2px!important;
    line-height:1.30!important;
    font-weight:760!important;
    color:#1f2937!important;
    letter-spacing:-0.022em!important;
    margin:20px 0 7px!important;
  }

  .article-content li,
  .article-card .article-content li,
  .article-detail .article-content li,
  .post-detail .article-content li,
  .single-post .article-content li{
    font-size:14.1px!important;
    line-height:1.62!important;
    font-weight:400!important;
    color:#606b7b!important;
    margin-bottom:6px!important;
  }

  .article-title,
  .article-card > h1,
  .article-card h1:first-child,
  .article-header h1,
  .post-detail h1,
  .single-post h1{
    font-size:clamp(24px,7.2vw,32px)!important;
    line-height:1.13!important;
    font-weight:900!important;
    letter-spacing:-0.05em!important;
  }
}

@media(max-width:390px){
  .article-content p,
  .article-card .article-content p,
  .article-detail .article-content p{
    font-size:13.9px!important;
    line-height:1.60!important;
  }

  .article-content h2,
  .article-card .article-content h2,
  .article-detail .article-content h2{
    font-size:20.2px!important;
  }

  .article-content .neo-numbered-subheading,
  .article-card .neo-numbered-subheading,
  .article-detail .neo-numbered-subheading{
    font-size:16.8px!important;
  }
}

/* Dark mode */
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-card .article-content p,
html[data-theme="dark"] .article-detail .article-content p,
html[data-theme="dark"] .article-content li{
  color:#cbd5e1!important;
}

html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-content .neo-numbered-subheading,
html[data-theme="dark"] .article-title{
  color:#f8fafc!important;
}


/* =========================================================
   NEOBLOX ARTICLE LIST/BULLET FIX
   Masalah sebenarnya:
   - Teks bullet/list seperti "Lebih dari satu juta" dan "Minimal 10%"
     terlalu besar/tebal seperti heading.
   - Heading h2/h3 tetap normal dan tidak perlu dikecilkan.
   ========================================================= */

/* Kembalikan heading bernomor agar tetap mengikuti level h2/h3 normal */
.article-content h2.neo-numbered-subheading,
.article-card .article-content h2.neo-numbered-subheading,
.article-detail .article-content h2.neo-numbered-subheading,
.post-detail .article-content h2.neo-numbered-subheading,
.single-post .article-content h2.neo-numbered-subheading{
  font-size: clamp(22px, 4.8vw, 29px) !important;
  line-height: 1.24 !important;
  font-weight: 860 !important;
  letter-spacing: -0.038em !important;
  color: #111827 !important;
  margin: 30px 0 12px !important;
}

.article-content h3.neo-numbered-subheading,
.article-card .article-content h3.neo-numbered-subheading,
.article-detail .article-content h3.neo-numbered-subheading,
.post-detail .article-content h3.neo-numbered-subheading,
.single-post .article-content h3.neo-numbered-subheading{
  font-size: 20px !important;
  line-height: 1.30 !important;
  font-weight: 800 !important;
  letter-spacing: -0.028em !important;
  color: #1f2937 !important;
  margin: 24px 0 9px !important;
}

/* List wrapper dibuat lebih rapi dan tidak terlalu menonjol */
.article-content ul,
.article-content ol,
.article-card .article-content ul,
.article-card .article-content ol,
.article-detail .article-content ul,
.article-detail .article-content ol,
.post-detail .article-content ul,
.post-detail .article-content ol,
.single-post .article-content ul,
.single-post .article-content ol{
  margin: 8px 0 18px !important;
  padding-left: 1.25rem !important;
}

/* Inilah fix utama: li dikunci sebagai body text */
.article-content ul > li,
.article-content ol > li,
.article-card .article-content ul > li,
.article-card .article-content ol > li,
.article-detail .article-content ul > li,
.article-detail .article-content ol > li,
.post-detail .article-content ul > li,
.post-detail .article-content ol > li,
.single-post .article-content ul > li,
.single-post .article-content ol > li{
  font-size: 15px !important;
  line-height: 1.70 !important;
  font-weight: 400 !important;
  color: #5d6675 !important;
  letter-spacing: 0 !important;
  margin: 0 0 7px !important;
  padding-left: 2px !important;
}

/* Kalau TinyMCE membuat isi bullet dibungkus p/span/strong, tetap jangan membesar */
.article-content li p,
.article-content li span,
.article-content li div,
.article-card .article-content li p,
.article-card .article-content li span,
.article-card .article-content li div,
.article-detail .article-content li p,
.article-detail .article-content li span,
.article-detail .article-content li div{
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
}

/* Bold di dalam bullet boleh tegas, tapi jangan seperti heading */
.article-content li strong,
.article-content li b,
.article-card .article-content li strong,
.article-card .article-content li b,
.article-detail .article-content li strong,
.article-detail .article-content li b{
  font-size: inherit !important;
  line-height: inherit !important;
  color: #2f3947 !important;
  font-weight: 700 !important;
}

/* Jika bullet tidak sengaja berisi heading dari editor, turunkan menjadi body/subtext */
.article-content li h1,
.article-content li h2,
.article-content li h3,
.article-content li h4,
.article-content li h5,
.article-content li h6,
.article-card .article-content li h1,
.article-card .article-content li h2,
.article-card .article-content li h3,
.article-card .article-content li h4,
.article-card .article-content li h5,
.article-card .article-content li h6,
.article-detail .article-content li h1,
.article-detail .article-content li h2,
.article-detail .article-content li h3,
.article-detail .article-content li h4,
.article-detail .article-content li h5,
.article-detail .article-content li h6{
  font-size: 15px !important;
  line-height: 1.70 !important;
  font-weight: 600 !important;
  color: #3f4a5a !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

/* Bullet marker jangan terlalu besar */
.article-content li::marker,
.article-card .article-content li::marker,
.article-detail .article-content li::marker,
.post-detail .article-content li::marker,
.single-post .article-content li::marker{
  font-size: .85em !important;
  color: #667085 !important;
}

/* Mobile list/bullet lebih compact */
@media(max-width: 640px){
  .article-content ul,
  .article-content ol,
  .article-card .article-content ul,
  .article-card .article-content ol,
  .article-detail .article-content ul,
  .article-detail .article-content ol{
    margin: 6px 0 16px !important;
    padding-left: 1.15rem !important;
  }

  .article-content ul > li,
  .article-content ol > li,
  .article-card .article-content ul > li,
  .article-card .article-content ol > li,
  .article-detail .article-content ul > li,
  .article-detail .article-content ol > li{
    font-size: 14.15px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    color: #606b7b !important;
    margin-bottom: 6px !important;
  }

  .article-content li h1,
  .article-content li h2,
  .article-content li h3,
  .article-content li h4,
  .article-content li h5,
  .article-content li h6,
  .article-card .article-content li h1,
  .article-card .article-content li h2,
  .article-card .article-content li h3,
  .article-card .article-content li h4,
  .article-card .article-content li h5,
  .article-card .article-content li h6,
  .article-detail .article-content li h1,
  .article-detail .article-content li h2,
  .article-detail .article-content li h3,
  .article-detail .article-content li h4,
  .article-detail .article-content li h5,
  .article-detail .article-content li h6{
    font-size: 14.15px !important;
    line-height: 1.62 !important;
    font-weight: 600 !important;
    color: #3f4a5a !important;
  }

  .article-content h2.neo-numbered-subheading,
  .article-card .article-content h2.neo-numbered-subheading,
  .article-detail .article-content h2.neo-numbered-subheading{
    font-size: 21.5px !important;
    line-height: 1.22 !important;
    font-weight: 850 !important;
    margin: 28px 0 10px !important;
  }

  .article-content h3.neo-numbered-subheading,
  .article-card .article-content h3.neo-numbered-subheading,
  .article-detail .article-content h3.neo-numbered-subheading{
    font-size: 18px !important;
    line-height: 1.28 !important;
    font-weight: 780 !important;
    margin: 22px 0 8px !important;
  }
}

/* Dark mode */
html[data-theme="dark"] .article-content li,
html[data-theme="dark"] .article-content li p,
html[data-theme="dark"] .article-content li span,
html[data-theme="dark"] .article-content li div{
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .article-content li strong,
html[data-theme="dark"] .article-content li b{
  color: #f1f5f9 !important;
}

/* NEOBLOX article slider: tampilkan semua artikel tanpa membatasi homepage hanya 12 item */
.article-slider-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.article-slider-actions{display:flex;align-items:center;gap:10px;font-weight:900;color:#667085}
.article-slider-actions button{width:40px;height:40px;border:1px solid #e5e7eb;background:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#0f172a;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.article-slider-actions button:hover{transform:translateY(-1px)}
.article-slide{display:none;animation:neoArticleSlide .22s ease}
.article-slide.is-active{display:block}
.article-slider-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.article-slider-dots button{width:10px;height:10px;border-radius:999px;border:0;background:#cbd5e1;cursor:pointer;padding:0;transition:.2s}
.article-slider-dots button.active{width:28px;background:var(--primary)}
@keyframes neoArticleSlide{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="dark"] .article-slider-actions button{background:#111827;border-color:#1f2937;color:#f8fafc}
@media(max-width:560px){.article-slider-title{align-items:flex-start;flex-direction:column}.article-slider-actions{width:100%;justify-content:space-between}.article-slider-actions button{width:44px;height:44px}}


/* NEOBLOX mobile article grid hotfix: compact 2-card homepage cards */
.home-compact-post-note{display:none}
@media(max-width:560px){
  .section .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:stretch}
  .section .post-card{border-radius:18px!important;box-shadow:0 12px 28px rgba(15,23,42,.08)!important;overflow:hidden;height:100%}
  .section .post-card .thumb{height:auto!important;aspect-ratio:16/9!important;min-height:0!important}
  .section .post-card .post-body{padding:11px 11px 12px!important}
  .section .post-card .post-body span{display:block;font-size:10px!important;line-height:1.2;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .section .post-card .post-body h3{font-size:13.5px!important;line-height:1.28!important;margin:0 0 8px!important;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .section .post-card .post-body p{display:none!important}
  .section .post-card .meta{font-size:10.5px!important;line-height:1.3;color:#8a91a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .article-slider-title{align-items:center!important;margin-bottom:18px!important}
  .article-slider-title h2{font-size:26px!important;letter-spacing:-.7px!important}
}
@media(min-width:561px) and (max-width:900px){
  .section .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  .section .post-card .post-body p{display:none!important}
  .section .post-card .thumb{height:auto!important;aspect-ratio:16/9!important}
}

/* NEOBLOX mobile article alignment hotfix: card/news feed text must stay left aligned */
@media(max-width:560px){
  .section,
  .section .container,
  .article-slider-title,
  .article-slider-title > div,
  .article-slider-title small,
  .article-slider-title h2,
  .article-slider,
  .article-slide,
  .section .post-grid,
  .section .post-card,
  .section .post-card .post-body,
  .section .post-card .post-body span,
  .section .post-card .post-body h3,
  .section .post-card .meta{
    text-align:left!important;
  }
  .article-slider-title{
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  .article-slider-title small{
    display:inline-block!important;
  }
  .section .post-card{
    display:block!important;
  }
  .section .post-card .post-body{
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  .section .post-card .meta{
    display:block!important;
  }
}

/* NEOBLOX professional responsive footer */
.neo-footer-pro{margin-top:auto;padding:34px 0 22px;background:linear-gradient(180deg,#0f172a 0%,#111827 100%);color:#dbe4f0;position:relative;overflow:hidden}
.neo-footer-pro:before{content:"";position:absolute;inset:auto -80px -120px auto;width:360px;height:360px;border-radius:999px;background:rgba(24,184,232,.12);filter:blur(18px);pointer-events:none}.neo-footer-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) minmax(220px,.65fr);gap:28px;padding:26px;border:1px solid rgba(148,163,184,.14);border-radius:22px;background:rgba(15,23,42,.72);box-shadow:0 22px 60px rgba(0,0,0,.18);backdrop-filter:blur(10px)}.neo-footer-brand{display:inline-flex;align-items:center;color:#fff!important;text-decoration:none;font-size:1.35rem;font-weight:900;letter-spacing:-.02em;margin-bottom:10px}.neo-footer-brand-block p{max-width:520px;margin:0;color:#aeb8c8;line-height:1.75;font-weight:600}.neo-footer-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.neo-footer-socials a{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#dbeafe!important;background:rgba(255,255,255,.07);border:1px solid rgba(148,163,184,.13);text-decoration:none;transition:.2s ease}.neo-footer-socials a:hover{transform:translateY(-2px);background:rgba(24,184,232,.18);color:#fff!important}.neo-footer-pro h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;font-weight:900;margin:0 0 14px}.neo-footer-links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}.neo-footer-links-grid a,.neo-footer-account-card a{display:flex;align-items:center;gap:9px;color:#cbd5e1!important;text-decoration:none;font-weight:750;line-height:1.35}.neo-footer-links-grid a span{width:22px;color:#7dd3fc;display:inline-flex;align-items:center;justify-content:center}.neo-footer-links-grid a:hover,.neo-footer-account-card a:hover{color:#fff!important}.neo-footer-account-card{display:grid;gap:11px;padding:14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.12)}.neo-footer-account-card a i{width:18px;color:#7dd3fc}.neo-footer-account-card a.danger{color:#fecaca!important}.neo-footer-account-card a.danger i{color:#fb7185}.neo-footer-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px 0;color:#94a3b8;font-weight:700;font-size:.88rem}.neo-footer-bottom span:last-child{text-align:right}@media(max-width:991.98px){.neo-footer-panel{grid-template-columns:1fr 1fr;gap:22px}.neo-footer-brand-block{grid-column:1/-1}.neo-footer-account-block{grid-column:1/-1}.neo-footer-account-card{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:575.98px){.neo-footer-pro{padding:24px 0 18px}.neo-footer-panel{grid-template-columns:1fr;padding:18px;border-radius:18px;gap:22px}.neo-footer-links-grid{grid-template-columns:1fr 1fr;gap:11px 12px}.neo-footer-links-grid a{font-size:.92rem}.neo-footer-account-card{grid-template-columns:1fr}.neo-footer-bottom{flex-direction:column;align-items:flex-start;font-size:.82rem}.neo-footer-bottom span:last-child{text-align:left}.neo-footer-brand{font-size:1.18rem}.neo-footer-brand-block p{font-size:.92rem}}
[data-theme="dark"] .neo-footer-pro{background:linear-gradient(180deg,#020617 0%,#0f172a 100%)}