:root{--ink:#102a2a;--muted:#617172;--deep:#063b42;--deep2:#092f36;--green:#18756c;--green2:#5ca66b;--lime:#9dcc43;--aqua:#80d2ca;--cream:#f6f8f1;--soft:#eaf3ec;--white:#fff;--line:rgba(16,42,42,.14);--shadow:0 24px 60px rgba(3,43,50,.14);--radius:24px;--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#fff;line-height:1.65}body.nav-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input{font:inherit}.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}.narrow{max-width:950px}.reading-width{max-width:900px}.section{padding:110px 0}.section-soft{background:var(--soft)}.section-deep{background:var(--deep);color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{position:sticky;top:0;z-index:100;background:rgba(5,50,56,.96);color:#fff;backdrop-filter:blur(14px);box-shadow:0 5px 25px rgba(0,0,0,.08)}.nav-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand img{width:52px;height:52px}.brand span{display:flex;flex-direction:column;line-height:1.05}.brand strong{font-size:1.25rem;letter-spacing:.02em}.brand small{margin-top:5px;color:#bce8da}.main-nav{display:flex;align-items:center;gap:28px}.nav-link{position:relative;padding:27px 0 24px;font-weight:700;color:rgba(255,255,255,.82)}.nav-link:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--lime);transform:scaleX(0);transition:.25s}.nav-link:hover,.nav-link.active{color:#fff}.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent}.nav-toggle span{display:block;width:26px;height:2px;margin:6px auto;background:#fff;transition:.25s}
.hero{position:relative;overflow:hidden}.hero-home{min-height:calc(100vh - 82px);display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(2,35,43,.9),rgba(2,35,43,.3)),url('../images/hero-aquatic.svg') center/cover}.hero-grid{display:grid;grid-template-columns:1.25fr .65fr;align-items:center;gap:80px;padding:105px 0}.eyebrow,.section-kicker{margin:0 0 14px;color:var(--lime);font-size:.78rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.hero h1,.page-hero h1{margin:0;font-size:clamp(3.25rem,6.7vw,6.5rem);line-height:.98;letter-spacing:-.065em}.hero h1 span{display:block;color:#b8e9d6}.lead{max-width:720px;margin:28px 0 0;color:rgba(255,255,255,.82);font-size:1.12rem}.hero-actions{display:flex;gap:14px;margin-top:34px}.btn{display:inline-flex;min-height:50px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:999px;padding:0 24px;font-weight:800;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(90deg,var(--green2),var(--lime));color:#082e30}.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.06)}.btn-light{background:#fff;color:var(--deep)}.species-search{display:grid;grid-template-columns:1fr auto;max-width:650px;margin-top:28px;padding:6px;border-radius:999px;background:#fff;box-shadow:var(--shadow)}.species-search input{min-width:0;border:0;outline:0;padding:0 18px;background:transparent}.species-search button{border:0;border-radius:999px;padding:12px 22px;background:var(--lime);font-weight:900;color:#123d38;cursor:pointer}.hero-panel{align-self:end;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);padding:32px;background:rgba(3,48,56,.57);backdrop-filter:blur(12px)}.panel-label{display:inline-flex;border-radius:999px;padding:7px 12px;background:rgba(157,204,67,.18);color:#d8f3a0;font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hero-panel h2{margin:42px 0 12px;font-size:2rem;line-height:1.14}.hero-panel p{color:rgba(255,255,255,.7)}.hero-panel a{font-weight:800;color:#c9f28c}.hero-bubbles i{position:absolute;border:1px solid rgba(255,255,255,.3);border-radius:50%;animation:float 8s ease-in-out infinite}.hero-bubbles i:nth-child(1){width:20px;height:20px;left:6%;bottom:10%}.hero-bubbles i:nth-child(2){width:38px;height:38px;left:78%;bottom:15%;animation-delay:-2s}.hero-bubbles i:nth-child(3){width:13px;height:13px;left:88%;bottom:35%;animation-delay:-4s}.hero-bubbles i:nth-child(4){width:28px;height:28px;left:45%;bottom:6%;animation-delay:-6s}@keyframes float{50%{transform:translateY(-55px);opacity:.35}}
.stats-strip{background:#052f36;color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stats-grid>div{padding:34px;border-right:1px solid rgba(255,255,255,.13)}.stats-grid>div:first-child{border-left:1px solid rgba(255,255,255,.13)}.stats-grid strong{display:block;color:#bce879;font-size:2.1rem}.stats-grid span{color:rgba(255,255,255,.68);font-size:.9rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.intro-split h2,.section-head h2,.split h2{margin:0;font-size:clamp(2.3rem,4.6vw,4.25rem);line-height:1.04;letter-spacing:-.05em}.split p,.section-head>p{color:var(--muted);font-size:1.03rem}.text-link{display:inline-flex;margin-top:16px;border:0;background:none;padding:0;color:var(--green);font-weight:900;cursor:pointer}.section-head{display:grid;grid-template-columns:1fr .65fr;gap:70px;align-items:end;margin-bottom:46px}.section-deep .section-head>p{color:rgba(255,255,255,.68)}.light{color:#c9ef8a}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{min-height:330px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;transition:.28s}.feature-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.feature-card>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#e4f2de;color:var(--green);font-weight:900}.feature-card h3{margin:64px 0 12px;font-size:1.45rem}.feature-card p{margin:0;color:var(--muted)}.feature-card b{margin-top:auto;color:var(--green)}.species-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.species-mini{border-radius:var(--radius);padding:25px;background:linear-gradient(145deg,#f5fbf8,#e1f0e6);border:1px solid rgba(20,90,80,.12)}.fish-icon{font-size:2.2rem}.species-mini h3{margin:35px 0 3px}.species-mini p{margin:0;color:var(--muted)}.cta-band{padding:75px 0;background:linear-gradient(110deg,#07545b,#0c766d);color:#fff}.cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:50px}.cta-band h2{max-width:820px;margin:0;font-size:clamp(2rem,4vw,3.7rem);line-height:1.08;letter-spacing:-.04em}
.page-hero{min-height:540px;display:flex;align-items:center;text-align:center;color:#fff;background-position:center;background-size:cover}.page-hero .container{padding:85px 0}.page-hero h1{font-size:clamp(3rem,6vw,5.7rem)}.page-hero p{max-width:900px;margin:22px auto 0;color:rgba(255,255,255,.8);font-size:1.12rem}.hero-note{display:inline-block;max-width:880px;margin-top:30px;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:12px 20px;background:rgba(1,42,48,.4);color:#eafaf2;font-weight:700}.about-hero{background:linear-gradient(rgba(4,48,51,.72),rgba(4,48,51,.8)),url('../images/about-water.svg') center/cover}.jai-hero{background:linear-gradient(rgba(2,43,49,.55),rgba(2,43,49,.7)),url('../images/jai-hero.svg') center/cover}.gallery-hero{background:linear-gradient(rgba(3,48,53,.64),rgba(3,48,53,.75)),url('../images/hero-aquatic.svg') center 65%/cover}.blog-hero{background:linear-gradient(rgba(3,48,53,.68),rgba(3,48,53,.78)),url('../images/about-water.svg') center/cover}.timeline{position:relative;max-width:950px;margin:0 auto}.timeline:before{content:"";position:absolute;left:116px;top:0;bottom:0;width:2px;background:linear-gradient(var(--green),var(--lime))}.timeline-item{position:relative;display:grid;grid-template-columns:100px 1fr;gap:44px;padding:0 0 55px}.timeline-item:before{content:"";position:absolute;left:109px;top:15px;width:16px;height:16px;border:4px solid #fff;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--green)}.timeline-year{font-size:1.25rem;font-weight:900;color:var(--green)}.timeline-year.now{font-size:.95rem}.timeline-item h3{margin:0 0 8px;font-size:1.45rem}.timeline-item p{margin:0;color:var(--muted)}.regulation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.reg-card{min-height:340px;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:28px;background:rgba(255,255,255,.06)}.reg-card>span{color:#c9ed89;font-weight:900}.reg-card h3{margin:42px 0 10px;font-size:1.35rem}.reg-card p{margin:0;color:rgba(255,255,255,.66)}.pdf-link{margin-top:auto;padding-top:20px;color:#d7f59f;font-weight:900}.pdf-link.is-placeholder:after{content:" · unggah PDF";color:rgba(255,255,255,.4);font-size:.78rem}.pdf-dropzone{margin-top:24px;display:flex;justify-content:space-between;align-items:center;border:2px dashed rgba(255,255,255,.28);border-radius:var(--radius);padding:28px;background:rgba(255,255,255,.04)}.pdf-dropzone p{margin:5px 0 0;color:rgba(255,255,255,.62)}.pdf-dropzone>span{font-size:2rem;font-weight:900;color:#c9ed89}.objective-grid,.location-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.objective-card,.location-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff}.objective-card b{color:var(--green)}.objective-card h3,.location-card h3{margin:52px 0 10px}.objective-card p,.location-card p{margin:0;color:var(--muted)}.location-card>span{font-size:2rem}
.reading-width p{font-size:1.1rem;color:#405657}.reading-width .dropcap:first-letter{float:left;margin:5px 10px 0 0;color:var(--green);font-size:4rem;font-weight:900;line-height:.72}.table-wrap{overflow:auto;border-radius:var(--radius);box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{background:#0a5d61;color:#fff}tbody tr:hover{background:#f4f8f3}.center-note{max-width:840px;margin:28px auto 0;text-align:center;color:var(--muted)}.number-list{max-width:950px}.number-item{display:grid;grid-template-columns:80px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}.number-item>span{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--green);font-size:1.25rem;font-weight:900}.number-item h3{margin:0 0 7px}.number-item p{margin:0;color:var(--muted)}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.category-card{min-height:380px;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:30px;background:rgba(255,255,255,.07);transition:.28s}.category-card:hover{transform:translateY(-7px);background:rgba(255,255,255,.1)}.category-card>span{font-size:2.2rem}.category-card h3{margin:75px 0 12px;font-size:1.5rem}.category-card p{color:rgba(255,255,255,.68)}.category-card b{margin-top:auto;color:#d2f294}.filter-box{display:flex;flex-direction:column;gap:7px}.filter-box label{font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--green)}.filter-box input{min-width:290px;border:1px solid var(--line);border-radius:999px;padding:13px 18px;outline:none}.filter-box input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(24,117,108,.12)}.species-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.species-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 40px rgba(4,45,51,.07)}.species-art{height:190px;display:grid;place-items:center;font-size:5.4rem}.fish-a{background:linear-gradient(145deg,#b9d9cc,#5c8e7a)}.fish-b{background:linear-gradient(145deg,#d7bc7c,#806a42)}.fish-c{background:linear-gradient(145deg,#91c8d4,#347f8d)}.fish-d{background:linear-gradient(145deg,#ec9b6f,#a24231)}.fish-e{background:linear-gradient(145deg,#c6d99a,#719452)}.fish-f{background:linear-gradient(145deg,#b4cadc,#607d91)}.species-card>div:last-child{padding:24px}.species-card span{display:inline-block;border-radius:999px;padding:5px 9px;background:var(--soft);color:var(--green);font-size:.72rem;font-weight:900;text-transform:uppercase}.species-card h3{margin:14px 0 2px}.species-card p{margin:6px 0;color:var(--muted)}.no-results{text-align:center;padding:30px;color:var(--muted)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.gallery-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 14px 42px rgba(4,50,55,.08)}.gallery-card button{position:relative;width:100%;border:0;padding:0;background:#ddd;cursor:pointer}.gallery-card button img{width:100%;aspect-ratio:3/2;object-fit:cover}.gallery-card button span{position:absolute;right:18px;bottom:18px;border-radius:999px;padding:9px 14px;background:#fff;color:var(--deep);font-weight:900;box-shadow:0 8px 30px rgba(0,0,0,.18)}.gallery-card>div{padding:24px}.gallery-card h3{margin:0 0 8px}.gallery-card p{margin:0;color:var(--muted)}.lightbox{position:fixed;z-index:999;inset:0;display:grid;place-items:center;padding:30px;background:rgba(1,20,24,.88);backdrop-filter:blur(8px)}.lightbox[hidden]{display:none}.lightbox img{max-width:min(1000px,90vw);max-height:78vh;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.45)}.lightbox button{position:absolute;top:24px;right:30px;border:0;background:transparent;color:#fff;font-size:3rem;cursor:pointer}.lightbox p{position:absolute;bottom:20px;color:#fff;font-weight:800}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.blog-card{overflow:hidden;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}.blog-cover{height:220px;display:flex;align-items:flex-end;padding:22px;background-position:center;background-size:cover}.cover-1{background:linear-gradient(145deg,rgba(2,64,70,.2),rgba(2,36,43,.75)),url('../images/jai-hero.svg') center/cover}.cover-2{background:linear-gradient(145deg,rgba(2,64,70,.2),rgba(2,36,43,.75)),url('../images/hero-aquatic.svg') center/cover}.cover-3{background:linear-gradient(145deg,rgba(2,64,70,.2),rgba(2,36,43,.75)),url('../images/about-water.svg') center/cover}.blog-cover span{border-radius:999px;padding:8px 13px;background:#ffad18;color:#372500;font-size:.72rem;font-weight:900;letter-spacing:.08em}.blog-body{padding:25px}.meta{display:flex;gap:18px;color:var(--green);font-size:.82rem;font-weight:800}.blog-card h3{margin:16px 0 12px;font-size:1.35rem;line-height:1.25}.blog-card p{color:var(--muted)}.article-extra{border-top:1px solid var(--line);margin-top:15px;padding-top:12px}.newsletter{align-items:center}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}code{border-radius:5px;padding:2px 5px;background:rgba(0,0,0,.08);font-size:.9em}.section-deep code{background:rgba(255,255,255,.12)}
@media(max-width:980px){.section{padding:85px 0}.nav-toggle{display:block;position:relative;z-index:120}.main-nav{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;justify-content:center;background:#052f36;transform:translateX(100%);transition:.3s}.main-nav.open{transform:none}.nav-link{font-size:1.4rem;padding:8px}.nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-toggle.active span:nth-child(2){opacity:0}.nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.hero-grid{grid-template-columns:1fr;gap:45px}.hero-panel{max-width:600px}.stats-grid,.feature-grid,.species-mini-grid,.objective-grid,.location-grid{grid-template-columns:repeat(2,1fr)}.split,.section-head{grid-template-columns:1fr;gap:30px}.regulation-grid,.species-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.container{width:min(calc(100% - 28px),var(--container))}.nav-wrap{min-height:72px}.brand img{width:45px;height:45px}.hero-home{min-height:auto}.hero-grid{padding:85px 0}.hero h1,.page-hero h1{font-size:clamp(2.7rem,14vw,4.2rem)}.hero-actions{flex-direction:column;align-items:stretch}.species-search{grid-template-columns:1fr}.species-search input{padding:13px 16px}.stats-grid,.feature-grid,.species-mini-grid,.objective-grid,.location-grid,.regulation-grid,.species-grid,.gallery-grid,.blog-grid,.footer-grid{grid-template-columns:1fr}.stats-grid>div,.stats-grid>div:first-child{border-left:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.section-head h2,.intro-split h2,.split h2{font-size:2.5rem}.cta-band .container,.footer-bottom{align-items:flex-start;flex-direction:column}.timeline:before{left:19px}.timeline-item{grid-template-columns:1fr;padding-left:55px}.timeline-item:before{left:12px}.timeline-year{position:relative}.table-wrap{border-radius:14px}th,td{min-width:190px;padding:16px}.filter-box input{min-width:0;width:100%}.number-item{grid-template-columns:55px 1fr}.number-item>span{width:46px;height:46px}.page-hero{min-height:500px}.hero-note{border-radius:18px}.pdf-dropzone{align-items:flex-start;flex-direction:column;gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   NAVBAR GLOBAL: TRANSPARAN DI ATAS, FLOATING SAAT DISCROLL
   ========================================================= */

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: padding 0.3s ease;
}

.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  transition:
    min-height 0.3s ease,
    padding 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.site-header.scrolled {
  padding: 10px 0;
}

.site-header.scrolled .nav-wrap {
  min-height: 64px;
  padding: 0 24px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(4, 37, 42, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
  position: relative;
  z-index: 2;
}

.navbar-logo {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease;
}

.site-header.scrolled .navbar-logo {
  width: 46px !important;
  height: 46px !important;
}

.navbar-brand strong {
  color: #ffffff;
}

.navbar-brand small {
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 981px) {
  .main-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 34px;
    transform: translate(-50%, -50%);
  }
}

.nav-link {
  position: relative;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  font-weight: 700;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: #b7dc68;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}


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

.home-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  background:
    linear-gradient(
      rgba(3, 28, 31, 0.43),
      rgba(3, 28, 31, 0.63)
    ),
    url("../images/wpphome.png") center / cover no-repeat;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      transparent 10%,
      rgba(2, 24, 28, 0.28) 100%
    );
  pointer-events: none;
}

.home-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - 40px), 1050px);
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 130px;
  padding-bottom: 90px;
}

.home-hero-label {
  margin: 0 0 20px;
  color: #d6f09d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 1000px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.42);
}

.home-hero h1 span {
  display: block;
  margin-top: 10px;
  color: #c6e881;
}

.home-hero-description {
  max-width: 850px;
  margin: 30px auto 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.94rem, 1.4vw, 1.08rem);
  line-height: 1.75;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.home-hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}


/* =========================================================
   RESPONSIVE NAVBAR, HOME, FOOTER
   ========================================================= */

@media (max-width: 980px) {
  .site-header {
    padding: 8px 0;
  }

  .nav-wrap {
    min-height: 66px;
    padding: 0 14px;
  }

  .site-header.scrolled .nav-wrap {
    min-height: 62px;
    padding: 0 18px;
    border-radius: 20px;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    background: rgba(3, 36, 41, 0.98);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .nav-link {
    padding: 8px;
    font-size: 1.35rem;
  }

  .nav-link::after {
    bottom: 0;
  }
}

@media (max-width: 680px) {
  .navbar-logo {
    width: 46px !important;
    height: 46px !important;
  }

  .navbar-brand small {
    display: none;
  }

  .home-hero-content {
    padding-top: 120px;
    padding-bottom: 70px;
  }

  .home-hero h1 {
    font-size: clamp(2.8rem, 14vw, 4.5rem);
  }

  .home-hero-description {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .home-hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-inline: 8px;
  }
}

/* =========================================================
   FOOTER SEDERHANA — TEKS TANPA IKON
   ========================================================= */

.simple-footer {
  width: 100%;
  padding: 48px 0 16px;
  color: #dce7e4;
  background: #072f36;
}

.simple-footer__grid {
  display: grid;
  width: min(calc(100% - 48px), 1450px);
  grid-template-columns:
    minmax(280px, 1.25fr)
    minmax(140px, 0.55fr)
    minmax(150px, 0.65fr)
    minmax(280px, 1.1fr);
  align-items: start;
  gap: 48px;
  margin-inline: auto;
}

.simple-footer__profile,
.simple-footer__column {
  min-width: 0;
}

.simple-footer__title {
  display: inline-block;
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 850;
  line-height: 1.15;
}

.simple-footer__profile p {
  max-width: 410px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.93rem;
  line-height: 1.72;
}

.simple-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.simple-footer__column h3 {
  margin: 4px 0 19px;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 800;
}

.simple-footer__column a {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: color 0.2s ease, transform 0.2s ease;
}

.simple-footer__column a:hover,
.simple-footer__title:hover {
  color: #bce878;
  transform: translateX(3px);
}

.simple-footer__contact a:first-of-type {
  line-height: 1.65;
}

.simple-footer__bottom {
  display: flex;
  width: min(calc(100% - 48px), 1450px);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 34px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.77rem;
}

@media (max-width: 1000px) {
  .simple-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .simple-footer {
    padding-top: 40px;
  }

  .simple-footer__grid {
    width: min(calc(100% - 28px), 1450px);
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .simple-footer__bottom {
    width: min(calc(100% - 28px), 1450px);
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-top: 28px;
  }
}

/* =========================================
   IKON FOOTER TANPA MENGUBAH HTML
========================================= */

/* LOGO BKHIT */

.simple-footer__title {
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
}

.simple-footer__title::before {
  content: "";

  display: block;
  flex: 0 0 86px;

  width: 86px;
  height: 86px;

  background:
    url("../images/logo-bkhit.png")
    center / contain
    no-repeat;
}

/* LINK YANG MEMILIKI IKON */

.simple-footer__column a[href*="facebook.com"],
.simple-footer__column a[href*="x.com"],
.simple-footer__column a[href*="tr.ee"],
.simple-footer__column a[href*="youtube.com"],
.simple-footer__column a[href*="wa.me"],
.simple-footer__column a[href*="maps.app.goo.gl"],
.simple-footer__column a[href^="tel:"],
.simple-footer__column a[href^="mailto:"] {
  display: flex !important;
  align-items: center;
  gap: 12px;

  width: 100%;
}

/* ALAMAT DAN EMAIL DISEJAJARKAN DARI ATAS */

.simple-footer__column a[href*="maps.app.goo.gl"],
.simple-footer__column a[href^="mailto:"] {
  align-items: flex-start;
}

/* DASAR SEMUA IKON */

.simple-footer__column a[href*="facebook.com"]::before,
.simple-footer__column a[href*="x.com"]::before,
.simple-footer__column a[href*="tr.ee"]::before,
.simple-footer__column a[href*="youtube.com"]::before,
.simple-footer__column a[href*="wa.me"]::before,
.simple-footer__column a[href*="maps.app.goo.gl"]::before,
.simple-footer__column a[href^="tel:"]::before,
.simple-footer__column a[href^="mailto:"]::before {
  content: "";

  display: block;
  flex: 0 0 23px;

  width: 23px;
  height: 23px;

  margin-top: 1px;

  background-color: #bce878;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* FACEBOOK */

.simple-footer__column a[href*="facebook.com"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik0xNCA4aDNWNC41Yy0uOC0uMS0xLjgtLjMtMy4yLS4zLTMuMiAwLTUuMyAxLjktNS4zIDUuNVYxM0g1djRoMy41djdIMTN2LTdoMy41bC42LTRIMTN2LTNjMC0xLjIuMy0yIDEtMloiLz48L3N2Zz4=");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik0xNCA4aDNWNC41Yy0uOC0uMS0xLjgtLjMtMy4yLS4zLTMuMiAwLTUuMyAxLjktNS4zIDUuNVYxM0g1djRoMy41djdIMTN2LTdoMy41bC42LTRIMTN2LTNjMC0xLjIuMy0yIDEtMloiLz48L3N2Zz4=");
}

/* TWITTER / X */

.simple-footer__column a[href*="x.com"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik01IDRoNC4ybDMuNiA1IDQuMy01SDE5bC01LjMgNi4yTDIwIDIwaC00LjJsLTQtNS43TDcgMjBINWw1LjktNi45TDUgNFptMy4xIDIgOC43IDEyaDEuMUw5LjIgNkg4LjFaIi8+PC9zdmc+");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik01IDRoNC4ybDMuNiA1IDQuMy01SDE5bC01LjMgNi4yTDIwIDIwaC00LjJsLTQtNS43TDcgMjBINWw1LjktNi45TDUgNFptMy4xIDIgOC43IDEyaDEuMUw5LjIgNkg4LjFaIi8+PC9zdmc+");
}

/* INSTAGRAM */

.simple-footer__column a[href*="tr.ee"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMTcuMyIgY3k9IjYuNyIgcj0iMS4yIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMTcuMyIgY3k9IjYuNyIgcj0iMS4yIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
}

/* YOUTUBE */

.simple-footer__column a[href*="youtube.com"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iNiIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEyIiByeD0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZmlsbD0iYmxhY2siIGQ9Im0xMCA5IDUgMy01IDNaIi8+PC9zdmc+");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iNiIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEyIiByeD0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZmlsbD0iYmxhY2siIGQ9Im0xMCA5IDUgMy01IDNaIi8+PC9zdmc+");
}

/* WHATSAPP — IKON BUBBLE CHAT */

.simple-footer__column a[href*="wa.me"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwIDExLjVhOCA4IDAgMCAxLTExLjggN0w0IDIwbDEuMy00LjJBOCA4IDAgMSAxIDIwIDExLjVaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSI5IiBjeT0iMTIiIHI9IjEiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSIxIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwIDExLjVhOCA4IDAgMCAxLTExLjggN0w0IDIwbDEuMy00LjJBOCA4IDAgMSAxIDIwIDExLjVaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSI5IiBjeT0iMTIiIHI9IjEiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSIxIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
}

/* MAPS */

.simple-footer__column a[href*="maps.app.goo.gl"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIxczctNi4xIDctMTNhNyA3IDAgMSAwLTE0IDBjMCA2LjkgNyAxMyA3IDEzWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIxczctNi4xIDctMTNhNyA3IDAgMSAwLTE0IDBjMCA2LjkgNyAxMyA3IDEzWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIyLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==");
}

/* TELEPON */

.simple-footer__column a[href^="tel:"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuMiAzLjggMTAgNy4yIDguMyA5LjRjMS4yIDIuNSAzLjggNS4xIDYuMyA2LjNsMi4yLTEuNyAzLjQgMi44LS43IDMuMWMtLjIuOC0uOSAxLjMtMS43IDEuM0MxMCAyMC43IDMuMyAxNCAyLjggNi4yYzAtLjguNS0xLjUgMS4zLTEuN2wzLjEtLjdaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuMiAzLjggMTAgNy4yIDguMyA5LjRjMS4yIDIuNSAzLjggNS4xIDYuMyA2LjNsMi4yLTEuNyAzLjQgMi44LS43IDMuMWMtLjIuOC0uOSAxLjMtMS43IDEuM0MxMCAyMC43IDMuMyAxNCAyLjggNi4yYzAtLjguNS0xLjUgMS4zLTEuN2wzLjEtLjdaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
}

/* EMAIL */

.simple-footer__column a[href^="mailto:"]::before {
  -webkit-mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0ibTQgNyA4IDYgOC02IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");

  mask-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0ibTQgNyA4IDYgOC02IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");
}

@media (max-width: 620px) {
  .simple-footer__title::before {
    flex-basis: 72px;

    width: 72px;
    height: 72px;
  }
}

/* =========================================================
   HALAMAN TENTANG V2
========================================================= */

.about-v2 {
  position: relative;
  z-index: 0;

  min-height: 100vh;

  isolation: isolate;
  overflow: hidden;

  color: #ffffff;
}

/* Wallpaper tetap ketika halaman digulir */

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

.about-v2__hero {
  display: grid;
  min-height: 78svh;

  place-items: center;

  padding: 135px 0 70px;

  text-align: center;
}

.about-v2__hero-content {
  display: flex;
  max-width: 1050px;

  flex-direction: column;
  align-items: center;
}

.about-v2__hero h1 {
  max-width: 950px;
  margin: 0;

  color: #ffffff;

  font-size: clamp(3rem, 6.5vw, 6.3rem);
  line-height: 0.98;
  letter-spacing: -0.06em;

  text-shadow:
    0 8px 35px rgba(0, 0, 0, 0.42);
}

.about-v2__lead {
  max-width: 930px;

  margin: 27px auto 0;

  color: rgba(255, 255, 255, 0.86);

  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 650;
  line-height: 1.65;
}

.about-v2__tagline {
  max-width: 850px;

  margin: 22px auto 0;
  padding: 13px 22px;

  border:
    1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;

  color: #d9f4a6;
  background: rgba(4, 38, 43, 0.45);

  backdrop-filter: blur(12px);

  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.55;
}

.about-v2__scroll-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-top: 30px;

  color: rgba(255, 255, 255, 0.8);

  font-size: 0.85rem;
  font-weight: 750;
}

