*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --or:#E8652A;--or2:#FF7A3D;
  --dk:#0F0F0F;--dk2:#1A1A1A;--dk3:#252525;--mid:#3A3A3A;
  --gr:#F2F1EE;--gr2:#E8E7E4;
  /* Perbaikan timing function agar lebih smooth (seperti iOS) */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html{
  scroll-behavior: smooth;
  /* Tambahan optimasi scroll */
  overscroll-behavior-y: none;
}
body{
  font-family:'DM Sans',sans-serif;
  background:#fff;
  overflow-x:hidden;
  color:#1C1C1C;
  /* Mencegah lag saat animasi berjalan */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media(hover:hover){body{cursor:none;}}

/* CURSOR */
#c-dot{position:fixed;width:8px;height:8px;background:var(--or);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .2s,height .2s;will-change: transform, left, top;}
#c-ring{position:fixed;width:38px;height:38px;border:1.5px solid var(--or);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease);opacity:.55;will-change: transform, left, top, width, height;}

/* SCROLL BAR */
#sb{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--or),var(--or2));z-index:99997;width:0;transition:width .1s var(--ease);will-change: width;}

/* NAVBAR */
.nav{position:fixed;top:0;left:0;right:0;z-index:9000;padding:0 48px;height:68px;display:flex;align-items:center;justify-content:space-between;transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);border-bottom:1px solid transparent;will-change: background, backdrop-filter;}
.nav.on{background:rgba(10,10,10,0.93);backdrop-filter:blur(20px);border-color:rgba(255,255,255,0.07);}
.nav-links{display:flex;gap:28px;}
.nl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;position:relative;transition:color .3s var(--ease);}
.nl::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);will-change: transform;}
.nl:hover{color:#fff;}
.nl:hover::after{transform:scaleX(1);}
.nav-btn{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;background:var(--or);color:#fff;border:none;padding:10px 22px;border-radius:3px;text-decoration:none;transition:background .3s var(--ease), transform .3s var(--ease);will-change: transform, background;}
.nav-btn:hover{background:var(--or2);transform:translateY(-2px);}

/* REVEAL ANIMATIONS (Dengan Hardware Acceleration) */
.rv{opacity:0;transform:translateY(36px) translateZ(0);transition:opacity .8s var(--ease),transform .8s var(--ease);will-change: opacity, transform;}
.rl{opacity:0;transform:translateX(-44px) translateZ(0);transition:opacity .8s var(--ease),transform .8s var(--ease);will-change: opacity, transform;}
.rr{opacity:0;transform:translateX(44px) translateZ(0);transition:opacity .8s var(--ease),transform .8s var(--ease);will-change: opacity, transform;}
.rs{opacity:0;transform:scale(.9) translateZ(0);transition:opacity .8s var(--ease),transform .8s var(--ease);will-change: opacity, transform;}
.rv.v,.rl.v,.rr.v,.rs.v{opacity:1;transform:translateZ(0);}
.d1{transition-delay:.1s!important;}.d2{transition-delay:.2s!important;}
.d3{transition-delay:.3s!important;}.d4{transition-delay:.4s!important;}
.d5{transition-delay:.5s!important;}.d6{transition-delay:.6s!important;}

/* SECTION TAG */
.stag{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--or);display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;}
.stag::before{content:'';width:24px;height:2px;background:var(--or);flex-shrink:0;}

/* SLIDE NUMBER */
.sn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:3px;color:rgba(0,0,0,.15);text-align:right;padding-top:40px;}
.snl{color:rgba(255,255,255,.12);}

/* WRAP */
.w{max-width:1280px;margin:0 auto;padding:0 56px;}

