:root{
  --kp-deepblue:#1B3A6B;
  --kp-deepblue-dark:#102447;
  --kp-cream:#FAF6EE;
  --kp-gold:#C89B3C;
  --kp-gold-dark:#A87E26;
  --kp-slate:#0F172A;
  --kp-card:#FFFFFF;
  --kp-academy-gray:#94A3B8;
  --kp-border:#E5E1D6;
  --kp-radius:8px;
  --kp-radius-lg:14px;
  --kp-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --kp-shadow-md:0 6px 18px rgba(15,23,42,.08);
  --kp-font-display:"Source Sans 3", "Segoe UI", Arial, sans-serif;
  --kp-font-body:"Merriweather", Georgia, "Times New Roman", serif;
  --kp-maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--kp-font-body);
  color:var(--kp-slate);
  background:var(--kp-cream);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--kp-deepblue);text-decoration:none}
a:hover{color:var(--kp-gold-dark)}
h1,h2,h3,h4,h5{font-family:var(--kp-font-display);color:var(--kp-slate);letter-spacing:-.01em;line-height:1.3}
h1{font-size:2.1rem;margin:0 0 .6rem}
h2{font-size:1.55rem;margin:1.6rem 0 .7rem}
h3{font-size:1.2rem;margin:1.2rem 0 .5rem}
p{margin:0 0 1rem}

.kp-container{max-width:var(--kp-maxw);margin:0 auto;padding:0 22px}

.kp-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kp-skip:focus{position:static;width:auto;height:auto;background:var(--kp-gold);color:var(--kp-slate);padding:6px 10px;display:inline-block}

.kp-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,238,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--kp-border);
}
.kp-nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.kp-brand{display:flex;align-items:center;gap:10px;font-family:var(--kp-font-display);font-weight:700;color:var(--kp-deepblue);font-size:1.05rem}
.kp-brand-mark{width:34px;height:34px;border-radius:8px;background:var(--kp-deepblue);display:flex;align-items:center;justify-content:center;color:var(--kp-gold)}
.kp-menu{display:flex;align-items:center;gap:22px}
.kp-menu a{font-family:var(--kp-font-display);font-weight:600;color:var(--kp-slate);font-size:.95rem;padding:6px 2px;border-bottom:2px solid transparent}
.kp-menu a:hover,.kp-menu a[aria-current="page"]{border-color:var(--kp-gold);color:var(--kp-deepblue)}
.kp-search-btn{
  width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid var(--kp-border);
  display:flex;align-items:center;justify-content:center;color:var(--kp-deepblue);
  cursor:pointer;
}
.kp-search-btn:hover{border-color:var(--kp-gold);color:var(--kp-gold-dark)}
.kp-nav-toggle{display:none;background:none;border:0;color:var(--kp-deepblue);cursor:pointer;padding:8px}

@media (max-width:900px){
  .kp-nav-toggle{display:inline-flex}
  .kp-menu{
    position:absolute;left:0;right:0;top:64px;
    background:var(--kp-cream);border-bottom:1px solid var(--kp-border);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 16px;
    display:none;
  }
  .kp-menu.is-open{display:flex}
  .kp-menu a{padding:14px 4px;border-bottom:1px solid var(--kp-border);min-height:44px}
  .kp-menu .kp-search-btn{align-self:flex-start;margin-top:8px}
}

.kp-hero{
  background:linear-gradient(135deg,#102447 0%,#1B3A6B 55%,#244e8c 100%);
  color:var(--kp-cream);
  padding:48px 0 60px;
  position:relative;
  overflow:hidden;
}
.kp-hero::before{
  content:"";position:absolute;inset:0;
  background:url('../img/home-hero-portal-semarang.jpg') center/cover no-repeat;
  opacity:.22;mix-blend-mode:luminosity;
}
.kp-hero-inner{position:relative;z-index:1}
.kp-portal-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px;
}
.kp-portal-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(250,246,238,.18);
  border-radius:var(--kp-radius-lg);
  padding:18px 16px;
  color:var(--kp-cream);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.kp-portal-card:hover{
  border-color:var(--kp-gold);
  background:rgba(200,155,60,.10);
  transform:translateY(-2px);
  color:var(--kp-cream);
}
.kp-portal-icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(200,155,60,.18);color:var(--kp-gold);
  display:flex;align-items:center;justify-content:center;
}
.kp-portal-title{font-family:var(--kp-font-display);font-weight:700;font-size:1.05rem;margin:0}
.kp-portal-sub{font-family:var(--kp-font-body);font-size:.85rem;color:rgba(250,246,238,.78);margin:0}

