img{width:auto;height:auto}
:root{--tk:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 260"><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="%23dfe6ee"/><stop offset=".5" stop-color="%23ffffff"/><stop offset="1" stop-color="%23c3ceda"/></linearGradient></defs><rect x="40" y="30" width="120" height="190" rx="28" fill="url(%23g)"/><rect x="40" y="190" width="120" height="30" rx="14" fill="%23fd4d03"/><circle cx="100" cy="90" r="26" fill="%23fff" stroke="%23fd4d03" stroke-width="6"/><path d="M100 90l12-14" stroke="%2304305f" stroke-width="5" stroke-linecap="round"/><rect x="62" y="14" width="14" height="22" rx="4" fill="%23aab6c4"/><rect x="124" y="14" width="14" height="22" rx="4" fill="%23aab6c4"/><rect x="70" y="220" width="14" height="22" rx="4" fill="%23aab6c4"/><rect x="116" y="220" width="14" height="22" rx="4" fill="%23aab6c4"/></svg>');--navy:#04305f;--nv2:#06284d;--nv3:#041f3b;--or:#fd4d03;--or3:#d63d00;--or2:#c23800;--ink:#2b3442;--mut:#5f6b7a;--line:#dfe3e9;--bg:#f4f4f5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.65 'Exo 2',system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,h4{font-family:'Exo 2',sans-serif;color:#454d59;font-weight:600;margin:0;line-height:1.25}
a{color:inherit}
.w{max-width:1200px;margin:0 auto;padding:0 12px}
header{position:sticky;top:0;z-index:40;background:var(--nv2);color:#fff}
footer .brand{color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.4rem 'Exo 2',sans-serif;letter-spacing:.02em}
.brand i{font-style:normal;color:var(--or)}
.brand u{text-decoration:none;color:#5aa6f0}
.bd{display:flex}
.bd img{height:46px}
nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
nav>ul>li>a{text-decoration:none;font-size:14.5px;font-weight:500;padding:16px 0;display:block;color:#fff}
nav>ul>li>a:hover{color:var(--or)}
nav li{position:relative}
#mb{display:none;background:none;border:0;padding:4px 8px}
.hw{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--or3);color:#fff;text-decoration:none;font:600 14px 'Exo 2',sans-serif;padding:12px 26px;border-radius:999px;transition:background .2s}
.btn:hover{background:var(--or2)}
.banner{margin:12px auto 0;max-width:1176px;border-radius:16px;min-height:380px;display:flex;align-items:center;padding:40px 48px;color:#fff;background:linear-gradient(90deg,#04305ff0 0,#04305fb3 50%,#04305f40 100%),linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
.banner h1{color:#fff;font-size:clamp(1.7rem,4.2vw,2.9rem);font-weight:700;max-width:560px;margin-bottom:12px}
.banner p{max-width:480px;color:#d3deea;margin:0 0 22px}
.s{padding:44px 0}
.g{background:var(--bg)}
.ttl{display:flex;align-items:center;gap:18px;font-size:1.5rem;font-weight:500;text-transform:uppercase;margin-bottom:26px}
.ttl:before,.ttl:after{content:"";flex:1;height:1px;background:var(--line)}
.hd{text-align:center;margin-bottom:30px}
.hd h2{font-size:1.7rem}
.hd p{font-size:13px;color:var(--mut);margin:6px 0 0}
.sv{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sv a,.sv div{background:#fff;border-radius:6px;box-shadow:0 2px 7px #0002;padding:16px 10px;text-align:center;font-size:14px;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:130px;justify-content:center}
.ab{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.pimg{aspect-ratio:4/3;border-radius:10px;position:relative;overflow:hidden;background:var(--tk) center/38% no-repeat,linear-gradient(135deg,#0b3c70,#04305f)}
.ab h2{font-size:1.25rem;font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.ab h3{font-size:1.45rem;margin-bottom:10px}
.ab p{font-size:13.5px;color:var(--mut)}
.ab ul{padding-left:18px;font-size:14px}
.ab li::marker{color:var(--or)}
.hr{height:1px;background:linear-gradient(90deg,transparent,#f0a47f,transparent)}
.kel{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 22px}
.kel div{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.kel h3,.sol h3{font-size:14px;font-weight:600}
.kel p,.sol p{margin:0;font-size:12.5px;color:var(--mut)}
.sol{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sol div{display:flex;gap:14px;align-items:flex-start}
.sol h3{font-size:1.05rem;margin-bottom:6px}
.gl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gt{aspect-ratio:1;position:relative;overflow:hidden;border-radius:2px;background:var(--tk) center/48% no-repeat,linear-gradient(135deg,#0b3c70,#04305f)}
details{border:1px solid var(--line);border-radius:8px;margin:0 0 8px;background:#fff}
summary{list-style:none;cursor:pointer;padding:11px 14px 11px 40px;font-size:13.5px;position:relative}
summary::-webkit-details-marker{display:none}
summary::before{content:"";position:absolute;left:17px;top:50%;width:7px;height:7px;border:solid #6b7685;border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::before{transform:translateY(-30%) rotate(-135deg)}
details p{margin:0;padding:0 18px 14px 40px;font-size:13.5px;color:var(--mut)}
.ctab{border:2px solid var(--nv2);border-radius:14px;padding:34px 38px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctab h2{font-size:1.6rem;margin-bottom:8px}
.ctab p{margin:0 0 10px;font-size:14px;color:var(--mut);max-width:620px}
.ctab small{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#7b8594}
.pt{text-align:center;padding:34px 0 8px}
.pt h1{font-size:1.9rem}
.pt p{margin:8px auto 0;font-size:14px;color:var(--mut);max-width:620px}
footer{background:var(--nv2);color:#d3deea;border-top:3px solid #f0a47f;font-size:13.5px}
.fg{display:grid;grid-template-columns:1.4fr 1.1fr;gap:30px;padding:36px 0}
footer h3{color:#fff;font-size:1rem;padding-bottom:8px;border-bottom:2px solid #ffffff33;margin-bottom:12px;position:relative}
footer h3:after{content:"";position:absolute;left:0;bottom:-2px;width:14%;height:2px;background:#9fb3cc}
footer a{display:block;text-decoration:none;padding:3px 0}
footer a:hover{color:var(--or)}
.fl a:before{content:"› ";opacity:.7}
.cp{background:var(--nv3);text-align:center;padding:14px;font-size:12.5px;color:#9fb0c3}
.fab{position:fixed;right:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:6px;background:var(--or3);color:#fff;font:800 1.15rem 'Exo 2',sans-serif;letter-spacing:.04em;padding:6px 16px 6px 10px;border-radius:999px;border:3px solid #fff;box-shadow:0 4px 14px #0005;text-decoration:none}
.fab svg{width:26px;height:26px}
:focus-visible{outline:3px solid var(--or);outline-offset:2px}
@media(max-width:900px){#mb{display:block}
.nav{display:grid;grid-template-columns:48px 1fr 48px;min-height:56px}
.brand{justify-content:center;font-size:1rem}
.nav .bd img{height:34px}
.hw{display:flex;justify-content:flex-end;color:var(--or);padding:8px}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--nv2);padding:6px 16px 18px;box-shadow:0 12px 20px #0005}
nav.on{display:block}
nav ul{flex-direction:column;align-items:flex-start;gap:0}
nav>ul>li>a{padding:10px 0}
.ab,.sol{grid-template-columns:1fr}
.kel,.sv{grid-template-columns:repeat(2,1fr)}
.fg{grid-template-columns:1fr 1fr}
.ctab{padding:26px 22px}}
@media(max-width:600px){.banner{padding:44px 22px;align-items:center;text-align:center;justify-content:center;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}
.banner p{margin-left:auto;margin-right:auto}
.gl{grid-template-columns:repeat(2,1fr)}
.fg{grid-template-columns:1fr;padding:34px 20px;gap:36px;font-size:16px;line-height:1.9}
footer h3{font-size:1.1rem}
.fl a{padding:11px 0}
.fg .bd img{height:44px}
.fg .brand{font-size:1.05rem}
.cp{padding-bottom:84px}
.ttl{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
header .brand,header .brand i,header .brand u{color:#fff}
.bt{display:block;line-height:1.1;text-align:left;white-space:nowrap}
.bt small{display:block;font:500 .62rem 'Exo 2',sans-serif;letter-spacing:.03em;margin-top:3px;color:#fff;opacity:.9}
button,input,textarea,select,summary,nav a{font-family:'Exo 2',system-ui,sans-serif}
p,li,summary,footer a,nav a{font-size:16px;line-height:1.65}
h1,h2,h3,h4{font-family:'Exo 2',system-ui,sans-serif}
.cp{background:var(--nv2)}
footer .brand,footer .brand i,footer .brand u{color:#fff}
nav>ul>li>a.act{color:var(--or)}
nav>ul>li>a{font-size:15px;font-weight:500}
@media(max-width:900px){nav>ul>li{width:100%;border-bottom:1px solid #ffffff1f}
nav>ul>li:last-child{border-bottom:0}
nav>ul>li>a{padding:13px 0;font-size:16px}}
.svc{display:flex;gap:22px;align-items:flex-start;max-width:900px}
.svc>svg{flex:none}
.svc h2{font-size:1.4rem;margin-bottom:8px}
.svc p{color:var(--mut);margin:0 0 10px}
.svc ul{padding-left:18px;margin:0 0 18px}
.svc li::marker{color:var(--or)}
.svc,.s[id]{scroll-margin-top:70px}
.s[id]{scroll-margin-top:70px}
@media(max-width:600px){.svc{flex-direction:column;gap:12px}}
@media(min-width:901px){.sv{grid-template-columns:repeat(3,1fr)}}
.ab p,.kel p,.sol p,.svc p,details p,.hd p,.ctab p,.pt p{font-size:16px;line-height:1.65}
.ab ul,.ab li,.svc ul,.svc li{font-size:16px}
.sv a,.sv div{font-size:15px;font-weight:500}
.kel h3,.sol h3{font-size:17px}
summary,details p{font-size:16px}
.ctab small{font-size:14px}
footer,footer p,footer a{font-size:15px}
footer h3{font-size:1.1rem}
.cp{font-size:14px}
.btn{font-size:16px}
.bt small{font-size:12px;letter-spacing:.02em}
.kt{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kt li{display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.kt li:first-child{color:#fff;font-size:1.05em}
.kt svg{flex:none;margin-top:4px;color:#f0a47f}
.kt span{min-width:0}
footer .kt a{display:inline;padding:0;line-height:1.6}
li.act>a{color:var(--or)}
.kh-t{background:#f7f7f7;border-bottom:1px solid var(--line);text-align:center;padding:34px 0}
.kh-t h1{font-size:1.7rem;color:var(--ink);font-weight:500}
.kh{padding:36px 0 48px}
.kh .w{max-width:760px;padding:0 20px}
.kh-q{font-size:1.05rem;color:var(--mut);margin:0}
.kh h2{font-size:2.1rem;font-weight:500;color:var(--ink);margin:2px 0 14px}
.kh-d{font-size:1.1rem;line-height:1.9;color:var(--ink);margin:0 0 26px}
.kh-i{display:flex;gap:22px;align-items:flex-start;margin-bottom:18px}
.kh-i>svg{flex:none;color:var(--or);width:40px;height:40px;margin-top:2px}
.kh-i b{display:block;font-weight:500;font-size:1.1rem;color:var(--ink);line-height:1.8}
.kh-i p{margin:0;font-size:1.1rem;line-height:1.8;color:var(--ink)}
.kh-i a{color:var(--navy);text-decoration:none}
.kh-b{display:inline-flex;align-items:center;gap:14px;background:var(--nv3);color:#fff;text-decoration:none;font-weight:500;font-size:1.1rem;letter-spacing:.04em;padding:16px 34px;border-radius:999px;margin:14px 0 24px}
.kh-b:hover{background:var(--navy)}
.kh-s{display:flex;gap:6px;margin-bottom:0}
.kh-s a{width:58px;height:58px;border:2px solid #c4c4c4;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#b3b3b3}
.kh-s svg{width:26px;height:26px}
.kh-s a:hover{color:var(--or);border-color:var(--or)}
footer .sm{display:flex;gap:8px;margin-top:20px}
footer .sm a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:2.5px solid #fff;border-radius:50%;color:#fff}
footer .sm a:hover{color:var(--or);border-color:var(--or)}
footer .sm svg{width:22px;height:22px}

.banner.hero-solahart{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/hero-solahart.webp) right 18%/58% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-solahart{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/hero-solahart.webp) center 30%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}

.banner.hero-umum,.banner.hero-ar{background:linear-gradient(90deg,#04305ff0 0,#04305fb3 50%,#04305f59 100%),url(img/hero-produk-full.webp) center top/cover no-repeat,#04305f}
.banner.hero-ar{background-image:linear-gradient(90deg,#04305ff0 0,#04305fb3 50%,#04305f59 100%),url(img/ariston-hero-full.webp)}

@media(max-width:600px){.banner.hero-umum,.banner.hero-ar{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fee 0,#04305fc4 45%,#04305f4d 100%),url(img/hero-produk-hp.webp) center bottom/100% auto no-repeat,#5c8acd}
.banner.hero-ar{background-image:linear-gradient(180deg,#04305fee 0,#04305fc4 45%,#04305f4d 100%),url(img/ariston-hero-hp.webp);background-size:auto,100% auto}}

.banner.hero-wika{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/water-heater-solar-wika-terpasang-di-atap.webp) right 26%/58% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-wika{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/water-heater-solar-wika-terpasang-di-atap.webp) center 22%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}
.kh-map{margin:6px 0 22px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.kh-map iframe{display:block;width:100%;height:320px;border:0}
.pimg>img,.gt>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.banner.hero-handal{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/water-heater-solar-handal-di-atap-genteng.webp) right 38%/46% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-handal{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/water-heater-solar-handal-di-atap-genteng.webp) center 22%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}
.bc{padding-top:12px;padding-bottom:0;font-size:13.5px;color:var(--mut)}
.bc a{display:inline;font-size:inherit;line-height:inherit;color:var(--navy);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc span[aria-current]{color:var(--mut)}
.bc i{font-style:normal;margin:0 6px;opacity:.6}

.banner.hero-intisolar{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/water-heater-solar-inti-solar-di-atap-rumah.webp) right 42%/46% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-intisolar{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/water-heater-solar-inti-solar-di-atap-rumah.webp) center 40%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}

.banner.hero-electrolux{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/water-heater-listrik-electrolux-terpasang.webp) right 28%/46% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-electrolux{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/water-heater-listrik-electrolux-terpasang.webp) center 30%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}

.banner.hero-stiebel{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/water-heater-listrik-stiebel-eltron-terpasang.webp) right 10%/46% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-stiebel{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/water-heater-listrik-stiebel-eltron-terpasang.webp) center 20%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}

.banner.hero-rheem{background:linear-gradient(90deg,#04305f 0,#04305f 44%,#04305f00 66%),linear-gradient(90deg,#04305f00 0,#04305f73 100%),url(img/water-heater-solar-rheem-di-atap-genteng.webp) right center/48% auto no-repeat,linear-gradient(115deg,#04305f 0,#0a4a8a 62%,#06284d)}
@media(max-width:600px){.banner.hero-rheem{align-items:center;padding:44px 22px;background:linear-gradient(180deg,#04305fe6 0,#04305fb3 100%),url(img/water-heater-solar-rheem-di-atap-genteng.webp) center 40%/cover,linear-gradient(160deg,#04305f 0,#0a4a8a 70%,#06284d)}}

.brands{padding:36px 0}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 44px;max-width:920px;margin:0 auto;padding:0 20px;align-items:center;justify-items:center}
.bgrid.n3{grid-template-columns:repeat(3,1fr);max-width:760px}
.bgrid a{display:flex;align-items:center;justify-content:center;width:100%;height:60px}
.bgrid img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:600px){.brands{padding:26px 0}
.bgrid,.bgrid.n3{grid-template-columns:repeat(2,1fr);gap:24px 28px;padding:0 24px}
.bgrid a{height:52px}
.bgrid.n3 a:last-child{grid-column:1/-1;width:calc(50% - 14px)}}


.wil{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px;margin:0 auto}
.wil a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;color:var(--navy);font:600 15px/1.25 'Exo 2',sans-serif;text-decoration:none;transition:border-color .2s,color .2s,box-shadow .2s}
.wil a svg{flex:none;color:var(--or)}
.wil a:hover,.wil a:focus-visible{border-color:var(--or);color:var(--or3);box-shadow:0 4px 14px #04305f14}
@media(max-width:900px){.wil{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.wil{grid-template-columns:repeat(2,1fr);gap:10px;padding:0 4px}.wil a{padding:13px 12px;gap:8px;font-size:14px;min-height:54px}.wil a svg{width:18px;height:18px}}


body.brand-page header .nav{position:relative;justify-content:center!important}
body.brand-page header .nav>.brand{margin-inline:auto}
body.brand-page header .nav>.hw{position:absolute;right:0;top:50%;transform:translateY(-50%)}

.hw.whatsapp-round{display:flex;align-items:center;justify-content:center;width:42px;height:42px;min-width:42px;padding:0;border-radius:50%;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.16)}.hw.whatsapp-round:hover{background:#1ebe5d;color:#fff}

/* FIX: konsistensi header dan tombol WhatsApp di semua halaman */
.nav{display:flex;align-items:center;gap:12px;position:relative;box-sizing:border-box}
.nav .brand{flex:0 1 auto;min-width:0;margin-right:auto}
.nav .hw.whatsapp-round{
  position:static !important; right:auto !important; top:auto !important;
  transform:none !important; display:flex !important; flex:0 0 42px;
  align-items:center !important; justify-content:center !important;
  box-sizing:border-box; width:42px !important; height:42px !important;
  min-width:42px !important; padding:0 !important; margin:0 0 0 auto !important;
  border:0; border-radius:50% !important; background:#25D366 !important;
  color:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,.16);
  text-decoration:none; line-height:1;
}
.nav .hw.whatsapp-round svg{display:block;width:24px;height:24px;flex:0 0 24px}
.nav .hw.whatsapp-round:hover{background:#1ebe5d !important;color:#fff !important}
@media(max-width:900px){
 .nav{gap:8px}
 .nav .brand{max-width:calc(100% - 100px)}
 .nav .hw.whatsapp-round{margin-left:auto !important}
}