.about-v2__scroll-link span {
  color: #c5e77d;
  font-size: 1.2rem;
}

/* =========================================================
   SECTION
========================================================= */

.about-v2__section {
  padding: 55px 0;
}

.about-v2__section--last {
  padding-bottom: 70px;
}

.about-v2__heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;

  margin-bottom: 25px;
}

.about-v2__heading span,
.about-v2__panel-heading span {
  display: block;

  margin-bottom: 8px;

  color: #c5e77d;

  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-v2__heading h2,
.about-v2__panel-heading h2 {
  max-width: 750px;
  margin: 0;

  color: #ffffff;

  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.about-v2__heading > p {
  max-width: 320px;
  margin: 0;

  color: rgba(255, 255, 255, 0.6);

  text-align: right;
}

/* =========================================================
   DASAR HUKUM VISUAL
========================================================= */

.about-v2__law-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 14px;

  overflow-x: auto;

  padding: 3px 2px 13px;

  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.about-v2__law-card {
  display: flex;
  min-height: 245px;
  flex-direction: column;

  padding: 20px;

  border: 1px solid var(--law-border);
  border-radius: 19px;

  color: var(--law-text);
  background: var(--law-background);

  scroll-snap-align: start;

  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.12);

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

.about-v2__law-card:hover {
  transform: translateY(-5px);

  border-color: rgba(188, 232, 120, 0.9);

  box-shadow:
   0 22px 48px rgba(0, 0, 0, 0.17);
}

.about-v2__law-icon {
  display: grid;
  place-items: center;

  width: 47px;
  height: 47px;

  border-radius: 14px;

  color: var(--law-icon);
  background: var(--law-icon-background);
}

.about-v2__law-icon svg {
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-v2__law-label {
  display: block;

  margin-top: 23px;

  color: var(--law-accent);

  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-v2__law-card h3 {
  margin: 7px 0 8px;

  color: inherit;

  font-size: 0.98rem;
  line-height: 1.3;
}

.about-v2__law-card p {
  margin: 0;

  color: var(--law-muted);

  font-size: 0.77rem;
  line-height: 1.55;
}

.about-v2__pdf-link,
.about-v2__pdf-status {
  margin-top: auto;
  padding-top: 15px;

  font-size: 0.75rem;
  font-weight: 800;
}

.about-v2__pdf-link {
  color: var(--law-accent);
}

.about-v2__pdf-status {
  color: var(--law-muted);
}

/* WARNA DASAR HUKUM */

.law-white,
.law-blue,
.law-orange,
.law-green,
.law-purple {
  --law-background: rgba(255, 255, 255, 0.94);
  --law-border: rgba(255, 255, 255, 0.7);

  --law-text: #173d3c;
  --law-muted: #617172;

  --law-accent: #17736b;
  --law-icon: #17736b;

  --law-icon-background: rgba(23, 115, 107, 0.1);
}

/* =========================================================
   TUJUAN DAN WILAYAH
========================================================= */

.about-v2__dual-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;
}

.about-v2__panel {
  padding: 28px;

  border:
    1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;

  background: rgba(5, 42, 47, 0.72);

  backdrop-filter: blur(17px);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.14);
}

.about-v2__panel-heading {
  margin-bottom: 22px;
}

.about-v2__panel-heading h2 {
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
}

.about-v2__mini-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;
}

.about-v2__mini-card {
  display: flex;

  align-items: flex-start;
  gap: 12px;

  min-height: 112px;
  padding: 15px;

  border:
    1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.05);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.about-v2__mini-card:hover {
  transform: translateY(-3px);

  background: rgba(255, 255, 255, 0.09);
}

.about-v2__mini-icon,
.about-v2__location-icon {
  display: grid;
  place-items: center;

  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  color: #c5e77d;
  background: rgba(197, 231, 125, 0.11);

  font-size: 0.7rem;
  font-weight: 850;
}

.about-v2__location-icon {
  font-size: 1.05rem;
}

.about-v2__mini-card h3 {
  margin: 0 0 5px;

  color: #ffffff;

  font-size: 0.94rem;
}

.about-v2__mini-card p {
  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.76rem;
  line-height: 1.5;
}

.about-v2__mini-icon svg,
.about-v2__location-icon svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-yellow {
  color: #ffe08a;
  background: rgba(255, 224, 138, 0.13);
}

.icon-blue {
  color: #83e0e5;
  background: rgba(131, 224, 229, 0.13);
}

.icon-orange {
  color: #ffb77e;
  background: rgba(255, 183, 126, 0.13);
}

.icon-green {
  color: #8fe4ad;
  background: rgba(143, 228, 173, 0.13);
}

.icon-purple {
  color: #d1b7f5;
  background: rgba(209, 183, 245, 0.13);
}

.about-v2__mini-card:nth-child(odd) {
  background: rgba(255, 255, 255, 0.075);
}

.about-v2__mini-card:nth-child(even) {
  background: rgba(188, 232, 120, 0.055);
} 

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .about-v2__law-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(245px, 60vw);
  }

  .about-v2__dual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .about-v2__hero {
    min-height: 82svh;

    padding-top: 125px;
    padding-bottom: 55px;
  }

  .about-v2__hero h1 {
    font-size: clamp(2.7rem, 13vw, 4.5rem);
  }

  .about-v2__tagline {
    border-radius: 18px;
  }

  .about-v2__section {
    padding: 43px 0;
  }

  .about-v2__heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

  .about-v2__heading > p {
    text-align: left;
  }

  .about-v2__law-grid {
    grid-auto-columns: minmax(245px, 83vw);
  }

  .about-v2__mini-grid {
    grid-template-columns: 1fr;
  }

  .about-v2__panel {
    padding: 22px;
  }
}

