.siapmang-public-page{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;

    font-family:'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    color:#0f172a;

    background:
        radial-gradient(circle at 12% 18%, rgba(37,99,235,.22), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(16,185,129,.18), transparent 32%),
        radial-gradient(circle at 78% 70%, rgba(6,182,212,.16), transparent 36%),

        linear-gradient(
            135deg,
            #eef6ff 0%,
            #edf9ff 42%,
            #f2fffb 100%
        );
}

.siapmang-public-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
    padding:18px 0;
}

.siapmang-public-nav{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    padding:0;
}

.siapmang-public-brand{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 18px 12px 14px;
    border-radius:20px;

    text-decoration:none;
    color:#0f172a;
    font-size:20px;
    font-weight:900;
    letter-spacing:.02em;

    background:rgba(255,255,255,.74);
    border:1px solid rgba(255,255,255,.86);

    box-shadow:
        0 20px 50px rgba(15,23,42,.08),
        0 0 0 1px rgba(255,255,255,.58),
        0 0 34px rgba(6,182,212,.14),
        0 0 58px rgba(16,185,129,.12),
        inset 0 1px 0 rgba(255,255,255,.92);

    backdrop-filter:blur(18px);
}

.siapmang-public-brand::before{
    content:'';
    position:absolute;
    inset:-40%;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0) 18%,
            rgba(34,211,238,.24) 40%,
            rgba(45,212,191,.38) 50%,
            rgba(125,211,252,.22) 60%,
            rgba(255,255,255,0) 78%
        );

    transform:translateX(-140%) rotate(8deg);
    animation:siapmangPublicAquaGloss 1.2s linear infinite;
}

@keyframes siapmangPublicAquaGloss{
    100%{
        transform:translateX(140%) rotate(8deg);
    }
}

.siapmang-public-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
    position:relative;
    z-index:2;

    filter:
        drop-shadow(0 0 10px rgba(6,182,212,.22))
        drop-shadow(0 0 18px rgba(16,185,129,.16))
        drop-shadow(0 10px 18px rgba(37,99,235,.10));
}

.siapmang-public-menu{
    display:flex;
    align-items:center;
    gap:8px;
}

.siapmang-public-menu a{
    text-decoration:none;
    color:#334155;
    font-weight:800;
    padding:11px 15px;
    border-radius:16px;
}

.siapmang-public-menu a:hover{
    background:rgba(239,246,255,.84);
    color:#0f172a;
}

.siapmang-public-action{
    color:#fff !important;
    background:linear-gradient(135deg,#2563eb 0%,#06b6d4 55%,#10b981 100%) !important;
    box-shadow:0 14px 30px rgba(37,99,235,.18), 0 8px 18px rgba(16,185,129,.12);
}

.siapmang-public-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:120px 0 72px;
}

.siapmang-public-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(248,251,255,.80),
            rgba(248,251,255,.50)
        ),
        linear-gradient(
            135deg,
            rgba(37,99,235,.12),
            rgba(6,182,212,.10),
            rgba(16,185,129,.10)
        ),
        url('/assets/landing/hero-bg.jpg');

    background-size:cover;
    background-position:center;

    opacity:.78;

    filter:
        saturate(1.04)
        contrast(1.02);

    transform:scale(1.01);
}

.siapmang-public-hero-inner{
    position:relative;
    z-index:1;
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:64px;
    align-items:center;
    justify-items:start;
}

.siapmang-public-badge{
    display:inline-flex;
    width:max-content;
    padding:9px 14px;
    margin-bottom:20px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    color:#075985;
    background:rgba(224,242,254,.78);
    border:1px solid rgba(125,211,252,.65);
}

.siapmang-public-hero-content h1{
    margin:0;

    font-size:clamp(56px, 8vw, 108px);

    line-height:.9;

    letter-spacing:-.08em;

    font-weight:950;

    color:#0f172a;

    text-shadow:
        0 8px 28px rgba(255,255,255,.42);
}

.siapmang-public-hero-content p{
    margin:26px 0 0;
    max-width:680px;
    font-size:clamp(18px, 2vw, 24px);
    line-height:1.55;
    color:#475569;
    font-weight:650;
}

.siapmang-public-hero-actions{
    margin-top:34px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
}

.siapmang-public-btn-primary,
.siapmang-public-btn-secondary{
    position:relative;
    overflow:hidden;
    text-decoration:none;
    min-height:54px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    font-weight:900;
}

