/* Shared public-page layout; loaded after the legacy theme. */
body { background: #f7f9f7; }
#konten-utama { scroll-margin-top: 110px; }
#konten-utama :is(h1,h2,h3,h4) { overflow-wrap: break-word; }
#konten-utama :is(.section,.homepage .section) { padding: 3.5rem 0; }
#konten-utama :is(#timeline,#layanan,#galeri,#basic) { background-image: none; background-color: #f7f9f7; }
#konten-utama .section-alt { background: #eef3ef; }
#konten-utama :is(.page-hero,.flat-page-hero) { padding: 3rem 0; background: linear-gradient(115deg,#0b2f1f,#185c40); }
#konten-utama :is(.page-hero,.service-detail-hero) .eyebrow { font-size: .75rem; letter-spacing: 1.5px; color: #e3cf99; margin-bottom: .8rem; }
#konten-utama :is(.page-hero,.service-detail-hero) .page-title { font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1.25; font-weight: 750; margin-bottom: .8rem; color: #fff; }
#konten-utama :is(.page-hero,.service-detail-hero) .page-subtitle { font-size: .98rem; line-height: 1.75; max-width: 760px; color: #e0eee5; margin-bottom: 0; }
#konten-utama .section-head { margin-bottom: 1.75rem; max-width: 780px; }
#konten-utama .section-head.text-center { margin-left: auto; margin-right: auto; }
#konten-utama .section-head h2 { font-size: clamp(1.45rem,2.3vw,1.95rem); font-weight: 700; line-height: 1.35; }
#konten-utama .section-head p { color: #526158; line-height: 1.7; margin-bottom: 0; }
.section-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: .65rem; color: #80612f; }
.btn { border-radius: 9px; font-weight: 600; padding: .65rem 1rem; font-size: .875rem; }
.btn-sm { padding: .45rem .75rem; font-size: .8rem; }
.form-control, .form-select { border-radius: 9px; min-height: 44px; font-size: .9rem; }
.form-control:focus, .form-select:focus { border-color: #83aa91; box-shadow: 0 0 0 3px #145c3b16; }
#konten-utama :is(.feature-card,.program-card,.news-card,.report-card,.routine-program-card,.flat-page-article,.service-detail-article,.service-other-card,.notice-panel,.focus-card,.service-spotlight-card) { border: 1px solid #dfe8e1; border-radius: 16px; box-shadow: 0 6px 20px #173b2b06; }
#konten-utama .feature-card { padding: 1.5rem; }
#konten-utama .feature-card:hover { transform: none; }
#konten-utama :is(.feature-card,.program-card,.news-card,.report-card,.routine-program-card,.focus-card) h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.5; }
#konten-utama :is(.feature-desc,.program-desc,.news-excerpt,.report-desc,.timeline-desc) { font-size: .9rem; line-height: 1.8; color: #48584e; overflow-wrap: anywhere; }
#konten-utama :is(.news-body,.report-body,.program-body,.service-spotlight-body) { padding: 1.4rem; }
#konten-utama :is(.news-body,.report-body) { display: flex; flex-direction: column; gap: .5rem; }
#konten-utama :is(.news-body,.report-body) > :is(.btn,.link-arrow,.d-flex):last-child { margin-top: auto; align-self: flex-start; }
#konten-utama :is(.news-image,.report-image,.program-image) { height: auto; aspect-ratio: 16/10; flex-shrink: 0; }
#konten-utama .link-arrow { font-size: .875rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
#konten-utama .link-arrow::after { content: '\2192'; }
.service-status { display: inline-block; padding: .3rem .7rem; border-radius: 6px; background: #edf4ee; color: #245c42; font-weight: 600; font-size: .75rem; }
#konten-utama .feature-icon { width: 60px; height: 60px; padding: 10px; background: #edf4ee; border-radius: 14px; object-fit: contain; }
#konten-utama .service-spotlight-media { height: 140px; padding: 0px; }
#konten-utama .service-spotlight-media img { object-fit: cover; }
#konten-utama .service-other-media { height: 140px; padding: 25px; background: #edf4ee; }
#konten-utama .service-other-media img { object-fit: contain; }
#konten-utama .service-detail-hero { min-height: 0; align-items: center; padding: 3rem 0; background: linear-gradient(115deg,#0b2f1f,#185c40); }
#konten-utama .service-detail-hero-overlay { background: linear-gradient(90deg,#0b2f1ff2,#185c40d9); }
#konten-utama .service-detail-hero .page-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.4rem; }
#konten-utama .service-detail-hero-badge { padding: 1rem; border-radius: 12px; box-shadow: none; }
#konten-utama .service-detail-body, #konten-utama .service-detail-intro { padding-left: 1.5rem; padding-right: 1.5rem; }
#konten-utama .service-detail-body { overflow-wrap: anywhere; }
#konten-utama .service-detail-sidebar { top: 110px; }
#konten-utama .service-guidance { overflow-wrap: anywhere; padding: 1.5rem; border-top: 1px solid #dfe8e1; }
#konten-utama .service-guidance h2 { font-size: 1.4rem; font-weight: 700; }
#konten-utama .service-guidance h3 { font-size: 1.05rem; font-weight: 700; }
#konten-utama .service-detail-intro h2 { font-size: clamp(1.35rem,2vw,1.7rem); }
#konten-utama :is(.service-action-panel,.service-info-panel) { border-radius: 16px; border: 1px solid #dfe8e1; box-shadow: 0 6px 20px #173b2b06; }
#konten-utama .flat-page-reading-wrap { padding: 0; background: none; }
#konten-utama .flat-page-article::before { display: none; }
#konten-utama .flat-page-article { line-height: 1.85; font-size: .95rem; }
#konten-utama .flat-page-article > :first-child { margin-top: 0; }
#konten-utama :is(.flat-page-article,.news-detail-body,.service-detail-body) :is(h2,h3) { font-size: 1.3rem; font-weight: 700; line-height: 1.5; margin-top: 1.75rem; }
#konten-utama :is(.flat-page-article,.news-detail-body,.service-detail-body) :is(img,iframe,video,table) { max-width: 100%; }
#konten-utama :is(.flat-page-article,.news-detail-body,.service-detail-body) a { color: #145c3b; text-decoration: underline; overflow-wrap: anywhere; }
#konten-utama :is(.flat-page-article,.news-detail-body,.service-detail-body) table { display: block; overflow-x: auto; }
#konten-utama .news-detail-title { font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1.4; }
#konten-utama .news-detail-lead { font-size: 1rem; line-height: 1.8; }
#konten-utama .news-detail-body { font-size: .95rem; line-height: 1.85; overflow-wrap: anywhere; text-align: left; }
#konten-utama .news-detail-cover { max-height: 440px; object-fit: cover; }
#konten-utama .timeline { padding-left: 1.5rem; }
#konten-utama .timeline-item { padding: 0 0 1.8rem 1rem; }
#konten-utama .timeline-item::before { left: -31px; top: .35rem; }
#konten-utama .timeline-date { margin-left: 0; font-size: .8rem; margin-bottom: .75rem; }
#konten-utama .gallery-item { height: auto; background: #fff; border: 1px solid #dfe8e1; box-shadow: 0 6px 20px #173b2b06; display: flex; flex-direction: column; }
#konten-utama .gallery-item img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; flex-shrink: 0; }
#konten-utama .gallery-label { position: static; background: #fff; color: #234535; padding: 1rem; font-size: .82rem; line-height: 1.7; letter-spacing: 0; }
#konten-utama .pagination { gap: .35rem; flex-wrap: wrap; --bs-pagination-color: #145c3b; --bs-pagination-active-bg: #145c3b; --bs-pagination-active-border-color: #145c3b; }
#konten-utama .page-link { border-radius: 8px; min-width: 36px; text-align: center; }
.site-footer { margin-top: 0; background: #0b2f1f; padding: 3rem 0 1.5rem; }
.site-footer p { font-size: .875rem; line-height: 1.8; }
.navbar .dropdown-menu { border: 1px solid #dfe8e1; border-radius: 12px; padding: .5rem; box-shadow: 0 10px 25px #173b2b12; }
.navbar .dropdown-item { white-space: normal; border-radius: 7px; padding: .6rem .8rem; font-size: .85rem; }
.navbar .dropdown-item.active { background: #edf4ee; color: #145c3b; font-weight: 700; }
.navbar .dropdown-toggle.active { color: #145c3b; font-weight: 700; }
.homepage .home-banner { padding: 0; background: #0b2f1f; }
.homepage .home-banner-slide { position: relative; min-height: 520px; background: #0b2f1f; }
.home-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.home-banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#0b2f1f05 10%,#0b2f1f25 35%,#0b2f1fe6 65%,#0b2f1ff5 100%); }
.home-banner-content { position: relative; min-height: 620px; display: flex; align-items: center; justify-content: flex-end; padding-top: 3rem; padding-bottom: 3rem; }
.home-banner-copy { width: 48%; }
.home-banner-number { color: #d8dcb2; display: block; font-size: .72rem; letter-spacing: 2px; margin-bottom: 1rem; }
.homepage .home-banner .display-5 { font-size: clamp(1.8rem,2.5vw,2.65rem); color: #fff; }
.homepage .home-banner .eyebrow { font-size: .68rem; line-height: 1.7; }
.homepage .home-banner .lead { font-size: .95rem; }
.homepage .home-banner .lead p:last-child { margin-bottom: 0; }
.home-banner .owl-nav { margin: 0; padding: .8rem 0 .3rem; }
.home-banner .owl-dots { padding: 0 0 .9rem; text-align: center; }
.home-banner .owl-dot { padding: .5rem !important; }
.home-banner .owl-dot span { display: block; width: 22px; height: 4px; border-radius: 6px; background: #ffffff66; }
.home-banner .owl-dot.active span { background: #f4b860; }
/* A light leaf motif on public-page backgrounds, behind the readable content. */
#konten-utama :is(.page-hero,.flat-page-hero,.section-alt:not(.parallax-section),.contact-page-content) { position: relative; isolation: isolate; }
#konten-utama :is(.page-hero,.flat-page-hero,.section-alt:not(.parallax-section),.contact-page-content)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/pups-pattern.svg") repeat; background-size: 160px 160px; opacity: .45;
  mask-image: linear-gradient(110deg,transparent 15%,#000 100%);
}
#konten-utama :is(.page-hero,.flat-page-hero)::after { opacity: .65; }
.site-footer { position: relative; isolation: isolate; border-top: 3px solid #bda263; padding-top: 3.25rem; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/pups-pattern.svg") repeat; background-size: 160px 160px; opacity: .3; }
.site-footer .row { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2rem; }
.site-footer .footer-column { min-width: 0; }
.site-footer .footer-brand { display: grid; grid-template-columns: 126px minmax(0,1fr); gap: 1rem; align-items: center; color: #fff; text-decoration: none; }
.site-footer .footer-logo-panel { display: flex; align-items: center; justify-content: center; padding: .6rem; border-radius: 10px; background: #fff; }
.site-footer .brand-logo { width: 106px; height: 48px; object-fit: contain; }
.site-footer .footer-identity { line-height: 1.55; }
.site-footer .footer-identity strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .35rem; }
.site-footer .footer-identity span { font-size: .7rem; color: #b9d2c3; }
.site-footer .footer-description { margin: 1.2rem 0; color: #b9d2c3; font-size: .82rem; max-width: 48ch; }
.site-footer :is(.footer-contact-list,.footer-social-links) { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-contact-list { border-top: 1px solid #ffffff1c; padding-top: 1.1rem; display: grid; gap: .85rem; }
.site-footer .footer-contact-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .8rem; line-height: 1.8; color: #c5d9cc; }
.site-footer .footer-contact-list li > i { flex: 0 0 18px; color: #d2bb80; font-size: 1rem; }
.site-footer .footer-contact-list :is(span,a) { min-width: 0; overflow-wrap: anywhere; }
.site-footer h2.h6 { font-size: .9rem; margin: .25rem 0 1.25rem; font-weight: 700; }
.site-footer .footer-links li { margin-bottom: .45rem; }
.site-footer a { color: #e1f0e7; text-decoration: none; }
.site-footer a:hover { color: #f2d493; }
.site-footer a:focus-visible { outline: 2px solid #e3c982; outline-offset: 4px; border-radius: 4px; }
.site-footer .footer-quick-links a { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; font-size: .85rem; line-height: 1.6; }
.site-footer .footer-quick-links i { font-size: .65rem; flex: 0 0 12px; color: #92b7a0; }
.site-footer .footer-channel-links { display: grid; gap: .6rem; }
.site-footer .footer-channel-links li { margin: 0; }
.site-footer .footer-channel-links a { display: flex; gap: .65rem; align-items: center; padding: .75rem; min-height: 44px; border: 1px solid #ffffff24; border-radius: 9px; background: #ffffff05; font-size: .8rem; line-height: 1.6; }
.site-footer .footer-channel-links a > span:not(.visually-hidden) { flex: 1; min-width: 0; }
.site-footer .footer-channel-links a > i { flex: 0 0 16px; }
.site-footer .footer-channel-links a > i:last-of-type { font-size: .75rem; color: #92b7a0; }
.site-footer .footer-social-title { color: #fff; font-size: .85rem; font-weight: 700; margin: 1.5rem 0 .8rem; }
.site-footer .footer-social-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer .footer-social-links a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .7rem; min-height: 44px; border: 1px solid #ffffff24; border-radius: 9px; font-size: .75rem; }
.site-footer .footer-social-links i { font-size: 1rem; }
.site-footer .footer-social-empty { font-size: .8rem; color: #b9d2c3; margin: 0; }
.site-footer .footer-bottom { align-items: center; gap: .75rem; margin-top: 2.25rem; padding: 1.25rem 0 .5rem; border-color: #ffffff24; font-size: .75rem; color: #a9c5b5; }
.site-footer .footer-bottom a { color: #c5d9cc; padding: .3rem 0; }
@keyframes fe-content-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fe-reveal-in { animation: fe-content-enter .55s cubic-bezier(.2,.65,.3,1) both; animation-delay: var(--fe-reveal-delay,0ms); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #konten-utama :is(.feature-card,.routine-program-card,.news-card,.report-card,.program-card,.service-spotlight-card) { transition: transform .22s ease, box-shadow .22s ease; }
  #konten-utama :is(.feature-card,.routine-program-card,.news-card,.report-card,.program-card,.service-spotlight-card):hover { transform: translateY(-3px); box-shadow: 0 10px 26px #173b2b12; }
  .site-footer :is(.footer-channel-links,.footer-social-links) a { transition: background-color .2s ease, border-color .2s ease; }
  .site-footer :is(.footer-channel-links,.footer-social-links) a:hover { background: #ffffff10; border-color: #d2bb8070; }
}
@media (max-width: 575.98px) {
  .site-footer .row { --bs-gutter-x: 1.5rem; }
  .site-footer .footer-brand { grid-template-columns: 108px minmax(0,1fr); gap: .75rem; }
  .site-footer .brand-logo { width: 90px; height: 42px; }
  .site-footer .footer-identity strong { font-size: .82rem; }
  .site-footer .footer-identity span { font-size: .65rem; }
  .site-footer .footer-column + .footer-column { border-top: 1px solid #ffffff1c; padding-top: 1.5rem; }
  .site-footer .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .fe-reveal-in { animation: none !important; } }
@media print { .fe-reveal-in { animation: none !important; } }
/* Stacked contact cards use natural height, overriding the legacy full height. */
#konten-utama .contact-page-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
#konten-utama .contact-page-links a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border: 1px solid #ffffff40; border-radius: 9px; color: #fff; font-size: .82rem; text-decoration: none; }
#konten-utama .contact-page-links a:hover { background: #ffffff12; border-color: #ffffff80; }
#konten-utama .contact-page-content :is(.contact-directory,.contact-channel-card) { height: auto; scroll-margin-top: 120px; }
#konten-utama .contact-card-heading { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
#konten-utama .contact-card-heading > div { min-width: 0; }
#konten-utama .contact-card-heading h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.4; color: #234535; margin: .2rem 0 0; }
#konten-utama .contact-card-eyebrow { display: block; font-size: .65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #69796e; }
#konten-utama .contact-page-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: #edf4ee; color: #23694e; font-size: 1.4rem; }
#konten-utama .contact-page-icon-gold { background: #faf2df; color: #856126; }
#konten-utama :is(.contact-card-intro,.contact-channel-card > p) { color: #526158; font-size: .9rem; line-height: 1.8; }
#konten-utama .contact-directory-details { margin: 1.25rem 0 0; }
#konten-utama .contact-directory-details > div { padding: 1rem 0; border-top: 1px solid #edf1ee; }
#konten-utama .contact-directory-details dt { display: flex; align-items: center; gap: .75rem; font-size: .85rem; font-weight: 650; line-height: 1.5; }
#konten-utama .contact-directory-details dt i { flex: 0 0 22px; width: 22px; text-align: center; font-size: 1.1rem; color: #658875; }
#konten-utama .contact-directory-details dd { margin: .4rem 0 0 34px; color: #526158; font-size: .875rem; line-height: 1.75; }
#konten-utama .contact-page-content a:not(.btn) { overflow-wrap: anywhere; }
#konten-utama :is(.contact-directory-details,.contact-verification,.contact-ministry-address) a { color: #145c3b; text-decoration: underline; text-underline-offset: 3px; }
#konten-utama .contact-verification { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem 0; font-size: .75rem; line-height: 1.7; color: #69796e; }
#konten-utama .contact-ministry-address { display: flex; gap: .85rem; padding: 1.1rem; margin-top: 1rem; border-radius: 12px; background: #f2f6f3; }
#konten-utama .contact-ministry-address > i { flex: 0 0 24px; color: #658875; font-size: 1.25rem; }
#konten-utama .contact-ministry-address > div { min-width: 0; }
#konten-utama .contact-ministry-address h3 { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; color: #234535; }
#konten-utama .contact-ministry-address p { font-size: .85rem; line-height: 1.75; margin-bottom: .65rem; color: #526158; }
#konten-utama .contact-ministry-address .contact-address-source { font-size: .75rem; margin-bottom: 0; }
#konten-utama .contact-channel-stack { display: grid; gap: 1.5rem; }
#konten-utama .contact-channel-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 44px; white-space: normal; }
#konten-utama .contact-channel-hint { display: block; margin-top: .65rem; font-size: .75rem; line-height: 1.6; color: #69796e; }
#konten-utama .contact-channel-unavailable { display: flex; align-items: baseline; gap: .5rem; padding: .75rem; border-radius: 9px; background: #f2f6f3; margin-bottom: 0; }
#konten-utama .contact-channel-notice { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid #dfe8e1; border-radius: 12px; background: #edf4ee; }
#konten-utama .contact-channel-notice > i { flex: 0 0 20px; color: #23694e; font-size: 1.15rem; }
#konten-utama .contact-channel-notice p { margin: 0; font-size: .85rem; line-height: 1.8; color: #48584e; }
@media (max-width: 575.98px) {
  #konten-utama .contact-card-heading h2 { font-size: 1.15rem; }
  #konten-utama .contact-page-links { gap: .5rem; }
  #konten-utama .contact-page-links a { padding: .6rem .7rem; font-size: .75rem; }
  #konten-utama .contact-channel-button { display: flex; width: 100%; }
  #konten-utama .contact-ministry-address { padding: 1rem; gap: .6rem; }
  #konten-utama .contact-channel-notice { padding: 1rem; }
}
@media (min-width: 1200px) { .navbar-nav .nav-link { padding-right: .8rem; padding-left: .8rem; font-size: .875rem; } }
@media (max-width: 991.98px) {
  #konten-utama :is(.section,.homepage .section) { padding: 2.5rem 0; }
  #konten-utama :is(.page-hero,.service-detail-hero) { padding: 2.5rem 0; }
  .homepage .home-banner-slide { min-height: 0; }
  .home-banner-image { position: relative; height: auto; aspect-ratio: 16/9; object-position: center 40%; }
  .home-banner-shade { display: none; }
  .home-banner-content { min-height: 0; padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .home-banner-copy { width: 100%; max-width: 700px; margin-right: auto; }
  .home-banner-number { margin-bottom: .65rem; }
  .homepage .home-banner .display-5 { font-size: clamp(1.65rem,4vw,2.1rem); }
  #konten-utama .service-detail-sidebar { position: static; }
}
@media (max-width: 575.98px) {
  .topbar .topbar-info { display: none; }
  .topbar .topbar-meta { font-size: .7rem; }
  .navbar .navbar-brand { gap: .55rem; }
  .navbar .brand-identity { padding-left: .55rem; }
  .navbar .brand-identity .brand-title { font-size: .68rem; }
  .navbar .brand-identity .brand-subtitle { font-size: .55rem; }
  .home-banner-image { aspect-ratio: 4/3; }
  #konten-utama :is(.page-hero,.service-detail-hero) { padding: 2rem 0; }
  #konten-utama :is(.feature-card,.flat-page-article) { padding: 1.25rem; }
  #konten-utama :is(.news-body,.report-body,.program-body) { padding: 1.2rem; }
  .site-footer { padding-top: 2rem; }
  .pups-chatbot-toggle span { display: none; }
  .pups-chatbot-toggle { width: 48px; height: 48px; justify-content: center; padding: 0; }
}