/* =========================================================
   TIMELINE VERTIKAL ZIG-ZAG
========================================================= */

.about-v2__timeline {
  position: relative;
  isolation: isolate;
  overflow: visible;

  display: flex;
  flex-direction: column;
  gap: 26px;

  max-width: 1150px;
  margin: 0 auto;
  padding: 18px 0 10px;
}

.about-v2__timeline::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 4px;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    rgba(197, 231, 125, 0.95),
    rgba(255, 255, 255, 0.9)
  );

  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(197, 231, 125, 0.18);
}

.about-v2__timeline-item {
  position: relative;
  z-index: 1;

  display: flex;
  width: 100%;
}

.about-v2__timeline-item:nth-child(odd) {
  justify-content: flex-start;
}

.about-v2__timeline-item:nth-child(even) {
  justify-content: flex-end;
}

.about-v2__timeline-node {
  position: absolute;
  z-index: 3;

  top: 50%;
  left: 50%;

  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  border: 4px solid #0b3a3f;
  border-radius: 50%;

  color: #0f6f68;
  background: #ffffff;

  transform: translate(-50%, -50%);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.about-v2__timeline-node svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-v2__timeline-card {
  position: relative;

  width: calc(50% - 55px);
  min-height: 170px;
  padding: 22px 24px;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;

  color: #173c3e;
  background: rgba(255, 255, 255, 0.94);

  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

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

.about-v2__timeline-item:hover .about-v2__timeline-card {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
  border-color: rgba(197, 231, 125, 0.72);
}

/* panah kecil ke garis tengah */
.about-v2__timeline-item:nth-child(odd) .about-v2__timeline-card::after {
  content: "";

  position: absolute;
  top: 50%;
  right: -10px;

  width: 18px;
  height: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.94);

  transform: translateY(-50%) rotate(45deg);
}

.about-v2__timeline-item:nth-child(even) .about-v2__timeline-card::after {
  content: "";

  position: absolute;
  top: 50%;
  left: -10px;

  width: 18px;
  height: 18px;

  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.94);

  transform: translateY(-50%) rotate(45deg);
}

