/* ═══════════════════════════════════════════════════════════
   LAZISNU BERBAH — STYLESHEET (Pure CSS, no framework/build tool)
   Aman untuk shared hosting — tidak butuh npm/Node/compiler.
═══════════════════════════════════════════════════════════ */

:root{
  --G:#0A6634; --GD:#07421f; --GL:#E8F5E9; --AU:#f0a500;
  --whatsapp:#25d366; --whatsapp-dark:#1da851;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563;
  --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
  --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399;
  --emerald-600:#059669; --emerald-800:#065f46;
  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-500:#f43f5e; --rose-600:#e11d48;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-400:#60a5fa; --blue-500:#3b82f6;
  --purple-50:#faf5ff; --purple-100:#f3e8ff; --purple-400:#c084fc;
  --yellow-300:#fde047; --yellow-400:#facc15;
}

/* ═══ RESET & BASE ═══ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;color:var(--slate-800);background:var(--slate-50);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer}
table{width:100%}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--G);border-radius:4px}

/* ═══ LAYOUT ═══ */
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.inline-block{display:inline-block}
.hidden{display:none}
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.top-half{top:50%}
.translate-y-half{transform:translateY(-50%)}
.left-3\.5{left:.875rem}
.z-10{z-index:10}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.scroll-smooth{scroll-behavior:smooth}

.flex-wrap{flex-wrap:wrap}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%}
.flex-shrink-0{flex-shrink:0}
.min-w-0{min-width:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.gap-0\.5{gap:.125rem} .gap-1{gap:.25rem} .gap-1\.5{gap:.375rem} .gap-2{gap:.5rem} .gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-5{gap:1.25rem} .gap-6{gap:1.5rem} .gap-8{gap:2rem}
.gap-x-3{column-gap:.75rem} .gap-x-4{column-gap:1rem}
.gap-y-0\.5{row-gap:.125rem} .gap-y-1{row-gap:.25rem}
.space-y-0\.5>*+*{margin-top:.125rem}
.space-y-2\.5>*+*{margin-top:.625rem}
.space-y-5>*+*{margin-top:1.25rem}
.divide-y>*+*{border-top-width:1px;border-top-style:solid}
.divide-slate-50>*+*{border-color:var(--slate-50)}

/* ═══ SIZING ═══ */
.w-6{width:1.5rem} .w-9{width:2.25rem} .w-10{width:2.5rem} .w-11{width:2.75rem}
.w-12{width:3rem} .w-14{width:3.5rem} .w-16{width:4rem} .w-44{width:11rem}
.w-auto{width:auto} .w-full{width:100%} .w-px{width:1px} .w-64{width:16rem}
.h-2{height:.5rem} .h-8{height:2rem} .h-9{height:2.25rem} .h-10{height:2.5rem}
.h-11{height:2.75rem} .h-12{height:3rem} .h-14{height:3.5rem} .h-16{height:4rem} .h-24{height:6rem}
.h-44{height:11rem} .h-52{height:13rem} .h-56{height:14rem} .h-full{height:100%}
.max-w-4xl{max-width:56rem} .max-w-6xl{max-width:72rem} .max-w-lg{max-width:32rem}
.max-w-3xl{max-width:48rem}
.max-w-md{max-width:28rem} .max-w-xl{max-width:36rem}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-1{margin-left:.25rem} .ml-2{margin-left:.5rem} .ml-auto{margin-left:auto}
.mr-2{margin-right:.5rem}
.mb-0\.5{margin-bottom:.125rem} .mb-1{margin-bottom:.25rem} .mb-1\.5{margin-bottom:.375rem}
.mb-2{margin-bottom:.5rem} .mb-2\.5{margin-bottom:.625rem} .mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem}
.mt-0\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem} .mt-10{margin-top:2.5rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem} .my-3{margin-top:.75rem;margin-bottom:.75rem} .my-8{margin-top:2rem;margin-bottom:2rem}
.p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem}
.p-6{padding:1.5rem} .p-7{padding:1.75rem} .p-8{padding:2rem}
.px-1{padding-left:.25rem;padding-right:.25rem} .px-2{padding-left:.5rem;padding-right:.5rem} .px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem} .px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem} .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem} .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem} .py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem} .py-8{padding-top:2rem;padding-bottom:2rem} .py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.pb-2{padding-bottom:.5rem} .pb-3{padding-bottom:.75rem} .pb-8{padding-bottom:2rem}
.pt-1{padding-top:.25rem} .pt-4{padding-top:1rem} .pt-5{padding-top:1.25rem} .pt-6{padding-top:1.5rem}
.pl-6{padding-left:1.5rem} .pl-11{padding-left:2.75rem} .pr-4{padding-right:1rem}

