.page-hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:center}

/* Make the whole hero a rounded "card" so both left + right sides are curved */
.page-header.hero{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.02);padding:28px}

.page-hero-media{border-radius:0;overflow:hidden;box-shadow:0 30px 60px rgba(2,6,23,.65);min-height:260px;max-height:420px;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent)}
.page-hero-media .page-hero-img,.page-hero-media img.page-hero-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}

/* Services/features grid under hero (responsive horizontal cards) */
.page-services { margin-top: 28px; margin-bottom: 6px; }
.page-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:20px; align-items:stretch; }
.service-card { display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.02); box-shadow: 0 18px 40px rgba(2,6,23,0.45); transition: transform .18s ease, box-shadow .18s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(2,6,23,0.55); }
.service-icon { flex:0 0 56px; width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(98,211,255,0.06), rgba(255,211,77,0.06)); box-shadow: inset 0 1px rgba(255,255,255,0.02); color: #eaf0ff; }
.service-body h4 { margin:0 0 8px; /* gradient title: light-blue -> yellow */ background: linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-size:1.05rem; font-weight:800; text-shadow:0 4px 18px rgba(2,6,23,0.28); }
.service-body p { margin:0; color:var(--muted); line-height:1.6; max-width:42ch; }

/* Jasa Website (pills) */
.jasa-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.jasa-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.04);text-decoration:none;color:var(--text);font-weight:700;transition:transform .12s ease,box-shadow .12s ease}
.jasa-pill:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(2,6,23,0.25)}

/* Paket Harga section */
.page-paket{margin-top:22px;margin-bottom:10px}
.page-paket-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:12px}
.paket-card{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 30px rgba(2,6,23,0.35);display:flex;flex-direction:column;gap:10px}
.paket-card h4{margin:0;font-size:1rem}
.paket-price{font-weight:900;color:var(--brand);font-size:1rem}
.paket-desc{color:var(--muted);font-size:.95rem}
.paket-actions{margin-top:auto}
@media (max-width:1100px){ .page-paket-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .page-paket-grid{grid-template-columns:repeat(1,1fr)} .jasa-pill{padding:6px 10px} }

/* Sidebar — compact stacked variants for Paket/Jasa when rendered in sidebar */
.page-paket--sidebar .page-paket-grid--sidebar{display:grid;grid-template-columns:1fr;gap:12px}
.page-paket--sidebar .paket-card{padding:12px;border-radius:10px}
.page-paket-grid--sidebar .paket-actions .btn{padding:8px 12px}
.btn.btn-sm{padding:7px 12px;font-size:.92rem;min-width:0}
.jasa-pills{gap:8px}
.jasa-pill{font-size:.95rem;padding:7px 10px}


@media (max-width:1100px){ .page-services-grid{grid-template-columns:repeat(2,1fr); gap:16px} .service-card{padding:18px} }
@media (max-width:640px){ .page-services-grid{grid-template-columns:repeat(1,1fr)} .service-card{padding:14px;gap:12px} .service-icon{width:48px;height:48px} .service-body h4{font-size:1rem} }

/* Hero content inset: move title/description slightly to the right so text isn't flush to the edge */
.page-header.hero .hero-left{padding-left:8px}

/* CTA buttons: horizontal on wider viewports; responsive on mobile */
.page-header.hero .hero-actions{margin-top:16px;display:flex;gap:12px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.page-header.hero .hero-actions .cta-btn,
.page-header.hero .hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-width:140px}

@media (max-width:900px){
  .page-header.hero{padding:18px}
  .page-header.hero .hero-actions{justify-content:center;gap:10px}
  .page-header.hero .hero-actions .cta-btn,
  .page-header.hero .hero-actions .btn{flex:1 1 48%;min-width:0}
}
.hero-left .page-title{font-size:clamp(1.6rem, 4vw, 2.6rem);line-height:1.03;margin-bottom:8px}
.hero-left .lead{color:var(--muted);margin-bottom:12px;max-width:64ch}
.hero-left .page-meta{margin-top:6px;color:var(--muted)}
/* Center author name when rendered in page meta */
.hero-left .page-meta [itemprop="author"],
.page-meta [itemprop="author"] { display: inline-block; text-align: center; min-width: 0; }
/* ensure author links inherit centered alignment */
.page-meta [itemprop="author"] a{ display:inline-block; text-align:center; color:inherit; text-decoration:none }

/* Page-specific heading gradient — light blue -> yellow
   Applies to hero title and all headings inside page content (H1–H6).
   Uses high-specificity + !important to override global visibility rules. */
