:root{
  --red:#c8102e; --red-dark:#a30d25;
  --navy:#0d1b2a;
  --navy-soft:#16283b;
  --ink:#12181f; --muted:#5d6b7a;
  --surface:#f4f6f8; --line:#e2e7ec; --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hind",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;font-weight:800;line-height:1.15;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.accent{border-left:3px solid var(--red);padding-left:20px}
.sec{padding:80px 0}
.sec h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:12px}
.lead{color:var(--muted);margin-top:16px;max-width:38rem}
.mt32{margin-top:32px}
.wht{color:#fff}
.red{color:var(--red)}

/* BUTTON */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;font-family:"Archivo",sans-serif;font-size:.86rem;font-weight:700;transition:.2s}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-ghost-dark{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost-dark:hover{border-color:var(--red);color:#fff;background:var(--red)}

/* HEADER */
.topbar{background:var(--navy);color:rgba(255,255,255,.75);font-size:.8rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:8px 24px}
header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Archivo",sans-serif;
  font-weight:800;
  font-size:1.1rem
}

.logo img{
  width:36px;
  height:36px;
  object-fit:contain;
  flex-shrink:0;
}

.logo .mark{width:36px;height:36px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:.95rem}
.logo small{display:block;font-family:"Hind",sans-serif;font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
nav.main{display:flex;gap:28px;font-family:"Archivo",sans-serif;font-size:.86rem;font-weight:600}
nav.main a:hover{color:var(--red)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:1px solid var(--line);padding:9px 12px;font-size:1rem;cursor:pointer}
#mobnav{display:none;border-top:1px solid var(--line);background:#fff}
#mobnav a{display:block;padding:13px 24px;border-bottom:1px solid var(--line);font-weight:600}
#mobnav.open{display:block}

/* HERO */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,27,42,.95) 0%,rgba(13,27,42,.75) 45%,rgba(13,27,42,.25) 100%)}
.hero .inner{position:relative;padding:110px 0 90px}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem);margin-top:14px;max-width:36rem}
.hero p.sub{margin-top:22px;max-width:34rem;color:rgba(255,255,255,.78)}
.actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.stats{position:relative;border-top:1px solid rgba(255,255,255,.12);background:rgba(22,40,59,.75)}
.stats .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:28px 24px}
.stats b{font-family:"Archivo",sans-serif;font-size:1.5rem;display:block}
.stats span{font-size:.85rem;color:rgba(255,255,255,.6)}