.about-v2__year {
  display: inline-flex;
  align-items: center;

  margin-bottom: 12px;
  padding: 7px 14px;

  border-radius: 999px;

  color: #ffffff;
  background: linear-gradient(135deg, #0f6f68, #8ebd59);

  font-size: 0.85rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.about-v2__timeline-card h3 {
  margin: 0 0 10px;

  color: #12393c;

  font-size: 1.12rem;
  line-height: 1.3;
}

.about-v2__timeline-card p {
  margin: 0;

  color: #607174;

  font-size: 0.85rem;
  line-height: 1.65;
}

/* =========================================================
   RESPONSIVE TIMELINE
========================================================= */

@media (max-width: 900px) {
  .about-v2__timeline::before {
    left: 24px;
    transform: none;
  }

  .about-v2__timeline-item,
  .about-v2__timeline-item:nth-child(odd),
  .about-v2__timeline-item:nth-child(even) {
    justify-content: flex-end;
  }

  .about-v2__timeline-node {
    left: 24px;
    transform: translate(-50%, -50%);
  }

  .about-v2__timeline-card {
    width: calc(100% - 64px);
    min-height: auto;
  }

  .about-v2__timeline-item:nth-child(odd) .about-v2__timeline-card::after,
  .about-v2__timeline-item:nth-child(even) .about-v2__timeline-card::after {
    left: -10px;
    right: auto;

    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    border-top: none;
    border-right: none;

    transform: translateY(-50%) rotate(45deg);
  }
}

/* =========================================================
   PANEL HEADING TANPA BACKGROUND GAMBAR
========================================================= */

.about-v2__panel-banner {
  display: flex;
  align-items: center;
  gap: 18px;

  min-height: 0;
  margin: 0 0 24px;
  padding: 0 0 10px;

  border: 0;
  border-radius: 0;
  background: none !important;
  background-image: none !important;
}

.about-v2__panel-banner::before,
.about-v2__panel-banner::after {
  content: none !important;
  display: none !important;
}

.about-v2__panel-banner-icon {
  display: grid;
  place-items: center;

  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;

  color: #cde97b;
  background: rgba(255, 255, 255, 0.08);

  line-height: 0;
}

.about-v2__panel-banner-icon svg {
  display: block;
  width: 29px;
  height: 29px;
  margin: auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-v2__panel-banner > div {
  min-width: 0;
}

.about-v2__panel-banner > div > span {
  display: block;
  margin-bottom: 7px;

  color: #c9eb82;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-v2__panel-banner h2 {
  margin: 0;

  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.08;
}

/* =========================================================
   TOMBOL PDF
========================================================= */

.about-v2__pdf-actions {
  display: grid;

  grid-template-columns: 1fr 1fr;
  gap: 8px;

  margin-top: auto;
  padding-top: 17px;
}

.about-v2__pdf-button {
  display: inline-flex;
  min-height: 38px;

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

  border-radius: 10px;
  padding: 7px 10px;

  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.about-v2__pdf-button:hover {
  transform: translateY(-2px);
}

.about-v2__pdf-button--open {
  color: #ffffff;
  background: #176f68;
}

.about-v2__pdf-button--open:hover {
  background: #0d5b56;
}

.about-v2__pdf-button--download {
  border: 1px solid rgba(23, 111, 104, 0.35);

  color: #176f68;
  background: rgba(23, 111, 104, 0.08);
}

.about-v2__pdf-button--download:hover {
  border-color: #176f68;
  background: rgba(23, 111, 104, 0.14);
}

/* =========================================================
   RESPONSIVE SUBHEADING DAN PDF
========================================================= */

@media (max-width: 700px) {
  .about-v2__panel-banner {
    align-items: center;
    gap: 14px;

    min-height: 0;
    margin: 0 0 22px;
    padding: 0 0 10px;
  }

  .about-v2__panel-banner-icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .about-v2__panel-banner-icon svg {
    width: 27px;
    height: 27px;
  }

  .about-v2__pdf-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HEADING PERJALANAN DAN DASAR HUKUM — TANPA BACKGROUND
========================================================= */

.about-v2__simple-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-bottom: 30px;
  padding: 6px 16px;

  text-align: center;
  background: none;
}

.about-v2__simple-heading-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  color: #c5e77d;
  background: transparent;
  line-height: 0;
}

.about-v2__simple-heading-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  margin: auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-v2__simple-heading h2 {
  max-width: 920px;
  margin: 0;

  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.about-v2__simple-heading p {
  max-width: 820px;
  margin: 2px 0 0;

  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
}

/* =========================================================
   FIX FOOTER HALAMAN TENTANG
========================================================= */

#footer-container {
  position: relative;
  z-index: 50;
  isolation: isolate;

  width: 100%;
  background: #072f36;
}

.simple-footer {
  position: relative;
  z-index: 1;

  margin-top: 0;
  background: #072f36;
}

@media (max-width: 680px) {
  .about-v2__simple-heading h2 {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }
}


/* =========================================================
   HALAMAN JAI — CSS DIGABUNG KE STYLE.CSS
   ========================================================= */

/* =========================================================
   HALAMAN JAI
   File khusus: assets/css/jai.css
   ========================================================= */

.jai-page {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
}

body[data-page="jai"] #footer-container {
  position: relative;
  z-index: 3;
}

/* HERO */

.jai-page__hero {
  min-height: 610px;
  padding: 180px 0 76px;
  text-align: center;
}

.jai-page__hero .container {
  padding: 0;
}

.jai-page__hero-kicker {
  margin: 0 0 15px;
  color: #c5e77d;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.jai-page__hero h1 {
  max-width: 1050px;
  margin: 0 auto;
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.055em;
  text-shadow: 0 8px 35px rgba(0, 0, 0, 0.4);
}

.jai-page__hero-description {
  max-width: 900px;
  margin: 25px auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.04rem;
  line-height: 1.7;
}

.jai-page__hero-note {
  display: inline-block;
  max-width: 850px;
  margin: 26px auto 0;
  padding: 11px 19px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #dbf3a7;
  background: rgba(4, 38, 43, 0.58);
  backdrop-filter: blur(12px);
  font-weight: 700;
}

/* SECTION */

.jai-page__section {
  padding: 60px 0;
}

.jai-page__section--last {
  padding-bottom: 76px;
}

/* HEADING SECTION */

.jai-section-heading {
  display: flex;
  max-width: 920px;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 30px;
  padding: 0 20px;
  text-align: center;
}

.jai-section-heading__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 8px;
  color: #c5e77d;
}

.jai-section-heading__icon svg {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jai-section-heading__kicker {
  margin: 0 0 7px;
  color: #c5e77d;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jai-section-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.jai-section-heading__description {
  max-width: 720px;
  margin: 13px auto 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* INTRO */

.jai-intro-card {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 36px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  color: #173d3c;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
}

.jai-intro-card p {
  margin: 0;
  color: #5d6f71;
  font-size: 0.96rem;
  line-height: 1.78;
}

.jai-intro-card p + p {
  margin-top: 18px;
}

/* PILAR */

.jai-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.jai-pillar-card {
  min-height: 275px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 21px;
  color: #173d3c;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
}

.jai-pillar-card__icon,
.jai-law-card__icon,
.jai-category-card__icon,
.jai-detail-modal__info-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #17736b;
  background: rgba(23, 115, 107, 0.1);
}

.jai-pillar-card__icon svg,
.jai-law-card__icon svg,
.jai-category-card__icon svg,
.jai-detail-modal__info-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jai-pillar-card h3 {
  margin: 34px 0 4px;
  color: #173d3c;
  font-size: 1.25rem;
}

.jai-pillar-card__basis {
  margin: 0 0 13px !important;
  color: #17736b !important;
  font-size: 0.76rem !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jai-pillar-card p {
  margin: 0;
  color: #617172;
  font-size: 0.86rem;
  line-height: 1.65;
}

/* DASAR HUKUM */

.jai-law-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.jai-law-card {
  min-height: 245px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  color: #173d3c;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
}

.jai-law-card h3 {
  margin: 32px 0 10px;
  color: #173d3c;
  font-size: 1rem;
  line-height: 1.35;
}

.jai-law-card p {
  margin: 0;
  color: #617172;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* KATEGORI */

.jai-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.jai-category-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  color: #173d3c;
  background: rgba(255, 255, 255, 0.95);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 17px 42px rgba(0, 0, 0, 0.13);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.jai-category-card:hover {
  transform: translateY(-5px);
  border-color: #c5e77d;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

.jai-category-card h3 {
  margin: 40px 0 10px;
  color: #173d3c;
  font-size: 1.28rem;
}

.jai-category-card p {
  margin: 0;
  color: #617172;
  font-size: 0.87rem;
  line-height: 1.65;
}

.jai-category-card strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 24px;
  color: #17736b;
  font-size: 0.84rem;
}

/* MODAL */

body.jai-detail-open {
  overflow: hidden;
}

.jai-detail-modal[hidden],
.jai-detail-modal__content[hidden] {
  display: none !important;
}

.jai-detail-modal {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}

.jai-detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 22, 26, 0.84);
  backdrop-filter: blur(10px);
}

.jai-detail-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 26px;
  color: #173d3c;
  background: #f7faf6;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.45);
}

.jai-detail-modal__close {
  position: sticky;
  z-index: 4;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #176f68;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.jai-detail-modal__header {
  padding-right: 55px;
  margin-bottom: 25px;
}

.jai-detail-modal__header > span {
  color: #17736b;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jai-detail-modal__header h2 {
  margin: 5px 0 8px;
  color: #173d3c;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.jai-detail-modal__header p {
  max-width: 720px;
  margin: 0;
  color: #617172;
}

.jai-detail-modal__species-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.jai-species-card {
  overflow: hidden;
  border: 1px solid rgba(16, 42, 42, 0.12);
  border-radius: 18px;
  background: #ffffff;
}

.jai-species-card__image {
  min-height: 145px;
  background:
    linear-gradient(
      145deg,
      rgba(22, 111, 104, 0.72),
      rgba(6, 52, 58, 0.42)
    ),
    var(--species-image)
    center / cover
    no-repeat;
}

.jai-species-card__body {
  padding: 18px;
}

.jai-species-card__body > span {
  color: #17736b;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jai-species-card__body h3 {
  margin: 7px 0 0;
  color: #173d3c;
}

.jai-species-card__body em {
  display: block;
  margin-top: 2px;
  color: #718082;
  font-size: 0.78rem;
}

.jai-species-card__body p {
  margin: 10px 0 0;
  color: #617172;
  font-size: 0.79rem;
  line-height: 1.55;
}

.jai-detail-modal__info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.jai-detail-modal__info-grid article {
  padding: 22px;
  border: 1px solid rgba(16, 42, 42, 0.12);
  border-radius: 18px;
  background: #ffffff;
}

.jai-detail-modal__info-grid h3 {
  margin: 25px 0 8px;
  color: #173d3c;
}

.jai-detail-modal__info-grid p {
  margin: 0;
  color: #617172;
  font-size: 0.84rem;
  line-height: 1.6;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
  .jai-law-grid {
    grid-template-columns: 1fr 1fr;
  }

  .jai-pillar-grid,
  .jai-category-grid {
    grid-template-columns: 1fr;
  }

  .jai-detail-modal__species-grid,
  .jai-detail-modal__info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .jai-page__hero {
    min-height: auto;
    padding: 140px 0 58px;
  }

  .jai-page__hero h1 {
    font-size: clamp(2.7rem, 13vw, 4.4rem);
  }

  .jai-page__hero-description {
    font-size: 0.92rem;
  }

  .jai-page__hero-note {
    border-radius: 18px;
  }

  .jai-page__section {
    padding: 45px 0;
  }

  .jai-intro-card {
    padding: 23px;
  }

  .jai-law-grid,
  .jai-detail-modal__species-grid,
  .jai-detail-modal__info-grid {
    grid-template-columns: 1fr;
  }

  .jai-detail-modal {
    padding: 10px;
  }

  .jai-detail-modal__panel {
    max-height: calc(100vh - 20px);
    padding: 22px;
    border-radius: 20px;
  }
}

/* =========================================================
   TABEL TIGA PILAR JAI
========================================================= */

.jai-pillar-table-wrap {
  width: 100%;

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

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.14);
}

