:root{--forest:#075b3a;--emerald:#0c7a4b;--gold:#d5a832;--ink:#17221c;--muted:#56645c;--mist:#f3f7f4;--white:#fff;--line:#dce6df;--shadow:0 12px 36px rgba(8,50,32,.10);--radius:18px}.container{width:min(1200px,calc(100% - 2rem));margin-inline:auto}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;background:#fff;color:#000;padding:.75rem 1rem}.skip-link:focus{top:1rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.7}a{color:var(--forest);text-decoration-thickness:.08em;text-underline-offset:.18em}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}img{max-width:100%;height:auto}.service-strip{background:#063f2a;color:#fff;font-size:.82rem}.service-strip .container{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.service-strip a{color:#fff}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.header-inner{min-height:78px;display:flex;align-items:center;gap:2rem}.brand{display:flex;align-items:center;gap:.75rem}.custom-logo{width:54px;height:54px;object-fit:contain}.site-name{display:flex;flex-direction:column;text-decoration:none;color:var(--forest);font-size:1.15rem;font-weight:800;line-height:1.15}.site-name small{font-size:.78rem;color:var(--muted);font-weight:650;margin-top:.2rem}.primary-nav{margin-left:auto}.primary-nav ul{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.primary-nav a{display:block;padding:.65rem .8rem;color:var(--ink);text-decoration:none;font-weight:650;border-radius:8px}.primary-nav a:hover,.primary-nav .current-menu-item>a{background:var(--mist);color:var(--forest)}.menu-toggle{display:none;margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:1.35rem}.hero{position:relative;min-height:620px;display:grid;align-items:center;overflow:hidden;background:#062f21;color:#fff}.hero-media{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,55,36,.96) 0%,rgba(5,55,36,.78) 40%,rgba(5,55,36,.12) 72%),url('../images/hero-dinsos-pinrang.webp') center/cover no-repeat}.hero-inner{position:relative;padding-block:6rem}.hero-copy{max-width:670px}.hero h1{font-size:clamp(2.4rem,5vw,4.65rem);line-height:1.04;margin:.5rem 0 1.2rem;color:#fff;letter-spacing:-.035em}.hero p{font-size:1.12rem;max-width:58ch}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:800;color:var(--emerald);margin:0 0 .5rem}.hero .eyebrow{color:#f0ce72}.button-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.75rem}.button,.search-form button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.15rem;border:2px solid var(--forest);border-radius:10px;background:var(--forest);color:#fff;text-decoration:none;font-weight:750;cursor:pointer}.hero .button{background:var(--gold);border-color:var(--gold);color:#1d2a22}.hero .button-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}.section{padding-block:5rem}.section-soft{background:var(--mist)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:2rem}.section-head h2,.page-hero h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.12;margin:.2rem 0}.service-grid,.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.service-card,.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:transform .2s ease,box-shadow .2s ease}.service-card{padding:1.5rem}.service-card:hover,.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.service-card h2,.service-card h3,.card h3{margin:.5rem 0;font-size:1.25rem;line-height:1.35}.service-card h2 a,.service-card h3 a,.card h3 a{color:var(--ink);text-decoration:none}.service-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e7f2eb;color:var(--forest)}.text-link{font-weight:750}.card-media{display:block;aspect-ratio:16/10;background:var(--mist);overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover}.card-body{padding:1.35rem}.card-body p:last-child{color:var(--muted)}.page-hero{padding-block:4.5rem;background:linear-gradient(135deg,#edf6f0,#fff);border-bottom:1px solid var(--line)}.page-hero p{max-width:720px;font-size:1.08rem;color:var(--muted)}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:4rem;padding-block:4rem}.prose{max-width:780px}.prose h2{margin-top:2.2rem}.prose a{overflow-wrap:anywhere}.service-aside{position:relative}.notice{position:sticky;top:110px;border-radius:var(--radius);padding:1.5rem;background:var(--forest);color:#fff}.notice h2{margin-top:0;color:#fff}.updated{font-size:.85rem;color:var(--muted)}.featured-image{margin-top:2rem}.featured-image img{display:block;width:100%;max-height:680px;object-fit:cover;border-radius:var(--radius)}.content-space{padding-block:3rem}.search-form{display:flex;gap:.6rem;max-width:620px;margin-top:1.5rem}.search-form label{flex:1}.search-form input{width:100%;min-height:48px;border:1px solid #a8b8ae;border-radius:10px;padding:.65rem .85rem;font:inherit}.navigation.pagination{grid-column:1/-1;margin:2rem auto}.nav-links{display:flex;gap:.5rem;justify-content:center}.page-numbers{padding:.5rem .8rem;border:1px solid var(--line);border-radius:8px;text-decoration:none}.site-footer{padding-top:4rem;background:#063f2a;color:#dcebe2}.site-footer a{color:#fff}.footer-grid{display:grid;grid-template-columns:2fr 1.3fr 1fr;gap:3rem}.footer-title,.site-footer h2{color:#fff;font-size:1.15rem}.site-footer ul{list-style:none;padding:0;margin:0}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.18);margin-top:3rem;padding-block:1.2rem;font-size:.85rem}@media(max-width:900px){.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:1rem}.primary-nav.is-open{display:block}.primary-nav ul{display:block}.primary-nav a{padding:.85rem}.hero{min-height:560px}.hero-media{background:linear-gradient(90deg,rgba(5,55,36,.94),rgba(5,55,36,.58)),url('../images/hero-dinsos-pinrang.webp') 64% center/cover no-repeat}.service-grid,.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:1fr;gap:2rem}.notice{position:static}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.service-strip .container{justify-content:center}.service-strip span{display:none}.header-inner{min-height:68px}.custom-logo{width:46px;height:46px}.hero{min-height:600px}.hero-inner{padding-block:4.5rem}.hero h1{font-size:2.65rem}.service-grid,.card-grid,.footer-grid{grid-template-columns:1fr}.section{padding-block:3.5rem}.section-head{align-items:start;flex-direction:column}.page-hero{padding-block:3rem}.search-form{flex-direction:column}.detail-layout{padding-block:2.5rem}.footer-bottom{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v1.1 visual system aligned to approved mockups */
.partner-logo{width:118px;height:42px;object-fit:contain}.hero{min-height:560px;background:linear-gradient(135deg,#eef8f1 0%,#fff 70%);color:var(--ink)}.hero-pattern{position:absolute;inset:0;background:radial-gradient(circle at 10% 20%,rgba(12,122,75,.08),transparent 32%),linear-gradient(120deg,transparent 55%,rgba(213,168,50,.08));pointer-events:none}.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);align-items:center;gap:2.5rem;padding-block:4.5rem}.hero-copy{max-width:650px}.hero h1{color:var(--forest);font-size:clamp(2.55rem,5vw,4.8rem)}.hero p{color:#3d5147}.hero .eyebrow{color:var(--emerald)}.hero .button{background:var(--forest);border-color:var(--forest);color:#fff}.hero .button-light{background:#fff;color:var(--forest);border-color:var(--forest)}.hero-illustration{align-self:end;margin:0}.hero-illustration img{display:block;width:100%;max-height:510px;object-fit:contain;object-position:center bottom}.hero-search{display:flex;max-width:600px;margin-top:1.5rem;background:#fff;border:1px solid #c9d8ce;border-radius:12px;box-shadow:0 8px 30px rgba(8,50,32,.1);overflow:hidden}.hero-search label{flex:1}.hero-search input{width:100%;min-height:52px;padding:.75rem 1rem;border:0;font:inherit}.hero-search button{min-width:88px;border:0;background:var(--forest);color:#fff;font-weight:750}.quick-access{position:relative;margin-top:-22px;z-index:5}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.quick-grid a{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:.75rem;padding:1.2rem;text-decoration:none;color:var(--ink);border-right:1px solid var(--line)}.quick-grid a:last-child{border-right:0}.quick-grid span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e8f4ed;color:var(--forest);font-weight:850}.quick-grid strong{font-size:.95rem}.quick-grid small{color:var(--muted)}.service-card-logo{display:grid;place-items:center;height:118px;margin:-.25rem -.25rem 1rem;background:linear-gradient(135deg,#f4faf6,#fff);border-radius:12px}.service-card-logo img{max-width:92%;max-height:104px;object-fit:contain}.alert-band{padding-block:1.25rem;background:var(--forest);color:#fff}.alert-band .container{display:flex;align-items:center;gap:1rem}.alert-band p{margin:0;color:#dcebe2}.alert-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:50%;background:var(--gold);color:#1d2a22;font-size:1.2rem;font-weight:900}.alert-band .button{margin-left:auto;border-color:#fff;color:#fff;background:transparent}.service-directory-hero{background:linear-gradient(135deg,#eef8f1 0%,#fff 60%),url('../images/programs/sekolah-rakyat.webp') 95% 70%/390px auto no-repeat}.service-directory-hero .container{padding-right:min(34vw,410px)}
@media(max-width:1050px){.partner-logo{display:none}.hero-inner{grid-template-columns:1.05fr .95fr}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick-grid a:nth-child(2){border-right:0}.quick-grid a:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:760px){.hero{min-height:auto}.hero-inner{grid-template-columns:1fr;padding-block:3rem 0;gap:1rem}.hero h1{font-size:clamp(2.25rem,10vw,3.25rem)}.hero-illustration{width:100%;max-width:520px;margin-inline:auto}.hero-illustration img{max-height:380px}.hero-search{width:100%}.quick-access{margin-top:0;background:#f6faf7;padding-block:1rem}.quick-grid{box-shadow:none}.service-directory-hero{background:#f1f8f4}.service-directory-hero .container{padding-right:0}}
@media(max-width:520px){.hero-copy .button-row{display:none}.hero-search{margin-top:1rem}.hero-search input{min-width:0}.quick-grid{grid-template-columns:1fr}.quick-grid a{border-right:0;border-bottom:1px solid var(--line)!important}.quick-grid a:last-child{border-bottom:0!important}.alert-band .container{align-items:flex-start;flex-wrap:wrap}.alert-band .button{width:100%;margin-left:0}.service-card-logo{height:96px}.service-card-logo img{max-height:84px}}
.service-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,480px);align-items:center;gap:3rem}.service-hero-grid figure{margin:0}.service-hero-grid img{display:block;width:100%;max-height:340px;object-fit:contain}.service-status{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}.service-status span{padding:.35rem .65rem;border-radius:999px;background:#e4f2e9;color:var(--forest);font-size:.8rem;font-weight:700}.service-toc{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:12px;background:var(--mist)}.service-toc a{padding:.25rem .45rem}.button-gold{background:var(--gold);border-color:var(--gold);color:#1d2a22}.mobile-dock{display:none}
@media(max-width:760px){body{padding-bottom:66px}.service-hero-grid{grid-template-columns:1fr;gap:1rem}.service-hero-grid figure{order:-1}.service-hero-grid img{max-height:260px}.mobile-dock{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;z-index:999;background:var(--forest);box-shadow:0 -6px 20px rgba(0,0,0,.18)}.mobile-dock a,.mobile-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:64px;border:0;background:transparent;color:#fff;text-decoration:none;font:inherit;font-size:.72rem}.mobile-dock span{font-size:1.1rem}.mobile-menu-trigger{cursor:pointer}}

/* v1.2 production polish */
.hero{min-height:610px;background:#f7f4ec var(--dsp-hero-image) center/cover no-repeat;color:var(--ink)}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,247,238,.98) 0%,rgba(251,247,238,.93) 34%,rgba(251,247,238,.35) 55%,transparent 72%);pointer-events:none}.hero-pattern{z-index:1;background:linear-gradient(115deg,rgba(213,168,50,.16),transparent 34%)}.hero-inner{position:relative;z-index:2;display:block;padding-block:5.5rem}.hero-copy{max-width:610px}.hero h1{font-size:clamp(2.55rem,5vw,4.55rem);color:#063f2a}.hero p{color:#30483c}.hero .button-light{background:rgba(255,255,255,.88)}
.service-empty{grid-column:1/-1;max-width:780px;padding:2rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#f1f8f4,#fff);box-shadow:var(--shadow)}.service-empty h2{margin:.25rem 0 .75rem;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2}.service-empty .button-light{background:#fff;color:var(--forest)}.admin-hint{margin-top:1.5rem;padding:1rem;border-left:4px solid var(--gold);background:#fff;font-size:.9rem}
.site-footer{background:#043f2b;border-top:none}.footer-grid{grid-template-columns:1.45fr .85fr .9fr 1.35fr;gap:2.5rem}.footer-title,.site-footer h2{font-size:1.05rem;margin:0 0 1rem}.site-footer p{margin:.35rem 0 1rem}.site-footer address{font-style:normal;line-height:1.65;margin-bottom:1rem}.site-footer li+li{margin-top:.55rem}.footer-brand .site-name{color:#fff}.footer-brand .site-name small{color:#c5dbcf}.footer-brand .custom-logo{background:#fff;border-radius:12px;padding:4px}.footer-badge{padding-left:.85rem;border-left:3px solid var(--gold);color:#fff;font-weight:650}.footer-contact-list span{display:block;color:#a9c7b7;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em}.footer-social{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}.footer-social a{padding:.3rem .6rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;text-decoration:none;font-size:.82rem}.footer-bottom div{display:flex;flex-wrap:wrap;gap:1rem}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:760px){.hero{min-height:690px;background-position:72% bottom;background-size:auto 48%;background-color:#fbf7ee}.hero::after{background:linear-gradient(180deg,rgba(251,247,238,.99) 0%,rgba(251,247,238,.96) 50%,rgba(251,247,238,.15) 72%,transparent 100%)}.hero-inner{padding-block:3.2rem 18rem}.hero-copy{max-width:none}}@media(max-width:620px){.footer-grid{grid-template-columns:1fr}.footer-grid section,.footer-grid nav{padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.13)}}

/* v1.3: illustration-led hero matching the approved mockup language */
.hero{min-height:570px;background:linear-gradient(135deg,#eef8f1 0%,#fffaf1 100%)}.hero::after{display:none}.hero-pattern{background:radial-gradient(circle at 8% 18%,rgba(12,122,75,.09),transparent 31%),linear-gradient(120deg,transparent 56%,rgba(213,168,50,.1))}.hero-inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);align-items:center;gap:2rem;padding-block:4rem 2rem}.hero-copy{max-width:650px}.hero-illustration{display:block;align-self:end;margin:0}.hero-illustration img{display:block;width:100%;max-height:530px;object-fit:contain;object-position:center bottom}.profile-intro{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:3.5rem;align-items:start}.profile-photo{margin:0}.profile-photo img{display:block;width:100%;border-radius:24px;box-shadow:var(--shadow)}.profile-photo figcaption{padding:.85rem 1rem;background:var(--forest);color:#fff;border-radius:0 0 16px 16px;margin-top:-16px;position:relative}.profile-photo strong,.profile-photo span{display:block}.profile-photo span{font-size:.88rem;color:#dcebe2}.profile-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0}.profile-fact{padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--mist)}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr .8fr}.profile-intro{grid-template-columns:300px 1fr;gap:2rem}}@media(max-width:760px){.hero{min-height:auto;background:linear-gradient(180deg,#eef8f1,#fffaf1)}.hero-inner{grid-template-columns:1fr;padding-block:3rem 0}.hero-illustration{width:min(520px,100%);margin-inline:auto}.hero-illustration img{max-height:420px}.profile-intro{grid-template-columns:1fr}.profile-photo{max-width:360px}.profile-facts{grid-template-columns:1fr}}

/* v1.4 navigation, editorial pages, and map */
.primary-nav>ul{display:flex;align-items:center;gap:.2rem}.primary-nav li{position:relative}.primary-nav .sub-menu{position:absolute;z-index:120;left:0;top:calc(100% + .35rem);display:block;min-width:260px;padding:.55rem;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease}.primary-nav .sub-menu a{padding:.65rem .75rem;white-space:normal;font-weight:600}.primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}.primary-nav .menu-item-has-children>a::after{content:"\25BE";margin-left:.35rem;color:var(--emerald)}
.prose{font-size:1.04rem}.prose>p:first-child{font-size:1.12rem;color:#344b40}.prose h2{padding-top:.5rem;color:var(--forest);font-size:clamp(1.55rem,3vw,2.15rem)}.prose h3{color:#173f30}.prose ul,.prose ol{padding-left:1.3rem}.prose li{margin-block:.45rem}.prose blockquote{margin:2rem 0;padding:1rem 1.3rem;border-left:4px solid var(--gold);background:var(--mist)}.wp-block-table{overflow:auto}.wp-block-table table{width:100%;border-collapse:collapse}.wp-block-table th,.wp-block-table td{padding:.8rem;border:1px solid var(--line);text-align:left}.wp-block-file{padding:1rem;border:1px solid var(--line);border-radius:10px;background:var(--mist)}
.footer-map{display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem;align-items:center;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.18)}.footer-map iframe{display:block;width:100%;height:230px;border:0;border-radius:16px}.footer-map p{max-width:38ch}.footer-grid{font-size:.94rem}
@media(max-width:900px){.primary-nav .sub-menu{position:static;display:block;min-width:0;padding:0 0 0 1rem;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none}.primary-nav .menu-item-has-children>a::after{display:none}.footer-map{grid-template-columns:1fr}}
.org-chart{max-width:1050px;margin-inline:auto;text-align:center}.org-node{position:relative;padding:1.15rem;border:1px solid #b9d2c3;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(8,50,32,.06)}.org-node strong,.org-node span{display:block}.org-node span{margin-top:.3rem;color:var(--muted)}.org-head{max-width:420px;margin-inline:auto;background:var(--forest);color:#fff;border-color:var(--forest)}.org-head span{color:#fff}.org-secretariat{max-width:540px;margin:2rem auto}.org-secretariat::before,.org-branches::before{content:"";position:absolute;left:50%;top:-2rem;width:1px;height:2rem;background:#8db49d}.org-branches{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}.org-fields{grid-template-columns:repeat(3,1fr);margin-top:3rem}.org-functional{max-width:620px;margin:3rem auto 0;background:var(--mist)}.org-note{margin:3rem auto 0}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem}.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.contact-cards article{padding:1.15rem;border:1px solid var(--line);border-radius:14px;background:var(--mist)}.contact-cards span,.contact-cards strong{display:block}.contact-cards span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.35rem}.contact-map{display:block;width:100%;height:360px;border:0;border-radius:18px;margin-bottom:2rem}
@media(max-width:760px){.org-branches,.org-fields,.contact-layout,.contact-cards{grid-template-columns:1fr}.org-branches::before{display:none}.org-node{margin-top:.75rem}}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;font-size:.86rem;color:var(--muted)}.breadcrumbs a{color:var(--forest)}.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start}.page-panel{max-width:none;padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 8px 30px rgba(8,50,32,.05)}.page-aside{display:grid;gap:1rem;position:sticky;top:110px}.aside-card{padding:1.35rem;border:1px solid var(--line);border-radius:16px;background:var(--mist)}.aside-card h2{margin-top:0;font-size:1.25rem}.aside-contact{display:block;margin-top:1rem}.aside-warning{border-left:4px solid var(--gold);background:#fffaf0}.page-updated{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}.content-empty{padding:2rem;border-radius:16px;background:var(--mist)}
@media(max-width:800px){.page-layout{grid-template-columns:1fr}.page-aside{position:static}}
.strip-links{display:flex;gap:1rem}.strip-links a:first-child{font-weight:750;color:#f3d77c}
.org-leader{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:2rem;max-width:760px;margin:0 auto 4rem;padding:1.25rem;border:1px solid var(--line);border-radius:20px;background:var(--mist)}.org-leader img{width:180px;height:220px;object-fit:cover;object-position:top;border-radius:14px}.org-leader h2{margin:.25rem 0;color:var(--forest)}
@media(max-width:600px){.org-leader{grid-template-columns:1fr;text-align:center}.org-leader img{margin-inline:auto}}

/* v1.5 visual contract: directory, service detail, editorial, documents, footer */
.directory-hero,.institution-hero,.article-header,.service-detail-hero{background:linear-gradient(120deg,#eff8f2 0%,#fffdf5 100%);border-bottom:1px solid var(--line)}
.directory-hero-grid,.institution-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:center;gap:4rem;padding-block:4.5rem}.directory-hero h1,.institution-hero h1{max-width:800px;margin:.35rem 0 1rem;font-size:clamp(2.7rem,5vw,4.9rem);line-height:1.02;letter-spacing:-.045em}.directory-hero p,.institution-hero p{max-width:680px;color:var(--muted);font-size:1.08rem}.directory-visual{min-height:260px;display:flex;align-items:center;justify-content:center;gap:1rem;border-radius:28px;background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),linear-gradient(135deg,#dff4e7,#fff4d9);border:1px solid #d6eadf}.directory-visual span{display:grid;place-items:center;width:76px;height:76px;border-radius:22px;background:#fff;color:var(--emerald);font-size:2rem;box-shadow:var(--shadow)}.directory-visual span:nth-child(2){transform:translateY(-36px);color:#d99d00}.directory-illustration,.institution-illustration{justify-self:end;align-self:end;width:min(460px,100%);margin:0 -1rem -4.5rem 0}.directory-illustration img,.institution-illustration img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 28px rgba(8,50,32,.14))}
.directory-tools{padding:2rem 0;border-bottom:1px solid var(--line);background:#fff}.directory-search{display:grid;grid-template-columns:1fr auto;gap:.75rem}.directory-search label{display:block}.directory-search input{width:100%;height:58px;padding:0 1.2rem;border:1px solid #a9c0b3;border-radius:12px;font:inherit}.directory-search button{padding:0 1.5rem;border:0;border-radius:12px;background:var(--emerald);color:#fff;font-weight:800}.filter-chips{display:flex;gap:.65rem;margin-top:1.15rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:.3rem}.filter-chips a{flex:none;padding:.65rem 1rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--forest);font-size:.88rem;font-weight:750}.filter-chips a:hover,.filter-chips a:focus,.filter-chips .is-active{background:var(--forest);color:#fff;border-color:var(--forest)}.service-grid-directory{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}.service-grid-directory .service-card{display:flex;flex-direction:column;min-height:410px;padding:1.25rem}.service-grid-directory .service-card-logo{height:180px;border-radius:14px;background:var(--mist)}.service-grid-directory .service-card-logo img{width:100%;height:100%;object-fit:contain;padding:1rem}.service-grid-directory .text-link{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}.service-empty{grid-column:1/-1;text-align:center;padding:4rem;border:1px dashed #a9c0b3;border-radius:20px;background:var(--mist)}.empty-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:#fff;color:var(--emerald);font-size:2rem}.support-cta{padding:2.5rem 0;background:var(--forest);color:#fff}.support-cta .container,.service-rescue-cta .container{display:flex;align-items:center;justify-content:space-between;gap:2rem}.support-cta h2,.service-rescue-cta h2{margin:.25rem 0;color:#fff}.support-cta .eyebrow,.service-rescue-cta .eyebrow{color:#f6cf55}
.service-detail-hero{padding:2.5rem 0 3.5rem}.service-hero-card{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:2rem;padding:clamp(1.5rem,4vw,3.5rem);border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 55px rgba(8,50,32,.08)}.service-hero-card h1{font-size:clamp(2.5rem,5vw,4.7rem);line-height:1.02;letter-spacing:-.04em}.service-hero-card figure{height:330px;margin:0;border-radius:20px;background:var(--mist);overflow:hidden}.service-hero-card figure img{width:100%;height:100%;object-fit:contain;padding:1.25rem}.service-status{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.25rem}.service-status span{padding:.55rem .8rem;border-radius:999px;background:#e6f5eb;color:var(--forest);font-size:.84rem;font-weight:800}.service-content-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:2.5rem;padding-block:4rem}.service-toc{position:sticky;top:110px;align-self:start;display:grid;padding:1.2rem;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(8,50,32,.05)}.service-toc strong{padding-bottom:.75rem;margin-bottom:.5rem;border-bottom:1px solid var(--line)}.service-toc a{padding:.55rem 0;color:var(--muted);font-size:.9rem}.service-toc a:hover,.service-toc a:focus{color:var(--emerald)}.service-panels{display:grid;gap:1.1rem}.service-panel{display:grid;grid-template-columns:54px 1fr;gap:1.2rem;padding:1.6rem;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 5px 22px rgba(8,50,32,.04)}.service-panel h2{margin-top:0;font-size:1.55rem}.panel-number{display:grid;place-items:center;width:46px;height:46px;margin:0;border-radius:14px;background:#e9f7ee;color:var(--emerald);font-weight:900}.process-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;padding:0;list-style:none}.process-timeline li{position:relative;padding-top:2.25rem;font-size:.86rem}.process-timeline li:before{content:"";position:absolute;top:.65rem;left:1rem;right:-.5rem;height:2px;background:#b9d7c6}.process-timeline li:last-child:before{display:none}.process-timeline li>span{position:absolute;z-index:2;top:0;left:0;width:1.4rem;height:1.4rem;border:5px solid #dff3e7;border-radius:50%;background:var(--emerald)}.info-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.info-tile-grid>div{padding:1rem;border-radius:12px;background:var(--mist)}.info-tile-grid span,.info-tile-grid strong{display:block}.info-tile-grid span{margin-bottom:.3rem;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}.emergency-note{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem 1.4rem;border-left:5px solid var(--gold);border-radius:12px;background:#fff7db}.emergency-note p{margin:0}.service-rescue-cta{padding:3.5rem 0;background:linear-gradient(120deg,#071f3d,#0d385b);color:#fff}.service-verified{padding-block:1.5rem;color:var(--muted);font-size:.88rem;text-align:center}
.article-header{padding:4rem 0 3rem}.article-title-wrap{max-width:1050px}.article-category{display:inline-flex;padding:.45rem .75rem;border-radius:999px;background:#e7f5ec;color:var(--emerald);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.article-header h1{max-width:950px;margin:1rem 0;font:700 clamp(2.7rem,5vw,5.2rem)/1.03 Georgia,'Times New Roman',serif;letter-spacing:-.035em;color:#123b2c}.article-meta,.share-links{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;color:var(--muted);font-size:.88rem}.article-meta span+span:before{content:"\2022";margin-right:.8rem}.share-links{margin-top:1.25rem}.share-links a,.copy-link{padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--forest);font:inherit;font-weight:700;cursor:pointer}.article-grid{display:grid;grid-template-columns:minmax(0,760px) 300px;justify-content:space-between;gap:4rem;padding-block:3rem}.article-featured{margin:0 0 2.5rem}.article-featured img{width:100%;border-radius:20px}.article-featured figcaption{padding:.65rem 0;color:var(--muted);font-size:.8rem}.article-prose{font-size:1.08rem;line-height:1.85}.article-prose>p:first-child{font-size:1.22rem;line-height:1.7}.article-aside{display:grid;align-content:start;gap:1rem;position:sticky;top:110px}.article-aside section,.article-aside blockquote,.article-source-note{padding:1.35rem;border:1px solid var(--line);border-radius:16px;background:var(--mist)}.article-aside h2{margin-top:0;font-size:1.2rem}.article-aside a{display:block;padding:.7rem 0;border-bottom:1px solid var(--line)}.article-aside blockquote{margin:0;border-left:4px solid var(--gold);font-family:Georgia,serif;font-size:1.18rem}.article-source-note{margin-top:2rem}.article-source-note p{margin-bottom:0}.related-news{background:var(--mist)}
.home-info-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:3rem}.news-list{display:grid;gap:1rem}.news-list article{display:grid;grid-template-columns:180px 1fr;gap:1.25rem;padding:1rem;border:1px solid var(--line);border-radius:16px;background:#fff}.news-list-image{display:block;height:122px;border-radius:12px;overflow:hidden}.news-list-image img{width:100%;height:100%;object-fit:cover}.news-list h3{margin:.25rem 0}.news-list p{margin:.25rem 0;color:var(--muted)}.public-documents{padding:1.4rem;border:1px solid var(--line);border-radius:20px;background:var(--mist)}.document-list{display:grid;gap:.8rem}.document-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#fff}.document-list h3{margin:0;font-size:1rem}.document-list p{margin:.25rem 0 0;color:var(--muted);font-size:.8rem}.document-icon{display:grid;place-items:center;width:46px;height:52px;border-radius:8px;background:#ffe8e7;color:#b42318;font-size:.72rem;font-weight:900}.document-more{margin-top:1rem;width:100%;text-align:center}.document-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}.public-service-poster{max-width:720px;margin:3rem auto 0;padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--mist)}.public-service-poster img{width:100%;height:auto;border-radius:12px}
.footer-accent{height:5px;background:var(--gold)}.site-footer{background:var(--forest);color:#e7f2ec}.footer-grid{grid-template-columns:1.15fr .72fr .85fr 1fr 1.25fr;gap:2rem;padding-block:4rem}.footer-location{grid-column:auto}.footer-map-card{overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.06)}.footer-map-card iframe{display:block;width:100%;height:150px;border:0}.footer-map-card>div{display:grid;padding:1rem}.footer-map-card small{margin:.25rem 0 .65rem}.footer-map-card a{color:#fff;font-weight:750}.footer-bottom{border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:1100px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-about,.footer-location{grid-column:auto}.service-grid-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.directory-hero-grid,.institution-hero-grid{grid-template-columns:1fr;gap:2rem;padding-block:3rem 0}.directory-hero h1,.institution-hero h1{font-size:clamp(2.35rem,11vw,3.6rem)}.directory-visual{min-height:190px}.directory-illustration,.institution-illustration{justify-self:center;width:min(460px,94vw);margin:0 auto}.directory-illustration img,.institution-illustration img{max-height:320px}.service-hero-card{grid-template-columns:1fr;padding:1.25rem}.service-hero-card figure{height:240px}.service-content-grid{grid-template-columns:1fr;padding-block:2rem}.service-toc{position:static;display:flex;overflow-x:auto;gap:.8rem}.service-toc strong,.service-toc a{flex:none;border:0}.process-timeline{grid-template-columns:1fr}.process-timeline li{padding:0 0 1rem 2.25rem}.process-timeline li:before{top:1rem;bottom:-.25rem;left:.68rem;width:2px;height:auto}.process-timeline li>span{top:.2rem}.article-grid,.home-info-grid{grid-template-columns:1fr}.article-aside{position:static}.footer-grid{grid-template-columns:1fr 1fr}.support-cta .container,.service-rescue-cta .container{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.directory-search{grid-template-columns:1fr}.directory-search button{height:52px}.service-grid-directory{grid-template-columns:1fr}.service-grid-directory .service-card{display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto auto auto 1fr;column-gap:1rem;min-height:0}.service-grid-directory .service-card-logo{grid-row:1/5;width:110px;height:130px}.service-grid-directory .service-card .text-link{grid-column:1/-1}.service-panel{grid-template-columns:1fr;padding:1.15rem}.info-tile-grid{grid-template-columns:1fr 1fr}.article-header{padding:2.5rem 0 2rem}.article-header h1{font-size:clamp(2.2rem,11vw,3.2rem)}.article-grid{padding-block:1.5rem}.article-meta span+span:before{display:none}.news-list article{grid-template-columns:110px 1fr}.news-list-image{height:92px}.news-list article>div>p:last-child{display:none}.document-list article{grid-template-columns:auto 1fr}.document-list article>a.button{grid-column:1/-1}.footer-grid{grid-template-columns:1fr;padding-block:3rem}.mobile-dock{grid-template-columns:repeat(5,1fr)}.dock-emphasis span{background:var(--gold);color:var(--forest);border-radius:50%}}

/* ==========================================================================
   v1.5.2 Single Post Berita - Sesuai Mockup 04-detail-berita.png
   ========================================================================== */
.article-single-page {
  background: #ffffff;
}
.news-article-mockup .article-header {
  padding: 2.5rem 0 1.5rem;
  background: #ffffff;
  border-bottom: 0;
}
.news-article-mockup .article-title-wrap {
  max-width: 1080px;
}
.news-article-mockup .breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 1.25rem;
}
.news-article-mockup .breadcrumbs a {
  color: var(--forest);
  text-decoration: none;
  font-weight: 500;
}
.news-article-mockup .breadcrumbs a:hover {
  text-decoration: underline;
}
.news-article-mockup .breadcrumbs .sep {
  color: #94a3b8;
}
.news-article-mockup .breadcrumbs .current-crumb {
  color: #0f172a;
  font-weight: 600;
}

/* Badge Kategori Solid Hijau Tua Sesuai Mockup */
.news-article-mockup .article-badge-row {
  margin-bottom: 0.85rem;
}
.news-article-mockup .article-badge {
  display: inline-block;
  background-color: var(--forest);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.2;
}
.news-article-mockup .article-badge:hover {
  background-color: var(--emerald);
  color: #ffffff;
}

/* Judul Artikel */
.news-article-mockup .article-title {
  color: var(--ink);
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0.5rem 0 1.25rem;
  max-width: 960px;
}

/* Baris Meta Horizontal & Social Share */
.news-article-mockup .article-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  color: #64748b;
  font-size: 0.9rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.news-article-mockup .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.news-article-mockup .meta-icon {
  color: #94a3b8;
  flex-shrink: 0;
}
.news-article-mockup .meta-divider {
  color: #cbd5e1;
  font-weight: 300;
}
.news-article-mockup .meta-share-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
}
.news-article-mockup .share-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
}
.news-article-mockup .share-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.news-article-mockup .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.news-article-mockup .share-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.news-article-mockup .share-facebook {
  background-color: #1877f2;
}
.news-article-mockup .share-x {
  background-color: #0f1419;
}
.news-article-mockup .share-whatsapp {
  background-color: #25d366;
}
.news-article-mockup .share-copy {
  background-color: #64748b;
}
.news-article-mockup .share-copy.is-copied {
  background-color: var(--emerald);
}

/* Grid Dua Kolom: Konten Utama & Sidebar */
.news-article-mockup .article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3.5rem;
  padding-block: 2rem 4rem;
  align-items: start;
}

/* Featured Media Gambar Unggulan */
.news-article-mockup .article-featured {
  margin: 0 0 2rem;
}
.news-article-mockup .article-featured-media {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  background: var(--mist);
}
.news-article-mockup .article-featured-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}
.news-article-mockup .article-featured-caption {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 0.25rem 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.5;
}
.news-article-mockup .caption-icon {
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 2px;
}
.news-article-mockup .caption-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.news-article-mockup .caption-lead {
  color: #334155;
  font-weight: 500;
}
.news-article-mockup .caption-sub {
  color: #94a3b8;
  font-size: 0.78rem;
}

/* Tipografi Naskah Berita Prose */
.news-article-mockup .article-prose {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #334155;
}
.news-article-mockup .article-prose > p:first-child {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #1e293b;
  font-weight: 450;
  margin-bottom: 1.5rem;
}
.news-article-mockup .article-prose h2 {
  color: var(--forest);
  font-size: 1.45rem;
  font-weight: 800;
  margin: 2.25rem 0 0.85rem;
  line-height: 1.3;
}
.news-article-mockup .article-prose h3 {
  color: var(--forest);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.75rem 0 0.65rem;
}
.news-article-mockup .article-prose p {
  margin-bottom: 1.25rem;
}
.news-article-mockup .article-prose strong {
  color: #0f172a;
}

/* Pullquote Pejabat Sesuai Mockup */
.news-article-mockup .article-prose blockquote {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  background: #f8faf9;
  border-left: 4px solid var(--emerald);
  border-radius: 0 12px 12px 0;
  font-family: Georgia, 'Times New Roman', serif;
}
.news-article-mockup .article-prose blockquote::before {
  content: "\201C";
  display: block;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--emerald);
  margin-bottom: -0.85rem;
  font-weight: bold;
}
.news-article-mockup .article-prose blockquote p {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.7;
  color: #1e293b;
  margin: 0 0 0.75rem;
}
.news-article-mockup .article-prose blockquote cite,
.news-article-mockup .article-prose blockquote small {
  display: block;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 700;
  color: var(--forest);
}

/* Kotak Catatan Integritas Publikasi */
.news-article-mockup .callout-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: 12px;
  background: var(--mist);
  border: 1px solid var(--line);
}
.news-article-mockup .callout-icon {
  color: var(--forest);
  flex-shrink: 0;
  margin-top: 2px;
}
.news-article-mockup .callout-title {
  display: block;
  color: var(--forest);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.news-article-mockup .callout-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #475569;
}

/* Sidebar Informasi Terkait Sesuai Mockup */
.news-article-mockup .article-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.news-article-mockup .aside-section-title h2 {
  color: var(--forest);
  font-size: 1.18rem;
  font-weight: 800;
  margin: 0;
}
.news-article-mockup .aside-action-cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.news-article-mockup .aside-action-card {
  display: grid;
  grid-template-columns: 48px 1fr 18px;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.news-article-mockup .aside-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 91, 58, 0.09);
  border-color: #cbd5e1;
}
.news-article-mockup .aside-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: #ffffff;
  flex-shrink: 0;
}
.news-article-mockup .icon-green {
  background-color: #10b981;
}
.news-article-mockup .icon-blue {
  background-color: #0284c7;
}
.news-article-mockup .icon-amber {
  background-color: #f59e0b;
}
.news-article-mockup .aside-card-content h3 {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 750;
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.news-article-mockup .aside-card-content p {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}
.news-article-mockup .aside-card-arrow {
  color: var(--forest);
  font-weight: 800;
  font-size: 1.1rem;
  transition: transform 0.18s ease;
}
.news-article-mockup .aside-action-card:hover .aside-card-arrow {
  transform: translateX(3px);
}

/* Kotak Kutipan Nilai Pelayanan Sesuai Mockup */
.news-article-mockup .aside-quote-box {
  padding: 1.5rem;
  background: #f8faf9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.news-article-mockup .aside-quote-box .quote-mark {
  color: var(--emerald);
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: -0.65rem;
  font-family: Georgia, serif;
  font-weight: bold;
}
.news-article-mockup .aside-quote-text {
  margin: 0 0 0.85rem;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #334155;
  border: 0;
  padding: 0;
  background: transparent;
}
.news-article-mockup .aside-quote-author {
  display: block;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
  color: var(--forest);
}

/* Seksi Berita Terkait 3 Kolom Sesuai Mockup */
.news-article-mockup .related-news {
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  padding-block: 3.5rem 5rem;
}
.news-article-mockup .related-head {
  margin-bottom: 2rem;
}
.news-article-mockup .related-title {
  color: var(--forest);
  font-size: 1.85rem;
  font-weight: 800;
  margin: 0.25rem 0 0;
}
.news-article-mockup .related-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.news-article-mockup .related-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-article-mockup .related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}
.news-article-mockup .related-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--mist);
  overflow: hidden;
}
.news-article-mockup .related-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.news-article-mockup .related-card:hover .related-card-media img {
  transform: scale(1.04);
}
.news-article-mockup .related-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background-color: var(--forest);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.6rem;
  border-radius: 4px;
}
.news-article-mockup .related-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem;
}
.news-article-mockup .related-date {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 0.45rem;
}
.news-article-mockup .related-heading {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 1rem;
  font-weight: 750;
}
.news-article-mockup .related-heading a {
  color: #0f172a;
  text-decoration: none;
}
.news-article-mockup .related-heading a:hover {
  color: var(--forest);
}
.news-article-mockup .related-readmore {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--forest);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 750;
  transition: gap 0.18s ease;
}
.news-article-mockup .related-readmore:hover {
  gap: 0.6rem;
}

/* Responsivitas Layar Tablet & Ponsel */
@media (max-width: 960px) {
  .news-article-mockup .article-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .news-article-mockup .article-aside {
    position: static;
  }
  .news-article-mockup .related-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .news-article-mockup .article-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .news-article-mockup .meta-divider {
    display: none;
  }
  .news-article-mockup .meta-share-wrap {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  .news-article-mockup .related-news-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BAGIAN 1: SECTION POTENSI SUMBER KESEJAHTERAAN SOSIAL (PSKS) REVISI TOTAL
   3 KARTU HORIZONTAL BERDERET SEIMBANG, TONE WARNA KUAT, LOGO PROPORSIONAL
   ========================================================================== */
.psks-section {
  position: relative;
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  padding: 5rem 0 5.5rem;
  overflow: hidden;
}
.psks-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(7, 91, 58, 0.4), transparent);
}
.psks-header {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 3.5rem;
}
.psks-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #E8F5E9;
  color: #075B3A;
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 1.25rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  border: 1px solid #C8E6C9;
  box-shadow: 0 1px 4px rgba(7, 91, 58, 0.08);
}
.psks-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #075B3A;
  box-shadow: 0 0 0 2px rgba(7, 91, 58, 0.25);
}
.psks-title {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.psks-lead {
  font-size: 1.0625rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 auto;
}
.psks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}

