/* ============================================================
 * NUSAMESH SITE THEME
 * The landing's look (templates/index.html "design layer") for every public
 * page: one dark green-black ground, Chakra Petch headings + JetBrains Mono
 * labels, glass cards with a cursor spotlight, green gradient buttons, dark
 * forms/tables/accordions, a glass navbar, scroll reveals (nm-site.js).
 *
 * Scoped to <body class="nm-site"> (templates opt in with
 * {% block body_class %}nm-site{% endblock %}), so the dashboard and admin
 * keep their own styles.
 * ============================================================ */
body.nm-site{
  --nm-bg:#060a08; --nm-bg2:#0a110d; --nm-line:rgba(34,197,94,.14); --nm-line2:rgba(232,236,233,.08);
  --nm-g:#22c55e; --nm-g2:#4ade80; --nm-tx:#e8ece9; --nm-mut:#93a29a; --nm-dim:#64746b;
  --nm-disp:'Chakra Petch','Inter',system-ui,sans-serif; --nm-mono:'JetBrains Mono',ui-monospace,monospace;
  background:var(--nm-bg)!important; color:var(--nm-tx);
}
/* a soft glow and a faint grid behind every page, fixed so it never scrolls away */
body.nm-site::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 45% at 50% -8%,rgba(34,197,94,.13),transparent 70%),
    radial-gradient(40% 40% at 100% 100%,rgba(16,185,129,.05),transparent 70%),
    linear-gradient(rgba(34,197,94,.03) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(34,197,94,.03) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%)}
body.nm-site main,body.nm-site .footer{position:relative;z-index:1}
html{scroll-behavior:smooth}

/* ---------- type ---------- */
.nm-site h1,.nm-site h2,.nm-site h3,.nm-site h4,.nm-site h5,.nm-site h6,
.nm-site .h1,.nm-site .h2,.nm-site .h3,.nm-site .h4,.nm-site .h5{font-family:var(--nm-disp);letter-spacing:.2px}
.nm-site .text-muted{color:var(--nm-mut)!important}
.nm-site .lead{color:var(--nm-mut)}
.nm-site a{text-decoration-color:rgba(34,197,94,.45)}
.nm-site code{color:var(--nm-g2)}

/* ---------- page header: icon + h1 + lead, centred (store, faq, about, ...) ---------- */
.nm-site .text-center.mb-5:has(> h1),.nm-site .text-center.mb-5:has(> h2){margin-bottom:3.5rem!important}
.nm-site .text-center.mb-5 > h1,.nm-site .text-center.mb-5 > h2{
  font-size:clamp(2rem,4.2vw,3.1rem);font-weight:700;color:#f3f6f4;line-height:1.08}
.nm-site .text-center.mb-5 > h1 > i,.nm-site .text-center.mb-5 > h2 > i{color:var(--nm-g2)!important;filter:drop-shadow(0 0 14px rgba(34,197,94,.5))}
/* the big header icon becomes a glowing medallion */
.nm-site .text-center.mb-5 > i.display-1,.nm-site .text-center.mb-5 > .bi.display-1{
  display:inline-grid;place-items:center;width:92px;height:92px;font-size:2.4rem!important;border-radius:26px;
  color:var(--nm-g2)!important;background:radial-gradient(circle at 30% 20%,rgba(74,222,128,.28),rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.35);box-shadow:0 0 0 8px rgba(34,197,94,.04),0 20px 50px -20px rgba(34,197,94,.6);margin-bottom:.75rem!important}
.nm-site .text-center.mb-5 > p.lead{max-width:640px;margin-left:auto;margin-right:auto}

/* ---------- surfaces ---------- */
.nm-site .bg-dark:not(.navbar):not(.footer):not(.btn){background-color:transparent!important}
.nm-site .card,.nm-site .modal-content,.nm-site .list-group-item,.nm-site .accordion-item,.nm-site .dropdown-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
  border:1px solid var(--nm-line)!important;color:var(--nm-tx)}
