:root{--portal-blue:#1f4fa3;--portal-blue-dark:#163b7a;--portal-green:#079b68;--portal-green-dark:#067451;--portal-soft:#f4faf8;}
body{background:linear-gradient(180deg,#ffffff 0%,#f5fbf9 100%);}
.site-header{background:#fff;border-bottom:1px solid #e2ece8;box-shadow:0 5px 22px rgba(16,61,96,.05);}
.brand-context{color:var(--portal-green-dark);font-weight:700;letter-spacing:.08em;}
.brand-name{color:var(--portal-blue)!important;}
.simkesosmu-hero{position:relative;overflow:hidden;margin-bottom:34px;padding:clamp(42px,6vw,78px);border:1px solid #dcebe6;border-radius:30px;background:linear-gradient(120deg,#fff 0%,#f5fbf9 55%,#eaf6f2 100%);box-shadow:0 18px 50px rgba(13,82,93,.10);}
.simkesosmu-hero:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-150px;top:-220px;background:linear-gradient(135deg,rgba(31,79,163,.12),rgba(7,155,104,.16));}
.simkesosmu-hero-copy{position:relative;z-index:2;max-width:760px;}
.simkesosmu-hero h1{margin:.18rem 0;color:var(--portal-blue-dark);font-size:clamp(3rem,7vw,6.4rem);line-height:.95;letter-spacing:-.055em;}
.simkesosmu-hero h2{margin:.7rem 0;color:var(--portal-green-dark);font-size:clamp(1.5rem,3vw,2.6rem);}
.simkesosmu-hero-copy>p:last-child{color:#405d6b;font-size:1.1rem;font-weight:700;letter-spacing:.05em;}
.simkesosmu-services{margin:0 0 42px;}
.simkesosmu-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.simkesosmu-service-card{position:relative;display:block;min-height:245px;padding:28px;border:1px solid #dce9e5;border-radius:24px;background:#fff;color:#304b58;text-decoration:none;box-shadow:0 12px 32px rgba(16,69,83,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.simkesosmu-service-card h3{margin:24px 0 5px;color:var(--portal-blue-dark);font-size:1.8rem;}
.simkesosmu-service-card .service-recipient{margin:0 0 14px;color:var(--portal-green-dark);font-size:1.05rem;font-weight:800;}
.simkesosmu-service-card.is-active{border-top:5px solid var(--portal-blue);}
.simkesosmu-service-card.is-active:hover{transform:translateY(-5px);border-color:rgba(31,79,163,.45);box-shadow:0 18px 42px rgba(20,64,116,.15);}
.simkesosmu-service-card.is-active strong{display:block;margin-top:22px;color:var(--portal-blue);}
.simkesosmu-service-card.is-progress{border-top:5px solid var(--portal-green);background:linear-gradient(180deg,#fff,#f7fbf9);}
.simkesosmu-service-card .status-badge{position:absolute;top:22px;right:22px;}
.simkesosmu-service-card.is-progress .status-badge{color:var(--portal-green-dark);background:#e7f6f0;}
@media(max-width:900px){.simkesosmu-service-grid{grid-template-columns:1fr;}.simkesosmu-service-card{min-height:auto;}.simkesosmu-hero{padding:34px 26px;}}
.simkesosmu-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:34px;align-items:center;}
.simkesosmu-hero-visual{position:relative;z-index:2;margin:0;}
.simkesosmu-hero-visual img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:24px;box-shadow:0 18px 42px rgba(20,64,116,.14);}
@media(max-width:1000px){.simkesosmu-hero{grid-template-columns:1fr;}.simkesosmu-hero-visual img{max-height:none;}}

/* Hero image-only refinement */
.simkesosmu-hero.simkesosmu-hero-image-only{
  display:block;
  padding:0;
  background:#fff;
}

.simkesosmu-hero.simkesosmu-hero-image-only:after{
  display:none;
}

.simkesosmu-hero-image-only .simkesosmu-hero-visual{
  margin:0;
}

.simkesosmu-hero-image-only .simkesosmu-hero-visual img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}

/* MPKS logo header */
.site-header .brand{
  display:flex;
  align-items:center;
}

.brand-logo-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  display:block;
  width:auto;
  height:clamp(54px,6vw,76px);
  max-width:min(520px,72vw);
  object-fit:contain;
}

@media(max-width:640px){
  .brand-logo{
    height:50px;
    max-width:82vw;
  }
}

/* =========================================================
   SIMKESOSMU — THREE SERVICE MODULES
   ========================================================= */

.simkesosmu-module-page{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.simkesosmu-module-heading{
  text-align:center;
}

.simkesosmu-module-heading .eyebrow{
  margin:0 0 3px;
}

.simkesosmu-module-heading h1{
  margin:0;
  color:var(--portal-blue-dark);
  font-size:clamp(1.8rem,2.6vw,2.5rem);
  line-height:1.05;
}

.simkesosmu-module-heading > p:last-child{
  margin:6px 0 0;
  color:#58707a;
  font-size:.96rem;
}

.simkesosmu-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.simkesosmu-module-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid #dce9e5;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 32px rgba(16,69,83,.09);
}

.simkesosmu-module-image{
  min-height:240px;
  background-image:url("/static/img/simkesosmu-hero.png");
  background-repeat:no-repeat;
  background-size:300% 100%;
  background-color:#f2f8f6;
}

.module-lksa .simkesosmu-module-image{
  background-position:left center;
}

.module-lansia .simkesosmu-module-image{
  background-position:center center;
}

.module-disabilitas .simkesosmu-module-image{
  background-position:right center;
}

.simkesosmu-module-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:18px 20px 20px;
}

.simkesosmu-module-meta{
  min-height:26px;
}

.module-status{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  line-height:1;
}

.status-active{
  color:#fff;
  background:var(--portal-blue);
}

.status-progress{
  color:var(--portal-green-dark);
  background:#e7f6f0;
}

.simkesosmu-module-body h2{
  margin:9px 0 3px;
  color:var(--portal-blue-dark);
  font-size:1.55rem;
}

.simkesosmu-module-body p{
  margin:0 0 15px;
  color:#4c6570;
  font-size:.9rem;
}

.module-button{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  margin-top:auto;
  padding:10px 14px;
  border-radius:12px;
  font-size:.88rem;
  font-weight:800;
  text-align:center;
  text-decoration:none;
}

.module-button-active{
  color:#fff;
  background:linear-gradient(135deg,var(--portal-blue),var(--portal-blue-dark));
}

.module-button-active:hover{
  color:#fff;
  transform:translateY(-1px);
}

.module-button-progress{
  color:#59706b;
  background:#edf3f1;
  cursor:default;
}


/* Desktop/laptop: entire portal fits in one viewport */
@media (min-width:1001px){

  html,
  body{
    height:100%;
  }

  body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow:hidden;
  }

  .site-header{
    flex:0 0 auto;
    min-height:72px;
    padding-top:7px;
    padding-bottom:7px;
  }

  .brand-logo{
    height:58px;
  }

  .main-content{
    display:flex;
    flex:1 1 auto;
    width:min(1440px,calc(100% - 38px));
    min-height:0;
    padding:12px 0 10px;
  }

  .simkesosmu-module-page{
    flex:1;
    min-height:0;
    width:100%;
  }

  .simkesosmu-module-heading{
    flex:0 0 auto;
  }

  .simkesosmu-module-grid{
    flex:1;
    min-height:0;
  }

  .simkesosmu-module-card{
    min-height:0;
  }

  .simkesosmu-module-image{
    flex:1 1 auto;
    min-height:180px;
  }

  .simkesosmu-module-body{
    flex:0 0 auto;
    padding:13px 17px 15px;
  }

  .simkesosmu-module-body h2{
    margin-top:6px;
    font-size:1.35rem;
  }

  .simkesosmu-module-body p{
    margin-bottom:10px;
    font-size:.84rem;
  }

  .module-button{
    min-height:40px;
    padding:8px 12px;
  }

  .site-footer{
    flex:0 0 auto;
    margin:0;
    padding:7px 20px;
    min-height:0;
  }

  .site-footer p{
    margin:0;
    font-size:.75rem;
  }
}


/* Tablet/mobile may scroll normally */
@media (max-width:1000px){

  body{
    overflow:auto;
  }

  .simkesosmu-module-grid{
    grid-template-columns:1fr;
  }

  .simkesosmu-module-image{
    min-height:300px;
  }
}

/* =========================================================
   SIMKESOSMU PORTAL — 3 SERVICE CARDS
   ========================================================= */

.portal-services{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.portal-services-heading{
  flex:0 0 auto;
  text-align:center;
}

.portal-services-heading .eyebrow{
  margin:0 0 3px;
}

.portal-services-heading h1{
  margin:0;
  color:var(--portal-blue-dark);
  font-size:clamp(1.8rem,2.5vw,2.4rem);
  line-height:1.05;
}

.portal-services-heading > p:last-child{
  margin:5px 0 0;
  color:#58707a;
  font-size:.92rem;
}

.portal-service-grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.portal-service-card{
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #dce9e5;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(16,69,83,.09);
}

.portal-service-image{
  flex:1 1 auto;
  min-height:220px;
  background-image:url("/static/img/simkesosmu-hero.png");
  background-repeat:no-repeat;
  background-size:300% auto;
  background-color:#f4faf8;
}

.service-lksa .portal-service-image{
  background-position:left top;
}

.service-lansia .portal-service-image{
  background-position:center top;
}

.service-disabilitas .portal-service-image{
  background-position:right top;
}

.portal-service-content{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  padding:15px 18px 17px;
}

.portal-service-status{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
}

.portal-service-status.is-active{
  color:#fff;
  background:var(--portal-blue);
}

.portal-service-status.is-progress{
  color:var(--portal-green-dark);
  background:#e7f6f0;
}

.portal-service-content h2{
  margin:8px 0 2px;
  color:var(--portal-blue-dark);
  font-size:1.4rem;
}

.portal-service-content p{
  margin:0 0 12px;
  color:#506872;
  font-size:.86rem;
}

.portal-service-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin-top:auto;
  padding:9px 13px;
  border-radius:11px;
  font-size:.85rem;
  font-weight:800;
  text-align:center;
  text-decoration:none;
}

.portal-service-button.is-active{
  color:#fff;
  background:linear-gradient(
    135deg,
    var(--portal-blue),
    var(--portal-blue-dark)
  );
}

.portal-service-button.is-active:hover{
  color:#fff;
  transform:translateY(-1px);
}

.portal-service-button.is-progress{
  color:#60736e;
  background:#edf3f1;
}


/* Laptop / desktop = exactly one viewport */
@media (min-width:1001px){

  html,
  body{
    height:100%;
  }

  body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow:hidden;
  }

  .site-header{
    flex:0 0 auto;
    min-height:68px;
    padding-top:5px;
    padding-bottom:5px;
  }

  .brand-logo{
    height:56px;
  }

  .main-content{
    flex:1 1 auto;
    display:flex;
    min-height:0;
    width:min(1440px,calc(100% - 36px));
    padding:10px 0 9px;
    overflow:hidden;
  }

  .portal-services{
    flex:1 1 auto;
    min-height:0;
  }

  .portal-service-grid{
    flex:1 1 auto;
    min-height:0;
  }

  .portal-service-card{
    height:100%;
  }

  .portal-service-image{
    min-height:0;
  }

  .site-footer{
    flex:0 0 auto;
    min-height:0;
    margin:0;
    padding:6px 18px;
  }

  .site-footer p{
    margin:0;
    font-size:.72rem;
  }
}


/* Tablet and phone may scroll */
@media (max-width:1000px){

  body{
    overflow:auto;
  }

  .portal-service-grid{
    grid-template-columns:1fr;
  }

  .portal-service-image{
    flex:none;
    min-height:320px;
  }
}

/* Final crop tuning for 3 SIMKESOSMU module images */
.portal-service-image{
  background-size:300% auto;
  background-repeat:no-repeat;
  background-color:#f4faf8;
}

.service-lksa .portal-service-image{
  background-position:0% 18%;
}

.service-lansia .portal-service-image{
  background-position:50% 18%;
}

.service-disabilitas .portal-service-image{
  background-position:100% 18%;
}

@media (min-width:1001px){
  .portal-service-image{
    min-height:260px;
    border-bottom:1px solid #e5efeb;
  }
}

/* Disable temporary cropped hero panels */
.portal-service-image{
  background-image:none !important;
  background:#f4faf8 !important;
  min-height:180px;
}

/* Final individual illustrations for each SIMKESOSMU service */
.service-lksa .portal-service-image{
  background-image:url("/static/img/simkesosmu-lksa.svg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.service-lansia .portal-service-image{
  background-image:url("/static/img/simkesosmu-lansia.svg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.service-disabilitas .portal-service-image{
  background-image:url("/static/img/simkesosmu-disabilitas.svg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Realistic photos for SIMKESOSMU service modules */
.service-lksa .portal-service-image{
  background-image:url("/static/img/simkesosmu-lksa.png") !important;
  background-size:cover !important;
  background-position:center !important;
}

.service-lansia .portal-service-image{
  background-image:url("/static/img/simkesosmu-lansia.png") !important;
  background-size:cover !important;
  background-position:center !important;
}

.service-disabilitas .portal-service-image{
  background-image:url("/static/img/simkesosmu-disabilitas.png") !important;
  background-size:cover !important;
  background-position:center !important;
}

/* Stronger SIMKESOSMU portal heading */
.portal-services-heading .eyebrow{
  margin:0 0 5px;
  color:var(--portal-green-dark);
  font-size:1rem;
  font-weight:900;
  letter-spacing:.18em;
}

.portal-services-heading h1{
  margin:0;
  color:var(--portal-blue-dark);
  font-size:clamp(2.5rem,3.4vw,3.35rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
}

.portal-services-heading > p:last-child{
  margin:9px 0 0;
  color:#405d6b;
  font-size:1.12rem;
  font-weight:600;
  line-height:1.25;
}

@media (min-width:1001px){
  .portal-services{
    gap:14px;
  }
}

/* Final SIMKESOSMU main heading */
.portal-services-heading h1{
  margin:0;
  color:var(--portal-blue-dark);
  font-size:clamp(3.2rem,5vw,4.8rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.05em;
}

.portal-services-heading > p:last-child{
  margin:10px 0 0;
  color:#405d6b;
  font-size:1.12rem;
  font-weight:650;
  line-height:1.25;
}

@media (max-width:640px){
  .portal-services-heading h1{
    font-size:2.7rem;
  }

  .portal-services-heading > p:last-child{
    font-size:1rem;
  }
}

/* Enlarge MPKS Muhammadiyah header logo */
.brand-logo{
  width:auto;
  height:74px;
  max-width:min(620px,78vw);
  object-fit:contain;
}

@media (min-width:1001px){
  .site-header{
    min-height:82px;
    padding-top:4px;
    padding-bottom:4px;
  }

  .brand-logo{
    height:72px;
  }
}

@media (max-width:640px){
  .brand-logo{
    height:58px;
    max-width:88vw;
  }
}

/* Center and strengthen MPKS Muhammadiyah institutional logo */
.site-header{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.site-header .brand{
  width:100%;
  padding-left:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.site-header .brand::before{
  display:none !important;
}

.brand-logo-link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-logo{
  display:block;
  width:auto;
  height:96px;
  max-width:72vw;
  object-fit:contain;
}

@media (min-width:1001px){
  .site-header{
    min-height:106px;
    padding:5px 18px;
  }

  .brand-logo{
    height:94px;
  }
}

@media (max-width:640px){
  .site-header{
    min-height:82px;
  }

  .brand-logo{
    height:70px;
    max-width:92vw;
  }
}