/* ==========================================================================
   Upadana Semesta — skin 2026 untuk halaman CMS (Lumonata)
   Dimuat SETELAH master.css. Berlaku pada semua halaman CMS (scope body:has(#menu-hero));
   homepage statis /home-2026/ tidak terpengaruh. Token mengikuti homepage.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@300;400;500&display=swap");

:root{
  --ground:#faf9f7; --surface:#f1eee9; --ink:#2b2b2b; --ink-muted:#5f5b56; --hairline:#d9d4cc; --hairline-strong:#8f8a83;
  --gold:#cea549; --gold-deep:#8c6d22; --sand:#c8b9a6; --obsidian:#141210; --paper:#faf9f7;
  --display:"Cormorant Garamond","Times New Roman",serif; --body:"Manrope",system-ui,-apple-system,sans-serif;
  --edge:clamp(20px,4vw,56px);
}

/* ---------- Dasar: warna latar, font ---------- */
body:has(#menu-hero){background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body:has(#menu-hero) *{font-family:var(--body)}
body:has(#menu-hero) h1,body:has(#menu-hero) h2,body:has(#menu-hero) h3{font-family:var(--display);font-weight:400}
body:has(#menu-hero) .container-content{width:auto;max-width:none;margin:0;padding:0 var(--edge)}
body:has(#menu-hero) .main-line{border-top:1px solid var(--hairline)}
body:has(#menu-hero) :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Nav atas ---------- */
body:has(#menu-hero) #menu-hero{box-sizing:border-box;left:0;right:0;width:auto;height:72px;background:var(--obsidian);box-shadow:none;border-bottom:1px solid rgba(250,249,247,.08);align-items:center;padding:0 var(--edge)}
body:has(#menu-hero) .top-helper{padding-top:72px}
body:has(#menu-hero) .hero-logo,body:has(#menu-hero) .res-logo{position:static;width:auto;height:auto;background:transparent;box-shadow:none;left:auto;transition:none}
body:has(#menu-hero) .hero-logo{display:block}
body:has(#menu-hero) .res-logo{display:none}
body:has(#menu-hero) .hero-logo a{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;color:var(--paper);font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.03em;line-height:1}
body:has(#menu-hero) .hero-logo a::before{content:"";width:44px;height:44px;background:url("/home-2026/images/logo-white.png") center/contain no-repeat}
body:has(#menu-hero) .hero-logo a::after{content:"Upadana Semesta"}
body:has(#menu-hero) .hero-logo img{display:none}
body:has(#menu-hero) #menu-hero .theMenu li{margin-left:44px;line-height:72px}
body:has(#menu-hero) #menu-hero .theMenu li a{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);transition:color .3s}
body:has(#menu-hero) #menu-hero .theMenu li a:hover{color:var(--sand)}
body:has(#menu-hero) #menu-hero .theMenu li:last-child{background:transparent;margin-left:44px}
body:has(#menu-hero) #menu-hero .theMenu li:last-child:hover{background:transparent}
body:has(#menu-hero) #menu-hero .theMenu li:last-child a{padding:0 0 6px;border-bottom:1px solid var(--sand)}
body:has(#menu-hero) #menu-hero .theMenu li.active a{color:var(--sand)}
body:has(#menu-hero) .burger-button{margin-right:0}
body:has(#menu-hero) .theburger,body:has(#menu-hero) .theburger::after{background-color:var(--paper)}
body:has(#menu-hero) .theburger{width:24px;height:1px;top:36px}
body:has(#menu-hero) .theburger::after{margin-left:0;padding-left:24px;padding-top:1px;margin-top:6px}

/* menu mobile */
body:has(#menu-hero) .tm-menu{background:rgba(20,18,16,.97)}
body:has(#menu-hero) .tm-menu .theMenu li a{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
body:has(#menu-hero) .tm-menu .theMenu li{margin-bottom:0;padding:16px 0;border-bottom:1px solid rgba(250,249,247,.12)}
body:has(#menu-hero) .tm-menu .theMenu{margin:16px var(--edge) 0}

/* ---------- Judul proyek + data ---------- */
body:has(#menu-hero) .head-detail-project{padding:clamp(56px,9vh,96px) 0 40px;max-width:1440px;margin:0 auto;gap:48px;align-items:flex-end}
body:has(#menu-hero) .head-detail-project h1{color:var(--ink);font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:.005em;max-width:14ch;font-weight:400}
body:has(#menu-hero) .head-detail-project h1::before{content:"Project";display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
body:has(#menu-hero) .content-detail-project{width:46%;padding-top:0}
body:has(#menu-hero) .content-detail-project>p{color:var(--ink-muted);font-size:15px;line-height:1.7;margin-bottom:24px;max-width:52ch}
body:has(#menu-hero) .additional-field-dt{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
body:has(#menu-hero) .head-detail-project .additional-field-dt p{margin:0;padding-top:12px;border-top:1px solid var(--hairline);color:var(--ink);font-size:15px;line-height:1.5}
body:has(#menu-hero) .additional-field-dt p strong{display:block;font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
body:has(#menu-hero) #detail-project .main-line{display:none}

/* ---------- Galeri: grid acak dipertahankan, dibuat full-bleed ---------- */
body:has(#menu-hero) #detail-project{padding-left:0;padding-right:0}
body:has(#menu-hero) .head-detail-project{padding-left:var(--edge);padding-right:var(--edge)}
body:has(#menu-hero) .gallery-project{width:100%;margin-top:40px;background:var(--ground)}
body:has(#menu-hero) .gutter-sizer{width:.14%}
body:has(#menu-hero) .card-project-gale{background:var(--surface);margin-bottom:2px;max-height:none}
body:has(#menu-hero) .gale-1,body:has(#menu-hero) .gale-5{width:59.93%;padding-top:59.93%}
body:has(#menu-hero) .gale-2,body:has(#menu-hero) .gale-3,body:has(#menu-hero) .gale-4,body:has(#menu-hero) .gale-6{width:39.93%;padding-top:29.8%}
body:has(#menu-hero) .card-project-gale a{position:absolute;inset:0;display:block;overflow:hidden}
body:has(#menu-hero) .card-project-gale img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
body:has(#menu-hero) .card-project-gale:hover img{transform:scale(1.045)}

/* ---------- Karya lain ---------- */
body:has(#menu-hero) [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
body:has(#menu-hero) #other-work{margin-top:2px;height:auto;background:var(--surface);padding:clamp(56px,8vh,88px) 0}
body:has(#menu-hero) #other-work .container-content{position:static;top:auto;max-width:1440px;margin:0 auto}
body:has(#menu-hero) #other-work h2{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);padding-bottom:28px}
body:has(#menu-hero) .container-card-ow{grid-template-columns:repeat(3,1fr);grid-gap:2px}
body:has(#menu-hero) .card-other-work a{display:block;position:relative;overflow:hidden;color:var(--paper)}
body:has(#menu-hero) .figure-ow{padding-top:100%;background-color:var(--obsidian);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
body:has(#menu-hero) .card-other-work a:hover .figure-ow{transform:scale(1.045)}
body:has(#menu-hero) .figure-content-ow{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 18px;background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.65))}
body:has(#menu-hero) #other-work h3{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.7vw,24px);line-height:1.15;color:var(--paper)}

/* ---------- Banner kontak → gaya CTA homepage ---------- */
body:has(#menu-hero) #contact_banner{height:auto;background:var(--ground) none;padding:clamp(88px,12vh,140px) var(--edge);align-items:center;justify-content:flex-start}
body:has(#menu-hero) .cb-con{width:100%;max-width:1440px;margin:0 auto;text-align:left}
body:has(#menu-hero) .cb-con h3{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,64px);line-height:1.04;color:var(--ink);margin:0}
body:has(#menu-hero) .cb-con br{display:none}
body:has(#menu-hero) .cb-con span{display:block;margin-top:16px;font-size:15px;color:var(--ink-muted)}
body:has(#menu-hero) .cb-btn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;line-height:1;padding:16px 28px;margin-top:28px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--obsidian);transition:background .3s,color .3s}
body:has(#menu-hero) .cb-btn:hover,body:has(#menu-hero) .default-button-hover:hover{background:var(--gold-deep);color:var(--paper)}

/* ---------- Footer ---------- */
body:has(#menu-hero) footer{padding:40px var(--edge);border-top:1px solid var(--hairline);max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;font-size:13px;color:var(--ink-muted)}
body:has(#menu-hero) .footer-logo{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink);line-height:1}
body:has(#menu-hero) .footer-logo::before{content:"";width:40px;height:40px;background:#fff url("/home-2026/images/logo.png") center/cover no-repeat;border-radius:999px}
body:has(#menu-hero) .footer-logo::after{content:"Upadana Semesta"}
body:has(#menu-hero) .footer-logo img{display:none}
body:has(#menu-hero) .footer-content{width:auto;flex:1;justify-content:flex-end;gap:64px}
body:has(#menu-hero) .fcon h4{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);padding-bottom:12px}
body:has(#menu-hero) .fcon p,body:has(#menu-hero) .sub-fcon .theMenu li a,body:has(#menu-hero) .footer-content a{color:var(--ink);font-size:13px;margin-bottom:6px}
body:has(#menu-hero) .footer-content a:hover{color:var(--gold-deep);text-decoration:none}
body:has(#menu-hero) .ft2 .sub-fcon:first-child{margin-right:64px}
body:has(#menu-hero) footer .tm-sosmed img{opacity:.7}

/* ---------- Responsif ---------- */
@media (max-width:1025px){
  body:has(#menu-hero) .head-detail-project{display:block}
  body:has(#menu-hero) .content-detail-project{width:100%;margin-top:32px}
}
@media (max-width:820px){
  body:has(#menu-hero) .hero-logo a{font-size:18px}
  body:has(#menu-hero) .hero-logo a::before{width:34px;height:34px}
  body:has(#menu-hero) .container-card-ow{grid-template-columns:repeat(2,1fr);grid-gap:2px;min-width:0;display:grid}
  body:has(#menu-hero) .card-other-work{width:auto;padding-left:0}
  /* netralkan slider slick (master.js) di layar kecil → tetap grid */
  body:has(#menu-hero) .container-card-ow .slick-list,body:has(#menu-hero) .container-card-ow .slick-track{display:contents}
  body:has(#menu-hero) .container-card-ow .slick-track::before,body:has(#menu-hero) .container-card-ow .slick-track::after{display:none;content:none}
  body:has(#menu-hero) .container-card-ow .slick-slide{float:none;width:auto!important;min-height:0}
  body:has(#menu-hero) #other-work .container-content h2{padding-left:0}
  body:has(#menu-hero) footer{flex-direction:column;gap:24px}
  body:has(#menu-hero) .footer-content{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:32px}
  body:has(#menu-hero) .ft1,body:has(#menu-hero) .ft2,body:has(#menu-hero) .footer-logo{width:auto;margin:0}
}
@media (max-width:513px){
  /* HP: tile besar selebar layar, tile kecil 2 kolom (seperti galeri homepage) */
  body:has(#menu-hero) .gutter-sizer{width:.54%}
  body:has(#menu-hero) .gale-1,body:has(#menu-hero) .gale-5{width:100%;padding-top:66%}
  body:has(#menu-hero) .gale-2,body:has(#menu-hero) .gale-3,body:has(#menu-hero) .gale-4,body:has(#menu-hero) .gale-6{width:49.73%;padding-top:37.3%}
  body:has(#menu-hero) .additional-field-dt{grid-template-columns:1fr}
  body:has(#menu-hero) .container-content{width:auto}
}
/* ==========================================================================
   LISTING PROYEK /project/ (Our Work) — grid kartu full-bleed 4 kolom
   ========================================================================== */
body:has(#the-projects) .header_page{display:none}
body:has(#the-projects) #the-projects{padding:calc(72px + clamp(56px,9vh,96px)) var(--edge) 40px;margin:0 auto;max-width:1440px}
body:has(#the-projects) #the-projects h1{color:var(--ink);font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:.005em;font-weight:400}
body:has(#the-projects) #the-projects h1::before{content:"Projects";display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
body:has(#the-projects) .filter-project{margin-top:12px}
body:has(#the-projects) .filter-project>p{color:var(--ink-muted);font-size:15px}
body:has(#the-projects) #the-projects hr{display:none}
body:has(#the-projects) .conforproject.container-content{padding:0;margin:0 0 2px}
body:has(#the-projects) .the-project{width:100%}
body:has(#the-projects) .gutter-sizers{width:.133%}
body:has(#the-projects) .the-project .card-project{box-sizing:border-box;width:24.9%;height:auto;aspect-ratio:1/1;margin:0 0 2px;padding:0;position:relative;overflow:hidden;background-color:var(--surface);transition:none}
body:has(#the-projects) .card-project::before{content:"";position:absolute;inset:0;background:inherit;background-position:center;background-size:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
body:has(#the-projects) .card-project:hover::before{transform:scale(1.045)}
body:has(#the-projects) .card-project>p{display:none}
body:has(#the-projects) .figcapt-display{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 18px;background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.65));opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
body:has(#the-projects) .card-project:hover .figcapt-display{opacity:1;transform:none}
body:has(#the-projects) .figcapt-display h2{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.7vw,24px);line-height:1.15;color:var(--paper);padding:0}
body:has(#the-projects) .figcapt-display h2::after{content:"View project →";display:block;margin-top:8px;font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
body:has(#the-projects) .figcapt-display span{display:none}
@media (hover:none){
  body:has(#the-projects) .figcapt-display{opacity:1;transform:none;padding:36px 14px 12px}
  body:has(#the-projects) .figcapt-display h2::after{display:none}
  body:has(#the-projects) .card-project:hover::before{transform:none}
}
@media (max-width:1024px){
  body:has(#the-projects) .gutter-sizers{width:.2%}
  body:has(#the-projects) .the-project .card-project{width:33.2%}
}
@media (max-width:820px){
  body:has(#the-projects) .gutter-sizers{width:.4%}
  body:has(#the-projects) .the-project .card-project{width:49.8%;height:auto}
}
/* ==========================================================================
   ABOUT US (#about / .hero-about, #visi-misi, #company-value, #team)
   ========================================================================== */
body:has(#menu-hero) #about{background-image:none;padding:calc(72px + clamp(56px,9vh,96px)) 0 clamp(56px,8vh,88px)}
body:has(#menu-hero) .hero-about{max-width:1440px;margin:0 auto}
body:has(#menu-hero) .hero-about h1{color:var(--ink);font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:.005em;width:auto;max-width:16ch;padding-bottom:16px;font-weight:400}
body:has(#menu-hero) #about:not(.service-ss) .hero-about h1::before{content:"About";display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
body:has(#menu-hero) .tambahan-title{display:block;padding:0;font-family:var(--display);font-style:italic;font-size:clamp(20px,2vw,26px);color:var(--ink-muted);max-width:40ch}
body:has(#menu-hero) .hero-about hr{margin:32px 0 40px;border-top:1px solid var(--hairline)}
body:has(#menu-hero) .hero-about p{width:auto;max-width:62ch;font-size:16px;line-height:1.7;color:var(--ink-muted);margin:0 0 16px}
body:has(#menu-hero) .hero-about p em{font-style:normal;color:var(--ink)}
body:has(#menu-hero) .hero-about p strong,body:has(#menu-hero) .hero-about strong{display:block;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.15;color:var(--ink);letter-spacing:.01em;margin:8px 0 10px}
body:has(#menu-hero) .hero-about p strong em{font-style:normal}
body:has(#menu-hero) .hero-about pre{display:none}
body:has(#menu-hero) #visi-misi{padding:clamp(72px,10vh,120px) var(--edge);background-color:var(--obsidian)}
body:has(#menu-hero) #visi-misi .img-helper{background:rgba(20,18,16,.82)}
body:has(#menu-hero) .vimi{max-width:1440px;margin:0 auto;padding:0}
body:has(#menu-hero) #visi-misi span{display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
body:has(#menu-hero) #visi-misi span+br{display:none}
body:has(#menu-hero) .vimi h2{font-size:clamp(32px,4vw,56px);width:auto;max-width:18ch;line-height:1.08;color:var(--paper);padding:14px 0 clamp(56px,8vh,96px);letter-spacing:.02em}
body:has(#menu-hero) .mission{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:auto}
body:has(#menu-hero) .card-mission{width:auto;height:auto;background:rgba(250,249,247,.06);padding:28px 24px 32px;border-top:1px solid rgba(250,249,247,.18)}
body:has(#menu-hero) .card-mission p{color:var(--paper);font-size:16px;line-height:1.6;font-weight:300}
body:has(#menu-hero) #company-value{padding:clamp(56px,8vh,88px) var(--edge);background:var(--surface)}
body:has(#menu-hero) .comva{max-width:1440px;margin:0 auto;padding:0;gap:48px;align-items:flex-start}
body:has(#menu-hero) .comva .card-comva:first-child{width:60%}
body:has(#menu-hero) .comva .card-comva:first-child h2{font-size:clamp(32px,3.6vw,48px);color:var(--ink);padding-bottom:12px;line-height:1.08}
body:has(#menu-hero) .comva .card-comva:first-child p{font-size:14px;color:var(--ink-muted);letter-spacing:.04em;line-height:1.7}
body:has(#menu-hero) .comva .card-comva:last-child h3{font-size:clamp(22px,2.2vw,30px);color:var(--ink);padding:10px 0 0;border-top:1px solid var(--hairline);margin-top:10px}
body:has(#menu-hero) .comva .card-comva:last-child h3:first-child{border-top:0;margin-top:0;padding-top:4px}
body:has(#menu-hero) #team{padding:clamp(56px,8vh,88px) var(--edge)}
body:has(#menu-hero) .the-team{max-width:1440px;margin:0 auto;padding:0}
body:has(#menu-hero) #team span{display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
body:has(#menu-hero) #team span+br{display:none}
body:has(#menu-hero) .team-container{margin:20px 0 0;grid-template-columns:repeat(3,1fr);grid-gap:2px;justify-content:stretch}
body:has(#menu-hero) .card-team{height:auto;background:var(--surface);padding:24px 22px 26px;border-top:1px solid var(--hairline)}
body:has(#menu-hero) .card-team h3{font-size:clamp(20px,1.8vw,26px);color:var(--ink);padding-bottom:4px}
body:has(#menu-hero) #team .card-team p{color:var(--ink-muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
body:has(#menu-hero) .team-hero-pict{display:none} /* foto stok 'tangan' tidak sesuai brand; hapus baris ini bila ingin tampil (tinggi 56vh) */

/* ==========================================================================
   SERVICES (#service-header + #about.service-ss)
   ========================================================================== */
body:has(#menu-hero) #service-header.header_page{display:block;height:clamp(320px,56vh,640px);margin:0;padding-top:0;position:relative}
body:has(#menu-hero) #service-header.header_page::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.35),rgba(20,18,16,0) 40%)}
body:has(#menu-hero) #about.service-ss{padding:clamp(56px,9vh,96px) 0 0;background-size:0}
body:has(#menu-hero) #about.service-ss .hero-about h1::before{content:"What we do";display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
body:has(#menu-hero) #about.service-ss .hero-about p{max-width:70ch;margin-bottom:12px;text-align:left!important}

/* ==========================================================================
   CONTACT US (#header-kontak, form.form-contact, #map)
   ========================================================================== */
body:has(#menu-hero) #header-kontak{padding:calc(72px + clamp(56px,9vh,96px)) var(--edge) 32px;text-align:left;max-width:1440px;margin:0 auto}
body:has(#menu-hero) #header-kontak h1{color:var(--ink);font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:.005em;padding-bottom:16px;font-weight:400}
body:has(#menu-hero) #header-kontak h1::before{content:"Contact";display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
body:has(#menu-hero) #header-kontak span,body:has(#menu-hero) #header-kontak p,body:has(#menu-hero) #header-kontak a{font-size:15px;color:var(--ink-muted)}
body:has(#menu-hero) #header-kontak a{color:var(--ink)}
body:has(#menu-hero) #header-kontak a:hover{color:var(--gold-deep);text-decoration:none}
body:has(#menu-hero) .additional-contact{margin:20px 0 28px;justify-content:flex-start;gap:12px 48px}
body:has(#menu-hero) .additional-contact p{width:auto;text-align:left!important;padding:0!important;margin:0!important}
body:has(#menu-hero) form.form-contact{max-width:1440px;margin:0 auto;padding:16px var(--edge) clamp(72px,10vh,120px)}
body:has(#menu-hero) .container-input{margin-bottom:48px}
body:has(#menu-hero) .group-lb label{left:0;white-space:nowrap;border-bottom:0!important}
body:has(#menu-hero) .container-input input,body:has(#menu-hero) .form-contact textarea,body:has(#menu-hero) .form-contact label{border-bottom:1px solid var(--hairline-strong);font-size:16px;color:var(--ink-muted);padding-left:0;font-family:var(--body);font-weight:300}
body:has(#menu-hero) .container-input input,body:has(#menu-hero) .form-contact textarea{color:var(--ink)}
body:has(#menu-hero) .container-input input:focus,body:has(#menu-hero) .form-contact textarea:focus{border-bottom-color:var(--gold)}
body:has(#menu-hero) input:focus ~ label,body:has(#menu-hero) input:valid ~ label,body:has(#menu-hero) textarea:focus ~ label,body:has(#menu-hero) textarea:valid ~ label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);top:-20px}
body:has(#menu-hero) .container-btn .btn-send{width:auto;height:auto;line-height:1;padding:16px 28px;margin-left:24px;font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--obsidian);display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .3s,color .3s}
body:has(#menu-hero) .container-btn .btn-send:hover{background:var(--gold-deep);color:var(--paper)}
body:has(#menu-hero) #map{height:clamp(320px,56vh,600px);filter:grayscale(1) contrast(.95);background:var(--surface)}
body:has(#menu-hero) .alert-card h4,body:has(#menu-hero) .alert-card span{color:var(--ink)}
body:has(#menu-hero) .alert-close{background:var(--obsidian);border-color:var(--gold)}
body:has(#menu-hero) #sec-404{background:var(--obsidian)}

@media (max-width:920px){
  body:has(#menu-hero) .mission{grid-template-columns:1fr}
  body:has(#menu-hero) .comva{display:block}
  body:has(#menu-hero) .comva .card-comva:first-child{width:100%;margin-bottom:24px}
  body:has(#menu-hero) .comva .card-comva:last-child{display:block}
  body:has(#menu-hero) .comva .card-comva:last-child h3{font-size:22px}
}
@media (max-width:817px){
  body:has(#menu-hero) .team-container{grid-template-columns:1fr 1fr;grid-gap:2px}
}
@media (max-width:750px){
  body:has(#menu-hero) .container-btn{align-items:flex-start}
  body:has(#menu-hero) .container-btn .btn-send{margin:16px 0 0}
}
@media (max-width:587px){
  body:has(#menu-hero) .team-container{grid-template-columns:1fr}
  body:has(#menu-hero) .container-btn .btn-send{width:auto;height:auto;line-height:1}
}
/* ==========================================================================
   HEADER = HOMEPAGE: menu di tengah, EN | ID + Enquire + burger di kanan,
   tombol WhatsApp melayang, teks dwibahasa (diisi oleh js/theme-2026.js)
   ========================================================================== */
body:has(#menu-hero) #menu-hero{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:normal;gap:24px}
body:has(#menu-hero) #menu-hero .hero-logo{grid-column:1;justify-self:start}
body:has(#menu-hero) #menu-hero .theMenu{grid-column:2;justify-self:center;display:flex;gap:44px}
body:has(#menu-hero) #menu-hero .theMenu li{margin:0;line-height:72px}
body:has(#menu-hero) #menu-hero .theMenu li:last-child{margin:0}
body:has(#menu-hero) #menu-hero .theMenu li:last-child a{padding:0;border-bottom:0}
body:has(#menu-hero) #menu-hero .theMenu li.projects{order:1}
body:has(#menu-hero) #menu-hero .theMenu li.services{order:2}
body:has(#menu-hero) #menu-hero .theMenu li.about-us{order:3}
body:has(#menu-hero) #menu-hero .theMenu li.contact-us{order:4}
body:has(#menu-hero) #menu-hero .theMenu li.whatsapp{display:none}
body:has(#menu-hero) .m26-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:28px;color:var(--paper)}
body:has(#menu-hero) .m26-right .lang{background:none;border:0;color:inherit;cursor:pointer;padding:6px 0;display:flex;gap:8px;font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
body:has(#menu-hero) .m26-right .lang i{font-style:normal;opacity:.5}
body:has(#menu-hero) .m26-right .lang span{opacity:.55}
body:has(#menu-hero) .m26-right .lang span.on{opacity:1;border-bottom:1px solid var(--gold);padding-bottom:2px}
body:has(#menu-hero) .m26-right .lk{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);padding-bottom:8px;border-bottom:1px solid var(--sand);transition:color .3s}
body:has(#menu-hero) .m26-right .lk::after{content:"→";color:var(--gold);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
body:has(#menu-hero) .m26-right .lk:hover{color:var(--sand)}
body:has(#menu-hero) .m26-right .lk:hover::after{transform:translateX(6px)}
body:has(#menu-hero) .m26-right .burger-button{margin:0;height:auto}
body:has(#menu-hero) .m26-right .theburger{top:0;margin:14px 0}
body:has(#menu-hero) .wa-float{position:fixed;right:20px;bottom:20px;z-index:20;width:52px;height:52px;border-radius:999px;background:var(--obsidian);color:var(--paper);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);transition:background .3s}
body:has(#menu-hero) .wa-float:hover{background:var(--gold-deep);color:var(--paper)}
body:has(#menu-hero) .wa-float svg{display:block}
/* mobile menu: urutan sama, WhatsApp tetap ada */
body:has(#menu-hero) .tm-menu .theMenu{display:flex;flex-direction:column}
body:has(#menu-hero) .tm-menu .theMenu li.projects{order:1}
body:has(#menu-hero) .tm-menu .theMenu li.services{order:2}
body:has(#menu-hero) .tm-menu .theMenu li.about-us{order:3}
body:has(#menu-hero) .tm-menu .theMenu li.contact-us{order:4}
body:has(#menu-hero) .tm-menu .theMenu li.whatsapp{order:5}
/* teks kecil berganti bahasa (html[lang]) */
html[lang="id"] body:has(#menu-hero) .head-detail-project h1::before{content:"Proyek"}
html[lang="id"] body:has(#menu-hero) #the-projects h1::before{content:"Proyek"}
html[lang="id"] body:has(#menu-hero) #about:not(.service-ss) .hero-about h1::before{content:"Tentang"}
html[lang="id"] body:has(#menu-hero) #about.service-ss .hero-about h1::before{content:"Layanan kami"}
html[lang="id"] body:has(#menu-hero) #header-kontak h1::before{content:"Kontak"}
html[lang="id"] body:has(#menu-hero) .figcapt-display h2::after{content:"Lihat proyek →"}
html[lang="id"] body:has(#menu-hero) .tile .cap i{content:"Lihat proyek"}
/* About & Services: tampilkan paragraf sesuai bahasa (EN = paragraf ber-<em>, ID = paragraf polos) */
html[lang="id"] body:has(#menu-hero) #about .hero-about p.m26-en{display:none}
html[lang="en"] body:has(#menu-hero) #about .hero-about p.m26-id{display:none}
html[lang="id"] body:has(#menu-hero) #about .hero-about p{color:var(--ink)}
@media (max-width:1025px){
  body:has(#menu-hero) #menu-hero{grid-template-columns:1fr auto}
  body:has(#menu-hero) #menu-hero .theMenu{display:none}
  body:has(#menu-hero) .m26-right{grid-column:2}
}
body:has(#menu-hero) #mobile-menu .tm-menu{background:var(--obsidian)}
body:has(#menu-hero) .hero-logo a::after{white-space:nowrap}
@media (max-width:820px){
  body:has(#menu-hero) .m26-right{gap:20px}
  body:has(#menu-hero) .m26-right .lk{display:none}
}