body{
margin:0;
font-family:'Lexend', sans-serif;
background:#f4f7fb;
}

/* ================= NAVBAR ================= */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 40px;
background:#0d2a4e;
backdrop-filter:blur(8px);
position:sticky;
top:0;
z-index:999;
box-shadow:0 4px 18px rgba(0,0,0,0.35);
overflow:visible;
}

.brand-box{
display:flex;
align-items:center;
gap:12px;
overflow:visible;
}

.logo-kkp{
height:100px;
width:auto;
}

/* ================= BRAND TITLE ================= */

@font-face {
  font-family: 'UD Digi Kyokasho N-B';
  src: url('UDDigiKyokashoN-B.ttc') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0px;
  width: fit-content;
}

.brand-title {
  display: flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
}

.brand-webgis,
.brand-loka,
.brand-be,
.brand-on {
  font-family: 'UD Digi Kyokasho N-B', 'Arial Black', sans-serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
}

.brand-webgis {
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
}
.brand-loka { color: #3ab4c8; }
.brand-be   { color: #e8722a; }
.brand-on   { color: #e8722a; letter-spacing: 0; }

.brand-dolphin {
  display: none;
}

.brand-subtitle {
  font-family: 'UD Digi Kyokasho N-B', 'Arial Black', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2.8px;
  word-spacing: 4px;
  line-height: 1.3;
  padding-top: 5px;
  margin-top: 5px;
  width: 100%;
  display: block;
  white-space: nowrap;
}


.logo {
display:none;
}

.navbar nav a{
color:#ffffff;
margin-left:30px;
text-decoration:none;
font-size:22px;
font-weight:500;
transition:0.3s;
}

.navbar nav a:hover{
color:#3ab4c8;
opacity:1;
}

/* ================= HERO ================= */

#hero{
position:relative;
overflow:hidden;

min-height:68vh;

padding:20px 40px 90px;

text-align:center;

color:white;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#08294a 0%,
#0b3d6d 25%,
#145da0 55%,
#1b6ca8 75%,
#3ab4c8 100%
);
}

/* glow background */
#hero::before{
content:"";

position:absolute;
inset:0;

background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 25%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.10) 0%, transparent 20%),
radial-gradient(circle at 50% 80%, rgba(255,255,255,0.08) 0%, transparent 25%);

pointer-events:none;
z-index:0;
}

/* ================= HERO H1 ================= */

#hero h1 {
  position: relative;
  z-index: 5;
  font-family: 'Lexend', sans-serif;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 0 0;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  color: white;
}

.hero-description {
  position: relative;
  z-index: 5;
  max-width: 1060px;
  margin: 14px auto 0;
  font-family: 'Lexend', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-style: italic;
}

.hero-description strong {
  font-weight: 800;
  color: #ffffff;
}

/* ================= OCEAN WAVE ================= */

#hero::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:100%;
height:220px;

background:
url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' fill-opacity='0.95' d='M0,224L48,208C96,192,192,160,288,154.7C384,149,480,171,576,181.3C672,192,768,192,864,176C960,160,1056,128,1152,122.7C1248,117,1344,139,1392,149.3L1440,160L1440,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");

background-size:cover;
background-repeat:no-repeat;

z-index:2;
}

#hero .wave2{

position:absolute;

left:0;
bottom:-15px;

width:100%;
height:220px;

background:
url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23dff4ff' fill-opacity='0.55' d='M0,160L60,149.3C120,139,240,117,360,128C480,139,600,181,720,202.7C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");

background-size:cover;
background-repeat:no-repeat;

opacity:0.7;

z-index:1;
}

/* ================= FLOATING ICON ================= */