.kp-hero-title{font-family:var(--kp-font-display);font-size:2.4rem;color:var(--kp-cream);max-width:780px;margin:0 0 14px}
.kp-hero-sub{font-family:var(--kp-font-body);max-width:680px;font-size:1.05rem;color:rgba(250,246,238,.9);margin:0 0 22px}
.kp-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.kp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;border-radius:var(--kp-radius);
  font-family:var(--kp-font-display);font-weight:600;font-size:.98rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.kp-btn-primary{background:var(--kp-gold);color:var(--kp-slate);border-color:var(--kp-gold)}
.kp-btn-primary:hover{background:var(--kp-gold-dark);color:var(--kp-cream);border-color:var(--kp-gold-dark)}
.kp-btn-secondary{background:transparent;color:var(--kp-cream);border-color:var(--kp-cream)}
.kp-btn-secondary:hover{background:rgba(250,246,238,.12);color:var(--kp-cream)}
.kp-btn-ghost{background:transparent;color:var(--kp-deepblue);border-color:var(--kp-deepblue)}
.kp-btn-ghost:hover{background:var(--kp-deepblue);color:var(--kp-cream)}

@media (max-width:900px){
  .kp-portal-grid{grid-template-columns:repeat(2,1fr)}
  .kp-hero-title{font-size:1.8rem}
}
@media (max-width:480px){
  .kp-portal-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kp-hero{padding:36px 0 44px}
  .kp-hero-title{font-size:1.55rem}
}

.kp-section{padding:56px 0}
.kp-section-light{background:var(--kp-cream)}
.kp-section-white{background:#fff}
.kp-section-deep{background:var(--kp-deepblue);color:var(--kp-cream)}
.kp-section-deep h2,.kp-section-deep h3{color:var(--kp-cream)}
.kp-section-head{margin-bottom:28px;max-width:760px}
.kp-eyebrow{
  font-family:var(--kp-font-display);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kp-gold-dark);margin-bottom:8px;font-weight:700;
}
.kp-section-title{font-size:1.9rem;margin:0 0 8px}
.kp-section-lead{font-family:var(--kp-font-body);color:var(--kp-slate);max-width:680px}

.kp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:1024px){.kp-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.kp-grid-3,.kp-grid-2{grid-template-columns:1fr}}