/* Card Utama */
.psks-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 2.25rem 2rem 2rem;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
.psks-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  transition: height 0.3s ease;
}

/* Kotak Logo Tengah Atas */
.psks-card-top {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.psks-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.psks-logo-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.psks-logo-img,
.psks-logo-wrapper img {
  max-height: 76px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
  transition: transform 0.35s ease;
}
.psks-pill-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 750;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  margin-top: 1rem;
  letter-spacing: 0.02em;
}

/* Isi Teks Kartu */
.psks-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.psks-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0.5rem 0 0.25rem;
  line-height: 1.3;
}
.psks-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.psks-card-subtitle {
  font-size: 0.875rem;
  font-weight: 650;
  color: #64748B;
  margin: 0 0 0.85rem;
  line-height: 1.4;
}
.psks-card-desc {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}

/* Tombol Aksi */
.psks-card-footer {
  margin-top: auto;
  padding-top: 1rem;
}
.psks-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1.35rem;
  border-radius: 14px;
  font-weight: 750;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.psks-arrow-icon {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interaksi Hover Global */
.psks-card:hover {
  transform: translateY(-8px);
}
.psks-card:hover::before {
  height: 8px;
}
.psks-card:hover .psks-logo-img,
.psks-card:hover .psks-logo-wrapper img {
  transform: scale(1.05);
}
.psks-card:hover .psks-arrow-icon {
  transform: translateX(6px);
}

/* ==========================================================================
   VARIASI WARNA IDENTITAS MASING-MASING PILAR PSKS (TONE KUAT & MEWAH)
   ========================================================================== */

/* 1. TKSK (Sky Blue Kemensos RI) */
.psks-card--tksk {
  background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 60%);
  border: 2px solid #BAE6FD;
}
.psks-card--tksk::before {
  background: linear-gradient(90deg, #0284C7, #38BDF8);
}
.psks-card--tksk .psks-pill-badge {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}
.psks-card--tksk .psks-action-btn {
  background: #0284C7;
  color: #FFFFFF;
}
.psks-card--tksk .psks-action-btn:hover {
  background: #0369A1;
}
.psks-card--tksk:hover {
  border-color: #0284C7;
  box-shadow: 0 22px 42px -10px rgba(2, 132, 199, 0.25);
}
.psks-card--tksk:hover .psks-card-title a {
  color: #0284C7;
}

/* 2. PKH (Crimson Red Kemensos RI) */
.psks-card--pkh {
  background: linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 60%);
  border: 2px solid #FECDD3;
}
.psks-card--pkh::before {
  background: linear-gradient(90deg, #DC2626, #EF4444);
}
.psks-card--pkh .psks-pill-badge {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
.psks-card--pkh .psks-action-btn {
  background: #DC2626;
  color: #FFFFFF;
}
.psks-card--pkh .psks-action-btn:hover {
  background: #B91C1C;
}
.psks-card--pkh:hover {
  border-color: #DC2626;
  box-shadow: 0 22px 42px -10px rgba(220, 38, 38, 0.25);
}
.psks-card--pkh:hover .psks-card-title a {
  color: #DC2626;
}

/* 3. TAGANA (Vibrant Orange Rescue) */
.psks-card--tagana {
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 60%);
  border: 2px solid #FED7AA;
}
.psks-card--tagana::before {
  background: linear-gradient(90deg, #EA580C, #F97316);
}
.psks-card--tagana .psks-pill-badge {
  background: #FFEDD5;
  color: #C2410C;
  border: 1px solid #FED7AA;
}
.psks-card--tagana .psks-action-btn {
  background: #EA580C;
  color: #FFFFFF;
}
.psks-card--tagana .psks-action-btn:hover {
  background: #C2410C;
}
.psks-card--tagana:hover {
  border-color: #EA580C;
  box-shadow: 0 22px 42px -10px rgba(234, 88, 12, 0.25);
}
.psks-card--tagana:hover .psks-card-title a {
  color: #EA580C;
}


/* ==========================================================================
   HALAMAN KHUSUS PILAR PSKS (TKSK, PKH, TAGANA)
   ========================================================================== */
.psks-detail-page {
  background: #F8FAFC;
  padding-bottom: 5rem;
}
.psks-detail-hero {
  position: relative;
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid #E2E8F0;
  overflow: hidden;
}
.psks-detail-hero--tksk {
  background: linear-gradient(135deg, #075B3A 0%, #0369A1 60%, #0284C7 100%);
  color: #FFFFFF;
}
.psks-detail-hero--pkh {
  background: linear-gradient(135deg, #075B3A 0%, #991B1B 60%, #DC2626 100%);
  color: #FFFFFF;
}
.psks-detail-hero--tagana {
  background: linear-gradient(135deg, #075B3A 0%, #C2410C 60%, #EA580C 100%);
  color: #FFFFFF;
}
.psks-detail-hero .breadcrumbs a,
.psks-detail-hero .breadcrumbs span {
  color: rgba(255, 255, 255, 0.85);
}
.psks-detail-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
.psks-detail-hero h1 {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
}
.psks-detail-hero p.hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 680px;
}
.psks-hero-logo-box {
  background: #FFFFFF;
  padding: 1.5rem;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
}
.psks-hero-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Statistik Strip */
.psks-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: -2.5rem auto 3.5rem;
  position: relative;
  z-index: 10;
}
.psks-stat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  text-align: center;
}
.psks-stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  display: block;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.psks-stat-num--tksk { color: #0284C7; }
.psks-stat-num--pkh { color: #DC2626; }
.psks-stat-num--tagana { color: #EA580C; }
.psks-stat-label {
  font-size: 0.875rem;
  color: #64748B;
  font-weight: 600;
}

/* Feature & Tupoksi Cards */
.psks-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.psks-panel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  margin-bottom: 2rem;
}
.psks-panel h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.psks-panel h2::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 1.5rem;
  border-radius: 4px;
}
.psks-panel--tksk h2::before { background: #0284C7; }
.psks-panel--pkh h2::before { background: #DC2626; }
.psks-panel--tagana h2::before { background: #EA580C; }

.psks-tupoksi-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.psks-tupoksi-item {
  display: flex;
  gap: 1rem;
  background: #F8FAFC;
  padding: 1.25rem;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}
.psks-tupoksi-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.psks-tupoksi-num--tksk { background: #E0F2FE; color: #0369A1; }
.psks-tupoksi-num--pkh { background: #FEE2E2; color: #B91C1C; }
.psks-tupoksi-num--tagana { background: #FFEDD5; color: #C2410C; }
.psks-tupoksi-item h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.psks-tupoksi-item p {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Sidebar Widget */
.psks-sidebar-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  margin-bottom: 2rem;
}
.psks-sidebar-card h3 {
  font-size: 1.1875rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 1rem;
}
.psks-contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.9375rem;
}
.psks-contact-row:last-child {
  border-bottom: none;
}
.psks-contact-label {
  font-weight: 600;
  color: #64748B;
  min-width: 90px;
}
.psks-contact-val {
  color: #0F172A;
  font-weight: 600;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .psks-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }
  .psks-stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .psks-content-grid {
    grid-template-columns: 1fr;
  }
  .psks-detail-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .psks-detail-hero p.hero-subtitle {
    margin: 0 auto;
  }
  .psks-hero-logo-box {
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .psks-section {
    padding: 3.5rem 0 4rem;
  }
  .psks-stat-strip {
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }
  .psks-card {
    padding: 1.75rem 1.5rem 1.5rem;
  }
  .psks-panel {
    padding: 1.75rem 1.5rem;
  }
}

/* ==========================================================================
   SISTEM VISUAL MOCKUP RESMI DINAS SOSIAL KABUPATEN PINRANG (DESKTOP & MOBILE)
   ========================================================================== */

/* Komponen Bersama: Section Heading, Badge, & Subheading */
.section-heading {
  margin-bottom: 2.5rem;
}
.section-heading.text-center {
  text-align: center;
}
.subheading-tag,
.contact-eyebrow-badge,
.profile-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #E8F5E9;
  color: #075B3A;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  margin-bottom: 0.85rem;
  border: 1px solid #C8E6C9;
}
.section-title {
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.section-description {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   1. BERANDA MOCKUP (01-beranda.png & mobile)
   -------------------------------------------------------------------------- */
.home-hero-mockup {
  position: relative;
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 65%, #FEF9C3 100%);
  padding: 4rem 0 5.5rem;
  overflow: hidden;
  border-bottom: 1px solid #E2E8F0;
}
.home-hero-mockup .hero-inner--mockup {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3.5rem;
}
.hero-kemensos-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  border: 1px solid #CBD5E1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.25rem;
}
.hero-kemensos-brand img {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.hero-kemensos-brand span {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
}
.home-hero-mockup .hero-copy h1 {
  font-size: clamp(2.35rem, 4.5vw, 3.85rem);
  font-weight: 800;
  color: #064E3B;
  line-height: 1.12;
  margin: 0 0 1.25rem;
  letter-spacing: -0.03em;
}
.home-hero-mockup .hero-copy p {
  font-size: 1.125rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 2rem;
  max-width: 580px;
}
.search-pill-form {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 2px solid #075B3A;
  border-radius: 9999px;
  padding: 0.35rem 0.5rem 0.35rem 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(7, 91, 58, 0.15);
  max-width: 540px;
}
.search-pill-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: #0F172A;
  outline: none;
  min-width: 0;
}
.search-pill-form button {
  background: #075B3A;
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}
.search-pill-form button:hover {
  background: #064E3B;
}

/* Quick Access Cards Mengambang Sesuai Mockup */
.quick-access-section {
  position: relative;
  margin-top: -3rem;
  z-index: 20;
}
.quick-access-grid-mockup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.quick-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: #0F172A;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.quick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(7, 91, 58, 0.15);
  border-color: #075B3A;
}
.quick-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-card__icon--blue { background: #E0F2FE; color: #0284C7; }
.quick-card__icon--orange { background: #FFEDD5; color: #EA580C; }
.quick-card__icon--green { background: #DCFCE7; color: #16A34A; }
.quick-card__icon--red { background: #FEE2E2; color: #DC2626; }

.quick-card__info {
  flex: 1;
  min-width: 0;
}
.quick-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: #0F172A;
}
.quick-card__desc {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
}
.quick-card__arrow {
  color: #94A3B8;
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.2s ease, color 0.2s ease;
}
.quick-card:hover .quick-card__arrow {
  color: #075B3A;
  transform: translateX(4px);
}

/* Service Card Mockup (2 Badges + Logo Tengah Atas) */
.services-grid-mockup,
.directory-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.service-card--mockup {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.service-card--mockup:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  border-color: #CBD5E1;
}
.service-card__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.service-card__badge--free {
  background: #DCFCE7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.service-card__badge--verify {
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.service-card__logo-wrap {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  padding: 0.5rem;
}
.service-card__logo-wrap img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}
.service-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}
.service-card__title a {
  color: #0F172A;
  text-decoration: none;
  transition: color 0.2s ease;
}
.service-card__title a:hover {
  color: #075B3A;
}
.service-card__desc {
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1;
}
.service-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #F1F5F9;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #075B3A;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.service-card__link:hover {
  text-decoration: underline;
}

/* Banner Alert Waspada Penipuan Hijau Mockup */
.home-alert-section {
  padding: 3rem 0;
}
.alert-banner-box {
  background: linear-gradient(135deg, #075B3A 0%, #064E3B 100%);
  border-radius: 20px;
  padding: 1.75rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(7, 91, 58, 0.2);
}
.alert-banner-box__left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.alert-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #D97706;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.alert-text-wrap h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
  color: #FFFFFF;
}
.alert-text-wrap p {
  margin: 0;
  font-size: 0.9375rem;
  color: #D1FAE5;
  max-width: 680px;
}
.alert-btn {
  background: #FFFFFF;
  color: #075B3A;
  font-weight: 750;
  font-size: 0.9rem;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.alert-btn:hover {
  background: #FEF9C3;
  transform: translateY(-2px);
}

/* Home Two Column Grid: Berita Terbaru (Kiri) & Dokumen Publik (Kanan) */
.home-two-col-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
}
.home-news-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease;
}
.home-news-item:hover {
  border-color: #075B3A;
}
.home-news-item__thumb {
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
}
.home-news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-news-item__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-news-item__meta {
  font-size: 0.75rem;
  color: #075B3A;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.home-news-item__title {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
  margin: 0 0 0.35rem;
}
.home-news-item__title a {
  color: #0F172A;
  text-decoration: none;
}
.home-news-item__title a:hover {
  color: #075B3A;
}

/* Dokumen Publik List */
.home-doc-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.home-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FEE2E2;
  color: #DC2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}
.home-doc-info {
  flex: 1;
  min-width: 0;
}
.home-doc-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-doc-meta {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. DIREKTORI LAYANAN MOCKUP (02-direktori-layanan.png)
   -------------------------------------------------------------------------- */
.category-chips-filter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 1.25rem 0 0.5rem;
  scrollbar-width: thin;
}
.chip-pill {
  white-space: nowrap;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  text-decoration: none;
  transition: all 0.2s ease;
}
.chip-pill:hover,
.chip-pill.is-active {
  background: #075B3A;
  color: #FFFFFF;
  border-color: #075B3A;
}
.directory-support-strip {
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  padding: 3rem 0;
  margin-top: 4rem;
}

/* --------------------------------------------------------------------------
   3. PROFIL DINAS MOCKUP (06-profil-dinas.png & mobile)
   -------------------------------------------------------------------------- */
.profile-hero-mockup {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 80%);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.profile-hero-mockup h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  color: #064E3B;
  margin: 0.5rem 0 1rem;
}
.profile-social-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.profile-social-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.profile-social-row a:hover {
  background: #075B3A;
  color: #FFFFFF;
  border-color: #075B3A;
}

/* Sambutan Kadis Grid */
.profile-kadis-section {
  padding: 4.5rem 0;
}
.kadis-speech-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start;
}
.kadis-photo-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  text-align: center;
}
.kadis-photo-box img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 14px;
}
.kadis-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 1rem 0 0.25rem;
}
.kadis-title {
  font-size: 0.875rem;
  color: #075B3A;
  font-weight: 700;
  text-transform: uppercase;
}
.kadis-quote-box {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #334155;
}
.kadis-quote-box h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0;
}

/* 4 Kartu Nilai Budaya Kerja */
.values-grid-mockup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.val-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  text-align: center;
}
.val-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: #F0FDF4;
  color: #075B3A;
}
.val-card h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.5rem;
}
.val-card p {
  font-size: 0.875rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* Visi & Misi Numbered List */
.vision-misi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.vision-box, .misi-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2.5rem;
}
.misi-numbered-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.misi-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.misi-num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #E8F5E9;
  color: #075B3A;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.misi-text {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

