/* BukuStok public site theme v1
   Loaded last on every public page, so it overrides each page's inline styles.
   Colors stay on the BukuStok green palette. */
:root{
  --bs-deep:#0f342b;
  --bs-green:#173f34;
  --bs-mid:#2f765f;
  --bs-tint:#eaf5f0;
  --bs-pale:#f4faf7;
  --bs-line:#dfe8e3;
  --bs-text:#60716a;
  --bs-shadow:0 14px 38px rgba(23,63,52,.09);
}

/* Typography: lighter, calmer headlines */
h1,h2,h3{letter-spacing:-.02em}
h1{font-weight:700;line-height:1.14}
h2{font-weight:650;line-height:1.2}
.eyebrow{letter-spacing:.14em}

/* Buttons: squared, like the reference */
.btn{border-radius:8px}
.btn.primary{background:var(--bs-green);border-color:var(--bs-green);box-shadow:0 10px 22px rgba(23,63,52,.18)}
.btn.primary:hover{background:var(--bs-mid);border-color:var(--bs-mid)}

/* Header: quiet, underline for the current page */
.bs-desktop-nav>a[aria-current="page"]{background:transparent;color:var(--bs-green);box-shadow:inset 0 -2px 0 var(--bs-mid);border-radius:0}

/* Hero: white, big circle bleeding off the top right, ring and dots */
.hero{position:relative;overflow:hidden;background:#fff}
.hero::before{
  content:"";position:absolute;z-index:0;top:-190px;right:-150px;width:520px;height:520px;border-radius:50%;
  background:var(--bs-tint);box-shadow:0 0 0 26px rgba(234,245,240,.55);pointer-events:none
}
.hero::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:
    radial-gradient(circle,rgba(47,118,95,.35) 0 4px,transparent 5px) 66% 5%/60px 60px no-repeat,
    radial-gradient(circle,rgba(47,118,95,.22) 0 7px,transparent 8px) 0% 74%/60px 60px no-repeat,
    radial-gradient(circle,rgba(47,118,95,.3) 0 4px,transparent 5px) 1% 26%/60px 60px no-repeat,
    radial-gradient(circle,rgba(47,118,95,.2) 0 5px,transparent 6px) 62% 94%/60px 60px no-repeat
}
.hero>.wrap{position:relative;z-index:1}
.hero:has(.hero-grid)::before{
  top:-120px;right:-240px;width:760px;height:760px;background:var(--bs-green);
  box-shadow:0 0 0 30px var(--bs-tint),0 0 0 62px rgba(234,245,240,.5)
}

#fitur-unggulan~* h1,.hero-copy h1{font-size:clamp(36px,4.5vw,56px)}

/* Section headings centered, as in the reference */
.head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.head p{margin-left:auto;margin-right:auto}