/* CARD */
.grid3{display:grid;gap:24px;margin-top:46px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid4{display:grid;gap:24px;margin-top:46px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:#fff;border:1px solid var(--line);padding:30px;transition:.25s}
.card:hover{box-shadow:0 18px 40px -24px rgba(13,27,42,.35);transform:translateY(-3px)}
.card h3{font-size:1.15rem;margin-top:20px}
.card p{font-size:.92rem;color:var(--muted);margin-top:10px}
.card .spec{font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-top:8px}
.thumb{background:var(--surface);height:170px;display:grid;place-items:center}
.thumb img{max-height:150px;width:auto;object-fit:contain}
.ico{width:34px;height:34px;stroke:var(--red);stroke-width:1.7;fill:none}
.ico.sm{width:22px;height:22px}
.bg-surface{background:var(--surface)}

/* LAYANAN */
.split{display:grid;gap:50px;grid-template-columns:1fr}
.svc{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:36px}
.svc h3{font-size:1rem;margin-top:14px}
.svc p{font-size:.9rem;color:var(--muted);margin-top:8px}
.shots{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.shots img{height:320px;width:100%;object-fit:cover}

/* PAKET */
.paket{background:var(--navy);color:#fff;padding:80px 0}
.paket h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:12px}
.paket .lead{color:rgba(255,255,255,.7)}
.plans{display:grid;gap:24px;margin-top:46px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.plan{border:1px solid rgba(255,255,255,.15);background:rgba(22,40,59,.5);padding:32px;display:flex;flex-direction:column}
.plan.hot{border-color:var(--red);background:var(--navy-soft)}
.tag{align-self:flex-start;background:var(--red);color:#fff;font-family:"Archivo",sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;margin-bottom:16px}
.plan .cams{font-size:.88rem;color:rgba(255,255,255,.6);margin-top:4px}
.price{font-family:"Archivo",sans-serif;font-size:2.3rem;margin:22px 0 6px}
.plan ul{list-style:none;margin-top:18px;flex:1;display:grid;gap:11px;font-size:.9rem;color:rgba(255,255,255,.78)}
.plan li{display:flex;gap:10px}
.plan li:before{content:"\2713";color:var(--red);font-weight:700}
.plan .btn{margin-top:28px;justify-content:center}

/* KONTAK */
.contact{display:grid;gap:44px;grid-template-columns:1fr}
.info{list-style:none;margin-top:32px;display:grid;gap:20px}
.info li{display:flex;gap:14px}
.info strong{font-family:"Archivo",sans-serif;font-size:.9rem;display:block}
.info span{font-size:.92rem;color:var(--muted)}
.map{border:1px solid var(--line)}
.map iframe{width:100%;height:420px;border:0;display:block}

/* FOOTER */
footer.site{background:var(--navy);color:rgba(255,255,255,.65);padding:56px 0 0;font-size:.9rem}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site h4{font-family:"Archivo",sans-serif;color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none;display:grid;gap:9px}
.flogo{color:#fff}
.flogo small{color:rgba(255,255,255,.5)}
.fabout{margin-top:16px;max-width:22rem}
.copy{margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:.82rem}

/* FLOATING WA */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.fab svg{width:28px;height:28px;fill:#fff}

@media(min-width:768px){
  .sec,.paket{padding:110px 0}
  .hero .inner{padding:150px 0 120px}
  .stats .grid{grid-template-columns:repeat(4,1fr);padding:34px 24px}
  .split{grid-template-columns:1fr 1fr;align-items:center}
  .contact{grid-template-columns:1fr 1fr;align-items:start}
  .shots img:last-child{margin-top:40px}
}
@media(max-width:900px){
  nav.main,.nav-cta .btn{display:none}
  .burger{display:block}
}

/* LATEST PROJECT */

.latest-project{
  background:#fff;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:46px;
}

.project-card{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  transition:.25s;
}

.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(13,27,42,.4);
}

.project-image{
  position:relative;
  height:240px;
  overflow:hidden;
  background:var(--surface);
}

.project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.project-card:hover .project-image img{
  transform:scale(1.04);
}

.project-label{
  position:absolute;
  top:16px;
  left:16px;
  background:var(--red);
  color:#fff;
  padding:6px 12px;
  font-family:"Archivo",sans-serif;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.project-content{
  padding:26px;
}

.project-location{
  font-family:"Archivo",sans-serif;
  color:var(--red);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0;
}

.project-content h3{
  font-size:1.2rem;
  margin-top:8px;
}

.project-content > p:not(.project-location){
  color:var(--muted);
  font-size:.9rem;
  margin-top:10px;
}

.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px;
}

.project-meta span{
  padding:5px 9px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  font-family:"Archivo",sans-serif;
  font-size:.65rem;
  font-weight:600;
}

/* PROJECT MOBILE */

@media(max-width:900px){

  .project-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:600px){

  .project-grid{
    grid-template-columns:1fr;
  }

  .project-image{
    height:220px;
  }

}

/* LATEST PROJECT - MORE BUTTON */

.project-more{
  display:flex;
  justify-content:center;
  margin-top:36px;
}

.project-more .btn{
  min-width:190px;
  justify-content:center;
}


/* LATEST LIHAT SELENGKAPNYA */

/* =========================================================
   LATEST PROJECT PAGE
========================================================= */

.latest-page{
  padding:90px 0;
  background:#fff;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.project-heading{
  max-width:800px;
  margin-bottom:60px;
}


/* =========================================================
   PROJECT ITEM
========================================================= */

.project-item{
  width:100%;
  margin-bottom:70px;

  background:#fff;

  border:1px solid var(--line);

  overflow:hidden;

  transition:.25s ease;
}

.project-item:hover{
  box-shadow:0 20px 50px -30px rgba(13,27,42,.45);
}


/* =========================================================
   PROJECT PHOTO
========================================================= */

.project-photo{
  width:100%;
  height:520px;

  overflow:hidden;

  background:var(--surface);
}

.project-photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .5s ease;
}

.project-item:hover .project-photo img{
  transform:scale(1.025);
}


/* =========================================================
   PROJECT DETAIL
========================================================= */

.project-detail{
  padding:38px 42px 42px;
}


/* DATE */

.project-date{
  color:var(--red);

  font-family:"Archivo",sans-serif;

  font-size:.7rem;
  font-weight:700;

  letter-spacing:.15em;

  text-transform:uppercase;

  margin-bottom:10px;
}


/* LOCATION */

.project-location{
  color:var(--muted);

  font-family:"Archivo",sans-serif;

  font-size:.7rem;
  font-weight:700;

  letter-spacing:.14em;

  text-transform:uppercase;

  margin-bottom:10px;
}


/* TITLE */

.project-detail h3{
  font-size:clamp(1.5rem,3vw,2.1rem);

  line-height:1.2;

  margin:0;
}


/* DESCRIPTION */

.project-description{
  max-width:800px;

  color:var(--muted);

  font-size:.95rem;

  line-height:1.7;

  margin-top:14px;
}


/* =========================================================
   PROJECT INFO
========================================================= */

.project-info{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:24px;
}

.project-info span{
  display:inline-block;

  background:var(--surface);

  border:1px solid var(--line);

  padding:7px 12px;

  color:var(--muted);

  font-family:"Archivo",sans-serif;

  font-size:.65rem;

  font-weight:600;

  letter-spacing:.03em;
}


/* =========================================================
   CTA
========================================================= */

.project-cta{
  margin-top:90px;

  padding:45px 48px;

  background:var(--navy);

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;
}

.project-cta h2{
  margin-top:10px;

  font-size:clamp(1.5rem,3vw,2.2rem);

  line-height:1.2;
}

.project-cta p:not(.eyebrow){
  color:rgba(255,255,255,.68);

  max-width:650px;

  margin-top:10px;

  line-height:1.6;
}

.project-cta .btn{
  flex-shrink:0;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.project-back{
  display:flex;

  justify-content:center;

  margin-top:42px;
}


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

@media(max-width:900px){

  .latest-page{
    padding:70px 0;
  }

  .project-heading{
    margin-bottom:45px;
  }

  .project-item{
    margin-bottom:50px;
  }

  .project-photo{
    height:400px;
  }

  .project-detail{
    padding:30px;
  }

  .project-cta{
    flex-direction:column;

    align-items:flex-start;

    padding:35px;
  }

  .project-cta .btn{
    width:100%;

    justify-content:center;
  }

}


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

@media(max-width:600px){

  .latest-page{
    padding:60px 0;
  }

  .project-heading{
    margin-bottom:35px;
  }

  .project-item{
    margin-bottom:40px;
  }

  .project-photo{
    height:250px;
  }

  .project-detail{
    padding:24px;
  }

  .project-date{
    font-size:.65rem;
  }

  .project-location{
    font-size:.65rem;
  }

  .project-detail h3{
    font-size:1.35rem;
  }

  .project-description{
    font-size:.88rem;
  }

  .project-info{
    margin-top:20px;
  }

  .project-info span{
    padding:6px 9px;

    font-size:.6rem;
  }

  .project-cta{
    margin-top:60px;

    padding:30px 24px;
  }

  .project-cta h2{
    font-size:1.5rem;
  }

  .project-back{
    margin-top:30px;
  }

}