.jai-pillar-table {
  width: 100%;
  min-width: 900px;

  border-collapse: collapse;

  color: #173d3c;
  background: transparent;
}

.jai-pillar-table thead {
  background: #176f68;
}

.jai-pillar-table th {
  padding: 18px 20px;

  border-right: 1px solid rgba(255, 255, 255, 0.14);

  color: #ffffff;

  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.jai-pillar-table th:last-child {
  border-right: 0;
}

.jai-pillar-table td {
  padding: 21px 20px;

  border-right: 1px solid rgba(16, 42, 42, 0.09);
  border-bottom: 1px solid rgba(16, 42, 42, 0.1);

  color: #617172;

  font-size: 0.87rem;
  line-height: 1.65;
  vertical-align: top;
}

.jai-pillar-table td:last-child {
  border-right: 0;
}

.jai-pillar-table tbody tr:last-child td {
  border-bottom: 0;
}

.jai-pillar-table tbody tr {
  transition: background 0.2s ease;
}

.jai-pillar-table tbody tr:hover {
  background: #edf5f1;
}

.jai-pillar-table td strong {
  color: #176f68;

  font-size: 0.94rem;
}

.jai-pillar-table th:nth-child(1),
.jai-pillar-table td:nth-child(1) {
  width: 16%;
}

.jai-pillar-table th:nth-child(2),
.jai-pillar-table td:nth-child(2) {
  width: 19%;
}

.jai-pillar-table th:nth-child(3),
.jai-pillar-table td:nth-child(3) {
  width: 28%;
}

.jai-pillar-table th:nth-child(4),
.jai-pillar-table td:nth-child(4) {
  width: 37%;
}

.jai-pillar-note {
  max-width: 900px;

  margin: 20px auto 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.88rem;
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 700px) {
  .jai-pillar-table-wrap {
    border-radius: 18px;
  }

  .jai-pillar-table {
    min-width: 820px;
  }

  .jai-pillar-table th,
  .jai-pillar-table td {
    padding: 16px;
  }

  .jai-pillar-note {
    font-size: 0.82rem;
  }
}

/* =========================================================
   ALIGNMENT FINAL TUJUAN DAN WILAYAH
========================================================= */

.about-v2__dual-grid {
  align-items: stretch;
}

.about-v2__panel {
  display: flex;
  height: 100%;
  flex-direction: column;
}

/* Header kedua panel wajib punya tinggi yang sama */

.about-v2__panel-banner {
  display: grid;

  height: 172px;
  min-height: 172px;

  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 20px;

  margin: 0 0 24px;
  padding: 0;
}

/* Kotak dan SVG tepat di tengah */

.about-v2__panel-banner-icon {
  display: grid;
  place-items: center;

  align-self: center;

  width: 64px;
  height: 64px;
  min-width: 64px;

  margin: 0;
  padding: 0;
}

.about-v2__panel-banner-icon svg {
  display: block;

  width: 30px;
  height: 30px;

  margin: 0;
  padding: 0;
}

/* Blok teks kedua panel */

.about-v2__panel-banner > div {
  display: flex;
  min-width: 0;

  flex-direction: column;
  justify-content: center;
}

/* Judul dibuat tepat dua baris */

.about-v2__panel-title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(2rem, 2.45vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.about-v2__panel-title > span {
  display: block;
  white-space: nowrap;
}

/* Judul kanan sedikit lebih kecil agar baris pertama muat */

.about-v2__panel-title--wilayah {
  font-size: clamp(1.85rem, 2.15vw, 2.15rem);
}

/* Jangan dorong card ke bawah secara otomatis */

.about-v2__mini-grid {
  margin-top: 0;
}

/* Mobile kembali boleh membungkus normal */

@media (max-width: 700px) {
  .about-v2__panel-banner {
    height: auto;
    min-height: 145px;

    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
  }

  .about-v2__panel-banner-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }

  .about-v2__panel-title,
  .about-v2__panel-title--wilayah {
    font-size: clamp(1.5rem, 6.5vw, 1.95rem);
  }

  .about-v2__panel-title > span {
    white-space: normal;
  }
}

/* =========================================================
   PAGE GALERI V3
========================================================= */

.gallery-v3 {
  min-height: 100vh;
  padding: 128px 0 82px;
  color: #173d3c;
  background: transparent;
}


/* HEADING GALERI */

.gallery-v3__heading {
  display: flex;
  max-width: 870px;

  align-items: flex-start;
  gap: 16px;

  margin-bottom: 34px;
}

.gallery-v3__heading-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  place-items: center;

  border-radius: 16px;

  color: #17736b;
  background: rgba(23, 115, 107, 0.1);
}