/* ==================== SLIDE 1 HERO ==================== */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--dk);}
.hbg{position:absolute;inset:0;background:url("img/portfolio/portfolio (1).webp") center/cover no-repeat;filter:grayscale(100%) brightness(.32);transform:scale(1.07) translateZ(0);animation:hzoom 18s var(--ease) forwards;will-change: transform;}
@keyframes hzoom{to{transform:scale(1) translateZ(0);}}
.hov{position:absolute;inset:0;background:linear-gradient(108deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.25) 65%,transparent 100%);}
.hgl{position:absolute;left:0;top:0;bottom:0;width:88px;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:0 18px;}
.hgb{border:1.5px solid rgba(255,255,255,.1);width:50px;height:50px;animation:hfloat 4s ease-in-out infinite alternate;will-change: transform;}
.hgb:nth-child(even){border-color:rgba(232,101,42,.22);animation-delay:-.5s;}
@keyframes hfloat{to{transform:translateY(-7px);}}
.hvl{position:absolute;right:160px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(232,101,42,.28),transparent);animation:vpulse 3s ease-in-out infinite;will-change: opacity;}
@keyframes vpulse{0%,100%{opacity:.25}50%{opacity:.75}}
.hcnt{position:absolute;right:52px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:28px;}
.hci{text-align:right;}
.hcn{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--or);line-height:1;letter-spacing:1px;}
.hcl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.38);margin-top:2px;}
.hscr{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:4;}
.hsl{width:1px;height:44px;background:linear-gradient(to bottom,var(--or),transparent);animation:sline 1.6s ease-in-out infinite;will-change: transform;}
@keyframes sline{0%{transform:scaleY(0);transform-origin:top}49%{transform:scaleY(1);transform-origin:top}50%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hst{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.3);text-transform:uppercase;writing-mode:vertical-rl;}

/* ==================== SLIDE 2 TEAM ==================== */
#team{background:var(--gr);padding:120px 0 80px;}
.tc{border-radius:4px;overflow:hidden;background:var(--gr2);transition:transform .4s var(--ease),box-shadow .4s var(--ease);will-change: transform, box-shadow;}
.tc:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.14);}
.tpa{height:280px;overflow:hidden;background:linear-gradient(135deg,#c4c0bb,#96938e);position:relative;}
.tpa img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s var(--ease);will-change: transform;}
.tc:hover .tpa img{transform:scale(1.06);}
.tbar{height:3px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);will-change: transform;}
.tc:hover .tbar{transform:scaleX(1);}
.tcb{padding:20px 20px 26px;}
.tcn{font-weight:700;font-size:15px;color:#1C1C1C;margin-bottom:5px;}
.tcr{font-size:13px;color:#888;line-height:1.5;}

/* ==================== SLIDE 3 ABOUT ==================== */
#about{min-height:100vh;display:flex;}
.al{flex:0 0 50%;display:flex;flex-direction:column;justify-content:center;padding:100px 72px;background:#fff;}
.ar{flex:1;position:relative;overflow:hidden;background:var(--mid);min-height:600px;}
.ar img{width:100%;height:100%;object-fit:cover;filter:grayscale(80%) brightness(.65);display:block;position:absolute;inset:0;transition:filter .6s var(--ease),transform 12s linear;will-change: filter, transform;}
.ar:hover img{filter:grayscale(40%) brightness(.75);transform:scale(1.04);}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;}
.spc{background:var(--dk2);color:#fff;border-radius:8px;padding:24px;border:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease);will-change: transform, border-color;}
.spc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--or),transparent);}
.spc:hover{transform:translateY(-5px);border-color:rgba(232,101,42,.3);}
.spn{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--or);line-height:1;letter-spacing:1px;}
.spl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:4px;}
.sps{font-size:12px;color:rgba(255,255,255,.28);margin-top:5px;}

/* ==================== SLIDE 4 VISION ==================== */
#vision{background:var(--gr);padding:120px 0;}
.bp{display:inline-block;background:var(--mid);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:3px;text-transform:uppercase;padding:10px 28px;border-radius:3px;margin-bottom:14px;}
.mi{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.07);transition:padding-left .3s var(--ease);}
.mi:hover{padding-left:6px;}
.mn{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--or);flex-shrink:0;line-height:1.25;width:30px;}
.mt{font-size:15px;color:#555;line-height:1.75;padding-top:2px;}

/* ==================== SLIDE 5a SERVICES ==================== */
.svh{background:var(--gr);padding:80px 0 60px;text-align:center;}
.svb{background:var(--dk3);padding:64px 0 80px;}
.svc{text-align:center;padding:0 14px;transition:transform .4s var(--ease);will-change: transform;}
.svc:hover{transform:translateY(-10px);}
.sci{width:124px;height:124px;border-radius:50%;background:#D5D4D0;border:3px solid #BBBAB6;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:border-color .4s var(--ease),box-shadow .4s var(--ease);will-change: border-color, box-shadow;}
.svc:hover .sci{border-color:var(--or);box-shadow:0 0 0 7px rgba(232,101,42,.1);}
.scon{width:2px;height:26px;background:rgba(255,255,255,.12);margin:0 auto 10px;}
.svt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--or);margin-bottom:10px;}
.svd{font-size:13px;color:rgba(255,255,255,.48);line-height:1.7;max-width:168px;margin:0 auto;}

