:root{
    --navy:#020b2b;
    --navy-2:#061a48;
    --blue:#0b3f82;
    --blue-2:#145b9e;
    --cyan:#39a9e8;
    --gold:#e2b34f;
    --white:#f7fbff;
    --muted:#b8c9df;
    --line:rgba(255,255,255,.12);
    --card:rgba(10,47,91,.72);
    --shadow:0 24px 70px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.75}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:auto}
.narrow{max-width:900px}
.site-header{position:fixed;z-index:30;top:0;left:0;right:0;background:rgba(2,11,43,.76);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.01em}
.brand img{width:46px;height:46px;object-fit:contain;border-radius:8px}
.nav{display:flex;align-items:center;gap:24px;font-size:.92rem}
.nav a{color:#dbe8f8;transition:.2s}
.nav a:hover{color:white}
.nav-cta{padding:9px 16px;border:1px solid rgba(226,179,79,.7);color:var(--gold)!important;border-radius:999px}
.nav-toggle{display:none;background:none;color:white;border:0;font-size:1.7rem}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;background:url("../assets/images/hero.jpg") center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,11,43,.35),rgba(2,11,43,.04) 60%,rgba(2,11,43,.15))}
.hero-content{position:relative;z-index:2;padding-top:76px}
.hero-copy{max-width:850px}
.eyebrow{margin:0 0 10px;color:var(--gold);font-weight:800;letter-spacing:.16em;font-size:.82rem}
.hero h1{font-size:clamp(2.8rem,7vw,6.4rem);line-height:.98;margin:0 0 22px;max-width:950px}
.hero-tagline{font-size:clamp(1rem,2vw,1.35rem);font-weight:800;letter-spacing:.04em}
.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;font-weight:800;margin-top:14px}
.button-gold{background:var(--gold);color:#111}
.scroll-cue{position:absolute;z-index:2;bottom:28px;left:50%;font-size:2rem;opacity:.75}
.section{padding:110px 0;background:#06153a}
.section-dark{background:linear-gradient(135deg,#020a26,#062c63)}
.section-blue{background:linear-gradient(135deg,#08326a,#0b5791)}
.about,.company-data,.clients,.contact{background:linear-gradient(180deg,#061b43,#03102e)}
.two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}
.section-heading{margin-bottom:42px}
.section-heading.center{text-align:center}
.section-heading h2,h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;margin:0 0 18px}
.section-heading p:not(.eyebrow){color:var(--muted)}
.section-intro{max-width:720px;margin:0 auto;color:var(--muted)}
.section-media img,.contact-photo img{width:100%;border-radius:26px;box-shadow:var(--shadow)}
.framed{padding:10px;border-radius:30px;background:linear-gradient(135deg,rgba(57,169,232,.35),rgba(226,179,79,.15))}
.about p{color:#c8d7ea}
.vision-grid,.culture-grid,.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.glass-card,.culture-card,.benefit-card,.service-card,.legal-list>div{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.glass-card h3,.culture-card h3,.benefit-card h3,.service-card h3{margin-top:0}
.glass-card h3{font-size:1.8rem;color:var(--gold)}
.glass-card li{margin:10px 0;color:#d5e1f0}
.culture{background:radial-gradient(circle at 20% 20%,#0b3b79 0,#061a44 45%,#020b2b 100%)}
.culture-grid{grid-template-columns:repeat(3,1fr)}
.culture-card span{color:var(--gold);font-weight:900}
.culture-card p,.benefit-card p,.service-card p{color:var(--muted)}
.company-data{background:#04112f}
.data-grid{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:stretch}
.logo-panel{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.97);border-radius:28px;min-height:280px}
.logo-panel img{width:180px;height:180px;object-fit:contain}
.data-list{background:rgba(7,42,82,.75);border:1px solid var(--line);border-radius:28px;padding:14px 30px}
.data-list>div{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.data-list>div:last-child{border-bottom:0}
.data-list span{color:#d6e4f5}
.legal-list{display:grid;gap:18px}
.legal-list>div{display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start}
.legal-list span{color:var(--gold);font-weight:900;font-size:1.5rem}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{transition:transform .25s,border-color .25s}
.service-card:hover{transform:translateY(-5px);border-color:rgba(57,169,232,.5)}
.service-number{color:var(--gold);font-size:.82rem;font-weight:900;letter-spacing:.12em;margin-bottom:10px}
.service-card h3{font-size:1.08rem;line-height:1.4}
.benefit-grid{grid-template-columns:repeat(4,1fr)}
.benefit-card{background:rgba(1,15,42,.35)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gallery-item{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:18px;box-shadow:var(--shadow)}
.gallery-item img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s}
.gallery-item:hover img{transform:scale(1.05)}
.contact-grid{grid-template-columns:1.1fr .9fr}
.contact-list{display:grid;gap:12px;margin-top:30px}
.contact-list a{padding:17px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(8,43,83,.5)}
.contact-list span{display:block;color:var(--gold);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.contact-list strong{display:block;margin-top:3px;word-break:break-word}
.footer{padding:28px 0;background:#010821;border-top:1px solid var(--line)}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer p{margin:0;color:var(--muted);font-size:.85rem}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;max-width:95vw;border-radius:12px}
.lightbox-close{position:absolute;right:24px;top:18px;background:none;border:0;color:white;font-size:3rem;cursor:pointer}
@media(max-width:980px){
 .nav{gap:13px;font-size:.82rem}
 .two-col{gap:40px}
 .service-grid{grid-template-columns:repeat(2,1fr)}
 .benefit-grid{grid-template-columns:repeat(2,1fr)}
 .gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 .nav-toggle{display:block}
 .nav{position:absolute;top:76px;left:4%;right:4%;display:none;flex-direction:column;align-items:stretch;padding:16px;background:#041431;border:1px solid var(--line);border-radius:18px}
 .nav.open{display:flex}
 .nav a{padding:9px 10px}
 .hero-media{background-position:62% center}
 .two-col,.vision-grid,.culture-grid,.service-grid,.benefit-grid{grid-template-columns:1fr}
 .data-grid{grid-template-columns:1fr}
 .data-list>div{grid-template-columns:1fr;gap:5px}
 .gallery{grid-template-columns:1fr}
 .section{padding:78px 0}
 .footer-wrap{flex-direction:column;align-items:flex-start}
}

/* Refined top section and client page */
.nav a.active{color:var(--gold)}
.hero-overlay{background:linear-gradient(90deg,rgba(1,7,27,.94) 0%,rgba(2,11,43,.72) 34%,rgba(2,11,43,.25) 72%,rgba(2,11,43,.12) 100%)}
.hero-copy-polished{max-width:760px;padding:52px 0 90px}
.hero-kicker{display:flex;align-items:center;gap:12px;color:#d9e8fa;font-size:.78rem;font-weight:800;letter-spacing:.24em;margin-bottom:24px;text-shadow:none!important;filter:none!important}
.hero-kicker span{display:inline-block;width:34px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(3rem,7vw,6.7rem);letter-spacing:-.045em;text-wrap:balance;text-shadow:none!important;filter:none!important}
.hero h1 strong{color:#fff}
.hero-tagline{max-width:560px;color:#f3f7fc;margin:0 0 8px;font-size:clamp(1rem,1.7vw,1.25rem);letter-spacing:.08em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.button-gold span{margin-left:10px;font-size:1.1rem}
.button-ghost{border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.hero-bottom-line{position:absolute;z-index:2;left:50%;bottom:34px;transform:translateX(-50%);width:min(1180px,92%);display:flex;justify-content:flex-end;gap:14px;color:rgba(235,245,255,.72);font-size:.68rem;letter-spacing:.18em;font-weight:700}
.inner-page{min-height:100vh;background:#04112f}
.page-hero{position:relative;min-height:48vh;display:flex;align-items:flex-end;padding:150px 0 70px;overflow:hidden;background:linear-gradient(120deg,rgba(2,11,43,.96),rgba(5,48,96,.82)),url('../assets/images/hero.jpg') center/cover}
.page-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 25%,rgba(57,169,232,.18),transparent 30%)}
.page-hero-content{position:relative;z-index:1}
.page-hero h1{font-size:clamp(3rem,6vw,5.5rem);margin:0 0 12px;line-height:1}
.page-hero p:not(.eyebrow){max-width:760px;color:#c8d8ea;font-size:1.03rem;margin:0}
.clients-page{background:linear-gradient(180deg,#061b43,#03102e)}
.client-pages-large{grid-template-columns:repeat(2,1fr);align-items:start}
.client-sheet{margin:0}
.client-sheet img{width:100%;border-radius:20px;box-shadow:var(--shadow);background:white}
.client-sheet figcaption{margin-top:10px;text-align:center;color:var(--muted);font-size:.82rem}
@media(max-width:760px){
 .hero-copy-polished{padding:30px 0 100px}
 .hero-bottom-line{justify-content:center;gap:8px;font-size:.55rem;letter-spacing:.1em;bottom:24px}
 .page-hero{min-height:42vh;padding-top:130px}
}

/* Klien: dua halaman, tanpa kartu */
.homepage-client-pages{grid-template-columns:repeat(2,1fr);gap:28px;align-items:start}
.homepage-client-pages .client-sheet{margin:0}
.client-sheet{margin:0}
.client-sheet img{width:100%;border-radius:20px;background:#fff;box-shadow:none}
.client-sheet figcaption{margin-top:12px;text-align:center;color:var(--muted);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.client-page-link{text-align:center;margin-top:34px}
.client-pages-large{grid-template-columns:repeat(2,1fr);align-items:start;gap:28px}
@media(max-width:760px){
 .homepage-client-pages,.client-pages-large{grid-template-columns:1fr}
}

/* Hero title: explicitly no text shadow */
.hero-copy, .hero-copy * { text-shadow:none !important; filter:none !important; }
.hero-kicker, .hero-kicker * { text-shadow:none !important; }


/* Elegant refinement */
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.005em}
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid rgba(2,11,43,.08);box-shadow:0 8px 30px rgba(2,11,43,.06)}
.brand{color:var(--navy)}
.nav a{color:#172642;font-weight:700;letter-spacing:.015em}
.nav a:hover,.nav a.active{color:var(--blue)}
.nav-cta{color:var(--blue)!important;border-color:rgba(11,63,130,.25);background:rgba(11,63,130,.04)}
.nav-toggle{color:var(--navy)}
.hero{min-height:calc(100vh - 0px);background:#020b2b}
.hero-overlay{background:linear-gradient(90deg,rgba(1,7,27,.94) 0%,rgba(2,11,43,.80) 35%,rgba(2,11,43,.28) 72%,rgba(2,11,43,.18) 100%)}
.hero-copy-polished{max-width:720px;padding:90px 0 110px}
.hero-kicker{text-shadow:none!important;filter:none!important}
.hero h1,.hero h1 *,.hero-tagline,.hero-copy,.hero-copy *{text-shadow:none!important;filter:none!important}
.hero h1{font-weight:800;line-height:.98}
.hero-tagline{color:#f1c15c;font-weight:800}
.button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.button:hover{transform:translateY(-2px)}
.button-gold{box-shadow:none}
.button-ghost{backdrop-filter:blur(10px)}
.section{padding:96px 0}
.section-heading{margin-bottom:46px}
.eyebrow{font-size:.72rem;letter-spacing:.22em}
h2{letter-spacing:-.025em}
.section-intro{line-height:1.8}
.section-media img,.contact-photo img{box-shadow:none}
.framed{padding:8px;background:linear-gradient(135deg,rgba(57,169,232,.28),rgba(226,179,79,.12))}
.glass-card,.culture-card,.benefit-card,.service-card,.legal-list>div{box-shadow:none}
.service-card,.culture-card,.benefit-card,.glass-card{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.service-card:hover,.culture-card:hover,.benefit-card:hover,.glass-card:hover{transform:translateY(-4px);border-color:rgba(226,179,79,.34)}
.clients{background:#fff;color:var(--navy)}
.clients .section-heading p:not(.eyebrow),.clients .section-intro{color:#667085}
.clients .eyebrow{color:#9a6a16}
.client-sheet img{box-shadow:none}

/* Documentation slider: one image per view, touch/swipe friendly */
.documentation-slider{position:relative;max-width:1040px;margin:0 auto;padding:0 72px 42px}
.slider-viewport{overflow:hidden;border-radius:26px;background:#fff;border:1px solid rgba(2,11,43,.10)}
.slider-track{display:flex;transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
.slide{min-width:100%;padding:18px;background:#fff}
.slide-image{display:block;width:100%;padding:0;border:0;background:#071a3e;cursor:zoom-in;overflow:hidden;border-radius:18px}
.slide-image img{width:100%;height:min(62vh,620px);object-fit:contain;background:#071a3e;transition:transform .45s ease}
.slide-image:hover img{transform:scale(1.012)}
.slide-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4px 2px;color:#64748b;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem}
.slide-caption strong{color:var(--navy);font-size:.78rem;letter-spacing:.12em}
.slider-control{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(226,179,79,.55);background:#fff;color:var(--navy);font-size:1.3rem;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px rgba(2,11,43,.10);transition:.2s}
.slider-control:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-50%) scale(1.05)}
.slider-prev{left:8px}.slider-next{right:8px}
.slider-dots{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px}
.slider-dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#cbd5e1;cursor:pointer;transition:.25s}
.slider-dot.is-active{width:28px;border-radius:99px;background:var(--gold)}
@media(max-width:760px){
 .site-header{background:rgba(255,255,255,.98)}
 .nav{background:#fff;border-color:rgba(2,11,43,.08);box-shadow:0 18px 40px rgba(2,11,43,.12)}
 .hero-copy-polished{padding:60px 0 100px}
 .hero h1{font-size:clamp(2.7rem,13vw,4.8rem)}
 .documentation-slider{padding:0 0 40px}
 .slider-control{width:42px;height:42px;top:auto;bottom:35px;transform:none}
 .slider-control:hover{transform:scale(1.04)}
 .slider-prev{left:10px}.slider-next{right:10px}
 .slider-dots{padding:0 70px}
 .slide{padding:10px}
 .slide-image img{height:52vh;min-height:300px}
 .slide-caption{padding:13px 2px 2px}
}


/* Klien Kami — satu section di homepage, dua lembar dalam satu tampilan */
.client-spread{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
    align-items:start;
    gap:32px;
    max-width:1180px;
    margin:0 auto;
}
.client-page{
    margin:0;
    min-width:0;
}
.client-page-image{
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(2,11,43,.10);
    border-radius:18px;
}
.client-page-image img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:transform .45s ease;
}
.client-page:hover .client-page-image img{
    transform:scale(1.015);
}
.client-page figcaption{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:16px;
    color:var(--navy);
}
.client-page figcaption span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
}
.client-page figcaption strong{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.16em;
}
.client-spread-divider{
    width:1px;
    min-height:100%;
    background:linear-gradient(to bottom,transparent,rgba(2,11,43,.14) 15%,rgba(2,11,43,.14) 85%,transparent);
}
@media(max-width:760px){
    .client-spread{
        grid-template-columns:1fr;
        gap:26px;
    }
    .client-spread-divider{
        display:none;
    }
    .client-page-image img{
        aspect-ratio:auto;
    }
}



/* SLF detail page */
.detail-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(7,23,52,.08)}
.back-link{color:var(--navy);font-weight:800;text-decoration:none;transition:color .2s ease}.back-link:hover{color:var(--gold)}
.slf-hero{background:linear-gradient(135deg,#071735 0%,#0b2855 58%,#123f70 100%);color:#fff;padding:72px 0;overflow:hidden}.slf-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.slf-hero .eyebrow{color:#e8b94f}.slf-hero h1{font-size:clamp(3rem,6vw,5.6rem);line-height:.98;margin:12px 0 18px;letter-spacing:-.04em}.slf-hero p:not(.eyebrow){font-size:clamp(1.2rem,2vw,1.7rem);margin:0 0 20px;color:rgba(255,255,255,.82)}.slf-hero-note{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;color:#e8b94f}.slf-hero img{width:100%;max-height:560px;object-fit:cover;border-radius:28px;box-shadow:0 25px 70px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16)}
.slf-sections{display:grid;gap:24px;max-width:1000px;margin:48px auto 0}.slf-info-block{display:grid;grid-template-columns:90px 1fr;gap:28px;padding:36px 0;border-top:1px solid var(--line)}.slf-info-number{font-size:2rem;font-weight:900;color:var(--gold)}.slf-info-copy h2{margin:0 0 16px;color:#fff;font-size:clamp(1.35rem,2vw,2rem)}.slf-info-copy p{color:var(--muted);line-height:1.85;margin:0 0 13px}.slf-info-copy p:last-child{margin-bottom:0}


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

.slf-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #06142f 0%,
            #0b2146 55%,
            #102f59 100%
        ) !important;

    color: #ffffff !important;
}

.slf-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(222, 174, 62, 0.08);

    top: -220px;
    right: -100px;
}

.slf-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.08);

    bottom: -170px;
    left: -100px;
}

.slf-hero-inner {
    position: relative;

    z-index: 2;

    min-height: 480px;

    padding-top: 80px;
    padding-bottom: 80px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: center;

    gap: 70px;
}

.slf-hero .eyebrow {
    margin-bottom: 18px;

    color: #e8b949 !important;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.18em;
}

.slf-hero h1 {
    max-width: 760px;

    margin: 0 0 20px;

    font-size: clamp(42px, 5vw, 76px);

    line-height: 0.98;

    letter-spacing: -0.045em;

    font-weight: 800;

    color: #ffffff !important;
}

.slf-hero > .container > div > p:not(.eyebrow) {
    max-width: 620px;

    margin: 0 0 24px;

    color: rgba(255, 255, 255, 0.78) !important;

    font-size: 20px;

    line-height: 1.6;
}

.slf-hero-note {
    display: inline-flex;

    align-items: center;

    padding: 9px 15px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 999px;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.04em;
}


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

.slf-hero-inner > img {
    width: 100%;

    max-width: 560px;

    max-height: 500px;

    margin-left: auto;

    object-fit: contain;

    border-radius: 18px;

    box-shadow: none !important;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

/*
   PENTING:
   Bagian penjelasan HARUS PUTIH.
   Ini mengalahkan .section / .section-dark
   dari CSS lama.
*/

.slf-detail .slf-content,
.slf-detail section.slf-content {
    padding-top: 100px;

    padding-bottom: 110px;

    background: #ffffff !important;

    color: #18202a !important;
}

.slf-detail .slf-content .container {
    background: transparent !important;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.slf-content .section-heading {
    max-width: 820px;

    margin: 0 auto 65px;
}

.slf-content .section-heading.center {
    text-align: center;
}

.slf-content .section-heading .eyebrow {
    color: #c08d20 !important;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.18em;

    margin-bottom: 14px;
}

.slf-detail .slf-content .section-heading h2 {
    margin: 0;

    color: #101828 !important;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -0.035em;

    font-weight: 800;
}


/* =========================================================
   PENJELASAN
   ========================================================= */

.slf-sections {
    max-width: 1050px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   INFO BLOCK
   ========================================================= */

.slf-detail .slf-info-block {
    position: relative;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr);

    gap: 28px;

    padding: 34px 38px;

    background: #ffffff !important;

    color: #18202a !important;

    border: 1px solid #e7e9ed !important;

    border-radius: 18px;

    box-shadow: none !important;

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;
}

.slf-detail .slf-info-block:hover {
    transform: translateY(-2px);

    border-color: #d7b35a !important;

    background: #fffefa !important;
}


/* =========================================================
   NOMOR
   ========================================================= */

.slf-info-number {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #f3e3b5 !important;

    color: #a67512 !important;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.05em;

    flex-shrink: 0;
}


/* =========================================================
   COPY
   ========================================================= */

.slf-info-copy {
    min-width: 0;
}

.slf-detail .slf-info-copy h2 {
    margin: 3px 0 18px;

    color: #101828 !important;

    font-size: clamp(21px, 2vw, 29px);

    line-height: 1.25;

    letter-spacing: -0.02em;

    font-weight: 750;
}

.slf-detail .slf-info-copy p {
    position: relative;

    margin: 0 0 14px;

    padding-left: 20px;

    color: #475467 !important;

    font-size: 16px;

    line-height: 1.85;
}

.slf-info-copy p:last-child {
    margin-bottom: 0;
}

.slf-info-copy p::before {
    content: "";

    position: absolute;

    top: 0.72em;

    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d3a43b;
}

.slf-info-copy p + p {
    margin-top: 6px;
}


/* =========================================================
   OVERRIDE CSS LAMA
   Kalau sebelumnya ada .section-dark
   yang membuat background navy
   ========================================================= */

.slf-detail .section-dark {
    background: #ffffff !important;

    color: #18202a !important;
}

.slf-detail .section-dark h1,
.slf-detail .section-dark h2,
.slf-detail .section-dark h3,
.slf-detail .section-dark p {
    color: #18202a !important;
}


/* =========================================================
   JANGAN SAMPAI SECTION UMUM MENGUBAH DETAIL
   ========================================================= */

.slf-detail .section {
    background: transparent;
}

.slf-detail .slf-content.section {
    background: #ffffff !important;
}


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

@media (max-width: 900px) {

    .slf-hero-inner {
        grid-template-columns: 1fr;

        gap: 45px;

        padding-top: 65px;

        padding-bottom: 65px;
    }

    .slf-hero h1 {
        font-size: clamp(40px, 9vw, 62px);
    }

    .slf-hero-inner > img {
        margin: 0 auto;

        max-width: 420px;
    }

    .slf-detail .slf-content {
        padding-top: 75px;

        padding-bottom: 80px;
    }

    .slf-content .section-heading {
        margin-bottom: 45px;
    }

    .slf-info-block {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 20px;

        padding: 28px;
    }

    .slf-info-number {
        width: 48px;

        height: 48px;
    }
}


/* =========================================================
   MOBILE KECIL
   ========================================================= */

@media (max-width: 600px) {

    .detail-header .nav-wrap {
        min-height: 68px;
    }

    .detail-header .brand span {
        display: none;
    }

    .back-link {
        font-size: 13px;
    }

    .slf-hero-inner {
        padding-top: 55px;

        padding-bottom: 55px;
    }

    .slf-hero h1 {
        font-size: 42px;

        line-height: 1.02;
    }

    .slf-hero > .container > div > p:not(.eyebrow) {
        font-size: 17px;
    }

    .slf-detail .slf-content {
        padding-top: 60px;

        padding-bottom: 65px;
    }

    .slf-content .section-heading h2 {
        font-size: 30px;
    }

    .slf-info-block {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 24px 22px;

        border-radius: 15px;
    }

    .slf-info-number {
        width: 44px;

        height: 44px;

        border-radius: 11px;
    }

    .slf-info-copy h2 {
        font-size: 22px;

        margin-bottom: 15px;
    }

    .slf-info-copy p {
        font-size: 15px;

        line-height: 1.75;

        padding-left: 18px;
    }
}


/* =========================================================
   NBK FINAL REFINEMENT
   Hero detail dibuat lebih padat, seimbang & responsif
   ========================================================= */

/* ---------- DETAIL PAGE BASE ---------- */
.slf-detail{
    background:#f7f8fa !important;
    color:#18202a !important;
}

/* ---------- HEADER ---------- */
.detail-header{
    min-height:76px;
    background:rgba(255,255,255,.96) !important;
    border-bottom:1px solid rgba(2,11,43,.08);
    box-shadow:0 6px 24px rgba(7,23,52,.06);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.detail-header .nav-wrap{
    min-height:76px;
}

.detail-header .brand{
    gap:11px;
}

.detail-header .brand img{
    width:48px;
    height:48px;
}

.detail-header .brand span{
    font-size:16px;
    font-weight:800;
    color:#101828 !important;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:700;
    transition:.25s ease;
}

/* ---------- HERO ---------- */
.slf-hero{
    min-height:0 !important;
    padding:0 !important;
    background:
        radial-gradient(circle at 92% 8%,rgba(57,169,232,.10),transparent 25%),
        linear-gradient(125deg,#06142f 0%,#0a2145 58%,#123866 100%) !important;
}

.slf-hero::before{
    width:360px;
    height:360px;
    top:-205px;
    right:-90px;
    background:rgba(222,174,62,.07);
}

.slf-hero::after{
    width:260px;
    height:260px;
    bottom:-175px;
    left:-105px;
}

/* Komposisi desktop */
.slf-hero-inner{
    min-height:500px !important;
    padding:52px 0 !important;
    grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr) !important;
    gap:52px !important;
    align-items:center;
}

/* Teks */
.slf-hero .eyebrow{
    margin-bottom:14px;
    font-size:12px;
    letter-spacing:.20em;
}

.slf-hero h1{
    max-width:720px;
    margin:0 0 14px;
    font-size:clamp(44px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.slf-hero > .container > div > p:not(.eyebrow){
    max-width:610px;
    margin:0 0 20px;
    font-size:18px;
    line-height:1.55;
}

.slf-hero-note{
    padding:8px 14px;
    font-size:11px;
}

/* Gambar lebih besar tetapi tetap proporsional */
.slf-hero-inner > img{
    width:100%;
    max-width:560px !important;
    max-height:400px !important;
    margin:0 0 0 auto;
    border-radius:20px;
    object-fit:contain;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.13);
    transition:transform .4s ease,box-shadow .4s ease;
}

.slf-hero-inner > img:hover{
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 18px 45px rgba(0,0,0,.16) !important;
}

/* ---------- CONTENT ---------- */
.slf-detail .slf-content,
.slf-detail section.slf-content{
    padding:82px 0 92px !important;
    background:#fff !important;
}

.slf-content .section-heading{
    max-width:780px;
    margin:0 auto 42px;
}

.slf-content .section-heading .eyebrow{
    margin-bottom:10px;
}

.slf-detail .slf-content .section-heading h2{
    font-size:clamp(30px,4vw,44px);
}

/* Penjelasan lebih ringkas */
.slf-sections{
    max-width:1020px;
    gap:16px;
}

.slf-detail .slf-info-block{
    grid-template-columns:60px minmax(0,1fr);
    gap:22px;
    padding:28px 32px;
    border-radius:16px;
    background:#fff !important;
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.slf-detail .slf-info-block:hover{
    transform:translateY(-3px);
    border-color:#d7b35a !important;
    box-shadow:0 12px 30px rgba(16,24,40,.06) !important;
}

.slf-info-number{
    width:48px;
    height:48px;
    border-radius:13px;
}

.slf-detail .slf-info-copy h2{
    margin:2px 0 13px;
    font-size:clamp(20px,2vw,27px);
}

.slf-detail .slf-info-copy p{
    margin-bottom:10px;
    font-size:15.5px;
    line-height:1.75;
}

/* ---------- BROCHURE / CONTENT SPACING ---------- */
.slf-brochure-pages{
    padding-top:82px !important;
    padding-bottom:90px !important;
}

.slf-pages-grid{
    gap:22px;
    margin-top:36px;
}

.slf-page-image{
    padding:9px;
    border-radius:17px;
}

/* ---------- CTA ---------- */
.slf-contact-cta{
    padding:75px 0 !important;
}

.slf-contact-cta h2{
    font-size:clamp(30px,4vw,48px);
}

/* ---------- SCROLL / ENTRANCE ANIMATION ---------- */
.slf-hero .eyebrow,
.slf-hero h1,
.slf-hero > .container > div > p:not(.eyebrow),
.slf-hero-note,
.slf-hero-inner > img{
    animation:nbkDetailFade .7s ease both;
}

.slf-hero h1{animation-delay:.08s}
.slf-hero > .container > div > p:not(.eyebrow){animation-delay:.16s}
.slf-hero-note{animation-delay:.24s}
.slf-hero-inner > img{animation-delay:.12s}

@keyframes nbkDetailFade{
    from{
        opacity:0;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ---------- TABLET ---------- */
@media(max-width:900px){
    .detail-header .nav-wrap{
        min-height:72px;
    }

    .slf-hero-inner{
        min-height:0 !important;
        padding:58px 0 64px !important;
        grid-template-columns:1fr !important;
        gap:34px !important;
    }

    .slf-hero h1{
        font-size:clamp(42px,8vw,60px);
    }

    .slf-hero-inner > img{
        max-width:500px !important;
        max-height:390px !important;
        margin:0 auto;
    }

    .slf-detail .slf-content{
        padding:70px 0 78px !important;
    }
}

/* ---------- MOBILE ---------- */
@media(max-width:600px){
    .detail-header{
        min-height:68px;
    }

    .detail-header .nav-wrap{
        min-height:68px;
    }

    .detail-header .brand img{
        width:42px;
        height:42px;
    }

    .detail-header .brand span{
        display:none;
    }

    .back-link{
        font-size:13px;
    }

    .slf-hero-inner{
        padding:45px 0 50px !important;
        gap:28px !important;
    }

    .slf-hero .eyebrow{
        font-size:10px;
        letter-spacing:.16em;
    }

    .slf-hero h1{
        font-size:42px;
        line-height:1.02;
        margin-bottom:13px;
    }

    .slf-hero > .container > div > p:not(.eyebrow){
        font-size:16px;
        line-height:1.6;
    }

    .slf-hero-inner > img{
        max-width:100% !important;
        max-height:330px !important;
        border-radius:16px;
    }

    .slf-detail .slf-content{
        padding:58px 0 65px !important;
    }

    .slf-content .section-heading{
        margin-bottom:32px;
    }

    .slf-detail .slf-content .section-heading h2{
        font-size:30px;
    }

    .slf-detail .slf-info-block{
        grid-template-columns:1fr;
        gap:15px;
        padding:23px 20px;
        border-radius:15px;
    }

    .slf-info-number{
        width:44px;
        height:44px;
        border-radius:11px;
    }

    .slf-detail .slf-info-copy h2{
        font-size:21px;
        margin-bottom:12px;
    }

    .slf-detail .slf-info-copy p{
        font-size:15px;
        line-height:1.72;
        padding-left:17px;
    }

    .slf-brochure-pages{
        padding:65px 0 72px !important;
    }

    .slf-pages-grid{
        grid-template-columns:1fr !important;
        margin-top:28px;
    }

    .slf-contact-cta{
        padding:65px 0 !important;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
    .slf-hero .eyebrow,
    .slf-hero h1,
    .slf-hero > .container > div > p:not(.eyebrow),
    .slf-hero-note,
    .slf-hero-inner > img{
        animation:none;
    }

    .slf-hero-inner > img{
        transition:none;
    }
}


/* =========================================================
   ABOUT / TENTANG PERUSAHAAN
   UPDATE - MODERN, ELEGANT & LEBIH ENAK DIBACA
   ========================================================= */

#tentang.about{
    position:relative;
    overflow:hidden;
    padding:110px 0 !important;
    background:#061735 !important;
    color:#fff !important;
}

#tentang.about .container.two-col{
    width:min(1180px,92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(380px,.92fr) minmax(420px,1.08fr);
    align-items:center;
    gap:78px;
}

#tentang.about .section-media.framed{
    width:100%;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

#tentang.about .section-media.framed img{
    display:block;
    width:100%;
    height:570px;
    object-fit:cover;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:none !important;
}

#tentang.about .container.two-col > div:last-child{
    min-width:0;
    max-width:650px;
}

#tentang.about .eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 20px;
    color:#e8b949 !important;
    font-size:12px;
    font-weight:800;
    letter-spacing:.22em;
}

#tentang.about .eyebrow::before{
    content:"";
    width:30px;
    height:2px;
    flex:0 0 30px;
    background:#e8b949;
}

#tentang.about h2{
    max-width:620px;
    margin:0 0 30px;
    color:#fff !important;
    font-size:clamp(40px,4.5vw,60px);
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:800;
}

#tentang.about .container.two-col > div:last-child p:not(.eyebrow){
    max-width:650px;
    margin:0 0 21px;
    color:rgba(255,255,255,.76) !important;
    font-size:16px;
    line-height:1.9;
    letter-spacing:.005em;
}

#tentang.about .container.two-col > div:last-child p:last-child{
    margin-bottom:0;
}

#tentang.about .container.two-col > div:last-child::after{
    content:"";
    display:block;
    width:60px;
    height:2px;
    margin-top:34px;
    background:#d9aa3f;
}

@media(max-width:1000px){
    #tentang.about{
        padding:85px 0 !important;
    }

    #tentang.about .container.two-col{
        grid-template-columns:1fr;
        gap:52px;
    }

    #tentang.about .container.two-col > div:last-child{
        max-width:760px;
    }

    #tentang.about .section-media.framed img{
        height:480px;
    }

    #tentang.about h2{
        max-width:720px;
    }
}

@media(max-width:600px){
    #tentang.about{
        padding:70px 0 !important;
    }

    #tentang.about .container.two-col{
        width:min(100% - 44px,1180px);
        gap:38px;
    }

    #tentang.about .section-media.framed img{
        height:360px;
        border-radius:20px;
    }

    #tentang.about .eyebrow{
        font-size:10px;
        letter-spacing:.17em;
        margin-bottom:16px;
    }

    #tentang.about h2{
        font-size:36px;
        line-height:1.08;
        margin-bottom:24px;
    }

    #tentang.about .container.two-col > div:last-child p:not(.eyebrow){
        font-size:15px;
        line-height:1.8;
        margin-bottom:18px;
    }
}
/* =========================================
   GOOGLE MAPS
========================================= */

.contact-map {
    width: 100%;
    overflow: hidden;

    background: #08264d;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 24px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}


/* MAP */

.map-frame {
    width: 100%;
    height: 430px;

    overflow: hidden;
}

.map-frame iframe {
    width: 100% !important;
    height: 100% !important;

    display: block;

    border: 0 !important;
}


/* ALAMAT */

.map-address {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 20px 22px;

    background: #08264d;
}


.map-address-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    color: #f4b942;

    font-size: 22px;

    border: 1px solid rgba(244, 185, 66, 0.3);

    border-radius: 12px;
}


.map-address-text {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.map-address-text span {
    color: #f4b942;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.map-address-text strong {
    color: #ffffff;

    font-size: 15px;
}


.map-address-text p {
    margin: 0;

    color: #cbd7e8;

    font-size: 13px;
}


/* BUTTON */

.map-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0 22px 22px;

    padding: 13px 18px;

    color: #f4b942;

    border: 1px solid #f4b942;

    border-radius: 9px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s ease;
}


.map-button:hover {
    color: #061633;

    background: #f4b942;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .contact-map {
        margin-top: 10px;
    }

    .map-frame {
        height: 330px;
    }

    .map-address {
        align-items: flex-start;

        padding: 18px;
    }

    .map-address-text strong {
        font-size: 14px;
    }

}

/* =========================
   KLIEN KAMI - LOGO + NAMA
   ========================= */

.clients-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 10px;
}

.client-card {
    min-height: 215px;
    padding: 22px 18px;
    background: #fff;
    border: 1px solid rgba(2, 11, 43, .10);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.client-card:hover {
    transform: translateY(-5px);
    border-color: rgba(154, 106, 22, .28);
    box-shadow: 0 14px 32px rgba(2, 11, 43, .10);
}

.client-logo {
    width: 100%;
    height: 105px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    display: block;
    width: auto;
    max-width: 175px;
    max-height: 100px;
    object-fit: contain;
}

.client-card h3 {
    margin: 0;
    max-width: 250px;
    font-size: .78rem;
    line-height: 1.45;
    font-weight: 800;
    color: var(--navy);
    text-transform: uppercase;
}

/* Tablet */
@media (max-width: 1000px) {
    .clients-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

/* Tablet kecil */
@media (max-width: 760px) {
    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .client-card {
        min-height: 205px;
    }

    .client-logo {
        height: 100px;
    }
}

/* HP */
@media (max-width: 520px) {
    .clients-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .client-card {
        min-height: 195px;
        padding: 20px 16px;
    }

    .client-logo {
        height: 95px;
    }

    .client-logo img {
        max-width: 165px;
        max-height: 90px;
    }

    .client-card h3 {
        font-size: .75rem;
    }
}


/* =========================================================
   NBK FINAL - POSISI SOCIAL MEDIA DI HERO
   Turun + sedikit ke kanan + tetap rapi
   ========================================================= */

/* HERO tetap tanpa bayangan hitam */
.hero .hero-overlay {
    background: transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Gambar hero */
.hero .hero-media {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
}

/* Konten hero */
.hero .hero-copy-polished {
    position: relative !important;
    z-index: 4 !important;
    max-width: 760px !important;
}

/* Tombol */
.hero .hero-actions {
    position: relative !important;
    z-index: 4 !important;
}

/* SOCIAL MEDIA
   Posisi: di bawah tombol dan agak ke kanan */
.hero .hero-social {
    position: relative !important;
    z-index: 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    width: max-content !important;
    max-width: calc(100% - 20px) !important;

    gap: 34px !important;

    margin-top: 42px !important;
    margin-left: 70px !important;

    padding: 9px 20px !important;

    background: rgba(7, 48, 91, 0.92) !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    border-radius: 15px !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-sizing: border-box !important;
}

.hero .hero-social-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    text-shadow: none !important;
    filter: none !important;
}

.hero .hero-social-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;

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

    margin: 0 !important;
    padding: 0 !important;
}

.hero .hero-social-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;

    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* TikTok */
.hero .hero-social-icon .tiktok-svg {
    fill: #ffffff !important;
    stroke: none !important;
}

/* YouTube */
.hero .hero-social-icon .youtube-play {
    fill: #ffffff !important;
    stroke: none !important;
}

.hero .hero-social-item > span:last-child {
    color: #ffffff !important;
}

/* Pastikan bar social lama tidak muncul di footer */
.social-media-bar {
    display: none !important;
}


/* =========================================================
   DESKTOP BESAR
   ========================================================= */

@media (min-width: 1200px) {
    .hero .hero-social {
        margin-top: 48px !important;
        margin-left: 95px !important;
        gap: 38px !important;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) and (min-width: 901px) {
    .hero .hero-social {
        margin-top: 42px !important;
        margin-left: 60px !important;
        gap: 26px !important;
    }

    .hero .hero-social-item {
        font-size: 12px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) and (min-width: 761px) {
    .hero .hero-social {
        margin-top: 34px !important;
        margin-left: 30px !important;
        gap: 20px !important;
    }

    .hero .hero-social-item {
        font-size: 11px !important;
    }

    .hero .hero-social-icon {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        flex-basis: 31px !important;
    }
}


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

@media (max-width: 760px) {
    .hero .hero-social {
        width: calc(100% - 10px) !important;
        max-width: 380px !important;

        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;

        gap: 10px !important;

        margin-top: 24px !important;
        margin-left: 0 !important;

        padding: 12px 14px !important;

        border-radius: 13px !important;
    }

    .hero .hero-social-item {
        width: 100% !important;
        font-size: 13px !important;
    }

    .hero .hero-social-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;
    }
}


/* =========================================================
   NBK FINAL HERO REFINEMENT
   Sesuai kebutuhan terakhir:
   - seluruh isi hero lebih ke kiri
   - social media di ujung kiri
   - social media sejajar vertikal dengan bottom-line kanan
   - tidak mengikuti tombol Lihat Layanan
   - tidak ada overlay hitam pekat
   ========================================================= */

/* HERO */
.hero{
    position:relative !important;
    min-height:100vh !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    background:#020b2b !important;
}

/* GAMBAR HERO */
.hero .hero-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;

    object-fit:cover !important;
    object-position:center center !important;

    transform:none !important;
    filter:none !important;
    z-index:0 !important;
}

/* OVERLAY BENING */
.hero .hero-overlay{
    position:absolute !important;
    inset:0 !important;

    background:rgba(2,11,43,0.10) !important;
    opacity:1 !important;

    box-shadow:none !important;
    filter:none !important;

    z-index:1 !important;
    pointer-events:none !important;
}

/* KONTEN HERO */
.hero .hero-content{
    position:relative !important;
    z-index:4 !important;

    width:min(1180px,92%) !important;
    margin:0 auto !important;

    padding-top:70px !important;
}

/* KONTEN TEKS DIGESER KE KIRI */
.hero .hero-copy-polished{
    position:relative !important;
    z-index:5 !important;

    max-width:740px !important;

    margin-left:-55px !important;

    padding:60px 0 115px !important;
}

/* KICKER */
.hero .hero-kicker{
    margin-bottom:22px !important;
}

/* JUDUL */
.hero .hero-copy-polished h1{
    max-width:760px !important;

    margin:0 0 22px !important;

    font-size:clamp(3rem,6.7vw,6.2rem) !important;

    line-height:.98 !important;

    letter-spacing:-.045em !important;

    text-shadow:none !important;
    filter:none !important;
}

/* TAGLINE */
.hero .hero-tagline{
    max-width:570px !important;

    margin:0 !important;

    font-size:clamp(1rem,1.8vw,1.3rem) !important;

    line-height:1.4 !important;

    text-shadow:none !important;
}

/* TOMBOL */
.hero .hero-actions{
    position:relative !important;
    z-index:5 !important;

    margin-top:24px !important;
}

/* =========================================================
   SOCIAL MEDIA
   DILETAKKAN DI BAWAH HERO, UJUNG KIRI
   SEJAJAR VERTIKAL DENGAN BOTTOM LINE
   ========================================================= */

.hero .hero-social{
    position:absolute !important;
    z-index:6 !important;

    left:max(4%, calc((100% - 1180px) / 2)) !important;
    bottom:34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;

    width:max-content !important;
    max-width:52% !important;

    gap:28px !important;

    margin:0 !important;

    padding:8px 18px !important;

    background:rgba(7,48,91,.94) !important;

    border:1px solid rgba(255,255,255,.14) !important;

    border-radius:14px !important;

    box-sizing:border-box !important;

    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
}

/* ITEM SOCIAL */
.hero .hero-social-item{
    display:inline-flex !important;
    align-items:center !important;

    gap:9px !important;

    margin:0 !important;
    padding:0 !important;

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

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

    line-height:1 !important;
    white-space:nowrap !important;

    text-shadow:none !important;
}

/* ICON */
.hero .hero-social-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;

    flex:0 0 34px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.hero .hero-social-icon svg{
    width:100% !important;
    height:100% !important;

    display:block !important;

    fill:none !important;
    stroke:#fff !important;

    stroke-width:1.7 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.hero .hero-social-icon .tiktok-svg{
    fill:#fff !important;
    stroke:none !important;
}

.hero .hero-social-icon .youtube-play{
    fill:#fff !important;
    stroke:none !important;
}

/* BOTTOM LINE KANAN */
.hero .hero-bottom-line{
    position:absolute !important;

    left:50% !important;
    bottom:34px !important;

    width:min(1180px,92%) !important;

    transform:translateX(-50%) !important;

    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;

    gap:14px !important;

    z-index:3 !important;

    margin:0 !important;

    pointer-events:none;
}

/* =========================================================
   DESKTOP BESAR
   ========================================================= */

@media (min-width:1200px){

    .hero .hero-copy-polished{
        margin-left:-70px !important;
    }

    .hero .hero-social{
        left:max(3%, calc((100% - 1180px) / 2)) !important;
        bottom:34px !important;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width:1199px) and (min-width:761px){

    .hero .hero-copy-polished{
        margin-left:-40px !important;
    }

    .hero .hero-social{
        left:3% !important;
        bottom:30px !important;

        gap:20px !important;
        max-width:55% !important;
    }

    .hero .hero-social-item{
        font-size:11px !important;
    }

    .hero .hero-social-icon{
        width:31px !important;
        height:31px !important;
        min-width:31px !important;
        flex-basis:31px !important;
    }

    .hero .hero-bottom-line{
        bottom:30px !important;
        width:92% !important;
    }
}


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

@media (max-width:760px){

    .hero{
        min-height:100svh !important;
    }

    .hero .hero-content{
        width:92% !important;
        padding-top:50px !important;
    }

    .hero .hero-copy-polished{
        margin-left:0 !important;
        padding:45px 0 155px !important;
    }

    .hero .hero-copy-polished h1{
        font-size:clamp(2.7rem,13vw,4.8rem) !important;
    }

    .hero .hero-social{
        position:absolute !important;

        left:4% !important;
        bottom:78px !important;

        width:92% !important;
        max-width:360px !important;

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

        gap:10px !important;

        padding:12px 14px !important;

        border-radius:13px !important;
    }

    .hero .hero-social-item{
        width:100% !important;

        font-size:13px !important;
    }

    .hero .hero-social-icon{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        flex-basis:32px !important;
    }

    .hero .hero-bottom-line{
        left:4% !important;
        bottom:22px !important;

        width:92% !important;

        transform:none !important;

        justify-content:center !important;

        gap:8px !important;

        font-size:.52rem !important;
        letter-spacing:.09em !important;
    }
}


/* =========================================================
   FINAL FIX — SOCIAL MEDIA BENAR-BENAR SEJAJAR DENGAN
   "PERIZINAN BERBASIS RISIKO • PROFESIONAL • SOLUSI"
   ========================================================= */

/*
   Masalah sebelumnya:
   .hero-social berada di dalam .hero-copy, sehingga
   position:absolute + bottom mengacu ke parent tersebut.
   Sekarang kita kunci posisi vertikal berdasarkan hero-copy,
   lalu turunkan sampai satu garis dengan bottom-line.
*/

.hero .hero-copy-polished .hero-social {
    position: relative !important;

    left: auto !important;
    bottom: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    width: max-content !important;
    max-width: 100% !important;

    margin-top: 0 !important;
    margin-left: 0 !important;

    /* Turunkan dari tombol menuju garis bawah */
    transform: translateY(86px) !important;

    gap: 28px !important;

    padding: 8px 18px !important;

    background: rgba(7,48,91,.94) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;

    box-sizing: border-box !important;

    z-index: 6 !important;
}

/* Konten hero tetap di kiri */
.hero .hero-copy-polished {
    margin-left: 0 !important;
}

/* Sesuaikan posisi keseluruhan konten agar tidak terlalu tengah */
.hero .hero-content {
    width: min(1180px,92%) !important;
    margin: 0 auto !important;
}

/* Bottom line tetap di kanan bawah */
.hero .hero-bottom-line {
    left: 50% !important;
    bottom: 34px !important;
    transform: translateX(-50%) !important;
    width: min(1180px,92%) !important;
    justify-content: flex-end !important;
    z-index: 5 !important;
}

/* ---------- Desktop ---------- */
@media (min-width:1200px) {

    .hero .hero-copy-polished {
        margin-left: -25px !important;
    }

    .hero .hero-copy-polished .hero-social {
        transform: translateY(78px) !important;
    }
}

/* ---------- Laptop ---------- */
@media (max-width:1199px) and (min-width:761px) {

    .hero .hero-copy-polished {
        margin-left: -10px !important;
    }

    .hero .hero-copy-polished .hero-social {
        transform: translateY(70px) !important;
        gap: 20px !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width:760px) {

    .hero .hero-copy-polished {
        margin-left: 0 !important;
        padding-bottom: 150px !important;
    }

    .hero .hero-copy-polished .hero-social {
        position: relative !important;

        left: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: 360px !important;

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

        gap: 10px !important;

        margin-top: 20px !important;

        transform: none !important;

        padding: 12px 14px !important;
    }

    .hero .hero-bottom-line {
        left: 4% !important;
        bottom: 22px !important;
        width: 92% !important;
        transform: none !important;
        justify-content: center !important;
    }
}

/* =========================================================
   NBK FINAL HEADER — LOGO + NAV ANIMATION
   ========================================================= */

.site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1000 !important;

    height:76px !important;

    background:rgba(255,255,255,.97) !important;
    border-bottom:1px solid rgba(7,23,52,.08) !important;

    box-shadow:0 4px 20px rgba(7,23,52,.06) !important;

    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}

.nav-wrap{
    height:76px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
}

/* ---------- BRAND ---------- */

.brand{
    display:inline-flex !important;
    align-items:center !important;
    gap:11px !important;

    height:100% !important;

    color:#071735 !important;
    font-weight:800 !important;
    text-decoration:none !important;

    transition:transform .25s ease !important;
}

.brand:hover{
    transform:translateY(-1px) !important;
}

.brand img{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;

    object-fit:contain !important;
    display:block !important;

    background:transparent !important;
    border:0 !important;
    border-radius:6px !important;

    box-shadow:none !important;

    transition:transform .25s ease,filter .25s ease !important;
}

.brand:hover img{
    transform:scale(1.05) !important;
    filter:brightness(1.03) !important;
}

.brand span{
    display:inline-block !important;

    color:#071735 !important;

    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.2 !important;

    white-space:nowrap !important;

    transition:color .2s ease,transform .2s ease !important;
}

.brand:hover span{
    color:#0b3f82 !important;
    transform:translateX(2px) !important;
}


/* ---------- NAV ---------- */

.nav{
    display:flex !important;
    align-items:center !important;
    gap:28px !important;
}

.nav a{
    position:relative !important;

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

    padding:8px 0 !important;

    color:#172642 !important;

    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    text-decoration:none !important;

    transition:color .22s ease,transform .22s ease !important;
}

.nav a:not(.nav-cta)::after{
    content:"" !important;

    position:absolute !important;
    left:50% !important;
    bottom:0 !important;

    width:0 !important;
    height:2px !important;

    background:#e2b34f !important;

    transform:translateX(-50%) !important;

    transition:width .25s ease !important;
}

.nav a:not(.nav-cta):hover{
    color:#0b3f82 !important;
    transform:translateY(-1px) !important;
}

.nav a:not(.nav-cta):hover::after{
    width:100% !important;
}

.nav a.active{
    color:#0b3f82 !important;
}

.nav a.active:not(.nav-cta)::after{
    width:100% !important;
}


/* ---------- KONTAK ---------- */

.nav .nav-cta{
    padding:10px 20px !important;

    border:1px solid rgba(11,63,130,.28) !important;
    border-radius:999px !important;

    background:rgba(11,63,130,.03) !important;

    color:#0b3f82 !important;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease !important;
}

.nav .nav-cta:hover,
.nav .nav-cta.active{
    background:#0b3f82 !important;
    border-color:#0b3f82 !important;
    color:#fff !important;

    transform:translateY(-2px) !important;
}


/* ---------- TOGGLE ---------- */

.nav-toggle{
    display:none;
    border:0 !important;
    background:transparent !important;

    color:#071735 !important;

    font-size:1.7rem;

    cursor:pointer;

    transition:transform .2s ease,color .2s ease !important;
}

.nav-toggle:hover{
    color:#0b3f82 !important;
    transform:scale(1.08) !important;
}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */

@media(max-width:980px){

    .nav{
        gap:18px !important;
    }

    .nav a{
        font-size:14px !important;
    }

    .brand img{
        width:48px !important;
        height:48px !important;
        max-width:48px !important;
        max-height:48px !important;
    }

    .brand span{
        font-size:16px !important;
    }
}

@media(max-width:760px){

    .site-header{
        height:68px !important;
    }

    .nav-wrap{
        height:68px !important;
    }

    .nav-toggle{
        display:block !important;
    }

    .brand{
        gap:9px !important;
    }

    .brand img{
        width:42px !important;
        height:42px !important;
        max-width:42px !important;
        max-height:42px !important;
    }

    .brand span{
        font-size:14px !important;
    }

    .nav{
        position:absolute !important;

        top:68px !important;
        left:4% !important;
        right:4% !important;

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

        gap:3px !important;

        padding:14px !important;

        background:rgba(255,255,255,.99) !important;

        border:1px solid rgba(7,23,52,.08) !important;
        border-radius:18px !important;

        box-shadow:0 18px 40px rgba(7,23,52,.12) !important;
    }

    .nav.open{
        display:flex !important;
    }

    .nav a{
        width:100% !important;
        padding:10px !important;
        font-size:14px !important;
    }

    .nav a:not(.nav-cta)::after{
        display:none !important;
    }

    .nav .nav-cta{
        justify-content:center !important;
        text-align:center !important;
        margin-top:4px !important;
    }
}


/* =========================================================
   REMOVE LEGACY OVERRIDES
   ========================================================= */

/* Jika ada aturan logo lama dengan ukuran 56px/46px,
   aturan final di atas akan menang. */


/* =========================================================
   DATA PERUSAHAAN — REFINEMENT
   Tampilan lebih modern, proporsional & mudah dibaca
   ========================================================= */

.company-data{
    background:
        radial-gradient(circle at 12% 18%, rgba(20,91,158,.14), transparent 28%),
        linear-gradient(180deg,#061735 0%,#03102d 100%) !important;
    padding:96px 0 !important;
}

.company-data .section-heading{
    max-width:820px;
    margin:0 auto 52px !important;
    text-align:center;
}

.company-data .section-heading .eyebrow{
    margin-bottom:12px;
    color:var(--gold) !important;
    font-size:.72rem;
    letter-spacing:.22em;
}

.company-data .section-heading h2{
    margin:0;
    color:#f7fbff !important;
    font-size:clamp(2.2rem,4.4vw,3.7rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.company-data .data-grid{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:30px;
    align-items:stretch;

    width:min(1100px,92%);
    margin:0 auto;
}

/* Panel logo */
.company-data .logo-panel{
    min-height:360px;

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

    padding:32px;

    background:rgba(255,255,255,.98) !important;

    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;

    box-shadow:none !important;
}

.company-data .logo-panel img{
    width:165px !important;
    height:165px !important;
    max-width:100% !important;

    object-fit:contain !important;

    border-radius:0 !important;
    box-shadow:none !important;

    transition:transform .25s ease;
}

.company-data .logo-panel:hover img{
    transform:scale(1.04);
}

/* Panel informasi */
.company-data .data-list{
    background:rgba(8,43,83,.72) !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:24px !important;

    padding:10px 30px !important;

    box-shadow:none !important;

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

.company-data .data-list > div{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:28px;

    padding:20px 0;

    border-bottom:1px solid rgba(255,255,255,.10) !important;

    align-items:start;
}

.company-data .data-list > div:last-child{
    border-bottom:0 !important;
}

.company-data .data-list span{
    color:#ffffff !important;

    font-size:14px;
    font-weight:800;

    line-height:1.55;
}

.company-data .data-list div > :last-child{
    color:#d9e6f5;
    font-size:15px;
    line-height:1.8;
}

/* Khusus alamat panjang */
.company-data .data-list > div:nth-child(3),
.company-data .data-list > div:nth-child(4){
    padding-top:22px;
    padding-bottom:22px;
}

.company-data .data-list > div:nth-child(3) div,
.company-data .data-list > div:nth-child(4) div{
    line-height:1.85;
}

/* Aksen halus saat hover */
.company-data .data-list > div{
    transition:background .2s ease;
}

.company-data .data-list > div:hover{
    background:rgba(255,255,255,.025);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:980px){
    .company-data .data-grid{
        grid-template-columns:210px minmax(0,1fr);
        gap:22px;
    }

    .company-data .logo-panel{
        min-height:320px;
        padding:24px;
    }

    .company-data .logo-panel img{
        width:145px !important;
        height:145px !important;
    }

    .company-data .data-list{
        padding:8px 24px !important;
    }

    .company-data .data-list > div{
        grid-template-columns:180px minmax(0,1fr);
        gap:20px;
    }
}

@media(max-width:760px){
    .company-data{
        padding:76px 0 !important;
    }

    .company-data .section-heading{
        margin-bottom:34px !important;
    }

    .company-data .data-grid{
        grid-template-columns:1fr;
        gap:18px;

        width:92%;
    }

    .company-data .logo-panel{
        min-height:210px;
        padding:22px;
        border-radius:20px;
    }

    .company-data .logo-panel img{
        width:120px !important;
        height:120px !important;
    }

    .company-data .data-list{
        padding:8px 20px !important;
        border-radius:20px !important;
    }

    .company-data .data-list > div{
        grid-template-columns:1fr;
        gap:6px;

        padding:17px 0;
    }

    .company-data .data-list span{
        font-size:13px;
        color:#f7fbff !important;
    }

    .company-data .data-list div > :last-child{
        font-size:14px;
        line-height:1.7;
    }
}
/* =========================================================
   DOKUMENTASI — CLICK TO VIEW + LIGHTBOX
   ========================================================= */

#dokumentasi .documentation-slider{
    position:relative;
    max-width:1080px;
    margin:0 auto;
}

#dokumentasi .slider-viewport{
    overflow:hidden;
    border-radius:24px;
}

#dokumentasi .slide-image{
    position:relative;
    display:block;
    width:100%;

    padding:0;
    border:0;

    background:#061a3c;

    cursor:zoom-in;

    overflow:hidden;
    border-radius:18px;
}

#dokumentasi .slide-image::after{
    content:"Klik untuk melihat gambar";

    position:absolute;
    left:50%;
    bottom:18px;

    padding:7px 12px;

    color:#fff;
    background:rgba(2,11,43,.72);

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;

    opacity:0;
    transform:translate(-50%,8px);

    transition:opacity .25s ease,transform .25s ease;
    pointer-events:none;
}

#dokumentasi .slide-image:hover::after{
    opacity:1;
    transform:translate(-50%,0);
}

#dokumentasi .slide-image img{
    width:100%;
    max-height:620px;
    object-fit:contain;

    background:#061a3c;

    transition:transform .35s ease;
}

#dokumentasi .slide-image:hover img{
    transform:scale(1.012);
}

/* LIGHTBOX */
.lightbox{
    position:fixed !important;
    inset:0 !important;

    z-index:99999 !important;

    display:none !important;

    align-items:center !important;
    justify-content:center !important;

    padding:40px !important;

    background:rgba(0,0,0,.88) !important;

    cursor:zoom-out;
}

.lightbox.open{
    display:flex !important;
}

.lightbox img{
    display:block !important;

    max-width:min(94vw,1400px) !important;
    max-height:88vh !important;

    width:auto !important;
    height:auto !important;

    object-fit:contain !important;

    border-radius:12px !important;

    background:#fff;

    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

/* Tombol silang kanan atas */
.lightbox-close{
    position:absolute !important;

    top:20px !important;
    right:24px !important;

    z-index:2 !important;

    width:48px !important;
    height:48px !important;

    display:grid !important;
    place-items:center !important;

    padding:0 !important;

    border:1px solid rgba(255,255,255,.28) !important;
    border-radius:50% !important;

    background:rgba(7,23,52,.82) !important;

    color:#fff !important;

    font-family:Arial,sans-serif !important;
    font-size:32px !important;
    font-weight:300 !important;
    line-height:1 !important;

    cursor:pointer !important;

    box-shadow:0 8px 25px rgba(0,0,0,.28);

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

.lightbox-close:hover{
    background:#d3a43b !important;
    border-color:#d3a43b !important;
    color:#061735 !important;

    transform:scale(1.07) rotate(3deg) !important;
}

.lightbox-close:focus-visible{
    outline:3px solid rgba(226,179,79,.55) !important;
    outline-offset:3px;
}

/* Saat lightbox dibuka, halaman belakang tidak ikut scroll */
body.modal-open{
    overflow:hidden !important;
}

/* Mobile */
@media(max-width:760px){
    #dokumentasi .slide-image img{
        max-height:58vh;
    }

    #dokumentasi .slide-image::after{
        display:none;
    }

    .lightbox{
        padding:18px !important;
    }

    .lightbox img{
        max-width:96vw !important;
        max-height:82vh !important;
        border-radius:10px !important;
    }

    .lightbox-close{
        top:12px !important;
        right:12px !important;

        width:44px !important;
        height:44px !important;

        font-size:29px !important;
    }
}

/* =========================================================
   NBK FINAL — SLF / DETAIL TYPOGRAPHY & SPACING
   Clean, consistent, readable
   ========================================================= */

/* Detail page content */
.slf-detail .slf-info-copy{
    min-width:0;
    color:#475467;
}

/* Title inside each explanation block */
.slf-detail .slf-info-copy h2{
    margin:2px 0 14px !important;
    color:#101828 !important;
    font-size:clamp(20px,2vw,27px) !important;
    line-height:1.28 !important;
    font-weight:800 !important;
    letter-spacing:-.02em !important;
}

/* Main paragraph / bullet-like point */
.slf-detail .slf-main-point{
    margin:0 0 9px !important;
    padding:0 !important;
    color:#475467 !important;
    font-size:15.5px !important;
    line-height:1.72 !important;
}

/* Remove the old decorative dot from generic paragraph styles */
.slf-detail .slf-main-point::before{
    content:none !important;
    display:none !important;
}

/* Ordered-style sub-items such as legal bases */
.slf-detail .slf-subitems{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    margin:3px 0 12px 4px !important;
    padding:0 !important;
}

/* Arrow item */
.slf-detail .slf-subitem{
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) !important;
    gap:7px !important;
    align-items:start !important;

    margin:0 !important;
    padding:0 !important;

    color:#475467 !important;
    font-size:15.5px !important;
    line-height:1.72 !important;
}

/* Arrow */
.slf-detail .slf-arrow{
    color:#4c8bc9 !important;
    font-size:16px !important;
    line-height:1.72 !important;
}

/* HTML inside subitems */
.slf-detail .slf-subitem strong{
    color:#18202a !important;
    font-weight:750 !important;
}

/* Section blocks such as Sanksi */
.slf-detail .slf-subsection{
    margin:14px 0 0 !important;
    padding-top:12px !important;
    border-top:1px solid #edf0f3 !important;
}

.slf-detail .slf-subsection h3{
    margin:0 0 9px !important;
    color:#18202a !important;
    font-size:18px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
}

.slf-detail .slf-subsection ul{
    margin:0 !important;
    padding-left:22px !important;
}

.slf-detail .slf-subsection li{
    margin:0 0 7px !important;
    color:#475467 !important;
    font-size:15.5px !important;
    line-height:1.72 !important;
}

/* Last element should not create a large empty gap */
.slf-detail .slf-info-copy > :last-child{
    margin-bottom:0 !important;
}

/* Explanation blocks */
.slf-detail .slf-info-block{
    padding:27px 30px !important;
    gap:22px !important;
    border-radius:16px !important;
}

/* Number badge */
.slf-detail .slf-info-number{
    width:48px !important;
    height:48px !important;
    border-radius:13px !important;
    font-size:13px !important;
}

/* Section spacing */
.slf-detail .slf-content{
    padding:78px 0 86px !important;
}

.slf-detail .slf-sections{
    gap:14px !important;
}

.slf-detail .slf-content .section-heading{
    margin-bottom:38px !important;
}

/* Hero stays compact and balanced */
.slf-detail .slf-hero-inner{
    padding:48px 0 !important;
    min-height:470px !important;
}

/* CTA */
.slf-detail .slf-contact-cta{
    padding:70px 0 !important;
}

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

@media (max-width:900px){
    .slf-detail .slf-content{
        padding:66px 0 74px !important;
    }

    .slf-detail .slf-info-block{
        padding:24px 26px !important;
        gap:18px !important;
    }

    .slf-detail .slf-main-point,
    .slf-detail .slf-subitem,
    .slf-detail .slf-subsection li{
        font-size:15px !important;
        line-height:1.7 !important;
    }
}

@media (max-width:600px){
    .slf-detail .slf-content{
        padding:56px 0 64px !important;
    }

    .slf-detail .slf-content .section-heading{
        margin-bottom:28px !important;
    }

    .slf-detail .slf-info-block{
        grid-template-columns:1fr !important;
        gap:14px !important;
        padding:22px 19px !important;
    }

    .slf-detail .slf-info-number{
        width:44px !important;
        height:44px !important;
    }

    .slf-detail .slf-info-copy h2{
        font-size:21px !important;
        margin-bottom:11px !important;
    }

    .slf-detail .slf-main-point{
        font-size:14.5px !important;
        line-height:1.68 !important;
        margin-bottom:8px !important;
    }

    .slf-detail .slf-subitems{
        gap:5px !important;
        margin-left:0 !important;
        margin-bottom:10px !important;
    }

    .slf-detail .slf-subitem{
        grid-template-columns:21px minmax(0,1fr) !important;
        gap:5px !important;
        font-size:14.5px !important;
        line-height:1.65 !important;
    }

    .slf-detail .slf-arrow{
        font-size:15px !important;
        line-height:1.65 !important;
    }

    .slf-detail .slf-subsection{
        margin-top:12px !important;
        padding-top:10px !important;
    }

    .slf-detail .slf-subsection h3{
        font-size:17px !important;
    }

    .slf-detail .slf-subsection li{
        font-size:14.5px !important;
        line-height:1.65 !important;
    }
}
/* =========================================================
   SERVICE DETAIL CTA — KEMBALI KE POSISI TENGAH
   Jangan ubah posisi section, hanya pusatkan isinya.
   ========================================================= */

.slf-contact-cta{
    text-align:center !important;
}

.slf-contact-cta .container{
    width:min(900px,92%) !important;
    margin:0 auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

.slf-contact-cta .eyebrow{
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}

.slf-contact-cta h2{
    max-width:1000px !important;
    margin:10px auto 15px !important;
    text-align:center !important;
}

.slf-contact-cta p:not(.eyebrow){
    max-width:720px !important;
    margin:0 auto 28px !important;
    text-align:center !important;
}

.slf-contact-cta .button{
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Mobile tetap di tengah */
@media(max-width:600px){
    .slf-contact-cta .container{
        width:min(100% - 40px,900px) !important;
    }

    .slf-contact-cta h2{
        font-size:clamp(28px,8vw,40px) !important;
    }

    .slf-contact-cta p:not(.eyebrow){
        max-width:100% !important;
    }
}

/* =========================================================
   CTA PEMBATAS — BIRU SEPERTI BERANDA
   ========================================================= */

.slf-contact-cta{
    position:relative !important;
    overflow:hidden !important;
    padding:92px 0 !important;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(20,91,158,.42),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #020b2b 0%,
            #061a48 48%,
            #0b3f82 100%
        ) !important;

    color:#ffffff !important;
    text-align:center !important;
}

.slf-contact-cta::before{
    content:"";
    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

    top:-220px;
    right:-90px;

    background:rgba(57,169,232,.10);

    pointer-events:none;
}

.slf-contact-cta::after{
    content:"";
    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    bottom:-175px;
    left:-100px;

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

    pointer-events:none;
}

.slf-contact-cta .container{
    position:relative !important;
    z-index:2 !important;

    width:min(900px,92%) !important;
    margin:0 auto !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

.slf-contact-cta .eyebrow{
    margin:0 0 12px !important;
    color:#e8b949 !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.22em !important;
    text-align:center !important;
}

.slf-contact-cta h2{
    max-width:980px !important;
    margin:0 auto 16px !important;

    color:#ffffff !important;

    font-size:clamp(2rem,4.5vw,3.6rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;

    text-align:center !important;
}

.slf-contact-cta p:not(.eyebrow){
    max-width:720px !important;
    margin:0 auto 28px !important;

    color:rgba(255,255,255,.80) !important;

    font-size:16px !important;
    line-height:1.8 !important;

    text-align:center !important;
}

.slf-contact-cta .button-gold{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;

    background:#e2b34f !important;
    color:#111827 !important;

    border:0 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.16);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}

.slf-contact-cta .button-gold:hover{
    background:#f0c45f !important;
    transform:translateY(-2px) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.22);
}

@media(max-width:600px){
    .slf-contact-cta{
        padding:70px 0 !important;
    }

    .slf-contact-cta .container{
        width:min(100% - 40px,900px) !important;
    }

    .slf-contact-cta h2{
        font-size:clamp(28px,8vw,40px) !important;
    }

    .slf-contact-cta p:not(.eyebrow){
        font-size:15px !important;
        line-height:1.75 !important;
    }

    .slf-contact-cta::before{
        width:240px;
        height:240px;
    }

    .slf-contact-cta::after{
        width:190px;
        height:190px;
    }
}

/* =========================================================
   SLF & HIDROLOGI — KEMBALIKAN TITIK KUNING PARAGRAF
   Titik hanya untuk paragraf utama, bukan sub-item panah.
   ========================================================= */

.slf-detail .slf-main-point{
    position:relative !important;

    margin:0 0 10px !important;
    padding-left:20px !important;

    color:#475467 !important;
    font-size:15.5px !important;
    line-height:1.75 !important;
}

/* Titik kuning */
.slf-detail .slf-main-point::before{
    content:"" !important;

    position:absolute !important;

    top:.72em !important;
    left:0 !important;

    width:6px !important;
    height:6px !important;

    border-radius:50% !important;

    background:#d3a43b !important;

    display:block !important;
}

/* Jangan beri titik kuning pada item dengan panah */
.slf-detail .slf-subitem::before,
.slf-detail .slf-subitems .slf-main-point::before{
    display:none !important;
}

/* Jarak rapi untuk paragraf berurutan */
.slf-detail .slf-main-point + .slf-main-point{
    margin-top:3px !important;
}

/* Mobile */
@media(max-width:600px){
    .slf-detail .slf-main-point{
        padding-left:17px !important;
        font-size:15px !important;
        line-height:1.72 !important;
    }

    .slf-detail .slf-main-point::before{
        width:5px !important;
        height:5px !important;
        top:.75em !important;
    }
}

/* =========================================================
   NBK FINAL — CSS DISESUAIKAN DENGAN BLADE PBG TERBARU
   Blade: services-pbg-clean-heading-rapi.blade.php
   Fokus: PBG / Sanksi
   ========================================================= */

/* ---------------------------------------------------------
   PBG — HEADING SANKSI
   1. / 2. / 3. harus sejajar dan TIDAK punya bullet
--------------------------------------------------------- */

.slf-detail .pbg-sanction-heading{
    display:block !important;

    margin:18px 0 9px !important;
    padding:0 !important;

    color:#18202a !important;

    font-size:19px !important;
    line-height:1.45 !important;
    font-weight:800 !important;
    letter-spacing:-.015em !important;

    list-style:none !important;
}

.slf-detail .pbg-sanction-heading::before,
.slf-detail .pbg-sanction-heading::after{
    content:none !important;
    display:none !important;
}

/* ---------------------------------------------------------
   PBG — LIST SANKSI
   Hanya SATU bullet kuning per item
--------------------------------------------------------- */

.slf-detail .pbg-sanction-list{
    display:flex !important;
    flex-direction:column !important;

    gap:7px !important;

    margin:0 0 16px !important;
    padding:0 !important;

    list-style:none !important;
}

.slf-detail .pbg-sanction-row{
    display:grid !important;
    grid-template-columns:12px minmax(0,1fr) !important;
    gap:8px !important;

    align-items:start !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#475467 !important;

    font-size:15.5px !important;
    line-height:1.72 !important;

    list-style:none !important;
}

.slf-detail .pbg-sanction-row::before,
.slf-detail .pbg-sanction-row::after{
    content:none !important;
    display:none !important;
}

.slf-detail .pbg-sanction-dot{
    display:block !important;

    width:12px !important;
    min-width:12px !important;

    margin:0 !important;
    padding:0 !important;

    color:#d3a43b !important;

    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.72 !important;

    text-align:center !important;
}

.slf-detail .pbg-sanction-row > span:last-child{
    min-width:0 !important;

    color:#475467 !important;

    font-size:15.5px !important;
    line-height:1.72 !important;
}

.slf-detail .pbg-sanction-row strong{
    color:#18202a !important;
    font-weight:800 !important;
}

/* ---------------------------------------------------------
   JARAK ANTAR BAGIAN
--------------------------------------------------------- */

.slf-detail .pbg-sanction-heading + .pbg-sanction-list{
    margin-top:4px !important;
}

.slf-detail .pbg-sanction-list + .pbg-sanction-heading{
    margin-top:22px !important;
}

/* ---------------------------------------------------------
   LEAD / GROUPS LAMA
--------------------------------------------------------- */

.slf-detail .pbg-sanction-lead{
    margin:0 0 12px !important;
    padding:0 !important;

    color:#475467 !important;

    font-size:15.5px !important;
    line-height:1.72 !important;
}

.slf-detail .pbg-sanction-groups{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;

    margin-top:14px !important;
}

.slf-detail .pbg-sanction-group{
    margin:0 !important;
    padding:0 !important;
}

.slf-detail .pbg-sanction-group h3{
    margin:0 0 9px !important;

    color:#18202a !important;

    font-size:19px !important;
    line-height:1.45 !important;
    font-weight:800 !important;
}

.slf-detail .pbg-sanction-items{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}

.slf-detail .pbg-sanction-item{
    margin:0 !important;
    padding:0 !important;
}

.slf-detail .pbg-sanction-item h4{
    margin:0 0 3px !important;

    color:#18202a !important;

    font-size:15.5px !important;
    line-height:1.5 !important;
    font-weight:800 !important;
}

.slf-detail .pbg-sanction-item p{
    margin:0 !important;
    padding:0 !important;

    color:#475467 !important;

    font-size:15.5px !important;
    line-height:1.72 !important;
}

/* ---------------------------------------------------------
   JANGAN UBAH TITIK KUNING HALAMAN SLF/HIDROLOGI
   Paragraf utama tetap memakai slf-main-point.
--------------------------------------------------------- */

.slf-detail .slf-main-point{
    position:relative !important;

    margin:0 0 10px !important;
    padding-left:20px !important;

    color:#475467 !important;

    font-size:15.5px !important;
    line-height:1.75 !important;
}

.slf-detail .slf-main-point::before{
    content:"" !important;

    position:absolute !important;

    top:.72em !important;
    left:0 !important;

    width:6px !important;
    height:6px !important;

    border-radius:50% !important;

    background:#d3a43b !important;

    display:block !important;
}

/* PBG sanction heading/rules sendiri tidak memakai titik */
.slf-detail .pbg-sanction-heading::before{
    content:none !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media(max-width:900px){

    .slf-detail .pbg-sanction-heading,
    .slf-detail .pbg-sanction-group h3{
        font-size:18px !important;
    }

    .slf-detail .pbg-sanction-row,
    .slf-detail .pbg-sanction-row > span:last-child,
    .slf-detail .pbg-sanction-lead,
    .slf-detail .pbg-sanction-item p{
        font-size:15px !important;
        line-height:1.7 !important;
    }
}

@media(max-width:600px){

    .slf-detail .pbg-sanction-heading,
    .slf-detail .pbg-sanction-group h3{
        margin-top:15px !important;

        font-size:17px !important;
        line-height:1.4 !important;
    }

    .slf-detail .pbg-sanction-list{
        gap:6px !important;
        margin-bottom:12px !important;
    }

    .slf-detail .pbg-sanction-row{
        grid-template-columns:11px minmax(0,1fr) !important;
        gap:7px !important;

        font-size:14.5px !important;
        line-height:1.68 !important;
    }

    .slf-detail .pbg-sanction-dot{
        width:11px !important;
        min-width:11px !important;

        font-size:13px !important;
        line-height:1.68 !important;
    }

    .slf-detail .pbg-sanction-row > span:last-child,
    .slf-detail .pbg-sanction-lead,
    .slf-detail .pbg-sanction-item p{
        font-size:14.5px !important;
        line-height:1.68 !important;
    }

    .slf-detail .slf-main-point{
        font-size:15px !important;
        line-height:1.72 !important;
        padding-left:17px !important;
    }

    .slf-detail .slf-main-point::before{
        width:5px !important;
        height:5px !important;
    }
}
body {
    outline: 5px solid red !important;
}