/* 3 Lingkup Tugas & Strip Statistik */
.tupoksi-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.tupoksi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.stats-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  background: #075B3A;
  border-radius: 20px;
  padding: 2.5rem;
  color: #FFFFFF;
  text-align: center;
}
.stat-item h3 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #FEF9C3;
  margin: 0 0 0.25rem;
}
.stat-item p {
  font-size: 0.875rem;
  color: #E2E8F0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. STRUKTUR ORGANISASI MOCKUP (07-struktur-organisasi.png & mobile)
   -------------------------------------------------------------------------- */
.org-hero-mockup {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 80%);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.org-leader-card {
  max-width: 680px;
  margin: 0 auto 3.5rem;
  background: #FFFFFF;
  border: 2px solid #075B3A;
  border-radius: 24px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 12px 35px rgba(7, 91, 58, 0.12);
}
.org-leader-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #E8F5E9;
  flex-shrink: 0;
}
.org-leader-info h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.org-leader-info p {
  color: #075B3A;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

/* Diagram Pohon Hierarki Berbasis Garis CSS */
.org-tree-section {
  padding: 2rem 0 4rem;
}
.org-tree-container {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}
.org-tree-root {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.org-tree-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  padding: 1rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  position: relative;
  min-width: 220px;
}
.org-tree-card--head {
  background: #075B3A;
  color: #FFFFFF;
  border-color: #075B3A;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(7, 91, 58, 0.2);
}
.org-tree-card--head h4 {
  color: #FFFFFF;
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}
.org-tree-card--head p {
  color: #D1FAE5;
  margin: 0;
  font-size: 0.8125rem;
}
.org-tree-card--sec {
  background: #F8FAFC;
  border-color: #94A3B8;
  max-width: 300px;
  margin: 2rem auto;
}
.org-tree-card--branch {
  flex: 1;
  min-width: 0;
}
.org-tree-branches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-top: 2rem;
  position: relative;
}
.org-tree-branches::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: #94A3B8;
}
.org-tree-card--branch::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 50%;
  width: 2px;
  height: 1rem;
  background: #94A3B8;
}

