/* ============================================================
   PUSTAKA JABAR – style.css (Bootstrap 5.3+)
   Pro Modern Look • Soft Aurora Hero • Partial Grid • Noise • Vignette
   ============================================================ */

/* =========================
   1) VARIABLES
   ========================= */
:root{
  --header-h: 70px;

  /* Radius & Shadows */
  --pj-radius: 14px;
  --pj-radius-sm: 10px;
  --pj-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --pj-shadow-md: 0 4px 10px rgba(0,0,0,.1);
  --pj-shadow-lg: 0 12px 30px rgba(0,0,0,.15);

  /* Bootstrap theme base (light) */
  --bs-primary: #0A4C84;
  --bs-primary-rgb: 10,76,132;
  --bs-body-color: #1A1A1A;
  --bs-body-bg: #FFFFFF;
  --bs-border-color: #E5E9EC;
  --bs-tertiary-bg: #F7F9FC;

  /* Hero */
  --pj-hero-grad-1: rgba(10,76,132,.08);
  --pj-hero-grad-2: rgba(32,201,151,.08);
  --pj-hero-base-1: #ffffff;
  --pj-hero-base-2: #ffffff;

  /* CTA */
  --pj-cta-start: #0A4C84;
  --pj-cta-end: #073B67;
  --pj-cta-text: #fff;

  /* Icons */
  --pj-staticon-bg: #EFF4FF;
  --pj-staticon-fg: #0A4C84;

  /* Chips */
  --pj-chip-bg: var(--bs-body-bg);
  --pj-chip-hover: var(--bs-tertiary-bg);

  /* Background utilities */
  --pj-noise-opacity: .04;
  --pj-grid-gap: 22px;
  --pj-grid-color: rgba(10,76,132,.06);
  --pj-dot-size: 2px;
  --pj-dot-space: 18px;
  --pj-dot-color: rgba(0,0,0,.08);
}

[data-bs-theme="dark"]{
  /* Bootstrap theme base (dark) */
  --bs-primary: #8AB4F8;
  --bs-primary-rgb: 138,180,248;
  --bs-body-color: #E8EAED;
  --bs-body-bg: #1A202C;
  --bs-border-color: rgba(138,180,248,.18);
  --bs-tertiary-bg: #242C3D;

  /* Shadows */
  --pj-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --pj-shadow-md: 0 4px 12px rgba(0,0,0,.6);

  /* Hero */
  --pj-hero-grad-1: rgba(138,180,248,.15);
  --pj-hero-grad-2: rgba(32,201,151,.15);
  --pj-hero-base-1: var(--bs-body-bg);
  --pj-hero-base-2: var(--bs-body-bg);

  /* Icons */
  --pj-staticon-bg: #242C3D;
  --pj-staticon-fg: var(--bs-primary);

  /* CTA */
  --pj-cta-start: #597CA3;
  --pj-cta-end: #4A6990;
  --pj-cta-text: var(--bs-body-color);

  /* Background utilities */
  --pj-noise-opacity: .06;
  --pj-grid-color: rgba(138,180,248,.10);
  --pj-dot-color: rgba(255,255,255,.12);
}


/* =========================
   2) BASE
   ========================= */
html, body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
html{ scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-h) + 16px); }
body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; padding-top:2rem; padding-bottom:2.5rem; }
img{ max-width:100%; height:auto; }

/* Smooth theme transitions */
body, header, footer, .navbar, .card, .form-control, .btn, .result-item{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================
   3) LAYOUT / CONTAINERS
   ========================= */
.container-fluid{
  max-width:1280px;
  margin:0 auto !important;
  padding-left:1.5rem;
  padding-right:1.5rem;
}
@media (max-width: 992px){
  .container-fluid{
    max-width:92%;
    padding-left:1rem;
    padding-right:1rem;
  }
}
@media (max-width: 992px){
  .container-fluid{ max-width:96%; } /* penyesuaian tambahan */
}


/* =========================
   4) HEADER / NAVBAR / BRAND
   ========================= */
header.navbar{
  background:
    linear-gradient(180deg, rgba(var(--bs-primary-rgb), .02), transparent 60%),
    var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  backdrop-filter: saturate(180%) blur(8px);
  will-change: transform, backdrop-filter;
}
.navbar.bg-body{ box-shadow: var(--pj-shadow-sm); }
.main-no-pt main{ padding-top:0 !important; }