.page-article .page-title,
.page-article .page-content h1,
.page-article .page-content h2,
.page-article .page-content h3,
.page-article .page-content h4,
.page-article .page-content h5,
.page-article .page-content h6 {
  background: linear-gradient(90deg, #62d3ff 0%, #ffd34d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 6px 18px rgba(2,6,23,0.24) !important;
}

/* Slightly reduce opacity for deeper heading levels for better contrast */
.page-article .page-content h2 { opacity: 0.98 }
.page-article .page-content h3 { opacity: 0.95 }
.page-article .page-content h4 { opacity: 0.92 }
.page-article .page-content h5, .page-article .page-content h6 { opacity: 0.9 }

.hero-actions{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sidebar-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.recent-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.recent-list li a{color:var(--text);text-decoration:none}
.recent-list li a:hover{color:var(--brand)}

/* Main content two-column: article + sidebar */
.page-main{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-top:28px;align-items:start}
.page-article-col{min-width:0}
.page-sidebar{position:relative;top:0;display:flex;flex-direction:column;gap:14px}
.page-sidebar .wrap-card{padding:14px;border-radius:12px}
.page-sidebar .section-title{font-size:1rem;margin-bottom:6px}

/* Mobile responsiveness */
@media (max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;gap:12px}
  .page-hero-media{min-height:180px;max-height:300px}
  .page-main{grid-template-columns:1fr;gap:18px}
  .hero-left .page-title{font-size:clamp(1.4rem,5.6vw,1.9rem)}
  .hero-left .lead{max-width:100%}
}

/* Content typography — ensure editor text renders with clear paragraphs (prevents "stacking") */
.page-content{font-size:1rem;line-height:1.85;color:inherit;white-space:normal;word-break:normal;hyphens:auto}
.page-content p{margin:0 0 1.25rem}
.page-content p + p{margin-top:1rem}
.page-content h2,.page-content h3,.page-content h4{margin:1.6rem 0 .6rem;line-height:1.2}
.page-content ul,.page-content ol{margin:0 0 1rem 1.4rem;padding-left:0}
.page-content blockquote{margin:1rem 0;padding-left:14px;border-left:4px solid rgba(255,255,255,0.06);color:var(--muted)}
/* Make single line-breaks visually separated when user pasted plain text */
.page-content br{display:block;content:'';margin-bottom:.85rem;line-height:0}
.page-content img{max-width:100%;height:auto;display:block;margin:0.75rem 0}
.page-content pre{overflow:auto;padding:12px;border-radius:8px;margin:1rem 0;background:rgba(255,255,255,0.02)}

/* Improve TOC card spacing so list items are not flush to the left */
.page-toc.wrap-card{padding:20px;border-radius:12px}
.page-toc strong{display:block;margin-bottom:10px}
.page-toc ul{margin:0;padding-left:1.25rem;list-style-position:outside}
.page-toc li{margin:0.45rem 0;line-height:1.45;color:var(--text)}
.page-toc li::marker{color:var(--muted)}
@media (max-width:900px){
  .page-toc.wrap-card{padding:16px}
  .page-toc ul{padding-left:1rem}
}

/* Modern inline TOC (injected into article after paragraph 2) */
.page-toc--inline{display:block;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));box-shadow:0 14px 40px rgba(2,6,23,0.06);border-left:4px solid var(--brand);margin:1.6rem 0}
.page-toc__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.page-toc__meta{font-size:.85rem;color:var(--muted)}
.page-toc__list{list-style:none;padding-left:0;margin:0;counter-reset:toc}
.page-toc__list li{counter-increment:toc;position:relative;padding-left:30px;margin:8px 0}
.page-toc__list li::before{content:counter(toc);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:6px;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#ffffff));color:#041124;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;box-shadow:0 6px 16px rgba(2,6,23,0.08)}
.page-toc__list a{text-decoration:none;color:var(--text);transition:color .12s ease}
.page-toc__list a:hover{color:var(--brand);text-decoration:underline}
/* Indent/visual scale for deeper heading levels */
.page-toc__list li.level-3{padding-left:42px;font-size:.95rem;color:var(--muted)}
.page-toc__list li.level-4{padding-left:58px;font-size:.92rem;color:var(--muted);opacity:.95}
@media (max-width:720px){.page-toc--inline{margin:1rem 0;padding:14px}.page-toc__list li{padding-left:26px}.page-toc__list li::before{width:18px;height:18px;font-size:.65rem}}