:root {
  --primary-950:#0c2b1a;
  --primary-900:#123b24;
  --primary-800:#174c2d;
  --primary-700:#1f623a;
  --primary-600:#267846;
  --primary-100:#e9f2ec;
  --primary-050:#f5f8f6;
  --accent:#b68a2b;
  --accent-soft:#f5ecd5;
  --text:#1e2a22;
  --muted:#667169;
  --border:#d8dfda;
  --white:#fff;
  --surface:#f6f8f6;
  --container:1180px;
  --header-height:72px;
  --shadow:0 16px 38px rgba(18,59,36,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;color:var(--text);background:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.65}
body.menu-open{overflow:hidden}
img{display:block;width:100%;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);background:rgba(255,255,255,.98);box-shadow:0 3px 16px rgba(0,0,0,.04)}
.navbar{display:flex;min-height:var(--header-height);align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;min-width:268px;align-items:center;gap:12px}
.brand__logo{width:auto;max-width:54px;height:54px;object-fit:contain;flex:0 0 auto}
.brand__title{display:block;color:var(--primary-900);font-size:1rem;font-weight:800;letter-spacing:.01em}
.brand__subtitle{display:block;margin-top:1px;color:var(--muted);font-size:.69rem}
.main-nav{display:flex;align-items:center;gap:0}
.main-nav a{display:flex;min-height:72px;align-items:center;padding:0 10px;border-bottom:3px solid transparent;color:#344139;font-size:.79rem;font-weight:700;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{color:var(--primary-800);border-bottom-color:var(--primary-700);background:var(--primary-050)}
.menu-toggle{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--border);border-radius:4px;color:var(--primary-900);background:var(--white);cursor:pointer}
.mobile-menu{position:fixed;inset:var(--header-height) 0 auto;z-index:999;display:none;max-height:calc(100dvh - var(--header-height));overflow-y:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--white)}
.mobile-menu.open{display:block}.mobile-menu nav{display:grid;padding:10px 16px 18px}.mobile-menu a{display:flex;min-height:46px;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0ee;color:#344139;font-weight:700}
.hero{position:relative;min-height:440px;color:var(--white);background:linear-gradient(90deg, rgba(8, 38, 27, 0.82) 0%, rgba(8, 38, 27, 0.63) 45%, rgba(8, 38, 27, 0.24) 100%), url('../img/Merbabu.png') center/cover no-repeat;overflow:hidden}
.hero::after{position:absolute;inset:auto 0 0;height:80px;background:linear-gradient(transparent,rgba(4,25,14,.22));content:''}
.hero__content{position:relative;z-index:2;max-width:790px;padding:84px 0 105px}
.hero__label{display:inline-block;margin-bottom:10px;color:#e8efe9;font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.hero h1{margin:0 0 17px;font-size:clamp(2.75rem,6vw,4.9rem);line-height:1.03;letter-spacing:-.035em}
.hero p{max-width:690px;margin:0 0 26px;color:#e8f0ea;font-size:1.04rem}
.button-row{display:flex;flex-wrap:wrap;gap:10px}.button{display:inline-flex;min-height:45px;align-items:center;justify-content:center;gap:8px;padding:0 17px;border:1px solid transparent;border-radius:4px;font-weight:800;cursor:pointer;transition:.2s ease}.button--primary{color:var(--white);background:var(--primary-600)}.button--primary:hover{background:var(--primary-700);transform:translateY(-1px)}.button--light{color:var(--primary-900);background:var(--white)}
.statistics{position:relative;z-index:4;margin-top:-48px}.statistics__grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);background:var(--white);box-shadow:var(--shadow)}.statistic{min-height:112px;padding:21px;border-right:1px solid var(--border)}.statistic:last-child{border-right:0}.statistic__label{display:block;color:var(--muted);font-size:.77rem}.statistic__value{display:block;margin:5px 0 2px;color:var(--primary-900);font-size:1.82rem;font-weight:800;line-height:1}.statistic__unit{color:var(--muted);font-size:.74rem}
.section{padding:70px 0}.section--light{background:var(--primary-050)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:27px;padding-bottom:12px;border-bottom:2px solid var(--primary-100)}.section-heading.compact{margin-bottom:20px}.section-heading__text{max-width:770px}.section-kicker{display:block;margin-bottom:4px;color:var(--primary-700);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}h2{margin:0 0 8px;color:var(--primary-900);font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.18}h3{color:var(--primary-900)}.section-heading p{margin:0;color:var(--muted)}
.panel{border:1px solid var(--border);border-radius:5px;background:var(--white);box-shadow:0 5px 18px rgba(18,59,36,.035)}.panel__body{padding:25px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.intro-layout{display:grid;gap:24px}
.intro-welcome-text{font-size:.95rem;line-height:1.7;color:#3f4b43;margin:0;max-width:980px}
.history-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.history-emblem{width:85px;height:95px;object-fit:contain;border-radius:4px;flex:0 0 auto;padding:4px;background:var(--white);border:1px solid var(--border);box-shadow:0 2px 8px rgba(18,59,36,.04)}
.history-content{max-width:980px}
.history-content p{margin:0 0 16px;color:#3f4b43;font-size:.92rem;line-height:1.7}
.history-content p:last-child{margin-bottom:0}
.intro-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.intro-stat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 10px;background:var(--primary-050);border:1px solid var(--border);border-radius:5px;box-shadow:0 3px 10px rgba(18,59,36,.03)}
.intro-stat-card__icon{color:var(--primary-700);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.intro-stat-card__info strong{display:block;color:var(--primary-900);font-size:1.4rem;font-weight:800;line-height:1.1}
.intro-stat-card__info span{display:block;color:var(--muted);font-size:.78rem;font-weight:700;margin-top:2px}
.info-table{width:100%;border-collapse:collapse}.info-table th,.info-table td{padding:12px 13px;border:1px solid var(--border);text-align:left;vertical-align:top}.info-table th{width:35%;color:var(--primary-900);background:var(--primary-050);font-size:.84rem}.info-table td{color:#3f4b43;font-size:.87rem}.profile-layout{display:grid;grid-template-columns:.82fr 1.18fr;align-items:start;gap:22px}.profile-title{margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--primary-100);color:var(--primary-900);font-size:1.13rem}.identity-table th{width:42%}.profile-content{display:grid;gap:16px}.profile-content__item{padding-bottom:14px;border-bottom:1px solid var(--border)}.profile-content__item:last-child{padding-bottom:0;border-bottom:0}.profile-content__item h4{margin:0 0 5px;color:var(--primary-800);font-size:.94rem}.profile-content__item p{margin:0;color:#48534c;font-size:.87rem}
.org-chart{display:flex;flex-direction:column;align-items:center;width:100%}
.official-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;border:1px solid var(--border);border-radius:5px;background:var(--white);box-shadow:0 5px 18px rgba(18,59,36,.035);width:100%;min-height:76px;box-sizing:border-box}
.official-card h3{margin:3px 0 0;font-size:.9rem;line-height:1.3;color:var(--primary-900)}
.official-card__role{color:var(--primary-700);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.official-card--featured{width:min(100%,360px);padding:18px 20px;border-top:4px solid var(--accent);min-height:82px}
.official-card--featured h3{font-size:1rem}
.official-card--rw{width:min(100%,320px);border-top:3px solid var(--primary-700)}
.org-line{width:2px;height:24px;background:var(--border);flex:0 0 auto}
.org-branches{display:flex;justify-content:center;gap:28px;width:100%;max-width:920px;position:relative;padding-top:20px}
.org-branches::before{content:'';position:absolute;top:0;left:calc(25% - 7px);right:calc(25% - 7px);height:20px;border-top:2px solid var(--border)}
.org-branch{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;position:relative}
.org-branch::before{content:'';position:absolute;top:0;left:50%;width:2px;height:20px;background:var(--border);transform:translateX(-50%)}
.org-subgrid{display:flex;gap:14px;width:100%;position:relative;padding-top:20px}
.org-subgrid::before{content:'';position:absolute;top:0;left:calc(25% - 3.5px);right:calc(25% - 3.5px);height:20px;border-top:2px solid var(--border)}
.org-subgrid .official-card{flex:1;min-width:0;position:relative}
.org-subgrid .official-card::before{content:'';position:absolute;top:-20px;left:50%;width:2px;height:20px;background:var(--border);transform:translateX(-50%)}
.data-box{padding:20px;border-top:4px solid var(--primary-700)}.data-box span{display:block;color:var(--muted);font-size:.76rem}.data-box strong{display:block;margin-top:4px;color:var(--primary-900);font-size:1.75rem}.data-box small{color:var(--primary-700);font-size:.74rem;font-weight:700}.data-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:20px;margin-top:20px}.gender-bar{display:flex;min-height:55px;overflow:hidden;border-radius:3px;color:#fff;font-size:.75rem;font-weight:800}.gender-bar span{display:flex;align-items:center;justify-content:center;padding:8px;text-align:center}.gender-bar__male{background:#28689b}.gender-bar__female{background:#a94c79}.data-note{margin:15px 0 0;color:var(--muted);font-size:.82rem}.table-wrap{overflow-x:auto}.population-table th,.population-table td{text-align:center}.population-table td:first-child,.population-table th:first-child{text-align:left}.population-table tfoot th{background:var(--primary-100)}.data-source{margin:14px 0 0;color:var(--muted);font-size:.79rem}
.potential-card{overflow:hidden;border:1px solid var(--border);border-radius:5px;background:var(--white);box-shadow:0 8px 22px rgba(18,59,36,.06)}.potential-card img{height:190px;object-fit:cover;background:var(--primary-050)}.potential-card>div{padding:19px}.potential-card h3{margin:10px 0 7px;font-size:1.08rem}.potential-card p{margin:0;color:var(--muted);font-size:.87rem}.notice-box{margin-top:18px;padding:15px 17px;border:1px solid #e7d69c;color:#5f5537;background:#fff9e8;font-size:.85rem}
.gallery-filter{display:flex;flex-wrap:wrap;gap:7px}.gallery-filter__button{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:#4a574f;background:var(--white);font-size:.74rem;font-weight:800;cursor:pointer}.gallery-filter__button.active{color:#fff;border-color:var(--primary-700);background:var(--primary-700)}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.gallery-item{margin:0;overflow:hidden;border:1px solid var(--border);border-radius:5px;background:var(--white);transition:.2s ease}.gallery-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.gallery-item.hidden{display:none}.gallery-item img{height:190px;object-fit:cover;background:#eaf0ec}.gallery-item figcaption{display:grid;gap:2px;padding:11px 12px}.gallery-item figcaption strong{color:#37443b;font-size:.82rem}.gallery-item figcaption span{color:var(--muted);font-size:.7rem;line-height:1.4}
.map-cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px;padding:27px;border-left:5px solid var(--primary-700);background:linear-gradient(90deg,#fff,var(--primary-050))}.map-cta h2{font-size:1.72rem}.map-cta p{margin:0;color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1fr .82fr;gap:22px}.contact-list{display:grid;gap:16px}.contact-item{padding-bottom:14px;border-bottom:1px solid var(--border)}.contact-item:last-child{padding-bottom:0;border-bottom:0}.contact-item strong{display:block;margin-bottom:3px;color:var(--primary-900)}.contact-item p{margin:0;color:var(--muted)}.contact-action{padding:27px;color:var(--white);background:var(--primary-900)}.contact-action h3{margin-top:0;color:var(--white)}.contact-action p{color:#d9e5dc}.contact-action .button{width:100%;margin-top:10px}
.site-footer{color:#dce7df;background:var(--primary-900)}.site-footer__main{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:32px;padding:46px 0 30px}.site-footer h3{margin-top:0;color:var(--white);font-size:1rem}.site-footer p,.site-footer a{color:#c5d4c9;font-size:.84rem}.footer-links{display:grid;gap:7px}.site-footer__bottom{padding:15px;border-top:1px solid rgba(255,255,255,.12);color:#9fb0a3;font-size:.76rem;text-align:center}
@media(max-width:1100px){.main-nav{display:none}.menu-toggle{display:grid}.brand{min-width:0}.grid-4,.gallery-grid{grid-template-columns:repeat(2,1fr)}.profile-layout,.contact-grid,.data-layout{grid-template-columns:1fr}.site-footer__main{grid-template-columns:1fr 1fr}}
@media(max-width:700px){:root{--header-height:60px}html{scroll-padding-top:70px}.container{width:min(100% - 24px,var(--container))}.navbar{min-height:60px}.brand__logo{width:38px;height:42px}.brand__title{font-size:.88rem}.brand__subtitle{display:none}.hero{min-height:380px;background-position:center center}.hero__content{padding:61px 0 92px}.hero h1{font-size:2.8rem}.hero p{font-size:.92rem}.button-row{display:grid;grid-template-columns:1fr 1fr}.statistics{margin-top:-34px}.statistics__grid{grid-template-columns:repeat(2,1fr)}.statistic{min-height:94px;padding:15px;border-bottom:1px solid var(--border)}.statistic:nth-child(2n){border-right:0}.statistic:nth-child(n+3){border-bottom:0}.statistic__value{font-size:1.45rem}.section{padding:52px 0}.section-heading{align-items:start;flex-direction:column;gap:10px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.welcome-card{grid-template-columns:82px 1fr;gap:14px}.welcome-card__photo{width:82px;height:103px}.news-item{grid-template-columns:88px 1fr}.news-item img{width:88px;height:70px}.info-table th,.info-table td{font-size:.8rem}.org-branches{flex-direction:column;align-items:center;gap:0;padding-top:0}.org-branches::before,.org-branch::before,.org-subgrid::before,.org-subgrid .official-card::before{display:none}.org-branch{width:100%;padding-top:0}.org-branch + .org-branch{margin-top:20px;padding-top:20px;position:relative}.org-branch + .org-branch::after{content:'';position:absolute;top:0;left:50%;width:2px;height:20px;background:var(--border);transform:translateX(-50%)}.org-subgrid{flex-direction:column;align-items:center;gap:10px;padding-top:20px}.org-subgrid .official-card{width:100%;max-width:320px}.intro-stats-grid{grid-template-columns:repeat(2,1fr)}.data-grid-mobile{grid-template-columns:repeat(2,1fr)}.gender-bar{flex-direction:column}.gender-bar span{width:100%!important}.potential-card img{height:170px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-item img{height:145px}.map-cta{grid-template-columns:1fr;padding:21px}.map-cta .button{width:100%}.site-footer__main{grid-template-columns:1fr;gap:22px}}
@media(max-width:410px){.button-row{grid-template-columns:1fr}.intro-stats-grid{grid-template-columns:1fr}.data-grid-mobile,.gallery-grid{grid-template-columns:1fr}.gallery-item img{height:190px}}