[data-bs-theme="dark"] header.navbar,
[data-bs-theme="dark"] .navbar.bg-body{
  background:
    linear-gradient(180deg, rgba(138,180,248,.06), transparent 60%),
    var(--bs-tertiary-bg) !important;
}

/* Header accent (opsional) */
.header-accent{
  background:
    repeating-linear-gradient(135deg, rgba(var(--bs-primary-rgb), .06) 0 8px, transparent 8px 20px),
    var(--bs-body-bg);
  backdrop-filter: saturate(180%) blur(8px);
}
[data-bs-theme="dark"] .header-accent{
  background:
    repeating-linear-gradient(135deg, rgba(138,180,248,.10) 0 8px, transparent 8px 20px),
    var(--bs-tertiary-bg);
}

/* Brand & nav links */
.navbar-brand{ padding:.25rem 0; }
.brand-logo{ width:44px; height:44px; object-fit:contain; }
.brand-title{ font-weight:700; font-size:1.25rem; line-height:1.15; letter-spacing:.2px; color:var(--bs-body-color); white-space:nowrap; }
.brand-subtitle{
  margin-top:2px; font-size:.9375rem; line-height:1.2; color:var(--bs-secondary-color);
  white-space:nowrap; max-width:60vw; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width: 992px){ .brand-subtitle{ max-width:none; } }

.navbar .nav-link{ padding:.6rem 1rem; border-radius:12px; font-weight:500; }
.navbar .nav-link:hover{ background-color: var(--bs-tertiary-bg); }
.navbar .nav-link.active,
.navbar .nav-link:focus-visible{
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-primary-rgb), .12);
  outline: none;
}


/* =========================
   5) SEARCH
   ========================= */
.input-group-lg .form-control:focus{ box-shadow:none; }
.btn-primary{
  background: linear-gradient(90deg, #1A5A9D, #2575FC);
  border:none;
}
.search-compact .form-control{ padding:.6rem .75rem; font-size:.95rem; }
.search-compact .input-group-text{ padding:.5rem .6rem; }
.search-compact .btn.btn-sm{ padding:.45rem .8rem; font-size:.9rem; }
@media (prefers-color-scheme: dark){
  .search-compact .input-group-text{ background:#161a22 !important; }
}

/* Sidebar sticky */
@media (min-width: 992px){
  aside .position-sticky{ top: calc(var(--header-h) + 16px); }
}


/* =========================
   6) HERO (Aurora + Partial Grid)
   ========================= */
.hero{
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--pj-hero-grad-1), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, var(--pj-hero-grad-2), transparent 60%),
    linear-gradient(180deg, var(--pj-hero-base-1), var(--pj-hero-base-2));
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.hero .lead{ max-width:60rem; font-size:1.25rem; }

.hero-aurora{ position:relative; overflow:hidden; }
.hero-aurora::after{
  content:""; position:absolute; inset:-25%;
  background:
    conic-gradient(from 10deg at 30% 20%,
      rgba(var(--bs-primary-rgb), .14),
      transparent 30% 70%,
      rgba(32,201,151,.12));
  filter: blur(60px); opacity:.85; pointer-events:none;
}
.hero-aurora::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: var(--pj-grid-gap) var(--pj-grid-gap);
  opacity:.35;
  mask-image: radial-gradient(60rem 40rem at 85% 15%, #000 0%, rgba(0,0,0,.6) 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(60rem 40rem at 85% 15%, #000 0%, rgba(0,0,0,.6) 40%, transparent 75%);
}
[data-bs-theme="dark"] .hero-aurora::before{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  opacity:.28;
}


/* =========================
   7) CARDS & FEATURE
   ========================= */
.stat-card{
  border:1px solid var(--bs-border-color);
  border-radius:18px;
  padding:1.5rem;
  background: var(--bs-body-bg);
  box-shadow: var(--pj-shadow-sm);
  transition: all .2s ease;
}
.stat-card:hover{ box-shadow: var(--pj-shadow-md); transform: translateY(-2px); }

.feature{
  border:1px solid var(--bs-border-color);
  border-radius:14px;
  padding:1.5rem;
  height:100%;
  background: var(--bs-body-bg);
}

.org-card{
  border:1px solid var(--bs-border-color);
  border-radius:14px;
  background: var(--bs-body-bg);
  box-shadow: var(--pj-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
  height:100%;
}
.org-card:hover{ transform: translateY(-2px); box-shadow: var(--pj-shadow-md); }

.avatar{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e9ecef; color:#495057; font-weight:600;
}
[data-bs-theme="dark"] .avatar{
  background:#223049; color:#e2e8f0; outline:1px solid rgba(255,255,255,.08);
}

/* Stat icons */
.stat-icon{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--pj-staticon-bg);
  color: var(--pj-staticon-fg);
}


/* =========================
   8) CTA
   ========================= */
.cta{
  border-radius:18px;
  background: linear-gradient(180deg, var(--pj-cta-start) 0%, var(--pj-cta-end) 100%);
  color: var(--pj-cta-text);
  box-shadow: var(--pj-shadow-md);
  padding: 2.5rem;
}
.cta .btn{ border-radius:12px; font-weight:600; }

[data-bs-theme="dark"] .cta .btn-light{
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary);
}