.siapmang-public-btn-primary{
    color:#fff;
    background:linear-gradient(135deg,#2563eb 0%,#06b6d4 55%,#10b981 100%);
    box-shadow:0 18px 38px rgba(37,99,235,.18), 0 10px 22px rgba(16,185,129,.14);
}

.siapmang-public-btn-secondary{
    color:#0f172a;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 16px 34px rgba(15,23,42,.08);
    backdrop-filter:blur(16px);
}

.siapmang-public-hero-card{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    padding:34px;
    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.78),
        rgba(236,253,245,.68)
    );
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 30px 80px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.88);
    backdrop-filter:blur(24px);
}

.siapmang-public-card-glow{
    position:absolute;
    inset:-40%;
    background:linear-gradient(120deg, transparent 20%, rgba(34,211,238,.18) 42%, rgba(45,212,191,.24) 52%, transparent 72%);
    animation:siapmangPublicGloss 4.2s linear infinite;
}

@keyframes siapmangPublicGloss{
    from{
        transform:translateX(-70%) rotate(8deg);
    }

    to{
        transform:translateX(70%) rotate(8deg);
    }
}

.siapmang-public-hero-card > *:not(.siapmang-public-card-glow){
    position:relative;
    z-index:1;
}

.siapmang-public-hero-card img{
    display:block;
    width:150px;
    height:auto;
    margin:0 auto 26px;

    object-fit:contain;

    image-rendering:auto;

    filter:
        drop-shadow(0 18px 30px rgba(15,23,42,.10));
}

.siapmang-public-hero-card h3{
    margin:0;
    font-size:26px;
    font-weight:950;
    letter-spacing:-.04em;
}

.siapmang-public-hero-card p{
    margin:12px 0 0;
    color:#475569;
    line-height:1.65;
    font-weight:600;
}

.siapmang-public-mini-grid{
    margin-top:26px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.siapmang-public-mini-grid div{
    padding:18px;
    border-radius:22px;
    background:rgba(239,246,255,.72);
    border:1px solid rgba(148,163,184,.18);
}

.siapmang-public-mini-grid strong{
    display:block;
    font-size:28px;
    line-height:1;
    font-weight:950;
    color:#0f172a;
}

.siapmang-public-mini-grid span{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:#64748b;
    font-weight:800;
}

.siapmang-public-brand span{
    position:relative;
    z-index:2;

    display:inline-flex;
    flex-direction:column;
    line-height:1.1;

    text-shadow:
        0 0 10px rgba(34,211,238,.10),
        0 0 18px rgba(45,212,191,.08);
}

.siapmang-public-brand span::after{
    content:'Kota Bogor';
    margin-top:5px;
    font-size:11px;
    font-weight:800;
    letter-spacing:0;
    color:#64748b;
}

@media (max-width: 992px){
    .siapmang-public-hero-inner{
        grid-template-columns:1fr;
        gap:36px;
        text-align:center;
    }

    .siapmang-public-badge,
    .siapmang-public-hero-actions{
        margin-left:auto;
        margin-right:auto;
        justify-content:center;
    }

    .siapmang-public-hero-card{
        max-width:460px;
        margin:0 auto;
    }
}

@media (max-width: 576px){
    .siapmang-public-nav{
        border-radius:20px;
    }

    .siapmang-public-brand span{
        display:none;
    }

    .siapmang-public-menu a:not(.siapmang-public-action){
        display:none;
    }

    .siapmang-public-hero{
        padding-top:110px;
    }

    .siapmang-public-hero-content h1{
        font-size:56px;
    }
}

.siapmang-public-contact{
    padding:96px 0;
}

.siapmang-public-section-head{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto 34px;
}

.siapmang-public-section-head span{
    display:inline-flex;
    padding:8px 13px;
    border-radius:999px;
    color:#075985;
    background:rgba(224,242,254,.78);
    border:1px solid rgba(125,211,252,.62);
    font-size:13px;
    font-weight:900;
}

.siapmang-public-section-head h2{
    margin:16px 0 0;
    font-size:clamp(34px, 4vw, 56px);
    line-height:1.05;
    letter-spacing:-.055em;
    font-weight:950;
    color:#0f172a;
}

.siapmang-public-section-head p{
    margin:14px 0 0;
    max-width:640px;
    color:#475569;
    font-size:17px;
    line-height:1.7;
    font-weight:600;
}

.siapmang-public-contact-grid{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
    gap:24px;
    align-items:stretch;
}

.siapmang-public-map-card{
    min-height:430px;
    overflow:hidden;
    border-radius:30px;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 30px 80px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter:blur(20px);
}

.siapmang-public-contact-list{
    display:grid;
    gap:16px;
}

.siapmang-public-contact-card{
    display:flex;
    gap:16px;
    align-items:flex-start;
    min-height:128px;
    padding:24px;
    border-radius:28px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 24px 60px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter:blur(18px);
}

.siapmang-public-contact-icon{
    width:48px;
    height:48px;
    min-width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb 0%,#06b6d4 55%,#10b981 100%);
    box-shadow:0 14px 30px rgba(37,99,235,.18), 0 8px 18px rgba(16,185,129,.12);
}

.siapmang-public-contact-card h4{
    margin:0;
    font-size:18px;
    font-weight:950;
    color:#0f172a;
    letter-spacing:-.02em;
}

.siapmang-public-contact-card p{
    margin:8px 0 0;
    color:#475569;
    font-weight:650;
    line-height:1.55;
}

@media (max-width: 992px){
    .siapmang-public-contact-grid{
        grid-template-columns:1fr;
    }

    .siapmang-public-map-card{
        min-height:360px;
    }
}

.siapmang-public-footer{
    position:relative;
    padding:86px 0 24px;
    background:
        radial-gradient(circle at 16% 20%, rgba(37,99,235,.16), transparent 32%),
        radial-gradient(circle at 86% 28%, rgba(16,185,129,.18), transparent 34%),
        linear-gradient(135deg,#0f172a 0%,#0b4f7a 46%,#0f766e 100%);
    color:#fff;
    overflow:hidden;
}

.siapmang-public-footer::before{
    content:'';
    position:absolute;
    inset:-40%;
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0) 20%,
            rgba(34,211,238,.10) 42%,
            rgba(45,212,191,.14) 52%,
            rgba(255,255,255,0) 72%
        );
    animation:siapmangPublicGloss 3.2s linear infinite;
    pointer-events:none;
}

