:root{--p:#93357f;--pd:#5e3a63;--pl:#9b5594;--tint:#f6eef5;--bg:#fff;--tx:#2b2430;--mu:#5a5a5a;--card:#fff;--bd:#eadfe9;--h:#5e3a63;--sh:0 8px 28px rgba(94,58,99,.12);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17111a;--tx:#f1e9f1;--mu:#b9aeb9;--card:#211826;--bd:#35283a;--tint:#1e1523;--h:#e0b4d9;--sh:0 8px 28px rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--bg:#17111a;--tx:#f1e9f1;--mu:#b9aeb9;--card:#211826;--bd:#35283a;--tint:#1e1523;--h:#e0b4d9;--sh:0 8px 28px rgba(0,0,0,.45)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none;padding:0}
.w{max-width:1160px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-size:1.4rem;color:var(--pd)}.logo b span{color:var(--p)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo b{color:#e0b4d9}}
.logo small{font-size:.58rem;letter-spacing:.2em;color:var(--mu);font-weight:700;margin-top:3px}
nav>ul{display:flex;gap:2px}
nav li{position:relative}
nav li>a{display:block;padding:10px 11px;font-size:.88rem;font-weight:600;border-radius:8px}
nav li:hover>a{color:var(--p);background:var(--tint)}
.dd{position:absolute;top:100%;left:0;min-width:240px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
nav li:hover .dd,nav li:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:8px 12px;border-radius:8px;font-size:.87rem;color:var(--mu)}
.dd a:hover{background:var(--tint);color:var(--p)}
.cta-h{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;font-size:.86rem;white-space:nowrap}
#bg{display:none;background:none;border:1px solid var(--bd);color:var(--tx);border-radius:10px;width:42px;height:42px;font-size:1.2rem;cursor:pointer}
.hero{background:linear-gradient(135deg,var(--pd) 0%,var(--p) 62%,var(--pl) 100%);color:#fff;position:relative;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.hero:before{width:480px;height:480px;right:-140px;top:-160px}.hero:after{width:260px;height:260px;left:-80px;bottom:-110px}
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:76px 0 70px;position:relative;z-index:1}
.pill{display:inline-block;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:600;margin-bottom:16px}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.12;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:#f7cdf0}
.hero p{margin:18px 0 28px;max-width:520px;opacity:.93;font-size:1.08rem}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;border:2px solid transparent;cursor:pointer;font-size:.95rem;font:inherit;font-weight:600}
.b1{background:#fff;color:var(--pd)}.b2{border-color:rgba(255,255,255,.7);color:#fff;margin-left:8px}
.bp{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff}
.vis{position:relative;display:grid;place-items:center}
.vis svg{width:100%;max-width:340px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.fl{position:absolute;background:var(--card);color:var(--tx);border-radius:14px;padding:10px 14px;font-size:.8rem;font-weight:600;box-shadow:var(--sh);display:flex;gap:8px;align-items:center}
.f1{left:0;top:14%}.f2{right:0;bottom:14%}
.stats{position:relative;z-index:2;margin-top:-34px}
.sg{background:var(--card);border:1px solid var(--bd);border-radius:20px;box-shadow:var(--sh);display:grid;grid-template-columns:repeat(4,1fr);padding:22px 10px;text-align:center}
.sg b{display:block;font-size:1.7rem;color:var(--p)}.sg span{font-size:.82rem;color:var(--mu)}
section{padding:76px 0}section.alt{background:var(--tint)}
.eb{color:var(--p);font-weight:700;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--h);margin:6px 0 10px;line-height:1.25}
.lead{color:var(--mu);max-width:620px;margin-bottom:34px}
.g{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.c{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:24px;transition:.2s;position:relative}
.c:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--pl)}
.ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;background:linear-gradient(135deg,var(--pd),var(--pl));margin-bottom:14px}
.c h3{font-size:1.05rem;margin-bottom:4px}.c p{color:var(--mu);font-size:.9rem}
.c li{font-size:.88rem;color:var(--mu);padding:3px 0}.c li:before{content:"✓ ";color:var(--p);font-weight:700}
.tag{position:absolute;top:18px;right:18px;font-size:.68rem;font-weight:700;background:var(--tint);color:var(--p);padding:3px 10px;border-radius:999px}
.av{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;background:linear-gradient(135deg,var(--pl),var(--pd));margin-bottom:12px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pills span{background:var(--tint);color:var(--p);padding:6px 14px;border-radius:999px;font-size:.84rem;font-weight:600}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:28px 0}
.st{border-left:3px solid var(--p);padding:4px 0 4px 14px;font-size:.88rem;color:var(--mu)}.st b{display:block;color:var(--tx)}
.tb{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--bd);font-size:.88rem}
.tb th{background:var(--pd);color:#fff;text-align:left}.tb th,.tb td{padding:12px 16px}.tb td{border-top:1px solid var(--bd)}
.sc{overflow-x:auto;border-radius:16px}
.ver{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;border-radius:20px;padding:28px;margin-top:28px}
.ver h3{margin-bottom:12px}.vr{display:flex;gap:8px;flex-wrap:wrap}
input,textarea{width:100%;padding:13px 15px;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx);font:inherit}
input:focus,textarea:focus{outline:2px solid var(--pl)}
.vr input{flex:1;min-width:200px;border:0}
.th{height:120px;border-radius:14px;margin-bottom:14px;display:grid;place-items:center;font-size:2.2rem;background:linear-gradient(135deg,var(--pd),var(--pl))}
.cta{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;border-radius:26px;padding:48px 28px;text-align:center}
.cta h2{color:#fff}.cta p{opacity:.9;margin:0 auto 24px;max-width:520px}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:28px}
form{display:grid;gap:12px}
.map{border-radius:14px;height:150px;margin-top:12px;display:grid;place-items:center;color:var(--mu);background:repeating-linear-gradient(45deg,var(--tint),var(--tint) 12px,var(--bd) 12px,var(--bd) 13px)}
footer{background:#3d2441;color:#d9c8d8;padding:50px 0 24px;font-size:.88rem}
.fg{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
footer h4{color:#fff;margin-bottom:10px;font-size:.92rem}footer li{padding:3px 0}footer a:hover{color:#f7cdf0}
.cp{border-top:1px solid #5a3a5f;margin-top:28px;padding-top:18px;text-align:center}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:#25d366;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;box-shadow:var(--sh);z-index:60}
@media(max-width:960px){
#bg{display:block}.cta-h{display:none}
nav{position:absolute;top:68px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--bd);max-height:0;overflow:hidden;transition:max-height .3s}
nav.o{max-height:calc(100vh - 68px);overflow:auto}
nav>ul{flex-direction:column;padding:8px 20px 18px}
.dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0;display:none}
nav li.open .dd{display:block}
.hg,.split,.ct{grid-template-columns:1fr}
.hg{padding:48px 0 60px}.vis{order:-1}.vis svg{max-width:230px}.f1{left:2%}.f2{right:2%}
.sg{grid-template-columns:repeat(2,1fr);gap:14px 0}
.fg{grid-template-columns:1fr 1fr}section{padding:56px 0}
}
@media(max-width:520px){.b2{margin:10px 0 0}.btn{width:100%;text-align:center}.fg{grid-template-columns:1fr}.fl{font-size:.7rem;padding:8px 10px}}

.logo img{height:44px;width:auto;display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img{background:#fff;border-radius:10px;padding:4px 10px}}
nav li>a.act{color:var(--p)}
.ph{background:linear-gradient(135deg,var(--pd),var(--p) 65%,var(--pl));color:#fff;position:relative;overflow:hidden}
.phg{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:52px 20px}
.ph h1{font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.15}.ph p{opacity:.92;max-width:520px;margin-top:10px}
.crumb{font-size:.82rem;opacity:.85;margin-bottom:8px}
.ph img{width:100%;max-width:380px;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.3);justify-self:end}
.ci{padding:0;overflow:hidden}.ci img{width:100%;height:175px;object-fit:cover;display:block;transition:.4s}
.ci:hover img{transform:scale(1.05)}.cb{padding:20px}
.tm .ci img{height:250px;object-position:top}
.meta{font-size:.76rem;color:var(--p);font-weight:700;margin-bottom:6px}
.lk{color:var(--p);font-weight:600;font-size:.88rem;display:inline-block;margin-top:10px}
.im{width:100%;border-radius:22px;box-shadow:var(--sh);display:block}
.hl{background:var(--tint)}
.logo-f{background:#fff;border-radius:10px;padding:5px 10px;height:46px;display:block}
@media(max-width:960px){.phg{grid-template-columns:1fr;padding:38px 20px}.ph img{max-width:300px;justify-self:center}}

:root{--swiper-theme-color:#93357f;--swiper-navigation-size:18px}
body{animation:pg .5s ease}@keyframes pg{from{opacity:0}}
#sp{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--pd),var(--p),#c58bbd);z-index:100}
header.scrolled{box-shadow:0 4px 18px rgba(94,58,99,.14)}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes up{from{opacity:0;transform:translateY(26px)}}
@keyframes bgm{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.hero,.ph{background-size:200% 200%;animation:bgm 14s ease infinite}
.vis svg,.ph img{animation:flt 6s ease-in-out infinite}
.f1{animation:flt 5s ease-in-out infinite}.f2{animation:flt 7s ease-in-out -2s infinite}
.hs .swiper-slide-active .hg>div:first-child>*{animation:up .8s both}
.hs .swiper-slide-active .hg>div:first-child>:nth-child(2){animation-delay:.12s}
.hs .swiper-slide-active .hg>div:first-child>:nth-child(3){animation-delay:.24s}
.hs .swiper-slide-active .hg>div:first-child>:nth-child(n+4){animation-delay:.36s}
.hs .swiper-slide-active .vis{animation:up 1s .2s both}
.hs .swiper-pagination{bottom:44px}
.hs .swiper-pagination-bullet{background:#fff;opacity:.5;width:10px;height:10px;transition:.3s}
.hs .swiper-pagination-bullet-active{opacity:1;width:28px;border-radius:6px}
.sw{padding:10px 6px 46px}.sw .swiper-slide{height:auto}.sw .swiper-slide>.c{height:100%}
.sw .swiper-button-prev,.sw .swiper-button-next{background:var(--card);border:1px solid var(--bd);width:40px;height:40px;border-radius:50%;box-shadow:var(--sh);top:42%}
.sw .swiper-button-prev:after,.sw .swiper-button-next:after{font-size:15px;font-weight:700}
@media(max-width:600px){.sw .swiper-button-prev,.sw .swiper-button-next{display:none}}
.btn{transition:.25s}.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(94,58,99,.3)}
.ic{transition:.3s}.c:hover .ic{transform:rotate(-8deg) scale(1.1)}
.wa{animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.noaos [data-aos]{opacity:1!important;transform:none!important}
.tq p{font-style:italic;margin-bottom:14px}.who{display:flex;gap:12px;align-items:center}.who img{width:46px;height:46px;border-radius:50%}.who b{display:block;font-size:.9rem}.who span{font-size:.78rem;color:var(--mu)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.mu{color:var(--mu);margin-bottom:12px}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:.9rem}
.alert.ok{background:#e8f6ec;color:#17603a}.alert.err{background:#fdeaf0;color:#9b1c4a}
.ver .alert{margin-top:14px}

/* ===== konten dinamis ===== */
.ci p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ci h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ci .meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{display:inline-block;background:var(--tint);color:var(--p);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;margin:0 6px 8px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.chips a{padding:7px 16px;border:1px solid var(--bd);border-radius:999px;font-size:.86rem;font-weight:600;background:var(--card)}.chips a.on,.chips a:hover{background:var(--p);border-color:var(--p);color:#fff}
.sbar{display:flex;gap:8px;margin-bottom:18px;max-width:420px}.sbar input{flex:1}
.feat{display:grid;grid-template-columns:1.1fr 1fr;margin-bottom:26px}.feat img{width:100%;height:100%;min-height:280px;object-fit:cover}.feat .cb{padding:30px;align-self:center}.feat h3{font-size:1.5rem;margin-bottom:10px;-webkit-line-clamp:3}.feat p{-webkit-line-clamp:4;margin-bottom:12px}
.pg{display:flex;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap}.pg a,.pg span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--bd);background:var(--card);font-weight:600;font-size:.9rem}.pg .on{background:var(--p);color:#fff;border-color:var(--p)}.pg .off{opacity:.4}.pg a:hover{border-color:var(--p);color:var(--p)}
.dt{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.dt aside{position:sticky;top:90px;display:grid;gap:16px}
.hdimg{width:100%;max-height:420px;object-fit:cover;border-radius:20px;box-shadow:var(--sh);margin-bottom:26px}
.prose{font-size:1.04rem;line-height:1.85}.prose p{margin-bottom:1.1em}.prose h2,.prose h3{color:var(--h);margin:1.6em 0 .6em;line-height:1.3}.prose h3{font-size:1.2rem}.prose ul,.prose ol{margin:0 0 1.2em 1.3em}.prose li{margin-bottom:.4em;list-style:disc}.prose blockquote{border-left:4px solid var(--p);background:var(--tint);padding:14px 20px;border-radius:0 14px 14px 0;margin:1.4em 0;font-style:italic}.prose img{max-width:100%;border-radius:14px}.prose>p:first-of-type{font-size:1.15rem;color:var(--mu)}
.meta2{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:.85rem;color:var(--mu);margin-bottom:14px}
.qt{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;border-radius:22px;padding:30px 34px;margin-bottom:30px;font-size:1.2rem;line-height:1.6}.qt cite{display:block;margin-top:12px;font-size:.9rem;opacity:.85;font-style:normal}
.tl{position:relative;padding-left:34px;display:grid;gap:18px}.tl:before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--p),var(--pl));border-radius:3px}.tli{position:relative}.tli:before{content:"";position:absolute;left:-31px;top:26px;width:15px;height:15px;border-radius:50%;background:var(--card);border:4px solid var(--p)}.yr{display:inline-block;background:var(--p);color:#fff;font-weight:700;font-size:.8rem;padding:2px 12px;border-radius:999px;margin-bottom:8px}
.empty{text-align:center;padding:40px 20px;border:2px dashed var(--bd);border-radius:20px;color:var(--mu)}
.prof{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}.ph1{position:sticky;top:90px}.prof img.big{width:100%;border-radius:22px;box-shadow:var(--sh);aspect-ratio:1;object-fit:cover}
.soc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.og{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.c ul{padding:0}
@media(max-width:960px){.dt,.prof,.feat{grid-template-columns:1fr}.dt aside,.ph1{position:static}.feat img{min-height:200px}}