/* Variants */
.cta-gradient{
  --g1: #007bff;
  --g2: #00bfa6;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
}
.glassy{
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (prefers-color-scheme: dark){
  .cta-gradient{ --g1: #0a4c84; --g2: #0aa87a; }
}
@media (prefers-reduced-motion: reduce){
  .glassy{ backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* =========================
   9) CHIPS
   ========================= */
.chip{
  display:inline-block; padding:.4rem .75rem;
  border:1px solid var(--bs-border-color);
  border-radius:999px; font-size:.875rem;
  color: var(--bs-secondary-color);
  background: var(--pj-chip-bg);
  text-decoration:none;
}
.chip:hover{ background: var(--pj-chip-hover); text-decoration:none; }


/* =========================
   10) FORMS
   ========================= */
.form-control,
.form-select{
  border-radius: var(--pj-radius-sm);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  min-height:35px;
}
.form-control:focus,
.form-select:focus{
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb),.15);
  background-color: var(--bs-body-bg);
}
::placeholder{ color: var(--bs-secondary-color); opacity:.8; }
.input-group-text{
  border-radius: var(--pj-radius-sm);
  border-color: var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.icon-left{ left:1rem !important; font-size:1rem; color: var(--bs-secondary-color); }
.search-xl{ height:56px; font-size:1.1rem; }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select{ background-color: var(--bs-tertiary-bg); }


/* =========================
   11) BUTTONS
   ========================= */
.btn{ border-radius:12px; font-weight:600; }
.btn:hover{ box-shadow: var(--pj-shadow-sm); }

.btn-outline-secondary{
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}
.btn-outline-secondary:hover{
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
}


/* =========================
   12) SEARCH RESULTS
   ========================= */
.result-item{
  box-shadow: var(--pj-shadow-sm);
  border-radius: var(--pj-radius-sm);
  background-color: var(--bs-body-bg);
  border:1px solid var(--bs-border-color);
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease;
}
.result-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--pj-shadow-md);
  background-color: var(--bs-tertiary-bg);
}
.result-item a{ color: var(--bs-body-color); text-decoration:none; }
.result-item a:hover{ text-decoration: underline; }

[data-bs-theme="dark"] .result-item{
  background-color:#1F2533;
  border-color: rgba(138,180,248,.25);
}
[data-bs-theme="dark"] .result-item:hover{
  background-color: var(--bs-tertiary-bg);
}


/* =========================
   13) BADGES & PAGER
   ========================= */
#activeFilters .badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.875rem; font-weight:500;
  padding:.3rem .75rem; border-radius:9999px;
  border:1px solid var(--bs-border-color);
  background-color: rgba(var(--bs-primary-rgb), .06);
  color: var(--bs-body-color);
  transition: background-color .25s, border-color .25s, transform .15s;
}
#activeFilters .badge:hover{
  background-color: rgba(var(--bs-primary-rgb), .12);
  border-color: rgba(var(--bs-primary-rgb), .25);
  transform: translateY(-1px);
}
#activeFilters .badge i{
  font-size:.9em; opacity:.65; cursor:pointer; transition:opacity .2s;
}
#activeFilters .badge i:hover{ opacity:1; }

#pager .btn{ border-radius:10px; min-width:2.5rem; }


/* =========================
   14) TABLES
   ========================= */
.table{ color: var(--bs-body-color); border-color: var(--bs-border-color); }
.table thead th{ font-weight:600; color: var(--bs-body-color); }


/* =========================
   15) ASYNC PLACEHOLDERS
   ========================= */
#stats{ min-height:1.25rem; display:block; }
#lib{ min-height:2.25rem; }