.siapmang-public-footer-inner{
    position:relative;
    z-index:1;
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    display:grid;
    grid-template-columns:420px minmax(0,1fr);
    gap:42px;
    align-items:center;
}

.siapmang-public-visitor-card{
    padding:30px;
    border-radius:30px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 30px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter:blur(20px);
}

.siapmang-public-visitor-card h5{
    margin:0 0 20px;
    font-size:22px;
    font-weight:950;
    letter-spacing:-.03em;
}

.siapmang-public-visitor-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.siapmang-public-visitor-grid div{
    padding:20px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(37,99,235,.76),rgba(6,182,212,.76),rgba(16,185,129,.70));
    box-shadow:0 18px 36px rgba(0,0,0,.14);
}

.siapmang-public-visitor-grid span{
    display:block;
    font-size:13px;
    font-weight:800;
    opacity:.88;
}

.siapmang-public-visitor-grid strong{
    display:block;
    margin-top:10px;
    font-size:26px;
    line-height:1;
    font-weight:950;
}

.siapmang-public-agency{
    text-align:right;
}

.siapmang-public-agency-logo{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    margin-bottom:24px;
}

.siapmang-public-agency-logo img{
    height:82px;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

.siapmang-public-agency h5{
    margin:0;
    font-size:26px;
    line-height:1.25;
    font-weight:950;
    letter-spacing:-.035em;
    text-transform:uppercase;
}

.siapmang-public-agency p{
    margin:12px 0 0;
    color:rgba(255,255,255,.80);
    font-size:15px;
    line-height:1.6;
    font-weight:650;
}

.siapmang-public-social{
    margin-top:24px;
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.siapmang-public-social a{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#fff;
    text-decoration:none;
    font-size:21px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(14px);
    transition:all .22s ease;
}

.siapmang-public-social a:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#2563eb 0%,#06b6d4 55%,#10b981 100%);
}

.siapmang-public-footer-bottom{
    position:relative;
    z-index:1;
    width:min(1180px, calc(100% - 32px));
    margin:42px auto 0;
    padding:16px 20px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    color:rgba(255,255,255,.84);
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(16px);
}

@media (max-width: 992px){
    .siapmang-public-footer-inner{
        grid-template-columns:1fr;
    }

    .siapmang-public-agency,
    .siapmang-public-agency-logo,
    .siapmang-public-social{
        text-align:center;
        justify-content:center;
    }
}

@media (max-width: 576px){
    .siapmang-public-visitor-grid{
        grid-template-columns:1fr;
    }

    .siapmang-public-footer-bottom{
        flex-direction:column;
        text-align:center;
    }
}

.back-to-top{
    position:fixed;
    z-index:999;

    width:52px;
    height:52px;

    right:24px;
    bottom:24px;

    border-radius:18px;

    color:#fff !important;
    text-decoration:none;

    background:linear-gradient(
        135deg,
        #2563eb 0%,
        #06b6d4 55%,
        #10b981 100%
    );

    box-shadow:
        0 18px 38px rgba(37,99,235,.20),
        0 10px 22px rgba(16,185,129,.14);

    border:1px solid rgba(255,255,255,.45);

    transition:all .22s ease;
}

.back-to-top i{
    color:#fff;
    font-size:18px;
}

.back-to-top:hover{
    transform:translateY(-2px);
}

.siapmang-public-action,
.siapmang-public-btn-primary,
.siapmang-public-btn-secondary,
.siapmang-public-social a,
.back-to-top{
    position:relative;
    overflow:hidden;
    transition:all .22s ease;
}

.siapmang-public-action::before,
.siapmang-public-btn-primary::before,
.back-to-top::before{
    content:'';
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.30) 45%,
            rgba(255,255,255,0) 70%
        );

    transform:translateX(-140%);
    transition:transform .7s ease;
}