/* Cards: borderless, soft shadow, green underline; fill dark on hover */
.card,.decision,.decor-card,.related-guide,.contact-card{
  border:0;border-bottom:3px solid var(--bs-mid);border-radius:10px;background:#fff;box-shadow:var(--bs-shadow);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease
}
.card:hover,.decision:hover,.decor-card:hover,.related-guide:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(23,63,52,.14)}
.grid>.card:nth-child(2){background:var(--bs-green);border-bottom-color:var(--bs-deep);color:#fff}
.grid>.card:nth-child(2) :is(h2,h3,h4,b,strong,a){color:#fff}
.grid>.card:nth-child(2) :is(p,li,small,span){color:#d7e8e0}
.grid>.card:nth-child(2) .tag{color:#9fe0c3}
@media(min-width:1000px){.grid:has(>.card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
.feature-panel{border:0;border-radius:12px;box-shadow:var(--bs-shadow)}
.soft{background:var(--bs-pale)}
.soft .card{background:#fff}

/* Dark band: big circle, ring */
.affiliate-section::before{
  inset:-160px auto auto -240px;width:640px;height:640px;
  background:rgba(255,255,255,.05);box-shadow:0 0 0 34px rgba(255,255,255,.035)
}

/* Production section: circle behind the card, round step numbers */
.production-section{position:relative;overflow:hidden;background:#fff;border-top:0}
.production-section::before{
  content:"";position:absolute;right:-110px;top:50%;width:560px;height:560px;margin-top:-280px;border-radius:50%;
  background:var(--bs-tint);box-shadow:0 0 0 26px rgba(234,245,240,.5);pointer-events:none
}
.production-layout{position:relative}
.production-step{border:0;border-radius:10px;box-shadow:var(--bs-shadow)}
.production-step i{border-radius:50%}
.production-card{border:0;border-radius:12px}

/* Promo sections: beat the pages' !important .actions .btn rules */
.discount-promo-copy .actions .btn.primary{background:#f6c453!important;border-color:#f6c453!important;color:#0f342b!important}
.discount-promo-copy .actions .btn.ghost{background:transparent!important;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.free-promo-shell{border:0;border-radius:14px;box-shadow:var(--bs-shadow)}
.discount-promo-shell{border-radius:14px}

/* CTA: horizontal banner sitting on the footer edge */
main{position:relative;z-index:2}
main>section:last-child:has(.cta,.article-cta){padding-bottom:0;background:transparent;content-visibility:visible}
.cta,.article-cta{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;
  margin-bottom:-58px;padding:30px 36px;border-radius:12px;text-align:left;background:var(--bs-mid);color:#fff;
  box-shadow:0 22px 48px rgba(15,52,43,.26)
}
.cta h2,.article-cta h2{grid-column:1;margin:0;color:#fff;font-size:clamp(22px,2.6vw,30px)}
.cta p,.article-cta p{grid-column:1;margin:6px 0 0;color:#e2f1ea;max-width:640px}
.cta .btn,.cta .actions,.article-cta .btn{grid-column:2;grid-row:1/span 2;margin:0}
.cta .btn,.article-cta .btn{background:#fff;border-color:#fff;color:var(--bs-green);box-shadow:none}

/* Footer */
.bs-footer{position:relative;z-index:1;margin-top:0;padding:64px 0 0;background:var(--bs-deep);color:#cfe3da;border:0}
main:has(>section:last-child :is(.cta,.article-cta))+.bs-footer{padding-top:124px}
.bs-foot-grid{display:grid;grid-template-columns:minmax(220px,1.15fr) minmax(0,3fr);gap:48px}
.bs-foot-logo{display:inline-flex;padding:8px 12px;border-radius:8px;background:#fff}
.bs-foot-logo img{display:block;width:132px;height:auto}
.bs-foot-brand strong{display:block;margin-top:16px;color:#fff;font-size:15px}
.bs-foot-brand p{margin:6px 0 0;color:#a9c4b8;font-size:14px;line-height:1.55}
.bs-foot-scorp{display:flex;align-items:center;gap:10px;margin-top:16px;color:#a9c4b8;font-size:12px;font-weight:600}
.bs-foot-scorp a{display:inline-flex;padding:4px 8px;border-radius:6px;background:#fff}
.bs-foot-scorp img{display:block;width:92px;height:auto}
.bs-footer .bs-foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start;justify-self:stretch;width:100%;margin:0}
.bs-foot-col h2{margin:0 0 12px;color:#fff;font-size:14px;font-weight:700;letter-spacing:0}
.bs-footer .bs-foot-col a{display:block;padding:4px 0;color:#a9c4b8;font-size:13.5px;font-weight:400;line-height:1.4;text-decoration:none}
.bs-footer .bs-foot-col a:hover{color:#fff}
.bs-foot-col a:focus-visible,.bs-foot-logo:focus-visible,.bs-foot-scorp a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bs-foot-bottom{margin-top:40px;padding-top:18px;padding-bottom:22px;border-top:1px solid rgba(255,255,255,.1);color:#8fb0a2;font-size:12.5px}

@media(max-width:900px){
  .hero::after{display:none}
  .hero::before{top:-230px;right:-200px;width:440px;height:440px}
  .hero:has(.hero-grid)::before{top:auto;bottom:-120px;right:-160px;width:520px;height:520px}
  .bs-foot-grid{grid-template-columns:1fr;gap:32px}
  .bs-footer .bs-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .production-section::before{display:none}
}
@media(max-width:560px){
  .cta,.article-cta{grid-template-columns:1fr;row-gap:14px;padding:24px 20px;text-align:left}
  .cta .btn,.cta .actions,.article-cta .btn{grid-column:1;grid-row:auto;width:100%}
}
@media(prefers-reduced-motion:reduce){.card,.decor-card,.related-guide{transition:none}.card:hover,.decor-card:hover,.related-guide:hover{transform:none}}