/* BRHC Cikarang Timur — gaya mengikuti template "Alquran" (hijau + kuning, Lexend) */
:root{
  --g:#1d8e5a;--g2:#167049;--g3:#0f5a3a;--y:#ffd050;--y2:#f2b81f;--gold:#d6a640;
  --dark:#0f1c16;--dark2:#13241c;--cream:#faf8f1;--cream2:#f6f3ea;--mint:#e7f3ec;--grey:#f1f1ef;
  --head:#151515;--text:#6d716e;--line:#e4e4df;
  --f:'Lexend',system-ui,sans-serif;--ar:'Amiri',serif;
  --wrap:1240px;--r:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-weight:300;color:var(--text);background:#fff;font-size:15.5px;line-height:1.75;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,h5{color:var(--head);font-weight:500;line-height:1.25}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tombol */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#fff;font-weight:600;font-size:14px;padding:13px 28px;border-radius:4px;border:0;cursor:pointer;transition:.25s;line-height:1.2}
.btn:hover{background:var(--g3)}
.btn.y{background:var(--y);color:var(--head)}.btn.y:hover{background:var(--y2)}
.btn.w{background:#fff;color:var(--head)}.btn.w:hover{background:var(--y)}
.btn.sm{padding:10px 20px;font-size:13px}
.btn .ico{font-size:17px}

/* judul seksi */
.sub{display:inline-block;color:var(--g);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.ttl{font-size:40px;margin-bottom:18px}
.center{text-align:center}
.center .ttl{max-width:640px;margin-left:auto;margin-right:auto}
.sec{padding:110px 0}
.bism{font-family:var(--ar);color:var(--g);font-size:26px;line-height:1;opacity:.85;direction:rtl}
.sub-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sub-row .sub{margin:0}
.sub-row .bism{opacity:.25;color:#777;font-size:30px}

/* ===== top bar ===== */
.top{background:var(--g);color:#fff;font-size:13px;font-weight:400}
.top .in{display:flex;justify-content:space-between;align-items:center;height:48px}
.top .l{display:flex;align-items:stretch;height:100%;position:relative}
.top .l .grad{display:flex;align-items:center;gap:28px;padding:0 60px 0 16px;background:linear-gradient(90deg,var(--g) 0%,#8db63a 70%,var(--y2) 100%);clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);margin-left:-16px}
.top .l .bism{color:#4ee08f;opacity:1;font-size:24px;display:flex;align-items:center;padding-left:14px}
.top span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.top .r{display:flex;gap:32px}
.top .ico{font-size:14px}

/* ===== header ===== */
.hdr{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr.stuck{box-shadow:0 8px 30px rgba(0,0,0,.07)}
.hdr .in{display:flex;align-items:center;height:110px;gap:30px;transition:height .3s}
.hdr.stuck .in{height:84px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:54px;width:auto}
.logo b{display:block;font-weight:600;color:var(--head);font-size:15px;line-height:1.2}
.logo small{display:block;font-size:12px;color:var(--g);font-weight:500;line-height:1.3}
.nav{display:flex;gap:6px;margin:0 auto}
.nav>li{list-style:none;position:relative}
.nav>li>a{display:block;padding:12px 15px;font-size:14.5px;font-weight:500;color:var(--head);text-transform:uppercase;letter-spacing:.02em;transition:.2s}
.nav>li>a:hover,.nav>li.on>a{color:var(--g)}
.nav .dd{position:absolute;top:100%;left:0;min-width:240px;background:#fff;box-shadow:0 15px 40px rgba(0,0,0,.1);border-top:3px solid var(--g);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.nav li:hover .dd{opacity:1;visibility:visible;transform:none}
.nav .dd a{display:block;padding:8px 22px;font-size:14px;font-weight:400;color:var(--head)}
.nav .dd a:hover{color:var(--g);padding-left:27px}
.hact{display:flex;align-items:center;gap:14px}
.cbtn{width:46px;height:46px;border-radius:50%;background:#eeeeec;display:grid;place-items:center;color:var(--head);border:0;cursor:pointer;font-size:18px;transition:.2s}
.cbtn:hover{background:var(--g);color:#fff}
.burger{display:none}

/* menu mobile */
.mnav{position:fixed;inset:0;z-index:90;visibility:hidden}
.mnav .bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:.3s}
.mnav .pn{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;transform:translateX(100%);transition:.3s;overflow-y:auto;padding:22px}
.mnav.open{visibility:visible}.mnav.open .bg{opacity:1}.mnav.open .pn{transform:none}
.mnav .pn .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.mnav .pn .hd img{height:44px}
.mnav ul{list-style:none}
.mnav li a{display:block;padding:12px 2px;border-bottom:1px solid var(--line);font-weight:500;color:var(--head)}
.mnav li ul a{padding-left:18px;font-weight:400;font-size:14px}
.mnav .btn{margin-top:22px;width:100%;justify-content:center}

/* pencarian */
.srch{position:fixed;inset:0;background:rgba(15,28,22,.96);z-index:95;display:none;padding:12vh 20px 20px}
.srch.open{display:block}
.srch .box{max-width:720px;margin:0 auto}
.srch input{width:100%;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.3);color:#fff;font-size:28px;padding:12px 0;outline:0}
.srch input:focus{border-color:var(--y)}
.srch .res{margin-top:20px;max-height:55vh;overflow:auto}
.srch .res a{display:block;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.srch .res a small{display:block;color:rgba(255,255,255,.55);font-size:13px}
.srch .res a:hover{color:var(--y)}
.srch .x{position:absolute;top:24px;right:24px;background:var(--y);color:var(--head)}

/* ===== hero ===== */
.hero{position:relative;min-height:840px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:#3f4a3d url(../img/hero.webp) center/cover no-repeat;padding:110px 0 200px}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,52,38,.72),rgba(23,40,30,.62) 60%,rgba(23,40,30,.78))}
.hero .in{position:relative;max-width:820px}
.hero .sub{color:#fff;font-size:15px}
.hero h1{color:#fff;font-size:80px;font-weight:600;line-height:1.08;margin:6px 0 24px}
.hero p{font-size:19px;font-weight:400;max-width:620px;margin:0 auto 34px;line-height:1.6}
.hero .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* strip fitur */
.feat{position:relative;z-index:2;margin-top:-82px}
.feat .box{background:var(--mint) url(../img/orn/tile-mint.svg) -30px center/200px repeat-x;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:60px 90px}
.feat .it{display:flex;align-items:center;gap:30px}
.ybadge{width:110px;height:110px;border-radius:50%;background:var(--y);border:2px solid var(--head);display:grid;place-items:center;flex:none;color:var(--head);font-size:50px}
.ybadge .ico{stroke-width:1.4}
.feat h3{font-size:21px;font-weight:400;line-height:1.45}

/* sambutan */
.welcome{position:relative}
.dots{position:absolute;width:240px;height:440px;background:radial-gradient(#d4d4d4 1.6px,transparent 1.8px) 0 0/22px 22px;opacity:.7;pointer-events:none}
.welcome .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.welcome .txt>p{margin-bottom:28px}
.welcome .mini{display:grid;grid-template-columns:170px 1fr;gap:34px;align-items:start;margin:34px 0}
.welcome .mini img{width:170px;height:182px;object-fit:cover;border-radius:3px}
.welcome .mini .pace{display:flex;align-items:center;gap:22px;margin-top:22px}
.gcirc{width:74px;height:74px;border-radius:50%;background:var(--g);display:grid;place-items:center;color:var(--y);font-size:32px;flex:none}
.pace b{color:var(--g);font-size:19px;font-weight:400;line-height:1.5}
.pic{position:relative;padding-left:52px;margin-right:calc((100vw - var(--wrap))/-2 - 20px)}
.pic img{width:100%;height:580px;object-fit:cover}
.pic:before{content:"";position:absolute;left:52px;top:40px;bottom:0;width:14px;margin-left:-14px;background:linear-gradient(var(--y2) 0 14%,var(--g) 14%)}
.ribbon{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:20px;background:linear-gradient(90deg,var(--g),#7cbf50 40%,var(--y) 75%);color:var(--head);font-size:23px;padding:12px 90px 12px 24px;clip-path:polygon(0 0,100% 0,calc(100% - 40px) 50%,100% 100%,0 100%);font-weight:400}
.ribbon .ico{font-size:24px}
.ar-deco{position:absolute;font-family:var(--ar);color:#2bc26b;font-size:110px;line-height:1;pointer-events:none;opacity:.9;direction:rtl}

/* layanan gelap */
.dk{background:var(--dark);position:relative;overflow:hidden;color:#c9d0cb}
.dk:before{content:"";position:absolute;inset:0;pointer-events:none;background:url(../img/orn/medal-dark.svg) -230px 55%/560px no-repeat,url(../img/orn/medal-dark.svg) calc(100% + 230px) 30%/560px no-repeat,url(../img/orn/medal-dark.svg) 50% calc(100% + 330px)/520px no-repeat;opacity:.9}
.dk .wrap{position:relative}
.dk .ttl{color:#fff}
.flour{position:absolute;top:70px;width:220px;height:44px;background:url(../img/orn/flourish.svg) 0 50%/contain no-repeat}
.flour.l{left:0}.flour.r{right:0;transform:scaleX(-1)}.flour.b{top:auto;bottom:150px}
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.scard{background:#fff;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:.3s}
.scard:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.18)}
.scard .bd{padding:38px 30px 30px;position:relative;flex:1;background:url(../img/orn/card-star.svg) 12px 54px/150px no-repeat}
.scard .hd{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:22px}
.scard h3{font-size:22px;font-weight:500}
.scard .yb{width:66px;height:66px;border-radius:50%;background:var(--y);border:1.5px solid var(--head);display:grid;place-items:center;color:var(--head);font-size:30px;flex:none}
.scard p{font-size:15px;line-height:1.75;position:relative}
.scard .ft{background:#f0f0ee;padding:16px 30px;font-size:13.5px;font-weight:600;color:var(--head);display:flex;align-items:center;gap:10px}
.scard .ft .ico{font-size:17px;transition:.2s}
.scard:hover .ft .ico{transform:translateX(5px)}
.scard.cream .bd{background-color:var(--cream)}
.scard.top-ic{overflow:visible;margin-top:30px}
.scard.top-ic .yb{position:absolute;top:-30px;left:30px;width:60px;height:60px;font-size:26px}
.scard.top-ic .bd{padding-top:52px}

/* blok capaian */
.reach{position:relative;margin-top:-130px;z-index:2}
.reach .box{background:var(--g);display:grid;grid-template-columns:1fr 1.12fr;color:#fff;position:relative;overflow:hidden}
.reach .box:before{content:"";position:absolute;inset:0;background:url(../img/orn/tile-green.svg) -40px 50%/230px repeat-x;pointer-events:none}
.reach .l{padding:50px 40px 50px 115px;position:relative}
.reach h2{color:#fff;font-size:32px;font-weight:600;margin-bottom:22px}
.reach .l p{font-weight:400;font-size:15px;margin-bottom:26px}
.reach .num{display:flex;align-items:center;gap:26px}
.reach .num .ybadge{width:90px;height:90px;font-size:40px;border:0}
.reach .num b{display:block;font-size:44px;font-weight:600;line-height:1.1}
.reach .num span{font-size:19px;font-weight:400}
.reach .r{background:var(--y);border-radius:34px 34px 0 0;margin-top:44px;padding:9px 9px 0}
.reach .r .in{background:#fff;border-radius:28px 28px 0 0;height:100%;padding:40px 40px 20px;display:grid;gap:28px}
.stat{display:grid;grid-template-columns:92px 1fr;gap:24px;align-items:start}
.stat .sq{height:88px;border:1.5px solid var(--head);border-radius:4px;display:grid;place-items:center;font-size:36px;font-weight:600;line-height:1;text-align:center}
.stat .sq.y{background:var(--y);color:var(--head)}
.stat .sq.g{background:var(--g);color:#fff}
.stat .sq small{display:block;font-size:13px;font-weight:500}
.stat h4{font-size:19px;font-weight:400;margin-bottom:4px}
.stat p{font-size:13.5px;line-height:1.65;color:var(--text)}

/* kartu paket (gaya kursus) */
.crs-sec{background:var(--cream);padding-top:240px}
.crs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px}
.ccard{background:#fff;display:flex;flex-direction:column;border-radius:3px;overflow:hidden;transition:.3s}
.ccard:hover{box-shadow:0 18px 40px rgba(0,0,0,.08)}
.ccard .im{position:relative;height:190px}
.ccard .im img{width:100%;height:100%;object-fit:cover}
.ccard .tag{position:absolute;top:10px;right:10px;background:var(--g);color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:2px}
.ccard .tag.y{background:var(--y);color:var(--head)}
.ccard .av{position:absolute;left:28px;bottom:-24px;width:48px;height:48px;border-radius:50%;background:var(--g);border:4px solid #fff;color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px}
.ccard .bd{padding:40px 28px 28px;display:flex;flex-direction:column;flex:1}
.stars{color:var(--y2);letter-spacing:3px;font-size:13px}
.ccard h3{font-size:21px;font-weight:500;margin:8px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ccard ul{list-style:none;font-size:13.5px;color:var(--head);margin-bottom:18px;display:grid;gap:4px}
.ccard ul li{display:flex;gap:8px;align-items:flex-start}
.ccard ul li .ico{color:var(--g);font-size:15px;margin-top:4px}
.ccard .bt{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.price{display:inline-block;background:#e9f1ec;padding:5px 14px;border-radius:2px;color:var(--head);font-weight:500;font-size:15px}

/* CTA gradien */
.cta{background:linear-gradient(90deg,#4fbe7c,#a5bf45 50%,#f2b81f);border-radius:3px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:50px 70px}
.cta:before,.cta:after{content:"";position:absolute;width:150px;height:170px;opacity:.22;background:url(../img/orn/mihrab.svg) center bottom/contain no-repeat;pointer-events:none}
.cta:before{left:30px;bottom:-20px;box-shadow:none}.cta:after{right:24px;bottom:-20px}.cta>.orn2{position:absolute;right:150px;bottom:-30px;width:110px;height:130px;opacity:.15;background:url(../img/orn/mihrab.svg) center bottom/contain no-repeat}
.cta h2{color:#fff;font-size:34px;font-weight:500;position:relative;max-width:700px}
.cta .btn{position:relative;flex:none}
.cta .mos{width:120px;height:120px;border-radius:50%;background:var(--y);border:1.5px solid var(--head);display:grid;place-items:center;color:var(--head);font-size:62px;flex:none;position:relative}
.cta-sec{padding:80px 0 0}
.cta-foot{position:relative;z-index:3;margin-bottom:-75px}

/* kenapa memilih */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.wcard{border:1px solid #222;border-radius:44px;padding:44px 22px 34px;text-align:center;transition:.3s}
.wcard:nth-child(4n+1){background:#faf8ec}.wcard:nth-child(4n+2){background:#e9f3ee}.wcard:nth-child(4n+3){background:#f3f3f3}.wcard:nth-child(4n+4){background:#f1f1e9}
.wcard:hover{transform:translateY(-6px)}
.wcard .ybadge{width:96px;height:96px;font-size:44px;margin:0 auto 26px;border-width:1.5px}
.wcard h3{font-size:21px;font-weight:500;margin-bottom:14px}
.wcard p{font-size:14.5px;line-height:1.75}

/* kutipan / review */
.rev{background:linear-gradient(90deg,#f8f0d8,#d6eedf);position:relative;padding:100px 0;overflow:hidden}
.rev .corner{position:absolute;left:0;width:220px;height:220px;background:url(../img/orn/corner.svg) 0 0/contain no-repeat;opacity:.85;pointer-events:none}
.rev .corner.t{top:0}.rev .corner.b{bottom:0;transform:scaleY(-1)}.rev .corner.r{left:auto;right:0;transform:scaleX(-1)}.rev .corner.rb{left:auto;right:0;bottom:0;transform:scale(-1,-1)}
.rev .grid{display:grid;grid-template-columns:460px 1fr;gap:74px;align-items:center}
.rev .im{margin-left:-36px}
.rev .im img{width:100%;height:450px;object-fit:cover}
.rev .rate{display:inline-block;background:#fff;padding:5px 14px;color:var(--y2);font-size:14px;letter-spacing:2px;border-radius:2px}
.rev h3{font-size:26px;font-weight:400;margin:24px 0 20px}
.rev .slides{position:relative;min-height:230px}
.rev .sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:.6s}
.rev .sl.on{opacity:1;visibility:visible;position:relative}
.rev blockquote{font-size:21px;line-height:1.7;color:#727272;font-weight:300;margin-bottom:28px}
.who{display:flex;align-items:center;gap:20px}
.who .av{width:90px;height:90px;border-radius:50%;background:var(--g);color:var(--y);display:grid;place-items:center;font-size:36px}
.who b{display:block;color:var(--head);font-weight:400;font-size:19px}
.who small{font-size:14px}
.rev .dots2{display:flex;gap:6px;justify-content:flex-end;margin-top:-20px}
.rev .dots2 button{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--g3);background:transparent;cursor:pointer;padding:0}
.rev .dots2 button.on{background:var(--g)}
.rev .ar-deco{right:16%;top:80px;color:#7ad79c;opacity:.6;font-size:96px}

/* langkah (gaya harga) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.pcard{border:1px solid #222;border-radius:44px;background:#faf8ec;padding:44px 18px 36px;text-align:center;display:flex;flex-direction:column;align-items:center}
.pcard .cir{width:96px;height:96px;border-radius:50%;background:var(--y);border:1.5px solid var(--head);display:grid;place-items:center;line-height:1;color:var(--head);margin-bottom:24px}
.pcard .cir b{font-size:34px;font-weight:600}
.pcard .cir small{font-size:12.5px;font-weight:600;display:block;margin-top:-14px}
.pcard h3{font-size:21px;font-weight:500;margin-bottom:18px}
.pcard .hl{background:#fde6a3;width:100%;padding:8px 12px;font-size:13px;color:var(--head);font-weight:400;border-radius:3px;margin-bottom:16px;text-align:left}
.pcard .hl:before{content:"•";margin:0 12px 0 4px}
.pcard ul{text-align:left;font-size:13px;padding-left:38px;margin-bottom:22px;line-height:1.8;width:100%}
.pcard .btn{margin-top:auto}
.pcard .old{font-size:12px;color:#999}

/* galeri */
.gal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:34px}
.gal4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.gal4 a,.galg a{display:block;overflow:hidden;position:relative}
.gal4 img{width:100%;height:390px;object-fit:cover;transition:.5s}
.gal4 a:hover img,.galg a:hover img{transform:scale(1.06)}
.gal4 a:after,.galg a:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:#fff;background:rgba(29,142,90,.55);opacity:0;transition:.3s;font-weight:200}
.gal4 a:hover:after,.galg a:hover:after{opacity:1}
.galg{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.galg img{width:100%;height:330px;object-fit:cover;transition:.5s}
.galg figcaption{font-size:13.5px;padding:10px 2px 0;color:var(--head)}
.lb{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:30px}
.lb.open{display:flex}
.lb img{max-height:86vh;max-width:92vw;object-fit:contain}
.lb .x{position:absolute;top:20px;right:20px}
.lb .nx,.lb .pv{position:absolute;top:50%;transform:translateY(-50%)}
.lb .nx{right:20px}.lb .pv{left:20px}

/* artikel */
.blog3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
.bcard{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.bcard .im{height:240px;overflow:hidden}
.bcard .im img{width:100%;height:100%;object-fit:cover;transition:.5s}
.bcard:hover .im img{transform:scale(1.06)}
.bcard .bd{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.meta{display:flex;gap:22px;font-size:13px;margin-bottom:14px;flex-wrap:wrap}
.meta span{display:inline-flex;align-items:center;gap:8px}
.bcard h3{font-size:19px;font-weight:500;margin-bottom:14px;line-height:1.45}
.bcard h3 a:hover{color:var(--g)}
.bcard p{font-size:14.5px;margin-bottom:22px}
.bcard .au{margin-top:auto;border:1px solid var(--line);border-radius:4px;padding:10px 10px 10px 14px;display:flex;align-items:center;justify-content:space-between}
.bcard .au span{display:flex;align-items:center;gap:12px;color:var(--head);font-size:14px;font-weight:400}
.bcard .au i{width:36px;height:36px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--g);font-style:normal;font-weight:600;font-size:13px}

/* footer */
.ftr{background:#0c1712;color:#fff;position:relative;overflow:hidden}
.ftr:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 35%,rgba(64,140,96,.28),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cg fill='%23ffffff' opacity='.035'%3E%3Crect x='120' y='40' width='26' height='360'/%3E%3Cpath d='M133 0l16 40h-32z'/%3E%3Cpath d='M220 400V250c0-60 60-100 120-130 60 30 120 70 120 130v150z'/%3E%3Crect x='500' y='120' width='22' height='280'/%3E%3C/g%3E%3C/svg%3E") 50% 100%/900px no-repeat}
.ftr .main{position:relative;padding:150px 0 70px;display:grid;grid-template-columns:1.1fr 1fr 1fr 1.15fr;gap:40px}
.ftr .lg img{height:62px;width:auto}
.ftr .lg{padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:24px;display:inline-block}
.ftr p,.ftr li{font-size:14.5px;font-weight:400}
.ftr h4{color:#fff;font-size:21px;font-weight:600;margin-bottom:24px}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr ul a{display:flex;align-items:center;gap:10px;transition:.2s}
.ftr ul a:hover{color:var(--y)}
.ftr ul .ico{color:#2cc26c;font-size:17px}
.soc{display:flex;gap:10px;margin-top:28px}
.soc a{width:44px;height:44px;border-radius:50%;background:#1c3027;display:grid;place-items:center;font-size:16px;transition:.2s}
.soc a:hover{background:var(--g)}
.nl{background:#16251e;border-radius:6px;padding:26px 20px}
.nl p{margin-bottom:12px}
.nl .hr{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.18);padding:6px 0 14px;font-size:14px}
.nl .hr .ico{color:var(--y);font-size:20px}
.ftr .bar{position:relative;border-top:1px solid rgba(255,255,255,.08);background:#0a130f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='60' viewBox='0 0 70 60'%3E%3Cpath fill='%23ffffff' opacity='.05' d='M35 14c8 6 16 12 16 24v22H19V38c0-12 8-18 16-24zM33 6h4v8h-4zM6 30h6v30H6zM58 30h6v30h-6z'/%3E%3C/svg%3E") 0 100%/70px repeat-x}
.ftr .bar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:26px;padding-bottom:26px;font-size:13.5px;gap:20px;flex-wrap:wrap}
.ftr .bar nav{display:flex;gap:20px;font-weight:500;text-transform:uppercase}
.ftr .bar nav a:hover{color:var(--y)}

/* banner halaman */
.pban{position:relative;height:380px;display:flex;align-items:center;justify-content:center;text-align:center;background:#183224 url(../img/banner.webp) center/cover}
.pban:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,38,26,.88),rgba(20,40,28,.7) 50%,rgba(14,30,22,.85))}
.pban .in{position:relative;padding:0 20px}
.pban h1{color:#fff;font-size:48px;font-weight:600;margin-bottom:12px;max-width:820px}
.crumb{color:#fff;font-size:15px;font-weight:500;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.crumb a:hover{color:var(--y)}
.crumb span:last-child{text-transform:uppercase}

/* tentang */
.about2 .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.collage{position:relative;padding-bottom:40px}
.collage .a{width:80%;height:500px;object-fit:cover}
.collage .b{position:absolute;right:6%;bottom:60px;width:48%;height:250px;object-fit:cover;border:6px solid #fff}
.collage:after{content:"";position:absolute;right:12%;top:0;width:14px;height:220px;background:linear-gradient(var(--y2) 0 42%,var(--g) 42%)}
.collage .ribbon{bottom:20px;left:12px;font-size:19px}
.collage .ar-deco{top:30px;left:70px;font-size:96px}
.points{display:grid;grid-template-columns:1fr auto;gap:20px;margin:30px 0}
.points ul{list-style:none;display:grid;gap:22px}
.points li{display:flex;align-items:center;gap:20px;color:var(--g);font-size:17.5px;font-weight:400;line-height:1.4}
.gradc{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--y2),var(--g));display:grid;place-items:center;color:#fff;font-size:26px;flex:none}
.seal{width:120px;height:120px;border-radius:50%;background:var(--y);position:relative;display:grid;place-items:center;color:var(--g3);font-size:40px;align-self:center}
.seal svg.txt{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.peace{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.peace img{width:150px;height:118px;object-fit:cover}
.peace h4{font-size:17px;font-weight:500;position:relative;padding-top:10px}
.peace h4:before{content:"";position:absolute;top:0;left:0;width:36px;height:4px;background:linear-gradient(90deg,var(--y) 50%,var(--g) 50%)}
.peace p{font-size:13.5px;line-height:1.65}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.vm .c{background:var(--cream);padding:40px;border-radius:6px;border-top:4px solid var(--g)}
.vm .c:nth-child(2){border-color:var(--y2)}
.vm h3{font-size:24px;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.vm h3 .gcirc{width:52px;height:52px;font-size:22px}
.vm ul{padding-left:20px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:6px;text-align:center;padding:36px 20px 28px;position:relative;overflow:hidden;transition:.3s}
.tcard:hover{border-color:var(--g);transform:translateY(-4px)}
.tcard .av{width:110px;height:110px;margin:0 auto 18px;border-radius:50%;background:var(--mint);border:3px solid var(--y);display:grid;place-items:center;color:var(--g);font-size:36px;font-weight:600}
.tcard h4{font-size:19px;font-weight:500}
.tcard small{color:var(--g);font-weight:500;font-size:13.5px}

/* detail layanan */
.frame{position:relative;max-width:900px;margin:0 auto;color:#fff;text-align:center;padding:120px 160px}
.frame>svg{position:absolute;inset:0;width:100%;height:100%}
.frame .c{position:relative}
.frame .yb{width:86px;height:86px;border-radius:50%;background:var(--y);display:grid;place-items:center;color:var(--head);font-size:40px;margin:0 auto 26px}
.frame h2{color:#fff;font-size:34px;margin-bottom:16px;font-weight:500}
.frame h3{color:#fff;font-size:21px;margin:26px 0 10px;font-weight:500}
.frame p{font-weight:400;font-size:15px;line-height:1.75}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.detail h3{font-size:26px;margin-bottom:18px}
.detail p{margin-bottom:16px}
.checks{list-style:none;display:grid;gap:16px;margin-top:26px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.checks li i{width:22px;height:22px;background:#3d3d3d;color:#fff;border-radius:3px;display:grid;place-items:center;font-size:13px;flex:none;margin-top:4px;font-style:normal}
.checks.g li i{background:var(--g)}
.mosque{width:100%;height:auto}
.strip{display:grid;grid-template-columns:repeat(4,1fr)}
.strip img{width:100%;height:240px;object-fit:cover}
.note{background:var(--cream);border-left:4px solid var(--y2);padding:20px 24px;font-size:14px;border-radius:0 4px 4px 0;margin-top:26px}
.note b{color:var(--head);font-weight:500}
.svc-more{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.svc-more a{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;gap:14px;align-items:center;font-weight:500;color:var(--head);transition:.2s}
.svc-more a:hover{border-color:var(--g);color:var(--g)}
.svc-more .yb{width:46px;height:46px;border-radius:50%;background:var(--y);display:grid;place-items:center;font-size:21px;flex:none;color:var(--head)}

/* layanan lain (list chip) */
.addon{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.addon .it{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;gap:18px}
.addon .it .gcirc{width:54px;height:54px;font-size:24px}
.addon h4{font-size:17px;margin-bottom:4px}
.addon p{font-size:14px;line-height:1.65}

/* paket lengkap */
.pkg{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
.pkg .pcard .cir b{font-size:22px}
.pkg-img{max-width:440px;margin:0 auto;border-radius:6px;box-shadow:0 20px 40px rgba(0,0,0,.1)}

/* faq */
.faqg{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.faqg h2{font-size:38px;margin-bottom:12px}
.acc{background:var(--cream2);padding:26px;border-radius:4px;display:grid;gap:12px}
.acc details{background:#fff;border-radius:3px}
.acc summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;justify-content:space-between;gap:16px;color:var(--head);font-weight:400;font-size:15px}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";font-size:22px;line-height:1;font-weight:300}
.acc details[open] summary{border-bottom:1px solid var(--line)}
.acc details[open] summary:after{content:"–"}
.acc .a{padding:14px 18px 18px;font-size:14.5px}
.help{background:linear-gradient(180deg,#a9dcb9,var(--y2));text-align:center;padding:80px 34px 40px;border-radius:3px;position:relative;margin-top:60px}
.help .seal{position:absolute;top:-60px;left:50%;margin-left:-60px;background:#fff}
.help p{color:var(--head);font-size:21px;font-weight:400;line-height:1.45;margin-bottom:26px}
.help .ph{width:76px;height:76px;border-radius:50%;background:#fdf3cf;display:grid;place-items:center;margin:0 auto 20px;font-size:32px;color:var(--head)}
.help b{display:block;color:var(--head);font-size:22px;font-weight:500}
.help small{color:var(--g);font-size:19px;font-weight:500}

/* kontak */
.cinfo{background:var(--cream2);border-radius:4px;display:grid;grid-template-columns:repeat(3,1fr);padding:40px 0}
.cinfo .it{text-align:center;padding:0 26px}
.cinfo .it+.it{border-left:1px solid #d9d6cb}
.cinfo .wc{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 20px;font-size:26px;color:#6c7a72}
.cinfo h3{font-size:21px;font-weight:500;margin-bottom:12px}
.cinfo p{font-size:14.5px;line-height:1.7}
.cinfo .big{color:var(--g);font-size:18px;font-weight:400}
.form{display:grid;gap:16px;margin-top:20px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form select,.form textarea{width:100%;border:1px solid #222;border-radius:3px;padding:12px 18px;font-size:14px;outline:0;background:#fff;color:var(--head)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(29,142,90,.12)}
.form textarea{min-height:160px;resize:vertical}
.form label{font-size:13.5px;color:var(--head);font-weight:400;display:block;margin-bottom:6px}
.map{margin-top:70px;filter:grayscale(.2)}
.map iframe{width:100%;height:440px;border:0;display:block}
.hours{list-style:none;display:grid;gap:6px;font-size:14.5px}

/* artikel detail */
.post{display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:start}
.post .main{background:var(--cream)}
.post .main>img{width:100%;height:420px;object-fit:cover}
.post .art{padding:40px 30px}
.post .art h2{font-size:24px;margin:30px 0 12px}
.post .art p{margin-bottom:16px}
.post .art ul{padding-left:22px;margin-bottom:16px}
.post .art blockquote{background:#fff;border:1px solid var(--line);padding:26px 24px;color:var(--g);font-size:19px;line-height:1.6;margin:24px 0;font-weight:400}
.side{display:grid;gap:24px}
.side .w{background:var(--cream);border:1px solid var(--line);padding:30px 24px}
.side h4{font-size:21px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.side ul{list-style:none}
.side ul a{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.side ul a:hover{color:var(--g)}
.lnews{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.lnews img{width:70px;height:70px;border-radius:50%;object-fit:cover}
.lnews small{display:inline-block;border:1px solid var(--line);padding:0 8px;font-size:12px;background:#fff}
.lnews b{display:block;color:var(--head);font-weight:500;font-size:14.5px;line-height:1.4;margin-top:4px}
.lnews:hover b{color:var(--g)}
.sbox{display:flex;border:1px solid var(--line);background:#fff}
.sbox input{flex:1;border:0;padding:12px 16px;outline:0;font-size:14px;min-width:0}
.sbox button{border:0;background:none;padding:0 16px;cursor:pointer;color:var(--head)}

/* 404 */
.e404{text-align:center;padding:120px 20px}
.e404 b{display:block;font-size:150px;color:var(--g);line-height:1;font-weight:700}

/* WA mengambang */
.wa-fl{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.25);font-size:30px;transition:.2s}
.wa-fl:hover{transform:scale(1.08)}
.totop{position:fixed;right:30px;bottom:92px;z-index:60;width:42px;height:42px;border-radius:50%;background:var(--y);color:var(--head);border:0;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transition:.3s;font-size:18px}
.totop.on{opacity:1;visibility:visible}

/* animasi muncul */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}

/* ===== responsif ===== */
@media (max-width:1200px){
  .nav>li>a{padding:12px 10px;font-size:13.5px}
  .top .r span.hide-md{display:none}
  .hdr .hact .btn{display:none}
}
@media (max-width:1024px){
  .nav,.top{display:none}
  .burger{display:grid}
  .hdr .in{height:84px}
  .hero{min-height:640px}
  .hero h1{font-size:58px}
  .feat .box{grid-template-columns:1fr;padding:40px;gap:24px;justify-items:start}
  .welcome .grid,.about2 .grid,.rev .grid,.detail,.post,.faqg{grid-template-columns:1fr}
  .pic{margin-right:0}
  .svc3,.blog3{grid-template-columns:1fr 1fr}
  .reach{margin-top:-80px}
  .reach .box{grid-template-columns:1fr}
  .reach .l{padding:46px 34px}
  .reach .r{margin:0 20px}
  .crs,.why,.steps,.pkg,.team,.gal4,.galg,.svc-more{grid-template-columns:1fr 1fr}
  .addon{grid-template-columns:1fr 1fr}
  .cta{padding:40px;flex-wrap:wrap}
  .ftr .main{grid-template-columns:1fr 1fr}
  .rev .im{margin:0}
  .frame{padding:100px 90px}
}
@media (max-width:700px){
  body{font-size:15px}
  .sec{padding:76px 0}
  .ttl{font-size:30px}
  .hero{min-height:560px;padding:80px 0 130px}
  .hero h1{font-size:40px}
  .hero p{font-size:16px}
  .feat{margin-top:-60px}
  .feat .box{padding:34px 24px}
  .feat .it{gap:20px}
  .ybadge{width:84px;height:84px;font-size:38px}
  .feat h3{font-size:18px}
  .welcome .mini{grid-template-columns:1fr}
  .welcome .mini img{width:100%;height:220px}
  .pic{padding-left:22px}.pic:before{left:22px}
  .pic img{height:380px}
  .ribbon{font-size:16px;padding:10px 60px 10px 16px}
  .svc3,.blog3,.crs,.why,.steps,.pkg,.team,.gal4,.galg,.addon,.svc-more,.vm,.strip{grid-template-columns:1fr}
  .gal4 img{height:300px}
  .reach .l{padding:40px 24px}
  .reach h2{font-size:26px}
  .reach .r{margin:0 12px}
  .reach .r .in{padding:30px 22px}
  .stat{grid-template-columns:76px 1fr;gap:16px}
  .stat .sq{height:76px;font-size:28px}
  .crs-sec{padding-top:150px}
  .cta{padding:34px 26px}
  .cta h2{font-size:24px}
  .cta .mos{display:none}
  .rev{padding:70px 0}
  .rev .im img{height:300px}
  .rev blockquote{font-size:17px}
  .rev .slides{min-height:300px}
  .gal-head{flex-direction:column}
  .ftr .main{grid-template-columns:1fr;padding-top:130px}
  .pban{height:280px}
  .pban h1{font-size:32px}
  .collage .a{width:100%;height:380px}
  .collage .b{width:56%;height:170px;right:0}
  .points{grid-template-columns:1fr}
  .cinfo{grid-template-columns:1fr;gap:30px}
  .cinfo .it+.it{border-left:0;border-top:1px solid #d9d6cb;padding-top:30px}
  .form .row2{grid-template-columns:1fr}
  .frame{padding:48px 22px;background:var(--g3);border:4px solid var(--gold);border-radius:24px}
  .frame>svg{display:none}
  .frame h2{font-size:26px}
  .post .main>img{height:260px}
  .post .art{padding:28px 20px}
  .faqg h2{font-size:28px}
  .e404 b{font-size:100px}
  .logo img{height:46px}
  .logo b{font-size:13.5px}.logo small{font-size:11px}
  .dots{display:none}
}
@media (max-width:420px){.logo div{display:none}}

/* perbaikan */
.scard{color:var(--text)}
.top .l .bism{font-size:20px;line-height:48px;overflow:hidden;height:48px}
.btn{white-space:nowrap}
@media (max-width:1500px){.hdr .logo div{display:none}}
@media (max-width:1024px){.hdr .logo div{display:block}}
@media (max-width:420px){.hdr .logo div{display:none}}
.top .l .bism{display:block;font-size:19px;line-height:48px;height:48px;padding-top:2px}
@media (max-width:700px){.reach .num b{font-size:30px}.reach .num span{font-size:15px}}
.top .l .bism{margin-right:24px}

.divider{display:block;width:120px;height:20px;margin:0 auto 14px;background:url(../img/orn/divider.svg) center/contain no-repeat}
.left .divider,.txt .divider{margin-left:0}
@media (max-width:700px){.flour{width:140px;top:40px}.flour.b{bottom:110px}.rev .corner{width:130px;height:130px}.rev .corner.r,.rev .corner.rb{display:none}.dk:before{background-size:380px,380px,380px}}