@keyframes skeleton-loading{
  0%{ background-position:-200px 0; }
  100%{ background-position: calc(200px + 100%) 0; }
}
.skeleton{
  color: transparent !important;
  border-radius:.375rem;
  background-image: linear-gradient(90deg, rgba(0,0,0,.06) 0, rgba(0,0,0,.12) 40%, rgba(0,0,0,.06) 80%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.1s infinite linear;
}
[data-bs-theme="dark"] .skeleton{
  background-image: linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.12) 40%, rgba(255,255,255,.06) 80%);
}


/* =========================
   16) FOOTER
   ========================= */
footer{
  color: var(--bs-secondary-color);
  font-size:.9rem;
  border-top:1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  padding:2.5rem 1.5rem;
  margin-top:auto;
}
footer a{ color: var(--bs-secondary-color); text-decoration:none; }
footer a:hover{ text-decoration: underline; }
[data-bs-theme="dark"] footer{ background-color: var(--bs-body-bg) !important; }


/* =========================
   17) SCROLLBAR
   ========================= */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,.25); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background-color: rgba(0,0,0,.4); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb{ background-color: rgba(255,255,255,.25); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background-color: rgba(255,255,255,.4); }


/* =========================
   18) FOCUS
   ========================= */
:focus-visible{
  outline: 2px solid rgba(var(--bs-primary-rgb), .4);
  outline-offset: 3px;
  border-radius: var(--pj-radius-sm);
}


/* =========================
   19) RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 576px){
  .brand-logo{ width:40px; height:40px; }
  .brand-title{ font-size:1.125rem; }
  .brand-subtitle{ font-size:.9rem; }
  .form-control, .form-select{ min-height:44px; }
  main{ padding-top:2rem; padding-bottom:2.5rem; }
  .cta{ padding: 2rem; }
}


/* =========================
   20) SEARCH CLEAR ICONS (remove)
   ========================= */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  display:none !important; -webkit-appearance:none;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal{ display:none; width:0; height:0; }


/* ============================================================
   BACKGROUND UTILITIES
   ============================================================ */

/* Noise global (aktifkan dengan class "has-noise" pada <body>) */
body.has-noise::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
    <rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/>\
  </svg>");
  mix-blend-mode: multiply; opacity: var(--pj-noise-opacity);
}
main, header, footer{ position:relative; z-index:1; }

/* Vignette global (aktifkan dengan class "bg-vignette" pada <body>) */
.bg-vignette::before{
  content:""; position: fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(1200px 600px at 50% -10%, transparent 40%, rgba(0,0,0,.06) 100%);
}
[data-bs-theme="dark"] .bg-vignette::before{
  background: radial-gradient(1200px 600px at 50% -10%, transparent 40%, rgba(0,0,0,.22) 100%);
}

/* Soft grid (full) */
.bg-soft-grid{
  background:
    linear-gradient(to right, var(--pj-grid-color) 1px, transparent 1px) 0 0 / var(--pj-grid-gap) var(--pj-grid-gap),
    linear-gradient(to bottom, var(--pj-grid-color) 1px, transparent 1px) 0 0 / var(--pj-grid-gap) var(--pj-grid-gap);
}

/* Dots mikro */
.bg-dots{
  background:
    radial-gradient(var(--pj-dot-size) var(--pj-dot-size) at 1px 1px, var(--pj-dot-color) 98%, transparent) 0 0 / var(--pj-dot-space) var(--pj-dot-space);
}

/* Mesh gradient section */
.mesh{
  position:relative; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(30rem 20rem at 15% 30%, rgba(var(--bs-primary-rgb), .18), transparent 60%),
    radial-gradient(28rem 18rem at 85% 20%, rgba(32,201,151,.18), transparent 60%),
    radial-gradient(26rem 18rem at 40% 90%, rgba(99,102,241,.16), transparent 60%),
    linear-gradient(180deg, var(--pj-hero-base-1), var(--pj-hero-base-2));
}
[data-bs-theme="dark"] .mesh{
  background:
    radial-gradient(30rem 20rem at 15% 30%, rgba(138,180,248,.22), transparent 60%),
    radial-gradient(28rem 18rem at 85% 20%, rgba(32,201,151,.20), transparent 60%),
    radial-gradient(26rem 18rem at 40% 90%, rgba(147,197,253,.20), transparent 60%),
    linear-gradient(180deg, var(--bs-body-bg), var(--bs-body-bg));
}