.gallery-v3__heading-icon svg {
  width: 27px;
  height: 27px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-v3__kicker {
  margin: 0 0 4px;

  color: #17736b;

  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.gallery-v3__heading h1 {
  margin: 0;

  color: #173d3c;

  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.gallery-v3__lead {
  max-width: 710px;

  margin: 8px 0 0;

  color: #687879;

  font-size: 0.92rem;
  line-height: 1.65;
}


/* GRID GALERI */

.gallery-v3__grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}


/* CARD GALERI */

.gallery-v3__card {
  display: block;
  overflow: hidden;

  padding: 0;

  border: 1px solid rgba(20, 65, 61, 0.09);
  border-radius: 20px;

  color: inherit;
  background: #ffffff;

  font: inherit;
  text-align: left;

  cursor: pointer;

  box-shadow:
    0 12px 32px rgba(12, 57, 54, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.gallery-v3__card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 22px 45px rgba(12, 57, 54, 0.14);
}

.gallery-v3__card:focus-visible {
  outline: 3px solid rgba(23, 115, 107, 0.35);
  outline-offset: 4px;
}

.gallery-v3__image {
  position: relative;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #dbe9e3,
      #bfd8cf
    );
}

.gallery-v3__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;
}

.gallery-v3__card:hover .gallery-v3__image img {
  transform: scale(1.055);
}

.gallery-v3__category {
  position: absolute;
  z-index: 2;

  top: 14px;
  left: 14px;

  padding: 7px 11px;

  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;

  color: #ffffff;
  background: rgba(5, 50, 51, 0.72);

  backdrop-filter: blur(8px);

  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-v3__content {
  padding: 20px 21px 22px;
}

.gallery-v3__content h2 {
  margin: 0 0 9px;

  color: #173d3c;

  font-size: 1.08rem;
  line-height: 1.35;
}

.gallery-v3__content p {
  display: -webkit-box;
  overflow: hidden;

  margin: 0;

  color: #697879;

  font-size: 0.82rem;
  line-height: 1.65;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* POPUP GALERI */

body.gallery-v3-modal-open {
  overflow: hidden;
}

.gallery-v3-modal[hidden] {
  display: none !important;
}

.gallery-v3-modal {
  position: fixed;
  z-index: 6000;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 22px;
}

.gallery-v3-modal__backdrop {
  position: absolute;

  inset: 0;

  background: rgba(3, 27, 29, 0.84);

  backdrop-filter: blur(10px);
}

.gallery-v3-modal__panel {
  position: relative;
  z-index: 1;

  width: min(1080px, 100%);
  max-height: calc(100vh - 44px);

  overflow-y: auto;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 26px;

  background: #ffffff;

  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.46);
}

.gallery-v3-modal__close {
  position: absolute;
  z-index: 3;

  top: 17px;
  right: 17px;

  display: grid;
  width: 43px;
  height: 43px;

  place-items: center;

  border: 0;
  border-radius: 50%;

  color: #ffffff;
  background: rgba(6, 55, 57, 0.9);

  font-size: 1.7rem;
  line-height: 1;

  cursor: pointer;
}

.gallery-v3-modal__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(330px, 0.75fr);

  min-height: 560px;
}

.gallery-v3-modal__image {
  min-height: 560px;

  overflow: hidden;

  border-radius: 25px 0 0 25px;

  background:
    linear-gradient(
      135deg,
      #dbe9e3,
      #bfd8cf
    );
}

.gallery-v3-modal__image img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 560px;

  object-fit: cover;
}

.gallery-v3-modal__content {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding: 64px 38px 40px;
}

