@charset "UTF-8";
/* ============================================================
   KSUP supplement — utilitas yang dipakai view custom tapi
   TER-PURGE dari build Tailwind babuz (main.css). Dimuat SETELAH
   main.css. Aman untuk production (statis, tanpa build step).
   Palet mengikuti tema babuz (primary hijau-teal).
   ============================================================ */
:root{
  /* Tema KSUP: Biru (utama) · Merah (aksen) · Kuning (CTA/detail) */
  --ksup-primary:#1F4E91;        /* BIRU - identitas utama */
  --ksup-primary-dark:#163a6b;   /* biru tua (hover) */
  --ksup-accent:#D32F2F;         /* MERAH - aksen & highlight */
  --ksup-accent-dark:#b71c1c;
  --ksup-cta:#F5B800;            /* KUNING - CTA & detail */
  --ksup-cta-dark:#d89f00;
  --ksup-cta-text:#1a1a1a;       /* teks gelap di atas kuning (kontras) */
  --ksup-footer:#14305c;         /* footer biru tua */
  --ksup-footer-2:#0f2547;
  --ksup-gray-50:#f9fafb; --ksup-gray-100:#f3f4f6; --ksup-gray-200:#e5e7eb;
  --ksup-gray-300:#d1d5db; --ksup-gray-400:#9ca3af; --ksup-gray-500:#6b7280;
  --ksup-gray-600:#4b5563; --ksup-gray-700:#374151;
}

/* ===== Override palet babuz (hijau → tema baru) ===== */
.text-primary{color:var(--ksup-primary)!important}
.bg-primary{background-color:var(--ksup-primary)!important}
.border-primary{border-color:var(--ksup-primary)!important}
.hover\:bg-primary:hover{background-color:var(--ksup-primary)!important}
.hover\:text-primary:hover{color:var(--ksup-primary)!important}
.hover\:border-primary:hover{border-color:var(--ksup-primary)!important}
.text-accent-2{color:var(--ksup-primary)!important}
.hover\:text-accent-2:hover{color:var(--ksup-primary-dark)!important}
.bg-accent-2{background-color:var(--ksup-footer)!important}
.hover\:bg-accent-2:hover{background-color:var(--ksup-primary-dark)!important}
.bg-accent-1{background-color:var(--ksup-footer-2)!important}
.text-accent-3{color:var(--ksup-cta)!important}
.hover\:text-accent-3:hover{color:var(--ksup-cta)!important}
.bg-accent-3{background-color:var(--ksup-cta)!important}
.hover\:border-accent-3:hover{border-color:var(--ksup-cta)!important}

/* ---- Tombol ---- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;background:var(--ksup-primary);color:#fff;font-weight:600;
  border-radius:.5rem;line-height:1.2;transition:background .25s;text-align:center}
.btn-primary:hover{background:var(--ksup-primary-dark);color:#fff}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;background:#fff;color:var(--ksup-primary);font-weight:600;
  border:1px solid var(--ksup-primary);border-radius:.5rem;line-height:1.2;transition:.25s;text-align:center}
.btn-secondary:hover{background:var(--ksup-primary);color:#fff}

/* ---- Lebar maksimum ---- */
.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}

