*,::before,::after{box-sizing:border-box}
html{background:rgb(169,169,165);-webkit-text-size-adjust:100%}
body{
  max-width:1100px;margin:0 auto;background:#fff;color:#1f2937;
  font-family: 'Inter', 'Segoe UI', 'Open Sans', Roboto, sans-serif;
  color: #333333;
  background-color: #ffffff;
  line-height: 1.7;
}
@media(min-width:768px){body{padding:0 1rem}}
body.menu-open{overflow:hidden}
h1,h2,h3,p,blockquote,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

header{background:#c2410c;color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0;color:#fff;text-decoration:none}
.brand img{width:32px;height:32px;background:#fff;flex-shrink:0}
.brand span{font-size:1.125rem;font-weight:700}
.header-right{display:flex;align-items:center;gap:1rem}
.tagline{font-size:.875rem;display:none}
@media(min-width:640px){.tagline{display:block}}

.burger{
  width:44px;height:44px;flex-shrink:0;padding:0;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:0;border-radius:.5rem;color:#fff;cursor:pointer
}
.burger:hover{background:rgba(255,255,255,.15)}
.burger:focus-visible,.drawer-close:focus-visible,.drawer a:focus-visible,.brand:focus-visible{outline:2px solid #fff;outline-offset:2px}
.burger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px}

.overlay{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s
}
.overlay.show{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(320px,85vw);background:#fff;color:#1f2937;
  display:flex;flex-direction:column;
  box-shadow:-10px 0 25px -5px rgba(0,0,0,.25);
  transform:translateX(100%);visibility:hidden;
  transition:transform .3s ease,visibility .3s
}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer-head{background:#c2410c;color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between}
.drawer-head strong{font-size:1.125rem}
.drawer-close{
  width:44px;height:44px;padding:0;margin:-.25rem -.5rem -.25rem 0;
  background:transparent;border:0;border-radius:.5rem;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer
}
.drawer-close:hover{background:rgba(255,255,255,.15)}
.drawer nav{padding:.5rem 0}
.drawer nav a{
  display:flex;align-items:center;gap:.75rem;min-height:56px;
  padding:.75rem 1.25rem;text-decoration:none;font-size:1.0625rem;font-weight:600;
  border-bottom:1px solid #e5e7eb
}
.drawer nav a:hover{background:#fff7ed;color:#9a3412}
.drawer nav a svg{width:22px;height:22px;flex-shrink:0}
.drawer nav a.wa svg{fill:#15803d}
.drawer nav a.stroke svg{fill:none;stroke:#c2410c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.overlay,.drawer{transition:none}}

.wrap{max-width:64rem;margin:0 auto;padding:2.5rem 1.5rem}
h3{font-size:1.5rem;line-height:1.3;font-weight:700}

.cta{text-align:center;padding:2.5rem 1rem;background:#fff7ed}
.cta h3{color:#1f2937;margin-bottom:1rem}
.cta p{font-size:1.125rem;margin-bottom:1.5rem}
.btn{
  display:inline-block;background:#15803d;color:#fff;text-decoration:none;
  padding:.75rem 1.5rem;border-radius:9999px;font-size:1.125rem;font-weight:600
}
.btn:hover{background:#166534}

footer{text-align:center;font-size:.875rem;color:#4b5563;padding:1.5rem 0;border-top:1px solid #e5e7eb;margin-top:2.5rem}

.wa-float{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:50;
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;
  background:#15803d;color:#fff;text-decoration:none;
  padding:.75rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -4px rgba(0,0,0,.2)
}
.wa-float:hover{background:#166534}
.wa-float svg{width:20px;height:20px;fill:currentColor}

.article{max-width:46rem}
.crumb{font-size:.875rem;color:#4b5563;margin-bottom:1rem}
.crumb a{color:#9a3412}
.article h1{font-size:1.875rem;line-height:1.25;font-weight:700;color:#c2410c;margin-bottom:.75rem}
@media(min-width:768px){.article h1{font-size:2.25rem}}
.meta{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}
.article figure{margin-bottom:1.5rem}
.article figure img{width:100%;border-radius:.75rem}
.article figcaption{font-size:.8125rem;color:#6b7280;margin-top:.5rem}
.content{font-size:1.0625rem;line-height:1.75}
.content p{margin-bottom:1.25rem}
.content h2{font-size:1.5rem;line-height:1.3;font-weight:700;color:#1f2937;margin:2rem 0 .75rem}
.content ul,.content ol{margin:0 0 1.25rem;padding-left:1.5rem}
.content li{margin-bottom:.5rem}
.content blockquote{border-left:4px solid #c2410c;background:#fff7ed;padding:1rem 1.25rem;margin:0 0 1.25rem;border-radius:0 .5rem .5rem 0}
.content a{color:#9a3412}
.tbl{overflow-x:auto;margin-bottom:1.25rem}
.tbl table{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th,.tbl td{border:1px solid #e5e7eb;padding:.625rem .75rem;text-align:left;vertical-align:top}
.tbl th{background:#fff7ed;color:#9a3412}
.back{display:inline-block;margin-top:1.5rem;font-weight:600;color:#9a3412}

/* ===== Gambar artikel: styling, zoom, dan efek muncul dari samping ===== */
.article{overflow-x:clip}
.article figure img{
  /*box-shadow:0 10px 25px -8px rgba(154,52,18,.35),0 4px 10px -4px rgba(0,0,0,.15);*/
  /*border:1px solid #fed7aa;*/
  background:#fff7ed;
  cursor:zoom-in;
  transition:transform .3s ease,box-shadow .3s ease
}
/*.article figure img:hover{transform:scale(1.015);box-shadow:0 16px 32px -8px rgba(154,52,18,.45),0 6px 12px -4px rgba(0,0,0,.2)}*/
.article figure img:hover{transform:scale(1.015);}
.article figure img:focus-visible{outline:3px solid #c2410c;outline-offset:3px}
.article figure{position:relative}
.article figure::after{
  content:"Klik untuk perbesar";
  position:absolute;right:.75rem;bottom:.75rem;
  background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;line-height:1;
  padding:.4rem .65rem;border-radius:9999px;pointer-events:none;
  opacity:0;transition:opacity .25s ease
}
.article figure:hover::after{opacity:1}

/* efek muncul dari samping (aktif hanya kalau JS jalan) */
html.js .reveal{
  opacity:0;
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);
  will-change:opacity,transform
}
html.js .reveal.from-left{transform:translateX(-60px)}
html.js .reveal.from-right{transform:translateX(60px)}
html.js .reveal.in{opacity:1;transform:none}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;visibility:hidden;cursor:zoom-out;
  transition:opacity .25s ease,visibility .25s
}
.lb.show{opacity:1;visibility:visible}
.lb img{
  max-width:96vw;max-height:90vh;width:auto;height:auto;border-radius:.5rem;
  transform:scale(.88);transition:transform .3s cubic-bezier(.22,.8,.3,1);
  box-shadow:0 20px 50px rgba(0,0,0,.5)
}
.lb.show img{transform:scale(1)}
.lb-close{
  position:absolute;top:.75rem;right:.75rem;width:44px;height:44px;
  background:rgba(255,255,255,.15);border:0;border-radius:9999px;color:#fff;
  font-size:1.75rem;line-height:1;cursor:pointer
}
.lb-close:hover{background:rgba(255,255,255,.3)}
.lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.lb-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal.from-left,html.js .reveal.from-right{opacity:1;transform:none;transition:none}
  .lb,.lb img,.article figure img{transition:none}
}