.siapmang-public-action:hover::before,
.siapmang-public-btn-primary:hover::before,
.back-to-top:hover::before{
    transform:translateX(140%);
}

.siapmang-public-action:hover,
.siapmang-public-btn-primary:hover,
.siapmang-public-btn-secondary:hover,
.siapmang-public-social a:hover,
.back-to-top:hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
}

.back-to-top{
    position:fixed !important;
    left:auto !important;
    right:24px !important;
    bottom:24px !important;
    top:auto !important;
    z-index:9999 !important;
}

@media (max-width:576px){
    .back-to-top{
        right:16px !important;
        bottom:16px !important;
    }
}

#modal-skm .modal-dialog{
    max-width:760px;
}

#modal-skm .modal-content{
    max-height:84vh;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.72);
    border-radius:20px;

    background:rgba(255,255,255,.82);

    box-shadow:
        0 24px 70px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.82);

    backdrop-filter:blur(18px);
}

#modal-skm .modal-header{
    border:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.86),
            rgba(6,182,212,.82),
            rgba(16,185,129,.76)
        );

    min-height:50px;

    padding:12px 18px;
}

#modal-skm .modal-title{
    font-size:15px;
    letter-spacing:.01em;
}

#modal-skm .modal-body{
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            rgba(248,251,255,.96),
            rgba(245,255,251,.96)
        );
    padding:22px !important;
}

#modal-skm .modal-footer{
    border:0;

    padding:12px 18px;

    background:
        rgba(248,250,252,.82);

    color:#64748b;
}

.siapmang-skm-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:center;
    justify-items:center;
}

.img-skm{
    width:100%;
    height:360px;
    max-height:360px;
    max-width:100%;
    object-fit:contain;
    border-radius:14px;
    background:rgba(255,255,255,.75);
    box-shadow:0 16px 38px rgba(15,23,42,.10);
}

@media (max-width: 768px){
    #modal-skm .modal-dialog{
        max-width:calc(100% - 24px);
    }

    .siapmang-skm-gallery{
        grid-template-columns:1fr;
    }

    .img-skm{
        height:auto;
        max-height:58vh;
    }
}

.siapmang-public-nav-spacer{
    width:1px;
}

.siapmang-public-hero-content{
    max-width:760px;
    margin-top:0;
}

.siapmang-public-hero-content p{
    max-width:640px;
}

.siapmang-public-top-badge{
    position:relative;
    overflow:hidden;

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

    min-height:52px;

    padding:0 18px;

    border-radius:18px;

    text-decoration:none;

    font-size:14px;
    font-weight:900;
    letter-spacing:.01em;

    color:#0f172a;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(236,253,245,.68)
        );

    border:1px solid rgba(255,255,255,.86);

    box-shadow:
        0 20px 50px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    transition:all .22s ease;
}

.siapmang-public-top-badge:hover{
    transform:translateY(-2px);
    filter:saturate(1.06);
}