:root{
  --red:#d6192b; --red-d:#8f0c19; --yellow:#ffc20e; --navy:#0c1119; --navy2:#131b27; --navy3:#1b2636;
  --ink:#171c24; --muted:#586172; --bg:#f1f2f4; --line:#dde0e6; --steel:#9aa5b5;
  --cut:22px;
  --head:'Barlow Condensed',Impact,sans-serif; --body:'Barlow',system-ui,sans-serif; --mono:'Chakra Petch',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--body);font-size:1.05rem;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.ico{width:1.2em;height:1.2em;flex:none;vertical-align:-.2em}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;line-height:1.02;letter-spacing:.01em}
.container{width:min(1200px,92%);margin:auto}
.loading{padding:40vh 0;text-align:center;font-family:var(--head);font-size:1.5rem}
.chamfer{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px 4%;transition:.3s;color:#fff}
.nav.scrolled{background:rgba(12,17,25,.92);box-shadow:0 4px 0 var(--yellow)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{background:#fff;padding:2px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font:800 1.45rem var(--head);letter-spacing:.06em}
.brand small{font:600 .7rem var(--mono);letter-spacing:.32em;color:var(--yellow);margin-top:3px}
.menu{margin-left:auto;display:flex;align-items:center;gap:28px;font:600 1.05rem var(--head);text-transform:uppercase;letter-spacing:.09em}
.menu a:not(.btn){position:relative;opacity:.85;padding:4px 0}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--yellow);transition:.3s}
.menu a:not(.btn):hover{opacity:1}
.menu a:not(.btn):hover::after{width:100%}
.lang{display:flex;border:2px solid rgba(255,255,255,.3)}
.lang button{background:none;border:0;color:#fff;font:700 .85rem var(--mono);padding:5px 11px;cursor:pointer}
.lang button.active{background:var(--yellow);color:#111}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;font-size:1.8rem;position:relative;z-index:100}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;padding:15px 32px;font:700 1.1rem var(--head);text-transform:uppercase;letter-spacing:.09em;border:0;cursor:pointer;transition:.25s;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn:hover{background:var(--yellow);color:#111;transform:translateY(-3px)}
.btn-sm{padding:9px 22px;font-size:1rem}
.btn-ghost{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn .ico{transition:.25s}.btn:hover .ico{transform:translateX(4px)}

/* HAZARD TAPE */
.tape{height:14px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 18px,#111 18px 36px)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;color:#fff;padding-top:110px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;animation:zoom 22s ease-in-out infinite alternate}
@keyframes zoom{to{transform:scale(1.1)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(12,17,25,.96) 28%,rgba(12,17,25,.6) 72%,rgba(143,12,25,.45))}
.hero-inner{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--red);font:700 .95rem var(--mono);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:10px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 5px,#111 5px 10px)}
.hero .eyebrow{color:var(--yellow)}
.hero h1{font-size:clamp(3.6rem,9.5vw,8rem);font-weight:900;max-width:900px;letter-spacing:-.005em}
.hero h1 span{color:var(--yellow);display:block;-webkit-text-stroke:0}
.lead{max-width:620px;font-size:1.25rem;margin:26px 0 38px;opacity:.9}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;margin-bottom:44px;border-top:4px solid var(--yellow);background:rgba(12,17,25,.8);backdrop-filter:blur(10px)}
.stats div{padding:24px 26px;border-right:1px solid rgba(255,255,255,.12)}
.stats div:last-child{border:0}
.stats b{display:block;font:800 3rem var(--head);color:var(--yellow);line-height:1}
.stats span{font:500 .85rem var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* SECTIONS */
.section{padding:120px 0}
.section.dark{background:var(--navy);color:#fff}
.blueprint{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}
.head{max-width:680px;margin-bottom:56px}
.head.center{margin-inline:auto;text-align:center}.head.center .eyebrow{justify-content:center}
h2{font-size:clamp(2.6rem,5.5vw,4.4rem);font-weight:800;margin-bottom:22px}
.dark .eyebrow,.contact .eyebrow{color:var(--yellow)}
.body-text{color:var(--muted);font-size:1.1rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-img{position:relative}
.about-img>img{aspect-ratio:4/5;object-fit:cover;clip-path:polygon(0 0,calc(100% - 50px) 0,100% 50px,100% 100%,0 100%)}
.about-img::before{content:"";position:absolute;inset:-14px auto auto -14px;width:50%;height:50%;background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#111 12px 24px);z-index:-1}
.badge{position:absolute;right:-22px;bottom:34px;background:var(--yellow);color:#111;padding:14px 22px 14px 14px;display:flex;align-items:center;gap:12px;font:700 1.15rem var(--head);text-transform:uppercase;letter-spacing:.04em;line-height:1.1;max-width:260px}
.badge img{background:#fff;padding:2px}
.card{background:#fff;padding:30px;border-left:6px solid var(--red);box-shadow:0 14px 34px -18px rgba(12,17,25,.35)}
.vm{display:grid;gap:18px;margin-top:30px}
.card h3{font-size:1.8rem;margin-bottom:10px;color:var(--red)}
.card p{color:var(--muted)}
.card ul li{position:relative;padding-left:24px;margin-bottom:8px;font-size:.98rem;color:var(--muted)}
.card ul li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--yellow);outline:2px solid var(--ink);transform:rotate(45deg)}

/* SERVICES */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.srv{background:var(--navy2);border:1px solid rgba(255,255,255,.08);border-bottom:6px solid var(--red);transition:.4s;overflow:hidden}
.srv:hover{transform:translateY(-10px);border-bottom-color:var(--yellow)}
.srv img{height:240px;width:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:.6s}
.srv:hover img{transform:scale(1.07);filter:none}
.srv{overflow:hidden}
.srv-body{padding:28px;position:relative;background:var(--navy2)}
.num{position:absolute;right:20px;top:2px;font:900 4.5rem var(--head);color:rgba(255,194,14,.12)}
.srv h3{font-size:1.9rem;margin-bottom:16px;max-width:85%}
.srv li{display:flex;gap:10px;margin-bottom:10px;color:#b6c0cf;font-size:.98rem;line-height:1.45}
.srv li .ico{color:var(--yellow);margin-top:.15em}

/* WHY */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why{background:#fff;padding:34px 26px;position:relative;transition:.35s;border-top:6px solid var(--ink)}
.why:hover{transform:translateY(-8px);border-top-color:var(--red);box-shadow:0 26px 44px -22px rgba(12,17,25,.4)}
.ico-box{width:68px;height:68px;display:grid;place-items:center;background:var(--yellow);color:#111;font-size:2rem;margin-bottom:20px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);transition:.3s}
.why:hover .ico-box{background:var(--red);color:#fff}
.why h3{font-size:1.65rem;margin-bottom:10px}
.why p{font-size:.98rem;color:var(--muted)}

/* PROJECTS */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{background:transparent;color:#cfd8e6;border:2px solid rgba(255,255,255,.22);padding:8px 22px;font:600 1rem var(--head);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--yellow);color:#fff}
.chip.active{background:var(--yellow);border-color:var(--yellow);color:#111}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:270px;gap:14px}
.tile{position:relative;overflow:hidden;cursor:pointer}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.hide{display:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:.7s}
.tile:hover img{transform:scale(1.1)}
.tile figcaption{position:absolute;inset:auto 0 0 0;padding:70px 20px 18px;background:linear-gradient(transparent,rgba(12,17,25,.96));display:flex;flex-direction:column;border-bottom:5px solid var(--red);transition:.3s}
.tile:hover figcaption{border-bottom-color:var(--yellow)}
.tile small{color:var(--yellow);font:600 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.tile b{font:700 1.4rem var(--head);text-transform:uppercase;line-height:1.1;letter-spacing:.02em}

/* ORG TREE */
.tree-wrap{overflow-x:auto;padding:10px 4px 30px}
.tree{--L:#aeb6c4;width:max-content;min-width:100%;display:flex;justify-content:center}
.tree ul{display:flex;justify-content:center;padding-top:28px;position:relative}
.tree>ul{padding-top:0}
.tree li{position:relative;padding:28px 10px 0;display:flex;flex-direction:column;align-items:center}
.tree>ul>li{padding-top:0}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:28px;border-top:3px solid var(--L)}
.tree li::after{right:auto;left:50%;border-left:3px solid var(--L)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:28px}
.tree>ul>li::before,.tree>ul>li::after{display:none}
.tree li:first-child::before,.tree li:last-child::after{border:0}
.tree li:last-child::before{border-right:3px solid var(--L)}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:3px solid var(--L)}
.person{display:flex;align-items:center;gap:12px;min-width:230px;background:linear-gradient(120deg,#e11c2f,var(--red-d));color:#fff;padding:0 22px 0 0;height:78px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);transition:.3s}
.person:hover{transform:translateY(-4px);filter:brightness(1.1)}
.person img{width:78px;height:78px;object-fit:cover;object-position:top;flex:none;background:var(--red-d)}
.person b{display:block;font:700 1.25rem var(--head);text-transform:uppercase;letter-spacing:.04em;line-height:1.1}
.person small{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.05em;opacity:.9;display:block;margin-top:3px}
.tree>ul>li>.person{background:linear-gradient(120deg,#111,#2b3342);border-bottom:5px solid var(--yellow);min-width:290px;height:92px}
.tree>ul>li>.person img{width:92px;height:92px}
.legal{margin-top:70px;background:var(--navy);color:#fff;padding:34px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center;border-left:8px solid var(--yellow)}
.legal-head{display:flex;gap:18px}
.legal-head .ico{font-size:2.6rem;color:var(--yellow)}
.legal h3{font-size:2rem;margin-bottom:6px}
.legal p{opacity:.75;font-size:.98rem}
.legal li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.2);font:600 1.1rem var(--head);text-transform:uppercase;letter-spacing:.06em}
.legal li .ico{color:var(--yellow)}

/* CONTACT */
.contact{background-color:var(--navy);color:#fff}
.info li{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.info li>span{width:52px;height:52px;flex:none;display:grid;place-items:center;background:var(--yellow);color:#111;font-size:1.4rem}
.info b{display:block;font:700 1.25rem var(--head);text-transform:uppercase;letter-spacing:.06em}
.info a:hover{color:var(--yellow)}
.form{color:var(--ink)}
.form label{display:block;font:600 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:14px 0 6px}
.form input,.form textarea{width:100%;padding:13px 16px;border:2px solid var(--line);font:inherit;background:var(--bg)}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--red)}
.form .btn{margin-top:22px;width:100%;justify-content:center}

.footer{background:#070a10;color:#8d98aa;padding:36px 0;font-size:.9rem;border-top:6px solid var(--yellow)}
.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer .brand{color:#fff}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

@media(max-width:980px){
  .grid3,.grid4{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .split,.legal{grid-template-columns:1fr;gap:40px}
  .badge{right:12px}
}
@media(max-width:820px){
  .burger{display:block;margin-left:auto}
  .lang{order:3}
  .menu{position:fixed;inset:0 0 0 auto;width:min(300px,80%);background:var(--navy);flex-direction:column;justify-content:center;gap:28px;font-size:1.4rem;transform:translateX(100%);transition:.4s;margin:0;border-left:6px solid var(--yellow)}
  .menu.open{transform:none}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .grid3,.grid4,.gallery{grid-template-columns:1fr}
  .tile.big{grid-column:auto;grid-row:auto}
  .section{padding:80px 0}
}
.scroll-hint{display:none;text-align:center;font-size:.85rem;font-family:var(--mono);color:var(--muted);margin:-10px 0 10px;text-transform:uppercase;letter-spacing:.05em;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:820px){
  .scroll-hint{display:block}
  .tree li{padding:18px 2px 0}
  .tree li::before,.tree li::after{height:18px}
  .tree ul ul::before{height:18px}
  .person{min-width:140px;height:auto;padding:8px;flex-direction:column;text-align:center;gap:6px;clip-path:none;border-radius:8px}
  .person img{width:54px;height:54px;border-radius:50%}
  .person b{font-size:1rem}
  .person small{font-size:.7rem}
  .tree>ul>li>.person{min-width:160px;height:auto}
  .tree>ul>li>.person img{width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ===== TEMA MERAH-PUTIH (override) ===== */
:root{--red:#d6192b;--red-d:#8f0c19;--yellow:#fff;--navy:#b3121f;--navy2:#98101c;--navy3:#c4162a;--bg:#fff;--line:#ecdfe0;--ink:#2a1214;--muted:#6b5557}
body{background:#fff}
.tape{background:repeating-linear-gradient(-45deg,#fff 0 18px,var(--red) 18px 36px);border-block:3px solid var(--red)}
.eyebrow{color:var(--red)}
.eyebrow::before{background:repeating-linear-gradient(-45deg,var(--red) 0 5px,#fff 5px 10px);outline:2px solid var(--red)}
.hero .eyebrow,.dark .eyebrow,.contact .eyebrow{color:#fff}
.hero .eyebrow::before,.dark .eyebrow::before,.contact .eyebrow::before{background:repeating-linear-gradient(-45deg,#fff 0 5px,var(--red-d) 5px 10px);outline:2px solid #fff}
.nav.scrolled{background:rgba(165,15,31,.97);box-shadow:0 4px 0 #fff}
.brand small{color:#fff;opacity:.85}
.menu a:not(.btn)::after{background:#fff}
.lang button.active{background:#fff;color:var(--red)}
.btn{background:var(--red);box-shadow:none}
.btn:hover{background:#fff;color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.nav .btn,.hero .btn:not(.btn-ghost),.contact .btn{background:#fff;color:var(--red)}
.nav .btn:hover,.hero .btn:not(.btn-ghost):hover{background:var(--red-d);color:#fff}
.hero-overlay{background:linear-gradient(105deg,rgba(125,10,22,.95) 25%,rgba(214,25,43,.62) 70%,rgba(255,255,255,.12))}
.hero h1 span{color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.hero h1 span::after{content:"";display:block;width:140px;height:10px;margin-top:10px;background:#fff}
.stats{border-top:4px solid #fff;background:rgba(125,10,22,.82)}
.stats b{color:#fff}
.section.dark{background-color:var(--red);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(160deg,#c4162a,#8f0c19);background-size:44px 44px,44px 44px,100% 100%}
.srv{background:#fff;color:var(--ink);border:0;border-bottom:6px solid var(--red-d)}
.srv:hover{border-bottom-color:#fff}
.srv-body{background:#fff}
.srv img{filter:none}
.srv h3{color:var(--red)}
.srv li{color:var(--muted)}
.srv li .ico{color:var(--red)}
.num{color:rgba(214,25,43,.1)}
.about-img::before{background:repeating-linear-gradient(-45deg,var(--red) 0 12px,#fff 12px 24px);outline:3px solid var(--red)}
.badge{background:var(--red);color:#fff}
.card{border-left-color:var(--red);border:1px solid var(--line);border-left:6px solid var(--red)}
.card ul li::before{background:var(--red);outline:2px solid #fff;box-shadow:0 0 0 2px var(--red)}
#why{background:#fbf3f4}
.why{border-top-color:var(--red)}
.ico-box{background:var(--red);color:#fff}
.why:hover .ico-box{background:var(--red-d)}
.chip{color:#fff;border-color:rgba(255,255,255,.55)}
.chip:hover{background:rgba(255,255,255,.15)}
.chip.active{background:#fff;color:var(--red);border-color:#fff}
.tile figcaption{background:linear-gradient(transparent,rgba(110,8,20,.95));border-bottom:5px solid #fff}
.tile small{color:#fff;opacity:.85}
.tree{--L:var(--red)}
.person{background:linear-gradient(120deg,#e11c2f,var(--red-d))}
.tree>ul>li>.person{background:linear-gradient(120deg,#8f0c19,#5e0610);border-bottom:5px solid #fff;box-shadow:0 0 0 2px var(--red)}
.tree-wrap{background:#fff}
.legal{background:linear-gradient(120deg,var(--red),var(--red-d));border-left:8px solid #fff}
.legal-head .ico,.legal li .ico{color:#fff}
.contact{background-color:var(--red);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(160deg,#c4162a,#8f0c19);background-size:44px 44px,44px 44px,100% 100%}
.info li>span{background:#fff;color:var(--red)}
.info a:hover{color:#ffd9dd}
.form{border-left-color:var(--red-d)}
.form .btn{background:var(--red);color:#fff}
.form .btn:hover{background:var(--red-d);color:#fff;box-shadow:none}
.footer{background:#6d0912;color:#f0c9cd;border-top:6px solid #fff}
@media(max-width:820px){.menu{background:var(--red-d);border-left:6px solid #fff}}