/* ============================================================================
   GenZi Build — build.css
   Lapisan tipis di atas stylesheet situs induk (style.css).
   Tujuan: mewarisi bahasa visual genzicorp.com apa adanya, lalu menambah
   hanya komponen yang memang baru untuk halaman layanan GenZi Build.
   Dimuat SETELAH style.css, jadi aturan di sini menang pada spesifisitas yang
   sama. Semua override pada elemen bawaan memakai selektor turunan
   (.hero …, .site-foot …) supaya tetap menang atas aturan responsif induk.
   ========================================================================== */

/* ---------- 1. Ikon SVG (menggantikan glyph ↔ U+2197 yang tidak ada di subset font Manrope) ---------- */
.ico{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.button .ico{width:11px;height:11px;stroke-width:2.2}
.card-top .ico{width:11px;height:11px;color:#b9adcb}

/* ---------- 2. Header ---------- */
.header-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand-tag{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:#6b5a9e;background:#f2ecff;border:1px solid #e7dcfb;border-radius:999px;
  padding:5px 10px;margin-left:8px;align-self:center;line-height:1}
header .main-nav{font-weight:600;color:#4d4b57}
header .main-nav a{position:relative;padding:13px 0}

.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:44px;height:44px;padding:0;background:#fff;border:1px solid #e8e2f0;border-radius:12px;
  cursor:pointer;transition:border-color .2s,box-shadow .2s}
.nav-toggle:hover{border-color:#d9cbf3;box-shadow:0 8px 18px #9d86dd21}
.nav-toggle-bar{display:block;width:18px;height:2px;border-radius:2px;background:#5a4a86;
  transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-3px) rotate(-45deg)}

.mobile-nav{display:none}
@media(max-width:760px){
  header{height:78px}
  header .main-nav{display:none}
  .nav-toggle{display:flex}
  .mobile-nav{display:grid;gap:2px;margin:0 12px 8px;padding:14px;
    border:1px solid #ece4f8;border-radius:20px;background:rgba(255,255,255,.97);
    backdrop-filter:blur(18px);box-shadow:0 20px 44px #6b5aa826;position:relative;z-index:25}
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{font-size:14px;font-weight:600;padding:13px 10px;border-radius:12px}
  .mobile-nav a:hover{background:#f7f3ff;color:#8462cd}
  .mobile-nav .button{margin-top:10px;color:#fff}
  .mobile-nav .button:hover{background:linear-gradient(115deg,#8e59db,#7562e3)}
}
@media(max-width:620px){
  .brand-tag{font-size:8.5px;padding:4px 8px;letter-spacing:1px;margin-left:6px}
  .header-cta{display:none}
}

/* ---------- 3. Hero ---------- */
/* Proporsi hero disesuaikan dengan panjang judul Build (3 baris) supaya ukuran
   judul tetap besar seperti situs induk tanpa menabrak visual kanan. */
.hero .hero-copy{max-width:min(640px,47%)}
.hero h1{font-size:clamp(32px,4.1vw,59px);line-height:1.14;letter-spacing:-2.6px;
  font-weight:600;margin:26px 0 20px}
.hero .hero-copy>p{max-width:392px}
.hero .hero-copy>p.hero-micro{max-width:392px;font-size:11.5px;line-height:1.7;color:#7a7285;
  margin:18px 0 0;display:flex;align-items:center;gap:8px}
.hero .hero-copy>p.hero-micro::before{content:"";width:5px;height:5px;border-radius:50%;
  background:#a082e2;flex:0 0 5px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.button.ghost{background:#fff;color:#5a4a86;border:1px solid #e4daf5;box-shadow:0 10px 24px #9d86dd12}
.button.ghost:hover{box-shadow:0 12px 26px #aaa0e53d;border-color:#d5c6f2}
.button.ghost span{background:#f3eeff;color:#8462cd}

/* Visual kaca 3D: PNG punya alpha asli -> tanpa mix-blend-mode.
   Lebar visual sedikit lebih ramping dari situs induk (53% vs 57%) karena judul
   Build lebih panjang; aset jadi lebih kecil di bingkai supaya tepi kiri objek
   tetap bersih di samping teks pada 768-1240px. */
.hero .hero-art{width:53%}
.hero .hero-art img{width:86%;max-width:620px;mix-blend-mode:normal;object-fit:contain;
  filter:drop-shadow(0 24px 38px #a9a0de38);transform:rotate(4deg)}
.hero .hero-art picture{display:block}

@media(max-width:900px){
  .hero .hero-copy{max-width:50%}
  .hero h1{font-size:clamp(28px,4.3vw,40px);letter-spacing:-1.9px}
  .hero .hero-copy>p{max-width:340px}
  .hero .hero-art{width:48%}
  .hero .hero-art img{width:84%}
}
@media(min-width:621px) and (max-width:1279px){
  /* Di rentang ini kolom teks Build lebih lebar daripada hero situs induk (judul
     panjang), sementara komposisi visual hampir sama -> visual digeser sedikit ke
     kanan dan kolom teks dirampingkan agar tidak bersinggungan. */
  .hero .hero-art img{transform:translateX(5%) rotate(4deg)}
  .hero .hero-copy{max-width:min(600px,45%)}
}
@media(max-width:620px){
  .hero .hero-copy{max-width:100%}
  .hero h1{font-size:clamp(27px,7.6vw,34px);letter-spacing:-1.5px;margin:22px 0 18px}
  .hero-actions{gap:10px}
  .hero-actions .button{flex:1 1 100%;justify-content:space-between}
  .hero .hero-copy>p.hero-micro{margin-top:16px}
  .hero .hero-art{width:100%}
  .hero .hero-art img{width:88%}
  /* Label melayang ditarik masuk agar sudut kartu (yang diputar) tidak
     tersentuh tepi hero yang ber-overflow:hidden. */
  .hero .tag1{right:10px}
  .hero .tag2{left:12px}
}

/* ---------- 4. Layanan (4 kartu, desktop 2 x 2) ---------- */
.cards.build-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.build-card{display:flex;flex-direction:column}
.build-card .card-top{align-items:center}
.build-card h3{margin:20px 0 10px}
.build-card>p{max-width:430px;min-height:0}
.build-card .chips{margin:16px 0 18px}
.build-card .card-foot{margin-top:auto;padding-top:16px;align-items:center;gap:12px}
.build-card .card-foot>span{font-size:9px;letter-spacing:1.1px;color:#6f6880}
.build-card .card-foot a{width:auto;height:auto;border:0;border-radius:0;display:inline-flex;
  align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#7f6b99;text-align:right;
  transition:color .2s}
.build-card .card-foot a:hover,.build-card .card-foot a:focus-visible{color:var(--purple)}
@media(max-width:620px){
  .cards.build-grid{grid-template-columns:1fr;gap:16px}
  .build-card .card-foot{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- 5. Solusi ---------- */
.solutions>div>.button{margin-top:22px}
.solution-list>a{display:flex;gap:20px;align-items:center;border-bottom:1px solid #dbd0eb;
  padding:15px 0;transition:border-color .2s}
.solution-list>a:last-child{border-bottom:0}
.solution-list>a:hover strong,.solution-list>a:hover .ico{color:var(--purple)}
.solution-list>a:hover{border-color:#c3b1e6}
.solution-list>a .ico{align-self:center;color:#825fb3}
@media(max-width:620px){
  .solution-list>a{gap:14px;align-items:flex-start}
  .solution-list>a .ico{margin-top:4px}
}

/* ---------- 6. Cara kerja (4 tahap) ---------- */
.steps.steps-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media(max-width:1150px){.steps.steps-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media(max-width:620px){.steps.steps-4{grid-template-columns:1fr;gap:20px}}

/* ---------- 7. Konteks ekosistem ---------- */
.eco{margin:20px 56px 50px;text-align:center}
.eco>h2{font-size:clamp(24px,2.5vw,32px);letter-spacing:-1.4px;line-height:1.25;margin:18px 0 14px}
.eco>.intro{margin-bottom:30px}
.eco-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.eco-item{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid #ece6f7;
  border-radius:22px;background:radial-gradient(ellipse at 88% 8%,#f6f2ff 0,transparent 60%),#fdfcff;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.eco-item:hover{transform:translateY(-4px);border-color:#dccff3;box-shadow:0 16px 34px #9d86dd26}
.eco-item.is-active{border-color:#dbccf6;
  background:radial-gradient(ellipse at 88% 8%,#ece2ff 0,transparent 65%),#fbf9ff}
.eco-tag{font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#6b5a9e}
.eco-item p{margin:0;font-size:12.5px;line-height:1.8;color:var(--muted);flex:1}
.eco-go{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#5a4a86}
.eco-item:hover .eco-go{color:var(--purple)}
@media(max-width:900px){
  .eco{margin:20px 15px 40px}
  .eco-row{grid-template-columns:1fr;gap:14px}
}
@media(max-width:620px){
  .eco{margin:20px 0 40px}
  .eco>h2{letter-spacing:-1px}
  .eco-item{padding:20px}
}

/* ---------- 8. CTA penutup ---------- */
.cta-panel .cta-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.cta-panel .cta-micro{font-size:11.5px;line-height:1.8;color:#7d708f;margin:0;max-width:330px}
.cta-panel .button{align-self:stretch;justify-content:space-between}
@media(min-width:901px){.cta-panel .button{align-self:flex-start;min-width:280px}}
@media(max-width:620px){.cta-panel .cta-micro{max-width:none}}

/* ---------- 9. Footer ---------- */
.site-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;
  padding:46px 20px 34px;font-size:11px;color:#7b7289}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid #f2edfa;padding-bottom:24px}
.foot-top .brand{font-size:26px;letter-spacing:-1.3px;gap:5px}
.foot-top p{margin:0;text-align:right;line-height:1.8}
.foot-top small{font-size:9px;letter-spacing:.4px;color:#756d80}

.site-foot .foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  font-size:11px;max-width:660px;color:#7b7289}
.site-foot h4{margin:0 0 12px;font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:#6f6880}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot li{margin:0}
.site-foot .foot-cols a{color:#5f596e;font-weight:600;display:inline-flex;align-items:center}
.site-foot .foot-cols a:hover{color:var(--purple)}

.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid #f2edfa;padding-top:22px;font-size:10.5px;color:#756d80}
.foot-bottom a{font-weight:600;color:#6f6880}
.foot-bottom a:hover{color:var(--purple)}

@media(max-width:900px){
  .site-foot .foot-cols{max-width:none}
}
@media(max-width:620px){
  .site-foot{padding:34px 20px 28px;gap:22px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-top p{text-align:left}
  .site-foot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- 10. Motion & cetak ---------- */
@media(prefers-reduced-motion:reduce){
  .nav-toggle-bar,.service,.eco-item,.note-card{transition:none}
  .service:hover,.eco-item:hover{transform:none}
}
@media print{
  header,.mobile-nav,.hero-art,.eco,.cta-panel,.contact,.faq{display:none}
}