/* ==================== SLIDE 5b TIMELINE ==================== */
#timeline{background:var(--dk3);padding:100px 0;}
.tlw{display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:12px;scroll-behavior: smooth;}
.tli{flex:1;min-width:140px;display:flex;flex-direction:column;align-items:center;}
.tlb{width:100%;max-width:172px;border-radius:14px;border:2.5px solid #484848;background:#DDDBD6;padding:18px 12px;text-align:center;transition:transform .4s var(--spring),box-shadow .4s var(--ease);will-change: transform, box-shadow;}
.tlb:hover{transform:translateY(-7px);box-shadow:0 18px 44px rgba(0,0,0,.45);}
.tlb.red{background:#E74C3C;border-color:#C0392B;color:#fff;}
.tlb.green{background:#27AE60;border-color:#1E8449;color:#fff;}
.tlst{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;opacity:.6;margin-bottom:4px;text-transform:uppercase;}
.tllb{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:14px;line-height:1.3;white-space:pre-line;color:#1C1C1C;}
.tlb.red .tllb,.tlb.green .tllb{color:#fff;}
.tlstem{width:2px;height:18px;background:rgba(255,255,255,.12);margin:6px 0;}
.tldot{width:10px;height:10px;border-radius:50%;background:#666;}
.tldot.red{background:#E74C3C;}
.tldot.green{background:#27AE60;}
.tlwk{margin-top:10px;background:rgba(255,255,255,.08);border-radius:20px;padding:5px 14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:rgba(255,255,255,.65);}
.tlwk.red{background:#E74C3C;color:#fff;}
.tlwk.green{background:#27AE60;color:#fff;}
.tlarr{color:rgba(255,255,255,.18);font-size:24px;flex-shrink:0;align-self:flex-start;margin-top:24px;padding:0 3px;}

/* ==================== SLIDE 6,7 PORTFOLIO ==================== */
#portfolio{background:var(--gr);padding:120px 0 80px;}
.pfg{display:grid;grid-template-columns:260px 1fr 300px;gap:24px;align-items:start;margin-bottom:20px;}
.pflbl{background:var(--mid);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:18px;letter-spacing:2px;text-align:center;padding:12px 18px;border-radius:3px;margin-bottom:14px;}
.pfin p{font-size:13px;color:#666;margin-bottom:5px;}
.pfin b{color:#1C1C1C;font-weight:700;}
.pfpl{border-radius:8px;background:#CFCDC8;height:200px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.pfpl img{width:100%;height:100%;object-fit:contain;display:block;}
.pfib{border-radius:8px;overflow:hidden;background:#ADABA8;position:relative;}
.pfib img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);will-change: transform;}
.pfib:hover img{transform:scale(1.06);}

/* ==================== SLIDE 8 CONTACT ==================== */
#contact{background:var(--dk2);min-height:75vh;display:flex;position:relative;overflow:hidden;}
.cph{flex:0 0 46%;position:relative;overflow:hidden;clip-path:polygon(0 0,88% 0,100% 100%,0 100%);}
.cph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) brightness(.45);transition:filter .8s var(--ease),transform 10s linear;will-change: filter, transform;}
.cph:hover img{filter:grayscale(60%) brightness(.55);}
.cb{flex:1;display:flex;flex-direction:column;justify-content:center;padding:72px 80px;position:relative;z-index:2;}
.cit{display:flex;align-items:flex-start;gap:20px;margin-bottom:22px;transition:transform .4s var(--ease);will-change: transform;}
.cit:hover{transform:translateX(7px);}
.cion{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease),border-color .4s var(--ease);will-change: background, border-color;}
.cit:hover .cion{background:rgba(232,101,42,.14);border-color:var(--or);}
.ctxt{color:#fff;font-size:16px;font-weight:500;padding-top:12px;line-height:1.4;}

/* FOOTER */
footer{background:var(--dk);border-top:1px solid rgba(255,255,255,.05);padding:32px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.fl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.22);line-height:1.7;}
.fls{display:flex;gap:24px;}
.fla{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.18);text-decoration:none;transition:color .3s var(--ease);}
.fla:hover{color:var(--or);}

/* ============================================================
   RESPONSIVE — TABLET & MOBILE
   ============================================================ */
.hero-main{position:relative;z-index:4;padding:0 0 0 108px;}
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* HAMBURGER BUTTON */
.mob-btn{
  display:none;
  position:relative;z-index:9999;
  background:none;border:none;cursor:pointer;padding:4px;
  flex-direction:column;gap:5px;align-items:flex-end;
}
.mob-btn span{
  display:block;height:2px;background:#fff;border-radius:2px;
  transition:all .4s var(--spring);
  will-change: transform, width, opacity;
}
.mob-btn span:nth-child(1){width:24px;}
.mob-btn span:nth-child(2){width:18px;}
.mob-btn span:nth-child(3){width:12px;}
.mob-btn.open span:nth-child(1){width:22px;transform:translateY(7px) rotate(45deg);}
.mob-btn.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.mob-btn.open span:nth-child(3){width:22px;transform:translateY(-7px) rotate(-45deg);}

/* DRAWER MENU MOBILE */
.mob-drawer{
  position:fixed;inset:0;z-index:8999;
  background:rgba(10,10,10,.97);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  pointer-events:none;
  will-change: transform;
}
.mob-drawer.open{transform:none;pointer-events:auto;}
.mob-drawer a{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:32px;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-decoration:none;
  padding:8px 0;
  transition:color .3s var(--ease),transform .3s var(--ease);
  will-change: transform, color;
}
.mob-drawer a:hover{color:var(--or);transform:translateX(6px);}
.mob-drawer .mob-cta{
  margin-top:24px;
  background:var(--or);color:#fff;
  padding:14px 36px;border-radius:3px;
  font-size:14px;letter-spacing:2px;
}

@media(max-width:900px){
  body{cursor:auto;}
  #c-dot,#c-ring{display:none!important;}
  .nav{padding:0 20px;height:60px;}
  .nav-links{display:none!important;}
  .nav-btn{display:none!important;}
  .mob-btn{display:flex;}
  .mob-btn span{background:#fff;}
  .nav.on .mob-btn span{background:#fff;}
  .nav.on .mob-btn.open span{background:#fff;}
  .w{padding:0 20px;}
  
  #hero{min-height:100svh;align-items:flex-end;padding:0 0 88px 0;}
  .hbg{filter:grayscale(100%) brightness(.25);}
  .hov{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 55%,transparent 100%);}
  .hgl,.hvl,.hcnt,.hscr{display:none;}
  .hero-main{width:100%;padding:0 24px 0 24px!important;text-align:center;}
  .hero-main .stag{justify-content:center;}
  .hero-btns{justify-content:center;}

  #vision{padding:72px 0 64px;}
  .vision-grid{grid-template-columns:1fr!important;gap:32px!important;}
  #vision .rl{height:260px!important;box-shadow:none!important;margin-bottom:0;}
  #vision .w > div[style*="flex"]{flex-wrap:wrap;gap:12px;margin-bottom:40px!important;}

  #about{flex-direction:column;min-height:auto;}
  .al{flex:none;padding:56px 24px 48px;min-width:0;width:100%;}
  .ar{min-height:280px;flex:none;width:100%;}
  .sp{grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;}

  #team{padding:72px 0 56px;}
  #team .w > div[style*="flex"]{flex-wrap:wrap;gap:12px;margin-bottom:40px!important;}
  .team-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important;}
  .tpa{height:200px;}
  .tcb{padding:14px 14px 20px;}
  .tcn{font-size:13px;}
  .tcr{font-size:12px;}

  .svh{padding:56px 20px 36px;}
  .svh h2{font-size:clamp(28px,7vw,52px)!important;}
  .svb{padding:48px 0 64px;}
  .svc-grid{grid-template-columns:repeat(2,1fr)!important;gap:48px 24px!important;}
  .sci{width:96px;height:96px;}
  .svc{padding:0 8px;}

  #timeline{padding:64px 0;}
  #timeline h2,#timeline .stag{text-align:center;justify-content:center;}
  .w .tlw{padding:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #timeline .w{position:relative;}
  #timeline .w::after{content:'';position:absolute;right:0;top:0;bottom:16px;width:40px;background:linear-gradient(to right,transparent,var(--dk3));pointer-events:none;}
  .tli{min-width:120px;}
  .tlb{padding:12px 8px;border-radius:10px;}
  .tlst{font-size:9px;}
  .tllb{font-size:12px;}
  .tlwk{font-size:11px;padding:3px 10px;}
  .tlarr{font-size:16px;margin-top:18px;padding:0 1px;}

  #portfolio{padding:72px 0 48px;}
  #portfolio .w > div[style*="flex"]{flex-wrap:wrap;gap:12px;margin-bottom:40px!important;}
  .pfg{grid-template-columns:1fr!important;gap:16px!important;}
  .pfib-main{height:260px!important;}
  .pfib-int-wrap{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;flex-direction:unset!important;}
  .pfib-int{height:140px!important;}
  .pfg-info{order:2;}
  .pfg-main{order:1;}
  .pfib-int-wrap{order:3;}
  .pfg{align-items:start;}

  #contact{flex-direction:column;min-height:auto;}
  .cph{flex:none;height:240px;clip-path:none;width:100%;}
  .cb{padding:44px 24px 56px;flex:none;}
  .ctxt{font-size:14px;padding-top:8px;}
  #contact a[style]{display:block!important;text-align:center;}

  footer{padding:28px 20px;flex-direction:column;align-items:flex-start;gap:16px;}
  .fls{flex-wrap:wrap;gap:12px;}
  .fl{font-size:10px;}
}

@media(max-width:480px){
  #hero h1{font-size:clamp(64px,18vw,100px)!important;}
  #hero p[style]{font-size:clamp(18px,5vw,26px)!important;}
  #vision .rl{height:200px!important;}
  .team-grid{grid-template-columns:1fr!important;gap:20px!important;}
  .tpa{height:280px;}
  .sp{grid-template-columns:1fr!important;}
  .svc-grid{grid-template-columns:1fr!important;max-width:300px;margin-left:auto;margin-right:auto;}
  .tli{min-width:104px;}
  .tllb{font-size:11px;}
  .tlb{padding:10px 6px;}
  .tlarr{font-size:14px;margin-top:16px;}
  .pfib-int-wrap{grid-template-columns:1fr!important;}
  .pfib-int{height:180px!important;}
  .pfib-main{height:240px!important;}
  .cb{padding:36px 20px 48px;}
  .ctxt{font-size:13px;}
  .cph{height:200px;}
  footer{padding:24px 20px;}
  .fls{gap:10px;}
}

/* ==========================================================================
   WHATSAPP FLOATING (MULTI KONTAK)
   ========================================================================== */
   
#whatsapp-button {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9990; 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform .4s var(--spring), box-shadow .4s var(--ease);
  will-change: transform, box-shadow;
}

#whatsapp-button:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

#whatsapp-button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

#whatsapp-chat {
  position: fixed;
  bottom: 100px;
  right: 25px;
  z-index: 9991; 
  width: 320px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--spring);
  will-change: transform, opacity;
}

#whatsapp-chat.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#whatsapp-chat.hidden {
  opacity: 0;
  pointer-events: none;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #095E54;
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.close-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.close-btn:hover {
  transform: scale(1.2) rotate(90deg);
}

.chat-body {
  padding: 20px;
  background-color: #E5DDD5;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.chat-intro {
  background: #fff;
  padding: 12px 16px;
  border-radius: 0 8px 8px 8px;
  font-size: 13px;
  color: #333;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  position: relative;
  line-height: 1.5;
}

.chat-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #fff transparent transparent;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border-left: 4px solid #25D366;
  transition: background .3s var(--ease), transform .3s var(--ease);
  will-change: transform, background;
}

.contact-item:hover {
  background: #fcfcfc;
  transform: translateY(-2px);
}

.contact-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 14px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  font-size: 22px;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-name {
  font-weight: bold;
  font-size: 14px;
  color: #111;
}

.contact-role {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.contact-icon {
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── LIGHTBOX ── */
.lb-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  transition: background .3s ease;
  pointer-events: none;
}
.lb-overlay.open {
  background: rgba(0,0,0,.92);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.lb-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  transform: scale(.92);
  opacity: 0;
  transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), opacity .3s ease;
  pointer-events: none;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.lb-overlay.open .lb-img {
  transform: scale(1);
  opacity: 1;
}
.lb-close {
  position: fixed; top: 20px; right: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .25s;
  z-index: 100000;
}
.lb-close:hover { background: var(--or); transform: rotate(90deg); }
.pfib { cursor: zoom-in; }
.pfpl { cursor: zoom-in; }