/* ═══ TYPOGRAPHY ═══ */
.text-2xs{font-size:.625rem} .text-xs{font-size:.75rem} .text-sm{font-size:.875rem}
.text-base{font-size:1rem} .text-lg{font-size:1.125rem} .text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem} .text-3xl{font-size:1.875rem} .text-4xl{font-size:2.25rem}
.font-medium{font-weight:500} .font-semibold{font-weight:600} .font-bold{font-weight:700} .font-black{font-weight:900}
.font-mono{font-family:'Courier New',monospace} .font-ar{font-family:'Amiri',serif}
.italic{font-style:italic}
.leading-none{line-height:1} .leading-tight{line-height:1.25} .leading-snug{line-height:1.375} .leading-relaxed{line-height:1.625}
.tracking-wide{letter-spacing:.025em} .tracking-wider{letter-spacing:.05em} .tracking-widest{letter-spacing:.1em}
.uppercase{text-transform:uppercase}
.text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right}
.whitespace-nowrap{white-space:nowrap}
.border-collapse{border-collapse:collapse}

/* ═══ COLORS — background ═══ */
.bg-G{background:var(--G)} .bg-GD{background:var(--GD)} .bg-GL{background:var(--GL)} .bg-AU{background:var(--AU)}
.bg-G-10{background:rgba(10,102,52,.1)} .bg-GL-40{background:rgba(232,245,233,.4)} .bg-GL-60{background:rgba(232,245,233,.6)}
.bg-white{background:#fff} .bg-white-10{background:rgba(255,255,255,.1)} .bg-white-15{background:rgba(255,255,255,.15)}
.bg-whatsapp{background:var(--whatsapp)}
.bg-slate-50{background:var(--slate-50)} .bg-slate-100{background:var(--slate-100)} .bg-slate-200{background:var(--slate-200)}
.bg-slate-800{background:var(--slate-800)} .bg-slate-900{background:var(--slate-900)}
.bg-amber-50{background:var(--amber-50)} .bg-blue-50{background:var(--blue-50)}
.bg-purple-50{background:var(--purple-50)} .bg-rose-50{background:var(--rose-50)}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--gs,var(--G)),var(--ge,var(--GD)))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--gs,var(--G)),var(--ge,var(--GD)))}
.from-G{--gs:var(--G)} .from-GD{--gs:var(--GD)}
.via-G{--gm:var(--G)} .to-G{--ge:var(--G)} .to-GD{--ge:var(--GD)} .to-emerald-600{--ge:var(--emerald-600)}
.bg-gradient-to-r.from-GD.via-G.to-emerald-600{background-image:linear-gradient(to right,var(--GD),var(--G),var(--emerald-600))}
.bg-gradient-to-br.from-G.to-GD{background-image:linear-gradient(to bottom right,var(--G),var(--GD))}