/* ---- Spacing (padding/margin) yang sering hilang ---- */
.pt-32{padding-top:8rem}.pt-24{padding-top:6rem}.pb-16{padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.p-8{padding:2rem}.p-6{padding:1.5rem}.p-5{padding:1.25rem}.p-4{padding:1rem}.p-3{padding:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}
.mb-8{margin-bottom:2rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.mb-3{margin-bottom:.75rem}.mb-2{margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}
.mt-10{margin-top:2.5rem}.mt-8{margin-top:2rem}.mt-6{margin-top:1.5rem}.mt-4{margin-top:1rem}.mt-3{margin-top:.75rem}.mt-2{margin-top:.5rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---- Grid & gap ---- */
.grid{display:grid}
.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-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
@media (min-width:768px){
  .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\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- Warna teks/border/bg netral (purged) ---- */
.text-gray-400{color:var(--ksup-gray-400)}.text-gray-500{color:var(--ksup-gray-500)}
.text-gray-600{color:var(--ksup-gray-600)}.text-gray-700{color:var(--ksup-gray-700)}
.border{border-width:1px;border-style:solid}
.border-gray-100{border-color:var(--ksup-gray-100)}.border-gray-200{border-color:var(--ksup-gray-200)}.border-gray-300{border-color:var(--ksup-gray-300)}
.bg-red-50{background:#fef2f2}.text-red-600{color:#dc2626}.text-red-700{color:#b91c1c}
.bg-green-50{background:#f0fdf4}.text-green-600{color:#16a34a}.text-green-700{color:#15803d}
.bg-amber-50{background:#fffbeb}.text-amber-700{color:#b45309}.border-amber-300{border-color:#fcd34d}
.border-red-300{border-color:#fca5a5}

/* ---- Rounded / shadow / misc ---- */
.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
.divide-y>*+*{border-top:1px solid var(--ksup-gray-200)}
.prose{max-width:65ch;line-height:1.75}
.prose p{margin-bottom:1rem}
.italic{font-style:italic}

/* ---- Tabel sederhana di area member/publik ---- */
.ksup-table{width:100%;border-collapse:collapse}
.ksup-table th,.ksup-table td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--ksup-gray-200)}

/* jaminan hero clear fixed nav */
.pt-\[108px\]{padding-top:108px}

/* ============ Navbar landing (ksup, media-query eksplisit) ============ */
/* Tinggi total navbar fixed — dipakai spacer & elemen sticky.
   Mobile: baris menu saja (74px). Desktop: + bar atas 40px. */
:root{--ksup-nav-h:74px}
@media(min-width:1024px){:root{--ksup-nav-h:114px}}
.ksup-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.ksup-nav__inner{max-width:1296px;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.ksup-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.ksup-brand img{height:52px;width:auto;max-width:280px;object-fit:contain}
.ksup-brand span{font-weight:700;font-size:1.05rem;color:#222;line-height:1.1}
.ksup-menu{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.ksup-menu a{font-size:1rem;font-weight:600;color:#333;text-decoration:none;position:relative;transition:color .2s;white-space:nowrap}
.ksup-menu a:hover{color:var(--ksup-primary)}
.ksup-menu a::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;background:var(--ksup-primary);transition:width .25s}
.ksup-menu a:hover::after{width:100%}
/* ---- Bar atas (sosmed · info kontak · tombol akun) ---- */
.ksup-topbar{height:40px;background:var(--ksup-footer);color:rgba(255,255,255,.88);font-size:.82rem}
.ksup-topbar__inner{max-width:1296px;height:100%;margin:0 auto;padding:0 1.25rem;
  display:flex;align-items:center;gap:1.5rem}

/* segmen kuning; ::before memanjangkan warna sampai tepi kiri layar */
.ksup-topbar__soc{position:relative;display:flex;align-items:center;gap:.5rem;height:100%;
  padding:0 1.1rem 0 0;background:var(--ksup-cta);color:var(--ksup-cta-text);flex-shrink:0}
.ksup-topbar__soc::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:100vw;background:var(--ksup-cta)}
.ksup-topbar__soc .lbl{font-weight:700;white-space:nowrap}
.ksup-topbar__soc a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ksup-footer);color:#fff;font-size:.92rem;line-height:1;text-decoration:none;transition:.18s}
.ksup-topbar__soc a:hover{background:var(--ksup-primary);color:#fff;transform:translateY(-1px)}

.ksup-topbar__info{display:flex;align-items:center;gap:1.4rem;flex:1;min-width:0}
.ksup-topbar__info span,.ksup-topbar__info a{display:inline-flex;align-items:center;gap:.4rem;
  line-height:1.4;color:rgba(255,255,255,.88);text-decoration:none;white-space:nowrap;transition:color .18s}
.ksup-topbar__info a:hover{color:var(--ksup-cta)}
.ksup-topbar__info i{font-size:.98rem;color:var(--ksup-cta)}
.ksup-topbar__info .alamat{min-width:0;overflow:hidden;text-overflow:ellipsis}

.ksup-topbar__akun{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.ksup-topbar__akun form{margin:0}
.ksup-topbar__akun a,.ksup-topbar__akun button{display:inline-flex;align-items:center;gap:.35rem;
  height:28px;padding:0 .85rem;border-radius:100px;font-size:.8rem;font-weight:700;line-height:1;
  font-family:inherit;text-decoration:none;cursor:pointer;border:0;transition:.18s}
.ksup-topbar__akun .login{background:rgba(255,255,255,.12);color:#fff}
.ksup-topbar__akun .login:hover{background:rgba(255,255,255,.22);color:#fff}
.ksup-topbar__akun .daftar{background:var(--ksup-cta);color:var(--ksup-cta-text)}
.ksup-topbar__akun .daftar:hover{background:var(--ksup-cta-dark);color:var(--ksup-cta-text)}

/* layar sedang: alamat disembunyikan agar tidak berdesakan */
@media(max-width:1279px){.ksup-topbar__info .alamat{display:none}}
/* hamburger / mobile (details hanya membungkus tombol + panel mobile) */
.ksup-mobile-wrap{display:none}
.ksup-mobile-wrap > summary{list-style:none;cursor:pointer;display:grid;place-items:center;
  width:42px;height:42px;border-radius:10px;font-size:1.6rem;line-height:1;color:var(--ksup-primary);
  background:var(--ksup-gray-50);border:1px solid var(--ksup-gray-200);transition:background .15s,color .15s}
.ksup-mobile-wrap > summary::-webkit-details-marker{display:none}
.ksup-mobile-wrap > summary i{grid-area:1/1;line-height:1}
.ksup-mobile-wrap > summary .ic-tutup{display:none}
.ksup-mobile-wrap[open] > summary{background:var(--ksup-primary);color:#fff;border-color:var(--ksup-primary)}
.ksup-mobile-wrap[open] > summary .ic-buka{display:none}
.ksup-mobile-wrap[open] > summary .ic-tutup{display:block}
.ksup-mobile{position:absolute;left:0;right:0;top:100%;list-style:none;margin:0;padding:.25rem 0 .75rem;
  border-top:1px solid var(--ksup-gray-200);background:#fff;box-shadow:0 14px 22px rgba(20,48,92,.12);
  max-height:78vh;overflow-y:auto}
.ksup-mobile li{margin:0}
.ksup-mobile a{display:block;padding:.8rem 1.25rem;color:#333;text-decoration:none;line-height:1.45;font-size:1rem;font-weight:600;
  border-bottom:1px solid var(--ksup-gray-100);transition:background .15s,color .15s;word-break:break-word}
.ksup-mobile a:hover,.ksup-mobile a:active{color:var(--ksup-primary);background:var(--ksup-gray-50)}

/* ---- Dropdown submenu (Organisasi: Pengurus & BPK) ---- */
.ksup-has-sub{position:relative}
.ksup-caret{font-size:.95rem;vertical-align:-2px;transition:transform .2s}
.ksup-has-sub:hover .ksup-caret{transform:rotate(180deg)}
.ksup-submenu{position:absolute;top:100%;left:0;margin-top:16px;min-width:208px;list-style:none;padding:.5rem;
  background:#fff;border:1px solid var(--ksup-gray-200);border-radius:12px;box-shadow:0 18px 44px rgba(20,48,92,.18);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.ksup-has-sub:hover .ksup-submenu,.ksup-has-sub:focus-within .ksup-submenu{opacity:1;visibility:visible;transform:translateY(0)}
/* jembatan transparan menutup jarak agar hover tidak putus saat kursor turun */
.ksup-submenu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.ksup-submenu li{margin:0}
.ksup-submenu li + li{margin-top:3px}
.ksup-submenu a{display:block;padding:.65rem 1rem;border-radius:9px;font-size:.95rem;line-height:1.45;color:#333;white-space:nowrap}
.ksup-submenu a::after{display:none !important}
.ksup-submenu a:hover{background:var(--ksup-gray-50);color:var(--ksup-primary)}
.ksup-submenu a.active{background:rgba(31,78,145,.08);color:var(--ksup-primary);font-weight:600}
/* ---- Grup bersubmenu di menu mobile (accordion) ---- */
.ksup-msub{border-bottom:1px solid var(--ksup-gray-100)}
.ksup-msub > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.8rem 1.25rem;font-size:1rem;font-weight:600;line-height:1.45;color:#333;
  transition:background .15s,color .15s}
.ksup-msub > summary::-webkit-details-marker{display:none}
.ksup-msub > summary i{font-size:1.05rem;line-height:1;color:var(--ksup-gray-400);flex-shrink:0;transition:transform .22s,color .15s}
.ksup-msub > summary:hover{color:var(--ksup-primary);background:var(--ksup-gray-50)}
.ksup-msub[open] > summary{color:var(--ksup-primary);background:var(--ksup-gray-50)}
.ksup-msub[open] > summary i{transform:rotate(180deg);color:var(--ksup-primary)}

.ksup-msub > ul{list-style:none;margin:0;padding:.3rem 0 .5rem;background:var(--ksup-gray-50);
  border-top:1px solid var(--ksup-gray-100)}
.ksup-mobile .ksup-msub > ul a{display:flex;align-items:flex-start;gap:.6rem;
  padding:.55rem 1.25rem .55rem 1.9rem;font-size:.94rem;font-weight:500;color:#555;
  border-bottom:0;line-height:1.5}
.ksup-mobile .ksup-msub > ul a::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;
  background:var(--ksup-cta);margin-top:.58rem}
.ksup-mobile .ksup-msub > ul a:hover{background:#fff;color:var(--ksup-primary)}
.ksup-mobile .ksup-msub > ul a.active{color:var(--ksup-primary);font-weight:700}

/* ---- Tombol Login/Daftar di dasar menu mobile ---- */
.ksup-mobile-auth{display:flex;gap:.6rem;padding:1rem 1.25rem .35rem}
.ksup-mobile-auth form{margin:0;flex:1}
.ksup-mobile .ksup-mobile-auth a,.ksup-mobile-auth button{
  flex:1;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.72rem 1rem;border-radius:9px;font-size:.95rem;font-weight:700;line-height:1.2;
  border:0;cursor:pointer;text-decoration:none;font-family:inherit}
.ksup-mobile .ksup-mobile-auth a.login,.ksup-mobile-auth button.login{
  border:1px solid var(--ksup-gray-300);background:#fff;color:#333}
.ksup-mobile .ksup-mobile-auth a.login:hover{border-color:var(--ksup-primary);color:var(--ksup-primary);background:#fff}
.ksup-mobile .ksup-mobile-auth a.daftar,.ksup-mobile-auth button.daftar{
  background:var(--ksup-cta);color:var(--ksup-cta-text)}
.ksup-mobile .ksup-mobile-auth a.daftar:hover{background:var(--ksup-cta-dark);color:var(--ksup-cta-text)}

/* spacer agar konten tidak tertutup nav fixed */
.ksup-nav-spacer{height:var(--ksup-nav-h)}

/* desktop ≥1024px: menu+cta tampil, burger disembunyikan */
@media (min-width:1024px){
  .ksup-menu{display:flex}
  .ksup-topbar{display:block}
  .ksup-mobile-wrap{display:none}
}
/* mobile <1024px: menu horizontal & bar atas disembunyikan, burger tampil */
@media (max-width:1023px){
  .ksup-menu{display:none}
  .ksup-topbar{display:none}
  .ksup-mobile-wrap{display:block}
}

/* ============ Komponen grid & kartu publik (anti-purge) ============ */
.ksup-grid2{display:grid;grid-template-columns:1fr;gap:1rem}
.ksup-grid3{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){
  .ksup-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ksup-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.ksup-card{display:block;background:#fff;border:1px solid var(--ksup-gray-200);border-radius:.75rem;
  padding:1.1rem 1.25rem;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s;word-break:break-word;overflow-wrap:anywhere}
.ksup-card:hover{border-color:var(--ksup-primary);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.ksup-card h4,.ksup-card h3{margin:0 0 .25rem;font-weight:600;line-height:1.35}
.ksup-card p{margin:0;color:var(--ksup-gray-500);font-size:.95rem}
.ksup-card img{width:100%;height:180px;object-fit:cover;border-radius:.5rem;margin-bottom:.75rem}
.ksup-card .thumb{width:96px;height:72px;object-fit:cover;border-radius:.4rem;margin:0;flex-shrink:0}

/* ============ Section & heading publik ============ */
.ksup-section{max-width:1296px;margin:0 auto;padding:3rem 1.25rem 4rem}
.ksup-section.narrow{max-width:860px}
.ksup-h1{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;line-height:1.2;margin:0 0 .5rem;color:#1a1a1a}
.ksup-h2{font-size:1.4rem;font-weight:700;margin:0 0 1rem;color:#1a1a1a}
.ksup-sub{color:var(--ksup-gray-500);margin:0 0 2rem}
.ksup-card .date{display:inline-flex;align-items:center;gap:.35rem;color:var(--ksup-gray-500);font-size:.9rem;margin-top:.35rem}
.ksup-card .excerpt{color:var(--ksup-gray-600);font-size:.95rem;margin-top:.5rem;line-height:1.5}
.ksup-badge{display:inline-block;background:var(--ksup-cta);color:var(--ksup-cta-text);font-size:.8rem;line-height:1.5;font-weight:600;
  padding:.25rem .75rem;border-radius:999px;margin-top:.6rem;white-space:nowrap;vertical-align:middle}
/* menu aktif */
.ksup-menu a.active{color:var(--ksup-primary);font-weight:700}
.ksup-menu a.active::after{width:100%}
.ksup-mobile a.active{color:var(--ksup-primary);font-weight:700}
.ksup-empty{text-align:center;color:var(--ksup-gray-500);padding:3rem 0}
/* tabel publik */
.ksup-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ksup-gray-200);border-radius:.75rem;overflow:hidden}
.ksup-tbl th,.ksup-tbl td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--ksup-gray-100)}
.ksup-tbl th{background:var(--ksup-gray-50);font-weight:600}
.ksup-tbl tr:last-child td{border-bottom:0}
/* form publik */
.ksup-field{width:100%;border:1px solid var(--ksup-gray-300);border-radius:.5rem;padding:.7rem .9rem;font-size:1rem;background:#fff}
.ksup-field:focus{outline:none;border-color:var(--ksup-primary)}
.ksup-label{display:block;margin-bottom:.35rem;font-weight:500;color:#333}
.ksup-panel{background:#fff;border:1px solid var(--ksup-gray-200);border-radius:.85rem;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.ksup-alert-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;border-radius:.5rem;padding:.75rem 1rem;margin-bottom:1rem}
.ksup-alert-err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:.5rem;padding:.75rem 1rem;margin-bottom:1rem}
.ksup-pagination{margin-top:2rem}
.ksup-accordion{background:#fff;border:1px solid var(--ksup-gray-200);border-radius:.6rem;margin-bottom:.6rem;padding:1rem 1.25rem}
.ksup-accordion summary{font-weight:600;cursor:pointer;list-style:none}
.ksup-accordion summary::-webkit-details-marker{display:none}
.ksup-accordion[open] summary{color:var(--ksup-primary)}
.ksup-accordion .ans{margin-top:.75rem;color:var(--ksup-gray-600);line-height:1.6}
.ksup-video{position:relative;padding-top:56.25%;border-radius:.6rem;overflow:hidden}
.ksup-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* layout detail: konten + sidebar */
.ksup-detail{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:900px){.ksup-detail{grid-template-columns:2fr 1fr}}

/* ============ Pagination kustom (semua elemen tinggi & gaya seragam) ============ */
.ksup-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-top:2.5rem}
.ksup-pager a,.ksup-pager span{box-sizing:border-box}
.ksup-pager__btn,.ksup-pager__num,.ksup-pager__dots{
  display:inline-flex;align-items:center;justify-content:center;height:40px;
  border:1px solid var(--ksup-gray-200);border-radius:.5rem;background:#fff;
  color:#333;text-decoration:none;font-size:.95rem;font-weight:500;transition:all .2s}
.ksup-pager__btn{padding:0 1.1rem;gap:.3rem}
.ksup-pager__num{min-width:40px;padding:0 .55rem}
.ksup-pager__btn:hover,.ksup-pager__num:hover{border-color:var(--ksup-primary);color:var(--ksup-primary)}
.ksup-pager__btn.disabled{opacity:.45;pointer-events:none;background:var(--ksup-gray-50)}
.ksup-pager__num.active{background:var(--ksup-primary);border-color:var(--ksup-primary);color:#fff;font-weight:600}
.ksup-pager__dots{min-width:40px;border-color:transparent;color:var(--ksup-gray-400)}
.ksup-pager__pages{display:flex;align-items:center;gap:.4rem;list-style:none;margin:0;padding:0}
@media(max-width:540px){.ksup-pager__pages{display:none}}

/* ============ Select: beri ruang untuk caret + caret kustom ============ */
select.ksup-field{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px}

/* ============ Link sidebar (anti tumpang tindih saat wrap) ============ */
.ksup-panel h2{margin:0 0 .75rem}
.ksup-sidelink{display:block;padding:.6rem 0;line-height:1.45;color:#333;text-decoration:none;
  border-bottom:1px solid var(--ksup-gray-100);word-break:break-word;overflow-wrap:anywhere}
.ksup-sidelink:last-child{border-bottom:0}
.ksup-sidelink:hover{color:var(--ksup-primary)}
.ksup-sidelink.active{color:var(--ksup-primary);font-weight:600}

/* ============ Styling konten kaya (.prose) dari editor ============ */
.prose{color:#333}
.prose p{margin:0 0 1rem}
.prose h1,.prose h2,.prose h3,.prose h4{font-weight:700;line-height:1.3;margin:1.3rem 0 .6rem;color:#1a1a1a}
.prose h1{font-size:1.6rem}.prose h2{font-size:1.4rem}.prose h3{font-size:1.2rem}.prose h4{font-size:1.05rem}
.prose a{color:var(--ksup-primary);text-decoration:underline}
.prose strong,.prose b{font-weight:700}
.prose ul{list-style:disc;padding-left:1.4rem;margin:1rem 0}
.prose ol{list-style:decimal;padding-left:1.4rem;margin:1rem 0}
.prose li{margin:.3rem 0}
.prose img{max-width:100%;height:auto;border-radius:.5rem;margin:1rem 0}
.prose blockquote{border-left:4px solid var(--ksup-primary);padding-left:1rem;color:var(--ksup-gray-600);margin:1rem 0}
/* Tabel di dalam konten: bordered, rapi, bisa di-scroll horizontal di layar kecil */
.prose table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.92rem;background:#fff}
.prose table th,.prose table td{border:1px solid var(--ksup-gray-300);padding:.55rem .7rem;text-align:left;vertical-align:top;line-height:1.4}
.prose table th{background:var(--ksup-gray-50);font-weight:600}
.prose table tr:nth-child(even) td{background:#fafafa}
.prose table img{margin:0}
.prose .table-responsive,.prose figure.table{overflow-x:auto;margin:1.25rem 0;-webkit-overflow-scrolling:touch}
.prose .table-responsive table{margin:0;width:auto;min-width:max-content}

/* ============ Peta Google (kontak) ============ */
.ksup-map{border-radius:.75rem;overflow:hidden;border:1px solid var(--ksup-gray-200);line-height:0}
.ksup-map iframe{display:block;width:100%;height:360px;border:0}
@media(max-width:540px){.ksup-map iframe{height:260px}}

/* ============ Dekorasi latar samping (profesional, subtil) ============ */
body{overflow-x:hidden}
.ksup-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ksup-blob{position:absolute;border-radius:50%;filter:blur(90px)}
.ksup-bg .b1{width:420px;height:420px;background:var(--ksup-primary);opacity:.10;top:-130px;left:-150px}
.ksup-bg .b2{width:460px;height:460px;background:var(--ksup-cta);opacity:.12;bottom:-170px;right:-170px}
.ksup-bg .b3{width:300px;height:300px;background:var(--ksup-accent);opacity:.06;top:45%;right:-130px}
/* pola titik di gutter kiri/kanan — hanya tampil di layar lebar agar tak menutup konten */
.ksup-side{position:absolute;top:120px;bottom:120px;width:150px;display:none;
  background-image:radial-gradient(var(--ksup-primary) 1.4px, transparent 1.4px);
  background-size:22px 22px;opacity:.10}
.ksup-side--l{left:24px}
.ksup-side--r{right:24px}
@media(min-width:1500px){.ksup-side{display:block}}

/* ============ Penyesuaian ukuran hero beranda ============ */
.home-one-hero-pattern .d1{font-size:clamp(2rem,4vw,3.3rem)!important;line-height:1.12!important}
.home-one-hero-pattern .h5{font-size:clamp(.9rem,1.4vw,1.1rem)!important}
.home-one-hero-pattern .xl-text{font-size:clamp(.95rem,1.4vw,1.15rem)!important;line-height:1.6}
/* kurangi padding atas/bawah hero agar muat di layar */
.home-one-hero-pattern .spt120px{padding-top:2.5rem!important}
.home-one-hero-pattern .spb120px{padding-bottom:3rem!important}
.home-one-hero-pattern img{max-height:440px;width:auto}

/* ============ Seksi home profesional ============ */
.ksup-sec{max-width:1296px;margin:0 auto;padding:3.5rem 1.25rem}
.ksup-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap}
.ksup-sec-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;color:#1a1a1a;margin:0;position:relative;padding-bottom:.55rem}
.ksup-sec-title::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--ksup-cta);border-radius:2px}
.ksup-sec-link{color:var(--ksup-primary);font-weight:600;text-decoration:none;white-space:nowrap}
.ksup-sec-link:hover{color:var(--ksup-primary-dark)}
.ksup-sec-center{text-align:center;max-width:640px;margin:0 auto 2.25rem}
.ksup-sec-center .ksup-sec-title{display:inline-block}
.ksup-sec-center .ksup-sec-title::after{left:50%;transform:translateX(-50%)}
.ksup-sec-center p{color:var(--ksup-gray-500);margin:.75rem 0 0}

/* Statistik band */
.ksup-stats{background:linear-gradient(135deg,var(--ksup-primary),var(--ksup-primary-dark));color:#fff}
.ksup-stats__inner{max-width:1296px;margin:0 auto;padding:2.4rem 1.25rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;text-align:center}
@media(min-width:768px){.ksup-stats__inner{grid-template-columns:repeat(4,1fr)}}
.ksup-stat .num{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;line-height:1;color:var(--ksup-cta)}
.ksup-stat .lbl{margin-top:.4rem;opacity:.92;font-size:.95rem}

/* Kartu keunggulan */
.ksup-feature{background:#fff;border:1px solid var(--ksup-gray-200);border-radius:.85rem;padding:1.6rem;transition:transform .2s,box-shadow .2s;height:100%}
.ksup-feature:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-3px)}
.ksup-feature .ic{width:54px;height:54px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.7rem;background:rgba(31,78,145,.10);color:var(--ksup-primary);margin-bottom:1rem}
.ksup-feature h4{margin:0 0 .4rem;font-weight:700}
.ksup-feature p{margin:0;color:var(--ksup-gray-500);font-size:.95rem;line-height:1.55}

/* CTA band */
.ksup-cta-band{background:linear-gradient(135deg,var(--ksup-primary),var(--ksup-primary-dark));border-radius:1rem;color:#fff;padding:2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.ksup-cta-band h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;margin:0 0 .3rem}
.ksup-cta-band p{margin:0;opacity:.9}
.ksup-cta-band .act{display:flex;gap:.75rem;flex-wrap:wrap}
.ksup-btn-yellow{display:inline-flex;align-items:center;gap:.45rem;background:var(--ksup-cta);color:var(--ksup-cta-text);font-weight:700;padding:.8rem 1.6rem;border-radius:.5rem;text-decoration:none}
.ksup-btn-yellow:hover{background:var(--ksup-cta-dark);color:var(--ksup-cta-text)}
.ksup-btn-ghost{display:inline-flex;align-items:center;gap:.45rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);font-weight:600;padding:.8rem 1.6rem;border-radius:.5rem;text-decoration:none}
.ksup-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.ksup-soft{background:var(--ksup-gray-50)}

/* ============ Footer: logo & sosial ============ */
.ksup-flogo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:.75rem;padding:.6rem .9rem;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ksup-flogo img{height:54px;width:auto;max-width:230px;object-fit:contain;display:block}
.ksup-soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,.10);color:#fff;font-size:1.35rem;transition:.2s;text-decoration:none}
.ksup-soc:hover{background:var(--ksup-cta);color:var(--ksup-cta-text)}

/* ============ Footer: rapikan jarak & kontak ============ */
.ksup-footer .spy120px{padding-top:3.5rem!important;padding-bottom:2.5rem!important}
.ksup-footer .spy32px{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.ksup-contact{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.ksup-contact li{display:flex;align-items:flex-start;gap:.6rem;color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.55}
.ksup-contact li i{font-size:1.05rem;line-height:1.55;width:1.25rem;text-align:center;flex-shrink:0;color:var(--ksup-cta)}
.ksup-contact li span,.ksup-contact li a{line-height:1.55}
.ksup-contact a{color:rgba(255,255,255,.8);text-decoration:none}
.ksup-contact a:hover{color:var(--ksup-cta)}

/* ============ Footer grid 4 kolom seimbang ============ */
.ksup-footer{background:var(--ksup-footer);color:#fff;position:relative;z-index:1}
.ksup-footer__main{max-width:1296px;margin:0 auto;padding:3.5rem 1.25rem 2.5rem;display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:640px){.ksup-footer__main{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ksup-footer__main{grid-template-columns:1.6fr 1fr 1.7fr 1.1fr}}
.ksup-fcol h5{font-size:1.15rem;font-weight:700;margin:0 0 1.1rem;color:#fff}
.ksup-fdesc{color:rgba(255,255,255,.75);margin:1rem 0 0;line-height:1.6;font-size:.95rem}
.ksup-flinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.ksup-flinks a{display:inline-flex;align-items:center;gap:.45rem;line-height:1.5;
  color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s,transform .2s}
.ksup-flinks a i{font-size:.95rem;line-height:1;color:var(--ksup-cta);opacity:.75;transition:opacity .2s,transform .2s}
.ksup-flinks a:hover{color:var(--ksup-cta);transform:translateX(3px)}
.ksup-flinks a:hover i{opacity:1;transform:translateX(2px)}
.ksup-fhours{color:rgba(255,255,255,.85);line-height:1.7;margin:0 0 1.2rem}
.ksup-fhours b{color:var(--ksup-cta)}
.ksup-footer__bottom{border-top:1px solid rgba(255,255,255,.12)}
.ksup-footer__bottom .inner{max-width:1296px;margin:0 auto;padding:1.2rem 1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.9rem;color:rgba(255,255,255,.8)}
.ksup-footer__bottom a{color:rgba(255,255,255,.8);text-decoration:none}
.ksup-footer__bottom a:hover{color:var(--ksup-cta)}

/* ============ Halaman Auth (login/register/lupa/reset) ============ */
.ksup-auth{padding:3.5rem 1.25rem;display:flex;justify-content:center}
.ksup-auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--ksup-gray-200);
  border-radius:1rem;box-shadow:0 12px 40px rgba(20,48,92,.08);padding:2.5rem}
.ksup-auth-card.wide{max-width:600px}
.ksup-auth-logo{text-align:center;margin-bottom:1.25rem}
.ksup-auth-logo img{height:60px;width:auto;max-width:240px;display:inline-block;object-fit:contain}
.ksup-auth h1{text-align:center;font-size:1.5rem;font-weight:700;color:#1a1a1a;margin:0 0 .35rem}
.ksup-auth .sub{text-align:center;color:var(--ksup-gray-500);margin:0 0 1.75rem;font-size:.95rem}
.ksup-auth .fg{margin-bottom:1.1rem}
.ksup-auth .row2{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:520px){.ksup-auth .row2{grid-template-columns:1fr 1fr}}
.ksup-auth .links{text-align:center;margin-top:1.5rem;font-size:.95rem}
.ksup-auth .links a{color:var(--ksup-primary);font-weight:600;text-decoration:none}
.ksup-auth .links a:hover{color:var(--ksup-primary-dark)}
.ksup-auth .btn-primary{width:100%;padding:.85rem;font-size:1rem}
.ksup-check{display:flex;align-items:center;gap:.5rem;color:var(--ksup-gray-600);font-size:.95rem}

/* ============================================================
   AREA MEMBER — sistem komponen profesional (kartu, tile, tabel,
   form, hasil simulasi). Dipakai di seluruh halaman member.
   ============================================================ */
.mbr-wrap{max-width:1000px;margin:0 auto;padding:6.5rem 1.25rem 4.5rem}
.mbr-wrap.narrow{max-width:680px}
.mbr-wrap.mid{max-width:820px}

/* Header halaman: judul + aksi */
.mbr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.mbr-head .ttl{margin:0;font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:700;color:#1a1a1a;position:relative;padding-bottom:.55rem}
.mbr-head .ttl::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;background:var(--ksup-cta);border-radius:2px}
.mbr-head .sub{margin:.2rem 0 0;color:var(--ksup-gray-500);font-size:.95rem}
.mbr-head .act{display:flex;gap:.55rem;flex-wrap:wrap}

/* Kartu surface dasar */
.mbr-card{background:#fff;border:1px solid var(--ksup-gray-200);border-radius:1rem;padding:1.75rem;
  box-shadow:0 1px 3px rgba(20,48,92,.05);margin-bottom:1.5rem}
.mbr-card:last-child{margin-bottom:0}
.mbr-card .card-ttl{margin:0 0 1.25rem;font-size:1.12rem;font-weight:700;color:#1a1a1a;display:flex;align-items:center;gap:.55rem}
.mbr-card .card-ttl i{color:var(--ksup-primary);font-size:1.25rem}

/* Welcome header dashboard */
.mbr-welcome{position:relative;overflow:hidden;border-radius:1.25rem;
  background:linear-gradient(135deg,var(--ksup-primary),var(--ksup-primary-dark));color:#fff;
  padding:1.9rem 2rem;margin-bottom:1.75rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.mbr-welcome::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(245,184,0,.16)}
.mbr-welcome::before{content:"";position:absolute;left:30%;bottom:-90px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.mbr-welcome .ava{position:relative;z-index:1;width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:1.55rem;font-weight:800;color:#fff;flex-shrink:0;border:1px solid rgba(255,255,255,.28)}
.mbr-welcome .who{flex:1;min-width:200px;position:relative;z-index:1}
.mbr-welcome .who h2{margin:0;font-size:1.35rem;font-weight:700;line-height:1.2}
.mbr-welcome .who .meta{margin-top:.45rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.mbr-welcome .chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.22rem .75rem;font-size:.82rem}
.mbr-welcome .act{position:relative;z-index:1}
.mbr-logout{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:600;padding:.55rem 1.1rem;border-radius:.6rem;transition:.2s;cursor:pointer}
.mbr-logout:hover{background:#fff;color:var(--ksup-primary)}

/* Grid tile menu */
.mbr-tiles{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
@media(min-width:560px){.mbr-tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.mbr-tiles{grid-template-columns:repeat(3,1fr)}}
.mbr-tile{position:relative;display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--ksup-gray-200);
  border-radius:.9rem;padding:1.05rem 1.15rem;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
.mbr-tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,48,92,.10);border-color:var(--ksup-primary)}
.mbr-tile .ic{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;background:rgba(31,78,145,.10);color:var(--ksup-primary);transition:.18s}
.mbr-tile:hover .ic{background:var(--ksup-primary);color:#fff}
.mbr-tile .tx{min-width:0}
.mbr-tile .tx b{display:block;font-weight:600;color:#1a1a1a;line-height:1.2}
.mbr-tile .tx span{display:block;font-size:.8rem;color:var(--ksup-gray-500);margin-top:.18rem;line-height:1.35}
.mbr-tile .badge{position:absolute;top:.7rem;right:.7rem;background:var(--ksup-accent);color:#fff;
  font-size:.68rem;font-weight:700;padding:.12rem .5rem;border-radius:999px}

/* Definition rows (hasil simulasi / ringkasan) */
.mbr-dl{display:flex;flex-direction:column}
.mbr-dl .r{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--ksup-gray-200)}
.mbr-dl .r:last-child{border-bottom:0}
.mbr-dl .r .k{color:var(--ksup-gray-500)}
.mbr-dl .r .v{font-weight:600;color:#1a1a1a;text-align:right;font-variant-numeric:tabular-nums}
.mbr-dl .r.hl .v{color:var(--ksup-accent)}
.mbr-dl .r.total{margin-top:.5rem;border-top:2px solid var(--ksup-gray-200);border-bottom:0;padding-top:.9rem}
.mbr-dl .r.total .k{color:#1a1a1a;font-weight:700}
.mbr-dl .r.total .v{font-size:1.2rem;color:var(--ksup-primary)}

/* Banner keputusan simulasi */
.mbr-verdict{margin-top:1.2rem;border-radius:.7rem;padding:.9rem 1rem;text-align:center;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:.5rem;letter-spacing:.02em}
.mbr-verdict.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.mbr-verdict.no{background:#fef3f2;color:#b42318;border:1px solid #fecdca}

/* Form member: styling otomatis saat dibungkus .mbr-form */
.mbr-form label{display:block;margin-bottom:.35rem;font-weight:500;color:#374151;font-size:.9rem}
.mbr-form input:not([type=checkbox]):not([type=radio]),.mbr-form select,.mbr-form textarea{
  width:100%;border:1px solid var(--ksup-gray-300);border-radius:.6rem;padding:.62rem .85rem;font-size:.97rem;
  background:#fff;color:#1a1a1a;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.mbr-form input:focus,.mbr-form select:focus,.mbr-form textarea:focus{outline:none;border-color:var(--ksup-primary);box-shadow:0 0 0 3px rgba(31,78,145,.12)}
.mbr-form input[type=file]{padding:.48rem .6rem;background:var(--ksup-gray-50);cursor:pointer}
.mbr-grid2{display:grid;grid-template-columns:1fr;gap:1rem 1.1rem}
@media(min-width:560px){.mbr-grid2{grid-template-columns:1fr 1fr}}
.mbr-field{margin-bottom:1.15rem}
.mbr-field.full{grid-column:1/-1}
.mbr-form select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px}

/* Tabel member */
.mbr-table-wrap{overflow-x:auto;border:1px solid var(--ksup-gray-200);border-radius:1rem;background:#fff;box-shadow:0 1px 3px rgba(20,48,92,.05)}
.mbr-table{width:100%;border-collapse:collapse;font-size:.93rem}
.mbr-table th,.mbr-table td{padding:.85rem 1.1rem;text-align:left;vertical-align:middle}
.mbr-table thead th{background:var(--ksup-gray-50);color:var(--ksup-gray-600);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--ksup-gray-200);white-space:nowrap}
.mbr-table tbody tr+tr td{border-top:1px solid var(--ksup-gray-100)}
.mbr-table tbody tr:hover td{background:#fcfcfd}
.mbr-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mbr-table tr.total td{font-weight:700;background:var(--ksup-gray-50);border-top:2px solid var(--ksup-gray-200)}

/* Status pill */
.mbr-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;text-decoration:none;letter-spacing:.01em}
.mbr-pill.wait{background:#eff6ff;color:#1d4ed8}
.mbr-pill.ok{background:#ecfdf3;color:#067647}
.mbr-pill.no{background:#fef3f2;color:#b42318}
.mbr-pill.new{background:var(--ksup-accent);color:#fff}
.mbr-tile .badge,.mbr-welcome .chip{line-height:1.5}

/* Alert member */
.mbr-alert{display:flex;align-items:flex-start;gap:.6rem;border-radius:.7rem;padding:.85rem 1rem;margin-bottom:1.25rem;font-size:.95rem;line-height:1.5}
.mbr-alert i{font-size:1.15rem;flex-shrink:0;margin-top:.05rem}
.mbr-alert.warn{background:#fffaeb;color:#b54708;border:1px solid #fedf89}
.mbr-alert.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.mbr-alert.err{background:#fef3f2;color:#b42318;border:1px solid #fecdca}
.mbr-alert a{font-weight:700;text-decoration:underline;color:inherit}

/* Link & navigasi kecil */
.mbr-link{color:var(--ksup-primary);font-weight:600;text-decoration:none}
.mbr-link:hover{color:var(--ksup-primary-dark);text-decoration:underline}
.mbr-back{display:inline-flex;align-items:center;gap:.35rem;color:var(--ksup-gray-500);text-decoration:none;font-weight:500;margin-bottom:1.1rem}
.mbr-back:hover{color:var(--ksup-primary)}

/* Daftar pengumuman */
.mbr-list{display:flex;flex-direction:column;gap:.85rem}
.mbr-listitem{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--ksup-gray-200);
  border-radius:.85rem;padding:1.1rem 1.25rem;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.mbr-listitem:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,48,92,.08);border-color:var(--ksup-primary)}
.mbr-listitem .ic{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;background:rgba(31,78,145,.08);color:var(--ksup-primary)}
.mbr-listitem .bd{flex:1;min-width:0}
.mbr-listitem .bd b{display:block;font-weight:600;color:#1a1a1a;line-height:1.35;margin-bottom:.3rem}
.mbr-listitem .bd .meta{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--ksup-gray-500);line-height:1.4}

/* Empty state */
.mbr-empty{text-align:center;color:var(--ksup-gray-500);padding:2.5rem 1rem}
.mbr-empty i{font-size:2.2rem;opacity:.35;display:block;margin-bottom:.5rem}

/* Tombol kecil sekunder di area member (PDF/Excel) */
.mbr-btn-sm{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:.55rem;
  font-weight:600;font-size:.88rem;border:1px solid var(--ksup-gray-300);background:#fff;color:var(--ksup-gray-700);text-decoration:none;transition:.18s}
.mbr-btn-sm:hover{border-color:var(--ksup-primary);color:var(--ksup-primary)}
.mbr-btn-sm.pdf:hover{border-color:var(--ksup-accent);color:var(--ksup-accent)}

/* ============================================================
   TIPOGRAFI — Plus Jakarta Sans (judul) + Inter (isi teks)
   Menggantikan "Kanit" bawaan template yang bentuknya pendek/padat.
   Dimuat lewat <link> Google Fonts di layouts/landing.blade.php.
   ============================================================ */
body{
  font-family:var(--body-font)!important;
  font-size:1rem;
  line-height:1.7;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Judul: lebih tegas, tidak "bantet" — tinggi baris & tracking dirapikan */
h1,h2,h3,h4,h5,h6,
.mbr-title,.sec-title,.card-title{
  font-family:var(--heading-font)!important;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.02em;
}
h1{line-height:1.15;letter-spacing:-.025em;font-weight:800}
h2{line-height:1.2}
h5,h6{line-height:1.35;letter-spacing:-.01em}

/* Paragraf & isi konten lebih lega dibaca */
p,li,dd,blockquote{line-height:1.75}
.prose p,.prose li{font-size:1.02rem;line-height:1.8}
.prose h2,.prose h3,.prose h4{margin-top:1.6em;margin-bottom:.6em}

/* Elemen form & tombol ikut font situs */
input,select,textarea,button,.btn-primary,.btn-secondary{
  font-family:var(--body-font);
  letter-spacing:-.005em;
}
.btn-primary,.btn-secondary{font-weight:600;line-height:1.35}

/* Template mengunci `a, button { line-height:0 }` sehingga teks link
   menempel/terpotong. Kembalikan tinggi baris normal untuk link teks. */
main a,footer a,.prose a,p a,li a,td a,th a{line-height:inherit}

/* Angka (nominal, statistik, tabel) rata lebar agar kolom tidak goyang */
.mbr-listitem .meta,table td,table th,.odometer,.stat-num{
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   HALAMAN DETAIL BER-SIDEBAR (pgd-*) — dipakai halaman statis
   "Tentang Kami" dan bisa dipakai ulang halaman detail lain.
   Struktur: .pgd-wrap > .container.pgd-layout > (.pgd-main + .pgd-side)
   ============================================================ */
.pgd-wrap{
  --pgd-blue:#1F4E91; --pgd-gold:#F5B800; --pgd-ink:#1a2233;
  --pgd-muted:#6b7688; --pgd-line:#e8ecf2; --pgd-soft:#f6f8fb;
  padding:3rem 0 4.5rem;
}
.pgd-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.25rem;align-items:start}

/* ---- Kartu konten ---- */
.pgd-main{min-width:0;background:#fff;border:1px solid var(--pgd-line);border-radius:22px;
  overflow:hidden;box-shadow:0 18px 44px -34px rgba(26,34,51,.55)}
.pgd-cover{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;background:var(--pgd-soft)}
.pgd-body{padding:2rem 2.1rem 2.3rem}
@media(max-width:600px){.pgd-body{padding:1.4rem 1.15rem 1.75rem}}

.pgd-title{font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;
  color:var(--pgd-ink);margin:0 0 .35rem}
.pgd-rule{width:56px;height:4px;border-radius:100px;background:var(--pgd-gold);margin:0 0 1.4rem}

/* Isi dari editor WYSIWYG */
.pgd-content{font-size:1.03rem;line-height:1.85;color:#33405a}
.pgd-content > *:first-child{margin-top:0}
.pgd-content p{margin:0 0 1.15rem}
.pgd-content h2,.pgd-content h3,.pgd-content h4{color:var(--pgd-ink);margin:1.9rem 0 .7rem;line-height:1.3}
.pgd-content h2{font-size:1.42rem}.pgd-content h3{font-size:1.2rem}.pgd-content h4{font-size:1.06rem}
.pgd-content ul,.pgd-content ol{margin:0 0 1.15rem;padding-left:1.4rem}
.pgd-content ul{list-style:disc}.pgd-content ol{list-style:decimal}
.pgd-content li{margin-bottom:.45rem}
.pgd-content img{max-width:100%;height:auto;border-radius:14px;margin:1.2rem 0}
.pgd-content a{color:var(--pgd-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pgd-content blockquote{margin:1.4rem 0;padding:.9rem 1.25rem;border-left:4px solid var(--pgd-gold);
  background:var(--pgd-soft);border-radius:0 12px 12px 0;color:var(--pgd-ink);font-style:italic}
.pgd-content table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.pgd-content th,.pgd-content td{border:1px solid var(--pgd-line);padding:.6rem .75rem;text-align:left}
.pgd-content th{background:var(--pgd-soft);font-weight:700}
.pgd-content hr{border:0;border-top:1px solid var(--pgd-line);margin:1.8rem 0}

/* ---- Navigasi halaman sebelum/sesudah ---- */
.pgd-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--pgd-line)}
.pgd-nav a{display:flex;flex-direction:column;gap:.3rem;padding:.95rem 1.1rem;border:1px solid var(--pgd-line);
  border-radius:14px;text-decoration:none;color:inherit;transition:.18s;min-width:0}
.pgd-nav a:hover{border-color:var(--pgd-blue);background:var(--pgd-soft)}
.pgd-nav .lbl{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--pgd-muted);display:inline-flex;align-items:center;gap:.35rem}
.pgd-nav .txt{font-size:.94rem;font-weight:600;color:var(--pgd-ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgd-nav a.nxt{text-align:right;align-items:flex-end}
@media(max-width:520px){.pgd-nav{grid-template-columns:1fr}
  .pgd-nav a.nxt{text-align:left;align-items:flex-start}}

/* ---- Sidebar ---- */
.pgd-side{position:sticky;top:calc(var(--ksup-nav-h) + 16px);display:flex;flex-direction:column;gap:1.15rem;min-width:0}
.pgd-widget{background:#fff;border:1px solid var(--pgd-line);border-radius:18px;padding:1.35rem 1.3rem;
  box-shadow:0 14px 36px -32px rgba(26,34,51,.55)}
.pgd-wtitle{display:flex;align-items:center;gap:.55rem;font-size:1rem;font-weight:800;color:var(--pgd-ink);
  margin:0 0 1rem;padding-bottom:.8rem;border-bottom:1px solid var(--pgd-line);letter-spacing:-.01em}
.pgd-wtitle::before{content:"";width:4px;height:18px;border-radius:100px;background:var(--pgd-blue);flex-shrink:0}
.pgd-wtitle i{color:var(--pgd-blue)}

/* daftar halaman lain */
.pgd-menu{display:flex;flex-direction:column;gap:.15rem}
.pgd-menu a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem .8rem;border-radius:11px;text-decoration:none;color:#33405a;font-size:.93rem;
  font-weight:500;line-height:1.45;transition:.16s}
.pgd-menu a i{font-size:1rem;color:var(--pgd-muted);flex-shrink:0;transition:.16s}
.pgd-menu a:hover{background:var(--pgd-soft);color:var(--pgd-blue)}
.pgd-menu a:hover i{color:var(--pgd-blue);transform:translateX(3px)}
.pgd-menu a.on{background:rgba(31,78,145,.08);color:var(--pgd-blue);font-weight:700}
.pgd-menu a.on i{color:var(--pgd-blue)}

/* info kontak ringkas */
.pgd-info{display:flex;flex-direction:column;gap:.85rem}
.pgd-info li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.55;color:#33405a}
.pgd-info .ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(31,78,145,.08);color:var(--pgd-blue);font-size:1.05rem}
.pgd-info a{color:#33405a;text-decoration:none}
.pgd-info a:hover{color:var(--pgd-blue)}
.pgd-info small{display:block;font-size:.76rem;color:var(--pgd-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.1rem}

/* CTA */
.pgd-cta{border-radius:18px;padding:1.5rem 1.35rem;color:#fff;text-align:center;
  background:linear-gradient(155deg,#1F4E91,#14305c);box-shadow:0 18px 40px -26px rgba(31,78,145,.85)}
.pgd-cta > i{font-size:1.9rem;color:var(--pgd-gold)}
.pgd-cta h4{font-size:1.05rem;font-weight:800;margin:.6rem 0 .45rem;line-height:1.35;color:#fff}
.pgd-cta p{font-size:.87rem;line-height:1.6;color:rgba(255,255,255,.8);margin:0 0 1.1rem}
.pgd-cta a{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;
  padding:.7rem 1rem;border-radius:10px;background:var(--pgd-gold);color:#1a1a1a;
  font-weight:700;font-size:.92rem;text-decoration:none;transition:.18s}
.pgd-cta a:hover{background:#ffc71f;transform:translateY(-2px)}

.pgd-empty{font-size:.9rem;color:var(--pgd-muted);margin:0}

@media(max-width:1024px){
  .pgd-layout{grid-template-columns:1fr}
  .pgd-side{position:static}
}

/* ---- Tambahan pgd-* untuk halaman detail agenda ---- */
/* Kotak tanggal besar di kepala kartu */
.pgd-headline{display:flex;gap:1.15rem;align-items:flex-start;padding-bottom:1.35rem;
  border-bottom:1px solid var(--pgd-line);margin-bottom:1.5rem}
.pgd-datebox{width:78px;flex-shrink:0;border-radius:14px;overflow:hidden;text-align:center;
  border:1px solid var(--pgd-line);box-shadow:0 10px 24px -20px rgba(31,78,145,.9)}
.pgd-datebox .m{background:var(--pgd-blue);color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.3rem 0}
.pgd-datebox .d{font-size:1.75rem;font-weight:800;color:var(--pgd-ink);line-height:1.1;padding:.45rem 0 .1rem}
.pgd-datebox .y{font-size:.74rem;font-weight:600;color:var(--pgd-muted);padding-bottom:.5rem}
.pgd-headline .hd{min-width:0;flex:1}
.pgd-headline .hd h2{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:800;line-height:1.28;
  letter-spacing:-.02em;color:var(--pgd-ink);margin:0 0 .6rem}

/* Chip info (tanggal · tempat · dilihat) */
.pgd-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.pgd-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;
  padding:.38rem .75rem;border-radius:100px;background:var(--pgd-soft);color:#33405a}
.pgd-chip i{font-size:1rem;color:var(--pgd-blue)}
.pgd-chip.gold{background:rgba(245,184,0,.16);color:#7a5c00}
.pgd-chip.gold i{color:#b98a00}

/* Daftar fakta di sidebar */
.pgd-facts{display:flex;flex-direction:column;gap:.9rem}
.pgd-facts li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;line-height:1.55;color:#33405a}
.pgd-facts .ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(31,78,145,.08);color:var(--pgd-blue);font-size:1.05rem}
.pgd-facts small{display:block;font-size:.75rem;color:var(--pgd-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.1rem}

/* Item daftar di sidebar (agenda lain) */
.pgd-item{display:flex;gap:.75rem;padding:.75rem 0;text-decoration:none;color:inherit;
  border-bottom:1px dashed var(--pgd-line)}
.pgd-item:first-of-type{padding-top:0}
.pgd-item:last-of-type{border-bottom:0;padding-bottom:0}
.pgd-item .cal{width:42px;height:46px;flex-shrink:0;border-radius:10px;overflow:hidden;text-align:center;
  background:var(--pgd-soft);display:flex;flex-direction:column;justify-content:center}
.pgd-item .cal .m{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--pgd-blue)}
.pgd-item .cal .d{font-size:1.05rem;font-weight:800;color:var(--pgd-ink);line-height:1.1}
.pgd-item .cal i{font-size:1.1rem;color:var(--pgd-blue)}
.pgd-item .bd{min-width:0}
.pgd-item h4{font-size:.92rem;font-weight:600;line-height:1.4;color:var(--pgd-ink);margin:0 0 .25rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .18s}
.pgd-item:hover h4{color:var(--pgd-blue)}
.pgd-item .dt{font-size:.78rem;color:var(--pgd-muted);display:inline-flex;align-items:center;gap:.3rem}

/* Tombol bagikan */
.pgd-share{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--pgd-line)}
.pgd-share b{font-size:.9rem;color:var(--pgd-ink);margin-right:.35rem}
.pgd-sbtn{width:38px;height:38px;border-radius:11px;display:inline-grid;place-items:center;
  background:var(--pgd-soft);color:var(--pgd-muted);border:1px solid var(--pgd-line);
  font-size:1.05rem;text-decoration:none;cursor:pointer;transition:.18s}
.pgd-sbtn:hover{transform:translateY(-2px);color:#fff}
.pgd-sbtn.wa:hover{background:#25D366;border-color:#25D366}
.pgd-sbtn.fb:hover{background:#1877F2;border-color:#1877F2}
.pgd-sbtn.tg:hover{background:#229ED9;border-color:#229ED9}
.pgd-sbtn.cp:hover{background:var(--pgd-blue);border-color:var(--pgd-blue)}
.pgd-copied{font-size:.82rem;color:#1a9a5b;font-weight:600;opacity:0;transition:opacity .2s}
.pgd-copied.on{opacity:1}

@media(max-width:520px){
  .pgd-headline{gap:.85rem}
  .pgd-datebox{width:64px}
  .pgd-datebox .d{font-size:1.45rem}
}

/* ============================================================
   TOMBOL WHATSAPP MENGAMBANG
   Posisi: sudut kanan bawah, tepat di atas tombol "Ke Atas"
   (tombol itu fixed bottom-8 right-8, ukuran 2.5rem / 3rem di md).
   ============================================================ */
.ksup-wa{
  position:fixed; right:2rem; bottom:5.25rem; z-index:49;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff; font-size:1.65rem; line-height:0;
  text-decoration:none; box-shadow:0 10px 26px -8px rgba(37,211,102,.75);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ksup-wa:hover{background:#1ebe5b;color:#fff;transform:translateY(-3px);
  box-shadow:0 16px 32px -10px rgba(37,211,102,.9)}
.ksup-wa:focus-visible{outline:3px solid rgba(37,211,102,.45);outline-offset:3px}
.ksup-wa i{line-height:1}

/* Denyut halus supaya menarik perhatian tanpa mengganggu */
.ksup-wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55); animation:ksup-wa-pulse 2.4s ease-out infinite;
}
@keyframes ksup-wa-pulse{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* Label muncul saat hover (desktop saja) */
.ksup-wa__label{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; background:#14305c; color:#fff; font-size:.82rem; font-weight:600;
  line-height:1.2; padding:.55rem .85rem; border-radius:9px; opacity:0; visibility:hidden;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6); transition:opacity .2s, transform .2s, visibility .2s;
}
.ksup-wa__label::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:#14305c;
}
.ksup-wa:hover .ksup-wa__label,.ksup-wa:focus-visible .ksup-wa__label{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}

@media(min-width:768px){
  .ksup-wa{bottom:5.85rem;width:52px;height:52px;font-size:1.8rem}
}
@media(max-width:480px){
  .ksup-wa{right:1.85rem;bottom:5rem;width:44px;height:44px;font-size:1.5rem}
  .ksup-wa__label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ksup-wa::after{animation:none}
  .ksup-wa:hover{transform:none}
}

/* ============================================================
   HERO JUDUL HALAMAN (.pgh) — dipakai partials/page-hero.blade.php
   ============================================================ */
.pgh{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(3rem,6vw,5rem) 0 clamp(2.6rem,5vw,4rem);
  background:linear-gradient(120deg,#f2f7ff 0%,#eaf1fb 42%,#fdf7ea 100%);
  border-bottom:1px solid rgba(31,78,145,.09);
}
.pgh__inner{position:relative;z-index:2;max-width:1296px}

/* ---- Dekorasi latar ---- */
.pgh__deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.pgh__blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5}
.pgh__blob.b1{width:340px;height:340px;right:-90px;top:-140px;background:rgba(31,78,145,.28)}
.pgh__blob.b2{width:260px;height:260px;right:180px;bottom:-160px;background:rgba(245,184,0,.32)}
.pgh__dots{position:absolute;right:5%;top:50%;transform:translateY(-50%);
  width:190px;height:130px;opacity:.5;
  background-image:radial-gradient(rgba(31,78,145,.42) 1.6px,transparent 1.6px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(105deg,transparent,#000 55%);
  mask-image:linear-gradient(105deg,transparent,#000 55%)}
.pgh__line{position:absolute;top:0;height:100%;width:1px;background:rgba(31,78,145,.07)}
.pgh__line.l1{left:12%}.pgh__line.l2{left:38%}.pgh__line.l3{right:22%}
@media(max-width:768px){.pgh__dots,.pgh__line{display:none}}

/* ---- Label kecil di atas judul ---- */
.pgh__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--ksup-primary);
  font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.2;padding:.5rem .95rem;border-radius:100px;
  border:1px solid rgba(31,78,145,.16);box-shadow:0 8px 20px -14px rgba(31,78,145,.85)}
.pgh__eyebrow i{font-size:1rem;color:var(--ksup-cta-dark);line-height:1}

/* ---- Judul ---- */
.pgh__title{
  font-size:clamp(1.75rem,4.2vw,3rem);font-weight:800;line-height:1.16;letter-spacing:-.03em;
  color:#14213d;margin:1.1rem 0 0;max-width:22ch}
.pgh__title .hl{color:var(--ksup-accent)}
.pgh__title::after{
  content:"";display:block;width:58px;height:5px;border-radius:100px;
  background:linear-gradient(90deg,var(--ksup-cta),var(--ksup-accent));margin-top:1.1rem}

.pgh__desc{max-width:60ch;margin:1.1rem 0 0;color:#4a5568;font-size:1.02rem;line-height:1.7}

/* ---- Breadcrumb ---- */
.pgh__crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.4rem;
  font-size:.9rem;color:var(--ksup-gray-500)}
.pgh__crumb a{display:inline-flex;align-items:center;gap:.35rem;line-height:1.4;
  color:var(--ksup-gray-600);text-decoration:none;transition:color .16s}
.pgh__crumb a:hover{color:var(--ksup-primary)}
.pgh__crumb a i{font-size:1rem}
.pgh__crumb .sep{font-size:.95rem;opacity:.45}
.pgh__crumb .now{color:var(--ksup-primary);font-weight:700;line-height:1.4}

@media(max-width:520px){
  .pgh__title{max-width:none}
  .pgh__crumb{font-size:.84rem}
}

/* ---- Tambahan pgd-* untuk halaman detail produk pinjaman ---- */
/* Kotak suku bunga di kepala kartu */
.pgd-ratebox{flex-shrink:0;min-width:104px;padding:.7rem 1rem;border-radius:14px;text-align:center;color:#fff;
  background:linear-gradient(155deg,#1F4E91,#14305c);box-shadow:0 12px 26px -18px rgba(31,78,145,.95)}
.pgd-ratebox .n{font-size:1.65rem;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.pgd-ratebox .u{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.82;margin-top:.15rem}

/* Baris tombol aksi di bawah isi */
.pgd-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.85rem;padding-top:1.5rem;
  border-top:1px solid var(--pgd-line)}
.pgd-actions .btn-primary,.pgd-actions .btn-secondary{flex:1 1 200px}

/* Badge angka pada daftar sidebar (.pgd-menu) */
.pgd-menu .n{font-size:.75rem;font-weight:700;background:var(--pgd-soft);color:var(--pgd-muted);
  padding:.18rem .55rem;border-radius:100px;flex-shrink:0;transition:.16s}
.pgd-menu a:hover .n,.pgd-menu a.on .n{background:#fff;color:var(--pgd-blue)}

@media(max-width:520px){
  .pgd-ratebox{min-width:88px;padding:.6rem .8rem}
  .pgd-ratebox .n{font-size:1.4rem}
}

/* Kredit pengembang di dasar footer */
.ksup-credit{opacity:.75}
.ksup-credit::before{content:"·";margin:0 .4rem;opacity:.6}
.ksup-credit a{color:var(--ksup-cta);font-weight:600;text-decoration:none;transition:.18s}
.ksup-credit a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* di layar sempit kredit turun ke baris sendiri, pemisah titik dihilangkan */
@media(max-width:560px){
  .ksup-credit{display:block;margin-top:.25rem}
  .ksup-credit::before{content:none;margin:0}
}