:root{--ink:#1d2a22;--muted:#5d6b62;--line:#e6dcc6;--bg:#fdf8ee;--card:#fff;--hijau:#0b5d3b;--hijau-2:#08452c;--emas:#e8b84a;--emas-soft:#fbf0d4;--merah:#8c1c2b;--soft:#eef6f0;--wa:#1fa855;--r:16px;--w:1140px;
--songket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23e8b84a' stroke-opacity='.22' stroke-width='1.4'%3E%3Cpath d='M24 4 44 24 24 44 4 24z'/%3E%3Cpath d='M24 14 34 24 24 34 14 24z'/%3E%3Ccircle cx='24' cy='24' r='2.5'/%3E%3Cpath d='M0 0 8 8M48 0 40 8M0 48 8 40M48 48 40 40'/%3E%3C/g%3E%3C/svg%3E")}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--hijau)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.small{font-size:.875rem}.muted{color:var(--muted)}.muted-l{color:#a9c4b4}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em;font-family:Georgia,"Times New Roman",serif}
h1{font-size:clamp(1.85rem,4.4vw,2.9rem);margin:.2em 0 .3em}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem);margin:1.8em 0 .5em;color:var(--hijau-2)}
h3{font-size:1.15rem;margin:1.4em 0 .4em}
.btn{display:inline-block;padding:.78em 1.25em;border-radius:999px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{filter:brightness(1.07)}
.btn-gold{background:var(--emas);color:#2b2108}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-sm{padding:.5em 1em;font-size:.9rem}
.topbar{background:var(--hijau-2);color:#f3e6c4;font-size:.8rem;padding:6px 0;text-align:center}
.topbar a{color:#fff}
.site-head{position:sticky;top:0;z-index:20;background:rgba(253,248,238,.95);backdrop-filter:blur(8px);border-bottom:3px solid var(--emas)}
.head-row{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--hijau-2);line-height:1.15}
.brand small{display:block;font-weight:500;font-size:.75rem;color:var(--muted)}
.logo{display:flex}
.nav{display:flex;gap:18px;margin-left:auto;font-size:.95rem;font-weight:600}
.nav a{text-decoration:none;color:var(--ink)}.nav a:hover{color:var(--hijau)}
@media (max-width:900px){.nav{display:none}.head-row .btn{margin-left:auto}}
.crumbs{font-size:.85rem;color:var(--muted);padding-top:14px}.crumbs a{color:var(--muted)}
.page-head{padding:18px 16px 4px}
.lede{font-size:1.15rem;color:var(--muted);max-width:760px}
.content{padding-bottom:40px}
.article{max-width:820px}
.article p,.article li{max-width:72ch}
.answer{background:var(--emas-soft);border-left:5px solid var(--emas);padding:16px 18px;border-radius:0 var(--r) var(--r) 0;margin:12px 0 8px;font-size:1.05rem}
.content table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);font-size:.95rem}
.content th,.content td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.facts th{width:40%;color:var(--muted);font-weight:600}
.content thead th{background:var(--soft);color:var(--hijau-2)}
.table-scroll{overflow-x:auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 16px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0}
.faq details>div{padding-bottom:12px}
.sources li{font-size:.92rem}
.author{display:flex;gap:14px;border-top:1px solid var(--line);margin-top:36px;padding-top:18px}
.avatar{flex:none;width:48px;height:48px;border-radius:50%;background:var(--hijau);color:var(--emas);display:grid;place-items:center;font-weight:800}
.author p{margin:.2em 0}
.callout{background:#fff;border:1px solid var(--line);border-left:5px solid var(--merah);border-radius:var(--r);padding:14px 18px;margin:18px 0}
.tip{background:var(--soft);border-radius:var(--r);padding:14px 18px;margin:18px 0}
.hero{background:var(--songket),linear-gradient(135deg,#08452c 0%,#0b5d3b 60%,#137049 100%);color:#fff;padding:54px 0 62px;border-bottom:6px solid var(--emas)}
.hero h1{color:#fff;max-width:840px}
.hero .salam{display:inline-block;background:rgba(232,184,74,.18);color:#f6dc9a;border:1px solid rgba(232,184,74,.5);padding:4px 12px;border-radius:999px;font-size:.85rem;margin:0}
.hero p{font-size:1.15rem;max-width:680px;color:#dcefe3}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:34px;max-width:860px}
.stat{background:rgba(0,0,0,.18);border:1px solid rgba(232,184,74,.35);border-radius:var(--r);padding:12px 14px}
.stat b{display:block;font-size:1.4rem;color:var(--emas)}
.stat span{font-size:.85rem;color:#d1e6d8}
.section{padding:46px 0}
.section h2{margin-top:0}
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);display:block;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--hijau),var(--emas))}
a.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,93,59,.12)}
.card h3{margin:.2em 0 6px;color:var(--hijau-2)}
.card p{margin:0;font-size:.95rem;color:var(--muted)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;background:var(--emas-soft);color:#7a5a0e;padding:2px 9px;border-radius:999px;margin-bottom:6px}
.top10{counter-reset:n;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.top10 li{counter-increment:n;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 16px 64px;position:relative}
.top10 li::before{content:counter(n);position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:10px;background:var(--hijau);color:var(--emas);display:grid;place-items:center;font-weight:800;font-family:Georgia,serif;font-size:1.1rem}
.top10 b{display:block;color:var(--hijau-2)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:4px 0 14px 48px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;background:var(--emas);color:#2b2108;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.lead{background:var(--songket),var(--hijau-2);color:#e7f2ea;padding:50px 0}
.lead h2{color:#fff;margin-top:0}
.ticks{padding-left:0;list-style:none}.ticks li::before{content:"✓ ";color:var(--emas);font-weight:800}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:820px){.lead-grid{grid-template-columns:1fr}}
.lead-form{background:#fff;color:var(--ink);border-radius:var(--r);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:5px solid var(--emas)}
.lead-form label{display:flex;flex-direction:column;font-size:.85rem;font-weight:700;gap:4px}
.lead-form input,.lead-form select{font:inherit;font-weight:400;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%}
.lead-form button,.lead-form p{grid-column:1/-1}
.lead-form .muted{margin:0}
@media (max-width:480px){.lead-form{grid-template-columns:1fr}}
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.calc label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;gap:4px}
.calc input,.calc select{font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px}
.calc-out{margin-top:16px}
.calc-out td:last-child{text-align:right;white-space:nowrap}
.calc-out tr.total td{font-weight:800;background:var(--emas-soft)}
.big{font-size:1.6rem;font-weight:800;color:var(--hijau)}
.site-foot{background:#06331f;color:#bcd3c4;padding:36px 0 90px;border-top:6px solid var(--emas)}
.site-foot a{color:#e3efe7;display:block;padding:2px 0;font-size:.9rem;text-decoration:none}
.site-foot .foot-top a{display:inline}
.brand-foot{color:#fff;font-weight:800;font-size:1.1rem;margin:0 0 6px}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin:24px 0}
.foot-h{color:var(--emas);font-weight:800;margin:0 0 6px}
.wa-float{position:fixed;right:16px;bottom:16px;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:30}
.btn{white-space:nowrap}
@media (max-width:520px){.brand small{display:none}.topbar{font-size:.72rem}}
/* header v2 */
.topbar{display:none}
.head-end{display:flex;align-items:center;gap:12px;margin-left:22px}
.lang-switch{display:inline-flex;border:1.5px solid var(--hijau);border-radius:999px;overflow:hidden;font-size:.82rem;font-weight:800}
.lang-switch a{padding:.38em .8em;text-decoration:none;color:var(--hijau)}
.lang-switch a.on{background:var(--hijau);color:#fff}
@media (max-width:900px){.head-end{margin-left:auto}}
/* hero v2 */
.hero2{background:var(--songket),linear-gradient(135deg,#08452c 0%,#0b5d3b 60%,#137049 100%);color:#fff;padding:42px 0 50px;border-bottom:6px solid var(--emas)}
.hero2-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
@media (max-width:880px){.hero2-grid{grid-template-columns:1fr}}
.kicker{display:inline-block;background:var(--merah);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.06em;padding:4px 10px;border-radius:6px;text-transform:uppercase}
.hero2 h1{color:#fff;margin:.35em 0 .3em;font-size:clamp(1.9rem,4.6vw,3.1rem)}
.hero2 h1 .hl{color:var(--emas)}
.hero2 .sub{font-size:1.12rem;color:#dcefe3;max-width:620px}
.pain-h{margin:22px 0 10px;font-weight:800;color:#f6dc9a}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;padding:.55em .95em;border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.15);transition:transform .12s}
.chip:hover{transform:translateY(-2px);background:var(--emas-soft)}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:.88rem;color:#cfe7d8}
.trust span::before{content:"✓ ";color:var(--emas);font-weight:800}
.sewa-card{background:#fff;color:var(--ink);border-radius:20px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.25);border-top:6px solid var(--emas)}
.sewa-card h2{margin:0 0 4px;font-size:1.3rem;color:var(--hijau-2)}
.sewa-card .muted{margin:0 0 14px}
.sewa-card label{font-weight:700;font-size:.9rem;display:block}
.sewa-card input[type=range]{width:100%;accent-color:var(--hijau);margin:8px 0 2px}
.sewa-val{font-size:1.6rem;font-weight:800;color:var(--merah)}
.sewa-out{background:var(--emas-soft);border-radius:14px;padding:14px;margin:14px 0}
.sewa-out b{font-size:1.9rem;color:var(--hijau);display:block;line-height:1.2}
.sewa-card .btn{width:100%;text-align:center}
/* listicle + news strip */
.save-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.save-list li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative}
.save-list .amt{display:block;font-size:1.6rem;font-weight:800;color:var(--hijau);font-family:Georgia,serif}
.save-list a{font-weight:700;font-size:.9rem}
.sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec-h .kicker{font-size:.7rem}
.news-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.news-strip a{display:block;background:#fff;border:1px solid var(--line);border-left:5px solid var(--merah);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink)}
.news-strip b{display:block;color:var(--hijau-2);margin:4px 0}
.quick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.quick a{background:var(--soft);color:var(--hijau-2);border:1px solid #cfe3d6;font-weight:700;text-decoration:none;padding:.45em .9em;border-radius:999px;font-size:.9rem}
@media (max-width:520px){
.head-row{gap:8px;min-height:60px}.brand{font-size:.92rem;gap:7px}.brand svg{width:32px;height:32px}
.head-end{gap:6px}.lang-switch{font-size:.72rem}.lang-switch a{padding:.32em .55em}
.head-end .btn-sm{padding:.45em .75em;font-size:.8rem}
.chip{font-size:.84rem;padding:.5em .8em}
.hero2{padding:28px 0 36px}
}
/* ===== v3: photo-led homepage ===== */
.lang-switch{border:1px solid var(--line);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:2px;gap:2px}
.lang-switch a{border-radius:999px;color:var(--muted);line-height:1.2}
.lang-switch a.on{background:var(--hijau);color:#fff}
.lang-switch::before{content:"🌐";padding:0 2px 0 6px;align-self:center;font-size:.85rem}
.hero3{position:relative;color:#fff;background:#08452c url(/img/hero.jpg) center/cover no-repeat;padding:56px 0 86px}
.hero3::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,40,25,.94) 0%,rgba(8,69,44,.82) 45%,rgba(8,69,44,.35) 100%)}
.hero3 .wrap{position:relative}
@media (max-width:880px){.hero3{background-image:url(/img/hero-m.jpg)}.hero3::before{background:linear-gradient(180deg,rgba(6,40,25,.9),rgba(8,69,44,.85))}}
.hero3 h1{color:#fff;font-size:clamp(2rem,4.8vw,3.3rem);margin:.35em 0 .3em;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero3 h1 .hl{color:var(--emas)}
.hero3 .sub{font-size:1.15rem;color:#e3f1e8;max-width:600px}
.searchbox{background:#fff;border-radius:18px;padding:8px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;margin-top:22px;box-shadow:0 14px 34px rgba(0,0,0,.28);max-width:680px}
.searchbox label{display:flex;flex-direction:column;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px;border-right:1px solid var(--line)}
.searchbox select{border:0;font:inherit;font-size:.98rem;font-weight:700;color:var(--ink);background:transparent;padding:2px 0;text-transform:none;letter-spacing:0}
.searchbox button{border:0;border-radius:14px;background:var(--merah);color:#fff;font-weight:800;font-size:1rem;padding:0 22px;cursor:pointer}
.searchbox button:hover{filter:brightness(1.1)}
@media (max-width:640px){.searchbox{grid-template-columns:1fr 1fr}.searchbox label{border-right:0;border-bottom:1px solid var(--line)}.searchbox button{grid-column:1/-1;padding:14px}}
.hero3 .chips{margin-top:18px}
.hero3 .chip{background:rgba(255,255,255,.95)}
.statbar{position:relative;margin-top:-46px;z-index:2}
.statbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:18px;box-shadow:0 12px 30px rgba(11,93,59,.14);border:1px solid var(--line);overflow:hidden}
.statbar .s{padding:18px 16px;border-right:1px solid var(--line)}
.statbar .s:last-child{border-right:0}
.statbar b{display:block;font-family:Georgia,serif;font-size:1.7rem;color:var(--hijau)}
.statbar span{font-size:.86rem;color:var(--muted)}
@media (max-width:760px){.statbar .wrap{grid-template-columns:1fr 1fr;margin:0 16px;padding:0}.statbar .s:nth-child(2){border-right:0}.statbar .s:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
.split.rev{grid-template-columns:1.1fr .9fr}
@media (max-width:820px){.split,.split.rev{grid-template-columns:1fr}}
.photo{border-radius:22px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,.16);position:relative;min-height:280px;background:#ddd center/cover no-repeat}
.photo .cap{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:12px;padding:10px 14px;font-weight:700;font-size:.92rem;max-width:80%}
.photo .cap b{color:var(--merah)}
.banner{position:relative;border-radius:24px;overflow:hidden;color:#fff;padding:40px 30px;background:#0b5d3b url(/img/teres.jpg) center/cover}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,40,25,.9),rgba(6,40,25,.45))}
.banner>*{position:relative}
.banner h2{color:#fff;margin:0 0 6px}
.banner .quick a{background:rgba(255,255,255,.95)}
.need{list-style:none;padding:0;display:grid;gap:10px}
.need li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.need .ic{font-size:1.5rem;line-height:1}
.need b{display:block;color:var(--hijau-2)}
.area-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px}
.area-card{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.area-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,93,59,.14)}
.area-card .top{height:92px;background:linear-gradient(135deg,var(--hijau),#137049);position:relative;display:flex;align-items:flex-end;padding:12px 14px;color:#fff;font-family:Georgia,serif;font-weight:700;font-size:1.12rem}
.area-card .top::after{content:"";position:absolute;inset:0;background:var(--songket);opacity:.8}
.area-card .top span{position:relative;z-index:1}
.area-card .bd{padding:12px 14px}
.area-card .bd p{margin:0 0 8px;font-size:.88rem;color:var(--muted)}
.pill{display:inline-block;font-size:.72rem;font-weight:700;background:var(--emas-soft);color:#7a5a0e;border-radius:999px;padding:2px 8px;margin:0 4px 4px 0}
.cta-band{background:linear-gradient(135deg,var(--merah),#b02a3c);color:#fff;border-radius:22px;padding:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cta-band h2{color:#fff;margin:0}
.photo-credit{font-size:.75rem;color:#86a0a5}
.searchbox{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.searchbox button{white-space:nowrap;padding:0 18px}
.searchbox select{width:100%;min-width:0}
@media (max-width:640px){.searchbox{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.searchbox button{padding:14px;grid-column:1/-1}.searchbox label:nth-child(3){grid-column:1/-1}}
@media (max-width:880px){.hero3{background-position:60% center}.hero3::before{background:linear-gradient(180deg,rgba(6,40,25,.55) 0%,rgba(6,40,25,.8) 45%,rgba(8,69,44,.92) 100%)}}