*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
body{
font-family:'Inter','Segoe UI',Arial,sans-serif;
color:#252b36;background:#fff;line-height:1.7;font-size:16.5px;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
:root{
--navy:#001c49;
--navy-2:#06264f;
--navy-3:#00133a;
--bayang:0 1px 2px rgba(0,28,73,.04),0 8px 24px rgba(0,28,73,.07);
--bayang-kuat:0 18px 44px rgba(0,28,73,.14);
--orange:#f26122; /* isian/aksen sahaja */
--orange-teks:#c2410c; /* oren untuk TEKS atas latar cerah (5.2:1) */
--orange-light:#f5804f; /* oren untuk teks atas latar navy */
--light:#f5f5f5;
--grey-text:#5b6270;
--line:#dfe3e8;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.4px;line-height:1.18;font-weight:700;}
::selection{background:var(--orange);color:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
section{padding:80px 0;}
.eyebrow{color:var(--orange-teks);text-transform:uppercase;letter-spacing:2.8px;font-size:12px;font-weight:700;display:inline-block;}
.hero .eyebrow,.content-band .eyebrow,.plan .eyebrow{color:var(--orange-light);}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px;}
.section-head h2{font-size:38px;margin:14px 0 16px;}
.section-head p{color:var(--grey-text);}
.rule{width:64px;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));margin:20px auto 0;border-radius:2px;}
.lead{font-size:17px;color:var(--grey-text);}
/* ---- SLOT GAMBAR: kotak bertanda, ganti dengan ![]()
bila gambar siap ---- */
.ph{
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background:repeating-linear-gradient(135deg,#eceef2 0 10px,#e2e6ec 10px 20px);
border:2px dashed var(--orange);color:#7d8698;
font-size:12px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;
padding:16px;min-height:120px;
}
.ph small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:11.5px;margin-top:6px;color:#98a1b2;}
.ph-dark{background:repeating-linear-gradient(135deg,#0a2350 0 10px,#0d2a5c 10px 20px);color:#8ea0bd;}
/* ---- BUTANG ---- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 28px;border-radius:4px;font-size:13.5px;font-weight:700;
letter-spacing:.6px;cursor:pointer;border:1px solid transparent;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
font-family:'Inter','Segoe UI',Arial,sans-serif;
}
.btn-orange{background:var(--orange);color:#10131a;box-shadow:0 4px 14px rgba(242,97,34,.34);}
.btn-orange:hover{background:var(--orange-light);transform:translateY(-2px);box-shadow:0 8px 22px rgba(242,97,34,.42);}
.btn-orange:active{transform:translateY(0);}
.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{border-color:var(--orange-light);color:var(--orange-light);background:rgba(242,97,34,.08);}
.btn-dark{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(0,28,73,.3);}
.btn-dark:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,28,73,.38);}
.btn-dark:active{transform:translateY(0);}
.btn-block{width:100%;}
/* Butang WhatsApp guna hijau jenama supaya dikenali serta-merta dan tidak
bersaing dengan CTA oren. Teks GELAP, bukan putih: putih di atas #25d366
hanya 1.98:1 dan gagal WCAG teruk; teks gelap memberi 9.4:1. */
.btn-wa{background:#25d366;color:#10131a;box-shadow:0 4px 14px rgba(37,211,102,.34);}
.btn-wa:hover{background:#1fbe5c;transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,211,102,.44);}
.btn-wa:active{transform:translateY(0);}
/* ---- HEADER ---- */
header{position:sticky;top:0;z-index:50;background:rgba(0,28,73,.97);
backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid rgba(255,255,255,.09);
box-shadow:0 2px 20px rgba(0,10,30,.18);}
.nav-wrap{display:flex;align-items:center;gap:20px;padding:12px 24px;max-width:1180px;margin:0 auto;}
/* Turutan visual ditetapkan dengan order, bukan susunan dalam markup:
brand | nav | bahasa | CTA | hamburger. Pada mudah alih nav keluar daripada
aliran (absolute), jadi yang tinggal ialah brand | bahasa | hamburger. */
.brand{margin-right:auto;order:1;}
nav{order:2;}
.lang-switch{order:3;}
.menu-toggle{order:5;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;}
.brand-ph{
height:42px;min-width:132px;border:1px dashed var(--orange);color:var(--orange);
display:flex;align-items:center;justify-content:center;
font-size:10px;letter-spacing:1px;font-weight:700;padding:0 10px;text-align:center;
}
nav ul{display:flex;gap:26px;}
nav a{color:#e8e4de;font-size:13px;font-weight:600;letter-spacing:.5px;transition:color .2s;}
nav a:hover{color:var(--orange-light);}
.nav-wa{display:none;}
/* Butang hamburger -> X beranimasi. 44px supaya cukup besar untuk jari. */
.menu-toggle{
display:none;background:none;border:0;cursor:pointer;
width:44px;height:44px;padding:11px 10px;margin-right:-10px;
flex-direction:column;justify-content:space-between;
}
.menu-toggle span{
display:block;height:2px;width:100%;background:#fff;border-radius:2px;
transition:transform .28s ease,opacity .18s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media(max-width:899px){
.menu-toggle{display:flex;}
/* Panel digantung pada header (position:sticky = containing block), jadi
top:100% sentiasa duduk tepat di bawahnya — tinggi header tak perlu diteka. */
nav{
position:absolute;top:100%;left:0;right:0;
background:var(--navy);
border-top:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 40px rgba(0,0,0,.45);
/* Ditutup guna max-height/visibility, bukan display:none, supaya boleh beranimasi.
visibility:hidden juga mengeluarkan pautan daripada turutan tab. */
max-height:0;overflow:hidden;visibility:hidden;opacity:0;
transition:max-height .32s ease,opacity .22s ease,visibility .32s;
}
nav.open{max-height:calc(100vh - 68px);overflow-y:auto;visibility:visible;opacity:1;}
/* mesti ditukar kepada column di sini: kalau tidak ia warisi flex
mendatar dan item terakhir keluar skrin. */
nav ul{flex-direction:column;gap:0;padding:4px 0;}
nav li{border-bottom:1px solid rgba(255,255,255,.06);}
nav li:last-child{border-bottom:0;}
nav a{display:block;padding:15px 24px;font-size:14px;}
nav a:active{background:rgba(255,255,255,.05);}
.nav-wa{display:flex;justify-content:center;margin:16px 24px 22px;}
}
@media(prefers-reduced-motion:reduce){nav,.menu-toggle span{transition:none;}}
/* ---- HERO ---- */
.hero{
position:relative;background:linear-gradient(160deg,var(--navy-3),var(--navy) 55%,var(--navy-2));
color:#fff;padding:64px 0 88px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg .ph{height:100%;border:0;opacity:.28;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,20,52,.95) 0%,rgba(0,20,52,.74) 55%,rgba(0,20,52,.52) 100%);}
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 24px;}
.hero h1{font-size:48px;font-weight:700;margin:16px 0 12px;letter-spacing:-1px;}
/* Margin atas h1 dahulunya memisahkannya daripada eyebrow. Di home eyebrow
sudah dibuang, jadi h1 ialah anak pertama dan margin itu hanya menolak
tajuk ke bawah. Halaman lokasi masih ada eyebrow, jadi h1 di sana bukan
anak pertama dan jaraknya dikekalkan. */
.hero-teks > h1:first-child{margin-top:0;}
.hero .where{font-size:20px;color:var(--orange-light);font-family:'Playfair Display',Georgia,serif;margin-bottom:22px;font-style:italic;}
.hero p{font-size:16.5px;color:#d3dae6;margin-bottom:26px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.trust-row{display:flex;gap:34px;flex-wrap:wrap;margin-top:54px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);}
.trust-item{display:flex;align-items:center;gap:11px;}
.trust-item svg{width:26px;height:26px;stroke:var(--orange);fill:none;stroke-width:1.5;flex-shrink:0;}
.trust-item b{display:block;font-size:14px;}
.trust-item span{display:block;font-size:12px;color:#9aa6bb;}
/* ---- INTRO + BORANG ---- */
.intro{background:var(--light);}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;}
.intro h2{font-size:32px;margin:12px 0 16px;}
.intro h3{font-size:22px;margin:30px 0 12px;}
.intro p{color:var(--grey-text);margin-bottom:14px;}
.intro .btn{margin-top:10px;}
.quote-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);
border-radius:6px;padding:32px 30px;box-shadow:var(--bayang-kuat);}
.quote-card h3{font-size:26px;margin-bottom:7px;}
.quote-card .sub{font-size:13.5px;color:var(--grey-text);margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;margin-bottom:6px;color:#333b48;}
.field .req{color:#b4452f;}
.field input,.field select,.field textarea{
width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:4px;
font-family:inherit;font-size:14.5px;color:#252b36;background:#fcfdfe;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,97,34,.18);
}
.field textarea{resize:vertical;min-height:84px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-note{font-size:11.5px;color:#8d867f;margin-top:12px;line-height:1.5;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.hp input{height:1px;min-height:0;}
.form-msg{padding:12px 14px;border-radius:3px;font-size:14px;margin-bottom:16px;display:none;}
.form-msg.ok{display:block;background:#eaf4ec;border:1px solid #bcd9c3;color:#2f6b3f;}
.form-msg.err{display:block;background:#fbeceb;border:1px solid #e3bdb8;color:#a03c2c;}
/* ---- DIPERCAYAI OLEH ---- */
.trusted{padding:44px 0;background:#fff;border-bottom:1px solid var(--line);}
.trusted .label{text-align:center;text-transform:uppercase;letter-spacing:2.5px;font-size:11.5px;font-weight:700;color:var(--grey-text);margin-bottom:26px;}
.logo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:center;}
.logo-strip .ph{min-height:74px;font-size:10.5px;}
/* Logo klien datang dalam nisbah berbeza, jadi tingginya dihadkan supaya
jalur nampak seragam dan tiada satu logo menguasai yang lain.
Warna penuh sepanjang masa — grayscale menyembunyikan jenama yang
sepatutnya menjadi bukti sosial. */
.logo-klien{
max-height:62px;width:auto;max-width:100%;margin:0 auto;
object-fit:contain;transition:transform .25s ease;
}
.logo-klien:hover{transform:scale(1.06);}
@media(max-width:600px){.logo-klien{max-height:46px;}}
@media(prefers-reduced-motion:reduce){.logo-klien{transition:none;}}
/* ---- KENAPA PILIH KAMI ---- */
.why{background:var(--light);}
.why-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;max-width:940px;margin:0 auto;}
.why-li{display:flex;gap:14px;align-items:flex-start;}
.why-li svg{width:24px;height:24px;flex-shrink:0;margin-top:2px;stroke:var(--orange);fill:none;stroke-width:1.8;}
.why-li b{display:block;font-size:15.5px;margin-bottom:3px;}
.why-li span{font-size:14px;color:var(--grey-text);}
/* ---- PERKHIDMATAN ---- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.svc-card{border:1px solid var(--line);background:#fff;border-radius:6px;overflow:hidden;
box-shadow:var(--bayang);transition:transform .25s ease,box-shadow .25s ease;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--bayang-kuat);}
.svc-body{padding:22px 20px 26px;}
.svc-body h3{font-size:18px;margin-bottom:8px;}
.svc-body p{font-size:14px;color:var(--grey-text);}
/* ---- KANDUNGAN PANJANG (peralatan & produk) ---- */
.content-band{background:linear-gradient(170deg,var(--navy),var(--navy-3));color:#e4e9f1;}
.content-band .eyebrow{color:var(--orange);}
.content-band h2{font-size:33px;color:#fff;margin:12px 0 22px;}
.content-band h3{font-size:20px;color:var(--orange-light);margin:28px 0 10px;}
.content-band p{color:#adb8ca;margin-bottom:14px;}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:stretch;}
.band-media{display:grid;grid-template-rows:1fr 1fr;gap:16px;height:100%;}
.band-media .ph{min-height:210px;}
@media(max-width:980px){
.band-media{grid-template-rows:auto auto;height:auto;}
}
/* ---- PROSES ---- */
.process{background:#fff;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;position:relative;}
.steps::before{content:"";position:absolute;top:30px;left:16%;right:16%;height:1px;background:var(--line);z-index:0;}
.step{text-align:center;position:relative;z-index:1;}
.step .num{
width:60px;height:60px;border-radius:50%;
background:linear-gradient(145deg,var(--navy),var(--navy-2));color:var(--orange);
display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:700;
border:2px solid var(--orange);box-shadow:0 6px 18px rgba(0,28,73,.24);
transition:transform .25s ease;
}
.step:hover .num{transform:translateY(-4px) scale(1.06);}
.step h3{font-size:16.5px;margin-bottom:7px;}
.step p{font-size:13.5px;color:var(--grey-text);}
/* ---- JENIS PREMIS ---- */
.premis{background:var(--light);}
.premis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;max-width:820px;margin:0 auto;}
.premis-grid li{display:flex;gap:11px;align-items:center;font-size:14.5px;}
.premis-grid svg{width:17px;height:17px;flex-shrink:0;stroke:var(--orange);fill:none;stroke-width:2.2;}
/* ---- PELAN PENYELENGGARAAN ---- */
.plan{background:linear-gradient(170deg,var(--navy-2),var(--navy));color:#e4e9f1;}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
/* Tanpa gambar: teks di kiri, butang di kanan — corak sama seperti jalur CTA.
Perenggan dihadkan 62ch kerana baris yang terlalu panjang susah diikuti. */
.plan-baris{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.plan-baris > div{flex:1 1 520px;max-width:62ch;}
.plan-baris p:last-of-type{margin-bottom:0;}
.plan-baris .btn{flex-shrink:0;padding:18px 34px;font-size:14px;}
@media(max-width:760px){
.plan-baris{flex-direction:column;align-items:flex-start;gap:24px;}
/* flex-basis 520px ditetapkan untuk paksi mendatar. Selepas bertukar kepada
column ia menguasai TINGGI, memaksa blok teks 520px tinggi dan
meninggalkan jurang besar sebelum butang. */
.plan-baris > div{flex:0 1 auto;max-width:none;width:100%;}
.plan-baris .btn{width:100%;}
}
.plan h2{color:#fff;font-size:31px;margin:12px 0 16px;}
.plan p{color:#adb8ca;margin-bottom:14px;}
.plan .ph{min-height:270px;}
/* ---- KAWASAN ---- */
.areas{background:#fff;}
.state-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto;}
.state-grid a{
border:1.5px solid var(--line);padding:10px 19px;border-radius:40px;font-size:13.5px;
font-weight:500;color:#333b48;transition:all .2s;
}
.state-grid a:hover{border-color:var(--orange-teks);background:var(--orange-teks);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(194,65,12,.32);}
/* ---- TESTIMONI ---- */
.testi-band{background:var(--light);}
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.testi{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 26px;
box-shadow:var(--bayang);transition:transform .25s ease,box-shadow .25s ease;}
.testi:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat);}
.testi .quote-mark{font-size:52px;color:var(--orange);font-family:'Playfair Display',Georgia,serif;line-height:.7;margin-bottom:12px;opacity:.55;}
.testi p{font-size:14.5px;color:#3f4652;margin-bottom:16px;}
.testi .stars{color:var(--orange);letter-spacing:2px;margin-bottom:8px;}
.testi .who{font-size:13px;color:var(--grey-text);}
/* ---- CTA AKHIR ---- */
.cta-band{background:linear-gradient(135deg,var(--orange-teks),#a83509);color:#fff;}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.cta-band h2{font-size:36px;margin-bottom:14px;color:#fff;}
.cta-band p{margin-bottom:22px;font-size:16px;}
/* ---- FOOTER ---- */
footer{background:var(--navy);color:#9aa6bb;padding:30px 0 28px;font-size:14px;}
/* Flex, bukan grid: bilangan lajur berubah (lajur lokasi hanya muncul bila
ada halaman siap). repeat(auto-fit,...) tidak boleh bercampur dengan trek
fr lain — deklarasi jadi tak sah dan semua lajur bertindan. */
.foot-grid{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:38px;}
.foot-brand{flex:1 1 300px;max-width:380px;}
.foot-grid > div:not(.foot-brand){flex:0 1 170px;}
.foot-logo{height:40px;width:auto;margin-bottom:14px;}
footer h4{color:#fff;font-size:15px;margin-bottom:14px;font-family:Georgia,serif;}
footer li{margin-bottom:8px;}
footer a:hover{color:var(--orange-light);}
.foot-brand img{height:40px;margin-bottom:14px;}
.foot-bottom{text-align:center;font-size:12.5px;}
.foot-lokasi{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-lokasi a{font-size:13px;}
.foot-lokasi a:hover{color:var(--orange-light);}
/* ---- WIDGET SEMBANG WHATSAPP (melekat) ---- */
.wa-widget{
position:fixed;right:20px;bottom:20px;z-index:60;
display:flex;flex-direction:column;align-items:flex-end;gap:12px;
/* Panel yang tertutup masih mengambil ruang susun atur (visibility:hidden,
bukan display:none, supaya boleh beranimasi), jadi bekas ini 300x364px
walaupun butangnya hanya 58x58. Tanpa pointer-events:none ia menelan
setiap klik dalam kawasan itu dan butang di bawahnya tidak boleh ditekan. */
pointer-events:none;
}
.wa-toggle,.wa-widget.open .wa-panel{pointer-events:auto;}
.wa-panel{
width:300px;max-width:calc(100vw - 40px);background:#fff;border-radius:12px;overflow:hidden;
box-shadow:0 18px 50px rgba(0,0,0,.28);
transform:translateY(12px) scale(.96);opacity:0;visibility:hidden;pointer-events:none;
transform-origin:bottom right;transition:transform .26s ease,opacity .2s ease,visibility .26s;
}
.wa-widget.open .wa-panel{transform:translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto;}
.wa-head{background:#075e54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px;}
.wa-avatar{width:38px;height:38px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-avatar svg{width:22px;height:22px;fill:#fff;}
.wa-head b{display:block;font-size:14px;line-height:1.3;}
.wa-head .status{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#a8ddd3;}
.wa-head .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;}
.wa-close{margin-left:auto;background:none;border:0;color:#a8ddd3;font-size:20px;line-height:1;cursor:pointer;padding:4px 2px;}
.wa-close:hover{color:#fff;}
.wa-body{padding:18px 16px;background:#ece5dd;}
.wa-bubble{
background:#fff;border-radius:2px 10px 10px 10px;padding:11px 13px;font-size:13.5px;color:#252b36;
box-shadow:0 1px 2px rgba(0,0,0,.12);line-height:1.5;
}
.wa-bubble .time{display:block;text-align:right;font-size:10px;color:#9aa0a6;margin-top:5px;}
.wa-panel .wa-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;
padding:13px;font-size:13.5px;font-weight:700;letter-spacing:.3px;transition:background .2s;}
.wa-panel .wa-cta:hover{background:#1fba59;}
.wa-panel .wa-cta svg{width:18px;height:18px;fill:#fff;}
.wa-toggle{
width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
background:#25d366;display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 22px rgba(0,0,0,.3);transition:transform .2s;position:relative;
}
.wa-toggle:hover{transform:scale(1.07);}
.wa-toggle svg{width:31px;height:31px;fill:#fff;}
.wa-toggle .ic-close{display:none;}
.wa-widget.open .wa-toggle .ic-wa{display:none;}
.wa-widget.open .wa-toggle .ic-close{display:block;}
.wa-badge{
position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:10px;
background:#e5342b;color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.wa-widget.open .wa-badge{display:none;}
@media(max-width:600px){.wa-widget{right:14px;bottom:14px;}}
@media(prefers-reduced-motion:reduce){.wa-panel{transition:none;}}
/* ---- RESPONSIF ---- */
@media(max-width:980px){
.intro-grid,.band-grid,.plan-grid,.cta-grid{grid-template-columns:1fr;gap:38px;}
.testi-grid{grid-template-columns:repeat(2,1fr);}
.logo-strip{grid-template-columns:repeat(2,1fr);}
.foot-brand{flex:1 1 100%;max-width:none;}
}
@media(max-width:800px){
.steps{grid-template-columns:repeat(2,1fr);}
.steps::before{display:none;}
}
@media(max-width:600px){
section{padding:56px 0;}
.hero{padding:34px 0 48px;}
.hero h1{font-size:33px;}
.hero .where{font-size:16px;}
.section-head h2{font-size:26px;}
.intro h2,.content-band h2,.plan h2,.cta-band h2{font-size:26px;}
.svc-grid,.premis-grid{grid-template-columns:1fr;}
.foot-grid{gap:28px;}
.logo-strip{grid-template-columns:repeat(2,1fr);}
.field-row{grid-template-columns:1fr;}
/* Grid, bukan flex-wrap: dengan flex, panjang teks yang berbeza
menyebabkan susunan jadi 2/1/1. Grid memaksa 2/2 tanpa mengira teks. */
.trust-row{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;}
.trust-item svg{width:22px;height:22px;}
}
/* ================= PENUKAR BAHASA ================= */
/* Penukar bahasa dalam header. Kod pendek sahaja — "Bahasa Melayu" penuh
terlalu panjang untuk bar, dan menolak menu keluar pada skrin sederhana. */
.lang-switch{
display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:2px;
}
.lang-switch a{
padding:5px 9px;border-radius:3px;font-size:12px;font-weight:600;line-height:1.3;
color:#b9c3d4;transition:background .18s,color .18s;white-space:nowrap;
}
.lang-switch a:hover{color:#fff;background:rgba(255,255,255,.08);}
.lang-switch a.aktif{background:var(--orange);color:#10131a;font-weight:700;}
@media(max-width:380px){
.lang-switch a{padding:5px 7px;font-size:11px;}
}
/* ================= BINTANG / PENARAFAN ================= */
.stars{color:var(--orange-teks);letter-spacing:2px;}
.hero-rating .stars{color:var(--orange-light);}
.hero-rating{display:flex;align-items:center;gap:9px;margin-bottom:26px;font-size:14px;color:#d3dae6;}
.hero-rating .stars{font-size:15px;}
.rating-line{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px;font-size:15px;}
.testi-more{text-align:center;margin-top:28px;}
.testi-more a{color:var(--orange-teks);font-weight:700;font-size:14px;}
.testi-more a:hover{text-decoration:underline;}
.foot-social{margin-top:12px;}
.foot-social a{color:var(--orange-light);font-weight:600;}
/* ================= VIDEO ================= */
.video-thumb{
display:block;position:relative;width:100%;max-width:860px;margin:0 auto;
border:0;padding:0;cursor:pointer;background:var(--navy);
border-radius:4px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.18);
aspect-ratio:16/9;
}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .3s;}
.video-thumb:hover img{transform:scale(1.04);opacity:.82;}
.video-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:74px;height:74px;border-radius:50%;background:var(--orange);
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 26px rgba(0,0,0,.4);transition:transform .22s;
}
.video-thumb:hover .video-play{transform:translate(-50%,-50%) scale(1.09);}
.video-play svg{width:34px;height:34px;fill:#fff;margin-left:4px;}
.video-label{
position:absolute;left:0;right:0;bottom:0;padding:14px;
background:linear-gradient(to top,rgba(0,20,52,.86),transparent);
color:#fff;font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-align:center;
}
@media(max-width:600px){.video-play{width:58px;height:58px;}.video-play svg{width:26px;height:26px;}}
/* ================= LIGHTBOX VIDEO ================= */
.vbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.vbox[hidden]{display:none;}
.vbox-bg{position:absolute;inset:0;background:rgba(0,10,28,.9);}
.vbox-inner{position:relative;width:100%;max-width:960px;}
.vbox-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);}
.vbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vbox-close{
position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;
font-size:34px;line-height:1;cursor:pointer;padding:4px 10px;
}
.vbox-close:hover{color:var(--orange-light);}
@media(max-width:600px){.vbox-close{top:-40px;font-size:28px;}}
/* ================= FON CJK (versi 中文) =================
Georgia dan Segoe UI tiada glif Cina, jadi pelayar akan menggantikannya
secara rawak. Tetapkan tindanan fon CJK yang betul supaya teks konsisten. */
html[lang^="zh"] body{
font-family:-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Source Han Sans SC',sans-serif;
}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] h4{
font-family:'Songti SC','SimSun','Noto Serif SC','Source Han Serif SC',Georgia,serif;
letter-spacing:0;
}
html[lang^="zh"] .eyebrow{letter-spacing:1.4px;}
html[lang^="zh"] .btn{letter-spacing:.8px;}
/* ================= DEDAH KETIKA MENATAL ================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.tampak{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;}
.btn,.svc-card,.testi,.step .num,.state-grid a{transition:none;}
}
/* Saiz taip mudah alih untuk tipografi baharu */
@media(max-width:600px){
body{font-size:16px;}
.hero h1{font-size:36px;letter-spacing:-.6px;}
.section-head h2{font-size:28px;}
.cta-band h2{font-size:28px;}
.quote-card{padding:26px 22px;}
}
/* ================= HALAMAN LOKASI ================= */
.hero-lok{padding:84px 0 68px;}
.hero-lok h1{font-size:46px;max-width:780px;}
.lok-utama{background:#fff;}
.lok-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:52px;align-items:start;}
.lok-teks{font-size:16.5px;color:#3f4652;}
.lok-teks .lead{font-size:18px;color:#2b313c;margin-bottom:20px;}
.lok-teks h3{font-size:22px;margin:32px 0 14px;color:#252b36;}
.lok-sisi{position:sticky;top:96px;}
.kawasan-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;margin-top:6px;}
.kawasan-list li{display:flex;gap:10px;align-items:center;font-size:14.5px;}
.kawasan-list svg{width:16px;height:16px;flex-shrink:0;stroke:var(--orange);fill:none;stroke-width:2.4;}
.lok-projek{background:var(--light);}
.projek-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.projek{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--bayang);}
.projek-imej{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);}
.projek-imej figure{position:relative;margin:0;aspect-ratio:4/3;background:var(--navy);}
.projek-imej img{width:100%;height:100%;object-fit:cover;}
.projek-imej figcaption{
position:absolute;left:0;bottom:0;padding:5px 10px;font-size:11px;font-weight:700;
letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(0,20,52,.78);
}
.projek-teks{padding:20px 22px 24px;}
.projek-teks h3{font-size:19px;margin-bottom:6px;}
.projek-meta{font-size:12.5px;color:var(--grey-text);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;}
.projek-teks p{font-size:14.5px;color:#3f4652;}
.lok-balik{text-align:center;padding:26px 24px 40px;background:#fff;margin:0;}
.lok-balik a{color:var(--orange-teks);font-weight:600;font-size:14px;}
.lok-balik a:hover{text-decoration:underline;}
/* Pil negeri yang sudah ada halaman sendiri ditandakan */
.state-grid a.ada-halaman{border-color:var(--orange);font-weight:600;}
.state-grid a.ada-halaman::after{content:" \2192";color:var(--orange-teks);}
.state-grid a.ada-halaman:hover::after{color:#fff;}
@media(max-width:980px){
.lok-grid{grid-template-columns:1fr;gap:34px;}
.lok-sisi{position:static;}
.projek-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
.hero-lok h1{font-size:32px;}
.kawasan-list{grid-template-columns:1fr;}
}
/* ================= KAD ULASAN GOOGLE (item ke-4 supaya genap) ================= */
.testi-google{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
text-align:center;background:linear-gradient(160deg,var(--navy),var(--navy-3));
border:1px solid var(--navy-2);border-radius:6px;padding:30px 26px;color:#fff;
box-shadow:var(--bayang);transition:transform .25s ease,box-shadow .25s ease;
}
.testi-google:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat);}
.testi-google .stars{color:var(--orange-light);font-size:20px;}
.testi-google strong{font-size:17px;font-family:'Playfair Display',Georgia,serif;}
.testi-google-cta{color:var(--orange-light);font-size:13.5px;font-weight:600;}
@media(max-width:600px){
.svc-grid,.premis-grid,.testi-grid,.steps{grid-template-columns:1fr;}
.logo-strip{grid-template-columns:repeat(2,1fr);}
}
/* ================= VIDEO DALAM HERO (kanan) ================= */
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;}
.hero-video{width:100%;}
.hero-video .video-thumb{
max-width:none;margin:0;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 26px 60px rgba(0,8,26,.55);
}
/* Kecerunan hero dicondongkan supaya sisi kanan tidak terlalu gelap di belakang video. */
.hero-grid + .trust-row{margin-top:46px;}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:34px;}
.hero h1{font-size:42px;}
/* Video di bawah teks pada skrin sempit: tajuk dan CTA kekal dilihat dahulu. */
.hero-video{order:2;}
}
@media(max-width:600px){
.hero h1{font-size:34px;}
.hero-grid{gap:26px;}
}
/* ================= NOTA DI BAWAH VIDEO ================= */
/* .hero p (0,1,1) mengalahkan .video-nota (0,1,0), jadi saiz fon di sini
perlu pemilih yang lebih khusus atau ia diabaikan sepenuhnya. */
.hero .video-nota{
margin:20px 0 0;text-align:center;font-size:14px;line-height:1.65;color:#b9c3d4;
}
.hero .video-nota a{color:var(--orange-light);font-weight:700;white-space:nowrap;}
.hero .video-nota a:hover{text-decoration:underline;}
/* ================= BUTANG HERO BERSEBELAHAN DI TELEFON ================= */
@media(max-width:600px){
/* Sebelum ini kedua-dua butang bertindan kerana flex-wrap. Dikecilkan
sedikit supaya muat sebaris pada skrin 360px ke atas. */
.hero-btns{flex-wrap:nowrap;gap:10px;}
.hero-btns .btn{flex:1 1 0;padding:13px 8px;font-size:11.5px;letter-spacing:.2px;white-space:nowrap;}
.hero .video-nota{font-size:13px;margin-top:16px;}
}
/* ================= JALUR CTA SEBUT HARGA ================= */
.cta-quote{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.cta-quote h2{font-size:38px;margin-bottom:8px;color:#fff;}
.cta-quote p{font-size:16.5px;margin:0;opacity:.95;}
.btn-ghost{
background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85);
padding:20px 38px;font-size:15px;letter-spacing:1px;flex-shrink:0;
}
.btn-ghost:hover{background:#fff;color:var(--orange-teks);border-color:#fff;transform:translateY(-2px);}
.btn-ghost span{margin-left:6px;}
@media(max-width:760px){
.cta-quote{flex-direction:column;align-items:flex-start;gap:22px;}
.cta-quote h2{font-size:27px;}
.btn-ghost{width:100%;padding:17px 22px;font-size:13.5px;}
}
/* ================= POPUP BORANG ================= */
.qbox{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:20px;}
.qbox[hidden]{display:none;}
.qbox-bg{position:absolute;inset:0;background:rgba(0,10,28,.78);}
.qbox-inner{
position:relative;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
background:#fff;border-radius:8px;border-top:5px solid var(--orange);
padding:32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.qbox-inner h3{font-size:26px;margin-bottom:6px;}
.qbox-sub{font-size:13.5px;color:var(--grey-text);margin-bottom:20px;}
.qbox-close{
position:absolute;top:10px;right:14px;background:none;border:0;
font-size:30px;line-height:1;color:#98a1b2;cursor:pointer;padding:4px 8px;
}
.qbox-close:hover{color:var(--orange-teks);}
@media(max-width:600px){
.qbox{padding:12px;}
.qbox-inner{padding:26px 20px;max-height:94vh;}
.qbox-inner h3{font-size:22px;}
}
/* ================= BORANG BOLEH TUTUP ================= */
/* asli, bukan JS: kalau JS gagal dimuat, borang tetap boleh dibuka. */
.quote-details summary{
list-style:none;cursor:pointer;display:block;
}
.quote-details summary::-webkit-details-marker{display:none;}
.quote-details summary::marker{content:'';}
.quote-tajuk{display:block;}
.quote-tajuk h3{font-size:26px;margin-bottom:7px;}
.quote-tajuk .sub{display:block;font-size:13.5px;color:var(--grey-text);}
.quote-buka{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:22px;padding:15px 22px;border-radius:4px;
background:var(--orange);color:#10131a;font-weight:700;font-size:13.5px;letter-spacing:.6px;
box-shadow:0 4px 14px rgba(242,97,34,.34);
transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.quote-details summary:hover .quote-buka{
background:var(--orange-light);transform:translateY(-2px);box-shadow:0 8px 22px rgba(242,97,34,.42);
}
.quote-details summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:4px;}
.quote-details[open] .quote-buka{display:none;}
.quote-details[open] .quote-tajuk{margin-bottom:20px;}
.quote-isi{padding-top:2px;}
/* ================= MEDAN MUAT NAIK GAMBAR ================= */
.field input[type="file"]{
padding:10px 12px;background:#fcfdfe;cursor:pointer;font-size:13.5px;
}
.field input[type="file"]::file-selector-button{
margin-right:12px;padding:8px 14px;border:0;border-radius:3px;cursor:pointer;
background:var(--navy);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;
}
.field input[type="file"]::file-selector-button:hover{background:var(--navy-2);}
.field-nota{font-size:11.5px;color:#8d867f;margin-top:6px;}
/* Kad borang mengikut tinggi kandungannya sendiri. Meregangkannya supaya padan
dengan lajur kiri meninggalkan ruang kosong besar antara subtajuk dan butang;
jurang kecil nampak lebih baik daripada jurang yang dipaksa. */
/* Logo mendatar duduk terus dalam bar header — tiada kad putih, tiada bahagian
tergantung. Tinggi sahaja dihadkan; lebar mengikut nisbah fail. */
.brand-logo{height:50px;width:auto;display:block;}
@media(max-width:899px){.brand-logo{height:42px;}}
@media(max-width:380px){.brand-logo{height:36px;}}
/* Butang telefon dalam hero. Nombor dipindah ke sini selepas bar atas dibuang —
ia satu-satunya tempat nombor kekal kelihatan tanpa menatal. */
.btn-tel svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;}
.btn-tel{font-variant-numeric:tabular-nums;letter-spacing:.3px;}
/* Gambar kad perkhidmatan. Nisbah 4:3 sepadan dengan fail 800x600, jadi gambar
sebelum/selepas terpapar PENUH tanpa dipotong. Pada lebar kad desktop ini
menjadi ~412px tinggi; nisbah digunakan dan bukan tinggi tetap supaya kad
mengecil betul di telefon — 410px tetap akan menjadikannya potret sempit. */
img.svc-photo{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block;}
.ph.svc-photo{aspect-ratio:4/3;height:auto;min-height:0;}
/* Gambar dalam seksyen bahan. Nisbah 4:3 sepadan dengan gambar gloss meter,
dan mengekalkan dua gambar itu berkongsi tinggi lajur sama rata. */
.band-img{width:100%;aspect-ratio:4/3;height:100%;object-fit:cover;display:block;border-radius:4px;}
@media(max-width:980px){.band-img{height:auto;}}