/* ═══ COLORS — text ═══ */
.text-AU{color:var(--AU)} .text-G{color:var(--G)} .text-G-60{color:rgba(10,102,52,.6)}
.text-white{color:#fff} .text-white-60{color:rgba(255,255,255,.6)} .text-white-75{color:rgba(255,255,255,.75)}
.text-emerald-200{color:var(--emerald-200)} .text-emerald-200-70{color:rgba(167,243,208,.7)} .text-emerald-200-80{color:rgba(167,243,208,.8)}
.text-emerald-300{color:var(--emerald-300)} .text-emerald-300-50{color:rgba(110,231,183,.5)} .text-emerald-300-70{color:rgba(110,231,183,.7)}
.text-emerald-400{color:var(--emerald-400)} .text-emerald-600{color:var(--emerald-600)} .text-emerald-800{color:var(--emerald-800)}
.text-gray-300{color:var(--gray-300)} .text-gray-400{color:var(--gray-400)} .text-gray-500{color:var(--gray-500)}
.text-gray-600{color:var(--gray-600)} .text-gray-700{color:var(--gray-700)} .text-gray-800{color:var(--gray-800)} .text-gray-900{color:var(--gray-900)}
.text-slate-200{color:var(--slate-200)} .text-slate-300{color:var(--slate-300)} .text-slate-400{color:var(--slate-400)} .text-slate-500{color:var(--slate-500)}
.text-slate-600{color:var(--slate-600)} .text-slate-700{color:var(--slate-700)} .text-slate-800{color:var(--slate-800)} .text-slate-900{color:var(--slate-900)}
.text-amber-600{color:var(--amber-600)} .text-amber-700{color:var(--amber-700)}
.text-blue-400{color:var(--blue-400)} .text-purple-400{color:var(--purple-400)}
.text-rose-500{color:var(--rose-500)} .text-rose-600{color:var(--rose-600)}
.text-yellow-300{color:var(--yellow-300)}

/* ═══ COLORS — border ═══ */
.border{border:1px solid var(--slate-200)} .border-2{border-width:2px;border-style:solid}
.border-b{border-bottom:1px solid} .border-t{border-top:1px solid} .border-t-4{border-top:4px solid} .border-y{border-top:1px solid;border-bottom:1px solid}
.border-G{border-color:var(--G)}
.border-white-15{border-color:rgba(255,255,255,.15)} .border-white-20{border-color:rgba(255,255,255,.2)} .border-white-25{border-color:rgba(255,255,255,.25)}
.border-slate-100{border-color:var(--slate-100)} .border-slate-200{border-color:var(--slate-200)} .border-slate-800{border-color:var(--slate-800)}
.border-amber-200{border-color:var(--amber-200)} .border-blue-100{border-color:var(--blue-100)}
.border-emerald-100{border-color:var(--emerald-100)} .border-emerald-200{border-color:var(--emerald-200)}
.border-purple-100{border-color:var(--purple-100)} .border-rose-100{border-color:var(--rose-100)}

/* ═══ EFFECTS ═══ */
.rounded-lg{border-radius:.5rem} .rounded-xl{border-radius:.75rem} .rounded-2xl{border-radius:1rem} .rounded-full{border-radius:9999px}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shadow-lg{box-shadow:0 10px 25px rgba(0,0,0,.12)}
.opacity-88{opacity:.88} .opacity-90{opacity:.9}
.transition{transition:all .2s ease} .transition-all{transition:all .3s ease} .duration-700{transition-duration:.7s}
.object-contain{object-fit:contain} .object-cover{object-fit:cover} .object-center{object-position:center}

/* ═══ INTERACTIVE STATES ═══ */
.hover\:bg-GD:hover{background:var(--GD)}
.hover\:bg-GL:hover{background:var(--GL)}
.hover\:bg-slate-50:hover{background:var(--slate-50)}
.hover\:bg-whatsapp-dark:hover{background:var(--whatsapp-dark)}
.hover\:bg-white-20:hover{background:rgba(255,255,255,.2)}
.hover\:bg-yellow-300:hover{background:var(--yellow-300)}
.hover\:bg-yellow-400:hover{background:var(--yellow-400)}
.hover\:opacity-90:hover{opacity:.9}
.hover\:text-G:hover{color:var(--G)}
.hover\:text-emerald-400:hover{color:var(--emerald-400)}
.hover\:text-white:hover{color:#fff}
.group:hover .group-hover\:text-G{color:var(--G)}
.focus\:border-G:focus{border-color:var(--G);outline:none}
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--ring-color,var(--GL))}
.focus\:ring-GL:focus{--ring-color:var(--GL)}

/* ═══ RESPONSIVE (mobile-first; breakpoints match common tablet/desktop sizes) ═══ */
@media(min-width:640px){
  .sm\:block{display:block} .sm\:inline{display:inline}
  .sm\:flex-nowrap{flex-wrap:nowrap} .sm\:flex-row{flex-direction:row} .sm\:justify-between{justify-content:space-between}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sm\:gap-3{gap:.75rem} .sm\:gap-4{gap:1rem} .sm\:gap-5{gap:1.25rem} .sm\:gap-6{gap:1.5rem}
  .sm\:h-12{height:3rem} .sm\:h-28{height:7rem} .sm\:h-52{height:13rem} .sm\:h-72{height:18rem} .sm\:h-80{height:20rem} .sm\:w-12{width:3rem} .sm\:w-52{width:13rem} .sm\:w-64{width:16rem}
  .sm\:p-5{padding:1.25rem} .sm\:p-6{padding:1.5rem} .sm\:p-7{padding:1.75rem} .sm\:p-8{padding:2rem} .sm\:p-9{padding:2.25rem} .sm\:p-10{padding:2.5rem}
  .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem} .sm\:px-7{padding-left:1.75rem;padding-right:1.75rem} .sm\:px-8{padding-left:2rem;padding-right:2rem}
  .sm\:py-12{padding-top:3rem;padding-bottom:3rem} .sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
  .sm\:text-2xl{font-size:1.5rem} .sm\:text-3xl{font-size:1.875rem} .sm\:text-4xl{font-size:2.25rem}
  .sm\:text-base{font-size:1rem} .sm\:text-lg{font-size:1.125rem} .sm\:text-sm{font-size:.875rem}
  .sm\:text-xl{font-size:1.25rem} .sm\:text-xs{font-size:.75rem}
}
@media(min-width:768px){
  .md\:flex{display:flex} .md\:hidden{display:none!important}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:text-3xl{font-size:1.875rem}
  .lg\:text-4xl{font-size:2.25rem}
}