.floating-icon{
position:absolute;
font-size:75px;
opacity:0.35;
animation:floatMove 5s ease-in-out infinite;
z-index:0;
pointer-events:none;
filter:drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

/* baris atas - jauh di atas judul */
/* baris atas */
.icon10{top:18px;  left:3%;   animation-delay:5s;}
.icon5 {top:18px;  left:20%;  animation-delay:4s;}
.icon6 {top:18px;  right:20%; animation-delay:2.5s;}
.icon2 {top:18px;  right:3%;  animation-delay:1s;}

/* kiri & kanan sejajar judul */
.icon1 {top:45%;   left:1%;   animation-delay:0s;}
.icon3 {top:45%;   right:1%;  animation-delay:2s;}

/* bawah kartu, atas wave */
.icon7 {bottom:230px; left:5%;   animation-delay:3.5s;}
.icon9 {bottom:230px; left:27%;  animation-delay:4.5s;}
.icon4 {bottom:230px; right:27%; animation-delay:3s;}
.icon8 {bottom:230px; right:5%;  animation-delay:1.5s;}

@keyframes floatMove{
0%{transform:translateY(0px);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0px);}
}

/* ================= CARD ================= */

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
  z-index: 10;
  margin-top: 30px;
  padding: 0 20px;
  transform: translateY(6px);
}

.card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 18px;
  padding: 28px 20px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 4px solid #3ab4c8;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0b3d6d, #3ab4c8, #e8722a);
  border-radius: 18px 18px 0 0;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.card-title {
  font-family: 'Lexend', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  color: #0b3d6d;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 5px 12px;
  background: #eef6fb;
  border-radius: 20px;
  width: fit-content;
}

.card-number {
  font-family: 'Lexend', sans-serif;
  font-size: 62px;
  font-weight: 900;
  color: #0b3d6d;
  line-height: 1;
  margin: 8px 0 12px;
  background: linear-gradient(135deg, #0b3d6d, #3ab4c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-subtitle {
  font-family: 'Lexend', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5a7a99;
  line-height: 1.4;
  margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
  #hero h1 {
    font-size: 40px;
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  #hero h1 {
    font-size: 32px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 26px;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}

/* ================= DASHBOARD ================= */

#dashboard{
padding:60px;
font-size: 20px;
font-family: 'Lexend', sans-serif;
font-weight: 900;
}

.chart-grid{
display:flex;
gap:25px;
overflow-x:auto;
padding-bottom:20px;
scroll-behavior:smooth;
}

.chart-grid canvas{
min-width:700px;
flex-shrink:0;
}

canvas{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 6px 15px rgba(0,0,0,0.15);
height:450px !important;
}

/* ================= MAP ================= */

#map-section{
padding:60px;
}

.map-layout{
display:grid;
grid-template-columns:300px 1fr;
gap:20px;
}

.sidebar{
width:300px;
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 6px 15px rgba(0,0,0,0.12);
height:650px;
overflow-y:auto;
box-sizing:border-box;
}

#map{
height:650px;
border-radius:14px;
overflow:hidden;
position:relative;
}

/* ================= LAYER STRUCTURE ================= */

.layer-group{
margin-bottom:14px;
padding-bottom:8px;
border-bottom:1px solid #eef2f7;
}

.sidebar-section{
margin-top:14px;
border-bottom:1px solid #eef2f7;
padding-bottom:8px;
}

.sidebar-section-toggle{
width:100%;
display:flex;
align-items:flex-start;
gap:11px;
padding:9px 0;
border:0;
border-radius:0;
background:transparent;
color:#0b3d6d;
font-family:'Lexend',sans-serif;
font-size:15px;
font-weight:800;
line-height:1.25;
text-align:left;
cursor:pointer;
}

.sidebar-section-toggle:hover{
background:transparent;
color:#145da0;
}

