DAN blok
di dalamnya → hero kembali ke gradient statis .wash biasa.
Seluruh blok CSS ini boleh dibuang tanpa menyentuh bagian lain.
===================================================== */
.hero.wash--flow{
background-color:var(--pm-bg);
background-image:radial-gradient(rgba(255,255,255,.03) .5px, transparent .5px);
background-size:3px 3px;
}
/* matikan lapisan gradient statis bawaan .wash agar tidak dobel */
.hero.wash--flow::before,.hero.wash--flow::after{display:none}
.flow{
position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;
/* saturate memurnikan hue: biru #0246F0 → rgb(0,72,255), komponen
merahnya dibuang sehingga tidak terbaca keabuan.
Catatan: mix-blend-mode:screen sempat dicoba di sini dan dilepas —
di atas latar sepekat #0A0D14 efeknya nyaris nol (chroma 40→41),
hanya menambah beban compositing. Kepekatan warna ditentukan alpha
pada .flow__a / .flow__b di bawah. */
filter:blur(66px) saturate(180%);
}
.flow i{
position:absolute;display:block;
will-change:transform,border-radius;
}
/* massa biru — melintas dari kiri ke kanan */
.flow__a{
left:-10%;top:0;width:52%;height:74%;
background:rgba(2,70,240,.17);
animation:amoebaDriftA 27s ease-in-out infinite alternate,
amoebaMorph 19s ease-in-out infinite;
}
/* massa pink — melintas berlawanan arah */
.flow__b{
left:56%;top:-10%;width:42%;height:58%;
background:rgba(246,85,166,.10);
animation:amoebaDriftB 36s ease-in-out infinite alternate,
amoebaMorph 24s ease-in-out infinite reverse;
}
/* Ekor: delay POSITIF, bukan negatif.
Negatif = animasi seolah sudah berjalan duluan → hantu MENDAHULUI induk.
Positif = fasenya tertinggal → hantu selalu berada di belakang arah
gerak, baik saat melaju ke kanan maupun saat kembali ke kiri. */
.flow__t1{animation-delay:2.6s,1.3s;opacity:.5}
.flow__t2{animation-delay:5.2s,2.6s;opacity:.26}
@keyframes amoebaMorph{
0%,100%{border-radius:60% 40% 48% 52% / 56% 46% 54% 44%}
25% {border-radius:44% 56% 62% 38% / 48% 60% 40% 52%}
50% {border-radius:52% 48% 34% 66% / 64% 36% 58% 42%}
75% {border-radius:38% 62% 56% 44% / 42% 56% 44% 58%}
}
@keyframes amoebaDriftA{
from{transform:translate3d(-14%,4%,0) rotate(0deg) scale(1)}
to {transform:translate3d(118%,-6%,0) rotate(150deg) scale(1.1)}
}
@keyframes amoebaDriftB{
from{transform:translate3d(10%,-2%,0) rotate(0deg) scale(1)}
to {transform:translate3d(-128%,12%,0) rotate(-130deg) scale(.9)}
}
/* =====================================================
Hero — editorial, asimetris
===================================================== */
.hero{
background:var(--pm-bg);
/* 60px = tinggi nav. Nav sekarang fixed (tidak memakan ruang layout),
jadi ruangnya diganti di sini. Total jarak ke judul tetap sama
seperti sebelumnya: 60px + padding-top .hero__grid. */
padding:60px 0 0;
border-bottom:1px solid var(--pm-line);
}
.hero__aurora{display:none}
.hero__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
gap:56px;align-items:end;
padding:clamp(56px,7vw,104px) 0 clamp(44px,5vw,64px);
border-bottom:1px solid var(--pm-line);
}
.hero__copy{max-width:none;text-align:left}
/* Hero sengaja lebih besar dari heading section (36px) agar ada hierarki
jelas antara judul utama dan judul bagian, tanpa terlalu memakan ruang.
Frasa terpanjang "Reputation Analytics" kini menempati barisnya sendiri,
jadi ruang yang tersedia lega. Minimum tetap 33px untuk mobile. */
.hero h1{color:var(--pm-fg);max-width:none;font-size:clamp(33px,4.7vw,68px)}
/* Frasa berganti dengan efek ketik.
Susunan: "Renalar: AI" / [frasa] / "Platform".
Frasa menempati barisnya SENDIRI di semua ukuran layar, sehingga
panjangnya yang berubah-ubah tidak pernah menggeser kata lain dan
tinggi hero tetap konstan sepanjang siklus. */
.type{display:inline}
.type__caret{
display:inline-block;width:.05em;height:.78em;margin-left:.07em;
background:var(--pm-accent);vertical-align:-.04em;
animation:caretBlink 1.05s steps(1,end) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero .lede{margin:24px 0 0;text-align:left;max-width:44ch;font-size:var(--t-lede)}
/* Shot hero tampil selebar wrap — beri kerapatan yang wajar */
@media (min-width:961px){ .hero .shot{font-size:9.4px} }
.hero .btn-row{margin-top:32px;justify-content:flex-start;gap:18px;align-items:center}
.hero__meta,.tagpill,.scrollcue,.hero__strip{display:none}
/* Daftar ringkas di kanan — memberi struktur, bukan hiasan */
.hero__index{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.hero__index li{
display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;
padding:14px 0;border-top:1px solid var(--pm-line);
font-size:13.5px;color:var(--pm-fg-2);line-height:1.5;
}
.hero__index li:last-child{border-bottom:1px solid var(--pm-line)}
.hero__index b{
font-size:var(--t-meta);font-weight:600;letter-spacing:.1em;color:var(--pm-fg-3);
padding-top:.25em;
}
.hero__visual{margin:0;padding:clamp(36px,4.5vw,64px) 0 clamp(48px,6vw,88px)}
/* Shot hero paling besar — beri jeda sedikit dan durasi lebih panjang
supaya masuknya terasa mengendap, bukan menyentak. */
.hero__visual.reveal{transition:opacity .8s ease-out .16s,transform .8s var(--ease-back) .16s}
@media (max-width:900px){
.hero__grid{grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
.hero h1{max-width:none}
}
/* =====================================================
Baris bernomor
===================================================== */
.rows{border-top:1px solid var(--pm-line)}
.rows__item{
display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.15fr);gap:24px;
padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--pm-line);align-items:start;
}
.rows__n{font-size:var(--t-meta);font-weight:600;letter-spacing:.1em;color:var(--pm-fg-3);padding-top:.45em}
.rows__item h3{font-size:var(--t-h3);letter-spacing:-.012em}
.rows__item p{font-size:14.5px;margin:0;color:var(--pm-fg-2)}
@media (max-width:820px){
.rows__item{grid-template-columns:40px minmax(0,1fr);gap:14px}
.rows__item p{grid-column:2;margin-top:6px}
}
/* =====================================================
Kartu — datar, hanya hairline
===================================================== */
.card{
background:transparent;border:1px solid var(--pm-line);border-radius:8px;
box-shadow:none;padding:26px;
transition:background .25s ease,border-color .25s ease;
}
.card::before{display:none}
.card--hover:hover{background:var(--pm-surface);border-color:var(--pm-line-2);transform:none;box-shadow:none}
.card h3{margin-bottom:8px}
.card p{font-size:14px;color:var(--pm-fg-2)}
.card--dark{background:transparent;border-color:var(--pm-line)}
.card--dark p{color:var(--pm-fg-2)}
.card__link{color:var(--pm-fg-2);font-size:13px;font-weight:500;margin-top:18px}
.card--link:hover .card__link,.card__link:hover{color:var(--pm-fg)}
.icon-circle{
width:32px;height:32px;border-radius:6px;margin-bottom:18px;
background:transparent;border:1px solid var(--pm-line);color:var(--pm-fg-2);
}
.icon-circle svg{width:15px;height:15px}
.card--dark .icon-circle{background:transparent;color:var(--pm-fg-2)}
.grid{gap:1px;background:var(--pm-line);border:1px solid var(--pm-line);border-radius:8px;overflow:hidden}
.grid > *{border:0 !important;border-radius:0 !important;background:var(--pm-bg)}
.grid--3 > *,.grid--4 > *{padding:28px}
.grid > *:hover{background:var(--pm-bg-2)}
.section--alt .grid > *{background:var(--pm-bg-2)}
.section--alt .grid > *:hover{background:#11151F}
@media (max-width:640px){.grid{border-radius:8px}}
/* Bento diganti grid rata — lebih tenang */
.bento{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--pm-line);border:1px solid var(--pm-line);border-radius:8px;overflow:hidden;
}
.bento > *{grid-column:auto !important;border:0 !important;border-radius:0 !important;
background:var(--pm-bg);padding:28px;transition:background .25s ease}
.bento > *:hover{background:var(--pm-bg-2)}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}
/* =====================================================
Steps
===================================================== */
.steps{gap:1px;background:var(--pm-line);border:1px solid var(--pm-line);border-radius:8px;overflow:hidden}
.step{
background:var(--pm-bg-2);border:0;border-radius:0;padding:28px;
transition:background .25s ease;
}
.step:hover{background:#11151F;transform:none;box-shadow:none}
.step::before{
background:transparent;border:0;color:var(--pm-fg-3);width:auto;height:auto;
font-family:var(--font-sans);font-size:var(--t-meta);font-weight:600;letter-spacing:.16em;
box-shadow:none;margin-bottom:16px;display:block;
}
.step::before{content:"0" counter(s)}
.step h3{font-size:var(--t-h3)}
.step p{font-size:14px;color:var(--pm-fg-2)}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
/* =====================================================
Tur produk
===================================================== */
/* Segmented control: track inset + pill terangkat untuk tab aktif */
.tour__tabs{
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:15px;
width:100%;padding:5px;margin:0 0 clamp(28px,3vw,44px);gap:4px;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.tour__tab{
position:relative;text-align:left;padding:13px 16px;border-radius:11px;
cursor:pointer;border:1px solid transparent;
color:var(--pm-fg-2);font-size:13.5px;font-weight:500;
display:flex;align-items:baseline;gap:10px;white-space:normal;
transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.tour__tab::before{
content:attr(data-n);font-size:var(--t-meta);font-weight:700;letter-spacing:.1em;
color:var(--pm-fg-3);transition:color .2s ease;
}
.tour__tab:hover{color:var(--pm-fg);background:rgba(255,255,255,.03)}
.tour__tab:hover::before{color:var(--pm-fg-2)}
.tour__tab:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:-2px}
.tour__tab[aria-selected="true"]{
color:var(--pm-fg);font-weight:600;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
border-color:rgba(255,255,255,.09);
box-shadow:0 8px 20px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.13);
}
.tour__tab[aria-selected="true"]::before{color:var(--pink-500)}
@media (max-width:820px){
.tour__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.tour__tab{padding:12px 12px;font-size:13px}
}
.tour__panel{gap:clamp(28px,3.5vw,56px)}
@media (min-width:961px){
.tour__panel{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
}
.tour__copy h3{font-size:var(--t-h2);letter-spacing:-.022em;line-height:1.16;margin-bottom:14px;font-weight:500}
.tour__copy p{color:var(--pm-fg-2);font-size:14.5px}
.feature__list{margin-top:20px;gap:0}
.feature__list li{
color:var(--pm-fg-2);font-size:13.5px;padding:11px 0 11px 0;
border-top:1px solid var(--pm-line-2);line-height:1.5;
}
.feature__list li:last-child{border-bottom:1px solid var(--pm-line-2)}
.feature__list li::before{display:none}
/* Link tur — dibedakan dari daftar fitur abu di atasnya: pink brand & lebih tebal. */
.tour__copy .card__link{
display:inline-block;margin-top:24px;
color:var(--pink-500);font-size:14px;font-weight:600;
transition:color .2s ease;
}
.tour__copy .card__link:hover{color:var(--pink-300)}
/* =====================================================
FAQ
===================================================== */
.faq{border-top:1px solid var(--pm-line)}
.faq details{border-bottom:1px solid var(--pm-line)}
.faq summary{
color:var(--pm-fg);font-size:17.5px;padding:20px 0;font-weight:500;
letter-spacing:-.01em;transition:color .2s ease;
}
.faq summary:hover,.faq details[open] summary{color:var(--pm-fg-2)}
.faq summary::after{color:var(--pm-fg-3);font-size:18px}
.faq details p{color:var(--pm-fg-2);font-size:14.5px;padding-bottom:22px;max-width:70ch}
/* =====================================================
CTA & footer
===================================================== */
.cta-band{
background:transparent;padding:clamp(72px,8vw,120px) 0;
border-top:1px solid var(--pm-line);text-align:left;
}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
gap:40px;align-items:end}
/* 24ch, bukan 20ch. Pada 20ch (414px) baris Indonesia
"Siap mengkalibrasi ulang" berukuran 415px — lebih 1px sehingga
melipat jadi tiga baris. 24ch memberi kelonggaran ±80px agar kedua
bahasa tetap dua baris sesuai pemenggalan yang ditulis di markup. */
.cta-band h2{font-size:var(--t-h2);max-width:24ch;margin:0}
.cta-band p{color:var(--pm-fg-2);margin:16px 0 0;max-width:52ch}
.cta-band .btn-row{margin:0;justify-content:flex-start}
@media (max-width:820px){
.cta-band .wrap{grid-template-columns:1fr;gap:28px;align-items:start}
}
.footer{background:var(--pm-bg);border-top:1px solid var(--pm-line);padding:64px 0 28px}
.footer__brand img{height:26px}
.footer p,.footer__addr{color:var(--pm-fg-3);font-size:12.5px}
.footer h4{color:var(--pm-fg-3);font-size:var(--t-meta);letter-spacing:.16em;font-weight:600}
.footer li a{color:var(--pm-fg-2);font-size:13px}
.footer li a:hover{color:var(--pm-fg)}
.footer__bottom{border-top-color:var(--pm-line);color:var(--pm-fg-3);font-size:11.5px;margin-top:40px}
/* =====================================================
Motion
===================================================== */
/* Bilah progres gulir. position:fixed WAJIB — tanpa itu ia jadi blok statis
setinggi 1px yang memakan ruang layout di puncak halaman (mendorong hero
turun 1px sehingga muncul garis latar polos di atas gradient), sekaligus
membuat indikatornya tidak berfungsi. site.js mengisi scaleX-nya. */
.progress{
position:fixed;top:0;left:0;width:100%;height:1px;z-index:120;
transform:scaleX(0);transform-origin:0 50%;
background:var(--pm-fg);opacity:.5;
}
/* =====================================================
SUBPAGE — dukungan halaman selain homepage
Homepage: penuh gelap, nav fixed (perlu untuk gradient hero).
Subpage: hero gelap + isi terang, dan butuh spacer karena nav fixed.
Aktif untuk yang TIDAK punya kelas .home.
===================================================== */
body:not(.home){padding-top:60px}
/* Hero subpage lebih rapat dari .section biasa: bagian atas sudah dapat
spacer 60px dari nav fixed, jadi padding hero-nya dikurangi agar tidak
terasa jinjang. */
.section--hero{padding:clamp(42px,4.8vw,80px) 0 clamp(54px,6vw,96px)}
/* Di hero, .head adalah satu-satunya isi — margin-bawahnya jadi ruang
mati di bawah lede, jadi dihilangkan. */
.section--hero .head{margin-bottom:0}
/* ── Section terang ──────────────────────────────────
premium.css membuat .section transparan di atas body gelap. Beri
kelas .section--light pada bagian yang harus tampil terang agar
membaca teks panjang tidak melelahkan mata. */
.section--light{
background:var(--lt-bg);color:var(--lt-fg);
border-top:1px solid var(--lt-line);border-bottom:0;
}
.section--light + .section--light{border-top:0}
.section--light.section--alt{background:var(--lt-bg-2)}
.section--light h1,.section--light h2,.section--light h3,
.section--light h4,.section--light h5{color:var(--lt-fg)}
.section--light p,.section--light .lede{color:var(--lt-fg-2)}
.section--light .lede{max-width:60ch}
.section--light .slabel{color:var(--lt-fg-3)}
.section--light .slabel b{color:var(--pink-500)}
.section--light .eyebrow{color:var(--pink-500)}
/* Kartu terang */
.section--light .card{
background:var(--lt-surface);border:1px solid var(--lt-line);
box-shadow:0 6px 22px -16px rgba(17,26,54,.22);
}
.section--light .card::before{display:none}
.section--light .card--hover:hover{
background:var(--lt-surface);border-color:var(--lt-line-2);
transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(17,26,54,.28);
}
.section--light .card h3{color:var(--lt-fg)}
.section--light .card p{color:var(--lt-fg-2)}
.section--light .card__link{color:var(--pink-700)}
.section--light .card--link:hover .card__link,
.section--light .card__link:hover{color:var(--pink-500)}
/* Feedback: tautan teks (card link) biru -> pink sesuai brand guideline.
site.css mewarnai .card--link .card__link biru; ditimpa di sini.
Section gelap pakai pink terang, section terang pakai pink gelap. */
.card--link .card__link{color:var(--pink-500)}
.card--link:hover .card__link{color:var(--pink-300)}
.section--light .card--link .card__link{color:var(--pink-700)}
.section--light .card--link:hover .card__link{color:var(--pink-500)}
.section--light .icon-circle{
background:#EEF3FF;border:1px solid #DCE6FE;color:var(--pm-accent);
}
/* Grid berpagar hairline versi terang */
.section--light .grid,.section--light .bento,.section--light .steps{
background:var(--lt-line);border-color:var(--lt-line);
}
.section--light .grid > *,.section--light .bento > *,.section--light .step{background:var(--lt-surface)}
.section--light .grid > *:hover,.section--light .bento > *:hover,.section--light .step:hover{background:#FBFCFE}
/* Steps: kartu gelap bawaan tema perlu dipaksa terang di section terang
agar nomor, judul, dan paragrafnya terbaca. */
.section--light .step::before{color:var(--lt-fg-3)}
.section--light .step h3{color:var(--lt-fg)}
.section--light .step p{color:var(--lt-fg-2)}
/* Daftar fitur terang */
.section--light .feature__list li{color:var(--lt-fg-2);border-top-color:var(--lt-line)}
.section--light .feature__list li:last-child{border-bottom-color:var(--lt-line)}
/* FAQ terang */
.section--light .faq{border-top-color:var(--lt-line)}
.section--light .faq details{border-bottom-color:var(--lt-line)}
.section--light .faq summary{color:var(--lt-fg)}
.section--light .faq summary:hover,.section--light .faq details[open] summary{color:var(--pm-accent)}
.section--light .faq summary::after{color:var(--lt-fg-3)}
.section--light .faq details p{color:var(--lt-fg-2)}
/* Tombol PRIMARY di area terang → biru brand (bukan putih premium yang
akan tak terlihat di atas kartu/section terang). Berlaku juga untuk
kartu form putih di hero gelap (.form-card). */
.section--light .btn--primary,.form-card .btn--primary{
background:var(--pm-accent);color:#fff;box-shadow:0 10px 24px -14px rgba(59,107,255,.7);
}
.section--light .btn--primary:hover,.form-card .btn--primary:hover{background:#2E5AF0;color:#fff}
/* Tombol sekunder di area terang */
.section--light .btn--secondary{
background:var(--lt-surface);color:var(--lt-fg);border-color:var(--lt-line-2);
}
.section--light .btn--secondary:hover{background:#fff;border-color:var(--pm-accent)}
/* Split 2 kolom generik (mis. hero halaman demo) */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start}
@media(max-width:900px){.split-2{grid-template-columns:1fr}}
/* Kartu form putih di atas hero gelap */
.form-card{
background:#fff;border:1px solid var(--lt-line);border-radius:14px;
padding:clamp(24px,3vw,34px);box-shadow:0 26px 60px -30px rgba(0,0,0,.6);
}
.form-card h3{color:var(--lt-fg)}
.form-card > p{color:var(--lt-fg-2)}
/* Note & chips terang */
.section--light .note{border-left-color:var(--lt-line-2);color:var(--lt-fg-2)}
.section--light .note strong{color:var(--lt-fg)}
.section--light .chip{border-top-color:var(--lt-line);color:var(--lt-fg-2)}
/* Tabel terang — teks sel default mewarisi warna body (terang) sehingga
tak terbaca di atas latar putih; di sini dipaksa gelap. */
.section--light .table-wrap{background:var(--lt-surface);border-color:var(--lt-line)}
.section--light table{color:var(--lt-fg-2)}
.section--light th,.section--light td{border-bottom-color:var(--lt-line)}
.section--light thead th{background:var(--lt-bg-2);color:var(--lt-fg-3)}
.section--light td strong{color:var(--lt-fg)}
/* ── Kartu harga (tier) ──────────────────────────────
Grid dengan jarak antar-kartu (bukan hairline nempel), dipakai
halaman Harga. */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.tier{
background:var(--lt-surface);border:1px solid var(--lt-line);border-radius:14px;
padding:28px;display:flex;flex-direction:column;
transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.tier:hover{border-color:var(--lt-line-2);box-shadow:0 16px 34px -20px rgba(17,26,54,.3);transform:translateY(-3px)}
.tier--featured{border-color:var(--pm-accent);box-shadow:0 16px 40px -20px rgba(59,107,255,.45)}
.tier__tag{font-size:var(--t-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-fg-3)}
.tier--featured .tier__tag{color:var(--pm-accent)}
.tier h3{font-size:22px;margin:10px 0 4px;color:var(--lt-fg)}
.tier__price{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--lt-fg);margin-bottom:8px}
.tier > p{font-size:14px;color:var(--lt-fg-2);margin-bottom:18px}
.tier ul{list-style:none;display:grid;gap:11px;margin:0 0 24px}
/* Spesifikasi ringkas di kartu paket: cakupan media dan kapasitas topik.
Nama kelas sengaja di-scope ke .tier (BEM) supaya tidak bentrok dengan
aturan global bernama umum. Kelas umum seperti .meta dan .stats pernah
bocor ke mockup produk, jadi jangan pakai nama generik di sini. */
.tier__specs{display:grid;gap:9px;margin:0 0 18px;padding:14px 0;
border-top:1px solid var(--lt-line);border-bottom:1px solid var(--lt-line)}
.tier__spec{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.tier__spec dt{font-size:13px;color:var(--lt-fg-3);flex:none}
.tier__spec dd{font-size:13px;font-weight:600;color:var(--lt-fg);margin:0;text-align:right}
.tier li{font-size:14px;color:var(--lt-fg-2);padding-left:24px;position:relative;line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;
border-left:2px solid var(--pm-accent);border-bottom:2px solid var(--pm-accent);transform:rotate(-45deg)}
.tier .btn{width:100%;margin-top:auto}
/* Butir paket yang bernada negatif ("belum termasuk").
Tanpa ini butir tersebut ikut memakai ikon centang bawaan .tier li::before,
sehingga terbaca bertentangan: centang di sebelah kalimat yang justru
menyatakan sesuatu TIDAK termasuk.
Ikonnya dibuat silang dari dua garis: ::before diubah jadi satu garis
(border-left dimatikan, tinggi dinolkan) lalu diputar +45, ::after
menyediakan garis kedua yang diputar -45. */
.tier li.li--off{color:var(--lt-fg-3)}
.tier li.li--off::before{height:0;border-left:0;border-bottom:2px solid var(--lt-fg-3);
top:9px;transform:rotate(45deg)}
.tier li.li--off::after{content:"";position:absolute;left:0;top:9px;width:12px;height:0;
border-bottom:2px solid var(--lt-fg-3);transform:rotate(-45deg)}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
/* Panel add-on Expert Recommendation.
Kartu PUTIH seperti card terang lain agar menyatu; pink hanya jadi
aksen kecil (pill badge + marker + tombol), bukan latar penuh, supaya
tidak "meledak merah" di tengah tema yang dominan biru/netral. */
.addon,
/* Kartu Paket Advisory memakai gaya yang sama persis dengan blok add-on.
Selektornya digabung, bukan disalin, supaya keduanya tidak bisa menyimpang. */
.advisory{
margin-top:28px;background:var(--lt-surface);border:1px solid var(--lt-line);
border-radius:14px;padding:30px;box-shadow:0 8px 26px -18px rgba(17,26,54,.24);
}
.addon__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
/* eyebrow jadi pill kecil beraksen pink */
.addon .eyebrow,
.advisory .eyebrow{
display:inline-flex;align-items:center;background:var(--pink-100);color:var(--pink-700);
padding:5px 12px 5px 13px;border-radius:999px;letter-spacing:.14em;
}
.addon h3,
.advisory h3{margin:14px 0 0;color:var(--lt-fg);font-size:22px}
.addon p,
.advisory p{margin-top:10px;color:var(--lt-fg-2);max-width:52ch}
/* dua kelas induk agar menang atas .section--light .btn--secondary (0,2,0) */
.addon .addon__cta,
.advisory .advisory__cta{margin-top:20px;border-color:var(--pink-300);color:var(--pink-700)}
.addon .addon__cta:hover,
.advisory .advisory__cta:hover{background:var(--pink-100);border-color:var(--pink-700);color:var(--pink-700)}
.addon__list{list-style:none;display:grid;gap:11px;margin:0}
.addon__list li{font-size:14px;color:var(--lt-fg-2);padding-left:24px;position:relative;line-height:1.5}
.addon__list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--pink-500)}
@media (max-width:820px){.addon__grid{grid-template-columns:1fr;gap:22px}}
/* Tata letak khusus Advisory: teks di kiri, tombol di kanan.
Gaya kartunya tetap ikut .addon di atas, yang diubah hanya susunannya.
Blok add-on mengisi kolom kanan dengan daftar modul, sedangkan kartu ini
memang tidak merinci apa pun, jadi tombolnya yang naik ke sana supaya
sisi kanan tidak menganga kosong.
Harus diletakkan SETELAH aturan .advisory .advisory__cta di atas:
spesifikasinya sama (0,2,0), jadi yang menang adalah yang belakangan. */
/* Kolom teks menyusut sesuai isinya (max-content, dibatasi max-width paragraf
di bawah), sisa ruang jadi milik kolom tombol, lalu tombolnya ditaruh di
tengah sisa itu.
Sebelumnya kolom tombol memakai `auto` sehingga menempel isi: seluruh sisa
ruang menumpuk di kiri tombol dan tombolnya terdorong mepet ke sudut kanan
kartu.
Kolom kedua WAJIB minmax(max-content,1fr), jangan minmax(0,1fr): dengan
batas bawah 0, kolom teks yang max-content merebut ruang lebih dulu dan
kolom tombol tergencet sampai 0px. Terukur di 1024px tombol keluar 21px
dari padding kartu, dan di 860px tombol menabrak teks sekaligus membuat
halaman geser horizontal. */
.advisory{display:grid;grid-template-columns:minmax(0,max-content) minmax(max-content,1fr);
gap:28px;align-items:center}
.advisory .advisory__cta{justify-self:center}
/* Paragraf dilonggarkan dari batas 52ch milik .addon.
Batas itu pas untuk add-on karena kolom kirinya hanya separuh kartu, tapi di
sini kolom kiri hampir 830px, sehingga 52ch (sekitar 492px) menyisakan lubang
kosong lebih dari 330px sebelum tombol. 74ch masih terbaca nyaman untuk
paragraf pendek dua baris, tapi mengisi kolomnya jauh lebih rata. */
.advisory p{max-width:74ch}
.advisory .advisory__cta{margin-top:0;white-space:nowrap}
/* Ditumpuk pada 900px, breakpoint yang sama dengan .tiers di atas: begitu
kartu paket jadi satu kolom, kartu ini ikut. Sebelumnya 820px, dan celah
820-900px itulah yang bikin tombol tergencet. */
@media (max-width:900px){
.advisory{grid-template-columns:1fr;gap:20px}
.advisory .advisory__cta{width:100%;justify-content:center;justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
.js .ln > span{opacity:1 !important;transform:none !important;transition:none}
.reveal{transform:none}
.reveal.stagger > *{opacity:1 !important;transform:none !important;transition:none}
.progress{display:none}
/* Efek ketik dimatikan: frasa pertama tampil diam, caret tidak berkedip */
.type__caret{animation:none;opacity:.55}
/* Bentuk amoeba berhenti bergerak, parkir di posisi tengah yang enak dilihat */
.flow i{animation:none}
.flow__a{transform:translate3d(46%,0,0) rotate(58deg)}
.flow__b{transform:translate3d(-52%,4%,0) rotate(-46deg)}
.flow__t1,.flow__t2{display:none}
}
/* =====================================================
Homepage, komponen section baru
Ditambahkan saat restrukturisasi homepage (lihat docs/).
• .vs dua kolom banding, dipakai "Monitoring biasa vs Renalar"
dan "Otomatis vs tinjauan ahli"
• .checks daftar centang dua kolom, dipakai Use Case dan Trust & QA
• .pilot kartu paket pilot
• panah alur di antara kartu .steps (homepage saja)
Tidak ada token desain baru: semua warna, radius, dan skala huruf
memakai variabel yang sudah ada di colors.css dan berkas ini.
===================================================== */
/* ── Panah alur di section Cara Kerja (HOMEPAGE saja) ──
Dikunci ke body.home: .steps juga dipakai contact-us, features/*, dan
solutions/*, dan halaman-halaman itu tidak ikut berubah.
Tiga kartu .steps sudah bernomor 01/02/03, tapi tidak ada tanda arah:
terbaca sebagai tiga hal sejajar, bukan satu alur berurutan. Penanda
ini duduk tepat di atas hairline pemisah kartu, jadi garis yang sudah
ada yang jadi relnya, tidak ada elemen rel baru.
Kenapa ::after: ::before sudah dipakai .step untuk nomor langkah
(premium.css), dan .step sudah position:relative dari site.css, jadi
tidak ada markup HTML yang perlu ditambah.
Chevron-nya data URI, bentuknya sama persis dengan #i-chevright di
sprite ikon halaman. Warnanya pink (%23F655A6 = --pink-500), sama dengan
centang di .vs, .checks, dan .pilot, supaya bahasa aksennya satu.
Nilai var() tidak bisa dibaca di dalam url(), jadi hexnya terpaksa
ditulis literal. Kalau token itu berubah, ubah juga di sini.
------------------------------------------------------ */
.home .step + .step::after{
content:"";position:absolute;z-index:2;
left:-1px;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
border:1px solid var(--pm-line-2);border-radius:50%;
background-color:var(--pm-bg-2);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F655A6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:13px 13px;
}
/* Di bawah 640px .steps jadi satu kolom (premium.css), jadi penanda
pindah ke sisi atas kartu dan panahnya diputar menghadap ke bawah. */
@media (max-width:640px){
.home .step + .step::after{left:50%;top:-1px;transform:rotate(90deg)}
}
/* ── Dua kolom banding ──────────────────────────────────
Dipakai dua kali:
1. "Monitoring biasa vs Renalar" — kolom kanan ditandai .vs__col--on
(latar naik satu tingkat + centang pink).
2. "Otomatis vs tinjauan ahli" — varian .vs--peer, kedua kolom setara,
centang biru. Ini pembagian peran, bukan perbandingan menang-kalah,
jadi tidak ada kolom yang ditonjolkan.
------------------------------------------------------ */
.vs{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:1px;background:var(--pm-line);
border:1px solid var(--pm-line);border-radius:8px;overflow:hidden;
}
.vs__col{background:var(--pm-bg);padding:clamp(24px,3.2vw,36px)}
.section--alt .vs__col{background:var(--pm-bg-2)}
.vs__col--on,.section--alt .vs__col--on{background:#11151F}
.vs__k{
font-size:var(--t-meta);letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--pm-fg-3);margin:0 0 10px;
}
.vs__col--on .vs__k{color:var(--pink-500)}
.vs--peer .vs__k{color:var(--pm-accent-2)}
.vs__h{
font-family:var(--font-display);font-size:var(--t-h3);font-weight:500;
letter-spacing:-.012em;color:var(--pm-fg-2);margin:0 0 18px;
}
.vs__col--on .vs__h,.vs--peer .vs__h{color:var(--pm-fg)}
.vs__list{list-style:none;margin:0;padding:0;display:grid}
.vs__list li{
position:relative;font-size:14.5px;line-height:1.55;color:var(--pm-fg-2);
padding:11px 0 11px 26px;border-top:1px solid var(--pm-line);
}
.vs__list li:first-child{border-top:0}
/* Kolom kiri (monitoring biasa): strip datar, sengaja tidak bernada positif */
.vs__list li::before{
content:"";position:absolute;left:0;top:1.05em;
width:11px;height:2px;background:var(--pm-fg-3);
}
/* Kolom yang ditonjolkan: centang, dibentuk dari dua border yang diputar
(pola yang sama dengan .tier li::before di premium.css) */
.vs__col--on .vs__list li,.vs--peer .vs__list li{color:var(--pm-fg)}
.vs__col--on .vs__list li::before,
.vs--peer .vs__list li::before{
width:11px;height:6px;background:none;top:.85em;
border-left:2px solid var(--pink-500);border-bottom:2px solid var(--pink-500);
transform:rotate(-45deg);
}
.vs--peer .vs__list li::before{
border-left-color:var(--pm-accent);border-bottom-color:var(--pm-accent);
}
/* Di layar sempit tabel tidak dipotong horizontal, tapi ditumpuk.
Kolom Renalar naik ke atas supaya jawabannya terbaca lebih dulu. */
@media (max-width:820px){
.vs{grid-template-columns:1fr}
.vs__col--on{order:-1}
}
/* ── Daftar centang dua kolom ───────────────────────────
Dipakai di "Yang bisa Renalar selesaikan hari ini" dan "Trust & QA".
Sengaja daftar, bukan kartu: dua section ini isinya butir pendek,
dan kartu akan menaikkan densitas yang justru ingin diturunkan.
------------------------------------------------------ */
.checks{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:clamp(24px,4vw,56px);
border-top:1px solid var(--pm-line);
}
.checks li{
position:relative;font-size:14.5px;line-height:1.55;color:var(--pm-fg-2);
padding:13px 0 13px 26px;border-bottom:1px solid var(--pm-line);
}
.checks li::before{
content:"";position:absolute;left:0;top:1em;width:11px;height:6px;
border-left:2px solid var(--pink-500);border-bottom:2px solid var(--pink-500);
transform:rotate(-45deg);
}
@media (max-width:700px){.checks{grid-template-columns:1fr}}
/* ── Kartu paket pilot ─────────────────────────────────
.tier di premium.css hanya untuk .section--light, jadi tidak bisa
dipakai ulang apa adanya di homepage yang bertema gelap.
------------------------------------------------------ */
.pilot{
background:var(--pm-surface);border:1px solid var(--pm-line-2);
border-radius:8px;padding:clamp(24px,3vw,34px);
}
.pilot__h{
font-size:var(--t-meta);letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--pm-fg-3);margin:0 0 6px;
}
.pilot__list{list-style:none;margin:0;padding:0;display:grid}
.pilot__list li{
position:relative;font-size:14.5px;line-height:1.55;color:var(--pm-fg);
padding:12px 0 12px 26px;border-top:1px solid var(--pm-line);
}
.pilot__list li::before{
content:"";position:absolute;left:0;top:.95em;width:11px;height:6px;
border-left:2px solid var(--pink-500);border-bottom:2px solid var(--pink-500);
transform:rotate(-45deg);
}
/* ── Catatan kaki section ──────────────────────────────
.note di site.css berlatar biru muda (dibuat untuk halaman terang),
jadi tidak dipakai di sini.
------------------------------------------------------ */
.sidenote{
margin:28px 0 0;padding-top:18px;border-top:1px solid var(--pm-line-2);
font-size:14.5px;line-height:1.6;color:var(--pm-fg-2);max-width:82ch;
}
/* ── Baris positioning di section 07 ────────────────── */
.postline{
display:inline-block;margin:20px 0 0;padding:7px 16px;
font-size:13px;line-height:1.5;color:var(--pm-fg-2);
border:1px solid var(--pm-line-2);border-radius:999px;
}
@media (max-width:520px){.postline{border-radius:10px}}