.nm-site .card{position:relative;border-radius:18px!important;overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.nm-site .card .card{box-shadow:none}
.nm-site .card.border-success,.nm-site .card.bg-success{
  background:radial-gradient(120% 90% at 100% 0%,rgba(34,197,94,.10),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
  border-color:rgba(34,197,94,.28)!important}
.nm-site .card.border-warning{border-color:rgba(251,191,36,.35)!important}
.nm-site .card.border-danger{border-color:rgba(239,68,68,.35)!important}
.nm-site .card.border-info{border-color:rgba(56,189,248,.35)!important}
.nm-site .card-header,.nm-site .card-footer{background:rgba(255,255,255,.02)!important;border-color:var(--nm-line2)!important}
.nm-site .card-header{font-family:var(--nm-disp)}
/* hover: lift + a spotlight that follows the cursor (nm-site.js sets --mx/--my) */
.nm-site .card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,197,94,.10),transparent 60%)}
.nm-site .card:hover::before{opacity:1}
.nm-site .card > *{position:relative;z-index:1}
.nm-site a.card:hover,.nm-site .card.product-card:hover,.nm-site .card.nm-lift:hover{transform:translateY(-5px);border-color:rgba(34,197,94,.45)!important;
  box-shadow:0 40px 70px -35px rgba(0,0,0,.95),0 0 0 1px rgba(34,197,94,.12)}
.nm-site hr{border-color:var(--nm-line2);opacity:1}
.nm-site .border-secondary{border-color:var(--nm-line2)!important}
.nm-site .border-success{border-color:rgba(34,197,94,.3)!important}