/* --------------------------------------------------------------------------
   5. KONTAK & PENGADUAN MOCKUP (09-kontak-pengaduan.png & mobile)
   -------------------------------------------------------------------------- */
.contact-page-mockup {
  background: #F8FAFC;
}
.contact-hero {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 70%, #FEF9C3 100%);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.contact-hero-content {
  max-width: 820px;
}
.contact-hero-title {
  font-size: clamp(2.25rem, 4.5vw, 3.45rem);
  font-weight: 800;
  color: #064E3B;
  line-height: 1.15;
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.03em;
}
.contact-hero-subtitle {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

/* 6 Kartu Info Kontak Cepat */
.contact-cards-section {
  padding: 3rem 0;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.contact-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}
.contact-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card--address .contact-card__icon { background: #E0F2FE; color: #0284C7; }
.contact-card--phone .contact-card__icon { background: #DCFCE7; color: #16A34A; }
.contact-card--whatsapp .contact-card__icon { background: #D1FAE5; color: #059669; }
.contact-card--email .contact-card__icon { background: #FEF3C7; color: #D97706; }
.contact-card--hours .contact-card__icon { background: #F1F5F9; color: #475569; }
.contact-card--emergency .contact-card__icon { background: #FEE2E2; color: #DC2626; }

.contact-card__body {
  flex: 1;
  min-width: 0;
}
.contact-card__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  margin-bottom: 0.35rem;
}
.contact-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.contact-card__link {
  font-size: 0.875rem;
  font-weight: 700;
  color: #075B3A;
  text-decoration: none;
}
.contact-card__link:hover {
  text-decoration: underline;
}
.contact-card__note {
  font-size: 0.8125rem;
  color: #64748B;
  font-weight: 600;
}

/* Alur 5 Tahapan Pengaduan Berpanah Sesuai Mockup */
.contact-flow-section {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  padding: 4.5rem 0;
}
.flow-steps-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.flow-step__number {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #075B3A;
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(7, 91, 58, 0.25);
}
.flow-step__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.flow-step__desc {
  font-size: 0.8125rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}
.flow-step__arrow {
  position: absolute;
  right: -0.75rem;
  top: 10px;
  font-size: 1.4rem;
  color: #CBD5E1;
  font-weight: 800;
}

/* Grid Utama: Form Pengaduan (Kiri) & Peta + SP4N LAPOR (Kanan) */
.contact-main-grid-section {
  padding: 4.5rem 0;
}
.contact-main-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-form-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}
.form-card-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #F1F5F9;
}
.form-tag {
  display: inline-block;
  background: #E0F2FE;
  color: #0369A1;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.form-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.5rem;
}
.form-subtitle {
  font-size: 0.95rem;
  color: #64748B;
  margin: 0;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-row--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-group label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
}
.form-group .required {
  color: #DC2626;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: #0F172A;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #075B3A;
  box-shadow: 0 0 0 3px rgba(7, 91, 58, 0.15);
}
.form-group--checkbox {
  margin-top: 0.5rem;
}
.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.checkbox-container input {
  margin-top: 0.25rem;
}
.checkbox-label {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
}
.submit-btn {
  background: #075B3A;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  box-shadow: 0 8px 20px rgba(7, 91, 58, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
  width: 100%;
}
.submit-btn:hover {
  background: #064E3B;
  transform: translateY(-2px);
}
.form-privacy-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: #64748B;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}
.form-privacy-note p {
  margin: 0;
  line-height: 1.45;
}

/* Sidebar Kolom Kanan */
.contact-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.sidebar-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.sidebar-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.25rem;
}
.sidebar-card__sub {
  font-size: 0.875rem;
  color: #64748B;
  margin: 0 0 1rem;
}
.sidebar-map-frame iframe {
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 12px;
}
.map-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 10px;
  background: #F1F5F9;
  color: #0F172A;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
.map-action-btn:hover {
  background: #E2E8F0;
}

/* Banner SP4N-LAPOR! */
.sidebar-card--lapor {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFFFFF 100%);
  border-color: #FECDD3;
}
.lapor-badge {
  display: inline-block;
  background: #BE123C;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}
.lapor-title {
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  color: #9F1239;
  letter-spacing: -0.02em;
}
.lapor-sub {
  display: block;
  font-size: 0.8125rem;
  color: #475569;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.lapor-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.lapor-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: #BE123C;
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s ease;
}
.lapor-action-btn:hover {
  background: #9F1239;
}

/* Warning Anti Pungli */
.sidebar-card--warning {
  background: #FEF3C7;
  border-color: #FDE68A;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.warning-icon {
  color: #D97706;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.warning-title {
  font-size: 1rem;
  font-weight: 800;
  color: #92400E;
  margin: 0 0 0.25rem;
}
.warning-text {
  font-size: 0.84rem;
  color: #78350F;
  line-height: 1.5;
  margin: 0;
}

/* Strip 4 Komitmen Pelayanan */
.contact-commitments-section {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  padding: 4rem 0;
}
.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.commitment-card {
  text-align: center;
  padding: 1.25rem;
}
.commitment-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #E8F5E9;
  color: #075B3A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.commitment-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.commitment-card__desc {
  font-size: 0.84rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* Accordion FAQ Pengaduan */
.contact-faq-section {
  padding: 4.5rem 0 5.5rem;
}
.faq-accordion-container {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
.faq-question {
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 750;
  color: #0F172A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-icon {
  font-size: 1.4rem;
  color: #075B3A;
  font-weight: 700;
  line-height: 1;
}
details[open] .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.65;
  border-top: 1px solid #F1F5F9;
}
.faq-answer p {
  margin: 0.75rem 0 0;
}

/* --------------------------------------------------------------------------
   6. DETAIL LAYANAN MOCKUP (03-detail-layanan-bencana.png & mobile)
   -------------------------------------------------------------------------- */
.service-detail-mockup {
  background: #F8FAFC;
}
.service-hero-mockup {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 65%, #FEF9C3 100%);
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid #E2E8F0;
}
.service-hero-inner {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 3rem;
}
.service-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}
.badge-cat {
  background: #075B3A;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
}
.badge-status-pill {
  font-size: 0.78125rem;
  font-weight: 750;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.badge-status--free {
  background: #DCFCE7;
  color: #166534;
}
.badge-status--verify {
  background: #FEF3C7;
  color: #92400E;
}
.service-hero-title {
  font-size: clamp(2.25rem, 4.5vw, 3.45rem);
  font-weight: 800;
  color: #064E3B;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
}
.service-hero-summary {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.btn-primary {
  background: #075B3A;
  color: #FFFFFF;
  padding: 0.8rem 1.6rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 8px 20px rgba(7, 91, 58, 0.25);
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background: #064E3B;
}
.btn-outline {
  background: #FFFFFF;
  color: #075B3A;
  border: 2px solid #075B3A;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}
.btn-outline:hover {
  background: #F0FDF4;
}
.service-hero-media {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.service-hero-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Alur Pelayanan 4 Tahapan Horizontal Berpanah */
.service-flow-section {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 4rem 0;
}
.service-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}
.service-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 1rem;
}
.step-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #075B3A;
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(7, 91, 58, 0.2);
}
.step-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.step-desc {
  font-size: 0.84rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}
.step-arrow {
  position: absolute;
  right: -0.75rem;
  top: 18px;
  font-size: 1.35rem;
  color: #CBD5E1;
  font-weight: 800;
}

/* Konten Rincian 2 Kolom */
.service-main-container {
  padding: 4rem 0 5rem;
}
.service-grid-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}
.service-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.service-toc-nav {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.toc-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #F1F5F9;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toc-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  transition: all 0.2s ease;
}
.toc-link:hover {
  background: #F0FDF4;
  color: #075B3A;
}
.toc-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: #075B3A;
  background: #E8F5E9;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.service-contact-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.5rem;
}
.contact-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.contact-card-text {
  font-size: 0.84rem;
  color: #64748B;
  margin: 0 0 1rem;
}
.contact-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.meta-item {
  font-size: 0.84rem;
  color: #334155;
}
.meta-label {
  display: block;
  font-size: 0.75rem;
  color: #64748B;
  text-transform: uppercase;
}
.btn-sidebar-wa {
  display: block;
  text-align: center;
  background: #059669;
  color: #FFFFFF;
  padding: 0.65rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
}
.btn-sidebar-wa:hover {
  background: #047857;
}
.service-alert-box {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  gap: 0.85rem;
}
.alert-box-icon {
  color: #D97706;
  flex-shrink: 0;
}
.alert-box-content strong {
  display: block;
  font-size: 0.875rem;
  color: #92400E;
  margin-bottom: 0.25rem;
}
.alert-box-content p {
  font-size: 0.8125rem;
  color: #78350F;
  line-height: 1.45;
  margin: 0;
}

/* Panel Konten Terstruktur */
.service-content-panels {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.service-panel-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2.25rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #F1F5F9;
}
.panel-idx {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #E8F5E9;
  color: #075B3A;
  font-weight: 850;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.panel-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}
.requirements-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1.5rem;
  line-height: 1.8;
  color: #334155;
}
.process-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.process-step-row {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
}
.step-num-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #075B3A;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.step-text {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}
.standards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.standard-tile {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1.25rem;
}
.standard-tile--free {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.standard-tile__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 0.35rem;
}
.standard-tile__val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
}
.standard-tile--free .standard-tile__val {
  color: #166534;
}
.legal-action-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px dashed #CBD5E1;
  text-align: center;
}
.btn-complaint {
  display: inline-block;
  background: #075B3A;
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9375rem;
  text-decoration: none;
  margin-top: 0.5rem;
}

