/* UNIKCMS — gaya situs publik + elemen page builder */
:root{--u-primary:#6d28d9;--u-accent:#f59e0b;--u-ink:#1a1730;--u-body:#4a4763;--u-muted:#7c7a92;--u-line:#e6e3f0;--u-soft:#f7f6fb;--u-font:system-ui,sans-serif;--u-font-head:var(--u-font);--u-wrap:1140px;--u-radius:12px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--u-font);color:var(--u-body);background:#fff;line-height:1.7;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--u-font-head);color:var(--u-ink);line-height:1.2;margin:0 0 .6em;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}h4{font-size:1.2rem}
p{margin:0 0 1em}img{max-width:100%;height:auto}a{color:var(--u-primary)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--u-primary) 55%,#fff);outline-offset:2px}
.u-wrap{width:min(var(--u-wrap),calc(100% - 40px));margin-inline:auto}
.u-skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:100}.u-skip:focus{left:8px}

/* tombol */
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.6em;border-radius:var(--u-radius);background:var(--u-primary);color:#fff;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s,filter .15s}
.u-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--u-primary) 70%,#000)}
.u-btn-accent{background:var(--u-accent);color:#1a1730}.u-btn-dark{background:var(--u-ink)}.u-btn-light{background:#fff;color:var(--u-ink)}
.u-btn-outline{background:transparent;color:var(--u-primary);border-color:currentColor}
.u-btn-sm{padding:.6em 1.1em;font-size:.9rem}.u-btn-lg{padding:1.05em 2em;font-size:1.1rem}.u-btn-full{display:flex;width:100%}
.u-btn svg{width:1.1em;height:1.1em}

/* header */
.u-header{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--u-line);z-index:50}
.u-header.is-sticky{position:sticky;top:0}
.u-header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.u-brand{display:flex;align-items:center;gap:10px;font-family:var(--u-font-head);font-weight:800;font-size:1.15rem;color:var(--u-ink);text-decoration:none}
.u-brand img{height:38px;width:auto;display:block}
.u-brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--u-primary);color:#fff}
.u-nav{display:flex;align-items:center;gap:4px}
.u-nav a:not(.u-btn){padding:8px 14px;border-radius:8px;color:var(--u-body);text-decoration:none;font-weight:600;font-size:.95rem}
.u-nav a:not(.u-btn):hover,.u-nav a.is-active{color:var(--u-primary);background:color-mix(in srgb,var(--u-primary) 8%,#fff)}
.u-nav-cta{margin-left:10px}
.u-burger{display:none;width:44px;height:44px;border:1px solid var(--u-line);border-radius:10px;background:#fff;cursor:pointer;padding:11px 10px;flex-direction:column;justify-content:space-between}
.u-burger span{display:block;height:2px;background:var(--u-ink);border-radius:2px}
@media(max-width:860px){.u-burger{display:flex}.u-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--u-line);flex-direction:column;align-items:stretch;padding:12px 20px 20px;gap:2px;box-shadow:0 20px 30px -20px rgba(20,16,50,.25)}.u-header{position:relative}.u-header.is-sticky{position:sticky}.u-nav.is-open{display:flex}.u-nav a:not(.u-btn){padding:12px 14px}.u-nav-cta{margin:8px 0 0}}

/* footer */
.u-footer{background:var(--u-ink);color:#b9b6cf;margin-top:0;font-size:.95rem}
.u-footer-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:48px 0 28px}
.u-footer strong{color:#fff;font-family:var(--u-font-head);font-size:1.15rem}.u-footer p{margin:.4em 0 0;max-width:420px}
.u-footer-nav{display:flex;gap:6px 22px;flex-wrap:wrap;align-content:flex-start}.u-footer a{color:#dcd9ee;text-decoration:none}.u-footer a:hover{color:#fff;text-decoration:underline}
.u-footer-copy{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 26px;font-size:.85rem}

/* halaman & artikel */
.u-page-head{padding:56px 0 8px}.u-page-head h1{margin:0}
.u-prose{width:min(760px,calc(100% - 40px));margin:0 auto;padding:28px 0 72px;font-size:1.07rem;line-height:1.8;overflow-wrap:anywhere}
.u-prose h2{margin-top:1.8em}.u-prose h3{margin-top:1.5em}.u-prose img{border-radius:var(--u-radius);display:block;margin:1.6em auto}
.u-prose blockquote{margin:1.6em 0;padding:.4em 1.2em;border-left:4px solid var(--u-primary);color:var(--u-ink);font-size:1.12em}
.u-prose ul,.u-prose ol{padding-left:1.3em}.u-prose li{margin:.3em 0}
.u-prose pre{background:var(--u-ink);color:#e9e7f5;padding:16px 18px;border-radius:var(--u-radius);overflow:auto;font-size:.9em}
.u-prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.u-prose th,.u-prose td{border:1px solid var(--u-line);padding:.6em .8em;text-align:left}
.u-article-head{padding:56px 0 24px;max-width:860px;text-align:center}.u-article-head h1{margin:.5em 0 .4em}
.u-article-meta{color:var(--u-muted);font-size:.95rem;margin:0}
.u-article-cover{display:block;width:100%;max-width:980px;margin:8px auto 12px;border-radius:calc(var(--u-radius) + 4px);aspect-ratio:16/9;object-fit:cover}
.u-article-foot{max-width:760px;padding:0 0 56px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;border-top:1px solid var(--u-line);padding-top:24px}
.u-tags{display:flex;gap:8px;flex-wrap:wrap}.u-tags a,.u-share a{font-size:.9rem;text-decoration:none;padding:4px 10px;border-radius:999px;background:var(--u-soft);color:var(--u-body)}
.u-share{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--u-muted)}
.u-related{padding:48px 0 80px;border-top:1px solid var(--u-line)}
.u-chip{display:inline-block;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--u-primary) 10%,#fff);color:var(--u-primary);font-weight:700;font-size:.82rem;text-decoration:none}
.u-chip.is-active{background:var(--u-primary);color:#fff}.u-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}

/* blog */
.u-blog{padding:56px 0 80px}
.u-blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}.u-blog-head h1{margin:0 0 .2em}.u-blog-head p{margin:0;color:var(--u-muted)}
.u-search{display:flex;gap:8px}.u-search input{padding:.7em 1em;border:1px solid var(--u-line);border-radius:var(--u-radius);font:inherit;font-size:.95rem;min-width:200px}
.u-search button{padding:.7em 1.1em;border-radius:var(--u-radius);border:0;background:var(--u-ink);color:#fff;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer}
.u-grid{display:grid;gap:26px}.u-grid-1{grid-template-columns:1fr}.u-grid-2{grid-template-columns:repeat(2,1fr)}.u-grid-3{grid-template-columns:repeat(3,1fr)}.u-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.u-grid-3,.u-grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.u-grid{grid-template-columns:1fr}}
.u-card{background:#fff;border:1px solid var(--u-line);border-radius:calc(var(--u-radius) + 2px);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-align:left}
.u-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(26,23,48,.4)}
.u-card-img{display:block;aspect-ratio:16/10;background:var(--u-soft);overflow:hidden}.u-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.u-card-body{padding:20px 22px 22px}.u-card-meta{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--u-primary);margin-bottom:10px}.u-card-meta time{color:var(--u-muted);font-weight:600}
.u-card h3{font-size:1.15rem;margin:0 0 .5em;line-height:1.35}.u-card h3 a{color:inherit;text-decoration:none}.u-card h3 a:hover{color:var(--u-primary)}.u-card p{margin:0;font-size:.95rem;color:var(--u-muted);line-height:1.6}
.u-pager{display:flex;justify-content:space-between;align-items:center;margin-top:40px;font-size:.95rem;color:var(--u-muted)}.u-pager a{font-weight:700;text-decoration:none}
.u-empty{padding:40px;text-align:center;border:1px dashed var(--u-line);border-radius:var(--u-radius);color:var(--u-muted)}
.u-notice{padding:110px 0;text-align:center}.u-notice p{color:var(--u-muted);margin-bottom:1.6em}

/* ===== page builder ===== */
.u-sec{position:relative;padding:72px 0;background-size:cover;background-position:center}
.u-sec>.u-ov{position:absolute;inset:0;pointer-events:none}
.u-row{position:relative;display:grid;grid-template-columns:var(--cols,1fr);gap:var(--gap,32px);align-items:var(--va,start)}
.u-row.u-full{width:100%;padding-inline:20px}
.u-col{min-width:0;display:flex;flex-direction:column;background-size:cover;background-position:center}
.u-w{margin-bottom:18px}.u-col>.u-w:last-child{margin-bottom:0}
.u-dark,.u-dark h1,.u-dark h2,.u-dark h3,.u-dark h4{color:#fff}.u-dark .u-text,.u-dark p{color:rgba(255,255,255,.82)}
@media(max-width:767px){.u-sec{padding:48px 0}.u-row{grid-template-columns:1fr!important}.u-row.u-rev>.u-col:first-child{order:2}.u-hide-m{display:none!important}}
@media(min-width:768px){.u-hide-d{display:none!important}}
@media(min-width:768px) and (max-width:1024px){.u-row.u-c4{grid-template-columns:repeat(2,1fr)}}

.u-h{margin:0}.u-kicker{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--u-primary);margin-bottom:.8em}
.u-text>:last-child{margin-bottom:0}.u-text ul,.u-text ol{padding-left:1.3em;margin:0 0 1em}
.u-img img{display:block;max-width:100%;height:auto}.u-img figcaption{font-size:.85rem;color:var(--u-muted);margin-top:8px}.u-img{margin:0}
.u-ph{display:grid;place-items:center;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#f1eff8,#f1eff8 12px,#e9e6f4 12px,#e9e6f4 24px);color:var(--u-muted);border-radius:var(--u-radius);font-size:.9rem;font-weight:600}
.u-btns{display:flex;gap:12px;flex-wrap:wrap}
.u-video{position:relative;aspect-ratio:16/9;border-radius:var(--u-radius);overflow:hidden;background:#000}.u-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.u-divider{border:0;border-top:1px solid var(--u-line);margin:0}
.u-ibox{display:flex;flex-direction:column;gap:14px}.u-ibox.is-left{flex-direction:row;align-items:flex-start;text-align:left}
.u-ibox h3{font-size:1.2rem;margin:0 0 .35em}.u-ibox p{margin:0;font-size:.98rem}
.u-ico{display:inline-grid;place-items:center;flex:none;width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--u-primary) 12%,#fff);color:var(--u-primary)}.u-ico svg{width:26px;height:26px}
.u-ibox.is-card{background:#fff;border:1px solid var(--u-line);border-radius:calc(var(--u-radius) + 2px);padding:28px}
.u-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.u-list li{display:flex;gap:10px;align-items:flex-start}.u-list svg{flex:none;width:20px;height:20px;margin-top:4px;color:var(--u-primary)}
.u-quote{margin:0;background:#fff;border:1px solid var(--u-line);border-radius:calc(var(--u-radius) + 2px);padding:28px;text-align:left;color:var(--u-body)}
.u-quote blockquote{margin:0 0 18px;font-size:1.05rem;line-height:1.7;color:var(--u-ink)}.u-quote figcaption{display:flex;align-items:center;gap:12px;font-size:.92rem}
.u-quote img,.u-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}.u-ava{display:grid;place-items:center;background:var(--u-primary);color:#fff;font-weight:800}
.u-quote b{display:block;color:var(--u-ink)}.u-stars{color:var(--u-accent);letter-spacing:2px;margin-bottom:10px}
.u-price{background:#fff;border:1px solid var(--u-line);border-radius:calc(var(--u-radius) + 4px);padding:32px 28px;text-align:left;color:var(--u-body);position:relative;height:100%}
.u-price.is-hot{border:2px solid var(--u-primary);box-shadow:0 24px 48px -28px color-mix(in srgb,var(--u-primary) 70%,#000)}
.u-price-badge{position:absolute;top:-13px;left:24px;background:var(--u-primary);color:#fff;font-size:.75rem;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.04em}
.u-price h3{font-size:1.1rem;margin:0 0 .6em;color:var(--u-ink)}.u-price-num{font-family:var(--u-font-head);font-size:2.3rem;font-weight:800;color:var(--u-ink);line-height:1.1}.u-price-num small{font-size:.9rem;font-weight:600;color:var(--u-muted)}
.u-price .u-list{margin:22px 0 26px;font-size:.96rem}
.u-acc{border:1px solid var(--u-line);border-radius:var(--u-radius);background:#fff;margin-bottom:10px;text-align:left;color:var(--u-body)}
.u-acc summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;color:var(--u-ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
.u-acc summary::-webkit-details-marker{display:none}.u-acc summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--u-primary);transition:transform .2s}.u-acc[open] summary::after{transform:rotate(45deg)}
.u-acc>div{padding:0 20px 18px}
.u-gal{display:grid;gap:12px;grid-template-columns:repeat(var(--n,3),1fr)}.u-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--u-radius);display:block}
@media(max-width:620px){.u-gal{grid-template-columns:repeat(2,1fr)}}
.u-form{display:grid;gap:14px;text-align:left}.u-form label{display:grid;gap:6px;font-size:.9rem;font-weight:700;color:var(--u-ink)}
.u-form input,.u-form textarea,.u-form select{font:inherit;font-size:1rem;padding:.8em 1em;border:1px solid #cfcbe0;border-radius:var(--u-radius);background:#fff;color:var(--u-ink);width:100%}
.u-form textarea{min-height:120px;resize:vertical}.u-form input:focus,.u-form textarea:focus{outline:0;border-color:var(--u-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--u-primary) 20%,#fff)}
.u-form .u-hp{position:absolute;left:-9999px}.u-form-msg{padding:12px 16px;border-radius:var(--u-radius);font-weight:600;font-size:.95rem}.u-form-msg.ok{background:#e8f8ef;color:#12683a}.u-form-msg.err{background:#fdecec;color:#a02121}
.u-map{border:0;width:100%;border-radius:var(--u-radius);display:block}
.u-count{text-align:center}.u-count b{display:block;font-family:var(--u-font-head);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--u-primary);line-height:1.1}.u-count>span{font-weight:600}.u-dark .u-count b{color:#fff}
.u-js [data-anim]{opacity:0;transition:opacity .7s ease,transform .7s ease}.u-js [data-anim="up"]{transform:translateY(28px)}.u-js [data-anim="zoom"]{transform:scale(.94)}.u-js [data-anim="left"]{transform:translateX(-32px)}
.u-js [data-anim].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.u-js [data-anim]{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ===== kompatibilitas konten lama (Cloud CMS) ===== */
.cms-container{width:min(1120px,calc(100% - 32px));margin:0 auto}
.cms-hero{padding:4.5rem 0 3.25rem;background:linear-gradient(180deg,var(--u-soft),#fff)}
.cms-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:2rem;align-items:center}
.cms-kicker{display:inline-flex;margin:0 0 1rem;padding:.45rem .7rem;border-radius:7px;background:color-mix(in srgb,var(--u-primary) 9%,#fff);color:var(--u-primary);font-size:.75rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.cms-lead{max-width:720px;font-size:1.08rem;line-height:1.75;margin:1.2rem 0 0}
.cms-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.cms-actions a{display:inline-flex;align-items:center;padding:.8rem 1rem;border-radius:7px;background:var(--u-accent);color:#fff;text-decoration:none;font-weight:800}.cms-actions a+a{background:var(--u-ink)}
.cms-hero-panel{background:#fff;border:1px solid var(--u-line);border-radius:8px;padding:1.25rem;box-shadow:0 20px 45px rgba(15,23,42,.08);display:grid;gap:.75rem}
.cms-hero-panel span{padding:.8rem;border:1px solid var(--u-line);border-radius:7px;background:var(--u-soft);font-weight:700}
.cms-section{padding:3.5rem 0}.cms-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.cms-columns article{border:1px solid var(--u-line);border-radius:8px;padding:1.25rem}
@media(max-width:760px){.cms-hero-grid,.cms-columns{grid-template-columns:1fr}}