.kp-article-card{
  background:var(--kp-card);
  border:1px solid var(--kp-border);
  border-radius:var(--kp-radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kp-article-card:hover{transform:translateY(-3px);box-shadow:var(--kp-shadow-md);border-color:var(--kp-gold)}
.kp-article-thumb{aspect-ratio:16/10;background:#e9e4d6 center/cover no-repeat}
.kp-article-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.kp-article-tag{
  font-family:var(--kp-font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kp-gold-dark);font-weight:700;margin-bottom:6px;
}
.kp-article-title{font-size:1.18rem;margin:0 0 8px}
.kp-article-title a{color:var(--kp-slate)}
.kp-article-title a:hover{color:var(--kp-deepblue)}
.kp-article-excerpt{font-size:.96rem;color:#3a455a;margin:0 0 14px;flex:1}
.kp-article-meta{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--kp-academy-gray);font-family:var(--kp-font-display)}
.kp-article-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--kp-font-display);font-weight:600;color:var(--kp-deepblue);font-size:.92rem;
}
.kp-article-link:hover{color:var(--kp-gold-dark)}

.kp-about-row{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media (max-width:900px){.kp-about-row{grid-template-columns:1fr}}
.kp-about-img{border-radius:var(--kp-radius-lg);overflow:hidden;border:1px solid var(--kp-border);aspect-ratio:4/3;background:#e9e4d6 center/cover no-repeat}

.kp-glossary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1024px){.kp-glossary-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.kp-glossary-grid{grid-template-columns:1fr 1fr}}
.kp-term-card{
  background:#fff;border:1px solid var(--kp-border);border-radius:var(--kp-radius);
  padding:16px;
}
.kp-term-name{font-family:var(--kp-font-display);font-weight:700;color:var(--kp-deepblue);margin:0 0 6px;font-size:1rem}
.kp-term-def{font-size:.88rem;color:#3a455a;margin:0}

.kp-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.kp-pillars{grid-template-columns:1fr}}
.kp-pillar{background:rgba(255,255,255,.06);border:1px solid rgba(250,246,238,.16);border-radius:var(--kp-radius-lg);padding:22px}
.kp-pillar-icon{width:42px;height:42px;border-radius:10px;background:rgba(200,155,60,.18);color:var(--kp-gold);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.kp-pillar h3{margin:0 0 8px;font-size:1.1rem}
.kp-pillar p{font-family:var(--kp-font-body);color:rgba(250,246,238,.85);margin:0;font-size:.95rem}

.kp-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.kp-testimonials{grid-template-columns:1fr}}
.kp-testimonial{background:#fff;border:1px solid var(--kp-border);border-radius:var(--kp-radius-lg);padding:22px}
.kp-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--kp-deepblue);color:var(--kp-gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--kp-font-display);font-weight:700;font-size:1rem;margin-bottom:12px;
}
.kp-testimonial-quote{font-family:var(--kp-font-body);font-size:.97rem;color:#293549;margin:0 0 12px}
.kp-testimonial-name{font-family:var(--kp-font-display);font-weight:700;color:var(--kp-deepblue);font-size:.92rem}
.kp-testimonial-note{font-size:.78rem;color:var(--kp-academy-gray);margin-top:14px}

.kp-closing{background:linear-gradient(135deg,#1B3A6B 0%,#244e8c 100%);color:var(--kp-cream);padding:56px 0;text-align:center}
.kp-closing h2{color:var(--kp-cream);font-size:1.9rem;margin:0 0 12px}
.kp-closing p{font-family:var(--kp-font-body);max-width:600px;margin:0 auto 22px;color:rgba(250,246,238,.9)}
.kp-closing .kp-cta-row{justify-content:center}

.kp-breadcrumb{font-family:var(--kp-font-display);font-size:.85rem;color:var(--kp-academy-gray);margin:18px 0 10px}
.kp-breadcrumb a{color:var(--kp-deepblue)}

.kp-article-page{padding:30px 0 60px}
.kp-article-layout{max-width:780px;margin:0 auto}
.kp-byline{font-family:var(--kp-font-display);font-size:.86rem;color:var(--kp-academy-gray);margin:0 0 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kp-byline-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(200,155,60,.18);color:var(--kp-gold-dark);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.kp-article-hero{
  aspect-ratio:16/9;background:#e9e4d6 center/cover no-repeat;
  border-radius:var(--kp-radius-lg);margin:18px 0 26px;border:1px solid var(--kp-border);
}
.kp-article-layout h1{font-size:2rem;line-height:1.25}
.kp-article-layout h2{font-size:1.4rem;color:var(--kp-deepblue);border-left:3px solid var(--kp-gold);padding-left:12px}
.kp-article-layout h3{font-size:1.12rem;color:var(--kp-deepblue-dark)}
.kp-article-layout p,.kp-article-layout li{font-size:1.02rem;color:#2a3447}
.kp-article-layout ul,.kp-article-layout ol{padding-left:1.3rem;margin:0 0 1rem}
.kp-article-layout li{margin-bottom:.45rem}
.kp-callout{
  background:#fff;border:1px solid var(--kp-border);border-left:4px solid var(--kp-gold);
  border-radius:var(--kp-radius);padding:18px 20px;margin:22px 0;
}
.kp-source-list li{font-size:.94rem;color:#3a455a}

.kp-prev-next{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;
  border-top:1px solid var(--kp-border);padding-top:22px;
}
@media (max-width:640px){.kp-prev-next{grid-template-columns:1fr}}
.kp-pn-card{
  background:#fff;border:1px solid var(--kp-border);border-radius:var(--kp-radius);
  padding:14px 16px;text-decoration:none;color:var(--kp-slate);
}
.kp-pn-card:hover{border-color:var(--kp-gold)}
.kp-pn-label{font-family:var(--kp-font-display);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kp-academy-gray);margin-bottom:6px}
.kp-pn-title{font-family:var(--kp-font-display);font-weight:700;color:var(--kp-deepblue);font-size:.98rem}
.kp-pn-card.is-right{text-align:right}

.kp-page{padding:36px 0 56px}
.kp-page h1{font-size:2rem;margin-bottom:.5rem}
.kp-page-lead{font-size:1.05rem;color:#3a455a;max-width:720px;margin-bottom:24px}
.kp-prose h2{color:var(--kp-deepblue);font-size:1.35rem;border-left:3px solid var(--kp-gold);padding-left:12px}
.kp-prose h3{color:var(--kp-deepblue-dark)}
.kp-prose ul,.kp-prose ol{padding-left:1.3rem}
.kp-prose li{margin-bottom:.45rem}

.kp-contact-form-card{
  background:#fff;border:1px solid var(--kp-border);
  border-radius:var(--kp-radius-lg);padding:30px;box-shadow:var(--kp-shadow-md);
}
.kp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.kp-form-row{grid-template-columns:1fr}}
.kp-form-field{display:flex;flex-direction:column;margin-bottom:16px}
.kp-form-field label{font-family:var(--kp-font-display);font-weight:600;font-size:.9rem;color:var(--kp-slate);margin-bottom:6px}
.kp-form-field input,.kp-form-field textarea{
  border:1px solid var(--kp-border);border-radius:var(--kp-radius);
  padding:11px 14px;font-family:var(--kp-font-body);font-size:.98rem;color:var(--kp-slate);
  background:#fff;min-height:44px;
}
.kp-form-field input:focus,.kp-form-field textarea:focus{outline:none;border-color:var(--kp-gold);box-shadow:0 0 0 3px rgba(200,155,60,.18)}
.kp-form-field textarea{min-height:140px;resize:vertical}
.kp-form-consent{display:flex;gap:10px;align-items:flex-start;margin:10px 0 18px;font-size:.88rem;color:#3a455a}
.kp-form-consent input{margin-top:3px;width:18px;height:18px}

.kp-contact-info-row{
  display:grid;grid-template-columns:1.1fr 1fr;gap:26px;margin-top:30px;align-items:stretch;
}
@media (max-width:900px){.kp-contact-info-row{grid-template-columns:1fr}}
.kp-info-block{background:#fff;border:1px solid var(--kp-border);border-radius:var(--kp-radius-lg);padding:24px}
.kp-info-item{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.kp-info-icon{width:40px;height:40px;border-radius:10px;background:rgba(27,58,107,.08);color:var(--kp-deepblue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kp-info-label{font-family:var(--kp-font-display);font-weight:700;color:var(--kp-deepblue);font-size:.92rem;margin:0 0 3px}
.kp-info-value{font-size:.95rem;color:#2a3447;margin:0}
.kp-map-block{
  border:1px solid var(--kp-border);border-radius:var(--kp-radius-lg);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
}
.kp-map-block iframe{flex:1;width:100%;border:0;min-height:280px}
.kp-map-foot{padding:12px 16px;border-top:1px solid var(--kp-border);font-size:.86rem;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

.kp-footer{
  background:#0E2649;color:#cfd6e2;padding:18px 0;font-family:var(--kp-font-display);font-size:.88rem;
  border-top:3px solid var(--kp-gold);
}
.kp-footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.kp-footer-left{display:flex;align-items:center;gap:10px}
.kp-footer-mark{width:30px;height:30px;border-radius:7px;background:var(--kp-gold);color:var(--kp-deepblue);display:flex;align-items:center;justify-content:center}
.kp-footer-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.kp-footer-links a,.kp-footer-cookie-btn{color:#cfd6e2;background:none;border:0;cursor:pointer;font-family:var(--kp-font-display);font-size:.88rem;padding:0}
.kp-footer-links a:hover,.kp-footer-cookie-btn:hover{color:var(--kp-gold)}
.kp-footer-copy{color:#9ba8bf}
@media (max-width:720px){
  .kp-footer-row{flex-direction:column;align-items:flex-start}
  .kp-footer-links{flex-wrap:wrap}
}

.kp-cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:#0F2244;color:#e7ecf5;border-top:2px solid var(--kp-gold);
  padding:14px 22px;
  display:none;
}
.kp-cookie-bar.is-visible{display:block}
.kp-cookie-bar-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:var(--kp-maxw);margin:0 auto}
.kp-cookie-text{flex:1;min-width:240px;font-family:var(--kp-font-display);font-size:.88rem;line-height:1.5}
.kp-cookie-text a{color:var(--kp-gold)}
.kp-cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.kp-cookie-btn{
  min-height:42px;padding:9px 16px;border-radius:6px;
  font-family:var(--kp-font-display);font-weight:600;font-size:.88rem;
  border:1px solid transparent;cursor:pointer;
}
.kp-cookie-btn.is-accept{background:var(--kp-gold);color:var(--kp-slate);border-color:var(--kp-gold)}
.kp-cookie-btn.is-accept:hover{background:var(--kp-gold-dark);color:var(--kp-cream)}
.kp-cookie-btn.is-deny{background:transparent;color:#e7ecf5;border-color:rgba(231,236,245,.45)}
.kp-cookie-btn.is-deny:hover{border-color:var(--kp-gold);color:var(--kp-gold)}
.kp-cookie-btn.is-manage{background:transparent;color:#e7ecf5;border-color:rgba(231,236,245,.45)}
.kp-cookie-btn.is-manage:hover{border-color:var(--kp-gold);color:var(--kp-gold)}

.kp-cookie-panel{
  position:fixed;inset:0;z-index:120;
  background:rgba(15,23,42,.55);
  display:none;align-items:flex-end;justify-content:center;
}
.kp-cookie-panel.is-open{display:flex}
.kp-cookie-panel-inner{
  background:#fff;color:var(--kp-slate);border-top:3px solid var(--kp-gold);
  width:100%;max-width:1100px;max-height:88vh;overflow:auto;
  border-top-left-radius:14px;border-top-right-radius:14px;
  padding:24px;
}
.kp-cookie-cols{display:grid;grid-template-columns:1.1fr 1.4fr;gap:24px}
@media (max-width:900px){.kp-cookie-cols{grid-template-columns:1fr}}
.kp-cookie-explain h3{margin:0 0 10px;color:var(--kp-deepblue)}
.kp-cookie-explain p{font-family:var(--kp-font-body);font-size:.95rem;color:#3a455a}
.kp-cookie-cat{border:1px solid var(--kp-border);border-radius:var(--kp-radius);padding:14px 16px;margin-bottom:10px;background:#fafafa}
.kp-cookie-cat-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kp-cookie-cat-title{font-family:var(--kp-font-display);font-weight:700;color:var(--kp-deepblue);margin:0;font-size:.98rem}
.kp-cookie-cat-detail{font-size:.85rem;color:#445069;margin:8px 0 0;display:none}
.kp-cookie-cat.is-expanded .kp-cookie-cat-detail{display:block}
.kp-cookie-cat-controls{display:flex;align-items:center;gap:10px}
.kp-cat-toggle-detail{background:none;border:0;color:var(--kp-deepblue);font-family:var(--kp-font-display);font-size:.82rem;cursor:pointer}
.kp-cat-always{font-family:var(--kp-font-display);font-size:.82rem;color:var(--kp-gold-dark);font-weight:700}
.kp-switch{position:relative;width:42px;height:24px;display:inline-block}
.kp-switch input{opacity:0;width:0;height:0}
.kp-switch-slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:24px;transition:.2s}
.kp-switch-slider::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s}
.kp-switch input:checked + .kp-switch-slider{background:var(--kp-deepblue)}
.kp-switch input:checked + .kp-switch-slider::before{transform:translateX(18px)}
.kp-cookie-panel-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.kp-cookie-close{background:none;border:0;color:var(--kp-academy-gray);font-family:var(--kp-font-display);cursor:pointer;font-size:.85rem;margin-bottom:6px}

.kp-modal{
  position:fixed;inset:0;z-index:140;background:rgba(15,23,42,.5);
  display:none;align-items:center;justify-content:center;padding:22px;
}
.kp-modal.is-open{display:flex}
.kp-modal-card{background:#fff;border-top:4px solid var(--kp-gold);border-radius:var(--kp-radius-lg);padding:28px;max-width:440px;text-align:center}
.kp-modal-card h3{margin:0 0 10px;color:var(--kp-deepblue)}
.kp-modal-card p{font-family:var(--kp-font-body);color:#3a455a;margin:0 0 14px}

.kp-list-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1024px){.kp-list-page-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.kp-list-page-grid{grid-template-columns:1fr}}

.kp-icon{width:24px;height:24px;display:inline-block;vertical-align:middle}

/* UX image separation: the portal hero photo is independent from text. */
.kp-hero{background:linear-gradient(180deg,var(--kp-cream) 0%,#EEF3F9 100%);color:var(--kp-slate)}
.kp-hero::before{display:none}
.kp-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);gap:28px;align-items:center}
.kp-portal-grid,.kp-hero-title,.kp-hero-sub,.kp-cta-row{grid-column:1}
.kp-portal-grid{grid-template-columns:repeat(2,1fr);margin-bottom:12px}
.kp-portal-card{background:#fff;color:var(--kp-slate);border-color:var(--kp-border);box-shadow:var(--kp-shadow-sm)}
.kp-portal-card:hover{background:#fff;color:var(--kp-slate)}
.kp-portal-sub{color:#475569}
.kp-hero-title{color:var(--kp-slate)}
.kp-hero-sub{color:#334155}
.kp-hero-media{grid-column:2;grid-row:1 / span 4;min-height:430px;border-radius:var(--kp-radius-lg);background:url('../img/home-hero-portal-semarang.jpg') center/cover no-repeat;border:1px solid var(--kp-border);box-shadow:var(--kp-shadow-md)}
.kp-btn-secondary{color:var(--kp-deepblue);border-color:var(--kp-deepblue)}
.kp-btn-secondary:hover{background:var(--kp-deepblue);color:#fff}
.kp-article-thumb,.kp-about-img{background-size:cover;background-position:center;overflow:hidden}
@media (max-width:900px){
  .kp-hero-inner{grid-template-columns:1fr}
  .kp-hero-media{grid-column:1;grid-row:auto;min-height:300px}
}
@media (max-width:560px){.kp-portal-grid{grid-template-columns:1fr}}

/* Mobile containment for portal cards and separated hero media. */
html,body{overflow-x:hidden}
.kp-hero-inner>*,.kp-portal-card,.kp-article-card{min-width:0;max-width:100%}
.kp-hero-title,.kp-hero-sub,.kp-article-card h3{overflow-wrap:anywhere}
@media (max-width:560px){
  .kp-hero-inner>*,.kp-portal-card,.kp-article-card{width:100%;max-width:min(100%,310px,calc(100vw - 48px));justify-self:start}
}