/* Banner Aksi Kedaruratan Bawah */
.service-bottom-cta {
  background: linear-gradient(135deg, #075B3A 0%, #064E3B 100%);
  color: #FFFFFF;
  padding: 4rem 0;
}
.cta-inner-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}
.cta-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #FEF9C3;
  margin-bottom: 0.5rem;
}
.cta-heading {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
}
.cta-sub {
  font-size: 1.05rem;
  color: #D1FAE5;
  margin: 0;
  max-width: 620px;
}
.cta-actions {
  display: flex;
  gap: 1rem;
  white-space: nowrap;
}
.btn-cta-wa {
  background: #FFFFFF;
  color: #075B3A;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}
.btn-cta-wa:hover {
  background: #FEF9C3;
}
.btn-cta-phone {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.service-verified-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 0;
  color: #64748B;
  font-size: 0.875rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   RESPONSIVITAS MOBILE & TABLET UNTUK SEMUA KOMPONEN MOCKUP
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-hero-mockup .hero-inner--mockup,
  .service-hero-inner,
  .kadis-speech-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .quick-access-grid-mockup {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid-mockup,
  .directory-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-two-col-grid,
  .contact-main-layout {
    grid-template-columns: 1fr;
  }
  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .values-grid-mockup,
  .commitments-grid,
  .stats-counter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tupoksi-cards-grid {
    grid-template-columns: 1fr;
  }
  .service-grid-layout {
    grid-template-columns: 1fr;
  }
  .service-sidebar {
    position: static;
  }
  .service-steps-row,
  .flow-steps-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .step-arrow,
  .flow-step__arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-hero-mockup {
    padding: 2.5rem 0 3.5rem;
  }
  .quick-access-section {
    margin-top: 0;
    padding-top: 2rem;
  }
  .quick-access-grid-mockup {
    grid-template-columns: 1fr;
  }
  .services-grid-mockup,
  .directory-services-grid {
    grid-template-columns: 1fr;
  }
  .alert-banner-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
  .alert-btn {
    width: 100%;
    text-align: center;
  }
  .contact-cards-grid {
    grid-template-columns: 1fr;
  }
  .flow-steps-container,
  .service-steps-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .form-row--two-col {
    grid-template-columns: 1fr;
  }
  .contact-form-card {
    padding: 1.75rem 1.25rem;
  }
  .values-grid-mockup,
  .commitments-grid,
  .stats-counter-grid,
  .standards-grid,
  .vision-misi-grid {
    grid-template-columns: 1fr;
  }
  .org-leader-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  .org-tree-branches {
    grid-template-columns: 1fr;
  }
  .org-tree-branches::before,
  .org-tree-card--branch::before {
    display: none;
  }
  .cta-inner-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .btn-cta-wa,
  .btn-cta-phone {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .home-news-item {
    grid-template-columns: 1fr;
  }
  .home-news-item__thumb {
    height: 140px;
  }
  .search-pill-form {
    flex-direction: column;
    border-radius: 16px;
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .search-pill-form button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   BAGIAN 2: SISTEM MOCKUP RESMI DINAS SOSIAL KABUPATEN PINRANG LENGKAP
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. HERO BERANDA & FORM PENCARIAN (.hero--mockup)
   -------------------------------------------------------------------------- */
.hero--mockup {
  position: relative;
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 65%, #FEF9C3 100%);
  padding: 4rem 0 5.5rem;
  overflow: hidden;
  border-bottom: 1px solid #E2E8F0;
}
.hero-inner--mockup {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3.5rem;
}
.hero-kicker-row {
  margin-bottom: 1.25rem;
}
.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #E8F5E9;
  color: #075B3A;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid #C8E6C9;
}
.hero--mockup .hero-heading {
  font-size: clamp(2.35rem, 4.5vw, 3.85rem);
  font-weight: 800;
  color: #064E3B;
  line-height: 1.12;
  margin: 0 0 1.25rem;
  letter-spacing: -0.03em;
}
.hero--mockup .hero-lead {
  font-size: 1.125rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 2rem;
  max-width: 580px;
}
.hero-search-mockup {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 2px solid #075B3A;
  border-radius: 9999px;
  padding: 0.35rem 0.5rem 0.35rem 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(7, 91, 58, 0.15);
  max-width: 540px;
}
.hero-search-mockup input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: #0F172A;
  outline: none;
  min-width: 0;
  padding: 0.5rem 0;
}
.hero-search-mockup button {
  background: #075B3A;
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-search-mockup button:hover {
  background: #064E3B;
  transform: scale(1.04);
}
.hero-cobrand {
  margin-bottom: 1rem;
}
.hero-cobrand img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.hero-illustration--mockup img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

/* --------------------------------------------------------------------------
   B. QUICK ACCESS 4 CARDS MENGAMBANG (.quick-access-mockup)
   -------------------------------------------------------------------------- */
.quick-access-mockup {
  position: relative;
  margin-top: -3.25rem;
  z-index: 20;
  padding-bottom: 2rem;
}
.quick-grid-mockup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.quick-card-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.25rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: #0F172A;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.quick-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -8px rgba(7, 91, 58, 0.18);
  border-color: #075B3A;
}
.quick-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #E8F5E9;
  color: #075B3A;
}
.quick-card--bansos .quick-card-icon-wrap { background: #E0F2FE; color: #0284C7; }
.quick-card--dtsen .quick-card-icon-wrap { background: #FFEDD5; color: #EA580C; }
.quick-card--pengaduan .quick-card-icon-wrap { background: #DCFCE7; color: #16A34A; }
.quick-card--marennu .quick-card-icon-wrap { background: #FEE2E2; color: #DC2626; }

.quick-card-info {
  flex: 1;
  min-width: 0;
}
.quick-card-title {
  font-size: 1rem;
  font-weight: 750;
  margin: 0 0 0.15rem;
  color: #0F172A;
  display: block;
}
.quick-card-desc {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
  display: block;
  line-height: 1.35;
}
.quick-card-chevron {
  color: #94A3B8;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}
.quick-card-item:hover .quick-card-chevron {
  color: #075B3A;
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   C. LAYANAN UTAMA (.service-grid--mockup)
   -------------------------------------------------------------------------- */
.section-services-mockup {
  padding: 4.5rem 0 3rem;
}
.section-head--mockup {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1.5rem;
}
.section-title-mockup {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.section-sub-mockup {
  font-size: 1.05rem;
  color: #64748B;
  margin: 0;
}
.section-link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #075B3A;
  font-weight: 750;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.2s ease;
}
.section-link-more:hover {
  gap: 0.7rem;
  text-decoration: underline;
}
.service-grid--mockup {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.service-card--mockup {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.service-card--mockup:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  border-color: #075B3A;
}
.service-card-logo--center {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  padding: 0.5rem;
}
.service-card-logo--center img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}
.service-card--mockup h3 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}
.service-card--mockup h3 a {
  color: #0F172A;
  text-decoration: none;
  transition: color 0.2s ease;
}
.service-card--mockup h3 a:hover {
  color: #075B3A;
}
.service-card-desc {
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1;
}
.service-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.badge-status-item {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.badge-status--free {
  background: #DCFCE7;
  color: #166534;
}
.badge-status--verify {
  background: #FEF3C7;
  color: #92400E;
}
.service-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #F1F5F9;
}
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #075B3A;
  font-weight: 750;
  font-size: 0.9rem;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.service-card-link:hover {
  gap: 0.7rem;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   D. BANNER PERINGATAN WASPADA PENIPUAN (.alert-mockup-section)
   -------------------------------------------------------------------------- */
.alert-mockup-section {
  padding: 2.5rem 0 3.5rem;
}
.alert-mockup-card {
  background: linear-gradient(135deg, #075B3A 0%, #064E3B 100%);
  border-radius: 20px;
  padding: 1.75rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(7, 91, 58, 0.2);
}
.alert-mockup-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
}
.alert-mockup-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #D97706;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-mockup-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
  color: #FFFFFF;
  display: block;
}
.alert-mockup-text {
  margin: 0;
  font-size: 0.9375rem;
  color: #D1FAE5;
  line-height: 1.5;
}
.alert-mockup-btn {
  background: #FFFFFF;
  color: #075B3A;
  font-weight: 750;
  font-size: 0.925rem;
  padding: 0.8rem 1.6rem;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}
.alert-mockup-btn:hover {
  background: #FEF9C3;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   E. INFORMASI TERBARU & DOKUMEN PUBLIK (.home-info-mockup-grid)
   -------------------------------------------------------------------------- */
.home-info-mockup-section {
  padding: 4rem 0 5rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}
.home-info-mockup-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 3rem;
  align-items: start;
}
.home-info-mockup-grid .section-title-mockup {
  font-size: clamp(1.8rem, 2.65vw, 2.25rem);
  white-space: nowrap;
}
.news-item-mockup {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1.15rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.news-item-mockup:hover {
  border-color: #075B3A;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.news-item-mockup-thumb {
  height: 105px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.news-item-mockup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-item-mockup-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-item-mockup-title {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
  margin: 0 0 0.35rem;
}
.news-item-mockup-title a {
  color: #0F172A;
  text-decoration: none;
  transition: color 0.2s ease;
}
.news-item-mockup-title a:hover {
  color: #075B3A;
}
.news-item-mockup-excerpt {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0 0 0.5rem;
}
.news-item-mockup-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
}
.news-item-mockup-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Dokumen Publik */
.doc-card-mockup {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.doc-card-mockup:hover {
  border-color: #075B3A;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.doc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FEE2E2;
  color: #DC2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-card-info {
  flex: 1;
  min-width: 0;
}
.doc-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-card-meta {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
}
.doc-card-download {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #075B3A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.doc-card-download:hover {
  background: #075B3A;
  color: #FFFFFF;
  transform: scale(1.08);
}
.home-ombudsman-banner {
  display: block;
  margin-top: 1.25rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #D7E1EA;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.home-ombudsman-banner:hover,
.home-ombudsman-banner:focus-visible {
  border-color: #075B3A;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
}
.home-ombudsman-banner:focus-visible {
  outline: 3px solid rgba(7, 91, 58, 0.25);
  outline-offset: 3px;
}
.home-ombudsman-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   F. DIREKTORI LAYANAN (.directory-tools--mockup, .filter-chips-mockup)
   -------------------------------------------------------------------------- */
.directory-hero--mockup {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 70%);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.directory-hero-grid--mockup {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 3rem;
}
.directory-tools--mockup {
  padding: 2rem 0 1.5rem;
}
.directory-search-form-mockup {
  display: flex;
  gap: 0.75rem;
  max-width: 650px;
  margin-bottom: 1.5rem;
}
.directory-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.search-input-icon {
  color: #94A3B8;
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.directory-search-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: #0F172A;
  background: transparent;
}
.directory-search-btn {
  background: #075B3A;
  color: #FFFFFF;
  border: none;
  font-weight: 750;
  padding: 0 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.directory-search-btn:hover {
  background: #064E3B;
}

.filter-chips-mockup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
.chip-item {
  white-space: nowrap;
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  text-decoration: none;
  transition: all 0.2s ease;
}
.chip-item:hover,
.chip-item.is-active {
  background: #075B3A;
  color: #FFFFFF;
  border-color: #075B3A;
}

/* Support CTA Banner Direktori */
.support-cta-mockup-section {
  padding: 4rem 0;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  margin-top: 3rem;
}
.support-cta-mockup-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.support-cta-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.support-cta-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #075B3A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.support-cta-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
}
.support-cta-desc {
  font-size: 0.95rem;
  color: #64748B;
  margin: 0;
  max-width: 600px;
}
.support-cta-btn {
  background: #075B3A;
  color: #FFFFFF;
  font-weight: 750;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.support-cta-btn:hover {
  background: #064E3B;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   G. DETAIL LAYANAN (.service-detail-mockup)
   -------------------------------------------------------------------------- */
.service-hero-mockup {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 75%);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.service-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.badge-cat {
  background: #E8F5E9;
  color: #075B3A;
  font-size: 0.8125rem;
  font-weight: 750;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  border: 1px solid #C8E6C9;
}
.badge-status-pill {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.service-hero-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.service-hero-summary {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.65;
  max-width: 780px;
  margin: 0 0 2rem;
}
.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.btn-primary {
  background: #075B3A;
  color: #FFFFFF;
  font-weight: 750;
  padding: 0.85rem 1.65rem;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background: #064E3B;
}
.btn-outline {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 750;
  padding: 0.85rem 1.65rem;
  border-radius: 12px;
  border: 1px solid #CBD5E1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}
.btn-outline:hover {
  background: #F1F5F9;
}

/* --------------------------------------------------------------------------
   H. KONTAK & PENGADUAN (.contact-page-mockup)
   -------------------------------------------------------------------------- */
.contact-hero {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 75%);
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid #E2E8F0;
}
.contact-cards-section {
  padding: 3.5rem 0 2rem;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.contact-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex;
  gap: 1.25rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: #075B3A;
}
.contact-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #E8F5E9;
  color: #075B3A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card__label {
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  display: block;
  margin-bottom: 0.35rem;
}
.contact-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}
.contact-card__link {
  font-size: 0.875rem;
  font-weight: 700;
  color: #075B3A;
  text-decoration: none;
}
.contact-card__link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   I. RESPONSIVITAS MOBILE & TABLET MENYELURUH (ANTI-BERANTAKAN)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-inner--mockup,
  .directory-hero-grid--mockup,
  .home-info-mockup-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .quick-grid-mockup {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-grid--mockup,
  .contact-cards-grid,
  .psks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .home-info-mockup-grid .section-title-mockup {
    white-space: normal;
  }
  .quick-access-mockup {
    margin-top: -1.5rem;
  }
  .quick-grid-mockup {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .quick-card-item {
    padding: 1rem 1.15rem;
  }
  .service-grid--mockup,
  .contact-cards-grid,
  .psks-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .alert-mockup-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .alert-mockup-btn {
    width: 100%;
    justify-content: center;
  }
  .support-cta-mockup-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .support-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .news-item-mockup {
    grid-template-columns: 1fr;
  }
  .news-item-mockup-thumb {
    height: 160px;
  }
  .psks-card {
    padding: 1.5rem 1.25rem;
    border-radius: 18px;
  }
  .psks-logo-wrapper {
    height: 80px;
  }
  .psks-logo-img,
  .psks-logo-wrapper img {
    max-height: 62px;
  }
}

/* ==========================================================================
   DINSOS PINRANG v1.5.5 ENHANCEMENTS:
   - Header Anti-Collision & Responsive Navigation
   - Mobile Dock SVG Icons & Alerts
   - Compact Horizontal PSKS 3-Cards
   - Profile Dinas Full Mockup Styling
   - Structure Organisasi Bagan Hierarkis
   - Public Information Portal (Informasi Publik)
   - Publication Portal & Warta Sosial (Publikasi)
   ========================================================================== */

/* 1. HEADER ANTI-COLLISION & RESPONSIVE NAVIGATION */
.site-header {
  position: sticky;
  top: 0;
  z-index: 990;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.site-header .container.header-inner,
.site-header .header-inner,
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: min(1200px, calc(100% - 2.5rem));
  max-width: 1200px;
  margin-inline: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.custom-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}
.site-name {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--forest);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.site-name small {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 0.2rem;
}
.primary-nav {
  margin-left: auto;
  flex-shrink: 1;
}
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.92rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
  background: var(--mist);
  color: var(--forest);
}
.partner-logo {
  height: 38px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 1080px) {
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 1.35rem;
    cursor: pointer;
    color: var(--forest);
  }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 2px solid var(--forest);
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }
  .primary-nav.is-open {
    display: block !important;
  }
  .primary-nav > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .primary-nav a {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 8px;
  }
  .partner-logo {
    display: none;
  }
}

/* 2. MOBILE DOCK SVG ICONS & PROPORTIONS */
.mobile-dock {
  position: fixed;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--forest);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-dock a,
.mobile-dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 62px;
  padding: 0.35rem 0.2rem;
  border: 0;
  background: transparent;
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.dock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #fff;
}
.dock-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
.dock-emphasis .dock-icon--alert {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(213, 168, 50, 0.45);
}
.dock-emphasis .dock-icon--alert svg {
  stroke: var(--forest);
  stroke-width: 2.4;
  width: 18px;
  height: 18px;
}
.dock-emphasis span:last-child {
  color: #fcefc7;
  font-weight: 750;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 66px;
  }
  .mobile-dock {
    display: grid;
  }
}

/* 3. CARD 3 LOGO PSKS HORIZONTAL RAMPING TANPA DESKRIPSI */
.psks-section {
  padding-block: 4.5rem 5rem;
  background: linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
  border-top: 1px solid var(--line);
}
.psks-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem;
}
.psks-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--forest);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.psks-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
}
.psks-title {
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  color: var(--forest);
  margin: 0.25rem 0 0.75rem;
  line-height: 1.2;
}
.psks-lead {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}
.psks-grid--compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}
.psks-card--compact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem 1.5rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(8, 50, 32, 0.05);
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.psks-card--compact:hover {
  transform: translateY(-5px);
}
.psks-card--tksk {
  border-top: 5px solid #0b6baf;
}
.psks-card--tksk:hover {
  border-color: #0b6baf;
  box-shadow: 0 14px 34px rgba(11, 107, 175, 0.16);
}
.psks-card--pkh {
  border-top: 5px solid #c92a2a;
}
.psks-card--pkh:hover {
  border-color: #c92a2a;
  box-shadow: 0 14px 34px rgba(201, 42, 42, 0.16);
}
.psks-card--tagana {
  border-top: 5px solid #d9480f;
}
.psks-card--tagana:hover {
  border-color: #d9480f;
  box-shadow: 0 14px 34px rgba(217, 72, 15, 0.16);
}

.psks-card--compact .psks-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.psks-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  width: 100%;
}
.psks-logo-img {
  max-height: 76px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.psks-card--compact:hover .psks-logo-img {
  transform: scale(1.05);
}
.psks-pill-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.psks-card--tksk .psks-pill-badge {
  background: #e7f3fb;
  color: #0b6baf;
}
.psks-card--pkh .psks-pill-badge {
  background: #fdeeee;
  color: #c92a2a;
}
.psks-card--tagana .psks-pill-badge {
  background: #fff3e6;
  color: #d9480f;
}

.psks-card--compact .psks-card-body {
  margin-bottom: 1.5rem;
}
.psks-card-title {
  margin: 0.25rem 0 0.35rem;
  font-size: 1.55rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.psks-card-title a {
  color: var(--forest);
  text-decoration: none;
}
.psks-card-subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.psks-card--compact .psks-card-footer {
  margin-top: auto;
}
.psks-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}
.psks-card--tksk .psks-action-btn {
  background: #0b6baf;
}
.psks-card--pkh .psks-action-btn {
  background: #c92a2a;
}
.psks-card--tagana .psks-action-btn {
  background: #d9480f;
}
.psks-action-btn:hover {
  filter: brightness(1.1);
  color: #fff;
  transform: translateY(-1px);
}
.psks-arrow-icon {
  display: inline-block;
  transition: transform 0.18s ease;
}
.psks-action-btn:hover .psks-arrow-icon {
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .psks-grid--compact {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

/* 4. PROFIL DINAS MOCKUP STYLING */
.profile-mockup-page {
  background: #fafcfb;
}
.profile-hero-mockup {
  background: linear-gradient(135deg, #eef8f1 0%, #fffdf8 100%);
  border-bottom: 1px solid var(--line);
  padding-block: 4rem 3rem;
}
.profile-hero-grid-mockup {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: 3.5rem;
}
.profile-hero-text h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  color: var(--forest);
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.035em;
}
.profile-hero-lead {
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.profile-badge-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.profile-share-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.profile-share-bar .share-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
}
.profile-share-bar .share-buttons {
  display: flex;
  gap: 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--forest);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.share-btn:hover {
  background: var(--mist);
  transform: translateY(-2px);
}
.profile-hero-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
}
.profile-hero-illustration img {
  max-height: 380px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(8, 50, 32, 0.08));
}

/* Sambutan Kadis */
.profile-speech-section {
  padding-block: 5rem;
}
.profile-speech-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.profile-speech-photo {
  position: sticky;
  top: 110px;
  text-align: center;
}
.profile-speech-photo img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(8, 50, 32, 0.12);
  display: block;
}
.profile-speech-photo figcaption {
  margin-top: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 4px 15px rgba(8, 50, 32, 0.04);
}
.profile-speech-photo strong {
  display: block;
  font-size: 1.05rem;
  color: var(--forest);
}
.profile-speech-photo span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.profile-speech-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 8px 30px rgba(8, 50, 32, 0.04);
}
.profile-quote-card {
  border-left: 4px solid var(--gold);
  background: #fffdf5;
  padding: 1.25rem 1.5rem;
  border-radius: 0 14px 14px 0;
  margin: 1.5rem 0;
  font-style: italic;
  font-size: 1.08rem;
  color: #2b4033;
}
.profile-speech-sig {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.profile-speech-sig strong {
  display: block;
  font-size: 1.05rem;
  color: var(--forest);
}
.profile-speech-sig small {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Visi & Misi */
.profile-vm-section {
  padding-block: 4.5rem;
  background: var(--mist);
}
.profile-vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
.profile-vision-card,
.profile-values-card,
.profile-mission-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(8, 50, 32, 0.04);
}
.profile-mission-card {
  grid-column: 1 / -1;
}
.profile-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.profile-card-header h3 {
  margin: 0;
  font-size: 1.45rem;
  color: var(--forest);
}
.profile-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e7f5ec;
  color: var(--emerald);
}
.profile-vision-card p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #17221c;
}
.profile-mission-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
  margin: 0;
}
.profile-mission-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--mist);
  border: 1px solid var(--line);
}
.mission-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
}
.profile-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.value-pill {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--mist);
  border: 1px solid var(--line);
}
.value-pill strong {
  display: block;
  color: var(--forest);
  font-size: 1rem;
}
.value-pill small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

