:root{--navy:#071522;--navy2:#0d2638;--blue:#087fc9;--cyan:#39c2eb;--gold:#d7ad59;--light:#f2f6f8;--text:#102333;--muted:#687987}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);line-height:1.65}
.wrap{width:min(1180px,92%);margin:auto}.top{height:34px;background:#030a10;color:#91a6b6;font-size:10px;display:flex;align-items:center;justify-content:space-between;padding:0 4%}
.header{height:82px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:20;box-shadow:0 5px 18px rgba(0,0,0,.14)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.logo img{width:120px;height:60px;object-fit:contain}
.nav nav{display:flex;align-items:center;gap:22px}.nav a{color:#dce8ef;text-decoration:none;font-size:12px;font-weight:700}.nav a:hover{color:var(--cyan)}
.nav .yt{color:#ff656a}.nav .contact-btn{background:var(--gold);color:#071522;padding:11px 15px}
.hero{background:linear-gradient(120deg,#06111b,#0d2b41);color:#fff;padding:105px 0}.hero h1{font:800 clamp(42px,6vw,70px)/1.04 Manrope,Inter,sans-serif;letter-spacing:-3px;margin:15px 0 22px}.hero h1 em,h2 em{font-style:normal;color:var(--cyan)}.hero p{max-width:720px;color:#b8cad6;font-size:16px}.eyebrow{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:2px}
.btn{display:inline-block;margin-top:24px;background:var(--gold);color:#071522;text-decoration:none;padding:13px 20px;font-size:12px;font-weight:800}
.section{padding:90px 0}.two{display:grid;grid-template-columns:1fr 1fr;gap:85px}h2{font:800 clamp(34px,4vw,54px)/1.08 Manrope,Inter,sans-serif;letter-spacing:-2px;margin:12px 0 22px}.copy p{color:var(--muted)}
.dark{background:var(--navy);color:#fff}.dark .copy p,.dark .card p{color:#91a6b6}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#294052;margin-top:40px}.card{background:#0b1b2a;padding:28px;min-height:200px}.card span{color:var(--gold);font-size:11px}.card h3{font:700 21px Manrope;margin:35px 0 8px}
.project-list{margin-top:40px;border-top:1px solid #d7e1e7}.project{display:grid;grid-template-columns:55px 1fr 35px;gap:28px;padding:30px 0;border-bottom:1px solid #d7e1e7}.project-no{color:#9aabb6;font:700 20px Manrope}.project small{color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1px}.project h3{font:700 25px Manrope;margin:6px 0}.project p{color:var(--muted);margin:0 0 8px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:35px}.photo{height:240px;padding:18px;display:flex;align-items:end;color:#fff;font-weight:800;background:linear-gradient(135deg,#0b2b3e,#087f9e)}
.photo:nth-child(2){background:linear-gradient(135deg,#243d4d,#668697)}.photo:nth-child(3){background:linear-gradient(135deg,#123247,#075d7a)}.photo:nth-child(4){background:linear-gradient(135deg,#192832,#536c7b)}.photo:nth-child(5){background:linear-gradient(135deg,#0a2c40,#187b97)}.photo:nth-child(6){background:linear-gradient(135deg,#263b4a,#0c556c)}
.values{background:#edf4f7}.valuegrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#d7e2e8;margin-top:40px}.value{background:#fff;padding:28px}.value b{color:var(--blue)}
.youtube-section{background:#eaf3f7;padding:78px 0;border-top:1px solid #d7e2e8}.youtube-head{display:flex;justify-content:space-between;align-items:end;gap:40px}.youtube-head p{color:var(--muted)}.youtube-btn{display:inline-block;background:#ff4f55;color:#fff;text-decoration:none;padding:14px 20px;font-size:12px;font-weight:800;white-space:nowrap}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#03090f;overflow:hidden;margin-top:30px;box-shadow:0 18px 45px rgba(5,20,32,.15)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contact{background:#06111b;color:#fff}.contact p{color:#a0b2bf}.form{background:#fff;color:#102333;padding:30px}.form label{display:block;font-size:10px;font-weight:800;margin-bottom:13px}.form input,.form textarea{display:block;width:100%;padding:12px;border:1px solid #d6e0e7;margin-top:6px;font:inherit}.footer{background:#03090f;color:#758c9c;padding:25px 0}.footer .wrap{display:flex;justify-content:space-between;align-items:center;font-size:10px}.footer img{width:120px;height:60px;object-fit:contain}
@media(max-width:900px){.nav nav{gap:12px}.nav nav a:nth-child(1),.nav nav a:nth-child(2),.nav nav a:nth-child(3){display:none}.two{grid-template-columns:1fr;gap:40px}.grid,.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.top span:last-child{display:none}.nav nav{gap:8px}.nav .yt{font-size:0}.nav .yt:after{content:"▶ YouTube";font-size:11px}.grid,.gallery,.valuegrid{grid-template-columns:1fr}.project{grid-template-columns:38px 1fr}.project>div:last-child{display:none}.youtube-head{display:block}.youtube-btn{margin-top:18px;display:inline-block;white-space:normal}.footer .wrap{flex-direction:column;gap:10px;text-align:center}}

/* Compact YouTube player */
.video-frame.video-small{width:min(720px,100%);aspect-ratio:16/9;margin:24px auto 0}
.youtube-section .youtube-head{margin-bottom:20px}

/* Luxury inner-page experience */
.inner-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#06111b 0%,#0a2030 52%,#0d3a50 100%);color:#fff;padding:92px 0 82px}
.inner-hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(57,194,235,.16);border-radius:50%;right:-180px;top:-240px;box-shadow:0 0 0 70px rgba(57,194,235,.025),0 0 0 140px rgba(57,194,235,.018)}
.inner-hero .wrap{position:relative}
.inner-hero .eyebrow{color:#49c8ed}
.inner-hero h1{font-size:clamp(44px,6vw,74px);margin:15px 0 12px}
.inner-hero p{max-width:670px;color:#afc3cf;font-size:15px}
.breadcrumb{margin-top:28px;color:#738d9d;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
.lux-section{padding:95px 0;background:#fff}
.lux-section.soft{background:#f3f7f9}
.lux-section.dark{background:#071522;color:#fff}
.lux-section .eyebrow{margin-bottom:12px}
.lux-title{font-size:clamp(35px,4.5vw,58px);margin:0 0 20px}
.lux-title em{font-style:normal;color:#0a82c8}
.lux-intro{max-width:650px;color:#687987}
.lux-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}
.lux-card{position:relative;min-height:255px;padding:32px;background:#fff;border:1px solid #e1e9ee;transition:.25s;overflow:hidden}
.lux-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:#d7ad59;transition:.25s}
.lux-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(8,31,46,.10)}
.lux-card:hover:before{height:100%}
.lux-number{font:700 12px Manrope;color:#d7ad59;letter-spacing:1px}
.lux-card h3{font:700 22px Manrope;margin:40px 0 9px}
.lux-card p{color:#6b7c88;font-size:13px}
.lux-statbar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;border-top:1px solid #dbe4e9;border-bottom:1px solid #dbe4e9}
.lux-stat{padding:25px 15px;border-right:1px solid #dbe4e9}.lux-stat:last-child{border-right:0}
.lux-stat b{font:800 28px Manrope;color:#0a82c8}.lux-stat span{display:block;color:#728491;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-top:5px}
.project-lux{display:grid;grid-template-columns:90px 1fr 130px;align-items:center;gap:30px;padding:34px 0;border-bottom:1px solid #dbe3e8}
.project-lux:first-child{border-top:1px solid #dbe3e8}
.project-lux .no{font:800 34px Manrope;color:#d7ad59}
.project-lux small{font-size:10px;color:#0781c8;font-weight:800;letter-spacing:1.5px}
.project-lux h3{font:700 27px Manrope;margin:7px 0}.project-lux p{color:#687987;margin:0}
.project-lux .badge{justify-self:end;border:1px solid #cfdbe2;padding:9px 12px;font-size:9px;font-weight:800;letter-spacing:1px;color:#516674}
.gallery-lux{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-auto-rows:220px;gap:12px;margin-top:40px}
.gphoto{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b2b3d,#1284a2);color:#fff;padding:22px;display:flex;align-items:end;font:700 15px Manrope}
.gphoto:nth-child(1){grid-row:span 2}.gphoto:nth-child(2){background:linear-gradient(135deg,#203a4b,#607d8c)}.gphoto:nth-child(3){background:linear-gradient(135deg,#0d3145,#075d79)}.gphoto:nth-child(4){background:linear-gradient(135deg,#182936,#4e6878)}.gphoto:nth-child(5){background:linear-gradient(135deg,#0b293c,#1a7894)}
.gphoto:after{content:"VIEW";position:absolute;right:18px;top:18px;font:700 9px Inter;letter-spacing:1.5px;color:rgba(255,255,255,.7)}
.timeline{position:relative;margin-top:45px}.timeline:before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:#d7e1e7}.tl{position:relative;padding:0 0 35px 65px}.tl:before{content:"";position:absolute;left:17px;top:4px;width:10px;height:10px;border:3px solid #d7ad59;background:#fff;border-radius:50%}.tl b{color:#0781c8;font-size:11px;letter-spacing:1px}.tl h3{font:700 23px Manrope;margin:7px 0}.tl p{color:#687987}
.contact-lux{background:linear-gradient(130deg,#06111b,#0c2b3f);color:#fff;padding:95px 0}.contact-lux .lux-intro{color:#a8bbc6}.contact-box{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}.contact-list{margin-top:32px;display:grid;gap:16px}.contact-item{display:flex;gap:15px;align-items:flex-start}.contact-item .ico{width:36px;height:36px;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;color:#45c6ed}.contact-item small{display:block;color:#6f8999;font-size:9px;letter-spacing:1.5px;text-transform:uppercase}.contact-item a,.contact-item span{color:#d8e5eb;text-decoration:none;font-size:13px}.lux-form{background:#fff;padding:34px;color:#102333;box-shadow:0 22px 55px rgba(0,0,0,.2)}.lux-form label{display:block;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}.lux-form input,.lux-form textarea{width:100%;display:block;border:1px solid #d7e0e6;padding:12px;margin-top:6px;font:inherit}.lux-form .btn{border:0;cursor:pointer}
@media(max-width:800px){.lux-grid{grid-template-columns:1fr 1fr}.lux-statbar{grid-template-columns:1fr 1fr}.contact-box{grid-template-columns:1fr}.gallery-lux{grid-template-columns:1fr 1fr}.gphoto:nth-child(1){grid-row:span 1}}
@media(max-width:520px){.lux-grid,.gallery-lux{grid-template-columns:1fr}.lux-statbar{grid-template-columns:1fr}.lux-stat{border-right:0;border-bottom:1px solid #dbe4e9}.project-lux{grid-template-columns:45px 1fr}.project-lux .badge{display:none}}

/* Home animated project image slider */
.hero-slider{position:relative;width:100%;height:360px;margin:0 0 58px;overflow:hidden;background:#071522;border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 55px rgba(0,0,0,.24)}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background-size:cover;background-position:center}
.hero-slider .slide.active{opacity:1}
.hero-slider .slide:nth-child(1){background-image:linear-gradient(90deg,rgba(3,15,24,.68),rgba(3,15,24,.12)),url("assets/images/home-project-1.jpg")}
.hero-slider .slide:nth-child(2){background-image:linear-gradient(90deg,rgba(3,15,24,.68),rgba(3,15,24,.12)),url("assets/images/home-project-2.jpg")}
.hero-slider .slide:nth-child(3){background-image:linear-gradient(90deg,rgba(3,15,24,.68),rgba(3,15,24,.12)),url("assets/images/home-project-3.jpg")}
.slide-label{position:absolute;left:30px;bottom:28px;color:#fff;font:800 11px Inter;letter-spacing:2px}
.slider-controls{position:absolute;right:24px;bottom:20px;display:flex;align-items:center;gap:10px}
.slider-controls button{border:1px solid rgba(255,255,255,.3);background:rgba(3,15,24,.55);color:#fff;width:36px;height:36px;cursor:pointer}
.slider-controls .dot{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(255,255,255,.4);border:0}
.slider-controls .dot.active{background:#d7ad59}
.dots{display:flex;gap:7px;align-items:center}
@media(max-width:700px){.hero-slider{height:230px;margin-bottom:35px}.slide-label{left:18px;bottom:18px;font-size:9px}.slider-controls{right:14px;bottom:12px}}


/* ENTARI YouTube Error 153 fix / responsive sizing */
.video-frame.video-small{width:min(720px,100%);margin:24px auto 0;aspect-ratio:16/9;overflow:hidden;border-radius:14px;}
.video-frame.video-small iframe{width:100%;height:100%;display:block;border:0;}

/* =========================================================
   ENTARI - Global paragraph typography / readability
   Applies consistently to every page
   ========================================================= */
main p {
  margin-top: 0;
  margin-bottom: 18px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Intro paragraphs keep a comfortable reading width. */
.hero p,
.inner-hero p,
.lux-intro,
.youtube-head p {
  max-width: 720px;
}

/* Content blocks */
.copy p,
.lux-card p,
.project p,
.project-lux p,
.tl p,
.contact-item span {
  line-height: 1.8;
}

.copy p {
  margin-bottom: 20px;
}

.lux-card p,
.project p,
.project-lux p,
.tl p {
  margin-bottom: 0;
}

/* Keep very short labels/descriptions from looking stretched. */
.value p,
.lux-stat span,
.contact-item small,
.breadcrumb {
  text-align: left;
}

@media (max-width: 700px) {
  main p {
    line-height: 1.75;
    text-align: left;
  }

  .copy p {
    margin-bottom: 17px;
  }
}

/* =========================
   CONTACT MAP - CENTER
========================= */

.contact-map-section {
  padding: 70px 0;
  text-align: center;
}

.contact-map-section .lux-title,
.contact-map-section .lux-intro {
  text-align: center;
}

.entari-map {
  width: 100%;
  max-width: 900px;
  height: 300px;
  margin: 30px auto 0;
  overflow: hidden;
  border-radius: 16px;
  background: #eee;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}

.entari-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-action {
  margin-top: 20px;
  text-align: center;
}

@media (max-width: 768px) {

  .contact-map-section {
    padding: 50px 20px;
  }

  .entari-map {
    width: 100%;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
  }

}
  .entari-map iframe {
    min-height: 250px;
  }

}

/* =========================
   SERVICES WITH IMAGE
========================= */

.service-grid {
  align-items: stretch;
}

.service-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-image {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  background: #eee;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.07);
}

.service-overlay {
  position: absolute;
  right: 15px;
  bottom: 15px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(0,0,0,.75);
  color: #fff;

  font-size: 12px;
  font-weight: 700;
}

.service-content {
  padding: 25px;
  flex: 1;
}

.service-content h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.service-content p {
  margin-bottom: 0;
}

@media (max-width: 768px) {

  .service-image {
    height: 200px;
  }

  .service-content {
    padding: 20px;
  }
}
/* =========================================================
   ENTARI - PREMIUM VALUE CARDS
   2020 | K3 | EPC | ID
   ========================================================= */

.hero .valuegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
}

.hero .value {
    position: relative;
    overflow: hidden;

    min-height: 175px;
    padding: 28px 26px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dedede;
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Garis aksen di bagian atas */
.hero .value::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #111111;
}

/* Efek cahaya halus */
.hero .value::after {
    content: "";
    position: absolute;

    width: 90px;
    height: 90px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;
    background: rgba(0, 0, 0, 0.035);

    transition: transform 0.3s ease;
}

/* Hover */
.hero .value:hover {
    transform: translateY(-6px);

    border-color: #bcbcbc;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.12);
}

.hero .value:hover::after {
    transform: scale(1.5);
}

/* Angka utama */
.hero .value b {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 12px;

    color: #000000 !important;

    font-family: "Manrope", sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* Judul */
.hero .value h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 7px;

    color: #000000 !important;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

/* Deskripsi */
.hero .value p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #000000 !important;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

/* =========================================================
   DESKTOP - KARTU LEBIH ELEGAN
   ========================================================= */

@media (min-width: 1000px) {
    .hero .valuegrid {
        gap: 20px;
    }

    .hero .value {
        min-height: 185px;
        padding: 30px;
    }

    .hero .value b {
        font-size: 40px;
    }
}

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

@media (max-width: 800px) {
    .hero .valuegrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .hero .value {
        min-height: 155px;
        padding: 22px;
    }

    .hero .value b {
        font-size: 30px;
    }
}

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

@media (max-width: 520px) {
    .hero .valuegrid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hero .value {
        min-height: 145px;
        padding: 18px 16px;
        border-radius: 12px;
    }

    .hero .value b {
        font-size: 27px;
        margin-bottom: 9px;
    }

    .hero .value h3 {
        font-size: 14px;
    }

    .hero .value p {
        font-size: 11px;
        line-height: 1.5;
    }
}