nav{
position:fixed;top:0;left:0;right:0;z-index:999;
height:var(--nav-h);
display:flex;align-items:center;
padding:0 5%;
transition:background .5s,border-bottom .5s;
}
nav.ns{
background:rgba(246, 244, 240, 0.8);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid rgba(200,136,58,.15);
}
.nl{display:flex;align-items:center;gap:14px;}
.nl-hex{
width:40px;height:40px;
background:var(--c-copper);
clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.nl-hex span{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;color:var(--c-light);letter-spacing:1px;}
.nl-text strong{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:2.5px;color:var(--c-dark);line-height:1;}
.nl-text small{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--c-copper);}
.nm{display:flex;gap:2px;margin:0 auto;}
.nm a{
font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;
color:var(--c-dark2);padding:10px 14px;
position:relative;transition:color .2s;
}
.nm a::after{
content:'';position:absolute;bottom:6px;left:14px;right:14px;height:1px;
background:var(--c-copper);transform:scaleX(0);transform-origin:left;
transition:transform .3s var(--ease);
}
.nm a:hover,.nm a.active{color:var(--c-dark);}
.nm a:hover::after,.nm a.active::after{transform:scaleX(1);}
.nc{
display:inline-flex;align-items:center;gap:8px;
background:var(--c-copper);color:var(--c-light);
font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
padding:12px 22px;
clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
transition:background .2s,transform .2s;
}
.nc:hover{background:var(--c-copper2);transform:translateY(-1px);}
.n-mob{
display:none;
flex-direction:column;
gap:5px;
padding:6px;
position:relative;
z-index:1000;
}
.n-mob span{
display:block;
width:22px;
height:1.5px;
background:var(--c-dark);
transition:all 0.3s ease-in-out;
}
.n-mob.active span:nth-child(1){
transform:translateY(6.5px) rotate(45deg);
}
.n-mob.active span:nth-child(2){
opacity:0;
transform:scaleX(0);
}
.n-mob.active span:nth-child(3){
transform:translateY(-6.5px) rotate(-45deg);
}
.mob-nav{
display:none;position:fixed;inset:0;z-index:998;
background:var(--c-light);flex-direction:column;
align-items:center;justify-content:center;gap:28px;
}
.mob-nav.on{display:flex;}
.mob-nav a{font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:700;letter-spacing:3px;color:var(--c-dark);text-transform:uppercase;transition:color .2s;}
.mob-nav a:hover{color:var(--c-copper);}
.mob-close{position:absolute;top:24px;right:5%;font-size:28px;color:var(--c-dark2);}
.page{display:none;min-height:100vh;}
.page.active{display:block;}
#overlay{
position:fixed;inset:0;z-index:9990;
background:var(--c-copper);
clip-path:inset(0 100% 0 0);
transition:clip-path .55s var(--ease);
pointer-events:none;
}
#overlay.in{clip-path:inset(0 0% 0 0);}
#overlay.out{clip-path:inset(0 0 0 100%);}
.tag{
display:inline-flex;align-items:center;gap:10px;
font-size:10px;font-weight:600;letter-spacing:4px;text-transform:uppercase;
color:var(--c-copper);margin-bottom:14px;
}
.tag::before{content:'';width:24px;height:1.5px;background:var(--c-copper);}
.h1d{font-family:'Barlow Condensed',sans-serif;font-weight:900;line-height:.93;letter-spacing:1px;text-transform:uppercase;}
.h2d{font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:.95;letter-spacing:1px;text-transform:uppercase;}
.h3d{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.cu{color:var(--c-copper);}

/* Kelas Utilitas Warna yang telah diperbaiki (.cw diganti menjadi .cd, .cb menjadi .cl) */
.cd{color:var(--c-dark);}
.cl{color:var(--c-light);}

.body-text{font-size:15px;font-weight:300;line-height:1.85;color:var(--c-dark2);}
.body-text-dark{font-size:15px;font-weight:300;line-height:1.85;color:var(--c-dark4);}
.divider{width:36px;height:2px;background:var(--c-copper);margin:18px 0;}
.btn-gold{
display:inline-flex;align-items:center;gap:10px;
background:var(--c-copper);color:var(--c-light);
font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
padding:16px 30px;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
transition:background .2s,transform .2s;
}
.btn-gold:hover{background:var(--c-copper2);transform:translateY(-2px);}
.btn-ghost{
display:inline-flex;align-items:center;gap:10px;
border:1px solid rgba(200,136,58,.5);color:var(--c-dark);
font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
padding:15px 28px;
transition:border-color .2s,background .2s,transform .2s;
}
.btn-ghost:hover{border-color:var(--c-copper);background:var(--c-coppert);transform:translateY(-2px);}
.btn-ghost-dark{
display:inline-flex;align-items:center;gap:10px;
border:1px solid rgba(12,14,18,.25);color:var(--c-light);
font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
padding:15px 28px;
transition:border-color .2s,background .2s,transform .2s;
}
.btn-ghost-dark:hover{border-color:var(--c-copper);color:var(--c-copper);background:rgba(200,136,58,.06);transform:translateY(-2px);}
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.rv.vis{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;}
.rv.d2{transition-delay:.16s;}
.rv.d3{transition-delay:.24s;}
.rv.d4{transition-delay:.32s;}
.sec{padding:100px 5%;position:relative;}
.sec-sm{padding:60px 5%;}
.sec-hdr{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:56px;}
.tex-bg::after{
content:'';
position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(200,136,58,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(200,136,58,.03) 1px,transparent 1px);
background-size:60px 60px;
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-light);
  color: var(--c-copper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 16px 30px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.btn-dark:hover {
  background: var(--c-light3);
  color: var(--c-dark);
  transform: translateY(-2px);
}
.tex-bg-light::after{
content:'';
position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(12,14,18,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(12,14,18,.04) 1px,transparent 1px);
background-size:60px 60px;
}
.slim-footer {
  background: var(--c-white);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 24px 5%;
  text-align: center;
}
.sf-container { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 12px; 
}
.sf-logo { 
  height: 32px; 
  filter: grayscale(100%); 
  opacity: 0.6; 
}
.slim-footer p { 
  font-size: 12px; 
  color: var(--c-dark3); 
  letter-spacing: 1px; 
}
/* ==========================================
   OPTIMASI TOMBOL FAQ HEADER (MOBILE ONLY)
========================================== */
@media (max-width: 768px) {
  /* 1. Mengubah bentuk blok menjadi kotak minimalis */
  nav .btn-gold.trigger-chatbot {
    font-size: 0 !important; 
    letter-spacing: 0 !important;
    padding: 0 !important;
    gap: 0 !important; /* INI KUNCINYA: Menghapus sisa ruang kosong dari versi desktop */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid rgba(200, 136, 58, 0.4) !important;
    border-radius: 8px;
    clip-path: none !important; 
    margin-left: auto !important; 
  }
  
  /* 2. Memunculkan Ikon Robot secara presisi */
  nav .btn-gold.trigger-chatbot::after {
    content: '\f544'; 
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 18px;
    color: var(--c-copper);
    line-height: 1 !important; /* Memastikan tinggi ikon simetris */
  }

  /* 3. Menyesuaikan posisi menu Hamburger agar berdampingan rapi */
  nav .n-mob {
    margin-left: 16px !important;
  }
}