/* Ruang Lingkup Tugas */
.profile-scope-section {
  padding-block: 4.5rem;
}
.profile-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.profile-scope-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 4px 18px rgba(8, 50, 32, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-scope-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(8, 50, 32, 0.08);
}
.scope-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e7f5ec;
  color: var(--emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.profile-scope-card h4 {
  font-size: 1.2rem;
  color: var(--forest);
  margin: 0 0 0.5rem;
}
.profile-scope-card p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 860px) {
  .profile-hero-grid-mockup {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .profile-speech-grid {
    grid-template-columns: 1fr;
  }
  .profile-speech-photo {
    position: static;
    max-width: 320px;
    margin-inline: auto;
  }
  .profile-vm-grid {
    grid-template-columns: 1fr;
  }
}

/* 5. STRUKTUR ORGANISASI BAGAN HIERARKIS CSS */
.org-mockup-page {
  background: #fafcfb;
}
.org-hero-mockup {
  background: linear-gradient(135deg, #eef8f1 0%, #fffdf8 100%);
  border-bottom: 1px solid var(--line);
  padding-block: 4rem 3rem;
}
.org-hero-grid-mockup {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: 3.5rem;
}
.org-hero-text h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  color: var(--forest);
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.035em;
}
.org-hero-lead {
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.org-badge-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.org-hero-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
}
.org-hero-illustration img {
  max-height: 380px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(8, 50, 32, 0.08));
}

/* Bagan Pohon Struktur Organisasi */
.org-chart-section {
  padding-block: 4.5rem;
}
.org-tree-wrapper {
  max-width: 1050px;
  margin: 0 auto;
}
.org-tree-root {
  display: flex;
  justify-content: center;
}
.org-card-leader {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border: 2px solid var(--forest);
  border-radius: 20px;
  padding: 1.25rem 2rem;
  box-shadow: 0 12px 35px rgba(8, 50, 32, 0.08);
  max-width: 520px;
  width: 100%;
}
.leader-photo-wrap {
  width: 80px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #b9d2c3;
}
.leader-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.leader-info {
  flex: 1;
}
.leader-name {
  margin: 0;
  font-size: 1.22rem;
  color: var(--forest);
  font-weight: 800;
  line-height: 1.3;
}
.leader-role {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--emerald);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.leader-accent-line {
  height: 3px;
  width: 48px;
  background: var(--gold);
  border-radius: 2px;
}

.org-line-vertical {
  width: 2px;
  height: 36px;
  background: #9cc2ab;
  margin: 0 auto;
}

/* Tingkat Sekretariat */
.org-level-secretariat {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.org-node-secretariat {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--forest);
  color: #fff;
  border-radius: 14px;
  padding: 0.85rem 1.75rem;
  font-size: 1.12rem;
  font-weight: 750;
  box-shadow: 0 6px 20px rgba(8, 50, 32, 0.15);
}
.org-node-secretariat .node-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.org-branches-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.org-sub-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 15px rgba(8, 50, 32, 0.04);
}
.org-sub-card strong {
  display: block;
  font-size: 0.95rem;
  color: var(--forest);
}

/* Tingkat Bidang-Bidang */
.org-level-bidang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.org-bidang-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 6px 20px rgba(8, 50, 32, 0.04);
  border-top: 4px solid var(--emerald);
  text-align: center;
}
.bidang-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e7f5ec;
  color: var(--emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.org-bidang-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--forest);
}
.org-bidang-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Fungsional */
.org-functional-box {
  max-width: 640px;
  margin: 2rem auto 0;
  background: var(--mist);
  border: 1px dashed #a9c0b3;
  border-radius: 14px;
  padding: 1.25rem 2rem;
  text-align: center;
}
.org-functional-box strong {
  display: block;
  font-size: 1.05rem;
  color: var(--forest);
}
.org-functional-box p {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Catatan dan Informasi Tambahan */
.org-cards-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
}
.org-info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 4px 18px rgba(8, 50, 32, 0.04);
}
.org-info-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  color: var(--forest);
}
.org-info-card p,
.org-info-card ul {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.org-info-card ul {
  padding-left: 1.25rem;
  margin-top: 0.75rem;
}
.org-info-card li {
  margin-bottom: 0.4rem;
}

@media (max-width: 860px) {
  .org-hero-grid-mockup {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .org-card-leader {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  .leader-accent-line {
    margin: 0.5rem auto 0;
  }
  .org-branches-sub {
    grid-template-columns: 1fr;
  }
  .org-level-bidang {
    grid-template-columns: 1fr;
  }
  .org-cards-info-grid {
    grid-template-columns: 1fr;
  }
}

/* 6. HALAMAN PORTAL INFORMASI PUBLIK */
.public-info-page {
  background: #fafcfb;
}
.pinfo-hero {
  background: linear-gradient(135deg, #eef8f1 0%, #fffdf8 100%);
  border-bottom: 1px solid var(--line);
  padding-block: 4rem 3rem;
}
.pinfo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: 3.5rem;
}
.pinfo-hero-text h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  color: var(--forest);
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.035em;
}
.pinfo-hero-lead {
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.pinfo-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.pinfo-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.pinfo-tag {
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 750;
  box-shadow: 0 2px 6px rgba(8, 50, 32, 0.03);
}
.pinfo-hero-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
}
.pinfo-hero-illustration img {
  max-height: 380px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(8, 50, 32, 0.08));
}

/* 6 Kartu Kanal Informasi Publik */
.pinfo-channels-section {
  padding-block: 5rem;
}
.text-center {
  text-align: center;
}
.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 0.25rem;
}
.pinfo-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}
.pinfo-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 6px 25px rgba(8, 50, 32, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pinfo-card:hover {
  transform: translateY(-5px);
  border-color: var(--emerald);
  box-shadow: 0 14px 35px rgba(8, 50, 32, 0.1);
}
.pinfo-icon-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.pinfo-icon--emerald {
  background: #e7f5ec;
  color: var(--emerald);
}
.pinfo-icon--blue {
  background: #e7f3fb;
  color: #0b6baf;
}
.pinfo-icon--gold {
  background: #fdf6e2;
  color: #c48a12;
}
.pinfo-icon--coral {
  background: #fdeeee;
  color: #c92a2a;
}
.pinfo-icon--indigo {
  background: #ede9fe;
  color: #5b21b6;
}
.pinfo-icon--teal {
  background: #ccfbf1;
  color: #0f766e;
}

.pinfo-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pinfo-category {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.pinfo-body h3 {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  line-height: 1.3;
}
.pinfo-body h3 a {
  color: var(--forest);
  text-decoration: none;
}
.pinfo-body p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex: 1;
}
.pinfo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--forest);
  font-weight: 750;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.18s ease;
}
.pinfo-link:hover {
  gap: 0.65rem;
  color: var(--emerald);
}