/* ---------- buttons ---------- */
.nm-site .btn{border-radius:11px;font-weight:600;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s}
.nm-site .btn-success{color:#03140a;border:0;background:linear-gradient(135deg,#4ade80,#22c55e 55%,#16a34a);
  box-shadow:0 10px 26px -12px rgba(34,197,94,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.nm-site .btn-success:hover,.nm-site .btn-success:focus{color:#03140a;transform:translateY(-1px);
  box-shadow:0 14px 34px -12px rgba(34,197,94,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.nm-site .btn-outline-success{color:var(--nm-g2);border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.05)}
.nm-site .btn-outline-success:hover,.nm-site .btn-outline-success.active{color:#fff;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.7)}
.nm-site .btn-outline-secondary,.nm-site .btn-secondary,.nm-site .btn-dark{color:var(--nm-tx);background:rgba(255,255,255,.04);border:1px solid var(--nm-line2)}
.nm-site .btn-outline-secondary:hover,.nm-site .btn-secondary:hover,.nm-site .btn-dark:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- forms ---------- */
.nm-site .form-control,.nm-site .form-select,.nm-site .input-group-text{
  background-color:rgba(255,255,255,.035)!important;border:1px solid var(--nm-line2)!important;color:var(--nm-tx)!important;border-radius:10px}
.nm-site .form-control::placeholder{color:var(--nm-dim)}
.nm-site .form-control:focus,.nm-site .form-select:focus{border-color:rgba(34,197,94,.6)!important;box-shadow:0 0 0 3px rgba(34,197,94,.15)!important}
.nm-site .form-range::-webkit-slider-thumb{background:var(--nm-g)}
.nm-site .form-range::-moz-range-thumb{background:var(--nm-g)}
.nm-site .form-check-input:checked{background-color:var(--nm-g);border-color:var(--nm-g)}
.nm-site .form-label{color:var(--nm-mut);font-size:.9rem}

/* ---------- tables ---------- */
.nm-site .table{--bs-table-bg:transparent;--bs-table-striped-bg:rgba(255,255,255,.025);--bs-table-hover-bg:rgba(34,197,94,.06);
  --bs-table-color:var(--nm-tx);--bs-table-border-color:var(--nm-line2);color:var(--nm-tx)}
.nm-site .table > :not(caption) > * > *{background-color:transparent}
/* contextual rows (regulasi: the legal band, other regions) as tinted glass, not Bootstrap's pastel fills */
/* Bootstrap paints row states (incl. hover) with a 9999px inset box-shadow over the background */
.nm-site .table > tbody > tr[class*="table-"] > *{box-shadow:none!important}
.nm-site .table > tbody > tr.table-success > *{background:rgba(34,197,94,.10)!important;color:var(--nm-tx)!important}
.nm-site .table > tbody > tr.table-success > :first-child{border-left:3px solid var(--nm-g)}
.nm-site .table-hover > tbody > tr:hover > *{background:rgba(34,197,94,.06)!important}
.nm-site .table > tbody > tr.table-secondary > *,.nm-site .table > tbody > tr.table-light > *{background:rgba(255,255,255,.035)!important;color:var(--nm-mut)!important}
.nm-site .table > tbody > tr.table-danger > *{background:rgba(239,68,68,.08)!important;color:var(--nm-tx)!important}
.nm-site .table > tbody > tr.table-warning > *{background:rgba(251,191,36,.08)!important;color:var(--nm-tx)!important}
.nm-site .bg-black{background:rgba(0,0,0,.35)!important}
.nm-site .table thead th{font-family:var(--nm-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nm-g2);
  border-bottom-color:rgba(34,197,94,.3)}

/* ---------- accordion (FAQ) ---------- */
.nm-site .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:transparent}
.nm-site .accordion-item{border-radius:14px!important;overflow:hidden;margin-bottom:10px}
.nm-site .accordion-button{background:transparent!important;color:var(--nm-tx)!important;font-weight:600;box-shadow:none!important}
.nm-site .accordion-button:not(.collapsed){color:var(--nm-g2)!important;background:rgba(34,197,94,.05)!important}
.nm-site .accordion-button::after{filter:invert(1) sepia(1) saturate(4) hue-rotate(85deg) brightness(.95)}
.nm-site .accordion-body{color:var(--nm-mut)}

/* ---------- badges, alerts, nav, breadcrumb ---------- */
.nm-site .badge.bg-success.bg-opacity-25,.nm-site .badge.bg-success.bg-opacity-10{background:rgba(34,197,94,.1)!important;border:1px solid rgba(34,197,94,.25);
  color:var(--nm-g2)!important;font-family:var(--nm-mono);font-weight:500;letter-spacing:.03em}
.nm-site .badge.bg-secondary{background:rgba(255,255,255,.08)!important}
.nm-site .alert{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--nm-line2);color:var(--nm-tx)}
.nm-site .alert-success{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3)}
.nm-site .alert-warning{background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.3);color:#fde68a}
.nm-site .alert-info{background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.3);color:#bae6fd}
.nm-site .alert-danger{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.3);color:#fecaca}
.nm-site .nav-pills .nav-link{color:var(--nm-mut);border-radius:999px}
.nm-site .nav-pills .nav-link.active{color:#03140a;background:linear-gradient(135deg,#4ade80,#22c55e)}
.nm-site .nav-tabs{border-bottom-color:var(--nm-line2)}
.nm-site .nav-tabs .nav-link{color:var(--nm-mut);border:0;border-bottom:2px solid transparent}
.nm-site .nav-tabs .nav-link.active{color:var(--nm-g2);background:transparent;border-bottom-color:var(--nm-g)}
.nm-site .breadcrumb-item a{color:var(--nm-g2)}
.nm-site .breadcrumb-item.active,.nm-site .breadcrumb-item + .breadcrumb-item::before{color:var(--nm-dim)}
.nm-site .modal-content{border-radius:18px;backdrop-filter:blur(14px);background:rgba(10,17,13,.92)!important}
.nm-site .progress{background:rgba(255,255,255,.06)}
.nm-site .progress-bar.bg-success{background:linear-gradient(90deg,#16a34a,#4ade80)!important}

/* ---------- reveal (nm-site.js tags the elements) ---------- */
.nm-js .nm-site [data-reveal]{opacity:0;transform:translateY(22px);filter:blur(3px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter .75s ease var(--d,0s)}
.nm-js .nm-site [data-reveal].nm-in{opacity:1;transform:none;filter:none}

/* ---------- navbar + footer ---------- */
body.nm-site .navbar{background:rgba(6,10,8,.6)!important;backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(34,197,94,.12)!important;transition:background .35s}
body.nm-site.nm-scrolled .navbar{background:rgba(6,10,8,.9)!important}
body.nm-site .footer{background:#050806!important;border-top:1px solid var(--nm-line)!important}

@media (prefers-reduced-motion:reduce){
  .nm-site *,.nm-site *::before,.nm-site *::after{animation:none!important;transition:none!important}
  .nm-js .nm-site [data-reveal]{opacity:1;transform:none;filter:none}
}