:root{
    --gold:#d6a638;
    --gold-light:#f0c65a;
    --gold-dark:#9d6b10;
    --black:#050607;
    --black-2:#090b0e;
    --panel:#101318;
    --panel-2:#15191f;
    --white:#f8f8f8;
    --muted:#b9bec7;
    --line:rgba(214,166,56,.22);
    --radius:17px;
    --shadow:0 24px 65px rgba(0,0,0,.35);
}

html{scroll-behavior:smooth}
body{
    overflow-x:hidden;
    background:var(--black);
    color:var(--white);
}
#konten-utama{overflow:hidden}
img{max-width:100%;height:auto}

/* ---------- TOP BAR ---------- */
.top-contact-bar{
    min-height:42px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(214,166,56,.18);
    background:#030405;
}
.top-contact-inner{
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(320px,1.3fr) auto auto auto;
    align-items:center;
    gap:24px;
    font-size:13px;
}
.top-contact-inner span,
.top-contact-inner a{
    min-width:0;
    color:#f0f1f3;
    white-space:nowrap;
}
.top-contact-inner i{
    margin-right:8px;
    color:var(--gold-light);
}
.top-login-link{justify-self:end;font-weight:700}
.top-phone{font-weight:800;color:var(--gold-light)!important}

/* ---------- HEADER ---------- */
.site-header{
    position:relative;
    z-index:100;
    border-bottom:1px solid var(--line);
    background:rgba(5,6,7,.98);
}
.site-header .navbar{
    min-height:110px;
    padding:12px 0;
}
.public-nav-container{
    width:min(1460px,calc(100% - 48px));
    max-width:none;
}
.brand-premium{
    display:flex;
    align-items:center;
    gap:13px;
    flex:0 0 360px;
    min-width:0;
    margin-right:26px;
}
.brand-premium img{
    width:68px;
    height:68px;
    flex:0 0 68px;
    border-radius:50%;
    object-fit:cover;
}
.brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.13;
}
.brand-copy small{
    color:#fff;
    font-size:11px;
    font-weight:800;
}
.brand-copy strong{
    margin-top:3px;
    color:#fff;
    font-size:14px;
    font-weight:900;
}
.brand-copy b{
    margin-top:4px;
    color:var(--gold-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:23px;
    letter-spacing:.01em;
    white-space:nowrap;
}
.brand-copy em{display:none}
.premium-menu{
    gap:2px;
    flex-wrap:nowrap;
}
.premium-menu .nav-link{
    position:relative;
    padding:14px 9px!important;
    color:rgba(255,255,255,.78)!important;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    white-space:nowrap;
}
.premium-menu .nav-link:hover,
.premium-menu .nav-link.active{
    color:var(--gold-light)!important;
}
.premium-menu .nav-link.active::after{
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:5px;
    height:2px;
    background:var(--gold);
}
.nav-complaint{
    min-height:54px;
    margin-left:12px;
    padding:14px 19px!important;
    border:1px solid #e6b94c!important;
    border-radius:11px!important;
    color:#15100a!important;
    background:linear-gradient(135deg,#f1ca60,#c88e1c)!important;
    font-size:13px!important;
    font-weight:900!important;
    text-transform:uppercase;
    white-space:nowrap;
}

/* ---------- HERO ---------- */
.hero-premium{
    position:relative;
    min-height:auto;
    padding:44px 0 0;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(circle at 36% 45%,rgba(189,125,20,.22),transparent 31%),
        linear-gradient(108deg,#050607 0%,#0a0b0d 52%,#060708 100%);
}
.hero-law-symbol{display:none}
.hero-main-row{
    min-height:430px;
    padding:0;
    align-items:center!important;
}
.hero-copy-premium{
    padding:20px 34px 24px 10px;
}
.hero-overline{
    display:block;
    margin-bottom:15px;
    color:var(--gold-light);
    font-size:15px;
    font-weight:900;
}
.hero-copy-premium h1{
    margin:0 0 18px;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(3rem,4.5vw,5rem);
    line-height:.98;
    letter-spacing:-.035em;
}
.hero-copy-premium h1 span{
    display:block;
    margin-top:13px;
    color:var(--gold-light);
}
.hero-copy-premium>p{
    max-width:590px;
    margin:0;
    color:#d3d7dd;
    font-size:16px;
    line-height:1.7;
}
.btn-gold,.btn-outline-gold{
    min-height:52px;
    padding:13px 20px!important;
    border-radius:10px!important;
    font-size:14px!important;
    font-weight:850!important;
}
.btn-gold{
    color:#15100a!important;
    border-color:var(--gold)!important;
    background:linear-gradient(135deg,#f2cb61,#bd8118)!important;
}
.btn-outline-gold{
    color:#fff!important;
    border-color:rgba(214,166,56,.72)!important;
    background:rgba(255,255,255,.015)!important;
}
.btn-outline-gold:hover{
    color:#15100a!important;
    background:var(--gold)!important;
}
.hero-center-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 10px 22px;
}
.justice-visual{
    position:relative;
    width:100%;
    height:378px;
    overflow:hidden;
    border:1px solid rgba(214,166,56,.18);
    border-radius:18px;
    background:#080a0d;
    box-shadow:var(--shadow);
}
.justice-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 22%;
}
.justice-caption{display:none}
.hero-values-panel{
    align-self:center;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(214,166,56,.25);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(18,20,24,.98),rgba(8,10,13,.98));
}
.hero-values-panel article{
    display:grid;
    grid-template-columns:54px 1fr;
    gap:15px;
    min-height:126px;
    padding:21px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-values-panel article:last-child{border-bottom:0}
.hero-values-panel i{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:50%;
    color:var(--gold-light);
    background:rgba(214,166,56,.10);
    font-size:22px;
}
.hero-values-panel strong{
    display:block;
    margin:4px 0 7px;
    color:var(--gold-light);
    font-size:15px;
}
.hero-values-panel p{
    margin:0;
    color:#e0e3e8;
    font-size:13px;
    line-height:1.65;
}

/* Stats overlaps hero bottom like reference, without blank space */
.hero-stats-bar{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    margin:18px 0 -36px;
    border:1px solid rgba(214,166,56,.22);
    border-radius:16px;
    background:linear-gradient(145deg,#12151a,#090b0e);
    box-shadow:0 18px 48px rgba(0,0,0,.34);
}
.hero-stats-bar>div,
.hero-stats-bar>a{
    min-width:0;
    min-height:112px;
    padding:19px 20px;
    display:flex;
    align-items:center;
    gap:15px;
    border-right:1px solid rgba(255,255,255,.10);
    color:#fff;
}
.hero-stats-bar>*:last-child{border-right:0}
.hero-stats-bar i{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--gold-light);
    background:rgba(214,166,56,.11);
    font-size:21px;
}
.hero-stats-bar span{min-width:0}
.hero-stats-bar b{
    display:block;
    color:var(--gold-light);
    font-size:17px;
    line-height:1.25;
}
.hero-stats-bar small{
    display:block;
    margin-top:5px;
    color:#e5e7eb;
    font-size:12px;
    line-height:1.45;
}

/* ---------- CREDIBILITY ---------- */
.credibility-ribbon{
    padding:62px 0 18px;
    color:#1b1d21;
    background:#f7f7f7;
}
.credibility-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid #e6e6e6;
    border-radius:15px;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.07);
}
.credibility-grid>div{
    min-height:116px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:15px;
    border-right:1px solid #e6e6e6;
}
.credibility-grid>div:last-child{border-right:0}
.credibility-grid i{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#a87513;
    background:#fff5d6;
    font-size:20px;
}
.credibility-grid strong{
    display:block;
    color:#17191c;
    font-size:15px;
}
.credibility-grid small{
    display:block;
    margin-top:5px;
    color:#696f78;
    font-size:12px;
    line-height:1.45;
}