/* Alur Permohonan */
.pinfo-procedure-section {
  padding-block: 4.5rem;
  background: var(--mist);
}
.procedure-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 8px 30px rgba(8, 50, 32, 0.04);
}
.procedure-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.procedure-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  color: var(--forest);
  margin: 0.35rem 0 0.75rem;
}
.procedure-header p {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}
.procedure-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}
.procedure-step-item {
  position: relative;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  font-weight: 850;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(12, 122, 75, 0.25);
}
.procedure-step-item h4 {
  font-size: 1.1rem;
  color: var(--forest);
  margin: 0 0 0.5rem;
}
.procedure-step-item p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* CTA Informasi */
.pinfo-cta-section {
  padding-block: 4.5rem;
}
.pinfo-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  background: linear-gradient(135deg, #075b3a 0%, #063f2a 100%);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
}
.pinfo-cta-copy h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  margin: 0 0 0.75rem;
}
.pinfo-cta-copy p {
  color: #dcebe2;
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0;
}
.pinfo-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .pinfo-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pinfo-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .procedure-steps-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pinfo-cta-box {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .pinfo-card-grid {
    grid-template-columns: 1fr;
  }
  .procedure-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* 7. HALAMAN PORTAL PUBLIKASI */
.publications-page {
  background: #fafcfb;
}
.pub-hero {
  background: linear-gradient(135deg, #eef8f1 0%, #fffdf8 100%);
  border-bottom: 1px solid var(--line);
  padding-block: 4rem 3rem;
}
.pub-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: 3.5rem;
}
.pub-hero-text h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  color: var(--forest);
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.035em;
}
.pub-hero-lead {
  font-size: 1.12rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.pub-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.pub-hero-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
}
.pub-hero-illustration img {
  max-height: 380px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(8, 50, 32, 0.08));
}

/* 4 Kanal Publikasi */
.pub-channels-section {
  padding-block: 4.5rem;
}
.pub-channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.pub-channel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(8, 50, 32, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pub-channel-card:hover {
  transform: translateY(-4px);
  border-color: var(--emerald);
  box-shadow: 0 12px 30px rgba(8, 50, 32, 0.09);
}
.pub-ch-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
}
.pub-ch-icon--emerald {
  background: #e7f5ec;
  color: var(--emerald);
}
.pub-ch-icon--gold {
  background: #fdf6e2;
  color: #c48a12;
}
.pub-ch-icon--blue {
  background: #e7f3fb;
  color: #0b6baf;
}
.pub-ch-icon--coral {
  background: #fdeeee;
  color: #c92a2a;
}
.pub-ch-info h3 {
  margin: 0 0 0.45rem;
  font-size: 1.25rem;
  color: var(--forest);
}
.pub-ch-info p {
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.pub-ch-link {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--forest);
  transition: color 0.15s ease;
}
.pub-channel-card:hover .pub-ch-link {
  color: var(--emerald);
}

/* Grid Berita Terbaru */
.pub-latest-section {
  padding-block: 4.5rem;
  background: var(--mist);
}
.pub-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.pub-news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(8, 50, 32, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pub-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(8, 50, 32, 0.09);
}
.pub-news-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef4f0;
}
.pub-news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.pub-news-card:hover .pub-news-media img {
  transform: scale(1.04);
}
.pub-news-body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  flex: 1;
}
.pub-news-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.pub-news-body h3 {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  line-height: 1.35;
}
.pub-news-body h3 a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.pub-news-body h3 a:hover {
  color: var(--forest);
}
.pub-news-body p {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}
.pub-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--forest);
  font-weight: 750;
  font-size: 0.88rem;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.18s ease;
}
.pub-read-more:hover {
  gap: 0.65rem;
  color: var(--emerald);
}

/* Kanal Sosial */
.pub-social-section {
  padding-block: 4.5rem;
}
.pub-social-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 8px 30px rgba(8, 50, 32, 0.04);
}
.pub-social-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  color: var(--forest);
  margin: 0 0 0.75rem;
}
.pub-social-content p {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 600px;
  margin: 0;
}
.pub-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .pub-channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pub-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .pub-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pub-social-box {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .pub-channels-grid {
    grid-template-columns: 1fr;
  }
  .pub-news-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HOMEPAGE NEWS & DOCS SECTION POLISH:
   - Section title 1-line fit (Informasi Terbaru & Dokumen Publik)
   - Balanced Proportional Ombudsman Banner Card
   ========================================================================== */

.home-info-mockup-section {
  padding-block: 4.5rem 5rem;
  background: #fff;
}

.home-info-mockup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.78fr);
  gap: 3.5rem;
  align-items: start;
}

/* Header Judul Bagian: 1 Baris Presisi */
.home-info-mockup-section .section-head--mockup {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 2px solid #eef4f0 !important;
  flex-wrap: nowrap !important;
}

.home-info-mockup-section .section-head--mockup > div {
  flex-shrink: 0;
}

.home-info-mockup-section .section-title-mockup {
  font-size: clamp(1.4rem, 2.1vw, 1.85rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--forest) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.home-info-mockup-section .section-link-more {
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  color: var(--emerald) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  flex-shrink: 0;
}

.home-info-mockup-section .section-link-more:hover {
  color: var(--forest) !important;
  transform: translateX(3px);
}

/* Kartu Berita Kiri */
.news-list--mockup {
  display: grid;
  gap: 1.15rem;
}

.news-item-mockup {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.35rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(8, 50, 32, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.news-item-mockup:hover {
  transform: translateY(-3px);
  border-color: #b9d7c6;
  box-shadow: 0 10px 28px rgba(8, 50, 32, 0.08);
}

.news-item-mockup-thumb {
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef4f0;
}

.news-item-mockup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item-mockup:hover .news-item-mockup-thumb img {
  transform: scale(1.05);
}

.news-item-mockup-content {
  display: flex;
  flex-direction: column;
}

.news-item-mockup-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 750;
}

.news-item-mockup-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.news-item-mockup-title a:hover {
  color: var(--forest);
}

.news-item-mockup-excerpt {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

.news-item-mockup-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.news-item-mockup-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Kolom Kanan: Dokumen Publik */
.home-docs-col {
  display: flex;
  flex-direction: column;
}

.document-list-mockup {
  display: grid;
  gap: 0.85rem;
}

.doc-card-mockup {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(8, 50, 32, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.doc-card-mockup:hover {
  transform: translateY(-2px);
  border-color: #b9d7c6;
  box-shadow: 0 6px 18px rgba(8, 50, 32, 0.06);
}

.doc-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fdeeee;
  color: #c92a2a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.doc-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  color: #17221c;
  line-height: 1.35;
}

.doc-card-meta {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.doc-card-download {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e7f5ec;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.doc-card-download:hover {
  background: var(--forest);
  color: #fff;
  transform: translateY(-1px);
}

/* 2. KARTU BANNER OMBUDSMAN (PROPORSIONAL, SEIMBANG & PROFESIONAL) */
.home-ombudsman-card {
  margin-top: 1.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.15rem;
  box-shadow: 0 4px 20px rgba(8, 50, 32, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
}

.home-ombudsman-card:hover {
  transform: translateY(-3px);
  border-color: #d5a832;
  box-shadow: 0 10px 28px rgba(8, 50, 32, 0.09);
}

.home-ombudsman-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--forest);
  margin-bottom: 0.65rem;
}

.home-ombudsman-badge svg {
  color: var(--emerald);
}

.home-ombudsman-media {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f7faf8;
  border: 1px solid rgba(8, 50, 32, 0.06);
}

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

.home-ombudsman-card:hover .home-ombudsman-media img {
  transform: scale(1.03);
}

.home-ombudsman-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  width: 100%;
  min-height: 42px;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: #fbf6e8;
  border: 1px solid #e8d394;
  color: #5c4405;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.home-ombudsman-btn:hover {
  background: var(--gold);
  color: #17221c;
  border-color: var(--gold);
}

@media (max-width: 960px) {
  .home-info-mockup-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ==========================================================================
   v1.5.7 ENHANCEMENTS: HEADER, SERVICE CARDS, ORG CHART, AND FOOTER
   ========================================================================== */

/* 1. HEADER ALIGNMENT (PERSIS SEJAJAR DENGAN KONTEN UTAMA DI 1920PX) */
.site-header .container.header-inner,
.site-header .container,
.site-header .header-inner {
  width: min(1200px, calc(100% - 2.5rem)) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}

/* 2. CARD LAYANAN: VISUAL 3D PROFESIONAL, RELEVAN & EYE CATCHING */
.service-card--mockup .service-card-header {
  margin-bottom: 1.15rem;
}
.service-card-logo--center {
  height: 146px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: -0.25rem -0.25rem 1.25rem !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(12, 122, 75, 0.1) !important;
  box-shadow: 0 4px 18px rgba(8, 50, 32, 0.05) !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.service-card--mockup:hover .service-card-logo--center {
  transform: translateY(-3px);
  border-color: #8ac4a5 !important;
  box-shadow: 0 10px 28px rgba(8, 50, 32, 0.12) !important;
}
.service-card-logo--center img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 10px !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.service-card--mockup:hover .service-card-logo--center img {
  transform: scale(1.04) !important;
}

/* 3. BAGAN STRUKTUR ORGANISASI HIERARKIS RAPI & PROFESIONAL */
.org-chart-section {
  padding-block: 4rem;
  background: #fbfdfc;
}
.org-tree-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.org-tree-root {
  display: flex;
  justify-content: center;
}
.org-card-leader {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #ffffff;
  border: 2px solid var(--forest);
  border-radius: 20px;
  padding: 1.25rem 2.25rem;
  box-shadow: 0 14px 40px rgba(8, 50, 32, 0.08);
  max-width: 520px;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.org-card-leader:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(8, 50, 32, 0.12);
}
.leader-photo-wrap {
  width: 88px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #b9d7c6;
  background: var(--mist);
}
.leader-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.leader-info {
  flex: 1;
}
.leader-name {
  margin: 0;
  font-size: 1.22rem;
  color: var(--forest);
  font-weight: 800;
  line-height: 1.3;
}
.leader-role {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.92rem;
  color: var(--emerald);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.leader-accent-line {
  height: 3px;
  width: 54px;
  background: var(--gold);
  border-radius: 2px;
}

.org-line-vertical {
  width: 2px;
  height: 36px;
  background: #9bc2ab;
  margin: 0 auto;
}
.org-line-vertical.short {
  height: 24px;
}

/* Tingkat 2: Sekretariat & 2 Subbagian Berdampingan */
.org-level-secretariat {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.org-node-secretariat {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--forest);
  color: #ffffff;
  border-radius: 14px;
  padding: 0.85rem 2.25rem;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(8, 50, 32, 0.14);
}
.org-node-secretariat .node-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.org-subbag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.org-node-subbag {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 1.5px solid #cce0d5;
  border-radius: 14px;
  padding: 1.15rem 1.4rem;
  box-shadow: 0 6px 18px rgba(8, 50, 32, 0.04);
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.org-node-subbag:hover {
  transform: translateY(-2px);
  border-color: var(--emerald);
  box-shadow: 0 10px 25px rgba(8, 50, 32, 0.08);
}
.subbag-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eef8f2;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-node-subbag strong {
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--ink);
  line-height: 1.35;
}

/* Tingkat 3: Tiga Bidang Utama (3 Kolom Horizontal Sejajar) */
.org-bidang-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.org-node-bidang {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  background: #ffffff;
  border: 1.5px solid #cce0d5;
  border-radius: 18px;
  padding: 1.75rem 1.35rem;
  box-shadow: 0 8px 24px rgba(8, 50, 32, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.org-node-bidang::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--emerald);
}
.org-node-bidang--rehab::before {
  background: #0c7a4b;
}
.org-node-bidang--daya::before {
  background: #0284c7;
}
.org-node-bidang--linjamsos::before {
  background: #d5a832;
}
.org-node-bidang:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(8, 50, 32, 0.09);
  border-color: #a3ceb7;
}
.bidang-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eaf5ee;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-node-bidang--daya .bidang-icon-wrap {
  background: #e0f2fe;
  color: #0369a1;
}
.org-node-bidang--linjamsos .bidang-icon-wrap {
  background: #fef3c7;
  color: #92400e;
}
.org-node-bidang strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}

/* Tingkat 4: Kelompok Jabatan Fungsional */
.org-line-dashed {
  width: 2px;
  height: 36px;
  border-left: 2px dashed #9bc2ab;
  margin: 0 auto;
}
.org-level-fungsional {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.org-node-fungsional {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: #f3f7f4;
  border: 1.5px dashed #a8c8b6;
  border-radius: 14px;
  padding: 1.1rem 1.6rem;
  box-shadow: 0 4px 14px rgba(8, 50, 32, 0.03);
}
.fungsional-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.org-node-fungsional strong {
  font-size: 0.98rem;
  font-weight: 750;
  color: #274032;
}

@media (max-width: 900px) {
  .org-bidang-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .org-subbag-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .org-card-leader {
    max-width: 100%;
    padding: 1rem 1.25rem;
  }
}

/* 4. FOOTER: JUDUL DISAMPING LOGO, ICON SOSMED APLIKASI, MAPS & KEDARURATAN 24 JAM */
.footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem !important;
}
.footer-brand .custom-logo {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 4px !important;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.footer-brand .site-name {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: #ffffff !important;
  font-size: 1.18rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}
.footer-brand .site-name small {
  color: #c9e4d5 !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  margin-top: 0.25rem !important;
}

.footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 1.35rem !important;
}
.footer-social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.footer-social-btn:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #17221c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(213, 168, 50, 0.3) !important;
}

/* Judul Kelompok Menu Dibuat Lebih Tegas */
.footer-title,
.site-footer h2 {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 1.25rem !important;
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 0.45rem !important;
}
.footer-title::after,
.site-footer h2::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 32px !important;
  height: 3px !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
}

/* Lokasi Kantor & Maps Diperbesar ke Atas */
.footer-location {
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.footer-location .footer-map-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.footer-location .footer-map-card iframe {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  border: 0 !important;
}
.footer-map-info {
  display: grid !important;
  padding: 1rem 1.15rem !important;
  background: rgba(0, 0, 0, 0.15) !important;
}
.footer-map-info strong {
  font-size: 0.95rem !important;
  color: #ffffff !important;
}
.footer-map-info small {
  margin: 0.2rem 0 0.5rem !important;
  color: #a9c7b7 !important;
}
.footer-map-info a {
  color: #f7e092 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
}
.footer-map-info a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Layanan Kedaruratan 24 Jam Diperbesar & Menonjol */
/* Footer Garis Emas Tunggal & Bersih */
.site-footer {
  border-top: none !important;
}
.footer-accent {
  height: 4px !important;
  background: var(--gold) !important;
  width: 100% !important;
  display: block !important;
}

/* Jam Pelayanan & Kedaruratan Proporsional & Seimbang */
.footer-hours-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}
.footer-office-hours strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  margin-bottom: 0.2rem !important;
}
.footer-office-hours p {
  margin: 0 !important;
  color: #dcebe2 !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}
.footer-emergency-callout {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(213, 168, 50, 0.45) !important;
  border-left: 3.5px solid var(--gold) !important;
  border-radius: 10px !important;
  padding: 0.7rem 0.85rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
.emergency-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: #f7d26d !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.25rem !important;
}
.emergency-desc {
  margin: 0 0 0.45rem !important;
  font-size: 0.82rem !important;
  color: #dcebe2 !important;
  line-height: 1.35 !important;
}
.emergency-tag {
  display: inline-block !important;
  padding: 0.18rem 0.55rem !important;
  background: var(--gold) !important;
  color: #122b1e !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   v1.5.9: HERO CENTERING & VERTICAL BALANCE (UNIVERSAL)
   Memastikan gambar hero di seluruh halaman selalu seimbang di tengah vertikal
   dan tidak tenggelam terlalu ke bawah.
   ========================================================================== */
.directory-hero-grid,
.institution-hero-grid,
.profile-hero-grid-mockup,
.pinfo-hero-grid,
.pub-hero-grid,
.org-hero-grid-mockup {
  align-items: center !important;
}

.directory-illustration,
.institution-illustration,
.profile-hero-illustration,
.pinfo-hero-illustration,
.pub-hero-illustration,
.org-hero-illustration {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(520px, 100%) !important;
}

.directory-illustration img,
.institution-illustration img,
.profile-hero-illustration img,
.pinfo-hero-illustration img,
.pub-hero-illustration img,
.org-hero-illustration img {
  object-position: center center !important;
  object-fit: contain !important;
  max-height: 390px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 14px 28px rgba(8, 50, 32, 0.12)) !important;
  border-radius: 18px !important;
}

/* ==========================================================================
   v1.5.9: HALAMAN PROFIL DINAS (page-profil.php) - DESAIN RESMI & PROFESIONAL
   ========================================================================== */

/* 1. Hero Share Bar */
.profile-share-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}
.profile-share-bar .share-label {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--forest);
}
.profile-share-bar .share-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 2. Sambutan Kepala Dinas */
.profile-speech-section {
  padding-block: 4.5rem;
  background: #ffffff;
}
.profile-speech-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: stretch;
}
.profile-kadis-card {
  background: #ffffff;
  border: 1px solid #ddecde;
  border-radius: 22px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(8, 50, 32, 0.06);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.profile-kadis-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(8, 50, 32, 0.1);
}
.kadis-photo-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #f4faf6;
}
.kadis-photo-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}
.kadis-info-box {
  margin-top: 1.2rem;
  padding-bottom: 0.5rem;
}
.kadis-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--forest);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.kadis-role {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--emerald);
  margin: 0;
}
.kadis-org {
  font-size: 0.85rem;
  color: var(--muted);
  display: block;
  margin-top: 0.2rem;
}