.gallery-v3-modal__category {
  display: inline-flex;
  align-self: flex-start;

  padding: 7px 11px;

  border-radius: 999px;

  color: #17736b;
  background: rgba(23, 115, 107, 0.1);

  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gallery-v3-modal__content h2 {
  margin: 16px 0 18px;

  color: #173d3c;

  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.gallery-v3-modal__meta {
  display: grid;
  gap: 12px;

  margin-bottom: 22px;
  padding: 17px 0;

  border-top: 1px solid rgba(20, 65, 61, 0.1);
  border-bottom: 1px solid rgba(20, 65, 61, 0.1);
}

.gallery-v3-modal__meta div {
  display: grid;

  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.gallery-v3-modal__meta span {
  color: #8a9695;

  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.gallery-v3-modal__meta strong {
  color: #294e4b;

  font-size: 0.86rem;
}

.gallery-v3-modal__description {
  margin: 0;

  color: #617172;

  font-size: 0.9rem;
  line-height: 1.75;
}


/* RESPONSIVE GALERI */

@media (max-width: 1000px) {
  .gallery-v3__grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-v3-modal__layout {
    grid-template-columns: 1fr;
  }

  .gallery-v3-modal__image,
  .gallery-v3-modal__image img {
    min-height: 400px;
  }

  .gallery-v3-modal__image {
    border-radius: 25px 25px 0 0;
  }
}

@media (max-width: 650px) {
  .gallery-v3 {
    padding: 105px 0 66px;
  }

  .gallery-v3__heading {
    gap: 13px;
  }

  .gallery-v3__heading-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .gallery-v3__heading h1 {
    font-size: 1.65rem;
  }

  .gallery-v3__grid {
    grid-template-columns: 1fr;
  }

  .gallery-v3-modal {
    padding: 10px;
  }

  .gallery-v3-modal__panel {
    max-height: calc(100vh - 20px);

    border-radius: 20px;
  }

  .gallery-v3-modal__image,
  .gallery-v3-modal__image img {
    min-height: 280px;
  }

  .gallery-v3-modal__image {
    border-radius: 19px 19px 0 0;
  }

  .gallery-v3-modal__content {
    padding: 32px 23px 27px;
  }
}


/* =========================================================
   PAGE BLOG V3
========================================================= */

.blog-v3 {
  min-height: 100vh;
  padding: 128px 0 84px;
  color: #173d3c;
  background: transparent;
}


/* HEADING BLOG */

.blog-v3__heading {
  display: flex;
  max-width: 880px;

  align-items: flex-start;
  gap: 16px;

  margin-bottom: 38px;
}

.blog-v3__heading-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  place-items: center;

  border-radius: 16px;

  color: #17736b;
  background: rgba(23, 115, 107, 0.1);
}

.blog-v3__heading-icon svg {
  width: 27px;
  height: 27px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-v3__kicker {
  margin: 0 0 4px;

  color: #17736b;

  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.blog-v3__heading h1 {
  margin: 0;

  color: #173d3c;

  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.blog-v3__lead {
  max-width: 700px;

  margin: 8px 0 0;

  color: #687879;

  font-size: 0.93rem;
  line-height: 1.65;
}


/* ARTIKEL UTAMA */

.blog-v3__featured {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(320px, 0.88fr);

  overflow: hidden;

  margin-bottom: 24px;

  border: 1px solid rgba(20, 65, 61, 0.09);
  border-radius: 24px;

  background: #ffffff;

  box-shadow:
    0 16px 42px rgba(12, 57, 54, 0.09);
}

.blog-v3__featured-visual {
  position: relative;

  min-height: 390px;

  padding: 34px;

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(202, 235, 139, 0.38),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #0a7971,
      #063d45 72%
    );
}

.blog-v3__featured-visual::before,
.blog-v3__featured-visual::after {
  content: "";

  position: absolute;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.blog-v3__featured-visual::before {
  width: 310px;
  height: 310px;

  right: -85px;
  bottom: -130px;
}

.blog-v3__featured-visual::after {
  width: 190px;
  height: 190px;

  right: 40px;
  bottom: -75px;
}

.blog-v3__featured-label {
  position: relative;
  z-index: 1;

  display: inline-flex;

  padding: 7px 11px;

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-v3__featured-visual strong {
  position: absolute;
  z-index: 1;

  right: 34px;
  bottom: 34px;
  left: 34px;

  font-size: clamp(2rem, 4vw, 4.3rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.blog-v3__featured-content {
  display: flex;

  flex-direction: column;
  justify-content: center;

  padding: 38px;
}

.blog-v3__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;

  margin-bottom: 14px;

  color: #738180;

  font-size: 0.75rem;
  font-weight: 700;
}

.blog-v3__featured-content h2,
.blog-v3__card h2 {
  color: #173d3c;
}

.blog-v3__featured-content h2 {
  margin: 0 0 15px;

  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.blog-v3__featured-content p,
.blog-v3__card p {
  color: #647374;
}

.blog-v3__featured-content p {
  margin: 0;

  font-size: 0.92rem;
  line-height: 1.72;
}

.blog-v3__open {
  display: inline-flex;

  align-items: center;
  gap: 8px;
  align-self: flex-start;

  margin-top: 24px;
  padding: 0;

  border: 0;

  color: #17736b;
  background: transparent;

  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;

  cursor: pointer;
}


/* GRID ARTIKEL */

.blog-v3__grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.blog-v3__card {
  display: flex;
  min-height: 330px;

  flex-direction: column;

  overflow: hidden;

  padding: 0;

  border: 1px solid rgba(20, 65, 61, 0.09);
  border-radius: 22px;

  color: inherit;
  background: #ffffff;

  font: inherit;
  text-align: left;

  cursor: pointer;

  box-shadow:
    0 12px 32px rgba(12, 57, 54, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.blog-v3__card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 22px 45px rgba(12, 57, 54, 0.14);
}

.blog-v3__card:focus-visible,
.blog-v3__open:focus-visible {
  outline: 3px solid rgba(23, 115, 107, 0.35);
  outline-offset: 4px;
}

.blog-v3__cover {
  position: relative;

  min-height: 180px;

  padding: 24px;

  overflow: hidden;

  color: #ffffff;
}

.blog-v3__cover--species {
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(255, 219, 128, 0.35),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #b85d36,
      #68392f
    );
}

.blog-v3__cover--monitoring {
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(201, 239, 138, 0.34),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #167569,
      #07505a
    );
}

.blog-v3__cover::before,
.blog-v3__cover::after {
  content: "";

  position: absolute;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.blog-v3__cover::before {
  width: 200px;
  height: 200px;

  right: -60px;
  bottom: -105px;
}

.blog-v3__cover::after {
  width: 120px;
  height: 120px;

  right: 35px;
  bottom: -65px;
}

.blog-v3__cover span {
  position: relative;
  z-index: 1;

  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-v3__card-content {
  display: flex;
  height: 100%;

  flex-direction: column;

  padding: 24px;
}

.blog-v3__card h2 {
  margin: 0 0 12px;

  font-size: 1.25rem;
  line-height: 1.35;
}

.blog-v3__card p {
  display: -webkit-box;
  overflow: hidden;

  margin: 0;

  font-size: 0.85rem;
  line-height: 1.68;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.blog-v3__card .blog-v3__open {
  margin-top: auto;
  padding-top: 22px;
}


/* LINK GALERI DI BLOG */

.blog-v3__gallery-link {
  display: flex;

  align-items: center;
  justify-content: space-between;
  gap: 24px;

  margin-top: 24px;
  padding: 24px 26px;

  border: 1px solid rgba(23, 115, 107, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.7);
}

.blog-v3__gallery-link h2 {
  margin: 0 0 4px;

  color: #173d3c;

  font-size: 1.25rem;
}

.blog-v3__gallery-link p {
  margin: 0;

  color: #6b7979;

  font-size: 0.84rem;
}

.blog-v3__gallery-link a {
  display: inline-flex;
  flex: 0 0 auto;

  align-items: center;
  gap: 8px;

  color: #17736b;

  font-size: 0.86rem;
  font-weight: 850;
}


/* POPUP BLOG */

body.blog-v3-modal-open {
  overflow: hidden;
}

.blog-v3-modal[hidden] {
  display: none !important;
}

.blog-v3-modal {
  position: fixed;
  z-index: 6000;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 22px;
}

.blog-v3-modal__backdrop {
  position: absolute;

  inset: 0;

  background: rgba(3, 27, 29, 0.84);

  backdrop-filter: blur(10px);
}

.blog-v3-modal__panel {
  position: relative;
  z-index: 1;

  width: min(820px, 100%);
  max-height: calc(100vh - 44px);

  overflow-y: auto;

  padding: 42px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;

  background: #ffffff;

  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.46);
}

.blog-v3-modal__close {
  position: sticky;
  z-index: 2;

  top: 0;
  float: right;

  display: grid;
  width: 43px;
  height: 43px;

  margin: -10px -10px 8px 18px;

  place-items: center;

  border: 0;
  border-radius: 50%;

  color: #ffffff;
  background: #176f68;

  font-size: 1.7rem;
  line-height: 1;

  cursor: pointer;
}

.blog-v3-modal__category {
  display: inline-flex;

  padding: 7px 11px;

  border-radius: 999px;

  color: #17736b;
  background: rgba(23, 115, 107, 0.1);

  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-v3-modal__panel h2 {
  margin: 16px 0 12px;

  color: #173d3c;

  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.blog-v3-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;

  margin-bottom: 22px;
  padding-bottom: 18px;

  border-bottom: 1px solid rgba(20, 65, 61, 0.1);

  color: #778584;

  font-size: 0.78rem;
  font-weight: 700;
}

.blog-v3-modal__intro,
.blog-v3-modal__extra {
  color: #617172;

  font-size: 0.94rem;
  line-height: 1.78;
}

.blog-v3-modal__intro {
  margin: 0 0 18px;

  font-weight: 650;
}

.blog-v3-modal__extra {
  margin: 0;
}


/* RESPONSIVE BLOG */

@media (max-width: 850px) {
  .blog-v3__featured {
    grid-template-columns: 1fr;
  }

  .blog-v3__featured-visual {
    min-height: 300px;
  }
}

@media (max-width: 650px) {
  .blog-v3 {
    padding: 105px 0 66px;
  }

  .blog-v3__heading {
    gap: 13px;
  }

  .blog-v3__heading-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .blog-v3__heading h1 {
    font-size: 1.7rem;
  }

  .blog-v3__featured-content {
    padding: 25px;
  }

  .blog-v3__grid {
    grid-template-columns: 1fr;
  }

  .blog-v3__gallery-link {
    align-items: flex-start;
    flex-direction: column;
  }

  .blog-v3-modal {
    padding: 10px;
  }

  .blog-v3-modal__panel {
    max-height: calc(100vh - 20px);

    padding: 24px;

    border-radius: 20px;
  }
}

.jai-detail-modal__info-grid--zones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 650px) {
  .jai-detail-modal__info-grid--zones {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   REVISI FINAL POPUP JAI: DETAIL RINGKAS + FOTO ZONA
========================================================= */

/* Tombol X benar-benar di tengah */
.jai-detail-modal__close {
  position: sticky;
  z-index: 10;
  top: 0;
  float: right;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  color: transparent !important;
  background: #16837c;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.jai-detail-modal__close::before,
.jai-detail-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 2.5px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
}

.jai-detail-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.jai-detail-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.jai-detail-modal__close:hover {
  background: #0d665f;
  transform: scale(1.06);
}

/* Kartu ikan ringkas; detail baru terbuka saat diklik */
.jai-detail-modal__species-grid {
  align-items: start;
}

.jai-species-card {
  height: auto !important;
  overflow: hidden;
}

.jai-species-card__image {
  display: block;
  width: 100%;
  height: 210px;
  min-height: 210px;
  overflow: hidden;
  background: #dbe9e3 !important;
}

.jai-species-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}

.jai-species-card:hover .jai-species-card__image img {
  transform: scale(1.045);
}

.jai-species-card__body {
  display: flex;
  height: auto;
  flex-direction: column;
  padding: 20px;
}

.jai-species-card__body > span {
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  color: #08786f;
  background: #e8f3f1;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jai-species-card__body h3 {
  margin: 15px 0 2px;
  color: #073d3d;
  font-size: 1.25rem;
  line-height: 1.2;
}

.jai-species-card__body em {
  display: block;
  color: #748385;
  font-size: 0.82rem;
}

.jai-species-card__summary {
  margin: 15px 0 0 !important;
  color: #526b6c !important;
  font-size: 0.84rem !important;
  line-height: 1.65 !important;
}

.jai-species-card__detail {
  width: 100%;
  margin-top: 17px;
  border-top: 1px solid rgba(16, 42, 42, 0.12);
}

.jai-species-card__detail summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 11px;
  color: #08786f;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.jai-species-card__detail summary::-webkit-details-marker {
  display: none;
}

.jai-species-card__detail-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #14857d;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.25s ease;
}

.jai-species-card__detail[open] .jai-species-card__detail-arrow {
  transform: rotate(45deg);
}

.jai-species-card__facts {
  display: grid;
  gap: 12px;
  margin: 3px 0 0;
  padding: 14px 0 2px;
  border-top: 1px solid rgba(16, 42, 42, 0.08);
  animation: jaiDetailOpen 0.24s ease;
}

.jai-species-card__facts > div {
  display: grid;
  gap: 3px;
}

.jai-species-card__facts dt {
  color: #08786f;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.jai-species-card__facts dd {
  margin: 0;
  color: #617172;
  font-size: 0.78rem;
  line-height: 1.58;
}

@keyframes jaiDetailOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Kartu Zona Pengawasan memakai foto JPG */
.jai-detail-modal__info-grid--zones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.jai-detail-modal__info-grid--zones .jai-zone-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(16, 42, 42, 0.12);
  border-radius: 20px;
  background: #ffffff;
}

.jai-zone-card__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #dce9e5;
}

.jai-zone-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}

.jai-zone-card:hover .jai-zone-card__image img {
  transform: scale(1.045);
}

.jai-zone-card__body {
  padding: 24px;
}

.jai-zone-card__body .jai-detail-modal__info-icon {
  margin-bottom: 20px;
}

.jai-zone-card__body h3 {
  margin: 0 0 9px;
}

.jai-zone-card__body p {
  margin: 0;
}

@media (max-width: 700px) {
  .jai-detail-modal__info-grid--zones {
    grid-template-columns: 1fr;
  }

  .jai-species-card__image,
  .jai-zone-card__image {
    height: 190px;
    min-height: 190px;
  }
}

/* RASIO SERAGAM FOTO KARTU GALERI */

.gallery-v3__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dce9e5;
}

.gallery-v3__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-v3__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.gallery-v3__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   FIX FINAL POPUP GALERI
   - frame foto selalu landscape
   - popup tidak terlalu lebar
   - tombol X benar-benar center
========================================================= */

.gallery-v3-modal__panel {
  width: min(980px, calc(100vw - 44px)) !important;
  max-height: calc(100vh - 44px);

  overflow: hidden !important;

  border-radius: 25px;
}

.gallery-v3-modal__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(300px, 1fr) !important;

  min-height: 0 !important;

  align-items: stretch;
}

/* FRAME FOTO LANDSCAPE 4:3 */

.gallery-v3-modal__image {
  width: 100%;

  min-width: 0;
  min-height: 0 !important;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: 24px 0 0 24px;

  background:
    linear-gradient(
      135deg,
      #dbe9e3,
      #bfd8cf
    );
}

.gallery-v3-modal__image img {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0 !important;

  object-fit: cover;
  object-position: center center;
}

/* BAGIAN INFORMASI */

.gallery-v3-modal__content {
  display: flex;

  min-width: 0;

  flex-direction: column;
  justify-content: center;

  overflow-y: auto;

  padding: 52px 34px 34px;
}

/* TOMBOL TUTUP */

.gallery-v3-modal__close {
  position: absolute;
  z-index: 10;

  top: 18px;
  right: 18px;

  display: flex !important;

  width: 48px;
  height: 48px;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  border: 0;
  border-radius: 50%;

  color: #ffffff;
  background: #176f6b;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.gallery-v3-modal__close span {
  position: relative;

  display: block;

  width: 20px;
  height: 20px;
}

.gallery-v3-modal__close span::before,
.gallery-v3-modal__close span::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 20px;
  height: 2.5px;

  border-radius: 999px;

  background: #ffffff;

  transform-origin: center;
}

.gallery-v3-modal__close span::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.gallery-v3-modal__close span::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}

.gallery-v3-modal__close:hover {
  background: #0d5d59;
  transform: scale(1.06);
}

.gallery-v3-modal__close:active {
  transform: scale(0.95);
}

/* TABLET DAN HP */

@media (max-width: 860px) {
  .gallery-v3-modal {
    padding: 14px;
  }

  .gallery-v3-modal__panel {
    width: min(680px, 100%) !important;
    max-height: calc(100vh - 28px);

    overflow-y: auto !important;

    border-radius: 21px;
  }

  .gallery-v3-modal__layout {
    grid-template-columns: 1fr !important;
  }

  .gallery-v3-modal__image {
    min-height: 0 !important;

    aspect-ratio: 16 / 9;

    border-radius: 20px 20px 0 0;
  }

  .gallery-v3-modal__image img {
    min-height: 0 !important;
  }

  .gallery-v3-modal__content {
    padding: 34px 25px 28px;
  }

  .gallery-v3-modal__close {
    top: 14px;
    right: 14px;

    width: 44px;
    height: 44px;
  }

  .gallery-v3-modal__close span {
    width: 18px;
    height: 18px;
  }

  .gallery-v3-modal__close span::before,
  .gallery-v3-modal__close span::after {
    width: 18px;
  }
}

@media (max-width: 500px) {
  .gallery-v3-modal {
    padding: 8px;
  }

  .gallery-v3-modal__panel {
    max-height: calc(100vh - 16px);
  }

  .gallery-v3-modal__content {
    padding: 29px 20px 24px;
  }
}

/* =========================================================
   DASAR HUKUM — EMPAT DOKUMEN
========================================================= */

.about-v2__law-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow-x: visible;
  scroll-snap-type: none;
}

@media (max-width: 900px) {
  .about-v2__law-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .about-v2__law-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FIX FINAL NAVBAR MOBILE BKHIT
   - warna sama di semua halaman
   - menu benar-benar fullscreen
   - Galeri dan Blog tidak bentrok
========================================================= */

@media (max-width: 980px) {

  /* Navbar mobile selalu konsisten */
  .site-header {
    z-index: 9999 !important;
    padding: 8px 0 !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .nav-wrap,
  .site-header:not(.scrolled) .nav-wrap,
  .site-header.scrolled .nav-wrap {
    position: relative;

    min-height: 62px !important;
    padding: 0 13px !important;

    overflow: visible !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 18px !important;

    background: rgba(4, 37, 42, 0.94) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
  }

  /* Logo dan tulisan selalu putih di mobile */
  .site-header .navbar-brand strong,
  .site-header .brand strong,
  .site-header:not(.scrolled) .navbar-brand strong,
  .site-header:not(.scrolled) .brand strong,
  .site-header.scrolled .navbar-brand strong,
  .site-header.scrolled .brand strong {
    color: #ffffff !important;
  }

  .site-header .navbar-brand small,
  .site-header .brand small,
  .site-header:not(.scrolled) .navbar-brand small,
  .site-header:not(.scrolled) .brand small,
  .site-header.scrolled .navbar-brand small,
  .site-header.scrolled .brand small {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  /* Paksa Galeri dan Blog ikut warna navbar mobile yang sama */
  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .navbar-brand strong,

  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .brand strong,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .navbar-brand strong,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .brand strong {
    color: #ffffff !important;
  }

  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .navbar-brand small,

  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .brand small,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .navbar-brand small,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .brand small {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  /* Tombol hamburger */
  .nav-toggle {
    position: relative;
    z-index: 10002 !important;

    display: block !important;

    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;

    margin: 0 !important;
    padding: 7px !important;

    border: 0 !important;
    background: transparent !important;

    cursor: pointer;
  }

  .nav-toggle span,
  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .nav-toggle span,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .nav-toggle span {
    background: #ffffff !important;
  }

  /* Menu mobile fullscreen */
  .main-nav {
    position: fixed !important;
    z-index: 10000 !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;

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

    gap: 7px !important;

    margin: 0 !important;
    padding: 88px 22px 36px !important;

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

    border: 0 !important;
    border-radius: 0 !important;

    background: rgba(3, 36, 41, 0.995) !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(100%) !important;

    transition:
      transform 0.3s ease,
      opacity 0.25s ease,
      visibility 0.3s ease !important;
  }

  .main-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateX(0) !important;
  }

  /* Semua link tetap putih saat menu dibuka */
  .main-nav .nav-link,

  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .main-nav.open
  .nav-link,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .main-nav.open
  .nav-link {
    display: flex !important;

    width: min(100%, 290px) !important;
    min-height: 48px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    color: #ffffff !important;

    font-size: 1.12rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .main-nav .nav-link:hover,
  .main-nav .nav-link.active,

  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .main-nav.open
  .nav-link:hover,

  body[data-page="galeri"]
  .site-header:not(.scrolled)
  .main-nav.open
  .nav-link.active,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .main-nav.open
  .nav-link:hover,

  body[data-page="blog"]
  .site-header:not(.scrolled)
  .main-nav.open
  .nav-link.active {
    color: #ffffff !important;
  }

  .main-nav .nav-link::after {
    right: 28% !important;
    bottom: 3px !important;
    left: 28% !important;

    background: #b7dc68 !important;
  }

  /*
    Saat menu dibuka, backdrop-filter nav-wrap dimatikan.
    Ini mencegah position:fixed terkurung di kotak navbar.
  */
  body.nav-open .nav-wrap,
  .site-header:has(.main-nav.open) .nav-wrap {
    border-color: transparent !important;
    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: none !important;

    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }

  /* Tombol hamburger berubah menjadi X di kanan atas */
  body.nav-open .nav-toggle,
  .site-header:has(.main-nav.open) .nav-toggle {
    position: fixed !important;
    z-index: 10003 !important;

    top: 15px !important;
    right: 15px !important;

    width: 46px !important;
    height: 46px !important;

    padding: 7px !important;

    border-radius: 50% !important;

    background: rgba(9, 75, 78, 0.96) !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.23) !important;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* Logo tidak menutupi menu saat menu terbuka */
  body.nav-open .navbar-brand,
  body.nav-open .brand,
  .site-header:has(.main-nav.open) .navbar-brand,
  .site-header:has(.main-nav.open) .brand {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.nav-open,
  body:has(.main-nav.open) {
    overflow: hidden !important;
  }
}


/* =========================================================
   MEDIA GAMBAR BLOG
   Hanya aturan gambar; layout card tetap memakai PAGE BLOG V3.
========================================================= */

.blog-v3__featured-visual--photo {
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  background: #dce8e3;
}

.blog-v3__featured-visual--photo::before,
.blog-v3__featured-visual--photo::after {
  display: none !important;
}

.blog-v3__featured-visual--photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  object-position: center 48%;
}

.blog-v3__featured-visual--photo .blog-v3__featured-label {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 28px;
  color: #ffffff;
  background: rgba(5, 58, 58, 0.86);
}

.blog-v3__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dce8e3;
}

.blog-v3__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-v3__card:hover .blog-v3__thumb img {
  transform: scale(1.035);
}

.blog-v3__badge {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: inline-flex;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(5, 58, 58, 0.88);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 850px) {
  .blog-v3__featured-visual--photo,
  .blog-v3__featured-visual--photo img {
    min-height: 300px;
  }

  .blog-v3__featured-visual--photo .blog-v3__featured-label {
    top: 18px;
    left: 18px;
  }
}

/* =========================================================
   FIX IKON TUJUAN MONITORING
   Kotak tetap persegi dan sama dengan ikon Wilayah Kerja
========================================================= */

.about-v2__panel-banner-icon--image {
  display: grid !important;
  place-items: center !important;

  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;

  flex: 0 0 64px !important;
  aspect-ratio: 1 / 1;

  margin: 0 !important;
  padding: 5px !important;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.08);

  box-sizing: border-box;
}

.about-v2__panel-banner-icon--image img {
  display: block;

  width: 88% !important;
  height: 88% !important;
  max-width: none !important;

  object-fit: contain;
  object-position: center;

  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));

  opacity: 0.97;
}

@media (max-width: 700px) {
  .about-v2__panel-banner-icon--image {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    flex-basis: 54px !important;

    padding: 4px !important;
    border-radius: 16px;
  }

  .about-v2__panel-banner-icon--image img {
    width: 88% !important;
    height: 88% !important;
  }
}

/* =========================================================
   IKON PENGENDALIAN — FINAL
========================================================= */

.about-v2__mini-card--pengendalian {
  align-items: flex-start;
}

.about-v2__mini-icon--pengendalian {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(143, 228, 173, 0.2) !important;
  border-radius: 11px !important;
  background: rgba(143, 228, 173, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  box-sizing: border-box !important;
}

.about-v2__mini-icon-inner {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(4, 48, 51, 0.24);
}

.about-v2__mini-icon--pengendalian > img,
.about-v2__mini-icon--pengendalian .about-v2__mini-icon-inner img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* =========================================================
   FIX MOBILE: MODAL JAI + DASAR HUKUM
   1. Popup/tombol tutup JAI berada di atas navbar.
   2. Kartu Dasar Hukum tidak gepeng dan tersusun satu kolom di HP.
========================================================= */

/* Navbar mobile memakai z-index tinggi, jadi modal harus lebih tinggi. */
.jai-detail-modal {
  z-index: 20000 !important;
}

.jai-detail-modal__backdrop {
  z-index: 0 !important;
}

.jai-detail-modal__panel {
  z-index: 1 !important;
}

.jai-detail-modal__close {
  z-index: 3 !important;
}

@media (max-width: 980px) {
  .jai-detail-modal {
    align-items: center !important;
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom)) !important;
  }

  .jai-detail-modal__panel {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px !important;
  }

  .jai-detail-modal__close {
    position: sticky !important;
    top: 0 !important;
    float: right !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 0 8px 12px !important;

    background: #16837c !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.22);
  }

  .jai-detail-modal__header {
    clear: both;
    padding-right: 0 !important;
  }
}

