:root{--pkm-green:#0f9d58;--pkm-green-dark:#087443;--pkm-blue:#163b72;--pkm-blue-dark:#0b2a55;--pkm-cyan:#18b6c9;--pkm-bg:#f5f9fc;--pkm-text:#26384d}
body{color:var(--pkm-text);background:#fff}
.pkm-header{background:var(--pkm-blue-dark)!important;color:#fff!important;box-shadow:0 4px 18px rgba(10,35,70,.12)}
.pkm-header .branding{min-height:88px;background:var(--pkm-blue-dark)!important}
.pkm-header .container{min-height:88px}
.pkm-logo{display:flex!important;align-items:center;gap:12px;text-decoration:none!important;color:#fff!important}
.pkm-logo img{width:52px!important;height:52px!important;object-fit:contain}
.pkm-logo span{font-size:16px;line-height:1.05;color:#fff;font-weight:600}
.pkm-logo strong{font-size:19px;color:#fff}
.pkm-navmenu ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.pkm-navmenu a{font-size:14px!important;font-weight:600!important;color:#fff!important;padding:10px 11px!important;border-radius:8px;text-decoration:none!important;white-space:nowrap}
.pkm-navmenu a:hover,.pkm-navmenu a.active{color:#fff!important;background:rgba(255,255,255,.12)}
.pkm-navmenu .emergency-link{background:#1e88ff!important;border-radius:24px!important;padding:11px 18px!important;margin-left:5px}
.mobile-nav-toggle{display:none;border:0;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.pkm-hero{padding:160px 0 75px;background:linear-gradient(110deg,rgba(7,43,91,.96),rgba(13,113,107,.88)),url('../img/bg/abstract-bg-3.webp') center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
.pkm-hero:after{content:"";position:absolute;inset:auto -10% -120px -10%;height:220px;background:#fff;border-radius:50% 50% 0 0/70% 70% 0 0}
.pkm-hero h1{font-size:clamp(40px,5vw,68px);line-height:1.04;font-weight:800;margin:18px 0}
.pkm-hero h1 span{color:#63e1c2}
.pkm-hero .lead{font-size:19px;line-height:1.7;max-width:700px;color:rgba(255,255,255,.9)}
.pkm-badge,.pkm-eyebrow,.pkm-section-heading>span{display:inline-block;font-size:12px;letter-spacing:1.5px;font-weight:800;color:var(--pkm-cyan)}
.pkm-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.pkm-btn,.pkm-btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:700;transition:.2s}.pkm-btn{background:var(--pkm-green);color:#fff!important}.pkm-btn:hover{background:var(--pkm-green-dark);transform:translateY(-1px)}.pkm-btn-outline{border:1px solid rgba(255,255,255,.55);color:#fff!important}.pkm-btn-outline:hover{background:#fff;color:var(--pkm-blue)!important}
.pkm-location{margin-top:24px;font-size:13px;color:rgba(255,255,255,.75)}
.pkm-hero-card{background:rgba(255,255,255,.96);color:var(--pkm-text);padding:32px;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.18);max-width:430px;margin-left:auto}.hero-icon{width:58px;height:58px;border-radius:16px;background:#e2f7ed;color:var(--pkm-green);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800}.pkm-hero-card h3{margin:20px 0 10px;font-weight:800}.pkm-hero-card p{line-height:1.7;color:#5b6b7c}.hero-contact{border-top:1px solid #e5ebf0;padding-top:18px;margin-top:18px;display:flex;gap:12px;flex-direction:column}.hero-contact strong{font-size:28px;color:var(--pkm-green)}.hero-contact span{font-size:13px;color:#637487}
.pkm-quick{padding:0 0 35px;margin-top:-15px;position:relative;z-index:3}.pkm-info-card{background:#fff;border:1px solid #e5ebf0;border-radius:14px;padding:20px;display:flex;gap:14px;height:100%;box-shadow:0 8px 30px rgba(23,60,90,.07)}.info-icon{width:45px;height:45px;flex:0 0 45px;border-radius:12px;background:#eaf8f0;color:var(--pkm-green);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}.pkm-info-card div:last-child{display:flex;flex-direction:column}.pkm-info-card small{color:#6e7d8d}.pkm-info-card strong{font-size:18px;margin:3px 0}.pkm-info-card span{font-size:12px;color:#7a8997}.emergency-card .info-icon{background:#fff0ed;color:#d84a34}
.section{padding:80px 0}.pkm-section{background:#fff}.pkm-news-section{background:var(--pkm-bg)!important}.pkm-section-heading{text-align:center;max-width:760px;margin:0 auto 42px}.pkm-section-heading h2{font-size:38px;font-weight:800;color:var(--pkm-blue-dark);margin:8px 0 10px}.pkm-section-heading p{color:#718092;margin:0}
.pkm-feature-card{height:100%;padding:28px;border:1px solid #e5edf2;border-radius:18px;background:#fff;box-shadow:0 8px 30px rgba(20,60,90,.05)}.feature-number{font-size:13px;font-weight:800;color:var(--pkm-green);margin-bottom:18px}.pkm-feature-card h3{font-size:21px;font-weight:800}.pkm-feature-card p{color:#718092;line-height:1.7;margin:0}
.pkm-news-card{height:100%;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e4ebf0;box-shadow:0 8px 28px rgba(20,60,90,.07)}.pkm-news-image{width:100%;height:220px;object-fit:cover;background:#eaf0f4}.pkm-news-body{padding:22px}.pkm-news-meta{font-size:12px;color:#788797;margin-bottom:8px}.pkm-news-body h3{font-size:20px;line-height:1.35;font-weight:800;margin:0 0 10px;color:var(--pkm-blue-dark)}.pkm-news-body p{font-size:14px;color:#718092;line-height:1.65}.pkm-news-link{font-size:14px;font-weight:700;color:var(--pkm-green);text-decoration:none}.pkm-loading{color:#718092}
.pkm-placeholder{border:1px dashed #cbd9e3;background:#fbfdff;border-radius:18px;padding:34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.pkm-placeholder strong{font-size:20px}.pkm-placeholder span{color:#718092}.pkm-placeholder a{color:var(--pkm-green);font-weight:700;text-decoration:none}
.pkm-about-section{background:linear-gradient(135deg,#eef9f5,#f4f9ff)}.pkm-about-section h2{font-size:42px;font-weight:800;color:var(--pkm-blue-dark);margin:10px 0 18px}.pkm-about-section p{line-height:1.8;color:#617286}.pkm-about-box{background:#fff;border-radius:20px;padding:32px;box-shadow:0 15px 40px rgba(20,60,90,.08)}.pkm-about-box strong{font-size:22px}.pkm-villages{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.pkm-villages span{background:#edf8f2;color:var(--pkm-green-dark);padding:12px;border-radius:10px;font-weight:700;text-align:center}
.pkm-emergency-section{background:var(--pkm-blue-dark);color:#fff}.pkm-emergency-section span{font-size:12px;letter-spacing:1.5px;color:#63e1c2;font-weight:800}.pkm-emergency-section h2{font-size:38px;font-weight:800;margin:8px 0}.pkm-emergency-section p{color:rgba(255,255,255,.75)}.pkm-emergency-btn{display:inline-flex;padding:14px 22px;background:#ef6251;color:#fff!important;text-decoration:none;border-radius:10px;font-weight:800}
.pkm-footer{background:#071d3a;color:#fff;padding:36px 0}.pkm-footer-brand{display:flex;gap:14px;align-items:center}.pkm-footer-brand img{width:52px;height:52px;object-fit:contain}.pkm-footer-brand div{display:flex;flex-direction:column}.pkm-footer-brand strong{font-size:16px}.pkm-footer-brand span,.pkm-footer p,.pkm-footer small{color:rgba(255,255,255,.65);font-size:13px}.pkm-footer p{margin:0 0 5px}
@media(max-width:1199px){.pkm-navmenu ul{gap:0}.pkm-navmenu a{padding:9px 7px!important;font-size:13px!important}.pkm-navmenu .emergency-link{padding:10px 13px!important}}
/* =========================================================
   MOBILE NAVIGATION - DRAWER DARI KANAN
   UPTD PUSKESMAS GEYER 2
   ========================================================= */

@media (max-width: 991px) {

    /* Tombol hamburger */
    .mobile-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        border: 0;
        background: transparent;

        color: #ffffff;
        font-size: 30px;
        line-height: 1;

        cursor: pointer;
        position: relative;
        z-index: 10002;

        padding: 0;
    }


    /* =====================================================
       OVERLAY
       ===================================================== */

    .pkm-mobile-overlay {
        position: fixed;
        inset: 0;

        background: rgba(0, 0, 0, 0.48);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

        z-index: 9998;
    }

    .pkm-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* =====================================================
       DRAWER
       ===================================================== */

    .pkm-navmenu {
        position: static !important;
    }


    .pkm-navmenu ul {
        display: flex !important;

        position: fixed !important;

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

        width: min(340px, 86vw);

        height: 100dvh;

        margin: 0 !important;

        padding: 92px 20px 30px !important;

        background: #ffffff;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 7px !important;

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

        box-shadow:
            -12px 0 35px rgba(0, 0, 0, 0.18);

        transform: translateX(105%);

        visibility: hidden;

        transition:
            transform 0.32s cubic-bezier(.4,0,.2,1),
            visibility 0.32s ease;

        z-index: 9999;
    }


    /* Drawer terbuka */
    .pkm-navmenu.mobile-open ul {
        transform: translateX(0);

        visibility: visible;
    }


    /* =====================================================
       ITEM MENU
       ===================================================== */

    .pkm-navmenu ul li {
        width: 100%;
        flex: 0 0 auto;
    }


    .pkm-navmenu ul li a {
        display: flex !important;

        align-items: center;

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

        padding: 14px 16px !important;

        border-radius: 10px;

        color: var(--pkm-blue-dark) !important;

        background: transparent;

        font-size: 16px !important;
        font-weight: 600 !important;

        line-height: 1.3;

        white-space: normal !important;

        text-decoration: none !important;

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


    /* Hover / active */
    .pkm-navmenu ul li a:hover,
    .pkm-navmenu ul li a.active {
        background: #eaf8f1 !important;
        color: var(--pkm-green-dark) !important;
    }


    /* =====================================================
       TOMBOL LAYANAN DARURAT
       ===================================================== */

    .pkm-navmenu ul li a.emergency-link {
        display: flex !important;

        justify-content: center;

        min-height: 52px;

        margin-top: 10px !important;

        padding: 14px 18px !important;

        background: #1e88ff !important;

        color: #ffffff !important;

        border-radius: 12px !important;

        text-align: center;

        font-size: 16px !important;
        font-weight: 700 !important;
    }


    .pkm-navmenu ul li a.emergency-link:hover {
        background: #1477df !important;
        color: #ffffff !important;
    }


    /* =====================================================
       HEADER TETAP DI ATAS
       ===================================================== */

    .pkm-header {
        position: relative;
        z-index: 10001;
    }


    /* Saat drawer dibuka, tombol X berada di atas drawer */
    body.pkm-menu-open .mobile-nav-toggle {
        position: fixed;

        top: 20px;
        right: 18px;

        width: 48px;
        height: 48px;

        background: var(--pkm-blue-dark);

        border-radius: 50%;

        z-index: 10003;

        box-shadow: 0 4px 15px rgba(0,0,0,.15);
    }


    /* =====================================================
       KUNCI SCROLL HALAMAN
       ===================================================== */

    body.pkm-menu-open {
        overflow: hidden;
    }


    /* =====================================================
       MOBILE HEADER
       ===================================================== */

    .pkm-logo img {
        width: 50px !important;
        height: 50px !important;
        max-height: 50px !important;
    }

    .pkm-logo span {
        font-size: 15px !important;
    }

    .pkm-location {
        font-size: 13px !important;
        line-height: 1.5;
        flex-wrap: wrap;
    }


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

    .pkm-hero {
        padding-top: 135px;
    }

    .pkm-hero-card {
        margin: 20px 0 0;
        max-width: none;
    }

    .pkm-hero:after {
        display: none;
    }
}


/* =========================================================
   HP KECIL
   ========================================================= */

@media (max-width: 575px) {

    .pkm-navmenu ul {
        width: min(320px, 88vw);

        padding:
            88px
            16px
            25px !important;
    }

    .pkm-navmenu ul li a {
        min-height: 54px;

        padding: 15px 16px !important;

        font-size: 16px !important;
    }

    .pkm-navmenu ul li a.emergency-link {
        min-height: 54px;
    }

    .mobile-nav-toggle {
        width: 44px;
        height: 44px;

        font-size: 28px;
    }

    body.pkm-menu-open .mobile-nav-toggle {
        top: 18px;
        right: 14px;

        width: 44px;
        height: 44px;
    }
}
@media(max-width:575px){.pkm-logo img{width:45px!important;height:45px!important}.pkm-logo span{font-size:13px}.pkm-logo strong{font-size:16px}.pkm-hero h1{font-size:42px}.pkm-hero .lead{font-size:16px}.section{padding:60px 0}.pkm-section-heading h2{font-size:32px}.pkm-villages{grid-template-columns:1fr}}
/* =========================================================
   PENYEMPURNAAN HEADER & HERO
   UPTD PUSKESMAS GEYER 2
   ========================================================= */


/* ---------------------------------------------------------
   1. LOGO HEADER
   --------------------------------------------------------- */

.pkm-logo img {
    width: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: contain;
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   2. NAMA PUSKESMAS DI SAMPING LOGO
   --------------------------------------------------------- */

.pkm-logo {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
}

.pkm-logo span {
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
}

.pkm-logo span strong {
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   3. TULISAN KECIL DI ATAS HERO
   PEMERINTAH KABUPATEN GROBOGAN
   --------------------------------------------------------- */

.pkm-hero .pkm-badge {
    color: #53e5d0 !important;
    font-weight: 800 !important;
    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   4. JUDUL UTAMA HERO
   UPTD Puskesmas Geyer 2
   --------------------------------------------------------- */

.pkm-hero h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.pkm-hero h1 span {
    color: #5ce1ca !important;
    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   5. VISI / SUBTITLE HERO
   --------------------------------------------------------- */

.pkm-hero .lead {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 400;
}


/* ---------------------------------------------------------
   6. LOKASI
   Kecamatan Geyer • Kabupaten Grobogan • Jawa Tengah
   --------------------------------------------------------- */

.pkm-location {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    display: inline-flex;
    align-items: center;

    margin-top: 22px;
    padding: 8px 14px;

    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ---------------------------------------------------------
   7. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .pkm-logo img {
        width: 50px !important;
        height: 50px !important;
        max-height: 50px !important;
    }

    .pkm-logo span {
        font-size: 15px !important;
    }

    .pkm-location {
        font-size: 13px !important;
        line-height: 1.5;
        flex-wrap: wrap;
    }
}
/* =========================================================
   BERITA
   ========================================================= */

.pkm-page-hero {
  padding-top: 170px;
  padding-bottom: 70px;
}


.pkm-search-box {
  max-width: 100%;
}


.pkm-search-box input {
  height: 56px;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  padding: 0 20px;
  font-size: 16px;
  color: #163a67;
  box-shadow: 0 8px 25px rgba(15, 61, 105, 0.05);
}


.pkm-search-box input:focus {
  border-color: #0f9d58;
  box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.10);
}


/* Kartu berita */

.pkm-news-card {
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 61, 105, 0.06);
  transition: all 0.25s ease;
}


.pkm-news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(15, 61, 105, 0.12);
}


.pkm-news-image-wrap {
  width: 100%;
  height: 230px;
  background: #eef7f2;
  overflow: hidden;
}


.pkm-news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.pkm-news-body {
  padding: 25px;
}


.pkm-news-meta {
  margin-bottom: 10px;
}


.pkm-category {
  display: inline-block;
  padding: 7px 13px;
  background: #e8f8f0;
  color: #0f9d58;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
}


.pkm-news-date {
  margin-bottom: 10px;
  color: #7890aa;
  font-size: 14px;
}


.pkm-news-card h3 {
  color: #123b6d;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 12px;
}


.pkm-news-card p {
  color: #67809c;
  line-height: 1.75;
  margin-bottom: 18px;
}


.pkm-news-link {
  color: #0f9d58;
  font-weight: 700;
  text-decoration: none;
}


.pkm-news-link:hover {
  color: #087b44;
}


/* =========================================================
   DETAIL BERITA
   ========================================================= */

.pkm-detail-card {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 150px;
}


.pkm-detail-article {
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 12px 40px rgba(15, 61, 105, 0.07);
}


.pkm-detail-category {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 30px;
  background: #e8f8f0;
  color: #0f9d58;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}


.pkm-detail-article h1 {
  color: #123b6d;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.15;
  margin-bottom: 20px;
}


.pkm-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  color: #7189a2;
  font-size: 15px;
  padding-bottom: 25px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e4ebf2;
}


.pkm-detail-image {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 30px;
  background: #eef7f2;
}


.pkm-detail-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}


.pkm-detail-summary {
  padding: 25px 28px;
  background: #f3f8fb;
  border-left: 4px solid #0f9d58;
  border-radius: 0 14px 14px 0;
  margin: 30px 0;
}


.pkm-detail-summary strong {
  display: block;
  color: #123b6d;
  font-size: 18px;
  margin-bottom: 10px;
}


.pkm-detail-summary p {
  color: #617b96;
  margin: 0;
  line-height: 1.8;
}


.pkm-detail-content {
  color: #4f6d89;
  font-size: 17px;
  line-height: 1.9;
}


.pkm-detail-content h2,
.pkm-detail-content h3 {
  color: #123b6d;
  margin-top: 30px;
  margin-bottom: 15px;
}


.pkm-detail-content ul,
.pkm-detail-content ol {
  margin-bottom: 25px;
}


.pkm-detail-footer {
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #e4ebf2;
  color: #7890aa;
  font-size: 14px;
}


@media (max-width: 768px) {

  .pkm-page-hero {
    padding-top: 130px;
    padding-bottom: 45px;
  }


  .pkm-news-image-wrap {
    height: 210px;
  }


  .pkm-detail-card {
    padding-top: 110px;
  }


  .pkm-detail-article {
    padding: 25px;
    border-radius: 18px;
  }


  .pkm-detail-article h1 {
    font-size: 34px;
  }


  .pkm-detail-meta {
    gap: 12px;
  }

}
/* =========================================================
   GALERI
   ========================================================= */

.pkm-gallery-card {
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 61, 105, 0.06);
  transition: all 0.25s ease;
}


.pkm-gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(15, 61, 105, 0.12);
}


.pkm-gallery-image {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: #eef7f2;
}


.pkm-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}


.pkm-gallery-card:hover .pkm-gallery-image img {
  transform: scale(1.06);
}


.pkm-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 48, 91, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}


.pkm-gallery-card:hover .pkm-gallery-overlay {
  opacity: 1;
}


.pkm-gallery-overlay span {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  color: #0f9d58;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}


.pkm-gallery-body {
  padding: 24px;
}


.pkm-gallery-date {
  margin-top: 12px;
  color: #7890aa;
  font-size: 14px;
}


.pkm-gallery-body h3 {
  color: #123b6d;
  font-size: 21px;
  line-height: 1.35;
  margin: 10px 0;
}


.pkm-gallery-body p {
  color: #67809c;
  line-height: 1.7;
  margin-bottom: 0;
}
/* =========================================================
   DOWNLOAD
   ========================================================= */

.pkm-download-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 20px;
  padding: 25px;
  display: flex;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(15, 61, 105, 0.06);
  transition: all 0.25s ease;
}


.pkm-download-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(15, 61, 105, 0.12);
}


.pkm-download-icon {
  width: 62px;
  height: 72px;
  min-width: 62px;
  border-radius: 12px;
  background: #fff0f0;
  color: #d73535;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}


.pkm-download-content {
  flex: 1;
}


.pkm-download-date {
  color: #7890aa;
  font-size: 13px;
  margin-top: 12px;
}


.pkm-download-content h3 {
  color: #123b6d;
  font-size: 20px;
  line-height: 1.35;
  margin: 9px 0 10px;
}


.pkm-download-content p {
  color: #67809c;
  line-height: 1.65;
  margin-bottom: 18px;
}


.pkm-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  background: #0f9d58;
  color: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}


.pkm-download-btn:hover {
  background: #087b44;
  color: #ffffff;
}
/* =========================================================
   PENGUMUMAN
   ========================================================= */

.pkm-announcement-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(15, 61, 105, 0.06);
  transition: all 0.25s ease;
}

.pkm-announcement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(15, 61, 105, 0.12);
}

.pkm-announcement-category {
  display: inline-block;
  padding: 7px 13px;
  background: #e8f8f0;
  color: #0f9d58;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

.pkm-announcement-date {
  color: #7890aa;
  font-size: 14px;
  margin-bottom: 10px;
}

.pkm-announcement-card h3 {
  color: #123b6d;
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 12px;
  font-weight: 800;
}

.pkm-announcement-card p {
  color: #67809c;
  line-height: 1.75;
  margin-bottom: 18px;
}

.pkm-announcement-link {
  color: #0f9d58;
  font-weight: 700;
  text-decoration: none;
}

.pkm-announcement-link:hover {
  color: #087b44;
}


/* =========================================================
   DETAIL PENGUMUMAN
   ========================================================= */

.pkm-announcement-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 150px;
}

.pkm-announcement-detail-card {
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 12px 40px rgba(15, 61, 105, 0.07);
}

.pkm-announcement-detail-category {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 30px;
  background: #e8f8f0;
  color: #0f9d58;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.pkm-announcement-detail-card h1 {
  color: #123b6d;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.15;
  margin-bottom: 20px;
  font-weight: 800;
}

.pkm-announcement-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  color: #7189a2;
  font-size: 15px;
  padding-bottom: 25px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e4ebf2;
}

.pkm-announcement-summary {
  padding: 25px 28px;
  background: #f3f8fb;
  border-left: 4px solid #0f9d58;
  border-radius: 0 14px 14px 0;
  margin: 30px 0;
}

.pkm-announcement-summary strong {
  display: block;
  color: #123b6d;
  font-size: 18px;
  margin-bottom: 10px;
}

.pkm-announcement-summary p {
  color: #617b96;
  margin: 0;
  line-height: 1.8;
}

.pkm-announcement-content {
  color: #4f6d89;
  font-size: 17px;
  line-height: 1.9;
}

.pkm-announcement-content h2,
.pkm-announcement-content h3 {
  color: #123b6d;
  margin-top: 30px;
  margin-bottom: 15px;
}

.pkm-announcement-content ul,
.pkm-announcement-content ol {
  margin-bottom: 25px;
}

.pkm-announcement-detail-footer {
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #e4ebf2;
  color: #7890aa;
  font-size: 14px;
}


/* =========================================================
   AGENDA
   ========================================================= */

.pkm-agenda-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(15, 61, 105, 0.06);
  transition: all 0.25s ease;
}

.pkm-agenda-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(15, 61, 105, 0.12);
}

.pkm-agenda-date {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}

.pkm-agenda-date-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 14px;
  background: #e8f8f0;
  color: #0f9d58;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
}

.pkm-agenda-date small {
  display: block;
  color: #7890aa;
  font-size: 13px;
  margin-bottom: 4px;
}

.pkm-agenda-date strong {
  display: block;
  color: #123b6d;
  font-size: 17px;
}

.pkm-agenda-category {
  display: inline-block;
  padding: 7px 13px;
  background: #e8f8f0;
  color: #0f9d58;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

.pkm-agenda-card h3 {
  color: #123b6d;
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 12px;
  font-weight: 800;
}

.pkm-agenda-card p {
  color: #67809c;
  line-height: 1.75;
  margin-bottom: 18px;
}

.pkm-agenda-info {
  border-top: 1px solid #e4ebf2;
  margin-top: 20px;
  padding-top: 18px;
}

.pkm-agenda-info div {
  margin-bottom: 10px;
  color: #67809c;
  font-size: 14px;
}

.pkm-agenda-info strong {
  color: #123b6d;
}

.pkm-agenda-link {
  display: inline-block;
  margin-top: 8px;
  color: #0f9d58;
  font-weight: 700;
  text-decoration: none;
}

.pkm-agenda-link:hover {
  color: #087b44;
}


/* =========================================================
   DETAIL AGENDA
   ========================================================= */

.pkm-agenda-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 150px;
}

.pkm-agenda-detail-card {
  background: #ffffff;
  border: 1px solid #e1eaf2;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 12px 40px rgba(15, 61, 105, 0.07);
}

.pkm-agenda-detail-category {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 30px;
  background: #e8f8f0;
  color: #0f9d58;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.pkm-agenda-detail-card h1 {
  color: #123b6d;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.15;
  margin-bottom: 20px;
  font-weight: 800;
}

.pkm-agenda-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  color: #7189a2;
  font-size: 15px;
  padding-bottom: 25px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e4ebf2;
}

.pkm-agenda-summary {
  padding: 25px 28px;
  background: #f3f8fb;
  border-left: 4px solid #0f9d58;
  border-radius: 0 14px 14px 0;
  margin: 30px 0;
}

.pkm-agenda-summary strong {
  display: block;
  color: #123b6d;
  font-size: 18px;
  margin-bottom: 10px;
}

.pkm-agenda-summary p {
  color: #617b96;
  margin: 0;
  line-height: 1.8;
}

.pkm-agenda-content {
  color: #4f6d89;
  font-size: 17px;
  line-height: 1.9;
}

.pkm-agenda-content h2,
.pkm-agenda-content h3 {
  color: #123b6d;
  margin-top: 30px;
  margin-bottom: 15px;
}

.pkm-agenda-content ul,
.pkm-agenda-content ol {
  margin-bottom: 25px;
}

.pkm-agenda-detail-info {
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #e4ebf2;
}

.pkm-agenda-detail-info div {
  margin-bottom: 14px;
  color: #67809c;
}

.pkm-agenda-detail-info strong {
  color: #123b6d;
}


/* =========================================================
   RESPONSIVE - PENGUMUMAN & AGENDA
   ========================================================= */

@media (max-width: 768px) {

  .pkm-announcement-detail,
  .pkm-agenda-detail {
    padding-top: 110px;
  }

  .pkm-announcement-detail-card,
  .pkm-agenda-detail-card {
    padding: 25px;
    border-radius: 18px;
  }

  .pkm-announcement-detail-card h1,
  .pkm-agenda-detail-card h1 {
    font-size: 34px;
  }

  .pkm-announcement-detail-meta,
  .pkm-agenda-detail-meta {
    gap: 12px;
  }

  .pkm-announcement-content,
  .pkm-agenda-content {
    font-size: 16px;
  }

  .pkm-agenda-date-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

}