/* ---------- SHARED SECTIONS ---------- */
.section{
    padding:76px 0;
}
.section-dark{
    background:#0c0f13;
}
.section-black{
    background:#050607;
}
.section-kicker{
    color:var(--gold-light);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.section-title{
    margin:11px 0 16px;
    color:#fff;
    font-size:clamp(2rem,3.6vw,3rem);
    line-height:1.15;
    letter-spacing:-.03em;
}
.section-text{
    color:#c2c7cf;
    font-size:15px;
    line-height:1.75;
}
.section-heading{max-width:760px}
.text-link{color:var(--gold-light);font-weight:800}

/* ---------- CARDS / GRIDS ---------- */
.value-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.value-card,.service-card,.process-card,.article-card,.org-card,.vision-card,.mission-card,
.public-gallery-card,.testimonial-card,.contact-card,.legal-document-card{
    border:1px solid rgba(214,166,56,.18);
    border-radius:var(--radius);
    background:linear-gradient(145deg,#14171c,#0c0f13);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.value-card{
    min-height:190px;
    padding:24px;
}
.value-card i,.service-icon{
    color:var(--gold-light);
    font-size:27px;
}
.value-card h3,.service-card h3,.process-card h3,.article-card h3,.org-card h3{
    margin:15px 0 9px;
    color:#fff;
    font-size:18px;
}
.value-card p,.service-card p,.process-card p,.article-card p{
    margin:0;
    color:#bdc3cc;
    font-size:14px;
    line-height:1.7;
}
.vision-card,.mission-card{padding:30px}
.mission-list{
    margin:0;
    padding-left:20px;
    color:#c8cdd5;
}
.mission-list li{margin-bottom:13px;line-height:1.65}
.service-card{
    min-height:260px;
    padding:25px;
}
.service-card a{
    display:inline-block;
    margin-top:18px;
    color:var(--gold-light);
    font-weight:800;
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.process-card{
    min-height:220px;
    padding:24px;
}
.process-number{
    color:var(--gold-light);
    font-size:25px;
    font-weight:900;
}
.why-visual{
    min-height:320px;
    padding:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    border:1px solid rgba(214,166,56,.2);
    border-radius:22px;
    background:radial-gradient(circle at 50% 45%,rgba(214,166,56,.18),transparent 42%),#080a0d;
}
.why-visual>i{color:var(--gold-light);font-size:90px}
.why-visual span{display:block;color:#aeb5bf}
.why-visual strong{display:block;max-width:350px;margin-top:7px;color:#fff;font-size:25px;line-height:1.25}
.why-list>div{
    display:flex;
    gap:14px;
    margin-bottom:15px;
}
.why-list>div>i{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#111;
    background:var(--gold);
}
.why-list p{margin:0}
.why-list strong{display:block;color:#fff}
.why-list span{display:block;margin-top:4px;color:#bac0c8}

/* ---------- ORGANIZATION / LEGAL ---------- */
.org-chart{position:relative}
.org-card{
    min-height:120px;
    padding:23px;
    text-align:center;
}
.org-card span{color:var(--gold-light);font-size:12px;font-weight:900;text-transform:uppercase}
.org-top{max-width:490px;margin:0 auto}
.org-line{
    width:1px;
    height:30px;
    margin:0 auto;
    background:var(--gold);
}
.legal-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.legal-document-card{
    min-height:105px;
    padding:18px;
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    gap:13px;
    color:#fff;
}
.legal-document-card>i{color:var(--gold-light);font-size:27px}
.legal-document-card strong{display:block}
.legal-document-card small{display:block;margin-top:5px;color:#aeb5bf}
.legal-document-card b{color:var(--gold-light);font-size:12px}
.legal-note{color:#bfc5cd}

/* ---------- ARTICLES / GALLERY / FEEDBACK ---------- */
.article-card{
    min-height:235px;
    padding:25px;
}
.article-card>span{color:var(--gold-light);font-size:12px;font-weight:900;text-transform:uppercase}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:34px!important;
}
.public-gallery-card{overflow:hidden}
.public-gallery-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}
.public-gallery-card>div{padding:18px}
.public-gallery-card small{color:var(--gold-light)}
.public-gallery-card h3{margin:8px 0;color:#fff;font-size:18px}
.public-gallery-card p{margin:0;color:#b8bec7;font-size:14px}
.gallery-empty,.testimonial-empty{
    grid-column:1/-1;
    padding:40px;
    border:1px dashed rgba(214,166,56,.35);
    border-radius:15px;
    color:#b7bdc6;
    text-align:center;
}
.satisfaction-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid rgba(214,166,56,.24);
    border-radius:16px;
    overflow:hidden;
}
.satisfaction-summary>div{
    min-height:112px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.10);
}
.satisfaction-summary>div:last-child{border-right:0}
.satisfaction-summary strong{color:var(--gold-light);font-size:31px}
.satisfaction-summary span{color:#d0d4da;font-size:13px}
.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.testimonial-card{padding:24px}
.testimonial-stars{color:var(--gold-light)}
.testimonial-card blockquote{margin:16px 0;color:#e5e7eb;line-height:1.7}
.testimonial-card footer{display:flex;align-items:center;gap:12px}
.testimonial-avatar{
    width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
    color:var(--gold-light);background:rgba(214,166,56,.12)
}
.testimonial-card footer strong{display:block;color:#fff}
.testimonial-card footer small{color:#9fa7b2}

/* ---------- CONTACT ---------- */
.contact-section{
    background:#f5f5f5;
}
.contact-panel{
    padding:40px;
    border-radius:22px;
    color:#1c2026;
    background:#fff;
    box-shadow:0 20px 55px rgba(0,0,0,.10);
}
.contact-panel .section-title{color:#17191c}
.contact-panel .section-text{color:#646b74}
.contact-card{
    padding:22px;
    background:#101318;
}
.contact-card>div{
    display:flex;
    gap:14px;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
}
.contact-card>div:last-child{border-bottom:0}
.contact-card i{color:var(--gold-light);font-size:21px}
.contact-card p{margin:0}
.contact-card span{display:block;color:#9ea6b1;font-size:12px}
.contact-card strong{display:block;margin-top:4px;color:#fff}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1399.98px){
    .public-nav-container{width:calc(100% - 30px)}
    .brand-premium{flex-basis:315px;margin-right:12px}
    .brand-copy b{font-size:20px}
    .premium-menu .nav-link{padding-left:6px!important;padding-right:6px!important;font-size:11px}
    .nav-complaint{padding-left:14px!important;padding-right:14px!important}
}
@media(max-width:1199.98px){
    .top-contact-inner{grid-template-columns:1fr auto auto}
    .top-contact-inner .top-phone{grid-column:1/-1;justify-self:start;padding-bottom:8px}
    .site-header .navbar{min-height:84px}
    .brand-premium{flex-basis:auto;max-width:380px}
    .navbar-collapse{
        margin-top:12px;
        padding:16px;
        border:1px solid var(--line);
        border-radius:14px;
        background:#090b0e;
    }
    .premium-menu{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
    .premium-menu .nav-link{padding:11px 10px!important}
    .nav-complaint{width:100%;margin:8px 0 0}
    .hero-main-row{min-height:auto}
    .hero-copy-premium{padding:30px 20px}
    .justice-visual{height:420px}
    .hero-values-panel{margin:15px 0 25px}
    .hero-values-panel article{min-height:auto}
    .hero-stats-bar{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:-30px}
    .hero-stats-bar>*{border-bottom:1px solid rgba(255,255,255,.09)}
    .hero-stats-bar>*:last-child{grid-column:1/-1}
    .credibility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .credibility-grid>div:nth-child(2){border-right:0}
    .credibility-grid>div:nth-child(-n+2){border-bottom:1px solid #e6e6e6}
    .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .gallery-grid,.testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767.98px){
    .top-contact-bar{display:none}
    .public-nav-container{width:calc(100% - 22px)}
    .brand-premium{gap:9px}
    .brand-premium img{width:52px;height:52px;flex-basis:52px}
    .brand-copy strong{font-size:11px}
    .brand-copy b{font-size:16px}
    .premium-menu{grid-template-columns:1fr}
    .hero-premium{padding-top:20px}
    .hero-copy-premium{text-align:center;padding:25px 8px}
    .hero-copy-premium h1{font-size:clamp(2.5rem,13vw,4rem)}
    .hero-copy-premium .d-flex{justify-content:center}
    .justice-visual{height:350px}
    .hero-values-panel article{grid-template-columns:48px 1fr;padding:17px}
    .hero-values-panel i{width:46px;height:46px}
    .hero-stats-bar{grid-template-columns:1fr;margin-left:0;margin-right:0}
    .hero-stats-bar>*{min-height:92px;border-right:0}
    .hero-stats-bar>*:last-child{grid-column:auto}
    .credibility-ribbon{padding-top:56px}
    .credibility-grid,.value-grid,.process-grid,.legal-grid,
    .gallery-grid,.testimonial-grid,.satisfaction-summary{
        grid-template-columns:1fr;
    }
    .credibility-grid>div{
        border-right:0!important;
        border-bottom:1px solid #e6e6e6;
    }
    .credibility-grid>div:last-child{border-bottom:0}
    .section{padding:58px 0}
    .satisfaction-summary>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
    .satisfaction-summary>div:last-child{border-bottom:0}
    .contact-panel{padding:25px 18px}
}