/* ═══ COMPONENT-SPECIFIC (unique classes, unchanged from original design) ═══ */
.swiper-pagination-bullet{background:rgba(255,255,255,.45)!important;opacity:1!important;width:8px!important;height:8px!important;transition:all .3s}
.swiper-pagination-bullet-active{background:var(--AU)!important;width:24px!important;border-radius:4px!important}

header{box-shadow:0 1px 0 var(--slate-200),0 2px 16px rgba(0,0,0,.05)}
.date-strip{background:var(--G)}

.stab{padding:5px 14px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;
  border:1.5px solid var(--slate-300);background:transparent;color:var(--slate-500);font-family:inherit;white-space:nowrap}
.stab.on{background:var(--G);color:#fff;border-color:var(--G);box-shadow:0 2px 8px rgba(10,102,52,.25)}
.stab:not(.on):hover{border-color:var(--G);color:var(--G)}

.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media(max-width:480px){.pgrid{grid-template-columns:repeat(5,1fr);gap:3px}}
.pitem{border-radius:10px;border:2.5px solid var(--slate-200);background:#fff;padding:10px 4px;text-align:center;transition:all .25s ease;cursor:default}
.pitem .pn{display:block;font-size:9px;font-weight:700;color:var(--slate-400);letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.pitem .pt{display:block;font-size:14px;font-weight:800;color:var(--slate-800);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.pitem.aktif{background:var(--G);border-color:var(--G);transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,102,52,.3)}
.pitem.aktif .pn{color:rgba(167,243,208,.8)} .pitem.aktif .pt{color:#fff;font-size:15px}
.pitem.next{background:var(--AU);border-color:var(--AU);box-shadow:0 4px 12px rgba(240,165,0,.3)}
.pitem.next .pn{color:rgba(255,237,213,.85)} .pitem.next .pt{color:#fff;font-size:15px}
.pitem.past{opacity:.9;background:var(--slate-50)} .pitem.past .pt{color:var(--slate-400);font-weight:500}
.next-cd{font-variant-numeric:tabular-nums;font-weight:800;color:var(--G);font-size:.75rem}

.gps-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:var(--G);border:none;border-radius:8px;
  color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s}
.gps-btn:hover{background:var(--GD)} .gps-btn:disabled{opacity:.6;cursor:default}
.ring{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--slate-200);border-top-color:var(--G);animation:spin .8s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.slide-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(4,40,25,.82) 0%,rgba(4,40,25,.45) 60%,rgba(4,40,25,.15) 100%)}
.slide-1{background:linear-gradient(135deg,#042819,#0a6634 55%,#0d7040)}
.slide-2{background:linear-gradient(135deg,#0f172a,#07421f 55%,#0f172a)}
.slide-3{background:linear-gradient(135deg,#042819,#0a6634 55%,#0d7040)}

/* ── HERO SLIDER: tinggi seragam & lebih ringkas di semua slide ── */
.heroSwiper{height:340px;overflow:hidden}
.heroSwiper .swiper-wrapper{height:100%}
.heroSwiper .swiper-slide{height:100%!important;display:flex;align-items:center;overflow:hidden}
.heroSwiper .swiper-slide>div:not(.slide-overlay){width:100%}
@media(min-width:480px){.heroSwiper{height:380px}}
@media(min-width:640px){.heroSwiper{height:420px}}
@media(min-width:768px){.heroSwiper{height:440px}}
@media(min-width:1024px){.heroSwiper{height:460px}}

.lift{transition:transform .2s ease,box-shadow .2s ease}
.lift:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.1)}

/* ── Kedalaman kartu global: sedikit shadow lembut di semua kartu putih berbingkai ── */
.bg-white.rounded-2xl.border,.bg-white.rounded-xl.border{box-shadow:0 1px 2px rgba(15,23,42,.03),0 1px 8px rgba(15,23,42,.04)}

/* ── Tombol: sedikit micro-interaction ── */
a.rounded-xl,button.rounded-xl{transition:all .2s ease}
a.rounded-xl:active,button.rounded-xl:active{transform:scale(.97)}

/* ── Trust bar di bawah hero ── */
/* ── Running text: Donasi Masuk Terbaru ── */
.ticker-bar{background:var(--G);display:flex;align-items:stretch;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.08)}
.ticker-label{background:var(--GD);color:#fff;font-size:11px;font-weight:800;padding:9px 12px;display:flex;align-items:center;gap:6px;
  flex-shrink:0;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;z-index:2;box-shadow:2px 0 8px rgba(0,0,0,.12)}
.ticker-label i{color:var(--AU);font-size:10px}
.ticker-track{overflow:hidden;flex:1;display:flex;align-items:center;position:relative}
.ticker-content{display:flex;align-items:center;white-space:nowrap;animation:ticker-scroll 150s linear infinite;will-change:transform}
.ticker-track:hover .ticker-content{animation-play-state:paused}
.ticker-item{color:#fff;font-size:12px;font-weight:600;padding:9px 22px;display:inline-flex;align-items:center;gap:8px;position:relative}
.ticker-item::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.ticker-item i{color:var(--AU);font-size:12px}
.ticker-item b{font-weight:800;color:var(--AU)}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:640px){.ticker-item{font-size:13px;padding:9px 26px}}
@media(prefers-reduced-motion:reduce){.ticker-content{animation:none}.ticker-track{overflow-x:auto}}

.sdiv{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sdiv::before,.sdiv::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--slate-200),transparent)}

.rek-card{background:linear-gradient(135deg,var(--GD) 0%,var(--G) 100%);border-radius:20px;overflow:hidden}

.ztab{padding:12px 6px;border-radius:12px;border:1.5px solid var(--slate-200);background:var(--slate-50);color:var(--slate-500);
  font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;font-family:inherit}
.ztab.on{background:var(--GL);border-color:var(--G);color:var(--G)}
.ztab:not(.on):hover{border-color:var(--G);color:var(--G)}

.badge-ok{background:var(--GL);border:1px solid #bbf7d0;color:var(--emerald-800);border-radius:10px;padding:10px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}
.badge-warn{background:var(--amber-50);border:1px solid var(--amber-200);color:#92400e;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px}

.tbl-wrap{overflow-x:auto;max-height:460px;overflow-y:auto}
.tbl-wrap::-webkit-scrollbar{height:4px}

.wa-float{position:fixed;bottom:20px;right:20px;z-index:999;width:52px;height:52px;border-radius:50%;
  background:var(--whatsapp);box-shadow:0 4px 20px rgba(37,211,102,.5);display:flex;align-items:center;justify-content:center;transition:all .2s ease;text-decoration:none}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.65)}
.wa-float i{color:#fff;font-size:26px}

/* Bulan dropdown */
.bulan-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A6634' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1.5px solid var(--slate-200);border-radius:12px;padding:10px 40px 10px 16px;
  font-family:inherit;font-weight:800;font-size:13px;color:var(--G);cursor:pointer}
.bulan-select:focus{outline:none;border-color:var(--G)}

/* ═══ RESPONSIVE HELPERS (dari desain asli) ═══ */
@media(max-width:640px){
  .hide-mobile{display:none!important}
  h1{font-size:1.6rem!important}
  h2{font-size:1.2rem!important}
  .text-4xl{font-size:1.75rem!important}
  .text-3xl{font-size:1.4rem!important}
  .p-7{padding:1.25rem!important}
  .p-6{padding:1rem!important}
  .gap-5{gap:.75rem!important}
}
@media(max-width:480px){
  .pitem .pt{font-size:12px}
  .pitem.aktif .pt,.pitem.next .pt{font-size:13px}
}

/* ═══ ARTICLE PAGES ═══ */
.article-body p{margin-bottom:1.1rem;line-height:1.8}
.article-body h2{margin-top:2rem;margin-bottom:.75rem}