.sidebar-section-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
min-width:22px;
height:22px;
margin-top:0;
font-size:11px;
color:white;
background:linear-gradient(135deg,#0b3d6d,#145da0);
border-radius:6px;
box-shadow:0 4px 10px rgba(11,61,109,0.18);
transition:transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.sidebar-section.open .sidebar-section-arrow{
transform:rotate(90deg);
}

.sidebar-section-toggle:hover .sidebar-section-arrow{
background:linear-gradient(135deg,#145da0,#3ab4c8);
box-shadow:0 5px 12px rgba(58,180,200,0.22);
}

.sidebar-section-title{
padding-top:1px;
}

.sidebar-section-body{
display:none;
padding-top:4px;
}

.sidebar-section.open .sidebar-section-body{
display:block;
}

.sidebar-section-actions{
display:flex;
gap:8px;
margin:2px 0 10px 33px;
}

.sidebar-section-actions button{
padding:5px 10px;
border:1px solid rgba(11,61,109,0.14);
border-radius:7px;
background:#f4f9fc;
color:#0b3d6d;
font-size:12px;
font-weight:700;
line-height:1.1;
box-shadow:none;
}

.sidebar-section-actions button:hover{
background:#e4f4fb;
color:#145da0;
border-color:rgba(58,180,200,0.45);
}

.sidebar-section-body > .layer-group:last-child{
border-bottom:0;
margin-bottom:0;
padding-bottom:0;
}

.layer-parent{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
}

.layer-parent label{
font-size:16px;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}

.toggle-btn{
cursor:pointer;
font-size:11px;
user-select:none;
width:18px;
height:18px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#6a4b26;
text-align:center;
background:#f4f7fb;
border:1px solid rgba(11,61,109,0.10);
border-radius:4px;
transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease;
flex-shrink:0;
}

.toggle-btn:hover{
background:#e8f4fb;
color:#0b3d6d;
border-color:rgba(58,180,200,0.35);
}

.layer-child{
margin-left:22px;
display:none;
flex-direction:column;
gap:4px;
}

.layer-child label{
font-size:14px;
font-weight:400;
display:flex;
align-items:flex-start;
gap:6px;
line-height:1.3;
cursor:pointer;
}

/* ================= FILTER BOX ================= */

#monitoringCheckboxes,
#partisipatifCheckboxes{
display:flex;
flex-direction:column;
gap:4px;
margin-top:8px;
}

#monitoringCheckboxes label,
#partisipatifCheckboxes label{
display:flex;
align-items:flex-start;
gap:6px;
font-size:14px;
line-height:1.3;
word-break:break-word;
cursor:pointer;
}

/* ================= SELECT ================= */

select{
width:100%;
padding:9px;
margin-bottom:15px;
border-radius:8px;
border:1px solid #ccc;
font-size:14px;
background:white;
}

/* ================= FOOTER ================= */

.footer-source{
text-align:center;
padding:18px;
background:#0b3d6d;
color:white;
font-size:18px;
margin-top:35px;
letter-spacing:0;
}

.map-source{
margin: 6px 0 0 0;
font-size: 11px;
color: #333;
text-align: right;
font-style: italic;
letter-spacing: 0;
}

/* ================= SCROLLBAR ================= */

.sidebar::-webkit-scrollbar{
width:8px;
}

.sidebar::-webkit-scrollbar-thumb{
background:#0b3d6d;
border-radius:10px;
}

button{
padding:8px 14px;
border:none;
border-radius:8px;
background:#0b3d6d;
color:white;
cursor:pointer;
font-size:13px;
font-weight:500;
}

button:hover{
background:#145da0;
}

.sidebar h3{
margin-top:18px;
margin-bottom:8px;
color:#0b3d6d;
}

.layer-group{
margin-bottom:15px;
padding-bottom:10px;
border-bottom:1px solid #eee;
}

.layer-group label{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
margin-bottom:6px;
}


