:root{ --img-office-l:url(/assets/img/office-l.webp); --img-office-m:url(/assets/img/office-m.webp); --img-consult-l:url(/assets/img/consult-l.webp); --img-consult-m:url(/assets/img/consult-m.webp); --img-team-l:url(/assets/img/team-l.webp); --img-team-m:url(/assets/img/team-m.webp); --img-desk-l:url(/assets/img/desk-l.webp); --img-desk-m:url(/assets/img/desk-m.webp); --img-tax-l:url(/assets/img/tax-l.webp); --img-tax-m:url(/assets/img/tax-m.webp); --img-hands-l:url(/assets/img/hands-l.webp); --img-hands-m:url(/assets/img/hands-m.webp); --img-charts-l:url(/assets/img/charts-l.webp); --img-charts-m:url(/assets/img/charts-m.webp); --img-analysis-l:url(/assets/img/analysis-l.webp); --img-analysis-m:url(/assets/img/analysis-m.webp); --img-pos-l:url(/assets/img/pos-l.webp); --img-pos-m:url(/assets/img/pos-m.webp); --img-forms-l:url(/assets/img/forms-l.webp); --img-forms-m:url(/assets/img/forms-m.webp); --img-dash-l:url(/assets/img/dash-l.webp); --img-dash-m:url(/assets/img/dash-m.webp); --img-tablet-l:url(/assets/img/tablet-l.webp); --img-tablet-m:url(/assets/img/tablet-m.webp); --img-analytics-l:url(/assets/img/analytics-l.webp); --img-analytics-m:url(/assets/img/analytics-m.webp); --img-coin-g-m:url(/assets/img/coin-g-m.webp); --img-coin-y-m:url(/assets/img/coin-y-m.webp); } [data-ph="office"]{--ph:var(--img-office-m);--phl:var(--img-office-l,var(--img-office-m));--pos:50% 64%} [data-ph="consult"]{--ph:var(--img-consult-m);--phl:var(--img-consult-l,var(--img-consult-m));--pos:58% 48%} [data-ph="team"]{--ph:var(--img-team-m);--phl:var(--img-team-l,var(--img-team-m));--pos:50% 52%} [data-ph="desk"]{--ph:var(--img-desk-m);--phl:var(--img-desk-l,var(--img-desk-m));--pos:50% 55%} [data-ph="tax"]{--ph:var(--img-tax-m);--phl:var(--img-tax-l,var(--img-tax-m));--pos:30% 58%} [data-ph="hands"]{--ph:var(--img-hands-m);--phl:var(--img-hands-l,var(--img-hands-m));--pos:36% 56%} [data-ph="charts"]{--ph:var(--img-charts-m);--phl:var(--img-charts-l,var(--img-charts-m));--pos:46% 56%} [data-ph="analysis"]{--ph:var(--img-analysis-m);--phl:var(--img-analysis-l,var(--img-analysis-m));--pos:42% 56%} [data-ph="pos"]{--ph:var(--img-pos-m);--phl:var(--img-pos-l,var(--img-pos-m));--pos:62% 50%} [data-ph="forms"]{--ph:var(--img-forms-m);--phl:var(--img-forms-l,var(--img-forms-m));--pos:38% 56%} [data-ph="dash"]{--ph:var(--img-dash-m);--phl:var(--img-dash-l,var(--img-dash-m));--pos:44% 46%} [data-ph="tablet"]{--ph:var(--img-tablet-m);--phl:var(--img-tablet-l,var(--img-tablet-m));--pos:50% 62%} [data-ph="analytics"]{--ph:var(--img-analytics-m);--phl:var(--img-analytics-l,var(--img-analytics-m));--pos:46% 48%} [data-ph="coin-g"]{--ph:var(--img-coin-g-m);--phl:var(--img-coin-g-l,var(--img-coin-g-m));--pos:50% 50%} [data-ph="coin-y"]{--ph:var(--img-coin-y-m);--phl:var(--img-coin-y-l,var(--img-coin-y-m));--pos:50% 50%} /* Klaritas: desain diperbarui. Lapisan di atas style.css; tema per bidang menimpa variabel warna per halaman. */ body[data-theme="umum"]{--teal:#0D7776;--teal-dark:#0B6261;--lightt:#EAF6F5;--aqua:#19AEAD;--motif:linear-gradient(rgba(143,221,216,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(143,221,216,.09) 1px,transparent 1px);--motif-size:56px 56px} body[data-theme="pembukuan"]{--teal:#2D7957;--teal-dark:#256347;--lightt:#EAF6F0;--aqua:#40AD7D;--motif:repeating-linear-gradient(to bottom,transparent 0 39px,rgba(255,255,255,.075) 39px 40px);--motif-size:auto} body[data-theme="pajak"]{--teal:#8B6524;--teal-dark:#72531E;--lightt:#F6F1EA;--aqua:#C89233;--motif:radial-gradient(circle,rgba(229,181,96,.34) 1.6px,transparent 2.2px);--motif-size:28px 28px} body[data-theme="payroll"]{--teal:#197199;--teal-dark:#145D7D;--lightt:#EAF2F6;--aqua:#27A4DC;--motif:repeating-radial-gradient(circle at 84% 18%,transparent 0 34px,rgba(255,255,255,.075) 34px 35px);--motif-size:auto} body[data-theme="advisory"]{--teal:#4650A8;--teal-dark:#39428A;--lightt:#EAEBF6;--aqua:#9298D2;--motif:repeating-linear-gradient(135deg,transparent 0 32px,rgba(255,255,255,.075) 32px 33px);--motif-size:auto} body[data-theme="tambahan"]{--teal:#A94D34;--teal-dark:#8B3F2B;--lightt:#F6ECEA;--aqua:#D48873;--motif:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px);--motif-size:96px 64px} body[data-theme="pendanaan"]{--teal:#7A4A8C;--teal-dark:#643D73;--lightt:#F2EAF6;--aqua:#B48DC3;--motif:repeating-linear-gradient(115deg,rgba(255,255,255,.085) 0 2px,transparent 2px 46px);--motif-size:auto} body[data-theme="komunitas"]{--teal:#64731F;--teal-dark:#525E19;--lightt:#F3F6EA;--aqua:#8DA32C;--motif:radial-gradient(circle,rgba(255,255,255,.2) 2px,transparent 2.6px);--motif-size:44px 44px} body[data-theme="wawasan"]{--teal:#4A6572;--teal-dark:#3D535D;--lightt:#EAF2F6;--aqua:#83A0AE;--motif:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(255,255,255,.065) 27px 28px);--motif-size:auto} @property --n{syntax:"";inherits:false;initial-value:0} html{scroll-behavior:smooth} /* progres gulir */ body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;z-index:9999;background:var(--teal);transform-origin:0 50%;scale:0 1;display:none} @supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){body::before{display:block;animation:b-spec linear both;animation-timeline:scroll(root)}}} @keyframes b-spec{to{scale:1 1}} @keyframes b-breathe{0%,100%{scale:1;opacity:.9}50%{scale:1.08;opacity:1}} @keyframes b-stripes{to{background-position:104px 0}} @keyframes b-pop{from{opacity:0;scale:.9;translate:0 14px}} @keyframes b-fade{from{opacity:0;translate:0 -8px}} /* hero halaman */ .page-hero{padding:76px 0 82px;background:var(--navy)} .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--motif,none);background-size:var(--motif-size,auto);-webkit-mask-image:radial-gradient(75% 110% at 80% 25%,#000 18%,transparent 100%);mask-image:radial-gradient(75% 110% at 80% 25%,#000 18%,transparent 100%)} .page-hero::after{width:560px;height:560px;right:-150px;top:-190px;background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 52%,transparent),transparent 68%);animation:b-breathe 8s ease-in-out infinite} .page-hero .wrap{position:relative;z-index:1} .page-hero h1{font-size:clamp(2rem,4.3vw,3.5rem);letter-spacing:-.025em;line-height:1.12;text-wrap:balance} .crumb{color:var(--aqua);flex-wrap:wrap;margin-bottom:22px} .crumb a{padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.08);transition:background .2s} .crumb a:hover{background:rgba(255,255,255,.18)} .hero-stats{gap:16px;border-top:0;padding-top:30px} .hero-stats>div{padding:14px 20px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.06);transition:transform .25s,background .25s;animation:b-pop .6s backwards} .hero-stats>div:nth-child(2){animation-delay:.12s} .hero-stats>div:nth-child(3){animation-delay:.24s} .hero-stats>div:nth-child(4){animation-delay:.36s} .hero-stats>div:hover{transform:translateY(-4px);background:rgba(255,255,255,.11)} .hero-stats b{color:var(--aqua)} /* hero beranda: pola dan cahaya aksen seperti halaman lain */ .hero{position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:var(--motif,none);background-size:var(--motif-size,auto);-webkit-mask-image:radial-gradient(75% 110% at 80% 25%,#000 18%,transparent 100%);mask-image:radial-gradient(75% 110% at 80% 25%,#000 18%,transparent 100%)} .hero>.wrap{position:relative;z-index:1} /* judul bagian */ .eyebrow{padding:6px 14px;border-radius:99px;background:var(--lightt);color:var(--teal-dark);letter-spacing:.12em} .bg-mist .eyebrow{background:#fff} .sec-head h2::after{content:"";display:block;width:56px;height:4px;margin-top:16px;border-radius:2px;background:var(--teal)} .sec-head.center h2::after{margin-left:auto;margin-right:auto} /* kartu */ .card{position:relative;overflow:hidden;border-radius:18px;box-shadow:var(--shadow)} .card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal);scale:0 1;transform-origin:0 50%;transition:scale .4s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .card:hover::before{scale:1 1} /* ceklis: tiga tampilan (kartu, alur bernomor, dokumen) */ .check-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:12px;list-style:none;padding:0;margin:16px 0} .check-list li{margin:0;padding:14px 16px;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:transform .2s,box-shadow .2s,border-color .2s} .check-list li:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal)} .check-list li svg{flex:none;width:36px;height:36px;padding:9px;border-radius:50%;background:var(--lightt);stroke:var(--teal-dark)} .check-list.cl-alur{grid-template-columns:minmax(0,1fr);gap:0;counter-reset:cl} .cl-alur li{counter-increment:cl;position:relative;align-items:flex-start;padding:0 0 24px 64px;border:0;border-radius:0;background:none;box-shadow:none;transform:none} .cl-alur li:hover{transform:none;box-shadow:none} .cl-alur li svg{display:none} .cl-alur li::before{content:counter(cl);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:1.05rem;box-shadow:0 0 0 6px var(--lightt)} .cl-alur li::after{content:"";position:absolute;left:22px;top:50px;bottom:2px;width:2px;background-image:repeating-linear-gradient(to bottom,var(--teal) 0 6px,transparent 6px 12px);opacity:.45} .cl-alur li:last-child{padding-bottom:0} .cl-alur li:last-child::after{display:none} .check-list.cl-dokumen li{position:relative;padding:18px 20px;border-radius:6px 18px 14px 14px;border-top:4px solid var(--teal)} .cl-dokumen li::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 24px 24px 0;border-color:transparent var(--lightt) var(--line) transparent} /* tabel interaktif */ .tbl-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 -6px} .tbl-search{position:relative;flex:1 1 240px;max-width:380px} .tbl-search input{width:100%;min-height:44px;padding:0 14px 0 40px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:500 .92rem var(--font);color:var(--ink);background:#fff} .tbl-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 18%,transparent)} .tbl-search svg{position:absolute;left:12px;top:12px;width:20px;height:20px;fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round} .tbl-count{font-size:.84rem;color:var(--grey)} .tbl-count button{padding:0;margin-left:8px;background:none;border:0;color:var(--teal-dark);font:600 .84rem var(--font);text-decoration:underline;cursor:pointer} .tbl-wrap{border-radius:18px;box-shadow:var(--shadow)} .tbl.enh thead th{background:var(--navy);color:#fff;position:relative;white-space:nowrap} .tbl.enh thead th.sortable{cursor:pointer;user-select:none;padding-right:30px} .tbl.enh thead th.sortable::after{content:"↕";position:absolute;right:12px;color:var(--aqua);opacity:.8} .tbl.enh thead th[aria-sort="ascending"]::after{content:"↑";opacity:1} .tbl.enh thead th[aria-sort="descending"]::after{content:"↓";opacity:1} .tbl.enh thead th:focus-visible{outline:3px solid var(--aqua);outline-offset:-3px} .tbl.enh tbody tr{transition:background .2s} .tbl.enh tbody tr:nth-child(even){background:color-mix(in srgb,var(--lightt) 55%,#fff)} .tbl.enh tbody tr:hover{background:var(--lightt)} .tbl.enh tbody tr[hidden]{display:none} @media (max-width:720px){ .tbl.enh{min-width:0} .tbl.enh thead{display:none} .tbl.enh tbody tr{display:block;margin:12px;padding:8px 14px;border:1px solid var(--line);border-radius:14px;background:#fff!important} .tbl.enh td{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border:0;border-bottom:1px dashed var(--line);text-align:right} .tbl.enh td:last-child{border-bottom:0} .tbl.enh td::before{content:attr(data-label);flex:0 0 38%;text-align:left;font-weight:600;color:var(--navy)} .tbl-wrap{overflow:visible;border:0;box-shadow:none;background:none} } /* FAQ */ .faq-item{border-radius:14px;transition:background .25s,border-color .25s,box-shadow .25s} .faq-item:hover{border-color:var(--teal)} .faq-item[open]{background:var(--lightt);border-color:var(--teal);box-shadow:var(--shadow)} .faq-item[open]>p{animation:b-fade .4s} /* kotak catatan */ .callout{position:relative;padding:22px 24px 22px 70px;border:1px solid color-mix(in srgb,var(--teal) 28%,var(--line));border-left:1px solid color-mix(in srgb,var(--teal) 28%,var(--line));border-radius:16px;background:var(--lightt)} .callout::before{content:"i";position:absolute;left:22px;top:22px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font:700 1rem/1 Georgia,serif;font-style:italic} /* pita ajakan */ .cta-band{background:var(--navy);border-radius:22px;box-shadow:var(--shadow-lg)} .cta-band::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 26px,transparent 26px 52px);animation:b-stripes 9s linear infinite} .cta-band>*{position:relative;z-index:1} .cta-band h2{color:#fff} /* muncul saat digulir: selaras dengan .rv bawaan */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} /* ===== lapisan global desain modern: gerak yang terukur di semua halaman ===== */ @keyframes k-gridmove{to{background-position:64px 64px}} @keyframes k-float{0%,100%{translate:0 0}50%{translate:0 -12px}} @keyframes k-pulse{0%,100%{opacity:.55;scale:1}50%{opacity:1;scale:1.15}} @keyframes k-sweep{from{translate:-120% 0}to{translate:220% 0}} @keyframes k-drift1{to{translate:10vmax 6vmax;scale:1.15}} @keyframes k-drift2{to{translate:-8vmax 9vmax;scale:.9}} @keyframes k-drift3{to{translate:-6vmax -8vmax;scale:1.2}} /* muncul: fade dan naik tipis, berurutan */ .js:not(.rm) [data-reveal]{opacity:0;translate:0 16px;transition:opacity .7s ease calc(var(--i,0)*60ms),translate .7s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*60ms)} .js:not(.rm) [data-reveal].in{opacity:1;translate:0 0} .js:not(.rm) .rv{transition-delay:0s} /* teks dipotong kata demi kata */ .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em} .wi{display:inline-block} .js:not(.rm) [data-split] .wi{transform:translateY(112%);opacity:0;filter:blur(7px);transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--w,0)*55ms),opacity .9s ease calc(var(--w,0)*55ms),filter .9s ease calc(var(--w,0)*55ms)} .js:not(.rm) [data-split].in .wi{transform:none;opacity:1;filter:none} /* transisi halaman */ .pt{position:fixed;inset:0;z-index:99999;pointer-events:none;background:var(--navy);opacity:0;transition:opacity .28s ease} .pt::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--aqua)} /*pt*/.pt.on{opacity:1;pointer-events:auto} .pt.out{opacity:0;transition:opacity .4s ease} /* header kaca */ header{transition:background .35s,box-shadow .35s,backdrop-filter .35s} header.scrolled{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 8px 30px rgba(15,36,64,.1)} /* tombol: kilau menyapu, magnetik lewat properti translate */ .btn{position:relative;overflow:hidden;isolation:isolate;transition:translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .25s,color .25s,border-color .25s} .btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);translate:-120% 0;pointer-events:none;z-index:-1} .btn:hover{transform:none} .btn:hover::after{animation:k-sweep .9s ease} .btn svg{transition:translate .3s} .btn:hover svg{translate:4px 0} /* kartu: tilt 3D dengan sorotan cahaya */ .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--teal) 14%,transparent),transparent 60%)} .card.tilting::after{opacity:1} a.link-arrow svg{transition:translate .25s} a.link-arrow:hover svg{translate:5px 0} /* hero halaman: grid bergerak dan aurora halus */ .hero-stats>div{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .page-hero h1 em,.page-hero h1 i{font-family:var(--font);font-weight:400} /* tipografi editorial: huruf serif miring untuk penekanan */ em.ed{font-family:var(--font);font-style:italic;font-weight:400;letter-spacing:-.01em} .sec-head h2 em{font-family:var(--font);font-weight:400;color:var(--teal)} @media (prefers-reduced-motion:reduce){.pt{display:none}} body[data-theme="umum"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="pembukuan"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="pajak"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="payroll"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="advisory"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="tambahan"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="pendanaan"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="komunitas"]{--art:url("data:image/svg+xml;utf8,")} body[data-theme="wawasan"]{--art:url("data:image/svg+xml;utf8,")} /* ===== Klaritas: sistem desain terpadu (bahasa visual untuk semua halaman) ===== */ :root{--ink2:#0B1B33;--line2:#DCE4EC} main,.pg{counter-reset:sc} .mono,.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* tipografi editorial */ .sec{padding:96px 0} .sec-head{max-width:780px;margin-bottom:52px;counter-increment:sc} .sec-head.center{margin-inline:auto;text-align:center} .sec-head h2{font-size:clamp(1.9rem,3.5vw,2.9rem);line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--ink2)} .sec-head h2::after{display:none} .sec-head p{font-size:1.06rem;color:var(--grey);max-width:62ch} .sec-head.center p{margin-inline:auto} .sec-head h2 em.ed{color:var(--teal)} .eyebrow{display:flex;align-items:center;gap:12px;padding:0;background:none!important;border-radius:0;color:var(--teal-dark);font-size:.7rem;font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px} .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none} .sec-head .eyebrow::before{content:counter(sc,decimal-leading-zero);width:auto;height:auto;padding:4px 8px;border:1px solid color-mix(in srgb,var(--teal) 45%,transparent);border-radius:6px;background:none;color:var(--teal-dark)} .sec-head.center .eyebrow{justify-content:center} /* pencahayaan dan gradien pada latar */ .bg-mist{position:relative;background:linear-gradient(180deg,#F5F8FB,#ECF1F6)} .bg-mist::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 88% 0%,color-mix(in srgb,var(--teal) 9%,transparent),transparent 72%)} .bg-mist>.wrap{position:relative} /* hero: art direction, panel kaca, ilustrasi garis per bidang */ .page-hero{padding:80px 0 88px;background:radial-gradient(70% 90% at 84% 6%,color-mix(in srgb,var(--aqua) 26%,transparent),transparent 62%),radial-gradient(60% 80% at 0% 100%,color-mix(in srgb,var(--teal) 34%,transparent),transparent 62%),#071428} .page-hero::before{opacity:.7} .page-hero::after{content:"";position:absolute;inset:0;width:auto;height:auto;right:0;top:0;border-radius:0;background:var(--art,none) no-repeat right 6% center/min(40vw,520px) auto;opacity:.55;animation:none;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 72%);mask-image:linear-gradient(90deg,transparent 38%,#000 72%)} .page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:60px;align-items:center} .page-hero .wrap>*{grid-column:1;min-width:0} .page-hero h1{font-size:clamp(2rem,4vw,3.3rem);line-height:1.1;letter-spacing:-.03em;max-width:20ch} .page-hero .wrap>p{font-size:1.08rem;color:#CBD8E5;max-width:60ch} .page-hero .hero-stats{grid-column:2;grid-row:1/span 8;display:grid;gap:10px;padding:16px;margin:0;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 30px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.2);align-self:center} .page-hero .hero-stats>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:14px 16px;border:0;border-radius:14px;background:rgba(255,255,255,.05);animation:none} .page-hero .hero-stats>div:hover{background:rgba(255,255,255,.1);transform:none} .page-hero .hero-stats b{font-size:1.9rem;line-height:1;color:var(--aqua);font-variant-numeric:tabular-nums;white-space:nowrap} .page-hero .hero-stats span{font-size:.84rem;color:#C3D2E0;line-height:1.4} .crumb a{background:rgba(255,255,255,.07)} /* kartu: bingkai teknis tipis, sorotan lembut */ .card:not(.card-flat){background-color:#fff;border:1px solid var(--line2);border-radius:16px;box-shadow:0 1px 2px rgba(11,27,51,.04),0 10px 30px rgba(11,27,51,.05);background-image:linear-gradient(var(--teal),var(--teal)),linear-gradient(var(--teal),var(--teal)),linear-gradient(var(--teal),var(--teal)),linear-gradient(var(--teal),var(--teal));background-repeat:no-repeat;background-size:14px 2px,2px 14px,14px 2px,2px 14px;background-position:8px 8px,8px 8px,calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px)} .card::before{display:none} .card{transform:none;transition:border-color .3s,box-shadow .3s,translate .3s} .card:hover{transform:none;translate:0 -4px;border-color:color-mix(in srgb,var(--teal) 45%,var(--line2));box-shadow:0 18px 44px rgba(11,27,51,.1)} .grid{gap:22px} /* kotak catatan, tabel, FAQ, pita ajakan */ .callout{background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 8%,#fff),#fff 70%);border:1px solid color-mix(in srgb,var(--teal) 26%,var(--line2));border-radius:16px} .tbl-wrap{border:1px solid var(--line2);border-radius:16px;box-shadow:0 10px 30px rgba(11,27,51,.05)} .tbl.enh thead th{background:#0B1B33} .faq-item{border:1px solid var(--line2);border-radius:14px;background:#fff} .cta-band{background:radial-gradient(70% 120% at 88% 0%,color-mix(in srgb,var(--aqua) 30%,transparent),transparent 62%),radial-gradient(60% 100% at 0% 100%,color-mix(in srgb,var(--teal) 36%,transparent),transparent 60%),#071428;border-radius:24px;box-shadow:0 30px 80px rgba(11,27,51,.25)} .cta-band::before{opacity:.6} @media (max-width:900px){ .sec{padding:68px 0} .page-hero{padding:64px 0 68px} .page-hero .wrap{grid-template-columns:minmax(0,1fr)} .page-hero .hero-stats{grid-column:1;grid-row:auto;margin-top:26px;grid-template-columns:repeat(3,minmax(0,1fr))} .page-hero .hero-stats>div{grid-template-columns:minmax(0,1fr)} .page-hero::after{background-position:right -10% top 8%;background-size:min(70vw,360px) auto;opacity:.3} } @media (max-width:600px){.page-hero .hero-stats{grid-template-columns:minmax(0,1fr)}.page-hero .hero-stats>div{grid-template-columns:auto minmax(0,1fr)}} /* ===== selaras dengan beranda: hero berlapis, penutup sinematik, kartu bernomor ===== */ .page-hero{isolation:isolate} .page-hero .cine-bg{z-index:-1} .page-hero .sky{height:46%;opacity:.42} .page-hero .cgrid{opacity:.55} .page-hero .aurora{opacity:.4} .page-hero h1 em.ed{color:var(--aqua)} .cta-band{isolation:isolate} .cta-band .cine-bg{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden} .cta-band>*:not(.cine-bg){position:relative;z-index:1} .cta-band::before{display:none} .cta-band h2{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em} .grid{counter-reset:ci} .grid>.card{counter-increment:ci} .grid>.card:not(.card-flat)::before{content:counter(ci,decimal-leading-zero);display:block;position:static;width:auto;height:auto;left:auto;right:auto;top:auto;background:none;scale:none;margin-bottom:12px;font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;color:var(--teal-dark)} /* ===== beranda sinematik ===== */ .dk{--aq:var(--aqua);color:#fff} .glass{background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.17);border-radius:22px;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22)} .eyebrow-g{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(255,255,255,.2);border-radius:99px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 .72rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)} .eyebrow-g::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua);animation:k-pulse 2.4s ease-in-out infinite} .mono-l{font:600 .68rem/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase} .tag-c{display:inline-block;padding:4px 11px;border:1px solid var(--c,#8FDDD8);border-radius:99px;color:var(--c,#8FDDD8);font:600 .68rem/1.5 var(--font);letter-spacing:.1em;text-transform:uppercase} [data-c="keu"]{--c:#40AD7D}[data-c="paj"]{--c:#C89233}[data-c="tat"]{--c:#9298D2}[data-c="leg"]{--c:#D48873}[data-c="dan"]{--c:#B48DC3} .pinwrap{position:relative} .pinstage{position:sticky;top:76px;height:calc(100vh - 76px);overflow:hidden} .sec-d{background:#071428;color:#fff;position:relative} .sec-d h2,.sec-d h3{color:#fff} .sec-d p{color:#C9D6E3} /* hero sinematik */ .cine{position:relative;min-height:calc(100vh - 76px);display:grid;align-items:center;overflow:hidden;background:#071428;color:#fff;isolation:isolate} .cine-bg{position:absolute;inset:0;z-index:-1} .aurora{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;opacity:.55} .a1{left:-18vmax;top:-26vmax;background:radial-gradient(circle,#0E7C7B,transparent 66%);animation:k-drift1 24s ease-in-out infinite alternate} .a2{right:-20vmax;top:-14vmax;background:radial-gradient(circle,#34469F,transparent 66%);animation:k-drift2 28s ease-in-out infinite alternate} .a3{left:28vmax;bottom:-34vmax;background:radial-gradient(circle,#B8862F,transparent 68%);opacity:.3;animation:k-drift3 32s ease-in-out infinite alternate} .cgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(143,221,216,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(143,221,216,.075) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 80% at 72% 42%,#000,transparent);mask-image:radial-gradient(70% 80% at 72% 42%,#000,transparent);animation:k-gridmove 34s linear infinite} .sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%;opacity:.95;translate:0 var(--py,0px)} .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")} .vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 52%,rgba(2,8,20,.72))} .cine-in{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:44px;align-items:center;padding-top:40px;padding-bottom:92px} .cine-copy{display:grid;gap:20px;justify-items:start} .cine h1{font-size:clamp(2.1rem,4.3vw,3.6rem);line-height:1.06;letter-spacing:-.03em;font-weight:700;color:#fff;text-wrap:balance} .cine h1 em{font-family:var(--font);font-style:italic;font-weight:400;color:var(--aqua);letter-spacing:-.01em} .cine .lead{font-size:clamp(1rem,1.3vw,1.18rem);color:#D3DFEA;max-width:560px} .cine-cta{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center} .btn-ghost-w{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .btn-ghost-w:hover{background:#fff;color:var(--navy)} .tlink-w{color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid var(--aqua);padding-bottom:2px} .proof-g{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0} .proof-g li{padding:6px 14px;border:1px solid rgba(255,255,255,.16);border-radius:99px;font-size:.84rem;color:#C9D6E3;background:rgba(255,255,255,.05)} .cine-panel{position:relative;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1)} .rep{padding:22px 22px 18px;position:relative;overflow:hidden} .rep::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.16),transparent 60%)} .cine-panel.tilting .rep::after{opacity:1} .rep-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;color:#8FDDD8} .rep svg{width:100%;height:auto;display:block} .cl{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1) .7s} .cl.s{stroke:#3FB5B0}.cl.k{stroke:#E5B560;transition-delay:1.3s} .in .cl,.rm .cl{stroke-dashoffset:0} .co{position:absolute;padding:7px 12px;border-radius:10px;background:rgba(7,20,40,.8);border:1px solid rgba(255,255,255,.2);color:#fff;opacity:0;translate:0 10px;transition:opacity .6s,translate .6s} .in .co,.rm .co{opacity:1;translate:0 0} .co.c1{left:9%;top:54%;transition-delay:3s}.co.c2{left:46%;top:76%;transition-delay:3.5s} .mini{position:absolute;padding:12px 16px;animation:k-float 6s ease-in-out infinite} .mini b{display:block;font-size:1.7rem;line-height:1.1;color:var(--aqua)}.mini span{font-size:.74rem;color:#C9D6E3} .mini.a{right:-18px;top:-26px}.mini.b{left:-22px;bottom:-24px;animation-delay:-3s} .scroll-cue{position:absolute;left:50%;bottom:20px;width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px;translate:-50% 0} .scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:k-scroll 1.8s ease-in-out infinite} @keyframes k-scroll{0%{opacity:0;translate:0 0}30%{opacity:1}100%{opacity:0;translate:0 14px}} /* etalase produk: laporan dengan kamera mendekat */ .show{background:linear-gradient(180deg,#EEF2F6,#E3EAF1)} .show-in{height:100%;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:46px;align-items:center} .show-copy{display:grid;gap:12px}.show-copy h2{font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.1;letter-spacing:-.03em;color:var(--navy)}.show-copy>p{color:var(--grey)} .show-pts{display:grid;gap:8px;margin-top:12px} .show-pt{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;opacity:.55;transition:all .45s} .show-pt.on{opacity:1;border-color:var(--teal);box-shadow:0 14px 40px rgba(15,36,64,.12);translate:6px 0} .show-pt b{display:block;color:var(--navy)}.show-pt span{font-size:.9rem;color:var(--grey)} .show-frame{padding:14px;border-color:rgba(15,36,64,.25);background:#fff} .show-frame::before,.show-frame::after,.show-frame .fc{border-color:var(--teal)} .show-frame .fl{background:#fff;color:var(--teal-dark)} .report-wrap{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:6px;background:#fff;border:1px solid var(--line);cursor:zoom-in} .report{position:absolute;inset:0;padding:5%;font-size:clamp(9px,1.02vw,14px);color:var(--ink);transform-origin:50% 40%;transform:translate(var(--zx,0%),var(--zy,0%)) scale(var(--zs,1));transition:transform .18s linear;will-change:transform;background:#fff;display:grid;gap:3.5%;grid-template-rows:auto auto 1fr auto} .rp-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--navy);padding-bottom:2%}.rp-top b{font-size:1.25em;color:var(--navy)}.rp-top span{font-size:.8em;color:var(--grey)} .rp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:3%} .rp-k{padding:6% 7%;border-radius:.7em;background:var(--card);border:1px solid var(--line)}.rp-k small{display:block;color:var(--grey);font-size:.78em}.rp-k b{font-size:1.6em;color:var(--navy);line-height:1.2} .rp-k.hot{background:#FFF3DA;border-color:#E5B560}.rp-k.hot b{color:#8A5F12} .rp-chart svg{width:100%;height:100%} .rp-sum{padding:3% 4%;border-radius:.7em;background:var(--lightt);border-left:.4em solid var(--teal);font-size:.95em;line-height:1.5}.rp-sum b{color:var(--navy)} .lens{position:absolute;left:0;top:0;width:140px;height:140px;border-radius:50%;border:3px solid var(--teal);overflow:hidden;opacity:0;pointer-events:none;box-shadow:0 14px 40px rgba(15,36,64,.35);background:#fff;transition:opacity .2s;z-index:5} .lens-in{position:absolute;left:0;top:0;transform-origin:0 0} .callout-m{position:absolute;z-index:4;padding:8px 14px;border-radius:99px;background:var(--navy);color:#fff;font-size:.82rem;font-weight:600;opacity:0;translate:0 10px;transition:opacity .5s,translate .5s;box-shadow:0 10px 30px rgba(15,36,64,.3)} .callout-m.on{opacity:1;translate:0 0} .callout-m.m0{left:5%;top:9%}.callout-m.m1{right:5%;top:42%}.callout-m.m2{left:6%;bottom:7%} /* data: angka, cincin, dan rentang harga */ .viz{background:linear-gradient(180deg,#071428,#0A1C38);color:#fff;position:relative;overflow:hidden} .viz-head{display:grid;gap:10px;max-width:760px;margin-bottom:40px} .viz-head h2{font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.08;letter-spacing:-.03em;color:#fff} .viz p{color:#C9D6E3}.viz h2,.viz h3{color:#fff}.cine p,.cinecta p{color:#D3DFEA}.cine h2,.cine h3{color:#fff} .viz-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:stretch} .counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .cnt{position:relative;padding:22px;display:grid;gap:4px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s} .cnt b{font:700 clamp(2.6rem,5vw,4.2rem)/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#8FDDD8);-webkit-background-clip:text;background-clip:text;color:transparent} .cnt b small{font-size:.4em;letter-spacing:0;margin-left:6px;-webkit-text-fill-color:#8FDDD8} .cnt strong{font-size:1rem;color:#fff}.cnt>span{font-size:.84rem;color:#9FB6C6} .cnt svg{position:absolute;right:16px;top:16px;width:46px;height:46px;transform:rotate(-90deg)} .cnt svg circle{fill:none;stroke-width:4}.cnt svg .bg{stroke:rgba(255,255,255,.14)}.cnt svg .fg{stroke:var(--aqua);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) .3s} .in .cnt svg .fg,.cnt.in svg .fg,.rm .cnt svg .fg{stroke-dashoffset:calc(1 - var(--v,1))} .bands{padding:26px 28px;display:grid;gap:18px;align-content:start} .bands h3{font-size:1.25rem;letter-spacing:-.02em} .bd{display:grid;gap:7px}.bd-h{display:flex;justify-content:space-between;gap:10px;font-size:.92rem}.bd-h b{color:#fff}.bd-h span{color:#9FB6C6} .bd-t{position:relative;height:14px;border-radius:8px;background:rgba(255,255,255,.09)} .bd-b{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:8px;background:linear-gradient(90deg,#19AEAD,#8FDDD8);transform-origin:0 50%;scale:0 1;transition:scale 1.3s cubic-bezier(.6,0,.2,1) calc(var(--k)*160ms + .3s)} .bd-b.open{background:linear-gradient(90deg,#19AEAD,rgba(25,174,173,0))} .in .bd-b,.rm .bd-b{scale:1 1} .bd-s{display:flex;justify-content:space-between;font-size:.72rem;color:#7F9AB0} .fx6{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.fx6 span{padding:5px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.18);font-size:.8rem;color:#D3DFEA;background:rgba(255,255,255,.05)} /* editorial: tata letak terbuka dengan gambar */ .edi{background:#fff;position:relative} .edi-head{display:grid;gap:12px;max-width:820px;margin-bottom:clamp(40px,6vw,80px)} .edi-head h2{font-size:clamp(1.9rem,4.2vw,3.8rem);line-height:1.06;letter-spacing:-.035em} .seg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px;align-items:center;margin-bottom:clamp(54px,8vw,110px)} .seg .im{grid-column:1/span 6;position:relative} .seg .edtx{grid-column:8/span 5;display:grid;gap:14px;min-width:0} .seg.alt .im{grid-column:7/span 6;grid-row:1} .seg.alt .edtx{grid-column:1/span 5;grid-row:1} .seg .nm{font:700 clamp(4rem,9vw,8rem)/.9 var(--font);color:transparent;-webkit-text-stroke:1.5px var(--teal);letter-spacing:-.05em} .seg h3{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.03em} .seg p{color:var(--grey);font-size:1.02rem} .slot-i{position:relative;display:grid;place-items:center;align-content:center;gap:8px;width:100%;aspect-ratio:5/4;border-radius:18px;overflow:hidden;color:var(--teal-dark);text-align:center;background-color:var(--card);background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--teal) 9%,transparent) 0 10px,transparent 10px 20px);border:2px dashed color-mix(in srgb,var(--teal) 55%,transparent);translate:0 var(--py,0px)} .slot-i::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);translate:-100% 0;animation:k-sweep 6s ease-in-out infinite} .slot-i svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .slot-i span{font:600 .72rem/1.4 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase} .pills{display:flex;flex-wrap:wrap;gap:8px}.pills span{padding:6px 14px;border-radius:99px;background:var(--lightt);color:var(--teal-dark);font-weight:600;font-size:.84rem} .pull{font:400 clamp(1.4rem,2.8vw,2.3rem)/1.25 var(--font);color:var(--navy);max-width:900px;border-top:1px solid var(--line);padding-top:26px} /* kebutuhan spesifik: daftar dengan sorotan */ .needs{background:var(--mist)} .nd{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr) 44px;gap:20px;align-items:center;padding:24px 18px;border-bottom:1px solid #D5DEE7;overflow:hidden;isolation:isolate;transition:padding .35s} .nd::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);scale:1 0;transform-origin:50% 100%;transition:scale .45s cubic-bezier(.2,.8,.2,1)} .nd:hover::before{scale:1 1}.nd:hover{padding-left:30px} .nd .c{color:var(--teal-dark);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;transition:color .3s} .nd p{font:500 clamp(1.15rem,2.2vw,1.6rem)/1.3 var(--font);color:var(--navy);letter-spacing:-.015em;transition:color .3s} .nd i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #B9C7D4;color:var(--navy);font-style:normal;transition:all .35s} .nd:hover .c{color:var(--aqua)}.nd:hover p{color:#fff}.nd:hover i{background:var(--aqua);border-color:var(--aqua);color:var(--navy);rotate:-45deg} /* panel teknis: tim dan mitra */ .tfr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px} .tp{position:relative;padding:22px;border:1px solid rgba(15,36,64,.22);border-radius:6px;background:#fff;display:grid;gap:12px;transition:translate .35s,box-shadow .35s} .tp:hover{translate:0 -6px;box-shadow:0 24px 60px rgba(15,36,64,.14)} .tp::before,.tp::after,.tp .fc{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--teal)} .tp::before{left:-2px;top:-2px;border-right:0;border-bottom:0}.tp::after{right:-2px;bottom:-2px;border-left:0;border-top:0} .tp .fc.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}.tp .fc.bl{left:-2px;bottom:-2px;border-right:0;border-top:0} .tp .id{display:flex;justify-content:space-between;color:var(--grey)} .tp h3{font-size:1.45rem;letter-spacing:-.02em}.tp p{color:var(--grey);font-size:.96rem} .tp.hot{background:var(--navy);border-color:var(--navy)}.tp.hot h3,.tp.hot p{color:#fff}.tp.hot p{color:#C9D6E3}.tp.hot .id{color:var(--aqua)}.tp.hot .slot-i{background-color:rgba(255,255,255,.06);color:var(--aqua)} .tp .slot-i{aspect-ratio:4/3;border-radius:6px} /* artikel */ .pc{display:grid;gap:14px;align-content:start;text-decoration:none;color:inherit} .pc .cv{overflow:hidden;border-radius:18px}.pc .slot-i{aspect-ratio:16/10;transition:scale .8s cubic-bezier(.2,.8,.2,1)}.pc:hover .slot-i{scale:1.06} .pc h3{font-size:1.4rem;line-height:1.2;letter-spacing:-.02em;background-image:linear-gradient(var(--teal),var(--teal));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .5s;width:fit-content;max-width:100%}.pc:hover h3{background-size:100% 2px} .pc p{color:var(--grey);font-size:.96rem}.pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .tsl{padding:24px;border-radius:22px;border:2px dashed color-mix(in srgb,var(--teal) 50%,transparent);display:grid;gap:14px;background:var(--card)} .tsl .q{font:400 4rem/.6 var(--font);color:var(--teal)}.tsl .who{display:flex;gap:12px;align-items:center}.tsl .who .slot-i{width:56px;aspect-ratio:1;border-radius:50%;flex:none} .tsg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} /* penutup sinematik */ .cinecta{position:relative;overflow:hidden;background:#071428;color:#fff;isolation:isolate;padding:clamp(70px,9vw,120px) 0} .cinecta .cine-bg{z-index:-1} .cinecta h2{font-size:clamp(2.2rem,5.4vw,4.8rem);line-height:1.04;letter-spacing:-.035em;color:#fff;max-width:980px;text-wrap:balance} .cinecta h2 em{font-family:var(--font);font-style:italic;font-weight:400;color:var(--aqua)} .cinecta-in{display:grid;gap:26px;justify-items:start} .cinecta .big{font-size:1.15rem;max-width:620px;color:#D3DFEA} .cinecta .who{padding:14px 22px;border-radius:16px;font-weight:600;font-size:1.05rem;color:#fff} /* ===== komponen berbasis konten ===== */ .tabs [data-c],.svc2[data-c],.svc-legend [data-c]{--c:#2D7957} [data-c="paj"].tab,[data-c="paj"].svc2,.svc-legend [data-c="paj"]{--c:#8B6524} [data-c="tat"].tab,[data-c="tat"].svc2,.svc-legend [data-c="tat"]{--c:#4650A8} [data-c="leg"].tab,[data-c="leg"].svc2,.svc-legend [data-c="leg"]{--c:#A94D34} [data-c="dan"].tab,[data-c="dan"].svc2,.svc-legend [data-c="dan"]{--c:#7A4A8C} .tabs [data-c="tat"].tpane{--c:#4650A8}.tabs [data-c="leg"].tpane{--c:#A94D34}.tabs [data-c="dan"].tpane{--c:#7A4A8C}.tabs [data-c="keu"].tpane{--c:#2D7957} .tag-c{--c:var(--c)} .tabs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start} .tabs-list{display:grid;gap:10px} .tab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;text-align:left;padding:16px 18px;border:1px solid var(--line2);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:var(--ink2);transition:border-color .25s,box-shadow .25s,background .25s} .tab .mono-l{grid-row:1/span 2;color:var(--c)}.tab b{font-size:1.04rem;line-height:1.3;font-weight:600}.tab i{grid-column:2;justify-self:start;font-style:normal} .tab:hover{border-color:color-mix(in srgb,var(--c) 50%,var(--line2))} .tab.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:0 14px 36px rgba(11,27,51,.09)} .tabs-panels{position:relative} .js .tpane{display:none}.js .tpane.on{display:grid;animation:k-fadein .45s ease} .tpane{gap:18px;padding:30px;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(145deg,#fff,#F5F8FB);box-shadow:0 18px 50px rgba(11,27,51,.08)} .tpane .tag-c{color:var(--c);border-color:var(--c)} .tpane-pain{display:grid;gap:12px} .tpane-pain .lead{font-size:1.3rem;line-height:1.45;color:var(--ink2);font-weight:500} .tpane-pain .sub{font:400 1.15rem/1.45 var(--font);color:var(--grey);border-top:1px solid var(--line2);padding-top:12px} .tpane-ans{display:grid;gap:8px;padding:20px 22px;border-radius:14px;background:color-mix(in srgb,var(--c) 8%,#fff);border:1px solid color-mix(in srgb,var(--c) 28%,var(--line2))} .tpane-ans p{color:var(--ink2);font-weight:500} @keyframes k-fadein{from{opacity:0;translate:0 8px}} .callout-big{margin-top:30px;padding:22px 28px;border-radius:18px;background:linear-gradient(135deg,#0B1B33,#14375F);color:#fff;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:baseline} .callout-big strong{font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.35;max-width:760px}.callout-big small{color:#9FB6C6} .svc-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:-18px 0 28px;color:var(--grey)} .svc-legend span{display:inline-flex;align-items:center;gap:8px}.svc-legend i{width:10px;height:10px;border-radius:50%;background:var(--c)} .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .svc2{position:relative;display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--line2);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(11,27,51,.04),0 10px 30px rgba(11,27,51,.05);transition:translate .3s,border-color .3s,box-shadow .3s} .svc2:hover{translate:0 -4px;border-color:var(--c);box-shadow:0 18px 44px rgba(11,27,51,.1)} .svc2.rutin{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,#fff),#fff 70%)} .svc2-top{display:flex;justify-content:space-between;align-items:center;color:var(--grey)} .svc2 .ic{width:34px;height:34px;stroke:var(--c);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .svc2 .tag-c{justify-self:start;color:var(--c);border-color:var(--c)} .svc2 h3{font-size:1.25rem;letter-spacing:-.02em;color:var(--ink2)}.svc2 p{font-size:.96rem;color:var(--grey)} .note-s{margin-top:26px;font-size:.92rem;color:var(--grey);max-width:70ch} .tl2{display:grid;gap:18px} .tl2-axis{position:relative;height:74px;margin:6px 10px 0} .tl2-line{position:absolute;left:0;right:0;top:34px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 25%,transparent))} .tk{position:absolute;top:50px;left:var(--x);translate:-50% 0;font:600 .7rem ui-monospace,Menlo,monospace;color:var(--grey)} .mk2{position:absolute;left:var(--x);top:0;width:0} .mk2 b{position:absolute;top:0;left:0;translate:-50% 0;white-space:nowrap;font:600 .72rem ui-monospace,Menlo,monospace;color:var(--teal-dark);background:var(--lightt);padding:3px 9px;border-radius:6px} .mk2 i{position:absolute;top:26px;left:0;translate:-50% 0;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--teal);box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 14%,transparent)} .tl2-note{color:var(--grey);margin:0 10px} .tl2-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .tl2-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .tl2-card{padding:20px 22px;border:1px solid var(--line2);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(11,27,51,.05);display:grid;gap:6px;align-content:start} .tl2-card .mono-l{color:var(--teal-dark)}.tl2-card h3{font-size:1.08rem;color:var(--ink2);letter-spacing:-.015em}.tl2-card p{font-size:.92rem;color:var(--grey)} .show2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center} .show2-copy .sec-head{margin-bottom:24px} .sp-list{display:grid;gap:10px} .sp{display:block;text-align:left;padding:16px 18px;border:1px solid var(--line2);border-radius:14px;background:#fff;cursor:pointer;font:inherit;transition:border-color .25s,box-shadow .25s} .sp b{display:block;color:var(--ink2)}.sp span{font-size:.92rem;color:var(--grey)} .sp:hover{border-color:color-mix(in srgb,var(--teal) 50%,var(--line2))}.sp.on{border-color:var(--teal);box-shadow:0 14px 36px rgba(11,27,51,.1)} .report{transition:transform .8s cubic-bezier(.2,.8,.2,1)} .viz .sec-head h2{color:#fff}.viz .sec-head h2 em.ed{color:var(--aqua)}.viz .sec-head p{color:#C9D6E3}.viz .eyebrow{color:var(--aqua)}.viz .sec-head .eyebrow::before{color:var(--aqua);border-color:rgba(143,221,216,.5)}.viz .eyebrow::before{background:var(--aqua)} .cine .aurora{opacity:.42}.cine .cgrid{animation:none}.cine .sky{opacity:.55}.cine .mini{animation:none} @media (max-width:900px){ .cine-in{grid-template-columns:minmax(0,1fr);gap:70px;padding-bottom:90px}.cine{min-height:0} .tabs,.show2{grid-template-columns:minmax(0,1fr)}.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .tl2-axis,.tl2-note{display:none}.tl2-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .viz-grid,.tfr,.pcs,.tsg{grid-template-columns:minmax(0,1fr)} .seg{grid-template-columns:minmax(0,1fr)}.seg .im,.seg .edtx,.seg.alt .im,.seg.alt .edtx{grid-column:1;grid-row:auto} .nd{grid-template-columns:minmax(0,1fr) 44px}.nd .c{grid-column:1/-1}.mini.a{right:-6px}.mini.b{left:-6px} } @media (max-width:600px){.svc-grid,.tl2-cards,.tl2-extra,.counters{grid-template-columns:minmax(0,1fr)}.tpane{padding:22px}} @media (prefers-reduced-motion:reduce){.tpane.on{animation:none}} body[data-theme="umum"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="pembukuan"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="pajak"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="payroll"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="advisory"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="tambahan"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="pendanaan"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="komunitas"]{--artd:url("data:image/svg+xml;utf8,")} body[data-theme="wawasan"]{--artd:url("data:image/svg+xml;utf8,")} /* ===== penyamaan komponen halaman dalam dengan komponen beranda ===== */ :root{--stripe:repeating-linear-gradient(45deg,color-mix(in srgb,var(--teal) 9%,transparent) 0 10px,transparent 10px 20px)} .mono-m{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* kartu: satu sistem seperti kartu layanan beranda */ :is(.card,.addon-card-v2,.post,.stat,.step,.pillar){background-color:#fff;border:1px solid var(--line2);border-radius:18px;box-shadow:0 1px 2px rgba(11,27,51,.04),0 10px 30px rgba(11,27,51,.05);transition:translate .3s,border-color .3s,box-shadow .3s,background .3s} :is(.card,.addon-card-v2,.post,.step,.pillar):hover{translate:0 -4px;border-color:color-mix(in srgb,var(--teal) 55%,var(--line2));box-shadow:0 18px 44px rgba(11,27,51,.1)} .card:not(.card-flat),.card.card-flat{background-image:none;padding:24px} .card::after{border-radius:inherit} :is(.card,.addon-card-v2,.step,.pillar) :is(h3,h4){font-size:1.2rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink2);font-weight:700} :is(.card,.addon-card-v2,.step,.pillar) p{font-size:.96rem;color:var(--grey)} .card .eyebrow,.badge{display:inline-flex;align-items:center;gap:0;padding:4px 11px;margin:0 0 12px;border:1px solid var(--teal);border-radius:99px;background:none!important;color:var(--teal-dark);font:600 .66rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase} .card .eyebrow::before,.badge::before{display:none} .grid>.card:not(.card-flat)::before,.grid>.card.card-flat::before{content:counter(ci,decimal-leading-zero);display:block;position:static;width:auto;height:auto;background:none;scale:none;margin-bottom:12px;font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;color:var(--teal-dark)} .grid>.card.card-flat{counter-increment:ci} .ico,.addon-ico,.addon-ico[class*="ai-"]{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--teal) 10%,#fff)!important;border:1px solid color-mix(in srgb,var(--teal) 28%,var(--line2))} .ico svg,.addon-ico svg{stroke:var(--teal-dark)!important;fill:none} .addon-card-v2{display:block;padding:24px;text-decoration:none} .addon-card-v2 .link-arrow{margin-top:14px;font-weight:600;color:var(--teal-dark)} .f-links{list-style:none;padding:0;margin:14px 0 0} .f-links li{border-top:1px dashed var(--line2)} .f-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;font-weight:600;color:var(--teal-dark);text-decoration:none} .f-links a:hover{color:var(--ink2)} /* langkah, pilar, statistik */ .step{text-align:left;padding:24px} .step-num,.pillar-num{width:auto;height:auto;border:0;border-radius:0;background:none;margin:0 0 12px;display:block;font:700 2.9rem/1 var(--font);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--teal)} .step-num::after{display:none} .pillar{padding:24px} .stat{padding:22px 24px} .stat b{display:block;font-size:2.4rem;line-height:1;letter-spacing:-.04em;color:var(--teal-dark);font-variant-numeric:tabular-nums} .stat span{color:var(--grey);font-size:.92rem} /* gambar: bahasa slot yang sama dengan beranda */ .post{overflow:hidden;padding:0} .post-body{padding:22px} .post-img{position:relative;aspect-ratio:16/10;background-color:var(--card);background-image:var(--stripe);border-bottom:1px dashed color-mix(in srgb,var(--teal) 55%,transparent);overflow:hidden} .post-img svg{opacity:.28} .post-img::before{content:"SAMPUL · 16:10";position:absolute;left:14px;bottom:12px;z-index:1;font:600 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--teal-dark)} .post-img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);translate:-100% 0;animation:k-sweep 6.5s ease-in-out infinite} .split-visual{position:relative;border-radius:6px;border:1px dashed color-mix(in srgb,var(--teal) 55%,transparent);background-color:var(--card);background-image:var(--stripe);padding:38px} .split-visual::before{content:"GAMBAR BAGIAN";position:absolute;left:16px;top:12px;font:600 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--teal-dark)} .pv-band{padding:44px 0 0} .pv-frame{position:relative;aspect-ratio:21/7;min-height:150px;border-radius:6px;overflow:hidden;background-color:var(--card);background-image:var(--stripe);border-color:color-mix(in srgb,var(--teal) 40%,var(--line2))} .pv-frame::before,.pv-frame::after,.pv-frame .fc{border-color:var(--teal)} .pv-frame .fl{background:#fff;color:var(--teal-dark)} .pv-art{position:absolute;inset:0;background:var(--artd,none) no-repeat center/auto 82%;opacity:.7} .pv-frame::marker{content:none} .pv-cap{position:absolute;right:16px;bottom:12px;color:var(--teal-dark);z-index:1} .pv-frame{border-width:1px;border-style:dashed} /* tabel: panel teknis berbingkai */ .tbl-wrap{position:relative;border-radius:6px;border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line2));box-shadow:0 10px 30px rgba(11,27,51,.05)} .tbl-wrap::before,.tbl-wrap::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--teal);pointer-events:none;z-index:2} .tbl-wrap::before{left:-2px;top:-2px;border-right:0;border-bottom:0}.tbl-wrap::after{right:-2px;bottom:-2px;border-left:0;border-top:0} .tbl thead th{font:600 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase} .tbl tbody td:first-child{font-weight:600;color:var(--ink2)} .tbl-search input{border-radius:10px;background:#fff} /* FAQ: bernomor mono seperti daftar tab di beranda */ .faq-list{counter-reset:fq} .faq-item{counter-increment:fq;border-radius:16px;padding:6px 22px} .faq-item{text-align:left} .faq-item summary{display:flex;align-items:center;justify-content:flex-start;gap:14px;text-align:left} .faq-item summary::after{margin-left:auto} .faq-item summary::before{content:counter(fq,decimal-leading-zero);flex:none;padding:4px 8px;border:1px solid color-mix(in srgb,var(--teal) 45%,transparent);border-radius:6px;font:600 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--teal-dark)} .faq-item[open]{border-color:var(--teal)} .acc{border-radius:16px} @media (max-width:600px){.pv-frame{aspect-ratio:16/9}} /* sampul artikel: bahasa slot gambar yang sama */ .art-cover{position:relative;border-radius:6px;border:1px dashed color-mix(in srgb,var(--teal) 55%,transparent);background-color:var(--card);background-image:var(--stripe);overflow:hidden} .art-cover svg{opacity:.3} .art-cover::before{content:"SAMPUL ARTIKEL · 16:7";position:absolute;left:16px;bottom:12px;z-index:1;font:600 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--teal-dark)} .art-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);translate:-100% 0;animation:k-sweep 6.5s ease-in-out infinite} /* kartu rata kiri seperti kartu layanan beranda */ .card,.card.card-flat{text-align:left} .card .ico,.card-flat .ico{margin-left:0;margin-right:auto} @media (prefers-reduced-motion:reduce){.post-img::after,.art-cover::after,.slot-i::after{animation:none}} /* ===== baris atas kartu seperti kartu layanan beranda: nomor kiri, ikon kanan, label berwarna ===== */ .pv-band{display:none} .card{position:relative} .card .ico,.card-flat .ico{position:absolute;right:22px;top:20px;width:auto;height:auto;margin:0;background:none!important;border:0} .card .ico svg{width:32px;height:32px;stroke:var(--teal-dark)!important} .card:has(.ico)::before{min-height:32px} .addon-card-v2{position:relative;padding:24px} .addon-card-v2::before{content:attr(data-n);display:block;margin-bottom:12px;min-height:32px;font:600 .7rem/32px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;color:var(--teal-dark)} .addon-card-v2 .addon-ico,.addon-card-v2 .addon-ico[class*="ai-"]{position:absolute;right:22px;top:20px;width:auto;height:auto;margin:0;background:none!important;border:0} .addon-card-v2 .addon-ico svg{width:32px;height:32px} .addon-card-v2 .tag-c{--c:var(--teal-dark);display:inline-flex;margin:0 0 10px;max-width:100%;border-radius:14px;line-height:1.4;text-align:left} .addon-card-v2 h4{margin-top:0} /* ===== bagian bergambar: tata letak terbuka seperti beranda ===== */ main,.pg{counter-reset:sc si} .split.split-img{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"img a" "img b";gap:24px 56px;align-items:start;counter-increment:si} .split.split-img>.im{grid-area:img} .split.split-img>:nth-child(2){grid-area:a;min-width:0} .split.split-img>:nth-child(3){grid-area:b;min-width:0} .split.split-img.alt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"a img" "b img"} .split-img .slot-i{aspect-ratio:5/4;border-radius:18px} .split-img>:nth-child(2)::before{content:counter(si,decimal-leading-zero);display:block;margin-bottom:14px;font:700 clamp(3.2rem,6vw,5rem)/.9 var(--font);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--teal)} .split-img>:nth-child(2) h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;color:var(--ink2)} @media (max-width:900px){.split.split-img,.split.split-img.alt{grid-template-columns:minmax(0,1fr);grid-template-areas:"img" "a" "b";gap:28px}} /* ===== daftar dan tabel modern: tujuh gaya daftar, empat gaya tabel ===== */ .check-list[class*="cl-"]{display:block;list-style:none;padding:0;margin:18px 0;counter-reset:cli} .check-list[class*="cl-"] li{counter-increment:cli;display:block;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none;translate:none} .check-list[class*="cl-"] li svg{display:none} .check-list[class*="cl-"] li span{display:block} .check-list[class*="cl-"] li:hover{transform:none;box-shadow:none;border-color:transparent} .mono-c,.cl-rows li::before,.cl-doc li::before,.cl-pilih .cl-t{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* 1. baris teknis bernomor */ .cl-rows{border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line2));border-radius:6px;background:#fff;box-shadow:0 10px 30px rgba(11,27,51,.05);overflow:hidden} .cl-rows li{display:grid!important;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:start;padding:16px 20px!important;border-top:1px solid var(--line2)!important;transition:background .25s,padding-left .3s} .cl-rows li:first-child{border-top:0!important} .cl-rows li::before{content:counter(cli,decimal-leading-zero);padding-top:4px;font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--teal-dark)} .cl-rows li:hover{background:color-mix(in srgb,var(--teal) 6%,#fff)!important;padding-left:26px!important} /* 2. chip */ .cl-chips{display:flex!important;flex-wrap:wrap;gap:10px} .cl-chips li{padding:10px 18px!important;border:1px solid color-mix(in srgb,var(--teal) 38%,var(--line2))!important;border-radius:99px!important;background:#fff!important;color:var(--ink2);font-weight:500;line-height:1.4;transition:background .25s,border-color .25s,translate .25s} .cl-chips li::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--teal);vertical-align:middle} .cl-chips li:hover{background:color-mix(in srgb,var(--teal) 9%,#fff)!important;border-color:var(--teal)!important;translate:0 -2px} /* 3. ubin dengan numeral kontur */ .cl-bento{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px} .cl-bento li{position:relative;overflow:hidden;min-height:128px;padding:22px 64px 22px 22px!important;border:1px solid var(--line2)!important;border-radius:18px!important;background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 8%,#fff),#fff 70%)!important;color:var(--ink2);font-weight:500;line-height:1.5;transition:translate .3s,border-color .3s,box-shadow .3s} .cl-bento li::before{content:counter(cli,decimal-leading-zero);position:absolute;right:14px;top:8px;font:700 3rem/1 var(--font);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--teal) 50%,transparent);transition:-webkit-text-stroke-color .3s} .cl-bento li:hover{translate:0 -4px;border-color:var(--teal)!important;box-shadow:0 18px 40px rgba(11,27,51,.1)!important} .cl-bento li:hover::before{-webkit-text-stroke-color:var(--teal)} /* 4. daftar editorial */ .cl-edit{border-top:2px solid var(--ink2)} .cl-edit li{display:grid!important;grid-template-columns:minmax(0,1fr) 28px;gap:16px;align-items:center;padding:18px 0!important;border-bottom:1px solid var(--line2)!important;color:var(--ink2);font-size:1.08rem;line-height:1.45;font-weight:500;transition:padding .3s} .cl-edit li::after{content:"→";color:var(--teal);transition:translate .3s} .cl-edit li:hover{padding-left:14px!important} .cl-edit li:hover::after{translate:6px 0} /* 5. alur bernomor */ .cl-alur{position:relative} .cl-alur li{position:relative;padding:0 0 24px 64px!important} .cl-alur li::before{content:counter(cli);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:1.05rem;box-shadow:0 0 0 6px var(--lightt)} .cl-alur li::after{content:"";position:absolute;left:22px;top:50px;bottom:2px;width:2px;background-image:repeating-linear-gradient(to bottom,var(--teal) 0 6px,transparent 6px 12px);opacity:.45} .cl-alur li:last-child{padding-bottom:0!important}.cl-alur li:last-child::after{display:none} /* 6. kartu dokumen */ .cl-doc{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px} .cl-doc li{position:relative;padding:20px 22px!important;border:1px solid var(--line2)!important;border-top:4px solid var(--teal)!important;border-radius:6px 18px 14px 14px!important;background:#fff!important;color:var(--ink2);line-height:1.5;transition:translate .3s,box-shadow .3s} .cl-doc li::before{content:"DOK " counter(cli,decimal-leading-zero);display:block;margin-bottom:8px;font-size:.64rem;font-weight:600;letter-spacing:.16em;color:var(--teal-dark)} .cl-doc li::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 24px 24px 0;border-color:transparent var(--lightt) var(--line2) transparent} .cl-doc li:hover{translate:0 -4px;box-shadow:0 18px 40px rgba(11,27,51,.1)} /* 7. daftar interaktif: pilih yang sesuai */ .cl-pilih{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px} .cl-pilih li{display:grid!important;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px!important;border:1px solid var(--line2)!important;border-radius:14px!important;background:#fff!important;color:var(--ink2);line-height:1.5;cursor:pointer;transition:border-color .25s,background .25s,translate .25s,box-shadow .25s} .cl-pilih li::before{content:"";width:22px;height:22px;margin-top:1px;border:2px solid color-mix(in srgb,var(--teal) 55%,var(--line2));border-radius:6px;transition:background .25s,box-shadow .25s,border-color .25s} .cl-pilih li:hover{border-color:var(--teal)!important;translate:0 -2px} .cl-pilih li.sel{border-color:var(--teal)!important;background:color-mix(in srgb,var(--teal) 8%,#fff)!important;box-shadow:0 12px 30px rgba(11,27,51,.08)!important} .cl-pilih li.sel::before{background:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 4px #fff} .cl-pilih li:focus-visible{outline:3px solid var(--aqua);outline-offset:2px} .cl-count{margin:14px 2px 0!important;font:600 .74rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark)} .cl-count b{font-size:1.1rem;color:var(--ink2)} /* ===== tabel: kartu baris, akordeon, linimasa, matriks ===== */ .tbl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:20px 0 14px} .tchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .tt-l,.tt-hint{font:600 .64rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)} .tchip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border:1.5px solid var(--line2);border-radius:99px;background:#fff;color:var(--ink2);font:600 .8rem/1 var(--font);cursor:pointer;transition:border-color .2s,background .2s,color .2s} .tchip:hover{border-color:var(--teal)} .tchip[aria-pressed="true"]{background:var(--ink2);border-color:var(--ink2);color:#fff} .tchip[data-dir="asc"] span::after{content:" ↑"}.tchip[data-dir="desc"] span::after{content:" ↓"} .tbl-count{margin-left:auto} .tbl-wrap[data-mode] tr[hidden]{display:none!important} .tbl-wrap.tb-cards,.tbl-wrap.tb-accordion,.tbl-wrap.tb-timeline{overflow:visible;border:0;box-shadow:none;background:none;border-radius:0} .tb-cards::before,.tb-cards::after,.tb-accordion::before,.tb-accordion::after,.tb-timeline::before,.tb-timeline::after,.tb-matrix::before,.tb-matrix::after{display:none} .tb-cards .tbl,.tb-accordion .tbl,.tb-timeline .tbl{display:block;min-width:0;border:0;background:none} .tb-cards thead,.tb-accordion thead,.tb-timeline thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .tb-cards tbody,.tb-accordion tbody,.tb-timeline tbody{display:grid;gap:12px;counter-reset:tr} .tb-cards td,.tb-accordion td,.tb-timeline td{display:block;padding:0;border:0;background:none;text-align:left;color:var(--grey);font-size:.95rem;line-height:1.55} .tb-cards td::before,.tb-timeline td::before,.tb-accordion tr.open td::before{content:attr(data-label);display:block;margin-bottom:4px;font:600 .62rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark)} .tb-cards td:first-child,.tb-timeline td:first-child,.tb-accordion td:first-child{color:var(--ink2);font-weight:700;font-size:1.04rem} /* kartu baris */ .tb-cards tr{counter-increment:tr;position:relative;display:grid;grid-template-columns:var(--gt);gap:8px 24px;align-items:start;padding:20px 24px 20px 62px;border:1px solid var(--line2);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(11,27,51,.04),0 10px 30px rgba(11,27,51,.05);transition:translate .3s,border-color .3s,box-shadow .3s} .tb-cards tr::before{content:counter(tr,decimal-leading-zero);position:absolute;left:22px;top:24px;font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--teal-dark)} .tb-cards tr:hover{translate:0 -3px;border-color:color-mix(in srgb,var(--teal) 55%,var(--line2));box-shadow:0 18px 44px rgba(11,27,51,.1)} /* akordeon */ .tb-accordion tr{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:6px 24px;align-items:center;padding:18px 64px 18px 24px;border:1px solid var(--line2);border-radius:16px;background:#fff;cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s} .tb-accordion tr::after{content:"+";position:absolute;right:18px;top:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mist);color:var(--ink2);font:600 1.3rem/1 var(--font);transition:rotate .3s,background .3s,color .3s} .tb-accordion td:nth-child(n+3){display:none} .tb-accordion td:nth-child(2){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .tb-accordion tr:hover{border-color:color-mix(in srgb,var(--teal) 50%,var(--line2))} .tb-accordion tr.open{align-items:start;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--teal) 6%,#fff));border-color:var(--teal);box-shadow:0 18px 44px rgba(11,27,51,.09)} .tb-accordion tr.open td{display:block} .tb-accordion tr.open td:nth-child(2){-webkit-line-clamp:unset;display:block} .tb-accordion tr.open td:first-child{grid-column:1/-1} .tb-accordion tr.open::after{rotate:135deg;background:var(--ink2);color:#fff} /* linimasa */ .tb-timeline tbody{position:relative;padding-left:40px;gap:14px} .tb-timeline tbody::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background-image:repeating-linear-gradient(to bottom,var(--teal) 0 6px,transparent 6px 12px);opacity:.5} .tb-timeline tr{position:relative;display:grid;grid-template-columns:var(--gt);gap:6px 24px;align-items:start;padding:18px 22px;border:1px solid var(--line2);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(11,27,51,.05);transition:translate .3s,border-color .3s} .tb-timeline tr::before{content:"";position:absolute;left:-38px;top:22px;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--teal);box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 14%,transparent)} .tb-timeline tr:hover{translate:4px 0;border-color:color-mix(in srgb,var(--teal) 55%,var(--line2))} .tb-timeline td:first-child{color:var(--teal-dark)} /* matriks */ .tbl-wrap.tb-matrix{border:1px solid var(--line2);border-radius:18px;box-shadow:0 18px 50px rgba(11,27,51,.07);background:#fff} .tb-matrix .tbl.enh thead th{padding:16px 18px;background:linear-gradient(180deg,#0B1B33,#12335A);cursor:pointer;transition:background .25s} .tb-matrix .tbl.enh thead th::after{content:""} .tb-matrix .tbl.enh thead th.hl{background:var(--teal)} .tb-matrix .tbl.enh thead th:focus-visible{outline:3px solid var(--aqua);outline-offset:-3px} .tb-matrix .tbl.enh tbody tr:nth-child(even){background:none} .tb-matrix tbody td{padding:16px 18px;border-top:1px solid var(--line2);transition:background .25s} .tb-matrix tbody tr:first-child td{border-top:0} .tb-matrix tbody td.hl{background:color-mix(in srgb,var(--teal) 10%,#fff);font-weight:600;color:var(--ink2)} .tb-matrix tbody tr:hover td{background:color-mix(in srgb,var(--teal) 5%,#fff)} .tb-matrix tbody tr:hover td.hl{background:color-mix(in srgb,var(--teal) 14%,#fff)} .tb-matrix tbody td:first-child{font-weight:700;color:var(--ink2)} @media (max-width:900px){.tb-cards tr,.tb-timeline tr{grid-template-columns:minmax(0,1fr)}.tb-accordion tr{grid-template-columns:minmax(0,1fr)}.tbl-count{margin-left:0}} @media (max-width:600px){.cl-rows li{grid-template-columns:38px minmax(0,1fr)}.tb-cards tr{padding-left:54px}} @media (prefers-reduced-motion:reduce){.cl-chips li,.cl-bento li,.cl-doc li,.cl-pilih li,.tb-cards tr,.tb-timeline tr{transition:none}} /* ===== ponsel: gaya baru menang atas aturan kartu lama untuk tabel ===== */ .tbl-wrap.tb-cards .tbl.enh td,.tbl-wrap.tb-accordion .tbl.enh td,.tbl-wrap.tb-timeline .tbl.enh td{display:block;justify-content:flex-start;text-align:left;padding:0;border:0;min-height:0;max-width:none;white-space:normal} .tbl-wrap.tb-cards .tbl.enh td::before,.tbl-wrap.tb-timeline .tbl.enh td::before{display:block;margin-bottom:4px;min-width:0;flex:none} .tbl-wrap.tb-accordion .tbl.enh td::before{display:none} .tbl-wrap.tb-accordion .tbl.enh tr.open td::before{display:block;margin-bottom:4px;min-width:0} .tbl-wrap.tb-accordion .tbl.enh td:nth-child(n+3){display:none} .tbl-wrap.tb-accordion .tbl.enh tr.open td:nth-child(n+3){display:block} .tbl-wrap.tb-accordion .tbl.enh td:nth-child(2){display:-webkit-box} .tbl-wrap.tb-accordion .tbl.enh tr.open td:nth-child(2){display:block} .tbl-wrap.tb-cards .tbl.enh tbody,.tbl-wrap.tb-accordion .tbl.enh tbody,.tbl-wrap.tb-timeline .tbl.enh tbody{display:grid} .tbl-wrap.tb-cards .tbl.enh tbody tr,.tbl-wrap.tb-accordion .tbl.enh tbody tr,.tbl-wrap.tb-timeline .tbl.enh tbody tr{display:grid;margin:0;background:#fff;border:1px solid var(--line2);border-radius:16px} @media (max-width:900px){ .tbl-wrap.tb-cards .tbl.enh tbody tr,.tbl-wrap.tb-timeline .tbl.enh tbody tr{grid-template-columns:minmax(0,1fr);gap:10px} .tbl-wrap.tb-cards .tbl.enh tbody tr{padding:18px 20px 18px 54px} .tbl-wrap.tb-timeline .tbl.enh tbody tr{padding:16px 18px} .tbl-wrap.tb-accordion .tbl.enh tbody tr{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 60px 16px 18px} .tbl-wrap.tb-accordion .tbl.enh tbody tr.open{gap:12px} .tbl-wrap.tb-timeline .tbl.enh tbody{padding-left:34px}.tb-timeline tr::before{left:-33px} } .tbl-wrap.tb-cards .tbl.enh td,.tbl-wrap.tb-accordion .tbl.enh td,.tbl-wrap.tb-timeline .tbl.enh td,.tbl-wrap.tb-cards .tbl.enh tr:nth-child(even) td,.tbl-wrap.tb-accordion .tbl.enh tr:nth-child(even) td,.tbl-wrap.tb-timeline .tbl.enh tr:nth-child(even) td{background:none!important} /* ===== font aksen baru: DM Serif Display, tegak dan tebal goresannya ===== */ :root{--font-accent:var(--font)} em.ed,.cine h1 em,.sec-head h2 em,.page-hero h1 em{font-family:var(--font-accent);font-style:normal;font-weight:400;letter-spacing:-.01em;font-size:1.04em} /* ===== penempatan gambar: menempel di atas dan ikut menggulir ===== */ .split.split-img>.im{align-self:start;position:sticky;top:92px} .split-img .slot-i{aspect-ratio:4/5} @media (max-width:900px){.split.split-img>.im{position:static}.split-img .slot-i{aspect-ratio:16/11}} /* ===== hero layar penuh: media, judul raksasa, ajakan ===== */ .fb-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(80% 90% at 80% 10%,color-mix(in srgb,var(--aqua) 22%,#071428),#050C1A 70%)} .fb-media .cine-bg{position:absolute;inset:0;z-index:0} .fb-video,.fb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .fb-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,12,26,.88) 0%,rgba(5,12,26,.58) 50%,rgba(5,12,26,.2) 100%),linear-gradient(0deg,rgba(5,12,26,.6) 0%,transparent 42%)} .fb-bokeh{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .fb-bokeh i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,rgba(143,221,216,.85),transparent 70%);opacity:var(--o);filter:blur(6px);animation:fb-float var(--d) ease-in-out infinite alternate} .fb-bokeh i:nth-child(3n+1){background:radial-gradient(circle,rgba(255,214,140,.85),transparent 70%)} .fb-media:not(.has-media)::after{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(143,221,216,.11) 50%,transparent 60%);animation:fb-beam 14s ease-in-out infinite alternate} @keyframes fb-float{to{translate:30px -40px;scale:1.25}} @keyframes fb-beam{from{translate:-18% 0}to{translate:18% 0}} .fb-tag{position:absolute;right:24px;top:100px;z-index:2;padding:6px 10px;border:1px dashed rgba(255,255,255,.35);border-radius:6px;color:rgba(255,255,255,.7);background:rgba(5,12,26,.35)} .page-hero.hero-fb{min-height:max(640px,calc(100svh - 76px));display:flex;align-items:flex-end;padding:150px 0 76px;background:#050C1A} .hero-fb::before,.hero-fb::after{display:none} .hero-fb .wrap{display:flex;flex-direction:column;align-items:flex-start;width:100%} .hero-fb .wrap>.crumb{order:0}.hero-fb h1{order:1}.hero-fb .wrap>p{order:2}.hero-fb .hero-actions{order:3}.hero-fb .hero-stats{order:4;align-self:stretch} .hero-fb .wrap>*{max-width:none} .hero-fb h1{font-size:var(--fs,clamp(2.8rem,6.6vw,6.2rem));line-height:.98;letter-spacing:-.045em;font-weight:700;color:#fff;max-width:min(100%,14em);text-wrap:balance;margin:18px 0 0} .hero-fb .wrap>p{margin-top:24px;max-width:58ch;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:#D7E2EE} .hero-fb .hero-actions{margin-top:32px;gap:14px} .hero-fb .hero-actions .btn{min-height:56px;padding:0 30px;font-size:1.02rem} .hero-fb .hero-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:46px;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:none} .hero-fb .hero-stats>div{flex:1 1 220px;max-width:340px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:start;padding:14px 18px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .hero-fb .hero-stats b{font-size:1.6rem;color:var(--aqua)} .hero-fb .hero-stats span{font-size:.85rem;color:#CBD8E5} /* beranda: hero yang sama bahasanya */ .cine{min-height:max(700px,100svh)} .cine h1{font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:1;letter-spacing:-.045em} .cine-in{grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr)} @media (max-width:900px){.page-hero.hero-fb{min-height:88svh;padding:120px 0 56px}.hero-fb .hero-stats>div{flex:1 1 100%;max-width:none}.fb-tag{top:84px;right:14px}} @media (prefers-reduced-motion:reduce){.fb-bokeh i,.fb-media::after{animation:none}} .fb-media .aurora{opacity:.78}.fb-media .sky{opacity:.9;height:52%}.fb-media .cgrid{opacity:.5} .fb-bokeh i{opacity:calc(var(--o)*1.7);filter:blur(4px)} @media (max-width:900px){ .fb-tag{display:none} .cine{min-height:0} .cine-in{grid-template-columns:minmax(0,1fr);gap:0;padding-top:96px;padding-bottom:64px} .cine-panel{display:none} .cine h1{font-size:clamp(2.1rem,9.4vw,3.3rem);line-height:1.02} .cine-cta,.hero-fb .hero-actions{flex-direction:column;align-items:stretch} .cine-cta .btn,.hero-fb .hero-actions .btn{width:100%;justify-content:center} .scroll-cue{display:none} } @media (max-width:900px){.hero-fb .hero-actions{align-self:stretch}} /* ===== penekanan judul: Poppins, warna aksen, sorotan garis bawah (tanpa font serif) ===== */ em.ed,.cine h1 em,.sec-head h2 em,.page-hero h1 em{font-family:inherit;font-style:normal;font-weight:700;letter-spacing:inherit;font-size:1em;color:var(--teal);padding:0 .05em;background:linear-gradient(transparent 64%,color-mix(in srgb,var(--teal) 22%,transparent) 64% 90%,transparent 90%)} .page-hero h1 em,.cine h1 em,.hero-fb h1 em,.viz .sec-head h2 em.ed{color:var(--aqua);background:linear-gradient(transparent 64%,color-mix(in srgb,var(--aqua) 26%,transparent) 64% 90%,transparent 90%)} .tpane-pain .sub{font-family:inherit;font-style:italic;font-size:1.02rem} /* ===== slideshow hero ===== */ .fb-slide{position:absolute;inset:0;opacity:0;z-index:0;overflow:hidden;transition:opacity 1.3s ease} .fb-slide.is-active{opacity:1;z-index:1} .fb-slide .fb-img{position:absolute;inset:-3%;background:var(--phl) var(--pos,50% 50%)/cover no-repeat;will-change:transform;animation:fb-kb0 12s ease-out both;animation-play-state:paused} .fb-slide:nth-child(3n+2) .fb-img{animation-name:fb-kb1} .fb-slide:nth-child(3n) .fb-img{animation-name:fb-kb2} .fb-slide.is-active .fb-img{animation-play-state:running} @keyframes fb-kb0{from{transform:scale(1.02)}to{transform:scale(1.14)}} @keyframes fb-kb1{from{transform:scale(1.1) translateX(-2.5%)}to{transform:scale(1.1) translateX(2.5%)}} @keyframes fb-kb2{from{transform:scale(1.14) translateY(2%)}to{transform:scale(1.03) translateY(-1%)}} .fb-slides .fb-shade{z-index:2;background-color:rgba(5,12,26,.24)} .fb-ctl{position:absolute;z-index:5;top:96px;right:max(24px,calc((100vw - 1240px)/2));display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:99px;background:rgba(5,12,26,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff} .fb-ctl[hidden]{display:none} .fb-ctl button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s} .fb-ctl button:hover{background:rgba(255,255,255,.24)} .fb-ctl button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px} .fb-ctl svg{width:16px;height:16px} .fb-dots{display:flex;align-items:center} .fb-ctl .fb-dot{position:relative;width:30px;height:30px;background:none} .fb-ctl .fb-dot:hover{background:none} .fb-dot::before{content:"";width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.3)} .fb-dot i{position:absolute;left:4px;top:13px;width:0;height:4px;border-radius:2px;background:var(--aqua)} .fb-dot.on i{animation:fb-prog linear forwards} .fb-ctl.is-paused .fb-dot.on i{animation-play-state:paused} @keyframes fb-prog{to{width:22px}} .fb-count{padding:0 6px;font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#D7E2EE} .fb-pp[aria-pressed="true"] svg path{d:path("M8 5l11 7-11 7z")} @media (max-width:900px){.fb-ctl{top:84px;right:50%;transform:translateX(50%)}.fb-count{display:none}} @media (prefers-reduced-motion:reduce){.fb-slide{transition:none}.fb-slide .fb-img{animation:none}.fb-dot.on i{animation:none;width:22px}.fb-ctl .fb-pp{display:none}} /* ===== foto di hero halaman lain, pita ajakan, bagian, sampul ===== */ .page-hero[data-ph]::after{content:"";position:absolute;inset:0 0 0 auto;width:min(58%,880px);height:auto;border-radius:0;background:linear-gradient(rgba(5,12,26,.42),rgba(5,12,26,.42)),var(--ph) var(--pos,50% 50%)/cover no-repeat;opacity:1;animation:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);mask-image:linear-gradient(90deg,transparent 0,#000 46%)} @media (max-width:900px){.page-hero[data-ph]::after{width:100%;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);mask-image:linear-gradient(180deg,#000,transparent 88%)}} .cta-band[data-ph]{background-image:linear-gradient(90deg,rgba(5,12,26,.95) 0%,rgba(5,12,26,.8) 52%,rgba(5,12,26,.55) 100%),var(--ph);background-size:cover;background-position:var(--pos,50% 50%)} .slot-i.has-photo{position:relative;overflow:hidden;border:0;background:none;box-shadow:0 26px 60px rgba(11,27,51,.2)} .slot-i.has-photo>*{display:none} .slot-i.has-photo::before{content:"";position:absolute;inset:0;background:var(--ph) var(--pos,50% 50%)/cover no-repeat;transition:transform .9s cubic-bezier(.2,.8,.2,1)} .slot-i.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(5,12,26,.34));translate:none;animation:none} .slot-i.has-photo:hover::before{transform:scale(1.06)} .post-img[data-ph],.art-cover[data-ph]{background-image:var(--ph);background-size:cover;background-position:var(--pos,50% 50%);background-repeat:no-repeat;border-style:solid;border-width:0} .post-img[data-ph] svg,.art-cover[data-ph] svg,.post-img[data-ph]::before,.art-cover[data-ph]::before{display:none} .post-img[data-ph]::after,.art-cover[data-ph]::after{background:linear-gradient(180deg,transparent 60%,rgba(5,12,26,.3));translate:none;animation:none} .post-img[data-ph]{transition:transform .6s}.post:hover .post-img[data-ph]{transform:scale(1.03)} /* ===== mosaik foto bidang kerja (beranda) ===== */ .mz{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px} .mz-c{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;overflow:hidden;border-radius:20px;color:#fff;text-decoration:none;isolation:isolate;box-shadow:0 18px 44px rgba(11,27,51,.14)} .mz-c::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--ph) var(--pos,50% 50%)/cover no-repeat;transition:transform .9s cubic-bezier(.2,.8,.2,1)} .mz-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,12,26,.05) 25%,rgba(5,12,26,.82))} .mz-c:hover::before{transform:scale(1.08)} .mz1{grid-row:span 2} .mz-tag{align-self:flex-start;padding:5px 10px;border:1px solid rgba(255,255,255,.4);border-radius:99px;background:rgba(5,12,26,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:.66rem} .mz-t{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:700;letter-spacing:-.025em;line-height:1.1} .mz1 .mz-t{font-size:clamp(1.8rem,3vw,2.6rem)} .mz-go{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--ink2);transition:translate .3s,background .3s,color .3s} .mz-go svg{width:18px;height:18px} .mz-c:hover .mz-go{translate:4px -4px;background:var(--aqua)} @media (max-width:900px){.mz{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:220px}.mz1{grid-row:span 1;grid-column:span 2;min-height:260px}} @media (max-width:560px){.mz{grid-template-columns:minmax(0,1fr)}.mz1{grid-column:auto}} .mz-t{padding-right:58px} /* ===== (1) garis bawah penekanan: tipis ===== */ em.ed,.cine h1 em,.cine .fb-h em,.sec-head h2 em,.page-hero h1 em,.fb-h em{font-family:inherit;font-style:normal;font-weight:700;letter-spacing:inherit;font-size:1em;color:var(--teal);background:none;padding:0;text-decoration:underline;text-decoration-thickness:.035em;text-underline-offset:.17em;text-decoration-skip-ink:none;text-decoration-color:color-mix(in srgb,var(--teal) 80%,transparent)} .page-hero h1 em,.cine h1 em,.cine .fb-h em,.hero-fb h1 em,.hero-fb .fb-h em,.viz .sec-head h2 em.ed{color:var(--aqua);text-decoration-color:color-mix(in srgb,var(--aqua) 85%,transparent)} /* ===== (2) label di atas judul kartu dihapus ===== */ .addon-card-v2 .tag-c,.card .eyebrow{display:none} /* ===== (3) tanpa bar kontrol: tombol jeda hanya muncul untuk pengguna keyboard ===== */ .fb-sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .fb-sr:focus-visible{left:max(24px,calc((100vw - 1240px)/2));top:92px;width:auto;height:auto;overflow:visible;padding:10px 18px;border:0;border-radius:99px;background:#fff;color:#0B1B33;font:600 .85rem/1 var(--font);z-index:6;box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer} /* ===== (4) kalimat hero berganti bersama foto: iklan utama ===== */ .fb-copy{display:grid;width:100%;order:1} .fb-msg{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(26px);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s .55s} .fb-msg.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.3s,.3s,0s} .fb-msg>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)} .fb-msg.is-active>*{opacity:1;transform:none} .fb-msg.is-active>:nth-child(1){transition-delay:.4s}.fb-msg.is-active>:nth-child(2){transition-delay:.55s}.fb-msg.is-active>:nth-child(3){transition-delay:.7s} .hero-fb .fb-h{font-size:var(--fs,clamp(2.8rem,6.6vw,6.2rem));line-height:.98;letter-spacing:-.045em;font-weight:700;color:#fff;max-width:min(100%,14em);text-wrap:balance;margin:18px 0 0} .hero-fb .fb-msg p{margin-top:24px;max-width:58ch;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:#D7E2EE} .cine .fb-h{font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:1;letter-spacing:-.045em;font-weight:700;color:#fff;margin:0 0 .3em;text-wrap:balance} .fb-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;transition:gap .25s,border-color .25s} .fb-more svg{width:16px;height:16px} .fb-more:hover{gap:12px;border-color:var(--aqua)} .hero-fb .scroll-cue{position:absolute;left:50%;bottom:20px;translate:-50% 0;z-index:3;width:24px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:14px} .hero-fb .scroll-cue span{position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:fb-cue 1.8s ease-in-out infinite} @keyframes fb-cue{0%{opacity:0;translate:0 0}30%{opacity:1}100%{opacity:0;translate:0 12px}} @media (prefers-reduced-motion:reduce){.fb-msg,.fb-msg>*{transition:none}.hero-fb .scroll-cue span{animation:none}} /* ===== (5) menu login portal ===== */ .nav-login>a.nav-login-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1.5px solid var(--line2);border-radius:99px;font-weight:600;color:var(--ink2);transition:border-color .2s,color .2s} .nav-login:hover>a.nav-login-btn,.nav-login.open>a.nav-login-btn{border-color:var(--teal);color:var(--teal-dark)} .nav-login .drop{left:auto;right:0;min-width:320px} .nav-login.open .drop{opacity:1;visibility:visible;transform:translateY(0)} @media (max-width:860px){.nav-login>a.nav-login-btn{border:0;padding:12px 0;width:100%;border-radius:0}.nav-login .drop{min-width:0;right:auto}} .cine .fb-copy,.cine-copy .fb-copy{order:0} .fb-copy{-webkit-user-select:none;user-select:none} section[id^="s"]{scroll-margin-top:84px} .is-drag,.is-drag *{-webkit-user-select:none!important;user-select:none!important} /* ===== Beranda: statistik tim dan mitra, penggeser testimoni ===== */ .stx{margin-top:clamp(26px,4vw,44px)} .stx-hero{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:0 0 24px} .stx-hero[hidden]{display:none} .stx-hero .stx-n{font-size:clamp(3.4rem,8vw,6.4rem);line-height:.95} .stx-hero span{font-size:1.08rem;font-weight:600;color:var(--ink2,#0B1B33);padding-bottom:10px} .stx-hero small{display:block;font-weight:400;font-size:.86rem;color:var(--grey,#5A6879);margin-top:3px} .stx-hero small[hidden]{display:none} .stx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .stx-c{position:relative;background:#fff;border:1px solid var(--line2,#DCE4EC);border-radius:16px;padding:22px 22px 22px;display:flex;flex-direction:column;gap:7px;transition:border-color .25s,box-shadow .25s,translate .25s} .stx-c:hover{border-color:var(--teal,#0D7776);box-shadow:0 14px 34px rgba(11,27,51,.09);translate:0 -3px} .stx-c .id{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey,#5A6879)} .stx-c h3{margin:2px 0 0;font-size:1.12rem} .stx-c p{margin:0;font-size:.92rem;line-height:1.55;color:var(--grey,#5A6879)} .stx-n{display:block;font:700 2.6rem/1.05 "Poppins",system-ui,sans-serif;color:var(--teal-dark,#0B6261);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .stx-n[hidden]{display:none} /* penggeser testimoni: bagian disembunyikan sampai ada testimoni terbit */ section:has(.tsx):not(.has-testi){display:none} .tsx{position:relative} .tsx-view{overflow:hidden;border-radius:20px;outline-offset:4px} .tsx-track{display:flex;transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform} .tsx-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(var(--per,3),minmax(0,1fr));gap:18px;padding:4px;box-sizing:border-box} .tsx-c{position:relative;display:flex;flex-direction:column;gap:18px;justify-content:space-between;background:#fff;border:1px solid var(--line2,#DCE4EC);border-radius:18px;padding:28px 26px 24px;min-height:230px;box-shadow:0 1px 2px rgba(11,27,51,.04)} .tsx-c .q{font:700 3.4rem/.6 Georgia,serif;color:var(--teal,#0D7776);opacity:.35;height:22px} .tsx-c blockquote{margin:0;font-size:1.02rem;line-height:1.7;color:var(--ink2,#0B1B33)} .tsx-who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line2,#DCE4EC);padding-top:16px} .tsx-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--teal-dark,#0B6261);color:#fff;font:700 .95rem "Poppins",sans-serif;letter-spacing:.02em} .tsx-who b{display:block;font-size:.95rem} .tsx-who span:not(.tsx-av){display:block;font-size:.84rem;color:var(--grey,#5A6879);line-height:1.4} .tsx-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;flex-wrap:wrap} .tsx-b{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1.5px solid var(--line2,#DCE4EC);border-radius:99px;background:#fff;color:var(--ink2,#0B1B33);cursor:pointer;font:600 .8rem "Poppins",sans-serif;transition:border-color .2s,background .2s} .tsx-b svg{width:18px;height:18px} .tsx-b:hover{border-color:var(--teal,#0D7776)} .tsx-b:focus-visible,.tsx-view:focus-visible,.tsx-dot:focus-visible{outline:3px solid color-mix(in srgb,var(--teal,#0D7776) 55%,transparent);outline-offset:2px} .tsx-dots{display:flex;gap:8px;align-items:center} .tsx-dot{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:#C3CFDB;cursor:pointer;transition:width .3s,background .3s} .tsx-dot[aria-selected=true]{width:28px;background:var(--teal,#0D7776)} .tsx-count{text-align:center;margin:14px 0 0;color:var(--grey,#5A6879);font-size:.8rem} .tsx.one .tsx-ctl .tsx-b,.tsx.one .tsx-dots{display:none} @media(prefers-reduced-motion:reduce){.tsx-track{transition:none}} a.svc2,a.nd{text-decoration:none;color:inherit;display:block} a.svc2:hover,a.nd:hover{border-color:var(--teal,#0D7776)} /* logo klien pada testimoni */ .tsx-top{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px} .tsx-top .q{flex:none} .tsx-logo{display:block;max-height:64px;max-width:210px;width:auto;height:auto;object-fit:contain;margin-left:auto} .tsx-strip{margin-top:30px;padding-top:24px;border-top:1px solid var(--line2,#DCE4EC);text-align:center} .tsx-strip[hidden]{display:none} .tsx-strip>.mono-l{display:block;margin-bottom:16px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey,#5A6879)} .tsx-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 44px} .tsx-logos img{height:60px;max-width:200px;width:auto;object-fit:contain;filter:grayscale(.85);opacity:.85;transition:filter .3s,opacity .3s} .tsx-logos img:hover{filter:none;opacity:1} .stx-n.na{color:#9AA7B5} @media(max-width:640px){.tsx-top{min-height:52px}.tsx-logo{max-height:52px;max-width:170px}.tsx-logos{gap:18px 28px}.tsx-logos img{height:46px;max-width:150px}} /* ===== Rekrutmen: landing seleksi, formulir lamaran, Pusat Tes ===== */ :root{--rk-ink:var(--ink2,#0B1B33);--rk-line:var(--line2,#DCE4EC);--rk-acc:var(--teal,#0D7776);--rk-accd:var(--teal-dark,#0B6261);--rk-tint:var(--lightt,#EAF6F5);--rk-mute:#5A6879;--rk-ok:#1B7A4B;--rk-warn:#9A5B00;--rk-bad:#B3261E} .rk-grid{display:grid;gap:18px} .rk-roles{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} .rk-role{background:#fff;border:1px solid var(--rk-line);border-radius:14px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s,box-shadow .25s,translate .25s} .rk-role:hover{border-color:var(--rk-acc);box-shadow:0 14px 34px rgba(11,27,51,.09);translate:0 -3px} .rk-role .n{font:600 .72rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--rk-acc)} .rk-role h3{margin:0;font-size:1.12rem;color:var(--rk-ink)} .rk-role p{margin:0;font-size:.92rem;color:var(--rk-mute);line-height:1.55} .rk-role dl{margin:6px 0 0;display:grid;gap:6px;font-size:.84rem} .rk-role dt{font-weight:600;color:var(--rk-ink)} .rk-role dd{margin:0 0 4px;color:var(--rk-mute)} .rk-role .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px} .rk-tag{font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--rk-tint);color:var(--rk-accd)} /* alur seleksi */ .rk-flow{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:rk} .rk-flow li{position:relative;display:grid;grid-template-columns:76px 1fr;gap:20px;padding:0 0 28px} .rk-flow li:last-child{padding-bottom:0} .rk-flow li::before{content:"";position:absolute;left:37px;top:54px;bottom:-2px;width:2px;background:linear-gradient(var(--rk-acc),var(--rk-line))} .rk-flow li:last-child::before{display:none} .rk-flow .dot{width:76px;height:54px;display:grid;place-items:center;border-radius:12px;background:var(--rk-ink);color:#fff;font:600 .8rem/1.1 "JetBrains Mono",ui-monospace,monospace;text-align:center;position:relative;z-index:1} .rk-flow .dot b{display:block;font-size:1.15rem;color:var(--aqua,#5FD3CD)} .rk-flow h3{margin:2px 0 6px;font-size:1.08rem;color:var(--rk-ink)} .rk-flow p{margin:0 0 6px;color:var(--rk-mute);font-size:.94rem;line-height:1.6} .rk-flow .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} /* baterai asesmen */ .rk-bat{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--rk-line);border-radius:14px;overflow:hidden;font-size:.9rem} .rk-bat th{background:var(--rk-ink);color:#fff;text-align:left;padding:13px 16px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600} .rk-bat td{padding:14px 16px;border-top:1px solid var(--rk-line);vertical-align:top;line-height:1.55} .rk-bat tr:nth-child(even) td{background:#F8FAFC} .rk-bat td:first-child{font-weight:600;color:var(--rk-ink);white-space:nowrap} .rk-bat .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.82rem;color:var(--rk-accd)} .rk-bat tfoot td{background:var(--rk-tint);font-weight:600;color:var(--rk-ink)} .rk-scroll{overflow-x:auto;border-radius:14px} .rk-scroll .rk-bat{min-width:760px} /* bobot penilaian */ .rk-eval{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .rk-ev{background:#fff;border:1px solid var(--rk-line);border-radius:14px;padding:20px} .rk-ev .pct{font:700 2.2rem/1 "Poppins",sans-serif;color:var(--rk-acc)} .rk-ev h3{margin:8px 0 6px;font-size:1rem} .rk-ev p{margin:0;font-size:.88rem;color:var(--rk-mute);line-height:1.55} .rk-ev .bar{height:6px;border-radius:99px;background:var(--rk-line);margin-top:14px;overflow:hidden} .rk-ev .bar i{display:block;height:100%;background:var(--rk-acc);border-radius:99px} .rk-two{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center} @media(max-width:860px){.rk-two{grid-template-columns:1fr}} .rk-photo{border-radius:16px;min-height:340px;background:var(--ph) center/cover;background-image:var(--phl,var(--ph));background-position:var(--pos,50% 50%);box-shadow:0 20px 50px rgba(11,27,51,.18)} .rk-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .rk-list li{display:grid;grid-template-columns:26px 1fr;gap:12px;font-size:.96rem;line-height:1.6;color:#2B3A4D} .rk-list li::before{content:"";width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--rk-tint) url("data:image/svg+xml;utf8,") center/12px no-repeat} .rk-note{border-left:4px solid var(--rk-warn);background:#FFF7E8;padding:14px 18px;border-radius:0 10px 10px 0;font-size:.9rem;color:#5A3B00;line-height:1.6} .rk-faq details{border:1px solid var(--rk-line);border-radius:12px;background:#fff;margin-bottom:10px;padding:0 18px} .rk-faq summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--rk-ink);list-style:none;display:flex;justify-content:space-between;gap:16px} .rk-faq summary::after{content:"+";font-size:1.3rem;color:var(--rk-acc);line-height:1} .rk-faq details[open] summary::after{content:"–"} .rk-faq details p{margin:0 0 16px;color:var(--rk-mute);line-height:1.65;font-size:.94rem} /* ===== FORMULIR LAMARAN ===== */ .ap-shell{background:#fff;border:1px solid var(--rk-line);border-radius:20px;box-shadow:0 24px 60px rgba(11,27,51,.1);overflow:hidden;max-width:880px;margin:0 auto} .ap-shell #applyApp,.ap-shell #affApp{padding:0} .ap-prog{padding:22px 32px 0;background:linear-gradient(#F4F7FA,#fff)} .ap-bar{height:5px;border-radius:99px;background:var(--rk-line);overflow:hidden} .ap-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--rk-acc),var(--aqua,#5FD3CD));border-radius:99px;transition:width .4s cubic-bezier(.2,.8,.2,1)} .ap-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:16px;scrollbar-width:none} .ap-steps::-webkit-scrollbar{display:none} .ap-steps li{flex:1 0 auto;font-size:.76rem;font-weight:600;color:#5A6879;padding:6px 12px;border-radius:99px;white-space:nowrap;border:1px solid transparent} .ap-steps li.done{color:var(--rk-accd)} .ap-steps li.on{background:var(--rk-ink);color:#fff} .ap-form{padding:10px 32px 32px;position:relative} .ap-h{margin:6px 0 20px;font-size:1.5rem;color:var(--rk-ink)} .ap-form .field{margin-bottom:18px;border:0;padding:0} .ap-form label,.ap-form legend{display:block;font-weight:600;font-size:.9rem;color:var(--rk-ink);margin-bottom:7px;padding:0} .ap-form label i,.ap-form legend i{color:var(--rk-bad);font-style:normal;margin-left:2px} .ap-form input[type=text],.ap-form input[type=email],.ap-form input[type=tel],.ap-form input[type=url],.ap-form input[type=number],.ap-form select,.ap-form textarea{width:100%;font:inherit;font-size:.96rem;padding:13px 14px;border:1.5px solid #C9D4DF;border-radius:10px;background:#fff;color:var(--rk-ink);transition:border-color .2s,box-shadow .2s} .ap-form textarea{resize:vertical;min-height:104px;line-height:1.55} .ap-form input:focus,.ap-form select:focus,.ap-form textarea:focus{outline:0;border-color:var(--rk-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--rk-acc) 18%,transparent)} .ap-hint{display:block;margin-top:6px;font-size:.8rem;color:var(--rk-mute)} .ap-fe{display:block;margin-top:6px;font-size:.82rem;font-weight:600;color:var(--rk-bad)} .ap-chips{display:flex;flex-wrap:wrap;gap:8px} .ap-chips legend{flex:0 0 100%} .ap-chip{margin:0!important;display:inline-flex!important;cursor:pointer} .ap-chip input{position:absolute;opacity:0;pointer-events:none} .ap-chip span{padding:9px 16px;border:1.5px solid #C9D4DF;border-radius:99px;font-weight:500;font-size:.88rem;color:#2B3A4D;transition:all .2s;background:#fff} .ap-chip:hover span{border-color:var(--rk-acc)} .ap-chip input:checked+span{background:var(--rk-ink);border-color:var(--rk-ink);color:#fff} .ap-chip input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--rk-acc) 55%,transparent);outline-offset:2px} .ap-form input[type=checkbox]:not(.ap-chip input){width:20px;height:20px;accent-color:var(--rk-acc);flex:none;margin-top:2px} .ap-form .field:has(input[type=checkbox]:not(.ap-chip input)) label{display:flex;gap:12px;font-weight:400;font-size:.88rem;line-height:1.55;padding:14px 16px;border:1.5px solid var(--rk-line);border-radius:10px;background:#F8FAFC} .ap-form input[type=file]{width:100%;padding:18px;border:2px dashed #B5C3D1;border-radius:12px;background:#F8FAFC;font:inherit;font-size:.9rem;cursor:pointer} .ap-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--rk-line)} .ap-form .pt-dl{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:0;margin:16px 0 0;border:1px solid var(--rk-line);border-radius:12px;overflow:hidden;font-size:.9rem} .ap-form .pt-dl dt{padding:11px 14px;background:#F4F7FA;font-weight:600;color:var(--rk-ink);border-bottom:1px solid var(--rk-line)} .ap-form .pt-dl dd{margin:0;padding:11px 14px;border-bottom:1px solid var(--rk-line);word-break:break-word} .ap-form .pt-dl dt:last-of-type,.ap-form .pt-dl dd:last-of-type{border-bottom:0} @media(max-width:560px){.ap-form,.ap-prog{padding-left:18px;padding-right:18px}.ap-form .pt-dl{grid-template-columns:1fr}} .ap-form .pt-err{padding:12px 14px;border-radius:10px;background:#FDECEA;color:#8A1C14;font-weight:600;font-size:.88rem;margin:12px 0 0} .ap-shell .pt-demo{margin:0;border-radius:0;font-size:.82rem;padding:10px 32px;background:#FFF4D6;color:#5A3B00;border-bottom:1px solid #F1D88F} .ap-done{padding:40px 32px} .ap-done h2{margin:0 0 10px;font-size:1.7rem;color:var(--rk-ink)} .ap-done ol{padding-left:20px;display:grid;gap:10px;line-height:1.6} .ap-closed{padding:44px 32px;text-align:center} /* ===== PUSAT TES ===== */ body.ts-focus{background:#F4F7FA} body.ts-focus>header,body.ts-focus .site-header,body.ts-focus footer,body.ts-focus .site-footer,body.ts-focus .skip-link,body.ts-focus .wa-float,body.ts-focus .fb-pp{display:none!important} body.ts-focus #konten{padding:0;min-height:100vh} .ts-root{max-width:1180px;margin:0 auto;padding:0 18px 60px} .ts-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--rk-ink);color:#fff;padding:12px 20px;margin:0 -18px 22px;box-shadow:0 6px 24px rgba(11,27,51,.2)} .ts-top .brand{font-weight:700;letter-spacing:.02em}.ts-top .brand small{display:block;font:500 .66rem/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;color:#8FDDD8;text-transform:uppercase} .ts-mod{flex:1;min-width:0;text-align:center;font-weight:600;font-size:.92rem} .ts-mod small{display:block;font-weight:400;color:#B9C6D6;font-size:.74rem} .ts-time{font:700 1.35rem/1 "JetBrains Mono",ui-monospace,monospace;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.1);min-width:98px;text-align:center} .ts-time.warn{background:#9A5B00;color:#fff}.ts-time.crit{background:var(--rk-bad);animation:tsPulse 1s infinite} @keyframes tsPulse{50%{opacity:.7}} .ts-card{background:#fff;border:1px solid var(--rk-line);border-radius:16px;box-shadow:0 1px 2px rgba(11,27,51,.05),0 10px 30px rgba(11,27,51,.06)} .ts-gate{max-width:560px;margin:60px auto;padding:34px} .ts-gate h1{font-size:1.7rem;margin:0 0 8px;color:var(--rk-ink)} .ts-gate p{color:var(--rk-mute);line-height:1.6} .ts-code{font:600 1.2rem "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;text-align:center;width:100%;padding:16px;border:2px solid #C9D4DF;border-radius:12px} .ts-code:focus{outline:0;border-color:var(--rk-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--rk-acc) 18%,transparent)} .ts-demo{margin-top:22px;padding:16px;border:1px dashed #D9B25A;background:#FFF9EA;border-radius:12px;font-size:.84rem;color:#5A3B00} .ts-demo select,.ts-demo button{font:inherit;font-size:.84rem} .ts-demo .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center} .ts-demo select{padding:8px 10px;border:1px solid #D9B25A;border-radius:8px;background:#fff} .ts-demo label{font-weight:600} .ts-brief{padding:30px 34px} .ts-brief h2{margin:0 0 6px;font-size:1.5rem;color:var(--rk-ink)} .ts-brief .sub{color:var(--rk-mute);margin:0 0 20px} .ts-sess{display:grid;gap:14px;margin:18px 0} .ts-sess .s{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--rk-line);border-radius:12px} .ts-sess .s b.no{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:var(--rk-tint);color:var(--rk-accd);font:700 .9rem "JetBrains Mono",monospace} .ts-sess .s.done{background:#F2FAF5;border-color:#B8E0C8}.ts-sess .s .t{font:600 .86rem "JetBrains Mono",monospace;color:var(--rk-mute)} .ts-rules{display:grid;gap:10px;padding:0;margin:14px 0;list-style:none} .ts-rules li{padding:11px 14px;border-left:3px solid var(--rk-acc);background:#F8FAFC;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.55} .ts-check{display:flex;gap:12px;padding:14px 16px;border:1.5px solid var(--rk-line);border-radius:10px;font-size:.9rem;line-height:1.55;margin:10px 0;cursor:pointer} .ts-check input{width:20px;height:20px;accent-color:var(--rk-acc);flex:none;margin-top:2px} .ts-main{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start} @media(max-width:980px){.ts-main{grid-template-columns:1fr}.ts-top{flex-wrap:wrap}.ts-mod{order:3;flex:1 0 100%}} .ts-q{padding:26px 30px} .ts-q .qn{font:600 .76rem "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--rk-acc);text-transform:uppercase;display:flex;justify-content:space-between;gap:10px;align-items:center} .ts-q .stem{font-size:1.06rem;line-height:1.65;margin:12px 0 16px;color:var(--rk-ink);font-weight:500} .ts-pass{background:#F8FAFC;border:1px solid var(--rk-line);border-radius:12px;padding:16px 18px;margin:12px 0 16px;font-size:.95rem;line-height:1.7} .ts-pass b{display:block;margin-bottom:6px;color:var(--rk-accd)} .ts-tbl{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:.88rem} .ts-tbl caption{caption-side:top;text-align:left;font-weight:600;font-size:.82rem;color:var(--rk-mute);padding:0 0 6px} .ts-tbl th,.ts-tbl td{padding:9px 12px;border:1px solid var(--rk-line);text-align:right;font-variant-numeric:tabular-nums} .ts-tbl th{background:var(--rk-ink);color:#fff;font-weight:600;font-size:.78rem} .ts-tbl td:first-child,.ts-tbl th:first-child{text-align:left} .ts-tbl tbody tr:nth-child(even){background:#F8FAFC} .ts-svg{display:block;max-width:100%;margin:6px auto 16px} .ts-svg svg{width:100%;height:auto;max-width:430px} .ts-opts{display:grid;gap:10px} .ts-opt{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--rk-line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff} .ts-opt:hover{border-color:var(--rk-acc);background:#F8FCFC} .ts-opt input{position:absolute;opacity:0} .ts-opt .k{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#EEF2F6;font-weight:700;font-size:.86rem;color:var(--rk-ink)} .ts-opt:has(input:checked){border-color:var(--rk-acc);background:var(--rk-tint)} .ts-opt:has(input:checked) .k{background:var(--rk-acc);color:#fff} .ts-opt:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--rk-acc) 55%,transparent);outline-offset:2px} .ts-opts.fig{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))} .ts-opts.fig .ts-opt{grid-template-columns:1fr;justify-items:center;padding:10px} .ts-opts.fig .ts-opt svg{width:84px;height:84px} .ts-opts.tfc{grid-template-columns:repeat(3,1fr)}@media(max-width:600px){.ts-opts.tfc{grid-template-columns:1fr}} .ts-opts.tfc .ts-opt{grid-template-columns:1fr;text-align:center;justify-items:center;font-weight:600} .ts-two{width:100%;border-collapse:separate;border-spacing:0 8px} .ts-two th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rk-mute);text-align:center;padding:0 8px 4px} .ts-two td{padding:12px 14px;background:#fff;border:1.5px solid var(--rk-line);font-size:.94rem;line-height:1.55;vertical-align:middle} .ts-two td:first-child{border-radius:12px 0 0 12px;border-right:0}.ts-two td:last-child{border-radius:0 12px 12px 0;border-left:0} .ts-two td.c{width:96px;text-align:center;border-left:0;border-right:0} .ts-two td.c label{display:grid;place-items:center;cursor:pointer;min-height:34px} .ts-two td.c input{width:22px;height:22px;accent-color:var(--rk-acc)} .ts-two td.c.l input{accent-color:#B3261E} .ts-two tr:has(input:checked) td{background:var(--rk-tint)} .ts-case h3{margin:16px 0 6px;font-size:1rem;color:var(--rk-ink)} .ts-case ol{margin:6px 0;padding-left:20px;line-height:1.65} .ts-ans{width:100%;min-height:300px;font:inherit;font-size:.96rem;line-height:1.65;padding:14px;border:1.5px solid #C9D4DF;border-radius:12px;resize:vertical} .ts-ans:focus{outline:0;border-color:var(--rk-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--rk-acc) 18%,transparent)} .ts-wc{font:500 .78rem "JetBrains Mono",monospace;color:var(--rk-mute);text-align:right;margin-top:6px} .ts-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rk-line);flex-wrap:wrap} .ts-side{position:sticky;top:84px;display:grid;gap:14px} .ts-pal{padding:16px} .ts-pal h3{margin:0 0 10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rk-mute)} .ts-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px} .ts-grid button{aspect-ratio:1;border:1.5px solid var(--rk-line);border-radius:9px;background:#fff;font:600 .82rem "JetBrains Mono",monospace;cursor:pointer;color:#2B3A4D;position:relative} .ts-grid button.a{background:var(--rk-ink);border-color:var(--rk-ink);color:#fff} .ts-grid button.cur{outline:3px solid var(--rk-acc);outline-offset:1px} .ts-grid button.f::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#E5A100} .ts-leg{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:.72rem;color:var(--rk-mute)} .ts-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;border:1.5px solid var(--rk-line);margin-right:4px;vertical-align:-1px} .ts-leg i.a{background:var(--rk-ink);border-color:var(--rk-ink)}.ts-leg i.f{background:#E5A100;border-color:#E5A100} .ts-tools{padding:14px;display:grid;gap:8px} .ts-tools button{font:inherit;font-size:.86rem} .ts-calc{padding:12px;border-radius:12px;background:#0B1B33;color:#fff} .ts-calc output{display:block;min-height:42px;padding:8px 10px;margin-bottom:8px;border-radius:8px;background:#fff;color:#0B1B33;text-align:right;font:600 1.15rem "JetBrains Mono",monospace;overflow:hidden} .ts-calc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .ts-calc button{padding:11px 0;border:0;border-radius:8px;background:#1E3354;color:#fff;font:600 1rem "JetBrains Mono",monospace;cursor:pointer} .ts-calc button.op{background:#0D7776}.ts-calc button.eq{background:#E5A100;color:#0B1B33} .ts-pad{width:100%;min-height:110px;font:inherit;font-size:.86rem;padding:10px;border:1.5px solid var(--rk-line);border-radius:10px;resize:vertical} .ts-mask{position:fixed;inset:0;z-index:1500;background:rgba(11,27,51,.62);display:grid;place-items:center;padding:18px} .ts-dlg{width:min(520px,100%);background:#fff;border-radius:16px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35)} .ts-dlg h3{margin:0 0 8px;font-size:1.2rem} .ts-dlg .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap} .ts-demo-bar{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:900;background:#0B1B33;color:#fff;border-radius:99px;padding:8px 10px 8px 16px;display:flex;gap:10px;align-items:center;font-size:.78rem;box-shadow:0 12px 30px rgba(0,0,0,.3)} .ts-demo-bar button{font:inherit;font-size:.78rem;border:0;border-radius:99px;padding:7px 14px;cursor:pointer;background:#E5A100;color:#0B1B33;font-weight:700} .ts-done{max-width:640px;margin:70px auto;padding:38px;text-align:center} .ts-done h2{margin:0 0 10px;font-size:1.6rem}.ts-done .ref{font:700 1.3rem "JetBrains Mono",monospace;letter-spacing:.12em;padding:10px 16px;background:var(--rk-tint);color:var(--rk-accd);border-radius:10px;display:inline-block;margin:10px 0} /* ===== LAPORAN PENILAI ===== */ .rp{padding:0 0 40px} .rp h1{font-size:1.7rem;margin:0 0 4px} .rp .sub{color:var(--rk-mute);margin:0 0 20px} .rp-hero{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:26px;align-items:center} @media(max-width:720px){.rp-hero{grid-template-columns:1fr}} .rp-ring{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c,#0D7776) calc(var(--v)*1%),#E3EAF1 0)} .rp-ring div{width:140px;height:140px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;font:700 2.4rem/1 Poppins,sans-serif;color:var(--rk-ink)} .rp-ring small{display:block;font:500 .7rem "JetBrains Mono",monospace;color:var(--rk-mute);letter-spacing:.08em;margin-top:4px} .rp-band{display:inline-block;padding:5px 14px;border-radius:99px;font-weight:700;font-size:.82rem} .rp-band.k{background:#DDF3E7;color:#14663D}.rp-band.m{background:#E1ECFA;color:#1F5FA8}.rp-band.b{background:#FDE8E6;color:#8A1C14}.rp-band.s{background:#FFF1D1;color:#7A4A00} .rp-mods{display:grid;gap:12px;padding:6px 26px 26px} .rp-m{display:grid;grid-template-columns:200px 1fr 70px;gap:14px;align-items:center;font-size:.9rem} @media(max-width:640px){.rp-m{grid-template-columns:1fr 60px}.rp-m .nm{grid-column:1/-1}} .rp-track{position:relative;height:14px;border-radius:99px;background:#E7EDF3} .rp-track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--c,#0D7776)} .rp-track u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#0B1B33;text-decoration:none} .rp-m b{text-align:right;font:700 .95rem "JetBrains Mono",monospace} .rp-flag{padding:12px 14px;border-radius:10px;background:#FFF3E0;border-left:4px solid #E5A100;margin:8px 0;font-size:.88rem;line-height:1.55} .rp-flag b{color:#7A4A00} .rp-sec{padding:22px 26px;margin-top:16px} .rp-sec h2{margin:0 0 12px;font-size:1.1rem} .rp-dim{display:grid;grid-template-columns:170px 1fr 36px;gap:12px;align-items:center;padding:6px 0;font-size:.88rem} .rp-rub{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--rk-line);font-size:.88rem} .rp-rub select{padding:8px;border:1.5px solid var(--rk-line);border-radius:8px;font:inherit} .rp-rub small{display:block;color:var(--rk-mute);margin-top:3px} .rp-it{border:1px solid var(--rk-line);border-radius:12px;margin:10px 0;overflow:hidden} .rp-it>summary{cursor:pointer;padding:12px 16px;display:flex;gap:12px;align-items:center;font-size:.9rem;list-style:none;background:#F8FAFC} .rp-it>summary .d{font:600 .72rem "JetBrains Mono",monospace;padding:3px 8px;border-radius:6px;background:var(--rk-ink);color:#fff} .rp-it>summary .r{margin-left:auto;font-weight:700} .rp-it .body{padding:14px 16px;font-size:.88rem;line-height:1.6} .rp-it .ok{color:var(--rk-ok)}.rp-it .no{color:var(--rk-bad)} .rp-ex{background:#F2FAF5;border-left:4px solid var(--rk-ok);padding:10px 14px;border-radius:0 8px 8px 0;margin-top:10px} .rp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px} .rp-tabs button{font:inherit;font-size:.84rem;font-weight:600;padding:8px 16px;border-radius:99px;border:1.5px solid var(--rk-line);background:#fff;cursor:pointer;color:#2B3A4D} .rp-tabs button.on{background:var(--rk-ink);border-color:var(--rk-ink);color:#fff} /* perbaikan setelah uji visual */ .ts-top .brand{color:#fff} body.ts-focus .wa,body.ts-focus .totop,body.ts-focus a[href*="wa.me"]{display:none!important} .rk-bat td.mono{white-space:nowrap} .ap-steps{flex-wrap:nowrap!important}.ap-steps li{padding:6px 10px} /* ===== area sentuh (audit 16 Okt 2026): tombol menu dan tautan footer di layar sentuh ===== */ .menu-btn{min-width:44px;min-height:44px;align-items:center;justify-content:center} @media (max-width:900px),(pointer:coarse){ footer a:not(.brand){display:inline-block;padding:6px 0;line-height:1.35} } /* ===== perbaikan audit 16 Okt 2026 ===== */ /* kontras: tautan footer berada di latar navy */ footer .f-links a{color:#A9DFDA} footer .f-links a:hover,footer .f-links a:focus-visible{color:#fff} /* tombol WhatsApp dan ke-atas mengambang tidak menutup tautan paling kanan di footer */ footer .f-bot{padding-right:84px} @media (max-width:700px){footer .f-bot{padding-right:0;padding-bottom:76px}} /* kontras: label tingkat risiko investasi */ .invest-risk.risk-low{color:#1F6B3A} .invest-risk.risk-mid{color:#8A5A00} /* konten tidak boleh tersembunyi selamanya bila skrip animasi gagal dimuat */ @keyframes rv-aman{to{opacity:1;transform:none}} html:not(.rv-ok) .rv:not(.in),html:not(.rv-ok) .reveal:not(.in){animation:rv-aman .01s linear 3.5s forwards} /* kontras: daftar berlatar putih di dalam panel gelap (halaman Tentang), label tab beranda, tag paket */ /* gaya sebaris pada HTML mengalahkan CSS biasa, jadi memakai !important dan menarget elemen bergaya itu saja */ .split-visual .check-list.cl-rows li>span[style*="CFE0EA" i]{color:#2D3B4E!important} .tabs-list .tab .tag-c{color:#0B6261} span.package-tag[style*="--gold"]{color:#8A5A00!important}