
:root{--gki-blue:#173b66;--gki-blue2:#0f5dcc;--gki-bg:#f5f7fb}
body{background:var(--gki-bg);color:#1d2b3c}.public-nav{background:#fff;box-shadow:0 2px 12px rgba(20,45,80,.08)}.public-nav .navbar-brand img{width:48px;height:48px;object-fit:contain}.public-nav .navbar-brand small{color:#6b7280}.public-nav .nav-link{font-weight:500;color:#45566d}.public-nav .nav-link.active,.public-nav .nav-link:hover{color:var(--gki-blue2)}
.hero{background:linear-gradient(135deg,var(--gki-blue),#245b91);color:#fff;padding:76px 0}.hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.05}.hero h1 span{opacity:.9}.hero-logo{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 15px 25px rgba(0,0,0,.18))}.eyebrow{font-size:.78rem;letter-spacing:.14em;font-weight:700;opacity:.8}.page-hero{background:#fff;border-bottom:1px solid #e7ebf1;padding:46px 0}.page-hero h1{font-weight:800;margin:.4rem 0}.page-hero p{margin:0;color:#66758a}.public-stat,.public-card{background:#fff;border:1px solid #e8edf4;border-radius:16px;box-shadow:0 5px 18px rgba(27,50,80,.06)}.public-stat{padding:22px;display:flex;align-items:center;gap:15px;height:100%}.public-stat .stat-icon,.service-icon{width:48px;height:48px;border-radius:13px;background:#eaf2ff;color:var(--gki-blue2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none}.public-card{padding:28px}.public-card h2,.public-card h3{font-weight:750}.info-link{height:100%;display:flex;align-items:center;gap:10px;padding:15px;border:1px solid #e7ebf1;border-radius:12px;text-decoration:none;color:#20334a}.info-link:hover{background:#f5f9ff;color:var(--gki-blue2)}.info-link i{font-size:1.25rem}.progress{height:8px}.age-box{display:flex;justify-content:space-between;padding:14px 16px;border:1px solid #e6ebf2;border-radius:10px}.service-card{display:flex;gap:18px;align-items:flex-start;height:100%}.profile-logo{width:240px;height:240px;object-fit:contain}.public-footer{background:#173b66;color:#dbe7f4}.public-footer strong{color:#fff}
@media(max-width:767px){.hero{padding:55px 0}.hero-logo{width:150px;height:150px}.public-card{padding:20px}}

.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-heading h2{margin:.25rem 0 0;font-weight:800}
.hero-logo-card{display:inline-flex;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.95);align-items:center;justify-content:center;padding:14px;box-shadow:0 18px 45px rgba(0,0,0,.2)}
.hero-logo-card .hero-logo{width:100%;height:100%;object-fit:contain;filter:none}
.service-mini-list{display:grid;gap:8px;margin-top:18px}
.service-mini{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e7ebf1;border-radius:12px}
.service-mini-icon{width:40px;height:40px;border-radius:10px;background:#eaf2ff;color:var(--gki-blue2);display:flex;align-items:center;justify-content:center}
.public-info-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#fff,#f3f7ff)}
.public-info-banner h2{font-weight:800}
@media(max-width:767px){.section-heading{align-items:flex-start;flex-direction:column}.hero-logo-card{width:180px;height:180px}.public-info-banner{flex-direction:column;align-items:flex-start}}

.public-article{max-width:900px;margin:0 auto}.article-body{font-size:1.05rem;line-height:1.85;white-space:normal}

/* Tahap 9.2 - Detail Berita & Lampiran */
.news-card-image-wrap{
    width:100%;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:12px;
    background:#f1f4f8;
    border:1px solid #e8edf4;
}
.news-card-image{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.news-card-pdf{
    min-height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:24px;
    border:1px solid #e8edf4;
    border-radius:12px;
    background:linear-gradient(135deg,#fff8f8,#f8fafc);
}
.pdf-icon{
    width:58px;
    height:58px;
    border-radius:12px;
    background:#dc3545;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    flex:none;
}
.public-article{
    max-width:900px;
    margin:0 auto;
}
.article-body{
    font-size:1.08rem;
    line-height:1.9;
    white-space:normal;
}
.article-image-wrap{
    width:100%;
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
    background:#f4f6f9;
    border:1px solid #e5eaf0;
    padding:12px;
}
.article-image{
    max-width:100%;
    max-height:650px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}
.pdf-detail-card{
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:30px;
    border:1px solid #e5eaf0;
    border-radius:14px;
    background:linear-gradient(135deg,#fff8f8,#f8fafc);
}
.pdf-detail-icon{
    width:78px;
    height:78px;
    border-radius:16px;
    background:#dc3545;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    flex:none;
}
.attachment-error{
    background:#f8f9fa;
}
.attachment-error-message{
    display:none!important;
    width:100%;
}
.article-image-wrap.attachment-error .attachment-error-message{
    display:block!important;
}
@media(max-width:767px){
    .news-card-image-wrap{height:150px}
    .news-card-pdf{min-height:150px}
    .article-image-wrap{min-height:160px}
    .pdf-detail-card{min-height:150px;padding:20px}
    .pdf-detail-icon{width:62px;height:62px;font-size:2.3rem}
}

.archive-preview{height:190px;border-radius:12px;background:#f2f5f9;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #e4eaf2}.archive-preview img{width:100%;height:100%;object-fit:contain}.archive-pdf{height:190px;border-radius:12px;background:#fff5f5;border:1px solid #f0dfe1;display:flex;align-items:center;justify-content:center;gap:18px;padding:24px}.archive-pdf>i{font-size:4rem;color:#dc3545}.archive-pdf strong{font-size:1.05rem}.archive-preview+ .eyebrow{}.public-card .form-label{color:#20334a}
@media(max-width:767px){.archive-preview,.archive-pdf{height:160px}}