/* ===== PARENT ACCORDION (3 section besar) ===== */
.wk-parent-item { border-radius:16px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,0.13); margin-bottom:0; border:1px solid rgba(11,61,109,0.1); }
.wk-parent-header { display:flex; align-items:center; gap:14px; padding:20px 28px; background:linear-gradient(135deg,#08294a,#0b3d6d); cursor:pointer; user-select:none; transition:background 0.2s; }
.wk-parent-header:hover { background:linear-gradient(135deg,#0b3d6d,#145da0); }
.wk-parent-toggle { font-size:14px; color:rgba(255,255,255,0.85); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; display:inline-block; width:18px; text-align:center; }
.wk-parent-toggle.open { transform:rotate(90deg); }
.wk-parent-label { font-family:'Lexend', sans-serif; font-size:15px; font-weight:700; color:white; flex:1; letter-spacing:0; }
.wk-parent-badge { font-family:'Lexend', sans-serif; font-size:10px; color:#3ab4c8; background:rgba(58,180,200,0.18); padding:5px 16px; border-radius:20px; font-weight:600; border:1px solid rgba(58,180,200,0.35); white-space:nowrap; }
.wk-parent-badge.soon { color:#e8722a; background:rgba(232,114,42,0.15); border-color:rgba(232,114,42,0.3); }
.wk-parent-body { display:none; background:#edf2f8; border-top:4px solid #3ab4c8; padding:20px; }
.wk-parent-body.open { display:block; }
.wk-inner-accordion { display:flex; flex-direction:column; gap:10px; }

/* ===== CHILD ACCORDION (per wilker) ===== */
.wk-acc-item { border-radius:12px; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,0.09); background:white; border:1px solid rgba(11,61,109,0.06); }
.wk-acc-header { display:flex; align-items:center; gap:12px; padding:15px 20px; background:linear-gradient(135deg,#145da0,#1b6ca8); cursor:pointer; user-select:none; transition:background 0.2s; }
.wk-acc-header:hover { background:linear-gradient(135deg,#1b6ca8,#3ab4c8); }
.wk-acc-toggle { font-size:12px; color:rgba(255,255,255,0.85); transition:transform 0.25s; flex-shrink:0; display:inline-block; width:14px; text-align:center; }
.wk-acc-toggle.open { transform:rotate(90deg); }
.wk-acc-label { font-family:'Lexend', sans-serif; font-size:13px; font-weight:600; color:white; flex:1; }
.wk-acc-badge { font-family:'Lexend', sans-serif; font-size:12px; color:#3ab4c8; background:rgba(58,180,200,0.18); padding:4px 13px; border-radius:20px; font-weight:600; border:1px solid rgba(58,180,200,0.3); white-space:nowrap; }
.wk-acc-body { display:none; padding:22px 20px; background:#f4f7fb; border-top:3px solid #3ab4c8; }
.wk-acc-body.open { display:block; }

/* ===== CHART GRID ===== */
.wk-chart-grid{

display:flex;

gap:22px;

overflow-x:auto;
overflow-y:hidden;

padding:28px 26px 32px;

scroll-behavior:smooth;

align-items:stretch;

background:
linear-gradient(180deg,rgba(242,247,252,0.95),rgba(232,240,248,0.78));

}

/* SCROLLBAR */

.wk-chart-grid::-webkit-scrollbar{
height:10px;
}

.wk-chart-grid::-webkit-scrollbar-track{
background:rgba(11,61,109,0.10);
border-radius:20px;
}

.wk-chart-grid::-webkit-scrollbar-thumb{
background:linear-gradient(90deg,#0b4f8a,#3ab4c8);
border-radius:20px;
}

.wk-chart-grid::-webkit-scrollbar-thumb:hover{
background:#1270bf;
}

/* CARD */

.wk-chart-card{

position:relative;
overflow:hidden;
box-sizing:border-box;

min-width:720px;
width:720px;

height:440px;

background:
linear-gradient(180deg,#ffffff 0%,#fbfdff 62%,#f4f8fc 100%);

border-radius:18px;

padding:26px 26px 22px;

box-shadow:
0 18px 42px rgba(8,35,62,0.12),
0 3px 10px rgba(8,35,62,0.05);

border:1px solid rgba(11,61,109,0.10);

flex-shrink:0;

transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}

.wk-chart-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:5px;
background:linear-gradient(90deg,#0b3d6d,#3ab4c8,#e8722a);
opacity:0.9;
}

.wk-chart-card:hover{

transform:translateY(-4px);

box-shadow:
0 24px 54px rgba(8,35,62,0.18),
0 5px 14px rgba(8,35,62,0.08);

border-color:rgba(58,180,200,0.30);

}

/* FULL WIDTH */

.wk-chart-card.full-width{

min-width:1040px;
width:1040px;

}

/* CANVAS */

.wk-chart-card canvas{

width:100%!important;

height:100%!important;

background:transparent!important;

padding:0!important;

box-shadow:none!important;

border-radius:0!important;

}

/* ===== MONITORING BIOTA LAINNYA ===== */
#grid-Monitoring_Biota_Lainnya-monitoring.wk-chart-grid{
display:block;
overflow:visible;
padding:4px 0 0;
}

.monitoring-biota-grid{
display:flex;
gap:18px;
width:100%;
overflow-x:auto;
overflow-y:hidden;
padding:0 4px 16px;
scroll-behavior:smooth;
align-items:stretch;
}

.monitoring-biota-grid::-webkit-scrollbar{
height:10px;
}

.monitoring-biota-grid::-webkit-scrollbar-track{
background:rgba(11,61,109,0.12);
border-radius:999px;
}

.monitoring-biota-grid::-webkit-scrollbar-thumb{
background:rgba(11,79,138,0.72);
border-radius:999px;
}

.monitoring-biota-grid::-webkit-scrollbar-thumb:hover{
background:rgba(18,112,191,0.9);
}

.monitoring-biota-card{
flex:0 0 clamp(560px,58vw,760px);
min-height:430px;
padding:18px;
border-radius:18px;
background:
linear-gradient(145deg,rgba(8,41,74,0.94),rgba(13,42,78,0.88)),
rgba(8,41,74,0.78);
border:1px solid rgba(255,255,255,0.14);
box-shadow:0 14px 34px rgba(5,18,31,0.26);
backdrop-filter:blur(10px);
transition:transform 0.24s ease,box-shadow 0.24s ease,border-color 0.24s ease;
}

.monitoring-biota-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 42px rgba(5,18,31,0.34);
border-color:rgba(58,180,200,0.48);
}

.monitoring-biota-card.featured{
flex-basis:clamp(720px,78vw,980px);
}

.monitoring-biota-card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
margin-bottom:12px;
}

.monitoring-biota-card-head h4{
margin:0;
font-family:'Lexend', sans-serif;
font-size:16px;
font-weight:800;
line-height:1.25;
color:#ffffff;
}

.monitoring-biota-card-head p{
margin:6px 0 0;
font-family:'Lexend', sans-serif;
font-size:12px;
line-height:1.35;
color:rgba(232,243,255,0.72);
}

.monitoring-biota-card-head span{
flex-shrink:0;
font-family:'Lexend', sans-serif;
font-size:11px;
font-weight:700;
line-height:1;
color:#08294a;
background:#9de7f2;
border:1px solid rgba(255,255,255,0.45);
border-radius:999px;
padding:7px 10px;
box-shadow:0 6px 16px rgba(58,180,200,0.18);
}

.monitoring-biota-chart-wrap{
position:relative;
height:350px;
width:100%;
}

.monitoring-biota-chart-wrap canvas{
width:100%!important;
height:100%!important;
background:transparent!important;
padding:0!important;
border-radius:0!important;
box-shadow:none!important;
}

.monitoring-biota-state{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
min-height:220px;
width:100%;
font-family:'Lexend', sans-serif;
font-size:14px;
line-height:1.6;
text-align:center;
color:#5a7a99;
}

.monitoring-biota-state.error{
display:block;
padding:28px 18px;
color:#e8722a;
}

/* ===== LOADING & PLACEHOLDER ===== */
.wk-loading { display:flex; align-items:center; gap:14px; padding:28px 20px; color:#5a7a99; font-family:'Lexend', sans-serif; font-size:14px; }
.wk-spinner { width:24px; height:24px; border:3px solid #e0eaf5; border-top-color:#3ab4c8; border-radius:50%; animation:spin 0.8s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.wk-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px; text-align:center; }
.wk-placeholder-icon { font-size:52px; margin-bottom:16px; opacity:0.6; }
.wk-placeholder-title { font-family:'Lexend', sans-serif; font-size:18px; font-weight:600; color:#0b3d6d; margin-bottom:10px; }
.wk-placeholder-desc { font-family:'Lexend', sans-serif; font-size:14px; color:#7a95b0; max-width:420px; line-height:1.6; }

/* ================= HEATMAP ================= */

.wk-heatmap-wrap{

width:100%;
height:100%;

display:flex;
flex-direction:column;

overflow:auto;

}

.wk-heatmap-title{

font-family:'Lexend', sans-serif;

font-size:15px;
font-weight:700;

color:#0b3d6d;

margin-bottom:10px;
padding-left:2px;

}

.wk-heatmap-grid{

display:grid;

gap:4px;

align-items:stretch;

}

/* HEADER */

.wk-heatmap-head{

display:flex;
align-items:center;
justify-content:center;

background:#0b3d6d;
color:white;

font-family:'Lexend', sans-serif;
font-size:10px;
font-weight:700;

padding:4px 3px;

border-radius:10px;

line-height:1.05;

min-height:42px;

text-align:center;

word-break:break-word;

}

/* NAMA BIOTA */

.wk-heatmap-biota{

display:flex;
align-items:center;

background:#dfe6ee;

color:#0b3d6d;

font-family:'Lexend', sans-serif;
font-size:12px;
font-weight:700;

padding:6px 10px;

border-radius:10px;

min-height:42px;

line-height:1.1;

}

/* CELL */

.wk-heatmap-cell{

display:flex;
align-items:center;
justify-content:center;

height:42px;

border-radius:10px;

font-size:16px;
font-weight:800;

transition:0.2s;

}

/* ACTIVE */

.wk-heatmap-cell.active{

background:#22c55e;
color:white;

box-shadow:
0 2px 8px rgba(34,197,94,0.28);

}

/* INACTIVE */

.wk-heatmap-cell.inactive{

background:#edf1f5;
color:#a0a8b5;

}

/* HOVER */

.wk-heatmap-cell:hover{

transform:scale(1.08);

z-index:2;

}

/* STICKY */

.sticky{

position:sticky;

left:0;

z-index:3;

}

/* SCROLLBAR */

.wk-heatmap-grid::-webkit-scrollbar{

height:10px;
width:10px;

}

.wk-heatmap-grid::-webkit-scrollbar-thumb{

background:#0b4f8a;

border-radius:20px;

}

.wk-heatmap-grid::-webkit-scrollbar-track{

background:#dfeaf5;

border-radius:20px;

}


/* ================= HEATMAP TAHUN COMPACT ================= */

#wk-partisipatif .wk-chart-card,
#wk-monitoring .wk-chart-card{

height:520px;

}

#wk-partisipatif .wk-heatmap-grid,
#wk-monitoring .wk-heatmap-grid{

gap:4px;

}

#wk-partisipatif .wk-heatmap-head,
#wk-monitoring .wk-heatmap-head{

font-size:10px;

min-height:40px;

padding:4px 2px;

}

#wk-partisipatif .wk-heatmap-biota,
#wk-monitoring .wk-heatmap-biota{

font-size:12px;

min-height:40px;

padding:5px 10px;

}

#wk-partisipatif .wk-heatmap-cell,
#wk-monitoring .wk-heatmap-cell{

height:40px;

font-size:15px;

}

@media (max-width: 700px){
.monitoring-biota-grid{
gap:14px;
padding-bottom:14px;
}

.monitoring-biota-card,
.monitoring-biota-card.featured{
flex:0 0 88vw;
min-height:390px;
padding:14px;
border-radius:14px;
}

.monitoring-biota-card-head{
flex-direction:column;
gap:8px;
}

.monitoring-biota-card-head span{
align-self:flex-start;
}

.monitoring-biota-chart-wrap{
height:310px;
}
}