/* Reset aturan grid horizontal lama yang masih aktif pada tablet. */
@media (max-width: 900px) {
  .about-v2__law-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;

    width: 100% !important;
    gap: 16px !important;

    overflow: visible !important;

    padding: 3px 0 13px !important;

    scroll-snap-type: none !important;
  }

  .about-v2__law-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 330px !important;

    scroll-snap-align: none !important;
  }

  .about-v2__law-card > div:not(.about-v2__pdf-actions) {
    min-width: 0;
  }

  .about-v2__law-card h3,
  .about-v2__law-card p,
  .about-v2__law-label {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .about-v2__pdf-actions {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: auto !important;
  }

  .about-v2__pdf-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 11px 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* HP: satu dokumen per baris, lebar penuh. */
@media (max-width: 640px) {
  .about-v2__law-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;

    gap: 16px !important;
  }

  .about-v2__law-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 20px !important;
    border-radius: 19px !important;
  }

  .about-v2__law-label {
    margin-top: 20px !important;
  }

  .about-v2__law-card h3 {
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
  }

  .about-v2__law-card p {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
  }
}

/* =========================================================
   WALLPAPER FINAL — TENTANG, JAI, GALERI, BLOG
   Wallpaper sama, blur, dan overlay gelap. Navbar tidak diubah.
========================================================= */

body[data-page="tentang"],
body[data-page="jai"],
body[data-page="galeri"],
body[data-page="blog"] {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background: #062c33;
}

body[data-page="tentang"]::before,
body[data-page="jai"]::before,
body[data-page="galeri"]::before,
body[data-page="blog"]::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -26px;
  background-image:
    linear-gradient(
      180deg,
      rgba(2, 22, 26, 0.7),
      rgba(2, 28, 33, 0.84)
    ),
    url("../images/wpphome.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(8px);
  transform: scale(1.04);
  pointer-events: none;
}

.about-v2,
.jai-page,
.gallery-v3,
.blog-v3 {
  background: transparent !important;
}

.about-v2__fixed-bg,
.jai-page__fixed-bg {
  display: none !important;
}

.about-v2::before,
.jai-page::before {
  content: none !important;
}

/* Heading Galeri dan Blog tetap terbaca di atas wallpaper gelap. */
.gallery-v3__heading h1,
.blog-v3__heading h1 {
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42);
}

.gallery-v3__lead,
.blog-v3__lead {
  color: rgba(255, 255, 255, 0.82) !important;
}

.gallery-v3__kicker,
.blog-v3__kicker {
  color: #c6e881 !important;
}

.gallery-v3__heading-icon,
.blog-v3__heading-icon {
  color: #c6e881 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 38, 43, 0.74) !important;
}

/* Card Blog harus tetap putih. */
.blog-v3__featured,
.blog-v3__card,
.blog-v3__featured-content,
.blog-v3__card-content {
  background: #ffffff !important;
}

.blog-v3__featured,
.blog-v3__card {
  border-color: rgba(20, 65, 61, 0.09) !important;
}

.blog-v3__featured-content h2,
.blog-v3__card-content h2,
.blog-v3__card h2 {
  color: #173d3c !important;
}

.blog-v3__featured-content p,
.blog-v3__card-content p,
.blog-v3__card p {
  color: #647374 !important;
}

.blog-v3__meta {
  color: #738180 !important;
}

.blog-v3__open {
  color: #17736b !important;
}

.blog-v3__gallery-link {
  border-color: rgba(23, 115, 107, 0.12) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

@media (max-width: 700px) {
  body[data-page="tentang"]::before,
  body[data-page="jai"]::before,
  body[data-page="galeri"]::before,
  body[data-page="blog"]::before {
    inset: -20px;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 20, 24, 0.74),
        rgba(2, 26, 31, 0.88)
      ),
      url("../images/wpphome.png");
    background-position: center top;
    filter: blur(7px);
    transform: scale(1.05);
  }
}