.profile-speech-content {
  background: #ffffff;
  border: 1px solid #ddecde;
  border-radius: 22px;
  padding: clamp(2rem, 3.5vw, 3rem);
  box-shadow: 0 10px 30px rgba(8, 50, 32, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.speech-title {
  font-size: clamp(1.8rem, 2.8vw, 2.3rem);
  font-weight: 800;
  color: var(--forest);
  margin: 0 0 1.5rem;
  letter-spacing: -0.03em;
  position: relative;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e7f2eb;
}
.speech-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2.5px;
  background: var(--gold);
}
.speech-prose p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2d3f35;
  margin-bottom: 1.15rem;
}
.speech-closing {
  font-style: italic;
  font-weight: 600;
  color: var(--forest);
  background: #f3faf5;
  padding: 1.1rem 1.35rem;
  border-left: 4.5px solid var(--emerald);
  border-radius: 0 12px 12px 0;
  margin: 1.5rem 0 !important;
}
.speech-signature {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e7f2eb;
  display: flex;
  flex-direction: column;
}
.speech-signature strong {
  font-size: 1.08rem;
  color: var(--forest);
  font-weight: 800;
}
.speech-signature span {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* 3. Empat Nilai Budaya Kerja */
.profile-values-section {
  padding-block: 4.5rem;
  background: #f8fbf9;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.profile-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.value-card {
  background: #ffffff;
  border: 1px solid #ddecde;
  border-radius: 18px;
  padding: 1.75rem 1.4rem;
  box-shadow: 0 6px 20px rgba(8, 50, 32, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(8, 50, 32, 0.1);
  border-color: var(--emerald);
}
.value-card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.value-card--peduli .value-card-icon-wrap {
  background: linear-gradient(135deg, #10b981, #059669);
}
.value-card--inklusif .value-card-icon-wrap {
  background: linear-gradient(135deg, #0284c7, #0369a1);
}
.value-card--transparan .value-card-icon-wrap {
  background: linear-gradient(135deg, #d97706, #b45309);
}
.value-card--responsif .value-card-icon-wrap {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.value-card-body h3 {
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--forest);
  margin: 0 0 0.5rem;
}
.value-card-body p {
  font-size: 0.92rem;
  color: #4b6354;
  line-height: 1.6;
  margin: 0;
}

/* 4. Panel Visi & Misi */
.profile-vision-section {
  padding-block: 5rem;
  background: #ffffff;
}
.profile-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 2.5rem;
  align-items: stretch;
}
.vision-panel {
  background: linear-gradient(145deg, #ffffff, #f0f9f3);
  border: 1.5px solid #cce5d4;
  border-radius: 22px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(8, 50, 32, 0.05);
  display: flex;
  flex-direction: column;
}
.vision-panel-head,
.mission-panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.vision-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #e7f5ec;
  color: var(--forest);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(12, 80, 48, 0.1);
}
.vision-panel-head h2,
.mission-panel-head h2 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--forest);
  margin: 0;
}
.vision-quote {
  font-size: clamp(1.22rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--forest);
  font-style: italic;
  margin: auto 0;
  padding: 1.5rem 0;
  border: none;
  quotes: none;
}
.mission-panel {
  background: #ffffff;
  border: 1.5px solid #dcebe2;
  border-radius: 22px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(8, 50, 32, 0.05);
}
.mission-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #fef3c7;
  color: #b45309;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.1);
}
.mission-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.15rem;
}
.mission-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: flex-start;
}
.mission-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), #166534);
  color: #ffffff;
  font-weight: 850;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(12, 80, 48, 0.25);
}
.mission-list p {
  margin: 0;
  font-size: 0.98rem;
  color: #2d3f35;
  line-height: 1.55;
  padding-top: 0.35rem;
}

/* 5. Ruang Lingkup Tugas */
.profile-scope-section {
  padding-block: 5rem;
  background: #f8fbf9;
  border-top: 1px solid var(--line);
}
.profile-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
.scope-card {
  background: #ffffff;
  border: 1px solid #ddecde;
  border-radius: 20px;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 8px 25px rgba(8, 50, 32, 0.05);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.scope-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(8, 50, 32, 0.1);
  border-color: var(--emerald);
}
.scope-card-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #e8f5ec;
  color: var(--forest);
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
}
.scope-card h3 {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--forest);
  margin: 0 0 0.85rem;
}
.scope-card p {
  font-size: 0.95rem;
  color: #4b6354;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.scope-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 750;
  font-size: 0.92rem;
  color: var(--emerald);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.scope-card-link:hover {
  gap: 0.75rem;
  color: var(--forest);
}

/* 6. Strip Statistik: Dinsos dalam Angka */
.profile-stats-section {
  padding-block: 4rem;
  background: #ffffff;
}
.profile-stats-card {
  background: linear-gradient(135deg, #0c5030 0%, #06321e 100%);
  border-radius: 24px;
  padding: 2.8rem 2.4rem;
  color: #ffffff;
  box-shadow: 0 16px 45px rgba(6, 50, 30, 0.22);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.profile-stats-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 168, 50, 0.15), transparent 70%);
  pointer-events: none;
}
.profile-stats-label-col h3 {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}
.profile-stats-label-col h3 span {
  color: var(--gold);
  font-size: 1.5rem;
  display: block;
}
.profile-stats-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.stats-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 1.1rem 1rem;
}
.stats-icon {
  color: var(--gold);
  flex-shrink: 0;
}
.stats-num {
  display: block;
  font-size: 1.85rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stats-desc {
  display: block;
  font-size: 0.82rem;
  color: #d1e7db;
  margin-top: 0.2rem;
  line-height: 1.3;
}

/* 7. Banner Call to Action */
.profile-cta-section {
  padding-block: 0 4.5rem;
  background: #ffffff;
}
.profile-cta-card {
  background: linear-gradient(135deg, #0f633d 0%, #0a462a 100%);
  border-radius: 22px;
  padding: 2.5rem 2.8rem;
  box-shadow: 0 14px 40px rgba(10, 70, 42, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: #ffffff;
}
.profile-cta-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.profile-cta-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--gold);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.profile-cta-title {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: #ffffff;
}
.profile-cta-desc {
  font-size: 0.98rem;
  color: #d5ece0;
  margin: 0;
  max-width: 580px;
}
.profile-cta-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.button-white {
  background: #ffffff !important;
  color: var(--forest) !important;
  border: 2px solid #ffffff !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 0.75rem 1.4rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.button-white:hover {
  background: #e8f5ec !important;
  color: #06321e !important;
  transform: translateY(-2px);
}
.button-outline-white {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 0.75rem 1.4rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s ease !important;
}
.button-outline-white:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
}

/* Responsivitas Profil */
@media (max-width: 1024px) {
  .profile-speech-grid {
    grid-template-columns: 280px 1fr;
    gap: 2rem;
  }
  .profile-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-stats-card {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .profile-stats-items-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .profile-speech-grid {
    grid-template-columns: 1fr;
  }
  .profile-kadis-card {
    max-width: 320px;
    margin: 0 auto;
  }
  .profile-values-grid {
    grid-template-columns: 1fr;
  }
  .profile-vision-grid {
    grid-template-columns: 1fr;
  }
  .profile-scope-grid {
    grid-template-columns: 1fr;
  }
  .profile-stats-items-grid {
    grid-template-columns: 1fr;
  }
  .profile-cta-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
  }
  .profile-cta-right {
    width: 100%;
    flex-direction: column;
  }
  .profile-cta-right .button-white,
  .profile-cta-right .button-outline-white {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   v1.6.0: OPTIMASI JARAK VERTIKAL (HEADER-HERO & KONTEN-FOOTER)
   ========================================================================== */

/* 1. Rapatkan Jarak Menu (Navbar) ke Hero */
.home-hero-mockup,
.hero--mockup {
  padding-top: 1.25rem !important;
  padding-bottom: 3.5rem !important;
}

.home-hero-mockup .hero-inner--mockup,
.hero-inner--mockup,
.hero-inner {
  padding-top: 0.75rem !important;
  padding-bottom: 1.75rem !important;
}

.hero-kicker-row {
  margin-bottom: 0.85rem !important;
}

.hero--mockup .hero-heading {
  margin: 0 0 1rem !important;
}

/* 2. Rapatkan Jarak Konten ke Footer */
.psks-section,
.home-psks-section {
  padding-bottom: 2rem !important;
}

.site-footer {
  padding-top: 2.5rem !important;
}

.footer-accent {
  margin-bottom: 2rem !important;
}

/* 3. Rapatkan Jarak di Dalam Footer ke Footer Bottom (Copyright) */
.footer-grid {
  gap: 2rem !important;
}

.footer-bottom {
  margin-top: 1.75rem !important;
  padding-block: 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 1.75rem !important;
    padding-bottom: 1.25rem !important;
  }
  .footer-grid {
    gap: 1.5rem !important;
    padding-block: 1.5rem 0.5rem !important;
  }
  .footer-bottom {
    margin-top: 1rem !important;
    padding-block: 0.75rem !important;
  }
  .site-footer hr {
    display: none !important;
  }
}

/* ==========================================================================
   v1.6.0: REDESAIN BOTTOM NAVIGATION DOCK MOBILE (PREMIUM ELEVATED GLASS DOCK)
   Tampilan bilah navigasi bawah mobile yang profesional, eye-catching,
   berkontras tinggi, dan nyaman disentuh jempol.
   ========================================================================== */
@media (max-width: 760px) {
  body {
    padding-bottom: 74px !important;
  }

  .mobile-dock {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: rgba(5, 43, 29, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(3, 25, 17, 0.35) !important;
    padding: 0.4rem 0 max(0.4rem, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }

  /* Item tombol umum di mobile dock */
  .mobile-dock a,
  .mobile-dock button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-height: 56px !important;
    padding: 0.35rem 0.15rem !important;
    border: 0 !important;
    background: transparent !important;
    color: #e2ece5 !important;
    text-decoration: none !important;
    font: inherit !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-dock a:active,
  .mobile-dock button:active {
    transform: scale(0.92) !important;
  }

  .mobile-dock a span:last-child,
  .mobile-dock button span:last-child {
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.015em !important;
    color: #d1e7db !important;
    line-height: 1.1 !important;
  }

  /* Ikon Standar */
  .mobile-dock .dock-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    color: #e2ece5 !important;
    transition: color 0.2s ease !important;
  }

  .mobile-dock .dock-icon svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    stroke: currentColor !important;
  }

  /* Hover / Focus state */
  .mobile-dock a:hover,
  .mobile-dock button:hover,
  .mobile-dock a:focus,
  .mobile-dock button:focus {
    color: #ffffff !important;
  }
  .mobile-dock a:hover .dock-icon,
  .mobile-dock button:hover .dock-icon {
    color: #ffffff !important;
  }

  /* Tombol Tengah "Pengaduan" (Center Floating Hero Action Pill) */
  .mobile-dock .dock-emphasis {
    position: relative !important;
    margin-top: -14px !important; /* Mencuat anggun ke atas */
  }

  .mobile-dock .dock-emphasis span {
    background: transparent !important;
    border-radius: 0 !important;
  }

  .mobile-dock .dock-emphasis .dock-icon--alert {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fbd86a 0%, #d49818 100%) !important;
    color: #063520 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 18px rgba(213, 168, 50, 0.45), 0 0 0 4px rgba(5, 43, 29, 0.95) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .mobile-dock .dock-emphasis .dock-icon--alert svg {
    stroke: #063520 !important;
    stroke-width: 2.6 !important;
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-dock .dock-emphasis:active .dock-icon--alert {
    transform: scale(0.92) !important;
    box-shadow: 0 2px 8px rgba(213, 168, 50, 0.3) !important;
  }

  /* Teks Pengaduan: Kontras tinggi, tebal, bersih TANPA background */
  .mobile-dock .dock-emphasis span:last-child {
    background: transparent !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
    margin-top: 0.2rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  }
}

/* ==========================================================================
   v1.6.1: STYLING NOTIFIKASI FORMULIR PENGADUAN RESMI
   ========================================================================== */
.complaint-alert-box {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  animation: fadeInAduan 0.3s ease-out;
}
@keyframes fadeInAduan {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.complaint-alert-box--success {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #065f46 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12) !important;
}
.complaint-alert-box--error {
  background: #fef2f2 !important;
  border: 1.5px solid #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12) !important;
}
.complaint-alert-box a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}
.complaint-alert-box a:hover {
  opacity: 0.9 !important;
}